diff --git a/live-editing/configs/TileManagerConfigGenerator.ts b/live-editing/configs/TileManagerConfigGenerator.ts new file mode 100644 index 0000000000..55b83d6123 --- /dev/null +++ b/live-editing/configs/TileManagerConfigGenerator.ts @@ -0,0 +1,18 @@ +import { Config, IConfigGenerator} from 'igniteui-live-editing' +import { BaseAppConfig } from './BaseConfig'; +export class TileManagerConfigGenerator implements IConfigGenerator { + + + public generateConfigs(): Config[] { + const configs = new Array(); + + configs.push(new Config({ + component: 'TileManagerComponent', + additionalDependencies: ["igniteui-webcomponents"], + appConfig: BaseAppConfig, + shortenComponentPathBy: "/layouts/tile-manager/" + })); + + return configs; + } +} diff --git a/live-editing/generators/ConfigGenerators.ts b/live-editing/generators/ConfigGenerators.ts index 1c868d517e..f3e2cac078 100644 --- a/live-editing/generators/ConfigGenerators.ts +++ b/live-editing/generators/ConfigGenerators.ts @@ -63,6 +63,7 @@ import { StepperConfigGenerator } from '../configs/StepperConfigGenerator'; import { PaginationConfigGenerator } from '../configs/PaginationConfigGenerator'; import { PivotGridConfigGenerator } from '../configs/PivotGridConfigGenerator'; import { QueryBuilderConfigGenerator } from '../configs/QueryBuilderConfigGenerator'; +import { TileManagerConfigGenerator } from '../configs/TileManagerConfigGenerator'; export const CONFIG_GENERATORS = [ @@ -136,6 +137,7 @@ export const CONFIG_GENERATORS = TransactionsConfigGenerator, SplitterConfigGenerator, DockManagerConfigGenerator, + TileManagerConfigGenerator, PaginationConfigGenerator, QueryBuilderConfigGenerator ]; diff --git a/package-lock.json b/package-lock.json index 32203e919d..e7957cf905 100644 --- a/package-lock.json +++ b/package-lock.json @@ -34,14 +34,14 @@ "express": "^4.18.2", "file-saver": "^2.0.2", "hammerjs": "^2.0.8", - "igniteui-angular": "19.1.3", + "igniteui-angular": "19.1.4", "igniteui-angular-charts": "^19.0.1", "igniteui-angular-core": "^19.0.1", "igniteui-angular-extras": "^19.1.2", - "igniteui-angular-i18n": "^19.1.0", + "igniteui-angular-i18n": "^19.1.4", "igniteui-dockmanager": "^1.16.0", - "igniteui-live-editing": "^3.0.0", - "igniteui-webcomponents": "^5.2.4", + "igniteui-live-editing": "^3.0.2", + "igniteui-webcomponents": "^5.3.0", "minireset.css": "0.0.6", "rxjs": "^7.8.2", "tslib": "^2.6.1", @@ -13450,14 +13450,14 @@ "license": "BSD-3-Clause" }, "node_modules/igniteui-angular": { - "version": "19.1.3", - "resolved": "https://registry.npmjs.org/igniteui-angular/-/igniteui-angular-19.1.3.tgz", - "integrity": "sha512-qh5FSqhOvMlUi7AqCvTfK/dBivAO0KjAlCYlMJJ77fJaSzYiHKDuFDUUXNmW7gRvPZGKaagh6xN6UBTfynTFXA==", + "version": "19.1.4", + "resolved": "https://registry.npmjs.org/igniteui-angular/-/igniteui-angular-19.1.4.tgz", + "integrity": "sha512-T0f5UJgLdWQ1f+GGwQvUeBNfLXUrjqXUp9xBpvCDkqvbAdz20RIQeN1rR8Pb6wXd7yfKvcW4mgC/6/8YWDGYgQ==", "license": "SEE LICENSE IN LICENSE", "dependencies": { "@igniteui/material-icons-extended": "^3.1.0", "fflate": "^0.8.1", - "igniteui-theming": "^16.0.0", + "igniteui-theming": "^17.0.0", "igniteui-trial-watermark": "^3.0.2", "lodash-es": "^4.17.21", "tslib": "^2.3.0" @@ -13525,9 +13525,9 @@ } }, "node_modules/igniteui-angular-i18n": { - "version": "19.1.1", - "resolved": "https://registry.npmjs.org/igniteui-angular-i18n/-/igniteui-angular-i18n-19.1.1.tgz", - "integrity": "sha512-3f9ft5L1LUirnmEuIAGccHjz43cW25kgVEPGvK06uu4ykwftUTcynulFX9UdVP66JK9ZaEwXxovqfe2Cv5r6zA==", + "version": "19.1.4", + "resolved": "https://registry.npmjs.org/igniteui-angular-i18n/-/igniteui-angular-i18n-19.1.4.tgz", + "integrity": "sha512-x0Q1G39h2EUWIqoPj8XfqeQL6UmJVfCxprSNdXchIxQKWTIy+94IIICe9TqPjU5SWox8TbWamnJTkFyeMpXkng==", "license": "MIT" }, "node_modules/igniteui-dockmanager": { @@ -13546,15 +13546,15 @@ "license": "Apache-2.0" }, "node_modules/igniteui-live-editing": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/igniteui-live-editing/-/igniteui-live-editing-3.0.0.tgz", - "integrity": "sha512-CnJWE5CLAfYQWHvv5kWQysU5C0emtbxsYol0IV6DLFo3T3+FhsTu6PwfE7Odbn6hbckoSU/OnjV0Wk9SN6RFdA==", + "version": "3.0.2", + "resolved": "https://registry.npmjs.org/igniteui-live-editing/-/igniteui-live-editing-3.0.2.tgz", + "integrity": "sha512-nSWaHLWye4HU2+qxYrDuhWCX2gnsdMOk5uLRwKs3bzWRPYvQc/DfLnQn1Z7+qtl/693JzatOrAk0yUIVfGYo/A==", "license": "MIT" }, "node_modules/igniteui-theming": { - "version": "16.1.0", - "resolved": "https://registry.npmjs.org/igniteui-theming/-/igniteui-theming-16.1.0.tgz", - "integrity": "sha512-TfEuswXYScOpHv4/OR08+7M8gEWlaX0f4BpJGTUCkG9EiqTQ8QgGIuOgdPtO54foNNfiCpv5HigpwVC1FEnT2Q==", + "version": "17.0.0", + "resolved": "https://registry.npmjs.org/igniteui-theming/-/igniteui-theming-17.0.0.tgz", + "integrity": "sha512-ktxEk5Xgq2k1Lv+A54W+MtFtlo4Jdtg2L59Pk9zJGx56upjzxuqSHJXdbnTCnbPZmx4xPYxdWkpVKylk47GPQA==", "license": "MIT", "peerDependencies": { "sass": "^1.69.5" @@ -13570,9 +13570,9 @@ } }, "node_modules/igniteui-webcomponents": { - "version": "5.2.4", - "resolved": "https://registry.npmjs.org/igniteui-webcomponents/-/igniteui-webcomponents-5.2.4.tgz", - "integrity": "sha512-EppDLSA0wGX6CFweeF4IVtAjMzcVw6TFDMXVKQQNwXTuSkmWLTGFgwGB7Aj/wryPz8D4bbGe8hF7Mv7sA4xI9w==", + "version": "5.3.0", + "resolved": "https://registry.npmjs.org/igniteui-webcomponents/-/igniteui-webcomponents-5.3.0.tgz", + "integrity": "sha512-K5PPwfT2ECp/W3+mNapt1HW6PRIQK7DkehK4SbsCc513LwTzBL1gfHYax0Hk3eiPJP2M/8ANBJ3yDZdRy6YzXQ==", "license": "SEE LICENSE IN LICENSE", "dependencies": { "@floating-ui/dom": "^1.6.0", diff --git a/package.json b/package.json index e67ba94237..47d2cf8257 100644 --- a/package.json +++ b/package.json @@ -71,14 +71,14 @@ "express": "^4.18.2", "file-saver": "^2.0.2", "hammerjs": "^2.0.8", - "igniteui-angular": "19.1.3", + "igniteui-angular": "19.1.4", "igniteui-angular-charts": "^19.0.1", "igniteui-angular-core": "^19.0.1", "igniteui-angular-extras": "^19.1.2", - "igniteui-angular-i18n": "^19.1.0", + "igniteui-angular-i18n": "^19.1.4", "igniteui-dockmanager": "^1.16.0", - "igniteui-live-editing": "^3.0.0", - "igniteui-webcomponents": "^5.2.4", + "igniteui-live-editing": "^3.0.2", + "igniteui-webcomponents": "^5.3.0", "minireset.css": "0.0.6", "rxjs": "^7.8.2", "tslib": "^2.6.1", diff --git a/src/app/layouts/layouts-routes-data.ts b/src/app/layouts/layouts-routes-data.ts index 9fbc18aafc..6b209d8ce4 100644 --- a/src/app/layouts/layouts-routes-data.ts +++ b/src/app/layouts/layouts-routes-data.ts @@ -60,5 +60,6 @@ export const layoutsRoutesData = { 'divider-sample-1': { displayName: 'Default Divider', parentName: 'Divider' }, 'divider-sample-2': { displayName: 'Vertical Divider', parentName: 'Divider' }, 'divider-sample-3': { displayName: 'Dashed Divider', parentName: 'Divider' }, - 'divider-sample-4': { displayName: 'Inset Divider', parentName: 'Divider' } -}; + 'divider-sample-4': { displayName: 'Inset Divider', parentName: 'Divider' }, + 'tile-manager-sample': { displayName: 'Tile Manager Overview', parentName: 'Tile Manager' } +} diff --git a/src/app/layouts/layouts.routes.ts b/src/app/layouts/layouts.routes.ts index 6878a4b4b1..f1c9ce6897 100644 --- a/src/app/layouts/layouts.routes.ts +++ b/src/app/layouts/layouts.routes.ts @@ -76,6 +76,7 @@ import { StepperStepTypesSampleComponent } from './stepper/stepper-steptypes-sam import { StepperStylingSampleComponent } from './stepper/stepper-styling-sample/stepper-styling-sample.component'; import { StepperOverviewSampleComponent } from './stepper/stepper-overview-sample/stepper-overview-sample.component'; import { StepperSampleReactiveFormsComponent } from './stepper/stepper-sample-reactive-forms/stepper-sample-reactive-forms.component'; +import { TileManagerComponent } from './tile-manager/tile-manager-sample/tile-manager.component'; export const LayoutsRoutes: Routes = [ { @@ -383,5 +384,10 @@ export const LayoutsRoutes: Routes = [ component: CardStylingSampleComponent, data: layoutsRoutesData['card-styling-sample'], path: 'card-styling-sample' + }, + { + component: TileManagerComponent, + data: layoutsRoutesData['tile-manager-sample'], + path: 'tile-manager-sample' } ]; diff --git a/src/app/layouts/tile-manager/tile-manager-sample/tile-manager.component.html b/src/app/layouts/tile-manager/tile-manager-sample/tile-manager.component.html new file mode 100644 index 0000000000..667fb27c3b --- /dev/null +++ b/src/app/layouts/tile-manager/tile-manager-sample/tile-manager.component.html @@ -0,0 +1,158 @@ + + + Order info + + + + + +
+

