From 9dc3aab5b7d7fb8fe20d1dd0aa2d4a08558f2eb8 Mon Sep 17 00:00:00 2001 From: desig9stein Date: Mon, 26 Jan 2026 17:51:20 +0200 Subject: [PATCH 1/3] refactor(grid): scope styles to grid components --- package-lock.json | 229 +- package.json | 2 +- .../components/grid/_grid-component.scss | 1320 ++--- .../grid/_group-by-area-component.scss | 14 +- .../grid/_header-row-component.scss | 308 +- .../core/src/summaries/themes/_base.scss | 191 +- .../grids/grid/src/grid.component.scss | 4 + .../grids/grid/src/grid.component.ts | 4 +- .../src/hierarchical-grid.component.scss | 4 + .../src/hierarchical-grid.component.ts | 30 +- .../pivot-grid/src/pivot-grid.component.scss | 4 + .../pivot-grid/src/pivot-grid.component.ts | 158 +- .../igniteui-angular/grids/themes/_base.scss | 2573 +++++++++ .../grids/themes/dark/_bootstrap.scss | 12 + .../grids/themes/dark/_fluent.scss | 12 + .../grids/themes/dark/_index.scss | 7 + .../grids/themes/dark/_indigo.scss | 55 + .../grids/themes/dark/_material.scss | 12 + .../grids/themes/dark/_tokens.scss | 7 + .../grids/themes/light/_index.scss | 7 + .../grids/themes/light/_indigo.scss | 49 + .../grids/themes/light/_tokens.scss | 8 + .../grids/themes/shared/_bootstrap.scss | 15 + .../grids/themes/shared/_fluent.scss | 15 + .../grids/themes/shared/_index.scss | 4 + .../grids/themes/shared/_indigo.scss | 93 + .../grids/themes/shared/_material.scss | 15 + .../themes/test/igniteui-angular-dark.css | 3 + .../grids/themes/test/igniteui-angular.css | 5077 +++++++++++++++++ .../themes/test/igniteui-bootstrap-dark.css | 3 + .../themes/test/igniteui-bootstrap-light.css | 3 + .../grids/themes/test/igniteui-dark-green.css | 3 + .../test/igniteui-fluent-dark-excel.css | 3 + .../themes/test/igniteui-fluent-dark-word.css | 3 + .../themes/test/igniteui-fluent-dark.css | 3 + .../test/igniteui-fluent-light-excel.css | 3 + .../test/igniteui-fluent-light-word.css | 3 + .../themes/test/igniteui-fluent-light.css | 3 + .../themes/test/igniteui-indigo-dark.css | 3 + .../themes/test/igniteui-indigo-light.css | 3 + .../tree-grid/src/tree-grid.component.scss | 4 + .../tree-grid/src/tree-grid.component.ts | 61 +- 42 files changed, 9175 insertions(+), 1155 deletions(-) create mode 100644 projects/igniteui-angular/grids/grid/src/grid.component.scss create mode 100644 projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid.component.scss create mode 100644 projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.scss create mode 100644 projects/igniteui-angular/grids/themes/_base.scss create mode 100644 projects/igniteui-angular/grids/themes/dark/_bootstrap.scss create mode 100644 projects/igniteui-angular/grids/themes/dark/_fluent.scss create mode 100644 projects/igniteui-angular/grids/themes/dark/_index.scss create mode 100644 projects/igniteui-angular/grids/themes/dark/_indigo.scss create mode 100644 projects/igniteui-angular/grids/themes/dark/_material.scss create mode 100644 projects/igniteui-angular/grids/themes/dark/_tokens.scss create mode 100644 projects/igniteui-angular/grids/themes/light/_index.scss create mode 100644 projects/igniteui-angular/grids/themes/light/_indigo.scss create mode 100644 projects/igniteui-angular/grids/themes/light/_tokens.scss create mode 100644 projects/igniteui-angular/grids/themes/shared/_bootstrap.scss create mode 100644 projects/igniteui-angular/grids/themes/shared/_fluent.scss create mode 100644 projects/igniteui-angular/grids/themes/shared/_index.scss create mode 100644 projects/igniteui-angular/grids/themes/shared/_indigo.scss create mode 100644 projects/igniteui-angular/grids/themes/shared/_material.scss create mode 100644 projects/igniteui-angular/grids/themes/test/igniteui-angular-dark.css create mode 100644 projects/igniteui-angular/grids/themes/test/igniteui-angular.css create mode 100644 projects/igniteui-angular/grids/themes/test/igniteui-bootstrap-dark.css create mode 100644 projects/igniteui-angular/grids/themes/test/igniteui-bootstrap-light.css create mode 100644 projects/igniteui-angular/grids/themes/test/igniteui-dark-green.css create mode 100644 projects/igniteui-angular/grids/themes/test/igniteui-fluent-dark-excel.css create mode 100644 projects/igniteui-angular/grids/themes/test/igniteui-fluent-dark-word.css create mode 100644 projects/igniteui-angular/grids/themes/test/igniteui-fluent-dark.css create mode 100644 projects/igniteui-angular/grids/themes/test/igniteui-fluent-light-excel.css create mode 100644 projects/igniteui-angular/grids/themes/test/igniteui-fluent-light-word.css create mode 100644 projects/igniteui-angular/grids/themes/test/igniteui-fluent-light.css create mode 100644 projects/igniteui-angular/grids/themes/test/igniteui-indigo-dark.css create mode 100644 projects/igniteui-angular/grids/themes/test/igniteui-indigo-light.css create mode 100644 projects/igniteui-angular/grids/tree-grid/src/tree-grid.component.scss diff --git a/package-lock.json b/package-lock.json index 4bf83b8953f..a09df28c360 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": "file:../igniteui-theming/igniteui-theming-1.0.0.tgz", "igniteui-trial-watermark": "^3.1.0", "jspdf": "^4.0.0", "lodash-es": "^4.17.21", @@ -384,39 +384,6 @@ } } }, - "node_modules/@angular-devkit/architect/node_modules/chokidar": { - "version": "4.0.3", - "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-4.0.3.tgz", - "integrity": "sha512-Qgzu8kfBvo+cA4962jnP1KkS6Dop5NS6g7R5LFYJr4b8Ub94PPQXUksCw9PvXoeXPRRddRNC5C1JQUR2SMGtnA==", - "dev": true, - "license": "MIT", - "optional": true, - "peer": true, - "dependencies": { - "readdirp": "^4.0.1" - }, - "engines": { - "node": ">= 14.16.0" - }, - "funding": { - "url": "https://paulmillr.com/funding/" - } - }, - "node_modules/@angular-devkit/architect/node_modules/readdirp": { - "version": "4.1.2", - "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-4.1.2.tgz", - "integrity": "sha512-GDhwkLfywWL2s6vEjyhri+eXmfH6j1L7JE27WhqLeYzoh/A3DBaYGEj2H/HFZCn/kMfim73FXxEJTw06WtxQwg==", - "dev": true, - "license": "MIT", - "optional": true, - "engines": { - "node": ">= 14.18.0" - }, - "funding": { - "type": "individual", - "url": "https://paulmillr.com/funding/" - } - }, "node_modules/@angular-devkit/core": { "version": "21.1.1", "resolved": "https://registry.npmjs.org/@angular-devkit/core/-/core-21.1.1.tgz", @@ -507,39 +474,6 @@ } } }, - "node_modules/@angular-eslint/builder/node_modules/chokidar": { - "version": "4.0.3", - "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-4.0.3.tgz", - "integrity": "sha512-Qgzu8kfBvo+cA4962jnP1KkS6Dop5NS6g7R5LFYJr4b8Ub94PPQXUksCw9PvXoeXPRRddRNC5C1JQUR2SMGtnA==", - "dev": true, - "license": "MIT", - "optional": true, - "peer": true, - "dependencies": { - "readdirp": "^4.0.1" - }, - "engines": { - "node": ">= 14.16.0" - }, - "funding": { - "url": "https://paulmillr.com/funding/" - } - }, - "node_modules/@angular-eslint/builder/node_modules/readdirp": { - "version": "4.1.2", - "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-4.1.2.tgz", - "integrity": "sha512-GDhwkLfywWL2s6vEjyhri+eXmfH6j1L7JE27WhqLeYzoh/A3DBaYGEj2H/HFZCn/kMfim73FXxEJTw06WtxQwg==", - "dev": true, - "license": "MIT", - "optional": true, - "engines": { - "node": ">= 14.18.0" - }, - "funding": { - "type": "individual", - "url": "https://paulmillr.com/funding/" - } - }, "node_modules/@angular-eslint/bundled-angular-compiler": { "version": "20.7.0", "resolved": "https://registry.npmjs.org/@angular-eslint/bundled-angular-compiler/-/bundled-angular-compiler-20.7.0.tgz", @@ -660,24 +594,6 @@ "url": "https://github.com/chalk/chalk?sponsor=1" } }, - "node_modules/@angular-eslint/schematics/node_modules/chokidar": { - "version": "4.0.3", - "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-4.0.3.tgz", - "integrity": "sha512-Qgzu8kfBvo+cA4962jnP1KkS6Dop5NS6g7R5LFYJr4b8Ub94PPQXUksCw9PvXoeXPRRddRNC5C1JQUR2SMGtnA==", - "dev": true, - "license": "MIT", - "optional": true, - "peer": true, - "dependencies": { - "readdirp": "^4.0.1" - }, - "engines": { - "node": ">= 14.16.0" - }, - "funding": { - "url": "https://paulmillr.com/funding/" - } - }, "node_modules/@angular-eslint/schematics/node_modules/cli-spinners": { "version": "2.9.2", "resolved": "https://registry.npmjs.org/cli-spinners/-/cli-spinners-2.9.2.tgz", @@ -762,21 +678,6 @@ "url": "https://github.com/sponsors/sindresorhus" } }, - "node_modules/@angular-eslint/schematics/node_modules/readdirp": { - "version": "4.1.2", - "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-4.1.2.tgz", - "integrity": "sha512-GDhwkLfywWL2s6vEjyhri+eXmfH6j1L7JE27WhqLeYzoh/A3DBaYGEj2H/HFZCn/kMfim73FXxEJTw06WtxQwg==", - "dev": true, - "license": "MIT", - "optional": true, - "engines": { - "node": ">= 14.18.0" - }, - "funding": { - "type": "individual", - "url": "https://paulmillr.com/funding/" - } - }, "node_modules/@angular-eslint/schematics/node_modules/string-width": { "version": "7.2.0", "resolved": "https://registry.npmjs.org/string-width/-/string-width-7.2.0.tgz", @@ -801,7 +702,6 @@ "integrity": "sha512-CVskZnF38IIxVVlKWi1VCz7YH/gHMJu2IY9bD1AVoBBGIe0xA4FRXJkW2Y+EDs9vQqZTkZZljhK5gL65Ro1PeQ==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "@angular-eslint/bundled-angular-compiler": "20.7.0", "eslint-scope": "^9.0.0" @@ -831,7 +731,6 @@ "resolved": "https://registry.npmjs.org/@angular/animations/-/animations-21.1.1.tgz", "integrity": "sha512-OQRyNbFBCkuihdCegrpN/Np5YQ7uV9if48LAoXxT68tYhK3S/Qbyx2MzJpOMFEFNfpjXRg1BZr8hVcZVFnArpg==", "license": "MIT", - "peer": true, "dependencies": { "tslib": "^2.3.0" }, @@ -1031,7 +930,6 @@ "resolved": "https://registry.npmjs.org/@angular/common/-/common-21.1.1.tgz", "integrity": "sha512-Di2I6TooHdKun3SqRr45o4LbWJq/ZdwUt3fg0X3obPYaP/f6TrFQ4TMjcl03EfPufPtoQx6O+d32rcWVLhDxyw==", "license": "MIT", - "peer": true, "dependencies": { "tslib": "^2.3.0" }, @@ -1048,7 +946,6 @@ "resolved": "https://registry.npmjs.org/@angular/compiler/-/compiler-21.1.1.tgz", "integrity": "sha512-Urd3bh0zv0MQ//S7RRTanIkOMAZH/A7vSMXUDJ3aflplNs7JNbVqBwDNj8NoX1V+os+fd8JRJOReCc1EpH4ZKQ==", "license": "MIT", - "peer": true, "dependencies": { "tslib": "^2.3.0" }, @@ -1062,7 +959,6 @@ "integrity": "sha512-CCB8SZS0BzqLOdOaMpPpOW256msuatYCFDRTaT+awYIY1vQp/eLXzkMTD2uqyHraQy8cReeH/P6optRP9A077Q==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "@babel/core": "7.28.5", "@jridgewell/sourcemap-codec": "^1.4.14", @@ -1095,7 +991,6 @@ "resolved": "https://registry.npmjs.org/@angular/core/-/core-21.1.1.tgz", "integrity": "sha512-KFRCEhsi02pY1EqJ5rnze4mzSaacqh14D8goDhtmARiUH0tefaHR+uKyu4bKSrWga2T/ExG0DJX52LhHRs2qSw==", "license": "MIT", - "peer": true, "dependencies": { "tslib": "^2.3.0" }, @@ -1166,7 +1061,6 @@ "resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-21.1.1.tgz", "integrity": "sha512-d6liZjPz29GUZ6dhxytFL/W2nMsYwPpc/E/vZpr5yV+u+gI2VjbnLbl8SG+jjj0/Hyq7s4aGhEKsRrCJJMXgNw==", "license": "MIT", - "peer": true, "dependencies": { "tslib": "^2.3.0" }, @@ -1207,7 +1101,6 @@ "resolved": "https://registry.npmjs.org/@angular/platform-server/-/platform-server-21.1.1.tgz", "integrity": "sha512-n17fVIQuJzihA0aKDsBJMnH6IFfwpqiQ/QZonrS1743tbSnnBq/9GuDwt5GR1hy4Lnu+vbf0WvpVoOBZOd3LXw==", "license": "MIT", - "peer": true, "dependencies": { "tslib": "^2.3.0", "xhr2": "^0.2.0" @@ -1228,7 +1121,6 @@ "resolved": "https://registry.npmjs.org/@angular/router/-/router-21.1.1.tgz", "integrity": "sha512-3ypbtH3KfzuVgebdEET9+bRwn1VzP//KI0tIqleCGi4rblP3WQ/HwIGa5Qhdcxmw/kbmABKLRXX2kRUvidKs/Q==", "license": "MIT", - "peer": true, "dependencies": { "tslib": "^2.3.0" }, @@ -1247,7 +1139,6 @@ "resolved": "https://registry.npmjs.org/@angular/ssr/-/ssr-21.1.1.tgz", "integrity": "sha512-eJEwpCa2j6mly1QXFWZ8BlzoA3ANdGpFEebKbiJRDGjeS1VXgTrdRzatuHhadXRw2mUSzYZQpnX8vtSiqVf21w==", "license": "MIT", - "peer": true, "dependencies": { "tslib": "^2.3.0" }, @@ -1712,7 +1603,6 @@ "integrity": "sha512-CYDD3SOtsHtyXeEORYRx2qBtpDJFjRTGXUtmNEMGyzYOKj1TE3tycdlho7kA1Ufx9OYWZzg52QFBGALTirzDSw==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "@keyv/serialize": "^1.1.1" } @@ -1873,7 +1763,6 @@ } ], "license": "MIT", - "peer": true, "engines": { "node": ">=18" }, @@ -1917,7 +1806,6 @@ } ], "license": "MIT", - "peer": true, "engines": { "node": ">=18" } @@ -3687,7 +3575,6 @@ "integrity": "sha512-Dx/y9bCQcXLI5ooQ5KyvA4FTgeo2jYj/7plWfV5Ak5wDPKQZgudKez2ixyfz7tKXzcJciTxqLeK7R9HItwiByg==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "@inquirer/checkbox": "^4.3.2", "@inquirer/confirm": "^5.1.21", @@ -6610,7 +6497,6 @@ "integrity": "sha512-WJtwWJu7UdlvzEAUm484QNg5eAoq5QR08KDNx7g45Usrs2NtOPiX8ugDqmKdXkyL03rBqU5dYNYVQetEpBHq2g==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "undici-types": "~6.21.0" } @@ -6745,7 +6631,6 @@ "integrity": "sha512-nm3cvFN9SqZGXjmw5bZ6cGmvJSyJPn0wU9gHAZZHDnZl2wF9PhHv78Xf06E0MaNk4zLVHL8hb2/c32XvyJOLQg==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "@typescript-eslint/scope-manager": "8.53.1", "@typescript-eslint/types": "8.53.1", @@ -6853,7 +6738,6 @@ "integrity": "sha512-jr/swrr2aRmUAUjW5/zQHbMaui//vQlsZcJKijZf3M26bnmLj8LyZUpj8/Rd6uzaek06OWsqdofN/Thenm5O8A==", "dev": true, "license": "MIT", - "peer": true, "engines": { "node": "^18.18.0 || ^20.9.0 || >=21.1.0" }, @@ -6896,7 +6780,6 @@ "integrity": "sha512-c4bMvGVWW4hv6JmDUEG7fSYlWOl3II2I4ylt0NM+seinYQlZMQIaKaXIIVJWt9Ofh6whrpM+EdDQXKXjNovvrg==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "@eslint-community/eslint-utils": "^4.9.1", "@typescript-eslint/scope-manager": "8.53.1", @@ -7018,7 +6901,6 @@ "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==", "dev": true, "license": "MIT", - "peer": true, "bin": { "acorn": "bin/acorn" }, @@ -7454,7 +7336,6 @@ "integrity": "sha512-k8Zgb38wpMpJf2LSVO5mSUx2MyDTA6s11UHLPOjUStbdQow3ueREf2J0lKgXnedGtolMm0eGMbnLp1lxs4sKTw==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "@astrojs/compiler": "^2.13.0", "@astrojs/internal-helpers": "0.7.5", @@ -8726,7 +8607,6 @@ } ], "license": "MIT", - "peer": true, "dependencies": { "baseline-browser-mapping": "^2.9.0", "caniuse-lite": "^1.0.30001759", @@ -9217,7 +9097,6 @@ "integrity": "sha512-TQMmc3w+5AxjpL8iIiwebF73dRDF4fBIieAqGn9RGCWaEVwQ6Fb2cGe31Yns0RRIzii5goJ1Y7xbMwo1TxMplw==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "readdirp": "^5.0.0" }, @@ -10670,8 +10549,7 @@ "resolved": "https://registry.npmjs.org/devtools-protocol/-/devtools-protocol-0.0.1551306.tgz", "integrity": "sha512-CFx8QdSim8iIv+2ZcEOclBKTQY6BI1IEDa7Tm9YkwAXzEWFndTEzpTo5jAUhSnq24IC7xaDw0wvGcm96+Y3PEg==", "dev": true, - "license": "BSD-3-Clause", - "peer": true + "license": "BSD-3-Clause" }, "node_modules/di": { "version": "0.0.1", @@ -11478,7 +11356,6 @@ "integrity": "sha512-LEyamqS7W5HB3ujJyvi0HQK/dtVINZvd5mAAp9eT5S/ujByGjiZLCzPcHVzuXbpJDJF/cxwHlfceVUDZ2lnSTw==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "@eslint-community/eslint-utils": "^4.8.0", "@eslint-community/regexpp": "^4.12.1", @@ -11835,7 +11712,6 @@ "resolved": "https://registry.npmjs.org/express/-/express-5.2.1.tgz", "integrity": "sha512-hIS4idWWai69NezIdRt2xFVofaF4j+6INOpJlVOLDO8zXGpUVEVzIYk12UUi2JzjEzWL3IOAxcTubgz9Po0yXw==", "license": "MIT", - "peer": true, "dependencies": { "accepts": "^2.0.0", "body-parser": "^2.2.1", @@ -14492,7 +14368,6 @@ "integrity": "sha512-SrgV+fyo4cBSgaXgsfx/c/T4fTGuYGND6lUMGN2mvLxQHjg5o6m49vpHG/etq2IrzYUyywp9ABQ9iYugtEF9+Q==", "devOptional": true, "license": "MIT", - "peer": true, "dependencies": { "igniteui-i18n-core": "1.0.2" } @@ -14516,9 +14391,9 @@ } }, "node_modules/igniteui-theming": { - "version": "24.1.1", - "resolved": "https://registry.npmjs.org/igniteui-theming/-/igniteui-theming-24.1.1.tgz", - "integrity": "sha512-2IAREelQNAPnQTesLyy094MY+3aMd91QmUXxI8MdLlwMMfJ/7IlYFtSLEaV/8t6HOYVG9tpL8PDYufd0b/Yu0Q==", + "version": "1.0.0", + "resolved": "file:../igniteui-theming/igniteui-theming-1.0.0.tgz", + "integrity": "sha512-pIJNjJWe9JXLERqAOuvGNyij4kBDenEtVwX4iyJGXRzNIqxvntP7l3MhBrpzEeG93Su6CnWTSphofhUAET5hNA==", "license": "MIT" }, "node_modules/igniteui-trial-watermark": { @@ -15777,7 +15652,6 @@ "integrity": "sha512-LrtUxbdvt1gOpo3gxG+VAJlJAEMhbWlM4YrFQgql98FwF7+K8K12LYO4hnDdUkNjeztYrOXEMqgTajSWgmtI/w==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "@colors/colors": "1.5.0", "body-parser": "^1.19.0", @@ -16416,7 +16290,6 @@ "dev": true, "hasInstallScript": true, "license": "Apache-2.0", - "peer": true, "dependencies": { "copy-anything": "^2.0.1", "parse-node-version": "^1.0.1", @@ -16545,7 +16418,6 @@ "integrity": "sha512-ME4Fb83LgEgwNw96RKNvKV4VTLuXfoKudAmm2lP8Kk87KaMK0/Xrx/aAkMWmT8mDb+3MlFDspfbCs7adjRxA2g==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "cli-truncate": "^5.0.0", "colorette": "^2.0.20", @@ -17232,7 +17104,6 @@ "resolved": "https://registry.npmjs.org/marked/-/marked-17.0.1.tgz", "integrity": "sha512-boeBdiS0ghpWcSwoNm/jJBwdpFaMnZWRzjA6SkUMYb40SVaN1x7mmfGKp0jvexGcx+7y2La5zRZsYFZI6Qpypg==", "license": "MIT", - "peer": true, "bin": { "marked": "bin/marked.js" }, @@ -17245,7 +17116,6 @@ "resolved": "https://registry.npmjs.org/marked-shiki/-/marked-shiki-1.2.1.tgz", "integrity": "sha512-yHxYQhPY5oYaIRnROn98foKhuClark7M373/VpLxiy5TrDu9Jd/LsMwo8w+U91Up4oDb9IXFrP0N1MFRz8W/DQ==", "license": "MIT", - "peer": true, "peerDependencies": { "marked": ">=7.0.0", "shiki": ">=1.0.0" @@ -18650,7 +18520,6 @@ "integrity": "sha512-UlQOhH8DRlaYsBGQMjOYvg70J70hD4i/55NV9vAsYvsxEskmp86xjUtZgEeVKeoLq8tYMjMXDgaYjYde153sZQ==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "@ampproject/remapping": "^2.3.0", "@rollup/plugin-json": "^6.1.0", @@ -20087,7 +19956,6 @@ } ], "license": "MIT", - "peer": true, "dependencies": { "nanoid": "^3.3.11", "picocolors": "^1.1.1", @@ -20238,7 +20106,6 @@ "integrity": "sha512-UOnG6LftzbdaHZcKoPFtOcCKztrQ57WkHDeRD9t/PTQtmT0NHSeWWepj6pS0z/N7+08BHFDQVUrfmfMRcZwbMg==", "dev": true, "license": "MIT", - "peer": true, "bin": { "prettier": "bin/prettier.cjs" }, @@ -21381,7 +21248,6 @@ "integrity": "sha512-9FwVqlgUHzbXtDg9RCMgodF3Ua4Na6Gau+Sdt9vyCN4RhHfVKX2DCHy3BjMLTDd47ITDhYAnTwGulWTblJSDLg==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "@types/estree": "1.0.8" }, @@ -21496,7 +21362,6 @@ "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-7.8.2.tgz", "integrity": "sha512-dhKf903U/PQZY6boNNtAGdWbG85WAbjT/1xYoZIC7FAY0yWapOBQVsVrDl58W86//e1VpMNBtRV4MaXfdMySFA==", "license": "Apache-2.0", - "peer": true, "dependencies": { "tslib": "^2.1.0" } @@ -21751,7 +21616,6 @@ "integrity": "sha512-eKzFy13Nk+IRHhlAwP3sfuv+PzOrvzUkwJK2hdoCKYcWGSdmwFpeGpWmyewdw8EgBnsKaSBtgf/0b2K635ecSA==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "@bufbuild/protobuf": "^2.5.0", "colorjs.io": "^0.5.0", @@ -22381,33 +22245,6 @@ "sassdoc-extras": "^2.5.0" } }, - "node_modules/sassdoc-theme-default/node_modules/chokidar": { - "version": "3.6.0", - "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz", - "integrity": "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==", - "dev": true, - "license": "MIT", - "optional": true, - "peer": true, - "dependencies": { - "anymatch": "~3.1.2", - "braces": "~3.0.2", - "glob-parent": "~5.1.2", - "is-binary-path": "~2.1.0", - "is-glob": "~4.0.1", - "normalize-path": "~3.0.0", - "readdirp": "~3.6.0" - }, - "engines": { - "node": ">= 8.10.0" - }, - "funding": { - "url": "https://paulmillr.com/funding/" - }, - "optionalDependencies": { - "fsevents": "~2.3.2" - } - }, "node_modules/sassdoc-theme-default/node_modules/commander": { "version": "5.1.0", "resolved": "https://registry.npmjs.org/commander/-/commander-5.1.0.tgz", @@ -22436,20 +22273,6 @@ "jsonfile": "^2.1.0" } }, - "node_modules/sassdoc-theme-default/node_modules/glob-parent": { - "version": "5.1.2", - "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz", - "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==", - "dev": true, - "license": "ISC", - "optional": true, - "dependencies": { - "is-glob": "^4.0.1" - }, - "engines": { - "node": ">= 6" - } - }, "node_modules/sassdoc-theme-default/node_modules/jsonfile": { "version": "2.4.0", "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-2.4.0.tgz", @@ -22486,34 +22309,6 @@ } } }, - "node_modules/sassdoc-theme-default/node_modules/picomatch": { - "version": "2.3.1", - "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz", - "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==", - "dev": true, - "license": "MIT", - "optional": true, - "engines": { - "node": ">=8.6" - }, - "funding": { - "url": "https://github.com/sponsors/jonschlinkert" - } - }, - "node_modules/sassdoc-theme-default/node_modules/readdirp": { - "version": "3.6.0", - "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz", - "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==", - "dev": true, - "license": "MIT", - "optional": true, - "dependencies": { - "picomatch": "^2.2.1" - }, - "engines": { - "node": ">=8.10.0" - } - }, "node_modules/sassdoc/node_modules/argparse": { "version": "1.0.10", "resolved": "https://registry.npmjs.org/argparse/-/argparse-1.0.10.tgz", @@ -23337,7 +23132,6 @@ "resolved": "https://registry.npmjs.org/shiki/-/shiki-3.21.0.tgz", "integrity": "sha512-N65B/3bqL/TI2crrXr+4UivctrAGEjmsib5rPMMPpFp1xAx/w03v8WZ9RDDFYteXoEgY7qZ4HGgl5KBIu1153w==", "license": "MIT", - "peer": true, "dependencies": { "@shikijs/core": "3.21.0", "@shikijs/engine-javascript": "3.21.0", @@ -24119,7 +23913,6 @@ } ], "license": "MIT", - "peer": true, "dependencies": { "@csstools/css-parser-algorithms": "^3.0.5", "@csstools/css-syntax-patches-for-csstree": "^1.0.19", @@ -24459,7 +24252,6 @@ "integrity": "sha512-orRsuYpJVw8LdAwqqLykBj9ecS5/cRHlI5+nvTo8LcCKmzDmqVORXtOIYEEQuL9D4BxtA1lm5isAqzQZCoQ6Eg==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "cssesc": "^3.0.0", "util-deprecate": "^1.0.2" @@ -25228,8 +25020,7 @@ "version": "2.8.1", "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz", "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==", - "license": "0BSD", - "peer": true + "license": "0BSD" }, "node_modules/tuf-js": { "version": "4.1.0", @@ -25316,7 +25107,6 @@ "integrity": "sha512-x4xW77QC3i5DUFMBp0qjukOTnr/sSg+oEs86nB3LjDslvAmwe/PUGDWbe3GrIqt59oTqoXK5GRK9tAa0sYMiog==", "dev": true, "license": "Apache-2.0", - "peer": true, "dependencies": { "@gerrit0/mini-shiki": "^3.17.0", "lunr": "^2.3.9", @@ -25351,7 +25141,6 @@ "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==", "dev": true, "license": "Apache-2.0", - "peer": true, "bin": { "tsc": "bin/tsc", "tsserver": "bin/tsserver" @@ -26458,7 +26247,6 @@ "integrity": "sha512-dZwN5L1VlUBewiP6H9s2+B3e3Jg96D0vzN+Ry73sOefebhYr9f94wwkMNN/9ouoU8pV1BqA1d1zGk8928cx0rg==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "esbuild": "^0.27.0", "fdir": "^6.5.0", @@ -26964,7 +26752,6 @@ "integrity": "sha512-mplynKqc1C2hTVYxd0PU2xQAc22TI1vShAYGksCCfxbn/dFwnHTNi1bvYsBTkhdUNtGIf5xNOg938rrSSYvS9A==", "dev": true, "license": "ISC", - "peer": true, "bin": { "yaml": "bin.mjs" }, @@ -27120,7 +26907,6 @@ "integrity": "sha512-gzUt/qt81nXsFGKIFcC3YnfEAx5NkunCfnDlvuBSSFS02bcXu4Lmea0AFIUwbLWxWPx3d9p8S5QoaujKcNQxcQ==", "dev": true, "license": "MIT", - "peer": true, "funding": { "url": "https://github.com/sponsors/colinhacks" } @@ -27139,8 +26925,7 @@ "version": "0.15.1", "resolved": "https://registry.npmjs.org/zone.js/-/zone.js-0.15.1.tgz", "integrity": "sha512-XE96n56IQpJM7NAoXswY3XRLcWFW83xe0BiAOeMD7K5k5xecOeul3Qcpx6GqEeeHNkW5DWL5zOyTbEfB4eti8w==", - "license": "MIT", - "peer": true + "license": "MIT" }, "node_modules/zwitch": { "version": "2.0.4", diff --git a/package.json b/package.json index b9700c5405b..35abf2da205 100644 --- a/package.json +++ b/package.json @@ -78,8 +78,8 @@ "dompurify": "^3.3.0", "express": "^5.2.1", "fflate": "^0.8.1", - "igniteui-theming": "^24.1.1", "igniteui-i18n-core": "^1.0.2", + "igniteui-theming": "file:../igniteui-theming/igniteui-theming-1.0.0.tgz", "igniteui-trial-watermark": "^3.1.0", "jspdf": "^4.0.0", "lodash-es": "^4.17.21", diff --git a/projects/igniteui-angular/core/src/core/styles/components/grid/_grid-component.scss b/projects/igniteui-angular/core/src/core/styles/components/grid/_grid-component.scss index 91b864e6c87..8eb02e2f71e 100644 --- a/projects/igniteui-angular/core/src/core/styles/components/grid/_grid-component.scss +++ b/projects/igniteui-angular/core/src/core/styles/components/grid/_grid-component.scss @@ -10,664 +10,664 @@ /// @requires {mixin} excel-filtering-partial /// @requires {mixin} advanced-filtering-partial @mixin component { - @include b(igx-grid) { - $this: bem--selector-to-string(&); - @include register-component( - $name: string.slice($this, 2, -1), - $deps: ( - igx-checkbox, - igx-chip, - igx-grid-summary, - igx-icon-button, - igx-input-group, - igx-grid-toolbar, - igx-paginator, - igx-watermark, - ) - ); - - @extend %grid-host !optional; - - @extend %grid-display !optional; - - @include e(caption) { - @extend %grid-caption !optional; - } - - @include e(tbody) { - @extend %grid-tbody-container !optional; - } - - @include e(tbody-content) { - @extend %grid-tbody !optional; - - &:focus { - @extend %disable-focus-styles !optional; - } - } - - @include e(tbody-message) { - @extend %grid-tbody-message !optional; - } - - @include e(loading) { - @extend %igx-grid__loading !optional; - } - - @include e(tbody-scrollbar) { - @extend %grid-tbody-scrollbar !optional; - } - - @include e(tbody-scrollbar-main) { - @extend %grid-tbody-scrollbar-main !optional; - } - - @include e(tbody-scrollbar-start) { - @extend %grid-tbody-scrollbar-start !optional; - } - - @include e(tbody-scrollbar-end) { - @extend %grid-tbody-scrollbar-end !optional; - } - - @include e(scroll) { - @extend %grid-scroll !optional; - } - - @include e(scroll-start) { - @extend %grid-scroll-start !optional; - } - - @include e(scroll-main) { - @extend %grid-scroll-main !optional; - } - - @include e(tfoot) { - @extend %grid-tfoot !optional; - - &:focus { - @extend %disable-focus-styles !optional; - } - } - - @include e(tfoot-thumb) { - @extend %grid-tfoot-thumb !optional; - } - - @include e(footer) { - @extend %grid-footer !optional; - } - - @include e(tr) { - @extend %grid-row !optional; - - igx-display-container { - @extend %grid-display-container-tr !optional; - } - } - - @include e(tr-action) { - @extend %igx-grid__tr-action !optional - } - - @include e(tr, $m: 'drag') { - @extend %igx-grid__tr--drag !optional; - } - - @include e(tr, $m: 'ghost') { - @extend %igx-grid__tr--ghost !optional; - } - - @include e(drag-indicator) { - @extend %igx-grid__drag-indicator !optional; - } - - @include e(drag-indicator, $m: 'header') { - @extend %igx-grid__drag-indicator--header !optional; - } - - @include e(drag-indicator, $m: 'off') { - @extend %igx-grid__drag-indicator--off !optional; - } - - @include e(tr, $m: 'mrl') { - @extend %grid-row--mrl !optional; - } - - @include e(tr, $mods: ('mrl', 'edit')) { - @extend %grid-row--edit-mrl !optional; - } - - @include e(summaries) { - @extend %grid-summaries !optional; - - igx-display-container { - @extend %grid-display-container-tr !optional; - } - } - - @include e(summaries, $m: 'body') { - @extend %grid-summaries !optional; - @extend %grid-summaries--body !optional; - - igx-display-container { - @extend %grid-display-container-tr !optional; - } - } - - @include e(summaries-patch) { - @extend %grid-summaries-patch !optional; - } - - @include e(tr, $m: odd) { - @extend %grid-row--odd !optional; - } - - @include e(tr, $m: even) { - @extend %grid-row--even !optional; - } - - @include e(tr, $m: selected) { - @extend %grid-row--selected !optional; - } - - @include e(tr, $m: edited) { - @extend %igx-grid__tr--edited !optional; - } - - @include e(tr, $m: deleted) { - @extend %igx-grid__tr--deleted !optional; - } - - @include e(tr, $m: highlighted) { - @extend %igx-grid__tr--highlighted !optional; - } - - @include e(tr, $m: edit) { - @extend %igx-grid__tr--edit !optional; - } - - @include e(tr, $m: add-animate) { - @extend %igx-grid__tr--add-animate !optional; - } - - @include e(tr, $m: inner) { - @extend %igx-grid__tr--inner !optional; - } - - @include e(tr, $m: header) { - @extend %igx-grid__tr--header !optional; - } - - @include e(tr, $m: group) { - @extend %grid-row--group !optional; - } - - @include e(tr, $m: mrl) { - @extend %grid-row--mrl !optional; - } - - @include e(tr-container) { - @extend %igx-grid__tr-container !optional; - } - - @include e(tr-container, $m: active) { - @extend %igx-grid__tr-container--active !optional; - } - - @include e(td) { - @extend %grid-cell-display !optional; - } - - @include e(td, $m: active) { - @extend %grid-cell--active !optional; - } - - @include e(td, $m: selected) { - @extend %grid-cell--selected !optional; - } - - @include e(td, $m: invalid) { - @extend %grid-cell--invalid !optional; - } - - @include e(td, $m: valid) { - @extend %grid-cell--valid !optional; - } - - @include e(td, $m: column-selected) { - @extend %grid-cell--column-selected !optional; - } - - @include e(td, $mods: (selected, column-selected)) { - @extend %grid-cell--cross-selected !optional; - } - - @include e(td, $m: bool) { - @extend %igx-grid__td--centered !optional; - @extend %igx-grid__td--bool !optional; - } - - @include e(td, $m: bool-true) { - @extend %igx-grid__td--bool-true !optional; - } - - @include e(td, $m: image) { - @extend %igx-grid__td--centered !optional; - } - - @include e(tr, $mods: (selected, filtered)) { - @extend %grid-row--selected--filtered !optional; - } - - @include e(tr, $m: filtered) { - @extend %igx-grid-row--filtered !optional; - } - - @include e(tr, $m: expanded) { - @extend %igx-grid__tr--expanded !optional; - } - - @include e(tr, $m: pinned) { - @extend %igx-grid__tr--pinned !optional; - } - - @include e(tr, $m: merged) { - @extend %igx-grid__tr--merged !optional; - } - - @include e(tr, $m: merged-top) { - @extend %igx-grid__tr--merged-top !optional; - } - - @include e(tr, $m: pinned-top) { - @extend %igx-grid__tr--pinned-top !optional; - } - - @include e(tr, $m: pinned-bottom) { - @extend %igx-grid__tr--pinned-bottom !optional; - } - - @include e(tree-grouping-indicator) { - @extend %igx-grid__tree-grouping-indicator !optional; - } - - @include e(tree-loading-indicator) { - @extend %igx-grid__tree-loading-indicator !optional; - } - - @include e(td, $m: new) { - @extend %igx-grid__td--new !optional; - } - - @include e(td, $m: edited) { - @extend %igx-grid__td--edited !optional; - } - - @include e(td, $m: merged) { - @extend %igx-grid__td--merged !optional; - } - - @include e(td, $mods: (merged-selected, merged-hovered)) { - @extend %igx-grid__td--merged-selected-hovered !optional; - } - - @include e(td, $m: merged-selected) { - @extend %igx-grid__td--merged-selected !optional; - } - - @include e(td, $m: merged-hovered) { - @extend %igx-grid__td--merged-hovered !optional; - } - - @include e(td, $m: editing) { - @extend %igx-grid__td--editing !optional; - } - - @include e(td, $mods: (editing, valid)) { - @extend %igx-grid__td--editing--valid !optional; - } - - @include e(td, $mods: (editing, invalid)) { - @extend %igx-grid__td--editing--invalid !optional; - } - - @include e(tr, $m: disabled) { - @extend %igx-grid__tr--disabled !optional; - } - - @include e(td, $m: number) { - @extend %grid-cell-number !optional; - } - - @include e(td, $m: pinned) { - @extend %grid-cell--pinned !optional; - } - - @include e(td, $m: pinned-last) { - @extend %grid-cell--pinned !optional; - @extend %grid-cell--pinned-last !optional; - } - - @include e(td, $m: pinned-first) { - @extend %grid-cell--pinned !optional; - @extend %grid-cell--pinned-first !optional; - } - - @include e(td, $m: fw) { - @extend %grid-cell--fixed-width !optional; - } - - @include e(td, $mods: (pinned, selected)) { - @extend %grid-cell--pinned-selected !optional; - } - - @include e(td, $mods: (pinned, column-selected)) { - @extend %grid-cell--pinned--column-selected !optional; - } - - @include e(td, $m: row-pinned-first) { - @extend %grid-cell--row-pinned-first !optional; - } - - @include e(td, $m: pinned-chip) { - @extend %grid-cell--pinned-chip !optional; - } - - @include e(td-text) { - @extend %grid-cell-text !optional; - } - - @include e(cbx-padding) { - @extend %cbx-padding !optional; - } - - @include e(cbx-selection) { - @extend %grid__cbx-selection !optional; - } - - @include e(cbx-selection, $m: push) { - @extend %grid__cbx-selection--push !optional; - } - - @include e(group-row) { - @extend %igx-grid__group-row !optional; - } - - @include e(group-row, $m: active) { - @extend %igx-grid__group-row--active !optional; - } - - @include e(group-content) { - @extend %igx-grid__group-content !optional; - } - - @include e(row-indentation) { - @extend %igx-grid__row-indentation !optional; - } - - @include e(grouping-indicator) { - @extend %igx-grid__grouping-indicator !optional; - } - - @include e(scroll-on-drag-left) { - @extend %grid__scroll-on-drag-left !optional; - } - - @include e(scroll-on-drag-right) { - @extend %grid__scroll-on-drag-right !optional; - } - - @include e(scroll-on-drag-pinned) { - @extend %grid__scroll-on-drag-pinned !optional; - } - - @include e(drag-ghost-image) { - @extend %grid__drag-ghost-image !optional; - } - - @include e(drag-ghost-image-icon) { - @extend %grid__drag-ghost-image-icon !optional; - } - - @include e(drag-ghost-image-icon-group) { - @extend %grid__drag-ghost-image-icon-group !optional; - } - - @include e(drag-col-header) { - @extend %igx-grid__drag-col-header !optional; - } - - @include e(header-indentation) { - @extend %igx-grid__header-indentation !optional; - } - - @include e(header-indentation, $m: 'no-border') { - @extend %igx-grid__header-indentation--no-border !optional; - } - - @include e(group-expand-btn) { - @extend %igx-grid__group-expand-btn !optional; - } - - @include e(group-expand-btn, $m: 'push') { - @extend %igx-grid__group-expand-btn--push !optional; - } - - @include e(outlet) { - @extend %igx-grid__outlet !optional; - } - - @include e(loading-outlet) { - @extend %igx-grid__loading-outlet !optional; - } - - @include e(row-editing-outlet) { - @extend %igx-grid__row-editing-outlet !optional; - } - - @include e(addrow-snackbar) { - @extend %igx-grid__addrow-snackbar !optional; - } - - @include e(filtering-cell) { - @extend %igx-grid__filtering-cell !optional; - } - - @include e(filtering-cell, $m: 'selected') { - @extend %igx-grid__filtering-cell !optional; - @extend %igx-grid__filtering-cell--selected !optional; - } - - @include e(filtering-cell-indicator) { - @extend %igx-grid__filtering-cell-indicator !optional; - } - - @include e(filtering-cell-indicator, $m: 'hidden') { - @extend %igx-grid__filtering-cell-indicator !optional; - @extend %igx-grid__filtering-cell-indicator--hidden !optional; - } - - @include e(filtering-dropdown-items) { - @extend %igx-grid__filtering-dropdown-items !optional; - } - - @include e(filtering-dropdown-text) { - @extend %igx-grid__filtering-dropdown-text !optional; - } - - @include e(filtering-row) { - @extend %igx-grid__filtering-row !optional; - } - - @include e(filtering-row-editing-buttons) { - @extend %igx-grid__filtering-row-editing-buttons !optional; - } - - @include e(filtering-row-editing-buttons, $m: small) { - @extend %igx-grid__filtering-row-editing-buttons--small !optional; - } - - @include e(filtering-row-main) { - @extend %igx-grid__filtering-row-main !optional; - } - - @include e(filtering-row-scroll-start) { - @extend %igx-grid__filtering-scroll-start !optional; - } - - @include e(filtering-row-scroll-end) { - @extend %igx-grid__filtering-scroll-end !optional; - } - - @include e(hierarchical-indent) { - @extend %igx-grid__hierarchical-indent !optional; - } - - @include e(hierarchical-expander) { - @extend %igx-grid__hierarchical-expander !optional; - } - - @include e(hierarchical-expander, $m: empty) { - @extend %igx-grid__hierarchical-expander !optional; - @extend %igx-grid__hierarchical-expander--empty !optional; - } - - @include e(hierarchical-expander, $m: header) { - @extend %igx-grid__hierarchical-expander--header !optional; - } - - @include e(hierarchical-expander, $m: push) { - @extend %igx-grid__hierarchical-expander--push !optional; - } - - @include e(hierarchical-indent, $m: scroll) { - @extend %igx-grid__hierarchical-indent--scroll !optional; - } - - @include e(mrl-block) { - @extend %grid-mrl-block !optional; - } - - @for $i from 1 through 10 { - @include e(row-indentation, $m: level-#{$i}) { - @extend %igx-grid__row-indentation--level-#{$i} !optional; - } - - @include e(group-row, $m: padding-level-#{$i}) { - @extend %igx-grid__group-row--padding-level-#{$i} !optional; - } - } - - // Pivot start - @include e(pivot, $m: 'super-compact') { - @extend %igx-grid__pivot--super-compact !optional - } - - @include e(tr-pivot) { - @extend %igx-grid__tr-pivot !optional - } - - @include e(pivot-filter-toggle) { - @extend %igx-grid__pivot-filter-toggle !optional - } - - @include e(pivot-empty-chip-area) { - @extend %igx-grid__pivot-empty-chip-area !optional - } - - - - @include e(tr-pivot, $m: 'row-area') { - @extend %igx-grid__tr-pivot--row-area !optional - } - - @include e(tr-pivot, $m: 'filter-container') { - @extend %igx-grid__tr-pivot--filter-container !optional - } - - @include e(tr-pivot, $m: 'chip_drop_indicator') { - @extend %igx-grid__tr-pivot--chip_drop_indicator !optional - } - - @include e(tr-pivot, $m: 'drop-row-area') { - @extend %igx-grid__tr-pivot--drop-row-area !optional - } - - @include e(tr-pivot, $m: 'filter') { - @extend %igx-grid__tr-pivot--filter !optional - } - - @include e(tr-pivot-group) { - @extend %igx-grid__tr-pivot-group !optional - } - - @include e(tr-header-row) { - @extend %igx-grid__tr-header-row !optional; - } - - @include e(tr-pivot, $m: 'columnDimensionLeaf') { - @extend %igx-grid__tr-pivot--columnDimensionLeaf !optional - } - - @include e(tr-pivot, $m: 'columnMultiRowSpan') { - @extend %igx-grid__tr-pivot--columnMultiRowSpan !optional - } - - @include e(tbody-pivot-mrl-dimension) { - @extend %igx-grid__tbody-pivot-mrl-dimension !optional - } - - @include e(tr-pivot-toggle-icons) { - @extend %igx-grid__tr-pivot-toggle-icons !optional; - } - // pivot end - - @include excel-filtering-partial(); - @include advanced-filtering-partial(); - @include group-by-area(); - @include header-row(); - } - - @include b(igx-drop-area) { - @extend %igx-drop-area !optional; - - @include m(hover) { - @extend %igx-drop-area--hover !optional; - } - - @include e(icon) { - @extend %igx-drop-area__icon !optional; - } - - @include e(text) { - @extend %igx-drop-area__text !optional; - } - } - - @include b(igx-group-label) { - @extend %igx-group-label !optional; - - @include e(icon) { - @extend %igx-group-label__icon !optional; - } - - @include e(column-name) { - @extend %igx-group-label__column-name !optional; - } - - @include e(text) { - @extend %igx-group-label__text !optional; - } - - @include e(count-badge) { - @extend %igx-group-label__count-badge !optional; - } - } - - @include b(igx-grid-summary) { - @include m(active) { - @extend %igx-grid-summary--active !optional; - } - } + //@include b(igx-grid) { + // $this: bem--selector-to-string(&); + // @include register-component( + // $name: string.slice($this, 2, -1), + // $deps: ( + // igx-checkbox, + // igx-chip, + // igx-grid-summary, + // igx-icon-button, + // igx-input-group, + // igx-grid-toolbar, + // igx-paginator, + // igx-watermark, + // ) + // ); + // + // @extend %grid-host !optional; + // + // @extend %grid-display !optional; + // + // @include e(caption) { + // @extend %grid-caption !optional; + // } + // + // @include e(tbody) { + // @extend %grid-tbody-container !optional; + // } + // + // @include e(tbody-content) { + // @extend %grid-tbody !optional; + // + // &:focus { + // @extend %disable-focus-styles !optional; + // } + // } + // + // @include e(tbody-message) { + // @extend %grid-tbody-message !optional; + // } + // + // @include e(loading) { + // @extend %igx-grid__loading !optional; + // } + // + // @include e(tbody-scrollbar) { + // @extend %grid-tbody-scrollbar !optional; + // } + // + // @include e(tbody-scrollbar-main) { + // @extend %grid-tbody-scrollbar-main !optional; + // } + // + // @include e(tbody-scrollbar-start) { + // @extend %grid-tbody-scrollbar-start !optional; + // } + // + // @include e(tbody-scrollbar-end) { + // @extend %grid-tbody-scrollbar-end !optional; + // } + // + // @include e(scroll) { + // @extend %grid-scroll !optional; + // } + // + // @include e(scroll-start) { + // @extend %grid-scroll-start !optional; + // } + // + // @include e(scroll-main) { + // @extend %grid-scroll-main !optional; + // } + // + // @include e(tfoot) { + // @extend %grid-tfoot !optional; + // + // &:focus { + // @extend %disable-focus-styles !optional; + // } + // } + // + // @include e(tfoot-thumb) { + // @extend %grid-tfoot-thumb !optional; + // } + // + // @include e(footer) { + // @extend %grid-footer !optional; + // } + // + // @include e(tr) { + // @extend %grid-row !optional; + // + // igx-display-container { + // @extend %grid-display-container-tr !optional; + // } + // } + // + // @include e(tr-action) { + // @extend %igx-grid__tr-action !optional + // } + // + // @include e(tr, $m: 'drag') { + // @extend %igx-grid__tr--drag !optional; + // } + // + // @include e(tr, $m: 'ghost') { + // @extend %igx-grid__tr--ghost !optional; + // } + // + // @include e(drag-indicator) { + // @extend %igx-grid__drag-indicator !optional; + // } + // + // @include e(drag-indicator, $m: 'header') { + // @extend %igx-grid__drag-indicator--header !optional; + // } + // + // @include e(drag-indicator, $m: 'off') { + // @extend %igx-grid__drag-indicator--off !optional; + // } + // + // @include e(tr, $m: 'mrl') { + // @extend %grid-row--mrl !optional; + // } + // + // @include e(tr, $mods: ('mrl', 'edit')) { + // @extend %grid-row--edit-mrl !optional; + // } + // + // @include e(summaries) { + // @extend %grid-summaries !optional; + // + // igx-display-container { + // @extend %grid-display-container-tr !optional; + // } + // } + // + // @include e(summaries, $m: 'body') { + // @extend %grid-summaries !optional; + // @extend %grid-summaries--body !optional; + // + // igx-display-container { + // @extend %grid-display-container-tr !optional; + // } + // } + // + // @include e(summaries-patch) { + // @extend %grid-summaries-patch !optional; + // } + // + // @include e(tr, $m: odd) { + // @extend %grid-row--odd !optional; + // } + // + // @include e(tr, $m: even) { + // @extend %grid-row--even !optional; + // } + // + // @include e(tr, $m: selected) { + // @extend %grid-row--selected !optional; + // } + // + // @include e(tr, $m: edited) { + // @extend %igx-grid__tr--edited !optional; + // } + // + // @include e(tr, $m: deleted) { + // @extend %igx-grid__tr--deleted !optional; + // } + // + // @include e(tr, $m: highlighted) { + // @extend %igx-grid__tr--highlighted !optional; + // } + // + // @include e(tr, $m: edit) { + // @extend %igx-grid__tr--edit !optional; + // } + // + // @include e(tr, $m: add-animate) { + // @extend %igx-grid__tr--add-animate !optional; + // } + // + // @include e(tr, $m: inner) { + // @extend %igx-grid__tr--inner !optional; + // } + // + // @include e(tr, $m: header) { + // @extend %igx-grid__tr--header !optional; + // } + // + // @include e(tr, $m: group) { + // @extend %grid-row--group !optional; + // } + // + // @include e(tr, $m: mrl) { + // @extend %grid-row--mrl !optional; + // } + // + // @include e(tr-container) { + // @extend %igx-grid__tr-container !optional; + // } + // + // @include e(tr-container, $m: active) { + // @extend %igx-grid__tr-container--active !optional; + // } + // + // @include e(td) { + // @extend %grid-cell-display !optional; + // } + // + // @include e(td, $m: active) { + // @extend %grid-cell--active !optional; + // } + // + // @include e(td, $m: selected) { + // @extend %grid-cell--selected !optional; + // } + // + // @include e(td, $m: invalid) { + // @extend %grid-cell--invalid !optional; + // } + // + // @include e(td, $m: valid) { + // @extend %grid-cell--valid !optional; + // } + // + // @include e(td, $m: column-selected) { + // @extend %grid-cell--column-selected !optional; + // } + // + // @include e(td, $mods: (selected, column-selected)) { + // @extend %grid-cell--cross-selected !optional; + // } + // + // @include e(td, $m: bool) { + // @extend %igx-grid__td--centered !optional; + // @extend %igx-grid__td--bool !optional; + // } + // + // @include e(td, $m: bool-true) { + // @extend %igx-grid__td--bool-true !optional; + // } + // + // @include e(td, $m: image) { + // @extend %igx-grid__td--centered !optional; + // } + // + // @include e(tr, $mods: (selected, filtered)) { + // @extend %grid-row--selected--filtered !optional; + // } + // + // @include e(tr, $m: filtered) { + // @extend %igx-grid-row--filtered !optional; + // } + // + // @include e(tr, $m: expanded) { + // @extend %igx-grid__tr--expanded !optional; + // } + // + // @include e(tr, $m: pinned) { + // @extend %igx-grid__tr--pinned !optional; + // } + // + // @include e(tr, $m: merged) { + // @extend %igx-grid__tr--merged !optional; + // } + // + // @include e(tr, $m: merged-top) { + // @extend %igx-grid__tr--merged-top !optional; + // } + // + // @include e(tr, $m: pinned-top) { + // @extend %igx-grid__tr--pinned-top !optional; + // } + // + // @include e(tr, $m: pinned-bottom) { + // @extend %igx-grid__tr--pinned-bottom !optional; + // } + // + // @include e(tree-grouping-indicator) { + // @extend %igx-grid__tree-grouping-indicator !optional; + // } + // + // @include e(tree-loading-indicator) { + // @extend %igx-grid__tree-loading-indicator !optional; + // } + // + // @include e(td, $m: new) { + // @extend %igx-grid__td--new !optional; + // } + // + // @include e(td, $m: edited) { + // @extend %igx-grid__td--edited !optional; + // } + // + // @include e(td, $m: merged) { + // @extend %igx-grid__td--merged !optional; + // } + // + // @include e(td, $mods: (merged-selected, merged-hovered)) { + // @extend %igx-grid__td--merged-selected-hovered !optional; + // } + // + // @include e(td, $m: merged-selected) { + // @extend %igx-grid__td--merged-selected !optional; + // } + // + // @include e(td, $m: merged-hovered) { + // @extend %igx-grid__td--merged-hovered !optional; + // } + // + // @include e(td, $m: editing) { + // @extend %igx-grid__td--editing !optional; + // } + // + // @include e(td, $mods: (editing, valid)) { + // @extend %igx-grid__td--editing--valid !optional; + // } + // + // @include e(td, $mods: (editing, invalid)) { + // @extend %igx-grid__td--editing--invalid !optional; + // } + // + // @include e(tr, $m: disabled) { + // @extend %igx-grid__tr--disabled !optional; + // } + // + // @include e(td, $m: number) { + // @extend %grid-cell-number !optional; + // } + // + // @include e(td, $m: pinned) { + // @extend %grid-cell--pinned !optional; + // } + // + // @include e(td, $m: pinned-last) { + // @extend %grid-cell--pinned !optional; + // @extend %grid-cell--pinned-last !optional; + // } + // + // @include e(td, $m: pinned-first) { + // @extend %grid-cell--pinned !optional; + // @extend %grid-cell--pinned-first !optional; + // } + // + // @include e(td, $m: fw) { + // @extend %grid-cell--fixed-width !optional; + // } + // + // @include e(td, $mods: (pinned, selected)) { + // @extend %grid-cell--pinned-selected !optional; + // } + // + // @include e(td, $mods: (pinned, column-selected)) { + // @extend %grid-cell--pinned--column-selected !optional; + // } + // + // @include e(td, $m: row-pinned-first) { + // @extend %grid-cell--row-pinned-first !optional; + // } + // + // @include e(td, $m: pinned-chip) { + // @extend %grid-cell--pinned-chip !optional; + // } + // + // @include e(td-text) { + // @extend %grid-cell-text !optional; + // } + // + // @include e(cbx-padding) { + // @extend %cbx-padding !optional; + // } + // + // @include e(cbx-selection) { + // @extend %grid__cbx-selection !optional; + // } + // + // @include e(cbx-selection, $m: push) { + // @extend %grid__cbx-selection--push !optional; + // } + // + // @include e(group-row) { + // @extend %igx-grid__group-row !optional; + // } + // + // @include e(group-row, $m: active) { + // @extend %igx-grid__group-row--active !optional; + // } + // + // @include e(group-content) { + // @extend %igx-grid__group-content !optional; + // } + // + // @include e(row-indentation) { + // @extend %igx-grid__row-indentation !optional; + // } + // + // @include e(grouping-indicator) { + // @extend %igx-grid__grouping-indicator !optional; + // } + // + // @include e(scroll-on-drag-left) { + // @extend %grid__scroll-on-drag-left !optional; + // } + // + // @include e(scroll-on-drag-right) { + // @extend %grid__scroll-on-drag-right !optional; + // } + // + // @include e(scroll-on-drag-pinned) { + // @extend %grid__scroll-on-drag-pinned !optional; + // } + // + // @include e(drag-ghost-image) { + // @extend %grid__drag-ghost-image !optional; + // } + // + // @include e(drag-ghost-image-icon) { + // @extend %grid__drag-ghost-image-icon !optional; + // } + // + // @include e(drag-ghost-image-icon-group) { + // @extend %grid__drag-ghost-image-icon-group !optional; + // } + // + // @include e(drag-col-header) { + // @extend %igx-grid__drag-col-header !optional; + // } + // + // @include e(header-indentation) { + // @extend %igx-grid__header-indentation !optional; + // } + // + // @include e(header-indentation, $m: 'no-border') { + // @extend %igx-grid__header-indentation--no-border !optional; + // } + // + // @include e(group-expand-btn) { + // @extend %igx-grid__group-expand-btn !optional; + // } + // + // @include e(group-expand-btn, $m: 'push') { + // @extend %igx-grid__group-expand-btn--push !optional; + // } + // + // @include e(outlet) { + // @extend %igx-grid__outlet !optional; + // } + // + // @include e(loading-outlet) { + // @extend %igx-grid__loading-outlet !optional; + // } + // + // @include e(row-editing-outlet) { + // @extend %igx-grid__row-editing-outlet !optional; + // } + // + // @include e(addrow-snackbar) { + // @extend %igx-grid__addrow-snackbar !optional; + // } + // + // @include e(filtering-cell) { + // @extend %igx-grid__filtering-cell !optional; + // } + // + // @include e(filtering-cell, $m: 'selected') { + // @extend %igx-grid__filtering-cell !optional; + // @extend %igx-grid__filtering-cell--selected !optional; + // } + // + // @include e(filtering-cell-indicator) { + // @extend %igx-grid__filtering-cell-indicator !optional; + // } + // + // @include e(filtering-cell-indicator, $m: 'hidden') { + // @extend %igx-grid__filtering-cell-indicator !optional; + // @extend %igx-grid__filtering-cell-indicator--hidden !optional; + // } + // + // @include e(filtering-dropdown-items) { + // @extend %igx-grid__filtering-dropdown-items !optional; + // } + // + // @include e(filtering-dropdown-text) { + // @extend %igx-grid__filtering-dropdown-text !optional; + // } + // + // @include e(filtering-row) { + // @extend %igx-grid__filtering-row !optional; + // } + // + // @include e(filtering-row-editing-buttons) { + // @extend %igx-grid__filtering-row-editing-buttons !optional; + // } + // + // @include e(filtering-row-editing-buttons, $m: small) { + // @extend %igx-grid__filtering-row-editing-buttons--small !optional; + // } + // + // @include e(filtering-row-main) { + // @extend %igx-grid__filtering-row-main !optional; + // } + // + // @include e(filtering-row-scroll-start) { + // @extend %igx-grid__filtering-scroll-start !optional; + // } + // + // @include e(filtering-row-scroll-end) { + // @extend %igx-grid__filtering-scroll-end !optional; + // } + // + // @include e(hierarchical-indent) { + // @extend %igx-grid__hierarchical-indent !optional; + // } + // + // @include e(hierarchical-expander) { + // @extend %igx-grid__hierarchical-expander !optional; + // } + // + // @include e(hierarchical-expander, $m: empty) { + // @extend %igx-grid__hierarchical-expander !optional; + // @extend %igx-grid__hierarchical-expander--empty !optional; + // } + // + // @include e(hierarchical-expander, $m: header) { + // @extend %igx-grid__hierarchical-expander--header !optional; + // } + // + // @include e(hierarchical-expander, $m: push) { + // @extend %igx-grid__hierarchical-expander--push !optional; + // } + // + // @include e(hierarchical-indent, $m: scroll) { + // @extend %igx-grid__hierarchical-indent--scroll !optional; + // } + // + // @include e(mrl-block) { + // @extend %grid-mrl-block !optional; + // } + // + // @for $i from 1 through 10 { + // @include e(row-indentation, $m: level-#{$i}) { + // @extend %igx-grid__row-indentation--level-#{$i} !optional; + // } + // + // @include e(group-row, $m: padding-level-#{$i}) { + // @extend %igx-grid__group-row--padding-level-#{$i} !optional; + // } + // } + // + // // Pivot start + // @include e(pivot, $m: 'super-compact') { + // @extend %igx-grid__pivot--super-compact !optional + // } + // + // @include e(tr-pivot) { + // @extend %igx-grid__tr-pivot !optional + // } + // + // @include e(pivot-filter-toggle) { + // @extend %igx-grid__pivot-filter-toggle !optional + // } + // + // @include e(pivot-empty-chip-area) { + // @extend %igx-grid__pivot-empty-chip-area !optional + // } + // + // + // + // @include e(tr-pivot, $m: 'row-area') { + // @extend %igx-grid__tr-pivot--row-area !optional + // } + // + // @include e(tr-pivot, $m: 'filter-container') { + // @extend %igx-grid__tr-pivot--filter-container !optional + // } + // + // @include e(tr-pivot, $m: 'chip_drop_indicator') { + // @extend %igx-grid__tr-pivot--chip_drop_indicator !optional + // } + // + // @include e(tr-pivot, $m: 'drop-row-area') { + // @extend %igx-grid__tr-pivot--drop-row-area !optional + // } + // + // @include e(tr-pivot, $m: 'filter') { + // @extend %igx-grid__tr-pivot--filter !optional + // } + // + // @include e(tr-pivot-group) { + // @extend %igx-grid__tr-pivot-group !optional + // } + // + // @include e(tr-header-row) { + // @extend %igx-grid__tr-header-row !optional; + // } + // + // @include e(tr-pivot, $m: 'columnDimensionLeaf') { + // @extend %igx-grid__tr-pivot--columnDimensionLeaf !optional + // } + // + // @include e(tr-pivot, $m: 'columnMultiRowSpan') { + // @extend %igx-grid__tr-pivot--columnMultiRowSpan !optional + // } + // + // @include e(tbody-pivot-mrl-dimension) { + // @extend %igx-grid__tbody-pivot-mrl-dimension !optional + // } + // + // @include e(tr-pivot-toggle-icons) { + // @extend %igx-grid__tr-pivot-toggle-icons !optional; + // } + // // pivot end + // + // @include excel-filtering-partial(); + // @include advanced-filtering-partial(); + // @include group-by-area(); + // @include header-row(); + //} + // + //@include b(igx-drop-area) { + // @extend %igx-drop-area !optional; + // + // @include m(hover) { + // @extend %igx-drop-area--hover !optional; + // } + // + // @include e(icon) { + // @extend %igx-drop-area__icon !optional; + // } + // + // @include e(text) { + // @extend %igx-drop-area__text !optional; + // } + //} + // + //@include b(igx-group-label) { + // @extend %igx-group-label !optional; + // + // @include e(icon) { + // @extend %igx-group-label__icon !optional; + // } + // + // @include e(column-name) { + // @extend %igx-group-label__column-name !optional; + // } + // + // @include e(text) { + // @extend %igx-group-label__text !optional; + // } + // + // @include e(count-badge) { + // @extend %igx-group-label__count-badge !optional; + // } + //} + // + //@include b(igx-grid-summary) { + // @include m(active) { + // @extend %igx-grid-summary--active !optional; + // } + //} } diff --git a/projects/igniteui-angular/core/src/core/styles/components/grid/_group-by-area-component.scss b/projects/igniteui-angular/core/src/core/styles/components/grid/_group-by-area-component.scss index 62b91322102..911495276dd 100644 --- a/projects/igniteui-angular/core/src/core/styles/components/grid/_group-by-area-component.scss +++ b/projects/igniteui-angular/core/src/core/styles/components/grid/_group-by-area-component.scss @@ -2,11 +2,11 @@ /// @access private @mixin group-by-area { - @include b(igx-grid-grouparea) { - @extend %igx-grid-grouparea !optional; - - @include e(connector) { - @extend %igx-grid-grouparea__connector !optional; - } - } + //@include b(igx-grid-grouparea) { + // @extend %igx-grid-grouparea !optional; + // + // @include e(connector) { + // @extend %igx-grid-grouparea__connector !optional; + // } + //} } diff --git a/projects/igniteui-angular/core/src/core/styles/components/grid/_header-row-component.scss b/projects/igniteui-angular/core/src/core/styles/components/grid/_header-row-component.scss index a640f0ca808..32002595f37 100644 --- a/projects/igniteui-angular/core/src/core/styles/components/grid/_header-row-component.scss +++ b/projects/igniteui-angular/core/src/core/styles/components/grid/_header-row-component.scss @@ -2,158 +2,158 @@ /// @access private @mixin header-row { - @include b(igx-grid-thead) { - @extend %grid-thead-container !optional; - - @include e(wrapper) { - @extend %grid-thead !optional; - - igx-display-container { - @extend %grid-display-container-thead !optional; - } - - &:focus { - @extend %disable-focus-styles !optional; - } - } - - @include e(wrapper, $m: 'pivot') { - @extend %igx-grid-thead__wrapper--pivot !optional; - } - - @include e(title) { - @extend %grid-cell-display !optional; - @extend %grid-cell-header !optional; - @extend %grid-thead-title !optional; - } - - @include e(title, $m: pinned-last) { - @extend %grid-thead-title--pinned !optional; - } - - @include e(group) { - @extend %grid-thead-group !optional; - } - - @include e(subgroup) { - @extend %grid-thead-subgroup !optional; - } - - @include e(item) { - @extend %grid-thead-item !optional; - } - - @include e(thumb) { - @extend %grid-thead-thumb !optional; - } - - @include m(pivot) { - @extend %grid-thead--pivot !optional; - } - - @include m(virtualizationWrapper) { - @extend %grid-thead--virtualizationWrapper !optional; - } - - @include m(virtualizationContainer) { - @extend %grid-thead--virtualizationContainer !optional; - } - } - - @include b(igx-grid-th) { - @extend %grid-cell-display !optional; - @extend %grid-cell-header !optional; - - @include e(expander) { - @extend %igx-grid-th__expander !optional - } - - @include e(group-title) { - @extend %igx-grid-th__group-title !optional - } - - @include e(title) { - @extend %grid-cell-header-title !optional; - } - - @include e(icons) { - @extend %grid-cell-header-icons !optional; - } - - @include e(resize-handle) { - @extend %grid__resize-handle !optional; - } - - @include e(resize-line) { - @extend %grid__resize-line !optional; - } - - @include m(collapsible) { - @extend %igx-grid-th--collapsible !optional; - } - - @include m(sortable) { - @extend %igx-grid-th--sortable !optional; - } - - @include m(selectable) { - @extend %igx-grid-th--selectable !optional; - } - - @include m(filtrable) { - @extend %igx-grid-th--filtrable !optional; - } - - @include mx(filtrable, sortable) { - @extend %igx-grid-th--filtrable-sortable !optional; - } - - @include m(sorted) { - @extend %igx-grid-th--sorted !optional; - } - - @include m(selected) { - @extend %igx-grid-th--selected !optional; - } - - @include m(active) { - @extend %igx-grid-th--active !optional; - } - - @include m(number) { - @extend %grid-cell-number !optional; - } - - @include m(pinned) { - @extend %grid-cell--pinned !optional; - } - - @include m(pinned-last) { - @extend %grid-cell--pinned-last !optional; - } - - @include m(pinned-first) { - @extend %grid-cell--pinned-first !optional; - } - - @include m(fw) { - @extend %grid-cell--fixed-width !optional; - } - - @include m(filtering) { - @extend %grid-cell-header--filtering !optional; - } - - @include e(drop-indicator-left) { - @extend %igx-grid-th__drop-indicator-left !optional; - } - - @include e(drop-indicator-right) { - @extend %igx-grid-th__drop-indicator-right !optional; - } - - @include e(drop-indicator, $m: active) { - @extend %igx-grid-th__drop-indicator--active !optional; - } - } + //@include b(igx-grid-thead) { + // @extend %grid-thead-container !optional; + // + // @include e(wrapper) { + // @extend %grid-thead !optional; + // + // igx-display-container { + // @extend %grid-display-container-thead !optional; + // } + // + // &:focus { + // @extend %disable-focus-styles !optional; + // } + // } + // + // @include e(wrapper, $m: 'pivot') { + // @extend %igx-grid-thead__wrapper--pivot !optional; + // } + // + // @include e(title) { + // @extend %grid-cell-display !optional; + // @extend %grid-cell-header !optional; + // @extend %grid-thead-title !optional; + // } + // + // @include e(title, $m: pinned-last) { + // @extend %grid-thead-title--pinned !optional; + // } + // + // @include e(group) { + // @extend %grid-thead-group !optional; + // } + // + // @include e(subgroup) { + // @extend %grid-thead-subgroup !optional; + // } + // + // @include e(item) { + // @extend %grid-thead-item !optional; + // } + // + // @include e(thumb) { + // @extend %grid-thead-thumb !optional; + // } + // + // @include m(pivot) { + // @extend %grid-thead--pivot !optional; + // } + // + // @include m(virtualizationWrapper) { + // @extend %grid-thead--virtualizationWrapper !optional; + // } + // + // @include m(virtualizationContainer) { + // @extend %grid-thead--virtualizationContainer !optional; + // } + //} + // + //@include b(igx-grid-th) { + // @extend %grid-cell-display !optional; + // @extend %grid-cell-header !optional; + // + // @include e(expander) { + // @extend %igx-grid-th__expander !optional + // } + // + // @include e(group-title) { + // @extend %igx-grid-th__group-title !optional + // } + // + // @include e(title) { + // @extend %grid-cell-header-title !optional; + // } + // + // @include e(icons) { + // @extend %grid-cell-header-icons !optional; + // } + // + // @include e(resize-handle) { + // @extend %grid__resize-handle !optional; + // } + // + // @include e(resize-line) { + // @extend %grid__resize-line !optional; + // } + // + // @include m(collapsible) { + // @extend %igx-grid-th--collapsible !optional; + // } + // + // @include m(sortable) { + // @extend %igx-grid-th--sortable !optional; + // } + // + // @include m(selectable) { + // @extend %igx-grid-th--selectable !optional; + // } + // + // @include m(filtrable) { + // @extend %igx-grid-th--filtrable !optional; + // } + // + // @include mx(filtrable, sortable) { + // @extend %igx-grid-th--filtrable-sortable !optional; + // } + // + // @include m(sorted) { + // @extend %igx-grid-th--sorted !optional; + // } + // + // @include m(selected) { + // @extend %igx-grid-th--selected !optional; + // } + // + // @include m(active) { + // @extend %igx-grid-th--active !optional; + // } + // + // @include m(number) { + // @extend %grid-cell-number !optional; + // } + // + // @include m(pinned) { + // @extend %grid-cell--pinned !optional; + // } + // + // @include m(pinned-last) { + // @extend %grid-cell--pinned-last !optional; + // } + // + // @include m(pinned-first) { + // @extend %grid-cell--pinned-first !optional; + // } + // + // @include m(fw) { + // @extend %grid-cell--fixed-width !optional; + // } + // + // @include m(filtering) { + // @extend %grid-cell-header--filtering !optional; + // } + // + // @include e(drop-indicator-left) { + // @extend %igx-grid-th__drop-indicator-left !optional; + // } + // + // @include e(drop-indicator-right) { + // @extend %igx-grid-th__drop-indicator-right !optional; + // } + // + // @include e(drop-indicator, $m: active) { + // @extend %igx-grid-th__drop-indicator--active !optional; + // } + //} } diff --git a/projects/igniteui-angular/grids/core/src/summaries/themes/_base.scss b/projects/igniteui-angular/grids/core/src/summaries/themes/_base.scss index 1772c84108e..50349fb84e0 100644 --- a/projects/igniteui-angular/grids/core/src/summaries/themes/_base.scss +++ b/projects/igniteui-angular/grids/core/src/summaries/themes/_base.scss @@ -8,75 +8,124 @@ $_theme: $material; @include layer(base) { - $cell-pin: ( - style: var-get($_theme, 'pinned-border-width') var-get($_theme, 'pinned-border-style'), - color: var-get($_theme, 'pinned-border-color') - ); - - @include b(igx-grid-summary) { - position: relative; - display: flex; - flex-direction: column; - flex: 1 1 0%; - padding-block: 0; - padding-inline: pad-inline(rem(12px), rem(16px), rem(24px)); - background: var-get($_theme, 'background-color', inherit); - overflow: hidden; - outline-style: none; - - @include e(item) { - display: flex; - align-items: center; - position: relative; - padding-block: pad(rem(0), rem(2px), rem(6px)); - padding-inline: 0; - font-size: rem(12px); - } - - @include e(label) { - @include ellipsis(); - - color: var-get($_theme, 'label-color'); - min-width: rem(30px); - margin-inline-end: rem(3px); - - &:hover { - color: var-get($_theme, 'label-hover-color'); - } - } - - @include e(result) { - @include ellipsis(); - - color: var-get($_theme, 'result-color'); - font-weight: 600; - flex: 1 1 auto; - text-align: end; - } - - @include m(pinned) { - position: relative; - z-index: 1; - } - - @include m(pinned-last) { - border-inline-end: map.get($cell-pin, 'style') map.get($cell-pin, 'color'); - - @media print { - border-inline-end: map.get($cell-pin, 'style') #999; - } - } - - @include m(pinned-first) { - border-inline-start: map.get($cell-pin, 'style') map.get($cell-pin, 'color'); - - @media print { - border-inline-start: map.get($cell-pin, 'style') #999; - } - } - - @include m(fw) { - flex-grow: 0; - } - } + $cell-pin: ( + style: var-get($_theme, 'pinned-border-width') var-get($_theme, 'pinned-border-style'), + color: var-get($_theme, 'pinned-border-color') + ); + + @include b(igx-grid-summary) { + position: relative; + display: flex; + flex-direction: column; + flex: 1 1 0%; + padding-block: 0; + padding-inline: pad-inline(rem(12px), rem(16px), rem(24px)); + background: var-get($_theme, 'background-color', inherit); + overflow: hidden; + outline-style: none; + + // TODO MAYBE WE SHOULD RENAME THIS VARIABLE SO THE CAN BE USED IN THE SUMMARY AND BODY + border-inline-end: var(--header-border-width) var(--header-border-style) var(--header-border-color); + + @include e(item) { + display: flex; + align-items: center; + position: relative; + padding-block: pad(rem(0), rem(2px), rem(6px)); + padding-inline: 0; + font-size: rem(12px); + } + + @include e(label) { + @include ellipsis(); + + color: var-get($_theme, 'label-color'); + min-width: rem(30px); + margin-inline-end: rem(3px); + + &:hover { + color: var-get($_theme, 'label-hover-color'); + } + } + + @include e(result) { + @include ellipsis(); + + color: var-get($_theme, 'result-color'); + font-weight: 600; + flex: 1 1 auto; + text-align: end; + } + + @include m(pinned) { + position: relative; + z-index: 1; + } + + @include mx(active, pinned) { + &::after { + width: calc(100% - rem(1px)); + } + } + + @include m(pinned-first) { + border-inline-start: map.get($cell-pin, 'style') map.get($cell-pin, 'color'); + + &:dir(ltr) { + box-shadow: inset rem(1px) 0 0 0 var-get($_theme, 'pinned-border-color'); + } + + &:dir(rtl) { + box-shadow: inset rem(-1px) 0 0 0 var-get($_theme, 'pinned-border-color'); + } + + @media print { + border-inline-start: map.get($cell-pin, 'style') #999; + } + } + + @include m(pinned-last) { + border-inline-end: map.get($cell-pin, 'style') map.get($cell-pin, 'color'); + + &::after { + inset-inline-start: rem(1px); + } + + @media print { + border-inline-end: map.get($cell-pin, 'style') #999; + } + + &:dir(ltr) { + box-shadow: inset rem(-1px) 0 0 0 var-get($_theme, 'pinned-border-color'); + } + + &:dir(rtl) { + box-shadow: inset rem(1px) 0 0 0 var-get($_theme, 'pinned-border-color'); + } + } + + @include m(fw) { + flex-grow: 0; + } + + &::after { + content: ''; + position: absolute; + inset: 0; + pointer-events: none; + } + + @include m(active) { + &::after { + width: 100%; + height: 100%; + box-shadow: inset 0 0 0 rem(1px) var(--cell-active-border-color); + pointer-events: none; + } + } + } + + .igx-grid-summary:not(.igx-grid-summary--pinned, :only-child) { + border-inline-end-color: transparent; + } } diff --git a/projects/igniteui-angular/grids/grid/src/grid.component.scss b/projects/igniteui-angular/grids/grid/src/grid.component.scss new file mode 100644 index 00000000000..41d4e903297 --- /dev/null +++ b/projects/igniteui-angular/grids/grid/src/grid.component.scss @@ -0,0 +1,4 @@ +@use '../../themes/base'; +@use '../../themes/shared'; +@use '../../themes/light'; +@use '../../themes/dark'; diff --git a/projects/igniteui-angular/grids/grid/src/grid.component.ts b/projects/igniteui-angular/grids/grid/src/grid.component.ts index 64ceec9d441..61b5b5e196f 100644 --- a/projects/igniteui-angular/grids/grid/src/grid.component.ts +++ b/projects/igniteui-angular/grids/grid/src/grid.component.ts @@ -1,7 +1,7 @@ import { Component, ChangeDetectionStrategy, Input, Output, EventEmitter, ContentChild, ViewChildren, QueryList, ViewChild, TemplateRef, DoCheck, AfterContentInit, HostBinding, - OnInit, AfterViewInit, ContentChildren, CUSTOM_ELEMENTS_SCHEMA, booleanAttribute + OnInit, AfterViewInit, ContentChildren, CUSTOM_ELEMENTS_SCHEMA, booleanAttribute, ViewEncapsulation, } from '@angular/core'; import { NgTemplateOutlet, NgClass, NgStyle } from '@angular/common'; import { @@ -122,6 +122,8 @@ export interface IGroupingDoneEventArgs extends IBaseEventArgs { ], selector: 'igx-grid', templateUrl: './grid.component.html', + styleUrl: './grid.component.css', + encapsulation: ViewEncapsulation.None, imports: [ NgClass, NgStyle, diff --git a/projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid.component.scss b/projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid.component.scss new file mode 100644 index 00000000000..41d4e903297 --- /dev/null +++ b/projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid.component.scss @@ -0,0 +1,4 @@ +@use '../../themes/base'; +@use '../../themes/shared'; +@use '../../themes/light'; +@use '../../themes/dark'; diff --git a/projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid.component.ts b/projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid.component.ts index f1be7fdf360..b92ee0c3de7 100644 --- a/projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid.component.ts +++ b/projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid.component.ts @@ -1,4 +1,28 @@ -import { AfterContentInit, AfterViewInit, booleanAttribute, ChangeDetectionStrategy, ChangeDetectorRef, Component, ContentChildren, CUSTOM_ELEMENTS_SCHEMA, DoCheck, ElementRef, HostBinding, Input, OnDestroy, OnInit, QueryList, reflectComponentType, SimpleChanges, TemplateRef, ViewChild, ViewChildren, ViewContainerRef, inject } from '@angular/core'; +import { + AfterContentInit, + AfterViewInit, + booleanAttribute, + ChangeDetectionStrategy, + ChangeDetectorRef, + Component, + ContentChildren, + CUSTOM_ELEMENTS_SCHEMA, + DoCheck, + ElementRef, + HostBinding, + Input, + OnDestroy, + OnInit, + QueryList, + reflectComponentType, + SimpleChanges, + TemplateRef, + ViewChild, + ViewChildren, + ViewContainerRef, + inject, + ViewEncapsulation, +} from '@angular/core'; import { NgClass, NgTemplateOutlet, NgStyle } from '@angular/common'; import { IgxHierarchicalGridAPIService } from './hierarchical-grid-api.service'; @@ -46,6 +70,8 @@ let NEXT_ID = 0; changeDetection: ChangeDetectionStrategy.OnPush, selector: 'igx-child-grid-row', templateUrl: './child-grid-row.component.html', + styleUrl: 'hierarchical-grid.component.css', + encapsulation: ViewEncapsulation.None, imports: [NgClass] }) export class IgxChildGridRowComponent implements AfterViewInit, OnInit { @@ -273,6 +299,8 @@ export class IgxChildGridRowComponent implements AfterViewInit, OnInit { changeDetection: ChangeDetectionStrategy.OnPush, selector: 'igx-hierarchical-grid', templateUrl: 'hierarchical-grid.component.html', + styleUrl: 'hierarchical-grid.component.css', + encapsulation: ViewEncapsulation.None, providers: [ IgxGridCRUDService, IgxGridValidationService, diff --git a/projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.scss b/projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.scss new file mode 100644 index 00000000000..41d4e903297 --- /dev/null +++ b/projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.scss @@ -0,0 +1,4 @@ +@use '../../themes/base'; +@use '../../themes/shared'; +@use '../../themes/light'; +@use '../../themes/dark'; diff --git a/projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.ts b/projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.ts index afc3939de51..9cd1f3356c2 100644 --- a/projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.ts +++ b/projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.ts @@ -1,56 +1,148 @@ -import { AfterContentInit, AfterViewInit, ChangeDetectionStrategy, Component, EventEmitter, ElementRef, HostBinding, Input, OnInit, Output, QueryList, TemplateRef, ViewChild, ViewChildren, ContentChild, createComponent, CUSTOM_ELEMENTS_SCHEMA, booleanAttribute, OnChanges, SimpleChanges, inject } from '@angular/core'; -import { NgTemplateOutlet, NgClass, NgStyle } from '@angular/common'; +import { + AfterContentInit, + AfterViewInit, + booleanAttribute, + ChangeDetectionStrategy, + Component, + ContentChild, + createComponent, + CUSTOM_ELEMENTS_SCHEMA, + ElementRef, + EventEmitter, + HostBinding, + inject, + Input, + OnChanges, + OnInit, + Output, + QueryList, + SimpleChanges, + TemplateRef, + ViewChild, + ViewChildren, + ViewEncapsulation, +} from '@angular/core'; +import { NgClass, NgStyle, NgTemplateOutlet } from '@angular/common'; import { first, take, takeUntil } from 'rxjs/operators'; -import { DEFAULT_PIVOT_KEYS, IDimensionsChange, IgxFilteringService, IgxGridNavigationService, IgxGridValidationService, IgxPivotDateDimension, IgxPivotGridValueTemplateContext, IPivotConfiguration, IPivotConfigurationChangedEventArgs, IPivotDimension, IPivotUISettings, IPivotValue, IValuesChange, PivotDimensionType, PivotRowLayoutType, PivotSummaryPosition, PivotUtil } from 'igniteui-angular/grids/core'; -import { IgxGridSelectionService } from 'igniteui-angular/grids/core'; -import { GridType, IGX_GRID_BASE, IGX_GRID_SERVICE_BASE, IgxColumnTemplateContext, PivotGridType, RowType } from 'igniteui-angular/grids/core'; -import { IgxGridCRUDService } from 'igniteui-angular/grids/core'; -import { IgxGridSummaryService } from 'igniteui-angular/grids/core'; -import { IgxPivotHeaderRowComponent } from './pivot-header-row.component'; -import { IgxColumnGroupComponent } from 'igniteui-angular/grids/core'; -import { IgxColumnComponent } from 'igniteui-angular/grids/core'; -import { FilterMode, GridPagingMode, GridSummaryPosition } from 'igniteui-angular/grids/core'; -import { WatchChanges } from 'igniteui-angular/grids/core'; -import { cloneArray, ColumnType, DataUtil, DefaultDataCloneStrategy, GridColumnDataType, GridSummaryCalculationMode, IDataCloneStrategy, IFilteringExpressionsTree, IFilteringOperation, IFilteringStrategy, ISortingExpression, OverlaySettings, resizeObservable, ɵSize, SortingDirection, IgxOverlayOutletDirective } from 'igniteui-angular/core'; import { - IGridEditEventArgs, + DEFAULT_PIVOT_KEYS, + DimensionValuesFilteringStrategy, + DropPosition, + FilterMode, + GridBaseAPIService, + GridPagingMode, + GridSummaryPosition, + GridType, ICellPosition, - IColumnMovingEndEventArgs, IColumnMovingEventArgs, IColumnMovingStartEventArgs, + IColumnMovingEndEventArgs, + IColumnMovingEventArgs, + IColumnMovingStartEventArgs, IColumnVisibilityChangedEventArgs, + IDimensionsChange, IGridEditDoneEventArgs, + IGridEditEventArgs, IGridToolbarExportEventArgs, + IGX_GRID_BASE, + IGX_GRID_SERVICE_BASE, + IgxColumnComponent, + IgxColumnGroupComponent, + IgxColumnMovingDropDirective, + IgxColumnResizingService, + IgxColumnTemplateContext, + IgxExcelStyleColumnOperationsTemplateDirective, + IgxExcelStyleFilterOperationsTemplateDirective, + IgxExcelStyleSearchComponent, + IgxFilteringService, + IgxGridBodyDirective, + IgxGridCRUDService, + IgxGridDragSelectDirective, + IgxGridExcelStyleFilteringComponent, + IgxGridNavigationService, + IgxGridRowClassesPipe, + IgxGridRowStylesPipe, + IgxGridSelectionService, + IgxGridSummaryService, + IgxGridValidationService, + IgxPivotColumnResizingService, + IgxPivotDateDimension, + IgxPivotGridColumnResizerComponent, + IgxPivotGridValueTemplateContext, IPinColumnCancellableEventArgs, IPinColumnEventArgs, IPinRowEventArgs, + IPivotConfiguration, + IPivotConfigurationChangedEventArgs, + IPivotDimension, + IPivotUISettings, + IPivotValue, IRowDataCancelableEventArgs, IRowDataEventArgs, IRowDragEndEventArgs, - IRowDragStartEventArgs + IRowDragStartEventArgs, + IValuesChange, + NoopPivotDimensionsStrategy, + PivotDimensionType, + PivotGridType, + PivotRowLayoutType, + PivotSummaryPosition, + PivotUtil, + RowType, + WatchChanges, } from 'igniteui-angular/grids/core'; -import { DropPosition } from 'igniteui-angular/grids/core'; -import { DimensionValuesFilteringStrategy, NoopPivotDimensionsStrategy } from 'igniteui-angular/grids/core'; -import { IgxGridExcelStyleFilteringComponent, IgxExcelStyleColumnOperationsTemplateDirective, IgxExcelStyleFilterOperationsTemplateDirective } from 'igniteui-angular/grids/core'; +import { IgxPivotHeaderRowComponent } from './pivot-header-row.component'; +import { + cloneArray, + ColumnType, + DataUtil, + DefaultDataCloneStrategy, + GridColumnDataType, + GridSummaryCalculationMode, + IDataCloneStrategy, + IFilteringExpressionsTree, + IFilteringOperation, + IFilteringStrategy, + IgxOverlayOutletDirective, + ISortingExpression, + onResourceChangeHandle, + OverlaySettings, + resizeObservable, + SortingDirection, + State, + Transaction, + TransactionService, + ɵSize, +} from 'igniteui-angular/core'; import { IgxPivotGridNavigationService } from './pivot-grid-navigation.service'; -import { IgxPivotColumnResizingService } from 'igniteui-angular/grids/core'; -import { State, Transaction, TransactionService, onResourceChangeHandle } from 'igniteui-angular/core'; import { IgxPivotFilteringService } from './pivot-filtering.service'; -import { GridBaseAPIService } from 'igniteui-angular/grids/core'; import { IgxPivotRowDimensionContentComponent } from './pivot-row-dimension-content.component'; -import { IgxPivotGridColumnResizerComponent } from 'igniteui-angular/grids/core'; import { PivotSortUtil } from './pivot-sort-util'; -import { IgxPivotRowDimensionHeaderTemplateDirective, IgxPivotValueChipTemplateDirective } from './pivot-grid.directives'; -import { IgxPivotRowPipe, IgxPivotRowExpansionPipe, IgxPivotAutoTransform, IgxPivotColumnPipe, IgxPivotGridFilterPipe, IgxPivotGridSortingPipe, IgxPivotGridColumnSortingPipe, IgxPivotCellMergingPipe, IgxPivotGridHorizontalRowGrouping } from './pivot-grid.pipes'; -import { IgxGridRowClassesPipe, IgxGridRowStylesPipe } from 'igniteui-angular/grids/core'; -import { IgxExcelStyleSearchComponent } from 'igniteui-angular/grids/core'; +import { + IgxPivotRowDimensionHeaderTemplateDirective, + IgxPivotValueChipTemplateDirective, +} from './pivot-grid.directives'; +import { + IgxPivotAutoTransform, + IgxPivotCellMergingPipe, + IgxPivotColumnPipe, + IgxPivotGridColumnSortingPipe, + IgxPivotGridFilterPipe, + IgxPivotGridHorizontalRowGrouping, + IgxPivotGridSortingPipe, + IgxPivotRowExpansionPipe, + IgxPivotRowPipe, +} from './pivot-grid.pipes'; import { IgxPivotRowComponent } from './pivot-row.component'; -import { IgxColumnMovingDropDirective } from 'igniteui-angular/grids/core'; -import { IgxGridDragSelectDirective } from 'igniteui-angular/grids/core'; -import { IgxGridBodyDirective } from 'igniteui-angular/grids/core'; -import { IgxColumnResizingService } from 'igniteui-angular/grids/core'; import { IgxPivotRowHeaderGroupComponent } from './pivot-row-header-group.component'; import { IgxPivotRowDimensionMrlRowComponent } from './pivot-row-dimension-mrl-row.component'; -import { IForOfDataChangingEventArgs, IgxForOfScrollSyncService, IgxForOfSyncService, IgxGridForOfDirective, IgxTemplateOutletDirective, IgxToggleDirective } from 'igniteui-angular/directives'; +import { + IForOfDataChangingEventArgs, + IgxForOfScrollSyncService, + IgxForOfSyncService, + IgxGridForOfDirective, + IgxTemplateOutletDirective, + IgxToggleDirective, +} from 'igniteui-angular/directives'; import { IgxCircularProgressBarComponent } from 'igniteui-angular/progressbar'; import { IgxSnackbarComponent } from 'igniteui-angular/snackbar'; import { IgxIconComponent } from 'igniteui-angular/icon'; @@ -98,6 +190,8 @@ const MINIMUM_COLUMN_WIDTH_SUPER_COMPACT = 104; preserveWhitespaces: false, selector: 'igx-pivot-grid', templateUrl: 'pivot-grid.component.html', + styleUrl: 'pivot-grid.component.css', + encapsulation: ViewEncapsulation.None, providers: [ IgxGridCRUDService, IgxGridValidationService, diff --git a/projects/igniteui-angular/grids/themes/_base.scss b/projects/igniteui-angular/grids/themes/_base.scss new file mode 100644 index 00000000000..b231fa1db9e --- /dev/null +++ b/projects/igniteui-angular/grids/themes/_base.scss @@ -0,0 +1,2573 @@ +/* stylelint-disable max-nesting-depth */ +@use 'igniteui-theming/sass/bem' as *; +@use 'igniteui-theming/sass/themes' as *; +@use 'igniteui-theming/sass/typography' as *; +@use 'igniteui-theming/sass/color/functions' as *; +@use 'styles/themes/standalone' as *; +@use './light/tokens' as *; + +$theme: $material; +$cell-font-size: rem(13px); +$cell-line-height: rem(16px); +$cell-editing-outline-width: rem(2px); +$grid-header-border: var-get($theme, 'header-border-width') var-get($theme, 'header-border-style') var-get($theme, 'header-border-color'); + +$cell-padding-comfortable: rem(24px); +$cell-padding-cosy: rem(16px); +$cell-padding-compact: rem(12px); + +// The shadow size that simulates border glueth to the pinned border to make it thicker +$pinned-shadow-size: #{rem(1px)}; + + +@include layer(base) { + // Base cell display - used for both data cells and header cells + %cell-display { + position: relative; + display: flex; + flex: 1 1 0%; + align-items: center; + outline-style: none; + color: inherit; + text-align: start; + // TODO: Verify if this is needed, commenting out for now + background-clip: border-box !important; + min-height: var(--cell-height); + overflow: hidden; + + // Font size for the cell is different in the ingigo theme -> it simply uses the detail-1 styles for all cells + font-size: $cell-font-size; + line-height: $cell-line-height; + + padding-block: 0; + // The inline padding styles should be different in the indigo theme -> 8px, 12px, 16px + padding-inline: pad-inline(rem(12px), rem(16px), rem(24px)); + } + + %cell-header { + flex-flow: row nowrap; + justify-content: space-between; + align-items: flex-end; + min-width: 0; + min-height: var(--header-size); + padding-inline: pad-inline(rem(12px), rem(16px), rem(24px)); + padding-block: 0; + font-size: rem(12px); + font-weight: 600; + border-inline-end: $grid-header-border; + overflow: hidden; + transition: color 250ms ease-in-out; + outline-style: none; + } + + @include b(igx-grid) { + @include sizable(); + + --component-size: var(--ig-size, var(--ig-size-large)); + // TODO: This should be declared in the theme tokens + --grid-size: var(--component-size); + + --_expander-icon-width: #{rem(24px)}; + --_hierarchical-action-icon: #{rem(24px)}; + + --_hierarchical-indent-small: #{rem(12px)}; + --_hierarchical-indent-medium: #{rem(16px)}; + --_hierarchical-indent-large: #{rem(24px)}; + + --cell-height: #{sizable(rem(32px), rem(40px), rem(50px))}; + + // Derived size variables for header, group area, and tree indentation + --header-size: #{sizable(rem(32px), rem(40px), rem(50px))}; + + --grouparea-size: #{sizable(rem(41px), rem(49px), rem(57px))}; + + --igx-tree-indent-size: #{sizable(rem(24px), rem(16px), rem(12px))}; + + // Core grid structure + position: relative; + display: grid; + grid-template-rows: auto auto auto 1fr auto auto; + grid-template-columns: 100%; + overflow: hidden; + box-shadow: var-get($theme, 'grid-elevation'); + outline-style: none; + z-index: 1; + + // Grid caption + @include e(caption) { + display: flex; + align-items: center; + font-size: rem(20px); + line-height: rem(32px); + padding: rem(16px) rem(24px); + grid-row: 1; + } + + // Table body container + @include e(tbody) { + position: relative; + display: flex; + grid-row: 4; + overflow: hidden; + } + + // Table body content area + @include e(tbody-content) { + position: relative; + background: var-get($theme, 'content-background'); + color: var-get($theme, 'content-text-color'); + overflow: hidden; + z-index: 1; + outline-style: none; + + &:focus { + outline: 0; + } + } + + // Table body message (empty state) + @include e(tbody-message) { + display: flex; + justify-content: center; + align-items: center; + height: 100%; + color: var-get($theme, 'content-text-color'); + flex-direction: column; + padding: rem(24px); + } + + // Loading indicator + @include e(loading) { + display: flex; + align-items: center; + justify-content: center; + height: 100%; + min-height: rem(100px); + } + + // Table body scrollbar + @include e(tbody-scrollbar) { + background: var-get($theme, 'content-background'); + border-inline-start: rem(1px) solid var-get($theme, 'row-border-color') ; + position: relative; + } + + // Table body scrollbar main section + @include e(tbody-scrollbar-main) { + position: relative; + } + + // Table body scrollbar start section + @include e(tbody-scrollbar-start) { + background: var-get($theme, 'header-background'); + } + + // Table body scrollbar end section + @include e(tbody-scrollbar-end) { + background: var-get($theme, 'header-background'); + } + + // Horizontal scroll container + @include e(scroll) { + grid-row: 6; + display: flex; + flex-flow: row nowrap; + width: 100%; + background: var-get($theme, 'header-background'); + z-index: 10001; + } + + // Scroll start section + @include e(scroll-start) { + background: var-get($theme, 'header-background'); + } + + // Scroll main section + @include e(scroll-main) { + igx-display-container { + height: 0; + } + } + + // Table footer + @include e(tfoot) { + position: relative; + display: flex; + background: var-get($theme, 'header-background'); + color: var-get($theme, 'header-text-color'); + overflow: hidden; + outline-style: none; + grid-row: 5; + border-top: $grid-header-border; + z-index: 10001; + + .igx-grid__tr { + position: relative; + background: inherit; + color: inherit; + z-index: 2; + + &:hover { + background: inherit; + color: inherit; + } + } + + > [aria-activedescendant] { + outline-style: none; + } + + &:focus { + outline: 0; + } + } + + // Table footer thumb (scrollbar) + @include e(tfoot-thumb) { + position: absolute; + top: 0; + inset-inline-end: 0; + background: var-get($theme, 'header-background'); + } + + // Grid footer + @include e(footer) { + grid-row: 7; + } + + // Base row element + @include e(tr) { + position: relative; + display: flex; + outline-style: none; + border-bottom: rem(1px) solid var-get($theme, 'row-border-color'); + // TODO: Why is this needed? + background-clip: content-box !important; + + + .igx-display-container { + overflow: visible !important; + flex: 1; + min-width: 0; + } + } + + @include e(tr, $not: (header, selected)) { + &:hover { + background: var-get($theme, 'row-hover-background'); + color: var-get($theme, 'row-hover-text-color'); + } + } + + // Row striping - odd rows + @include e(tr, $m: odd) { + background: var-get($theme, 'row-odd-background'); + color: var-get($theme, 'row-odd-text-color'); + } + + // Row striping - even rows + @include e(tr, $m: even) { + background: var-get($theme, 'row-even-background'); + color: var-get($theme, 'row-even-text-color'); + } + + // Selected row state + @include e(tr, $m: selected) { + color: var-get($theme, 'row-selected-text-color'); + background: var-get($theme, 'row-selected-background'); + + // WARN: This doesn't follow the BEM structure, needs work + .igx-grid__td--selected, + .igx-grid__td--pinned.igx-grid__td--selected { + color: var-get($theme, 'cell-selected-within-text-color'); + background: var-get($theme, 'cell-selected-within-background'); + } + + &:hover { + background: var-get($theme, 'row-selected-hover-background'); + color: var-get($theme, 'row-selected-hover-text-color'); + + // WARN: This doesn't follow the BEM structure, needs work + .igx-grid__td--column-selected { + color: var-get($theme, 'row-selected-hover-text-color'); + background: var-get( + $theme, + 'row-selected-hover-background' + ); + } + } + } + + // Deleted row state - shows strikethrough text + @include e(tr, $m: deleted) { + // WARN: This doesn't follow the BEM structure, needs work + .igx-grid__td-text { + font-style: italic; + color: color($color: 'error'); + text-decoration: line-through; + } + } + + // Highlighted row - shows left indicator bar + @include e(tr, $m: highlighted) { + position: relative; + + &::after { + content: ''; + position: absolute; + top: 0; + inset-inline-start: 0; + width: rem(4px); + height: 100%; + background: var-get($theme, 'row-highlight'); + z-index: 3; + } + + // When highlighted row is also edited, offset the edited indicator + &::before { + inset-inline-start: rem(4px); + } + } + + // Filtered row (tree grid) - subdued text color + @include e(tr, $m: filtered) { + // WARN: This doesn't follow the BEM structure, needs work + .igx-grid__td-text { + color: var-get($theme, 'tree-filtered-text-color'); + } + } + + // Selected and filtered row combination (tree grid) + @include e(tr, $mods: (selected, filtered)) { + // WARN: This doesn't follow the BEM structure, needs work + .igx-grid__td-text { + color: var-get($theme, 'tree-selected-filtered-row-text-color'); + } + } + + // Expanded row (hierarchical/tree grid) + @include e(tr, $m: expanded) { + border-bottom: none; + } + + // Pinned row + @include e(tr, $m: pinned) { + position: relative; + background: inherit; + z-index: 10000; + + .igx-grid__hierarchical-expander--empty { + border-inline-end: rem(1px) solid var-get($theme, 'header-border-color'); + } + } + + // Pinned row at top + @include e(tr, $m: pinned-top) { + border-bottom: rem(2px) solid var-get($theme, 'pinned-border-color') !important; + + .igx-grid__tr:last-of-type { + border-bottom: none; + } + } + + // Pinned row at bottom + @include e(tr, $m: pinned-bottom) { + border-top: rem(2px) solid var-get($theme, 'pinned-border-color') !important; + position: absolute; + bottom: 0; + } + + // Merged row (no bottom border) + @include e(tr, $m: merged) { + border-block-end: 0; + } + + // Merged row top + @include e(tr, $m: merged-top) { + position: absolute; + width: 100%; + } + + // Disabled row + @include e(tr, $m: disabled) { + .igx-grid__td-text { + color: var-get($theme, 'cell-disabled-color'); + } + } + + // Cell (idle) + @include e(td) { + @extend %cell-display; + + // TODO the body column border shodu be transparent by default we shoud create new variables for it + border-inline-end: $grid-header-border; + + // Used for the active cell indicator + &::after { + content: ''; + position: absolute; + inset: 0; + pointer-events: none; + } + } + + @include e(td, $m: centered) { + justify-content: center; + } + + @include e(td, $m: image) { + justify-content: center; + } + + + @include e(td, $m: bool) { + display: flex; + flex-grow: 1; + justify-content: center; + + .igx-icon { + --component-size: 1; + } + + .igx-icon--error { + color: color($color: 'gray', $variant: 600); + } + } + + @include e(td, $m: bool-true) { + .igx-icon--success { + color: color($color: 'gray', $variant: 700); + } + } + + // Cell for fixed width columns (non-resizable) + @include e(td, $m: fw) { + flex-grow: 0; + outline-style: none; + + .igx-icon { + --component-size: 3; + } + } + + // Cell (text wrapper) + @include e(td-text) { + @include ellipsis(); + pointer-events: none; + } + + // New cell (newly added) + @include e(td, $m: new) { + color: var-get($theme, 'cell-new-color'); + } + + // Edited cell (value has been modified) + @include e(td, $m: edited) { + .igx-grid__td-text { + font-style: italic; + color: var-get($theme, 'cell-edited-value-color'); + padding: 0 rem(1px); + } + } + + // Merged cell + @include e(td, $m: merged) { + z-index: 1; + grid-row: 1 / -1; + } + + // Merged cell when selected + @include e(td, $m: merged-selected) { + color: var-get($theme, 'row-selected-text-color'); + background: var-get($theme, 'row-selected-background') !important; + } + + // Merged cell when hovered + @include e(td, $m: merged-hovered) { + background: var-get($theme, 'row-hover-background') !important; + color: var-get($theme, 'row-hover-text-color'); + } + + // Merged cell when both selected and hovered + @include e(td, $mods: (merged-selected, merged-hovered)) { + background: var-get( + $theme, + 'row-selected-hover-background' + ) !important; + color: var-get($theme, 'row-selected-hover-text-color'); + } + + // Number cell (right-aligned) + @include e(td, $m: number) { + text-align: end; + justify-content: flex-end; + flex-grow: 1; + } + + // Pinned cell + @include e(td, $m: pinned) { + position: relative; + background: inherit; + z-index: 9999; + + &::after { + width: calc(100% - $pinned-shadow-size); + } + } + + // First pinned column (left border) + @include e(td, $m: pinned-first) { + border-inline-start: var-get($theme, 'pinned-border-width') solid var-get($theme, 'pinned-border-color'); + + &:dir(ltr) { + box-shadow: inset $pinned-shadow-size 0 0 0 var-get($theme, 'pinned-border-color'); + } + + &:dir(rtl) { + box-shadow: inset calc($pinned-shadow-size * -1) 0 0 0 var-get($theme, 'pinned-border-color'); + } + + &::after { + width: calc(100% - $pinned-shadow-size); + inset-inline-end: 0; + inset-inline-start: unset; + } + } + + // Last pinned column (right border) + @include e(td, $m: pinned-last) { + border-inline-end: var-get($theme, 'pinned-border-width') solid var-get($theme, 'pinned-border-color'); + + &:dir(ltr) { + box-shadow: inset calc($pinned-shadow-size * -1) 0 0 0 var-get($theme, 'pinned-border-color'); + } + + &:dir(rtl) { + box-shadow: inset $pinned-shadow-size 0 0 0 var-get($theme, 'pinned-border-color'); + } + } + + // Pinned cell when selected + @include e(td, $mods: (pinned, selected)) { + color: var-get($theme, 'cell-selected-text-color'); + background: var-get($theme, 'cell-selected-background'); + } + + // Pinned cell when column is selected + @include e(td, $mods: (pinned, column-selected)) { + color: var-get($theme, 'row-selected-text-color'); + background: var-get($theme, 'row-selected-background'); + + &:hover { + background: var-get($theme, 'row-selected-hover-background'); + color: var-get($theme, 'row-selected-text-color'); + } + } + + // First cell in row-pinned layout + @include e(td, $m: row-pinned-first) { + overflow: hidden; + } + + // Pinned chip spacing + @include e(td, $m: pinned-chip) { + margin-inline-end: pad-inline(rem(4px), rem(8px), rem(12px)); + } + + @include e(td, $m: active) { + &::after { + box-shadow: inset 0 0 0 rem(1px) + var-get($theme, 'cell-active-border-color'); + } + } + + // Selected cell + @include e(td, $m: selected) { + color: var-get($theme, 'cell-selected-text-color'); + background: var-get($theme, 'cell-selected-background'); + + .igx-grid__tree-grouping-indicator { + &:hover { + color: var-get($theme, 'cell-selected-text-color'); + } + } + } + + @include e(td, $m: valid) { + &::after { + box-shadow: inset 0 0 0 rem(2px) color($color: 'success') !important; + } + } + + // Column selected (entire column is selected) + @include e(td, $m: column-selected) { + color: var-get($theme, 'row-selected-text-color'); + background: var-get($theme, 'row-selected-background'); + } + + // Cross-selected (cell + column selected) + @include e(td, $mods: (selected, column-selected)) { + color: var-get($theme, 'cell-selected-within-text-color'); + background: var-get($theme, 'cell-selected-within-background'); + } + + // Valid cell in edit mode + @include e(td, $mods: (editing, valid)) { + // Placeholder for valid state styling if needed + } + + @include e(td, $m: editing) { + background: var-get($theme, 'cell-editing-background') !important; + padding-inline: rem(4px); + + &::after { + box-shadow: inset 0 0 0 #{$cell-editing-outline-width} + var-get($theme, 'edit-mode-color'); + } + + igx-input-group { + --size: var(--cell-height) !important; + + width: 100%; + overflow: hidden; + + // I don't like this, customize via CSS variables instead? + .igx-input-group__bundle { + background: transparent !important; + border: none !important; + box-shadow: none !important; + + &::before { + content: none !important; + } + + &::after { + display: none; + } + } + + input { + --input-font-size: #{$cell-font-size}; + --input-line-height: #{$cell-line-height}; + + font-size: var(--input-font-size) !important; + line-height: var(--input-line-height) !important; + box-shadow: none !important; + border: none !important; + } + } + + [aria-readonly='true'] { + color: var-get($theme, 'cell-disabled-color'); + + igx-icon { + color: var-get($theme, 'cell-disabled-color'); + } + } + } + + @include e(td, $mods: (editing, invalid)) { + &::after { + box-shadow: inset 0 0 0 #{$cell-editing-outline-width} + color($color: 'error') !important; + } + } + + // Row editing state - active edit mode on a row + @include e(tr, $m: edit) { + border-bottom: rem(1px) solid var-get($theme, 'edit-mode-color'); + position: relative; + + // Top border indicator + &::after { + content: ''; + position: absolute; + height: rem(1px); + width: 100%; + top: rem(-1px); + inset-inline-start: 0; + background: var-get($theme, 'edit-mode-color'); + } + } + + // MRL (Multi-row layout) specific edit row adjustments + @include e(tr, $mods: (mrl, edit)) { + &:first-of-type::after { + top: 0; + z-index: 5; + } + } + + // Multi-row layout row + @include e(tr, $m: mrl) { + border-bottom-color: transparent; + } + + // Dragging row state + @include e(tr, $m: drag) { + opacity: 0.5; + } + + // Ghost row during drag operation + @include e(tr, $m: ghost) { + background: var-get($theme, 'row-ghost-background'); + color: var-get($theme, 'row-drag-color'); + z-index: 10002; + } + + // Group row + @include e(tr, $m: group) { + position: relative; + background: var-get($theme, 'header-background') !important; + } + + // Inner row wrapper + @include e(tr, $m: inner) { + display: flex; + background: inherit; + } + + // Header row + @include e(tr, $m: header) { + display: flex; + align-items: center; + + igx-icon { + --component-size: 3; + } + } + + // Row add animation + @include e(tr, $m: add-animate) { + animation: scale-in-ver-center 0.2s + cubic-bezier(0.25, 0.46, 0.45, 0.94); + } + + // Edited row indicator - shows row has been modified + @include e(tr, $m: edited) { + &::before { + content: ''; + position: absolute; + width: rem(2px); + height: 100%; + z-index: 10000; + background: var-get($theme, 'edited-row-indicator'); + } + } + + // Row editing overlay outlet container + @include e(row-editing-outlet) { + z-index: 10000; + position: absolute; + } + + // Row container + @include e(tr-container) { + overflow: auto; + width: 100%; + border-bottom: rem(1px) solid var-get($theme, 'row-border-color'); + } + + // Active row container + @include e(tr-container, $m: active) { + box-shadow: inset 0 0 0 rem(1px) + var-get($theme, 'cell-active-border-color'); + } + + // Action row (for row actions like edit, delete buttons) + @include e(tr-action) { + &:last-of-type { + border-inline-end: $grid-header-border; + min-height: var(--cell-height); + } + } + + // Tree grid grouping indicator (expand/collapse icon) + @include e(tree-grouping-indicator) { + display: flex; + align-items: center; + justify-content: center; + user-select: none; + outline-style: none; + margin-inline-end: rem(8px); + cursor: pointer; + color: var-get($theme, 'expand-icon-color'); + + &:hover { + color: var-get($theme, 'expand-icon-hover-color'); + } + + [dir='rtl'] & { + transform: scaleX(-1); + } + + igx-icon { + --component-size: 3; + } + } + + // Tree grid loading indicator + @include e(tree-loading-indicator) { + width: rem(24px); + height: rem(24px); + margin-inline-end: rem(8px); + } + + // Row indentation for tree/grouping + @include e(row-indentation) { + position: relative; + display: flex; + justify-content: center; + align-items: center; + padding-inline: pad-inline(rem(12px), rem(16px), rem(18px)); + border-inline-end: rem(1px) solid + var-get($theme, 'header-border-color'); + background: inherit; + z-index: 1; + background-clip: border-box; + + &::after { + content: ''; + position: absolute; + width: 100%; + height: rem(1px); + } + } + + // Hierarchical grid expander (expand/collapse child grids) + @include e(hierarchical-expander) { + user-select: none; + background: inherit; + padding-inline: pad-inline(var(--_hierarchical-indent-small), var(--_hierarchical-indent-medium), var(--_hierarchical-indent-large)); + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + z-index: 3; + color: var-get($theme, 'expand-icon-color'); + background-clip: border-box; + + &:focus { + outline: none; + + igx-icon { + color: var-get($theme, 'expand-icon-hover-color'); + } + } + + &:hover { + igx-icon { + color: var-get($theme, 'expand-icon-hover-color'); + } + } + + igx-icon { + --component-size: 3; + color: var-get($theme, 'expand-icon-color'); + } + + [dir='rtl'] & { + transform: scaleX(-1); + } + } + + // Empty hierarchical expander (no children) + @include e(hierarchical-expander, $m: empty) { + cursor: default; + pointer-events: none; + padding-inline: pad-inline(var(--_hierarchical-indent-small), var(--_hierarchical-indent-medium), var(--_hierarchical-indent-large)); + + } + + // Hierarchical expander in header + @include e(hierarchical-expander, $m: header) { + background: inherit; + border-inline-end: rem(1px) solid + var-get($theme, 'header-border-color'); + z-index: 3; + background-clip: border-box; + + igx-icon { + display: flex; + align-items: center; + } + } + + // Hierarchical expander pushed to top + @include e(hierarchical-expander, $m: push) { + align-items: flex-start; + + igx-icon { + min-height: var(--header-size); + max-height: var(--header-size); + } + } + + $hierarchical-grid-indent: ( + comfortable: rem(24px), + cosy: rem(16px), + compact: rem(12px) + ); + + // Hierarchical indent spacing + @include e(hierarchical-indent) { + $indent-small: calc(2 * var(--_hierarchical-indent-small) + var(--_hierarchical-action-icon)); + $indent-medium: calc(2 * var(--_hierarchical-indent-medium) + var(--_hierarchical-action-icon)); + $indent-large: calc(2 * var(--_hierarchical-indent-large) + var(--_hierarchical-action-icon)); + + display: flex; + margin-inline-start: pad-inline($indent-small, $indent-medium, $indent-large); + margin-inline-end: pad-inline(var(--_hierarchical-indent-small), var(--_hierarchical-indent-medium), var(--_hierarchical-indent-large)); + margin-block: pad-block(var(--_hierarchical-indent-small), var(--_hierarchical-indent-medium), var(--_hierarchical-indent-large)); + } + + // Hierarchical indent when scrolling + @include e(hierarchical-indent, $m: scroll) { + $indent-scroll-small: calc(var(--_hierarchical-indent-small) + 18px); + $indent-scroll-medium: calc(var(--_hierarchical-indent-medium) + 18px); + $indent-scroll-large: calc(var(--_hierarchical-indent-large) + 18px); + + + margin-inline-end: pad-inline($indent-scroll-small, $indent-scroll-medium, $indent-scroll-large); + } + + // Row indentation levels for tree/grouping (1-10) + @for $i from 1 through 10 { + @include e(row-indentation, $m: level-#{$i}) { + $level-compact: $i * rem(24px); + $level-cosy: $i * rem(32px); + $level-comfortable: $i * rem(36px); + + padding-inline-start: pad-inline( + #{$level-compact}, + #{$level-cosy}, + #{$level-comfortable} + ); + } + } + + // Header indentation for tree/grouping + @include e(header-indentation) { + position: relative; + padding-inline-end: sizable($cell-padding-cosy, $cell-padding-compact, $cell-padding-comfortable); + border-inline-end: $grid-header-border; + background: var-get($theme, 'header-background'); + z-index: 4; + height: 100%; + + igx-icon { + --component-size: 3; + } + } + + // Header indentation without border + @include e(header-indentation, $m: no-border) { + border-inline-end: rem(1px) solid transparent; + } + + // Checkbox padding + @include e(cbx-padding) { + display: flex; + align-items: center; + justify-content: center; + padding-inline: pad-inline(rem(12px), rem(16px), rem(24px)); + } + + // Checkbox selection cell + @include e(cbx-selection) { + display: flex; + justify-content: center; + align-items: center; + background: inherit; + z-index: 4; + background-clip: border-box; + } + + // Checkbox selection pushed to top (for header alignment) + @include e(cbx-selection, $m: push) { + align-items: flex-start; + padding-block-start: pad-block( + calc((rem(32px) - rem(20px)) / 2), + calc((rem(40px) - rem(20px)) / 2), + calc((rem(50px) - rem(20px)) / 2) + ); + } + + // Group row + @include e(group-row) { + background: var-get($theme, 'group-row-background'); + display: flex; + outline-style: none; + border-bottom: rem(1px) solid var-get($theme, 'row-border-color'); + min-height: var(--header-size); + } + + // Active group row + @include e(group-row, $m: active) { + background: var-get($theme, 'group-row-selected-background'); + box-shadow: inset 0 0 0 rem(1px) + var-get($theme, 'cell-active-border-color'); + + &:hover { + background: var-get($theme, 'group-row-selected-background'); + } + } + + // Group content area + @include e(group-content) { + display: flex; + align-items: center; + justify-content: flex-start; + flex: 1 1 auto; + padding-inline-start: sizable(rem(12px), rem(16px), rem(24px)); + min-height: sizable(rem(40px), rem(48px), rem(56px)); + + &:focus { + outline: transparent; + } + } + + // Grouping indicator (expand/collapse for groups) + @include e(grouping-indicator) { + position: relative; + display: flex; + user-select: none; + justify-content: center; + align-items: center; + z-index: 1; + cursor: pointer; + padding-inline-end: rem(12px); + margin-inline-start: sizable(rem(12px), rem(16px), rem(24px)); + min-height: var(--header-size); + + igx-icon { + --component-size: 3; + color: var-get($theme, 'expand-icon-color'); + } + + &:hover, + &:focus { + outline-style: none; + + igx-icon { + color: var-get($theme, 'expand-icon-hover-color'); + } + } + + [dir='rtl'] & { + transform: scaleX(-1); + } + } + + // Group expand button (on row indentation) + @include e(group-expand-btn) { + position: absolute; + cursor: pointer; + user-select: none; + inset-block-start: calc(50% - var(--_expander-icon-width) / 2); + inset-inline-start: var(--_indicator-inline-inset); + + &:hover { + color: var-get($theme, 'expand-icon-hover-color'); + } + } + + // Group expand button pushed to top + @include e(group-expand-btn, $m: push) { + inset-block-start: sizable( + calc((rem(40px) - rem(12px)) / 2), + calc((rem(48px) - rem(12px)) / 2), + calc((rem(56px) - rem(12px)) / 2) + ); + } + + // Group row padding levels (1-10) - for nested groups + @for $i from 1 through 10 { + @include e(group-row, $m: padding-level-#{$i}) { + $indicator-padding-compact: $i * rem(12px); + $indicator-padding-cosy: $i * rem(16px); + $indicator-padding-comfortable: $i * rem(18px); + + .igx-grid__grouping-indicator { + margin-inline-start: sizable( + #{$indicator-padding-compact}, + #{$indicator-padding-cosy}, + #{$indicator-padding-comfortable} + ); + } + } + } + + // Multi-row layout block (MRL) + @include e(mrl-block) { + display: grid !important; + background: inherit; + position: relative; + + .igx-grid__td { + border-inline-end: $grid-header-border; + } + + .igx-grid-th, + .igx-grid__td { + border-block-end: $grid-header-border; + } + } + + // Pivot grid super-compact mode + @include e(pivot, $m: super-compact) { + --ig-size: 1 !important; + } + + // Pivot row + @include e(tr-pivot) { + display: flex; + align-items: center; + background: inherit; + overflow: hidden; + z-index: 3; + height: var(--header-size); + padding-inline: pad-inline(rem(12px), rem(16px), rem(24px)); + padding-block: 0; + background-clip: border-box !important; + border-inline-start: $grid-header-border; + border-bottom: $grid-header-border; + + igx-chips-area { + flex-wrap: nowrap; + width: auto; + + > * { + margin-inline-end: rem(4px); + } + + &:last-child { + margin-inline-end: 0; + } + } + } + + // Pivot filter toggle button + @include e(pivot-filter-toggle) { + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + position: relative; + + > igx-badge { + position: absolute; + top: rem(-4px); + inset-inline-start: 60%; + width: rem(18px); + min-width: rem(18px); + height: rem(18px); + font-size: rem(10px); + pointer-events: none; + user-select: none; + } + } + + // Pivot empty chip area placeholder + @include e(pivot-empty-chip-area) { + line-height: normal; + font-size: rem(14px); + margin-inline-end: 0 !important; + } + + // Pivot row area + @include e(tr-pivot, $m: row-area) { + height: auto !important; + align-items: flex-end; + padding-bottom: pad-block(rem(8px), rem(12px), rem(16px)); + border-inline-start: 0; + border-bottom: 0; + } + + // Pivot filter container + @include e(tr-pivot, $m: filter-container) { + display: flex; + flex-direction: column; + } + + // Pivot chip drop indicator + @include e(tr-pivot, $m: chip_drop_indicator) { + width: rem(2px); + background: var-get($theme, 'resize-line-color'); + visibility: hidden; + } + + // Pivot drop row area + @include e(tr-pivot, $m: drop-row-area) { + flex-grow: 1; + } + + // Pivot filter row + @include e(tr-pivot, $m: filter) { + height: var(--header-size); + border-inline-start: 0; + border-inline-end: 0; + border-bottom: $grid-header-border; + } + + // Pivot group + @include e(tr-pivot-group) { + flex: 1; + } + + // Pivot header row + @include e(tr-header-row) { + &:has(igx-pivot-row-dimension-header-group) { + border-inline-end: $grid-header-border; + } + + igx-pivot-row-dimension-header-group { + igx-pivot-row-dimension-header { + align-items: center; + } + } + } + + // Pivot column dimension leaf + @include e(tr-pivot, $m: columnDimensionLeaf) { + box-shadow: none; + + igx-grid-header { + border: none; + } + } + + // Pivot column multi-row span + @include e(tr-pivot, $m: columnMultiRowSpan) { + igx-grid-header { + > * { + visibility: hidden; + } + } + } + + // Pivot tbody MRL dimension + @include e(tbody-pivot-mrl-dimension) { + .igx-grid-th { + border-bottom: none; + } + } + + // Pivot toggle icons + @include e(tr-pivot-toggle-icons) { + display: inline-flex !important; + } + + // ============================================================================ + // Drag & Drop Elements + // ============================================================================ + + // Drag indicator for reordering columns/rows + @include e(drag-indicator) { + display: flex; + align-items: center; + justify-content: center; + padding-inline: pad-inline(var(--_hierarchical-indent-small), var(--_hierarchical-indent-medium), var(--_hierarchical-indent-large)); + min-height: var(--cell-height); + padding-block: 0; + flex: 0 0 auto; + background: inherit; + z-index: 4; + cursor: move; + border-inline-end: rem(1px) solid transparent; + background-clip: border-box; + + igx-icon { + --component-size: 3; + } + } + + // Drag indicator in header + @include e(drag-indicator, $m: header) { + border-inline-end: $grid-header-border; + } + + // Drag indicator off/disabled state + @include e(drag-indicator, $m: off) { + color: var-get($theme, 'row-drag-color'); + } + + // Ghost image shown while dragging + @include e(drag-ghost-image) { + position: absolute !important; + align-items: center !important; + background: var-get($theme, 'ghost-header-background') !important; + color: var-get($theme, 'ghost-header-text-color') !important; + border-inline-end: transparent !important; + min-width: rem(168px); + max-width: rem(320px); + height: var(--header-size); + min-height: var(--header-size); + padding-inline: pad-inline(rem(24px), rem(16px), rem(12px)); + top: rem(-10000px); + inset-inline-start: rem(-10000px); + border: none; + box-shadow: var(--drag-shadow); + overflow: hidden; + z-index: 20; + + .igx-grid-th__title { + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; + flex: 1 0 0; + text-align: end; + color: var-get($theme, 'ghost-header-text-color') !important; + } + + .igx-grid-th__icons { + display: none; + } + + .igx-grid-thead__title { + border: none; + color: var-get($theme, 'ghost-header-text-color') !important; + background: transparent !important; + } + } + + // Ghost image icon + @include e(drag-ghost-image-icon) { + color: var-get($theme, 'ghost-header-icon-color'); + margin-inline-end: rem(12px); + } + + // Ghost image icon group (multiple columns) + @include e(drag-ghost-image-icon-group) { + color: var-get($theme, 'ghost-header-icon-color'); + padding: rem(24px); + padding-inline-end: 0; + margin-inline-end: rem(8px); + } + + // Drag column header (being dragged) + @include e(drag-col-header) { + background: var-get($theme, 'header-background'); + + .igx-grid-thead__title > *, + .igx-grid-th > * { + opacity: 0.4; + } + } + + // Scroll on drag indicators + @include e(scroll-on-drag-left) { + position: absolute; + width: rem(15px); + top: 0; + height: 100%; + z-index: 25; + inset-inline-start: 0; + } + + @include e(scroll-on-drag-right) { + position: absolute; + width: rem(15px); + top: 0; + height: 100%; + z-index: 25; + inset-inline-end: 0; + } + + @include e(scroll-on-drag-pinned) { + position: absolute; + width: rem(15px); + height: 100%; + top: 0; + z-index: 25; + } + + // ============================================================================ + // Filtering Elements + // ============================================================================ + + // Filtering row + @include e(filtering-row) { + // Container styles + display: flex; + flex-flow: row nowrap; + align-items: center; + justify-content: space-between; + + // Position styles + position: absolute; + inset-inline-start: 0; + bottom: 0; + z-index: 3; + grid-row: 2; + + // size & spacing styles + width: 100%; + height: var(--cell-height); + padding-inline: pad-inline($cell-padding-compact, $cell-padding-cosy, $cell-padding-comfortable); + + // Color styles + color: var-get($theme, 'filtering-row-text-color'); + background: var-get($theme, 'filtering-row-background'); + border-bottom: rem(1px) solid var-get($theme, 'header-border-color'); + + // Compound components overrides + igx-input-group { + // TODO USE FOR INDIGO + //--size: calc(sizable(rem(32px), rem(40px), rem(48px)) - #{rem(8px)}); + + --size: calc(var(--cell-height) - #{rem(8px)}) !important; + + width: 100% !important; + max-width: rem(200px) !important; + min-width: rem(140px) !important; + border: rem(1px) solid color($color: 'gray', $variant: 300) !important; + + .igx-input-group__bundle, + .igx-input-group__bundle-start, + .igx-input-group__bundle-end, + igx-prefix, + igx-suffix { + align-items: center; + background: transparent !important; + border-radius: 0 !important; + + /* stylelint-disable-next-line */ + &:hover { + background: transparent !important; + } + } + + igx-prefix, + igx-suffix { + height: 100% !important; + padding: 0 sizable(rem(4px), rem(6px), rem(8px)) !important; + } + + .igx-input-group__input { + font-size: sizable(rem(12px), rem(14px), rem(16px)) !important; + padding-inline-start: 0 !important; + padding-block: 0 !important; + height: 100% !important; + } + + .igx-input-group__bundle, + .igx-input-group__bundle-start, + .igx-input-group__bundle-end, + .igx-input-group__input { + border: 0 !important; + + /* stylelint-disable-next-line */ + &:hover { + border: 0 !important; + box-shadow: none !important; + } + } + + .igx-input-group__bundle::after, + .igx-input-group__bundle::before { + display: none !important; + } + + .igx-input-group__bundle-main { + padding-inline-start: 0 !important; + } + + color: var-get($theme, 'filtering-row-text-color') !important; + + &:hover{ + color: var-get($theme, 'filtering-row-text-color') !important; + border-color: color($color: 'primary', $variant: 500) !important; + } + } + + .igx-input-group--focused { + border-color: color($color: 'primary', $variant: 500) !important; + border-width: rem(1px) !important; + + color: var-get($theme, 'filtering-row-text-color'); + + .igx-input-group__bundle, + .igx-input-group__bundle-start, + .igx-input-group__bundle-end, + .igx-input-group__input { + border: 0 !important; + box-shadow: none !important; + } + + .igx-input-group__bundle-main, + .igx-input-group__bundle-start, + .igx-input-group__bundle-end { + margin: 0 !important; + } + + .igx-input-group__bundle, + .igx-input-group__bundle-start, + .igx-input-group__bundle-end, + igx-prefix, + igx-suffix { + background: transparent !important; + border-radius: 0 !important; + } + } + + .igx-input-group__line { + display: none !important; + } + + igx-prefix:focus { + color: color($color: 'secondary', $variant: 500) !important; + } + + igx-suffix { + igx-icon { + outline-style: none !important; + + &:focus { + color: color($color: 'secondary') !important; + } + + + igx-icon { + margin-inline-start: rem(4px) !important; + } + } + } + + [igxIconButton] { + --ig-size: 1; + color: var-get($theme, 'filtering-row-text-color'); + } + } + + // Filtering row main section + @include e(filtering-row-main) { + display: flex; + flex: 1 1 auto; + align-items: center; + overflow: hidden; + max-width: calc(100% - rem(176px)); + min-width: rem(56px); + + igx-chips-area { + flex-wrap: nowrap; + + // Can't uae gap on the parent because dropdown container is present in the dom + // TODO for indigo use rem(12px) + margin-inline: rem(8px); + gap: rem(4px); + } + } + + // Filtering row editing buttons + @include e(filtering-row-editing-buttons) { + display: flex; + align-items: center; + padding: rem(8px); + gap: rem(4px); + + button { + transition: none; + + &:not([disabled]) igx-icon { + color: var-get($theme, 'sorted-header-icon-color'); + } + } + } + + // Filtering row editing buttons (small) + @include e(filtering-row-editing-buttons, $m: small) { + padding: rem(4px); + + button { + transition: none; + + &:not([disabled]) igx-icon { + color: var-get($theme, 'sorted-header-icon-color'); + } + } + } + + // Filtering row scroll start + @include e(filtering-row-scroll-start) { + position: relative; + margin-inline: rem(8px); + overflow: visible; + + &::after { + display: block; + position: absolute; + width: rem(10px); + content: ''; + inset-block: rem(-2px); + background: linear-gradient( + to right, + var-get($theme, 'filtering-row-background'), + transparent + ); + inset-inline-end: rem(-10px); + } + } + + // Filtering row scroll end + @include e(filtering-row-scroll-end) { + position: relative; + margin-inline: rem(8px); + overflow: visible; + + &::after { + display: block; + position: absolute; + width: rem(10px); + content: ''; + inset-block: rem(-2px); + background: linear-gradient( + to left, + var-get($theme, 'filtering-row-background'), + transparent + ); + inset-inline-start: rem(-10px); + } + } + + // Filtering cell (advanced filtering) + @include e(filtering-cell) { + display: flex; + align-items: center; + padding-inline: pad-inline(rem(12px), rem(16px), rem(24px)); + padding-block: 0; + overflow: hidden; + border-inline-end: rem(1px) solid + var-get($theme, 'header-border-color'); + border-top: rem(1px) solid var-get($theme, 'header-border-color'); + height: var(--header-size); + background-clip: padding-box !important; + + igx-chips-area { + width: 100%; + flex-wrap: nowrap; + + .igx-filtering-chips__connector { + font-size: rem(12px); + text-transform: uppercase; + font-weight: 600; + margin: 0 rem(8px); + overflow: hidden; + } + } + } + + // Filtering cell selected state + @include e(filtering-cell, $m: selected) { + background: var-get($theme, 'header-selected-background'); + + igx-chips-area { + background: inherit; + } + } + + // Filtering cell indicator (badge/icon) + @include e(filtering-cell-indicator) { + display: flex; + align-items: center; + position: relative; + + igx-icon, + .igx-badge { + cursor: pointer; + } + + .igx-badge { + position: absolute; + top: rem(-4px); + inset-inline-start: 60%; + } + } + + // Filtering cell indicator hidden state + @include e(filtering-cell-indicator, $m: hidden) { + .igx-badge, + igx-icon { + display: none; + } + } + + // Filtering dropdown items + @include e(filtering-dropdown-items) { + display: flex; + align-items: center; + } + + // Filtering dropdown text + @include e(filtering-dropdown-text) { + margin-inline-start: rem(16px); + } + + // ============================================================================ + // Summaries Elements + // ============================================================================ + + // Summaries row + @include e(summaries) { + display: flex; + overflow: hidden; + outline-style: none; + background-color: var-get($theme, 'summaries-patch-background'); + + igx-display-container { + overflow: visible !important; + flex: 1; + min-width: 0; + } + } + + // Summaries body (in grid body) + @include e(summaries, $m: body) { + --summaries-patch-background: #{var-get($theme, 'group-row-background')}; + + display: flex; + overflow: hidden; + outline-style: none; + border-bottom: rem(1px) dashed var-get($theme, 'row-border-color'); + background-color: var-get($theme, 'summaries-patch-background'); + + &:last-of-type { + border-bottom: none; + } + + // Override summary component colors when in body context + .igx-grid-summary { + --background-color: inherit !important; + --result-color: hsla( + from color(from var(--background-color) var(--y-contrast)) h + 0 l / 1 + ) !important; + } + + .igx-display-container { + overflow: visible !important; + flex: 1; + min-width: 0; + } + } + + // Summaries patch (fixed area) + @include e(summaries-patch) { + position: relative; + background: inherit; + border-inline-end: rem(1px) solid + var-get($theme, 'header-border-color'); + z-index: 1; + } + + // ============================================================================ + // Outlet Elements + // ============================================================================ + + // Generic outlet for overlays + @include e(outlet) { + --ig-size: var(--grid-size); + z-index: 10002; + position: fixed; + } + + // Loading outlet + @include e(loading-outlet) { + z-index: 10003; + } + + // Row editing outlet + @include e(row-editing-outlet) { + z-index: 10000; + position: absolute; + } + + // Add row snackbar + @include e(addrow-snackbar) { + position: absolute; + bottom: rem(16px); + inset-inline-start: 50%; + transform: translateX(-50%); + z-index: 10003; + } + + // ============================================================================ + // Misc Elements + // ============================================================================ + + // Icon wrapper + @include e(icon) { + display: flex; + align-items: center; + justify-content: center; + } + + // Column name display + @include e(column-name) { + @include ellipsis(); + } + + // Count badge + @include e(count-badge) { + display: flex; + align-items: center; + justify-content: center; + min-width: rem(20px); + height: rem(20px); + padding: rem(2px) rem(6px); + border-radius: rem(10px); + font-size: rem(12px); + background: var-get($theme, 'group-count-background'); + color: var-get($theme, 'group-count-text-color'); + } + + // Text wrapper + @include e(text) { + @include ellipsis(); + } + } + + @include b(igx-grid-grouparea) { + grid-row: 2; + display: flex; + align-items: center; + justify-content: flex-start; + flex-wrap: wrap; + border-bottom: $grid-header-border; + background: var-get($theme, 'grouparea-background'); + color: var-get($theme, 'grouparea-color'); + min-height: var(--grouparea-size); + padding-inline: pad-inline(rem(12px), rem(16px), rem(24px)); + padding-block: 0; + z-index: 2; + height: 100%; + overflow: hidden; + + &:focus { + outline-style: none; + } + + %igx-chip { + margin-block: pad-block(rem(4px), rem(8px), rem(8px)); + } + + @include e(connector) { + display: inline-flex; + justify-content: center; + align-items: center; + margin: 0 rem(4px); + + igx-icon { + width: var(--igx-icon-size, #{rem(16px)}) !important; + height: var(--igx-icon-size, #{rem(16px)}) !important; + font-size: var(--igx-icon-size, #{rem(16px)}) !important; + } + + [dir='rtl'] & { + transform: scaleX(-1); + } + } + } + + @include b(igx-grid-th) { + position: relative; + display: flex; + flex: 1 1 0%; + color: inherit; + text-align: start; + // TODO: Verify if this is needed, commenting out for now + background-clip: padding-box !important; + + // Font size for the cell is different in the ingigo theme -> it simply uses the detail-1 styles for all cells + line-height: $cell-line-height; + flex-flow: row nowrap; + justify-content: space-between; + align-items: flex-end; + min-width: 0; + min-height: var(--header-size); + // The inline padding styles should be different in the indigo theme -> 8px, 12px, 16px + padding-inline: pad-inline(rem(12px), rem(16px), rem(24px)); + padding-block: 0; + font-size: rem(12px); + font-weight: 600; + border-inline-end: $grid-header-border; + overflow: hidden; + transition: color 250ms ease-in-out; + outline-style: none; + + @include e(expander) { + display: flex; + align-items: center; + justify-content: center; + margin-inline-end: rem(8px); + cursor: pointer; + + igx-icon { + // @if $variant == 'indigo' { + // --component-size: 2; + // } + + color: var-get($theme, 'expand-icon-color'); + } + + &:hover { + igx-icon { + color: var-get($theme, 'expand-icon-hover-color'); + } + } + } + + @include e(group-title) { + @include ellipsis(); + + // @if $variant == 'indigo' { + // @include type-style('detail-2', false); + // } + } + + @include e(title) { + @include ellipsis(); + + // TODO: Update the font weight here based on the theme + // $grid-header-weight: map.get(( + // 'material': 600, + // 'fluent': 800, + // 'bootstrap': 700, + // 'indigo': 600, + // ), $variant); + // Indigo should do @include type-style('detail-2', false); instead + + min-width: 3ch; + user-select: none; + cursor: initial; + flex-grow: 1; + line-height: var(--header-size); + transition: color 250ms ease-in-out; + } + + @include e(icons) { + display: inline-flex; + align-items: center; + justify-content: flex-end; + user-select: none; + min-width: rem(30px); /* sort-icon + filter icon width */ + height: var(--header-size); + align-self: flex-end; + + &:empty { + min-width: 0; + } + + .sort-icon { + position: relative; + display: flex; + + // TODO: Adjust in indigo + // @if $variant != 'indigo' { + // igx-icon { + // --size: var(--igx-icon-size, #{rem(15px)}); + // } + // } + + &::after { + content: attr(data-sortIndex); + position: absolute; + top: rem(-5px); + inset-inline-end: rem(-1px); + font-size: rem(10px); + text-align: end; + font-family: sans-serif; + line-height: rem(10px); + } + } + } + + @include e(resize-handle) { + position: absolute; + width: rem(4px); + top: 0; + inset-inline-end: rem(-2px); + height: 100%; + z-index: 2; + } + + @include e(resize-line) { + position: absolute; + cursor: col-resize; + width: rem(4px); + background: var-get($theme, 'resize-line-color'); + z-index: 2; + + &::before, + &::after { + position: absolute; + content: ''; + height: 100%; + width: rem(96px); + } + + &::before { + inset-inline-end: 100%; + } + + &::after { + inset-inline-start: 100%; + } + } + + // Drop indicators for column reordering + @include e(drop-indicator-left) { + position: absolute; + width: rem(1px); + height: 100%; + top: 0; + z-index: 1; + inset-inline-start: rem(-1px); + } + + @include e(drop-indicator-right) { + position: absolute; + width: rem(1px); + height: 100%; + top: 0; + z-index: 1; + inset-inline-end: rem(-1px); + } + + // Active header (selected/focused header cell) + @include m(active) { + &::after { + content: ''; + position: absolute; + inset: 0; + width: 100%; + height: 100%; + box-shadow: inset 0 0 0 rem(1px) var-get($theme, 'cell-active-border-color'); + pointer-events: none; + } + } + + @include mx(active, pinned) { + &::after { + inset-block-start: 0; + inset-inline-start: 0; + width: calc(100% - rem(2px)); + } + } + + @include m(number) { + text-align: end; + // TODO: This was enabled in the old styles but it overrides the flex behavior of the title and icons. Check agains designs. + // justify-content: flex-end; + flex-grow: 1; + + @include e(icons) { + justify-content: flex-start; + order: -1; + + .sort-icon { + order: 1; + } + } + } + + @include m(collapsible) { + justify-content: normal; + } + + @include m(sortable) { + :where(.sort-icon) { + cursor: pointer; + // TODO: This varies by theme if($variant == 'indigo', if($theme-variant == 'light', .75, .85), .7); + opacity: 0.7; + + &:is(:hover) { + opacity: 1; + } + } + } + + // Sorted header (column is currently sorted) + @include m(sorted) { + :where(.sort-icon) { + opacity: 1; + color: var-get($theme, 'sorted-header-icon-color'); + + &:is(:hover, :focus) { + color: var-get($theme, 'sortable-header-icon-hover-color'); + } + } + + // When hovering over the header cell itself, change icon color + // TODO: Questionable why this is here + &:hover :where(.sort-icon) { + color: var-get($theme, 'sortable-header-icon-hover-color'); + } + } + + // Selected header (column selection) + @include m(selectable) { + color: var-get($theme, 'header-selected-text-color'); + background: var-get($theme, 'header-selected-background'); + } + + @include m(selected) { + color: var-get($theme, 'header-selected-text-color'); + background: var-get($theme, 'header-selected-background'); + + :where(.sort-icon::after) { + background: var-get($theme, 'header-selected-background'); + } + } + + // TODO: Verify the class is really named 'filtrable' and not 'filterable' + @include m(filtrable) { + :where(.igx-grid-th__title) { + // TODO: Move to indigo theme overwrites + // @if $variant != 'indigo' { + // opacity: .7; + // } + } + } + + @include m(pinned) { + position: relative; + background: inherit; + } + + // Pinned header (first pinned column) + @include m(pinned-first) { + border-inline-start: var-get($theme, 'pinned-border-width') solid var-get($theme, 'pinned-border-color'); + + &:dir(ltr) { + box-shadow: inset rem(1px) 0 0 0 var-get($theme, 'pinned-border-color'); + } + + &:dir(rtl) { + box-shadow: inset rem(-1px) 0 0 0 var-get($theme, 'pinned-border-color'); + } + } + + // Pinned header (last pinned column) + @include m(pinned-last) { + border-inline-end: var-get($theme, 'pinned-border-width') solid var-get($theme, 'pinned-border-color'); + + &:dir(ltr) { + box-shadow: inset rem(-1px) 0 0 0 var-get($theme, 'pinned-border-color'); + } + + &:dir(rtl) { + box-shadow: inset rem(1px) 0 0 0 var-get($theme, 'pinned-border-color'); + } + } + + @include m(fw) { + flex-grow: 0; + outline-style: none; + + igx-icon { + // TODO: Move to indigo theme overwrites + --component-size: 3; + } + } + + @include m(filtering) { + background: var-get($theme, 'filtering-header-background'); + color: var-get($theme, 'filtering-header-text-color'); + z-index: 3; + } + + @include mx(filtrable, sortable) { + :where(.sort-icon) { + cursor: pointer; + opacity: 0.7; + + // TODO: move this to indigo theme overwrites + // opacity: if($variant == 'indigo', 1, 0.7); + + :is(:hover) { + opacity: 1; + } + } + @extend %igx-grid-th--filtrable-sortable !optional; + } + + // @include mx(selectable, active) { + // box-shadow: inset 0 0 0 rem(1px) + // var-get($theme, 'cell-active-border-color'); + // + // border-inline-end-color: var-get( + // $theme, + // 'cell-active-border-color' + // ); + // border-bottom-color: var-get($theme, 'cell-active-border-color'); + // } + // + // @include mx(selected, active) { + // box-shadow: inset 0 0 0 rem(1px) + // var-get($theme, 'cell-active-border-color'); + // + // border-inline-end-color: var-get( + // $theme, + // 'cell-active-border-color' + // ); + // border-bottom-color: var-get($theme, 'cell-active-border-color'); + // } + + @include mx(selectable, sorted) { + :where(.sort-icon) { + color: var-get($theme, 'header-selected-text-color'); + + :is(:hover, :focus) { + color: var-get($theme, 'header-selected-text-color'); + } + } + } + + @include mx(selected, sorted) { + :where(.sort-icon) { + color: var-get($theme, 'header-selected-text-color'); + + :is(:hover, :focus) { + color: var-get($theme, 'header-selected-text-color'); + } + } + } + + // Active state with compound selectors - use @at-root to prevent nesting + @at-root { + .igx-grid-th__drop-indicator--active { + &.igx-grid-th__drop-indicator-left, + &.igx-grid-th__drop-indicator-right { + border-inline-end: rem(1px) solid + var-get($theme, 'drop-indicator-color'); + } + + &::after, + &::before { + position: absolute; + content: ''; + width: 0; + height: 0; + border-style: solid; + inset-inline-start: rem(-3px); + } + + &::before { + bottom: 0; + border-width: 0 rem(4px) rem(4px); + border-color: transparent transparent + var-get($theme, 'drop-indicator-color'); + } + + &::after { + top: 0; + border-width: rem(4px) rem(4px) 0; + border-color: var-get($theme, 'drop-indicator-color') + transparent transparent; + } + } + } + } + + // NOTE: Consider this done for now + // ============================================================================ + // Grid header (thead) container and structure + @include b(igx-grid-thead) { + // Main thead container + grid-row: 3; + display: flex; + overflow: hidden; + background: var-get($theme, 'header-background'); + color: var-get($theme, 'header-text-color'); + border-block-end: $grid-header-border; + + // TODO: This is completely upside down - doesn't follow BEM at all + // Rows inside thead should not have hover effects + .igx-grid__tr { + position: relative; + background: inherit; + color: inherit; + z-index: 2; + + &:hover { + background: inherit; + color: inherit; + } + } + + // Header wrapper element + @include e(wrapper) { + position: relative; + display: flex; + background: var-get($theme, 'header-background'); + color: var-get($theme, 'header-text-color'); + overflow: hidden; + outline-style: none; + z-index: 2; + + // WARN: BEM not followed here + .igx-grid__tr { + border-bottom: none; + + &:hover { + background: inherit; + color: inherit; + } + } + + .igx-grid__cbx-selection--push { + align-items: flex-start; + padding-block-start: pad-block( + calc((rem(32px) - rem(20px)) / 2), + calc((rem(40px) - rem(20px)) / 2), + calc((rem(50px) - rem(20px)) / 2) + ); + } + + > [aria-activedescendant] { + outline-style: none; + } + + &:focus { + outline: 0; + } + } + + // Pivot wrapper specific styling + @include e(wrapper, $m: pivot) { + border-bottom: none; + } + + // Header title cell + @include e(title) { + @extend %cell-display; + @extend %cell-header; + + flex-basis: auto !important; + align-items: center !important; + border-block-end: $grid-header-border; + border-inline-end: $grid-header-border; + height: var(--header-size); + } + + // Header group (contains multiple columns) + @include e(group) { + display: flex; + flex-flow: row nowrap; + } + + // Header subgroup (nested column headers) + @include e(subgroup) { + position: relative; + + &::after { + width: calc(100% - var-get($theme, 'header-border-width')); + } + + &:not(:last-of-type) { + &::after { + height: calc(100% - var-get($theme, 'header-border-width')); + } + } + + &:last-of-type { + .igx-grid-th { + border-block-end: none; + } + } + } + + // Header item (column header wrapper) + @include e(item) { + display: flex; + flex-flow: column nowrap; + position: relative; + + :where(.igx-grid-th, .igx-grid-thead__group) { + flex: 1 1 auto; + } + + :where(.igx-grid-thead__title) { + flex: 0 0 auto; + } + } + + // Scrollbar thumb for header + @include e(thumb) { + background: var-get($theme, 'header-background'); + border-inline-start: rem(1px) solid + var-get($theme, 'header-border-color'); + } + + // Pivot grid modifier + @include m(pivot) { + display: flex; + + :where(.igx-grid-thead--virtualizationWrapper) { + border-inline-start: $grid-header-border; + } + } + + // Virtualization wrapper + @include m(virtualizationWrapper) { + height: 100%; + } + + // Virtualization container + @include m(virtualizationContainer) { + overflow: visible; + height: 100%; + } + } + + + @include b(igx-drop-area) { + display: flex; + align-items: center; + justify-content: flex-start; + min-width: rem(80px); + height: sizable(rem(24px), rem(24px), rem(32px)); + + // TODO Move this in indigo + //@if $variant != 'indigo' { + // padding-inline: pad-inline( + // map.get($grid-cell-padding-inline, 'compact'), + // map.get($grid-cell-padding-inline, 'cosy'), + // map.get($grid-cell-padding-inline, 'comfortable') + // ); + //} + + padding-block: 0; + padding-inline: pad-inline(rem(8px), rem(12px), rem(16px)); + flex: 1 0 0%; + background: var-get($theme, 'drop-area-background'); + border-radius: var-get($theme, 'drop-area-border-radius'); + + &:hover { + background: var-get($theme, 'drop-area-on-drop-background'); + } + + @include e(icon) { + color: var-get($theme, 'drop-area-icon-color'); + width: rem(16px); + height: rem(16px); + font-size: rem(16px); + margin-inline-end: rem(8px); + } + + @include e(text) { + @include ellipsis(); + color: var-get($theme, 'drop-area-text-color'); + font-size: rem(13px); + } + } + + // ============================================================================ + // NOTE: Context-Specific Nested Rules + // These rules handle nested contexts that don't fit cleanly into the BEM model + // ============================================================================ + // Thead context - elements styled differently when inside thead + .igx-grid-thead { + .igx-grid__header-indentation { + igx-icon { + --component-size: 3; + } + } + + .igx-grid__drag-indicator { + cursor: default; + } + + // MRL (Multi-Row Layout) specific thead styles + .igx-grid__tr--mrl { + .igx-grid__hierarchical-expander--header, + .igx-grid__hierarchical-expander, + .igx-grid__hierarchical-expander--empty, + .igx-grid__header-indentation, + .igx-grid__row-indentation, + .igx-grid__cbx-selection { + border-bottom: var(--header-border-width) + var(--header-border-style) var(--header-border-color); + } + } + + &:focus-visible { + outline-color: transparent; + } + } + + //MRL block context - multi-row layout grid structure + .igx-grid__mrl-block { + .igx-grid-thead__item { + display: flex; + } + + .igx-grid-thead__title { + border-inline-end: 0; + border-bottom: 0; + } + } + + //// MRL row context - rows in multi-row layout + .igx-grid__tr--mrl { + .igx-grid__cbx-selection, + .igx-grid__hierarchical-expander, + .igx-grid__hierarchical-expander--empty, + .igx-grid__row-indentation, + .igx-grid__drag-indicator { + border-bottom: rem(1px) solid var(--row-border-color); + } + } + + // Grid checkbox styles + .igx-grid { + .igx-checkbox { + min-width: rem(20px); + + .igx-checkbox__composite-wrapper { + width: var(--cbx-size, #{rem(20px)}); + height: var(--cbx-size, #{rem(20px)}); + padding: 0 !important; + } + + .igx-checkbox__label { + margin-inline-start: rem(12px); + } + + .igx-checkbox__label--before { + margin-inline-end: rem(12px); + } + + .igx-checkbox__label:empty, + .igx-checkbox__label--before:empty { + padding: 0; + margin: 0; + } + } + } + + @for $i from 1 through 10 { + $level--comfortable: calc(#{$i * $cell-padding-comfortable} + var(--_expander-icon-width)); + $level--cosy: calc(#{$i * $cell-padding-cosy} + var(--_expander-icon-width)); + $level--compact: calc(#{$i * $cell-padding-compact} + var(--_expander-icon-width)); + + .igx-grid__row-indentation--level-#{$i} { + --_indicator-inline-inset: #{sizable( + $cell-padding-compact, + $cell-padding-cosy, + $cell-padding-comfortable + )}; + padding-inline-start: pad-inline($level--compact, $level--cosy, $level--comfortable); + } + + $indicator-padding--comfortable: #{$i * $cell-padding-comfortable}; + $indicator-padding--cosy: #{$i * $cell-padding-cosy}; + $indicator-padding--compact: #{$i * $cell-padding-compact}; + + .igx-grid__group-row--padding-level-#{$i} { + %igx-grid__grouping-indicator { + padding-inline-start: pad-inline($indicator-padding--compact, $indicator-padding--cosy, $indicator-padding--comfortable); + } + } + } +} diff --git a/projects/igniteui-angular/grids/themes/dark/_bootstrap.scss b/projects/igniteui-angular/grids/themes/dark/_bootstrap.scss new file mode 100644 index 00000000000..8dc5daffcb8 --- /dev/null +++ b/projects/igniteui-angular/grids/themes/dark/_bootstrap.scss @@ -0,0 +1,12 @@ +@use 'igniteui-theming/sass/bem' as *; +@use 'igniteui-theming/sass/color/functions' as *; +@use 'styles/themes/standalone' as *; + + +@include themed-block(igx-grid, bootstrap, dark) { + @include e(td, $m: bool) { + .igx-icon--error { + color: color($color: 'gray', $variant: 500); + } + } +} diff --git a/projects/igniteui-angular/grids/themes/dark/_fluent.scss b/projects/igniteui-angular/grids/themes/dark/_fluent.scss new file mode 100644 index 00000000000..96fe2f7df81 --- /dev/null +++ b/projects/igniteui-angular/grids/themes/dark/_fluent.scss @@ -0,0 +1,12 @@ +@use 'igniteui-theming/sass/bem' as *; +@use 'igniteui-theming/sass/color/functions' as *; +@use 'styles/themes/standalone' as *; + + +@include themed-block(igx-grid, fluent, dark) { + @include e(td, $m: bool) { + .igx-icon--error { + color: color($color: 'gray', $variant: 500); + } + } +} diff --git a/projects/igniteui-angular/grids/themes/dark/_index.scss b/projects/igniteui-angular/grids/themes/dark/_index.scss new file mode 100644 index 00000000000..9ae7002a6c2 --- /dev/null +++ b/projects/igniteui-angular/grids/themes/dark/_index.scss @@ -0,0 +1,7 @@ +@use 'sass:meta'; +@use 'tokens'; +@use 'styles/themes/standalone' as *; +@use 'indigo'; + +$tokens: meta.module-variables(tokens); +@include themes(igx-grid, $tokens, dark); diff --git a/projects/igniteui-angular/grids/themes/dark/_indigo.scss b/projects/igniteui-angular/grids/themes/dark/_indigo.scss new file mode 100644 index 00000000000..6728a83952f --- /dev/null +++ b/projects/igniteui-angular/grids/themes/dark/_indigo.scss @@ -0,0 +1,55 @@ +@use 'igniteui-theming/sass/bem' as *; +@use 'igniteui-theming/sass/color/functions' as *; +@use 'styles/themes/standalone' as *; + +@include themed-block(igx-grid-th, indigo, dark) { + @include m(sortable) { + @include e(icons) { + .sort-icon { + opacity: 0.85; + + &:hover { + opacity: 1; + } + } + } + } +} + +@include themed-block(igx-grid, indigo, dark) { + @include e(td, $m: bool) { + .igx-icon--error { + color: color($color: 'gray', $variant: 500); + } + } + + @include e(pivot-empty-chip-area) { + color: contrast-color($color: 'gray', $variant: 50, $opacity: .6); + } + + @include e(tr-header-row) { + igx-pivot-row-dimension-header-group { + igx-icon { + opacity: 0.85; + + &:hover { + opacity: 1; + cursor: pointer; + } + } + } + } +} + +@include themed-block(igx-grid-thead, indigo, dark) { + @include e(title) { + igx-icon { + opacity: 0.85; + + &:hover { + opacity: 1; + cursor: pointer; + } + } + } +} diff --git a/projects/igniteui-angular/grids/themes/dark/_material.scss b/projects/igniteui-angular/grids/themes/dark/_material.scss new file mode 100644 index 00000000000..96e0e098acb --- /dev/null +++ b/projects/igniteui-angular/grids/themes/dark/_material.scss @@ -0,0 +1,12 @@ +@use 'igniteui-theming/sass/bem' as *; +@use 'igniteui-theming/sass/color/functions' as *; +@use 'styles/themes/standalone' as *; + + +@include themed-block(igx-grid, material, dark) { + @include e(td, $m: bool) { + .igx-icon--error { + color: color($color: 'gray', $variant: 500); + } + } +} diff --git a/projects/igniteui-angular/grids/themes/dark/_tokens.scss b/projects/igniteui-angular/grids/themes/dark/_tokens.scss new file mode 100644 index 00000000000..d371999179e --- /dev/null +++ b/projects/igniteui-angular/grids/themes/dark/_tokens.scss @@ -0,0 +1,7 @@ +@use 'igniteui-theming/sass/themes' as *; +@use 'igniteui-theming/sass/themes/schemas/components/dark/grid' as *; + +$material: digest-schema($dark-material-grid); +$bootstrap: digest-schema($dark-bootstrap-grid); +$fluent: digest-schema($dark-fluent-grid); +$indigo: digest-schema($dark-indigo-grid); diff --git a/projects/igniteui-angular/grids/themes/light/_index.scss b/projects/igniteui-angular/grids/themes/light/_index.scss new file mode 100644 index 00000000000..97805be5c83 --- /dev/null +++ b/projects/igniteui-angular/grids/themes/light/_index.scss @@ -0,0 +1,7 @@ +@use 'sass:meta'; +@use 'tokens'; +@use 'styles/themes/standalone' as *; +@use 'indigo'; + +$tokens: meta.module-variables(tokens); +@include themes(igx-grid, $tokens, light); diff --git a/projects/igniteui-angular/grids/themes/light/_indigo.scss b/projects/igniteui-angular/grids/themes/light/_indigo.scss new file mode 100644 index 00000000000..d42273e780e --- /dev/null +++ b/projects/igniteui-angular/grids/themes/light/_indigo.scss @@ -0,0 +1,49 @@ +@use 'igniteui-theming/sass/bem' as *; +@use 'igniteui-theming/sass/color/functions' as *; +@use 'styles/themes/standalone' as *; + +@include themed-block(igx-grid-th, indigo, light) { + @include m(sortable) { + @include e(icons) { + .sort-icon { + opacity: 0.75; + + &:hover { + opacity: 1; + } + } + } + } +} + +@include themed-block(igx-grid, indigo, light) { + @include e(pivot-empty-chip-area) { + color: color($color: 'gray', $variant: 600); + } + + @include e(tr-header-row) { + igx-pivot-row-dimension-header-group { + igx-icon { + opacity: 0.75; + + &:hover { + opacity: 1; + cursor: pointer; + } + } + } + } +} + +@include themed-block(igx-grid-thead, indigo, light) { + @include e(title) { + igx-icon { + opacity: 0.75; + + &:hover { + opacity: 1; + cursor: pointer; + } + } + } +} diff --git a/projects/igniteui-angular/grids/themes/light/_tokens.scss b/projects/igniteui-angular/grids/themes/light/_tokens.scss new file mode 100644 index 00000000000..2fd4a5718e5 --- /dev/null +++ b/projects/igniteui-angular/grids/themes/light/_tokens.scss @@ -0,0 +1,8 @@ +@use 'igniteui-theming/sass/themes' as *; +@use 'igniteui-theming/sass/themes/schemas/components/light/grid' as *; + +$base: digest-schema($light-grid); +$material: digest-schema($material-grid); +$bootstrap: digest-schema($bootstrap-grid); +$fluent: digest-schema($fluent-grid); +$indigo: digest-schema($indigo-grid); diff --git a/projects/igniteui-angular/grids/themes/shared/_bootstrap.scss b/projects/igniteui-angular/grids/themes/shared/_bootstrap.scss new file mode 100644 index 00000000000..2f63d7221a3 --- /dev/null +++ b/projects/igniteui-angular/grids/themes/shared/_bootstrap.scss @@ -0,0 +1,15 @@ +@use 'igniteui-theming/sass/bem' as *; +@use 'igniteui-theming/sass/typography/functions' as *; +@use 'styles/themes/standalone' as *; + +@include themed-block(igx-grid-th, bootstrap) { + @include e(title) { + font-weight: 700; + } + + @include e(icons) { + .sort-icon igx-icon { + --size: var(--igx-icon-size, #{rem(15px)}); + } + } +} diff --git a/projects/igniteui-angular/grids/themes/shared/_fluent.scss b/projects/igniteui-angular/grids/themes/shared/_fluent.scss new file mode 100644 index 00000000000..4b4b30882ab --- /dev/null +++ b/projects/igniteui-angular/grids/themes/shared/_fluent.scss @@ -0,0 +1,15 @@ +@use 'igniteui-theming/sass/bem' as *; +@use 'igniteui-theming/sass/typography/functions' as *; +@use 'styles/themes/standalone' as *; + +@include themed-block(igx-grid-th, fluent) { + @include e(title) { + font-weight: 800; + } + + @include e(icons) { + .sort-icon igx-icon { + --size: var(--igx-icon-size, #{rem(15px)}); + } + } +} diff --git a/projects/igniteui-angular/grids/themes/shared/_index.scss b/projects/igniteui-angular/grids/themes/shared/_index.scss new file mode 100644 index 00000000000..0ca60c75786 --- /dev/null +++ b/projects/igniteui-angular/grids/themes/shared/_index.scss @@ -0,0 +1,4 @@ +@forward 'material'; +@forward 'bootstrap'; +@forward 'fluent'; +@forward 'indigo'; diff --git a/projects/igniteui-angular/grids/themes/shared/_indigo.scss b/projects/igniteui-angular/grids/themes/shared/_indigo.scss new file mode 100644 index 00000000000..c5b7ab09371 --- /dev/null +++ b/projects/igniteui-angular/grids/themes/shared/_indigo.scss @@ -0,0 +1,93 @@ +@use 'igniteui-theming/sass/bem' as *; +@use 'igniteui-theming/sass/typography/functions' as *; +@use 'igniteui-theming/sass/color/functions' as *; +@use 'styles/themes/standalone' as *; + +@include themed-block(igx-grid-th, indigo) { + @include e(title) { + font-weight: 600; + } + + @include e(icons) { + .sort-icon igx-icon { + --component-size: 2; + } + } +} + +@include themed-block(igx-grid, indigo) { + --cell-height: #{sizable(rem(32px), rem(40px), rem(48px))}; + --header-size: #{sizable(rem(32px), rem(40px), rem(48px))}; + --grouparea-size: #{sizable(rem(40px), rem(48px), rem(55px))}; + --indicator-icon-width: #{rem(16px)}; + --_hierarchical-action-icon: #{rem(16px)}; + + + @include e(td, $m: bool) { + --component-size: 2; + + .igx-icon--error { + color: color($color: 'gray', $variant: 500); + } + } + + @include e(tr, $m: edited) { + &::before { + width: rem(4px); + } + } + + @include e(tr, $m: header) { + igx-icon { + --component-size: 2; + } + } + + @include e(tr-action) { + &:last-of-type { + min-height: sizable(rem(32px), rem(40px), rem(48px)); + } + } + + @include e(tree-grouping-indicator) { + margin-inline-end: rem(4px); + + igx-icon { + --component-size: 2; + } + } + + @include e(hierarchical-expander) { + igx-icon { + --component-size: 2; + } + } + + @include e(header-indentation) { + igx-icon { + --component-size: 2; + } + } + + @include e(group-content) { + padding-inline-start: 0; + } + + @include e(grouping-indicator) { + padding-inline-end: rem(16px); + + igx-icon { + --component-size: 2; + } + } + + @include e(tr-pivot) { + padding-inline: pad-inline(rem(8px), rem(12px), rem(16px)); + } +} + +@include themed-block(igx-grid-thead, indigo) { + @include e(title) { + padding-inline: pad-inline(rem(8px), rem(12px), rem(16px)); + } +} diff --git a/projects/igniteui-angular/grids/themes/shared/_material.scss b/projects/igniteui-angular/grids/themes/shared/_material.scss new file mode 100644 index 00000000000..289a5503433 --- /dev/null +++ b/projects/igniteui-angular/grids/themes/shared/_material.scss @@ -0,0 +1,15 @@ +@use 'igniteui-theming/sass/bem' as *; +@use 'igniteui-theming/sass/typography/functions' as *; +@use 'styles/themes/standalone' as *; + +@include themed-block(igx-grid-th, material) { + @include e(title) { + font-weight: 600; + } + + @include e(icons) { + .sort-icon igx-icon { + --size: var(--igx-icon-size, #{rem(15px)}); + } + } +} diff --git a/projects/igniteui-angular/grids/themes/test/igniteui-angular-dark.css b/projects/igniteui-angular/grids/themes/test/igniteui-angular-dark.css new file mode 100644 index 00000000000..f1b6f884e5b --- /dev/null +++ b/projects/igniteui-angular/grids/themes/test/igniteui-angular-dark.css @@ -0,0 +1,3 @@ +.igx-display-container{display:inherit;flex-flow:inherit;position:relative;width:100%;overflow:hidden;flex-shrink:0}.igx-display-container--inactive{width:100%}.igx-drag{touch-action:none}.igx-drag--select-disabled{-webkit-user-select:none;-moz-user-select:none;user-select:none}.igx-drag__handle{-webkit-user-select:none;-moz-user-select:none;user-select:none}.igx-vhelper--vertical,.igx-vhelper--horizontal{display:block;overflow:auto;z-index:10001}.igx-vhelper--vertical{position:absolute;top:0;inset-inline-end:0;width:var(--vhelper-scrollbar-size)}.igx-vhelper--horizontal{width:100%}.igx-vhelper--vertical .igx-vhelper__placeholder-content{width:1px}.igx-vhelper--horizontal .igx-vhelper__placeholder-content{height:1px}[hidden]{display:none !important}[class^=igx-],[class^=igx-] *,[class^=igx-] *::before,[class^=igx-] *::after,[class^=ig-],[class^=ig-] *,[class^=ig-] *::before,[class^=ig-] *::after{box-sizing:border-box}@property --ig-spacing{syntax:" | ";initial-value:1;inherits:true}:root{--ig-spacing-inline-small: var(--ig-spacing-inline, var(--ig-spacing-small));--ig-spacing-inline-medium: var(--ig-spacing-inline, var(--ig-spacing-medium));--ig-spacing-inline-large: var(--ig-spacing-inline, var(--ig-spacing-large));--ig-spacing-block-small: var(--ig-spacing-block, var(--ig-spacing-small));--ig-spacing-block-medium: var(--ig-spacing-block, var(--ig-spacing-medium));--ig-spacing-block-large: var(--ig-spacing-block, var(--ig-spacing-large))}@property --_transition-delay{syntax:"