diff --git a/live-editing/configs/QueryBuilderConfigGenerator.ts b/live-editing/configs/QueryBuilderConfigGenerator.ts index 7dc111d381..958772937b 100644 --- a/live-editing/configs/QueryBuilderConfigGenerator.ts +++ b/live-editing/configs/QueryBuilderConfigGenerator.ts @@ -1,5 +1,4 @@ -import {IgxQueryBuilderModule} from 'igniteui-angular'; -import {AppModuleConfig, Config, IConfigGenerator} from 'igniteui-live-editing' +import { Config, IConfigGenerator} from 'igniteui-live-editing' import { BaseAppConfig } from './BaseConfig'; export class QueryBuilderConfigGenerator implements IConfigGenerator { @@ -13,6 +12,12 @@ export class QueryBuilderConfigGenerator implements IConfigGenerator { shortenComponentPathBy: "/interactions/query-builder/" })); + configs.push(new Config({ + component: 'QueryBuilderTemplateSampleComponent', + appConfig: BaseAppConfig, + shortenComponentPathBy: "/interactions/query-builder/" + })); + configs.push(new Config({ component: 'QueryBuilderStyleComponent', additionalFiles: ["/src/app/interactions/query-builder/query-builder-style/layout.scss"], diff --git a/package-lock.json b/package-lock.json index 41cb7c2392..45bf03e45a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10,17 +10,17 @@ "hasInstallScript": true, "license": "MIT", "dependencies": { - "@angular/animations": "^19.0.0", - "@angular/cdk": "^19.0.0", - "@angular/common": "^19.0.0", - "@angular/compiler": "^19.0.0", - "@angular/core": "^19.0.0", - "@angular/forms": "^19.0.0", - "@angular/localize": "^19.0.0", - "@angular/material": "^19.0.0", - "@angular/platform-browser": "^19.0.0", - "@angular/platform-browser-dynamic": "^19.0.0", - "@angular/router": "^19.0.0", + "@angular/animations": "^19.1.6", + "@angular/cdk": "^19.1.4", + "@angular/common": "^19.1.6", + "@angular/compiler": "^19.1.6", + "@angular/core": "^19.1.6", + "@angular/forms": "^19.1.6", + "@angular/localize": "^19.1.6", + "@angular/material": "^19.1.4", + "@angular/platform-browser": "^19.1.6", + "@angular/platform-browser-dynamic": "^19.1.6", + "@angular/router": "^19.1.6", "@igniteui/material-icons-extended": "^3.1.0", "@microsoft/signalr": "^8.0.7", "@ng-bootstrap/ng-bootstrap": "^18.0.0", @@ -31,34 +31,34 @@ "bootstrap": "5.3.3", "file-saver": "^2.0.2", "hammerjs": "^2.0.8", - "igniteui-angular": "^19.0.0", + "igniteui-angular": "^19.1.0", "igniteui-angular-charts": "^19.0.0", "igniteui-angular-core": "^19.0.0", "igniteui-angular-extras": "^19.0.3", - "igniteui-angular-i18n": "^19.0.0", - "igniteui-dockmanager": "^1.14.2", + "igniteui-angular-i18n": "^19.1.0", + "igniteui-dockmanager": "^1.16.0", "igniteui-live-editing": "^3.0.0", - "igniteui-webcomponents": "^5.1.2", + "igniteui-webcomponents": "^5.2.3", "minireset.css": "0.0.6", "rxjs": "^7.8.1", "tslib": "^2.6.1", "zone.js": "~0.15.0" }, "devDependencies": { - "@angular-devkit/build-angular": "^19.0.0", - "@angular-eslint/builder": "^19.0.0", - "@angular-eslint/eslint-plugin": "^19.0.0", - "@angular-eslint/eslint-plugin-template": "^19.0.0", - "@angular-eslint/schematics": "^19.0.0", - "@angular-eslint/template-parser": "^19.0.0", - "@angular/cli": "^19.0.0", - "@angular/compiler-cli": "^19.0.0", - "@angular/language-service": "^19.0.0", - "@igniteui/angular-schematics": "19.0.1436", + "@angular-devkit/build-angular": "^19.1.7", + "@angular-eslint/builder": "^19.1.0", + "@angular-eslint/eslint-plugin": "^19.1.0", + "@angular-eslint/eslint-plugin-template": "^19.1.0", + "@angular-eslint/schematics": "^19.1.0", + "@angular-eslint/template-parser": "^19.1.0", + "@angular/cli": "^19.1.7", + "@angular/compiler-cli": "^19.1.6", + "@angular/language-service": "^19.1.6", + "@igniteui/angular-schematics": "19.0.14313", "@juggle/resize-observer": "^3.3.1", - "@types/jasmine": "^5.1.2", + "@types/jasmine": "^5.1.6", "@types/jasminewd2": "^2.0.13", - "@types/node": "^18.17.0", + "@types/node": "^22.13.4", "@typescript-eslint/eslint-plugin": "^7.2.0", "@typescript-eslint/parser": "^7.2.0", "eslint": "^8.57.0", @@ -92,13 +92,13 @@ } }, "node_modules/@angular-devkit/architect": { - "version": "0.1900.0", - "resolved": "https://registry.npmjs.org/@angular-devkit/architect/-/architect-0.1900.0.tgz", - "integrity": "sha512-oC2CyKf9olKvthEwp2wmkKw+H9NhpnK9cWYHvajWeCRJ8A4DLaKwfMuZ9lioi92QPourrJzoikgp7C6m2AuuZQ==", + "version": "0.1901.7", + "resolved": "https://registry.npmjs.org/@angular-devkit/architect/-/architect-0.1901.7.tgz", + "integrity": "sha512-qltyebfbej7joIKZVH8EFfrVDrkw0p9N9ja3A0XeU1sl2vlepHNAQdVm0Os8Vy2XjjyHvT5bXWE3G3/221qEKw==", "dev": true, "license": "MIT", "dependencies": { - "@angular-devkit/core": "19.0.0", + "@angular-devkit/core": "19.1.7", "rxjs": "7.8.1" }, "engines": { @@ -107,48 +107,20 @@ "yarn": ">= 1.13.0" } }, - "node_modules/@angular-devkit/architect/node_modules/@angular-devkit/core": { - "version": "19.0.0", - "resolved": "https://registry.npmjs.org/@angular-devkit/core/-/core-19.0.0.tgz", - "integrity": "sha512-/EJQOKVFb9vsFbPR+57C7fJHFVr7le9Ru6aormIKw24xyZZHtt5X4rwdeN7l6Zkv8F0cJ2EoTSiQoY17090DLQ==", - "dev": true, - "license": "MIT", - "dependencies": { - "ajv": "8.17.1", - "ajv-formats": "3.0.1", - "jsonc-parser": "3.3.1", - "picomatch": "4.0.2", - "rxjs": "7.8.1", - "source-map": "0.7.4" - }, - "engines": { - "node": "^18.19.1 || ^20.11.1 || >=22.0.0", - "npm": "^6.11.0 || ^7.5.6 || >=8.0.0", - "yarn": ">= 1.13.0" - }, - "peerDependencies": { - "chokidar": "^4.0.0" - }, - "peerDependenciesMeta": { - "chokidar": { - "optional": true - } - } - }, "node_modules/@angular-devkit/build-angular": { - "version": "19.0.0", - "resolved": "https://registry.npmjs.org/@angular-devkit/build-angular/-/build-angular-19.0.0.tgz", - "integrity": "sha512-Q4owTwm4bLK5qYHvPehx1/55O0vWRShDGsoHOYgm8mMLc++hr7xWpF8HptVG7AP9O8Qq95Cpz9+N4iMqyWlyUw==", + "version": "19.1.7", + "resolved": "https://registry.npmjs.org/@angular-devkit/build-angular/-/build-angular-19.1.7.tgz", + "integrity": "sha512-CMl3D5cpXoY0WuvdYtuOU2TetCwqxNsYM2jpuGG/kuuTEASAOI1cs9OhGwny1A/63bB8eyL33eLe82ON2Oemow==", "dev": true, "license": "MIT", "dependencies": { "@ampproject/remapping": "2.3.0", - "@angular-devkit/architect": "0.1900.0", - "@angular-devkit/build-webpack": "0.1900.0", - "@angular-devkit/core": "19.0.0", - "@angular/build": "19.0.0", + "@angular-devkit/architect": "0.1901.7", + "@angular-devkit/build-webpack": "0.1901.7", + "@angular-devkit/core": "19.1.7", + "@angular/build": "19.1.7", "@babel/core": "7.26.0", - "@babel/generator": "7.26.2", + "@babel/generator": "7.26.3", "@babel/helper-annotate-as-pure": "7.25.9", "@babel/helper-split-export-declaration": "7.24.7", "@babel/plugin-transform-async-generator-functions": "7.25.9", @@ -157,21 +129,21 @@ "@babel/preset-env": "7.26.0", "@babel/runtime": "7.26.0", "@discoveryjs/json-ext": "0.6.3", - "@ngtools/webpack": "19.0.0", - "@vitejs/plugin-basic-ssl": "1.1.0", + "@ngtools/webpack": "19.1.7", + "@vitejs/plugin-basic-ssl": "1.2.0", "ansi-colors": "4.1.3", "autoprefixer": "10.4.20", "babel-loader": "9.2.1", "browserslist": "^4.21.5", "copy-webpack-plugin": "12.0.2", "css-loader": "7.1.2", - "esbuild-wasm": "0.24.0", - "fast-glob": "3.3.2", + "esbuild-wasm": "0.24.2", + "fast-glob": "3.3.3", "http-proxy-middleware": "3.0.3", "istanbul-lib-instrument": "6.0.3", "jsonc-parser": "3.3.1", "karma-source-map-support": "1.4.0", - "less": "4.2.0", + "less": "4.2.1", "less-loader": "12.2.0", "license-webpack-plugin": "4.0.2", "loader-utils": "3.3.1", @@ -179,22 +151,22 @@ "open": "10.1.0", "ora": "5.4.1", "picomatch": "4.0.2", - "piscina": "4.7.0", + "piscina": "4.8.0", "postcss": "8.4.49", "postcss-loader": "8.1.1", "resolve-url-loader": "5.0.0", "rxjs": "7.8.1", - "sass": "1.80.7", - "sass-loader": "16.0.3", + "sass": "1.83.1", + "sass-loader": "16.0.4", "semver": "7.6.3", "source-map-loader": "5.0.0", "source-map-support": "0.5.21", - "terser": "5.36.0", + "terser": "5.37.0", "tree-kill": "1.2.2", "tslib": "2.8.1", - "webpack": "5.96.1", + "webpack": "5.97.1", "webpack-dev-middleware": "7.4.2", - "webpack-dev-server": "5.1.0", + "webpack-dev-server": "5.2.0", "webpack-merge": "6.0.1", "webpack-subresource-integrity": "5.1.0" }, @@ -204,14 +176,14 @@ "yarn": ">= 1.13.0" }, "optionalDependencies": { - "esbuild": "0.24.0" + "esbuild": "0.24.2" }, "peerDependencies": { "@angular/compiler-cli": "^19.0.0", "@angular/localize": "^19.0.0", "@angular/platform-server": "^19.0.0", "@angular/service-worker": "^19.0.0", - "@angular/ssr": "^19.0.0", + "@angular/ssr": "^19.1.7", "@web/test-runner": "^0.19.0", "browser-sync": "^3.0.2", "jest": "^29.5.0", @@ -219,8 +191,8 @@ "karma": "^6.3.0", "ng-packagr": "^19.0.0", "protractor": "^7.0.0", - "tailwindcss": "^2.0.0 || ^3.0.0", - "typescript": ">=5.5 <5.7" + "tailwindcss": "^2.0.0 || ^3.0.0 || ^4.0.0", + "typescript": ">=5.5 <5.8" }, "peerDependenciesMeta": { "@angular/localize": { @@ -261,42 +233,14 @@ } } }, - "node_modules/@angular-devkit/build-angular/node_modules/@angular-devkit/core": { - "version": "19.0.0", - "resolved": "https://registry.npmjs.org/@angular-devkit/core/-/core-19.0.0.tgz", - "integrity": "sha512-/EJQOKVFb9vsFbPR+57C7fJHFVr7le9Ru6aormIKw24xyZZHtt5X4rwdeN7l6Zkv8F0cJ2EoTSiQoY17090DLQ==", - "dev": true, - "license": "MIT", - "dependencies": { - "ajv": "8.17.1", - "ajv-formats": "3.0.1", - "jsonc-parser": "3.3.1", - "picomatch": "4.0.2", - "rxjs": "7.8.1", - "source-map": "0.7.4" - }, - "engines": { - "node": "^18.19.1 || ^20.11.1 || >=22.0.0", - "npm": "^6.11.0 || ^7.5.6 || >=8.0.0", - "yarn": ">= 1.13.0" - }, - "peerDependencies": { - "chokidar": "^4.0.0" - }, - "peerDependenciesMeta": { - "chokidar": { - "optional": true - } - } - }, "node_modules/@angular-devkit/build-webpack": { - "version": "0.1900.0", - "resolved": "https://registry.npmjs.org/@angular-devkit/build-webpack/-/build-webpack-0.1900.0.tgz", - "integrity": "sha512-mpsjpkp+SBd/16zmRTNDUiTXvcuMObGpcssOGqjf9MhaeSECYpU2J1MyXO+uXqnQ5ECAc/UK954Lv6bWwbusEw==", + "version": "0.1901.7", + "resolved": "https://registry.npmjs.org/@angular-devkit/build-webpack/-/build-webpack-0.1901.7.tgz", + "integrity": "sha512-g7xPN7unBnqP9HsgFvEV1DIhNYmVwmWR9ZiSP0xJq+EjpjWlz2vmgru4a5WKwGeuLsP8vg7RKV0kCH3bunOmFA==", "dev": true, "license": "MIT", "dependencies": { - "@angular-devkit/architect": "0.1900.0", + "@angular-devkit/architect": "0.1901.7", "rxjs": "7.8.1" }, "engines": { @@ -310,10 +254,11 @@ } }, "node_modules/@angular-devkit/core": { - "version": "19.0.1", - "resolved": "https://registry.npmjs.org/@angular-devkit/core/-/core-19.0.1.tgz", - "integrity": "sha512-oXIAV3hXqUW3Pmm95pvEmb+24n1cKQG62FzhQSjOIrMeHiCbGLNuc8zHosIi2oMrcCJJxR6KzWjThvbuzDwWlw==", + "version": "19.1.7", + "resolved": "https://registry.npmjs.org/@angular-devkit/core/-/core-19.1.7.tgz", + "integrity": "sha512-q0I6L9KTqyQ7D5M8H+fWLT+yjapvMNb7SRdfU6GzmexO66Dpo83q4HDzuDKIPDF29Yl0ELs9ICJqe9yUXh6yDQ==", "dev": true, + "license": "MIT", "dependencies": { "ajv": "8.17.1", "ajv-formats": "3.0.1", @@ -337,14 +282,15 @@ } }, "node_modules/@angular-devkit/schematics": { - "version": "19.0.1", - "resolved": "https://registry.npmjs.org/@angular-devkit/schematics/-/schematics-19.0.1.tgz", - "integrity": "sha512-N9dV8WpNRULykNj8fSxQrta85gPKxb315J3xugLS2uwiFWhz7wo5EY1YeYhoVKoVcNB2ng9imJgC5aO52AHZwg==", + "version": "19.1.7", + "resolved": "https://registry.npmjs.org/@angular-devkit/schematics/-/schematics-19.1.7.tgz", + "integrity": "sha512-AP6FvhMybCYs3gs+vzEAzSU1K//AFT3SVTRFv+C3WMO5dLeAHeGzM8I2dxD5EHQQtqIE/8apP6CxGrnpA5YlFg==", "dev": true, + "license": "MIT", "dependencies": { - "@angular-devkit/core": "19.0.1", + "@angular-devkit/core": "19.1.7", "jsonc-parser": "3.3.1", - "magic-string": "0.30.12", + "magic-string": "0.30.17", "ora": "5.4.1", "rxjs": "7.8.1" }, @@ -354,10 +300,20 @@ "yarn": ">= 1.13.0" } }, + "node_modules/@angular-devkit/schematics/node_modules/magic-string": { + "version": "0.30.17", + "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.17.tgz", + "integrity": "sha512-sNPKHvyjVf7gyjwS4xGTaW/mCnF8wnjtifKBEhxfZ7E/S8tQ0rssrwGNn6q8JH/ohItJfSQp9mBtQYuTlH5QnA==", + "dev": true, + "license": "MIT", + "dependencies": { + "@jridgewell/sourcemap-codec": "^1.5.0" + } + }, "node_modules/@angular-eslint/builder": { - "version": "19.0.2", - "resolved": "https://registry.npmjs.org/@angular-eslint/builder/-/builder-19.0.2.tgz", - "integrity": "sha512-BdmMSndQt2fSBiTVniskUcUpQaeweUapbsL0IDfQ7a13vL0NVXpc3K89YXuVE/xsb08uHtqphuwxPAAj6kX3OA==", + "version": "19.1.0", + "resolved": "https://registry.npmjs.org/@angular-eslint/builder/-/builder-19.1.0.tgz", + "integrity": "sha512-LWdQMTES/7GySlpTNFJn3k33ZGmjjWlHI/+IHV7B3xHQ9hj4MPK4ACmE/PNOAIQ9LwQm7sKS+3cTMxOZQ/cvSg==", "dev": true, "license": "MIT", "dependencies": { @@ -370,21 +326,21 @@ } }, "node_modules/@angular-eslint/bundled-angular-compiler": { - "version": "19.0.2", - "resolved": "https://registry.npmjs.org/@angular-eslint/bundled-angular-compiler/-/bundled-angular-compiler-19.0.2.tgz", - "integrity": "sha512-HPmp92r70SNO/0NdIaIhxrgVSpomqryuUk7jszvNRtu+OzYCJGcbLhQD38T3dbBWT/AV0QXzyzExn6/2ai9fEw==", + "version": "19.1.0", + "resolved": "https://registry.npmjs.org/@angular-eslint/bundled-angular-compiler/-/bundled-angular-compiler-19.1.0.tgz", + "integrity": "sha512-HUJyukRvnh8Z9lIdxdblBRuBaPYEVv4iAYZMw3d+dn4rrM27Nt5oh3/zkwYrrPkt36tZdeXdDWrOuz9jgjVN5w==", "dev": true, "license": "MIT" }, "node_modules/@angular-eslint/eslint-plugin": { - "version": "19.0.2", - "resolved": "https://registry.npmjs.org/@angular-eslint/eslint-plugin/-/eslint-plugin-19.0.2.tgz", - "integrity": "sha512-DLuNVVGGFicSThOcMSJyNje+FZSPdG0B3lCBRiqcgKH/16kfM4pV8MobPM7RGK2NhaOmmZ4zzJNwpwWPSgi+Lw==", + "version": "19.1.0", + "resolved": "https://registry.npmjs.org/@angular-eslint/eslint-plugin/-/eslint-plugin-19.1.0.tgz", + "integrity": "sha512-TDO0+Ry+oNkxnaLHogKp1k2aey6IkJef5d7hathE4UFT6owjRizltWaRoX6bGw7Qu1yagVLL8L2Se8SddxSPAQ==", "dev": true, "license": "MIT", "dependencies": { - "@angular-eslint/bundled-angular-compiler": "19.0.2", - "@angular-eslint/utils": "19.0.2" + "@angular-eslint/bundled-angular-compiler": "19.1.0", + "@angular-eslint/utils": "19.1.0" }, "peerDependencies": { "@typescript-eslint/utils": "^7.11.0 || ^8.0.0", @@ -393,14 +349,14 @@ } }, "node_modules/@angular-eslint/eslint-plugin-template": { - "version": "19.0.2", - "resolved": "https://registry.npmjs.org/@angular-eslint/eslint-plugin-template/-/eslint-plugin-template-19.0.2.tgz", - "integrity": "sha512-f/OCF9ThnxQ8m0eNYPwnCrySQPhYfCOF6STL7F9LnS8Bs3ZeW3/oT1yLaMIZ1Eg0ogIkgxksMAJZjrJPUPBD1Q==", + "version": "19.1.0", + "resolved": "https://registry.npmjs.org/@angular-eslint/eslint-plugin-template/-/eslint-plugin-template-19.1.0.tgz", + "integrity": "sha512-bIUizkCY40mnU8oAO1tLV7uN2H/cHf1evLlhpqlb9JYwc5dT2moiEhNDo61OtOgkJmDGNuThAeO9Xk9hGQc7nA==", "dev": true, "license": "MIT", "dependencies": { - "@angular-eslint/bundled-angular-compiler": "19.0.2", - "@angular-eslint/utils": "19.0.2", + "@angular-eslint/bundled-angular-compiler": "19.1.0", + "@angular-eslint/utils": "19.1.0", "aria-query": "5.3.2", "axobject-query": "4.1.0" }, @@ -412,39 +368,52 @@ } }, "node_modules/@angular-eslint/schematics": { - "version": "19.0.2", - "resolved": "https://registry.npmjs.org/@angular-eslint/schematics/-/schematics-19.0.2.tgz", - "integrity": "sha512-wI4SyiAnUCrpigtK6PHRlVWMC9vWljqmlLhbsJV5O5yDajlmRdvgXvSHDefhJm0hSfvZYRXuiAARYv2+QVfnGA==", + "version": "19.1.0", + "resolved": "https://registry.npmjs.org/@angular-eslint/schematics/-/schematics-19.1.0.tgz", + "integrity": "sha512-6S1FjmM7rZxc0u0W0KjqWYOkFQ0q89IGyjPkdUt1a8NwRnWg3VoXp4WYfeuZOjda/FEYuBS/E6rckLAMp0h6Aw==", "dev": true, "license": "MIT", "dependencies": { "@angular-devkit/core": ">= 19.0.0 < 20.0.0", "@angular-devkit/schematics": ">= 19.0.0 < 20.0.0", - "@angular-eslint/eslint-plugin": "19.0.2", - "@angular-eslint/eslint-plugin-template": "19.0.2", - "ignore": "6.0.2", - "semver": "7.6.3", + "@angular-eslint/eslint-plugin": "19.1.0", + "@angular-eslint/eslint-plugin-template": "19.1.0", + "ignore": "7.0.3", + "semver": "7.7.1", "strip-json-comments": "3.1.1" } }, "node_modules/@angular-eslint/schematics/node_modules/ignore": { - "version": "6.0.2", - "resolved": "https://registry.npmjs.org/ignore/-/ignore-6.0.2.tgz", - "integrity": "sha512-InwqeHHN2XpumIkMvpl/DCJVrAHgCsG5+cn1XlnLWGwtZBm8QJfSusItfrwx81CTp5agNZqpKU2J/ccC5nGT4A==", + "version": "7.0.3", + "resolved": "https://registry.npmjs.org/ignore/-/ignore-7.0.3.tgz", + "integrity": "sha512-bAH5jbK/F3T3Jls4I0SO1hmPR0dKU0a7+SY6n1yzRtG54FLO8d6w/nxLFX2Nb7dBu6cCWXPaAME6cYqFUMmuCA==", "dev": true, "license": "MIT", "engines": { "node": ">= 4" } }, + "node_modules/@angular-eslint/schematics/node_modules/semver": { + "version": "7.7.1", + "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.1.tgz", + "integrity": "sha512-hlq8tAfn0m/61p4BVRcPzIGr6LKiMwo4VM6dGi6pt4qcRkmNzTcWq6eCEjEh+qXjkMDvPlOFFSGwQjoEa6gyMA==", + "dev": true, + "license": "ISC", + "bin": { + "semver": "bin/semver.js" + }, + "engines": { + "node": ">=10" + } + }, "node_modules/@angular-eslint/template-parser": { - "version": "19.0.2", - "resolved": "https://registry.npmjs.org/@angular-eslint/template-parser/-/template-parser-19.0.2.tgz", - "integrity": "sha512-z3rZd2sBfuYcFf9rGDsB2zz2fbGX8kkF+0ftg9eocyQmzWrlZHFmuw9ha7oP/Mz8gpblyCS/aa1U/Srs6gz0UQ==", + "version": "19.1.0", + "resolved": "https://registry.npmjs.org/@angular-eslint/template-parser/-/template-parser-19.1.0.tgz", + "integrity": "sha512-wbMi7adlC+uYqZo7NHNBShpNhFJRZsXLqihqvFpAUt1Ei6uDX8HR6MyMEDZ9tUnlqtPVW5nmbedPyLVG7HkjAA==", "dev": true, "license": "MIT", "dependencies": { - "@angular-eslint/bundled-angular-compiler": "19.0.2", + "@angular-eslint/bundled-angular-compiler": "19.1.0", "eslint-scope": "^8.0.2" }, "peerDependencies": { @@ -453,13 +422,13 @@ } }, "node_modules/@angular-eslint/utils": { - "version": "19.0.2", - "resolved": "https://registry.npmjs.org/@angular-eslint/utils/-/utils-19.0.2.tgz", - "integrity": "sha512-HotBT8OKr7zCaX1S9k27JuhRiTVIbbYVl6whlb3uwdMIPIWY8iOcEh1tjI4qDPUafpLfR72Dhwi5bO1E17F3/Q==", + "version": "19.1.0", + "resolved": "https://registry.npmjs.org/@angular-eslint/utils/-/utils-19.1.0.tgz", + "integrity": "sha512-mcb7hPMH/u6wwUwvsewrmgb9y9NWN6ZacvpUvKlTOxF/jOtTdsu0XfV4YB43sp2A8NWzYzX0Str4c8K1xSmuBQ==", "dev": true, "license": "MIT", "dependencies": { - "@angular-eslint/bundled-angular-compiler": "19.0.2" + "@angular-eslint/bundled-angular-compiler": "19.1.0" }, "peerDependencies": { "@typescript-eslint/utils": "^7.11.0 || ^8.0.0", @@ -468,9 +437,9 @@ } }, "node_modules/@angular/animations": { - "version": "19.0.0", - "resolved": "https://registry.npmjs.org/@angular/animations/-/animations-19.0.0.tgz", - "integrity": "sha512-+uZTvEXjYh8PZKB4ijk8uuH1K+Tz/A67mUlltFv9pYKtnmbZAeS/PI66g/7pigRYDvEgid1fvlAANeBShAiPZQ==", + "version": "19.1.6", + "resolved": "https://registry.npmjs.org/@angular/animations/-/animations-19.1.6.tgz", + "integrity": "sha512-iacosz3fygp0AyT57+suVpLChl10xS5RBje09TfQIKHTUY0LWkMspgaK9gwtlflpIhjedPV0UmgRIKhhFcQM1A==", "license": "MIT", "dependencies": { "tslib": "^2.3.0" @@ -479,40 +448,41 @@ "node": "^18.19.1 || ^20.11.1 || >=22.0.0" }, "peerDependencies": { - "@angular/core": "19.0.0" + "@angular/core": "19.1.6" } }, "node_modules/@angular/build": { - "version": "19.0.0", - "resolved": "https://registry.npmjs.org/@angular/build/-/build-19.0.0.tgz", - "integrity": "sha512-OLyUwAVCSqW589l19g19aP2O1NpBMRPsqKmYLaTYvYSIcZkNRJPxOcsCIDGB3FUQUEjpouYtzPA3RtBuJWsCwQ==", + "version": "19.1.7", + "resolved": "https://registry.npmjs.org/@angular/build/-/build-19.1.7.tgz", + "integrity": "sha512-22SjHZDTk91JHU5aFVDU2n+xkPolDosRVfsK4zs+RRXQs30LYPH9KCLiUWCYjFbRj7oYvw7sbrs94szo7dWYvw==", "dev": true, "license": "MIT", "dependencies": { "@ampproject/remapping": "2.3.0", - "@angular-devkit/architect": "0.1900.0", + "@angular-devkit/architect": "0.1901.7", + "@angular-devkit/core": "19.1.7", "@babel/core": "7.26.0", "@babel/helper-annotate-as-pure": "7.25.9", "@babel/helper-split-export-declaration": "7.24.7", "@babel/plugin-syntax-import-attributes": "7.26.0", - "@inquirer/confirm": "5.0.2", - "@vitejs/plugin-basic-ssl": "1.1.0", - "beasties": "0.1.0", + "@inquirer/confirm": "5.1.1", + "@vitejs/plugin-basic-ssl": "1.2.0", + "beasties": "0.2.0", "browserslist": "^4.23.0", - "esbuild": "0.24.0", - "fast-glob": "3.3.2", - "https-proxy-agent": "7.0.5", + "esbuild": "0.24.2", + "fast-glob": "3.3.3", + "https-proxy-agent": "7.0.6", "istanbul-lib-instrument": "6.0.3", "listr2": "8.2.5", - "magic-string": "0.30.12", + "magic-string": "0.30.17", "mrmime": "2.0.0", "parse5-html-rewriting-stream": "7.0.0", "picomatch": "4.0.2", - "piscina": "4.7.0", - "rollup": "4.26.0", - "sass": "1.80.7", + "piscina": "4.8.0", + "rollup": "4.30.1", + "sass": "1.83.1", "semver": "7.6.3", - "vite": "5.4.11", + "vite": "6.0.11", "watchpack": "2.4.2" }, "engines": { @@ -521,7 +491,7 @@ "yarn": ">= 1.13.0" }, "optionalDependencies": { - "lmdb": "3.1.5" + "lmdb": "3.2.2" }, "peerDependencies": { "@angular/compiler": "^19.0.0", @@ -529,11 +499,12 @@ "@angular/localize": "^19.0.0", "@angular/platform-server": "^19.0.0", "@angular/service-worker": "^19.0.0", - "@angular/ssr": "^19.0.0", + "@angular/ssr": "^19.1.7", "less": "^4.2.0", + "ng-packagr": "^19.0.0", "postcss": "^8.4.0", - "tailwindcss": "^2.0.0 || ^3.0.0", - "typescript": ">=5.5 <5.7" + "tailwindcss": "^2.0.0 || ^3.0.0 || ^4.0.0", + "typescript": ">=5.5 <5.8" }, "peerDependenciesMeta": { "@angular/localize": { @@ -551,6 +522,9 @@ "less": { "optional": true }, + "ng-packagr": { + "optional": true + }, "postcss": { "optional": true }, @@ -559,10 +533,92 @@ } } }, + "node_modules/@angular/build/node_modules/magic-string": { + "version": "0.30.17", + "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.17.tgz", + "integrity": "sha512-sNPKHvyjVf7gyjwS4xGTaW/mCnF8wnjtifKBEhxfZ7E/S8tQ0rssrwGNn6q8JH/ohItJfSQp9mBtQYuTlH5QnA==", + "dev": true, + "license": "MIT", + "dependencies": { + "@jridgewell/sourcemap-codec": "^1.5.0" + } + }, + "node_modules/@angular/build/node_modules/vite": { + "version": "6.0.11", + "resolved": "https://registry.npmjs.org/vite/-/vite-6.0.11.tgz", + "integrity": "sha512-4VL9mQPKoHy4+FE0NnRE/kbY51TOfaknxAjt3fJbGJxhIpBZiqVzlZDEesWWsuREXHwNdAoOFZ9MkPEVXczHwg==", + "dev": true, + "license": "MIT", + "dependencies": { + "esbuild": "^0.24.2", + "postcss": "^8.4.49", + "rollup": "^4.23.0" + }, + "bin": { + "vite": "bin/vite.js" + }, + "engines": { + "node": "^18.0.0 || ^20.0.0 || >=22.0.0" + }, + "funding": { + "url": "https://github.com/vitejs/vite?sponsor=1" + }, + "optionalDependencies": { + "fsevents": "~2.3.3" + }, + "peerDependencies": { + "@types/node": "^18.0.0 || ^20.0.0 || >=22.0.0", + "jiti": ">=1.21.0", + "less": "*", + "lightningcss": "^1.21.0", + "sass": "*", + "sass-embedded": "*", + "stylus": "*", + "sugarss": "*", + "terser": "^5.16.0", + "tsx": "^4.8.1", + "yaml": "^2.4.2" + }, + "peerDependenciesMeta": { + "@types/node": { + "optional": true + }, + "jiti": { + "optional": true + }, + "less": { + "optional": true + }, + "lightningcss": { + "optional": true + }, + "sass": { + "optional": true + }, + "sass-embedded": { + "optional": true + }, + "stylus": { + "optional": true + }, + "sugarss": { + "optional": true + }, + "terser": { + "optional": true + }, + "tsx": { + "optional": true + }, + "yaml": { + "optional": true + } + } + }, "node_modules/@angular/cdk": { - "version": "19.0.0", - "resolved": "https://registry.npmjs.org/@angular/cdk/-/cdk-19.0.0.tgz", - "integrity": "sha512-KcOYhCwN4Bw3L4+W4ymTfPGqRjrkwD8M5jX8GM7YsZ5DsX9OEd/gNrwRvjn+8JItzimXLXdGrcqXrMTxkq7QPA==", + "version": "19.1.4", + "resolved": "https://registry.npmjs.org/@angular/cdk/-/cdk-19.1.4.tgz", + "integrity": "sha512-PyvJ1VbYjW8tVnVHvcasiqI9eNWf8EJnr0in1QWnhpSbpVpVpc4yjbgnu2pTrW9mPo/YjV4pF+qs6E97y9mdYQ==", "license": "MIT", "dependencies": { "tslib": "^2.3.0" @@ -577,26 +633,26 @@ } }, "node_modules/@angular/cli": { - "version": "19.0.0", - "resolved": "https://registry.npmjs.org/@angular/cli/-/cli-19.0.0.tgz", - "integrity": "sha512-7FTNkMtTuaXp4CCWZlRIwFZtnkDJg+YjqAuloDNGhIXDjDsb9gWihepWpWXSMBTg4XI1OdsT+oYt38Z0YMck0A==", + "version": "19.1.7", + "resolved": "https://registry.npmjs.org/@angular/cli/-/cli-19.1.7.tgz", + "integrity": "sha512-qVEy0R4QKQ2QAGfpj2mPVxRxgOVst+rIgZBtLwf/mrbN9YyzJUaBKvaVslUpOqkvoW9mX5myf0iZkT5NykrIoA==", "dev": true, "license": "MIT", "dependencies": { - "@angular-devkit/architect": "0.1900.0", - "@angular-devkit/core": "19.0.0", - "@angular-devkit/schematics": "19.0.0", - "@inquirer/prompts": "7.1.0", + "@angular-devkit/architect": "0.1901.7", + "@angular-devkit/core": "19.1.7", + "@angular-devkit/schematics": "19.1.7", + "@inquirer/prompts": "7.2.1", "@listr2/prompt-adapter-inquirer": "2.0.18", - "@schematics/angular": "19.0.0", + "@schematics/angular": "19.1.7", "@yarnpkg/lockfile": "1.1.0", "ini": "5.0.0", "jsonc-parser": "3.3.1", "listr2": "8.2.5", - "npm-package-arg": "12.0.0", + "npm-package-arg": "12.0.1", "npm-pick-manifest": "10.0.0", "pacote": "20.0.0", - "resolve": "1.22.8", + "resolve": "1.22.10", "semver": "7.6.3", "symbol-observable": "4.0.0", "yargs": "17.7.2" @@ -610,46 +666,16 @@ "yarn": ">= 1.13.0" } }, - "node_modules/@angular/cli/node_modules/@angular-devkit/core": { - "version": "19.0.0", - "resolved": "https://registry.npmjs.org/@angular-devkit/core/-/core-19.0.0.tgz", - "integrity": "sha512-/EJQOKVFb9vsFbPR+57C7fJHFVr7le9Ru6aormIKw24xyZZHtt5X4rwdeN7l6Zkv8F0cJ2EoTSiQoY17090DLQ==", - "dev": true, - "license": "MIT", - "dependencies": { - "ajv": "8.17.1", - "ajv-formats": "3.0.1", - "jsonc-parser": "3.3.1", - "picomatch": "4.0.2", - "rxjs": "7.8.1", - "source-map": "0.7.4" - }, - "engines": { - "node": "^18.19.1 || ^20.11.1 || >=22.0.0", - "npm": "^6.11.0 || ^7.5.6 || >=8.0.0", - "yarn": ">= 1.13.0" - }, - "peerDependencies": { - "chokidar": "^4.0.0" - }, - "peerDependenciesMeta": { - "chokidar": { - "optional": true - } - } - }, - "node_modules/@angular/cli/node_modules/@angular-devkit/schematics": { - "version": "19.0.0", - "resolved": "https://registry.npmjs.org/@angular-devkit/schematics/-/schematics-19.0.0.tgz", - "integrity": "sha512-90pGZtpZgjDk1UgRBatfeqYP6qUZL9fLh+8zIpavOr2ey5bW2lADO7mS2Qrc7U1SmGqnxQXQQ7uIS+50gYm0tQ==", + "node_modules/@angular/cli/node_modules/@schematics/angular": { + "version": "19.1.7", + "resolved": "https://registry.npmjs.org/@schematics/angular/-/angular-19.1.7.tgz", + "integrity": "sha512-BB8yMGmYDZzSb8Nu+Ln0TKyeoS3++f9STCYw30NwM3IViHxJJYxu/zowzwSa9TjftIzdCpbOaPxGS0vU9UOUDQ==", "dev": true, "license": "MIT", "dependencies": { - "@angular-devkit/core": "19.0.0", - "jsonc-parser": "3.3.1", - "magic-string": "0.30.12", - "ora": "5.4.1", - "rxjs": "7.8.1" + "@angular-devkit/core": "19.1.7", + "@angular-devkit/schematics": "19.1.7", + "jsonc-parser": "3.3.1" }, "engines": { "node": "^18.19.1 || ^20.11.1 || >=22.0.0", @@ -658,9 +684,9 @@ } }, "node_modules/@angular/common": { - "version": "19.0.0", - "resolved": "https://registry.npmjs.org/@angular/common/-/common-19.0.0.tgz", - "integrity": "sha512-kb2iS26GZS0vyR3emAQbIiQifnK5M5vnbclEHni+pApDEU5V9FufbdRP3vCxs28UHZvAZKB0LrxkTrnT6T+z5g==", + "version": "19.1.6", + "resolved": "https://registry.npmjs.org/@angular/common/-/common-19.1.6.tgz", + "integrity": "sha512-FkuejwbxsOLhcyOgDM/7YEYvMG3tuyOvr+831VzPwMwYp5QO9AUYtn4ffGf698JccbA+Ocw3BAdhPU6i+YZC1A==", "license": "MIT", "dependencies": { "tslib": "^2.3.0" @@ -669,14 +695,14 @@ "node": "^18.19.1 || ^20.11.1 || >=22.0.0" }, "peerDependencies": { - "@angular/core": "19.0.0", + "@angular/core": "19.1.6", "rxjs": "^6.5.3 || ^7.4.0" } }, "node_modules/@angular/compiler": { - "version": "19.0.0", - "resolved": "https://registry.npmjs.org/@angular/compiler/-/compiler-19.0.0.tgz", - "integrity": "sha512-Uw2Yy25pdqfzKsS9WofnIq1zvknlVYyy03LYO7NMKHlFWiy8q8SIXN7WKPFhiHlOfyACXipp4eZb9m3+IbOfSA==", + "version": "19.1.6", + "resolved": "https://registry.npmjs.org/@angular/compiler/-/compiler-19.1.6.tgz", + "integrity": "sha512-Tl2PFEtnU8UgSqtEKG827xDUGZrErhR6S1JICeV1kbRCYmwQA4hhG25tzi+ifSAOPW7eJiyzP2LWIvOuZkq3Vw==", "license": "MIT", "dependencies": { "tslib": "^2.3.0" @@ -685,7 +711,7 @@ "node": "^18.19.1 || ^20.11.1 || >=22.0.0" }, "peerDependencies": { - "@angular/core": "19.0.0" + "@angular/core": "19.1.6" }, "peerDependenciesMeta": { "@angular/core": { @@ -694,9 +720,9 @@ } }, "node_modules/@angular/compiler-cli": { - "version": "19.0.0", - "resolved": "https://registry.npmjs.org/@angular/compiler-cli/-/compiler-cli-19.0.0.tgz", - "integrity": "sha512-2PxpsIeppoDLAx7A6i0GE10WjC+Fkz8tTQioa7r4y/+eYnniEjJFIQM/8lbkOnRVcuYoeXoNyYWr3fEQAyO4LA==", + "version": "19.1.6", + "resolved": "https://registry.npmjs.org/@angular/compiler-cli/-/compiler-cli-19.1.6.tgz", + "integrity": "sha512-rTpHC/tfLBj+5a3X+BA/4s2w5T/cHT6x3RgO8CYy7003Musn0/BiqjfE6VCIllQgLaOQRhCcf51T6Kerkzv8Dw==", "license": "MIT", "dependencies": { "@babel/core": "7.26.0", @@ -717,14 +743,14 @@ "node": "^18.19.1 || ^20.11.1 || >=22.0.0" }, "peerDependencies": { - "@angular/compiler": "19.0.0", - "typescript": ">=5.5 <5.7" + "@angular/compiler": "19.1.6", + "typescript": ">=5.5 <5.8" } }, "node_modules/@angular/core": { - "version": "19.0.0", - "resolved": "https://registry.npmjs.org/@angular/core/-/core-19.0.0.tgz", - "integrity": "sha512-aNG2kd30BOM/zf0jC+aEVG8OA27IwqCki9EkmyRNYnaP2O5Mj1n7JpCyZGI+0LrWTJ2UUCfRNZiZdZwmNThr1Q==", + "version": "19.1.6", + "resolved": "https://registry.npmjs.org/@angular/core/-/core-19.1.6.tgz", + "integrity": "sha512-FD167URT+apxjzj9sG/MzffW5G6YyQiPQ6nrrIoYi9jeY3LYurybuOgvcXrU8PT4Z3+CKMq9k/ZnmrlHU72BpA==", "license": "MIT", "dependencies": { "tslib": "^2.3.0" @@ -738,9 +764,9 @@ } }, "node_modules/@angular/forms": { - "version": "19.0.0", - "resolved": "https://registry.npmjs.org/@angular/forms/-/forms-19.0.0.tgz", - "integrity": "sha512-gM4bUdlIJ0uRYNwoVMbXiZt4+bZzPXzyQ7ByNIOVKEAI0PN9Jz1dR1pSeQgIoUvKQbhwsVKVUoa7Tn1hoqwvTg==", + "version": "19.1.6", + "resolved": "https://registry.npmjs.org/@angular/forms/-/forms-19.1.6.tgz", + "integrity": "sha512-uu/76KAwCAcDuhD67Vv78UvOC/tiprtFXOgqNCj0LK8vyFcvPsunb3nF/PtfF9rSHyslXAqxZhME+Ha2tU6Lpw==", "license": "MIT", "dependencies": { "tslib": "^2.3.0" @@ -749,16 +775,16 @@ "node": "^18.19.1 || ^20.11.1 || >=22.0.0" }, "peerDependencies": { - "@angular/common": "19.0.0", - "@angular/core": "19.0.0", - "@angular/platform-browser": "19.0.0", + "@angular/common": "19.1.6", + "@angular/core": "19.1.6", + "@angular/platform-browser": "19.1.6", "rxjs": "^6.5.3 || ^7.4.0" } }, "node_modules/@angular/language-service": { - "version": "19.0.0", - "resolved": "https://registry.npmjs.org/@angular/language-service/-/language-service-19.0.0.tgz", - "integrity": "sha512-oXDZ+gOTVFhpGg+Cp/3Mo0aa214eCF13dEboRYTIM/m1jnsTHcIlfhRpkw+FLUSEN9MTVK5xVfx5gUudI7T0rg==", + "version": "19.1.6", + "resolved": "https://registry.npmjs.org/@angular/language-service/-/language-service-19.1.6.tgz", + "integrity": "sha512-YIvCQRt+EFUKmms8M9K0ULDxAkCQSJqmnx4lGDJDHNK13U/C6r0d3/WMrrSDuSjax4zGSJf5xiRPpQlzPPsphA==", "dev": true, "license": "MIT", "engines": { @@ -766,14 +792,14 @@ } }, "node_modules/@angular/localize": { - "version": "19.0.0", - "resolved": "https://registry.npmjs.org/@angular/localize/-/localize-19.0.0.tgz", - "integrity": "sha512-n1mDFjVKjJEXycpWPyXQ5sUy83KzJTbpohsvM6Fhgk+gTUSxmj9kP6wjnKtsGCSV3tjtI62jTczKYJJotoDc9w==", + "version": "19.1.6", + "resolved": "https://registry.npmjs.org/@angular/localize/-/localize-19.1.6.tgz", + "integrity": "sha512-yVCOX4djVv/xcQJ0aUJ1I3MqxWlnAiP/QkCRu6Zt2Rg0cR4I0hnkHrek28EcdNbTP47VqHgxbX8nXEhttHIUzg==", "license": "MIT", "dependencies": { "@babel/core": "7.26.0", "@types/babel__core": "7.20.5", - "fast-glob": "3.3.2", + "fast-glob": "3.3.3", "yargs": "^17.2.1" }, "bin": { @@ -785,21 +811,21 @@ "node": "^18.19.1 || ^20.11.1 || >=22.0.0" }, "peerDependencies": { - "@angular/compiler": "19.0.0", - "@angular/compiler-cli": "19.0.0" + "@angular/compiler": "19.1.6", + "@angular/compiler-cli": "19.1.6" } }, "node_modules/@angular/material": { - "version": "19.0.0", - "resolved": "https://registry.npmjs.org/@angular/material/-/material-19.0.0.tgz", - "integrity": "sha512-j7dDFUh8dqiysuWu32biukDTHScajUYHFR9Srhn98kBwnXMob5y1paMoOx5RQO5DU4KCxKaKx8HcHJBJeTKHjw==", + "version": "19.1.4", + "resolved": "https://registry.npmjs.org/@angular/material/-/material-19.1.4.tgz", + "integrity": "sha512-bqliTnUnMiTG6Quvk16epiQPZQB0zV/L2ctPinFcP6NhahcQFfahjabUlgMlfBk5qObolJArJr5HCMiOmpOGIQ==", "license": "MIT", "dependencies": { "tslib": "^2.3.0" }, "peerDependencies": { "@angular/animations": "^19.0.0 || ^20.0.0", - "@angular/cdk": "19.0.0", + "@angular/cdk": "19.1.4", "@angular/common": "^19.0.0 || ^20.0.0", "@angular/core": "^19.0.0 || ^20.0.0", "@angular/forms": "^19.0.0 || ^20.0.0", @@ -808,9 +834,9 @@ } }, "node_modules/@angular/platform-browser": { - "version": "19.0.0", - "resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-19.0.0.tgz", - "integrity": "sha512-g9Qkv+KgEmXLVeg+dw1edmWsRBspUGeJMOBf2UX1kUCw6txeco+pzCMimouB5LQYHfs6cD6oC+FwINm0HNwrhg==", + "version": "19.1.6", + "resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-19.1.6.tgz", + "integrity": "sha512-sfWU+gMpqQ6GYtE3tAfDktftC01NgtqAOKfeCQ/KY2rxRTIxYahenW0Licuzgmd+8AZtmncoZaYX0Fd/5XMqzQ==", "license": "MIT", "dependencies": { "tslib": "^2.3.0" @@ -819,9 +845,9 @@ "node": "^18.19.1 || ^20.11.1 || >=22.0.0" }, "peerDependencies": { - "@angular/animations": "19.0.0", - "@angular/common": "19.0.0", - "@angular/core": "19.0.0" + "@angular/animations": "19.1.6", + "@angular/common": "19.1.6", + "@angular/core": "19.1.6" }, "peerDependenciesMeta": { "@angular/animations": { @@ -830,9 +856,9 @@ } }, "node_modules/@angular/platform-browser-dynamic": { - "version": "19.0.0", - "resolved": "https://registry.npmjs.org/@angular/platform-browser-dynamic/-/platform-browser-dynamic-19.0.0.tgz", - "integrity": "sha512-ljvycDe0etmTBDzbCFakpsItywddpKEyCZGMKRvz5TdND1N1qqXydxAF1kLzP5H7F/QOMdP4/T/T1HS+6AUpkw==", + "version": "19.1.6", + "resolved": "https://registry.npmjs.org/@angular/platform-browser-dynamic/-/platform-browser-dynamic-19.1.6.tgz", + "integrity": "sha512-QedjG7/ctPtzgJ3LcWv4yMcSivKlwcZ8ge8zPe7eu9Ft6mDZZat65gJEjDuvevJoeNbo2dQODFDiyPJNmnNA9A==", "license": "MIT", "dependencies": { "tslib": "^2.3.0" @@ -841,16 +867,16 @@ "node": "^18.19.1 || ^20.11.1 || >=22.0.0" }, "peerDependencies": { - "@angular/common": "19.0.0", - "@angular/compiler": "19.0.0", - "@angular/core": "19.0.0", - "@angular/platform-browser": "19.0.0" + "@angular/common": "19.1.6", + "@angular/compiler": "19.1.6", + "@angular/core": "19.1.6", + "@angular/platform-browser": "19.1.6" } }, "node_modules/@angular/router": { - "version": "19.0.0", - "resolved": "https://registry.npmjs.org/@angular/router/-/router-19.0.0.tgz", - "integrity": "sha512-uFyT8DWVLGY8k0AZjpK7iyMO/WwT4/+b09Ax0uUEbdcRxTXSOg8/U/AVzQWtxzxI80/vJE2WZMmhIJFUTYwhKA==", + "version": "19.1.6", + "resolved": "https://registry.npmjs.org/@angular/router/-/router-19.1.6.tgz", + "integrity": "sha512-TEfw3W5jVodVDMD4krhXGog1THZN3x1yoh2oZmCv3lXg22+pVC6Cp+x3vVExq0mS+g3/6uZwy/3qAYdlzqYjTg==", "license": "MIT", "dependencies": { "tslib": "^2.3.0" @@ -859,9 +885,9 @@ "node": "^18.19.1 || ^20.11.1 || >=22.0.0" }, "peerDependencies": { - "@angular/common": "19.0.0", - "@angular/core": "19.0.0", - "@angular/platform-browser": "19.0.0", + "@angular/common": "19.1.6", + "@angular/core": "19.1.6", + "@angular/platform-browser": "19.1.6", "rxjs": "^6.5.3 || ^7.4.0" } }, @@ -934,13 +960,13 @@ } }, "node_modules/@babel/generator": { - "version": "7.26.2", - "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.26.2.tgz", - "integrity": "sha512-zevQbhbau95nkoxSq3f/DC/SC+EEOUZd3DYqfSkMhY2/wfSeaHV1Ew4vk8e+x8lja31IbyuUa2uQ3JONqKbysw==", + "version": "7.26.3", + "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.26.3.tgz", + "integrity": "sha512-6FF/urZvD0sTeO7k6/B15pMLC4CHUv1426lzr3N01aHJTl046uCAh9LXW/fzeXXjPNCJ6iABW5XaWOsIZB93aQ==", "license": "MIT", "dependencies": { - "@babel/parser": "^7.26.2", - "@babel/types": "^7.26.0", + "@babel/parser": "^7.26.3", + "@babel/types": "^7.26.3", "@jridgewell/gen-mapping": "^0.3.5", "@jridgewell/trace-mapping": "^0.3.25", "jsesc": "^3.0.2" @@ -1278,12 +1304,12 @@ } }, "node_modules/@babel/parser": { - "version": "7.26.2", - "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.26.2.tgz", - "integrity": "sha512-DWMCZH9WA4Maitz2q21SRKHo9QXZxkDsbNZoVD62gusNtNBBqDg9i7uOhASfTfIGNzW+O+r7+jAlM8dwphcJKQ==", + "version": "7.26.9", + "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.26.9.tgz", + "integrity": "sha512-81NWa1njQblgZbQHxWHpxxCzNsa3ZwvFqpUg7P+NNUU6f3UU2jBEg4OlF/J6rl8+PQGh1q6/zWScd001YwcA5A==", "license": "MIT", "dependencies": { - "@babel/types": "^7.26.0" + "@babel/types": "^7.26.9" }, "bin": { "parser": "bin/babel-parser.js" @@ -2463,9 +2489,9 @@ } }, "node_modules/@babel/types": { - "version": "7.26.0", - "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.26.0.tgz", - "integrity": "sha512-Z/yiTPj+lDVnF7lWeKCIJzaIkI0vYO87dMpZ4bg4TDrFe4XXLFWL1TbXU27gBP3QccxV9mZICCrnjnYlJjXHOA==", + "version": "7.26.9", + "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.26.9.tgz", + "integrity": "sha512-Y3IR1cRnOxOCDvMmNiym7XpXQ93iGDDPHx+Zj+NM+rg0fBaShfQLkg+hKPaZCEvg5N/LeCo4+Rj/i3FuJsIQaw==", "license": "MIT", "dependencies": { "@babel/helper-string-parser": "^7.25.9", @@ -2535,9 +2561,9 @@ } }, "node_modules/@esbuild/aix-ppc64": { - "version": "0.24.0", - "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.24.0.tgz", - "integrity": "sha512-WtKdFM7ls47zkKHFVzMz8opM7LkcsIp9amDUBIAWirg70RM71WRSjdILPsY5Uv1D42ZpUfaPILDlfactHgsRkw==", + "version": "0.24.2", + "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.24.2.tgz", + "integrity": "sha512-thpVCb/rhxE/BnMLQ7GReQLLN8q9qbHmI55F4489/ByVg2aQaQ6kbcLb6FHkocZzQhxc4gx0sCk0tJkKBFzDhA==", "cpu": [ "ppc64" ], @@ -2552,9 +2578,9 @@ } }, "node_modules/@esbuild/android-arm": { - "version": "0.24.0", - "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.24.0.tgz", - "integrity": "sha512-arAtTPo76fJ/ICkXWetLCc9EwEHKaeya4vMrReVlEIUCAUncH7M4bhMQ+M9Vf+FFOZJdTNMXNBrWwW+OXWpSew==", + "version": "0.24.2", + "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.24.2.tgz", + "integrity": "sha512-tmwl4hJkCfNHwFB3nBa8z1Uy3ypZpxqxfTQOcHX+xRByyYgunVbZ9MzUUfb0RxaHIMnbHagwAxuTL+tnNM+1/Q==", "cpu": [ "arm" ], @@ -2569,9 +2595,9 @@ } }, "node_modules/@esbuild/android-arm64": { - "version": "0.24.0", - "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.24.0.tgz", - "integrity": "sha512-Vsm497xFM7tTIPYK9bNTYJyF/lsP590Qc1WxJdlB6ljCbdZKU9SY8i7+Iin4kyhV/KV5J2rOKsBQbB77Ab7L/w==", + "version": "0.24.2", + "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.24.2.tgz", + "integrity": "sha512-cNLgeqCqV8WxfcTIOeL4OAtSmL8JjcN6m09XIgro1Wi7cF4t/THaWEa7eL5CMoMBdjoHOTh/vwTO/o2TRXIyzg==", "cpu": [ "arm64" ], @@ -2586,9 +2612,9 @@ } }, "node_modules/@esbuild/android-x64": { - "version": "0.24.0", - "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.24.0.tgz", - "integrity": "sha512-t8GrvnFkiIY7pa7mMgJd7p8p8qqYIz1NYiAoKc75Zyv73L3DZW++oYMSHPRarcotTKuSs6m3hTOa5CKHaS02TQ==", + "version": "0.24.2", + "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.24.2.tgz", + "integrity": "sha512-B6Q0YQDqMx9D7rvIcsXfmJfvUYLoP722bgfBlO5cGvNVb5V/+Y7nhBE3mHV9OpxBf4eAS2S68KZztiPaWq4XYw==", "cpu": [ "x64" ], @@ -2603,9 +2629,9 @@ } }, "node_modules/@esbuild/darwin-arm64": { - "version": "0.24.0", - "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.24.0.tgz", - "integrity": "sha512-CKyDpRbK1hXwv79soeTJNHb5EiG6ct3efd/FTPdzOWdbZZfGhpbcqIpiD0+vwmpu0wTIL97ZRPZu8vUt46nBSw==", + "version": "0.24.2", + "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.24.2.tgz", + "integrity": "sha512-kj3AnYWc+CekmZnS5IPu9D+HWtUI49hbnyqk0FLEJDbzCIQt7hg7ucF1SQAilhtYpIujfaHr6O0UHlzzSPdOeA==", "cpu": [ "arm64" ], @@ -2620,9 +2646,9 @@ } }, "node_modules/@esbuild/darwin-x64": { - "version": "0.24.0", - "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.24.0.tgz", - "integrity": "sha512-rgtz6flkVkh58od4PwTRqxbKH9cOjaXCMZgWD905JOzjFKW+7EiUObfd/Kav+A6Gyud6WZk9w+xu6QLytdi2OA==", + "version": "0.24.2", + "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.24.2.tgz", + "integrity": "sha512-WeSrmwwHaPkNR5H3yYfowhZcbriGqooyu3zI/3GGpF8AyUdsrrP0X6KumITGA9WOyiJavnGZUwPGvxvwfWPHIA==", "cpu": [ "x64" ], @@ -2637,9 +2663,9 @@ } }, "node_modules/@esbuild/freebsd-arm64": { - "version": "0.24.0", - "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.24.0.tgz", - "integrity": "sha512-6Mtdq5nHggwfDNLAHkPlyLBpE5L6hwsuXZX8XNmHno9JuL2+bg2BX5tRkwjyfn6sKbxZTq68suOjgWqCicvPXA==", + "version": "0.24.2", + "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.24.2.tgz", + "integrity": "sha512-UN8HXjtJ0k/Mj6a9+5u6+2eZ2ERD7Edt1Q9IZiB5UZAIdPnVKDoG7mdTVGhHJIeEml60JteamR3qhsr1r8gXvg==", "cpu": [ "arm64" ], @@ -2654,9 +2680,9 @@ } }, "node_modules/@esbuild/freebsd-x64": { - "version": "0.24.0", - "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.24.0.tgz", - "integrity": "sha512-D3H+xh3/zphoX8ck4S2RxKR6gHlHDXXzOf6f/9dbFt/NRBDIE33+cVa49Kil4WUjxMGW0ZIYBYtaGCa2+OsQwQ==", + "version": "0.24.2", + "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.24.2.tgz", + "integrity": "sha512-TvW7wE/89PYW+IevEJXZ5sF6gJRDY/14hyIGFXdIucxCsbRmLUcjseQu1SyTko+2idmCw94TgyaEZi9HUSOe3Q==", "cpu": [ "x64" ], @@ -2671,9 +2697,9 @@ } }, "node_modules/@esbuild/linux-arm": { - "version": "0.24.0", - "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.24.0.tgz", - "integrity": "sha512-gJKIi2IjRo5G6Glxb8d3DzYXlxdEj2NlkixPsqePSZMhLudqPhtZ4BUrpIuTjJYXxvF9njql+vRjB2oaC9XpBw==", + "version": "0.24.2", + "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.24.2.tgz", + "integrity": "sha512-n0WRM/gWIdU29J57hJyUdIsk0WarGd6To0s+Y+LwvlC55wt+GT/OgkwoXCXvIue1i1sSNWblHEig00GBWiJgfA==", "cpu": [ "arm" ], @@ -2688,9 +2714,9 @@ } }, "node_modules/@esbuild/linux-arm64": { - "version": "0.24.0", - "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.24.0.tgz", - "integrity": "sha512-TDijPXTOeE3eaMkRYpcy3LarIg13dS9wWHRdwYRnzlwlA370rNdZqbcp0WTyyV/k2zSxfko52+C7jU5F9Tfj1g==", + "version": "0.24.2", + "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.24.2.tgz", + "integrity": "sha512-7HnAD6074BW43YvvUmE/35Id9/NB7BeX5EoNkK9obndmZBUk8xmJJeU7DwmUeN7tkysslb2eSl6CTrYz6oEMQg==", "cpu": [ "arm64" ], @@ -2705,9 +2731,9 @@ } }, "node_modules/@esbuild/linux-ia32": { - "version": "0.24.0", - "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.24.0.tgz", - "integrity": "sha512-K40ip1LAcA0byL05TbCQ4yJ4swvnbzHscRmUilrmP9Am7//0UjPreh4lpYzvThT2Quw66MhjG//20mrufm40mA==", + "version": "0.24.2", + "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.24.2.tgz", + "integrity": "sha512-sfv0tGPQhcZOgTKO3oBE9xpHuUqguHvSo4jl+wjnKwFpapx+vUDcawbwPNuBIAYdRAvIDBfZVvXprIj3HA+Ugw==", "cpu": [ "ia32" ], @@ -2722,9 +2748,9 @@ } }, "node_modules/@esbuild/linux-loong64": { - "version": "0.24.0", - "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.24.0.tgz", - "integrity": "sha512-0mswrYP/9ai+CU0BzBfPMZ8RVm3RGAN/lmOMgW4aFUSOQBjA31UP8Mr6DDhWSuMwj7jaWOT0p0WoZ6jeHhrD7g==", + "version": "0.24.2", + "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.24.2.tgz", + "integrity": "sha512-CN9AZr8kEndGooS35ntToZLTQLHEjtVB5n7dl8ZcTZMonJ7CCfStrYhrzF97eAecqVbVJ7APOEe18RPI4KLhwQ==", "cpu": [ "loong64" ], @@ -2739,9 +2765,9 @@ } }, "node_modules/@esbuild/linux-mips64el": { - "version": "0.24.0", - "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.24.0.tgz", - "integrity": "sha512-hIKvXm0/3w/5+RDtCJeXqMZGkI2s4oMUGj3/jM0QzhgIASWrGO5/RlzAzm5nNh/awHE0A19h/CvHQe6FaBNrRA==", + "version": "0.24.2", + "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.24.2.tgz", + "integrity": "sha512-iMkk7qr/wl3exJATwkISxI7kTcmHKE+BlymIAbHO8xanq/TjHaaVThFF6ipWzPHryoFsesNQJPE/3wFJw4+huw==", "cpu": [ "mips64el" ], @@ -2756,9 +2782,9 @@ } }, "node_modules/@esbuild/linux-ppc64": { - "version": "0.24.0", - "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.24.0.tgz", - "integrity": "sha512-HcZh5BNq0aC52UoocJxaKORfFODWXZxtBaaZNuN3PUX3MoDsChsZqopzi5UupRhPHSEHotoiptqikjN/B77mYQ==", + "version": "0.24.2", + "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.24.2.tgz", + "integrity": "sha512-shsVrgCZ57Vr2L8mm39kO5PPIb+843FStGt7sGGoqiiWYconSxwTiuswC1VJZLCjNiMLAMh34jg4VSEQb+iEbw==", "cpu": [ "ppc64" ], @@ -2773,9 +2799,9 @@ } }, "node_modules/@esbuild/linux-riscv64": { - "version": "0.24.0", - "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.24.0.tgz", - "integrity": "sha512-bEh7dMn/h3QxeR2KTy1DUszQjUrIHPZKyO6aN1X4BCnhfYhuQqedHaa5MxSQA/06j3GpiIlFGSsy1c7Gf9padw==", + "version": "0.24.2", + "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.24.2.tgz", + "integrity": "sha512-4eSFWnU9Hhd68fW16GD0TINewo1L6dRrB+oLNNbYyMUAeOD2yCK5KXGK1GH4qD/kT+bTEXjsyTCiJGHPZ3eM9Q==", "cpu": [ "riscv64" ], @@ -2790,9 +2816,9 @@ } }, "node_modules/@esbuild/linux-s390x": { - "version": "0.24.0", - "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.24.0.tgz", - "integrity": "sha512-ZcQ6+qRkw1UcZGPyrCiHHkmBaj9SiCD8Oqd556HldP+QlpUIe2Wgn3ehQGVoPOvZvtHm8HPx+bH20c9pvbkX3g==", + "version": "0.24.2", + "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.24.2.tgz", + "integrity": "sha512-S0Bh0A53b0YHL2XEXC20bHLuGMOhFDO6GN4b3YjRLK//Ep3ql3erpNcPlEFed93hsQAjAQDNsvcK+hV90FubSw==", "cpu": [ "s390x" ], @@ -2807,9 +2833,9 @@ } }, "node_modules/@esbuild/linux-x64": { - "version": "0.24.0", - "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.24.0.tgz", - "integrity": "sha512-vbutsFqQ+foy3wSSbmjBXXIJ6PL3scghJoM8zCL142cGaZKAdCZHyf+Bpu/MmX9zT9Q0zFBVKb36Ma5Fzfa8xA==", + "version": "0.24.2", + "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.24.2.tgz", + "integrity": "sha512-8Qi4nQcCTbLnK9WoMjdC9NiTG6/E38RNICU6sUNqK0QFxCYgoARqVqxdFmWkdonVsvGqWhmm7MO0jyTqLqwj0Q==", "cpu": [ "x64" ], @@ -2823,10 +2849,27 @@ "node": ">=18" } }, + "node_modules/@esbuild/netbsd-arm64": { + "version": "0.24.2", + "resolved": "https://registry.npmjs.org/@esbuild/netbsd-arm64/-/netbsd-arm64-0.24.2.tgz", + "integrity": "sha512-wuLK/VztRRpMt9zyHSazyCVdCXlpHkKm34WUyinD2lzK07FAHTq0KQvZZlXikNWkDGoT6x3TD51jKQ7gMVpopw==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "netbsd" + ], + "engines": { + "node": ">=18" + } + }, "node_modules/@esbuild/netbsd-x64": { - "version": "0.24.0", - "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.24.0.tgz", - "integrity": "sha512-hjQ0R/ulkO8fCYFsG0FZoH+pWgTTDreqpqY7UnQntnaKv95uP5iW3+dChxnx7C3trQQU40S+OgWhUVwCjVFLvg==", + "version": "0.24.2", + "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.24.2.tgz", + "integrity": "sha512-VefFaQUc4FMmJuAxmIHgUmfNiLXY438XrL4GDNV1Y1H/RW3qow68xTwjZKfj/+Plp9NANmzbH5R40Meudu8mmw==", "cpu": [ "x64" ], @@ -2841,9 +2884,9 @@ } }, "node_modules/@esbuild/openbsd-arm64": { - "version": "0.24.0", - "resolved": "https://registry.npmjs.org/@esbuild/openbsd-arm64/-/openbsd-arm64-0.24.0.tgz", - "integrity": "sha512-MD9uzzkPQbYehwcN583yx3Tu5M8EIoTD+tUgKF982WYL9Pf5rKy9ltgD0eUgs8pvKnmizxjXZyLt0z6DC3rRXg==", + "version": "0.24.2", + "resolved": "https://registry.npmjs.org/@esbuild/openbsd-arm64/-/openbsd-arm64-0.24.2.tgz", + "integrity": "sha512-YQbi46SBct6iKnszhSvdluqDmxCJA+Pu280Av9WICNwQmMxV7nLRHZfjQzwbPs3jeWnuAhE9Jy0NrnJ12Oz+0A==", "cpu": [ "arm64" ], @@ -2858,9 +2901,9 @@ } }, "node_modules/@esbuild/openbsd-x64": { - "version": "0.24.0", - "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.24.0.tgz", - "integrity": "sha512-4ir0aY1NGUhIC1hdoCzr1+5b43mw99uNwVzhIq1OY3QcEwPDO3B7WNXBzaKY5Nsf1+N11i1eOfFcq+D/gOS15Q==", + "version": "0.24.2", + "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.24.2.tgz", + "integrity": "sha512-+iDS6zpNM6EnJyWv0bMGLWSWeXGN/HTaF/LXHXHwejGsVi+ooqDfMCCTerNFxEkM3wYVcExkeGXNqshc9iMaOA==", "cpu": [ "x64" ], @@ -2875,9 +2918,9 @@ } }, "node_modules/@esbuild/sunos-x64": { - "version": "0.24.0", - "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.24.0.tgz", - "integrity": "sha512-jVzdzsbM5xrotH+W5f1s+JtUy1UWgjU0Cf4wMvffTB8m6wP5/kx0KiaLHlbJO+dMgtxKV8RQ/JvtlFcdZ1zCPA==", + "version": "0.24.2", + "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.24.2.tgz", + "integrity": "sha512-hTdsW27jcktEvpwNHJU4ZwWFGkz2zRJUz8pvddmXPtXDzVKTTINmlmga3ZzwcuMpUvLw7JkLy9QLKyGpD2Yxig==", "cpu": [ "x64" ], @@ -2892,9 +2935,9 @@ } }, "node_modules/@esbuild/win32-arm64": { - "version": "0.24.0", - "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.24.0.tgz", - "integrity": "sha512-iKc8GAslzRpBytO2/aN3d2yb2z8XTVfNV0PjGlCxKo5SgWmNXx82I/Q3aG1tFfS+A2igVCY97TJ8tnYwpUWLCA==", + "version": "0.24.2", + "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.24.2.tgz", + "integrity": "sha512-LihEQ2BBKVFLOC9ZItT9iFprsE9tqjDjnbulhHoFxYQtQfai7qfluVODIYxt1PgdoyQkz23+01rzwNwYfutxUQ==", "cpu": [ "arm64" ], @@ -2909,9 +2952,9 @@ } }, "node_modules/@esbuild/win32-ia32": { - "version": "0.24.0", - "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.24.0.tgz", - "integrity": "sha512-vQW36KZolfIudCcTnaTpmLQ24Ha1RjygBo39/aLkM2kmjkWmZGEJ5Gn9l5/7tzXA42QGIoWbICfg6KLLkIw6yw==", + "version": "0.24.2", + "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.24.2.tgz", + "integrity": "sha512-q+iGUwfs8tncmFC9pcnD5IvRHAzmbwQ3GPS5/ceCyHdjXubwQWI12MKWSNSMYLJMq23/IUCvJMS76PDqXe1fxA==", "cpu": [ "ia32" ], @@ -2926,9 +2969,9 @@ } }, "node_modules/@esbuild/win32-x64": { - "version": "0.24.0", - "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.24.0.tgz", - "integrity": "sha512-7IAFPrjSQIJrGsK6flwg7NFmwBoSTyF3rl7If0hNUFQU4ilTsEPL6GuMuU9BfIWVVGuRnuIidkSMC+c0Otu8IA==", + "version": "0.24.2", + "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.24.2.tgz", + "integrity": "sha512-7VTgWzgMGvup6aSqDPLiW5zHaxYJGTO4OokMjIlrCtf+VpEL+cXKtCvg723iguPYI5oaUNdS+/V7OU2gvXVWEg==", "cpu": [ "x64" ], @@ -3170,16 +3213,17 @@ "license": "BSD-3-Clause" }, "node_modules/@igniteui/angular-schematics": { - "version": "19.0.1436", - "resolved": "https://registry.npmjs.org/@igniteui/angular-schematics/-/angular-schematics-19.0.1436.tgz", - "integrity": "sha512-WLu73bWaUZIt4NDf57i2eReTwo1QEZAVCynbeS//K/3LEgIMI5zPkESWINqmkbMpXOoIi890l94jwqXcYUfc/g==", + "version": "19.0.14313", + "resolved": "https://registry.npmjs.org/@igniteui/angular-schematics/-/angular-schematics-19.0.14313.tgz", + "integrity": "sha512-LQwDwSIJ95zEL/aJl4C5xk3lzkdd2DccmUuMAn2PAnewuzuEhbB4Kde657EpGAFISUo9icvNqH0wXF/hb1UuzQ==", "dev": true, "hasInstallScript": true, + "license": "MIT", "dependencies": { "@angular-devkit/core": "^19.0.0", "@angular-devkit/schematics": "^19.0.0", - "@igniteui/angular-templates": "~19.0.1436", - "@igniteui/cli-core": "~14.3.6", + "@igniteui/angular-templates": "~19.0.14313", + "@igniteui/cli-core": "~14.3.13", "@schematics/angular": "~19.0.0", "minimatch": "^10.0.1", "rxjs": "^7.8.1" @@ -3201,12 +3245,13 @@ } }, "node_modules/@igniteui/angular-templates": { - "version": "19.0.1436", - "resolved": "https://registry.npmjs.org/@igniteui/angular-templates/-/angular-templates-19.0.1436.tgz", - "integrity": "sha512-nHcpC2tsbpgNmFh4+2xgB2swUeaZU6ciHRvuut1si8nQjn7EpLPSrThLvUZnfCXRi+t3moxAaAIiMR7D7hr44A==", + "version": "19.0.14313", + "resolved": "https://registry.npmjs.org/@igniteui/angular-templates/-/angular-templates-19.0.14313.tgz", + "integrity": "sha512-31EfTN5TEUqdDDavHcq1JvsIIilyTrPUugKvNdhOC2tTvsnywbtPfrGL/OlJiopAM2KH5EktBwEcSI2ND2uK9A==", "dev": true, + "license": "MIT", "dependencies": { - "@igniteui/cli-core": "~14.3.6", + "@igniteui/cli-core": "~14.3.13", "typescript": "~5.5.4" } }, @@ -3215,6 +3260,7 @@ "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.5.4.tgz", "integrity": "sha512-Mtq29sKDAEYP7aljRgtPOpTvOfbwRWlS6dPRzwjdE+C0R4brX/GUyhHSecbHMFLNBLcJIPt9nl9yG5TZ1weH+Q==", "dev": true, + "license": "Apache-2.0", "bin": { "tsc": "bin/tsc", "tsserver": "bin/tsserver" @@ -3224,10 +3270,11 @@ } }, "node_modules/@igniteui/cli-core": { - "version": "14.3.6", - "resolved": "https://registry.npmjs.org/@igniteui/cli-core/-/cli-core-14.3.6.tgz", - "integrity": "sha512-I7scMa5oA7rMRMhPv6Tb8Lz0pi+8tLM/e/VY9VQj1xQWL40+safYnzfwjeTXXMvK4aKlQ4gM43Emdo+O6yQ5Kw==", + "version": "14.3.13", + "resolved": "https://registry.npmjs.org/@igniteui/cli-core/-/cli-core-14.3.13.tgz", + "integrity": "sha512-16l5/Slv5LcTZN8grOJGYQEZ6u1RkBoE6yhfQvYHSB0TNZd4hXIGd4ZBs48ntfeuq8NjJJPvmued+FngA8oOMw==", "dev": true, + "license": "MIT", "dependencies": { "@inquirer/prompts": "~5.4.0", "chalk": "^2.3.2", @@ -3241,6 +3288,7 @@ "resolved": "https://registry.npmjs.org/@inquirer/checkbox/-/checkbox-2.5.0.tgz", "integrity": "sha512-sMgdETOfi2dUHT8r7TT1BTKOwNvdDGFDXYWtQ2J69SvlYNntk9I/gJe7r5yvMwwsuKnYbuRs3pNhx4tgNck5aA==", "dev": true, + "license": "MIT", "dependencies": { "@inquirer/core": "^9.1.0", "@inquirer/figures": "^1.0.5", @@ -3257,6 +3305,7 @@ "resolved": "https://registry.npmjs.org/@inquirer/confirm/-/confirm-3.2.0.tgz", "integrity": "sha512-oOIwPs0Dvq5220Z8lGL/6LHRTEr9TgLHmiI99Rj1PJ1p1czTys+olrgBqZk4E2qC0YTzeHprxSQmoHioVdJ7Lw==", "dev": true, + "license": "MIT", "dependencies": { "@inquirer/core": "^9.1.0", "@inquirer/type": "^1.5.3" @@ -3270,6 +3319,7 @@ "resolved": "https://registry.npmjs.org/@inquirer/core/-/core-9.2.1.tgz", "integrity": "sha512-F2VBt7W/mwqEU4bL0RnHNZmC/OxzNx9cOYxHqnXX3MP6ruYvZUZAW9imgN9+h/uBT/oP8Gh888J2OZSbjSeWcg==", "dev": true, + "license": "MIT", "dependencies": { "@inquirer/figures": "^1.0.6", "@inquirer/type": "^2.0.0", @@ -3293,6 +3343,7 @@ "resolved": "https://registry.npmjs.org/@inquirer/type/-/type-2.0.0.tgz", "integrity": "sha512-XvJRx+2KR3YXyYtPUUy+qd9i7p+GO9Ko6VIIpWlBrpWwXDv8WLFeHTxz35CfQFUiBMLXlGHhGzys7lqit9gWag==", "dev": true, + "license": "MIT", "dependencies": { "mute-stream": "^1.0.0" }, @@ -3305,6 +3356,7 @@ "resolved": "https://registry.npmjs.org/@inquirer/editor/-/editor-2.2.0.tgz", "integrity": "sha512-9KHOpJ+dIL5SZli8lJ6xdaYLPPzB8xB9GZItg39MBybzhxA16vxmszmQFrRwbOA918WA2rvu8xhDEg/p6LXKbw==", "dev": true, + "license": "MIT", "dependencies": { "@inquirer/core": "^9.1.0", "@inquirer/type": "^1.5.3", @@ -3319,6 +3371,7 @@ "resolved": "https://registry.npmjs.org/@inquirer/expand/-/expand-2.3.0.tgz", "integrity": "sha512-qnJsUcOGCSG1e5DTOErmv2BPQqrtT6uzqn1vI/aYGiPKq+FgslGZmtdnXbhuI7IlT7OByDoEEqdnhUnVR2hhLw==", "dev": true, + "license": "MIT", "dependencies": { "@inquirer/core": "^9.1.0", "@inquirer/type": "^1.5.3", @@ -3333,6 +3386,7 @@ "resolved": "https://registry.npmjs.org/@inquirer/input/-/input-2.3.0.tgz", "integrity": "sha512-XfnpCStx2xgh1LIRqPXrTNEEByqQWoxsWYzNRSEUxJ5c6EQlhMogJ3vHKu8aXuTacebtaZzMAHwEL0kAflKOBw==", "dev": true, + "license": "MIT", "dependencies": { "@inquirer/core": "^9.1.0", "@inquirer/type": "^1.5.3" @@ -3346,6 +3400,7 @@ "resolved": "https://registry.npmjs.org/@inquirer/number/-/number-1.1.0.tgz", "integrity": "sha512-ilUnia/GZUtfSZy3YEErXLJ2Sljo/mf9fiKc08n18DdwdmDbOzRcTv65H1jjDvlsAuvdFXf4Sa/aL7iw/NanVA==", "dev": true, + "license": "MIT", "dependencies": { "@inquirer/core": "^9.1.0", "@inquirer/type": "^1.5.3" @@ -3359,6 +3414,7 @@ "resolved": "https://registry.npmjs.org/@inquirer/password/-/password-2.2.0.tgz", "integrity": "sha512-5otqIpgsPYIshqhgtEwSspBQE40etouR8VIxzpJkv9i0dVHIpyhiivbkH9/dGiMLdyamT54YRdGJLfl8TFnLHg==", "dev": true, + "license": "MIT", "dependencies": { "@inquirer/core": "^9.1.0", "@inquirer/type": "^1.5.3", @@ -3373,6 +3429,7 @@ "resolved": "https://registry.npmjs.org/@inquirer/prompts/-/prompts-5.4.0.tgz", "integrity": "sha512-HIQGd7JOX6WXf7zg7WGs+1m+e3eRFyL4mDtWRlV01AXqZido9W3BSoku2BR4E1lK/NCXok6jg6tTcLw4I0thfg==", "dev": true, + "license": "MIT", "dependencies": { "@inquirer/checkbox": "^2.5.0", "@inquirer/confirm": "^3.2.0", @@ -3394,6 +3451,7 @@ "resolved": "https://registry.npmjs.org/@inquirer/rawlist/-/rawlist-2.3.0.tgz", "integrity": "sha512-zzfNuINhFF7OLAtGHfhwOW2TlYJyli7lOUoJUXw/uyklcwalV6WRXBXtFIicN8rTRK1XTiPWB4UY+YuW8dsnLQ==", "dev": true, + "license": "MIT", "dependencies": { "@inquirer/core": "^9.1.0", "@inquirer/type": "^1.5.3", @@ -3408,6 +3466,7 @@ "resolved": "https://registry.npmjs.org/@inquirer/search/-/search-1.1.0.tgz", "integrity": "sha512-h+/5LSj51dx7hp5xOn4QFnUaKeARwUCLs6mIhtkJ0JYPBLmEYjdHSYh7I6GrLg9LwpJ3xeX0FZgAG1q0QdCpVQ==", "dev": true, + "license": "MIT", "dependencies": { "@inquirer/core": "^9.1.0", "@inquirer/figures": "^1.0.5", @@ -3423,6 +3482,7 @@ "resolved": "https://registry.npmjs.org/@inquirer/select/-/select-2.5.0.tgz", "integrity": "sha512-YmDobTItPP3WcEI86GvPo+T2sRHkxxOq/kXmsBjHS5BVXUgvgZ5AfJjkvQvZr03T81NnI3KrrRuMzeuYUQRFOA==", "dev": true, + "license": "MIT", "dependencies": { "@inquirer/core": "^9.1.0", "@inquirer/figures": "^1.0.5", @@ -3439,6 +3499,7 @@ "resolved": "https://registry.npmjs.org/@inquirer/type/-/type-1.5.5.tgz", "integrity": "sha512-MzICLu4yS7V8AA61sANROZ9vT1H3ooca5dSmI1FjZkzq7o/koMsRfQSzRtFo+F3Ao4Sf1C0bpLKejpKB/+j6MA==", "dev": true, + "license": "MIT", "dependencies": { "mute-stream": "^1.0.0" }, @@ -3446,20 +3507,12 @@ "node": ">=18" } }, - "node_modules/@igniteui/cli-core/node_modules/@types/node": { - "version": "22.10.6", - "resolved": "https://registry.npmjs.org/@types/node/-/node-22.10.6.tgz", - "integrity": "sha512-qNiuwC4ZDAUNcY47xgaSuS92cjf8JbSUoaKS77bmLG1rU7MlATVSiw/IlrjtIyyskXBZ8KkNfjK/P5na7rgXbQ==", - "dev": true, - "dependencies": { - "undici-types": "~6.20.0" - } - }, "node_modules/@igniteui/cli-core/node_modules/mute-stream": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/mute-stream/-/mute-stream-1.0.0.tgz", "integrity": "sha512-avsJQhyd+680gKXyG/sQc0nXaC6rBkPOfyHYcFb9+hdkqQkR9bdnkJ0AMZhke0oesPqIO+mFFJ+IdBc7mst4IA==", "dev": true, + "license": "ISC", "engines": { "node": "^14.17.0 || ^16.13.0 || >=18.0.0" } @@ -3469,6 +3522,7 @@ "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.5.4.tgz", "integrity": "sha512-Mtq29sKDAEYP7aljRgtPOpTvOfbwRWlS6dPRzwjdE+C0R4brX/GUyhHSecbHMFLNBLcJIPt9nl9yG5TZ1weH+Q==", "dev": true, + "license": "Apache-2.0", "bin": { "tsc": "bin/tsc", "tsserver": "bin/tsserver" @@ -3477,12 +3531,6 @@ "node": ">=14.17" } }, - "node_modules/@igniteui/cli-core/node_modules/undici-types": { - "version": "6.20.0", - "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.20.0.tgz", - "integrity": "sha512-Ny6QZ2Nju20vw1SRHe3d9jVu6gJ+4e3+MMpqu7pqE5HT6WsTSlce++GQmK5UXS8mzV8DSYHrQH+Xrf2jVcuKNg==", - "dev": true - }, "node_modules/@igniteui/material-icons-extended": { "version": "3.1.0", "resolved": "https://registry.npmjs.org/@igniteui/material-icons-extended/-/material-icons-extended-3.1.0.tgz", @@ -3490,15 +3538,15 @@ "license": "MIT" }, "node_modules/@inquirer/checkbox": { - "version": "4.0.2", - "resolved": "https://registry.npmjs.org/@inquirer/checkbox/-/checkbox-4.0.2.tgz", - "integrity": "sha512-+gznPl8ip8P8HYHYecDtUtdsh1t2jvb+sWCD72GAiZ9m45RqwrLmReDaqdC0umQfamtFXVRoMVJ2/qINKGm9Tg==", + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/@inquirer/checkbox/-/checkbox-4.1.2.tgz", + "integrity": "sha512-PL9ixC5YsPXzXhAZFUPmkXGxfgjkdfZdPEPPmt4kFwQ4LBMDG9n/nHXYRGGZSKZJs+d1sGKWgS2GiPzVRKUdtQ==", "dev": true, "license": "MIT", "dependencies": { - "@inquirer/core": "^10.1.0", - "@inquirer/figures": "^1.0.8", - "@inquirer/type": "^3.0.1", + "@inquirer/core": "^10.1.7", + "@inquirer/figures": "^1.0.10", + "@inquirer/type": "^3.0.4", "ansi-escapes": "^4.3.2", "yoctocolors-cjs": "^2.1.2" }, @@ -3507,17 +3555,22 @@ }, "peerDependencies": { "@types/node": ">=18" - } - }, + }, + "peerDependenciesMeta": { + "@types/node": { + "optional": true + } + } + }, "node_modules/@inquirer/confirm": { - "version": "5.0.2", - "resolved": "https://registry.npmjs.org/@inquirer/confirm/-/confirm-5.0.2.tgz", - "integrity": "sha512-KJLUHOaKnNCYzwVbryj3TNBxyZIrr56fR5N45v6K9IPrbT6B7DcudBMfylkV1A8PUdJE15mybkEQyp2/ZUpxUA==", + "version": "5.1.1", + "resolved": "https://registry.npmjs.org/@inquirer/confirm/-/confirm-5.1.1.tgz", + "integrity": "sha512-vVLSbGci+IKQvDOtzpPTCOiEJCNidHcAq9JYVoWTW0svb5FiwSLotkM+JXNXejfjnzVYV9n0DTBythl9+XgTxg==", "dev": true, "license": "MIT", "dependencies": { - "@inquirer/core": "^10.1.0", - "@inquirer/type": "^3.0.1" + "@inquirer/core": "^10.1.2", + "@inquirer/type": "^3.0.2" }, "engines": { "node": ">=18" @@ -3527,35 +3580,42 @@ } }, "node_modules/@inquirer/core": { - "version": "10.1.0", - "resolved": "https://registry.npmjs.org/@inquirer/core/-/core-10.1.0.tgz", - "integrity": "sha512-I+ETk2AL+yAVbvuKx5AJpQmoaWhpiTFOg/UJb7ZkMAK4blmtG8ATh5ct+T/8xNld0CZG/2UhtkdMwpgvld92XQ==", + "version": "10.1.7", + "resolved": "https://registry.npmjs.org/@inquirer/core/-/core-10.1.7.tgz", + "integrity": "sha512-AA9CQhlrt6ZgiSy6qoAigiA1izOa751ugX6ioSjqgJ+/Gd+tEN/TORk5sUYNjXuHWfW0r1n/a6ak4u/NqHHrtA==", "dev": true, "license": "MIT", "dependencies": { - "@inquirer/figures": "^1.0.8", - "@inquirer/type": "^3.0.1", + "@inquirer/figures": "^1.0.10", + "@inquirer/type": "^3.0.4", "ansi-escapes": "^4.3.2", "cli-width": "^4.1.0", "mute-stream": "^2.0.0", "signal-exit": "^4.1.0", - "strip-ansi": "^6.0.1", "wrap-ansi": "^6.2.0", "yoctocolors-cjs": "^2.1.2" }, "engines": { "node": ">=18" + }, + "peerDependencies": { + "@types/node": ">=18" + }, + "peerDependenciesMeta": { + "@types/node": { + "optional": true + } } }, "node_modules/@inquirer/editor": { - "version": "4.1.0", - "resolved": "https://registry.npmjs.org/@inquirer/editor/-/editor-4.1.0.tgz", - "integrity": "sha512-K1gGWsxEqO23tVdp5MT3H799OZ4ER1za7Dlc8F4um0W7lwSv0KGR/YyrUEyimj0g7dXZd8XknM/5QA2/Uy+TbA==", + "version": "4.2.7", + "resolved": "https://registry.npmjs.org/@inquirer/editor/-/editor-4.2.7.tgz", + "integrity": "sha512-gktCSQtnSZHaBytkJKMKEuswSk2cDBuXX5rxGFv306mwHfBPjg5UAldw9zWGoEyvA9KpRDkeM4jfrx0rXn0GyA==", "dev": true, "license": "MIT", "dependencies": { - "@inquirer/core": "^10.1.0", - "@inquirer/type": "^3.0.1", + "@inquirer/core": "^10.1.7", + "@inquirer/type": "^3.0.4", "external-editor": "^3.1.0" }, "engines": { @@ -3563,17 +3623,22 @@ }, "peerDependencies": { "@types/node": ">=18" + }, + "peerDependenciesMeta": { + "@types/node": { + "optional": true + } } }, "node_modules/@inquirer/expand": { - "version": "4.0.2", - "resolved": "https://registry.npmjs.org/@inquirer/expand/-/expand-4.0.2.tgz", - "integrity": "sha512-WdgCX1cUtinz+syKyZdJomovULYlKUWZbVYZzhf+ZeeYf4htAQ3jLymoNs3koIAKfZZl3HUBb819ClCBfyznaw==", + "version": "4.0.9", + "resolved": "https://registry.npmjs.org/@inquirer/expand/-/expand-4.0.9.tgz", + "integrity": "sha512-Xxt6nhomWTAmuSX61kVgglLjMEFGa+7+F6UUtdEUeg7fg4r9vaFttUUKrtkViYYrQBA5Ia1tkOJj2koP9BuLig==", "dev": true, "license": "MIT", "dependencies": { - "@inquirer/core": "^10.1.0", - "@inquirer/type": "^3.0.1", + "@inquirer/core": "^10.1.7", + "@inquirer/type": "^3.0.4", "yoctocolors-cjs": "^2.1.2" }, "engines": { @@ -3581,12 +3646,17 @@ }, "peerDependencies": { "@types/node": ">=18" + }, + "peerDependenciesMeta": { + "@types/node": { + "optional": true + } } }, "node_modules/@inquirer/figures": { - "version": "1.0.8", - "resolved": "https://registry.npmjs.org/@inquirer/figures/-/figures-1.0.8.tgz", - "integrity": "sha512-tKd+jsmhq21AP1LhexC0pPwsCxEhGgAkg28byjJAd+xhmIs8LUX8JbUc3vBf3PhLxWiB5EvyBE5X7JSPAqMAqg==", + "version": "1.0.10", + "resolved": "https://registry.npmjs.org/@inquirer/figures/-/figures-1.0.10.tgz", + "integrity": "sha512-Ey6176gZmeqZuY/W/nZiUyvmb1/qInjcpiZjXWi6nON+nxJpD1bxtSoBxNliGISae32n6OwbY+TSXPZ1CfS4bw==", "dev": true, "license": "MIT", "engines": { @@ -3594,48 +3664,58 @@ } }, "node_modules/@inquirer/input": { - "version": "4.0.2", - "resolved": "https://registry.npmjs.org/@inquirer/input/-/input-4.0.2.tgz", - "integrity": "sha512-yCLCraigU085EcdpIVEDgyfGv4vBiE4I+k1qRkc9C5dMjWF42ADMGy1RFU94+eZlz4YlkmFsiyHZy0W1wdhaNg==", + "version": "4.1.6", + "resolved": "https://registry.npmjs.org/@inquirer/input/-/input-4.1.6.tgz", + "integrity": "sha512-1f5AIsZuVjPT4ecA8AwaxDFNHny/tSershP/cTvTDxLdiIGTeILNcKozB0LaYt6mojJLUbOYhpIxicaYf7UKIQ==", "dev": true, "license": "MIT", "dependencies": { - "@inquirer/core": "^10.1.0", - "@inquirer/type": "^3.0.1" + "@inquirer/core": "^10.1.7", + "@inquirer/type": "^3.0.4" }, "engines": { "node": ">=18" }, "peerDependencies": { "@types/node": ">=18" + }, + "peerDependenciesMeta": { + "@types/node": { + "optional": true + } } }, "node_modules/@inquirer/number": { - "version": "3.0.2", - "resolved": "https://registry.npmjs.org/@inquirer/number/-/number-3.0.2.tgz", - "integrity": "sha512-MKQhYofdUNk7eqJtz52KvM1dH6R93OMrqHduXCvuefKrsiMjHiMwjc3NZw5Imm2nqY7gWd9xdhYrtcHMJQZUxA==", + "version": "3.0.9", + "resolved": "https://registry.npmjs.org/@inquirer/number/-/number-3.0.9.tgz", + "integrity": "sha512-iN2xZvH3tyIYXLXBvlVh0npk1q/aVuKXZo5hj+K3W3D4ngAEq/DkLpofRzx6oebTUhBvOgryZ+rMV0yImKnG3w==", "dev": true, "license": "MIT", "dependencies": { - "@inquirer/core": "^10.1.0", - "@inquirer/type": "^3.0.1" + "@inquirer/core": "^10.1.7", + "@inquirer/type": "^3.0.4" }, "engines": { "node": ">=18" }, "peerDependencies": { "@types/node": ">=18" + }, + "peerDependenciesMeta": { + "@types/node": { + "optional": true + } } }, "node_modules/@inquirer/password": { - "version": "4.0.2", - "resolved": "https://registry.npmjs.org/@inquirer/password/-/password-4.0.2.tgz", - "integrity": "sha512-tQXGSu7IO07gsYlGy3VgXRVsbOWqFBMbqAUrJSc1PDTQQ5Qdm+QVwkP0OC0jnUZ62D19iPgXOMO+tnWG+HhjNQ==", + "version": "4.0.9", + "resolved": "https://registry.npmjs.org/@inquirer/password/-/password-4.0.9.tgz", + "integrity": "sha512-xBEoOw1XKb0rIN208YU7wM7oJEHhIYkfG7LpTJAEW913GZeaoQerzf5U/LSHI45EVvjAdgNXmXgH51cUXKZcJQ==", "dev": true, "license": "MIT", "dependencies": { - "@inquirer/core": "^10.1.0", - "@inquirer/type": "^3.0.1", + "@inquirer/core": "^10.1.7", + "@inquirer/type": "^3.0.4", "ansi-escapes": "^4.3.2" }, "engines": { @@ -3643,25 +3723,30 @@ }, "peerDependencies": { "@types/node": ">=18" + }, + "peerDependenciesMeta": { + "@types/node": { + "optional": true + } } }, "node_modules/@inquirer/prompts": { - "version": "7.1.0", - "resolved": "https://registry.npmjs.org/@inquirer/prompts/-/prompts-7.1.0.tgz", - "integrity": "sha512-5U/XiVRH2pp1X6gpNAjWOglMf38/Ys522ncEHIKT1voRUvSj/DQnR22OVxHnwu5S+rCFaUiPQ57JOtMFQayqYA==", + "version": "7.2.1", + "resolved": "https://registry.npmjs.org/@inquirer/prompts/-/prompts-7.2.1.tgz", + "integrity": "sha512-v2JSGri6/HXSfoGIwuKEn8sNCQK6nsB2BNpy2lSX6QH9bsECrMv93QHnj5+f+1ZWpF/VNioIV2B/PDox8EvGuQ==", "dev": true, "license": "MIT", "dependencies": { - "@inquirer/checkbox": "^4.0.2", - "@inquirer/confirm": "^5.0.2", - "@inquirer/editor": "^4.1.0", - "@inquirer/expand": "^4.0.2", - "@inquirer/input": "^4.0.2", - "@inquirer/number": "^3.0.2", - "@inquirer/password": "^4.0.2", - "@inquirer/rawlist": "^4.0.2", - "@inquirer/search": "^3.0.2", - "@inquirer/select": "^4.0.2" + "@inquirer/checkbox": "^4.0.4", + "@inquirer/confirm": "^5.1.1", + "@inquirer/editor": "^4.2.1", + "@inquirer/expand": "^4.0.4", + "@inquirer/input": "^4.1.1", + "@inquirer/number": "^3.0.4", + "@inquirer/password": "^4.0.4", + "@inquirer/rawlist": "^4.0.4", + "@inquirer/search": "^3.0.4", + "@inquirer/select": "^4.0.4" }, "engines": { "node": ">=18" @@ -3671,14 +3756,14 @@ } }, "node_modules/@inquirer/rawlist": { - "version": "4.0.2", - "resolved": "https://registry.npmjs.org/@inquirer/rawlist/-/rawlist-4.0.2.tgz", - "integrity": "sha512-3XGcskMoVF8H0Dl1S5TSZ3rMPPBWXRcM0VeNVsS4ByWeWjSeb0lPqfnBg6N7T0608I1B2bSVnbi2cwCrmOD1Yw==", + "version": "4.0.9", + "resolved": "https://registry.npmjs.org/@inquirer/rawlist/-/rawlist-4.0.9.tgz", + "integrity": "sha512-+5t6ebehKqgoxV8fXwE49HkSF2Rc9ijNiVGEQZwvbMI61/Q5RcD+jWD6Gs1tKdz5lkI8GRBL31iO0HjGK1bv+A==", "dev": true, "license": "MIT", "dependencies": { - "@inquirer/core": "^10.1.0", - "@inquirer/type": "^3.0.1", + "@inquirer/core": "^10.1.7", + "@inquirer/type": "^3.0.4", "yoctocolors-cjs": "^2.1.2" }, "engines": { @@ -3686,18 +3771,23 @@ }, "peerDependencies": { "@types/node": ">=18" + }, + "peerDependenciesMeta": { + "@types/node": { + "optional": true + } } }, "node_modules/@inquirer/search": { - "version": "3.0.2", - "resolved": "https://registry.npmjs.org/@inquirer/search/-/search-3.0.2.tgz", - "integrity": "sha512-Zv4FC7w4dJ13BOJfKRQCICQfShinGjb1bCEIHxTSnjj2telu3+3RHwHubPG9HyD4aix5s+lyAMEK/wSFD75HLA==", + "version": "3.0.9", + "resolved": "https://registry.npmjs.org/@inquirer/search/-/search-3.0.9.tgz", + "integrity": "sha512-DWmKztkYo9CvldGBaRMr0ETUHgR86zE6sPDVOHsqz4ISe9o1LuiWfgJk+2r75acFclA93J/lqzhT0dTjCzHuoA==", "dev": true, "license": "MIT", "dependencies": { - "@inquirer/core": "^10.1.0", - "@inquirer/figures": "^1.0.8", - "@inquirer/type": "^3.0.1", + "@inquirer/core": "^10.1.7", + "@inquirer/figures": "^1.0.10", + "@inquirer/type": "^3.0.4", "yoctocolors-cjs": "^2.1.2" }, "engines": { @@ -3705,18 +3795,23 @@ }, "peerDependencies": { "@types/node": ">=18" + }, + "peerDependenciesMeta": { + "@types/node": { + "optional": true + } } }, "node_modules/@inquirer/select": { - "version": "4.0.2", - "resolved": "https://registry.npmjs.org/@inquirer/select/-/select-4.0.2.tgz", - "integrity": "sha512-uSWUzaSYAEj0hlzxa1mUB6VqrKaYx0QxGBLZzU4xWFxaSyGaXxsSE4OSOwdU24j0xl8OajgayqFXW0l2bkl2kg==", + "version": "4.0.9", + "resolved": "https://registry.npmjs.org/@inquirer/select/-/select-4.0.9.tgz", + "integrity": "sha512-BpJyJe7Dkhv2kz7yG7bPSbJLQuu/rqyNlF1CfiiFeFwouegfH+zh13KDyt6+d9DwucKo7hqM3wKLLyJxZMO+Xg==", "dev": true, "license": "MIT", "dependencies": { - "@inquirer/core": "^10.1.0", - "@inquirer/figures": "^1.0.8", - "@inquirer/type": "^3.0.1", + "@inquirer/core": "^10.1.7", + "@inquirer/figures": "^1.0.10", + "@inquirer/type": "^3.0.4", "ansi-escapes": "^4.3.2", "yoctocolors-cjs": "^2.1.2" }, @@ -3725,12 +3820,17 @@ }, "peerDependencies": { "@types/node": ">=18" + }, + "peerDependenciesMeta": { + "@types/node": { + "optional": true + } } }, "node_modules/@inquirer/type": { - "version": "3.0.1", - "resolved": "https://registry.npmjs.org/@inquirer/type/-/type-3.0.1.tgz", - "integrity": "sha512-+ksJMIy92sOAiAccGpcKZUc3bYO07cADnscIxHBknEm3uNts3movSmBofc1908BNy5edKscxYeAdaX1NXkHS6A==", + "version": "3.0.4", + "resolved": "https://registry.npmjs.org/@inquirer/type/-/type-3.0.4.tgz", + "integrity": "sha512-2MNFrDY8jkFYc9Il9DgLsHhMzuHnOYM1+CUYVWbzu9oT0hC7V7EcYvdCKeoll/Fcci04A+ERZ9wcc7cQ8lTkIA==", "dev": true, "license": "MIT", "engines": { @@ -3738,6 +3838,11 @@ }, "peerDependencies": { "@types/node": ">=18" + }, + "peerDependenciesMeta": { + "@types/node": { + "optional": true + } } }, "node_modules/@isaacs/cliui": { @@ -3943,9 +4048,9 @@ } }, "node_modules/@jsonjoy.com/json-pack": { - "version": "1.1.0", - "resolved": "https://registry.npmjs.org/@jsonjoy.com/json-pack/-/json-pack-1.1.0.tgz", - "integrity": "sha512-zlQONA+msXPPwHWZMKFVS78ewFczIll5lXiVPwFPCZUsrOKdxc2AvxU1HoNBmMRhqDZUR9HkC3UOm+6pME6Xsg==", + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/@jsonjoy.com/json-pack/-/json-pack-1.1.1.tgz", + "integrity": "sha512-osjeBqMJ2lb/j/M8NCPjs1ylqWIcTRTycIhVB5pt6LgzgeRSb0YRZ7j9RfA8wIUrsr/medIuhVyonXRZWLyfdw==", "dev": true, "license": "Apache-2.0", "dependencies": { @@ -4110,9 +4215,9 @@ } }, "node_modules/@lmdb/lmdb-darwin-arm64": { - "version": "3.1.5", - "resolved": "https://registry.npmjs.org/@lmdb/lmdb-darwin-arm64/-/lmdb-darwin-arm64-3.1.5.tgz", - "integrity": "sha512-ue5PSOzHMCIYrfvPP/MRS6hsKKLzqqhcdAvJCO8uFlDdj598EhgnacuOTuqA6uBK5rgiZXfDWyb7DVZSiBKxBA==", + "version": "3.2.2", + "resolved": "https://registry.npmjs.org/@lmdb/lmdb-darwin-arm64/-/lmdb-darwin-arm64-3.2.2.tgz", + "integrity": "sha512-WBSJT9Z7DTol5viq+DZD2TapeWOw7mlwXxiSBHgAzqVwsaVb0h/ekMD9iu/jDD8MUA20tO9N0WEdnT06fsUp+g==", "cpu": [ "arm64" ], @@ -4124,9 +4229,9 @@ ] }, "node_modules/@lmdb/lmdb-darwin-x64": { - "version": "3.1.5", - "resolved": "https://registry.npmjs.org/@lmdb/lmdb-darwin-x64/-/lmdb-darwin-x64-3.1.5.tgz", - "integrity": "sha512-CGhsb0R5vE6mMNCoSfxHFD8QTvBHM51gs4DBeigTYHWnYv2V5YpJkC4rMo5qAAFifuUcc0+a8a3SIU0c9NrfNw==", + "version": "3.2.2", + "resolved": "https://registry.npmjs.org/@lmdb/lmdb-darwin-x64/-/lmdb-darwin-x64-3.2.2.tgz", + "integrity": "sha512-4S13kUtR7c/j/MzkTIBJCXv52hQ41LG2ukeaqw4Eng9K0pNKLFjo1sDSz96/yKhwykxrWDb13ddJ/ZqD3rAhUA==", "cpu": [ "x64" ], @@ -4138,9 +4243,9 @@ ] }, "node_modules/@lmdb/lmdb-linux-arm": { - "version": "3.1.5", - "resolved": "https://registry.npmjs.org/@lmdb/lmdb-linux-arm/-/lmdb-linux-arm-3.1.5.tgz", - "integrity": "sha512-3WeW328DN+xB5PZdhSWmqE+t3+44xWXEbqQ+caWJEZfOFdLp9yklBZEbVqVdqzznkoaXJYxTCp996KD6HmANeg==", + "version": "3.2.2", + "resolved": "https://registry.npmjs.org/@lmdb/lmdb-linux-arm/-/lmdb-linux-arm-3.2.2.tgz", + "integrity": "sha512-uW31JmfuPAaLUYW7NsEU8gzwgDAzpGPwjvkxnKlcWd8iDutoPKDJi8Wk9lFmPEZRxVSB0j1/wDQ7N2qliR9UFA==", "cpu": [ "arm" ], @@ -4152,9 +4257,9 @@ ] }, "node_modules/@lmdb/lmdb-linux-arm64": { - "version": "3.1.5", - "resolved": "https://registry.npmjs.org/@lmdb/lmdb-linux-arm64/-/lmdb-linux-arm64-3.1.5.tgz", - "integrity": "sha512-LAjaoOcBHGj6fiYB8ureiqPoph4eygbXu4vcOF+hsxiY74n8ilA7rJMmGUT0K0JOB5lmRQHSmor3mytRjS4qeQ==", + "version": "3.2.2", + "resolved": "https://registry.npmjs.org/@lmdb/lmdb-linux-arm64/-/lmdb-linux-arm64-3.2.2.tgz", + "integrity": "sha512-4hdgZtWI1idQlWRp+eleWXD9KLvObgboRaVoBj2POdPEYvsKANllvMW0El8tEQwtw74yB9NT6P8ENBB5UJf5+g==", "cpu": [ "arm64" ], @@ -4166,9 +4271,9 @@ ] }, "node_modules/@lmdb/lmdb-linux-x64": { - "version": "3.1.5", - "resolved": "https://registry.npmjs.org/@lmdb/lmdb-linux-x64/-/lmdb-linux-x64-3.1.5.tgz", - "integrity": "sha512-k/IklElP70qdCXOQixclSl2GPLFiopynGoKX1FqDd1/H0E3Fo1oPwjY2rEVu+0nS3AOw1sryStdXk8CW3cVIsw==", + "version": "3.2.2", + "resolved": "https://registry.npmjs.org/@lmdb/lmdb-linux-x64/-/lmdb-linux-x64-3.2.2.tgz", + "integrity": "sha512-A0zjf4a2vM4B4GAx78ncuOTZ8Ka1DbTaG1Axf1e00Sa7f5coqlWiLg1PX7Gxvyibc2YqtqB+8tg1KKrE8guZVw==", "cpu": [ "x64" ], @@ -4180,9 +4285,9 @@ ] }, "node_modules/@lmdb/lmdb-win32-x64": { - "version": "3.1.5", - "resolved": "https://registry.npmjs.org/@lmdb/lmdb-win32-x64/-/lmdb-win32-x64-3.1.5.tgz", - "integrity": "sha512-KYar6W8nraZfSJspcK7Kp7hdj238X/FNauYbZyrqPBrtsXI1hvI4/KcRcRGP50aQoV7fkKDyJERlrQGMGTZUsA==", + "version": "3.2.2", + "resolved": "https://registry.npmjs.org/@lmdb/lmdb-win32-x64/-/lmdb-win32-x64-3.2.2.tgz", + "integrity": "sha512-Y0qoSCAja+xZE7QQ0LCHoYAuyI1n9ZqukQJa8lv9X3yCvWahFF7OYHAgVH1ejp43XWstj3U89/PAAzcowgF/uQ==", "cpu": [ "x64" ], @@ -4612,9 +4717,9 @@ } }, "node_modules/@ngtools/webpack": { - "version": "19.0.0", - "resolved": "https://registry.npmjs.org/@ngtools/webpack/-/webpack-19.0.0.tgz", - "integrity": "sha512-UuLK1P184R12l6obaVzGk5yzCMQNwfahlkhNapbntvvFw27O76nEYVFM5y8tPkhC3XrsH4v6Ag21q+WADkR9jQ==", + "version": "19.1.7", + "resolved": "https://registry.npmjs.org/@ngtools/webpack/-/webpack-19.1.7.tgz", + "integrity": "sha512-U39LVqHWj+GtKzBA3+AseHZgLPlL5YE/iRkZJ4PHQVrgW9LtyMzPuUmnW+e0XQwPFHq9xQxaoj3w8gApj4/MIg==", "dev": true, "license": "MIT", "engines": { @@ -4624,7 +4729,7 @@ }, "peerDependencies": { "@angular/compiler-cli": "^19.0.0", - "typescript": ">=5.5 <5.7", + "typescript": ">=5.5 <5.8", "webpack": "^5.54.0" } }, @@ -5259,9 +5364,9 @@ } }, "node_modules/@rollup/rollup-android-arm-eabi": { - "version": "4.26.0", - "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.26.0.tgz", - "integrity": "sha512-gJNwtPDGEaOEgejbaseY6xMFu+CPltsc8/T+diUTTbOQLqD+bnrJq9ulH6WD69TqwqWmrfRAtUv30cCFZlbGTQ==", + "version": "4.30.1", + "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.30.1.tgz", + "integrity": "sha512-pSWY+EVt3rJ9fQ3IqlrEUtXh3cGqGtPDH1FQlNZehO2yYxCHEX1SPsz1M//NXwYfbTlcKr9WObLnJX9FsS9K1Q==", "cpu": [ "arm" ], @@ -5273,9 +5378,9 @@ ] }, "node_modules/@rollup/rollup-android-arm64": { - "version": "4.26.0", - "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.26.0.tgz", - "integrity": "sha512-YJa5Gy8mEZgz5JquFruhJODMq3lTHWLm1fOy+HIANquLzfIOzE9RA5ie3JjCdVb9r46qfAQY/l947V0zfGJ0OQ==", + "version": "4.30.1", + "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.30.1.tgz", + "integrity": "sha512-/NA2qXxE3D/BRjOJM8wQblmArQq1YoBVJjrjoTSBS09jgUisq7bqxNHJ8kjCHeV21W/9WDGwJEWSN0KQ2mtD/w==", "cpu": [ "arm64" ], @@ -5287,9 +5392,9 @@ ] }, "node_modules/@rollup/rollup-darwin-arm64": { - "version": "4.26.0", - "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.26.0.tgz", - "integrity": "sha512-ErTASs8YKbqTBoPLp/kA1B1Um5YSom8QAc4rKhg7b9tyyVqDBlQxy7Bf2wW7yIlPGPg2UODDQcbkTlruPzDosw==", + "version": "4.30.1", + "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.30.1.tgz", + "integrity": "sha512-r7FQIXD7gB0WJ5mokTUgUWPl0eYIH0wnxqeSAhuIwvnnpjdVB8cRRClyKLQr7lgzjctkbp5KmswWszlwYln03Q==", "cpu": [ "arm64" ], @@ -5301,9 +5406,9 @@ ] }, "node_modules/@rollup/rollup-darwin-x64": { - "version": "4.26.0", - "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.26.0.tgz", - "integrity": "sha512-wbgkYDHcdWW+NqP2mnf2NOuEbOLzDblalrOWcPyY6+BRbVhliavon15UploG7PpBRQ2bZJnbmh8o3yLoBvDIHA==", + "version": "4.30.1", + "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.30.1.tgz", + "integrity": "sha512-x78BavIwSH6sqfP2xeI1hd1GpHL8J4W2BXcVM/5KYKoAD3nNsfitQhvWSw+TFtQTLZ9OmlF+FEInEHyubut2OA==", "cpu": [ "x64" ], @@ -5315,9 +5420,9 @@ ] }, "node_modules/@rollup/rollup-freebsd-arm64": { - "version": "4.26.0", - "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-arm64/-/rollup-freebsd-arm64-4.26.0.tgz", - "integrity": "sha512-Y9vpjfp9CDkAG4q/uwuhZk96LP11fBz/bYdyg9oaHYhtGZp7NrbkQrj/66DYMMP2Yo/QPAsVHkV891KyO52fhg==", + "version": "4.30.1", + "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-arm64/-/rollup-freebsd-arm64-4.30.1.tgz", + "integrity": "sha512-HYTlUAjbO1z8ywxsDFWADfTRfTIIy/oUlfIDmlHYmjUP2QRDTzBuWXc9O4CXM+bo9qfiCclmHk1x4ogBjOUpUQ==", "cpu": [ "arm64" ], @@ -5329,9 +5434,9 @@ ] }, "node_modules/@rollup/rollup-freebsd-x64": { - "version": "4.26.0", - "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-x64/-/rollup-freebsd-x64-4.26.0.tgz", - "integrity": "sha512-A/jvfCZ55EYPsqeaAt/yDAG4q5tt1ZboWMHEvKAH9Zl92DWvMIbnZe/f/eOXze65aJaaKbL+YeM0Hz4kLQvdwg==", + "version": "4.30.1", + "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-x64/-/rollup-freebsd-x64-4.30.1.tgz", + "integrity": "sha512-1MEdGqogQLccphhX5myCJqeGNYTNcmTyaic9S7CG3JhwuIByJ7J05vGbZxsizQthP1xpVx7kd3o31eOogfEirw==", "cpu": [ "x64" ], @@ -5343,9 +5448,9 @@ ] }, "node_modules/@rollup/rollup-linux-arm-gnueabihf": { - "version": "4.26.0", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.26.0.tgz", - "integrity": "sha512-paHF1bMXKDuizaMODm2bBTjRiHxESWiIyIdMugKeLnjuS1TCS54MF5+Y5Dx8Ui/1RBPVRE09i5OUlaLnv8OGnA==", + "version": "4.30.1", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.30.1.tgz", + "integrity": "sha512-PaMRNBSqCx7K3Wc9QZkFx5+CX27WFpAMxJNiYGAXfmMIKC7jstlr32UhTgK6T07OtqR+wYlWm9IxzennjnvdJg==", "cpu": [ "arm" ], @@ -5357,9 +5462,9 @@ ] }, "node_modules/@rollup/rollup-linux-arm-musleabihf": { - "version": "4.26.0", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.26.0.tgz", - "integrity": "sha512-cwxiHZU1GAs+TMxvgPfUDtVZjdBdTsQwVnNlzRXC5QzIJ6nhfB4I1ahKoe9yPmoaA/Vhf7m9dB1chGPpDRdGXg==", + "version": "4.30.1", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.30.1.tgz", + "integrity": "sha512-B8Rcyj9AV7ZlEFqvB5BubG5iO6ANDsRKlhIxySXcF1axXYUyqwBok+XZPgIYGBgs7LDXfWfifxhw0Ik57T0Yug==", "cpu": [ "arm" ], @@ -5371,9 +5476,9 @@ ] }, "node_modules/@rollup/rollup-linux-arm64-gnu": { - "version": "4.26.0", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.26.0.tgz", - "integrity": "sha512-4daeEUQutGRCW/9zEo8JtdAgtJ1q2g5oHaoQaZbMSKaIWKDQwQ3Yx0/3jJNmpzrsScIPtx/V+1AfibLisb3AMQ==", + "version": "4.30.1", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.30.1.tgz", + "integrity": "sha512-hqVyueGxAj3cBKrAI4aFHLV+h0Lv5VgWZs9CUGqr1z0fZtlADVV1YPOij6AhcK5An33EXaxnDLmJdQikcn5NEw==", "cpu": [ "arm64" ], @@ -5385,9 +5490,9 @@ ] }, "node_modules/@rollup/rollup-linux-arm64-musl": { - "version": "4.26.0", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.26.0.tgz", - "integrity": "sha512-eGkX7zzkNxvvS05ROzJ/cO/AKqNvR/7t1jA3VZDi2vRniLKwAWxUr85fH3NsvtxU5vnUUKFHKh8flIBdlo2b3Q==", + "version": "4.30.1", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.30.1.tgz", + "integrity": "sha512-i4Ab2vnvS1AE1PyOIGp2kXni69gU2DAUVt6FSXeIqUCPIR3ZlheMW3oP2JkukDfu3PsexYRbOiJrY+yVNSk9oA==", "cpu": [ "arm64" ], @@ -5398,10 +5503,24 @@ "linux" ] }, + "node_modules/@rollup/rollup-linux-loongarch64-gnu": { + "version": "4.30.1", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-loongarch64-gnu/-/rollup-linux-loongarch64-gnu-4.30.1.tgz", + "integrity": "sha512-fARcF5g296snX0oLGkVxPmysetwUk2zmHcca+e9ObOovBR++9ZPOhqFUM61UUZ2EYpXVPN1redgqVoBB34nTpQ==", + "cpu": [ + "loong64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ] + }, "node_modules/@rollup/rollup-linux-powerpc64le-gnu": { - "version": "4.26.0", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-powerpc64le-gnu/-/rollup-linux-powerpc64le-gnu-4.26.0.tgz", - "integrity": "sha512-Odp/lgHbW/mAqw/pU21goo5ruWsytP7/HCC/liOt0zcGG0llYWKrd10k9Fj0pdj3prQ63N5yQLCLiE7HTX+MYw==", + "version": "4.30.1", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-powerpc64le-gnu/-/rollup-linux-powerpc64le-gnu-4.30.1.tgz", + "integrity": "sha512-GLrZraoO3wVT4uFXh67ElpwQY0DIygxdv0BNW9Hkm3X34wu+BkqrDrkcsIapAY+N2ATEbvak0XQ9gxZtCIA5Rw==", "cpu": [ "ppc64" ], @@ -5413,9 +5532,9 @@ ] }, "node_modules/@rollup/rollup-linux-riscv64-gnu": { - "version": "4.26.0", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.26.0.tgz", - "integrity": "sha512-MBR2ZhCTzUgVD0OJdTzNeF4+zsVogIR1U/FsyuFerwcqjZGvg2nYe24SAHp8O5sN8ZkRVbHwlYeHqcSQ8tcYew==", + "version": "4.30.1", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.30.1.tgz", + "integrity": "sha512-0WKLaAUUHKBtll0wvOmh6yh3S0wSU9+yas923JIChfxOaaBarmb/lBKPF0w/+jTVozFnOXJeRGZ8NvOxvk/jcw==", "cpu": [ "riscv64" ], @@ -5427,9 +5546,9 @@ ] }, "node_modules/@rollup/rollup-linux-s390x-gnu": { - "version": "4.26.0", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.26.0.tgz", - "integrity": "sha512-YYcg8MkbN17fMbRMZuxwmxWqsmQufh3ZJFxFGoHjrE7bv0X+T6l3glcdzd7IKLiwhT+PZOJCblpnNlz1/C3kGQ==", + "version": "4.30.1", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.30.1.tgz", + "integrity": "sha512-GWFs97Ruxo5Bt+cvVTQkOJ6TIx0xJDD/bMAOXWJg8TCSTEK8RnFeOeiFTxKniTc4vMIaWvCplMAFBt9miGxgkA==", "cpu": [ "s390x" ], @@ -5441,9 +5560,9 @@ ] }, "node_modules/@rollup/rollup-linux-x64-gnu": { - "version": "4.26.0", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.26.0.tgz", - "integrity": "sha512-ZuwpfjCwjPkAOxpjAEjabg6LRSfL7cAJb6gSQGZYjGhadlzKKywDkCUnJ+KEfrNY1jH5EEoSIKLCb572jSiglA==", + "version": "4.30.1", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.30.1.tgz", + "integrity": "sha512-UtgGb7QGgXDIO+tqqJ5oZRGHsDLO8SlpE4MhqpY9Llpzi5rJMvrK6ZGhsRCST2abZdBqIBeXW6WPD5fGK5SDwg==", "cpu": [ "x64" ], @@ -5455,9 +5574,9 @@ ] }, "node_modules/@rollup/rollup-linux-x64-musl": { - "version": "4.26.0", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.26.0.tgz", - "integrity": "sha512-+HJD2lFS86qkeF8kNu0kALtifMpPCZU80HvwztIKnYwym3KnA1os6nsX4BGSTLtS2QVAGG1P3guRgsYyMA0Yhg==", + "version": "4.30.1", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.30.1.tgz", + "integrity": "sha512-V9U8Ey2UqmQsBT+xTOeMzPzwDzyXmnAoO4edZhL7INkwQcaW1Ckv3WJX3qrrp/VHaDkEWIBWhRwP47r8cdrOow==", "cpu": [ "x64" ], @@ -5469,9 +5588,9 @@ ] }, "node_modules/@rollup/rollup-win32-arm64-msvc": { - "version": "4.26.0", - "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.26.0.tgz", - "integrity": "sha512-WUQzVFWPSw2uJzX4j6YEbMAiLbs0BUysgysh8s817doAYhR5ybqTI1wtKARQKo6cGop3pHnrUJPFCsXdoFaimQ==", + "version": "4.30.1", + "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.30.1.tgz", + "integrity": "sha512-WabtHWiPaFF47W3PkHnjbmWawnX/aE57K47ZDT1BXTS5GgrBUEpvOzq0FI0V/UYzQJgdb8XlhVNH8/fwV8xDjw==", "cpu": [ "arm64" ], @@ -5483,9 +5602,9 @@ ] }, "node_modules/@rollup/rollup-win32-ia32-msvc": { - "version": "4.26.0", - "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.26.0.tgz", - "integrity": "sha512-D4CxkazFKBfN1akAIY6ieyOqzoOoBV1OICxgUblWxff/pSjCA2khXlASUx7mK6W1oP4McqhgcCsu6QaLj3WMWg==", + "version": "4.30.1", + "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.30.1.tgz", + "integrity": "sha512-pxHAU+Zv39hLUTdQQHUVHf4P+0C47y/ZloorHpzs2SXMRqeAWmGghzAhfOlzFHHwjvgokdFAhC4V+6kC1lRRfw==", "cpu": [ "ia32" ], @@ -5497,9 +5616,9 @@ ] }, "node_modules/@rollup/rollup-win32-x64-msvc": { - "version": "4.26.0", - "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.26.0.tgz", - "integrity": "sha512-2x8MO1rm4PGEP0xWbubJW5RtbNLk3puzAMaLQd3B3JHVw4KcHlmXcO+Wewx9zCoo7EUFiMlu/aZbCJ7VjMzAag==", + "version": "4.30.1", + "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.30.1.tgz", + "integrity": "sha512-D6qjsXGcvhTjv0kI4fU8tUuBDF/Ueee4SVX79VfNDXZa64TfCW1Slkb6Z7O1p7vflqZjcmOVdZlqf8gvJxc6og==", "cpu": [ "x64" ], @@ -5995,9 +6114,9 @@ } }, "node_modules/@types/express-serve-static-core": { - "version": "5.0.1", - "resolved": "https://registry.npmjs.org/@types/express-serve-static-core/-/express-serve-static-core-5.0.1.tgz", - "integrity": "sha512-CRICJIl0N5cXDONAdlTv5ShATZ4HEwk6kDDIW2/w9qOWKg+NU/5F8wYRWCrONad0/UKkloNSmmyN/wX4rtpbVA==", + "version": "5.0.6", + "resolved": "https://registry.npmjs.org/@types/express-serve-static-core/-/express-serve-static-core-5.0.6.tgz", + "integrity": "sha512-3xhRnjJPkULekpSzgtoNYYcTWgEZkp4myc+Saevii5JPnHNvHMRlBSHDbs7Bh1iPPoVTERHEZXyhyLbMEsExsA==", "dev": true, "license": "MIT", "dependencies": { @@ -6050,9 +6169,9 @@ } }, "node_modules/@types/jasmine": { - "version": "5.1.4", - "resolved": "https://registry.npmjs.org/@types/jasmine/-/jasmine-5.1.4.tgz", - "integrity": "sha512-px7OMFO/ncXxixDe1zR13V1iycqWae0MxTaw62RpFlksUi5QuNWgQJFkTQjIOvrmutJbI7Fp2Y2N1F6D2R4G6w==", + "version": "5.1.6", + "resolved": "https://registry.npmjs.org/@types/jasmine/-/jasmine-5.1.6.tgz", + "integrity": "sha512-JDwKwipGFDwf021BtRTuluYe1aMDNimtO72ygPrVXnZSC8Df2V22AHeIgGa84tbF4SLkRvN+dJnlV8aMwQjkVw==", "dev": true, "license": "MIT" }, @@ -6092,18 +6211,19 @@ "resolved": "https://registry.npmjs.org/@types/mute-stream/-/mute-stream-0.0.4.tgz", "integrity": "sha512-CPM9nzrCPPJHQNA9keH9CVkVI+WR5kMa+7XEs5jcGQ0VoAGnLv242w8lIVgwAEfmE4oufJRaTc9PNLQl0ioAow==", "dev": true, + "license": "MIT", "dependencies": { "@types/node": "*" } }, "node_modules/@types/node": { - "version": "18.19.64", - "resolved": "https://registry.npmjs.org/@types/node/-/node-18.19.64.tgz", - "integrity": "sha512-955mDqvO2vFf/oL7V3WiUtiz+BugyX8uVbaT2H8oj3+8dRyH2FLiNdowe7eNqRM7IOIZvzDH76EoAT+gwm6aIQ==", + "version": "22.13.4", + "resolved": "https://registry.npmjs.org/@types/node/-/node-22.13.4.tgz", + "integrity": "sha512-ywP2X0DYtX3y08eFVx5fNIw7/uIv8hYUKgXoK8oayJlLnKcRfEYCxWMVE1XagUdVtCJlZT1AU4LXEABW+L1Peg==", "dev": true, "license": "MIT", "dependencies": { - "undici-types": "~5.26.4" + "undici-types": "~6.20.0" } }, "node_modules/@types/node-forge": { @@ -6117,9 +6237,9 @@ } }, "node_modules/@types/qs": { - "version": "6.9.17", - "resolved": "https://registry.npmjs.org/@types/qs/-/qs-6.9.17.tgz", - "integrity": "sha512-rX4/bPcfmvxHDv0XjfJELTTr+iB+tn032nPILqHm5wbthUUUuVtNGGqzhya9XUxjTP8Fpr0qYgSZZKxGY++svQ==", + "version": "6.9.18", + "resolved": "https://registry.npmjs.org/@types/qs/-/qs-6.9.18.tgz", + "integrity": "sha512-kK7dgTYDyGqS+e2Q4aK9X3D7q234CIZ1Bv0q/7Z5IwRDoADNU81xXJK/YVyLbLTZCoIwUoDoffFeF+p/eIklAA==", "dev": true, "license": "MIT" }, @@ -6190,12 +6310,13 @@ "version": "3.0.0", "resolved": "https://registry.npmjs.org/@types/wrap-ansi/-/wrap-ansi-3.0.0.tgz", "integrity": "sha512-ltIpx+kM7g/MLRZfkbL7EsCEjfzCcScLpkg37eXEtx5kmrAKBkTJwd1GIAjDSL8wTpM6Hzn5YO4pSb91BEwu1g==", - "dev": true + "dev": true, + "license": "MIT" }, "node_modules/@types/ws": { - "version": "8.5.13", - "resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.5.13.tgz", - "integrity": "sha512-osM/gWBTPKgHV8XkTunnegTRIsvF6owmf5w+JtAfOw472dptdm0dlGv4xCt6GwQRcC2XVOvvRE/0bAoQcL2QkA==", + "version": "8.5.14", + "resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.5.14.tgz", + "integrity": "sha512-bd/YFLW+URhBzMXurx7lWByOu+xzU9+kb3RboOteXYDfW+tr+JZa99OyNmPINEGB/ahzKrEuc8rcv4gnpJmxTw==", "dev": true, "license": "MIT", "dependencies": { @@ -6403,16 +6524,16 @@ "license": "ISC" }, "node_modules/@vitejs/plugin-basic-ssl": { - "version": "1.1.0", - "resolved": "https://registry.npmjs.org/@vitejs/plugin-basic-ssl/-/plugin-basic-ssl-1.1.0.tgz", - "integrity": "sha512-wO4Dk/rm8u7RNhOf95ZzcEmC9rYOncYgvq4z3duaJrCgjN8BxAnDVyndanfcJZ0O6XZzHz6Q0hTimxTg8Y9g/A==", + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/@vitejs/plugin-basic-ssl/-/plugin-basic-ssl-1.2.0.tgz", + "integrity": "sha512-mkQnxTkcldAzIsomk1UuLfAu9n+kpQ3JbHcpCp7d2Oo6ITtji8pHS3QToOWjhPFvNQSnhlkAjmGbhv2QvwO/7Q==", "dev": true, "license": "MIT", "engines": { - "node": ">=14.6.0" + "node": ">=14.21.3" }, "peerDependencies": { - "vite": "^3.0.0 || ^4.0.0 || ^5.0.0" + "vite": "^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0" } }, "node_modules/@webassemblyjs/ast": { @@ -6709,14 +6830,11 @@ } }, "node_modules/agent-base": { - "version": "7.1.1", - "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-7.1.1.tgz", - "integrity": "sha512-H0TSyFNDMomMNJQBn8wFV5YC/2eJ+VXECwOadZJT554xP6cODZHPX3H9QMQECxvrgiSOP1pHjy1sMWQVYJOUOA==", + "version": "7.1.3", + "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-7.1.3.tgz", + "integrity": "sha512-jRR5wdylq8CkOe6hei19GGZnxM6rBGwFl3Bg0YItGDimvjGtAvdZk4Pu6Cl4u4Igsws4a1fd1Vq3ezrhn4KmFw==", "dev": true, "license": "MIT", - "dependencies": { - "debug": "^4.3.4" - }, "engines": { "node": ">= 14" } @@ -6862,6 +6980,7 @@ "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz", "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==", "dev": true, + "license": "MIT", "dependencies": { "color-convert": "^1.9.0" }, @@ -7639,9 +7758,9 @@ "license": "MIT" }, "node_modules/beasties": { - "version": "0.1.0", - "resolved": "https://registry.npmjs.org/beasties/-/beasties-0.1.0.tgz", - "integrity": "sha512-+Ssscd2gVG24qRNC+E2g88D+xsQW4xwakWtKAiGEQ3Pw54/FGdyo9RrfxhGhEv6ilFVbB7r3Lgx+QnAxnSpECw==", + "version": "0.2.0", + "resolved": "https://registry.npmjs.org/beasties/-/beasties-0.2.0.tgz", + "integrity": "sha512-Ljqskqx/tbZagIglYoJIMzH5zgssyp+in9+9sAyh15N22AornBeIDnb8EZ6Rk+6ShfMxd92uO3gfpT0NtZbpow==", "dev": true, "license": "Apache-2.0", "dependencies": { @@ -7649,10 +7768,13 @@ "css-what": "^6.1.0", "dom-serializer": "^2.0.0", "domhandler": "^5.0.3", - "htmlparser2": "^9.0.0", + "htmlparser2": "^9.1.0", "picocolors": "^1.1.1", - "postcss": "^8.4.47", + "postcss": "^8.4.49", "postcss-media-query-parser": "^0.2.3" + }, + "engines": { + "node": ">=14.0.0" } }, "node_modules/big.js": { @@ -8139,6 +8261,7 @@ "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz", "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==", "dev": true, + "license": "MIT", "dependencies": { "ansi-styles": "^3.2.1", "escape-string-regexp": "^1.0.5", @@ -8512,6 +8635,7 @@ "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz", "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==", "dev": true, + "license": "MIT", "dependencies": { "color-name": "1.1.3" } @@ -8520,7 +8644,8 @@ "version": "1.1.3", "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz", "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==", - "dev": true + "dev": true, + "license": "MIT" }, "node_modules/color-support": { "version": "1.1.3", @@ -8587,9 +8712,9 @@ } }, "node_modules/compression": { - "version": "1.7.5", - "resolved": "https://registry.npmjs.org/compression/-/compression-1.7.5.tgz", - "integrity": "sha512-bQJ0YRck5ak3LgtnpKkiabX5pNF7tMUh1BSy2ZBOTh0Dim0BUu6aPPwByIns6/A5Prh8PufSPerMDUklpzes2Q==", + "version": "1.8.0", + "resolved": "https://registry.npmjs.org/compression/-/compression-1.8.0.tgz", + "integrity": "sha512-k6WLKfunuqCYD3t6AsuPGvQWaKwuLLh2/xHNcX4qE+vIfDNXpSqnrhwA7O53R7WVQUnt8dVAIW+YHr7xTgOgGA==", "dev": true, "license": "MIT", "dependencies": { @@ -9483,9 +9608,9 @@ } }, "node_modules/domutils": { - "version": "3.1.0", - "resolved": "https://registry.npmjs.org/domutils/-/domutils-3.1.0.tgz", - "integrity": "sha512-H78uMmQtI2AhgDJjWeQmHwJJ2bLPD3GMmO7Zja/ZZh84wkm+4ut+IUnUdRa8uCGX88DiVx1j6FRe1XfxEgjEZA==", + "version": "3.2.2", + "resolved": "https://registry.npmjs.org/domutils/-/domutils-3.2.2.tgz", + "integrity": "sha512-6kZKyUajlDuqlHKVX1w7gyslj9MPIXzIFiz/rGu35uC1wMi+kMhQwGhl4lt9unC9Vb9INnY9Z3/ZA3+FhASLaw==", "dev": true, "license": "BSD-2-Clause", "dependencies": { @@ -9973,9 +10098,9 @@ } }, "node_modules/esbuild": { - "version": "0.24.0", - "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.24.0.tgz", - "integrity": "sha512-FuLPevChGDshgSicjisSooU0cemp/sGXR841D5LHMB7mTVOmsEHcAxaH3irL53+8YDIeVNQEySh4DaYU/iuPqQ==", + "version": "0.24.2", + "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.24.2.tgz", + "integrity": "sha512-+9egpBW8I3CD5XPe0n6BfT5fxLzxrlDzqydF3aviG+9ni1lDC/OvMHcxqEFV0+LANZG5R1bFMWfUrjVsdwxJvA==", "dev": true, "hasInstallScript": true, "license": "MIT", @@ -9986,36 +10111,37 @@ "node": ">=18" }, "optionalDependencies": { - "@esbuild/aix-ppc64": "0.24.0", - "@esbuild/android-arm": "0.24.0", - "@esbuild/android-arm64": "0.24.0", - "@esbuild/android-x64": "0.24.0", - "@esbuild/darwin-arm64": "0.24.0", - "@esbuild/darwin-x64": "0.24.0", - "@esbuild/freebsd-arm64": "0.24.0", - "@esbuild/freebsd-x64": "0.24.0", - "@esbuild/linux-arm": "0.24.0", - "@esbuild/linux-arm64": "0.24.0", - "@esbuild/linux-ia32": "0.24.0", - "@esbuild/linux-loong64": "0.24.0", - "@esbuild/linux-mips64el": "0.24.0", - "@esbuild/linux-ppc64": "0.24.0", - "@esbuild/linux-riscv64": "0.24.0", - "@esbuild/linux-s390x": "0.24.0", - "@esbuild/linux-x64": "0.24.0", - "@esbuild/netbsd-x64": "0.24.0", - "@esbuild/openbsd-arm64": "0.24.0", - "@esbuild/openbsd-x64": "0.24.0", - "@esbuild/sunos-x64": "0.24.0", - "@esbuild/win32-arm64": "0.24.0", - "@esbuild/win32-ia32": "0.24.0", - "@esbuild/win32-x64": "0.24.0" + "@esbuild/aix-ppc64": "0.24.2", + "@esbuild/android-arm": "0.24.2", + "@esbuild/android-arm64": "0.24.2", + "@esbuild/android-x64": "0.24.2", + "@esbuild/darwin-arm64": "0.24.2", + "@esbuild/darwin-x64": "0.24.2", + "@esbuild/freebsd-arm64": "0.24.2", + "@esbuild/freebsd-x64": "0.24.2", + "@esbuild/linux-arm": "0.24.2", + "@esbuild/linux-arm64": "0.24.2", + "@esbuild/linux-ia32": "0.24.2", + "@esbuild/linux-loong64": "0.24.2", + "@esbuild/linux-mips64el": "0.24.2", + "@esbuild/linux-ppc64": "0.24.2", + "@esbuild/linux-riscv64": "0.24.2", + "@esbuild/linux-s390x": "0.24.2", + "@esbuild/linux-x64": "0.24.2", + "@esbuild/netbsd-arm64": "0.24.2", + "@esbuild/netbsd-x64": "0.24.2", + "@esbuild/openbsd-arm64": "0.24.2", + "@esbuild/openbsd-x64": "0.24.2", + "@esbuild/sunos-x64": "0.24.2", + "@esbuild/win32-arm64": "0.24.2", + "@esbuild/win32-ia32": "0.24.2", + "@esbuild/win32-x64": "0.24.2" } }, "node_modules/esbuild-wasm": { - "version": "0.24.0", - "resolved": "https://registry.npmjs.org/esbuild-wasm/-/esbuild-wasm-0.24.0.tgz", - "integrity": "sha512-xhNn5tL1AhkPg4ft59yXT6FkwKXiPSYyz1IeinJHUJpjvOHOIPvdmFQc0pGdjxlKSbzZc2mNmtVOWAR1EF/JAg==", + "version": "0.24.2", + "resolved": "https://registry.npmjs.org/esbuild-wasm/-/esbuild-wasm-0.24.2.tgz", + "integrity": "sha512-03/7Z1gD+ohDnScFztvI4XddTAbKVmMEzCvvkBpQdWKEXJ+73dTyeNrmdxP1Q0zpDMFjzUJwtK4rLjqwiHbzkw==", "dev": true, "license": "MIT", "bin": { @@ -10046,6 +10172,7 @@ "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz", "integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==", "dev": true, + "license": "MIT", "engines": { "node": ">=0.8.0" } @@ -10756,9 +10883,9 @@ "license": "Apache-2.0" }, "node_modules/express": { - "version": "4.21.1", - "resolved": "https://registry.npmjs.org/express/-/express-4.21.1.tgz", - "integrity": "sha512-YSFlK1Ee0/GC8QaO91tHcDxJiE/X4FbpAyQWkxAvG6AXCuR65YzK8ua6D9hvi/TzUfZMpc+BwuM1IPw8fmQBiQ==", + "version": "4.21.2", + "resolved": "https://registry.npmjs.org/express/-/express-4.21.2.tgz", + "integrity": "sha512-28HqgMZAmih1Czt9ny7qr6ek2qddF4FclbMzwhCREB6OFfH+rXAnuNCwo1/wFvrtbgsQDb4kSbX9de9lFbrXnA==", "dev": true, "license": "MIT", "dependencies": { @@ -10781,7 +10908,7 @@ "methods": "~1.1.2", "on-finished": "2.4.1", "parseurl": "~1.3.3", - "path-to-regexp": "0.1.10", + "path-to-regexp": "0.1.12", "proxy-addr": "~2.0.7", "qs": "6.13.0", "range-parser": "~1.2.1", @@ -10796,6 +10923,10 @@ }, "engines": { "node": ">= 0.10.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/express" } }, "node_modules/express/node_modules/cookie": { @@ -11011,16 +11142,16 @@ "license": "MIT" }, "node_modules/fast-glob": { - "version": "3.3.2", - "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.2.tgz", - "integrity": "sha512-oX2ruAFQwf/Orj8m737Y5adxDQO0LAB7/S5MnxCdTNDd4p6BsyIVsv9JQsATbTSq8KHRpLwIHbVlUNatxd+1Ow==", + "version": "3.3.3", + "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.3.tgz", + "integrity": "sha512-7MptL8U0cqcFdzIzwOTHoilX9x5BrNqye7Z/LuC7kCMRio1EMSyqRK3BEAUD7sXRq4iT4AzTVuZdhgQ2TCvYLg==", "license": "MIT", "dependencies": { "@nodelib/fs.stat": "^2.0.2", "@nodelib/fs.walk": "^1.2.3", "glob-parent": "^5.1.2", "merge2": "^1.3.0", - "micromatch": "^4.0.4" + "micromatch": "^4.0.8" }, "engines": { "node": ">=8.6.0" @@ -12561,6 +12692,7 @@ "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz", "integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==", "dev": true, + "license": "MIT", "engines": { "node": ">=4" } @@ -12747,23 +12879,6 @@ "wbuf": "^1.1.0" } }, - "node_modules/html-entities": { - "version": "2.5.2", - "resolved": "https://registry.npmjs.org/html-entities/-/html-entities-2.5.2.tgz", - "integrity": "sha512-K//PSRMQk4FZ78Kyau+mZurHn3FH0Vwr+H36eE0rPbeYkRRi9YxceYPhuN60UwWorxyKHhqoAJl2OFKa4BVtaA==", - "dev": true, - "funding": [ - { - "type": "github", - "url": "https://github.com/sponsors/mdevils" - }, - { - "type": "patreon", - "url": "https://patreon.com/mdevils" - } - ], - "license": "MIT" - }, "node_modules/html-escaper": { "version": "2.0.2", "resolved": "https://registry.npmjs.org/html-escaper/-/html-escaper-2.0.2.tgz", @@ -12833,9 +12948,9 @@ } }, "node_modules/http-parser-js": { - "version": "0.5.8", - "resolved": "https://registry.npmjs.org/http-parser-js/-/http-parser-js-0.5.8.tgz", - "integrity": "sha512-SGeBX54F94Wgu5RH3X5jsDtf4eHyRogWX1XGT3b4HuW3tQPM4AaBzoUji/4AAJNXCEOWZ5O0DgZmJw1947gD5Q==", + "version": "0.5.9", + "resolved": "https://registry.npmjs.org/http-parser-js/-/http-parser-js-0.5.9.tgz", + "integrity": "sha512-n1XsPy3rXVxlqxVioEWdC+0+M+SQw0DpJynwtOPo1X+ZlvdzTLtDBIJJlDQTnwZIFJrZSzSGmIOUdP8tu+SgLw==", "dev": true, "license": "MIT" }, @@ -12887,13 +13002,13 @@ } }, "node_modules/https-proxy-agent": { - "version": "7.0.5", - "resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-7.0.5.tgz", - "integrity": "sha512-1e4Wqeblerz+tMKPIq2EMGiiWW1dIjZOksyHWSUm1rmuvw/how9hBHZ38lAGj5ID4Ik6EdkOw7NmWPy6LAwalw==", + "version": "7.0.6", + "resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-7.0.6.tgz", + "integrity": "sha512-vK9P5/iUfdl95AI+JVyUuIcVtd4ofvtrOr3HNtM2yxC9bnMbEdp3x01OhQNnjb8IJYi38VlTE3mBXwcfvywuSw==", "dev": true, "license": "MIT", "dependencies": { - "agent-base": "^7.0.2", + "agent-base": "^7.1.2", "debug": "4" }, "engines": { @@ -12958,14 +13073,14 @@ "license": "BSD-3-Clause" }, "node_modules/igniteui-angular": { - "version": "19.0.6", - "resolved": "https://registry.npmjs.org/igniteui-angular/-/igniteui-angular-19.0.6.tgz", - "integrity": "sha512-g8Sh8iN6gWl/cnIqJRVYLK1S6bR3v4GKb7GB5i4o0tMjsGxRzprzhAEN3eGPi3GaK9Gu1Z0pJzIRvoV3ILgT0w==", + "version": "19.1.0", + "resolved": "https://registry.npmjs.org/igniteui-angular/-/igniteui-angular-19.1.0.tgz", + "integrity": "sha512-9aZwU5Lxfokp4YEAaVdCHRi6e15VORrggbHkzVdaETEw7UZfW+2wIPu1r3wF+0/BU3Ack365kAE0DwJrUV5AdQ==", "license": "SEE LICENSE IN LICENSE", "dependencies": { "@igniteui/material-icons-extended": "^3.1.0", "fflate": "^0.8.1", - "igniteui-theming": "^14.3.0", + "igniteui-theming": "^15.0.0", "igniteui-trial-watermark": "^3.0.2", "lodash-es": "^4.17.21", "tslib": "^2.3.0" @@ -13033,15 +13148,15 @@ } }, "node_modules/igniteui-angular-i18n": { - "version": "19.0.6", - "resolved": "https://registry.npmjs.org/igniteui-angular-i18n/-/igniteui-angular-i18n-19.0.6.tgz", - "integrity": "sha512-yP64E/tKXfjU79ltvg2p7jJQ8m36HmjoEPIvupeghwuUnlIQNnDHPiOXzExv+WMCf+TrgqEcpBVcFGoibwLrKA==", + "version": "19.1.0", + "resolved": "https://registry.npmjs.org/igniteui-angular-i18n/-/igniteui-angular-i18n-19.1.0.tgz", + "integrity": "sha512-n3BeMot35ULTgc5H1e8Hbl8C3sONZ7bzAaKdE1o12uo61pLLtArWheftvBzIp2AMZNLDADW38DPoZui5rrSnEQ==", "license": "MIT" }, "node_modules/igniteui-dockmanager": { - "version": "1.15.2", - "resolved": "https://registry.npmjs.org/igniteui-dockmanager/-/igniteui-dockmanager-1.15.2.tgz", - "integrity": "sha512-FtcWCbHhWfTuVZ1ltaiZstu88/O6NYny6BzkgVNELoLa/oqHCktjL6JoMTOC4a/QwDpoP3AMi+UmbvkQrE0fRQ==", + "version": "1.16.0", + "resolved": "https://registry.npmjs.org/igniteui-dockmanager/-/igniteui-dockmanager-1.16.0.tgz", + "integrity": "sha512-MJj9UvqVUu6wx5mSr4xUnfFbZU9z0isUjIx5MJJt6XEQY+d7KYHyGCq4X7ahUBWAWd8KM3++KnDEA7/qJ4qNIg==", "license": "SEE LICENSE IN LICENSE", "dependencies": { "igniteui-trial-watermark": "^1.0.3" @@ -13060,9 +13175,10 @@ "license": "MIT" }, "node_modules/igniteui-theming": { - "version": "14.3.0", - "resolved": "https://registry.npmjs.org/igniteui-theming/-/igniteui-theming-14.3.0.tgz", - "integrity": "sha512-NF43En3g7Qrr2lDOd+nKRYk7T54RJ9OrdjtQplNVGnoxkKnQYeQ2iHEhd0lmmTMRUnNiJUUQwYqM4VUVQyo5dw==", + "version": "15.0.0", + "resolved": "https://registry.npmjs.org/igniteui-theming/-/igniteui-theming-15.0.0.tgz", + "integrity": "sha512-4ANFe6t3t9fEDexmB8/H7hEO1eBBWohu1tbEUFdfQPBMgUT/qqXbSlxW3FGCmZV7Oxr5rn9ZdXyScPxzwRx1lg==", + "license": "MIT", "peerDependencies": { "sass": "^1.69.5" } @@ -13077,9 +13193,9 @@ } }, "node_modules/igniteui-webcomponents": { - "version": "5.1.2", - "resolved": "https://registry.npmjs.org/igniteui-webcomponents/-/igniteui-webcomponents-5.1.2.tgz", - "integrity": "sha512-OnNLMm4VMpBLyGF8P6zDaHEqaw3M+Rfy+/FHAkpzZAs5TD31uwFZrd4mvKV5Isqp1VuSma8Gzr0RnSti29QbCw==", + "version": "5.2.3", + "resolved": "https://registry.npmjs.org/igniteui-webcomponents/-/igniteui-webcomponents-5.2.3.tgz", + "integrity": "sha512-D+oDEdci81dxzzLXbTEYj98SkUyMKrMpewEXPS31eqGqhQsj7AED19e3ywL+8VbPmUlPhRmm2H9MR2LNArMSuA==", "license": "SEE LICENSE IN LICENSE", "dependencies": { "@floating-ui/dom": "^1.6.0", @@ -13414,9 +13530,9 @@ } }, "node_modules/is-core-module": { - "version": "2.15.1", - "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.15.1.tgz", - "integrity": "sha512-z0vtXSwucUJtANQWldhbtbt7BnL0vxiFjIdDLAatwhDYty2bad6s+rijD6Ri4YuYJubLzIJLUidCh09e1djEVQ==", + "version": "2.16.1", + "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.16.1.tgz", + "integrity": "sha512-UfoeMA6fIJ8wTYFEUjelnaGI67v6+N7qXJEvQuIGa99l4xsCruSYOVSQ0uPANn4dAzm8lkYPaKLrrijLq7x23w==", "dev": true, "license": "MIT", "dependencies": { @@ -14550,9 +14666,9 @@ } }, "node_modules/launch-editor": { - "version": "2.9.1", - "resolved": "https://registry.npmjs.org/launch-editor/-/launch-editor-2.9.1.tgz", - "integrity": "sha512-Gcnl4Bd+hRO9P9icCP/RVVT2o8SFlPXofuCxvA2SaZuH45whSvf5p8x5oih5ftLiVhEI4sp5xDY+R+b3zJBh5w==", + "version": "2.10.0", + "resolved": "https://registry.npmjs.org/launch-editor/-/launch-editor-2.10.0.tgz", + "integrity": "sha512-D7dBRJo/qcGX9xlvt/6wUYzQxjh5G1RvZPgPv8vi4KRU99DVQL/oW7tnVOCCTm2HGeo3C5HvGE5Yrh6UBoZ0vA==", "dev": true, "license": "MIT", "dependencies": { @@ -14600,9 +14716,9 @@ } }, "node_modules/less": { - "version": "4.2.0", - "resolved": "https://registry.npmjs.org/less/-/less-4.2.0.tgz", - "integrity": "sha512-P3b3HJDBtSzsXUl0im2L7gTO5Ubg8mEN6G8qoTS77iXxXX4Hvu4Qj540PZDvQ8V6DmX6iXo98k7Md0Cm1PrLaA==", + "version": "4.2.1", + "resolved": "https://registry.npmjs.org/less/-/less-4.2.1.tgz", + "integrity": "sha512-CasaJidTIhWmjcqv0Uj5vccMI7pJgfD9lMkKtlnTHAdJdYK/7l8pM9tumLyJ0zhbD4KJLo/YvTj+xznQd5NBhg==", "dev": true, "license": "Apache-2.0", "dependencies": { @@ -14867,9 +14983,9 @@ } }, "node_modules/lmdb": { - "version": "3.1.5", - "resolved": "https://registry.npmjs.org/lmdb/-/lmdb-3.1.5.tgz", - "integrity": "sha512-46Mch5Drq+A93Ss3gtbg+Xuvf5BOgIuvhKDWoGa3HcPHI6BL2NCOkRdSx1D4VfzwrxhnsjbyIVsLRlQHu6URvw==", + "version": "3.2.2", + "resolved": "https://registry.npmjs.org/lmdb/-/lmdb-3.2.2.tgz", + "integrity": "sha512-LriG93la4PbmPMwI7Hbv8W+0ncLK7549w4sbZSi4QGDjnnxnmNMgxUkaQTEMzH8TpwsfFvgEjpLX7V8B/I9e3g==", "dev": true, "hasInstallScript": true, "license": "MIT", @@ -14885,12 +15001,12 @@ "download-lmdb-prebuilds": "bin/download-prebuilds.js" }, "optionalDependencies": { - "@lmdb/lmdb-darwin-arm64": "3.1.5", - "@lmdb/lmdb-darwin-x64": "3.1.5", - "@lmdb/lmdb-linux-arm": "3.1.5", - "@lmdb/lmdb-linux-arm64": "3.1.5", - "@lmdb/lmdb-linux-x64": "3.1.5", - "@lmdb/lmdb-win32-x64": "3.1.5" + "@lmdb/lmdb-darwin-arm64": "3.2.2", + "@lmdb/lmdb-darwin-x64": "3.2.2", + "@lmdb/lmdb-linux-arm": "3.2.2", + "@lmdb/lmdb-linux-arm64": "3.2.2", + "@lmdb/lmdb-linux-x64": "3.2.2", + "@lmdb/lmdb-win32-x64": "3.2.2" } }, "node_modules/load-json-file": { @@ -15711,9 +15827,9 @@ } }, "node_modules/memfs": { - "version": "4.14.0", - "resolved": "https://registry.npmjs.org/memfs/-/memfs-4.14.0.tgz", - "integrity": "sha512-JUeY0F/fQZgIod31Ja1eJgiSxLn7BfQlCnqhwXFBzFHEw63OdLK7VJUJ7bnzNsWgCyoUP5tEp1VRY8rDaYzqOA==", + "version": "4.17.0", + "resolved": "https://registry.npmjs.org/memfs/-/memfs-4.17.0.tgz", + "integrity": "sha512-4eirfZ7thblFmqFjywlTmuWVSvccHAJbn1r8qQLzmTO11qcqpohOjmY2mFce6x7x7WtskzRqApPD0hv+Oa74jg==", "dev": true, "license": "Apache-2.0", "dependencies": { @@ -16204,9 +16320,9 @@ "optional": true }, "node_modules/nanoid": { - "version": "3.3.7", - "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz", - "integrity": "sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==", + "version": "3.3.8", + "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.8.tgz", + "integrity": "sha512-WNLf5Sd8oZxOm+TzppcYk8gVOgP+l58xNy58D0nbUnOxOWRWvlcCV4kUF7ltmI6PsrLl/BgKEyS4mqsGChFN0w==", "dev": true, "funding": [ { @@ -16561,9 +16677,9 @@ } }, "node_modules/npm-package-arg": { - "version": "12.0.0", - "resolved": "https://registry.npmjs.org/npm-package-arg/-/npm-package-arg-12.0.0.tgz", - "integrity": "sha512-ZTE0hbwSdTNL+Stx2zxSqdu2KZfNDcrtrLdIk7XGnQFYBWYDho/ORvXtn5XEePcL3tFpGjHCV3X3xrtDh7eZ+A==", + "version": "12.0.1", + "resolved": "https://registry.npmjs.org/npm-package-arg/-/npm-package-arg-12.0.1.tgz", + "integrity": "sha512-aDxjFfPV3Liw0WOBWlyZLMBqtbgbg03rmGvHDJa2Ttv7tIz+1oB5qWec4psCDFZcZi9b5XdGkPdQiJxOPzvQRQ==", "dev": true, "license": "ISC", "dependencies": { @@ -17602,9 +17718,9 @@ "license": "ISC" }, "node_modules/path-to-regexp": { - "version": "0.1.10", - "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.10.tgz", - "integrity": "sha512-7lf7qcQidTku0Gu3YDPc8DJ1q7OOucfa/BSsIwjuh56VU7katFvuM8hULfkwB3Fns/rsVF7PwPKVw1sl5KQS9w==", + "version": "0.1.12", + "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.12.tgz", + "integrity": "sha512-RA1GjUVMnvYFxuqovrEqZoxxW5NUZqbwKtYz/Tt7nXerk0LbLblQmrsgdeOxV5SFHf0UDggjS/bSeOZwt1pmEQ==", "dev": true, "license": "MIT" }, @@ -17685,9 +17801,9 @@ } }, "node_modules/piscina": { - "version": "4.7.0", - "resolved": "https://registry.npmjs.org/piscina/-/piscina-4.7.0.tgz", - "integrity": "sha512-b8hvkpp9zS0zsfa939b/jXbe64Z2gZv0Ha7FYPNUiDIB1y2AtxcOZdfP8xN8HFjUaqQiT9gRlfjAsoL8vdJ1Iw==", + "version": "4.8.0", + "resolved": "https://registry.npmjs.org/piscina/-/piscina-4.8.0.tgz", + "integrity": "sha512-EZJb+ZxDrQf3dihsUL7p42pjNyrNIFJCrRHPMgxu/svsj+P3xS3fuEWp7k2+rfsavfl1N0G29b1HGs7J0m8rZA==", "dev": true, "license": "MIT", "optionalDependencies": { @@ -18582,19 +18698,22 @@ "license": "MIT" }, "node_modules/resolve": { - "version": "1.22.8", - "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.8.tgz", - "integrity": "sha512-oKWePCxqpd6FlLvGV1VU0x7bkPmmCNolxzjMf4NczoDnQcIWrAF+cPtZn5i6n+RfD2d9i0tzpKnG6Yk168yIyw==", + "version": "1.22.10", + "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.10.tgz", + "integrity": "sha512-NPRy+/ncIMeDlTAsuqwKIiferiawhefFJtkNSW0qZJEqMEb+qBt/77B/jGeeek+F0uOeN05CDa6HXbbIgtVX4w==", "dev": true, "license": "MIT", "dependencies": { - "is-core-module": "^2.13.0", + "is-core-module": "^2.16.0", "path-parse": "^1.0.7", "supports-preserve-symlinks-flag": "^1.0.0" }, "bin": { "resolve": "bin/resolve" }, + "engines": { + "node": ">= 0.4" + }, "funding": { "url": "https://github.com/sponsors/ljharb" } @@ -18758,9 +18877,9 @@ } }, "node_modules/rollup": { - "version": "4.26.0", - "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.26.0.tgz", - "integrity": "sha512-ilcl12hnWonG8f+NxU6BlgysVA0gvY2l8N0R84S1HcINbW20bvwuCngJkkInV6LXhwRpucsW5k1ovDwEdBVrNg==", + "version": "4.30.1", + "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.30.1.tgz", + "integrity": "sha512-mlJ4glW020fPuLi7DkM/lN97mYEZGWeqBnrljzN0gs7GLctqX3lNWxKQ7Gl712UAX+6fog/L3jh4gb7R6aVi3w==", "dev": true, "license": "MIT", "dependencies": { @@ -18774,24 +18893,25 @@ "npm": ">=8.0.0" }, "optionalDependencies": { - "@rollup/rollup-android-arm-eabi": "4.26.0", - "@rollup/rollup-android-arm64": "4.26.0", - "@rollup/rollup-darwin-arm64": "4.26.0", - "@rollup/rollup-darwin-x64": "4.26.0", - "@rollup/rollup-freebsd-arm64": "4.26.0", - "@rollup/rollup-freebsd-x64": "4.26.0", - "@rollup/rollup-linux-arm-gnueabihf": "4.26.0", - "@rollup/rollup-linux-arm-musleabihf": "4.26.0", - "@rollup/rollup-linux-arm64-gnu": "4.26.0", - "@rollup/rollup-linux-arm64-musl": "4.26.0", - "@rollup/rollup-linux-powerpc64le-gnu": "4.26.0", - "@rollup/rollup-linux-riscv64-gnu": "4.26.0", - "@rollup/rollup-linux-s390x-gnu": "4.26.0", - "@rollup/rollup-linux-x64-gnu": "4.26.0", - "@rollup/rollup-linux-x64-musl": "4.26.0", - "@rollup/rollup-win32-arm64-msvc": "4.26.0", - "@rollup/rollup-win32-ia32-msvc": "4.26.0", - "@rollup/rollup-win32-x64-msvc": "4.26.0", + "@rollup/rollup-android-arm-eabi": "4.30.1", + "@rollup/rollup-android-arm64": "4.30.1", + "@rollup/rollup-darwin-arm64": "4.30.1", + "@rollup/rollup-darwin-x64": "4.30.1", + "@rollup/rollup-freebsd-arm64": "4.30.1", + "@rollup/rollup-freebsd-x64": "4.30.1", + "@rollup/rollup-linux-arm-gnueabihf": "4.30.1", + "@rollup/rollup-linux-arm-musleabihf": "4.30.1", + "@rollup/rollup-linux-arm64-gnu": "4.30.1", + "@rollup/rollup-linux-arm64-musl": "4.30.1", + "@rollup/rollup-linux-loongarch64-gnu": "4.30.1", + "@rollup/rollup-linux-powerpc64le-gnu": "4.30.1", + "@rollup/rollup-linux-riscv64-gnu": "4.30.1", + "@rollup/rollup-linux-s390x-gnu": "4.30.1", + "@rollup/rollup-linux-x64-gnu": "4.30.1", + "@rollup/rollup-linux-x64-musl": "4.30.1", + "@rollup/rollup-win32-arm64-msvc": "4.30.1", + "@rollup/rollup-win32-ia32-msvc": "4.30.1", + "@rollup/rollup-win32-x64-msvc": "4.30.1", "fsevents": "~2.3.2" } }, @@ -18909,9 +19029,9 @@ "license": "MIT" }, "node_modules/sass": { - "version": "1.80.7", - "resolved": "https://registry.npmjs.org/sass/-/sass-1.80.7.tgz", - "integrity": "sha512-MVWvN0u5meytrSjsU7AWsbhoXi1sc58zADXFllfZzbsBT1GHjjar6JwBINYPRrkx/zqnQ6uqbQuHgE95O+C+eQ==", + "version": "1.83.1", + "resolved": "https://registry.npmjs.org/sass/-/sass-1.83.1.tgz", + "integrity": "sha512-EVJbDaEs4Rr3F0glJzFSOvtg2/oy2V/YrGFPqPY24UqcLDWcI9ZY5sN+qyO3c/QCZwzgfirvhXvINiJCE/OLcA==", "license": "MIT", "dependencies": { "chokidar": "^4.0.0", @@ -18929,9 +19049,9 @@ } }, "node_modules/sass-loader": { - "version": "16.0.3", - "resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-16.0.3.tgz", - "integrity": "sha512-gosNorT1RCkuCMyihv6FBRR7BMV06oKRAs+l4UMp1mlcVg9rWN6KMmUj3igjQwmYys4mDP3etEYJgiHRbgHCHA==", + "version": "16.0.4", + "resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-16.0.4.tgz", + "integrity": "sha512-LavLbgbBGUt3wCiYzhuLLu65+fWXaXLmq7YxivLhEqmiupCFZ5sKUAipK3do6V80YSU0jvSxNhEdT13IXNr3rg==", "dev": true, "license": "MIT", "dependencies": { @@ -19391,11 +19511,14 @@ } }, "node_modules/shell-quote": { - "version": "1.8.1", - "resolved": "https://registry.npmjs.org/shell-quote/-/shell-quote-1.8.1.tgz", - "integrity": "sha512-6j1W9l1iAs/4xYBI1SYOVZyFcCis9b4KCLQ8fgAGG07QvzaRLVVRQvAy85yNmmZSjYjg4MWh4gNvlPujU/5LpA==", + "version": "1.8.2", + "resolved": "https://registry.npmjs.org/shell-quote/-/shell-quote-1.8.2.tgz", + "integrity": "sha512-AzqKpGKjrj7EM6rKVQEPpB288oCfnrEIuyoT9cyF4nmGa7V8Zk6f7RRqYisX8X9m+Q7bd632aZW4ky7EhbQztA==", "dev": true, "license": "MIT", + "engines": { + "node": ">= 0.4" + }, "funding": { "url": "https://github.com/sponsors/ljharb" } @@ -19745,16 +19868,6 @@ "websocket-driver": "^0.7.4" } }, - "node_modules/sockjs/node_modules/uuid": { - "version": "8.3.2", - "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz", - "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==", - "dev": true, - "license": "MIT", - "bin": { - "uuid": "dist/bin/uuid" - } - }, "node_modules/socks": { "version": "2.8.3", "resolved": "https://registry.npmjs.org/socks/-/socks-2.8.3.tgz", @@ -20318,6 +20431,7 @@ "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz", "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==", "dev": true, + "license": "MIT", "dependencies": { "has-flag": "^3.0.0" }, @@ -20444,9 +20558,9 @@ "license": "ISC" }, "node_modules/terser": { - "version": "5.36.0", - "resolved": "https://registry.npmjs.org/terser/-/terser-5.36.0.tgz", - "integrity": "sha512-IYV9eNMuFAV4THUspIRXkLakHnV6XO7FEdtKjf/mDyrnqUg9LnlOn6/RwRvM9SZjR4GUq8Nk8zj67FzVARr74w==", + "version": "5.37.0", + "resolved": "https://registry.npmjs.org/terser/-/terser-5.37.0.tgz", + "integrity": "sha512-B8wRRkmre4ERucLM/uXx4MOV5cbnOlVAqUst+1+iLKPI0dOgFO28f84ptoQt9HEI537PMzfYa/d+GEPKTRXmYA==", "dev": true, "license": "BSD-2-Clause", "dependencies": { @@ -21269,9 +21383,9 @@ "license": "MIT" }, "node_modules/undici-types": { - "version": "5.26.5", - "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-5.26.5.tgz", - "integrity": "sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==", + "version": "6.20.0", + "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.20.0.tgz", + "integrity": "sha512-Ny6QZ2Nju20vw1SRHe3d9jVu6gJ+4e3+MMpqu7pqE5HT6WsTSlce++GQmK5UXS8mzV8DSYHrQH+Xrf2jVcuKNg==", "dev": true, "license": "MIT" }, @@ -21573,6 +21687,16 @@ "node": ">= 0.4.0" } }, + "node_modules/uuid": { + "version": "8.3.2", + "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz", + "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==", + "dev": true, + "license": "MIT", + "bin": { + "uuid": "dist/bin/uuid" + } + }, "node_modules/v8-compile-cache-lib": { "version": "3.0.1", "resolved": "https://registry.npmjs.org/v8-compile-cache-lib/-/v8-compile-cache-lib-3.0.1.tgz", @@ -21714,21 +21838,22 @@ } }, "node_modules/vite": { - "version": "5.4.11", - "resolved": "https://registry.npmjs.org/vite/-/vite-5.4.11.tgz", - "integrity": "sha512-c7jFQRklXua0mTzneGW9QVyxFjUgwcihC4bXEtujIo2ouWCe1Ajt/amn2PCxYnhYfd5k09JX3SB7OYWFKYqj8Q==", + "version": "6.1.0", + "resolved": "https://registry.npmjs.org/vite/-/vite-6.1.0.tgz", + "integrity": "sha512-RjjMipCKVoR4hVfPY6GQTgveinjNuyLw+qruksLDvA5ktI1150VmcMBKmQaEWJhg/j6Uaf6dNCNA0AfdzUb/hQ==", "dev": true, "license": "MIT", + "peer": true, "dependencies": { - "esbuild": "^0.21.3", - "postcss": "^8.4.43", - "rollup": "^4.20.0" + "esbuild": "^0.24.2", + "postcss": "^8.5.1", + "rollup": "^4.30.1" }, "bin": { "vite": "bin/vite.js" }, "engines": { - "node": "^18.0.0 || >=20.0.0" + "node": "^18.0.0 || ^20.0.0 || >=22.0.0" }, "funding": { "url": "https://github.com/vitejs/vite?sponsor=1" @@ -21737,19 +21862,25 @@ "fsevents": "~2.3.3" }, "peerDependencies": { - "@types/node": "^18.0.0 || >=20.0.0", + "@types/node": "^18.0.0 || ^20.0.0 || >=22.0.0", + "jiti": ">=1.21.0", "less": "*", "lightningcss": "^1.21.0", "sass": "*", "sass-embedded": "*", "stylus": "*", "sugarss": "*", - "terser": "^5.4.0" + "terser": "^5.16.0", + "tsx": "^4.8.1", + "yaml": "^2.4.2" }, "peerDependenciesMeta": { "@types/node": { "optional": true }, + "jiti": { + "optional": true + }, "less": { "optional": true }, @@ -21770,467 +21901,73 @@ }, "terser": { "optional": true + }, + "tsx": { + "optional": true + }, + "yaml": { + "optional": true } } }, - "node_modules/vite/node_modules/@esbuild/aix-ppc64": { - "version": "0.21.5", - "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.21.5.tgz", - "integrity": "sha512-1SDgH6ZSPTlggy1yI6+Dbkiz8xzpHJEVAlF/AM1tHPLsf5STom9rwtjE4hKAF20FfXXNTFqEYXyJNWh1GiZedQ==", - "cpu": [ - "ppc64" - ], + "node_modules/vite/node_modules/postcss": { + "version": "8.5.2", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.2.tgz", + "integrity": "sha512-MjOadfU3Ys9KYoX0AdkBlFEF1Vx37uCCeN4ZHnmwm9FfpbsGWMZeBLMmmpY+6Ocqod7mkdZ0DT31OlbsFrLlkA==", "dev": true, - "license": "MIT", - "optional": true, - "os": [ - "aix" + "funding": [ + { + "type": "opencollective", + "url": "https://opencollective.com/postcss/" + }, + { + "type": "tidelift", + "url": "https://tidelift.com/funding/github/npm/postcss" + }, + { + "type": "github", + "url": "https://github.com/sponsors/ai" + } ], + "license": "MIT", + "peer": true, + "dependencies": { + "nanoid": "^3.3.8", + "picocolors": "^1.1.1", + "source-map-js": "^1.2.1" + }, "engines": { - "node": ">=12" + "node": "^10 || ^12 || >=14" } }, - "node_modules/vite/node_modules/@esbuild/android-arm": { - "version": "0.21.5", - "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.21.5.tgz", - "integrity": "sha512-vCPvzSjpPHEi1siZdlvAlsPxXl7WbOVUBBAowWug4rJHb68Ox8KualB+1ocNvT5fjv6wpkX6o/iEpbDrf68zcg==", - "cpu": [ - "arm" - ], + "node_modules/void-elements": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/void-elements/-/void-elements-2.0.1.tgz", + "integrity": "sha512-qZKX4RnBzH2ugr8Lxa7x+0V6XD9Sb/ouARtiasEQCHB1EVU4NXtmHsDDrx1dO4ne5fc3J6EW05BP1Dl0z0iung==", "dev": true, "license": "MIT", - "optional": true, - "os": [ - "android" - ], "engines": { - "node": ">=12" + "node": ">=0.10.0" } }, - "node_modules/vite/node_modules/@esbuild/android-arm64": { - "version": "0.21.5", - "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.21.5.tgz", - "integrity": "sha512-c0uX9VAUBQ7dTDCjq+wdyGLowMdtR/GoC2U5IYk/7D1H1JYC0qseD7+11iMP2mRLN9RcCMRcjC4YMclCzGwS/A==", - "cpu": [ - "arm64" - ], + "node_modules/watchpack": { + "version": "2.4.2", + "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.4.2.tgz", + "integrity": "sha512-TnbFSbcOCcDgjZ4piURLCbJ3nJhznVh9kw6F6iokjiFPl8ONxe9A6nMDVXDiNbrSfLILs6vB07F7wLBrwPYzJw==", "dev": true, "license": "MIT", - "optional": true, - "os": [ - "android" - ], + "dependencies": { + "glob-to-regexp": "^0.4.1", + "graceful-fs": "^4.1.2" + }, "engines": { - "node": ">=12" + "node": ">=10.13.0" } }, - "node_modules/vite/node_modules/@esbuild/android-x64": { - "version": "0.21.5", - "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.21.5.tgz", - "integrity": "sha512-D7aPRUUNHRBwHxzxRvp856rjUHRFW1SdQATKXH2hqA0kAZb1hKmi02OpYRacl0TxIGz/ZmXWlbZgjwWYaCakTA==", - "cpu": [ - "x64" - ], - "dev": true, - "license": "MIT", - "optional": true, - "os": [ - "android" - ], - "engines": { - "node": ">=12" - } - }, - "node_modules/vite/node_modules/@esbuild/darwin-arm64": { - "version": "0.21.5", - "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.21.5.tgz", - "integrity": "sha512-DwqXqZyuk5AiWWf3UfLiRDJ5EDd49zg6O9wclZ7kUMv2WRFr4HKjXp/5t8JZ11QbQfUS6/cRCKGwYhtNAY88kQ==", - "cpu": [ - "arm64" - ], - "dev": true, - "license": "MIT", - "optional": true, - "os": [ - "darwin" - ], - "engines": { - "node": ">=12" - } - }, - "node_modules/vite/node_modules/@esbuild/darwin-x64": { - "version": "0.21.5", - "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.21.5.tgz", - "integrity": "sha512-se/JjF8NlmKVG4kNIuyWMV/22ZaerB+qaSi5MdrXtd6R08kvs2qCN4C09miupktDitvh8jRFflwGFBQcxZRjbw==", - "cpu": [ - "x64" - ], - "dev": true, - "license": "MIT", - "optional": true, - "os": [ - "darwin" - ], - "engines": { - "node": ">=12" - } - }, - "node_modules/vite/node_modules/@esbuild/freebsd-arm64": { - "version": "0.21.5", - "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.21.5.tgz", - "integrity": "sha512-5JcRxxRDUJLX8JXp/wcBCy3pENnCgBR9bN6JsY4OmhfUtIHe3ZW0mawA7+RDAcMLrMIZaf03NlQiX9DGyB8h4g==", - "cpu": [ - "arm64" - ], - "dev": true, - "license": "MIT", - "optional": true, - "os": [ - "freebsd" - ], - "engines": { - "node": ">=12" - } - }, - "node_modules/vite/node_modules/@esbuild/freebsd-x64": { - "version": "0.21.5", - "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.21.5.tgz", - "integrity": "sha512-J95kNBj1zkbMXtHVH29bBriQygMXqoVQOQYA+ISs0/2l3T9/kj42ow2mpqerRBxDJnmkUDCaQT/dfNXWX/ZZCQ==", - "cpu": [ - "x64" - ], - "dev": true, - "license": "MIT", - "optional": true, - "os": [ - "freebsd" - ], - "engines": { - "node": ">=12" - } - }, - "node_modules/vite/node_modules/@esbuild/linux-arm": { - "version": "0.21.5", - "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.21.5.tgz", - "integrity": "sha512-bPb5AHZtbeNGjCKVZ9UGqGwo8EUu4cLq68E95A53KlxAPRmUyYv2D6F0uUI65XisGOL1hBP5mTronbgo+0bFcA==", - "cpu": [ - "arm" - ], - "dev": true, - "license": "MIT", - "optional": true, - "os": [ - "linux" - ], - "engines": { - "node": ">=12" - } - }, - "node_modules/vite/node_modules/@esbuild/linux-arm64": { - "version": "0.21.5", - "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.21.5.tgz", - "integrity": "sha512-ibKvmyYzKsBeX8d8I7MH/TMfWDXBF3db4qM6sy+7re0YXya+K1cem3on9XgdT2EQGMu4hQyZhan7TeQ8XkGp4Q==", - "cpu": [ - "arm64" - ], - "dev": true, - "license": "MIT", - "optional": true, - "os": [ - "linux" - ], - "engines": { - "node": ">=12" - } - }, - "node_modules/vite/node_modules/@esbuild/linux-ia32": { - "version": "0.21.5", - "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.21.5.tgz", - "integrity": "sha512-YvjXDqLRqPDl2dvRODYmmhz4rPeVKYvppfGYKSNGdyZkA01046pLWyRKKI3ax8fbJoK5QbxblURkwK/MWY18Tg==", - "cpu": [ - "ia32" - ], - "dev": true, - "license": "MIT", - "optional": true, - "os": [ - "linux" - ], - "engines": { - "node": ">=12" - } - }, - "node_modules/vite/node_modules/@esbuild/linux-loong64": { - "version": "0.21.5", - "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.21.5.tgz", - "integrity": "sha512-uHf1BmMG8qEvzdrzAqg2SIG/02+4/DHB6a9Kbya0XDvwDEKCoC8ZRWI5JJvNdUjtciBGFQ5PuBlpEOXQj+JQSg==", - "cpu": [ - "loong64" - ], - "dev": true, - "license": "MIT", - "optional": true, - "os": [ - "linux" - ], - "engines": { - "node": ">=12" - } - }, - "node_modules/vite/node_modules/@esbuild/linux-mips64el": { - "version": "0.21.5", - "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.21.5.tgz", - "integrity": "sha512-IajOmO+KJK23bj52dFSNCMsz1QP1DqM6cwLUv3W1QwyxkyIWecfafnI555fvSGqEKwjMXVLokcV5ygHW5b3Jbg==", - "cpu": [ - "mips64el" - ], - "dev": true, - "license": "MIT", - "optional": true, - "os": [ - "linux" - ], - "engines": { - "node": ">=12" - } - }, - "node_modules/vite/node_modules/@esbuild/linux-ppc64": { - "version": "0.21.5", - "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.21.5.tgz", - "integrity": "sha512-1hHV/Z4OEfMwpLO8rp7CvlhBDnjsC3CttJXIhBi+5Aj5r+MBvy4egg7wCbe//hSsT+RvDAG7s81tAvpL2XAE4w==", - "cpu": [ - "ppc64" - ], - "dev": true, - "license": "MIT", - "optional": true, - "os": [ - "linux" - ], - "engines": { - "node": ">=12" - } - }, - "node_modules/vite/node_modules/@esbuild/linux-riscv64": { - "version": "0.21.5", - "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.21.5.tgz", - "integrity": "sha512-2HdXDMd9GMgTGrPWnJzP2ALSokE/0O5HhTUvWIbD3YdjME8JwvSCnNGBnTThKGEB91OZhzrJ4qIIxk/SBmyDDA==", - "cpu": [ - "riscv64" - ], - "dev": true, - "license": "MIT", - "optional": true, - "os": [ - "linux" - ], - "engines": { - "node": ">=12" - } - }, - "node_modules/vite/node_modules/@esbuild/linux-s390x": { - "version": "0.21.5", - "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.21.5.tgz", - "integrity": "sha512-zus5sxzqBJD3eXxwvjN1yQkRepANgxE9lgOW2qLnmr8ikMTphkjgXu1HR01K4FJg8h1kEEDAqDcZQtbrRnB41A==", - "cpu": [ - "s390x" - ], - "dev": true, - "license": "MIT", - "optional": true, - "os": [ - "linux" - ], - "engines": { - "node": ">=12" - } - }, - "node_modules/vite/node_modules/@esbuild/linux-x64": { - "version": "0.21.5", - "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.21.5.tgz", - "integrity": "sha512-1rYdTpyv03iycF1+BhzrzQJCdOuAOtaqHTWJZCWvijKD2N5Xu0TtVC8/+1faWqcP9iBCWOmjmhoH94dH82BxPQ==", - "cpu": [ - "x64" - ], - "dev": true, - "license": "MIT", - "optional": true, - "os": [ - "linux" - ], - "engines": { - "node": ">=12" - } - }, - "node_modules/vite/node_modules/@esbuild/netbsd-x64": { - "version": "0.21.5", - "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.21.5.tgz", - "integrity": "sha512-Woi2MXzXjMULccIwMnLciyZH4nCIMpWQAs049KEeMvOcNADVxo0UBIQPfSmxB3CWKedngg7sWZdLvLczpe0tLg==", - "cpu": [ - "x64" - ], - "dev": true, - "license": "MIT", - "optional": true, - "os": [ - "netbsd" - ], - "engines": { - "node": ">=12" - } - }, - "node_modules/vite/node_modules/@esbuild/openbsd-x64": { - "version": "0.21.5", - "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.21.5.tgz", - "integrity": "sha512-HLNNw99xsvx12lFBUwoT8EVCsSvRNDVxNpjZ7bPn947b8gJPzeHWyNVhFsaerc0n3TsbOINvRP2byTZ5LKezow==", - "cpu": [ - "x64" - ], - "dev": true, - "license": "MIT", - "optional": true, - "os": [ - "openbsd" - ], - "engines": { - "node": ">=12" - } - }, - "node_modules/vite/node_modules/@esbuild/sunos-x64": { - "version": "0.21.5", - "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.21.5.tgz", - "integrity": "sha512-6+gjmFpfy0BHU5Tpptkuh8+uw3mnrvgs+dSPQXQOv3ekbordwnzTVEb4qnIvQcYXq6gzkyTnoZ9dZG+D4garKg==", - "cpu": [ - "x64" - ], - "dev": true, - "license": "MIT", - "optional": true, - "os": [ - "sunos" - ], - "engines": { - "node": ">=12" - } - }, - "node_modules/vite/node_modules/@esbuild/win32-arm64": { - "version": "0.21.5", - "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.21.5.tgz", - "integrity": "sha512-Z0gOTd75VvXqyq7nsl93zwahcTROgqvuAcYDUr+vOv8uHhNSKROyU961kgtCD1e95IqPKSQKH7tBTslnS3tA8A==", - "cpu": [ - "arm64" - ], - "dev": true, - "license": "MIT", - "optional": true, - "os": [ - "win32" - ], - "engines": { - "node": ">=12" - } - }, - "node_modules/vite/node_modules/@esbuild/win32-ia32": { - "version": "0.21.5", - "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.21.5.tgz", - "integrity": "sha512-SWXFF1CL2RVNMaVs+BBClwtfZSvDgtL//G/smwAc5oVK/UPu2Gu9tIaRgFmYFFKrmg3SyAjSrElf0TiJ1v8fYA==", - "cpu": [ - "ia32" - ], - "dev": true, - "license": "MIT", - "optional": true, - "os": [ - "win32" - ], - "engines": { - "node": ">=12" - } - }, - "node_modules/vite/node_modules/@esbuild/win32-x64": { - "version": "0.21.5", - "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.21.5.tgz", - "integrity": "sha512-tQd/1efJuzPC6rCFwEvLtci/xNFcTZknmXs98FYDfGE4wP9ClFV98nyKrzJKVPMhdDnjzLhdUyMX4PsQAPjwIw==", - "cpu": [ - "x64" - ], - "dev": true, - "license": "MIT", - "optional": true, - "os": [ - "win32" - ], - "engines": { - "node": ">=12" - } - }, - "node_modules/vite/node_modules/esbuild": { - "version": "0.21.5", - "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.21.5.tgz", - "integrity": "sha512-mg3OPMV4hXywwpoDxu3Qda5xCKQi+vCTZq8S9J/EpkhB2HzKXq4SNFZE3+NK93JYxc8VMSep+lOUSC/RVKaBqw==", - "dev": true, - "hasInstallScript": true, - "license": "MIT", - "bin": { - "esbuild": "bin/esbuild" - }, - "engines": { - "node": ">=12" - }, - "optionalDependencies": { - "@esbuild/aix-ppc64": "0.21.5", - "@esbuild/android-arm": "0.21.5", - "@esbuild/android-arm64": "0.21.5", - "@esbuild/android-x64": "0.21.5", - "@esbuild/darwin-arm64": "0.21.5", - "@esbuild/darwin-x64": "0.21.5", - "@esbuild/freebsd-arm64": "0.21.5", - "@esbuild/freebsd-x64": "0.21.5", - "@esbuild/linux-arm": "0.21.5", - "@esbuild/linux-arm64": "0.21.5", - "@esbuild/linux-ia32": "0.21.5", - "@esbuild/linux-loong64": "0.21.5", - "@esbuild/linux-mips64el": "0.21.5", - "@esbuild/linux-ppc64": "0.21.5", - "@esbuild/linux-riscv64": "0.21.5", - "@esbuild/linux-s390x": "0.21.5", - "@esbuild/linux-x64": "0.21.5", - "@esbuild/netbsd-x64": "0.21.5", - "@esbuild/openbsd-x64": "0.21.5", - "@esbuild/sunos-x64": "0.21.5", - "@esbuild/win32-arm64": "0.21.5", - "@esbuild/win32-ia32": "0.21.5", - "@esbuild/win32-x64": "0.21.5" - } - }, - "node_modules/void-elements": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/void-elements/-/void-elements-2.0.1.tgz", - "integrity": "sha512-qZKX4RnBzH2ugr8Lxa7x+0V6XD9Sb/ouARtiasEQCHB1EVU4NXtmHsDDrx1dO4ne5fc3J6EW05BP1Dl0z0iung==", - "dev": true, - "license": "MIT", - "engines": { - "node": ">=0.10.0" - } - }, - "node_modules/watchpack": { - "version": "2.4.2", - "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.4.2.tgz", - "integrity": "sha512-TnbFSbcOCcDgjZ4piURLCbJ3nJhznVh9kw6F6iokjiFPl8ONxe9A6nMDVXDiNbrSfLILs6vB07F7wLBrwPYzJw==", - "dev": true, - "license": "MIT", - "dependencies": { - "glob-to-regexp": "^0.4.1", - "graceful-fs": "^4.1.2" - }, - "engines": { - "node": ">=10.13.0" - } - }, - "node_modules/wbuf": { - "version": "1.7.3", - "resolved": "https://registry.npmjs.org/wbuf/-/wbuf-1.7.3.tgz", - "integrity": "sha512-O84QOnr0icsbFGLS0O3bI5FswxzRr8/gHwWkDlQFskhSPryQXvrTMxjxGP4+iWYoauLoBvfDpkrOauZ+0iZpDA==", + "node_modules/wbuf": { + "version": "1.7.3", + "resolved": "https://registry.npmjs.org/wbuf/-/wbuf-1.7.3.tgz", + "integrity": "sha512-O84QOnr0icsbFGLS0O3bI5FswxzRr8/gHwWkDlQFskhSPryQXvrTMxjxGP4+iWYoauLoBvfDpkrOauZ+0iZpDA==", "dev": true, "license": "MIT", "dependencies": { @@ -22262,17 +21999,17 @@ "license": "BSD-2-Clause" }, "node_modules/webpack": { - "version": "5.96.1", - "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.96.1.tgz", - "integrity": "sha512-l2LlBSvVZGhL4ZrPwyr8+37AunkcYj5qh8o6u2/2rzoPc8gxFJkLj1WxNgooi9pnoc06jh0BjuXnamM4qlujZA==", + "version": "5.97.1", + "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.97.1.tgz", + "integrity": "sha512-EksG6gFY3L1eFMROS/7Wzgrii5mBAFe4rIr3r2BTfo7bcc+DWwFZ4OJ/miOuHJO/A85HwyI4eQ0F6IKXesO7Fg==", "dev": true, "license": "MIT", "dependencies": { "@types/eslint-scope": "^3.7.7", "@types/estree": "^1.0.6", - "@webassemblyjs/ast": "^1.12.1", - "@webassemblyjs/wasm-edit": "^1.12.1", - "@webassemblyjs/wasm-parser": "^1.12.1", + "@webassemblyjs/ast": "^1.14.1", + "@webassemblyjs/wasm-edit": "^1.14.1", + "@webassemblyjs/wasm-parser": "^1.14.1", "acorn": "^8.14.0", "browserslist": "^4.24.0", "chrome-trace-event": "^1.0.2", @@ -22399,9 +22136,9 @@ } }, "node_modules/webpack-dev-server": { - "version": "5.1.0", - "resolved": "https://registry.npmjs.org/webpack-dev-server/-/webpack-dev-server-5.1.0.tgz", - "integrity": "sha512-aQpaN81X6tXie1FoOB7xlMfCsN19pSvRAeYUHOdFWOlhpQ/LlbfTqYwwmEDFV0h8GGuqmCmKmT+pxcUV/Nt2gQ==", + "version": "5.2.0", + "resolved": "https://registry.npmjs.org/webpack-dev-server/-/webpack-dev-server-5.2.0.tgz", + "integrity": "sha512-90SqqYXA2SK36KcT6o1bvwvZfJFcmoamqeJY7+boioffX9g9C0wjjJRGUrQIuh43pb0ttX7+ssavmj/WN2RHtA==", "dev": true, "license": "MIT", "dependencies": { @@ -22418,10 +22155,9 @@ "colorette": "^2.0.10", "compression": "^1.7.4", "connect-history-api-fallback": "^2.0.0", - "express": "^4.19.2", + "express": "^4.21.2", "graceful-fs": "^4.2.6", - "html-entities": "^2.4.0", - "http-proxy-middleware": "^2.0.3", + "http-proxy-middleware": "^2.0.7", "ipaddr.js": "^2.1.0", "launch-editor": "^2.6.1", "open": "^10.0.3", @@ -22461,6 +22197,7 @@ "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz", "integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==", "dev": true, + "license": "ISC", "dependencies": { "normalize-path": "^3.0.0", "picomatch": "^2.0.4" @@ -22474,6 +22211,7 @@ "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.3.0.tgz", "integrity": "sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==", "dev": true, + "license": "MIT", "engines": { "node": ">=8" }, @@ -22486,6 +22224,7 @@ "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz", "integrity": "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==", "dev": true, + "license": "MIT", "dependencies": { "anymatch": "~3.1.2", "braces": "~3.0.2", @@ -22510,6 +22249,7 @@ "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz", "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==", "dev": true, + "license": "ISC", "dependencies": { "is-glob": "^4.0.1" }, @@ -22547,6 +22287,7 @@ "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz", "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==", "dev": true, + "license": "MIT", "dependencies": { "binary-extensions": "^2.0.0" }, @@ -22559,6 +22300,7 @@ "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz", "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==", "dev": true, + "license": "MIT", "engines": { "node": ">=8.6" }, @@ -22571,6 +22313,7 @@ "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz", "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==", "dev": true, + "license": "MIT", "dependencies": { "picomatch": "^2.2.1" }, diff --git a/package.json b/package.json index f645c2ab7f..a9b43e2818 100644 --- a/package.json +++ b/package.json @@ -44,17 +44,17 @@ "url": "git://github.com/IgniteUI/igniteui-angular-samples/repository.git" }, "dependencies": { - "@angular/animations": "^19.0.0", - "@angular/cdk": "^19.0.0", - "@angular/common": "^19.0.0", - "@angular/compiler": "^19.0.0", - "@angular/core": "^19.0.0", - "@angular/forms": "^19.0.0", - "@angular/localize": "^19.0.0", - "@angular/material": "^19.0.0", - "@angular/platform-browser": "^19.0.0", - "@angular/platform-browser-dynamic": "^19.0.0", - "@angular/router": "^19.0.0", + "@angular/animations": "^19.1.6", + "@angular/cdk": "^19.1.4", + "@angular/common": "^19.1.6", + "@angular/compiler": "^19.1.6", + "@angular/core": "^19.1.6", + "@angular/forms": "^19.1.6", + "@angular/localize": "^19.1.6", + "@angular/material": "^19.1.4", + "@angular/platform-browser": "^19.1.6", + "@angular/platform-browser-dynamic": "^19.1.6", + "@angular/router": "^19.1.6", "@igniteui/material-icons-extended": "^3.1.0", "@microsoft/signalr": "^8.0.7", "@ng-bootstrap/ng-bootstrap": "^18.0.0", @@ -65,14 +65,14 @@ "bootstrap": "5.3.3", "file-saver": "^2.0.2", "hammerjs": "^2.0.8", - "igniteui-angular": "^19.0.0", + "igniteui-angular": "^19.1.0", "igniteui-angular-charts": "^19.0.0", "igniteui-angular-core": "^19.0.0", "igniteui-angular-extras": "^19.0.3", - "igniteui-angular-i18n": "^19.0.0", - "igniteui-dockmanager": "^1.14.2", + "igniteui-angular-i18n": "^19.1.0", + "igniteui-dockmanager": "^1.16.0", "igniteui-live-editing": "^3.0.0", - "igniteui-webcomponents": "^5.1.2", + "igniteui-webcomponents": "^5.2.3", "minireset.css": "0.0.6", "rxjs": "^7.8.1", "tslib": "^2.6.1", @@ -80,8 +80,8 @@ }, "overrides": { "igniteui-angular-extras": { - "igniteui-angular": "^19.0.0", - "@infragistics/igniteui-angular": "^19.0.0", + "igniteui-angular": "^19.1.0", + "@infragistics/igniteui-angular": "^19.1.0", "igniteui-angular-charts": "^19.0.0", "igniteui-angular-core": "^19.0.0", "@angular/core": "^19.0.0", @@ -101,20 +101,20 @@ } }, "devDependencies": { - "@angular-devkit/build-angular": "^19.0.0", - "@angular-eslint/builder": "^19.0.0", - "@angular-eslint/eslint-plugin": "^19.0.0", - "@angular-eslint/eslint-plugin-template": "^19.0.0", - "@angular-eslint/schematics": "^19.0.0", - "@angular-eslint/template-parser": "^19.0.0", - "@angular/cli": "^19.0.0", - "@angular/compiler-cli": "^19.0.0", - "@angular/language-service": "^19.0.0", - "@igniteui/angular-schematics": "19.0.1436", + "@angular-devkit/build-angular": "^19.1.7", + "@angular-eslint/builder": "^19.1.0", + "@angular-eslint/eslint-plugin": "^19.1.0", + "@angular-eslint/eslint-plugin-template": "^19.1.0", + "@angular-eslint/schematics": "^19.1.0", + "@angular-eslint/template-parser": "^19.1.0", + "@angular/cli": "^19.1.7", + "@angular/compiler-cli": "^19.1.6", + "@angular/language-service": "^19.1.6", + "@igniteui/angular-schematics": "19.0.14313", "@juggle/resize-observer": "^3.3.1", - "@types/jasmine": "^5.1.2", + "@types/jasmine": "^5.1.6", "@types/jasminewd2": "^2.0.13", - "@types/node": "^18.17.0", + "@types/node": "^22.13.4", "@typescript-eslint/eslint-plugin": "^7.2.0", "@typescript-eslint/parser": "^7.2.0", "eslint": "^8.57.0", diff --git a/projects/app-crm/src/app/grid-crm/grid-crm.component.html b/projects/app-crm/src/app/grid-crm/grid-crm.component.html index 65897117d2..abffe6907c 100644 --- a/projects/app-crm/src/app/grid-crm/grid-crm.component.html +++ b/projects/app-crm/src/app/grid-crm/grid-crm.component.html @@ -1,157 +1,167 @@
- - - - - - - - -
-
- - + + + + + + + + +
+
+ + + + Business Propeller +
+
+ + + @if (searchText.length === 0) { + search + } + @if (searchText.length > 0) { + clear + + } + + + + + @if (searchText.length > 0) { + + @if (grid1.lastSearchInfo) { +
+ @if (grid1.lastSearchInfo.matchInfoCache.length > 0) { + + {{ grid1.lastSearchInfo.activeMatchIndex + 1 }} of {{ + grid1.lastSearchInfo.matchInfoCache.length }} results - Business Propeller -
-
- - - search - clear - - - - - - -
- - {{ grid1.lastSearchInfo.activeMatchIndex + 1 }} of {{ - grid1.lastSearchInfo.matchInfoCache.length }} results - - - No results - -
- -
- -
- -
- - -
- - + } + @if (grid1.lastSearchInfo.matchInfoCache.length === 0) { + + No results + + }
-
- - - - - - - - -
- -
- - - - - - - - - - - - - - -
- - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - {{ formatValue(val) }} - - + } +
+ +
+
+ + +
+ + } + +
+
+ + + + + + + + +
+ +
+ + + + + + + + + + + + + + +
+ + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + {{ formatValue(val) }} + + - - - {{ formatValue(val) }} - - - + + + {{ formatValue(val) }} + + +
diff --git a/projects/app-crm/src/app/grid-crm/grid-crm.component.ts b/projects/app-crm/src/app/grid-crm/grid-crm.component.ts index 24e4202200..ce70a27262 100644 --- a/projects/app-crm/src/app/grid-crm/grid-crm.component.ts +++ b/projects/app-crm/src/app/grid-crm/grid-crm.component.ts @@ -10,7 +10,7 @@ import { import { ActivatedRoute } from '@angular/router'; import { CloseScrollStrategy, ConnectedPositioningStrategy, HorizontalAlignment, IColumnExportingEventArgs, IgxColumnComponent, IgxCsvExporterService, IgxDateSummaryOperand, IgxExcelExporterService, IgxGridComponent, IgxNumberSummaryOperand, IgxSummaryResult, IgxToggleDirective, OverlaySettings, PositionSettings, VerticalAlignment, CellType, GridSelectionMode, IgxGridToolbarComponent, IgxGridToolbarActionsComponent, IgxGridToolbarHidingComponent, IgxGridToolbarPinningComponent, IgxGridToolbarExporterComponent, IgxGridToolbarTitleComponent, IgxInputGroupComponent, IgxPrefixDirective, IgxIconComponent, IgxInputDirective, IgxSuffixDirective, IgxIconButtonDirective, IgxRippleDirective, IgxCellTemplateDirective, IgxAvatarComponent, IgxLinearProgressBarComponent } from 'igniteui-angular'; import { data, Employee } from './data'; -import { NgClass, NgIf } from '@angular/common'; +import { NgClass } from '@angular/common'; import { IgxPreventDocumentScrollDirective } from '../../../../../src/app/directives/prevent-scroll.directive'; import { FormsModule } from '@angular/forms'; @@ -75,7 +75,7 @@ class SoonSummary extends IgxDateSummaryOperand { selector: 'app-grid', styleUrls: ['./grid-crm.component.scss'], templateUrl: './grid-crm.component.html', - imports: [NgClass, IgxGridComponent, IgxPreventDocumentScrollDirective, IgxGridToolbarComponent, IgxGridToolbarActionsComponent, IgxGridToolbarHidingComponent, IgxGridToolbarPinningComponent, IgxGridToolbarExporterComponent, IgxGridToolbarTitleComponent, IgxInputGroupComponent, IgxPrefixDirective, NgIf, IgxIconComponent, FormsModule, IgxInputDirective, IgxSuffixDirective, IgxIconButtonDirective, IgxRippleDirective, IgxColumnComponent, IgxCellTemplateDirective, IgxAvatarComponent, IgxLinearProgressBarComponent] + imports: [NgClass, IgxGridComponent, IgxPreventDocumentScrollDirective, IgxGridToolbarComponent, IgxGridToolbarActionsComponent, IgxGridToolbarHidingComponent, IgxGridToolbarPinningComponent, IgxGridToolbarExporterComponent, IgxGridToolbarTitleComponent, IgxInputGroupComponent, IgxPrefixDirective, IgxIconComponent, FormsModule, IgxInputDirective, IgxSuffixDirective, IgxIconButtonDirective, IgxRippleDirective, IgxColumnComponent, IgxCellTemplateDirective, IgxAvatarComponent, IgxLinearProgressBarComponent] }) export class GridCRMComponent implements OnInit, AfterViewInit { diff --git a/projects/app-lob/src/app/grid-dynamic-chart-data/data-analysis-dock-manager/data-analysis-dock-manager.component.html b/projects/app-lob/src/app/grid-dynamic-chart-data/data-analysis-dock-manager/data-analysis-dock-manager.component.html index e8062180e6..c2529ead80 100644 --- a/projects/app-lob/src/app/grid-dynamic-chart-data/data-analysis-dock-manager/data-analysis-dock-manager.component.html +++ b/projects/app-lob/src/app/grid-dynamic-chart-data/data-analysis-dock-manager/data-analysis-dock-manager.component.html @@ -1,125 +1,135 @@ -
- - - - - - - -
- {{cell.value | currency:'USD':'symbol':'1.4-4'}} -
- - - - - - -
- {{cell.value | number:'1.4-4'}}% -
- - - - - - -
- {{cell.value | number:'1.4-4'}}% -
- - - - - - -
- {{cell.value | currency:'USD':'symbol':'1.4-4'}} -
- - - - -
- {{cell.value | currency:'USD':'symbol':'1.4-4'}} -
- - - - -
- {{cell.value | number:'1.4-4'}}% -
- - - - - - -
- {{cell.value | number:'1.4-4'}}% -
- - - - - - -
- {{cell.value | number:'1.4-4'}}% -
- - - - - - -
- {{cell.value | number:'1.4-4'}}% -
- - - - - - -
- {{cell.value | number:'1.4-4'}}% -
- - - - - - -
+
+ + + + + + + +
+ {{cell.value | currency:'USD':'symbol':'1.4-4'}} +
+ + + + + + +
+ {{cell.value | number:'1.4-4'}}% +
+ + + + + + +
+ {{cell.value | number:'1.4-4'}}% +
+ + + + + + +
+ {{cell.value | currency:'USD':'symbol':'1.4-4'}} +
+ + + + +
+ {{cell.value | currency:'USD':'symbol':'1.4-4'}} +
+ + + + +
+ {{cell.value | number:'1.4-4'}}% +
+ + + + + + +
+ {{cell.value | number:'1.4-4'}}% +
+ + + + + + +
+ {{cell.value | number:'1.4-4'}}% +
+ + + + + + +
+ {{cell.value | number:'1.4-4'}}% +
+ + + + + + +
+ {{cell.value | number:'1.4-4'}}% +
+ + + + + + +
-
-
-
-
{{chartType | titlecase}} Chart
-
-
- - -
+
+ @for (chartType of chartTypes; track chartType) { +
+ @if ((allCharts |filterType:chartType).length > 0) { +
+
{{chartType | titlecase}} Chart
+
+ @for (chart of (allCharts | filterType: chartType); track chart; let i = $index) { +
+ + @if (selectedCharts[chart]) { + + }
- + }
-
-
+ +
+ } +
+ } +
- + @for (chart of allCharts; track chart) { + + } diff --git a/projects/app-lob/src/app/grid-dynamic-chart-data/data-analysis-dock-manager/data-analysis-dock-manager.component.ts b/projects/app-lob/src/app/grid-dynamic-chart-data/data-analysis-dock-manager/data-analysis-dock-manager.component.ts index 296c86f685..91c14d6946 100644 --- a/projects/app-lob/src/app/grid-dynamic-chart-data/data-analysis-dock-manager/data-analysis-dock-manager.component.ts +++ b/projects/app-lob/src/app/grid-dynamic-chart-data/data-analysis-dock-manager/data-analysis-dock-manager.component.ts @@ -6,7 +6,7 @@ import { FinancialData } from '../../data/financialData'; import { FloatingPanesService } from '../../services/floating-panes.service'; import { DockSlotComponent } from './dock-slot/dock-slot.component'; import { IgxGridComponent, IgxColumnComponent, IgxCellTemplateDirective, IgxDividerDirective, IgxBadgeComponent } from 'igniteui-angular'; -import { NgFor, NgIf, NgClass, DecimalPipe, TitleCasePipe, CurrencyPipe } from '@angular/common'; +import { NgClass, DecimalPipe, TitleCasePipe, CurrencyPipe } from '@angular/common'; @Pipe({ name: 'filterType' @@ -53,7 +53,7 @@ export class HastDuplicateLayouts implements PipeTransform { templateUrl: './data-analysis-dock-manager.component.html', styleUrls: ['./data-analysis-dock-manager.component.scss'], providers: [FloatingPanesService], - imports: [IgxGridComponent, IgxChartIntegrationDirective, IgxContextMenuDirective, IgxBadgeComponent, IgxColumnComponent, IgxCellTemplateDirective, NgFor, NgIf, NgClass, IgxDividerDirective, DockSlotComponent, DecimalPipe, TitleCasePipe, CurrencyPipe, FilterTypePipe, HastDuplicateLayouts], + imports: [IgxGridComponent, IgxChartIntegrationDirective, IgxContextMenuDirective, IgxBadgeComponent, IgxColumnComponent, IgxCellTemplateDirective, NgClass, IgxDividerDirective, DockSlotComponent, DecimalPipe, TitleCasePipe, CurrencyPipe, FilterTypePipe, HastDuplicateLayouts], schemas: [CUSTOM_ELEMENTS_SCHEMA] }) export class DataAnalysisDockManagerComponent implements OnInit, AfterViewInit { diff --git a/projects/app-lob/src/app/grid-finjs-dock-manager/grid-finjs-dock-manager.component.html b/projects/app-lob/src/app/grid-finjs-dock-manager/grid-finjs-dock-manager.component.html index f1c3b27b0d..6c192d2e3f 100644 --- a/projects/app-lob/src/app/grid-finjs-dock-manager/grid-finjs-dock-manager.component.html +++ b/projects/app-lob/src/app/grid-finjs-dock-manager/grid-finjs-dock-manager.component.html @@ -1,169 +1,197 @@ -
-
- Change theme:
Dark Mode +
+
+ Change theme:
Dark Mode +
+
+ Start/Stop live data: {{ liveData === + true ? 'Streaming' : 'Not Streaming' }} +
+
+ + + + + view_list + + @for (item of dataVolumeItems; track item) { + + {{item}} + + } + +
+
+ + + + + cell_wifi + + @for (item of frequencyItems; track item) { + + {{item}} + + } + +
+
Add Floating Pane
+
+
+
+ + + + + + + + + +
+ {{cell.value | currency:'USD':'symbol':'1.4-4'}} + @if (trends.positive(cell.row.data)) { + trending_up + } + @if (trends.negative(cell.row.data)) { + trending_down + }
-
- Start/Stop live data: {{ liveData === - true ? 'Streaming' : 'Not Streaming' }} + + + + + + + @for (c of columns; track c) { + + + } + +
+
+ + + + + + + + + +
+ {{cell.value | currency:'USD':'symbol':'1.4-4'}} + @if (trends.positive(cell.row.data)) { + trending_up + } + @if (trends.negative(cell.row.data)) { + trending_down + }
-
- - - - - view_list - - - {{item}} - - + + + + + + + @for (c of columns; track c) { + + + } + +
+
+ + + + + + + + + +
+ {{cell.value | currency:'USD':'symbol':'1.4-4'}} + @if (trends.positive(cell.row.data)) { + trending_up + } + @if (trends.negative(cell.row.data)) { + trending_down + }
-
- - - - - cell_wifi - - - {{item}} - - + + + + + + + @for (c of columns; track c) { + + + } + +
+
+ + + + + + + + + + +
+ {{cell.value | currency:'USD':'symbol':'1.4-4'}} + @if (trends.positive(cell.row.data)) { + trending_up + } + @if (trends.negative(cell.row.data)) { + trending_down + }
-
Add Floating Pane
-
-
-
- - - - - - - - - -
- {{cell.value | currency:'USD':'symbol':'1.4-4'}} - trending_up - trending_down -
- - - - - - - - - -
-
- - - - - - - - - -
- {{cell.value | currency:'USD':'symbol':'1.4-4'}} - trending_up - trending_down -
- - - - - - - - - -
-
- - - - - - - - - -
- {{cell.value | currency:'USD':'symbol':'1.4-4'}} - trending_up - trending_down -
- - - - - - - - - -
-
- - - - - - - - - - -
- {{cell.value | currency:'USD':'symbol':'1.4-4'}} - trending_up - trending_down -
- - - - - - - - - -
- - + + + + + + + @for (c of columns; track c) { + + + } + +
+ +
diff --git a/projects/app-lob/src/app/grid-finjs-dock-manager/grid-finjs-dock-manager.component.ts b/projects/app-lob/src/app/grid-finjs-dock-manager/grid-finjs-dock-manager.component.ts index c4c3c7a935..5ecb4ecd74 100644 --- a/projects/app-lob/src/app/grid-finjs-dock-manager/grid-finjs-dock-manager.component.ts +++ b/projects/app-lob/src/app/grid-finjs-dock-manager/grid-finjs-dock-manager.component.ts @@ -8,14 +8,14 @@ import { FloatingPanesService } from '../services/floating-panes.service'; import { SignalRService } from '../services/signal-r.service'; import { DockSlotComponent, GridHostDirective } from './dock-slot.component'; import { FormsModule } from '@angular/forms'; -import { NgFor, NgIf, AsyncPipe, CurrencyPipe } from '@angular/common'; +import { AsyncPipe, CurrencyPipe } from '@angular/common'; @Component({ encapsulation: ViewEncapsulation.None, providers: [SignalRService, FloatingPanesService], selector: 'app-finjs-dock-manager', templateUrl: './grid-finjs-dock-manager.component.html', styleUrls: ['./grid-finjs-dock-manager.component.scss'], - imports: [IgxSwitchComponent, FormsModule, IgxSelectComponent, IgxLabelDirective, IgxPrefixDirective, IgxIconComponent, NgFor, IgxSelectItemComponent, IgxButtonDirective, IgxOverlayOutletDirective, IgxGridComponent, IgxColumnComponent, IgxCellTemplateDirective, NgIf, IgxPaginatorComponent, GridHostDirective, AsyncPipe, CurrencyPipe], + imports: [IgxSwitchComponent, FormsModule, IgxSelectComponent, IgxLabelDirective, IgxPrefixDirective, IgxIconComponent, IgxSelectItemComponent, IgxButtonDirective, IgxOverlayOutletDirective, IgxGridComponent, IgxColumnComponent, IgxCellTemplateDirective, IgxPaginatorComponent, GridHostDirective, AsyncPipe, CurrencyPipe], schemas: [CUSTOM_ELEMENTS_SCHEMA] }) export class GridFinJSDockManagerComponent implements OnInit, OnDestroy, AfterViewInit, DoCheck { diff --git a/projects/app-lob/src/app/grid-finjs/controllers.component.html b/projects/app-lob/src/app/grid-finjs/controllers.component.html index 8fa7cbce74..4b3a0456a9 100644 --- a/projects/app-lob/src/app/grid-finjs/controllers.component.html +++ b/projects/app-lob/src/app/grid-finjs/controllers.component.html @@ -1,40 +1,46 @@ -
-
-
-
- Dark -
-
- - Grouped -
-
- Toolbar -
-
- - -
-
- - -
-
-
- -
-
-
- Feeding {{volume}} records every {{frequency / 1000}} sec. - {{volume}} records updated. - Feeding {{volume}} records every {{frequency / 1000}} sec. - ~{{volume/5}} records updated. -
- -
+
+
+
+ @if (isThemeSwitchVisible) { +
+ Dark +
+ } +
+ + Grouped +
+
+ Toolbar +
+
+ + +
+
+ + +
+
+
+ +
+
+
+ @if (buttonSelected === 1) { + Feeding {{volume}} records every {{frequency / 1000}} sec. + {{volume}} records updated. + } + @if (buttonSelected === 0) { + Feeding {{volume}} records every {{frequency / 1000}} sec. + ~{{volume/5}} records updated. + } +
+ +
diff --git a/projects/app-lob/src/app/grid-finjs/controllers.component.ts b/projects/app-lob/src/app/grid-finjs/controllers.component.ts index 4aa0020002..40ee594ee0 100644 --- a/projects/app-lob/src/app/grid-finjs/controllers.component.ts +++ b/projects/app-lob/src/app/grid-finjs/controllers.component.ts @@ -4,14 +4,14 @@ import { IButtonGroupEventArgs, IChangeCheckboxEventArgs, IgxButtonGroupComponen from 'igniteui-angular'; import { Observable, Subscription, timer } from 'rxjs'; import { debounce } from 'rxjs/operators'; -import { NgIf } from '@angular/common'; + import { FormsModule } from '@angular/forms'; @Component({ selector: 'app-finjs-controllers', styleUrls: ['./controllers.component.scss'], templateUrl: './controllers.component.html', - imports: [NgIf, IgxSwitchComponent, FormsModule, IgxSliderComponent, IgxButtonGroupComponent, IgxToastComponent] + imports: [IgxSwitchComponent, FormsModule, IgxSliderComponent, IgxButtonGroupComponent, IgxToastComponent] }) export class ControllerComponent implements OnInit, OnDestroy { @ViewChild('buttonGroup1', { static: true }) public playButtons: IgxButtonGroupComponent; diff --git a/projects/app-lob/src/app/grid-finjs/grid-finjs.component.html b/projects/app-lob/src/app/grid-finjs/grid-finjs.component.html index 189321d008..7bcaa33c2b 100644 --- a/projects/app-lob/src/app/grid-finjs/grid-finjs.component.html +++ b/projects/app-lob/src/app/grid-finjs/grid-finjs.component.html @@ -1,136 +1,146 @@ -
- - - - - - - - Export to Excel - - - - - - - - - - - - - - - {{ c }} - - - - - - - - - {{ r.Name }} - - - - - - - -
- {{cell.value | currency:'USD':'symbol':'1.4-4'}} - trending_up - trending_down -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- -
-
+
+ + + @if (showToolbar) { + + + + + + Export to Excel + + + + } + + + + + + + + + + + + @for (c of contracts; track c) { + {{ c }} + } + + + + + + + + + @for (r of regions; track r) { + {{ r.Name }} + } + + + + + + + +
+ {{cell.value | currency:'USD':'symbol':'1.4-4'}} + @if (trends.positive(cell.row.data)) { + trending_up + } + @if (trends.negative(cell.row.data)) { + trending_down + } +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ +
+
diff --git a/projects/app-lob/src/app/grid-finjs/grid-finjs.component.ts b/projects/app-lob/src/app/grid-finjs/grid-finjs.component.ts index 6ba7f53186..87de5e102b 100644 --- a/projects/app-lob/src/app/grid-finjs/grid-finjs.component.ts +++ b/projects/app-lob/src/app/grid-finjs/grid-finjs.component.ts @@ -1,5 +1,5 @@ /* eslint-disable max-len */ -import { DOCUMENT, NgIf, NgFor, AsyncPipe, CurrencyPipe } from '@angular/common'; +import { DOCUMENT, AsyncPipe, CurrencyPipe } from '@angular/common'; import { Component, ElementRef, EventEmitter, Inject, OnInit, Output, ViewChild } from '@angular/core'; import { CellType, DefaultSortingStrategy, GridSelectionMode, IGridKeydownEventArgs, IgxGridComponent, IgxOverlayOutletDirective, IRowSelectionEventArgs, OverlaySettings, SortingDirection, IgxGridToolbarComponent, IgxGridToolbarActionsComponent, IgxGridToolbarHidingComponent, IgxGridToolbarPinningComponent, IgxGridToolbarExporterComponent, IgxExcelTextDirective, IgxColumnComponent, IgxCellEditorTemplateDirective, IgxSelectComponent, IgxFocusDirective, IgxSelectItemComponent, IgxCellTemplateDirective, IgxIconComponent, IgxIconButtonDirective } from 'igniteui-angular'; import { BehaviorSubject } from 'rxjs'; @@ -12,7 +12,7 @@ import { FormsModule } from '@angular/forms'; selector: 'app-finjs-grid', templateUrl: './grid-finjs.component.html', styleUrls: ['./grid-finjs.component.scss'], - imports: [IgxGridComponent, IgxPreventDocumentScrollDirective, NgIf, IgxGridToolbarComponent, IgxGridToolbarActionsComponent, IgxGridToolbarHidingComponent, IgxGridToolbarPinningComponent, IgxGridToolbarExporterComponent, IgxExcelTextDirective, IgxColumnComponent, IgxCellEditorTemplateDirective, IgxSelectComponent, FormsModule, IgxFocusDirective, NgFor, IgxSelectItemComponent, IgxCellTemplateDirective, IgxIconComponent, IgxIconButtonDirective, IgxOverlayOutletDirective, AsyncPipe, CurrencyPipe] + imports: [IgxGridComponent, IgxPreventDocumentScrollDirective, IgxGridToolbarComponent, IgxGridToolbarActionsComponent, IgxGridToolbarHidingComponent, IgxGridToolbarPinningComponent, IgxGridToolbarExporterComponent, IgxExcelTextDirective, IgxColumnComponent, IgxCellEditorTemplateDirective, IgxSelectComponent, FormsModule, IgxFocusDirective, IgxSelectItemComponent, IgxCellTemplateDirective, IgxIconComponent, IgxIconButtonDirective, IgxOverlayOutletDirective, AsyncPipe, CurrencyPipe] }) export class GridFinJSComponent implements OnInit { @ViewChild('grid1', { static: true }) public grid: IgxGridComponent; diff --git a/projects/app-lob/src/app/grid/grid-boston-marathon/grid.component.html b/projects/app-lob/src/app/grid/grid-boston-marathon/grid.component.html index 4f4c2fa06e..13dd4ddf4a 100644 --- a/projects/app-lob/src/app/grid/grid-boston-marathon/grid.component.html +++ b/projects/app-lob/src/app/grid/grid-boston-marathon/grid.component.html @@ -1,123 +1,131 @@
-
-
-
Boston Marathon {{ currentYear }}
- Live - +
+
+
Boston Marathon {{ currentYear }}
+ Live + +
+ + + +
+
+ + + + +
+
{{ grid1.page * grid1.perPage + cell.row.index + 1 }}
+ @if (isTop3(cell)) { + @if (cell.row.index === 0) { + + First place Trophy image + + } + @if (cell.row.index === 1) { + + Second place Trophy image + + } + @if (cell.row.index === 2) { + + Third place Trophy image + + } + }
- - - -
-
- - - - -
-
{{ grid1.page * grid1.perPage + cell.row.index + 1 }}
- - - First place Trophy image - - - Second place Trophy image - - - Third place Trophy image - - -
- - + + - - -
- {{ cell.value }} - -
+ + +
+ {{ cell.value }} + @if (live) { + + } +
- - + + - - - - - - + + + + + + - - -
- -
- - - - + + +
+ +
+ + + + - - -
- {{ val | number: '1.1-5' }} -
- - + + +
+ {{ val | number: '1.1-5' }} +
+ + - - -
- - - -
- - + + +
+ + + +
+ + - - - + + + -
-
-
-
- - First place Trophy image - Winner - First place Trophy image - -
-
-
- -

{{ winner.Name }}

-
-
-
-
+
+
+
+
+ + First place Trophy image + Winner + First place Trophy image + +
+
+
+ +

{{ winner.Name }}

+
+
+
+
-
-
-
- Finish -
-
- -
-
- {{i + 1}} - First place Trophy image -
- -

{{ player.Name }}

-
- -
+
+
+
+ Finish +
+
+ @for (player of top3; track player; let i = $index) { +
+
+ {{i + 1}} + First place Trophy image
-
+ +

{{ player.Name }}

+
+ } +
+
+
diff --git a/projects/app-lob/src/app/grid/grid-boston-marathon/grid.component.ts b/projects/app-lob/src/app/grid/grid-boston-marathon/grid.component.ts index c18e2df0c0..7775c8ffa8 100644 --- a/projects/app-lob/src/app/grid/grid-boston-marathon/grid.component.ts +++ b/projects/app-lob/src/app/grid/grid-boston-marathon/grid.component.ts @@ -12,14 +12,14 @@ import { IgxGridComponent, IgxNumberSummaryOperand, IgxStringFilteringOperand, I import { Athlete, АthletesData, SpeedDescriptor } from '../../data/athletesData'; import { FormsModule } from '@angular/forms'; import { IgxPreventDocumentScrollDirective } from '../../../../../../src/app/directives/prevent-scroll.directive'; -import { NgIf, NgClass, NgFor, DecimalPipe } from '@angular/common'; +import { NgClass, DecimalPipe } from '@angular/common'; import { IgxSparklineCoreModule } from 'igniteui-angular-charts'; @Component({ selector: 'app-grid', styleUrls: ['./grid.component.scss'], templateUrl: './grid.component.html', - imports: [IgxSwitchComponent, FormsModule, IgxInputGroupComponent, IgxInputDirective, IgxGridComponent, IgxPreventDocumentScrollDirective, IgxPaginatorComponent, IgxColumnComponent, IgxCellTemplateDirective, NgIf, IgxAvatarComponent, IgxBadgeComponent, IgxSparklineCoreModule, IgxCircularProgressBarComponent, NgClass, NgFor, DecimalPipe] + imports: [IgxSwitchComponent, FormsModule, IgxInputGroupComponent, IgxInputDirective, IgxGridComponent, IgxPreventDocumentScrollDirective, IgxPaginatorComponent, IgxColumnComponent, IgxCellTemplateDirective, IgxAvatarComponent, IgxBadgeComponent, IgxSparklineCoreModule, IgxCircularProgressBarComponent, NgClass, DecimalPipe] }) export class GridComponent implements OnInit, OnDestroy, AfterViewInit { diff --git a/projects/app-lob/src/app/index/index.component.html b/projects/app-lob/src/app/index/index.component.html index a20a765297..f32574bef1 100644 --- a/projects/app-lob/src/app/index/index.component.html +++ b/projects/app-lob/src/app/index/index.component.html @@ -1,55 +1,61 @@
- - - + + -
- -
- -
+
+ +
+
+
diff --git a/projects/app-lob/src/app/index/index.component.ts b/projects/app-lob/src/app/index/index.component.ts index 3462151c07..d1c8c38452 100644 --- a/projects/app-lob/src/app/index/index.component.ts +++ b/projects/app-lob/src/app/index/index.component.ts @@ -11,13 +11,13 @@ import { hierarchicalGridRoutesData } from '../hierarchical-grid/hierarchical-gr import { treeGridRoutesData } from '../tree-grid/tree-grid-routes-data'; import { treegridfinjsRoutesData } from '../treegrid-finjs/treegrid-finjs-routes-data'; import { FormsModule } from '@angular/forms'; -import { NgIf, NgFor } from '@angular/common'; + @Component({ selector: 'app-index', styleUrls: ['./index.component.scss'], templateUrl: './index.component.html', - imports: [IgxLayoutDirective, IgxNavigationDrawerComponent, IgxNavDrawerTemplateDirective, IgxNavDrawerItemDirective, IgxRippleDirective, RouterLinkActive, RouterLink, IgxIconButtonDirective, IgxIconComponent, IgxInputGroupComponent, IgxPrefixDirective, FormsModule, IgxInputDirective, NgIf, IgxSuffixDirective, NgFor, IgxFlexDirective, IgxNavbarComponent, RouterOutlet] + imports: [IgxLayoutDirective, IgxNavigationDrawerComponent, IgxNavDrawerTemplateDirective, IgxNavDrawerItemDirective, IgxRippleDirective, RouterLinkActive, RouterLink, IgxIconButtonDirective, IgxIconComponent, IgxInputGroupComponent, IgxPrefixDirective, FormsModule, IgxInputDirective, IgxSuffixDirective, IgxFlexDirective, IgxNavbarComponent, RouterOutlet] }) export class IndexComponent implements OnInit, AfterViewInit { diff --git a/projects/app-lob/src/app/treegrid-finjs/tree-grid-finjs-sample.component.html b/projects/app-lob/src/app/treegrid-finjs/tree-grid-finjs-sample.component.html index 2dd59f4db9..3a13e6d341 100644 --- a/projects/app-lob/src/app/treegrid-finjs/tree-grid-finjs-sample.component.html +++ b/projects/app-lob/src/app/treegrid-finjs/tree-grid-finjs-sample.component.html @@ -1,124 +1,134 @@
-
+
+
+
+
+
+ + +
+
+ + +
-
-
-
- - -
-
- - -
-
-
- -
- +
+
-
- Feeding {{volume}} records every {{frequency / 1000}} sec. - ~{{volume/5}} records updated. -
- - - - - - - - - - - - +
+
+ @if (buttonSelected === 0) { + Feeding {{volume}} records every {{frequency / 1000}} sec. + ~{{volume/5}} records updated. + } +
+ + @if (showToolbar) { + + + + + + + + } + + + + + - - - - - - - - - - - - - - {{ r.Name }} - - - - - - {{ cell.value | date }} - - - - - -
- {{cell.value | currency:'USD':'symbol':'1.4-4'}} - trending_up - trending_down -
- - + + + + + + + + + + + + + + @for (r of regions; track r) { + {{ r.Name }} + } + + + + + + {{ cell.value | date }} + + + + + +
+ {{cell.value | currency:'USD':'symbol':'1.4-4'}} + @if (trends.positive(cell.row.data)) { + trending_up + } + @if (trends.negative(cell.row.data)) { + trending_down + } +
+ + - - + + - - + + - - - - - - - - - - - + + + + + + + + + + +
diff --git a/projects/app-lob/src/app/treegrid-finjs/tree-grid-finjs-sample.component.ts b/projects/app-lob/src/app/treegrid-finjs/tree-grid-finjs-sample.component.ts index 0a0ef7b626..dbbdef7932 100644 --- a/projects/app-lob/src/app/treegrid-finjs/tree-grid-finjs-sample.component.ts +++ b/projects/app-lob/src/app/treegrid-finjs/tree-grid-finjs-sample.component.ts @@ -3,7 +3,7 @@ import { AbsoluteScrollStrategy, ConnectedPositioningStrategy, DefaultSortingStr import { Contract, REGIONS } from '../data/financialData'; import { SignalRService } from '../services/signal-r.service'; import { FormsModule } from '@angular/forms'; -import { NgIf, NgFor, AsyncPipe, CurrencyPipe, DatePipe } from '@angular/common'; +import { AsyncPipe, CurrencyPipe, DatePipe } from '@angular/common'; import { IgxPreventDocumentScrollDirective } from '../../../../../src/app/directives/prevent-scroll.directive'; @Component({ @@ -11,7 +11,7 @@ import { IgxPreventDocumentScrollDirective } from '../../../../../src/app/direct selector: 'app-tree-grid-finjs-sample', styleUrls: ['./tree-grid-finjs-sample.component.scss'], templateUrl: './tree-grid-finjs-sample.component.html', - imports: [IgxSliderComponent, FormsModule, IgxButtonGroupComponent, NgIf, IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxGridToolbarComponent, IgxGridToolbarActionsComponent, IgxGridToolbarPinningComponent, IgxGridToolbarHidingComponent, IgxGridToolbarExporterComponent, IgxTreeGridGroupByAreaComponent, IgxColumnComponent, IgxCellEditorTemplateDirective, IgxSelectComponent, IgxFocusDirective, NgFor, IgxSelectItemComponent, IgxCellTemplateDirective, IgxIconComponent, IgxOverlayOutletDirective, AsyncPipe, CurrencyPipe, DatePipe, IgxTreeGridGroupingPipe] + imports: [IgxSliderComponent, FormsModule, IgxButtonGroupComponent, IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxGridToolbarComponent, IgxGridToolbarActionsComponent, IgxGridToolbarPinningComponent, IgxGridToolbarHidingComponent, IgxGridToolbarExporterComponent, IgxTreeGridGroupByAreaComponent, IgxColumnComponent, IgxCellEditorTemplateDirective, IgxSelectComponent, IgxFocusDirective, IgxSelectItemComponent, IgxCellTemplateDirective, IgxIconComponent, IgxOverlayOutletDirective, AsyncPipe, CurrencyPipe, DatePipe, IgxTreeGridGroupingPipe] }) export class TreeGridFinJSComponent implements OnDestroy, OnInit { diff --git a/src/app/data-display/badge/badge-sample-3/badge-sample-3.component.html b/src/app/data-display/badge/badge-sample-3/badge-sample-3.component.html index fbcd79a420..36c6a560c2 100644 --- a/src/app/data-display/badge/badge-sample-3/badge-sample-3.component.html +++ b/src/app/data-display/badge/badge-sample-3/badge-sample-3.component.html @@ -2,15 +2,17 @@ Team Members (4) - -
-
- - + @for (member of members; track member) { + +
+
+ + +
+
+ {{ member.name }} +
-
- {{ member.name }} -
-
- + + } diff --git a/src/app/data-display/badge/badge-sample-3/badge-sample-3.component.ts b/src/app/data-display/badge/badge-sample-3/badge-sample-3.component.ts index 7f9a2f69b2..4488167b83 100644 --- a/src/app/data-display/badge/badge-sample-3/badge-sample-3.component.ts +++ b/src/app/data-display/badge/badge-sample-3/badge-sample-3.component.ts @@ -1,13 +1,13 @@ import { Component } from '@angular/core'; import { Member } from '../model/member.model'; import { IgxListComponent, IgxListItemComponent, IgxAvatarComponent, IgxBadgeComponent } from 'igniteui-angular'; -import { NgFor } from '@angular/common'; + @Component({ selector: 'app-badge-sample-3', styleUrls: ['./badge-sample-3.component.scss'], templateUrl: './badge-sample-3.component.html', - imports: [IgxListComponent, IgxListItemComponent, NgFor, IgxAvatarComponent, IgxBadgeComponent] + imports: [IgxListComponent, IgxListItemComponent, IgxAvatarComponent, IgxBadgeComponent] }) export class BadgeSample3Component { public members: Member[] = [ diff --git a/src/app/data-display/badge/badge-styling-sample/badge-styling-sample.component.html b/src/app/data-display/badge/badge-styling-sample/badge-styling-sample.component.html index 47beae37f2..36c6a560c2 100644 --- a/src/app/data-display/badge/badge-styling-sample/badge-styling-sample.component.html +++ b/src/app/data-display/badge/badge-styling-sample/badge-styling-sample.component.html @@ -1,16 +1,18 @@ - - Team Members (4) - - -
-
- - -
-
- {{ member.name }} -
+ + Team Members (4) + + @for (member of members; track member) { + +
+
+ + +
+
+ {{ member.name }}
+
+ } diff --git a/src/app/data-display/badge/badge-styling-sample/badge-styling-sample.component.ts b/src/app/data-display/badge/badge-styling-sample/badge-styling-sample.component.ts index be2204a4ce..6931c02ec9 100644 --- a/src/app/data-display/badge/badge-styling-sample/badge-styling-sample.component.ts +++ b/src/app/data-display/badge/badge-styling-sample/badge-styling-sample.component.ts @@ -1,13 +1,13 @@ import { Component } from '@angular/core'; import { Member } from '../model/member.model'; import { IgxListComponent, IgxListItemComponent, IgxAvatarComponent, IgxBadgeComponent } from 'igniteui-angular'; -import { NgFor } from '@angular/common'; + @Component({ selector: 'app-badge-styling-sample', styleUrls: ['./badge-styling-sample.component.scss'], templateUrl: './badge-styling-sample.component.html', - imports: [IgxListComponent, IgxListItemComponent, NgFor, IgxAvatarComponent, IgxBadgeComponent] + imports: [IgxListComponent, IgxListItemComponent, IgxAvatarComponent, IgxBadgeComponent] }) export class BadgeStylingSampleComponent { public members: Member[] = [ diff --git a/src/app/data-display/chip/chip-area-sample/chip-area-sample.component.html b/src/app/data-display/chip/chip-area-sample/chip-area-sample.component.html index 71c088f739..8cb74d3079 100644 --- a/src/app/data-display/chip/chip-area-sample/chip-area-sample.component.html +++ b/src/app/data-display/chip/chip-area-sample/chip-area-sample.component.html @@ -1,7 +1,7 @@
- - + @for (chip of chipList; track chip) { + - - {{chip.name}} - - + + {{chip.name}} + + } +
- check_circle + check_circle - delete + delete diff --git a/src/app/data-display/chip/chip-area-sample/chip-area-sample.component.ts b/src/app/data-display/chip/chip-area-sample/chip-area-sample.component.ts index 2e239d7e6c..d9cf214e59 100644 --- a/src/app/data-display/chip/chip-area-sample/chip-area-sample.component.ts +++ b/src/app/data-display/chip/chip-area-sample/chip-area-sample.component.ts @@ -1,12 +1,12 @@ import { ChangeDetectorRef, Component } from '@angular/core'; import { IBaseChipEventArgs, IChipsAreaReorderEventArgs, IgxChipsAreaComponent, IgxChipComponent, IgxAvatarComponent, IgxPrefixDirective, IgxIconComponent } from 'igniteui-angular'; -import { NgFor } from '@angular/common'; + @Component({ selector: 'app-chip-area-sample', styleUrls: ['./chip-area-sample.component.scss'], templateUrl: './chip-area-sample.component.html', - imports: [IgxChipsAreaComponent, NgFor, IgxChipComponent, IgxAvatarComponent, IgxPrefixDirective, IgxIconComponent] + imports: [IgxChipsAreaComponent, IgxChipComponent, IgxAvatarComponent, IgxPrefixDirective, IgxIconComponent] }) export class ChipAreaSampleComponent { diff --git a/src/app/data-display/chip/chip-simple/chip-simple.component.html b/src/app/data-display/chip/chip-simple/chip-simple.component.html index 0c22261d29..47ce50e55d 100644 --- a/src/app/data-display/chip/chip-simple/chip-simple.component.html +++ b/src/app/data-display/chip/chip-simple/chip-simple.component.html @@ -1,12 +1,13 @@
+ @for (chip of chipList; track chip) { - {{chip.icon}} - {{chip.text}} + [id]="chip.id" + [selectable]="true" + [removable]="true" + (remove)="chipRemoved($event)" + > + {{chip.icon}} + {{chip.text}} + }
diff --git a/src/app/data-display/chip/chip-simple/chip-simple.component.ts b/src/app/data-display/chip/chip-simple/chip-simple.component.ts index b952b7271d..dbff2e77ad 100644 --- a/src/app/data-display/chip/chip-simple/chip-simple.component.ts +++ b/src/app/data-display/chip/chip-simple/chip-simple.component.ts @@ -1,12 +1,12 @@ import { ChangeDetectorRef, Component } from '@angular/core'; import { IBaseChipEventArgs, IgxChipComponent, IgxIconComponent, IgxPrefixDirective } from 'igniteui-angular'; -import { NgFor } from '@angular/common'; + @Component({ selector: 'app-chip-simple', styleUrls: ['./chip-simple.component.scss'], templateUrl: './chip-simple.component.html', - imports: [NgFor, IgxChipComponent, IgxIconComponent, IgxPrefixDirective] + imports: [IgxChipComponent, IgxIconComponent, IgxPrefixDirective] }) export class ChipSimpleComponent { diff --git a/src/app/data-display/chip/chip-styling/chip-styling.component.html b/src/app/data-display/chip/chip-styling/chip-styling.component.html index 13090f2e0c..7f46d62b8d 100644 --- a/src/app/data-display/chip/chip-styling/chip-styling.component.html +++ b/src/app/data-display/chip/chip-styling/chip-styling.component.html @@ -1,22 +1,23 @@ + @for (chip of chipList; track chip) { - {{chip.icon}} - {{chip.text}} + [id]="chip.id" + [selectable]="true" + [selectIcon]="mySelectIcon" + [removable]="true" + [removeIcon]="myRemoveIcon" + (remove)="chipRemoved($event)" + [draggable]="true"> + {{chip.icon}} + {{chip.text}} + } - check_circle + check_circle - delete + delete diff --git a/src/app/data-display/chip/chip-styling/chip-styling.component.ts b/src/app/data-display/chip/chip-styling/chip-styling.component.ts index 90b8ee8b2a..c41ff46e9e 100644 --- a/src/app/data-display/chip/chip-styling/chip-styling.component.ts +++ b/src/app/data-display/chip/chip-styling/chip-styling.component.ts @@ -1,12 +1,12 @@ import { ChangeDetectorRef, Component } from '@angular/core'; import { IBaseChipEventArgs, IChipsAreaReorderEventArgs, IgxChipsAreaComponent, IgxChipComponent, IgxIconComponent, IgxPrefixDirective } from 'igniteui-angular'; -import { NgFor } from '@angular/common'; + @Component({ selector: 'app-chip', styleUrls: ['./chip-styling.component.scss'], templateUrl: './chip-styling.component.html', - imports: [IgxChipsAreaComponent, NgFor, IgxChipComponent, IgxIconComponent, IgxPrefixDirective] + imports: [IgxChipsAreaComponent, IgxChipComponent, IgxIconComponent, IgxPrefixDirective] }) export class ChipStylingSampleComponent { diff --git a/src/app/data-display/icon/material-icons-extended/material-icons-extended.component.html b/src/app/data-display/icon/material-icons-extended/material-icons-extended.component.html index 1721fa454a..8b4f41c5ee 100644 --- a/src/app/data-display/icon/material-icons-extended/material-icons-extended.component.html +++ b/src/app/data-display/icon/material-icons-extended/material-icons-extended.component.html @@ -1,93 +1,101 @@
-
-
- +
+ + + @for (option of categories; track option) { + - - - {{ option.text }} - - -
- - - - search - - - clear - - + {{ option.text }} + + } +
-
- -
-
- {{ group.category }} -
-
-
-
-
+
+ @if ((allIcons | filterByName: input.value | categoriesFilter: selectedCategory); as fResults) { + @for (group of fResults; track group) { +
+
+ {{ group.category }} +
+
+
+ @for (icon of group.icons; track icon) { +
+ -
- - {{ icon.name }} -
- - -
+ (click)="copyValue($event, icon.name)" + class="sample__grid-item-clipboard" + > + content_copy + +
+ + {{ icon.name }}
-
-
-
- - No results - {{selectedCategory !== 'all' && fResults.length !== -1 ? ' in category: ' : 'found' }} - {{ selectedCategory }} - - -
- + +
+ } +
+
+
+ } +
+ + No results + {{selectedCategory !== 'all' && fResults.length !== -1 ? ' in category: ' : 'found' }} + @if (selectedCategory !== 'all' && fResults.length !== -1) { + {{ selectedCategory }} + } + + @if (selectedCategory !== 'all' && fResults.length !== -1) { + + } +
+ }
-
+
diff --git a/src/app/data-display/icon/material-icons-extended/material-icons-extended.component.ts b/src/app/data-display/icon/material-icons-extended/material-icons-extended.component.ts index 42bb176ea6..a74c9cc885 100644 --- a/src/app/data-display/icon/material-icons-extended/material-icons-extended.component.ts +++ b/src/app/data-display/icon/material-icons-extended/material-icons-extended.component.ts @@ -1,7 +1,7 @@ /* eslint-disable @typescript-eslint/member-ordering */ import { Component, Inject, OnInit, Pipe, PipeTransform, Renderer2, forwardRef } from '@angular/core'; import * as fileSaver from 'file-saver'; -import { DOCUMENT, NgFor, NgIf } from '@angular/common'; +import { DOCUMENT } from '@angular/common'; import { IgxIconService, ISelectionEventArgs, IgxSelectComponent, IgxLabelDirective, IgxSelectItemComponent, IgxInputGroupComponent, IgxInputDirective, IgxPrefixDirective, IgxIconComponent, IgxSuffixDirective, IgxButtonDirective } from 'igniteui-angular'; import { @@ -19,7 +19,7 @@ interface ICategoryOption { selector: 'app-material-icons-extended', templateUrl: './material-icons-extended.component.html', styleUrls: ['./material-icons-extended.component.scss'], - imports: [IgxSelectComponent, IgxLabelDirective, NgFor, IgxSelectItemComponent, IgxInputGroupComponent, IgxInputDirective, IgxPrefixDirective, IgxIconComponent, NgIf, IgxSuffixDirective, IgxButtonDirective, forwardRef(() => CategoriesFilterPipe), forwardRef(() => FilterByName)] + imports: [IgxSelectComponent, IgxLabelDirective, IgxSelectItemComponent, IgxInputGroupComponent, IgxInputDirective, IgxPrefixDirective, IgxIconComponent, IgxSuffixDirective, IgxButtonDirective, forwardRef(() => CategoriesFilterPipe), forwardRef(() => FilterByName)] }) export class MaterialIconsExtendedComponent implements OnInit { constructor( diff --git a/src/app/data-display/igxFor/igxFor-horizontal-sample/igxFor-horizontal.component.html b/src/app/data-display/igxFor/igxFor-horizontal-sample/igxFor-horizontal.component.html index 4a18ac04ee..97cae010f4 100644 --- a/src/app/data-display/igxFor/igxFor-horizontal-sample/igxFor-horizontal.component.html +++ b/src/app/data-display/igxFor/igxFor-horizontal-sample/igxFor-horizontal.component.html @@ -1,36 +1,38 @@
- + - search + search - + @if (searchBar.value.length > 0) { + clear - - + + } + -
+
- Contacts: {{(data | igxFilter: fo).length}} -
- -
-
- -
- {{item.name}} -
-
-
- -
+ Contacts: {{(data | igxFilter: fo).length}} +
+ +
+
+ +
+ {{item.name}} +
+
+
+ +
-
+
diff --git a/src/app/data-display/igxFor/igxFor-horizontal-sample/igxFor-horizontal.component.ts b/src/app/data-display/igxFor/igxFor-horizontal-sample/igxFor-horizontal.component.ts index 25fed2073f..e7702a1045 100644 --- a/src/app/data-display/igxFor/igxFor-horizontal-sample/igxFor-horizontal.component.ts +++ b/src/app/data-display/igxFor/igxFor-horizontal-sample/igxFor-horizontal.component.ts @@ -2,13 +2,13 @@ import { Component, OnInit } from '@angular/core'; import { IgxFilterOptions, IgxInputGroupComponent, IgxInputDirective, IgxPrefixDirective, IgxIconComponent, IgxSuffixDirective, IgxListComponent, IgxListItemComponent, IgxForOfDirective, IgxAvatarComponent, IgxFilterPipe } from 'igniteui-angular'; import { femaleFNames, lastName, maleFNames } from '../names'; import { FormsModule } from '@angular/forms'; -import { NgIf } from '@angular/common'; + @Component({ selector: 'app-igx-for-horizontal', styleUrls: ['./igxFor-horizontal.component.scss'], templateUrl: './igxFor-horizontal.component.html', - imports: [IgxInputGroupComponent, FormsModule, IgxInputDirective, IgxPrefixDirective, IgxIconComponent, NgIf, IgxSuffixDirective, IgxListComponent, IgxListItemComponent, IgxForOfDirective, IgxAvatarComponent, IgxFilterPipe] + imports: [IgxInputGroupComponent, FormsModule, IgxInputDirective, IgxPrefixDirective, IgxIconComponent, IgxSuffixDirective, IgxListComponent, IgxListItemComponent, IgxForOfDirective, IgxAvatarComponent, IgxFilterPipe] }) export class IgxForHorizontalComponent implements OnInit { public search: string; diff --git a/src/app/data-display/igxFor/igxFor.component.html b/src/app/data-display/igxFor/igxFor.component.html index 36e16cf643..45dd5b293b 100644 --- a/src/app/data-display/igxFor/igxFor.component.html +++ b/src/app/data-display/igxFor/igxFor.component.html @@ -1,28 +1,30 @@ - - - search - - - clear + + + search + + @if (searchBar.value.length > 0) { + + clear + }
- - Contacts: {{(data | igxFilter: fo).length}} -
- - - {{ item.name }} - star - -
- + + Contacts: {{(data | igxFilter: fo).length}} +
+ + + {{ item.name }} + star + +
+
diff --git a/src/app/data-display/igxFor/igxFor.component.ts b/src/app/data-display/igxFor/igxFor.component.ts index a29d523776..520e4a020b 100644 --- a/src/app/data-display/igxFor/igxFor.component.ts +++ b/src/app/data-display/igxFor/igxFor.component.ts @@ -2,13 +2,13 @@ import { Component, OnInit } from '@angular/core'; import { IgxFilterOptions, IgxInputGroupComponent, IgxInputDirective, IgxPrefixDirective, IgxIconComponent, IgxSuffixDirective, IgxListComponent, IgxListItemComponent, IgxForOfDirective, IgxRippleDirective, IgxAvatarComponent, IgxListThumbnailDirective, IgxListLineTitleDirective, IgxListActionDirective, IgxFilterPipe } from 'igniteui-angular'; import { femaleFNames, lastName, maleFNames, middleNames } from './names'; import { FormsModule } from '@angular/forms'; -import { NgIf } from '@angular/common'; + @Component({ selector: 'app-igx-for-list', styleUrls: ['./igxFor.component.scss'], templateUrl: './igxFor.component.html', - imports: [IgxInputGroupComponent, FormsModule, IgxInputDirective, IgxPrefixDirective, IgxIconComponent, NgIf, IgxSuffixDirective, IgxListComponent, IgxListItemComponent, IgxForOfDirective, IgxRippleDirective, IgxAvatarComponent, IgxListThumbnailDirective, IgxListLineTitleDirective, IgxListActionDirective, IgxFilterPipe] + imports: [IgxInputGroupComponent, FormsModule, IgxInputDirective, IgxPrefixDirective, IgxIconComponent, IgxSuffixDirective, IgxListComponent, IgxListItemComponent, IgxForOfDirective, IgxRippleDirective, IgxAvatarComponent, IgxListThumbnailDirective, IgxListLineTitleDirective, IgxListActionDirective, IgxFilterPipe] }) export class IgxForComponent implements OnInit { public search: string; diff --git a/src/app/data-display/mask/mask-sample-3/mask-sample-3.component.html b/src/app/data-display/mask/mask-sample-3/mask-sample-3.component.html index 8bee2cd9be..001ce26750 100644 --- a/src/app/data-display/mask/mask-sample-3/mask-sample-3.component.html +++ b/src/app/data-display/mask/mask-sample-3/mask-sample-3.component.html @@ -1,15 +1,17 @@ - Include Literals + Include Literals - - - -

Value: {{ socialSecurityNumber }}

+ + + + @if (socialSecurityNumber.length > 0) { +

Value: {{ socialSecurityNumber }}

+ } diff --git a/src/app/data-display/mask/mask-sample-3/mask-sample-3.component.ts b/src/app/data-display/mask/mask-sample-3/mask-sample-3.component.ts index 258b7cbb24..a200cddcf7 100644 --- a/src/app/data-display/mask/mask-sample-3/mask-sample-3.component.ts +++ b/src/app/data-display/mask/mask-sample-3/mask-sample-3.component.ts @@ -1,13 +1,13 @@ import { Component } from '@angular/core'; import { IgxSwitchComponent, IgxInputGroupComponent, IgxLabelDirective, IgxInputDirective, IgxMaskDirective } from 'igniteui-angular'; import { FormsModule } from '@angular/forms'; -import { NgIf } from '@angular/common'; + @Component({ selector: 'app-mask-sample-3', styleUrls: ['./mask-sample-3.component.scss'], templateUrl: './mask-sample-3.component.html', - imports: [IgxSwitchComponent, FormsModule, IgxInputGroupComponent, IgxLabelDirective, IgxInputDirective, IgxMaskDirective, NgIf] + imports: [IgxSwitchComponent, FormsModule, IgxInputGroupComponent, IgxLabelDirective, IgxInputDirective, IgxMaskDirective] }) export class MaskSample3Component { public socialSecurityNumber = '123-45-6789'; diff --git a/src/app/data-display/text-highlight/text-highlight-sample-1/text-highlight-sample-1.component.html b/src/app/data-display/text-highlight/text-highlight-sample-1/text-highlight-sample-1.component.html index 2bb76a9464..2fc9d5916c 100644 --- a/src/app/data-display/text-highlight/text-highlight-sample-1/text-highlight-sample-1.component.html +++ b/src/app/data-display/text-highlight/text-highlight-sample-1/text-highlight-sample-1.component.html @@ -1,44 +1,48 @@ - - search - clear - + + @if (searchText.length === 0) { + search + } + @if (searchText.length > 0) { + clear + } + - + -
- +
+ +
+ @if (searchText.length > 0) { + + @if (matchCount > 0) { + {{ index + 1 }} of {{ matchCount }} results + } + @if (matchCount === 0) { + No results + } + +
+ +
- - - - {{ index + 1 }} of {{ matchCount }} results - - - No results - - -
- - -
- + } - -
+ +
{{html}} -
+
diff --git a/src/app/data-display/text-highlight/text-highlight-sample-1/text-highlight-sample-1.component.ts b/src/app/data-display/text-highlight/text-highlight-sample-1/text-highlight-sample-1.component.ts index a7bbd8756e..5446086097 100644 --- a/src/app/data-display/text-highlight/text-highlight-sample-1/text-highlight-sample-1.component.ts +++ b/src/app/data-display/text-highlight/text-highlight-sample-1/text-highlight-sample-1.component.ts @@ -1,14 +1,14 @@ /* eslint-disable max-len */ import { Component, OnDestroy, ViewChild } from '@angular/core'; import { IgxTextHighlightDirective, IgxTextHighlightService, IgxInputGroupComponent, IgxPrefixDirective, IgxIconComponent, IgxInputDirective, IgxSuffixDirective, IgxIconButtonDirective, IgxRippleDirective } from 'igniteui-angular'; -import { NgIf } from '@angular/common'; + import { FormsModule } from '@angular/forms'; @Component({ selector: 'app-text-highlight-1', styleUrls: ['./text-highlight-sample-1.component.scss'], templateUrl: './text-highlight-sample-1.component.html', - imports: [IgxInputGroupComponent, IgxPrefixDirective, NgIf, IgxIconComponent, FormsModule, IgxInputDirective, IgxSuffixDirective, IgxIconButtonDirective, IgxRippleDirective, IgxTextHighlightDirective] + imports: [IgxInputGroupComponent, IgxPrefixDirective, IgxIconComponent, FormsModule, IgxInputDirective, IgxSuffixDirective, IgxIconButtonDirective, IgxRippleDirective, IgxTextHighlightDirective] }) export class TextHighlightSample1Component implements OnDestroy { @ViewChild(IgxTextHighlightDirective, { read: IgxTextHighlightDirective, static: true }) diff --git a/src/app/data-display/text-highlight/text-highlight-sample-2/text-highlight-sample-2.component.html b/src/app/data-display/text-highlight/text-highlight-sample-2/text-highlight-sample-2.component.html index 7f2f6892e1..8e6e0b9a3e 100644 --- a/src/app/data-display/text-highlight/text-highlight-sample-2/text-highlight-sample-2.component.html +++ b/src/app/data-display/text-highlight/text-highlight-sample-2/text-highlight-sample-2.component.html @@ -1,55 +1,59 @@
- + - - search - clear - + + @if (searchText.length === 0) { + search + } + @if (searchText.length > 0) { + clear + } + - + - -
- -
- - - - {{ index + 1 }} of {{ matchCount }} results - - - No results - - - -
- - -
- + +
+ +
+ @if (searchText.length > 0) { + + @if (matchCount > 0) { + {{ index + 1 }} of {{ matchCount }} results + } + @if (matchCount === 0) { + No results + } + + } +
+ + +
+ -
-
+
+
{{firstParagraph}} -
-
+
+
{{secondParagraph}} -
+
diff --git a/src/app/data-display/text-highlight/text-highlight-sample-2/text-highlight-sample-2.component.ts b/src/app/data-display/text-highlight/text-highlight-sample-2/text-highlight-sample-2.component.ts index a4f3cf290a..3be007930f 100644 --- a/src/app/data-display/text-highlight/text-highlight-sample-2/text-highlight-sample-2.component.ts +++ b/src/app/data-display/text-highlight/text-highlight-sample-2/text-highlight-sample-2.component.ts @@ -1,14 +1,14 @@ /* eslint-disable max-len */ import { Component, OnDestroy, ViewChildren } from '@angular/core'; import { IgxTextHighlightDirective, IgxTextHighlightService, IgxInputGroupComponent, IgxPrefixDirective, IgxIconComponent, IgxInputDirective, IgxSuffixDirective, IgxIconButtonDirective, IgxRippleDirective } from 'igniteui-angular'; -import { NgIf } from '@angular/common'; + import { FormsModule } from '@angular/forms'; @Component({ selector: 'app-text-highlight-2', styleUrls: ['./text-highlight-sample-2.component.scss'], templateUrl: './text-highlight-sample-2.component.html', - imports: [IgxInputGroupComponent, IgxPrefixDirective, NgIf, IgxIconComponent, FormsModule, IgxInputDirective, IgxSuffixDirective, IgxIconButtonDirective, IgxRippleDirective, IgxTextHighlightDirective] + imports: [IgxInputGroupComponent, IgxPrefixDirective, IgxIconComponent, FormsModule, IgxInputDirective, IgxSuffixDirective, IgxIconButtonDirective, IgxRippleDirective, IgxTextHighlightDirective] }) export class TextHighlightSample2Component implements OnDestroy { @ViewChildren(IgxTextHighlightDirective) diff --git a/src/app/data-display/text-highlight/text-highlight-style/text-highlight-style.component.html b/src/app/data-display/text-highlight/text-highlight-style/text-highlight-style.component.html index af6005b359..23d22d0c24 100644 --- a/src/app/data-display/text-highlight/text-highlight-style/text-highlight-style.component.html +++ b/src/app/data-display/text-highlight/text-highlight-style/text-highlight-style.component.html @@ -1,49 +1,53 @@
- - - search - clear - - - - - -
- -
- - - - {{ index + 1 }} of {{ matchCount }} results - - - No results - - - -
- - -
- + + + @if (searchText.length === 0) { + search + } + @if (searchText.length > 0) { + clear + } + + + + + +
+ +
+ @if (searchText.length > 0) { + + @if (matchCount > 0) { + {{ index + 1 }} of {{ matchCount }} results + } + @if (matchCount === 0) { + No results + } + + } +
+ + +
+ -
-
+
+
{{html}} -
-
\ No newline at end of file +
+
\ No newline at end of file diff --git a/src/app/data-display/text-highlight/text-highlight-style/text-highlight-style.component.ts b/src/app/data-display/text-highlight/text-highlight-style/text-highlight-style.component.ts index 41e9115541..23b9f20e99 100644 --- a/src/app/data-display/text-highlight/text-highlight-style/text-highlight-style.component.ts +++ b/src/app/data-display/text-highlight/text-highlight-style/text-highlight-style.component.ts @@ -1,14 +1,14 @@ /* eslint-disable max-len */ import { Component, OnDestroy, ViewChild } from '@angular/core'; import { IgxTextHighlightDirective, IgxTextHighlightService, IgxInputGroupComponent, IgxPrefixDirective, IgxIconComponent, IgxInputDirective, IgxSuffixDirective, IgxIconButtonDirective, IgxRippleDirective } from 'igniteui-angular'; -import { NgIf } from '@angular/common'; + import { FormsModule } from '@angular/forms'; @Component({ selector: 'app-text-highlight-style', styleUrls: ['./text-highlight-style.component.scss'], templateUrl: './text-highlight-style.component.html', - imports: [IgxInputGroupComponent, IgxPrefixDirective, NgIf, IgxIconComponent, FormsModule, IgxInputDirective, IgxSuffixDirective, IgxIconButtonDirective, IgxRippleDirective, IgxTextHighlightDirective] + imports: [IgxInputGroupComponent, IgxPrefixDirective, IgxIconComponent, FormsModule, IgxInputDirective, IgxSuffixDirective, IgxIconButtonDirective, IgxRippleDirective, IgxTextHighlightDirective] }) export class TextHighlightStyleComponent implements OnDestroy { @ViewChild(IgxTextHighlightDirective, { read: IgxTextHighlightDirective, static: true }) diff --git a/src/app/data-entries/autocomplete/autocomplete/autocomplete.component.html b/src/app/data-entries/autocomplete/autocomplete/autocomplete.component.html index 04153494f2..5a2bc254cc 100644 --- a/src/app/data-entries/autocomplete/autocomplete/autocomplete.component.html +++ b/src/app/data-entries/autocomplete/autocomplete/autocomplete.component.html @@ -1,12 +1,14 @@ - - Town + - - - + + + @for (town of towns | startsWith:townSelected; track town) { + {{town}} - - + + } + diff --git a/src/app/data-entries/autocomplete/autocomplete/autocomplete.component.ts b/src/app/data-entries/autocomplete/autocomplete/autocomplete.component.ts index f2501518b8..fecd11e561 100644 --- a/src/app/data-entries/autocomplete/autocomplete/autocomplete.component.ts +++ b/src/app/data-entries/autocomplete/autocomplete/autocomplete.component.ts @@ -1,13 +1,13 @@ import { Component, Pipe, PipeTransform, forwardRef } from '@angular/core'; import { IgxInputGroupComponent, IgxLabelDirective, IgxInputDirective, IgxAutocompleteDirective, IgxDropDownComponent, IgxDropDownItemComponent } from 'igniteui-angular'; import { FormsModule } from '@angular/forms'; -import { NgFor } from '@angular/common'; + @Component({ selector: 'app-autocomplete', styleUrls: ['./autocomplete.component.scss'], templateUrl: './autocomplete.component.html', - imports: [IgxInputGroupComponent, IgxLabelDirective, FormsModule, IgxInputDirective, IgxAutocompleteDirective, IgxDropDownComponent, NgFor, IgxDropDownItemComponent, forwardRef(() => AutocompletePipeStartsWith)] + imports: [IgxInputGroupComponent, IgxLabelDirective, FormsModule, IgxInputDirective, IgxAutocompleteDirective, IgxDropDownComponent, IgxDropDownItemComponent, forwardRef(() => AutocompletePipeStartsWith)] }) export class AutocompleteBasicComponent { public towns = []; diff --git a/src/app/data-entries/autocomplete/movie/movie.component.html b/src/app/data-entries/autocomplete/movie/movie.component.html index 34891ac58d..9473765b22 100644 --- a/src/app/data-entries/autocomplete/movie/movie.component.html +++ b/src/app/data-entries/autocomplete/movie/movie.component.html @@ -1,15 +1,19 @@ - - Cinema + - - - - + + + @for (town of towns; track town) { + + @for (cinema of town.cinemas | startsWith:cinemaSelected; track cinema) { + {{cinema}} - - - + + } + + } + diff --git a/src/app/data-entries/autocomplete/movie/movie.component.ts b/src/app/data-entries/autocomplete/movie/movie.component.ts index aa5102a314..59b0eb81e7 100644 --- a/src/app/data-entries/autocomplete/movie/movie.component.ts +++ b/src/app/data-entries/autocomplete/movie/movie.component.ts @@ -1,13 +1,13 @@ import { Component, Pipe, PipeTransform } from '@angular/core'; import { ConnectedPositioningStrategy, VerticalAlignment, IgxInputGroupComponent, IgxLabelDirective, IgxInputDirective, IgxAutocompleteDirective, IgxDropDownComponent, IgxDropDownGroupComponent, IgxDropDownItemComponent } from 'igniteui-angular'; import { FormsModule } from '@angular/forms'; -import { NgFor } from '@angular/common'; + import { AutocompletePipeStartsWith } from '../autocomplete/autocomplete.component'; @Component({ selector: 'app-movie-availability', styleUrls: ['./movie.component.scss'], templateUrl: './movie.component.html', - imports: [IgxInputGroupComponent, IgxLabelDirective, FormsModule, IgxInputDirective, IgxAutocompleteDirective, IgxDropDownComponent, NgFor, IgxDropDownGroupComponent, IgxDropDownItemComponent, AutocompletePipeStartsWith] + imports: [IgxInputGroupComponent, IgxLabelDirective, FormsModule, IgxInputDirective, IgxAutocompleteDirective, IgxDropDownComponent, IgxDropDownGroupComponent, IgxDropDownItemComponent, AutocompletePipeStartsWith] }) export class MovieComponent { public cinemaSelected; diff --git a/src/app/data-entries/checkbox/checkbox-sample-2/checkbox-sample-2.component.html b/src/app/data-entries/checkbox/checkbox-sample-2/checkbox-sample-2.component.html index a08bac9721..c0a2fbe075 100644 --- a/src/app/data-entries/checkbox/checkbox-sample-2/checkbox-sample-2.component.html +++ b/src/app/data-entries/checkbox/checkbox-sample-2/checkbox-sample-2.component.html @@ -1,4 +1,6 @@ - +@for (task of tasks; track task) { + {{ task.description }} - + +} diff --git a/src/app/data-entries/checkbox/checkbox-sample-2/checkbox-sample-2.component.ts b/src/app/data-entries/checkbox/checkbox-sample-2/checkbox-sample-2.component.ts index 3286ca6570..50ad9e9965 100644 --- a/src/app/data-entries/checkbox/checkbox-sample-2/checkbox-sample-2.component.ts +++ b/src/app/data-entries/checkbox/checkbox-sample-2/checkbox-sample-2.component.ts @@ -1,12 +1,12 @@ import { Component } from '@angular/core'; -import { NgFor } from '@angular/common'; + import { IgxCheckboxComponent } from 'igniteui-angular'; @Component({ selector: 'app-checkbox-sample-2', styleUrls: ['./checkbox-sample-2.component.scss'], templateUrl: './checkbox-sample-2.component.html', - imports: [NgFor, IgxCheckboxComponent] + imports: [IgxCheckboxComponent] }) export class CheckboxSample2Component { public tasks = [ diff --git a/src/app/data-entries/checkbox/checkbox-sample-3/checkbox-sample-3.component.html b/src/app/data-entries/checkbox/checkbox-sample-3/checkbox-sample-3.component.html index 46dd68196f..e9bc179833 100644 --- a/src/app/data-entries/checkbox/checkbox-sample-3/checkbox-sample-3.component.html +++ b/src/app/data-entries/checkbox/checkbox-sample-3/checkbox-sample-3.component.html @@ -1,11 +1,13 @@ - All done + [readonly]="true" + [(ngModel)]="masterCheckbox.checked" + [indeterminate]="masterCheckbox.indeterminate" + (click)="toggleAll()" + > + All done - +@for (task of tasks; track task) { + {{ task.description }} - + +} diff --git a/src/app/data-entries/checkbox/checkbox-sample-3/checkbox-sample-3.component.ts b/src/app/data-entries/checkbox/checkbox-sample-3/checkbox-sample-3.component.ts index fcd9211875..73a6ebfb1a 100644 --- a/src/app/data-entries/checkbox/checkbox-sample-3/checkbox-sample-3.component.ts +++ b/src/app/data-entries/checkbox/checkbox-sample-3/checkbox-sample-3.component.ts @@ -1,13 +1,13 @@ import { Component } from '@angular/core'; import { IgxCheckboxComponent } from 'igniteui-angular'; import { FormsModule } from '@angular/forms'; -import { NgFor } from '@angular/common'; + @Component({ selector: 'app-checkbox-sample-3', styleUrls: ['./checkbox-sample-3.component.scss'], templateUrl: './checkbox-sample-3.component.html', - imports: [IgxCheckboxComponent, FormsModule, NgFor] + imports: [IgxCheckboxComponent, FormsModule] }) export class CheckboxSample3Component { public tasks = [ diff --git a/src/app/data-entries/dropdown/dropdown-menu/dropdown-menu.component.html b/src/app/data-entries/dropdown/dropdown-menu/dropdown-menu.component.html index 81a13b1c24..fc57f8d2e3 100644 --- a/src/app/data-entries/dropdown/dropdown-menu/dropdown-menu.component.html +++ b/src/app/data-entries/dropdown/dropdown-menu/dropdown-menu.component.html @@ -1,23 +1,25 @@
- - - - -
- {{ item.text }} -
- - - + + + + @for (item of items; track item) { + +
+ {{ item.text }} +
+ + } + + -
- - - -
+
+ @if (text) { + + } +
-
+
diff --git a/src/app/data-entries/dropdown/dropdown-menu/dropdown-menu.component.ts b/src/app/data-entries/dropdown/dropdown-menu/dropdown-menu.component.ts index 37266379e0..068d984a08 100644 --- a/src/app/data-entries/dropdown/dropdown-menu/dropdown-menu.component.ts +++ b/src/app/data-entries/dropdown/dropdown-menu/dropdown-menu.component.ts @@ -1,12 +1,12 @@ import { Component } from '@angular/core'; import { ConnectedPositioningStrategy, HorizontalAlignment, ISelectionEventArgs, NoOpScrollStrategy, VerticalAlignment, IgxNavbarComponent, IgxIconButtonDirective, IgxToggleActionDirective, IgxDropDownItemNavigationDirective, IgxIconComponent, IgxDropDownComponent, IgxDropDownItemComponent, IgxLabelDirective, IgxOverlayOutletDirective } from 'igniteui-angular'; -import { NgFor, NgIf } from '@angular/common'; + @Component({ selector: 'app-dropdown-menu', styleUrls: ['./dropdown-menu.component.scss'], templateUrl: './dropdown-menu.component.html', - imports: [IgxNavbarComponent, IgxIconButtonDirective, IgxToggleActionDirective, IgxDropDownItemNavigationDirective, IgxIconComponent, IgxDropDownComponent, NgFor, IgxDropDownItemComponent, NgIf, IgxLabelDirective, IgxOverlayOutletDirective] + imports: [IgxNavbarComponent, IgxIconButtonDirective, IgxToggleActionDirective, IgxDropDownItemNavigationDirective, IgxIconComponent, IgxDropDownComponent, IgxDropDownItemComponent, IgxLabelDirective, IgxOverlayOutletDirective] }) export class DropdownMenuComponent { public items: { text: string }[] = diff --git a/src/app/data-entries/dropdown/dropdown-multi-level-menu/dropdown-multi-level-menu.component.html b/src/app/data-entries/dropdown/dropdown-multi-level-menu/dropdown-multi-level-menu.component.html index 701f8f805e..e869e54938 100644 --- a/src/app/data-entries/dropdown/dropdown-multi-level-menu/dropdown-multi-level-menu.component.html +++ b/src/app/data-entries/dropdown/dropdown-multi-level-menu/dropdown-multi-level-menu.component.html @@ -51,9 +51,11 @@ - - {{ item }} - + @for (item of supportData; track item) { + + {{ item }} + + } @@ -72,33 +74,43 @@ - - {{ item }} - + @for (item of desktopData; track item) { + + {{ item }} + + } - - {{ item }} - + @for (item of crossPlatformData; track item) { + + {{ item }} + + } - - {{ item }} - + @for (item of designToCodeData; track item) { + + {{ item }} + + } - - {{ item }} - + @for (item of testingToolsData; track item) { + + {{ item }} + + } - - {{ item }} - + @for (item of igniteUIData; track item) { + + {{ item }} + + }
diff --git a/src/app/data-entries/dropdown/dropdown-multi-level-menu/dropdown-multi-level-menu.component.ts b/src/app/data-entries/dropdown/dropdown-multi-level-menu/dropdown-multi-level-menu.component.ts index 3fb126ab64..50e6269f56 100644 --- a/src/app/data-entries/dropdown/dropdown-multi-level-menu/dropdown-multi-level-menu.component.ts +++ b/src/app/data-entries/dropdown/dropdown-multi-level-menu/dropdown-multi-level-menu.component.ts @@ -10,14 +10,14 @@ import { } from './data'; import { MultiLevelService } from './multi-level.service'; import { MultiLevelDirective } from './multi-level.directive'; -import { NgFor } from '@angular/common'; + @Component({ selector: 'app-dropdown-multi-level-menu', templateUrl: './dropdown-multi-level-menu.component.html', styleUrls: ['./dropdown-multi-level-menu.component.scss'], providers: [MultiLevelService], - imports: [IgxNavbarComponent, IgxNavbarTitleDirective, IgxButtonDirective, IgxToggleActionDirective, IgxIconComponent, IgxDropDownComponent, IgxDropDownItemComponent, MultiLevelDirective, IgxSuffixDirective, NgFor] + imports: [IgxNavbarComponent, IgxNavbarTitleDirective, IgxButtonDirective, IgxToggleActionDirective, IgxIconComponent, IgxDropDownComponent, IgxDropDownItemComponent, MultiLevelDirective, IgxSuffixDirective] }) export class DropdownMultiLevelMenuComponent implements AfterViewInit { @ViewChildren(IgxDropDownComponent, { read: IgxDropDownComponent }) diff --git a/src/app/data-entries/dropdown/dropdown-sample-1/dropdown-sample-1.component.html b/src/app/data-entries/dropdown/dropdown-sample-1/dropdown-sample-1.component.html index 0f6909d87a..b92ee78582 100644 --- a/src/app/data-entries/dropdown/dropdown-sample-1/dropdown-sample-1.component.html +++ b/src/app/data-entries/dropdown/dropdown-sample-1/dropdown-sample-1.component.html @@ -1,7 +1,9 @@ +[igxDropDownItemNavigation]="dropdown">Options - - {{ item.field }} + @for (item of items; track item) { + + {{ item.field }} + } diff --git a/src/app/data-entries/dropdown/dropdown-sample-1/dropdown-sample-1.component.ts b/src/app/data-entries/dropdown/dropdown-sample-1/dropdown-sample-1.component.ts index cf34dd56a6..4dd65ff76a 100644 --- a/src/app/data-entries/dropdown/dropdown-sample-1/dropdown-sample-1.component.ts +++ b/src/app/data-entries/dropdown/dropdown-sample-1/dropdown-sample-1.component.ts @@ -1,12 +1,12 @@ import { Component } from '@angular/core'; import { IgxButtonDirective, IgxToggleActionDirective, IgxDropDownItemNavigationDirective, IgxDropDownComponent, IgxDropDownItemComponent } from 'igniteui-angular'; -import { NgFor } from '@angular/common'; + @Component({ // tslint:disable-next-line:component-selector selector: 'app-dropdown-sample-1', styleUrls: ['./dropdown-sample-1.component.scss'], templateUrl: './dropdown-sample-1.component.html', - imports: [IgxButtonDirective, IgxToggleActionDirective, IgxDropDownItemNavigationDirective, IgxDropDownComponent, NgFor, IgxDropDownItemComponent] + imports: [IgxButtonDirective, IgxToggleActionDirective, IgxDropDownItemNavigationDirective, IgxDropDownComponent, IgxDropDownItemComponent] }) export class DropDownSample1Component { public items: { field: string }[] = [ diff --git a/src/app/data-entries/dropdown/dropdown-sample-2/dropdown-sample-2.component.html b/src/app/data-entries/dropdown/dropdown-sample-2/dropdown-sample-2.component.html index dd3d6e967f..8081aa3928 100644 --- a/src/app/data-entries/dropdown/dropdown-sample-2/dropdown-sample-2.component.html +++ b/src/app/data-entries/dropdown/dropdown-sample-2/dropdown-sample-2.component.html @@ -1,7 +1,9 @@ +[igxDropDownItemNavigation]="dropdown">Options - - {{ item.field }} + @for (item of items; track item) { + + {{ item.field }} + } diff --git a/src/app/data-entries/dropdown/dropdown-sample-2/dropdown-sample-2.component.ts b/src/app/data-entries/dropdown/dropdown-sample-2/dropdown-sample-2.component.ts index e779ba0c7d..818b9b328c 100644 --- a/src/app/data-entries/dropdown/dropdown-sample-2/dropdown-sample-2.component.ts +++ b/src/app/data-entries/dropdown/dropdown-sample-2/dropdown-sample-2.component.ts @@ -1,13 +1,13 @@ import { Component } from '@angular/core'; import { IgxButtonDirective, IgxToggleActionDirective, IgxDropDownItemNavigationDirective, IgxDropDownComponent, IgxDropDownItemComponent } from 'igniteui-angular'; -import { NgFor } from '@angular/common'; + @Component({ // tslint:disable-next-line:component-selector selector: 'app-dropdown-sample-2', styleUrls: ['./dropdown-sample-2.component.scss'], templateUrl: './dropdown-sample-2.component.html', - imports: [IgxButtonDirective, IgxToggleActionDirective, IgxDropDownItemNavigationDirective, IgxDropDownComponent, NgFor, IgxDropDownItemComponent] + imports: [IgxButtonDirective, IgxToggleActionDirective, IgxDropDownItemNavigationDirective, IgxDropDownComponent, IgxDropDownItemComponent] }) export class DropDownSample2Component { public items: { field: string }[] = [ diff --git a/src/app/data-entries/dropdown/dropdown-sample-3/dropdown-sample-3.component.html b/src/app/data-entries/dropdown/dropdown-sample-3/dropdown-sample-3.component.html index 3e1fb3282c..1967228766 100644 --- a/src/app/data-entries/dropdown/dropdown-sample-3/dropdown-sample-3.component.html +++ b/src/app/data-entries/dropdown/dropdown-sample-3/dropdown-sample-3.component.html @@ -1,13 +1,15 @@ +[igxDropDownItemNavigation]="dropdown">Countries -
- - place - {{ item.field }} - {{ item.code }} - - -
+
+ @for (item of items; track item) { + + place + {{ item.field }} + {{ item.code }} + + + } +
diff --git a/src/app/data-entries/dropdown/dropdown-sample-3/dropdown-sample-3.component.ts b/src/app/data-entries/dropdown/dropdown-sample-3/dropdown-sample-3.component.ts index 5e00011fd7..fdee976523 100644 --- a/src/app/data-entries/dropdown/dropdown-sample-3/dropdown-sample-3.component.ts +++ b/src/app/data-entries/dropdown/dropdown-sample-3/dropdown-sample-3.component.ts @@ -1,13 +1,13 @@ import { Component } from '@angular/core'; import { IgxButtonDirective, IgxToggleActionDirective, IgxDropDownItemNavigationDirective, IgxDropDownComponent, IgxDropDownItemComponent, IgxIconComponent, IgxPrefixDirective, IgxSuffixDirective, IgxDividerDirective } from 'igniteui-angular'; -import { NgFor } from '@angular/common'; + @Component({ // tslint:disable-next-line:component-selector selector: 'app-dropdown-sample-3', styleUrls: ['./dropdown-sample-3.component.scss'], templateUrl: './dropdown-sample-3.component.html', - imports: [IgxButtonDirective, IgxToggleActionDirective, IgxDropDownItemNavigationDirective, IgxDropDownComponent, NgFor, IgxDropDownItemComponent, IgxIconComponent, IgxPrefixDirective, IgxSuffixDirective, IgxDividerDirective] + imports: [IgxButtonDirective, IgxToggleActionDirective, IgxDropDownItemNavigationDirective, IgxDropDownComponent, IgxDropDownItemComponent, IgxIconComponent, IgxPrefixDirective, IgxSuffixDirective, IgxDividerDirective] }) export class DropDownSample3Component { diff --git a/src/app/data-entries/dropdown/dropdown-sample-4/dropdown-sample-4.component.html b/src/app/data-entries/dropdown/dropdown-sample-4/dropdown-sample-4.component.html index 2ae8523b8a..1d1342123c 100644 --- a/src/app/data-entries/dropdown/dropdown-sample-4/dropdown-sample-4.component.html +++ b/src/app/data-entries/dropdown/dropdown-sample-4/dropdown-sample-4.component.html @@ -1,13 +1,15 @@ - + - arrow_drop{{ dropDown.collapsed ? '_down' : '_up' }} + arrow_drop{{ dropDown.collapsed ? '_down' : '_up' }} - -Selected: {{ dropDown.selectedItem?.value }} - - + + Selected: {{ dropDown.selectedItem?.value }} + + @for (item of items; track item) { + {{ item.field }} - - + + } + diff --git a/src/app/data-entries/dropdown/dropdown-sample-4/dropdown-sample-4.component.ts b/src/app/data-entries/dropdown/dropdown-sample-4/dropdown-sample-4.component.ts index 9af07068b8..b40990d1f0 100644 --- a/src/app/data-entries/dropdown/dropdown-sample-4/dropdown-sample-4.component.ts +++ b/src/app/data-entries/dropdown/dropdown-sample-4/dropdown-sample-4.component.ts @@ -1,12 +1,12 @@ import { Component, ViewChild } from '@angular/core'; import { ConnectedPositioningStrategy, IgxDropDownComponent, IgxInputGroupComponent, IgxToggleActionDirective, IgxInputDirective, IgxDropDownItemNavigationDirective, IgxSuffixDirective, IgxIconButtonDirective, IgxRippleDirective, IgxIconComponent, IgxDropDownItemComponent } from 'igniteui-angular'; -import { NgFor } from '@angular/common'; + @Component({ // tslint:disable-next-line:component-selector selector: 'app-dropdown-sample-4', styleUrls: ['./dropdown-sample-4.component.scss'], templateUrl: './dropdown-sample-4.component.html', - imports: [IgxInputGroupComponent, IgxToggleActionDirective, IgxInputDirective, IgxDropDownItemNavigationDirective, IgxSuffixDirective, IgxIconButtonDirective, IgxRippleDirective, IgxIconComponent, IgxDropDownComponent, NgFor, IgxDropDownItemComponent] + imports: [IgxInputGroupComponent, IgxToggleActionDirective, IgxInputDirective, IgxDropDownItemNavigationDirective, IgxSuffixDirective, IgxIconButtonDirective, IgxRippleDirective, IgxIconComponent, IgxDropDownComponent, IgxDropDownItemComponent] }) export class DropDownSample4Component { @ViewChild(IgxDropDownComponent, { static: true }) public igxDropDown: IgxDropDownComponent; diff --git a/src/app/data-entries/dropdown/dropdown-sample-5/dropdown-sample-5.component.html b/src/app/data-entries/dropdown/dropdown-sample-5/dropdown-sample-5.component.html index d1b0bbeb22..d0fbe435f8 100644 --- a/src/app/data-entries/dropdown/dropdown-sample-5/dropdown-sample-5.component.html +++ b/src/app/data-entries/dropdown/dropdown-sample-5/dropdown-sample-5.component.html @@ -1,17 +1,21 @@
- - - Disable 'Meats' - + + + Disable 'Meats' +
-
- - - {{ food.name }} - - -
+
+ @for (foodGroup of foods; track foodGroup) { + + @for (food of foodGroup.entries; track food) { + + {{ food.name }} + + } + + } +
diff --git a/src/app/data-entries/dropdown/dropdown-sample-5/dropdown-sample-5.component.ts b/src/app/data-entries/dropdown/dropdown-sample-5/dropdown-sample-5.component.ts index a7593df223..f72d07cba1 100644 --- a/src/app/data-entries/dropdown/dropdown-sample-5/dropdown-sample-5.component.ts +++ b/src/app/data-entries/dropdown/dropdown-sample-5/dropdown-sample-5.component.ts @@ -1,14 +1,14 @@ import { Component } from '@angular/core'; import { IgxButtonDirective, IgxToggleActionDirective, IgxDropDownItemNavigationDirective, IgxSwitchComponent, IgxDropDownComponent, IgxDropDownGroupComponent, IgxDropDownItemComponent } from 'igniteui-angular'; import { FormsModule } from '@angular/forms'; -import { NgFor } from '@angular/common'; + @Component({ // tslint:disable-next-line:component-selector selector: 'app-dropdown-sample-5', styleUrls: ['./dropdown-sample-5.component.scss'], templateUrl: './dropdown-sample-5.component.html', - imports: [IgxButtonDirective, IgxToggleActionDirective, IgxDropDownItemNavigationDirective, IgxSwitchComponent, FormsModule, IgxDropDownComponent, NgFor, IgxDropDownGroupComponent, IgxDropDownItemComponent] + imports: [IgxButtonDirective, IgxToggleActionDirective, IgxDropDownItemNavigationDirective, IgxSwitchComponent, FormsModule, IgxDropDownComponent, IgxDropDownGroupComponent, IgxDropDownItemComponent] }) export class DropDownSample5Component { public disableMeats = false; diff --git a/src/app/data-entries/dropdown/dropdown-styling/dropdown-styling.component.html b/src/app/data-entries/dropdown/dropdown-styling/dropdown-styling.component.html index a2fd60c2aa..3baf158ede 100644 --- a/src/app/data-entries/dropdown/dropdown-styling/dropdown-styling.component.html +++ b/src/app/data-entries/dropdown/dropdown-styling/dropdown-styling.component.html @@ -1,11 +1,15 @@ +[igxDropDownItemNavigation]="dropDown">{{ hero }} -
- - - {{ class.name }} - - -
+
+ @for (classGroup of heroClasses; track classGroup) { + + @for (class of classGroup['entries']; track class) { + + {{ class.name }} + + } + + } +
diff --git a/src/app/data-entries/dropdown/dropdown-styling/dropdown-styling.component.ts b/src/app/data-entries/dropdown/dropdown-styling/dropdown-styling.component.ts index 1c63daa213..7c676d4521 100644 --- a/src/app/data-entries/dropdown/dropdown-styling/dropdown-styling.component.ts +++ b/src/app/data-entries/dropdown/dropdown-styling/dropdown-styling.component.ts @@ -1,13 +1,13 @@ import { Component, ElementRef, OnInit, ViewChild } from '@angular/core'; import { ISelectionEventArgs, IgxButtonDirective, IgxToggleActionDirective, IgxDropDownItemNavigationDirective, IgxDropDownComponent, IgxDropDownGroupComponent, IgxDropDownItemComponent } from 'igniteui-angular'; import { getHeroClassData, IHeroClass } from '../../../data/heroData'; -import { NgFor } from '@angular/common'; + @Component({ selector: 'app-dropdown-styling', styleUrls: ['./dropdown-styling.component.scss'], templateUrl: './dropdown-styling.component.html', - imports: [IgxButtonDirective, IgxToggleActionDirective, IgxDropDownItemNavigationDirective, IgxDropDownComponent, NgFor, IgxDropDownGroupComponent, IgxDropDownItemComponent] + imports: [IgxButtonDirective, IgxToggleActionDirective, IgxDropDownItemNavigationDirective, IgxDropDownComponent, IgxDropDownGroupComponent, IgxDropDownItemComponent] }) export class DropDownStylingComponent implements OnInit { @ViewChild('button', { static: true }) public button: ElementRef; diff --git a/src/app/data-entries/dropdown/dropdown-tree-grid-hierarchical-selection/dropdown-tree-grid-hierarchical-selection.component.html b/src/app/data-entries/dropdown/dropdown-tree-grid-hierarchical-selection/dropdown-tree-grid-hierarchical-selection.component.html index 5bbaf0906d..259bca5a33 100644 --- a/src/app/data-entries/dropdown/dropdown-tree-grid-hierarchical-selection/dropdown-tree-grid-hierarchical-selection.component.html +++ b/src/app/data-entries/dropdown/dropdown-tree-grid-hierarchical-selection/dropdown-tree-grid-hierarchical-selection.component.html @@ -1,16 +1,18 @@
- - {{row.Name}} - + + @for (row of selectedRows; track row) { + {{row.Name}} + } +
- - - + + + diff --git a/src/app/data-entries/dropdown/dropdown-tree-grid-hierarchical-selection/dropdown-tree-grid-hierarchical-selection.component.ts b/src/app/data-entries/dropdown/dropdown-tree-grid-hierarchical-selection/dropdown-tree-grid-hierarchical-selection.component.ts index d4a588fa6c..24e8c6ec4f 100644 --- a/src/app/data-entries/dropdown/dropdown-tree-grid-hierarchical-selection/dropdown-tree-grid-hierarchical-selection.component.ts +++ b/src/app/data-entries/dropdown/dropdown-tree-grid-hierarchical-selection/dropdown-tree-grid-hierarchical-selection.component.ts @@ -1,14 +1,14 @@ import { AfterViewInit, Component,ElementRef, OnInit, ViewChild } from '@angular/core'; import { IBaseChipEventArgs, IgxDropDownComponent, OverlaySettings, IgxTreeGridComponent, IRowSelectionEventArgs, ConnectedPositioningStrategy, IgxButtonDirective, IgxToggleActionDirective, IgxDropDownItemNavigationDirective, IgxIconComponent, IgxChipsAreaComponent, IgxChipComponent, IgxColumnComponent } from 'igniteui-angular'; import { EMPLOYEE_DATA } from './nested-employee-data'; -import { NgFor } from '@angular/common'; + @Component({ // tslint:disable-next-line:component-selector selector: 'app-dropdown-tree-grid-hierarchical-selection', styleUrls: ['./dropdown-tree-grid-hierarchical-selection.component.scss'], templateUrl: './dropdown-tree-grid-hierarchical-selection.component.html', - imports: [IgxButtonDirective, IgxToggleActionDirective, IgxDropDownItemNavigationDirective, IgxIconComponent, IgxChipsAreaComponent, NgFor, IgxChipComponent, IgxDropDownComponent, IgxTreeGridComponent, IgxColumnComponent] + imports: [IgxButtonDirective, IgxToggleActionDirective, IgxDropDownItemNavigationDirective, IgxIconComponent, IgxChipsAreaComponent, IgxChipComponent, IgxDropDownComponent, IgxTreeGridComponent, IgxColumnComponent] }) export class DropdownTreeGridHierarchicalSelectionComponent implements OnInit, AfterViewInit { @ViewChild('treeGrid', { static: true }) diff --git a/src/app/data-entries/dropdown/dropdown-tree-hierarchical-selection/dropdown-tree-hierarchical-selection.component.html b/src/app/data-entries/dropdown/dropdown-tree-hierarchical-selection/dropdown-tree-hierarchical-selection.component.html index 432fdd8727..c80a43de50 100644 --- a/src/app/data-entries/dropdown/dropdown-tree-hierarchical-selection/dropdown-tree-hierarchical-selection.component.html +++ b/src/app/data-entries/dropdown/dropdown-tree-hierarchical-selection/dropdown-tree-hierarchical-selection.component.html @@ -1,20 +1,26 @@ -
- - {{node.data.Name}} - + + @for (node of selectedNodes; track node) { + {{node.data.Name}} + } +
- - - {{ country.Name }} - - {{ city.Name }} - - - + + @for (country of countries; track country) { + + {{ country.Name }} + @for (city of country.Cities; track city) { + + {{ city.Name }} + + } + + } + \ No newline at end of file diff --git a/src/app/data-entries/dropdown/dropdown-tree-hierarchical-selection/dropdown-tree-hierarchical-selection.component.ts b/src/app/data-entries/dropdown/dropdown-tree-hierarchical-selection/dropdown-tree-hierarchical-selection.component.ts index b9f3a87cf9..b8d7bf8121 100644 --- a/src/app/data-entries/dropdown/dropdown-tree-hierarchical-selection/dropdown-tree-hierarchical-selection.component.ts +++ b/src/app/data-entries/dropdown/dropdown-tree-hierarchical-selection/dropdown-tree-hierarchical-selection.component.ts @@ -1,14 +1,14 @@ import { AfterViewInit, Component, DoCheck, OnInit, ViewChild,ElementRef } from '@angular/core'; import { IBaseChipEventArgs, IgxDropDownComponent, IgxTreeComponent, ITreeNodeSelectionEvent, ConnectedPositioningStrategy, OverlaySettings, IgxButtonDirective, IgxToggleActionDirective, IgxDropDownItemNavigationDirective, IgxIconComponent, IgxChipsAreaComponent, IgxChipComponent, IgxTreeNodeComponent } from 'igniteui-angular'; import { COUNTRIES } from './countries'; -import { NgFor } from '@angular/common'; + @Component({ // tslint:disable-next-line:component-selector selector: 'app-dropdown-tree-hierarchical-selection', styleUrls: ['./dropdown-tree-hierarchical-selection.component.scss'], templateUrl: './dropdown-tree-hierarchical-selection.component.html', - imports: [IgxButtonDirective, IgxToggleActionDirective, IgxDropDownItemNavigationDirective, IgxIconComponent, IgxChipsAreaComponent, NgFor, IgxChipComponent, IgxDropDownComponent, IgxTreeComponent, IgxTreeNodeComponent] + imports: [IgxButtonDirective, IgxToggleActionDirective, IgxDropDownItemNavigationDirective, IgxIconComponent, IgxChipsAreaComponent, IgxChipComponent, IgxDropDownComponent, IgxTreeComponent, IgxTreeNodeComponent] }) export class DropdownTreeHierarchicalSelectionComponent implements OnInit, DoCheck, AfterViewInit { @ViewChild(IgxTreeComponent, { static: true }) public igxTree: IgxTreeComponent; diff --git a/src/app/data-entries/input-group/input-group-sample-5/input-group-sample-5.component.html b/src/app/data-entries/input-group/input-group-sample-5/input-group-sample-5.component.html index 5da6969dc4..d41e79bfbd 100644 --- a/src/app/data-entries/input-group/input-group-sample-5/input-group-sample-5.component.html +++ b/src/app/data-entries/input-group/input-group-sample-5/input-group-sample-5.component.html @@ -1,59 +1,61 @@
-
-
Line Type
- - - - - person - - -
Box Type
- - - - - person - - -
Border Type
- - - - - person - - -
File Type
- - - - Upload a file to begin... - -
Search Type
- - - - search - - - clear - - - mic - - -
Type Box set via a Token
- - - - - person - - + +
Line Type
+ + + + + person + + +
Box Type
+ + + + + person + + +
Border Type
+ + + + + person + + +
File Type
+ + + + Upload a file to begin... + +
Search Type
+ + + + search + + @if (input1.value.length > 0) { + + clear + + } + + mic + + +
Type Box set via a Token
+ + + + + person + +
-
+ diff --git a/src/app/data-entries/input-group/input-group-sample-5/input-group-sample-5.component.ts b/src/app/data-entries/input-group/input-group-sample-5/input-group-sample-5.component.ts index f97356f671..da2b09187f 100644 --- a/src/app/data-entries/input-group/input-group-sample-5/input-group-sample-5.component.ts +++ b/src/app/data-entries/input-group/input-group-sample-5/input-group-sample-5.component.ts @@ -2,13 +2,13 @@ import { Component } from '@angular/core'; import { BaseInputGroupSampleComponent } from '../base-input.component'; import { IGX_INPUT_GROUP_TYPE, IgxInputGroupComponent, IgxInputDirective, IgxLabelDirective, IgxSuffixDirective, IgxIconComponent, IgxHintDirective, IgxPrefixDirective } from 'igniteui-angular'; import { FormsModule } from '@angular/forms'; -import { NgIf } from '@angular/common'; + @Component({ selector: 'app-input-group-sample-5', styleUrls: ['./input-group-sample-5.component.scss'], templateUrl: './input-group-sample-5.component.html', providers: [{ provide: IGX_INPUT_GROUP_TYPE, useValue: 'box' }], - imports: [FormsModule, IgxInputGroupComponent, IgxInputDirective, IgxLabelDirective, IgxSuffixDirective, IgxIconComponent, IgxHintDirective, IgxPrefixDirective, NgIf] + imports: [FormsModule, IgxInputGroupComponent, IgxInputDirective, IgxLabelDirective, IgxSuffixDirective, IgxIconComponent, IgxHintDirective, IgxPrefixDirective] }) export class InputGroupSample5Component extends BaseInputGroupSampleComponent { } diff --git a/src/app/data-entries/input-group/input-group-sample-6/input-group-sample-6.component.html b/src/app/data-entries/input-group/input-group-sample-6/input-group-sample-6.component.html index 46a5dc2485..4cebd98ea7 100644 --- a/src/app/data-entries/input-group/input-group-sample-6/input-group-sample-6.component.html +++ b/src/app/data-entries/input-group/input-group-sample-6/input-group-sample-6.component.html @@ -1,64 +1,68 @@
-
-

Book your movie ticket

-
- - - - {{ movie }} - - - - - local_movies - - - - - - - person - - - - +359 - - - - phone - - Ex.: +359 888 123 456 - - - - - - email - - - - - - - today - - - - - access_time - - - - - - - people_alt - - - -
+ +

Book your movie ticket

+
+ + @for (genre of genres; track genre) { + + @for (movie of genre.movies; track movie) { + + {{ movie }} + + } + + } + + + local_movies + + + + + + + person + + + + +359 + + + + phone + + Ex.: +359 888 123 456 + + + + + + email + + + + + + + today + + + + + access_time + + + + + + + people_alt + + + +
-
+ diff --git a/src/app/data-entries/input-group/input-group-sample-6/input-group-sample-6.component.ts b/src/app/data-entries/input-group/input-group-sample-6/input-group-sample-6.component.ts index 629c145f66..f250f1eb5f 100644 --- a/src/app/data-entries/input-group/input-group-sample-6/input-group-sample-6.component.ts +++ b/src/app/data-entries/input-group/input-group-sample-6/input-group-sample-6.component.ts @@ -2,12 +2,12 @@ import { Component } from '@angular/core'; import { BaseInputGroupSampleComponent } from '../base-input.component'; import { FormsModule } from '@angular/forms'; import { IgxSelectComponent, IgxSelectGroupComponent, IgxSelectItemComponent, IgxLabelDirective, IgxSelectToggleIconDirective, IgxIconComponent, IgxInputGroupComponent, IgxInputDirective, IgxSuffixDirective, IgxPrefixDirective, IgxHintDirective, IgxComboComponent, IgxDatePickerComponent, IgxPickerToggleComponent, IgxTimePickerComponent, IgxButtonDirective, IgxRippleDirective } from 'igniteui-angular'; -import { NgFor } from '@angular/common'; + @Component({ selector: 'app-input-group-sample-6', styleUrls: ['./input-group-sample-6.component.scss'], templateUrl: './input-group-sample-6.component.html', - imports: [FormsModule, IgxSelectComponent, NgFor, IgxSelectGroupComponent, IgxSelectItemComponent, IgxLabelDirective, IgxSelectToggleIconDirective, IgxIconComponent, IgxInputGroupComponent, IgxInputDirective, IgxSuffixDirective, IgxPrefixDirective, IgxHintDirective, IgxComboComponent, IgxDatePickerComponent, IgxPickerToggleComponent, IgxTimePickerComponent, IgxButtonDirective, IgxRippleDirective] + imports: [FormsModule, IgxSelectComponent, IgxSelectGroupComponent, IgxSelectItemComponent, IgxLabelDirective, IgxSelectToggleIconDirective, IgxIconComponent, IgxInputGroupComponent, IgxInputDirective, IgxSuffixDirective, IgxPrefixDirective, IgxHintDirective, IgxComboComponent, IgxDatePickerComponent, IgxPickerToggleComponent, IgxTimePickerComponent, IgxButtonDirective, IgxRippleDirective] }) export class InputGroupSample6Component extends BaseInputGroupSampleComponent { public user = { diff --git a/src/app/data-entries/input-group/reactive-form-custom-validation/reactive-form-custom-validation.component.html b/src/app/data-entries/input-group/reactive-form-custom-validation/reactive-form-custom-validation.component.html index 349ab030d1..1f06112486 100644 --- a/src/app/data-entries/input-group/reactive-form-custom-validation/reactive-form-custom-validation.component.html +++ b/src/app/data-entries/input-group/reactive-form-custom-validation/reactive-form-custom-validation.component.html @@ -1,37 +1,55 @@
-
- - - - Please enter a valid email address - This email address is not allowed - This domain is not allowed - + + + + + @if (email.errors?.email) { + Please enter a valid email address + } + @if (!email.errors?.email && email.errors?.localPart) { + This email address is not allowed + } + @if (!email.errors?.email && email.errors?.domain) { + This domain is not allowed + } + - - - - Should not contain the email address - Should be at least 8 characters - Should contain a digit and a special character - - {{ togglePasswordVisibility }} - - + + + + @if (password.errors?.containsEmail) { + Should not contain the email address + } + @if (password.errors?.minlength) { + Should be at least 8 characters + } + @if (password.errors?.pattern) { + Should contain a digit and a special character + } + @if (password.value) { + + {{ togglePasswordVisibility }} + + } + - - - - - Passwords do not match - - - {{ toggleRepeatVisibility }} - - + + + + @if (repeatPassword.errors?.mismatch + && !repeatPassword.pristine + && repeatPassword.value) { + + Passwords do not match + + } + @if (repeatPassword.value) { + + {{ toggleRepeatVisibility }} + + } + - -
+ +
diff --git a/src/app/data-entries/input-group/reactive-form-custom-validation/reactive-form-custom-validation.component.ts b/src/app/data-entries/input-group/reactive-form-custom-validation/reactive-form-custom-validation.component.ts index 037f695059..1bcd5f8c5a 100644 --- a/src/app/data-entries/input-group/reactive-form-custom-validation/reactive-form-custom-validation.component.ts +++ b/src/app/data-entries/input-group/reactive-form-custom-validation/reactive-form-custom-validation.component.ts @@ -1,7 +1,7 @@ import { Component } from '@angular/core'; import { AbstractControl, FormBuilder, FormControl, FormGroup, ValidationErrors, ValidatorFn, Validators, FormsModule, ReactiveFormsModule } from '@angular/forms'; import { IgxInputGroupComponent, IgxLabelDirective, IgxInputDirective, IgxHintDirective, IgxIconComponent, IgxSuffixDirective, IgxButtonDirective, IgxRippleDirective } from 'igniteui-angular'; -import { NgIf } from '@angular/common'; + interface User { @@ -22,7 +22,7 @@ interface ValidatorErrors selector: 'app-reactive-form-custom-validation', templateUrl: './reactive-form-custom-validation.component.html', styleUrls: ['./reactive-form-custom-validation.component.scss'], - imports: [FormsModule, ReactiveFormsModule, IgxInputGroupComponent, IgxLabelDirective, IgxInputDirective, NgIf, IgxHintDirective, IgxIconComponent, IgxSuffixDirective, IgxButtonDirective, IgxRippleDirective] + imports: [FormsModule, ReactiveFormsModule, IgxInputGroupComponent, IgxLabelDirective, IgxInputDirective, IgxHintDirective, IgxIconComponent, IgxSuffixDirective, IgxButtonDirective, IgxRippleDirective] }) export class ReactiveFormCustomValidationComponent { private pattern = `^(?=.*[A-Za-z])(?=.*\\d)(?=.*[~!@?#+$"'%^&:;*\\-_=.,<>])[A-Za-z\\d~!@?#+$"'%^&:;*\\-_=.,<>]+$`; diff --git a/src/app/data-entries/input-group/reactive-form-validation/reactive-form-validation.component.html b/src/app/data-entries/input-group/reactive-form-validation/reactive-form-validation.component.html index 36ee9f58f3..9240c28304 100644 --- a/src/app/data-entries/input-group/reactive-form-validation/reactive-form-validation.component.html +++ b/src/app/data-entries/input-group/reactive-form-validation/reactive-form-validation.component.html @@ -1,28 +1,34 @@
-
-

Registration Form

-
- - - - + +

Registration Form

+
+ + + + - - - - Please enter a valid email - + + + + @if (email.errors?.email) { + Please enter a valid email + } + - - - - Password should be at least 8 characters - - {{ togglePasswordVisibility }} - - + + + + @if (password.errors?.minlength) { + Password should be at least 8 characters + } + @if (password.value) { + + {{ togglePasswordVisibility }} + + } + - -
- + +
+
diff --git a/src/app/data-entries/input-group/reactive-form-validation/reactive-form-validation.component.ts b/src/app/data-entries/input-group/reactive-form-validation/reactive-form-validation.component.ts index 0ef1d49d08..72ae6a1769 100644 --- a/src/app/data-entries/input-group/reactive-form-validation/reactive-form-validation.component.ts +++ b/src/app/data-entries/input-group/reactive-form-validation/reactive-form-validation.component.ts @@ -1,7 +1,7 @@ import { Component } from '@angular/core'; import { FormBuilder, FormControl, FormGroup, Validators, FormsModule, ReactiveFormsModule } from '@angular/forms'; import { IgxInputGroupComponent, IgxLabelDirective, IgxInputDirective, IgxHintDirective, IgxIconComponent, IgxSuffixDirective, IgxButtonDirective, IgxRippleDirective } from 'igniteui-angular'; -import { NgIf } from '@angular/common'; + interface User { @@ -14,7 +14,7 @@ interface User selector: 'app-reactive-form-validation', templateUrl: './reactive-form-validation.component.html', styleUrls: ['./reactive-form-validation.component.scss'], - imports: [FormsModule, ReactiveFormsModule, IgxInputGroupComponent, IgxLabelDirective, IgxInputDirective, NgIf, IgxHintDirective, IgxIconComponent, IgxSuffixDirective, IgxButtonDirective, IgxRippleDirective] + imports: [FormsModule, ReactiveFormsModule, IgxInputGroupComponent, IgxLabelDirective, IgxInputDirective, IgxHintDirective, IgxIconComponent, IgxSuffixDirective, IgxButtonDirective, IgxRippleDirective] }) export class ReactiveFormValidationComponent { public registrationForm: FormGroup; diff --git a/src/app/data-entries/input-group/template-driven-form-validation/template-driven-form-validation.component.html b/src/app/data-entries/input-group/template-driven-form-validation/template-driven-form-validation.component.html index dc40a1fbcd..ea9b2e6157 100644 --- a/src/app/data-entries/input-group/template-driven-form-validation/template-driven-form-validation.component.html +++ b/src/app/data-entries/input-group/template-driven-form-validation/template-driven-form-validation.component.html @@ -1,29 +1,35 @@
-
-

Registration Form

-
- - - - + +

Registration Form

+
+ + + + - - - - Please enter a valid email - + + + + @if (email.errors?.email) { + Please enter a valid email + } + - - - - Password should be at least 8 characters - - {{ togglePasswordVisibility }} - - + + + + @if (password.errors?.minlength) { + Password should be at least 8 characters + } + @if (password.value) { + + {{ togglePasswordVisibility }} + + } + - -
+ +
-
+ diff --git a/src/app/data-entries/input-group/template-driven-form-validation/template-driven-form-validation.component.ts b/src/app/data-entries/input-group/template-driven-form-validation/template-driven-form-validation.component.ts index 100ce29570..a1e3906994 100644 --- a/src/app/data-entries/input-group/template-driven-form-validation/template-driven-form-validation.component.ts +++ b/src/app/data-entries/input-group/template-driven-form-validation/template-driven-form-validation.component.ts @@ -1,7 +1,7 @@ import { Component, ViewChild } from '@angular/core'; import { NgForm, FormsModule } from '@angular/forms'; import { IgxInputGroupComponent, IgxLabelDirective, IgxInputDirective, IgxHintDirective, IgxIconComponent, IgxSuffixDirective, IgxButtonDirective, IgxRippleDirective } from 'igniteui-angular'; -import { NgIf } from '@angular/common'; + interface User { @@ -14,7 +14,7 @@ interface User selector: 'app-template-driven-form-validation', templateUrl: './template-driven-form-validation.component.html', styleUrls: ['./template-driven-form-validation.component.scss'], - imports: [FormsModule, IgxInputGroupComponent, IgxLabelDirective, IgxInputDirective, NgIf, IgxHintDirective, IgxIconComponent, IgxSuffixDirective, IgxButtonDirective, IgxRippleDirective] + imports: [FormsModule, IgxInputGroupComponent, IgxLabelDirective, IgxInputDirective, IgxHintDirective, IgxIconComponent, IgxSuffixDirective, IgxButtonDirective, IgxRippleDirective] }) export class TemplateDrivenFormValidationComponent { @ViewChild(NgForm, { static: true }) diff --git a/src/app/data-entries/radio/radio-group-sample/radio-group-sample.component.html b/src/app/data-entries/radio/radio-group-sample/radio-group-sample.component.html index 78192e9072..ded1f4834c 100644 --- a/src/app/data-entries/radio/radio-group-sample/radio-group-sample.component.html +++ b/src/app/data-entries/radio/radio-group-sample/radio-group-sample.component.html @@ -1,17 +1,21 @@
- -
- - - + + + + + - - - {{fruit}} - - - - -
- + + @for (fruit of fruits; track fruit) { + + {{fruit}} + + } + + + + + @if (newModel) { + + }
diff --git a/src/app/data-entries/radio/radio-group-sample/radio-group-sample.component.ts b/src/app/data-entries/radio/radio-group-sample/radio-group-sample.component.ts index b924bc131c..3cd07fb58f 100644 --- a/src/app/data-entries/radio/radio-group-sample/radio-group-sample.component.ts +++ b/src/app/data-entries/radio/radio-group-sample/radio-group-sample.component.ts @@ -1,13 +1,13 @@ import { Component } from '@angular/core'; import { FormBuilder, FormGroup, Validators, FormsModule, ReactiveFormsModule } from '@angular/forms'; import { IgxInputGroupComponent, IgxInputDirective, IgxRadioGroupDirective, IgxRadioComponent, IgxButtonDirective, IgxRippleDirective, IgxLabelDirective } from 'igniteui-angular'; -import { NgFor, NgIf } from '@angular/common'; + @Component({ selector: 'app-radio-group-sample', styleUrls: ['./radio-group-sample.component.scss'], templateUrl: './radio-group-sample.component.html', - imports: [FormsModule, ReactiveFormsModule, IgxInputGroupComponent, IgxInputDirective, IgxRadioGroupDirective, NgFor, IgxRadioComponent, IgxButtonDirective, IgxRippleDirective, NgIf, IgxLabelDirective] + imports: [FormsModule, ReactiveFormsModule, IgxInputGroupComponent, IgxInputDirective, IgxRadioGroupDirective, IgxRadioComponent, IgxButtonDirective, IgxRippleDirective, IgxLabelDirective] }) export class RadioGroupSampleComponent { public fruitsForm: FormGroup; diff --git a/src/app/data-entries/radio/radio-sample-2/radio-sample-2.component.html b/src/app/data-entries/radio/radio-sample-2/radio-sample-2.component.html index 46bf35d54e..32a25d1517 100644 --- a/src/app/data-entries/radio/radio-sample-2/radio-sample-2.component.html +++ b/src/app/data-entries/radio/radio-sample-2/radio-sample-2.component.html @@ -1,12 +1,14 @@ - +@for (color of colors; track color) { + {{color.name}} - + +}
-
-
New York City
- New York City comprises 5 boroughs sitting where the Hudson River meets the Atlantic Ocean. At its core is - Manhattan, a densely populated borough that's among the world's major commercial, financial and cultural - centers. -
+
+
New York City
+ New York City comprises 5 boroughs sitting where the Hudson River meets the Atlantic Ocean. At its core is + Manhattan, a densely populated borough that's among the world's major commercial, financial and cultural + centers. +
diff --git a/src/app/data-entries/radio/radio-sample-2/radio-sample-2.component.ts b/src/app/data-entries/radio/radio-sample-2/radio-sample-2.component.ts index a8f44374bc..fa08022944 100644 --- a/src/app/data-entries/radio/radio-sample-2/radio-sample-2.component.ts +++ b/src/app/data-entries/radio/radio-sample-2/radio-sample-2.component.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { NgFor } from '@angular/common'; + import { IgxRadioComponent } from 'igniteui-angular'; import { FormsModule } from '@angular/forms'; @@ -7,7 +7,7 @@ import { FormsModule } from '@angular/forms'; selector: 'app-radio-sample-2', styleUrls: ['./radio-sample-2.component.scss'], templateUrl: './radio-sample-2.component.html', - imports: [NgFor, IgxRadioComponent, FormsModule] + imports: [IgxRadioComponent, FormsModule] }) export class RadioSample2Component { public colors = [{ diff --git a/src/app/data-entries/rating/rating-form/rating-form.component.html b/src/app/data-entries/rating/rating-form/rating-form.component.html index 351dde87f1..2435248f9e 100644 --- a/src/app/data-entries/rating/rating-form/rating-form.component.html +++ b/src/app/data-entries/rating/rating-form/rating-form.component.html @@ -1,31 +1,33 @@
-
- - - - + + + + + - -

{{ product.ProductName }}

- + +

{{ product.ProductName }}

+ - - Price: {{ product.UnitPrice | currency:'USD' }} - - User Rating: {{ productRating }} from {{ product.TotalReviews + (product.UserRating !== 0 ? 1 : 0) }} users - - - - - - - - - + + Price: {{ product.UnitPrice | currency:'USD' }} + + User Rating: {{ productRating }} from {{ product.TotalReviews + (product.UserRating !== 0 ? 1 : 0) }} users + + + + + + @for (icon of product.icons; track icon) { + + } + +
+
diff --git a/src/app/data-entries/rating/rating-form/rating-form.component.ts b/src/app/data-entries/rating/rating-form/rating-form.component.ts index 961c42b2ac..b12e3dcdf5 100644 --- a/src/app/data-entries/rating/rating-form/rating-form.component.ts +++ b/src/app/data-entries/rating/rating-form/rating-form.component.ts @@ -2,7 +2,7 @@ import { Component} from '@angular/core'; import { IgcRatingComponent, defineComponents } from 'igniteui-webcomponents'; import { FormsModule } from '@angular/forms'; import { IgxCardComponent, IgxCardMediaDirective, IgxCardHeaderComponent, IgxCardHeaderTitleDirective, IgxCardContentDirective, IgxCardHeaderSubtitleDirective, IgcFormControlDirective, IgxCardActionsComponent, IgxButtonDirective, IgxRippleDirective, IgxPrefixDirective, IgxIconButtonDirective, IgxSuffixDirective, IgxIconComponent } from 'igniteui-angular'; -import { NgFor, CurrencyPipe } from '@angular/common'; +import { CurrencyPipe } from '@angular/common'; defineComponents(IgcRatingComponent) @@ -10,7 +10,7 @@ defineComponents(IgcRatingComponent) selector: 'app-rating-sample', styleUrls: ['./rating-form.component.scss'], templateUrl: './rating-form.component.html', - imports: [FormsModule, IgxCardComponent, IgxCardMediaDirective, IgxCardHeaderComponent, IgxCardHeaderTitleDirective, IgxCardContentDirective, IgxCardHeaderSubtitleDirective, IgcFormControlDirective, IgxCardActionsComponent, IgxButtonDirective, IgxRippleDirective, IgxPrefixDirective, NgFor, IgxIconButtonDirective, IgxSuffixDirective, IgxIconComponent, CurrencyPipe] + imports: [FormsModule, IgxCardComponent, IgxCardMediaDirective, IgxCardHeaderComponent, IgxCardHeaderTitleDirective, IgxCardContentDirective, IgxCardHeaderSubtitleDirective, IgcFormControlDirective, IgxCardActionsComponent, IgxButtonDirective, IgxRippleDirective, IgxPrefixDirective, IgxIconButtonDirective, IgxSuffixDirective, IgxIconComponent, CurrencyPipe] }) export class RatingInFormComponent { diff --git a/src/app/data-entries/select/select-input-directives/select-input-directives.html b/src/app/data-entries/select/select-input-directives/select-input-directives.html index a17e49129d..f3239cdc93 100644 --- a/src/app/data-entries/select/select-input-directives/select-input-directives.html +++ b/src/app/data-entries/select/select-input-directives/select-input-directives.html @@ -1,13 +1,17 @@ - - - BIO - - - clear + + + BIO + + @if (selected) { + + clear - Choose a banana - - {{item}} + } + Choose a banana + @for (item of items; track item) { + + {{item}} + } diff --git a/src/app/data-entries/select/select-input-directives/select-input-directives.ts b/src/app/data-entries/select/select-input-directives/select-input-directives.ts index 8d09f6e31e..3fa2a4218f 100644 --- a/src/app/data-entries/select/select-input-directives/select-input-directives.ts +++ b/src/app/data-entries/select/select-input-directives/select-input-directives.ts @@ -1,13 +1,13 @@ import { Component, ViewChild } from '@angular/core'; import { IgxSelectComponent, IgxLabelDirective, IgxPrefixDirective, IgxSuffixDirective, IgxIconComponent, IgxHintDirective, IgxSelectItemComponent } from 'igniteui-angular'; import { FormsModule } from '@angular/forms'; -import { NgIf, NgFor } from '@angular/common'; + @Component({ selector: 'app-select-input-directives', styleUrls: ['select-input-directives.scss'], templateUrl: 'select-input-directives.html', - imports: [IgxSelectComponent, FormsModule, IgxLabelDirective, IgxPrefixDirective, NgIf, IgxSuffixDirective, IgxIconComponent, IgxHintDirective, NgFor, IgxSelectItemComponent] + imports: [IgxSelectComponent, FormsModule, IgxLabelDirective, IgxPrefixDirective, IgxSuffixDirective, IgxIconComponent, IgxHintDirective, IgxSelectItemComponent] }) export class SelectInputDirectivesComponent { diff --git a/src/app/data-entries/select/select-sample-1/select-sample-1.component.html b/src/app/data-entries/select/select-sample-1/select-sample-1.component.html index a07c95a680..c596b3c430 100644 --- a/src/app/data-entries/select/select-sample-1/select-sample-1.component.html +++ b/src/app/data-entries/select/select-sample-1/select-sample-1.component.html @@ -1,6 +1,8 @@ - - - {{item}} + + @for (item of items; track item) { + + {{item}} + } diff --git a/src/app/data-entries/select/select-sample-1/select-sample-1.component.ts b/src/app/data-entries/select/select-sample-1/select-sample-1.component.ts index c3f8aab925..95801f844c 100644 --- a/src/app/data-entries/select/select-sample-1/select-sample-1.component.ts +++ b/src/app/data-entries/select/select-sample-1/select-sample-1.component.ts @@ -1,12 +1,12 @@ import { Component } from '@angular/core'; import { IgxSelectComponent, IgxLabelDirective, IgxSelectItemComponent } from 'igniteui-angular'; -import { NgFor } from '@angular/common'; + @Component({ selector: 'app-select-sample-1', styleUrls: ['select-sample-1.component.scss'], templateUrl: 'select-sample-1.component.html', - imports: [IgxSelectComponent, IgxLabelDirective, NgFor, IgxSelectItemComponent] + imports: [IgxSelectComponent, IgxLabelDirective, IgxSelectItemComponent] }) export class SelectSample1Component { public items: string[] = ['Orange', 'Apple', 'Banana', 'Mango']; diff --git a/src/app/data-entries/select/select-sample-2/select-sample-2.component.html b/src/app/data-entries/select/select-sample-2/select-sample-2.component.html index fd919afc1f..59d08b260a 100644 --- a/src/app/data-entries/select/select-sample-2/select-sample-2.component.html +++ b/src/app/data-entries/select/select-sample-2/select-sample-2.component.html @@ -1,16 +1,19 @@ - - - - {{item.type}} + + @for (group of greengrocery; track group) { + + @for (item of group.items; track item) { + + {{item.type}} + @if (item.origin === 'local') { local_shipping - - flight - + } @else { + flight + } + } + } diff --git a/src/app/data-entries/select/select-sample-2/select-sample-2.component.ts b/src/app/data-entries/select/select-sample-2/select-sample-2.component.ts index 460fd25c9d..00e19aafdd 100644 --- a/src/app/data-entries/select/select-sample-2/select-sample-2.component.ts +++ b/src/app/data-entries/select/select-sample-2/select-sample-2.component.ts @@ -1,13 +1,13 @@ import { Component, ElementRef, ViewChild } from '@angular/core'; import { IgxSelectComponent, IgxLabelDirective, IgxSelectGroupComponent, IgxSelectItemComponent, IgxIconComponent } from 'igniteui-angular'; -import { NgFor, NgIf } from '@angular/common'; + @Component({ selector: 'app-select-sample-2', styleUrls: ['select-sample-2.component.scss'], templateUrl: 'select-sample-2.component.html', - imports: [IgxSelectComponent, IgxLabelDirective, NgFor, IgxSelectGroupComponent, IgxSelectItemComponent, NgIf, IgxIconComponent] + imports: [IgxSelectComponent, IgxLabelDirective, IgxSelectGroupComponent, IgxSelectItemComponent, IgxIconComponent] }) export class SelectSample2Component { @ViewChild(IgxSelectComponent, { static: true }) diff --git a/src/app/data-entries/select/select-sample-4/select-sample-4.component.html b/src/app/data-entries/select/select-sample-4/select-sample-4.component.html index d82d677790..75e67ab685 100644 --- a/src/app/data-entries/select/select-sample-4/select-sample-4.component.html +++ b/src/app/data-entries/select/select-sample-4/select-sample-4.component.html @@ -1,9 +1,10 @@
- - - - {{item}} - - + + + @for (item of items; track item) { + + {{item}} + + } +
- \ No newline at end of file diff --git a/src/app/data-entries/select/select-sample-4/select-sample-4.component.ts b/src/app/data-entries/select/select-sample-4/select-sample-4.component.ts index 5143a42783..609a06730e 100644 --- a/src/app/data-entries/select/select-sample-4/select-sample-4.component.ts +++ b/src/app/data-entries/select/select-sample-4/select-sample-4.component.ts @@ -1,13 +1,13 @@ import { Component, OnInit, ViewChild } from '@angular/core'; import { AbsoluteScrollStrategy, ConnectedPositioningStrategy, HorizontalAlignment, IgxSelectComponent, OverlaySettings, PositionSettings, VerticalAlignment, IgxLabelDirective, IgxSelectItemComponent } from 'igniteui-angular'; import { scaleInTop, scaleOutBottom } from 'igniteui-angular/animations'; -import { NgFor } from '@angular/common'; + @Component({ selector: 'app-select-sample-4', styleUrls: ['select-sample-4.component.scss'], templateUrl: 'select-sample-4.component.html', - imports: [IgxSelectComponent, IgxLabelDirective, NgFor, IgxSelectItemComponent] + imports: [IgxSelectComponent, IgxLabelDirective, IgxSelectItemComponent] }) export class SelectSample4Component implements OnInit { @ViewChild(IgxSelectComponent, { static: true }) diff --git a/src/app/data-entries/select/select-styling/select-styling.component.html b/src/app/data-entries/select/select-styling/select-styling.component.html index d82d677790..75e67ab685 100644 --- a/src/app/data-entries/select/select-styling/select-styling.component.html +++ b/src/app/data-entries/select/select-styling/select-styling.component.html @@ -1,9 +1,10 @@
- - - - {{item}} - - + + + @for (item of items; track item) { + + {{item}} + + } +
- \ No newline at end of file diff --git a/src/app/data-entries/select/select-styling/select-styling.component.ts b/src/app/data-entries/select/select-styling/select-styling.component.ts index b339c74a48..759e3bc19b 100644 --- a/src/app/data-entries/select/select-styling/select-styling.component.ts +++ b/src/app/data-entries/select/select-styling/select-styling.component.ts @@ -1,13 +1,13 @@ import { Component, OnInit, ViewChild } from '@angular/core'; import { AbsoluteScrollStrategy, ConnectedPositioningStrategy, HorizontalAlignment, IgxSelectComponent, OverlaySettings, PositionSettings, VerticalAlignment, IgxLabelDirective, IgxSelectItemComponent } from 'igniteui-angular'; import { scaleInTop, scaleOutBottom } from 'igniteui-angular/animations'; -import { NgFor } from '@angular/common'; + @Component({ selector: 'app-select-styling', styleUrls: ['select-styling.component.scss'], templateUrl: 'select-styling.component.html', - imports: [IgxSelectComponent, IgxLabelDirective, NgFor, IgxSelectItemComponent] + imports: [IgxSelectComponent, IgxLabelDirective, IgxSelectItemComponent] }) export class SelectStylingComponent implements OnInit { @ViewChild(IgxSelectComponent, { static: true }) diff --git a/src/app/data-entries/switch/switch-sample-2/switch-sample-2.component.html b/src/app/data-entries/switch/switch-sample-2/switch-sample-2.component.html index ceea2c82c6..82bb5ae9f7 100644 --- a/src/app/data-entries/switch/switch-sample-2/switch-sample-2.component.html +++ b/src/app/data-entries/switch/switch-sample-2/switch-sample-2.component.html @@ -1,4 +1,6 @@ - - {{ setting.name }} - +@for (setting of settings; track setting) { + + {{ setting.name }} + +} diff --git a/src/app/data-entries/switch/switch-sample-2/switch-sample-2.component.ts b/src/app/data-entries/switch/switch-sample-2/switch-sample-2.component.ts index c7b02c93a9..9bf27a76ab 100644 --- a/src/app/data-entries/switch/switch-sample-2/switch-sample-2.component.ts +++ b/src/app/data-entries/switch/switch-sample-2/switch-sample-2.component.ts @@ -1,12 +1,12 @@ import { Component } from '@angular/core'; -import { NgFor } from '@angular/common'; + import { IgxSwitchComponent } from 'igniteui-angular'; @Component({ selector: 'app-switch-sample-2', styleUrls: ['./switch-sample-2.component.scss'], templateUrl: './switch-sample-2.component.html', - imports: [NgFor, IgxSwitchComponent] + imports: [IgxSwitchComponent] }) export class SwitchSample2Component { public settings = [ diff --git a/src/app/data-entries/switch/switch-styling/switch-styling.component.html b/src/app/data-entries/switch/switch-styling/switch-styling.component.html index 1f4726a0c5..db4efd584c 100644 --- a/src/app/data-entries/switch/switch-styling/switch-styling.component.html +++ b/src/app/data-entries/switch/switch-styling/switch-styling.component.html @@ -1,6 +1,8 @@
- - {{ setting.name }} - + @for (setting of settings; track setting) { + + {{ setting.name }} + + }
diff --git a/src/app/data-entries/switch/switch-styling/switch-styling.component.ts b/src/app/data-entries/switch/switch-styling/switch-styling.component.ts index 703e478a53..b6d5f3dece 100644 --- a/src/app/data-entries/switch/switch-styling/switch-styling.component.ts +++ b/src/app/data-entries/switch/switch-styling/switch-styling.component.ts @@ -1,12 +1,12 @@ import { Component } from '@angular/core'; -import { NgFor } from '@angular/common'; + import { IgxSwitchComponent } from 'igniteui-angular'; @Component({ selector: 'app-switch-styling', styleUrls: ['./switch-styling.component.scss'], templateUrl: './switch-styling.component.html', - imports: [NgFor, IgxSwitchComponent] + imports: [IgxSwitchComponent] }) export class SwitchStylingComponent { public settings = [ diff --git a/src/app/grid/grid-action-strip/grid-action-strip-sample.html b/src/app/grid/grid-action-strip/grid-action-strip-sample.html index 8804bfe1ef..9240470f89 100644 --- a/src/app/grid/grid-action-strip/grid-action-strip-sample.html +++ b/src/app/grid/grid-action-strip/grid-action-strip-sample.html @@ -1,43 +1,50 @@
- - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + @if (!inEditMode(actionstrip.context)) { + + @if (isDirty(actionstrip.context)) { + + } + @if (!isDirty(actionstrip.context) && hasDiscardedTransactions(actionstrip.context)) { + + } + @if (isDirty(actionstrip.context)) { + + } + @if (!isDeleted(actionstrip.context)) { + + } + } + +
diff --git a/src/app/grid/grid-action-strip/grid-action-strip-sample.ts b/src/app/grid/grid-action-strip/grid-action-strip-sample.ts index b59916b4c7..f60ed54617 100644 --- a/src/app/grid/grid-action-strip/grid-action-strip-sample.ts +++ b/src/app/grid/grid-action-strip/grid-action-strip-sample.ts @@ -2,13 +2,13 @@ import { Component, ViewChild } from '@angular/core'; import { IgxGridComponent, RowType, Transaction, IgxColumnComponent, IgxActionStripComponent, IgxGridPinningActionsComponent, IgxIconButtonDirective, IgxRippleDirective, IgxIconComponent } from 'igniteui-angular'; import { DATA } from '../../data/nwindData'; import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; -import { NgIf } from '@angular/common'; + @Component({ selector: 'app-grid-row-action-strip', styleUrls: [`grid-action-strip-sample.scss`], templateUrl: 'grid-action-strip-sample.html', - imports: [IgxGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxActionStripComponent, IgxGridPinningActionsComponent, NgIf, IgxIconButtonDirective, IgxRippleDirective, IgxIconComponent] + imports: [IgxGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxActionStripComponent, IgxGridPinningActionsComponent, IgxIconButtonDirective, IgxRippleDirective, IgxIconComponent] }) export class GridActionStripSampleComponent { @ViewChild('grid', { read: IgxGridComponent, static: true }) public grid: IgxGridComponent; diff --git a/src/app/grid/grid-advanced-filtering-sample/grid-advanced-filtering-sample.component.html b/src/app/grid/grid-advanced-filtering-sample/grid-advanced-filtering-sample.component.html index e1324db92a..1e2a5f4754 100644 --- a/src/app/grid/grid-advanced-filtering-sample/grid-advanced-filtering-sample.component.html +++ b/src/app/grid/grid-advanced-filtering-sample/grid-advanced-filtering-sample.component.html @@ -1,20 +1,24 @@
- - + + - - - - - - - - - - - Continued - Discontinued - - - + + + + + + + + + + + @if (val) { + Continued + } + @if (!val) { + Discontinued + } + + +
diff --git a/src/app/grid/grid-advanced-filtering-sample/grid-advanced-filtering-sample.component.ts b/src/app/grid/grid-advanced-filtering-sample/grid-advanced-filtering-sample.component.ts index 98e500272e..5fb57b1ae6 100644 --- a/src/app/grid/grid-advanced-filtering-sample/grid-advanced-filtering-sample.component.ts +++ b/src/app/grid/grid-advanced-filtering-sample/grid-advanced-filtering-sample.component.ts @@ -2,13 +2,13 @@ import { Component, OnInit, ViewChild } from '@angular/core'; import { IgxGridComponent, IgxGridToolbarComponent, IgxColumnComponent, IgxCellTemplateDirective } from 'igniteui-angular'; import { DATA } from '../../data/nwindData'; import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; -import { NgIf } from '@angular/common'; + @Component({ selector: 'app-grid-advanced-filtering-sample', styleUrls: ['./grid-advanced-filtering-sample.component.scss'], templateUrl: 'grid-advanced-filtering-sample.component.html', - imports: [IgxGridComponent, IgxPreventDocumentScrollDirective, IgxGridToolbarComponent, IgxColumnComponent, IgxCellTemplateDirective, NgIf] + imports: [IgxGridComponent, IgxPreventDocumentScrollDirective, IgxGridToolbarComponent, IgxColumnComponent, IgxCellTemplateDirective] }) export class GridAdvancedFilteringSampleComponent implements OnInit { @ViewChild('grid1', { read: IgxGridComponent, static: true }) diff --git a/src/app/grid/grid-advanced-filtering-style/grid-advanced-filtering-style.component.html b/src/app/grid/grid-advanced-filtering-style/grid-advanced-filtering-style.component.html index 6a1ae5a500..d9ffe46a0a 100644 --- a/src/app/grid/grid-advanced-filtering-style/grid-advanced-filtering-style.component.html +++ b/src/app/grid/grid-advanced-filtering-style/grid-advanced-filtering-style.component.html @@ -1,17 +1,21 @@ - - - - - - - - - - - - Continued - Discontinued - - + + + + + + + + + + + + @if (val) { + Continued + } + @if (!val) { + Discontinued + } + + diff --git a/src/app/grid/grid-advanced-filtering-style/grid-advanced-filtering-style.component.ts b/src/app/grid/grid-advanced-filtering-style/grid-advanced-filtering-style.component.ts index f786910ad8..64e3f6b011 100644 --- a/src/app/grid/grid-advanced-filtering-style/grid-advanced-filtering-style.component.ts +++ b/src/app/grid/grid-advanced-filtering-style/grid-advanced-filtering-style.component.ts @@ -2,13 +2,13 @@ import { Component, OnInit, ViewChild } from '@angular/core'; import { IgxGridComponent, IgxGridToolbarComponent, IgxColumnComponent, IgxCellTemplateDirective } from 'igniteui-angular'; import { DATA } from '../../data/nwindData'; import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; -import { NgIf } from '@angular/common'; + @Component({ selector: 'app-grid-adf-style-sample', styleUrls: ['./grid-advanced-filtering-style.component.scss'], templateUrl: 'grid-advanced-filtering-style.component.html', - imports: [IgxGridComponent, IgxPreventDocumentScrollDirective, IgxGridToolbarComponent, IgxColumnComponent, IgxCellTemplateDirective, NgIf] + imports: [IgxGridComponent, IgxPreventDocumentScrollDirective, IgxGridToolbarComponent, IgxColumnComponent, IgxCellTemplateDirective] }) export class GridAdvancedFilteringStyleComponent implements OnInit { diff --git a/src/app/grid/grid-allData-summary/grid-allData-summary.component.html b/src/app/grid/grid-allData-summary/grid-allData-summary.component.html index e6448f3b0c..a55f702894 100644 --- a/src/app/grid/grid-allData-summary/grid-allData-summary.component.html +++ b/src/app/grid/grid-allData-summary/grid-allData-summary.component.html @@ -1,18 +1,20 @@
- - - - - - - - - - - - - - - + + @if (false) { + + } + + + + + + + + + + + + +
diff --git a/src/app/grid/grid-allData-summary/grid-allData-summary.component.ts b/src/app/grid/grid-allData-summary/grid-allData-summary.component.ts index b129f49390..040ca8f264 100644 --- a/src/app/grid/grid-allData-summary/grid-allData-summary.component.ts +++ b/src/app/grid/grid-allData-summary/grid-allData-summary.component.ts @@ -2,7 +2,7 @@ import { Component, ViewChild } from '@angular/core'; import { IgxGridComponent, IgxNumberSummaryOperand, IgxSummaryResult, IgxPaginatorComponent, IgxColumnComponent } from 'igniteui-angular'; import { DATA } from '../../data/nwindData'; import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; -import { NgIf } from '@angular/common'; + class DiscontinuedSummary { public operate(data?: any[], allData = [], fieldName = ''): IgxSummaryResult[] { @@ -34,7 +34,7 @@ class DiscontinuedSummary { selector: 'app-grid-all-data-summary', styleUrls: ['./grid-allData-summary.component.scss'], templateUrl: './grid-allData-summary.component.html', - imports: [IgxGridComponent, IgxPreventDocumentScrollDirective, NgIf, IgxPaginatorComponent, IgxColumnComponent] + imports: [IgxGridComponent, IgxPreventDocumentScrollDirective, IgxPaginatorComponent, IgxColumnComponent] }) export class GridAllDataSummaryComponent { @ViewChild('grid1', { read: IgxGridComponent, static: true }) diff --git a/src/app/grid/grid-cascading-combos/grid-cascading-combos.component.html b/src/app/grid/grid-cascading-combos/grid-cascading-combos.component.html index d61afcb932..ea6e1493ae 100644 --- a/src/app/grid/grid-cascading-combos/grid-cascading-combos.component.html +++ b/src/app/grid/grid-cascading-combos/grid-cascading-combos.component.html @@ -1,46 +1,50 @@
-
- - - - - - - - - - - -
- - - - -
- - - - -
- - - - -
- - - -
+
+ + + + + + + + + + + +
+ + + @if (cell.row.data.loadingRegion) { + + + } +
+ + + + +
+ + + @if (cell.row.data.loadingCity) { + + + } +
+ + + +
diff --git a/src/app/grid/grid-cascading-combos/grid-cascading-combos.component.ts b/src/app/grid/grid-cascading-combos/grid-cascading-combos.component.ts index 751e920501..6410001c3b 100644 --- a/src/app/grid/grid-cascading-combos/grid-cascading-combos.component.ts +++ b/src/app/grid/grid-cascading-combos/grid-cascading-combos.component.ts @@ -4,13 +4,13 @@ import { Country, getCitiesByCountry, getCountries } from '../../data/cities1500 import { DATA } from '../../data/data'; import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; import { FormsModule } from '@angular/forms'; -import { NgIf } from '@angular/common'; + @Component({ selector: 'grid-cascading-combos', templateUrl: './grid-cascading-combos.component.html', styleUrls: ['./grid-cascading-combos.component.scss'], - imports: [IgxGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxCellTemplateDirective, IgxSimpleComboComponent, FormsModule, NgIf, IgxLinearProgressBarComponent] + imports: [IgxGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxCellTemplateDirective, IgxSimpleComboComponent, FormsModule, IgxLinearProgressBarComponent] }) export class GridCascadingCombosComponent implements OnInit { @ViewChildren(IgxSimpleComboComponent) diff --git a/src/app/grid/grid-cellSelection-sample/grid-cellSelection.component.html b/src/app/grid/grid-cellSelection-sample/grid-cellSelection.component.html index 0d6e42a25e..ec3c8211fa 100644 --- a/src/app/grid/grid-cellSelection-sample/grid-cellSelection.component.html +++ b/src/app/grid/grid-cellSelection-sample/grid-cellSelection.component.html @@ -1,61 +1,61 @@ - +
-
- - - - - - - - - -
-
-
-
-
- Events execution sequence - -
-
-
-
+
+ + + + + + + + + +
+
+
+
+
+ Events execution sequence +
+
+
+
+
-
- notification_important - -
    -
  • This is the default selection behavior.
    • -
  • Click on a cell and while pressing the mouse key perform drag action. -
    • -
  • Select a cell and press Shift + Arrow down key, this will start range selection as well.
    • -
- - -
    -
  • Now you can select only one cell within the grid.
    • -
  • On single cell click the previous selection state will be cleared.
    • -
  • The mouse drag will not work and instead of selecting a cell, this will make default text selection.
    • -
- - -
    -
  • Now you are unable to select a cell while interacting with grid UI.
    • -
  • If you need to select a cell, you can use the grid API methods.
    • -
- -
+
+ notification_important + @if (selectionMode === 'multiple') { +
    +
  • This is the default selection behavior.
    • +
  • Click on a cell and while pressing the mouse key perform drag action. +
    • +
  • Select a cell and press Shift + Arrow down key, this will start range selection as well.
    • +
+ } + @if (selectionMode === 'single') { +
    +
  • Now you can select only one cell within the grid.
    • +
  • On single cell click the previous selection state will be cleared.
    • +
  • The mouse drag will not work and instead of selecting a cell, this will make default text selection.
    • +
+ } + @if (selectionMode === 'none') { +
    +
  • Now you are unable to select a cell while interacting with grid UI.
    • +
  • If you need to select a cell, you can use the grid API methods.
    • +
+ } +
diff --git a/src/app/grid/grid-cellSelection-sample/grid-cellSelection.component.ts b/src/app/grid/grid-cellSelection-sample/grid-cellSelection.component.ts index 77b49aca15..2545bdaef4 100644 --- a/src/app/grid/grid-cellSelection-sample/grid-cellSelection.component.ts +++ b/src/app/grid/grid-cellSelection-sample/grid-cellSelection.component.ts @@ -2,13 +2,13 @@ import { Component, ElementRef, OnInit, Renderer2, ViewChild } from '@angular/co import { GridSelectionMode, IgxGridComponent, IgxSnackbarComponent, IgxButtonGroupComponent, IgxColumnComponent, IgxButtonDirective, IgxIconComponent } from 'igniteui-angular'; import { DATA } from '../../data/nwindData'; import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; -import { NgIf } from '@angular/common'; + @Component({ selector: 'app-grid-cell-selection', styleUrls: ['./grid-cellSelection.component.scss'], templateUrl: 'grid-cellSelection.component.html', - imports: [IgxButtonGroupComponent, IgxGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxButtonDirective, IgxIconComponent, IgxSnackbarComponent, NgIf] + imports: [IgxButtonGroupComponent, IgxGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxButtonDirective, IgxIconComponent, IgxSnackbarComponent] }) export class GridCellSelectionComponent implements OnInit { @ViewChild('grid', { static: true }) public grid: IgxGridComponent; diff --git a/src/app/grid/grid-collapsible-columnGroups/grid-collapsible-column-groups.component.html b/src/app/grid/grid-collapsible-columnGroups/grid-collapsible-column-groups.component.html index 6288fc7ad8..36e94fbe39 100644 --- a/src/app/grid/grid-collapsible-columnGroups/grid-collapsible-column-groups.component.html +++ b/src/app/grid/grid-collapsible-columnGroups/grid-collapsible-column-groups.component.html @@ -1,70 +1,76 @@
-
-
- - - - {{column.expanded ? 'expand_more' : 'chevron_right'}} -
- The column is expanded! Click here to collapse - The column is collapsed! Click here to expand -
- - - - - - - - - - {{column.expanded ? 'expand_more' : 'chevron_right'}} -
- The column is expanded! Click here to collapse - The column is collapsed! Click here to expand -
- - - - - - - - - - - - - - - - - - {{val | date:'dd/MM/yyyy'}} - - - - - {{column.expanded ? 'expand_more' : 'chevron_right'}} -
- The column is expanded! Click here to collapse - The column is collapsed! Click here to expand -
- - - - - - - - - - - - - -
+
+
+ + + + {{column.expanded ? 'expand_more' : 'chevron_right'}} +
+ @if (column.expanded) { + The column is expanded! Click here to collapse + } + The column is collapsed! Click here to expand +
+ + + + + + + + + + {{column.expanded ? 'expand_more' : 'chevron_right'}} +
+ @if (column.expanded) { + The column is expanded! Click here to collapse + } + The column is collapsed! Click here to expand +
+ + + + + + + + + + + + + + + + + + {{val | date:'dd/MM/yyyy'}} + + + + + {{column.expanded ? 'expand_more' : 'chevron_right'}} +
+ @if (column.expanded) { + The column is expanded! Click here to collapse + } + The column is collapsed! Click here to expand +
+ + + + + + + + + + + + +
+
diff --git a/src/app/grid/grid-collapsible-columnGroups/grid-collapsible-column-groups.component.ts b/src/app/grid/grid-collapsible-columnGroups/grid-collapsible-column-groups.component.ts index 4980542350..003f52f28d 100644 --- a/src/app/grid/grid-collapsible-columnGroups/grid-collapsible-column-groups.component.ts +++ b/src/app/grid/grid-collapsible-columnGroups/grid-collapsible-column-groups.component.ts @@ -2,13 +2,13 @@ import { Component, OnInit, ViewChild } from '@angular/core'; import { IgxGridComponent, IgxColumnGroupComponent, IgxCollapsibleIndicatorTemplateDirective, IgxIconComponent, IgxTooltipTargetDirective, IgxTooltipDirective, IgxColumnComponent, IgxCellTemplateDirective } from 'igniteui-angular'; import { INVOICE_DATA } from '../../data/invoiceData'; import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; -import { NgIf, DatePipe } from '@angular/common'; +import { DatePipe } from '@angular/common'; @Component({ selector: 'app-grid-collapsible-column-groups', styleUrls: ['./grid-collapsible-column-groups.component.scss'], templateUrl: './grid-collapsible-column-groups.component.html', - imports: [IgxGridComponent, IgxPreventDocumentScrollDirective, IgxColumnGroupComponent, IgxCollapsibleIndicatorTemplateDirective, IgxIconComponent, IgxTooltipTargetDirective, IgxTooltipDirective, NgIf, IgxColumnComponent, IgxCellTemplateDirective, DatePipe] + imports: [IgxGridComponent, IgxPreventDocumentScrollDirective, IgxColumnGroupComponent, IgxCollapsibleIndicatorTemplateDirective, IgxIconComponent, IgxTooltipTargetDirective, IgxTooltipDirective, IgxColumnComponent, IgxCellTemplateDirective, DatePipe] }) export class GridCollapsibleColumnGroupsComponent implements OnInit { diff --git a/src/app/grid/grid-column-data-types-sample/grid-column-data-types-sample.component.html b/src/app/grid/grid-column-data-types-sample/grid-column-data-types-sample.component.html index 7d53f6c9ed..4d10da61eb 100644 --- a/src/app/grid/grid-column-data-types-sample/grid-column-data-types-sample.component.html +++ b/src/app/grid/grid-column-data-types-sample/grid-column-data-types-sample.component.html @@ -1,109 +1,125 @@
- - - Locale: - - {{ locale }} - - Applicable to date, number, currency and percent type columns - + + + Locale: + @for (locale of locales; track locale) { + + {{ locale }} + + } + Applicable to date, number, currency and percent type columns + - - DateTime format: - - {{ dateFormat.format }} - - Applied to 'dateTime' type column only - + + DateTime format: + @for (dateFormat of dateTimeFormats; track dateFormat) { + + {{ dateFormat.format }} + + } + Applied to 'dateTime' type column only + - - Date format: - - {{ dateFormat.format }} - - Applied to 'date' type column only - + + Date format: + @for (dateFormat of dateFormats; track dateFormat) { + + {{ dateFormat.format }} + + } + Applied to 'date' type column only + - - Time format: - - {{ timeFormat.format }} - - Applied to 'time' type column only - + + Time format: + @for (timeFormat of timeFormats; track timeFormat) { + + {{ timeFormat.format }} + + } + Applied to 'time' type column only + - - Timezone: - - {{ timezone }} - - Applicable to dateTime type columns only - + + Timezone: + @for (timezone of timezoneFormats; track timezone) { + + {{ timezone }} + + } + Applicable to dateTime type columns only + - - Currency Code: - - {{ currencyCode }} - - Applicable to currency type columns - - clear - - - -
- - -
Set digits - info -
-
- Decimal representation options, specified by a string in the following - format: minIntegerDigits.minFractionDigits-maxFractionDigits -
- - - - clear - - - {{ digitsInfoMessage }} - + + Currency Code: + @for (currencyCode of currencyCodes; track currencyCode) { + + {{ currencyCode }} + + } + Applicable to currency type columns + + @if (options.currencyCode.length > 0) { + clear + + } + + +
+ + +
Set digits + info +
+
+ Decimal representation options, specified by a string in the following + format: minIntegerDigits.minFractionDigits-maxFractionDigits +
+ + + + @if (options.digitsInfo.length > 0) { + clear + + } + + {{ digitsInfoMessage }} + - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + -
+
diff --git a/src/app/grid/grid-column-data-types-sample/grid-column-data-types-sample.component.ts b/src/app/grid/grid-column-data-types-sample/grid-column-data-types-sample.component.ts index ad04db95a5..1bdee363b5 100644 --- a/src/app/grid/grid-column-data-types-sample/grid-column-data-types-sample.component.ts +++ b/src/app/grid/grid-column-data-types-sample/grid-column-data-types-sample.component.ts @@ -1,6 +1,6 @@ /*eslint-disable*/ import { Component, OnInit } from "@angular/core"; -import { registerLocaleData, NgFor, NgIf, NgClass } from "@angular/common"; +import { registerLocaleData, NgClass } from "@angular/common"; import localeBG from '@angular/common/locales/bg'; import localeDE from '@angular/common/locales/de'; import localeFR from '@angular/common/locales/fr'; @@ -13,7 +13,7 @@ import { IgxPreventDocumentScrollDirective } from "../../directives/prevent-scro selector: "grid-column-data-types-sample", styleUrls: ["./grid-column-data-types-sample.component.scss"], templateUrl: "grid-column-data-types-sample.component.html", - imports: [IgxSelectComponent, FormsModule, IgxPrefixDirective, NgFor, IgxSelectItemComponent, IgxHintDirective, IgxSuffixDirective, NgIf, IgxIconComponent, IgxInputGroupComponent, IgxTooltipTargetDirective, IgxTooltipDirective, IgxInputDirective, NgClass, IgxGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent] + imports: [IgxSelectComponent, FormsModule, IgxPrefixDirective, IgxSelectItemComponent, IgxHintDirective, IgxSuffixDirective, IgxIconComponent, IgxInputGroupComponent, IgxTooltipTargetDirective, IgxTooltipDirective, IgxInputDirective, NgClass, IgxGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent] }) export class GridColumnDataTypesSampleComponent implements OnInit { diff --git a/src/app/grid/grid-conditional-cell-style-2/grid-conditional-cell-style-2.component.html b/src/app/grid/grid-conditional-cell-style-2/grid-conditional-cell-style-2.component.html index c139a79e2c..8e047bc8c0 100644 --- a/src/app/grid/grid-conditional-cell-style-2/grid-conditional-cell-style-2.component.html +++ b/src/app/grid/grid-conditional-cell-style-2/grid-conditional-cell-style-2.component.html @@ -1,20 +1,22 @@
-
- - - - Note: You cannot use the callback functionality here - - -
- - - - +
+ + + + Note: You cannot use the callback functionality here + + +
+ + @for (c of columns; track c) { + + + } +
\ No newline at end of file diff --git a/src/app/grid/grid-conditional-cell-style-2/grid-conditional-cell-style-2.component.ts b/src/app/grid/grid-conditional-cell-style-2/grid-conditional-cell-style-2.component.ts index e40a6c470b..c6fd68952c 100644 --- a/src/app/grid/grid-conditional-cell-style-2/grid-conditional-cell-style-2.component.ts +++ b/src/app/grid/grid-conditional-cell-style-2/grid-conditional-cell-style-2.component.ts @@ -1,13 +1,13 @@ import { Component, OnInit, ViewChild } from '@angular/core'; import { IgxGridComponent, IgxInputGroupComponent, IgxInputDirective, IgxHintDirective, IgxButtonDirective, IgxColumnComponent } from 'igniteui-angular'; import { athletesData } from '../../data/athletesData'; -import { NgFor, JsonPipe } from '@angular/common'; +import { JsonPipe } from '@angular/common'; @Component({ selector: 'app-grid-conditional-cell-style-2', styleUrls: ['./grid-conditional-cell-style-2.component.scss'], templateUrl: './grid-conditional-cell-style-2.component.html', - imports: [IgxInputGroupComponent, IgxInputDirective, IgxHintDirective, IgxButtonDirective, IgxGridComponent, NgFor, IgxColumnComponent, JsonPipe] + imports: [IgxInputGroupComponent, IgxInputDirective, IgxHintDirective, IgxButtonDirective, IgxGridComponent, IgxColumnComponent, JsonPipe] }) export class GridConditionalCellStyle2Component implements OnInit { @ViewChild('grid1', { read: IgxGridComponent, static: true }) diff --git a/src/app/grid/grid-contextmenu-sample/contextmenu/contextmenu.component.html b/src/app/grid/grid-contextmenu-sample/contextmenu/contextmenu.component.html index 2479d3d999..01a85613be 100644 --- a/src/app/grid/grid-contextmenu-sample/contextmenu/contextmenu.component.html +++ b/src/app/grid/grid-contextmenu-sample/contextmenu/contextmenu.component.html @@ -1,11 +1,15 @@ -
+@if (cell) { +
- content_copy Copy Cell Data + content_copy Copy Cell Data - content_copy Copy Row Data + content_copy Copy Row Data - + @if (hasMultiCellSelection()) { + content_copy Copy Cells Data - -
+ + } +
+} diff --git a/src/app/grid/grid-contextmenu-sample/contextmenu/contextmenu.component.ts b/src/app/grid/grid-contextmenu-sample/contextmenu/contextmenu.component.ts index 8bc0830837..c50f9a7d3d 100644 --- a/src/app/grid/grid-contextmenu-sample/contextmenu/contextmenu.component.ts +++ b/src/app/grid/grid-contextmenu-sample/contextmenu/contextmenu.component.ts @@ -1,6 +1,6 @@ import { Component, EventEmitter, Input, Output} from '@angular/core'; import { IgxIconModule, IgxIconComponent } from 'igniteui-angular'; -import { NgIf, NgStyle } from '@angular/common'; +import { NgStyle } from '@angular/common'; interface ICopyData { data: any; @@ -9,7 +9,7 @@ interface ICopyData { selector: 'app-contextmenu', styleUrls: ['./contextmenu.component.scss'], templateUrl: './contextmenu.component.html', - imports: [NgIf, NgStyle, IgxIconComponent] + imports: [NgStyle, IgxIconComponent] }) export class ContextmenuComponent { diff --git a/src/app/grid/grid-contextmenu-sample/grid-contextmenu-sample.component.html b/src/app/grid/grid-contextmenu-sample/grid-contextmenu-sample.component.html index dfb8a51491..4ac2bb5610 100644 --- a/src/app/grid/grid-contextmenu-sample/grid-contextmenu-sample.component.html +++ b/src/app/grid/grid-contextmenu-sample/grid-contextmenu-sample.component.html @@ -1,30 +1,32 @@
-
- - - - - - - - ${{val}} - - - - - - - -
- - -
-
-
-
- 
{{copiedData}}
-
+
+ + + + + + + + ${{val}} + + + + + + + + @if (contextmenu) { +
+ + +
+ } +
+
+
+ 
{{copiedData}}
+
diff --git a/src/app/grid/grid-contextmenu-sample/grid-contextmenu-sample.component.ts b/src/app/grid/grid-contextmenu-sample/grid-contextmenu-sample.component.ts index 916d208123..2389c57133 100644 --- a/src/app/grid/grid-contextmenu-sample/grid-contextmenu-sample.component.ts +++ b/src/app/grid/grid-contextmenu-sample/grid-contextmenu-sample.component.ts @@ -2,14 +2,14 @@ import { Component, OnInit, ViewChild} from '@angular/core'; import { DefaultSortingStrategy, IgxGridComponent, SortingDirection, IgxColumnComponent, IgxCellTemplateDirective } from 'igniteui-angular'; import { DATA } from '../../data/nwindData'; import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; -import { NgIf } from '@angular/common'; + import { ContextmenuComponent } from './contextmenu/contextmenu.component'; @Component({ selector: 'app-grid-contextmenu-sample', styleUrls: ['./grid-contextmenu-sample.component.scss'], templateUrl: './grid-contextmenu-sample.component.html', - imports: [IgxGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxCellTemplateDirective, NgIf, ContextmenuComponent] + imports: [IgxGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxCellTemplateDirective, ContextmenuComponent] }) export class GridContextmenuSampleComponent implements OnInit { diff --git a/src/app/grid/grid-custom-filtering/grid-custom-filtering.component.html b/src/app/grid/grid-custom-filtering/grid-custom-filtering.component.html index 31be41889e..2aa46713bb 100644 --- a/src/app/grid/grid-custom-filtering/grid-custom-filtering.component.html +++ b/src/app/grid/grid-custom-filtering/grid-custom-filtering.component.html @@ -1,21 +1,25 @@
- - - - - - - - {{+val | currency}} - - - - - - - Continued - Discontinued - - - + + + + + + + + {{+val | currency}} + + + + + + + @if (val) { + Continued + } + @if (!val) { + Discontinued + } + + +
diff --git a/src/app/grid/grid-custom-filtering/grid-custom-filtering.component.ts b/src/app/grid/grid-custom-filtering/grid-custom-filtering.component.ts index 1d0b962490..29e6b6cebd 100644 --- a/src/app/grid/grid-custom-filtering/grid-custom-filtering.component.ts +++ b/src/app/grid/grid-custom-filtering/grid-custom-filtering.component.ts @@ -2,13 +2,13 @@ import { Component, OnInit } from '@angular/core'; import { IgxBooleanFilteringOperand, IgxStringFilteringOperand, IgxGridComponent, IgxColumnComponent, IgxCellTemplateDirective } from 'igniteui-angular'; import { DATA } from '../../data/nwindData'; import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; -import { NgIf, CurrencyPipe } from '@angular/common'; +import { CurrencyPipe } from '@angular/common'; @Component({ selector: 'app-grid-custom-filtering', styleUrls: ['./grid-custom-filtering.component.scss'], templateUrl: './grid-custom-filtering.component.html', - imports: [IgxGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxCellTemplateDirective, NgIf, CurrencyPipe] + imports: [IgxGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxCellTemplateDirective, CurrencyPipe] }) export class GridCustomFilteringComponent implements OnInit { public data: any[]; diff --git a/src/app/grid/grid-custom-remote-paging-sample/custom-remote-paging-sample.component.html b/src/app/grid/grid-custom-remote-paging-sample/custom-remote-paging-sample.component.html index b1cb055f41..95b01e8024 100644 --- a/src/app/grid/grid-custom-remote-paging-sample/custom-remote-paging-sample.component.html +++ b/src/app/grid/grid-custom-remote-paging-sample/custom-remote-paging-sample.component.html @@ -1,34 +1,40 @@
- - - - - - - - - -
-
- - - {{1}} ... - - - {{item + 1}} - - - ... {{ totalPages - }} - - -
-
- - - + + + + + + + + + +
+
+ + @if (shouldShowFirstPage) { + + {{1}} ... + + } + @for (item of pages; track item) { + + {{item + 1}} + + } + @if (shouldShowLastPage) { + + ... {{ totalPages + }} + + } + +
+
+ + +
diff --git a/src/app/grid/grid-custom-remote-paging-sample/custom-remote-paging-sample.component.ts b/src/app/grid/grid-custom-remote-paging-sample/custom-remote-paging-sample.component.ts index bf1bc448cf..3ac7f53000 100644 --- a/src/app/grid/grid-custom-remote-paging-sample/custom-remote-paging-sample.component.ts +++ b/src/app/grid/grid-custom-remote-paging-sample/custom-remote-paging-sample.component.ts @@ -3,7 +3,7 @@ import { IgxGridComponent, IgxColumnComponent, IgxPaginatorComponent, IgxPaginat import { Observable } from 'rxjs'; import { RemotePagingService } from '../../services/remotePaging.service'; import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; -import { NgIf, NgFor, AsyncPipe } from '@angular/common'; +import { AsyncPipe } from '@angular/common'; import { RouterLink } from '@angular/router'; @Component({ encapsulation: ViewEncapsulation.None, @@ -11,7 +11,7 @@ import { RouterLink } from '@angular/router'; selector: 'app-custom-remote-paging-grid-sample', styleUrls: ['./custom-remote-paging-sample.component.scss'], templateUrl: './custom-remote-paging-sample.component.html', - imports: [IgxGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxPaginatorComponent, IgxPaginatorContentDirective, IgxButtonDirective, NgIf, RouterLink, NgFor, AsyncPipe] + imports: [IgxGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxPaginatorComponent, IgxPaginatorContentDirective, IgxButtonDirective, RouterLink, AsyncPipe] }) export class CustomRemotePagingGridSampleComponent implements OnInit, AfterViewInit, OnDestroy { @ViewChild('grid1', { static: true }) public grid1: IgxGridComponent; diff --git a/src/app/grid/grid-custom-summaries-selection/grid-custom-summaries-selection.component.html b/src/app/grid/grid-custom-summaries-selection/grid-custom-summaries-selection.component.html index 983b4223bf..cb06ebab6d 100644 --- a/src/app/grid/grid-custom-summaries-selection/grid-custom-summaries-selection.component.html +++ b/src/app/grid/grid-custom-summaries-selection/grid-custom-summaries-selection.component.html @@ -1,25 +1,31 @@
- - - - - - - - Continued - Discontinued - - - - -
-
- {{ summary.label }} - {{ format(summary.summaryResult) }} -
-
- - + + + + + + + + @if (val) { + Continued + } + @if (!val) { + Discontinued + } + + + + +
+ @for (summary of selectionSummaries; track summary) { +
+ {{ summary.label }} + {{ format(summary.summaryResult) }} +
+ } +
+ +
diff --git a/src/app/grid/grid-custom-summaries-selection/grid-custom-summaries-selection.component.ts b/src/app/grid/grid-custom-summaries-selection/grid-custom-summaries-selection.component.ts index 2aa1a87978..733a91198b 100644 --- a/src/app/grid/grid-custom-summaries-selection/grid-custom-summaries-selection.component.ts +++ b/src/app/grid/grid-custom-summaries-selection/grid-custom-summaries-selection.component.ts @@ -1,4 +1,4 @@ -import { formatDate, NgIf, NgFor } from '@angular/common'; +import { formatDate } from '@angular/common'; import { AfterViewInit, Component, ViewChild, OnInit, ChangeDetectorRef} from '@angular/core'; import { IgxDateSummaryOperand, IgxGridComponent, IgxNumberSummaryOperand, IgxSummaryOperand, IgxSummaryResult, IgxColumnComponent, IgxCellTemplateDirective, IgxGridFooterComponent } from 'igniteui-angular'; import { DATA } from '../../data/nwindData'; @@ -34,7 +34,7 @@ class MySummary { selector: 'app-grid-sample', styleUrls: ['./grid-custom-summaries-selection.component.scss'], templateUrl: 'grid-custom-summaries-selection.component.html', - imports: [IgxGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxCellTemplateDirective, NgIf, IgxGridFooterComponent, NgFor] + imports: [IgxGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxCellTemplateDirective, IgxGridFooterComponent] }) export class GridCustomSummariesSelectionComponent implements AfterViewInit, OnInit { diff --git a/src/app/grid/grid-disable-summaries/grid-disable-summaries.component.html b/src/app/grid/grid-disable-summaries/grid-disable-summaries.component.html index e3db1bd217..b0527c0f99 100644 --- a/src/app/grid/grid-disable-summaries/grid-disable-summaries.component.html +++ b/src/app/grid/grid-disable-summaries/grid-disable-summaries.component.html @@ -1,101 +1,100 @@
-
-
Disable Summaries for Column:
- -
- +
+
+
+

+ Disabled Summaries +

+
+
+ @for (summary of column.summaries; track summary; let i = $index) { + + {{ summary.summaryLabel }} + + } +
+
+ + -
-
-
-

- Disabled Summaries -

-
- -
- - {{ summary.summaryLabel }} - -
- -
- - -
-
-
+ Enable All +
- -
- +
+
+ } +
+ - - - - - - - - - - - - + + + + + + + + + + + +
diff --git a/src/app/grid/grid-disable-summaries/grid-disable-summaries.component.ts b/src/app/grid/grid-disable-summaries/grid-disable-summaries.component.ts index 5036a6315b..e3355d61c7 100644 --- a/src/app/grid/grid-disable-summaries/grid-disable-summaries.component.ts +++ b/src/app/grid/grid-disable-summaries/grid-disable-summaries.component.ts @@ -22,7 +22,7 @@ import { } from "igniteui-angular"; import { DATA } from "../../data/nwindData"; import { IgxPreventDocumentScrollDirective } from "../../directives/prevent-scroll.directive"; -import { NgFor } from "@angular/common"; + class UnitsInStockSummary { public operate( @@ -156,14 +156,13 @@ class DiscontinuedSummary { styleUrls: ["./grid-disable-summaries.component.scss"], templateUrl: "grid-disable-summaries.component.html", imports: [ - NgFor, - IgxGridComponent, - IgxPreventDocumentScrollDirective, - IgxColumnComponent, - IgxButtonDirective, - IgxCheckboxComponent, - IgxToggleDirective - ] + IgxGridComponent, + IgxPreventDocumentScrollDirective, + IgxColumnComponent, + IgxButtonDirective, + IgxCheckboxComponent, + IgxToggleDirective +] }) export class GridDisableSummariesComponent implements OnInit, AfterViewInit { @ViewChild("grid1", { static: true }) public grid1: IgxGridComponent; diff --git a/src/app/grid/grid-excel-style-filtering-sample-1/grid-excel-style-filtering-sample-1.component.html b/src/app/grid/grid-excel-style-filtering-sample-1/grid-excel-style-filtering-sample-1.component.html index bd0320d517..2ea2c6aba9 100644 --- a/src/app/grid/grid-excel-style-filtering-sample-1/grid-excel-style-filtering-sample-1.component.html +++ b/src/app/grid/grid-excel-style-filtering-sample-1/grid-excel-style-filtering-sample-1.component.html @@ -1,31 +1,35 @@
-
- -
- - - - - - +
+ +
+ + + + + + - - - - - - - {{+val | currency}} - - - - - - - Continued - Discontinued - - - + + + + + + + {{+val | currency}} + + + + + + + @if (val) { + Continued + } + @if (!val) { + Discontinued + } + + +
diff --git a/src/app/grid/grid-excel-style-filtering-sample-1/grid-excel-style-filtering-sample-1.component.ts b/src/app/grid/grid-excel-style-filtering-sample-1/grid-excel-style-filtering-sample-1.component.ts index 37f6d7ec05..3f0424b18d 100644 --- a/src/app/grid/grid-excel-style-filtering-sample-1/grid-excel-style-filtering-sample-1.component.ts +++ b/src/app/grid/grid-excel-style-filtering-sample-1/grid-excel-style-filtering-sample-1.component.ts @@ -2,13 +2,13 @@ import { Component, HostBinding, OnInit, ViewChild } from '@angular/core'; import { IgxGridComponent, IgxButtonGroupComponent, IgxGridToolbarComponent, IgxGridToolbarActionsComponent, IgxGridToolbarHidingComponent, IgxColumnComponent, IgxCellTemplateDirective } from 'igniteui-angular'; import { DATA } from '../../data/nwindData'; import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; -import { NgIf, CurrencyPipe } from '@angular/common'; +import { CurrencyPipe } from '@angular/common'; @Component({ selector: 'app-grid-sample', styleUrls: ['./grid-excel-style-filtering-sample-1.component.scss'], templateUrl: 'grid-excel-style-filtering-sample-1.component.html', - imports: [IgxButtonGroupComponent, IgxGridComponent, IgxPreventDocumentScrollDirective, IgxGridToolbarComponent, IgxGridToolbarActionsComponent, IgxGridToolbarHidingComponent, IgxColumnComponent, IgxCellTemplateDirective, NgIf, CurrencyPipe] + imports: [IgxButtonGroupComponent, IgxGridComponent, IgxPreventDocumentScrollDirective, IgxGridToolbarComponent, IgxGridToolbarActionsComponent, IgxGridToolbarHidingComponent, IgxColumnComponent, IgxCellTemplateDirective, CurrencyPipe] }) export class ExcelStyleFilteringSample1Component implements OnInit { diff --git a/src/app/grid/grid-excel-style-filtering-sample-2/grid-excel-style-filtering-sample-2.component.html b/src/app/grid/grid-excel-style-filtering-sample-2/grid-excel-style-filtering-sample-2.component.html index 5abfe3eddc..55ad53ecb4 100644 --- a/src/app/grid/grid-excel-style-filtering-sample-2/grid-excel-style-filtering-sample-2.component.html +++ b/src/app/grid/grid-excel-style-filtering-sample-2/grid-excel-style-filtering-sample-2.component.html @@ -1,28 +1,32 @@
- - - - - - + + + + + + - - - - - - - {{+val | currency}} - - - - - - - Continued - Discontinued - - - + + + + + + + {{+val | currency}} + + + + + + + @if (val) { + Continued + } + @if (!val) { + Discontinued + } + + +
diff --git a/src/app/grid/grid-excel-style-filtering-sample-2/grid-excel-style-filtering-sample-2.component.ts b/src/app/grid/grid-excel-style-filtering-sample-2/grid-excel-style-filtering-sample-2.component.ts index 30daafb053..47043c9a5f 100644 --- a/src/app/grid/grid-excel-style-filtering-sample-2/grid-excel-style-filtering-sample-2.component.ts +++ b/src/app/grid/grid-excel-style-filtering-sample-2/grid-excel-style-filtering-sample-2.component.ts @@ -2,13 +2,13 @@ import { Component, OnInit, ViewChild } from '@angular/core'; import { IgxGridComponent, IgxGridToolbarComponent, IgxGridToolbarActionsComponent, IgxGridToolbarHidingComponent, IgxColumnComponent, IgxCellTemplateDirective } from 'igniteui-angular'; import { DATA } from '../../data/nwindData'; import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; -import { NgIf, CurrencyPipe } from '@angular/common'; +import { CurrencyPipe } from '@angular/common'; @Component({ selector: 'app-grid-sample', styleUrls: ['./grid-excel-style-filtering-sample-2.component.scss'], templateUrl: 'grid-excel-style-filtering-sample-2.component.html', - imports: [IgxGridComponent, IgxPreventDocumentScrollDirective, IgxGridToolbarComponent, IgxGridToolbarActionsComponent, IgxGridToolbarHidingComponent, IgxColumnComponent, IgxCellTemplateDirective, NgIf, CurrencyPipe] + imports: [IgxGridComponent, IgxPreventDocumentScrollDirective, IgxGridToolbarComponent, IgxGridToolbarActionsComponent, IgxGridToolbarHidingComponent, IgxColumnComponent, IgxCellTemplateDirective, CurrencyPipe] }) export class ExcelStyleFilteringSample2Component implements OnInit { diff --git a/src/app/grid/grid-excel-style-filtering-sample-3/grid-excel-style-filtering-sample-3.component.html b/src/app/grid/grid-excel-style-filtering-sample-3/grid-excel-style-filtering-sample-3.component.html index 3dd4ef33cb..b650582b89 100644 --- a/src/app/grid/grid-excel-style-filtering-sample-3/grid-excel-style-filtering-sample-3.component.html +++ b/src/app/grid/grid-excel-style-filtering-sample-3/grid-excel-style-filtering-sample-3.component.html @@ -1,49 +1,53 @@
- - - - - - + + + + + + - - filter_alt - + + filter_alt + - - - - + + + + - - + + - - - - + + + + - - - - - - - {{+val | currency}} - - - - - - - Continued - Discontinued - - - + + + + + + + {{+val | currency}} + + + + + + + @if (val) { + Continued + } + @if (!val) { + Discontinued + } + + +
diff --git a/src/app/grid/grid-excel-style-filtering-sample-3/grid-excel-style-filtering-sample-3.component.ts b/src/app/grid/grid-excel-style-filtering-sample-3/grid-excel-style-filtering-sample-3.component.ts index 99c147a11f..7012278b08 100644 --- a/src/app/grid/grid-excel-style-filtering-sample-3/grid-excel-style-filtering-sample-3.component.ts +++ b/src/app/grid/grid-excel-style-filtering-sample-3/grid-excel-style-filtering-sample-3.component.ts @@ -2,13 +2,13 @@ import { Component, OnInit, ViewChild } from '@angular/core'; import { IgxGridComponent, IgxGridToolbarComponent, IgxGridToolbarActionsComponent, IgxGridToolbarHidingComponent, IgxExcelStyleHeaderIconDirective, IgxIconComponent, IgxGridExcelStyleFilteringComponent, IgxExcelStyleColumnOperationsTemplateDirective, IgxExcelStyleHeaderComponent, IgxExcelStyleSortingComponent, IgxExcelStyleFilterOperationsTemplateDirective, IgxExcelStyleSearchComponent, IgxColumnComponent, IgxCellTemplateDirective } from 'igniteui-angular'; import { DATA } from '../../data/nwindData'; import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; -import { NgIf, CurrencyPipe } from '@angular/common'; +import { CurrencyPipe } from '@angular/common'; @Component({ selector: 'app-grid-sample', styleUrls: ['./grid-excel-style-filtering-sample-3.component.scss'], templateUrl: 'grid-excel-style-filtering-sample-3.component.html', - imports: [IgxGridComponent, IgxPreventDocumentScrollDirective, IgxGridToolbarComponent, IgxGridToolbarActionsComponent, IgxGridToolbarHidingComponent, IgxExcelStyleHeaderIconDirective, IgxIconComponent, IgxGridExcelStyleFilteringComponent, IgxExcelStyleColumnOperationsTemplateDirective, IgxExcelStyleHeaderComponent, IgxExcelStyleSortingComponent, IgxExcelStyleFilterOperationsTemplateDirective, IgxExcelStyleSearchComponent, IgxColumnComponent, IgxCellTemplateDirective, NgIf, CurrencyPipe] + imports: [IgxGridComponent, IgxPreventDocumentScrollDirective, IgxGridToolbarComponent, IgxGridToolbarActionsComponent, IgxGridToolbarHidingComponent, IgxExcelStyleHeaderIconDirective, IgxIconComponent, IgxGridExcelStyleFilteringComponent, IgxExcelStyleColumnOperationsTemplateDirective, IgxExcelStyleHeaderComponent, IgxExcelStyleSortingComponent, IgxExcelStyleFilterOperationsTemplateDirective, IgxExcelStyleSearchComponent, IgxColumnComponent, IgxCellTemplateDirective, CurrencyPipe] }) export class ExcelStyleFilteringSample3Component implements OnInit { diff --git a/src/app/grid/grid-excel-style-filtering-style/grid-excel-style-filtering-style.component.html b/src/app/grid/grid-excel-style-filtering-style/grid-excel-style-filtering-style.component.html index fc21df2121..3449a836f8 100644 --- a/src/app/grid/grid-excel-style-filtering-style/grid-excel-style-filtering-style.component.html +++ b/src/app/grid/grid-excel-style-filtering-style/grid-excel-style-filtering-style.component.html @@ -1,23 +1,27 @@
- - - - - - - - {{+val | currency}} - - - - - - - Continued - Discontinued - - - + + + + + + + + {{+val | currency}} + + + + + + + @if (val) { + Continued + } + @if (!val) { + Discontinued + } + + +
diff --git a/src/app/grid/grid-excel-style-filtering-style/grid-excel-style-filtering-style.component.ts b/src/app/grid/grid-excel-style-filtering-style/grid-excel-style-filtering-style.component.ts index 1ca4f900d9..c4664769d9 100644 --- a/src/app/grid/grid-excel-style-filtering-style/grid-excel-style-filtering-style.component.ts +++ b/src/app/grid/grid-excel-style-filtering-style/grid-excel-style-filtering-style.component.ts @@ -2,13 +2,13 @@ import { Component, OnInit, ViewChild } from '@angular/core'; import { IgxGridComponent, IgxColumnComponent, IgxCellTemplateDirective } from 'igniteui-angular'; import { DATA } from '../../data/nwindData'; import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; -import { NgIf, CurrencyPipe } from '@angular/common'; +import { CurrencyPipe } from '@angular/common'; @Component({ selector: 'app-grid-esf-style-sample', styleUrls: ['./grid-excel-style-filtering-style.component.scss'], templateUrl: 'grid-excel-style-filtering-style.component.html', - imports: [IgxGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxCellTemplateDirective, NgIf, CurrencyPipe] + imports: [IgxGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxCellTemplateDirective, CurrencyPipe] }) export class ExcelStyleFilteringStyleComponent implements OnInit { diff --git a/src/app/grid/grid-export-visualization/grid-export-visualization.component.html b/src/app/grid/grid-export-visualization/grid-export-visualization.component.html index 87a1a245e7..f8271e3260 100644 --- a/src/app/grid/grid-export-visualization/grid-export-visualization.component.html +++ b/src/app/grid/grid-export-visualization/grid-export-visualization.component.html @@ -1,31 +1,35 @@
- - - - - - - + + + + + + + - - - - - - - {{+val | currency}} - - - - - - - Continued - Discontinued - - - + + + + + + + {{+val | currency}} + + + + + + + @if (val) { + Continued + } + @if (!val) { + Discontinued + } + + +
diff --git a/src/app/grid/grid-export-visualization/grid-export-visualization.component.ts b/src/app/grid/grid-export-visualization/grid-export-visualization.component.ts index 0d08632b94..10d788dd43 100644 --- a/src/app/grid/grid-export-visualization/grid-export-visualization.component.ts +++ b/src/app/grid/grid-export-visualization/grid-export-visualization.component.ts @@ -2,13 +2,13 @@ import { Component } from '@angular/core'; import { DATA } from '../../data/nwindData'; import { IgxGridComponent, IgxGridToolbarComponent, IgxGridToolbarActionsComponent, IgxButtonDirective, IgxGridToolbarExporterComponent, IgxColumnComponent, IgxCellTemplateDirective } from 'igniteui-angular'; import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; -import { NgIf, CurrencyPipe } from '@angular/common'; +import { CurrencyPipe } from '@angular/common'; @Component({ selector: 'app-grid-export-visualization', templateUrl: './grid-export-visualization.component.html', styleUrls: ['./grid-export-visualization.component.scss'], - imports: [IgxGridComponent, IgxPreventDocumentScrollDirective, IgxGridToolbarComponent, IgxGridToolbarActionsComponent, IgxButtonDirective, IgxGridToolbarExporterComponent, IgxColumnComponent, IgxCellTemplateDirective, NgIf, CurrencyPipe] + imports: [IgxGridComponent, IgxPreventDocumentScrollDirective, IgxGridToolbarComponent, IgxGridToolbarActionsComponent, IgxButtonDirective, IgxGridToolbarExporterComponent, IgxColumnComponent, IgxCellTemplateDirective, CurrencyPipe] }) export class GridExportVisualizationComponent { public localData = []; diff --git a/src/app/grid/grid-external-advanced-filtering/grid-external-advanced-filtering.component.html b/src/app/grid/grid-external-advanced-filtering/grid-external-advanced-filtering.component.html index 156917abc1..9749e2b5f4 100644 --- a/src/app/grid/grid-external-advanced-filtering/grid-external-advanced-filtering.component.html +++ b/src/app/grid/grid-external-advanced-filtering/grid-external-advanced-filtering.component.html @@ -1,24 +1,28 @@
- - + + - - - - - - - - {{+val | currency}} - - - - - - - Continued - Discontinued - - - + + + + + + + + {{+val | currency}} + + + + + + + @if (val) { + Continued + } + @if (!val) { + Discontinued + } + + +
diff --git a/src/app/grid/grid-external-advanced-filtering/grid-external-advanced-filtering.component.ts b/src/app/grid/grid-external-advanced-filtering/grid-external-advanced-filtering.component.ts index 3b622bcb7c..293e0513ad 100644 --- a/src/app/grid/grid-external-advanced-filtering/grid-external-advanced-filtering.component.ts +++ b/src/app/grid/grid-external-advanced-filtering/grid-external-advanced-filtering.component.ts @@ -2,12 +2,12 @@ import { Component } from '@angular/core'; import { IgxGridComponent, IgxAdvancedFilteringDialogComponent, IgxColumnComponent, IgxCellTemplateDirective } from 'igniteui-angular'; import { DATA } from '../../data/nwindData'; import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; -import { NgIf, CurrencyPipe } from '@angular/common'; +import { CurrencyPipe } from '@angular/common'; @Component({ selector: 'app-grid-external-advanced-filtering', templateUrl: './grid-external-advanced-filtering.component.html', styleUrls: ['./grid-external-advanced-filtering.component.scss'], - imports: [IgxAdvancedFilteringDialogComponent, IgxGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxCellTemplateDirective, NgIf, CurrencyPipe] + imports: [IgxAdvancedFilteringDialogComponent, IgxGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxCellTemplateDirective, CurrencyPipe] }) export class GridExternalAdvancedFilteringComponent { diff --git a/src/app/grid/grid-external-excel-style-filtering/grid-external-excel-style-filtering.component.html b/src/app/grid/grid-external-excel-style-filtering/grid-external-excel-style-filtering.component.html index 4be0691b9b..54de2b9a89 100644 --- a/src/app/grid/grid-external-excel-style-filtering/grid-external-excel-style-filtering.component.html +++ b/src/app/grid/grid-external-excel-style-filtering/grid-external-excel-style-filtering.component.html @@ -1,44 +1,50 @@
-
- - - - {{ c.field }} - - +
+ + + @for (c of grid1.columns; track c) { + + {{ c.field }} + + } + - - -
+ + +
- - - - - - - Export to Excel - Export to CSV - - - + + + + + + + Export to Excel + Export to CSV + + + - - - - - - - {{+val | currency}} - - - - - - - Continued - Discontinued - - - + + + + + + + {{+val | currency}} + + + + + + + @if (val) { + Continued + } + @if (!val) { + Discontinued + } + + +
diff --git a/src/app/grid/grid-external-excel-style-filtering/grid-external-excel-style-filtering.component.ts b/src/app/grid/grid-external-excel-style-filtering/grid-external-excel-style-filtering.component.ts index 289cb247bc..18d1274631 100644 --- a/src/app/grid/grid-external-excel-style-filtering/grid-external-excel-style-filtering.component.ts +++ b/src/app/grid/grid-external-excel-style-filtering/grid-external-excel-style-filtering.component.ts @@ -1,7 +1,7 @@ import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core'; import { IgxGridComponent, IgxSelectComponent, IgxLabelDirective, IgxSelectItemComponent, IgxGridExcelStyleFilteringComponent, IgxGridToolbarComponent, IgxGridToolbarActionsComponent, IgxGridToolbarHidingComponent, IgxGridToolbarPinningComponent, IgxGridToolbarExporterComponent, IgxExcelTextDirective, IgxCSVTextDirective, IgxColumnComponent, IgxCellTemplateDirective } from 'igniteui-angular'; import { DATA } from '../../data/nwindData'; -import { NgFor, NgIf, CurrencyPipe } from '@angular/common'; +import { CurrencyPipe } from '@angular/common'; import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; @Component({ @@ -9,7 +9,7 @@ import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scro selector: 'app-grid-external-excel-style-filtering', templateUrl: './grid-external-excel-style-filtering.component.html', styleUrls: ['./grid-external-excel-style-filtering.component.scss'], - imports: [IgxSelectComponent, IgxLabelDirective, NgFor, IgxSelectItemComponent, IgxGridExcelStyleFilteringComponent, IgxGridComponent, IgxPreventDocumentScrollDirective, IgxGridToolbarComponent, IgxGridToolbarActionsComponent, IgxGridToolbarHidingComponent, IgxGridToolbarPinningComponent, IgxGridToolbarExporterComponent, IgxExcelTextDirective, IgxCSVTextDirective, IgxColumnComponent, IgxCellTemplateDirective, NgIf, CurrencyPipe] + imports: [IgxSelectComponent, IgxLabelDirective, IgxSelectItemComponent, IgxGridExcelStyleFilteringComponent, IgxGridComponent, IgxPreventDocumentScrollDirective, IgxGridToolbarComponent, IgxGridToolbarActionsComponent, IgxGridToolbarHidingComponent, IgxGridToolbarPinningComponent, IgxGridToolbarExporterComponent, IgxExcelTextDirective, IgxCSVTextDirective, IgxColumnComponent, IgxCellTemplateDirective, CurrencyPipe] }) export class GridExternalExcelStyleFilteringComponent implements OnInit { diff --git a/src/app/grid/grid-external-outlet-sample/grid-external-outlet-sample.component.html b/src/app/grid/grid-external-outlet-sample/grid-external-outlet-sample.component.html index f227128692..6233012077 100644 --- a/src/app/grid/grid-external-outlet-sample/grid-external-outlet-sample.component.html +++ b/src/app/grid/grid-external-outlet-sample/grid-external-outlet-sample.component.html @@ -1,47 +1,55 @@
- - - - - - - - {{+val | currency}} - - - - - - - Continued - Discontinued - - - + + + + + + + + {{+val | currency}} + + + + + + + @if (val) { + Continued + } + @if (!val) { + Discontinued + } + + + -
+
- - - - - - - {{+val | currency}} - - - - - - - Continued - Discontinued - - + [allowFiltering]="true" [filterMode]="'excelStyleFilter'" [outlet]="filteringOverlayOutlet"> + + + + + + + {{+val | currency}} + + + + + + + @if (val) { + Continued + } + @if (!val) { + Discontinued + } + + -
+
-
+
diff --git a/src/app/grid/grid-external-outlet-sample/grid-external-outlet-sample.component.ts b/src/app/grid/grid-external-outlet-sample/grid-external-outlet-sample.component.ts index 5853b834a9..c42739c21e 100644 --- a/src/app/grid/grid-external-outlet-sample/grid-external-outlet-sample.component.ts +++ b/src/app/grid/grid-external-outlet-sample/grid-external-outlet-sample.component.ts @@ -2,13 +2,13 @@ import { Component, OnInit } from '@angular/core'; import { DATA } from '../../data/nwindData'; import { IgxGridComponent, IgxColumnComponent, IgxCellTemplateDirective, IgxOverlayOutletDirective } from 'igniteui-angular'; import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; -import { NgIf, CurrencyPipe } from '@angular/common'; +import { CurrencyPipe } from '@angular/common'; @Component({ selector: 'app-grid-external-outlet', styleUrls: ['./grid-external-outlet-sample.component.scss'], templateUrl: 'grid-external-outlet-sample.component.html', - imports: [IgxGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxCellTemplateDirective, NgIf, IgxOverlayOutletDirective, CurrencyPipe] + imports: [IgxGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxCellTemplateDirective, IgxOverlayOutletDirective, CurrencyPipe] }) export class GridExternalOutletComponent implements OnInit { diff --git a/src/app/grid/grid-filtering-sample/grid-filtering-sample.component.html b/src/app/grid/grid-filtering-sample/grid-filtering-sample.component.html index 47960725fb..6fe7455412 100644 --- a/src/app/grid/grid-filtering-sample/grid-filtering-sample.component.html +++ b/src/app/grid/grid-filtering-sample/grid-filtering-sample.component.html @@ -1,28 +1,32 @@
-
- - -
-
+
+ + +
+
- - - - - - - - {{+val | currency}} - - - - - - - Continued - Discontinued - - - + + + + + + + + {{+val | currency}} + + + + + + + @if (val) { + Continued + } + @if (!val) { + Discontinued + } + + +
diff --git a/src/app/grid/grid-filtering-sample/grid-filtering-sample.component.ts b/src/app/grid/grid-filtering-sample/grid-filtering-sample.component.ts index 2ed7233691..9beace8b45 100644 --- a/src/app/grid/grid-filtering-sample/grid-filtering-sample.component.ts +++ b/src/app/grid/grid-filtering-sample/grid-filtering-sample.component.ts @@ -2,13 +2,13 @@ import { Component, OnInit, ViewChild } from '@angular/core'; import { IgxGridComponent, IgxStringFilteringOperand, IgxInputGroupComponent, IgxInputDirective, IgxColumnComponent, IgxCellTemplateDirective } from 'igniteui-angular'; import { DATA } from '../../data/nwindData'; import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; -import { NgIf, CurrencyPipe } from '@angular/common'; +import { CurrencyPipe } from '@angular/common'; @Component({ selector: 'app-grid-sample', styleUrls: ['./grid-filtering-sample.component.scss'], templateUrl: 'grid-filtering-sample.component.html', - imports: [IgxInputGroupComponent, IgxInputDirective, IgxGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxCellTemplateDirective, NgIf, CurrencyPipe] + imports: [IgxInputGroupComponent, IgxInputDirective, IgxGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxCellTemplateDirective, CurrencyPipe] }) export class FilteringSampleComponent implements OnInit { diff --git a/src/app/grid/grid-filtering-style/grid-filtering-style.component.html b/src/app/grid/grid-filtering-style/grid-filtering-style.component.html index 66e50e63c5..9432023eb6 100644 --- a/src/app/grid/grid-filtering-style/grid-filtering-style.component.html +++ b/src/app/grid/grid-filtering-style/grid-filtering-style.component.html @@ -1,21 +1,25 @@
- - - - - - - - {{+val | currency}} - - - - - - - Continued - Discontinued - - - + + + + + + + + {{+val | currency}} + + + + + + + @if (val) { + Continued + } + @if (!val) { + Discontinued + } + + +
diff --git a/src/app/grid/grid-filtering-style/grid-filtering-style.component.ts b/src/app/grid/grid-filtering-style/grid-filtering-style.component.ts index 1bfe72b902..1a8f4f5546 100644 --- a/src/app/grid/grid-filtering-style/grid-filtering-style.component.ts +++ b/src/app/grid/grid-filtering-style/grid-filtering-style.component.ts @@ -2,13 +2,13 @@ import { Component, OnInit } from '@angular/core'; import { DATA } from '../../data/nwindData'; import { IgxGridComponent, IgxColumnComponent, IgxCellTemplateDirective } from 'igniteui-angular'; import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; -import { NgIf, CurrencyPipe } from '@angular/common'; +import { CurrencyPipe } from '@angular/common'; @Component({ selector: 'app-grid-filtering-style', styleUrls: ['./grid-filtering-style.component.scss'], templateUrl: './grid-filtering-style.component.html', - imports: [IgxGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxCellTemplateDirective, NgIf, CurrencyPipe] + imports: [IgxGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxCellTemplateDirective, CurrencyPipe] }) export class GridFilteringStyleComponent implements OnInit { public data: any[]; diff --git a/src/app/grid/grid-filtering-template-sample/grid-filtering-template-sample.component.html b/src/app/grid/grid-filtering-template-sample/grid-filtering-template-sample.component.html index 3a15b8b1a8..aea6c184f6 100644 --- a/src/app/grid/grid-filtering-template-sample/grid-filtering-template-sample.component.html +++ b/src/app/grid/grid-filtering-template-sample/grid-filtering-template-sample.component.html @@ -1,56 +1,64 @@
- - - - - - - - {{+val | currency}} - - - - - - - Continued - Discontinued - - - - -
- - - search - - - - clear - - -
+ + + + + + + + {{+val | currency}} + + + + + + + @if (val) { + Continued + } + @if (!val) { + Discontinued + } + + + + +
+ + + search + + + @if (input.value || input.value === '0') { + + clear + + } + +
-
- - - search - - - clear - - -
+
+ + + search + + @if (picker.value) { + + clear + + } + +
-
+
diff --git a/src/app/grid/grid-filtering-template-sample/grid-filtering-template-sample.component.ts b/src/app/grid/grid-filtering-template-sample/grid-filtering-template-sample.component.ts index b9bec78e28..551e29ce1b 100644 --- a/src/app/grid/grid-filtering-template-sample/grid-filtering-template-sample.component.ts +++ b/src/app/grid/grid-filtering-template-sample/grid-filtering-template-sample.component.ts @@ -2,13 +2,13 @@ import { Component, OnInit, ViewChild } from '@angular/core'; import { GridColumnDataType, IgxColumnComponent, IgxDateFilteringOperand, IgxGridComponent, IgxNumberFilteringOperand, IgxStringFilteringOperand, ColumnType, IgxCellTemplateDirective, IgxFilterCellTemplateDirective, IgxInputGroupComponent, IgxPrefixDirective, IgxIconComponent, IgxInputDirective, IgxSuffixDirective, IgxDatePickerComponent, IgxPickerToggleComponent, IgxPickerClearComponent } from 'igniteui-angular'; import { DATA } from '../../data/nwindData'; import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; -import { NgIf, CurrencyPipe } from '@angular/common'; +import { CurrencyPipe } from '@angular/common'; @Component({ selector: 'app-grid-sample', styleUrls: ['./grid-filtering-template-sample.component.scss'], templateUrl: 'grid-filtering-template-sample.component.html', - imports: [IgxGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxCellTemplateDirective, NgIf, IgxFilterCellTemplateDirective, IgxInputGroupComponent, IgxPrefixDirective, IgxIconComponent, IgxInputDirective, IgxSuffixDirective, IgxDatePickerComponent, IgxPickerToggleComponent, IgxPickerClearComponent, CurrencyPipe] + imports: [IgxGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxCellTemplateDirective, IgxFilterCellTemplateDirective, IgxInputGroupComponent, IgxPrefixDirective, IgxIconComponent, IgxInputDirective, IgxSuffixDirective, IgxDatePickerComponent, IgxPickerToggleComponent, IgxPickerClearComponent, CurrencyPipe] }) export class FilteringTemplateSampleComponent implements OnInit { diff --git a/src/app/grid/grid-formatted-filtering-strategy/grid-formatted-filtering-strategy.component.html b/src/app/grid/grid-formatted-filtering-strategy/grid-formatted-filtering-strategy.component.html index cade90874b..0d9e57bad8 100644 --- a/src/app/grid/grid-formatted-filtering-strategy/grid-formatted-filtering-strategy.component.html +++ b/src/app/grid/grid-formatted-filtering-strategy/grid-formatted-filtering-strategy.component.html @@ -1,19 +1,23 @@
- - - - - - - - - - - - Continued - Discontinued - - - + + + + + + + + + + + + @if (val) { + Continued + } + @if (!val) { + Discontinued + } + + +
diff --git a/src/app/grid/grid-formatted-filtering-strategy/grid-formatted-filtering-strategy.component.ts b/src/app/grid/grid-formatted-filtering-strategy/grid-formatted-filtering-strategy.component.ts index ae99ef6097..be0328fd86 100644 --- a/src/app/grid/grid-formatted-filtering-strategy/grid-formatted-filtering-strategy.component.ts +++ b/src/app/grid/grid-formatted-filtering-strategy/grid-formatted-filtering-strategy.component.ts @@ -2,13 +2,13 @@ import { Component, OnInit, ViewChild } from '@angular/core'; import { IgxGridComponent, FormattedValuesFilteringStrategy, IgxColumnComponent, IgxCellTemplateDirective } from 'igniteui-angular'; import { DATA } from '../../data/nwindData'; import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; -import { NgIf } from '@angular/common'; + @Component({ selector: 'app-grid-sample', styleUrls: ['./grid-formatted-filtering-strategy.component.scss'], templateUrl: 'grid-formatted-filtering-strategy.component.html', - imports: [IgxGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxCellTemplateDirective, NgIf] + imports: [IgxGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxCellTemplateDirective] }) export class GridFormattedFilteringStrategyComponent implements OnInit { @ViewChild('grid1', { read: IgxGridComponent, static: true }) diff --git a/src/app/grid/grid-groupby-custom-sample/grid-groupby-custom-sample.component.html b/src/app/grid/grid-groupby-custom-sample/grid-groupby-custom-sample.component.html index ac846d2589..b63fa97ae5 100644 --- a/src/app/grid/grid-groupby-custom-sample/grid-groupby-custom-sample.component.html +++ b/src/app/grid/grid-groupby-custom-sample/grid-groupby-custom-sample.component.html @@ -1,54 +1,60 @@
- - - - - - {{ item.name }} - - - - - - - - - - {{ value | date:'shortDate' }} - - - - - - - Continued - Discontinued - - - - - - - - - - - - - {{ value | currency:'USD':'symbol-narrow'}} - - - - - -
- group_work - - {{ groupRow.expression.fieldName }}: - - {{ isDate(groupRow.value) ? (groupRow.value | date: dateFormatter) : groupRow.value }} - -
- - + + + + + @for (item of groupByOptions; track item) { + + {{ item.name }} + + } + + + + + + + + + {{ value | date:'shortDate' }} + + + + + + + @if (val) { + Continued + } + @if (!val) { + Discontinued + } + + + + + + + + + + + + + {{ value | currency:'USD':'symbol-narrow'}} + + + + + +
+ group_work + + {{ groupRow.expression.fieldName }}: + + {{ isDate(groupRow.value) ? (groupRow.value | date: dateFormatter) : groupRow.value }} + +
+ +
diff --git a/src/app/grid/grid-groupby-custom-sample/grid-groupby-custom-sample.component.ts b/src/app/grid/grid-groupby-custom-sample/grid-groupby-custom-sample.component.ts index e548cb2600..31db3f20e2 100644 --- a/src/app/grid/grid-groupby-custom-sample/grid-groupby-custom-sample.component.ts +++ b/src/app/grid/grid-groupby-custom-sample/grid-groupby-custom-sample.component.ts @@ -2,7 +2,7 @@ import { Component, ViewChild, ViewEncapsulation } from '@angular/core'; import { DefaultSortingStrategy, IgxGridComponent, SortingDirection, IgxGridToolbarComponent, IgxButtonDirective, IgxToggleActionDirective, IgxDropDownItemNavigationDirective, IgxDropDownComponent, IgxDropDownItemComponent, IgxColumnComponent, IgxCellTemplateDirective, IgxGroupByRowTemplateDirective, IgxIconComponent, IgxBadgeComponent } from 'igniteui-angular'; import { INVOICE_DATA } from '../../data/invoiceData'; -import { DatePipe, NgFor, NgIf, CurrencyPipe } from '@angular/common'; +import { DatePipe, CurrencyPipe } from '@angular/common'; import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; @Component({ @@ -10,7 +10,7 @@ import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scro selector: 'app-grid-groupby-custom-sample', styleUrls: ['./grid-groupby-custom-sample.component.scss'], templateUrl: './grid-groupby-custom-sample.component.html', - imports: [IgxGridComponent, IgxPreventDocumentScrollDirective, IgxGridToolbarComponent, IgxButtonDirective, IgxToggleActionDirective, IgxDropDownItemNavigationDirective, IgxDropDownComponent, NgFor, IgxDropDownItemComponent, IgxColumnComponent, IgxCellTemplateDirective, NgIf, IgxGroupByRowTemplateDirective, IgxIconComponent, IgxBadgeComponent, CurrencyPipe, DatePipe] + imports: [IgxGridComponent, IgxPreventDocumentScrollDirective, IgxGridToolbarComponent, IgxButtonDirective, IgxToggleActionDirective, IgxDropDownItemNavigationDirective, IgxDropDownComponent, IgxDropDownItemComponent, IgxColumnComponent, IgxCellTemplateDirective, IgxGroupByRowTemplateDirective, IgxIconComponent, IgxBadgeComponent, CurrencyPipe, DatePipe] }) export class GridGroupByCustomSampleComponent { @ViewChild('grid1', { read: IgxGridComponent, static: true }) diff --git a/src/app/grid/grid-groupby-sample/grid-groupby-sample.component.html b/src/app/grid/grid-groupby-sample/grid-groupby-sample.component.html index 3f87b0153b..6bb9162edb 100644 --- a/src/app/grid/grid-groupby-sample/grid-groupby-sample.component.html +++ b/src/app/grid/grid-groupby-sample/grid-groupby-sample.component.html @@ -1,41 +1,45 @@
- - - - - - - - - - - - Continued - Discontinued - - - - - - - - - - - - - - - -
- group_work - - {{ groupRow.expression.fieldName }}: - - {{ isDate(groupRow.value) ? formatDate(groupRow.value) : groupRow.value }} - - Ordered in 2017:{{ calc2017(groupRow.records)}} -
- - + + + + + + + + + + + + @if (val) { + Continued + } + @if (!val) { + Discontinued + } + + + + + + + + + + + + + + + +
+ group_work + + {{ groupRow.expression.fieldName }}: + + {{ isDate(groupRow.value) ? formatDate(groupRow.value) : groupRow.value }} + + Ordered in 2017:{{ calc2017(groupRow.records)}} +
+ +
diff --git a/src/app/grid/grid-groupby-sample/grid-groupby-sample.component.ts b/src/app/grid/grid-groupby-sample/grid-groupby-sample.component.ts index fb41605e44..4a7e6ad4de 100644 --- a/src/app/grid/grid-groupby-sample/grid-groupby-sample.component.ts +++ b/src/app/grid/grid-groupby-sample/grid-groupby-sample.component.ts @@ -2,14 +2,14 @@ import { Component, OnInit, ViewChild, ViewEncapsulation } from '@angular/core'; import { DefaultSortingStrategy, GridSelectionMode, IgxGridComponent, ISortingExpression, SortingDirection, IgxColumnComponent, IgxCellTemplateDirective, IgxGroupByRowTemplateDirective, IgxIconComponent, IgxBadgeComponent } from 'igniteui-angular'; import { INVOICE_DATA } from '../../data/invoiceData'; import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; -import { NgIf } from '@angular/common'; + @Component({ encapsulation: ViewEncapsulation.None, selector: 'app-grid-groupby-sample', styleUrls: ['./grid-groupby-sample.component.scss'], templateUrl: './grid-groupby-sample.component.html', - imports: [IgxGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxCellTemplateDirective, NgIf, IgxGroupByRowTemplateDirective, IgxIconComponent, IgxBadgeComponent] + imports: [IgxGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxCellTemplateDirective, IgxGroupByRowTemplateDirective, IgxIconComponent, IgxBadgeComponent] }) export class GridGroupBySampleComponent { @ViewChild('grid1', { read: IgxGridComponent, static: true }) diff --git a/src/app/grid/grid-groupby-styling/grid-groupby-styling.component.html b/src/app/grid/grid-groupby-styling/grid-groupby-styling.component.html index 4c58be0748..869a25e124 100644 --- a/src/app/grid/grid-groupby-styling/grid-groupby-styling.component.html +++ b/src/app/grid/grid-groupby-styling/grid-groupby-styling.component.html @@ -1,100 +1,102 @@
- + > + field="ShipCountry" + header="Ship Country" + width="200px" + [groupable]="true" + > + field="OrderDate" + header="Order Date" + width="200px" + [formatter]="formatDate" + [groupable]="true" + > + field="PostalCode" + header="Postal Code" + width="200px" + [groupable]="true" + > - - Continued + + @if (val) { + Continued - Discontinued - + } + + field="ShipName" + header="Ship Name" + width="250px" + [groupable]="true" + > + field="ShipCity" + header="Ship City" + width="250px" + [groupable]="true" + > + field="ShipperName" + header="Shipper Name" + width="250px" + [groupable]="true" + > + field="Salesperson" + header="Salesperson" + width="250px" + [groupable]="true" + > + field="UnitPrice" + header="Unit Price" + width="150px" + [formatter]="formatCurrency" + dataType="number" + [groupable]="true" + > + field="Quantity" + header="Quantity" + width="150px" + dataType="number" + [groupable]="true" + > - +
\ No newline at end of file diff --git a/src/app/grid/grid-groupby-styling/grid-groupby-styling.component.ts b/src/app/grid/grid-groupby-styling/grid-groupby-styling.component.ts index cc7c626ab6..06162da7ff 100644 --- a/src/app/grid/grid-groupby-styling/grid-groupby-styling.component.ts +++ b/src/app/grid/grid-groupby-styling/grid-groupby-styling.component.ts @@ -2,14 +2,14 @@ import { Component, ViewChild, ViewEncapsulation } from '@angular/core'; import { DefaultSortingStrategy, IgxGridComponent, ISortingExpression, SortingDirection, IgxColumnComponent, IgxCellTemplateDirective } from 'igniteui-angular'; import { INVOICE_DATA } from '../../data/invoiceData'; import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; -import { NgIf } from '@angular/common'; + @Component({ encapsulation: ViewEncapsulation.Emulated, selector: 'app-grid-groupby-sample', styleUrls: ['./grid-groupby-styling.component.scss'], templateUrl: './grid-groupby-styling.component.html', - imports: [IgxGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxCellTemplateDirective, NgIf] + imports: [IgxGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxCellTemplateDirective] }) export class GridGroupByStylingComponent { @ViewChild('grid1', { read: IgxGridComponent, static: true }) diff --git a/src/app/grid/grid-keyboardnav-guide-sample/grid-keyboardnav-sample.component.html b/src/app/grid/grid-keyboardnav-guide-sample/grid-keyboardnav-sample.component.html index 6cef71685a..d32d28c77c 100644 --- a/src/app/grid/grid-keyboardnav-guide-sample/grid-keyboardnav-sample.component.html +++ b/src/app/grid/grid-keyboardnav-guide-sample/grid-keyboardnav-sample.component.html @@ -1,64 +1,72 @@
-
- - - +
+ + + @if (false) { + + } - -
-
Annual Profit:
- {{dataItem.CompanysAnnualProfit}} -
- - - - - - - - - - - - - - - - - - - - - - - - -
-
- - {{ headerList }} - -

{{ c.title }}

-

{{ c.subTitle }}

- - - - -
Use the native navigation of the browser until you reach some of the following grid sections below:
-
    -
  • Header
    • -
  • Body
    • -
  • Summary
    • -
-
When reached, an action list will be shown.
- - - -
+ + @if (dataItem.CompanysAnnualProfit) { +
+
Annual Profit:
+ {{dataItem.CompanysAnnualProfit}} +
+ } + + + + + + + + + + + + + + + + + + + + + + + + +
+
+ + @if (keyboardCollection.length > 0) { + {{ headerList }} + } + @for (c of keyboardCollection; track c; let idx = $index) { + +

{{ c.title }}

+

{{ c.subTitle }}

+ + + } + + +
Use the native navigation of the browser until you reach some of the following grid sections below:
+
    +
  • Header
    • +
  • Body
    • +
  • Summary
    • +
+
When reached, an action list will be shown.
+ + + +
diff --git a/src/app/grid/grid-keyboardnav-guide-sample/grid-keyboardnav-sample.component.ts b/src/app/grid/grid-keyboardnav-guide-sample/grid-keyboardnav-sample.component.ts index c5fad03c48..191972e804 100644 --- a/src/app/grid/grid-keyboardnav-guide-sample/grid-keyboardnav-sample.component.ts +++ b/src/app/grid/grid-keyboardnav-guide-sample/grid-keyboardnav-sample.component.ts @@ -8,7 +8,7 @@ import { IgxColumnComponent, IgxColumnGroupComponent, CellType, IgxGridComponent import { Subject } from 'rxjs'; import { takeUntil } from 'rxjs/operators'; import { DATA } from '../../data/customers'; -import { NgIf, NgFor, NgClass } from '@angular/common'; +import { NgClass } from '@angular/common'; enum GridSection { THEAD = 'igx-grid__thead-wrapper', @@ -164,7 +164,7 @@ const summaryCombinations: Item[] = [ ]) ]) ], - imports: [IgxGridComponent, IgxPaginatorComponent, NgIf, IgxGridToolbarComponent, IgxGridDetailTemplateDirective, IgxColumnGroupComponent, IgxColumnComponent, IgxListComponent, IgxListItemComponent, NgFor, NgClass, IgxListLineTitleDirective, IgxListLineSubTitleDirective, IgxCheckboxComponent, IgxEmptyListTemplateDirective] + imports: [IgxGridComponent, IgxPaginatorComponent, IgxGridToolbarComponent, IgxGridDetailTemplateDirective, IgxColumnGroupComponent, IgxColumnComponent, IgxListComponent, IgxListItemComponent, NgClass, IgxListLineTitleDirective, IgxListLineSubTitleDirective, IgxCheckboxComponent, IgxEmptyListTemplateDirective] }) export class GridKeyboardnavGuide implements OnInit, OnDestroy { diff --git a/src/app/grid/grid-moving-sample/grid-moving-sample.component.html b/src/app/grid/grid-moving-sample/grid-moving-sample.component.html index e2c98f6a8c..1764639ad1 100644 --- a/src/app/grid/grid-moving-sample/grid-moving-sample.component.html +++ b/src/app/grid/grid-moving-sample/grid-moving-sample.component.html @@ -1,40 +1,48 @@ -
- {{column.field}} - -
+
+ {{column.field}} + +
- - - - - - - - - - -
- - - {{ formatNumber(val) }} -
- - - - - {{ formatNumber(val) }}% - - - - -
- - - {{ formatNumber(val) }}% -
- - - + + + + + + + + + + +
+ @if (val>0) { + + } + @if (val<0) { + + } + {{ formatNumber(val) }} +
+ + + + + {{ formatNumber(val) }}% + + + + +
+ @if (val>0) { + + } + @if (val<0) { + + } + {{ formatNumber(val) }}% +
+ + +
diff --git a/src/app/grid/grid-moving-sample/grid-moving-sample.component.ts b/src/app/grid/grid-moving-sample/grid-moving-sample.component.ts index e90cf404a3..aabf3c5c94 100644 --- a/src/app/grid/grid-moving-sample/grid-moving-sample.component.ts +++ b/src/app/grid/grid-moving-sample/grid-moving-sample.component.ts @@ -2,13 +2,13 @@ import { Component, ViewChild } from '@angular/core'; import { ColumnType, IgxGridComponent, IgxCellHeaderTemplateDirective, IgxIconComponent, IgxPaginatorComponent, IgxColumnComponent, IgxCellTemplateDirective, IgxBadgeComponent } from 'igniteui-angular'; import { DATA } from '../../data/financialData'; import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; -import { NgIf } from '@angular/common'; + @Component({ selector: 'app-grid-moving-sample', styleUrls: ['./grid-moving-sample.component.scss'], templateUrl: './grid-moving-sample.component.html', - imports: [IgxCellHeaderTemplateDirective, IgxIconComponent, IgxGridComponent, IgxPreventDocumentScrollDirective, IgxPaginatorComponent, IgxColumnComponent, IgxCellTemplateDirective, NgIf, IgxBadgeComponent] + imports: [IgxCellHeaderTemplateDirective, IgxIconComponent, IgxGridComponent, IgxPreventDocumentScrollDirective, IgxPaginatorComponent, IgxColumnComponent, IgxCellTemplateDirective, IgxBadgeComponent] }) export class GridMovingSampleComponent { diff --git a/src/app/grid/grid-moving-styled-sample/grid-moving-styled-sample.component.html b/src/app/grid/grid-moving-styled-sample/grid-moving-styled-sample.component.html index 4df664141c..c2b6056b6c 100644 --- a/src/app/grid/grid-moving-styled-sample/grid-moving-styled-sample.component.html +++ b/src/app/grid/grid-moving-styled-sample/grid-moving-styled-sample.component.html @@ -1,40 +1,48 @@ -
- {{column.field}} - -
+
+ {{column.field}} + +
- - - - - - - - - - -
- - - {{ formatNumber(val) }} -
- - - - - {{ formatNumber(val) }}% - - - - -
- - - {{ formatNumber(val) }}% -
- - - + + + + + + + + + + +
+ @if (val>0) { + + } + @if (val<0) { + + } + {{ formatNumber(val) }} +
+ + + + + {{ formatNumber(val) }}% + + + + +
+ @if (val>0) { + + } + @if (val<0) { + + } + {{ formatNumber(val) }}% +
+ + +
diff --git a/src/app/grid/grid-moving-styled-sample/grid-moving-styled-sample.component.ts b/src/app/grid/grid-moving-styled-sample/grid-moving-styled-sample.component.ts index e31875daf2..7d46b805e8 100644 --- a/src/app/grid/grid-moving-styled-sample/grid-moving-styled-sample.component.ts +++ b/src/app/grid/grid-moving-styled-sample/grid-moving-styled-sample.component.ts @@ -2,13 +2,13 @@ import { Component, ViewChild } from '@angular/core'; import { ColumnType, IgxGridComponent, IgxCellHeaderTemplateDirective, IgxIconComponent, IgxPaginatorComponent, IgxColumnComponent, IgxCellTemplateDirective, IgxBadgeComponent } from 'igniteui-angular'; import { DATA } from '../../data/financialData'; import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; -import { NgIf } from '@angular/common'; + @Component({ selector: 'app-grid-moving-styled-sample', styleUrls: ['./grid-moving-styled-sample.component.scss'], templateUrl: './grid-moving-styled-sample.component.html', - imports: [IgxCellHeaderTemplateDirective, IgxIconComponent, IgxGridComponent, IgxPreventDocumentScrollDirective, IgxPaginatorComponent, IgxColumnComponent, IgxCellTemplateDirective, NgIf, IgxBadgeComponent] + imports: [IgxCellHeaderTemplateDirective, IgxIconComponent, IgxGridComponent, IgxPreventDocumentScrollDirective, IgxPaginatorComponent, IgxColumnComponent, IgxCellTemplateDirective, IgxBadgeComponent] }) export class GridMovingStyledSampleComponent { diff --git a/src/app/grid/grid-multi-row-layout-configuration/grid-multi-row-layout-configuration.component.html b/src/app/grid/grid-multi-row-layout-configuration/grid-multi-row-layout-configuration.component.html index a8df362952..2f7ed939ec 100644 --- a/src/app/grid/grid-multi-row-layout-configuration/grid-multi-row-layout-configuration.component.html +++ b/src/app/grid/grid-multi-row-layout-configuration/grid-multi-row-layout-configuration.component.html @@ -1,50 +1,57 @@
-
-
-
- - -
-
- - - - {{block.key}} -
- cancel -
- - - add_circle_outline - {{"Add Layout"}} - - - - - -
-
-
- - -
-
- - -
-
+
+
+
+ + +
+
+ + + @for (block of blocks; track block; let blockIndex = $index) { + + {{block.key}} +
+ cancel +
+ + } + + add_circle_outline + @if (!addBlock.data.clicked) { + {{"Add Layout"}} + } + @if (addBlock.data.clicked) { + + + + } + + +
+
+
+ +
+
+ + +
+
+
-
- Click on a cell to resize it left/right/down or delete it: -
-
-
+ Click on a cell to resize it left/right/down or delete it: +
+
+ @for (block of blocks; track block; let blockIndex = $index) { +
- -
-
{{col.key}}
- - - - - - - - -
- -
-
-
+
{{col.key}}
+ @if (block.collection[rowIndex][colIndex].selected) { + + + + + + + } +
+ } + } +
+ } +
+
-
-
+
+
-
- Drag a column into a layout cell to apply: - - - {{col.key}} -
- cancel -
- - - add_circle_outline - {{"Add Column"}} - - - - - -
-
- Clear Layout - Template - JSON -
- - -
+ + } + + add_circle_outline + @if (!addChip.data.clicked) { + {{"Add Column"}} + } + @if (addChip.data.clicked) { + + + + } + + +
+
+ Clear Layout + Template + JSON +
+ + + + +
diff --git a/src/app/grid/grid-multi-row-layout-configuration/grid-multi-row-layout-configuration.component.ts b/src/app/grid/grid-multi-row-layout-configuration/grid-multi-row-layout-configuration.component.ts index a5291fa5a9..01c4dee97d 100644 --- a/src/app/grid/grid-multi-row-layout-configuration/grid-multi-row-layout-configuration.component.ts +++ b/src/app/grid/grid-multi-row-layout-configuration/grid-multi-row-layout-configuration.component.ts @@ -10,7 +10,7 @@ import { ViewChildren, ViewEncapsulation } from "@angular/core"; import { IDropBaseEventArgs, IDropDroppedEventArgs, IgxDialogComponent, IgxGridComponent, IgxChipsAreaComponent, IgxChipComponent, IgxSuffixDirective, IgxIconButtonDirective, IgxIconComponent, IgxPrefixDirective, IgxInputGroupComponent, IgxInputDirective, IgxDropDirective, IgxButtonDirective } from "igniteui-angular"; -import { NgFor, NgIf, NgStyle, NgClass } from "@angular/common"; +import { NgStyle, NgClass } from "@angular/common"; interface IColumnConfig { key: string; @@ -42,7 +42,7 @@ enum DialogType { selector: "app-grid-multi-row-layout-configuration-sample", styleUrls: ["./grid-multi-row-layout-configuration.component.scss"], templateUrl: "./grid-multi-row-layout-configuration.component.html", - imports: [IgxChipsAreaComponent, NgFor, IgxChipComponent, IgxSuffixDirective, IgxIconButtonDirective, IgxIconComponent, IgxPrefixDirective, NgIf, IgxInputGroupComponent, IgxInputDirective, NgStyle, IgxDropDirective, NgClass, IgxButtonDirective, IgxDialogComponent] + imports: [IgxChipsAreaComponent, IgxChipComponent, IgxSuffixDirective, IgxIconButtonDirective, IgxIconComponent, IgxPrefixDirective, IgxInputGroupComponent, IgxInputDirective, NgStyle, IgxDropDirective, NgClass, IgxButtonDirective, IgxDialogComponent] }) export class GridMultiRowLayoutConfigurationComponent { diff --git a/src/app/grid/grid-nested-data-binding-2/grid-nested-data-bind2.html b/src/app/grid/grid-nested-data-binding-2/grid-nested-data-bind2.html index 7469cadf00..31dd30419e 100644 --- a/src/app/grid/grid-nested-data-binding-2/grid-nested-data-bind2.html +++ b/src/app/grid/grid-nested-data-binding-2/grid-nested-data-bind2.html @@ -1,23 +1,25 @@
-
- - - - -
-

1pKa is the negative of the logarithm of the dissociation constant for the -COOH group.

-

2pKb is the negative of the logarithm of the dissociation constant for the -NH3 group.

-

3pKx is the negative of the logarithm of the dissociation constant for any other group in the molecule.

-

4 pl is the pH at the isoelectric point.

- Reference: D.R. Lide, Handbook of Chemistry and Physics, 72nd Edition, CRC Press, Boca Raton, FL, 1991. -
- - -
+
+ + @for (each of nestedConfigColumns; track each) { + + + } + +
+

1pKa is the negative of the logarithm of the dissociation constant for the -COOH group.

+

2pKb is the negative of the logarithm of the dissociation constant for the -NH3 group.

+

3pKx is the negative of the logarithm of the dissociation constant for any other group in the molecule.

+

4 pl is the pH at the isoelectric point.

+ Reference: D.R. Lide, Handbook of Chemistry and Physics, 72nd Edition, CRC Press, Boca Raton, FL, 1991. +
+ + +
diff --git a/src/app/grid/grid-nested-data-binding-2/grid-nested-data-bind2.ts b/src/app/grid/grid-nested-data-binding-2/grid-nested-data-bind2.ts index 4c5f0c1144..4e8c760fa3 100644 --- a/src/app/grid/grid-nested-data-binding-2/grid-nested-data-bind2.ts +++ b/src/app/grid/grid-nested-data-binding-2/grid-nested-data-bind2.ts @@ -2,13 +2,13 @@ import { Component, OnInit } from '@angular/core'; import { GridColumnDataType, IgxGridComponent, IgxColumnComponent, IgxGridFooterComponent } from 'igniteui-angular'; import { AMINO_DATA } from '../../data/amino-data'; import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; -import { NgFor } from '@angular/common'; + @Component({ selector: 'app-grid-nested-data-bind2', styleUrls: ['./grid-nested-data-bind2.scss'], templateUrl: './grid-nested-data-bind2.html', - imports: [IgxGridComponent, IgxPreventDocumentScrollDirective, NgFor, IgxColumnComponent, IgxGridFooterComponent] + imports: [IgxGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxGridFooterComponent] }) export class GridNestedDataBindAminoacidComponent implements OnInit { diff --git a/src/app/grid/grid-nested-data-binding/grid-nested-data-bind.html b/src/app/grid/grid-nested-data-binding/grid-nested-data-bind.html index b497bc3e62..da75e3c7dd 100644 --- a/src/app/grid/grid-nested-data-binding/grid-nested-data-bind.html +++ b/src/app/grid/grid-nested-data-binding/grid-nested-data-bind.html @@ -1,39 +1,41 @@
-
- - - - - -
- - - - {{ person.Name }} - - - -
- - - - - - - - -
- - -
- - - - - - {{cell.value | date: 'short'}} - - - -
+
+ + + + + +
+ @for (person of people; track person) { + + + + {{ person.Name }} + + + +
+ + + + + + + + +
+ + + } +
+ + + + + + {{cell.value | date: 'short'}} + + + +
diff --git a/src/app/grid/grid-nested-data-binding/grid-nested-data-bind.ts b/src/app/grid/grid-nested-data-binding/grid-nested-data-bind.ts index a872b8ff25..401a6e1fcf 100644 --- a/src/app/grid/grid-nested-data-binding/grid-nested-data-bind.ts +++ b/src/app/grid/grid-nested-data-binding/grid-nested-data-bind.ts @@ -2,14 +2,14 @@ import {ChangeDetectorRef, Component, OnInit} from '@angular/core'; import {EMPLOYEE_DATA} from '../../data/nested-employee-data'; import { IgxGridComponent, IgxColumnComponent, IgxCellTemplateDirective, IgxExpansionPanelComponent, IgxExpansionPanelHeaderComponent, IgxExpansionPanelDescriptionDirective, IgxExpansionPanelBodyComponent, IgxInputGroupComponent, IgxLabelDirective, IgxInputDirective } from 'igniteui-angular'; import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; -import { NgFor, DatePipe } from '@angular/common'; +import { DatePipe } from '@angular/common'; import { FormsModule } from '@angular/forms'; @Component({ selector: 'app-grid-nested-data-bind', styleUrls: ['./grid-nested-data-bind.scss'], templateUrl: './grid-nested-data-bind.html', - imports: [IgxGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxCellTemplateDirective, NgFor, IgxExpansionPanelComponent, IgxExpansionPanelHeaderComponent, IgxExpansionPanelDescriptionDirective, IgxExpansionPanelBodyComponent, IgxInputGroupComponent, IgxLabelDirective, FormsModule, IgxInputDirective, DatePipe] + imports: [IgxGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxCellTemplateDirective, IgxExpansionPanelComponent, IgxExpansionPanelHeaderComponent, IgxExpansionPanelDescriptionDirective, IgxExpansionPanelBodyComponent, IgxInputGroupComponent, IgxLabelDirective, FormsModule, IgxInputDirective, DatePipe] }) export class GridNestedDataBindComponent implements OnInit{ diff --git a/src/app/grid/grid-pager-sample/grid-pager-sample.component.html b/src/app/grid/grid-pager-sample/grid-pager-sample.component.html index cb3c0ee479..bbee221883 100644 --- a/src/app/grid/grid-pager-sample/grid-pager-sample.component.html +++ b/src/app/grid/grid-pager-sample/grid-pager-sample.component.html @@ -1,35 +1,39 @@
- - - - - - - - - - - -
- {{ val }} -
- - - - -
- {{ val | number: '1.1-5' }} -
- - - + + + + @if (!isDropdownHidden) { + + } + @if (!isPagerHidden) { + + } + + + + + + +
+ {{ val }} +
+ + + + +
+ {{ val | number: '1.1-5' }} +
+ + + -
- Hide Dropdown - Hide Pager -
+
+ Hide Dropdown + Hide Pager +
diff --git a/src/app/grid/grid-pager-sample/grid-pager-sample.component.ts b/src/app/grid/grid-pager-sample/grid-pager-sample.component.ts index ec8aff47f9..85e849da3a 100644 --- a/src/app/grid/grid-pager-sample/grid-pager-sample.component.ts +++ b/src/app/grid/grid-pager-sample/grid-pager-sample.component.ts @@ -2,14 +2,14 @@ import { Component, OnInit, ViewChild, AfterViewInit, ChangeDetectorRef } from ' import { athletesData } from '../../data/athletesData'; import { IPaginatorResourceStrings, IgxPaginatorComponent, IgxGridComponent, IgxPaginatorContentDirective, IgxPageSizeSelectorComponent, IgxPageNavigationComponent, IgxColumnComponent, IgxCellTemplateDirective, IgxSwitchComponent } from 'igniteui-angular'; import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; -import { NgIf, DecimalPipe } from '@angular/common'; +import { DecimalPipe } from '@angular/common'; import { FormsModule } from '@angular/forms'; @Component({ selector: 'app-grid-pager-sample', styleUrls: ['./grid-pager-sample.component.scss'], templateUrl: './grid-pager-sample.component.html', - imports: [IgxGridComponent, IgxPreventDocumentScrollDirective, IgxPaginatorComponent, IgxPaginatorContentDirective, NgIf, IgxPageSizeSelectorComponent, IgxPageNavigationComponent, IgxColumnComponent, IgxCellTemplateDirective, IgxSwitchComponent, FormsModule, DecimalPipe] + imports: [IgxGridComponent, IgxPreventDocumentScrollDirective, IgxPaginatorComponent, IgxPaginatorContentDirective, IgxPageSizeSelectorComponent, IgxPageNavigationComponent, IgxColumnComponent, IgxCellTemplateDirective, IgxSwitchComponent, FormsModule, DecimalPipe] }) export class GridPagerSampleComponent implements OnInit, AfterViewInit { @ViewChild('paginator', { read: IgxPaginatorComponent, static: false }) diff --git a/src/app/grid/grid-paste/grid-paste-sample.component.html b/src/app/grid/grid-paste/grid-paste-sample.component.html index ad268cd72d..97d04ad8ad 100644 --- a/src/app/grid/grid-paste/grid-paste-sample.component.html +++ b/src/app/grid/grid-paste/grid-paste-sample.component.html @@ -1,24 +1,26 @@
-
- - - - {{ item }} - - - -
- - - - - - -
-
- - - -
+
+ + + @for (item of comboData; track item) { + + {{ item }} + + } + + +
+ + + + + + +
+
+ + +
+
diff --git a/src/app/grid/grid-paste/grid-paste-sample.component.ts b/src/app/grid/grid-paste/grid-paste-sample.component.ts index acffe9f966..ed55bcb22c 100644 --- a/src/app/grid/grid-paste/grid-paste-sample.component.ts +++ b/src/app/grid/grid-paste/grid-paste-sample.component.ts @@ -4,7 +4,7 @@ import { IgxExcelExporterOptions, IgxExcelExporterService, IgxGridComponent, Igx import { EXCEL_DATA, LOCAL_DATA } from './data'; import { first } from 'rxjs/operators'; -import { NgFor } from '@angular/common'; + import { PasteHandler } from './paste-handler.directive'; import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; @@ -12,7 +12,7 @@ import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scro selector: 'app-grid-paste-sample', styleUrls: ['./grid-paste-sample.component.scss'], templateUrl: './grid-paste-sample.component.html', - imports: [IgxButtonDirective, IgxToggleActionDirective, IgxDropDownItemNavigationDirective, IgxDropDownComponent, NgFor, IgxDropDownItemComponent, IgxGridComponent, PasteHandler, IgxPreventDocumentScrollDirective, IgxColumnComponent] + imports: [IgxButtonDirective, IgxToggleActionDirective, IgxDropDownItemNavigationDirective, IgxDropDownComponent, IgxDropDownItemComponent, IgxGridComponent, PasteHandler, IgxPreventDocumentScrollDirective, IgxColumnComponent] }) export class GridPasteSampleComponent { @ViewChild('grid1', { read: IgxGridComponent, static: true }) diff --git a/src/app/grid/grid-remote-filtering-sample/remote-filtering-sample.component.html b/src/app/grid/grid-remote-filtering-sample/remote-filtering-sample.component.html index 634b564e9b..ee900f77a9 100644 --- a/src/app/grid/grid-remote-filtering-sample/remote-filtering-sample.component.html +++ b/src/app/grid/grid-remote-filtering-sample/remote-filtering-sample.component.html @@ -1,35 +1,43 @@
- - - - - - - UnitsInStock - - -
- - - {{ formatNumber(val) }} -
- - - - - - ReorderLevel - - -
- - - {{ formatNumber(val) }} -
- - - + + + + + + + UnitsInStock + + +
+ @if (val>50) { + + } + @if (val<=50) { + + } + {{ formatNumber(val) }} +
+ + + + + + ReorderLevel + + +
+ @if (val>20) { + + } + @if (val<=20) { + + } + {{ formatNumber(val) }} +
+ + +
diff --git a/src/app/grid/grid-remote-filtering-sample/remote-filtering-sample.component.ts b/src/app/grid/grid-remote-filtering-sample/remote-filtering-sample.component.ts index a2d96156eb..75cdd2df62 100644 --- a/src/app/grid/grid-remote-filtering-sample/remote-filtering-sample.component.ts +++ b/src/app/grid/grid-remote-filtering-sample/remote-filtering-sample.component.ts @@ -4,7 +4,7 @@ import { Subject } from 'rxjs'; import { debounceTime, takeUntil } from 'rxjs/operators'; import { RemoteFilteringService } from '../../services/remoteFiltering.service'; import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; -import { NgIf, AsyncPipe } from '@angular/common'; +import { AsyncPipe } from '@angular/common'; const DEBOUNCE_TIME = 300; @@ -13,7 +13,7 @@ const DEBOUNCE_TIME = 300; selector: 'app-grid-remote-filtering-sample', styleUrls: ['./remote-filtering-sample.component.scss'], templateUrl: './remote-filtering-sample.component.html', - imports: [IgxGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxCellHeaderTemplateDirective, IgxCellTemplateDirective, NgIf, IgxBadgeComponent, AsyncPipe] + imports: [IgxGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxCellHeaderTemplateDirective, IgxCellTemplateDirective, IgxBadgeComponent, AsyncPipe] }) export class RemoteFilteringSampleComponent implements OnInit, AfterViewInit, OnDestroy { @ViewChild('grid', { static: true }) public grid: IgxGridComponent; diff --git a/src/app/grid/grid-row-drag/grid-row-drag.component.html b/src/app/grid/grid-row-drag/grid-row-drag.component.html index 30d9b545fd..a0f46f0c1e 100644 --- a/src/app/grid/grid-row-drag/grid-row-drag.component.html +++ b/src/app/grid/grid-row-drag/grid-row-drag.component.html @@ -1,20 +1,22 @@
-
- - - - - - - +
+ + + + + + + +
+
+
+ @for (data of planetData; track data) { + + }
-
-
- -
-
-
-
+
+
+
-
+
diff --git a/src/app/grid/grid-row-drag/grid-row-drag.component.ts b/src/app/grid/grid-row-drag/grid-row-drag.component.ts index 1be863818a..475cecdcb8 100644 --- a/src/app/grid/grid-row-drag/grid-row-drag.component.ts +++ b/src/app/grid/grid-row-drag/grid-row-drag.component.ts @@ -4,7 +4,7 @@ import { RowType, IgxGridComponent, IgxColumnComponent, IgxDropDirective } from import { moonData, planetData } from './data'; import { PlanetComponent as PlanetComponent } from './planet/planet.component'; import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; -import { NgFor } from '@angular/common'; + // eslint-disable-next-line no-shadow enum HoverClassList { @@ -16,7 +16,7 @@ enum HoverClassList { selector: 'app-grid-row-drag-sample', styleUrls: ['./grid-row-drag.component.scss'], templateUrl: 'grid-row-drag.component.html', - imports: [IgxGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, NgFor, PlanetComponent, IgxDropDirective] + imports: [IgxGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, PlanetComponent, IgxDropDirective] }) export class GridDragSampleComponent { diff --git a/src/app/grid/grid-row-drag/planet/planet.component.html b/src/app/grid/grid-row-drag/planet/planet.component.html index 1a06172f5c..0fa3ffc959 100644 --- a/src/app/grid/grid-row-drag/planet/planet.component.html +++ b/src/app/grid/grid-row-drag/planet/planet.component.html @@ -1,11 +1,13 @@
-
{{ data.name }}
-
-
-
-
+
{{ data.name }}
+
+
+ @for (moon of data.moons; track moon; let i = $index) { +
+ } +
-
{{ description }}
+
{{ description }}
 \ No newline at end of file diff --git a/src/app/grid/grid-row-drag/planet/planet.component.ts b/src/app/grid/grid-row-drag/planet/planet.component.ts index a1bf2d4e26..7a332d7333 100644 --- a/src/app/grid/grid-row-drag/planet/planet.component.ts +++ b/src/app/grid/grid-row-drag/planet/planet.component.ts @@ -1,13 +1,13 @@ import { ChangeDetectorRef, Component, HostBinding, HostListener, Input, ViewChild } from '@angular/core'; import { IgxDialogComponent } from 'igniteui-angular'; import { IPlanet } from '../data'; -import { NgFor } from '@angular/common'; + @Component({ selector: 'app-planet', styleUrls: ['./planet.component.scss'], templateUrl: 'planet.component.html', - imports: [NgFor, IgxDialogComponent] + imports: [IgxDialogComponent] }) export class PlanetComponent { diff --git a/src/app/grid/grid-rowStyles-sample/grid-rowStyles.component.html b/src/app/grid/grid-rowStyles-sample/grid-rowStyles.component.html index bcf2176323..db1d5ae12a 100644 --- a/src/app/grid/grid-rowStyles-sample/grid-rowStyles.component.html +++ b/src/app/grid/grid-rowStyles-sample/grid-rowStyles.component.html @@ -1,53 +1,61 @@
- - - - - - - - - Change - + + + + + + + + + Change + - -
- - - {{ formatNumber(val) - }} -
- - - - - Change(%) - - - - -
- - - {{ formatNumber(val) - }}% -
- - - - - - - - - - - - -
+ +
+ @if (val > 0) { + + } + @if (val < 0) { + + } + {{ formatNumber(val) + }} +
+ + + + + Change(%) + + + + +
+ @if (val > 0) { + + } + @if (val < 0) { + + } + {{ formatNumber(val) + }}% +
+ + + + + + + + + + + + +
diff --git a/src/app/grid/grid-rowStyles-sample/grid-rowStyles.component.ts b/src/app/grid/grid-rowStyles-sample/grid-rowStyles.component.ts index cbd95fba7c..dd52cc9c36 100644 --- a/src/app/grid/grid-rowStyles-sample/grid-rowStyles.component.ts +++ b/src/app/grid/grid-rowStyles-sample/grid-rowStyles.component.ts @@ -3,14 +3,14 @@ import { IgxGridComponent, RowType, IgxColumnComponent, IgxCellHeaderTemplateDir import { Observable } from 'rxjs'; import { FinancialDataService } from '../../services/financial.service'; import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; -import { NgIf, AsyncPipe } from '@angular/common'; +import { AsyncPipe } from '@angular/common'; @Component({ providers: [FinancialDataService], selector: 'app-grid-row-styles-sample', styleUrls: ['./grid-rowStyles.component.scss'], templateUrl: 'grid-rowStyles.component.html', - imports: [IgxGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxCellHeaderTemplateDirective, IgxCellTemplateDirective, NgIf, IgxBadgeComponent, AsyncPipe] + imports: [IgxGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxCellHeaderTemplateDirective, IgxCellTemplateDirective, IgxBadgeComponent, AsyncPipe] }) export class GridRowStylesComponent { diff --git a/src/app/grid/grid-sample-2/grid-sample-2.component.html b/src/app/grid/grid-sample-2/grid-sample-2.component.html index af8f5c9854..3dd5b6fa76 100644 --- a/src/app/grid/grid-sample-2/grid-sample-2.component.html +++ b/src/app/grid/grid-sample-2/grid-sample-2.component.html @@ -1,50 +1,58 @@
- - - - - - - - - Change - + + + + + + + + + Change + - -
- - - {{ formatNumber(val) }} -
- - - - - Change(%) - + +
+ @if (val>0) { + + } + @if (val<0) { + + } + {{ formatNumber(val) }} +
+ + + + + Change(%) + - - {{ formatNumber(val) }}% - - - - -
- - - {{ formatNumber(val) }}% -
- - - - - - - - - - - - -
+ + {{ formatNumber(val) }}% + + + + +
+ @if (val>0) { + + } + @if (val<0) { + + } + {{ formatNumber(val) }}% +
+ + + + + + + + + + + + +
diff --git a/src/app/grid/grid-sample-2/grid-sample-2.component.ts b/src/app/grid/grid-sample-2/grid-sample-2.component.ts index 00a36e39f6..efeedd8112 100644 --- a/src/app/grid/grid-sample-2/grid-sample-2.component.ts +++ b/src/app/grid/grid-sample-2/grid-sample-2.component.ts @@ -4,14 +4,14 @@ import { IgxGridComponent, IgxColumnComponent, IgxCellHeaderTemplateDirective, I import { Observable } from 'rxjs'; import { FinancialDataService } from '../../services/financial.service'; import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; -import { NgIf, AsyncPipe } from '@angular/common'; +import { AsyncPipe } from '@angular/common'; @Component({ providers: [FinancialDataService], selector: 'app-grid-sample', styleUrls: ['./grid-sample-2.component.scss'], templateUrl: 'grid-sample-2.component.html', - imports: [IgxGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxCellHeaderTemplateDirective, IgxCellTemplateDirective, NgIf, IgxBadgeComponent, AsyncPipe] + imports: [IgxGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxCellHeaderTemplateDirective, IgxCellTemplateDirective, IgxBadgeComponent, AsyncPipe] }) export class FinancialSampleComponent { diff --git a/src/app/grid/grid-sample-3/grid-sample-3.component.html b/src/app/grid/grid-sample-3/grid-sample-3.component.html index 5a88d6efb0..70270a8763 100644 --- a/src/app/grid/grid-sample-3/grid-sample-3.component.html +++ b/src/app/grid/grid-sample-3/grid-sample-3.component.html @@ -1,55 +1,59 @@
- - - - - - - {{val}} - - -
{{col.field}}
- functions - - - - - ${{val}} - - -
{{col.field}}
- functions - - - - - {{val}} - - -
{{col.field}}
- functions - - - - - Continued - Discontinued - - -
{{col.field}}
- functions - - - - - {{ val | date: 'MMM d, yyyy' }} - - -
{{col.field}}
- functions - - - + + + + + + + {{val}} + + +
{{col.field}}
+ functions + + + + + ${{val}} + + +
{{col.field}}
+ functions + + + + + {{val}} + + +
{{col.field}}
+ functions + + + + + @if (val) { + Continued + } + @if (!val) { + Discontinued + } + + +
{{col.field}}
+ functions + + + + + {{ val | date: 'MMM d, yyyy' }} + + +
{{col.field}}
+ functions + + +
diff --git a/src/app/grid/grid-sample-3/grid-sample-3.component.ts b/src/app/grid/grid-sample-3/grid-sample-3.component.ts index c9e7aca973..81237864a0 100644 --- a/src/app/grid/grid-sample-3/grid-sample-3.component.ts +++ b/src/app/grid/grid-sample-3/grid-sample-3.component.ts @@ -2,7 +2,7 @@ import { Component, ViewChild } from '@angular/core'; import { ColumnType, IgxGridComponent, IgxNumberSummaryOperand, IgxSummaryResult, IgxPaginatorComponent, IgxColumnComponent, IgxCellTemplateDirective, IgxCellHeaderTemplateDirective, IgxIconComponent } from 'igniteui-angular'; import { DATA } from '../../data/nwindData'; import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; -import { NgIf, DatePipe } from '@angular/common'; +import { DatePipe } from '@angular/common'; class MySummary { @@ -21,7 +21,7 @@ class MySummary { selector: 'app-grid-sample-3', styleUrls: ['./grid-sample-3.component.scss'], templateUrl: './grid-sample-3.component.html', - imports: [IgxGridComponent, IgxPreventDocumentScrollDirective, IgxPaginatorComponent, IgxColumnComponent, IgxCellTemplateDirective, IgxCellHeaderTemplateDirective, IgxIconComponent, NgIf, DatePipe] + imports: [IgxGridComponent, IgxPreventDocumentScrollDirective, IgxPaginatorComponent, IgxColumnComponent, IgxCellTemplateDirective, IgxCellHeaderTemplateDirective, IgxIconComponent, DatePipe] }) export class GridSample3Component { @ViewChild('grid1', { read: IgxGridComponent, static: true }) diff --git a/src/app/grid/grid-sample-4/grid-sample-4.component.html b/src/app/grid/grid-sample-4/grid-sample-4.component.html index 3ac55f15c0..5f53eda886 100644 --- a/src/app/grid/grid-sample-4/grid-sample-4.component.html +++ b/src/app/grid/grid-sample-4/grid-sample-4.component.html @@ -1,52 +1,72 @@ -
- {{ val }} + @if (!data.emptyRec) { +
+ {{ val }}
+ } @else { + + }
- -
- - -
- - -
- + +
+ + +
+ + +
+ - - - - - - - UnitsInStock - - -
-
- - - {{ formatNumber(val) }} -
-
- - - - - - ReorderLevel - - -
-
- - - {{ formatNumber(val) }} -
-
- - - + + + + + + + UnitsInStock + + + @if (!cell.row.data.emptyRec) { +
+
+ @if (val>50) { + + } + @if (val<=50) { + + } + {{ formatNumber(val) }} +
+
+ } @else { + + } + + + + + + ReorderLevel + + + @if (!cell.row.data.emptyRec) { +
+
+ @if (val>20) { + + } + @if (val<=20) { + + } + {{ formatNumber(val) }} +
+
+ } @else { + + } + + +
diff --git a/src/app/grid/grid-sample-4/grid-sample-4.component.ts b/src/app/grid/grid-sample-4/grid-sample-4.component.ts index fc0e185c28..a491c716ad 100644 --- a/src/app/grid/grid-sample-4/grid-sample-4.component.ts +++ b/src/app/grid/grid-sample-4/grid-sample-4.component.ts @@ -2,7 +2,7 @@ import { ChangeDetectorRef, Component, TemplateRef, ViewChild, OnInit, AfterView import { IgxColumnComponent, IgxGridComponent, IgxCellTemplateDirective, IgxCellHeaderTemplateDirective, IgxBadgeComponent } from 'igniteui-angular'; import { debounceTime } from 'rxjs/operators'; import { RemoteServiceVirt } from '../../services/remoteVirtualization.service'; -import { NgIf, AsyncPipe } from '@angular/common'; +import { AsyncPipe } from '@angular/common'; import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; @Component({ @@ -10,7 +10,7 @@ import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scro selector: 'app-grid-remote-virtualization-sample', styleUrls: ['grid-sample-4.component.scss'], templateUrl: 'grid-sample-4.component.html', - imports: [IgxCellTemplateDirective, NgIf, IgxGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxCellHeaderTemplateDirective, IgxBadgeComponent, AsyncPipe] + imports: [IgxCellTemplateDirective, IgxGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxCellHeaderTemplateDirective, IgxBadgeComponent, AsyncPipe] }) export class GridRemoteVirtualizationSampleComponent implements OnInit, AfterViewInit, OnDestroy{ diff --git a/src/app/grid/grid-sample-5/grid-sample-5.component.html b/src/app/grid/grid-sample-5/grid-sample-5.component.html index 3140510e6f..391dd1746b 100644 --- a/src/app/grid/grid-sample-5/grid-sample-5.component.html +++ b/src/app/grid/grid-sample-5/grid-sample-5.component.html @@ -1,32 +1,40 @@
- - - - - - - UnitsInStock - - -
- - - {{ formatNumber(val) }} -
- - - - - - ReorderLevel - - -
- - - {{ formatNumber(val) }} -
- - - + + + + + + + UnitsInStock + + +
+ @if (val>50) { + + } + @if (val<=50) { + + } + {{ formatNumber(val) }} +
+ + + + + + ReorderLevel + + +
+ @if (val>20) { + + } + @if (val<=20) { + + } + {{ formatNumber(val) }} +
+ + +
diff --git a/src/app/grid/grid-sample-5/grid-sample-5.component.ts b/src/app/grid/grid-sample-5/grid-sample-5.component.ts index 41bfc97f9f..ebe5751364 100644 --- a/src/app/grid/grid-sample-5/grid-sample-5.component.ts +++ b/src/app/grid/grid-sample-5/grid-sample-5.component.ts @@ -2,14 +2,14 @@ import { AfterViewInit, ChangeDetectorRef, Component, ViewChild, OnInit } from ' import { IgxGridComponent, IgxColumnComponent, IgxCellHeaderTemplateDirective, IgxCellTemplateDirective, IgxBadgeComponent } from 'igniteui-angular'; import { RemoteService } from '../../services/remote.service'; import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; -import { NgIf } from '@angular/common'; + @Component({ providers: [RemoteService], selector: 'app-grid-remote-virtualization-sample', styleUrls: ['grid-sample-5.component.scss'], templateUrl: 'grid-sample-5.component.html', - imports: [IgxGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxCellHeaderTemplateDirective, IgxCellTemplateDirective, NgIf, IgxBadgeComponent] + imports: [IgxGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxCellHeaderTemplateDirective, IgxCellTemplateDirective, IgxBadgeComponent] }) export class GridRemoteVirtualizationAddRowSampleComponent implements AfterViewInit, OnInit { diff --git a/src/app/grid/grid-sample-pinning-styling/grid-pinning-styling.component.html b/src/app/grid/grid-sample-pinning-styling/grid-pinning-styling.component.html index 29be322981..860b1b4402 100644 --- a/src/app/grid/grid-sample-pinning-styling/grid-pinning-styling.component.html +++ b/src/app/grid/grid-sample-pinning-styling/grid-pinning-styling.component.html @@ -1,14 +1,16 @@
- - - -
- {{col.header}} - -
- - - + + @for (c of columns; track c) { + + +
+ {{col.header}} + +
+ + + } +
diff --git a/src/app/grid/grid-sample-pinning-styling/grid-pinning-styling.component.ts b/src/app/grid/grid-sample-pinning-styling/grid-pinning-styling.component.ts index ccdfc6daa2..0b90ba54fb 100644 --- a/src/app/grid/grid-sample-pinning-styling/grid-pinning-styling.component.ts +++ b/src/app/grid/grid-sample-pinning-styling/grid-pinning-styling.component.ts @@ -2,13 +2,13 @@ import { Component, ViewChild, ViewEncapsulation, OnInit } from '@angular/core'; import { IgxColumnComponent, IgxGridComponent, IgxCellHeaderTemplateDirective, IgxIconComponent } from 'igniteui-angular'; import { DATA } from '../../data/customers'; import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; -import { NgFor } from '@angular/common'; + @Component({ selector: 'app-grid-sample', styleUrls: ['grid-pinning-styling.component.scss'], templateUrl: 'grid-pinning-styling.component.html', - imports: [IgxGridComponent, IgxPreventDocumentScrollDirective, NgFor, IgxColumnComponent, IgxCellHeaderTemplateDirective, IgxIconComponent] + imports: [IgxGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxCellHeaderTemplateDirective, IgxIconComponent] }) export class PinningStylingComponent implements OnInit{ diff --git a/src/app/grid/grid-sample-pinning/grid-pinning.component.html b/src/app/grid/grid-sample-pinning/grid-pinning.component.html index bb2d70ddb2..f398d1535a 100644 --- a/src/app/grid/grid-sample-pinning/grid-pinning.component.html +++ b/src/app/grid/grid-sample-pinning/grid-pinning.component.html @@ -1,15 +1,17 @@
- - - -
- {{col.header}} - - -
- - - + + @for (c of columns; track c) { + + +
+ {{col.header}} + + +
+ + + } +
\ No newline at end of file diff --git a/src/app/grid/grid-sample-pinning/grid-pinning.component.ts b/src/app/grid/grid-sample-pinning/grid-pinning.component.ts index 5aff0949c0..ff319e4f22 100644 --- a/src/app/grid/grid-sample-pinning/grid-pinning.component.ts +++ b/src/app/grid/grid-sample-pinning/grid-pinning.component.ts @@ -4,7 +4,7 @@ import { icons } from '../../services/svgIcons'; import { DATA } from '../../data/customers'; import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; -import { NgFor } from '@angular/common'; + const FILTERING_ICONS_FONT_SET = 'filtering-icons'; @Component({ @@ -13,7 +13,7 @@ const FILTERING_ICONS_FONT_SET = 'filtering-icons'; selector: 'app-grid-sample', styleUrls: ['grid-pinning.component.scss'], templateUrl: 'grid-pinning.component.html', - imports: [IgxGridComponent, IgxPreventDocumentScrollDirective, NgFor, IgxColumnComponent, IgxCellHeaderTemplateDirective, IgxIconComponent] + imports: [IgxGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxCellHeaderTemplateDirective, IgxIconComponent] }) export class PinningSampleComponent implements OnInit, AfterViewInit { diff --git a/src/app/grid/grid-sample-pinning/grid-toolbar-pinning.component.html b/src/app/grid/grid-sample-pinning/grid-toolbar-pinning.component.html index cff4066b6c..79c45fffb4 100644 --- a/src/app/grid/grid-sample-pinning/grid-toolbar-pinning.component.html +++ b/src/app/grid/grid-sample-pinning/grid-toolbar-pinning.component.html @@ -1,13 +1,15 @@
- - - - - - + + + + + + - - - + @for (c of columns; track c) { + + + } +
diff --git a/src/app/grid/grid-sample-pinning/grid-toolbar-pinning.component.ts b/src/app/grid/grid-sample-pinning/grid-toolbar-pinning.component.ts index 66b86a547e..3ac9118f82 100644 --- a/src/app/grid/grid-sample-pinning/grid-toolbar-pinning.component.ts +++ b/src/app/grid/grid-sample-pinning/grid-toolbar-pinning.component.ts @@ -2,7 +2,7 @@ import { Component, ViewChild, ViewEncapsulation, OnInit } from '@angular/core'; import { IgxColumnComponent, IgxGridComponent, IgxGridToolbarComponent, IgxGridToolbarActionsComponent, IgxGridToolbarPinningComponent } from 'igniteui-angular'; import { DATA } from '../../data/customers'; import { ActivatedRoute } from '@angular/router'; -import { NgClass, NgFor } from '@angular/common'; +import { NgClass } from '@angular/common'; import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; @Component({ @@ -11,7 +11,7 @@ import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scro selector: 'app-grid-sample', styleUrls: ['grid-toolbar-pinning.component.scss'], templateUrl: 'grid-toolbar-pinning.component.html', - imports: [NgClass, IgxGridComponent, IgxPreventDocumentScrollDirective, IgxGridToolbarComponent, IgxGridToolbarActionsComponent, IgxGridToolbarPinningComponent, NgFor, IgxColumnComponent] + imports: [NgClass, IgxGridComponent, IgxPreventDocumentScrollDirective, IgxGridToolbarComponent, IgxGridToolbarActionsComponent, IgxGridToolbarPinningComponent, IgxColumnComponent] }) export class PinningToolbarSampleComponent implements OnInit{ diff --git a/src/app/grid/grid-sample-selection/grid-selection.component.html b/src/app/grid/grid-sample-selection/grid-selection.component.html index 6ec7ee381f..ba179f7b1c 100644 --- a/src/app/grid/grid-sample-selection/grid-selection.component.html +++ b/src/app/grid/grid-sample-selection/grid-selection.component.html @@ -1,118 +1,126 @@
-
- Hide Row Selectors - -
-
-
- - - - - - - - - Change - - -
- - - {{ formatNumber(val) }} -
- - - - - Change(%) - +
+ Hide Row Selectors + +
+
+
+ + + + + + + + + Change + + +
+ @if (val>0) { + + } + @if (val<0) { + + } + {{ formatNumber(val) }} +
+ + + + + Change(%) + - - {{ formatNumber(val) }}% - - - - -
- - - {{ formatNumber(val) }}% -
- - - -
-
-
-
-
- Events execution sequence - -
-
-
-
+ + {{ formatNumber(val) }}% + + + + +
+ @if (val>0) { + + } + @if (val<0) { + + } + {{ formatNumber(val) }}%
+ + + +
+
+
+
+
+ Events execution sequence + +
+
+
+
+
-
- notification_important - -

Number of selected rows: {{selectedRowsCount}}

- - -

Currently selected row index: {{selectedRowIndex}}

- - -

There is no currently selected row.

- -
+
+ notification_important + @if (selectionMode === 'multiple') { +

Number of selected rows: {{selectedRowsCount}}

+ } + @if (selectionMode === 'single' && this.selectedRowIndex !== undefined) { +

Currently selected row index: {{selectedRowIndex}}

+ } + @if (selectionMode === 'single' && this.selectedRowIndex === undefined) { +

There is no currently selected row.

+ } +
-
- notification_important - -
    -
  • Now you can select multiple rows within a grid.
    • -
  • Click on row selector field or press SPACE key when some cell is active to toggle row - selection. -
    • -
  • On cell click the row get selected and previous selection state is cleared.
    • -
  • On cell click holding ctrl key, the row get selected and previous selection state is - preserved. -
    • -
  • Shift + click select a range of rows.
    • -
- - -
    -
  • Now you can select only one row within a grid.
    • -
  • Click on row selector field or press SPACE key when some cell is active to toggle row - selection. -
    • -
  • On cell click the row get selected and previous selection state is cleared.
    • -
- - -
    -
  • Now you are unable to select a row while interacting with grid UI.
    • -
  • If you need to select a row use grid API methods.
    • -
- -
+
+ notification_important + @if (selectionMode === 'multiple') { +
    +
  • Now you can select multiple rows within a grid.
    • +
  • Click on row selector field or press SPACE key when some cell is active to toggle row + selection. +
    • +
  • On cell click the row get selected and previous selection state is cleared.
    • +
  • On cell click holding ctrl key, the row get selected and previous selection state is + preserved. +
    • +
  • Shift + click select a range of rows.
    • +
+ } + @if (selectionMode === 'single') { +
    +
  • Now you can select only one row within a grid.
    • +
  • Click on row selector field or press SPACE key when some cell is active to toggle row + selection. +
    • +
  • On cell click the row get selected and previous selection state is cleared.
    • +
+ } + @if (selectionMode === 'none') { +
    +
  • Now you are unable to select a row while interacting with grid UI.
    • +
  • If you need to select a row use grid API methods.
    • +
+ } +
diff --git a/src/app/grid/grid-sample-selection/grid-selection.component.ts b/src/app/grid/grid-sample-selection/grid-selection.component.ts index 12fbdca3dd..311a4a7cca 100644 --- a/src/app/grid/grid-sample-selection/grid-selection.component.ts +++ b/src/app/grid/grid-sample-selection/grid-selection.component.ts @@ -5,7 +5,7 @@ import { Observable } from 'rxjs'; import { FinancialDataService } from '../../services/financial.service'; import { FormsModule } from '@angular/forms'; import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; -import { NgIf, AsyncPipe } from '@angular/common'; +import { AsyncPipe } from '@angular/common'; @Component({ @@ -14,7 +14,7 @@ import { NgIf, AsyncPipe } from '@angular/common'; selector: 'grid-sample', styleUrls: ['./grid-selection.component.scss'], templateUrl: 'grid-selection.component.html', - imports: [IgxSwitchComponent, FormsModule, IgxButtonGroupComponent, IgxGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxCellHeaderTemplateDirective, IgxCellTemplateDirective, NgIf, IgxBadgeComponent, IgxButtonDirective, IgxIconComponent, IgxSnackbarComponent, AsyncPipe] + imports: [IgxSwitchComponent, FormsModule, IgxButtonGroupComponent, IgxGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxCellHeaderTemplateDirective, IgxCellTemplateDirective, IgxBadgeComponent, IgxButtonDirective, IgxIconComponent, IgxSnackbarComponent, AsyncPipe] }) export class GridSelectionSampleComponent implements OnInit { diff --git a/src/app/grid/grid-save-state/grid-state.component.html b/src/app/grid/grid-save-state/grid-state.component.html index 4a7c3d59b1..c686d0f5b9 100644 --- a/src/app/grid/grid-save-state/grid-state.component.html +++ b/src/app/grid/grid-save-state/grid-state.component.html @@ -1,81 +1,85 @@
-
-
- - - - - - -
+
+
+ + + + + + +
-
-
    -
  • Clicking the SAVE button or leaving the page here will save grid state to localStorage.
    • -
  • Use the control buttons to SAVE / RESTORE / RESET / DELETE / grid state or LEAVE the page.
    • -
  • Select/Deselect checkboxes to control saving / restoring feature state.
    • -
-
+
+
    +
  • Clicking the SAVE button or leaving the page here will save grid state to localStorage.
    • +
  • Use the control buttons to SAVE / RESTORE / RESET / DELETE / grid state or LEAVE the page.
    • +
  • Select/Deselect checkboxes to control saving / restoring feature state.
    • +
+
-
-
- All -
-
- - {{ f.shortName }} - -
+
+
+ All +
+ @for (f of features; track f) { +
+ + {{ f.shortName }} +
+ }
+
- - - - - - - - + + + + + + + + - - - + @for (c of columns; track c) { + + + } +
diff --git a/src/app/grid/grid-save-state/grid-state.component.ts b/src/app/grid/grid-save-state/grid-state.component.ts index 83d47ff554..8fd987a7ae 100644 --- a/src/app/grid/grid-save-state/grid-state.component.ts +++ b/src/app/grid/grid-save-state/grid-state.component.ts @@ -4,7 +4,7 @@ import { NavigationStart, Router, RouterLink } from '@angular/router'; import { FilteringExpressionsTree, FilteringLogic, GridFeatures, IGridState, IGridStateOptions, IgxGridComponent, IgxGridStateDirective, IgxNumberSummaryOperand, IgxSummaryResult, IgxCheckboxComponent, IgxButtonDirective, IgxIconComponent, IgxPaginatorComponent, IgxGridToolbarComponent, IgxGridToolbarActionsComponent, IgxGridToolbarHidingComponent, IgxGridToolbarPinningComponent, IgxColumnComponent } from 'igniteui-angular'; import { take } from 'rxjs/operators'; import { employeesData } from './localData'; -import { NgFor } from '@angular/common'; + import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; class MySummary { @@ -25,7 +25,7 @@ class MySummary { selector: 'app-grid', styleUrls: ['./grid-state.component.scss'], templateUrl: './grid-state.component.html', - imports: [IgxButtonDirective, IgxIconComponent, RouterLink, IgxCheckboxComponent, NgFor, IgxGridComponent, IgxPreventDocumentScrollDirective, IgxGridStateDirective, IgxPaginatorComponent, IgxGridToolbarComponent, IgxGridToolbarActionsComponent, IgxGridToolbarHidingComponent, IgxGridToolbarPinningComponent, IgxColumnComponent] + imports: [IgxButtonDirective, IgxIconComponent, RouterLink, IgxCheckboxComponent, IgxGridComponent, IgxPreventDocumentScrollDirective, IgxGridStateDirective, IgxPaginatorComponent, IgxGridToolbarComponent, IgxGridToolbarActionsComponent, IgxGridToolbarHidingComponent, IgxGridToolbarPinningComponent, IgxColumnComponent] }) export class GridSaveStateComponent implements OnInit, AfterViewInit { diff --git a/src/app/grid/grid-search-sample/grid-search-sample.component.html b/src/app/grid/grid-search-sample/grid-search-sample.component.html index 72134030c1..727e52167c 100644 --- a/src/app/grid/grid-search-sample/grid-search-sample.component.html +++ b/src/app/grid/grid-search-sample/grid-search-sample.component.html @@ -1,50 +1,62 @@
- - - search - clear - + + + @if (searchText.length === 0) { + search + } + @if (searchText.length > 0) { + clear + } + - + - -
- - {{ grid.lastSearchInfo.activeMatchIndex + 1 }} of {{ grid.lastSearchInfo.matchInfoCache.length }} - results + @if (searchText.length > 0) { + + @if (grid.lastSearchInfo) { +
+ @if (grid.lastSearchInfo.matchInfoCache.length > 0) { + + {{ grid.lastSearchInfo.activeMatchIndex + 1 }} of {{ grid.lastSearchInfo.matchInfoCache.length }} + results - - No results + } + @if (grid.lastSearchInfo.matchInfoCache.length === 0) { + + No results + }
-
- - - Aa - - - Ab - - -
-
- - -
+ } +
+ + + Aa + + + Ab + + +
+
+ + +
+ } - - - - - - + + + + + + -
+
diff --git a/src/app/grid/grid-search-sample/grid-search-sample.component.ts b/src/app/grid/grid-search-sample/grid-search-sample.component.ts index bc8db8c175..45b74a791c 100644 --- a/src/app/grid/grid-search-sample/grid-search-sample.component.ts +++ b/src/app/grid/grid-search-sample/grid-search-sample.component.ts @@ -1,7 +1,7 @@ import { Component, OnInit, ViewChild } from '@angular/core'; import { IgxGridComponent, IgxInputGroupComponent, IgxPrefixDirective, IgxIconComponent, IgxInputDirective, IgxSuffixDirective, IgxChipsAreaComponent, IgxChipComponent, IgxIconButtonDirective, IgxRippleDirective, IgxColumnComponent } from 'igniteui-angular'; import { MARKET_DATA } from './data'; -import { NgIf } from '@angular/common'; + import { FormsModule } from '@angular/forms'; import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; @@ -9,7 +9,7 @@ import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scro selector: 'app-grid-search-sample', styleUrls: ['./grid-search-sample.component.scss'], templateUrl: './grid-search-sample.component.html', - imports: [IgxInputGroupComponent, IgxPrefixDirective, NgIf, IgxIconComponent, FormsModule, IgxInputDirective, IgxSuffixDirective, IgxChipsAreaComponent, IgxChipComponent, IgxIconButtonDirective, IgxRippleDirective, IgxGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent] + imports: [IgxInputGroupComponent, IgxPrefixDirective, IgxIconComponent, FormsModule, IgxInputDirective, IgxSuffixDirective, IgxChipsAreaComponent, IgxChipComponent, IgxIconButtonDirective, IgxRippleDirective, IgxGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent] }) export class GridSearchSampleComponent implements OnInit { diff --git a/src/app/grid/grid-select/grid-select-sample.component.html b/src/app/grid/grid-select/grid-select-sample.component.html index 31d6bf0c69..2c0c4c85c5 100644 --- a/src/app/grid/grid-select/grid-select-sample.component.html +++ b/src/app/grid/grid-select/grid-select-sample.component.html @@ -1,33 +1,39 @@ - - - - - - - {{ race }} - - - - - - - - - {{ class }} - - - - - - - - - - - {{ alignment }} - - - - + + + + + + @for (race of races; track race) { + + {{ race }} + + } + + + + + + + @for (class of classes; track class) { + + {{ class }} + + } + + + + + + + + + @for (alignment of alignments; track alignment) { + + {{ alignment }} + + } + + + diff --git a/src/app/grid/grid-select/grid-select-sample.component.ts b/src/app/grid/grid-select/grid-select-sample.component.ts index af0df28402..0f9d8dc43d 100644 --- a/src/app/grid/grid-select/grid-select-sample.component.ts +++ b/src/app/grid/grid-select/grid-select-sample.component.ts @@ -3,13 +3,13 @@ import { Component, OnInit, ViewChild } from '@angular/core'; import { IgxGridComponent, IgxColumnComponent, IgxCellEditorTemplateDirective, IgxSelectComponent, IgxFocusDirective, IgxSelectItemComponent } from 'igniteui-angular'; import { DATA, ALIGNMENTS, RACES, CLASSES } from './data'; import { FormsModule } from '@angular/forms'; -import { NgFor } from '@angular/common'; + @Component({ selector: 'app-grid-select-sample', styleUrls: ['./grid-select-sample.component.scss'], templateUrl: './grid-select-sample.component.html', - imports: [IgxGridComponent, IgxColumnComponent, IgxCellEditorTemplateDirective, IgxSelectComponent, FormsModule, IgxFocusDirective, NgFor, IgxSelectItemComponent] + imports: [IgxGridComponent, IgxColumnComponent, IgxCellEditorTemplateDirective, IgxSelectComponent, FormsModule, IgxFocusDirective, IgxSelectItemComponent] }) export class GridSelectComponent implements OnInit { diff --git a/src/app/grid/grid-sorting-styling/grid-sorting-styling.component.html b/src/app/grid/grid-sorting-styling/grid-sorting-styling.component.html index 18fb50da4b..ba574a67c4 100644 --- a/src/app/grid/grid-sorting-styling/grid-sorting-styling.component.html +++ b/src/app/grid/grid-sorting-styling/grid-sorting-styling.component.html @@ -1,31 +1,33 @@
- - + + - - - - {{type.name}} - - + + + @for (type of sortingTypes; track type) { + + {{type.name}} + + } + - - - - - - - - - - - - ${{val}} - - - - - + + + + + + + + + + + + ${{val}} + + + + +
diff --git a/src/app/grid/grid-sorting-styling/grid-sorting-styling.component.ts b/src/app/grid/grid-sorting-styling/grid-sorting-styling.component.ts index a84cb2662e..4cf5bab369 100644 --- a/src/app/grid/grid-sorting-styling/grid-sorting-styling.component.ts +++ b/src/app/grid/grid-sorting-styling/grid-sorting-styling.component.ts @@ -4,7 +4,7 @@ import { DefaultSortingStrategy, IgxGridComponent, IgxSelectComponent, SortingDi import { DATA } from '../../data/localData'; import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; import { FormsModule } from '@angular/forms'; -import { NgFor } from '@angular/common'; + // eslint-disable-next-line no-shadow enum TYPE { @@ -15,7 +15,7 @@ enum TYPE { selector: 'app-grid-sorting-styling', styleUrls: ['./grid-sorting-styling.component.scss'], templateUrl: 'grid-sorting-styling.component.html', - imports: [IgxGridComponent, IgxPreventDocumentScrollDirective, IgxGridToolbarComponent, IgxSelectComponent, FormsModule, IgxLabelDirective, NgFor, IgxSelectItemComponent, IgxColumnComponent, IgxCellTemplateDirective] + imports: [IgxGridComponent, IgxPreventDocumentScrollDirective, IgxGridToolbarComponent, IgxSelectComponent, FormsModule, IgxLabelDirective, IgxSelectItemComponent, IgxColumnComponent, IgxCellTemplateDirective] }) export class SortingStylingComponent implements OnInit { diff --git a/src/app/grid/grid-state-persistence-sample/grid-state-persistance-sample.component.html b/src/app/grid/grid-state-persistence-sample/grid-state-persistance-sample.component.html index ee793841e9..d596982743 100644 --- a/src/app/grid/grid-state-persistence-sample/grid-state-persistance-sample.component.html +++ b/src/app/grid/grid-state-persistence-sample/grid-state-persistance-sample.component.html @@ -1,119 +1,127 @@
- - - + + + - +
- - - - - - - - {{formatCurrency(val)}} - - - - - Change - + + + + + + + + {{formatCurrency(val)}} + + + + + Change + - -
- - - {{ formatNumber(val) }} -
- - - - - {{formatNumber(val)}} - - - Change(%) - + +
+ @if (val>0) { + + } + @if (val<0) { + + } + {{ formatNumber(val) }} +
+ + + + + {{formatNumber(val)}} + + + Change(%) + - - {{ formatNumber(val) }}% - - - - -
- - - {{ formatNumber(val) }}% -
- - - - - {{formatCurrency(val)}} - - - - - {{formatCurrency(val)}} - - - - - {{formatNumber(val)}} - - - - - {{formatNumber(val)}} - - - - - {{formatCurrency(val)}} - - - - {{formatCurrency(val)}} - - - - - {{formatCurrency(val)}} - - - - - {{formatCurrency(val)}} - - - - - {{formatCurrency(val)}} - - + + {{ formatNumber(val) }}% + + + + +
+ @if (val>0) { + + } + @if (val<0) { + + } + {{ formatNumber(val) }}% +
+ + + + + {{formatCurrency(val)}} + + + + + {{formatCurrency(val)}} + + + + + {{formatNumber(val)}} + + + + + {{formatNumber(val)}} + + + + + {{formatCurrency(val)}} + + + + {{formatCurrency(val)}} + + + + + {{formatCurrency(val)}} + + + + + {{formatCurrency(val)}} + + + + + {{formatCurrency(val)}} + +
-
+
diff --git a/src/app/grid/grid-state-persistence-sample/grid-state-persistance-sample.component.ts b/src/app/grid/grid-state-persistence-sample/grid-state-persistance-sample.component.ts index 102e5469c6..0d4e375da3 100644 --- a/src/app/grid/grid-state-persistence-sample/grid-state-persistance-sample.component.ts +++ b/src/app/grid/grid-state-persistence-sample/grid-state-persistance-sample.component.ts @@ -5,14 +5,14 @@ import { Observable } from 'rxjs'; import { take } from 'rxjs/operators'; import { FinancialDataService } from '../../services/financial.service'; import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; -import { NgIf, AsyncPipe } from '@angular/common'; +import { AsyncPipe } from '@angular/common'; @Component({ providers: [FinancialDataService], selector: 'app-grid-state-persistance-sample', styleUrls: ['./grid-state-persistance-sample.component.scss'], templateUrl: 'grid-state-persistance-sample.component.html', - imports: [IgxButtonDirective, IgxIconComponent, IgxGridComponent, IgxPreventDocumentScrollDirective, IgxGridStateDirective, IgxColumnComponent, IgxCellTemplateDirective, IgxCellHeaderTemplateDirective, NgIf, IgxBadgeComponent, AsyncPipe] + imports: [IgxButtonDirective, IgxIconComponent, IgxGridComponent, IgxPreventDocumentScrollDirective, IgxGridStateDirective, IgxColumnComponent, IgxCellTemplateDirective, IgxCellHeaderTemplateDirective, IgxBadgeComponent, AsyncPipe] }) export class GridStatePersistenceSampleComponent { diff --git a/src/app/grid/grid-summary-export/grid-summary-export.component.html b/src/app/grid/grid-summary-export/grid-summary-export.component.html index e68e5981d9..76a56f24b8 100644 --- a/src/app/grid/grid-summary-export/grid-summary-export.component.html +++ b/src/app/grid/grid-summary-export/grid-summary-export.component.html @@ -1,59 +1,63 @@
-
- - Press the button to export the Grid as a .xlsx file. -
+
+ + Press the button to export the Grid as a .xlsx file. +
- - - - - - {{val}} - - -
{{col.field}}
- functions - - - - - ${{val}} - - -
{{col.field}}
- functions - - - - - {{val}} - - -
{{col.field}}
- functions - - - - - Continued - Discontinued - - -
{{col.field}}
- functions - - - - - {{ val | date: 'MMM d, yyyy' }} - - -
{{col.field}}
- functions - - - + + + + + + {{val}} + + +
{{col.field}}
+ functions + + + + + ${{val}} + + +
{{col.field}}
+ functions + + + + + {{val}} + + +
{{col.field}}
+ functions + + + + + @if (val) { + Continued + } + @if (!val) { + Discontinued + } + + +
{{col.field}}
+ functions + + + + + {{ val | date: 'MMM d, yyyy' }} + + +
{{col.field}}
+ functions + + +
diff --git a/src/app/grid/grid-summary-export/grid-summary-export.component.ts b/src/app/grid/grid-summary-export/grid-summary-export.component.ts index 69dc8f8f7b..ae31cabf56 100644 --- a/src/app/grid/grid-summary-export/grid-summary-export.component.ts +++ b/src/app/grid/grid-summary-export/grid-summary-export.component.ts @@ -2,7 +2,7 @@ import { Component, ViewChild } from '@angular/core'; import { ColumnType, IgxExcelExporterOptions, IgxExcelExporterService, IgxGridComponent, IgxNumberSummaryOperand, IgxSummaryResult, IgxButtonDirective, IgxColumnComponent, IgxCellTemplateDirective, IgxCellHeaderTemplateDirective, IgxIconComponent } from 'igniteui-angular'; import { DATA } from '../../data/nwindData'; import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; -import { NgIf, DatePipe } from '@angular/common'; +import { DatePipe } from '@angular/common'; class MySummary { @@ -21,7 +21,7 @@ class MySummary { selector: 'app-grid-summary-export', styleUrls: ['./grid-summary-export.component.scss'], templateUrl: './grid-summary-export.component.html', - imports: [IgxButtonDirective, IgxGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxCellTemplateDirective, IgxCellHeaderTemplateDirective, IgxIconComponent, NgIf, DatePipe] + imports: [IgxButtonDirective, IgxGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxCellTemplateDirective, IgxCellHeaderTemplateDirective, IgxIconComponent, DatePipe] }) export class GridSummaryExportComponent { @ViewChild('grid', { read: IgxGridComponent, static: true }) diff --git a/src/app/grid/grid-summary-formatter/grid-summary-formatter.component.html b/src/app/grid/grid-summary-formatter/grid-summary-formatter.component.html index 61a0a35893..369327c27a 100644 --- a/src/app/grid/grid-summary-formatter/grid-summary-formatter.component.html +++ b/src/app/grid/grid-summary-formatter/grid-summary-formatter.component.html @@ -1,20 +1,24 @@
- - - - - - - - - - - - Continued - Discontinued - - - + + + + + + + + + + + + @if (val) { + Continued + } + @if (!val) { + Discontinued + } + + +
diff --git a/src/app/grid/grid-summary-formatter/grid-summary-formatter.component.ts b/src/app/grid/grid-summary-formatter/grid-summary-formatter.component.ts index 1a97e89c76..9af51601d2 100644 --- a/src/app/grid/grid-summary-formatter/grid-summary-formatter.component.ts +++ b/src/app/grid/grid-summary-formatter/grid-summary-formatter.component.ts @@ -1,4 +1,4 @@ -import { DatePipe, NgIf } from '@angular/common'; +import { DatePipe } from '@angular/common'; import { Component, OnInit, ViewChild } from '@angular/core'; import { IgxDateSummaryOperand, IgxGridComponent, IgxSummaryOperand, IgxSummaryResult, IgxColumnComponent, IgxCellTemplateDirective } from 'igniteui-angular'; import { DATA } from '../../data/nwindData'; @@ -8,7 +8,7 @@ import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scro selector: 'app-grid-summary-formatter', styleUrls: ['./grid-summary-formatter.component.scss'], templateUrl: './grid-summary-formatter.component.html', - imports: [IgxGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxCellTemplateDirective, NgIf] + imports: [IgxGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxCellTemplateDirective] }) export class GridSummaryFormatterComponent implements OnInit { diff --git a/src/app/grid/grid-toolbar-sample/grid-toolbar-sample-2.component.html b/src/app/grid/grid-toolbar-sample/grid-toolbar-sample-2.component.html index 24f0b6cda8..69c8cdba40 100644 --- a/src/app/grid/grid-toolbar-sample/grid-toolbar-sample-2.component.html +++ b/src/app/grid/grid-toolbar-sample/grid-toolbar-sample-2.component.html @@ -1,69 +1,77 @@
-
- - - - -
- Advanced Filtering - Column hiding - Column pinning - Exporting -
+
+ + + + +
+ Advanced Filtering + Column hiding + Column pinning + Exporting
- - - {{ toolbarTitle }} - - - - - - - +
+ + + {{ toolbarTitle }} + + @if (enableFiltering) { + + } + @if (enableHiding) { + + } + @if (enablePinning) { + + } + @if (enableExport) { + + } + + - - -
- - {{ cell.value }} -
- - + + +
+ + {{ cell.value }} +
+ + - - -
- - {{ cell.value }} -
- - + + +
+ + {{ cell.value }} +
+ + - - -
{{ val }}
- - + + +
{{ val }}
+ + - - -
{{ val }}
- + + +
{{ val }}
+ - + - - -
{{ val }}
- - + + +
{{ val }}
+ + - - -
{{ val }}
- - - + + +
{{ val }}
+ + +
diff --git a/src/app/grid/grid-toolbar-sample/grid-toolbar-sample-2.component.ts b/src/app/grid/grid-toolbar-sample/grid-toolbar-sample-2.component.ts index e9b7bf7278..b3955ed3d0 100644 --- a/src/app/grid/grid-toolbar-sample/grid-toolbar-sample-2.component.ts +++ b/src/app/grid/grid-toolbar-sample/grid-toolbar-sample-2.component.ts @@ -4,13 +4,13 @@ import { scaleInCenter, scaleOutCenter } from 'igniteui-angular/animations'; import { athletesData } from '../../data/athletesData'; import { FormsModule } from '@angular/forms'; import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; -import { NgIf } from '@angular/common'; + @Component({ selector: 'app-grid-toolbar-sample-2', styleUrls: ['./grid-toolbar-sample-2.component.scss'], templateUrl: './grid-toolbar-sample-2.component.html', - imports: [IgxInputGroupComponent, IgxLabelDirective, FormsModule, IgxInputDirective, IgxSwitchComponent, IgxGridComponent, IgxPreventDocumentScrollDirective, IgxGridToolbarComponent, IgxGridToolbarTitleComponent, IgxGridToolbarActionsComponent, NgIf, IgxGridToolbarAdvancedFilteringComponent, IgxGridToolbarHidingComponent, IgxGridToolbarPinningComponent, IgxGridToolbarExporterComponent, IgxColumnComponent, IgxCellTemplateDirective, IgxAvatarComponent] + imports: [IgxInputGroupComponent, IgxLabelDirective, FormsModule, IgxInputDirective, IgxSwitchComponent, IgxGridComponent, IgxPreventDocumentScrollDirective, IgxGridToolbarComponent, IgxGridToolbarTitleComponent, IgxGridToolbarActionsComponent, IgxGridToolbarAdvancedFilteringComponent, IgxGridToolbarHidingComponent, IgxGridToolbarPinningComponent, IgxGridToolbarExporterComponent, IgxColumnComponent, IgxCellTemplateDirective, IgxAvatarComponent] }) export class GridToolbarSample2Component { diff --git a/src/app/grid/grid-validator-service-cross-field/grid-validator-service-cross-field.component.html b/src/app/grid/grid-validator-service-cross-field/grid-validator-service-cross-field.component.html index de50237366..e40cb20a03 100644 --- a/src/app/grid/grid-validator-service-cross-field/grid-validator-service-cross-field.component.html +++ b/src/app/grid/grid-validator-service-cross-field/grid-validator-service-cross-field.component.html @@ -1,72 +1,82 @@
- Row edit + Row edit
- - - -
- -
- - - - - - - - - - - -
- The date cannot be in the future. -
- - - {{ cell | date: 'longDate' }} - - - - - {{ cell | date: 'longDate' }} - - - - -
- The date cannot be in the future. -
- - - - - - - - - {{ getDealsRatio(cell) }} - - - - -
- -
-
- -
-
-
- {{message}} -
-
- - - -
- -
+ + + +
+ +
+ + + + + + + + + + + + @if (cell.validation.errors?.['beyondThreshold']) { +
+ The date cannot be in the future. +
+ } + + + {{ cell | date: 'longDate' }} + + + + + {{ cell | date: 'longDate' }} + + + + + @if (cell.validation.errors?.['beyondThreshold']) { +
+ The date cannot be in the future. +
+ } + + + + + + + + + {{ getDealsRatio(cell) }} + + + + + @if (isRowValid(cell)) { +
+ +
+ } + @if (!isRowValid(cell)) { +
+ +
+ } +
+ @for (message of stateMessage(cell); track message) { +
+ {{message}} +
+ } +
+ + + +
+ +
diff --git a/src/app/grid/grid-validator-service-cross-field/grid-validator-service-cross-field.component.ts b/src/app/grid/grid-validator-service-cross-field/grid-validator-service-cross-field.component.ts index 3d9c070058..2ffa4bf03e 100644 --- a/src/app/grid/grid-validator-service-cross-field/grid-validator-service-cross-field.component.ts +++ b/src/app/grid/grid-validator-service-cross-field/grid-validator-service-cross-field.component.ts @@ -3,13 +3,13 @@ import { AbstractControl, FormGroup, ValidationErrors, ValidatorFn, FormsModule import { CellType, IgxGridComponent, IGridEditEventArgs, IgxSwitchComponent, IgxColumnComponent, IgxCellTemplateDirective, IgxAvatarComponent, IgxColumnRequiredValidatorDirective, IgxColumnEmailValidatorDirective, IgxCellValidationErrorDirective, IgxColumnMinValidatorDirective, IgxTooltipTargetDirective, IgxTooltipDirective, IgxButtonDirective } from 'igniteui-angular'; import { IGridFormGroupCreatedEventArgs } from 'igniteui-angular/lib/grids/common/grid.interface'; import { employeesData } from '../../data/employeesData'; -import { NgTemplateOutlet, NgIf, NgFor, DatePipe } from '@angular/common'; +import { NgTemplateOutlet, DatePipe } from '@angular/common'; @Component({ selector: 'app-grid-validator-service-cross-field', styleUrls: ['./grid-validator-service-cross-field.component.scss'], templateUrl: './grid-validator-service-cross-field.component.html', - imports: [IgxSwitchComponent, FormsModule, IgxGridComponent, IgxColumnComponent, IgxCellTemplateDirective, IgxAvatarComponent, IgxColumnRequiredValidatorDirective, IgxColumnEmailValidatorDirective, IgxCellValidationErrorDirective, NgTemplateOutlet, NgIf, IgxColumnMinValidatorDirective, IgxTooltipTargetDirective, IgxTooltipDirective, NgFor, IgxButtonDirective, DatePipe] + imports: [IgxSwitchComponent, FormsModule, IgxGridComponent, IgxColumnComponent, IgxCellTemplateDirective, IgxAvatarComponent, IgxColumnRequiredValidatorDirective, IgxColumnEmailValidatorDirective, IgxCellValidationErrorDirective, NgTemplateOutlet, IgxColumnMinValidatorDirective, IgxTooltipTargetDirective, IgxTooltipDirective, IgxButtonDirective, DatePipe] }) export class GridValidatorServiceCrossFieldComponent { diff --git a/src/app/grid/grid-validator-service-extended/grid-validator-service-extended.component.html b/src/app/grid/grid-validator-service-extended/grid-validator-service-extended.component.html index 3befd1598e..99d7096cfb 100644 --- a/src/app/grid/grid-validator-service-extended/grid-validator-service-extended.component.html +++ b/src/app/grid/grid-validator-service-extended/grid-validator-service-extended.component.html @@ -1,65 +1,73 @@
- - - -
- -
- - - - - - - - - -
- Please enter correct phone format -
- - - - - - -
- The date cannot be in the future. -
- - - {{ cell | date: 'longDate' }} - - - - - {{ cell | date: 'longDate' }} - - - - -
- The date cannot be in the future. -
-
- The date cannot be before the 5th of November 2010 -
- - - - - - - - - - - + + + +
+ +
+ + + + + + + + + + @if (cell.validation.errors?.['phoneFormat']) { +
+ Please enter correct phone format +
+ } + + + + + + + @if (cell.validation.errors?.['futureDate']) { +
+ The date cannot be in the future. +
+ } + + + {{ cell | date: 'longDate' }} + + + + + {{ cell | date: 'longDate' }} + + + + + @if (cell.validation.errors?.['futureDate']) { +
+ The date cannot be in the future. +
+ } + @if (cell.validation.errors?.['pastDate']) { +
+ The date cannot be before the 5th of November 2010 +
+ } + + + + + + + + + + +
- - - + + +
diff --git a/src/app/grid/grid-validator-service-extended/grid-validator-service-extended.component.ts b/src/app/grid/grid-validator-service-extended/grid-validator-service-extended.component.ts index c2caedfac3..eef0cca32d 100644 --- a/src/app/grid/grid-validator-service-extended/grid-validator-service-extended.component.ts +++ b/src/app/grid/grid-validator-service-extended/grid-validator-service-extended.component.ts @@ -3,7 +3,7 @@ import { AbstractControl, FormGroup, NG_VALIDATORS, ValidationErrors, ValidatorF import { IgxGridComponent, IgxColumnComponent, IgxCellTemplateDirective, IgxAvatarComponent, IgxColumnRequiredValidatorDirective, IgxColumnEmailValidatorDirective, IgxCellValidationErrorDirective, IgxColumnMinValidatorDirective, IgxButtonDirective } from 'igniteui-angular'; import { IGridFormGroupCreatedEventArgs } from 'igniteui-angular/lib/grids/common/grid.interface'; import { employeesData } from '../../data/employeesData'; -import { NgTemplateOutlet, NgIf, DatePipe } from '@angular/common'; +import { NgTemplateOutlet, DatePipe } from '@angular/common'; export function phoneFormatValidator(phoneReg: RegExp): ValidatorFn { return (control: AbstractControl): ValidationErrors | null => { @@ -30,7 +30,7 @@ export class PhoneFormatDirective extends Validators { selector: 'app-grid-validator-service-extended', styleUrls: ['./grid-validator-service-extended.component.scss'], templateUrl: './grid-validator-service-extended.component.html', - imports: [IgxGridComponent, IgxColumnComponent, IgxCellTemplateDirective, IgxAvatarComponent, IgxColumnRequiredValidatorDirective, IgxColumnEmailValidatorDirective, PhoneFormatDirective, IgxCellValidationErrorDirective, NgTemplateOutlet, NgIf, IgxColumnMinValidatorDirective, IgxButtonDirective, DatePipe] + imports: [IgxGridComponent, IgxColumnComponent, IgxCellTemplateDirective, IgxAvatarComponent, IgxColumnRequiredValidatorDirective, IgxColumnEmailValidatorDirective, PhoneFormatDirective, IgxCellValidationErrorDirective, NgTemplateOutlet, IgxColumnMinValidatorDirective, IgxButtonDirective, DatePipe] }) export class GridValidatorServiceExtendedComponent { diff --git a/src/app/hierarchical-grid/hgrid-keybarod-nav-guide-sample/hgrid-keyboard-guide.component.html b/src/app/hierarchical-grid/hgrid-keybarod-nav-guide-sample/hgrid-keyboard-guide.component.html index 54432c96be..4d2524053e 100644 --- a/src/app/hierarchical-grid/hgrid-keybarod-nav-guide-sample/hgrid-keyboard-guide.component.html +++ b/src/app/hierarchical-grid/hgrid-keybarod-nav-guide-sample/hgrid-keyboard-guide.component.html @@ -1,87 +1,93 @@
-
- - - +
+ + + @if (false) { + + } - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + - - + + - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + - - - - - - - -
-
- - {{headerList}} - -

{{ c.title }}

-

{{ c.subTitle }}

- - - - -
Use the native navigation of the browser until you reach some of the following grid sections below:
-
    -
  • Header
    • -
  • Body
    • -
  • Summary
    • -
-
When reached, an action list will be shown.
- - - -
+ + + + + + + +
+
+ + @if (keyboardCollection.length > 0) { + {{headerList}} + } + @for (c of keyboardCollection; track c; let idx = $index) { + +

{{ c.title }}

+

{{ c.subTitle }}

+ + + } + + +
Use the native navigation of the browser until you reach some of the following grid sections below:
+
    +
  • Header
    • +
  • Body
    • +
  • Summary
    • +
+
When reached, an action list will be shown.
+ + + +
diff --git a/src/app/hierarchical-grid/hgrid-keybarod-nav-guide-sample/hgrid-keyboard-guide.component.ts b/src/app/hierarchical-grid/hgrid-keybarod-nav-guide-sample/hgrid-keyboard-guide.component.ts index 4de3a71ceb..3c7e1bad2a 100644 --- a/src/app/hierarchical-grid/hgrid-keybarod-nav-guide-sample/hgrid-keyboard-guide.component.ts +++ b/src/app/hierarchical-grid/hgrid-keybarod-nav-guide-sample/hgrid-keyboard-guide.component.ts @@ -8,7 +8,7 @@ import { CellType, IgxColumnComponent, IgxColumnGroupComponent, IgxHierarchicalG import { fromEvent, Subject } from 'rxjs'; import { takeUntil } from 'rxjs/operators'; import { CUSTOMERS } from '../../data/hierarchical-data'; -import { NgIf, NgFor, NgClass } from '@angular/common'; +import { NgClass } from '@angular/common'; enum GridSection { THEAD = 'igx-grid__thead-wrapper', @@ -163,7 +163,7 @@ const summaryCombinations: Item[] = [ ]) ]) ], - imports: [IgxHierarchicalGridComponent, IgxPaginatorComponent, NgIf, IgxGridToolbarComponent, IgxColumnComponent, IgxColumnGroupComponent, IgxRowIslandComponent, IgxGridToolbarDirective, IgxListComponent, IgxListItemComponent, NgFor, NgClass, IgxListLineTitleDirective, IgxListLineSubTitleDirective, IgxCheckboxComponent, IgxEmptyListTemplateDirective] + imports: [IgxHierarchicalGridComponent, IgxPaginatorComponent, IgxGridToolbarComponent, IgxColumnComponent, IgxColumnGroupComponent, IgxRowIslandComponent, IgxGridToolbarDirective, IgxListComponent, IgxListItemComponent, NgClass, IgxListLineTitleDirective, IgxListLineSubTitleDirective, IgxCheckboxComponent, IgxEmptyListTemplateDirective] }) export class HGridKeyboardnavGuide implements OnInit, OnDestroy { diff --git a/src/app/hierarchical-grid/hierarchical-grid-action-strip/hierarchical-grid-action-strip-sample.html b/src/app/hierarchical-grid/hierarchical-grid-action-strip/hierarchical-grid-action-strip-sample.html index fc8998dcc4..b73331dce4 100644 --- a/src/app/hierarchical-grid/hierarchical-grid-action-strip/hierarchical-grid-action-strip-sample.html +++ b/src/app/hierarchical-grid/hierarchical-grid-action-strip/hierarchical-grid-action-strip-sample.html @@ -1,62 +1,69 @@
- - - - -
- -
- - - - - + + + + +
+ +
+ + + + + - - - - - - - - - - - - + + + + + + + + + + + + - - - - - - - - - - - - - - - - - + + + + + + + + + @if (!inEditMode(actionstrip.context)) { + + @if (isDirty(actionstrip.context)) { + + } + @if (!isDirty(actionstrip.context) && hasDiscardedTransactions(actionstrip.context)) { + + } + @if (isDirty(actionstrip.context)) { + + } + @if (!isDeleted(actionstrip.context)) { + + } + } + +
diff --git a/src/app/hierarchical-grid/hierarchical-grid-action-strip/hierarchical-grid-action-strip-sample.ts b/src/app/hierarchical-grid/hierarchical-grid-action-strip/hierarchical-grid-action-strip-sample.ts index 30c57b0e6b..b0eee81c21 100644 --- a/src/app/hierarchical-grid/hierarchical-grid-action-strip/hierarchical-grid-action-strip-sample.ts +++ b/src/app/hierarchical-grid/hierarchical-grid-action-strip/hierarchical-grid-action-strip-sample.ts @@ -2,13 +2,13 @@ import { Component, ViewChild, ChangeDetectorRef, AfterViewInit, ViewChildren, Q import { IgxHierarchicalGridComponent, RowType, Transaction, IgxColumnComponent, IgxCellTemplateDirective, IgxRowIslandComponent, IgxActionStripComponent, IgxGridPinningActionsComponent, IgxIconButtonDirective, IgxRippleDirective, IgxIconComponent } from 'igniteui-angular'; import { SINGERS } from '../../data/singersData'; import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; -import { NgIf } from '@angular/common'; + @Component({ selector: 'app-grid-row-action-strip', styleUrls: [`hierarchical-grid-action-strip-sample.scss`], templateUrl: 'hierarchical-grid-action-strip-sample.html', - imports: [IgxHierarchicalGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxCellTemplateDirective, IgxRowIslandComponent, IgxActionStripComponent, IgxGridPinningActionsComponent, NgIf, IgxIconButtonDirective, IgxRippleDirective, IgxIconComponent] + imports: [IgxHierarchicalGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxCellTemplateDirective, IgxRowIslandComponent, IgxActionStripComponent, IgxGridPinningActionsComponent, IgxIconButtonDirective, IgxRippleDirective, IgxIconComponent] }) export class HGridActionStripSampleComponent implements AfterViewInit{ @ViewChild('hierarchicalGrid', { read: IgxHierarchicalGridComponent, static: true }) diff --git a/src/app/hierarchical-grid/hierarchical-grid-cellSelection-sample/hierarchical-grid-cellSelection.component.html b/src/app/hierarchical-grid/hierarchical-grid-cellSelection-sample/hierarchical-grid-cellSelection.component.html index bb9841efe9..5ac3dc6f5f 100644 --- a/src/app/hierarchical-grid/hierarchical-grid-cellSelection-sample/hierarchical-grid-cellSelection.component.html +++ b/src/app/hierarchical-grid/hierarchical-grid-cellSelection-sample/hierarchical-grid-cellSelection.component.html @@ -1,82 +1,82 @@
-
-
Parent Grid cell selection mode:
- -
-
-
Child Grid cell selection mode:
- -
- - - - - - - - - - - - - - +
+
Parent Grid cell selection mode:
+ +
+
+
Child Grid cell selection mode:
+ +
+ + + + + + + + + + + + + +
-
- notification_important -
- Parent grid: - -
    -
  • This is the default selection behavior.
    • -
  • Click on a cell and while pressing the mouse key perform drag action. -
    • -
  • Select a cell and press Shift + Arrow down key, this will start range selection as well. -
    • -
- - -
    -
  • Now you can select only one cell within the grid.
    • -
  • On single cell click the previous selection state will be cleared.
    • -
  • The mouse drag will not work and instead of selecting a cell, this will make default text - selection.
    • -
- - -
    -
  • Now you are unable to select a cell while interacting with grid UI.
    • -
  • If you need to select a cell, you can use the grid API methods.
    • -
- -
-
- Child grid: - -
    -
  • This is the default selection behavior.
    • -
  • Click on a cell and while pressing the mouse key perform drag action. -
    • -
  • Select a cell and press Shift + Arrow down key, this will start range selection as well. -
    • -
- - -
    -
  • Now you can select only one cell within the grid.
    • -
  • On single cell click the previous selection state will be cleared.
    • -
  • The mouse drag will not work and instead of selecting a cell, this will make default text - selection.
    • -
- - -
    -
  • Now you are unable to select a cell while interacting with grid UI.
    • -
  • If you need to select a cell, you can use the grid API methods.
    • -
- -
+
+ notification_important +
+ Parent grid: + @if (selectionMode === 'multiple') { +
    +
  • This is the default selection behavior.
    • +
  • Click on a cell and while pressing the mouse key perform drag action. +
    • +
  • Select a cell and press Shift + Arrow down key, this will start range selection as well. +
    • +
+ } + @if (selectionMode === 'single') { +
    +
  • Now you can select only one cell within the grid.
    • +
  • On single cell click the previous selection state will be cleared.
    • +
  • The mouse drag will not work and instead of selecting a cell, this will make default text + selection.
    • +
+ } + @if (selectionMode === 'none') { +
    +
  • Now you are unable to select a cell while interacting with grid UI.
    • +
  • If you need to select a cell, you can use the grid API methods.
    • +
+ } +
+
+ Child grid: + @if (selectionModeChild === 'multiple') { +
    +
  • This is the default selection behavior.
    • +
  • Click on a cell and while pressing the mouse key perform drag action. +
    • +
  • Select a cell and press Shift + Arrow down key, this will start range selection as well. +
    • +
+ } + @if (selectionModeChild === 'single') { +
    +
  • Now you can select only one cell within the grid.
    • +
  • On single cell click the previous selection state will be cleared.
    • +
  • The mouse drag will not work and instead of selecting a cell, this will make default text + selection.
    • +
+ } + @if (selectionModeChild === 'none') { +
    +
  • Now you are unable to select a cell while interacting with grid UI.
    • +
  • If you need to select a cell, you can use the grid API methods.
    • +
+ }
+
diff --git a/src/app/hierarchical-grid/hierarchical-grid-cellSelection-sample/hierarchical-grid-cellSelection.component.ts b/src/app/hierarchical-grid/hierarchical-grid-cellSelection-sample/hierarchical-grid-cellSelection.component.ts index 23b9c3afe5..388da0f7c8 100644 --- a/src/app/hierarchical-grid/hierarchical-grid-cellSelection-sample/hierarchical-grid-cellSelection.component.ts +++ b/src/app/hierarchical-grid/hierarchical-grid-cellSelection-sample/hierarchical-grid-cellSelection.component.ts @@ -2,13 +2,13 @@ import { Component, OnInit, ViewChild } from '@angular/core'; import { IgxSnackbarComponent, IgxHierarchicalGridComponent, GridSelectionMode, IgxButtonGroupComponent, IgxColumnComponent, IgxRowIslandComponent, IgxIconComponent } from 'igniteui-angular'; import { SINGERS } from '../../data/singersData'; import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; -import { NgIf } from '@angular/common'; + @Component({ selector: 'app-hierarchical-grid-cell-selection', styleUrls: ['./hierarchical-grid-cellSelection.component.scss'], templateUrl: 'hierarchical-grid-cellSelection.component.html', - imports: [IgxButtonGroupComponent, IgxHierarchicalGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxRowIslandComponent, IgxSnackbarComponent, IgxIconComponent, NgIf] + imports: [IgxButtonGroupComponent, IgxHierarchicalGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxRowIslandComponent, IgxSnackbarComponent, IgxIconComponent] }) export class HierarchicalGridCellSelectionComponent implements OnInit { @ViewChild('hgrid', { static: true }) public hGrid: IgxHierarchicalGridComponent; diff --git a/src/app/hierarchical-grid/hierarchical-grid-cross-field-validation/hierarchical-grid-cross-field-validation.component.html b/src/app/hierarchical-grid/hierarchical-grid-cross-field-validation/hierarchical-grid-cross-field-validation.component.html index b711c82e51..2c539508c7 100644 --- a/src/app/hierarchical-grid/hierarchical-grid-cross-field-validation/hierarchical-grid-cross-field-validation.component.html +++ b/src/app/hierarchical-grid/hierarchical-grid-cross-field-validation/hierarchical-grid-cross-field-validation.component.html @@ -1,80 +1,96 @@
- Row edit + Row edit
- - - -
- -
-
- -
-
-
- {{message}} -
-
- - - - - - - - - - {{ city }} - - - - - - - - - {{ country }} - - - - + + + + @if (isRowValid(cell)) { +
+ +
+ } + @if (!isRowValid(cell)) { +
+ +
+ } +
+ @for (message of stateMessage(cell); track message) { +
+ {{message}} +
+ } +
+ + + + + + + + + @for (city of cities; track city) { + + {{ city }} + + } + + + + + + + @for (country of countries; track country) { + + {{ country }} + + } + + + - - - - - - - - - - -
- -
-
- -
-
-
- {{message}} -
-
- - - - - - - - - -
- -
+ + + + + + + + + + + @if (isRowValid(cell)) { +
+ +
+ } + @if (!isRowValid(cell)) { +
+ +
+ } +
+ @for (message of stateMessage(cell); track message) { +
+ {{message}} +
+ } +
+ + + + + + + + + +
+ +
diff --git a/src/app/hierarchical-grid/hierarchical-grid-cross-field-validation/hierarchical-grid-cross-field-validation.component.ts b/src/app/hierarchical-grid/hierarchical-grid-cross-field-validation/hierarchical-grid-cross-field-validation.component.ts index 4062c93d44..a2ec4eae07 100644 --- a/src/app/hierarchical-grid/hierarchical-grid-cross-field-validation/hierarchical-grid-cross-field-validation.component.ts +++ b/src/app/hierarchical-grid/hierarchical-grid-cross-field-validation/hierarchical-grid-cross-field-validation.component.ts @@ -4,13 +4,13 @@ import { CellType, IgxHierarchicalGridComponent, IGridEditEventArgs, IgxSwitchCo import { IGridFormGroupCreatedEventArgs } from 'igniteui-angular/lib/grids/common/grid.interface'; import { CUSTOMERS } from '../../data/hierarchical-data'; import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; -import { NgIf, NgFor } from '@angular/common'; + @Component({ selector: 'hierarchical-grid-cross-field-validation', styleUrls: ['./hierarchical-grid-cross-field-validation.component.scss'], templateUrl: 'hierarchical-grid-cross-field-validation.component.html', - imports: [IgxSwitchComponent, FormsModule, IgxHierarchicalGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxCellTemplateDirective, NgIf, IgxTooltipTargetDirective, IgxTooltipDirective, NgFor, IgxColumnRequiredValidatorDirective, IgxCellEditorTemplateDirective, IgxSelectComponent, ReactiveFormsModule, IgxFocusDirective, IgxSelectItemComponent, IgxRowIslandComponent, IgxGridToolbarDirective, IgxGridToolbarComponent, IgxButtonDirective] + imports: [IgxSwitchComponent, FormsModule, IgxHierarchicalGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxCellTemplateDirective, IgxTooltipTargetDirective, IgxTooltipDirective, IgxColumnRequiredValidatorDirective, IgxCellEditorTemplateDirective, IgxSelectComponent, ReactiveFormsModule, IgxFocusDirective, IgxSelectItemComponent, IgxRowIslandComponent, IgxGridToolbarDirective, IgxGridToolbarComponent, IgxButtonDirective] }) export class HierarchicalGridValidatorServiceCrossCellComponent implements OnInit { diff --git a/src/app/hierarchical-grid/hierarchical-grid-disable-summaries/hierarchical-grid-disable-summaries.component.html b/src/app/hierarchical-grid/hierarchical-grid-disable-summaries/hierarchical-grid-disable-summaries.component.html index e6b816cc72..b45819091b 100644 --- a/src/app/hierarchical-grid/hierarchical-grid-disable-summaries/hierarchical-grid-disable-summaries.component.html +++ b/src/app/hierarchical-grid/hierarchical-grid-disable-summaries/hierarchical-grid-disable-summaries.component.html @@ -1,141 +1,140 @@
-
-
Disable Summaries for Column:
- -
- +
+
+
+

+ Disabled Summaries +

+
+
+ @for (summary of column.summaries; track summary; let i = $index) { + + {{ summary.summaryLabel }} + + } +
+
+ -
-
-
-

- Disabled Summaries -

-
- -
- - {{ summary.summaryLabel }} - -
- -
- - -
-
-
+ Disable All + +
- -
- +
+
+ } +
+ - - + + +
+ +
+ + + + + + + + + + + + - -
- -
- - + - - - - - - - - - - - - - - + + + - - - - - - - + + + + + + +
diff --git a/src/app/hierarchical-grid/hierarchical-grid-disable-summaries/hierarchical-grid-disable-summaries.component.ts b/src/app/hierarchical-grid/hierarchical-grid-disable-summaries/hierarchical-grid-disable-summaries.component.ts index e2b304d713..afbc4b6ce8 100644 --- a/src/app/hierarchical-grid/hierarchical-grid-disable-summaries/hierarchical-grid-disable-summaries.component.ts +++ b/src/app/hierarchical-grid/hierarchical-grid-disable-summaries/hierarchical-grid-disable-summaries.component.ts @@ -24,7 +24,7 @@ import { } from "igniteui-angular"; import { SINGERS } from "../../data/singersData"; import { IgxPreventDocumentScrollDirective } from "../../directives/prevent-scroll.directive"; -import { NgFor } from "@angular/common"; + class GrammySummary { public operate( @@ -80,16 +80,15 @@ class GrammySummary { styleUrls: ["./hierarchical-grid-disable-summaries.component.scss"], templateUrl: "hierarchical-grid-disable-summaries.component.html", imports: [ - NgFor, - IgxHierarchicalGridComponent, - IgxRowIslandComponent, - IgxCellTemplateDirective, - IgxPreventDocumentScrollDirective, - IgxColumnComponent, - IgxButtonDirective, - IgxCheckboxComponent, - IgxToggleDirective - ] + IgxHierarchicalGridComponent, + IgxRowIslandComponent, + IgxCellTemplateDirective, + IgxPreventDocumentScrollDirective, + IgxColumnComponent, + IgxButtonDirective, + IgxCheckboxComponent, + IgxToggleDirective +] }) export class HierarchicalGridDisableSummariesComponent implements OnInit, AfterViewInit { @ViewChild("hierarchicalGrid1", { static: true }) public hierarchicalGrid1: IgxHierarchicalGridComponent; diff --git a/src/app/hierarchical-grid/hierarchical-grid-external-excel-style-filtering/hierarchical-grid-external-excel-style-filtering.component.html b/src/app/hierarchical-grid/hierarchical-grid-external-excel-style-filtering/hierarchical-grid-external-excel-style-filtering.component.html index 937c1b5a3a..9ad3c0ecd4 100644 --- a/src/app/hierarchical-grid/hierarchical-grid-external-excel-style-filtering/hierarchical-grid-external-excel-style-filtering.component.html +++ b/src/app/hierarchical-grid/hierarchical-grid-external-excel-style-filtering/hierarchical-grid-external-excel-style-filtering.component.html @@ -1,55 +1,57 @@
-
- - - - {{c.field}} - - +
+ + + @for (c of columns; track c) { + + {{c.field}} + + } + - - -
+ + +
- - - - - - - + + + + + + + - - - -
- -
- - - - - + + + +
+ +
+ + + + + - - - - - - - - - - - - + + + + + + + + + + + + - - - - - - - + + + + + + +
diff --git a/src/app/hierarchical-grid/hierarchical-grid-external-excel-style-filtering/hierarchical-grid-external-excel-style-filtering.component.ts b/src/app/hierarchical-grid/hierarchical-grid-external-excel-style-filtering/hierarchical-grid-external-excel-style-filtering.component.ts index 10a4e52114..73f6b47154 100644 --- a/src/app/hierarchical-grid/hierarchical-grid-external-excel-style-filtering/hierarchical-grid-external-excel-style-filtering.component.ts +++ b/src/app/hierarchical-grid/hierarchical-grid-external-excel-style-filtering/hierarchical-grid-external-excel-style-filtering.component.ts @@ -1,7 +1,7 @@ import { ChangeDetectionStrategy, Component, OnInit, ViewChild, AfterViewInit } from '@angular/core'; import { IgxHierarchicalGridComponent, IgxSelectComponent, IgxLabelDirective, IgxSelectItemComponent, IgxGridExcelStyleFilteringComponent, IgxGridToolbarComponent, IgxGridToolbarActionsComponent, IgxGridToolbarHidingComponent, IgxGridToolbarPinningComponent, IgxColumnComponent, IgxCellTemplateDirective, IgxRowIslandComponent } from 'igniteui-angular'; import { SINGERS } from '../../data/singersData'; -import { NgFor } from '@angular/common'; + import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; @Component({ @@ -9,7 +9,7 @@ import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scro selector: 'app-hierarchical-grid-external-excel-style-filtering', templateUrl: './hierarchical-grid-external-excel-style-filtering.component.html', styleUrls: ['./hierarchical-grid-external-excel-style-filtering.component.scss'], - imports: [IgxSelectComponent, IgxLabelDirective, NgFor, IgxSelectItemComponent, IgxGridExcelStyleFilteringComponent, IgxHierarchicalGridComponent, IgxPreventDocumentScrollDirective, IgxGridToolbarComponent, IgxGridToolbarActionsComponent, IgxGridToolbarHidingComponent, IgxGridToolbarPinningComponent, IgxColumnComponent, IgxCellTemplateDirective, IgxRowIslandComponent] + imports: [IgxSelectComponent, IgxLabelDirective, IgxSelectItemComponent, IgxGridExcelStyleFilteringComponent, IgxHierarchicalGridComponent, IgxPreventDocumentScrollDirective, IgxGridToolbarComponent, IgxGridToolbarActionsComponent, IgxGridToolbarHidingComponent, IgxGridToolbarPinningComponent, IgxColumnComponent, IgxCellTemplateDirective, IgxRowIslandComponent] }) export class HGridExternalExcelStyleFilteringComponent implements AfterViewInit{ diff --git a/src/app/hierarchical-grid/hierarchical-grid-filtering-template/hierarchical-grid-filtering-template.component.html b/src/app/hierarchical-grid/hierarchical-grid-filtering-template/hierarchical-grid-filtering-template.component.html index d7e5d2d55b..7a3a1f8e2a 100644 --- a/src/app/hierarchical-grid/hierarchical-grid-filtering-template/hierarchical-grid-filtering-template.component.html +++ b/src/app/hierarchical-grid/hierarchical-grid-filtering-template/hierarchical-grid-filtering-template.component.html @@ -1,71 +1,75 @@
- - -
- -
- + +
+ +
+ - - - - - - - - - - + + + + + + + + + + - - - - + + + + - - + +
- - - search - - - - clear + + + search + + + @if (input.value || input.value === '0') { + + clear + } -
- - -
+
+ + +
- - search - - - clear + placeholder="Filter..." [displayFormat]="displayDateFormat" type="box"> + + search + + @if (picker.value) { + + clear + } -
- -
+
+ +
diff --git a/src/app/hierarchical-grid/hierarchical-grid-filtering-template/hierarchical-grid-filtering-template.component.ts b/src/app/hierarchical-grid/hierarchical-grid-filtering-template/hierarchical-grid-filtering-template.component.ts index 14d31af56a..6986bd2949 100644 --- a/src/app/hierarchical-grid/hierarchical-grid-filtering-template/hierarchical-grid-filtering-template.component.ts +++ b/src/app/hierarchical-grid/hierarchical-grid-filtering-template/hierarchical-grid-filtering-template.component.ts @@ -2,13 +2,13 @@ import { Component, OnInit, ViewChild } from '@angular/core'; import { GridColumnDataType, ColumnType, IgxDateFilteringOperand, IgxHierarchicalGridComponent, IgxNumberFilteringOperand, IgxStringFilteringOperand, OverlaySettings, IgxColumnComponent, IgxCellTemplateDirective, IgxRowIslandComponent, IgxFilterCellTemplateDirective, IgxInputGroupComponent, IgxPrefixDirective, IgxIconComponent, IgxInputDirective, IgxSuffixDirective, IgxDatePickerComponent, IgxPickerToggleComponent, IgxPickerClearComponent } from 'igniteui-angular'; import { SINGERS } from '../../data/singersData'; import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; -import { NgIf } from '@angular/common'; + @Component({ selector: 'app-hierarchical-grid-filtering-template', styleUrls: ['./hierarchical-grid-filtering-template.component.scss'], templateUrl: 'hierarchical-grid-filtering-template.component.html', - imports: [IgxHierarchicalGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxCellTemplateDirective, IgxRowIslandComponent, IgxFilterCellTemplateDirective, IgxInputGroupComponent, IgxPrefixDirective, IgxIconComponent, IgxInputDirective, NgIf, IgxSuffixDirective, IgxDatePickerComponent, IgxPickerToggleComponent, IgxPickerClearComponent] + imports: [IgxHierarchicalGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxCellTemplateDirective, IgxRowIslandComponent, IgxFilterCellTemplateDirective, IgxInputGroupComponent, IgxPrefixDirective, IgxIconComponent, IgxInputDirective, IgxSuffixDirective, IgxDatePickerComponent, IgxPickerToggleComponent, IgxPickerClearComponent] }) export class HGridFilteringTemplateSampleComponent implements OnInit { diff --git a/src/app/hierarchical-grid/hierarchical-grid-filtering/hierarchical-grid-custom-filtering.component.html b/src/app/hierarchical-grid/hierarchical-grid-filtering/hierarchical-grid-custom-filtering.component.html index 5b2e6f118f..32c2f3f4bf 100644 --- a/src/app/hierarchical-grid/hierarchical-grid-filtering/hierarchical-grid-custom-filtering.component.html +++ b/src/app/hierarchical-grid/hierarchical-grid-filtering/hierarchical-grid-custom-filtering.component.html @@ -1,28 +1,32 @@
- - - True - False - + + @if (val) { + True + } + @if (!val) { + False + } + - - - - - - - - - + + + + + + + + + + - - +
diff --git a/src/app/hierarchical-grid/hierarchical-grid-filtering/hierarchical-grid-custom-filtering.component.ts b/src/app/hierarchical-grid/hierarchical-grid-filtering/hierarchical-grid-custom-filtering.component.ts index d5c9b81faa..2706a0b2ac 100644 --- a/src/app/hierarchical-grid/hierarchical-grid-filtering/hierarchical-grid-custom-filtering.component.ts +++ b/src/app/hierarchical-grid/hierarchical-grid-filtering/hierarchical-grid-custom-filtering.component.ts @@ -2,13 +2,13 @@ import { Component } from '@angular/core'; import { IgxBooleanFilteringOperand, IgxStringFilteringOperand, IgxHierarchicalGridComponent, IgxColumnComponent, IgxCellTemplateDirective, IgxRowIslandComponent } from 'igniteui-angular'; import { SINGERS } from '../../data/singersData'; import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; -import { NgIf } from '@angular/common'; + @Component({ selector: 'app-hierarchical-grid-custom-filtering', styleUrls: ['./hierarchical-grid-custom-filtering.component.scss'], templateUrl: 'hierarchical-grid-custom-filtering.component.html', - imports: [IgxHierarchicalGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxCellTemplateDirective, NgIf, IgxRowIslandComponent] + imports: [IgxHierarchicalGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxCellTemplateDirective, IgxRowIslandComponent] }) export class HGridCustomFilteringSampleComponent { diff --git a/src/app/hierarchical-grid/hierarchical-grid-pager-sample/hierarchical-grid-pager-sample.component.html b/src/app/hierarchical-grid/hierarchical-grid-pager-sample/hierarchical-grid-pager-sample.component.html index ef54ef097d..6eaa969f21 100644 --- a/src/app/hierarchical-grid/hierarchical-grid-pager-sample/hierarchical-grid-pager-sample.component.html +++ b/src/app/hierarchical-grid/hierarchical-grid-pager-sample/hierarchical-grid-pager-sample.component.html @@ -1,52 +1,56 @@
- - - - - - + + + + @if (!isDropdownHidden) { + + } + @if (!isPagerHidden) { + + } + + + + + +
+ +
+ + + + + + + + + + + + + + - - - -
- -
- - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + - - - - - - + + + + + + -
- Hide Dropdown - Hide Pager -
+
+ Hide Dropdown + Hide Pager +
diff --git a/src/app/hierarchical-grid/hierarchical-grid-pager-sample/hierarchical-grid-pager-sample.component.ts b/src/app/hierarchical-grid/hierarchical-grid-pager-sample/hierarchical-grid-pager-sample.component.ts index f4dd58788d..255bc596ca 100644 --- a/src/app/hierarchical-grid/hierarchical-grid-pager-sample/hierarchical-grid-pager-sample.component.ts +++ b/src/app/hierarchical-grid/hierarchical-grid-pager-sample/hierarchical-grid-pager-sample.component.ts @@ -2,14 +2,14 @@ import { Component, OnInit, ViewChild, AfterViewInit } from '@angular/core'; import { IPaginatorResourceStrings, IgxPaginatorComponent, IgxHierarchicalGridComponent, IgxPaginatorContentDirective, IgxPageSizeSelectorComponent, IgxPageNavigationComponent, IgxColumnComponent, IgxCellTemplateDirective, IgxRowIslandComponent, IgxPaginatorDirective, IgxSwitchComponent } from 'igniteui-angular'; import { SINGERS } from '../../data/singersData'; import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; -import { NgIf } from '@angular/common'; + import { FormsModule } from '@angular/forms'; @Component({ selector: 'app-hierarchical-grid-pager-sample', styleUrls: ['./hierarchical-grid-pager-sample.component.scss'], templateUrl: './hierarchical-grid-pager-sample.component.html', - imports: [IgxHierarchicalGridComponent, IgxPreventDocumentScrollDirective, IgxPaginatorComponent, IgxPaginatorContentDirective, NgIf, IgxPageSizeSelectorComponent, IgxPageNavigationComponent, IgxColumnComponent, IgxCellTemplateDirective, IgxRowIslandComponent, IgxPaginatorDirective, IgxSwitchComponent, FormsModule] + imports: [IgxHierarchicalGridComponent, IgxPreventDocumentScrollDirective, IgxPaginatorComponent, IgxPaginatorContentDirective, IgxPageSizeSelectorComponent, IgxPageNavigationComponent, IgxColumnComponent, IgxCellTemplateDirective, IgxRowIslandComponent, IgxPaginatorDirective, IgxSwitchComponent, FormsModule] }) export class HierarchicalGridPagerSampleComponent implements OnInit, AfterViewInit { @ViewChild('paginator', { read: IgxPaginatorComponent, static: false }) diff --git a/src/app/hierarchical-grid/hierarchical-grid-save-state/hGrid-state.component.html b/src/app/hierarchical-grid/hierarchical-grid-save-state/hGrid-state.component.html index f3db86e8a3..763d1fc28c 100644 --- a/src/app/hierarchical-grid/hierarchical-grid-save-state/hGrid-state.component.html +++ b/src/app/hierarchical-grid/hierarchical-grid-save-state/hGrid-state.component.html @@ -1,110 +1,112 @@
-
-
- - - - - -
+
+
+ + + + + +
-
-
    -
  • Clicking the SAVE button or leaving the page here will save grid state to localStorage.
    • -
  • Use the control buttons to SAVE / RESTORE / DELETE / grid state or LEAVE the page.
    • -
  • Select/Deselect checkboxes to control saving / restoring feature state.
    • -
-
+
+
    +
  • Clicking the SAVE button or leaving the page here will save grid state to localStorage.
    • +
  • Use the control buttons to SAVE / RESTORE / DELETE / grid state or LEAVE the page.
    • +
  • Select/Deselect checkboxes to control saving / restoring feature state.
    • +
+
-
-
- All -
-
- - {{ f.shortName }} - -
+
+
+ All +
+ @for (f of features; track f) { +
+ + {{ f.shortName }} +
+ }
+
+ + + + + + + + + - + + +
+ +
+ + + + + + + + + + + + - - - - - - - - - - - -
- -
- - - - - - - - - - - - - - - - - - + + + + + + - - - - - - - + + + + + + +
diff --git a/src/app/hierarchical-grid/hierarchical-grid-save-state/hGrid-state.component.ts b/src/app/hierarchical-grid/hierarchical-grid-save-state/hGrid-state.component.ts index dd6332ca12..9ad93bca6f 100644 --- a/src/app/hierarchical-grid/hierarchical-grid-save-state/hGrid-state.component.ts +++ b/src/app/hierarchical-grid/hierarchical-grid-save-state/hGrid-state.component.ts @@ -3,7 +3,7 @@ import { NavigationStart, Router, RouterLink } from '@angular/router'; import { GridFeatures, IGridState, IGridStateOptions, IgxGridStateDirective, IgxHierarchicalGridComponent, IgxNumberSummaryOperand, IgxSummaryResult, IgxCheckboxComponent, IgxButtonDirective, IgxIconComponent, IgxPaginatorComponent, IgxGridToolbarComponent, IgxGridToolbarActionsComponent, IgxGridToolbarHidingComponent, IgxGridToolbarPinningComponent, IgxColumnComponent, IgxCellTemplateDirective, IgxRowIslandComponent } from 'igniteui-angular'; import { take } from 'rxjs/operators'; import { SINGERS } from '../../data/singersData'; -import { NgFor } from '@angular/common'; + import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; class MySummary { @@ -24,7 +24,7 @@ class MySummary { selector: 'app-hgrid', styleUrls: ['./hGrid-state.component.scss'], templateUrl: './hGrid-state.component.html', - imports: [IgxButtonDirective, IgxIconComponent, RouterLink, IgxCheckboxComponent, NgFor, IgxHierarchicalGridComponent, IgxGridStateDirective, IgxPreventDocumentScrollDirective, IgxPaginatorComponent, IgxGridToolbarComponent, IgxGridToolbarActionsComponent, IgxGridToolbarHidingComponent, IgxGridToolbarPinningComponent, IgxColumnComponent, IgxCellTemplateDirective, IgxRowIslandComponent] + imports: [IgxButtonDirective, IgxIconComponent, RouterLink, IgxCheckboxComponent, IgxHierarchicalGridComponent, IgxGridStateDirective, IgxPreventDocumentScrollDirective, IgxPaginatorComponent, IgxGridToolbarComponent, IgxGridToolbarActionsComponent, IgxGridToolbarHidingComponent, IgxGridToolbarPinningComponent, IgxColumnComponent, IgxCellTemplateDirective, IgxRowIslandComponent] }) export class HGridSaveStateComponent implements OnInit, AfterViewInit { diff --git a/src/app/hierarchical-grid/hierarchical-grid-selection/hierarchical-grid-selection.component.html b/src/app/hierarchical-grid/hierarchical-grid-selection/hierarchical-grid-selection.component.html index 523c28ec94..2a01d52b53 100644 --- a/src/app/hierarchical-grid/hierarchical-grid-selection/hierarchical-grid-selection.component.html +++ b/src/app/hierarchical-grid/hierarchical-grid-selection/hierarchical-grid-selection.component.html @@ -1,90 +1,90 @@
-
- Hide Row Selectors - -
- + Hide Row Selectors + +
+ - - - -
- -
- - - - - + [allowFiltering]="true" (rowSelectionChanging)="handleRowSelection($event)" #hierarchicalGrid> + + + +
+ +
+ + + + + - - - - - - - - - - + + + + + + + + + + - - - - + + + + - +
-
- notification_important - -

Number of selected rows: {{selectedRowsCount}}

- - -

Currently selected row index: {{selectedRowIndex}}

- - -

There is no currently selected row.

- -
+
+ notification_important + @if (selectionMode === 'multiple') { +

Number of selected rows: {{selectedRowsCount}}

+ } + @if (selectionMode === 'single' && this.selectedRowIndex !== undefined) { +

Currently selected row index: {{selectedRowIndex}}

+ } + @if (selectionMode === 'single' && this.selectedRowIndex === undefined) { +

There is no currently selected row.

+ } +
-
- notification_important - -
    -
  • Now you can select multiple rows within a grid.
    • -
  • Click on row selector field or press SPACE key when some cell is active to toggle row - selection. -
    • -
  • On cell click the row get selected and previous selection state is cleared.
    • -
  • On cell click holding ctrl key, the row get selected and previous selection state is - preserved. -
    • -
  • Shift + click select a range of rows.
    • -
- - -
    -
  • Now you can select only one row within a grid.
    • -
  • Click on row selector field or press SPACE key when some cell is active to toggle row - selection. -
    • -
  • On cell click the row get selected and previous selection state is cleared.
    • -
- - -
    -
  • Now you are unable to select a row while interacting with grid UI.
    • -
  • If you need to select a row use grid API methods.
    • -
- -
+
+ notification_important + @if (selectionMode === 'multiple') { +
    +
  • Now you can select multiple rows within a grid.
    • +
  • Click on row selector field or press SPACE key when some cell is active to toggle row + selection. +
    • +
  • On cell click the row get selected and previous selection state is cleared.
    • +
  • On cell click holding ctrl key, the row get selected and previous selection state is + preserved. +
    • +
  • Shift + click select a range of rows.
    • +
+ } + @if (selectionMode === 'single') { +
    +
  • Now you can select only one row within a grid.
    • +
  • Click on row selector field or press SPACE key when some cell is active to toggle row + selection. +
    • +
  • On cell click the row get selected and previous selection state is cleared.
    • +
+ } + @if (selectionMode === 'none') { +
    +
  • Now you are unable to select a row while interacting with grid UI.
    • +
  • If you need to select a row use grid API methods.
    • +
+ } +
diff --git a/src/app/hierarchical-grid/hierarchical-grid-selection/hierarchical-grid-selection.component.ts b/src/app/hierarchical-grid/hierarchical-grid-selection/hierarchical-grid-selection.component.ts index 49011b6fb1..cebfe6c2a1 100644 --- a/src/app/hierarchical-grid/hierarchical-grid-selection/hierarchical-grid-selection.component.ts +++ b/src/app/hierarchical-grid/hierarchical-grid-selection/hierarchical-grid-selection.component.ts @@ -3,13 +3,13 @@ import { GridSelectionMode, IgxSnackbarComponent, IRowSelectionEventArgs, IgxSwi import { SINGERS } from '../../data/singersData'; import { FormsModule } from '@angular/forms'; import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; -import { NgIf } from '@angular/common'; + @Component({ selector: 'app-hierarchical-grid-selection', styleUrls: ['./hierarchical-grid-selection.component.scss'], templateUrl: 'hierarchical-grid-selection.component.html', - imports: [IgxSwitchComponent, FormsModule, IgxButtonGroupComponent, IgxHierarchicalGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxCellTemplateDirective, IgxRowIslandComponent, IgxSnackbarComponent, IgxIconComponent, NgIf] + imports: [IgxSwitchComponent, FormsModule, IgxButtonGroupComponent, IgxHierarchicalGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxCellTemplateDirective, IgxRowIslandComponent, IgxSnackbarComponent, IgxIconComponent] }) export class HGridSelectionSampleComponent implements OnInit, OnDestroy { diff --git a/src/app/hierarchical-grid/hierarchical-grid-sorting/hierarchical-grid-sorting.component.html b/src/app/hierarchical-grid/hierarchical-grid-sorting/hierarchical-grid-sorting.component.html index 15e98d9997..af3949ed36 100644 --- a/src/app/hierarchical-grid/hierarchical-grid-sorting/hierarchical-grid-sorting.component.html +++ b/src/app/hierarchical-grid/hierarchical-grid-sorting/hierarchical-grid-sorting.component.html @@ -1,40 +1,42 @@
- - - - -
- -
- - - - - + + + + +
+ +
+ + + + + - - - - - - - - - - - + + + + + + + + + + + - - - - + + + + - -
- + + @if (contextmenu) { +
+
+ }
diff --git a/src/app/hierarchical-grid/hierarchical-grid-sorting/hierarchical-grid-sorting.component.ts b/src/app/hierarchical-grid/hierarchical-grid-sorting/hierarchical-grid-sorting.component.ts index 5442df2b42..51586eaaec 100644 --- a/src/app/hierarchical-grid/hierarchical-grid-sorting/hierarchical-grid-sorting.component.ts +++ b/src/app/hierarchical-grid/hierarchical-grid-sorting/hierarchical-grid-sorting.component.ts @@ -2,14 +2,14 @@ import { AfterViewInit, Component, OnInit, ViewChild } from '@angular/core'; import { DefaultSortingStrategy, IgxHierarchicalGridComponent, IgxRowIslandComponent, SortingDirection, IgxColumnComponent, IgxCellTemplateDirective } from 'igniteui-angular'; import { SINGERS } from '../../data/singersData'; import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; -import { NgIf } from '@angular/common'; + import { HGridContextmenuComponent } from './hgrid-contextmenu/hgrid-contextmenu.component'; @Component({ selector: 'app-hierarchical-grid-sorting', styleUrls: ['./hierarchical-grid-sorting.component.scss'], templateUrl: 'hierarchical-grid-sorting.component.html', - imports: [IgxHierarchicalGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxCellTemplateDirective, IgxRowIslandComponent, NgIf, HGridContextmenuComponent] + imports: [IgxHierarchicalGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxCellTemplateDirective, IgxRowIslandComponent, HGridContextmenuComponent] }) export class HGridSortingSampleComponent implements OnInit, AfterViewInit { diff --git a/src/app/hierarchical-grid/hierarchical-grid-toolbar/hierarchical-grid-toolbar-options.component.html b/src/app/hierarchical-grid/hierarchical-grid-toolbar/hierarchical-grid-toolbar-options.component.html index f2a40e8487..ec5e1990d2 100644 --- a/src/app/hierarchical-grid/hierarchical-grid-toolbar/hierarchical-grid-toolbar-options.component.html +++ b/src/app/hierarchical-grid/hierarchical-grid-toolbar/hierarchical-grid-toolbar-options.component.html @@ -1,58 +1,66 @@
-
- - - - -
- Advanced Filtering - Column hiding - Column pinning - Exporting -
+
+ + + + +
+ Advanced Filtering + Column hiding + Column pinning + Exporting
- +
+ - {{ toolbarTitle }} - - - - - - + {{ toolbarTitle }} + + @if (enableFiltering) { + + } + @if (enableHiding) { + + } + @if (enablePinning) { + + } + @if (enableExport) { + + } + - - - -
- -
- - - - - + + + +
+ +
+ + + + + - - - - - - - - - - - + + + + + + + + + + + - - - - + + + + - +
diff --git a/src/app/hierarchical-grid/hierarchical-grid-toolbar/hierarchical-grid-toolbar-options.component.ts b/src/app/hierarchical-grid/hierarchical-grid-toolbar/hierarchical-grid-toolbar-options.component.ts index 5297cd272e..ce48b104dd 100644 --- a/src/app/hierarchical-grid/hierarchical-grid-toolbar/hierarchical-grid-toolbar-options.component.ts +++ b/src/app/hierarchical-grid/hierarchical-grid-toolbar/hierarchical-grid-toolbar-options.component.ts @@ -3,13 +3,13 @@ import { SINGERS } from '../../data/singersData'; import { IgxInputGroupComponent, IgxLabelDirective, IgxInputDirective, IgxSwitchComponent, IgxHierarchicalGridComponent, IgxGridToolbarComponent, IgxGridToolbarTitleComponent, IgxGridToolbarActionsComponent, IgxGridToolbarAdvancedFilteringComponent, IgxGridToolbarHidingComponent, IgxGridToolbarPinningComponent, IgxGridToolbarExporterComponent, IgxColumnComponent, IgxCellTemplateDirective, IgxRowIslandComponent } from 'igniteui-angular'; import { FormsModule } from '@angular/forms'; import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; -import { NgIf } from '@angular/common'; + @Component({ selector: 'app-hierarchical-grid-toolbar-options', styleUrls: ['./hierarchical-grid-toolbar-options.component.scss'], templateUrl: 'hierarchical-grid-toolbar-options.component.html', - imports: [IgxInputGroupComponent, IgxLabelDirective, FormsModule, IgxInputDirective, IgxSwitchComponent, IgxHierarchicalGridComponent, IgxPreventDocumentScrollDirective, IgxGridToolbarComponent, IgxGridToolbarTitleComponent, IgxGridToolbarActionsComponent, NgIf, IgxGridToolbarAdvancedFilteringComponent, IgxGridToolbarHidingComponent, IgxGridToolbarPinningComponent, IgxGridToolbarExporterComponent, IgxColumnComponent, IgxCellTemplateDirective, IgxRowIslandComponent] + imports: [IgxInputGroupComponent, IgxLabelDirective, FormsModule, IgxInputDirective, IgxSwitchComponent, IgxHierarchicalGridComponent, IgxPreventDocumentScrollDirective, IgxGridToolbarComponent, IgxGridToolbarTitleComponent, IgxGridToolbarActionsComponent, IgxGridToolbarAdvancedFilteringComponent, IgxGridToolbarHidingComponent, IgxGridToolbarPinningComponent, IgxGridToolbarExporterComponent, IgxColumnComponent, IgxCellTemplateDirective, IgxRowIslandComponent] }) export class HGridToolbarOptionsSampleComponent { diff --git a/src/app/hierarchical-grid/hierarchical-grid-validator-service-extended/hierarchical-grid-validator-service-extended.component.html b/src/app/hierarchical-grid/hierarchical-grid-validator-service-extended/hierarchical-grid-validator-service-extended.component.html index 7aea50a55e..78e7f20478 100644 --- a/src/app/hierarchical-grid/hierarchical-grid-validator-service-extended/hierarchical-grid-validator-service-extended.component.html +++ b/src/app/hierarchical-grid/hierarchical-grid-validator-service-extended/hierarchical-grid-validator-service-extended.component.html @@ -1,71 +1,83 @@
- - - - - - - - - -
- Please enter correct phone format -
- - - + + + + + + + + + + @if (cell.validation.errors?.['phoneFormat']) { +
+ Please enter correct phone format +
+ } + + + - - - - - - - - - - - -
- The date cannot be in the future. -
- - - - - - -
- The date cannot be in the future. -
-
- The date cannot be before the 5th of November 2010 -
- - - - - - -
- The date cannot be in the future. -
-
- The date cannot be before the 5th of November 2010 -
- - - - - - + + + + + + + + + + + + @if (cell.validation.errors?.['futureDate']) { +
+ The date cannot be in the future. +
+ } + + + + + + + @if (cell.validation.errors?.['futureDate']) { +
+ The date cannot be in the future. +
+ } + @if (cell.validation.errors?.['pastDate']) { +
+ The date cannot be before the 5th of November 2010 +
+ } + + + + + + + @if (cell.validation.errors?.['futureDate']) { +
+ The date cannot be in the future. +
+ } + @if (cell.validation.errors?.['pastDate']) { +
+ The date cannot be before the 5th of November 2010 +
+ } + + + + + + -
- - - -
+
+ + + +
diff --git a/src/app/hierarchical-grid/hierarchical-grid-validator-service-extended/hierarchical-grid-validator-service-extended.component.ts b/src/app/hierarchical-grid/hierarchical-grid-validator-service-extended/hierarchical-grid-validator-service-extended.component.ts index 2f1eef1320..30b6cf43f4 100644 --- a/src/app/hierarchical-grid/hierarchical-grid-validator-service-extended/hierarchical-grid-validator-service-extended.component.ts +++ b/src/app/hierarchical-grid/hierarchical-grid-validator-service-extended/hierarchical-grid-validator-service-extended.component.ts @@ -3,7 +3,7 @@ import { AbstractControl, NG_VALIDATORS, ValidationErrors, ValidatorFn, Validato import { IgxHierarchicalGridComponent, IgxRowIslandComponent, IgxColumnComponent, IgxColumnRequiredValidatorDirective, IgxCellValidationErrorDirective, IgxGridToolbarDirective, IgxGridToolbarComponent, IgxButtonDirective } from 'igniteui-angular'; import { IGridFormGroupCreatedEventArgs } from 'igniteui-angular/lib/grids/common/grid.interface'; import { CUSTOMERS } from '../../data/hierarchical-data'; -import { NgTemplateOutlet, NgIf } from '@angular/common'; +import { NgTemplateOutlet } from '@angular/common'; export function phoneFormatValidator(phoneReg: RegExp): ValidatorFn { return (control: AbstractControl): ValidationErrors | null => { @@ -34,7 +34,7 @@ export function unique(value, index, self) { selector: 'app-hierarchical-grid-validator-service-extended', styleUrls: ['./hierarchical-grid-validator-service-extended.component.scss'], templateUrl: './hierarchical-grid-validator-service-extended.component.html', - imports: [IgxHierarchicalGridComponent, IgxColumnComponent, IgxColumnRequiredValidatorDirective, HGridPhoneFormatDirective, IgxCellValidationErrorDirective, NgTemplateOutlet, NgIf, IgxRowIslandComponent, IgxGridToolbarDirective, IgxGridToolbarComponent, IgxButtonDirective] + imports: [IgxHierarchicalGridComponent, IgxColumnComponent, IgxColumnRequiredValidatorDirective, HGridPhoneFormatDirective, IgxCellValidationErrorDirective, NgTemplateOutlet, IgxRowIslandComponent, IgxGridToolbarDirective, IgxGridToolbarComponent, IgxButtonDirective] }) export class HierarchicalGridValidatorServiceExtendedComponent { diff --git a/src/app/how-to/reactive-forms/reactive-forms.component.html b/src/app/how-to/reactive-forms/reactive-forms.component.html index 3938f3c013..bb68e91874 100644 --- a/src/app/how-to/reactive-forms/reactive-forms.component.html +++ b/src/app/how-to/reactive-forms/reactive-forms.component.html @@ -1,91 +1,105 @@
-
-
-

Book your movie ticket

-
- - - - {{ movie }} - - - - - local_movies - - - - - - - person - - Fullname is required - Please enter a valid name. - - - +359 - - - - phone - - Ex.: +359 888 123 456 - Phone number is required - - - - - - email - - Email is required - Please enter a valid email - - - - - - today - - - - - access_time - - - - - - - Agree to the terms of use. - - - - 2D Movie - - - 3D Movie - - - - Subtitles for the Deaf or Hard-of-Hearing (SDH) - - - - - - -
- -
- - - - -
-
-
+
+
+

Book your movie ticket

+
+ + @for (genre of genres; track genre) { + + @for (movie of genre.movies; track movie) { + + {{ movie }} + + } + + } + + + local_movies + + + + + + + person + + @if (fullName.touched && fullName.errors?.required) { + Fullname is required + } + @if (fullName.touched && fullName.errors?.pattern) { + Please enter a valid name. + } + + + +359 + + + + phone + + Ex.: +359 888 123 456 + @if (phone.touched && phone.invalid) { + Phone number is required + } + + + + + + email + + @if (email.touched && email.invalid) { + Email is required + } + @if (email.errors?.email) { + Please enter a valid email + } + + + + + + today + + + + + access_time + + + + + + + Agree to the terms of use. + + + + 2D Movie + + + 3D Movie + + + + Subtitles for the Deaf or Hard-of-Hearing (SDH) + + + + + + +
+ +
+ + + + +
+
+
diff --git a/src/app/how-to/reactive-forms/reactive-forms.component.ts b/src/app/how-to/reactive-forms/reactive-forms.component.ts index ee8b668b29..9fe2a8dd02 100644 --- a/src/app/how-to/reactive-forms/reactive-forms.component.ts +++ b/src/app/how-to/reactive-forms/reactive-forms.component.ts @@ -1,7 +1,7 @@ import { Component } from '@angular/core'; import { FormArray, FormBuilder, FormControl, FormGroup, Validators, FormsModule, ReactiveFormsModule } from '@angular/forms'; import { DateRange, IRangeSliderValue, IgxSelectComponent, IgxSelectGroupComponent, IgxSelectItemComponent, IgxLabelDirective, IgxSelectToggleIconDirective, IgxIconComponent, IgxInputGroupComponent, IgxInputDirective, IgxSuffixDirective, IgxHintDirective, IgxPrefixDirective, IgxComboComponent, IgxDatePickerComponent, IgxPickerToggleComponent, IgxTimePickerComponent, IgcFormControlDirective, IgxCheckboxComponent, IgxRadioGroupDirective, IgxRadioComponent, IgxSwitchComponent, IgxDateRangePickerComponent, IgxSliderComponent, IgxCalendarComponent, IgxCardComponent, IgxMonthPickerComponent, IgxButtonDirective, IgxRippleDirective } from 'igniteui-angular'; -import { NgFor, NgIf } from '@angular/common'; + export interface User{ @@ -25,7 +25,7 @@ export interface User{ selector: 'app-reactive-form', styleUrls: ['./reactive-forms.component.scss'], templateUrl: './reactive-forms.component.html', - imports: [FormsModule, ReactiveFormsModule, IgxSelectComponent, NgFor, IgxSelectGroupComponent, IgxSelectItemComponent, IgxLabelDirective, IgxSelectToggleIconDirective, IgxIconComponent, IgxInputGroupComponent, IgxInputDirective, IgxSuffixDirective, NgIf, IgxHintDirective, IgxPrefixDirective, IgxComboComponent, IgxDatePickerComponent, IgxPickerToggleComponent, IgxTimePickerComponent, IgcFormControlDirective, IgxCheckboxComponent, IgxRadioGroupDirective, IgxRadioComponent, IgxSwitchComponent, IgxDateRangePickerComponent, IgxSliderComponent, IgxCalendarComponent, IgxCardComponent, IgxMonthPickerComponent, IgxButtonDirective, IgxRippleDirective] + imports: [FormsModule, ReactiveFormsModule, IgxSelectComponent, IgxSelectGroupComponent, IgxSelectItemComponent, IgxLabelDirective, IgxSelectToggleIconDirective, IgxIconComponent, IgxInputGroupComponent, IgxInputDirective, IgxSuffixDirective, IgxHintDirective, IgxPrefixDirective, IgxComboComponent, IgxDatePickerComponent, IgxPickerToggleComponent, IgxTimePickerComponent, IgcFormControlDirective, IgxCheckboxComponent, IgxRadioGroupDirective, IgxRadioComponent, IgxSwitchComponent, IgxDateRangePickerComponent, IgxSliderComponent, IgxCalendarComponent, IgxCardComponent, IgxMonthPickerComponent, IgxButtonDirective, IgxRippleDirective] }) export class ReactiveFormsSampleComponent { public genres = []; diff --git a/src/app/index/index.component.html b/src/app/index/index.component.html index 5f29cbdc4f..30323fbef8 100644 --- a/src/app/index/index.component.html +++ b/src/app/index/index.component.html @@ -1,60 +1,66 @@
- - - + + -
- -
- -
-
+
+ +
+ +
+
diff --git a/src/app/index/index.component.ts b/src/app/index/index.component.ts index ee77bc98f6..ec6747a6e0 100644 --- a/src/app/index/index.component.ts +++ b/src/app/index/index.component.ts @@ -19,13 +19,13 @@ import { servicesRoutesData } from '../services/services-routes-data'; import { themingRoutesData } from '../theming/theming-routes-data'; import { treeGridRoutesData } from '../tree-grid/tree-grid-routes-data'; import { FormsModule } from '@angular/forms'; -import { NgIf, NgFor } from '@angular/common'; + @Component({ selector: 'app-index', styleUrls: ['./index.component.scss'], templateUrl: './index.component.html', - imports: [IgxLayoutDirective, IgxNavigationDrawerComponent, IgxNavDrawerTemplateDirective, IgxNavDrawerItemDirective, IgxRippleDirective, RouterLinkActive, RouterLink, IgxIconComponent, IgxInputGroupComponent, IgxPrefixDirective, FormsModule, IgxInputDirective, NgIf, IgxSuffixDirective, IgxTreeComponent, NgFor, IgxTreeNodeComponent, IgxTreeNodeLinkDirective, IgxFlexDirective, IgxNavbarComponent, RouterOutlet] + imports: [IgxLayoutDirective, IgxNavigationDrawerComponent, IgxNavDrawerTemplateDirective, IgxNavDrawerItemDirective, IgxRippleDirective, RouterLinkActive, RouterLink, IgxIconComponent, IgxInputGroupComponent, IgxPrefixDirective, FormsModule, IgxInputDirective, IgxSuffixDirective, IgxTreeComponent, IgxTreeNodeComponent, IgxTreeNodeLinkDirective, IgxFlexDirective, IgxNavbarComponent, RouterOutlet] }) export class IndexComponent implements OnInit, AfterViewInit { diff --git a/src/app/interactions/drag-drop/email-sample/email-sample.component.html b/src/app/interactions/drag-drop/email-sample/email-sample.component.html index 2da7239975..306b2f0a3d 100644 --- a/src/app/interactions/drag-drop/email-sample/email-sample.component.html +++ b/src/app/interactions/drag-drop/email-sample/email-sample.component.html @@ -1,44 +1,46 @@ -
- email - Move {{ draggedElements }} item{{ (draggedElements > 1 ? 's' : '')}} -
+
+ email + Move {{ draggedElements }} item{{ (draggedElements > 1 ? 's' : '')}} +
- - {{folder.icon}} -

{{ folder.text }}

+ @for (folder of folders; track folder) { + + {{folder.icon}} +

{{ folder.text }}

 + } - Today - - diff --git a/src/app/interactions/drag-drop/email-sample/email-sample.component.ts b/src/app/interactions/drag-drop/email-sample/email-sample.component.ts index 8e8625776e..549653bb7e 100644 --- a/src/app/interactions/drag-drop/email-sample/email-sample.component.ts +++ b/src/app/interactions/drag-drop/email-sample/email-sample.component.ts @@ -1,13 +1,13 @@ import { ChangeDetectorRef, Component, Input, Renderer2 } from '@angular/core'; import { IgxIconComponent, IgxListComponent, IgxListItemComponent, IgxDropDirective, IgxListThumbnailDirective, IgxListLineTitleDirective, IgxDragDirective, IgxListLineSubTitleDirective, IgxCheckboxComponent } from 'igniteui-angular'; -import { NgFor } from '@angular/common'; + import { FormsModule } from '@angular/forms'; @Component({ selector: 'app-email-sample', templateUrl: './email-sample.component.html', styleUrls: ['./email-sample.component.scss'], - imports: [IgxIconComponent, IgxListComponent, NgFor, IgxListItemComponent, IgxDropDirective, IgxListThumbnailDirective, IgxListLineTitleDirective, IgxDragDirective, IgxListLineSubTitleDirective, IgxCheckboxComponent, FormsModule] + imports: [IgxIconComponent, IgxListComponent, IgxListItemComponent, IgxDropDirective, IgxListThumbnailDirective, IgxListLineTitleDirective, IgxDragDirective, IgxListLineSubTitleDirective, IgxCheckboxComponent, FormsModule] }) export class EmailSampleComponent { diff --git a/src/app/interactions/drag-drop/icons-sample/icons-sample.component.html b/src/app/interactions/drag-drop/icons-sample/icons-sample.component.html index 7907906d0f..5515a0e198 100644 --- a/src/app/interactions/drag-drop/icons-sample/icons-sample.component.html +++ b/src/app/interactions/drag-drop/icons-sample/icons-sample.component.html @@ -1,19 +1,19 @@
- -
- - - -
- + @for (icon of icons; track icon) { +
+ + + +
+ }
\ No newline at end of file diff --git a/src/app/interactions/drag-drop/icons-sample/icons-sample.component.ts b/src/app/interactions/drag-drop/icons-sample/icons-sample.component.ts index 28f6730ea3..e65febe253 100644 --- a/src/app/interactions/drag-drop/icons-sample/icons-sample.component.ts +++ b/src/app/interactions/drag-drop/icons-sample/icons-sample.component.ts @@ -1,12 +1,12 @@ import { Component } from '@angular/core'; -import { NgFor } from '@angular/common'; + import { IgxDragDirective, IgxDropDirective } from 'igniteui-angular'; @Component({ selector: 'app-icons-sample', styleUrls: ['./icons-sample.component.scss'], templateUrl: './icons-sample.component.html', - imports: [NgFor, IgxDragDirective, IgxDropDirective] + imports: [IgxDragDirective, IgxDropDirective] }) export class IconsSampleComponent { diff --git a/src/app/interactions/drag-drop/kanban-sample/kanban-sample.component.html b/src/app/interactions/drag-drop/kanban-sample/kanban-sample.component.html index 55dbe0e318..c6849beafd 100644 --- a/src/app/interactions/drag-drop/kanban-sample/kanban-sample.component.html +++ b/src/app/interactions/drag-drop/kanban-sample/kanban-sample.component.html @@ -1,129 +1,135 @@
+ #toDo + igxDrop + id="toDoList" + [attr.data-state]="'ToDo'" + (enter)="onStateContainerEnter($event)" + (leave)="onStateContainerLeave($event)" + (dropped)="onItemDropped($event)"> -
-

To Do

- - - {{toDoList.length}} - - -
+
+

To Do

+ + + {{toDoList.length}} + + +
-
- - -

{{ item.text }}

- - -

{{ item.id }}

- - -
+
+ @for (item of toDoList; track item) { + + +

{{ item.text }}

+ + +

{{ item.id }}

+ + + } +
+ #inProgress + igxDrop + id="inProgressList" + [attr.data-state]="'InProgress'" + (enter)="onStateContainerEnter($event)" + (leave)="onStateContainerLeave($event)" + (dropped)="onItemDropped($event)"> -
-

In Progress

- - - {{inProgressList.length}} - - -
+
+

In Progress

+ + + {{inProgressList.length}} + + +
-
- - -

{{ item.text }}

- - -

{{ item.id }}

- - -
+
+ @for (item of inProgressList; track item) { + + +

{{ item.text }}

+ + +

{{ item.id }}

+ + + } +
+ #done + igxDrop + id="doneList" + [attr.data-state]="'Done'" + (enter)="onStateContainerEnter($event)" + (leave)="onStateContainerLeave($event)" + (dropped)="onItemDropped($event)"> -
-

Done

- - - {{doneList.length}} - - -
+
+

Done

+ + + {{doneList.length}} + + +
-
- - -

{{ item.text }}

- - -

{{ item.id }}

- - -
+
+ @for (item of doneList; track item) { + + +

{{ item.text }}

+ + +

{{ item.id }}

+ + + } +
diff --git a/src/app/interactions/drag-drop/kanban-sample/kanban-sample.component.ts b/src/app/interactions/drag-drop/kanban-sample/kanban-sample.component.ts index 7c0c199adc..d24839430b 100644 --- a/src/app/interactions/drag-drop/kanban-sample/kanban-sample.component.ts +++ b/src/app/interactions/drag-drop/kanban-sample/kanban-sample.component.ts @@ -2,7 +2,7 @@ /* eslint-disable @typescript-eslint/naming-convention */ import { ChangeDetectorRef, Component, ElementRef, OnInit, Renderer2, ViewChild } from '@angular/core'; import { IDropBaseEventArgs, IDropDroppedEventArgs, IgxDropDirective, IgxChipComponent, IgxCardComponent, IgxDragDirective, IgxCardHeaderComponent, IgxCardHeaderTitleDirective, IgxCardContentDirective } from 'igniteui-angular'; -import { NgFor } from '@angular/common'; + enum state { toDo = 'toDo', @@ -19,7 +19,7 @@ interface IListItem { selector: 'app-kanban-sample', templateUrl: './kanban-sample.component.html', styleUrls: ['./kanban-sample.component.scss'], - imports: [IgxDropDirective, IgxChipComponent, NgFor, IgxCardComponent, IgxDragDirective, IgxCardHeaderComponent, IgxCardHeaderTitleDirective, IgxCardContentDirective] + imports: [IgxDropDirective, IgxChipComponent, IgxCardComponent, IgxDragDirective, IgxCardHeaderComponent, IgxCardHeaderTitleDirective, IgxCardContentDirective] }) export class KanbanSampleComponent implements OnInit { @ViewChild('toDo', { read: ElementRef }) public toDo: ElementRef; diff --git a/src/app/interactions/drag-drop/list-reorder-sample/list-reorder-sample.component.html b/src/app/interactions/drag-drop/list-reorder-sample/list-reorder-sample.component.html index b89cfc4537..0745fe081c 100644 --- a/src/app/interactions/drag-drop/list-reorder-sample/list-reorder-sample.component.html +++ b/src/app/interactions/drag-drop/list-reorder-sample/list-reorder-sample.component.html @@ -1,16 +1,18 @@ - -

{{employee.name}}

-
{{employee.title}}
- drag_indicator + @for (employee of employees; track employee; let targetIndex = $index) { + +

{{employee.name}}

+
{{employee.title}}
+ drag_indicator + } diff --git a/src/app/interactions/drag-drop/list-reorder-sample/list-reorder-sample.component.ts b/src/app/interactions/drag-drop/list-reorder-sample/list-reorder-sample.component.ts index 493acc2bac..93c708cbad 100644 --- a/src/app/interactions/drag-drop/list-reorder-sample/list-reorder-sample.component.ts +++ b/src/app/interactions/drag-drop/list-reorder-sample/list-reorder-sample.component.ts @@ -6,13 +6,13 @@ import { ViewChildren } from '@angular/core'; import { IDragBaseEventArgs, IDragMoveEventArgs, IgxDragDirective, IgxDragLocation, IgxListComponent, IgxListItemComponent, IgxDropDirective, IgxListLineTitleDirective, IgxListLineSubTitleDirective, IgxIconComponent, IgxDragHandleDirective, IgxListActionDirective } from 'igniteui-angular'; -import { NgFor } from '@angular/common'; + @Component({ selector: 'app-list-reorder-sample', templateUrl: './list-reorder-sample.component.html', styleUrls: ['./list-reorder-sample.component.scss'], - imports: [IgxListComponent, NgFor, IgxListItemComponent, IgxDropDirective, IgxDragDirective, IgxListLineTitleDirective, IgxListLineSubTitleDirective, IgxIconComponent, IgxDragHandleDirective, IgxListActionDirective] + imports: [IgxListComponent, IgxListItemComponent, IgxDropDirective, IgxDragDirective, IgxListLineTitleDirective, IgxListLineSubTitleDirective, IgxIconComponent, IgxDragHandleDirective, IgxListActionDirective] }) export class ListReorderSampleComponent { @ViewChildren('dragDirRef', { read: IgxDragDirective }) diff --git a/src/app/interactions/interactions-routes-data.ts b/src/app/interactions/interactions-routes-data.ts index 4dfccd8360..99535f672e 100644 --- a/src/app/interactions/interactions-routes-data.ts +++ b/src/app/interactions/interactions-routes-data.ts @@ -49,5 +49,6 @@ export const interactionsRoutesData = { 'drag-dialog-sample': { displayName: 'Drag Dialog Sample', parentName: 'Drag and Drop'}, 'icons-sample': { displayName: 'Icons sample', parentName: 'Drag and Drop' }, 'query-builder-sample-1': { displayName: 'Query Builder Sample 1', parentName: 'Query Builder' }, - 'query-builder-style': { displayName: 'Query Builder Style Sample', parentName: 'Query Builder' } + 'query-builder-style': { displayName: 'Query Builder Style Sample', parentName: 'Query Builder' }, + 'query-builder-template-sample': { displayName: 'Query Builder Template Sample', parentName: 'Query Builder' } }; diff --git a/src/app/interactions/interactions.routes.ts b/src/app/interactions/interactions.routes.ts index 9bd2ced2ff..331b92e785 100644 --- a/src/app/interactions/interactions.routes.ts +++ b/src/app/interactions/interactions.routes.ts @@ -22,6 +22,7 @@ import { OverlayScrollSample2Component } from './overlay/overlay-scroll-2/overla import { OverlayStylingComponent } from './overlay/overlay-styling/overlay-styling.component'; import { QueryBuilderSample1Component } from './query-builder/query-builder-sample-1/query-builder-sample-1.component'; import { QueryBuilderStyleComponent } from './query-builder/query-builder-style/query-builder-style.component'; +import { QueryBuilderTemplateSampleComponent } from './query-builder/query-builder-template-sample/query-builder-template-sample.component'; import { RippleSample2Component } from './ripple/ripple-sample-2/ripple-sample-2.component'; import { RippleSample3Component } from './ripple/ripple-sample-3/ripple-sample-3.component'; import { RippleSample4Component } from './ripple/ripple-sample-4/ripple-sample-4.component'; @@ -298,5 +299,10 @@ export const InteractionsRoutes: Routes = [ component: QueryBuilderStyleComponent, data: interactionsRoutesData['query-builder-style'], path: 'query-builder-style' + }, + { + component: QueryBuilderTemplateSampleComponent, + data: interactionsRoutesData['query-builder-template-sample'], + path: 'query-builder-template-sample' } ]; diff --git a/src/app/interactions/overlay/overlay-preset-settings/overlay-preset-settings-sample.component.html b/src/app/interactions/overlay/overlay-preset-settings/overlay-preset-settings-sample.component.html index 4393dd5310..73c829afbd 100644 --- a/src/app/interactions/overlay/overlay-preset-settings/overlay-preset-settings-sample.component.html +++ b/src/app/interactions/overlay/overlay-preset-settings/overlay-preset-settings-sample.component.html @@ -1,116 +1,125 @@ -
-

{{ title }}

-
+
+

{{ title }}

+
-
+
- anchor -
+ anchor +
-
-

- Outlet Container -

-

- The card will be positioned relative to the container or the anchor - based on the selected type and strategy. -

-
+
+

+ Outlet Container +

+

+ The card will be positioned relative to the container or the anchor + based on the selected type and strategy. +

+
- + - - - + {{ item }} + + } +
-
+@if (positionStrategy === 'absolute') { +
- + @for (item of absPositions; track item; let i = $index) { + } -
+
+} -
+@if (positionStrategy === 'absolute') { +
- + @for (item of absStrategies; track item; let i = $index) { + } -
+
+} -
+@if (positionStrategy === 'relative') { +
- + @for (item of relPositions; track item; let i = $index) { + } -
+
+} -
+@if (positionStrategy === 'relative') { +
- + @for (item of relStrategies; track item; let i = $index) { + } -
+
+} diff --git a/src/app/interactions/overlay/overlay-preset-settings/overlay-preset-settings-sample.component.ts b/src/app/interactions/overlay/overlay-preset-settings/overlay-preset-settings-sample.component.ts index 53d66e1dfe..ad11654c10 100644 --- a/src/app/interactions/overlay/overlay-preset-settings/overlay-preset-settings-sample.component.ts +++ b/src/app/interactions/overlay/overlay-preset-settings/overlay-preset-settings-sample.component.ts @@ -9,7 +9,7 @@ import { } from '@angular/core'; import { AbsolutePosition, IgxOverlayService, OverlaySettings, RelativePosition, RelativePositionStrategy, IButtonGroupEventArgs, IgxIconComponent, IgxButtonGroupComponent, IgxButtonDirective } from 'igniteui-angular'; import { MyDynamicCardComponent } from '../overlay-dynamic-card/overlay-dynamic-card.component'; -import { NgTemplateOutlet, NgFor, NgIf } from '@angular/common'; +import { NgTemplateOutlet } from '@angular/common'; // tslint:disable:object-literal-sort-keys @Component({ @@ -17,7 +17,7 @@ import { NgTemplateOutlet, NgFor, NgIf } from '@angular/common'; styleUrls: ['./overlay-preset-settings-sample.component.scss'], templateUrl: './overlay-preset-settings-sample.component.html', providers: [IgxOverlayService], - imports: [IgxIconComponent, NgTemplateOutlet, IgxButtonGroupComponent, NgFor, IgxButtonDirective, NgIf] + imports: [IgxIconComponent, NgTemplateOutlet, IgxButtonGroupComponent, IgxButtonDirective] }) export class OverlayPresetSettingsSampleComponent implements OnInit, OnDestroy { @ViewChild('anchor', { static: true }) diff --git a/src/app/interactions/query-builder/query-builder-sample-1/query-builder-sample-1.component.html b/src/app/interactions/query-builder/query-builder-sample-1/query-builder-sample-1.component.html index 273aa278a7..9e35ae114d 100644 --- a/src/app/interactions/query-builder/query-builder-sample-1/query-builder-sample-1.component.html +++ b/src/app/interactions/query-builder/query-builder-sample-1/query-builder-sample-1.component.html @@ -1,11 +1,10 @@
- - + 
{{ printExpressionTree(queryBuilder.expressionTree) }}
-
+
\ No newline at end of file diff --git a/src/app/interactions/query-builder/query-builder-sample-1/query-builder-sample-1.component.scss b/src/app/interactions/query-builder/query-builder-sample-1/query-builder-sample-1.component.scss index 13abda223d..8c7b87e635 100644 --- a/src/app/interactions/query-builder/query-builder-sample-1/query-builder-sample-1.component.scss +++ b/src/app/interactions/query-builder/query-builder-sample-1/query-builder-sample-1.component.scss @@ -1,12 +1,11 @@ .wrapper{ margin: 10px; + height: 100%; + overflow-y: auto; } .output-area{ - overflow-y: auto; - height: 200px; - box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 2px 1px -1px rgba(0, 0, 0, 0.12); - margin-top: 15px; + box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.75); border-radius: 4px; - padding-left: 16px; + margin: 0 20px 20px 20px; } \ No newline at end of file diff --git a/src/app/interactions/query-builder/query-builder-sample-1/query-builder-sample-1.component.ts b/src/app/interactions/query-builder/query-builder-sample-1/query-builder-sample-1.component.ts index e2aec36c1a..ed1ab3182e 100644 --- a/src/app/interactions/query-builder/query-builder-sample-1/query-builder-sample-1.component.ts +++ b/src/app/interactions/query-builder/query-builder-sample-1/query-builder-sample-1.component.ts @@ -1,59 +1,107 @@ import { Component, OnInit } from '@angular/core'; -import { FilteringExpressionsTree, FilteringLogic, IExpressionTree, IgxQueryBuilderComponent, IgxStringFilteringOperand, IgxQueryBuilderHeaderComponent } from 'igniteui-angular'; +import { FilteringExpressionsTree, FilteringLogic, IExpressionTree, IgxBooleanFilteringOperand, IgxDateFilteringOperand, IgxNumberFilteringOperand, IgxQueryBuilderComponent, IgxStringFilteringOperand } from 'igniteui-angular'; @Component({ selector: 'app-query-builder-sample-1', styleUrls: ['./query-builder-sample-1.component.scss'], templateUrl: 'query-builder-sample-1.component.html', - imports: [IgxQueryBuilderComponent, IgxQueryBuilderHeaderComponent] + imports: [IgxQueryBuilderComponent] }) export class QueryBuilderSample1Component implements OnInit { + public entities: any[]; + public companiesFields: any[]; + public ordersFields: any[]; public expressionTree: IExpressionTree; - - public fields: any[] = [ - { field: 'ID', dataType: 'string' }, - { field: 'CompanyName', dataType: 'string' }, - { field: 'ContactName', dataType: 'string' }, - { field: 'Employees', dataType: 'number' }, - { field: 'ContactTitle', dataType: 'string' }, - { field: 'DateCreated', dataType: 'date' }, - { field: 'TimeCreated', dataType: 'time' }, - { field: 'Address', dataType: 'string' }, - { field: 'City', dataType: 'string' }, - { field: 'Region', dataType: 'string' }, - { field: 'PostalCode', dataType: 'string' }, - { field: 'Phone', dataType: 'string' }, - { field: 'Fax', dataType: 'string' }, - { field: 'Contract', dataType: 'boolean' } - ]; public ngOnInit(): void { - const tree = new FilteringExpressionsTree(FilteringLogic.And); - tree.filteringOperands.push({ - fieldName: 'ID', - condition: IgxStringFilteringOperand.instance().condition('contains'), - searchVal: 'a', - ignoreCase: true + this.companiesFields = [ + { field: "ID", dataType: "string" }, + { field: "CompanyName", dataType: "string" }, + { field: "ContactName", dataType: "string" }, + { field: "Employees", dataType: "number" }, + { field: "ContactTitle", dataType: "string" }, + { field: "DateCreated", dataType: "date" }, + { field: "TimeCreated", dataType: "time" }, + { field: "Address", dataType: "string" }, + { field: "City", dataType: "string" }, + { field: "Region", dataType: "string" }, + { field: "PostalCode", dataType: "string" }, + { field: "Phone", dataType: "string" }, + { field: "Fax", dataType: "string" }, + { field: "Contract", dataType: "boolean" } + ]; + + this.ordersFields = [ + { field: "CompanyID", dataType: "string" }, + { field: "OrderID", dataType: "number" }, + { field: "EmployeeId", dataType: "number" }, + { field: "OrderDate", dataType: "date" }, + { field: "RequiredDate", dataType: "date" }, + { field: "ShippedDate", dataType: "date" }, + { field: "ShipVia", dataType: "number" }, + { field: "Freight", dataType: "number" }, + { field: "ShipName", dataType: "string" }, + { field: "ShipCity", dataType: "string" }, + { field: "ShipPostalCode", dataType: "string" }, + { field: "ShipCountry", dataType: "string" }, + { field: "Region", dataType: "string" } + ]; + + this.entities = [ + { + name: "Companies", + fields: this.companiesFields + }, + { + name: "Orders", + fields: this.ordersFields + } + ]; + + const innerTree = new FilteringExpressionsTree(FilteringLogic.And, undefined, 'Companies', ['ID']); + innerTree.filteringOperands.push({ + fieldName: 'Employees', + condition: IgxNumberFilteringOperand.instance().condition('greaterThan'), + conditionName: 'greaterThan', + searchVal: 100 + }); + innerTree.filteringOperands.push({ + fieldName: 'Contract', + condition: IgxBooleanFilteringOperand.instance().condition('true'), + conditionName: 'true' }); - const orTree = new FilteringExpressionsTree(FilteringLogic.Or); - orTree.filteringOperands.push({ - fieldName: 'ID', - condition: IgxStringFilteringOperand.instance().condition('contains'), - searchVal: 'b', - ignoreCase: true + + const subGroup = new FilteringExpressionsTree(FilteringLogic.Or, undefined, 'Orders', ['*']); + subGroup.filteringOperands.push({ + fieldName: 'ShipCity', + condition: IgxStringFilteringOperand.instance().condition('endsWith'), + conditionName: IgxStringFilteringOperand.instance().condition('endsWith').name, + searchVal: 'bar' + }); + subGroup.filteringOperands.push({ + fieldName: 'OrderDate', + condition: IgxDateFilteringOperand.instance().condition('today'), + conditionName: IgxDateFilteringOperand.instance().condition('today').name }); - orTree.filteringOperands.push({ - fieldName: 'CompanyName', - condition: IgxStringFilteringOperand.instance().condition('contains'), - searchVal: 'c', - ignoreCase: true + + const tree = new FilteringExpressionsTree(FilteringLogic.And, undefined, 'Orders', ['*']); + tree.filteringOperands.push({ + fieldName: 'CompanyID', + condition: IgxStringFilteringOperand.instance().condition('inQuery'), + conditionName: 'inQuery', + searchTree: innerTree + }); + tree.filteringOperands.push({ + fieldName: 'OrderDate', + condition: IgxDateFilteringOperand.instance().condition('before'), + conditionName: 'before', + searchVal: new Date('2024-01-01T00:00:00.000Z') }); - tree.filteringOperands.push(orTree); + tree.filteringOperands.push(subGroup); tree.filteringOperands.push({ - fieldName: 'CompanyName', - condition: IgxStringFilteringOperand.instance().condition('contains'), - searchVal: 'd', - ignoreCase: true + fieldName: 'ShippedDate', + condition: IgxDateFilteringOperand.instance().condition('null'), + conditionName: 'null' }); this.expressionTree = tree; @@ -62,4 +110,4 @@ export class QueryBuilderSample1Component implements OnInit { public printExpressionTree(tree: IExpressionTree) { return tree ? JSON.stringify(tree, null, 2) : 'Please add an expression!'; } -} +} \ No newline at end of file diff --git a/src/app/interactions/query-builder/query-builder-style/query-builder-style.component.html b/src/app/interactions/query-builder/query-builder-style/query-builder-style.component.html index dd48d7da77..6c59af3c99 100644 --- a/src/app/interactions/query-builder/query-builder-style/query-builder-style.component.html +++ b/src/app/interactions/query-builder/query-builder-style/query-builder-style.component.html @@ -1,3 +1,5 @@ - - +
+ + +
\ No newline at end of file diff --git a/src/app/interactions/query-builder/query-builder-style/query-builder-style.component.scss b/src/app/interactions/query-builder/query-builder-style/query-builder-style.component.scss index 5316b9ecab..256ee12da3 100644 --- a/src/app/interactions/query-builder/query-builder-style/query-builder-style.component.scss +++ b/src/app/interactions/query-builder/query-builder-style/query-builder-style.component.scss @@ -6,9 +6,14 @@ $black: #292826; $muted-yellow: #ffe482; $custom-query-builder: query-builder-theme( + $schema: $dark-material-schema, $background: $black, + $subquery-header-background: #373532, + $subquery-border-color: #4e4d4a, $header-background: $black, - $header-foreground: $yellow + $header-foreground: $yellow, + $color-expression-group-and: #4e78ea, + $color-expression-group-or: #b64fcb ); $custom-button: button-theme( @@ -22,36 +27,7 @@ $custom-button: button-theme( $border-color: $yellow ); -$custom-contained-button: button-theme( - $schema: $dark-material-schema, - $background: $yellow, - $foreground: $black, - $active-background: $muted-yellow, - $active-foreground: $black, - $hover-background: $muted-yellow, - $hover-foreground: $black, - $border-color: $yellow, - $active-border-color: $muted-yellow, - $hover-border-color: $muted-yellow, - $focus-border-color: $yellow -); - -$custom-button-group: button-group-theme( - $schema: $dark-material-schema, - $item-background: $black, - $item-text-color: $yellow, - $item-border-color: $yellow, - $item-selected-background: $yellow, - $item-hover-background: $yellow, - $item-selected-hover-background: $yellow -); - $custom-input-group: input-group-theme( - $schema: $dark-material-schema, - $idle-text-color: $yellow, - $focused-text-color: $yellow, - $filled-text-color: $yellow, - $idle-bottom-line-color: $muted-yellow, $focused-secondary-color: $yellow ); @@ -61,31 +37,30 @@ $custom-chip: chip-theme( $text-color: $black ); -$custom-drop-down: drop-down-theme( +$custom-icon-button: icon-button-theme( $schema: $dark-material-schema, - $background-color: $black, - $item-text-color: $yellow, - $hover-item-background: $yellow, - $hover-item-text-color: $black, - $focused-item-background: $yellow, - $focused-item-text-color: $black, - $selected-item-background: $yellow, - $selected-item-text-color: $black, - $selected-focus-item-background: $yellow, - $selected-focus-item-text-color: $black, - $selected-hover-item-background: $yellow, - $selected-hover-item-text-color: $black + $background: $yellow, + $foreground: $black ); @include css-vars($custom-query-builder); :host { ::ng-deep { - @include css-vars($custom-drop-down); - @include css-vars($custom-button); - @include css-vars($custom-button-group); + @include theme($palette: $dark-material-palette); @include css-vars($custom-input-group); @include css-vars($custom-chip); + @include css-vars($custom-icon-button); + + .igx-filter-tree__buttons { + @include css-vars($custom-button); + } } } - + +.wrapper{ + margin: 10px; + height: 100%; + overflow-y: auto; +} + \ No newline at end of file diff --git a/src/app/interactions/query-builder/query-builder-style/query-builder-style.component.ts b/src/app/interactions/query-builder/query-builder-style/query-builder-style.component.ts index bc8cc5ad36..71c6123552 100644 --- a/src/app/interactions/query-builder/query-builder-style/query-builder-style.component.ts +++ b/src/app/interactions/query-builder/query-builder-style/query-builder-style.component.ts @@ -1,4 +1,4 @@ -import { Component } from '@angular/core'; +import { Component, OnInit } from '@angular/core'; import { IgxQueryBuilderComponent } from 'igniteui-angular'; @Component({ @@ -7,21 +7,53 @@ import { IgxQueryBuilderComponent } from 'igniteui-angular'; templateUrl: 'query-builder-style.component.html', imports: [IgxQueryBuilderComponent] }) -export class QueryBuilderStyleComponent { - public fields: any[] = [ - { field: 'ID', dataType: 'string' }, - { field: 'CompanyName', dataType: 'string' }, - { field: 'ContactName', dataType: 'string' }, - { field: 'Employees', dataType: 'number' }, - { field: 'ContactTitle', dataType: 'string' }, - { field: 'DateCreated', dataType: 'date' }, - { field: 'TimeCreated', dataType: 'time' }, - { field: 'Address', dataType: 'string' }, - { field: 'City', dataType: 'string' }, - { field: 'Region', dataType: 'string' }, - { field: 'PostalCode', dataType: 'string' }, - { field: 'Phone', dataType: 'string' }, - { field: 'Fax', dataType: 'string' }, - { field: 'Contract', dataType: 'boolean' } - ]; +export class QueryBuilderStyleComponent implements OnInit { + public entities: any[]; + public companiesFields: any[]; + public ordersFields: any[]; + public ngOnInit(): void { + this.companiesFields = [ + { field: "ID", dataType: "string" }, + { field: "CompanyName", dataType: "string" }, + { field: "ContactName", dataType: "string" }, + { field: "Employees", dataType: "number" }, + { field: "ContactTitle", dataType: "string" }, + { field: "DateCreated", dataType: "date" }, + { field: "TimeCreated", dataType: "time" }, + { field: "Address", dataType: "string" }, + { field: "City", dataType: "string" }, + { field: "Region", dataType: "string" }, + { field: "PostalCode", dataType: "string" }, + { field: "Phone", dataType: "string" }, + { field: "Fax", dataType: "string" }, + { field: "Contract", dataType: "boolean" } + ]; + + this.ordersFields = [ + { field: "CompanyID", dataType: "string" }, + { field: "OrderID", dataType: "number" }, + { field: "EmployeeId", dataType: "number" }, + { field: "OrderDate", dataType: "date" }, + { field: "RequiredDate", dataType: "date" }, + { field: "ShippedDate", dataType: "date" }, + { field: "ShipVia", dataType: "number" }, + { field: "Freight", dataType: "number" }, + { field: "ShipName", dataType: "string" }, + { field: "ShipCity", dataType: "string" }, + { field: "ShipPostalCode", dataType: "string" }, + { field: "ShipCountry", dataType: "string" }, + { field: "Region", dataType: "string" } + ]; + + this.entities = [ + { + name: "Companies", + fields: this.companiesFields + }, + { + name: "Orders", + fields: this.ordersFields + } + ]; + } } diff --git a/src/app/interactions/query-builder/query-builder-template-sample/query-builder-template-sample.component.html b/src/app/interactions/query-builder/query-builder-template-sample/query-builder-template-sample.component.html new file mode 100644 index 0000000000..fd6304601b --- /dev/null +++ b/src/app/interactions/query-builder/query-builder-template-sample/query-builder-template-sample.component.html @@ -0,0 +1,32 @@ +
+ + + + + @if (selectedField?.field === 'Region' && (selectedCondition === 'equals' || selectedCondition === 'doesNotEqual')){ + + {{ reg.text }} + + } + @else if (selectedField?.field === 'OrderStatus' && (selectedCondition === 'equals' || selectedCondition === 'doesNotEqual')){ + + + {{stat.text}} + + + } + @else { + + } + + +
+ 
{{ printExpressionTree(queryBuilder.expressionTree) }}
+
+
\ No newline at end of file diff --git a/src/app/interactions/query-builder/query-builder-template-sample/query-builder-template-sample.component.scss b/src/app/interactions/query-builder/query-builder-template-sample/query-builder-template-sample.component.scss new file mode 100644 index 0000000000..cee4ec3af3 --- /dev/null +++ b/src/app/interactions/query-builder/query-builder-template-sample/query-builder-template-sample.component.scss @@ -0,0 +1,19 @@ +.wrapper{ + margin: 10px; + height: 100%; + overflow-y: auto; +} + +.output-area{ + box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.75); + border-radius: 4px; + margin: 0 20px 20px 20px; +} + +igx-radio-group{ + height: 40px; +} + +.igx-radio-group .igx-radio:not(:last-of-type) { + margin-inline-end: 0; +} \ No newline at end of file diff --git a/src/app/interactions/query-builder/query-builder-template-sample/query-builder-template-sample.component.ts b/src/app/interactions/query-builder/query-builder-template-sample/query-builder-template-sample.component.ts new file mode 100644 index 0000000000..0ea984e09e --- /dev/null +++ b/src/app/interactions/query-builder/query-builder-template-sample/query-builder-template-sample.component.ts @@ -0,0 +1,79 @@ +import { NgForOf, NgTemplateOutlet } from '@angular/common'; +import { Component, OnInit } from '@angular/core'; +import { FormsModule } from '@angular/forms'; +import { FilteringExpressionsTree, FilteringLogic, IExpressionTree, IgxComboModule, IgxDateFilteringOperand, IgxNumberFilteringOperand, IgxQueryBuilderComponent, IgxQueryBuilderHeaderComponent, IgxQueryBuilderSearchValueTemplateDirective, IgxRadioModule, IgxSelectModule, IgxStringFilteringOperand } from 'igniteui-angular'; + +@Component({ + selector: 'app-query-builder-template-sample', + styleUrls: ['./query-builder-template-sample.component.scss'], + templateUrl: 'query-builder-template-sample.component.html', + imports: [IgxQueryBuilderComponent, IgxQueryBuilderHeaderComponent, IgxSelectModule, IgxRadioModule, IgxComboModule, FormsModule, IgxQueryBuilderSearchValueTemplateDirective, NgForOf, NgTemplateOutlet] +}) +export class QueryBuilderTemplateSampleComponent implements OnInit { + public shipViaFormatterData: any[]; + public entities: any[]; + public companiesFields: any[]; + public ordersFields: any[]; + public expressionTree: IExpressionTree; + public regionOptions = [ + { text: 'Central North America', value: 'CNA' }, + { text: 'Central Europe', value: 'CEU' }, + { text: 'Mediterranean region', value: 'MED' }, + { text: 'Central Asia', value: 'CAS' }, + { text: 'South Asia', value: 'SAS' }, + { text: 'Western Africa', value: 'WAF' }, + { text: 'Amazonia', value: 'AMZ' }, + { text: 'Southern Africa', value: 'SAF' }, + { text: 'Northern Australia', value: 'NAU' }]; + + public statusOptions = [ + { text: 'New', value: 1 }, + { text: 'Shipped', value: 2 }, + { text: 'Done', value: 3 }]; + + public ngOnInit(): void { + this.ordersFields = [ + { field: "CompanyID", dataType: "string" }, + { field: "OrderID", dataType: "number" }, + { field: "EmployeeId", dataType: "number" }, + { field: "OrderDate", dataType: "date" }, + { field: "RequiredDate", dataType: "date" }, + { field: "ShippedDate", dataType: "date" }, + { field: "ShipVia", dataType: "number" }, + { field: "Freight", dataType: "number" }, + { field: "ShipName", dataType: "string" }, + { field: "ShipCity", dataType: "string" }, + { field: "ShipPostalCode", dataType: "string" }, + { field: "ShipCountry", dataType: "string" }, + { field: "Region", dataType: "string", formatter: (value: any, rowData: any) => rowData === 'equals' || rowData === 'doesNotEqual' ? `${value.value}` : value }, + { field: "OrderStatus", dataType: "number" } + ]; + + this.entities = [ + { + name: "Orders", + fields: this.ordersFields + } + ]; + + const tree = new FilteringExpressionsTree(FilteringLogic.And, undefined, 'Orders', ['*']); + tree.filteringOperands.push({ + fieldName: 'Region', + condition: IgxStringFilteringOperand.instance().condition('equals'), + conditionName: 'equals', + searchVal: this.regionOptions[0] + }); + tree.filteringOperands.push({ + fieldName: 'OrderStatus', + condition: IgxNumberFilteringOperand.instance().condition('equals'), + conditionName: 'equals', + searchVal: 1 + }); + + this.expressionTree = tree; + } + + public printExpressionTree(tree: IExpressionTree) { + return tree ? JSON.stringify(tree, null, 2) : 'Please add an expression!'; + } +} diff --git a/src/app/layouts/accordion/accordion-sample-3/accordion-sample-3.component.html b/src/app/layouts/accordion/accordion-sample-3/accordion-sample-3.component.html index fce49e3060..1babae0ea9 100644 --- a/src/app/layouts/accordion/accordion-sample-3/accordion-sample-3.component.html +++ b/src/app/layouts/accordion/accordion-sample-3/accordion-sample-3.component.html @@ -1,58 +1,72 @@
- - - - Categories{{ checkedItems }} - - -
- - {{ item.type }} - -
- - + + + + Categories{{ checkedItems }} + + +
+ @for (item of categories; track item) { + + {{ item.type }} + + } +
+ + - - - Cost: {{ '$' + slider.lowerValue + ' to ' + '$' + slider.upperValue }} - - - - - + + + Cost: {{ '$' + slider.lowerValue + ' to ' + '$' + slider.upperValue }} + + + + + - - - Rating{{': ' + rating }} - - -
- {{ i + 1 }} star or more - {{ i + 1 }} stars or more -
-
- star -
- star_half -
- star_border -
-
+ + + Rating@if (rating) { + {{': ' + rating }} + } + + + @for (item of [].constructor(4); track item; let i = $index) { +
+ @if (i===0) { + {{ i + 1 }} star or more + } + @if (i>0) { + {{ i + 1 }} stars or more + } +
+ @for (fillStar of [].constructor(i + 1); track fillStar) { +
+ star +
+ } + star_half + @for (borderStar of [].constructor(3 - i); track borderStar) { +
+ star_border
- - + } +
+
+ } + + - - - Time{{ time }} - - - - - - - - + + + Time{{ time }} + + + + + + + +
diff --git a/src/app/layouts/accordion/accordion-sample-3/accordion-sample-3.component.ts b/src/app/layouts/accordion/accordion-sample-3/accordion-sample-3.component.ts index 3ab0f0c9e0..c87bcb07ea 100644 --- a/src/app/layouts/accordion/accordion-sample-3/accordion-sample-3.component.ts +++ b/src/app/layouts/accordion/accordion-sample-3/accordion-sample-3.component.ts @@ -1,13 +1,13 @@ import { Component } from '@angular/core'; import { IgxSliderType, IgxAccordionComponent, IgxExpansionPanelComponent, IgxExpansionPanelHeaderComponent, IgxExpansionPanelTitleDirective, IgxExpansionPanelBodyComponent, IgxCheckboxComponent, IgxSliderComponent, IgxRadioComponent, IgxIconComponent, IgxTimePickerComponent, IgxLabelDirective } from 'igniteui-angular'; -import { NgFor, NgIf } from '@angular/common'; + import { FormsModule } from '@angular/forms'; @Component({ selector: 'app-accordion-sample-3', styleUrls: ['./accordion-sample-3.component.scss'], templateUrl: './accordion-sample-3.component.html', - imports: [IgxAccordionComponent, IgxExpansionPanelComponent, IgxExpansionPanelHeaderComponent, IgxExpansionPanelTitleDirective, IgxExpansionPanelBodyComponent, NgFor, IgxCheckboxComponent, FormsModule, IgxSliderComponent, NgIf, IgxRadioComponent, IgxIconComponent, IgxTimePickerComponent, IgxLabelDirective] + imports: [IgxAccordionComponent, IgxExpansionPanelComponent, IgxExpansionPanelHeaderComponent, IgxExpansionPanelTitleDirective, IgxExpansionPanelBodyComponent, IgxCheckboxComponent, FormsModule, IgxSliderComponent, IgxRadioComponent, IgxIconComponent, IgxTimePickerComponent, IgxLabelDirective] }) export class AccordionSample3Component { public sliderType = IgxSliderType; diff --git a/src/app/layouts/accordion/accordion-style/accordion-style.component.ts b/src/app/layouts/accordion/accordion-style/accordion-style.component.ts index 0fd224b721..d7c29607cd 100644 --- a/src/app/layouts/accordion/accordion-style/accordion-style.component.ts +++ b/src/app/layouts/accordion/accordion-style/accordion-style.component.ts @@ -1,12 +1,12 @@ import { Component } from '@angular/core'; -import { IgxSwitchComponent, IgxAccordionComponent, IgxExpansionPanelComponent, IgxExpansionPanelHeaderComponent, IgxExpansionPanelTitleDirective, IgxExpansionPanelBodyComponent } from 'igniteui-angular'; +import { IgxAccordionComponent, IgxExpansionPanelComponent, IgxExpansionPanelHeaderComponent, IgxExpansionPanelTitleDirective, IgxExpansionPanelBodyComponent } from 'igniteui-angular'; import { FormsModule } from '@angular/forms'; @Component({ selector: 'app-accordion-style', styleUrls: ['./accordion-style.component.scss'], templateUrl: './accordion-style.component.html', - imports: [IgxSwitchComponent, FormsModule, IgxAccordionComponent, IgxExpansionPanelComponent, IgxExpansionPanelHeaderComponent, IgxExpansionPanelTitleDirective, IgxExpansionPanelBodyComponent] + imports: [FormsModule, IgxAccordionComponent, IgxExpansionPanelComponent, IgxExpansionPanelHeaderComponent, IgxExpansionPanelTitleDirective, IgxExpansionPanelBodyComponent] }) export class AccordionStyleComponent { public singleBranchExpand = false; diff --git a/src/app/layouts/card/card-sample-1/card-sample-1.component.html b/src/app/layouts/card/card-sample-1/card-sample-1.component.html index 56d73b091e..2e9caf412f 100644 --- a/src/app/layouts/card/card-sample-1/card-sample-1.component.html +++ b/src/app/layouts/card/card-sample-1/card-sample-1.component.html @@ -1,19 +1,21 @@
- - -
{{card.title}}
-
{{card.subtitle}}
- - - - + + +
{{card.title}}
+
{{card.subtitle}}
+ + + + - + - - - - + + @for (icon of card.icons; track icon) { + + } + +
diff --git a/src/app/layouts/card/card-sample-1/card-sample-1.component.ts b/src/app/layouts/card/card-sample-1/card-sample-1.component.ts index b13fe65acd..9c64aa9fdf 100644 --- a/src/app/layouts/card/card-sample-1/card-sample-1.component.ts +++ b/src/app/layouts/card/card-sample-1/card-sample-1.component.ts @@ -1,13 +1,13 @@ import { Component } from '@angular/core'; import { Card } from '../card.blueprint'; import { IgxCardComponent, IgxCardHeaderComponent, IgxCardHeaderTitleDirective, IgxCardHeaderSubtitleDirective, IgxCardMediaDirective, IgxDividerDirective, IgxCardActionsComponent, IgxIconButtonDirective, IgxRippleDirective, IgxSuffixDirective, IgxIconComponent } from 'igniteui-angular'; -import { NgFor } from '@angular/common'; + @Component({ selector: 'app-igx-card-simple', styleUrls: ['./card-sample-1.component.scss'], templateUrl: './card-sample-1.component.html', - imports: [IgxCardComponent, IgxCardHeaderComponent, IgxCardHeaderTitleDirective, IgxCardHeaderSubtitleDirective, IgxCardMediaDirective, IgxDividerDirective, IgxCardActionsComponent, NgFor, IgxIconButtonDirective, IgxRippleDirective, IgxSuffixDirective, IgxIconComponent] + imports: [IgxCardComponent, IgxCardHeaderComponent, IgxCardHeaderTitleDirective, IgxCardHeaderSubtitleDirective, IgxCardMediaDirective, IgxDividerDirective, IgxCardActionsComponent, IgxIconButtonDirective, IgxRippleDirective, IgxSuffixDirective, IgxIconComponent] }) export class CardSample1Component { public card = new Card({ diff --git a/src/app/layouts/card/card-sample-2/card-sample-2.component.html b/src/app/layouts/card/card-sample-2/card-sample-2.component.html index 7f6e7fab9c..90f34c8e50 100644 --- a/src/app/layouts/card/card-sample-2/card-sample-2.component.html +++ b/src/app/layouts/card/card-sample-2/card-sample-2.component.html @@ -1,25 +1,27 @@
- -
- -
{{card.title}}
-
{{card.subtitle}}
- - - - + +
+ +
{{card.title}}
+
{{card.subtitle}}
+ + + + - -

{{card.content}}

- -
+ +

{{card.content}}

+ +
- + - - - - + + @for (icon of card.icons; track icon) { + + } + +
diff --git a/src/app/layouts/card/card-sample-2/card-sample-2.component.ts b/src/app/layouts/card/card-sample-2/card-sample-2.component.ts index 5aafc1c279..d0ef5ca9ca 100644 --- a/src/app/layouts/card/card-sample-2/card-sample-2.component.ts +++ b/src/app/layouts/card/card-sample-2/card-sample-2.component.ts @@ -1,13 +1,13 @@ import { Component } from '@angular/core'; import { Card } from '../card.blueprint'; import { IgxCardComponent, IgxLayoutDirective, IgxFlexDirective, IgxCardHeaderComponent, IgxCardHeaderTitleDirective, IgxCardHeaderSubtitleDirective, IgxCardMediaDirective, IgxCardContentDirective, IgxDividerDirective, IgxCardActionsComponent, IgxIconButtonDirective, IgxRippleDirective, IgxSuffixDirective, IgxIconComponent } from 'igniteui-angular'; -import { NgFor } from '@angular/common'; + @Component({ selector: 'app-card-sample-2', styleUrls: ['./card-sample-2.component.scss'], templateUrl: './card-sample-2.component.html', - imports: [IgxCardComponent, IgxLayoutDirective, IgxFlexDirective, IgxCardHeaderComponent, IgxCardHeaderTitleDirective, IgxCardHeaderSubtitleDirective, IgxCardMediaDirective, IgxCardContentDirective, IgxDividerDirective, IgxCardActionsComponent, NgFor, IgxIconButtonDirective, IgxRippleDirective, IgxSuffixDirective, IgxIconComponent] + imports: [IgxCardComponent, IgxLayoutDirective, IgxFlexDirective, IgxCardHeaderComponent, IgxCardHeaderTitleDirective, IgxCardHeaderSubtitleDirective, IgxCardMediaDirective, IgxCardContentDirective, IgxDividerDirective, IgxCardActionsComponent, IgxIconButtonDirective, IgxRippleDirective, IgxSuffixDirective, IgxIconComponent] }) export class CardSample2Component { public card = new Card({ diff --git a/src/app/layouts/card/card-sample-3/card-sample-3.component.html b/src/app/layouts/card/card-sample-3/card-sample-3.component.html index 87f7be669b..813bc6421a 100644 --- a/src/app/layouts/card/card-sample-3/card-sample-3.component.html +++ b/src/app/layouts/card/card-sample-3/card-sample-3.component.html @@ -1,25 +1,27 @@
- -
- - -
{{card.title}}
-
{{card.subtitle}}
- + +
+ + +
{{card.title}}
+
{{card.subtitle}}
+ - -

{{card.content}}

- + +

{{card.content}}

+ - - - -
+ + @for (button of card.buttons; track button) { + + } + +
- - - - + + + +
diff --git a/src/app/layouts/card/card-sample-3/card-sample-3.component.ts b/src/app/layouts/card/card-sample-3/card-sample-3.component.ts index 339c890d92..b1c7d11e6e 100644 --- a/src/app/layouts/card/card-sample-3/card-sample-3.component.ts +++ b/src/app/layouts/card/card-sample-3/card-sample-3.component.ts @@ -1,13 +1,13 @@ import { Component } from '@angular/core'; import { Card } from '../card.blueprint'; import { IgxCardComponent, IgxLayoutDirective, IgxFlexDirective, IgxCardHeaderComponent, IgxAvatarComponent, IgxCardHeaderTitleDirective, IgxCardHeaderSubtitleDirective, IgxCardContentDirective, IgxCardActionsComponent, IgxButtonDirective, IgxRippleDirective, IgxPrefixDirective, IgxCardMediaDirective } from 'igniteui-angular'; -import { NgFor } from '@angular/common'; + @Component({ selector: 'app-card-sample-3', styleUrls: ['./card-sample-3.component.scss'], templateUrl: './card-sample-3.component.html', - imports: [IgxCardComponent, IgxLayoutDirective, IgxFlexDirective, IgxCardHeaderComponent, IgxAvatarComponent, IgxCardHeaderTitleDirective, IgxCardHeaderSubtitleDirective, IgxCardContentDirective, IgxCardActionsComponent, NgFor, IgxButtonDirective, IgxRippleDirective, IgxPrefixDirective, IgxCardMediaDirective] + imports: [IgxCardComponent, IgxLayoutDirective, IgxFlexDirective, IgxCardHeaderComponent, IgxAvatarComponent, IgxCardHeaderTitleDirective, IgxCardHeaderSubtitleDirective, IgxCardContentDirective, IgxCardActionsComponent, IgxButtonDirective, IgxRippleDirective, IgxPrefixDirective, IgxCardMediaDirective] }) export class CardSample3Component { public horizontal = true; diff --git a/src/app/layouts/card/card-sample-4/card-sample-4.component.html b/src/app/layouts/card/card-sample-4/card-sample-4.component.html index 1b849246e5..2e01c1e1bb 100644 --- a/src/app/layouts/card/card-sample-4/card-sample-4.component.html +++ b/src/app/layouts/card/card-sample-4/card-sample-4.component.html @@ -1,125 +1,131 @@
-
- - -

{{ cards[1].title }}

-
{{ cards[1].subtitle }}
- - - -
-
- - {{ cards[1].content}} - {{ cards[1].unit}} - - -
- +
+ + +

{{ cards[1].title }}

+
{{ cards[1].subtitle }}
+ + + +
+
+ + {{ cards[1].content}} + {{ cards[1].unit}} + + +
+ +
+ +
+
+ + {{details[0].value}} + {{details[0].label}} +
+
+ + {{details[1].value}} + {{details[1].label}} +
+
+ +
+ +
+ 08:00 + 12:00 + 16:00 + 20:00 + 00:00 +
+
+ + + + + + @for (day of days; track day) { + +
+ {{ day.day }} + + {{day.icon}} + + + {{ day.tempHeight}} / {{day.tempLow}} +
- -
-
- - {{details[0].value}} - {{details[0].label}} -
-
- - {{details[1].value}} - {{details[1].label}} -
-
- -
- -
- 08:00 - 12:00 - 16:00 - 20:00 - 00:00 -
-
- - - - - - -
- {{ day.day }} - - {{day.icon}} - - - {{ day.tempHeight}} / {{day.tempLow}} - -
- - - - - - - - - - - -
- -
- - - - - - -

{{ cards[0].title }}

-
{{ cards[0].subtitle }}
- - - -

{{ cards[0].content}}

- - - - Tonight's availability - -
- - {{ chip }} - -
- - - - - - -
- -
- - - -

Frank Carter

-
Photographer
- - - - - - - -

Photographer Frank Carter won this year national photo contest with his image "Skies" which gathered the most votes in the competition.

- - - - - - - -
+ + } + + + + + + + + + + +
+ +
+ + + + + + +

{{ cards[0].title }}

+
{{ cards[0].subtitle }}
+ + + +

{{ cards[0].content}}

+ + + + Tonight's availability + +
+ @for (chip of cards[0].chips; track chip) { + + {{ chip }} + + } +
+ + + + @for (button of cards[0].buttons; track button) { + + } + + +
+ +
+ + + +

Frank Carter

+
Photographer
+ + + + + + + +

Photographer Frank Carter won this year national photo contest with his image "Skies" which gathered the most votes in the competition.

+ + + + + + + +
diff --git a/src/app/layouts/card/card-sample-4/card-sample-4.component.ts b/src/app/layouts/card/card-sample-4/card-sample-4.component.ts index bdd3e29ec3..aa96ebf59c 100644 --- a/src/app/layouts/card/card-sample-4/card-sample-4.component.ts +++ b/src/app/layouts/card/card-sample-4/card-sample-4.component.ts @@ -8,13 +8,13 @@ import { weatherDetailsFactory, weatherListFactory } from '../card.blueprint'; -import { NgFor } from '@angular/common'; + @Component({ selector: 'app-card-sample-4', styleUrls: ['./card-sample-4.component.scss'], templateUrl: './card-sample-4.component.html', - imports: [IgxCardComponent, IgxCardHeaderComponent, IgxCardHeaderTitleDirective, IgxCardHeaderSubtitleDirective, IgxCardContentDirective, IgxChipComponent, IgxIconComponent, IgxSliderComponent, IgxExpansionPanelComponent, IgxExpansionPanelBodyComponent, IgxListComponent, NgFor, IgxListItemComponent, IgxDividerDirective, IgxCardActionsComponent, IgxButtonDirective, IgxRippleDirective, IgxPrefixDirective, IgxCardMediaDirective, IgxAvatarComponent] + imports: [IgxCardComponent, IgxCardHeaderComponent, IgxCardHeaderTitleDirective, IgxCardHeaderSubtitleDirective, IgxCardContentDirective, IgxChipComponent, IgxIconComponent, IgxSliderComponent, IgxExpansionPanelComponent, IgxExpansionPanelBodyComponent, IgxListComponent, IgxListItemComponent, IgxDividerDirective, IgxCardActionsComponent, IgxButtonDirective, IgxRippleDirective, IgxPrefixDirective, IgxCardMediaDirective, IgxAvatarComponent] }) export class CardSample4Component implements OnInit { @ViewChild(IgxExpansionPanelComponent, { static: true }) diff --git a/src/app/layouts/card/card-styling-sample/card-styling-sample.component.html b/src/app/layouts/card/card-styling-sample/card-styling-sample.component.html index d2b111bc2a..49e1dae43b 100644 --- a/src/app/layouts/card/card-styling-sample/card-styling-sample.component.html +++ b/src/app/layouts/card/card-styling-sample/card-styling-sample.component.html @@ -1,26 +1,28 @@
- - - - + + + + - -

{{ card.title }}

-
{{ card.subtitle }}
- + +

{{ card.title }}

+
{{ card.subtitle }}
+ - -

{{ card.content }}

- + +

{{ card.content }}

+ - - - + + @for (icon of card.icons; track icon) { + + } + - +
diff --git a/src/app/layouts/card/card-styling-sample/card-styling-sample.component.ts b/src/app/layouts/card/card-styling-sample/card-styling-sample.component.ts index e4225270b5..935be0448f 100644 --- a/src/app/layouts/card/card-styling-sample/card-styling-sample.component.ts +++ b/src/app/layouts/card/card-styling-sample/card-styling-sample.component.ts @@ -1,13 +1,13 @@ import { Component, OnInit } from '@angular/core'; import { Card } from '../card.blueprint'; import { IgxCardComponent, IgxCardMediaDirective, IgxCardHeaderComponent, IgxCardHeaderTitleDirective, IgxCardHeaderSubtitleDirective, IgxCardContentDirective, IgxCardActionsComponent, IgxIconButtonDirective, IgxRippleDirective, IgxSuffixDirective, IgxIconComponent } from 'igniteui-angular'; -import { NgFor } from '@angular/common'; + @Component({ selector: 'app-card-styling-sample', templateUrl: './card-styling-sample.component.html', styleUrls: ['./card-styling-sample.component.scss'], - imports: [IgxCardComponent, IgxCardMediaDirective, IgxCardHeaderComponent, IgxCardHeaderTitleDirective, IgxCardHeaderSubtitleDirective, IgxCardContentDirective, IgxCardActionsComponent, NgFor, IgxIconButtonDirective, IgxRippleDirective, IgxSuffixDirective, IgxIconComponent] + imports: [IgxCardComponent, IgxCardMediaDirective, IgxCardHeaderComponent, IgxCardHeaderTitleDirective, IgxCardHeaderSubtitleDirective, IgxCardContentDirective, IgxCardActionsComponent, IgxIconButtonDirective, IgxRippleDirective, IgxSuffixDirective, IgxIconComponent] }) export class CardStylingSampleComponent { public card = new Card({ diff --git a/src/app/layouts/card/card.component.html b/src/app/layouts/card/card.component.html index 731f7f7d43..d8ea086abf 100644 --- a/src/app/layouts/card/card.component.html +++ b/src/app/layouts/card/card.component.html @@ -1,27 +1,31 @@
- - - - + + + + - -

{{ card.title }}

-
{{ card.subtitle }}
- + +

{{ card.title }}

+
{{ card.subtitle }}
+ - -

{{ card.content }}

- + +

{{ card.content }}

+ - - - - + + @for (button of card.buttons; track button) { + + } + @for (icon of card.icons; track icon) { + + } + - +
diff --git a/src/app/layouts/card/card.component.ts b/src/app/layouts/card/card.component.ts index c97b947793..2a845157c8 100644 --- a/src/app/layouts/card/card.component.ts +++ b/src/app/layouts/card/card.component.ts @@ -1,13 +1,13 @@ import { Component } from '@angular/core'; import { Card } from './card.blueprint'; import { IgxCardComponent, IgxCardMediaDirective, IgxCardHeaderComponent, IgxCardHeaderTitleDirective, IgxCardHeaderSubtitleDirective, IgxCardContentDirective, IgxCardActionsComponent, IgxButtonDirective, IgxRippleDirective, IgxPrefixDirective, IgxIconButtonDirective, IgxSuffixDirective, IgxIconComponent } from 'igniteui-angular'; -import { NgFor } from '@angular/common'; + @Component({ selector: 'app-card', styleUrls: ['./card.component.scss'], templateUrl: './card.component.html', - imports: [IgxCardComponent, IgxCardMediaDirective, IgxCardHeaderComponent, IgxCardHeaderTitleDirective, IgxCardHeaderSubtitleDirective, IgxCardContentDirective, IgxCardActionsComponent, NgFor, IgxButtonDirective, IgxRippleDirective, IgxPrefixDirective, IgxIconButtonDirective, IgxSuffixDirective, IgxIconComponent] + imports: [IgxCardComponent, IgxCardMediaDirective, IgxCardHeaderComponent, IgxCardHeaderTitleDirective, IgxCardHeaderSubtitleDirective, IgxCardContentDirective, IgxCardActionsComponent, IgxButtonDirective, IgxRippleDirective, IgxPrefixDirective, IgxIconButtonDirective, IgxSuffixDirective, IgxIconComponent] }) export class CardComponent { public card = new Card({ diff --git a/src/app/layouts/carousel/carousel-animations-sample/carousel-animations-sample.component.html b/src/app/layouts/carousel/carousel-animations-sample/carousel-animations-sample.component.html index 6482451788..08b543ce4b 100644 --- a/src/app/layouts/carousel/carousel-animations-sample/carousel-animations-sample.component.html +++ b/src/app/layouts/carousel/carousel-animations-sample/carousel-animations-sample.component.html @@ -1,37 +1,38 @@
-
- Current animation: - - - - {{animation | titlecase}} - - - -
-
- - -
- - -

{{slide.heading}}

- - - -

{{slide.description}}

- - - - - - - - visit page - - -
- - -
+
+ Current animation: + + + @for (animation of animations; track animation) { + + {{animation | titlecase}} + + } + + +
+
+ + @for (slide of slides; track slide) { + +
+ + +

{{slide.heading}}

+ + +

{{slide.description}}

+ + + + + + visit page + + +
+ + } + +
diff --git a/src/app/layouts/carousel/carousel-animations-sample/carousel-animations-sample.component.ts b/src/app/layouts/carousel/carousel-animations-sample/carousel-animations-sample.component.ts index 7996b6f07b..006916c4eb 100644 --- a/src/app/layouts/carousel/carousel-animations-sample/carousel-animations-sample.component.ts +++ b/src/app/layouts/carousel/carousel-animations-sample/carousel-animations-sample.component.ts @@ -1,13 +1,13 @@ import { Component, OnInit, ViewChild } from '@angular/core'; -import { IgxCarouselComponent, IgxSelectComponent, IgxSelectItemComponent, IgxSlideComponent, IgxCardComponent, IgxCardHeaderComponent, IgxCardHeaderTitleDirective, IgxCardContentDirective, IgxCardMediaDirective, IgxCardActionsComponent, IgxButtonDirective, IgxPrefixDirective, IgxCarouselIndicatorDirective } from 'igniteui-angular'; +import { IgxCarouselComponent, IgxSelectComponent, IgxSelectItemComponent, IgxSlideComponent, IgxCardComponent, IgxCardHeaderComponent, IgxCardHeaderTitleDirective, IgxCardContentDirective, IgxCardMediaDirective, IgxCardActionsComponent, IgxButtonDirective, IgxPrefixDirective } from 'igniteui-angular'; import { FormsModule } from '@angular/forms'; -import { NgFor, TitleCasePipe } from '@angular/common'; +import { TitleCasePipe } from '@angular/common'; @Component({ selector: 'app-carousel', styleUrls: ['./carousel-animations-sample.component.scss'], templateUrl: './carousel-animations-sample.component.html', - imports: [IgxSelectComponent, FormsModule, NgFor, IgxSelectItemComponent, IgxCarouselComponent, IgxSlideComponent, IgxCardComponent, IgxCardHeaderComponent, IgxCardHeaderTitleDirective, IgxCardContentDirective, IgxCardMediaDirective, IgxCardActionsComponent, IgxButtonDirective, IgxPrefixDirective, IgxCarouselIndicatorDirective, TitleCasePipe] + imports: [IgxSelectComponent, FormsModule, IgxSelectItemComponent, IgxCarouselComponent, IgxSlideComponent, IgxCardComponent, IgxCardHeaderComponent, IgxCardHeaderTitleDirective, IgxCardContentDirective, IgxCardMediaDirective, IgxCardActionsComponent, IgxButtonDirective, IgxPrefixDirective, TitleCasePipe] }) export class CarouselAnimationsSampleComponent implements OnInit { @ViewChild('carousel', { static: true }) public carousel: IgxCarouselComponent; diff --git a/src/app/layouts/carousel/carousel-no-navigation-sample/carousel-no-navigation-sample.component.html b/src/app/layouts/carousel/carousel-no-navigation-sample/carousel-no-navigation-sample.component.html index 7d4a24251f..2ca8c9cb66 100644 --- a/src/app/layouts/carousel/carousel-no-navigation-sample/carousel-no-navigation-sample.component.html +++ b/src/app/layouts/carousel/carousel-no-navigation-sample/carousel-no-navigation-sample.component.html @@ -1,25 +1,29 @@
-
- - -
-
-
{{ item.description }}
-
{{ item.price | currency: 'USD': 'symbol': '3.0' }}
-
-
- - -
-
- - - -
-
{{item.title}}
- {{item.subTitle}} -
- - -
+
+ + @for (item of slides; track item) { + +
+
+
{{ item.description }}
+
{{ item.price | currency: 'USD': 'symbol': '3.0' }}
+
+
+ + } + +
+
+ + @for (item of slides; track item; let i = $index) { + + +
+
{{item.title}}
+ {{item.subTitle}} +
+ + } + +
diff --git a/src/app/layouts/carousel/carousel-no-navigation-sample/carousel-no-navigation-sample.component.ts b/src/app/layouts/carousel/carousel-no-navigation-sample/carousel-no-navigation-sample.component.ts index ce62a772e1..dbdc85295c 100644 --- a/src/app/layouts/carousel/carousel-no-navigation-sample/carousel-no-navigation-sample.component.ts +++ b/src/app/layouts/carousel/carousel-no-navigation-sample/carousel-no-navigation-sample.component.ts @@ -1,12 +1,12 @@ import { Component, OnInit, ViewChild } from '@angular/core'; -import { IgxCarouselComponent, IgxListComponent, IListItemClickEventArgs, ISlideEventArgs, IgxSlideComponent, IgxCarouselIndicatorDirective, IgxListItemComponent, IgxListThumbnailDirective } from 'igniteui-angular'; -import { NgFor, NgStyle, NgClass, CurrencyPipe } from '@angular/common'; +import { IgxCarouselComponent, IgxListComponent, IListItemClickEventArgs, ISlideEventArgs, IgxSlideComponent, IgxListItemComponent, IgxListThumbnailDirective } from 'igniteui-angular'; +import { NgStyle, NgClass, CurrencyPipe } from '@angular/common'; @Component({ selector: 'app-carousel', styleUrls: ['./carousel-no-navigation-sample.component.scss'], templateUrl: './carousel-no-navigation-sample.component.html', - imports: [IgxCarouselComponent, NgFor, IgxSlideComponent, NgStyle, NgClass, IgxCarouselIndicatorDirective, IgxListComponent, IgxListItemComponent, IgxListThumbnailDirective, CurrencyPipe] + imports: [IgxCarouselComponent, IgxSlideComponent, NgStyle, NgClass, IgxListComponent, IgxListItemComponent, IgxListThumbnailDirective, CurrencyPipe] }) export class CarouselNoNavigationSampleComponent implements OnInit { @ViewChild(IgxCarouselComponent, { static: true }) diff --git a/src/app/layouts/carousel/carousel.component.html b/src/app/layouts/carousel/carousel.component.html index 19b18315d6..8067e714f2 100644 --- a/src/app/layouts/carousel/carousel.component.html +++ b/src/app/layouts/carousel/carousel.component.html @@ -1,9 +1,11 @@
- - -
- -
- - + + @for (slide of slides; track slide) { + +
+ +
+ + } +
diff --git a/src/app/layouts/carousel/carousel.component.ts b/src/app/layouts/carousel/carousel.component.ts index f5c1adb553..1480ab5651 100644 --- a/src/app/layouts/carousel/carousel.component.ts +++ b/src/app/layouts/carousel/carousel.component.ts @@ -1,12 +1,12 @@ import { Component } from '@angular/core'; import { IgxCarouselComponent, IgxSlideComponent } from 'igniteui-angular'; -import { NgFor } from '@angular/common'; + @Component({ selector: 'app-carousel', styleUrls: ['./carousel.component.scss'], templateUrl: './carousel.component.html', - imports: [IgxCarouselComponent, NgFor, IgxSlideComponent] + imports: [IgxCarouselComponent, IgxSlideComponent] }) export class CarouselComponent { diff --git a/src/app/layouts/expansion-panel/expansion-sample-2/expansion-sample-2.component.html b/src/app/layouts/expansion-panel/expansion-sample-2/expansion-sample-2.component.html index 930bcf7396..00be7b7777 100644 --- a/src/app/layouts/expansion-panel/expansion-sample-2/expansion-sample-2.component.html +++ b/src/app/layouts/expansion-panel/expansion-sample-2/expansion-sample-2.component.html @@ -1,15 +1,17 @@ - - - Golden Retriever - - - Medium-large gun dog - - - - The Golden Retriever is a medium-large gun dog that retrieves shot waterfowl, such as ducks and upland game birds, during hunting and shooting parties.[3] The name "retriever" refers to the breed's ability to retrieve shot game undamaged due to their soft mouth. Golden retrievers have an instinctive love of water, and are easy to train to basic or advanced obedience standards. - + + + Golden Retriever + + @if (panel.collapsed) { + + Medium-large gun dog + + } + + + The Golden Retriever is a medium-large gun dog that retrieves shot waterfowl, such as ducks and upland game birds, during hunting and shooting parties.[3] The name "retriever" refers to the breed's ability to retrieve shot game undamaged due to their soft mouth. Golden retrievers have an instinctive love of water, and are easy to train to basic or advanced obedience standards. + diff --git a/src/app/layouts/expansion-panel/expansion-sample-2/expansion-sample-2.component.ts b/src/app/layouts/expansion-panel/expansion-sample-2/expansion-sample-2.component.ts index 4d95aa8a48..547ad9d568 100644 --- a/src/app/layouts/expansion-panel/expansion-sample-2/expansion-sample-2.component.ts +++ b/src/app/layouts/expansion-panel/expansion-sample-2/expansion-sample-2.component.ts @@ -1,12 +1,12 @@ import { Component, ViewChild } from '@angular/core'; import { IgxExpansionPanelComponent, IgxToastComponent, IgxExpansionPanelHeaderComponent, IgxExpansionPanelTitleDirective, IgxExpansionPanelDescriptionDirective, IgxExpansionPanelBodyComponent } from 'igniteui-angular'; -import { NgIf } from '@angular/common'; + @Component({ // tslint:disable-next-line:component-selector selector: 'app-expansion-sample-2', styleUrls: ['./expansion-sample-2.component.scss'], templateUrl: './expansion-sample-2.component.html', - imports: [IgxExpansionPanelComponent, IgxExpansionPanelHeaderComponent, IgxExpansionPanelTitleDirective, NgIf, IgxExpansionPanelDescriptionDirective, IgxExpansionPanelBodyComponent, IgxToastComponent] + imports: [IgxExpansionPanelComponent, IgxExpansionPanelHeaderComponent, IgxExpansionPanelTitleDirective, IgxExpansionPanelDescriptionDirective, IgxExpansionPanelBodyComponent, IgxToastComponent] }) export class ExpansionPanelSample2Component { @ViewChild(IgxExpansionPanelComponent, { read: IgxExpansionPanelComponent, static: true }) diff --git a/src/app/layouts/expansion-panel/expansion-sample-3/expansion-sample-3.component.html b/src/app/layouts/expansion-panel/expansion-sample-3/expansion-sample-3.component.html index 18b6f0389b..731f79beac 100644 --- a/src/app/layouts/expansion-panel/expansion-sample-3/expansion-sample-3.component.html +++ b/src/app/layouts/expansion-panel/expansion-sample-3/expansion-sample-3.component.html @@ -1,25 +1,29 @@
- - - - Golden Retriever - - - Medium-large gun dog - - - Show more - Show Less - - - -
- - - The Golden Retriever is a medium-large gun dog that retrieves shot waterfowl, such as ducks and upland game birds, during hunting and shooting parties.[3] The name "retriever" refers to the breed's ability to retrieve shot game undamaged due to their soft mouth. Golden retrievers have an instinctive love of water, and are easy to train to basic or advanced obedience standards. - - Read more -
- - + + + + Golden Retriever + + + Medium-large gun dog + + + @if (panel.collapsed) { + Show more + } + @if (!panel.collapsed) { + Show Less + } + + + +
+ + + The Golden Retriever is a medium-large gun dog that retrieves shot waterfowl, such as ducks and upland game birds, during hunting and shooting parties.[3] The name "retriever" refers to the breed's ability to retrieve shot game undamaged due to their soft mouth. Golden retrievers have an instinctive love of water, and are easy to train to basic or advanced obedience standards. + + Read more +
+ +
diff --git a/src/app/layouts/expansion-panel/expansion-sample-3/expansion-sample-3.component.ts b/src/app/layouts/expansion-panel/expansion-sample-3/expansion-sample-3.component.ts index 1eec47e128..420510b07c 100644 --- a/src/app/layouts/expansion-panel/expansion-sample-3/expansion-sample-3.component.ts +++ b/src/app/layouts/expansion-panel/expansion-sample-3/expansion-sample-3.component.ts @@ -1,13 +1,13 @@ import { Component, ViewChild } from '@angular/core'; import { IgxExpansionPanelComponent, IgxExpansionPanelHeaderComponent, IgxExpansionPanelTitleDirective, IgxExpansionPanelDescriptionDirective, IgxExpansionPanelIconDirective, IgxExpansionPanelBodyComponent, IgxButtonDirective } from 'igniteui-angular'; -import { NgIf } from '@angular/common'; + @Component({ // tslint:disable-next-line:component-selector selector: 'app-expansion-sample-3', styleUrls: ['./expansion-sample-3.component.scss'], templateUrl: './expansion-sample-3.component.html', - imports: [IgxExpansionPanelComponent, IgxExpansionPanelHeaderComponent, IgxExpansionPanelTitleDirective, IgxExpansionPanelDescriptionDirective, IgxExpansionPanelIconDirective, NgIf, IgxExpansionPanelBodyComponent, IgxButtonDirective] + imports: [IgxExpansionPanelComponent, IgxExpansionPanelHeaderComponent, IgxExpansionPanelTitleDirective, IgxExpansionPanelDescriptionDirective, IgxExpansionPanelIconDirective, IgxExpansionPanelBodyComponent, IgxButtonDirective] }) export class ExpansionPanelSample3Component { diff --git a/src/app/layouts/layout/layout-align-items/layout-align-items.component.html b/src/app/layouts/layout/layout-align-items/layout-align-items.component.html index dcb7ef100b..e8080ee6d4 100644 --- a/src/app/layouts/layout/layout-align-items/layout-align-items.component.html +++ b/src/app/layouts/layout/layout-align-items/layout-align-items.component.html @@ -1,28 +1,34 @@ - - - + + + -
+@if (alignItems === 'flex-start') { +
-
1
-
2
-
3
+
1
+
2
+
3
-
+
+} -
+@if (alignItems === 'center') { +
-
1
-
2
-
3
+
1
+
2
+
3
-
+
+} -
+@if (alignItems === 'flex-end') { +
-
1
-
2
-
3
+
1
+
2
+
3
-
+
+} diff --git a/src/app/layouts/layout/layout-align-items/layout-align-items.component.ts b/src/app/layouts/layout/layout-align-items/layout-align-items.component.ts index b5207aa2bb..0fa3add475 100644 --- a/src/app/layouts/layout/layout-align-items/layout-align-items.component.ts +++ b/src/app/layouts/layout/layout-align-items/layout-align-items.component.ts @@ -1,13 +1,13 @@ import { Component, ViewEncapsulation } from '@angular/core'; import { ButtonGroupAlignment, IgxButtonGroupComponent, IgxButtonDirective, IgxRippleDirective, IgxLayoutDirective, IgxFlexDirective } from 'igniteui-angular'; -import { NgIf } from '@angular/common'; + @Component({ encapsulation: ViewEncapsulation.None, selector: 'app-layout-align-items', styleUrls: ['./layout-align-items.component.scss'], templateUrl: './layout-align-items.component.html', - imports: [IgxButtonGroupComponent, IgxButtonDirective, IgxRippleDirective, NgIf, IgxLayoutDirective, IgxFlexDirective] + imports: [IgxButtonGroupComponent, IgxButtonDirective, IgxRippleDirective, IgxLayoutDirective, IgxFlexDirective] }) export class LayoutAlignItemsComponent { diff --git a/src/app/layouts/layout/layout-content-space/layout-content-space.component.html b/src/app/layouts/layout/layout-content-space/layout-content-space.component.html index b31c5d62fb..417d59300d 100644 --- a/src/app/layouts/layout/layout-content-space/layout-content-space.component.html +++ b/src/app/layouts/layout/layout-content-space/layout-content-space.component.html @@ -1,19 +1,23 @@ - - + + -
+@if (layout === 'space-between') { +
-
1
-
2
-
3
+
1
+
2
+
3
-
+
+} -
+@if (layout === 'space-around') { +
-
1
-
2
-
3
+
1
+
2
+
3
-
+
+} diff --git a/src/app/layouts/layout/layout-content-space/layout-content-space.component.ts b/src/app/layouts/layout/layout-content-space/layout-content-space.component.ts index 67075f63e3..b16f3dbe42 100644 --- a/src/app/layouts/layout/layout-content-space/layout-content-space.component.ts +++ b/src/app/layouts/layout/layout-content-space/layout-content-space.component.ts @@ -1,13 +1,13 @@ import { Component, ViewEncapsulation } from '@angular/core'; import { ButtonGroupAlignment, IgxButtonGroupComponent, IgxButtonDirective, IgxRippleDirective, IgxLayoutDirective } from 'igniteui-angular'; -import { NgIf } from '@angular/common'; + @Component({ encapsulation: ViewEncapsulation.None, selector: 'app-layout-content-space', styleUrls: ['./layout-content-space.component.scss'], templateUrl: './layout-content-space.component.html', - imports: [IgxButtonGroupComponent, IgxButtonDirective, IgxRippleDirective, NgIf, IgxLayoutDirective] + imports: [IgxButtonGroupComponent, IgxButtonDirective, IgxRippleDirective, IgxLayoutDirective] }) export class LayoutContentSpaceComponent { diff --git a/src/app/layouts/layout/layout-direction-column/layout-direction-column.component.html b/src/app/layouts/layout/layout-direction-column/layout-direction-column.component.html index fc1d2ba396..6dbb27dc16 100644 --- a/src/app/layouts/layout/layout-direction-column/layout-direction-column.component.html +++ b/src/app/layouts/layout/layout-direction-column/layout-direction-column.component.html @@ -1,19 +1,23 @@ - - + + -
+@if (layout === 'column') { +
-
1
-
2
-
3
+
1
+
2
+
3
-
+
+} -
+@if (layout === 'column-reverse') { +
-
1
-
2
-
3
+
1
+
2
+
3
-
+
+} diff --git a/src/app/layouts/layout/layout-direction-column/layout-direction-column.component.ts b/src/app/layouts/layout/layout-direction-column/layout-direction-column.component.ts index 5f6fd876e0..798979101f 100644 --- a/src/app/layouts/layout/layout-direction-column/layout-direction-column.component.ts +++ b/src/app/layouts/layout/layout-direction-column/layout-direction-column.component.ts @@ -1,13 +1,13 @@ import { Component, ViewEncapsulation } from '@angular/core'; import { ButtonGroupAlignment, IgxButtonGroupComponent, IgxButtonDirective, IgxRippleDirective, IgxLayoutDirective, IgxFlexDirective } from 'igniteui-angular'; -import { NgIf } from '@angular/common'; + @Component({ encapsulation: ViewEncapsulation.None, selector: 'app-layout-direction-column', styleUrls: ['./layout-direction-column.component.scss'], templateUrl: './layout-direction-column.component.html', - imports: [IgxButtonGroupComponent, IgxButtonDirective, IgxRippleDirective, NgIf, IgxLayoutDirective, IgxFlexDirective] + imports: [IgxButtonGroupComponent, IgxButtonDirective, IgxRippleDirective, IgxLayoutDirective, IgxFlexDirective] }) export class LayoutDirectionColumnComponent { diff --git a/src/app/layouts/layout/layout-direction-row/layout-direction-row.component.html b/src/app/layouts/layout/layout-direction-row/layout-direction-row.component.html index 0c88c7a3d5..a171e21823 100644 --- a/src/app/layouts/layout/layout-direction-row/layout-direction-row.component.html +++ b/src/app/layouts/layout/layout-direction-row/layout-direction-row.component.html @@ -1,19 +1,23 @@ - - + + -
+@if (layout === 'row') { +
-
1
-
2
-
3
+
1
+
2
+
3
-
+
+} -
+@if (layout === 'row-reverse') { +
-
1
-
2
-
3
+
1
+
2
+
3
-
+
+} diff --git a/src/app/layouts/layout/layout-direction-row/layout-direction-row.component.ts b/src/app/layouts/layout/layout-direction-row/layout-direction-row.component.ts index 099c513202..d03df0f5ab 100644 --- a/src/app/layouts/layout/layout-direction-row/layout-direction-row.component.ts +++ b/src/app/layouts/layout/layout-direction-row/layout-direction-row.component.ts @@ -1,13 +1,13 @@ import { Component, ViewEncapsulation } from '@angular/core'; import { ButtonGroupAlignment, IgxButtonGroupComponent, IgxButtonDirective, IgxRippleDirective, IgxLayoutDirective, IgxFlexDirective } from 'igniteui-angular'; -import { NgIf } from '@angular/common'; + @Component({ encapsulation: ViewEncapsulation.None, selector: 'app-layout-direction-row', styleUrls: ['./layout-direction-row.component.scss'], templateUrl: './layout-direction-row.component.html', - imports: [IgxButtonGroupComponent, IgxButtonDirective, IgxRippleDirective, NgIf, IgxLayoutDirective, IgxFlexDirective] + imports: [IgxButtonGroupComponent, IgxButtonDirective, IgxRippleDirective, IgxLayoutDirective, IgxFlexDirective] }) export class LayoutDirectionRowComponent { diff --git a/src/app/layouts/layout/layout-justify-content/layout-justify-content.component.html b/src/app/layouts/layout/layout-justify-content/layout-justify-content.component.html index b10c23cf01..9bae009f3a 100644 --- a/src/app/layouts/layout/layout-justify-content/layout-justify-content.component.html +++ b/src/app/layouts/layout/layout-justify-content/layout-justify-content.component.html @@ -1,28 +1,34 @@ - - - + + + -
+@if (justifyContent === 'start') { +
-
1
-
2
-
3
+
1
+
2
+
3
-
+
+} -
+@if (justifyContent === 'center') { +
-
1
-
2
-
3
+
1
+
2
+
3
-
+
+} -
+@if (justifyContent === 'end') { +
-
1
-
2
-
3
+
1
+
2
+
3
-
+
+} diff --git a/src/app/layouts/layout/layout-justify-content/layout-justify-content.component.ts b/src/app/layouts/layout/layout-justify-content/layout-justify-content.component.ts index 326d89c949..943f84f35e 100644 --- a/src/app/layouts/layout/layout-justify-content/layout-justify-content.component.ts +++ b/src/app/layouts/layout/layout-justify-content/layout-justify-content.component.ts @@ -1,13 +1,13 @@ import { Component, ViewEncapsulation } from '@angular/core'; import { ButtonGroupAlignment, IgxButtonGroupComponent, IgxButtonDirective, IgxRippleDirective, IgxLayoutDirective } from 'igniteui-angular'; -import { NgIf } from '@angular/common'; + @Component({ encapsulation: ViewEncapsulation.None, selector: 'app-layout-justify-content', styleUrls: ['./layout-justify-content.component.scss'], templateUrl: './layout-justify-content.component.html', - imports: [IgxButtonGroupComponent, IgxButtonDirective, IgxRippleDirective, NgIf, IgxLayoutDirective] + imports: [IgxButtonGroupComponent, IgxButtonDirective, IgxRippleDirective, IgxLayoutDirective] }) export class LayoutJustifyContentComponent { diff --git a/src/app/layouts/stepper/stepper-linear-sample/stepper-linear-sample.component.html b/src/app/layouts/stepper/stepper-linear-sample/stepper-linear-sample.component.html index 415d8816d0..5304b223eb 100644 --- a/src/app/layouts/stepper/stepper-linear-sample/stepper-linear-sample.component.html +++ b/src/app/layouts/stepper/stepper-linear-sample/stepper-linear-sample.component.html @@ -1,101 +1,103 @@
- - + +
- - edit - + + edit + - - Personal Info -
-
- - - - - - - - -
-
- -
-
- + + Personal Info +
+
+ + + + + + + + +
+
+ +
+
+ - - Delivery address -
-
- - - - - - - - -
-
- - -
-
- + + Delivery address +
+
+ + + + + + + + +
+
+ + +
+
+ - - Billing address - (optional) -
-
- - - - - - - - -
-
- - -
-
- + + Billing address + (optional) +
+
+ + + + + + + + +
+
+ + +
+
+ - - Payment -
- - - {{ paymentType }} - - -
- - -
-
- + + Payment +
+ + @for (paymentType of paymentTypes; track paymentType) { + + {{ paymentType }} + + } + +
+ + +
+
+ - - Delivery status -
-

Your order is on its way. Expect delivery on 25th September 2021. Delivery address: San Jose, CA 94243. -

-
- - -
-
- + + Delivery status +
+

Your order is on its way. Expect delivery on 25th September 2021. Delivery address: San Jose, CA 94243. +

+
+ + +
+
+ diff --git a/src/app/layouts/stepper/stepper-linear-sample/stepper-linear-sample.component.ts b/src/app/layouts/stepper/stepper-linear-sample/stepper-linear-sample.component.ts index 31993f3e5e..4f773fb611 100644 --- a/src/app/layouts/stepper/stepper-linear-sample/stepper-linear-sample.component.ts +++ b/src/app/layouts/stepper/stepper-linear-sample/stepper-linear-sample.component.ts @@ -1,13 +1,13 @@ import { Component } from '@angular/core'; import { IButtonGroupEventArgs, IgxButtonGroupComponent, IgxStepperComponent, IgxStepActiveIndicatorDirective, IgxIconComponent, IgxStepComponent, IgxStepTitleDirective, IgxStepContentDirective, IgxInputGroupComponent, IgxInputDirective, IgxLabelDirective, IgxButtonDirective, IgxStepSubtitleDirective, IgxRadioGroupDirective, IgxRadioComponent } from 'igniteui-angular'; import { FormsModule } from '@angular/forms'; -import { NgFor } from '@angular/common'; + @Component({ selector: 'app-stepper-linear-sample', styleUrls: ['./stepper-linear-sample.component.scss'], templateUrl: './stepper-linear-sample.component.html', - imports: [IgxButtonGroupComponent, IgxStepperComponent, IgxStepActiveIndicatorDirective, IgxIconComponent, IgxStepComponent, IgxStepTitleDirective, IgxStepContentDirective, FormsModule, IgxInputGroupComponent, IgxInputDirective, IgxLabelDirective, IgxButtonDirective, IgxStepSubtitleDirective, IgxRadioGroupDirective, NgFor, IgxRadioComponent] + imports: [IgxButtonGroupComponent, IgxStepperComponent, IgxStepActiveIndicatorDirective, IgxIconComponent, IgxStepComponent, IgxStepTitleDirective, IgxStepContentDirective, FormsModule, IgxInputGroupComponent, IgxInputDirective, IgxLabelDirective, IgxButtonDirective, IgxStepSubtitleDirective, IgxRadioGroupDirective, IgxRadioComponent] }) export class StepperLinearSampleComponent { public linear = false; diff --git a/src/app/layouts/stepper/stepper-overview-sample/stepper-overview-sample.component.html b/src/app/layouts/stepper/stepper-overview-sample/stepper-overview-sample.component.html index 6c26c06abc..f885793ab0 100644 --- a/src/app/layouts/stepper/stepper-overview-sample/stepper-overview-sample.component.html +++ b/src/app/layouts/stepper/stepper-overview-sample/stepper-overview-sample.component.html @@ -1,266 +1,283 @@ - - Card Type -
-

Choose your business credit card

-
- - - - - + + Card Type +
+

Choose your business credit card

+
+ @for (card of cards; track card) { + + @if (selectedCard === card) { + + } + + + + + {{card.price}} + {{card.offer}} +

{{card.type}}

+

{{card.description}}

+ + + } +
+
+ - - {{card.price}} - {{card.offer}} -

{{card.type}}

-

{{card.description}}

- - -
-
- - - - Business information -
-
-
- - - - - - - + + Business information +
+
+ + + + + + + + + +
+ + + + + + @for (state of states; track state) { + + {{state}} + + } + + + + + -
- - - - - - - {{state}} - - - - - - - -
- - The mailing address is different than the business physical address - - - - - The Federal Tax ID Number should begin with 9 +
+ + The mailing address is different than the business physical address + + + + @if (!businessInformationForm.controls['taxIdNumber']?.pristine + && !businessInformationForm.controls['taxIdNumber']?.valid) { + + The Federal Tax ID Number should begin with 9 - + } +

Does this business operate outside the United States? *

- - Yes - - - No - + [(ngModel)]="businessInformation.nonUSBusinessActivity" required> + + Yes + + + No + - - - + + @if (selectedCard) { + +
- -
- {{selectedCard.price}} - {{selectedCard.offer}} -

{{selectedCard.type}}

-

{{selectedCard.description}}

-
+ +
+ {{selectedCard.price}} + {{selectedCard.offer}} +

{{selectedCard.type}}

+

{{selectedCard.description}}

+
- - -
-
- - -
-
- + + + } +
+
+ + +
+
+ - - Personal Information -
-
-
+ + Personal Information +
+
+ - + - - + + - - - - - - - - - - - - - - - - I confirm that I am authorized to borrow on behalf of this business. * - -
- - I agree with the* - - Terms and Conditions -
- - - -
- -
- {{selectedCard.price}} - {{selectedCard.offer}} -

{{selectedCard.type}}

-

{{selectedCard.description}}

-
-
- - -
-
- - -
-
-
- - - Shipping Details -
-
-
- - - - - - - - - - - - -
- - - + [(ngModel)]="personalInformation.lastName" required /> + - - - {{state}} - - - - - - -
-
- - -
- -
- {{selectedCard.price}} - {{selectedCard.offer}} -

{{selectedCard.type}}

-

{{selectedCard.description}}

+ + + + + + + + + + + + + I confirm that I am authorized to borrow on behalf of this business. * + +
+ + I agree with the* + + Terms and Conditions
+ + @if (selectedCard) { + + +
+ +
+ {{selectedCard.price}} + {{selectedCard.offer}} +

{{selectedCard.type}}

+

{{selectedCard.description}}

+
+
+ + + }
- - -
-
- - -
-
- - - - Confirmation -
-
-
- check -
-
-

Your application for a business credit card has been sent - successfully!

-

We will contact you within a few days.

-
-
- - - Application date: {{ today | date:'d MMM y' }} -
- -
- {{selectedCard.price}} - {{selectedCard.offer}} -

{{selectedCard.type}}

-

{{selectedCard.description}}

+
+ +
-
- - -
- -
-
- +
+ + + + Shipping Details +
+
+
+ + + + + + + + + + + + +
+ + + + + + @for (state of states; track state) { + + {{state}} + + } + + + + + + +
+
+ @if (selectedCard) { + + +
+ +
+ {{selectedCard.price}} + {{selectedCard.offer}} +

{{selectedCard.type}}

+

{{selectedCard.description}}

+
+
+ + + } +
+
+ + +
+
+ + + + Confirmation +
+
+
+ check +
+
+

Your application for a business credit card has been sent + successfully!

+

We will contact you within a few days.

+
+
+ @if (selectedCard) { + + + Application date: {{ today | date:'d MMM y' }} +
+ +
+ {{selectedCard.price}} + {{selectedCard.offer}} +

{{selectedCard.type}}

+

{{selectedCard.description}}

+
+
+ + + } +
+ +
+
+ - + diff --git a/src/app/layouts/stepper/stepper-overview-sample/stepper-overview-sample.component.ts b/src/app/layouts/stepper/stepper-overview-sample/stepper-overview-sample.component.ts index b8a66caaf1..9c9f182452 100644 --- a/src/app/layouts/stepper/stepper-overview-sample/stepper-overview-sample.component.ts +++ b/src/app/layouts/stepper/stepper-overview-sample/stepper-overview-sample.component.ts @@ -1,13 +1,13 @@ import { ChangeDetectorRef, Component, ViewChild } from '@angular/core'; import { NgForm, FormsModule } from '@angular/forms'; import { IgxStepperComponent, IgxStepComponent, IgxStepTitleDirective, IgxStepContentDirective, IgxCardComponent, IgxCardMediaDirective, IgxCardContentDirective, IgxInputGroupComponent, IgxInputDirective, IgxLabelDirective, IgxSelectComponent, IgxSelectItemComponent, IgxMaskDirective, IgxCheckboxComponent, IgxHintDirective, IgxRadioGroupDirective, IgxRadioComponent, IgxButtonDirective, IgxIconComponent, IgxBadgeComponent } from 'igniteui-angular'; -import { NgFor, NgClass, NgIf, DatePipe } from '@angular/common'; +import { NgClass, DatePipe } from '@angular/common'; @Component({ selector: 'app-stepper-overview-sample', styleUrls: ['./stepper-overview-sample.component.scss'], templateUrl: './stepper-overview-sample.component.html', - imports: [IgxStepperComponent, IgxStepComponent, IgxStepTitleDirective, IgxStepContentDirective, IgxBadgeComponent, NgFor, IgxCardComponent, NgClass, NgIf, IgxCardMediaDirective, IgxCardContentDirective, FormsModule, IgxInputGroupComponent, IgxInputDirective, IgxLabelDirective, IgxSelectComponent, IgxSelectItemComponent, IgxMaskDirective, IgxCheckboxComponent, IgxHintDirective, IgxRadioGroupDirective, IgxRadioComponent, IgxButtonDirective, IgxIconComponent, DatePipe] + imports: [IgxStepperComponent, IgxStepComponent, IgxStepTitleDirective, IgxStepContentDirective, IgxBadgeComponent, IgxCardComponent, NgClass, IgxCardMediaDirective, IgxCardContentDirective, FormsModule, IgxInputGroupComponent, IgxInputDirective, IgxLabelDirective, IgxSelectComponent, IgxSelectItemComponent, IgxMaskDirective, IgxCheckboxComponent, IgxHintDirective, IgxRadioGroupDirective, IgxRadioComponent, IgxButtonDirective, IgxIconComponent, DatePipe] }) export class StepperOverviewSampleComponent { @ViewChild('stepper', { static: true }) diff --git a/src/app/layouts/stepper/stepper-sample-reactive-forms/stepper-sample-reactive-forms.component.html b/src/app/layouts/stepper/stepper-sample-reactive-forms/stepper-sample-reactive-forms.component.html index 93b5c89c8c..91c70d4ce5 100644 --- a/src/app/layouts/stepper/stepper-sample-reactive-forms/stepper-sample-reactive-forms.component.html +++ b/src/app/layouts/stepper/stepper-sample-reactive-forms/stepper-sample-reactive-forms.component.html @@ -1,262 +1,279 @@ - - Card Type -
-

Choose your business credit card

-
- - - - - + + Card Type +
+

Choose your business credit card

+
+ @for (card of cards; track card) { + + @if (selectedCard === card) { + + } + + + + + {{card.price}} + {{card.offer}} +

{{card.type}}

+

{{card.description}}

+ + + } +
+
+ - - {{card.price}} - {{card.offer}} -

{{card.type}}

-

{{card.description}}

- - -
-
- - - - Business information -
-
-
- - - - - - - - -
- - - - - - - {{state}} - - - - - - - -
- - The mailing address is different than the business physical address - - - - - {{errorMessages()}} - - - -

Does this business operate outside the United States? *

- - - Yes - - - No - - + + Business information +
+
+ + + + + + + + + +
+ + + + + + @for (state of states; track state) { + + {{state}} + + } + + + + + + +
+ + The mailing address is different than the business physical address + + + + @if (businessInformation.controls.taxIdNumber.invalid && businessInformation.controls.taxIdNumber.touched) { + + {{errorMessages()}} + + } + + +

Does this business operate outside the United States? *

+ + + Yes + + + No + + - + @if (selectedCard) { + -
- -
- {{selectedCard.price}} - {{selectedCard.offer}} -

{{selectedCard.type}}

-

{{selectedCard.description}}

-
+
+ +
+ {{selectedCard.price}} + {{selectedCard.offer}} +

{{selectedCard.type}}

+

{{selectedCard.description}}

+
- -
-
+ + } +
+
+ [disabled]="!businessInformation.valid">Continue +
-
-
+ - - Personal Information -
-
+ + Personal Information +
+
- - - + + + - - - + + - - - - - - - - - - - - I confirm that I am authorized to borrow on behalf of this business. * - -
- - I agree with the* - - Terms and Conditions -
- - - -
- -
- {{selectedCard.price}} - {{selectedCard.offer}} -

{{selectedCard.type}}

-

{{selectedCard.description}}

-
-
- - -
-
- - -
-
- - - - Shipping Details -
-
-
- - - - - - - - - - - - -
- - - + formControlName="jobTitle" required /> + - - - {{state}} - - - - - - + + + + + + + + + I confirm that I am authorized to borrow on behalf of this business. * + +
+ + I agree with the* + + Terms and Conditions +
+ + @if (selectedCard) { + + +
+ +
+ {{selectedCard.price}} + {{selectedCard.offer}} +

{{selectedCard.type}}

+

{{selectedCard.description}}

+
+
+ + + } +
+
+ + +
- - - -
- -
- {{selectedCard.price}} - {{selectedCard.offer}} -

{{selectedCard.type}}

-

{{selectedCard.description}}

-
-
- - -
-
- - -
-
- + - - Confirmation -
-
-
- check -
-
-

Your application for a business credit card has been sent - successfully!

-

We will contact you within a few days.

-
-
- - - Application date: {{ today | date:'d MMM y' }} -
- -
- {{selectedCard.price}} - {{selectedCard.offer}} -

{{selectedCard.type}}

-

{{selectedCard.description}}

-
-
- - -
- -
-
- + + Shipping Details +
+
+
+ + + + + + + + + + + + +
+ + + + + + @for (state of states; track state) { + + {{state}} + + } + + + + + + +
+
+ @if (selectedCard) { + + +
+ +
+ {{selectedCard.price}} + {{selectedCard.offer}} +

{{selectedCard.type}}

+

{{selectedCard.description}}

+
+
+ + + } +
+
+ + +
+
+ + + + Confirmation +
+
+
+ check +
+
+

Your application for a business credit card has been sent + successfully!

+

We will contact you within a few days.

+
+
+ @if (selectedCard) { + + + Application date: {{ today | date:'d MMM y' }} +
+ +
+ {{selectedCard.price}} + {{selectedCard.offer}} +

{{selectedCard.type}}

+

{{selectedCard.description}}

+
+
+ + + } +
+ +
+
+ - + diff --git a/src/app/layouts/stepper/stepper-sample-reactive-forms/stepper-sample-reactive-forms.component.ts b/src/app/layouts/stepper/stepper-sample-reactive-forms/stepper-sample-reactive-forms.component.ts index 65a6e97645..6e8dcc70b8 100644 --- a/src/app/layouts/stepper/stepper-sample-reactive-forms/stepper-sample-reactive-forms.component.ts +++ b/src/app/layouts/stepper/stepper-sample-reactive-forms/stepper-sample-reactive-forms.component.ts @@ -1,7 +1,7 @@ import { ChangeDetectorRef, Component, ViewChild } from '@angular/core'; import { FormControl, FormGroup, Validators, FormsModule, ReactiveFormsModule } from '@angular/forms'; import { IgxStepperComponent, IgxStepComponent, IgxStepTitleDirective, IgxStepContentDirective, IgxCardComponent, IgxCardMediaDirective, IgxCardContentDirective, IgxInputGroupComponent, IgxInputDirective, IgxLabelDirective, IgxSelectComponent, IgxSelectItemComponent, IgxMaskDirective, IgxCheckboxComponent, IgxHintDirective, IgxRadioGroupDirective, IgxRadioComponent, IgxButtonDirective, IgxIconComponent, IgxBadgeComponent } from 'igniteui-angular'; -import { NgFor, NgClass, NgIf, DatePipe } from '@angular/common'; +import { NgClass, DatePipe } from '@angular/common'; export interface BusinessInformation{ name: FormControl, @@ -37,7 +37,7 @@ export interface ShippingDetails{ selector: 'app-stepper-sample-reactive-forms', styleUrls: ['./stepper-sample-reactive-forms.component.scss'], templateUrl: './stepper-sample-reactive-forms.component.html', - imports: [IgxStepperComponent, IgxStepComponent, IgxStepTitleDirective, IgxStepContentDirective, IgxBadgeComponent, NgFor, IgxCardComponent, NgClass, NgIf, IgxCardMediaDirective, IgxCardContentDirective, FormsModule, ReactiveFormsModule, IgxInputGroupComponent, IgxInputDirective, IgxLabelDirective, IgxSelectComponent, IgxSelectItemComponent, IgxMaskDirective, IgxCheckboxComponent, IgxHintDirective, IgxRadioGroupDirective, IgxRadioComponent, IgxButtonDirective, IgxIconComponent, DatePipe] + imports: [IgxStepperComponent, IgxStepComponent, IgxStepTitleDirective, IgxStepContentDirective, IgxBadgeComponent, IgxCardComponent, NgClass, IgxCardMediaDirective, IgxCardContentDirective, FormsModule, ReactiveFormsModule, IgxInputGroupComponent, IgxInputDirective, IgxLabelDirective, IgxSelectComponent, IgxSelectItemComponent, IgxMaskDirective, IgxCheckboxComponent, IgxHintDirective, IgxRadioGroupDirective, IgxRadioComponent, IgxButtonDirective, IgxIconComponent, DatePipe] }) export class StepperSampleReactiveFormsComponent { @ViewChild('stepper', { static: true }) diff --git a/src/app/layouts/tabbar/tabbar-sample-2/tabbar-sample-2.component.html b/src/app/layouts/tabbar/tabbar-sample-2/tabbar-sample-2.component.html index 437e0508a7..73f426c334 100644 --- a/src/app/layouts/tabbar/tabbar-sample-2/tabbar-sample-2.component.html +++ b/src/app/layouts/tabbar/tabbar-sample-2/tabbar-sample-2.component.html @@ -1,38 +1,44 @@ - - - library_music - Songs - - -
- {{song.title}}
- {{song.artist}} -
- - - - - video_library - Movies - - -
- {{movie.title}}
- {{movie.genre}} -
- - - - - library_books - Books - - -
- {{book.title}}
- {{book.author}} -
- - + + + library_music + Songs + + + @for (song of songsList; track song) { +
+ {{song.title}}
+ {{song.artist}} +
+ } + + + + + video_library + Movies + + + @for (movie of moviesList; track movie) { +
+ {{movie.title}}
+ {{movie.genre}} +
+ } + + + + + library_books + Books + + + @for (book of booksList; track book) { +
+ {{book.title}}
+ {{book.author}} +
+ } + + diff --git a/src/app/layouts/tabbar/tabbar-sample-2/tabbar-sample-2.component.ts b/src/app/layouts/tabbar/tabbar-sample-2/tabbar-sample-2.component.ts index a72ccfe59b..374320ca46 100644 --- a/src/app/layouts/tabbar/tabbar-sample-2/tabbar-sample-2.component.ts +++ b/src/app/layouts/tabbar/tabbar-sample-2/tabbar-sample-2.component.ts @@ -1,13 +1,13 @@ /* eslint-disable @typescript-eslint/quotes */ import { Component } from "@angular/core"; import { IgxBottomNavComponent, IgxBottomNavItemComponent, IgxBottomNavHeaderComponent, IgxIconComponent, IgxBottomNavHeaderIconDirective, IgxBottomNavHeaderLabelDirective, IgxBottomNavContentComponent } from "igniteui-angular"; -import { NgFor } from "@angular/common"; + @Component({ selector: "app-tabbar-sample-2", styleUrls: ["./tabbar-sample-2.component.scss"], templateUrl: "./tabbar-sample-2.component.html", - imports: [IgxBottomNavComponent, IgxBottomNavItemComponent, IgxBottomNavHeaderComponent, IgxIconComponent, IgxBottomNavHeaderIconDirective, IgxBottomNavHeaderLabelDirective, IgxBottomNavContentComponent, NgFor] + imports: [IgxBottomNavComponent, IgxBottomNavItemComponent, IgxBottomNavHeaderComponent, IgxIconComponent, IgxBottomNavHeaderIconDirective, IgxBottomNavHeaderLabelDirective, IgxBottomNavContentComponent] }) export class TabbarSample2Component { diff --git a/src/app/layouts/tabbar/tabbar-style/tabbar-style.component.html b/src/app/layouts/tabbar/tabbar-style/tabbar-style.component.html index 3db6e9320b..73f426c334 100644 --- a/src/app/layouts/tabbar/tabbar-style/tabbar-style.component.html +++ b/src/app/layouts/tabbar/tabbar-style/tabbar-style.component.html @@ -1,38 +1,44 @@ - - - library_music - Songs - - -
- {{song.title}}
- {{song.artist}} -
- - - - - video_library - Movies - - -
- {{movie.title}}
- {{movie.genre}} -
- - - - - library_books - Books - - -
- {{book.title}}
- {{book.author}} -
- - - + + + library_music + Songs + + + @for (song of songsList; track song) { +
+ {{song.title}}
+ {{song.artist}} +
+ } + + + + + video_library + Movies + + + @for (movie of moviesList; track movie) { +
+ {{movie.title}}
+ {{movie.genre}} +
+ } + + + + + library_books + Books + + + @for (book of booksList; track book) { +
+ {{book.title}}
+ {{book.author}} +
+ } + + + diff --git a/src/app/layouts/tabbar/tabbar-style/tabbar-style.component.ts b/src/app/layouts/tabbar/tabbar-style/tabbar-style.component.ts index aec760ef55..690d1c3c47 100644 --- a/src/app/layouts/tabbar/tabbar-style/tabbar-style.component.ts +++ b/src/app/layouts/tabbar/tabbar-style/tabbar-style.component.ts @@ -1,13 +1,13 @@ /* eslint-disable @typescript-eslint/quotes */ import { Component, OnInit } from "@angular/core"; import { IgxBottomNavComponent, IgxBottomNavItemComponent, IgxBottomNavHeaderComponent, IgxIconComponent, IgxBottomNavHeaderIconDirective, IgxBottomNavHeaderLabelDirective, IgxBottomNavContentComponent } from "igniteui-angular"; -import { NgFor } from "@angular/common"; + @Component({ selector: "app-tabbar-style", styleUrls: ["./tabbar-style.component.scss"], templateUrl: "./tabbar-style.component.html", - imports: [IgxBottomNavComponent, IgxBottomNavItemComponent, IgxBottomNavHeaderComponent, IgxIconComponent, IgxBottomNavHeaderIconDirective, IgxBottomNavHeaderLabelDirective, IgxBottomNavContentComponent, NgFor] + imports: [IgxBottomNavComponent, IgxBottomNavItemComponent, IgxBottomNavHeaderComponent, IgxIconComponent, IgxBottomNavHeaderIconDirective, IgxBottomNavHeaderLabelDirective, IgxBottomNavContentComponent] }) export class TabbarStyleComponent { public songsList = [ diff --git a/src/app/layouts/tabs/tabs-header-prefix-suffix/tabs-header-prefix-suffix.html b/src/app/layouts/tabs/tabs-header-prefix-suffix/tabs-header-prefix-suffix.html index b5f89de4f9..80688125ac 100644 --- a/src/app/layouts/tabs/tabs-header-prefix-suffix/tabs-header-prefix-suffix.html +++ b/src/app/layouts/tabs/tabs-header-prefix-suffix/tabs-header-prefix-suffix.html @@ -1,14 +1,16 @@ - - - -
{{item.header}}
- - - - {{item.content}} - + @for (item of tabs; track item; let i = $index) { + + + +
{{item.header}}
+ + + + {{item.content}} + + } diff --git a/src/app/layouts/tabs/tabs-header-prefix-suffix/tabs-header-prefix-suffix.ts b/src/app/layouts/tabs/tabs-header-prefix-suffix/tabs-header-prefix-suffix.ts index 162bf65db7..00fa8019f6 100644 --- a/src/app/layouts/tabs/tabs-header-prefix-suffix/tabs-header-prefix-suffix.ts +++ b/src/app/layouts/tabs/tabs-header-prefix-suffix/tabs-header-prefix-suffix.ts @@ -1,11 +1,11 @@ import { Component } from '@angular/core'; import { IgxTabsComponent, IgxTabItemComponent, IgxTabHeaderComponent, IgxPrefixDirective, IgxIconButtonDirective, IgxSuffixDirective, IgxIconComponent, IgxTabContentComponent } from 'igniteui-angular'; -import { NgFor } from '@angular/common'; + @Component({ selector: 'app-tabs-header-prefix-suffix', templateUrl: './tabs-header-prefix-suffix.html', - imports: [IgxTabsComponent, NgFor, IgxTabItemComponent, IgxTabHeaderComponent, IgxPrefixDirective, IgxIconButtonDirective, IgxSuffixDirective, IgxIconComponent, IgxTabContentComponent] + imports: [IgxTabsComponent, IgxTabItemComponent, IgxTabHeaderComponent, IgxPrefixDirective, IgxIconButtonDirective, IgxSuffixDirective, IgxIconComponent, IgxTabContentComponent] }) export class TabsHeaderPrefixSuffixComponent { public tabs = [{ diff --git a/src/app/lists/combo/combo-binding/combo-binding.component.html b/src/app/lists/combo/combo-binding/combo-binding.component.html index 3227f7219a..71938b1842 100644 --- a/src/app/lists/combo/combo-binding/combo-binding.component.html +++ b/src/app/lists/combo/combo-binding/combo-binding.component.html @@ -1,19 +1,21 @@
-
- - - -
-
Selected Cities:
-
- - -
{{ city.name }}
-
{{ city.country }}
- {{ city.id }} - - -
+
+ + + +
+
Selected Cities:
+
+ @for (city of selectedNoValueKey; track city) { + + +
{{ city.name }}
+
{{ city.country }}
+ {{ city.id }} + + + } +
diff --git a/src/app/lists/combo/combo-binding/combo-binding.component.ts b/src/app/lists/combo/combo-binding/combo-binding.component.ts index d19180ef78..514f4209f5 100644 --- a/src/app/lists/combo/combo-binding/combo-binding.component.ts +++ b/src/app/lists/combo/combo-binding/combo-binding.component.ts @@ -2,13 +2,13 @@ import { Component, ViewChild } from '@angular/core'; import { IgxComboComponent, IgxButtonDirective, IgxCardComponent, IgxCardHeaderComponent, IgxCardHeaderTitleDirective, IgxCardHeaderSubtitleDirective } from 'igniteui-angular'; import { CITIES, ICity } from './cities'; import { FormsModule } from '@angular/forms'; -import { NgFor } from '@angular/common'; + @Component({ selector: 'app-combo-binding', templateUrl: 'combo-binding.component.html', styleUrls: ['combo-binding.component.scss'], - imports: [IgxComboComponent, FormsModule, IgxButtonDirective, NgFor, IgxCardComponent, IgxCardHeaderComponent, IgxCardHeaderTitleDirective, IgxCardHeaderSubtitleDirective] + imports: [IgxComboComponent, FormsModule, IgxButtonDirective, IgxCardComponent, IgxCardHeaderComponent, IgxCardHeaderTitleDirective, IgxCardHeaderSubtitleDirective] }) export class ComboBindingComponent { @ViewChild('noValueKey', { read: IgxComboComponent }) diff --git a/src/app/lists/combo/simple-combo-cascading/simple-combo-cascading.component.html b/src/app/lists/combo/simple-combo-cascading/simple-combo-cascading.component.html index 3752b81e61..195e2816d4 100644 --- a/src/app/lists/combo/simple-combo-cascading/simple-combo-cascading.component.html +++ b/src/app/lists/combo/simple-combo-cascading/simple-combo-cascading.component.html @@ -1,40 +1,42 @@
-
- - -
-
- - - - -
-
- - - - -
+
+ + +
+
+ + + @if (isLoadingRegions) { + + + } +
+
+ + + @if (isLoadingCities) { + + + } +
diff --git a/src/app/lists/combo/simple-combo-cascading/simple-combo-cascading.component.ts b/src/app/lists/combo/simple-combo-cascading/simple-combo-cascading.component.ts index 980d291dbb..537461f08e 100644 --- a/src/app/lists/combo/simple-combo-cascading/simple-combo-cascading.component.ts +++ b/src/app/lists/combo/simple-combo-cascading/simple-combo-cascading.component.ts @@ -2,13 +2,13 @@ import { Component, OnInit } from '@angular/core'; import { ISimpleComboSelectionChangingEventArgs, IgxSimpleComboComponent, IgxLinearProgressBarComponent } from 'igniteui-angular'; import { City, Country, getCitiesByCountry, getCountries, Region } from '../../../data/cities15000-regions-countries'; import { FormsModule } from '@angular/forms'; -import { NgIf } from '@angular/common'; + @Component({ selector: 'app-simple-combo-cascading', templateUrl: 'simple-combo-cascading.component.html', styleUrls: ['simple-combo-cascading.component.scss'], - imports: [IgxSimpleComboComponent, FormsModule, NgIf, IgxLinearProgressBarComponent] + imports: [IgxSimpleComboComponent, FormsModule, IgxLinearProgressBarComponent] }) export class SimpleComboCascadingComponent implements OnInit { public selectedCountry: Country; diff --git a/src/app/lists/combo/simple-combo-main/simple-combo-main.component.html b/src/app/lists/combo/simple-combo-main/simple-combo-main.component.html index cd27577c6f..5aabfc2d6a 100644 --- a/src/app/lists/combo/simple-combo-main/simple-combo-main.component.html +++ b/src/app/lists/combo/simple-combo-main/simple-combo-main.component.html @@ -1,26 +1,27 @@
-
- - - - -
- +
+ + + @for (range of ranges; track range) { + + } + +
+
diff --git a/src/app/lists/combo/simple-combo-main/simple-combo-main.component.ts b/src/app/lists/combo/simple-combo-main/simple-combo-main.component.ts index 8cba50bc94..f05dc93c64 100644 --- a/src/app/lists/combo/simple-combo-main/simple-combo-main.component.ts +++ b/src/app/lists/combo/simple-combo-main/simple-combo-main.component.ts @@ -3,14 +3,14 @@ import { IgRect } from 'igniteui-angular-core'; import { StockData, updatedStockData } from '../../../data/stocks-data'; import { IgxSimpleComboComponent, IgxButtonGroupComponent, IgxButtonDirective } from 'igniteui-angular'; import { FormsModule } from '@angular/forms'; -import { NgFor } from '@angular/common'; + import { IgxFinancialChartCoreModule } from 'igniteui-angular-charts'; @Component({ selector: 'app-simple-combo-main', templateUrl: 'simple-combo-main.component.html', styleUrls: ['simple-combo-main.component.scss'], - imports: [IgxSimpleComboComponent, FormsModule, IgxButtonGroupComponent, NgFor, IgxButtonDirective, IgxFinancialChartCoreModule] + imports: [IgxSimpleComboComponent, FormsModule, IgxButtonGroupComponent, IgxButtonDirective, IgxFinancialChartCoreModule] }) export class SimpleComboMainComponent implements OnInit { public data: StockData[] = updatedStockData; diff --git a/src/app/lists/combo/simple-combo-usage/simple-combo-usage.component.html b/src/app/lists/combo/simple-combo-usage/simple-combo-usage.component.html index 1236fe8a4a..0e722240a3 100644 --- a/src/app/lists/combo/simple-combo-usage/simple-combo-usage.component.html +++ b/src/app/lists/combo/simple-combo-usage/simple-combo-usage.component.html @@ -1,10 +1,12 @@
-
- - -
-
-
Selected City's Id:
-
{{ selectedCity }}
+
+ + +
+ @if (!!selectedCity) { +
+
Selected City's Id:
+
{{ selectedCity }}
+ }
diff --git a/src/app/lists/combo/simple-combo-usage/simple-combo-usage.component.ts b/src/app/lists/combo/simple-combo-usage/simple-combo-usage.component.ts index b274551287..db823d253f 100644 --- a/src/app/lists/combo/simple-combo-usage/simple-combo-usage.component.ts +++ b/src/app/lists/combo/simple-combo-usage/simple-combo-usage.component.ts @@ -2,13 +2,13 @@ import { Component, OnInit } from '@angular/core'; import { City, getCitiesByPopulation } from '../../../data/cities15000-regions-countries'; import { IgxSimpleComboComponent } from 'igniteui-angular'; import { FormsModule } from '@angular/forms'; -import { NgIf } from '@angular/common'; + @Component({ selector: 'app-simple-combo-usage', templateUrl: 'simple-combo-usage.component.html', styleUrls: ['simple-combo-usage.component.scss'], - imports: [IgxSimpleComboComponent, FormsModule, NgIf] + imports: [IgxSimpleComboComponent, FormsModule] }) export class SimpleComboUsageComponent implements OnInit { public cities: City[]; diff --git a/src/app/lists/list/list-chat-sample/list-chat-sample.component.html b/src/app/lists/list/list-chat-sample/list-chat-sample.component.html index a5dbf0c4f9..ed6503556c 100644 --- a/src/app/lists/list/list-chat-sample/list-chat-sample.component.html +++ b/src/app/lists/list/list-chat-sample/list-chat-sample.component.html @@ -1,65 +1,67 @@
- - - -
- -
-
{{ contact.name }}
- - {{ message.timestamp | date: "shortTime" }} - -
-
- - -
+ + @if (isFirstMessage(messageIndex)) { + +
+ +
+
{{ contact.name }}
+ + {{ message.timestamp | date: "shortTime" }} + +
+
+ + } + +
- {{ message.message }} -
- - - - -
-
You
- - {{ message.timestamp | date: "shortTime" }} - -
- - -
+ {{ message.message }} +
+ + + + @if (isFirstMessage(messageIndex)) { + +
+
You
+ + {{ message.timestamp | date: "shortTime" }} + +
+ + } + +
- - {{ message.message }} - -
- - + > + + {{ message.message }} + +
+ + - - - - - + > + + } + -
+
-
- - +
+ + - - -
+ + +
diff --git a/src/app/lists/list/list-chat-sample/list-chat-sample.component.ts b/src/app/lists/list/list-chat-sample/list-chat-sample.component.ts index 6683676044..3a89b442b3 100644 --- a/src/app/lists/list/list-chat-sample/list-chat-sample.component.ts +++ b/src/app/lists/list/list-chat-sample/list-chat-sample.component.ts @@ -10,14 +10,14 @@ import { ContactsService } from './services/contacts.service'; import { IMessage, MessagesService } from './services/messages.service'; import { FormsModule } from '@angular/forms'; import { IgxListComponent, IgxListItemComponent, IgxAvatarComponent, IgxInputGroupComponent, IgxInputDirective, IgxSuffixDirective, IgxIconButtonDirective, IgxIconComponent } from 'igniteui-angular'; -import { NgIf, NgClass, NgFor, NgTemplateOutlet, DatePipe } from '@angular/common'; +import { NgClass, NgTemplateOutlet, DatePipe } from '@angular/common'; @Component({ encapsulation: ViewEncapsulation.None, selector: 'app-list-chat-sample', styleUrls: ['./list-chat-sample.component.scss'], templateUrl: './list-chat-sample.component.html', - imports: [FormsModule, IgxListComponent, NgIf, IgxListItemComponent, IgxAvatarComponent, NgClass, NgFor, NgTemplateOutlet, IgxInputGroupComponent, IgxInputDirective, IgxSuffixDirective, IgxIconButtonDirective, IgxIconComponent, DatePipe] + imports: [FormsModule, IgxListComponent, IgxListItemComponent, IgxAvatarComponent, NgClass, NgTemplateOutlet, IgxInputGroupComponent, IgxInputDirective, IgxSuffixDirective, IgxIconButtonDirective, IgxIconComponent, DatePipe] }) export class ListChatSampleComponent implements AfterViewInit { @ViewChild('form', { static: true }) diff --git a/src/app/lists/list/list-item-selection/list-item-selection.component.html b/src/app/lists/list/list-item-selection/list-item-selection.component.html index 39d57b036e..6044bd3206 100644 --- a/src/app/lists/list/list-item-selection/list-item-selection.component.html +++ b/src/app/lists/list/list-item-selection/list-item-selection.component.html @@ -1,24 +1,28 @@ - - search - - - - clear + + search + + + @if (search.value.length > 0) { + + clear + }
- - Contacts - - - {{ contact.name }} - {{ contact.phone }} - star - - + + Contacts + @for (contact of contacts | igxFilter: filterContacts; track contact) { + + + {{ contact.name }} + {{ contact.phone }} + star + + } +
diff --git a/src/app/lists/list/list-item-selection/list-item-selection.component.ts b/src/app/lists/list/list-item-selection/list-item-selection.component.ts index b339608b8b..02700c2c85 100644 --- a/src/app/lists/list/list-item-selection/list-item-selection.component.ts +++ b/src/app/lists/list/list-item-selection/list-item-selection.component.ts @@ -1,13 +1,13 @@ import { Component } from '@angular/core'; import { IgxFilterOptions, IgxInputGroupComponent, IgxPrefixDirective, IgxIconComponent, IgxInputDirective, IgxSuffixDirective, IgxListComponent, IgxListItemComponent, IgxAvatarComponent, IgxListThumbnailDirective, IgxListLineTitleDirective, IgxListLineSubTitleDirective, IgxListActionDirective, IgxRippleDirective, IgxFilterPipe } from 'igniteui-angular'; import { FormsModule } from '@angular/forms'; -import { NgIf, NgFor, NgClass } from '@angular/common'; +import { NgClass } from '@angular/common'; @Component({ selector: 'app-list-item-selection', templateUrl: './list-item-selection.component.html', styleUrls: ['./list-item-selection.component.scss'], - imports: [IgxInputGroupComponent, IgxPrefixDirective, IgxIconComponent, FormsModule, IgxInputDirective, NgIf, IgxSuffixDirective, IgxListComponent, IgxListItemComponent, NgFor, NgClass, IgxAvatarComponent, IgxListThumbnailDirective, IgxListLineTitleDirective, IgxListLineSubTitleDirective, IgxListActionDirective, IgxRippleDirective, IgxFilterPipe] + imports: [IgxInputGroupComponent, IgxPrefixDirective, IgxIconComponent, FormsModule, IgxInputDirective, IgxSuffixDirective, IgxListComponent, IgxListItemComponent, NgClass, IgxAvatarComponent, IgxListThumbnailDirective, IgxListLineTitleDirective, IgxListLineSubTitleDirective, IgxListActionDirective, IgxRippleDirective, IgxFilterPipe] }) export class ListItemSelectionComponent { public searchContact: string; diff --git a/src/app/lists/list/list-sample-1/list-sample-1.component.html b/src/app/lists/list/list-sample-1/list-sample-1.component.html index cf16d115ed..16eaa78dbd 100644 --- a/src/app/lists/list/list-sample-1/list-sample-1.component.html +++ b/src/app/lists/list/list-sample-1/list-sample-1.component.html @@ -1,6 +1,8 @@ -

{{emptyListMsg}}

+

{{emptyListMsg}}

 - {{item.name}} + @for (item of listItems; track item) { + {{item.name}} + } diff --git a/src/app/lists/list/list-sample-1/list-sample-1.component.ts b/src/app/lists/list/list-sample-1/list-sample-1.component.ts index c2a4a62aca..5e8c2dc4c2 100644 --- a/src/app/lists/list/list-sample-1/list-sample-1.component.ts +++ b/src/app/lists/list/list-sample-1/list-sample-1.component.ts @@ -1,12 +1,12 @@ import { Component, ElementRef, ViewChild } from '@angular/core'; import { IgxListComponent, IgxEmptyListTemplateDirective, IgxListItemComponent } from 'igniteui-angular'; -import { NgFor } from '@angular/common'; + @Component({ selector: 'app-igx-list-demo', styleUrls: ['./list-sample-1.component.scss'], templateUrl: './list-sample-1.component.html', - imports: [IgxListComponent, IgxEmptyListTemplateDirective, NgFor, IgxListItemComponent] + imports: [IgxListComponent, IgxEmptyListTemplateDirective, IgxListItemComponent] }) export class ListSample1Component { @ViewChild('itemInput') public newItem: ElementRef; diff --git a/src/app/lists/list/list-sample-3/list-sample-3.component.html b/src/app/lists/list/list-sample-3/list-sample-3.component.html index edb6089f94..8f87040f1f 100644 --- a/src/app/lists/list/list-sample-3/list-sample-3.component.html +++ b/src/app/lists/list/list-sample-3/list-sample-3.component.html @@ -2,8 +2,10 @@ Contacts - - {{ contact.name }} - {{contact.phone}} - + @for (contact of contacts; track contact) { + + {{ contact.name }} + {{contact.phone}} + + } diff --git a/src/app/lists/list/list-sample-3/list-sample-3.component.ts b/src/app/lists/list/list-sample-3/list-sample-3.component.ts index ea5d3037bb..0b09b4551c 100644 --- a/src/app/lists/list/list-sample-3/list-sample-3.component.ts +++ b/src/app/lists/list/list-sample-3/list-sample-3.component.ts @@ -1,11 +1,11 @@ import { Component } from '@angular/core'; import { IgxListComponent, IgxListItemComponent, IgxRippleDirective, IgxListLineTitleDirective, IgxListLineSubTitleDirective } from 'igniteui-angular'; -import { NgFor } from '@angular/common'; + @Component({ selector: 'app-contact-list', styleUrls: ['./list-sample-3.component.scss'], templateUrl: './list-sample-3.component.html', - imports: [IgxListComponent, IgxListItemComponent, NgFor, IgxRippleDirective, IgxListLineTitleDirective, IgxListLineSubTitleDirective] + imports: [IgxListComponent, IgxListItemComponent, IgxRippleDirective, IgxListLineTitleDirective, IgxListLineSubTitleDirective] }) export class ListSample3Component { public contacts = [ diff --git a/src/app/lists/list/list-sample-4/list-sample-4.component.html b/src/app/lists/list/list-sample-4/list-sample-4.component.html index 6dce3afefe..4691a0d2ac 100644 --- a/src/app/lists/list/list-sample-4/list-sample-4.component.html +++ b/src/app/lists/list/list-sample-4/list-sample-4.component.html @@ -1,28 +1,32 @@
- +
- - search - - - - clear + + search + + + @if (search.value.length > 0) { + + clear + }
- - Contacts - - - {{ contact.name }} - {{ contact.phone }} - star - - + + Contacts + @for (contact of contacts | igxFilter: filterContacts; track contact) { + + + {{ contact.name }} + {{ contact.phone }} + star + + } +
diff --git a/src/app/lists/list/list-sample-4/list-sample-4.component.ts b/src/app/lists/list/list-sample-4/list-sample-4.component.ts index c98db575e4..cab41c5c7c 100644 --- a/src/app/lists/list/list-sample-4/list-sample-4.component.ts +++ b/src/app/lists/list/list-sample-4/list-sample-4.component.ts @@ -1,12 +1,12 @@ import { Component, HostBinding, OnInit } from '@angular/core'; import { IgxFilterOptions, IgxButtonGroupComponent, IgxInputGroupComponent, IgxPrefixDirective, IgxIconComponent, IgxInputDirective, IgxSuffixDirective, IgxListComponent, IgxListItemComponent, IgxRippleDirective, IgxAvatarComponent, IgxListThumbnailDirective, IgxListLineTitleDirective, IgxListLineSubTitleDirective, IgxListActionDirective, IgxFilterPipe } from 'igniteui-angular'; import { FormsModule } from '@angular/forms'; -import { NgIf, NgFor } from '@angular/common'; + @Component({ selector: 'app-contact-list2', styleUrls: ['./list-sample-4.component.scss'], templateUrl: './list-sample-4.component.html', - imports: [IgxButtonGroupComponent, IgxInputGroupComponent, IgxPrefixDirective, IgxIconComponent, FormsModule, IgxInputDirective, NgIf, IgxSuffixDirective, IgxListComponent, IgxListItemComponent, NgFor, IgxRippleDirective, IgxAvatarComponent, IgxListThumbnailDirective, IgxListLineTitleDirective, IgxListLineSubTitleDirective, IgxListActionDirective, IgxFilterPipe] + imports: [IgxButtonGroupComponent, IgxInputGroupComponent, IgxPrefixDirective, IgxIconComponent, FormsModule, IgxInputDirective, IgxSuffixDirective, IgxListComponent, IgxListItemComponent, IgxRippleDirective, IgxAvatarComponent, IgxListThumbnailDirective, IgxListLineTitleDirective, IgxListLineSubTitleDirective, IgxListActionDirective, IgxFilterPipe] }) export class ListSample4Component implements OnInit { public searchContact: string; diff --git a/src/app/lists/list/list-sample-6/list-sample-6.component.html b/src/app/lists/list/list-sample-6/list-sample-6.component.html index a6eddde086..765ea9d2e8 100644 --- a/src/app/lists/list/list-sample-6/list-sample-6.component.html +++ b/src/app/lists/list/list-sample-6/list-sample-6.component.html @@ -1,11 +1,13 @@ - - {{ fruit }} + @for (fruit of fruitsData; track fruit) { + + {{ fruit }} - -
- - -
Patience, we are currently loading your data...
- + } + +
+ + +
Patience, we are currently loading your data...
+ diff --git a/src/app/lists/list/list-sample-6/list-sample-6.component.ts b/src/app/lists/list/list-sample-6/list-sample-6.component.ts index 55d12b3628..c90e7bc58a 100644 --- a/src/app/lists/list/list-sample-6/list-sample-6.component.ts +++ b/src/app/lists/list/list-sample-6/list-sample-6.component.ts @@ -1,12 +1,12 @@ import { Component, ViewChild } from '@angular/core'; import { IgxListComponent, IgxListItemComponent, IgxRippleDirective, IgxEmptyListTemplateDirective, IgxButtonDirective, IgxDataLoadingTemplateDirective } from 'igniteui-angular'; -import { NgFor } from '@angular/common'; + @Component({ selector: 'app-list-sample-6', styleUrls: ['./list-sample-6.component.scss'], templateUrl: './list-sample-6.component.html', - imports: [IgxListComponent, NgFor, IgxListItemComponent, IgxRippleDirective, IgxEmptyListTemplateDirective, IgxButtonDirective, IgxDataLoadingTemplateDirective] + imports: [IgxListComponent, IgxListItemComponent, IgxRippleDirective, IgxEmptyListTemplateDirective, IgxButtonDirective, IgxDataLoadingTemplateDirective] }) export class ListSample6Component { diff --git a/src/app/lists/list/list-sample-7/list-sample-7.component.html b/src/app/lists/list/list-sample-7/list-sample-7.component.html index b61eea8699..898a5ed560 100644 --- a/src/app/lists/list/list-sample-7/list-sample-7.component.html +++ b/src/app/lists/list/list-sample-7/list-sample-7.component.html @@ -1,34 +1,36 @@
- - + +
- - -
- deleteDelete -
- - -
- callDial -
- - Contacts - - - {{ contact.name }} - {{ contact.phone }} - star - - - + + +
+ deleteDelete +
+ + +
+ callDial +
+ + Contacts + @for (contact of contacts; track contact) { + + + {{ contact.name }} + {{ contact.phone }} + star + + } + +
diff --git a/src/app/lists/list/list-sample-7/list-sample-7.component.ts b/src/app/lists/list/list-sample-7/list-sample-7.component.ts index d76238c98d..a78ee2c8c1 100644 --- a/src/app/lists/list/list-sample-7/list-sample-7.component.ts +++ b/src/app/lists/list/list-sample-7/list-sample-7.component.ts @@ -2,13 +2,13 @@ import { Component, OnInit, ViewChild } from '@angular/core'; import { IgxListComponent, IgxToastComponent, IgxSliderComponent, IgxListItemLeftPanningTemplateDirective, IgxIconComponent, IgxListItemRightPanningTemplateDirective, IgxListItemComponent, IgxRippleDirective, IgxAvatarComponent, IgxListThumbnailDirective, IgxListLineTitleDirective, IgxListLineSubTitleDirective, IgxListActionDirective, IgxButtonDirective } from 'igniteui-angular'; import { FormsModule } from '@angular/forms'; -import { NgFor } from '@angular/common'; + @Component({ selector: 'app-contact-list2', styleUrls: ['./list-sample-7.component.scss'], templateUrl: './list-sample-7.component.html', - imports: [IgxSliderComponent, FormsModule, IgxListComponent, IgxListItemLeftPanningTemplateDirective, IgxIconComponent, IgxListItemRightPanningTemplateDirective, IgxListItemComponent, NgFor, IgxRippleDirective, IgxAvatarComponent, IgxListThumbnailDirective, IgxListLineTitleDirective, IgxListLineSubTitleDirective, IgxListActionDirective, IgxToastComponent, IgxButtonDirective] + imports: [IgxSliderComponent, FormsModule, IgxListComponent, IgxListItemLeftPanningTemplateDirective, IgxIconComponent, IgxListItemRightPanningTemplateDirective, IgxListItemComponent, IgxRippleDirective, IgxAvatarComponent, IgxListThumbnailDirective, IgxListLineTitleDirective, IgxListLineSubTitleDirective, IgxListActionDirective, IgxToastComponent, IgxButtonDirective] }) export class ListSample7Component implements OnInit { @ViewChild('toast', { static: true }) diff --git a/src/app/lists/list/list-sample-8/list-sample-8.component.html b/src/app/lists/list/list-sample-8/list-sample-8.component.html index 3422b339a0..68d6eeb84f 100644 --- a/src/app/lists/list/list-sample-8/list-sample-8.component.html +++ b/src/app/lists/list/list-sample-8/list-sample-8.component.html @@ -1,13 +1,15 @@
- - Contacts - - - {{ contact.name }} - {{ contact.phone }} - star - - + + Contacts + @for (contact of contacts; track contact) { + + + {{ contact.name }} + {{ contact.phone }} + star + + } +
diff --git a/src/app/lists/list/list-sample-8/list-sample-8.component.ts b/src/app/lists/list/list-sample-8/list-sample-8.component.ts index 28bd7c8983..00896c88f5 100644 --- a/src/app/lists/list/list-sample-8/list-sample-8.component.ts +++ b/src/app/lists/list/list-sample-8/list-sample-8.component.ts @@ -1,13 +1,13 @@ import { Component, OnInit, ViewChild } from '@angular/core'; import { IgxListComponent, IgxToastComponent, IgxListItemComponent, IgxAvatarComponent, IgxListThumbnailDirective, IgxListLineTitleDirective, IgxListLineSubTitleDirective, IgxIconComponent, IgxListActionDirective, IgxRippleDirective } from 'igniteui-angular'; -import { NgFor } from '@angular/common'; + @Component({ selector: 'app-list-8', styleUrls: ['./list-sample-8.component.scss'], templateUrl: './list-sample-8.component.html', - imports: [IgxListComponent, IgxListItemComponent, NgFor, IgxAvatarComponent, IgxListThumbnailDirective, IgxListLineTitleDirective, IgxListLineSubTitleDirective, IgxIconComponent, IgxListActionDirective, IgxRippleDirective] + imports: [IgxListComponent, IgxListItemComponent, IgxAvatarComponent, IgxListThumbnailDirective, IgxListLineTitleDirective, IgxListLineSubTitleDirective, IgxIconComponent, IgxListActionDirective, IgxRippleDirective] }) export class ListSample8Component implements OnInit { @ViewChild('toast', { static: true }) diff --git a/src/app/lists/list/list.component.html b/src/app/lists/list/list.component.html index f490efb3fb..ed68a72dd6 100644 --- a/src/app/lists/list/list.component.html +++ b/src/app/lists/list/list.component.html @@ -1,23 +1,27 @@ - - search - - - - clear + + search + + + @if (search.value.length > 0) { + + clear + }
- - Contacts - - - {{contact.name}} - {{contact.phone}} - start - - + + Contacts + @for (contact of contacts | igxFilter: fo1; track contact) { + + + {{contact.name}} + {{contact.phone}} + start + + } +
diff --git a/src/app/lists/list/list.component.ts b/src/app/lists/list/list.component.ts index 808cc31364..1878145da4 100644 --- a/src/app/lists/list/list.component.ts +++ b/src/app/lists/list/list.component.ts @@ -1,13 +1,13 @@ import { Component } from '@angular/core'; import { IgxFilterOptions, IgxInputGroupComponent, IgxPrefixDirective, IgxIconComponent, IgxInputDirective, IgxSuffixDirective, IgxListComponent, IgxListItemComponent, IgxRippleDirective, IgxAvatarComponent, IgxListThumbnailDirective, IgxListLineTitleDirective, IgxListLineSubTitleDirective, IgxListActionDirective, IgxFilterPipe } from 'igniteui-angular'; import { FormsModule } from '@angular/forms'; -import { NgIf, NgFor } from '@angular/common'; + @Component({ selector: 'app-list', styleUrls: ['./list.component.scss'], templateUrl: './list.component.html', - imports: [IgxInputGroupComponent, IgxPrefixDirective, IgxIconComponent, FormsModule, IgxInputDirective, NgIf, IgxSuffixDirective, IgxListComponent, IgxListItemComponent, NgFor, IgxRippleDirective, IgxAvatarComponent, IgxListThumbnailDirective, IgxListLineTitleDirective, IgxListLineSubTitleDirective, IgxListActionDirective, IgxFilterPipe] + imports: [IgxInputGroupComponent, IgxPrefixDirective, IgxIconComponent, FormsModule, IgxInputDirective, IgxSuffixDirective, IgxListComponent, IgxListItemComponent, IgxRippleDirective, IgxAvatarComponent, IgxListThumbnailDirective, IgxListLineTitleDirective, IgxListLineSubTitleDirective, IgxListActionDirective, IgxFilterPipe] }) export class ListComponent { diff --git a/src/app/lists/tree/tree-advanced-sample/tree-advanced-sample.component.html b/src/app/lists/tree/tree-advanced-sample/tree-advanced-sample.component.html index 2ec5f0bead..7ff2a9f6b5 100644 --- a/src/app/lists/tree/tree-advanced-sample/tree-advanced-sample.component.html +++ b/src/app/lists/tree/tree-advanced-sample/tree-advanced-sample.component.html @@ -1,37 +1,49 @@
- - - - - - - - - + + @for (root of data; track root) { + + + @for (folder of root.Files; track folder) { + + + @for (file of folder.Files; track file) { + + + + } + + } + + } + +
+ + {{ remoteRoot.Name }} + @if (showRefresh) { + refresh + } +
+ @if (!remoteData?.length && !remote.loading) { + - -
- - {{ remoteRoot.Name }} - refresh -
- - - - - + } + @for (entry of remoteData; track entry) { + + - - -
- - {{ data.Name }} -
- + } + + + +
+ + {{ data.Name }} +
+
- Reload Remote Data + Reload Remote Data
diff --git a/src/app/lists/tree/tree-advanced-sample/tree-advanced-sample.component.ts b/src/app/lists/tree/tree-advanced-sample/tree-advanced-sample.component.ts index 01bd525846..5cf1ffb9cf 100644 --- a/src/app/lists/tree/tree-advanced-sample/tree-advanced-sample.component.ts +++ b/src/app/lists/tree/tree-advanced-sample/tree-advanced-sample.component.ts @@ -5,13 +5,13 @@ import { DATA, NodeData, REMOTE_ROOT, SelectableNodeData } from '../../../data/t import { DataService } from './services/data.service'; import { Subject } from 'rxjs'; import { take, takeUntil } from 'rxjs/operators'; -import { NgFor, NgTemplateOutlet, NgIf } from '@angular/common'; +import { NgTemplateOutlet } from '@angular/common'; @Component({ selector: 'app-tree-advanced-sample', templateUrl: './tree-advanced-sample.component.html', styleUrls: ['./tree-advanced-sample.component.scss'], providers: [DataService], - imports: [IgxTreeComponent, NgFor, IgxTreeNodeComponent, NgTemplateOutlet, IgxIconComponent, NgIf, IgxTooltipTargetDirective, IgxTooltipDirective] + imports: [IgxTreeComponent, IgxTreeNodeComponent, NgTemplateOutlet, IgxIconComponent, IgxTooltipTargetDirective, IgxTooltipDirective] }) export class TreeAdvancedSampleComponent implements AfterViewInit, OnDestroy { public family = 'tree-icons'; diff --git a/src/app/lists/tree/tree-basic-sample/tree-basic-sample.component.html b/src/app/lists/tree/tree-basic-sample/tree-basic-sample.component.html index 20df9081ec..9b2e2ae7d7 100644 --- a/src/app/lists/tree/tree-basic-sample/tree-basic-sample.component.html +++ b/src/app/lists/tree/tree-basic-sample/tree-basic-sample.component.html @@ -1,10 +1,14 @@
- - - {{ type.Name }} - - {{ value.Name }} - - - + + @for (type of data; track type) { + + {{ type.Name }} + @for (value of type.Children; track value) { + + {{ value.Name }} + + } + + } +
\ No newline at end of file diff --git a/src/app/lists/tree/tree-basic-sample/tree-basic-sample.component.ts b/src/app/lists/tree/tree-basic-sample/tree-basic-sample.component.ts index 350977a286..8e1bb137f2 100644 --- a/src/app/lists/tree/tree-basic-sample/tree-basic-sample.component.ts +++ b/src/app/lists/tree/tree-basic-sample/tree-basic-sample.component.ts @@ -1,13 +1,13 @@ import { Component } from '@angular/core'; import { DATA } from '../../../data/animations-data'; import { IgxTreeComponent, IgxTreeNodeComponent } from 'igniteui-angular'; -import { NgFor } from '@angular/common'; + @Component({ selector: 'app-tree-basic-sample', templateUrl: './tree-basic-sample.component.html', styleUrls: ['./tree-basic-sample.component.scss'], - imports: [IgxTreeComponent, NgFor, IgxTreeNodeComponent] + imports: [IgxTreeComponent, IgxTreeNodeComponent] }) export class TreeBasicSampleComponent { public data = DATA; diff --git a/src/app/lists/tree/tree-styling/tree-styling.component.html b/src/app/lists/tree/tree-styling/tree-styling.component.html index 20df9081ec..9b2e2ae7d7 100644 --- a/src/app/lists/tree/tree-styling/tree-styling.component.html +++ b/src/app/lists/tree/tree-styling/tree-styling.component.html @@ -1,10 +1,14 @@
- - - {{ type.Name }} - - {{ value.Name }} - - - + + @for (type of data; track type) { + + {{ type.Name }} + @for (value of type.Children; track value) { + + {{ value.Name }} + + } + + } +
\ No newline at end of file diff --git a/src/app/lists/tree/tree-styling/tree-styling.component.ts b/src/app/lists/tree/tree-styling/tree-styling.component.ts index 2c01617cbd..4fd1ca53c2 100644 --- a/src/app/lists/tree/tree-styling/tree-styling.component.ts +++ b/src/app/lists/tree/tree-styling/tree-styling.component.ts @@ -1,13 +1,13 @@ import { Component } from '@angular/core'; import { DATA } from '../../../data/animations-data'; import { IgxTreeComponent, IgxTreeNodeComponent } from 'igniteui-angular'; -import { NgFor } from '@angular/common'; + @Component({ selector: 'app-tree-styling', templateUrl: './tree-styling.component.html', styleUrls: ['./tree-styling.component.scss'], - imports: [IgxTreeComponent, NgFor, IgxTreeNodeComponent] + imports: [IgxTreeComponent, IgxTreeNodeComponent] }) export class TreeStylingComponent { public data = DATA; diff --git a/src/app/menus/navdrawer/nav-drawer-hierarchical/nav-drawer-hierarchical.component.html b/src/app/menus/navdrawer/nav-drawer-hierarchical/nav-drawer-hierarchical.component.html index 6f2f1a0859..5c785c08be 100644 --- a/src/app/menus/navdrawer/nav-drawer-hierarchical/nav-drawer-hierarchical.component.html +++ b/src/app/menus/navdrawer/nav-drawer-hierarchical/nav-drawer-hierarchical.component.html @@ -1,21 +1,25 @@
- - - - - {{ route.displayName }} - - {{ child.displayName }} - - - - - + + + + @for (route of routes; track route) { + + {{ route.displayName }} + @for (child of route.children; track child) { + + {{ child.displayName }} + + } + + } + + + -
- - menu - -
{{selectedContent}}
-
+
+ + menu + +
{{selectedContent}}
+
\ No newline at end of file diff --git a/src/app/menus/navdrawer/nav-drawer-hierarchical/nav-drawer-hierarchical.component.ts b/src/app/menus/navdrawer/nav-drawer-hierarchical/nav-drawer-hierarchical.component.ts index 5b864c4f66..deca12596f 100644 --- a/src/app/menus/navdrawer/nav-drawer-hierarchical/nav-drawer-hierarchical.component.ts +++ b/src/app/menus/navdrawer/nav-drawer-hierarchical/nav-drawer-hierarchical.component.ts @@ -1,13 +1,13 @@ import { AfterViewInit, Component, ViewChild } from '@angular/core'; import { IgxTreeComponent, IgxLayoutDirective, IgxNavigationDrawerComponent, IgxNavDrawerTemplateDirective, IgxTreeNodeComponent, IgxTreeNodeLinkDirective, IgxFlexDirective, IgxIconButtonDirective, IgxToggleActionDirective, IgxIconComponent } from 'igniteui-angular'; -import { NgFor } from '@angular/common'; + import { RouterLink } from '@angular/router'; @Component({ selector: 'app-nav-drawer-hierarchical', templateUrl: './nav-drawer-hierarchical.component.html', styleUrls: ['./nav-drawer-hierarchical.component.scss'], - imports: [IgxLayoutDirective, IgxNavigationDrawerComponent, IgxNavDrawerTemplateDirective, IgxTreeComponent, NgFor, IgxTreeNodeComponent, IgxTreeNodeLinkDirective, RouterLink, IgxFlexDirective, IgxIconButtonDirective, IgxToggleActionDirective, IgxIconComponent] + imports: [IgxLayoutDirective, IgxNavigationDrawerComponent, IgxNavDrawerTemplateDirective, IgxTreeComponent, IgxTreeNodeComponent, IgxTreeNodeLinkDirective, RouterLink, IgxFlexDirective, IgxIconButtonDirective, IgxToggleActionDirective, IgxIconComponent] }) export class NavDrawerHierarchicalComponent implements AfterViewInit { @ViewChild('tree') public tree: IgxTreeComponent; diff --git a/src/app/menus/navdrawer/nav-drawer-mini/nav-drawer-mini.component.html b/src/app/menus/navdrawer/nav-drawer-mini/nav-drawer-mini.component.html index 8c11b4f94f..63e4bd241b 100644 --- a/src/app/menus/navdrawer/nav-drawer-mini/nav-drawer-mini.component.html +++ b/src/app/menus/navdrawer/nav-drawer-mini/nav-drawer-mini.component.html @@ -1,15 +1,19 @@
- + @for (item of navItems; track item) { + {{ item.name }} {{ item.text }} + } - - {{ item.name }} + @for (item of navItems; track item) { + + {{ item.name }} + } diff --git a/src/app/menus/navdrawer/nav-drawer-mini/nav-drawer-mini.component.ts b/src/app/menus/navdrawer/nav-drawer-mini/nav-drawer-mini.component.ts index 5add2e6ebe..c45803a1f3 100644 --- a/src/app/menus/navdrawer/nav-drawer-mini/nav-drawer-mini.component.ts +++ b/src/app/menus/navdrawer/nav-drawer-mini/nav-drawer-mini.component.ts @@ -1,12 +1,12 @@ import { Component } from '@angular/core'; import { IgxLayoutDirective, IgxNavigationDrawerComponent, IgxNavDrawerTemplateDirective, IgxNavDrawerItemDirective, IgxRippleDirective, IgxIconComponent, IgxNavDrawerMiniTemplateDirective, IgxFlexDirective, IgxIconButtonDirective, IgxToggleActionDirective } from 'igniteui-angular'; -import { NgFor } from '@angular/common'; + @Component({ selector: 'app-nav-drawer-mini', styleUrls: ['./nav-drawer-mini.component.scss'], templateUrl: './nav-drawer-mini.component.html', - imports: [IgxLayoutDirective, IgxNavigationDrawerComponent, IgxNavDrawerTemplateDirective, NgFor, IgxNavDrawerItemDirective, IgxRippleDirective, IgxIconComponent, IgxNavDrawerMiniTemplateDirective, IgxFlexDirective, IgxIconButtonDirective, IgxToggleActionDirective] + imports: [IgxLayoutDirective, IgxNavigationDrawerComponent, IgxNavDrawerTemplateDirective, IgxNavDrawerItemDirective, IgxRippleDirective, IgxIconComponent, IgxNavDrawerMiniTemplateDirective, IgxFlexDirective, IgxIconButtonDirective, IgxToggleActionDirective] }) export class NavDrawerMiniComponent { public navItems = [ diff --git a/src/app/menus/navdrawer/nav-drawer-pin/nav-drawer-pin.component.html b/src/app/menus/navdrawer/nav-drawer-pin/nav-drawer-pin.component.html index e5f065bf47..63bbddb912 100644 --- a/src/app/menus/navdrawer/nav-drawer-pin/nav-drawer-pin.component.html +++ b/src/app/menus/navdrawer/nav-drawer-pin/nav-drawer-pin.component.html @@ -1,23 +1,25 @@
- - - + + -
- - - menu - +
+ + + menu + -
{{selected}} content.
-
-
+
{{selected}} content.
+ +
diff --git a/src/app/menus/navdrawer/nav-drawer-pin/nav-drawer-pin.component.ts b/src/app/menus/navdrawer/nav-drawer-pin/nav-drawer-pin.component.ts index 8e45b077e8..74a9f4ddd9 100644 --- a/src/app/menus/navdrawer/nav-drawer-pin/nav-drawer-pin.component.ts +++ b/src/app/menus/navdrawer/nav-drawer-pin/nav-drawer-pin.component.ts @@ -1,12 +1,12 @@ import { Component } from '@angular/core'; import { IgxLayoutDirective, IgxNavigationDrawerComponent, IgxNavDrawerTemplateDirective, IgxNavDrawerItemDirective, IgxRippleDirective, IgxIconComponent, IgxFlexDirective, IgxIconButtonDirective, IgxToggleActionDirective } from 'igniteui-angular'; -import { NgFor } from '@angular/common'; + @Component({ selector: 'app-nav-drawer-pin', styleUrls: ['./nav-drawer-pin.component.scss'], templateUrl: './nav-drawer-pin.component.html', - imports: [IgxLayoutDirective, IgxNavigationDrawerComponent, IgxNavDrawerTemplateDirective, IgxNavDrawerItemDirective, NgFor, IgxRippleDirective, IgxIconComponent, IgxFlexDirective, IgxIconButtonDirective, IgxToggleActionDirective] + imports: [IgxLayoutDirective, IgxNavigationDrawerComponent, IgxNavDrawerTemplateDirective, IgxNavDrawerItemDirective, IgxRippleDirective, IgxIconComponent, IgxFlexDirective, IgxIconButtonDirective, IgxToggleActionDirective] }) export class NavDrawerPinComponent { public navItems = [ diff --git a/src/app/menus/navdrawer/nav-drawer-routing/nav-drawer-routing.component.html b/src/app/menus/navdrawer/nav-drawer-routing/nav-drawer-routing.component.html index 4b30465057..a1b4868114 100644 --- a/src/app/menus/navdrawer/nav-drawer-routing/nav-drawer-routing.component.html +++ b/src/app/menus/navdrawer/nav-drawer-routing/nav-drawer-routing.component.html @@ -1,26 +1,27 @@
- - - + + -
- - menu - -
-
+
+ + menu + +
+
diff --git a/src/app/menus/navdrawer/nav-drawer-routing/nav-drawer-routing.component.ts b/src/app/menus/navdrawer/nav-drawer-routing/nav-drawer-routing.component.ts index 6d9605b7c1..fb31f16a00 100644 --- a/src/app/menus/navdrawer/nav-drawer-routing/nav-drawer-routing.component.ts +++ b/src/app/menus/navdrawer/nav-drawer-routing/nav-drawer-routing.component.ts @@ -1,13 +1,13 @@ import { Component } from '@angular/core'; import { IgxNavigationDrawerComponent, IgxNavDrawerTemplateDirective, IgxNavDrawerItemDirective, IgxRippleDirective, IgxIconButtonDirective, IgxToggleActionDirective, IgxIconComponent } from 'igniteui-angular'; -import { NgFor } from '@angular/common'; + import { RouterLinkActive, RouterLink } from '@angular/router'; @Component({ selector: 'app-nav-drawer-routing', styleUrls: ['./nav-drawer-routing.component.scss'], templateUrl: './nav-drawer-routing.component.html', - imports: [IgxNavigationDrawerComponent, IgxNavDrawerTemplateDirective, IgxNavDrawerItemDirective, NgFor, IgxRippleDirective, RouterLinkActive, RouterLink, IgxIconButtonDirective, IgxToggleActionDirective, IgxIconComponent] + imports: [IgxNavigationDrawerComponent, IgxNavDrawerTemplateDirective, IgxNavDrawerItemDirective, IgxRippleDirective, RouterLinkActive, RouterLink, IgxIconButtonDirective, IgxToggleActionDirective, IgxIconComponent] }) export class NavDrawerRoutingComponent { public componentLinks = [ diff --git a/src/app/menus/navdrawer/nav-drawer-simple/nav-drawer-simple.component.html b/src/app/menus/navdrawer/nav-drawer-simple/nav-drawer-simple.component.html index 556f0a3918..e049c0a102 100644 --- a/src/app/menus/navdrawer/nav-drawer-simple/nav-drawer-simple.component.html +++ b/src/app/menus/navdrawer/nav-drawer-simple/nav-drawer-simple.component.html @@ -4,10 +4,12 @@ diff --git a/src/app/menus/navdrawer/nav-drawer-simple/nav-drawer-simple.component.ts b/src/app/menus/navdrawer/nav-drawer-simple/nav-drawer-simple.component.ts index 49a68696c4..e6a82464d7 100644 --- a/src/app/menus/navdrawer/nav-drawer-simple/nav-drawer-simple.component.ts +++ b/src/app/menus/navdrawer/nav-drawer-simple/nav-drawer-simple.component.ts @@ -1,12 +1,12 @@ import { Component, ViewChild } from '@angular/core'; import { IgxNavigationDrawerComponent, IgxNavDrawerTemplateDirective, IgxNavDrawerItemDirective, IgxRippleDirective, IgxIconComponent, IgxIconButtonDirective, IgxToggleActionDirective } from 'igniteui-angular'; -import { NgFor } from '@angular/common'; + @Component({ selector: 'app-nav-drawer-simple', styleUrls: ['./nav-drawer-simple.component.scss'], templateUrl: './nav-drawer-simple.component.html', - imports: [IgxNavigationDrawerComponent, IgxNavDrawerTemplateDirective, IgxNavDrawerItemDirective, NgFor, IgxRippleDirective, IgxIconComponent, IgxIconButtonDirective, IgxToggleActionDirective] + imports: [IgxNavigationDrawerComponent, IgxNavDrawerTemplateDirective, IgxNavDrawerItemDirective, IgxRippleDirective, IgxIconComponent, IgxIconButtonDirective, IgxToggleActionDirective] }) export class NavDrawerSimpleComponent { @ViewChild(IgxNavigationDrawerComponent, { static: true }) diff --git a/src/app/notifications/snackbar/snackbar-sample-4/snackbar-sample-4.component.html b/src/app/notifications/snackbar/snackbar-sample-4/snackbar-sample-4.component.html index e4daddc882..efdabe959e 100644 --- a/src/app/notifications/snackbar/snackbar-sample-4/snackbar-sample-4.component.html +++ b/src/app/notifications/snackbar/snackbar-sample-4/snackbar-sample-4.component.html @@ -1,15 +1,17 @@
- - Contacts + + Contacts - - - {{item.text}} - - delete - - + @for (item of navItems; track item) { + + + {{item.text}} + + delete + + + } - Contact deleted - + Contact deleted +
diff --git a/src/app/notifications/snackbar/snackbar-sample-4/snackbar-sample-4.component.ts b/src/app/notifications/snackbar/snackbar-sample-4/snackbar-sample-4.component.ts index 5ee18b0c8b..f864d627d5 100644 --- a/src/app/notifications/snackbar/snackbar-sample-4/snackbar-sample-4.component.ts +++ b/src/app/notifications/snackbar/snackbar-sample-4/snackbar-sample-4.component.ts @@ -1,12 +1,12 @@ import { Component, OnInit, ViewChild } from '@angular/core'; import { IgxSnackbarComponent, IgxListComponent, IgxListItemComponent, IgxRippleDirective, IgxAvatarComponent, IgxListThumbnailDirective, IgxListLineTitleDirective, IgxListActionDirective, IgxIconButtonDirective, IgxIconComponent } from 'igniteui-angular'; -import { NgFor } from '@angular/common'; + @Component({ selector: 'app-snackbar-sample-4', styleUrls: ['./snackbar-sample-4.component.scss'], templateUrl: './snackbar-sample-4.component.html', - imports: [IgxListComponent, IgxListItemComponent, NgFor, IgxRippleDirective, IgxAvatarComponent, IgxListThumbnailDirective, IgxListLineTitleDirective, IgxListActionDirective, IgxIconButtonDirective, IgxIconComponent, IgxSnackbarComponent] + imports: [IgxListComponent, IgxListItemComponent, IgxRippleDirective, IgxAvatarComponent, IgxListThumbnailDirective, IgxListLineTitleDirective, IgxListActionDirective, IgxIconButtonDirective, IgxIconComponent, IgxSnackbarComponent] }) export class SnackbarSample4Component implements OnInit { @ViewChild(IgxSnackbarComponent, { static: true }) diff --git a/src/app/pagination/paginator/pagination-sample.component.html b/src/app/pagination/paginator/pagination-sample.component.html index 1a0cd03ed2..ab7e7944e3 100644 --- a/src/app/pagination/paginator/pagination-sample.component.html +++ b/src/app/pagination/paginator/pagination-sample.component.html @@ -1,36 +1,35 @@
-
- - - - - - - -

{{ product.ProductName }}

- - - -
Price: {{ product.UnitPrice | currency:'USD' }}
- - - - - - - - -
- - +
+ @for (product of data; track product) { + + + + + +

{{ product.ProductName }}

+ + +
Price: {{ product.UnitPrice | currency:'USD' }}
+ + + + @for (icon of product.icons; track icon) { + + } + + + } +
+ +
diff --git a/src/app/pagination/paginator/pagination-sample.component.ts b/src/app/pagination/paginator/pagination-sample.component.ts index c622272f38..5b0279bf33 100644 --- a/src/app/pagination/paginator/pagination-sample.component.ts +++ b/src/app/pagination/paginator/pagination-sample.component.ts @@ -1,13 +1,13 @@ import { AfterViewInit, ChangeDetectorRef, Component, ViewChild } from '@angular/core'; import { IgxPaginatorComponent, IgxCardComponent, IgxCardMediaDirective, IgxCardHeaderComponent, IgxCardHeaderTitleDirective, IgxCardContentDirective, IgxCardHeaderSubtitleDirective, IgxCardActionsComponent, IgxButtonDirective, IgxRippleDirective, IgxIconButtonDirective, IgxIconComponent } from 'igniteui-angular'; import { DATA } from '../../data/product'; -import { NgFor, CurrencyPipe } from '@angular/common'; +import { CurrencyPipe } from '@angular/common'; @Component({ selector: 'app-pagination-sample', styleUrls: ['./pagination-sample.component.scss'], templateUrl: './pagination-sample.component.html', - imports: [NgFor, IgxCardComponent, IgxCardMediaDirective, IgxCardHeaderComponent, IgxCardHeaderTitleDirective, IgxCardContentDirective, IgxCardHeaderSubtitleDirective, IgxCardActionsComponent, IgxButtonDirective, IgxRippleDirective, IgxIconButtonDirective, IgxIconComponent, IgxPaginatorComponent, CurrencyPipe] + imports: [IgxCardComponent, IgxCardMediaDirective, IgxCardHeaderComponent, IgxCardHeaderTitleDirective, IgxCardContentDirective, IgxCardHeaderSubtitleDirective, IgxCardActionsComponent, IgxButtonDirective, IgxRippleDirective, IgxIconButtonDirective, IgxIconComponent, IgxPaginatorComponent, CurrencyPipe] }) export class PaginationSampleComponent implements AfterViewInit { @ViewChild('paginator', { static: true }) public paginator!: IgxPaginatorComponent; diff --git a/src/app/pivot-grid/pivot-state-persistence/pivot-grid-state-persistence-sample.component.html b/src/app/pivot-grid/pivot-state-persistence/pivot-grid-state-persistence-sample.component.html index 4183defe48..b1b78a8f9f 100644 --- a/src/app/pivot-grid/pivot-state-persistence/pivot-grid-state-persistence-sample.component.html +++ b/src/app/pivot-grid/pivot-state-persistence/pivot-grid-state-persistence-sample.component.html @@ -1,50 +1,52 @@
-
- - - - - -
+
+ + + + + +
-
-
    -
  • Clicking the SAVE button or leaving the page here will save grid state to - localStorage.
    • -
  • Use the control buttons to SAVE / RESTORE / DELETE / grid state or LEAVE the page.
    • -
  • Select/Deselect checkboxes to control saving / restoring feature state.
    • -
-
+
+
    +
  • Clicking the SAVE button or leaving the page here will save grid state to + localStorage.
    • +
  • Use the control buttons to SAVE / RESTORE / DELETE / grid state or LEAVE the page.
    • +
  • Select/Deselect checkboxes to control saving / restoring feature state.
    • +
+
-
-
- All -
-
- - {{ f.shortName }} - -
+
+
+ All
+ @for (f of features; track f) { +
+ + {{ f.shortName }} + +
+ } +
+ [superCompactMode]="true" [defaultExpandState]='true' [columnSelection]="'single'" [igxGridState]="options" + (valueInit)='onValueInit($event)' (dimensionInit)='onDimensionInit($event)'> \ No newline at end of file diff --git a/src/app/pivot-grid/pivot-state-persistence/pivot-grid-state-persistence-sample.component.ts b/src/app/pivot-grid/pivot-state-persistence/pivot-grid-state-persistence-sample.component.ts index 7f40c650de..15a4acaf06 100644 --- a/src/app/pivot-grid/pivot-state-persistence/pivot-grid-state-persistence-sample.component.ts +++ b/src/app/pivot-grid/pivot-state-persistence/pivot-grid-state-persistence-sample.component.ts @@ -4,7 +4,7 @@ import { NavigationStart, Router, RouterLink } from "@angular/router"; import { IPivotConfiguration, PivotAggregation, IgxPivotNumericAggregate, IgxPivotDateDimension, IgxGridStateDirective, IgxPivotGridComponent, IgxCheckboxComponent, GridFeatures, IGridStateOptions, IGridState, IPivotValue, IPivotDimension, IPivotAggregator, GridColumnDataType, IgxButtonDirective, IgxIconComponent } from "igniteui-angular" import { take } from "rxjs/operators"; import { SALES_DATA } from "../../data/dataToAnalyze"; -import { NgFor } from "@angular/common"; + export class IgxTotalSaleAggregate { public static totalSale: PivotAggregation = (members, data: any) => @@ -37,7 +37,7 @@ export class IgxTotalSaleAggregate { selector: 'app-pivot-grid-state-persistence-sample', styleUrls: ['./pivot-grid-state-persistence-sample.component.scss'], templateUrl: './pivot-grid-state-persistence-sample.component.html', - imports: [IgxButtonDirective, IgxIconComponent, RouterLink, IgxCheckboxComponent, NgFor, IgxPivotGridComponent, IgxGridStateDirective] + imports: [IgxButtonDirective, IgxIconComponent, RouterLink, IgxCheckboxComponent, IgxPivotGridComponent, IgxGridStateDirective] }) export class PivotGridStatePersistenceSampleComponent implements OnInit, AfterViewInit { @ViewChild(IgxGridStateDirective, { static: true }) public state: IgxGridStateDirective; diff --git a/src/app/scheduling/calendar/calendar-sample-2/calendar-sample-2.component.html b/src/app/scheduling/calendar/calendar-sample-2/calendar-sample-2.component.html index 8364045810..7f8ac5a55c 100644 --- a/src/app/scheduling/calendar/calendar-sample-2/calendar-sample-2.component.html +++ b/src/app/scheduling/calendar/calendar-sample-2/calendar-sample-2.component.html @@ -1,18 +1,20 @@
- - Location: - - {{ locale }} - - + + Location: + @for (locale of locales; track locale) { + + {{ locale }} + + } +
- - +
diff --git a/src/app/scheduling/calendar/calendar-sample-2/calendar-sample-2.component.ts b/src/app/scheduling/calendar/calendar-sample-2/calendar-sample-2.component.ts index 77af00cc21..8735af7c9f 100644 --- a/src/app/scheduling/calendar/calendar-sample-2/calendar-sample-2.component.ts +++ b/src/app/scheduling/calendar/calendar-sample-2/calendar-sample-2.component.ts @@ -1,6 +1,6 @@ import { Component, OnInit, ViewChild } from '@angular/core'; import { IgxCalendarComponent, IgxSelectComponent, IgxPrefixDirective, IgxSelectItemComponent } from 'igniteui-angular'; -import { registerLocaleData, NgFor } from '@angular/common'; +import { registerLocaleData } from '@angular/common'; import localeDE from '@angular/common/locales/de'; import localeFR from '@angular/common/locales/fr'; import localeAR from '@angular/common/locales/ar'; @@ -11,7 +11,7 @@ import { FormsModule } from '@angular/forms'; selector: 'app-calendar', styleUrls: ['./calendar-sample-2.component.scss'], templateUrl: './calendar-sample-2.component.html', - imports: [IgxSelectComponent, FormsModule, IgxPrefixDirective, NgFor, IgxSelectItemComponent, IgxCalendarComponent] + imports: [IgxSelectComponent, FormsModule, IgxPrefixDirective, IgxSelectItemComponent, IgxCalendarComponent] }) export class CalendarSample2Component implements OnInit{ @ViewChild('calendar', { read: IgxCalendarComponent }) public calendar: IgxCalendarComponent; diff --git a/src/app/scheduling/calendar/calendar-sample-4/calendar-sample-4.component.html b/src/app/scheduling/calendar/calendar-sample-4/calendar-sample-4.component.html index d785ceb66f..c1f3c35e1f 100644 --- a/src/app/scheduling/calendar/calendar-sample-4/calendar-sample-4.component.html +++ b/src/app/scheduling/calendar/calendar-sample-4/calendar-sample-4.component.html @@ -1,30 +1,29 @@
-
- - - - {{ parts.month.combined | titlecase }} {{ parts.day.combined }} {{ parts.weekday.combined }} - - - {{ parts.month.combined }} - {{ parts.year.combined }} - - +
+ + @if (formatParts) { + + {{ parts.month.combined | titlecase }} {{ parts.day.combined }} {{ parts.weekday.combined }} + + + {{ parts.month.combined }} + {{ parts.year.combined }} + + } @else { + + {{ parser.getDatePart(parts, component, 'month') | titlecase }} + {{ parser.getDatePart(parts, component, 'day') }} + {{ parser.getDatePart(parts, component, 'weekday') }} + + + {{ parser.getDatePart(parts, component, 'month') }} + {{ parser.getDatePart(parts, component, 'year') }} + + } - - - - {{ parser.getDatePart(parts, component, 'month') | titlecase }} - {{ parser.getDatePart(parts, component, 'day') }} - {{ parser.getDatePart(parts, component, 'weekday') }} - - - {{ parser.getDatePart(parts, component, 'month') }} - {{ parser.getDatePart(parts, component, 'year') }} - - - -
+ + +
diff --git a/src/app/scheduling/calendar/calendar-sample-4/calendar-sample-4.component.ts b/src/app/scheduling/calendar/calendar-sample-4/calendar-sample-4.component.ts index 4c3dc5b25f..aeab10dc8f 100644 --- a/src/app/scheduling/calendar/calendar-sample-4/calendar-sample-4.component.ts +++ b/src/app/scheduling/calendar/calendar-sample-4/calendar-sample-4.component.ts @@ -1,14 +1,14 @@ import { Component } from '@angular/core'; import { DateParser } from '../../../date-parser'; import { IgxCalendarComponent, IgxCalendarHeaderTemplateDirective, IgxCalendarSubheaderTemplateDirective } from 'igniteui-angular'; -import { NgIf, TitleCasePipe } from '@angular/common'; +import { TitleCasePipe } from '@angular/common'; @Component({ providers: [DateParser], selector: 'app-calendar', styleUrls: ['./calendar-sample-4.component.scss'], templateUrl: './calendar-sample-4.component.html', - imports: [IgxCalendarComponent, NgIf, IgxCalendarHeaderTemplateDirective, IgxCalendarSubheaderTemplateDirective, TitleCasePipe] + imports: [IgxCalendarComponent, IgxCalendarHeaderTemplateDirective, IgxCalendarSubheaderTemplateDirective, TitleCasePipe] }) export class CalendarSample4Component { diff --git a/src/app/scheduling/calendar/calendar-sample-9/calendar-sample-9.component.html b/src/app/scheduling/calendar/calendar-sample-9/calendar-sample-9.component.html index de4fc0ea9b..523520c4d6 100644 --- a/src/app/scheduling/calendar/calendar-sample-9/calendar-sample-9.component.html +++ b/src/app/scheduling/calendar/calendar-sample-9/calendar-sample-9.component.html @@ -1,31 +1,33 @@
-
- -
+
+ +
-
- Header orientation - - - +
+ Header orientation + + @for (ho of orientations; track ho) { + + } + - View orientation - - - -
+ View orientation + + @for (vo of orientations; track vo) { + + } + +
diff --git a/src/app/scheduling/calendar/calendar-sample-9/calendar-sample-9.component.ts b/src/app/scheduling/calendar/calendar-sample-9/calendar-sample-9.component.ts index 5824a9ca9c..24f8a9cc98 100644 --- a/src/app/scheduling/calendar/calendar-sample-9/calendar-sample-9.component.ts +++ b/src/app/scheduling/calendar/calendar-sample-9/calendar-sample-9.component.ts @@ -1,7 +1,7 @@ import { Component, ViewChild } from '@angular/core'; import { IgxButtonGroupComponent, IgxCalendarComponent, IgxButtonDirective } from 'igniteui-angular'; -import { NgFor } from '@angular/common'; + const orientations = ["horizontal", "vertical"] as const; type Orientation = (typeof orientations)[number]; @@ -10,7 +10,7 @@ type Orientation = (typeof orientations)[number]; selector: 'app-calendar', styleUrls: ['./calendar-sample-9.component.scss'], templateUrl: './calendar-sample-9.component.html', - imports: [IgxCalendarComponent, IgxButtonGroupComponent, NgFor, IgxButtonDirective] + imports: [IgxCalendarComponent, IgxButtonGroupComponent, IgxButtonDirective] }) export class CalendarSample9Component { diff --git a/src/app/scheduling/calendar/multiview/multiview.component.html b/src/app/scheduling/calendar/multiview/multiview.component.html index abdbd55126..9fccc3ed5e 100644 --- a/src/app/scheduling/calendar/multiview/multiview.component.html +++ b/src/app/scheduling/calendar/multiview/multiview.component.html @@ -1,12 +1,16 @@
-
- {{ action }} - {{ checkin }} - {{ checkout }} ({{ this.range.length - 1 }} nights stay) -
- - - - - +
+ @if (range.length <= 1) { + {{ action }} + } + @if (range.length > 1) { + {{ checkin }} - {{ checkout }} ({{ this.range.length - 1 }} nights stay) + } +
+ + + + +
diff --git a/src/app/scheduling/calendar/multiview/multiview.component.ts b/src/app/scheduling/calendar/multiview/multiview.component.ts index fb287254ca..f6753e928a 100644 --- a/src/app/scheduling/calendar/multiview/multiview.component.ts +++ b/src/app/scheduling/calendar/multiview/multiview.component.ts @@ -1,12 +1,12 @@ import { Component, ViewChild } from '@angular/core'; import { IgxCalendarComponent, IgxDialogComponent, IgxButtonDirective } from 'igniteui-angular'; -import { NgIf } from '@angular/common'; + @Component({ selector: 'app-calendar', styleUrls: ['./multiview.component.scss'], templateUrl: './multiview.component.html', - imports: [NgIf, IgxCalendarComponent, IgxDialogComponent, IgxButtonDirective] + imports: [IgxCalendarComponent, IgxDialogComponent, IgxButtonDirective] }) export class CalendarMultiViewComponent { @ViewChild('calendar', { static: true }) public calendar: IgxCalendarComponent; diff --git a/src/app/scheduling/datepicker/datepicker-sample-5/datepicker-sample-5.component.html b/src/app/scheduling/datepicker/datepicker-sample-5/datepicker-sample-5.component.html index d3533ecb72..cf3d7c6cbd 100644 --- a/src/app/scheduling/datepicker/datepicker-sample-5/datepicker-sample-5.component.html +++ b/src/app/scheduling/datepicker/datepicker-sample-5/datepicker-sample-5.component.html @@ -1,30 +1,29 @@
- - - - - {{ format.month.combined | titlecase }} {{ format.day.combined }} {{ format.weekday.combined }} - - - {{ format.year.combined }} - {{ format.month.combined | titlecase }} - - + + + @if (formatParts) { + + {{ format.month.combined | titlecase }} {{ format.day.combined }} {{ format.weekday.combined }} + + + {{ format.year.combined }} + {{ format.month.combined | titlecase }} + + } @else { + + {{ parser.getDatePart(format, component, 'month') | titlecase }} {{ parser.getDatePart(format, + component, 'day') }} {{ parser.getDatePart(format, component, 'weekday') }} + + + + {{ parser.getDatePart(format, component, 'year') }} + + + {{ parser.getDatePart(format, component, 'month') }} + + + } - - - - {{ parser.getDatePart(format, component, 'month') | titlecase }} {{ parser.getDatePart(format, - component, 'day') }} {{ parser.getDatePart(format, component, 'weekday') }} - - - - {{ parser.getDatePart(format, component, 'year') }} - - - {{ parser.getDatePart(format, component, 'month') }} - - - - + +
diff --git a/src/app/scheduling/datepicker/datepicker-sample-5/datepicker-sample-5.component.ts b/src/app/scheduling/datepicker/datepicker-sample-5/datepicker-sample-5.component.ts index d32d88317d..4fe60c13a9 100644 --- a/src/app/scheduling/datepicker/datepicker-sample-5/datepicker-sample-5.component.ts +++ b/src/app/scheduling/datepicker/datepicker-sample-5/datepicker-sample-5.component.ts @@ -1,14 +1,14 @@ import { Component, OnInit } from '@angular/core'; import { DateParser } from '../../../date-parser'; import { IgxDatePickerComponent, IgxLabelDirective, IgxCalendarHeaderTemplateDirective, IgxCalendarSubheaderTemplateDirective } from 'igniteui-angular'; -import { NgIf, TitleCasePipe } from '@angular/common'; +import { TitleCasePipe } from '@angular/common'; @Component({ providers: [DateParser], selector: 'app-datepicker-sample-5', styleUrls: ['./datepicker-sample-5.component.scss'], templateUrl: './datepicker-sample-5.component.html', - imports: [IgxDatePickerComponent, IgxLabelDirective, NgIf, IgxCalendarHeaderTemplateDirective, IgxCalendarSubheaderTemplateDirective, TitleCasePipe] + imports: [IgxDatePickerComponent, IgxLabelDirective, IgxCalendarHeaderTemplateDirective, IgxCalendarSubheaderTemplateDirective, TitleCasePipe] }) export class DatepickerSample5Component implements OnInit { public intlDateTimeFormat = new Intl.DateTimeFormat() as any; diff --git a/src/app/scheduling/datepicker/datepicker-sample-9/datepicker-sample-9.component.html b/src/app/scheduling/datepicker/datepicker-sample-9/datepicker-sample-9.component.html index e11b6ce7d2..7deef9c891 100644 --- a/src/app/scheduling/datepicker/datepicker-sample-9/datepicker-sample-9.component.html +++ b/src/app/scheduling/datepicker/datepicker-sample-9/datepicker-sample-9.component.html @@ -1,57 +1,61 @@
-
- - - - - flight_takeoff - - - arrow_drop{{ dropDown1.collapsed ? '_down' : '_up' }} - - +
+ + + + + flight_takeoff + + + arrow_drop{{ dropDown1.collapsed ? '_down' : '_up' }} + + - - - {{ town }} - - + + @for (town of towns | startsWith:townFrom; track town) { + + {{ town }} + + } + - - - - - flight_land - - - arrow_drop{{ dropDown2.collapsed ? '_down' : '_up' }} - + + + + + flight_land + + + arrow_drop{{ dropDown2.collapsed ? '_down' : '_up' }} + - - {{ town }} + @for (town of towns | withoutTownFrom:townFrom | startsWith:townTo; track town) { + + {{ town }} + } -
- +
+ - + [igxDropDownItemNavigation]="dropDownCalendar"> + today - - + + - - + - -
+ +
-
- -
+
+ +
diff --git a/src/app/scheduling/datepicker/datepicker-sample-9/datepicker-sample-9.component.ts b/src/app/scheduling/datepicker/datepicker-sample-9/datepicker-sample-9.component.ts index 364940fbab..4f11911d29 100644 --- a/src/app/scheduling/datepicker/datepicker-sample-9/datepicker-sample-9.component.ts +++ b/src/app/scheduling/datepicker/datepicker-sample-9/datepicker-sample-9.component.ts @@ -1,32 +1,31 @@ import { Component, OnInit, Pipe, PipeTransform, ViewChild, forwardRef } from '@angular/core'; import { IgxCalendarComponent, IgxDropDownComponent, IgxInputGroupComponent, IgxToggleActionDirective, IgxInputDirective, IgxAutocompleteDirective, IgxLabelDirective, IgxPrefixDirective, IgxIconComponent, IgxSuffixDirective, IgxIconButtonDirective, IgxDropDownItemComponent, IgxDropDownItemNavigationDirective, IgxButtonDirective, DateRangeType } from 'igniteui-angular'; import { FormsModule } from '@angular/forms'; -import { NgFor } from '@angular/common'; + @Component({ selector: 'app-datepicker-sample-9', styleUrls: ['./datepicker-sample-9.component.scss'], templateUrl: './datepicker-sample-9.component.html', imports: [ - IgxInputGroupComponent, - IgxToggleActionDirective, - FormsModule, - IgxInputDirective, - IgxAutocompleteDirective, - IgxLabelDirective, - IgxPrefixDirective, - IgxIconComponent, - IgxSuffixDirective, - IgxIconButtonDirective, - IgxDropDownComponent, - NgFor, - IgxDropDownItemComponent, - IgxDropDownItemNavigationDirective, - IgxCalendarComponent, - IgxButtonDirective, - forwardRef(() => AutocompletePipeStartsWith), - forwardRef(() => PipeWithoutTownFrom) - ] + IgxInputGroupComponent, + IgxToggleActionDirective, + FormsModule, + IgxInputDirective, + IgxAutocompleteDirective, + IgxLabelDirective, + IgxPrefixDirective, + IgxIconComponent, + IgxSuffixDirective, + IgxIconButtonDirective, + IgxDropDownComponent, + IgxDropDownItemComponent, + IgxDropDownItemNavigationDirective, + IgxCalendarComponent, + IgxButtonDirective, + forwardRef(() => AutocompletePipeStartsWith), + forwardRef(() => PipeWithoutTownFrom) +] }) export class DatepickerSample9Component implements OnInit { @ViewChild('calendar', { static: true }) public calendar: IgxCalendarComponent; diff --git a/src/app/scheduling/daterangepicker/daterangepicker-flight-booking/daterangepicker-flight-booking.html b/src/app/scheduling/daterangepicker/daterangepicker-flight-booking/daterangepicker-flight-booking.html index 200f495b1a..29ce051f33 100644 --- a/src/app/scheduling/daterangepicker/daterangepicker-flight-booking/daterangepicker-flight-booking.html +++ b/src/app/scheduling/daterangepicker/daterangepicker-flight-booking/daterangepicker-flight-booking.html @@ -1,34 +1,40 @@
-
- - - flight_takeoff - - - {{town}} - - - - - flight_land - - - {{town}} - - -
+
+ + + flight_takeoff + + @for (town of towns; track town) { + + {{town}} + + } + + + + flight_land + + @for (town of towns | withoutTownFrom:townFrom; track town) { + + {{town}} + + } + +
- - - - Please choose start and end date! - - + + @if (dateRangePicker.invalid && (dateRangePicker.dirty || dateRangePicker.touched)) { + + Please choose start and end date! + + } +
diff --git a/src/app/scheduling/daterangepicker/daterangepicker-flight-booking/daterangepicker-flight-booking.ts b/src/app/scheduling/daterangepicker/daterangepicker-flight-booking/daterangepicker-flight-booking.ts index 810efdce86..4e10811862 100644 --- a/src/app/scheduling/daterangepicker/daterangepicker-flight-booking/daterangepicker-flight-booking.ts +++ b/src/app/scheduling/daterangepicker/daterangepicker-flight-booking/daterangepicker-flight-booking.ts @@ -1,14 +1,14 @@ import { Component, Pipe, PipeTransform } from '@angular/core'; import { DateRange, IgxSelectComponent, IgxPrefixDirective, IgxIconComponent, IgxSelectItemComponent, IgxDateRangePickerComponent, IgxLabelDirective, IgxHintDirective } from 'igniteui-angular'; import { FormsModule } from '@angular/forms'; -import { NgFor, NgIf } from '@angular/common'; + import { PipeWithoutTownFrom as PipeWithoutTownFrom_1 } from '../../datepicker/datepicker-sample-9/datepicker-sample-9.component'; @Component({ selector: 'app-flight-booking', styleUrls: ['./daterangepicker-flight-booking.scss'], templateUrl: './daterangepicker-flight-booking.html', - imports: [FormsModule, IgxSelectComponent, IgxPrefixDirective, IgxIconComponent, NgFor, IgxSelectItemComponent, IgxDateRangePickerComponent, IgxLabelDirective, NgIf, IgxHintDirective, PipeWithoutTownFrom_1] + imports: [FormsModule, IgxSelectComponent, IgxPrefixDirective, IgxIconComponent, IgxSelectItemComponent, IgxDateRangePickerComponent, IgxLabelDirective, IgxHintDirective, PipeWithoutTownFrom_1] }) export class FlightBookingComponent { public towns: string[] = [ diff --git a/src/app/scheduling/monthpicker/monthpicker-sample-3/monthpicker-sample-3.component.html b/src/app/scheduling/monthpicker/monthpicker-sample-3/monthpicker-sample-3.component.html index 0456000767..8e8f14d501 100644 --- a/src/app/scheduling/monthpicker/monthpicker-sample-3/monthpicker-sample-3.component.html +++ b/src/app/scheduling/monthpicker/monthpicker-sample-3/monthpicker-sample-3.component.html @@ -1,15 +1,17 @@
-
- - Locales: - - {{ locale }} - - -
+
+ + Locales: + @for (locale of locales; track locale) { + + {{ locale }} + + } + +
- - - - + + + +
diff --git a/src/app/scheduling/monthpicker/monthpicker-sample-3/monthpicker-sample-3.component.ts b/src/app/scheduling/monthpicker/monthpicker-sample-3/monthpicker-sample-3.component.ts index 1a198ba092..6def0ba031 100644 --- a/src/app/scheduling/monthpicker/monthpicker-sample-3/monthpicker-sample-3.component.ts +++ b/src/app/scheduling/monthpicker/monthpicker-sample-3/monthpicker-sample-3.component.ts @@ -1,4 +1,4 @@ -import { registerLocaleData, NgFor } from '@angular/common'; +import { registerLocaleData } from '@angular/common'; import { Component, OnInit } from '@angular/core'; import { IFormattingOptions, IgxSelectComponent, IgxPrefixDirective, IgxSelectItemComponent, IgxCardComponent, IgxMonthPickerComponent } from 'igniteui-angular'; import localeDE from '@angular/common/locales/de'; @@ -11,7 +11,7 @@ import { FormsModule } from '@angular/forms'; selector: 'app-monthpicker-sample-3', styleUrls: ['./monthpicker-sample-3.component.scss'], templateUrl: './monthpicker-sample-3.component.html', - imports: [IgxSelectComponent, FormsModule, IgxPrefixDirective, NgFor, IgxSelectItemComponent, IgxCardComponent, IgxMonthPickerComponent] + imports: [IgxSelectComponent, FormsModule, IgxPrefixDirective, IgxSelectItemComponent, IgxCardComponent, IgxMonthPickerComponent] }) export class MonthpickerSample3Component implements OnInit { public formatOptions: IFormattingOptions = { diff --git a/src/app/services/export-csv/csv-export-tree-grid-sample/csv-export-tree-grid-sample.component.html b/src/app/services/export-csv/csv-export-tree-grid-sample/csv-export-tree-grid-sample.component.html index 18e13982ba..73867ef69f 100644 --- a/src/app/services/export-csv/csv-export-tree-grid-sample/csv-export-tree-grid-sample.component.html +++ b/src/app/services/export-csv/csv-export-tree-grid-sample/csv-export-tree-grid-sample.component.html @@ -1,32 +1,36 @@

- - - - - - - + + + + + + + - - - - - - - - - - - - - - - - - Delivered - Undelivered - - - + + + + + + + + + + + + + + + + + @if (val) { + Delivered + } + @if (!val) { + Undelivered + } + + +

diff --git a/src/app/services/export-csv/csv-export-tree-grid-sample/csv-export-tree-grid-sample.component.ts b/src/app/services/export-csv/csv-export-tree-grid-sample/csv-export-tree-grid-sample.component.ts index 0722ef78d1..70138bf11e 100644 --- a/src/app/services/export-csv/csv-export-tree-grid-sample/csv-export-tree-grid-sample.component.ts +++ b/src/app/services/export-csv/csv-export-tree-grid-sample/csv-export-tree-grid-sample.component.ts @@ -2,13 +2,13 @@ import { Component, OnInit, ViewChild } from '@angular/core'; import { IgxTreeGridComponent, IgxGridToolbarComponent, IgxGridToolbarActionsComponent, IgxGridToolbarExporterComponent, IgxColumnComponent, IgxCellTemplateDirective } from 'igniteui-angular'; import { ORDERS_DATA } from '../../../tree-grid/data/orders'; import { IgxPreventDocumentScrollDirective } from '../../../directives/prevent-scroll.directive'; -import { NgIf } from '@angular/common'; + @Component({ selector: 'app-csv-export-tree-grid-sample', styleUrls: ['./csv-export-tree-grid-sample.component.scss'], templateUrl: './csv-export-tree-grid-sample.component.html', - imports: [IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxGridToolbarComponent, IgxGridToolbarActionsComponent, IgxGridToolbarExporterComponent, IgxColumnComponent, IgxCellTemplateDirective, NgIf] + imports: [IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxGridToolbarComponent, IgxGridToolbarActionsComponent, IgxGridToolbarExporterComponent, IgxColumnComponent, IgxCellTemplateDirective] }) export class TreeGridCsvExportSample1Component implements OnInit { diff --git a/src/app/services/export-excel/excel-export-sample-1/excel-export-sample-1.component.html b/src/app/services/export-excel/excel-export-sample-1/excel-export-sample-1.component.html index 1279bce534..f88ceedbfb 100644 --- a/src/app/services/export-excel/excel-export-sample-1/excel-export-sample-1.component.html +++ b/src/app/services/export-excel/excel-export-sample-1/excel-export-sample-1.component.html @@ -2,14 +2,16 @@ - - - - + + + + - - + + }

diff --git a/src/app/services/export-excel/excel-export-sample-1/excel-export-sample-1.component.ts b/src/app/services/export-excel/excel-export-sample-1/excel-export-sample-1.component.ts index b2dabf1321..670e530891 100644 --- a/src/app/services/export-excel/excel-export-sample-1/excel-export-sample-1.component.ts +++ b/src/app/services/export-excel/excel-export-sample-1/excel-export-sample-1.component.ts @@ -1,13 +1,13 @@ import { Component, OnInit, ViewChild } from '@angular/core'; import { GridColumnDataType, IgxExcelExporterService, IgxGridComponent, ISortingExpression, SortingDirection, IgxGridToolbarComponent, IgxGridToolbarActionsComponent, IgxGridToolbarExporterComponent, IgxColumnComponent } from 'igniteui-angular'; import { INVOICE_DATA } from '../data/invoiceData'; -import { NgFor } from '@angular/common'; + @Component({ selector: 'app-excel-export-sample-1', styleUrls: ['./excel-export-sample-1.component.scss'], templateUrl: './excel-export-sample-1.component.html', - imports: [IgxGridComponent, IgxGridToolbarComponent, IgxGridToolbarActionsComponent, IgxGridToolbarExporterComponent, NgFor, IgxColumnComponent] + imports: [IgxGridComponent, IgxGridToolbarComponent, IgxGridToolbarActionsComponent, IgxGridToolbarExporterComponent, IgxColumnComponent] }) export class ExcelExportSample1Component implements OnInit { @ViewChild('igxGrid1', { static: true }) public igxGrid1: IgxGridComponent; diff --git a/src/app/services/export-excel/excel-export-tree-grid-sample/excel-export-tree-grid-sample.component.html b/src/app/services/export-excel/excel-export-tree-grid-sample/excel-export-tree-grid-sample.component.html index 975f485108..6dabb8258f 100644 --- a/src/app/services/export-excel/excel-export-tree-grid-sample/excel-export-tree-grid-sample.component.html +++ b/src/app/services/export-excel/excel-export-tree-grid-sample/excel-export-tree-grid-sample.component.html @@ -1,32 +1,36 @@

- - - - - - - + + + + + + + - - - - - - - - - - - - - - - - - Delivered - Undelivered - - - + + + + + + + + + + + + + + + + + @if (val) { + Delivered + } + @if (!val) { + Undelivered + } + + +

diff --git a/src/app/services/export-excel/excel-export-tree-grid-sample/excel-export-tree-grid-sample.component.ts b/src/app/services/export-excel/excel-export-tree-grid-sample/excel-export-tree-grid-sample.component.ts index 3b6b7acf2b..feadd0edba 100644 --- a/src/app/services/export-excel/excel-export-tree-grid-sample/excel-export-tree-grid-sample.component.ts +++ b/src/app/services/export-excel/excel-export-tree-grid-sample/excel-export-tree-grid-sample.component.ts @@ -2,13 +2,13 @@ import { Component, OnInit, ViewChild } from '@angular/core'; import { IgxTreeGridComponent, IgxGridToolbarComponent, IgxGridToolbarActionsComponent, IgxGridToolbarExporterComponent, IgxColumnComponent, IgxCellTemplateDirective } from 'igniteui-angular'; import { ORDERS_DATA } from '../../../tree-grid/data/orders'; import { IgxPreventDocumentScrollDirective } from '../../../directives/prevent-scroll.directive'; -import { NgIf } from '@angular/common'; + @Component({ selector: 'app-excel-export-tree-grid-sample', styleUrls: ['./excel-export-tree-grid-sample.component.scss'], templateUrl: './excel-export-tree-grid-sample.component.html', - imports: [IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxGridToolbarComponent, IgxGridToolbarActionsComponent, IgxGridToolbarExporterComponent, IgxColumnComponent, IgxCellTemplateDirective, NgIf] + imports: [IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxGridToolbarComponent, IgxGridToolbarActionsComponent, IgxGridToolbarExporterComponent, IgxColumnComponent, IgxCellTemplateDirective] }) export class TreeGridExcelExportSample1Component implements OnInit { diff --git a/src/app/services/localization-samples/localization-all-resources/localization-all-resources.component.html b/src/app/services/localization-samples/localization-all-resources/localization-all-resources.component.html index 4f265418a2..c3e5b89ee2 100644 --- a/src/app/services/localization-samples/localization-all-resources/localization-all-resources.component.html +++ b/src/app/services/localization-samples/localization-all-resources/localization-all-resources.component.html @@ -1,24 +1,26 @@
- - - Grid with Localization - - - {{ locale }} - - - - - - - - - - - - - - + + + Grid with Localization + + @for (locale of selectLocales; track locale) { + + {{ locale }} + + } + + + + + + + + + + + + +
diff --git a/src/app/services/localization-samples/localization-all-resources/localization-all-resources.component.ts b/src/app/services/localization-samples/localization-all-resources/localization-all-resources.component.ts index 5864e5bcf5..b88442a66f 100644 --- a/src/app/services/localization-samples/localization-all-resources/localization-all-resources.component.ts +++ b/src/app/services/localization-samples/localization-all-resources/localization-all-resources.component.ts @@ -2,7 +2,7 @@ /* eslint-disable @typescript-eslint/member-delimiter-style */ /* eslint-disable @typescript-eslint/naming-convention */ import { Component, OnInit, ViewChild } from '@angular/core'; -import { registerLocaleData, NgFor } from '@angular/common'; +import { registerLocaleData } from '@angular/common'; import localeBG from '@angular/common/locales/bg'; import localeCS from '@angular/common/locales/cs'; import localeDA from '@angular/common/locales/da'; @@ -39,7 +39,7 @@ import { FormsModule } from '@angular/forms'; selector: 'app-localization-all-resources', styleUrls: ['./localization-all-resources.component.scss'], templateUrl: 'localization-all-resources.component.html', - imports: [IgxGridComponent, IgxGridToolbarComponent, IgxGridToolbarTitleComponent, IgxSelectComponent, FormsModule, NgFor, IgxSelectItemComponent, IgxColumnComponent] + imports: [IgxGridComponent, IgxGridToolbarComponent, IgxGridToolbarTitleComponent, IgxSelectComponent, FormsModule, IgxSelectItemComponent, IgxColumnComponent] }) export class LocalizationAllResourcesComponent implements OnInit { @ViewChild('grid', { read: IgxGridComponent, static: true }) diff --git a/src/app/services/transaction/transaction-base/transaction-base.component.html b/src/app/services/transaction/transaction-base/transaction-base.component.html index b9902941cd..9bfcec183f 100644 --- a/src/app/services/transaction/transaction-base/transaction-base.component.html +++ b/src/app/services/transaction/transaction-base/transaction-base.component.html @@ -1,34 +1,44 @@ - - Wishlist - - -

{{item.name}}

-

Costs: {{item.price}}

- edit - delete - - - + + Wishlist + + @for (item of this.wishlist | transactionBasePipe; track item) { + +

{{item.name}}

+

Costs: {{item.price}}

+ @if (item.id === 1 && item.price !== '$999') { + edit + } + @if (item.id === 2 && !isDeleted(item.id)) { + delete + } + + } + +
- - + +
-
-
Transaction Log
-
- {{transaction.type.toUpperCase()}} -> {{transaction.name}} Costs: {{transaction.price}} -
-
-
-
Data Items
-
-
{{item.name}} - {{item.price}}
-
-
+
+
Transaction Log
+ @for (transaction of this.getTransactionLog(); track transaction) { +
+ {{transaction.type.toUpperCase()}} -> {{transaction.name}} Costs: {{transaction.price}} +
+ } +
+
+
Data Items
+ @for (item of this.wishlist; track item) { +
+
{{item.name}} - {{item.price}}
+
+ } +
diff --git a/src/app/services/transaction/transaction-base/transaction-base.component.ts b/src/app/services/transaction/transaction-base/transaction-base.component.ts index 1f991a7b3d..9d3be54c57 100644 --- a/src/app/services/transaction/transaction-base/transaction-base.component.ts +++ b/src/app/services/transaction/transaction-base/transaction-base.component.ts @@ -1,14 +1,14 @@ import { Component } from '@angular/core'; import { IgxTransactionService, State, Transaction, TransactionType, IgxCardComponent, IgxListComponent, IgxListItemComponent, IgxListLineTitleDirective, IgxListLineSubTitleDirective, IgxIconComponent, IgxListActionDirective } from 'igniteui-angular'; import { WISHLIST, WishlistItem } from '../data'; -import { NgFor, NgClass, NgIf } from '@angular/common'; +import { NgClass } from '@angular/common'; import { TransactionBasePipe } from '../pipes/transaction-base.pipe'; @Component({ selector: 'app-transaction-base', styleUrls: ['./transaction-base.component.scss'], templateUrl: 'transaction-base.component.html', - imports: [IgxCardComponent, IgxListComponent, IgxListItemComponent, NgFor, NgClass, IgxListLineTitleDirective, IgxListLineSubTitleDirective, NgIf, IgxIconComponent, IgxListActionDirective, TransactionBasePipe] + imports: [IgxCardComponent, IgxListComponent, IgxListItemComponent, NgClass, IgxListLineTitleDirective, IgxListLineSubTitleDirective, IgxIconComponent, IgxListActionDirective, TransactionBasePipe] }) export class TransactionBaseComponent { public wishlist: WishlistItem[]; diff --git a/src/app/theming/angular/angular-sample.component.scss b/src/app/theming/angular/angular-sample.component.scss index c38f395c67..df13adac1c 100644 --- a/src/app/theming/angular/angular-sample.component.scss +++ b/src/app/theming/angular/angular-sample.component.scss @@ -139,7 +139,7 @@ igx-expansion-panel-body { @include typography($font-family: $material-typeface, $type-scale: $material-type-scale); &.light { - @include color-classes($palette: $igx-light-palette, $prop: "background", $prefix: "bg"); + @include color-classes($prop: "background", $prefix: "bg"); background: color($igx-light-palette, 'surface'); @@ -159,7 +159,7 @@ igx-expansion-panel-body { } &.dark { - @include color-classes($palette: $custom-dark-palette, $prop: "background", $prefix: "bg"); + @include color-classes($prop: "background", $prefix: "bg"); background: color($custom-dark-palette, 'surface'); diff --git a/src/app/theming/animations/animations-sample-1/animations-sample-1.component.html b/src/app/theming/animations/animations-sample-1/animations-sample-1.component.html index 75bbde46b7..c8ab62242e 100644 --- a/src/app/theming/animations/animations-sample-1/animations-sample-1.component.html +++ b/src/app/theming/animations/animations-sample-1/animations-sample-1.component.html @@ -1,23 +1,27 @@
-
Category
-
- - - {{ category }} - - -
+
Category
+
+ + @for (category of animationsCategories; track category) { + + {{ category }} + + } + +
-
Animation
-
- - - {{ animation.name }} - - -
+
Animation
+
+ + @for (animation of animations; track animation) { + + {{ animation.name }} + + } + +
+ class="custom-dialog" rightButtonLabel="Close" (rightButtonSelect)="dialog.close()"> diff --git a/src/app/theming/animations/animations-sample-1/animations-sample-1.component.ts b/src/app/theming/animations/animations-sample-1/animations-sample-1.component.ts index 8fcf45e8e7..f9130c877a 100644 --- a/src/app/theming/animations/animations-sample-1/animations-sample-1.component.ts +++ b/src/app/theming/animations/animations-sample-1/animations-sample-1.component.ts @@ -23,13 +23,13 @@ import { blink, fadeIn, fadeOut, flipBottom, flipHorBck, flipHorFwd, flipLeft, f swingInLeftFwd, swingInRightBck, swingInRightFwd, swingInTopBck, swingInTopFwd, swingOutBottomBck, swingOutBottomFwd, swingOutLeftBck, swingOutLefttFwd, swingOutRightBck, swingOutRightFwd, swingOutTopBck, swingOutTopFwd } from 'igniteui-angular/animations'; -import { NgFor } from '@angular/common'; + @Component({ selector: 'app-animations-sample-1', styleUrls: ['./animations-sample-1.component.scss'], templateUrl: './animations-sample-1.component.html', - imports: [IgxListComponent, NgFor, IgxListItemComponent, IgxDialogComponent] + imports: [IgxListComponent, IgxListItemComponent, IgxDialogComponent] }) export class AnimationsSampleComponent { @ViewChild('dialog', { static: true, read: IgxDialogComponent }) diff --git a/src/app/theming/bootstrap/bootstrap-sample.component.html b/src/app/theming/bootstrap/bootstrap-sample.component.html index 9bbbe330bf..db3cc5c8ea 100644 --- a/src/app/theming/bootstrap/bootstrap-sample.component.html +++ b/src/app/theming/bootstrap/bootstrap-sample.component.html @@ -1,292 +1,296 @@ - -
-
- -
- - -
Salaries
-
$ 346,692.72
- - - -

Compared to $ 341,053.43 last month

- - - - - - -
- - + > + Dark Theme
- - trending_up - -
- -
-
- -
- - -
Suppliers
-
$ 122,745.832
- +
+
+
+ - -

Compared to $ 201,935.75 last month

- - +
+
+ +
+ + +
Salaries
+
$ 346,692.72
+ - - - -
- + +
+ - + -
- - error - trending_down - -
- -
-
- -
- - -
Ads & Marketing
-
$ 42,646.43
- + +
+ + trending_up + +
+ +
+
+ +
+ + +
Suppliers
+
$ 122,745.832
+ - -

Compared to $ 41,951.37 last month

- - + +

Compared to $ 201,935.75 last month

+ + - -
- - + + >
+ + +
+ + error + trending_down + +
+ +
+
+ +
+ + +
Ads & Marketing
+
$ 42,646.43
+ + + +

Compared to $ 41,951.37 last month

+ + + + +
+ + +
-
- -
- trending_up - -
- -
-
-
-
-
-

- -

-
-
- - - - {{ contact.name }} - {{ contact.amount }} - - - - +
+ +
+ trending_up + +
+ +
-
-
- -
-

- +

+
+
+ + + @for (contact of contacts; track contact) { + + {{ contact.name }} + {{ contact.amount }} + + } + + + +
+
- - -
-
- - - - {{ contact.name }} - {{ contact.amount }} - - - - + +
+
+ + + @for (contact of contacts; track contact) { + + {{ contact.name }} + {{ contact.amount }} + + } + + + +
+
+
+
-
-
-
-
diff --git a/src/app/theming/bootstrap/bootstrap-sample.component.scss b/src/app/theming/bootstrap/bootstrap-sample.component.scss index ecd81c50a9..a361dba19a 100644 --- a/src/app/theming/bootstrap/bootstrap-sample.component.scss +++ b/src/app/theming/bootstrap/bootstrap-sample.component.scss @@ -51,7 +51,6 @@ $dark-secondary: color($custom-dark-palette, "secondary"); &.light { @include color-classes( - $palette: $light-bootstrap-palette, $prop: 'background', $prefix: 'bg' ); @@ -78,7 +77,6 @@ $dark-secondary: color($custom-dark-palette, "secondary"); &.dark { @include color-classes( - $palette: $custom-dark-palette, $prop: 'background', $prefix: 'bg' ); diff --git a/src/app/theming/bootstrap/bootstrap-sample.component.ts b/src/app/theming/bootstrap/bootstrap-sample.component.ts index 370b09e1a9..69c0ef455c 100644 --- a/src/app/theming/bootstrap/bootstrap-sample.component.ts +++ b/src/app/theming/bootstrap/bootstrap-sample.component.ts @@ -1,12 +1,12 @@ import { Component, HostBinding, OnInit, ViewChild } from '@angular/core'; import { IgxDialogComponent, IgxOverlayOutletDirective, IgxButtonDirective, IgxAvatarComponent, IgxIconButtonDirective, IgxIconComponent, IgxLayoutDirective, IgxCardComponent, IgxFlexDirective, IgxCardHeaderComponent, IgxCardHeaderTitleDirective, IgxCardHeaderSubtitleDirective, IgxCardContentDirective, IgxCardActionsComponent, IgxDialogActionsDirective, IgxSuffixDirective, IgxListComponent, IgxListItemComponent, IgxListLineTitleDirective, IgxListActionDirective } from 'igniteui-angular'; import { NgbDropdown, NgbDropdownToggle, NgbDropdownMenu, NgbDropdownItem, NgbRating, NgbAccordionDirective, NgbAccordionItem, NgbAccordionHeader, NgbAccordionToggle, NgbAccordionButton, NgbCollapse, NgbAccordionCollapse, NgbAccordionBody } from '@ng-bootstrap/ng-bootstrap'; -import { NgFor } from '@angular/common'; + @Component({ selector: 'app-bootstrap-sample', styleUrls: ['./bootstrap-sample.component.scss'], templateUrl: './bootstrap-sample.component.html', - imports: [IgxButtonDirective, NgbDropdown, NgbDropdownToggle, NgbDropdownMenu, NgbDropdownItem, IgxAvatarComponent, IgxIconButtonDirective, IgxIconComponent, IgxLayoutDirective, IgxCardComponent, IgxFlexDirective, IgxCardHeaderComponent, IgxCardHeaderTitleDirective, IgxCardHeaderSubtitleDirective, IgxCardContentDirective, NgbRating, IgxCardActionsComponent, IgxDialogComponent, IgxDialogActionsDirective, IgxSuffixDirective, IgxOverlayOutletDirective, NgbAccordionDirective, NgbAccordionItem, NgbAccordionHeader, NgbAccordionToggle, NgbAccordionButton, NgbCollapse, NgbAccordionCollapse, NgbAccordionBody, IgxListComponent, NgFor, IgxListItemComponent, IgxListLineTitleDirective, IgxListActionDirective] + imports: [IgxButtonDirective, NgbDropdown, NgbDropdownToggle, NgbDropdownMenu, NgbDropdownItem, IgxAvatarComponent, IgxIconButtonDirective, IgxIconComponent, IgxLayoutDirective, IgxCardComponent, IgxFlexDirective, IgxCardHeaderComponent, IgxCardHeaderTitleDirective, IgxCardHeaderSubtitleDirective, IgxCardContentDirective, NgbRating, IgxCardActionsComponent, IgxDialogComponent, IgxDialogActionsDirective, IgxSuffixDirective, IgxOverlayOutletDirective, NgbAccordionDirective, NgbAccordionItem, NgbAccordionHeader, NgbAccordionToggle, NgbAccordionButton, NgbCollapse, NgbAccordionCollapse, NgbAccordionBody, IgxListComponent, IgxListItemComponent, IgxListLineTitleDirective, IgxListActionDirective] }) export class BootstrapComponent implements OnInit{ diff --git a/src/app/tree-grid/column-selection-styles/tree-grid-column-selection-style.component.html b/src/app/tree-grid/column-selection-styles/tree-grid-column-selection-style.component.html index fb6af4c07b..5c91de75e1 100644 --- a/src/app/tree-grid/column-selection-styles/tree-grid-column-selection-style.component.html +++ b/src/app/tree-grid/column-selection-styles/tree-grid-column-selection-style.component.html @@ -1,16 +1,18 @@
- - - - + + @for (c of columnConfig; track c) { + + + } +
diff --git a/src/app/tree-grid/column-selection-styles/tree-grid-column-selection-style.component.ts b/src/app/tree-grid/column-selection-styles/tree-grid-column-selection-style.component.ts index 9798d23da2..640b9d7ba7 100644 --- a/src/app/tree-grid/column-selection-styles/tree-grid-column-selection-style.component.ts +++ b/src/app/tree-grid/column-selection-styles/tree-grid-column-selection-style.component.ts @@ -2,13 +2,13 @@ import { AfterViewInit, ChangeDetectorRef, Component, OnInit, ViewChild } from ' import { IgxTreeGridComponent, IgxColumnComponent } from 'igniteui-angular'; import { ORDERS_DATA } from '../data/orders'; import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; -import { NgFor } from '@angular/common'; + @Component({ selector: 'app-tree-grid-column-selection-style', templateUrl: './tree-grid-column-selection-style.component.html', styleUrls: ['./tree-grid-column-selection-style.component.scss'], - imports: [IgxTreeGridComponent, IgxPreventDocumentScrollDirective, NgFor, IgxColumnComponent] + imports: [IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent] }) export class TreeGridColumnSelectionStylesComponent implements OnInit, AfterViewInit { @ViewChild(IgxTreeGridComponent) diff --git a/src/app/tree-grid/column-selection/tree-grid-column-selection.component.html b/src/app/tree-grid/column-selection/tree-grid-column-selection.component.html index 189fc1a0e7..95accd0cbc 100644 --- a/src/app/tree-grid/column-selection/tree-grid-column-selection.component.html +++ b/src/app/tree-grid/column-selection/tree-grid-column-selection.component.html @@ -1,28 +1,30 @@
- - + + - - - None - Single - Mulitple - + + + None + Single + Mulitple + - + - - + @for (c of columnConfig; track c) { + + + } - +
diff --git a/src/app/tree-grid/column-selection/tree-grid-column-selection.component.ts b/src/app/tree-grid/column-selection/tree-grid-column-selection.component.ts index 60a285c26c..a47df93f29 100644 --- a/src/app/tree-grid/column-selection/tree-grid-column-selection.component.ts +++ b/src/app/tree-grid/column-selection/tree-grid-column-selection.component.ts @@ -3,13 +3,13 @@ import { GridSelectionMode, IgxTreeGridComponent, IgxGridToolbarComponent, IgxSe import { ORDERS_DATA } from '../data/orders'; import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; import { FormsModule } from '@angular/forms'; -import { NgFor } from '@angular/common'; + @Component({ selector: 'app-tree-grid-column-selection', templateUrl: './tree-grid-column-selection.component.html', styleUrls: ['./tree-grid-column-selection.component.scss'], - imports: [IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxGridToolbarComponent, IgxSelectComponent, FormsModule, IgxLabelDirective, IgxSelectItemComponent, NgFor, IgxColumnComponent] + imports: [IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxGridToolbarComponent, IgxSelectComponent, FormsModule, IgxLabelDirective, IgxSelectItemComponent, IgxColumnComponent] }) export class TreeGridColumnSelectionComponent implements OnInit, AfterViewInit { @ViewChild(IgxTreeGridComponent) diff --git a/src/app/tree-grid/tgrid-keyboard-guide/tgrid-keyboardnav-guide.component.html b/src/app/tree-grid/tgrid-keyboard-guide/tgrid-keyboardnav-guide.component.html index ae68d32a5e..d6a747e0ed 100644 --- a/src/app/tree-grid/tgrid-keyboard-guide/tgrid-keyboardnav-guide.component.html +++ b/src/app/tree-grid/tgrid-keyboard-guide/tgrid-keyboardnav-guide.component.html @@ -1,67 +1,73 @@
-
- - - +
+ + + @if (false) { + + } - - - - - - - - - - - - - -
- Country: {{cell.row.data.Country}} -
- City: {{cell.row.data.City}} -
- Postal Code: {{cell.row.data.Address}} -
- - - - - - - - - - - - - -
-
- - {{ headerList }} - -

{{ c.title }}

-

{{ c.subTitle }}

- - - - -
Use the native navigation of the browser until you reach some of the following grid sections below:
-
    -
  • Header
    • -
  • Body
    • -
  • Summary
    • -
-
When reached, an action list will be shown.
- + + + + + + + + + + + + + +
+ Country: {{cell.row.data.Country}} +
+ City: {{cell.row.data.City}} +
+ Postal Code: {{cell.row.data.Address}} +
- -
+ + + + + + + + + + + + +
+
+ + @if (keyboardCollection.length > 0) { + {{ headerList }} + } + @for (c of keyboardCollection; track c; let idx = $index) { + +

{{ c.title }}

+

{{ c.subTitle }}

+ + + } + + +
Use the native navigation of the browser until you reach some of the following grid sections below:
+
    +
  • Header
    • +
  • Body
    • +
  • Summary
    • +
+
When reached, an action list will be shown.
+ + + +
diff --git a/src/app/tree-grid/tgrid-keyboard-guide/tgrid-keyboardnav-guide.component.ts b/src/app/tree-grid/tgrid-keyboard-guide/tgrid-keyboardnav-guide.component.ts index e90db98df3..e77912e7c8 100644 --- a/src/app/tree-grid/tgrid-keyboard-guide/tgrid-keyboardnav-guide.component.ts +++ b/src/app/tree-grid/tgrid-keyboard-guide/tgrid-keyboardnav-guide.component.ts @@ -7,7 +7,7 @@ import { IgxColumnComponent, IgxColumnGroupComponent, CellType, IgxListComponent import { Subject } from 'rxjs'; import { takeUntil } from 'rxjs/operators'; import { generateEmployeeDetailedFlatData } from '../data/employees-flat-detailed'; -import { NgIf, NgFor, NgClass } from '@angular/common'; +import { NgClass } from '@angular/common'; // eslint-disable-next-line no-shadow enum GridSection { @@ -171,7 +171,7 @@ const summaryCombinations: Item[] = [ ]) ]) ], - imports: [IgxTreeGridComponent, IgxPaginatorComponent, NgIf, IgxGridToolbarComponent, IgxColumnComponent, IgxColumnGroupComponent, IgxCellTemplateDirective, IgxListComponent, IgxListItemComponent, NgFor, NgClass, IgxListLineTitleDirective, IgxListLineSubTitleDirective, IgxCheckboxComponent, IgxEmptyListTemplateDirective] + imports: [IgxTreeGridComponent, IgxPaginatorComponent, IgxGridToolbarComponent, IgxColumnComponent, IgxColumnGroupComponent, IgxCellTemplateDirective, IgxListComponent, IgxListItemComponent, NgClass, IgxListLineTitleDirective, IgxListLineSubTitleDirective, IgxCheckboxComponent, IgxEmptyListTemplateDirective] }) export class TGridKeyboardnavGuide implements OnInit, OnDestroy { @ViewChild(IgxTreeGridComponent, { static: true }) diff --git a/src/app/tree-grid/tree-grid-action-strip/tree-grid-action-strip-sample.html b/src/app/tree-grid/tree-grid-action-strip/tree-grid-action-strip-sample.html index d881f41ad9..1d1292180c 100644 --- a/src/app/tree-grid/tree-grid-action-strip/tree-grid-action-strip-sample.html +++ b/src/app/tree-grid/tree-grid-action-strip/tree-grid-action-strip-sample.html @@ -1,42 +1,49 @@
- - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + @if (!inEditMode(actionstrip.context)) { + + @if (isDirty(actionstrip.context)) { + + } + @if (!isDirty(actionstrip.context) && hasDiscardedTransactions(actionstrip.context)) { + + } + @if (isDirty(actionstrip.context)) { + + } + @if (!isDeleted(actionstrip.context)) { + + } + } + +
diff --git a/src/app/tree-grid/tree-grid-action-strip/tree-grid-action-strip-sample.ts b/src/app/tree-grid/tree-grid-action-strip/tree-grid-action-strip-sample.ts index 5cd00d769b..33b41da648 100644 --- a/src/app/tree-grid/tree-grid-action-strip/tree-grid-action-strip-sample.ts +++ b/src/app/tree-grid/tree-grid-action-strip/tree-grid-action-strip-sample.ts @@ -2,13 +2,13 @@ import { Component, ViewChild } from '@angular/core'; import { IgxTreeGridComponent, RowType, Transaction, IgxColumnComponent, IgxActionStripComponent, IgxGridPinningActionsComponent, IgxIconButtonDirective, IgxRippleDirective, IgxIconComponent } from 'igniteui-angular'; import { generateEmployeeDetailedFlatData } from '../data/employees-flat-detailed'; import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; -import { NgIf } from '@angular/common'; + @Component({ selector: 'app-tree-grid-row-action-strip', styleUrls: [`tree-grid-action-strip-sample.scss`], templateUrl: 'tree-grid-action-strip-sample.html', - imports: [IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxActionStripComponent, IgxGridPinningActionsComponent, NgIf, IgxIconButtonDirective, IgxRippleDirective, IgxIconComponent] + imports: [IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxActionStripComponent, IgxGridPinningActionsComponent, IgxIconButtonDirective, IgxRippleDirective, IgxIconComponent] }) export class TreeGridActionStripSampleComponent { @ViewChild('treeGrid', { read: IgxTreeGridComponent, static: true }) public grid: IgxTreeGridComponent; diff --git a/src/app/tree-grid/tree-grid-cellSelection-sample/tree-grid-cellSelection.component.html b/src/app/tree-grid/tree-grid-cellSelection-sample/tree-grid-cellSelection.component.html index e953c9c39c..f43e4f201d 100644 --- a/src/app/tree-grid/tree-grid-cellSelection-sample/tree-grid-cellSelection.component.html +++ b/src/app/tree-grid/tree-grid-cellSelection-sample/tree-grid-cellSelection.component.html @@ -1,44 +1,44 @@
- - - - - - - - - - - - + + + + + + + + + + + +
-
- notification_important - -
    -
  • This is the default selection behavior.
    • -
  • Click on a cell and while pressing the mouse key perform drag action. -
    • -
  • Select a cell and press Shift + Arrow down key, this will start range selection as well. -
    • -
- - -
    -
  • Now you can select only one cell within the grid.
    • -
  • On single cell click the previous selection state will be cleared.
    • -
  • The mouse drag will not work and instead of selecting a cell, this will make default text - selection.
    • -
- - -
    -
  • Now you are unable to select a cell while interacting with grid UI.
    • -
  • If you need to select a cell, you can use the grid API methods.
    • -
- -
+
+ notification_important + @if (selectionMode === 'multiple') { +
    +
  • This is the default selection behavior.
    • +
  • Click on a cell and while pressing the mouse key perform drag action. +
    • +
  • Select a cell and press Shift + Arrow down key, this will start range selection as well. +
    • +
+ } + @if (selectionMode === 'single') { +
    +
  • Now you can select only one cell within the grid.
    • +
  • On single cell click the previous selection state will be cleared.
    • +
  • The mouse drag will not work and instead of selecting a cell, this will make default text + selection.
    • +
+ } + @if (selectionMode === 'none') { +
    +
  • Now you are unable to select a cell while interacting with grid UI.
    • +
  • If you need to select a cell, you can use the grid API methods.
    • +
+ } +
diff --git a/src/app/tree-grid/tree-grid-cellSelection-sample/tree-grid-cellSelection.component.ts b/src/app/tree-grid/tree-grid-cellSelection-sample/tree-grid-cellSelection.component.ts index 9c9d399b5b..32c28fdd97 100644 --- a/src/app/tree-grid/tree-grid-cellSelection-sample/tree-grid-cellSelection.component.ts +++ b/src/app/tree-grid/tree-grid-cellSelection-sample/tree-grid-cellSelection.component.ts @@ -2,13 +2,13 @@ import { Component, OnInit, ViewChild } from '@angular/core'; import { GridSelectionMode, IgxSnackbarComponent, IgxTreeGridComponent, IgxButtonGroupComponent, IgxColumnComponent, IgxIconComponent } from 'igniteui-angular'; import { generateEmployeeFlatData } from '../data/employees-flat'; import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; -import { NgIf } from '@angular/common'; + @Component({ selector: 'app-tree-grid-cell-selection', styleUrls: ['./tree-grid-cellSelection.component.scss'], templateUrl: 'tree-grid-cellSelection.component.html', - imports: [IgxButtonGroupComponent, IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxSnackbarComponent, IgxIconComponent, NgIf] + imports: [IgxButtonGroupComponent, IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxSnackbarComponent, IgxIconComponent] }) export class TreeGridCellSelectionComponent implements OnInit { diff --git a/src/app/tree-grid/tree-grid-conditional-cell-style-2/tree-grid-conditional-cell-style-2.component.html b/src/app/tree-grid/tree-grid-conditional-cell-style-2/tree-grid-conditional-cell-style-2.component.html index 977dca9f4e..8b20470318 100644 --- a/src/app/tree-grid/tree-grid-conditional-cell-style-2/tree-grid-conditional-cell-style-2.component.html +++ b/src/app/tree-grid/tree-grid-conditional-cell-style-2/tree-grid-conditional-cell-style-2.component.html @@ -1,21 +1,23 @@
-
- - - - Note: You cannot use the callback functionality here - - -
- - - - +
+ + + + Note: You cannot use the callback functionality here + + +
+ + @for (c of columns; track c) { + + + } +
diff --git a/src/app/tree-grid/tree-grid-conditional-cell-style-2/tree-grid-conditional-cell-style-2.component.ts b/src/app/tree-grid/tree-grid-conditional-cell-style-2/tree-grid-conditional-cell-style-2.component.ts index 9586812a10..fcc8774739 100644 --- a/src/app/tree-grid/tree-grid-conditional-cell-style-2/tree-grid-conditional-cell-style-2.component.ts +++ b/src/app/tree-grid/tree-grid-conditional-cell-style-2/tree-grid-conditional-cell-style-2.component.ts @@ -2,13 +2,13 @@ import { Component, OnInit, ViewChild } from '@angular/core'; import { IgxColumnComponent, IgxTreeGridComponent, IgxInputGroupComponent, IgxInputDirective, IgxHintDirective, IgxButtonDirective } from 'igniteui-angular'; import { ORDERS_DATA } from '../data/orders'; import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; -import { NgFor, JsonPipe } from '@angular/common'; +import { JsonPipe } from '@angular/common'; @Component({ selector: 'app-grid-conditional-cell-style-2', styleUrls: ['./tree-grid-conditional-cell-style-2.component.scss'], templateUrl: './tree-grid-conditional-cell-style-2.component.html', - imports: [IgxInputGroupComponent, IgxInputDirective, IgxHintDirective, IgxButtonDirective, IgxTreeGridComponent, IgxPreventDocumentScrollDirective, NgFor, IgxColumnComponent, JsonPipe] + imports: [IgxInputGroupComponent, IgxInputDirective, IgxHintDirective, IgxButtonDirective, IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, JsonPipe] }) export class TreeGridConditionalCellStyle2Component implements OnInit { @ViewChild('grid1', { read: IgxTreeGridComponent, static: true }) diff --git a/src/app/tree-grid/tree-grid-conditional-cell-style-sample/tree-grid-conditional-cell-style-sample.component.html b/src/app/tree-grid/tree-grid-conditional-cell-style-sample/tree-grid-conditional-cell-style-sample.component.html index 99fc8ea049..d55f0ae430 100644 --- a/src/app/tree-grid/tree-grid-conditional-cell-style-sample/tree-grid-conditional-cell-style-sample.component.html +++ b/src/app/tree-grid/tree-grid-conditional-cell-style-sample/tree-grid-conditional-cell-style-sample.component.html @@ -1,26 +1,30 @@
- - - - - - - - - - - - - - - - - - Delivered - Undelivered - - - - May contain allergens. + + + + + + + + + + + + + + + + + + @if (val) { + Delivered + } + @if (!val) { + Undelivered + } + + + + May contain allergens.
diff --git a/src/app/tree-grid/tree-grid-conditional-cell-style-sample/tree-grid-conditional-cell-style-sample.component.ts b/src/app/tree-grid/tree-grid-conditional-cell-style-sample/tree-grid-conditional-cell-style-sample.component.ts index 55bd1edf98..c9d535f09b 100644 --- a/src/app/tree-grid/tree-grid-conditional-cell-style-sample/tree-grid-conditional-cell-style-sample.component.ts +++ b/src/app/tree-grid/tree-grid-conditional-cell-style-sample/tree-grid-conditional-cell-style-sample.component.ts @@ -2,13 +2,13 @@ import { Component, OnInit } from '@angular/core'; import { ORDERS_DATA } from '../data/orders'; import { IgxTreeGridComponent, IgxColumnComponent, IgxCellTemplateDirective } from 'igniteui-angular'; import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; -import { NgIf } from '@angular/common'; + @Component({ selector: 'app-tree-grid-conditional-cell-style-sample', styleUrls: ['./tree-grid-conditional-cell-style-sample.component.scss'], templateUrl: './tree-grid-conditional-cell-style-sample.component.html', - imports: [IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxCellTemplateDirective, NgIf] + imports: [IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxCellTemplateDirective] }) export class TreeGridConditionalCellStyleComponent implements OnInit { diff --git a/src/app/tree-grid/tree-grid-disable-summaries/tree-grid-disable-summaries.component.html b/src/app/tree-grid/tree-grid-disable-summaries/tree-grid-disable-summaries.component.html index 90d89a9fb4..5f0c379e8f 100644 --- a/src/app/tree-grid/tree-grid-disable-summaries/tree-grid-disable-summaries.component.html +++ b/src/app/tree-grid/tree-grid-disable-summaries/tree-grid-disable-summaries.component.html @@ -1,102 +1,101 @@
-
-
Disable Summaries for Column:
- -
- +
+
+
+

+ Disabled Summaries +

+
+
+ @for (summary of column.summaries; track summary; let i = $index) { + + {{ summary.summaryLabel }} + + } +
+
+ + -
-
-
-

- Disabled Summaries -

-
- -
- - {{ summary.summaryLabel }} - -
- -
- - -
-
-
+ Enable All +
- -
- +
+
+ } +
+ - - - - - - - - - - - - - - + + + + + + + + + + + + + +
diff --git a/src/app/tree-grid/tree-grid-disable-summaries/tree-grid-disable-summaries.component.ts b/src/app/tree-grid/tree-grid-disable-summaries/tree-grid-disable-summaries.component.ts index bac8a9d813..a559564f48 100644 --- a/src/app/tree-grid/tree-grid-disable-summaries/tree-grid-disable-summaries.component.ts +++ b/src/app/tree-grid/tree-grid-disable-summaries/tree-grid-disable-summaries.component.ts @@ -21,7 +21,7 @@ import { } from "igniteui-angular"; import { ORDERS_DATA } from "../data/orders"; import { IgxPreventDocumentScrollDirective } from "../../directives/prevent-scroll.directive"; -import { NgFor } from "@angular/common"; + class UnitsSummary { public operate( @@ -141,14 +141,13 @@ class DeliveredSummary { styleUrls: ["./tree-grid-disable-summaries.component.scss"], templateUrl: "./tree-grid-disable-summaries.component.html", imports: [ - NgFor, - IgxTreeGridComponent, - IgxPreventDocumentScrollDirective, - IgxColumnComponent, - IgxButtonDirective, - IgxCheckboxComponent, - IgxToggleDirective - ] + IgxTreeGridComponent, + IgxPreventDocumentScrollDirective, + IgxColumnComponent, + IgxButtonDirective, + IgxCheckboxComponent, + IgxToggleDirective +] }) export class TreeGridDisableSummariesComponent implements OnInit, AfterViewInit { @ViewChild("treeGrid1", { read: IgxTreeGridComponent, static: true }) public treeGrid1: IgxTreeGridComponent; diff --git a/src/app/tree-grid/tree-grid-excel-style-filtering-sample-1/tree-grid-excel-style-filtering-sample-1.component.html b/src/app/tree-grid/tree-grid-excel-style-filtering-sample-1/tree-grid-excel-style-filtering-sample-1.component.html index 59ac361e15..3acd1ea374 100644 --- a/src/app/tree-grid/tree-grid-excel-style-filtering-sample-1/tree-grid-excel-style-filtering-sample-1.component.html +++ b/src/app/tree-grid/tree-grid-excel-style-filtering-sample-1/tree-grid-excel-style-filtering-sample-1.component.html @@ -1,35 +1,39 @@
-
- -
- - - - - - - +
+ +
+ + + + + + + - - - - - - - - - - - - - - - - - Delivered - Undelivered - - - + + + + + + + + + + + + + + + + + @if (val) { + Delivered + } + @if (!val) { + Undelivered + } + + +
diff --git a/src/app/tree-grid/tree-grid-excel-style-filtering-sample-1/tree-grid-excel-style-filtering-sample-1.component.ts b/src/app/tree-grid/tree-grid-excel-style-filtering-sample-1/tree-grid-excel-style-filtering-sample-1.component.ts index f4ba07790e..7fb7976bab 100644 --- a/src/app/tree-grid/tree-grid-excel-style-filtering-sample-1/tree-grid-excel-style-filtering-sample-1.component.ts +++ b/src/app/tree-grid/tree-grid-excel-style-filtering-sample-1/tree-grid-excel-style-filtering-sample-1.component.ts @@ -2,13 +2,13 @@ import { Component, HostBinding, OnInit, ViewChild } from '@angular/core'; import { IgxTreeGridComponent, TreeGridFilteringStrategy, IgxButtonGroupComponent, IgxGridToolbarComponent, IgxGridToolbarActionsComponent, IgxGridToolbarHidingComponent, IgxGridToolbarPinningComponent, IgxColumnComponent, IgxCellTemplateDirective } from 'igniteui-angular'; import { ORDERS_DATA } from '../data/orders'; import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; -import { NgIf } from '@angular/common'; + @Component({ selector: 'app-tree-grid-excel-style-filtering-sample-1', styleUrls: ['./tree-grid-excel-style-filtering-sample-1.component.scss'], templateUrl: 'tree-grid-excel-style-filtering-sample-1.component.html', - imports: [IgxButtonGroupComponent, IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxGridToolbarComponent, IgxGridToolbarActionsComponent, IgxGridToolbarHidingComponent, IgxGridToolbarPinningComponent, IgxColumnComponent, IgxCellTemplateDirective, NgIf] + imports: [IgxButtonGroupComponent, IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxGridToolbarComponent, IgxGridToolbarActionsComponent, IgxGridToolbarHidingComponent, IgxGridToolbarPinningComponent, IgxColumnComponent, IgxCellTemplateDirective] }) export class TreeGridExcelStyleFilteringSample1Component implements OnInit { diff --git a/src/app/tree-grid/tree-grid-excel-style-filtering-sample-2/tree-grid-excel-style-filtering-sample-2.component.html b/src/app/tree-grid/tree-grid-excel-style-filtering-sample-2/tree-grid-excel-style-filtering-sample-2.component.html index 1060db133c..0b71ee850d 100644 --- a/src/app/tree-grid/tree-grid-excel-style-filtering-sample-2/tree-grid-excel-style-filtering-sample-2.component.html +++ b/src/app/tree-grid/tree-grid-excel-style-filtering-sample-2/tree-grid-excel-style-filtering-sample-2.component.html @@ -1,32 +1,36 @@
- - - - - - - + + + + + + + - - - - - - - - - - - - - - - - - Delivered - Undelivered - - - + + + + + + + + + + + + + + + + + @if (val) { + Delivered + } + @if (!val) { + Undelivered + } + + +
diff --git a/src/app/tree-grid/tree-grid-excel-style-filtering-sample-2/tree-grid-excel-style-filtering-sample-2.component.ts b/src/app/tree-grid/tree-grid-excel-style-filtering-sample-2/tree-grid-excel-style-filtering-sample-2.component.ts index 67b7adc2db..72e0df5110 100644 --- a/src/app/tree-grid/tree-grid-excel-style-filtering-sample-2/tree-grid-excel-style-filtering-sample-2.component.ts +++ b/src/app/tree-grid/tree-grid-excel-style-filtering-sample-2/tree-grid-excel-style-filtering-sample-2.component.ts @@ -2,13 +2,13 @@ import { Component, OnInit, ViewChild } from '@angular/core'; import { IgxTreeGridComponent, IgxGridToolbarComponent, IgxGridToolbarActionsComponent, IgxGridToolbarHidingComponent, IgxGridToolbarPinningComponent, IgxColumnComponent, IgxCellTemplateDirective } from 'igniteui-angular'; import { ORDERS_DATA } from '../data/orders'; import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; -import { NgIf } from '@angular/common'; + @Component({ selector: 'app-tree-grid-excel-style-filtering-sample-2', styleUrls: ['./tree-grid-excel-style-filtering-sample-2.component.scss'], templateUrl: 'tree-grid-excel-style-filtering-sample-2.component.html', - imports: [IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxGridToolbarComponent, IgxGridToolbarActionsComponent, IgxGridToolbarHidingComponent, IgxGridToolbarPinningComponent, IgxColumnComponent, IgxCellTemplateDirective, NgIf] + imports: [IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxGridToolbarComponent, IgxGridToolbarActionsComponent, IgxGridToolbarHidingComponent, IgxGridToolbarPinningComponent, IgxColumnComponent, IgxCellTemplateDirective] }) export class TreeGridExcelStyleFilteringSample2Component implements OnInit { diff --git a/src/app/tree-grid/tree-grid-excel-style-filtering-sample-3/tree-grid-excel-style-filtering-sample-3.component.html b/src/app/tree-grid/tree-grid-excel-style-filtering-sample-3/tree-grid-excel-style-filtering-sample-3.component.html index 3379407b46..86b0a65f2e 100644 --- a/src/app/tree-grid/tree-grid-excel-style-filtering-sample-3/tree-grid-excel-style-filtering-sample-3.component.html +++ b/src/app/tree-grid/tree-grid-excel-style-filtering-sample-3/tree-grid-excel-style-filtering-sample-3.component.html @@ -1,52 +1,56 @@
- - - - - - + + + + + + - - filter_alt - + + filter_alt + - - - - + + + + - - + + - - - - + + + + - - - - - - - - - - - - - - - - - Delivered - Undelivered - - - + + + + + + + + + + + + + + + + + @if (val) { + Delivered + } + @if (!val) { + Undelivered + } + + +
diff --git a/src/app/tree-grid/tree-grid-excel-style-filtering-sample-3/tree-grid-excel-style-filtering-sample-3.component.ts b/src/app/tree-grid/tree-grid-excel-style-filtering-sample-3/tree-grid-excel-style-filtering-sample-3.component.ts index 3a19ea90ac..a8d8528a82 100644 --- a/src/app/tree-grid/tree-grid-excel-style-filtering-sample-3/tree-grid-excel-style-filtering-sample-3.component.ts +++ b/src/app/tree-grid/tree-grid-excel-style-filtering-sample-3/tree-grid-excel-style-filtering-sample-3.component.ts @@ -2,13 +2,13 @@ import { Component, OnInit, ViewChild } from '@angular/core'; import { IgxTreeGridComponent, IgxGridToolbarComponent, IgxGridToolbarActionsComponent, IgxGridToolbarHidingComponent, IgxExcelStyleHeaderIconDirective, IgxIconComponent, IgxGridExcelStyleFilteringComponent, IgxExcelStyleColumnOperationsTemplateDirective, IgxExcelStyleHeaderComponent, IgxExcelStyleSortingComponent, IgxExcelStyleFilterOperationsTemplateDirective, IgxExcelStyleSearchComponent, IgxColumnComponent, IgxCellTemplateDirective } from 'igniteui-angular'; import { ORDERS_DATA } from '../data/orders'; import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; -import { NgIf } from '@angular/common'; + @Component({ selector: 'app-tree-grid-excel-style-filtering-sample-3', styleUrls: ['./tree-grid-excel-style-filtering-sample-3.component.scss'], templateUrl: 'tree-grid-excel-style-filtering-sample-3.component.html', - imports: [IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxGridToolbarComponent, IgxGridToolbarActionsComponent, IgxGridToolbarHidingComponent, IgxExcelStyleHeaderIconDirective, IgxIconComponent, IgxGridExcelStyleFilteringComponent, IgxExcelStyleColumnOperationsTemplateDirective, IgxExcelStyleHeaderComponent, IgxExcelStyleSortingComponent, IgxExcelStyleFilterOperationsTemplateDirective, IgxExcelStyleSearchComponent, IgxColumnComponent, IgxCellTemplateDirective, NgIf] + imports: [IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxGridToolbarComponent, IgxGridToolbarActionsComponent, IgxGridToolbarHidingComponent, IgxExcelStyleHeaderIconDirective, IgxIconComponent, IgxGridExcelStyleFilteringComponent, IgxExcelStyleColumnOperationsTemplateDirective, IgxExcelStyleHeaderComponent, IgxExcelStyleSortingComponent, IgxExcelStyleFilterOperationsTemplateDirective, IgxExcelStyleSearchComponent, IgxColumnComponent, IgxCellTemplateDirective] }) export class TreeGridExcelStyleFilteringSample3Component implements OnInit { diff --git a/src/app/tree-grid/tree-grid-excel-style-filtering-style/tree-grid-excel-style-filtering-style.component.html b/src/app/tree-grid/tree-grid-excel-style-filtering-style/tree-grid-excel-style-filtering-style.component.html index 5e2009f7fb..63b7decaba 100644 --- a/src/app/tree-grid/tree-grid-excel-style-filtering-style/tree-grid-excel-style-filtering-style.component.html +++ b/src/app/tree-grid/tree-grid-excel-style-filtering-style/tree-grid-excel-style-filtering-style.component.html @@ -1,25 +1,29 @@
- - - - - - - - - - - - - - - - - - Delivered - Undelivered - - - + + + + + + + + + + + + + + + + + + @if (val) { + Delivered + } + @if (!val) { + Undelivered + } + + +
diff --git a/src/app/tree-grid/tree-grid-excel-style-filtering-style/tree-grid-excel-style-filtering-style.component.ts b/src/app/tree-grid/tree-grid-excel-style-filtering-style/tree-grid-excel-style-filtering-style.component.ts index 5f9089880c..0d114525d6 100644 --- a/src/app/tree-grid/tree-grid-excel-style-filtering-style/tree-grid-excel-style-filtering-style.component.ts +++ b/src/app/tree-grid/tree-grid-excel-style-filtering-style/tree-grid-excel-style-filtering-style.component.ts @@ -2,13 +2,13 @@ import { Component, OnInit, ViewChild } from '@angular/core'; import { IgxTreeGridComponent, IgxColumnComponent, IgxCellTemplateDirective } from 'igniteui-angular'; import { ORDERS_DATA } from '../data/orders'; import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; -import { NgIf } from '@angular/common'; + @Component({ selector: 'app-tree-grid-excel-style-filtering-style', styleUrls: ['./tree-grid-excel-style-filtering-style.component.scss'], templateUrl: 'tree-grid-excel-style-filtering-style.component.html', - imports: [IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxCellTemplateDirective, NgIf] + imports: [IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxCellTemplateDirective] }) export class TreeGridExcelStyleFilteringStyleComponent implements OnInit { diff --git a/src/app/tree-grid/tree-grid-external-advanced-filtering/tree-grid-external-advanced-filtering.component.html b/src/app/tree-grid/tree-grid-external-advanced-filtering/tree-grid-external-advanced-filtering.component.html index 2bbf5da074..ea4bf72099 100644 --- a/src/app/tree-grid/tree-grid-external-advanced-filtering/tree-grid-external-advanced-filtering.component.html +++ b/src/app/tree-grid/tree-grid-external-advanced-filtering/tree-grid-external-advanced-filtering.component.html @@ -1,28 +1,32 @@
- - + + - - - - - - - - - - - - - - - - - - Delivered - Undelivered - - - + + + + + + + + + + + + + + + + + + @if (val) { + Delivered + } + @if (!val) { + Undelivered + } + + +
diff --git a/src/app/tree-grid/tree-grid-external-advanced-filtering/tree-grid-external-advanced-filtering.component.ts b/src/app/tree-grid/tree-grid-external-advanced-filtering/tree-grid-external-advanced-filtering.component.ts index 90c680d05d..d44ef77ae0 100644 --- a/src/app/tree-grid/tree-grid-external-advanced-filtering/tree-grid-external-advanced-filtering.component.ts +++ b/src/app/tree-grid/tree-grid-external-advanced-filtering/tree-grid-external-advanced-filtering.component.ts @@ -2,13 +2,13 @@ import { Component, OnInit } from '@angular/core'; import { ORDERS_DATA } from '../data/orders'; import { IgxAdvancedFilteringDialogComponent, IgxTreeGridComponent, IgxColumnComponent, IgxCellTemplateDirective } from 'igniteui-angular'; import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; -import { NgIf } from '@angular/common'; + @Component({ selector: 'app-tree-grid-external-advanced-filtering', templateUrl: './tree-grid-external-advanced-filtering.component.html', styleUrls: ['./tree-grid-external-advanced-filtering.component.scss'], - imports: [IgxAdvancedFilteringDialogComponent, IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxCellTemplateDirective, NgIf] + imports: [IgxAdvancedFilteringDialogComponent, IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxCellTemplateDirective] }) export class TreeGridExternalAdvancedFilteringComponent { public data: any[]; diff --git a/src/app/tree-grid/tree-grid-external-excel-style-filtering/tree-grid-external-excel-style-filtering.component.html b/src/app/tree-grid/tree-grid-external-excel-style-filtering/tree-grid-external-excel-style-filtering.component.html index 3790283e7c..589cb3918e 100644 --- a/src/app/tree-grid/tree-grid-external-excel-style-filtering/tree-grid-external-excel-style-filtering.component.html +++ b/src/app/tree-grid/tree-grid-external-excel-style-filtering/tree-grid-external-excel-style-filtering.component.html @@ -1,37 +1,43 @@
-
- - - - {{ c.field }} - - +
+ + + @for (c of tGrid.columns; track c) { + + {{ c.field }} + + } + - - -
+ + +
- - - - - - - - - - - - - - - - - - Delivered - Undelivered - - - + + + + + + + + + + + + + + + + + + @if (val) { + Delivered + } + @if (!val) { + Undelivered + } + + +
diff --git a/src/app/tree-grid/tree-grid-external-excel-style-filtering/tree-grid-external-excel-style-filtering.component.ts b/src/app/tree-grid/tree-grid-external-excel-style-filtering/tree-grid-external-excel-style-filtering.component.ts index cdf7125ae6..bd11b1a269 100644 --- a/src/app/tree-grid/tree-grid-external-excel-style-filtering/tree-grid-external-excel-style-filtering.component.ts +++ b/src/app/tree-grid/tree-grid-external-excel-style-filtering/tree-grid-external-excel-style-filtering.component.ts @@ -1,7 +1,7 @@ import { Component, ViewChild, ChangeDetectionStrategy, OnInit } from '@angular/core'; import { ORDERS_DATA } from '../data/orders'; import { IgxSelectComponent, IgxLabelDirective, IgxSelectItemComponent, IgxGridExcelStyleFilteringComponent, IgxTreeGridComponent, IgxColumnComponent, IgxCellTemplateDirective } from 'igniteui-angular'; -import { NgFor, NgIf } from '@angular/common'; + import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; @Component({ @@ -9,7 +9,7 @@ import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scro selector: 'app-tree-grid-external-excel-style-filtering', templateUrl: './tree-grid-external-excel-style-filtering.component.html', styleUrls: ['./tree-grid-external-excel-style-filtering.component.scss'], - imports: [IgxSelectComponent, IgxLabelDirective, NgFor, IgxSelectItemComponent, IgxGridExcelStyleFilteringComponent, IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxCellTemplateDirective, NgIf] + imports: [IgxSelectComponent, IgxLabelDirective, IgxSelectItemComponent, IgxGridExcelStyleFilteringComponent, IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxCellTemplateDirective] }) export class TreeGridExternalExcelStyleFilteringComponent implements OnInit { public data: any[]; diff --git a/src/app/tree-grid/tree-grid-external-outlet/tree-grid-external-outlet-sample.component.html b/src/app/tree-grid/tree-grid-external-outlet/tree-grid-external-outlet-sample.component.html index 4d5677b609..0bf4c805f7 100644 --- a/src/app/tree-grid/tree-grid-external-outlet/tree-grid-external-outlet-sample.component.html +++ b/src/app/tree-grid/tree-grid-external-outlet/tree-grid-external-outlet-sample.component.html @@ -1,68 +1,76 @@
- - - - - - + + + + + + - - - - - - - - - - - - - - - - - Delivered - Undelivered - - - + + + + + + + + + + + + + + + + + @if (val) { + Delivered + } + @if (!val) { + Undelivered + } + + + -
+
- - - - - + [allowFiltering]="true" primaryKey="ID" foreignKey="ParentID" filterMode="excelStyleFilter" + [outlet]="filteringOverlayOutlet"> + + + + + - - - - - - - - - - - - - - - - - Delivered - Undelivered - - + + + + + + + + + + + + + + + + + @if (val) { + Delivered + } + @if (!val) { + Undelivered + } + + -
+
-
+
diff --git a/src/app/tree-grid/tree-grid-external-outlet/tree-grid-external-outlet-sample.component.ts b/src/app/tree-grid/tree-grid-external-outlet/tree-grid-external-outlet-sample.component.ts index b622ab54a6..ec5d6bafe7 100644 --- a/src/app/tree-grid/tree-grid-external-outlet/tree-grid-external-outlet-sample.component.ts +++ b/src/app/tree-grid/tree-grid-external-outlet/tree-grid-external-outlet-sample.component.ts @@ -2,13 +2,13 @@ import { Component, OnInit } from '@angular/core'; import { ORDERS_DATA } from '../data/orders'; import { IgxTreeGridComponent, IgxGridToolbarComponent, IgxGridToolbarActionsComponent, IgxGridToolbarHidingComponent, IgxColumnComponent, IgxCellTemplateDirective, IgxOverlayOutletDirective } from 'igniteui-angular'; import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; -import { NgIf } from '@angular/common'; + @Component({ selector: 'app-tree-grid-external-outlet', styleUrls: ['./tree-grid-external-outlet-sample.component.scss'], templateUrl: 'tree-grid-external-outlet-sample.component.html', - imports: [IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxGridToolbarComponent, IgxGridToolbarActionsComponent, IgxGridToolbarHidingComponent, IgxColumnComponent, IgxCellTemplateDirective, NgIf, IgxOverlayOutletDirective] + imports: [IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxGridToolbarComponent, IgxGridToolbarActionsComponent, IgxGridToolbarHidingComponent, IgxColumnComponent, IgxCellTemplateDirective, IgxOverlayOutletDirective] }) export class TreeGridExternalOutletComponent implements OnInit { diff --git a/src/app/tree-grid/tree-grid-filtering-custom-sample/tree-grid-filtering-custom-sample.component.html b/src/app/tree-grid/tree-grid-filtering-custom-sample/tree-grid-filtering-custom-sample.component.html index fd02b540ac..fbe665b1ad 100644 --- a/src/app/tree-grid/tree-grid-filtering-custom-sample/tree-grid-filtering-custom-sample.component.html +++ b/src/app/tree-grid/tree-grid-filtering-custom-sample/tree-grid-filtering-custom-sample.component.html @@ -1,25 +1,29 @@
- - - - - - - - - - - - - - - - - - Delivered - Undelivered - - - + + + + + + + + + + + + + + + + + + @if (val) { + Delivered + } + @if (!val) { + Undelivered + } + + +
diff --git a/src/app/tree-grid/tree-grid-filtering-custom-sample/tree-grid-filtering-custom-sample.component.ts b/src/app/tree-grid/tree-grid-filtering-custom-sample/tree-grid-filtering-custom-sample.component.ts index f15b60f175..29a35ffdf2 100644 --- a/src/app/tree-grid/tree-grid-filtering-custom-sample/tree-grid-filtering-custom-sample.component.ts +++ b/src/app/tree-grid/tree-grid-filtering-custom-sample/tree-grid-filtering-custom-sample.component.ts @@ -2,13 +2,13 @@ import { Component, OnInit } from '@angular/core'; import { IgxBooleanFilteringOperand, IgxStringFilteringOperand, IgxTreeGridComponent, IgxColumnComponent, IgxCellTemplateDirective } from 'igniteui-angular'; import { ORDERS_DATA } from '../data/orders'; import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; -import { NgIf } from '@angular/common'; + @Component({ selector: 'app-tree-grid-filtering-custom-sample', styleUrls: ['./tree-grid-filtering-custom-sample.component.scss'], templateUrl: './tree-grid-filtering-custom-sample.component.html', - imports: [IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxCellTemplateDirective, NgIf] + imports: [IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxCellTemplateDirective] }) export class TreeGridFilteringCustomSampleComponent implements OnInit { public data: any[]; diff --git a/src/app/tree-grid/tree-grid-filtering-sample/tree-grid-filtering-sample.component.html b/src/app/tree-grid/tree-grid-filtering-sample/tree-grid-filtering-sample.component.html index d3bd081e6c..870125aab7 100644 --- a/src/app/tree-grid/tree-grid-filtering-sample/tree-grid-filtering-sample.component.html +++ b/src/app/tree-grid/tree-grid-filtering-sample/tree-grid-filtering-sample.component.html @@ -1,30 +1,34 @@
-
- - -
-
- - - - - - - - - - - - - - - - - - Delivered - Undelivered - - - +
+ + +
+
+ + + + + + + + + + + + + + + + + + @if (val) { + Delivered + } + @if (!val) { + Undelivered + } + + +
diff --git a/src/app/tree-grid/tree-grid-filtering-sample/tree-grid-filtering-sample.component.ts b/src/app/tree-grid/tree-grid-filtering-sample/tree-grid-filtering-sample.component.ts index 2c73ac6f88..4a22c92cba 100644 --- a/src/app/tree-grid/tree-grid-filtering-sample/tree-grid-filtering-sample.component.ts +++ b/src/app/tree-grid/tree-grid-filtering-sample/tree-grid-filtering-sample.component.ts @@ -2,13 +2,13 @@ import { Component, OnInit, ViewChild } from '@angular/core'; import { IgxStringFilteringOperand, IgxTreeGridComponent, IgxInputGroupComponent, IgxInputDirective, IgxColumnComponent, IgxCellTemplateDirective } from 'igniteui-angular'; import { ORDERS_DATA } from '../data/orders'; import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; -import { NgIf } from '@angular/common'; + @Component({ selector: 'app-tree-grid-filtering-sample', styleUrls: ['./tree-grid-filtering-sample.component.scss'], templateUrl: 'tree-grid-filtering-sample.component.html', - imports: [IgxInputGroupComponent, IgxInputDirective, IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxCellTemplateDirective, NgIf] + imports: [IgxInputGroupComponent, IgxInputDirective, IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxCellTemplateDirective] }) export class TreeGridFilteringSampleComponent implements OnInit { diff --git a/src/app/tree-grid/tree-grid-filtering-style/tree-grid-filtering-style.component.html b/src/app/tree-grid/tree-grid-filtering-style/tree-grid-filtering-style.component.html index 0d861d3710..93cc7ffaa1 100644 --- a/src/app/tree-grid/tree-grid-filtering-style/tree-grid-filtering-style.component.html +++ b/src/app/tree-grid/tree-grid-filtering-style/tree-grid-filtering-style.component.html @@ -1,25 +1,29 @@
- - - - - - - - - - - - - - - - - - Delivered - Undeliveredd - - - + + + + + + + + + + + + + + + + + + @if (val) { + Delivered + } + @if (!val) { + Undeliveredd + } + + +
diff --git a/src/app/tree-grid/tree-grid-filtering-style/tree-grid-filtering-style.component.ts b/src/app/tree-grid/tree-grid-filtering-style/tree-grid-filtering-style.component.ts index a1c634e81a..9ec465bf8f 100644 --- a/src/app/tree-grid/tree-grid-filtering-style/tree-grid-filtering-style.component.ts +++ b/src/app/tree-grid/tree-grid-filtering-style/tree-grid-filtering-style.component.ts @@ -2,13 +2,13 @@ import { Component, OnInit } from '@angular/core'; import { ORDERS_DATA } from '../data/orders'; import { IgxTreeGridComponent, IgxColumnComponent, IgxCellTemplateDirective } from 'igniteui-angular'; import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; -import { NgIf } from '@angular/common'; + @Component({ selector: 'app-tree-grid-filtering-style', styleUrls: ['./tree-grid-filtering-style.component.scss'], templateUrl: './tree-grid-filtering-style.component.html', - imports: [IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxCellTemplateDirective, NgIf] + imports: [IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxCellTemplateDirective] }) export class TreeGridFilteringStyleComponent implements OnInit { public data: any[]; diff --git a/src/app/tree-grid/tree-grid-filtering-template-sample/tree-grid-filtering-template-sample.component.html b/src/app/tree-grid/tree-grid-filtering-template-sample/tree-grid-filtering-template-sample.component.html index 2b0c9cfe85..8b12976bfb 100644 --- a/src/app/tree-grid/tree-grid-filtering-template-sample/tree-grid-filtering-template-sample.component.html +++ b/src/app/tree-grid/tree-grid-filtering-template-sample/tree-grid-filtering-template-sample.component.html @@ -1,66 +1,74 @@
- - - - - - - - - - - - {{+val | currency}} - - - - - {{+val | currency}} - - - - - - - Delivered - Undelivered - - - - -
- - - search - - - - clear - - -
- - -
- - - search - - - clear - - -
- -
+ + + + + + + + + + + + {{+val | currency}} + + + + + {{+val | currency}} + + + + + + + @if (val) { + Delivered + } + @if (!val) { + Undelivered + } + + + + +
+ + + search + + + @if (input.value || input.value === '0') { + + clear + + } + +
+ + +
+ + + search + + @if (picker.value) { + + clear + + } + +
+ +
diff --git a/src/app/tree-grid/tree-grid-filtering-template-sample/tree-grid-filtering-template-sample.component.ts b/src/app/tree-grid/tree-grid-filtering-template-sample/tree-grid-filtering-template-sample.component.ts index 5835fe2762..f7dfa47988 100644 --- a/src/app/tree-grid/tree-grid-filtering-template-sample/tree-grid-filtering-template-sample.component.ts +++ b/src/app/tree-grid/tree-grid-filtering-template-sample/tree-grid-filtering-template-sample.component.ts @@ -2,13 +2,13 @@ import { Component, OnInit, ViewChild } from '@angular/core'; import { GridColumnDataType, ColumnType, IgxDateFilteringOperand, IgxNumberFilteringOperand, IgxStringFilteringOperand, IgxTreeGridComponent, IgxColumnComponent, IgxCellTemplateDirective, IgxFilterCellTemplateDirective, IgxInputGroupComponent, IgxPrefixDirective, IgxIconComponent, IgxInputDirective, IgxSuffixDirective, IgxDatePickerComponent, IgxPickerToggleComponent, IgxPickerClearComponent } from 'igniteui-angular'; import { ORDERS_DATA } from '../data/orders'; import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; -import { NgIf, CurrencyPipe } from '@angular/common'; +import { CurrencyPipe } from '@angular/common'; @Component({ selector: 'app-tree-grid-filtering-template-sample', styleUrls: ['./tree-grid-filtering-template-sample.component.scss'], templateUrl: 'tree-grid-filtering-template-sample.component.html', - imports: [IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxCellTemplateDirective, NgIf, IgxFilterCellTemplateDirective, IgxInputGroupComponent, IgxPrefixDirective, IgxIconComponent, IgxInputDirective, IgxSuffixDirective, IgxDatePickerComponent, IgxPickerToggleComponent, IgxPickerClearComponent, CurrencyPipe] + imports: [IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxCellTemplateDirective, IgxFilterCellTemplateDirective, IgxInputGroupComponent, IgxPrefixDirective, IgxIconComponent, IgxInputDirective, IgxSuffixDirective, IgxDatePickerComponent, IgxPickerToggleComponent, IgxPickerClearComponent, CurrencyPipe] }) export class TreeGridFilteringTemplateSampleComponent implements OnInit { diff --git a/src/app/tree-grid/tree-grid-formatted-filtering-strategy/tree-grid-formatted-filtering-strategy.component.html b/src/app/tree-grid/tree-grid-formatted-filtering-strategy/tree-grid-formatted-filtering-strategy.component.html index d02e337ef5..6fe4989493 100644 --- a/src/app/tree-grid/tree-grid-formatted-filtering-strategy/tree-grid-formatted-filtering-strategy.component.html +++ b/src/app/tree-grid/tree-grid-formatted-filtering-strategy/tree-grid-formatted-filtering-strategy.component.html @@ -1,27 +1,31 @@
- + - - - - - - - - - - - - - - - - - Delivered - Undelivered - - - + + + + + + + + + + + + + + + + + @if (val) { + Delivered + } + @if (!val) { + Undelivered + } + + +
diff --git a/src/app/tree-grid/tree-grid-formatted-filtering-strategy/tree-grid-formatted-filtering-strategy.component.ts b/src/app/tree-grid/tree-grid-formatted-filtering-strategy/tree-grid-formatted-filtering-strategy.component.ts index 7c3e00ca03..7b89a173a5 100644 --- a/src/app/tree-grid/tree-grid-formatted-filtering-strategy/tree-grid-formatted-filtering-strategy.component.ts +++ b/src/app/tree-grid/tree-grid-formatted-filtering-strategy/tree-grid-formatted-filtering-strategy.component.ts @@ -2,13 +2,13 @@ import { Component, OnInit, ViewChild } from '@angular/core'; import { IgxTreeGridComponent, TreeGridFormattedValuesFilteringStrategy, IgxColumnComponent, IgxCellTemplateDirective } from 'igniteui-angular'; import { ORDERS_DATA } from '../data/orders'; import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; -import { NgIf } from '@angular/common'; + @Component({ selector: 'app-tree-grid-formatted-filtering-strategy', styleUrls: ['./tree-grid-formatted-filtering-strategy.component.scss'], templateUrl: 'tree-grid-formatted-filtering-strategy.component.html', - imports: [IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxCellTemplateDirective, NgIf] + imports: [IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxCellTemplateDirective] }) export class TreeGridFormattedFilteringStrategyComponent implements OnInit { diff --git a/src/app/tree-grid/tree-grid-pager-sample/tree-grid-pager-sample.component.html b/src/app/tree-grid/tree-grid-pager-sample/tree-grid-pager-sample.component.html index 81bf26d5d9..3a3a4e4ce2 100644 --- a/src/app/tree-grid/tree-grid-pager-sample/tree-grid-pager-sample.component.html +++ b/src/app/tree-grid/tree-grid-pager-sample/tree-grid-pager-sample.component.html @@ -1,38 +1,46 @@
- - - - - - - - - - - - - - - - - - - - - - - - Delivered - Undelivered - - - + + + + @if (!isDropdownHidden) { + + } + @if (!isPagerHidden) { + + } + + + + + + + + + + + + + + + + + + + @if (val) { + Delivered + } + @if (!val) { + Undelivered + } + + + -
- Hide Dropdown - Hide Pager -
+
+ Hide Dropdown + Hide Pager +
diff --git a/src/app/tree-grid/tree-grid-pager-sample/tree-grid-pager-sample.component.ts b/src/app/tree-grid/tree-grid-pager-sample/tree-grid-pager-sample.component.ts index add7f64daa..e38fda03c3 100644 --- a/src/app/tree-grid/tree-grid-pager-sample/tree-grid-pager-sample.component.ts +++ b/src/app/tree-grid/tree-grid-pager-sample/tree-grid-pager-sample.component.ts @@ -2,14 +2,14 @@ import { Component, OnInit, ViewChild, AfterViewInit } from '@angular/core'; import { IPaginatorResourceStrings, IgxPaginatorComponent, IgxTreeGridComponent, IgxPaginatorContentDirective, IgxPageSizeSelectorComponent, IgxPageNavigationComponent, IgxColumnComponent, IgxCellTemplateDirective, IgxSwitchComponent } from 'igniteui-angular'; import { ORDERS_DATA } from '../data/orders'; import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; -import { NgIf } from '@angular/common'; + import { FormsModule } from '@angular/forms'; @Component({ selector: 'app-tree-grid-pager-sample', styleUrls: ['./tree-grid-pager-sample.component.scss'], templateUrl: './tree-grid-pager-sample.component.html', - imports: [IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxPaginatorComponent, IgxPaginatorContentDirective, NgIf, IgxPageSizeSelectorComponent, IgxPageNavigationComponent, IgxColumnComponent, IgxCellTemplateDirective, IgxSwitchComponent, FormsModule] + imports: [IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxPaginatorComponent, IgxPaginatorContentDirective, IgxPageSizeSelectorComponent, IgxPageNavigationComponent, IgxColumnComponent, IgxCellTemplateDirective, IgxSwitchComponent, FormsModule] }) export class TreeGridPagerSampleComponent implements OnInit, AfterViewInit { @ViewChild('paginator', { read: IgxPaginatorComponent, static: false }) diff --git a/src/app/tree-grid/tree-grid-paging-sample/tree-grid-paging-sample.component.html b/src/app/tree-grid/tree-grid-paging-sample/tree-grid-paging-sample.component.html index 2885944f07..a788fa63fd 100644 --- a/src/app/tree-grid/tree-grid-paging-sample/tree-grid-paging-sample.component.html +++ b/src/app/tree-grid/tree-grid-paging-sample/tree-grid-paging-sample.component.html @@ -1,26 +1,30 @@
- - - - - - - - - - - - - - - - - - - Delivered - Undelivered - - - + + + + + + + + + + + + + + + + + + + @if (val) { + Delivered + } + @if (!val) { + Undelivered + } + + +
diff --git a/src/app/tree-grid/tree-grid-paging-sample/tree-grid-paging-sample.component.ts b/src/app/tree-grid/tree-grid-paging-sample/tree-grid-paging-sample.component.ts index 42c01e16f0..e5eca517e4 100644 --- a/src/app/tree-grid/tree-grid-paging-sample/tree-grid-paging-sample.component.ts +++ b/src/app/tree-grid/tree-grid-paging-sample/tree-grid-paging-sample.component.ts @@ -2,14 +2,14 @@ import { Component, OnInit, ViewChild, ViewEncapsulation } from '@angular/core'; import { IgxTreeGridComponent, IgxPaginatorComponent, IgxColumnComponent, IgxCellTemplateDirective } from 'igniteui-angular'; import { ORDERS_DATA } from '../data/orders'; import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; -import { NgIf } from '@angular/common'; + @Component({ encapsulation: ViewEncapsulation.None, selector: 'app-tree-grid-paging-sample', styleUrls: ['./tree-grid-paging-sample.component.scss'], templateUrl: 'tree-grid-paging-sample.component.html', - imports: [IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxPaginatorComponent, IgxColumnComponent, IgxCellTemplateDirective, NgIf] + imports: [IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxPaginatorComponent, IgxColumnComponent, IgxCellTemplateDirective] }) export class TreeGridPagingSampleComponent implements OnInit { diff --git a/src/app/tree-grid/tree-grid-paging-style/tree-grid-paging-style-sample.component.html b/src/app/tree-grid/tree-grid-paging-style/tree-grid-paging-style-sample.component.html index 21742db1c0..9130ccf7ab 100644 --- a/src/app/tree-grid/tree-grid-paging-style/tree-grid-paging-style-sample.component.html +++ b/src/app/tree-grid/tree-grid-paging-style/tree-grid-paging-style-sample.component.html @@ -1,26 +1,30 @@
- - - - - - - - - - - - - - - - - - - CDelivered - Undelivered - - - + + + + + + + + + + + + + + + + + + + @if (val) { + CDelivered + } + @if (!val) { + Undelivered + } + + +
diff --git a/src/app/tree-grid/tree-grid-paging-style/tree-grid-paging-style-sample.component.ts b/src/app/tree-grid/tree-grid-paging-style/tree-grid-paging-style-sample.component.ts index 87435476af..a0a0437085 100644 --- a/src/app/tree-grid/tree-grid-paging-style/tree-grid-paging-style-sample.component.ts +++ b/src/app/tree-grid/tree-grid-paging-style/tree-grid-paging-style-sample.component.ts @@ -2,13 +2,13 @@ import { Component, OnInit } from '@angular/core'; import { ORDERS_DATA } from '../data/orders'; import { IgxTreeGridComponent, IgxPaginatorComponent, IgxColumnComponent, IgxCellTemplateDirective } from 'igniteui-angular'; import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; -import { NgIf } from '@angular/common'; + @Component({ selector: 'app-tree-grid-paging-sample', styleUrls: ['./tree-grid-paging-style-sample.component.scss'], templateUrl: 'tree-grid-paging-style-sample.component.html', - imports: [IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxPaginatorComponent, IgxColumnComponent, IgxCellTemplateDirective, NgIf] + imports: [IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxPaginatorComponent, IgxColumnComponent, IgxCellTemplateDirective] }) export class TreeGridPagingStyleSampleComponent implements OnInit { diff --git a/src/app/tree-grid/tree-grid-remote-paging-default-template/tree-grid-remote-paging-default-template.component.html b/src/app/tree-grid/tree-grid-remote-paging-default-template/tree-grid-remote-paging-default-template.component.html index 09ac13c7c1..2ab88ebc7c 100644 --- a/src/app/tree-grid/tree-grid-remote-paging-default-template/tree-grid-remote-paging-default-template.component.html +++ b/src/app/tree-grid/tree-grid-remote-paging-default-template/tree-grid-remote-paging-default-template.component.html @@ -1,21 +1,25 @@
- - - - - - folder - - photo - {{val}} - - - - - + + + + + + @if (cell.row.data.Type === 'File folder') { + folder + + } + @if (cell.row.data.Type === 'JPG File') { + photo + } + {{val}} + + + + +
diff --git a/src/app/tree-grid/tree-grid-remote-paging-default-template/tree-grid-remote-paging-default-template.component.ts b/src/app/tree-grid/tree-grid-remote-paging-default-template/tree-grid-remote-paging-default-template.component.ts index 01439b4a3b..ea14b9cc50 100644 --- a/src/app/tree-grid/tree-grid-remote-paging-default-template/tree-grid-remote-paging-default-template.component.ts +++ b/src/app/tree-grid/tree-grid-remote-paging-default-template/tree-grid-remote-paging-default-template.component.ts @@ -1,4 +1,4 @@ -import { formatNumber, NgIf, AsyncPipe } from '@angular/common'; +import { formatNumber, AsyncPipe } from '@angular/common'; import { AfterViewInit, ChangeDetectorRef, Component, OnDestroy, OnInit, ViewChild, ViewEncapsulation } from '@angular/core'; import { GridPagingMode, IgxTreeGridComponent, IgxPaginatorComponent, IgxColumnComponent, IgxCellTemplateDirective, IgxIconComponent } from 'igniteui-angular'; import { Observable } from 'rxjs'; @@ -11,7 +11,7 @@ import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scro selector: 'app-tree-grid-remote-paging-default-template', styleUrls: ['./tree-grid-remote-paging-default-template.component.scss'], templateUrl: './tree-grid-remote-paging-default-template.component.html', - imports: [IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxPaginatorComponent, IgxColumnComponent, IgxCellTemplateDirective, NgIf, IgxIconComponent, AsyncPipe] + imports: [IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxPaginatorComponent, IgxColumnComponent, IgxCellTemplateDirective, IgxIconComponent, AsyncPipe] }) export class TreeGridRemotePagingDefaultTemplateComponent implements OnInit, AfterViewInit, OnDestroy { diff --git a/src/app/tree-grid/tree-grid-remote-paging-sample/tree-grid-remote-paging-sample.component.html b/src/app/tree-grid/tree-grid-remote-paging-sample/tree-grid-remote-paging-sample.component.html index a62a8ca921..a2150c16c7 100644 --- a/src/app/tree-grid/tree-grid-remote-paging-sample/tree-grid-remote-paging-sample.component.html +++ b/src/app/tree-grid/tree-grid-remote-paging-sample/tree-grid-remote-paging-sample.component.html @@ -1,26 +1,30 @@
- - - - folder - - photo - {{val}} - - - - - - - - [This is my custom content] - - - - + + + + @if (cell.row.data.Type === 'File folder') { + folder + + } + @if (cell.row.data.Type === 'JPG File') { + photo + } + {{val}} + + + + + + + + [This is my custom content] + + + +
diff --git a/src/app/tree-grid/tree-grid-remote-paging-sample/tree-grid-remote-paging-sample.component.ts b/src/app/tree-grid/tree-grid-remote-paging-sample/tree-grid-remote-paging-sample.component.ts index ac0a417e95..6dcfd57438 100644 --- a/src/app/tree-grid/tree-grid-remote-paging-sample/tree-grid-remote-paging-sample.component.ts +++ b/src/app/tree-grid/tree-grid-remote-paging-sample/tree-grid-remote-paging-sample.component.ts @@ -1,4 +1,4 @@ -import { formatNumber, NgIf, AsyncPipe } from '@angular/common'; +import { formatNumber, AsyncPipe } from '@angular/common'; import { AfterViewInit, Component, OnDestroy, OnInit, ViewChild, ViewEncapsulation } from '@angular/core'; import { GridPagingMode, IgxTreeGridComponent, IgxColumnComponent, IgxCellTemplateDirective, IgxIconComponent, IgxPaginatorComponent, IgxPaginatorContentDirective, IgxPageSizeSelectorComponent, IgxPageNavigationComponent } from 'igniteui-angular'; import { Observable } from 'rxjs'; @@ -11,7 +11,7 @@ import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scro selector: 'app-tree-grid-remote-paging-grid-sample', styleUrls: ['./tree-grid-remote-paging-sample.component.scss'], templateUrl: './tree-grid-remote-paging-sample.component.html', - imports: [IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxCellTemplateDirective, NgIf, IgxIconComponent, IgxPaginatorComponent, IgxPaginatorContentDirective, IgxPageSizeSelectorComponent, IgxPageNavigationComponent, AsyncPipe] + imports: [IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxCellTemplateDirective, IgxIconComponent, IgxPaginatorComponent, IgxPaginatorContentDirective, IgxPageSizeSelectorComponent, IgxPageNavigationComponent, AsyncPipe] }) export class TreeGridRemotePagingSampleComponent implements OnInit, AfterViewInit, OnDestroy { diff --git a/src/app/tree-grid/tree-grid-row-edit-style/tree-grid-row-edit-style.component.html b/src/app/tree-grid/tree-grid-row-edit-style/tree-grid-row-edit-style.component.html index 4f3d922b4a..757bee006d 100644 --- a/src/app/tree-grid/tree-grid-row-edit-style/tree-grid-row-edit-style.component.html +++ b/src/app/tree-grid/tree-grid-row-edit-style/tree-grid-row-edit-style.component.html @@ -1,20 +1,22 @@
- - - - - Changes: {{rowChangesCount}} - - -
- - -
- - + + @for (c of columns; track c) { + + + } + + Changes: {{rowChangesCount}} + + +
+ + +
+ +
diff --git a/src/app/tree-grid/tree-grid-row-edit-style/tree-grid-row-edit-style.component.ts b/src/app/tree-grid/tree-grid-row-edit-style/tree-grid-row-edit-style.component.ts index d64d18b205..70ff6161aa 100644 --- a/src/app/tree-grid/tree-grid-row-edit-style/tree-grid-row-edit-style.component.ts +++ b/src/app/tree-grid/tree-grid-row-edit-style/tree-grid-row-edit-style.component.ts @@ -2,13 +2,13 @@ import { Component, OnInit } from '@angular/core'; import { GridSelectionMode, IgxTreeGridComponent, IgxColumnComponent, IgxRowEditTextDirective, IgxRowEditActionsDirective, IgxIconButtonDirective, IgxRowEditTabStopDirective, IgxIconComponent } from 'igniteui-angular'; import { generateEmployeeFlatData, IEmployee } from '../data/employees-flat'; import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; -import { NgFor } from '@angular/common'; + @Component({ selector: 'app-tree-grid-row-edit-style', styleUrls: ['tree-grid-row-edit-style.component.scss'], templateUrl: 'tree-grid-row-edit-style.component.html', - imports: [IgxTreeGridComponent, IgxPreventDocumentScrollDirective, NgFor, IgxColumnComponent, IgxRowEditTextDirective, IgxRowEditActionsDirective, IgxIconButtonDirective, IgxRowEditTabStopDirective, IgxIconComponent] + imports: [IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxRowEditTextDirective, IgxRowEditActionsDirective, IgxIconButtonDirective, IgxRowEditTabStopDirective, IgxIconComponent] }) export class TreeGridRowEditStyleComponent implements OnInit { diff --git a/src/app/tree-grid/tree-grid-row-edit/tree-grid-row-editing-sample.component.html b/src/app/tree-grid/tree-grid-row-edit/tree-grid-row-editing-sample.component.html index 7885ec8cbc..6b5800dfca 100644 --- a/src/app/tree-grid/tree-grid-row-edit/tree-grid-row-editing-sample.component.html +++ b/src/app/tree-grid/tree-grid-row-edit/tree-grid-row-editing-sample.component.html @@ -1,21 +1,23 @@
- + @for (c of columns; track c) { + - - - + + } +
diff --git a/src/app/tree-grid/tree-grid-row-edit/tree-grid-row-editing-sample.component.ts b/src/app/tree-grid/tree-grid-row-edit/tree-grid-row-editing-sample.component.ts index 69767a1ea7..f132febefd 100644 --- a/src/app/tree-grid/tree-grid-row-edit/tree-grid-row-editing-sample.component.ts +++ b/src/app/tree-grid/tree-grid-row-edit/tree-grid-row-editing-sample.component.ts @@ -3,13 +3,13 @@ import { Component, OnInit, ViewChild } from '@angular/core'; import { GridSelectionMode, IgxTreeGridComponent, IgxColumnComponent } from 'igniteui-angular'; import { generateEmployeeFlatData, IEmployee } from '../data/employees-flat'; import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; -import { NgFor } from '@angular/common'; + @Component({ selector: 'app-tree-grid-row-editing-sample', styleUrls: ['tree-grid-row-editing-sample.component.scss'], templateUrl: 'tree-grid-row-editing-sample.component.html', - imports: [IgxTreeGridComponent, IgxPreventDocumentScrollDirective, NgFor, IgxColumnComponent] + imports: [IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent] }) export class TreeGridRowEditSampleComponent implements OnInit { diff --git a/src/app/tree-grid/tree-grid-row-pinning-extra-column/tree-grid-row-pinning-extra-column.component.html b/src/app/tree-grid/tree-grid-row-pinning-extra-column/tree-grid-row-pinning-extra-column.component.html index 3a846f7ed0..1d5edd5df3 100644 --- a/src/app/tree-grid/tree-grid-row-pinning-extra-column/tree-grid-row-pinning-extra-column.component.html +++ b/src/app/tree-grid/tree-grid-row-pinning-extra-column/tree-grid-row-pinning-extra-column.component.html @@ -1,18 +1,20 @@
- Bottom Row Pinning toggle + Bottom Row Pinning toggle
- - - - - - - - - - + + + + + + + + @for (c of columns; track c) { + + + } +
diff --git a/src/app/tree-grid/tree-grid-row-pinning-extra-column/tree-grid-row-pinning-extra-column.component.ts b/src/app/tree-grid/tree-grid-row-pinning-extra-column/tree-grid-row-pinning-extra-column.component.ts index e39ac73ce3..71ecacfeca 100644 --- a/src/app/tree-grid/tree-grid-row-pinning-extra-column/tree-grid-row-pinning-extra-column.component.ts +++ b/src/app/tree-grid/tree-grid-row-pinning-extra-column/tree-grid-row-pinning-extra-column.component.ts @@ -3,7 +3,7 @@ import { ColumnPinningPosition, IgxIconService, IgxTreeGridComponent, IPinningCo import { icons } from '../../services/svgIcons'; import { generateEmployeeFlatData, IEmployee } from '../data/employees-flat'; import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; -import { NgFor } from '@angular/common'; + const FILTERING_ICONS_FONT_SET = 'filtering-icons'; @@ -11,7 +11,7 @@ const FILTERING_ICONS_FONT_SET = 'filtering-icons'; selector: 'app-tree-grid-row-pinning-extra-column', styleUrls: ['tree-grid-row-pinning-extra-column.component.scss'], templateUrl: 'tree-grid-row-pinning-extra-column.component.html', - imports: [IgxSwitchComponent, IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxCellTemplateDirective, IgxIconComponent, NgFor] + imports: [IgxSwitchComponent, IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxCellTemplateDirective, IgxIconComponent] }) export class TreeGridRowPinningExtraColumnSampleComponent implements OnInit, AfterViewInit { diff --git a/src/app/tree-grid/tree-grid-row-pinning-styling/tree-grid-row-pinning-styling.component.html b/src/app/tree-grid/tree-grid-row-pinning-styling/tree-grid-row-pinning-styling.component.html index a0e88601ac..ef034bb0e8 100644 --- a/src/app/tree-grid/tree-grid-row-pinning-styling/tree-grid-row-pinning-styling.component.html +++ b/src/app/tree-grid/tree-grid-row-pinning-styling/tree-grid-row-pinning-styling.component.html @@ -1,10 +1,12 @@
- - - - - - - + + @for (c of columns; track c) { + + + } + + + +
diff --git a/src/app/tree-grid/tree-grid-row-pinning-styling/tree-grid-row-pinning-styling.component.ts b/src/app/tree-grid/tree-grid-row-pinning-styling/tree-grid-row-pinning-styling.component.ts index 68ff24d678..90fc837f16 100644 --- a/src/app/tree-grid/tree-grid-row-pinning-styling/tree-grid-row-pinning-styling.component.ts +++ b/src/app/tree-grid/tree-grid-row-pinning-styling/tree-grid-row-pinning-styling.component.ts @@ -2,13 +2,13 @@ import { Component, OnInit, ViewChild } from '@angular/core'; import { ColumnPinningPosition, IgxTreeGridComponent, IPinningConfig, RowPinningPosition, IgxColumnComponent, IgxActionStripComponent, IgxGridPinningActionsComponent } from 'igniteui-angular'; import { generateEmployeeFlatData, IEmployee } from '../data/employees-flat'; import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; -import { NgFor } from '@angular/common'; + @Component({ selector: 'app-tree-grid-row-pinning-styling', styleUrls: ['tree-grid-row-pinning-styling.component.scss'], templateUrl: 'tree-grid-row-pinning-styling.component.html', - imports: [IgxTreeGridComponent, IgxPreventDocumentScrollDirective, NgFor, IgxColumnComponent, IgxActionStripComponent, IgxGridPinningActionsComponent] + imports: [IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxActionStripComponent, IgxGridPinningActionsComponent] }) export class TreeGridRowPinningStylingSampleComponent implements OnInit { diff --git a/src/app/tree-grid/tree-grid-row-pinning/tree-grid-row-pinning.component.html b/src/app/tree-grid/tree-grid-row-pinning/tree-grid-row-pinning.component.html index ec78f5ab87..e52a97eb4e 100644 --- a/src/app/tree-grid/tree-grid-row-pinning/tree-grid-row-pinning.component.html +++ b/src/app/tree-grid/tree-grid-row-pinning/tree-grid-row-pinning.component.html @@ -1,15 +1,17 @@
- Bottom Row Pinning toggle + Bottom Row Pinning toggle
- - - - - - - - + + @for (c of columns; track c) { + + + } + + + + +
diff --git a/src/app/tree-grid/tree-grid-row-pinning/tree-grid-row-pinning.component.ts b/src/app/tree-grid/tree-grid-row-pinning/tree-grid-row-pinning.component.ts index 266b06bfc3..ab29146872 100644 --- a/src/app/tree-grid/tree-grid-row-pinning/tree-grid-row-pinning.component.ts +++ b/src/app/tree-grid/tree-grid-row-pinning/tree-grid-row-pinning.component.ts @@ -2,13 +2,13 @@ import { Component, OnInit, ViewChild } from '@angular/core'; import { ColumnPinningPosition, IgxTreeGridComponent, IPinningConfig, RowPinningPosition, IgxSwitchComponent, IgxColumnComponent, IgxActionStripComponent, IgxGridPinningActionsComponent, IgxGridEditingActionsComponent } from 'igniteui-angular'; import { generateEmployeeFlatData, IEmployee } from '../data/employees-flat'; import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; -import { NgFor } from '@angular/common'; + @Component({ selector: 'app-tree-grid-row-pinning', styleUrls: ['tree-grid-row-pinning.component.scss'], templateUrl: 'tree-grid-row-pinning.component.html', - imports: [IgxSwitchComponent, IgxTreeGridComponent, IgxPreventDocumentScrollDirective, NgFor, IgxColumnComponent, IgxActionStripComponent, IgxGridPinningActionsComponent, IgxGridEditingActionsComponent] + imports: [IgxSwitchComponent, IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxActionStripComponent, IgxGridPinningActionsComponent, IgxGridEditingActionsComponent] }) export class TreeGridRowPinningSampleComponent implements OnInit { diff --git a/src/app/tree-grid/tree-grid-rowClasses-sample/tree-grid-rowClasses.component.html b/src/app/tree-grid/tree-grid-rowClasses-sample/tree-grid-rowClasses.component.html index 62d71284f3..0099eea0a1 100644 --- a/src/app/tree-grid/tree-grid-rowClasses-sample/tree-grid-rowClasses.component.html +++ b/src/app/tree-grid/tree-grid-rowClasses-sample/tree-grid-rowClasses.component.html @@ -1,15 +1,17 @@
- - - - + + @for (c of columns; track c) { + + + } +
diff --git a/src/app/tree-grid/tree-grid-rowClasses-sample/tree-grid-rowClasses.component.ts b/src/app/tree-grid/tree-grid-rowClasses-sample/tree-grid-rowClasses.component.ts index e3457edd75..8f909042c0 100644 --- a/src/app/tree-grid/tree-grid-rowClasses-sample/tree-grid-rowClasses.component.ts +++ b/src/app/tree-grid/tree-grid-rowClasses-sample/tree-grid-rowClasses.component.ts @@ -2,13 +2,13 @@ import { Component, OnInit, ViewChild } from '@angular/core'; import { IgxTreeGridComponent, RowType, IgxColumnComponent } from 'igniteui-angular'; import { generateEmployeeFlatData, IEmployee } from '../data/employees-flat'; import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; -import { NgFor } from '@angular/common'; + @Component({ selector: 'app-tree-grid-row-classes-sample', styleUrls: ['tree-grid-rowClasses.component.scss'], templateUrl: 'tree-grid-rowClasses.component.html', - imports: [IgxTreeGridComponent, IgxPreventDocumentScrollDirective, NgFor, IgxColumnComponent] + imports: [IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent] }) export class TreeGridRowClassesComponent implements OnInit { diff --git a/src/app/tree-grid/tree-grid-rowStyles-sample/tree-grid-rowStyle.component.html b/src/app/tree-grid/tree-grid-rowStyles-sample/tree-grid-rowStyle.component.html index 239f854f40..582bd63ed7 100644 --- a/src/app/tree-grid/tree-grid-rowStyles-sample/tree-grid-rowStyle.component.html +++ b/src/app/tree-grid/tree-grid-rowStyles-sample/tree-grid-rowStyle.component.html @@ -1,18 +1,20 @@
- + @for (c of columns; track c) { + - - - + + } +
diff --git a/src/app/tree-grid/tree-grid-rowStyles-sample/tree-grid-rowStyle.component.ts b/src/app/tree-grid/tree-grid-rowStyles-sample/tree-grid-rowStyle.component.ts index 1d783c04b8..951c353b6f 100644 --- a/src/app/tree-grid/tree-grid-rowStyles-sample/tree-grid-rowStyle.component.ts +++ b/src/app/tree-grid/tree-grid-rowStyles-sample/tree-grid-rowStyle.component.ts @@ -2,13 +2,13 @@ import { Component, OnInit, ViewChild } from '@angular/core'; import { IgxTreeGridComponent, RowType, IgxColumnComponent } from 'igniteui-angular'; import { generateEmployeeFlatData, IEmployee } from '../data/employees-flat'; import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; -import { NgFor } from '@angular/common'; + @Component({ selector: 'app-tree-grid-row-styles-sample', styleUrls: ['tree-grid-rowStyle.component.scss'], templateUrl: 'tree-grid-rowStyle.component.html', - imports: [IgxTreeGridComponent, IgxPreventDocumentScrollDirective, NgFor, IgxColumnComponent] + imports: [IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent] }) export class TreeGridRowStylesComponent implements OnInit { diff --git a/src/app/tree-grid/tree-grid-save-state/tGrid-state.component.html b/src/app/tree-grid/tree-grid-save-state/tGrid-state.component.html index 68b83d1cdd..32a13c17da 100644 --- a/src/app/tree-grid/tree-grid-save-state/tGrid-state.component.html +++ b/src/app/tree-grid/tree-grid-save-state/tGrid-state.component.html @@ -1,64 +1,66 @@
-
-
- - - - - - -
+
+
+ + + + + + +
-
-
    -
  • Clicking the SAVE button or leaving the page here will save grid state to localStorage.
    • -
  • Use the control buttons to SAVE / RESTORE / RESET / DELETE / grid state or LEAVE the page.
    • -
  • Select/Deselect checkboxes to control saving / restoring feature state.
    • -
-
+
+
    +
  • Clicking the SAVE button or leaving the page here will save grid state to localStorage.
    • +
  • Use the control buttons to SAVE / RESTORE / RESET / DELETE / grid state or LEAVE the page.
    • +
  • Select/Deselect checkboxes to control saving / restoring feature state.
    • +
+
-
-
- All -
-
- - {{ f.shortName }} - -
+
+
+ All +
+ @for (f of features; track f) { +
+ + {{ f.shortName }} +
+ }
+
- - - - - - + + + + + +
diff --git a/src/app/tree-grid/tree-grid-save-state/tGrid-state.component.ts b/src/app/tree-grid/tree-grid-save-state/tGrid-state.component.ts index afcd7bd42f..d544f06530 100644 --- a/src/app/tree-grid/tree-grid-save-state/tGrid-state.component.ts +++ b/src/app/tree-grid/tree-grid-save-state/tGrid-state.component.ts @@ -3,14 +3,14 @@ import { NavigationStart, Router, RouterLink } from '@angular/router'; import { FilteringExpressionsTree, FilteringLogic, GridFeatures, IGridState, IGridStateOptions, IgxGridStateDirective, IgxTreeGridComponent, IgxCheckboxComponent, IgxButtonDirective, IgxIconComponent, IgxPaginatorComponent, IgxColumnComponent } from 'igniteui-angular'; import { take } from 'rxjs/operators'; import { EMPLOYEE_DATA } from './data'; -import { NgFor } from '@angular/common'; + // tslint:disable:object-literal-sort-keys @Component({ selector: 'app-tgrid', styleUrls: ['./tGrid-state.component.scss'], templateUrl: './tGrid-state.component.html', - imports: [IgxButtonDirective, IgxIconComponent, RouterLink, IgxCheckboxComponent, NgFor, IgxTreeGridComponent, IgxGridStateDirective, IgxPaginatorComponent, IgxColumnComponent] + imports: [IgxButtonDirective, IgxIconComponent, RouterLink, IgxCheckboxComponent, IgxTreeGridComponent, IgxGridStateDirective, IgxPaginatorComponent, IgxColumnComponent] }) export class TGridSaveStateComponent implements OnInit, AfterViewInit { diff --git a/src/app/tree-grid/tree-grid-search-sample/tree-grid-search-sample.component.html b/src/app/tree-grid/tree-grid-search-sample/tree-grid-search-sample.component.html index 6ad212df37..285146990b 100644 --- a/src/app/tree-grid/tree-grid-search-sample/tree-grid-search-sample.component.html +++ b/src/app/tree-grid/tree-grid-search-sample/tree-grid-search-sample.component.html @@ -1,49 +1,61 @@
- - - search - clear - + + + @if (searchText.length === 0) { + search + } + @if (searchText.length > 0) { + clear + } + - + - -
- - {{ treeGrid.lastSearchInfo.activeMatchIndex + 1 }} of {{ treeGrid.lastSearchInfo.matchInfoCache.length }} - results + @if (searchText.length > 0) { + + @if (treeGrid.lastSearchInfo) { +
+ @if (treeGrid.lastSearchInfo.matchInfoCache.length > 0) { + + {{ treeGrid.lastSearchInfo.activeMatchIndex + 1 }} of {{ treeGrid.lastSearchInfo.matchInfoCache.length }} + results - - No results + } + @if (treeGrid.lastSearchInfo.matchInfoCache.length === 0) { + + No results + }
-
- - - Aa - - - Ab - - -
-
- - -
+ } +
+ + + Aa + + + Ab + + +
+
+ + +
+ } - - - - - + + + + + -
+
diff --git a/src/app/tree-grid/tree-grid-search-sample/tree-grid-search-sample.component.ts b/src/app/tree-grid/tree-grid-search-sample/tree-grid-search-sample.component.ts index c22c0be8bb..c9b1ed9233 100644 --- a/src/app/tree-grid/tree-grid-search-sample/tree-grid-search-sample.component.ts +++ b/src/app/tree-grid/tree-grid-search-sample/tree-grid-search-sample.component.ts @@ -1,7 +1,7 @@ import { Component, OnInit, ViewChild } from '@angular/core'; import { IgxTreeGridComponent, IgxInputGroupComponent, IgxPrefixDirective, IgxIconComponent, IgxInputDirective, IgxSuffixDirective, IgxChipsAreaComponent, IgxChipComponent, IgxIconButtonDirective, IgxRippleDirective, IgxColumnComponent } from 'igniteui-angular'; import { generateEmployeeFlatData } from '../data/employees-flat'; -import { NgIf } from '@angular/common'; + import { FormsModule } from '@angular/forms'; import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; @@ -9,7 +9,7 @@ import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scro selector: 'app-tree-grid-search-sample', styleUrls: ['./tree-grid-search-sample.component.scss'], templateUrl: './tree-grid-search-sample.component.html', - imports: [IgxInputGroupComponent, IgxPrefixDirective, NgIf, IgxIconComponent, FormsModule, IgxInputDirective, IgxSuffixDirective, IgxChipsAreaComponent, IgxChipComponent, IgxIconButtonDirective, IgxRippleDirective, IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent] + imports: [IgxInputGroupComponent, IgxPrefixDirective, IgxIconComponent, FormsModule, IgxInputDirective, IgxSuffixDirective, IgxChipsAreaComponent, IgxChipComponent, IgxIconButtonDirective, IgxRippleDirective, IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent] }) export class TreeGridSearchSampleComponent implements OnInit { diff --git a/src/app/tree-grid/tree-grid-selection-sample/tree-grid-selection-sample.component.html b/src/app/tree-grid/tree-grid-selection-sample/tree-grid-selection-sample.component.html index ddbb0d4563..615d9cee04 100644 --- a/src/app/tree-grid/tree-grid-selection-sample/tree-grid-selection-sample.component.html +++ b/src/app/tree-grid/tree-grid-selection-sample/tree-grid-selection-sample.component.html @@ -1,77 +1,77 @@
-
- Hide Row Selectors - -
- + Hide Row Selectors + +
+ - - - - - - - + + + + + + +
-
- notification_important - -

Number of selected rows: {{selectedRowsCount}}

- - -

Currently selected row index: {{selectedRowIndex}}

- - -

There is no currently selected row.

- -
+
+ notification_important + @if (selectionMode === 'multiple' || selectionMode === 'multipleCascade') { +

Number of selected rows: {{selectedRowsCount}}

+ } + @if (selectionMode === 'single' && this.selectedRowIndex !== undefined) { +

Currently selected row index: {{selectedRowIndex}}

+ } + @if (selectionMode === 'single' && this.selectedRowIndex === undefined) { +

There is no currently selected row.

+ } +
-
- notification_important - -
    -
  • Now you can select multiple rows within a grid and their children.
    • -
  • Click on row selector field or press SPACE key when some cell is active to toggle row - selection. -
    • -
  • On cell click the row get selected and previous selection state is cleared.
    • -
  • On cell click holding ctrl key, the row get selected and previous selection state is - preserved. -
    • -
  • Shift + click select a range of rows.
    • -
- - -
    -
  • Now you can select multiple rows within a grid.
    • -
  • Click on row selector field or press SPACE key when some cell is active to toggle row - selection. -
    • -
  • On cell click the row get selected and previous selection state is cleared.
    • -
  • On cell click holding ctrl key, the row get selected and previous selection state is - preserved. -
    • -
  • Shift + click select a range of rows.
    • -
- - -
    -
  • Now you can select only one row within a grid.
    • -
  • Click on row selector field or press SPACE key when some cell is active to toggle row - selection. -
    • -
  • On cell click the row get selected and previous selection state is cleared.
    • -
- - -
    -
  • Now you are unable to select a row while interacting with grid UI.
    • -
  • If you need to select a row use grid API methods.
    • -
- -
+
+ notification_important + @if (selectionMode === 'multipleCascade') { +
    +
  • Now you can select multiple rows within a grid and their children.
    • +
  • Click on row selector field or press SPACE key when some cell is active to toggle row + selection. +
    • +
  • On cell click the row get selected and previous selection state is cleared.
    • +
  • On cell click holding ctrl key, the row get selected and previous selection state is + preserved. +
    • +
  • Shift + click select a range of rows.
    • +
+ } + @if (selectionMode === 'multiple') { +
    +
  • Now you can select multiple rows within a grid.
    • +
  • Click on row selector field or press SPACE key when some cell is active to toggle row + selection. +
    • +
  • On cell click the row get selected and previous selection state is cleared.
    • +
  • On cell click holding ctrl key, the row get selected and previous selection state is + preserved. +
    • +
  • Shift + click select a range of rows.
    • +
+ } + @if (selectionMode === 'single') { +
    +
  • Now you can select only one row within a grid.
    • +
  • Click on row selector field or press SPACE key when some cell is active to toggle row + selection. +
    • +
  • On cell click the row get selected and previous selection state is cleared.
    • +
+ } + @if (selectionMode === 'none') { +
    +
  • Now you are unable to select a row while interacting with grid UI.
    • +
  • If you need to select a row use grid API methods.
    • +
+ } +
diff --git a/src/app/tree-grid/tree-grid-selection-sample/tree-grid-selection-sample.component.ts b/src/app/tree-grid/tree-grid-selection-sample/tree-grid-selection-sample.component.ts index 5df4ebd399..fa1fbab788 100644 --- a/src/app/tree-grid/tree-grid-selection-sample/tree-grid-selection-sample.component.ts +++ b/src/app/tree-grid/tree-grid-selection-sample/tree-grid-selection-sample.component.ts @@ -3,13 +3,13 @@ import { GridSelectionMode, IgxSnackbarComponent, IgxTreeGridComponent, IRowSele import { generateEmployeeFlatData } from '../data/employees-flat'; import { FormsModule } from '@angular/forms'; import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; -import { NgIf } from '@angular/common'; + @Component({ selector: 'app-tree-grid-selection-sample', styleUrls: ['./tree-grid-selection-sample.component.scss'], templateUrl: './tree-grid-selection-sample.component.html', - imports: [IgxSwitchComponent, FormsModule, IgxButtonGroupComponent, IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxSnackbarComponent, IgxIconComponent, NgIf] + imports: [IgxSwitchComponent, FormsModule, IgxButtonGroupComponent, IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxSnackbarComponent, IgxIconComponent] }) export class TreeGridSelectionSampleComponent implements OnInit { @ViewChild('treeGrid', { static: true }) public treeGrid: IgxTreeGridComponent; diff --git a/src/app/tree-grid/tree-grid-sorting-sample/tree-grid-sorting-sample.component.html b/src/app/tree-grid/tree-grid-sorting-sample/tree-grid-sorting-sample.component.html index 26fdb54ac7..ecbe43a49b 100644 --- a/src/app/tree-grid/tree-grid-sorting-sample/tree-grid-sorting-sample.component.html +++ b/src/app/tree-grid/tree-grid-sorting-sample/tree-grid-sorting-sample.component.html @@ -1,56 +1,62 @@
- - - + + + - - - - - -
{{ item.mode | uppercase }}
- - - - + + + + + +
{{ item.mode | uppercase }}
+ + + + - - + + - - - - - - - - - - - - - - - - - Delivered - Undelivered - - - -
- + + + + + + + + + + + + + + + + + @if (val) { + Delivered + } + @if (!val) { + Undelivered + } + + + + @if (contextmenu) { +
+
+ }
diff --git a/src/app/tree-grid/tree-grid-sorting-sample/tree-grid-sorting-sample.component.ts b/src/app/tree-grid/tree-grid-sorting-sample/tree-grid-sorting-sample.component.ts index cedadc6ed4..6eb8670a3c 100644 --- a/src/app/tree-grid/tree-grid-sorting-sample/tree-grid-sorting-sample.component.ts +++ b/src/app/tree-grid/tree-grid-sorting-sample/tree-grid-sorting-sample.component.ts @@ -3,14 +3,14 @@ import { DefaultSortingStrategy, IgxTreeGridComponent, ISortingOptions, SortingD import { ORDERS_DATA } from '../data/orders'; import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; import { FormsModule } from '@angular/forms'; -import { NgIf, UpperCasePipe } from '@angular/common'; +import { UpperCasePipe } from '@angular/common'; import { TreeGridContextmenuComponent } from './tree-grid-contextmenu/tree-grid-contextmenu.component'; @Component({ selector: 'app-tree-grid-sorting-sample', styleUrls: ['./tree-grid-sorting-sample.component.scss'], templateUrl: 'tree-grid-sorting-sample.component.html', - imports: [IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxGridToolbarComponent, IgxButtonDirective, IgxGridToolbarActionsComponent, IgxSimpleComboComponent, FormsModule, IgxComboClearIconDirective, IgxComboItemDirective, IgxTreeGridGroupByAreaComponent, IgxColumnComponent, IgxCellTemplateDirective, NgIf, TreeGridContextmenuComponent, UpperCasePipe] + imports: [IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxGridToolbarComponent, IgxButtonDirective, IgxGridToolbarActionsComponent, IgxSimpleComboComponent, FormsModule, IgxComboClearIconDirective, IgxComboItemDirective, IgxTreeGridGroupByAreaComponent, IgxColumnComponent, IgxCellTemplateDirective, TreeGridContextmenuComponent, UpperCasePipe] }) export class TreeGridSortingSampleComponent implements OnInit, AfterViewInit { diff --git a/src/app/tree-grid/tree-grid-sorting-styling/tree-grid-sorting-styling.component.html b/src/app/tree-grid/tree-grid-sorting-styling/tree-grid-sorting-styling.component.html index e18e454cb5..130d784f0f 100644 --- a/src/app/tree-grid/tree-grid-sorting-styling/tree-grid-sorting-styling.component.html +++ b/src/app/tree-grid/tree-grid-sorting-styling/tree-grid-sorting-styling.component.html @@ -1,24 +1,28 @@
- - - - - - - - - - - - - - - - Delivered - Undelivered - - - + + + + + + + + + + + + + + + + @if (val) { + Delivered + } + @if (!val) { + Undelivered + } + + +
diff --git a/src/app/tree-grid/tree-grid-sorting-styling/tree-grid-sorting-styling.component.ts b/src/app/tree-grid/tree-grid-sorting-styling/tree-grid-sorting-styling.component.ts index bf5d5aebbf..ae715a5058 100644 --- a/src/app/tree-grid/tree-grid-sorting-styling/tree-grid-sorting-styling.component.ts +++ b/src/app/tree-grid/tree-grid-sorting-styling/tree-grid-sorting-styling.component.ts @@ -2,13 +2,13 @@ import { Component, OnInit, ViewChild } from '@angular/core'; import { DefaultSortingStrategy, IgxTreeGridComponent, SortingDirection, IgxColumnComponent, IgxCellTemplateDirective } from 'igniteui-angular'; import { ORDERS_DATA } from '../data/orders'; import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; -import { NgIf } from '@angular/common'; + @Component({ selector: 'app-tree-grid-sorting-styling', styleUrls: ['./tree-grid-sorting-styling.component.scss'], templateUrl: 'tree-grid-sorting-styling.component.html', - imports: [IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxCellTemplateDirective, NgIf] + imports: [IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxCellTemplateDirective] }) export class TreeGridSortingStylingComponent implements OnInit { diff --git a/src/app/tree-grid/tree-grid-summary-export/tree-grid-summary-export.component.html b/src/app/tree-grid/tree-grid-summary-export/tree-grid-summary-export.component.html index ed809fad7a..6751672a15 100644 --- a/src/app/tree-grid/tree-grid-summary-export/tree-grid-summary-export.component.html +++ b/src/app/tree-grid/tree-grid-summary-export/tree-grid-summary-export.component.html @@ -1,78 +1,82 @@
-
- - Press the button to export the Grid as a .xlsx file. -
+
+ + Press the button to export the Grid as a .xlsx file. +
- - - - - - {{ val }} - - -
{{col.field}}
- functions - - - - - {{ val }} - - -
{{col.field}}
- functions - - - - - {{ val }} - - -
{{col.field}}
- functions - - - - - ${{ val }} - - -
Unit Price
- functions - - - - - ${{ val }} - - -
{{col.field}}
- functions - - - - - Delivered - Undelivered - - -
{{ col.field }}
- functions - - - - - {{ val | date: 'MMM d, yyyy' }} - - -
Order Date
- functions - - - + + + + + + {{ val }} + + +
{{col.field}}
+ functions + + + + + {{ val }} + + +
{{col.field}}
+ functions + + + + + {{ val }} + + +
{{col.field}}
+ functions + + + + + ${{ val }} + + +
Unit Price
+ functions + + + + + ${{ val }} + + +
{{col.field}}
+ functions + + + + + @if (val) { + Delivered + } + @if (!val) { + Undelivered + } + + +
{{ col.field }}
+ functions + + + + + {{ val | date: 'MMM d, yyyy' }} + + +
Order Date
+ functions + + +
diff --git a/src/app/tree-grid/tree-grid-summary-export/tree-grid-summary-export.component.ts b/src/app/tree-grid/tree-grid-summary-export/tree-grid-summary-export.component.ts index 137798fd0d..0fd9776475 100644 --- a/src/app/tree-grid/tree-grid-summary-export/tree-grid-summary-export.component.ts +++ b/src/app/tree-grid/tree-grid-summary-export/tree-grid-summary-export.component.ts @@ -2,13 +2,13 @@ import { Component, ViewChild } from '@angular/core'; import { ColumnType, IgxExcelExporterOptions, IgxExcelExporterService, IgxTreeGridComponent, IgxButtonDirective, IgxColumnComponent, IgxCellTemplateDirective, IgxCellHeaderTemplateDirective, IgxIconComponent } from 'igniteui-angular'; import { ORDERS_DATA } from '../data/orders'; import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; -import { NgIf, DatePipe } from '@angular/common'; +import { DatePipe } from '@angular/common'; @Component({ selector: 'app-tree-grid-summary-export', styleUrls: ['./tree-grid-summary-export.component.scss'], templateUrl: './tree-grid-summary-export.component.html', - imports: [IgxButtonDirective, IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxCellTemplateDirective, IgxCellHeaderTemplateDirective, IgxIconComponent, NgIf, DatePipe] + imports: [IgxButtonDirective, IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxCellTemplateDirective, IgxCellHeaderTemplateDirective, IgxIconComponent, DatePipe] }) export class TreeGridSummaryExportComponent { diff --git a/src/app/tree-grid/tree-grid-summary-formatter/tree-grid-summary-formatter.component.html b/src/app/tree-grid/tree-grid-summary-formatter/tree-grid-summary-formatter.component.html index c6c911c1be..fdf38d4d66 100644 --- a/src/app/tree-grid/tree-grid-summary-formatter/tree-grid-summary-formatter.component.html +++ b/src/app/tree-grid/tree-grid-summary-formatter/tree-grid-summary-formatter.component.html @@ -1,28 +1,32 @@
- + - - - - - - - - - - - - - - - - - Delivered - Undelivered - - - + + + + + + + + + + + + + + + + + @if (val) { + Delivered + } + @if (!val) { + Undelivered + } + + +
diff --git a/src/app/tree-grid/tree-grid-summary-formatter/tree-grid-summary-formatter.component.ts b/src/app/tree-grid/tree-grid-summary-formatter/tree-grid-summary-formatter.component.ts index 37b61ef5b4..9d014ef590 100644 --- a/src/app/tree-grid/tree-grid-summary-formatter/tree-grid-summary-formatter.component.ts +++ b/src/app/tree-grid/tree-grid-summary-formatter/tree-grid-summary-formatter.component.ts @@ -1,4 +1,4 @@ -import { DatePipe, NgIf } from '@angular/common'; +import { DatePipe } from '@angular/common'; import { Component, OnInit, ViewChild } from '@angular/core'; import { IgxDateSummaryOperand, IgxSummaryResult, IgxSummaryOperand, IgxTreeGridComponent, IgxColumnComponent, IgxCellTemplateDirective } from 'igniteui-angular'; import { ORDERS_DATA } from '../data/orders'; @@ -8,7 +8,7 @@ import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scro selector: 'app-tree-grid-summary-formatter', styleUrls: ['./tree-grid-summary-formatter.component.scss'], templateUrl: 'tree-grid-summary-formatter.component.html', - imports: [IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxCellTemplateDirective, NgIf] + imports: [IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxCellTemplateDirective] }) export class TreeGridSummaryFormatterComponent implements OnInit { diff --git a/src/app/tree-grid/tree-grid-summary-sample/tree-grid-summary-sample.component.html b/src/app/tree-grid/tree-grid-summary-sample/tree-grid-summary-sample.component.html index 856a396d06..c2172ba0d6 100644 --- a/src/app/tree-grid/tree-grid-summary-sample/tree-grid-summary-sample.component.html +++ b/src/app/tree-grid/tree-grid-summary-sample/tree-grid-summary-sample.component.html @@ -1,65 +1,69 @@
- - - - - - {{ val }} - - -
{{col.field}}
- functions - - - - - {{ val }} - - -
Units
- functions - - - - - ${{ val }} - - -
Unit Price
- functions - - - - - ${{ val }} - - -
Price
- functions - - - - - Delivered - Undelivered - - -
{{ col.field }}
- functions - - - - - {{ val | date: 'MMM d, yyyy' }} - - -
Order Date
- functions - - - + + + + + + {{ val }} + + +
{{col.field}}
+ functions + + + + + {{ val }} + + +
Units
+ functions + + + + + ${{ val }} + + +
Unit Price
+ functions + + + + + ${{ val }} + + +
Price
+ functions + + + + + @if (val) { + Delivered + } + @if (!val) { + Undelivered + } + + +
{{ col.field }}
+ functions + + + + + {{ val | date: 'MMM d, yyyy' }} + + +
Order Date
+ functions + + +
diff --git a/src/app/tree-grid/tree-grid-summary-sample/tree-grid-summary-sample.component.ts b/src/app/tree-grid/tree-grid-summary-sample/tree-grid-summary-sample.component.ts index a17c9183f7..29173bf154 100644 --- a/src/app/tree-grid/tree-grid-summary-sample/tree-grid-summary-sample.component.ts +++ b/src/app/tree-grid/tree-grid-summary-sample/tree-grid-summary-sample.component.ts @@ -2,13 +2,13 @@ import { Component, ViewChild } from '@angular/core'; import { ColumnType, IgxTreeGridComponent, IgxColumnComponent, IgxCellTemplateDirective, IgxCellHeaderTemplateDirective, IgxIconComponent } from 'igniteui-angular'; import { ORDERS_DATA } from '../data/orders'; import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; -import { NgIf, DatePipe } from '@angular/common'; +import { DatePipe } from '@angular/common'; @Component({ selector: 'app-tree-grid-summary-sample', styleUrls: ['./tree-grid-summary-sample.component.scss'], templateUrl: './tree-grid-summary-sample.component.html', - imports: [IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxCellTemplateDirective, IgxCellHeaderTemplateDirective, IgxIconComponent, NgIf, DatePipe] + imports: [IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxCellTemplateDirective, IgxCellHeaderTemplateDirective, IgxIconComponent, DatePipe] }) export class TreeGridSummarySampleComponent { diff --git a/src/app/tree-grid/tree-grid-summary-styling/tree-grid-summary-styling.component.html b/src/app/tree-grid/tree-grid-summary-styling/tree-grid-summary-styling.component.html index 6d4f434c92..83503f5b7f 100644 --- a/src/app/tree-grid/tree-grid-summary-styling/tree-grid-summary-styling.component.html +++ b/src/app/tree-grid/tree-grid-summary-styling/tree-grid-summary-styling.component.html @@ -1,74 +1,78 @@
- - - - - - {{ val }} - - -
{{col.field}}
- functions - - - - - {{ val }} - - -
{{col.field}}
- functions - - - - - {{ val }} - - -
Units
- functions - - - - - ${{ val }} - - -
Unit Price
- functions - - - - - ${{ val }} - - -
Price
- functions - - - - - Delivered - Undelivered - - -
{{ col.field }}
- functions - - - - - {{ val | date: 'MMM d, yyyy' }} - - -
Order Date
- functions - - - + + + + + + {{ val }} + + +
{{col.field}}
+ functions + + + + + {{ val }} + + +
{{col.field}}
+ functions + + + + + {{ val }} + + +
Units
+ functions + + + + + ${{ val }} + + +
Unit Price
+ functions + + + + + ${{ val }} + + +
Price
+ functions + + + + + @if (val) { + Delivered + } + @if (!val) { + Undelivered + } + + +
{{ col.field }}
+ functions + + + + + {{ val | date: 'MMM d, yyyy' }} + + +
Order Date
+ functions + + +
diff --git a/src/app/tree-grid/tree-grid-summary-styling/tree-grid-summary-styling.component.ts b/src/app/tree-grid/tree-grid-summary-styling/tree-grid-summary-styling.component.ts index 18676838bb..0928a80c7f 100644 --- a/src/app/tree-grid/tree-grid-summary-styling/tree-grid-summary-styling.component.ts +++ b/src/app/tree-grid/tree-grid-summary-styling/tree-grid-summary-styling.component.ts @@ -2,13 +2,13 @@ import { Component, ViewChild } from '@angular/core'; import { ColumnType, IgxTreeGridComponent, IgxColumnComponent, IgxCellTemplateDirective, IgxCellHeaderTemplateDirective, IgxIconComponent } from 'igniteui-angular'; import { ORDERS_DATA } from '../data/orders'; import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; -import { NgIf, DatePipe } from '@angular/common'; +import { DatePipe } from '@angular/common'; @Component({ selector: 'app-tree-grid-summary-styling', styleUrls: ['./tree-grid-summary-styling.component.scss'], templateUrl: './tree-grid-summary-styling.component.html', - imports: [IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxCellTemplateDirective, IgxCellHeaderTemplateDirective, IgxIconComponent, NgIf, DatePipe] + imports: [IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxCellTemplateDirective, IgxCellHeaderTemplateDirective, IgxIconComponent, DatePipe] }) export class TreeGridSummaryStylingComponent { diff --git a/src/app/tree-grid/tree-grid-summary2-sample/tree-grid-summary2-sample.component.html b/src/app/tree-grid/tree-grid-summary2-sample/tree-grid-summary2-sample.component.html index 4ddae0d855..b5381eecbb 100644 --- a/src/app/tree-grid/tree-grid-summary2-sample/tree-grid-summary2-sample.component.html +++ b/src/app/tree-grid/tree-grid-summary2-sample/tree-grid-summary2-sample.component.html @@ -1,30 +1,34 @@
- +
- +
- Show summary row when group row is collapsed: + Show summary row when group row is collapsed:
- - - - - - - - - Delivered - Undelivered - - - - + primaryKey="ID" foreignKey="ParentID"> + + + + + + + + + @if (val) { + Delivered + } + @if (!val) { + Undelivered + } + + + + diff --git a/src/app/tree-grid/tree-grid-summary2-sample/tree-grid-summary2-sample.component.ts b/src/app/tree-grid/tree-grid-summary2-sample/tree-grid-summary2-sample.component.ts index 80be392fde..8bc2012954 100644 --- a/src/app/tree-grid/tree-grid-summary2-sample/tree-grid-summary2-sample.component.ts +++ b/src/app/tree-grid/tree-grid-summary2-sample/tree-grid-summary2-sample.component.ts @@ -2,7 +2,7 @@ import { Component, OnInit, ViewChild } from '@angular/core'; import { DefaultSortingStrategy, GridSummaryCalculationMode, GridSummaryPosition, IgxNumberSummaryOperand, IgxSummaryOperand, IgxSummaryResult, IgxTreeGridComponent, ISortingExpression, SortingDirection, IgxButtonGroupComponent, IgxSwitchComponent, IgxColumnComponent, IgxCellTemplateDirective } from 'igniteui-angular'; import { ORDERS_DATA } from '../data/orders'; import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; -import { NgIf } from '@angular/common'; + class AvgSummary { @@ -22,7 +22,7 @@ class AvgSummary { selector: 'app-tree-grid-summary2-sample', styleUrls: ['./tree-grid-summary2-sample.component.scss'], templateUrl: './tree-grid-summary2-sample.component.html', - imports: [IgxButtonGroupComponent, IgxSwitchComponent, IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxCellTemplateDirective, NgIf] + imports: [IgxButtonGroupComponent, IgxSwitchComponent, IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxCellTemplateDirective] }) export class TreeGridSummary2SampleComponent implements OnInit { diff --git a/src/app/tree-grid/tree-grid-toolbar-sample-1/tree-grid-toolbar-sample-1.component.html b/src/app/tree-grid/tree-grid-toolbar-sample-1/tree-grid-toolbar-sample-1.component.html index 5fa60b443e..0840de4083 100644 --- a/src/app/tree-grid/tree-grid-toolbar-sample-1/tree-grid-toolbar-sample-1.component.html +++ b/src/app/tree-grid/tree-grid-toolbar-sample-1/tree-grid-toolbar-sample-1.component.html @@ -1,38 +1,46 @@
-
- - - - -
- Advanced Filtering - Column hiding - Column pinning - Exporting -
+
+ + + + +
+ Advanced Filtering + Column hiding + Column pinning + Exporting
- - - {{ toolbarTitle }} - - - - - - - +
+ + + {{ toolbarTitle }} + + @if (enableFiltering) { + + } + @if (enableHiding) { + + } + @if (enablePinning) { + + } + @if (enableExport) { + + } + + - - -
- - {{ cell.value }} -
- - - - - - - + + +
+ + {{ cell.value }} +
+ + + + + + +
diff --git a/src/app/tree-grid/tree-grid-toolbar-sample-1/tree-grid-toolbar-sample-1.component.ts b/src/app/tree-grid/tree-grid-toolbar-sample-1/tree-grid-toolbar-sample-1.component.ts index 1020baa23a..30f6f0a8a8 100644 --- a/src/app/tree-grid/tree-grid-toolbar-sample-1/tree-grid-toolbar-sample-1.component.ts +++ b/src/app/tree-grid/tree-grid-toolbar-sample-1/tree-grid-toolbar-sample-1.component.ts @@ -3,13 +3,13 @@ import { EMPLOYEE_FLAT_AVATARS_DATA } from '../data/employees-flat-avatars'; import { IgxInputGroupComponent, IgxLabelDirective, IgxInputDirective, IgxSwitchComponent, IgxTreeGridComponent, IgxGridToolbarComponent, IgxGridToolbarTitleComponent, IgxGridToolbarActionsComponent, IgxGridToolbarAdvancedFilteringComponent, IgxGridToolbarHidingComponent, IgxGridToolbarPinningComponent, IgxGridToolbarExporterComponent, IgxColumnComponent, IgxCellTemplateDirective, IgxAvatarComponent } from 'igniteui-angular'; import { FormsModule } from '@angular/forms'; import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; -import { NgIf } from '@angular/common'; + @Component({ selector: 'app-tree-grid-toolbar-sample-1', styleUrls: ['./tree-grid-toolbar-sample-1.component.scss'], templateUrl: './tree-grid-toolbar-sample-1.component.html', - imports: [IgxInputGroupComponent, IgxLabelDirective, FormsModule, IgxInputDirective, IgxSwitchComponent, IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxGridToolbarComponent, IgxGridToolbarTitleComponent, IgxGridToolbarActionsComponent, NgIf, IgxGridToolbarAdvancedFilteringComponent, IgxGridToolbarHidingComponent, IgxGridToolbarPinningComponent, IgxGridToolbarExporterComponent, IgxColumnComponent, IgxCellTemplateDirective, IgxAvatarComponent] + imports: [IgxInputGroupComponent, IgxLabelDirective, FormsModule, IgxInputDirective, IgxSwitchComponent, IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxGridToolbarComponent, IgxGridToolbarTitleComponent, IgxGridToolbarActionsComponent, IgxGridToolbarAdvancedFilteringComponent, IgxGridToolbarHidingComponent, IgxGridToolbarPinningComponent, IgxGridToolbarExporterComponent, IgxColumnComponent, IgxCellTemplateDirective, IgxAvatarComponent] }) export class TreeGridToolbarSample1Component { diff --git a/src/app/tree-grid/tree-grid-tree-filter-view/tree-grid-tree-filter-view.component.html b/src/app/tree-grid/tree-grid-tree-filter-view/tree-grid-tree-filter-view.component.html index d77491cf05..afa50576b8 100644 --- a/src/app/tree-grid/tree-grid-tree-filter-view/tree-grid-tree-filter-view.component.html +++ b/src/app/tree-grid/tree-grid-tree-filter-view/tree-grid-tree-filter-view.component.html @@ -1,39 +1,45 @@
-
- - - - {{ c.field }} - - +
+ + + @for (c of tGrid.columns; track c) { + + {{ c.field }} + + } + - - -
+ + +
- - - - - - - - - - - - - - - - - - Delivered - Undelivered - - - + + + + + + + + + + + + + + + + + + @if (val) { + Delivered + } + @if (!val) { + Undelivered + } + + +
diff --git a/src/app/tree-grid/tree-grid-tree-filter-view/tree-grid-tree-filter-view.component.ts b/src/app/tree-grid/tree-grid-tree-filter-view/tree-grid-tree-filter-view.component.ts index edaaa6b359..857d6c9ebc 100644 --- a/src/app/tree-grid/tree-grid-tree-filter-view/tree-grid-tree-filter-view.component.ts +++ b/src/app/tree-grid/tree-grid-tree-filter-view/tree-grid-tree-filter-view.component.ts @@ -1,7 +1,7 @@ import { ChangeDetectionStrategy, Component, OnInit, ViewChild } from '@angular/core'; import { IgxTreeGridComponent, TreeGridFilteringStrategy, IgxSelectComponent, IgxLabelDirective, IgxSelectItemComponent, IgxGridExcelStyleFilteringComponent, IgxColumnComponent, IgxCellTemplateDirective } from 'igniteui-angular'; import { ORDERS_DATA } from '../data/orders'; -import { NgFor, NgIf } from '@angular/common'; + import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; @Component({ @@ -9,7 +9,7 @@ import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scro selector: 'app-tree-grid-tree-filter-view', styleUrls: ['./tree-grid-tree-filter-view.component.scss'], templateUrl: 'tree-grid-tree-filter-view.component.html', - imports: [IgxSelectComponent, IgxLabelDirective, NgFor, IgxSelectItemComponent, IgxGridExcelStyleFilteringComponent, IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxCellTemplateDirective, NgIf] + imports: [IgxSelectComponent, IgxLabelDirective, IgxSelectItemComponent, IgxGridExcelStyleFilteringComponent, IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxCellTemplateDirective] }) export class TreeGridTreeFilterViewComponent implements OnInit { diff --git a/src/app/tree-grid/tree-grid-validation-style/tree-grid-validation-style.component.html b/src/app/tree-grid/tree-grid-validation-style/tree-grid-validation-style.component.html index 86c47271ee..03f0c039a9 100644 --- a/src/app/tree-grid/tree-grid-validation-style/tree-grid-validation-style.component.html +++ b/src/app/tree-grid/tree-grid-validation-style/tree-grid-validation-style.component.html @@ -1,13 +1,15 @@
- - - -
- - -
- - - + + @for (c of columns; track c) { + + +
+ + +
+ + + } +
diff --git a/src/app/tree-grid/tree-grid-validation-style/tree-grid-validation-style.component.ts b/src/app/tree-grid/tree-grid-validation-style/tree-grid-validation-style.component.ts index 3aa078ec55..685800cbb8 100644 --- a/src/app/tree-grid/tree-grid-validation-style/tree-grid-validation-style.component.ts +++ b/src/app/tree-grid/tree-grid-validation-style/tree-grid-validation-style.component.ts @@ -2,13 +2,13 @@ import { Component, OnInit, ViewChild } from '@angular/core'; import { IgxTreeGridComponent, RowType, IgxColumnComponent, IgxColumnRequiredValidatorDirective, IgxCellValidationErrorDirective } from 'igniteui-angular'; import { generateEmployeeFlatData, IEmployee } from '../data/employees-flat'; import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; -import { NgFor, NgTemplateOutlet } from '@angular/common'; +import { NgTemplateOutlet } from '@angular/common'; @Component({ selector: 'app-tree-grid-validation-style', styleUrls: ['tree-grid-validation-style.component.scss'], templateUrl: 'tree-grid-validation-style.component.html', - imports: [IgxTreeGridComponent, IgxPreventDocumentScrollDirective, NgFor, IgxColumnComponent, IgxColumnRequiredValidatorDirective, IgxCellValidationErrorDirective, NgTemplateOutlet] + imports: [IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxColumnRequiredValidatorDirective, IgxCellValidationErrorDirective, NgTemplateOutlet] }) export class TreeGridValidationStyleComponent implements OnInit { diff --git a/src/app/tree-grid/tree-grid-validator-service-cross-field/tree-grid-validator-service-cross-field.component.html b/src/app/tree-grid/tree-grid-validator-service-cross-field/tree-grid-validator-service-cross-field.component.html index 630304062f..59a074fc13 100644 --- a/src/app/tree-grid/tree-grid-validator-service-cross-field/tree-grid-validator-service-cross-field.component.html +++ b/src/app/tree-grid/tree-grid-validator-service-cross-field/tree-grid-validator-service-cross-field.component.html @@ -1,52 +1,62 @@
- Row edit + Row edit
- - - - - - - - - {{ city }} - - - - - - - - - {{ country }} - - - - - - - - - -
- -
-
- -
-
-
- {{message}} -
-
- - - -
- -
+ + + + + + + + @for (city of cities; track city) { + + {{ city }} + + } + + + + + + + @for (country of countries; track country) { + + {{ country }} + + } + + + + + + + + + @if (isRowValid(cell)) { +
+ +
+ } + @if (!isRowValid(cell)) { +
+ +
+ } +
+ @for (message of stateMessage(cell); track message) { +
+ {{message}} +
+ } +
+ + + +
+ +
diff --git a/src/app/tree-grid/tree-grid-validator-service-cross-field/tree-grid-validator-service-cross-field.component.ts b/src/app/tree-grid/tree-grid-validator-service-cross-field/tree-grid-validator-service-cross-field.component.ts index 403b4e7aae..5e39a2969c 100644 --- a/src/app/tree-grid/tree-grid-validator-service-cross-field/tree-grid-validator-service-cross-field.component.ts +++ b/src/app/tree-grid/tree-grid-validator-service-cross-field/tree-grid-validator-service-cross-field.component.ts @@ -5,13 +5,13 @@ import { ColumnPinningPosition, CellType, IGridEditEventArgs, IgxTreeGridCompone import { IGridFormGroupCreatedEventArgs } from 'igniteui-angular/lib/grids/common/grid.interface'; import { generateEmployeeDetailedFlatData } from '../data/employees-flat-detailed'; import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; -import { NgFor, NgIf } from '@angular/common'; + @Component({ selector: 'app-tree-grid-validator-service-cross-field-component', styleUrls: ['tree-grid-validator-service-cross-field.component.scss'], templateUrl: 'tree-grid-validator-service-cross-field.component.html', - imports: [IgxSwitchComponent, FormsModule, IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxColumnRequiredValidatorDirective, IgxColumnMinValidatorDirective, IgxColumnMaxValidatorDirective, IgxCellEditorTemplateDirective, IgxSelectComponent, ReactiveFormsModule, IgxFocusDirective, NgFor, IgxSelectItemComponent, IgxCellTemplateDirective, NgIf, IgxTooltipTargetDirective, IgxTooltipDirective, IgxButtonDirective] + imports: [IgxSwitchComponent, FormsModule, IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxColumnRequiredValidatorDirective, IgxColumnMinValidatorDirective, IgxColumnMaxValidatorDirective, IgxCellEditorTemplateDirective, IgxSelectComponent, ReactiveFormsModule, IgxFocusDirective, IgxSelectItemComponent, IgxCellTemplateDirective, IgxTooltipTargetDirective, IgxTooltipDirective, IgxButtonDirective] }) export class TreeGridValidatorServiceCrossFieldComponent implements OnInit { @ViewChild('treeGrid', { static: true }) diff --git a/src/app/tree-grid/tree-grid-validator-service-extended/tree-grid-validator-service-extended.component.html b/src/app/tree-grid/tree-grid-validator-service-extended/tree-grid-validator-service-extended.component.html index 9858847245..6fe604eea3 100644 --- a/src/app/tree-grid/tree-grid-validator-service-extended/tree-grid-validator-service-extended.component.html +++ b/src/app/tree-grid/tree-grid-validator-service-extended/tree-grid-validator-service-extended.component.html @@ -1,40 +1,46 @@
- - - - - - - - - - -
- Please enter correct phone format -
- - - - - - - -
- The date cannot be in the future! -
-
- The date cannot be before 1st Sept 2004 -
- - - - + + + + + + + + + + + @if (cell.validation.errors?.['phoneFormat']) { +
+ Please enter correct phone format +
+ } + + + + + + + + @if (cell.validation.errors?.['futureDate']) { +
+ The date cannot be in the future! +
+ } + @if (cell.validation.errors?.['pastDate']) { +
+ The date cannot be before 1st Sept 2004 +
+ } + + + + -
- - - -
+
+ + + +
diff --git a/src/app/tree-grid/tree-grid-validator-service-extended/tree-grid-validator-service-extended.component.ts b/src/app/tree-grid/tree-grid-validator-service-extended/tree-grid-validator-service-extended.component.ts index 6c064c7a59..d847e3cb52 100644 --- a/src/app/tree-grid/tree-grid-validator-service-extended/tree-grid-validator-service-extended.component.ts +++ b/src/app/tree-grid/tree-grid-validator-service-extended/tree-grid-validator-service-extended.component.ts @@ -5,7 +5,7 @@ import { IgxTreeGridComponent, IgxColumnComponent, IgxColumnMinValidatorDirectiv import { IGridFormGroupCreatedEventArgs } from 'igniteui-angular/lib/grids/common/grid.interface'; import { generateEmployeeFlatData, IEmployee } from '../data/employees-flat'; import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; -import { NgTemplateOutlet, NgIf } from '@angular/common'; +import { NgTemplateOutlet } from '@angular/common'; export function phoneFormatValidator(phoneReg: RegExp): ValidatorFn { return (control: AbstractControl): ValidationErrors | null => { @@ -32,7 +32,7 @@ export class TGridPhoneFormatDirective extends Validators { selector: 'app-tree-grid-validator-service-extended-component', styleUrls: ['tree-grid-validator-service-extended.component.scss'], templateUrl: 'tree-grid-validator-service-extended.component.html', - imports: [IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxColumnMinValidatorDirective, IgxColumnRequiredValidatorDirective, IgxColumnMaxValidatorDirective, TGridPhoneFormatDirective, IgxCellValidationErrorDirective, NgTemplateOutlet, NgIf, IgxButtonDirective] + imports: [IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxColumnMinValidatorDirective, IgxColumnRequiredValidatorDirective, IgxColumnMaxValidatorDirective, TGridPhoneFormatDirective, IgxCellValidationErrorDirective, NgTemplateOutlet, IgxButtonDirective] }) export class TreeGridValidatorServiceExtendedComponent implements OnInit { @ViewChild('treeGrid', { static: true }) public treeGrid: IgxTreeGridComponent; diff --git a/src/app/tree-grid/tree-grid-virtualization-sample/tree-grid-virtualization-sample.component.html b/src/app/tree-grid/tree-grid-virtualization-sample/tree-grid-virtualization-sample.component.html index bc25ed6d5c..7819247ba3 100644 --- a/src/app/tree-grid/tree-grid-virtualization-sample/tree-grid-virtualization-sample.component.html +++ b/src/app/tree-grid/tree-grid-virtualization-sample/tree-grid-virtualization-sample.component.html @@ -1,50 +1,58 @@
- - - - - - - - Change - + + + + + + + + Change + - -
- - - {{ formatNumber(val) }} -
- - - - - Change(%) - + +
+ @if (val>0) { + + } + @if (val<0) { + + } + {{ formatNumber(val) }} +
+ + + + + Change(%) + - - {{ formatNumber(val) }}% - - - - -
- - - {{ formatNumber(val) }}% -
- - - - - - - - - - - - -
+ + {{ formatNumber(val) }}% + + + + +
+ @if (val>0) { + + } + @if (val<0) { + + } + {{ formatNumber(val) }}% +
+ + + + + + + + + + + + +
diff --git a/src/app/tree-grid/tree-grid-virtualization-sample/tree-grid-virtualization-sample.component.ts b/src/app/tree-grid/tree-grid-virtualization-sample/tree-grid-virtualization-sample.component.ts index acc1445600..d78454df4b 100644 --- a/src/app/tree-grid/tree-grid-virtualization-sample/tree-grid-virtualization-sample.component.ts +++ b/src/app/tree-grid/tree-grid-virtualization-sample/tree-grid-virtualization-sample.component.ts @@ -3,7 +3,7 @@ import { IgxTreeGridComponent, IgxColumnComponent, IgxCellHeaderTemplateDirectiv import { Observable } from 'rxjs'; import { FinancialDataService } from '../../services/financial.service'; import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; -import { NgIf, AsyncPipe } from '@angular/common'; +import { AsyncPipe } from '@angular/common'; @Component({ providers: [FinancialDataService], @@ -11,7 +11,7 @@ import { NgIf, AsyncPipe } from '@angular/common'; selector: 'tree-grid-virtualization-sample', styleUrls: ['./tree-grid-virtualization-sample.component.scss'], templateUrl: 'tree-grid-virtualization-sample.component.html', - imports: [IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxCellHeaderTemplateDirective, IgxCellTemplateDirective, NgIf, IgxBadgeComponent, AsyncPipe] + imports: [IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxCellHeaderTemplateDirective, IgxCellTemplateDirective, IgxBadgeComponent, AsyncPipe] }) export class TreeGridVirtualizationSampleComponent {