OrderID

+

10293

+
+ + + + + +
+

Customer Name

+

Tortuga Restaurante

+
+ + + + + +
+

Order Date

+

August 29, 1996

+
+ + + + + +
+

Shipped Date

+

September 11, 1996

+
+ + + + + +
+

Product Name

+

Carnavon Tigers

+
+ + + + + +
+

Ship Country

+

Mexico

+
+ + + + + Order Line Items +
+
+ + +
+ + + +
+

Carnavon Tigers

+ + +
+ Quantity12 +
+
+ Unit Price$50 +
+ + +
+
+ + +
+ + + +
+ Guarana Fantastica + + +
+ Quantity 10 +
+
+ Unit Price $4 +
+ + +
+
+ + +
+ + + +
+ Vegie-spread + + +
+ Quantity 5 +
+
+ Unit Price $35 +
+ + +
+
+ + +
+ + + +
+ Rhonbrau Klosterbier + + +
+ Quantity 7 +
+
+ Unit Price $6 +
+ + +
+
+ + + Order Value +
+

$8.66K

+
+ + + Item quantity +
+

4

+
+ + diff --git a/src/app/layouts/tile-manager/tile-manager-sample/tile-manager.component.scss b/src/app/layouts/tile-manager/tile-manager-sample/tile-manager.component.scss new file mode 100644 index 0000000000..b165960189 --- /dev/null +++ b/src/app/layouts/tile-manager/tile-manager-sample/tile-manager.component.scss @@ -0,0 +1,43 @@ +igc-tile-manager { + margin-bottom: 5px; + } + + .group { + display: flex; + flex-direction: row; + flex-wrap: wrap; + margin-top: 15px; + } + + .card { + min-height: 30px; + min-width: 250px; + max-width: 320px; + margin: 0 15px 15px 15px + } + + igx-card-content { + color: var(--content-text-color); + } + + .body-content { + width: 100%; + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; + } + + .string { + text-align: center; + margin-top: 50px; + color: var(--ig-gray-800); + } + + .sample { + overflow: auto; + } + .content { + display: flex; + justify-content: space-between; + } diff --git a/src/app/layouts/tile-manager/tile-manager-sample/tile-manager.component.ts b/src/app/layouts/tile-manager/tile-manager-sample/tile-manager.component.ts new file mode 100644 index 0000000000..67271271e8 --- /dev/null +++ b/src/app/layouts/tile-manager/tile-manager-sample/tile-manager.component.ts @@ -0,0 +1,31 @@ +import { Component, CUSTOM_ELEMENTS_SCHEMA, OnInit} from '@angular/core'; +import { IgxAvatarComponent, IgxCardComponent, IgxCardContentDirective, IgxCardHeaderComponent, IgxCardHeaderTitleDirective, IgxCardThumbnailDirective, IgxIconComponent, IgxIconService, IgxListComponent, IgxListItemComponent, IgxListLineDirective, IgxListThumbnailDirective} from 'igniteui-angular'; +import { defineComponents, IgcTileManagerComponent } from 'igniteui-webcomponents'; + +defineComponents(IgcTileManagerComponent); + +@Component({ + selector: 'app-tile-manager', + styleUrls: ['./tile-manager.component.scss'], + templateUrl: './tile-manager.component.html', + imports: [IgxCardComponent, IgxCardHeaderComponent, IgxCardHeaderTitleDirective, IgxCardThumbnailDirective, IgxCardContentDirective, IgxListComponent, IgxListItemComponent, IgxListThumbnailDirective, IgxAvatarComponent, IgxIconComponent], + schemas: [CUSTOM_ELEMENTS_SCHEMA] +}) +export class TileManagerComponent implements OnInit { + constructor(protected _iconService: IgxIconService) {} + + public ngOnInit() { + const listIcon = + ''; + + const calendarIcon = + '' + + const productIcon = + '' + + this._iconService.addSvgIconFromText("list", listIcon, "material"); + this._iconService.addSvgIconFromText("calendar", calendarIcon, "material"); + this._iconService.addSvgIconFromText("product", productIcon, "material"); + } +} \ No newline at end of file diff --git a/tsconfig.json b/tsconfig.json index e2f0c92348..a2ae89544c 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -18,7 +18,8 @@ "es2022", "dom" ], - "useDefineForClassFields": false + "useDefineForClassFields": false, + "skipLibCheck": true }, "angularCompilerOptions": { "strictTemplates": true,