diff --git a/package-lock.json b/package-lock.json index 24bda946397..23f815094c4 100644 --- a/package-lock.json +++ b/package-lock.json @@ -27,7 +27,7 @@ "express": "^5.2.1", "fflate": "^0.8.1", "igniteui-i18n-core": "^1.0.2", - "igniteui-theming": "^24.1.1", + "igniteui-theming": "^25.0.0-beta.1", "igniteui-trial-watermark": "^3.1.0", "jspdf": "^4.0.0", "lodash-es": "^4.17.21", @@ -339,13 +339,13 @@ } }, "node_modules/@angular-devkit/architect": { - "version": "0.2101.2", - "resolved": "https://registry.npmjs.org/@angular-devkit/architect/-/architect-0.2101.2.tgz", - "integrity": "sha512-pV2onJgp16xO0vAqEfRWVynRPPLVHydYLANNa3UX3l5T39JcYdMIoOHSIIl8tWrxVeOwiWd1ajub0VsFTUok4Q==", + "version": "0.2101.3", + "resolved": "https://registry.npmjs.org/@angular-devkit/architect/-/architect-0.2101.3.tgz", + "integrity": "sha512-vKz8aPA62W+e9+pF6ct4CRDG/MjlIH7sWFGYkxPPRst2g46ZQsRkrzfMZAWv/wnt6OZ1OwyRuO3RW83EMhag8g==", "dev": true, "license": "MIT", "dependencies": { - "@angular-devkit/core": "21.1.2", + "@angular-devkit/core": "21.1.3", "rxjs": "7.8.2" }, "bin": { @@ -358,9 +358,9 @@ } }, "node_modules/@angular-devkit/core": { - "version": "21.1.2", - "resolved": "https://registry.npmjs.org/@angular-devkit/core/-/core-21.1.2.tgz", - "integrity": "sha512-0wl5nJlFWsbwfUB2CQeTSmnVQ8AtqqwM3bYPYtXSc+vA8+hzsOAjjDuRnBxZS9zTnqtXKXB1e7M3Iy7KUwh7LA==", + "version": "21.1.3", + "resolved": "https://registry.npmjs.org/@angular-devkit/core/-/core-21.1.3.tgz", + "integrity": "sha512-huEXd1tWQHwwN+0VGRT+vSVplV0KNrGFUGJzkIW6iJE1SQElxn6etMai+pSd5DJcePkx6+SuscVsxbfwf70hnA==", "dev": true, "license": "MIT", "dependencies": { @@ -386,13 +386,13 @@ } }, "node_modules/@angular-devkit/schematics": { - "version": "21.1.2", - "resolved": "https://registry.npmjs.org/@angular-devkit/schematics/-/schematics-21.1.2.tgz", - "integrity": "sha512-PA3gkiFhHUuXd2XuP7yzKg/9N++bjw+uOl473KwIsMuZwMPhncKa4+mUYBaffDoPqaujZvjfo6mjtCBuiBv05w==", + "version": "21.1.3", + "resolved": "https://registry.npmjs.org/@angular-devkit/schematics/-/schematics-21.1.3.tgz", + "integrity": "sha512-Ps7bRl5uOcM7WpNJHbSls/jz5/wAI0ldkTlKyiBFA7RtNeQIABAV+hvlw5DJuEb1Lo5hnK0hXj90AyZdOxzY+w==", "dev": true, "license": "MIT", "dependencies": { - "@angular-devkit/core": "21.1.2", + "@angular-devkit/core": "21.1.3", "jsonc-parser": "3.3.1", "magic-string": "0.30.21", "ora": "9.0.0", @@ -529,14 +529,14 @@ } }, "node_modules/@angular/build": { - "version": "21.1.2", - "resolved": "https://registry.npmjs.org/@angular/build/-/build-21.1.2.tgz", - "integrity": "sha512-5hl7OTZeQcdkr/3LXSijLuUCwlcqGyYJYOb8GbFqSifSR03JFI3tLQtyQ0LX2CXv3MOx1qFUQbYVfcjW5M36QQ==", + "version": "21.1.3", + "resolved": "https://registry.npmjs.org/@angular/build/-/build-21.1.3.tgz", + "integrity": "sha512-RXVRuamfrSPwsFCLJgsO2ucp+dwWDbGbhXrQnMrGXm0qdgYpI8bAsBMd8wOeUA6vn4fRmjaRFQZbL/rcIVrkzw==", "dev": true, "license": "MIT", "dependencies": { "@ampproject/remapping": "2.3.0", - "@angular-devkit/architect": "0.2101.2", + "@angular-devkit/architect": "0.2101.3", "@babel/core": "7.28.5", "@babel/helper-annotate-as-pure": "7.27.3", "@babel/helper-split-export-declaration": "7.24.7", @@ -559,7 +559,7 @@ "semver": "7.7.3", "source-map-support": "0.5.21", "tinyglobby": "0.2.15", - "undici": "7.18.2", + "undici": "7.20.0", "vite": "7.3.0", "watchpack": "2.5.0" }, @@ -579,7 +579,7 @@ "@angular/platform-browser": "^21.0.0", "@angular/platform-server": "^21.0.0", "@angular/service-worker": "^21.0.0", - "@angular/ssr": "^21.1.2", + "@angular/ssr": "^21.1.3", "karma": "^6.4.0", "less": "^4.2.0", "ng-packagr": "^21.0.0", @@ -629,19 +629,19 @@ } }, "node_modules/@angular/cli": { - "version": "21.1.2", - "resolved": "https://registry.npmjs.org/@angular/cli/-/cli-21.1.2.tgz", - "integrity": "sha512-AHjXCBl2PEilMJct6DX3ih5Fl5PiKpNDIj0ViTyVh1YcfpYjt6NzhVlV2o++8VNPNH/vMcmf2551LZIDProXXA==", + "version": "21.1.3", + "resolved": "https://registry.npmjs.org/@angular/cli/-/cli-21.1.3.tgz", + "integrity": "sha512-UPtDcpKyrKZRPfym9gTovcibPzl2O/Woy7B8sm45sAnjDH+jDUCcCvuIak7GpH47shQkC2J4yvnHZbD4c6XxcQ==", "dev": true, "license": "MIT", "dependencies": { - "@angular-devkit/architect": "0.2101.2", - "@angular-devkit/core": "21.1.2", - "@angular-devkit/schematics": "21.1.2", + "@angular-devkit/architect": "0.2101.3", + "@angular-devkit/core": "21.1.3", + "@angular-devkit/schematics": "21.1.3", "@inquirer/prompts": "7.10.1", "@listr2/prompt-adapter-inquirer": "3.0.5", - "@modelcontextprotocol/sdk": "1.25.2", - "@schematics/angular": "21.1.2", + "@modelcontextprotocol/sdk": "1.26.0", + "@schematics/angular": "21.1.3", "@yarnpkg/lockfile": "1.1.0", "algoliasearch": "5.46.2", "ini": "6.0.0", @@ -884,9 +884,9 @@ } }, "node_modules/@angular/ssr": { - "version": "21.1.2", - "resolved": "https://registry.npmjs.org/@angular/ssr/-/ssr-21.1.2.tgz", - "integrity": "sha512-bmLnCbXh/Q7o9O/LiXHvtPZ3PvAW14RlpAPAs1NKXpTRcIkUaTI38a85ev4Z3+0ZkrFA8ieqAZmvcwl/Lcnbeg==", + "version": "21.1.3", + "resolved": "https://registry.npmjs.org/@angular/ssr/-/ssr-21.1.3.tgz", + "integrity": "sha512-Hwp/TxeLgynw9ogq/35+2SMLHFL997ZqNNsWN5IZgXKQB23UreepgktStIO5RY0vsevudFfREojtxlcGPUEGEg==", "license": "MIT", "dependencies": { "tslib": "^2.3.0" @@ -932,9 +932,9 @@ "license": "ISC" }, "node_modules/@astrojs/compiler": { - "version": "2.13.0", - "resolved": "https://registry.npmjs.org/@astrojs/compiler/-/compiler-2.13.0.tgz", - "integrity": "sha512-mqVORhUJViA28fwHYaWmsXSzLO9osbdZ5ImUfxBarqsYdMlPbqAqGJCxsNzvppp1BEzc1mJNjOVvQqeDN8Vspw==", + "version": "2.13.1", + "resolved": "https://registry.npmjs.org/@astrojs/compiler/-/compiler-2.13.1.tgz", + "integrity": "sha512-f3FN83d2G/v32ipNClRKgYv30onQlMZX1vCeZMjPsMMPl1mDpmbl0+N5BYo4S/ofzqJyS5hvwacEo0CCVDn/Qg==", "dev": true, "license": "MIT" }, @@ -1357,14 +1357,14 @@ } }, "node_modules/@cacheable/utils": { - "version": "2.3.3", - "resolved": "https://registry.npmjs.org/@cacheable/utils/-/utils-2.3.3.tgz", - "integrity": "sha512-JsXDL70gQ+1Vc2W/KUFfkAJzgb4puKwwKehNLuB+HrNKWf91O736kGfxn4KujXCCSuh6mRRL4XEB0PkAFjWS0A==", + "version": "2.3.4", + "resolved": "https://registry.npmjs.org/@cacheable/utils/-/utils-2.3.4.tgz", + "integrity": "sha512-knwKUJEYgIfwShABS1BX6JyJJTglAFcEU7EXqzTdiGCXur4voqkiJkdgZIQtWNFhynzDWERcTYv/sETMu3uJWA==", "dev": true, "license": "MIT", "dependencies": { "hashery": "^1.3.0", - "keyv": "^5.5.5" + "keyv": "^5.6.0" } }, "node_modules/@cacheable/utils/node_modules/keyv": { @@ -3791,13 +3791,13 @@ } }, "node_modules/@modelcontextprotocol/sdk": { - "version": "1.25.2", - "resolved": "https://registry.npmjs.org/@modelcontextprotocol/sdk/-/sdk-1.25.2.tgz", - "integrity": "sha512-LZFeo4F9M5qOhC/Uc1aQSrBHxMrvxett+9KLHt7OhcExtoiRN9DKgbZffMP/nxjutWDQpfMDfP3nkHI4X9ijww==", + "version": "1.26.0", + "resolved": "https://registry.npmjs.org/@modelcontextprotocol/sdk/-/sdk-1.26.0.tgz", + "integrity": "sha512-Y5RmPncpiDtTXDbLKswIJzTqu2hyBKxTNsgKqKclDbhIgg1wgtf1fRuvxgTnRfcnxtvvgbIEcqUOzZrJ6iSReg==", "dev": true, "license": "MIT", "dependencies": { - "@hono/node-server": "^1.19.7", + "@hono/node-server": "^1.19.9", "ajv": "^8.17.1", "ajv-formats": "^3.0.1", "content-type": "^1.0.5", @@ -3805,14 +3805,15 @@ "cross-spawn": "^7.0.5", "eventsource": "^3.0.2", "eventsource-parser": "^3.0.0", - "express": "^5.0.1", - "express-rate-limit": "^7.5.0", - "jose": "^6.1.1", + "express": "^5.2.1", + "express-rate-limit": "^8.2.1", + "hono": "^4.11.4", + "jose": "^6.1.3", "json-schema-typed": "^8.0.2", "pkce-challenge": "^5.0.0", "raw-body": "^3.0.0", "zod": "^3.25 || ^4.0", - "zod-to-json-schema": "^3.25.0" + "zod-to-json-schema": "^3.25.1" }, "engines": { "node": ">=18" @@ -4366,13 +4367,13 @@ } }, "node_modules/@npmcli/git/node_modules/isexe": { - "version": "3.1.1", - "resolved": "https://registry.npmjs.org/isexe/-/isexe-3.1.1.tgz", - "integrity": "sha512-LpB/54B+/2J5hqQ7imZHfdU31OlgQqx7ZicVlkm9kzg9/w8GKLEcFfJl/t7DCEDueOyBAD6zCCwTO6Fzs0NoEQ==", + "version": "3.1.4", + "resolved": "https://registry.npmjs.org/isexe/-/isexe-3.1.4.tgz", + "integrity": "sha512-jCErc4h4RnTPjFq53G4whhjAMbUAqinGrCrTT4dmMNyi4zTthK+wphqbRLJtL4BN/Mq7Zzltr0m/b1X0m7PGFQ==", "dev": true, - "license": "ISC", + "license": "BlueOak-1.0.0", "engines": { - "node": ">=16" + "node": ">=20" } }, "node_modules/@npmcli/git/node_modules/lru-cache": { @@ -4522,13 +4523,13 @@ } }, "node_modules/@npmcli/promise-spawn/node_modules/isexe": { - "version": "3.1.1", - "resolved": "https://registry.npmjs.org/isexe/-/isexe-3.1.1.tgz", - "integrity": "sha512-LpB/54B+/2J5hqQ7imZHfdU31OlgQqx7ZicVlkm9kzg9/w8GKLEcFfJl/t7DCEDueOyBAD6zCCwTO6Fzs0NoEQ==", + "version": "3.1.4", + "resolved": "https://registry.npmjs.org/isexe/-/isexe-3.1.4.tgz", + "integrity": "sha512-jCErc4h4RnTPjFq53G4whhjAMbUAqinGrCrTT4dmMNyi4zTthK+wphqbRLJtL4BN/Mq7Zzltr0m/b1X0m7PGFQ==", "dev": true, - "license": "ISC", + "license": "BlueOak-1.0.0", "engines": { - "node": ">=16" + "node": ">=20" } }, "node_modules/@npmcli/promise-spawn/node_modules/which": { @@ -4576,13 +4577,13 @@ } }, "node_modules/@npmcli/run-script/node_modules/isexe": { - "version": "3.1.1", - "resolved": "https://registry.npmjs.org/isexe/-/isexe-3.1.1.tgz", - "integrity": "sha512-LpB/54B+/2J5hqQ7imZHfdU31OlgQqx7ZicVlkm9kzg9/w8GKLEcFfJl/t7DCEDueOyBAD6zCCwTO6Fzs0NoEQ==", + "version": "3.1.4", + "resolved": "https://registry.npmjs.org/isexe/-/isexe-3.1.4.tgz", + "integrity": "sha512-jCErc4h4RnTPjFq53G4whhjAMbUAqinGrCrTT4dmMNyi4zTthK+wphqbRLJtL4BN/Mq7Zzltr0m/b1X0m7PGFQ==", "dev": true, - "license": "ISC", + "license": "BlueOak-1.0.0", "engines": { - "node": ">=16" + "node": ">=20" } }, "node_modules/@npmcli/run-script/node_modules/which": { @@ -5792,14 +5793,14 @@ } }, "node_modules/@schematics/angular": { - "version": "21.1.2", - "resolved": "https://registry.npmjs.org/@schematics/angular/-/angular-21.1.2.tgz", - "integrity": "sha512-kxwxhCIUrj7DfzEtDSs/pi/w+aII/WQLpPfLgoQCWE8/95v60WnTfd1afmsXsFoxikKPxkwoPWtU2YbhSoX9MQ==", + "version": "21.1.3", + "resolved": "https://registry.npmjs.org/@schematics/angular/-/angular-21.1.3.tgz", + "integrity": "sha512-obJvWBhzRdsYL2msM4+8bQD21vFl3VxaVsuiq6iIfYsxhU5i2Iar2wM9NaRaIIqAYhZ8ehQQ/moB9BEbWvDCTw==", "dev": true, "license": "MIT", "dependencies": { - "@angular-devkit/core": "21.1.2", - "@angular-devkit/schematics": "21.1.2", + "@angular-devkit/core": "21.1.3", + "@angular-devkit/schematics": "21.1.3", "jsonc-parser": "3.3.1" }, "engines": { @@ -6238,9 +6239,9 @@ } }, "node_modules/@types/node": { - "version": "20.19.32", - "resolved": "https://registry.npmjs.org/@types/node/-/node-20.19.32.tgz", - "integrity": "sha512-Ez8QE4DMfhjjTsES9K2dwfV258qBui7qxUsoaixZDiTzbde4U12e1pXGNu/ECsUIOi5/zoCxAQxIhQnaUQ2VvA==", + "version": "20.19.33", + "resolved": "https://registry.npmjs.org/@types/node/-/node-20.19.33.tgz", + "integrity": "sha512-Rs1bVAIdBs5gbTIKza/tgpMuG1k3U/UMJLWecIMxNdJFDMzcM5LOiLVRYh3PilWEYDIeUDv7bpiHPLPsbydGcw==", "dev": true, "license": "MIT", "dependencies": { @@ -8681,9 +8682,9 @@ } }, "node_modules/caniuse-lite": { - "version": "1.0.30001768", - "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001768.tgz", - "integrity": "sha512-qY3aDRZC5nWPgHUgIB84WL+nySuo19wk0VJpp/XI9T34lrvkyhRvNVOFJOp2kxClQhiFBu+TaUSudf6oa3vkSA==", + "version": "1.0.30001769", + "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001769.tgz", + "integrity": "sha512-BCfFL1sHijQlBGWBMuJyhZUhzo7wer5sVj9hqekB/7xn0Ypy+pER/edCYQm4exbXj4WiySGp40P8UuTh6w1srg==", "dev": true, "funding": [ { @@ -11384,11 +11385,14 @@ } }, "node_modules/express-rate-limit": { - "version": "7.5.1", - "resolved": "https://registry.npmjs.org/express-rate-limit/-/express-rate-limit-7.5.1.tgz", - "integrity": "sha512-7iN8iPMDzOMHPUYllBEsQdWVB6fPDMPqwjBaFrgr4Jgr/+okjvzAy+UHlYYL/Vs0OsOrMkwS6PJDkFlJwoxUnw==", + "version": "8.2.1", + "resolved": "https://registry.npmjs.org/express-rate-limit/-/express-rate-limit-8.2.1.tgz", + "integrity": "sha512-PCZEIEIxqwhzw4KF0n7QF4QqruVTcF73O5kFKUnGOyjbCCgizBBiFaYpd/fnBLUMPw/BWw9OsiN7GgrNYr7j6g==", "dev": true, "license": "MIT", + "dependencies": { + "ip-address": "10.0.1" + }, "engines": { "node": ">= 16" }, @@ -13651,12 +13655,11 @@ } }, "node_modules/hono": { - "version": "4.11.7", - "resolved": "https://registry.npmjs.org/hono/-/hono-4.11.7.tgz", - "integrity": "sha512-l7qMiNee7t82bH3SeyUCt9UF15EVmaBvsppY2zQtrbIhl/yzBTny+YUxsVjSjQ6gaqaeVtZmGocom8TzBlA4Yw==", + "version": "4.11.9", + "resolved": "https://registry.npmjs.org/hono/-/hono-4.11.9.tgz", + "integrity": "sha512-Eaw2YTGM6WOxA6CXbckaEvslr2Ne4NFsKrvc0v97JD5awbmeBLO5w9Ho9L9kmKonrwF9RJlW6BxT1PVv/agBHQ==", "dev": true, "license": "MIT", - "peer": true, "engines": { "node": ">=16.9.0" } @@ -14025,9 +14028,9 @@ } }, "node_modules/igniteui-theming": { - "version": "24.1.2", - "resolved": "https://registry.npmjs.org/igniteui-theming/-/igniteui-theming-24.1.2.tgz", - "integrity": "sha512-Buz5rDPnOPkX5iPDyH2jCMRtJu5CnnSFBco0Sw5lkmXXgp6+zVyG6eTZQ/m1UR0AEBwb0tHo+6IIEebpMvRWRQ==", + "version": "25.0.0-beta.1", + "resolved": "https://registry.npmjs.org/igniteui-theming/-/igniteui-theming-25.0.0-beta.1.tgz", + "integrity": "sha512-bs90Su+VHCTtO9536I5zZkzuFCyYx3FhuiR2idjPcijECobDBtSrfRzLa4xMUHyltUhfwYIya+DSLN+xRRlaDg==", "license": "MIT" }, "node_modules/igniteui-trial-watermark": { @@ -14253,9 +14256,9 @@ "license": "MIT" }, "node_modules/ip-address": { - "version": "10.1.0", - "resolved": "https://registry.npmjs.org/ip-address/-/ip-address-10.1.0.tgz", - "integrity": "sha512-XXADHxXmvT9+CRxhXg56LJovE+bmWnEWB78LB83VZTprKTmaC5QfruXocxzTZ2Kl0DNwKuBdlIhjL8LeY8Sf8Q==", + "version": "10.0.1", + "resolved": "https://registry.npmjs.org/ip-address/-/ip-address-10.0.1.tgz", + "integrity": "sha512-NWv9YLW4PoW2B7xtzaS3NCot75m6nK7Icdv0o3lfMceJVRfSoQwqD4wEH5rLwoKJwUiZ/rfpiVBhnaF0FK4HoA==", "dev": true, "license": "MIT", "engines": { @@ -18312,13 +18315,13 @@ } }, "node_modules/node-gyp/node_modules/isexe": { - "version": "3.1.1", - "resolved": "https://registry.npmjs.org/isexe/-/isexe-3.1.1.tgz", - "integrity": "sha512-LpB/54B+/2J5hqQ7imZHfdU31OlgQqx7ZicVlkm9kzg9/w8GKLEcFfJl/t7DCEDueOyBAD6zCCwTO6Fzs0NoEQ==", + "version": "3.1.4", + "resolved": "https://registry.npmjs.org/isexe/-/isexe-3.1.4.tgz", + "integrity": "sha512-jCErc4h4RnTPjFq53G4whhjAMbUAqinGrCrTT4dmMNyi4zTthK+wphqbRLJtL4BN/Mq7Zzltr0m/b1X0m7PGFQ==", "dev": true, - "license": "ISC", + "license": "BlueOak-1.0.0", "engines": { - "node": ">=16" + "node": ">=20" } }, "node_modules/node-gyp/node_modules/nopt": { @@ -19969,9 +19972,9 @@ } }, "node_modules/puppeteer": { - "version": "24.37.1", - "resolved": "https://registry.npmjs.org/puppeteer/-/puppeteer-24.37.1.tgz", - "integrity": "sha512-iugAcwjRIX6XsMS1dzWbjKKUcEE0ZmmRbV0T6RyTtXNSHyBdss0r9GYJ9eOjUZfOoWeKCIOAptogdHYoBbJDeA==", + "version": "24.37.2", + "resolved": "https://registry.npmjs.org/puppeteer/-/puppeteer-24.37.2.tgz", + "integrity": "sha512-FV1W/919ve0y0oiS/3Rp5XY4MUNUokpZOH/5M4MMDfrrvh6T9VbdKvAHrAFHBuCxvluDxhjra20W7Iz6HJUcIQ==", "dev": true, "hasInstallScript": true, "license": "Apache-2.0", @@ -19980,7 +19983,7 @@ "chromium-bidi": "13.1.1", "cosmiconfig": "^9.0.0", "devtools-protocol": "0.0.1566079", - "puppeteer-core": "24.37.1", + "puppeteer-core": "24.37.2", "typed-query-selector": "^2.12.0" }, "bin": { @@ -19991,9 +19994,9 @@ } }, "node_modules/puppeteer-core": { - "version": "24.37.1", - "resolved": "https://registry.npmjs.org/puppeteer-core/-/puppeteer-core-24.37.1.tgz", - "integrity": "sha512-ylRJReaA6kd/CrahdrxxnSZf5S2hf1QR0S39QeoS55fuBoOl4UggGPW94zheu9lmCokpRQpa7q8r98xYyiQl0Q==", + "version": "24.37.2", + "resolved": "https://registry.npmjs.org/puppeteer-core/-/puppeteer-core-24.37.2.tgz", + "integrity": "sha512-nN8qwE3TGF2vA/+xemPxbesntTuqD9vCGOiZL2uh8HES3pPzLX20MyQjB42dH2rhQ3W3TljZ4ZaKZ0yX/abQuw==", "dev": true, "license": "Apache-2.0", "dependencies": { @@ -24896,9 +24899,9 @@ } }, "node_modules/undici": { - "version": "7.18.2", - "resolved": "https://registry.npmjs.org/undici/-/undici-7.18.2.tgz", - "integrity": "sha512-y+8YjDFzWdQlSE9N5nzKMT3g4a5UBX1HKowfdXh0uvAnTaqqwqB92Jt4UXBAeKekDs5IaDKyJFR4X1gYVCgXcw==", + "version": "7.20.0", + "resolved": "https://registry.npmjs.org/undici/-/undici-7.20.0.tgz", + "integrity": "sha512-MJZrkjyd7DeC+uPZh+5/YaMDxFiiEEaDgbUSVMXayofAkDWF1088CDo+2RPg7B1BuS1qf1vgNE7xqwPxE0DuSQ==", "dev": true, "license": "MIT", "engines": { diff --git a/package.json b/package.json index ce159cbd550..7e0fbcec2b9 100644 --- a/package.json +++ b/package.json @@ -77,7 +77,7 @@ "express": "^5.2.1", "fflate": "^0.8.1", "igniteui-i18n-core": "^1.0.2", - "igniteui-theming": "^24.1.1", + "igniteui-theming": "^25.0.0-beta.1", "igniteui-trial-watermark": "^3.1.0", "jspdf": "^4.0.0", "lodash-es": "^4.17.21", diff --git a/projects/igniteui-angular-elements/src/themes/_util.scss b/projects/igniteui-angular-elements/src/themes/_util.scss index 1ba4688bea1..370653517dd 100644 --- a/projects/igniteui-angular-elements/src/themes/_util.scss +++ b/projects/igniteui-angular-elements/src/themes/_util.scss @@ -3,6 +3,7 @@ @use 'sass:string'; @use 'sass:list'; @use '../../../igniteui-angular/core/src/core/styles/themes' as igx; +@use 'igniteui-theming/sass/themes/config' as theme; @use './variables' as vars; /// Prefix used for 'global' component CSS vars @@ -25,44 +26,50 @@ $elements-selector-prefix: 'igc'; /// @access private /// @param {Map} $theme_schema - The component's theme schema /// @return {Map} - Updated component theme schema -@function updateElementName($theme_schema) { - $prefix: 'ig'; +@function update-element($theme_schema) { $result: $theme_schema; - @if map.has-key($theme_schema, "name") { - $name: map.get($theme_schema, "name"); - $selector: map.get($theme_schema, "selector") or $name; + @if map.has-key($theme_schema, '_meta', 'name') { + $name: map.get($theme_schema, '_meta', 'name'); + $selector: map.get($theme_schema, 'selector') or $name; $modified: (); - // @debug "name: #{$name}"; - - @if string.index($name, 'igx-') { - $name: list.nth(string.split($name, 'igx-'), -1); - $name: '#{$elements-var-prefix}-#{$name}'; - // @debug "name after: #{$name}"; - $modified: map.merge($modified, (name: $name)); - } - - // For exposed components also modify selector with updated element prefix: - @if list.index(vars.$allowed, map.get($theme_schema, "name")) { - // @debug "selector before: #{$selector}"; - $selector: updateSelectors($selector); - // @debug "selector after: #{$selector}"; + // For exposed components also update the selector with updated element prefix + @if list.index(vars.$allowed, #{igx-#{$name}}) { + $selector: update-selectors($selector); } - $modified: map.merge($modified, (selector: $selector)); + $modified: map.merge( + $modified, + ( + selector: $selector, + ) + ); + // INFO: Weird use case! I'm not aware of any component using this, but just in case... @if map.has-key($theme_schema, 'themes') { $themes: map.get($theme_schema, 'themes'); - $newThemes: (); + $new: (); + @each $name, $sub_schema in $themes { - $newThemes: map.set($newThemes, $name, updateElementName($sub_schema)); + $newThemes: map.set( + $newThemes, + $name, + update-element($sub_schema) + ); } - $modified: map.merge($modified, (themes: $newThemes)); + + $modified: map.deep-merge( + $modified, + ( + themes: $new, + ) + ); } $result: map.merge($result, $modified); } + @return $result; } @@ -70,7 +77,7 @@ $elements-selector-prefix: 'igc'; /// @access private /// @param {String} $selector - The selector(s) to update /// @return {String} - Updated selector(s) with `igc-` prefixed equivalents -@function updateSelectors($selector) { +@function update-selectors($selector) { $result: (); @each $sel in $selector { @@ -83,7 +90,7 @@ $elements-selector-prefix: 'igc'; } } - @return "#{$result}"; + @return '#{$result}'; } /// Generates an Ignite UI for Angular Elements global theme. @@ -96,18 +103,13 @@ $elements-selector-prefix: 'igc'; /// @requires $light-material-schema /// @requires {function} is-component /// @requires {function} is-used -@mixin elements-theme( - $palette, - $schema, - $exclude, - // $roundness, - // $elevation, - // $elevations, -) { +@mixin elements-theme($palette, $schema, $exclude) { + @include theme.configure-variable-prefix($elements-var-prefix); + @include igx.theme-internal( $palette: $palette, $exclude: $exclude, $schema: $schema, - $theme-handler: meta.get-function("updateElementName") + $theme-handler: meta.get-function('update-element') ); } diff --git a/projects/igniteui-angular/core/src/core/styles/components/action-strip/_action-strip-theme.scss b/projects/igniteui-angular/core/src/core/styles/components/action-strip/_action-strip-theme.scss index 26c2c7dd010..6bfbc14f2c6 100644 --- a/projects/igniteui-angular/core/src/core/styles/components/action-strip/_action-strip-theme.scss +++ b/projects/igniteui-angular/core/src/core/styles/components/action-strip/_action-strip-theme.scss @@ -68,9 +68,9 @@ igx-icon { --component-size: var(--action-strip-size); - width: var(--igx-icon-size, rem(18px)); - height: var(--igx-icon-size, rem(18px)); - font-size: var(--igx-icon-size, rem(18px)); + width: var(--ig-icon-size, rem(18px)); + height: var(--ig-icon-size, rem(18px)); + font-size: var(--ig-icon-size, rem(18px)); } &%igx-drop-down__item { diff --git a/projects/igniteui-angular/core/src/core/styles/components/badge/_badge-theme.scss b/projects/igniteui-angular/core/src/core/styles/components/badge/_badge-theme.scss index 47555fe0140..8e3d1f1f7df 100644 --- a/projects/igniteui-angular/core/src/core/styles/components/badge/_badge-theme.scss +++ b/projects/igniteui-angular/core/src/core/styles/components/badge/_badge-theme.scss @@ -28,7 +28,7 @@ overflow: hidden; igx-icon { - --size: var(--igx-icon-size, #{sizable(rem(12px), rem(14px), rem(16px))}); + --size: var(--ig-icon-size, #{sizable(rem(12px), rem(14px), rem(16px))}); --component-size: var(--badge-size); display: inline-flex; @@ -42,7 +42,6 @@ $icon-size: sizable(rem(8px), rem(10px), rem(12px)); --ig-icon-size: #{$icon-size}; - --igx-icon-size: #{$icon-size}; } } } diff --git a/projects/igniteui-angular/core/src/core/styles/components/button-group/_button-group-theme.scss b/projects/igniteui-angular/core/src/core/styles/components/button-group/_button-group-theme.scss index 8757e17a0c0..1cd13a4877e 100644 --- a/projects/igniteui-angular/core/src/core/styles/components/button-group/_button-group-theme.scss +++ b/projects/igniteui-angular/core/src/core/styles/components/button-group/_button-group-theme.scss @@ -143,7 +143,6 @@ $icon-size: rem(18px); --ig-icon-size: #{$icon-size}; - --igx-icon-size: #{$icon-size}; } &:active { @@ -159,7 +158,6 @@ $icon-size: rem(16px); --ig-icon-size: #{$icon-size}; - --igx-icon-size: #{$icon-size}; } &:hover { diff --git a/projects/igniteui-angular/core/src/core/styles/components/button/_button-theme.scss b/projects/igniteui-angular/core/src/core/styles/components/button/_button-theme.scss index caf88f851cf..37d2ded6e42 100644 --- a/projects/igniteui-angular/core/src/core/styles/components/button/_button-theme.scss +++ b/projects/igniteui-angular/core/src/core/styles/components/button/_button-theme.scss @@ -328,9 +328,9 @@ --component-size: var(--ig-size, var(--ig-size-large)); display: flex; justify-content: center; - width: var(--igx-icon-size, #{$icon-in-button-size}); - height: var(--igx-icon-size, #{$icon-in-button-size}); - font-size: var(--igx-icon-size, #{$icon-in-button-size}); + width: var(--ig-icon-size, #{$icon-in-button-size}); + height: var(--ig-icon-size, #{$icon-in-button-size}); + font-size: var(--ig-icon-size, #{$icon-in-button-size}); transition: var(--_button-transition); } } diff --git a/projects/igniteui-angular/core/src/core/styles/components/combo/_combo-theme.scss b/projects/igniteui-angular/core/src/core/styles/components/combo/_combo-theme.scss index a32aa8c8c46..b14e5ab3469 100644 --- a/projects/igniteui-angular/core/src/core/styles/components/combo/_combo-theme.scss +++ b/projects/igniteui-angular/core/src/core/styles/components/combo/_combo-theme.scss @@ -95,7 +95,7 @@ // in order to override the !important rule of .igx-icon--inactive. %igx-combo__case-icon { igx-icon { - --igx-icon-disabled-color: var(--ig-gray-600); + --ig-icon-disabled-color: var(--ig-gray-600); opacity: 1; } @@ -159,8 +159,8 @@ @if $variant == 'fluent' or $variant == 'bootstrap' { %igx-combo__search { - --igx-input-group-input-suffix-background: transparent; - --igx-input-group-input-suffix-background--focused: transparent; + --ig-input-group-input-suffix-background: transparent; + --ig-input-group-input-suffix-background--focused: transparent; .igx-input-group__bundle::after { border-block-end-color: var(--border-color); diff --git a/projects/igniteui-angular/core/src/core/styles/components/grid/_excel-filtering-theme.scss b/projects/igniteui-angular/core/src/core/styles/components/grid/_excel-filtering-theme.scss index ca47d44e9e1..0ebc1c4fb0d 100644 --- a/projects/igniteui-angular/core/src/core/styles/components/grid/_excel-filtering-theme.scss +++ b/projects/igniteui-angular/core/src/core/styles/components/grid/_excel-filtering-theme.scss @@ -93,7 +93,7 @@ @if $variant != 'indigo' { igx-icon { - --size: var(--igx-icon-size, #{rem(15px)}); + --size: var(--ig-icon-size, #{rem(15px)}); } } } @@ -546,9 +546,9 @@ } igx-icon { - width: var(--igx-icon-size, #{$tree-node-expander-size}); - height: var(--igx-icon-size, #{$tree-node-expander-size}); - font-size: var(--igx-icon-size, #{$tree-node-expander-size}); + width: var(--ig-icon-size, #{$tree-node-expander-size}); + height: var(--ig-icon-size, #{$tree-node-expander-size}); + font-size: var(--ig-icon-size, #{$tree-node-expander-size}); } > igx-checkbox, @@ -694,9 +694,9 @@ } igx-icon { - width: var(--igx-icon-size, #{rem(18px)}); - height: var(--igx-icon-size, #{rem(18px)}); - font-size: var(--igx-icon-size, #{rem(18px)}); + width: var(--ig-icon-size, #{rem(18px)}); + height: var(--ig-icon-size, #{rem(18px)}); + font-size: var(--ig-icon-size, #{rem(18px)}); } } diff --git a/projects/igniteui-angular/core/src/core/styles/components/grid/_grid-theme.scss b/projects/igniteui-angular/core/src/core/styles/components/grid/_grid-theme.scss index f955eda19aa..6cc75e048c5 100644 --- a/projects/igniteui-angular/core/src/core/styles/components/grid/_grid-theme.scss +++ b/projects/igniteui-angular/core/src/core/styles/components/grid/_grid-theme.scss @@ -436,43 +436,43 @@ igx-tree-grid { @if $variant == 'material' { @if $theme-variant == 'light' { - --igx-chip-disabled-text-color: #{color($color: 'gray', $variant: 500)}; - --igx-chip-disabled-background: #{color($color: 'gray', $variant: 300)}; - --igx-chip-disabled-border-color: #{color($color: 'gray', $variant: 300)}; + --ig-chip-disabled-text-color: #{color($color: 'gray', $variant: 500)}; + --ig-chip-disabled-background: #{color($color: 'gray', $variant: 300)}; + --ig-chip-disabled-border-color: #{color($color: 'gray', $variant: 300)}; } @if $theme-variant == 'dark' { - --igx-chip-disabled-text-color: #{color($color: 'gray', $variant: 300)}; - --igx-chip-disabled-background: #{color($color: 'gray', $variant: 200)}; - --igx-chip-disabled-border-color: #{color($color: 'gray', $variant: 200)}; + --ig-chip-disabled-text-color: #{color($color: 'gray', $variant: 300)}; + --ig-chip-disabled-background: #{color($color: 'gray', $variant: 200)}; + --ig-chip-disabled-border-color: #{color($color: 'gray', $variant: 200)}; } } @if $variant == 'fluent' { @if $theme-variant == 'dark' { - --igx-chip-disabled-text-color: #{color($color: 'gray', $variant: 400)}; - --igx-chip-disabled-background: #{color($color: 'gray', $variant: 200)}; - --igx-chip-disabled-border-color: #{color($color: 'gray', $variant: 200)}; + --ig-chip-disabled-text-color: #{color($color: 'gray', $variant: 400)}; + --ig-chip-disabled-background: #{color($color: 'gray', $variant: 200)}; + --ig-chip-disabled-border-color: #{color($color: 'gray', $variant: 200)}; } } @if $variant == 'bootstrap' { @if $theme-variant == 'dark' { - --igx-chip-disabled-text-color: #{color($color: 'gray', $variant: 400)}; - --igx-chip-disabled-background: #{color($color: 'gray', $variant: 200)}; - --igx-chip-disabled-border-color: #{color($color: 'gray', $variant: 200)}; + --ig-chip-disabled-text-color: #{color($color: 'gray', $variant: 400)}; + --ig-chip-disabled-background: #{color($color: 'gray', $variant: 200)}; + --ig-chip-disabled-border-color: #{color($color: 'gray', $variant: 200)}; } } @if $variant == 'indigo' { @if $theme-variant == 'light' { - --igx-chip-disabled-text-color: #{color($color: 'gray', $variant: 500)}; - --igx-chip-disabled-background: #{color($color: 'gray', $variant: 200)}; - --igx-chip-disabled-border-color: #{color($color: 'gray', $variant: 300)}; + --ig-chip-disabled-text-color: #{color($color: 'gray', $variant: 500)}; + --ig-chip-disabled-background: #{color($color: 'gray', $variant: 200)}; + --ig-chip-disabled-border-color: #{color($color: 'gray', $variant: 300)}; } @if $theme-variant == 'dark' { - --igx-chip-disabled-text-color: #{color($color: 'gray', $variant: 300)}; - --igx-chip-disabled-background: #{color($color: 'gray', $variant: 200)}; - --igx-chip-disabled-border-color: #{color($color: 'gray', $variant: 200)}; + --ig-chip-disabled-text-color: #{color($color: 'gray', $variant: 300)}; + --ig-chip-disabled-background: #{color($color: 'gray', $variant: 200)}; + --ig-chip-disabled-border-color: #{color($color: 'gray', $variant: 200)}; } } } @@ -501,7 +501,7 @@ map.get($grouparea-min-height, 'comfortable') )}; - --igx-tree-indent-size: #{sizable(rem(12px), rem(16px), rem(24px))}; + --ig-tree-indent-size: #{sizable(rem(12px), rem(16px), rem(24px))}; position: relative; display: grid; @@ -1283,9 +1283,9 @@ > igx-icon { color: color($color: 'error'); - width: var(--igx-icon-size, rem(18px)); - height: var(--igx-icon-size, rem(18px)); - font-size: var(--igx-icon-size, rem(18px)); + width: var(--ig-icon-size, rem(18px)); + height: var(--ig-icon-size, rem(18px)); + font-size: var(--ig-icon-size, rem(18px)); } %grid-cell-text { @@ -1543,7 +1543,7 @@ @if $variant != 'indigo' { igx-icon { - --size: var(--igx-icon-size, #{rem(15px)}); + --size: var(--ig-icon-size, #{rem(15px)}); } } @@ -2174,9 +2174,9 @@ margin: 0 rem(4px); igx-icon { - width: var(--igx-icon-size, #{rem(16px)}); - height: var(--igx-icon-size, #{rem(16px)}); - font-size: var(--igx-icon-size, #{rem(16px)}); + width: var(--ig-icon-size, #{rem(16px)}); + height: var(--ig-icon-size, #{rem(16px)}); + font-size: var(--ig-icon-size, #{rem(16px)}); } [dir='rtl'] & { diff --git a/projects/igniteui-angular/core/src/core/styles/components/grid/_pivot-data-selector-theme.scss b/projects/igniteui-angular/core/src/core/styles/components/grid/_pivot-data-selector-theme.scss index 52d94dffac7..71378a5f211 100644 --- a/projects/igniteui-angular/core/src/core/styles/components/grid/_pivot-data-selector-theme.scss +++ b/projects/igniteui-angular/core/src/core/styles/components/grid/_pivot-data-selector-theme.scss @@ -203,9 +203,9 @@ %selector-base, %selector-item-ghost { igx-icon { - width: var(--igx-icon-size, #{rem(18px)}); - height: var(--igx-icon-size, #{rem(18px)}); - font-size: var(--igx-icon-size, #{rem(18px)}); + width: var(--ig-icon-size, #{rem(18px)}); + height: var(--ig-icon-size, #{rem(18px)}); + font-size: var(--ig-icon-size, #{rem(18px)}); } } diff --git a/projects/igniteui-angular/core/src/core/styles/components/icon-button/_icon-button-theme.scss b/projects/igniteui-angular/core/src/core/styles/components/icon-button/_icon-button-theme.scss index 9d5216b6d40..f5deab5ca6b 100644 --- a/projects/igniteui-angular/core/src/core/styles/components/icon-button/_icon-button-theme.scss +++ b/projects/igniteui-angular/core/src/core/styles/components/icon-button/_icon-button-theme.scss @@ -91,9 +91,9 @@ --component-size: var(--ig-size, var(--ig-size-large)); display: flex; justify-content: center; - width: var(--igx-icon-size, #{$icon-in-button-size}); - height: var(--igx-icon-size, #{$icon-in-button-size}); - font-size: var(--igx-icon-size, #{$icon-in-button-size}); + width: var(--ig-icon-size, #{$icon-in-button-size}); + height: var(--ig-icon-size, #{$icon-in-button-size}); + font-size: var(--ig-icon-size, #{$icon-in-button-size}); } @if $variant == 'fluent' { diff --git a/projects/igniteui-angular/core/src/core/styles/components/input/_input-group-theme.scss b/projects/igniteui-angular/core/src/core/styles/components/input/_input-group-theme.scss index 99b11c40b1b..c3e1e78ca44 100644 --- a/projects/igniteui-angular/core/src/core/styles/components/input/_input-group-theme.scss +++ b/projects/igniteui-angular/core/src/core/styles/components/input/_input-group-theme.scss @@ -1825,14 +1825,14 @@ igx-prefix, [igxPrefix] { - background: var(--igx-input-group-input-prefix-background, transparent); - color: var(--igx-input-group-input-prefix-color, var(--ig-primary-500)); + background: var(--ig-input-group-input-prefix-background, transparent); + color: var(--ig-input-group-input-prefix-color, var(--ig-primary-500)); } igx-suffix, [igxSuffix] { - background: var(--igx-input-group-input-suffix-background, transparent); - color: var(--igx-input-group-input-suffix-color, var(--ig-primary-500)); + background: var(--ig-input-group-input-suffix-background, transparent); + color: var(--ig-input-group-input-suffix-color, var(--ig-primary-500)); } &%form-group-display--readonly { @@ -1840,7 +1840,7 @@ [igxPrefix], igx-suffix, [igxSuffix] { - color: var(--igx-input-group-disabled-text-color, var(--ig-gray-500)); + color: var(--ig-input-group-disabled-text-color, var(--ig-gray-500)); } } } @@ -1853,13 +1853,13 @@ igx-suffix, [igxSuffix] { - color: var(--igx-input-group-input-suffix-color--focused, var(--ig-gray-900)); + color: var(--ig-input-group-input-suffix-color--focused, var(--ig-gray-900)); } &%form-group-display--readonly { igx-suffix, [igxSuffix] { - color: var(--igx-input-group-input-suffix-color--focused, var(--ig-gray-900)); + color: var(--ig-input-group-input-suffix-color--focused, var(--ig-gray-900)); } } } diff --git a/projects/igniteui-angular/core/src/core/styles/components/navdrawer/_navdrawer-theme.scss b/projects/igniteui-angular/core/src/core/styles/components/navdrawer/_navdrawer-theme.scss index fa032dc01b5..d65ba12e5e1 100644 --- a/projects/igniteui-angular/core/src/core/styles/components/navdrawer/_navdrawer-theme.scss +++ b/projects/igniteui-angular/core/src/core/styles/components/navdrawer/_navdrawer-theme.scss @@ -47,8 +47,8 @@ ), $variant); %navdrawer-display { - --igx-nav-drawer-size: #{rem(240px)}; - --igx-nav-drawer-size--mini: #{$item-mini-size}; + --ig-nav-drawer-size: #{rem(240px)}; + --ig-nav-drawer-size--mini: #{$item-mini-size}; flex-basis: 0; transition: flex-basis; @@ -58,11 +58,11 @@ } %navdrawer-display-pinned { - flex-basis: var(--igx-nav-drawer-size); + flex-basis: var(--ig-nav-drawer-size); } %navdrawer-display-mini-pinned { - flex-basis: calc(var(--igx-mini-nav-drawer-size, #{$item-mini-size}) + rem(1px)); + flex-basis: calc(var(--ig-mini-nav-drawer-size, #{$item-mini-size}) + rem(1px)); } %aside { @@ -73,7 +73,7 @@ background: var-get($theme, 'background'); top: 0; bottom: 0; - width: var(--igx-nav-drawer-size); + width: var(--ig-nav-drawer-size); inset-inline-start: 0; z-index: 999; transition: width, padding, transform; @@ -140,7 +140,7 @@ %aside--mini { transition-duration: .3s; - width: var(--igx-nav-drawer-size--mini); + width: var(--ig-nav-drawer-size--mini); min-width: fit-content; %item { @@ -166,7 +166,7 @@ %aside--normal { transition-duration: .3s; - width: var(--igx-nav-drawer-size); + width: var(--ig-nav-drawer-size); } %overlay { @@ -329,9 +329,9 @@ box-shadow: none; igx-icon { - width: var(--igx-icon-size, #{$drawer-icon-size}); - height: var(--igx-icon-size, #{$drawer-icon-size}); - font-size: var(--igx-icon-size, #{$drawer-icon-size}); + width: var(--ig-icon-size, #{$drawer-icon-size}); + height: var(--ig-icon-size, #{$drawer-icon-size}); + font-size: var(--ig-icon-size, #{$drawer-icon-size}); margin: 0; } diff --git a/projects/igniteui-angular/core/src/core/styles/components/query-builder/_query-builder-theme.scss b/projects/igniteui-angular/core/src/core/styles/components/query-builder/_query-builder-theme.scss index 4ca1970f5ee..783b9ce11ec 100644 --- a/projects/igniteui-angular/core/src/core/styles/components/query-builder/_query-builder-theme.scss +++ b/projects/igniteui-angular/core/src/core/styles/components/query-builder/_query-builder-theme.scss @@ -186,9 +186,9 @@ %advanced-filter__outlet { igx-select-item > igx-icon { - width: var(--igx-icon-size, #{$icon-size}); - height: var(--igx-icon-size, #{$icon-size}); - font-size: var(--igx-icon-size, #{$icon-size}); + width: var(--ig-icon-size, #{$icon-size}); + height: var(--ig-icon-size, #{$icon-size}); + font-size: var(--ig-icon-size, #{$icon-size}); margin-inline-end: rem(8px); } } diff --git a/projects/igniteui-angular/core/src/core/styles/components/stepper/_stepper-theme.scss b/projects/igniteui-angular/core/src/core/styles/components/stepper/_stepper-theme.scss index 22fc7353d30..70c8c43dd0d 100644 --- a/projects/igniteui-angular/core/src/core/styles/components/stepper/_stepper-theme.scss +++ b/projects/igniteui-angular/core/src/core/styles/components/stepper/_stepper-theme.scss @@ -212,21 +212,21 @@ @if $variant == 'bootstrap' { > igx-icon { - width: var(--igx-icon-size, #{rem(18px)}); - height: var(--igx-icon-size, #{rem(18px)}); - font-size: var(--igx-icon-size, #{rem(18px)}); + width: var(--ig-icon-size, #{rem(18px)}); + height: var(--ig-icon-size, #{rem(18px)}); + font-size: var(--ig-icon-size, #{rem(18px)}); } } @else if $variant == 'indigo' { > igx-icon { - width: var(--igx-icon-size, #{rem(14px)}); - height: var(--igx-icon-size, #{rem(14px)}); - font-size: var(--igx-icon-size, #{rem(14px)}); + width: var(--ig-icon-size, #{rem(14px)}); + height: var(--ig-icon-size, #{rem(14px)}); + font-size: var(--ig-icon-size, #{rem(14px)}); } } @else { > igx-icon { - width: var(--igx-icon-size, #{calc(#{$indicator-size} - #{rem(6px)})}); - height: var(--igx-icon-size, #{calc(#{$indicator-size} - #{rem(6px)})}); - font-size: var(--igx-icon-size, #{calc(#{$indicator-size} - #{rem(6px)})}); + width: var(--ig-icon-size, #{calc(#{$indicator-size} - #{rem(6px)})}); + height: var(--ig-icon-size, #{calc(#{$indicator-size} - #{rem(6px)})}); + font-size: var(--ig-icon-size, #{calc(#{$indicator-size} - #{rem(6px)})}); color: inherit; } } diff --git a/projects/igniteui-angular/core/src/core/styles/components/tabs/_tabs-theme.scss b/projects/igniteui-angular/core/src/core/styles/components/tabs/_tabs-theme.scss index f2177a08c75..84dcbfc30d8 100644 --- a/projects/igniteui-angular/core/src/core/styles/components/tabs/_tabs-theme.scss +++ b/projects/igniteui-angular/core/src/core/styles/components/tabs/_tabs-theme.scss @@ -167,7 +167,6 @@ $icon-size: #{if($variant == 'indigo', rem(16px), rem(24px))}; --ig-icon-size: #{$icon-size}; - --igx-icon-size: #{$icon-size}; } [dir='rtl'] & { diff --git a/projects/igniteui-angular/core/src/services/overlay/overlay.spec.ts b/projects/igniteui-angular/core/src/services/overlay/overlay.spec.ts index 2dd45ea03e2..e711072d431 100644 --- a/projects/igniteui-angular/core/src/services/overlay/overlay.spec.ts +++ b/projects/igniteui-angular/core/src/services/overlay/overlay.spec.ts @@ -3222,9 +3222,6 @@ describe('igxOverlay', () => { expect(wrapperElement).toBeDefined(); const styles = css(wrapperElement); - expect(styles.findIndex( - (e) => e.includes('--background-color: var(--igx-overlay-background-color, hsl(from var(--ig-gray-500) h s l/0.54));'))) - .toBeGreaterThan(-1); expect(styles.findIndex( (e) => e.includes('background: var(--background-color);'))) .toBeGreaterThan(-1); @@ -3249,7 +3246,6 @@ describe('igxOverlay', () => { .parentElement.getElementsByClassName(CLASS_OVERLAY_WRAPPER_MODAL)[0] as HTMLElement; expect(wrapperElement).toBeDefined(); const styles = css(wrapperElement); - expect(styles.findIndex((e) => e.includes('--background-color: var(--igx-overlay-background-color, hsl(from var(--ig-gray-500) h s l/0.54));'))).toBeGreaterThan(-1); expect(styles.findIndex((e) => e.includes('background: var(--background-color);'))).toBeGreaterThan(-1); fixture.componentInstance.overlay.detachAll(); diff --git a/projects/igniteui-angular/grids/tree-grid/src/tree-cell.component.html b/projects/igniteui-angular/grids/tree-grid/src/tree-cell.component.html index 5a38877025d..6a4a72f8d21 100644 --- a/projects/igniteui-angular/grids/tree-grid/src/tree-cell.component.html +++ b/projects/igniteui-angular/grids/tree-grid/src/tree-cell.component.html @@ -207,7 +207,7 @@
} @if (!isLoading) { diff --git a/projects/igniteui-angular/migrations/migration-collection.json b/projects/igniteui-angular/migrations/migration-collection.json index d669b16f214..f482045b5d8 100644 --- a/projects/igniteui-angular/migrations/migration-collection.json +++ b/projects/igniteui-angular/migrations/migration-collection.json @@ -265,6 +265,13 @@ "factory": "./update-21_1_0_import-migration", "recommended": true, "optional": true + }, + "migration-53": { + "version": "21.1.0", + "description": "Migrates --igx-* CSS variables to --ig-* for better consistency between component frameworks", + "factory": "./update-21_1_0_css-migration", + "recommended": true, + "optional": true } } } diff --git a/projects/igniteui-angular/migrations/update-21_1_0_css-migration/index.spec.ts b/projects/igniteui-angular/migrations/update-21_1_0_css-migration/index.spec.ts new file mode 100644 index 00000000000..a25ea869608 --- /dev/null +++ b/projects/igniteui-angular/migrations/update-21_1_0_css-migration/index.spec.ts @@ -0,0 +1,109 @@ +import * as path from 'path'; + +import { SchematicTestRunner, UnitTestTree } from '@angular-devkit/schematics/testing'; +import { setupTestTree } from '../common/setup.spec'; + +const version = '21.1.0'; + +describe(`Update to ${version}`, () => { + let appTree: UnitTestTree; + const schematicRunner = new SchematicTestRunner('ig-migrate', path.join(__dirname, '../migration-collection.json')); + + beforeEach(() => { + appTree = setupTestTree(); + }); + + const migrationName = 'migration-53'; + + it('should replace CSS custom properties prefix from --igx to --ig', async () => { + appTree.create( + `/testSrc/appPrefix/component/test.component.scss`, +`.custom-avatar { + --igx-avatar-background: var(--ig-primary-500); +}` + ); + + const tree = await schematicRunner + .runSchematic(migrationName, {}, appTree); + + expect( + tree.readContent('/testSrc/appPrefix/component/test.component.scss') + ).toEqual( +`.custom-avatar { + --ig-avatar-background: var(--ig-primary-500); +}` + ); + }); + + it('should replace multiple --igx- occurrences in a single file', async () => { + appTree.create( + `/testSrc/appPrefix/component/multi.component.scss`, +`.theme { + --igx-surface-500: var(--igx-primary-500); + color: var(--igx-secondary-200); + background: var(--igx-surface-100); +}` + ); + + const tree = await schematicRunner + .runSchematic(migrationName, {}, appTree); + + expect( + tree.readContent('/testSrc/appPrefix/component/multi.component.scss') + ).toEqual( +`.theme { + --ig-surface-500: var(--ig-primary-500); + color: var(--ig-secondary-200); + background: var(--ig-surface-100); +}` + ); + }); + + it('should leave files without --igx- unchanged', async () => { + const original = `.card { + --ig-primary-500: #000; +}`; + + appTree.create( + `/testSrc/appPrefix/component/no-change.component.scss`, + original + ); + + const tree = await schematicRunner + .runSchematic(migrationName, {}, appTree); + + expect( + tree.readContent('/testSrc/appPrefix/component/no-change.component.scss') + ).toEqual(original); + }); + + it('should update --igx- inside :root and comments', async () => { + appTree.create( + `/testSrc/appPrefix/component/root.component.scss`, +`:root { + --igx-radius-factor: 1.25; +} + +// --igx-elevation-1 is used for cards +.card { + box-shadow: var(--igx-elevation-1); +}` + ); + + const tree = await schematicRunner + .runSchematic(migrationName, {}, appTree); + + expect( + tree.readContent('/testSrc/appPrefix/component/root.component.scss') + ).toEqual( +`:root { + --ig-radius-factor: 1.25; +} + +// --ig-elevation-1 is used for cards +.card { + box-shadow: var(--ig-elevation-1); +}` + ); + }); +}); diff --git a/projects/igniteui-angular/migrations/update-21_1_0_css-migration/index.ts b/projects/igniteui-angular/migrations/update-21_1_0_css-migration/index.ts new file mode 100644 index 00000000000..cc552c81351 --- /dev/null +++ b/projects/igniteui-angular/migrations/update-21_1_0_css-migration/index.ts @@ -0,0 +1,24 @@ +import type { + Rule, + SchematicContext, + Tree +} from '@angular-devkit/schematics'; +import { UpdateChanges } from '../common/UpdateChanges'; + +const version = '21.1.0'; + +export default (): Rule => async (host: Tree, context: SchematicContext) => { + context.logger.info(`Applying migration for Ignite UI for Angular to version ${version} - CSS custom properties migration`); + + const update = new UpdateChanges(__dirname, host, context); + update.applyChanges(); + + for (const entryPath of update.sassFiles) { + let content = host.read(entryPath).toString(); + + if (content.includes('--igx-')) { + content = content.replace(/--igx-/g, '--ig-'); + host.overwrite(entryPath, content); + } + } +}; diff --git a/projects/igniteui-angular/navigation-drawer/src/navigation-drawer/navigation-drawer.component.spec.ts b/projects/igniteui-angular/navigation-drawer/src/navigation-drawer/navigation-drawer.component.spec.ts index 8fea72caf88..56a809eee72 100644 --- a/projects/igniteui-angular/navigation-drawer/src/navigation-drawer/navigation-drawer.component.spec.ts +++ b/projects/igniteui-angular/navigation-drawer/src/navigation-drawer/navigation-drawer.component.spec.ts @@ -226,7 +226,7 @@ describe('Navigation Drawer', () => { fixture = TestBed.createComponent(TestComponentMiniComponent); fixture.detectChanges(); asideElem = fixture.debugElement.query(By.css('.igx-nav-drawer__aside--mini')); - cssProp = getComputedStyle(asideElem.nativeElement).getPropertyValue('--igx-nav-drawer-size--mini'); + cssProp = getComputedStyle(asideElem.nativeElement).getPropertyValue('--ig-nav-drawer-size--mini'); expect(cssProp).toEqual('56px'); diff --git a/projects/igniteui-angular/navigation-drawer/src/navigation-drawer/navigation-drawer.component.ts b/projects/igniteui-angular/navigation-drawer/src/navigation-drawer/navigation-drawer.component.ts index caab69a8c45..0feff3064fa 100644 --- a/projects/igniteui-angular/navigation-drawer/src/navigation-drawer/navigation-drawer.component.ts +++ b/projects/igniteui-angular/navigation-drawer/src/navigation-drawer/navigation-drawer.component.ts @@ -322,7 +322,7 @@ export class IgxNavigationDrawerComponent implements /** * @hidden */ - @HostBinding('style.--igx-nav-drawer-size') + @HostBinding('style.--ig-nav-drawer-size') public get normalSize() { if (!this.isOpen) { return '0px'; @@ -334,7 +334,7 @@ export class IgxNavigationDrawerComponent implements /** * @hidden */ - @HostBinding('style.--igx-nav-drawer-size--mini') + @HostBinding('style.--ig-nav-drawer-size--mini') public get miniSize() { if (this.miniTemplate && this.miniWidth) { return this.miniWidth; diff --git a/projects/igniteui-angular/package.json b/projects/igniteui-angular/package.json index 03b78f5cc53..99c75d93d4d 100644 --- a/projects/igniteui-angular/package.json +++ b/projects/igniteui-angular/package.json @@ -75,7 +75,7 @@ "igniteui-trial-watermark": "^3.1.0", "jspdf": "^4.0.0", "lodash-es": "^4.17.21", - "igniteui-theming": "^24.1.1", + "igniteui-theming": "^25.0.0-beta.1", "igniteui-i18n-core": "^1.0.2", "@igniteui/material-icons-extended": "^3.1.0" }, diff --git a/src/app/app.component.scss b/src/app/app.component.scss index 271ac7a24fd..f1218140682 100644 --- a/src/app/app.component.scss +++ b/src/app/app.component.scss @@ -3,5 +3,5 @@ } #paneldrawer { - --igx-nav-drawer-size: 27rem; + --ig-nav-drawer-size: 27rem; } diff --git a/src/app/circular-progress-showcase/circular-progress-showcase.sample.html b/src/app/circular-progress-showcase/circular-progress-showcase.sample.html index 68477c4c46d..1216999d98a 100644 --- a/src/app/circular-progress-showcase/circular-progress-showcase.sample.html +++ b/src/app/circular-progress-showcase/circular-progress-showcase.sample.html @@ -2,8 +2,7 @@
+ [style.--ig-circular-progress-diameter]="properties.diameter ? properties.diameter + 'px' : null">

Circular progress Angular

diff --git a/src/app/grid-finjs/grid-finjs.component.scss b/src/app/grid-finjs/grid-finjs.component.scss index 7e43e5d8e1b..2ea41ad849c 100644 --- a/src/app/grid-finjs/grid-finjs.component.scss +++ b/src/app/grid-finjs/grid-finjs.component.scss @@ -4,7 +4,7 @@ align-items: center; igx-icon { - --igx-icon-size: 16px; + --ig-icon-size: 16px; } } diff --git a/src/styles/hound/components/input-group/_overwrites.scss b/src/styles/hound/components/input-group/_overwrites.scss index fa1a6de9f0b..a8ad79c068a 100644 --- a/src/styles/hound/components/input-group/_overwrites.scss +++ b/src/styles/hound/components/input-group/_overwrites.scss @@ -30,13 +30,13 @@ igx-input-group.igx-input-group--fluent { igx-input-group.igx-input-group--fluent.igx-input-group--textarea-group.igx-input-group--invalid, igx-input-group.igx-input-group--fluent.igx-input-group--invalid { - --igx-input-group-input-prefix-color: #{color($color: 'error')}; - --igx-input-group-input-prefix-color--focused: #{color($color: 'error')}; - --igx-input-group-input-prefix-color-filled: #{color($color: 'error')}; + --ig-input-group-input-prefix-color: #{color($color: 'error')}; + --ig-input-group-input-prefix-color--focused: #{color($color: 'error')}; + --ig-input-group-input-prefix-color-filled: #{color($color: 'error')}; - --igx-input-group-input-suffix-color: #{color($color: 'error')}; - --igx-input-group-input-suffix-color--focused: #{color($color: 'error')}; - --igx-input-group-input-suffix-color-filled: #{color($color: 'error')}; + --ig-input-group-input-suffix-color: #{color($color: 'error')}; + --ig-input-group-input-suffix-color--focused: #{color($color: 'error')}; + --ig-input-group-input-suffix-color-filled: #{color($color: 'error')}; .igx-input-group__bundle { &:focus-within, @@ -48,13 +48,13 @@ igx-input-group.igx-input-group--fluent.igx-input-group--invalid { igx-input-group.igx-input-group--fluent.igx-input-group--textarea-group.igx-input-group--valid, igx-input-group.igx-input-group--fluent.igx-input-group--valid { - --igx-input-group-input-prefix-color: #{color($color: 'success')}; - --igx-input-group-input-prefix-color--focused: #{color($color: 'success')}; - --igx-input-group-input-prefix-color-filled: #{color($color: 'success')}; + --ig-input-group-input-prefix-color: #{color($color: 'success')}; + --ig-input-group-input-prefix-color--focused: #{color($color: 'success')}; + --ig-input-group-input-prefix-color-filled: #{color($color: 'success')}; - --igx-input-group-input-suffix-color: #{color($color: 'success')}; - --igx-input-group-input-suffix-color--focused: #{color($color: 'success')}; - --igx-input-group-input-suffix-color-filled: #{color($color: 'success')}; + --ig-input-group-input-suffix-color: #{color($color: 'success')}; + --ig-input-group-input-suffix-color--focused: #{color($color: 'success')}; + --ig-input-group-input-suffix-color-filled: #{color($color: 'success')}; .igx-input-group__bundle { &:focus-within,