diff --git a/.browserslistrc b/.browserslistrc index 67e6abf0eba..4d941627efc 100644 --- a/.browserslistrc +++ b/.browserslistrc @@ -9,4 +9,4 @@ last 2 versions Firefox ESR not dead -IE 11 # For IE 9-11 support, remove 'not'. + diff --git a/.eslintrc.json b/.eslintrc.json index bf720a134b5..5da81988352 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -16,8 +16,7 @@ "createDefaultProgram": true }, "extends": [ - "plugin:@angular-eslint/ng-cli-compat", - "plugin:@angular-eslint/ng-cli-compat--formatting-add-on", + "plugin:@angular-eslint/recommended", "plugin:@angular-eslint/template/process-inline-templates" ], "rules": { @@ -36,7 +35,7 @@ "@typescript-eslint/consistent-type-definitions": "error", "@typescript-eslint/dot-notation": "off", "@typescript-eslint/explicit-member-accessibility": [ - "warn", + "error", { "accessibility": "explicit", "overrides": { diff --git a/.github/workflows/nodejs.yml b/.github/workflows/nodejs.yml index ef34990a930..65ab93af60b 100644 --- a/.github/workflows/nodejs.yml +++ b/.github/workflows/nodejs.yml @@ -16,7 +16,7 @@ jobs: strategy: matrix: - node-version: [12.x, 14.x, 16.x] + node-version: [14.x, 16.x] steps: - name: Checkout @@ -47,16 +47,9 @@ jobs: - name: Build i18n & validate output run: | npm run build:i18n - npm run lint:i18n:dist - - name: Install coverage combiner - istanbul - if: github.repository == 'IgniteUI/igniteui-angular' && matrix.node-version == '14.x' - run: npm install -g istanbul - - name: Combine scripts - if: github.repository == 'IgniteUI/igniteui-angular' && matrix.node-version == '14.x' - run: istanbul report --dir coverage --include coverage/**/coverage-final.json lcov + npm run test:i18n:dist - name: Publish to coveralls.io if: github.repository == 'IgniteUI/igniteui-angular' && matrix.node-version == '14.x' uses: coverallsapp/github-action@v1.1.2 with: github-token: ${{ github.token }} - diff --git a/.github/workflows/npm-publish.yml b/.github/workflows/npm-publish.yml index 4197e4f20a4..b71b30df999 100644 --- a/.github/workflows/npm-publish.yml +++ b/.github/workflows/npm-publish.yml @@ -11,7 +11,7 @@ jobs: - uses: actions/checkout@v2 - uses: actions/setup-node@v2 with: - node-version: 12 + node-version: 14 cache: 'npm' registry-url: 'https://registry.npmjs.org' - run: echo "VERSION=${GITHUB_REF/refs\/tags\//}" >> $GITHUB_ENV diff --git a/.gitignore b/.gitignore index 0f279d0a715..ab235558a89 100644 --- a/.gitignore +++ b/.gitignore @@ -6,6 +6,8 @@ /tmp /out-tsc +.angular/* + # dependencies /node_modules @@ -27,6 +29,7 @@ !.vscode/extensions.json # misc +/.angular/cache /.sass-cache /connect.lock /coverage diff --git a/CHANGELOG.md b/CHANGELOG.md index 45ef16e532c..cddb776e319 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -55,6 +55,11 @@ All notable changes for each version of this project will be documented in this ### General +- `IE discontinued support` **Breaking Change** [details](https://angular.io/guide/browser-support) + - `web-animations-js` is removed as Peer Dependency. + - Removed IE from `.browserslistrc` + - Removed IE related `polyfills`, like Importing ES7 polyfill for Object (`'core-js/es7/object'`) for IE is no longer used. + - `IgxDialog` - **Breaking Change** - The default positionSettings open/close animation has been changed to `fadeIn`/`fadeOut`. The open/close animation can be set through the position settings, e.g. change the animation to the previously default open/close animation: diff --git a/angular.json b/angular.json index 045131bc8c9..773a3775bfe 100644 --- a/angular.json +++ b/angular.json @@ -75,9 +75,6 @@ "with": "src/environments/environment.hmr.ts" } ] - }, - "es5": { - "tsConfig": "src/tsconfig-es5.app.json" } } }, @@ -92,13 +89,7 @@ }, "hmr": { "hmr": true, - "hmrWarning": false, "browserTarget": "igniteui-dev-demos:build:hmr" - }, - "es5": { - "hmr": true, - "hmrWarning": false, - "browserTarget": "igniteui-dev-demos:build:es5" } } }, diff --git a/gulpfile.js b/gulpfile.js index c77d07176b8..d781b4cd0e6 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -118,6 +118,11 @@ module.exports.copyMigrations = (cb) => { '!**/tsconfig.json' ]).pipe(gulp.dest('./dist/igniteui-angular/migrations')); + + gulp.src([ + './projects/igniteui-angular/migrations/common/import-helper.js' + ]).pipe(gulp.dest('./dist/igniteui-angular/migrations/common')); + cb(); }; diff --git a/package-lock.json b/package-lock.json index f4ef0588ec3..5c12fa31703 100644 --- a/package-lock.json +++ b/package-lock.json @@ -15,107 +15,112 @@ } }, "@angular-devkit/architect": { - "version": "0.1202.0", - "resolved": "https://registry.npmjs.org/@angular-devkit/architect/-/architect-0.1202.0.tgz", - "integrity": "sha512-99O8iLO9LEVTPYN6kj6XINHxjw13ofTS48hm3D0i44QMEyq3SRH1ctH6HcUAtbgPF3VjOUFr5vRYpQN1OdOCXw==", + "version": "0.1300.1", + "resolved": "https://registry.npmjs.org/@angular-devkit/architect/-/architect-0.1300.1.tgz", + "integrity": "sha512-D6R2kYnZlKIpVx+lnuC8MRu8ZUqq2dkpeNJ1yP2IgkRdRktXWOOc2xj8utZ6NVCn8m/9kdOceQDlceVz/XT0+g==", "dev": true, "requires": { - "@angular-devkit/core": "12.2.0", + "@angular-devkit/core": "13.0.1", "rxjs": "6.6.7" } }, "@angular-devkit/build-angular": { - "version": "12.2.0", - "resolved": "https://registry.npmjs.org/@angular-devkit/build-angular/-/build-angular-12.2.0.tgz", - "integrity": "sha512-hcnlTZo1iWVVDiq2MSwbEJtc2E4rf7tSvsBvSVQLH1GILtVvN64L3YW0wVThNctWL8nicHWjtGQ+z3kjCOhxYw==", + "version": "13.0.1", + "resolved": "https://registry.npmjs.org/@angular-devkit/build-angular/-/build-angular-13.0.1.tgz", + "integrity": "sha512-w0eLR+KWIEV4ER7rd1AGeod6il25x983MVKHiLbOLIlRMxQVZCjpNCp07zjl6izdX3eLDKnpX3T8e1sjeg2DXQ==", "dev": true, "requires": { "@ampproject/remapping": "1.0.1", - "@angular-devkit/architect": "0.1202.0", - "@angular-devkit/build-optimizer": "0.1202.0", - "@angular-devkit/build-webpack": "0.1202.0", - "@angular-devkit/core": "12.2.0", - "@babel/core": "7.14.8", - "@babel/generator": "7.14.8", - "@babel/helper-annotate-as-pure": "7.14.5", - "@babel/plugin-proposal-async-generator-functions": "7.14.7", + "@angular-devkit/architect": "0.1300.1", + "@angular-devkit/build-webpack": "0.1300.1", + "@angular-devkit/core": "13.0.1", + "@babel/core": "7.15.8", + "@babel/generator": "7.15.8", + "@babel/helper-annotate-as-pure": "7.15.4", + "@babel/plugin-proposal-async-generator-functions": "7.15.8", "@babel/plugin-transform-async-to-generator": "7.14.5", - "@babel/plugin-transform-runtime": "7.14.5", - "@babel/preset-env": "7.14.8", - "@babel/runtime": "7.14.8", - "@babel/template": "7.14.5", - "@discoveryjs/json-ext": "0.5.3", - "@jsdevtools/coverage-istanbul-loader": "3.0.5", - "@ngtools/webpack": "12.2.0", + "@babel/plugin-transform-runtime": "7.15.8", + "@babel/preset-env": "7.15.8", + "@babel/runtime": "7.15.4", + "@babel/template": "7.15.4", + "@discoveryjs/json-ext": "0.5.5", + "@ngtools/webpack": "13.0.1", "ansi-colors": "4.1.1", - "babel-loader": "8.2.2", + "babel-loader": "8.2.3", + "babel-plugin-istanbul": "6.1.1", "browserslist": "^4.9.1", - "cacache": "15.2.0", + "cacache": "15.3.0", "caniuse-lite": "^1.0.30001032", "circular-dependency-plugin": "5.2.2", "copy-webpack-plugin": "9.0.1", - "core-js": "3.16.0", - "critters": "0.0.10", - "css-loader": "6.2.0", - "css-minimizer-webpack-plugin": "3.0.2", - "esbuild": "0.12.17", - "find-cache-dir": "3.3.1", - "glob": "7.1.7", + "core-js": "3.19.0", + "critters": "0.0.14", + "css-loader": "6.5.0", + "esbuild": "0.13.12", + "esbuild-wasm": "0.13.12", + "glob": "7.2.0", "https-proxy-agent": "5.0.0", - "inquirer": "8.1.2", + "inquirer": "8.2.0", "karma-source-map-support": "1.4.0", - "less": "4.1.1", - "less-loader": "10.0.1", - "license-webpack-plugin": "2.3.20", - "loader-utils": "2.0.0", - "mini-css-extract-plugin": "2.1.0", + "less": "4.1.2", + "less-loader": "10.2.0", + "license-webpack-plugin": "3.0.0", + "loader-utils": "3.0.0", + "mini-css-extract-plugin": "2.4.3", "minimatch": "3.0.4", - "open": "8.2.1", + "open": "8.4.0", "ora": "5.4.1", "parse5-html-rewriting-stream": "6.0.1", "piscina": "3.1.0", - "postcss": "8.3.6", + "postcss": "8.3.11", "postcss-import": "14.0.2", - "postcss-loader": "6.1.1", + "postcss-loader": "6.2.0", "postcss-preset-env": "6.7.0", "regenerator-runtime": "0.13.9", "resolve-url-loader": "4.0.0", "rxjs": "6.6.7", - "sass": "1.36.0", - "sass-loader": "12.1.0", + "sass": "1.43.4", + "sass-loader": "12.3.0", "semver": "7.3.5", "source-map-loader": "3.0.0", - "source-map-support": "0.5.19", - "style-loader": "3.2.1", - "stylus": "0.54.8", - "stylus-loader": "6.1.0", - "terser": "5.7.1", - "terser-webpack-plugin": "5.1.4", + "source-map-support": "0.5.20", + "stylus": "0.55.0", + "stylus-loader": "6.2.0", + "terser": "5.9.0", "text-table": "0.2.0", "tree-kill": "1.2.2", - "tslib": "2.3.0", - "webpack": "5.47.1", - "webpack-dev-middleware": "5.0.0", - "webpack-dev-server": "3.11.2", + "tslib": "2.3.1", + "webpack": "5.60.0", + "webpack-dev-middleware": "5.2.1", + "webpack-dev-server": "4.4.0", "webpack-merge": "5.8.0", - "webpack-subresource-integrity": "1.5.2" + "webpack-subresource-integrity": "5.0.0" }, "dependencies": { + "@babel/code-frame": { + "version": "7.16.0", + "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.16.0.tgz", + "integrity": "sha512-IF4EOMEV+bfYwOmNxGzSnjR2EmQod7f1UXOpZM3l4i4o4QNwzjtJAu/HxdjHq0aYBvdqMuQEY1eg0nqW9ZPORA==", + "dev": true, + "requires": { + "@babel/highlight": "^7.16.0" + } + }, "@babel/core": { - "version": "7.14.8", - "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.14.8.tgz", - "integrity": "sha512-/AtaeEhT6ErpDhInbXmjHcUQXH0L0TEgscfcxk1qbOvLuKCa5aZT0SOOtDKFY96/CLROwbLSKyFor6idgNaU4Q==", - "dev": true, - "requires": { - "@babel/code-frame": "^7.14.5", - "@babel/generator": "^7.14.8", - "@babel/helper-compilation-targets": "^7.14.5", - "@babel/helper-module-transforms": "^7.14.8", - "@babel/helpers": "^7.14.8", - "@babel/parser": "^7.14.8", - "@babel/template": "^7.14.5", - "@babel/traverse": "^7.14.8", - "@babel/types": "^7.14.8", + "version": "7.15.8", + "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.15.8.tgz", + "integrity": "sha512-3UG9dsxvYBMYwRv+gS41WKHno4K60/9GPy1CJaH6xy3Elq8CTtvtjT5R5jmNhXfCYLX2mTw+7/aq5ak/gOE0og==", + "dev": true, + "requires": { + "@babel/code-frame": "^7.15.8", + "@babel/generator": "^7.15.8", + "@babel/helper-compilation-targets": "^7.15.4", + "@babel/helper-module-transforms": "^7.15.8", + "@babel/helpers": "^7.15.4", + "@babel/parser": "^7.15.8", + "@babel/template": "^7.15.4", + "@babel/traverse": "^7.15.4", + "@babel/types": "^7.15.6", "convert-source-map": "^1.7.0", "debug": "^4.1.0", "gensync": "^1.0.0-beta.2", @@ -133,144 +138,69 @@ } }, "@babel/generator": { - "version": "7.14.8", - "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.14.8.tgz", - "integrity": "sha512-cYDUpvIzhBVnMzRoY1fkSEhK/HmwEVwlyULYgn/tMQYd6Obag3ylCjONle3gdErfXBW61SVTlR9QR7uWlgeIkg==", + "version": "7.15.8", + "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.15.8.tgz", + "integrity": "sha512-ECmAKstXbp1cvpTTZciZCgfOt6iN64lR0d+euv3UZisU5awfRawOvg07Utn/qBGuH4bRIEZKrA/4LzZyXhZr8g==", "dev": true, "requires": { - "@babel/types": "^7.14.8", + "@babel/types": "^7.15.6", "jsesc": "^2.5.1", "source-map": "^0.5.0" } }, - "@babel/helper-member-expression-to-functions": { - "version": "7.15.0", - "resolved": "https://registry.npmjs.org/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.15.0.tgz", - "integrity": "sha512-Jq8H8U2kYiafuj2xMTPQwkTBnEEdGKpT35lJEQsRRjnG0LW3neucsaMWLgKcwu3OHKNeYugfw+Z20BXBSEs2Lg==", - "dev": true, - "requires": { - "@babel/types": "^7.15.0" - } - }, - "@babel/helper-module-transforms": { - "version": "7.15.0", - "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.15.0.tgz", - "integrity": "sha512-RkGiW5Rer7fpXv9m1B3iHIFDZdItnO2/BLfWVW/9q7+KqQSDY5kUfQEbzdXM1MVhJGcugKV7kRrNVzNxmk7NBg==", - "dev": true, - "requires": { - "@babel/helper-module-imports": "^7.14.5", - "@babel/helper-replace-supers": "^7.15.0", - "@babel/helper-simple-access": "^7.14.8", - "@babel/helper-split-export-declaration": "^7.14.5", - "@babel/helper-validator-identifier": "^7.14.9", - "@babel/template": "^7.14.5", - "@babel/traverse": "^7.15.0", - "@babel/types": "^7.15.0" - } - }, - "@babel/helper-replace-supers": { - "version": "7.15.0", - "resolved": "https://registry.npmjs.org/@babel/helper-replace-supers/-/helper-replace-supers-7.15.0.tgz", - "integrity": "sha512-6O+eWrhx+HEra/uJnifCwhwMd6Bp5+ZfZeJwbqUTuqkhIT6YcRhiZCOOFChRypOIe0cV46kFrRBlm+t5vHCEaA==", - "dev": true, - "requires": { - "@babel/helper-member-expression-to-functions": "^7.15.0", - "@babel/helper-optimise-call-expression": "^7.14.5", - "@babel/traverse": "^7.15.0", - "@babel/types": "^7.15.0" - } - }, - "@babel/helper-simple-access": { - "version": "7.14.8", - "resolved": "https://registry.npmjs.org/@babel/helper-simple-access/-/helper-simple-access-7.14.8.tgz", - "integrity": "sha512-TrFN4RHh9gnWEU+s7JloIho2T76GPwRHhdzOWLqTrMnlas8T9O7ec+oEDNsRXndOmru9ymH9DFrEOxpzPoSbdg==", - "dev": true, - "requires": { - "@babel/types": "^7.14.8" - } - }, - "@babel/helper-validator-identifier": { - "version": "7.14.9", - "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.14.9.tgz", - "integrity": "sha512-pQYxPY0UP6IHISRitNe8bsijHex4TWZXi2HwKVsjPiltzlhse2znVcm9Ace510VT1kxIHjGJCZZQBX2gJDbo0g==", - "dev": true - }, - "@babel/helpers": { - "version": "7.14.8", - "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.14.8.tgz", - "integrity": "sha512-ZRDmI56pnV+p1dH6d+UN6GINGz7Krps3+270qqI9UJ4wxYThfAIcI5i7j5vXC4FJ3Wap+S9qcebxeYiqn87DZw==", + "@babel/highlight": { + "version": "7.16.0", + "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.16.0.tgz", + "integrity": "sha512-t8MH41kUQylBtu2+4IQA3atqevA2lRgqA2wyVB/YiWmsDSuylZZuXOUy9ric30hfzauEFfdsuk/eXTRrGrfd0g==", "dev": true, "requires": { - "@babel/template": "^7.14.5", - "@babel/traverse": "^7.14.8", - "@babel/types": "^7.14.8" + "@babel/helper-validator-identifier": "^7.15.7", + "chalk": "^2.0.0", + "js-tokens": "^4.0.0" } }, - "@babel/parser": { - "version": "7.15.0", - "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.15.0.tgz", - "integrity": "sha512-0v7oNOjr6YT9Z2RAOTv4T9aP+ubfx4Q/OhVtAet7PFDt0t9Oy6Jn+/rfC6b8HJ5zEqrQCiMxJfgtHpmIminmJQ==", + "core-js": { + "version": "3.19.0", + "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.19.0.tgz", + "integrity": "sha512-L1TpFRWXZ76vH1yLM+z6KssLZrP8Z6GxxW4auoCj+XiViOzNPJCAuTIkn03BGdFe6Z5clX5t64wRIRypsZQrUg==", "dev": true }, - "@babel/runtime": { - "version": "7.14.8", - "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.14.8.tgz", - "integrity": "sha512-twj3L8Og5SaCRCErB4x4ajbvBIVV77CGeFglHpeg5WC5FF8TZzBWXtTJ4MqaD9QszLYTtr+IsaAL2rEUevb+eg==", - "dev": true, - "requires": { - "regenerator-runtime": "^0.13.4" - } - }, - "@babel/traverse": { - "version": "7.15.0", - "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.15.0.tgz", - "integrity": "sha512-392d8BN0C9eVxVWd8H6x9WfipgVH5IaIoLp23334Sc1vbKKWINnvwRpb4us0xtPaCumlwbTtIYNA0Dv/32sVFw==", - "dev": true, - "requires": { - "@babel/code-frame": "^7.14.5", - "@babel/generator": "^7.15.0", - "@babel/helper-function-name": "^7.14.5", - "@babel/helper-hoist-variables": "^7.14.5", - "@babel/helper-split-export-declaration": "^7.14.5", - "@babel/parser": "^7.15.0", - "@babel/types": "^7.15.0", - "debug": "^4.1.0", - "globals": "^11.1.0" - }, - "dependencies": { - "@babel/generator": { - "version": "7.15.0", - "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.15.0.tgz", - "integrity": "sha512-eKl4XdMrbpYvuB505KTta4AV9g+wWzmVBW69tX0H2NwKVKd2YJbKgyK6M8j/rgLbmHOYJn6rUklV677nOyJrEQ==", - "dev": true, - "requires": { - "@babel/types": "^7.15.0", - "jsesc": "^2.5.1", - "source-map": "^0.5.0" - } - } - } - }, - "@babel/types": { - "version": "7.15.0", - "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.15.0.tgz", - "integrity": "sha512-OBvfqnllOIdX4ojTHpwZbpvz4j3EWyjkZEdmjH0/cgsd6QOdSgU8rLSk6ard/pcW7rlmjdVSX/AWOaORR1uNOQ==", + "esbuild": { + "version": "0.13.12", + "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.13.12.tgz", + "integrity": "sha512-vTKKUt+yoz61U/BbrnmlG9XIjwpdIxmHB8DlPR0AAW6OdS+nBQBci6LUHU2q9WbBobMEIQxxDpKbkmOGYvxsow==", "dev": true, + "optional": true, "requires": { - "@babel/helper-validator-identifier": "^7.14.9", - "to-fast-properties": "^2.0.0" - } - }, - "core-js": { - "version": "3.16.0", - "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.16.0.tgz", - "integrity": "sha512-5+5VxRFmSf97nM8Jr2wzOwLqRo6zphH2aX+7KsAUONObyzakDNq2G/bgbhinxB4PoV9L3aXQYhiDKyIKWd2c8g==", + "esbuild-android-arm64": "0.13.12", + "esbuild-darwin-64": "0.13.12", + "esbuild-darwin-arm64": "0.13.12", + "esbuild-freebsd-64": "0.13.12", + "esbuild-freebsd-arm64": "0.13.12", + "esbuild-linux-32": "0.13.12", + "esbuild-linux-64": "0.13.12", + "esbuild-linux-arm": "0.13.12", + "esbuild-linux-arm64": "0.13.12", + "esbuild-linux-mips64le": "0.13.12", + "esbuild-linux-ppc64le": "0.13.12", + "esbuild-netbsd-64": "0.13.12", + "esbuild-openbsd-64": "0.13.12", + "esbuild-sunos-64": "0.13.12", + "esbuild-windows-32": "0.13.12", + "esbuild-windows-64": "0.13.12", + "esbuild-windows-arm64": "0.13.12" + } + }, + "esbuild-wasm": { + "version": "0.13.12", + "resolved": "https://registry.npmjs.org/esbuild-wasm/-/esbuild-wasm-0.13.12.tgz", + "integrity": "sha512-eGdiSewbnJffEvyA0qQmr+w3HurBMVp4QhOfICzeeoL9naC8qC3PFaw6hZaqSgks5DXnQONtUGUFLsX3eXpq8A==", "dev": true }, "glob": { - "version": "7.1.7", - "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.7.tgz", - "integrity": "sha512-OvD9ENzPLbegENnYP5UUfJIirTg4+XwMWGaQfQTY0JenxNvvIKP3U3/tAQSPIu/lHxXYSZmpXlUHeqAIdKzBLQ==", + "version": "7.2.0", + "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.0.tgz", + "integrity": "sha512-lmLf6gtyrPq8tTjSmrO94wBeQbFR3HbLHbuyD69wuyQkImp2hWqMGB47OX65FBkPffO641IP9jWa1z4ivqG26Q==", "dev": true, "requires": { "fs.realpath": "^1.0.0", @@ -281,30 +211,21 @@ "path-is-absolute": "^1.0.0" } }, - "postcss": { - "version": "8.3.6", - "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.3.6.tgz", - "integrity": "sha512-wG1cc/JhRgdqB6WHEuyLTedf3KIRuD0hG6ldkFEZNCjRxiC+3i6kkWUUbiJQayP28iwG35cEmAbe98585BYV0A==", - "dev": true, - "requires": { - "colorette": "^1.2.2", - "nanoid": "^3.1.23", - "source-map-js": "^0.6.2" - } - }, - "regenerator-runtime": { - "version": "0.13.9", - "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.9.tgz", - "integrity": "sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA==", + "picocolors": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz", + "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==", "dev": true }, - "sass": { - "version": "1.36.0", - "resolved": "https://registry.npmjs.org/sass/-/sass-1.36.0.tgz", - "integrity": "sha512-fQzEjipfOv5kh930nu3Imzq3ie/sGDc/4KtQMJlt7RRdrkQSfe37Bwi/Rf/gfuYHsIuE1fIlDMvpyMcEwjnPvg==", + "postcss": { + "version": "8.3.11", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.3.11.tgz", + "integrity": "sha512-hCmlUAIlUiav8Xdqw3Io4LcpA1DOt7h3LSTAC4G6JGHFFaWzI6qvFt9oilvl8BmkbBRX1IhM90ZAmpk68zccQA==", "dev": true, "requires": { - "chokidar": ">=3.0.0 <4.0.0" + "nanoid": "^3.1.30", + "picocolors": "^1.0.0", + "source-map-js": "^0.6.2" } }, "source-map": { @@ -315,43 +236,24 @@ } } }, - "@angular-devkit/build-optimizer": { - "version": "0.1202.0", - "resolved": "https://registry.npmjs.org/@angular-devkit/build-optimizer/-/build-optimizer-0.1202.0.tgz", - "integrity": "sha512-ORZGPrBTlzfSUzAZTrbpMgTbx1TaMcJ+nEFDj0hVBK+DUgf7GnaRjltlIqfKKphh7c6h3OKZAu3k2Lo57WqcIA==", - "dev": true, - "requires": { - "source-map": "0.7.3", - "tslib": "2.3.0", - "typescript": "4.3.5" - }, - "dependencies": { - "source-map": { - "version": "0.7.3", - "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.3.tgz", - "integrity": "sha512-CkCj6giN3S+n9qrYiBTX5gystlENnRW5jZeNLHpe6aue+SrHcG5VYwujhW9s4dY31mEGsxBDrHR6oI69fTXsaQ==", - "dev": true - } - } - }, "@angular-devkit/build-webpack": { - "version": "0.1202.0", - "resolved": "https://registry.npmjs.org/@angular-devkit/build-webpack/-/build-webpack-0.1202.0.tgz", - "integrity": "sha512-G2Iljb8Vpu5+N6jWUii2m8p5NRJe84pgiQbIOxQvegEYkdmbISQYmW3ubFjWDQgjArCpZyWJQ/AIwhmkRef5xQ==", + "version": "0.1300.1", + "resolved": "https://registry.npmjs.org/@angular-devkit/build-webpack/-/build-webpack-0.1300.1.tgz", + "integrity": "sha512-Sw5BMc7bCebr0CnPPinyqfgl13U68+ggyosIdNTVo0uWz9GRtace89VOfgPP0SK9Rw+V4hlU9RoD4tV8R4jLsg==", "dev": true, "requires": { - "@angular-devkit/architect": "0.1202.0", + "@angular-devkit/architect": "0.1300.1", "rxjs": "6.6.7" } }, "@angular-devkit/core": { - "version": "12.2.0", - "resolved": "https://registry.npmjs.org/@angular-devkit/core/-/core-12.2.0.tgz", - "integrity": "sha512-9H2NfE4eazpMPwbAx4ZbtTNijo6419DZsmQzlzwQWzTInO3+CAjQuyW53W5Nt/IoauNVOgOEsC8/YbYjNmN0Aw==", + "version": "13.0.1", + "resolved": "https://registry.npmjs.org/@angular-devkit/core/-/core-13.0.1.tgz", + "integrity": "sha512-RfhpPw7vU5ok7ICUwEx4Lic+HCHrMjKnj/Tbk+CfSqONTFtqDaMoC8itQE2risLugT4mzO+3Cy95eccpf282kQ==", "dev": true, "requires": { - "ajv": "8.6.2", - "ajv-formats": "2.1.0", + "ajv": "8.6.3", + "ajv-formats": "2.1.1", "fast-json-stable-stringify": "2.1.0", "magic-string": "0.25.7", "rxjs": "6.6.7", @@ -359,9 +261,9 @@ }, "dependencies": { "ajv": { - "version": "8.6.2", - "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.6.2.tgz", - "integrity": "sha512-9807RlWAgT564wT+DjeyU5OFMPjmzxVobvDFmNAhY+5zD6A2ly3jDp6sgnfyDtlIQ+7H97oc/DGCzzfu9rjw9w==", + "version": "8.6.3", + "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.6.3.tgz", + "integrity": "sha512-SMJOdDP6LqTkD0Uq8qLi+gMwSt0imXLSV080qFVwJCpH9U6Mb+SUGHAXM0KNbcBPguytWyvFxcHgMLe2D2XSpw==", "dev": true, "requires": { "fast-deep-equal": "^3.1.1", @@ -379,78 +281,68 @@ } }, "@angular-devkit/schematics": { - "version": "12.2.0", - "resolved": "https://registry.npmjs.org/@angular-devkit/schematics/-/schematics-12.2.0.tgz", - "integrity": "sha512-C+eutMKtOLROk/2zs1NkXeLZJpFtvZm7ctWmcns0Yh83Di2sCgGiSqdqNZFyDplxkt5W5lF2cdBSGyP8ZH+/ug==", + "version": "13.0.1", + "resolved": "https://registry.npmjs.org/@angular-devkit/schematics/-/schematics-13.0.1.tgz", + "integrity": "sha512-WEhotd5H82W8LHo9tgTh547A1pxwmcKDHLhlsko5dg/HuHHhEYuxUxlLaBs1yHl+VVPG+Cwnf3pEbVhWGHVS3Q==", "dev": true, "requires": { - "@angular-devkit/core": "12.2.0", + "@angular-devkit/core": "13.0.1", + "jsonc-parser": "3.0.0", + "magic-string": "0.25.7", "ora": "5.4.1", "rxjs": "6.6.7" } }, "@angular-eslint/builder": { - "version": "12.3.0", - "resolved": "https://registry.npmjs.org/@angular-eslint/builder/-/builder-12.3.0.tgz", - "integrity": "sha512-lcWS62fKrlI7v3H89eJQ7jF0zGUg+/NcnrtQuMHYJf6xzTEh7wT3r32MBlW4E2xxq3iWqujGIwhdVACdQjt4+g==", + "version": "13.0.0-alpha.0", + "resolved": "https://registry.npmjs.org/@angular-eslint/builder/-/builder-13.0.0-alpha.0.tgz", + "integrity": "sha512-EksKJljg5i1RxLl26JK0vY5awRll/cQcUo2O6tJ4dHOeR7zSiCGXGZM4zLVeNjySGHz6wDCRhNV+L/GMKSgwEQ==", "dev": true, "requires": { - "@nrwl/devkit": ">= 12.0.0 < 13.0.0" + "@nrwl/devkit": "12.6.0" } }, + "@angular-eslint/bundled-angular-compiler": { + "version": "12.6.1", + "resolved": "https://registry.npmjs.org/@angular-eslint/bundled-angular-compiler/-/bundled-angular-compiler-12.6.1.tgz", + "integrity": "sha512-m5upUwjiegTe/iPEn02ZYg/I0pKWRJkpgvQm4Odp2Bm173orpEihzCTursUxwEi1WPNlcyduh1bgjNKAPCOtkQ==", + "dev": true + }, "@angular-eslint/eslint-plugin": { - "version": "12.3.0", - "resolved": "https://registry.npmjs.org/@angular-eslint/eslint-plugin/-/eslint-plugin-12.3.0.tgz", - "integrity": "sha512-Ea/84Rb7Lr271scAyh7kNigvhMAwka0S4bBZ+HjNtFndEexVboEVimF++TSHF3Kzb/y6SVC/UleVHAvBLy8O9w==", + "version": "12.6.1", + "resolved": "https://registry.npmjs.org/@angular-eslint/eslint-plugin/-/eslint-plugin-12.6.1.tgz", + "integrity": "sha512-zchuiGeaeWYEc4q3XhHcX6Q5y4MOjtt3cZY2UxOaCTaYYp9yTh6k2MuE9hj0BO6qAcQyCrLlBiHhuYCpjAPO4Q==", "dev": true, "requires": { + "@angular-eslint/utils": "12.6.1", "@typescript-eslint/experimental-utils": "4.28.2" } }, "@angular-eslint/eslint-plugin-template": { - "version": "12.3.0", - "resolved": "https://registry.npmjs.org/@angular-eslint/eslint-plugin-template/-/eslint-plugin-template-12.3.0.tgz", - "integrity": "sha512-xcMD2d4XIRLa10xNoBdMRrijl04iwpN5xdCUOD27lEK6g5WCkCl5v13zbXh/KGHqHXtPe0enzw7jL9S9dLC5uA==", + "version": "12.6.1", + "resolved": "https://registry.npmjs.org/@angular-eslint/eslint-plugin-template/-/eslint-plugin-template-12.6.1.tgz", + "integrity": "sha512-sJ6r1VKhUavQ1lTH53YdGF0bX17UywU8L2I+Oy5tl4diQ50RkIr8kwmilGC483/RuTCSwcE6mYS09a65HsPwyw==", "dev": true, "requires": { + "@angular-eslint/bundled-angular-compiler": "12.6.1", "@typescript-eslint/experimental-utils": "4.28.2", "aria-query": "^4.2.2", "axobject-query": "^2.2.0" } }, "@angular-eslint/schematics": { - "version": "12.3.1", - "resolved": "https://registry.npmjs.org/@angular-eslint/schematics/-/schematics-12.3.1.tgz", - "integrity": "sha512-r1yZaqyO0oJhKDIWio3gH9TWpWEN8bUpiftgkkR6Yyc4hKBbiR5N4RQo5aZ5bnGytdW8QP8zq2k1yYBWjhEX7A==", + "version": "12.6.1", + "resolved": "https://registry.npmjs.org/@angular-eslint/schematics/-/schematics-12.6.1.tgz", + "integrity": "sha512-PERmjyTNsp08w8ShKEfzcXRB8Ye4YWceFfR5WllgrMi+teOz9XmTSO62UixgqJSRCdn9ufSNMWmN3jwtGGf03w==", "dev": true, "requires": { - "@angular-eslint/eslint-plugin": "12.3.1", - "@angular-eslint/eslint-plugin-template": "12.3.1", + "@angular-eslint/eslint-plugin": "12.6.1", + "@angular-eslint/eslint-plugin-template": "12.6.1", "ignore": "5.1.8", "strip-json-comments": "3.1.1", "tmp": "0.2.1" }, "dependencies": { - "@angular-eslint/eslint-plugin": { - "version": "12.3.1", - "resolved": "https://registry.npmjs.org/@angular-eslint/eslint-plugin/-/eslint-plugin-12.3.1.tgz", - "integrity": "sha512-KBm27onYggRcusA/BxuSkDGpVnIs8yG4ARio8ZAhe0H2XIRJTzJZ7oIBBjugDau03AGX3VMG6wAXailjJvsywg==", - "dev": true, - "requires": { - "@typescript-eslint/experimental-utils": "4.28.2" - } - }, - "@angular-eslint/eslint-plugin-template": { - "version": "12.3.1", - "resolved": "https://registry.npmjs.org/@angular-eslint/eslint-plugin-template/-/eslint-plugin-template-12.3.1.tgz", - "integrity": "sha512-pz+nO64ma/9Sp2aeRnQ+Vktt7Fo1Lay/J+CG//3TIc3lYsoCTj4h42P6yCcxxJ9b4N7SUxMAnchA8eE5mJS4Ug==", - "dev": true, - "requires": { - "@typescript-eslint/experimental-utils": "4.28.2", - "aria-query": "^4.2.2", - "axobject-query": "^2.2.0" - } - }, "tmp": { "version": "0.2.1", "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.2.1.tgz", @@ -463,43 +355,54 @@ } }, "@angular-eslint/template-parser": { - "version": "12.3.0", - "resolved": "https://registry.npmjs.org/@angular-eslint/template-parser/-/template-parser-12.3.0.tgz", - "integrity": "sha512-pJtCnGHnk3p4N34ZRYKttMIe9K2KFGEzEGdOaK340IvXUHDpERreaWjVBy3zGX7qvFaGXVsl6jGiZZBZ26y6zw==", + "version": "12.6.1", + "resolved": "https://registry.npmjs.org/@angular-eslint/template-parser/-/template-parser-12.6.1.tgz", + "integrity": "sha512-eoADibsywK00BR2I1YwkukN3EGWgbagRebZdOT18ajY1gtv0fzkf82RzxArxGiM52l4MQk5vnGNX6YvsRk6ZAA==", "dev": true, "requires": { + "@angular-eslint/bundled-angular-compiler": "12.6.1", "eslint-scope": "^5.1.0" } }, + "@angular-eslint/utils": { + "version": "12.6.1", + "resolved": "https://registry.npmjs.org/@angular-eslint/utils/-/utils-12.6.1.tgz", + "integrity": "sha512-v+Vl9y0hUCDRA8hFgYov3IORfD/e1AoEEL0rhznwH7hfXwbQhwDrjSZHeQ+BMh27rEz5e8LXxJGiicF3Sq8uJw==", + "dev": true, + "requires": { + "@angular-eslint/bundled-angular-compiler": "12.6.1", + "@typescript-eslint/experimental-utils": "4.28.2" + } + }, "@angular/animations": { - "version": "12.2.0", - "resolved": "https://registry.npmjs.org/@angular/animations/-/animations-12.2.0.tgz", - "integrity": "sha512-BCta/HT0VaM0hzsyRyb24UIaV7vlpo2jJjSwnBhO5RosH+bAaA3Faa3ps3AjCDCEXo9z99dvxJFm8WqdunPYyw==", + "version": "13.0.0", + "resolved": "https://registry.npmjs.org/@angular/animations/-/animations-13.0.0.tgz", + "integrity": "sha512-tFe40hc+asglO6C2XDM+dWXrSPdCxqzHR3b83pH1TdhoYSLt43P7bOPP4uKH0AWCMUMpKcpJGkcbzPPCVO0QZw==", "requires": { - "tslib": "^2.2.0" + "tslib": "^2.3.0" } }, "@angular/cli": { - "version": "12.2.0", - "resolved": "https://registry.npmjs.org/@angular/cli/-/cli-12.2.0.tgz", - "integrity": "sha512-gxw4e3Wb1YgNE+f9sX90xea5vXatqvlYq3mOWFUWVKYcayAgnt9z97a1ULEkSytS1aVjyL44zzkU/QFufPpadQ==", + "version": "13.0.1", + "resolved": "https://registry.npmjs.org/@angular/cli/-/cli-13.0.1.tgz", + "integrity": "sha512-QLrG4FCwqeRePQvZkpx0GsrXm9a+2YmqPr+1Qwfl0RWJpb/3YtqHnmDk7cT7jpqyx9BY2M7YP2Rb27Rgdy4Alg==", "dev": true, "requires": { - "@angular-devkit/architect": "0.1202.0", - "@angular-devkit/core": "12.2.0", - "@angular-devkit/schematics": "12.2.0", - "@schematics/angular": "12.2.0", + "@angular-devkit/architect": "0.1300.1", + "@angular-devkit/core": "13.0.1", + "@angular-devkit/schematics": "13.0.1", + "@schematics/angular": "13.0.1", "@yarnpkg/lockfile": "1.1.0", "ansi-colors": "4.1.1", "debug": "4.3.2", "ini": "2.0.0", - "inquirer": "8.1.2", + "inquirer": "8.2.0", "jsonc-parser": "3.0.0", "npm-package-arg": "8.1.5", "npm-pick-manifest": "6.1.1", - "open": "8.2.1", + "open": "8.4.0", "ora": "5.4.1", - "pacote": "11.3.5", + "pacote": "12.0.2", "resolve": "1.20.0", "semver": "7.3.5", "symbol-observable": "4.0.0", @@ -519,168 +422,84 @@ } }, "@angular/common": { - "version": "12.2.0", - "resolved": "https://registry.npmjs.org/@angular/common/-/common-12.2.0.tgz", - "integrity": "sha512-9OaqH5WhfJ/YpN9b4TmiGHdOar/3NiGjktwG1/5jV4mTO+tOP25yNO4zCd4RuaRURipWUEa8mSaesgUgTb3jmQ==", + "version": "13.0.0", + "resolved": "https://registry.npmjs.org/@angular/common/-/common-13.0.0.tgz", + "integrity": "sha512-7KNu6fcNeX71nrOAs29T/PGdO0fAHaX0mtmobIBeIwMF9qY1fqc7a1Rssp6/dUe9XlADf2sXVtx5ZQ8c6bAMsA==", "requires": { - "tslib": "^2.2.0" + "tslib": "^2.3.0" } }, "@angular/compiler": { - "version": "12.2.0", - "resolved": "https://registry.npmjs.org/@angular/compiler/-/compiler-12.2.0.tgz", - "integrity": "sha512-24G1joE699gbAHRAIESVQBI797Q506MZ/LWyFHRjfdlfXgltDN63j5dpNJzb/rUK1/uHGGAJaEH+OE60ZK2q9Q==", + "version": "13.0.0", + "resolved": "https://registry.npmjs.org/@angular/compiler/-/compiler-13.0.0.tgz", + "integrity": "sha512-EBFHKDbYHSjVNlz0/7FmWU6owFAaRSx0OVjkq2zvR+ECUT8qsQNAfUAeaGHK3a4TMJ/fbgUFC3cSUY6/jhgcgg==", "requires": { - "tslib": "^2.2.0" + "tslib": "^2.3.0" } }, "@angular/compiler-cli": { - "version": "12.2.0", - "resolved": "https://registry.npmjs.org/@angular/compiler-cli/-/compiler-cli-12.2.0.tgz", - "integrity": "sha512-VjGb4gty8JSkmcBvdc4QzQx6mPT7cXs42Hu8IDK7dQma3nTRmwbX0BF1m7i+kbrjWHK8I85FbsYbSzfzZid2NA==", + "version": "13.0.0", + "resolved": "https://registry.npmjs.org/@angular/compiler-cli/-/compiler-cli-13.0.0.tgz", + "integrity": "sha512-t0ayzBT2QIKehqNaCfO2wS+WBU0PyzV2eiOnNu7rKTLrw5wlamq5nWGeT5P9yuLjjiVHYl96QyydoY1L938OeQ==", "dev": true, "requires": { "@babel/core": "^7.8.6", - "@babel/types": "^7.8.6", "canonical-path": "1.0.0", "chokidar": "^3.0.0", "convert-source-map": "^1.5.1", "dependency-graph": "^0.11.0", "magic-string": "^0.25.0", - "minimist": "^1.2.0", "reflect-metadata": "^0.1.2", "semver": "^7.0.0", - "source-map": "^0.6.1", "sourcemap-codec": "^1.4.8", - "tslib": "^2.2.0", - "yargs": "^17.0.0" - }, - "dependencies": { - "ansi-styles": { - "version": "4.3.0", - "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz", - "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==", - "dev": true, - "requires": { - "color-convert": "^2.0.1" - } - }, - "cliui": { - "version": "7.0.4", - "resolved": "https://registry.npmjs.org/cliui/-/cliui-7.0.4.tgz", - "integrity": "sha512-OcRE68cOsVMXp1Yvonl/fzkQOyjLSu/8bhPDfQt0e0/Eb283TKP20Fs2MqoPsr9SwA595rRCA+QMzYc9nBP+JQ==", - "dev": true, - "requires": { - "string-width": "^4.2.0", - "strip-ansi": "^6.0.0", - "wrap-ansi": "^7.0.0" - } - }, - "color-convert": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", - "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==", - "dev": true, - "requires": { - "color-name": "~1.1.4" - } - }, - "color-name": { - "version": "1.1.4", - "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz", - "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==", - "dev": true - }, - "source-map": { - "version": "0.6.1", - "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", - "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", - "dev": true - }, - "wrap-ansi": { - "version": "7.0.0", - "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz", - "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==", - "dev": true, - "requires": { - "ansi-styles": "^4.0.0", - "string-width": "^4.1.0", - "strip-ansi": "^6.0.0" - } - }, - "y18n": { - "version": "5.0.8", - "resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.8.tgz", - "integrity": "sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==", - "dev": true - }, - "yargs": { - "version": "17.1.0", - "resolved": "https://registry.npmjs.org/yargs/-/yargs-17.1.0.tgz", - "integrity": "sha512-SQr7qqmQ2sNijjJGHL4u7t8vyDZdZ3Ahkmo4sc1w5xI9TBX0QDdG/g4SFnxtWOsGLjwHQue57eFALfwFCnixgg==", - "dev": true, - "requires": { - "cliui": "^7.0.2", - "escalade": "^3.1.1", - "get-caller-file": "^2.0.5", - "require-directory": "^2.1.1", - "string-width": "^4.2.0", - "y18n": "^5.0.5", - "yargs-parser": "^20.2.2" - } - }, - "yargs-parser": { - "version": "20.2.9", - "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-20.2.9.tgz", - "integrity": "sha512-y11nGElTIV+CT3Zv9t7VKl+Q3hTQoT9a1Qzezhhl6Rp21gJ/IVTW7Z3y9EWXhuUBC2Shnf+DX0antecpAwSP8w==", - "dev": true - } + "tslib": "^2.3.0", + "yargs": "^17.2.1" } }, "@angular/core": { - "version": "12.2.0", - "resolved": "https://registry.npmjs.org/@angular/core/-/core-12.2.0.tgz", - "integrity": "sha512-zy/gqSlSEmi85HVbpoQ0nhC74xoL+aoofvbkKPgdgyEcnqzBt4IFzH++0EZ+GMeZ2pVoNfiXklUhAy2OBAiR/g==", + "version": "13.0.0", + "resolved": "https://registry.npmjs.org/@angular/core/-/core-13.0.0.tgz", + "integrity": "sha512-OU7VDJR4pN0yUUbhlLiHgkTK8kcJFccHMBEtx3TKenBMkFU3CRynSzz67M4zBmXHR15729/UloL/8xuvxKQsGQ==", "requires": { - "tslib": "^2.2.0" + "tslib": "^2.3.0" } }, "@angular/forms": { - "version": "12.2.0", - "resolved": "https://registry.npmjs.org/@angular/forms/-/forms-12.2.0.tgz", - "integrity": "sha512-lhKin5IHElH5qk2Su/o0YMF9JYb84grz0WMIHYmt3EASw/EGvzZwUBd76anJWWwFig6GLw/ZdNC9zLW2Leh06Q==", + "version": "13.0.0", + "resolved": "https://registry.npmjs.org/@angular/forms/-/forms-13.0.0.tgz", + "integrity": "sha512-F2XO1vOzIgGj0OfSLJHPzKcVTKmyttlBWBxIuRoVw3yxdGPKa83ka6B+/+byEE6SY0EvIRt3uJKTqS6iA9/ZxA==", "requires": { - "tslib": "^2.2.0" + "tslib": "^2.3.0" } }, "@angular/language-service": { - "version": "12.2.0", - "resolved": "https://registry.npmjs.org/@angular/language-service/-/language-service-12.2.0.tgz", - "integrity": "sha512-oWZ3E+640iRxkf+tStNpDbJT4mc7zNdOCg4L0YjpBuDOiStJ0YDgtJfNdYE+Ap7fsb0QvUuXpU0QGnDVazQ1PQ==", + "version": "13.0.0", + "resolved": "https://registry.npmjs.org/@angular/language-service/-/language-service-13.0.0.tgz", + "integrity": "sha512-gU8MWazBeO9InC/vhQPzd4H7BPPl41PNXbQ5VhuM0TX4aG1/fkgU/ufCn3z2Wlmjdp8g6dnQvVhiT+r3NoJPEA==", "dev": true }, "@angular/platform-browser": { - "version": "12.2.0", - "resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-12.2.0.tgz", - "integrity": "sha512-MIoWBhhMmPBFfuOPBgEG21uqCZVudTj4YMGxQH4iVlI9GD9ZAht8XgopN9Vw4cytPNfKWsspLoruhIWRNSJlNA==", + "version": "13.0.0", + "resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-13.0.0.tgz", + "integrity": "sha512-3svk0R9UVDL0600Lf5sfFKcOrduKU17UIqrXm+iN0EBGCGostKfQb+GCFPJVZ0wUFJuXyHGovESIJX85uGhpHA==", "requires": { - "tslib": "^2.2.0" + "tslib": "^2.3.0" } }, "@angular/platform-browser-dynamic": { - "version": "12.2.0", - "resolved": "https://registry.npmjs.org/@angular/platform-browser-dynamic/-/platform-browser-dynamic-12.2.0.tgz", - "integrity": "sha512-mvUo1WEI8PrJxIer0RLXSW9raYDrKarUQ9T2Q0/R3ZgS6Y1WvoJe+qSZ7K/hCbErH4zd+64TuJHlj+g2WHPLug==", + "version": "13.0.0", + "resolved": "https://registry.npmjs.org/@angular/platform-browser-dynamic/-/platform-browser-dynamic-13.0.0.tgz", + "integrity": "sha512-CmQGPyCIh3Fd+hZSt1jSLSBdVwppU1x76vyQ7C33qpNt921VhuVfB54bcbMjD+PTc+Fh1+KVI5R/sUscp0F/Bw==", "requires": { - "tslib": "^2.2.0" + "tslib": "^2.3.0" } }, "@angular/router": { - "version": "12.2.0", - "resolved": "https://registry.npmjs.org/@angular/router/-/router-12.2.0.tgz", - "integrity": "sha512-C5S0bU8KtU/2wBQ76AZVFivWbGYJCDwkVg2Lk4ddjqs/pKWb0vg2Baa3DfJrIz3esqfYUJl00HMYQVM9+QtZQA==", + "version": "13.0.0", + "resolved": "https://registry.npmjs.org/@angular/router/-/router-13.0.0.tgz", + "integrity": "sha512-+aNeABp83pEz6NGJ70aplsf2Dy+z4ef5vlm8ICMxUUdfQdiY1sZ/UVjMbbEYb+0XKVNc/1cVCb5xlr3KlpXXng==", "requires": { - "tslib": "^2.2.0" + "tslib": "^2.3.0" } }, "@angularclass/hmr": { @@ -705,26 +524,26 @@ } }, "@babel/compat-data": { - "version": "7.14.7", - "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.14.7.tgz", - "integrity": "sha512-nS6dZaISCXJ3+518CWiBfEr//gHyMO02uDxBkXTKZDN5POruCnOZ1N4YBRZDCabwF8nZMWBpRxIicmXtBs+fvw==", + "version": "7.15.0", + "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.15.0.tgz", + "integrity": "sha512-0NqAC1IJE0S0+lL1SWFMxMkz1pKCNCjI4tr2Zx4LJSXxCLAdr6KyArnY+sno5m3yH9g737ygOyPABDsnXkpxiA==", "dev": true }, "@babel/core": { - "version": "7.14.6", - "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.14.6.tgz", - "integrity": "sha512-gJnOEWSqTk96qG5BoIrl5bVtc23DCycmIePPYnamY9RboYdI4nFy5vAQMSl81O5K/W0sLDWfGysnOECC+KUUCA==", + "version": "7.15.5", + "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.15.5.tgz", + "integrity": "sha512-pYgXxiwAgQpgM1bNkZsDEq85f0ggXMA5L7c+o3tskGMh2BunCI9QUwB9Z4jpvXUOuMdyGKiGKQiRe11VS6Jzvg==", "dev": true, "requires": { "@babel/code-frame": "^7.14.5", - "@babel/generator": "^7.14.5", - "@babel/helper-compilation-targets": "^7.14.5", - "@babel/helper-module-transforms": "^7.14.5", - "@babel/helpers": "^7.14.6", - "@babel/parser": "^7.14.6", - "@babel/template": "^7.14.5", - "@babel/traverse": "^7.14.5", - "@babel/types": "^7.14.5", + "@babel/generator": "^7.15.4", + "@babel/helper-compilation-targets": "^7.15.4", + "@babel/helper-module-transforms": "^7.15.4", + "@babel/helpers": "^7.15.4", + "@babel/parser": "^7.15.5", + "@babel/template": "^7.15.4", + "@babel/traverse": "^7.15.4", + "@babel/types": "^7.15.4", "convert-source-map": "^1.7.0", "debug": "^4.1.0", "gensync": "^1.0.0-beta.2", @@ -748,12 +567,12 @@ } }, "@babel/generator": { - "version": "7.14.5", - "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.14.5.tgz", - "integrity": "sha512-y3rlP+/G25OIX3mYKKIOlQRcqj7YgrvHxOLbVmyLJ9bPmi5ttvUmpydVjcFjZphOktWuA7ovbx91ECloWTfjIA==", + "version": "7.15.4", + "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.15.4.tgz", + "integrity": "sha512-d3itta0tu+UayjEORPNz6e1T3FtvWlP5N4V5M+lhp/CxT4oAA7/NcScnpRyspUMLK6tu9MNHmQHxRykuN2R7hw==", "dev": true, "requires": { - "@babel/types": "^7.14.5", + "@babel/types": "^7.15.4", "jsesc": "^2.5.1", "source-map": "^0.5.0" }, @@ -767,31 +586,43 @@ } }, "@babel/helper-annotate-as-pure": { - "version": "7.14.5", - "resolved": "https://registry.npmjs.org/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.14.5.tgz", - "integrity": "sha512-EivH9EgBIb+G8ij1B2jAwSH36WnGvkQSEC6CkX/6v6ZFlw5fVOHvsgGF4uiEHO2GzMvunZb6tDLQEQSdrdocrA==", + "version": "7.15.4", + "resolved": "https://registry.npmjs.org/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.15.4.tgz", + "integrity": "sha512-QwrtdNvUNsPCj2lfNQacsGSQvGX8ee1ttrBrcozUP2Sv/jylewBP/8QFe6ZkBsC8T/GYWonNAWJV4aRR9AL2DA==", "dev": true, "requires": { - "@babel/types": "^7.14.5" + "@babel/types": "^7.15.4" } }, "@babel/helper-builder-binary-assignment-operator-visitor": { - "version": "7.14.5", - "resolved": "https://registry.npmjs.org/@babel/helper-builder-binary-assignment-operator-visitor/-/helper-builder-binary-assignment-operator-visitor-7.14.5.tgz", - "integrity": "sha512-YTA/Twn0vBXDVGJuAX6PwW7x5zQei1luDDo2Pl6q1qZ7hVNl0RZrhHCQG/ArGpR29Vl7ETiB8eJyrvpuRp300w==", + "version": "7.16.0", + "resolved": "https://registry.npmjs.org/@babel/helper-builder-binary-assignment-operator-visitor/-/helper-builder-binary-assignment-operator-visitor-7.16.0.tgz", + "integrity": "sha512-9KuleLT0e77wFUku6TUkqZzCEymBdtuQQ27MhEKzf9UOOJu3cYj98kyaDAzxpC7lV6DGiZFuC8XqDsq8/Kl6aQ==", "dev": true, "requires": { - "@babel/helper-explode-assignable-expression": "^7.14.5", - "@babel/types": "^7.14.5" + "@babel/helper-explode-assignable-expression": "^7.16.0", + "@babel/types": "^7.16.0" + }, + "dependencies": { + "@babel/types": { + "version": "7.16.0", + "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.16.0.tgz", + "integrity": "sha512-PJgg/k3SdLsGb3hhisFvtLOw5ts113klrpLuIPtCJIU+BB24fqq6lf8RWqKJEjzqXR9AEH1rIb5XTqwBHB+kQg==", + "dev": true, + "requires": { + "@babel/helper-validator-identifier": "^7.15.7", + "to-fast-properties": "^2.0.0" + } + } } }, "@babel/helper-compilation-targets": { - "version": "7.14.5", - "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.14.5.tgz", - "integrity": "sha512-v+QtZqXEiOnpO6EYvlImB6zCD2Lel06RzOPzmkz/D/XgQiUu3C/Jb1LOqSt/AIA34TYi/Q+KlT8vTQrgdxkbLw==", + "version": "7.15.4", + "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.15.4.tgz", + "integrity": "sha512-rMWPCirulnPSe4d+gwdWXLfAXTTBj8M3guAf5xFQJ0nvFY7tfNAFnWdqaHegHlgDZOCT4qvhF3BYlSJag8yhqQ==", "dev": true, "requires": { - "@babel/compat-data": "^7.14.5", + "@babel/compat-data": "^7.15.0", "@babel/helper-validator-option": "^7.14.5", "browserslist": "^4.16.6", "semver": "^6.3.0" @@ -806,87 +637,168 @@ } }, "@babel/helper-create-class-features-plugin": { - "version": "7.15.0", - "resolved": "https://registry.npmjs.org/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.15.0.tgz", - "integrity": "sha512-MdmDXgvTIi4heDVX/e9EFfeGpugqm9fobBVg/iioE8kueXrOHdRDe36FAY7SnE9xXLVeYCoJR/gdrBEIHRC83Q==", + "version": "7.16.0", + "resolved": "https://registry.npmjs.org/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.16.0.tgz", + "integrity": "sha512-XLwWvqEaq19zFlF5PTgOod4bUA+XbkR4WLQBct1bkzmxJGB0ZEJaoKF4c8cgH9oBtCDuYJ8BP5NB9uFiEgO5QA==", "dev": true, "requires": { - "@babel/helper-annotate-as-pure": "^7.14.5", - "@babel/helper-function-name": "^7.14.5", - "@babel/helper-member-expression-to-functions": "^7.15.0", - "@babel/helper-optimise-call-expression": "^7.14.5", - "@babel/helper-replace-supers": "^7.15.0", - "@babel/helper-split-export-declaration": "^7.14.5" + "@babel/helper-annotate-as-pure": "^7.16.0", + "@babel/helper-function-name": "^7.16.0", + "@babel/helper-member-expression-to-functions": "^7.16.0", + "@babel/helper-optimise-call-expression": "^7.16.0", + "@babel/helper-replace-supers": "^7.16.0", + "@babel/helper-split-export-declaration": "^7.16.0" }, "dependencies": { + "@babel/code-frame": { + "version": "7.16.0", + "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.16.0.tgz", + "integrity": "sha512-IF4EOMEV+bfYwOmNxGzSnjR2EmQod7f1UXOpZM3l4i4o4QNwzjtJAu/HxdjHq0aYBvdqMuQEY1eg0nqW9ZPORA==", + "dev": true, + "requires": { + "@babel/highlight": "^7.16.0" + } + }, "@babel/generator": { - "version": "7.15.0", - "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.15.0.tgz", - "integrity": "sha512-eKl4XdMrbpYvuB505KTta4AV9g+wWzmVBW69tX0H2NwKVKd2YJbKgyK6M8j/rgLbmHOYJn6rUklV677nOyJrEQ==", + "version": "7.16.0", + "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.16.0.tgz", + "integrity": "sha512-RR8hUCfRQn9j9RPKEVXo9LiwoxLPYn6hNZlvUOR8tSnaxlD0p0+la00ZP9/SnRt6HchKr+X0fO2r8vrETiJGew==", "dev": true, "requires": { - "@babel/types": "^7.15.0", + "@babel/types": "^7.16.0", "jsesc": "^2.5.1", "source-map": "^0.5.0" } }, + "@babel/helper-annotate-as-pure": { + "version": "7.16.0", + "resolved": "https://registry.npmjs.org/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.16.0.tgz", + "integrity": "sha512-ItmYF9vR4zA8cByDocY05o0LGUkp1zhbTQOH1NFyl5xXEqlTJQCEJjieriw+aFpxo16swMxUnUiKS7a/r4vtHg==", + "dev": true, + "requires": { + "@babel/types": "^7.16.0" + } + }, + "@babel/helper-function-name": { + "version": "7.16.0", + "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.16.0.tgz", + "integrity": "sha512-BZh4mEk1xi2h4HFjWUXRQX5AEx4rvaZxHgax9gcjdLWdkjsY7MKt5p0otjsg5noXw+pB+clMCjw+aEVYADMjog==", + "dev": true, + "requires": { + "@babel/helper-get-function-arity": "^7.16.0", + "@babel/template": "^7.16.0", + "@babel/types": "^7.16.0" + } + }, + "@babel/helper-get-function-arity": { + "version": "7.16.0", + "resolved": "https://registry.npmjs.org/@babel/helper-get-function-arity/-/helper-get-function-arity-7.16.0.tgz", + "integrity": "sha512-ASCquNcywC1NkYh/z7Cgp3w31YW8aojjYIlNg4VeJiHkqyP4AzIvr4qx7pYDb4/s8YcsZWqqOSxgkvjUz1kpDQ==", + "dev": true, + "requires": { + "@babel/types": "^7.16.0" + } + }, + "@babel/helper-hoist-variables": { + "version": "7.16.0", + "resolved": "https://registry.npmjs.org/@babel/helper-hoist-variables/-/helper-hoist-variables-7.16.0.tgz", + "integrity": "sha512-1AZlpazjUR0EQZQv3sgRNfM9mEVWPK3M6vlalczA+EECcPz3XPh6VplbErL5UoMpChhSck5wAJHthlj1bYpcmg==", + "dev": true, + "requires": { + "@babel/types": "^7.16.0" + } + }, "@babel/helper-member-expression-to-functions": { - "version": "7.15.0", - "resolved": "https://registry.npmjs.org/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.15.0.tgz", - "integrity": "sha512-Jq8H8U2kYiafuj2xMTPQwkTBnEEdGKpT35lJEQsRRjnG0LW3neucsaMWLgKcwu3OHKNeYugfw+Z20BXBSEs2Lg==", + "version": "7.16.0", + "resolved": "https://registry.npmjs.org/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.16.0.tgz", + "integrity": "sha512-bsjlBFPuWT6IWhl28EdrQ+gTvSvj5tqVP5Xeftp07SEuz5pLnsXZuDkDD3Rfcxy0IsHmbZ+7B2/9SHzxO0T+sQ==", + "dev": true, + "requires": { + "@babel/types": "^7.16.0" + } + }, + "@babel/helper-optimise-call-expression": { + "version": "7.16.0", + "resolved": "https://registry.npmjs.org/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.16.0.tgz", + "integrity": "sha512-SuI467Gi2V8fkofm2JPnZzB/SUuXoJA5zXe/xzyPP2M04686RzFKFHPK6HDVN6JvWBIEW8tt9hPR7fXdn2Lgpw==", "dev": true, "requires": { - "@babel/types": "^7.15.0" + "@babel/types": "^7.16.0" } }, "@babel/helper-replace-supers": { - "version": "7.15.0", - "resolved": "https://registry.npmjs.org/@babel/helper-replace-supers/-/helper-replace-supers-7.15.0.tgz", - "integrity": "sha512-6O+eWrhx+HEra/uJnifCwhwMd6Bp5+ZfZeJwbqUTuqkhIT6YcRhiZCOOFChRypOIe0cV46kFrRBlm+t5vHCEaA==", + "version": "7.16.0", + "resolved": "https://registry.npmjs.org/@babel/helper-replace-supers/-/helper-replace-supers-7.16.0.tgz", + "integrity": "sha512-TQxuQfSCdoha7cpRNJvfaYxxxzmbxXw/+6cS7V02eeDYyhxderSoMVALvwupA54/pZcOTtVeJ0xccp1nGWladA==", "dev": true, "requires": { - "@babel/helper-member-expression-to-functions": "^7.15.0", - "@babel/helper-optimise-call-expression": "^7.14.5", - "@babel/traverse": "^7.15.0", - "@babel/types": "^7.15.0" + "@babel/helper-member-expression-to-functions": "^7.16.0", + "@babel/helper-optimise-call-expression": "^7.16.0", + "@babel/traverse": "^7.16.0", + "@babel/types": "^7.16.0" } }, - "@babel/helper-validator-identifier": { - "version": "7.14.9", - "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.14.9.tgz", - "integrity": "sha512-pQYxPY0UP6IHISRitNe8bsijHex4TWZXi2HwKVsjPiltzlhse2znVcm9Ace510VT1kxIHjGJCZZQBX2gJDbo0g==", - "dev": true + "@babel/helper-split-export-declaration": { + "version": "7.16.0", + "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.16.0.tgz", + "integrity": "sha512-0YMMRpuDFNGTHNRiiqJX19GjNXA4H0E8jZ2ibccfSxaCogbm3am5WN/2nQNj0YnQwGWM1J06GOcQ2qnh3+0paw==", + "dev": true, + "requires": { + "@babel/types": "^7.16.0" + } + }, + "@babel/highlight": { + "version": "7.16.0", + "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.16.0.tgz", + "integrity": "sha512-t8MH41kUQylBtu2+4IQA3atqevA2lRgqA2wyVB/YiWmsDSuylZZuXOUy9ric30hfzauEFfdsuk/eXTRrGrfd0g==", + "dev": true, + "requires": { + "@babel/helper-validator-identifier": "^7.15.7", + "chalk": "^2.0.0", + "js-tokens": "^4.0.0" + } }, "@babel/parser": { - "version": "7.15.0", - "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.15.0.tgz", - "integrity": "sha512-0v7oNOjr6YT9Z2RAOTv4T9aP+ubfx4Q/OhVtAet7PFDt0t9Oy6Jn+/rfC6b8HJ5zEqrQCiMxJfgtHpmIminmJQ==", + "version": "7.16.2", + "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.16.2.tgz", + "integrity": "sha512-RUVpT0G2h6rOZwqLDTrKk7ksNv7YpAilTnYe1/Q+eDjxEceRMKVWbCsX7t8h6C1qCFi/1Y8WZjcEPBAFG27GPw==", "dev": true }, + "@babel/template": { + "version": "7.16.0", + "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.16.0.tgz", + "integrity": "sha512-MnZdpFD/ZdYhXwiunMqqgyZyucaYsbL0IrjoGjaVhGilz+x8YB++kRfygSOIj1yOtWKPlx7NBp+9I1RQSgsd5A==", + "dev": true, + "requires": { + "@babel/code-frame": "^7.16.0", + "@babel/parser": "^7.16.0", + "@babel/types": "^7.16.0" + } + }, "@babel/traverse": { - "version": "7.15.0", - "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.15.0.tgz", - "integrity": "sha512-392d8BN0C9eVxVWd8H6x9WfipgVH5IaIoLp23334Sc1vbKKWINnvwRpb4us0xtPaCumlwbTtIYNA0Dv/32sVFw==", - "dev": true, - "requires": { - "@babel/code-frame": "^7.14.5", - "@babel/generator": "^7.15.0", - "@babel/helper-function-name": "^7.14.5", - "@babel/helper-hoist-variables": "^7.14.5", - "@babel/helper-split-export-declaration": "^7.14.5", - "@babel/parser": "^7.15.0", - "@babel/types": "^7.15.0", + "version": "7.16.0", + "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.16.0.tgz", + "integrity": "sha512-qQ84jIs1aRQxaGaxSysII9TuDaguZ5yVrEuC0BN2vcPlalwfLovVmCjbFDPECPXcYM/wLvNFfp8uDOliLxIoUQ==", + "dev": true, + "requires": { + "@babel/code-frame": "^7.16.0", + "@babel/generator": "^7.16.0", + "@babel/helper-function-name": "^7.16.0", + "@babel/helper-hoist-variables": "^7.16.0", + "@babel/helper-split-export-declaration": "^7.16.0", + "@babel/parser": "^7.16.0", + "@babel/types": "^7.16.0", "debug": "^4.1.0", "globals": "^11.1.0" } }, "@babel/types": { - "version": "7.15.0", - "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.15.0.tgz", - "integrity": "sha512-OBvfqnllOIdX4ojTHpwZbpvz4j3EWyjkZEdmjH0/cgsd6QOdSgU8rLSk6ard/pcW7rlmjdVSX/AWOaORR1uNOQ==", + "version": "7.16.0", + "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.16.0.tgz", + "integrity": "sha512-PJgg/k3SdLsGb3hhisFvtLOw5ts113klrpLuIPtCJIU+BB24fqq6lf8RWqKJEjzqXR9AEH1rIb5XTqwBHB+kQg==", "dev": true, "requires": { - "@babel/helper-validator-identifier": "^7.14.9", + "@babel/helper-validator-identifier": "^7.15.7", "to-fast-properties": "^2.0.0" } }, @@ -899,19 +811,40 @@ } }, "@babel/helper-create-regexp-features-plugin": { - "version": "7.14.5", - "resolved": "https://registry.npmjs.org/@babel/helper-create-regexp-features-plugin/-/helper-create-regexp-features-plugin-7.14.5.tgz", - "integrity": "sha512-TLawwqpOErY2HhWbGJ2nZT5wSkR192QpN+nBg1THfBfftrlvOh+WbhrxXCH4q4xJ9Gl16BGPR/48JA+Ryiho/A==", + "version": "7.16.0", + "resolved": "https://registry.npmjs.org/@babel/helper-create-regexp-features-plugin/-/helper-create-regexp-features-plugin-7.16.0.tgz", + "integrity": "sha512-3DyG0zAFAZKcOp7aVr33ddwkxJ0Z0Jr5V99y3I690eYLpukJsJvAbzTy1ewoCqsML8SbIrjH14Jc/nSQ4TvNPA==", "dev": true, "requires": { - "@babel/helper-annotate-as-pure": "^7.14.5", + "@babel/helper-annotate-as-pure": "^7.16.0", "regexpu-core": "^4.7.1" + }, + "dependencies": { + "@babel/helper-annotate-as-pure": { + "version": "7.16.0", + "resolved": "https://registry.npmjs.org/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.16.0.tgz", + "integrity": "sha512-ItmYF9vR4zA8cByDocY05o0LGUkp1zhbTQOH1NFyl5xXEqlTJQCEJjieriw+aFpxo16swMxUnUiKS7a/r4vtHg==", + "dev": true, + "requires": { + "@babel/types": "^7.16.0" + } + }, + "@babel/types": { + "version": "7.16.0", + "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.16.0.tgz", + "integrity": "sha512-PJgg/k3SdLsGb3hhisFvtLOw5ts113klrpLuIPtCJIU+BB24fqq6lf8RWqKJEjzqXR9AEH1rIb5XTqwBHB+kQg==", + "dev": true, + "requires": { + "@babel/helper-validator-identifier": "^7.15.7", + "to-fast-properties": "^2.0.0" + } + } } }, "@babel/helper-define-polyfill-provider": { - "version": "0.2.3", - "resolved": "https://registry.npmjs.org/@babel/helper-define-polyfill-provider/-/helper-define-polyfill-provider-0.2.3.tgz", - "integrity": "sha512-RH3QDAfRMzj7+0Nqu5oqgO5q9mFtQEVvCRsi8qCEfzLR9p2BHfn5FzhSB2oj1fF7I2+DcTORkYaQ6aTR9Cofew==", + "version": "0.2.4", + "resolved": "https://registry.npmjs.org/@babel/helper-define-polyfill-provider/-/helper-define-polyfill-provider-0.2.4.tgz", + "integrity": "sha512-OrpPZ97s+aPi6h2n1OXzdhVis1SGSsMU2aMHgLcOKfsp4/v1NWpx3CWT3lBj5eeBq9cDkPkh+YCfdF7O12uNDQ==", "dev": true, "requires": { "@babel/helper-compilation-targets": "^7.13.0", @@ -943,84 +876,96 @@ } }, "@babel/helper-explode-assignable-expression": { - "version": "7.14.5", - "resolved": "https://registry.npmjs.org/@babel/helper-explode-assignable-expression/-/helper-explode-assignable-expression-7.14.5.tgz", - "integrity": "sha512-Htb24gnGJdIGT4vnRKMdoXiOIlqOLmdiUYpAQ0mYfgVT/GDm8GOYhgi4GL+hMKrkiPRohO4ts34ELFsGAPQLDQ==", + "version": "7.16.0", + "resolved": "https://registry.npmjs.org/@babel/helper-explode-assignable-expression/-/helper-explode-assignable-expression-7.16.0.tgz", + "integrity": "sha512-Hk2SLxC9ZbcOhLpg/yMznzJ11W++lg5GMbxt1ev6TXUiJB0N42KPC+7w8a+eWGuqDnUYuwStJoZHM7RgmIOaGQ==", "dev": true, "requires": { - "@babel/types": "^7.14.5" + "@babel/types": "^7.16.0" + }, + "dependencies": { + "@babel/types": { + "version": "7.16.0", + "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.16.0.tgz", + "integrity": "sha512-PJgg/k3SdLsGb3hhisFvtLOw5ts113klrpLuIPtCJIU+BB24fqq6lf8RWqKJEjzqXR9AEH1rIb5XTqwBHB+kQg==", + "dev": true, + "requires": { + "@babel/helper-validator-identifier": "^7.15.7", + "to-fast-properties": "^2.0.0" + } + } } }, "@babel/helper-function-name": { - "version": "7.14.5", - "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.14.5.tgz", - "integrity": "sha512-Gjna0AsXWfFvrAuX+VKcN/aNNWonizBj39yGwUzVDVTlMYJMK2Wp6xdpy72mfArFq5uK+NOuexfzZlzI1z9+AQ==", + "version": "7.15.4", + "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.15.4.tgz", + "integrity": "sha512-Z91cOMM4DseLIGOnog+Z8OI6YseR9bua+HpvLAQ2XayUGU+neTtX+97caALaLdyu53I/fjhbeCnWnRH1O3jFOw==", "dev": true, "requires": { - "@babel/helper-get-function-arity": "^7.14.5", - "@babel/template": "^7.14.5", - "@babel/types": "^7.14.5" + "@babel/helper-get-function-arity": "^7.15.4", + "@babel/template": "^7.15.4", + "@babel/types": "^7.15.4" } }, "@babel/helper-get-function-arity": { - "version": "7.14.5", - "resolved": "https://registry.npmjs.org/@babel/helper-get-function-arity/-/helper-get-function-arity-7.14.5.tgz", - "integrity": "sha512-I1Db4Shst5lewOM4V+ZKJzQ0JGGaZ6VY1jYvMghRjqs6DWgxLCIyFt30GlnKkfUeFLpJt2vzbMVEXVSXlIFYUg==", + "version": "7.15.4", + "resolved": "https://registry.npmjs.org/@babel/helper-get-function-arity/-/helper-get-function-arity-7.15.4.tgz", + "integrity": "sha512-1/AlxSF92CmGZzHnC515hm4SirTxtpDnLEJ0UyEMgTMZN+6bxXKg04dKhiRx5Enel+SUA1G1t5Ed/yQia0efrA==", "dev": true, "requires": { - "@babel/types": "^7.14.5" + "@babel/types": "^7.15.4" } }, "@babel/helper-hoist-variables": { - "version": "7.14.5", - "resolved": "https://registry.npmjs.org/@babel/helper-hoist-variables/-/helper-hoist-variables-7.14.5.tgz", - "integrity": "sha512-R1PXiz31Uc0Vxy4OEOm07x0oSjKAdPPCh3tPivn/Eo8cvz6gveAeuyUUPB21Hoiif0uoPQSSdhIPS3352nvdyQ==", + "version": "7.15.4", + "resolved": "https://registry.npmjs.org/@babel/helper-hoist-variables/-/helper-hoist-variables-7.15.4.tgz", + "integrity": "sha512-VTy085egb3jUGVK9ycIxQiPbquesq0HUQ+tPO0uv5mPEBZipk+5FkRKiWq5apuyTE9FUrjENB0rCf8y+n+UuhA==", "dev": true, "requires": { - "@babel/types": "^7.14.5" + "@babel/types": "^7.15.4" } }, "@babel/helper-member-expression-to-functions": { - "version": "7.14.7", - "resolved": "https://registry.npmjs.org/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.14.7.tgz", - "integrity": "sha512-TMUt4xKxJn6ccjcOW7c4hlwyJArizskAhoSTOCkA0uZ+KghIaci0Qg9R043kUMWI9mtQfgny+NQ5QATnZ+paaA==", + "version": "7.15.4", + "resolved": "https://registry.npmjs.org/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.15.4.tgz", + "integrity": "sha512-cokOMkxC/BTyNP1AlY25HuBWM32iCEsLPI4BHDpJCHHm1FU2E7dKWWIXJgQgSFiu4lp8q3bL1BIKwqkSUviqtA==", "dev": true, "requires": { - "@babel/types": "^7.14.5" + "@babel/types": "^7.15.4" } }, "@babel/helper-module-imports": { - "version": "7.14.5", - "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.14.5.tgz", - "integrity": "sha512-SwrNHu5QWS84XlHwGYPDtCxcA0hrSlL2yhWYLgeOc0w7ccOl2qv4s/nARI0aYZW+bSwAL5CukeXA47B/1NKcnQ==", + "version": "7.15.4", + "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.15.4.tgz", + "integrity": "sha512-jeAHZbzUwdW/xHgHQ3QmWR4Jg6j15q4w/gCfwZvtqOxoo5DKtLHk8Bsf4c5RZRC7NmLEs+ohkdq8jFefuvIxAA==", "dev": true, "requires": { - "@babel/types": "^7.14.5" + "@babel/types": "^7.15.4" } }, "@babel/helper-module-transforms": { - "version": "7.14.5", - "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.14.5.tgz", - "integrity": "sha512-iXpX4KW8LVODuAieD7MzhNjmM6dzYY5tfRqT+R9HDXWl0jPn/djKmA+G9s/2C2T9zggw5tK1QNqZ70USfedOwA==", + "version": "7.15.8", + "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.15.8.tgz", + "integrity": "sha512-DfAfA6PfpG8t4S6npwzLvTUpp0sS7JrcuaMiy1Y5645laRJIp/LiLGIBbQKaXSInK8tiGNI7FL7L8UvB8gdUZg==", "dev": true, "requires": { - "@babel/helper-module-imports": "^7.14.5", - "@babel/helper-replace-supers": "^7.14.5", - "@babel/helper-simple-access": "^7.14.5", - "@babel/helper-split-export-declaration": "^7.14.5", - "@babel/helper-validator-identifier": "^7.14.5", - "@babel/template": "^7.14.5", - "@babel/traverse": "^7.14.5", - "@babel/types": "^7.14.5" + "@babel/helper-module-imports": "^7.15.4", + "@babel/helper-replace-supers": "^7.15.4", + "@babel/helper-simple-access": "^7.15.4", + "@babel/helper-split-export-declaration": "^7.15.4", + "@babel/helper-validator-identifier": "^7.15.7", + "@babel/template": "^7.15.4", + "@babel/traverse": "^7.15.4", + "@babel/types": "^7.15.6" } }, "@babel/helper-optimise-call-expression": { - "version": "7.14.5", - "resolved": "https://registry.npmjs.org/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.14.5.tgz", - "integrity": "sha512-IqiLIrODUOdnPU9/F8ib1Fx2ohlgDhxnIDU7OEVi+kAbEZcyiF7BLU8W6PfvPi9LzztjS7kcbzbmL7oG8kD6VA==", + "version": "7.15.4", + "resolved": "https://registry.npmjs.org/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.15.4.tgz", + "integrity": "sha512-E/z9rfbAOt1vDW1DR7k4SzhzotVV5+qMciWV6LaG1g4jeFrkDlJedjtV4h0i4Q/ITnUu+Pk08M7fczsB9GXBDw==", "dev": true, "requires": { - "@babel/types": "^7.14.5" + "@babel/types": "^7.15.4" } }, "@babel/helper-plugin-utils": { @@ -1030,59 +975,92 @@ "dev": true }, "@babel/helper-remap-async-to-generator": { - "version": "7.14.5", - "resolved": "https://registry.npmjs.org/@babel/helper-remap-async-to-generator/-/helper-remap-async-to-generator-7.14.5.tgz", - "integrity": "sha512-rLQKdQU+HYlxBwQIj8dk4/0ENOUEhA/Z0l4hN8BexpvmSMN9oA9EagjnhnDpNsRdWCfjwa4mn/HyBXO9yhQP6A==", + "version": "7.16.0", + "resolved": "https://registry.npmjs.org/@babel/helper-remap-async-to-generator/-/helper-remap-async-to-generator-7.16.0.tgz", + "integrity": "sha512-MLM1IOMe9aQBqMWxcRw8dcb9jlM86NIw7KA0Wri91Xkfied+dE0QuBFSBjMNvqzmS0OSIDsMNC24dBEkPUi7ew==", "dev": true, "requires": { - "@babel/helper-annotate-as-pure": "^7.14.5", - "@babel/helper-wrap-function": "^7.14.5", - "@babel/types": "^7.14.5" + "@babel/helper-annotate-as-pure": "^7.16.0", + "@babel/helper-wrap-function": "^7.16.0", + "@babel/types": "^7.16.0" + }, + "dependencies": { + "@babel/helper-annotate-as-pure": { + "version": "7.16.0", + "resolved": "https://registry.npmjs.org/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.16.0.tgz", + "integrity": "sha512-ItmYF9vR4zA8cByDocY05o0LGUkp1zhbTQOH1NFyl5xXEqlTJQCEJjieriw+aFpxo16swMxUnUiKS7a/r4vtHg==", + "dev": true, + "requires": { + "@babel/types": "^7.16.0" + } + }, + "@babel/types": { + "version": "7.16.0", + "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.16.0.tgz", + "integrity": "sha512-PJgg/k3SdLsGb3hhisFvtLOw5ts113klrpLuIPtCJIU+BB24fqq6lf8RWqKJEjzqXR9AEH1rIb5XTqwBHB+kQg==", + "dev": true, + "requires": { + "@babel/helper-validator-identifier": "^7.15.7", + "to-fast-properties": "^2.0.0" + } + } } }, "@babel/helper-replace-supers": { - "version": "7.14.5", - "resolved": "https://registry.npmjs.org/@babel/helper-replace-supers/-/helper-replace-supers-7.14.5.tgz", - "integrity": "sha512-3i1Qe9/8x/hCHINujn+iuHy+mMRLoc77b2nI9TB0zjH1hvn9qGlXjWlggdwUcju36PkPCy/lpM7LLUdcTyH4Ow==", + "version": "7.15.4", + "resolved": "https://registry.npmjs.org/@babel/helper-replace-supers/-/helper-replace-supers-7.15.4.tgz", + "integrity": "sha512-/ztT6khaXF37MS47fufrKvIsiQkx1LBRvSJNzRqmbyeZnTwU9qBxXYLaaT/6KaxfKhjs2Wy8kG8ZdsFUuWBjzw==", "dev": true, "requires": { - "@babel/helper-member-expression-to-functions": "^7.14.5", - "@babel/helper-optimise-call-expression": "^7.14.5", - "@babel/traverse": "^7.14.5", - "@babel/types": "^7.14.5" + "@babel/helper-member-expression-to-functions": "^7.15.4", + "@babel/helper-optimise-call-expression": "^7.15.4", + "@babel/traverse": "^7.15.4", + "@babel/types": "^7.15.4" } }, "@babel/helper-simple-access": { - "version": "7.14.5", - "resolved": "https://registry.npmjs.org/@babel/helper-simple-access/-/helper-simple-access-7.14.5.tgz", - "integrity": "sha512-nfBN9xvmCt6nrMZjfhkl7i0oTV3yxR4/FztsbOASyTvVcoYd0TRHh7eMLdlEcCqobydC0LAF3LtC92Iwxo0wyw==", + "version": "7.15.4", + "resolved": "https://registry.npmjs.org/@babel/helper-simple-access/-/helper-simple-access-7.15.4.tgz", + "integrity": "sha512-UzazrDoIVOZZcTeHHEPYrr1MvTR/K+wgLg6MY6e1CJyaRhbibftF6fR2KU2sFRtI/nERUZR9fBd6aKgBlIBaPg==", "dev": true, "requires": { - "@babel/types": "^7.14.5" + "@babel/types": "^7.15.4" } }, "@babel/helper-skip-transparent-expression-wrappers": { - "version": "7.14.5", - "resolved": "https://registry.npmjs.org/@babel/helper-skip-transparent-expression-wrappers/-/helper-skip-transparent-expression-wrappers-7.14.5.tgz", - "integrity": "sha512-dmqZB7mrb94PZSAOYtr+ZN5qt5owZIAgqtoTuqiFbHFtxgEcmQlRJVI+bO++fciBunXtB6MK7HrzrfcAzIz2NQ==", + "version": "7.16.0", + "resolved": "https://registry.npmjs.org/@babel/helper-skip-transparent-expression-wrappers/-/helper-skip-transparent-expression-wrappers-7.16.0.tgz", + "integrity": "sha512-+il1gTy0oHwUsBQZyJvukbB4vPMdcYBrFHa0Uc4AizLxbq6BOYC51Rv4tWocX9BLBDLZ4kc6qUFpQ6HRgL+3zw==", "dev": true, "requires": { - "@babel/types": "^7.14.5" + "@babel/types": "^7.16.0" + }, + "dependencies": { + "@babel/types": { + "version": "7.16.0", + "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.16.0.tgz", + "integrity": "sha512-PJgg/k3SdLsGb3hhisFvtLOw5ts113klrpLuIPtCJIU+BB24fqq6lf8RWqKJEjzqXR9AEH1rIb5XTqwBHB+kQg==", + "dev": true, + "requires": { + "@babel/helper-validator-identifier": "^7.15.7", + "to-fast-properties": "^2.0.0" + } + } } }, "@babel/helper-split-export-declaration": { - "version": "7.14.5", - "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.14.5.tgz", - "integrity": "sha512-hprxVPu6e5Kdp2puZUmvOGjaLv9TCe58E/Fl6hRq4YiVQxIcNvuq6uTM2r1mT/oPskuS9CgR+I94sqAYv0NGKA==", + "version": "7.15.4", + "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.15.4.tgz", + "integrity": "sha512-HsFqhLDZ08DxCpBdEVtKmywj6PQbwnF6HHybur0MAnkAKnlS6uHkwnmRIkElB2Owpfb4xL4NwDmDLFubueDXsw==", "dev": true, "requires": { - "@babel/types": "^7.14.5" + "@babel/types": "^7.15.4" } }, "@babel/helper-validator-identifier": { - "version": "7.14.5", - "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.14.5.tgz", - "integrity": "sha512-5lsetuxCLilmVGyiLEfoHBRX8UCFD+1m2x3Rj97WrW3V7H3u4RWRXA4evMjImCsin2J2YT0QaVDGf+z8ondbAg==", + "version": "7.15.7", + "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.15.7.tgz", + "integrity": "sha512-K4JvCtQqad9OY2+yTU8w+E82ywk/fe+ELNlt1G8z3bVGlZfn/hOcQQsUhGhW/N+tb3fxK800wLtKOE/aM0m72w==", "dev": true }, "@babel/helper-validator-option": { @@ -1092,26 +1070,147 @@ "dev": true }, "@babel/helper-wrap-function": { - "version": "7.14.5", - "resolved": "https://registry.npmjs.org/@babel/helper-wrap-function/-/helper-wrap-function-7.14.5.tgz", - "integrity": "sha512-YEdjTCq+LNuNS1WfxsDCNpgXkJaIyqco6DAelTUjT4f2KIWC1nBcaCaSdHTBqQVLnTBexBcVcFhLSU1KnYuePQ==", + "version": "7.16.0", + "resolved": "https://registry.npmjs.org/@babel/helper-wrap-function/-/helper-wrap-function-7.16.0.tgz", + "integrity": "sha512-VVMGzYY3vkWgCJML+qVLvGIam902mJW0FvT7Avj1zEe0Gn7D93aWdLblYARTxEw+6DhZmtzhBM2zv0ekE5zg1g==", "dev": true, "requires": { - "@babel/helper-function-name": "^7.14.5", - "@babel/template": "^7.14.5", - "@babel/traverse": "^7.14.5", - "@babel/types": "^7.14.5" + "@babel/helper-function-name": "^7.16.0", + "@babel/template": "^7.16.0", + "@babel/traverse": "^7.16.0", + "@babel/types": "^7.16.0" + }, + "dependencies": { + "@babel/code-frame": { + "version": "7.16.0", + "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.16.0.tgz", + "integrity": "sha512-IF4EOMEV+bfYwOmNxGzSnjR2EmQod7f1UXOpZM3l4i4o4QNwzjtJAu/HxdjHq0aYBvdqMuQEY1eg0nqW9ZPORA==", + "dev": true, + "requires": { + "@babel/highlight": "^7.16.0" + } + }, + "@babel/generator": { + "version": "7.16.0", + "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.16.0.tgz", + "integrity": "sha512-RR8hUCfRQn9j9RPKEVXo9LiwoxLPYn6hNZlvUOR8tSnaxlD0p0+la00ZP9/SnRt6HchKr+X0fO2r8vrETiJGew==", + "dev": true, + "requires": { + "@babel/types": "^7.16.0", + "jsesc": "^2.5.1", + "source-map": "^0.5.0" + } + }, + "@babel/helper-function-name": { + "version": "7.16.0", + "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.16.0.tgz", + "integrity": "sha512-BZh4mEk1xi2h4HFjWUXRQX5AEx4rvaZxHgax9gcjdLWdkjsY7MKt5p0otjsg5noXw+pB+clMCjw+aEVYADMjog==", + "dev": true, + "requires": { + "@babel/helper-get-function-arity": "^7.16.0", + "@babel/template": "^7.16.0", + "@babel/types": "^7.16.0" + } + }, + "@babel/helper-get-function-arity": { + "version": "7.16.0", + "resolved": "https://registry.npmjs.org/@babel/helper-get-function-arity/-/helper-get-function-arity-7.16.0.tgz", + "integrity": "sha512-ASCquNcywC1NkYh/z7Cgp3w31YW8aojjYIlNg4VeJiHkqyP4AzIvr4qx7pYDb4/s8YcsZWqqOSxgkvjUz1kpDQ==", + "dev": true, + "requires": { + "@babel/types": "^7.16.0" + } + }, + "@babel/helper-hoist-variables": { + "version": "7.16.0", + "resolved": "https://registry.npmjs.org/@babel/helper-hoist-variables/-/helper-hoist-variables-7.16.0.tgz", + "integrity": "sha512-1AZlpazjUR0EQZQv3sgRNfM9mEVWPK3M6vlalczA+EECcPz3XPh6VplbErL5UoMpChhSck5wAJHthlj1bYpcmg==", + "dev": true, + "requires": { + "@babel/types": "^7.16.0" + } + }, + "@babel/helper-split-export-declaration": { + "version": "7.16.0", + "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.16.0.tgz", + "integrity": "sha512-0YMMRpuDFNGTHNRiiqJX19GjNXA4H0E8jZ2ibccfSxaCogbm3am5WN/2nQNj0YnQwGWM1J06GOcQ2qnh3+0paw==", + "dev": true, + "requires": { + "@babel/types": "^7.16.0" + } + }, + "@babel/highlight": { + "version": "7.16.0", + "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.16.0.tgz", + "integrity": "sha512-t8MH41kUQylBtu2+4IQA3atqevA2lRgqA2wyVB/YiWmsDSuylZZuXOUy9ric30hfzauEFfdsuk/eXTRrGrfd0g==", + "dev": true, + "requires": { + "@babel/helper-validator-identifier": "^7.15.7", + "chalk": "^2.0.0", + "js-tokens": "^4.0.0" + } + }, + "@babel/parser": { + "version": "7.16.2", + "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.16.2.tgz", + "integrity": "sha512-RUVpT0G2h6rOZwqLDTrKk7ksNv7YpAilTnYe1/Q+eDjxEceRMKVWbCsX7t8h6C1qCFi/1Y8WZjcEPBAFG27GPw==", + "dev": true + }, + "@babel/template": { + "version": "7.16.0", + "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.16.0.tgz", + "integrity": "sha512-MnZdpFD/ZdYhXwiunMqqgyZyucaYsbL0IrjoGjaVhGilz+x8YB++kRfygSOIj1yOtWKPlx7NBp+9I1RQSgsd5A==", + "dev": true, + "requires": { + "@babel/code-frame": "^7.16.0", + "@babel/parser": "^7.16.0", + "@babel/types": "^7.16.0" + } + }, + "@babel/traverse": { + "version": "7.16.0", + "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.16.0.tgz", + "integrity": "sha512-qQ84jIs1aRQxaGaxSysII9TuDaguZ5yVrEuC0BN2vcPlalwfLovVmCjbFDPECPXcYM/wLvNFfp8uDOliLxIoUQ==", + "dev": true, + "requires": { + "@babel/code-frame": "^7.16.0", + "@babel/generator": "^7.16.0", + "@babel/helper-function-name": "^7.16.0", + "@babel/helper-hoist-variables": "^7.16.0", + "@babel/helper-split-export-declaration": "^7.16.0", + "@babel/parser": "^7.16.0", + "@babel/types": "^7.16.0", + "debug": "^4.1.0", + "globals": "^11.1.0" + } + }, + "@babel/types": { + "version": "7.16.0", + "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.16.0.tgz", + "integrity": "sha512-PJgg/k3SdLsGb3hhisFvtLOw5ts113klrpLuIPtCJIU+BB24fqq6lf8RWqKJEjzqXR9AEH1rIb5XTqwBHB+kQg==", + "dev": true, + "requires": { + "@babel/helper-validator-identifier": "^7.15.7", + "to-fast-properties": "^2.0.0" + } + }, + "source-map": { + "version": "0.5.7", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz", + "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=", + "dev": true + } } }, "@babel/helpers": { - "version": "7.14.6", - "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.14.6.tgz", - "integrity": "sha512-yesp1ENQBiLI+iYHSJdoZKUtRpfTlL1grDIX9NRlAVppljLw/4tTyYupIB7uIYmC3stW/imAv8EqaKaS/ibmeA==", + "version": "7.15.4", + "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.15.4.tgz", + "integrity": "sha512-V45u6dqEJ3w2rlryYYXf6i9rQ5YMNu4FLS6ngs8ikblhu2VdR1AqAd6aJjBzmf2Qzh6KOLqKHxEN9+TFbAkAVQ==", "dev": true, "requires": { - "@babel/template": "^7.14.5", - "@babel/traverse": "^7.14.5", - "@babel/types": "^7.14.5" + "@babel/template": "^7.15.4", + "@babel/traverse": "^7.15.4", + "@babel/types": "^7.15.4" } }, "@babel/highlight": { @@ -1126,58 +1225,58 @@ } }, "@babel/parser": { - "version": "7.14.7", - "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.14.7.tgz", - "integrity": "sha512-X67Z5y+VBJuHB/RjwECp8kSl5uYi0BvRbNeWqkaJCVh+LiTPl19WBUfG627psSgp9rSf6ojuXghQM3ha6qHHdA==", + "version": "7.15.8", + "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.15.8.tgz", + "integrity": "sha512-BRYa3wcQnjS/nqI8Ac94pYYpJfojHVvVXJ97+IDCImX4Jc8W8Xv1+47enbruk+q1etOpsQNwnfFcNGw+gtPGxA==", "dev": true }, "@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining": { - "version": "7.14.5", - "resolved": "https://registry.npmjs.org/@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining/-/plugin-bugfix-v8-spread-parameters-in-optional-chaining-7.14.5.tgz", - "integrity": "sha512-ZoJS2XCKPBfTmL122iP6NM9dOg+d4lc9fFk3zxc8iDjvt8Pk4+TlsHSKhIPf6X+L5ORCdBzqMZDjL/WHj7WknQ==", + "version": "7.16.0", + "resolved": "https://registry.npmjs.org/@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining/-/plugin-bugfix-v8-spread-parameters-in-optional-chaining-7.16.0.tgz", + "integrity": "sha512-4tcFwwicpWTrpl9qjf7UsoosaArgImF85AxqCRZlgc3IQDvkUHjJpruXAL58Wmj+T6fypWTC/BakfEkwIL/pwA==", "dev": true, "requires": { "@babel/helper-plugin-utils": "^7.14.5", - "@babel/helper-skip-transparent-expression-wrappers": "^7.14.5", - "@babel/plugin-proposal-optional-chaining": "^7.14.5" + "@babel/helper-skip-transparent-expression-wrappers": "^7.16.0", + "@babel/plugin-proposal-optional-chaining": "^7.16.0" } }, "@babel/plugin-proposal-async-generator-functions": { - "version": "7.14.7", - "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-async-generator-functions/-/plugin-proposal-async-generator-functions-7.14.7.tgz", - "integrity": "sha512-RK8Wj7lXLY3bqei69/cc25gwS5puEc3dknoFPFbqfy3XxYQBQFvu4ioWpafMBAB+L9NyptQK4nMOa5Xz16og8Q==", + "version": "7.15.8", + "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-async-generator-functions/-/plugin-proposal-async-generator-functions-7.15.8.tgz", + "integrity": "sha512-2Z5F2R2ibINTc63mY7FLqGfEbmofrHU9FitJW1Q7aPaKFhiPvSq6QEt/BoWN5oME3GVyjcRuNNSRbb9LC0CSWA==", "dev": true, "requires": { "@babel/helper-plugin-utils": "^7.14.5", - "@babel/helper-remap-async-to-generator": "^7.14.5", + "@babel/helper-remap-async-to-generator": "^7.15.4", "@babel/plugin-syntax-async-generators": "^7.8.4" } }, "@babel/plugin-proposal-class-properties": { - "version": "7.14.5", - "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-class-properties/-/plugin-proposal-class-properties-7.14.5.tgz", - "integrity": "sha512-q/PLpv5Ko4dVc1LYMpCY7RVAAO4uk55qPwrIuJ5QJ8c6cVuAmhu7I/49JOppXL6gXf7ZHzpRVEUZdYoPLM04Gg==", + "version": "7.16.0", + "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-class-properties/-/plugin-proposal-class-properties-7.16.0.tgz", + "integrity": "sha512-mCF3HcuZSY9Fcx56Lbn+CGdT44ioBMMvjNVldpKtj8tpniETdLjnxdHI1+sDWXIM1nNt+EanJOZ3IG9lzVjs7A==", "dev": true, "requires": { - "@babel/helper-create-class-features-plugin": "^7.14.5", + "@babel/helper-create-class-features-plugin": "^7.16.0", "@babel/helper-plugin-utils": "^7.14.5" } }, "@babel/plugin-proposal-class-static-block": { - "version": "7.14.5", - "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-class-static-block/-/plugin-proposal-class-static-block-7.14.5.tgz", - "integrity": "sha512-KBAH5ksEnYHCegqseI5N9skTdxgJdmDoAOc0uXa+4QMYKeZD0w5IARh4FMlTNtaHhbB8v+KzMdTgxMMzsIy6Yg==", + "version": "7.16.0", + "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-class-static-block/-/plugin-proposal-class-static-block-7.16.0.tgz", + "integrity": "sha512-mAy3sdcY9sKAkf3lQbDiv3olOfiLqI51c9DR9b19uMoR2Z6r5pmGl7dfNFqEvqOyqbf1ta4lknK4gc5PJn3mfA==", "dev": true, "requires": { - "@babel/helper-create-class-features-plugin": "^7.14.5", + "@babel/helper-create-class-features-plugin": "^7.16.0", "@babel/helper-plugin-utils": "^7.14.5", "@babel/plugin-syntax-class-static-block": "^7.14.5" } }, "@babel/plugin-proposal-dynamic-import": { - "version": "7.14.5", - "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-dynamic-import/-/plugin-proposal-dynamic-import-7.14.5.tgz", - "integrity": "sha512-ExjiNYc3HDN5PXJx+bwC50GIx/KKanX2HiggnIUAYedbARdImiCU4RhhHfdf0Kd7JNXGpsBBBCOm+bBVy3Gb0g==", + "version": "7.16.0", + "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-dynamic-import/-/plugin-proposal-dynamic-import-7.16.0.tgz", + "integrity": "sha512-QGSA6ExWk95jFQgwz5GQ2Dr95cf7eI7TKutIXXTb7B1gCLTCz5hTjFTQGfLFBBiC5WSNi7udNwWsqbbMh1c4yQ==", "dev": true, "requires": { "@babel/helper-plugin-utils": "^7.14.5", @@ -1185,9 +1284,9 @@ } }, "@babel/plugin-proposal-export-namespace-from": { - "version": "7.14.5", - "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-export-namespace-from/-/plugin-proposal-export-namespace-from-7.14.5.tgz", - "integrity": "sha512-g5POA32bXPMmSBu5Dx/iZGLGnKmKPc5AiY7qfZgurzrCYgIztDlHFbznSNCoQuv57YQLnQfaDi7dxCtLDIdXdA==", + "version": "7.16.0", + "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-export-namespace-from/-/plugin-proposal-export-namespace-from-7.16.0.tgz", + "integrity": "sha512-CjI4nxM/D+5wCnhD11MHB1AwRSAYeDT+h8gCdcVJZ/OK7+wRzFsf7PFPWVpVpNRkHMmMkQWAHpTq+15IXQ1diA==", "dev": true, "requires": { "@babel/helper-plugin-utils": "^7.14.5", @@ -1195,9 +1294,9 @@ } }, "@babel/plugin-proposal-json-strings": { - "version": "7.14.5", - "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-json-strings/-/plugin-proposal-json-strings-7.14.5.tgz", - "integrity": "sha512-NSq2fczJYKVRIsUJyNxrVUMhB27zb7N7pOFGQOhBKJrChbGcgEAqyZrmZswkPk18VMurEeJAaICbfm57vUeTbQ==", + "version": "7.16.0", + "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-json-strings/-/plugin-proposal-json-strings-7.16.0.tgz", + "integrity": "sha512-kouIPuiv8mSi5JkEhzApg5Gn6hFyKPnlkO0a9YSzqRurH8wYzSlf6RJdzluAsbqecdW5pBvDJDfyDIUR/vLxvg==", "dev": true, "requires": { "@babel/helper-plugin-utils": "^7.14.5", @@ -1205,9 +1304,9 @@ } }, "@babel/plugin-proposal-logical-assignment-operators": { - "version": "7.14.5", - "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-logical-assignment-operators/-/plugin-proposal-logical-assignment-operators-7.14.5.tgz", - "integrity": "sha512-YGn2AvZAo9TwyhlLvCCWxD90Xq8xJ4aSgaX3G5D/8DW94L8aaT+dS5cSP+Z06+rCJERGSr9GxMBZ601xoc2taw==", + "version": "7.16.0", + "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-logical-assignment-operators/-/plugin-proposal-logical-assignment-operators-7.16.0.tgz", + "integrity": "sha512-pbW0fE30sVTYXXm9lpVQQ/Vc+iTeQKiXlaNRZPPN2A2VdlWyAtsUrsQ3xydSlDW00TFMK7a8m3cDTkBF5WnV3Q==", "dev": true, "requires": { "@babel/helper-plugin-utils": "^7.14.5", @@ -1215,9 +1314,9 @@ } }, "@babel/plugin-proposal-nullish-coalescing-operator": { - "version": "7.14.5", - "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-nullish-coalescing-operator/-/plugin-proposal-nullish-coalescing-operator-7.14.5.tgz", - "integrity": "sha512-gun/SOnMqjSb98Nkaq2rTKMwervfdAoz6NphdY0vTfuzMfryj+tDGb2n6UkDKwez+Y8PZDhE3D143v6Gepp4Hg==", + "version": "7.16.0", + "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-nullish-coalescing-operator/-/plugin-proposal-nullish-coalescing-operator-7.16.0.tgz", + "integrity": "sha512-3bnHA8CAFm7cG93v8loghDYyQ8r97Qydf63BeYiGgYbjKKB/XP53W15wfRC7dvKfoiJ34f6Rbyyx2btExc8XsQ==", "dev": true, "requires": { "@babel/helper-plugin-utils": "^7.14.5", @@ -1225,9 +1324,9 @@ } }, "@babel/plugin-proposal-numeric-separator": { - "version": "7.14.5", - "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-numeric-separator/-/plugin-proposal-numeric-separator-7.14.5.tgz", - "integrity": "sha512-yiclALKe0vyZRZE0pS6RXgjUOt87GWv6FYa5zqj15PvhOGFO69R5DusPlgK/1K5dVnCtegTiWu9UaBSrLLJJBg==", + "version": "7.16.0", + "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-numeric-separator/-/plugin-proposal-numeric-separator-7.16.0.tgz", + "integrity": "sha512-FAhE2I6mjispy+vwwd6xWPyEx3NYFS13pikDBWUAFGZvq6POGs5eNchw8+1CYoEgBl9n11I3NkzD7ghn25PQ9Q==", "dev": true, "requires": { "@babel/helper-plugin-utils": "^7.14.5", @@ -1235,22 +1334,48 @@ } }, "@babel/plugin-proposal-object-rest-spread": { - "version": "7.14.7", - "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-object-rest-spread/-/plugin-proposal-object-rest-spread-7.14.7.tgz", - "integrity": "sha512-082hsZz+sVabfmDWo1Oct1u1AgbKbUAyVgmX4otIc7bdsRgHBXwTwb3DpDmD4Eyyx6DNiuz5UAATT655k+kL5g==", + "version": "7.16.0", + "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-object-rest-spread/-/plugin-proposal-object-rest-spread-7.16.0.tgz", + "integrity": "sha512-LU/+jp89efe5HuWJLmMmFG0+xbz+I2rSI7iLc1AlaeSMDMOGzWlc5yJrMN1d04osXN4sSfpo4O+azkBNBes0jg==", "dev": true, "requires": { - "@babel/compat-data": "^7.14.7", - "@babel/helper-compilation-targets": "^7.14.5", + "@babel/compat-data": "^7.16.0", + "@babel/helper-compilation-targets": "^7.16.0", "@babel/helper-plugin-utils": "^7.14.5", "@babel/plugin-syntax-object-rest-spread": "^7.8.3", - "@babel/plugin-transform-parameters": "^7.14.5" + "@babel/plugin-transform-parameters": "^7.16.0" + }, + "dependencies": { + "@babel/compat-data": { + "version": "7.16.0", + "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.16.0.tgz", + "integrity": "sha512-DGjt2QZse5SGd9nfOSqO4WLJ8NN/oHkijbXbPrxuoJO3oIPJL3TciZs9FX+cOHNiY9E9l0opL8g7BmLe3T+9ew==", + "dev": true + }, + "@babel/helper-compilation-targets": { + "version": "7.16.0", + "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.16.0.tgz", + "integrity": "sha512-S7iaOT1SYlqK0sQaCi21RX4+13hmdmnxIEAnQUB/eh7GeAnRjOUgTYpLkUOiRXzD+yog1JxP0qyAQZ7ZxVxLVg==", + "dev": true, + "requires": { + "@babel/compat-data": "^7.16.0", + "@babel/helper-validator-option": "^7.14.5", + "browserslist": "^4.16.6", + "semver": "^6.3.0" + } + }, + "semver": { + "version": "6.3.0", + "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz", + "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==", + "dev": true + } } }, "@babel/plugin-proposal-optional-catch-binding": { - "version": "7.14.5", - "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-optional-catch-binding/-/plugin-proposal-optional-catch-binding-7.14.5.tgz", - "integrity": "sha512-3Oyiixm0ur7bzO5ybNcZFlmVsygSIQgdOa7cTfOYCMY+wEPAYhZAJxi3mixKFCTCKUhQXuCTtQ1MzrpL3WT8ZQ==", + "version": "7.16.0", + "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-optional-catch-binding/-/plugin-proposal-optional-catch-binding-7.16.0.tgz", + "integrity": "sha512-kicDo0A/5J0nrsCPbn89mTG3Bm4XgYi0CZtvex9Oyw7gGZE3HXGD0zpQNH+mo+tEfbo8wbmMvJftOwpmPy7aVw==", "dev": true, "requires": { "@babel/helper-plugin-utils": "^7.14.5", @@ -1258,45 +1383,66 @@ } }, "@babel/plugin-proposal-optional-chaining": { - "version": "7.14.5", - "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-optional-chaining/-/plugin-proposal-optional-chaining-7.14.5.tgz", - "integrity": "sha512-ycz+VOzo2UbWNI1rQXxIuMOzrDdHGrI23fRiz/Si2R4kv2XZQ1BK8ccdHwehMKBlcH/joGW/tzrUmo67gbJHlQ==", + "version": "7.16.0", + "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-optional-chaining/-/plugin-proposal-optional-chaining-7.16.0.tgz", + "integrity": "sha512-Y4rFpkZODfHrVo70Uaj6cC1JJOt3Pp0MdWSwIKtb8z1/lsjl9AmnB7ErRFV+QNGIfcY1Eruc2UMx5KaRnXjMyg==", "dev": true, "requires": { "@babel/helper-plugin-utils": "^7.14.5", - "@babel/helper-skip-transparent-expression-wrappers": "^7.14.5", + "@babel/helper-skip-transparent-expression-wrappers": "^7.16.0", "@babel/plugin-syntax-optional-chaining": "^7.8.3" } }, "@babel/plugin-proposal-private-methods": { - "version": "7.14.5", - "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-private-methods/-/plugin-proposal-private-methods-7.14.5.tgz", - "integrity": "sha512-838DkdUA1u+QTCplatfq4B7+1lnDa/+QMI89x5WZHBcnNv+47N8QEj2k9I2MUU9xIv8XJ4XvPCviM/Dj7Uwt9g==", + "version": "7.16.0", + "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-private-methods/-/plugin-proposal-private-methods-7.16.0.tgz", + "integrity": "sha512-IvHmcTHDFztQGnn6aWq4t12QaBXTKr1whF/dgp9kz84X6GUcwq9utj7z2wFCUfeOup/QKnOlt2k0zxkGFx9ubg==", "dev": true, "requires": { - "@babel/helper-create-class-features-plugin": "^7.14.5", + "@babel/helper-create-class-features-plugin": "^7.16.0", "@babel/helper-plugin-utils": "^7.14.5" } }, "@babel/plugin-proposal-private-property-in-object": { - "version": "7.14.5", - "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-private-property-in-object/-/plugin-proposal-private-property-in-object-7.14.5.tgz", - "integrity": "sha512-62EyfyA3WA0mZiF2e2IV9mc9Ghwxcg8YTu8BS4Wss4Y3PY725OmS9M0qLORbJwLqFtGh+jiE4wAmocK2CTUK2Q==", + "version": "7.16.0", + "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-private-property-in-object/-/plugin-proposal-private-property-in-object-7.16.0.tgz", + "integrity": "sha512-3jQUr/HBbMVZmi72LpjQwlZ55i1queL8KcDTQEkAHihttJnAPrcvG9ZNXIfsd2ugpizZo595egYV6xy+pv4Ofw==", "dev": true, "requires": { - "@babel/helper-annotate-as-pure": "^7.14.5", - "@babel/helper-create-class-features-plugin": "^7.14.5", + "@babel/helper-annotate-as-pure": "^7.16.0", + "@babel/helper-create-class-features-plugin": "^7.16.0", "@babel/helper-plugin-utils": "^7.14.5", "@babel/plugin-syntax-private-property-in-object": "^7.14.5" + }, + "dependencies": { + "@babel/helper-annotate-as-pure": { + "version": "7.16.0", + "resolved": "https://registry.npmjs.org/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.16.0.tgz", + "integrity": "sha512-ItmYF9vR4zA8cByDocY05o0LGUkp1zhbTQOH1NFyl5xXEqlTJQCEJjieriw+aFpxo16swMxUnUiKS7a/r4vtHg==", + "dev": true, + "requires": { + "@babel/types": "^7.16.0" + } + }, + "@babel/types": { + "version": "7.16.0", + "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.16.0.tgz", + "integrity": "sha512-PJgg/k3SdLsGb3hhisFvtLOw5ts113klrpLuIPtCJIU+BB24fqq6lf8RWqKJEjzqXR9AEH1rIb5XTqwBHB+kQg==", + "dev": true, + "requires": { + "@babel/helper-validator-identifier": "^7.15.7", + "to-fast-properties": "^2.0.0" + } + } } }, "@babel/plugin-proposal-unicode-property-regex": { - "version": "7.14.5", - "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-unicode-property-regex/-/plugin-proposal-unicode-property-regex-7.14.5.tgz", - "integrity": "sha512-6axIeOU5LnY471KenAB9vI8I5j7NQ2d652hIYwVyRfgaZT5UpiqFKCuVXCDMSrU+3VFafnu2c5m3lrWIlr6A5Q==", + "version": "7.16.0", + "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-unicode-property-regex/-/plugin-proposal-unicode-property-regex-7.16.0.tgz", + "integrity": "sha512-ti7IdM54NXv29cA4+bNNKEMS4jLMCbJgl+Drv+FgYy0erJLAxNAIXcNjNjrRZEcWq0xJHsNVwQezskMFpF8N9g==", "dev": true, "requires": { - "@babel/helper-create-regexp-features-plugin": "^7.14.5", + "@babel/helper-create-regexp-features-plugin": "^7.16.0", "@babel/helper-plugin-utils": "^7.14.5" } }, @@ -1427,9 +1573,9 @@ } }, "@babel/plugin-transform-arrow-functions": { - "version": "7.14.5", - "resolved": "https://registry.npmjs.org/@babel/plugin-transform-arrow-functions/-/plugin-transform-arrow-functions-7.14.5.tgz", - "integrity": "sha512-KOnO0l4+tD5IfOdi4x8C1XmEIRWUjNRV8wc6K2vz/3e8yAOoZZvsRXRRIF/yo/MAOFb4QjtAw9xSxMXbSMRy8A==", + "version": "7.16.0", + "resolved": "https://registry.npmjs.org/@babel/plugin-transform-arrow-functions/-/plugin-transform-arrow-functions-7.16.0.tgz", + "integrity": "sha512-vIFb5250Rbh7roWARvCLvIJ/PtAU5Lhv7BtZ1u24COwpI9Ypjsh+bZcKk6rlIyalK+r0jOc1XQ8I4ovNxNrWrA==", "dev": true, "requires": { "@babel/helper-plugin-utils": "^7.14.5" @@ -1447,238 +1593,536 @@ } }, "@babel/plugin-transform-block-scoped-functions": { - "version": "7.14.5", - "resolved": "https://registry.npmjs.org/@babel/plugin-transform-block-scoped-functions/-/plugin-transform-block-scoped-functions-7.14.5.tgz", - "integrity": "sha512-dtqWqdWZ5NqBX3KzsVCWfQI3A53Ft5pWFCT2eCVUftWZgjc5DpDponbIF1+c+7cSGk2wN0YK7HGL/ezfRbpKBQ==", + "version": "7.16.0", + "resolved": "https://registry.npmjs.org/@babel/plugin-transform-block-scoped-functions/-/plugin-transform-block-scoped-functions-7.16.0.tgz", + "integrity": "sha512-V14As3haUOP4ZWrLJ3VVx5rCnrYhMSHN/jX7z6FAt5hjRkLsb0snPCmJwSOML5oxkKO4FNoNv7V5hw/y2bjuvg==", "dev": true, "requires": { "@babel/helper-plugin-utils": "^7.14.5" } }, "@babel/plugin-transform-block-scoping": { - "version": "7.14.5", - "resolved": "https://registry.npmjs.org/@babel/plugin-transform-block-scoping/-/plugin-transform-block-scoping-7.14.5.tgz", - "integrity": "sha512-LBYm4ZocNgoCqyxMLoOnwpsmQ18HWTQvql64t3GvMUzLQrNoV1BDG0lNftC8QKYERkZgCCT/7J5xWGObGAyHDw==", + "version": "7.16.0", + "resolved": "https://registry.npmjs.org/@babel/plugin-transform-block-scoping/-/plugin-transform-block-scoping-7.16.0.tgz", + "integrity": "sha512-27n3l67/R3UrXfizlvHGuTwsRIFyce3D/6a37GRxn28iyTPvNXaW4XvznexRh1zUNLPjbLL22Id0XQElV94ruw==", "dev": true, "requires": { "@babel/helper-plugin-utils": "^7.14.5" } }, "@babel/plugin-transform-classes": { - "version": "7.14.9", - "resolved": "https://registry.npmjs.org/@babel/plugin-transform-classes/-/plugin-transform-classes-7.14.9.tgz", - "integrity": "sha512-NfZpTcxU3foGWbl4wxmZ35mTsYJy8oQocbeIMoDAGGFarAmSQlL+LWMkDx/tj6pNotpbX3rltIA4dprgAPOq5A==", + "version": "7.16.0", + "resolved": "https://registry.npmjs.org/@babel/plugin-transform-classes/-/plugin-transform-classes-7.16.0.tgz", + "integrity": "sha512-HUxMvy6GtAdd+GKBNYDWCIA776byUQH8zjnfjxwT1P1ARv/wFu8eBDpmXQcLS/IwRtrxIReGiplOwMeyO7nsDQ==", "dev": true, "requires": { - "@babel/helper-annotate-as-pure": "^7.14.5", - "@babel/helper-function-name": "^7.14.5", - "@babel/helper-optimise-call-expression": "^7.14.5", + "@babel/helper-annotate-as-pure": "^7.16.0", + "@babel/helper-function-name": "^7.16.0", + "@babel/helper-optimise-call-expression": "^7.16.0", "@babel/helper-plugin-utils": "^7.14.5", - "@babel/helper-replace-supers": "^7.14.5", - "@babel/helper-split-export-declaration": "^7.14.5", + "@babel/helper-replace-supers": "^7.16.0", + "@babel/helper-split-export-declaration": "^7.16.0", "globals": "^11.1.0" + }, + "dependencies": { + "@babel/code-frame": { + "version": "7.16.0", + "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.16.0.tgz", + "integrity": "sha512-IF4EOMEV+bfYwOmNxGzSnjR2EmQod7f1UXOpZM3l4i4o4QNwzjtJAu/HxdjHq0aYBvdqMuQEY1eg0nqW9ZPORA==", + "dev": true, + "requires": { + "@babel/highlight": "^7.16.0" + } + }, + "@babel/generator": { + "version": "7.16.0", + "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.16.0.tgz", + "integrity": "sha512-RR8hUCfRQn9j9RPKEVXo9LiwoxLPYn6hNZlvUOR8tSnaxlD0p0+la00ZP9/SnRt6HchKr+X0fO2r8vrETiJGew==", + "dev": true, + "requires": { + "@babel/types": "^7.16.0", + "jsesc": "^2.5.1", + "source-map": "^0.5.0" + } + }, + "@babel/helper-annotate-as-pure": { + "version": "7.16.0", + "resolved": "https://registry.npmjs.org/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.16.0.tgz", + "integrity": "sha512-ItmYF9vR4zA8cByDocY05o0LGUkp1zhbTQOH1NFyl5xXEqlTJQCEJjieriw+aFpxo16swMxUnUiKS7a/r4vtHg==", + "dev": true, + "requires": { + "@babel/types": "^7.16.0" + } + }, + "@babel/helper-function-name": { + "version": "7.16.0", + "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.16.0.tgz", + "integrity": "sha512-BZh4mEk1xi2h4HFjWUXRQX5AEx4rvaZxHgax9gcjdLWdkjsY7MKt5p0otjsg5noXw+pB+clMCjw+aEVYADMjog==", + "dev": true, + "requires": { + "@babel/helper-get-function-arity": "^7.16.0", + "@babel/template": "^7.16.0", + "@babel/types": "^7.16.0" + } + }, + "@babel/helper-get-function-arity": { + "version": "7.16.0", + "resolved": "https://registry.npmjs.org/@babel/helper-get-function-arity/-/helper-get-function-arity-7.16.0.tgz", + "integrity": "sha512-ASCquNcywC1NkYh/z7Cgp3w31YW8aojjYIlNg4VeJiHkqyP4AzIvr4qx7pYDb4/s8YcsZWqqOSxgkvjUz1kpDQ==", + "dev": true, + "requires": { + "@babel/types": "^7.16.0" + } + }, + "@babel/helper-hoist-variables": { + "version": "7.16.0", + "resolved": "https://registry.npmjs.org/@babel/helper-hoist-variables/-/helper-hoist-variables-7.16.0.tgz", + "integrity": "sha512-1AZlpazjUR0EQZQv3sgRNfM9mEVWPK3M6vlalczA+EECcPz3XPh6VplbErL5UoMpChhSck5wAJHthlj1bYpcmg==", + "dev": true, + "requires": { + "@babel/types": "^7.16.0" + } + }, + "@babel/helper-member-expression-to-functions": { + "version": "7.16.0", + "resolved": "https://registry.npmjs.org/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.16.0.tgz", + "integrity": "sha512-bsjlBFPuWT6IWhl28EdrQ+gTvSvj5tqVP5Xeftp07SEuz5pLnsXZuDkDD3Rfcxy0IsHmbZ+7B2/9SHzxO0T+sQ==", + "dev": true, + "requires": { + "@babel/types": "^7.16.0" + } + }, + "@babel/helper-optimise-call-expression": { + "version": "7.16.0", + "resolved": "https://registry.npmjs.org/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.16.0.tgz", + "integrity": "sha512-SuI467Gi2V8fkofm2JPnZzB/SUuXoJA5zXe/xzyPP2M04686RzFKFHPK6HDVN6JvWBIEW8tt9hPR7fXdn2Lgpw==", + "dev": true, + "requires": { + "@babel/types": "^7.16.0" + } + }, + "@babel/helper-replace-supers": { + "version": "7.16.0", + "resolved": "https://registry.npmjs.org/@babel/helper-replace-supers/-/helper-replace-supers-7.16.0.tgz", + "integrity": "sha512-TQxuQfSCdoha7cpRNJvfaYxxxzmbxXw/+6cS7V02eeDYyhxderSoMVALvwupA54/pZcOTtVeJ0xccp1nGWladA==", + "dev": true, + "requires": { + "@babel/helper-member-expression-to-functions": "^7.16.0", + "@babel/helper-optimise-call-expression": "^7.16.0", + "@babel/traverse": "^7.16.0", + "@babel/types": "^7.16.0" + } + }, + "@babel/helper-split-export-declaration": { + "version": "7.16.0", + "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.16.0.tgz", + "integrity": "sha512-0YMMRpuDFNGTHNRiiqJX19GjNXA4H0E8jZ2ibccfSxaCogbm3am5WN/2nQNj0YnQwGWM1J06GOcQ2qnh3+0paw==", + "dev": true, + "requires": { + "@babel/types": "^7.16.0" + } + }, + "@babel/highlight": { + "version": "7.16.0", + "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.16.0.tgz", + "integrity": "sha512-t8MH41kUQylBtu2+4IQA3atqevA2lRgqA2wyVB/YiWmsDSuylZZuXOUy9ric30hfzauEFfdsuk/eXTRrGrfd0g==", + "dev": true, + "requires": { + "@babel/helper-validator-identifier": "^7.15.7", + "chalk": "^2.0.0", + "js-tokens": "^4.0.0" + } + }, + "@babel/parser": { + "version": "7.16.2", + "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.16.2.tgz", + "integrity": "sha512-RUVpT0G2h6rOZwqLDTrKk7ksNv7YpAilTnYe1/Q+eDjxEceRMKVWbCsX7t8h6C1qCFi/1Y8WZjcEPBAFG27GPw==", + "dev": true + }, + "@babel/template": { + "version": "7.16.0", + "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.16.0.tgz", + "integrity": "sha512-MnZdpFD/ZdYhXwiunMqqgyZyucaYsbL0IrjoGjaVhGilz+x8YB++kRfygSOIj1yOtWKPlx7NBp+9I1RQSgsd5A==", + "dev": true, + "requires": { + "@babel/code-frame": "^7.16.0", + "@babel/parser": "^7.16.0", + "@babel/types": "^7.16.0" + } + }, + "@babel/traverse": { + "version": "7.16.0", + "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.16.0.tgz", + "integrity": "sha512-qQ84jIs1aRQxaGaxSysII9TuDaguZ5yVrEuC0BN2vcPlalwfLovVmCjbFDPECPXcYM/wLvNFfp8uDOliLxIoUQ==", + "dev": true, + "requires": { + "@babel/code-frame": "^7.16.0", + "@babel/generator": "^7.16.0", + "@babel/helper-function-name": "^7.16.0", + "@babel/helper-hoist-variables": "^7.16.0", + "@babel/helper-split-export-declaration": "^7.16.0", + "@babel/parser": "^7.16.0", + "@babel/types": "^7.16.0", + "debug": "^4.1.0", + "globals": "^11.1.0" + } + }, + "@babel/types": { + "version": "7.16.0", + "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.16.0.tgz", + "integrity": "sha512-PJgg/k3SdLsGb3hhisFvtLOw5ts113klrpLuIPtCJIU+BB24fqq6lf8RWqKJEjzqXR9AEH1rIb5XTqwBHB+kQg==", + "dev": true, + "requires": { + "@babel/helper-validator-identifier": "^7.15.7", + "to-fast-properties": "^2.0.0" + } + }, + "source-map": { + "version": "0.5.7", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz", + "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=", + "dev": true + } } }, "@babel/plugin-transform-computed-properties": { - "version": "7.14.5", - "resolved": "https://registry.npmjs.org/@babel/plugin-transform-computed-properties/-/plugin-transform-computed-properties-7.14.5.tgz", - "integrity": "sha512-pWM+E4283UxaVzLb8UBXv4EIxMovU4zxT1OPnpHJcmnvyY9QbPPTKZfEj31EUvG3/EQRbYAGaYEUZ4yWOBC2xg==", + "version": "7.16.0", + "resolved": "https://registry.npmjs.org/@babel/plugin-transform-computed-properties/-/plugin-transform-computed-properties-7.16.0.tgz", + "integrity": "sha512-63l1dRXday6S8V3WFY5mXJwcRAnPYxvFfTlt67bwV1rTyVTM5zrp0DBBb13Kl7+ehkCVwIZPumPpFP/4u70+Tw==", "dev": true, "requires": { "@babel/helper-plugin-utils": "^7.14.5" } }, "@babel/plugin-transform-destructuring": { - "version": "7.14.7", - "resolved": "https://registry.npmjs.org/@babel/plugin-transform-destructuring/-/plugin-transform-destructuring-7.14.7.tgz", - "integrity": "sha512-0mDE99nK+kVh3xlc5vKwB6wnP9ecuSj+zQCa/n0voENtP/zymdT4HH6QEb65wjjcbqr1Jb/7z9Qp7TF5FtwYGw==", + "version": "7.16.0", + "resolved": "https://registry.npmjs.org/@babel/plugin-transform-destructuring/-/plugin-transform-destructuring-7.16.0.tgz", + "integrity": "sha512-Q7tBUwjxLTsHEoqktemHBMtb3NYwyJPTJdM+wDwb0g8PZ3kQUIzNvwD5lPaqW/p54TXBc/MXZu9Jr7tbUEUM8Q==", "dev": true, "requires": { "@babel/helper-plugin-utils": "^7.14.5" } }, "@babel/plugin-transform-dotall-regex": { - "version": "7.14.5", - "resolved": "https://registry.npmjs.org/@babel/plugin-transform-dotall-regex/-/plugin-transform-dotall-regex-7.14.5.tgz", - "integrity": "sha512-loGlnBdj02MDsFaHhAIJzh7euK89lBrGIdM9EAtHFo6xKygCUGuuWe07o1oZVk287amtW1n0808sQM99aZt3gw==", + "version": "7.16.0", + "resolved": "https://registry.npmjs.org/@babel/plugin-transform-dotall-regex/-/plugin-transform-dotall-regex-7.16.0.tgz", + "integrity": "sha512-FXlDZfQeLILfJlC6I1qyEwcHK5UpRCFkaoVyA1nk9A1L1Yu583YO4un2KsLBsu3IJb4CUbctZks8tD9xPQubLw==", "dev": true, "requires": { - "@babel/helper-create-regexp-features-plugin": "^7.14.5", + "@babel/helper-create-regexp-features-plugin": "^7.16.0", "@babel/helper-plugin-utils": "^7.14.5" } }, "@babel/plugin-transform-duplicate-keys": { - "version": "7.14.5", - "resolved": "https://registry.npmjs.org/@babel/plugin-transform-duplicate-keys/-/plugin-transform-duplicate-keys-7.14.5.tgz", - "integrity": "sha512-iJjbI53huKbPDAsJ8EmVmvCKeeq21bAze4fu9GBQtSLqfvzj2oRuHVx4ZkDwEhg1htQ+5OBZh/Ab0XDf5iBZ7A==", + "version": "7.16.0", + "resolved": "https://registry.npmjs.org/@babel/plugin-transform-duplicate-keys/-/plugin-transform-duplicate-keys-7.16.0.tgz", + "integrity": "sha512-LIe2kcHKAZOJDNxujvmp6z3mfN6V9lJxubU4fJIGoQCkKe3Ec2OcbdlYP+vW++4MpxwG0d1wSDOJtQW5kLnkZQ==", "dev": true, "requires": { "@babel/helper-plugin-utils": "^7.14.5" } }, "@babel/plugin-transform-exponentiation-operator": { - "version": "7.14.5", - "resolved": "https://registry.npmjs.org/@babel/plugin-transform-exponentiation-operator/-/plugin-transform-exponentiation-operator-7.14.5.tgz", - "integrity": "sha512-jFazJhMBc9D27o9jDnIE5ZErI0R0m7PbKXVq77FFvqFbzvTMuv8jaAwLZ5PviOLSFttqKIW0/wxNSDbjLk0tYA==", + "version": "7.16.0", + "resolved": "https://registry.npmjs.org/@babel/plugin-transform-exponentiation-operator/-/plugin-transform-exponentiation-operator-7.16.0.tgz", + "integrity": "sha512-OwYEvzFI38hXklsrbNivzpO3fh87skzx8Pnqi4LoSYeav0xHlueSoCJrSgTPfnbyzopo5b3YVAJkFIcUpK2wsw==", "dev": true, "requires": { - "@babel/helper-builder-binary-assignment-operator-visitor": "^7.14.5", + "@babel/helper-builder-binary-assignment-operator-visitor": "^7.16.0", "@babel/helper-plugin-utils": "^7.14.5" } }, "@babel/plugin-transform-for-of": { - "version": "7.14.5", - "resolved": "https://registry.npmjs.org/@babel/plugin-transform-for-of/-/plugin-transform-for-of-7.14.5.tgz", - "integrity": "sha512-CfmqxSUZzBl0rSjpoQSFoR9UEj3HzbGuGNL21/iFTmjb5gFggJp3ph0xR1YBhexmLoKRHzgxuFvty2xdSt6gTA==", + "version": "7.16.0", + "resolved": "https://registry.npmjs.org/@babel/plugin-transform-for-of/-/plugin-transform-for-of-7.16.0.tgz", + "integrity": "sha512-5QKUw2kO+GVmKr2wMYSATCTTnHyscl6sxFRAY+rvN7h7WB0lcG0o4NoV6ZQU32OZGVsYUsfLGgPQpDFdkfjlJQ==", "dev": true, "requires": { "@babel/helper-plugin-utils": "^7.14.5" } }, "@babel/plugin-transform-function-name": { - "version": "7.14.5", - "resolved": "https://registry.npmjs.org/@babel/plugin-transform-function-name/-/plugin-transform-function-name-7.14.5.tgz", - "integrity": "sha512-vbO6kv0fIzZ1GpmGQuvbwwm+O4Cbm2NrPzwlup9+/3fdkuzo1YqOZcXw26+YUJB84Ja7j9yURWposEHLYwxUfQ==", - "dev": true, - "requires": { - "@babel/helper-function-name": "^7.14.5", - "@babel/helper-plugin-utils": "^7.14.5" - } - }, - "@babel/plugin-transform-literals": { - "version": "7.14.5", - "resolved": "https://registry.npmjs.org/@babel/plugin-transform-literals/-/plugin-transform-literals-7.14.5.tgz", - "integrity": "sha512-ql33+epql2F49bi8aHXxvLURHkxJbSmMKl9J5yHqg4PLtdE6Uc48CH1GS6TQvZ86eoB/ApZXwm7jlA+B3kra7A==", - "dev": true, - "requires": { - "@babel/helper-plugin-utils": "^7.14.5" - } - }, - "@babel/plugin-transform-member-expression-literals": { - "version": "7.14.5", - "resolved": "https://registry.npmjs.org/@babel/plugin-transform-member-expression-literals/-/plugin-transform-member-expression-literals-7.14.5.tgz", - "integrity": "sha512-WkNXxH1VXVTKarWFqmso83xl+2V3Eo28YY5utIkbsmXoItO8Q3aZxN4BTS2k0hz9dGUloHK26mJMyQEYfkn/+Q==", + "version": "7.16.0", + "resolved": "https://registry.npmjs.org/@babel/plugin-transform-function-name/-/plugin-transform-function-name-7.16.0.tgz", + "integrity": "sha512-lBzMle9jcOXtSOXUpc7tvvTpENu/NuekNJVova5lCCWCV9/U1ho2HH2y0p6mBg8fPm/syEAbfaaemYGOHCY3mg==", "dev": true, "requires": { + "@babel/helper-function-name": "^7.16.0", "@babel/helper-plugin-utils": "^7.14.5" - } - }, - "@babel/plugin-transform-modules-amd": { - "version": "7.14.5", - "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-amd/-/plugin-transform-modules-amd-7.14.5.tgz", - "integrity": "sha512-3lpOU8Vxmp3roC4vzFpSdEpGUWSMsHFreTWOMMLzel2gNGfHE5UWIh/LN6ghHs2xurUp4jRFYMUIZhuFbody1g==", - "dev": true, - "requires": { - "@babel/helper-module-transforms": "^7.14.5", - "@babel/helper-plugin-utils": "^7.14.5", - "babel-plugin-dynamic-import-node": "^2.3.3" - } - }, - "@babel/plugin-transform-modules-commonjs": { - "version": "7.15.0", - "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.15.0.tgz", - "integrity": "sha512-3H/R9s8cXcOGE8kgMlmjYYC9nqr5ELiPkJn4q0mypBrjhYQoc+5/Maq69vV4xRPWnkzZuwJPf5rArxpB/35Cig==", - "dev": true, - "requires": { - "@babel/helper-module-transforms": "^7.15.0", - "@babel/helper-plugin-utils": "^7.14.5", - "@babel/helper-simple-access": "^7.14.8", - "babel-plugin-dynamic-import-node": "^2.3.3" }, "dependencies": { - "@babel/generator": { - "version": "7.15.0", - "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.15.0.tgz", - "integrity": "sha512-eKl4XdMrbpYvuB505KTta4AV9g+wWzmVBW69tX0H2NwKVKd2YJbKgyK6M8j/rgLbmHOYJn6rUklV677nOyJrEQ==", + "@babel/code-frame": { + "version": "7.16.0", + "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.16.0.tgz", + "integrity": "sha512-IF4EOMEV+bfYwOmNxGzSnjR2EmQod7f1UXOpZM3l4i4o4QNwzjtJAu/HxdjHq0aYBvdqMuQEY1eg0nqW9ZPORA==", "dev": true, "requires": { - "@babel/types": "^7.15.0", - "jsesc": "^2.5.1", - "source-map": "^0.5.0" + "@babel/highlight": "^7.16.0" } }, - "@babel/helper-member-expression-to-functions": { - "version": "7.15.0", - "resolved": "https://registry.npmjs.org/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.15.0.tgz", - "integrity": "sha512-Jq8H8U2kYiafuj2xMTPQwkTBnEEdGKpT35lJEQsRRjnG0LW3neucsaMWLgKcwu3OHKNeYugfw+Z20BXBSEs2Lg==", + "@babel/helper-function-name": { + "version": "7.16.0", + "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.16.0.tgz", + "integrity": "sha512-BZh4mEk1xi2h4HFjWUXRQX5AEx4rvaZxHgax9gcjdLWdkjsY7MKt5p0otjsg5noXw+pB+clMCjw+aEVYADMjog==", "dev": true, "requires": { - "@babel/types": "^7.15.0" + "@babel/helper-get-function-arity": "^7.16.0", + "@babel/template": "^7.16.0", + "@babel/types": "^7.16.0" } }, - "@babel/helper-module-transforms": { - "version": "7.15.0", - "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.15.0.tgz", - "integrity": "sha512-RkGiW5Rer7fpXv9m1B3iHIFDZdItnO2/BLfWVW/9q7+KqQSDY5kUfQEbzdXM1MVhJGcugKV7kRrNVzNxmk7NBg==", + "@babel/helper-get-function-arity": { + "version": "7.16.0", + "resolved": "https://registry.npmjs.org/@babel/helper-get-function-arity/-/helper-get-function-arity-7.16.0.tgz", + "integrity": "sha512-ASCquNcywC1NkYh/z7Cgp3w31YW8aojjYIlNg4VeJiHkqyP4AzIvr4qx7pYDb4/s8YcsZWqqOSxgkvjUz1kpDQ==", "dev": true, "requires": { - "@babel/helper-module-imports": "^7.14.5", - "@babel/helper-replace-supers": "^7.15.0", - "@babel/helper-simple-access": "^7.14.8", - "@babel/helper-split-export-declaration": "^7.14.5", - "@babel/helper-validator-identifier": "^7.14.9", - "@babel/template": "^7.14.5", - "@babel/traverse": "^7.15.0", - "@babel/types": "^7.15.0" + "@babel/types": "^7.16.0" } }, - "@babel/helper-replace-supers": { - "version": "7.15.0", - "resolved": "https://registry.npmjs.org/@babel/helper-replace-supers/-/helper-replace-supers-7.15.0.tgz", - "integrity": "sha512-6O+eWrhx+HEra/uJnifCwhwMd6Bp5+ZfZeJwbqUTuqkhIT6YcRhiZCOOFChRypOIe0cV46kFrRBlm+t5vHCEaA==", + "@babel/highlight": { + "version": "7.16.0", + "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.16.0.tgz", + "integrity": "sha512-t8MH41kUQylBtu2+4IQA3atqevA2lRgqA2wyVB/YiWmsDSuylZZuXOUy9ric30hfzauEFfdsuk/eXTRrGrfd0g==", "dev": true, "requires": { - "@babel/helper-member-expression-to-functions": "^7.15.0", - "@babel/helper-optimise-call-expression": "^7.14.5", - "@babel/traverse": "^7.15.0", - "@babel/types": "^7.15.0" + "@babel/helper-validator-identifier": "^7.15.7", + "chalk": "^2.0.0", + "js-tokens": "^4.0.0" } }, - "@babel/helper-simple-access": { - "version": "7.14.8", - "resolved": "https://registry.npmjs.org/@babel/helper-simple-access/-/helper-simple-access-7.14.8.tgz", - "integrity": "sha512-TrFN4RHh9gnWEU+s7JloIho2T76GPwRHhdzOWLqTrMnlas8T9O7ec+oEDNsRXndOmru9ymH9DFrEOxpzPoSbdg==", + "@babel/parser": { + "version": "7.16.2", + "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.16.2.tgz", + "integrity": "sha512-RUVpT0G2h6rOZwqLDTrKk7ksNv7YpAilTnYe1/Q+eDjxEceRMKVWbCsX7t8h6C1qCFi/1Y8WZjcEPBAFG27GPw==", + "dev": true + }, + "@babel/template": { + "version": "7.16.0", + "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.16.0.tgz", + "integrity": "sha512-MnZdpFD/ZdYhXwiunMqqgyZyucaYsbL0IrjoGjaVhGilz+x8YB++kRfygSOIj1yOtWKPlx7NBp+9I1RQSgsd5A==", "dev": true, "requires": { - "@babel/types": "^7.14.8" + "@babel/code-frame": "^7.16.0", + "@babel/parser": "^7.16.0", + "@babel/types": "^7.16.0" } }, - "@babel/helper-validator-identifier": { - "version": "7.14.9", - "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.14.9.tgz", - "integrity": "sha512-pQYxPY0UP6IHISRitNe8bsijHex4TWZXi2HwKVsjPiltzlhse2znVcm9Ace510VT1kxIHjGJCZZQBX2gJDbo0g==", - "dev": true + "@babel/types": { + "version": "7.16.0", + "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.16.0.tgz", + "integrity": "sha512-PJgg/k3SdLsGb3hhisFvtLOw5ts113klrpLuIPtCJIU+BB24fqq6lf8RWqKJEjzqXR9AEH1rIb5XTqwBHB+kQg==", + "dev": true, + "requires": { + "@babel/helper-validator-identifier": "^7.15.7", + "to-fast-properties": "^2.0.0" + } + } + } + }, + "@babel/plugin-transform-literals": { + "version": "7.16.0", + "resolved": "https://registry.npmjs.org/@babel/plugin-transform-literals/-/plugin-transform-literals-7.16.0.tgz", + "integrity": "sha512-gQDlsSF1iv9RU04clgXqRjrPyyoJMTclFt3K1cjLmTKikc0s/6vE3hlDeEVC71wLTRu72Fq7650kABrdTc2wMQ==", + "dev": true, + "requires": { + "@babel/helper-plugin-utils": "^7.14.5" + } + }, + "@babel/plugin-transform-member-expression-literals": { + "version": "7.16.0", + "resolved": "https://registry.npmjs.org/@babel/plugin-transform-member-expression-literals/-/plugin-transform-member-expression-literals-7.16.0.tgz", + "integrity": "sha512-WRpw5HL4Jhnxw8QARzRvwojp9MIE7Tdk3ez6vRyUk1MwgjJN0aNpRoXainLR5SgxmoXx/vsXGZ6OthP6t/RbUg==", + "dev": true, + "requires": { + "@babel/helper-plugin-utils": "^7.14.5" + } + }, + "@babel/plugin-transform-modules-amd": { + "version": "7.16.0", + "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-amd/-/plugin-transform-modules-amd-7.16.0.tgz", + "integrity": "sha512-rWFhWbCJ9Wdmzln1NmSCqn7P0RAD+ogXG/bd9Kg5c7PKWkJtkiXmYsMBeXjDlzHpVTJ4I/hnjs45zX4dEv81xw==", + "dev": true, + "requires": { + "@babel/helper-module-transforms": "^7.16.0", + "@babel/helper-plugin-utils": "^7.14.5", + "babel-plugin-dynamic-import-node": "^2.3.3" + }, + "dependencies": { + "@babel/code-frame": { + "version": "7.16.0", + "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.16.0.tgz", + "integrity": "sha512-IF4EOMEV+bfYwOmNxGzSnjR2EmQod7f1UXOpZM3l4i4o4QNwzjtJAu/HxdjHq0aYBvdqMuQEY1eg0nqW9ZPORA==", + "dev": true, + "requires": { + "@babel/highlight": "^7.16.0" + } + }, + "@babel/generator": { + "version": "7.16.0", + "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.16.0.tgz", + "integrity": "sha512-RR8hUCfRQn9j9RPKEVXo9LiwoxLPYn6hNZlvUOR8tSnaxlD0p0+la00ZP9/SnRt6HchKr+X0fO2r8vrETiJGew==", + "dev": true, + "requires": { + "@babel/types": "^7.16.0", + "jsesc": "^2.5.1", + "source-map": "^0.5.0" + } + }, + "@babel/helper-function-name": { + "version": "7.16.0", + "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.16.0.tgz", + "integrity": "sha512-BZh4mEk1xi2h4HFjWUXRQX5AEx4rvaZxHgax9gcjdLWdkjsY7MKt5p0otjsg5noXw+pB+clMCjw+aEVYADMjog==", + "dev": true, + "requires": { + "@babel/helper-get-function-arity": "^7.16.0", + "@babel/template": "^7.16.0", + "@babel/types": "^7.16.0" + } + }, + "@babel/helper-get-function-arity": { + "version": "7.16.0", + "resolved": "https://registry.npmjs.org/@babel/helper-get-function-arity/-/helper-get-function-arity-7.16.0.tgz", + "integrity": "sha512-ASCquNcywC1NkYh/z7Cgp3w31YW8aojjYIlNg4VeJiHkqyP4AzIvr4qx7pYDb4/s8YcsZWqqOSxgkvjUz1kpDQ==", + "dev": true, + "requires": { + "@babel/types": "^7.16.0" + } + }, + "@babel/helper-hoist-variables": { + "version": "7.16.0", + "resolved": "https://registry.npmjs.org/@babel/helper-hoist-variables/-/helper-hoist-variables-7.16.0.tgz", + "integrity": "sha512-1AZlpazjUR0EQZQv3sgRNfM9mEVWPK3M6vlalczA+EECcPz3XPh6VplbErL5UoMpChhSck5wAJHthlj1bYpcmg==", + "dev": true, + "requires": { + "@babel/types": "^7.16.0" + } + }, + "@babel/helper-member-expression-to-functions": { + "version": "7.16.0", + "resolved": "https://registry.npmjs.org/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.16.0.tgz", + "integrity": "sha512-bsjlBFPuWT6IWhl28EdrQ+gTvSvj5tqVP5Xeftp07SEuz5pLnsXZuDkDD3Rfcxy0IsHmbZ+7B2/9SHzxO0T+sQ==", + "dev": true, + "requires": { + "@babel/types": "^7.16.0" + } + }, + "@babel/helper-module-imports": { + "version": "7.16.0", + "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.16.0.tgz", + "integrity": "sha512-kkH7sWzKPq0xt3H1n+ghb4xEMP8k0U7XV3kkB+ZGy69kDk2ySFW1qPi06sjKzFY3t1j6XbJSqr4mF9L7CYVyhg==", + "dev": true, + "requires": { + "@babel/types": "^7.16.0" + } + }, + "@babel/helper-module-transforms": { + "version": "7.16.0", + "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.16.0.tgz", + "integrity": "sha512-My4cr9ATcaBbmaEa8M0dZNA74cfI6gitvUAskgDtAFmAqyFKDSHQo5YstxPbN+lzHl2D9l/YOEFqb2mtUh4gfA==", + "dev": true, + "requires": { + "@babel/helper-module-imports": "^7.16.0", + "@babel/helper-replace-supers": "^7.16.0", + "@babel/helper-simple-access": "^7.16.0", + "@babel/helper-split-export-declaration": "^7.16.0", + "@babel/helper-validator-identifier": "^7.15.7", + "@babel/template": "^7.16.0", + "@babel/traverse": "^7.16.0", + "@babel/types": "^7.16.0" + } + }, + "@babel/helper-optimise-call-expression": { + "version": "7.16.0", + "resolved": "https://registry.npmjs.org/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.16.0.tgz", + "integrity": "sha512-SuI467Gi2V8fkofm2JPnZzB/SUuXoJA5zXe/xzyPP2M04686RzFKFHPK6HDVN6JvWBIEW8tt9hPR7fXdn2Lgpw==", + "dev": true, + "requires": { + "@babel/types": "^7.16.0" + } + }, + "@babel/helper-replace-supers": { + "version": "7.16.0", + "resolved": "https://registry.npmjs.org/@babel/helper-replace-supers/-/helper-replace-supers-7.16.0.tgz", + "integrity": "sha512-TQxuQfSCdoha7cpRNJvfaYxxxzmbxXw/+6cS7V02eeDYyhxderSoMVALvwupA54/pZcOTtVeJ0xccp1nGWladA==", + "dev": true, + "requires": { + "@babel/helper-member-expression-to-functions": "^7.16.0", + "@babel/helper-optimise-call-expression": "^7.16.0", + "@babel/traverse": "^7.16.0", + "@babel/types": "^7.16.0" + } + }, + "@babel/helper-simple-access": { + "version": "7.16.0", + "resolved": "https://registry.npmjs.org/@babel/helper-simple-access/-/helper-simple-access-7.16.0.tgz", + "integrity": "sha512-o1rjBT/gppAqKsYfUdfHq5Rk03lMQrkPHG1OWzHWpLgVXRH4HnMM9Et9CVdIqwkCQlobnGHEJMsgWP/jE1zUiw==", + "dev": true, + "requires": { + "@babel/types": "^7.16.0" + } + }, + "@babel/helper-split-export-declaration": { + "version": "7.16.0", + "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.16.0.tgz", + "integrity": "sha512-0YMMRpuDFNGTHNRiiqJX19GjNXA4H0E8jZ2ibccfSxaCogbm3am5WN/2nQNj0YnQwGWM1J06GOcQ2qnh3+0paw==", + "dev": true, + "requires": { + "@babel/types": "^7.16.0" + } + }, + "@babel/highlight": { + "version": "7.16.0", + "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.16.0.tgz", + "integrity": "sha512-t8MH41kUQylBtu2+4IQA3atqevA2lRgqA2wyVB/YiWmsDSuylZZuXOUy9ric30hfzauEFfdsuk/eXTRrGrfd0g==", + "dev": true, + "requires": { + "@babel/helper-validator-identifier": "^7.15.7", + "chalk": "^2.0.0", + "js-tokens": "^4.0.0" + } }, "@babel/parser": { - "version": "7.15.0", - "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.15.0.tgz", - "integrity": "sha512-0v7oNOjr6YT9Z2RAOTv4T9aP+ubfx4Q/OhVtAet7PFDt0t9Oy6Jn+/rfC6b8HJ5zEqrQCiMxJfgtHpmIminmJQ==", + "version": "7.16.2", + "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.16.2.tgz", + "integrity": "sha512-RUVpT0G2h6rOZwqLDTrKk7ksNv7YpAilTnYe1/Q+eDjxEceRMKVWbCsX7t8h6C1qCFi/1Y8WZjcEPBAFG27GPw==", "dev": true }, + "@babel/template": { + "version": "7.16.0", + "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.16.0.tgz", + "integrity": "sha512-MnZdpFD/ZdYhXwiunMqqgyZyucaYsbL0IrjoGjaVhGilz+x8YB++kRfygSOIj1yOtWKPlx7NBp+9I1RQSgsd5A==", + "dev": true, + "requires": { + "@babel/code-frame": "^7.16.0", + "@babel/parser": "^7.16.0", + "@babel/types": "^7.16.0" + } + }, "@babel/traverse": { - "version": "7.15.0", - "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.15.0.tgz", - "integrity": "sha512-392d8BN0C9eVxVWd8H6x9WfipgVH5IaIoLp23334Sc1vbKKWINnvwRpb4us0xtPaCumlwbTtIYNA0Dv/32sVFw==", - "dev": true, - "requires": { - "@babel/code-frame": "^7.14.5", - "@babel/generator": "^7.15.0", - "@babel/helper-function-name": "^7.14.5", - "@babel/helper-hoist-variables": "^7.14.5", - "@babel/helper-split-export-declaration": "^7.14.5", - "@babel/parser": "^7.15.0", - "@babel/types": "^7.15.0", + "version": "7.16.0", + "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.16.0.tgz", + "integrity": "sha512-qQ84jIs1aRQxaGaxSysII9TuDaguZ5yVrEuC0BN2vcPlalwfLovVmCjbFDPECPXcYM/wLvNFfp8uDOliLxIoUQ==", + "dev": true, + "requires": { + "@babel/code-frame": "^7.16.0", + "@babel/generator": "^7.16.0", + "@babel/helper-function-name": "^7.16.0", + "@babel/helper-hoist-variables": "^7.16.0", + "@babel/helper-split-export-declaration": "^7.16.0", + "@babel/parser": "^7.16.0", + "@babel/types": "^7.16.0", "debug": "^4.1.0", "globals": "^11.1.0" } }, "@babel/types": { - "version": "7.15.0", - "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.15.0.tgz", - "integrity": "sha512-OBvfqnllOIdX4ojTHpwZbpvz4j3EWyjkZEdmjH0/cgsd6QOdSgU8rLSk6ard/pcW7rlmjdVSX/AWOaORR1uNOQ==", + "version": "7.16.0", + "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.16.0.tgz", + "integrity": "sha512-PJgg/k3SdLsGb3hhisFvtLOw5ts113klrpLuIPtCJIU+BB24fqq6lf8RWqKJEjzqXR9AEH1rIb5XTqwBHB+kQg==", "dev": true, "requires": { - "@babel/helper-validator-identifier": "^7.14.9", + "@babel/helper-validator-identifier": "^7.15.7", "to-fast-properties": "^2.0.0" } }, @@ -1690,6270 +2134,6656 @@ } } }, - "@babel/plugin-transform-modules-systemjs": { - "version": "7.14.5", - "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-systemjs/-/plugin-transform-modules-systemjs-7.14.5.tgz", - "integrity": "sha512-mNMQdvBEE5DcMQaL5LbzXFMANrQjd2W7FPzg34Y4yEz7dBgdaC+9B84dSO+/1Wba98zoDbInctCDo4JGxz1VYA==", + "@babel/plugin-transform-modules-commonjs": { + "version": "7.16.0", + "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.16.0.tgz", + "integrity": "sha512-Dzi+NWqyEotgzk/sb7kgQPJQf7AJkQBWsVp1N6JWc1lBVo0vkElUnGdr1PzUBmfsCCN5OOFya3RtpeHk15oLKQ==", "dev": true, "requires": { - "@babel/helper-hoist-variables": "^7.14.5", - "@babel/helper-module-transforms": "^7.14.5", + "@babel/helper-module-transforms": "^7.16.0", "@babel/helper-plugin-utils": "^7.14.5", - "@babel/helper-validator-identifier": "^7.14.5", + "@babel/helper-simple-access": "^7.16.0", "babel-plugin-dynamic-import-node": "^2.3.3" - } - }, - "@babel/plugin-transform-modules-umd": { - "version": "7.14.5", - "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-umd/-/plugin-transform-modules-umd-7.14.5.tgz", - "integrity": "sha512-RfPGoagSngC06LsGUYyM9QWSXZ8MysEjDJTAea1lqRjNECE3y0qIJF/qbvJxc4oA4s99HumIMdXOrd+TdKaAAA==", - "dev": true, - "requires": { - "@babel/helper-module-transforms": "^7.14.5", - "@babel/helper-plugin-utils": "^7.14.5" - } - }, - "@babel/plugin-transform-named-capturing-groups-regex": { - "version": "7.14.9", - "resolved": "https://registry.npmjs.org/@babel/plugin-transform-named-capturing-groups-regex/-/plugin-transform-named-capturing-groups-regex-7.14.9.tgz", - "integrity": "sha512-l666wCVYO75mlAtGFfyFwnWmIXQm3kSH0C3IRnJqWcZbWkoihyAdDhFm2ZWaxWTqvBvhVFfJjMRQ0ez4oN1yYA==", - "dev": true, - "requires": { - "@babel/helper-create-regexp-features-plugin": "^7.14.5" - } - }, - "@babel/plugin-transform-new-target": { - "version": "7.14.5", - "resolved": "https://registry.npmjs.org/@babel/plugin-transform-new-target/-/plugin-transform-new-target-7.14.5.tgz", - "integrity": "sha512-Nx054zovz6IIRWEB49RDRuXGI4Gy0GMgqG0cII9L3MxqgXz/+rgII+RU58qpo4g7tNEx1jG7rRVH4ihZoP4esQ==", - "dev": true, - "requires": { - "@babel/helper-plugin-utils": "^7.14.5" - } - }, - "@babel/plugin-transform-object-super": { - "version": "7.14.5", - "resolved": "https://registry.npmjs.org/@babel/plugin-transform-object-super/-/plugin-transform-object-super-7.14.5.tgz", - "integrity": "sha512-MKfOBWzK0pZIrav9z/hkRqIk/2bTv9qvxHzPQc12RcVkMOzpIKnFCNYJip00ssKWYkd8Sf5g0Wr7pqJ+cmtuFg==", - "dev": true, - "requires": { - "@babel/helper-plugin-utils": "^7.14.5", - "@babel/helper-replace-supers": "^7.14.5" - } - }, - "@babel/plugin-transform-parameters": { - "version": "7.14.5", - "resolved": "https://registry.npmjs.org/@babel/plugin-transform-parameters/-/plugin-transform-parameters-7.14.5.tgz", - "integrity": "sha512-Tl7LWdr6HUxTmzQtzuU14SqbgrSKmaR77M0OKyq4njZLQTPfOvzblNKyNkGwOfEFCEx7KeYHQHDI0P3F02IVkA==", - "dev": true, - "requires": { - "@babel/helper-plugin-utils": "^7.14.5" - } - }, - "@babel/plugin-transform-property-literals": { - "version": "7.14.5", - "resolved": "https://registry.npmjs.org/@babel/plugin-transform-property-literals/-/plugin-transform-property-literals-7.14.5.tgz", - "integrity": "sha512-r1uilDthkgXW8Z1vJz2dKYLV1tuw2xsbrp3MrZmD99Wh9vsfKoob+JTgri5VUb/JqyKRXotlOtwgu4stIYCmnw==", - "dev": true, - "requires": { - "@babel/helper-plugin-utils": "^7.14.5" - } - }, - "@babel/plugin-transform-regenerator": { - "version": "7.14.5", - "resolved": "https://registry.npmjs.org/@babel/plugin-transform-regenerator/-/plugin-transform-regenerator-7.14.5.tgz", - "integrity": "sha512-NVIY1W3ITDP5xQl50NgTKlZ0GrotKtLna08/uGY6ErQt6VEQZXla86x/CTddm5gZdcr+5GSsvMeTmWA5Ii6pkg==", - "dev": true, - "requires": { - "regenerator-transform": "^0.14.2" - } - }, - "@babel/plugin-transform-reserved-words": { - "version": "7.14.5", - "resolved": "https://registry.npmjs.org/@babel/plugin-transform-reserved-words/-/plugin-transform-reserved-words-7.14.5.tgz", - "integrity": "sha512-cv4F2rv1nD4qdexOGsRQXJrOcyb5CrgjUH9PKrrtyhSDBNWGxd0UIitjyJiWagS+EbUGjG++22mGH1Pub8D6Vg==", - "dev": true, - "requires": { - "@babel/helper-plugin-utils": "^7.14.5" - } - }, - "@babel/plugin-transform-runtime": { - "version": "7.14.5", - "resolved": "https://registry.npmjs.org/@babel/plugin-transform-runtime/-/plugin-transform-runtime-7.14.5.tgz", - "integrity": "sha512-fPMBhh1AV8ZyneiCIA+wYYUH1arzlXR1UMcApjvchDhfKxhy2r2lReJv8uHEyihi4IFIGlr1Pdx7S5fkESDQsg==", - "dev": true, - "requires": { - "@babel/helper-module-imports": "^7.14.5", - "@babel/helper-plugin-utils": "^7.14.5", - "babel-plugin-polyfill-corejs2": "^0.2.2", - "babel-plugin-polyfill-corejs3": "^0.2.2", - "babel-plugin-polyfill-regenerator": "^0.2.2", - "semver": "^6.3.0" }, "dependencies": { - "semver": { - "version": "6.3.0", - "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz", - "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==", + "@babel/code-frame": { + "version": "7.16.0", + "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.16.0.tgz", + "integrity": "sha512-IF4EOMEV+bfYwOmNxGzSnjR2EmQod7f1UXOpZM3l4i4o4QNwzjtJAu/HxdjHq0aYBvdqMuQEY1eg0nqW9ZPORA==", + "dev": true, + "requires": { + "@babel/highlight": "^7.16.0" + } + }, + "@babel/generator": { + "version": "7.16.0", + "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.16.0.tgz", + "integrity": "sha512-RR8hUCfRQn9j9RPKEVXo9LiwoxLPYn6hNZlvUOR8tSnaxlD0p0+la00ZP9/SnRt6HchKr+X0fO2r8vrETiJGew==", + "dev": true, + "requires": { + "@babel/types": "^7.16.0", + "jsesc": "^2.5.1", + "source-map": "^0.5.0" + } + }, + "@babel/helper-function-name": { + "version": "7.16.0", + "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.16.0.tgz", + "integrity": "sha512-BZh4mEk1xi2h4HFjWUXRQX5AEx4rvaZxHgax9gcjdLWdkjsY7MKt5p0otjsg5noXw+pB+clMCjw+aEVYADMjog==", + "dev": true, + "requires": { + "@babel/helper-get-function-arity": "^7.16.0", + "@babel/template": "^7.16.0", + "@babel/types": "^7.16.0" + } + }, + "@babel/helper-get-function-arity": { + "version": "7.16.0", + "resolved": "https://registry.npmjs.org/@babel/helper-get-function-arity/-/helper-get-function-arity-7.16.0.tgz", + "integrity": "sha512-ASCquNcywC1NkYh/z7Cgp3w31YW8aojjYIlNg4VeJiHkqyP4AzIvr4qx7pYDb4/s8YcsZWqqOSxgkvjUz1kpDQ==", + "dev": true, + "requires": { + "@babel/types": "^7.16.0" + } + }, + "@babel/helper-hoist-variables": { + "version": "7.16.0", + "resolved": "https://registry.npmjs.org/@babel/helper-hoist-variables/-/helper-hoist-variables-7.16.0.tgz", + "integrity": "sha512-1AZlpazjUR0EQZQv3sgRNfM9mEVWPK3M6vlalczA+EECcPz3XPh6VplbErL5UoMpChhSck5wAJHthlj1bYpcmg==", + "dev": true, + "requires": { + "@babel/types": "^7.16.0" + } + }, + "@babel/helper-member-expression-to-functions": { + "version": "7.16.0", + "resolved": "https://registry.npmjs.org/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.16.0.tgz", + "integrity": "sha512-bsjlBFPuWT6IWhl28EdrQ+gTvSvj5tqVP5Xeftp07SEuz5pLnsXZuDkDD3Rfcxy0IsHmbZ+7B2/9SHzxO0T+sQ==", + "dev": true, + "requires": { + "@babel/types": "^7.16.0" + } + }, + "@babel/helper-module-imports": { + "version": "7.16.0", + "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.16.0.tgz", + "integrity": "sha512-kkH7sWzKPq0xt3H1n+ghb4xEMP8k0U7XV3kkB+ZGy69kDk2ySFW1qPi06sjKzFY3t1j6XbJSqr4mF9L7CYVyhg==", + "dev": true, + "requires": { + "@babel/types": "^7.16.0" + } + }, + "@babel/helper-module-transforms": { + "version": "7.16.0", + "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.16.0.tgz", + "integrity": "sha512-My4cr9ATcaBbmaEa8M0dZNA74cfI6gitvUAskgDtAFmAqyFKDSHQo5YstxPbN+lzHl2D9l/YOEFqb2mtUh4gfA==", + "dev": true, + "requires": { + "@babel/helper-module-imports": "^7.16.0", + "@babel/helper-replace-supers": "^7.16.0", + "@babel/helper-simple-access": "^7.16.0", + "@babel/helper-split-export-declaration": "^7.16.0", + "@babel/helper-validator-identifier": "^7.15.7", + "@babel/template": "^7.16.0", + "@babel/traverse": "^7.16.0", + "@babel/types": "^7.16.0" + } + }, + "@babel/helper-optimise-call-expression": { + "version": "7.16.0", + "resolved": "https://registry.npmjs.org/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.16.0.tgz", + "integrity": "sha512-SuI467Gi2V8fkofm2JPnZzB/SUuXoJA5zXe/xzyPP2M04686RzFKFHPK6HDVN6JvWBIEW8tt9hPR7fXdn2Lgpw==", + "dev": true, + "requires": { + "@babel/types": "^7.16.0" + } + }, + "@babel/helper-replace-supers": { + "version": "7.16.0", + "resolved": "https://registry.npmjs.org/@babel/helper-replace-supers/-/helper-replace-supers-7.16.0.tgz", + "integrity": "sha512-TQxuQfSCdoha7cpRNJvfaYxxxzmbxXw/+6cS7V02eeDYyhxderSoMVALvwupA54/pZcOTtVeJ0xccp1nGWladA==", + "dev": true, + "requires": { + "@babel/helper-member-expression-to-functions": "^7.16.0", + "@babel/helper-optimise-call-expression": "^7.16.0", + "@babel/traverse": "^7.16.0", + "@babel/types": "^7.16.0" + } + }, + "@babel/helper-simple-access": { + "version": "7.16.0", + "resolved": "https://registry.npmjs.org/@babel/helper-simple-access/-/helper-simple-access-7.16.0.tgz", + "integrity": "sha512-o1rjBT/gppAqKsYfUdfHq5Rk03lMQrkPHG1OWzHWpLgVXRH4HnMM9Et9CVdIqwkCQlobnGHEJMsgWP/jE1zUiw==", + "dev": true, + "requires": { + "@babel/types": "^7.16.0" + } + }, + "@babel/helper-split-export-declaration": { + "version": "7.16.0", + "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.16.0.tgz", + "integrity": "sha512-0YMMRpuDFNGTHNRiiqJX19GjNXA4H0E8jZ2ibccfSxaCogbm3am5WN/2nQNj0YnQwGWM1J06GOcQ2qnh3+0paw==", + "dev": true, + "requires": { + "@babel/types": "^7.16.0" + } + }, + "@babel/highlight": { + "version": "7.16.0", + "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.16.0.tgz", + "integrity": "sha512-t8MH41kUQylBtu2+4IQA3atqevA2lRgqA2wyVB/YiWmsDSuylZZuXOUy9ric30hfzauEFfdsuk/eXTRrGrfd0g==", + "dev": true, + "requires": { + "@babel/helper-validator-identifier": "^7.15.7", + "chalk": "^2.0.0", + "js-tokens": "^4.0.0" + } + }, + "@babel/parser": { + "version": "7.16.2", + "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.16.2.tgz", + "integrity": "sha512-RUVpT0G2h6rOZwqLDTrKk7ksNv7YpAilTnYe1/Q+eDjxEceRMKVWbCsX7t8h6C1qCFi/1Y8WZjcEPBAFG27GPw==", + "dev": true + }, + "@babel/template": { + "version": "7.16.0", + "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.16.0.tgz", + "integrity": "sha512-MnZdpFD/ZdYhXwiunMqqgyZyucaYsbL0IrjoGjaVhGilz+x8YB++kRfygSOIj1yOtWKPlx7NBp+9I1RQSgsd5A==", + "dev": true, + "requires": { + "@babel/code-frame": "^7.16.0", + "@babel/parser": "^7.16.0", + "@babel/types": "^7.16.0" + } + }, + "@babel/traverse": { + "version": "7.16.0", + "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.16.0.tgz", + "integrity": "sha512-qQ84jIs1aRQxaGaxSysII9TuDaguZ5yVrEuC0BN2vcPlalwfLovVmCjbFDPECPXcYM/wLvNFfp8uDOliLxIoUQ==", + "dev": true, + "requires": { + "@babel/code-frame": "^7.16.0", + "@babel/generator": "^7.16.0", + "@babel/helper-function-name": "^7.16.0", + "@babel/helper-hoist-variables": "^7.16.0", + "@babel/helper-split-export-declaration": "^7.16.0", + "@babel/parser": "^7.16.0", + "@babel/types": "^7.16.0", + "debug": "^4.1.0", + "globals": "^11.1.0" + } + }, + "@babel/types": { + "version": "7.16.0", + "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.16.0.tgz", + "integrity": "sha512-PJgg/k3SdLsGb3hhisFvtLOw5ts113klrpLuIPtCJIU+BB24fqq6lf8RWqKJEjzqXR9AEH1rIb5XTqwBHB+kQg==", + "dev": true, + "requires": { + "@babel/helper-validator-identifier": "^7.15.7", + "to-fast-properties": "^2.0.0" + } + }, + "source-map": { + "version": "0.5.7", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz", + "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=", "dev": true } } }, - "@babel/plugin-transform-shorthand-properties": { - "version": "7.14.5", - "resolved": "https://registry.npmjs.org/@babel/plugin-transform-shorthand-properties/-/plugin-transform-shorthand-properties-7.14.5.tgz", - "integrity": "sha512-xLucks6T1VmGsTB+GWK5Pl9Jl5+nRXD1uoFdA5TSO6xtiNjtXTjKkmPdFXVLGlK5A2/or/wQMKfmQ2Y0XJfn5g==", - "dev": true, - "requires": { - "@babel/helper-plugin-utils": "^7.14.5" - } - }, - "@babel/plugin-transform-spread": { - "version": "7.14.6", - "resolved": "https://registry.npmjs.org/@babel/plugin-transform-spread/-/plugin-transform-spread-7.14.6.tgz", - "integrity": "sha512-Zr0x0YroFJku7n7+/HH3A2eIrGMjbmAIbJSVv0IZ+t3U2WUQUA64S/oeied2e+MaGSjmt4alzBCsK9E8gh+fag==", + "@babel/plugin-transform-modules-systemjs": { + "version": "7.16.0", + "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-systemjs/-/plugin-transform-modules-systemjs-7.16.0.tgz", + "integrity": "sha512-yuGBaHS3lF1m/5R+6fjIke64ii5luRUg97N2wr+z1sF0V+sNSXPxXDdEEL/iYLszsN5VKxVB1IPfEqhzVpiqvg==", "dev": true, "requires": { + "@babel/helper-hoist-variables": "^7.16.0", + "@babel/helper-module-transforms": "^7.16.0", "@babel/helper-plugin-utils": "^7.14.5", - "@babel/helper-skip-transparent-expression-wrappers": "^7.14.5" - } - }, - "@babel/plugin-transform-sticky-regex": { - "version": "7.14.5", - "resolved": "https://registry.npmjs.org/@babel/plugin-transform-sticky-regex/-/plugin-transform-sticky-regex-7.14.5.tgz", - "integrity": "sha512-Z7F7GyvEMzIIbwnziAZmnSNpdijdr4dWt+FJNBnBLz5mwDFkqIXU9wmBcWWad3QeJF5hMTkRe4dAq2sUZiG+8A==", - "dev": true, - "requires": { - "@babel/helper-plugin-utils": "^7.14.5" - } - }, - "@babel/plugin-transform-template-literals": { - "version": "7.14.5", - "resolved": "https://registry.npmjs.org/@babel/plugin-transform-template-literals/-/plugin-transform-template-literals-7.14.5.tgz", - "integrity": "sha512-22btZeURqiepOfuy/VkFr+zStqlujWaarpMErvay7goJS6BWwdd6BY9zQyDLDa4x2S3VugxFb162IZ4m/S/+Gg==", - "dev": true, - "requires": { - "@babel/helper-plugin-utils": "^7.14.5" - } - }, - "@babel/plugin-transform-typeof-symbol": { - "version": "7.14.5", - "resolved": "https://registry.npmjs.org/@babel/plugin-transform-typeof-symbol/-/plugin-transform-typeof-symbol-7.14.5.tgz", - "integrity": "sha512-lXzLD30ffCWseTbMQzrvDWqljvZlHkXU+CnseMhkMNqU1sASnCsz3tSzAaH3vCUXb9PHeUb90ZT1BdFTm1xxJw==", - "dev": true, - "requires": { - "@babel/helper-plugin-utils": "^7.14.5" - } - }, - "@babel/plugin-transform-unicode-escapes": { - "version": "7.14.5", - "resolved": "https://registry.npmjs.org/@babel/plugin-transform-unicode-escapes/-/plugin-transform-unicode-escapes-7.14.5.tgz", - "integrity": "sha512-crTo4jATEOjxj7bt9lbYXcBAM3LZaUrbP2uUdxb6WIorLmjNKSpHfIybgY4B8SRpbf8tEVIWH3Vtm7ayCrKocA==", - "dev": true, - "requires": { - "@babel/helper-plugin-utils": "^7.14.5" - } - }, - "@babel/plugin-transform-unicode-regex": { - "version": "7.14.5", - "resolved": "https://registry.npmjs.org/@babel/plugin-transform-unicode-regex/-/plugin-transform-unicode-regex-7.14.5.tgz", - "integrity": "sha512-UygduJpC5kHeCiRw/xDVzC+wj8VaYSoKl5JNVmbP7MadpNinAm3SvZCxZ42H37KZBKztz46YC73i9yV34d0Tzw==", - "dev": true, - "requires": { - "@babel/helper-create-regexp-features-plugin": "^7.14.5", - "@babel/helper-plugin-utils": "^7.14.5" - } - }, - "@babel/preset-env": { - "version": "7.14.8", - "resolved": "https://registry.npmjs.org/@babel/preset-env/-/preset-env-7.14.8.tgz", - "integrity": "sha512-a9aOppDU93oArQ51H+B8M1vH+tayZbuBqzjOhntGetZVa+4tTu5jp+XTwqHGG2lxslqomPYVSjIxQkFwXzgnxg==", - "dev": true, - "requires": { - "@babel/compat-data": "^7.14.7", - "@babel/helper-compilation-targets": "^7.14.5", - "@babel/helper-plugin-utils": "^7.14.5", - "@babel/helper-validator-option": "^7.14.5", - "@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining": "^7.14.5", - "@babel/plugin-proposal-async-generator-functions": "^7.14.7", - "@babel/plugin-proposal-class-properties": "^7.14.5", - "@babel/plugin-proposal-class-static-block": "^7.14.5", - "@babel/plugin-proposal-dynamic-import": "^7.14.5", - "@babel/plugin-proposal-export-namespace-from": "^7.14.5", - "@babel/plugin-proposal-json-strings": "^7.14.5", - "@babel/plugin-proposal-logical-assignment-operators": "^7.14.5", - "@babel/plugin-proposal-nullish-coalescing-operator": "^7.14.5", - "@babel/plugin-proposal-numeric-separator": "^7.14.5", - "@babel/plugin-proposal-object-rest-spread": "^7.14.7", - "@babel/plugin-proposal-optional-catch-binding": "^7.14.5", - "@babel/plugin-proposal-optional-chaining": "^7.14.5", - "@babel/plugin-proposal-private-methods": "^7.14.5", - "@babel/plugin-proposal-private-property-in-object": "^7.14.5", - "@babel/plugin-proposal-unicode-property-regex": "^7.14.5", - "@babel/plugin-syntax-async-generators": "^7.8.4", - "@babel/plugin-syntax-class-properties": "^7.12.13", - "@babel/plugin-syntax-class-static-block": "^7.14.5", - "@babel/plugin-syntax-dynamic-import": "^7.8.3", - "@babel/plugin-syntax-export-namespace-from": "^7.8.3", - "@babel/plugin-syntax-json-strings": "^7.8.3", - "@babel/plugin-syntax-logical-assignment-operators": "^7.10.4", - "@babel/plugin-syntax-nullish-coalescing-operator": "^7.8.3", - "@babel/plugin-syntax-numeric-separator": "^7.10.4", - "@babel/plugin-syntax-object-rest-spread": "^7.8.3", - "@babel/plugin-syntax-optional-catch-binding": "^7.8.3", - "@babel/plugin-syntax-optional-chaining": "^7.8.3", - "@babel/plugin-syntax-private-property-in-object": "^7.14.5", - "@babel/plugin-syntax-top-level-await": "^7.14.5", - "@babel/plugin-transform-arrow-functions": "^7.14.5", - "@babel/plugin-transform-async-to-generator": "^7.14.5", - "@babel/plugin-transform-block-scoped-functions": "^7.14.5", - "@babel/plugin-transform-block-scoping": "^7.14.5", - "@babel/plugin-transform-classes": "^7.14.5", - "@babel/plugin-transform-computed-properties": "^7.14.5", - "@babel/plugin-transform-destructuring": "^7.14.7", - "@babel/plugin-transform-dotall-regex": "^7.14.5", - "@babel/plugin-transform-duplicate-keys": "^7.14.5", - "@babel/plugin-transform-exponentiation-operator": "^7.14.5", - "@babel/plugin-transform-for-of": "^7.14.5", - "@babel/plugin-transform-function-name": "^7.14.5", - "@babel/plugin-transform-literals": "^7.14.5", - "@babel/plugin-transform-member-expression-literals": "^7.14.5", - "@babel/plugin-transform-modules-amd": "^7.14.5", - "@babel/plugin-transform-modules-commonjs": "^7.14.5", - "@babel/plugin-transform-modules-systemjs": "^7.14.5", - "@babel/plugin-transform-modules-umd": "^7.14.5", - "@babel/plugin-transform-named-capturing-groups-regex": "^7.14.7", - "@babel/plugin-transform-new-target": "^7.14.5", - "@babel/plugin-transform-object-super": "^7.14.5", - "@babel/plugin-transform-parameters": "^7.14.5", - "@babel/plugin-transform-property-literals": "^7.14.5", - "@babel/plugin-transform-regenerator": "^7.14.5", - "@babel/plugin-transform-reserved-words": "^7.14.5", - "@babel/plugin-transform-shorthand-properties": "^7.14.5", - "@babel/plugin-transform-spread": "^7.14.6", - "@babel/plugin-transform-sticky-regex": "^7.14.5", - "@babel/plugin-transform-template-literals": "^7.14.5", - "@babel/plugin-transform-typeof-symbol": "^7.14.5", - "@babel/plugin-transform-unicode-escapes": "^7.14.5", - "@babel/plugin-transform-unicode-regex": "^7.14.5", - "@babel/preset-modules": "^0.1.4", - "@babel/types": "^7.14.8", - "babel-plugin-polyfill-corejs2": "^0.2.2", - "babel-plugin-polyfill-corejs3": "^0.2.2", - "babel-plugin-polyfill-regenerator": "^0.2.2", - "core-js-compat": "^3.15.0", - "semver": "^6.3.0" + "@babel/helper-validator-identifier": "^7.15.7", + "babel-plugin-dynamic-import-node": "^2.3.3" }, "dependencies": { - "@babel/helper-validator-identifier": { - "version": "7.14.9", - "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.14.9.tgz", - "integrity": "sha512-pQYxPY0UP6IHISRitNe8bsijHex4TWZXi2HwKVsjPiltzlhse2znVcm9Ace510VT1kxIHjGJCZZQBX2gJDbo0g==", - "dev": true + "@babel/code-frame": { + "version": "7.16.0", + "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.16.0.tgz", + "integrity": "sha512-IF4EOMEV+bfYwOmNxGzSnjR2EmQod7f1UXOpZM3l4i4o4QNwzjtJAu/HxdjHq0aYBvdqMuQEY1eg0nqW9ZPORA==", + "dev": true, + "requires": { + "@babel/highlight": "^7.16.0" + } }, - "@babel/types": { - "version": "7.15.0", - "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.15.0.tgz", - "integrity": "sha512-OBvfqnllOIdX4ojTHpwZbpvz4j3EWyjkZEdmjH0/cgsd6QOdSgU8rLSk6ard/pcW7rlmjdVSX/AWOaORR1uNOQ==", + "@babel/generator": { + "version": "7.16.0", + "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.16.0.tgz", + "integrity": "sha512-RR8hUCfRQn9j9RPKEVXo9LiwoxLPYn6hNZlvUOR8tSnaxlD0p0+la00ZP9/SnRt6HchKr+X0fO2r8vrETiJGew==", "dev": true, "requires": { - "@babel/helper-validator-identifier": "^7.14.9", - "to-fast-properties": "^2.0.0" + "@babel/types": "^7.16.0", + "jsesc": "^2.5.1", + "source-map": "^0.5.0" } }, - "semver": { - "version": "6.3.0", - "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz", - "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==", - "dev": true - } - } - }, - "@babel/preset-modules": { - "version": "0.1.4", - "resolved": "https://registry.npmjs.org/@babel/preset-modules/-/preset-modules-0.1.4.tgz", - "integrity": "sha512-J36NhwnfdzpmH41M1DrnkkgAqhZaqr/NBdPfQ677mLzlaXo+oDiv1deyCDtgAhz8p328otdob0Du7+xgHGZbKg==", - "dev": true, - "requires": { - "@babel/helper-plugin-utils": "^7.0.0", - "@babel/plugin-proposal-unicode-property-regex": "^7.4.4", - "@babel/plugin-transform-dotall-regex": "^7.4.4", - "@babel/types": "^7.4.4", - "esutils": "^2.0.2" - } - }, - "@babel/runtime": { - "version": "7.14.6", - "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.14.6.tgz", - "integrity": "sha512-/PCB2uJ7oM44tz8YhC4Z/6PeOKXp4K588f+5M3clr1M4zbqztlo0XEfJ2LEzj/FgwfgGcIdl8n7YYjTCI0BYwg==", - "dev": true, - "requires": { - "regenerator-runtime": "^0.13.4" - } - }, - "@babel/runtime-corejs3": { - "version": "7.14.7", - "resolved": "https://registry.npmjs.org/@babel/runtime-corejs3/-/runtime-corejs3-7.14.7.tgz", - "integrity": "sha512-Wvzcw4mBYbTagyBVZpAJWI06auSIj033T/yNE0Zn1xcup83MieCddZA7ls3kme17L4NOGBrQ09Q+nKB41RLWBA==", - "dev": true, - "requires": { - "core-js-pure": "^3.15.0", - "regenerator-runtime": "^0.13.4" - } - }, - "@babel/template": { - "version": "7.14.5", - "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.14.5.tgz", - "integrity": "sha512-6Z3Po85sfxRGachLULUhOmvAaOo7xCvqGQtxINai2mEGPFm6pQ4z5QInFnUrRpfoSV60BnjyF5F3c+15fxFV1g==", - "dev": true, - "requires": { - "@babel/code-frame": "^7.14.5", - "@babel/parser": "^7.14.5", - "@babel/types": "^7.14.5" - } - }, - "@babel/traverse": { - "version": "7.14.7", - "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.14.7.tgz", - "integrity": "sha512-9vDr5NzHu27wgwejuKL7kIOm4bwEtaPQ4Z6cpCmjSuaRqpH/7xc4qcGEscwMqlkwgcXl6MvqoAjZkQ24uSdIZQ==", - "dev": true, - "requires": { - "@babel/code-frame": "^7.14.5", - "@babel/generator": "^7.14.5", - "@babel/helper-function-name": "^7.14.5", - "@babel/helper-hoist-variables": "^7.14.5", - "@babel/helper-split-export-declaration": "^7.14.5", - "@babel/parser": "^7.14.7", - "@babel/types": "^7.14.5", - "debug": "^4.1.0", - "globals": "^11.1.0" - } - }, - "@babel/types": { - "version": "7.14.5", - "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.14.5.tgz", - "integrity": "sha512-M/NzBpEL95I5Hh4dwhin5JlE7EzO5PHMAuzjxss3tiOBD46KfQvVedN/3jEPZvdRvtsK2222XfdHogNIttFgcg==", - "dev": true, - "requires": { - "@babel/helper-validator-identifier": "^7.14.5", - "to-fast-properties": "^2.0.0" - } - }, - "@csstools/convert-colors": { - "version": "1.4.0", - "resolved": "https://registry.npmjs.org/@csstools/convert-colors/-/convert-colors-1.4.0.tgz", - "integrity": "sha512-5a6wqoJV/xEdbRNKVo6I4hO3VjyDq//8q2f9I6PBAvMesJHFauXDorcNCsr9RzvsZnaWi5NYCcfyqP1QeFHFbw==", - "dev": true - }, - "@discoveryjs/json-ext": { - "version": "0.5.3", - "resolved": "https://registry.npmjs.org/@discoveryjs/json-ext/-/json-ext-0.5.3.tgz", - "integrity": "sha512-Fxt+AfXgjMoin2maPIYzFZnQjAXjAL0PHscM5pRTtatFqB+vZxAM9tLp2Optnuw3QOQC40jTNeGYFOMvyf7v9g==", - "dev": true - }, - "@eslint/eslintrc": { - "version": "0.4.2", - "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-0.4.2.tgz", - "integrity": "sha512-8nmGq/4ycLpIwzvhI4tNDmQztZ8sp+hI7cyG8i1nQDhkAbRzHpXPidRAHlNvCZQpJTKw5ItIpMw9RSToGF00mg==", - "dev": true, - "requires": { - "ajv": "^6.12.4", - "debug": "^4.1.1", - "espree": "^7.3.0", - "globals": "^13.9.0", - "ignore": "^4.0.6", - "import-fresh": "^3.2.1", - "js-yaml": "^3.13.1", - "minimatch": "^3.0.4", - "strip-json-comments": "^3.1.1" - }, - "dependencies": { - "ajv": { - "version": "6.12.6", - "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz", - "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==", + "@babel/helper-function-name": { + "version": "7.16.0", + "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.16.0.tgz", + "integrity": "sha512-BZh4mEk1xi2h4HFjWUXRQX5AEx4rvaZxHgax9gcjdLWdkjsY7MKt5p0otjsg5noXw+pB+clMCjw+aEVYADMjog==", "dev": true, "requires": { - "fast-deep-equal": "^3.1.1", - "fast-json-stable-stringify": "^2.0.0", - "json-schema-traverse": "^0.4.1", - "uri-js": "^4.2.2" + "@babel/helper-get-function-arity": "^7.16.0", + "@babel/template": "^7.16.0", + "@babel/types": "^7.16.0" } }, - "globals": { - "version": "13.10.0", - "resolved": "https://registry.npmjs.org/globals/-/globals-13.10.0.tgz", - "integrity": "sha512-piHC3blgLGFjvOuMmWZX60f+na1lXFDhQXBf1UYp2fXPXqvEUbOhNwi6BsQ0bQishwedgnjkwv1d9zKf+MWw3g==", + "@babel/helper-get-function-arity": { + "version": "7.16.0", + "resolved": "https://registry.npmjs.org/@babel/helper-get-function-arity/-/helper-get-function-arity-7.16.0.tgz", + "integrity": "sha512-ASCquNcywC1NkYh/z7Cgp3w31YW8aojjYIlNg4VeJiHkqyP4AzIvr4qx7pYDb4/s8YcsZWqqOSxgkvjUz1kpDQ==", "dev": true, "requires": { - "type-fest": "^0.20.2" + "@babel/types": "^7.16.0" } }, - "ignore": { - "version": "4.0.6", - "resolved": "https://registry.npmjs.org/ignore/-/ignore-4.0.6.tgz", - "integrity": "sha512-cyFDKrqc/YdcWFniJhzI42+AzS+gNwmUzOSFcRCQYwySuBBBy/KjuxWLZ/FHEH6Moq1NizMOBWyTcv8O4OZIMg==", - "dev": true + "@babel/helper-hoist-variables": { + "version": "7.16.0", + "resolved": "https://registry.npmjs.org/@babel/helper-hoist-variables/-/helper-hoist-variables-7.16.0.tgz", + "integrity": "sha512-1AZlpazjUR0EQZQv3sgRNfM9mEVWPK3M6vlalczA+EECcPz3XPh6VplbErL5UoMpChhSck5wAJHthlj1bYpcmg==", + "dev": true, + "requires": { + "@babel/types": "^7.16.0" + } }, - "json-schema-traverse": { - "version": "0.4.1", - "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz", - "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==", - "dev": true + "@babel/helper-member-expression-to-functions": { + "version": "7.16.0", + "resolved": "https://registry.npmjs.org/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.16.0.tgz", + "integrity": "sha512-bsjlBFPuWT6IWhl28EdrQ+gTvSvj5tqVP5Xeftp07SEuz5pLnsXZuDkDD3Rfcxy0IsHmbZ+7B2/9SHzxO0T+sQ==", + "dev": true, + "requires": { + "@babel/types": "^7.16.0" + } }, - "type-fest": { - "version": "0.20.2", - "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.20.2.tgz", - "integrity": "sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ==", - "dev": true - } - } - }, - "@gulp-sourcemaps/identity-map": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/@gulp-sourcemaps/identity-map/-/identity-map-1.0.2.tgz", - "integrity": "sha512-ciiioYMLdo16ShmfHBXJBOFm3xPC4AuwO4xeRpFeHz7WK9PYsWCmigagG2XyzZpubK4a3qNKoUBDhbzHfa50LQ==", - "dev": true, - "requires": { - "acorn": "^5.0.3", - "css": "^2.2.1", - "normalize-path": "^2.1.1", - "source-map": "^0.6.0", - "through2": "^2.0.3" - }, - "dependencies": { - "acorn": { - "version": "5.7.4", - "resolved": "https://registry.npmjs.org/acorn/-/acorn-5.7.4.tgz", - "integrity": "sha512-1D++VG7BhrtvQpNbBzovKNc1FLGGEE/oGe7b9xJm/RFHMBeUaUGpluV9RLjZa47YFdPcDAenEYuq9pQPcMdLJg==", - "dev": true + "@babel/helper-module-imports": { + "version": "7.16.0", + "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.16.0.tgz", + "integrity": "sha512-kkH7sWzKPq0xt3H1n+ghb4xEMP8k0U7XV3kkB+ZGy69kDk2ySFW1qPi06sjKzFY3t1j6XbJSqr4mF9L7CYVyhg==", + "dev": true, + "requires": { + "@babel/types": "^7.16.0" + } }, - "css": { - "version": "2.2.4", - "resolved": "https://registry.npmjs.org/css/-/css-2.2.4.tgz", - "integrity": "sha512-oUnjmWpy0niI3x/mPL8dVEI1l7MnG3+HHyRPHf+YFSbK+svOhXpmSOcDURUh2aOCgl2grzrOPt1nHLuCVFULLw==", + "@babel/helper-module-transforms": { + "version": "7.16.0", + "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.16.0.tgz", + "integrity": "sha512-My4cr9ATcaBbmaEa8M0dZNA74cfI6gitvUAskgDtAFmAqyFKDSHQo5YstxPbN+lzHl2D9l/YOEFqb2mtUh4gfA==", "dev": true, "requires": { - "inherits": "^2.0.3", - "source-map": "^0.6.1", - "source-map-resolve": "^0.5.2", - "urix": "^0.1.0" + "@babel/helper-module-imports": "^7.16.0", + "@babel/helper-replace-supers": "^7.16.0", + "@babel/helper-simple-access": "^7.16.0", + "@babel/helper-split-export-declaration": "^7.16.0", + "@babel/helper-validator-identifier": "^7.15.7", + "@babel/template": "^7.16.0", + "@babel/traverse": "^7.16.0", + "@babel/types": "^7.16.0" } }, - "normalize-path": { - "version": "2.1.1", - "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-2.1.1.tgz", - "integrity": "sha1-GrKLVW4Zg2Oowab35vogE3/mrtk=", + "@babel/helper-optimise-call-expression": { + "version": "7.16.0", + "resolved": "https://registry.npmjs.org/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.16.0.tgz", + "integrity": "sha512-SuI467Gi2V8fkofm2JPnZzB/SUuXoJA5zXe/xzyPP2M04686RzFKFHPK6HDVN6JvWBIEW8tt9hPR7fXdn2Lgpw==", "dev": true, "requires": { - "remove-trailing-separator": "^1.0.1" + "@babel/types": "^7.16.0" } }, - "source-map": { - "version": "0.6.1", - "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", - "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", - "dev": true + "@babel/helper-replace-supers": { + "version": "7.16.0", + "resolved": "https://registry.npmjs.org/@babel/helper-replace-supers/-/helper-replace-supers-7.16.0.tgz", + "integrity": "sha512-TQxuQfSCdoha7cpRNJvfaYxxxzmbxXw/+6cS7V02eeDYyhxderSoMVALvwupA54/pZcOTtVeJ0xccp1nGWladA==", + "dev": true, + "requires": { + "@babel/helper-member-expression-to-functions": "^7.16.0", + "@babel/helper-optimise-call-expression": "^7.16.0", + "@babel/traverse": "^7.16.0", + "@babel/types": "^7.16.0" + } }, - "source-map-resolve": { - "version": "0.5.3", - "resolved": "https://registry.npmjs.org/source-map-resolve/-/source-map-resolve-0.5.3.tgz", - "integrity": "sha512-Htz+RnsXWk5+P2slx5Jh3Q66vhQj1Cllm0zvnaY98+NFx+Dv2CF/f5O/t8x+KaNdrdIAsruNzoh/KpialbqAnw==", + "@babel/helper-simple-access": { + "version": "7.16.0", + "resolved": "https://registry.npmjs.org/@babel/helper-simple-access/-/helper-simple-access-7.16.0.tgz", + "integrity": "sha512-o1rjBT/gppAqKsYfUdfHq5Rk03lMQrkPHG1OWzHWpLgVXRH4HnMM9Et9CVdIqwkCQlobnGHEJMsgWP/jE1zUiw==", "dev": true, "requires": { - "atob": "^2.1.2", - "decode-uri-component": "^0.2.0", - "resolve-url": "^0.2.1", - "source-map-url": "^0.4.0", - "urix": "^0.1.0" + "@babel/types": "^7.16.0" } - } - } - }, - "@gulp-sourcemaps/map-sources": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/@gulp-sourcemaps/map-sources/-/map-sources-1.0.0.tgz", - "integrity": "sha1-iQrnxdjId/bThIYCFazp1+yUW9o=", - "dev": true, - "requires": { - "normalize-path": "^2.0.1", - "through2": "^2.0.3" - }, - "dependencies": { - "normalize-path": { - "version": "2.1.1", - "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-2.1.1.tgz", - "integrity": "sha1-GrKLVW4Zg2Oowab35vogE3/mrtk=", + }, + "@babel/helper-split-export-declaration": { + "version": "7.16.0", + "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.16.0.tgz", + "integrity": "sha512-0YMMRpuDFNGTHNRiiqJX19GjNXA4H0E8jZ2ibccfSxaCogbm3am5WN/2nQNj0YnQwGWM1J06GOcQ2qnh3+0paw==", "dev": true, "requires": { - "remove-trailing-separator": "^1.0.1" + "@babel/types": "^7.16.0" } - } - } - }, - "@humanwhocodes/config-array": { - "version": "0.5.0", - "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.5.0.tgz", - "integrity": "sha512-FagtKFz74XrTl7y6HCzQpwDfXP0yhxe9lHLD1UZxjvZIcbyRz8zTFF/yYNfSfzU414eDwZ1SrO0Qvtyf+wFMQg==", - "dev": true, - "requires": { - "@humanwhocodes/object-schema": "^1.2.0", - "debug": "^4.1.1", - "minimatch": "^3.0.4" - } - }, - "@humanwhocodes/object-schema": { - "version": "1.2.0", - "resolved": "https://registry.npmjs.org/@humanwhocodes/object-schema/-/object-schema-1.2.0.tgz", - "integrity": "sha512-wdppn25U8z/2yiaT6YGquE6X8sSv7hNMWSXYSSU1jGv/yd6XqjXgTDJ8KP4NgjTXfJ3GbRjeeb8RTV7a/VpM+w==", - "dev": true - }, - "@igniteui/material-icons-extended": { - "version": "2.8.0", - "resolved": "https://registry.npmjs.org/@igniteui/material-icons-extended/-/material-icons-extended-2.8.0.tgz", - "integrity": "sha512-EHrYCo0WCEUjXPxzb8LG2s4CnWnkwxaqy2xaL/HhT1WfhZuVvJHxe/nxUEl5R/8V9fl0jRiSigpHrtgGBykBzw==" - }, - "@istanbuljs/schema": { - "version": "0.1.3", - "resolved": "https://registry.npmjs.org/@istanbuljs/schema/-/schema-0.1.3.tgz", - "integrity": "sha512-ZXRY4jNvVgSVQ8DL3LTcakaAtXwTVUxE81hslsyD2AtoXW/wVob10HkOJ1X/pAlcI7D+2YoZKg5do8G/w6RYgA==", - "dev": true - }, - "@jridgewell/resolve-uri": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-1.0.0.tgz", - "integrity": "sha512-9oLAnygRMi8Q5QkYEU4XWK04B+nuoXoxjRvRxgjuChkLZFBja0YPSgdZ7dZtwhncLBcQe/I/E+fLuk5qxcYVJA==", - "dev": true - }, - "@jsdevtools/coverage-istanbul-loader": { - "version": "3.0.5", - "resolved": "https://registry.npmjs.org/@jsdevtools/coverage-istanbul-loader/-/coverage-istanbul-loader-3.0.5.tgz", - "integrity": "sha512-EUCPEkaRPvmHjWAAZkWMT7JDzpw7FKB00WTISaiXsbNOd5hCHg77XLA8sLYLFDo1zepYLo2w7GstN8YBqRXZfA==", - "dev": true, - "requires": { - "convert-source-map": "^1.7.0", - "istanbul-lib-instrument": "^4.0.3", - "loader-utils": "^2.0.0", - "merge-source-map": "^1.1.0", - "schema-utils": "^2.7.0" - } - }, - "@juggle/resize-observer": { - "version": "3.3.1", - "resolved": "https://registry.npmjs.org/@juggle/resize-observer/-/resize-observer-3.3.1.tgz", - "integrity": "sha512-zMM9Ds+SawiUkakS7y94Ymqx+S0ORzpG3frZirN3l+UlXUmSUR7hF4wxCVqW+ei94JzV5kt0uXBcoOEAuiydrw==" - }, - "@ngtools/webpack": { - "version": "12.2.0", - "resolved": "https://registry.npmjs.org/@ngtools/webpack/-/webpack-12.2.0.tgz", - "integrity": "sha512-EocGfCbpPAnanDlagtlbVHpgSWE0a5NyWOY6RCw0pAxj1zL9SYMMId4X+ZJ21C23m6JqNXnWNZ4ib+LaXBIOBg==", - "dev": true - }, - "@nodelib/fs.scandir": { - "version": "2.1.5", - "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz", - "integrity": "sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==", - "dev": true, - "requires": { - "@nodelib/fs.stat": "2.0.5", - "run-parallel": "^1.1.9" - } - }, - "@nodelib/fs.stat": { - "version": "2.0.5", - "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz", - "integrity": "sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==", - "dev": true - }, - "@nodelib/fs.walk": { - "version": "1.2.8", - "resolved": "https://registry.npmjs.org/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz", - "integrity": "sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==", - "dev": true, - "requires": { - "@nodelib/fs.scandir": "2.1.5", - "fastq": "^1.6.0" - } - }, - "@npmcli/git": { - "version": "2.1.0", - "resolved": "https://registry.npmjs.org/@npmcli/git/-/git-2.1.0.tgz", - "integrity": "sha512-/hBFX/QG1b+N7PZBFs0bi+evgRZcK9nWBxQKZkGoXUT5hJSwl5c4d7y8/hm+NQZRPhQ67RzFaj5UM9YeyKoryw==", - "dev": true, - "requires": { - "@npmcli/promise-spawn": "^1.3.2", - "lru-cache": "^6.0.0", - "mkdirp": "^1.0.4", - "npm-pick-manifest": "^6.1.1", - "promise-inflight": "^1.0.1", - "promise-retry": "^2.0.1", - "semver": "^7.3.5", - "which": "^2.0.2" - }, - "dependencies": { - "mkdirp": { - "version": "1.0.4", - "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-1.0.4.tgz", - "integrity": "sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==", + }, + "@babel/highlight": { + "version": "7.16.0", + "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.16.0.tgz", + "integrity": "sha512-t8MH41kUQylBtu2+4IQA3atqevA2lRgqA2wyVB/YiWmsDSuylZZuXOUy9ric30hfzauEFfdsuk/eXTRrGrfd0g==", + "dev": true, + "requires": { + "@babel/helper-validator-identifier": "^7.15.7", + "chalk": "^2.0.0", + "js-tokens": "^4.0.0" + } + }, + "@babel/parser": { + "version": "7.16.2", + "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.16.2.tgz", + "integrity": "sha512-RUVpT0G2h6rOZwqLDTrKk7ksNv7YpAilTnYe1/Q+eDjxEceRMKVWbCsX7t8h6C1qCFi/1Y8WZjcEPBAFG27GPw==", "dev": true }, - "which": { - "version": "2.0.2", - "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz", - "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==", + "@babel/template": { + "version": "7.16.0", + "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.16.0.tgz", + "integrity": "sha512-MnZdpFD/ZdYhXwiunMqqgyZyucaYsbL0IrjoGjaVhGilz+x8YB++kRfygSOIj1yOtWKPlx7NBp+9I1RQSgsd5A==", "dev": true, "requires": { - "isexe": "^2.0.0" + "@babel/code-frame": "^7.16.0", + "@babel/parser": "^7.16.0", + "@babel/types": "^7.16.0" } - } - } - }, - "@npmcli/installed-package-contents": { - "version": "1.0.7", - "resolved": "https://registry.npmjs.org/@npmcli/installed-package-contents/-/installed-package-contents-1.0.7.tgz", - "integrity": "sha512-9rufe0wnJusCQoLpV9ZPKIVP55itrM5BxOXs10DmdbRfgWtHy1LDyskbwRnBghuB0PrF7pNPOqREVtpz4HqzKw==", - "dev": true, - "requires": { - "npm-bundled": "^1.1.1", - "npm-normalize-package-bin": "^1.0.1" - } - }, - "@npmcli/move-file": { - "version": "1.1.2", - "resolved": "https://registry.npmjs.org/@npmcli/move-file/-/move-file-1.1.2.tgz", - "integrity": "sha512-1SUf/Cg2GzGDyaf15aR9St9TWlb+XvbZXWpDx8YKs7MLzMH/BCeopv+y9vzrzgkfykCGuWOlSu3mZhj2+FQcrg==", - "dev": true, - "requires": { - "mkdirp": "^1.0.4", - "rimraf": "^3.0.2" - }, - "dependencies": { - "mkdirp": { - "version": "1.0.4", - "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-1.0.4.tgz", - "integrity": "sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==", + }, + "@babel/traverse": { + "version": "7.16.0", + "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.16.0.tgz", + "integrity": "sha512-qQ84jIs1aRQxaGaxSysII9TuDaguZ5yVrEuC0BN2vcPlalwfLovVmCjbFDPECPXcYM/wLvNFfp8uDOliLxIoUQ==", + "dev": true, + "requires": { + "@babel/code-frame": "^7.16.0", + "@babel/generator": "^7.16.0", + "@babel/helper-function-name": "^7.16.0", + "@babel/helper-hoist-variables": "^7.16.0", + "@babel/helper-split-export-declaration": "^7.16.0", + "@babel/parser": "^7.16.0", + "@babel/types": "^7.16.0", + "debug": "^4.1.0", + "globals": "^11.1.0" + } + }, + "@babel/types": { + "version": "7.16.0", + "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.16.0.tgz", + "integrity": "sha512-PJgg/k3SdLsGb3hhisFvtLOw5ts113klrpLuIPtCJIU+BB24fqq6lf8RWqKJEjzqXR9AEH1rIb5XTqwBHB+kQg==", + "dev": true, + "requires": { + "@babel/helper-validator-identifier": "^7.15.7", + "to-fast-properties": "^2.0.0" + } + }, + "source-map": { + "version": "0.5.7", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz", + "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=", "dev": true } } }, - "@npmcli/node-gyp": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/@npmcli/node-gyp/-/node-gyp-1.0.2.tgz", - "integrity": "sha512-yrJUe6reVMpktcvagumoqD9r08fH1iRo01gn1u0zoCApa9lnZGEigVKUd2hzsCId4gdtkZZIVscLhNxMECKgRg==", - "dev": true - }, - "@npmcli/promise-spawn": { - "version": "1.3.2", - "resolved": "https://registry.npmjs.org/@npmcli/promise-spawn/-/promise-spawn-1.3.2.tgz", - "integrity": "sha512-QyAGYo/Fbj4MXeGdJcFzZ+FkDkomfRBrPM+9QYJSg+PxgAUL+LU3FneQk37rKR2/zjqkCV1BLHccX98wRXG3Sg==", - "dev": true, - "requires": { - "infer-owner": "^1.0.4" - } - }, - "@npmcli/run-script": { - "version": "1.8.5", - "resolved": "https://registry.npmjs.org/@npmcli/run-script/-/run-script-1.8.5.tgz", - "integrity": "sha512-NQspusBCpTjNwNRFMtz2C5MxoxyzlbuJ4YEhxAKrIonTiirKDtatsZictx9RgamQIx6+QuHMNmPl0wQdoESs9A==", - "dev": true, - "requires": { - "@npmcli/node-gyp": "^1.0.2", - "@npmcli/promise-spawn": "^1.3.2", - "infer-owner": "^1.0.4", - "node-gyp": "^7.1.0", - "read-package-json-fast": "^2.0.1" - } - }, - "@nrwl/devkit": { - "version": "12.5.8", - "resolved": "https://registry.npmjs.org/@nrwl/devkit/-/devkit-12.5.8.tgz", - "integrity": "sha512-Rhcx8fU30qfoaCMrMUND5lZIDu/0Fik26dE3flgKRgfeGprPSctq/w/k81+HJy7inGVvis20JBSeYH1HSPcePw==", + "@babel/plugin-transform-modules-umd": { + "version": "7.16.0", + "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-umd/-/plugin-transform-modules-umd-7.16.0.tgz", + "integrity": "sha512-nx4f6no57himWiHhxDM5pjwhae5vLpTK2zCnDH8+wNLJy0TVER/LJRHl2bkt6w9Aad2sPD5iNNoUpY3X9sTGDg==", "dev": true, "requires": { - "@nrwl/tao": "12.5.8", - "ejs": "^3.1.5", - "ignore": "^5.0.4", - "semver": "7.3.4", - "tslib": "^2.0.0" + "@babel/helper-module-transforms": "^7.16.0", + "@babel/helper-plugin-utils": "^7.14.5" }, "dependencies": { - "semver": { - "version": "7.3.4", - "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.4.tgz", - "integrity": "sha512-tCfb2WLjqFAtXn4KEdxIhalnRtoKFN7nAwj0B3ZXCbQloV2tq5eDbcTmT68JJD3nRJq24/XgxtQKFIpQdtvmVw==", + "@babel/code-frame": { + "version": "7.16.0", + "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.16.0.tgz", + "integrity": "sha512-IF4EOMEV+bfYwOmNxGzSnjR2EmQod7f1UXOpZM3l4i4o4QNwzjtJAu/HxdjHq0aYBvdqMuQEY1eg0nqW9ZPORA==", "dev": true, "requires": { - "lru-cache": "^6.0.0" + "@babel/highlight": "^7.16.0" } - } - } - }, - "@nrwl/tao": { - "version": "12.5.8", - "resolved": "https://registry.npmjs.org/@nrwl/tao/-/tao-12.5.8.tgz", - "integrity": "sha512-sbVxUnnZMLAFFwbEE/dx4W7U4fUKW5pTIIzlnNuzzTn8KDN3rAON6KqXF+KR/Ny9cGlmkBKlWSq8PvhUrSaZvw==", - "dev": true, - "requires": { - "chalk": "4.1.0", - "enquirer": "~2.3.6", - "fs-extra": "^9.1.0", - "jsonc-parser": "3.0.0", - "rxjs": "^6.5.4", - "rxjs-for-await": "0.0.2", - "semver": "7.3.4", - "tmp": "~0.2.1", - "tslib": "^2.0.0", - "yargs-parser": "20.0.0" - }, - "dependencies": { - "ansi-styles": { - "version": "4.3.0", - "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz", - "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==", + }, + "@babel/generator": { + "version": "7.16.0", + "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.16.0.tgz", + "integrity": "sha512-RR8hUCfRQn9j9RPKEVXo9LiwoxLPYn6hNZlvUOR8tSnaxlD0p0+la00ZP9/SnRt6HchKr+X0fO2r8vrETiJGew==", "dev": true, "requires": { - "color-convert": "^2.0.1" + "@babel/types": "^7.16.0", + "jsesc": "^2.5.1", + "source-map": "^0.5.0" } }, - "chalk": { - "version": "4.1.0", - "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.0.tgz", - "integrity": "sha512-qwx12AxXe2Q5xQ43Ac//I6v5aXTipYrSESdOgzrN+9XjgEpyjpKuvSGaN4qE93f7TQTlerQQ8S+EQ0EyDoVL1A==", + "@babel/helper-function-name": { + "version": "7.16.0", + "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.16.0.tgz", + "integrity": "sha512-BZh4mEk1xi2h4HFjWUXRQX5AEx4rvaZxHgax9gcjdLWdkjsY7MKt5p0otjsg5noXw+pB+clMCjw+aEVYADMjog==", "dev": true, "requires": { - "ansi-styles": "^4.1.0", - "supports-color": "^7.1.0" + "@babel/helper-get-function-arity": "^7.16.0", + "@babel/template": "^7.16.0", + "@babel/types": "^7.16.0" } }, - "color-convert": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", - "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==", + "@babel/helper-get-function-arity": { + "version": "7.16.0", + "resolved": "https://registry.npmjs.org/@babel/helper-get-function-arity/-/helper-get-function-arity-7.16.0.tgz", + "integrity": "sha512-ASCquNcywC1NkYh/z7Cgp3w31YW8aojjYIlNg4VeJiHkqyP4AzIvr4qx7pYDb4/s8YcsZWqqOSxgkvjUz1kpDQ==", "dev": true, "requires": { - "color-name": "~1.1.4" + "@babel/types": "^7.16.0" } }, - "color-name": { - "version": "1.1.4", - "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz", - "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==", - "dev": true + "@babel/helper-hoist-variables": { + "version": "7.16.0", + "resolved": "https://registry.npmjs.org/@babel/helper-hoist-variables/-/helper-hoist-variables-7.16.0.tgz", + "integrity": "sha512-1AZlpazjUR0EQZQv3sgRNfM9mEVWPK3M6vlalczA+EECcPz3XPh6VplbErL5UoMpChhSck5wAJHthlj1bYpcmg==", + "dev": true, + "requires": { + "@babel/types": "^7.16.0" + } }, - "has-flag": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz", - "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==", - "dev": true + "@babel/helper-member-expression-to-functions": { + "version": "7.16.0", + "resolved": "https://registry.npmjs.org/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.16.0.tgz", + "integrity": "sha512-bsjlBFPuWT6IWhl28EdrQ+gTvSvj5tqVP5Xeftp07SEuz5pLnsXZuDkDD3Rfcxy0IsHmbZ+7B2/9SHzxO0T+sQ==", + "dev": true, + "requires": { + "@babel/types": "^7.16.0" + } }, - "semver": { - "version": "7.3.4", - "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.4.tgz", - "integrity": "sha512-tCfb2WLjqFAtXn4KEdxIhalnRtoKFN7nAwj0B3ZXCbQloV2tq5eDbcTmT68JJD3nRJq24/XgxtQKFIpQdtvmVw==", + "@babel/helper-module-imports": { + "version": "7.16.0", + "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.16.0.tgz", + "integrity": "sha512-kkH7sWzKPq0xt3H1n+ghb4xEMP8k0U7XV3kkB+ZGy69kDk2ySFW1qPi06sjKzFY3t1j6XbJSqr4mF9L7CYVyhg==", "dev": true, "requires": { - "lru-cache": "^6.0.0" + "@babel/types": "^7.16.0" } }, - "supports-color": { - "version": "7.2.0", - "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz", - "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==", + "@babel/helper-module-transforms": { + "version": "7.16.0", + "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.16.0.tgz", + "integrity": "sha512-My4cr9ATcaBbmaEa8M0dZNA74cfI6gitvUAskgDtAFmAqyFKDSHQo5YstxPbN+lzHl2D9l/YOEFqb2mtUh4gfA==", "dev": true, "requires": { - "has-flag": "^4.0.0" + "@babel/helper-module-imports": "^7.16.0", + "@babel/helper-replace-supers": "^7.16.0", + "@babel/helper-simple-access": "^7.16.0", + "@babel/helper-split-export-declaration": "^7.16.0", + "@babel/helper-validator-identifier": "^7.15.7", + "@babel/template": "^7.16.0", + "@babel/traverse": "^7.16.0", + "@babel/types": "^7.16.0" } }, - "tmp": { - "version": "0.2.1", - "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.2.1.tgz", - "integrity": "sha512-76SUhtfqR2Ijn+xllcI5P1oyannHNHByD80W1q447gU3mp9G9PSpGdWmjUOHRDPiHYacIk66W7ubDTuPF3BEtQ==", + "@babel/helper-optimise-call-expression": { + "version": "7.16.0", + "resolved": "https://registry.npmjs.org/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.16.0.tgz", + "integrity": "sha512-SuI467Gi2V8fkofm2JPnZzB/SUuXoJA5zXe/xzyPP2M04686RzFKFHPK6HDVN6JvWBIEW8tt9hPR7fXdn2Lgpw==", "dev": true, "requires": { - "rimraf": "^3.0.0" + "@babel/types": "^7.16.0" } }, - "yargs-parser": { - "version": "20.0.0", - "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-20.0.0.tgz", - "integrity": "sha512-8eblPHTL7ZWRkyjIZJjnGf+TijiKJSwA24svzLRVvtgoi/RZiKa9fFQTrlx0OKLnyHSdt/enrdadji6WFfESVA==", + "@babel/helper-replace-supers": { + "version": "7.16.0", + "resolved": "https://registry.npmjs.org/@babel/helper-replace-supers/-/helper-replace-supers-7.16.0.tgz", + "integrity": "sha512-TQxuQfSCdoha7cpRNJvfaYxxxzmbxXw/+6cS7V02eeDYyhxderSoMVALvwupA54/pZcOTtVeJ0xccp1nGWladA==", + "dev": true, + "requires": { + "@babel/helper-member-expression-to-functions": "^7.16.0", + "@babel/helper-optimise-call-expression": "^7.16.0", + "@babel/traverse": "^7.16.0", + "@babel/types": "^7.16.0" + } + }, + "@babel/helper-simple-access": { + "version": "7.16.0", + "resolved": "https://registry.npmjs.org/@babel/helper-simple-access/-/helper-simple-access-7.16.0.tgz", + "integrity": "sha512-o1rjBT/gppAqKsYfUdfHq5Rk03lMQrkPHG1OWzHWpLgVXRH4HnMM9Et9CVdIqwkCQlobnGHEJMsgWP/jE1zUiw==", + "dev": true, + "requires": { + "@babel/types": "^7.16.0" + } + }, + "@babel/helper-split-export-declaration": { + "version": "7.16.0", + "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.16.0.tgz", + "integrity": "sha512-0YMMRpuDFNGTHNRiiqJX19GjNXA4H0E8jZ2ibccfSxaCogbm3am5WN/2nQNj0YnQwGWM1J06GOcQ2qnh3+0paw==", + "dev": true, + "requires": { + "@babel/types": "^7.16.0" + } + }, + "@babel/highlight": { + "version": "7.16.0", + "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.16.0.tgz", + "integrity": "sha512-t8MH41kUQylBtu2+4IQA3atqevA2lRgqA2wyVB/YiWmsDSuylZZuXOUy9ric30hfzauEFfdsuk/eXTRrGrfd0g==", + "dev": true, + "requires": { + "@babel/helper-validator-identifier": "^7.15.7", + "chalk": "^2.0.0", + "js-tokens": "^4.0.0" + } + }, + "@babel/parser": { + "version": "7.16.2", + "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.16.2.tgz", + "integrity": "sha512-RUVpT0G2h6rOZwqLDTrKk7ksNv7YpAilTnYe1/Q+eDjxEceRMKVWbCsX7t8h6C1qCFi/1Y8WZjcEPBAFG27GPw==", "dev": true - } - } - }, - "@rollup/plugin-commonjs": { - "version": "20.0.0", - "resolved": "https://registry.npmjs.org/@rollup/plugin-commonjs/-/plugin-commonjs-20.0.0.tgz", - "integrity": "sha512-5K0g5W2Ol8hAcTHqcTBHiA7M58tfmYi1o9KxeJuuRNpGaTa5iLjcyemBitCBcKXaHamOBBEH2dGom6v6Unmqjg==", - "dev": true, - "requires": { - "@rollup/pluginutils": "^3.1.0", - "commondir": "^1.0.1", - "estree-walker": "^2.0.1", - "glob": "^7.1.6", - "is-reference": "^1.2.1", - "magic-string": "^0.25.7", - "resolve": "^1.17.0" - }, - "dependencies": { - "glob": { - "version": "7.1.7", - "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.7.tgz", - "integrity": "sha512-OvD9ENzPLbegENnYP5UUfJIirTg4+XwMWGaQfQTY0JenxNvvIKP3U3/tAQSPIu/lHxXYSZmpXlUHeqAIdKzBLQ==", + }, + "@babel/template": { + "version": "7.16.0", + "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.16.0.tgz", + "integrity": "sha512-MnZdpFD/ZdYhXwiunMqqgyZyucaYsbL0IrjoGjaVhGilz+x8YB++kRfygSOIj1yOtWKPlx7NBp+9I1RQSgsd5A==", "dev": true, "requires": { - "fs.realpath": "^1.0.0", - "inflight": "^1.0.4", - "inherits": "2", - "minimatch": "^3.0.4", - "once": "^1.3.0", - "path-is-absolute": "^1.0.0" + "@babel/code-frame": "^7.16.0", + "@babel/parser": "^7.16.0", + "@babel/types": "^7.16.0" } }, - "resolve": { - "version": "1.20.0", - "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.20.0.tgz", - "integrity": "sha512-wENBPt4ySzg4ybFQW2TT1zMQucPK95HSh/nq2CFTZVOGut2+pQvSsgtda4d26YrYcr067wjbmzOG8byDPBX63A==", + "@babel/traverse": { + "version": "7.16.0", + "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.16.0.tgz", + "integrity": "sha512-qQ84jIs1aRQxaGaxSysII9TuDaguZ5yVrEuC0BN2vcPlalwfLovVmCjbFDPECPXcYM/wLvNFfp8uDOliLxIoUQ==", + "dev": true, + "requires": { + "@babel/code-frame": "^7.16.0", + "@babel/generator": "^7.16.0", + "@babel/helper-function-name": "^7.16.0", + "@babel/helper-hoist-variables": "^7.16.0", + "@babel/helper-split-export-declaration": "^7.16.0", + "@babel/parser": "^7.16.0", + "@babel/types": "^7.16.0", + "debug": "^4.1.0", + "globals": "^11.1.0" + } + }, + "@babel/types": { + "version": "7.16.0", + "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.16.0.tgz", + "integrity": "sha512-PJgg/k3SdLsGb3hhisFvtLOw5ts113klrpLuIPtCJIU+BB24fqq6lf8RWqKJEjzqXR9AEH1rIb5XTqwBHB+kQg==", "dev": true, "requires": { - "is-core-module": "^2.2.0", - "path-parse": "^1.0.6" + "@babel/helper-validator-identifier": "^7.15.7", + "to-fast-properties": "^2.0.0" } + }, + "source-map": { + "version": "0.5.7", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz", + "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=", + "dev": true } } }, - "@rollup/plugin-json": { - "version": "4.1.0", - "resolved": "https://registry.npmjs.org/@rollup/plugin-json/-/plugin-json-4.1.0.tgz", - "integrity": "sha512-yfLbTdNS6amI/2OpmbiBoW12vngr5NW2jCJVZSBEz+H5KfUJZ2M7sDjk0U6GOOdCWFVScShte29o9NezJ53TPw==", + "@babel/plugin-transform-named-capturing-groups-regex": { + "version": "7.16.0", + "resolved": "https://registry.npmjs.org/@babel/plugin-transform-named-capturing-groups-regex/-/plugin-transform-named-capturing-groups-regex-7.16.0.tgz", + "integrity": "sha512-LogN88uO+7EhxWc8WZuQ8vxdSyVGxhkh8WTC3tzlT8LccMuQdA81e9SGV6zY7kY2LjDhhDOFdQVxdGwPyBCnvg==", "dev": true, "requires": { - "@rollup/pluginutils": "^3.0.8" + "@babel/helper-create-regexp-features-plugin": "^7.16.0" } }, - "@rollup/plugin-node-resolve": { - "version": "13.0.4", - "resolved": "https://registry.npmjs.org/@rollup/plugin-node-resolve/-/plugin-node-resolve-13.0.4.tgz", - "integrity": "sha512-eYq4TFy40O8hjeDs+sIxEH/jc9lyuI2k9DM557WN6rO5OpnC2qXMBNj4IKH1oHrnAazL49C5p0tgP0/VpqJ+/w==", + "@babel/plugin-transform-new-target": { + "version": "7.16.0", + "resolved": "https://registry.npmjs.org/@babel/plugin-transform-new-target/-/plugin-transform-new-target-7.16.0.tgz", + "integrity": "sha512-fhjrDEYv2DBsGN/P6rlqakwRwIp7rBGLPbrKxwh7oVt5NNkIhZVOY2GRV+ULLsQri1bDqwDWnU3vhlmx5B2aCw==", "dev": true, "requires": { - "@rollup/pluginutils": "^3.1.0", - "@types/resolve": "1.17.1", - "builtin-modules": "^3.1.0", - "deepmerge": "^4.2.2", - "is-module": "^1.0.0", - "resolve": "^1.19.0" - }, - "dependencies": { - "resolve": { - "version": "1.20.0", - "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.20.0.tgz", - "integrity": "sha512-wENBPt4ySzg4ybFQW2TT1zMQucPK95HSh/nq2CFTZVOGut2+pQvSsgtda4d26YrYcr067wjbmzOG8byDPBX63A==", - "dev": true, - "requires": { - "is-core-module": "^2.2.0", - "path-parse": "^1.0.6" - } - } + "@babel/helper-plugin-utils": "^7.14.5" } }, - "@rollup/pluginutils": { - "version": "3.1.0", - "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-3.1.0.tgz", - "integrity": "sha512-GksZ6pr6TpIjHm8h9lSQ8pi8BE9VeubNT0OMJ3B5uZJ8pz73NPiqOtCog/x2/QzM1ENChPKxMDhiQuRHsqc+lg==", + "@babel/plugin-transform-object-super": { + "version": "7.16.0", + "resolved": "https://registry.npmjs.org/@babel/plugin-transform-object-super/-/plugin-transform-object-super-7.16.0.tgz", + "integrity": "sha512-fds+puedQHn4cPLshoHcR1DTMN0q1V9ou0mUjm8whx9pGcNvDrVVrgw+KJzzCaiTdaYhldtrUps8DWVMgrSEyg==", "dev": true, "requires": { - "@types/estree": "0.0.39", - "estree-walker": "^1.0.1", - "picomatch": "^2.2.2" + "@babel/helper-plugin-utils": "^7.14.5", + "@babel/helper-replace-supers": "^7.16.0" }, "dependencies": { - "@types/estree": { - "version": "0.0.39", - "resolved": "https://registry.npmjs.org/@types/estree/-/estree-0.0.39.tgz", - "integrity": "sha512-EYNwp3bU+98cpU4lAWYYL7Zz+2gryWH1qbdDTidVd6hkiR6weksdbMadyXKXNPEkQFhXM+hVO9ZygomHXp+AIw==", + "@babel/code-frame": { + "version": "7.16.0", + "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.16.0.tgz", + "integrity": "sha512-IF4EOMEV+bfYwOmNxGzSnjR2EmQod7f1UXOpZM3l4i4o4QNwzjtJAu/HxdjHq0aYBvdqMuQEY1eg0nqW9ZPORA==", + "dev": true, + "requires": { + "@babel/highlight": "^7.16.0" + } + }, + "@babel/generator": { + "version": "7.16.0", + "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.16.0.tgz", + "integrity": "sha512-RR8hUCfRQn9j9RPKEVXo9LiwoxLPYn6hNZlvUOR8tSnaxlD0p0+la00ZP9/SnRt6HchKr+X0fO2r8vrETiJGew==", + "dev": true, + "requires": { + "@babel/types": "^7.16.0", + "jsesc": "^2.5.1", + "source-map": "^0.5.0" + } + }, + "@babel/helper-function-name": { + "version": "7.16.0", + "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.16.0.tgz", + "integrity": "sha512-BZh4mEk1xi2h4HFjWUXRQX5AEx4rvaZxHgax9gcjdLWdkjsY7MKt5p0otjsg5noXw+pB+clMCjw+aEVYADMjog==", + "dev": true, + "requires": { + "@babel/helper-get-function-arity": "^7.16.0", + "@babel/template": "^7.16.0", + "@babel/types": "^7.16.0" + } + }, + "@babel/helper-get-function-arity": { + "version": "7.16.0", + "resolved": "https://registry.npmjs.org/@babel/helper-get-function-arity/-/helper-get-function-arity-7.16.0.tgz", + "integrity": "sha512-ASCquNcywC1NkYh/z7Cgp3w31YW8aojjYIlNg4VeJiHkqyP4AzIvr4qx7pYDb4/s8YcsZWqqOSxgkvjUz1kpDQ==", + "dev": true, + "requires": { + "@babel/types": "^7.16.0" + } + }, + "@babel/helper-hoist-variables": { + "version": "7.16.0", + "resolved": "https://registry.npmjs.org/@babel/helper-hoist-variables/-/helper-hoist-variables-7.16.0.tgz", + "integrity": "sha512-1AZlpazjUR0EQZQv3sgRNfM9mEVWPK3M6vlalczA+EECcPz3XPh6VplbErL5UoMpChhSck5wAJHthlj1bYpcmg==", + "dev": true, + "requires": { + "@babel/types": "^7.16.0" + } + }, + "@babel/helper-member-expression-to-functions": { + "version": "7.16.0", + "resolved": "https://registry.npmjs.org/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.16.0.tgz", + "integrity": "sha512-bsjlBFPuWT6IWhl28EdrQ+gTvSvj5tqVP5Xeftp07SEuz5pLnsXZuDkDD3Rfcxy0IsHmbZ+7B2/9SHzxO0T+sQ==", + "dev": true, + "requires": { + "@babel/types": "^7.16.0" + } + }, + "@babel/helper-optimise-call-expression": { + "version": "7.16.0", + "resolved": "https://registry.npmjs.org/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.16.0.tgz", + "integrity": "sha512-SuI467Gi2V8fkofm2JPnZzB/SUuXoJA5zXe/xzyPP2M04686RzFKFHPK6HDVN6JvWBIEW8tt9hPR7fXdn2Lgpw==", + "dev": true, + "requires": { + "@babel/types": "^7.16.0" + } + }, + "@babel/helper-replace-supers": { + "version": "7.16.0", + "resolved": "https://registry.npmjs.org/@babel/helper-replace-supers/-/helper-replace-supers-7.16.0.tgz", + "integrity": "sha512-TQxuQfSCdoha7cpRNJvfaYxxxzmbxXw/+6cS7V02eeDYyhxderSoMVALvwupA54/pZcOTtVeJ0xccp1nGWladA==", + "dev": true, + "requires": { + "@babel/helper-member-expression-to-functions": "^7.16.0", + "@babel/helper-optimise-call-expression": "^7.16.0", + "@babel/traverse": "^7.16.0", + "@babel/types": "^7.16.0" + } + }, + "@babel/helper-split-export-declaration": { + "version": "7.16.0", + "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.16.0.tgz", + "integrity": "sha512-0YMMRpuDFNGTHNRiiqJX19GjNXA4H0E8jZ2ibccfSxaCogbm3am5WN/2nQNj0YnQwGWM1J06GOcQ2qnh3+0paw==", + "dev": true, + "requires": { + "@babel/types": "^7.16.0" + } + }, + "@babel/highlight": { + "version": "7.16.0", + "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.16.0.tgz", + "integrity": "sha512-t8MH41kUQylBtu2+4IQA3atqevA2lRgqA2wyVB/YiWmsDSuylZZuXOUy9ric30hfzauEFfdsuk/eXTRrGrfd0g==", + "dev": true, + "requires": { + "@babel/helper-validator-identifier": "^7.15.7", + "chalk": "^2.0.0", + "js-tokens": "^4.0.0" + } + }, + "@babel/parser": { + "version": "7.16.2", + "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.16.2.tgz", + "integrity": "sha512-RUVpT0G2h6rOZwqLDTrKk7ksNv7YpAilTnYe1/Q+eDjxEceRMKVWbCsX7t8h6C1qCFi/1Y8WZjcEPBAFG27GPw==", "dev": true }, - "estree-walker": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-1.0.1.tgz", - "integrity": "sha512-1fMXF3YP4pZZVozF8j/ZLfvnR8NSIljt56UhbZ5PeeDmmGHpgpdwQt7ITlGvYaQukCvuBRMLEiKiYC+oeIg4cg==", + "@babel/template": { + "version": "7.16.0", + "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.16.0.tgz", + "integrity": "sha512-MnZdpFD/ZdYhXwiunMqqgyZyucaYsbL0IrjoGjaVhGilz+x8YB++kRfygSOIj1yOtWKPlx7NBp+9I1RQSgsd5A==", + "dev": true, + "requires": { + "@babel/code-frame": "^7.16.0", + "@babel/parser": "^7.16.0", + "@babel/types": "^7.16.0" + } + }, + "@babel/traverse": { + "version": "7.16.0", + "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.16.0.tgz", + "integrity": "sha512-qQ84jIs1aRQxaGaxSysII9TuDaguZ5yVrEuC0BN2vcPlalwfLovVmCjbFDPECPXcYM/wLvNFfp8uDOliLxIoUQ==", + "dev": true, + "requires": { + "@babel/code-frame": "^7.16.0", + "@babel/generator": "^7.16.0", + "@babel/helper-function-name": "^7.16.0", + "@babel/helper-hoist-variables": "^7.16.0", + "@babel/helper-split-export-declaration": "^7.16.0", + "@babel/parser": "^7.16.0", + "@babel/types": "^7.16.0", + "debug": "^4.1.0", + "globals": "^11.1.0" + } + }, + "@babel/types": { + "version": "7.16.0", + "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.16.0.tgz", + "integrity": "sha512-PJgg/k3SdLsGb3hhisFvtLOw5ts113klrpLuIPtCJIU+BB24fqq6lf8RWqKJEjzqXR9AEH1rIb5XTqwBHB+kQg==", + "dev": true, + "requires": { + "@babel/helper-validator-identifier": "^7.15.7", + "to-fast-properties": "^2.0.0" + } + }, + "source-map": { + "version": "0.5.7", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz", + "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=", "dev": true } } }, - "@schematics/angular": { - "version": "12.2.0", - "resolved": "https://registry.npmjs.org/@schematics/angular/-/angular-12.2.0.tgz", - "integrity": "sha512-2NolT/PNKgjINIHvz6o4sYFj4D4ai7Usf+HspQCi9W30qtLV4Z6hRXoEhmDxrGSlF67vJdwUwDM3sP+6Tg8XEw==", + "@babel/plugin-transform-parameters": { + "version": "7.16.0", + "resolved": "https://registry.npmjs.org/@babel/plugin-transform-parameters/-/plugin-transform-parameters-7.16.0.tgz", + "integrity": "sha512-XgnQEm1CevKROPx+udOi/8f8TiGhrUWiHiaUCIp47tE0tpFDjzXNTZc9E5CmCwxNjXTWEVqvRfWZYOTFvMa/ZQ==", "dev": true, "requires": { - "@angular-devkit/core": "12.2.0", - "@angular-devkit/schematics": "12.2.0", - "jsonc-parser": "3.0.0" + "@babel/helper-plugin-utils": "^7.14.5" } }, - "@sindresorhus/is": { - "version": "0.7.0", - "resolved": "https://registry.npmjs.org/@sindresorhus/is/-/is-0.7.0.tgz", - "integrity": "sha512-ONhaKPIufzzrlNbqtWFFd+jlnemX6lJAgq9ZeiZtS7I1PIf/la7CW4m83rTXRnVnsMbW2k56pGYu7AUFJD9Pow==", - "dev": true - }, - "@stylelint/postcss-css-in-js": { - "version": "0.37.2", - "resolved": "https://registry.npmjs.org/@stylelint/postcss-css-in-js/-/postcss-css-in-js-0.37.2.tgz", - "integrity": "sha512-nEhsFoJurt8oUmieT8qy4nk81WRHmJynmVwn/Vts08PL9fhgIsMhk1GId5yAN643OzqEEb5S/6At2TZW7pqPDA==", + "@babel/plugin-transform-property-literals": { + "version": "7.16.0", + "resolved": "https://registry.npmjs.org/@babel/plugin-transform-property-literals/-/plugin-transform-property-literals-7.16.0.tgz", + "integrity": "sha512-XLldD4V8+pOqX2hwfWhgwXzGdnDOThxaNTgqagOcpBgIxbUvpgU2FMvo5E1RyHbk756WYgdbS0T8y0Cj9FKkWQ==", "dev": true, "requires": { - "@babel/core": ">=7.9.0" + "@babel/helper-plugin-utils": "^7.14.5" } }, - "@stylelint/postcss-markdown": { - "version": "0.36.2", - "resolved": "https://registry.npmjs.org/@stylelint/postcss-markdown/-/postcss-markdown-0.36.2.tgz", - "integrity": "sha512-2kGbqUVJUGE8dM+bMzXG/PYUWKkjLIkRLWNh39OaADkiabDRdw8ATFCgbMz5xdIcvwspPAluSL7uY+ZiTWdWmQ==", + "@babel/plugin-transform-regenerator": { + "version": "7.16.0", + "resolved": "https://registry.npmjs.org/@babel/plugin-transform-regenerator/-/plugin-transform-regenerator-7.16.0.tgz", + "integrity": "sha512-JAvGxgKuwS2PihiSFaDrp94XOzzTUeDeOQlcKzVAyaPap7BnZXK/lvMDiubkPTdotPKOIZq9xWXWnggUMYiExg==", "dev": true, "requires": { - "remark": "^13.0.0", - "unist-util-find-all-after": "^3.0.2" + "regenerator-transform": "^0.14.2" } }, - "@szmarczak/http-timer": { - "version": "1.1.2", - "resolved": "https://registry.npmjs.org/@szmarczak/http-timer/-/http-timer-1.1.2.tgz", - "integrity": "sha512-XIB2XbzHTN6ieIjfIMV9hlVcfPU26s2vafYWQcZHWXHOxiaRZYEDKEwdl129Zyg50+foYV2jCgtrqSA6qNuNSA==", + "@babel/plugin-transform-reserved-words": { + "version": "7.16.0", + "resolved": "https://registry.npmjs.org/@babel/plugin-transform-reserved-words/-/plugin-transform-reserved-words-7.16.0.tgz", + "integrity": "sha512-Dgs8NNCehHSvXdhEhln8u/TtJxfVwGYCgP2OOr5Z3Ar+B+zXicEOKNTyc+eca2cuEOMtjW6m9P9ijOt8QdqWkg==", "dev": true, "requires": { - "defer-to-connect": "^1.0.1" + "@babel/helper-plugin-utils": "^7.14.5" } }, - "@tootallnate/once": { - "version": "1.1.2", - "resolved": "https://registry.npmjs.org/@tootallnate/once/-/once-1.1.2.tgz", - "integrity": "sha512-RbzJvlNzmRq5c3O09UipeuXno4tA1FE6ikOjxZK0tuxVv3412l64l5t1W5pj4+rJq9vpkm/kwiR07aZXnsKPxw==", - "dev": true + "@babel/plugin-transform-runtime": { + "version": "7.15.8", + "resolved": "https://registry.npmjs.org/@babel/plugin-transform-runtime/-/plugin-transform-runtime-7.15.8.tgz", + "integrity": "sha512-+6zsde91jMzzvkzuEA3k63zCw+tm/GvuuabkpisgbDMTPQsIMHllE3XczJFFtEHLjjhKQFZmGQVRdELetlWpVw==", + "dev": true, + "requires": { + "@babel/helper-module-imports": "^7.15.4", + "@babel/helper-plugin-utils": "^7.14.5", + "babel-plugin-polyfill-corejs2": "^0.2.2", + "babel-plugin-polyfill-corejs3": "^0.2.5", + "babel-plugin-polyfill-regenerator": "^0.2.2", + "semver": "^6.3.0" + }, + "dependencies": { + "semver": { + "version": "6.3.0", + "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz", + "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==", + "dev": true + } + } }, - "@trysound/sax": { - "version": "0.1.1", - "resolved": "https://registry.npmjs.org/@trysound/sax/-/sax-0.1.1.tgz", - "integrity": "sha512-Z6DoceYb/1xSg5+e+ZlPZ9v0N16ZvZ+wYMraFue4HYrE4ttONKtsvruIRf6t9TBR0YvSOfi1hUU0fJfBLCDYow==", - "dev": true - }, - "@types/component-emitter": { - "version": "1.2.10", - "resolved": "https://registry.npmjs.org/@types/component-emitter/-/component-emitter-1.2.10.tgz", - "integrity": "sha512-bsjleuRKWmGqajMerkzox19aGbscQX5rmmvvXl3wlIp5gMG1HgkiwPxsN5p070fBDKTNSPgojVbuY1+HWMbFhg==", - "dev": true - }, - "@types/cookie": { - "version": "0.4.1", - "resolved": "https://registry.npmjs.org/@types/cookie/-/cookie-0.4.1.tgz", - "integrity": "sha512-XW/Aa8APYr6jSVVA1y/DEIZX0/GMKLEVekNG727R8cs56ahETkRAy/3DR7+fJyh7oUgGwNQaRfXCun0+KbWY7Q==", - "dev": true - }, - "@types/cors": { - "version": "2.8.12", - "resolved": "https://registry.npmjs.org/@types/cors/-/cors-2.8.12.tgz", - "integrity": "sha512-vt+kDhq/M2ayberEtJcIN/hxXy1Pk+59g2FV/ZQceeaTyCtCucjL2Q7FXlFjtWn4n15KCr1NE2lNNFhp0lEThw==", - "dev": true - }, - "@types/eslint": { - "version": "7.28.0", - "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-7.28.0.tgz", - "integrity": "sha512-07XlgzX0YJUn4iG1ocY4IX9DzKSmMGUs6ESKlxWhZRaa0fatIWaHWUVapcuGa8r5HFnTqzj+4OCjd5f7EZ/i/A==", + "@babel/plugin-transform-shorthand-properties": { + "version": "7.16.0", + "resolved": "https://registry.npmjs.org/@babel/plugin-transform-shorthand-properties/-/plugin-transform-shorthand-properties-7.16.0.tgz", + "integrity": "sha512-iVb1mTcD8fuhSv3k99+5tlXu5N0v8/DPm2mO3WACLG6al1CGZH7v09HJyUb1TtYl/Z+KrM6pHSIJdZxP5A+xow==", "dev": true, "requires": { - "@types/estree": "*", - "@types/json-schema": "*" + "@babel/helper-plugin-utils": "^7.14.5" } }, - "@types/eslint-scope": { - "version": "3.7.1", - "resolved": "https://registry.npmjs.org/@types/eslint-scope/-/eslint-scope-3.7.1.tgz", - "integrity": "sha512-SCFeogqiptms4Fg29WpOTk5nHIzfpKCemSN63ksBQYKTcXoJEmJagV+DhVmbapZzY4/5YaOV1nZwrsU79fFm1g==", + "@babel/plugin-transform-spread": { + "version": "7.16.0", + "resolved": "https://registry.npmjs.org/@babel/plugin-transform-spread/-/plugin-transform-spread-7.16.0.tgz", + "integrity": "sha512-Ao4MSYRaLAQczZVp9/7E7QHsCuK92yHRrmVNRe/SlEJjhzivq0BSn8mEraimL8wizHZ3fuaHxKH0iwzI13GyGg==", "dev": true, "requires": { - "@types/eslint": "*", - "@types/estree": "*" + "@babel/helper-plugin-utils": "^7.14.5", + "@babel/helper-skip-transparent-expression-wrappers": "^7.16.0" } }, - "@types/estree": { - "version": "0.0.48", - "resolved": "https://registry.npmjs.org/@types/estree/-/estree-0.0.48.tgz", - "integrity": "sha512-LfZwXoGUDo0C3me81HXgkBg5CTQYb6xzEl+fNmbO4JdRiSKQ8A0GD1OBBvKAIsbCUgoyAty7m99GqqMQe784ew==", - "dev": true - }, - "@types/glob": { - "version": "7.1.4", - "resolved": "https://registry.npmjs.org/@types/glob/-/glob-7.1.4.tgz", - "integrity": "sha512-w+LsMxKyYQm347Otw+IfBXOv9UWVjpHpCDdbBMt8Kz/xbvCYNjP+0qPh91Km3iKfSRLBB0P7fAMf0KHrPu+MyA==", + "@babel/plugin-transform-sticky-regex": { + "version": "7.16.0", + "resolved": "https://registry.npmjs.org/@babel/plugin-transform-sticky-regex/-/plugin-transform-sticky-regex-7.16.0.tgz", + "integrity": "sha512-/ntT2NljR9foobKk4E/YyOSwcGUXtYWv5tinMK/3RkypyNBNdhHUaq6Orw5DWq9ZcNlS03BIlEALFeQgeVAo4Q==", "dev": true, "requires": { - "@types/minimatch": "*", - "@types/node": "*" + "@babel/helper-plugin-utils": "^7.14.5" } }, - "@types/hammerjs": { - "version": "2.0.40", - "resolved": "https://registry.npmjs.org/@types/hammerjs/-/hammerjs-2.0.40.tgz", - "integrity": "sha512-VbjwR1fhsn2h2KXAY4oy1fm7dCxaKy0D+deTb8Ilc3Eo3rc5+5eA4rfYmZaHgNJKxVyI0f6WIXzO2zLkVmQPHA==" - }, - "@types/jasmine": { - "version": "3.8.1", - "resolved": "https://registry.npmjs.org/@types/jasmine/-/jasmine-3.8.1.tgz", - "integrity": "sha512-ioRNoJvv0eXL1c9BZKpnywZWb5YflhaSiF3IOp9deyoh30MOwkB3bNuzi4UW76EFEhcmqpoEpdWhcUAAilomTw==", - "dev": true - }, - "@types/jasminewd2": { - "version": "2.0.10", - "resolved": "https://registry.npmjs.org/@types/jasminewd2/-/jasminewd2-2.0.10.tgz", - "integrity": "sha512-J7mDz7ovjwjc+Y9rR9rY53hFWKATcIkrr9DwQWmOas4/pnIPJTXawnzjwpHm3RSxz/e3ZVUvQ7cRbd5UQLo10g==", + "@babel/plugin-transform-template-literals": { + "version": "7.16.0", + "resolved": "https://registry.npmjs.org/@babel/plugin-transform-template-literals/-/plugin-transform-template-literals-7.16.0.tgz", + "integrity": "sha512-Rd4Ic89hA/f7xUSJQk5PnC+4so50vBoBfxjdQAdvngwidM8jYIBVxBZ/sARxD4e0yMXRbJVDrYf7dyRtIIKT6Q==", "dev": true, "requires": { - "@types/jasmine": "*" + "@babel/helper-plugin-utils": "^7.14.5" } }, - "@types/json-schema": { - "version": "7.0.8", - "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.8.tgz", - "integrity": "sha512-YSBPTLTVm2e2OoQIDYx8HaeWJ5tTToLH67kXR7zYNGupXMEHa2++G8k+DczX2cFVgalypqtyZIcU19AFcmOpmg==", - "dev": true - }, - "@types/mdast": { - "version": "3.0.4", - "resolved": "https://registry.npmjs.org/@types/mdast/-/mdast-3.0.4.tgz", - "integrity": "sha512-gIdhbLDFlspL53xzol2hVzrXAbzt71erJHoOwQZWssjaiouOotf03lNtMmFm9VfFkvnLWccSVjUAZGQ5Kqw+jA==", + "@babel/plugin-transform-typeof-symbol": { + "version": "7.16.0", + "resolved": "https://registry.npmjs.org/@babel/plugin-transform-typeof-symbol/-/plugin-transform-typeof-symbol-7.16.0.tgz", + "integrity": "sha512-++V2L8Bdf4vcaHi2raILnptTBjGEFxn5315YU+e8+EqXIucA+q349qWngCLpUYqqv233suJ6NOienIVUpS9cqg==", "dev": true, "requires": { - "@types/unist": "*" + "@babel/helper-plugin-utils": "^7.14.5" } }, - "@types/minimatch": { - "version": "3.0.5", - "resolved": "https://registry.npmjs.org/@types/minimatch/-/minimatch-3.0.5.tgz", - "integrity": "sha512-Klz949h02Gz2uZCMGwDUSDS1YBlTdDDgbWHi+81l29tQALUtvz4rAYi5uoVhE5Lagoq6DeqAUlbrHvW/mXDgdQ==", - "dev": true - }, - "@types/minimist": { - "version": "1.2.2", - "resolved": "https://registry.npmjs.org/@types/minimist/-/minimist-1.2.2.tgz", - "integrity": "sha512-jhuKLIRrhvCPLqwPcx6INqmKeiA5EWrsCOPhrlFSrbrmU4ZMPjj5Ul/oLCMDO98XRUIwVm78xICz4EPCektzeQ==", - "dev": true + "@babel/plugin-transform-unicode-escapes": { + "version": "7.16.0", + "resolved": "https://registry.npmjs.org/@babel/plugin-transform-unicode-escapes/-/plugin-transform-unicode-escapes-7.16.0.tgz", + "integrity": "sha512-VFi4dhgJM7Bpk8lRc5CMaRGlKZ29W9C3geZjt9beuzSUrlJxsNwX7ReLwaL6WEvsOf2EQkyIJEPtF8EXjB/g2A==", + "dev": true, + "requires": { + "@babel/helper-plugin-utils": "^7.14.5" + } }, - "@types/node": { - "version": "12.20.16", - "resolved": "https://registry.npmjs.org/@types/node/-/node-12.20.16.tgz", - "integrity": "sha512-6CLxw83vQf6DKqXxMPwl8qpF8I7THFZuIwLt4TnNsumxkp1VsRZWT8txQxncT/Rl2UojTsFzWgDG4FRMwafrlA==", - "dev": true + "@babel/plugin-transform-unicode-regex": { + "version": "7.16.0", + "resolved": "https://registry.npmjs.org/@babel/plugin-transform-unicode-regex/-/plugin-transform-unicode-regex-7.16.0.tgz", + "integrity": "sha512-jHLK4LxhHjvCeZDWyA9c+P9XH1sOxRd1RO9xMtDVRAOND/PczPqizEtVdx4TQF/wyPaewqpT+tgQFYMnN/P94A==", + "dev": true, + "requires": { + "@babel/helper-create-regexp-features-plugin": "^7.16.0", + "@babel/helper-plugin-utils": "^7.14.5" + } }, - "@types/normalize-package-data": { - "version": "2.4.1", - "resolved": "https://registry.npmjs.org/@types/normalize-package-data/-/normalize-package-data-2.4.1.tgz", - "integrity": "sha512-Gj7cI7z+98M282Tqmp2K5EIsoouUEzbBJhQQzDE3jSIRk6r9gsz0oUokqIUR4u1R3dMHo0pDHM7sNOHyhulypw==", - "dev": true + "@babel/preset-env": { + "version": "7.15.8", + "resolved": "https://registry.npmjs.org/@babel/preset-env/-/preset-env-7.15.8.tgz", + "integrity": "sha512-rCC0wH8husJgY4FPbHsiYyiLxSY8oMDJH7Rl6RQMknbN9oDDHhM9RDFvnGM2MgkbUJzSQB4gtuwygY5mCqGSsA==", + "dev": true, + "requires": { + "@babel/compat-data": "^7.15.0", + "@babel/helper-compilation-targets": "^7.15.4", + "@babel/helper-plugin-utils": "^7.14.5", + "@babel/helper-validator-option": "^7.14.5", + "@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining": "^7.15.4", + "@babel/plugin-proposal-async-generator-functions": "^7.15.8", + "@babel/plugin-proposal-class-properties": "^7.14.5", + "@babel/plugin-proposal-class-static-block": "^7.15.4", + "@babel/plugin-proposal-dynamic-import": "^7.14.5", + "@babel/plugin-proposal-export-namespace-from": "^7.14.5", + "@babel/plugin-proposal-json-strings": "^7.14.5", + "@babel/plugin-proposal-logical-assignment-operators": "^7.14.5", + "@babel/plugin-proposal-nullish-coalescing-operator": "^7.14.5", + "@babel/plugin-proposal-numeric-separator": "^7.14.5", + "@babel/plugin-proposal-object-rest-spread": "^7.15.6", + "@babel/plugin-proposal-optional-catch-binding": "^7.14.5", + "@babel/plugin-proposal-optional-chaining": "^7.14.5", + "@babel/plugin-proposal-private-methods": "^7.14.5", + "@babel/plugin-proposal-private-property-in-object": "^7.15.4", + "@babel/plugin-proposal-unicode-property-regex": "^7.14.5", + "@babel/plugin-syntax-async-generators": "^7.8.4", + "@babel/plugin-syntax-class-properties": "^7.12.13", + "@babel/plugin-syntax-class-static-block": "^7.14.5", + "@babel/plugin-syntax-dynamic-import": "^7.8.3", + "@babel/plugin-syntax-export-namespace-from": "^7.8.3", + "@babel/plugin-syntax-json-strings": "^7.8.3", + "@babel/plugin-syntax-logical-assignment-operators": "^7.10.4", + "@babel/plugin-syntax-nullish-coalescing-operator": "^7.8.3", + "@babel/plugin-syntax-numeric-separator": "^7.10.4", + "@babel/plugin-syntax-object-rest-spread": "^7.8.3", + "@babel/plugin-syntax-optional-catch-binding": "^7.8.3", + "@babel/plugin-syntax-optional-chaining": "^7.8.3", + "@babel/plugin-syntax-private-property-in-object": "^7.14.5", + "@babel/plugin-syntax-top-level-await": "^7.14.5", + "@babel/plugin-transform-arrow-functions": "^7.14.5", + "@babel/plugin-transform-async-to-generator": "^7.14.5", + "@babel/plugin-transform-block-scoped-functions": "^7.14.5", + "@babel/plugin-transform-block-scoping": "^7.15.3", + "@babel/plugin-transform-classes": "^7.15.4", + "@babel/plugin-transform-computed-properties": "^7.14.5", + "@babel/plugin-transform-destructuring": "^7.14.7", + "@babel/plugin-transform-dotall-regex": "^7.14.5", + "@babel/plugin-transform-duplicate-keys": "^7.14.5", + "@babel/plugin-transform-exponentiation-operator": "^7.14.5", + "@babel/plugin-transform-for-of": "^7.15.4", + "@babel/plugin-transform-function-name": "^7.14.5", + "@babel/plugin-transform-literals": "^7.14.5", + "@babel/plugin-transform-member-expression-literals": "^7.14.5", + "@babel/plugin-transform-modules-amd": "^7.14.5", + "@babel/plugin-transform-modules-commonjs": "^7.15.4", + "@babel/plugin-transform-modules-systemjs": "^7.15.4", + "@babel/plugin-transform-modules-umd": "^7.14.5", + "@babel/plugin-transform-named-capturing-groups-regex": "^7.14.9", + "@babel/plugin-transform-new-target": "^7.14.5", + "@babel/plugin-transform-object-super": "^7.14.5", + "@babel/plugin-transform-parameters": "^7.15.4", + "@babel/plugin-transform-property-literals": "^7.14.5", + "@babel/plugin-transform-regenerator": "^7.14.5", + "@babel/plugin-transform-reserved-words": "^7.14.5", + "@babel/plugin-transform-shorthand-properties": "^7.14.5", + "@babel/plugin-transform-spread": "^7.15.8", + "@babel/plugin-transform-sticky-regex": "^7.14.5", + "@babel/plugin-transform-template-literals": "^7.14.5", + "@babel/plugin-transform-typeof-symbol": "^7.14.5", + "@babel/plugin-transform-unicode-escapes": "^7.14.5", + "@babel/plugin-transform-unicode-regex": "^7.14.5", + "@babel/preset-modules": "^0.1.4", + "@babel/types": "^7.15.6", + "babel-plugin-polyfill-corejs2": "^0.2.2", + "babel-plugin-polyfill-corejs3": "^0.2.5", + "babel-plugin-polyfill-regenerator": "^0.2.2", + "core-js-compat": "^3.16.0", + "semver": "^6.3.0" + }, + "dependencies": { + "semver": { + "version": "6.3.0", + "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz", + "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==", + "dev": true + } + } }, - "@types/parse-json": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.0.tgz", - "integrity": "sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA==", - "dev": true + "@babel/preset-modules": { + "version": "0.1.5", + "resolved": "https://registry.npmjs.org/@babel/preset-modules/-/preset-modules-0.1.5.tgz", + "integrity": "sha512-A57th6YRG7oR3cq/yt/Y84MvGgE0eJG2F1JLhKuyG+jFxEgrd/HAMJatiFtmOiZurz+0DkrvbheCLaV5f2JfjA==", + "dev": true, + "requires": { + "@babel/helper-plugin-utils": "^7.0.0", + "@babel/plugin-proposal-unicode-property-regex": "^7.4.4", + "@babel/plugin-transform-dotall-regex": "^7.4.4", + "@babel/types": "^7.4.4", + "esutils": "^2.0.2" + } }, - "@types/q": { - "version": "0.0.32", - "resolved": "https://registry.npmjs.org/@types/q/-/q-0.0.32.tgz", - "integrity": "sha1-vShOV8hPEyXacCur/IKlMoGQwMU=", - "dev": true + "@babel/runtime": { + "version": "7.15.4", + "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.15.4.tgz", + "integrity": "sha512-99catp6bHCaxr4sJ/DbTGgHS4+Rs2RVd2g7iOap6SLGPDknRK9ztKNsE/Fg6QhSeh1FGE5f6gHGQmvvn3I3xhw==", + "dev": true, + "requires": { + "regenerator-runtime": "^0.13.4" + } }, - "@types/resolve": { - "version": "1.17.1", - "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.17.1.tgz", - "integrity": "sha512-yy7HuzQhj0dhGpD8RLXSZWEkLsV9ibvxvi6EiJ3bkqLAO1RGo0WbkWQiwpRlSFymTJRz0d3k5LM3kkx8ArDbLw==", + "@babel/runtime-corejs3": { + "version": "7.16.0", + "resolved": "https://registry.npmjs.org/@babel/runtime-corejs3/-/runtime-corejs3-7.16.0.tgz", + "integrity": "sha512-Oi2qwQ21X7/d9gn3WiwkDTJmq3TQtYNz89lRnoFy8VeZpWlsyXvzSwiRrRZ8cXluvSwqKxqHJ6dBd9Rv+p0ZGQ==", "dev": true, "requires": { - "@types/node": "*" + "core-js-pure": "^3.19.0", + "regenerator-runtime": "^0.13.4" } }, - "@types/selenium-webdriver": { - "version": "3.0.18", - "resolved": "https://registry.npmjs.org/@types/selenium-webdriver/-/selenium-webdriver-3.0.18.tgz", - "integrity": "sha512-kl+jWcEubY2B5j+i6gFPyO3IaskOsGfvS7p7JRxmCuYbMf0aCj9SxfvvVhz2wk3/9l+e2pgP8Hyzv6zPMRwcAw==", - "dev": true + "@babel/template": { + "version": "7.15.4", + "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.15.4.tgz", + "integrity": "sha512-UgBAfEa1oGuYgDIPM2G+aHa4Nlo9Lh6mGD2bDBGMTbYnc38vulXPuC1MGjYILIEmlwl6Rd+BPR9ee3gm20CBtg==", + "dev": true, + "requires": { + "@babel/code-frame": "^7.14.5", + "@babel/parser": "^7.15.4", + "@babel/types": "^7.15.4" + } }, - "@types/source-list-map": { - "version": "0.1.2", - "resolved": "https://registry.npmjs.org/@types/source-list-map/-/source-list-map-0.1.2.tgz", - "integrity": "sha512-K5K+yml8LTo9bWJI/rECfIPrGgxdpeNbj+d53lwN4QjW1MCwlkhUms+gtdzigTeUyBr09+u8BwOIY3MXvHdcsA==", - "dev": true + "@babel/traverse": { + "version": "7.15.4", + "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.15.4.tgz", + "integrity": "sha512-W6lQD8l4rUbQR/vYgSuCAE75ADyyQvOpFVsvPPdkhf6lATXAsQIG9YdtOcu8BB1dZ0LKu+Zo3c1wEcbKeuhdlA==", + "dev": true, + "requires": { + "@babel/code-frame": "^7.14.5", + "@babel/generator": "^7.15.4", + "@babel/helper-function-name": "^7.15.4", + "@babel/helper-hoist-variables": "^7.15.4", + "@babel/helper-split-export-declaration": "^7.15.4", + "@babel/parser": "^7.15.4", + "@babel/types": "^7.15.4", + "debug": "^4.1.0", + "globals": "^11.1.0" + } }, - "@types/source-map": { - "version": "0.5.2", - "resolved": "https://registry.npmjs.org/@types/source-map/-/source-map-0.5.2.tgz", - "integrity": "sha512-++w4WmMbk3dS3UeHGzAG+xJOSz5Xqtjys/TBkqG3qp3SeWE7Wwezqe5eB7B51cxUyh4PW7bwVotpsLdBK0D8cw==" + "@babel/types": { + "version": "7.15.6", + "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.15.6.tgz", + "integrity": "sha512-BPU+7QhqNjmWyDO0/vitH/CuhpV8ZmK1wpKva8nuyNF5MJfuRNWMc+hc14+u9xT93kvykMdncrJT19h74uB1Ig==", + "dev": true, + "requires": { + "@babel/helper-validator-identifier": "^7.14.9", + "to-fast-properties": "^2.0.0" + } }, - "@types/unist": { - "version": "2.0.5", - "resolved": "https://registry.npmjs.org/@types/unist/-/unist-2.0.5.tgz", - "integrity": "sha512-wnra4Vw9dopnuybR6HBywJ/URYpYrKLoepBTEtgfJup8Ahoi2zJECPP2cwiXp7btTvOT2CULv87aQRA4eZSP6g==", + "@csstools/convert-colors": { + "version": "1.4.0", + "resolved": "https://registry.npmjs.org/@csstools/convert-colors/-/convert-colors-1.4.0.tgz", + "integrity": "sha512-5a6wqoJV/xEdbRNKVo6I4hO3VjyDq//8q2f9I6PBAvMesJHFauXDorcNCsr9RzvsZnaWi5NYCcfyqP1QeFHFbw==", "dev": true }, - "@types/webpack-env": { - "version": "1.16.2", - "resolved": "https://registry.npmjs.org/@types/webpack-env/-/webpack-env-1.16.2.tgz", - "integrity": "sha512-vKx7WNQNZDyJveYcHAm9ZxhqSGLYwoyLhrHjLBOkw3a7cT76sTdjgtwyijhk1MaHyRIuSztcVwrUOO/NEu68Dw==", + "@discoveryjs/json-ext": { + "version": "0.5.5", + "resolved": "https://registry.npmjs.org/@discoveryjs/json-ext/-/json-ext-0.5.5.tgz", + "integrity": "sha512-6nFkfkmSeV/rqSaS4oWHgmpnYw194f6hmWF5is6b0J1naJZoiD0NTc9AiUwPHvWsowkjuHErCZT1wa0jg+BLIA==", "dev": true }, - "@types/webpack-sources": { - "version": "0.1.9", - "resolved": "https://registry.npmjs.org/@types/webpack-sources/-/webpack-sources-0.1.9.tgz", - "integrity": "sha512-bvzMnzqoK16PQIC8AYHNdW45eREJQMd6WG/msQWX5V2+vZmODCOPb4TJcbgRljTZZTwTM4wUMcsI8FftNA7new==", + "@eslint/eslintrc": { + "version": "0.4.3", + "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-0.4.3.tgz", + "integrity": "sha512-J6KFFz5QCYUJq3pf0mjEcCJVERbzv71PUIDczuh9JkwGEzced6CO5ADLHB1rbf/+oPBtoPfMYNOpGDzCANlbXw==", "dev": true, "requires": { - "@types/node": "*", - "@types/source-list-map": "*", - "source-map": "^0.6.1" + "ajv": "^6.12.4", + "debug": "^4.1.1", + "espree": "^7.3.0", + "globals": "^13.9.0", + "ignore": "^4.0.6", + "import-fresh": "^3.2.1", + "js-yaml": "^3.13.1", + "minimatch": "^3.0.4", + "strip-json-comments": "^3.1.1" }, "dependencies": { - "source-map": { - "version": "0.6.1", - "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", - "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", - "dev": true - } - } - }, - "@typescript-eslint/eslint-plugin": { - "version": "4.16.1", - "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-4.16.1.tgz", - "integrity": "sha512-SK777klBdlkUZpZLC1mPvyOWk9yAFCWmug13eAjVQ4/Q1LATE/NbcQL1xDHkptQkZOLnPmLUA1Y54m8dqYwnoQ==", - "dev": true, - "requires": { - "@typescript-eslint/experimental-utils": "4.16.1", - "@typescript-eslint/scope-manager": "4.16.1", - "debug": "^4.1.1", - "functional-red-black-tree": "^1.0.1", - "lodash": "^4.17.15", - "regexpp": "^3.0.0", - "semver": "^7.3.2", - "tsutils": "^3.17.1" - }, - "dependencies": { - "@typescript-eslint/experimental-utils": { - "version": "4.16.1", - "resolved": "https://registry.npmjs.org/@typescript-eslint/experimental-utils/-/experimental-utils-4.16.1.tgz", - "integrity": "sha512-0Hm3LSlMYFK17jO4iY3un1Ve9x1zLNn4EM50Lia+0EV99NdbK+cn0er7HC7IvBA23mBg3P+8dUkMXy4leL33UQ==", + "ajv": { + "version": "6.12.6", + "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz", + "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==", "dev": true, "requires": { - "@types/json-schema": "^7.0.3", - "@typescript-eslint/scope-manager": "4.16.1", - "@typescript-eslint/types": "4.16.1", - "@typescript-eslint/typescript-estree": "4.16.1", - "eslint-scope": "^5.0.0", - "eslint-utils": "^2.0.0" + "fast-deep-equal": "^3.1.1", + "fast-json-stable-stringify": "^2.0.0", + "json-schema-traverse": "^0.4.1", + "uri-js": "^4.2.2" } }, - "@typescript-eslint/scope-manager": { - "version": "4.16.1", - "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-4.16.1.tgz", - "integrity": "sha512-6IlZv9JaurqV0jkEg923cV49aAn8V6+1H1DRfhRcvZUrptQ+UtSKHb5kwTayzOYTJJ/RsYZdcvhOEKiBLyc0Cw==", + "globals": { + "version": "13.11.0", + "resolved": "https://registry.npmjs.org/globals/-/globals-13.11.0.tgz", + "integrity": "sha512-08/xrJ7wQjK9kkkRoI3OFUBbLx4f+6x3SGwcPvQ0QH6goFDrOU2oyAWrmh3dJezu65buo+HBMzAMQy6rovVC3g==", "dev": true, "requires": { - "@typescript-eslint/types": "4.16.1", - "@typescript-eslint/visitor-keys": "4.16.1" + "type-fest": "^0.20.2" } }, - "@typescript-eslint/types": { - "version": "4.16.1", - "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-4.16.1.tgz", - "integrity": "sha512-nnKqBwMgRlhzmJQF8tnFDZWfunXmJyuXj55xc8Kbfup4PbkzdoDXZvzN8//EiKR27J6vUSU8j4t37yUuYPiLqA==", + "ignore": { + "version": "4.0.6", + "resolved": "https://registry.npmjs.org/ignore/-/ignore-4.0.6.tgz", + "integrity": "sha512-cyFDKrqc/YdcWFniJhzI42+AzS+gNwmUzOSFcRCQYwySuBBBy/KjuxWLZ/FHEH6Moq1NizMOBWyTcv8O4OZIMg==", "dev": true }, - "@typescript-eslint/typescript-estree": { - "version": "4.16.1", - "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-4.16.1.tgz", - "integrity": "sha512-m8I/DKHa8YbeHt31T+UGd/l8Kwr0XCTCZL3H4HMvvLCT7HU9V7yYdinTOv1gf/zfqNeDcCgaFH2BMsS8x6NvJg==", - "dev": true, - "requires": { - "@typescript-eslint/types": "4.16.1", - "@typescript-eslint/visitor-keys": "4.16.1", - "debug": "^4.1.1", - "globby": "^11.0.1", - "is-glob": "^4.0.1", - "semver": "^7.3.2", - "tsutils": "^3.17.1" - } - }, - "@typescript-eslint/visitor-keys": { - "version": "4.16.1", - "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-4.16.1.tgz", - "integrity": "sha512-s/aIP1XcMkEqCNcPQtl60ogUYjSM8FU2mq1O7y5cFf3Xcob1z1iXWNB6cC43Op+NGRTFgGolri6s8z/efA9i1w==", - "dev": true, - "requires": { - "@typescript-eslint/types": "4.16.1", - "eslint-visitor-keys": "^2.0.0" - } + "json-schema-traverse": { + "version": "0.4.1", + "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz", + "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==", + "dev": true }, - "eslint-utils": { - "version": "2.1.0", - "resolved": "https://registry.npmjs.org/eslint-utils/-/eslint-utils-2.1.0.tgz", - "integrity": "sha512-w94dQYoauyvlDc43XnGB8lU3Zt713vNChgt4EWwhXAP2XkBvndfxF0AgIqKOOasjPIPzj9JqgwkwbCYD0/V3Zg==", - "dev": true, - "requires": { - "eslint-visitor-keys": "^1.1.0" - }, - "dependencies": { - "eslint-visitor-keys": { - "version": "1.3.0", - "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-1.3.0.tgz", - "integrity": "sha512-6J72N8UNa462wa/KFODt/PJ3IU60SDpC3QXC1Hjc1BXXpfL2C9R5+AU7jhe0F6GREqVMh4Juu+NY7xn+6dipUQ==", - "dev": true - } - } + "type-fest": { + "version": "0.20.2", + "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.20.2.tgz", + "integrity": "sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ==", + "dev": true } } }, - "@typescript-eslint/experimental-utils": { - "version": "4.28.2", - "resolved": "https://registry.npmjs.org/@typescript-eslint/experimental-utils/-/experimental-utils-4.28.2.tgz", - "integrity": "sha512-MwHPsL6qo98RC55IoWWP8/opTykjTp4JzfPu1VfO2Z0MshNP0UZ1GEV5rYSSnZSUI8VD7iHvtIPVGW5Nfh7klQ==", - "dev": true, - "requires": { - "@types/json-schema": "^7.0.7", - "@typescript-eslint/scope-manager": "4.28.2", - "@typescript-eslint/types": "4.28.2", - "@typescript-eslint/typescript-estree": "4.28.2", - "eslint-scope": "^5.1.1", - "eslint-utils": "^3.0.0" - } + "@gar/promisify": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/@gar/promisify/-/promisify-1.1.2.tgz", + "integrity": "sha512-82cpyJyKRoQoRi+14ibCeGPu0CwypgtBAdBhq1WfvagpCZNKqwXbKwXllYSMG91DhmG4jt9gN8eP6lGOtozuaw==", + "dev": true }, - "@typescript-eslint/parser": { - "version": "4.16.1", - "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-4.16.1.tgz", - "integrity": "sha512-/c0LEZcDL5y8RyI1zLcmZMvJrsR6SM1uetskFkoh3dvqDKVXPsXI+wFB/CbVw7WkEyyTKobC1mUNp/5y6gRvXg==", + "@gulp-sourcemaps/identity-map": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/@gulp-sourcemaps/identity-map/-/identity-map-1.0.2.tgz", + "integrity": "sha512-ciiioYMLdo16ShmfHBXJBOFm3xPC4AuwO4xeRpFeHz7WK9PYsWCmigagG2XyzZpubK4a3qNKoUBDhbzHfa50LQ==", "dev": true, "requires": { - "@typescript-eslint/scope-manager": "4.16.1", - "@typescript-eslint/types": "4.16.1", - "@typescript-eslint/typescript-estree": "4.16.1", - "debug": "^4.1.1" + "acorn": "^5.0.3", + "css": "^2.2.1", + "normalize-path": "^2.1.1", + "source-map": "^0.6.0", + "through2": "^2.0.3" }, "dependencies": { - "@typescript-eslint/scope-manager": { - "version": "4.16.1", - "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-4.16.1.tgz", - "integrity": "sha512-6IlZv9JaurqV0jkEg923cV49aAn8V6+1H1DRfhRcvZUrptQ+UtSKHb5kwTayzOYTJJ/RsYZdcvhOEKiBLyc0Cw==", + "acorn": { + "version": "5.7.4", + "resolved": "https://registry.npmjs.org/acorn/-/acorn-5.7.4.tgz", + "integrity": "sha512-1D++VG7BhrtvQpNbBzovKNc1FLGGEE/oGe7b9xJm/RFHMBeUaUGpluV9RLjZa47YFdPcDAenEYuq9pQPcMdLJg==", + "dev": true + }, + "css": { + "version": "2.2.4", + "resolved": "https://registry.npmjs.org/css/-/css-2.2.4.tgz", + "integrity": "sha512-oUnjmWpy0niI3x/mPL8dVEI1l7MnG3+HHyRPHf+YFSbK+svOhXpmSOcDURUh2aOCgl2grzrOPt1nHLuCVFULLw==", "dev": true, "requires": { - "@typescript-eslint/types": "4.16.1", - "@typescript-eslint/visitor-keys": "4.16.1" + "inherits": "^2.0.3", + "source-map": "^0.6.1", + "source-map-resolve": "^0.5.2", + "urix": "^0.1.0" } }, - "@typescript-eslint/types": { - "version": "4.16.1", - "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-4.16.1.tgz", - "integrity": "sha512-nnKqBwMgRlhzmJQF8tnFDZWfunXmJyuXj55xc8Kbfup4PbkzdoDXZvzN8//EiKR27J6vUSU8j4t37yUuYPiLqA==", - "dev": true - }, - "@typescript-eslint/typescript-estree": { - "version": "4.16.1", - "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-4.16.1.tgz", - "integrity": "sha512-m8I/DKHa8YbeHt31T+UGd/l8Kwr0XCTCZL3H4HMvvLCT7HU9V7yYdinTOv1gf/zfqNeDcCgaFH2BMsS8x6NvJg==", + "normalize-path": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-2.1.1.tgz", + "integrity": "sha1-GrKLVW4Zg2Oowab35vogE3/mrtk=", "dev": true, "requires": { - "@typescript-eslint/types": "4.16.1", - "@typescript-eslint/visitor-keys": "4.16.1", - "debug": "^4.1.1", - "globby": "^11.0.1", - "is-glob": "^4.0.1", - "semver": "^7.3.2", - "tsutils": "^3.17.1" + "remove-trailing-separator": "^1.0.1" } }, - "@typescript-eslint/visitor-keys": { - "version": "4.16.1", - "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-4.16.1.tgz", - "integrity": "sha512-s/aIP1XcMkEqCNcPQtl60ogUYjSM8FU2mq1O7y5cFf3Xcob1z1iXWNB6cC43Op+NGRTFgGolri6s8z/efA9i1w==", + "source-map": { + "version": "0.6.1", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", + "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", + "dev": true + }, + "source-map-resolve": { + "version": "0.5.3", + "resolved": "https://registry.npmjs.org/source-map-resolve/-/source-map-resolve-0.5.3.tgz", + "integrity": "sha512-Htz+RnsXWk5+P2slx5Jh3Q66vhQj1Cllm0zvnaY98+NFx+Dv2CF/f5O/t8x+KaNdrdIAsruNzoh/KpialbqAnw==", "dev": true, "requires": { - "@typescript-eslint/types": "4.16.1", - "eslint-visitor-keys": "^2.0.0" + "atob": "^2.1.2", + "decode-uri-component": "^0.2.0", + "resolve-url": "^0.2.1", + "source-map-url": "^0.4.0", + "urix": "^0.1.0" } } } }, - "@typescript-eslint/scope-manager": { - "version": "4.28.2", - "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-4.28.2.tgz", - "integrity": "sha512-MqbypNjIkJFEFuOwPWNDjq0nqXAKZvDNNs9yNseoGBB1wYfz1G0WHC2AVOy4XD7di3KCcW3+nhZyN6zruqmp2A==", + "@gulp-sourcemaps/map-sources": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/@gulp-sourcemaps/map-sources/-/map-sources-1.0.0.tgz", + "integrity": "sha1-iQrnxdjId/bThIYCFazp1+yUW9o=", "dev": true, "requires": { - "@typescript-eslint/types": "4.28.2", - "@typescript-eslint/visitor-keys": "4.28.2" + "normalize-path": "^2.0.1", + "through2": "^2.0.3" + }, + "dependencies": { + "normalize-path": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-2.1.1.tgz", + "integrity": "sha1-GrKLVW4Zg2Oowab35vogE3/mrtk=", + "dev": true, + "requires": { + "remove-trailing-separator": "^1.0.1" + } + } } }, - "@typescript-eslint/types": { - "version": "4.28.2", - "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-4.28.2.tgz", - "integrity": "sha512-Gr15fuQVd93uD9zzxbApz3wf7ua3yk4ZujABZlZhaxxKY8ojo448u7XTm/+ETpy0V0dlMtj6t4VdDvdc0JmUhA==", - "dev": true - }, - "@typescript-eslint/typescript-estree": { - "version": "4.28.2", - "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-4.28.2.tgz", - "integrity": "sha512-86lLstLvK6QjNZjMoYUBMMsULFw0hPHJlk1fzhAVoNjDBuPVxiwvGuPQq3fsBMCxuDJwmX87tM/AXoadhHRljg==", + "@humanwhocodes/config-array": { + "version": "0.5.0", + "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.5.0.tgz", + "integrity": "sha512-FagtKFz74XrTl7y6HCzQpwDfXP0yhxe9lHLD1UZxjvZIcbyRz8zTFF/yYNfSfzU414eDwZ1SrO0Qvtyf+wFMQg==", "dev": true, "requires": { - "@typescript-eslint/types": "4.28.2", - "@typescript-eslint/visitor-keys": "4.28.2", - "debug": "^4.3.1", - "globby": "^11.0.3", - "is-glob": "^4.0.1", - "semver": "^7.3.5", - "tsutils": "^3.21.0" + "@humanwhocodes/object-schema": "^1.2.0", + "debug": "^4.1.1", + "minimatch": "^3.0.4" } }, - "@typescript-eslint/visitor-keys": { - "version": "4.28.2", - "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-4.28.2.tgz", - "integrity": "sha512-aT2B4PLyyRDUVUafXzpZFoc0C9t0za4BJAKP5sgWIhG+jHECQZUEjuQSCIwZdiJJ4w4cgu5r3Kh20SOdtEBl0w==", - "dev": true, - "requires": { - "@typescript-eslint/types": "4.28.2", - "eslint-visitor-keys": "^2.0.0" - } + "@humanwhocodes/object-schema": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/@humanwhocodes/object-schema/-/object-schema-1.2.0.tgz", + "integrity": "sha512-wdppn25U8z/2yiaT6YGquE6X8sSv7hNMWSXYSSU1jGv/yd6XqjXgTDJ8KP4NgjTXfJ3GbRjeeb8RTV7a/VpM+w==", + "dev": true }, - "@webassemblyjs/ast": { - "version": "1.11.1", - "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.11.1.tgz", - "integrity": "sha512-ukBh14qFLjxTQNTXocdyksN5QdM28S1CxHt2rdskFyL+xFV7VremuBLVbmCePj+URalXBENx/9Lm7lnhihtCSw==", + "@igniteui/material-icons-extended": { + "version": "2.10.0", + "resolved": "https://registry.npmjs.org/@igniteui/material-icons-extended/-/material-icons-extended-2.10.0.tgz", + "integrity": "sha512-5Dt92tTlu/OaA4Iun7w3pHsuGFi9wClEvUYeD2FbvO0732Kk1RdJ2sLk4hbWzwOXH398H5GdzIwf1WQqB4mWMA==" + }, + "@istanbuljs/load-nyc-config": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/@istanbuljs/load-nyc-config/-/load-nyc-config-1.1.0.tgz", + "integrity": "sha512-VjeHSlIzpv/NyD3N0YuHfXOPDIixcA1q2ZV98wsMqcYlPmv2n3Yb2lYP9XMElnaFVXg5A7YLTeLu6V84uQDjmQ==", "dev": true, "requires": { - "@webassemblyjs/helper-numbers": "1.11.1", - "@webassemblyjs/helper-wasm-bytecode": "1.11.1" - } + "camelcase": "^5.3.1", + "find-up": "^4.1.0", + "get-package-type": "^0.1.0", + "js-yaml": "^3.13.1", + "resolve-from": "^5.0.0" + }, + "dependencies": { + "resolve-from": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-5.0.0.tgz", + "integrity": "sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw==", + "dev": true + } + } }, - "@webassemblyjs/floating-point-hex-parser": { - "version": "1.11.1", - "resolved": "https://registry.npmjs.org/@webassemblyjs/floating-point-hex-parser/-/floating-point-hex-parser-1.11.1.tgz", - "integrity": "sha512-iGRfyc5Bq+NnNuX8b5hwBrRjzf0ocrJPI6GWFodBFzmFnyvrQ83SHKhmilCU/8Jv67i4GJZBMhEzltxzcNagtQ==", + "@istanbuljs/schema": { + "version": "0.1.3", + "resolved": "https://registry.npmjs.org/@istanbuljs/schema/-/schema-0.1.3.tgz", + "integrity": "sha512-ZXRY4jNvVgSVQ8DL3LTcakaAtXwTVUxE81hslsyD2AtoXW/wVob10HkOJ1X/pAlcI7D+2YoZKg5do8G/w6RYgA==", "dev": true }, - "@webassemblyjs/helper-api-error": { - "version": "1.11.1", - "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-api-error/-/helper-api-error-1.11.1.tgz", - "integrity": "sha512-RlhS8CBCXfRUR/cwo2ho9bkheSXG0+NwooXcc3PAILALf2QLdFyj7KGsKRbVc95hZnhnERon4kW/D3SZpp6Tcg==", + "@jridgewell/resolve-uri": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-1.0.0.tgz", + "integrity": "sha512-9oLAnygRMi8Q5QkYEU4XWK04B+nuoXoxjRvRxgjuChkLZFBja0YPSgdZ7dZtwhncLBcQe/I/E+fLuk5qxcYVJA==", "dev": true }, - "@webassemblyjs/helper-buffer": { - "version": "1.11.1", - "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-buffer/-/helper-buffer-1.11.1.tgz", - "integrity": "sha512-gwikF65aDNeeXa8JxXa2BAk+REjSyhrNC9ZwdT0f8jc4dQQeDQ7G4m0f2QCLPJiMTTO6wfDmRmj/pW0PsUvIcA==", + "@ngtools/webpack": { + "version": "13.0.1", + "resolved": "https://registry.npmjs.org/@ngtools/webpack/-/webpack-13.0.1.tgz", + "integrity": "sha512-ZWsuwgwNZp0cmlvGNcWChltbY8BxfwifscLteSXIC2x7RvPaXhdUhmzvRDeQJa1KUmXd/xUuHZqgiAQsWRT7IA==", "dev": true }, - "@webassemblyjs/helper-numbers": { - "version": "1.11.1", - "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-numbers/-/helper-numbers-1.11.1.tgz", - "integrity": "sha512-vDkbxiB8zfnPdNK9Rajcey5C0w+QJugEglN0of+kmO8l7lDb77AnlKYQF7aarZuCrv+l0UvqL+68gSDr3k9LPQ==", + "@nodelib/fs.scandir": { + "version": "2.1.5", + "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz", + "integrity": "sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==", "dev": true, "requires": { - "@webassemblyjs/floating-point-hex-parser": "1.11.1", - "@webassemblyjs/helper-api-error": "1.11.1", - "@xtuc/long": "4.2.2" + "@nodelib/fs.stat": "2.0.5", + "run-parallel": "^1.1.9" } }, - "@webassemblyjs/helper-wasm-bytecode": { - "version": "1.11.1", - "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-wasm-bytecode/-/helper-wasm-bytecode-1.11.1.tgz", - "integrity": "sha512-PvpoOGiJwXeTrSf/qfudJhwlvDQxFgelbMqtq52WWiXC6Xgg1IREdngmPN3bs4RoO83PnL/nFrxucXj1+BX62Q==", + "@nodelib/fs.stat": { + "version": "2.0.5", + "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz", + "integrity": "sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==", "dev": true }, - "@webassemblyjs/helper-wasm-section": { - "version": "1.11.1", - "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-wasm-section/-/helper-wasm-section-1.11.1.tgz", - "integrity": "sha512-10P9No29rYX1j7F3EVPX3JvGPQPae+AomuSTPiF9eBQeChHI6iqjMIwR9JmOJXwpnn/oVGDk7I5IlskuMwU/pg==", + "@nodelib/fs.walk": { + "version": "1.2.8", + "resolved": "https://registry.npmjs.org/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz", + "integrity": "sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==", "dev": true, "requires": { - "@webassemblyjs/ast": "1.11.1", - "@webassemblyjs/helper-buffer": "1.11.1", - "@webassemblyjs/helper-wasm-bytecode": "1.11.1", - "@webassemblyjs/wasm-gen": "1.11.1" + "@nodelib/fs.scandir": "2.1.5", + "fastq": "^1.6.0" } }, - "@webassemblyjs/ieee754": { - "version": "1.11.1", - "resolved": "https://registry.npmjs.org/@webassemblyjs/ieee754/-/ieee754-1.11.1.tgz", - "integrity": "sha512-hJ87QIPtAMKbFq6CGTkZYJivEwZDbQUgYd3qKSadTNOhVY7p+gfP6Sr0lLRVTaG1JjFj+r3YchoqRYxNH3M0GQ==", + "@npmcli/fs": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/@npmcli/fs/-/fs-1.0.0.tgz", + "integrity": "sha512-8ltnOpRR/oJbOp8vaGUnipOi3bqkcW+sLHFlyXIr08OGHmVJLB1Hn7QtGXbYcpVtH1gAYZTlmDXtE4YV0+AMMQ==", "dev": true, "requires": { - "@xtuc/ieee754": "^1.2.0" + "@gar/promisify": "^1.0.1", + "semver": "^7.3.5" } }, - "@webassemblyjs/leb128": { - "version": "1.11.1", - "resolved": "https://registry.npmjs.org/@webassemblyjs/leb128/-/leb128-1.11.1.tgz", - "integrity": "sha512-BJ2P0hNZ0u+Th1YZXJpzW6miwqQUGcIHT1G/sf72gLVD9DZ5AdYTqPNbHZh6K1M5VmKvFXwGSWZADz+qBWxeRw==", + "@npmcli/git": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/@npmcli/git/-/git-2.1.0.tgz", + "integrity": "sha512-/hBFX/QG1b+N7PZBFs0bi+evgRZcK9nWBxQKZkGoXUT5hJSwl5c4d7y8/hm+NQZRPhQ67RzFaj5UM9YeyKoryw==", "dev": true, "requires": { - "@xtuc/long": "4.2.2" + "@npmcli/promise-spawn": "^1.3.2", + "lru-cache": "^6.0.0", + "mkdirp": "^1.0.4", + "npm-pick-manifest": "^6.1.1", + "promise-inflight": "^1.0.1", + "promise-retry": "^2.0.1", + "semver": "^7.3.5", + "which": "^2.0.2" + }, + "dependencies": { + "mkdirp": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-1.0.4.tgz", + "integrity": "sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==", + "dev": true + }, + "which": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz", + "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==", + "dev": true, + "requires": { + "isexe": "^2.0.0" + } + } } }, - "@webassemblyjs/utf8": { - "version": "1.11.1", - "resolved": "https://registry.npmjs.org/@webassemblyjs/utf8/-/utf8-1.11.1.tgz", - "integrity": "sha512-9kqcxAEdMhiwQkHpkNiorZzqpGrodQQ2IGrHHxCy+Ozng0ofyMA0lTqiLkVs1uzTRejX+/O0EOT7KxqVPuXosQ==", - "dev": true - }, - "@webassemblyjs/wasm-edit": { - "version": "1.11.1", - "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-edit/-/wasm-edit-1.11.1.tgz", - "integrity": "sha512-g+RsupUC1aTHfR8CDgnsVRVZFJqdkFHpsHMfJuWQzWU3tvnLC07UqHICfP+4XyL2tnr1amvl1Sdp06TnYCmVkA==", + "@npmcli/installed-package-contents": { + "version": "1.0.7", + "resolved": "https://registry.npmjs.org/@npmcli/installed-package-contents/-/installed-package-contents-1.0.7.tgz", + "integrity": "sha512-9rufe0wnJusCQoLpV9ZPKIVP55itrM5BxOXs10DmdbRfgWtHy1LDyskbwRnBghuB0PrF7pNPOqREVtpz4HqzKw==", "dev": true, "requires": { - "@webassemblyjs/ast": "1.11.1", - "@webassemblyjs/helper-buffer": "1.11.1", - "@webassemblyjs/helper-wasm-bytecode": "1.11.1", - "@webassemblyjs/helper-wasm-section": "1.11.1", - "@webassemblyjs/wasm-gen": "1.11.1", - "@webassemblyjs/wasm-opt": "1.11.1", - "@webassemblyjs/wasm-parser": "1.11.1", - "@webassemblyjs/wast-printer": "1.11.1" + "npm-bundled": "^1.1.1", + "npm-normalize-package-bin": "^1.0.1" } }, - "@webassemblyjs/wasm-gen": { - "version": "1.11.1", - "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-gen/-/wasm-gen-1.11.1.tgz", - "integrity": "sha512-F7QqKXwwNlMmsulj6+O7r4mmtAlCWfO/0HdgOxSklZfQcDu0TpLiD1mRt/zF25Bk59FIjEuGAIyn5ei4yMfLhA==", + "@npmcli/move-file": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/@npmcli/move-file/-/move-file-1.1.2.tgz", + "integrity": "sha512-1SUf/Cg2GzGDyaf15aR9St9TWlb+XvbZXWpDx8YKs7MLzMH/BCeopv+y9vzrzgkfykCGuWOlSu3mZhj2+FQcrg==", "dev": true, "requires": { - "@webassemblyjs/ast": "1.11.1", - "@webassemblyjs/helper-wasm-bytecode": "1.11.1", - "@webassemblyjs/ieee754": "1.11.1", - "@webassemblyjs/leb128": "1.11.1", - "@webassemblyjs/utf8": "1.11.1" + "mkdirp": "^1.0.4", + "rimraf": "^3.0.2" + }, + "dependencies": { + "mkdirp": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-1.0.4.tgz", + "integrity": "sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==", + "dev": true + } } }, - "@webassemblyjs/wasm-opt": { - "version": "1.11.1", - "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-opt/-/wasm-opt-1.11.1.tgz", - "integrity": "sha512-VqnkNqnZlU5EB64pp1l7hdm3hmQw7Vgqa0KF/KCNO9sIpI6Fk6brDEiX+iCOYrvMuBWDws0NkTOxYEb85XQHHw==", + "@npmcli/node-gyp": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/@npmcli/node-gyp/-/node-gyp-1.0.3.tgz", + "integrity": "sha512-fnkhw+fmX65kiLqk6E3BFLXNC26rUhK90zVwe2yncPliVT/Qos3xjhTLE59Df8KnPlcwIERXKVlU1bXoUQ+liA==", + "dev": true + }, + "@npmcli/promise-spawn": { + "version": "1.3.2", + "resolved": "https://registry.npmjs.org/@npmcli/promise-spawn/-/promise-spawn-1.3.2.tgz", + "integrity": "sha512-QyAGYo/Fbj4MXeGdJcFzZ+FkDkomfRBrPM+9QYJSg+PxgAUL+LU3FneQk37rKR2/zjqkCV1BLHccX98wRXG3Sg==", "dev": true, "requires": { - "@webassemblyjs/ast": "1.11.1", - "@webassemblyjs/helper-buffer": "1.11.1", - "@webassemblyjs/wasm-gen": "1.11.1", - "@webassemblyjs/wasm-parser": "1.11.1" + "infer-owner": "^1.0.4" } }, - "@webassemblyjs/wasm-parser": { - "version": "1.11.1", - "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-parser/-/wasm-parser-1.11.1.tgz", - "integrity": "sha512-rrBujw+dJu32gYB7/Lup6UhdkPx9S9SnobZzRVL7VcBH9Bt9bCBLEuX/YXOOtBsOZ4NQrRykKhffRWHvigQvOA==", + "@npmcli/run-script": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/@npmcli/run-script/-/run-script-2.0.0.tgz", + "integrity": "sha512-fSan/Pu11xS/TdaTpTB0MRn9guwGU8dye+x56mEVgBEd/QsybBbYcAL0phPXi8SGWFEChkQd6M9qL4y6VOpFig==", "dev": true, "requires": { - "@webassemblyjs/ast": "1.11.1", - "@webassemblyjs/helper-api-error": "1.11.1", - "@webassemblyjs/helper-wasm-bytecode": "1.11.1", - "@webassemblyjs/ieee754": "1.11.1", - "@webassemblyjs/leb128": "1.11.1", - "@webassemblyjs/utf8": "1.11.1" + "@npmcli/node-gyp": "^1.0.2", + "@npmcli/promise-spawn": "^1.3.2", + "node-gyp": "^8.2.0", + "read-package-json-fast": "^2.0.1" } }, - "@webassemblyjs/wast-printer": { - "version": "1.11.1", - "resolved": "https://registry.npmjs.org/@webassemblyjs/wast-printer/-/wast-printer-1.11.1.tgz", - "integrity": "sha512-IQboUWM4eKzWW+N/jij2sRatKMh99QEelo3Eb2q0qXkvPRISAj8Qxtmw5itwqK+TTkBuUIE45AxYPToqPtL5gg==", + "@nrwl/devkit": { + "version": "12.6.0", + "resolved": "https://registry.npmjs.org/@nrwl/devkit/-/devkit-12.6.0.tgz", + "integrity": "sha512-tvw/4n2JD/38UuzdxFCoj1+x02BAKK4EvtLhwUK5XSBF0wDYFBp5rHfxvUD9ZcoiRRrZA4QGFjhDljrfj95F2A==", "dev": true, "requires": { - "@webassemblyjs/ast": "1.11.1", - "@xtuc/long": "4.2.2" + "@nrwl/tao": "12.6.0", + "ejs": "^3.1.5", + "ignore": "^5.0.4", + "rxjs": "^6.5.4", + "semver": "7.3.4", + "tslib": "^2.0.0" + }, + "dependencies": { + "semver": { + "version": "7.3.4", + "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.4.tgz", + "integrity": "sha512-tCfb2WLjqFAtXn4KEdxIhalnRtoKFN7nAwj0B3ZXCbQloV2tq5eDbcTmT68JJD3nRJq24/XgxtQKFIpQdtvmVw==", + "dev": true, + "requires": { + "lru-cache": "^6.0.0" + } + } } }, - "@xtuc/ieee754": { - "version": "1.2.0", - "resolved": "https://registry.npmjs.org/@xtuc/ieee754/-/ieee754-1.2.0.tgz", - "integrity": "sha512-DX8nKgqcGwsc0eJSqYt5lwP4DH5FlHnmuWWBRy7X0NcaGR0ZtuyeESgMwTYVEtxmsNGY+qit4QYT/MIYTOTPeA==", - "dev": true - }, - "@xtuc/long": { - "version": "4.2.2", - "resolved": "https://registry.npmjs.org/@xtuc/long/-/long-4.2.2.tgz", - "integrity": "sha512-NuHqBY1PB/D8xU6s/thBgOAiAP7HOYDQ32+BFZILJ8ivkUkAHQnWfn6WhL79Owj1qmUnoN/YPhktdIoucipkAQ==", - "dev": true - }, - "@yarnpkg/lockfile": { - "version": "1.1.0", - "resolved": "https://registry.npmjs.org/@yarnpkg/lockfile/-/lockfile-1.1.0.tgz", - "integrity": "sha512-GpSwvyXOcOOlV70vbnzjj4fW5xW/FdUF6nQEt1ENy7m4ZCczi1+/buVUPAqmGfqznsORNFzUMjctTIp8a9tuCQ==", - "dev": true - }, - "a-sync-waterfall": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/a-sync-waterfall/-/a-sync-waterfall-1.0.1.tgz", - "integrity": "sha512-RYTOHHdWipFUliRFMCS4X2Yn2X8M87V/OpSqWzKKOGhzqyUxzyVmhHDH9sAvG+ZuQf/TAOFsLCpMw09I1ufUnA==", - "dev": true - }, - "abab": { - "version": "2.0.5", - "resolved": "https://registry.npmjs.org/abab/-/abab-2.0.5.tgz", - "integrity": "sha512-9IK9EadsbHo6jLWIpxpR6pL0sazTXV6+SQv25ZB+F7Bj9mJNaOc4nCRabwd5M/JwmUa8idz6Eci6eKfJryPs6Q==", - "dev": true - }, - "abbrev": { - "version": "1.0.9", - "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-1.0.9.tgz", - "integrity": "sha1-kbR5JYinc4wl813W9jdSovh3YTU=" - }, - "accepts": { - "version": "1.3.7", - "resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.7.tgz", - "integrity": "sha512-Il80Qs2WjYlJIBNzNkK6KYqlVMTbZLXgHx2oT0pU/fjRHyEp+PEfEPY0R3WCwAGVOtauxh1hOxNgIf5bv7dQpA==", + "@nrwl/tao": { + "version": "12.6.0", + "resolved": "https://registry.npmjs.org/@nrwl/tao/-/tao-12.6.0.tgz", + "integrity": "sha512-h6X+mqmTlZjA9nqlyPAu9TFNORHAMcC1BD8H8kA8lTHN1nktLHQ266qpHVLsxcqww2EYsVqQaKaOpUacck49+w==", "dev": true, "requires": { - "mime-types": "~2.1.24", - "negotiator": "0.6.2" - } - }, - "acorn": { - "version": "8.4.1", - "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.4.1.tgz", - "integrity": "sha512-asabaBSkEKosYKMITunzX177CXxQ4Q8BSSzMTKD+FefUhipQC70gfW5SiUDhYQ3vk8G+81HqQk7Fv9OXwwn9KA==", - "dev": true - }, - "acorn-jsx": { - "version": "5.3.2", - "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.2.tgz", - "integrity": "sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==", - "dev": true - }, - "adjust-sourcemap-loader": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/adjust-sourcemap-loader/-/adjust-sourcemap-loader-4.0.0.tgz", - "integrity": "sha512-OXwN5b9pCUXNQHJpwwD2qP40byEmSgzj8B4ydSN0uMNYWiFmJ6x6KwUllMmfk8Rwu/HJDFR7U8ubsWBoN0Xp0A==", - "dev": true, - "requires": { - "loader-utils": "^2.0.0", - "regex-parser": "^2.2.11" - } - }, - "adm-zip": { - "version": "0.4.16", - "resolved": "https://registry.npmjs.org/adm-zip/-/adm-zip-0.4.16.tgz", - "integrity": "sha512-TFi4HBKSGfIKsK5YCkKaaFG2m4PEDyViZmEwof3MTIgzimHLto6muaHVpbrljdIvIrFZzEq/p4nafOeLcYegrg==", - "dev": true - }, - "after": { - "version": "0.8.2", - "resolved": "https://registry.npmjs.org/after/-/after-0.8.2.tgz", - "integrity": "sha1-/ts5T58OAqqXaOcCvaI7UF+ufh8=", - "dev": true - }, - "agent-base": { - "version": "6.0.2", - "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-6.0.2.tgz", - "integrity": "sha512-RZNwNclF7+MS/8bDg70amg32dyeZGZxiDuQmZxKLAlQjr3jGyLx+4Kkk58UO7D2QdgFIQCovuSuZESne6RG6XQ==", - "dev": true, - "requires": { - "debug": "4" - } - }, - "agentkeepalive": { - "version": "4.1.4", - "resolved": "https://registry.npmjs.org/agentkeepalive/-/agentkeepalive-4.1.4.tgz", - "integrity": "sha512-+V/rGa3EuU74H6wR04plBb7Ks10FbtUQgRj/FQOG7uUIEuaINI+AiqJR1k6t3SVNs7o7ZjIdus6706qqzVq8jQ==", - "dev": true, - "requires": { - "debug": "^4.1.0", - "depd": "^1.1.2", - "humanize-ms": "^1.2.1" - } - }, - "aggregate-error": { - "version": "3.1.0", - "resolved": "https://registry.npmjs.org/aggregate-error/-/aggregate-error-3.1.0.tgz", - "integrity": "sha512-4I7Td01quW/RpocfNayFdFVk1qSuoh0E7JrbRJ16nH01HhKFQ88INq9Sd+nd72zqRySlr9BmDA8xlEJ6vJMrYA==", - "dev": true, - "requires": { - "clean-stack": "^2.0.0", - "indent-string": "^4.0.0" - } - }, - "ajv": { - "version": "8.6.0", - "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.6.0.tgz", - "integrity": "sha512-cnUG4NSBiM4YFBxgZIj/In3/6KX+rQ2l2YPRVcvAMQGWEPKuXoPIhxzwqh31jA3IPbI4qEOp/5ILI4ynioXsGQ==", - "dev": true, - "requires": { - "fast-deep-equal": "^3.1.1", - "json-schema-traverse": "^1.0.0", - "require-from-string": "^2.0.2", - "uri-js": "^4.2.2" - } - }, - "ajv-errors": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/ajv-errors/-/ajv-errors-1.0.1.tgz", - "integrity": "sha512-DCRfO/4nQ+89p/RK43i8Ezd41EqdGIU4ld7nGF8OQ14oc/we5rEntLCUa7+jrn3nn83BosfwZA0wb4pon2o8iQ==", - "dev": true - }, - "ajv-formats": { - "version": "2.1.0", - "resolved": "https://registry.npmjs.org/ajv-formats/-/ajv-formats-2.1.0.tgz", - "integrity": "sha512-USH2jBb+C/hIpwD2iRjp0pe0k+MvzG0mlSn/FIdCgQhUb9ALPRjt2KIQdfZDS9r0ZIeUAg7gOu9KL0PFqGqr5Q==", - "dev": true, - "requires": { - "ajv": "^8.0.0" - } - }, - "ajv-keywords": { - "version": "3.5.2", - "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz", - "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==", - "dev": true - }, - "alphanum-sort": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/alphanum-sort/-/alphanum-sort-1.0.2.tgz", - "integrity": "sha1-l6ERlkmyEa0zaR2fn0hqjsn74KM=", - "dev": true - }, - "amdefine": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/amdefine/-/amdefine-1.0.1.tgz", - "integrity": "sha1-SlKCrBZHKek2Gbz9OtFR+BfOkfU=", - "optional": true - }, - "ansi-align": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/ansi-align/-/ansi-align-3.0.0.tgz", - "integrity": "sha512-ZpClVKqXN3RGBmKibdfWzqCY4lnjEuoNzU5T0oEFpfd/z5qJHVarukridD4juLO2FXMiwUQxr9WqQtaYa8XRYw==", - "dev": true, - "requires": { - "string-width": "^3.0.0" + "chalk": "4.1.0", + "enquirer": "~2.3.6", + "fs-extra": "^9.1.0", + "jsonc-parser": "3.0.0", + "rxjs": "^6.5.4", + "rxjs-for-await": "0.0.2", + "semver": "7.3.4", + "tmp": "~0.2.1", + "tslib": "^2.0.0", + "yargs-parser": "20.0.0" }, "dependencies": { - "ansi-regex": { + "ansi-styles": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz", + "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==", + "dev": true, + "requires": { + "color-convert": "^2.0.1" + } + }, + "chalk": { "version": "4.1.0", - "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-4.1.0.tgz", - "integrity": "sha512-1apePfXM1UOSqw0o9IiFAovVz9M5S1Dg+4TrDwfMewQ6p/rmMueb7tWZjQ1rx4Loy1ArBggoqGpfqqdI4rondg==", - "dev": true + "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.0.tgz", + "integrity": "sha512-qwx12AxXe2Q5xQ43Ac//I6v5aXTipYrSESdOgzrN+9XjgEpyjpKuvSGaN4qE93f7TQTlerQQ8S+EQ0EyDoVL1A==", + "dev": true, + "requires": { + "ansi-styles": "^4.1.0", + "supports-color": "^7.1.0" + } }, - "emoji-regex": { - "version": "7.0.3", - "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-7.0.3.tgz", - "integrity": "sha512-CwBLREIQ7LvYFB0WyRvwhq5N5qPhc6PMjD6bYggFlI5YyDgl+0vxq5VHbMOFqLg7hfWzmu8T5Z1QofhmTIhItA==", + "color-convert": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", + "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==", + "dev": true, + "requires": { + "color-name": "~1.1.4" + } + }, + "color-name": { + "version": "1.1.4", + "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz", + "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==", "dev": true }, - "is-fullwidth-code-point": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-2.0.0.tgz", - "integrity": "sha1-o7MKXE8ZkYMWeqq5O+764937ZU8=", + "has-flag": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz", + "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==", "dev": true }, - "string-width": { - "version": "3.1.0", - "resolved": "https://registry.npmjs.org/string-width/-/string-width-3.1.0.tgz", - "integrity": "sha512-vafcv6KjVZKSgz06oM/H6GDBrAtz8vdhQakGjFIvNrHA6y3HCF1CInLy+QLq8dTJPQ1b+KDUqDFctkdRW44e1w==", + "semver": { + "version": "7.3.4", + "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.4.tgz", + "integrity": "sha512-tCfb2WLjqFAtXn4KEdxIhalnRtoKFN7nAwj0B3ZXCbQloV2tq5eDbcTmT68JJD3nRJq24/XgxtQKFIpQdtvmVw==", "dev": true, "requires": { - "emoji-regex": "^7.0.1", - "is-fullwidth-code-point": "^2.0.0", - "strip-ansi": "^5.1.0" + "lru-cache": "^6.0.0" } }, - "strip-ansi": { - "version": "5.2.0", - "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-5.2.0.tgz", - "integrity": "sha512-DuRs1gKbBqsMKIZlrffwlug8MHkcnpjs5VPmL1PAh+mA30U0DTotfDZ0d2UUsXpPmPmMMJ6W773MaA3J+lbiWA==", + "supports-color": { + "version": "7.2.0", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz", + "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==", + "dev": true, + "requires": { + "has-flag": "^4.0.0" + } + }, + "tmp": { + "version": "0.2.1", + "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.2.1.tgz", + "integrity": "sha512-76SUhtfqR2Ijn+xllcI5P1oyannHNHByD80W1q447gU3mp9G9PSpGdWmjUOHRDPiHYacIk66W7ubDTuPF3BEtQ==", "dev": true, "requires": { - "ansi-regex": "^4.1.0" + "rimraf": "^3.0.0" } + }, + "yargs-parser": { + "version": "20.0.0", + "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-20.0.0.tgz", + "integrity": "sha512-8eblPHTL7ZWRkyjIZJjnGf+TijiKJSwA24svzLRVvtgoi/RZiKa9fFQTrlx0OKLnyHSdt/enrdadji6WFfESVA==", + "dev": true } } }, - "ansi-colors": { - "version": "4.1.1", - "resolved": "https://registry.npmjs.org/ansi-colors/-/ansi-colors-4.1.1.tgz", - "integrity": "sha512-JoX0apGbHaUJBNl6yF+p6JAFYZ666/hhCGKN5t9QFjbJQKUU/g8MNbFDbvfrgKXvI1QpZplPOnwIo99lX/AAmA==", - "dev": true - }, - "ansi-cyan": { - "version": "0.1.1", - "resolved": "https://registry.npmjs.org/ansi-cyan/-/ansi-cyan-0.1.1.tgz", - "integrity": "sha1-U4rlKK+JgvKK4w2G8vF0VtJgmHM=", + "@rollup/plugin-json": { + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/@rollup/plugin-json/-/plugin-json-4.1.0.tgz", + "integrity": "sha512-yfLbTdNS6amI/2OpmbiBoW12vngr5NW2jCJVZSBEz+H5KfUJZ2M7sDjk0U6GOOdCWFVScShte29o9NezJ53TPw==", "dev": true, "requires": { - "ansi-wrap": "0.1.0" + "@rollup/pluginutils": "^3.0.8" } }, - "ansi-escapes": { - "version": "4.3.2", - "resolved": "https://registry.npmjs.org/ansi-escapes/-/ansi-escapes-4.3.2.tgz", - "integrity": "sha512-gKXj5ALrKWQLsYG9jlTRmR/xKluxHV+Z9QEwNIgCfM1/uwPMCuzVVnh5mwTd+OuBZcwSIMbqssNWRm1lE51QaQ==", + "@rollup/plugin-node-resolve": { + "version": "13.0.6", + "resolved": "https://registry.npmjs.org/@rollup/plugin-node-resolve/-/plugin-node-resolve-13.0.6.tgz", + "integrity": "sha512-sFsPDMPd4gMqnh2gS0uIxELnoRUp5kBl5knxD2EO0778G1oOJv4G1vyT2cpWz75OU2jDVcXhjVUuTAczGyFNKA==", "dev": true, "requires": { - "type-fest": "^0.21.3" + "@rollup/pluginutils": "^3.1.0", + "@types/resolve": "1.17.1", + "builtin-modules": "^3.1.0", + "deepmerge": "^4.2.2", + "is-module": "^1.0.0", + "resolve": "^1.19.0" + }, + "dependencies": { + "resolve": { + "version": "1.20.0", + "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.20.0.tgz", + "integrity": "sha512-wENBPt4ySzg4ybFQW2TT1zMQucPK95HSh/nq2CFTZVOGut2+pQvSsgtda4d26YrYcr067wjbmzOG8byDPBX63A==", + "dev": true, + "requires": { + "is-core-module": "^2.2.0", + "path-parse": "^1.0.6" + } + } } }, - "ansi-gray": { - "version": "0.1.1", - "resolved": "https://registry.npmjs.org/ansi-gray/-/ansi-gray-0.1.1.tgz", - "integrity": "sha1-KWLPVOyXksSFEKPetSRDaGHvclE=", + "@rollup/pluginutils": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-3.1.0.tgz", + "integrity": "sha512-GksZ6pr6TpIjHm8h9lSQ8pi8BE9VeubNT0OMJ3B5uZJ8pz73NPiqOtCog/x2/QzM1ENChPKxMDhiQuRHsqc+lg==", "dev": true, "requires": { - "ansi-wrap": "0.1.0" + "@types/estree": "0.0.39", + "estree-walker": "^1.0.1", + "picomatch": "^2.2.2" + }, + "dependencies": { + "@types/estree": { + "version": "0.0.39", + "resolved": "https://registry.npmjs.org/@types/estree/-/estree-0.0.39.tgz", + "integrity": "sha512-EYNwp3bU+98cpU4lAWYYL7Zz+2gryWH1qbdDTidVd6hkiR6weksdbMadyXKXNPEkQFhXM+hVO9ZygomHXp+AIw==", + "dev": true + } } }, - "ansi-html": { - "version": "0.0.7", - "resolved": "https://registry.npmjs.org/ansi-html/-/ansi-html-0.0.7.tgz", - "integrity": "sha1-gTWEAhliqenm/QOflA0S9WynhZ4=", - "dev": true - }, - "ansi-red": { - "version": "0.1.1", - "resolved": "https://registry.npmjs.org/ansi-red/-/ansi-red-0.1.1.tgz", - "integrity": "sha1-jGOPnRCAgAo1PJwoyKgcpHBdlGw=", + "@schematics/angular": { + "version": "13.0.1", + "resolved": "https://registry.npmjs.org/@schematics/angular/-/angular-13.0.1.tgz", + "integrity": "sha512-Qs3vcpSmBpzIxyaihDP3rtc6ge13t8dhqq9vXzE0MCq+HRUptAPmsx7JOUiB0/3T33XGNC9ICKdpGD+6xNltgw==", "dev": true, "requires": { - "ansi-wrap": "0.1.0" + "@angular-devkit/core": "13.0.1", + "@angular-devkit/schematics": "13.0.1", + "jsonc-parser": "3.0.0" } }, - "ansi-regex": { - "version": "5.0.0", - "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.0.tgz", - "integrity": "sha512-bY6fj56OUQ0hU1KjFNDQuJFezqKdrAyFdIevADiqrWHwSlbmBNMHp5ak2f40Pm8JTFyM2mqxkG6ngkHO11f/lg==", + "@sindresorhus/is": { + "version": "0.7.0", + "resolved": "https://registry.npmjs.org/@sindresorhus/is/-/is-0.7.0.tgz", + "integrity": "sha512-ONhaKPIufzzrlNbqtWFFd+jlnemX6lJAgq9ZeiZtS7I1PIf/la7CW4m83rTXRnVnsMbW2k56pGYu7AUFJD9Pow==", "dev": true }, - "ansi-styles": { - "version": "3.2.1", - "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz", - "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==", + "@stylelint/postcss-css-in-js": { + "version": "0.37.2", + "resolved": "https://registry.npmjs.org/@stylelint/postcss-css-in-js/-/postcss-css-in-js-0.37.2.tgz", + "integrity": "sha512-nEhsFoJurt8oUmieT8qy4nk81WRHmJynmVwn/Vts08PL9fhgIsMhk1GId5yAN643OzqEEb5S/6At2TZW7pqPDA==", "dev": true, "requires": { - "color-convert": "^1.9.0" + "@babel/core": ">=7.9.0" } }, - "ansi-wrap": { - "version": "0.1.0", - "resolved": "https://registry.npmjs.org/ansi-wrap/-/ansi-wrap-0.1.0.tgz", - "integrity": "sha1-qCJQ3bABXponyoLoLqYDu/pF768=", - "dev": true - }, - "anymatch": { - "version": "3.1.2", - "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.2.tgz", - "integrity": "sha512-P43ePfOAIupkguHUycrc4qJ9kz8ZiuOUijaETwX7THt0Y/GNK7v0aa8rY816xWjZ7rJdA5XdMcpVFTKMq+RvWg==", + "@stylelint/postcss-markdown": { + "version": "0.36.2", + "resolved": "https://registry.npmjs.org/@stylelint/postcss-markdown/-/postcss-markdown-0.36.2.tgz", + "integrity": "sha512-2kGbqUVJUGE8dM+bMzXG/PYUWKkjLIkRLWNh39OaADkiabDRdw8ATFCgbMz5xdIcvwspPAluSL7uY+ZiTWdWmQ==", "dev": true, "requires": { - "normalize-path": "^3.0.0", - "picomatch": "^2.0.4" + "remark": "^13.0.0", + "unist-util-find-all-after": "^3.0.2" } }, - "ap": { - "version": "0.2.0", - "resolved": "https://registry.npmjs.org/ap/-/ap-0.2.0.tgz", - "integrity": "sha1-rglCYAspkS8NKxTsYMRejzMLYRA=", - "dev": true - }, - "app-root-path": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/app-root-path/-/app-root-path-3.0.0.tgz", - "integrity": "sha512-qMcx+Gy2UZynHjOHOIXPNvpf+9cjvk3cWrBBK7zg4gH9+clobJRb9NGzcT7mQTcV/6Gm/1WelUtqxVXnNlrwcw==", - "dev": true - }, - "append-buffer": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/append-buffer/-/append-buffer-1.0.2.tgz", - "integrity": "sha1-2CIM9GYIFSXv6lBhTz3mUU36WPE=", + "@szmarczak/http-timer": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/@szmarczak/http-timer/-/http-timer-1.1.2.tgz", + "integrity": "sha512-XIB2XbzHTN6ieIjfIMV9hlVcfPU26s2vafYWQcZHWXHOxiaRZYEDKEwdl129Zyg50+foYV2jCgtrqSA6qNuNSA==", "dev": true, "requires": { - "buffer-equal": "^1.0.0" + "defer-to-connect": "^1.0.1" } }, - "aproba": { - "version": "1.2.0", - "resolved": "https://registry.npmjs.org/aproba/-/aproba-1.2.0.tgz", - "integrity": "sha512-Y9J6ZjXtoYh8RnXVCMOU/ttDmk1aBjunq9vO0ta5x85WDQiQfUF9sIPBITdbiiIVcBo03Hi3jMxigBtsddlXRw==", + "@tootallnate/once": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/@tootallnate/once/-/once-1.1.2.tgz", + "integrity": "sha512-RbzJvlNzmRq5c3O09UipeuXno4tA1FE6ikOjxZK0tuxVv3412l64l5t1W5pj4+rJq9vpkm/kwiR07aZXnsKPxw==", "dev": true }, - "arch": { - "version": "2.2.0", - "resolved": "https://registry.npmjs.org/arch/-/arch-2.2.0.tgz", - "integrity": "sha512-Of/R0wqp83cgHozfIYLbBMnej79U/SVGOOyuB3VVFv1NRM/PSFMK12x9KVtiYzJqmnU5WR2qp0Z5rHb7sWGnFQ==", + "@types/component-emitter": { + "version": "1.2.11", + "resolved": "https://registry.npmjs.org/@types/component-emitter/-/component-emitter-1.2.11.tgz", + "integrity": "sha512-SRXjM+tfsSlA9VuG8hGO2nft2p8zjXCK1VcC6N4NXbBbYbSia9kzCChYQajIjzIqOOOuh5Ock6MmV2oux4jDZQ==", "dev": true }, - "archive-type": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/archive-type/-/archive-type-4.0.0.tgz", - "integrity": "sha1-+S5yIzBW38aWlHJ0nCZ72wRrHXA=", - "dev": true, - "requires": { - "file-type": "^4.2.0" - }, - "dependencies": { - "file-type": { - "version": "4.4.0", - "resolved": "https://registry.npmjs.org/file-type/-/file-type-4.4.0.tgz", - "integrity": "sha1-G2AOX8ofvcboDApwxxyNul95BsU=", - "dev": true - } - } + "@types/cookie": { + "version": "0.4.1", + "resolved": "https://registry.npmjs.org/@types/cookie/-/cookie-0.4.1.tgz", + "integrity": "sha512-XW/Aa8APYr6jSVVA1y/DEIZX0/GMKLEVekNG727R8cs56ahETkRAy/3DR7+fJyh7oUgGwNQaRfXCun0+KbWY7Q==", + "dev": true }, - "archy": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/archy/-/archy-1.0.0.tgz", - "integrity": "sha1-+cjBN1fMHde8N5rHeyxipcKGjEA=", + "@types/cors": { + "version": "2.8.12", + "resolved": "https://registry.npmjs.org/@types/cors/-/cors-2.8.12.tgz", + "integrity": "sha512-vt+kDhq/M2ayberEtJcIN/hxXy1Pk+59g2FV/ZQceeaTyCtCucjL2Q7FXlFjtWn4n15KCr1NE2lNNFhp0lEThw==", "dev": true }, - "are-we-there-yet": { - "version": "1.1.5", - "resolved": "https://registry.npmjs.org/are-we-there-yet/-/are-we-there-yet-1.1.5.tgz", - "integrity": "sha512-5hYdAkZlcG8tOLujVDTgCT+uPX0VnpAH28gWsLfzpXYm7wP6mp5Q/gYyR7YQ0cKVJcXJnl3j2kpBan13PtQf6w==", + "@types/eslint": { + "version": "7.28.2", + "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-7.28.2.tgz", + "integrity": "sha512-KubbADPkfoU75KgKeKLsFHXnU4ipH7wYg0TRT33NK3N3yiu7jlFAAoygIWBV+KbuHx/G+AvuGX6DllnK35gfJA==", "dev": true, "requires": { - "delegates": "^1.0.0", - "readable-stream": "^2.0.6" + "@types/estree": "*", + "@types/json-schema": "*" } }, - "argparse": { - "version": "1.0.10", - "resolved": "https://registry.npmjs.org/argparse/-/argparse-1.0.10.tgz", - "integrity": "sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==", + "@types/eslint-scope": { + "version": "3.7.1", + "resolved": "https://registry.npmjs.org/@types/eslint-scope/-/eslint-scope-3.7.1.tgz", + "integrity": "sha512-SCFeogqiptms4Fg29WpOTk5nHIzfpKCemSN63ksBQYKTcXoJEmJagV+DhVmbapZzY4/5YaOV1nZwrsU79fFm1g==", + "dev": true, "requires": { - "sprintf-js": "~1.0.2" + "@types/eslint": "*", + "@types/estree": "*" } }, - "aria-query": { - "version": "4.2.2", - "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-4.2.2.tgz", - "integrity": "sha512-o/HelwhuKpTj/frsOsbNLNgnNGVIFsVP/SW2BSF14gVl7kAfMOJ6/8wUAUvG1R1NHKrfG+2sHZTu0yauT1qBrA==", + "@types/estree": { + "version": "0.0.50", + "resolved": "https://registry.npmjs.org/@types/estree/-/estree-0.0.50.tgz", + "integrity": "sha512-C6N5s2ZFtuZRj54k2/zyRhNDjJwwcViAM3Nbm8zjBpbqAdZ00mr0CFxvSKeO8Y/e03WVFLpQMdHYVfUd6SB+Hw==", + "dev": true + }, + "@types/hammerjs": { + "version": "2.0.40", + "resolved": "https://registry.npmjs.org/@types/hammerjs/-/hammerjs-2.0.40.tgz", + "integrity": "sha512-VbjwR1fhsn2h2KXAY4oy1fm7dCxaKy0D+deTb8Ilc3Eo3rc5+5eA4rfYmZaHgNJKxVyI0f6WIXzO2zLkVmQPHA==" + }, + "@types/http-proxy": { + "version": "1.17.7", + "resolved": "https://registry.npmjs.org/@types/http-proxy/-/http-proxy-1.17.7.tgz", + "integrity": "sha512-9hdj6iXH64tHSLTY+Vt2eYOGzSogC+JQ2H7bdPWkuh7KXP5qLllWx++t+K9Wk556c3dkDdPws/SpMRi0sdCT1w==", "dev": true, "requires": { - "@babel/runtime": "^7.10.2", - "@babel/runtime-corejs3": "^7.10.2" + "@types/node": "*" } }, - "arr-diff": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/arr-diff/-/arr-diff-4.0.0.tgz", - "integrity": "sha1-1kYQdP6/7HHn4VI1dhoyml3HxSA=", + "@types/jasmine": { + "version": "3.10.2", + "resolved": "https://registry.npmjs.org/@types/jasmine/-/jasmine-3.10.2.tgz", + "integrity": "sha512-qs4xjVm4V/XjM6owGm/x6TNmhGl5iKX8dkTdsgdgl9oFnqgzxLepnS7rN9Tdo7kDmnFD/VEqKrW57cGD2odbEg==", "dev": true }, - "arr-filter": { - "version": "1.1.2", - "resolved": "https://registry.npmjs.org/arr-filter/-/arr-filter-1.1.2.tgz", - "integrity": "sha1-Q/3d0JHo7xGqTEXZzcGOLf8XEe4=", + "@types/jasminewd2": { + "version": "2.0.10", + "resolved": "https://registry.npmjs.org/@types/jasminewd2/-/jasminewd2-2.0.10.tgz", + "integrity": "sha512-J7mDz7ovjwjc+Y9rR9rY53hFWKATcIkrr9DwQWmOas4/pnIPJTXawnzjwpHm3RSxz/e3ZVUvQ7cRbd5UQLo10g==", "dev": true, "requires": { - "make-iterator": "^1.0.0" + "@types/jasmine": "*" } }, - "arr-flatten": { - "version": "1.1.0", - "resolved": "https://registry.npmjs.org/arr-flatten/-/arr-flatten-1.1.0.tgz", - "integrity": "sha512-L3hKV5R/p5o81R7O02IGnwpDmkp6E982XhtbuwSe3O4qOtMMMtodicASA1Cny2U+aCXcNpml+m4dPsvsJ3jatg==", + "@types/json-schema": { + "version": "7.0.8", + "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.8.tgz", + "integrity": "sha512-YSBPTLTVm2e2OoQIDYx8HaeWJ5tTToLH67kXR7zYNGupXMEHa2++G8k+DczX2cFVgalypqtyZIcU19AFcmOpmg==", "dev": true }, - "arr-map": { - "version": "2.0.2", - "resolved": "https://registry.npmjs.org/arr-map/-/arr-map-2.0.2.tgz", - "integrity": "sha1-Onc0X/wc814qkYJWAfnljy4kysQ=", + "@types/mdast": { + "version": "3.0.4", + "resolved": "https://registry.npmjs.org/@types/mdast/-/mdast-3.0.4.tgz", + "integrity": "sha512-gIdhbLDFlspL53xzol2hVzrXAbzt71erJHoOwQZWssjaiouOotf03lNtMmFm9VfFkvnLWccSVjUAZGQ5Kqw+jA==", "dev": true, "requires": { - "make-iterator": "^1.0.0" + "@types/unist": "*" } }, - "arr-union": { - "version": "3.1.0", - "resolved": "https://registry.npmjs.org/arr-union/-/arr-union-3.1.0.tgz", - "integrity": "sha1-45sJrqne+Gao8gbiiK9jkZuuOcQ=", + "@types/minimist": { + "version": "1.2.2", + "resolved": "https://registry.npmjs.org/@types/minimist/-/minimist-1.2.2.tgz", + "integrity": "sha512-jhuKLIRrhvCPLqwPcx6INqmKeiA5EWrsCOPhrlFSrbrmU4ZMPjj5Ul/oLCMDO98XRUIwVm78xICz4EPCektzeQ==", "dev": true }, - "array-differ": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/array-differ/-/array-differ-1.0.0.tgz", - "integrity": "sha1-7/UuN1gknTO+QCuLuOVkuytdQDE=", + "@types/node": { + "version": "12.20.36", + "resolved": "https://registry.npmjs.org/@types/node/-/node-12.20.36.tgz", + "integrity": "sha512-+5haRZ9uzI7rYqzDznXgkuacqb6LJhAti8mzZKWxIXn/WEtvB+GHVJ7AuMwcN1HMvXOSJcrvA6PPoYHYOYYebA==", "dev": true }, - "array-each": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/array-each/-/array-each-1.0.1.tgz", - "integrity": "sha1-p5SvDAWrF1KEbudTofIRoFugxE8=", + "@types/normalize-package-data": { + "version": "2.4.1", + "resolved": "https://registry.npmjs.org/@types/normalize-package-data/-/normalize-package-data-2.4.1.tgz", + "integrity": "sha512-Gj7cI7z+98M282Tqmp2K5EIsoouUEzbBJhQQzDE3jSIRk6r9gsz0oUokqIUR4u1R3dMHo0pDHM7sNOHyhulypw==", "dev": true }, - "array-find-index": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/array-find-index/-/array-find-index-1.0.2.tgz", - "integrity": "sha1-3wEKoSh+Fku9pvlyOwqWoexBh6E=", + "@types/parse-json": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.0.tgz", + "integrity": "sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA==", "dev": true }, - "array-flatten": { - "version": "2.1.2", - "resolved": "https://registry.npmjs.org/array-flatten/-/array-flatten-2.1.2.tgz", - "integrity": "sha512-hNfzcOV8W4NdualtqBFPyVO+54DSJuZGY9qT4pRroB6S9e3iiido2ISIC5h9R2sPJ8H3FHCIiEnsv1lPXO3KtQ==", + "@types/q": { + "version": "0.0.32", + "resolved": "https://registry.npmjs.org/@types/q/-/q-0.0.32.tgz", + "integrity": "sha1-vShOV8hPEyXacCur/IKlMoGQwMU=", "dev": true }, - "array-includes": { - "version": "3.1.3", - "resolved": "https://registry.npmjs.org/array-includes/-/array-includes-3.1.3.tgz", - "integrity": "sha512-gcem1KlBU7c9rB+Rq8/3PPKsK2kjqeEBa3bD5kkQo4nYlOHQCJqIJFqBXDEfwaRuYTT4E+FxA9xez7Gf/e3Q7A==", + "@types/resolve": { + "version": "1.17.1", + "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.17.1.tgz", + "integrity": "sha512-yy7HuzQhj0dhGpD8RLXSZWEkLsV9ibvxvi6EiJ3bkqLAO1RGo0WbkWQiwpRlSFymTJRz0d3k5LM3kkx8ArDbLw==", "dev": true, "requires": { - "call-bind": "^1.0.2", - "define-properties": "^1.1.3", - "es-abstract": "^1.18.0-next.2", - "get-intrinsic": "^1.1.1", - "is-string": "^1.0.5" + "@types/node": "*" } }, - "array-initial": { - "version": "1.1.0", - "resolved": "https://registry.npmjs.org/array-initial/-/array-initial-1.1.0.tgz", - "integrity": "sha1-L6dLJnOTccOUe9enrcc74zSz15U=", + "@types/retry": { + "version": "0.12.1", + "resolved": "https://registry.npmjs.org/@types/retry/-/retry-0.12.1.tgz", + "integrity": "sha512-xoDlM2S4ortawSWORYqsdU+2rxdh4LRW9ytc3zmT37RIKQh6IHyKwwtKhKis9ah8ol07DCkZxPt8BBvPjC6v4g==", + "dev": true + }, + "@types/selenium-webdriver": { + "version": "3.0.18", + "resolved": "https://registry.npmjs.org/@types/selenium-webdriver/-/selenium-webdriver-3.0.18.tgz", + "integrity": "sha512-kl+jWcEubY2B5j+i6gFPyO3IaskOsGfvS7p7JRxmCuYbMf0aCj9SxfvvVhz2wk3/9l+e2pgP8Hyzv6zPMRwcAw==", + "dev": true + }, + "@types/source-map": { + "version": "0.5.2", + "resolved": "https://registry.npmjs.org/@types/source-map/-/source-map-0.5.2.tgz", + "integrity": "sha512-++w4WmMbk3dS3UeHGzAG+xJOSz5Xqtjys/TBkqG3qp3SeWE7Wwezqe5eB7B51cxUyh4PW7bwVotpsLdBK0D8cw==" + }, + "@types/unist": { + "version": "2.0.5", + "resolved": "https://registry.npmjs.org/@types/unist/-/unist-2.0.5.tgz", + "integrity": "sha512-wnra4Vw9dopnuybR6HBywJ/URYpYrKLoepBTEtgfJup8Ahoi2zJECPP2cwiXp7btTvOT2CULv87aQRA4eZSP6g==", + "dev": true + }, + "@types/webpack-env": { + "version": "1.16.3", + "resolved": "https://registry.npmjs.org/@types/webpack-env/-/webpack-env-1.16.3.tgz", + "integrity": "sha512-9gtOPPkfyNoEqCQgx4qJKkuNm/x0R2hKR7fdl7zvTJyHnIisuE/LfvXOsYWL0o3qq6uiBnKZNNNzi3l0y/X+xw==", + "dev": true + }, + "@typescript-eslint/eslint-plugin": { + "version": "4.16.1", + "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-4.16.1.tgz", + "integrity": "sha512-SK777klBdlkUZpZLC1mPvyOWk9yAFCWmug13eAjVQ4/Q1LATE/NbcQL1xDHkptQkZOLnPmLUA1Y54m8dqYwnoQ==", "dev": true, "requires": { - "array-slice": "^1.0.0", - "is-number": "^4.0.0" + "@typescript-eslint/experimental-utils": "4.16.1", + "@typescript-eslint/scope-manager": "4.16.1", + "debug": "^4.1.1", + "functional-red-black-tree": "^1.0.1", + "lodash": "^4.17.15", + "regexpp": "^3.0.0", + "semver": "^7.3.2", + "tsutils": "^3.17.1" }, "dependencies": { - "is-number": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/is-number/-/is-number-4.0.0.tgz", - "integrity": "sha512-rSklcAIlf1OmFdyAqbnWTLVelsQ58uvZ66S/ZyawjWqIviTWCjg2PzVGw8WUA+nNuPTqb4wgA+NszrJ+08LlgQ==", - "dev": true - } - } - }, - "array-last": { - "version": "1.3.0", - "resolved": "https://registry.npmjs.org/array-last/-/array-last-1.3.0.tgz", - "integrity": "sha512-eOCut5rXlI6aCOS7Z7kCplKRKyiFQ6dHFBem4PwlwKeNFk2/XxTrhRh5T9PyaEWGy/NHTZWbY+nsZlNFJu9rYg==", - "dev": true, - "requires": { - "is-number": "^4.0.0" - }, - "dependencies": { - "is-number": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/is-number/-/is-number-4.0.0.tgz", - "integrity": "sha512-rSklcAIlf1OmFdyAqbnWTLVelsQ58uvZ66S/ZyawjWqIviTWCjg2PzVGw8WUA+nNuPTqb4wgA+NszrJ+08LlgQ==", + "@typescript-eslint/experimental-utils": { + "version": "4.16.1", + "resolved": "https://registry.npmjs.org/@typescript-eslint/experimental-utils/-/experimental-utils-4.16.1.tgz", + "integrity": "sha512-0Hm3LSlMYFK17jO4iY3un1Ve9x1zLNn4EM50Lia+0EV99NdbK+cn0er7HC7IvBA23mBg3P+8dUkMXy4leL33UQ==", + "dev": true, + "requires": { + "@types/json-schema": "^7.0.3", + "@typescript-eslint/scope-manager": "4.16.1", + "@typescript-eslint/types": "4.16.1", + "@typescript-eslint/typescript-estree": "4.16.1", + "eslint-scope": "^5.0.0", + "eslint-utils": "^2.0.0" + } + }, + "@typescript-eslint/scope-manager": { + "version": "4.16.1", + "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-4.16.1.tgz", + "integrity": "sha512-6IlZv9JaurqV0jkEg923cV49aAn8V6+1H1DRfhRcvZUrptQ+UtSKHb5kwTayzOYTJJ/RsYZdcvhOEKiBLyc0Cw==", + "dev": true, + "requires": { + "@typescript-eslint/types": "4.16.1", + "@typescript-eslint/visitor-keys": "4.16.1" + } + }, + "@typescript-eslint/types": { + "version": "4.16.1", + "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-4.16.1.tgz", + "integrity": "sha512-nnKqBwMgRlhzmJQF8tnFDZWfunXmJyuXj55xc8Kbfup4PbkzdoDXZvzN8//EiKR27J6vUSU8j4t37yUuYPiLqA==", "dev": true + }, + "@typescript-eslint/typescript-estree": { + "version": "4.16.1", + "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-4.16.1.tgz", + "integrity": "sha512-m8I/DKHa8YbeHt31T+UGd/l8Kwr0XCTCZL3H4HMvvLCT7HU9V7yYdinTOv1gf/zfqNeDcCgaFH2BMsS8x6NvJg==", + "dev": true, + "requires": { + "@typescript-eslint/types": "4.16.1", + "@typescript-eslint/visitor-keys": "4.16.1", + "debug": "^4.1.1", + "globby": "^11.0.1", + "is-glob": "^4.0.1", + "semver": "^7.3.2", + "tsutils": "^3.17.1" + } + }, + "@typescript-eslint/visitor-keys": { + "version": "4.16.1", + "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-4.16.1.tgz", + "integrity": "sha512-s/aIP1XcMkEqCNcPQtl60ogUYjSM8FU2mq1O7y5cFf3Xcob1z1iXWNB6cC43Op+NGRTFgGolri6s8z/efA9i1w==", + "dev": true, + "requires": { + "@typescript-eslint/types": "4.16.1", + "eslint-visitor-keys": "^2.0.0" + } + }, + "eslint-utils": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/eslint-utils/-/eslint-utils-2.1.0.tgz", + "integrity": "sha512-w94dQYoauyvlDc43XnGB8lU3Zt713vNChgt4EWwhXAP2XkBvndfxF0AgIqKOOasjPIPzj9JqgwkwbCYD0/V3Zg==", + "dev": true, + "requires": { + "eslint-visitor-keys": "^1.1.0" + }, + "dependencies": { + "eslint-visitor-keys": { + "version": "1.3.0", + "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-1.3.0.tgz", + "integrity": "sha512-6J72N8UNa462wa/KFODt/PJ3IU60SDpC3QXC1Hjc1BXXpfL2C9R5+AU7jhe0F6GREqVMh4Juu+NY7xn+6dipUQ==", + "dev": true + } + } } } }, - "array-slice": { - "version": "1.1.0", - "resolved": "https://registry.npmjs.org/array-slice/-/array-slice-1.1.0.tgz", - "integrity": "sha512-B1qMD3RBP7O8o0H2KbrXDyB0IccejMF15+87Lvlor12ONPRHP6gTjXMNkt/d3ZuOGbAe66hFmaCfECI24Ufp6w==", - "dev": true + "@typescript-eslint/experimental-utils": { + "version": "4.28.2", + "resolved": "https://registry.npmjs.org/@typescript-eslint/experimental-utils/-/experimental-utils-4.28.2.tgz", + "integrity": "sha512-MwHPsL6qo98RC55IoWWP8/opTykjTp4JzfPu1VfO2Z0MshNP0UZ1GEV5rYSSnZSUI8VD7iHvtIPVGW5Nfh7klQ==", + "dev": true, + "requires": { + "@types/json-schema": "^7.0.7", + "@typescript-eslint/scope-manager": "4.28.2", + "@typescript-eslint/types": "4.28.2", + "@typescript-eslint/typescript-estree": "4.28.2", + "eslint-scope": "^5.1.1", + "eslint-utils": "^3.0.0" + } }, - "array-sort": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/array-sort/-/array-sort-1.0.0.tgz", - "integrity": "sha512-ihLeJkonmdiAsD7vpgN3CRcx2J2S0TiYW+IS/5zHBI7mKUq3ySvBdzzBfD236ubDBQFiiyG3SWCPc+msQ9KoYg==", + "@typescript-eslint/parser": { + "version": "4.16.1", + "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-4.16.1.tgz", + "integrity": "sha512-/c0LEZcDL5y8RyI1zLcmZMvJrsR6SM1uetskFkoh3dvqDKVXPsXI+wFB/CbVw7WkEyyTKobC1mUNp/5y6gRvXg==", "dev": true, "requires": { - "default-compare": "^1.0.0", - "get-value": "^2.0.6", - "kind-of": "^5.0.2" + "@typescript-eslint/scope-manager": "4.16.1", + "@typescript-eslint/types": "4.16.1", + "@typescript-eslint/typescript-estree": "4.16.1", + "debug": "^4.1.1" }, "dependencies": { - "kind-of": { - "version": "5.1.0", - "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-5.1.0.tgz", - "integrity": "sha512-NGEErnH6F2vUuXDh+OlbcKW7/wOcfdRHaZ7VWtqCztfHri/++YKmP51OdWeGPuqCOba6kk2OTe5d02VmTB80Pw==", + "@typescript-eslint/scope-manager": { + "version": "4.16.1", + "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-4.16.1.tgz", + "integrity": "sha512-6IlZv9JaurqV0jkEg923cV49aAn8V6+1H1DRfhRcvZUrptQ+UtSKHb5kwTayzOYTJJ/RsYZdcvhOEKiBLyc0Cw==", + "dev": true, + "requires": { + "@typescript-eslint/types": "4.16.1", + "@typescript-eslint/visitor-keys": "4.16.1" + } + }, + "@typescript-eslint/types": { + "version": "4.16.1", + "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-4.16.1.tgz", + "integrity": "sha512-nnKqBwMgRlhzmJQF8tnFDZWfunXmJyuXj55xc8Kbfup4PbkzdoDXZvzN8//EiKR27J6vUSU8j4t37yUuYPiLqA==", "dev": true + }, + "@typescript-eslint/typescript-estree": { + "version": "4.16.1", + "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-4.16.1.tgz", + "integrity": "sha512-m8I/DKHa8YbeHt31T+UGd/l8Kwr0XCTCZL3H4HMvvLCT7HU9V7yYdinTOv1gf/zfqNeDcCgaFH2BMsS8x6NvJg==", + "dev": true, + "requires": { + "@typescript-eslint/types": "4.16.1", + "@typescript-eslint/visitor-keys": "4.16.1", + "debug": "^4.1.1", + "globby": "^11.0.1", + "is-glob": "^4.0.1", + "semver": "^7.3.2", + "tsutils": "^3.17.1" + } + }, + "@typescript-eslint/visitor-keys": { + "version": "4.16.1", + "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-4.16.1.tgz", + "integrity": "sha512-s/aIP1XcMkEqCNcPQtl60ogUYjSM8FU2mq1O7y5cFf3Xcob1z1iXWNB6cC43Op+NGRTFgGolri6s8z/efA9i1w==", + "dev": true, + "requires": { + "@typescript-eslint/types": "4.16.1", + "eslint-visitor-keys": "^2.0.0" + } } } }, - "array-union": { - "version": "2.1.0", - "resolved": "https://registry.npmjs.org/array-union/-/array-union-2.1.0.tgz", - "integrity": "sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw==", - "dev": true + "@typescript-eslint/scope-manager": { + "version": "4.28.2", + "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-4.28.2.tgz", + "integrity": "sha512-MqbypNjIkJFEFuOwPWNDjq0nqXAKZvDNNs9yNseoGBB1wYfz1G0WHC2AVOy4XD7di3KCcW3+nhZyN6zruqmp2A==", + "dev": true, + "requires": { + "@typescript-eslint/types": "4.28.2", + "@typescript-eslint/visitor-keys": "4.28.2" + } }, - "array-uniq": { - "version": "1.0.3", - "resolved": "https://registry.npmjs.org/array-uniq/-/array-uniq-1.0.3.tgz", - "integrity": "sha1-r2rId6Jcx/dOBYiUdThY39sk/bY=", + "@typescript-eslint/types": { + "version": "4.28.2", + "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-4.28.2.tgz", + "integrity": "sha512-Gr15fuQVd93uD9zzxbApz3wf7ua3yk4ZujABZlZhaxxKY8ojo448u7XTm/+ETpy0V0dlMtj6t4VdDvdc0JmUhA==", "dev": true }, - "array-unique": { - "version": "0.3.2", - "resolved": "https://registry.npmjs.org/array-unique/-/array-unique-0.3.2.tgz", - "integrity": "sha1-qJS3XUvE9s1nnvMkSp/Y9Gri1Cg=", - "dev": true + "@typescript-eslint/typescript-estree": { + "version": "4.28.2", + "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-4.28.2.tgz", + "integrity": "sha512-86lLstLvK6QjNZjMoYUBMMsULFw0hPHJlk1fzhAVoNjDBuPVxiwvGuPQq3fsBMCxuDJwmX87tM/AXoadhHRljg==", + "dev": true, + "requires": { + "@typescript-eslint/types": "4.28.2", + "@typescript-eslint/visitor-keys": "4.28.2", + "debug": "^4.3.1", + "globby": "^11.0.3", + "is-glob": "^4.0.1", + "semver": "^7.3.5", + "tsutils": "^3.21.0" + } }, - "array.prototype.flat": { - "version": "1.2.4", - "resolved": "https://registry.npmjs.org/array.prototype.flat/-/array.prototype.flat-1.2.4.tgz", - "integrity": "sha512-4470Xi3GAPAjZqFcljX2xzckv1qeKPizoNkiS0+O4IoPR2ZNpcjE0pkhdihlDouK+x6QOast26B4Q/O9DJnwSg==", + "@typescript-eslint/visitor-keys": { + "version": "4.28.2", + "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-4.28.2.tgz", + "integrity": "sha512-aT2B4PLyyRDUVUafXzpZFoc0C9t0za4BJAKP5sgWIhG+jHECQZUEjuQSCIwZdiJJ4w4cgu5r3Kh20SOdtEBl0w==", "dev": true, "requires": { - "call-bind": "^1.0.0", - "define-properties": "^1.1.3", - "es-abstract": "^1.18.0-next.1" + "@typescript-eslint/types": "4.28.2", + "eslint-visitor-keys": "^2.0.0" } }, - "arraybuffer.slice": { - "version": "0.0.7", - "resolved": "https://registry.npmjs.org/arraybuffer.slice/-/arraybuffer.slice-0.0.7.tgz", - "integrity": "sha512-wGUIVQXuehL5TCqQun8OW81jGzAWycqzFF8lFp+GOM5BXLYj3bKNsYC4daB7n6XjCqxQA/qgTJ+8ANR3acjrog==", + "@webassemblyjs/ast": { + "version": "1.11.1", + "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.11.1.tgz", + "integrity": "sha512-ukBh14qFLjxTQNTXocdyksN5QdM28S1CxHt2rdskFyL+xFV7VremuBLVbmCePj+URalXBENx/9Lm7lnhihtCSw==", + "dev": true, + "requires": { + "@webassemblyjs/helper-numbers": "1.11.1", + "@webassemblyjs/helper-wasm-bytecode": "1.11.1" + } + }, + "@webassemblyjs/floating-point-hex-parser": { + "version": "1.11.1", + "resolved": "https://registry.npmjs.org/@webassemblyjs/floating-point-hex-parser/-/floating-point-hex-parser-1.11.1.tgz", + "integrity": "sha512-iGRfyc5Bq+NnNuX8b5hwBrRjzf0ocrJPI6GWFodBFzmFnyvrQ83SHKhmilCU/8Jv67i4GJZBMhEzltxzcNagtQ==", "dev": true }, - "arrify": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/arrify/-/arrify-1.0.1.tgz", - "integrity": "sha1-iYUI2iIm84DfkEcoRWhJwVAaSw0=", + "@webassemblyjs/helper-api-error": { + "version": "1.11.1", + "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-api-error/-/helper-api-error-1.11.1.tgz", + "integrity": "sha512-RlhS8CBCXfRUR/cwo2ho9bkheSXG0+NwooXcc3PAILALf2QLdFyj7KGsKRbVc95hZnhnERon4kW/D3SZpp6Tcg==", "dev": true }, - "asap": { - "version": "2.0.6", - "resolved": "https://registry.npmjs.org/asap/-/asap-2.0.6.tgz", - "integrity": "sha1-5QNHYR1+aQlDIIu9r+vLwvuGbUY=", + "@webassemblyjs/helper-buffer": { + "version": "1.11.1", + "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-buffer/-/helper-buffer-1.11.1.tgz", + "integrity": "sha512-gwikF65aDNeeXa8JxXa2BAk+REjSyhrNC9ZwdT0f8jc4dQQeDQ7G4m0f2QCLPJiMTTO6wfDmRmj/pW0PsUvIcA==", "dev": true }, - "asn1": { - "version": "0.2.4", - "resolved": "https://registry.npmjs.org/asn1/-/asn1-0.2.4.tgz", - "integrity": "sha512-jxwzQpLQjSmWXgwaCZE9Nz+glAG01yF1QnWgbhGwHI5A6FRIEY6IVqtHhIepHqI7/kyEyQEagBC5mBEFlIYvdg==", + "@webassemblyjs/helper-numbers": { + "version": "1.11.1", + "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-numbers/-/helper-numbers-1.11.1.tgz", + "integrity": "sha512-vDkbxiB8zfnPdNK9Rajcey5C0w+QJugEglN0of+kmO8l7lDb77AnlKYQF7aarZuCrv+l0UvqL+68gSDr3k9LPQ==", "dev": true, "requires": { - "safer-buffer": "~2.1.0" + "@webassemblyjs/floating-point-hex-parser": "1.11.1", + "@webassemblyjs/helper-api-error": "1.11.1", + "@xtuc/long": "4.2.2" } }, - "assert-plus": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/assert-plus/-/assert-plus-1.0.0.tgz", - "integrity": "sha1-8S4PPF13sLHN2RRpQuTpbB5N1SU=", + "@webassemblyjs/helper-wasm-bytecode": { + "version": "1.11.1", + "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-wasm-bytecode/-/helper-wasm-bytecode-1.11.1.tgz", + "integrity": "sha512-PvpoOGiJwXeTrSf/qfudJhwlvDQxFgelbMqtq52WWiXC6Xgg1IREdngmPN3bs4RoO83PnL/nFrxucXj1+BX62Q==", "dev": true }, - "assign-symbols": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/assign-symbols/-/assign-symbols-1.0.0.tgz", - "integrity": "sha1-WWZ/QfrdTyDMvCu5a41Pf3jsA2c=", - "dev": true + "@webassemblyjs/helper-wasm-section": { + "version": "1.11.1", + "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-wasm-section/-/helper-wasm-section-1.11.1.tgz", + "integrity": "sha512-10P9No29rYX1j7F3EVPX3JvGPQPae+AomuSTPiF9eBQeChHI6iqjMIwR9JmOJXwpnn/oVGDk7I5IlskuMwU/pg==", + "dev": true, + "requires": { + "@webassemblyjs/ast": "1.11.1", + "@webassemblyjs/helper-buffer": "1.11.1", + "@webassemblyjs/helper-wasm-bytecode": "1.11.1", + "@webassemblyjs/wasm-gen": "1.11.1" + } }, - "ast-types-flow": { - "version": "0.0.7", - "resolved": "https://registry.npmjs.org/ast-types-flow/-/ast-types-flow-0.0.7.tgz", - "integrity": "sha1-9wtzXGvKGlycItmCw+Oef+ujva0=", - "dev": true + "@webassemblyjs/ieee754": { + "version": "1.11.1", + "resolved": "https://registry.npmjs.org/@webassemblyjs/ieee754/-/ieee754-1.11.1.tgz", + "integrity": "sha512-hJ87QIPtAMKbFq6CGTkZYJivEwZDbQUgYd3qKSadTNOhVY7p+gfP6Sr0lLRVTaG1JjFj+r3YchoqRYxNH3M0GQ==", + "dev": true, + "requires": { + "@xtuc/ieee754": "^1.2.0" + } }, - "astral-regex": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/astral-regex/-/astral-regex-2.0.0.tgz", - "integrity": "sha512-Z7tMw1ytTXt5jqMcOP+OQteU1VuNK9Y02uuJtKQ1Sv69jXQKKg5cibLwGJow8yzZP+eAc18EmLGPal0bp36rvQ==", + "@webassemblyjs/leb128": { + "version": "1.11.1", + "resolved": "https://registry.npmjs.org/@webassemblyjs/leb128/-/leb128-1.11.1.tgz", + "integrity": "sha512-BJ2P0hNZ0u+Th1YZXJpzW6miwqQUGcIHT1G/sf72gLVD9DZ5AdYTqPNbHZh6K1M5VmKvFXwGSWZADz+qBWxeRw==", + "dev": true, + "requires": { + "@xtuc/long": "4.2.2" + } + }, + "@webassemblyjs/utf8": { + "version": "1.11.1", + "resolved": "https://registry.npmjs.org/@webassemblyjs/utf8/-/utf8-1.11.1.tgz", + "integrity": "sha512-9kqcxAEdMhiwQkHpkNiorZzqpGrodQQ2IGrHHxCy+Ozng0ofyMA0lTqiLkVs1uzTRejX+/O0EOT7KxqVPuXosQ==", "dev": true }, - "async": { - "version": "1.5.2", - "resolved": "https://registry.npmjs.org/async/-/async-1.5.2.tgz", - "integrity": "sha1-7GphrlZIDAw8skHJVhjiCJL5Zyo=" + "@webassemblyjs/wasm-edit": { + "version": "1.11.1", + "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-edit/-/wasm-edit-1.11.1.tgz", + "integrity": "sha512-g+RsupUC1aTHfR8CDgnsVRVZFJqdkFHpsHMfJuWQzWU3tvnLC07UqHICfP+4XyL2tnr1amvl1Sdp06TnYCmVkA==", + "dev": true, + "requires": { + "@webassemblyjs/ast": "1.11.1", + "@webassemblyjs/helper-buffer": "1.11.1", + "@webassemblyjs/helper-wasm-bytecode": "1.11.1", + "@webassemblyjs/helper-wasm-section": "1.11.1", + "@webassemblyjs/wasm-gen": "1.11.1", + "@webassemblyjs/wasm-opt": "1.11.1", + "@webassemblyjs/wasm-parser": "1.11.1", + "@webassemblyjs/wast-printer": "1.11.1" + } }, - "async-done": { - "version": "1.3.2", - "resolved": "https://registry.npmjs.org/async-done/-/async-done-1.3.2.tgz", - "integrity": "sha512-uYkTP8dw2og1tu1nmza1n1CMW0qb8gWWlwqMmLb7MhBVs4BXrFziT6HXUd+/RlRA/i4H9AkofYloUbs1fwMqlw==", + "@webassemblyjs/wasm-gen": { + "version": "1.11.1", + "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-gen/-/wasm-gen-1.11.1.tgz", + "integrity": "sha512-F7QqKXwwNlMmsulj6+O7r4mmtAlCWfO/0HdgOxSklZfQcDu0TpLiD1mRt/zF25Bk59FIjEuGAIyn5ei4yMfLhA==", "dev": true, "requires": { - "end-of-stream": "^1.1.0", - "once": "^1.3.2", - "process-nextick-args": "^2.0.0", - "stream-exhaust": "^1.0.1" + "@webassemblyjs/ast": "1.11.1", + "@webassemblyjs/helper-wasm-bytecode": "1.11.1", + "@webassemblyjs/ieee754": "1.11.1", + "@webassemblyjs/leb128": "1.11.1", + "@webassemblyjs/utf8": "1.11.1" } }, - "async-each": { - "version": "1.0.3", - "resolved": "https://registry.npmjs.org/async-each/-/async-each-1.0.3.tgz", - "integrity": "sha512-z/WhQ5FPySLdvREByI2vZiTWwCnF0moMJ1hK9YQwDTHKh6I7/uSckMetoRGb5UBZPC1z0jlw+n/XCgjeH7y1AQ==", + "@webassemblyjs/wasm-opt": { + "version": "1.11.1", + "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-opt/-/wasm-opt-1.11.1.tgz", + "integrity": "sha512-VqnkNqnZlU5EB64pp1l7hdm3hmQw7Vgqa0KF/KCNO9sIpI6Fk6brDEiX+iCOYrvMuBWDws0NkTOxYEb85XQHHw==", + "dev": true, + "requires": { + "@webassemblyjs/ast": "1.11.1", + "@webassemblyjs/helper-buffer": "1.11.1", + "@webassemblyjs/wasm-gen": "1.11.1", + "@webassemblyjs/wasm-parser": "1.11.1" + } + }, + "@webassemblyjs/wasm-parser": { + "version": "1.11.1", + "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-parser/-/wasm-parser-1.11.1.tgz", + "integrity": "sha512-rrBujw+dJu32gYB7/Lup6UhdkPx9S9SnobZzRVL7VcBH9Bt9bCBLEuX/YXOOtBsOZ4NQrRykKhffRWHvigQvOA==", + "dev": true, + "requires": { + "@webassemblyjs/ast": "1.11.1", + "@webassemblyjs/helper-api-error": "1.11.1", + "@webassemblyjs/helper-wasm-bytecode": "1.11.1", + "@webassemblyjs/ieee754": "1.11.1", + "@webassemblyjs/leb128": "1.11.1", + "@webassemblyjs/utf8": "1.11.1" + } + }, + "@webassemblyjs/wast-printer": { + "version": "1.11.1", + "resolved": "https://registry.npmjs.org/@webassemblyjs/wast-printer/-/wast-printer-1.11.1.tgz", + "integrity": "sha512-IQboUWM4eKzWW+N/jij2sRatKMh99QEelo3Eb2q0qXkvPRISAj8Qxtmw5itwqK+TTkBuUIE45AxYPToqPtL5gg==", + "dev": true, + "requires": { + "@webassemblyjs/ast": "1.11.1", + "@xtuc/long": "4.2.2" + } + }, + "@xtuc/ieee754": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/@xtuc/ieee754/-/ieee754-1.2.0.tgz", + "integrity": "sha512-DX8nKgqcGwsc0eJSqYt5lwP4DH5FlHnmuWWBRy7X0NcaGR0ZtuyeESgMwTYVEtxmsNGY+qit4QYT/MIYTOTPeA==", "dev": true }, - "async-each-series": { - "version": "0.1.1", - "resolved": "https://registry.npmjs.org/async-each-series/-/async-each-series-0.1.1.tgz", - "integrity": "sha1-dhfBkXQB/Yykooqtzj266Yr+tDI=", + "@xtuc/long": { + "version": "4.2.2", + "resolved": "https://registry.npmjs.org/@xtuc/long/-/long-4.2.2.tgz", + "integrity": "sha512-NuHqBY1PB/D8xU6s/thBgOAiAP7HOYDQ32+BFZILJ8ivkUkAHQnWfn6WhL79Owj1qmUnoN/YPhktdIoucipkAQ==", + "dev": true + }, + "@yarnpkg/lockfile": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/@yarnpkg/lockfile/-/lockfile-1.1.0.tgz", + "integrity": "sha512-GpSwvyXOcOOlV70vbnzjj4fW5xW/FdUF6nQEt1ENy7m4ZCczi1+/buVUPAqmGfqznsORNFzUMjctTIp8a9tuCQ==", "dev": true }, - "async-limiter": { + "a-sync-waterfall": { "version": "1.0.1", - "resolved": "https://registry.npmjs.org/async-limiter/-/async-limiter-1.0.1.tgz", - "integrity": "sha512-csOlWGAcRFJaI6m+F2WKdnMKr4HhdhFVBk0H/QbJFMCr+uO2kwohwXQPxw/9OCxp05r5ghVBFSyioixx3gfkNQ==", + "resolved": "https://registry.npmjs.org/a-sync-waterfall/-/a-sync-waterfall-1.0.1.tgz", + "integrity": "sha512-RYTOHHdWipFUliRFMCS4X2Yn2X8M87V/OpSqWzKKOGhzqyUxzyVmhHDH9sAvG+ZuQf/TAOFsLCpMw09I1ufUnA==", "dev": true }, - "async-settle": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/async-settle/-/async-settle-1.0.0.tgz", - "integrity": "sha1-HQqRS7Aldb7IqPOnTlCA9yssDGs=", + "abab": { + "version": "2.0.5", + "resolved": "https://registry.npmjs.org/abab/-/abab-2.0.5.tgz", + "integrity": "sha512-9IK9EadsbHo6jLWIpxpR6pL0sazTXV6+SQv25ZB+F7Bj9mJNaOc4nCRabwd5M/JwmUa8idz6Eci6eKfJryPs6Q==", + "dev": true + }, + "abbrev": { + "version": "1.0.9", + "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-1.0.9.tgz", + "integrity": "sha1-kbR5JYinc4wl813W9jdSovh3YTU=" + }, + "accepts": { + "version": "1.3.7", + "resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.7.tgz", + "integrity": "sha512-Il80Qs2WjYlJIBNzNkK6KYqlVMTbZLXgHx2oT0pU/fjRHyEp+PEfEPY0R3WCwAGVOtauxh1hOxNgIf5bv7dQpA==", "dev": true, "requires": { - "async-done": "^1.2.2" + "mime-types": "~2.1.24", + "negotiator": "0.6.2" } }, - "asynckit": { - "version": "0.4.0", - "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz", - "integrity": "sha1-x57Zf380y48robyXkLzDZkdLS3k=", + "acorn": { + "version": "8.5.0", + "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.5.0.tgz", + "integrity": "sha512-yXbYeFy+jUuYd3/CDcg2NkIYE991XYX/bje7LmjJigUciaeO1JR4XxXgCIV1/Zc/dRuFEyw1L0pbA+qynJkW5Q==", "dev": true }, - "at-least-node": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/at-least-node/-/at-least-node-1.0.0.tgz", - "integrity": "sha512-+q/t7Ekv1EDY2l6Gda6LLiX14rU9TV20Wa3ofeQmwPFZbOMo9DXrLbOjFaaclkXKWidIaopwAObQDqwWtGUjqg==", + "acorn-import-assertions": { + "version": "1.8.0", + "resolved": "https://registry.npmjs.org/acorn-import-assertions/-/acorn-import-assertions-1.8.0.tgz", + "integrity": "sha512-m7VZ3jwz4eK6A4Vtt8Ew1/mNbP24u0FhdyfA7fSvnJR6LMdfOYnmuIrrJAgrYfYJ10F/otaHTtrtrtmHdMNzEw==", "dev": true }, - "atob": { - "version": "2.1.2", - "resolved": "https://registry.npmjs.org/atob/-/atob-2.1.2.tgz", - "integrity": "sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg==", + "acorn-jsx": { + "version": "5.3.2", + "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.2.tgz", + "integrity": "sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==", "dev": true }, - "autoprefixer": { - "version": "9.8.6", - "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-9.8.6.tgz", - "integrity": "sha512-XrvP4VVHdRBCdX1S3WXVD8+RyG9qeb1D5Sn1DeLiG2xfSpzellk5k54xbUERJ3M5DggQxes39UGOTP8CFrEGbg==", + "adjust-sourcemap-loader": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/adjust-sourcemap-loader/-/adjust-sourcemap-loader-4.0.0.tgz", + "integrity": "sha512-OXwN5b9pCUXNQHJpwwD2qP40byEmSgzj8B4ydSN0uMNYWiFmJ6x6KwUllMmfk8Rwu/HJDFR7U8ubsWBoN0Xp0A==", "dev": true, "requires": { - "browserslist": "^4.12.0", - "caniuse-lite": "^1.0.30001109", - "colorette": "^1.2.1", - "normalize-range": "^0.1.2", - "num2fraction": "^1.2.2", - "postcss": "^7.0.32", - "postcss-value-parser": "^4.1.0" + "loader-utils": "^2.0.0", + "regex-parser": "^2.2.11" }, "dependencies": { - "has-flag": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz", - "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=", - "dev": true - }, - "postcss": { - "version": "7.0.36", - "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.36.tgz", - "integrity": "sha512-BebJSIUMwJHRH0HAQoxN4u1CN86glsrwsW0q7T+/m44eXOUAxSNdHRkNZPYz5vVUbg17hFgOQDE7fZk7li3pZw==", - "dev": true, - "requires": { - "chalk": "^2.4.2", - "source-map": "^0.6.1", - "supports-color": "^6.1.0" - } - }, - "source-map": { - "version": "0.6.1", - "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", - "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", - "dev": true - }, - "supports-color": { - "version": "6.1.0", - "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz", - "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==", + "loader-utils": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.1.tgz", + "integrity": "sha512-g4miPa9uUrZz4iElkaVJgDFwKJGh8aQGM7pUL4ejXl6cu7kSb30seQOVGNMP6sW8j7DW77X68hJZ+GM7UGhXeQ==", "dev": true, "requires": { - "has-flag": "^3.0.0" + "big.js": "^5.2.2", + "emojis-list": "^3.0.0", + "json5": "^2.1.2" } } } }, - "aws-sign2": { - "version": "0.7.0", - "resolved": "https://registry.npmjs.org/aws-sign2/-/aws-sign2-0.7.0.tgz", - "integrity": "sha1-tG6JCTSpWR8tL2+G1+ap8bP+dqg=", + "adm-zip": { + "version": "0.4.16", + "resolved": "https://registry.npmjs.org/adm-zip/-/adm-zip-0.4.16.tgz", + "integrity": "sha512-TFi4HBKSGfIKsK5YCkKaaFG2m4PEDyViZmEwof3MTIgzimHLto6muaHVpbrljdIvIrFZzEq/p4nafOeLcYegrg==", "dev": true }, - "aws4": { - "version": "1.11.0", - "resolved": "https://registry.npmjs.org/aws4/-/aws4-1.11.0.tgz", - "integrity": "sha512-xh1Rl34h6Fi1DC2WWKfxUTVqRsNnr6LsKz2+hfwDxQJWmrx8+c7ylaqBMcHfl1U1r2dsifOvKX3LQuLNZ+XSvA==", + "after": { + "version": "0.8.2", + "resolved": "https://registry.npmjs.org/after/-/after-0.8.2.tgz", + "integrity": "sha1-/ts5T58OAqqXaOcCvaI7UF+ufh8=", "dev": true }, - "axios": { - "version": "0.21.1", - "resolved": "https://registry.npmjs.org/axios/-/axios-0.21.1.tgz", - "integrity": "sha512-dKQiRHxGD9PPRIUNIWvZhPTPpl1rf/OxTYKsqKUDjBwYylTvV7SjSHJb9ratfyzM6wCdLCOYLzs73qpg5c4iGA==", + "agent-base": { + "version": "6.0.2", + "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-6.0.2.tgz", + "integrity": "sha512-RZNwNclF7+MS/8bDg70amg32dyeZGZxiDuQmZxKLAlQjr3jGyLx+4Kkk58UO7D2QdgFIQCovuSuZESne6RG6XQ==", "dev": true, "requires": { - "follow-redirects": "^1.10.0" + "debug": "4" } }, - "axobject-query": { - "version": "2.2.0", - "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-2.2.0.tgz", - "integrity": "sha512-Td525n+iPOOyUQIeBfcASuG6uJsDOITl7Mds5gFyerkWiX7qhUTdYUBlSgNMyVqtSJqwpt1kXGLdUt6SykLMRA==", - "dev": true - }, - "babel-loader": { - "version": "8.2.2", - "resolved": "https://registry.npmjs.org/babel-loader/-/babel-loader-8.2.2.tgz", - "integrity": "sha512-JvTd0/D889PQBtUXJ2PXaKU/pjZDMtHA9V2ecm+eNRmmBCMR09a+fmpGTNwnJtFmFl5Ei7Vy47LjBb+L0wQ99g==", + "agentkeepalive": { + "version": "4.1.4", + "resolved": "https://registry.npmjs.org/agentkeepalive/-/agentkeepalive-4.1.4.tgz", + "integrity": "sha512-+V/rGa3EuU74H6wR04plBb7Ks10FbtUQgRj/FQOG7uUIEuaINI+AiqJR1k6t3SVNs7o7ZjIdus6706qqzVq8jQ==", "dev": true, "requires": { - "find-cache-dir": "^3.3.1", - "loader-utils": "^1.4.0", - "make-dir": "^3.1.0", - "schema-utils": "^2.6.5" - }, - "dependencies": { - "json5": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.1.tgz", - "integrity": "sha512-aKS4WQjPenRxiQsC93MNfjx+nbF4PAdYzmd/1JIj8HYzqfbu86beTuNgXDzPknWk0n0uARlyewZo4s++ES36Ow==", - "dev": true, - "requires": { - "minimist": "^1.2.0" - } - }, - "loader-utils": { - "version": "1.4.0", - "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.4.0.tgz", - "integrity": "sha512-qH0WSMBtn/oHuwjy/NucEgbx5dbxxnxup9s4PVXJUDHZBQY+s0NWA9rJf53RBnQZxfch7euUui7hpoAPvALZdA==", - "dev": true, - "requires": { - "big.js": "^5.2.2", - "emojis-list": "^3.0.0", - "json5": "^1.0.1" - } - } + "debug": "^4.1.0", + "depd": "^1.1.2", + "humanize-ms": "^1.2.1" } }, - "babel-plugin-dynamic-import-node": { - "version": "2.3.3", - "resolved": "https://registry.npmjs.org/babel-plugin-dynamic-import-node/-/babel-plugin-dynamic-import-node-2.3.3.tgz", - "integrity": "sha512-jZVI+s9Zg3IqA/kdi0i6UDCybUI3aSBLnglhYbSSjKlV7yF1F/5LWv8MakQmvYpnbJDS6fcBL2KzHSxNCMtWSQ==", + "aggregate-error": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/aggregate-error/-/aggregate-error-3.1.0.tgz", + "integrity": "sha512-4I7Td01quW/RpocfNayFdFVk1qSuoh0E7JrbRJ16nH01HhKFQ88INq9Sd+nd72zqRySlr9BmDA8xlEJ6vJMrYA==", "dev": true, "requires": { - "object.assign": "^4.1.0" + "clean-stack": "^2.0.0", + "indent-string": "^4.0.0" } }, - "babel-plugin-polyfill-corejs2": { - "version": "0.2.2", - "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-corejs2/-/babel-plugin-polyfill-corejs2-0.2.2.tgz", - "integrity": "sha512-kISrENsJ0z5dNPq5eRvcctITNHYXWOA4DUZRFYCz3jYCcvTb/A546LIddmoGNMVYg2U38OyFeNosQwI9ENTqIQ==", + "ajv": { + "version": "8.6.0", + "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.6.0.tgz", + "integrity": "sha512-cnUG4NSBiM4YFBxgZIj/In3/6KX+rQ2l2YPRVcvAMQGWEPKuXoPIhxzwqh31jA3IPbI4qEOp/5ILI4ynioXsGQ==", "dev": true, "requires": { - "@babel/compat-data": "^7.13.11", - "@babel/helper-define-polyfill-provider": "^0.2.2", - "semver": "^6.1.1" - }, - "dependencies": { - "semver": { - "version": "6.3.0", - "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz", - "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==", - "dev": true - } + "fast-deep-equal": "^3.1.1", + "json-schema-traverse": "^1.0.0", + "require-from-string": "^2.0.2", + "uri-js": "^4.2.2" } }, - "babel-plugin-polyfill-corejs3": { - "version": "0.2.4", - "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-corejs3/-/babel-plugin-polyfill-corejs3-0.2.4.tgz", - "integrity": "sha512-z3HnJE5TY/j4EFEa/qpQMSbcUJZ5JQi+3UFjXzn6pQCmIKc5Ug5j98SuYyH+m4xQnvKlMDIW4plLfgyVnd0IcQ==", + "ajv-formats": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/ajv-formats/-/ajv-formats-2.1.1.tgz", + "integrity": "sha512-Wx0Kx52hxE7C18hkMEggYlEifqWZtYaRgouJor+WMdPnQyEK13vgEWyVNup7SoeeoLMsr4kf5h6dOW11I15MUA==", "dev": true, "requires": { - "@babel/helper-define-polyfill-provider": "^0.2.2", - "core-js-compat": "^3.14.0" + "ajv": "^8.0.0" } }, - "babel-plugin-polyfill-regenerator": { - "version": "0.2.2", - "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-regenerator/-/babel-plugin-polyfill-regenerator-0.2.2.tgz", - "integrity": "sha512-Goy5ghsc21HgPDFtzRkSirpZVW35meGoTmTOb2bxqdl60ghub4xOidgNTHaZfQ2FaxQsKmwvXtOAkcIS4SMBWg==", + "ajv-keywords": { + "version": "3.5.2", + "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz", + "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==", + "dev": true + }, + "amdefine": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/amdefine/-/amdefine-1.0.1.tgz", + "integrity": "sha1-SlKCrBZHKek2Gbz9OtFR+BfOkfU=", + "optional": true + }, + "ansi-align": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/ansi-align/-/ansi-align-3.0.1.tgz", + "integrity": "sha512-IOfwwBF5iczOjp/WeY4YxyjqAFMQoZufdQWDd19SEExbVLNXqvpzSJ/M7Za4/sCPmQ0+GRquoA7bGcINcxew6w==", "dev": true, "requires": { - "@babel/helper-define-polyfill-provider": "^0.2.2" + "string-width": "^4.1.0" } }, - "babel-runtime": { - "version": "6.26.0", - "resolved": "https://registry.npmjs.org/babel-runtime/-/babel-runtime-6.26.0.tgz", - "integrity": "sha1-llxwWGaOgrVde/4E/yM3vItWR/4=", + "ansi-colors": { + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/ansi-colors/-/ansi-colors-4.1.1.tgz", + "integrity": "sha512-JoX0apGbHaUJBNl6yF+p6JAFYZ666/hhCGKN5t9QFjbJQKUU/g8MNbFDbvfrgKXvI1QpZplPOnwIo99lX/AAmA==", + "dev": true + }, + "ansi-cyan": { + "version": "0.1.1", + "resolved": "https://registry.npmjs.org/ansi-cyan/-/ansi-cyan-0.1.1.tgz", + "integrity": "sha1-U4rlKK+JgvKK4w2G8vF0VtJgmHM=", "dev": true, "requires": { - "core-js": "^2.4.0", - "regenerator-runtime": "^0.11.0" - }, - "dependencies": { - "regenerator-runtime": { - "version": "0.11.1", - "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz", - "integrity": "sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg==", - "dev": true - } + "ansi-wrap": "0.1.0" } }, - "bach": { - "version": "1.2.0", - "resolved": "https://registry.npmjs.org/bach/-/bach-1.2.0.tgz", - "integrity": "sha1-Szzpa/JxNPeaG0FKUcFONMO9mIA=", + "ansi-escapes": { + "version": "4.3.2", + "resolved": "https://registry.npmjs.org/ansi-escapes/-/ansi-escapes-4.3.2.tgz", + "integrity": "sha512-gKXj5ALrKWQLsYG9jlTRmR/xKluxHV+Z9QEwNIgCfM1/uwPMCuzVVnh5mwTd+OuBZcwSIMbqssNWRm1lE51QaQ==", "dev": true, "requires": { - "arr-filter": "^1.1.1", - "arr-flatten": "^1.0.1", - "arr-map": "^2.0.0", - "array-each": "^1.0.0", - "array-initial": "^1.0.0", - "array-last": "^1.1.1", - "async-done": "^1.2.2", - "async-settle": "^1.0.0", - "now-and-later": "^2.0.0" + "type-fest": "^0.21.3" } }, - "backo2": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/backo2/-/backo2-1.0.2.tgz", - "integrity": "sha1-MasayLEpNjRj41s+u2n038+6eUc=", - "dev": true - }, - "bail": { - "version": "1.0.5", - "resolved": "https://registry.npmjs.org/bail/-/bail-1.0.5.tgz", - "integrity": "sha512-xFbRxM1tahm08yHBP16MMjVUAvDaBMD38zsM9EMAUN61omwLmKlOpB/Zku5QkjZ8TZ4vn53pj+t518cH0S03RQ==", - "dev": true - }, - "balanced-match": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz", - "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==" - }, - "base": { - "version": "0.11.2", - "resolved": "https://registry.npmjs.org/base/-/base-0.11.2.tgz", - "integrity": "sha512-5T6P4xPgpp0YDFvSWwEZ4NoE3aM4QBQXDzmVbraCkFj8zHM+mba8SyqB5DbZWyR7mYHo6Y7BdQo3MoA4m0TeQg==", + "ansi-gray": { + "version": "0.1.1", + "resolved": "https://registry.npmjs.org/ansi-gray/-/ansi-gray-0.1.1.tgz", + "integrity": "sha1-KWLPVOyXksSFEKPetSRDaGHvclE=", "dev": true, "requires": { - "cache-base": "^1.0.1", - "class-utils": "^0.3.5", - "component-emitter": "^1.2.1", - "define-property": "^1.0.0", - "isobject": "^3.0.1", - "mixin-deep": "^1.2.0", - "pascalcase": "^0.1.1" - }, - "dependencies": { - "define-property": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/define-property/-/define-property-1.0.0.tgz", - "integrity": "sha1-dp66rz9KY6rTr56NMEybvnm/sOY=", - "dev": true, - "requires": { - "is-descriptor": "^1.0.0" - } - }, - "is-accessor-descriptor": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/is-accessor-descriptor/-/is-accessor-descriptor-1.0.0.tgz", - "integrity": "sha512-m5hnHTkcVsPfqx3AKlyttIPb7J+XykHvJP2B9bZDjlhLIoEq4XoK64Vg7boZlVWYK6LUY94dYPEE7Lh0ZkZKcQ==", - "dev": true, - "requires": { - "kind-of": "^6.0.0" - } - }, - "is-data-descriptor": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/is-data-descriptor/-/is-data-descriptor-1.0.0.tgz", - "integrity": "sha512-jbRXy1FmtAoCjQkVmIVYwuuqDFUbaOeDjmed1tOGPrsMhtJA4rD9tkgA0F1qJ3gRFRXcHYVkdeaP50Q5rE/jLQ==", - "dev": true, - "requires": { - "kind-of": "^6.0.0" - } - }, - "is-descriptor": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/is-descriptor/-/is-descriptor-1.0.2.tgz", - "integrity": "sha512-2eis5WqQGV7peooDyLmNEPUrps9+SXX5c9pL3xEB+4e9HnGuDa7mB7kHxHw4CbqS9k1T2hOH3miL8n8WtiYVtg==", - "dev": true, - "requires": { - "is-accessor-descriptor": "^1.0.0", - "is-data-descriptor": "^1.0.0", - "kind-of": "^6.0.2" - } - } + "ansi-wrap": "0.1.0" } }, - "base64-arraybuffer": { - "version": "0.1.4", - "resolved": "https://registry.npmjs.org/base64-arraybuffer/-/base64-arraybuffer-0.1.4.tgz", - "integrity": "sha1-mBjHngWbE1X5fgQooBfIOOkLqBI=", - "dev": true - }, - "base64-js": { - "version": "1.5.1", - "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz", - "integrity": "sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==", + "ansi-html-community": { + "version": "0.0.8", + "resolved": "https://registry.npmjs.org/ansi-html-community/-/ansi-html-community-0.0.8.tgz", + "integrity": "sha512-1APHAyr3+PCamwNw3bXCPp4HFLONZt/yIH0sZp0/469KWNTEy+qN5jQ3GVX6DMZ1UXAi34yVwtTeaG/HpBuuzw==", "dev": true }, - "base64id": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/base64id/-/base64id-2.0.0.tgz", - "integrity": "sha512-lGe34o6EHj9y3Kts9R4ZYs/Gr+6N7MCaMlIFA3F1R2O5/m7K06AxfSeO5530PEERE6/WyEg3lsuyw4GHlPZHog==", - "dev": true + "ansi-red": { + "version": "0.1.1", + "resolved": "https://registry.npmjs.org/ansi-red/-/ansi-red-0.1.1.tgz", + "integrity": "sha1-jGOPnRCAgAo1PJwoyKgcpHBdlGw=", + "dev": true, + "requires": { + "ansi-wrap": "0.1.0" + } }, - "batch": { - "version": "0.6.1", - "resolved": "https://registry.npmjs.org/batch/-/batch-0.6.1.tgz", - "integrity": "sha1-3DQxT05nkxgJP8dgJyUl+UvyXBY=", + "ansi-regex": { + "version": "5.0.1", + "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz", + "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==", "dev": true }, - "bcrypt-pbkdf": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/bcrypt-pbkdf/-/bcrypt-pbkdf-1.0.2.tgz", - "integrity": "sha1-pDAdOJtqQ/m2f/PKEaP2Y342Dp4=", + "ansi-styles": { + "version": "3.2.1", + "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz", + "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==", "dev": true, "requires": { - "tweetnacl": "^0.14.3" + "color-convert": "^1.9.0" } }, - "beeper": { - "version": "1.1.1", - "resolved": "https://registry.npmjs.org/beeper/-/beeper-1.1.1.tgz", - "integrity": "sha1-5tXqjF2tABMEpwsiY4RH9pyy+Ak=", + "ansi-wrap": { + "version": "0.1.0", + "resolved": "https://registry.npmjs.org/ansi-wrap/-/ansi-wrap-0.1.0.tgz", + "integrity": "sha1-qCJQ3bABXponyoLoLqYDu/pF768=", "dev": true }, - "big.js": { - "version": "5.2.2", - "resolved": "https://registry.npmjs.org/big.js/-/big.js-5.2.2.tgz", - "integrity": "sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ==", + "anymatch": { + "version": "3.1.2", + "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.2.tgz", + "integrity": "sha512-P43ePfOAIupkguHUycrc4qJ9kz8ZiuOUijaETwX7THt0Y/GNK7v0aa8rY816xWjZ7rJdA5XdMcpVFTKMq+RvWg==", + "dev": true, + "requires": { + "normalize-path": "^3.0.0", + "picomatch": "^2.0.4" + } + }, + "ap": { + "version": "0.2.0", + "resolved": "https://registry.npmjs.org/ap/-/ap-0.2.0.tgz", + "integrity": "sha1-rglCYAspkS8NKxTsYMRejzMLYRA=", "dev": true }, - "bin-build": { + "app-root-path": { "version": "3.0.0", - "resolved": "https://registry.npmjs.org/bin-build/-/bin-build-3.0.0.tgz", - "integrity": "sha512-jcUOof71/TNAI2uM5uoUaDq2ePcVBQ3R/qhxAz1rX7UfvduAL/RXD3jXzvn8cVcDJdGVkiR1shal3OH0ImpuhA==", + "resolved": "https://registry.npmjs.org/app-root-path/-/app-root-path-3.0.0.tgz", + "integrity": "sha512-qMcx+Gy2UZynHjOHOIXPNvpf+9cjvk3cWrBBK7zg4gH9+clobJRb9NGzcT7mQTcV/6Gm/1WelUtqxVXnNlrwcw==", + "dev": true + }, + "append-buffer": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/append-buffer/-/append-buffer-1.0.2.tgz", + "integrity": "sha1-2CIM9GYIFSXv6lBhTz3mUU36WPE=", "dev": true, "requires": { - "decompress": "^4.0.0", - "download": "^6.2.2", - "execa": "^0.7.0", - "p-map-series": "^1.0.0", - "tempfile": "^2.0.0" - }, - "dependencies": { - "cross-spawn": { - "version": "5.1.0", - "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-5.1.0.tgz", - "integrity": "sha1-6L0O/uWPz/b4+UUQoKVUu/ojVEk=", - "dev": true, - "requires": { - "lru-cache": "^4.0.1", - "shebang-command": "^1.2.0", - "which": "^1.2.9" - } - }, - "execa": { - "version": "0.7.0", - "resolved": "https://registry.npmjs.org/execa/-/execa-0.7.0.tgz", - "integrity": "sha1-lEvs00zEHuMqY6n68nrVpl/Fl3c=", - "dev": true, - "requires": { - "cross-spawn": "^5.0.1", - "get-stream": "^3.0.0", - "is-stream": "^1.1.0", - "npm-run-path": "^2.0.0", - "p-finally": "^1.0.0", - "signal-exit": "^3.0.0", - "strip-eof": "^1.0.0" - } - }, - "get-stream": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-3.0.0.tgz", - "integrity": "sha1-jpQ9E1jcN1VQVOy+LtsFqhdO3hQ=", - "dev": true - }, - "lru-cache": { - "version": "4.1.5", - "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-4.1.5.tgz", - "integrity": "sha512-sWZlbEP2OsHNkXrMl5GYk/jKk70MBng6UU4YI/qGDYbgf6YbP4EvmqISbXCoJiRKs+1bSpFHVgQxvJ17F2li5g==", - "dev": true, - "requires": { - "pseudomap": "^1.0.2", - "yallist": "^2.1.2" - } - }, - "yallist": { - "version": "2.1.2", - "resolved": "https://registry.npmjs.org/yallist/-/yallist-2.1.2.tgz", - "integrity": "sha1-HBH5IY8HYImkfdUS+TxmmaaoHVI=", - "dev": true - } + "buffer-equal": "^1.0.0" } }, - "bin-check": { - "version": "4.1.0", - "resolved": "https://registry.npmjs.org/bin-check/-/bin-check-4.1.0.tgz", - "integrity": "sha512-b6weQyEUKsDGFlACWSIOfveEnImkJyK/FGW6FAG42loyoquvjdtOIqO6yBFzHyqyVVhNgNkQxxx09SFLK28YnA==", + "aproba": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/aproba/-/aproba-1.2.0.tgz", + "integrity": "sha512-Y9J6ZjXtoYh8RnXVCMOU/ttDmk1aBjunq9vO0ta5x85WDQiQfUF9sIPBITdbiiIVcBo03Hi3jMxigBtsddlXRw==", + "dev": true + }, + "arch": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/arch/-/arch-2.2.0.tgz", + "integrity": "sha512-Of/R0wqp83cgHozfIYLbBMnej79U/SVGOOyuB3VVFv1NRM/PSFMK12x9KVtiYzJqmnU5WR2qp0Z5rHb7sWGnFQ==", + "dev": true + }, + "archive-type": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/archive-type/-/archive-type-4.0.0.tgz", + "integrity": "sha1-+S5yIzBW38aWlHJ0nCZ72wRrHXA=", "dev": true, "requires": { - "execa": "^0.7.0", - "executable": "^4.1.0" + "file-type": "^4.2.0" }, "dependencies": { - "cross-spawn": { - "version": "5.1.0", - "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-5.1.0.tgz", - "integrity": "sha1-6L0O/uWPz/b4+UUQoKVUu/ojVEk=", - "dev": true, - "requires": { - "lru-cache": "^4.0.1", - "shebang-command": "^1.2.0", - "which": "^1.2.9" - } - }, - "execa": { - "version": "0.7.0", - "resolved": "https://registry.npmjs.org/execa/-/execa-0.7.0.tgz", - "integrity": "sha1-lEvs00zEHuMqY6n68nrVpl/Fl3c=", - "dev": true, - "requires": { - "cross-spawn": "^5.0.1", - "get-stream": "^3.0.0", - "is-stream": "^1.1.0", - "npm-run-path": "^2.0.0", - "p-finally": "^1.0.0", - "signal-exit": "^3.0.0", - "strip-eof": "^1.0.0" - } - }, - "get-stream": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-3.0.0.tgz", - "integrity": "sha1-jpQ9E1jcN1VQVOy+LtsFqhdO3hQ=", - "dev": true - }, - "lru-cache": { - "version": "4.1.5", - "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-4.1.5.tgz", - "integrity": "sha512-sWZlbEP2OsHNkXrMl5GYk/jKk70MBng6UU4YI/qGDYbgf6YbP4EvmqISbXCoJiRKs+1bSpFHVgQxvJ17F2li5g==", - "dev": true, - "requires": { - "pseudomap": "^1.0.2", - "yallist": "^2.1.2" - } - }, - "yallist": { - "version": "2.1.2", - "resolved": "https://registry.npmjs.org/yallist/-/yallist-2.1.2.tgz", - "integrity": "sha1-HBH5IY8HYImkfdUS+TxmmaaoHVI=", + "file-type": { + "version": "4.4.0", + "resolved": "https://registry.npmjs.org/file-type/-/file-type-4.4.0.tgz", + "integrity": "sha1-G2AOX8ofvcboDApwxxyNul95BsU=", "dev": true } } }, - "bin-version": { - "version": "3.1.0", - "resolved": "https://registry.npmjs.org/bin-version/-/bin-version-3.1.0.tgz", - "integrity": "sha512-Mkfm4iE1VFt4xd4vH+gx+0/71esbfus2LsnCGe8Pi4mndSPyT+NGES/Eg99jx8/lUGWfu3z2yuB/bt5UB+iVbQ==", + "archy": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/archy/-/archy-1.0.0.tgz", + "integrity": "sha1-+cjBN1fMHde8N5rHeyxipcKGjEA=", + "dev": true + }, + "are-we-there-yet": { + "version": "1.1.7", + "resolved": "https://registry.npmjs.org/are-we-there-yet/-/are-we-there-yet-1.1.7.tgz", + "integrity": "sha512-nxwy40TuMiUGqMyRHgCSWZ9FM4VAoRP4xUYSTv5ImRog+h9yISPbVH7H8fASCIzYn9wlEv4zvFL7uKDMCFQm3g==", "dev": true, "requires": { - "execa": "^1.0.0", - "find-versions": "^3.0.0" + "delegates": "^1.0.0", + "readable-stream": "^2.0.6" } }, - "bin-version-check": { + "argparse": { + "version": "1.0.10", + "resolved": "https://registry.npmjs.org/argparse/-/argparse-1.0.10.tgz", + "integrity": "sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==", + "requires": { + "sprintf-js": "~1.0.2" + } + }, + "aria-query": { + "version": "4.2.2", + "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-4.2.2.tgz", + "integrity": "sha512-o/HelwhuKpTj/frsOsbNLNgnNGVIFsVP/SW2BSF14gVl7kAfMOJ6/8wUAUvG1R1NHKrfG+2sHZTu0yauT1qBrA==", + "dev": true, + "requires": { + "@babel/runtime": "^7.10.2", + "@babel/runtime-corejs3": "^7.10.2" + } + }, + "arr-diff": { "version": "4.0.0", - "resolved": "https://registry.npmjs.org/bin-version-check/-/bin-version-check-4.0.0.tgz", - "integrity": "sha512-sR631OrhC+1f8Cvs8WyVWOA33Y8tgwjETNPyyD/myRBXLkfS/vl74FmH/lFcRl9KY3zwGh7jFhvyk9vV3/3ilQ==", + "resolved": "https://registry.npmjs.org/arr-diff/-/arr-diff-4.0.0.tgz", + "integrity": "sha1-1kYQdP6/7HHn4VI1dhoyml3HxSA=", + "dev": true + }, + "arr-filter": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/arr-filter/-/arr-filter-1.1.2.tgz", + "integrity": "sha1-Q/3d0JHo7xGqTEXZzcGOLf8XEe4=", "dev": true, "requires": { - "bin-version": "^3.0.0", - "semver": "^5.6.0", - "semver-truncate": "^1.1.2" - }, - "dependencies": { - "semver": { - "version": "5.7.1", - "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz", - "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==", - "dev": true - } + "make-iterator": "^1.0.0" } }, - "bin-wrapper": { - "version": "4.1.0", - "resolved": "https://registry.npmjs.org/bin-wrapper/-/bin-wrapper-4.1.0.tgz", - "integrity": "sha512-hfRmo7hWIXPkbpi0ZltboCMVrU+0ClXR/JgbCKKjlDjQf6igXa7OwdqNcFWQZPZTgiY7ZpzE3+LjjkLiTN2T7Q==", + "arr-flatten": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/arr-flatten/-/arr-flatten-1.1.0.tgz", + "integrity": "sha512-L3hKV5R/p5o81R7O02IGnwpDmkp6E982XhtbuwSe3O4qOtMMMtodicASA1Cny2U+aCXcNpml+m4dPsvsJ3jatg==", + "dev": true + }, + "arr-map": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/arr-map/-/arr-map-2.0.2.tgz", + "integrity": "sha1-Onc0X/wc814qkYJWAfnljy4kysQ=", "dev": true, "requires": { - "bin-check": "^4.1.0", - "bin-version-check": "^4.0.0", - "download": "^7.1.0", - "import-lazy": "^3.1.0", - "os-filter-obj": "^2.0.0", - "pify": "^4.0.1" - }, - "dependencies": { - "download": { - "version": "7.1.0", - "resolved": "https://registry.npmjs.org/download/-/download-7.1.0.tgz", - "integrity": "sha512-xqnBTVd/E+GxJVrX5/eUJiLYjCGPwMpdL+jGhGU57BvtcA7wwhtHVbXBeUk51kOpW3S7Jn3BQbN9Q1R1Km2qDQ==", - "dev": true, - "requires": { - "archive-type": "^4.0.0", - "caw": "^2.0.1", - "content-disposition": "^0.5.2", - "decompress": "^4.2.0", - "ext-name": "^5.0.0", - "file-type": "^8.1.0", - "filenamify": "^2.0.0", - "get-stream": "^3.0.0", - "got": "^8.3.1", - "make-dir": "^1.2.0", - "p-event": "^2.1.0", - "pify": "^3.0.0" - }, - "dependencies": { - "pify": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/pify/-/pify-3.0.0.tgz", - "integrity": "sha1-5aSs0sEB/fPZpNB/DbxNtJ3SgXY=", - "dev": true - } - } - }, - "file-type": { - "version": "8.1.0", - "resolved": "https://registry.npmjs.org/file-type/-/file-type-8.1.0.tgz", - "integrity": "sha512-qyQ0pzAy78gVoJsmYeNgl8uH8yKhr1lVhW7JbzJmnlRi0I4R2eEDEJZVKG8agpDnLpacwNbDhLNG/LMdxHD2YQ==", - "dev": true - }, - "get-stream": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-3.0.0.tgz", - "integrity": "sha1-jpQ9E1jcN1VQVOy+LtsFqhdO3hQ=", - "dev": true - }, - "got": { - "version": "8.3.2", - "resolved": "https://registry.npmjs.org/got/-/got-8.3.2.tgz", - "integrity": "sha512-qjUJ5U/hawxosMryILofZCkm3C84PLJS/0grRIpjAwu+Lkxxj5cxeCU25BG0/3mDSpXKTyZr8oh8wIgLaH0QCw==", - "dev": true, - "requires": { - "@sindresorhus/is": "^0.7.0", - "cacheable-request": "^2.1.1", - "decompress-response": "^3.3.0", - "duplexer3": "^0.1.4", - "get-stream": "^3.0.0", - "into-stream": "^3.1.0", - "is-retry-allowed": "^1.1.0", - "isurl": "^1.0.0-alpha5", - "lowercase-keys": "^1.0.0", - "mimic-response": "^1.0.0", - "p-cancelable": "^0.4.0", - "p-timeout": "^2.0.1", - "pify": "^3.0.0", - "safe-buffer": "^5.1.1", - "timed-out": "^4.0.1", - "url-parse-lax": "^3.0.0", - "url-to-options": "^1.0.1" - }, - "dependencies": { - "pify": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/pify/-/pify-3.0.0.tgz", - "integrity": "sha1-5aSs0sEB/fPZpNB/DbxNtJ3SgXY=", - "dev": true - } - } - }, - "make-dir": { - "version": "1.3.0", - "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-1.3.0.tgz", - "integrity": "sha512-2w31R7SJtieJJnQtGc7RVL2StM2vGYVfqUOvUDxH6bC6aJTxPxTF0GnIgCyu7tjockiUWAYQRbxa7vKn34s5sQ==", - "dev": true, - "requires": { - "pify": "^3.0.0" - }, - "dependencies": { - "pify": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/pify/-/pify-3.0.0.tgz", - "integrity": "sha1-5aSs0sEB/fPZpNB/DbxNtJ3SgXY=", - "dev": true - } - } - }, - "p-cancelable": { - "version": "0.4.1", - "resolved": "https://registry.npmjs.org/p-cancelable/-/p-cancelable-0.4.1.tgz", - "integrity": "sha512-HNa1A8LvB1kie7cERyy21VNeHb2CWJJYqyyC2o3klWFfMGlFmWv2Z7sFgZH8ZiaYL95ydToKTFVXgMV/Os0bBQ==", - "dev": true - }, - "p-event": { - "version": "2.3.1", - "resolved": "https://registry.npmjs.org/p-event/-/p-event-2.3.1.tgz", - "integrity": "sha512-NQCqOFhbpVTMX4qMe8PF8lbGtzZ+LCiN7pcNrb/413Na7+TRoe1xkKUzuWa/YEJdGQ0FvKtj35EEbDoVPO2kbA==", - "dev": true, - "requires": { - "p-timeout": "^2.0.1" - } - }, - "p-timeout": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/p-timeout/-/p-timeout-2.0.1.tgz", - "integrity": "sha512-88em58dDVB/KzPEx1X0N3LwFfYZPyDc4B6eF38M1rk9VTZMbxXXgjugz8mmwpS9Ox4BDZ+t6t3QP5+/gazweIA==", - "dev": true, - "requires": { - "p-finally": "^1.0.0" - } - }, - "prepend-http": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/prepend-http/-/prepend-http-2.0.0.tgz", - "integrity": "sha1-6SQ0v6XqjBn0HN/UAddBo8gZ2Jc=", - "dev": true - }, - "url-parse-lax": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/url-parse-lax/-/url-parse-lax-3.0.0.tgz", - "integrity": "sha1-FrXK/Afb42dsGxmZF3gj1lA6yww=", - "dev": true, - "requires": { - "prepend-http": "^2.0.0" - } - } + "make-iterator": "^1.0.0" } }, - "binary-extensions": { - "version": "2.2.0", - "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz", - "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==", + "arr-union": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/arr-union/-/arr-union-3.1.0.tgz", + "integrity": "sha1-45sJrqne+Gao8gbiiK9jkZuuOcQ=", "dev": true }, - "bl": { - "version": "4.1.0", - "resolved": "https://registry.npmjs.org/bl/-/bl-4.1.0.tgz", - "integrity": "sha512-1W07cM9gS6DcLperZfFSj+bWLtaPGSOHWhPiGzXmvVJbRLdG82sH/Kn8EtW1VqWVA54AKf2h5k5BbnIbwF3h6w==", - "dev": true, - "requires": { - "buffer": "^5.5.0", - "inherits": "^2.0.4", - "readable-stream": "^3.4.0" - }, - "dependencies": { - "readable-stream": { - "version": "3.6.0", - "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.0.tgz", - "integrity": "sha512-BViHy7LKeTz4oNnkcLJ+lVSL6vpiFeX6/d3oSH8zCW7UxP2onchk+vTGB143xuFjHS3deTgkKoXXymXqymiIdA==", - "dev": true, - "requires": { - "inherits": "^2.0.3", - "string_decoder": "^1.1.1", - "util-deprecate": "^1.0.1" - } - } - } - }, - "blob": { - "version": "0.0.5", - "resolved": "https://registry.npmjs.org/blob/-/blob-0.0.5.tgz", - "integrity": "sha512-gaqbzQPqOoamawKg0LGVd7SzLgXS+JH61oWprSLH+P+abTczqJbhTR8CmJ2u9/bUYNmHTGJx/UEmn6doAvvuig==", + "array-differ": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/array-differ/-/array-differ-1.0.0.tgz", + "integrity": "sha1-7/UuN1gknTO+QCuLuOVkuytdQDE=", "dev": true }, - "blocking-proxy": { + "array-each": { "version": "1.0.1", - "resolved": "https://registry.npmjs.org/blocking-proxy/-/blocking-proxy-1.0.1.tgz", - "integrity": "sha512-KE8NFMZr3mN2E0HcvCgRtX7DjhiIQrwle+nSVJVC/yqFb9+xznHl2ZcoBp2L9qzkI4t4cBFJ1efXF8Dwi132RA==", + "resolved": "https://registry.npmjs.org/array-each/-/array-each-1.0.1.tgz", + "integrity": "sha1-p5SvDAWrF1KEbudTofIRoFugxE8=", + "dev": true + }, + "array-flatten": { + "version": "2.1.2", + "resolved": "https://registry.npmjs.org/array-flatten/-/array-flatten-2.1.2.tgz", + "integrity": "sha512-hNfzcOV8W4NdualtqBFPyVO+54DSJuZGY9qT4pRroB6S9e3iiido2ISIC5h9R2sPJ8H3FHCIiEnsv1lPXO3KtQ==", + "dev": true + }, + "array-includes": { + "version": "3.1.3", + "resolved": "https://registry.npmjs.org/array-includes/-/array-includes-3.1.3.tgz", + "integrity": "sha512-gcem1KlBU7c9rB+Rq8/3PPKsK2kjqeEBa3bD5kkQo4nYlOHQCJqIJFqBXDEfwaRuYTT4E+FxA9xez7Gf/e3Q7A==", "dev": true, "requires": { - "minimist": "^1.2.0" + "call-bind": "^1.0.2", + "define-properties": "^1.1.3", + "es-abstract": "^1.18.0-next.2", + "get-intrinsic": "^1.1.1", + "is-string": "^1.0.5" } }, - "bluebird": { - "version": "2.11.0", - "resolved": "https://registry.npmjs.org/bluebird/-/bluebird-2.11.0.tgz", - "integrity": "sha1-U0uQM8AiyVecVro7Plpcqvu2UOE=", - "dev": true - }, - "body-parser": { - "version": "1.19.0", - "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.19.0.tgz", - "integrity": "sha512-dhEPs72UPbDnAQJ9ZKMNTP6ptJaionhP5cBb541nXPlW60Jepo9RV/a4fX4XWW9CuFNK22krhrj1+rgzifNCsw==", + "array-initial": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/array-initial/-/array-initial-1.1.0.tgz", + "integrity": "sha1-L6dLJnOTccOUe9enrcc74zSz15U=", "dev": true, "requires": { - "bytes": "3.1.0", - "content-type": "~1.0.4", - "debug": "2.6.9", - "depd": "~1.1.2", - "http-errors": "1.7.2", - "iconv-lite": "0.4.24", - "on-finished": "~2.3.0", - "qs": "6.7.0", - "raw-body": "2.4.0", - "type-is": "~1.6.17" + "array-slice": "^1.0.0", + "is-number": "^4.0.0" }, "dependencies": { - "bytes": { - "version": "3.1.0", - "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.0.tgz", - "integrity": "sha512-zauLjrfCG+xvoyaqLoV8bLVXXNGC4JqlxFCutSDWA6fJrTo2ZuvLYTqZ7aHBLZSMOopbzwv8f+wZcVzfVTI2Dg==", - "dev": true - }, - "debug": { - "version": "2.6.9", - "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz", - "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==", - "dev": true, - "requires": { - "ms": "2.0.0" - } - }, - "ms": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz", - "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=", + "is-number": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/is-number/-/is-number-4.0.0.tgz", + "integrity": "sha512-rSklcAIlf1OmFdyAqbnWTLVelsQ58uvZ66S/ZyawjWqIviTWCjg2PzVGw8WUA+nNuPTqb4wgA+NszrJ+08LlgQ==", "dev": true } } }, - "bonjour": { - "version": "3.5.0", - "resolved": "https://registry.npmjs.org/bonjour/-/bonjour-3.5.0.tgz", - "integrity": "sha1-jokKGD2O6aI5OzhExpGkK897yfU=", + "array-last": { + "version": "1.3.0", + "resolved": "https://registry.npmjs.org/array-last/-/array-last-1.3.0.tgz", + "integrity": "sha512-eOCut5rXlI6aCOS7Z7kCplKRKyiFQ6dHFBem4PwlwKeNFk2/XxTrhRh5T9PyaEWGy/NHTZWbY+nsZlNFJu9rYg==", "dev": true, "requires": { - "array-flatten": "^2.1.0", - "deep-equal": "^1.0.1", - "dns-equal": "^1.0.0", - "dns-txt": "^2.0.2", - "multicast-dns": "^6.0.1", - "multicast-dns-service-types": "^1.1.0" + "is-number": "^4.0.0" + }, + "dependencies": { + "is-number": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/is-number/-/is-number-4.0.0.tgz", + "integrity": "sha512-rSklcAIlf1OmFdyAqbnWTLVelsQ58uvZ66S/ZyawjWqIviTWCjg2PzVGw8WUA+nNuPTqb4wgA+NszrJ+08LlgQ==", + "dev": true + } } }, - "boolbase": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz", - "integrity": "sha1-aN/1++YMUes3cl6p4+0xDcwed24=", + "array-slice": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/array-slice/-/array-slice-1.1.0.tgz", + "integrity": "sha512-B1qMD3RBP7O8o0H2KbrXDyB0IccejMF15+87Lvlor12ONPRHP6gTjXMNkt/d3ZuOGbAe66hFmaCfECI24Ufp6w==", "dev": true }, - "boxen": { - "version": "4.2.0", - "resolved": "https://registry.npmjs.org/boxen/-/boxen-4.2.0.tgz", - "integrity": "sha512-eB4uT9RGzg2odpER62bBwSLvUeGC+WbRjjyyFhGsKnc8wp/m0+hQsMUvUe3H2V0D5vw0nBdO1hCJoZo5mKeuIQ==", - "dev": true, + "array-sort": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/array-sort/-/array-sort-1.0.0.tgz", + "integrity": "sha512-ihLeJkonmdiAsD7vpgN3CRcx2J2S0TiYW+IS/5zHBI7mKUq3ySvBdzzBfD236ubDBQFiiyG3SWCPc+msQ9KoYg==", + "dev": true, "requires": { - "ansi-align": "^3.0.0", - "camelcase": "^5.3.1", - "chalk": "^3.0.0", - "cli-boxes": "^2.2.0", - "string-width": "^4.1.0", - "term-size": "^2.1.0", - "type-fest": "^0.8.1", - "widest-line": "^3.1.0" + "default-compare": "^1.0.0", + "get-value": "^2.0.6", + "kind-of": "^5.0.2" }, "dependencies": { - "ansi-styles": { - "version": "4.3.0", - "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz", - "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==", - "dev": true, - "requires": { - "color-convert": "^2.0.1" - } - }, - "chalk": { + "kind-of": { + "version": "5.1.0", + "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-5.1.0.tgz", + "integrity": "sha512-NGEErnH6F2vUuXDh+OlbcKW7/wOcfdRHaZ7VWtqCztfHri/++YKmP51OdWeGPuqCOba6kk2OTe5d02VmTB80Pw==", + "dev": true + } + } + }, + "array-union": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/array-union/-/array-union-2.1.0.tgz", + "integrity": "sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw==", + "dev": true + }, + "array-uniq": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/array-uniq/-/array-uniq-1.0.3.tgz", + "integrity": "sha1-r2rId6Jcx/dOBYiUdThY39sk/bY=", + "dev": true + }, + "array-unique": { + "version": "0.3.2", + "resolved": "https://registry.npmjs.org/array-unique/-/array-unique-0.3.2.tgz", + "integrity": "sha1-qJS3XUvE9s1nnvMkSp/Y9Gri1Cg=", + "dev": true + }, + "array.prototype.flat": { + "version": "1.2.4", + "resolved": "https://registry.npmjs.org/array.prototype.flat/-/array.prototype.flat-1.2.4.tgz", + "integrity": "sha512-4470Xi3GAPAjZqFcljX2xzckv1qeKPizoNkiS0+O4IoPR2ZNpcjE0pkhdihlDouK+x6QOast26B4Q/O9DJnwSg==", + "dev": true, + "requires": { + "call-bind": "^1.0.0", + "define-properties": "^1.1.3", + "es-abstract": "^1.18.0-next.1" + } + }, + "arraybuffer.slice": { + "version": "0.0.7", + "resolved": "https://registry.npmjs.org/arraybuffer.slice/-/arraybuffer.slice-0.0.7.tgz", + "integrity": "sha512-wGUIVQXuehL5TCqQun8OW81jGzAWycqzFF8lFp+GOM5BXLYj3bKNsYC4daB7n6XjCqxQA/qgTJ+8ANR3acjrog==", + "dev": true + }, + "arrify": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/arrify/-/arrify-1.0.1.tgz", + "integrity": "sha1-iYUI2iIm84DfkEcoRWhJwVAaSw0=", + "dev": true + }, + "asap": { + "version": "2.0.6", + "resolved": "https://registry.npmjs.org/asap/-/asap-2.0.6.tgz", + "integrity": "sha1-5QNHYR1+aQlDIIu9r+vLwvuGbUY=", + "dev": true + }, + "asn1": { + "version": "0.2.4", + "resolved": "https://registry.npmjs.org/asn1/-/asn1-0.2.4.tgz", + "integrity": "sha512-jxwzQpLQjSmWXgwaCZE9Nz+glAG01yF1QnWgbhGwHI5A6FRIEY6IVqtHhIepHqI7/kyEyQEagBC5mBEFlIYvdg==", + "dev": true, + "requires": { + "safer-buffer": "~2.1.0" + } + }, + "assert-plus": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/assert-plus/-/assert-plus-1.0.0.tgz", + "integrity": "sha1-8S4PPF13sLHN2RRpQuTpbB5N1SU=", + "dev": true + }, + "assign-symbols": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/assign-symbols/-/assign-symbols-1.0.0.tgz", + "integrity": "sha1-WWZ/QfrdTyDMvCu5a41Pf3jsA2c=", + "dev": true + }, + "ast-types-flow": { + "version": "0.0.7", + "resolved": "https://registry.npmjs.org/ast-types-flow/-/ast-types-flow-0.0.7.tgz", + "integrity": "sha1-9wtzXGvKGlycItmCw+Oef+ujva0=", + "dev": true + }, + "astral-regex": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/astral-regex/-/astral-regex-2.0.0.tgz", + "integrity": "sha512-Z7tMw1ytTXt5jqMcOP+OQteU1VuNK9Y02uuJtKQ1Sv69jXQKKg5cibLwGJow8yzZP+eAc18EmLGPal0bp36rvQ==", + "dev": true + }, + "async": { + "version": "1.5.2", + "resolved": "https://registry.npmjs.org/async/-/async-1.5.2.tgz", + "integrity": "sha1-7GphrlZIDAw8skHJVhjiCJL5Zyo=" + }, + "async-done": { + "version": "1.3.2", + "resolved": "https://registry.npmjs.org/async-done/-/async-done-1.3.2.tgz", + "integrity": "sha512-uYkTP8dw2og1tu1nmza1n1CMW0qb8gWWlwqMmLb7MhBVs4BXrFziT6HXUd+/RlRA/i4H9AkofYloUbs1fwMqlw==", + "dev": true, + "requires": { + "end-of-stream": "^1.1.0", + "once": "^1.3.2", + "process-nextick-args": "^2.0.0", + "stream-exhaust": "^1.0.1" + } + }, + "async-each": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/async-each/-/async-each-1.0.3.tgz", + "integrity": "sha512-z/WhQ5FPySLdvREByI2vZiTWwCnF0moMJ1hK9YQwDTHKh6I7/uSckMetoRGb5UBZPC1z0jlw+n/XCgjeH7y1AQ==", + "dev": true + }, + "async-each-series": { + "version": "0.1.1", + "resolved": "https://registry.npmjs.org/async-each-series/-/async-each-series-0.1.1.tgz", + "integrity": "sha1-dhfBkXQB/Yykooqtzj266Yr+tDI=", + "dev": true + }, + "async-settle": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/async-settle/-/async-settle-1.0.0.tgz", + "integrity": "sha1-HQqRS7Aldb7IqPOnTlCA9yssDGs=", + "dev": true, + "requires": { + "async-done": "^1.2.2" + } + }, + "asynckit": { + "version": "0.4.0", + "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz", + "integrity": "sha1-x57Zf380y48robyXkLzDZkdLS3k=", + "dev": true + }, + "at-least-node": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/at-least-node/-/at-least-node-1.0.0.tgz", + "integrity": "sha512-+q/t7Ekv1EDY2l6Gda6LLiX14rU9TV20Wa3ofeQmwPFZbOMo9DXrLbOjFaaclkXKWidIaopwAObQDqwWtGUjqg==", + "dev": true + }, + "atob": { + "version": "2.1.2", + "resolved": "https://registry.npmjs.org/atob/-/atob-2.1.2.tgz", + "integrity": "sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg==", + "dev": true + }, + "autoprefixer": { + "version": "9.8.6", + "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-9.8.6.tgz", + "integrity": "sha512-XrvP4VVHdRBCdX1S3WXVD8+RyG9qeb1D5Sn1DeLiG2xfSpzellk5k54xbUERJ3M5DggQxes39UGOTP8CFrEGbg==", + "dev": true, + "requires": { + "browserslist": "^4.12.0", + "caniuse-lite": "^1.0.30001109", + "colorette": "^1.2.1", + "normalize-range": "^0.1.2", + "num2fraction": "^1.2.2", + "postcss": "^7.0.32", + "postcss-value-parser": "^4.1.0" + }, + "dependencies": { + "has-flag": { "version": "3.0.0", - "resolved": "https://registry.npmjs.org/chalk/-/chalk-3.0.0.tgz", - "integrity": "sha512-4D3B6Wf41KOYRFdszmDqMCGq5VV/uMAB273JILmO+3jAlh8X4qDtdtgCR3fxtbLEMzSx22QdhnDcJvu2u1fVwg==", - "dev": true, - "requires": { - "ansi-styles": "^4.1.0", - "supports-color": "^7.1.0" - } + "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz", + "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=", + "dev": true }, - "color-convert": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", - "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==", + "postcss": { + "version": "7.0.36", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.36.tgz", + "integrity": "sha512-BebJSIUMwJHRH0HAQoxN4u1CN86glsrwsW0q7T+/m44eXOUAxSNdHRkNZPYz5vVUbg17hFgOQDE7fZk7li3pZw==", "dev": true, "requires": { - "color-name": "~1.1.4" + "chalk": "^2.4.2", + "source-map": "^0.6.1", + "supports-color": "^6.1.0" } }, - "color-name": { - "version": "1.1.4", - "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz", - "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==", - "dev": true - }, - "has-flag": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz", - "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==", + "source-map": { + "version": "0.6.1", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", + "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", "dev": true }, "supports-color": { - "version": "7.2.0", - "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz", - "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==", + "version": "6.1.0", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz", + "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==", "dev": true, "requires": { - "has-flag": "^4.0.0" + "has-flag": "^3.0.0" } - }, - "type-fest": { - "version": "0.8.1", - "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.8.1.tgz", - "integrity": "sha512-4dbzIzqvjtgiM5rw1k5rEHtBANKmdudhGyBEajN01fEyhaAIhsoKNy6y7+IN93IfpFtwY9iqi7kD+xwKhQsNJA==", - "dev": true } } }, - "brace-expansion": { - "version": "1.1.11", - "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz", - "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==", - "requires": { - "balanced-match": "^1.0.0", - "concat-map": "0.0.1" - } + "aws-sign2": { + "version": "0.7.0", + "resolved": "https://registry.npmjs.org/aws-sign2/-/aws-sign2-0.7.0.tgz", + "integrity": "sha1-tG6JCTSpWR8tL2+G1+ap8bP+dqg=", + "dev": true }, - "braces": { - "version": "3.0.2", - "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz", - "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==", - "dev": true, - "requires": { - "fill-range": "^7.0.1" + "aws4": { + "version": "1.11.0", + "resolved": "https://registry.npmjs.org/aws4/-/aws4-1.11.0.tgz", + "integrity": "sha512-xh1Rl34h6Fi1DC2WWKfxUTVqRsNnr6LsKz2+hfwDxQJWmrx8+c7ylaqBMcHfl1U1r2dsifOvKX3LQuLNZ+XSvA==", + "dev": true + }, + "axios": { + "version": "0.21.4", + "resolved": "https://registry.npmjs.org/axios/-/axios-0.21.4.tgz", + "integrity": "sha512-ut5vewkiu8jjGBdqpM44XxjuCjq9LAKeHVmoVfHVzy8eHgxxq8SbAVQNovDA8mVi05kP0Ea/n/UzcSHcTJQfNg==", + "dev": true, + "requires": { + "follow-redirects": "^1.14.0" } }, - "browser-sync": { - "version": "2.27.4", - "resolved": "https://registry.npmjs.org/browser-sync/-/browser-sync-2.27.4.tgz", - "integrity": "sha512-zgjrI6oUXxLa671SxVmWfIH+XiG6yZiGuvsQ1huuGEBlKkWuBVKgYjh+j9kagKm891FARgmK4Ct4PAhckLKaYg==", + "axobject-query": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-2.2.0.tgz", + "integrity": "sha512-Td525n+iPOOyUQIeBfcASuG6uJsDOITl7Mds5gFyerkWiX7qhUTdYUBlSgNMyVqtSJqwpt1kXGLdUt6SykLMRA==", + "dev": true + }, + "babel-loader": { + "version": "8.2.3", + "resolved": "https://registry.npmjs.org/babel-loader/-/babel-loader-8.2.3.tgz", + "integrity": "sha512-n4Zeta8NC3QAsuyiizu0GkmRcQ6clkV9WFUnUf1iXP//IeSKbWjofW3UHyZVwlOB4y039YQKefawyTn64Zwbuw==", "dev": true, "requires": { - "browser-sync-client": "^2.27.4", - "browser-sync-ui": "^2.27.4", - "bs-recipes": "1.3.4", - "bs-snippet-injector": "^2.0.1", - "chokidar": "^3.5.1", - "connect": "3.6.6", - "connect-history-api-fallback": "^1", - "dev-ip": "^1.0.1", - "easy-extender": "^2.3.4", - "eazy-logger": "3.1.0", - "etag": "^1.8.1", - "fresh": "^0.5.2", - "fs-extra": "3.0.1", - "http-proxy": "^1.18.1", - "immutable": "^3", - "localtunnel": "^2.0.1", - "micromatch": "^4.0.2", - "opn": "5.3.0", - "portscanner": "2.1.1", - "qs": "6.2.3", - "raw-body": "^2.3.2", - "resp-modifier": "6.0.2", - "rx": "4.1.0", - "send": "0.16.2", - "serve-index": "1.9.1", - "serve-static": "1.13.2", - "server-destroy": "1.0.1", - "socket.io": "2.4.0", - "ua-parser-js": "^0.7.28", - "yargs": "^15.4.1" + "find-cache-dir": "^3.3.1", + "loader-utils": "^1.4.0", + "make-dir": "^3.1.0", + "schema-utils": "^2.6.5" }, "dependencies": { - "ansi-styles": { - "version": "4.3.0", - "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz", - "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==", + "json5": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.1.tgz", + "integrity": "sha512-aKS4WQjPenRxiQsC93MNfjx+nbF4PAdYzmd/1JIj8HYzqfbu86beTuNgXDzPknWk0n0uARlyewZo4s++ES36Ow==", "dev": true, "requires": { - "color-convert": "^2.0.1" + "minimist": "^1.2.0" } }, - "cliui": { - "version": "6.0.0", - "resolved": "https://registry.npmjs.org/cliui/-/cliui-6.0.0.tgz", - "integrity": "sha512-t6wbgtoCXvAzst7QgXxJYqPt0usEfbgQdftEPbLL/cvv6HPE5VgvqCuAIDR0NgU52ds6rFwqrgakNLrHEjCbrQ==", + "loader-utils": { + "version": "1.4.0", + "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.4.0.tgz", + "integrity": "sha512-qH0WSMBtn/oHuwjy/NucEgbx5dbxxnxup9s4PVXJUDHZBQY+s0NWA9rJf53RBnQZxfch7euUui7hpoAPvALZdA==", "dev": true, "requires": { - "string-width": "^4.2.0", - "strip-ansi": "^6.0.0", - "wrap-ansi": "^6.2.0" + "big.js": "^5.2.2", + "emojis-list": "^3.0.0", + "json5": "^1.0.1" } + } + } + }, + "babel-plugin-dynamic-import-node": { + "version": "2.3.3", + "resolved": "https://registry.npmjs.org/babel-plugin-dynamic-import-node/-/babel-plugin-dynamic-import-node-2.3.3.tgz", + "integrity": "sha512-jZVI+s9Zg3IqA/kdi0i6UDCybUI3aSBLnglhYbSSjKlV7yF1F/5LWv8MakQmvYpnbJDS6fcBL2KzHSxNCMtWSQ==", + "dev": true, + "requires": { + "object.assign": "^4.1.0" + } + }, + "babel-plugin-istanbul": { + "version": "6.1.1", + "resolved": "https://registry.npmjs.org/babel-plugin-istanbul/-/babel-plugin-istanbul-6.1.1.tgz", + "integrity": "sha512-Y1IQok9821cC9onCx5otgFfRm7Lm+I+wwxOx738M/WLPZ9Q42m4IG5W0FNX8WLL2gYMZo3JkuXIH2DOpWM+qwA==", + "dev": true, + "requires": { + "@babel/helper-plugin-utils": "^7.0.0", + "@istanbuljs/load-nyc-config": "^1.0.0", + "@istanbuljs/schema": "^0.1.2", + "istanbul-lib-instrument": "^5.0.4", + "test-exclude": "^6.0.0" + }, + "dependencies": { + "istanbul-lib-coverage": { + "version": "3.2.0", + "resolved": "https://registry.npmjs.org/istanbul-lib-coverage/-/istanbul-lib-coverage-3.2.0.tgz", + "integrity": "sha512-eOeJ5BHCmHYvQK7xt9GkdHuzuCGS1Y6g9Gvnx3Ym33fz/HpLRYxiS0wHNr+m/MBC8B647Xt608vCDEvhl9c6Mw==", + "dev": true }, - "color-convert": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", - "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==", + "istanbul-lib-instrument": { + "version": "5.1.0", + "resolved": "https://registry.npmjs.org/istanbul-lib-instrument/-/istanbul-lib-instrument-5.1.0.tgz", + "integrity": "sha512-czwUz525rkOFDJxfKK6mYfIs9zBKILyrZQxjz3ABhjQXhbhFsSbo1HW/BFcsDnfJYJWA6thRR5/TUY2qs5W99Q==", "dev": true, "requires": { - "color-name": "~1.1.4" + "@babel/core": "^7.12.3", + "@babel/parser": "^7.14.7", + "@istanbuljs/schema": "^0.1.2", + "istanbul-lib-coverage": "^3.2.0", + "semver": "^6.3.0" } }, - "color-name": { - "version": "1.1.4", - "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz", - "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==", + "semver": { + "version": "6.3.0", + "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz", + "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==", + "dev": true + } + } + }, + "babel-plugin-polyfill-corejs2": { + "version": "0.2.3", + "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-corejs2/-/babel-plugin-polyfill-corejs2-0.2.3.tgz", + "integrity": "sha512-NDZ0auNRzmAfE1oDDPW2JhzIMXUk+FFe2ICejmt5T4ocKgiQx3e0VCRx9NCAidcMtL2RUZaWtXnmjTCkx0tcbA==", + "dev": true, + "requires": { + "@babel/compat-data": "^7.13.11", + "@babel/helper-define-polyfill-provider": "^0.2.4", + "semver": "^6.1.1" + }, + "dependencies": { + "semver": { + "version": "6.3.0", + "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz", + "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==", + "dev": true + } + } + }, + "babel-plugin-polyfill-corejs3": { + "version": "0.2.5", + "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-corejs3/-/babel-plugin-polyfill-corejs3-0.2.5.tgz", + "integrity": "sha512-ninF5MQNwAX9Z7c9ED+H2pGt1mXdP4TqzlHKyPIYmJIYz0N+++uwdM7RnJukklhzJ54Q84vA4ZJkgs7lu5vqcw==", + "dev": true, + "requires": { + "@babel/helper-define-polyfill-provider": "^0.2.2", + "core-js-compat": "^3.16.2" + } + }, + "babel-plugin-polyfill-regenerator": { + "version": "0.2.3", + "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-regenerator/-/babel-plugin-polyfill-regenerator-0.2.3.tgz", + "integrity": "sha512-JVE78oRZPKFIeUqFGrSORNzQnrDwZR16oiWeGM8ZyjBn2XAT5OjP+wXx5ESuo33nUsFUEJYjtklnsKbxW5L+7g==", + "dev": true, + "requires": { + "@babel/helper-define-polyfill-provider": "^0.2.4" + } + }, + "babel-runtime": { + "version": "6.26.0", + "resolved": "https://registry.npmjs.org/babel-runtime/-/babel-runtime-6.26.0.tgz", + "integrity": "sha1-llxwWGaOgrVde/4E/yM3vItWR/4=", + "dev": true, + "requires": { + "core-js": "^2.4.0", + "regenerator-runtime": "^0.11.0" + }, + "dependencies": { + "core-js": { + "version": "2.6.12", + "resolved": "https://registry.npmjs.org/core-js/-/core-js-2.6.12.tgz", + "integrity": "sha512-Kb2wC0fvsWfQrgk8HU5lW6U/Lcs8+9aaYcy4ZFc6DDlo4nZ7n70dEgE5rtR0oG6ufKDUnrwfWL1mXR5ljDatrQ==", "dev": true }, - "debug": { - "version": "2.6.9", - "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz", - "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==", + "regenerator-runtime": { + "version": "0.11.1", + "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz", + "integrity": "sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg==", + "dev": true + } + } + }, + "bach": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/bach/-/bach-1.2.0.tgz", + "integrity": "sha1-Szzpa/JxNPeaG0FKUcFONMO9mIA=", + "dev": true, + "requires": { + "arr-filter": "^1.1.1", + "arr-flatten": "^1.0.1", + "arr-map": "^2.0.0", + "array-each": "^1.0.0", + "array-initial": "^1.0.0", + "array-last": "^1.1.1", + "async-done": "^1.2.2", + "async-settle": "^1.0.0", + "now-and-later": "^2.0.0" + } + }, + "backo2": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/backo2/-/backo2-1.0.2.tgz", + "integrity": "sha1-MasayLEpNjRj41s+u2n038+6eUc=", + "dev": true + }, + "bail": { + "version": "1.0.5", + "resolved": "https://registry.npmjs.org/bail/-/bail-1.0.5.tgz", + "integrity": "sha512-xFbRxM1tahm08yHBP16MMjVUAvDaBMD38zsM9EMAUN61omwLmKlOpB/Zku5QkjZ8TZ4vn53pj+t518cH0S03RQ==", + "dev": true + }, + "balanced-match": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz", + "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==" + }, + "base": { + "version": "0.11.2", + "resolved": "https://registry.npmjs.org/base/-/base-0.11.2.tgz", + "integrity": "sha512-5T6P4xPgpp0YDFvSWwEZ4NoE3aM4QBQXDzmVbraCkFj8zHM+mba8SyqB5DbZWyR7mYHo6Y7BdQo3MoA4m0TeQg==", + "dev": true, + "requires": { + "cache-base": "^1.0.1", + "class-utils": "^0.3.5", + "component-emitter": "^1.2.1", + "define-property": "^1.0.0", + "isobject": "^3.0.1", + "mixin-deep": "^1.2.0", + "pascalcase": "^0.1.1" + }, + "dependencies": { + "define-property": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/define-property/-/define-property-1.0.0.tgz", + "integrity": "sha1-dp66rz9KY6rTr56NMEybvnm/sOY=", "dev": true, "requires": { - "ms": "2.0.0" + "is-descriptor": "^1.0.0" } }, - "fs-extra": { - "version": "3.0.1", - "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-3.0.1.tgz", - "integrity": "sha1-N5TzeMWLNC6n27sjCVEJxLO2IpE=", + "is-accessor-descriptor": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/is-accessor-descriptor/-/is-accessor-descriptor-1.0.0.tgz", + "integrity": "sha512-m5hnHTkcVsPfqx3AKlyttIPb7J+XykHvJP2B9bZDjlhLIoEq4XoK64Vg7boZlVWYK6LUY94dYPEE7Lh0ZkZKcQ==", "dev": true, "requires": { - "graceful-fs": "^4.1.2", - "jsonfile": "^3.0.0", - "universalify": "^0.1.0" + "kind-of": "^6.0.0" } }, - "http-errors": { - "version": "1.6.3", - "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-1.6.3.tgz", - "integrity": "sha1-i1VoC7S+KDoLW/TqLjhYC+HZMg0=", + "is-data-descriptor": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/is-data-descriptor/-/is-data-descriptor-1.0.0.tgz", + "integrity": "sha512-jbRXy1FmtAoCjQkVmIVYwuuqDFUbaOeDjmed1tOGPrsMhtJA4rD9tkgA0F1qJ3gRFRXcHYVkdeaP50Q5rE/jLQ==", "dev": true, "requires": { - "depd": "~1.1.2", - "inherits": "2.0.3", - "setprototypeof": "1.1.0", - "statuses": ">= 1.4.0 < 2" + "kind-of": "^6.0.0" } }, - "inherits": { - "version": "2.0.3", - "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz", - "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=", - "dev": true - }, - "is-wsl": { - "version": "1.1.0", - "resolved": "https://registry.npmjs.org/is-wsl/-/is-wsl-1.1.0.tgz", - "integrity": "sha1-HxbkqiKwTRM2tmGIpmrzxgDDpm0=", - "dev": true - }, - "jsonfile": { - "version": "3.0.1", - "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-3.0.1.tgz", - "integrity": "sha1-pezG9l9T9mLEQVx2daAzHQmS7GY=", - "dev": true, - "requires": { - "graceful-fs": "^4.1.6" - } - }, - "mime": { - "version": "1.4.1", - "resolved": "https://registry.npmjs.org/mime/-/mime-1.4.1.tgz", - "integrity": "sha512-KI1+qOZu5DcW6wayYHSzR/tXKCDC5Om4s1z2QJjDULzLcmf3DvzS7oluY4HCTrc+9FiKmWUgeNLg7W3uIQvxtQ==", - "dev": true - }, - "ms": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz", - "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=", - "dev": true - }, - "opn": { - "version": "5.3.0", - "resolved": "https://registry.npmjs.org/opn/-/opn-5.3.0.tgz", - "integrity": "sha512-bYJHo/LOmoTd+pfiYhfZDnf9zekVJrY+cnS2a5F2x+w5ppvTqObojTP7WiFG+kVZs9Inw+qQ/lw7TroWwhdd2g==", - "dev": true, - "requires": { - "is-wsl": "^1.1.0" - } - }, - "qs": { - "version": "6.2.3", - "resolved": "https://registry.npmjs.org/qs/-/qs-6.2.3.tgz", - "integrity": "sha1-HPyyXBCpsrSDBT/zn138kjOQjP4=", - "dev": true - }, - "send": { - "version": "0.16.2", - "resolved": "https://registry.npmjs.org/send/-/send-0.16.2.tgz", - "integrity": "sha512-E64YFPUssFHEFBvpbbjr44NCLtI1AohxQ8ZSiJjQLskAdKuriYEP6VyGEsRDH8ScozGpkaX1BGvhanqCwkcEZw==", - "dev": true, - "requires": { - "debug": "2.6.9", - "depd": "~1.1.2", - "destroy": "~1.0.4", - "encodeurl": "~1.0.2", - "escape-html": "~1.0.3", - "etag": "~1.8.1", - "fresh": "0.5.2", - "http-errors": "~1.6.2", - "mime": "1.4.1", - "ms": "2.0.0", - "on-finished": "~2.3.0", - "range-parser": "~1.2.0", - "statuses": "~1.4.0" - } - }, - "serve-static": { - "version": "1.13.2", - "resolved": "https://registry.npmjs.org/serve-static/-/serve-static-1.13.2.tgz", - "integrity": "sha512-p/tdJrO4U387R9oMjb1oj7qSMaMfmOyd4j9hOFoxZe2baQszgHcSWjuya/CiT5kgZZKRudHNOA0pYXOl8rQ5nw==", - "dev": true, - "requires": { - "encodeurl": "~1.0.2", - "escape-html": "~1.0.3", - "parseurl": "~1.3.2", - "send": "0.16.2" - } - }, - "setprototypeof": { - "version": "1.1.0", - "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.1.0.tgz", - "integrity": "sha512-BvE/TwpZX4FXExxOxZyRGQQv651MSwmWKZGqvmPcRIjDqWub67kTKuIMx43cZZrS/cBBzwBcNDWoFxt2XEFIpQ==", - "dev": true - }, - "statuses": { - "version": "1.4.0", - "resolved": "https://registry.npmjs.org/statuses/-/statuses-1.4.0.tgz", - "integrity": "sha512-zhSCtt8v2NDrRlPQpCNtw/heZLtfUDqxBM1udqikb/Hbk52LK4nQSwr10u77iopCW5LsyHpuXS0GnEc48mLeew==", - "dev": true - }, - "universalify": { - "version": "0.1.2", - "resolved": "https://registry.npmjs.org/universalify/-/universalify-0.1.2.tgz", - "integrity": "sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg==", - "dev": true - }, - "wrap-ansi": { - "version": "6.2.0", - "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-6.2.0.tgz", - "integrity": "sha512-r6lPcBGxZXlIcymEu7InxDMhdW0KDxpLgoFLcguasxCaJ/SOIZwINatK9KY/tf+ZrlywOKU0UDj3ATXUBfxJXA==", - "dev": true, - "requires": { - "ansi-styles": "^4.0.0", - "string-width": "^4.1.0", - "strip-ansi": "^6.0.0" - } - }, - "yargs": { - "version": "15.4.1", - "resolved": "https://registry.npmjs.org/yargs/-/yargs-15.4.1.tgz", - "integrity": "sha512-aePbxDmcYW++PaqBsJ+HYUFwCdv4LVvdnhBy78E57PIor8/OVvhMrADFFEDh8DHDFRv/O9i3lPhsENjO7QX0+A==", - "dev": true, - "requires": { - "cliui": "^6.0.0", - "decamelize": "^1.2.0", - "find-up": "^4.1.0", - "get-caller-file": "^2.0.1", - "require-directory": "^2.1.1", - "require-main-filename": "^2.0.0", - "set-blocking": "^2.0.0", - "string-width": "^4.2.0", - "which-module": "^2.0.0", - "y18n": "^4.0.0", - "yargs-parser": "^18.1.2" - } - }, - "yargs-parser": { - "version": "18.1.3", - "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-18.1.3.tgz", - "integrity": "sha512-o50j0JeToy/4K6OZcaQmW6lyXXKhq7csREXcDwk2omFPJEwUNOVtJKvmDr9EI1fAJZUyZcRF7kxGBWmRXudrCQ==", + "is-descriptor": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/is-descriptor/-/is-descriptor-1.0.2.tgz", + "integrity": "sha512-2eis5WqQGV7peooDyLmNEPUrps9+SXX5c9pL3xEB+4e9HnGuDa7mB7kHxHw4CbqS9k1T2hOH3miL8n8WtiYVtg==", "dev": true, "requires": { - "camelcase": "^5.0.0", - "decamelize": "^1.2.0" + "is-accessor-descriptor": "^1.0.0", + "is-data-descriptor": "^1.0.0", + "kind-of": "^6.0.2" } } } }, - "browser-sync-client": { - "version": "2.27.4", - "resolved": "https://registry.npmjs.org/browser-sync-client/-/browser-sync-client-2.27.4.tgz", - "integrity": "sha512-l0krAGZnpLaD+tUYdM25WeS4FP73ZoPeaxlVzOvmtL9uKSlvpmywsnDwa3PJzc3ubmDPAcD74ifJjl6MmVksXw==", + "base64-arraybuffer": { + "version": "0.1.4", + "resolved": "https://registry.npmjs.org/base64-arraybuffer/-/base64-arraybuffer-0.1.4.tgz", + "integrity": "sha1-mBjHngWbE1X5fgQooBfIOOkLqBI=", + "dev": true + }, + "base64-js": { + "version": "1.5.1", + "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz", + "integrity": "sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==", + "dev": true + }, + "base64id": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/base64id/-/base64id-2.0.0.tgz", + "integrity": "sha512-lGe34o6EHj9y3Kts9R4ZYs/Gr+6N7MCaMlIFA3F1R2O5/m7K06AxfSeO5530PEERE6/WyEg3lsuyw4GHlPZHog==", + "dev": true + }, + "batch": { + "version": "0.6.1", + "resolved": "https://registry.npmjs.org/batch/-/batch-0.6.1.tgz", + "integrity": "sha1-3DQxT05nkxgJP8dgJyUl+UvyXBY=", + "dev": true + }, + "bcrypt-pbkdf": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/bcrypt-pbkdf/-/bcrypt-pbkdf-1.0.2.tgz", + "integrity": "sha1-pDAdOJtqQ/m2f/PKEaP2Y342Dp4=", "dev": true, "requires": { - "etag": "1.8.1", - "fresh": "0.5.2", - "mitt": "^1.1.3", - "rxjs": "^5.5.6" - }, - "dependencies": { - "rxjs": { - "version": "5.5.12", - "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-5.5.12.tgz", - "integrity": "sha512-xx2itnL5sBbqeeiVgNPVuQQ1nC8Jp2WfNJhXWHmElW9YmrpS9UVnNzhP3EH3HFqexO5Tlp8GhYY+WEcqcVMvGw==", - "dev": true, - "requires": { - "symbol-observable": "1.0.1" - } - }, - "symbol-observable": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/symbol-observable/-/symbol-observable-1.0.1.tgz", - "integrity": "sha1-g0D8RwLDEi310iKI+IKD9RPT/dQ=", - "dev": true - } + "tweetnacl": "^0.14.3" } }, - "browser-sync-ui": { - "version": "2.27.4", - "resolved": "https://registry.npmjs.org/browser-sync-ui/-/browser-sync-ui-2.27.4.tgz", - "integrity": "sha512-E58Mb6ycz57Nm393oqVJj4jxuLJH3MhZnY8AV+zd9LsNVGZjrKRNNIw5JPYYguyb37ZjLjq2x4u+38mRv3Sb7g==", + "beeper": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/beeper/-/beeper-1.1.1.tgz", + "integrity": "sha1-5tXqjF2tABMEpwsiY4RH9pyy+Ak=", + "dev": true + }, + "big.js": { + "version": "5.2.2", + "resolved": "https://registry.npmjs.org/big.js/-/big.js-5.2.2.tgz", + "integrity": "sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ==", + "dev": true + }, + "bin-build": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/bin-build/-/bin-build-3.0.0.tgz", + "integrity": "sha512-jcUOof71/TNAI2uM5uoUaDq2ePcVBQ3R/qhxAz1rX7UfvduAL/RXD3jXzvn8cVcDJdGVkiR1shal3OH0ImpuhA==", "dev": true, "requires": { - "async-each-series": "0.1.1", - "connect-history-api-fallback": "^1", - "immutable": "^3", - "server-destroy": "1.0.1", - "socket.io-client": "^2.4.0", - "stream-throttle": "^0.1.3" + "decompress": "^4.0.0", + "download": "^6.2.2", + "execa": "^0.7.0", + "p-map-series": "^1.0.0", + "tempfile": "^2.0.0" } }, - "browserslist": { - "version": "4.16.6", - "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.16.6.tgz", - "integrity": "sha512-Wspk/PqO+4W9qp5iUTJsa1B/QrYn1keNCcEP5OvP7WBwT4KaDly0uONYmC6Xa3Z5IqnUgS0KcgLYu1l74x0ZXQ==", + "bin-check": { + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/bin-check/-/bin-check-4.1.0.tgz", + "integrity": "sha512-b6weQyEUKsDGFlACWSIOfveEnImkJyK/FGW6FAG42loyoquvjdtOIqO6yBFzHyqyVVhNgNkQxxx09SFLK28YnA==", "dev": true, "requires": { - "caniuse-lite": "^1.0.30001219", - "colorette": "^1.2.2", - "electron-to-chromium": "^1.3.723", - "escalade": "^3.1.1", - "node-releases": "^1.1.71" + "execa": "^0.7.0", + "executable": "^4.1.0" } }, - "browserstack": { - "version": "1.6.1", - "resolved": "https://registry.npmjs.org/browserstack/-/browserstack-1.6.1.tgz", - "integrity": "sha512-GxtFjpIaKdbAyzHfFDKixKO8IBT7wR3NjbzrGc78nNs/Ciys9wU3/nBtsqsWv5nDSrdI5tz0peKuzCPuNXNUiw==", + "bin-version": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/bin-version/-/bin-version-3.1.0.tgz", + "integrity": "sha512-Mkfm4iE1VFt4xd4vH+gx+0/71esbfus2LsnCGe8Pi4mndSPyT+NGES/Eg99jx8/lUGWfu3z2yuB/bt5UB+iVbQ==", "dev": true, "requires": { - "https-proxy-agent": "^2.2.1" + "execa": "^1.0.0", + "find-versions": "^3.0.0" }, "dependencies": { - "agent-base": { - "version": "4.3.0", - "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-4.3.0.tgz", - "integrity": "sha512-salcGninV0nPrwpGNn4VTXBb1SOuXQBiqbrNXoeizJsHrsL6ERFM2Ne3JUSBWRE6aeNJI2ROP/WEEIDUiDe3cg==", + "cross-spawn": { + "version": "6.0.5", + "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-6.0.5.tgz", + "integrity": "sha512-eTVLrBSt7fjbDygz805pMnstIs2VTBNkRm0qxZd+M7A5XDdxVRWO5MxGBXZhjY4cqLYLdtrGqRf8mBPmzwSpWQ==", "dev": true, "requires": { - "es6-promisify": "^5.0.0" + "nice-try": "^1.0.4", + "path-key": "^2.0.1", + "semver": "^5.5.0", + "shebang-command": "^1.2.0", + "which": "^1.2.9" } }, - "debug": { - "version": "3.2.7", - "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz", - "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==", + "execa": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/execa/-/execa-1.0.0.tgz", + "integrity": "sha512-adbxcyWV46qiHyvSp50TKt05tB4tK3HcmF7/nxfAdhnox83seTDbwnaqKO4sXRy7roHAIFqJP/Rw/AuEbX61LA==", "dev": true, "requires": { - "ms": "^2.1.1" + "cross-spawn": "^6.0.0", + "get-stream": "^4.0.0", + "is-stream": "^1.1.0", + "npm-run-path": "^2.0.0", + "p-finally": "^1.0.0", + "signal-exit": "^3.0.0", + "strip-eof": "^1.0.0" } }, - "https-proxy-agent": { - "version": "2.2.4", - "resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-2.2.4.tgz", - "integrity": "sha512-OmvfoQ53WLjtA9HeYP9RNrWMJzzAz1JGaSFr1nijg0PVR1JaD/xbJq1mdEIIlxGpXp9eSe/O2LgU9DJmTPd0Eg==", - "dev": true, - "requires": { - "agent-base": "^4.3.0", - "debug": "^3.1.0" - } - } - } - }, - "bs-recipes": { - "version": "1.3.4", - "resolved": "https://registry.npmjs.org/bs-recipes/-/bs-recipes-1.3.4.tgz", - "integrity": "sha1-DS1NSKcYyMBEdp/cT4lZLci2lYU=", - "dev": true - }, - "bs-snippet-injector": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/bs-snippet-injector/-/bs-snippet-injector-2.0.1.tgz", - "integrity": "sha1-YbU5PxH1JVntEgaTEANDtu2wTdU=", - "dev": true - }, - "buffer": { - "version": "5.7.1", - "resolved": "https://registry.npmjs.org/buffer/-/buffer-5.7.1.tgz", - "integrity": "sha512-EHcyIPBQ4BSGlvjB16k5KgAJ27CIsHY/2JBmCRReo48y9rQ3MaUzWX3KVlBa4U7MyX02HdVj0K7C3WaB3ju7FQ==", - "dev": true, - "requires": { - "base64-js": "^1.3.1", - "ieee754": "^1.1.13" + "semver": { + "version": "5.7.1", + "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz", + "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==", + "dev": true + } } }, - "buffer-alloc": { - "version": "1.2.0", - "resolved": "https://registry.npmjs.org/buffer-alloc/-/buffer-alloc-1.2.0.tgz", - "integrity": "sha512-CFsHQgjtW1UChdXgbyJGtnm+O/uLQeZdtbDo8mfUgYXCHSM1wgrVxXm6bSyrUuErEb+4sYVGCzASBRot7zyrow==", + "bin-version-check": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/bin-version-check/-/bin-version-check-4.0.0.tgz", + "integrity": "sha512-sR631OrhC+1f8Cvs8WyVWOA33Y8tgwjETNPyyD/myRBXLkfS/vl74FmH/lFcRl9KY3zwGh7jFhvyk9vV3/3ilQ==", "dev": true, "requires": { - "buffer-alloc-unsafe": "^1.1.0", - "buffer-fill": "^1.0.0" + "bin-version": "^3.0.0", + "semver": "^5.6.0", + "semver-truncate": "^1.1.2" + }, + "dependencies": { + "semver": { + "version": "5.7.1", + "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz", + "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==", + "dev": true + } } }, - "buffer-alloc-unsafe": { - "version": "1.1.0", - "resolved": "https://registry.npmjs.org/buffer-alloc-unsafe/-/buffer-alloc-unsafe-1.1.0.tgz", - "integrity": "sha512-TEM2iMIEQdJ2yjPJoSIsldnleVaAk1oW3DBVUykyOLsEsFmEc9kn+SFFPz+gl54KQNxlDnAwCXosOS9Okx2xAg==", - "dev": true - }, - "buffer-crc32": { - "version": "0.2.13", - "resolved": "https://registry.npmjs.org/buffer-crc32/-/buffer-crc32-0.2.13.tgz", - "integrity": "sha1-DTM+PwDqxQqhRUq9MO+MKl2ackI=", - "dev": true - }, - "buffer-equal": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/buffer-equal/-/buffer-equal-1.0.0.tgz", - "integrity": "sha1-WWFrSYME1Var1GaWayLu2j7KX74=", - "dev": true - }, - "buffer-fill": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/buffer-fill/-/buffer-fill-1.0.0.tgz", - "integrity": "sha1-+PeLdniYiO858gXNY39o5wISKyw=", - "dev": true - }, - "buffer-from": { - "version": "1.1.1", - "resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.1.tgz", - "integrity": "sha512-MQcXEUbCKtEo7bhqEs6560Hyd4XaovZlO/k9V3hjVUF/zwW7KBVdSK4gIt/bzwS9MbR5qob+F5jusZsb0YQK2A==", - "dev": true - }, - "buffer-indexof": { - "version": "1.1.1", - "resolved": "https://registry.npmjs.org/buffer-indexof/-/buffer-indexof-1.1.1.tgz", - "integrity": "sha512-4/rOEg86jivtPTeOUUT61jJO1Ya1TrR/OkqCSZDyq84WJh3LuuiphBYJN+fm5xufIk4XAFcEwte/8WzC8If/1g==", - "dev": true - }, - "builtin-modules": { - "version": "3.2.0", - "resolved": "https://registry.npmjs.org/builtin-modules/-/builtin-modules-3.2.0.tgz", - "integrity": "sha512-lGzLKcioL90C7wMczpkY0n/oART3MbBa8R9OFGE1rJxoVI86u4WAGfEk8Wjv10eKSyTHVGkSo3bvBylCEtk7LA==", - "dev": true - }, - "builtins": { - "version": "1.0.3", - "resolved": "https://registry.npmjs.org/builtins/-/builtins-1.0.3.tgz", - "integrity": "sha1-y5T662HIaWRR2zZTThQi+U8K7og=", - "dev": true - }, - "bytes": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.0.0.tgz", - "integrity": "sha1-0ygVQE1olpn4Wk6k+odV3ROpYEg=", - "dev": true - }, - "cacache": { - "version": "15.2.0", - "resolved": "https://registry.npmjs.org/cacache/-/cacache-15.2.0.tgz", - "integrity": "sha512-uKoJSHmnrqXgthDFx/IU6ED/5xd+NNGe+Bb+kLZy7Ku4P+BaiWEUflAKPZ7eAzsYGcsAGASJZsybXp+quEcHTw==", + "bin-wrapper": { + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/bin-wrapper/-/bin-wrapper-4.1.0.tgz", + "integrity": "sha512-hfRmo7hWIXPkbpi0ZltboCMVrU+0ClXR/JgbCKKjlDjQf6igXa7OwdqNcFWQZPZTgiY7ZpzE3+LjjkLiTN2T7Q==", "dev": true, "requires": { - "@npmcli/move-file": "^1.0.1", - "chownr": "^2.0.0", - "fs-minipass": "^2.0.0", - "glob": "^7.1.4", - "infer-owner": "^1.0.4", - "lru-cache": "^6.0.0", - "minipass": "^3.1.1", - "minipass-collect": "^1.0.2", - "minipass-flush": "^1.0.5", - "minipass-pipeline": "^1.2.2", - "mkdirp": "^1.0.3", - "p-map": "^4.0.0", - "promise-inflight": "^1.0.1", - "rimraf": "^3.0.2", - "ssri": "^8.0.1", - "tar": "^6.0.2", - "unique-filename": "^1.1.1" + "bin-check": "^4.1.0", + "bin-version-check": "^4.0.0", + "download": "^7.1.0", + "import-lazy": "^3.1.0", + "os-filter-obj": "^2.0.0", + "pify": "^4.0.1" }, "dependencies": { - "glob": { - "version": "7.1.7", - "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.7.tgz", - "integrity": "sha512-OvD9ENzPLbegENnYP5UUfJIirTg4+XwMWGaQfQTY0JenxNvvIKP3U3/tAQSPIu/lHxXYSZmpXlUHeqAIdKzBLQ==", + "download": { + "version": "7.1.0", + "resolved": "https://registry.npmjs.org/download/-/download-7.1.0.tgz", + "integrity": "sha512-xqnBTVd/E+GxJVrX5/eUJiLYjCGPwMpdL+jGhGU57BvtcA7wwhtHVbXBeUk51kOpW3S7Jn3BQbN9Q1R1Km2qDQ==", "dev": true, "requires": { - "fs.realpath": "^1.0.0", - "inflight": "^1.0.4", - "inherits": "2", - "minimatch": "^3.0.4", - "once": "^1.3.0", - "path-is-absolute": "^1.0.0" + "archive-type": "^4.0.0", + "caw": "^2.0.1", + "content-disposition": "^0.5.2", + "decompress": "^4.2.0", + "ext-name": "^5.0.0", + "file-type": "^8.1.0", + "filenamify": "^2.0.0", + "get-stream": "^3.0.0", + "got": "^8.3.1", + "make-dir": "^1.2.0", + "p-event": "^2.1.0", + "pify": "^3.0.0" + }, + "dependencies": { + "pify": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/pify/-/pify-3.0.0.tgz", + "integrity": "sha1-5aSs0sEB/fPZpNB/DbxNtJ3SgXY=", + "dev": true + } } }, - "mkdirp": { - "version": "1.0.4", - "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-1.0.4.tgz", - "integrity": "sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==", + "file-type": { + "version": "8.1.0", + "resolved": "https://registry.npmjs.org/file-type/-/file-type-8.1.0.tgz", + "integrity": "sha512-qyQ0pzAy78gVoJsmYeNgl8uH8yKhr1lVhW7JbzJmnlRi0I4R2eEDEJZVKG8agpDnLpacwNbDhLNG/LMdxHD2YQ==", "dev": true - } - } - }, - "cache-base": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/cache-base/-/cache-base-1.0.1.tgz", - "integrity": "sha512-AKcdTnFSWATd5/GCPRxr2ChwIJ85CeyrEyjRHlKxQ56d4XJMGym0uAiKn0xbLOGOl3+yRpOTi484dVCEc5AUzQ==", - "dev": true, - "requires": { - "collection-visit": "^1.0.0", - "component-emitter": "^1.2.1", - "get-value": "^2.0.6", - "has-value": "^1.0.0", - "isobject": "^3.0.1", - "set-value": "^2.0.0", - "to-object-path": "^0.3.0", - "union-value": "^1.0.0", - "unset-value": "^1.0.0" - } - }, - "cacheable-request": { - "version": "2.1.4", - "resolved": "https://registry.npmjs.org/cacheable-request/-/cacheable-request-2.1.4.tgz", - "integrity": "sha1-DYCIAbY0KtM8kd+dC0TcCbkeXD0=", - "dev": true, - "requires": { - "clone-response": "1.0.2", - "get-stream": "3.0.0", - "http-cache-semantics": "3.8.1", - "keyv": "3.0.0", - "lowercase-keys": "1.0.0", - "normalize-url": "2.0.1", - "responselike": "1.0.2" - }, - "dependencies": { + }, "get-stream": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-3.0.0.tgz", "integrity": "sha1-jpQ9E1jcN1VQVOy+LtsFqhdO3hQ=", "dev": true }, - "http-cache-semantics": { - "version": "3.8.1", - "resolved": "https://registry.npmjs.org/http-cache-semantics/-/http-cache-semantics-3.8.1.tgz", - "integrity": "sha512-5ai2iksyV8ZXmnZhHH4rWPoxxistEexSi5936zIQ1bnNTW5VnA85B6P/VpXiRM017IgRvb2kKo1a//y+0wSp3w==", - "dev": true - }, - "lowercase-keys": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/lowercase-keys/-/lowercase-keys-1.0.0.tgz", - "integrity": "sha1-TjNms55/VFfjXxMkvfb4jQv8cwY=", - "dev": true - }, - "normalize-url": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/normalize-url/-/normalize-url-2.0.1.tgz", - "integrity": "sha512-D6MUW4K/VzoJ4rJ01JFKxDrtY1v9wrgzCX5f2qj/lzH1m/lW6MhUZFKerVsnyjOhOsYzI9Kqqak+10l4LvLpMw==", + "got": { + "version": "8.3.2", + "resolved": "https://registry.npmjs.org/got/-/got-8.3.2.tgz", + "integrity": "sha512-qjUJ5U/hawxosMryILofZCkm3C84PLJS/0grRIpjAwu+Lkxxj5cxeCU25BG0/3mDSpXKTyZr8oh8wIgLaH0QCw==", "dev": true, "requires": { - "prepend-http": "^2.0.0", - "query-string": "^5.0.1", - "sort-keys": "^2.0.0" + "@sindresorhus/is": "^0.7.0", + "cacheable-request": "^2.1.1", + "decompress-response": "^3.3.0", + "duplexer3": "^0.1.4", + "get-stream": "^3.0.0", + "into-stream": "^3.1.0", + "is-retry-allowed": "^1.1.0", + "isurl": "^1.0.0-alpha5", + "lowercase-keys": "^1.0.0", + "mimic-response": "^1.0.0", + "p-cancelable": "^0.4.0", + "p-timeout": "^2.0.1", + "pify": "^3.0.0", + "safe-buffer": "^5.1.1", + "timed-out": "^4.0.1", + "url-parse-lax": "^3.0.0", + "url-to-options": "^1.0.1" + }, + "dependencies": { + "pify": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/pify/-/pify-3.0.0.tgz", + "integrity": "sha1-5aSs0sEB/fPZpNB/DbxNtJ3SgXY=", + "dev": true + } } }, - "prepend-http": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/prepend-http/-/prepend-http-2.0.0.tgz", - "integrity": "sha1-6SQ0v6XqjBn0HN/UAddBo8gZ2Jc=", - "dev": true - }, - "sort-keys": { + "make-dir": { + "version": "1.3.0", + "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-1.3.0.tgz", + "integrity": "sha512-2w31R7SJtieJJnQtGc7RVL2StM2vGYVfqUOvUDxH6bC6aJTxPxTF0GnIgCyu7tjockiUWAYQRbxa7vKn34s5sQ==", + "dev": true, + "requires": { + "pify": "^3.0.0" + }, + "dependencies": { + "pify": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/pify/-/pify-3.0.0.tgz", + "integrity": "sha1-5aSs0sEB/fPZpNB/DbxNtJ3SgXY=", + "dev": true + } + } + }, + "p-cancelable": { + "version": "0.4.1", + "resolved": "https://registry.npmjs.org/p-cancelable/-/p-cancelable-0.4.1.tgz", + "integrity": "sha512-HNa1A8LvB1kie7cERyy21VNeHb2CWJJYqyyC2o3klWFfMGlFmWv2Z7sFgZH8ZiaYL95ydToKTFVXgMV/Os0bBQ==", + "dev": true + }, + "p-event": { + "version": "2.3.1", + "resolved": "https://registry.npmjs.org/p-event/-/p-event-2.3.1.tgz", + "integrity": "sha512-NQCqOFhbpVTMX4qMe8PF8lbGtzZ+LCiN7pcNrb/413Na7+TRoe1xkKUzuWa/YEJdGQ0FvKtj35EEbDoVPO2kbA==", + "dev": true, + "requires": { + "p-timeout": "^2.0.1" + } + }, + "p-timeout": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/p-timeout/-/p-timeout-2.0.1.tgz", + "integrity": "sha512-88em58dDVB/KzPEx1X0N3LwFfYZPyDc4B6eF38M1rk9VTZMbxXXgjugz8mmwpS9Ox4BDZ+t6t3QP5+/gazweIA==", + "dev": true, + "requires": { + "p-finally": "^1.0.0" + } + }, + "prepend-http": { "version": "2.0.0", - "resolved": "https://registry.npmjs.org/sort-keys/-/sort-keys-2.0.0.tgz", - "integrity": "sha1-ZYU1WEhh7JfXMNbPQYIuH1ZoQSg=", + "resolved": "https://registry.npmjs.org/prepend-http/-/prepend-http-2.0.0.tgz", + "integrity": "sha1-6SQ0v6XqjBn0HN/UAddBo8gZ2Jc=", + "dev": true + }, + "url-parse-lax": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/url-parse-lax/-/url-parse-lax-3.0.0.tgz", + "integrity": "sha1-FrXK/Afb42dsGxmZF3gj1lA6yww=", "dev": true, "requires": { - "is-plain-obj": "^1.0.0" + "prepend-http": "^2.0.0" } } } }, - "call-bind": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.2.tgz", - "integrity": "sha512-7O+FbCihrB5WGbFYesctwmTKae6rOiIzmz1icreWJ+0aA7LJfuqhEso2T9ncpcFtzMQtzXf2QGGueWJGTYsqrA==", + "binary-extensions": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz", + "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==", + "dev": true + }, + "bindings": { + "version": "1.5.0", + "resolved": "https://registry.npmjs.org/bindings/-/bindings-1.5.0.tgz", + "integrity": "sha512-p2q/t/mhvuOj/UeLlV6566GD/guowlr0hHxClI0W9m7MWYkL1F0hLo+0Aexs9HSPCtR1SXQ0TD3MMKrXZajbiQ==", "dev": true, + "optional": true, "requires": { - "function-bind": "^1.1.1", - "get-intrinsic": "^1.0.2" + "file-uri-to-path": "1.0.0" } }, - "caller-callsite": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/caller-callsite/-/caller-callsite-2.0.0.tgz", - "integrity": "sha1-hH4PzgoiN1CpoCfFSzNzGtMVQTQ=", + "bl": { + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/bl/-/bl-4.1.0.tgz", + "integrity": "sha512-1W07cM9gS6DcLperZfFSj+bWLtaPGSOHWhPiGzXmvVJbRLdG82sH/Kn8EtW1VqWVA54AKf2h5k5BbnIbwF3h6w==", "dev": true, "requires": { - "callsites": "^2.0.0" + "buffer": "^5.5.0", + "inherits": "^2.0.4", + "readable-stream": "^3.4.0" }, "dependencies": { - "callsites": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/callsites/-/callsites-2.0.0.tgz", - "integrity": "sha1-BuuE8A7qQT2oav/vrL/7Ngk7PFA=", - "dev": true + "readable-stream": { + "version": "3.6.0", + "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.0.tgz", + "integrity": "sha512-BViHy7LKeTz4oNnkcLJ+lVSL6vpiFeX6/d3oSH8zCW7UxP2onchk+vTGB143xuFjHS3deTgkKoXXymXqymiIdA==", + "dev": true, + "requires": { + "inherits": "^2.0.3", + "string_decoder": "^1.1.1", + "util-deprecate": "^1.0.1" + } } } }, - "caller-path": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/caller-path/-/caller-path-2.0.0.tgz", - "integrity": "sha1-Ro+DBE42mrIBD6xfBs7uFbsssfQ=", - "dev": true, - "requires": { - "caller-callsite": "^2.0.0" - } - }, - "callsites": { - "version": "3.1.0", - "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz", - "integrity": "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==", + "blob": { + "version": "0.0.5", + "resolved": "https://registry.npmjs.org/blob/-/blob-0.0.5.tgz", + "integrity": "sha512-gaqbzQPqOoamawKg0LGVd7SzLgXS+JH61oWprSLH+P+abTczqJbhTR8CmJ2u9/bUYNmHTGJx/UEmn6doAvvuig==", "dev": true }, - "camel-case": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/camel-case/-/camel-case-3.0.0.tgz", - "integrity": "sha1-yjw2iKTpzzpM2nd9xNy8cTJJz3M=", + "blocking-proxy": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/blocking-proxy/-/blocking-proxy-1.0.1.tgz", + "integrity": "sha512-KE8NFMZr3mN2E0HcvCgRtX7DjhiIQrwle+nSVJVC/yqFb9+xznHl2ZcoBp2L9qzkI4t4cBFJ1efXF8Dwi132RA==", "dev": true, "requires": { - "no-case": "^2.2.0", - "upper-case": "^1.1.1" + "minimist": "^1.2.0" } }, - "camelcase": { - "version": "5.3.1", - "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz", - "integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==", + "bluebird": { + "version": "2.11.0", + "resolved": "https://registry.npmjs.org/bluebird/-/bluebird-2.11.0.tgz", + "integrity": "sha1-U0uQM8AiyVecVro7Plpcqvu2UOE=", "dev": true }, - "camelcase-keys": { - "version": "2.1.0", - "resolved": "https://registry.npmjs.org/camelcase-keys/-/camelcase-keys-2.1.0.tgz", - "integrity": "sha1-MIvur/3ygRkFHvodkyITyRuPkuc=", + "body-parser": { + "version": "1.19.0", + "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.19.0.tgz", + "integrity": "sha512-dhEPs72UPbDnAQJ9ZKMNTP6ptJaionhP5cBb541nXPlW60Jepo9RV/a4fX4XWW9CuFNK22krhrj1+rgzifNCsw==", "dev": true, "requires": { - "camelcase": "^2.0.0", - "map-obj": "^1.0.0" + "bytes": "3.1.0", + "content-type": "~1.0.4", + "debug": "2.6.9", + "depd": "~1.1.2", + "http-errors": "1.7.2", + "iconv-lite": "0.4.24", + "on-finished": "~2.3.0", + "qs": "6.7.0", + "raw-body": "2.4.0", + "type-is": "~1.6.17" }, "dependencies": { - "camelcase": { - "version": "2.1.1", - "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-2.1.1.tgz", - "integrity": "sha1-fB0W1nmhu+WcoCys7PsBHiAfWh8=", + "bytes": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.0.tgz", + "integrity": "sha512-zauLjrfCG+xvoyaqLoV8bLVXXNGC4JqlxFCutSDWA6fJrTo2ZuvLYTqZ7aHBLZSMOopbzwv8f+wZcVzfVTI2Dg==", + "dev": true + }, + "debug": { + "version": "2.6.9", + "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz", + "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==", + "dev": true, + "requires": { + "ms": "2.0.0" + } + }, + "ms": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz", + "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=", "dev": true } } }, - "caniuse-api": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/caniuse-api/-/caniuse-api-3.0.0.tgz", - "integrity": "sha512-bsTwuIg/BZZK/vreVTYYbSWoe2F+71P7K5QGEX+pT250DZbfU1MQ5prOKpPR+LL6uWKK3KMwMCAS74QB3Um1uw==", + "bonjour": { + "version": "3.5.0", + "resolved": "https://registry.npmjs.org/bonjour/-/bonjour-3.5.0.tgz", + "integrity": "sha1-jokKGD2O6aI5OzhExpGkK897yfU=", "dev": true, "requires": { - "browserslist": "^4.0.0", - "caniuse-lite": "^1.0.0", - "lodash.memoize": "^4.1.2", - "lodash.uniq": "^4.5.0" + "array-flatten": "^2.1.0", + "deep-equal": "^1.0.1", + "dns-equal": "^1.0.0", + "dns-txt": "^2.0.2", + "multicast-dns": "^6.0.1", + "multicast-dns-service-types": "^1.1.0" } }, - "caniuse-lite": { - "version": "1.0.30001245", - "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001245.tgz", - "integrity": "sha512-768fM9j1PKXpOCKws6eTo3RHmvTUsG9UrpT4WoREFeZgJBTi4/X9g565azS/rVUGtqb8nt7FjLeF5u4kukERnA==", - "dev": true - }, - "canonical-path": { + "boolbase": { "version": "1.0.0", - "resolved": "https://registry.npmjs.org/canonical-path/-/canonical-path-1.0.0.tgz", - "integrity": "sha512-feylzsbDxi1gPZ1IjystzIQZagYYLvfKrSuygUCgf7z6x790VEzze5QEkdSV1U58RA7Hi0+v6fv4K54atOzATg==", - "dev": true - }, - "caseless": { - "version": "0.12.0", - "resolved": "https://registry.npmjs.org/caseless/-/caseless-0.12.0.tgz", - "integrity": "sha1-G2gcIf+EAzyCZUMJBolCDRhxUdw=", + "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz", + "integrity": "sha1-aN/1++YMUes3cl6p4+0xDcwed24=", "dev": true }, - "caw": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/caw/-/caw-2.0.1.tgz", - "integrity": "sha512-Cg8/ZSBEa8ZVY9HspcGUYaK63d/bN7rqS3CYCzEGUxuYv6UlmcjzDUz2fCFFHyTvUW5Pk0I+3hkA3iXlIj6guA==", - "dev": true, - "requires": { - "get-proxy": "^2.0.0", - "isurl": "^1.0.0-alpha5", - "tunnel-agent": "^0.6.0", - "url-to-options": "^1.0.1" - } - }, - "cdocparser": { - "version": "0.13.0", - "resolved": "https://registry.npmjs.org/cdocparser/-/cdocparser-0.13.0.tgz", - "integrity": "sha1-G6mKHh4WaOK/s11Bdh6eRkXXMbo=", - "dev": true, - "requires": { - "escape-string-regexp": "^1.0.2", - "lodash.assign": "^2.4.1", - "strip-indent": "^1.0.0" - } - }, - "chalk": { - "version": "2.4.2", - "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz", - "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==", + "boxen": { + "version": "4.2.0", + "resolved": "https://registry.npmjs.org/boxen/-/boxen-4.2.0.tgz", + "integrity": "sha512-eB4uT9RGzg2odpER62bBwSLvUeGC+WbRjjyyFhGsKnc8wp/m0+hQsMUvUe3H2V0D5vw0nBdO1hCJoZo5mKeuIQ==", "dev": true, "requires": { - "ansi-styles": "^3.2.1", - "escape-string-regexp": "^1.0.5", - "supports-color": "^5.3.0" + "ansi-align": "^3.0.0", + "camelcase": "^5.3.1", + "chalk": "^3.0.0", + "cli-boxes": "^2.2.0", + "string-width": "^4.1.0", + "term-size": "^2.1.0", + "type-fest": "^0.8.1", + "widest-line": "^3.1.0" }, "dependencies": { - "has-flag": { + "ansi-styles": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz", + "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==", + "dev": true, + "requires": { + "color-convert": "^2.0.1" + } + }, + "chalk": { "version": "3.0.0", - "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz", - "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=", - "dev": true + "resolved": "https://registry.npmjs.org/chalk/-/chalk-3.0.0.tgz", + "integrity": "sha512-4D3B6Wf41KOYRFdszmDqMCGq5VV/uMAB273JILmO+3jAlh8X4qDtdtgCR3fxtbLEMzSx22QdhnDcJvu2u1fVwg==", + "dev": true, + "requires": { + "ansi-styles": "^4.1.0", + "supports-color": "^7.1.0" + } }, - "supports-color": { - "version": "5.5.0", - "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz", - "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==", + "color-convert": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", + "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==", "dev": true, "requires": { - "has-flag": "^3.0.0" + "color-name": "~1.1.4" } - } - } - }, - "character-entities": { - "version": "1.2.4", - "resolved": "https://registry.npmjs.org/character-entities/-/character-entities-1.2.4.tgz", - "integrity": "sha512-iBMyeEHxfVnIakwOuDXpVkc54HijNgCyQB2w0VfGQThle6NXn50zU6V/u+LDhxHcDUPojn6Kpga3PTAD8W1bQw==", - "dev": true - }, - "character-entities-legacy": { - "version": "1.1.4", - "resolved": "https://registry.npmjs.org/character-entities-legacy/-/character-entities-legacy-1.1.4.tgz", - "integrity": "sha512-3Xnr+7ZFS1uxeiUDvV02wQ+QDbc55o97tIV5zHScSPJpcLm/r0DFPcoY3tYRp+VZukxuMeKgXYmsXQHO05zQeA==", - "dev": true - }, - "character-reference-invalid": { - "version": "1.1.4", - "resolved": "https://registry.npmjs.org/character-reference-invalid/-/character-reference-invalid-1.1.4.tgz", - "integrity": "sha512-mKKUkUbhPpQlCOfIuZkvSEgktjPFIsZKRRbC6KWVEMvlzblj3i3asQv5ODsrwt0N3pHAEvjP8KTQPHkp0+6jOg==", - "dev": true - }, - "chardet": { - "version": "0.7.0", - "resolved": "https://registry.npmjs.org/chardet/-/chardet-0.7.0.tgz", - "integrity": "sha512-mT8iDcrh03qDGRRmoA2hmBJnxpllMR+0/0qlzjqZES6NdiWDcZkCNAk4rPFZ9Q85r27unkiNNg8ZOiwZXBHwcA==", - "dev": true - }, - "chokidar": { - "version": "3.5.2", - "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.2.tgz", - "integrity": "sha512-ekGhOnNVPgT77r4K/U3GDhu+FQ2S8TnK/s2KbIGXi0SZWuwkZ2QNyfWdZW+TVfn84DpEP7rLeCt2UI6bJ8GwbQ==", - "dev": true, - "requires": { - "anymatch": "~3.1.2", - "braces": "~3.0.2", - "fsevents": "~2.3.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" - }, - "dependencies": { - "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, - "requires": { - "is-glob": "^4.0.1" - } - } - } - }, - "chownr": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/chownr/-/chownr-2.0.0.tgz", - "integrity": "sha512-bIomtDF5KGpdogkLd9VspvFzk9KfpyyGlS8YFVZl7TGPBHL5snIOnxeshwVgPteQ9b4Eydl+pVbIyE1DcvCWgQ==", - "dev": true - }, - "chroma-js": { - "version": "1.4.1", - "resolved": "https://registry.npmjs.org/chroma-js/-/chroma-js-1.4.1.tgz", - "integrity": "sha512-jTwQiT859RTFN/vIf7s+Vl/Z2LcMrvMv3WUFmd/4u76AdlFC0NTNgqEEFPcRiHmAswPsMiQEDZLM8vX8qXpZNQ==", - "dev": true - }, - "chrome-trace-event": { - "version": "1.0.3", - "resolved": "https://registry.npmjs.org/chrome-trace-event/-/chrome-trace-event-1.0.3.tgz", - "integrity": "sha512-p3KULyQg4S7NIHixdwbGX+nFHkoBiA4YQmyWtjb8XngSKV124nJmRysgAeujbUVb15vh+RvFUfCPqU7rXk+hZg==", - "dev": true - }, - "ci-info": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/ci-info/-/ci-info-2.0.0.tgz", - "integrity": "sha512-5tK7EtrZ0N+OLFMthtqOj4fI2Jeb88C4CAZPu25LDVUgXJ0A3Js4PMGqrn0JU1W0Mh1/Z8wZzYPxqUrXeBboCQ==", - "dev": true - }, - "circular-dependency-plugin": { - "version": "5.2.2", - "resolved": "https://registry.npmjs.org/circular-dependency-plugin/-/circular-dependency-plugin-5.2.2.tgz", - "integrity": "sha512-g38K9Cm5WRwlaH6g03B9OEz/0qRizI+2I7n+Gz+L5DxXJAPAiWQvwlYNm1V1jkdpUv95bOe/ASm2vfi/G560jQ==", - "dev": true - }, - "class-utils": { - "version": "0.3.6", - "resolved": "https://registry.npmjs.org/class-utils/-/class-utils-0.3.6.tgz", - "integrity": "sha512-qOhPa/Fj7s6TY8H8esGu5QNpMMQxz79h+urzrNYN6mn+9BnxlDGf5QZ+XeCDsxSjPqsSR56XOZOJmpeurnLMeg==", - "dev": true, - "requires": { - "arr-union": "^3.1.0", - "define-property": "^0.2.5", - "isobject": "^3.0.0", - "static-extend": "^0.1.1" - }, - "dependencies": { - "define-property": { - "version": "0.2.5", - "resolved": "https://registry.npmjs.org/define-property/-/define-property-0.2.5.tgz", - "integrity": "sha1-w1se+RjsPJkPmlvFe+BKrOxcgRY=", + }, + "color-name": { + "version": "1.1.4", + "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz", + "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==", + "dev": true + }, + "has-flag": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz", + "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==", + "dev": true + }, + "supports-color": { + "version": "7.2.0", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz", + "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==", "dev": true, "requires": { - "is-descriptor": "^0.1.0" + "has-flag": "^4.0.0" } + }, + "type-fest": { + "version": "0.8.1", + "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.8.1.tgz", + "integrity": "sha512-4dbzIzqvjtgiM5rw1k5rEHtBANKmdudhGyBEajN01fEyhaAIhsoKNy6y7+IN93IfpFtwY9iqi7kD+xwKhQsNJA==", + "dev": true } } }, - "classlist.js": { - "version": "1.1.20150312", - "resolved": "https://registry.npmjs.org/classlist.js/-/classlist.js-1.1.20150312.tgz", - "integrity": "sha1-HXCEL3Ai8I2awIbOaeWyUPLFd4k=" - }, - "clean-css": { - "version": "4.2.3", - "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-4.2.3.tgz", - "integrity": "sha512-VcMWDN54ZN/DS+g58HYL5/n4Zrqe8vHJpGA8KdgUXFU4fuP/aHNw8eld9SyEIyabIMJX/0RaY/fplOo5hYLSFA==", - "dev": true, + "brace-expansion": { + "version": "1.1.11", + "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz", + "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==", "requires": { - "source-map": "~0.6.0" - }, - "dependencies": { - "source-map": { - "version": "0.6.1", - "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", - "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", - "dev": true - } + "balanced-match": "^1.0.0", + "concat-map": "0.0.1" } }, - "clean-stack": { - "version": "2.2.0", - "resolved": "https://registry.npmjs.org/clean-stack/-/clean-stack-2.2.0.tgz", - "integrity": "sha512-4diC9HaTE+KRAMWhDhrGOECgWZxoevMc5TlkObMqNSsVU62PYzXZ/SMTjzyGAFF1YusgxGcSWTEXBhp0CPwQ1A==", - "dev": true - }, - "cli-boxes": { - "version": "2.2.1", - "resolved": "https://registry.npmjs.org/cli-boxes/-/cli-boxes-2.2.1.tgz", - "integrity": "sha512-y4coMcylgSCdVinjiDBuR8PCC2bLjyGTwEmPb9NHR/QaNU6EUOXcTY/s6VjGMD6ENSEaeQYHCY0GNGS5jfMwPw==", - "dev": true - }, - "cli-cursor": { - "version": "3.1.0", - "resolved": "https://registry.npmjs.org/cli-cursor/-/cli-cursor-3.1.0.tgz", - "integrity": "sha512-I/zHAwsKf9FqGoXM4WWRACob9+SNukZTd94DWF57E4toouRulbCxcUh6RKUEOQlYTHJnzkPMySvPNaaSLNfLZw==", + "braces": { + "version": "3.0.2", + "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz", + "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==", "dev": true, "requires": { - "restore-cursor": "^3.1.0" + "fill-range": "^7.0.1" } }, - "cli-spinners": { - "version": "2.6.0", - "resolved": "https://registry.npmjs.org/cli-spinners/-/cli-spinners-2.6.0.tgz", - "integrity": "sha512-t+4/y50K/+4xcCRosKkA7W4gTr1MySvLV0q+PxmG7FJ5g+66ChKurYjxBCjHggHH3HA5Hh9cy+lcUGWDqVH+4Q==", - "dev": true - }, - "cli-width": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/cli-width/-/cli-width-3.0.0.tgz", - "integrity": "sha512-FxqpkPPwu1HjuN93Omfm4h8uIanXofW0RxVEW3k5RKx+mJJYSthzNhp32Kzxxy3YAEZ/Dc/EWN1vZRY0+kOhbw==", - "dev": true - }, - "cliui": { - "version": "5.0.0", - "resolved": "https://registry.npmjs.org/cliui/-/cliui-5.0.0.tgz", - "integrity": "sha512-PYeGSEmmHM6zvoef2w8TPzlrnNpXIjTipYK780YswmIP9vjxmd6Y2a3CB2Ks6/AU8NHjZugXvo8w3oWM2qnwXA==", + "browser-sync": { + "version": "2.27.7", + "resolved": "https://registry.npmjs.org/browser-sync/-/browser-sync-2.27.7.tgz", + "integrity": "sha512-9ElnnA/u+s2Jd+IgY+2SImB+sAEIteHsMG0NR96m7Ph/wztpvJCUpyC2on1KqmG9iAp941j+5jfmd34tEguGbg==", "dev": true, "requires": { - "string-width": "^3.1.0", - "strip-ansi": "^5.2.0", - "wrap-ansi": "^5.1.0" + "browser-sync-client": "^2.27.7", + "browser-sync-ui": "^2.27.7", + "bs-recipes": "1.3.4", + "bs-snippet-injector": "^2.0.1", + "chokidar": "^3.5.1", + "connect": "3.6.6", + "connect-history-api-fallback": "^1", + "dev-ip": "^1.0.1", + "easy-extender": "^2.3.4", + "eazy-logger": "3.1.0", + "etag": "^1.8.1", + "fresh": "^0.5.2", + "fs-extra": "3.0.1", + "http-proxy": "^1.18.1", + "immutable": "^3", + "localtunnel": "^2.0.1", + "micromatch": "^4.0.2", + "opn": "5.3.0", + "portscanner": "2.1.1", + "qs": "6.2.3", + "raw-body": "^2.3.2", + "resp-modifier": "6.0.2", + "rx": "4.1.0", + "send": "0.16.2", + "serve-index": "1.9.1", + "serve-static": "1.13.2", + "server-destroy": "1.0.1", + "socket.io": "2.4.0", + "ua-parser-js": "1.0.2", + "yargs": "^15.4.1" }, "dependencies": { - "ansi-regex": { - "version": "4.1.0", - "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-4.1.0.tgz", - "integrity": "sha512-1apePfXM1UOSqw0o9IiFAovVz9M5S1Dg+4TrDwfMewQ6p/rmMueb7tWZjQ1rx4Loy1ArBggoqGpfqqdI4rondg==", - "dev": true - }, - "emoji-regex": { - "version": "7.0.3", - "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-7.0.3.tgz", - "integrity": "sha512-CwBLREIQ7LvYFB0WyRvwhq5N5qPhc6PMjD6bYggFlI5YyDgl+0vxq5VHbMOFqLg7hfWzmu8T5Z1QofhmTIhItA==", - "dev": true + "ansi-styles": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz", + "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==", + "dev": true, + "requires": { + "color-convert": "^2.0.1" + } }, - "is-fullwidth-code-point": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-2.0.0.tgz", - "integrity": "sha1-o7MKXE8ZkYMWeqq5O+764937ZU8=", - "dev": true + "cliui": { + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/cliui/-/cliui-6.0.0.tgz", + "integrity": "sha512-t6wbgtoCXvAzst7QgXxJYqPt0usEfbgQdftEPbLL/cvv6HPE5VgvqCuAIDR0NgU52ds6rFwqrgakNLrHEjCbrQ==", + "dev": true, + "requires": { + "string-width": "^4.2.0", + "strip-ansi": "^6.0.0", + "wrap-ansi": "^6.2.0" + } }, - "string-width": { - "version": "3.1.0", - "resolved": "https://registry.npmjs.org/string-width/-/string-width-3.1.0.tgz", - "integrity": "sha512-vafcv6KjVZKSgz06oM/H6GDBrAtz8vdhQakGjFIvNrHA6y3HCF1CInLy+QLq8dTJPQ1b+KDUqDFctkdRW44e1w==", + "color-convert": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", + "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==", "dev": true, "requires": { - "emoji-regex": "^7.0.1", - "is-fullwidth-code-point": "^2.0.0", - "strip-ansi": "^5.1.0" + "color-name": "~1.1.4" } }, - "strip-ansi": { - "version": "5.2.0", - "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-5.2.0.tgz", - "integrity": "sha512-DuRs1gKbBqsMKIZlrffwlug8MHkcnpjs5VPmL1PAh+mA30U0DTotfDZ0d2UUsXpPmPmMMJ6W773MaA3J+lbiWA==", + "color-name": { + "version": "1.1.4", + "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz", + "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==", + "dev": true + }, + "debug": { + "version": "2.6.9", + "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz", + "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==", "dev": true, "requires": { - "ansi-regex": "^4.1.0" + "ms": "2.0.0" } - } - } - }, - "clone": { - "version": "1.0.4", - "resolved": "https://registry.npmjs.org/clone/-/clone-1.0.4.tgz", - "integrity": "sha1-2jCcwmPfFZlMaIypAheco8fNfH4=", - "dev": true - }, - "clone-buffer": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/clone-buffer/-/clone-buffer-1.0.0.tgz", - "integrity": "sha1-4+JbIHrE5wGvch4staFnksrD3Fg=", - "dev": true - }, - "clone-deep": { - "version": "4.0.1", - "resolved": "https://registry.npmjs.org/clone-deep/-/clone-deep-4.0.1.tgz", - "integrity": "sha512-neHB9xuzh/wk0dIHweyAXv2aPGZIVk3pLMe+/RNzINf17fe0OG96QroktYAUm7SM1PBnzTabaLboqqxDyMU+SQ==", - "dev": true, - "requires": { - "is-plain-object": "^2.0.4", - "kind-of": "^6.0.2", - "shallow-clone": "^3.0.0" - } - }, - "clone-regexp": { - "version": "2.2.0", - "resolved": "https://registry.npmjs.org/clone-regexp/-/clone-regexp-2.2.0.tgz", - "integrity": "sha512-beMpP7BOtTipFuW8hrJvREQ2DrRu3BE7by0ZpibtfBA+qfHYvMGTc2Yb1JMYPKg/JUw0CHYvpg796aNTSW9z7Q==", - "dev": true, - "requires": { - "is-regexp": "^2.0.0" - } - }, - "clone-response": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/clone-response/-/clone-response-1.0.2.tgz", - "integrity": "sha1-0dyXOSAxTfZ/vrlCI7TuNQI56Ws=", - "dev": true, - "requires": { - "mimic-response": "^1.0.0" - } - }, - "clone-stats": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/clone-stats/-/clone-stats-1.0.0.tgz", - "integrity": "sha1-s3gt/4u1R04Yuba/D9/ngvh3doA=", - "dev": true - }, - "cloneable-readable": { - "version": "1.1.3", - "resolved": "https://registry.npmjs.org/cloneable-readable/-/cloneable-readable-1.1.3.tgz", - "integrity": "sha512-2EF8zTQOxYq70Y4XKtorQupqF0m49MBz2/yf5Bj+MHjvpG3Hy7sImifnqD6UA+TKYxeSV+u6qqQPawN5UvnpKQ==", - "dev": true, - "requires": { - "inherits": "^2.0.1", - "process-nextick-args": "^2.0.0", - "readable-stream": "^2.3.5" - } - }, - "code-point-at": { - "version": "1.1.0", - "resolved": "https://registry.npmjs.org/code-point-at/-/code-point-at-1.1.0.tgz", - "integrity": "sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c=", - "dev": true - }, - "codelyzer": { - "version": "6.0.2", - "resolved": "https://registry.npmjs.org/codelyzer/-/codelyzer-6.0.2.tgz", - "integrity": "sha512-v3+E0Ucu2xWJMOJ2fA/q9pDT/hlxHftHGPUay1/1cTgyPV5JTHFdO9hqo837Sx2s9vKBMTt5gO+lhF95PO6J+g==", - "dev": true, - "requires": { - "@angular/compiler": "9.0.0", - "@angular/core": "9.0.0", - "app-root-path": "^3.0.0", - "aria-query": "^3.0.0", - "axobject-query": "2.0.2", - "css-selector-tokenizer": "^0.7.1", - "cssauron": "^1.4.0", - "damerau-levenshtein": "^1.0.4", - "rxjs": "^6.5.3", - "semver-dsl": "^1.0.1", - "source-map": "^0.5.7", - "sprintf-js": "^1.1.2", - "tslib": "^1.10.0", - "zone.js": "~0.10.3" - }, - "dependencies": { - "@angular/compiler": { - "version": "9.0.0", - "resolved": "https://registry.npmjs.org/@angular/compiler/-/compiler-9.0.0.tgz", - "integrity": "sha512-ctjwuntPfZZT2mNj2NDIVu51t9cvbhl/16epc5xEwyzyDt76pX9UgwvY+MbXrf/C/FWwdtmNtfP698BKI+9leQ==", - "dev": true }, - "@angular/core": { - "version": "9.0.0", - "resolved": "https://registry.npmjs.org/@angular/core/-/core-9.0.0.tgz", - "integrity": "sha512-6Pxgsrf0qF9iFFqmIcWmjJGkkCaCm6V5QNnxMy2KloO3SDq6QuMVRbN9RtC8Urmo25LP+eZ6ZgYqFYpdD8Hd9w==", - "dev": true + "fs-extra": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-3.0.1.tgz", + "integrity": "sha1-N5TzeMWLNC6n27sjCVEJxLO2IpE=", + "dev": true, + "requires": { + "graceful-fs": "^4.1.2", + "jsonfile": "^3.0.0", + "universalify": "^0.1.0" + } }, - "aria-query": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-3.0.0.tgz", - "integrity": "sha1-ZbP8wcoRVajJrmTW7uKX8V1RM8w=", + "http-errors": { + "version": "1.6.3", + "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-1.6.3.tgz", + "integrity": "sha1-i1VoC7S+KDoLW/TqLjhYC+HZMg0=", "dev": true, "requires": { - "ast-types-flow": "0.0.7", - "commander": "^2.11.0" + "depd": "~1.1.2", + "inherits": "2.0.3", + "setprototypeof": "1.1.0", + "statuses": ">= 1.4.0 < 2" } }, - "axobject-query": { - "version": "2.0.2", - "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-2.0.2.tgz", - "integrity": "sha512-MCeek8ZH7hKyO1rWUbKNQBbl4l2eY0ntk7OGi+q0RlafrCnfPxC06WZA+uebCfmYp4mNU9jRBP1AhGyf8+W3ww==", + "inherits": { + "version": "2.0.3", + "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz", + "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=", + "dev": true + }, + "jsonfile": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-3.0.1.tgz", + "integrity": "sha1-pezG9l9T9mLEQVx2daAzHQmS7GY=", "dev": true, "requires": { - "ast-types-flow": "0.0.7" + "graceful-fs": "^4.1.6" } }, - "commander": { - "version": "2.20.3", - "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz", - "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==", + "mime": { + "version": "1.4.1", + "resolved": "https://registry.npmjs.org/mime/-/mime-1.4.1.tgz", + "integrity": "sha512-KI1+qOZu5DcW6wayYHSzR/tXKCDC5Om4s1z2QJjDULzLcmf3DvzS7oluY4HCTrc+9FiKmWUgeNLg7W3uIQvxtQ==", "dev": true }, - "source-map": { - "version": "0.5.7", - "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz", - "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=", + "ms": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz", + "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=", "dev": true }, - "sprintf-js": { - "version": "1.1.2", - "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.1.2.tgz", - "integrity": "sha512-VE0SOVEHCk7Qc8ulkWw3ntAzXuqf7S2lvwQaDLRnUeIEaKNQJzV6BwmLKhOqT61aGhfUMrXeaBk+oDGCzvhcug==", + "qs": { + "version": "6.2.3", + "resolved": "https://registry.npmjs.org/qs/-/qs-6.2.3.tgz", + "integrity": "sha1-HPyyXBCpsrSDBT/zn138kjOQjP4=", "dev": true }, - "tslib": { - "version": "1.14.1", - "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz", - "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==", + "send": { + "version": "0.16.2", + "resolved": "https://registry.npmjs.org/send/-/send-0.16.2.tgz", + "integrity": "sha512-E64YFPUssFHEFBvpbbjr44NCLtI1AohxQ8ZSiJjQLskAdKuriYEP6VyGEsRDH8ScozGpkaX1BGvhanqCwkcEZw==", + "dev": true, + "requires": { + "debug": "2.6.9", + "depd": "~1.1.2", + "destroy": "~1.0.4", + "encodeurl": "~1.0.2", + "escape-html": "~1.0.3", + "etag": "~1.8.1", + "fresh": "0.5.2", + "http-errors": "~1.6.2", + "mime": "1.4.1", + "ms": "2.0.0", + "on-finished": "~2.3.0", + "range-parser": "~1.2.0", + "statuses": "~1.4.0" + } + }, + "serve-static": { + "version": "1.13.2", + "resolved": "https://registry.npmjs.org/serve-static/-/serve-static-1.13.2.tgz", + "integrity": "sha512-p/tdJrO4U387R9oMjb1oj7qSMaMfmOyd4j9hOFoxZe2baQszgHcSWjuya/CiT5kgZZKRudHNOA0pYXOl8rQ5nw==", + "dev": true, + "requires": { + "encodeurl": "~1.0.2", + "escape-html": "~1.0.3", + "parseurl": "~1.3.2", + "send": "0.16.2" + } + }, + "setprototypeof": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.1.0.tgz", + "integrity": "sha512-BvE/TwpZX4FXExxOxZyRGQQv651MSwmWKZGqvmPcRIjDqWub67kTKuIMx43cZZrS/cBBzwBcNDWoFxt2XEFIpQ==", "dev": true }, - "zone.js": { - "version": "0.10.3", - "resolved": "https://registry.npmjs.org/zone.js/-/zone.js-0.10.3.tgz", - "integrity": "sha512-LXVLVEq0NNOqK/fLJo3d0kfzd4sxwn2/h67/02pjCjfKDxgx1i9QqpvtHD8CrBnSSwMw5+dy11O7FRX5mkO7Cg==", + "statuses": { + "version": "1.4.0", + "resolved": "https://registry.npmjs.org/statuses/-/statuses-1.4.0.tgz", + "integrity": "sha512-zhSCtt8v2NDrRlPQpCNtw/heZLtfUDqxBM1udqikb/Hbk52LK4nQSwr10u77iopCW5LsyHpuXS0GnEc48mLeew==", + "dev": true + }, + "universalify": { + "version": "0.1.2", + "resolved": "https://registry.npmjs.org/universalify/-/universalify-0.1.2.tgz", + "integrity": "sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg==", "dev": true + }, + "wrap-ansi": { + "version": "6.2.0", + "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-6.2.0.tgz", + "integrity": "sha512-r6lPcBGxZXlIcymEu7InxDMhdW0KDxpLgoFLcguasxCaJ/SOIZwINatK9KY/tf+ZrlywOKU0UDj3ATXUBfxJXA==", + "dev": true, + "requires": { + "ansi-styles": "^4.0.0", + "string-width": "^4.1.0", + "strip-ansi": "^6.0.0" + } + }, + "yargs": { + "version": "15.4.1", + "resolved": "https://registry.npmjs.org/yargs/-/yargs-15.4.1.tgz", + "integrity": "sha512-aePbxDmcYW++PaqBsJ+HYUFwCdv4LVvdnhBy78E57PIor8/OVvhMrADFFEDh8DHDFRv/O9i3lPhsENjO7QX0+A==", + "dev": true, + "requires": { + "cliui": "^6.0.0", + "decamelize": "^1.2.0", + "find-up": "^4.1.0", + "get-caller-file": "^2.0.1", + "require-directory": "^2.1.1", + "require-main-filename": "^2.0.0", + "set-blocking": "^2.0.0", + "string-width": "^4.2.0", + "which-module": "^2.0.0", + "y18n": "^4.0.0", + "yargs-parser": "^18.1.2" + } + }, + "yargs-parser": { + "version": "18.1.3", + "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-18.1.3.tgz", + "integrity": "sha512-o50j0JeToy/4K6OZcaQmW6lyXXKhq7csREXcDwk2omFPJEwUNOVtJKvmDr9EI1fAJZUyZcRF7kxGBWmRXudrCQ==", + "dev": true, + "requires": { + "camelcase": "^5.0.0", + "decamelize": "^1.2.0" + } } } }, - "collection-map": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/collection-map/-/collection-map-1.0.0.tgz", - "integrity": "sha1-rqDwb40mx4DCt1SUOFVEsiVa8Yw=", + "browser-sync-client": { + "version": "2.27.7", + "resolved": "https://registry.npmjs.org/browser-sync-client/-/browser-sync-client-2.27.7.tgz", + "integrity": "sha512-wKg9UP9a4sCIkBBAXUdbkdWFJzfSAQizGh+nC19W9y9zOo9s5jqeYRFUUbs7x5WKhjtspT+xetVp9AtBJ6BmWg==", "dev": true, "requires": { - "arr-map": "^2.0.2", - "for-own": "^1.0.0", - "make-iterator": "^1.0.0" + "etag": "1.8.1", + "fresh": "0.5.2", + "mitt": "^1.1.3", + "rxjs": "^5.5.6" + }, + "dependencies": { + "rxjs": { + "version": "5.5.12", + "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-5.5.12.tgz", + "integrity": "sha512-xx2itnL5sBbqeeiVgNPVuQQ1nC8Jp2WfNJhXWHmElW9YmrpS9UVnNzhP3EH3HFqexO5Tlp8GhYY+WEcqcVMvGw==", + "dev": true, + "requires": { + "symbol-observable": "1.0.1" + } + }, + "symbol-observable": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/symbol-observable/-/symbol-observable-1.0.1.tgz", + "integrity": "sha1-g0D8RwLDEi310iKI+IKD9RPT/dQ=", + "dev": true + } } }, - "collection-visit": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/collection-visit/-/collection-visit-1.0.0.tgz", - "integrity": "sha1-S8A3PBZLwykbTTaMgpzxqApZ3KA=", + "browser-sync-ui": { + "version": "2.27.7", + "resolved": "https://registry.npmjs.org/browser-sync-ui/-/browser-sync-ui-2.27.7.tgz", + "integrity": "sha512-Bt4OQpx9p18OIzk0KKyu7jqlvmjacasUlk8ARY3uuIyiFWSBiRgr2i6XY8dEMF14DtbooaEBOpHEu9VCYvMcCw==", "dev": true, "requires": { - "map-visit": "^1.0.0", - "object-visit": "^1.0.0" + "async-each-series": "0.1.1", + "connect-history-api-fallback": "^1", + "immutable": "^3", + "server-destroy": "1.0.1", + "socket.io-client": "^2.4.0", + "stream-throttle": "^0.1.3" } }, - "color-convert": { - "version": "1.9.3", - "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz", - "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==", + "browserslist": { + "version": "4.17.3", + "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.17.3.tgz", + "integrity": "sha512-59IqHJV5VGdcJZ+GZ2hU5n4Kv3YiASzW6Xk5g9tf5a/MAzGeFwgGWU39fVzNIOVcgB3+Gp+kiQu0HEfTVU/3VQ==", "dev": true, "requires": { - "color-name": "1.1.3" + "caniuse-lite": "^1.0.30001264", + "electron-to-chromium": "^1.3.857", + "escalade": "^3.1.1", + "node-releases": "^1.1.77", + "picocolors": "^0.2.1" } }, - "color-name": { - "version": "1.1.3", - "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz", - "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=", - "dev": true - }, - "color-support": { - "version": "1.1.3", - "resolved": "https://registry.npmjs.org/color-support/-/color-support-1.1.3.tgz", - "integrity": "sha512-qiBjkpbMLO/HL68y+lh4q0/O1MZFj2RX6X/KmMa3+gJD3z+WwI1ZzDHysvqHGS3mP6mznPckpXmw1nI9cJjyRg==", - "dev": true + "browserstack": { + "version": "1.6.1", + "resolved": "https://registry.npmjs.org/browserstack/-/browserstack-1.6.1.tgz", + "integrity": "sha512-GxtFjpIaKdbAyzHfFDKixKO8IBT7wR3NjbzrGc78nNs/Ciys9wU3/nBtsqsWv5nDSrdI5tz0peKuzCPuNXNUiw==", + "dev": true, + "requires": { + "https-proxy-agent": "^2.2.1" + }, + "dependencies": { + "agent-base": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-4.3.0.tgz", + "integrity": "sha512-salcGninV0nPrwpGNn4VTXBb1SOuXQBiqbrNXoeizJsHrsL6ERFM2Ne3JUSBWRE6aeNJI2ROP/WEEIDUiDe3cg==", + "dev": true, + "requires": { + "es6-promisify": "^5.0.0" + } + }, + "debug": { + "version": "3.2.7", + "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz", + "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==", + "dev": true, + "requires": { + "ms": "^2.1.1" + } + }, + "https-proxy-agent": { + "version": "2.2.4", + "resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-2.2.4.tgz", + "integrity": "sha512-OmvfoQ53WLjtA9HeYP9RNrWMJzzAz1JGaSFr1nijg0PVR1JaD/xbJq1mdEIIlxGpXp9eSe/O2LgU9DJmTPd0Eg==", + "dev": true, + "requires": { + "agent-base": "^4.3.0", + "debug": "^3.1.0" + } + } + } }, - "colord": { - "version": "2.1.0", - "resolved": "https://registry.npmjs.org/colord/-/colord-2.1.0.tgz", - "integrity": "sha512-H5sDP9XDk2uP+x/xSGkgB9SEFc1bojdI5DMKU0jmSXQtml2GIe48dj1DcSS0e53QQAHn+JKqUXbGeGX24xWD7w==", + "bs-recipes": { + "version": "1.3.4", + "resolved": "https://registry.npmjs.org/bs-recipes/-/bs-recipes-1.3.4.tgz", + "integrity": "sha1-DS1NSKcYyMBEdp/cT4lZLci2lYU=", "dev": true }, - "colorette": { - "version": "1.2.2", - "resolved": "https://registry.npmjs.org/colorette/-/colorette-1.2.2.tgz", - "integrity": "sha512-MKGMzyfeuutC/ZJ1cba9NqcNpfeqMUcYmyF1ZFY6/Cn7CNSAKx6a+s48sqLqyAiZuaP2TcqMhoo+dlwFnVxT9w==", + "bs-snippet-injector": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/bs-snippet-injector/-/bs-snippet-injector-2.0.1.tgz", + "integrity": "sha1-YbU5PxH1JVntEgaTEANDtu2wTdU=", "dev": true }, - "colors": { - "version": "1.4.0", - "resolved": "https://registry.npmjs.org/colors/-/colors-1.4.0.tgz", - "integrity": "sha512-a+UqTh4kgZg/SlGvfbzDHpgRu7AAQOmmqRHJnxhRZICKFUT91brVhNNt58CMWU9PsBbv3PDCZUHbVxuDiH2mtA==", - "dev": true + "buffer": { + "version": "5.7.1", + "resolved": "https://registry.npmjs.org/buffer/-/buffer-5.7.1.tgz", + "integrity": "sha512-EHcyIPBQ4BSGlvjB16k5KgAJ27CIsHY/2JBmCRReo48y9rQ3MaUzWX3KVlBa4U7MyX02HdVj0K7C3WaB3ju7FQ==", + "dev": true, + "requires": { + "base64-js": "^1.3.1", + "ieee754": "^1.1.13" + } }, - "combined-stream": { - "version": "1.0.8", - "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz", - "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==", + "buffer-alloc": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/buffer-alloc/-/buffer-alloc-1.2.0.tgz", + "integrity": "sha512-CFsHQgjtW1UChdXgbyJGtnm+O/uLQeZdtbDo8mfUgYXCHSM1wgrVxXm6bSyrUuErEb+4sYVGCzASBRot7zyrow==", "dev": true, "requires": { - "delayed-stream": "~1.0.0" + "buffer-alloc-unsafe": "^1.1.0", + "buffer-fill": "^1.0.0" } }, - "commander": { - "version": "7.2.0", - "resolved": "https://registry.npmjs.org/commander/-/commander-7.2.0.tgz", - "integrity": "sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==", + "buffer-alloc-unsafe": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/buffer-alloc-unsafe/-/buffer-alloc-unsafe-1.1.0.tgz", + "integrity": "sha512-TEM2iMIEQdJ2yjPJoSIsldnleVaAk1oW3DBVUykyOLsEsFmEc9kn+SFFPz+gl54KQNxlDnAwCXosOS9Okx2xAg==", "dev": true }, - "comment-parser": { - "version": "0.7.6", - "resolved": "https://registry.npmjs.org/comment-parser/-/comment-parser-0.7.6.tgz", - "integrity": "sha512-GKNxVA7/iuTnAqGADlTWX4tkhzxZKXp5fLJqKTlQLHkE65XDUKutZ3BHaJC5IGcper2tT3QRD1xr4o3jNpgXXg==", + "buffer-crc32": { + "version": "0.2.13", + "resolved": "https://registry.npmjs.org/buffer-crc32/-/buffer-crc32-0.2.13.tgz", + "integrity": "sha1-DTM+PwDqxQqhRUq9MO+MKl2ackI=", "dev": true }, - "commondir": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/commondir/-/commondir-1.0.1.tgz", - "integrity": "sha1-3dgA2gxmEnOTzKWVDqloo6rxJTs=", + "buffer-equal": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/buffer-equal/-/buffer-equal-1.0.0.tgz", + "integrity": "sha1-WWFrSYME1Var1GaWayLu2j7KX74=", "dev": true }, - "component-bind": { + "buffer-fill": { "version": "1.0.0", - "resolved": "https://registry.npmjs.org/component-bind/-/component-bind-1.0.0.tgz", - "integrity": "sha1-AMYIq33Nk4l8AAllGx06jh5zu9E=", + "resolved": "https://registry.npmjs.org/buffer-fill/-/buffer-fill-1.0.0.tgz", + "integrity": "sha1-+PeLdniYiO858gXNY39o5wISKyw=", "dev": true }, - "component-emitter": { - "version": "1.3.0", - "resolved": "https://registry.npmjs.org/component-emitter/-/component-emitter-1.3.0.tgz", - "integrity": "sha512-Rd3se6QB+sO1TwqZjscQrurpEPIfO0/yYnSin6Q/rD3mOutHvUrCAhJub3r90uNb+SESBuE0QYoB90YdfatsRg==", + "buffer-from": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.1.tgz", + "integrity": "sha512-MQcXEUbCKtEo7bhqEs6560Hyd4XaovZlO/k9V3hjVUF/zwW7KBVdSK4gIt/bzwS9MbR5qob+F5jusZsb0YQK2A==", "dev": true }, - "component-inherit": { - "version": "0.0.3", - "resolved": "https://registry.npmjs.org/component-inherit/-/component-inherit-0.0.3.tgz", - "integrity": "sha1-ZF/ErfWLcrZJ1crmUTVhnbJv8UM=", + "buffer-indexof": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/buffer-indexof/-/buffer-indexof-1.1.1.tgz", + "integrity": "sha512-4/rOEg86jivtPTeOUUT61jJO1Ya1TrR/OkqCSZDyq84WJh3LuuiphBYJN+fm5xufIk4XAFcEwte/8WzC8If/1g==", "dev": true }, - "compressible": { - "version": "2.0.18", - "resolved": "https://registry.npmjs.org/compressible/-/compressible-2.0.18.tgz", - "integrity": "sha512-AF3r7P5dWxL8MxyITRMlORQNaOA2IkAFaTr4k7BUumjPtRpGDTZpl0Pb1XCO6JeDCBdp126Cgs9sMxqSjgYyRg==", - "dev": true, - "requires": { - "mime-db": ">= 1.43.0 < 2" - } + "builtin-modules": { + "version": "3.2.0", + "resolved": "https://registry.npmjs.org/builtin-modules/-/builtin-modules-3.2.0.tgz", + "integrity": "sha512-lGzLKcioL90C7wMczpkY0n/oART3MbBa8R9OFGE1rJxoVI86u4WAGfEk8Wjv10eKSyTHVGkSo3bvBylCEtk7LA==", + "dev": true }, - "compression": { - "version": "1.7.4", - "resolved": "https://registry.npmjs.org/compression/-/compression-1.7.4.tgz", - "integrity": "sha512-jaSIDzP9pZVS4ZfQ+TzvtiWhdpFhE2RDHz8QJkpX9SIpLq88VueF5jJw6t+6CUQcAoA6t+x89MLrWAqpfDE8iQ==", + "builtins": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/builtins/-/builtins-1.0.3.tgz", + "integrity": "sha1-y5T662HIaWRR2zZTThQi+U8K7og=", + "dev": true + }, + "bytes": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.0.0.tgz", + "integrity": "sha1-0ygVQE1olpn4Wk6k+odV3ROpYEg=", + "dev": true + }, + "cacache": { + "version": "15.3.0", + "resolved": "https://registry.npmjs.org/cacache/-/cacache-15.3.0.tgz", + "integrity": "sha512-VVdYzXEn+cnbXpFgWs5hTT7OScegHVmLhJIR8Ufqk3iFD6A6j5iSX1KuBTfNEv4tdJWE2PzA6IVFtcLC7fN9wQ==", "dev": true, "requires": { - "accepts": "~1.3.5", - "bytes": "3.0.0", - "compressible": "~2.0.16", - "debug": "2.6.9", - "on-headers": "~1.0.2", - "safe-buffer": "5.1.2", - "vary": "~1.1.2" + "@npmcli/fs": "^1.0.0", + "@npmcli/move-file": "^1.0.1", + "chownr": "^2.0.0", + "fs-minipass": "^2.0.0", + "glob": "^7.1.4", + "infer-owner": "^1.0.4", + "lru-cache": "^6.0.0", + "minipass": "^3.1.1", + "minipass-collect": "^1.0.2", + "minipass-flush": "^1.0.5", + "minipass-pipeline": "^1.2.2", + "mkdirp": "^1.0.3", + "p-map": "^4.0.0", + "promise-inflight": "^1.0.1", + "rimraf": "^3.0.2", + "ssri": "^8.0.1", + "tar": "^6.0.2", + "unique-filename": "^1.1.1" }, "dependencies": { - "debug": { - "version": "2.6.9", - "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz", - "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==", + "glob": { + "version": "7.2.0", + "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.0.tgz", + "integrity": "sha512-lmLf6gtyrPq8tTjSmrO94wBeQbFR3HbLHbuyD69wuyQkImp2hWqMGB47OX65FBkPffO641IP9jWa1z4ivqG26Q==", "dev": true, "requires": { - "ms": "2.0.0" + "fs.realpath": "^1.0.0", + "inflight": "^1.0.4", + "inherits": "2", + "minimatch": "^3.0.4", + "once": "^1.3.0", + "path-is-absolute": "^1.0.0" } }, - "ms": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz", - "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=", + "mkdirp": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-1.0.4.tgz", + "integrity": "sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==", "dev": true } } }, - "concat-map": { - "version": "0.0.1", - "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz", - "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=" - }, - "concat-stream": { - "version": "1.6.2", - "resolved": "https://registry.npmjs.org/concat-stream/-/concat-stream-1.6.2.tgz", - "integrity": "sha512-27HBghJxjiZtIk3Ycvn/4kbJk/1uZuJFfuPEns6LaEvpvG1f0hTea8lilrouyo9mVc2GWdcEZ8OLoGmSADlrCw==", + "cache-base": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/cache-base/-/cache-base-1.0.1.tgz", + "integrity": "sha512-AKcdTnFSWATd5/GCPRxr2ChwIJ85CeyrEyjRHlKxQ56d4XJMGym0uAiKn0xbLOGOl3+yRpOTi484dVCEc5AUzQ==", "dev": true, "requires": { - "buffer-from": "^1.0.0", - "inherits": "^2.0.3", - "readable-stream": "^2.2.2", - "typedarray": "^0.0.6" + "collection-visit": "^1.0.0", + "component-emitter": "^1.2.1", + "get-value": "^2.0.6", + "has-value": "^1.0.0", + "isobject": "^3.0.1", + "set-value": "^2.0.0", + "to-object-path": "^0.3.0", + "union-value": "^1.0.0", + "unset-value": "^1.0.0" } }, - "concat-with-sourcemaps": { - "version": "1.1.0", - "resolved": "https://registry.npmjs.org/concat-with-sourcemaps/-/concat-with-sourcemaps-1.1.0.tgz", - "integrity": "sha512-4gEjHJFT9e+2W/77h/DS5SGUgwDaOwprX8L/gl5+3ixnzkVJJsZWDSelmN3Oilw3LNDZjZV0yqH1hLG3k6nghg==", + "cacheable-request": { + "version": "2.1.4", + "resolved": "https://registry.npmjs.org/cacheable-request/-/cacheable-request-2.1.4.tgz", + "integrity": "sha1-DYCIAbY0KtM8kd+dC0TcCbkeXD0=", "dev": true, "requires": { - "source-map": "^0.6.1" + "clone-response": "1.0.2", + "get-stream": "3.0.0", + "http-cache-semantics": "3.8.1", + "keyv": "3.0.0", + "lowercase-keys": "1.0.0", + "normalize-url": "2.0.1", + "responselike": "1.0.2" }, "dependencies": { - "source-map": { - "version": "0.6.1", - "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", - "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", + "get-stream": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-3.0.0.tgz", + "integrity": "sha1-jpQ9E1jcN1VQVOy+LtsFqhdO3hQ=", "dev": true - } - } - }, - "config-chain": { - "version": "1.1.13", - "resolved": "https://registry.npmjs.org/config-chain/-/config-chain-1.1.13.tgz", - "integrity": "sha512-qj+f8APARXHrM0hraqXYb2/bOVSV4PvJQlNZ/DVj0QrmNM2q2euizkeuVckQ57J+W0mRH6Hvi+k50M4Jul2VRQ==", - "dev": true, - "requires": { - "ini": "^1.3.4", - "proto-list": "~1.2.1" - }, - "dependencies": { - "ini": { - "version": "1.3.8", - "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.8.tgz", - "integrity": "sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==", + }, + "http-cache-semantics": { + "version": "3.8.1", + "resolved": "https://registry.npmjs.org/http-cache-semantics/-/http-cache-semantics-3.8.1.tgz", + "integrity": "sha512-5ai2iksyV8ZXmnZhHH4rWPoxxistEexSi5936zIQ1bnNTW5VnA85B6P/VpXiRM017IgRvb2kKo1a//y+0wSp3w==", + "dev": true + }, + "lowercase-keys": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/lowercase-keys/-/lowercase-keys-1.0.0.tgz", + "integrity": "sha1-TjNms55/VFfjXxMkvfb4jQv8cwY=", "dev": true } } }, - "configstore": { - "version": "5.0.1", - "resolved": "https://registry.npmjs.org/configstore/-/configstore-5.0.1.tgz", - "integrity": "sha512-aMKprgk5YhBNyH25hj8wGt2+D52Sw1DRRIzqBwLp2Ya9mFmY8KPvvtvmna8SxVR9JMZ4kzMD68N22vlaRpkeFA==", + "call-bind": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.2.tgz", + "integrity": "sha512-7O+FbCihrB5WGbFYesctwmTKae6rOiIzmz1icreWJ+0aA7LJfuqhEso2T9ncpcFtzMQtzXf2QGGueWJGTYsqrA==", "dev": true, "requires": { - "dot-prop": "^5.2.0", - "graceful-fs": "^4.1.2", - "make-dir": "^3.0.0", - "unique-string": "^2.0.0", - "write-file-atomic": "^3.0.0", - "xdg-basedir": "^4.0.0" + "function-bind": "^1.1.1", + "get-intrinsic": "^1.0.2" } }, - "connect": { - "version": "3.6.6", - "resolved": "https://registry.npmjs.org/connect/-/connect-3.6.6.tgz", - "integrity": "sha1-Ce/2xVr3I24TcTWnJXSFi2eG9SQ=", + "callsites": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz", + "integrity": "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==", + "dev": true + }, + "camel-case": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/camel-case/-/camel-case-3.0.0.tgz", + "integrity": "sha1-yjw2iKTpzzpM2nd9xNy8cTJJz3M=", "dev": true, "requires": { - "debug": "2.6.9", - "finalhandler": "1.1.0", - "parseurl": "~1.3.2", - "utils-merge": "1.0.1" - }, - "dependencies": { - "debug": { - "version": "2.6.9", - "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz", - "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==", - "dev": true, - "requires": { - "ms": "2.0.0" - } - }, - "finalhandler": { - "version": "1.1.0", - "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.1.0.tgz", - "integrity": "sha1-zgtoVbRYU+eRsvzGgARtiCU91/U=", - "dev": true, - "requires": { - "debug": "2.6.9", - "encodeurl": "~1.0.1", - "escape-html": "~1.0.3", - "on-finished": "~2.3.0", - "parseurl": "~1.3.2", - "statuses": "~1.3.1", - "unpipe": "~1.0.0" - } - }, - "ms": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz", - "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=", - "dev": true - }, - "statuses": { - "version": "1.3.1", - "resolved": "https://registry.npmjs.org/statuses/-/statuses-1.3.1.tgz", - "integrity": "sha1-+vUbnrdKrvOzrPStX2Gr8ky3uT4=", - "dev": true - } + "no-case": "^2.2.0", + "upper-case": "^1.1.1" } }, - "connect-history-api-fallback": { - "version": "1.6.0", - "resolved": "https://registry.npmjs.org/connect-history-api-fallback/-/connect-history-api-fallback-1.6.0.tgz", - "integrity": "sha512-e54B99q/OUoH64zYYRf3HBP5z24G38h5D3qXu23JGRoigpX5Ss4r9ZnDk3g0Z8uQC2x2lPaJ+UlWBc1ZWBWdLg==", + "camelcase": { + "version": "5.3.1", + "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz", + "integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==", "dev": true }, - "console-control-strings": { - "version": "1.1.0", - "resolved": "https://registry.npmjs.org/console-control-strings/-/console-control-strings-1.1.0.tgz", - "integrity": "sha1-PXz0Rk22RG6mRL9LOVB/mFEAjo4=", + "caniuse-lite": { + "version": "1.0.30001265", + "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001265.tgz", + "integrity": "sha512-YzBnspggWV5hep1m9Z6sZVLOt7vrju8xWooFAgN6BA5qvy98qPAPb7vNUzypFaoh2pb3vlfzbDO8tB57UPGbtw==", "dev": true }, - "console-stream": { - "version": "0.1.1", - "resolved": "https://registry.npmjs.org/console-stream/-/console-stream-0.1.1.tgz", - "integrity": "sha1-oJX+B7IEZZVfL6/Si11yvM2UnUQ=", + "canonical-path": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/canonical-path/-/canonical-path-1.0.0.tgz", + "integrity": "sha512-feylzsbDxi1gPZ1IjystzIQZagYYLvfKrSuygUCgf7z6x790VEzze5QEkdSV1U58RA7Hi0+v6fv4K54atOzATg==", "dev": true }, - "consolidate": { - "version": "0.13.1", - "resolved": "https://registry.npmjs.org/consolidate/-/consolidate-0.13.1.tgz", - "integrity": "sha1-npUDVo60hQiJ2m7YeoUsjdLRP2Q=", + "caseless": { + "version": "0.12.0", + "resolved": "https://registry.npmjs.org/caseless/-/caseless-0.12.0.tgz", + "integrity": "sha1-G2gcIf+EAzyCZUMJBolCDRhxUdw=", + "dev": true + }, + "caw": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/caw/-/caw-2.0.1.tgz", + "integrity": "sha512-Cg8/ZSBEa8ZVY9HspcGUYaK63d/bN7rqS3CYCzEGUxuYv6UlmcjzDUz2fCFFHyTvUW5Pk0I+3hkA3iXlIj6guA==", "dev": true, "requires": { - "bluebird": "^2.9.26" + "get-proxy": "^2.0.0", + "isurl": "^1.0.0-alpha5", + "tunnel-agent": "^0.6.0", + "url-to-options": "^1.0.1" } }, - "contains-path": { - "version": "0.1.0", - "resolved": "https://registry.npmjs.org/contains-path/-/contains-path-0.1.0.tgz", - "integrity": "sha1-/ozxhP9mcLa67wGp1IYaXL7EEgo=", - "dev": true - }, - "content-disposition": { - "version": "0.5.3", - "resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-0.5.3.tgz", - "integrity": "sha512-ExO0774ikEObIAEV9kDo50o+79VCUdEB6n6lzKgGwupcVeRlhrj3qGAfwq8G6uBJjkqLrhT0qEYFcWng8z1z0g==", + "cdocparser": { + "version": "0.13.0", + "resolved": "https://registry.npmjs.org/cdocparser/-/cdocparser-0.13.0.tgz", + "integrity": "sha1-G6mKHh4WaOK/s11Bdh6eRkXXMbo=", "dev": true, "requires": { - "safe-buffer": "5.1.2" + "escape-string-regexp": "^1.0.2", + "lodash.assign": "^2.4.1", + "strip-indent": "^1.0.0" } }, - "content-type": { - "version": "1.0.4", - "resolved": "https://registry.npmjs.org/content-type/-/content-type-1.0.4.tgz", - "integrity": "sha512-hIP3EEPs8tB9AT1L+NUqtwOAps4mk2Zob89MWXMHjHWg9milF/j4osnnQLXBCBFBk/tvIG/tUc9mOUJiPBhPXA==", - "dev": true - }, - "convert-source-map": { - "version": "1.8.0", - "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.8.0.tgz", - "integrity": "sha512-+OQdjP49zViI/6i7nIJpA8rAl4sV/JdPfU9nZs3VqOwGIgizICvuN2ru6fMd+4llL0tar18UYJXfZ/TWtmhUjA==", + "chalk": { + "version": "2.4.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz", + "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==", "dev": true, "requires": { - "safe-buffer": "~5.1.1" + "ansi-styles": "^3.2.1", + "escape-string-regexp": "^1.0.5", + "supports-color": "^5.3.0" + }, + "dependencies": { + "has-flag": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz", + "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=", + "dev": true + }, + "supports-color": { + "version": "5.5.0", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz", + "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==", + "dev": true, + "requires": { + "has-flag": "^3.0.0" + } + } } }, - "cookie": { - "version": "0.4.0", - "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.4.0.tgz", - "integrity": "sha512-+Hp8fLp57wnUSt0tY0tHEXh4voZRDnoIrZPqlo3DPiI4y9lwg/jqx+1Om94/W6ZaPDOUbnjOt/99w66zk+l1Xg==", + "character-entities": { + "version": "1.2.4", + "resolved": "https://registry.npmjs.org/character-entities/-/character-entities-1.2.4.tgz", + "integrity": "sha512-iBMyeEHxfVnIakwOuDXpVkc54HijNgCyQB2w0VfGQThle6NXn50zU6V/u+LDhxHcDUPojn6Kpga3PTAD8W1bQw==", "dev": true }, - "cookie-signature": { - "version": "1.0.6", - "resolved": "https://registry.npmjs.org/cookie-signature/-/cookie-signature-1.0.6.tgz", - "integrity": "sha1-4wOogrNCzD7oylE6eZmXNNqzriw=", + "character-entities-legacy": { + "version": "1.1.4", + "resolved": "https://registry.npmjs.org/character-entities-legacy/-/character-entities-legacy-1.1.4.tgz", + "integrity": "sha512-3Xnr+7ZFS1uxeiUDvV02wQ+QDbc55o97tIV5zHScSPJpcLm/r0DFPcoY3tYRp+VZukxuMeKgXYmsXQHO05zQeA==", "dev": true }, - "copy-anything": { - "version": "2.0.3", - "resolved": "https://registry.npmjs.org/copy-anything/-/copy-anything-2.0.3.tgz", - "integrity": "sha512-GK6QUtisv4fNS+XcI7shX0Gx9ORg7QqIznyfho79JTnX1XhLiyZHfftvGiziqzRiEi/Bjhgpi+D2o7HxJFPnDQ==", - "dev": true, - "requires": { - "is-what": "^3.12.0" - } + "character-reference-invalid": { + "version": "1.1.4", + "resolved": "https://registry.npmjs.org/character-reference-invalid/-/character-reference-invalid-1.1.4.tgz", + "integrity": "sha512-mKKUkUbhPpQlCOfIuZkvSEgktjPFIsZKRRbC6KWVEMvlzblj3i3asQv5ODsrwt0N3pHAEvjP8KTQPHkp0+6jOg==", + "dev": true }, - "copy-descriptor": { - "version": "0.1.1", - "resolved": "https://registry.npmjs.org/copy-descriptor/-/copy-descriptor-0.1.1.tgz", - "integrity": "sha1-Z29us8OZl8LuGsOpJP1hJHSPV40=", + "chardet": { + "version": "0.7.0", + "resolved": "https://registry.npmjs.org/chardet/-/chardet-0.7.0.tgz", + "integrity": "sha512-mT8iDcrh03qDGRRmoA2hmBJnxpllMR+0/0qlzjqZES6NdiWDcZkCNAk4rPFZ9Q85r27unkiNNg8ZOiwZXBHwcA==", "dev": true }, - "copy-props": { - "version": "2.0.5", - "resolved": "https://registry.npmjs.org/copy-props/-/copy-props-2.0.5.tgz", - "integrity": "sha512-XBlx8HSqrT0ObQwmSzM7WE5k8FxTV75h1DX1Z3n6NhQ/UYYAvInWYmG06vFt7hQZArE2fuO62aihiWIVQwh1sw==", + "chokidar": { + "version": "3.5.2", + "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.2.tgz", + "integrity": "sha512-ekGhOnNVPgT77r4K/U3GDhu+FQ2S8TnK/s2KbIGXi0SZWuwkZ2QNyfWdZW+TVfn84DpEP7rLeCt2UI6bJ8GwbQ==", "dev": true, "requires": { - "each-props": "^1.3.2", - "is-plain-object": "^5.0.0" + "anymatch": "~3.1.2", + "braces": "~3.0.2", + "fsevents": "~2.3.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" }, "dependencies": { - "is-plain-object": { - "version": "5.0.0", - "resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-5.0.0.tgz", - "integrity": "sha512-VRSzKkbMm5jMDoKLbltAkFQ5Qr7VDiTFGXxYFXXowVj387GeGNOCsOH6Msy00SGZ3Fp84b1Naa1psqgcCIEP5Q==", - "dev": true + "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, + "requires": { + "is-glob": "^4.0.1" + } } } }, - "copy-webpack-plugin": { - "version": "9.0.1", - "resolved": "https://registry.npmjs.org/copy-webpack-plugin/-/copy-webpack-plugin-9.0.1.tgz", - "integrity": "sha512-14gHKKdYIxF84jCEgPgYXCPpldbwpxxLbCmA7LReY7gvbaT555DgeBWBgBZM116tv/fO6RRJrsivBqRyRlukhw==", + "chownr": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/chownr/-/chownr-2.0.0.tgz", + "integrity": "sha512-bIomtDF5KGpdogkLd9VspvFzk9KfpyyGlS8YFVZl7TGPBHL5snIOnxeshwVgPteQ9b4Eydl+pVbIyE1DcvCWgQ==", + "dev": true + }, + "chroma-js": { + "version": "1.4.1", + "resolved": "https://registry.npmjs.org/chroma-js/-/chroma-js-1.4.1.tgz", + "integrity": "sha512-jTwQiT859RTFN/vIf7s+Vl/Z2LcMrvMv3WUFmd/4u76AdlFC0NTNgqEEFPcRiHmAswPsMiQEDZLM8vX8qXpZNQ==", + "dev": true + }, + "chrome-trace-event": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/chrome-trace-event/-/chrome-trace-event-1.0.3.tgz", + "integrity": "sha512-p3KULyQg4S7NIHixdwbGX+nFHkoBiA4YQmyWtjb8XngSKV124nJmRysgAeujbUVb15vh+RvFUfCPqU7rXk+hZg==", + "dev": true + }, + "ci-info": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/ci-info/-/ci-info-2.0.0.tgz", + "integrity": "sha512-5tK7EtrZ0N+OLFMthtqOj4fI2Jeb88C4CAZPu25LDVUgXJ0A3Js4PMGqrn0JU1W0Mh1/Z8wZzYPxqUrXeBboCQ==", + "dev": true + }, + "circular-dependency-plugin": { + "version": "5.2.2", + "resolved": "https://registry.npmjs.org/circular-dependency-plugin/-/circular-dependency-plugin-5.2.2.tgz", + "integrity": "sha512-g38K9Cm5WRwlaH6g03B9OEz/0qRizI+2I7n+Gz+L5DxXJAPAiWQvwlYNm1V1jkdpUv95bOe/ASm2vfi/G560jQ==", + "dev": true + }, + "class-utils": { + "version": "0.3.6", + "resolved": "https://registry.npmjs.org/class-utils/-/class-utils-0.3.6.tgz", + "integrity": "sha512-qOhPa/Fj7s6TY8H8esGu5QNpMMQxz79h+urzrNYN6mn+9BnxlDGf5QZ+XeCDsxSjPqsSR56XOZOJmpeurnLMeg==", "dev": true, "requires": { - "fast-glob": "^3.2.5", - "glob-parent": "^6.0.0", - "globby": "^11.0.3", - "normalize-path": "^3.0.0", - "p-limit": "^3.1.0", - "schema-utils": "^3.0.0", - "serialize-javascript": "^6.0.0" + "arr-union": "^3.1.0", + "define-property": "^0.2.5", + "isobject": "^3.0.0", + "static-extend": "^0.1.1" }, "dependencies": { - "ajv": { - "version": "6.12.6", - "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz", - "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==", - "dev": true, - "requires": { - "fast-deep-equal": "^3.1.1", - "fast-json-stable-stringify": "^2.0.0", - "json-schema-traverse": "^0.4.1", - "uri-js": "^4.2.2" - } - }, - "json-schema-traverse": { - "version": "0.4.1", - "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz", - "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==", - "dev": true - }, - "p-limit": { - "version": "3.1.0", - "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-3.1.0.tgz", - "integrity": "sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==", - "dev": true, - "requires": { - "yocto-queue": "^0.1.0" - } - }, - "schema-utils": { - "version": "3.1.1", - "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.1.1.tgz", - "integrity": "sha512-Y5PQxS4ITlC+EahLuXaY86TXfR7Dc5lw294alXOq86JAHCihAIZfqv8nNCWvaEJvaC51uN9hbLGeV0cFBdH+Fw==", + "define-property": { + "version": "0.2.5", + "resolved": "https://registry.npmjs.org/define-property/-/define-property-0.2.5.tgz", + "integrity": "sha1-w1se+RjsPJkPmlvFe+BKrOxcgRY=", "dev": true, "requires": { - "@types/json-schema": "^7.0.8", - "ajv": "^6.12.5", - "ajv-keywords": "^3.5.2" + "is-descriptor": "^0.1.0" } } } }, - "core-js": { - "version": "2.6.12", - "resolved": "https://registry.npmjs.org/core-js/-/core-js-2.6.12.tgz", - "integrity": "sha512-Kb2wC0fvsWfQrgk8HU5lW6U/Lcs8+9aaYcy4ZFc6DDlo4nZ7n70dEgE5rtR0oG6ufKDUnrwfWL1mXR5ljDatrQ==" - }, - "core-js-compat": { - "version": "3.16.0", - "resolved": "https://registry.npmjs.org/core-js-compat/-/core-js-compat-3.16.0.tgz", - "integrity": "sha512-5D9sPHCdewoUK7pSUPfTF7ZhLh8k9/CoJXWUEo+F1dZT5Z1DVgcuRqUKhjeKW+YLb8f21rTFgWwQJiNw1hoZ5Q==", + "clean-css": { + "version": "4.2.3", + "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-4.2.3.tgz", + "integrity": "sha512-VcMWDN54ZN/DS+g58HYL5/n4Zrqe8vHJpGA8KdgUXFU4fuP/aHNw8eld9SyEIyabIMJX/0RaY/fplOo5hYLSFA==", "dev": true, "requires": { - "browserslist": "^4.16.6", - "semver": "7.0.0" + "source-map": "~0.6.0" }, "dependencies": { - "semver": { - "version": "7.0.0", - "resolved": "https://registry.npmjs.org/semver/-/semver-7.0.0.tgz", - "integrity": "sha512-+GB6zVA9LWh6zovYQLALHwv5rb2PHGlJi3lfiqIHxR0uuwCgefcOJc59v9fv1w8GbStwxuuqqAjI9NMAOOgq1A==", + "source-map": { + "version": "0.6.1", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", + "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", "dev": true } } }, - "core-js-pure": { - "version": "3.15.2", - "resolved": "https://registry.npmjs.org/core-js-pure/-/core-js-pure-3.15.2.tgz", - "integrity": "sha512-D42L7RYh1J2grW8ttxoY1+17Y4wXZeKe7uyplAI3FkNQyI5OgBIAjUfFiTPfL1rs0qLpxaabITNbjKl1Sp82tA==", + "clean-stack": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/clean-stack/-/clean-stack-2.2.0.tgz", + "integrity": "sha512-4diC9HaTE+KRAMWhDhrGOECgWZxoevMc5TlkObMqNSsVU62PYzXZ/SMTjzyGAFF1YusgxGcSWTEXBhp0CPwQ1A==", "dev": true }, - "core-util-is": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.2.tgz", - "integrity": "sha1-tf1UIgqivFq1eqtxQMlAdUUDwac=" + "cli-boxes": { + "version": "2.2.1", + "resolved": "https://registry.npmjs.org/cli-boxes/-/cli-boxes-2.2.1.tgz", + "integrity": "sha512-y4coMcylgSCdVinjiDBuR8PCC2bLjyGTwEmPb9NHR/QaNU6EUOXcTY/s6VjGMD6ENSEaeQYHCY0GNGS5jfMwPw==", + "dev": true }, - "cors": { - "version": "2.8.5", - "resolved": "https://registry.npmjs.org/cors/-/cors-2.8.5.tgz", - "integrity": "sha512-KIHbLJqu73RGr/hnbrO9uBeixNGuvSQjul/jdFvS/KFSIH1hWVd1ng7zOHx+YrEfInLG7q4n6GHQ9cDtxv/P6g==", + "cli-cursor": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/cli-cursor/-/cli-cursor-3.1.0.tgz", + "integrity": "sha512-I/zHAwsKf9FqGoXM4WWRACob9+SNukZTd94DWF57E4toouRulbCxcUh6RKUEOQlYTHJnzkPMySvPNaaSLNfLZw==", "dev": true, "requires": { - "object-assign": "^4", - "vary": "^1" + "restore-cursor": "^3.1.0" } }, - "cosmiconfig": { - "version": "7.0.0", - "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-7.0.0.tgz", - "integrity": "sha512-pondGvTuVYDk++upghXJabWzL6Kxu6f26ljFw64Swq9v6sQPUL3EUlVDV56diOjpCayKihL6hVe8exIACU4XcA==", + "cli-spinners": { + "version": "2.6.1", + "resolved": "https://registry.npmjs.org/cli-spinners/-/cli-spinners-2.6.1.tgz", + "integrity": "sha512-x/5fWmGMnbKQAaNwN+UZlV79qBLM9JFnJuJ03gIi5whrob0xV0ofNVHy9DhwGdsMJQc2OKv0oGmLzvaqvAVv+g==", + "dev": true + }, + "cli-width": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/cli-width/-/cli-width-3.0.0.tgz", + "integrity": "sha512-FxqpkPPwu1HjuN93Omfm4h8uIanXofW0RxVEW3k5RKx+mJJYSthzNhp32Kzxxy3YAEZ/Dc/EWN1vZRY0+kOhbw==", + "dev": true + }, + "cliui": { + "version": "7.0.4", + "resolved": "https://registry.npmjs.org/cliui/-/cliui-7.0.4.tgz", + "integrity": "sha512-OcRE68cOsVMXp1Yvonl/fzkQOyjLSu/8bhPDfQt0e0/Eb283TKP20Fs2MqoPsr9SwA595rRCA+QMzYc9nBP+JQ==", "dev": true, "requires": { - "@types/parse-json": "^4.0.0", - "import-fresh": "^3.2.1", - "parse-json": "^5.0.0", - "path-type": "^4.0.0", - "yaml": "^1.10.0" + "string-width": "^4.2.0", + "strip-ansi": "^6.0.0", + "wrap-ansi": "^7.0.0" } }, - "coveralls": { - "version": "3.1.1", - "resolved": "https://registry.npmjs.org/coveralls/-/coveralls-3.1.1.tgz", - "integrity": "sha512-+dxnG2NHncSD1NrqbSM3dn/lE57O6Qf/koe9+I7c+wzkqRmEvcp0kgJdxKInzYzkICKkFMZsX3Vct3++tsF9ww==", + "clone": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/clone/-/clone-1.0.4.tgz", + "integrity": "sha1-2jCcwmPfFZlMaIypAheco8fNfH4=", + "dev": true + }, + "clone-buffer": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/clone-buffer/-/clone-buffer-1.0.0.tgz", + "integrity": "sha1-4+JbIHrE5wGvch4staFnksrD3Fg=", + "dev": true + }, + "clone-deep": { + "version": "4.0.1", + "resolved": "https://registry.npmjs.org/clone-deep/-/clone-deep-4.0.1.tgz", + "integrity": "sha512-neHB9xuzh/wk0dIHweyAXv2aPGZIVk3pLMe+/RNzINf17fe0OG96QroktYAUm7SM1PBnzTabaLboqqxDyMU+SQ==", "dev": true, "requires": { - "js-yaml": "^3.13.1", - "lcov-parse": "^1.0.0", - "log-driver": "^1.2.7", - "minimist": "^1.2.5", - "request": "^2.88.2" + "is-plain-object": "^2.0.4", + "kind-of": "^6.0.2", + "shallow-clone": "^3.0.0" } }, - "critters": { - "version": "0.0.10", - "resolved": "https://registry.npmjs.org/critters/-/critters-0.0.10.tgz", - "integrity": "sha512-p5VKhP1803+f+0Jq5P03w1SbiHtpAKm+1EpJHkiPxQPq0Vu9QLZHviJ02GRrWi0dlcJqrmzMWInbwp4d22RsGw==", + "clone-regexp": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/clone-regexp/-/clone-regexp-2.2.0.tgz", + "integrity": "sha512-beMpP7BOtTipFuW8hrJvREQ2DrRu3BE7by0ZpibtfBA+qfHYvMGTc2Yb1JMYPKg/JUw0CHYvpg796aNTSW9z7Q==", "dev": true, "requires": { - "chalk": "^4.1.0", - "css": "^3.0.0", - "parse5": "^6.0.1", - "parse5-htmlparser2-tree-adapter": "^6.0.1", - "pretty-bytes": "^5.3.0" - }, - "dependencies": { - "ansi-styles": { - "version": "4.3.0", - "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz", - "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==", - "dev": true, - "requires": { - "color-convert": "^2.0.1" - } - }, - "chalk": { - "version": "4.1.2", - "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", - "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", - "dev": true, - "requires": { - "ansi-styles": "^4.1.0", - "supports-color": "^7.1.0" - } - }, - "color-convert": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", - "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==", - "dev": true, - "requires": { - "color-name": "~1.1.4" - } - }, - "color-name": { - "version": "1.1.4", - "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz", - "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==", - "dev": true - }, - "has-flag": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz", - "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==", - "dev": true - }, - "supports-color": { - "version": "7.2.0", - "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz", - "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==", - "dev": true, - "requires": { - "has-flag": "^4.0.0" - } - } + "is-regexp": "^2.0.0" } }, - "cross-spawn": { - "version": "6.0.5", - "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-6.0.5.tgz", - "integrity": "sha512-eTVLrBSt7fjbDygz805pMnstIs2VTBNkRm0qxZd+M7A5XDdxVRWO5MxGBXZhjY4cqLYLdtrGqRf8mBPmzwSpWQ==", + "clone-response": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/clone-response/-/clone-response-1.0.2.tgz", + "integrity": "sha1-0dyXOSAxTfZ/vrlCI7TuNQI56Ws=", "dev": true, "requires": { - "nice-try": "^1.0.4", - "path-key": "^2.0.1", - "semver": "^5.5.0", - "shebang-command": "^1.2.0", - "which": "^1.2.9" - }, - "dependencies": { - "semver": { - "version": "5.7.1", - "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz", - "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==", - "dev": true - } + "mimic-response": "^1.0.0" } }, - "crypto-random-string": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/crypto-random-string/-/crypto-random-string-2.0.0.tgz", - "integrity": "sha512-v1plID3y9r/lPhviJ1wrXpLeyUIGAZ2SHNYTEapm7/8A9nLPoyvVp3RK/EPFqn5kEznyWgYZNsRtYYIWbuG8KA==", + "clone-stats": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/clone-stats/-/clone-stats-1.0.0.tgz", + "integrity": "sha1-s3gt/4u1R04Yuba/D9/ngvh3doA=", "dev": true }, - "css": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/css/-/css-3.0.0.tgz", - "integrity": "sha512-DG9pFfwOrzc+hawpmqX/dHYHJG+Bsdb0klhyi1sDneOgGOXy9wQIC8hzyVp1e4NRYDBdxcylvywPkkXCHAzTyQ==", - "dev": true, - "requires": { - "inherits": "^2.0.4", - "source-map": "^0.6.1", - "source-map-resolve": "^0.6.0" - }, - "dependencies": { - "source-map": { - "version": "0.6.1", - "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", - "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", - "dev": true - } - } - }, - "css-blank-pseudo": { - "version": "0.1.4", - "resolved": "https://registry.npmjs.org/css-blank-pseudo/-/css-blank-pseudo-0.1.4.tgz", - "integrity": "sha512-LHz35Hr83dnFeipc7oqFDmsjHdljj3TQtxGGiNWSOsTLIAubSm4TEz8qCaKFpk7idaQ1GfWscF4E6mgpBysA1w==", + "cloneable-readable": { + "version": "1.1.3", + "resolved": "https://registry.npmjs.org/cloneable-readable/-/cloneable-readable-1.1.3.tgz", + "integrity": "sha512-2EF8zTQOxYq70Y4XKtorQupqF0m49MBz2/yf5Bj+MHjvpG3Hy7sImifnqD6UA+TKYxeSV+u6qqQPawN5UvnpKQ==", "dev": true, "requires": { - "postcss": "^7.0.5" - }, - "dependencies": { - "has-flag": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz", - "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=", - "dev": true - }, - "postcss": { - "version": "7.0.36", - "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.36.tgz", - "integrity": "sha512-BebJSIUMwJHRH0HAQoxN4u1CN86glsrwsW0q7T+/m44eXOUAxSNdHRkNZPYz5vVUbg17hFgOQDE7fZk7li3pZw==", - "dev": true, - "requires": { - "chalk": "^2.4.2", - "source-map": "^0.6.1", - "supports-color": "^6.1.0" - } - }, - "source-map": { - "version": "0.6.1", - "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", - "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", - "dev": true - }, - "supports-color": { - "version": "6.1.0", - "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz", - "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==", - "dev": true, - "requires": { - "has-flag": "^3.0.0" - } - } + "inherits": "^2.0.1", + "process-nextick-args": "^2.0.0", + "readable-stream": "^2.3.5" } }, - "css-color-names": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/css-color-names/-/css-color-names-1.0.1.tgz", - "integrity": "sha512-/loXYOch1qU1biStIFsHH8SxTmOseh1IJqFvy8IujXOm1h+QjUdDhkzOrR5HG8K8mlxREj0yfi8ewCHx0eMxzA==", + "code-point-at": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/code-point-at/-/code-point-at-1.1.0.tgz", + "integrity": "sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c=", "dev": true }, - "css-declaration-sorter": { - "version": "6.0.3", - "resolved": "https://registry.npmjs.org/css-declaration-sorter/-/css-declaration-sorter-6.0.3.tgz", - "integrity": "sha512-52P95mvW1SMzuRZegvpluT6yEv0FqQusydKQPZsNN5Q7hh8EwQvN8E2nwuJ16BBvNN6LcoIZXu/Bk58DAhrrxw==", - "dev": true, - "requires": { - "timsort": "^0.3.0" - } - }, - "css-has-pseudo": { - "version": "0.10.0", - "resolved": "https://registry.npmjs.org/css-has-pseudo/-/css-has-pseudo-0.10.0.tgz", - "integrity": "sha512-Z8hnfsZu4o/kt+AuFzeGpLVhFOGO9mluyHBaA2bA8aCGTwah5sT3WV/fTHH8UNZUytOIImuGPrl/prlb4oX4qQ==", + "codelyzer": { + "version": "6.0.2", + "resolved": "https://registry.npmjs.org/codelyzer/-/codelyzer-6.0.2.tgz", + "integrity": "sha512-v3+E0Ucu2xWJMOJ2fA/q9pDT/hlxHftHGPUay1/1cTgyPV5JTHFdO9hqo837Sx2s9vKBMTt5gO+lhF95PO6J+g==", "dev": true, "requires": { - "postcss": "^7.0.6", - "postcss-selector-parser": "^5.0.0-rc.4" + "@angular/compiler": "9.0.0", + "@angular/core": "9.0.0", + "app-root-path": "^3.0.0", + "aria-query": "^3.0.0", + "axobject-query": "2.0.2", + "css-selector-tokenizer": "^0.7.1", + "cssauron": "^1.4.0", + "damerau-levenshtein": "^1.0.4", + "rxjs": "^6.5.3", + "semver-dsl": "^1.0.1", + "source-map": "^0.5.7", + "sprintf-js": "^1.1.2", + "tslib": "^1.10.0", + "zone.js": "~0.10.3" }, "dependencies": { - "cssesc": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-2.0.0.tgz", - "integrity": "sha512-MsCAG1z9lPdoO/IUMLSBWBSVxVtJ1395VGIQ+Fc2gNdkQ1hNDnQdw3YhA71WJCBW1vdwA0cAnk/DnW6bqoEUYg==", + "@angular/compiler": { + "version": "9.0.0", + "resolved": "https://registry.npmjs.org/@angular/compiler/-/compiler-9.0.0.tgz", + "integrity": "sha512-ctjwuntPfZZT2mNj2NDIVu51t9cvbhl/16epc5xEwyzyDt76pX9UgwvY+MbXrf/C/FWwdtmNtfP698BKI+9leQ==", "dev": true }, - "has-flag": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz", - "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=", + "@angular/core": { + "version": "9.0.0", + "resolved": "https://registry.npmjs.org/@angular/core/-/core-9.0.0.tgz", + "integrity": "sha512-6Pxgsrf0qF9iFFqmIcWmjJGkkCaCm6V5QNnxMy2KloO3SDq6QuMVRbN9RtC8Urmo25LP+eZ6ZgYqFYpdD8Hd9w==", "dev": true }, - "postcss": { - "version": "7.0.36", - "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.36.tgz", - "integrity": "sha512-BebJSIUMwJHRH0HAQoxN4u1CN86glsrwsW0q7T+/m44eXOUAxSNdHRkNZPYz5vVUbg17hFgOQDE7fZk7li3pZw==", + "aria-query": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-3.0.0.tgz", + "integrity": "sha1-ZbP8wcoRVajJrmTW7uKX8V1RM8w=", "dev": true, "requires": { - "chalk": "^2.4.2", - "source-map": "^0.6.1", - "supports-color": "^6.1.0" + "ast-types-flow": "0.0.7", + "commander": "^2.11.0" } }, - "postcss-selector-parser": { - "version": "5.0.0", - "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-5.0.0.tgz", - "integrity": "sha512-w+zLE5Jhg6Liz8+rQOWEAwtwkyqpfnmsinXjXg6cY7YIONZZtgvE0v2O0uhQBs0peNomOJwWRKt6JBfTdTd3OQ==", + "axobject-query": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-2.0.2.tgz", + "integrity": "sha512-MCeek8ZH7hKyO1rWUbKNQBbl4l2eY0ntk7OGi+q0RlafrCnfPxC06WZA+uebCfmYp4mNU9jRBP1AhGyf8+W3ww==", "dev": true, "requires": { - "cssesc": "^2.0.0", - "indexes-of": "^1.0.1", - "uniq": "^1.0.1" + "ast-types-flow": "0.0.7" } }, + "commander": { + "version": "2.20.3", + "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz", + "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==", + "dev": true + }, "source-map": { - "version": "0.6.1", - "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", - "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", + "version": "0.5.7", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz", + "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=", "dev": true }, - "supports-color": { - "version": "6.1.0", - "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz", - "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==", - "dev": true, - "requires": { - "has-flag": "^3.0.0" - } + "sprintf-js": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.1.2.tgz", + "integrity": "sha512-VE0SOVEHCk7Qc8ulkWw3ntAzXuqf7S2lvwQaDLRnUeIEaKNQJzV6BwmLKhOqT61aGhfUMrXeaBk+oDGCzvhcug==", + "dev": true + }, + "tslib": { + "version": "1.14.1", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz", + "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==", + "dev": true + }, + "zone.js": { + "version": "0.10.3", + "resolved": "https://registry.npmjs.org/zone.js/-/zone.js-0.10.3.tgz", + "integrity": "sha512-LXVLVEq0NNOqK/fLJo3d0kfzd4sxwn2/h67/02pjCjfKDxgx1i9QqpvtHD8CrBnSSwMw5+dy11O7FRX5mkO7Cg==", + "dev": true } } }, - "css-loader": { - "version": "6.2.0", - "resolved": "https://registry.npmjs.org/css-loader/-/css-loader-6.2.0.tgz", - "integrity": "sha512-/rvHfYRjIpymZblf49w8jYcRo2y9gj6rV8UroHGmBxKrIyGLokpycyKzp9OkitvqT29ZSpzJ0Ic7SpnJX3sC8g==", + "collection-map": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/collection-map/-/collection-map-1.0.0.tgz", + "integrity": "sha1-rqDwb40mx4DCt1SUOFVEsiVa8Yw=", "dev": true, "requires": { - "icss-utils": "^5.1.0", - "postcss": "^8.2.15", - "postcss-modules-extract-imports": "^3.0.0", - "postcss-modules-local-by-default": "^4.0.0", - "postcss-modules-scope": "^3.0.0", - "postcss-modules-values": "^4.0.0", - "postcss-value-parser": "^4.1.0", - "semver": "^7.3.5" - } - }, - "css-minimizer-webpack-plugin": { - "version": "3.0.2", - "resolved": "https://registry.npmjs.org/css-minimizer-webpack-plugin/-/css-minimizer-webpack-plugin-3.0.2.tgz", - "integrity": "sha512-B3I5e17RwvKPJwsxjjWcdgpU/zqylzK1bPVghcmpFHRL48DXiBgrtqz1BJsn68+t/zzaLp9kYAaEDvQ7GyanFQ==", - "dev": true, - "requires": { - "cssnano": "^5.0.6", - "jest-worker": "^27.0.2", - "p-limit": "^3.0.2", - "postcss": "^8.3.5", - "schema-utils": "^3.0.0", - "serialize-javascript": "^6.0.0", - "source-map": "^0.6.1" - }, - "dependencies": { - "ajv": { - "version": "6.12.6", - "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz", - "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==", - "dev": true, - "requires": { - "fast-deep-equal": "^3.1.1", - "fast-json-stable-stringify": "^2.0.0", - "json-schema-traverse": "^0.4.1", - "uri-js": "^4.2.2" - } - }, - "json-schema-traverse": { - "version": "0.4.1", - "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz", - "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==", - "dev": true - }, - "p-limit": { - "version": "3.1.0", - "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-3.1.0.tgz", - "integrity": "sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==", - "dev": true, - "requires": { - "yocto-queue": "^0.1.0" - } - }, - "schema-utils": { - "version": "3.1.1", - "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.1.1.tgz", - "integrity": "sha512-Y5PQxS4ITlC+EahLuXaY86TXfR7Dc5lw294alXOq86JAHCihAIZfqv8nNCWvaEJvaC51uN9hbLGeV0cFBdH+Fw==", - "dev": true, - "requires": { - "@types/json-schema": "^7.0.8", - "ajv": "^6.12.5", - "ajv-keywords": "^3.5.2" - } - }, - "source-map": { - "version": "0.6.1", - "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", - "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", - "dev": true - } - } - }, - "css-parse": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/css-parse/-/css-parse-2.0.0.tgz", - "integrity": "sha1-pGjuZnwW2BzPBcWMONKpfHgNv9Q=", - "dev": true, - "requires": { - "css": "^2.0.0" - }, - "dependencies": { - "css": { - "version": "2.2.4", - "resolved": "https://registry.npmjs.org/css/-/css-2.2.4.tgz", - "integrity": "sha512-oUnjmWpy0niI3x/mPL8dVEI1l7MnG3+HHyRPHf+YFSbK+svOhXpmSOcDURUh2aOCgl2grzrOPt1nHLuCVFULLw==", - "dev": true, - "requires": { - "inherits": "^2.0.3", - "source-map": "^0.6.1", - "source-map-resolve": "^0.5.2", - "urix": "^0.1.0" - } - }, - "source-map": { - "version": "0.6.1", - "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", - "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", - "dev": true - }, - "source-map-resolve": { - "version": "0.5.3", - "resolved": "https://registry.npmjs.org/source-map-resolve/-/source-map-resolve-0.5.3.tgz", - "integrity": "sha512-Htz+RnsXWk5+P2slx5Jh3Q66vhQj1Cllm0zvnaY98+NFx+Dv2CF/f5O/t8x+KaNdrdIAsruNzoh/KpialbqAnw==", - "dev": true, - "requires": { - "atob": "^2.1.2", - "decode-uri-component": "^0.2.0", - "resolve-url": "^0.2.1", - "source-map-url": "^0.4.0", - "urix": "^0.1.0" - } - } + "arr-map": "^2.0.2", + "for-own": "^1.0.0", + "make-iterator": "^1.0.0" } }, - "css-prefers-color-scheme": { - "version": "3.1.1", - "resolved": "https://registry.npmjs.org/css-prefers-color-scheme/-/css-prefers-color-scheme-3.1.1.tgz", - "integrity": "sha512-MTu6+tMs9S3EUqzmqLXEcgNRbNkkD/TGFvowpeoWJn5Vfq7FMgsmRQs9X5NXAURiOBmOxm/lLjsDNXDE6k9bhg==", + "collection-visit": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/collection-visit/-/collection-visit-1.0.0.tgz", + "integrity": "sha1-S8A3PBZLwykbTTaMgpzxqApZ3KA=", "dev": true, "requires": { - "postcss": "^7.0.5" - }, - "dependencies": { - "has-flag": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz", - "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=", - "dev": true - }, - "postcss": { - "version": "7.0.36", - "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.36.tgz", - "integrity": "sha512-BebJSIUMwJHRH0HAQoxN4u1CN86glsrwsW0q7T+/m44eXOUAxSNdHRkNZPYz5vVUbg17hFgOQDE7fZk7li3pZw==", - "dev": true, - "requires": { - "chalk": "^2.4.2", - "source-map": "^0.6.1", - "supports-color": "^6.1.0" - } - }, - "source-map": { - "version": "0.6.1", - "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", - "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", - "dev": true - }, - "supports-color": { - "version": "6.1.0", - "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz", - "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==", - "dev": true, - "requires": { - "has-flag": "^3.0.0" - } - } + "map-visit": "^1.0.0", + "object-visit": "^1.0.0" } }, - "css-select": { - "version": "4.1.3", - "resolved": "https://registry.npmjs.org/css-select/-/css-select-4.1.3.tgz", - "integrity": "sha512-gT3wBNd9Nj49rAbmtFHj1cljIAOLYSX1nZ8CB7TBO3INYckygm5B7LISU/szY//YmdiSLbJvDLOx9VnMVpMBxA==", + "color-convert": { + "version": "1.9.3", + "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz", + "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==", "dev": true, "requires": { - "boolbase": "^1.0.0", - "css-what": "^5.0.0", - "domhandler": "^4.2.0", - "domutils": "^2.6.0", - "nth-check": "^2.0.0" + "color-name": "1.1.3" } }, - "css-selector-tokenizer": { - "version": "0.7.3", - "resolved": "https://registry.npmjs.org/css-selector-tokenizer/-/css-selector-tokenizer-0.7.3.tgz", - "integrity": "sha512-jWQv3oCEL5kMErj4wRnK/OPoBi0D+P1FR2cDCKYPaMeD2eW3/mttav8HT4hT1CKopiJI/psEULjkClhvJo4Lvg==", - "dev": true, - "requires": { - "cssesc": "^3.0.0", - "fastparse": "^1.1.2" - } + "color-name": { + "version": "1.1.3", + "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz", + "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=", + "dev": true }, - "css-tree": { + "color-support": { "version": "1.1.3", - "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.1.3.tgz", - "integrity": "sha512-tRpdppF7TRazZrjJ6v3stzv93qxRcSsFmW6cX0Zm2NVKpxE1WV1HblnghVv9TreireHkqI/VDEsfolRF1p6y7Q==", - "dev": true, - "requires": { - "mdn-data": "2.0.14", - "source-map": "^0.6.1" - }, - "dependencies": { - "source-map": { - "version": "0.6.1", - "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", - "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", - "dev": true - } - } + "resolved": "https://registry.npmjs.org/color-support/-/color-support-1.1.3.tgz", + "integrity": "sha512-qiBjkpbMLO/HL68y+lh4q0/O1MZFj2RX6X/KmMa3+gJD3z+WwI1ZzDHysvqHGS3mP6mznPckpXmw1nI9cJjyRg==", + "dev": true }, - "css-what": { - "version": "5.0.1", - "resolved": "https://registry.npmjs.org/css-what/-/css-what-5.0.1.tgz", - "integrity": "sha512-FYDTSHb/7KXsWICVsxdmiExPjCfRC4qRFBdVwv7Ax9hMnvMmEjP9RfxTEZ3qPZGmADDn2vAKSo9UcN1jKVYscg==", + "colorette": { + "version": "1.2.2", + "resolved": "https://registry.npmjs.org/colorette/-/colorette-1.2.2.tgz", + "integrity": "sha512-MKGMzyfeuutC/ZJ1cba9NqcNpfeqMUcYmyF1ZFY6/Cn7CNSAKx6a+s48sqLqyAiZuaP2TcqMhoo+dlwFnVxT9w==", "dev": true }, - "cssauron": { + "colors": { "version": "1.4.0", - "resolved": "https://registry.npmjs.org/cssauron/-/cssauron-1.4.0.tgz", - "integrity": "sha1-pmAt/34EqDBtwNuaVR6S6LVmKtg=", + "resolved": "https://registry.npmjs.org/colors/-/colors-1.4.0.tgz", + "integrity": "sha512-a+UqTh4kgZg/SlGvfbzDHpgRu7AAQOmmqRHJnxhRZICKFUT91brVhNNt58CMWU9PsBbv3PDCZUHbVxuDiH2mtA==", + "dev": true + }, + "combined-stream": { + "version": "1.0.8", + "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz", + "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==", "dev": true, "requires": { - "through": "X.X.X" + "delayed-stream": "~1.0.0" } }, - "cssdb": { - "version": "4.4.0", - "resolved": "https://registry.npmjs.org/cssdb/-/cssdb-4.4.0.tgz", - "integrity": "sha512-LsTAR1JPEM9TpGhl/0p3nQecC2LJ0kD8X5YARu1hk/9I1gril5vDtMZyNxcEpxxDj34YNck/ucjuoUd66K03oQ==", + "commander": { + "version": "2.20.3", + "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz", + "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==", "dev": true }, - "cssesc": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz", - "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==", + "comment-parser": { + "version": "0.7.6", + "resolved": "https://registry.npmjs.org/comment-parser/-/comment-parser-0.7.6.tgz", + "integrity": "sha512-GKNxVA7/iuTnAqGADlTWX4tkhzxZKXp5fLJqKTlQLHkE65XDUKutZ3BHaJC5IGcper2tT3QRD1xr4o3jNpgXXg==", "dev": true }, - "cssnano": { - "version": "5.0.6", - "resolved": "https://registry.npmjs.org/cssnano/-/cssnano-5.0.6.tgz", - "integrity": "sha512-NiaLH/7yqGksFGsFNvSRe2IV/qmEBAeDE64dYeD8OBrgp6lE8YoMeQJMtsv5ijo6MPyhuoOvFhI94reahBRDkw==", - "dev": true, - "requires": { - "cosmiconfig": "^7.0.0", - "cssnano-preset-default": "^5.1.3", - "is-resolvable": "^1.1.0" - } - }, - "cssnano-preset-default": { - "version": "5.1.3", - "resolved": "https://registry.npmjs.org/cssnano-preset-default/-/cssnano-preset-default-5.1.3.tgz", - "integrity": "sha512-qo9tX+t4yAAZ/yagVV3b+QBKeLklQbmgR3wI7mccrDcR+bEk9iHgZN1E7doX68y9ThznLya3RDmR+nc7l6/2WQ==", - "dev": true, - "requires": { - "css-declaration-sorter": "^6.0.3", - "cssnano-utils": "^2.0.1", - "postcss-calc": "^8.0.0", - "postcss-colormin": "^5.2.0", - "postcss-convert-values": "^5.0.1", - "postcss-discard-comments": "^5.0.1", - "postcss-discard-duplicates": "^5.0.1", - "postcss-discard-empty": "^5.0.1", - "postcss-discard-overridden": "^5.0.1", - "postcss-merge-longhand": "^5.0.2", - "postcss-merge-rules": "^5.0.2", - "postcss-minify-font-values": "^5.0.1", - "postcss-minify-gradients": "^5.0.1", - "postcss-minify-params": "^5.0.1", - "postcss-minify-selectors": "^5.1.0", - "postcss-normalize-charset": "^5.0.1", - "postcss-normalize-display-values": "^5.0.1", - "postcss-normalize-positions": "^5.0.1", - "postcss-normalize-repeat-style": "^5.0.1", - "postcss-normalize-string": "^5.0.1", - "postcss-normalize-timing-functions": "^5.0.1", - "postcss-normalize-unicode": "^5.0.1", - "postcss-normalize-url": "^5.0.2", - "postcss-normalize-whitespace": "^5.0.1", - "postcss-ordered-values": "^5.0.2", - "postcss-reduce-initial": "^5.0.1", - "postcss-reduce-transforms": "^5.0.1", - "postcss-svgo": "^5.0.2", - "postcss-unique-selectors": "^5.0.1" - } - }, - "cssnano-utils": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/cssnano-utils/-/cssnano-utils-2.0.1.tgz", - "integrity": "sha512-i8vLRZTnEH9ubIyfdZCAdIdgnHAUeQeByEeQ2I7oTilvP9oHO6RScpeq3GsFUVqeB8uZgOQ9pw8utofNn32hhQ==", + "commondir": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/commondir/-/commondir-1.0.1.tgz", + "integrity": "sha1-3dgA2gxmEnOTzKWVDqloo6rxJTs=", "dev": true }, - "csso": { - "version": "4.2.0", - "resolved": "https://registry.npmjs.org/csso/-/csso-4.2.0.tgz", - "integrity": "sha512-wvlcdIbf6pwKEk7vHj8/Bkc0B4ylXZruLvOgs9doS5eOsOpuodOV2zJChSpkp+pRpYQLQMeF04nr3Z68Sta9jA==", - "dev": true, - "requires": { - "css-tree": "^1.1.2" - } + "component-bind": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/component-bind/-/component-bind-1.0.0.tgz", + "integrity": "sha1-AMYIq33Nk4l8AAllGx06jh5zu9E=", + "dev": true }, - "cuint": { - "version": "0.2.2", - "resolved": "https://registry.npmjs.org/cuint/-/cuint-0.2.2.tgz", - "integrity": "sha1-QICG1AlVDCYxFVYZ6fp7ytw7mRs=", + "component-emitter": { + "version": "1.3.0", + "resolved": "https://registry.npmjs.org/component-emitter/-/component-emitter-1.3.0.tgz", + "integrity": "sha512-Rd3se6QB+sO1TwqZjscQrurpEPIfO0/yYnSin6Q/rD3mOutHvUrCAhJub3r90uNb+SESBuE0QYoB90YdfatsRg==", "dev": true }, - "currently-unhandled": { - "version": "0.4.1", - "resolved": "https://registry.npmjs.org/currently-unhandled/-/currently-unhandled-0.4.1.tgz", - "integrity": "sha1-mI3zP+qxke95mmE2nddsF635V+o=", + "component-inherit": { + "version": "0.0.3", + "resolved": "https://registry.npmjs.org/component-inherit/-/component-inherit-0.0.3.tgz", + "integrity": "sha1-ZF/ErfWLcrZJ1crmUTVhnbJv8UM=", + "dev": true + }, + "compressible": { + "version": "2.0.18", + "resolved": "https://registry.npmjs.org/compressible/-/compressible-2.0.18.tgz", + "integrity": "sha512-AF3r7P5dWxL8MxyITRMlORQNaOA2IkAFaTr4k7BUumjPtRpGDTZpl0Pb1XCO6JeDCBdp126Cgs9sMxqSjgYyRg==", "dev": true, "requires": { - "array-find-index": "^1.0.1" + "mime-db": ">= 1.43.0 < 2" } }, - "custom-event": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/custom-event/-/custom-event-1.0.1.tgz", - "integrity": "sha1-XQKkaFCt8bSjF5RqOSj8y1v9BCU=", - "dev": true - }, - "d": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/d/-/d-1.0.1.tgz", - "integrity": "sha512-m62ShEObQ39CfralilEQRjH6oAMtNCV1xJyEx5LpRYUVN+EviphDgUc/F3hnYbADmkiNs67Y+3ylmlG7Lnu+FA==", - "dev": true, - "requires": { - "es5-ext": "^0.10.50", - "type": "^1.0.1" - } - }, - "damerau-levenshtein": { - "version": "1.0.7", - "resolved": "https://registry.npmjs.org/damerau-levenshtein/-/damerau-levenshtein-1.0.7.tgz", - "integrity": "sha512-VvdQIPGdWP0SqFXghj79Wf/5LArmreyMsGLa6FG6iC4t3j7j5s71TrwWmT/4akbDQIqjfACkLZmjXhA7g2oUZw==", - "dev": true - }, - "dargs": { - "version": "4.1.0", - "resolved": "https://registry.npmjs.org/dargs/-/dargs-4.1.0.tgz", - "integrity": "sha1-A6nbtLXC8Tm/FK5T8LiipqhvThc=", - "dev": true, - "requires": { - "number-is-nan": "^1.0.0" - } - }, - "dashdash": { - "version": "1.14.1", - "resolved": "https://registry.npmjs.org/dashdash/-/dashdash-1.14.1.tgz", - "integrity": "sha1-hTz6D3y+L+1d4gMmuN1YEDX24vA=", - "dev": true, - "requires": { - "assert-plus": "^1.0.0" - } - }, - "date-format": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/date-format/-/date-format-3.0.0.tgz", - "integrity": "sha512-eyTcpKOcamdhWJXj56DpQMo1ylSQpcGtGKXcU0Tb97+K56/CF5amAqqqNj0+KvA0iw2ynxtHWFsPDSClCxe48w==", - "dev": true - }, - "dateformat": { - "version": "2.2.0", - "resolved": "https://registry.npmjs.org/dateformat/-/dateformat-2.2.0.tgz", - "integrity": "sha1-QGXiATz5+5Ft39gu+1Bq1MZ2kGI=", - "dev": true - }, - "debug": { - "version": "4.3.2", - "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.2.tgz", - "integrity": "sha512-mOp8wKcvj7XxC78zLgw/ZA+6TSgkoE2C/ienthhRD298T7UNwAg9diBpLRxC0mOezLl4B0xV7M0cCO6P/O0Xhw==", - "dev": true, - "requires": { - "ms": "2.1.2" - } - }, - "debug-fabulous": { - "version": "1.1.0", - "resolved": "https://registry.npmjs.org/debug-fabulous/-/debug-fabulous-1.1.0.tgz", - "integrity": "sha512-GZqvGIgKNlUnHUPQhepnUZFIMoi3dgZKQBzKDeL2g7oJF9SNAji/AAu36dusFUas0O+pae74lNeoIPHqXWDkLg==", + "compression": { + "version": "1.7.4", + "resolved": "https://registry.npmjs.org/compression/-/compression-1.7.4.tgz", + "integrity": "sha512-jaSIDzP9pZVS4ZfQ+TzvtiWhdpFhE2RDHz8QJkpX9SIpLq88VueF5jJw6t+6CUQcAoA6t+x89MLrWAqpfDE8iQ==", "dev": true, "requires": { - "debug": "3.X", - "memoizee": "0.4.X", - "object-assign": "4.X" + "accepts": "~1.3.5", + "bytes": "3.0.0", + "compressible": "~2.0.16", + "debug": "2.6.9", + "on-headers": "~1.0.2", + "safe-buffer": "5.1.2", + "vary": "~1.1.2" }, "dependencies": { "debug": { - "version": "3.2.7", - "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz", - "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==", + "version": "2.6.9", + "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz", + "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==", "dev": true, "requires": { - "ms": "^2.1.1" + "ms": "2.0.0" } + }, + "ms": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz", + "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=", + "dev": true } } }, - "decamelize": { - "version": "1.2.0", - "resolved": "https://registry.npmjs.org/decamelize/-/decamelize-1.2.0.tgz", - "integrity": "sha1-9lNNFRSCabIDUue+4m9QH5oZEpA=", - "dev": true + "concat-map": { + "version": "0.0.1", + "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz", + "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=" }, - "decamelize-keys": { - "version": "1.1.0", - "resolved": "https://registry.npmjs.org/decamelize-keys/-/decamelize-keys-1.1.0.tgz", - "integrity": "sha1-0XGoeTMlKAfrPLYdwcFEXQeN8tk=", + "concat-stream": { + "version": "1.6.2", + "resolved": "https://registry.npmjs.org/concat-stream/-/concat-stream-1.6.2.tgz", + "integrity": "sha512-27HBghJxjiZtIk3Ycvn/4kbJk/1uZuJFfuPEns6LaEvpvG1f0hTea8lilrouyo9mVc2GWdcEZ8OLoGmSADlrCw==", "dev": true, "requires": { - "decamelize": "^1.1.0", - "map-obj": "^1.0.0" + "buffer-from": "^1.0.0", + "inherits": "^2.0.3", + "readable-stream": "^2.2.2", + "typedarray": "^0.0.6" } }, - "decode-uri-component": { - "version": "0.2.0", - "resolved": "https://registry.npmjs.org/decode-uri-component/-/decode-uri-component-0.2.0.tgz", - "integrity": "sha1-6zkTMzRYd1y4TNGh+uBiEGu4dUU=", - "dev": true - }, - "decompress": { - "version": "4.2.1", - "resolved": "https://registry.npmjs.org/decompress/-/decompress-4.2.1.tgz", - "integrity": "sha512-e48kc2IjU+2Zw8cTb6VZcJQ3lgVbS4uuB1TfCHbiZIP/haNXm+SVyhu+87jts5/3ROpd82GSVCoNs/z8l4ZOaQ==", + "concat-with-sourcemaps": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/concat-with-sourcemaps/-/concat-with-sourcemaps-1.1.0.tgz", + "integrity": "sha512-4gEjHJFT9e+2W/77h/DS5SGUgwDaOwprX8L/gl5+3ixnzkVJJsZWDSelmN3Oilw3LNDZjZV0yqH1hLG3k6nghg==", "dev": true, "requires": { - "decompress-tar": "^4.0.0", - "decompress-tarbz2": "^4.0.0", - "decompress-targz": "^4.0.0", - "decompress-unzip": "^4.0.1", - "graceful-fs": "^4.1.10", - "make-dir": "^1.0.0", - "pify": "^2.3.0", - "strip-dirs": "^2.0.0" + "source-map": "^0.6.1" }, "dependencies": { - "make-dir": { - "version": "1.3.0", - "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-1.3.0.tgz", - "integrity": "sha512-2w31R7SJtieJJnQtGc7RVL2StM2vGYVfqUOvUDxH6bC6aJTxPxTF0GnIgCyu7tjockiUWAYQRbxa7vKn34s5sQ==", - "dev": true, - "requires": { - "pify": "^3.0.0" - }, - "dependencies": { - "pify": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/pify/-/pify-3.0.0.tgz", - "integrity": "sha1-5aSs0sEB/fPZpNB/DbxNtJ3SgXY=", - "dev": true - } - } - }, - "pify": { - "version": "2.3.0", - "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz", - "integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw=", + "source-map": { + "version": "0.6.1", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", + "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", "dev": true } } }, - "decompress-response": { - "version": "3.3.0", - "resolved": "https://registry.npmjs.org/decompress-response/-/decompress-response-3.3.0.tgz", - "integrity": "sha1-gKTdMjdIOEv6JICDYirt7Jgq3/M=", - "dev": true, - "requires": { - "mimic-response": "^1.0.0" - } - }, - "decompress-tar": { - "version": "4.1.1", - "resolved": "https://registry.npmjs.org/decompress-tar/-/decompress-tar-4.1.1.tgz", - "integrity": "sha512-JdJMaCrGpB5fESVyxwpCx4Jdj2AagLmv3y58Qy4GE6HMVjWz1FeVQk1Ct4Kye7PftcdOo/7U7UKzYBJgqnGeUQ==", - "dev": true, - "requires": { - "file-type": "^5.2.0", - "is-stream": "^1.1.0", - "tar-stream": "^1.5.2" - } - }, - "decompress-tarbz2": { - "version": "4.1.1", - "resolved": "https://registry.npmjs.org/decompress-tarbz2/-/decompress-tarbz2-4.1.1.tgz", - "integrity": "sha512-s88xLzf1r81ICXLAVQVzaN6ZmX4A6U4z2nMbOwobxkLoIIfjVMBg7TeguTUXkKeXni795B6y5rnvDw7rxhAq9A==", + "config-chain": { + "version": "1.1.13", + "resolved": "https://registry.npmjs.org/config-chain/-/config-chain-1.1.13.tgz", + "integrity": "sha512-qj+f8APARXHrM0hraqXYb2/bOVSV4PvJQlNZ/DVj0QrmNM2q2euizkeuVckQ57J+W0mRH6Hvi+k50M4Jul2VRQ==", "dev": true, "requires": { - "decompress-tar": "^4.1.0", - "file-type": "^6.1.0", - "is-stream": "^1.1.0", - "seek-bzip": "^1.0.5", - "unbzip2-stream": "^1.0.9" + "ini": "^1.3.4", + "proto-list": "~1.2.1" }, "dependencies": { - "file-type": { - "version": "6.2.0", - "resolved": "https://registry.npmjs.org/file-type/-/file-type-6.2.0.tgz", - "integrity": "sha512-YPcTBDV+2Tm0VqjybVd32MHdlEGAtuxS3VAYsumFokDSMG+ROT5wawGlnHDoz7bfMcMDt9hxuXvXwoKUx2fkOg==", + "ini": { + "version": "1.3.8", + "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.8.tgz", + "integrity": "sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==", "dev": true } } }, - "decompress-targz": { - "version": "4.1.1", - "resolved": "https://registry.npmjs.org/decompress-targz/-/decompress-targz-4.1.1.tgz", - "integrity": "sha512-4z81Znfr6chWnRDNfFNqLwPvm4db3WuZkqV+UgXQzSngG3CEKdBkw5jrv3axjjL96glyiiKjsxJG3X6WBZwX3w==", + "configstore": { + "version": "5.0.1", + "resolved": "https://registry.npmjs.org/configstore/-/configstore-5.0.1.tgz", + "integrity": "sha512-aMKprgk5YhBNyH25hj8wGt2+D52Sw1DRRIzqBwLp2Ya9mFmY8KPvvtvmna8SxVR9JMZ4kzMD68N22vlaRpkeFA==", "dev": true, "requires": { - "decompress-tar": "^4.1.1", - "file-type": "^5.2.0", - "is-stream": "^1.1.0" + "dot-prop": "^5.2.0", + "graceful-fs": "^4.1.2", + "make-dir": "^3.0.0", + "unique-string": "^2.0.0", + "write-file-atomic": "^3.0.0", + "xdg-basedir": "^4.0.0" } }, - "decompress-unzip": { - "version": "4.0.1", - "resolved": "https://registry.npmjs.org/decompress-unzip/-/decompress-unzip-4.0.1.tgz", - "integrity": "sha1-3qrM39FK6vhVePczroIQ+bSEj2k=", + "connect": { + "version": "3.6.6", + "resolved": "https://registry.npmjs.org/connect/-/connect-3.6.6.tgz", + "integrity": "sha1-Ce/2xVr3I24TcTWnJXSFi2eG9SQ=", "dev": true, "requires": { - "file-type": "^3.8.0", - "get-stream": "^2.2.0", - "pify": "^2.3.0", - "yauzl": "^2.4.2" + "debug": "2.6.9", + "finalhandler": "1.1.0", + "parseurl": "~1.3.2", + "utils-merge": "1.0.1" }, "dependencies": { - "file-type": { - "version": "3.9.0", - "resolved": "https://registry.npmjs.org/file-type/-/file-type-3.9.0.tgz", - "integrity": "sha1-JXoHg4TR24CHvESdEH1SpSZyuek=", - "dev": true - }, - "get-stream": { - "version": "2.3.1", - "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-2.3.1.tgz", - "integrity": "sha1-Xzj5PzRgCWZu4BUKBUFn+Rvdld4=", + "debug": { + "version": "2.6.9", + "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz", + "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==", "dev": true, "requires": { - "object-assign": "^4.0.1", - "pinkie-promise": "^2.0.0" + "ms": "2.0.0" } }, - "pify": { - "version": "2.3.0", - "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz", - "integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw=", + "finalhandler": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.1.0.tgz", + "integrity": "sha1-zgtoVbRYU+eRsvzGgARtiCU91/U=", + "dev": true, + "requires": { + "debug": "2.6.9", + "encodeurl": "~1.0.1", + "escape-html": "~1.0.3", + "on-finished": "~2.3.0", + "parseurl": "~1.3.2", + "statuses": "~1.3.1", + "unpipe": "~1.0.0" + } + }, + "ms": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz", + "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=", + "dev": true + }, + "statuses": { + "version": "1.3.1", + "resolved": "https://registry.npmjs.org/statuses/-/statuses-1.3.1.tgz", + "integrity": "sha1-+vUbnrdKrvOzrPStX2Gr8ky3uT4=", "dev": true } } }, - "deep-equal": { - "version": "1.1.1", - "resolved": "https://registry.npmjs.org/deep-equal/-/deep-equal-1.1.1.tgz", - "integrity": "sha512-yd9c5AdiqVcR+JjcwUQb9DkhJc8ngNr0MahEBGvDiJw8puWab2yZlh+nkasOnZP+EGTAP6rRp2JzJhJZzvNF8g==", - "dev": true, - "requires": { - "is-arguments": "^1.0.4", - "is-date-object": "^1.0.1", - "is-regex": "^1.0.4", - "object-is": "^1.0.1", - "object-keys": "^1.1.1", - "regexp.prototype.flags": "^1.2.0" - } - }, - "deep-extend": { - "version": "0.6.0", - "resolved": "https://registry.npmjs.org/deep-extend/-/deep-extend-0.6.0.tgz", - "integrity": "sha512-LOHxIOaPYdHlJRtCQfDIVZtfw/ufM8+rVj649RIHzcm/vGwQRXFt6OPqIFWsm2XEMrNIEtWR64sY1LEKD2vAOA==", + "connect-history-api-fallback": { + "version": "1.6.0", + "resolved": "https://registry.npmjs.org/connect-history-api-fallback/-/connect-history-api-fallback-1.6.0.tgz", + "integrity": "sha512-e54B99q/OUoH64zYYRf3HBP5z24G38h5D3qXu23JGRoigpX5Ss4r9ZnDk3g0Z8uQC2x2lPaJ+UlWBc1ZWBWdLg==", "dev": true }, - "deep-is": { - "version": "0.1.3", - "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.3.tgz", - "integrity": "sha1-s2nW+128E+7PUk+RsHD+7cNXzzQ=" - }, - "deepmerge": { - "version": "4.2.2", - "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.2.2.tgz", - "integrity": "sha512-FJ3UgI4gIl+PHZm53knsuSFpE+nESMr7M4v9QcgB7S63Kj/6WqMiFQJpBBYz1Pt+66bZpP3Q7Lye0Oo9MPKEdg==", + "console-control-strings": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/console-control-strings/-/console-control-strings-1.1.0.tgz", + "integrity": "sha1-PXz0Rk22RG6mRL9LOVB/mFEAjo4=", "dev": true }, - "default-compare": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/default-compare/-/default-compare-1.0.0.tgz", - "integrity": "sha512-QWfXlM0EkAbqOCbD/6HjdwT19j7WCkMyiRhWilc4H9/5h/RzTF9gv5LYh1+CmDV5d1rki6KAWLtQale0xt20eQ==", + "consolidate": { + "version": "0.13.1", + "resolved": "https://registry.npmjs.org/consolidate/-/consolidate-0.13.1.tgz", + "integrity": "sha1-npUDVo60hQiJ2m7YeoUsjdLRP2Q=", "dev": true, "requires": { - "kind-of": "^5.0.2" - }, - "dependencies": { - "kind-of": { - "version": "5.1.0", - "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-5.1.0.tgz", - "integrity": "sha512-NGEErnH6F2vUuXDh+OlbcKW7/wOcfdRHaZ7VWtqCztfHri/++YKmP51OdWeGPuqCOba6kk2OTe5d02VmTB80Pw==", - "dev": true - } + "bluebird": "^2.9.26" } }, - "default-gateway": { - "version": "4.2.0", - "resolved": "https://registry.npmjs.org/default-gateway/-/default-gateway-4.2.0.tgz", - "integrity": "sha512-h6sMrVB1VMWVrW13mSc6ia/DwYYw5MN6+exNu1OaJeFac5aSAvwM7lZ0NVfTABuSkQelr4h5oebg3KB1XPdjgA==", + "contains-path": { + "version": "0.1.0", + "resolved": "https://registry.npmjs.org/contains-path/-/contains-path-0.1.0.tgz", + "integrity": "sha1-/ozxhP9mcLa67wGp1IYaXL7EEgo=", + "dev": true + }, + "content-disposition": { + "version": "0.5.3", + "resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-0.5.3.tgz", + "integrity": "sha512-ExO0774ikEObIAEV9kDo50o+79VCUdEB6n6lzKgGwupcVeRlhrj3qGAfwq8G6uBJjkqLrhT0qEYFcWng8z1z0g==", "dev": true, "requires": { - "execa": "^1.0.0", - "ip-regex": "^2.1.0" + "safe-buffer": "5.1.2" } }, - "default-resolution": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/default-resolution/-/default-resolution-2.0.0.tgz", - "integrity": "sha1-vLgrqnKtebQmp2cy8aga1t8m1oQ=", + "content-type": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/content-type/-/content-type-1.0.4.tgz", + "integrity": "sha512-hIP3EEPs8tB9AT1L+NUqtwOAps4mk2Zob89MWXMHjHWg9milF/j4osnnQLXBCBFBk/tvIG/tUc9mOUJiPBhPXA==", "dev": true }, - "defaults": { - "version": "1.0.3", - "resolved": "https://registry.npmjs.org/defaults/-/defaults-1.0.3.tgz", - "integrity": "sha1-xlYFHpgX2f8I7YgUd/P+QBnz730=", + "convert-source-map": { + "version": "1.8.0", + "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.8.0.tgz", + "integrity": "sha512-+OQdjP49zViI/6i7nIJpA8rAl4sV/JdPfU9nZs3VqOwGIgizICvuN2ru6fMd+4llL0tar18UYJXfZ/TWtmhUjA==", "dev": true, "requires": { - "clone": "^1.0.2" + "safe-buffer": "~5.1.1" } }, - "defer-to-connect": { - "version": "1.1.3", - "resolved": "https://registry.npmjs.org/defer-to-connect/-/defer-to-connect-1.1.3.tgz", - "integrity": "sha512-0ISdNousHvZT2EiFlZeZAHBUvSxmKswVCEf8hW7KWgG4a8MVEu/3Vb6uWYozkjylyCxe0JBIiRB1jV45S70WVQ==", + "cookie": { + "version": "0.4.0", + "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.4.0.tgz", + "integrity": "sha512-+Hp8fLp57wnUSt0tY0tHEXh4voZRDnoIrZPqlo3DPiI4y9lwg/jqx+1Om94/W6ZaPDOUbnjOt/99w66zk+l1Xg==", "dev": true }, - "define-lazy-prop": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/define-lazy-prop/-/define-lazy-prop-2.0.0.tgz", - "integrity": "sha512-Ds09qNh8yw3khSjiJjiUInaGX9xlqZDY7JVryGxdxV7NPeuqQfplOpQ66yJFZut3jLa5zOwkXw1g9EI2uKh4Og==", + "cookie-signature": { + "version": "1.0.6", + "resolved": "https://registry.npmjs.org/cookie-signature/-/cookie-signature-1.0.6.tgz", + "integrity": "sha1-4wOogrNCzD7oylE6eZmXNNqzriw=", "dev": true }, - "define-properties": { - "version": "1.1.3", - "resolved": "https://registry.npmjs.org/define-properties/-/define-properties-1.1.3.tgz", - "integrity": "sha512-3MqfYKj2lLzdMSf8ZIZE/V+Zuy+BgD6f164e8K2w7dgnpKArBDerGYpM46IYYcjnkdPNMjPk9A6VFB8+3SKlXQ==", + "copy-anything": { + "version": "2.0.3", + "resolved": "https://registry.npmjs.org/copy-anything/-/copy-anything-2.0.3.tgz", + "integrity": "sha512-GK6QUtisv4fNS+XcI7shX0Gx9ORg7QqIznyfho79JTnX1XhLiyZHfftvGiziqzRiEi/Bjhgpi+D2o7HxJFPnDQ==", "dev": true, "requires": { - "object-keys": "^1.0.12" + "is-what": "^3.12.0" } }, - "define-property": { - "version": "2.0.2", - "resolved": "https://registry.npmjs.org/define-property/-/define-property-2.0.2.tgz", - "integrity": "sha512-jwK2UV4cnPpbcG7+VRARKTZPUWowwXA8bzH5NP6ud0oeAxyYPuGZUAC7hMugpCdz4BeSZl2Dl9k66CHJ/46ZYQ==", + "copy-descriptor": { + "version": "0.1.1", + "resolved": "https://registry.npmjs.org/copy-descriptor/-/copy-descriptor-0.1.1.tgz", + "integrity": "sha1-Z29us8OZl8LuGsOpJP1hJHSPV40=", + "dev": true + }, + "copy-props": { + "version": "2.0.5", + "resolved": "https://registry.npmjs.org/copy-props/-/copy-props-2.0.5.tgz", + "integrity": "sha512-XBlx8HSqrT0ObQwmSzM7WE5k8FxTV75h1DX1Z3n6NhQ/UYYAvInWYmG06vFt7hQZArE2fuO62aihiWIVQwh1sw==", "dev": true, "requires": { - "is-descriptor": "^1.0.2", - "isobject": "^3.0.1" + "each-props": "^1.3.2", + "is-plain-object": "^5.0.0" }, "dependencies": { - "is-accessor-descriptor": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/is-accessor-descriptor/-/is-accessor-descriptor-1.0.0.tgz", - "integrity": "sha512-m5hnHTkcVsPfqx3AKlyttIPb7J+XykHvJP2B9bZDjlhLIoEq4XoK64Vg7boZlVWYK6LUY94dYPEE7Lh0ZkZKcQ==", + "is-plain-object": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-5.0.0.tgz", + "integrity": "sha512-VRSzKkbMm5jMDoKLbltAkFQ5Qr7VDiTFGXxYFXXowVj387GeGNOCsOH6Msy00SGZ3Fp84b1Naa1psqgcCIEP5Q==", + "dev": true + } + } + }, + "copy-webpack-plugin": { + "version": "9.0.1", + "resolved": "https://registry.npmjs.org/copy-webpack-plugin/-/copy-webpack-plugin-9.0.1.tgz", + "integrity": "sha512-14gHKKdYIxF84jCEgPgYXCPpldbwpxxLbCmA7LReY7gvbaT555DgeBWBgBZM116tv/fO6RRJrsivBqRyRlukhw==", + "dev": true, + "requires": { + "fast-glob": "^3.2.5", + "glob-parent": "^6.0.0", + "globby": "^11.0.3", + "normalize-path": "^3.0.0", + "p-limit": "^3.1.0", + "schema-utils": "^3.0.0", + "serialize-javascript": "^6.0.0" + }, + "dependencies": { + "ajv": { + "version": "6.12.6", + "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz", + "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==", "dev": true, "requires": { - "kind-of": "^6.0.0" + "fast-deep-equal": "^3.1.1", + "fast-json-stable-stringify": "^2.0.0", + "json-schema-traverse": "^0.4.1", + "uri-js": "^4.2.2" } }, - "is-data-descriptor": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/is-data-descriptor/-/is-data-descriptor-1.0.0.tgz", - "integrity": "sha512-jbRXy1FmtAoCjQkVmIVYwuuqDFUbaOeDjmed1tOGPrsMhtJA4rD9tkgA0F1qJ3gRFRXcHYVkdeaP50Q5rE/jLQ==", + "json-schema-traverse": { + "version": "0.4.1", + "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz", + "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==", + "dev": true + }, + "p-limit": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-3.1.0.tgz", + "integrity": "sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==", "dev": true, "requires": { - "kind-of": "^6.0.0" + "yocto-queue": "^0.1.0" } }, - "is-descriptor": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/is-descriptor/-/is-descriptor-1.0.2.tgz", - "integrity": "sha512-2eis5WqQGV7peooDyLmNEPUrps9+SXX5c9pL3xEB+4e9HnGuDa7mB7kHxHw4CbqS9k1T2hOH3miL8n8WtiYVtg==", + "schema-utils": { + "version": "3.1.1", + "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.1.1.tgz", + "integrity": "sha512-Y5PQxS4ITlC+EahLuXaY86TXfR7Dc5lw294alXOq86JAHCihAIZfqv8nNCWvaEJvaC51uN9hbLGeV0cFBdH+Fw==", "dev": true, "requires": { - "is-accessor-descriptor": "^1.0.0", - "is-data-descriptor": "^1.0.0", - "kind-of": "^6.0.2" + "@types/json-schema": "^7.0.8", + "ajv": "^6.12.5", + "ajv-keywords": "^3.5.2" } } } }, - "del": { - "version": "4.1.1", - "resolved": "https://registry.npmjs.org/del/-/del-4.1.1.tgz", - "integrity": "sha512-QwGuEUouP2kVwQenAsOof5Fv8K9t3D8Ca8NxcXKrIpEHjTXK5J2nXLdP+ALI1cgv8wj7KuwBhTwBkOZSJKM5XQ==", + "core-js": { + "version": "3.19.1", + "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.19.1.tgz", + "integrity": "sha512-Tnc7E9iKd/b/ff7GFbhwPVzJzPztGrChB8X8GLqoYGdEOG8IpLnK1xPyo3ZoO3HsK6TodJS58VGPOxA+hLHQMg==" + }, + "core-js-compat": { + "version": "3.19.1", + "resolved": "https://registry.npmjs.org/core-js-compat/-/core-js-compat-3.19.1.tgz", + "integrity": "sha512-Q/VJ7jAF/y68+aUsQJ/afPOewdsGkDtcMb40J8MbuWKlK3Y+wtHq8bTHKPj2WKWLIqmS5JhHs4CzHtz6pT2W6g==", "dev": true, "requires": { - "@types/glob": "^7.1.1", - "globby": "^6.1.0", - "is-path-cwd": "^2.0.0", - "is-path-in-cwd": "^2.0.0", - "p-map": "^2.0.0", - "pify": "^4.0.1", - "rimraf": "^2.6.3" + "browserslist": "^4.17.6", + "semver": "7.0.0" }, "dependencies": { - "array-union": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/array-union/-/array-union-1.0.2.tgz", - "integrity": "sha1-mjRBDk9OPaI96jdb5b5w8kd47Dk=", + "browserslist": { + "version": "4.17.6", + "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.17.6.tgz", + "integrity": "sha512-uPgz3vyRTlEiCv4ee9KlsKgo2V6qPk7Jsn0KAn2OBqbqKo3iNcPEC1Ti6J4dwnz+aIRfEEEuOzC9IBk8tXUomw==", "dev": true, "requires": { - "array-uniq": "^1.0.1" + "caniuse-lite": "^1.0.30001274", + "electron-to-chromium": "^1.3.886", + "escalade": "^3.1.1", + "node-releases": "^2.0.1", + "picocolors": "^1.0.0" } }, - "glob": { - "version": "7.1.7", - "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.7.tgz", - "integrity": "sha512-OvD9ENzPLbegENnYP5UUfJIirTg4+XwMWGaQfQTY0JenxNvvIKP3U3/tAQSPIu/lHxXYSZmpXlUHeqAIdKzBLQ==", - "dev": true, - "requires": { - "fs.realpath": "^1.0.0", - "inflight": "^1.0.4", - "inherits": "2", - "minimatch": "^3.0.4", - "once": "^1.3.0", - "path-is-absolute": "^1.0.0" - } + "caniuse-lite": { + "version": "1.0.30001276", + "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001276.tgz", + "integrity": "sha512-psUNoaG1ilknZPxi8HuhQWobuhLqtYSRUxplfVkEJdgZNB9TETVYGSBtv4YyfAdGvE6gn2eb0ztiXqHoWJcGnw==", + "dev": true }, - "globby": { - "version": "6.1.0", - "resolved": "https://registry.npmjs.org/globby/-/globby-6.1.0.tgz", - "integrity": "sha1-9abXDoOV4hyFj7BInWTfAkJNUGw=", - "dev": true, - "requires": { - "array-union": "^1.0.1", - "glob": "^7.0.3", - "object-assign": "^4.0.1", - "pify": "^2.0.0", - "pinkie-promise": "^2.0.0" - }, - "dependencies": { - "pify": { - "version": "2.3.0", - "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz", - "integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw=", - "dev": true - } - } + "electron-to-chromium": { + "version": "1.3.888", + "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.888.tgz", + "integrity": "sha512-5iD1zgyPpFER4kJ716VsA4MxQ6x405dxdFNCEK2mITL075VHO5ResjY0xzQUZguCww/KlBxCA6JmBA9sDt1PRw==", + "dev": true }, - "p-map": { - "version": "2.1.0", - "resolved": "https://registry.npmjs.org/p-map/-/p-map-2.1.0.tgz", - "integrity": "sha512-y3b8Kpd8OAN444hxfBbFfj1FY/RjtTd8tzYwhUqNYXx0fXx2iX4maP4Qr6qhIKbQXI02wTLAda4fYUbDagTUFw==", + "node-releases": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.1.tgz", + "integrity": "sha512-CqyzN6z7Q6aMeF/ktcMVTzhAHCEpf8SOarwpzpf8pNBY2k5/oM34UHldUwp8VKI7uxct2HxSRdJjBaZeESzcxA==", "dev": true }, - "rimraf": { - "version": "2.7.1", - "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.7.1.tgz", - "integrity": "sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w==", - "dev": true, - "requires": { - "glob": "^7.1.3" - } + "picocolors": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz", + "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==", + "dev": true + }, + "semver": { + "version": "7.0.0", + "resolved": "https://registry.npmjs.org/semver/-/semver-7.0.0.tgz", + "integrity": "sha512-+GB6zVA9LWh6zovYQLALHwv5rb2PHGlJi3lfiqIHxR0uuwCgefcOJc59v9fv1w8GbStwxuuqqAjI9NMAOOgq1A==", + "dev": true } } }, - "delayed-stream": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz", - "integrity": "sha1-3zrhmayt+31ECqrgsp4icrJOxhk=", - "dev": true - }, - "delegates": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/delegates/-/delegates-1.0.0.tgz", - "integrity": "sha1-hMbhWbgZBP3KWaDvRM2HDTElD5o=", - "dev": true - }, - "depd": { - "version": "1.1.2", - "resolved": "https://registry.npmjs.org/depd/-/depd-1.1.2.tgz", - "integrity": "sha1-m81S4UwJd2PnSbJ0xDRu0uVgtak=", - "dev": true - }, - "dependency-graph": { - "version": "0.11.0", - "resolved": "https://registry.npmjs.org/dependency-graph/-/dependency-graph-0.11.0.tgz", - "integrity": "sha512-JeMq7fEshyepOWDfcfHK06N3MhyPhz++vtqWhMT5O9A3K42rdsEDpfdVqjaqaAhsw6a+ZqeDvQVtD0hFHQWrzg==", - "dev": true - }, - "destroy": { - "version": "1.0.4", - "resolved": "https://registry.npmjs.org/destroy/-/destroy-1.0.4.tgz", - "integrity": "sha1-l4hXRCxEdJ5CBmE+N5RiBYJqvYA=", - "dev": true - }, - "detect-file": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/detect-file/-/detect-file-1.0.0.tgz", - "integrity": "sha1-8NZtA2cqglyxtzvbP+YjEMjlUrc=", - "dev": true - }, - "detect-newline": { - "version": "2.1.0", - "resolved": "https://registry.npmjs.org/detect-newline/-/detect-newline-2.1.0.tgz", - "integrity": "sha1-9B8cEL5LAOh7XxPaaAdZ8sW/0+I=", - "dev": true - }, - "detect-node": { - "version": "2.1.0", - "resolved": "https://registry.npmjs.org/detect-node/-/detect-node-2.1.0.tgz", - "integrity": "sha512-T0NIuQpnTvFDATNuHN5roPwSBG83rFsuO+MXXH9/3N1eFbn4wcPjttvjMLEPWJ0RGUYgQE7cGgS3tNxbqCGM7g==", - "dev": true - }, - "dev-ip": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/dev-ip/-/dev-ip-1.0.1.tgz", - "integrity": "sha1-p2o+0YVb56ASu4rBbLgPPADcKPA=", - "dev": true - }, - "di": { - "version": "0.0.1", - "resolved": "https://registry.npmjs.org/di/-/di-0.0.1.tgz", - "integrity": "sha1-gGZJMmzqp8qjMG112YXqJ0i6kTw=", + "core-js-pure": { + "version": "3.19.0", + "resolved": "https://registry.npmjs.org/core-js-pure/-/core-js-pure-3.19.0.tgz", + "integrity": "sha512-UEQk8AxyCYvNAs6baNoPqDADv7BX0AmBLGxVsrAifPPx/C8EAzV4Q+2ZUJqVzfI2TQQEZITnwUkWcHpgc/IubQ==", "dev": true }, - "diff": { - "version": "3.5.0", - "resolved": "https://registry.npmjs.org/diff/-/diff-3.5.0.tgz", - "integrity": "sha512-A46qtFgd+g7pDZinpnwiRJtxbC1hpgf0uzP3iG89scHk0AUC7A1TGxf5OiiOUv/JMZR8GOt8hL900hV0bOy5xA==", - "dev": true + "core-util-is": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.2.tgz", + "integrity": "sha1-tf1UIgqivFq1eqtxQMlAdUUDwac=" }, - "dir-glob": { - "version": "3.0.1", - "resolved": "https://registry.npmjs.org/dir-glob/-/dir-glob-3.0.1.tgz", - "integrity": "sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA==", + "cors": { + "version": "2.8.5", + "resolved": "https://registry.npmjs.org/cors/-/cors-2.8.5.tgz", + "integrity": "sha512-KIHbLJqu73RGr/hnbrO9uBeixNGuvSQjul/jdFvS/KFSIH1hWVd1ng7zOHx+YrEfInLG7q4n6GHQ9cDtxv/P6g==", "dev": true, "requires": { - "path-type": "^4.0.0" + "object-assign": "^4", + "vary": "^1" } }, - "dlv": { - "version": "1.1.3", - "resolved": "https://registry.npmjs.org/dlv/-/dlv-1.1.3.tgz", - "integrity": "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==", - "dev": true + "cosmiconfig": { + "version": "7.0.0", + "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-7.0.0.tgz", + "integrity": "sha512-pondGvTuVYDk++upghXJabWzL6Kxu6f26ljFw64Swq9v6sQPUL3EUlVDV56diOjpCayKihL6hVe8exIACU4XcA==", + "dev": true, + "requires": { + "@types/parse-json": "^4.0.0", + "import-fresh": "^3.2.1", + "parse-json": "^5.0.0", + "path-type": "^4.0.0", + "yaml": "^1.10.0" + } }, - "dns-equal": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/dns-equal/-/dns-equal-1.0.0.tgz", - "integrity": "sha1-s55/HabrCnW6nBcySzR1PEfgZU0=", - "dev": true + "coveralls": { + "version": "3.1.1", + "resolved": "https://registry.npmjs.org/coveralls/-/coveralls-3.1.1.tgz", + "integrity": "sha512-+dxnG2NHncSD1NrqbSM3dn/lE57O6Qf/koe9+I7c+wzkqRmEvcp0kgJdxKInzYzkICKkFMZsX3Vct3++tsF9ww==", + "dev": true, + "requires": { + "js-yaml": "^3.13.1", + "lcov-parse": "^1.0.0", + "log-driver": "^1.2.7", + "minimist": "^1.2.5", + "request": "^2.88.2" + } }, - "dns-packet": { - "version": "1.3.4", - "resolved": "https://registry.npmjs.org/dns-packet/-/dns-packet-1.3.4.tgz", - "integrity": "sha512-BQ6F4vycLXBvdrJZ6S3gZewt6rcrks9KBgM9vrhW+knGRqc8uEdT7fuCwloc7nny5xNoMJ17HGH0R/6fpo8ECA==", + "critters": { + "version": "0.0.14", + "resolved": "https://registry.npmjs.org/critters/-/critters-0.0.14.tgz", + "integrity": "sha512-YiBoGKfU8/xg+tVMw0KfMBgmr0TWa1JGmRXDzbQRQQaDarGUcZZtZEB25QyYrLasQZAnvqoZhSg2GW0zdsQkYQ==", "dev": true, "requires": { - "ip": "^1.1.0", - "safe-buffer": "^5.0.1" + "chalk": "^4.1.0", + "css-select": "^4.1.3", + "parse5": "^6.0.1", + "parse5-htmlparser2-tree-adapter": "^6.0.1", + "postcss": "^8.3.7", + "pretty-bytes": "^5.3.0" + }, + "dependencies": { + "ansi-styles": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz", + "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==", + "dev": true, + "requires": { + "color-convert": "^2.0.1" + } + }, + "chalk": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", + "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", + "dev": true, + "requires": { + "ansi-styles": "^4.1.0", + "supports-color": "^7.1.0" + } + }, + "color-convert": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", + "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==", + "dev": true, + "requires": { + "color-name": "~1.1.4" + } + }, + "color-name": { + "version": "1.1.4", + "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz", + "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==", + "dev": true + }, + "has-flag": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz", + "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==", + "dev": true + }, + "supports-color": { + "version": "7.2.0", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz", + "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==", + "dev": true, + "requires": { + "has-flag": "^4.0.0" + } + } } }, - "dns-txt": { - "version": "2.0.2", - "resolved": "https://registry.npmjs.org/dns-txt/-/dns-txt-2.0.2.tgz", - "integrity": "sha1-uR2Ab10nGI5Ks+fRB9iBocxGQrY=", + "cross-spawn": { + "version": "5.1.0", + "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-5.1.0.tgz", + "integrity": "sha1-6L0O/uWPz/b4+UUQoKVUu/ojVEk=", "dev": true, "requires": { - "buffer-indexof": "^1.0.0" + "lru-cache": "^4.0.1", + "shebang-command": "^1.2.0", + "which": "^1.2.9" + }, + "dependencies": { + "lru-cache": { + "version": "4.1.5", + "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-4.1.5.tgz", + "integrity": "sha512-sWZlbEP2OsHNkXrMl5GYk/jKk70MBng6UU4YI/qGDYbgf6YbP4EvmqISbXCoJiRKs+1bSpFHVgQxvJ17F2li5g==", + "dev": true, + "requires": { + "pseudomap": "^1.0.2", + "yallist": "^2.1.2" + } + }, + "yallist": { + "version": "2.1.2", + "resolved": "https://registry.npmjs.org/yallist/-/yallist-2.1.2.tgz", + "integrity": "sha1-HBH5IY8HYImkfdUS+TxmmaaoHVI=", + "dev": true + } } }, - "docopt": { - "version": "0.6.2", - "resolved": "https://registry.npmjs.org/docopt/-/docopt-0.6.2.tgz", - "integrity": "sha1-so6eIiDaXsSffqW7JKR3h0Be6xE=", + "crypto-random-string": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/crypto-random-string/-/crypto-random-string-2.0.0.tgz", + "integrity": "sha512-v1plID3y9r/lPhviJ1wrXpLeyUIGAZ2SHNYTEapm7/8A9nLPoyvVp3RK/EPFqn5kEznyWgYZNsRtYYIWbuG8KA==", "dev": true }, - "doctrine": { + "css": { "version": "3.0.0", - "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-3.0.0.tgz", - "integrity": "sha512-yS+Q5i3hBf7GBkd4KG8a7eBNNWNGLTaEwwYWUijIYM7zrlYDM0BFXHjjPWlWZ1Rg7UaddZeIDmi9jF3HmqiQ2w==", + "resolved": "https://registry.npmjs.org/css/-/css-3.0.0.tgz", + "integrity": "sha512-DG9pFfwOrzc+hawpmqX/dHYHJG+Bsdb0klhyi1sDneOgGOXy9wQIC8hzyVp1e4NRYDBdxcylvywPkkXCHAzTyQ==", "dev": true, "requires": { - "esutils": "^2.0.2" + "inherits": "^2.0.4", + "source-map": "^0.6.1", + "source-map-resolve": "^0.6.0" + }, + "dependencies": { + "source-map": { + "version": "0.6.1", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", + "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", + "dev": true + } } }, - "dom-serialize": { - "version": "2.2.1", - "resolved": "https://registry.npmjs.org/dom-serialize/-/dom-serialize-2.2.1.tgz", - "integrity": "sha1-ViromZ9Evl6jB29UGdzVnrQ6yVs=", - "dev": true, - "requires": { - "custom-event": "~1.0.0", - "ent": "~2.2.0", - "extend": "^3.0.0", - "void-elements": "^2.0.0" - } - }, - "dom-serializer": { - "version": "1.3.2", - "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-1.3.2.tgz", - "integrity": "sha512-5c54Bk5Dw4qAxNOI1pFEizPSjVsx5+bpJKmL2kPn8JhBUq2q09tTCa3mjijun2NfK78NMouDYNMBkOrPZiS+ig==", - "dev": true, - "requires": { - "domelementtype": "^2.0.1", - "domhandler": "^4.2.0", - "entities": "^2.0.0" - } - }, - "domelementtype": { - "version": "2.2.0", - "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.2.0.tgz", - "integrity": "sha512-DtBMo82pv1dFtUmHyr48beiuq792Sxohr+8Hm9zoxklYPfa6n0Z3Byjj2IV7bmr2IyqClnqEQhfgHJJ5QF0R5A==", - "dev": true - }, - "domhandler": { - "version": "4.2.0", - "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-4.2.0.tgz", - "integrity": "sha512-zk7sgt970kzPks2Bf+dwT/PLzghLnsivb9CcxkvR8Mzr66Olr0Ofd8neSbglHJHaHa2MadfoSdNlKYAaafmWfA==", - "dev": true, - "requires": { - "domelementtype": "^2.2.0" - } - }, - "domutils": { - "version": "2.7.0", - "resolved": "https://registry.npmjs.org/domutils/-/domutils-2.7.0.tgz", - "integrity": "sha512-8eaHa17IwJUPAiB+SoTYBo5mCdeMgdcAoXJ59m6DT1vw+5iLS3gNoqYaRowaBKtGVrOF1Jz4yDTgYKLK2kvfJg==", - "dev": true, - "requires": { - "dom-serializer": "^1.0.1", - "domelementtype": "^2.2.0", - "domhandler": "^4.2.0" - } - }, - "dot-prop": { - "version": "5.3.0", - "resolved": "https://registry.npmjs.org/dot-prop/-/dot-prop-5.3.0.tgz", - "integrity": "sha512-QM8q3zDe58hqUqjraQOmzZ1LIH9SWQJTlEKCH4kJ2oQvLZk7RbQXvtDM2XEq3fwkV9CCvvH4LA0AV+ogFsBM2Q==", - "dev": true, - "requires": { - "is-obj": "^2.0.0" - } - }, - "download": { - "version": "6.2.5", - "resolved": "https://registry.npmjs.org/download/-/download-6.2.5.tgz", - "integrity": "sha512-DpO9K1sXAST8Cpzb7kmEhogJxymyVUd5qz/vCOSyvwtp2Klj2XcDt5YUuasgxka44SxF0q5RriKIwJmQHG2AuA==", + "css-blank-pseudo": { + "version": "0.1.4", + "resolved": "https://registry.npmjs.org/css-blank-pseudo/-/css-blank-pseudo-0.1.4.tgz", + "integrity": "sha512-LHz35Hr83dnFeipc7oqFDmsjHdljj3TQtxGGiNWSOsTLIAubSm4TEz8qCaKFpk7idaQ1GfWscF4E6mgpBysA1w==", "dev": true, "requires": { - "caw": "^2.0.0", - "content-disposition": "^0.5.2", - "decompress": "^4.0.0", - "ext-name": "^5.0.0", - "file-type": "5.2.0", - "filenamify": "^2.0.0", - "get-stream": "^3.0.0", - "got": "^7.0.0", - "make-dir": "^1.0.0", - "p-event": "^1.0.0", - "pify": "^3.0.0" + "postcss": "^7.0.5" }, "dependencies": { - "get-stream": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-3.0.0.tgz", - "integrity": "sha1-jpQ9E1jcN1VQVOy+LtsFqhdO3hQ=", - "dev": true - }, - "make-dir": { - "version": "1.3.0", - "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-1.3.0.tgz", - "integrity": "sha512-2w31R7SJtieJJnQtGc7RVL2StM2vGYVfqUOvUDxH6bC6aJTxPxTF0GnIgCyu7tjockiUWAYQRbxa7vKn34s5sQ==", + "postcss": { + "version": "7.0.39", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.39.tgz", + "integrity": "sha512-yioayjNbHn6z1/Bywyb2Y4s3yvDAeXGOyxqD+LnVOinq6Mdmd++SW2wUNVzavyyHxd6+DxzWGIuosg6P1Rj8uA==", "dev": true, "requires": { - "pify": "^3.0.0" + "picocolors": "^0.2.1", + "source-map": "^0.6.1" } }, - "pify": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/pify/-/pify-3.0.0.tgz", - "integrity": "sha1-5aSs0sEB/fPZpNB/DbxNtJ3SgXY=", + "source-map": { + "version": "0.6.1", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", + "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", "dev": true } } }, - "duplexer2": { - "version": "0.0.2", - "resolved": "https://registry.npmjs.org/duplexer2/-/duplexer2-0.0.2.tgz", - "integrity": "sha1-xhTc9n4vsUmVqRcR5aYX6KYKMds=", + "css-has-pseudo": { + "version": "0.10.0", + "resolved": "https://registry.npmjs.org/css-has-pseudo/-/css-has-pseudo-0.10.0.tgz", + "integrity": "sha512-Z8hnfsZu4o/kt+AuFzeGpLVhFOGO9mluyHBaA2bA8aCGTwah5sT3WV/fTHH8UNZUytOIImuGPrl/prlb4oX4qQ==", "dev": true, "requires": { - "readable-stream": "~1.1.9" + "postcss": "^7.0.6", + "postcss-selector-parser": "^5.0.0-rc.4" }, "dependencies": { - "isarray": { - "version": "0.0.1", - "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz", - "integrity": "sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8=", + "cssesc": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-2.0.0.tgz", + "integrity": "sha512-MsCAG1z9lPdoO/IUMLSBWBSVxVtJ1395VGIQ+Fc2gNdkQ1hNDnQdw3YhA71WJCBW1vdwA0cAnk/DnW6bqoEUYg==", "dev": true }, - "readable-stream": { - "version": "1.1.14", - "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-1.1.14.tgz", - "integrity": "sha1-fPTFTvZI44EwhMY23SB54WbAgdk=", + "postcss": { + "version": "7.0.39", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.39.tgz", + "integrity": "sha512-yioayjNbHn6z1/Bywyb2Y4s3yvDAeXGOyxqD+LnVOinq6Mdmd++SW2wUNVzavyyHxd6+DxzWGIuosg6P1Rj8uA==", "dev": true, "requires": { - "core-util-is": "~1.0.0", - "inherits": "~2.0.1", - "isarray": "0.0.1", - "string_decoder": "~0.10.x" + "picocolors": "^0.2.1", + "source-map": "^0.6.1" } }, - "string_decoder": { - "version": "0.10.31", - "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz", - "integrity": "sha1-YuIDvEF2bGwoyfyEMB2rHFMQ+pQ=", + "postcss-selector-parser": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-5.0.0.tgz", + "integrity": "sha512-w+zLE5Jhg6Liz8+rQOWEAwtwkyqpfnmsinXjXg6cY7YIONZZtgvE0v2O0uhQBs0peNomOJwWRKt6JBfTdTd3OQ==", + "dev": true, + "requires": { + "cssesc": "^2.0.0", + "indexes-of": "^1.0.1", + "uniq": "^1.0.1" + } + }, + "source-map": { + "version": "0.6.1", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", + "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", "dev": true } } }, - "duplexer3": { - "version": "0.1.4", - "resolved": "https://registry.npmjs.org/duplexer3/-/duplexer3-0.1.4.tgz", - "integrity": "sha1-7gHdHKwO08vH/b6jfcCo8c4ALOI=", - "dev": true - }, - "duplexify": { - "version": "3.7.1", - "resolved": "https://registry.npmjs.org/duplexify/-/duplexify-3.7.1.tgz", - "integrity": "sha512-07z8uv2wMyS51kKhD1KsdXJg5WQ6t93RneqRxUHnskXVtlYYkLqM0gqStQZ3pj073g687jPCHrqNfCzawLYh5g==", - "dev": true, - "requires": { - "end-of-stream": "^1.0.0", - "inherits": "^2.0.1", - "readable-stream": "^2.0.0", - "stream-shift": "^1.0.0" - } - }, - "each-props": { - "version": "1.3.2", - "resolved": "https://registry.npmjs.org/each-props/-/each-props-1.3.2.tgz", - "integrity": "sha512-vV0Hem3zAGkJAyU7JSjixeU66rwdynTAa1vofCrSA5fEln+m67Az9CcnkVD776/fsN/UjIWmBDoNRS6t6G9RfA==", + "css-loader": { + "version": "6.5.0", + "resolved": "https://registry.npmjs.org/css-loader/-/css-loader-6.5.0.tgz", + "integrity": "sha512-VmuSdQa3K+wJsl39i7X3qGBM5+ZHmtTnv65fqMGI+fzmHoYmszTVvTqC1XN8JwWDViCB1a8wgNim5SV4fb37xg==", "dev": true, "requires": { - "is-plain-object": "^2.0.1", - "object.defaults": "^1.1.0" + "icss-utils": "^5.1.0", + "postcss": "^8.2.15", + "postcss-modules-extract-imports": "^3.0.0", + "postcss-modules-local-by-default": "^4.0.0", + "postcss-modules-scope": "^3.0.0", + "postcss-modules-values": "^4.0.0", + "postcss-value-parser": "^4.1.0", + "semver": "^7.3.5" } }, - "easy-extender": { - "version": "2.3.4", - "resolved": "https://registry.npmjs.org/easy-extender/-/easy-extender-2.3.4.tgz", - "integrity": "sha512-8cAwm6md1YTiPpOvDULYJL4ZS6WfM5/cTeVVh4JsvyYZAoqlRVUpHL9Gr5Fy7HA6xcSZicUia3DeAgO3Us8E+Q==", + "css-prefers-color-scheme": { + "version": "3.1.1", + "resolved": "https://registry.npmjs.org/css-prefers-color-scheme/-/css-prefers-color-scheme-3.1.1.tgz", + "integrity": "sha512-MTu6+tMs9S3EUqzmqLXEcgNRbNkkD/TGFvowpeoWJn5Vfq7FMgsmRQs9X5NXAURiOBmOxm/lLjsDNXDE6k9bhg==", "dev": true, "requires": { - "lodash": "^4.17.10" + "postcss": "^7.0.5" + }, + "dependencies": { + "postcss": { + "version": "7.0.39", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.39.tgz", + "integrity": "sha512-yioayjNbHn6z1/Bywyb2Y4s3yvDAeXGOyxqD+LnVOinq6Mdmd++SW2wUNVzavyyHxd6+DxzWGIuosg6P1Rj8uA==", + "dev": true, + "requires": { + "picocolors": "^0.2.1", + "source-map": "^0.6.1" + } + }, + "source-map": { + "version": "0.6.1", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", + "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", + "dev": true + } } }, - "eazy-logger": { - "version": "3.1.0", - "resolved": "https://registry.npmjs.org/eazy-logger/-/eazy-logger-3.1.0.tgz", - "integrity": "sha512-/snsn2JqBtUSSstEl4R0RKjkisGHAhvYj89i7r3ytNUKW12y178KDZwXLXIgwDqLW6E/VRMT9qfld7wvFae8bQ==", + "css-select": { + "version": "4.1.3", + "resolved": "https://registry.npmjs.org/css-select/-/css-select-4.1.3.tgz", + "integrity": "sha512-gT3wBNd9Nj49rAbmtFHj1cljIAOLYSX1nZ8CB7TBO3INYckygm5B7LISU/szY//YmdiSLbJvDLOx9VnMVpMBxA==", "dev": true, "requires": { - "tfunk": "^4.0.0" + "boolbase": "^1.0.0", + "css-what": "^5.0.0", + "domhandler": "^4.2.0", + "domutils": "^2.6.0", + "nth-check": "^2.0.0" } }, - "ecc-jsbn": { - "version": "0.1.2", - "resolved": "https://registry.npmjs.org/ecc-jsbn/-/ecc-jsbn-0.1.2.tgz", - "integrity": "sha1-OoOpBOVDUyh4dMVkt1SThoSamMk=", + "css-selector-tokenizer": { + "version": "0.7.3", + "resolved": "https://registry.npmjs.org/css-selector-tokenizer/-/css-selector-tokenizer-0.7.3.tgz", + "integrity": "sha512-jWQv3oCEL5kMErj4wRnK/OPoBi0D+P1FR2cDCKYPaMeD2eW3/mttav8HT4hT1CKopiJI/psEULjkClhvJo4Lvg==", "dev": true, "requires": { - "jsbn": "~0.1.0", - "safer-buffer": "^2.1.0" + "cssesc": "^3.0.0", + "fastparse": "^1.1.2" } }, - "ee-first": { - "version": "1.1.1", - "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz", - "integrity": "sha1-WQxhFWsK4vTwJVcyoViyZrxWsh0=", + "css-what": { + "version": "5.1.0", + "resolved": "https://registry.npmjs.org/css-what/-/css-what-5.1.0.tgz", + "integrity": "sha512-arSMRWIIFY0hV8pIxZMEfmMI47Wj3R/aWpZDDxWYCPEiOMv6tfOrnpDtgxBYPEQD4V0Y/958+1TdC3iWTFcUPw==", "dev": true }, - "ejs": { - "version": "3.1.6", - "resolved": "https://registry.npmjs.org/ejs/-/ejs-3.1.6.tgz", - "integrity": "sha512-9lt9Zse4hPucPkoP7FHDF0LQAlGyF9JVpnClFLFH3aSSbxmyoqINRpp/9wePWJTUl4KOQwRL72Iw3InHPDkoGw==", + "cssauron": { + "version": "1.4.0", + "resolved": "https://registry.npmjs.org/cssauron/-/cssauron-1.4.0.tgz", + "integrity": "sha1-pmAt/34EqDBtwNuaVR6S6LVmKtg=", "dev": true, "requires": { - "jake": "^10.6.1" + "through": "X.X.X" } }, - "electron-to-chromium": { - "version": "1.3.775", - "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.775.tgz", - "integrity": "sha512-EGuiJW4yBPOTj2NtWGZcX93ZE8IGj33HJAx4d3ouE2zOfW2trbWU+t1e0yzLr1qQIw81++txbM3BH52QwSRE6Q==", - "dev": true - }, - "emoji-regex": { - "version": "8.0.0", - "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz", - "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==", + "cssdb": { + "version": "4.4.0", + "resolved": "https://registry.npmjs.org/cssdb/-/cssdb-4.4.0.tgz", + "integrity": "sha512-LsTAR1JPEM9TpGhl/0p3nQecC2LJ0kD8X5YARu1hk/9I1gril5vDtMZyNxcEpxxDj34YNck/ucjuoUd66K03oQ==", "dev": true }, - "emojis-list": { + "cssesc": { "version": "3.0.0", - "resolved": "https://registry.npmjs.org/emojis-list/-/emojis-list-3.0.0.tgz", - "integrity": "sha512-/kyM18EfinwXZbno9FyUGeFh87KC8HRQBQGildHZbEuRyWFOmv1U10o9BBp8XVZDVNNuQKyIGIu5ZYAAXJ0V2Q==", + "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz", + "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==", "dev": true }, - "encodeurl": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz", - "integrity": "sha1-rT/0yG7C0CkyL1oCw6mmBslbP1k=", + "cuint": { + "version": "0.2.2", + "resolved": "https://registry.npmjs.org/cuint/-/cuint-0.2.2.tgz", + "integrity": "sha1-QICG1AlVDCYxFVYZ6fp7ytw7mRs=", "dev": true }, - "encoding": { - "version": "0.1.13", - "resolved": "https://registry.npmjs.org/encoding/-/encoding-0.1.13.tgz", - "integrity": "sha512-ETBauow1T35Y/WZMkio9jiM0Z5xjHHmJ4XmjZOq1l/dXz3lr2sRn87nJy20RupqSh1F2m3HHPSp8ShIPQJrJ3A==", + "custom-event": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/custom-event/-/custom-event-1.0.1.tgz", + "integrity": "sha1-XQKkaFCt8bSjF5RqOSj8y1v9BCU=", + "dev": true + }, + "d": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/d/-/d-1.0.1.tgz", + "integrity": "sha512-m62ShEObQ39CfralilEQRjH6oAMtNCV1xJyEx5LpRYUVN+EviphDgUc/F3hnYbADmkiNs67Y+3ylmlG7Lnu+FA==", "dev": true, - "optional": true, "requires": { - "iconv-lite": "^0.6.2" - }, - "dependencies": { - "iconv-lite": { - "version": "0.6.3", - "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz", - "integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==", - "dev": true, - "optional": true, - "requires": { - "safer-buffer": ">= 2.1.2 < 3.0.0" - } - } + "es5-ext": "^0.10.50", + "type": "^1.0.1" } }, - "end-of-stream": { - "version": "1.4.4", - "resolved": "https://registry.npmjs.org/end-of-stream/-/end-of-stream-1.4.4.tgz", - "integrity": "sha512-+uw1inIHVPQoaVuHzRyXd21icM+cnt4CzD5rW+NC1wjOUSTOs+Te7FOv7AhN7vS9x/oIyhLP5PR1H+phQAHu5Q==", + "damerau-levenshtein": { + "version": "1.0.7", + "resolved": "https://registry.npmjs.org/damerau-levenshtein/-/damerau-levenshtein-1.0.7.tgz", + "integrity": "sha512-VvdQIPGdWP0SqFXghj79Wf/5LArmreyMsGLa6FG6iC4t3j7j5s71TrwWmT/4akbDQIqjfACkLZmjXhA7g2oUZw==", + "dev": true + }, + "dargs": { + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/dargs/-/dargs-4.1.0.tgz", + "integrity": "sha1-A6nbtLXC8Tm/FK5T8LiipqhvThc=", "dev": true, "requires": { - "once": "^1.4.0" + "number-is-nan": "^1.0.0" } }, - "ends-with": { - "version": "0.2.0", - "resolved": "https://registry.npmjs.org/ends-with/-/ends-with-0.2.0.tgz", - "integrity": "sha1-L52pjVelDP2kVxzkM5AAUA9Oa4o=", + "dashdash": { + "version": "1.14.1", + "resolved": "https://registry.npmjs.org/dashdash/-/dashdash-1.14.1.tgz", + "integrity": "sha1-hTz6D3y+L+1d4gMmuN1YEDX24vA=", + "dev": true, + "requires": { + "assert-plus": "^1.0.0" + } + }, + "date-format": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/date-format/-/date-format-3.0.0.tgz", + "integrity": "sha512-eyTcpKOcamdhWJXj56DpQMo1ylSQpcGtGKXcU0Tb97+K56/CF5amAqqqNj0+KvA0iw2ynxtHWFsPDSClCxe48w==", "dev": true }, - "engine.io": { - "version": "3.5.0", - "resolved": "https://registry.npmjs.org/engine.io/-/engine.io-3.5.0.tgz", - "integrity": "sha512-21HlvPUKaitDGE4GXNtQ7PLP0Sz4aWLddMPw2VTyFz1FVZqu/kZsJUO8WNpKuE/OCL7nkfRaOui2ZCJloGznGA==", + "dateformat": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/dateformat/-/dateformat-2.2.0.tgz", + "integrity": "sha1-QGXiATz5+5Ft39gu+1Bq1MZ2kGI=", + "dev": true + }, + "debug": { + "version": "4.3.2", + "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.2.tgz", + "integrity": "sha512-mOp8wKcvj7XxC78zLgw/ZA+6TSgkoE2C/ienthhRD298T7UNwAg9diBpLRxC0mOezLl4B0xV7M0cCO6P/O0Xhw==", "dev": true, "requires": { - "accepts": "~1.3.4", - "base64id": "2.0.0", - "cookie": "~0.4.1", - "debug": "~4.1.0", - "engine.io-parser": "~2.2.0", - "ws": "~7.4.2" + "ms": "2.1.2" + } + }, + "debug-fabulous": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/debug-fabulous/-/debug-fabulous-1.1.0.tgz", + "integrity": "sha512-GZqvGIgKNlUnHUPQhepnUZFIMoi3dgZKQBzKDeL2g7oJF9SNAji/AAu36dusFUas0O+pae74lNeoIPHqXWDkLg==", + "dev": true, + "requires": { + "debug": "3.X", + "memoizee": "0.4.X", + "object-assign": "4.X" }, "dependencies": { - "cookie": { - "version": "0.4.1", - "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.4.1.tgz", - "integrity": "sha512-ZwrFkGJxUR3EIoXtO+yVE69Eb7KlixbaeAWfBQB9vVsNn/o+Yw69gBWSSDK825hQNdN+wF8zELf3dFNl/kxkUA==", - "dev": true - }, "debug": { - "version": "4.1.1", - "resolved": "https://registry.npmjs.org/debug/-/debug-4.1.1.tgz", - "integrity": "sha512-pYAIzeRo8J6KPEaJ0VWOh5Pzkbw/RetuzehGM7QRRX5he4fPHx2rdKMB256ehJCkX+XRQm16eZLqLNS8RSZXZw==", + "version": "3.2.7", + "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz", + "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==", "dev": true, "requires": { "ms": "^2.1.1" } - }, - "ws": { - "version": "7.4.6", - "resolved": "https://registry.npmjs.org/ws/-/ws-7.4.6.tgz", - "integrity": "sha512-YmhHDO4MzaDLB+M9ym/mDA5z0naX8j7SIlT8f8z+I0VtzsRbekxEutHSme7NPS2qE8StCYQNUnfWdXta/Yu85A==", - "dev": true } } }, - "engine.io-client": { - "version": "3.5.2", - "resolved": "https://registry.npmjs.org/engine.io-client/-/engine.io-client-3.5.2.tgz", - "integrity": "sha512-QEqIp+gJ/kMHeUun7f5Vv3bteRHppHH/FMBQX/esFj/fuYfjyUKWGMo3VCvIP/V8bE9KcjHmRZrhIz2Z9oNsDA==", + "decamelize": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/decamelize/-/decamelize-1.2.0.tgz", + "integrity": "sha1-9lNNFRSCabIDUue+4m9QH5oZEpA=", + "dev": true + }, + "decamelize-keys": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/decamelize-keys/-/decamelize-keys-1.1.0.tgz", + "integrity": "sha1-0XGoeTMlKAfrPLYdwcFEXQeN8tk=", "dev": true, "requires": { - "component-emitter": "~1.3.0", - "component-inherit": "0.0.3", - "debug": "~3.1.0", - "engine.io-parser": "~2.2.0", - "has-cors": "1.1.0", - "indexof": "0.0.1", - "parseqs": "0.0.6", - "parseuri": "0.0.6", - "ws": "~7.4.2", - "xmlhttprequest-ssl": "~1.6.2", - "yeast": "0.1.2" + "decamelize": "^1.1.0", + "map-obj": "^1.0.0" + } + }, + "decode-uri-component": { + "version": "0.2.0", + "resolved": "https://registry.npmjs.org/decode-uri-component/-/decode-uri-component-0.2.0.tgz", + "integrity": "sha1-6zkTMzRYd1y4TNGh+uBiEGu4dUU=", + "dev": true + }, + "decompress": { + "version": "4.2.1", + "resolved": "https://registry.npmjs.org/decompress/-/decompress-4.2.1.tgz", + "integrity": "sha512-e48kc2IjU+2Zw8cTb6VZcJQ3lgVbS4uuB1TfCHbiZIP/haNXm+SVyhu+87jts5/3ROpd82GSVCoNs/z8l4ZOaQ==", + "dev": true, + "requires": { + "decompress-tar": "^4.0.0", + "decompress-tarbz2": "^4.0.0", + "decompress-targz": "^4.0.0", + "decompress-unzip": "^4.0.1", + "graceful-fs": "^4.1.10", + "make-dir": "^1.0.0", + "pify": "^2.3.0", + "strip-dirs": "^2.0.0" }, "dependencies": { - "debug": { - "version": "3.1.0", - "resolved": "https://registry.npmjs.org/debug/-/debug-3.1.0.tgz", - "integrity": "sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==", + "make-dir": { + "version": "1.3.0", + "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-1.3.0.tgz", + "integrity": "sha512-2w31R7SJtieJJnQtGc7RVL2StM2vGYVfqUOvUDxH6bC6aJTxPxTF0GnIgCyu7tjockiUWAYQRbxa7vKn34s5sQ==", "dev": true, "requires": { - "ms": "2.0.0" + "pify": "^3.0.0" + }, + "dependencies": { + "pify": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/pify/-/pify-3.0.0.tgz", + "integrity": "sha1-5aSs0sEB/fPZpNB/DbxNtJ3SgXY=", + "dev": true + } } }, - "ms": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz", - "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=", - "dev": true - }, - "ws": { - "version": "7.4.6", - "resolved": "https://registry.npmjs.org/ws/-/ws-7.4.6.tgz", - "integrity": "sha512-YmhHDO4MzaDLB+M9ym/mDA5z0naX8j7SIlT8f8z+I0VtzsRbekxEutHSme7NPS2qE8StCYQNUnfWdXta/Yu85A==", + "pify": { + "version": "2.3.0", + "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz", + "integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw=", "dev": true } } }, - "engine.io-parser": { - "version": "2.2.1", - "resolved": "https://registry.npmjs.org/engine.io-parser/-/engine.io-parser-2.2.1.tgz", - "integrity": "sha512-x+dN/fBH8Ro8TFwJ+rkB2AmuVw9Yu2mockR/p3W8f8YtExwFgDvBDi0GWyb4ZLkpahtDGZgtr3zLovanJghPqg==", + "decompress-response": { + "version": "3.3.0", + "resolved": "https://registry.npmjs.org/decompress-response/-/decompress-response-3.3.0.tgz", + "integrity": "sha1-gKTdMjdIOEv6JICDYirt7Jgq3/M=", "dev": true, "requires": { - "after": "0.8.2", - "arraybuffer.slice": "~0.0.7", - "base64-arraybuffer": "0.1.4", - "blob": "0.0.5", - "has-binary2": "~1.0.2" + "mimic-response": "^1.0.0" } }, - "enhanced-resolve": { - "version": "5.8.2", - "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.8.2.tgz", - "integrity": "sha512-F27oB3WuHDzvR2DOGNTaYy0D5o0cnrv8TeI482VM4kYgQd/FT9lUQwuNsJ0oOHtBUq7eiW5ytqzp7nBFknL+GA==", + "decompress-tar": { + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/decompress-tar/-/decompress-tar-4.1.1.tgz", + "integrity": "sha512-JdJMaCrGpB5fESVyxwpCx4Jdj2AagLmv3y58Qy4GE6HMVjWz1FeVQk1Ct4Kye7PftcdOo/7U7UKzYBJgqnGeUQ==", "dev": true, "requires": { - "graceful-fs": "^4.2.4", - "tapable": "^2.2.0" + "file-type": "^5.2.0", + "is-stream": "^1.1.0", + "tar-stream": "^1.5.2" } }, - "enquirer": { - "version": "2.3.6", - "resolved": "https://registry.npmjs.org/enquirer/-/enquirer-2.3.6.tgz", - "integrity": "sha512-yjNnPr315/FjS4zIsUxYguYUPP2e1NK4d7E7ZOLiyYCcbFBiTMyID+2wvm2w6+pZ/odMA7cRkjhsPbltwBOrLg==", + "decompress-tarbz2": { + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/decompress-tarbz2/-/decompress-tarbz2-4.1.1.tgz", + "integrity": "sha512-s88xLzf1r81ICXLAVQVzaN6ZmX4A6U4z2nMbOwobxkLoIIfjVMBg7TeguTUXkKeXni795B6y5rnvDw7rxhAq9A==", "dev": true, "requires": { - "ansi-colors": "^4.1.1" + "decompress-tar": "^4.1.0", + "file-type": "^6.1.0", + "is-stream": "^1.1.0", + "seek-bzip": "^1.0.5", + "unbzip2-stream": "^1.0.9" + }, + "dependencies": { + "file-type": { + "version": "6.2.0", + "resolved": "https://registry.npmjs.org/file-type/-/file-type-6.2.0.tgz", + "integrity": "sha512-YPcTBDV+2Tm0VqjybVd32MHdlEGAtuxS3VAYsumFokDSMG+ROT5wawGlnHDoz7bfMcMDt9hxuXvXwoKUx2fkOg==", + "dev": true + } } }, - "ent": { - "version": "2.2.0", - "resolved": "https://registry.npmjs.org/ent/-/ent-2.2.0.tgz", - "integrity": "sha1-6WQhkyWiHQX0RGai9obtbOX13R0=", - "dev": true - }, - "entities": { - "version": "2.2.0", - "resolved": "https://registry.npmjs.org/entities/-/entities-2.2.0.tgz", - "integrity": "sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A==", - "dev": true - }, - "env-paths": { - "version": "2.2.1", - "resolved": "https://registry.npmjs.org/env-paths/-/env-paths-2.2.1.tgz", - "integrity": "sha512-+h1lkLKhZMTYjog1VEpJNG7NZJWcuc2DDk/qsqSTRRCOXiLjeQ1d1/udrUGhqMxUgAlwKNZ0cf2uqan5GLuS2A==", - "dev": true - }, - "err-code": { - "version": "2.0.3", - "resolved": "https://registry.npmjs.org/err-code/-/err-code-2.0.3.tgz", - "integrity": "sha512-2bmlRpNKBxT/CRmPOlyISQpNj+qSeYvcym/uT0Jx2bMOlKLtSy1ZmLuVxSEKKyor/N5yhvp/ZiG1oE3DEYMSFA==", - "dev": true - }, - "errno": { - "version": "0.1.8", - "resolved": "https://registry.npmjs.org/errno/-/errno-0.1.8.tgz", - "integrity": "sha512-dJ6oBr5SQ1VSd9qkk7ByRgb/1SH4JZjCHSW/mr63/QcXO9zLVxvJ6Oy13nio03rxpSnVDDjFor75SjVeZWPW/A==", + "decompress-targz": { + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/decompress-targz/-/decompress-targz-4.1.1.tgz", + "integrity": "sha512-4z81Znfr6chWnRDNfFNqLwPvm4db3WuZkqV+UgXQzSngG3CEKdBkw5jrv3axjjL96glyiiKjsxJG3X6WBZwX3w==", "dev": true, "requires": { - "prr": "~1.0.1" + "decompress-tar": "^4.1.1", + "file-type": "^5.2.0", + "is-stream": "^1.1.0" } }, - "error-ex": { - "version": "1.3.2", - "resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.2.tgz", - "integrity": "sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==", + "decompress-unzip": { + "version": "4.0.1", + "resolved": "https://registry.npmjs.org/decompress-unzip/-/decompress-unzip-4.0.1.tgz", + "integrity": "sha1-3qrM39FK6vhVePczroIQ+bSEj2k=", "dev": true, "requires": { - "is-arrayish": "^0.2.1" + "file-type": "^3.8.0", + "get-stream": "^2.2.0", + "pify": "^2.3.0", + "yauzl": "^2.4.2" + }, + "dependencies": { + "file-type": { + "version": "3.9.0", + "resolved": "https://registry.npmjs.org/file-type/-/file-type-3.9.0.tgz", + "integrity": "sha1-JXoHg4TR24CHvESdEH1SpSZyuek=", + "dev": true + }, + "get-stream": { + "version": "2.3.1", + "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-2.3.1.tgz", + "integrity": "sha1-Xzj5PzRgCWZu4BUKBUFn+Rvdld4=", + "dev": true, + "requires": { + "object-assign": "^4.0.1", + "pinkie-promise": "^2.0.0" + } + }, + "pify": { + "version": "2.3.0", + "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz", + "integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw=", + "dev": true + } } }, - "es-abstract": { - "version": "1.18.3", - "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.18.3.tgz", - "integrity": "sha512-nQIr12dxV7SSxE6r6f1l3DtAeEYdsGpps13dR0TwJg1S8gyp4ZPgy3FZcHBgbiQqnoqSTb+oC+kO4UQ0C/J8vw==", + "deep-equal": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/deep-equal/-/deep-equal-1.1.1.tgz", + "integrity": "sha512-yd9c5AdiqVcR+JjcwUQb9DkhJc8ngNr0MahEBGvDiJw8puWab2yZlh+nkasOnZP+EGTAP6rRp2JzJhJZzvNF8g==", "dev": true, "requires": { - "call-bind": "^1.0.2", - "es-to-primitive": "^1.2.1", - "function-bind": "^1.1.1", - "get-intrinsic": "^1.1.1", - "has": "^1.0.3", - "has-symbols": "^1.0.2", - "is-callable": "^1.2.3", - "is-negative-zero": "^2.0.1", - "is-regex": "^1.1.3", - "is-string": "^1.0.6", - "object-inspect": "^1.10.3", + "is-arguments": "^1.0.4", + "is-date-object": "^1.0.1", + "is-regex": "^1.0.4", + "object-is": "^1.0.1", "object-keys": "^1.1.1", - "object.assign": "^4.1.2", - "string.prototype.trimend": "^1.0.4", - "string.prototype.trimstart": "^1.0.4", - "unbox-primitive": "^1.0.1" + "regexp.prototype.flags": "^1.2.0" } }, - "es-module-lexer": { - "version": "0.7.1", - "resolved": "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-0.7.1.tgz", - "integrity": "sha512-MgtWFl5No+4S3TmhDmCz2ObFGm6lEpTnzbQi+Dd+pw4mlTIZTmM2iAs5gRlmx5zS9luzobCSBSI90JM/1/JgOw==", + "deep-extend": { + "version": "0.6.0", + "resolved": "https://registry.npmjs.org/deep-extend/-/deep-extend-0.6.0.tgz", + "integrity": "sha512-LOHxIOaPYdHlJRtCQfDIVZtfw/ufM8+rVj649RIHzcm/vGwQRXFt6OPqIFWsm2XEMrNIEtWR64sY1LEKD2vAOA==", "dev": true }, - "es-to-primitive": { - "version": "1.2.1", - "resolved": "https://registry.npmjs.org/es-to-primitive/-/es-to-primitive-1.2.1.tgz", - "integrity": "sha512-QCOllgZJtaUo9miYBcLChTUaHNjJF3PYs1VidD7AwiEj1kYxKeQTctLAezAOH5ZKRH0g2IgPn6KwB4IT8iRpvA==", + "deep-is": { + "version": "0.1.3", + "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.3.tgz", + "integrity": "sha1-s2nW+128E+7PUk+RsHD+7cNXzzQ=" + }, + "deepmerge": { + "version": "4.2.2", + "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.2.2.tgz", + "integrity": "sha512-FJ3UgI4gIl+PHZm53knsuSFpE+nESMr7M4v9QcgB7S63Kj/6WqMiFQJpBBYz1Pt+66bZpP3Q7Lye0Oo9MPKEdg==", + "dev": true + }, + "default-compare": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/default-compare/-/default-compare-1.0.0.tgz", + "integrity": "sha512-QWfXlM0EkAbqOCbD/6HjdwT19j7WCkMyiRhWilc4H9/5h/RzTF9gv5LYh1+CmDV5d1rki6KAWLtQale0xt20eQ==", "dev": true, "requires": { - "is-callable": "^1.1.4", - "is-date-object": "^1.0.1", - "is-symbol": "^1.0.2" + "kind-of": "^5.0.2" + }, + "dependencies": { + "kind-of": { + "version": "5.1.0", + "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-5.1.0.tgz", + "integrity": "sha512-NGEErnH6F2vUuXDh+OlbcKW7/wOcfdRHaZ7VWtqCztfHri/++YKmP51OdWeGPuqCOba6kk2OTe5d02VmTB80Pw==", + "dev": true + } } }, - "es5-ext": { - "version": "0.10.53", - "resolved": "https://registry.npmjs.org/es5-ext/-/es5-ext-0.10.53.tgz", - "integrity": "sha512-Xs2Stw6NiNHWypzRTY1MtaG/uJlwCk8kH81920ma8mvN8Xq1gsfhZvpkImLQArw8AHnv8MT2I45J3c0R8slE+Q==", + "default-gateway": { + "version": "6.0.3", + "resolved": "https://registry.npmjs.org/default-gateway/-/default-gateway-6.0.3.tgz", + "integrity": "sha512-fwSOJsbbNzZ/CUFpqFBqYfYNLj1NbMPm8MMCIzHjC83iSJRBEGmDUxU+WP661BaBQImeC2yHwXtz+P/O9o+XEg==", "dev": true, "requires": { - "es6-iterator": "~2.0.3", - "es6-symbol": "~3.1.3", - "next-tick": "~1.0.0" + "execa": "^5.0.0" + }, + "dependencies": { + "cross-spawn": { + "version": "7.0.3", + "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz", + "integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==", + "dev": true, + "requires": { + "path-key": "^3.1.0", + "shebang-command": "^2.0.0", + "which": "^2.0.1" + } + }, + "execa": { + "version": "5.1.1", + "resolved": "https://registry.npmjs.org/execa/-/execa-5.1.1.tgz", + "integrity": "sha512-8uSpZZocAZRBAPIEINJj3Lo9HyGitllczc27Eh5YYojjMFMn8yHMDMaUHE2Jqfq05D/wucwI4JGURyXt1vchyg==", + "dev": true, + "requires": { + "cross-spawn": "^7.0.3", + "get-stream": "^6.0.0", + "human-signals": "^2.1.0", + "is-stream": "^2.0.0", + "merge-stream": "^2.0.0", + "npm-run-path": "^4.0.1", + "onetime": "^5.1.2", + "signal-exit": "^3.0.3", + "strip-final-newline": "^2.0.0" + } + }, + "get-stream": { + "version": "6.0.1", + "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-6.0.1.tgz", + "integrity": "sha512-ts6Wi+2j3jQjqi70w5AlN8DFnkSwC+MqmxEzdEALB2qXZYV3X/b1CTfgPLGJNMeAWxdPfU8FO1ms3NUfaHCPYg==", + "dev": true + }, + "is-stream": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-2.0.1.tgz", + "integrity": "sha512-hFoiJiTl63nn+kstHGBtewWSKnQLpyb155KHheA1l39uvtO9nWIop1p3udqPcUd/xbF1VLMO4n7OI6p7RbngDg==", + "dev": true + }, + "npm-run-path": { + "version": "4.0.1", + "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-4.0.1.tgz", + "integrity": "sha512-S48WzZW777zhNIrn7gxOlISNAqi9ZC/uQFnRdbeIHhZhCA6UqpkOT8T1G7BvfdgP4Er8gF4sUbaS0i7QvIfCWw==", + "dev": true, + "requires": { + "path-key": "^3.0.0" + } + }, + "path-key": { + "version": "3.1.1", + "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz", + "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==", + "dev": true + }, + "shebang-command": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz", + "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==", + "dev": true, + "requires": { + "shebang-regex": "^3.0.0" + } + }, + "shebang-regex": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz", + "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==", + "dev": true + }, + "which": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz", + "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==", + "dev": true, + "requires": { + "isexe": "^2.0.0" + } + } } }, - "es6-denodeify": { - "version": "0.1.5", - "resolved": "https://registry.npmjs.org/es6-denodeify/-/es6-denodeify-0.1.5.tgz", - "integrity": "sha1-MdTV/pxVA+ElRgQ5MQ4WoqPznB8=", + "default-resolution": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/default-resolution/-/default-resolution-2.0.0.tgz", + "integrity": "sha1-vLgrqnKtebQmp2cy8aga1t8m1oQ=", "dev": true }, - "es6-iterator": { - "version": "2.0.3", - "resolved": "https://registry.npmjs.org/es6-iterator/-/es6-iterator-2.0.3.tgz", - "integrity": "sha1-p96IkUGgWpSwhUQDstCg+/qY87c=", + "defaults": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/defaults/-/defaults-1.0.3.tgz", + "integrity": "sha1-xlYFHpgX2f8I7YgUd/P+QBnz730=", "dev": true, "requires": { - "d": "1", - "es5-ext": "^0.10.35", - "es6-symbol": "^3.1.1" + "clone": "^1.0.2" } }, - "es6-promise": { - "version": "4.2.8", - "resolved": "https://registry.npmjs.org/es6-promise/-/es6-promise-4.2.8.tgz", - "integrity": "sha512-HJDGx5daxeIvxdBxvG2cb9g4tEvwIk3i8+nhX0yGrYmZUzbkdg8QbDevheDB8gd0//uPj4c1EQua8Q+MViT0/w==", + "defer-to-connect": { + "version": "1.1.3", + "resolved": "https://registry.npmjs.org/defer-to-connect/-/defer-to-connect-1.1.3.tgz", + "integrity": "sha512-0ISdNousHvZT2EiFlZeZAHBUvSxmKswVCEf8hW7KWgG4a8MVEu/3Vb6uWYozkjylyCxe0JBIiRB1jV45S70WVQ==", "dev": true }, - "es6-promisify": { - "version": "5.0.0", - "resolved": "https://registry.npmjs.org/es6-promisify/-/es6-promisify-5.0.0.tgz", - "integrity": "sha1-UQnWLz5W6pZ8S2NQWu8IKRyKUgM=", + "define-lazy-prop": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/define-lazy-prop/-/define-lazy-prop-2.0.0.tgz", + "integrity": "sha512-Ds09qNh8yw3khSjiJjiUInaGX9xlqZDY7JVryGxdxV7NPeuqQfplOpQ66yJFZut3jLa5zOwkXw1g9EI2uKh4Og==", + "dev": true + }, + "define-properties": { + "version": "1.1.3", + "resolved": "https://registry.npmjs.org/define-properties/-/define-properties-1.1.3.tgz", + "integrity": "sha512-3MqfYKj2lLzdMSf8ZIZE/V+Zuy+BgD6f164e8K2w7dgnpKArBDerGYpM46IYYcjnkdPNMjPk9A6VFB8+3SKlXQ==", "dev": true, "requires": { - "es6-promise": "^4.0.3" + "object-keys": "^1.0.12" } }, - "es6-symbol": { - "version": "3.1.3", - "resolved": "https://registry.npmjs.org/es6-symbol/-/es6-symbol-3.1.3.tgz", - "integrity": "sha512-NJ6Yn3FuDinBaBRWl/q5X/s4koRHBrgKAu+yGI6JCBeiu3qrcbJhwT2GeR/EXVfylRk8dpQVJoLEFhK+Mu31NA==", + "define-property": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/define-property/-/define-property-2.0.2.tgz", + "integrity": "sha512-jwK2UV4cnPpbcG7+VRARKTZPUWowwXA8bzH5NP6ud0oeAxyYPuGZUAC7hMugpCdz4BeSZl2Dl9k66CHJ/46ZYQ==", "dev": true, "requires": { - "d": "^1.0.1", - "ext": "^1.1.2" - } - }, - "es6-weak-map": { - "version": "2.0.3", - "resolved": "https://registry.npmjs.org/es6-weak-map/-/es6-weak-map-2.0.3.tgz", - "integrity": "sha512-p5um32HOTO1kP+w7PRnB+5lQ43Z6muuMuIMffvDN8ZB4GcnjLBV6zGStpbASIMk4DCAvEaamhe2zhyCb/QXXsA==", + "is-descriptor": "^1.0.2", + "isobject": "^3.0.1" + }, + "dependencies": { + "is-accessor-descriptor": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/is-accessor-descriptor/-/is-accessor-descriptor-1.0.0.tgz", + "integrity": "sha512-m5hnHTkcVsPfqx3AKlyttIPb7J+XykHvJP2B9bZDjlhLIoEq4XoK64Vg7boZlVWYK6LUY94dYPEE7Lh0ZkZKcQ==", + "dev": true, + "requires": { + "kind-of": "^6.0.0" + } + }, + "is-data-descriptor": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/is-data-descriptor/-/is-data-descriptor-1.0.0.tgz", + "integrity": "sha512-jbRXy1FmtAoCjQkVmIVYwuuqDFUbaOeDjmed1tOGPrsMhtJA4rD9tkgA0F1qJ3gRFRXcHYVkdeaP50Q5rE/jLQ==", + "dev": true, + "requires": { + "kind-of": "^6.0.0" + } + }, + "is-descriptor": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/is-descriptor/-/is-descriptor-1.0.2.tgz", + "integrity": "sha512-2eis5WqQGV7peooDyLmNEPUrps9+SXX5c9pL3xEB+4e9HnGuDa7mB7kHxHw4CbqS9k1T2hOH3miL8n8WtiYVtg==", + "dev": true, + "requires": { + "is-accessor-descriptor": "^1.0.0", + "is-data-descriptor": "^1.0.0", + "kind-of": "^6.0.2" + } + } + } + }, + "del": { + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/del/-/del-6.0.0.tgz", + "integrity": "sha512-1shh9DQ23L16oXSZKB2JxpL7iMy2E0S9d517ptA1P8iw0alkPtQcrKH7ru31rYtKwF499HkTu+DRzq3TCKDFRQ==", "dev": true, "requires": { - "d": "1", - "es5-ext": "^0.10.46", - "es6-iterator": "^2.0.3", - "es6-symbol": "^3.1.1" + "globby": "^11.0.1", + "graceful-fs": "^4.2.4", + "is-glob": "^4.0.1", + "is-path-cwd": "^2.2.0", + "is-path-inside": "^3.0.2", + "p-map": "^4.0.0", + "rimraf": "^3.0.2", + "slash": "^3.0.0" } }, - "esbuild": { - "version": "0.12.17", - "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.12.17.tgz", - "integrity": "sha512-GshKJyVYUnlSXIZj/NheC2O0Kblh42CS7P1wJyTbbIHevTG4jYMS9NNw8EOd8dDWD0dzydYHS01MpZoUcQXB4g==", + "delayed-stream": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz", + "integrity": "sha1-3zrhmayt+31ECqrgsp4icrJOxhk=", "dev": true }, - "escalade": { - "version": "3.1.1", - "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.1.1.tgz", - "integrity": "sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw==", + "delegates": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/delegates/-/delegates-1.0.0.tgz", + "integrity": "sha1-hMbhWbgZBP3KWaDvRM2HDTElD5o=", "dev": true }, - "escape-goat": { - "version": "2.1.1", - "resolved": "https://registry.npmjs.org/escape-goat/-/escape-goat-2.1.1.tgz", - "integrity": "sha512-8/uIhbG12Csjy2JEW7D9pHbreaVaS/OpN3ycnyvElTdwM5n6GY6W6e2IPemfvGZeUMqZ9A/3GqIZMgKnBhAw/Q==", + "depd": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/depd/-/depd-1.1.2.tgz", + "integrity": "sha1-m81S4UwJd2PnSbJ0xDRu0uVgtak=", "dev": true }, - "escape-html": { - "version": "1.0.3", - "resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz", - "integrity": "sha1-Aljq5NPQwJdN4cFpGI7wBR0dGYg=", + "dependency-graph": { + "version": "0.11.0", + "resolved": "https://registry.npmjs.org/dependency-graph/-/dependency-graph-0.11.0.tgz", + "integrity": "sha512-JeMq7fEshyepOWDfcfHK06N3MhyPhz++vtqWhMT5O9A3K42rdsEDpfdVqjaqaAhsw6a+ZqeDvQVtD0hFHQWrzg==", "dev": true }, - "escape-string-regexp": { - "version": "1.0.5", - "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz", - "integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=", + "destroy": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/destroy/-/destroy-1.0.4.tgz", + "integrity": "sha1-l4hXRCxEdJ5CBmE+N5RiBYJqvYA=", "dev": true }, - "escodegen": { - "version": "1.8.1", - "resolved": "https://registry.npmjs.org/escodegen/-/escodegen-1.8.1.tgz", - "integrity": "sha1-WltTr0aTEQvrsIZ6o0MN07cKEBg=", + "detect-file": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/detect-file/-/detect-file-1.0.0.tgz", + "integrity": "sha1-8NZtA2cqglyxtzvbP+YjEMjlUrc=", + "dev": true + }, + "detect-newline": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/detect-newline/-/detect-newline-2.1.0.tgz", + "integrity": "sha1-9B8cEL5LAOh7XxPaaAdZ8sW/0+I=", + "dev": true + }, + "detect-node": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/detect-node/-/detect-node-2.1.0.tgz", + "integrity": "sha512-T0NIuQpnTvFDATNuHN5roPwSBG83rFsuO+MXXH9/3N1eFbn4wcPjttvjMLEPWJ0RGUYgQE7cGgS3tNxbqCGM7g==", + "dev": true + }, + "dev-ip": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/dev-ip/-/dev-ip-1.0.1.tgz", + "integrity": "sha1-p2o+0YVb56ASu4rBbLgPPADcKPA=", + "dev": true + }, + "di": { + "version": "0.0.1", + "resolved": "https://registry.npmjs.org/di/-/di-0.0.1.tgz", + "integrity": "sha1-gGZJMmzqp8qjMG112YXqJ0i6kTw=", + "dev": true + }, + "diff": { + "version": "3.5.0", + "resolved": "https://registry.npmjs.org/diff/-/diff-3.5.0.tgz", + "integrity": "sha512-A46qtFgd+g7pDZinpnwiRJtxbC1hpgf0uzP3iG89scHk0AUC7A1TGxf5OiiOUv/JMZR8GOt8hL900hV0bOy5xA==", + "dev": true + }, + "dir-glob": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/dir-glob/-/dir-glob-3.0.1.tgz", + "integrity": "sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA==", + "dev": true, "requires": { - "esprima": "^2.7.1", - "estraverse": "^1.9.1", - "esutils": "^2.0.2", - "optionator": "^0.8.1", - "source-map": "~0.2.0" + "path-type": "^4.0.0" } }, - "eslint": { - "version": "7.30.0", - "resolved": "https://registry.npmjs.org/eslint/-/eslint-7.30.0.tgz", - "integrity": "sha512-VLqz80i3as3NdloY44BQSJpFw534L9Oh+6zJOUaViV4JPd+DaHwutqP7tcpkW3YiXbK6s05RZl7yl7cQn+lijg==", + "dlv": { + "version": "1.1.3", + "resolved": "https://registry.npmjs.org/dlv/-/dlv-1.1.3.tgz", + "integrity": "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==", + "dev": true + }, + "dns-equal": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/dns-equal/-/dns-equal-1.0.0.tgz", + "integrity": "sha1-s55/HabrCnW6nBcySzR1PEfgZU0=", + "dev": true + }, + "dns-packet": { + "version": "1.3.4", + "resolved": "https://registry.npmjs.org/dns-packet/-/dns-packet-1.3.4.tgz", + "integrity": "sha512-BQ6F4vycLXBvdrJZ6S3gZewt6rcrks9KBgM9vrhW+knGRqc8uEdT7fuCwloc7nny5xNoMJ17HGH0R/6fpo8ECA==", "dev": true, "requires": { - "@babel/code-frame": "7.12.11", - "@eslint/eslintrc": "^0.4.2", - "@humanwhocodes/config-array": "^0.5.0", - "ajv": "^6.10.0", - "chalk": "^4.0.0", - "cross-spawn": "^7.0.2", - "debug": "^4.0.1", - "doctrine": "^3.0.0", - "enquirer": "^2.3.5", - "escape-string-regexp": "^4.0.0", - "eslint-scope": "^5.1.1", - "eslint-utils": "^2.1.0", - "eslint-visitor-keys": "^2.0.0", - "espree": "^7.3.1", - "esquery": "^1.4.0", - "esutils": "^2.0.2", - "fast-deep-equal": "^3.1.3", - "file-entry-cache": "^6.0.1", - "functional-red-black-tree": "^1.0.1", - "glob-parent": "^5.1.2", - "globals": "^13.6.0", - "ignore": "^4.0.6", - "import-fresh": "^3.0.0", - "imurmurhash": "^0.1.4", - "is-glob": "^4.0.0", - "js-yaml": "^3.13.1", - "json-stable-stringify-without-jsonify": "^1.0.1", - "levn": "^0.4.1", - "lodash.merge": "^4.6.2", - "minimatch": "^3.0.4", - "natural-compare": "^1.4.0", - "optionator": "^0.9.1", - "progress": "^2.0.0", - "regexpp": "^3.1.0", - "semver": "^7.2.1", - "strip-ansi": "^6.0.0", - "strip-json-comments": "^3.1.0", - "table": "^6.0.9", - "text-table": "^0.2.0", - "v8-compile-cache": "^2.0.3" - }, - "dependencies": { - "@babel/code-frame": { - "version": "7.12.11", - "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.12.11.tgz", - "integrity": "sha512-Zt1yodBx1UcyiePMSkWnU4hPqhwq7hGi2nFL1LeA3EUl+q2LQx16MISgJ0+z7dnmgvP9QtIleuETGOiOH1RcIw==", - "dev": true, - "requires": { - "@babel/highlight": "^7.10.4" - } - }, - "ajv": { - "version": "6.12.6", - "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz", - "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==", - "dev": true, - "requires": { - "fast-deep-equal": "^3.1.1", - "fast-json-stable-stringify": "^2.0.0", - "json-schema-traverse": "^0.4.1", - "uri-js": "^4.2.2" - } - }, - "ansi-styles": { - "version": "4.3.0", - "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz", - "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==", - "dev": true, - "requires": { - "color-convert": "^2.0.1" - } - }, - "chalk": { - "version": "4.1.1", - "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.1.tgz", - "integrity": "sha512-diHzdDKxcU+bAsUboHLPEDQiw0qEe0qd7SYUn3HgcFlWgbDcfLGswOHYeGrHKzG9z6UYf01d9VFMfZxPM1xZSg==", - "dev": true, - "requires": { - "ansi-styles": "^4.1.0", - "supports-color": "^7.1.0" - } - }, - "color-convert": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", - "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==", - "dev": true, - "requires": { - "color-name": "~1.1.4" - } - }, - "color-name": { - "version": "1.1.4", - "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz", - "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==", - "dev": true - }, - "cross-spawn": { - "version": "7.0.3", - "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz", - "integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==", - "dev": true, - "requires": { + "ip": "^1.1.0", + "safe-buffer": "^5.0.1" + } + }, + "dns-txt": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/dns-txt/-/dns-txt-2.0.2.tgz", + "integrity": "sha1-uR2Ab10nGI5Ks+fRB9iBocxGQrY=", + "dev": true, + "requires": { + "buffer-indexof": "^1.0.0" + } + }, + "docopt": { + "version": "0.6.2", + "resolved": "https://registry.npmjs.org/docopt/-/docopt-0.6.2.tgz", + "integrity": "sha1-so6eIiDaXsSffqW7JKR3h0Be6xE=", + "dev": true + }, + "doctrine": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-3.0.0.tgz", + "integrity": "sha512-yS+Q5i3hBf7GBkd4KG8a7eBNNWNGLTaEwwYWUijIYM7zrlYDM0BFXHjjPWlWZ1Rg7UaddZeIDmi9jF3HmqiQ2w==", + "dev": true, + "requires": { + "esutils": "^2.0.2" + } + }, + "dom-serialize": { + "version": "2.2.1", + "resolved": "https://registry.npmjs.org/dom-serialize/-/dom-serialize-2.2.1.tgz", + "integrity": "sha1-ViromZ9Evl6jB29UGdzVnrQ6yVs=", + "dev": true, + "requires": { + "custom-event": "~1.0.0", + "ent": "~2.2.0", + "extend": "^3.0.0", + "void-elements": "^2.0.0" + } + }, + "dom-serializer": { + "version": "1.3.2", + "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-1.3.2.tgz", + "integrity": "sha512-5c54Bk5Dw4qAxNOI1pFEizPSjVsx5+bpJKmL2kPn8JhBUq2q09tTCa3mjijun2NfK78NMouDYNMBkOrPZiS+ig==", + "dev": true, + "requires": { + "domelementtype": "^2.0.1", + "domhandler": "^4.2.0", + "entities": "^2.0.0" + } + }, + "domelementtype": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.2.0.tgz", + "integrity": "sha512-DtBMo82pv1dFtUmHyr48beiuq792Sxohr+8Hm9zoxklYPfa6n0Z3Byjj2IV7bmr2IyqClnqEQhfgHJJ5QF0R5A==", + "dev": true + }, + "domhandler": { + "version": "4.2.2", + "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-4.2.2.tgz", + "integrity": "sha512-PzE9aBMsdZO8TK4BnuJwH0QT41wgMbRzuZrHUcpYncEjmQazq8QEaBWgLG7ZyC/DAZKEgglpIA6j4Qn/HmxS3w==", + "dev": true, + "requires": { + "domelementtype": "^2.2.0" + } + }, + "domutils": { + "version": "2.8.0", + "resolved": "https://registry.npmjs.org/domutils/-/domutils-2.8.0.tgz", + "integrity": "sha512-w96Cjofp72M5IIhpjgobBimYEfoPjx1Vx0BSX9P30WBdZW2WIKU0T1Bd0kz2eNZ9ikjKgHbEyKx8BB6H1L3h3A==", + "dev": true, + "requires": { + "dom-serializer": "^1.0.1", + "domelementtype": "^2.2.0", + "domhandler": "^4.2.0" + } + }, + "dot-prop": { + "version": "5.3.0", + "resolved": "https://registry.npmjs.org/dot-prop/-/dot-prop-5.3.0.tgz", + "integrity": "sha512-QM8q3zDe58hqUqjraQOmzZ1LIH9SWQJTlEKCH4kJ2oQvLZk7RbQXvtDM2XEq3fwkV9CCvvH4LA0AV+ogFsBM2Q==", + "dev": true, + "requires": { + "is-obj": "^2.0.0" + } + }, + "download": { + "version": "6.2.5", + "resolved": "https://registry.npmjs.org/download/-/download-6.2.5.tgz", + "integrity": "sha512-DpO9K1sXAST8Cpzb7kmEhogJxymyVUd5qz/vCOSyvwtp2Klj2XcDt5YUuasgxka44SxF0q5RriKIwJmQHG2AuA==", + "dev": true, + "requires": { + "caw": "^2.0.0", + "content-disposition": "^0.5.2", + "decompress": "^4.0.0", + "ext-name": "^5.0.0", + "file-type": "5.2.0", + "filenamify": "^2.0.0", + "get-stream": "^3.0.0", + "got": "^7.0.0", + "make-dir": "^1.0.0", + "p-event": "^1.0.0", + "pify": "^3.0.0" + }, + "dependencies": { + "get-stream": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-3.0.0.tgz", + "integrity": "sha1-jpQ9E1jcN1VQVOy+LtsFqhdO3hQ=", + "dev": true + }, + "make-dir": { + "version": "1.3.0", + "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-1.3.0.tgz", + "integrity": "sha512-2w31R7SJtieJJnQtGc7RVL2StM2vGYVfqUOvUDxH6bC6aJTxPxTF0GnIgCyu7tjockiUWAYQRbxa7vKn34s5sQ==", + "dev": true, + "requires": { + "pify": "^3.0.0" + } + }, + "pify": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/pify/-/pify-3.0.0.tgz", + "integrity": "sha1-5aSs0sEB/fPZpNB/DbxNtJ3SgXY=", + "dev": true + } + } + }, + "duplexer2": { + "version": "0.0.2", + "resolved": "https://registry.npmjs.org/duplexer2/-/duplexer2-0.0.2.tgz", + "integrity": "sha1-xhTc9n4vsUmVqRcR5aYX6KYKMds=", + "dev": true, + "requires": { + "readable-stream": "~1.1.9" + }, + "dependencies": { + "isarray": { + "version": "0.0.1", + "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz", + "integrity": "sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8=", + "dev": true + }, + "readable-stream": { + "version": "1.1.14", + "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-1.1.14.tgz", + "integrity": "sha1-fPTFTvZI44EwhMY23SB54WbAgdk=", + "dev": true, + "requires": { + "core-util-is": "~1.0.0", + "inherits": "~2.0.1", + "isarray": "0.0.1", + "string_decoder": "~0.10.x" + } + }, + "string_decoder": { + "version": "0.10.31", + "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz", + "integrity": "sha1-YuIDvEF2bGwoyfyEMB2rHFMQ+pQ=", + "dev": true + } + } + }, + "duplexer3": { + "version": "0.1.4", + "resolved": "https://registry.npmjs.org/duplexer3/-/duplexer3-0.1.4.tgz", + "integrity": "sha1-7gHdHKwO08vH/b6jfcCo8c4ALOI=", + "dev": true + }, + "duplexify": { + "version": "3.7.1", + "resolved": "https://registry.npmjs.org/duplexify/-/duplexify-3.7.1.tgz", + "integrity": "sha512-07z8uv2wMyS51kKhD1KsdXJg5WQ6t93RneqRxUHnskXVtlYYkLqM0gqStQZ3pj073g687jPCHrqNfCzawLYh5g==", + "dev": true, + "requires": { + "end-of-stream": "^1.0.0", + "inherits": "^2.0.1", + "readable-stream": "^2.0.0", + "stream-shift": "^1.0.0" + } + }, + "each-props": { + "version": "1.3.2", + "resolved": "https://registry.npmjs.org/each-props/-/each-props-1.3.2.tgz", + "integrity": "sha512-vV0Hem3zAGkJAyU7JSjixeU66rwdynTAa1vofCrSA5fEln+m67Az9CcnkVD776/fsN/UjIWmBDoNRS6t6G9RfA==", + "dev": true, + "requires": { + "is-plain-object": "^2.0.1", + "object.defaults": "^1.1.0" + } + }, + "easy-extender": { + "version": "2.3.4", + "resolved": "https://registry.npmjs.org/easy-extender/-/easy-extender-2.3.4.tgz", + "integrity": "sha512-8cAwm6md1YTiPpOvDULYJL4ZS6WfM5/cTeVVh4JsvyYZAoqlRVUpHL9Gr5Fy7HA6xcSZicUia3DeAgO3Us8E+Q==", + "dev": true, + "requires": { + "lodash": "^4.17.10" + } + }, + "eazy-logger": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/eazy-logger/-/eazy-logger-3.1.0.tgz", + "integrity": "sha512-/snsn2JqBtUSSstEl4R0RKjkisGHAhvYj89i7r3ytNUKW12y178KDZwXLXIgwDqLW6E/VRMT9qfld7wvFae8bQ==", + "dev": true, + "requires": { + "tfunk": "^4.0.0" + } + }, + "ecc-jsbn": { + "version": "0.1.2", + "resolved": "https://registry.npmjs.org/ecc-jsbn/-/ecc-jsbn-0.1.2.tgz", + "integrity": "sha1-OoOpBOVDUyh4dMVkt1SThoSamMk=", + "dev": true, + "requires": { + "jsbn": "~0.1.0", + "safer-buffer": "^2.1.0" + } + }, + "ee-first": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz", + "integrity": "sha1-WQxhFWsK4vTwJVcyoViyZrxWsh0=", + "dev": true + }, + "ejs": { + "version": "3.1.6", + "resolved": "https://registry.npmjs.org/ejs/-/ejs-3.1.6.tgz", + "integrity": "sha512-9lt9Zse4hPucPkoP7FHDF0LQAlGyF9JVpnClFLFH3aSSbxmyoqINRpp/9wePWJTUl4KOQwRL72Iw3InHPDkoGw==", + "dev": true, + "requires": { + "jake": "^10.6.1" + } + }, + "electron-to-chromium": { + "version": "1.3.861", + "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.861.tgz", + "integrity": "sha512-GZyflmpMnZRdZ1e2yAyvuFwz1MPSVQelwHX4TJZyXypB8NcxdPvPNwy5lOTxnlkrK13EiQzyTPugRSnj6cBgKg==", + "dev": true + }, + "emoji-regex": { + "version": "8.0.0", + "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz", + "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==", + "dev": true + }, + "emojis-list": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/emojis-list/-/emojis-list-3.0.0.tgz", + "integrity": "sha512-/kyM18EfinwXZbno9FyUGeFh87KC8HRQBQGildHZbEuRyWFOmv1U10o9BBp8XVZDVNNuQKyIGIu5ZYAAXJ0V2Q==", + "dev": true + }, + "encodeurl": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz", + "integrity": "sha1-rT/0yG7C0CkyL1oCw6mmBslbP1k=", + "dev": true + }, + "encoding": { + "version": "0.1.13", + "resolved": "https://registry.npmjs.org/encoding/-/encoding-0.1.13.tgz", + "integrity": "sha512-ETBauow1T35Y/WZMkio9jiM0Z5xjHHmJ4XmjZOq1l/dXz3lr2sRn87nJy20RupqSh1F2m3HHPSp8ShIPQJrJ3A==", + "dev": true, + "optional": true, + "requires": { + "iconv-lite": "^0.6.2" + }, + "dependencies": { + "iconv-lite": { + "version": "0.6.3", + "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz", + "integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==", + "dev": true, + "optional": true, + "requires": { + "safer-buffer": ">= 2.1.2 < 3.0.0" + } + } + } + }, + "end-of-stream": { + "version": "1.4.4", + "resolved": "https://registry.npmjs.org/end-of-stream/-/end-of-stream-1.4.4.tgz", + "integrity": "sha512-+uw1inIHVPQoaVuHzRyXd21icM+cnt4CzD5rW+NC1wjOUSTOs+Te7FOv7AhN7vS9x/oIyhLP5PR1H+phQAHu5Q==", + "dev": true, + "requires": { + "once": "^1.4.0" + } + }, + "ends-with": { + "version": "0.2.0", + "resolved": "https://registry.npmjs.org/ends-with/-/ends-with-0.2.0.tgz", + "integrity": "sha1-L52pjVelDP2kVxzkM5AAUA9Oa4o=", + "dev": true + }, + "engine.io": { + "version": "3.5.0", + "resolved": "https://registry.npmjs.org/engine.io/-/engine.io-3.5.0.tgz", + "integrity": "sha512-21HlvPUKaitDGE4GXNtQ7PLP0Sz4aWLddMPw2VTyFz1FVZqu/kZsJUO8WNpKuE/OCL7nkfRaOui2ZCJloGznGA==", + "dev": true, + "requires": { + "accepts": "~1.3.4", + "base64id": "2.0.0", + "cookie": "~0.4.1", + "debug": "~4.1.0", + "engine.io-parser": "~2.2.0", + "ws": "~7.4.2" + }, + "dependencies": { + "cookie": { + "version": "0.4.1", + "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.4.1.tgz", + "integrity": "sha512-ZwrFkGJxUR3EIoXtO+yVE69Eb7KlixbaeAWfBQB9vVsNn/o+Yw69gBWSSDK825hQNdN+wF8zELf3dFNl/kxkUA==", + "dev": true + }, + "debug": { + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/debug/-/debug-4.1.1.tgz", + "integrity": "sha512-pYAIzeRo8J6KPEaJ0VWOh5Pzkbw/RetuzehGM7QRRX5he4fPHx2rdKMB256ehJCkX+XRQm16eZLqLNS8RSZXZw==", + "dev": true, + "requires": { + "ms": "^2.1.1" + } + }, + "ws": { + "version": "7.4.6", + "resolved": "https://registry.npmjs.org/ws/-/ws-7.4.6.tgz", + "integrity": "sha512-YmhHDO4MzaDLB+M9ym/mDA5z0naX8j7SIlT8f8z+I0VtzsRbekxEutHSme7NPS2qE8StCYQNUnfWdXta/Yu85A==", + "dev": true + } + } + }, + "engine.io-client": { + "version": "3.5.2", + "resolved": "https://registry.npmjs.org/engine.io-client/-/engine.io-client-3.5.2.tgz", + "integrity": "sha512-QEqIp+gJ/kMHeUun7f5Vv3bteRHppHH/FMBQX/esFj/fuYfjyUKWGMo3VCvIP/V8bE9KcjHmRZrhIz2Z9oNsDA==", + "dev": true, + "requires": { + "component-emitter": "~1.3.0", + "component-inherit": "0.0.3", + "debug": "~3.1.0", + "engine.io-parser": "~2.2.0", + "has-cors": "1.1.0", + "indexof": "0.0.1", + "parseqs": "0.0.6", + "parseuri": "0.0.6", + "ws": "~7.4.2", + "xmlhttprequest-ssl": "~1.6.2", + "yeast": "0.1.2" + }, + "dependencies": { + "debug": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/debug/-/debug-3.1.0.tgz", + "integrity": "sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==", + "dev": true, + "requires": { + "ms": "2.0.0" + } + }, + "ms": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz", + "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=", + "dev": true + }, + "ws": { + "version": "7.4.6", + "resolved": "https://registry.npmjs.org/ws/-/ws-7.4.6.tgz", + "integrity": "sha512-YmhHDO4MzaDLB+M9ym/mDA5z0naX8j7SIlT8f8z+I0VtzsRbekxEutHSme7NPS2qE8StCYQNUnfWdXta/Yu85A==", + "dev": true + } + } + }, + "engine.io-parser": { + "version": "2.2.1", + "resolved": "https://registry.npmjs.org/engine.io-parser/-/engine.io-parser-2.2.1.tgz", + "integrity": "sha512-x+dN/fBH8Ro8TFwJ+rkB2AmuVw9Yu2mockR/p3W8f8YtExwFgDvBDi0GWyb4ZLkpahtDGZgtr3zLovanJghPqg==", + "dev": true, + "requires": { + "after": "0.8.2", + "arraybuffer.slice": "~0.0.7", + "base64-arraybuffer": "0.1.4", + "blob": "0.0.5", + "has-binary2": "~1.0.2" + } + }, + "enhanced-resolve": { + "version": "5.8.3", + "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.8.3.tgz", + "integrity": "sha512-EGAbGvH7j7Xt2nc0E7D99La1OiEs8LnyimkRgwExpUMScN6O+3x9tIWs7PLQZVNx4YD+00skHXPXi1yQHpAmZA==", + "dev": true, + "requires": { + "graceful-fs": "^4.2.4", + "tapable": "^2.2.0" + } + }, + "enquirer": { + "version": "2.3.6", + "resolved": "https://registry.npmjs.org/enquirer/-/enquirer-2.3.6.tgz", + "integrity": "sha512-yjNnPr315/FjS4zIsUxYguYUPP2e1NK4d7E7ZOLiyYCcbFBiTMyID+2wvm2w6+pZ/odMA7cRkjhsPbltwBOrLg==", + "dev": true, + "requires": { + "ansi-colors": "^4.1.1" + } + }, + "ent": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/ent/-/ent-2.2.0.tgz", + "integrity": "sha1-6WQhkyWiHQX0RGai9obtbOX13R0=", + "dev": true + }, + "entities": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/entities/-/entities-2.2.0.tgz", + "integrity": "sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A==", + "dev": true + }, + "env-paths": { + "version": "2.2.1", + "resolved": "https://registry.npmjs.org/env-paths/-/env-paths-2.2.1.tgz", + "integrity": "sha512-+h1lkLKhZMTYjog1VEpJNG7NZJWcuc2DDk/qsqSTRRCOXiLjeQ1d1/udrUGhqMxUgAlwKNZ0cf2uqan5GLuS2A==", + "dev": true + }, + "err-code": { + "version": "2.0.3", + "resolved": "https://registry.npmjs.org/err-code/-/err-code-2.0.3.tgz", + "integrity": "sha512-2bmlRpNKBxT/CRmPOlyISQpNj+qSeYvcym/uT0Jx2bMOlKLtSy1ZmLuVxSEKKyor/N5yhvp/ZiG1oE3DEYMSFA==", + "dev": true + }, + "errno": { + "version": "0.1.8", + "resolved": "https://registry.npmjs.org/errno/-/errno-0.1.8.tgz", + "integrity": "sha512-dJ6oBr5SQ1VSd9qkk7ByRgb/1SH4JZjCHSW/mr63/QcXO9zLVxvJ6Oy13nio03rxpSnVDDjFor75SjVeZWPW/A==", + "dev": true, + "optional": true, + "requires": { + "prr": "~1.0.1" + } + }, + "error-ex": { + "version": "1.3.2", + "resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.2.tgz", + "integrity": "sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==", + "dev": true, + "requires": { + "is-arrayish": "^0.2.1" + } + }, + "es-abstract": { + "version": "1.18.3", + "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.18.3.tgz", + "integrity": "sha512-nQIr12dxV7SSxE6r6f1l3DtAeEYdsGpps13dR0TwJg1S8gyp4ZPgy3FZcHBgbiQqnoqSTb+oC+kO4UQ0C/J8vw==", + "dev": true, + "requires": { + "call-bind": "^1.0.2", + "es-to-primitive": "^1.2.1", + "function-bind": "^1.1.1", + "get-intrinsic": "^1.1.1", + "has": "^1.0.3", + "has-symbols": "^1.0.2", + "is-callable": "^1.2.3", + "is-negative-zero": "^2.0.1", + "is-regex": "^1.1.3", + "is-string": "^1.0.6", + "object-inspect": "^1.10.3", + "object-keys": "^1.1.1", + "object.assign": "^4.1.2", + "string.prototype.trimend": "^1.0.4", + "string.prototype.trimstart": "^1.0.4", + "unbox-primitive": "^1.0.1" + } + }, + "es-module-lexer": { + "version": "0.9.3", + "resolved": "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-0.9.3.tgz", + "integrity": "sha512-1HQ2M2sPtxwnvOvT1ZClHyQDiggdNjURWpY2we6aMKCQiUVxTmVs2UYPLIrD84sS+kMdUwfBSylbJPwNnBrnHQ==", + "dev": true + }, + "es-to-primitive": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/es-to-primitive/-/es-to-primitive-1.2.1.tgz", + "integrity": "sha512-QCOllgZJtaUo9miYBcLChTUaHNjJF3PYs1VidD7AwiEj1kYxKeQTctLAezAOH5ZKRH0g2IgPn6KwB4IT8iRpvA==", + "dev": true, + "requires": { + "is-callable": "^1.1.4", + "is-date-object": "^1.0.1", + "is-symbol": "^1.0.2" + } + }, + "es5-ext": { + "version": "0.10.53", + "resolved": "https://registry.npmjs.org/es5-ext/-/es5-ext-0.10.53.tgz", + "integrity": "sha512-Xs2Stw6NiNHWypzRTY1MtaG/uJlwCk8kH81920ma8mvN8Xq1gsfhZvpkImLQArw8AHnv8MT2I45J3c0R8slE+Q==", + "dev": true, + "requires": { + "es6-iterator": "~2.0.3", + "es6-symbol": "~3.1.3", + "next-tick": "~1.0.0" + } + }, + "es6-denodeify": { + "version": "0.1.5", + "resolved": "https://registry.npmjs.org/es6-denodeify/-/es6-denodeify-0.1.5.tgz", + "integrity": "sha1-MdTV/pxVA+ElRgQ5MQ4WoqPznB8=", + "dev": true + }, + "es6-iterator": { + "version": "2.0.3", + "resolved": "https://registry.npmjs.org/es6-iterator/-/es6-iterator-2.0.3.tgz", + "integrity": "sha1-p96IkUGgWpSwhUQDstCg+/qY87c=", + "dev": true, + "requires": { + "d": "1", + "es5-ext": "^0.10.35", + "es6-symbol": "^3.1.1" + } + }, + "es6-promise": { + "version": "4.2.8", + "resolved": "https://registry.npmjs.org/es6-promise/-/es6-promise-4.2.8.tgz", + "integrity": "sha512-HJDGx5daxeIvxdBxvG2cb9g4tEvwIk3i8+nhX0yGrYmZUzbkdg8QbDevheDB8gd0//uPj4c1EQua8Q+MViT0/w==", + "dev": true + }, + "es6-promisify": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/es6-promisify/-/es6-promisify-5.0.0.tgz", + "integrity": "sha1-UQnWLz5W6pZ8S2NQWu8IKRyKUgM=", + "dev": true, + "requires": { + "es6-promise": "^4.0.3" + } + }, + "es6-symbol": { + "version": "3.1.3", + "resolved": "https://registry.npmjs.org/es6-symbol/-/es6-symbol-3.1.3.tgz", + "integrity": "sha512-NJ6Yn3FuDinBaBRWl/q5X/s4koRHBrgKAu+yGI6JCBeiu3qrcbJhwT2GeR/EXVfylRk8dpQVJoLEFhK+Mu31NA==", + "dev": true, + "requires": { + "d": "^1.0.1", + "ext": "^1.1.2" + } + }, + "es6-weak-map": { + "version": "2.0.3", + "resolved": "https://registry.npmjs.org/es6-weak-map/-/es6-weak-map-2.0.3.tgz", + "integrity": "sha512-p5um32HOTO1kP+w7PRnB+5lQ43Z6muuMuIMffvDN8ZB4GcnjLBV6zGStpbASIMk4DCAvEaamhe2zhyCb/QXXsA==", + "dev": true, + "requires": { + "d": "1", + "es5-ext": "^0.10.46", + "es6-iterator": "^2.0.3", + "es6-symbol": "^3.1.1" + } + }, + "esbuild": { + "version": "0.13.12", + "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.13.12.tgz", + "integrity": "sha512-vTKKUt+yoz61U/BbrnmlG9XIjwpdIxmHB8DlPR0AAW6OdS+nBQBci6LUHU2q9WbBobMEIQxxDpKbkmOGYvxsow==", + "dev": true, + "optional": true, + "requires": { + "esbuild-android-arm64": "0.13.12", + "esbuild-darwin-64": "0.13.12", + "esbuild-darwin-arm64": "0.13.12", + "esbuild-freebsd-64": "0.13.12", + "esbuild-freebsd-arm64": "0.13.12", + "esbuild-linux-32": "0.13.12", + "esbuild-linux-64": "0.13.12", + "esbuild-linux-arm": "0.13.12", + "esbuild-linux-arm64": "0.13.12", + "esbuild-linux-mips64le": "0.13.12", + "esbuild-linux-ppc64le": "0.13.12", + "esbuild-netbsd-64": "0.13.12", + "esbuild-openbsd-64": "0.13.12", + "esbuild-sunos-64": "0.13.12", + "esbuild-windows-32": "0.13.12", + "esbuild-windows-64": "0.13.12", + "esbuild-windows-arm64": "0.13.12" + } + }, + "esbuild-android-arm64": { + "version": "0.13.12", + "resolved": "https://registry.npmjs.org/esbuild-android-arm64/-/esbuild-android-arm64-0.13.12.tgz", + "integrity": "sha512-TSVZVrb4EIXz6KaYjXfTzPyyRpXV5zgYIADXtQsIenjZ78myvDGaPi11o4ZSaHIwFHsuwkB6ne5SZRBwAQ7maw==", + "dev": true, + "optional": true + }, + "esbuild-darwin-64": { + "version": "0.13.12", + "resolved": "https://registry.npmjs.org/esbuild-darwin-64/-/esbuild-darwin-64-0.13.12.tgz", + "integrity": "sha512-c51C+N+UHySoV2lgfWSwwmlnLnL0JWj/LzuZt9Ltk9ub1s2Y8cr6SQV5W3mqVH1egUceew6KZ8GyI4nwu+fhsw==", + "dev": true, + "optional": true + }, + "esbuild-darwin-arm64": { + "version": "0.13.12", + "resolved": "https://registry.npmjs.org/esbuild-darwin-arm64/-/esbuild-darwin-arm64-0.13.12.tgz", + "integrity": "sha512-JvAMtshP45Hd8A8wOzjkY1xAnTKTYuP/QUaKp5eUQGX+76GIie3fCdUUr2ZEKdvpSImNqxiZSIMziEiGB5oUmQ==", + "dev": true, + "optional": true + }, + "esbuild-freebsd-64": { + "version": "0.13.12", + "resolved": "https://registry.npmjs.org/esbuild-freebsd-64/-/esbuild-freebsd-64-0.13.12.tgz", + "integrity": "sha512-r6On/Skv9f0ZjTu6PW5o7pdXr8aOgtFOEURJZYf1XAJs0IQ+gW+o1DzXjVkIoT+n1cm3N/t1KRJfX71MPg/ZUA==", + "dev": true, + "optional": true + }, + "esbuild-freebsd-arm64": { + "version": "0.13.12", + "resolved": "https://registry.npmjs.org/esbuild-freebsd-arm64/-/esbuild-freebsd-arm64-0.13.12.tgz", + "integrity": "sha512-F6LmI2Q1gii073kmBE3NOTt/6zLL5zvZsxNLF8PMAwdHc+iBhD1vzfI8uQZMJA1IgXa3ocr3L3DJH9fLGXy6Yw==", + "dev": true, + "optional": true + }, + "esbuild-linux-32": { + "version": "0.13.12", + "resolved": "https://registry.npmjs.org/esbuild-linux-32/-/esbuild-linux-32-0.13.12.tgz", + "integrity": "sha512-U1UZwG3UIwF7/V4tCVAo/nkBV9ag5KJiJTt+gaCmLVWH3bPLX7y+fNlhIWZy8raTMnXhMKfaTvWZ9TtmXzvkuQ==", + "dev": true, + "optional": true + }, + "esbuild-linux-64": { + "version": "0.13.12", + "resolved": "https://registry.npmjs.org/esbuild-linux-64/-/esbuild-linux-64-0.13.12.tgz", + "integrity": "sha512-YpXSwtu2NxN3N4ifJxEdsgd6Q5d8LYqskrAwjmoCT6yQnEHJSF5uWcxv783HWN7lnGpJi9KUtDvYsnMdyGw71Q==", + "dev": true, + "optional": true + }, + "esbuild-linux-arm": { + "version": "0.13.12", + "resolved": "https://registry.npmjs.org/esbuild-linux-arm/-/esbuild-linux-arm-0.13.12.tgz", + "integrity": "sha512-SyiT/JKxU6J+DY2qUiSLZJqCAftIt3uoGejZ0HDnUM2MGJqEGSGh7p1ecVL2gna3PxS4P+j6WAehCwgkBPXNIw==", + "dev": true, + "optional": true + }, + "esbuild-linux-arm64": { + "version": "0.13.12", + "resolved": "https://registry.npmjs.org/esbuild-linux-arm64/-/esbuild-linux-arm64-0.13.12.tgz", + "integrity": "sha512-sgDNb8kb3BVodtAlcFGgwk+43KFCYjnFOaOfJibXnnIojNWuJHpL6aQJ4mumzNWw8Rt1xEtDQyuGK9f+Y24jGA==", + "dev": true, + "optional": true + }, + "esbuild-linux-mips64le": { + "version": "0.13.12", + "resolved": "https://registry.npmjs.org/esbuild-linux-mips64le/-/esbuild-linux-mips64le-0.13.12.tgz", + "integrity": "sha512-qQJHlZBG+QwVIA8AbTEtbvF084QgDi4DaUsUnA+EolY1bxrG+UyOuGflM2ZritGhfS/k7THFjJbjH2wIeoKA2g==", + "dev": true, + "optional": true + }, + "esbuild-linux-ppc64le": { + "version": "0.13.12", + "resolved": "https://registry.npmjs.org/esbuild-linux-ppc64le/-/esbuild-linux-ppc64le-0.13.12.tgz", + "integrity": "sha512-2dSnm1ldL7Lppwlo04CGQUpwNn5hGqXI38OzaoPOkRsBRWFBozyGxTFSee/zHFS+Pdh3b28JJbRK3owrrRgWNw==", + "dev": true, + "optional": true + }, + "esbuild-netbsd-64": { + "version": "0.13.12", + "resolved": "https://registry.npmjs.org/esbuild-netbsd-64/-/esbuild-netbsd-64-0.13.12.tgz", + "integrity": "sha512-D4raxr02dcRiQNbxOLzpqBzcJNFAdsDNxjUbKkDMZBkL54Z0vZh4LRndycdZAMcIdizC/l/Yp/ZsBdAFxc5nbA==", + "dev": true, + "optional": true + }, + "esbuild-openbsd-64": { + "version": "0.13.12", + "resolved": "https://registry.npmjs.org/esbuild-openbsd-64/-/esbuild-openbsd-64-0.13.12.tgz", + "integrity": "sha512-KuLCmYMb2kh05QuPJ+va60bKIH5wHL8ypDkmpy47lzwmdxNsuySeCMHuTv5o2Af1RUn5KLO5ZxaZeq4GEY7DaQ==", + "dev": true, + "optional": true + }, + "esbuild-sunos-64": { + "version": "0.13.12", + "resolved": "https://registry.npmjs.org/esbuild-sunos-64/-/esbuild-sunos-64-0.13.12.tgz", + "integrity": "sha512-jBsF+e0woK3miKI8ufGWKG3o3rY9DpHvCVRn5eburMIIE+2c+y3IZ1srsthKyKI6kkXLvV4Cf/E7w56kLipMXw==", + "dev": true, + "optional": true + }, + "esbuild-windows-32": { + "version": "0.13.12", + "resolved": "https://registry.npmjs.org/esbuild-windows-32/-/esbuild-windows-32-0.13.12.tgz", + "integrity": "sha512-L9m4lLFQrFeR7F+eLZXG82SbXZfUhyfu6CexZEil6vm+lc7GDCE0Q8DiNutkpzjv1+RAbIGVva9muItQ7HVTkQ==", + "dev": true, + "optional": true + }, + "esbuild-windows-64": { + "version": "0.13.12", + "resolved": "https://registry.npmjs.org/esbuild-windows-64/-/esbuild-windows-64-0.13.12.tgz", + "integrity": "sha512-k4tX4uJlSbSkfs78W5d9+I9gpd+7N95W7H2bgOMFPsYREVJs31+Q2gLLHlsnlY95zBoPQMIzHooUIsixQIBjaQ==", + "dev": true, + "optional": true + }, + "esbuild-windows-arm64": { + "version": "0.13.12", + "resolved": "https://registry.npmjs.org/esbuild-windows-arm64/-/esbuild-windows-arm64-0.13.12.tgz", + "integrity": "sha512-2tTv/BpYRIvuwHpp2M960nG7uvL+d78LFW/ikPItO+2GfK51CswIKSetSpDii+cjz8e9iSPgs+BU4o8nWICBwQ==", + "dev": true, + "optional": true + }, + "escalade": { + "version": "3.1.1", + "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.1.1.tgz", + "integrity": "sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw==", + "dev": true + }, + "escape-goat": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/escape-goat/-/escape-goat-2.1.1.tgz", + "integrity": "sha512-8/uIhbG12Csjy2JEW7D9pHbreaVaS/OpN3ycnyvElTdwM5n6GY6W6e2IPemfvGZeUMqZ9A/3GqIZMgKnBhAw/Q==", + "dev": true + }, + "escape-html": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz", + "integrity": "sha1-Aljq5NPQwJdN4cFpGI7wBR0dGYg=", + "dev": true + }, + "escape-string-regexp": { + "version": "1.0.5", + "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz", + "integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=", + "dev": true + }, + "escodegen": { + "version": "1.8.1", + "resolved": "https://registry.npmjs.org/escodegen/-/escodegen-1.8.1.tgz", + "integrity": "sha1-WltTr0aTEQvrsIZ6o0MN07cKEBg=", + "requires": { + "esprima": "^2.7.1", + "estraverse": "^1.9.1", + "esutils": "^2.0.2", + "optionator": "^0.8.1", + "source-map": "~0.2.0" + } + }, + "eslint": { + "version": "7.32.0", + "resolved": "https://registry.npmjs.org/eslint/-/eslint-7.32.0.tgz", + "integrity": "sha512-VHZ8gX+EDfz+97jGcgyGCyRia/dPOd6Xh9yPv8Bl1+SoaIwD+a/vlrOmGRUyOYu7MwUhc7CxqeaDZU13S4+EpA==", + "dev": true, + "requires": { + "@babel/code-frame": "7.12.11", + "@eslint/eslintrc": "^0.4.3", + "@humanwhocodes/config-array": "^0.5.0", + "ajv": "^6.10.0", + "chalk": "^4.0.0", + "cross-spawn": "^7.0.2", + "debug": "^4.0.1", + "doctrine": "^3.0.0", + "enquirer": "^2.3.5", + "escape-string-regexp": "^4.0.0", + "eslint-scope": "^5.1.1", + "eslint-utils": "^2.1.0", + "eslint-visitor-keys": "^2.0.0", + "espree": "^7.3.1", + "esquery": "^1.4.0", + "esutils": "^2.0.2", + "fast-deep-equal": "^3.1.3", + "file-entry-cache": "^6.0.1", + "functional-red-black-tree": "^1.0.1", + "glob-parent": "^5.1.2", + "globals": "^13.6.0", + "ignore": "^4.0.6", + "import-fresh": "^3.0.0", + "imurmurhash": "^0.1.4", + "is-glob": "^4.0.0", + "js-yaml": "^3.13.1", + "json-stable-stringify-without-jsonify": "^1.0.1", + "levn": "^0.4.1", + "lodash.merge": "^4.6.2", + "minimatch": "^3.0.4", + "natural-compare": "^1.4.0", + "optionator": "^0.9.1", + "progress": "^2.0.0", + "regexpp": "^3.1.0", + "semver": "^7.2.1", + "strip-ansi": "^6.0.0", + "strip-json-comments": "^3.1.0", + "table": "^6.0.9", + "text-table": "^0.2.0", + "v8-compile-cache": "^2.0.3" + }, + "dependencies": { + "@babel/code-frame": { + "version": "7.12.11", + "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.12.11.tgz", + "integrity": "sha512-Zt1yodBx1UcyiePMSkWnU4hPqhwq7hGi2nFL1LeA3EUl+q2LQx16MISgJ0+z7dnmgvP9QtIleuETGOiOH1RcIw==", + "dev": true, + "requires": { + "@babel/highlight": "^7.10.4" + } + }, + "ajv": { + "version": "6.12.6", + "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz", + "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==", + "dev": true, + "requires": { + "fast-deep-equal": "^3.1.1", + "fast-json-stable-stringify": "^2.0.0", + "json-schema-traverse": "^0.4.1", + "uri-js": "^4.2.2" + } + }, + "ansi-styles": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz", + "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==", + "dev": true, + "requires": { + "color-convert": "^2.0.1" + } + }, + "chalk": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", + "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", + "dev": true, + "requires": { + "ansi-styles": "^4.1.0", + "supports-color": "^7.1.0" + } + }, + "color-convert": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", + "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==", + "dev": true, + "requires": { + "color-name": "~1.1.4" + } + }, + "color-name": { + "version": "1.1.4", + "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz", + "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==", + "dev": true + }, + "cross-spawn": { + "version": "7.0.3", + "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz", + "integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==", + "dev": true, + "requires": { "path-key": "^3.1.0", "shebang-command": "^2.0.0", "which": "^2.0.1" @@ -7992,9 +8822,9 @@ } }, "globals": { - "version": "13.10.0", - "resolved": "https://registry.npmjs.org/globals/-/globals-13.10.0.tgz", - "integrity": "sha512-piHC3blgLGFjvOuMmWZX60f+na1lXFDhQXBf1UYp2fXPXqvEUbOhNwi6BsQ0bQishwedgnjkwv1d9zKf+MWw3g==", + "version": "13.11.0", + "resolved": "https://registry.npmjs.org/globals/-/globals-13.11.0.tgz", + "integrity": "sha512-08/xrJ7wQjK9kkkRoI3OFUBbLx4f+6x3SGwcPvQ0QH6goFDrOU2oyAWrmh3dJezu65buo+HBMzAMQy6rovVC3g==", "dev": true, "requires": { "type-fest": "^0.20.2" @@ -8402,9 +9232,9 @@ "integrity": "sha1-r2fy3JIlgkFZUJJgkaQAXSnJu0Q=" }, "estree-walker": { - "version": "2.0.2", - "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz", - "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==", + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-1.0.1.tgz", + "integrity": "sha512-1fMXF3YP4pZZVozF8j/ZLfvnR8NSIljt56UhbZ5PeeDmmGHpgpdwQt7ITlGvYaQukCvuBRMLEiKiYC+oeIg4cg==", "dev": true }, "esutils": { @@ -8446,28 +9276,27 @@ "integrity": "sha512-mQw+2fkQbALzQ7V0MY0IqdnXNOeTtP4r0lN9z7AAawCXgqea7bDii20AYrIBrFd/Hx0M2Ocz6S111CaFkUcb0Q==", "dev": true }, - "eventsource": { - "version": "1.1.0", - "resolved": "https://registry.npmjs.org/eventsource/-/eventsource-1.1.0.tgz", - "integrity": "sha512-VSJjT5oCNrFvCS6igjzPAt5hBzQ2qPBFIbJ03zLI9SE0mxwZpMw6BfJrbFHm1a141AavMEB8JHmBhWAd66PfCg==", - "dev": true, - "requires": { - "original": "^1.0.0" - } - }, "execa": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/execa/-/execa-1.0.0.tgz", - "integrity": "sha512-adbxcyWV46qiHyvSp50TKt05tB4tK3HcmF7/nxfAdhnox83seTDbwnaqKO4sXRy7roHAIFqJP/Rw/AuEbX61LA==", + "version": "0.7.0", + "resolved": "https://registry.npmjs.org/execa/-/execa-0.7.0.tgz", + "integrity": "sha1-lEvs00zEHuMqY6n68nrVpl/Fl3c=", "dev": true, "requires": { - "cross-spawn": "^6.0.0", - "get-stream": "^4.0.0", + "cross-spawn": "^5.0.1", + "get-stream": "^3.0.0", "is-stream": "^1.1.0", "npm-run-path": "^2.0.0", "p-finally": "^1.0.0", "signal-exit": "^3.0.0", "strip-eof": "^1.0.0" + }, + "dependencies": { + "get-stream": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-3.0.0.tgz", + "integrity": "sha1-jpQ9E1jcN1VQVOy+LtsFqhdO3hQ=", + "dev": true + } } }, "execall": { @@ -8883,6 +9712,13 @@ "integrity": "sha1-LdvqfHP/42No365J3DOMBYwritY=", "dev": true }, + "file-uri-to-path": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/file-uri-to-path/-/file-uri-to-path-1.0.0.tgz", + "integrity": "sha512-0Zt+s3L7Vf1biwWZ29aARiVYLx7iMGnEUl9x33fbB/j3jR81u/O2LbqK+Bm1CDSNDKVtJ/YjwY7TUd5SkeLQLw==", + "dev": true, + "optional": true + }, "filelist": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/filelist/-/filelist-1.0.2.tgz", @@ -8951,9 +9787,9 @@ } }, "find-cache-dir": { - "version": "3.3.1", - "resolved": "https://registry.npmjs.org/find-cache-dir/-/find-cache-dir-3.3.1.tgz", - "integrity": "sha512-t2GDMt3oGC/v+BMwzmllWDuJF/xcDtE5j/fCGbqDD7OLuJkj0cfh1YSA5VKPvwMeLFLNDBkwOKZ2X85jGLVftQ==", + "version": "3.3.2", + "resolved": "https://registry.npmjs.org/find-cache-dir/-/find-cache-dir-3.3.2.tgz", + "integrity": "sha512-wXZV5emFEjrridIgED11OoUKLxiYjAcqot/NJdAkOhlJ+vGzwhOAfcG5OX1jP+S0PcjEn8bdMJv+g2jwQ3Onig==", "dev": true, "requires": { "commondir": "^1.0.1", @@ -9373,6 +10209,12 @@ "has-symbols": "^1.0.1" } }, + "get-package-type": { + "version": "0.1.0", + "resolved": "https://registry.npmjs.org/get-package-type/-/get-package-type-0.1.0.tgz", + "integrity": "sha512-pjzuKtY64GYfWizNAJ0fr9VqttZkNiK2iS430LtIHzjBEr6bX8Am2zm4sW4Ro5wjWW5cAlRL1qAMTcXbjNAO2Q==", + "dev": true + }, "get-proxy": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/get-proxy/-/get-proxy-2.1.0.tgz", @@ -9431,12 +10273,23 @@ } }, "glob-parent": { - "version": "6.0.1", - "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.1.tgz", - "integrity": "sha512-kEVjS71mQazDBHKcsq4E9u/vUzaLcw1A8EtUeydawvIWQCJM0qQ08G1H7/XTjFUulla6XQiDOG6MXSaG0HDKog==", + "version": "6.0.2", + "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz", + "integrity": "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==", "dev": true, "requires": { - "is-glob": "^4.0.1" + "is-glob": "^4.0.3" + }, + "dependencies": { + "is-glob": { + "version": "4.0.3", + "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz", + "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==", + "dev": true, + "requires": { + "is-extglob": "^2.1.1" + } + } } }, "glob-stream": { @@ -9617,7 +10470,11 @@ "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-1.2.13.tgz", "integrity": "sha512-oWb1Z6mkHIskLzEJ/XWX0srkpkTQ7vaopMQkyaEIoq0fmtFVxOthb8cCxeT+p3ynTdkk/RZwbgG4brR5BeWECw==", "dev": true, - "optional": true + "optional": true, + "requires": { + "bindings": "^1.5.0", + "nan": "^2.12.1" + } }, "glob-parent": { "version": "3.1.0", @@ -10127,14 +10984,14 @@ } }, "gulp-postcss": { - "version": "9.0.0", - "resolved": "https://registry.npmjs.org/gulp-postcss/-/gulp-postcss-9.0.0.tgz", - "integrity": "sha512-5mSQ9CK8salSagrXgrVyILfEMy6I5rUGPRiR9rVjgJV9m/rwdZYUhekMr+XxDlApfc5ZdEJ8gXNZrU/TsgT5dQ==", + "version": "9.0.1", + "resolved": "https://registry.npmjs.org/gulp-postcss/-/gulp-postcss-9.0.1.tgz", + "integrity": "sha512-9QUHam5JyXwGUxaaMvoFQVT44tohpEFpM8xBdPfdwTYGM0AItS1iTQz0MpsF8Jroh7GF5Jt2GVPaYgvy8qD2Fw==", "dev": true, "requires": { "fancy-log": "^1.3.3", "plugin-error": "^1.0.1", - "postcss-load-config": "^2.1.1", + "postcss-load-config": "^3.0.0", "vinyl-sourcemaps-apply": "^0.2.1" } }, @@ -10701,6 +11558,15 @@ "has-symbol-support-x": "^1.4.1" } }, + "has-tostringtag": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/has-tostringtag/-/has-tostringtag-1.0.0.tgz", + "integrity": "sha512-kFjcSNhnlGV1kyoGk7OXKSawH5JOb/LzUc5w9B02hOTO0dfFRjbHQKvg1d6cf3HbeUmtU9VbbV3qzZ2Teh97WQ==", + "dev": true, + "requires": { + "has-symbols": "^1.0.2" + } + }, "has-unicode": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/has-unicode/-/has-unicode-2.0.1.tgz", @@ -10788,12 +11654,6 @@ "integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==", "dev": true }, - "hex-color-regex": { - "version": "1.1.0", - "resolved": "https://registry.npmjs.org/hex-color-regex/-/hex-color-regex-1.1.0.tgz", - "integrity": "sha512-l9sfDFsuqtOqKDsQdqrMRk0U85RZc0RtOR9yPI7mRVOa4FsR/BVnZ0shmQRM96Ji99kYZP/7hn1cedc1+ApsTQ==", - "dev": true - }, "homedir-polyfill": { "version": "1.0.3", "resolved": "https://registry.npmjs.org/homedir-polyfill/-/homedir-polyfill-1.0.3.tgz", @@ -10824,22 +11684,10 @@ "wbuf": "^1.1.0" } }, - "hsl-regex": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/hsl-regex/-/hsl-regex-1.0.0.tgz", - "integrity": "sha1-1JMwx4ntgZ4nakwNJy3/owsY/m4=", - "dev": true - }, - "hsla-regex": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/hsla-regex/-/hsla-regex-1.0.0.tgz", - "integrity": "sha1-wc56MWjIxmFAM6S194d/OyJfnDg=", - "dev": true - }, "html-entities": { - "version": "1.4.0", - "resolved": "https://registry.npmjs.org/html-entities/-/html-entities-1.4.0.tgz", - "integrity": "sha512-8nxjcBcd8wovbeKx7h3wTji4e6+rhaVuPNpMqwWgnHh+N9ToqsCs6XztWRBPQ+UtzsoMAdKZtUENoVzU/EMtZA==", + "version": "2.3.2", + "resolved": "https://registry.npmjs.org/html-entities/-/html-entities-2.3.2.tgz", + "integrity": "sha512-c3Ab/url5ksaT0WyleslpBEthOzWhrjQbg75y7XUsfSzi3Dgzt0l8w5e7DylRn15MTlMMD58dTfzddNS2kcAjQ==", "dev": true }, "html-escaper": { @@ -10961,206 +11809,110 @@ "dev": true, "requires": { "dom-serializer": "0", - "domelementtype": "1" - } - }, - "entities": { - "version": "1.1.2", - "resolved": "https://registry.npmjs.org/entities/-/entities-1.1.2.tgz", - "integrity": "sha512-f2LZMYl1Fzu7YSBKg+RoROelpOaNrcGmE9AZubeDfrCEia483oW4MI4VyFd5VNHIgQ/7qm1I0wUHK1eJnn2y2w==", - "dev": true - }, - "readable-stream": { - "version": "3.6.0", - "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.0.tgz", - "integrity": "sha512-BViHy7LKeTz4oNnkcLJ+lVSL6vpiFeX6/d3oSH8zCW7UxP2onchk+vTGB143xuFjHS3deTgkKoXXymXqymiIdA==", - "dev": true, - "requires": { - "inherits": "^2.0.3", - "string_decoder": "^1.1.1", - "util-deprecate": "^1.0.1" - } - } - } - }, - "http-cache-semantics": { - "version": "4.1.0", - "resolved": "https://registry.npmjs.org/http-cache-semantics/-/http-cache-semantics-4.1.0.tgz", - "integrity": "sha512-carPklcUh7ROWRK7Cv27RPtdhYhUsela/ue5/jKzjegVvXDqM2ILE9Q2BGn9JZJh1g87cp56su/FgQSzcWS8cQ==", - "dev": true - }, - "http-deceiver": { - "version": "1.2.7", - "resolved": "https://registry.npmjs.org/http-deceiver/-/http-deceiver-1.2.7.tgz", - "integrity": "sha1-+nFolEq5pRnTN8sL7HKE3D5yPYc=", - "dev": true - }, - "http-errors": { - "version": "1.7.2", - "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-1.7.2.tgz", - "integrity": "sha512-uUQBt3H/cSIVfch6i1EuPNy/YsRSOUBXTVfZ+yR7Zjez3qjBz6i9+i4zjNaoqcoFVI4lQJ5plg63TvGfRSDCRg==", - "dev": true, - "requires": { - "depd": "~1.1.2", - "inherits": "2.0.3", - "setprototypeof": "1.1.1", - "statuses": ">= 1.5.0 < 2", - "toidentifier": "1.0.0" - }, - "dependencies": { - "inherits": { - "version": "2.0.3", - "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz", - "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=", - "dev": true - } - } - }, - "http-parser-js": { - "version": "0.5.3", - "resolved": "https://registry.npmjs.org/http-parser-js/-/http-parser-js-0.5.3.tgz", - "integrity": "sha512-t7hjvef/5HEK7RWTdUzVUhl8zkEu+LlaE0IYzdMuvbSDipxBRpOn4Uhw8ZyECEa808iVT8XCjzo6xmYt4CiLZg==", - "dev": true - }, - "http-proxy": { - "version": "1.18.1", - "resolved": "https://registry.npmjs.org/http-proxy/-/http-proxy-1.18.1.tgz", - "integrity": "sha512-7mz/721AbnJwIVbnaSv1Cz3Am0ZLT/UBwkC92VlxhXv/k/BBQfM2fXElQNC27BVGr0uwUpplYPQM9LnaBMR5NQ==", - "dev": true, - "requires": { - "eventemitter3": "^4.0.0", - "follow-redirects": "^1.0.0", - "requires-port": "^1.0.0" - } - }, - "http-proxy-agent": { - "version": "4.0.1", - "resolved": "https://registry.npmjs.org/http-proxy-agent/-/http-proxy-agent-4.0.1.tgz", - "integrity": "sha512-k0zdNgqWTGA6aeIRVpvfVob4fL52dTfaehylg0Y4UvSySvOq/Y+BOyPrgpUrA7HylqvU8vIZGsRuXmspskV0Tg==", - "dev": true, - "requires": { - "@tootallnate/once": "1", - "agent-base": "6", - "debug": "4" - } - }, - "http-proxy-middleware": { - "version": "0.19.1", - "resolved": "https://registry.npmjs.org/http-proxy-middleware/-/http-proxy-middleware-0.19.1.tgz", - "integrity": "sha512-yHYTgWMQO8VvwNS22eLLloAkvungsKdKTLO8AJlftYIKNfJr3GK3zK0ZCfzDDGUBttdGc8xFy1mCitvNKQtC3Q==", - "dev": true, - "requires": { - "http-proxy": "^1.17.0", - "is-glob": "^4.0.0", - "lodash": "^4.17.11", - "micromatch": "^3.1.10" - }, - "dependencies": { - "braces": { - "version": "2.3.2", - "resolved": "https://registry.npmjs.org/braces/-/braces-2.3.2.tgz", - "integrity": "sha512-aNdbnj9P8PjdXU4ybaWLK2IF3jc/EoDYbC7AazW6to3TRsfXxscC9UXOB5iDiEQrkyIbWp2SLQda4+QAa7nc3w==", - "dev": true, - "requires": { - "arr-flatten": "^1.1.0", - "array-unique": "^0.3.2", - "extend-shallow": "^2.0.1", - "fill-range": "^4.0.0", - "isobject": "^3.0.1", - "repeat-element": "^1.1.2", - "snapdragon": "^0.8.1", - "snapdragon-node": "^2.0.1", - "split-string": "^3.0.2", - "to-regex": "^3.0.1" - }, - "dependencies": { - "extend-shallow": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz", - "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=", - "dev": true, - "requires": { - "is-extendable": "^0.1.0" - } - } - } - }, - "fill-range": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-4.0.0.tgz", - "integrity": "sha1-1USBHUKPmOsGpj3EAtJAPDKMOPc=", - "dev": true, - "requires": { - "extend-shallow": "^2.0.1", - "is-number": "^3.0.0", - "repeat-string": "^1.6.1", - "to-regex-range": "^2.1.0" - }, - "dependencies": { - "extend-shallow": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz", - "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=", - "dev": true, - "requires": { - "is-extendable": "^0.1.0" - } - } - } - }, - "is-number": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/is-number/-/is-number-3.0.0.tgz", - "integrity": "sha1-JP1iAaR4LPUFYcgQJ2r8fRLXEZU=", - "dev": true, - "requires": { - "kind-of": "^3.0.2" - }, - "dependencies": { - "kind-of": { - "version": "3.2.2", - "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz", - "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=", - "dev": true, - "requires": { - "is-buffer": "^1.1.5" - } - } - } - }, - "micromatch": { - "version": "3.1.10", - "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-3.1.10.tgz", - "integrity": "sha512-MWikgl9n9M3w+bpsY3He8L+w9eF9338xRl8IAO5viDizwSzziFEyUzo2xrrloB64ADbTf8uA8vRqqttDTOmccg==", - "dev": true, - "requires": { - "arr-diff": "^4.0.0", - "array-unique": "^0.3.2", - "braces": "^2.3.1", - "define-property": "^2.0.2", - "extend-shallow": "^3.0.2", - "extglob": "^2.0.4", - "fragment-cache": "^0.2.1", - "kind-of": "^6.0.2", - "nanomatch": "^1.2.9", - "object.pick": "^1.3.0", - "regex-not": "^1.0.0", - "snapdragon": "^0.8.1", - "to-regex": "^3.0.2" + "domelementtype": "1" } }, - "to-regex-range": { - "version": "2.1.1", - "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-2.1.1.tgz", - "integrity": "sha1-fIDBe53+vlmeJzZ+DU3VWQFB2zg=", + "entities": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/entities/-/entities-1.1.2.tgz", + "integrity": "sha512-f2LZMYl1Fzu7YSBKg+RoROelpOaNrcGmE9AZubeDfrCEia483oW4MI4VyFd5VNHIgQ/7qm1I0wUHK1eJnn2y2w==", + "dev": true + }, + "readable-stream": { + "version": "3.6.0", + "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.0.tgz", + "integrity": "sha512-BViHy7LKeTz4oNnkcLJ+lVSL6vpiFeX6/d3oSH8zCW7UxP2onchk+vTGB143xuFjHS3deTgkKoXXymXqymiIdA==", "dev": true, "requires": { - "is-number": "^3.0.0", - "repeat-string": "^1.6.1" + "inherits": "^2.0.3", + "string_decoder": "^1.1.1", + "util-deprecate": "^1.0.1" } } } }, + "http-cache-semantics": { + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/http-cache-semantics/-/http-cache-semantics-4.1.0.tgz", + "integrity": "sha512-carPklcUh7ROWRK7Cv27RPtdhYhUsela/ue5/jKzjegVvXDqM2ILE9Q2BGn9JZJh1g87cp56su/FgQSzcWS8cQ==", + "dev": true + }, + "http-deceiver": { + "version": "1.2.7", + "resolved": "https://registry.npmjs.org/http-deceiver/-/http-deceiver-1.2.7.tgz", + "integrity": "sha1-+nFolEq5pRnTN8sL7HKE3D5yPYc=", + "dev": true + }, + "http-errors": { + "version": "1.7.2", + "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-1.7.2.tgz", + "integrity": "sha512-uUQBt3H/cSIVfch6i1EuPNy/YsRSOUBXTVfZ+yR7Zjez3qjBz6i9+i4zjNaoqcoFVI4lQJ5plg63TvGfRSDCRg==", + "dev": true, + "requires": { + "depd": "~1.1.2", + "inherits": "2.0.3", + "setprototypeof": "1.1.1", + "statuses": ">= 1.5.0 < 2", + "toidentifier": "1.0.0" + }, + "dependencies": { + "inherits": { + "version": "2.0.3", + "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz", + "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=", + "dev": true + } + } + }, + "http-parser-js": { + "version": "0.5.3", + "resolved": "https://registry.npmjs.org/http-parser-js/-/http-parser-js-0.5.3.tgz", + "integrity": "sha512-t7hjvef/5HEK7RWTdUzVUhl8zkEu+LlaE0IYzdMuvbSDipxBRpOn4Uhw8ZyECEa808iVT8XCjzo6xmYt4CiLZg==", + "dev": true + }, + "http-proxy": { + "version": "1.18.1", + "resolved": "https://registry.npmjs.org/http-proxy/-/http-proxy-1.18.1.tgz", + "integrity": "sha512-7mz/721AbnJwIVbnaSv1Cz3Am0ZLT/UBwkC92VlxhXv/k/BBQfM2fXElQNC27BVGr0uwUpplYPQM9LnaBMR5NQ==", + "dev": true, + "requires": { + "eventemitter3": "^4.0.0", + "follow-redirects": "^1.0.0", + "requires-port": "^1.0.0" + } + }, + "http-proxy-agent": { + "version": "4.0.1", + "resolved": "https://registry.npmjs.org/http-proxy-agent/-/http-proxy-agent-4.0.1.tgz", + "integrity": "sha512-k0zdNgqWTGA6aeIRVpvfVob4fL52dTfaehylg0Y4UvSySvOq/Y+BOyPrgpUrA7HylqvU8vIZGsRuXmspskV0Tg==", + "dev": true, + "requires": { + "@tootallnate/once": "1", + "agent-base": "6", + "debug": "4" + } + }, + "http-proxy-middleware": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/http-proxy-middleware/-/http-proxy-middleware-2.0.1.tgz", + "integrity": "sha512-cfaXRVoZxSed/BmkA7SwBVNI9Kj7HFltaE5rqYOub5kWzWZ+gofV2koVN1j2rMW7pEfSSlCHGJ31xmuyFyfLOg==", + "dev": true, + "requires": { + "@types/http-proxy": "^1.17.5", + "http-proxy": "^1.18.1", + "is-glob": "^4.0.1", + "is-plain-obj": "^3.0.0", + "micromatch": "^4.0.2" + }, + "dependencies": { + "is-plain-obj": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-3.0.0.tgz", + "integrity": "sha512-gwsOE28k+23GP1B6vFl1oVh/WOzmawBrKwo5Ev6wMKzPkaXaCDIQKzLnvsA42DRlbVTWorkgTKIviAKCWkfUwA==", + "dev": true + } + } + }, "http-signature": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/http-signature/-/http-signature-1.2.0.tgz", @@ -11182,6 +11934,12 @@ "debug": "4" } }, + "human-signals": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/human-signals/-/human-signals-2.1.0.tgz", + "integrity": "sha512-B4FFZ6q/T2jhhksgkbEW3HBvWIfDW85snkQgawt07S7J5QXTk6BkNV+0yAeZrM5QpMAdYlocGoljn0sJ/WQkFw==", + "dev": true + }, "humanize-ms": { "version": "1.2.1", "resolved": "https://registry.npmjs.org/humanize-ms/-/humanize-ms-1.2.1.tgz", @@ -11242,9 +12000,9 @@ "dev": true }, "ignore-walk": { - "version": "3.0.4", - "resolved": "https://registry.npmjs.org/ignore-walk/-/ignore-walk-3.0.4.tgz", - "integrity": "sha512-PY6Ii8o1jMRA1z4F2hRkH/xN59ox43DavKvD3oDpfurRlOJyAHpifIwpbdv1n4jt4ov0jSpw3kQ4GhJnpBL6WQ==", + "version": "4.0.1", + "resolved": "https://registry.npmjs.org/ignore-walk/-/ignore-walk-4.0.1.tgz", + "integrity": "sha512-rzDQLaW4jQbh2YrOFlJdCtX8qgJTehFRYiUB2r1osqTeDzV/3+Jh8fz1oAPzUThf3iku8Ds4IDqawI5d8mUiQw==", "dev": true, "requires": { "minimatch": "^3.0.4" @@ -11269,12 +12027,12 @@ "dev": true }, "import-cwd": { - "version": "2.1.0", - "resolved": "https://registry.npmjs.org/import-cwd/-/import-cwd-2.1.0.tgz", - "integrity": "sha1-qmzzbnInYShcs3HsZRn1PiQ1sKk=", + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/import-cwd/-/import-cwd-3.0.0.tgz", + "integrity": "sha512-4pnzH16plW+hgvRECbDWpQl3cqtvSofHWh44met7ESfZ8UZOWWddm8hEyDTqREJ9RbYHY8gi8DqmaelApoOGMg==", "dev": true, "requires": { - "import-from": "^2.1.0" + "import-from": "^3.0.0" } }, "import-fresh": { @@ -11288,18 +12046,18 @@ } }, "import-from": { - "version": "2.1.0", - "resolved": "https://registry.npmjs.org/import-from/-/import-from-2.1.0.tgz", - "integrity": "sha1-M1238qev/VOqpHHUuAId7ja387E=", + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/import-from/-/import-from-3.0.0.tgz", + "integrity": "sha512-CiuXOFFSzkU5x/CR0+z7T91Iht4CXgfCxVOFRhh2Zyhg5wOpWvvDLQUsWl+gcN+QscYBjez8hDCt85O7RLDttQ==", "dev": true, "requires": { - "resolve-from": "^3.0.0" + "resolve-from": "^5.0.0" }, "dependencies": { "resolve-from": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-3.0.0.tgz", - "integrity": "sha1-six699nWiBvItuZTM17rywoYh0g=", + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-5.0.0.tgz", + "integrity": "sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw==", "dev": true } } @@ -11310,61 +12068,6 @@ "integrity": "sha512-8/gvXvX2JMn0F+CDlSC4l6kOmVaLOO3XLkksI7CI3Ud95KDYJuYur2b9P/PUt/i/pDAMd/DulQsNbbbmRRsDIQ==", "dev": true }, - "import-local": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/import-local/-/import-local-2.0.0.tgz", - "integrity": "sha512-b6s04m3O+s3CGSbqDIyP4R6aAwAeYlVq9+WUWep6iHa8ETRf9yei1U48C5MmfJmV9AiLYYBKPMq/W+/WRpQmCQ==", - "dev": true, - "requires": { - "pkg-dir": "^3.0.0", - "resolve-cwd": "^2.0.0" - }, - "dependencies": { - "find-up": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/find-up/-/find-up-3.0.0.tgz", - "integrity": "sha512-1yD6RmLI1XBfxugvORwlck6f75tYL+iR0jqwsOrOxMZyGYqUuDhJ0l4AXdO1iX/FTs9cBAMEk1gWSEx1kSbylg==", - "dev": true, - "requires": { - "locate-path": "^3.0.0" - } - }, - "locate-path": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-3.0.0.tgz", - "integrity": "sha512-7AO748wWnIhNqAuaty2ZWHkQHRSNfPVIsPIfwEOWO22AmaoVrWavlOcMR5nzTLNYvp36X220/maaRsrec1G65A==", - "dev": true, - "requires": { - "p-locate": "^3.0.0", - "path-exists": "^3.0.0" - } - }, - "p-locate": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-3.0.0.tgz", - "integrity": "sha512-x+12w/To+4GFfgJhBEpiDcLozRJGegY+Ei7/z0tSLkMmxGZNybVMSfWj9aJn8Z5Fc7dBUNJOOVgPv2H7IwulSQ==", - "dev": true, - "requires": { - "p-limit": "^2.0.0" - } - }, - "path-exists": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-3.0.0.tgz", - "integrity": "sha1-zg6+ql94yxiSXqfYENe1mwEP1RU=", - "dev": true - }, - "pkg-dir": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/pkg-dir/-/pkg-dir-3.0.0.tgz", - "integrity": "sha512-/E57AYkoeQ25qkxMj5PBOVgF8Kiu/h7cYS30Z5+R7WaiCCBfLq58ZI/dSeaEKb9WVJV5n/03QwrN3IeWIFllvw==", - "dev": true, - "requires": { - "find-up": "^3.0.0" - } - } - } - }, "imurmurhash": { "version": "0.1.4", "resolved": "https://registry.npmjs.org/imurmurhash/-/imurmurhash-0.1.4.tgz", @@ -11425,9 +12128,9 @@ } }, "inquirer": { - "version": "8.1.2", - "resolved": "https://registry.npmjs.org/inquirer/-/inquirer-8.1.2.tgz", - "integrity": "sha512-DHLKJwLPNgkfwNmsuEUKSejJFbkv0FMO9SMiQbjI3n5NQuCrSIBqP66ggqyz2a6t2qEolKrMjhQ3+W/xXgUQ+Q==", + "version": "8.2.0", + "resolved": "https://registry.npmjs.org/inquirer/-/inquirer-8.2.0.tgz", + "integrity": "sha512-0crLweprevJ02tTuA6ThpoAERAGyVILC4sS74uib58Xf/zSr1/ZWtmm7D5CI+bSQEaA04f0K7idaHpQbSWgiVQ==", "dev": true, "requires": { "ansi-escapes": "^4.2.1", @@ -11438,7 +12141,7 @@ "figures": "^3.0.0", "lodash": "^4.17.21", "mute-stream": "0.0.8", - "ora": "^5.3.0", + "ora": "^5.4.1", "run-async": "^2.4.0", "rxjs": "^7.2.0", "string-width": "^4.1.0", @@ -11487,9 +12190,9 @@ "dev": true }, "rxjs": { - "version": "7.3.0", - "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-7.3.0.tgz", - "integrity": "sha512-p2yuGIg9S1epc3vrjKf6iVb3RCaAYjYskkO+jHIaV0IjOPlJop4UnodOoFb2xeNwlguqLYvGw1b1McillYb5Gw==", + "version": "7.4.0", + "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-7.4.0.tgz", + "integrity": "sha512-7SQDi7xeTMCJpqViXh8gL/lebcwlp3d831F05+9B44A4B0WfsEwUQHR64gsH1kvJ+Ep/J9K2+n1hVl1CsGN23w==", "dev": true, "requires": { "tslib": "~2.1.0" @@ -11513,13 +12216,41 @@ } }, "internal-ip": { - "version": "4.3.0", - "resolved": "https://registry.npmjs.org/internal-ip/-/internal-ip-4.3.0.tgz", - "integrity": "sha512-S1zBo1D6zcsyuC6PMmY5+55YMILQ9av8lotMx447Bq6SAgo/sDK6y6uUKmuYhW7eacnIhFfsPmCNYdDzsnnDCg==", + "version": "6.2.0", + "resolved": "https://registry.npmjs.org/internal-ip/-/internal-ip-6.2.0.tgz", + "integrity": "sha512-D8WGsR6yDt8uq7vDMu7mjcR+yRMm3dW8yufyChmszWRjcSHuxLBkR3GdS2HZAjodsaGuCvXeEJpueisXJULghg==", "dev": true, "requires": { - "default-gateway": "^4.2.0", - "ipaddr.js": "^1.9.0" + "default-gateway": "^6.0.0", + "ipaddr.js": "^1.9.1", + "is-ip": "^3.1.0", + "p-event": "^4.2.0" + }, + "dependencies": { + "ipaddr.js": { + "version": "1.9.1", + "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-1.9.1.tgz", + "integrity": "sha512-0KI/607xoxSToH7GjN1FfSbLoU0+btTicjsQSWQlh/hZykN8KpmMf7uYwPW3R+akZ6R/w18ZlXSHBYXiYUPO3g==", + "dev": true + }, + "p-event": { + "version": "4.2.0", + "resolved": "https://registry.npmjs.org/p-event/-/p-event-4.2.0.tgz", + "integrity": "sha512-KXatOjCRXXkSePPb1Nbi0p0m+gQAwdlbhi4wQKJPI1HsMQS9g+Sqp2o+QHziPr7eYJyOZet836KoHEVM1mwOrQ==", + "dev": true, + "requires": { + "p-timeout": "^3.1.0" + } + }, + "p-timeout": { + "version": "3.2.0", + "resolved": "https://registry.npmjs.org/p-timeout/-/p-timeout-3.2.0.tgz", + "integrity": "sha512-rhIwUycgwwKcP9yTOOFK/AKsAopjjCakVqLHePO3CC6Mir1Z99xT+R63jZxAT5lFZLa2inS5h+ZS2GvR99/FBg==", + "dev": true, + "requires": { + "p-finally": "^1.0.0" + } + } } }, "interpret": { @@ -11551,15 +12282,15 @@ "dev": true }, "ip-regex": { - "version": "2.1.0", - "resolved": "https://registry.npmjs.org/ip-regex/-/ip-regex-2.1.0.tgz", - "integrity": "sha1-+ni/XS5pE8kRzp+BnuUUa7bYROk=", + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/ip-regex/-/ip-regex-4.3.0.tgz", + "integrity": "sha512-B9ZWJxHHOHUhUjCPrMpLD4xEq35bUTClHM1S6CBU5ixQnkZmwipwgc96vAd7AAGM9TGHvJR+Uss+/Ak6UphK+Q==", "dev": true }, "ipaddr.js": { - "version": "1.9.1", - "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-1.9.1.tgz", - "integrity": "sha512-0KI/607xoxSToH7GjN1FfSbLoU0+btTicjsQSWQlh/hZykN8KpmMf7uYwPW3R+akZ6R/w18ZlXSHBYXiYUPO3g==", + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-2.0.1.tgz", + "integrity": "sha512-1qTgH9NG+IIJ4yfKs2e6Pp1bZg8wbDbKHT21HrLIeYBTRLgMYKnMTPAuI3Lcs61nfx5h1xlXnbJtH1kX5/d/ng==", "dev": true }, "is-absolute": { @@ -11572,12 +12303,6 @@ "is-windows": "^1.0.1" } }, - "is-absolute-url": { - "version": "3.0.3", - "resolved": "https://registry.npmjs.org/is-absolute-url/-/is-absolute-url-3.0.3.tgz", - "integrity": "sha512-opmNIX7uFnS96NtPmhWQgQx6/NYFgsUXYMllcfzwWKUMwfo8kku1TvE6hkNcH+Q1ts5cMVrsY7j0bxXQDciu9Q==", - "dev": true - }, "is-accessor-descriptor": { "version": "0.1.6", "resolved": "https://registry.npmjs.org/is-accessor-descriptor/-/is-accessor-descriptor-0.1.6.tgz", @@ -11615,12 +12340,13 @@ } }, "is-arguments": { - "version": "1.1.0", - "resolved": "https://registry.npmjs.org/is-arguments/-/is-arguments-1.1.0.tgz", - "integrity": "sha512-1Ij4lOMPl/xB5kBDn7I+b2ttPMKa8szhEIrXDuXQD/oe3HJLTLhqhgGspwgyGd6MOywBUqVvYicF72lkgDnIHg==", + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/is-arguments/-/is-arguments-1.1.1.tgz", + "integrity": "sha512-8Q7EARjzEnKpt/PCD7e1cgUS0a6X8u5tdSiMqXhojOdoV9TsMsiO+9VLC5vAmO8N7/GmXn7yjR8qnA6bVAEzfA==", "dev": true, "requires": { - "call-bind": "^1.0.0" + "call-bind": "^1.0.2", + "has-tostringtag": "^1.0.0" } }, "is-arrayish": { @@ -11674,28 +12400,6 @@ "ci-info": "^2.0.0" } }, - "is-color-stop": { - "version": "1.1.0", - "resolved": "https://registry.npmjs.org/is-color-stop/-/is-color-stop-1.1.0.tgz", - "integrity": "sha1-z/9HGu5N1cnhWFmPvhKWe1za00U=", - "dev": true, - "requires": { - "css-color-names": "^0.0.4", - "hex-color-regex": "^1.1.0", - "hsl-regex": "^1.0.0", - "hsla-regex": "^1.0.0", - "rgb-regex": "^1.0.1", - "rgba-regex": "^1.0.0" - }, - "dependencies": { - "css-color-names": { - "version": "0.0.4", - "resolved": "https://registry.npmjs.org/css-color-names/-/css-color-names-0.0.4.tgz", - "integrity": "sha1-gIrcLnnPhHOAabZGyyDsJ762KeA=", - "dev": true - } - } - }, "is-core-module": { "version": "2.5.0", "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.5.0.tgz", @@ -11756,12 +12460,6 @@ } } }, - "is-directory": { - "version": "0.3.1", - "resolved": "https://registry.npmjs.org/is-directory/-/is-directory-0.3.1.tgz", - "integrity": "sha1-YTObbyR1/Hcv2cnYP1yFddwVSuE=", - "dev": true - }, "is-docker": { "version": "2.2.1", "resolved": "https://registry.npmjs.org/is-docker/-/is-docker-2.2.1.tgz", @@ -11780,12 +12478,6 @@ "integrity": "sha1-qIwCU1eR8C7TfHahueqXc8gz+MI=", "dev": true }, - "is-finite": { - "version": "1.1.0", - "resolved": "https://registry.npmjs.org/is-finite/-/is-finite-1.1.0.tgz", - "integrity": "sha512-cdyMtqX/BOqqNBBiKlIVkytNHm49MtMlYyn1zxzvJKWmFMlGzm+ry5BBfYyeY9YmNKbRSo/o7OX9w9ale0wg3w==", - "dev": true - }, "is-fullwidth-code-point": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz", @@ -11815,14 +12507,6 @@ "requires": { "global-dirs": "^2.0.1", "is-path-inside": "^3.0.1" - }, - "dependencies": { - "is-path-inside": { - "version": "3.0.3", - "resolved": "https://registry.npmjs.org/is-path-inside/-/is-path-inside-3.0.3.tgz", - "integrity": "sha512-Fd4gABb+ycGAmKou8eMftCupSir5lRxqf4aD/vd0cD2qc4HL07OjCeuHMr8Ro4CoMaeCKDB0/ECBOVWjTwUvPQ==", - "dev": true - } } }, "is-interactive": { @@ -11831,6 +12515,15 @@ "integrity": "sha512-2HvIEKRoqS62guEC+qBjpvRubdX910WCMuJTZ+I9yvqKU2/12eSL549HMwtabb4oupdj2sMP50k+XJfB/8JE6w==", "dev": true }, + "is-ip": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/is-ip/-/is-ip-3.1.0.tgz", + "integrity": "sha512-35vd5necO7IitFPjd/YBeqwWnyDWbuLH9ZXQdMfDA8TEo7pv5X8yfrvVO3xbJbLUlERCMvf6X0hTUamQxCYJ9Q==", + "dev": true, + "requires": { + "ip-regex": "^4.0.0" + } + }, "is-lambda": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/is-lambda/-/is-lambda-1.0.1.tgz", @@ -11906,23 +12599,11 @@ "integrity": "sha512-w942bTcih8fdJPJmQHFzkS76NEP8Kzzvmw92cXsazb8intwLqPibPPdXf4ANdKV3rYMuuQYGIWtvz9JilB3NFQ==", "dev": true }, - "is-path-in-cwd": { - "version": "2.1.0", - "resolved": "https://registry.npmjs.org/is-path-in-cwd/-/is-path-in-cwd-2.1.0.tgz", - "integrity": "sha512-rNocXHgipO+rvnP6dk3zI20RpOtrAM/kzbB258Uw5BWr3TpXi861yzjo16Dn4hUox07iw5AyeMLHWsujkjzvRQ==", - "dev": true, - "requires": { - "is-path-inside": "^2.1.0" - } - }, "is-path-inside": { - "version": "2.1.0", - "resolved": "https://registry.npmjs.org/is-path-inside/-/is-path-inside-2.1.0.tgz", - "integrity": "sha512-wiyhTzfDWsvwAW53OBWF5zuvaOGlZ6PwYxAbPVDhpm+gM09xKQGjBq/8uYN12aDvMxnAnq3dxTyoSoRNmg5YFg==", - "dev": true, - "requires": { - "path-is-inside": "^1.0.2" - } + "version": "3.0.3", + "resolved": "https://registry.npmjs.org/is-path-inside/-/is-path-inside-3.0.3.tgz", + "integrity": "sha512-Fd4gABb+ycGAmKou8eMftCupSir5lRxqf4aD/vd0cD2qc4HL07OjCeuHMr8Ro4CoMaeCKDB0/ECBOVWjTwUvPQ==", + "dev": true }, "is-plain-obj": { "version": "1.1.0", @@ -11945,15 +12626,6 @@ "integrity": "sha512-+lP4/6lKUBfQjZ2pdxThZvLUAafmZb8OAxFb8XXtiQmS35INgr85hdOGoEs124ez1FCnZJt6jau/T+alh58QFQ==", "dev": true }, - "is-reference": { - "version": "1.2.1", - "resolved": "https://registry.npmjs.org/is-reference/-/is-reference-1.2.1.tgz", - "integrity": "sha512-U82MsXXiFIrjCK4otLT+o2NA2Cd2g5MLoOVXUZjIOhLurrRxpEXzI8O0KZHr3IjLvlAH1kTPYSuqer5T9ZVBKQ==", - "dev": true, - "requires": { - "@types/estree": "*" - } - }, "is-regex": { "version": "1.1.3", "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.1.3.tgz", @@ -11979,12 +12651,6 @@ "is-unc-path": "^1.0.0" } }, - "is-resolvable": { - "version": "1.1.0", - "resolved": "https://registry.npmjs.org/is-resolvable/-/is-resolvable-1.1.0.tgz", - "integrity": "sha512-qgDYXFSR5WvEfuS5dMj6oTMEbrrSaM0CrFk2Yiq/gXnBvD9pMa2jGXxyhGLfvhZpuMZe18CJpFxAt3CRs42NMg==", - "dev": true - }, "is-retry-allowed": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/is-retry-allowed/-/is-retry-allowed-1.2.0.tgz", @@ -12282,9 +12948,9 @@ "dev": true }, "jest-worker": { - "version": "27.0.6", - "resolved": "https://registry.npmjs.org/jest-worker/-/jest-worker-27.0.6.tgz", - "integrity": "sha512-qupxcj/dRuA3xHPMUd40gr2EaAurFbkwzOh7wfPaeE9id7hyjURRQoqNfHifHK3XjJU6YJJUQKILGUnwGPEOCA==", + "version": "27.3.1", + "resolved": "https://registry.npmjs.org/jest-worker/-/jest-worker-27.3.1.tgz", + "integrity": "sha512-ks3WCzsiZaOPJl/oMsDjaf0TRiSv7ctNgs0FqRr2nARsovz6AWWy4oLElwcquGSz692DzgZQrCLScPNs5YlC4g==", "dev": true, "requires": { "@types/node": "*", @@ -12391,12 +13057,6 @@ "integrity": "sha1-Epai1Y/UXxmg9s4B1lcB4sc1tus=", "dev": true }, - "json3": { - "version": "3.3.3", - "resolved": "https://registry.npmjs.org/json3/-/json3-3.3.3.tgz", - "integrity": "sha512-c7/8mbUsKigAbLkD5B010BK4D9LZm7A1pNItkEwiUZRpIN66exu/e7YQWysGun+TRKaJp8MhemM+VkfWv42aCA==", - "dev": true - }, "json5": { "version": "2.2.0", "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.0.tgz", @@ -12441,9 +13101,9 @@ } }, "jszip": { - "version": "3.6.0", - "resolved": "https://registry.npmjs.org/jszip/-/jszip-3.6.0.tgz", - "integrity": "sha512-jgnQoG9LKnWO3mnVNBnfhkh0QknICd1FGSrXcgrl67zioyJ4wgx25o9ZqwNtrROSflGBCGYnJfjrIyRIby1OoQ==", + "version": "3.7.1", + "resolved": "https://registry.npmjs.org/jszip/-/jszip-3.7.1.tgz", + "integrity": "sha512-ghL0tz1XG9ZEmRMcEN2vt7xabrDdqHHeykgARpmZ0BiIctWxM47Vt63ZO2dnp4QYt/xJVLLy5Zv1l/xRdh2byg==", "requires": { "lie": "~3.3.0", "pako": "~1.0.2", @@ -12458,9 +13118,9 @@ "dev": true }, "karma": { - "version": "6.3.4", - "resolved": "https://registry.npmjs.org/karma/-/karma-6.3.4.tgz", - "integrity": "sha512-hbhRogUYIulfkBTZT7xoPrCYhRBnBoqbbL4fszWD0ReFGUxU+LYBr3dwKdAluaDQ/ynT9/7C+Lf7pPNW4gSx4Q==", + "version": "6.3.7", + "resolved": "https://registry.npmjs.org/karma/-/karma-6.3.7.tgz", + "integrity": "sha512-EEkswZhOx3EFt1ELlVECeOXHONbHSGw6fkbeMxvCSkLD77X38Kb1d/Oup2Re9ep/tSoa1He3YIBf3Hp+9EsKtg==", "dev": true, "requires": { "body-parser": "^1.19.0", @@ -12481,46 +13141,17 @@ "qjobs": "^1.2.0", "range-parser": "^1.2.1", "rimraf": "^3.0.2", - "socket.io": "^3.1.0", + "socket.io": "^4.2.0", "source-map": "^0.6.1", "tmp": "^0.2.1", - "ua-parser-js": "^0.7.28", - "yargs": "^16.1.1" - }, - "dependencies": { - "ansi-styles": { - "version": "4.3.0", - "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz", - "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==", - "dev": true, - "requires": { - "color-convert": "^2.0.1" - } - }, - "cliui": { - "version": "7.0.4", - "resolved": "https://registry.npmjs.org/cliui/-/cliui-7.0.4.tgz", - "integrity": "sha512-OcRE68cOsVMXp1Yvonl/fzkQOyjLSu/8bhPDfQt0e0/Eb283TKP20Fs2MqoPsr9SwA595rRCA+QMzYc9nBP+JQ==", - "dev": true, - "requires": { - "string-width": "^4.2.0", - "strip-ansi": "^6.0.0", - "wrap-ansi": "^7.0.0" - } - }, - "color-convert": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", - "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==", - "dev": true, - "requires": { - "color-name": "~1.1.4" - } - }, - "color-name": { - "version": "1.1.4", - "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz", - "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==", + "ua-parser-js": "^0.7.30", + "yargs": "^16.1.1" + }, + "dependencies": { + "base64-arraybuffer": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/base64-arraybuffer/-/base64-arraybuffer-1.0.1.tgz", + "integrity": "sha512-vFIUq7FdLtjZMhATwDul5RZWv2jpXQ09Pd6jcVEOvIsqCWTRFD/ONHNfyOS8dA/Ippi5dsIgpyKWKZaAKZltbA==", "dev": true }, "connect": { @@ -12551,18 +13182,21 @@ } }, "engine.io": { - "version": "4.1.1", - "resolved": "https://registry.npmjs.org/engine.io/-/engine.io-4.1.1.tgz", - "integrity": "sha512-t2E9wLlssQjGw0nluF6aYyfX8LwYU8Jj0xct+pAhfWfv/YrBn6TSNtEYsgxHIfaMqfrLx07czcMg9bMN6di+3w==", + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/engine.io/-/engine.io-6.0.0.tgz", + "integrity": "sha512-Ui7yl3JajEIaACg8MOUwWvuuwU7jepZqX3BKs1ho7NQRuP4LhN4XIykXhp8bEy+x/DhA0LBZZXYSCkZDqrwMMg==", "dev": true, "requires": { + "@types/cookie": "^0.4.1", + "@types/cors": "^2.8.12", + "@types/node": ">=10.0.0", "accepts": "~1.3.4", "base64id": "2.0.0", "cookie": "~0.4.1", "cors": "~2.8.5", "debug": "~4.3.1", - "engine.io-parser": "~4.0.0", - "ws": "~7.4.2" + "engine.io-parser": "~5.0.0", + "ws": "~8.2.3" }, "dependencies": { "debug": { @@ -12583,18 +13217,18 @@ } }, "engine.io-parser": { - "version": "4.0.2", - "resolved": "https://registry.npmjs.org/engine.io-parser/-/engine.io-parser-4.0.2.tgz", - "integrity": "sha512-sHfEQv6nmtJrq6TKuIz5kyEKH/qSdK56H/A+7DnAuUPWosnIZAS2NHNcPLmyjtY3cGS/MqJdZbUjW97JU72iYg==", + "version": "5.0.1", + "resolved": "https://registry.npmjs.org/engine.io-parser/-/engine.io-parser-5.0.1.tgz", + "integrity": "sha512-j4p3WwJrG2k92VISM0op7wiq60vO92MlF3CRGxhKHy9ywG1/Dkc72g0dXeDQ+//hrcDn8gqQzoEkdO9FN0d9AA==", "dev": true, "requires": { - "base64-arraybuffer": "0.1.4" + "base64-arraybuffer": "~1.0.1" } }, "glob": { - "version": "7.1.7", - "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.7.tgz", - "integrity": "sha512-OvD9ENzPLbegENnYP5UUfJIirTg4+XwMWGaQfQTY0JenxNvvIKP3U3/tAQSPIu/lHxXYSZmpXlUHeqAIdKzBLQ==", + "version": "7.2.0", + "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.0.tgz", + "integrity": "sha512-lmLf6gtyrPq8tTjSmrO94wBeQbFR3HbLHbuyD69wuyQkImp2hWqMGB47OX65FBkPffO641IP9jWa1z4ivqG26Q==", "dev": true, "requires": { "fs.realpath": "^1.0.0", @@ -12606,9 +13240,9 @@ } }, "mime": { - "version": "2.5.2", - "resolved": "https://registry.npmjs.org/mime/-/mime-2.5.2.tgz", - "integrity": "sha512-tqkh47FzKeCPD2PUiPB6pkbMzsCasjxAfC62/Wap5qrUWcb+sFasXUC5I3gYM5iBM8v/Qpn4UK0x+j0iHyFPDg==", + "version": "2.6.0", + "resolved": "https://registry.npmjs.org/mime/-/mime-2.6.0.tgz", + "integrity": "sha512-USPkMeET31rOMiarsBNIHZKLGgvKc/LrjofAnBlOttf5ajRvqiRA8QsenbcooctK6d6Ts6aqZXBA+XbkKthiQg==", "dev": true }, "ms": { @@ -12618,20 +13252,17 @@ "dev": true }, "socket.io": { - "version": "3.1.2", - "resolved": "https://registry.npmjs.org/socket.io/-/socket.io-3.1.2.tgz", - "integrity": "sha512-JubKZnTQ4Z8G4IZWtaAZSiRP3I/inpy8c/Bsx2jrwGrTbKeVU5xd6qkKMHpChYeM3dWZSO0QACiGK+obhBNwYw==", + "version": "4.3.1", + "resolved": "https://registry.npmjs.org/socket.io/-/socket.io-4.3.1.tgz", + "integrity": "sha512-HC5w5Olv2XZ0XJ4gOLGzzHEuOCfj3G0SmoW3jLHYYh34EVsIr3EkW9h6kgfW+K3TFEcmYy8JcPWe//KUkBp5jA==", "dev": true, "requires": { - "@types/cookie": "^0.4.0", - "@types/cors": "^2.8.8", - "@types/node": ">=10.0.0", "accepts": "~1.3.4", "base64id": "~2.0.0", - "debug": "~4.3.1", - "engine.io": "~4.1.0", - "socket.io-adapter": "~2.1.0", - "socket.io-parser": "~4.0.3" + "debug": "~4.3.2", + "engine.io": "~6.0.0", + "socket.io-adapter": "~2.3.2", + "socket.io-parser": "~4.0.4" }, "dependencies": { "debug": { @@ -12652,9 +13283,9 @@ } }, "socket.io-adapter": { - "version": "2.1.0", - "resolved": "https://registry.npmjs.org/socket.io-adapter/-/socket.io-adapter-2.1.0.tgz", - "integrity": "sha512-+vDov/aTsLjViYTwS9fPy5pEtTkrbEKsw2M+oVSoFGw6OD1IpvlV1VPhUzNbofCQ8oyMbdYJqDtGdmHQK6TdPg==", + "version": "2.3.2", + "resolved": "https://registry.npmjs.org/socket.io-adapter/-/socket.io-adapter-2.3.2.tgz", + "integrity": "sha512-PBZpxUPYjmoogY0aoaTmo1643JelsaS1CiAwNjRVdrI0X9Seuc19Y2Wife8k88avW6haG8cznvwbubAZwH4Mtg==", "dev": true }, "socket.io-parser": { @@ -12700,21 +13331,10 @@ "rimraf": "^3.0.0" } }, - "wrap-ansi": { - "version": "7.0.0", - "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz", - "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==", - "dev": true, - "requires": { - "ansi-styles": "^4.0.0", - "string-width": "^4.1.0", - "strip-ansi": "^6.0.0" - } - }, - "ws": { - "version": "7.4.6", - "resolved": "https://registry.npmjs.org/ws/-/ws-7.4.6.tgz", - "integrity": "sha512-YmhHDO4MzaDLB+M9ym/mDA5z0naX8j7SIlT8f8z+I0VtzsRbekxEutHSme7NPS2qE8StCYQNUnfWdXta/Yu85A==", + "ua-parser-js": { + "version": "0.7.31", + "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-0.7.31.tgz", + "integrity": "sha512-qLK/Xe9E2uzmYI3qLeOmI0tEOt+TBBQyUIAh4aAgU05FVYzeZrKUdkAZfBNVGRaHVgV0TDkdEngJSw/SyQchkQ==", "dev": true }, "y18n": { @@ -12737,12 +13357,6 @@ "y18n": "^5.0.5", "yargs-parser": "^20.2.2" } - }, - "yargs-parser": { - "version": "20.2.9", - "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-20.2.9.tgz", - "integrity": "sha512-y11nGElTIV+CT3Zv9t7VKl+Q3hTQoT9a1Qzezhhl6Rp21gJ/IVTW7Z3y9EWXhuUBC2Shnf+DX0antecpAwSP8w==", - "dev": true } } }, @@ -12836,12 +13450,6 @@ "json-buffer": "3.0.0" } }, - "killable": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/killable/-/killable-1.0.1.tgz", - "integrity": "sha512-LzqtLKlUwirEUyl/nicirVmNiPvYs7l5n8wOPP7fyJVpUPkvCnW/vuiXGpylGUlnPDnB7311rARzAt3Mhswpjg==", - "dev": true - }, "kind-of": { "version": "6.0.3", "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz", @@ -12849,9 +13457,9 @@ "dev": true }, "klona": { - "version": "2.0.4", - "resolved": "https://registry.npmjs.org/klona/-/klona-2.0.4.tgz", - "integrity": "sha512-ZRbnvdg/NxqzC7L9Uyqzf4psi1OM4Cuc+sJAkQPjO6XkQIJTNbfK2Rsmbw8fx1p2mkZdp2FZYo2+LwXYY/uwIA==", + "version": "2.0.5", + "resolved": "https://registry.npmjs.org/klona/-/klona-2.0.5.tgz", + "integrity": "sha512-pJiBpiXMbt7dkzXe8Ghj/u4FfXOOa98fPW+bihOJ4SjnoijweJrNThJfd3ifXpXhREjpoF2mZVH1GfS9LV3kHQ==", "dev": true }, "known-css-properties": { @@ -12913,9 +13521,9 @@ } }, "less": { - "version": "4.1.1", - "resolved": "https://registry.npmjs.org/less/-/less-4.1.1.tgz", - "integrity": "sha512-w09o8tZFPThBscl5d0Ggp3RcrKIouBoQscnOMgFH3n5V3kN/CXGHNfCkRPtxJk6nKryDXaV9aHLK55RXuH4sAw==", + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/less/-/less-4.1.2.tgz", + "integrity": "sha512-EoQp/Et7OSOVu0aJknJOtlXZsnr8XE8KwuzTHOLeVSEx8pVWUICc8Q0VYRHgzyjX78nMEyC/oztWFbgyhtNfDA==", "dev": true, "requires": { "copy-anything": "^2.0.1", @@ -12927,7 +13535,7 @@ "needle": "^2.5.2", "parse-node-version": "^1.0.1", "source-map": "~0.6.0", - "tslib": "^1.10.0" + "tslib": "^2.3.0" }, "dependencies": { "make-dir": { @@ -12954,19 +13562,13 @@ "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", "dev": true, "optional": true - }, - "tslib": { - "version": "1.14.1", - "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz", - "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==", - "dev": true } } }, "less-loader": { - "version": "10.0.1", - "resolved": "https://registry.npmjs.org/less-loader/-/less-loader-10.0.1.tgz", - "integrity": "sha512-Crln//HpW9M5CbtdfWm3IO66Cvx1WhZQvNybXgfB2dD/6Sav9ppw+IWqs/FQKPBFO4B6X0X28Z0WNznshgwUzA==", + "version": "10.2.0", + "resolved": "https://registry.npmjs.org/less-loader/-/less-loader-10.2.0.tgz", + "integrity": "sha512-AV5KHWvCezW27GT90WATaDnfXBv99llDbtaj4bshq6DvAihMdNjaPDcUMa6EXKLRF+P2opFenJp89BXg91XLYg==", "dev": true, "requires": { "klona": "^2.0.4" @@ -12982,14 +13584,10 @@ } }, "license-webpack-plugin": { - "version": "2.3.20", - "resolved": "https://registry.npmjs.org/license-webpack-plugin/-/license-webpack-plugin-2.3.20.tgz", - "integrity": "sha512-AHVueg9clOKACSHkhmEI+PCC9x8+qsQVuKECZD3ETxETK5h/PCv5/MUzyG1gm8OMcip/s1tcNxqo9Qb7WhjGsg==", - "dev": true, - "requires": { - "@types/webpack-sources": "^0.1.5", - "webpack-sources": "^1.2.0" - } + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/license-webpack-plugin/-/license-webpack-plugin-3.0.0.tgz", + "integrity": "sha512-Owp0mXaJu/09h9hvZTazMni/Ni7bjh4R4xIfLhWP1O2wrhhKtezAA8U42TTeNDpyDMUD2ljeGC8Jh9xSFnyq4Q==", + "dev": true }, "lie": { "version": "3.3.0", @@ -13015,6 +13613,12 @@ "resolve": "^1.1.7" } }, + "lilconfig": { + "version": "2.0.3", + "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-2.0.3.tgz", + "integrity": "sha512-EHKqr/+ZvdKCifpNrJCKxBTgk5XupZA3y/aCPY9mxfgBzmgh93Mt/WqjjQ38oMxXuvDokaKiM3lAgvSH2sjtHg==", + "dev": true + }, "limiter": { "version": "1.1.5", "resolved": "https://registry.npmjs.org/limiter/-/limiter-1.1.5.tgz", @@ -13063,83 +13667,34 @@ "dev": true }, "loader-utils": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.0.tgz", - "integrity": "sha512-rP4F0h2RaWSvPEkD7BLDFQnvSf+nK+wr3ESUjNTyAGobqrijmW92zc+SO6d4p4B1wh7+B/Jg1mkQe5NYUEHtHQ==", + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-3.0.0.tgz", + "integrity": "sha512-ry4RE7qen73BFLgihlbyllGIW9SVWLUD5Cq9VWtzrqhntOMOJl8yEjA89d5mCUTT0puCnHo4EecO6bz+BOAS8w==", "dev": true, "requires": { - "big.js": "^5.2.2", - "emojis-list": "^3.0.0", - "json5": "^2.1.2" + "big.js": "^6.1.1" + }, + "dependencies": { + "big.js": { + "version": "6.1.1", + "resolved": "https://registry.npmjs.org/big.js/-/big.js-6.1.1.tgz", + "integrity": "sha512-1vObw81a8ylZO5ePrtMay0n018TcftpTA5HFKDaSuiUDBo8biRBtjIobw60OpwuvrGk+FsxKamqN4cnmj/eXdg==", + "dev": true + } } }, "localtunnel": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/localtunnel/-/localtunnel-2.0.1.tgz", - "integrity": "sha512-LiaI5wZdz0xFkIQpXbNI62ZnNn8IMsVhwxHmhA+h4vj8R9JG/07bQHWwQlyy7b95/5fVOCHJfIHv+a5XnkvaJA==", + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/localtunnel/-/localtunnel-2.0.2.tgz", + "integrity": "sha512-n418Cn5ynvJd7m/N1d9WVJISLJF/ellZnfsLnx8WBWGzxv/ntNcFkJ1o6se5quUhCplfLGBNL5tYHiq5WF3Nug==", "dev": true, "requires": { - "axios": "0.21.1", - "debug": "4.3.1", + "axios": "0.21.4", + "debug": "4.3.2", "openurl": "1.1.1", - "yargs": "16.2.0" + "yargs": "17.1.1" }, "dependencies": { - "ansi-styles": { - "version": "4.3.0", - "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz", - "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==", - "dev": true, - "requires": { - "color-convert": "^2.0.1" - } - }, - "cliui": { - "version": "7.0.4", - "resolved": "https://registry.npmjs.org/cliui/-/cliui-7.0.4.tgz", - "integrity": "sha512-OcRE68cOsVMXp1Yvonl/fzkQOyjLSu/8bhPDfQt0e0/Eb283TKP20Fs2MqoPsr9SwA595rRCA+QMzYc9nBP+JQ==", - "dev": true, - "requires": { - "string-width": "^4.2.0", - "strip-ansi": "^6.0.0", - "wrap-ansi": "^7.0.0" - } - }, - "color-convert": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", - "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==", - "dev": true, - "requires": { - "color-name": "~1.1.4" - } - }, - "color-name": { - "version": "1.1.4", - "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz", - "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==", - "dev": true - }, - "debug": { - "version": "4.3.1", - "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.1.tgz", - "integrity": "sha512-doEwdvm4PCeK4K3RQN2ZC2BYUBaxwLARCqZmMjtF8a51J2Rb0xpVloFRnCODwqjpwnAoao4pelN8l3RJdv3gRQ==", - "dev": true, - "requires": { - "ms": "2.1.2" - } - }, - "wrap-ansi": { - "version": "7.0.0", - "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz", - "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==", - "dev": true, - "requires": { - "ansi-styles": "^4.0.0", - "string-width": "^4.1.0", - "strip-ansi": "^6.0.0" - } - }, "y18n": { "version": "5.0.8", "resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.8.tgz", @@ -13147,9 +13702,9 @@ "dev": true }, "yargs": { - "version": "16.2.0", - "resolved": "https://registry.npmjs.org/yargs/-/yargs-16.2.0.tgz", - "integrity": "sha512-D1mvvtDG0L5ft/jGWkLpG1+m0eQxOfaBvTNELraWj22wSVUMWxZUvYgJYcKh6jGGIkJFhH4IZPQhR4TKpc8mBw==", + "version": "17.1.1", + "resolved": "https://registry.npmjs.org/yargs/-/yargs-17.1.1.tgz", + "integrity": "sha512-c2k48R0PwKIqKhPMWjeiF6y2xY/gPMUlro0sgxqXpbOIohWiLNXWslsootttv7E1e73QPAMQSg5FeySbVcpsPQ==", "dev": true, "requires": { "cliui": "^7.0.2", @@ -13160,12 +13715,6 @@ "y18n": "^5.0.5", "yargs-parser": "^20.2.2" } - }, - "yargs-parser": { - "version": "20.2.9", - "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-20.2.9.tgz", - "integrity": "sha512-y11nGElTIV+CT3Zv9t7VKl+Q3hTQoT9a1Qzezhhl6Rp21gJ/IVTW7Z3y9EWXhuUBC2Shnf+DX0antecpAwSP8w==", - "dev": true } } }, @@ -13450,12 +13999,6 @@ "lodash.isarray": "^3.0.0" } }, - "lodash.memoize": { - "version": "4.1.2", - "resolved": "https://registry.npmjs.org/lodash.memoize/-/lodash.memoize-4.1.2.tgz", - "integrity": "sha1-vMbEmkKihA7Zl/Mj6tpezRguC/4=", - "dev": true - }, "lodash.merge": { "version": "4.6.2", "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz", @@ -13607,56 +14150,12 @@ } } }, - "logalot": { - "version": "2.1.0", - "resolved": "https://registry.npmjs.org/logalot/-/logalot-2.1.0.tgz", - "integrity": "sha1-X46MkNME7fElMJUaVVSruMXj9VI=", - "dev": true, - "requires": { - "figures": "^1.3.5", - "squeak": "^1.0.0" - }, - "dependencies": { - "figures": { - "version": "1.7.0", - "resolved": "https://registry.npmjs.org/figures/-/figures-1.7.0.tgz", - "integrity": "sha1-y+Hjr/zxzUS4DK3+0o3Hk6lwHS4=", - "dev": true, - "requires": { - "escape-string-regexp": "^1.0.5", - "object-assign": "^4.1.0" - } - } - } - }, - "loglevel": { - "version": "1.7.1", - "resolved": "https://registry.npmjs.org/loglevel/-/loglevel-1.7.1.tgz", - "integrity": "sha512-Hesni4s5UkWkwCGJMQGAh71PaLUmKFM60dHvq0zi/vDhhrzuk+4GgNbTXJ12YYQJn6ZKBDNIjYcuQGKudvqrIw==", - "dev": true - }, - "longest": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/longest/-/longest-1.0.1.tgz", - "integrity": "sha1-MKCy2jj3N3DoKUoNIuZiXtd9AJc=", - "dev": true - }, "longest-streak": { "version": "2.0.4", "resolved": "https://registry.npmjs.org/longest-streak/-/longest-streak-2.0.4.tgz", "integrity": "sha512-vM6rUVCVUJJt33bnmHiZEvr7wPT78ztX7rojL+LW51bHtLh6HTjx84LA5W4+oa6aKEJA7jJu5LR6vQRBpA5DVg==", "dev": true }, - "loud-rejection": { - "version": "1.6.0", - "resolved": "https://registry.npmjs.org/loud-rejection/-/loud-rejection-1.6.0.tgz", - "integrity": "sha1-W0b4AUft7leIcPCG0Eghz5mOVR8=", - "dev": true, - "requires": { - "currently-unhandled": "^0.4.1", - "signal-exit": "^3.0.0" - } - }, "lower-case": { "version": "1.1.4", "resolved": "https://registry.npmjs.org/lower-case/-/lower-case-1.1.4.tgz", @@ -13669,29 +14168,6 @@ "integrity": "sha512-G2Lj61tXDnVFFOi8VZds+SoQjtQC3dgokKdDG2mTm1tx4m50NUHBOZSBwQQHyy0V12A0JTG4icfZQH+xPyh8VA==", "dev": true }, - "lpad-align": { - "version": "1.1.2", - "resolved": "https://registry.npmjs.org/lpad-align/-/lpad-align-1.1.2.tgz", - "integrity": "sha1-IfYArBwwlcPG5JfuZyce4ISB/p4=", - "dev": true, - "requires": { - "get-stdin": "^4.0.1", - "indent-string": "^2.1.0", - "longest": "^1.0.0", - "meow": "^3.3.0" - }, - "dependencies": { - "indent-string": { - "version": "2.1.0", - "resolved": "https://registry.npmjs.org/indent-string/-/indent-string-2.1.0.tgz", - "integrity": "sha1-ji1INIdCEhtKghi3oTfppSBJ3IA=", - "dev": true, - "requires": { - "repeating": "^2.0.0" - } - } - } - }, "lru-cache": { "version": "6.0.0", "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz", @@ -13758,9 +14234,9 @@ } }, "make-fetch-happen": { - "version": "9.0.4", - "resolved": "https://registry.npmjs.org/make-fetch-happen/-/make-fetch-happen-9.0.4.tgz", - "integrity": "sha512-sQWNKMYqSmbAGXqJg2jZ+PmHh5JAybvwu0xM8mZR/bsTjGiTASj3ldXJV7KFHy1k/IJIBkjxQFoWIVsv9+PQMg==", + "version": "9.1.0", + "resolved": "https://registry.npmjs.org/make-fetch-happen/-/make-fetch-happen-9.1.0.tgz", + "integrity": "sha512-+zopwDy7DNknmwPQplem5lAZX/eCOzSvSNNcSKm5eVwTkOBzoktEfXsa9L23J/GIRhxRsaxzkPEhrJEpE2F4Gg==", "dev": true, "requires": { "agentkeepalive": "^4.1.3", @@ -13777,7 +14253,7 @@ "minipass-pipeline": "^1.2.4", "negotiator": "^0.6.2", "promise-retry": "^2.0.1", - "socks-proxy-agent": "^5.0.0", + "socks-proxy-agent": "^6.0.0", "ssri": "^8.0.0" } }, @@ -13790,15 +14266,6 @@ "kind-of": "^6.0.2" } }, - "map-age-cleaner": { - "version": "0.1.3", - "resolved": "https://registry.npmjs.org/map-age-cleaner/-/map-age-cleaner-0.1.3.tgz", - "integrity": "sha512-bJzx6nMoP6PDLPBFmg7+xRKeFZvFboMrGlxmNj9ClvX53KrmvM5bXFXEWjbz4cz1AFn+jWJ9z/DJSz7hrs0w3w==", - "dev": true, - "requires": { - "p-defer": "^1.0.0" - } - }, "map-cache": { "version": "0.2.2", "resolved": "https://registry.npmjs.org/map-cache/-/map-cache-0.2.2.tgz", @@ -14013,40 +14480,16 @@ "integrity": "sha512-AW4DRS3QbBayY/jJmD8437V1Gombjf8RSOUCMFBuo5iHi58AGEgVCKQ+ezHkZZDpAQS75hcBMpLqjpJTjtUL7w==", "dev": true }, - "mdn-data": { - "version": "2.0.14", - "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.14.tgz", - "integrity": "sha512-dn6wd0uw5GsdswPFfsgMp5NSB0/aDe6fK94YJV/AJDYXL6HVLWBsxeq7js7Ad+mU2K9LAlwpk6kN2D5mwCPVow==", - "dev": true - }, "media-typer": { "version": "0.3.0", "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz", "integrity": "sha1-hxDXrwqmJvj/+hzgAWhUUmMlV0g=", "dev": true }, - "mem": { - "version": "8.1.1", - "resolved": "https://registry.npmjs.org/mem/-/mem-8.1.1.tgz", - "integrity": "sha512-qFCFUDs7U3b8mBDPyz5EToEKoAkgCzqquIgi9nkkR9bixxOVOre+09lbuH7+9Kn2NFpm56M3GUWVbU2hQgdACA==", - "dev": true, - "requires": { - "map-age-cleaner": "^0.1.3", - "mimic-fn": "^3.1.0" - }, - "dependencies": { - "mimic-fn": { - "version": "3.1.0", - "resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-3.1.0.tgz", - "integrity": "sha512-Ysbi9uYW9hFyfrThdDEQuykN4Ey6BuwPD2kpI5ES/nFTDn/98yxYNLZJcgUAKPT/mcrLLKaGzJR9YVxJrIdASQ==", - "dev": true - } - } - }, "memfs": { - "version": "3.2.2", - "resolved": "https://registry.npmjs.org/memfs/-/memfs-3.2.2.tgz", - "integrity": "sha512-RE0CwmIM3CEvpcdK3rZ19BC4E6hv9kADkMN5rPduRak58cNArWLi/9jFLsa4rhsjfVxMP3v0jO7FHXq7SvFY5Q==", + "version": "3.3.0", + "resolved": "https://registry.npmjs.org/memfs/-/memfs-3.3.0.tgz", + "integrity": "sha512-BEE62uMfKOavX3iG7GYX43QJ+hAeeWnwIAuJ/R6q96jaMtiLzhsxHJC8B1L7fK7Pt/vXDRwb3SG/yBpNGDPqzg==", "dev": true, "requires": { "fs-monkey": "1.0.3" @@ -14088,133 +14531,15 @@ "event-emitter": "^0.3.5", "is-promise": "^2.2.2", "lru-queue": "^0.1.0", - "next-tick": "^1.1.0", - "timers-ext": "^0.1.7" - }, - "dependencies": { - "next-tick": { - "version": "1.1.0", - "resolved": "https://registry.npmjs.org/next-tick/-/next-tick-1.1.0.tgz", - "integrity": "sha512-CXdUiJembsNjuToQvxayPZF9Vqht7hewsvy2sOWafLvi2awflj9mOC6bHIg50orX8IJvWKY9wYQ/zB2kogPslQ==", - "dev": true - } - } - }, - "memory-fs": { - "version": "0.4.1", - "resolved": "https://registry.npmjs.org/memory-fs/-/memory-fs-0.4.1.tgz", - "integrity": "sha1-OpoguEYlI+RHz7x+i7gO1me/xVI=", - "dev": true, - "requires": { - "errno": "^0.1.3", - "readable-stream": "^2.0.1" - } - }, - "meow": { - "version": "3.7.0", - "resolved": "https://registry.npmjs.org/meow/-/meow-3.7.0.tgz", - "integrity": "sha1-cstmi0JSKCkKu/qFaJJYcwioAfs=", - "dev": true, - "requires": { - "camelcase-keys": "^2.0.0", - "decamelize": "^1.1.2", - "loud-rejection": "^1.0.0", - "map-obj": "^1.0.1", - "minimist": "^1.1.3", - "normalize-package-data": "^2.3.4", - "object-assign": "^4.0.1", - "read-pkg-up": "^1.0.1", - "redent": "^1.0.0", - "trim-newlines": "^1.0.0" - }, - "dependencies": { - "find-up": { - "version": "1.1.2", - "resolved": "https://registry.npmjs.org/find-up/-/find-up-1.1.2.tgz", - "integrity": "sha1-ay6YIrGizgpgq2TWEOzK1TyyTQ8=", - "dev": true, - "requires": { - "path-exists": "^2.0.0", - "pinkie-promise": "^2.0.0" - } - }, - "load-json-file": { - "version": "1.1.0", - "resolved": "https://registry.npmjs.org/load-json-file/-/load-json-file-1.1.0.tgz", - "integrity": "sha1-lWkFcI1YtLq0wiYbBPWfMcmTdMA=", - "dev": true, - "requires": { - "graceful-fs": "^4.1.2", - "parse-json": "^2.2.0", - "pify": "^2.0.0", - "pinkie-promise": "^2.0.0", - "strip-bom": "^2.0.0" - } - }, - "parse-json": { - "version": "2.2.0", - "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-2.2.0.tgz", - "integrity": "sha1-9ID0BDTvgHQfhGkJn43qGPVaTck=", - "dev": true, - "requires": { - "error-ex": "^1.2.0" - } - }, - "path-exists": { - "version": "2.1.0", - "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-2.1.0.tgz", - "integrity": "sha1-D+tsZPD8UY2adU3V77YscCJ2H0s=", - "dev": true, - "requires": { - "pinkie-promise": "^2.0.0" - } - }, - "path-type": { - "version": "1.1.0", - "resolved": "https://registry.npmjs.org/path-type/-/path-type-1.1.0.tgz", - "integrity": "sha1-WcRPfuSR2nBNpBXaWkBwuk+P5EE=", - "dev": true, - "requires": { - "graceful-fs": "^4.1.2", - "pify": "^2.0.0", - "pinkie-promise": "^2.0.0" - } - }, - "pify": { - "version": "2.3.0", - "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz", - "integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw=", - "dev": true - }, - "read-pkg": { + "next-tick": "^1.1.0", + "timers-ext": "^0.1.7" + }, + "dependencies": { + "next-tick": { "version": "1.1.0", - "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-1.1.0.tgz", - "integrity": "sha1-9f+qXs0pyzHAR0vKfXVra7KePyg=", - "dev": true, - "requires": { - "load-json-file": "^1.0.0", - "normalize-package-data": "^2.3.2", - "path-type": "^1.0.0" - } - }, - "read-pkg-up": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/read-pkg-up/-/read-pkg-up-1.0.1.tgz", - "integrity": "sha1-nWPBMnbAZZGNV/ACpX9AobZD+wI=", - "dev": true, - "requires": { - "find-up": "^1.0.0", - "read-pkg": "^1.0.0" - } - }, - "strip-bom": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-2.0.0.tgz", - "integrity": "sha1-YhmoVhZSBJHzV4i9vxRHqZx+aw4=", - "dev": true, - "requires": { - "is-utf8": "^0.2.0" - } + "resolved": "https://registry.npmjs.org/next-tick/-/next-tick-1.1.0.tgz", + "integrity": "sha512-CXdUiJembsNjuToQvxayPZF9Vqht7hewsvy2sOWafLvi2awflj9mOC6bHIg50orX8IJvWKY9wYQ/zB2kogPslQ==", + "dev": true } } }, @@ -14230,23 +14555,6 @@ "integrity": "sha1-sAqqVW3YtEVoFQ7J0blT8/kMu2E=", "dev": true }, - "merge-source-map": { - "version": "1.1.0", - "resolved": "https://registry.npmjs.org/merge-source-map/-/merge-source-map-1.1.0.tgz", - "integrity": "sha512-Qkcp7P2ygktpMPh2mCQZaf3jhN6D3Z/qVZHSdWvQ+2Ef5HgRAPBO57A77+ENm0CPx2+1Ce/MYKi3ymqdfuqibw==", - "dev": true, - "requires": { - "source-map": "^0.6.1" - }, - "dependencies": { - "source-map": { - "version": "0.6.1", - "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", - "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", - "dev": true - } - } - }, "merge-stream": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz", @@ -14325,12 +14633,12 @@ "dev": true }, "mini-css-extract-plugin": { - "version": "2.1.0", - "resolved": "https://registry.npmjs.org/mini-css-extract-plugin/-/mini-css-extract-plugin-2.1.0.tgz", - "integrity": "sha512-SV1GgjMcfqy6hW07rAniUbQE4qS3inh3v4rZEUySkPRWy3vMbS3jUCjMOvNI4lUnDlQYJEmuUqKktTCNY5koFQ==", + "version": "2.4.3", + "resolved": "https://registry.npmjs.org/mini-css-extract-plugin/-/mini-css-extract-plugin-2.4.3.tgz", + "integrity": "sha512-zekavl9mZuGyk7COjsfFY/f655AX61EKE0AthXPrmDk+oZyjZ9WzO4WPjXnnO9xl8obK2kmM6rAQrBEmk+WK1g==", "dev": true, "requires": { - "schema-utils": "^3.0.0" + "schema-utils": "^3.1.0" }, "dependencies": { "ajv": { @@ -14395,9 +14703,9 @@ } }, "minipass": { - "version": "3.1.3", - "resolved": "https://registry.npmjs.org/minipass/-/minipass-3.1.3.tgz", - "integrity": "sha512-Mgd2GdMVzY+x3IJ+oHnVM+KG3lA5c8tnabyJKmHSaG2kAGpudxuOf8ToDkhumF7UzME7DecbQE9uOZhNm7PuJg==", + "version": "3.1.5", + "resolved": "https://registry.npmjs.org/minipass/-/minipass-3.1.5.tgz", + "integrity": "sha512-+8NzxD82XQoNKNrl1d/FSi+X8wAEWR+sbYAfIvub4Nz0d22plFG72CEVVaufV8PNf4qSslFTD8VMOxNVhHCjTw==", "dev": true, "requires": { "yallist": "^4.0.0" @@ -14413,9 +14721,9 @@ } }, "minipass-fetch": { - "version": "1.3.4", - "resolved": "https://registry.npmjs.org/minipass-fetch/-/minipass-fetch-1.3.4.tgz", - "integrity": "sha512-TielGogIzbUEtd1LsjZFs47RWuHHfhl6TiCx1InVxApBAmQ8bL0dL5ilkLGcRvuyW/A9nE+Lvn855Ewz8S0PnQ==", + "version": "1.4.1", + "resolved": "https://registry.npmjs.org/minipass-fetch/-/minipass-fetch-1.4.1.tgz", + "integrity": "sha512-CGH1eblLq26Y15+Azk7ey4xh0J/XfJfrCox5LDJiKqI2Q2iwOLOKrlmIaODiSQS8d18jalF6y2K2ePUm0CmShw==", "dev": true, "requires": { "encoding": "^0.1.12", @@ -14549,10 +14857,17 @@ "integrity": "sha512-nnbWWOkoWyUsTjKrhgD0dcz22mdkSnpYqbEjIm2nhwhuxlSkpywJmBo8h0ZqJdkp73mb90SssHkN4rsRaBAfAA==", "dev": true }, + "nan": { + "version": "2.15.0", + "resolved": "https://registry.npmjs.org/nan/-/nan-2.15.0.tgz", + "integrity": "sha512-8ZtvEnA2c5aYCZYd1cvgdnU6cqwixRoYg70xPLWUws5ORTa/lnw+u4amixRS/Ac5U5mQVgp9pnlSUnbNWFaWZQ==", + "dev": true, + "optional": true + }, "nanoid": { - "version": "3.1.23", - "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.1.23.tgz", - "integrity": "sha512-FiB0kzdP0FFVGDKlRLEQ1BgDzU87dy5NnzjeW9YZNt+/c3+q82EQDUwniSAUxp/F0gFNI1ZhKU1FqYsMuqZVnw==", + "version": "3.1.30", + "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.1.30.tgz", + "integrity": "sha512-zJpuPDwOv8D2zq2WRoMe1HsfZthVewpel9CAvTfc/2mBD1uUT/agc5f7GHGWXlYkFvi1mVxe4IjvP2HNrop7nQ==", "dev": true }, "nanomatch": { @@ -14587,9 +14902,9 @@ "dev": true }, "needle": { - "version": "2.8.0", - "resolved": "https://registry.npmjs.org/needle/-/needle-2.8.0.tgz", - "integrity": "sha512-ZTq6WYkN/3782H1393me3utVYdq2XyqNUFBsprEE3VMAT0+hP/cItpnITpqsY6ep2yeFE4Tqtqwc74VqUlUYtw==", + "version": "2.9.1", + "resolved": "https://registry.npmjs.org/needle/-/needle-2.9.1.tgz", + "integrity": "sha512-6R9fqJ5Zcmf+uYaFgdIHmLwNldn5HbK8L5ybn7Uz+ylX/rnOsSp1AHcvQSrCaFN+qNM1wpymHqD7mVasEOlHGQ==", "dev": true, "optional": true, "requires": { @@ -14628,12 +14943,11 @@ "dev": true }, "ng-packagr": { - "version": "12.2.0", - "resolved": "https://registry.npmjs.org/ng-packagr/-/ng-packagr-12.2.0.tgz", - "integrity": "sha512-M/qq78Gb4q13t6SFX70W2DrPxyooSkLwXzhWozjD8yWGihx4q+54a72ODGx7jIrB4fQgrGDcMUTM7t1zGYir8Q==", + "version": "13.0.0", + "resolved": "https://registry.npmjs.org/ng-packagr/-/ng-packagr-13.0.0.tgz", + "integrity": "sha512-Si0BMJLFy0A1JTDbNrbwwCmgG00h3QFhKLgenHFRwICGPJxAmCqwMmp5miWT7wknAJvqptFyObQ+SbBrUvl4cg==", "dev": true, "requires": { - "@rollup/plugin-commonjs": "^20.0.0", "@rollup/plugin-json": "^4.1.0", "@rollup/plugin-node-resolve": "^13.0.0", "ajv": "^8.0.0", @@ -14643,13 +14957,14 @@ "chokidar": "^3.5.1", "commander": "^8.0.0", "dependency-graph": "^0.11.0", - "esbuild": "^0.12.15", + "esbuild": "^0.13.0", + "esbuild-wasm": "^0.13.0", "find-cache-dir": "^3.3.1", + "find-parent-dir": "^0.3.1", "glob": "^7.1.6", "injection-js": "^2.4.0", "jsonc-parser": "^3.0.0", "less": "^4.1.0", - "node-sass-tilde-importer": "^1.0.2", "ora": "^5.1.0", "postcss": "^8.2.4", "postcss-preset-env": "^6.7.0", @@ -14658,19 +14973,25 @@ "rollup-plugin-sourcemaps": "^0.6.3", "rxjs": "^6.5.0", "sass": "^1.32.8", - "stylus": "^0.54.8" + "stylus": "^0.55.0" }, "dependencies": { "commander": { - "version": "8.1.0", - "resolved": "https://registry.npmjs.org/commander/-/commander-8.1.0.tgz", - "integrity": "sha512-mf45ldcuHSYShkplHHGKWb4TrmwQadxOn7v4WuhDJy0ZVoY5JFajaRDKD0PNe5qXzBX0rhovjTnP6Kz9LETcuA==", + "version": "8.3.0", + "resolved": "https://registry.npmjs.org/commander/-/commander-8.3.0.tgz", + "integrity": "sha512-OkTL9umf+He2DZkUq8f8J9of7yL6RJKI24dVITBmNfZBmri9zYZQrKkuXiKhyfPSu8tUhnVBB1iKXevvnlR4Ww==", + "dev": true + }, + "esbuild-wasm": { + "version": "0.13.12", + "resolved": "https://registry.npmjs.org/esbuild-wasm/-/esbuild-wasm-0.13.12.tgz", + "integrity": "sha512-eGdiSewbnJffEvyA0qQmr+w3HurBMVp4QhOfICzeeoL9naC8qC3PFaw6hZaqSgks5DXnQONtUGUFLsX3eXpq8A==", "dev": true }, "glob": { - "version": "7.1.7", - "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.7.tgz", - "integrity": "sha512-OvD9ENzPLbegENnYP5UUfJIirTg4+XwMWGaQfQTY0JenxNvvIKP3U3/tAQSPIu/lHxXYSZmpXlUHeqAIdKzBLQ==", + "version": "7.2.0", + "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.0.tgz", + "integrity": "sha512-lmLf6gtyrPq8tTjSmrO94wBeQbFR3HbLHbuyD69wuyQkImp2hWqMGB47OX65FBkPffO641IP9jWa1z4ivqG26Q==", "dev": true, "requires": { "fs.realpath": "^1.0.0", @@ -14723,27 +15044,27 @@ "dev": true }, "node-gyp": { - "version": "7.1.2", - "resolved": "https://registry.npmjs.org/node-gyp/-/node-gyp-7.1.2.tgz", - "integrity": "sha512-CbpcIo7C3eMu3dL1c3d0xw449fHIGALIJsRP4DDPHpyiW8vcriNY7ubh9TE4zEKfSxscY7PjeFnshE7h75ynjQ==", + "version": "8.3.0", + "resolved": "https://registry.npmjs.org/node-gyp/-/node-gyp-8.3.0.tgz", + "integrity": "sha512-e+vmKyTiybKgrmvs4M2REFKCnOd+NcrAAnn99Yko6NQA+zZdMlRvbIUHojfsHrSQ1CddLgZnHicnEVgDHziJzA==", "dev": true, "requires": { "env-paths": "^2.2.0", "glob": "^7.1.4", - "graceful-fs": "^4.2.3", + "graceful-fs": "^4.2.6", + "make-fetch-happen": "^9.1.0", "nopt": "^5.0.0", "npmlog": "^4.1.2", - "request": "^2.88.2", "rimraf": "^3.0.2", - "semver": "^7.3.2", - "tar": "^6.0.2", + "semver": "^7.3.5", + "tar": "^6.1.2", "which": "^2.0.2" }, "dependencies": { "glob": { - "version": "7.1.7", - "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.7.tgz", - "integrity": "sha512-OvD9ENzPLbegENnYP5UUfJIirTg4+XwMWGaQfQTY0JenxNvvIKP3U3/tAQSPIu/lHxXYSZmpXlUHeqAIdKzBLQ==", + "version": "7.2.0", + "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.0.tgz", + "integrity": "sha512-lmLf6gtyrPq8tTjSmrO94wBeQbFR3HbLHbuyD69wuyQkImp2hWqMGB47OX65FBkPffO641IP9jWa1z4ivqG26Q==", "dev": true, "requires": { "fs.realpath": "^1.0.0", @@ -14775,27 +15096,18 @@ } }, "node-gyp-build": { - "version": "4.2.3", - "resolved": "https://registry.npmjs.org/node-gyp-build/-/node-gyp-build-4.2.3.tgz", - "integrity": "sha512-MN6ZpzmfNCRM+3t57PTJHgHyw/h4OWnZ6mR8P5j/uZtqQr46RRuDE/P+g3n0YR/AiYXeWixZZzaip77gdICfRg==", + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/node-gyp-build/-/node-gyp-build-4.3.0.tgz", + "integrity": "sha512-iWjXZvmboq0ja1pUGULQBexmxq8CV4xBhX7VDOTbL7ZR4FOowwY/VOtRxBN/yKxmdGoIp4j5ysNT4u3S2pDQ3Q==", "dev": true, "optional": true }, "node-releases": { - "version": "1.1.73", - "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-1.1.73.tgz", - "integrity": "sha512-uW7fodD6pyW2FZNZnp/Z3hvWKeEW1Y8R1+1CnErE8cXFXzl5blBOoVB41CvMer6P6Q0S5FXDwcHgFd1Wj0U9zg==", + "version": "1.1.77", + "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-1.1.77.tgz", + "integrity": "sha512-rB1DUFUNAN4Gn9keO2K1efO35IDK7yKHCdCaIMvFO7yUYmmZYeDjnGKle26G4rwj+LKRQpjyUUvMkPglwGCYNQ==", "dev": true }, - "node-sass-tilde-importer": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/node-sass-tilde-importer/-/node-sass-tilde-importer-1.0.2.tgz", - "integrity": "sha512-Swcmr38Y7uB78itQeBm3mThjxBy9/Ah/ykPIaURY/L6Nec9AyRoL/jJ7ECfMR+oZeCTVQNxVMu/aHU+TLRVbdg==", - "dev": true, - "requires": { - "find-parent-dir": "^0.3.0" - } - }, "nopt": { "version": "3.0.6", "resolved": "https://registry.npmjs.org/nopt/-/nopt-3.0.6.tgz", @@ -14859,10 +15171,32 @@ "dev": true }, "normalize-url": { - "version": "6.1.0", - "resolved": "https://registry.npmjs.org/normalize-url/-/normalize-url-6.1.0.tgz", - "integrity": "sha512-DlL+XwOy3NxAQ8xuC0okPgK46iuVNAK01YN7RueYBqqFeGsBjV9XmCAzAdgt+667bCl5kPh9EqKKDwnaPG1I7A==", - "dev": true + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/normalize-url/-/normalize-url-2.0.1.tgz", + "integrity": "sha512-D6MUW4K/VzoJ4rJ01JFKxDrtY1v9wrgzCX5f2qj/lzH1m/lW6MhUZFKerVsnyjOhOsYzI9Kqqak+10l4LvLpMw==", + "dev": true, + "requires": { + "prepend-http": "^2.0.0", + "query-string": "^5.0.1", + "sort-keys": "^2.0.0" + }, + "dependencies": { + "prepend-http": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/prepend-http/-/prepend-http-2.0.0.tgz", + "integrity": "sha1-6SQ0v6XqjBn0HN/UAddBo8gZ2Jc=", + "dev": true + }, + "sort-keys": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/sort-keys/-/sort-keys-2.0.0.tgz", + "integrity": "sha1-ZYU1WEhh7JfXMNbPQYIuH1ZoQSg=", + "dev": true, + "requires": { + "is-plain-obj": "^1.0.0" + } + } + } }, "now-and-later": { "version": "2.0.1", @@ -14927,21 +15261,21 @@ } }, "npm-packlist": { - "version": "2.2.2", - "resolved": "https://registry.npmjs.org/npm-packlist/-/npm-packlist-2.2.2.tgz", - "integrity": "sha512-Jt01acDvJRhJGthnUJVF/w6gumWOZxO7IkpY/lsX9//zqQgnF7OJaxgQXcerd4uQOLu7W5bkb4mChL9mdfm+Zg==", + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/npm-packlist/-/npm-packlist-3.0.0.tgz", + "integrity": "sha512-L/cbzmutAwII5glUcf2DBRNY/d0TFd4e/FnaZigJV6JD85RHZXJFGwCndjMWiiViiWSsWt3tiOLpI3ByTnIdFQ==", "dev": true, "requires": { "glob": "^7.1.6", - "ignore-walk": "^3.0.3", + "ignore-walk": "^4.0.1", "npm-bundled": "^1.1.1", "npm-normalize-package-bin": "^1.0.1" }, "dependencies": { "glob": { - "version": "7.1.7", - "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.7.tgz", - "integrity": "sha512-OvD9ENzPLbegENnYP5UUfJIirTg4+XwMWGaQfQTY0JenxNvvIKP3U3/tAQSPIu/lHxXYSZmpXlUHeqAIdKzBLQ==", + "version": "7.2.0", + "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.0.tgz", + "integrity": "sha512-lmLf6gtyrPq8tTjSmrO94wBeQbFR3HbLHbuyD69wuyQkImp2hWqMGB47OX65FBkPffO641IP9jWa1z4ivqG26Q==", "dev": true, "requires": { "fs.realpath": "^1.0.0", @@ -15002,9 +15336,9 @@ } }, "nth-check": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/nth-check/-/nth-check-2.0.0.tgz", - "integrity": "sha512-i4sc/Kj8htBrAiH1viZ0TgU8Y5XqCaV/FziYK6TBczxmeKm3AEFWqqF3195yKudrarqy7Zu80Ra5dobFjn9X/Q==", + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/nth-check/-/nth-check-2.0.1.tgz", + "integrity": "sha512-it1vE95zF6dTT9lBsYbxvqh0Soy4SPowchj0UBGj/V6cTPnXXtQOPUbhZ6CmGzAD/rW22LQK6E96pcdJXk4A4w==", "dev": true, "requires": { "boolbase": "^1.0.0" @@ -15244,9 +15578,9 @@ } }, "open": { - "version": "8.2.1", - "resolved": "https://registry.npmjs.org/open/-/open-8.2.1.tgz", - "integrity": "sha512-rXILpcQlkF/QuFez2BJDf3GsqpjGKbkUUToAIGo9A0Q6ZkoSGogZJulrUdwRkrAsoQvoZsrjCYt8+zblOk7JQQ==", + "version": "8.4.0", + "resolved": "https://registry.npmjs.org/open/-/open-8.4.0.tgz", + "integrity": "sha512-XgFPPM+B28FtCCgSb9I+s9szOC1vZRSwgWsRUA5ylIxRTgKozqjOCrVOqGsYABPYK5qnfqClxZTFBa8PKt2v6Q==", "dev": true, "requires": { "define-lazy-prop": "^2.0.0", @@ -15261,9 +15595,9 @@ "dev": true }, "opn": { - "version": "5.5.0", - "resolved": "https://registry.npmjs.org/opn/-/opn-5.5.0.tgz", - "integrity": "sha512-PqHpggC9bLV0VeWcdKhkpxY+3JTzetLSqTCWL/z/tFIbI6G8JCjondXklT1JinczLz2Xib62sSp0T/gKT4KksA==", + "version": "5.3.0", + "resolved": "https://registry.npmjs.org/opn/-/opn-5.3.0.tgz", + "integrity": "sha512-bYJHo/LOmoTd+pfiYhfZDnf9zekVJrY+cnS2a5F2x+w5ppvTqObojTP7WiFG+kVZs9Inw+qQ/lw7TroWwhdd2g==", "dev": true, "requires": { "is-wsl": "^1.1.0" @@ -15317,9 +15651,9 @@ } }, "chalk": { - "version": "4.1.1", - "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.1.tgz", - "integrity": "sha512-diHzdDKxcU+bAsUboHLPEDQiw0qEe0qd7SYUn3HgcFlWgbDcfLGswOHYeGrHKzG9z6UYf01d9VFMfZxPM1xZSg==", + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", + "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", "dev": true, "requires": { "ansi-styles": "^4.1.0", @@ -15367,15 +15701,6 @@ "readable-stream": "^2.0.1" } }, - "original": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/original/-/original-1.0.2.tgz", - "integrity": "sha512-hyBVl6iqqUOJ8FqRe+l/gS8H+kKYjrEndd5Pm1MfBtsEKA038HkkdbAl/72EAXGyonD/PFsvmVG+EvcIpliMBg==", - "dev": true, - "requires": { - "url-parse": "^1.4.3" - } - }, "os-filter-obj": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/os-filter-obj/-/os-filter-obj-2.0.0.tgz", @@ -15406,12 +15731,6 @@ "integrity": "sha512-RVbZPLso8+jFeq1MfNvgXtCRED2raz/dKpacfTNxsx6pLEpEomM7gah6VeHSYV3+vo0OAi4MkArtQcWWXuQoyw==", "dev": true }, - "p-defer": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/p-defer/-/p-defer-1.0.0.tgz", - "integrity": "sha1-n26xgvbJqozXQwBKfU+WsZaw+ww=", - "dev": true - }, "p-event": { "version": "1.3.0", "resolved": "https://registry.npmjs.org/p-event/-/p-event-1.3.0.tgz", @@ -15476,12 +15795,13 @@ "dev": true }, "p-retry": { - "version": "3.0.1", - "resolved": "https://registry.npmjs.org/p-retry/-/p-retry-3.0.1.tgz", - "integrity": "sha512-XE6G4+YTTkT2a0UWb2kjZe8xNwf8bIbnqpc/IS/idOBVhyves0mK5OJgeocjx7q5pvX/6m23xuzVPYT1uGM73w==", + "version": "4.6.1", + "resolved": "https://registry.npmjs.org/p-retry/-/p-retry-4.6.1.tgz", + "integrity": "sha512-e2xXGNhZOZ0lfgR9kL34iGlU8N/KO0xZnQxVEwdeOvpqNDQfdnxIYizvWtK8RglUa3bGqI8g0R/BdfzLMxRkiA==", "dev": true, "requires": { - "retry": "^0.12.0" + "@types/retry": "^0.12.0", + "retry": "^0.13.1" } }, "p-timeout": { @@ -15604,15 +15924,15 @@ } }, "pacote": { - "version": "11.3.5", - "resolved": "https://registry.npmjs.org/pacote/-/pacote-11.3.5.tgz", - "integrity": "sha512-fT375Yczn4zi+6Hkk2TBe1x1sP8FgFsEIZ2/iWaXY2r/NkhDJfxbcn5paz1+RTFCyNf+dPnaoBDJoAxXSU8Bkg==", + "version": "12.0.2", + "resolved": "https://registry.npmjs.org/pacote/-/pacote-12.0.2.tgz", + "integrity": "sha512-Ar3mhjcxhMzk+OVZ8pbnXdb0l8+pimvlsqBGRNkble2NVgyqOGE3yrCGi/lAYq7E7NRDMz89R1Wx5HIMCGgeYg==", "dev": true, "requires": { "@npmcli/git": "^2.1.0", "@npmcli/installed-package-contents": "^1.0.6", "@npmcli/promise-spawn": "^1.2.0", - "@npmcli/run-script": "^1.8.2", + "@npmcli/run-script": "^2.0.0", "cacache": "^15.0.5", "chownr": "^2.0.0", "fs-minipass": "^2.1.0", @@ -15620,7 +15940,7 @@ "minipass": "^3.1.3", "mkdirp": "^1.0.3", "npm-package-arg": "^8.0.1", - "npm-packlist": "^2.1.4", + "npm-packlist": "^3.0.0", "npm-pick-manifest": "^6.0.0", "npm-registry-fetch": "^11.0.0", "promise-retry": "^2.0.1", @@ -15848,6 +16168,12 @@ "integrity": "sha1-Ywn04OX6kT7BxpMHrjZLSzd8nns=", "dev": true }, + "picocolors": { + "version": "0.2.1", + "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-0.2.1.tgz", + "integrity": "sha512-cMlDqaLEqfSaW8Z7N5Jw+lyIW869EzT73/F5lhtY9cLGoVxSXznfgfXMO0Z5K0o0Q2TkTXq+0KFsdnSe3jDViA==", + "dev": true + }, "picomatch": { "version": "2.3.0", "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.0.tgz", @@ -15943,14 +16269,13 @@ } }, "pngcrush-bin": { - "version": "5.0.1", - "resolved": "https://registry.npmjs.org/pngcrush-bin/-/pngcrush-bin-5.0.1.tgz", - "integrity": "sha512-fe11NCaVzSrMyteBKuBUFs4g382FHuSOzK6TI/HJdPhEFA4j5QJM0lEhtiZkNempOES7rS+LlN1dXIzU03MXnQ==", + "version": "5.0.2", + "resolved": "https://registry.npmjs.org/pngcrush-bin/-/pngcrush-bin-5.0.2.tgz", + "integrity": "sha512-Tuafr/1cm7umMCkuwoXz2l311eUakE/kzv3u+zj9a6EeNGCZfK4ph3VeDdCv/WQ00u8UgO3bGbO3aJYhEAFXyg==", "dev": true, "requires": { "bin-build": "^3.0.0", - "bin-wrapper": "^4.0.0", - "logalot": "^2.0.0" + "bin-wrapper": "^4.0.0" } }, "portfinder": { @@ -16001,13 +16326,13 @@ "dev": true }, "postcss": { - "version": "8.3.5", - "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.3.5.tgz", - "integrity": "sha512-NxTuJocUhYGsMiMFHDUkmjSKT3EdH4/WbGF6GCi1NDGk+vbcUTun4fpbOqaPtD8IIsztA2ilZm2DhYCuyN58gA==", + "version": "8.3.9", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.3.9.tgz", + "integrity": "sha512-f/ZFyAKh9Dnqytx5X62jgjhhzttjZS7hMsohcI7HEI5tjELX/HxCy3EFhsRxyzGvrzFF+82XPvCS8T9TFleVJw==", "dev": true, "requires": { - "colorette": "^1.2.2", - "nanoid": "^3.1.23", + "nanoid": "^3.1.28", + "picocolors": "^0.2.1", "source-map-js": "^0.6.2" } }, @@ -16021,21 +16346,14 @@ "postcss-selector-parser": "^6.0.2" }, "dependencies": { - "has-flag": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz", - "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=", - "dev": true - }, "postcss": { - "version": "7.0.36", - "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.36.tgz", - "integrity": "sha512-BebJSIUMwJHRH0HAQoxN4u1CN86glsrwsW0q7T+/m44eXOUAxSNdHRkNZPYz5vVUbg17hFgOQDE7fZk7li3pZw==", + "version": "7.0.39", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.39.tgz", + "integrity": "sha512-yioayjNbHn6z1/Bywyb2Y4s3yvDAeXGOyxqD+LnVOinq6Mdmd++SW2wUNVzavyyHxd6+DxzWGIuosg6P1Rj8uA==", "dev": true, "requires": { - "chalk": "^2.4.2", - "source-map": "^0.6.1", - "supports-color": "^6.1.0" + "picocolors": "^0.2.1", + "source-map": "^0.6.1" } }, "source-map": { @@ -16043,28 +16361,9 @@ "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", "dev": true - }, - "supports-color": { - "version": "6.1.0", - "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz", - "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==", - "dev": true, - "requires": { - "has-flag": "^3.0.0" - } } } }, - "postcss-calc": { - "version": "8.0.0", - "resolved": "https://registry.npmjs.org/postcss-calc/-/postcss-calc-8.0.0.tgz", - "integrity": "sha512-5NglwDrcbiy8XXfPM11F3HeC6hoT9W7GUH/Zi5U/p7u3Irv4rHhdDcIZwG0llHXV4ftsBjpfWMXAnXNl4lnt8g==", - "dev": true, - "requires": { - "postcss-selector-parser": "^6.0.2", - "postcss-value-parser": "^4.0.2" - } - }, "postcss-color-functional-notation": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/postcss-color-functional-notation/-/postcss-color-functional-notation-2.0.1.tgz", @@ -16075,21 +16374,14 @@ "postcss-values-parser": "^2.0.0" }, "dependencies": { - "has-flag": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz", - "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=", - "dev": true - }, "postcss": { - "version": "7.0.36", - "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.36.tgz", - "integrity": "sha512-BebJSIUMwJHRH0HAQoxN4u1CN86glsrwsW0q7T+/m44eXOUAxSNdHRkNZPYz5vVUbg17hFgOQDE7fZk7li3pZw==", + "version": "7.0.39", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.39.tgz", + "integrity": "sha512-yioayjNbHn6z1/Bywyb2Y4s3yvDAeXGOyxqD+LnVOinq6Mdmd++SW2wUNVzavyyHxd6+DxzWGIuosg6P1Rj8uA==", "dev": true, "requires": { - "chalk": "^2.4.2", - "source-map": "^0.6.1", - "supports-color": "^6.1.0" + "picocolors": "^0.2.1", + "source-map": "^0.6.1" } }, "source-map": { @@ -16097,15 +16389,6 @@ "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", "dev": true - }, - "supports-color": { - "version": "6.1.0", - "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz", - "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==", - "dev": true, - "requires": { - "has-flag": "^3.0.0" - } } } }, @@ -16120,21 +16403,14 @@ "postcss-values-parser": "^2.0.0" }, "dependencies": { - "has-flag": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz", - "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=", - "dev": true - }, "postcss": { - "version": "7.0.36", - "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.36.tgz", - "integrity": "sha512-BebJSIUMwJHRH0HAQoxN4u1CN86glsrwsW0q7T+/m44eXOUAxSNdHRkNZPYz5vVUbg17hFgOQDE7fZk7li3pZw==", + "version": "7.0.39", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.39.tgz", + "integrity": "sha512-yioayjNbHn6z1/Bywyb2Y4s3yvDAeXGOyxqD+LnVOinq6Mdmd++SW2wUNVzavyyHxd6+DxzWGIuosg6P1Rj8uA==", "dev": true, "requires": { - "chalk": "^2.4.2", - "source-map": "^0.6.1", - "supports-color": "^6.1.0" + "picocolors": "^0.2.1", + "source-map": "^0.6.1" } }, "source-map": { @@ -16142,15 +16418,6 @@ "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", "dev": true - }, - "supports-color": { - "version": "6.1.0", - "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz", - "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==", - "dev": true, - "requires": { - "has-flag": "^3.0.0" - } } } }, @@ -16164,21 +16431,14 @@ "postcss-values-parser": "^2.0.1" }, "dependencies": { - "has-flag": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz", - "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=", - "dev": true - }, "postcss": { - "version": "7.0.36", - "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.36.tgz", - "integrity": "sha512-BebJSIUMwJHRH0HAQoxN4u1CN86glsrwsW0q7T+/m44eXOUAxSNdHRkNZPYz5vVUbg17hFgOQDE7fZk7li3pZw==", + "version": "7.0.39", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.39.tgz", + "integrity": "sha512-yioayjNbHn6z1/Bywyb2Y4s3yvDAeXGOyxqD+LnVOinq6Mdmd++SW2wUNVzavyyHxd6+DxzWGIuosg6P1Rj8uA==", "dev": true, "requires": { - "chalk": "^2.4.2", - "source-map": "^0.6.1", - "supports-color": "^6.1.0" + "picocolors": "^0.2.1", + "source-map": "^0.6.1" } }, "source-map": { @@ -16186,15 +16446,6 @@ "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", "dev": true - }, - "supports-color": { - "version": "6.1.0", - "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz", - "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==", - "dev": true, - "requires": { - "has-flag": "^3.0.0" - } } } }, @@ -16209,21 +16460,14 @@ "postcss-values-parser": "^2.0.0" }, "dependencies": { - "has-flag": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz", - "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=", - "dev": true - }, "postcss": { - "version": "7.0.36", - "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.36.tgz", - "integrity": "sha512-BebJSIUMwJHRH0HAQoxN4u1CN86glsrwsW0q7T+/m44eXOUAxSNdHRkNZPYz5vVUbg17hFgOQDE7fZk7li3pZw==", + "version": "7.0.39", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.39.tgz", + "integrity": "sha512-yioayjNbHn6z1/Bywyb2Y4s3yvDAeXGOyxqD+LnVOinq6Mdmd++SW2wUNVzavyyHxd6+DxzWGIuosg6P1Rj8uA==", "dev": true, "requires": { - "chalk": "^2.4.2", - "source-map": "^0.6.1", - "supports-color": "^6.1.0" + "picocolors": "^0.2.1", + "source-map": "^0.6.1" } }, "source-map": { @@ -16231,15 +16475,6 @@ "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", "dev": true - }, - "supports-color": { - "version": "6.1.0", - "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz", - "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==", - "dev": true, - "requires": { - "has-flag": "^3.0.0" - } } } }, @@ -16248,26 +16483,19 @@ "resolved": "https://registry.npmjs.org/postcss-color-rebeccapurple/-/postcss-color-rebeccapurple-4.0.1.tgz", "integrity": "sha512-aAe3OhkS6qJXBbqzvZth2Au4V3KieR5sRQ4ptb2b2O8wgvB3SJBsdG+jsn2BZbbwekDG8nTfcCNKcSfe/lEy8g==", "dev": true, - "requires": { - "postcss": "^7.0.2", - "postcss-values-parser": "^2.0.0" - }, - "dependencies": { - "has-flag": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz", - "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=", - "dev": true - }, + "requires": { + "postcss": "^7.0.2", + "postcss-values-parser": "^2.0.0" + }, + "dependencies": { "postcss": { - "version": "7.0.36", - "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.36.tgz", - "integrity": "sha512-BebJSIUMwJHRH0HAQoxN4u1CN86glsrwsW0q7T+/m44eXOUAxSNdHRkNZPYz5vVUbg17hFgOQDE7fZk7li3pZw==", + "version": "7.0.39", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.39.tgz", + "integrity": "sha512-yioayjNbHn6z1/Bywyb2Y4s3yvDAeXGOyxqD+LnVOinq6Mdmd++SW2wUNVzavyyHxd6+DxzWGIuosg6P1Rj8uA==", "dev": true, "requires": { - "chalk": "^2.4.2", - "source-map": "^0.6.1", - "supports-color": "^6.1.0" + "picocolors": "^0.2.1", + "source-map": "^0.6.1" } }, "source-map": { @@ -16275,39 +16503,9 @@ "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", "dev": true - }, - "supports-color": { - "version": "6.1.0", - "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz", - "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==", - "dev": true, - "requires": { - "has-flag": "^3.0.0" - } } } }, - "postcss-colormin": { - "version": "5.2.0", - "resolved": "https://registry.npmjs.org/postcss-colormin/-/postcss-colormin-5.2.0.tgz", - "integrity": "sha512-+HC6GfWU3upe5/mqmxuqYZ9B2Wl4lcoUUNkoaX59nEWV4EtADCMiBqui111Bu8R8IvaZTmqmxrqOAqjbHIwXPw==", - "dev": true, - "requires": { - "browserslist": "^4.16.6", - "caniuse-api": "^3.0.0", - "colord": "^2.0.1", - "postcss-value-parser": "^4.1.0" - } - }, - "postcss-convert-values": { - "version": "5.0.1", - "resolved": "https://registry.npmjs.org/postcss-convert-values/-/postcss-convert-values-5.0.1.tgz", - "integrity": "sha512-C3zR1Do2BkKkCgC0g3sF8TS0koF2G+mN8xxayZx3f10cIRmTaAnpgpRQZjNekTZxM2ciSPoh2IWJm0VZx8NoQg==", - "dev": true, - "requires": { - "postcss-value-parser": "^4.1.0" - } - }, "postcss-custom-media": { "version": "7.0.8", "resolved": "https://registry.npmjs.org/postcss-custom-media/-/postcss-custom-media-7.0.8.tgz", @@ -16317,21 +16515,14 @@ "postcss": "^7.0.14" }, "dependencies": { - "has-flag": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz", - "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=", - "dev": true - }, "postcss": { - "version": "7.0.36", - "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.36.tgz", - "integrity": "sha512-BebJSIUMwJHRH0HAQoxN4u1CN86glsrwsW0q7T+/m44eXOUAxSNdHRkNZPYz5vVUbg17hFgOQDE7fZk7li3pZw==", + "version": "7.0.39", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.39.tgz", + "integrity": "sha512-yioayjNbHn6z1/Bywyb2Y4s3yvDAeXGOyxqD+LnVOinq6Mdmd++SW2wUNVzavyyHxd6+DxzWGIuosg6P1Rj8uA==", "dev": true, "requires": { - "chalk": "^2.4.2", - "source-map": "^0.6.1", - "supports-color": "^6.1.0" + "picocolors": "^0.2.1", + "source-map": "^0.6.1" } }, "source-map": { @@ -16339,15 +16530,6 @@ "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", "dev": true - }, - "supports-color": { - "version": "6.1.0", - "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz", - "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==", - "dev": true, - "requires": { - "has-flag": "^3.0.0" - } } } }, @@ -16361,21 +16543,14 @@ "postcss-values-parser": "^2.0.1" }, "dependencies": { - "has-flag": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz", - "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=", - "dev": true - }, "postcss": { - "version": "7.0.36", - "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.36.tgz", - "integrity": "sha512-BebJSIUMwJHRH0HAQoxN4u1CN86glsrwsW0q7T+/m44eXOUAxSNdHRkNZPYz5vVUbg17hFgOQDE7fZk7li3pZw==", + "version": "7.0.39", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.39.tgz", + "integrity": "sha512-yioayjNbHn6z1/Bywyb2Y4s3yvDAeXGOyxqD+LnVOinq6Mdmd++SW2wUNVzavyyHxd6+DxzWGIuosg6P1Rj8uA==", "dev": true, "requires": { - "chalk": "^2.4.2", - "source-map": "^0.6.1", - "supports-color": "^6.1.0" + "picocolors": "^0.2.1", + "source-map": "^0.6.1" } }, "source-map": { @@ -16383,15 +16558,6 @@ "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", "dev": true - }, - "supports-color": { - "version": "6.1.0", - "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz", - "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==", - "dev": true, - "requires": { - "has-flag": "^3.0.0" - } } } }, @@ -16411,21 +16577,14 @@ "integrity": "sha512-MsCAG1z9lPdoO/IUMLSBWBSVxVtJ1395VGIQ+Fc2gNdkQ1hNDnQdw3YhA71WJCBW1vdwA0cAnk/DnW6bqoEUYg==", "dev": true }, - "has-flag": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz", - "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=", - "dev": true - }, "postcss": { - "version": "7.0.36", - "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.36.tgz", - "integrity": "sha512-BebJSIUMwJHRH0HAQoxN4u1CN86glsrwsW0q7T+/m44eXOUAxSNdHRkNZPYz5vVUbg17hFgOQDE7fZk7li3pZw==", + "version": "7.0.39", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.39.tgz", + "integrity": "sha512-yioayjNbHn6z1/Bywyb2Y4s3yvDAeXGOyxqD+LnVOinq6Mdmd++SW2wUNVzavyyHxd6+DxzWGIuosg6P1Rj8uA==", "dev": true, "requires": { - "chalk": "^2.4.2", - "source-map": "^0.6.1", - "supports-color": "^6.1.0" + "picocolors": "^0.2.1", + "source-map": "^0.6.1" } }, "postcss-selector-parser": { @@ -16444,15 +16603,6 @@ "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", "dev": true - }, - "supports-color": { - "version": "6.1.0", - "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz", - "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==", - "dev": true, - "requires": { - "has-flag": "^3.0.0" - } } } }, @@ -16472,21 +16622,14 @@ "integrity": "sha512-MsCAG1z9lPdoO/IUMLSBWBSVxVtJ1395VGIQ+Fc2gNdkQ1hNDnQdw3YhA71WJCBW1vdwA0cAnk/DnW6bqoEUYg==", "dev": true }, - "has-flag": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz", - "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=", - "dev": true - }, "postcss": { - "version": "7.0.36", - "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.36.tgz", - "integrity": "sha512-BebJSIUMwJHRH0HAQoxN4u1CN86glsrwsW0q7T+/m44eXOUAxSNdHRkNZPYz5vVUbg17hFgOQDE7fZk7li3pZw==", + "version": "7.0.39", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.39.tgz", + "integrity": "sha512-yioayjNbHn6z1/Bywyb2Y4s3yvDAeXGOyxqD+LnVOinq6Mdmd++SW2wUNVzavyyHxd6+DxzWGIuosg6P1Rj8uA==", "dev": true, "requires": { - "chalk": "^2.4.2", - "source-map": "^0.6.1", - "supports-color": "^6.1.0" + "picocolors": "^0.2.1", + "source-map": "^0.6.1" } }, "postcss-selector-parser": { @@ -16505,42 +16648,9 @@ "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", "dev": true - }, - "supports-color": { - "version": "6.1.0", - "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz", - "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==", - "dev": true, - "requires": { - "has-flag": "^3.0.0" - } } } }, - "postcss-discard-comments": { - "version": "5.0.1", - "resolved": "https://registry.npmjs.org/postcss-discard-comments/-/postcss-discard-comments-5.0.1.tgz", - "integrity": "sha512-lgZBPTDvWrbAYY1v5GYEv8fEO/WhKOu/hmZqmCYfrpD6eyDWWzAOsl2rF29lpvziKO02Gc5GJQtlpkTmakwOWg==", - "dev": true - }, - "postcss-discard-duplicates": { - "version": "5.0.1", - "resolved": "https://registry.npmjs.org/postcss-discard-duplicates/-/postcss-discard-duplicates-5.0.1.tgz", - "integrity": "sha512-svx747PWHKOGpAXXQkCc4k/DsWo+6bc5LsVrAsw+OU+Ibi7klFZCyX54gjYzX4TH+f2uzXjRviLARxkMurA2bA==", - "dev": true - }, - "postcss-discard-empty": { - "version": "5.0.1", - "resolved": "https://registry.npmjs.org/postcss-discard-empty/-/postcss-discard-empty-5.0.1.tgz", - "integrity": "sha512-vfU8CxAQ6YpMxV2SvMcMIyF2LX1ZzWpy0lqHDsOdaKKLQVQGVP1pzhrI9JlsO65s66uQTfkQBKBD/A5gp9STFw==", - "dev": true - }, - "postcss-discard-overridden": { - "version": "5.0.1", - "resolved": "https://registry.npmjs.org/postcss-discard-overridden/-/postcss-discard-overridden-5.0.1.tgz", - "integrity": "sha512-Y28H7y93L2BpJhrdUR2SR2fnSsT+3TVx1NmVQLbcnZWwIUpJ7mfcTC6Za9M2PG6w8j7UQRfzxqn8jU2VwFxo3Q==", - "dev": true - }, "postcss-double-position-gradients": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/postcss-double-position-gradients/-/postcss-double-position-gradients-1.0.0.tgz", @@ -16551,21 +16661,14 @@ "postcss-values-parser": "^2.0.0" }, "dependencies": { - "has-flag": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz", - "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=", - "dev": true - }, "postcss": { - "version": "7.0.36", - "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.36.tgz", - "integrity": "sha512-BebJSIUMwJHRH0HAQoxN4u1CN86glsrwsW0q7T+/m44eXOUAxSNdHRkNZPYz5vVUbg17hFgOQDE7fZk7li3pZw==", + "version": "7.0.39", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.39.tgz", + "integrity": "sha512-yioayjNbHn6z1/Bywyb2Y4s3yvDAeXGOyxqD+LnVOinq6Mdmd++SW2wUNVzavyyHxd6+DxzWGIuosg6P1Rj8uA==", "dev": true, "requires": { - "chalk": "^2.4.2", - "source-map": "^0.6.1", - "supports-color": "^6.1.0" + "picocolors": "^0.2.1", + "source-map": "^0.6.1" } }, "source-map": { @@ -16573,15 +16676,6 @@ "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", "dev": true - }, - "supports-color": { - "version": "6.1.0", - "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz", - "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==", - "dev": true, - "requires": { - "has-flag": "^3.0.0" - } } } }, @@ -16595,21 +16689,14 @@ "postcss-values-parser": "^2.0.0" }, "dependencies": { - "has-flag": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz", - "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=", - "dev": true - }, "postcss": { - "version": "7.0.36", - "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.36.tgz", - "integrity": "sha512-BebJSIUMwJHRH0HAQoxN4u1CN86glsrwsW0q7T+/m44eXOUAxSNdHRkNZPYz5vVUbg17hFgOQDE7fZk7li3pZw==", + "version": "7.0.39", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.39.tgz", + "integrity": "sha512-yioayjNbHn6z1/Bywyb2Y4s3yvDAeXGOyxqD+LnVOinq6Mdmd++SW2wUNVzavyyHxd6+DxzWGIuosg6P1Rj8uA==", "dev": true, "requires": { - "chalk": "^2.4.2", - "source-map": "^0.6.1", - "supports-color": "^6.1.0" + "picocolors": "^0.2.1", + "source-map": "^0.6.1" } }, "source-map": { @@ -16617,15 +16704,6 @@ "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", "dev": true - }, - "supports-color": { - "version": "6.1.0", - "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz", - "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==", - "dev": true, - "requires": { - "has-flag": "^3.0.0" - } } } }, @@ -16638,21 +16716,14 @@ "postcss": "^7.0.2" }, "dependencies": { - "has-flag": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz", - "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=", - "dev": true - }, "postcss": { - "version": "7.0.36", - "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.36.tgz", - "integrity": "sha512-BebJSIUMwJHRH0HAQoxN4u1CN86glsrwsW0q7T+/m44eXOUAxSNdHRkNZPYz5vVUbg17hFgOQDE7fZk7li3pZw==", + "version": "7.0.39", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.39.tgz", + "integrity": "sha512-yioayjNbHn6z1/Bywyb2Y4s3yvDAeXGOyxqD+LnVOinq6Mdmd++SW2wUNVzavyyHxd6+DxzWGIuosg6P1Rj8uA==", "dev": true, "requires": { - "chalk": "^2.4.2", - "source-map": "^0.6.1", - "supports-color": "^6.1.0" + "picocolors": "^0.2.1", + "source-map": "^0.6.1" } }, "source-map": { @@ -16660,15 +16731,6 @@ "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", "dev": true - }, - "supports-color": { - "version": "6.1.0", - "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz", - "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==", - "dev": true, - "requires": { - "has-flag": "^3.0.0" - } } } }, @@ -16681,21 +16743,14 @@ "postcss": "^7.0.2" }, "dependencies": { - "has-flag": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz", - "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=", - "dev": true - }, "postcss": { - "version": "7.0.36", - "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.36.tgz", - "integrity": "sha512-BebJSIUMwJHRH0HAQoxN4u1CN86glsrwsW0q7T+/m44eXOUAxSNdHRkNZPYz5vVUbg17hFgOQDE7fZk7li3pZw==", + "version": "7.0.39", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.39.tgz", + "integrity": "sha512-yioayjNbHn6z1/Bywyb2Y4s3yvDAeXGOyxqD+LnVOinq6Mdmd++SW2wUNVzavyyHxd6+DxzWGIuosg6P1Rj8uA==", "dev": true, "requires": { - "chalk": "^2.4.2", - "source-map": "^0.6.1", - "supports-color": "^6.1.0" + "picocolors": "^0.2.1", + "source-map": "^0.6.1" } }, "source-map": { @@ -16703,15 +16758,6 @@ "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", "dev": true - }, - "supports-color": { - "version": "6.1.0", - "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz", - "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==", - "dev": true, - "requires": { - "has-flag": "^3.0.0" - } } } }, @@ -16724,21 +16770,14 @@ "postcss": "^7.0.2" }, "dependencies": { - "has-flag": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz", - "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=", - "dev": true - }, "postcss": { - "version": "7.0.36", - "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.36.tgz", - "integrity": "sha512-BebJSIUMwJHRH0HAQoxN4u1CN86glsrwsW0q7T+/m44eXOUAxSNdHRkNZPYz5vVUbg17hFgOQDE7fZk7li3pZw==", + "version": "7.0.39", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.39.tgz", + "integrity": "sha512-yioayjNbHn6z1/Bywyb2Y4s3yvDAeXGOyxqD+LnVOinq6Mdmd++SW2wUNVzavyyHxd6+DxzWGIuosg6P1Rj8uA==", "dev": true, "requires": { - "chalk": "^2.4.2", - "source-map": "^0.6.1", - "supports-color": "^6.1.0" + "picocolors": "^0.2.1", + "source-map": "^0.6.1" } }, "source-map": { @@ -16746,15 +16785,6 @@ "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", "dev": true - }, - "supports-color": { - "version": "6.1.0", - "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz", - "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==", - "dev": true, - "requires": { - "has-flag": "^3.0.0" - } } } }, @@ -16767,37 +16797,21 @@ "postcss": "^7.0.2" }, "dependencies": { - "has-flag": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz", - "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=", - "dev": true - }, "postcss": { - "version": "7.0.36", - "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.36.tgz", - "integrity": "sha512-BebJSIUMwJHRH0HAQoxN4u1CN86glsrwsW0q7T+/m44eXOUAxSNdHRkNZPYz5vVUbg17hFgOQDE7fZk7li3pZw==", + "version": "7.0.39", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.39.tgz", + "integrity": "sha512-yioayjNbHn6z1/Bywyb2Y4s3yvDAeXGOyxqD+LnVOinq6Mdmd++SW2wUNVzavyyHxd6+DxzWGIuosg6P1Rj8uA==", "dev": true, "requires": { - "chalk": "^2.4.2", - "source-map": "^0.6.1", - "supports-color": "^6.1.0" + "picocolors": "^0.2.1", + "source-map": "^0.6.1" } }, "source-map": { "version": "0.6.1", "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", - "dev": true - }, - "supports-color": { - "version": "6.1.0", - "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz", - "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==", - "dev": true, - "requires": { - "has-flag": "^3.0.0" - } + "dev": true } } }, @@ -16820,21 +16834,14 @@ "postcss-values-parser": "^2.0.0" }, "dependencies": { - "has-flag": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz", - "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=", - "dev": true - }, "postcss": { - "version": "7.0.36", - "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.36.tgz", - "integrity": "sha512-BebJSIUMwJHRH0HAQoxN4u1CN86glsrwsW0q7T+/m44eXOUAxSNdHRkNZPYz5vVUbg17hFgOQDE7fZk7li3pZw==", + "version": "7.0.39", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.39.tgz", + "integrity": "sha512-yioayjNbHn6z1/Bywyb2Y4s3yvDAeXGOyxqD+LnVOinq6Mdmd++SW2wUNVzavyyHxd6+DxzWGIuosg6P1Rj8uA==", "dev": true, "requires": { - "chalk": "^2.4.2", - "source-map": "^0.6.1", - "supports-color": "^6.1.0" + "picocolors": "^0.2.1", + "source-map": "^0.6.1" } }, "source-map": { @@ -16842,15 +16849,6 @@ "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", "dev": true - }, - "supports-color": { - "version": "6.1.0", - "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz", - "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==", - "dev": true, - "requires": { - "has-flag": "^3.0.0" - } } } }, @@ -16874,21 +16872,14 @@ "postcss": "^7.0.2" }, "dependencies": { - "has-flag": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz", - "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=", - "dev": true - }, "postcss": { - "version": "7.0.36", - "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.36.tgz", - "integrity": "sha512-BebJSIUMwJHRH0HAQoxN4u1CN86glsrwsW0q7T+/m44eXOUAxSNdHRkNZPYz5vVUbg17hFgOQDE7fZk7li3pZw==", + "version": "7.0.39", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.39.tgz", + "integrity": "sha512-yioayjNbHn6z1/Bywyb2Y4s3yvDAeXGOyxqD+LnVOinq6Mdmd++SW2wUNVzavyyHxd6+DxzWGIuosg6P1Rj8uA==", "dev": true, "requires": { - "chalk": "^2.4.2", - "source-map": "^0.6.1", - "supports-color": "^6.1.0" + "picocolors": "^0.2.1", + "source-map": "^0.6.1" } }, "source-map": { @@ -16896,15 +16887,6 @@ "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", "dev": true - }, - "supports-color": { - "version": "6.1.0", - "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz", - "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==", - "dev": true, - "requires": { - "has-flag": "^3.0.0" - } } } }, @@ -16919,21 +16901,14 @@ "postcss-values-parser": "^2.0.0" }, "dependencies": { - "has-flag": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz", - "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=", - "dev": true - }, "postcss": { - "version": "7.0.36", - "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.36.tgz", - "integrity": "sha512-BebJSIUMwJHRH0HAQoxN4u1CN86glsrwsW0q7T+/m44eXOUAxSNdHRkNZPYz5vVUbg17hFgOQDE7fZk7li3pZw==", + "version": "7.0.39", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.39.tgz", + "integrity": "sha512-yioayjNbHn6z1/Bywyb2Y4s3yvDAeXGOyxqD+LnVOinq6Mdmd++SW2wUNVzavyyHxd6+DxzWGIuosg6P1Rj8uA==", "dev": true, "requires": { - "chalk": "^2.4.2", - "source-map": "^0.6.1", - "supports-color": "^6.1.0" + "picocolors": "^0.2.1", + "source-map": "^0.6.1" } }, "source-map": { @@ -16941,15 +16916,6 @@ "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", "dev": true - }, - "supports-color": { - "version": "6.1.0", - "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz", - "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==", - "dev": true, - "requires": { - "has-flag": "^3.0.0" - } } } }, @@ -16997,59 +16963,20 @@ } }, "postcss-load-config": { - "version": "2.1.2", - "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-2.1.2.tgz", - "integrity": "sha512-/rDeGV6vMUo3mwJZmeHfEDvwnTKKqQ0S7OHUi/kJvvtx3aWtyWG2/0ZWnzCt2keEclwN6Tf0DST2v9kITdOKYw==", + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-3.1.0.tgz", + "integrity": "sha512-ipM8Ds01ZUophjDTQYSVP70slFSYg3T0/zyfII5vzhN6V57YSxMgG5syXuwi5VtS8wSf3iL30v0uBdoIVx4Q0g==", "dev": true, "requires": { - "cosmiconfig": "^5.0.0", - "import-cwd": "^2.0.0" - }, - "dependencies": { - "cosmiconfig": { - "version": "5.2.1", - "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-5.2.1.tgz", - "integrity": "sha512-H65gsXo1SKjf8zmrJ67eJk8aIRKV5ff2D4uKZIBZShbhGSpEmsQOPW/SKMKYhSTrqR7ufy6RP69rPogdaPh/kA==", - "dev": true, - "requires": { - "import-fresh": "^2.0.0", - "is-directory": "^0.3.1", - "js-yaml": "^3.13.1", - "parse-json": "^4.0.0" - } - }, - "import-fresh": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-2.0.0.tgz", - "integrity": "sha1-2BNVwVYS04bGH53dOSLUMEgipUY=", - "dev": true, - "requires": { - "caller-path": "^2.0.0", - "resolve-from": "^3.0.0" - } - }, - "parse-json": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-4.0.0.tgz", - "integrity": "sha1-vjX1Qlvh9/bHRxhPmKeIy5lHfuA=", - "dev": true, - "requires": { - "error-ex": "^1.3.1", - "json-parse-better-errors": "^1.0.1" - } - }, - "resolve-from": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-3.0.0.tgz", - "integrity": "sha1-six699nWiBvItuZTM17rywoYh0g=", - "dev": true - } + "import-cwd": "^3.0.0", + "lilconfig": "^2.0.3", + "yaml": "^1.10.2" } }, "postcss-loader": { - "version": "6.1.1", - "resolved": "https://registry.npmjs.org/postcss-loader/-/postcss-loader-6.1.1.tgz", - "integrity": "sha512-lBmJMvRh1D40dqpWKr9Rpygwxn8M74U9uaCSeYGNKLGInbk9mXBt1ultHf2dH9Ghk6Ue4UXlXWwGMH9QdUJ5ug==", + "version": "6.2.0", + "resolved": "https://registry.npmjs.org/postcss-loader/-/postcss-loader-6.2.0.tgz", + "integrity": "sha512-H9hv447QjQJVDbHj3OUdciyAXY3v5+UDduzEytAlZCVHCpNAAg/mCSwhYYqZr9BiGYhmYspU8QXxZwiHTLn3yA==", "dev": true, "requires": { "cosmiconfig": "^7.0.0", @@ -17066,21 +16993,14 @@ "postcss": "^7.0.2" }, "dependencies": { - "has-flag": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz", - "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=", - "dev": true - }, "postcss": { - "version": "7.0.36", - "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.36.tgz", - "integrity": "sha512-BebJSIUMwJHRH0HAQoxN4u1CN86glsrwsW0q7T+/m44eXOUAxSNdHRkNZPYz5vVUbg17hFgOQDE7fZk7li3pZw==", + "version": "7.0.39", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.39.tgz", + "integrity": "sha512-yioayjNbHn6z1/Bywyb2Y4s3yvDAeXGOyxqD+LnVOinq6Mdmd++SW2wUNVzavyyHxd6+DxzWGIuosg6P1Rj8uA==", "dev": true, "requires": { - "chalk": "^2.4.2", - "source-map": "^0.6.1", - "supports-color": "^6.1.0" + "picocolors": "^0.2.1", + "source-map": "^0.6.1" } }, "source-map": { @@ -17088,15 +17008,6 @@ "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", "dev": true - }, - "supports-color": { - "version": "6.1.0", - "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz", - "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==", - "dev": true, - "requires": { - "has-flag": "^3.0.0" - } } } }, @@ -17109,21 +17020,14 @@ "postcss": "^7.0.2" }, "dependencies": { - "has-flag": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz", - "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=", - "dev": true - }, "postcss": { - "version": "7.0.36", - "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.36.tgz", - "integrity": "sha512-BebJSIUMwJHRH0HAQoxN4u1CN86glsrwsW0q7T+/m44eXOUAxSNdHRkNZPYz5vVUbg17hFgOQDE7fZk7li3pZw==", + "version": "7.0.39", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.39.tgz", + "integrity": "sha512-yioayjNbHn6z1/Bywyb2Y4s3yvDAeXGOyxqD+LnVOinq6Mdmd++SW2wUNVzavyyHxd6+DxzWGIuosg6P1Rj8uA==", "dev": true, "requires": { - "chalk": "^2.4.2", - "source-map": "^0.6.1", - "supports-color": "^6.1.0" + "picocolors": "^0.2.1", + "source-map": "^0.6.1" } }, "source-map": { @@ -17131,15 +17035,6 @@ "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", "dev": true - }, - "supports-color": { - "version": "6.1.0", - "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz", - "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==", - "dev": true, - "requires": { - "has-flag": "^3.0.0" - } } } }, @@ -17149,73 +17044,6 @@ "integrity": "sha1-J7Ocb02U+Bsac7j3Y1HGCeXO8kQ=", "dev": true }, - "postcss-merge-longhand": { - "version": "5.0.2", - "resolved": "https://registry.npmjs.org/postcss-merge-longhand/-/postcss-merge-longhand-5.0.2.tgz", - "integrity": "sha512-BMlg9AXSI5G9TBT0Lo/H3PfUy63P84rVz3BjCFE9e9Y9RXQZD3+h3YO1kgTNsNJy7bBc1YQp8DmSnwLIW5VPcw==", - "dev": true, - "requires": { - "css-color-names": "^1.0.1", - "postcss-value-parser": "^4.1.0", - "stylehacks": "^5.0.1" - } - }, - "postcss-merge-rules": { - "version": "5.0.2", - "resolved": "https://registry.npmjs.org/postcss-merge-rules/-/postcss-merge-rules-5.0.2.tgz", - "integrity": "sha512-5K+Md7S3GwBewfB4rjDeol6V/RZ8S+v4B66Zk2gChRqLTCC8yjnHQ601omj9TKftS19OPGqZ/XzoqpzNQQLwbg==", - "dev": true, - "requires": { - "browserslist": "^4.16.6", - "caniuse-api": "^3.0.0", - "cssnano-utils": "^2.0.1", - "postcss-selector-parser": "^6.0.5", - "vendors": "^1.0.3" - } - }, - "postcss-minify-font-values": { - "version": "5.0.1", - "resolved": "https://registry.npmjs.org/postcss-minify-font-values/-/postcss-minify-font-values-5.0.1.tgz", - "integrity": "sha512-7JS4qIsnqaxk+FXY1E8dHBDmraYFWmuL6cgt0T1SWGRO5bzJf8sUoelwa4P88LEWJZweHevAiDKxHlofuvtIoA==", - "dev": true, - "requires": { - "postcss-value-parser": "^4.1.0" - } - }, - "postcss-minify-gradients": { - "version": "5.0.1", - "resolved": "https://registry.npmjs.org/postcss-minify-gradients/-/postcss-minify-gradients-5.0.1.tgz", - "integrity": "sha512-odOwBFAIn2wIv+XYRpoN2hUV3pPQlgbJ10XeXPq8UY2N+9ZG42xu45lTn/g9zZ+d70NKSQD6EOi6UiCMu3FN7g==", - "dev": true, - "requires": { - "cssnano-utils": "^2.0.1", - "is-color-stop": "^1.1.0", - "postcss-value-parser": "^4.1.0" - } - }, - "postcss-minify-params": { - "version": "5.0.1", - "resolved": "https://registry.npmjs.org/postcss-minify-params/-/postcss-minify-params-5.0.1.tgz", - "integrity": "sha512-4RUC4k2A/Q9mGco1Z8ODc7h+A0z7L7X2ypO1B6V8057eVK6mZ6xwz6QN64nHuHLbqbclkX1wyzRnIrdZehTEHw==", - "dev": true, - "requires": { - "alphanum-sort": "^1.0.2", - "browserslist": "^4.16.0", - "cssnano-utils": "^2.0.1", - "postcss-value-parser": "^4.1.0", - "uniqs": "^2.0.0" - } - }, - "postcss-minify-selectors": { - "version": "5.1.0", - "resolved": "https://registry.npmjs.org/postcss-minify-selectors/-/postcss-minify-selectors-5.1.0.tgz", - "integrity": "sha512-NzGBXDa7aPsAcijXZeagnJBKBPMYLaJJzB8CQh6ncvyl2sIndLVWfbcDi0SBjRWk5VqEjXvf8tYwzoKf4Z07og==", - "dev": true, - "requires": { - "alphanum-sort": "^1.0.2", - "postcss-selector-parser": "^6.0.5" - } - }, "postcss-modules-extract-imports": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/postcss-modules-extract-imports/-/postcss-modules-extract-imports-3.0.0.tgz", @@ -17260,21 +17088,14 @@ "postcss": "^7.0.2" }, "dependencies": { - "has-flag": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz", - "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=", - "dev": true - }, "postcss": { - "version": "7.0.36", - "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.36.tgz", - "integrity": "sha512-BebJSIUMwJHRH0HAQoxN4u1CN86glsrwsW0q7T+/m44eXOUAxSNdHRkNZPYz5vVUbg17hFgOQDE7fZk7li3pZw==", + "version": "7.0.39", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.39.tgz", + "integrity": "sha512-yioayjNbHn6z1/Bywyb2Y4s3yvDAeXGOyxqD+LnVOinq6Mdmd++SW2wUNVzavyyHxd6+DxzWGIuosg6P1Rj8uA==", "dev": true, "requires": { - "chalk": "^2.4.2", - "source-map": "^0.6.1", - "supports-color": "^6.1.0" + "picocolors": "^0.2.1", + "source-map": "^0.6.1" } }, "source-map": { @@ -17282,112 +17103,9 @@ "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", "dev": true - }, - "supports-color": { - "version": "6.1.0", - "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz", - "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==", - "dev": true, - "requires": { - "has-flag": "^3.0.0" - } } } }, - "postcss-normalize-charset": { - "version": "5.0.1", - "resolved": "https://registry.npmjs.org/postcss-normalize-charset/-/postcss-normalize-charset-5.0.1.tgz", - "integrity": "sha512-6J40l6LNYnBdPSk+BHZ8SF+HAkS4q2twe5jnocgd+xWpz/mx/5Sa32m3W1AA8uE8XaXN+eg8trIlfu8V9x61eg==", - "dev": true - }, - "postcss-normalize-display-values": { - "version": "5.0.1", - "resolved": "https://registry.npmjs.org/postcss-normalize-display-values/-/postcss-normalize-display-values-5.0.1.tgz", - "integrity": "sha512-uupdvWk88kLDXi5HEyI9IaAJTE3/Djbcrqq8YgjvAVuzgVuqIk3SuJWUisT2gaJbZm1H9g5k2w1xXilM3x8DjQ==", - "dev": true, - "requires": { - "cssnano-utils": "^2.0.1", - "postcss-value-parser": "^4.1.0" - } - }, - "postcss-normalize-positions": { - "version": "5.0.1", - "resolved": "https://registry.npmjs.org/postcss-normalize-positions/-/postcss-normalize-positions-5.0.1.tgz", - "integrity": "sha512-rvzWAJai5xej9yWqlCb1OWLd9JjW2Ex2BCPzUJrbaXmtKtgfL8dBMOOMTX6TnvQMtjk3ei1Lswcs78qKO1Skrg==", - "dev": true, - "requires": { - "postcss-value-parser": "^4.1.0" - } - }, - "postcss-normalize-repeat-style": { - "version": "5.0.1", - "resolved": "https://registry.npmjs.org/postcss-normalize-repeat-style/-/postcss-normalize-repeat-style-5.0.1.tgz", - "integrity": "sha512-syZ2itq0HTQjj4QtXZOeefomckiV5TaUO6ReIEabCh3wgDs4Mr01pkif0MeVwKyU/LHEkPJnpwFKRxqWA/7O3w==", - "dev": true, - "requires": { - "cssnano-utils": "^2.0.1", - "postcss-value-parser": "^4.1.0" - } - }, - "postcss-normalize-string": { - "version": "5.0.1", - "resolved": "https://registry.npmjs.org/postcss-normalize-string/-/postcss-normalize-string-5.0.1.tgz", - "integrity": "sha512-Ic8GaQ3jPMVl1OEn2U//2pm93AXUcF3wz+OriskdZ1AOuYV25OdgS7w9Xu2LO5cGyhHCgn8dMXh9bO7vi3i9pA==", - "dev": true, - "requires": { - "postcss-value-parser": "^4.1.0" - } - }, - "postcss-normalize-timing-functions": { - "version": "5.0.1", - "resolved": "https://registry.npmjs.org/postcss-normalize-timing-functions/-/postcss-normalize-timing-functions-5.0.1.tgz", - "integrity": "sha512-cPcBdVN5OsWCNEo5hiXfLUnXfTGtSFiBU9SK8k7ii8UD7OLuznzgNRYkLZow11BkQiiqMcgPyh4ZqXEEUrtQ1Q==", - "dev": true, - "requires": { - "cssnano-utils": "^2.0.1", - "postcss-value-parser": "^4.1.0" - } - }, - "postcss-normalize-unicode": { - "version": "5.0.1", - "resolved": "https://registry.npmjs.org/postcss-normalize-unicode/-/postcss-normalize-unicode-5.0.1.tgz", - "integrity": "sha512-kAtYD6V3pK0beqrU90gpCQB7g6AOfP/2KIPCVBKJM2EheVsBQmx/Iof+9zR9NFKLAx4Pr9mDhogB27pmn354nA==", - "dev": true, - "requires": { - "browserslist": "^4.16.0", - "postcss-value-parser": "^4.1.0" - } - }, - "postcss-normalize-url": { - "version": "5.0.2", - "resolved": "https://registry.npmjs.org/postcss-normalize-url/-/postcss-normalize-url-5.0.2.tgz", - "integrity": "sha512-k4jLTPUxREQ5bpajFQZpx8bCF2UrlqOTzP9kEqcEnOfwsRshWs2+oAFIHfDQB8GO2PaUaSE0NlTAYtbluZTlHQ==", - "dev": true, - "requires": { - "is-absolute-url": "^3.0.3", - "normalize-url": "^6.0.1", - "postcss-value-parser": "^4.1.0" - } - }, - "postcss-normalize-whitespace": { - "version": "5.0.1", - "resolved": "https://registry.npmjs.org/postcss-normalize-whitespace/-/postcss-normalize-whitespace-5.0.1.tgz", - "integrity": "sha512-iPklmI5SBnRvwceb/XH568yyzK0qRVuAG+a1HFUsFRf11lEJTiQQa03a4RSCQvLKdcpX7XsI1Gen9LuLoqwiqA==", - "dev": true, - "requires": { - "postcss-value-parser": "^4.1.0" - } - }, - "postcss-ordered-values": { - "version": "5.0.2", - "resolved": "https://registry.npmjs.org/postcss-ordered-values/-/postcss-ordered-values-5.0.2.tgz", - "integrity": "sha512-8AFYDSOYWebJYLyJi3fyjl6CqMEG/UVworjiyK1r573I56kb3e879sCJLGvR3merj+fAdPpVplXKQZv+ey6CgQ==", - "dev": true, - "requires": { - "cssnano-utils": "^2.0.1", - "postcss-value-parser": "^4.1.0" - } - }, "postcss-overflow-shorthand": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/postcss-overflow-shorthand/-/postcss-overflow-shorthand-2.0.0.tgz", @@ -17396,22 +17114,15 @@ "requires": { "postcss": "^7.0.2" }, - "dependencies": { - "has-flag": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz", - "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=", - "dev": true - }, - "postcss": { - "version": "7.0.36", - "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.36.tgz", - "integrity": "sha512-BebJSIUMwJHRH0HAQoxN4u1CN86glsrwsW0q7T+/m44eXOUAxSNdHRkNZPYz5vVUbg17hFgOQDE7fZk7li3pZw==", + "dependencies": { + "postcss": { + "version": "7.0.39", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.39.tgz", + "integrity": "sha512-yioayjNbHn6z1/Bywyb2Y4s3yvDAeXGOyxqD+LnVOinq6Mdmd++SW2wUNVzavyyHxd6+DxzWGIuosg6P1Rj8uA==", "dev": true, "requires": { - "chalk": "^2.4.2", - "source-map": "^0.6.1", - "supports-color": "^6.1.0" + "picocolors": "^0.2.1", + "source-map": "^0.6.1" } }, "source-map": { @@ -17419,15 +17130,6 @@ "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", "dev": true - }, - "supports-color": { - "version": "6.1.0", - "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz", - "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==", - "dev": true, - "requires": { - "has-flag": "^3.0.0" - } } } }, @@ -17440,21 +17142,14 @@ "postcss": "^7.0.2" }, "dependencies": { - "has-flag": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz", - "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=", - "dev": true - }, "postcss": { - "version": "7.0.36", - "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.36.tgz", - "integrity": "sha512-BebJSIUMwJHRH0HAQoxN4u1CN86glsrwsW0q7T+/m44eXOUAxSNdHRkNZPYz5vVUbg17hFgOQDE7fZk7li3pZw==", + "version": "7.0.39", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.39.tgz", + "integrity": "sha512-yioayjNbHn6z1/Bywyb2Y4s3yvDAeXGOyxqD+LnVOinq6Mdmd++SW2wUNVzavyyHxd6+DxzWGIuosg6P1Rj8uA==", "dev": true, "requires": { - "chalk": "^2.4.2", - "source-map": "^0.6.1", - "supports-color": "^6.1.0" + "picocolors": "^0.2.1", + "source-map": "^0.6.1" } }, "source-map": { @@ -17462,15 +17157,6 @@ "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", "dev": true - }, - "supports-color": { - "version": "6.1.0", - "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz", - "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==", - "dev": true, - "requires": { - "has-flag": "^3.0.0" - } } } }, @@ -17484,21 +17170,14 @@ "postcss-values-parser": "^2.0.0" }, "dependencies": { - "has-flag": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz", - "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=", - "dev": true - }, "postcss": { - "version": "7.0.36", - "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.36.tgz", - "integrity": "sha512-BebJSIUMwJHRH0HAQoxN4u1CN86glsrwsW0q7T+/m44eXOUAxSNdHRkNZPYz5vVUbg17hFgOQDE7fZk7li3pZw==", + "version": "7.0.39", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.39.tgz", + "integrity": "sha512-yioayjNbHn6z1/Bywyb2Y4s3yvDAeXGOyxqD+LnVOinq6Mdmd++SW2wUNVzavyyHxd6+DxzWGIuosg6P1Rj8uA==", "dev": true, "requires": { - "chalk": "^2.4.2", - "source-map": "^0.6.1", - "supports-color": "^6.1.0" + "picocolors": "^0.2.1", + "source-map": "^0.6.1" } }, "source-map": { @@ -17506,15 +17185,6 @@ "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", "dev": true - }, - "supports-color": { - "version": "6.1.0", - "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz", - "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==", - "dev": true, - "requires": { - "has-flag": "^3.0.0" - } } } }, @@ -17563,21 +17233,14 @@ "postcss-selector-not": "^4.0.0" }, "dependencies": { - "has-flag": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz", - "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=", - "dev": true - }, "postcss": { - "version": "7.0.36", - "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.36.tgz", - "integrity": "sha512-BebJSIUMwJHRH0HAQoxN4u1CN86glsrwsW0q7T+/m44eXOUAxSNdHRkNZPYz5vVUbg17hFgOQDE7fZk7li3pZw==", + "version": "7.0.39", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.39.tgz", + "integrity": "sha512-yioayjNbHn6z1/Bywyb2Y4s3yvDAeXGOyxqD+LnVOinq6Mdmd++SW2wUNVzavyyHxd6+DxzWGIuosg6P1Rj8uA==", "dev": true, "requires": { - "chalk": "^2.4.2", - "source-map": "^0.6.1", - "supports-color": "^6.1.0" + "picocolors": "^0.2.1", + "source-map": "^0.6.1" } }, "source-map": { @@ -17585,15 +17248,6 @@ "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", "dev": true - }, - "supports-color": { - "version": "6.1.0", - "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz", - "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==", - "dev": true, - "requires": { - "has-flag": "^3.0.0" - } } } }, @@ -17613,21 +17267,14 @@ "integrity": "sha512-MsCAG1z9lPdoO/IUMLSBWBSVxVtJ1395VGIQ+Fc2gNdkQ1hNDnQdw3YhA71WJCBW1vdwA0cAnk/DnW6bqoEUYg==", "dev": true }, - "has-flag": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz", - "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=", - "dev": true - }, "postcss": { - "version": "7.0.36", - "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.36.tgz", - "integrity": "sha512-BebJSIUMwJHRH0HAQoxN4u1CN86glsrwsW0q7T+/m44eXOUAxSNdHRkNZPYz5vVUbg17hFgOQDE7fZk7li3pZw==", + "version": "7.0.39", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.39.tgz", + "integrity": "sha512-yioayjNbHn6z1/Bywyb2Y4s3yvDAeXGOyxqD+LnVOinq6Mdmd++SW2wUNVzavyyHxd6+DxzWGIuosg6P1Rj8uA==", "dev": true, "requires": { - "chalk": "^2.4.2", - "source-map": "^0.6.1", - "supports-color": "^6.1.0" + "picocolors": "^0.2.1", + "source-map": "^0.6.1" } }, "postcss-selector-parser": { @@ -17646,38 +17293,9 @@ "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", "dev": true - }, - "supports-color": { - "version": "6.1.0", - "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz", - "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==", - "dev": true, - "requires": { - "has-flag": "^3.0.0" - } } } }, - "postcss-reduce-initial": { - "version": "5.0.1", - "resolved": "https://registry.npmjs.org/postcss-reduce-initial/-/postcss-reduce-initial-5.0.1.tgz", - "integrity": "sha512-zlCZPKLLTMAqA3ZWH57HlbCjkD55LX9dsRyxlls+wfuRfqCi5mSlZVan0heX5cHr154Dq9AfbH70LyhrSAezJw==", - "dev": true, - "requires": { - "browserslist": "^4.16.0", - "caniuse-api": "^3.0.0" - } - }, - "postcss-reduce-transforms": { - "version": "5.0.1", - "resolved": "https://registry.npmjs.org/postcss-reduce-transforms/-/postcss-reduce-transforms-5.0.1.tgz", - "integrity": "sha512-a//FjoPeFkRuAguPscTVmRQUODP+f3ke2HqFNgGPwdYnpeC29RZdCBvGRGTsKpMURb/I3p6jdKoBQ2zI+9Q7kA==", - "dev": true, - "requires": { - "cssnano-utils": "^2.0.1", - "postcss-value-parser": "^4.1.0" - } - }, "postcss-replace-overflow-wrap": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/postcss-replace-overflow-wrap/-/postcss-replace-overflow-wrap-3.0.0.tgz", @@ -17687,21 +17305,14 @@ "postcss": "^7.0.2" }, "dependencies": { - "has-flag": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz", - "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=", - "dev": true - }, "postcss": { - "version": "7.0.36", - "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.36.tgz", - "integrity": "sha512-BebJSIUMwJHRH0HAQoxN4u1CN86glsrwsW0q7T+/m44eXOUAxSNdHRkNZPYz5vVUbg17hFgOQDE7fZk7li3pZw==", + "version": "7.0.39", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.39.tgz", + "integrity": "sha512-yioayjNbHn6z1/Bywyb2Y4s3yvDAeXGOyxqD+LnVOinq6Mdmd++SW2wUNVzavyyHxd6+DxzWGIuosg6P1Rj8uA==", "dev": true, "requires": { - "chalk": "^2.4.2", - "source-map": "^0.6.1", - "supports-color": "^6.1.0" + "picocolors": "^0.2.1", + "source-map": "^0.6.1" } }, "source-map": { @@ -17709,15 +17320,6 @@ "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", "dev": true - }, - "supports-color": { - "version": "6.1.0", - "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz", - "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==", - "dev": true, - "requires": { - "has-flag": "^3.0.0" - } } } }, @@ -17867,21 +17469,14 @@ "postcss": "^7.0.2" }, "dependencies": { - "has-flag": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz", - "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=", - "dev": true - }, "postcss": { - "version": "7.0.36", - "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.36.tgz", - "integrity": "sha512-BebJSIUMwJHRH0HAQoxN4u1CN86glsrwsW0q7T+/m44eXOUAxSNdHRkNZPYz5vVUbg17hFgOQDE7fZk7li3pZw==", + "version": "7.0.39", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.39.tgz", + "integrity": "sha512-yioayjNbHn6z1/Bywyb2Y4s3yvDAeXGOyxqD+LnVOinq6Mdmd++SW2wUNVzavyyHxd6+DxzWGIuosg6P1Rj8uA==", "dev": true, "requires": { - "chalk": "^2.4.2", - "source-map": "^0.6.1", - "supports-color": "^6.1.0" + "picocolors": "^0.2.1", + "source-map": "^0.6.1" } }, "source-map": { @@ -17889,15 +17484,6 @@ "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", "dev": true - }, - "supports-color": { - "version": "6.1.0", - "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz", - "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==", - "dev": true, - "requires": { - "has-flag": "^3.0.0" - } } } }, @@ -17911,21 +17497,14 @@ "postcss": "^7.0.2" }, "dependencies": { - "has-flag": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz", - "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=", - "dev": true - }, "postcss": { - "version": "7.0.36", - "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.36.tgz", - "integrity": "sha512-BebJSIUMwJHRH0HAQoxN4u1CN86glsrwsW0q7T+/m44eXOUAxSNdHRkNZPYz5vVUbg17hFgOQDE7fZk7li3pZw==", + "version": "7.0.39", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.39.tgz", + "integrity": "sha512-yioayjNbHn6z1/Bywyb2Y4s3yvDAeXGOyxqD+LnVOinq6Mdmd++SW2wUNVzavyyHxd6+DxzWGIuosg6P1Rj8uA==", "dev": true, "requires": { - "chalk": "^2.4.2", - "source-map": "^0.6.1", - "supports-color": "^6.1.0" + "picocolors": "^0.2.1", + "source-map": "^0.6.1" } }, "source-map": { @@ -17933,15 +17512,6 @@ "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", "dev": true - }, - "supports-color": { - "version": "6.1.0", - "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz", - "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==", - "dev": true, - "requires": { - "has-flag": "^3.0.0" - } } } }, @@ -17955,33 +17525,12 @@ "util-deprecate": "^1.0.2" } }, - "postcss-svgo": { - "version": "5.0.2", - "resolved": "https://registry.npmjs.org/postcss-svgo/-/postcss-svgo-5.0.2.tgz", - "integrity": "sha512-YzQuFLZu3U3aheizD+B1joQ94vzPfE6BNUcSYuceNxlVnKKsOtdo6hL9/zyC168Q8EwfLSgaDSalsUGa9f2C0A==", - "dev": true, - "requires": { - "postcss-value-parser": "^4.1.0", - "svgo": "^2.3.0" - } - }, "postcss-syntax": { "version": "0.36.2", "resolved": "https://registry.npmjs.org/postcss-syntax/-/postcss-syntax-0.36.2.tgz", "integrity": "sha512-nBRg/i7E3SOHWxF3PpF5WnJM/jQ1YpY9000OaVXlAQj6Zp/kIqJxEDWIZ67tAd7NLuk7zqN4yqe9nc0oNAOs1w==", "dev": true }, - "postcss-unique-selectors": { - "version": "5.0.1", - "resolved": "https://registry.npmjs.org/postcss-unique-selectors/-/postcss-unique-selectors-5.0.1.tgz", - "integrity": "sha512-gwi1NhHV4FMmPn+qwBNuot1sG1t2OmacLQ/AX29lzyggnjd+MnVD5uqQmpXO3J17KGL2WAxQruj1qTd3H0gG/w==", - "dev": true, - "requires": { - "alphanum-sort": "^1.0.2", - "postcss-selector-parser": "^6.0.5", - "uniqs": "^2.0.0" - } - }, "postcss-url": { "version": "10.1.3", "resolved": "https://registry.npmjs.org/postcss-url/-/postcss-url-10.1.3.tgz", @@ -18067,6 +17616,14 @@ "requires": { "err-code": "^2.0.2", "retry": "^0.12.0" + }, + "dependencies": { + "retry": { + "version": "0.12.0", + "resolved": "https://registry.npmjs.org/retry/-/retry-0.12.0.tgz", + "integrity": "sha1-G0KmJmoh8HQh0bC1S33BZ7AcATs=", + "dev": true + } } }, "proto-list": { @@ -18417,13 +17974,22 @@ "requires": { "forwarded": "0.2.0", "ipaddr.js": "1.9.1" + }, + "dependencies": { + "ipaddr.js": { + "version": "1.9.1", + "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-1.9.1.tgz", + "integrity": "sha512-0KI/607xoxSToH7GjN1FfSbLoU0+btTicjsQSWQlh/hZykN8KpmMf7uYwPW3R+akZ6R/w18ZlXSHBYXiYUPO3g==", + "dev": true + } } }, "prr": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/prr/-/prr-1.0.1.tgz", "integrity": "sha1-0/wRS6BplaRexok/SEzrHXj19HY=", - "dev": true + "dev": true, + "optional": true }, "pseudomap": { "version": "1.0.2", @@ -18520,12 +18086,6 @@ "integrity": "sha1-sgmEkgO7Jd+CDadW50cAWHhSFiA=", "dev": true }, - "querystringify": { - "version": "2.2.0", - "resolved": "https://registry.npmjs.org/querystringify/-/querystringify-2.2.0.tgz", - "integrity": "sha512-FIqgj2EUvTa7R50u0rGsyTftzjYmv/a3hO345bZNrqabNqjtgiDMgmo4mkUjd+nzU5oF3dClKqFIPUKybUyqoQ==", - "dev": true - }, "queue-microtask": { "version": "1.2.3", "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz", @@ -18747,27 +18307,6 @@ "resolve": "^1.1.6" } }, - "redent": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/redent/-/redent-1.0.0.tgz", - "integrity": "sha1-z5Fqsf1fHxbfsggi3W7H9zDCr94=", - "dev": true, - "requires": { - "indent-string": "^2.1.0", - "strip-indent": "^1.0.1" - }, - "dependencies": { - "indent-string": { - "version": "2.1.0", - "resolved": "https://registry.npmjs.org/indent-string/-/indent-string-2.1.0.tgz", - "integrity": "sha1-ji1INIdCEhtKghi3oTfppSBJ3IA=", - "dev": true, - "requires": { - "repeating": "^2.0.0" - } - } - } - }, "reflect-metadata": { "version": "0.1.13", "resolved": "https://registry.npmjs.org/reflect-metadata/-/reflect-metadata-0.1.13.tgz", @@ -18781,18 +18320,18 @@ "dev": true }, "regenerate-unicode-properties": { - "version": "8.2.0", - "resolved": "https://registry.npmjs.org/regenerate-unicode-properties/-/regenerate-unicode-properties-8.2.0.tgz", - "integrity": "sha512-F9DjY1vKLo/tPePDycuH3dn9H1OTPIkVD9Kz4LODu+F2C75mgjAJ7x/gwy6ZcSNRAAkhNlJSOHRe8k3p+K9WhA==", + "version": "9.0.0", + "resolved": "https://registry.npmjs.org/regenerate-unicode-properties/-/regenerate-unicode-properties-9.0.0.tgz", + "integrity": "sha512-3E12UeNSPfjrgwjkR81m5J7Aw/T55Tu7nUyZVQYCKEOs+2dkxEY+DpPtZzO4YruuiPb7NkYLVcyJC4+zCbk5pA==", "dev": true, "requires": { - "regenerate": "^1.4.0" + "regenerate": "^1.4.2" } }, "regenerator-runtime": { - "version": "0.13.7", - "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.7.tgz", - "integrity": "sha512-a54FxoJDIr27pgf7IgeQGxmqUNYrcV338lf/6gH456HZ/PhX+5BcwHXG9ajESmwe6WRO0tAzRUrRmNONWgkrew==", + "version": "0.13.9", + "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.9.tgz", + "integrity": "sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA==", "dev": true }, "regenerator-transform": { @@ -18837,17 +18376,17 @@ "dev": true }, "regexpu-core": { - "version": "4.7.1", - "resolved": "https://registry.npmjs.org/regexpu-core/-/regexpu-core-4.7.1.tgz", - "integrity": "sha512-ywH2VUraA44DZQuRKzARmw6S66mr48pQVva4LBeRhcOltJ6hExvWly5ZjFLYo67xbIxb6W1q4bAGtgfEl20zfQ==", + "version": "4.8.0", + "resolved": "https://registry.npmjs.org/regexpu-core/-/regexpu-core-4.8.0.tgz", + "integrity": "sha512-1F6bYsoYiz6is+oz70NWur2Vlh9KWtswuRuzJOfeYUrfPX2o8n74AnUVaOGDbUqVGO9fNHu48/pjJO4sNVwsOg==", "dev": true, "requires": { - "regenerate": "^1.4.0", - "regenerate-unicode-properties": "^8.2.0", - "regjsgen": "^0.5.1", - "regjsparser": "^0.6.4", - "unicode-match-property-ecmascript": "^1.0.4", - "unicode-match-property-value-ecmascript": "^1.2.0" + "regenerate": "^1.4.2", + "regenerate-unicode-properties": "^9.0.0", + "regjsgen": "^0.5.2", + "regjsparser": "^0.7.0", + "unicode-match-property-ecmascript": "^2.0.0", + "unicode-match-property-value-ecmascript": "^2.0.0" } }, "regextras": { @@ -18881,9 +18420,9 @@ "dev": true }, "regjsparser": { - "version": "0.6.9", - "resolved": "https://registry.npmjs.org/regjsparser/-/regjsparser-0.6.9.tgz", - "integrity": "sha512-ZqbNRz1SNjLAiYuwY0zoXW8Ne675IX5q+YHioAGbCw4X96Mjl2+dcX9B2ciaeyYjViDAfvIjFpQjJgLttTEERQ==", + "version": "0.7.0", + "resolved": "https://registry.npmjs.org/regjsparser/-/regjsparser-0.7.0.tgz", + "integrity": "sha512-A4pcaORqmNMDVwUjWoTzuhwMGpP+NykpfqAsEgI1FSH/EzC7lrN5TMd+kN8YCovX+jMpu8eaqXgXPCa0g8FQNQ==", "dev": true, "requires": { "jsesc": "~0.5.0" @@ -18971,15 +18510,6 @@ "integrity": "sha1-jcrkcOHIirwtYA//Sndihtp15jc=", "dev": true }, - "repeating": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/repeating/-/repeating-2.0.1.tgz", - "integrity": "sha1-UhTFOpJtNVJwdSf7q0FdvAjQbdo=", - "dev": true, - "requires": { - "is-finite": "^1.0.0" - } - }, "replace-ext": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/replace-ext/-/replace-ext-1.0.1.tgz", @@ -19068,23 +18598,6 @@ "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.1.7.tgz", "integrity": "sha1-IDEU2CrSxe2ejgQRs5ModeiJ6Xs=" }, - "resolve-cwd": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/resolve-cwd/-/resolve-cwd-2.0.0.tgz", - "integrity": "sha1-AKn3OHVW4nA46uIyyqNypqWbZlo=", - "dev": true, - "requires": { - "resolve-from": "^3.0.0" - }, - "dependencies": { - "resolve-from": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-3.0.0.tgz", - "integrity": "sha1-six699nWiBvItuZTM17rywoYh0g=", - "dev": true - } - } - }, "resolve-dir": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/resolve-dir/-/resolve-dir-1.0.1.tgz", @@ -19129,37 +18642,32 @@ "source-map": "0.6.1" }, "dependencies": { - "has-flag": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz", - "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=", - "dev": true - }, - "postcss": { - "version": "7.0.36", - "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.36.tgz", - "integrity": "sha512-BebJSIUMwJHRH0HAQoxN4u1CN86glsrwsW0q7T+/m44eXOUAxSNdHRkNZPYz5vVUbg17hFgOQDE7fZk7li3pZw==", + "loader-utils": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.1.tgz", + "integrity": "sha512-g4miPa9uUrZz4iElkaVJgDFwKJGh8aQGM7pUL4ejXl6cu7kSb30seQOVGNMP6sW8j7DW77X68hJZ+GM7UGhXeQ==", "dev": true, "requires": { - "chalk": "^2.4.2", - "source-map": "^0.6.1", - "supports-color": "^6.1.0" + "big.js": "^5.2.2", + "emojis-list": "^3.0.0", + "json5": "^2.1.2" } }, - "source-map": { - "version": "0.6.1", - "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", - "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", - "dev": true - }, - "supports-color": { - "version": "6.1.0", - "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz", - "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==", + "postcss": { + "version": "7.0.39", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.39.tgz", + "integrity": "sha512-yioayjNbHn6z1/Bywyb2Y4s3yvDAeXGOyxqD+LnVOinq6Mdmd++SW2wUNVzavyyHxd6+DxzWGIuosg6P1Rj8uA==", "dev": true, "requires": { - "has-flag": "^3.0.0" + "picocolors": "^0.2.1", + "source-map": "^0.6.1" } + }, + "source-map": { + "version": "0.6.1", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", + "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", + "dev": true } } }, @@ -19216,9 +18724,9 @@ "dev": true }, "retry": { - "version": "0.12.0", - "resolved": "https://registry.npmjs.org/retry/-/retry-0.12.0.tgz", - "integrity": "sha1-G0KmJmoh8HQh0bC1S33BZ7AcATs=", + "version": "0.13.1", + "resolved": "https://registry.npmjs.org/retry/-/retry-0.13.1.tgz", + "integrity": "sha512-XQBQ3I8W1Cge0Seh+6gjj03LbmRFWuoszgK9ooCpwYIrhhoO80pfq4cUkU5DkknwfOfFteRwlZ56PYOGYyFWdg==", "dev": true }, "reusify": { @@ -19233,18 +18741,6 @@ "integrity": "sha512-V2hovdzFbOi77/WajaSMXk2OLm+xNIeQdMMuB7icj7bk6zi2F8GGAxigcnDFpJHbNyNcgyJDiP+8nOrY5cZGrA==", "dev": true }, - "rgb-regex": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/rgb-regex/-/rgb-regex-1.0.1.tgz", - "integrity": "sha1-wODWiC3w4jviVKR16O3UGRX+rrE=", - "dev": true - }, - "rgba-regex": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/rgba-regex/-/rgba-regex-1.0.0.tgz", - "integrity": "sha1-QzdOLiyglosO8VI0YLfXMP8i7rM=", - "dev": true - }, "rimraf": { "version": "3.0.2", "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz", @@ -19271,9 +18767,9 @@ } }, "rollup": { - "version": "2.56.0", - "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.56.0.tgz", - "integrity": "sha512-weEafgbjbHCnrtJPNyCrhYnjP62AkF04P0BcV/1mofy1+gytWln4VVB1OK462cq2EAyWzRDpTMheSP/o+quoiA==", + "version": "2.59.0", + "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.59.0.tgz", + "integrity": "sha512-l7s90JQhCQ6JyZjKgo7Lq1dKh2RxatOM+Jr6a9F7WbS9WgKbocyUSeLmZl8evAse7y96Ae98L2k1cBOwWD8nHw==", "dev": true, "requires": { "fsevents": "~2.3.2" @@ -19388,9 +18884,9 @@ "dev": true }, "sass": { - "version": "1.35.2", - "resolved": "https://registry.npmjs.org/sass/-/sass-1.35.2.tgz", - "integrity": "sha512-jhO5KAR+AMxCEwIH3v+4zbB2WB0z67V1X0jbapfVwQQdjHZUGUyukpnoM6+iCMfsIUC016w9OPKQ5jrNOS9uXw==", + "version": "1.43.4", + "resolved": "https://registry.npmjs.org/sass/-/sass-1.43.4.tgz", + "integrity": "sha512-/ptG7KE9lxpGSYiXn7Ar+lKOv37xfWsZRtFYal2QHNigyVQDx685VFT/h7ejVr+R8w7H4tmUgtulsKl5YpveOg==", "dev": true, "requires": { "chokidar": ">=3.0.0 <4.0.0" @@ -19442,9 +18938,9 @@ } }, "sass-loader": { - "version": "12.1.0", - "resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-12.1.0.tgz", - "integrity": "sha512-FVJZ9kxVRYNZTIe2xhw93n3xJNYZADr+q69/s98l9nTCrWASo+DR2Ot0s5xTKQDDEosUkatsGeHxcH4QBp5bSg==", + "version": "12.3.0", + "resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-12.3.0.tgz", + "integrity": "sha512-6l9qwhdOb7qSrtOu96QQ81LVl8v6Dp9j1w3akOm0aWHyrTYtagDt5+kS32N4yq4hHk3M+rdqoRMH+lIdqvW6HA==", "dev": true, "requires": { "klona": "^2.0.4", @@ -19887,14 +19383,6 @@ "dev": true, "requires": { "commander": "^2.8.1" - }, - "dependencies": { - "commander": { - "version": "2.20.3", - "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz", - "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==", - "dev": true - } } }, "select-hose": { @@ -20232,12 +19720,12 @@ "dev": true }, "shiki": { - "version": "0.9.5", - "resolved": "https://registry.npmjs.org/shiki/-/shiki-0.9.5.tgz", - "integrity": "sha512-XFn+rl3wIowDjzdr5DlHoHgQphXefgUTs2bNp/bZu4WF9gTrTLnKwio3f28VjiFG6Jpip7yQn/p4mMj6OrjrtQ==", + "version": "0.9.11", + "resolved": "https://registry.npmjs.org/shiki/-/shiki-0.9.11.tgz", + "integrity": "sha512-tjruNTLFhU0hruCPoJP0y+B9LKOmcqUhTpxn7pcJB3fa+04gFChuEmxmrUfOJ7ZO6Jd+HwMnDHgY3lv3Tqonuw==", "dev": true, "requires": { - "json5": "^2.2.0", + "jsonc-parser": "^3.0.0", "onigasm": "^2.2.5", "vscode-textmate": "5.2.0" } @@ -20292,9 +19780,9 @@ } }, "smart-buffer": { - "version": "4.1.0", - "resolved": "https://registry.npmjs.org/smart-buffer/-/smart-buffer-4.1.0.tgz", - "integrity": "sha512-iVICrxOzCynf/SNaBQCw34eM9jROU/s5rzIhpOvzhzuYHfJR/DhZfDkXiZSgKXfgv26HT3Yni3AV/DGw0cGnnw==", + "version": "4.2.0", + "resolved": "https://registry.npmjs.org/smart-buffer/-/smart-buffer-4.2.0.tgz", + "integrity": "sha512-94hK0Hh8rPqQl2xXc3HsaBoOXKV20MToPkcXvwbISWLEs+64sBq5kFgn2kJDHb1Pry9yrP0dxrCI9RRci7RXKg==", "dev": true }, "snapdragon": { @@ -20581,31 +20069,6 @@ } } }, - "sockjs-client": { - "version": "1.5.1", - "resolved": "https://registry.npmjs.org/sockjs-client/-/sockjs-client-1.5.1.tgz", - "integrity": "sha512-VnVAb663fosipI/m6pqRXakEOw7nvd7TUgdr3PlR/8V2I95QIdwT8L4nMxhyU8SmDBHYXU1TOElaKOmKLfYzeQ==", - "dev": true, - "requires": { - "debug": "^3.2.6", - "eventsource": "^1.0.7", - "faye-websocket": "^0.11.3", - "inherits": "^2.0.4", - "json3": "^3.3.3", - "url-parse": "^1.5.1" - }, - "dependencies": { - "debug": { - "version": "3.2.7", - "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz", - "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==", - "dev": true, - "requires": { - "ms": "^2.1.1" - } - } - } - }, "socks": { "version": "2.6.1", "resolved": "https://registry.npmjs.org/socks/-/socks-2.6.1.tgz", @@ -20617,14 +20080,14 @@ } }, "socks-proxy-agent": { - "version": "5.0.1", - "resolved": "https://registry.npmjs.org/socks-proxy-agent/-/socks-proxy-agent-5.0.1.tgz", - "integrity": "sha512-vZdmnjb9a2Tz6WEQVIurybSwElwPxMZaIc7PzqbJTrezcKNznv6giT7J7tZDZ1BojVaa1jvO/UiUdhDVB0ACoQ==", + "version": "6.1.0", + "resolved": "https://registry.npmjs.org/socks-proxy-agent/-/socks-proxy-agent-6.1.0.tgz", + "integrity": "sha512-57e7lwCN4Tzt3mXz25VxOErJKXlPfXmkMLnk310v/jwW20jWRVcgsOit+xNkN3eIEdB47GwnfAEBLacZ/wVIKg==", "dev": true, "requires": { "agent-base": "^6.0.2", - "debug": "4", - "socks": "^2.3.3" + "debug": "^4.3.1", + "socks": "^2.6.1" } }, "sort-keys": { @@ -20699,9 +20162,9 @@ } }, "source-map-support": { - "version": "0.5.19", - "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.19.tgz", - "integrity": "sha512-Wonm7zOCIJzBGQdB+thsPar0kYuCIzYvxZwlBa87yi/Mdjv7Tip2cyVbLj5o0cFPN4EVkuTwb3GDDyUx2DGnGw==", + "version": "0.5.20", + "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.20.tgz", + "integrity": "sha512-n1lZZ8Ve4ksRqizaBQgxXDgKwttHDhyfQjA6YZZn8+AroHbsIz+JjwxQDxbp+7y5OYCI8t1Yk7etjD9CRd2hIw==", "dev": true, "requires": { "buffer-from": "^1.0.0", @@ -20826,59 +20289,6 @@ "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz", "integrity": "sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw=" }, - "squeak": { - "version": "1.3.0", - "resolved": "https://registry.npmjs.org/squeak/-/squeak-1.3.0.tgz", - "integrity": "sha1-MwRQN7ZDiLVnZ0uEMiplIQc5FsM=", - "dev": true, - "requires": { - "chalk": "^1.0.0", - "console-stream": "^0.1.1", - "lpad-align": "^1.0.1" - }, - "dependencies": { - "ansi-regex": { - "version": "2.1.1", - "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz", - "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8=", - "dev": true - }, - "ansi-styles": { - "version": "2.2.1", - "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-2.2.1.tgz", - "integrity": "sha1-tDLdM1i2NM914eRmQ2gkBTPB3b4=", - "dev": true - }, - "chalk": { - "version": "1.1.3", - "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz", - "integrity": "sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=", - "dev": true, - "requires": { - "ansi-styles": "^2.2.1", - "escape-string-regexp": "^1.0.2", - "has-ansi": "^2.0.0", - "strip-ansi": "^3.0.0", - "supports-color": "^2.0.0" - } - }, - "strip-ansi": { - "version": "3.0.1", - "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz", - "integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=", - "dev": true, - "requires": { - "ansi-regex": "^2.0.0" - } - }, - "supports-color": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz", - "integrity": "sha1-U10EXOa2Nj+kARcIRimZXp3zJMc=", - "dev": true - } - } - }, "sshpk": { "version": "1.16.1", "resolved": "https://registry.npmjs.org/sshpk/-/sshpk-1.16.1.tgz", @@ -20905,12 +20315,6 @@ "minipass": "^3.1.1" } }, - "stable": { - "version": "0.1.8", - "resolved": "https://registry.npmjs.org/stable/-/stable-0.1.8.tgz", - "integrity": "sha512-ji9qxRnOVfcuLDySj9qzhGSEFVobyt1kIOSkj1qZzYLzq7Tos/oUUWvotUPQLlrsidqsK6tBH89Bc9kL5zHA6w==", - "dev": true - }, "stack-trace": { "version": "0.0.10", "resolved": "https://registry.npmjs.org/stack-trace/-/stack-trace-0.0.10.tgz", @@ -20964,14 +20368,6 @@ "requires": { "commander": "^2.2.0", "limiter": "^1.0.5" - }, - "dependencies": { - "commander": { - "version": "2.20.3", - "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz", - "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==", - "dev": true - } } }, "streamroller": { @@ -21100,6 +20496,12 @@ "integrity": "sha1-u0P/VZim6wXYm1n80SnJgzE2Br8=", "dev": true }, + "strip-final-newline": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/strip-final-newline/-/strip-final-newline-2.0.0.tgz", + "integrity": "sha512-BrpvfNAE3dcvq7ll3xVumzjKjZQ5tI1sEUIKr3Uoks0XUl45St3FlatVqef9prk4jRDzhW6WZg+3bk93y6pLjA==", + "dev": true + }, "strip-indent": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/strip-indent/-/strip-indent-1.0.1.tgz", @@ -21124,28 +20526,12 @@ "escape-string-regexp": "^1.0.2" } }, - "style-loader": { - "version": "3.2.1", - "resolved": "https://registry.npmjs.org/style-loader/-/style-loader-3.2.1.tgz", - "integrity": "sha512-1k9ZosJCRFaRbY6hH49JFlRB0fVSbmnyq1iTPjNxUmGVjBNEmwrrHPenhlp+Lgo51BojHSf6pl2FcqYaN3PfVg==", - "dev": true - }, "style-search": { "version": "0.1.0", "resolved": "https://registry.npmjs.org/style-search/-/style-search-0.1.0.tgz", "integrity": "sha1-eVjHk+R+MuB9K1yv5cC/jhLneQI=", "dev": true }, - "stylehacks": { - "version": "5.0.1", - "resolved": "https://registry.npmjs.org/stylehacks/-/stylehacks-5.0.1.tgz", - "integrity": "sha512-Es0rVnHIqbWzveU1b24kbw92HsebBepxfcqe5iix7t9j0PQqhs0IxXVXv0pY2Bxa08CgMkzD6OWql7kbGOuEdA==", - "dev": true, - "requires": { - "browserslist": "^4.16.0", - "postcss-selector-parser": "^6.0.4" - } - }, "stylelint": { "version": "13.13.1", "resolved": "https://registry.npmjs.org/stylelint/-/stylelint-13.13.1.tgz", @@ -21533,19 +20919,13 @@ "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.18.1.tgz", "integrity": "sha512-OIAYXk8+ISY+qTOwkHtKqzAuxchoMiD9Udx+FSGQDuiRR+PJKJHc2NJAXlbhkGwTt/4/nKZxELY1w3ReWOL8mw==", "dev": true - }, - "yargs-parser": { - "version": "20.2.9", - "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-20.2.9.tgz", - "integrity": "sha512-y11nGElTIV+CT3Zv9t7VKl+Q3hTQoT9a1Qzezhhl6Rp21gJ/IVTW7Z3y9EWXhuUBC2Shnf+DX0antecpAwSP8w==", - "dev": true } } }, "stylelint-scss": { - "version": "3.19.0", - "resolved": "https://registry.npmjs.org/stylelint-scss/-/stylelint-scss-3.19.0.tgz", - "integrity": "sha512-Ic5bsmpS4wVucOw44doC1Yi9f5qbeVL4wPFiEOaUElgsOuLEN6Ofn/krKI8BeNL2gAn53Zu+IcVV4E345r6rBw==", + "version": "3.21.0", + "resolved": "https://registry.npmjs.org/stylelint-scss/-/stylelint-scss-3.21.0.tgz", + "integrity": "sha512-CMI2wSHL+XVlNExpauy/+DbUcB/oUZLARDtMIXkpV/5yd8nthzylYd1cdHeDMJVBXeYHldsnebUX6MoV5zPW4A==", "dev": true, "requires": { "lodash": "^4.17.15", @@ -21556,12 +20936,12 @@ } }, "stylus": { - "version": "0.54.8", - "resolved": "https://registry.npmjs.org/stylus/-/stylus-0.54.8.tgz", - "integrity": "sha512-vr54Or4BZ7pJafo2mpf0ZcwA74rpuYCZbxrHBsH8kbcXOwSfvBFwsRfpGO5OD5fhG5HDCFW737PKaawI7OqEAg==", + "version": "0.55.0", + "resolved": "https://registry.npmjs.org/stylus/-/stylus-0.55.0.tgz", + "integrity": "sha512-MuzIIVRSbc8XxHH7FjkvWqkIcr1BvoMZoR/oFuAJDlh7VSaNJzrB4uJ38GRQa+mWjLXODAMzeDe0xi9GYbGwnw==", "dev": true, "requires": { - "css-parse": "~2.0.0", + "css": "^3.0.0", "debug": "~3.1.0", "glob": "^7.1.6", "mkdirp": "~1.0.4", @@ -21581,9 +20961,9 @@ } }, "glob": { - "version": "7.1.7", - "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.7.tgz", - "integrity": "sha512-OvD9ENzPLbegENnYP5UUfJIirTg4+XwMWGaQfQTY0JenxNvvIKP3U3/tAQSPIu/lHxXYSZmpXlUHeqAIdKzBLQ==", + "version": "7.2.0", + "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.0.tgz", + "integrity": "sha512-lmLf6gtyrPq8tTjSmrO94wBeQbFR3HbLHbuyD69wuyQkImp2hWqMGB47OX65FBkPffO641IP9jWa1z4ivqG26Q==", "dev": true, "requires": { "fs.realpath": "^1.0.0", @@ -21621,12 +21001,12 @@ } }, "stylus-loader": { - "version": "6.1.0", - "resolved": "https://registry.npmjs.org/stylus-loader/-/stylus-loader-6.1.0.tgz", - "integrity": "sha512-qKO34QCsOtSJrXxQQmXsPeaVHh6hMumBAFIoJTcsSr2VzrA6o/CW9HCGR8spCjzJhN8oKQHdj/Ytx0wwXyElkw==", + "version": "6.2.0", + "resolved": "https://registry.npmjs.org/stylus-loader/-/stylus-loader-6.2.0.tgz", + "integrity": "sha512-5dsDc7qVQGRoc6pvCL20eYgRUxepZ9FpeK28XhdXaIPP6kXr6nI1zAAKFQgP5OBkOfKaURp4WUpJzspg1f01Gg==", "dev": true, "requires": { - "fast-glob": "^3.2.5", + "fast-glob": "^3.2.7", "klona": "^2.0.4", "normalize-path": "^3.0.0" } @@ -21698,72 +21078,6 @@ "integrity": "sha1-WPcc7jvVGbWdSyqEO2x95krAR2Q=", "dev": true }, - "svgo": { - "version": "2.3.1", - "resolved": "https://registry.npmjs.org/svgo/-/svgo-2.3.1.tgz", - "integrity": "sha512-riDDIQgXpEnn0BEl9Gvhh1LNLIyiusSpt64IR8upJu7MwxnzetmF/Y57pXQD2NMX2lVyMRzXt5f2M5rO4wG7Dw==", - "dev": true, - "requires": { - "@trysound/sax": "0.1.1", - "chalk": "^4.1.0", - "commander": "^7.1.0", - "css-select": "^4.1.3", - "css-tree": "^1.1.2", - "csso": "^4.2.0", - "stable": "^0.1.8" - }, - "dependencies": { - "ansi-styles": { - "version": "4.3.0", - "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz", - "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==", - "dev": true, - "requires": { - "color-convert": "^2.0.1" - } - }, - "chalk": { - "version": "4.1.1", - "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.1.tgz", - "integrity": "sha512-diHzdDKxcU+bAsUboHLPEDQiw0qEe0qd7SYUn3HgcFlWgbDcfLGswOHYeGrHKzG9z6UYf01d9VFMfZxPM1xZSg==", - "dev": true, - "requires": { - "ansi-styles": "^4.1.0", - "supports-color": "^7.1.0" - } - }, - "color-convert": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", - "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==", - "dev": true, - "requires": { - "color-name": "~1.1.4" - } - }, - "color-name": { - "version": "1.1.4", - "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz", - "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==", - "dev": true - }, - "has-flag": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz", - "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==", - "dev": true - }, - "supports-color": { - "version": "7.2.0", - "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz", - "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==", - "dev": true, - "requires": { - "has-flag": "^4.0.0" - } - } - } - }, "symbol-observable": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/symbol-observable/-/symbol-observable-4.0.0.tgz", @@ -21785,15 +21099,15 @@ } }, "tapable": { - "version": "2.2.0", - "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.2.0.tgz", - "integrity": "sha512-FBk4IesMV1rBxX2tfiK8RAmogtWn53puLOQlvO8XuwlgxcYbP4mVPS9Ph4aeamSyyVjOl24aYWAuc8U5kCVwMw==", + "version": "2.2.1", + "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.2.1.tgz", + "integrity": "sha512-GNzQvQTOIP6RyTfE2Qxb8ZVlNmw0n88vp1szwWRimP02mnTsx3Wtn5qRdqY9w2XduFNUgvOwhNnQsjwCp+kqaQ==", "dev": true }, "tar": { - "version": "6.1.0", - "resolved": "https://registry.npmjs.org/tar/-/tar-6.1.0.tgz", - "integrity": "sha512-DUCttfhsnLCjwoDoFcI+B2iJgYa93vBnDUATYEeRx6sntCTdN01VnqsIuTlALXla/LWooNg0yEGeB+Y8WdFxGA==", + "version": "6.1.11", + "resolved": "https://registry.npmjs.org/tar/-/tar-6.1.11.tgz", + "integrity": "sha512-an/KZQzQUkZCkuoAA64hM92X0Urb6VpRhAFllDzz44U2mcD5scmT3zBc4VgVpkugF580+DQn8eAFSyoQt0tznA==", "dev": true, "requires": { "chownr": "^2.0.0", @@ -21870,22 +21184,16 @@ "dev": true }, "terser": { - "version": "5.7.1", - "resolved": "https://registry.npmjs.org/terser/-/terser-5.7.1.tgz", - "integrity": "sha512-b3e+d5JbHAe/JSjwsC3Zn55wsBIM7AsHLjKxT31kGCldgbpFePaFo+PiddtO6uwRZWRw7sPXmAN8dTW61xmnSg==", + "version": "5.9.0", + "resolved": "https://registry.npmjs.org/terser/-/terser-5.9.0.tgz", + "integrity": "sha512-h5hxa23sCdpzcye/7b8YqbE5OwKca/ni0RQz1uRX3tGh8haaGHqcuSqbGRybuAKNdntZ0mDgFNXPJ48xQ2RXKQ==", "dev": true, "requires": { "commander": "^2.20.0", "source-map": "~0.7.2", - "source-map-support": "~0.5.19" + "source-map-support": "~0.5.20" }, "dependencies": { - "commander": { - "version": "2.20.3", - "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz", - "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==", - "dev": true - }, "source-map": { "version": "0.7.3", "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.3.tgz", @@ -21895,17 +21203,17 @@ } }, "terser-webpack-plugin": { - "version": "5.1.4", - "resolved": "https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-5.1.4.tgz", - "integrity": "sha512-C2WkFwstHDhVEmsmlCxrXUtVklS+Ir1A7twrYzrDrQQOIMOaVAYykaoo/Aq1K0QRkMoY2hhvDQY1cm4jnIMFwA==", + "version": "5.2.4", + "resolved": "https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-5.2.4.tgz", + "integrity": "sha512-E2CkNMN+1cho04YpdANyRrn8CyN4yMy+WdFKZIySFZrGXZxJwJP6PMNGGc/Mcr6qygQHUUqRxnAPmi0M9f00XA==", "dev": true, "requires": { - "jest-worker": "^27.0.2", + "jest-worker": "^27.0.6", "p-limit": "^3.1.0", - "schema-utils": "^3.0.0", + "schema-utils": "^3.1.1", "serialize-javascript": "^6.0.0", "source-map": "^0.6.1", - "terser": "^5.7.0" + "terser": "^5.7.2" }, "dependencies": { "ajv": { @@ -21954,6 +21262,33 @@ } } }, + "test-exclude": { + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/test-exclude/-/test-exclude-6.0.0.tgz", + "integrity": "sha512-cAGWPIyOHU6zlmg88jwm7VRyXnMN7iV68OGAbYDk/Mh/xC/pzVPlQtY6ngoIH/5/tciuhGfvESU8GrHrcxD56w==", + "dev": true, + "requires": { + "@istanbuljs/schema": "^0.1.2", + "glob": "^7.1.4", + "minimatch": "^3.0.4" + }, + "dependencies": { + "glob": { + "version": "7.2.0", + "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.0.tgz", + "integrity": "sha512-lmLf6gtyrPq8tTjSmrO94wBeQbFR3HbLHbuyD69wuyQkImp2hWqMGB47OX65FBkPffO641IP9jWa1z4ivqG26Q==", + "dev": true, + "requires": { + "fs.realpath": "^1.0.0", + "inflight": "^1.0.4", + "inherits": "2", + "minimatch": "^3.0.4", + "once": "^1.3.0", + "path-is-absolute": "^1.0.0" + } + } + } + }, "text-table": { "version": "0.2.0", "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz", @@ -22150,12 +21485,6 @@ "next-tick": "1" } }, - "timsort": { - "version": "0.3.0", - "resolved": "https://registry.npmjs.org/timsort/-/timsort-0.3.0.tgz", - "integrity": "sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q=", - "dev": true - }, "tmp": { "version": "0.0.33", "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.0.33.tgz", @@ -22277,12 +21606,6 @@ "integrity": "sha512-L0Orpi8qGpRG//Nd+H90vFB+3iHnue1zSSGmNOOCh1GLJ7rUKVwV2HvijphGQS2UmhUZewS9VgvxYIdgr+fG1A==", "dev": true }, - "trim-newlines": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/trim-newlines/-/trim-newlines-1.0.0.tgz", - "integrity": "sha1-WIeWa7WCpFA6QetST301ARgVphM=", - "dev": true - }, "trim-repeated": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/trim-repeated/-/trim-repeated-1.0.0.tgz", @@ -22326,9 +21649,9 @@ } }, "tslib": { - "version": "2.3.0", - "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.0.tgz", - "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==" + "version": "2.3.1", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.1.tgz", + "integrity": "sha512-77EbyPPpMz+FRFRuAFlWMtmgUWGe9UOG2Z25NqCwiIjRhOf5iKGuzSe5P2w1laq+FkRy4p+PCuVkJSGkzTEKVw==" }, "tslint": { "version": "6.1.3", @@ -22478,6 +21801,12 @@ "mime-types": "~2.1.24" } }, + "typed-assert": { + "version": "1.0.8", + "resolved": "https://registry.npmjs.org/typed-assert/-/typed-assert-1.0.8.tgz", + "integrity": "sha512-5NkbXZUlmCE73Fs7gvkp1XXJWHYetPkg60QnQ2NXQmBYNFxbBr2zA8GCtaH4K2s2WhOmSlgiSTmrjrcm5tnM5g==", + "dev": true + }, "typedarray": { "version": "0.0.6", "resolved": "https://registry.npmjs.org/typedarray/-/typedarray-0.0.6.tgz", @@ -22494,25 +21823,25 @@ } }, "typedoc": { - "version": "0.21.4", - "resolved": "https://registry.npmjs.org/typedoc/-/typedoc-0.21.4.tgz", - "integrity": "sha512-slZQhvD9U0d9KacktYAyuNMMOXJRFNHy+Gd8xY2Qrqq3eTTTv3frv3N4au/cFnab9t3T5WA0Orb6QUjMc+1bDA==", + "version": "0.21.9", + "resolved": "https://registry.npmjs.org/typedoc/-/typedoc-0.21.9.tgz", + "integrity": "sha512-VRo7aII4bnYaBBM1lhw4bQFmUcDQV8m8tqgjtc7oXl87jc1Slbhfw2X5MccfcR2YnEClHDWgsiQGgNB8KJXocA==", "dev": true, "requires": { "glob": "^7.1.7", "handlebars": "^4.7.7", "lunr": "^2.3.9", - "marked": "^2.1.1", + "marked": "^3.0.2", "minimatch": "^3.0.0", "progress": "^2.0.3", - "shiki": "^0.9.3", + "shiki": "^0.9.8", "typedoc-default-themes": "^0.12.10" }, "dependencies": { "glob": { - "version": "7.1.7", - "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.7.tgz", - "integrity": "sha512-OvD9ENzPLbegENnYP5UUfJIirTg4+XwMWGaQfQTY0JenxNvvIKP3U3/tAQSPIu/lHxXYSZmpXlUHeqAIdKzBLQ==", + "version": "7.2.0", + "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.0.tgz", + "integrity": "sha512-lmLf6gtyrPq8tTjSmrO94wBeQbFR3HbLHbuyD69wuyQkImp2hWqMGB47OX65FBkPffO641IP9jWa1z4ivqG26Q==", "dev": true, "requires": { "fs.realpath": "^1.0.0", @@ -22524,9 +21853,9 @@ } }, "marked": { - "version": "2.1.3", - "resolved": "https://registry.npmjs.org/marked/-/marked-2.1.3.tgz", - "integrity": "sha512-/Q+7MGzaETqifOMWYEA7HVMaZb4XbcRfaOzcSsHZEith83KGlvaSG33u0SKu89Mj5h+T8V2hM+8O45Qc5XTgwA==", + "version": "3.0.7", + "resolved": "https://registry.npmjs.org/marked/-/marked-3.0.7.tgz", + "integrity": "sha512-ctKqbnLuNbsHbI26cfMyOlKgXGfl1orOv1AvWWDX7AkgfMOwCWvmuYc+mVLeWhQ9W6hdWVBynOs96VkcscKo0Q==", "dev": true } } @@ -22575,15 +21904,15 @@ } }, "typescript": { - "version": "4.3.5", - "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.3.5.tgz", - "integrity": "sha512-DqQgihaQ9cUrskJo9kIyW/+g0Vxsk8cDtZ52a3NGh0YNTfpUSArXSohyUGnvbPazEPLu398C0UxmKSOrPumUzA==", + "version": "4.4.4", + "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.4.4.tgz", + "integrity": "sha512-DqGhF5IKoBl8WNf8C1gu8q0xZSInh9j1kJJMqT3a94w1JzVaBU4EXOSMrz9yDqMT0xt3selp83fuFMQ0uzv6qA==", "dev": true }, "ua-parser-js": { - "version": "0.7.28", - "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-0.7.28.tgz", - "integrity": "sha512-6Gurc1n//gjp9eQNXjD9O3M/sMwVtN5S8Lv9bvOYBfKfDNiIIhqiyi01vMBO45u4zkDE420w/e0se7Vs+sIg+g==", + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-1.0.2.tgz", + "integrity": "sha512-00y/AXhx0/SsnI51fTc0rLRmafiGOM4/O+ny10Ps7f+j/b8p/ZY11ytMgznXkOVo4GQ+KwQG5UQLkLGirsACRg==", "dev": true }, "uglify-js": { @@ -22652,31 +21981,31 @@ "dev": true }, "unicode-canonical-property-names-ecmascript": { - "version": "1.0.4", - "resolved": "https://registry.npmjs.org/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-1.0.4.tgz", - "integrity": "sha512-jDrNnXWHd4oHiTZnx/ZG7gtUTVp+gCcTTKr8L0HjlwphROEW3+Him+IpvC+xcJEFegapiMZyZe02CyuOnRmbnQ==", + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-2.0.0.tgz", + "integrity": "sha512-yY5PpDlfVIU5+y/BSCxAJRBIS1Zc2dDG3Ujq+sR0U+JjUevW2JhocOF+soROYDSaAezOzOKuyyixhD6mBknSmQ==", "dev": true }, "unicode-match-property-ecmascript": { - "version": "1.0.4", - "resolved": "https://registry.npmjs.org/unicode-match-property-ecmascript/-/unicode-match-property-ecmascript-1.0.4.tgz", - "integrity": "sha512-L4Qoh15vTfntsn4P1zqnHulG0LdXgjSO035fEpdtp6YxXhMT51Q6vgM5lYdG/5X3MjS+k/Y9Xw4SFCY9IkR0rg==", + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/unicode-match-property-ecmascript/-/unicode-match-property-ecmascript-2.0.0.tgz", + "integrity": "sha512-5kaZCrbp5mmbz5ulBkDkbY0SsPOjKqVS35VpL9ulMPfSl0J0Xsm+9Evphv9CoIZFwre7aJoa94AY6seMKGVN5Q==", "dev": true, "requires": { - "unicode-canonical-property-names-ecmascript": "^1.0.4", - "unicode-property-aliases-ecmascript": "^1.0.4" + "unicode-canonical-property-names-ecmascript": "^2.0.0", + "unicode-property-aliases-ecmascript": "^2.0.0" } }, "unicode-match-property-value-ecmascript": { - "version": "1.2.0", - "resolved": "https://registry.npmjs.org/unicode-match-property-value-ecmascript/-/unicode-match-property-value-ecmascript-1.2.0.tgz", - "integrity": "sha512-wjuQHGQVofmSJv1uVISKLE5zO2rNGzM/KCYZch/QQvez7C1hUhBIuZ701fYXExuufJFMPhv2SyL8CyoIfMLbIQ==", + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/unicode-match-property-value-ecmascript/-/unicode-match-property-value-ecmascript-2.0.0.tgz", + "integrity": "sha512-7Yhkc0Ye+t4PNYzOGKedDhXbYIBe1XEQYQxOPyhcXNMJ0WCABqqj6ckydd6pWRZTHV4GuCPKdBAUiMc60tsKVw==", "dev": true }, "unicode-property-aliases-ecmascript": { - "version": "1.1.0", - "resolved": "https://registry.npmjs.org/unicode-property-aliases-ecmascript/-/unicode-property-aliases-ecmascript-1.1.0.tgz", - "integrity": "sha512-PqSoPh/pWetQ2phoj5RLiaqIk4kCNwoV3CI+LfGmWLKI3rE3kl1h59XpX2BjgDrmbxD9ARtQobPGU1SguCYuQg==", + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/unicode-property-aliases-ecmascript/-/unicode-property-aliases-ecmascript-2.0.0.tgz", + "integrity": "sha512-5Zfuy9q/DFr4tfO7ZPeVXb1aPoeQSdeFMLpYuFebehDAhbuevLs5yxSZmIFN1tP5F9Wl4IpJrYojg85/zgyZHQ==", "dev": true }, "unified": { @@ -22721,14 +22050,8 @@ }, "uniq": { "version": "1.0.1", - "resolved": "https://registry.npmjs.org/uniq/-/uniq-1.0.1.tgz", - "integrity": "sha1-sxxa6CVIRKOoKBVBzisEuGWnNP8=", - "dev": true - }, - "uniqs": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/uniqs/-/uniqs-2.0.0.tgz", - "integrity": "sha1-/+3ks2slKQaW5uFl1KWe25mOawI=", + "resolved": "https://registry.npmjs.org/uniq/-/uniq-1.0.1.tgz", + "integrity": "sha1-sxxa6CVIRKOoKBVBzisEuGWnNP8=", "dev": true }, "unique-filename": { @@ -22906,885 +22229,600 @@ "dev": true }, "has-flag": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz", - "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==", - "dev": true - }, - "import-lazy": { - "version": "2.1.0", - "resolved": "https://registry.npmjs.org/import-lazy/-/import-lazy-2.1.0.tgz", - "integrity": "sha1-BWmOPUXIjo1+nZLLBYTnfwlvPkM=", - "dev": true - }, - "supports-color": { - "version": "7.2.0", - "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz", - "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==", - "dev": true, - "requires": { - "has-flag": "^4.0.0" - } - } - } - }, - "upper-case": { - "version": "1.1.3", - "resolved": "https://registry.npmjs.org/upper-case/-/upper-case-1.1.3.tgz", - "integrity": "sha1-9rRQHC7EzdJrp4vnIilh3ndiFZg=", - "dev": true - }, - "uri-js": { - "version": "4.4.1", - "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz", - "integrity": "sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==", - "dev": true, - "requires": { - "punycode": "^2.1.0" - } - }, - "urix": { - "version": "0.1.0", - "resolved": "https://registry.npmjs.org/urix/-/urix-0.1.0.tgz", - "integrity": "sha1-2pN/emLiH+wf0Y1Js1wpNQZ6bHI=", - "dev": true - }, - "url": { - "version": "0.11.0", - "resolved": "https://registry.npmjs.org/url/-/url-0.11.0.tgz", - "integrity": "sha1-ODjpfPxgUh63PFJajlW/3Z4uKPE=", - "dev": true, - "requires": { - "punycode": "1.3.2", - "querystring": "0.2.0" - }, - "dependencies": { - "punycode": { - "version": "1.3.2", - "resolved": "https://registry.npmjs.org/punycode/-/punycode-1.3.2.tgz", - "integrity": "sha1-llOgNvt8HuQjQvIyXM7v6jkmxI0=", - "dev": true - } - } - }, - "url-parse": { - "version": "1.5.3", - "resolved": "https://registry.npmjs.org/url-parse/-/url-parse-1.5.3.tgz", - "integrity": "sha512-IIORyIQD9rvj0A4CLWsHkBBJuNqWpFQe224b6j9t/ABmquIS0qDU2pY6kl6AuOrL5OkCXHMCFNe1jBcuAggjvQ==", - "dev": true, - "requires": { - "querystringify": "^2.1.1", - "requires-port": "^1.0.0" - } - }, - "url-parse-lax": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/url-parse-lax/-/url-parse-lax-1.0.0.tgz", - "integrity": "sha1-evjzA2Rem9eaJy56FKxovAYJ2nM=", - "dev": true, - "requires": { - "prepend-http": "^1.0.1" - } - }, - "url-to-options": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/url-to-options/-/url-to-options-1.0.1.tgz", - "integrity": "sha1-FQWgOiiaSMvXpDTvuu7FBV9WM6k=", - "dev": true - }, - "use": { - "version": "3.1.1", - "resolved": "https://registry.npmjs.org/use/-/use-3.1.1.tgz", - "integrity": "sha512-cwESVXlO3url9YWlFW/TA9cshCEhtu7IKJ/p5soJ/gGpj7vbvFrAY/eIioQ6Dw23KjZhYgiIo8HOs1nQ2vr/oQ==", - "dev": true - }, - "util-deprecate": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz", - "integrity": "sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8=" - }, - "utils-merge": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/utils-merge/-/utils-merge-1.0.1.tgz", - "integrity": "sha1-n5VxD1CiZ5R7LMwSR0HBAoQn5xM=", - "dev": true - }, - "uuid": { - "version": "8.3.2", - "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz", - "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==" - }, - "v8-compile-cache": { - "version": "2.3.0", - "resolved": "https://registry.npmjs.org/v8-compile-cache/-/v8-compile-cache-2.3.0.tgz", - "integrity": "sha512-l8lCEmLcLYZh4nbunNZvQCJc5pv7+RCwa8q/LdUx8u7lsWvPDKmpodJAJNwkAhJC//dFY48KuIEmjtd4RViDrA==", - "dev": true - }, - "v8flags": { - "version": "3.2.0", - "resolved": "https://registry.npmjs.org/v8flags/-/v8flags-3.2.0.tgz", - "integrity": "sha512-mH8etigqMfiGWdeXpaaqGfs6BndypxusHHcv2qSHyZkGEznCd/qAXCWWRzeowtL54147cktFOC4P5y+kl8d8Jg==", - "dev": true, - "requires": { - "homedir-polyfill": "^1.0.1" - } - }, - "validate-npm-package-license": { - "version": "3.0.4", - "resolved": "https://registry.npmjs.org/validate-npm-package-license/-/validate-npm-package-license-3.0.4.tgz", - "integrity": "sha512-DpKm2Ui/xN7/HQKCtpZxoRWBhZ9Z0kqtygG8XCgNQ8ZlDnxuQmWhj566j8fN4Cu3/JmbhsDo7fcAJq4s9h27Ew==", - "dev": true, - "requires": { - "spdx-correct": "^3.0.0", - "spdx-expression-parse": "^3.0.0" - } - }, - "validate-npm-package-name": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/validate-npm-package-name/-/validate-npm-package-name-3.0.0.tgz", - "integrity": "sha1-X6kS2B630MdK/BQN5zF/DKffQ34=", - "dev": true, - "requires": { - "builtins": "^1.0.3" - } - }, - "value-or-function": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/value-or-function/-/value-or-function-3.0.0.tgz", - "integrity": "sha1-HCQ6ULWVwb5Up1S/7OhWO5/42BM=", - "dev": true - }, - "vary": { - "version": "1.1.2", - "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz", - "integrity": "sha1-IpnwLG3tMNSllhsLn3RSShj2NPw=", - "dev": true - }, - "vendors": { - "version": "1.0.4", - "resolved": "https://registry.npmjs.org/vendors/-/vendors-1.0.4.tgz", - "integrity": "sha512-/juG65kTL4Cy2su4P8HjtkTxk6VmJDiOPBufWniqQ6wknac6jNiXS9vU+hO3wgusiyqWlzTbVHi0dyJqRONg3w==", - "dev": true - }, - "verror": { - "version": "1.10.0", - "resolved": "https://registry.npmjs.org/verror/-/verror-1.10.0.tgz", - "integrity": "sha1-OhBcoXBTr1XW4nDB+CiGguGNpAA=", - "dev": true, - "requires": { - "assert-plus": "^1.0.0", - "core-util-is": "1.0.2", - "extsprintf": "^1.2.0" - } - }, - "vfile": { - "version": "4.2.1", - "resolved": "https://registry.npmjs.org/vfile/-/vfile-4.2.1.tgz", - "integrity": "sha512-O6AE4OskCG5S1emQ/4gl8zK586RqA3srz3nfK/Viy0UPToBc5Trp9BVFb1u0CjsKrAWwnpr4ifM/KBXPWwJbCA==", - "dev": true, - "requires": { - "@types/unist": "^2.0.0", - "is-buffer": "^2.0.0", - "unist-util-stringify-position": "^2.0.0", - "vfile-message": "^2.0.0" - }, - "dependencies": { - "is-buffer": { - "version": "2.0.5", - "resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-2.0.5.tgz", - "integrity": "sha512-i2R6zNFDwgEHJyQUtJEk0XFi1i0dPFn/oqjK3/vPCcDeJvW5NQ83V8QbicfF1SupOaB0h8ntgBC2YiE7dfyctQ==", - "dev": true - } - } - }, - "vfile-message": { - "version": "2.0.4", - "resolved": "https://registry.npmjs.org/vfile-message/-/vfile-message-2.0.4.tgz", - "integrity": "sha512-DjssxRGkMvifUOJre00juHoP9DPWuzjxKuMDrhNbk2TdaYYBNMStsNhEOt3idrtI12VQYM/1+iM0KOzXi4pxwQ==", - "dev": true, - "requires": { - "@types/unist": "^2.0.0", - "unist-util-stringify-position": "^2.0.0" - } - }, - "vinyl": { - "version": "2.2.1", - "resolved": "https://registry.npmjs.org/vinyl/-/vinyl-2.2.1.tgz", - "integrity": "sha512-LII3bXRFBZLlezoG5FfZVcXflZgWP/4dCwKtxd5ky9+LOtM4CS3bIRQsmR1KMnMW07jpE8fqR2lcxPZ+8sJIcw==", - "dev": true, - "requires": { - "clone": "^2.1.1", - "clone-buffer": "^1.0.0", - "clone-stats": "^1.0.0", - "cloneable-readable": "^1.0.0", - "remove-trailing-separator": "^1.0.1", - "replace-ext": "^1.0.0" - }, - "dependencies": { - "clone": { - "version": "2.1.2", - "resolved": "https://registry.npmjs.org/clone/-/clone-2.1.2.tgz", - "integrity": "sha1-G39Ln1kfHo+DZwQBYANFoCiHQ18=", - "dev": true - } - } - }, - "vinyl-fs": { - "version": "3.0.3", - "resolved": "https://registry.npmjs.org/vinyl-fs/-/vinyl-fs-3.0.3.tgz", - "integrity": "sha512-vIu34EkyNyJxmP0jscNzWBSygh7VWhqun6RmqVfXePrOwi9lhvRs//dOaGOTRUQr4tx7/zd26Tk5WeSVZitgng==", - "dev": true, - "requires": { - "fs-mkdirp-stream": "^1.0.0", - "glob-stream": "^6.1.0", - "graceful-fs": "^4.0.0", - "is-valid-glob": "^1.0.0", - "lazystream": "^1.0.0", - "lead": "^1.0.0", - "object.assign": "^4.0.4", - "pumpify": "^1.3.5", - "readable-stream": "^2.3.3", - "remove-bom-buffer": "^3.0.0", - "remove-bom-stream": "^1.2.0", - "resolve-options": "^1.1.0", - "through2": "^2.0.0", - "to-through": "^2.0.0", - "value-or-function": "^3.0.0", - "vinyl": "^2.0.0", - "vinyl-sourcemap": "^1.1.0" - } - }, - "vinyl-source-stream": { - "version": "1.1.2", - "resolved": "https://registry.npmjs.org/vinyl-source-stream/-/vinyl-source-stream-1.1.2.tgz", - "integrity": "sha1-YrU6E1YQqJbpjKlr7jqH8Aio54A=", - "dev": true, - "requires": { - "through2": "^2.0.3", - "vinyl": "^0.4.3" - }, - "dependencies": { - "clone": { - "version": "0.2.0", - "resolved": "https://registry.npmjs.org/clone/-/clone-0.2.0.tgz", - "integrity": "sha1-xhJqkK1Pctv1rNskPMN3JP6T/B8=", + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz", + "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==", "dev": true }, - "clone-stats": { - "version": "0.0.1", - "resolved": "https://registry.npmjs.org/clone-stats/-/clone-stats-0.0.1.tgz", - "integrity": "sha1-uI+UqCzzi4eR1YBG6kAprYjKmdE=", + "import-lazy": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/import-lazy/-/import-lazy-2.1.0.tgz", + "integrity": "sha1-BWmOPUXIjo1+nZLLBYTnfwlvPkM=", "dev": true }, - "vinyl": { - "version": "0.4.6", - "resolved": "https://registry.npmjs.org/vinyl/-/vinyl-0.4.6.tgz", - "integrity": "sha1-LzVsh6VQolVGHza76ypbqL94SEc=", + "supports-color": { + "version": "7.2.0", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz", + "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==", "dev": true, "requires": { - "clone": "^0.2.0", - "clone-stats": "^0.0.1" + "has-flag": "^4.0.0" } } } }, - "vinyl-sourcemap": { - "version": "1.1.0", - "resolved": "https://registry.npmjs.org/vinyl-sourcemap/-/vinyl-sourcemap-1.1.0.tgz", - "integrity": "sha1-kqgAWTo4cDqM2xHYswCtS+Y7PhY=", + "upper-case": { + "version": "1.1.3", + "resolved": "https://registry.npmjs.org/upper-case/-/upper-case-1.1.3.tgz", + "integrity": "sha1-9rRQHC7EzdJrp4vnIilh3ndiFZg=", + "dev": true + }, + "uri-js": { + "version": "4.4.1", + "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz", + "integrity": "sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==", "dev": true, "requires": { - "append-buffer": "^1.0.2", - "convert-source-map": "^1.5.0", - "graceful-fs": "^4.1.6", - "normalize-path": "^2.1.1", - "now-and-later": "^2.0.0", - "remove-bom-buffer": "^3.0.0", - "vinyl": "^2.0.0" - }, - "dependencies": { - "normalize-path": { - "version": "2.1.1", - "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-2.1.1.tgz", - "integrity": "sha1-GrKLVW4Zg2Oowab35vogE3/mrtk=", - "dev": true, - "requires": { - "remove-trailing-separator": "^1.0.1" - } - } + "punycode": "^2.1.0" } }, - "vinyl-sourcemaps-apply": { - "version": "0.2.1", - "resolved": "https://registry.npmjs.org/vinyl-sourcemaps-apply/-/vinyl-sourcemaps-apply-0.2.1.tgz", - "integrity": "sha1-q2VJ1h0XLCsbh75cUI0jnI74dwU=", + "urix": { + "version": "0.1.0", + "resolved": "https://registry.npmjs.org/urix/-/urix-0.1.0.tgz", + "integrity": "sha1-2pN/emLiH+wf0Y1Js1wpNQZ6bHI=", + "dev": true + }, + "url": { + "version": "0.11.0", + "resolved": "https://registry.npmjs.org/url/-/url-0.11.0.tgz", + "integrity": "sha1-ODjpfPxgUh63PFJajlW/3Z4uKPE=", "dev": true, "requires": { - "source-map": "^0.5.1" + "punycode": "1.3.2", + "querystring": "0.2.0" }, "dependencies": { - "source-map": { - "version": "0.5.7", - "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz", - "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=", + "punycode": { + "version": "1.3.2", + "resolved": "https://registry.npmjs.org/punycode/-/punycode-1.3.2.tgz", + "integrity": "sha1-llOgNvt8HuQjQvIyXM7v6jkmxI0=", "dev": true } } }, - "vinyl-string": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/vinyl-string/-/vinyl-string-1.0.2.tgz", - "integrity": "sha1-OiSe/rDTbEywpeWeMNaOVPc52OM=", + "url-parse-lax": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/url-parse-lax/-/url-parse-lax-1.0.0.tgz", + "integrity": "sha1-evjzA2Rem9eaJy56FKxovAYJ2nM=", "dev": true, "requires": { - "vinyl": "^1.1.1" - }, - "dependencies": { - "clone-stats": { - "version": "0.0.1", - "resolved": "https://registry.npmjs.org/clone-stats/-/clone-stats-0.0.1.tgz", - "integrity": "sha1-uI+UqCzzi4eR1YBG6kAprYjKmdE=", - "dev": true - }, - "replace-ext": { - "version": "0.0.1", - "resolved": "https://registry.npmjs.org/replace-ext/-/replace-ext-0.0.1.tgz", - "integrity": "sha1-KbvZIHinOfC8zitO5B6DeVNSKSQ=", - "dev": true - }, - "vinyl": { - "version": "1.2.0", - "resolved": "https://registry.npmjs.org/vinyl/-/vinyl-1.2.0.tgz", - "integrity": "sha1-XIgDbPVl5d8FVYv8kR+GVt8hiIQ=", - "dev": true, - "requires": { - "clone": "^1.0.0", - "clone-stats": "^0.0.1", - "replace-ext": "0.0.1" - } - } + "prepend-http": "^1.0.1" } }, - "void-elements": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/void-elements/-/void-elements-2.0.1.tgz", - "integrity": "sha1-wGavtYK7HLQSjWDqkjkulNXp2+w=", + "url-to-options": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/url-to-options/-/url-to-options-1.0.1.tgz", + "integrity": "sha1-FQWgOiiaSMvXpDTvuu7FBV9WM6k=", "dev": true }, - "vscode-textmate": { - "version": "5.2.0", - "resolved": "https://registry.npmjs.org/vscode-textmate/-/vscode-textmate-5.2.0.tgz", - "integrity": "sha512-Uw5ooOQxRASHgu6C7GVvUxisKXfSgW4oFlO+aa+PAkgmH89O3CXxEEzNRNtHSqtXFTl0nAC1uYj0GMSH27uwtQ==", + "use": { + "version": "3.1.1", + "resolved": "https://registry.npmjs.org/use/-/use-3.1.1.tgz", + "integrity": "sha512-cwESVXlO3url9YWlFW/TA9cshCEhtu7IKJ/p5soJ/gGpj7vbvFrAY/eIioQ6Dw23KjZhYgiIo8HOs1nQ2vr/oQ==", "dev": true }, - "watchpack": { - "version": "2.2.0", - "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.2.0.tgz", - "integrity": "sha512-up4YAn/XHgZHIxFBVCdlMiWDj6WaLKpwVeGQk2I5thdYxF/KmF0aaz6TfJZ/hfl1h/XlcDr7k1KH7ThDagpFaA==", - "dev": true, - "requires": { - "glob-to-regexp": "^0.4.1", - "graceful-fs": "^4.1.2" - } - }, - "wbuf": { - "version": "1.7.3", - "resolved": "https://registry.npmjs.org/wbuf/-/wbuf-1.7.3.tgz", - "integrity": "sha512-O84QOnr0icsbFGLS0O3bI5FswxzRr8/gHwWkDlQFskhSPryQXvrTMxjxGP4+iWYoauLoBvfDpkrOauZ+0iZpDA==", - "dev": true, - "requires": { - "minimalistic-assert": "^1.0.0" - } + "util-deprecate": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz", + "integrity": "sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8=" }, - "wcwidth": { + "utils-merge": { "version": "1.0.1", - "resolved": "https://registry.npmjs.org/wcwidth/-/wcwidth-1.0.1.tgz", - "integrity": "sha1-8LDc+RW8X/FSivrbLA4XtTLaL+g=", + "resolved": "https://registry.npmjs.org/utils-merge/-/utils-merge-1.0.1.tgz", + "integrity": "sha1-n5VxD1CiZ5R7LMwSR0HBAoQn5xM=", + "dev": true + }, + "uuid": { + "version": "8.3.2", + "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz", + "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==" + }, + "v8-compile-cache": { + "version": "2.3.0", + "resolved": "https://registry.npmjs.org/v8-compile-cache/-/v8-compile-cache-2.3.0.tgz", + "integrity": "sha512-l8lCEmLcLYZh4nbunNZvQCJc5pv7+RCwa8q/LdUx8u7lsWvPDKmpodJAJNwkAhJC//dFY48KuIEmjtd4RViDrA==", + "dev": true + }, + "v8flags": { + "version": "3.2.0", + "resolved": "https://registry.npmjs.org/v8flags/-/v8flags-3.2.0.tgz", + "integrity": "sha512-mH8etigqMfiGWdeXpaaqGfs6BndypxusHHcv2qSHyZkGEznCd/qAXCWWRzeowtL54147cktFOC4P5y+kl8d8Jg==", "dev": true, "requires": { - "defaults": "^1.0.3" + "homedir-polyfill": "^1.0.1" } }, - "web-animations-js": { - "version": "2.3.2", - "resolved": "https://registry.npmjs.org/web-animations-js/-/web-animations-js-2.3.2.tgz", - "integrity": "sha512-TOMFWtQdxzjWp8qx4DAraTWTsdhxVSiWa6NkPFSaPtZ1diKUxTn4yTix73A1euG1WbSOMMPcY51cnjTIHrGtDA==" - }, - "webdriver-js-extender": { - "version": "2.1.0", - "resolved": "https://registry.npmjs.org/webdriver-js-extender/-/webdriver-js-extender-2.1.0.tgz", - "integrity": "sha512-lcUKrjbBfCK6MNsh7xaY2UAUmZwe+/ib03AjVOpFobX4O7+83BUveSrLfU0Qsyb1DaKJdQRbuU+kM9aZ6QUhiQ==", + "validate-npm-package-license": { + "version": "3.0.4", + "resolved": "https://registry.npmjs.org/validate-npm-package-license/-/validate-npm-package-license-3.0.4.tgz", + "integrity": "sha512-DpKm2Ui/xN7/HQKCtpZxoRWBhZ9Z0kqtygG8XCgNQ8ZlDnxuQmWhj566j8fN4Cu3/JmbhsDo7fcAJq4s9h27Ew==", "dev": true, "requires": { - "@types/selenium-webdriver": "^3.0.0", - "selenium-webdriver": "^3.0.1" + "spdx-correct": "^3.0.0", + "spdx-expression-parse": "^3.0.0" } }, - "webpack": { - "version": "5.47.1", - "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.47.1.tgz", - "integrity": "sha512-cW+Mzy9SCDapFV4OrkHuP6EFV2mAsiQd+gOa3PKtHNoKg6qPqQXZzBlHH+CnQG1osplBCqwsJZ8CfGO6XWah0g==", + "validate-npm-package-name": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/validate-npm-package-name/-/validate-npm-package-name-3.0.0.tgz", + "integrity": "sha1-X6kS2B630MdK/BQN5zF/DKffQ34=", "dev": true, "requires": { - "@types/eslint-scope": "^3.7.0", - "@types/estree": "^0.0.50", - "@webassemblyjs/ast": "1.11.1", - "@webassemblyjs/wasm-edit": "1.11.1", - "@webassemblyjs/wasm-parser": "1.11.1", - "acorn": "^8.4.1", - "browserslist": "^4.14.5", - "chrome-trace-event": "^1.0.2", - "enhanced-resolve": "^5.8.0", - "es-module-lexer": "^0.7.1", - "eslint-scope": "5.1.1", - "events": "^3.2.0", - "glob-to-regexp": "^0.4.1", - "graceful-fs": "^4.2.4", - "json-parse-better-errors": "^1.0.2", - "loader-runner": "^4.2.0", - "mime-types": "^2.1.27", - "neo-async": "^2.6.2", - "schema-utils": "^3.1.0", - "tapable": "^2.1.1", - "terser-webpack-plugin": "^5.1.3", - "watchpack": "^2.2.0", - "webpack-sources": "^3.1.1" - }, - "dependencies": { - "@types/estree": { - "version": "0.0.50", - "resolved": "https://registry.npmjs.org/@types/estree/-/estree-0.0.50.tgz", - "integrity": "sha512-C6N5s2ZFtuZRj54k2/zyRhNDjJwwcViAM3Nbm8zjBpbqAdZ00mr0CFxvSKeO8Y/e03WVFLpQMdHYVfUd6SB+Hw==", - "dev": true - }, - "ajv": { - "version": "6.12.6", - "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz", - "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==", - "dev": true, - "requires": { - "fast-deep-equal": "^3.1.1", - "fast-json-stable-stringify": "^2.0.0", - "json-schema-traverse": "^0.4.1", - "uri-js": "^4.2.2" - } - }, - "json-schema-traverse": { - "version": "0.4.1", - "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz", - "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==", - "dev": true - }, - "schema-utils": { - "version": "3.1.1", - "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.1.1.tgz", - "integrity": "sha512-Y5PQxS4ITlC+EahLuXaY86TXfR7Dc5lw294alXOq86JAHCihAIZfqv8nNCWvaEJvaC51uN9hbLGeV0cFBdH+Fw==", - "dev": true, - "requires": { - "@types/json-schema": "^7.0.8", - "ajv": "^6.12.5", - "ajv-keywords": "^3.5.2" - } - }, - "webpack-sources": { - "version": "3.2.0", - "resolved": "https://registry.npmjs.org/webpack-sources/-/webpack-sources-3.2.0.tgz", - "integrity": "sha512-fahN08Et7P9trej8xz/Z7eRu8ltyiygEo/hnRi9KqBUs80KeDcnf96ZJo++ewWd84fEf3xSX9bp4ZS9hbw0OBw==", - "dev": true - } + "builtins": "^1.0.3" } }, - "webpack-dev-middleware": { - "version": "5.0.0", - "resolved": "https://registry.npmjs.org/webpack-dev-middleware/-/webpack-dev-middleware-5.0.0.tgz", - "integrity": "sha512-9zng2Z60pm6A98YoRcA0wSxw1EYn7B7y5owX/Tckyt9KGyULTkLtiavjaXlWqOMkM0YtqGgL3PvMOFgyFLq8vw==", + "value-or-function": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/value-or-function/-/value-or-function-3.0.0.tgz", + "integrity": "sha1-HCQ6ULWVwb5Up1S/7OhWO5/42BM=", + "dev": true + }, + "vary": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz", + "integrity": "sha1-IpnwLG3tMNSllhsLn3RSShj2NPw=", + "dev": true + }, + "verror": { + "version": "1.10.0", + "resolved": "https://registry.npmjs.org/verror/-/verror-1.10.0.tgz", + "integrity": "sha1-OhBcoXBTr1XW4nDB+CiGguGNpAA=", "dev": true, "requires": { - "colorette": "^1.2.2", - "mem": "^8.1.1", - "memfs": "^3.2.2", - "mime-types": "^2.1.31", - "range-parser": "^1.2.1", - "schema-utils": "^3.0.0" + "assert-plus": "^1.0.0", + "core-util-is": "1.0.2", + "extsprintf": "^1.2.0" + } + }, + "vfile": { + "version": "4.2.1", + "resolved": "https://registry.npmjs.org/vfile/-/vfile-4.2.1.tgz", + "integrity": "sha512-O6AE4OskCG5S1emQ/4gl8zK586RqA3srz3nfK/Viy0UPToBc5Trp9BVFb1u0CjsKrAWwnpr4ifM/KBXPWwJbCA==", + "dev": true, + "requires": { + "@types/unist": "^2.0.0", + "is-buffer": "^2.0.0", + "unist-util-stringify-position": "^2.0.0", + "vfile-message": "^2.0.0" }, "dependencies": { - "ajv": { - "version": "6.12.6", - "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz", - "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==", - "dev": true, - "requires": { - "fast-deep-equal": "^3.1.1", - "fast-json-stable-stringify": "^2.0.0", - "json-schema-traverse": "^0.4.1", - "uri-js": "^4.2.2" - } - }, - "json-schema-traverse": { - "version": "0.4.1", - "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz", - "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==", + "is-buffer": { + "version": "2.0.5", + "resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-2.0.5.tgz", + "integrity": "sha512-i2R6zNFDwgEHJyQUtJEk0XFi1i0dPFn/oqjK3/vPCcDeJvW5NQ83V8QbicfF1SupOaB0h8ntgBC2YiE7dfyctQ==", "dev": true - }, - "schema-utils": { - "version": "3.1.1", - "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.1.1.tgz", - "integrity": "sha512-Y5PQxS4ITlC+EahLuXaY86TXfR7Dc5lw294alXOq86JAHCihAIZfqv8nNCWvaEJvaC51uN9hbLGeV0cFBdH+Fw==", - "dev": true, - "requires": { - "@types/json-schema": "^7.0.8", - "ajv": "^6.12.5", - "ajv-keywords": "^3.5.2" - } } } }, - "webpack-dev-server": { - "version": "3.11.2", - "resolved": "https://registry.npmjs.org/webpack-dev-server/-/webpack-dev-server-3.11.2.tgz", - "integrity": "sha512-A80BkuHRQfCiNtGBS1EMf2ChTUs0x+B3wGDFmOeT4rmJOHhHTCH2naNxIHhmkr0/UillP4U3yeIyv1pNp+QDLQ==", + "vfile-message": { + "version": "2.0.4", + "resolved": "https://registry.npmjs.org/vfile-message/-/vfile-message-2.0.4.tgz", + "integrity": "sha512-DjssxRGkMvifUOJre00juHoP9DPWuzjxKuMDrhNbk2TdaYYBNMStsNhEOt3idrtI12VQYM/1+iM0KOzXi4pxwQ==", "dev": true, "requires": { - "ansi-html": "0.0.7", - "bonjour": "^3.5.0", - "chokidar": "^2.1.8", - "compression": "^1.7.4", - "connect-history-api-fallback": "^1.6.0", - "debug": "^4.1.1", - "del": "^4.1.1", - "express": "^4.17.1", - "html-entities": "^1.3.1", - "http-proxy-middleware": "0.19.1", - "import-local": "^2.0.0", - "internal-ip": "^4.3.0", - "ip": "^1.1.5", - "is-absolute-url": "^3.0.3", - "killable": "^1.0.1", - "loglevel": "^1.6.8", - "opn": "^5.5.0", - "p-retry": "^3.0.1", - "portfinder": "^1.0.26", - "schema-utils": "^1.0.0", - "selfsigned": "^1.10.8", - "semver": "^6.3.0", - "serve-index": "^1.9.1", - "sockjs": "^0.3.21", - "sockjs-client": "^1.5.0", - "spdy": "^4.0.2", - "strip-ansi": "^3.0.1", - "supports-color": "^6.1.0", - "url": "^0.11.0", - "webpack-dev-middleware": "^3.7.2", - "webpack-log": "^2.0.0", - "ws": "^6.2.1", - "yargs": "^13.3.2" + "@types/unist": "^2.0.0", + "unist-util-stringify-position": "^2.0.0" + } + }, + "vinyl": { + "version": "2.2.1", + "resolved": "https://registry.npmjs.org/vinyl/-/vinyl-2.2.1.tgz", + "integrity": "sha512-LII3bXRFBZLlezoG5FfZVcXflZgWP/4dCwKtxd5ky9+LOtM4CS3bIRQsmR1KMnMW07jpE8fqR2lcxPZ+8sJIcw==", + "dev": true, + "requires": { + "clone": "^2.1.1", + "clone-buffer": "^1.0.0", + "clone-stats": "^1.0.0", + "cloneable-readable": "^1.0.0", + "remove-trailing-separator": "^1.0.1", + "replace-ext": "^1.0.0" }, "dependencies": { - "ajv": { - "version": "6.12.6", - "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz", - "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==", - "dev": true, - "requires": { - "fast-deep-equal": "^3.1.1", - "fast-json-stable-stringify": "^2.0.0", - "json-schema-traverse": "^0.4.1", - "uri-js": "^4.2.2" - } - }, - "ansi-regex": { - "version": "2.1.1", - "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz", - "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8=", - "dev": true - }, - "anymatch": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-2.0.0.tgz", - "integrity": "sha512-5teOsQWABXHHBFP9y3skS5P3d/WfWXpv3FUpy+LorMrNYaT9pI4oLMQX7jzQ2KklNpGpWHzdCXTDT2Y3XGlZBw==", - "dev": true, - "requires": { - "micromatch": "^3.1.4", - "normalize-path": "^2.1.1" - }, - "dependencies": { - "normalize-path": { - "version": "2.1.1", - "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-2.1.1.tgz", - "integrity": "sha1-GrKLVW4Zg2Oowab35vogE3/mrtk=", - "dev": true, - "requires": { - "remove-trailing-separator": "^1.0.1" - } - } - } - }, - "binary-extensions": { - "version": "1.13.1", - "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-1.13.1.tgz", - "integrity": "sha512-Un7MIEDdUC5gNpcGDV97op1Ywk748MpHcFTHoYs6qnj1Z3j7I53VG3nwZhKzoBZmbdRNnb6WRdFlwl7tSDuZGw==", + "clone": { + "version": "2.1.2", + "resolved": "https://registry.npmjs.org/clone/-/clone-2.1.2.tgz", + "integrity": "sha1-G39Ln1kfHo+DZwQBYANFoCiHQ18=", + "dev": true + } + } + }, + "vinyl-fs": { + "version": "3.0.3", + "resolved": "https://registry.npmjs.org/vinyl-fs/-/vinyl-fs-3.0.3.tgz", + "integrity": "sha512-vIu34EkyNyJxmP0jscNzWBSygh7VWhqun6RmqVfXePrOwi9lhvRs//dOaGOTRUQr4tx7/zd26Tk5WeSVZitgng==", + "dev": true, + "requires": { + "fs-mkdirp-stream": "^1.0.0", + "glob-stream": "^6.1.0", + "graceful-fs": "^4.0.0", + "is-valid-glob": "^1.0.0", + "lazystream": "^1.0.0", + "lead": "^1.0.0", + "object.assign": "^4.0.4", + "pumpify": "^1.3.5", + "readable-stream": "^2.3.3", + "remove-bom-buffer": "^3.0.0", + "remove-bom-stream": "^1.2.0", + "resolve-options": "^1.1.0", + "through2": "^2.0.0", + "to-through": "^2.0.0", + "value-or-function": "^3.0.0", + "vinyl": "^2.0.0", + "vinyl-sourcemap": "^1.1.0" + } + }, + "vinyl-source-stream": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/vinyl-source-stream/-/vinyl-source-stream-1.1.2.tgz", + "integrity": "sha1-YrU6E1YQqJbpjKlr7jqH8Aio54A=", + "dev": true, + "requires": { + "through2": "^2.0.3", + "vinyl": "^0.4.3" + }, + "dependencies": { + "clone": { + "version": "0.2.0", + "resolved": "https://registry.npmjs.org/clone/-/clone-0.2.0.tgz", + "integrity": "sha1-xhJqkK1Pctv1rNskPMN3JP6T/B8=", "dev": true }, - "braces": { - "version": "2.3.2", - "resolved": "https://registry.npmjs.org/braces/-/braces-2.3.2.tgz", - "integrity": "sha512-aNdbnj9P8PjdXU4ybaWLK2IF3jc/EoDYbC7AazW6to3TRsfXxscC9UXOB5iDiEQrkyIbWp2SLQda4+QAa7nc3w==", - "dev": true, - "requires": { - "arr-flatten": "^1.1.0", - "array-unique": "^0.3.2", - "extend-shallow": "^2.0.1", - "fill-range": "^4.0.0", - "isobject": "^3.0.1", - "repeat-element": "^1.1.2", - "snapdragon": "^0.8.1", - "snapdragon-node": "^2.0.1", - "split-string": "^3.0.2", - "to-regex": "^3.0.1" - }, - "dependencies": { - "extend-shallow": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz", - "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=", - "dev": true, - "requires": { - "is-extendable": "^0.1.0" - } - } - } - }, - "chokidar": { - "version": "2.1.8", - "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-2.1.8.tgz", - "integrity": "sha512-ZmZUazfOzf0Nve7duiCKD23PFSCs4JPoYyccjUFF3aQkQadqBhfzhjkwBH2mNOG9cTBwhamM37EIsIkZw3nRgg==", - "dev": true, - "requires": { - "anymatch": "^2.0.0", - "async-each": "^1.0.1", - "braces": "^2.3.2", - "fsevents": "^1.2.7", - "glob-parent": "^3.1.0", - "inherits": "^2.0.3", - "is-binary-path": "^1.0.0", - "is-glob": "^4.0.0", - "normalize-path": "^3.0.0", - "path-is-absolute": "^1.0.0", - "readdirp": "^2.2.1", - "upath": "^1.1.1" - } - }, - "fill-range": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-4.0.0.tgz", - "integrity": "sha1-1USBHUKPmOsGpj3EAtJAPDKMOPc=", - "dev": true, - "requires": { - "extend-shallow": "^2.0.1", - "is-number": "^3.0.0", - "repeat-string": "^1.6.1", - "to-regex-range": "^2.1.0" - }, - "dependencies": { - "extend-shallow": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz", - "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=", - "dev": true, - "requires": { - "is-extendable": "^0.1.0" - } - } - } - }, - "fsevents": { - "version": "1.2.13", - "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-1.2.13.tgz", - "integrity": "sha512-oWb1Z6mkHIskLzEJ/XWX0srkpkTQ7vaopMQkyaEIoq0fmtFVxOthb8cCxeT+p3ynTdkk/RZwbgG4brR5BeWECw==", - "dev": true, - "optional": true - }, - "glob-parent": { - "version": "3.1.0", - "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-3.1.0.tgz", - "integrity": "sha1-nmr2KZ2NO9K9QEMIMr0RPfkGxa4=", - "dev": true, - "requires": { - "is-glob": "^3.1.0", - "path-dirname": "^1.0.0" - }, - "dependencies": { - "is-glob": { - "version": "3.1.0", - "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-3.1.0.tgz", - "integrity": "sha1-e6WuJCF4BKxwcHuWkiVnSGzD6Eo=", - "dev": true, - "requires": { - "is-extglob": "^2.1.0" - } - } - } - }, - "has-flag": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz", - "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=", + "clone-stats": { + "version": "0.0.1", + "resolved": "https://registry.npmjs.org/clone-stats/-/clone-stats-0.0.1.tgz", + "integrity": "sha1-uI+UqCzzi4eR1YBG6kAprYjKmdE=", "dev": true }, - "is-binary-path": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-1.0.1.tgz", - "integrity": "sha1-dfFmQrSA8YenEcgUFh/TpKdlWJg=", + "vinyl": { + "version": "0.4.6", + "resolved": "https://registry.npmjs.org/vinyl/-/vinyl-0.4.6.tgz", + "integrity": "sha1-LzVsh6VQolVGHza76ypbqL94SEc=", "dev": true, "requires": { - "binary-extensions": "^1.0.0" + "clone": "^0.2.0", + "clone-stats": "^0.0.1" } - }, - "is-number": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/is-number/-/is-number-3.0.0.tgz", - "integrity": "sha1-JP1iAaR4LPUFYcgQJ2r8fRLXEZU=", + } + } + }, + "vinyl-sourcemap": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/vinyl-sourcemap/-/vinyl-sourcemap-1.1.0.tgz", + "integrity": "sha1-kqgAWTo4cDqM2xHYswCtS+Y7PhY=", + "dev": true, + "requires": { + "append-buffer": "^1.0.2", + "convert-source-map": "^1.5.0", + "graceful-fs": "^4.1.6", + "normalize-path": "^2.1.1", + "now-and-later": "^2.0.0", + "remove-bom-buffer": "^3.0.0", + "vinyl": "^2.0.0" + }, + "dependencies": { + "normalize-path": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-2.1.1.tgz", + "integrity": "sha1-GrKLVW4Zg2Oowab35vogE3/mrtk=", "dev": true, "requires": { - "kind-of": "^3.0.2" - }, - "dependencies": { - "kind-of": { - "version": "3.2.2", - "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz", - "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=", - "dev": true, - "requires": { - "is-buffer": "^1.1.5" - } - } + "remove-trailing-separator": "^1.0.1" } - }, - "json-schema-traverse": { - "version": "0.4.1", - "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz", - "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==", + } + } + }, + "vinyl-sourcemaps-apply": { + "version": "0.2.1", + "resolved": "https://registry.npmjs.org/vinyl-sourcemaps-apply/-/vinyl-sourcemaps-apply-0.2.1.tgz", + "integrity": "sha1-q2VJ1h0XLCsbh75cUI0jnI74dwU=", + "dev": true, + "requires": { + "source-map": "^0.5.1" + }, + "dependencies": { + "source-map": { + "version": "0.5.7", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz", + "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=", + "dev": true + } + } + }, + "vinyl-string": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/vinyl-string/-/vinyl-string-1.0.2.tgz", + "integrity": "sha1-OiSe/rDTbEywpeWeMNaOVPc52OM=", + "dev": true, + "requires": { + "vinyl": "^1.1.1" + }, + "dependencies": { + "clone-stats": { + "version": "0.0.1", + "resolved": "https://registry.npmjs.org/clone-stats/-/clone-stats-0.0.1.tgz", + "integrity": "sha1-uI+UqCzzi4eR1YBG6kAprYjKmdE=", "dev": true }, - "micromatch": { - "version": "3.1.10", - "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-3.1.10.tgz", - "integrity": "sha512-MWikgl9n9M3w+bpsY3He8L+w9eF9338xRl8IAO5viDizwSzziFEyUzo2xrrloB64ADbTf8uA8vRqqttDTOmccg==", - "dev": true, - "requires": { - "arr-diff": "^4.0.0", - "array-unique": "^0.3.2", - "braces": "^2.3.1", - "define-property": "^2.0.2", - "extend-shallow": "^3.0.2", - "extglob": "^2.0.4", - "fragment-cache": "^0.2.1", - "kind-of": "^6.0.2", - "nanomatch": "^1.2.9", - "object.pick": "^1.3.0", - "regex-not": "^1.0.0", - "snapdragon": "^0.8.1", - "to-regex": "^3.0.2" - } - }, - "mime": { - "version": "2.5.2", - "resolved": "https://registry.npmjs.org/mime/-/mime-2.5.2.tgz", - "integrity": "sha512-tqkh47FzKeCPD2PUiPB6pkbMzsCasjxAfC62/Wap5qrUWcb+sFasXUC5I3gYM5iBM8v/Qpn4UK0x+j0iHyFPDg==", + "replace-ext": { + "version": "0.0.1", + "resolved": "https://registry.npmjs.org/replace-ext/-/replace-ext-0.0.1.tgz", + "integrity": "sha1-KbvZIHinOfC8zitO5B6DeVNSKSQ=", "dev": true }, - "readdirp": { - "version": "2.2.1", - "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-2.2.1.tgz", - "integrity": "sha512-1JU/8q+VgFZyxwrJ+SVIOsh+KywWGpds3NTqikiKpDMZWScmAYyKIgqkO+ARvNWJfXeXR1zxz7aHF4u4CyH6vQ==", + "vinyl": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/vinyl/-/vinyl-1.2.0.tgz", + "integrity": "sha1-XIgDbPVl5d8FVYv8kR+GVt8hiIQ=", "dev": true, "requires": { - "graceful-fs": "^4.1.11", - "micromatch": "^3.1.10", - "readable-stream": "^2.0.2" + "clone": "^1.0.0", + "clone-stats": "^0.0.1", + "replace-ext": "0.0.1" } - }, - "schema-utils": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-1.0.0.tgz", - "integrity": "sha512-i27Mic4KovM/lnGsy8whRCHhc7VicJajAjTrYg11K9zfZXnYIt4k5F+kZkwjnrhKzLic/HLU4j11mjsz2G/75g==", + } + } + }, + "void-elements": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/void-elements/-/void-elements-2.0.1.tgz", + "integrity": "sha1-wGavtYK7HLQSjWDqkjkulNXp2+w=", + "dev": true + }, + "vscode-textmate": { + "version": "5.2.0", + "resolved": "https://registry.npmjs.org/vscode-textmate/-/vscode-textmate-5.2.0.tgz", + "integrity": "sha512-Uw5ooOQxRASHgu6C7GVvUxisKXfSgW4oFlO+aa+PAkgmH89O3CXxEEzNRNtHSqtXFTl0nAC1uYj0GMSH27uwtQ==", + "dev": true + }, + "watchpack": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.2.0.tgz", + "integrity": "sha512-up4YAn/XHgZHIxFBVCdlMiWDj6WaLKpwVeGQk2I5thdYxF/KmF0aaz6TfJZ/hfl1h/XlcDr7k1KH7ThDagpFaA==", + "dev": true, + "requires": { + "glob-to-regexp": "^0.4.1", + "graceful-fs": "^4.1.2" + } + }, + "wbuf": { + "version": "1.7.3", + "resolved": "https://registry.npmjs.org/wbuf/-/wbuf-1.7.3.tgz", + "integrity": "sha512-O84QOnr0icsbFGLS0O3bI5FswxzRr8/gHwWkDlQFskhSPryQXvrTMxjxGP4+iWYoauLoBvfDpkrOauZ+0iZpDA==", + "dev": true, + "requires": { + "minimalistic-assert": "^1.0.0" + } + }, + "wcwidth": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/wcwidth/-/wcwidth-1.0.1.tgz", + "integrity": "sha1-8LDc+RW8X/FSivrbLA4XtTLaL+g=", + "dev": true, + "requires": { + "defaults": "^1.0.3" + } + }, + "webdriver-js-extender": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/webdriver-js-extender/-/webdriver-js-extender-2.1.0.tgz", + "integrity": "sha512-lcUKrjbBfCK6MNsh7xaY2UAUmZwe+/ib03AjVOpFobX4O7+83BUveSrLfU0Qsyb1DaKJdQRbuU+kM9aZ6QUhiQ==", + "dev": true, + "requires": { + "@types/selenium-webdriver": "^3.0.0", + "selenium-webdriver": "^3.0.1" + } + }, + "webpack": { + "version": "5.60.0", + "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.60.0.tgz", + "integrity": "sha512-OL5GDYi2dKxnwJPSOg2tODgzDxAffN0osgWkZaBo/l3ikCxDFP+tuJT3uF7GyBE3SDBpKML/+a8EobyWAQO3DQ==", + "dev": true, + "requires": { + "@types/eslint-scope": "^3.7.0", + "@types/estree": "^0.0.50", + "@webassemblyjs/ast": "1.11.1", + "@webassemblyjs/wasm-edit": "1.11.1", + "@webassemblyjs/wasm-parser": "1.11.1", + "acorn": "^8.4.1", + "acorn-import-assertions": "^1.7.6", + "browserslist": "^4.14.5", + "chrome-trace-event": "^1.0.2", + "enhanced-resolve": "^5.8.3", + "es-module-lexer": "^0.9.0", + "eslint-scope": "5.1.1", + "events": "^3.2.0", + "glob-to-regexp": "^0.4.1", + "graceful-fs": "^4.2.4", + "json-parse-better-errors": "^1.0.2", + "loader-runner": "^4.2.0", + "mime-types": "^2.1.27", + "neo-async": "^2.6.2", + "schema-utils": "^3.1.0", + "tapable": "^2.1.1", + "terser-webpack-plugin": "^5.1.3", + "watchpack": "^2.2.0", + "webpack-sources": "^3.2.0" + }, + "dependencies": { + "ajv": { + "version": "6.12.6", + "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz", + "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==", "dev": true, "requires": { - "ajv": "^6.1.0", - "ajv-errors": "^1.0.0", - "ajv-keywords": "^3.1.0" + "fast-deep-equal": "^3.1.1", + "fast-json-stable-stringify": "^2.0.0", + "json-schema-traverse": "^0.4.1", + "uri-js": "^4.2.2" } }, - "semver": { - "version": "6.3.0", - "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz", - "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==", + "json-schema-traverse": { + "version": "0.4.1", + "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz", + "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==", "dev": true }, - "strip-ansi": { - "version": "3.0.1", - "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz", - "integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=", + "schema-utils": { + "version": "3.1.1", + "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.1.1.tgz", + "integrity": "sha512-Y5PQxS4ITlC+EahLuXaY86TXfR7Dc5lw294alXOq86JAHCihAIZfqv8nNCWvaEJvaC51uN9hbLGeV0cFBdH+Fw==", "dev": true, "requires": { - "ansi-regex": "^2.0.0" + "@types/json-schema": "^7.0.8", + "ajv": "^6.12.5", + "ajv-keywords": "^3.5.2" } }, - "supports-color": { - "version": "6.1.0", - "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz", - "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==", + "webpack-sources": { + "version": "3.2.1", + "resolved": "https://registry.npmjs.org/webpack-sources/-/webpack-sources-3.2.1.tgz", + "integrity": "sha512-t6BMVLQ0AkjBOoRTZgqrWm7xbXMBzD+XDq2EZ96+vMfn3qKgsvdXZhbPZ4ElUOpdv4u+iiGe+w3+J75iy/bYGA==", + "dev": true + } + } + }, + "webpack-dev-middleware": { + "version": "5.2.1", + "resolved": "https://registry.npmjs.org/webpack-dev-middleware/-/webpack-dev-middleware-5.2.1.tgz", + "integrity": "sha512-Kx1X+36Rn9JaZcQMrJ7qN3PMAuKmEDD9ZISjUj3Cgq4A6PtwYsC4mpaKotSRYH3iOF6HsUa8viHKS59FlyVifQ==", + "dev": true, + "requires": { + "colorette": "^2.0.10", + "memfs": "^3.2.2", + "mime-types": "^2.1.31", + "range-parser": "^1.2.1", + "schema-utils": "^3.1.0" + }, + "dependencies": { + "ajv": { + "version": "6.12.6", + "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz", + "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==", "dev": true, "requires": { - "has-flag": "^3.0.0" + "fast-deep-equal": "^3.1.1", + "fast-json-stable-stringify": "^2.0.0", + "json-schema-traverse": "^0.4.1", + "uri-js": "^4.2.2" } }, - "to-regex-range": { - "version": "2.1.1", - "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-2.1.1.tgz", - "integrity": "sha1-fIDBe53+vlmeJzZ+DU3VWQFB2zg=", - "dev": true, - "requires": { - "is-number": "^3.0.0", - "repeat-string": "^1.6.1" - } + "colorette": { + "version": "2.0.16", + "resolved": "https://registry.npmjs.org/colorette/-/colorette-2.0.16.tgz", + "integrity": "sha512-hUewv7oMjCp+wkBv5Rm0v87eJhq4woh5rSR+42YSQJKecCqgIqNkZ6lAlQms/BwHPJA5NKMRlpxPRv0n8HQW6g==", + "dev": true + }, + "json-schema-traverse": { + "version": "0.4.1", + "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz", + "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==", + "dev": true }, - "webpack-dev-middleware": { - "version": "3.7.3", - "resolved": "https://registry.npmjs.org/webpack-dev-middleware/-/webpack-dev-middleware-3.7.3.tgz", - "integrity": "sha512-djelc/zGiz9nZj/U7PTBi2ViorGJXEWo/3ltkPbDyxCXhhEXkW0ce99falaok4TPj+AsxLiXJR0EBOb0zh9fKQ==", + "schema-utils": { + "version": "3.1.1", + "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.1.1.tgz", + "integrity": "sha512-Y5PQxS4ITlC+EahLuXaY86TXfR7Dc5lw294alXOq86JAHCihAIZfqv8nNCWvaEJvaC51uN9hbLGeV0cFBdH+Fw==", "dev": true, "requires": { - "memory-fs": "^0.4.1", - "mime": "^2.4.4", - "mkdirp": "^0.5.1", - "range-parser": "^1.2.1", - "webpack-log": "^2.0.0" + "@types/json-schema": "^7.0.8", + "ajv": "^6.12.5", + "ajv-keywords": "^3.5.2" } } } }, - "webpack-log": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/webpack-log/-/webpack-log-2.0.0.tgz", - "integrity": "sha512-cX8G2vR/85UYG59FgkoMamwHUIkSSlV3bBMRsbxVXVUk2j6NleCKjQ/WE9eYg9WY4w25O9w8wKP4rzNZFmUcUg==", + "webpack-dev-server": { + "version": "4.4.0", + "resolved": "https://registry.npmjs.org/webpack-dev-server/-/webpack-dev-server-4.4.0.tgz", + "integrity": "sha512-+S0XRIbsopVjPFjCO8I07FXYBWYqkFmuP56ucGMTs2hA/gV4q2M9xTmNo5Tg4o8ffRR+Nm3AsXnQXxKRyYovrA==", "dev": true, "requires": { - "ansi-colors": "^3.0.0", - "uuid": "^3.3.2" + "ansi-html-community": "^0.0.8", + "bonjour": "^3.5.0", + "chokidar": "^3.5.2", + "colorette": "^2.0.10", + "compression": "^1.7.4", + "connect-history-api-fallback": "^1.6.0", + "del": "^6.0.0", + "express": "^4.17.1", + "graceful-fs": "^4.2.6", + "html-entities": "^2.3.2", + "http-proxy-middleware": "^2.0.0", + "internal-ip": "^6.2.0", + "ipaddr.js": "^2.0.1", + "open": "^8.0.9", + "p-retry": "^4.5.0", + "portfinder": "^1.0.28", + "schema-utils": "^3.1.0", + "selfsigned": "^1.10.11", + "serve-index": "^1.9.1", + "sockjs": "^0.3.21", + "spdy": "^4.0.2", + "strip-ansi": "^7.0.0", + "url": "^0.11.0", + "webpack-dev-middleware": "^5.2.1", + "ws": "^8.1.0" }, "dependencies": { - "ansi-colors": { - "version": "3.2.4", - "resolved": "https://registry.npmjs.org/ansi-colors/-/ansi-colors-3.2.4.tgz", - "integrity": "sha512-hHUXGagefjN2iRrID63xckIvotOXOojhQKWIPUZ4mNUZ9nLZW+7FMNoE1lOkEhNWYsx/7ysGIuJYCiMAA9FnrA==", + "ajv": { + "version": "6.12.6", + "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz", + "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==", + "dev": true, + "requires": { + "fast-deep-equal": "^3.1.1", + "fast-json-stable-stringify": "^2.0.0", + "json-schema-traverse": "^0.4.1", + "uri-js": "^4.2.2" + } + }, + "ansi-regex": { + "version": "6.0.1", + "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.0.1.tgz", + "integrity": "sha512-n5M855fKb2SsfMIiFFoVrABHJC8QtHwVx+mHWP3QcEqBHYienj5dHSgjbxtC0WEZXYt4wcD6zrQElDPhFuZgfA==", "dev": true }, - "uuid": { - "version": "3.4.0", - "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.4.0.tgz", - "integrity": "sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==", + "colorette": { + "version": "2.0.16", + "resolved": "https://registry.npmjs.org/colorette/-/colorette-2.0.16.tgz", + "integrity": "sha512-hUewv7oMjCp+wkBv5Rm0v87eJhq4woh5rSR+42YSQJKecCqgIqNkZ6lAlQms/BwHPJA5NKMRlpxPRv0n8HQW6g==", + "dev": true + }, + "json-schema-traverse": { + "version": "0.4.1", + "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz", + "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==", "dev": true + }, + "schema-utils": { + "version": "3.1.1", + "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.1.1.tgz", + "integrity": "sha512-Y5PQxS4ITlC+EahLuXaY86TXfR7Dc5lw294alXOq86JAHCihAIZfqv8nNCWvaEJvaC51uN9hbLGeV0cFBdH+Fw==", + "dev": true, + "requires": { + "@types/json-schema": "^7.0.8", + "ajv": "^6.12.5", + "ajv-keywords": "^3.5.2" + } + }, + "strip-ansi": { + "version": "7.0.1", + "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.0.1.tgz", + "integrity": "sha512-cXNxvT8dFNRVfhVME3JAe98mkXDYN2O1l7jmcwMnOslDeESg1rF/OZMtK0nRAhiari1unG5cD4jG3rapUAkLbw==", + "dev": true, + "requires": { + "ansi-regex": "^6.0.1" + } } } }, @@ -23817,12 +22855,12 @@ } }, "webpack-subresource-integrity": { - "version": "1.5.2", - "resolved": "https://registry.npmjs.org/webpack-subresource-integrity/-/webpack-subresource-integrity-1.5.2.tgz", - "integrity": "sha512-GBWYBoyalbo5YClwWop9qe6Zclp8CIXYGIz12OPclJhIrSplDxs1Ls1JDMH8xBPPrg1T6ISaTW9Y6zOrwEiAzw==", + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/webpack-subresource-integrity/-/webpack-subresource-integrity-5.0.0.tgz", + "integrity": "sha512-x9514FpLRydO+UAQ8DY4aLtCjxmdLkuQVcDFN1kGzuusREYJ1B0rzk/iIlWiL6dnvrhEGFj2+UsdxDkP8Z4UKg==", "dev": true, "requires": { - "webpack-sources": "^1.3.0" + "typed-assert": "^1.0.8" } }, "websocket-driver": { @@ -23870,45 +22908,12 @@ "dev": true }, "wide-align": { - "version": "1.1.3", - "resolved": "https://registry.npmjs.org/wide-align/-/wide-align-1.1.3.tgz", - "integrity": "sha512-QGkOQc8XL6Bt5PwnsExKBPuMKBxnGxWWW3fU55Xt4feHozMUhdUMaBCk290qpm/wG5u/RSKzwdAC4i51YigihA==", + "version": "1.1.5", + "resolved": "https://registry.npmjs.org/wide-align/-/wide-align-1.1.5.tgz", + "integrity": "sha512-eDMORYaPNZ4sQIuuYPDHdQvf4gyCF9rEEV/yPxGfwPkRodwEgiMUUXTx/dex+Me0wxx53S+NgUHaP7y3MGlDmg==", "dev": true, "requires": { - "string-width": "^1.0.2 || 2" - }, - "dependencies": { - "ansi-regex": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-3.0.0.tgz", - "integrity": "sha1-7QMXwyIGT3lGbAKWa922Bas32Zg=", - "dev": true - }, - "is-fullwidth-code-point": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-2.0.0.tgz", - "integrity": "sha1-o7MKXE8ZkYMWeqq5O+764937ZU8=", - "dev": true - }, - "string-width": { - "version": "2.1.1", - "resolved": "https://registry.npmjs.org/string-width/-/string-width-2.1.1.tgz", - "integrity": "sha512-nOqH59deCq9SRHlxq1Aw85Jnt4w6KvLKqWVik6oA9ZklXLNIOlqg4F2yrT1MVaTjAqvVwdfeZ7w7aCvJD7ugkw==", - "dev": true, - "requires": { - "is-fullwidth-code-point": "^2.0.0", - "strip-ansi": "^4.0.0" - } - }, - "strip-ansi": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-4.0.0.tgz", - "integrity": "sha1-qEeQIusaw2iocTibY1JixQXuNo8=", - "dev": true, - "requires": { - "ansi-regex": "^3.0.0" - } - } + "string-width": "^1.0.2 || 2 || 3 || 4" } }, "widest-line": { @@ -23937,53 +22942,39 @@ "integrity": "sha1-J1hIEIkUVqQXHI0CJkQa3pDLyus=" }, "wrap-ansi": { - "version": "5.1.0", - "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-5.1.0.tgz", - "integrity": "sha512-QC1/iN/2/RPVJ5jYK8BGttj5z83LmSKmvbvrXPNCLZSEb32KKVDJDl/MOt2N01qU2H/FkzEa9PKto1BqDjtd7Q==", + "version": "7.0.0", + "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz", + "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==", "dev": true, "requires": { - "ansi-styles": "^3.2.0", - "string-width": "^3.0.0", - "strip-ansi": "^5.0.0" + "ansi-styles": "^4.0.0", + "string-width": "^4.1.0", + "strip-ansi": "^6.0.0" }, "dependencies": { - "ansi-regex": { - "version": "4.1.0", - "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-4.1.0.tgz", - "integrity": "sha512-1apePfXM1UOSqw0o9IiFAovVz9M5S1Dg+4TrDwfMewQ6p/rmMueb7tWZjQ1rx4Loy1ArBggoqGpfqqdI4rondg==", - "dev": true - }, - "emoji-regex": { - "version": "7.0.3", - "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-7.0.3.tgz", - "integrity": "sha512-CwBLREIQ7LvYFB0WyRvwhq5N5qPhc6PMjD6bYggFlI5YyDgl+0vxq5VHbMOFqLg7hfWzmu8T5Z1QofhmTIhItA==", - "dev": true - }, - "is-fullwidth-code-point": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-2.0.0.tgz", - "integrity": "sha1-o7MKXE8ZkYMWeqq5O+764937ZU8=", - "dev": true - }, - "string-width": { - "version": "3.1.0", - "resolved": "https://registry.npmjs.org/string-width/-/string-width-3.1.0.tgz", - "integrity": "sha512-vafcv6KjVZKSgz06oM/H6GDBrAtz8vdhQakGjFIvNrHA6y3HCF1CInLy+QLq8dTJPQ1b+KDUqDFctkdRW44e1w==", + "ansi-styles": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz", + "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==", "dev": true, "requires": { - "emoji-regex": "^7.0.1", - "is-fullwidth-code-point": "^2.0.0", - "strip-ansi": "^5.1.0" + "color-convert": "^2.0.1" } }, - "strip-ansi": { - "version": "5.2.0", - "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-5.2.0.tgz", - "integrity": "sha512-DuRs1gKbBqsMKIZlrffwlug8MHkcnpjs5VPmL1PAh+mA30U0DTotfDZ0d2UUsXpPmPmMMJ6W773MaA3J+lbiWA==", + "color-convert": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", + "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==", "dev": true, "requires": { - "ansi-regex": "^4.1.0" + "color-name": "~1.1.4" } + }, + "color-name": { + "version": "1.1.4", + "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz", + "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==", + "dev": true } } }, @@ -24005,13 +22996,10 @@ } }, "ws": { - "version": "6.2.2", - "resolved": "https://registry.npmjs.org/ws/-/ws-6.2.2.tgz", - "integrity": "sha512-zmhltoSR8u1cnDsD43TX59mzoMZsLKqUweyYBAIvTngR3shc0W6aOZylZmq/7hqyVxPdi+5Ud2QInblgyE72fw==", - "dev": true, - "requires": { - "async-limiter": "~1.0.0" - } + "version": "8.2.3", + "resolved": "https://registry.npmjs.org/ws/-/ws-8.2.3.tgz", + "integrity": "sha512-wBuoj1BDpC6ZQ1B7DWQBYVLphPWkm8i9Y0/3YdHjHKHiohOJ1ws+3OccDWtH+PoC9DZD5WOTrJvNbWvjS6JWaA==", + "dev": true }, "xdg-basedir": { "version": "4.0.0", @@ -24083,106 +23071,33 @@ "dev": true }, "yargs": { - "version": "13.3.2", - "resolved": "https://registry.npmjs.org/yargs/-/yargs-13.3.2.tgz", - "integrity": "sha512-AX3Zw5iPruN5ie6xGRIDgqkT+ZhnRlZMLMHAs8tg7nRruy2Nb+i5o9bwghAogtM08q1dpr2LVoS8KSTMYpWXUw==", + "version": "17.2.1", + "resolved": "https://registry.npmjs.org/yargs/-/yargs-17.2.1.tgz", + "integrity": "sha512-XfR8du6ua4K6uLGm5S6fA+FIJom/MdJcFNVY8geLlp2v8GYbOXD4EB1tPNZsRn4vBzKGMgb5DRZMeWuFc2GO8Q==", "dev": true, "requires": { - "cliui": "^5.0.0", - "find-up": "^3.0.0", - "get-caller-file": "^2.0.1", + "cliui": "^7.0.2", + "escalade": "^3.1.1", + "get-caller-file": "^2.0.5", "require-directory": "^2.1.1", - "require-main-filename": "^2.0.0", - "set-blocking": "^2.0.0", - "string-width": "^3.0.0", - "which-module": "^2.0.0", - "y18n": "^4.0.0", - "yargs-parser": "^13.1.2" + "string-width": "^4.2.0", + "y18n": "^5.0.5", + "yargs-parser": "^20.2.2" }, "dependencies": { - "ansi-regex": { - "version": "4.1.0", - "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-4.1.0.tgz", - "integrity": "sha512-1apePfXM1UOSqw0o9IiFAovVz9M5S1Dg+4TrDwfMewQ6p/rmMueb7tWZjQ1rx4Loy1ArBggoqGpfqqdI4rondg==", - "dev": true - }, - "emoji-regex": { - "version": "7.0.3", - "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-7.0.3.tgz", - "integrity": "sha512-CwBLREIQ7LvYFB0WyRvwhq5N5qPhc6PMjD6bYggFlI5YyDgl+0vxq5VHbMOFqLg7hfWzmu8T5Z1QofhmTIhItA==", - "dev": true - }, - "find-up": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/find-up/-/find-up-3.0.0.tgz", - "integrity": "sha512-1yD6RmLI1XBfxugvORwlck6f75tYL+iR0jqwsOrOxMZyGYqUuDhJ0l4AXdO1iX/FTs9cBAMEk1gWSEx1kSbylg==", - "dev": true, - "requires": { - "locate-path": "^3.0.0" - } - }, - "is-fullwidth-code-point": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-2.0.0.tgz", - "integrity": "sha1-o7MKXE8ZkYMWeqq5O+764937ZU8=", - "dev": true - }, - "locate-path": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-3.0.0.tgz", - "integrity": "sha512-7AO748wWnIhNqAuaty2ZWHkQHRSNfPVIsPIfwEOWO22AmaoVrWavlOcMR5nzTLNYvp36X220/maaRsrec1G65A==", - "dev": true, - "requires": { - "p-locate": "^3.0.0", - "path-exists": "^3.0.0" - } - }, - "p-locate": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-3.0.0.tgz", - "integrity": "sha512-x+12w/To+4GFfgJhBEpiDcLozRJGegY+Ei7/z0tSLkMmxGZNybVMSfWj9aJn8Z5Fc7dBUNJOOVgPv2H7IwulSQ==", - "dev": true, - "requires": { - "p-limit": "^2.0.0" - } - }, - "path-exists": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-3.0.0.tgz", - "integrity": "sha1-zg6+ql94yxiSXqfYENe1mwEP1RU=", + "y18n": { + "version": "5.0.8", + "resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.8.tgz", + "integrity": "sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==", "dev": true - }, - "string-width": { - "version": "3.1.0", - "resolved": "https://registry.npmjs.org/string-width/-/string-width-3.1.0.tgz", - "integrity": "sha512-vafcv6KjVZKSgz06oM/H6GDBrAtz8vdhQakGjFIvNrHA6y3HCF1CInLy+QLq8dTJPQ1b+KDUqDFctkdRW44e1w==", - "dev": true, - "requires": { - "emoji-regex": "^7.0.1", - "is-fullwidth-code-point": "^2.0.0", - "strip-ansi": "^5.1.0" - } - }, - "strip-ansi": { - "version": "5.2.0", - "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-5.2.0.tgz", - "integrity": "sha512-DuRs1gKbBqsMKIZlrffwlug8MHkcnpjs5VPmL1PAh+mA30U0DTotfDZ0d2UUsXpPmPmMMJ6W773MaA3J+lbiWA==", - "dev": true, - "requires": { - "ansi-regex": "^4.1.0" - } } } }, "yargs-parser": { - "version": "13.1.2", - "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-13.1.2.tgz", - "integrity": "sha512-3lbsNRf/j+A4QuSZfDRA7HRSfWrzO0YjqTJd5kjAq37Zep1CEgaYmrH9Q3GwPiB9cHyd1Y1UwggGhJGoxipbzg==", - "dev": true, - "requires": { - "camelcase": "^5.0.0", - "decamelize": "^1.2.0" - } + "version": "20.2.9", + "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-20.2.9.tgz", + "integrity": "sha512-y11nGElTIV+CT3Zv9t7VKl+Q3hTQoT9a1Qzezhhl6Rp21gJ/IVTW7Z3y9EWXhuUBC2Shnf+DX0antecpAwSP8w==", + "dev": true }, "yauzl": { "version": "2.10.0", diff --git a/package.json b/package.json index 465cbcdc777..95976065efe 100644 --- a/package.json +++ b/package.json @@ -4,7 +4,6 @@ "scripts": { "ng": "ng", "start": "ng serve --open --configuration hmr", - "start:es5": "ng serve --open --configuration es5", "build": "ng build", "test": "ng test igniteui-angular", "lint": "ng lint", @@ -45,70 +44,67 @@ "build:sassdoc:ja:staging": "set NODE_ENV=staging && set SASSDOC_LANG=jp && gulp sassdocBuildJA --render true", "build:i18n": "tsc --project projects/igniteui-angular-i18n/tsconfig.build.json", "lint:i18n": "eslint projects/igniteui-angular-i18n/src/**/*.ts", - "lint:i18n:dist": "eslint -c projects/igniteui-angular-i18n/.eslintrc.dist.i18n.json dist/igniteui-angular-i18n/**/*.d.ts --no-eslintrc", + "test:i18n:dist": "eslint -c projects/igniteui-angular-i18n/.eslintrc.dist.i18n.json dist/igniteui-angular-i18n/**/*.d.ts --no-eslintrc", "postinstall": "gulp copyGitHooks" }, "private": true, "dependencies": { - "@angular/animations": "^12.2.0", - "@angular/common": "^12.2.0", - "@angular/compiler": "^12.2.0", - "@angular/core": "^12.2.0", - "@angular/forms": "^12.2.0", - "@angular/platform-browser": "^12.2.0", - "@angular/platform-browser-dynamic": "^12.2.0", - "@angular/router": "^12.2.0", - "@igniteui/material-icons-extended": "^2.8.0", - "@juggle/resize-observer": "^3.3.1", + "@angular/animations": "^13.0.0", + "@angular/common": "^13.0.0", + "@angular/compiler": "^13.0.0", + "@angular/core": "^13.0.0", + "@angular/forms": "^13.0.0", + "@angular/platform-browser": "^13.0.0", + "@angular/platform-browser-dynamic": "^13.0.0", + "@angular/router": "^13.0.0", + "@igniteui/material-icons-extended": "^2.10.0", "@types/hammerjs": "^2.0.40", "@types/source-map": "0.5.2", - "classlist.js": "^1.1.20150312", - "core-js": "^2.6.11", + "core-js": "^3.19.1", "hammerjs": "^2.0.8", "igniteui-trial-watermark": "^1.0.3", - "jszip": "^3.6.0", + "jszip": "^3.7.1", "karma-parallel": "^0.3.1", "lodash.mergewith": "^4.6.2", "rxjs": "^6.6.7", "setimmediate": "^1.0.5", "tslib": "^2.3.0", "uuid": "^8.3.0", - "web-animations-js": "^2.3.2", "zone.js": "~0.11.4" }, "devDependencies": { - "@angular-devkit/build-angular": "~12.2.0", - "@angular-devkit/schematics": "^12.2.0", - "@angular-eslint/builder": "^12.2.0", - "@angular-eslint/eslint-plugin": "^12.2.0", - "@angular-eslint/eslint-plugin-template": "^12.2.0", - "@angular-eslint/schematics": "^12.3.1", - "@angular-eslint/template-parser": "^12.2.0", - "@angular/cli": "~12.2.0", - "@angular/compiler-cli": "^12.2.0", - "@angular/language-service": "^12.2.0", + "@angular-devkit/build-angular": "~13.0.1", + "@angular-devkit/schematics": "^13.0.1", + "@angular-eslint/builder": "^13.0.0-alpha.0", + "@angular-eslint/eslint-plugin": "^12.6.1", + "@angular-eslint/eslint-plugin-template": "^12.6.1", + "@angular-eslint/schematics": "^12.6.1", + "@angular-eslint/template-parser": "^12.6.1", + "@angular/cli": "~13.0.1", + "@angular/compiler-cli": "^13.0.0", + "@angular/language-service": "^13.0.0", "@angularclass/hmr": "^2.1.3", - "@types/jasmine": "^3.7.8", + "@types/jasmine": "^3.10.2", "@types/jasminewd2": "^2.0.10", - "@types/node": "^12.20.15", - "@types/webpack-env": "^1.16.2", + "@types/node": "^12.20.36", + "@types/webpack-env": "^1.16.3", "@typescript-eslint/eslint-plugin": "4.16.1", "@typescript-eslint/parser": "4.16.1", - "browser-sync": "^2.27.4", + "browser-sync": "^2.27.7", "codelyzer": "^6.0.2", "coveralls": "^3.1.1", - "eslint": "^7.30.0", + "eslint": "^7.32.0", "eslint-plugin-import": "2.22.1", "eslint-plugin-jsdoc": "30.7.6", "eslint-plugin-prefer-arrow": "1.2.2", "gulp": "^4.0.2", "gulp-cached": "^1.1.1", "gulp-concat": "^2.6.1", - "gulp-postcss": "^9.0.0", + "gulp-postcss": "^9.0.1", "gulp-sass": "^5.0.0", "gulp-shell": "^0.6.5", "gulp-sourcemaps": "^2.6.4", - "gulp-typescript": "^5.0.0-alpha.3", + "gulp-typescript": "^5.0.1", "gulp-uglify": "^3.0.1", "gulp-util": "^3.0.8", "hammer-simulator": "0.0.1", @@ -117,7 +113,7 @@ "jasmine": "~3.6.0", "jasmine-core": "~3.6.0", "jasmine-spec-reporter": "~5.0.2", - "karma": "^6.3.4", + "karma": "^6.3.7", "karma-chrome-launcher": "~3.1.0", "karma-coverage": "^2.0.3", "karma-jasmine": "~3.3.0", @@ -126,21 +122,21 @@ "karma-junit-reporter": "~2.0.1", "karma-spec-reporter": "~0.0.32", "lunr": "^2.3.8", - "ng-packagr": "^12.2.0", + "ng-packagr": "^13.0.0", "pngcrush": "^2.0.1", "protractor": "~7.0.0", - "sass": "^1.35.1", + "sass": "^1.43.4", "sass-true": "^6.0.1", "sassdoc": "^2.7.3", "sassdoc-plugin-localization": "^1.4.3", "stylelint": "^13.13.1", - "stylelint-scss": "^3.19.0", + "stylelint-scss": "^3.21.0", "themeleon": "^3.0.2", "ts-node": "~7.0.1", "tslint": "~6.1.0", - "typedoc": "^0.21.0", + "typedoc": "^0.21.9", "typedoc-plugin-localization": "^2.2.4", - "typescript": "^4.3.5", + "typescript": "^4.4.4", "webpack-sources": "1.3.0" } } diff --git a/projects/igniteui-angular-i18n/package.json b/projects/igniteui-angular-i18n/package.json index 4406028f29e..9e40304c272 100644 --- a/projects/igniteui-angular-i18n/package.json +++ b/projects/igniteui-angular-i18n/package.json @@ -6,7 +6,8 @@ "types": "./index.d.ts", "repository": { "type": "git", - "url": "https://github.com/IgniteUI/igniteui-angular" + "url": "https://github.com/IgniteUI/igniteui-angular.git", + "directory": "projects/igniteui-angular-i18n" }, "keywords": [ "IgniteUI", diff --git a/projects/igniteui-angular/karma.conf.js b/projects/igniteui-angular/karma.conf.js index 734744e9097..b3f2df9f9d4 100644 --- a/projects/igniteui-angular/karma.conf.js +++ b/projects/igniteui-angular/karma.conf.js @@ -38,6 +38,7 @@ module.exports = function (config) { }, coverageReporter: { dir: require('path').join(__dirname, '../../coverage'), + subdir: '.', reporters: [ // reporters not supporting the `file` property { type: 'html' }, diff --git a/projects/igniteui-angular/migrations/common/UpdateChanges.spec.ts b/projects/igniteui-angular/migrations/common/UpdateChanges.spec.ts index f112962531f..1e834723bdf 100644 --- a/projects/igniteui-angular/migrations/common/UpdateChanges.spec.ts +++ b/projects/igniteui-angular/migrations/common/UpdateChanges.spec.ts @@ -929,4 +929,100 @@ export class CustomGridComponent { expect(appTree.readContent('test.component.ts')).toEqual(expectedFileContent); }); }); + + // sass variable migrations + it('Should migrate sass variables names correctly', ()=> { + const themePropsJson: ThemePropertyChanges = { + changes: [ + { + name: '$light-material-palette', + replaceWith: '$igx-light-material-palette' + }, + { + name: '$light-palette', + replaceWith: '$igx-light-palette' + }, + { + name: '$dark-palette', + replaceWith: '$igx-dark-palette' + }, + { + name: '$color', + replaceWith: '$igx-color' + }, + { + name: '$elevation', + replaceWith: '$igx-elevation' + } + + ] + }; + const jsonPath = path.join(__dirname, 'changes', 'theme-props.json'); + spyOn(fs, 'existsSync').and.callFake((filePath: fs.PathLike) => { + if (filePath === jsonPath) { + return true; + } + return false; + }); + spyOn(fs, 'readFileSync').and.callFake(() => JSON.stringify(themePropsJson)); + + const fileContent = +`$palette: $light-material-palette; +$light-material-palette : $some-variable, +$palette2: $light-material-palette-primary; +$palette3: mat.define-light-theme($light-palette-primary, $elevation, $light-palette); +$palette4: $elevation; +igx-dark-theme($light-palette, $elevation); +igx-white-theme($ease-in-quad, $pick-mint: $elevation); +igx-gray-theme($quick-draw: igx-icon($elevation)); +igx-yellow-theme($some-property igx-icon($another-property, $elevation)); +$color: #3321; +$colorful: #3245; +$palette5: mat.define-light-theme($light-palette-primary, $elevation, $light-palette, $some-variable: $elevation); +$crm-grid-theme: igx-grid-theme($elevation: #f0f8fe, $header-border-color: #dde5eb); +$dark-theme-palette: igx-palette($primary: $dark-color, $secondary: $orange-color); +$dark-grid-theme: igx-grid-theme( +$palette: $dark-theme-palette, +$content-background: igx-color($dark-theme-palette, "secondary", 100), +$elevation: igx-color($dark-theme-palette, "primary", 500), +$header-text-color: igx-color($dark-theme-palette, "secondary", 600), +$cell-selected-background: igx-color($dark-theme-palette, "primary", 500), +$cell-selected-text-color: igx-color($dark-theme-palette, "secondary", 500), +$row-hover-background: igx-color($dark-theme-palette, "primary", 100), +$header-border-color: igx-color($dark-theme-palette, "primary", 600) +); +`; + appTree.create('test.component.scss', fileContent); + const expectedFileContent = +`$palette: $igx-light-material-palette; +$igx-light-material-palette : $some-variable, +$palette2: $light-material-palette-primary; +$palette3: mat.define-light-theme($light-palette-primary, $igx-elevation, $igx-light-palette); +$palette4: $igx-elevation; +igx-dark-theme($igx-light-palette, $igx-elevation); +igx-white-theme($ease-in-quad, $pick-mint: $igx-elevation); +igx-gray-theme($quick-draw: igx-icon($igx-elevation)); +igx-yellow-theme($some-property igx-icon($another-property, $igx-elevation)); +$igx-color: #3321; +$colorful: #3245; +$palette5: mat.define-light-theme($light-palette-primary, $igx-elevation, $igx-light-palette, $some-variable: $igx-elevation); +$crm-grid-theme: igx-grid-theme($elevation: #f0f8fe, $header-border-color: #dde5eb); +$dark-theme-palette: igx-palette($primary: $dark-color, $secondary: $orange-color); +$dark-grid-theme: igx-grid-theme( +$palette: $dark-theme-palette, +$content-background: igx-color($dark-theme-palette, "secondary", 100), +$elevation: igx-color($dark-theme-palette, "primary", 500), +$header-text-color: igx-color($dark-theme-palette, "secondary", 600), +$cell-selected-background: igx-color($dark-theme-palette, "primary", 500), +$cell-selected-text-color: igx-color($dark-theme-palette, "secondary", 500), +$row-hover-background: igx-color($dark-theme-palette, "primary", 100), +$header-border-color: igx-color($dark-theme-palette, "primary", 600) +); +`; + + const update = new UnitUpdateChanges(__dirname, appTree); + + update.applyChanges(); + expect(appTree.readContent('test.component.scss')).toEqual(expectedFileContent); + }); }); diff --git a/projects/igniteui-angular/migrations/common/UpdateChanges.ts b/projects/igniteui-angular/migrations/common/UpdateChanges.ts index dd44d258f27..7b2b92a8fa8 100644 --- a/projects/igniteui-angular/migrations/common/UpdateChanges.ts +++ b/projects/igniteui-angular/migrations/common/UpdateChanges.ts @@ -6,7 +6,7 @@ import { SchematicContext, Tree, FileVisitor } from '@angular-devkit/schematics' import { WorkspaceSchema } from '@schematics/angular/utility/workspace-models'; import { ClassChanges, BindingChanges, SelectorChange, - SelectorChanges, ThemePropertyChanges, ImportsChanges, MemberChanges + SelectorChanges, ThemePropertyChanges, ThemeVariableChange, ImportsChanges, MemberChanges, ThemePropertyChange } from './schema'; import { getLanguageService, getRenamePositions, getIdentifierPositions, replaceMatch, @@ -172,6 +172,7 @@ export class UpdateChanges { if (this.themePropsChanges && this.themePropsChanges.changes.length) { for (const entryPath of this.sassFiles) { this.updateThemeProps(entryPath); + this.updateSassVariables(entryPath); } } @@ -375,20 +376,21 @@ export class UpdateChanges { let fileContent = this.host.read(entryPath).toString(); let overwrite = false; for (const change of this.themePropsChanges.changes) { - if (fileContent.indexOf(change.owner) !== -1) { + const _change = change as ThemePropertyChange; + if (fileContent.indexOf(_change.owner) !== -1) { /** owner-func:( * ); */ - const searchPattern = String.raw`${change.owner}\([\s\S]+?\);`; + const searchPattern = String.raw`${_change.owner}\([\s\S]+?\);`; const matches = fileContent.match(new RegExp(searchPattern, 'g')); if (!matches) { continue; } for (const match of matches) { - if (match.indexOf(change.name) !== -1) { - const name = change.name.replace('$', '\\$'); - const replaceWith = change.replaceWith?.replace('$', '\\$'); + if (match.indexOf(_change.name) !== -1) { + const name = _change.name.replace('$', '\\$'); + const replaceWith = _change.replaceWith?.replace('$', '\\$'); const reg = new RegExp(String.raw`^\s*${name}:`); const existing = new RegExp(String.raw`${replaceWith}:`); - const opening = `${change.owner}(`; + const opening = `${_change.owner}(`; const closing = /\s*\);$/.exec(match).pop(); const body = match.substr(opening.length, match.length - opening.length - closing.length); @@ -397,8 +399,8 @@ export class UpdateChanges { if (reg.test(param)) { const duplicate = !!replaceWith && arr.some(p => existing.test(p)); - if (!change.remove && !duplicate) { - arr.push(param.replace(change.name, change.replaceWith)); + if (!_change.remove && !duplicate) { + arr.push(param.replace(_change.name, _change.replaceWith)); } } else { arr.push(param); @@ -420,6 +422,48 @@ export class UpdateChanges { } } + protected isNamedArgument(fileContent: string, i: number, occurrences: number[], change: ThemeVariableChange) { + const openingBrackets = []; + const closingBrackets = []; + if (fileContent[(occurrences[i] + change.name.length)] !== ':' + || (fileContent[(occurrences[i] + change.name.length)] === ' ' + && fileContent[(occurrences[i] + change.name.length) + 1] === ':')) { + return false; + } + for (let j = occurrences[i]; j >= 0; j--) { + if (fileContent[j] === ')') { + closingBrackets.push(fileContent[j]); + } else if (fileContent[j] === '(') { + openingBrackets.push(fileContent[j]); + } + } + + return openingBrackets.length !== closingBrackets.length; + } + + protected updateSassVariables(entryPath: string) { + let fileContent = this.host.read(entryPath).toString(); + let overwrite = false; + const allowedStartCharacters = new RegExp('(\:|\,)\s?', 'g'); + const allowedEndCharacters = new RegExp('[;),: \r\n]', 'g'); + for (const change of this.themePropsChanges.changes) { + if (!('owner' in change)) { + const occurrences = findMatches(fileContent, change.name); + for (let i = occurrences.length - 1; i >= 0; i--) { + const allowedStartEnd = fileContent[occurrences[i] - 1].match(allowedStartCharacters) + || fileContent[(occurrences[i] + change.name.length)].match(allowedEndCharacters); + if (allowedStartEnd && !this.isNamedArgument(fileContent, i, occurrences, change as ThemeVariableChange)) { + fileContent = replaceMatch(fileContent, change.name, change.replaceWith, occurrences[i]); + overwrite = true; + } + } + } + } + if (overwrite) { + this.host.overwrite(entryPath, fileContent); + } + } + protected updateImports(entryPath: string) { let fileContent = this.host.read(entryPath).toString(); let overwrite = false; diff --git a/projects/igniteui-angular/migrations/common/import-helper.js b/projects/igniteui-angular/migrations/common/import-helper.js new file mode 100644 index 00000000000..8077efbb071 --- /dev/null +++ b/projects/igniteui-angular/migrations/common/import-helper.js @@ -0,0 +1,14 @@ +"use strict"; +Object.defineProperty(exports, "__esModule", { value: true }); + +// eslint-disable + +/** + * Native Node dynamic import helper + * Only needed until TypeScript 4.5 release and `node12` options is available, see: + * https://github.com/microsoft/TypeScript/issues/43329 + */ +const nativeImport = async (name) => { + return import(name); +}; +exports.nativeImport = nativeImport; diff --git a/projects/igniteui-angular/migrations/common/schema/index.ts b/projects/igniteui-angular/migrations/common/schema/index.ts index 14923bf12b9..3195eeeb109 100644 --- a/projects/igniteui-angular/migrations/common/schema/index.ts +++ b/projects/igniteui-angular/migrations/common/schema/index.ts @@ -3,7 +3,7 @@ export interface ThemePropertyChanges { /** An array of changes to theme function properties */ - changes: ThemePropertyChange[]; + changes: (ThemePropertyChange | ThemeVariableChange)[]; } export interface ThemePropertyChange extends ChangeAction { /** Name of the theme property */ @@ -12,6 +12,11 @@ export interface ThemePropertyChange extends ChangeAction { owner: string; } +export interface ThemeVariableChange extends ChangeAction { + /** Name of the theme variable */ + name: string; +} + export interface SelectorChanges { /** An array of changes to component/directive selectors */ changes: SelectorChange[]; diff --git a/projects/igniteui-angular/migrations/common/schema/theme-props.schema.json b/projects/igniteui-angular/migrations/common/schema/theme-props.schema.json index a9149fb7454..a6d8bdfcac9 100644 --- a/projects/igniteui-angular/migrations/common/schema/theme-props.schema.json +++ b/projects/igniteui-angular/migrations/common/schema/theme-props.schema.json @@ -25,13 +25,40 @@ "owner" ], "type": "object" + }, + "ThemeVariableChange": { + "properties": { + "name": { + "description": "Name of the theme variable", + "type": "string" + }, + "remove": { + "description": "Remove directive/component/property", + "type": "boolean" + }, + "replaceWith": { + "description": "Replace original selector/property with new one", + "type": "string" + } + }, + "required": [ + "name" + ], + "type": "object" } }, "properties": { "changes": { "description": "An array of changes to theme function properties", "items": { - "$ref": "#/definitions/ThemePropertyChange" + "anyOf": [ + { + "$ref": "#/definitions/ThemePropertyChange" + }, + { + "$ref": "#/definitions/ThemeVariableChange" + } + ] }, "type": "array" } diff --git a/projects/igniteui-angular/migrations/common/tsUtils.ts b/projects/igniteui-angular/migrations/common/tsUtils.ts index a0254acf64f..a60dd6eee82 100644 --- a/projects/igniteui-angular/migrations/common/tsUtils.ts +++ b/projects/igniteui-angular/migrations/common/tsUtils.ts @@ -1,4 +1,3 @@ -// eslint-disable-next-line import/no-extraneous-dependencies import * as ts from 'typescript'; import * as tss from 'typescript/lib/tsserverlibrary'; import { Tree } from '@angular-devkit/schematics'; @@ -203,7 +202,8 @@ export const createProjectService = (serverHost: tss.server.ServerHost): tss.ser /* will load only global plug-ins */ globalPlugins: [CUSTOM_TS_PLUGIN_NAME, NG_LANG_SERVICE_PACKAGE_NAME], allowLocalPluginLoads: false, - typingsInstaller: tss.server.nullTypingsInstaller + typingsInstaller: tss.server.nullTypingsInstaller, + session: undefined }); projectService.setHostConfiguration({ formatOptions: projectService.getHostFormatCodeOptions(), diff --git a/projects/igniteui-angular/migrations/common/util.ts b/projects/igniteui-angular/migrations/common/util.ts index b174fd4235f..08380805d68 100644 --- a/projects/igniteui-angular/migrations/common/util.ts +++ b/projects/igniteui-angular/migrations/common/util.ts @@ -9,8 +9,8 @@ import { Element, Expansion, ExpansionCase, - getHtmlTagDefinition, HtmlParser, + HtmlTagDefinition, Node, Text, Visitor @@ -165,13 +165,17 @@ export class FileChange { /** * Parses an Angular template file/content and returns an array of the root nodes of the file. - * + * TODO: Maybe make async and dynamically import the HtmlParser * @param host * @param filePath * @param encoding */ -export const parseFile = (host: Tree, filePath: string, encoding = 'utf8') => - new HtmlParser().parse(host.read(filePath).toString(encoding), filePath).rootNodes; +export const parseFile = (parser: HtmlParser, host: Tree, filePath: string, encoding = 'utf8') => + parser.parse(host.read(filePath).toString(encoding), filePath).rootNodes; +// export const parseFile = async (host: Tree, filePath: string, encoding = 'utf8') => { +// const { HtmlParser } = await import('@angular/compiler') +// return new HtmlParser().parse(host.read(filePath).toString(encoding), filePath).rootNodes; +// } export const findElementNodes = (root: Node[], tag: string | string[]): Node[] => { const tags = new Set(Array.isArray(tag) ? tag : [tag]); @@ -232,8 +236,13 @@ export const flatten = (list: Node[]) => { */ class SerializerVisitor implements Visitor { + /** + * + */ + constructor(private getHtmlTagDefinition: (tagName: string) => HtmlTagDefinition) { } + public visitElement(element: Element, _context: any): any { - if (getHtmlTagDefinition(element.name).isVoid) { + if (this.getHtmlTagDefinition(element.name).isVoid) { return `<${element.name}${this._visitAll(element.attrs, ' ')}/>`; } @@ -269,7 +278,9 @@ class SerializerVisitor implements Visitor { } -export const serializeNodes = (nodes: Node[]): string[] => nodes.map(node => node.visit(new SerializerVisitor(), null)); +export const serializeNodes = (nodes: Node[], getHtmlTagDefinition: (tagName: string) => HtmlTagDefinition): string[] => { + return nodes.map(node => node.visit(new SerializerVisitor(getHtmlTagDefinition), null)) +}; export const makeNgIf = (name: string, value: string) => name.startsWith('[') && value !== 'true'; diff --git a/projects/igniteui-angular/migrations/migration-collection.json b/projects/igniteui-angular/migrations/migration-collection.json index b4206ea4131..88831dca026 100644 --- a/projects/igniteui-angular/migrations/migration-collection.json +++ b/projects/igniteui-angular/migrations/migration-collection.json @@ -107,7 +107,7 @@ "factory": "./update-12_1_0" }, "migration-22": { - "version": "13.0.0", + "version": "13.0.0-alpha", "description": "Updates Ignite UI for Angular from v12.2.x to v13.0.0", "factory": "./update-13_0_0" } diff --git a/projects/igniteui-angular/migrations/package.json b/projects/igniteui-angular/migrations/package.json new file mode 100644 index 00000000000..1cd945a3bfd --- /dev/null +++ b/projects/igniteui-angular/migrations/package.json @@ -0,0 +1,3 @@ +{ + "type": "commonjs" +} diff --git a/projects/igniteui-angular/migrations/update-10_1_0/index.ts b/projects/igniteui-angular/migrations/update-10_1_0/index.ts index c926ae744e3..1a958608bfd 100644 --- a/projects/igniteui-angular/migrations/update-10_1_0/index.ts +++ b/projects/igniteui-angular/migrations/update-10_1_0/index.ts @@ -8,7 +8,7 @@ import { getIdentifierPositions } from '../common/tsUtils'; const version = '10.1.0'; -export default (): Rule => (host: Tree, context: SchematicContext) => { +export default (): Rule => async (host: Tree, context: SchematicContext) => { context.logger.info(`Applying migration for Ignite UI for Angular to version ${version}`); const update = new UpdateChanges(__dirname, host, context); diff --git a/projects/igniteui-angular/migrations/update-10_2_0/index.ts b/projects/igniteui-angular/migrations/update-10_2_0/index.ts index ff74b598b92..1135bda1527 100644 --- a/projects/igniteui-angular/migrations/update-10_2_0/index.ts +++ b/projects/igniteui-angular/migrations/update-10_2_0/index.ts @@ -3,7 +3,7 @@ import { UpdateChanges } from '../common/UpdateChanges'; const version = '10.2.0'; -export default (): Rule => (host: Tree, context: SchematicContext) => { +export default (): Rule => async (host: Tree, context: SchematicContext) => { context.logger.info( `Applying migration for Ignite UI for Angular to version ${version}` ); diff --git a/projects/igniteui-angular/migrations/update-11_0_0/index.ts b/projects/igniteui-angular/migrations/update-11_0_0/index.ts index ba4710d351a..c1b036a8b86 100644 --- a/projects/igniteui-angular/migrations/update-11_0_0/index.ts +++ b/projects/igniteui-angular/migrations/update-11_0_0/index.ts @@ -2,13 +2,15 @@ import { Element } from '@angular/compiler'; import { Rule, SchematicContext, Tree } from '@angular-devkit/schematics'; import { UpdateChanges } from '../common/UpdateChanges'; import { FileChange, findElementNodes, getAttribute, getSourceOffset, hasAttribute, parseFile, serializeNodes } from '../common/util'; +import { nativeImport } from '../common/import-helper.js'; const version = '11.0.0'; -export default (): Rule => (host: Tree, context: SchematicContext) => { +export default (): Rule => async (host: Tree, context: SchematicContext) => { context.logger.info( `Applying migration for Ignite UI for Angular to version ${version}` ); + const { HtmlParser, getHtmlTagDefinition } = await nativeImport('@angular/compiler') as typeof import('@angular/compiler'); const update = new UpdateChanges(__dirname, host, context); @@ -55,14 +57,14 @@ export default (): Rule => (host: Tree, context: SchematicContext) => { const ngTemplates = findElementNodes([grid], ['ng-template']); const toolbarTemplate = ngTemplates.filter(template => hasAttribute(template as Element, 'igxToolbarCustomContent'))[0]; if (toolbarTemplate) { - return `${warnMsg}\n${serializeNodes((toolbarTemplate as Element).children).join('')}\n`; + return `${warnMsg}\n${serializeNodes((toolbarTemplate as Element).children, getHtmlTagDefinition).join('')}\n`; } return ''; }; // Row island migration for (const path of update.templateFiles) { - findElementNodes(parseFile(host, path), 'igx-row-island') + findElementNodes(parseFile(new HtmlParser(), host, path), 'igx-row-island') .filter(island => hasAttribute(island as Element, prop)) .map(island => getSourceOffset(island as Element)) .forEach(offset => { @@ -80,7 +82,7 @@ export default (): Rule => (host: Tree, context: SchematicContext) => { // Clear row island templates for (const path of update.templateFiles) { - findElementNodes(parseFile(host, path), 'igx-row-island') + findElementNodes(parseFile(new HtmlParser(), host, path), 'igx-row-island') .filter(grid => hasAttribute(grid as Element, prop)) .map(grid => findElementNodes([grid], ['ng-template'])) .reduce((prev, curr) => prev.concat(curr), []) @@ -99,7 +101,7 @@ export default (): Rule => (host: Tree, context: SchematicContext) => { // Prepare the file changes for (const path of update.templateFiles) { - findElementNodes(parseFile(host, path), TAGS) + findElementNodes(parseFile(new HtmlParser(), host, path), TAGS) .filter(grid => hasAttribute(grid as Element, prop)) .map(node => getSourceOffset(node as Element)) .forEach(offset => { @@ -116,7 +118,7 @@ export default (): Rule => (host: Tree, context: SchematicContext) => { // Remove toolbar templates after migration for (const path of update.templateFiles) { - findElementNodes(parseFile(host, path), TAGS) + findElementNodes(parseFile(new HtmlParser(), host, path), TAGS) .filter(grid => hasAttribute(grid as Element, prop)) .map(grid => findElementNodes([grid], ['ng-template'])) .reduce((prev, curr) => prev.concat(curr), []) diff --git a/projects/igniteui-angular/migrations/update-11_1_0/index.ts b/projects/igniteui-angular/migrations/update-11_1_0/index.ts index 6dc18c13014..e17ff9894e5 100644 --- a/projects/igniteui-angular/migrations/update-11_1_0/index.ts +++ b/projects/igniteui-angular/migrations/update-11_1_0/index.ts @@ -3,7 +3,7 @@ import { UpdateChanges } from '../common/UpdateChanges'; const version = '11.1.0'; -export default (): Rule => (host: Tree, context: SchematicContext) => { +export default (): Rule => async (host: Tree, context: SchematicContext) => { context.logger.info(`Applying migration for Ignite UI for Angular to version ${version}`); const update = new UpdateChanges(__dirname, host, context); diff --git a/projects/igniteui-angular/migrations/update-12_0_0/index.ts b/projects/igniteui-angular/migrations/update-12_0_0/index.ts index 19669ef256c..caf31ff9992 100644 --- a/projects/igniteui-angular/migrations/update-12_0_0/index.ts +++ b/projects/igniteui-angular/migrations/update-12_0_0/index.ts @@ -2,14 +2,17 @@ import { Element } from '@angular/compiler'; import { Rule, SchematicContext, Tree } from '@angular-devkit/schematics'; import { UpdateChanges } from '../common/UpdateChanges'; import { FileChange, getAttribute, findElementNodes, getSourceOffset, hasAttribute, parseFile } from '../common/util'; +import { nativeImport } from '../common/import-helper.js'; const version = '12.0.0'; -export default (): Rule => (host: Tree, context: SchematicContext) => { +export default (): Rule => async (host: Tree, context: SchematicContext) => { context.logger.info( `Applying migration for Ignite UI for Angular to version ${version}` ); + const { HtmlParser } = await nativeImport('@angular/compiler') as typeof import('@angular/compiler'); + // eslint-disable-next-line max-len const UPDATE_NOTE = `\n`; @@ -85,7 +88,7 @@ See https://www.infragistics.com/products/ignite-ui-angular/angular/components/t // Replace the tabsType input with tabsAligment for (const path of htmlFiles) { - findElementNodes(parseFile(host, path), 'igx-tabs') + findElementNodes(parseFile(new HtmlParser(), host, path), 'igx-tabs') .forEach(node => { if (hasAttribute(node as Element, 'type')) { const { startTag, file } = getSourceOffset(node as Element); @@ -107,7 +110,7 @@ See https://www.infragistics.com/products/ignite-ui-angular/angular/components/t for (const comp of COMPONENTS) { for (const path of htmlFiles) { // Replace the if any with - findElementNodes(parseFile(host, path), comp.tags) + findElementNodes(parseFile(new HtmlParser(), host, path), comp.tags) .map(tab => findElementNodes([tab], 'ng-template')) .reduce((prev, curr) => prev.concat(curr), []) .filter(template => hasAttribute(template as Element, 'igxTab')) @@ -124,7 +127,7 @@ See https://www.infragistics.com/products/ignite-ui-angular/angular/components/t // Convert label and icon to igx-tab-header children -> // and - findElementNodes(parseFile(host, path), comp.tags). + findElementNodes(parseFile(new HtmlParser(), host, path), comp.tags). map(node => getSourceOffset(node as Element)). forEach(offset => { const { startTag, file, node } = offset; @@ -173,7 +176,7 @@ See https://www.infragistics.com/products/ignite-ui-angular/angular/components/t // Grab the content between and create a // Also migrate class from igx-tabs-group to igx-tab-content, if any - findElementNodes(parseFile(host, path), comp.tags) + findElementNodes(parseFile(new HtmlParser(), host, path), comp.tags) .map(node => getSourceOffset(node as Element)) .forEach(offset => { const tabHeader = offset.node.children.find(c => (c as Element).name === comp.headerItem); @@ -202,7 +205,7 @@ See https://www.infragistics.com/products/ignite-ui-angular/angular/components/t // Insert a comment indicating the change/replacement if (applyComment) { - findElementNodes(parseFile(host, path), comp.component). + findElementNodes(parseFile(new HtmlParser(), host, path), comp.component). map(node => getSourceOffset(node as Element)). forEach(offset => { const { startTag, file } = offset; @@ -254,7 +257,7 @@ See https://www.infragistics.com/products/ignite-ui-angular/angular/components/t // DatePicker and TimePicker don't support templates anymore. // That is why migrations inserts a comment to notify the developer to remove the templates. - findElementNodes(parseFile(host, path), comp.COMPONENT) + findElementNodes(parseFile(new HtmlParser(), host, path), comp.COMPONENT) .map(editor => findElementNodes([editor], 'ng-template')) .reduce((prev, curr) => prev.concat(curr), []) .filter(template => hasAttribute(template as Element, comp.TEMPLATE_DIRECTIVE)) @@ -269,7 +272,7 @@ See https://www.infragistics.com/products/ignite-ui-angular/angular/components/t // 2. dialog mode is added for those that didn't explicitly set the mode prop. // 1. Remove dropdown mode - findElementNodes(parseFile(host, path), comp.COMPONENT) + findElementNodes(parseFile(new HtmlParser(), host, path), comp.COMPONENT) .filter(template => hasAttribute(template as Element, EDITORS_MODE)) .map(node => getSourceOffset(node as Element)) .forEach(offset => { @@ -284,7 +287,7 @@ See https://www.infragistics.com/products/ignite-ui-angular/angular/components/t }); // 2. Insert dialog mode - findElementNodes(parseFile(host, path), comp.COMPONENT) + findElementNodes(parseFile(new HtmlParser(), host, path), comp.COMPONENT) .filter(template => !hasAttribute(template as Element, EDITORS_MODE)) .map(node => getSourceOffset(node as Element)) .forEach(offset => { @@ -295,7 +298,7 @@ See https://www.infragistics.com/products/ignite-ui-angular/angular/components/t // Remove label property and project it as // Check also labelVisibility value. - findElementNodes(parseFile(host, path), comp.COMPONENT) + findElementNodes(parseFile(new HtmlParser(), host, path), comp.COMPONENT) .filter(template => hasAttribute(template as Element, EDITORS_LABEL)) .map(node => getSourceOffset(node as Element)) .forEach(offset => { @@ -322,7 +325,7 @@ See https://www.infragistics.com/products/ignite-ui-angular/angular/components/t }); // If label and labelVisibility are not set this means that we should project default labels: "Date" & "Time" - findElementNodes(parseFile(host, path), comp.COMPONENT) + findElementNodes(parseFile(new HtmlParser(), host, path), comp.COMPONENT) .filter(template => !hasAttribute(template as Element, EDITORS_LABEL) && !hasAttribute(template as Element, EDITORS_LABEL_VISIBILITY)) .map(node => getSourceOffset(node as Element)) @@ -348,7 +351,7 @@ See https://www.infragistics.com/products/ignite-ui-angular/angular/components/t }; for (const path of htmlFiles) { - const inputGroups = findElementNodes(parseFile(host, path), INPUT_GROUP_CHANGES.GROUP_TAG); + const inputGroups = findElementNodes(parseFile(new HtmlParser(), host, path), INPUT_GROUP_CHANGES.GROUP_TAG); inputGroups.forEach((el) => { const parentEl = (el as Element); if (hasAttribute(parentEl, INPUT_GROUP_CHANGES.ATTRIBUTES)) { diff --git a/projects/igniteui-angular/migrations/update-12_1_0/index.ts b/projects/igniteui-angular/migrations/update-12_1_0/index.ts index 2d4b093a585..c17980a903c 100644 --- a/projects/igniteui-angular/migrations/update-12_1_0/index.ts +++ b/projects/igniteui-angular/migrations/update-12_1_0/index.ts @@ -3,12 +3,15 @@ import { Rule, SchematicContext, Tree } from '@angular-devkit/schematics'; import { UpdateChanges } from '../common/UpdateChanges'; import { FileChange, findElementNodes, getAttribute, getSourceOffset, hasAttribute, parseFile, serializeNodes, makeNgIf, stringifyAttriutes } from '../common/util'; +import { nativeImport } from '../common/import-helper.js'; const version = '12.1.0'; -export default (): Rule => (host: Tree, context: SchematicContext) => { +export default (): Rule => async (host: Tree, context: SchematicContext) => { context.logger.info(`Applying migration for Ignite UI for Angular to version ${version}`); + const { HtmlParser, getHtmlTagDefinition } = await nativeImport('@angular/compiler') as typeof import('@angular/compiler'); + const update = new UpdateChanges(__dirname, host, context); const TAGS = ['igx-grid', 'igx-tree-grid', 'igx-hierarchical-grid']; const prop = ['[paging]', 'paging']; @@ -40,7 +43,7 @@ export default (): Rule => (host: Tree, context: SchematicContext) => { }; const checkForPaginatorInTemplate = (path, name) => { - const ngTemplates = findElementNodes(parseFile(host, path), 'ng-template'); + const ngTemplates = findElementNodes(parseFile(new HtmlParser(), host, path), 'ng-template'); const paginatorTemplate = ngTemplates.filter(template => hasAttribute(template as Element, `#${name}`))[0]; return paginatorTemplate ? !!findElementNodes((paginatorTemplate as Element).children, 'igx-paginator').length : false; }; @@ -48,7 +51,7 @@ export default (): Rule => (host: Tree, context: SchematicContext) => { const moveTemplate = (paginatorTemplate) => { if (paginatorTemplate) { return `${warnMsg}\n - ${serializeNodes((paginatorTemplate as Element).children).join('')} + ${serializeNodes((paginatorTemplate as Element).children, getHtmlTagDefinition).join('')} \n`; } return ''; @@ -56,7 +59,7 @@ export default (): Rule => (host: Tree, context: SchematicContext) => { const buildPaginator = (node, path, propName, value, isChildGrid = false) => { const paginationTemplateName = getAttribute(node, '[paginationTemplate]')[0]; - const ngTemplates = findElementNodes(parseFile(host, path), 'ng-template'); + const ngTemplates = findElementNodes(parseFile(new HtmlParser(), host, path), 'ng-template'); templateNames.push('#' + paginationTemplateName?.value); const paginatorTemplate = ngTemplates.filter(template => hasAttribute(template as Element, `#${paginationTemplateName?.value}`))[0]; if (paginatorTemplate && checkForPaginatorInTemplate(path, paginationTemplateName?.value)) { @@ -70,7 +73,7 @@ export default (): Rule => (host: Tree, context: SchematicContext) => { // migrate paging and pagination template for grid, tree grid and hierarchical grid for (const path of update.templateFiles) { - findElementNodes(parseFile(host, path), TAGS) + findElementNodes(parseFile(new HtmlParser(), host, path), TAGS) .filter(grid => hasAttribute(grid as Element, prop)) .map(node => getSourceOffset(node as Element)) .forEach(offset => { @@ -86,7 +89,7 @@ export default (): Rule => (host: Tree, context: SchematicContext) => { // apply the migrations to the rowIsland for (const path of update.templateFiles) { - findElementNodes(parseFile(host, path), 'igx-row-island') + findElementNodes(parseFile(new HtmlParser(), host, path), 'igx-row-island') .filter(island => hasAttribute(island as Element, prop)) .map(island => getSourceOffset(island as Element)) .forEach(offset => { @@ -102,7 +105,7 @@ export default (): Rule => (host: Tree, context: SchematicContext) => { // clear paginationTemplate definitions for (const path of update.templateFiles) { - findElementNodes(parseFile(host, path), 'ng-template') + findElementNodes(parseFile(new HtmlParser(), host, path), 'ng-template') .filter(template => hasAttribute(template as Element, templateNames)) .forEach(node => { const { startTag, endTag, file } = getSourceOffset(node as Element); diff --git a/projects/igniteui-angular/migrations/update-13_0_0/changes/theme-props.json b/projects/igniteui-angular/migrations/update-13_0_0/changes/theme-props.json new file mode 100644 index 00000000000..545f397f960 --- /dev/null +++ b/projects/igniteui-angular/migrations/update-13_0_0/changes/theme-props.json @@ -0,0 +1,2798 @@ +{ + "$schema": "../../common/schema/theme-props.schema.json", + "changes": [ + { + "name": "$legacy-support", + "remove": true, + "owner": "igx-theme" + }, + { + "name": "$legacy-support", + "remove": true, + "owner": "igx-light-theme" + }, + { + "name": "$legacy-support", + "remove": true, + "owner": "igx-dark-theme" + }, + { + "name": "$legacy-support", + "remove": true, + "owner": "igx-fluent-light-theme" + }, + { + "name": "$legacy-support", + "remove": true, + "owner": "igx-fluent-dark-theme" + }, + { + "name": "$legacy-support", + "remove": true, + "owner": "igx-bootstrap-light-theme" + }, + { + "name": "$legacy-support", + "remove": true, + "owner": "igx-bootstrap-dark-theme" + }, + { + "name": "$legacy-support", + "remove": true, + "owner": "igx-indigo-light-theme" + }, + { + "name": "$legacy-support", + "remove": true, + "owner": "igx-indigo-dark-theme" + }, + { + "name": "$_default-shape-action-strip", + "replaceWith": "$default-shape-action-strip" + }, + { + "name": "$_bootstrap-shape-action-strip", + "replaceWith": "$bootstrap-shape-action-strip" + }, + { + "name": "$_indigo-shape-action-strip", + "replaceWith": "$indigo-shape-action-strip" + }, + { + "name": "$_light-action-strip", + "replaceWith": "$light-action-strip" + }, + { + "name": "$_fluent-action-strip", + "replaceWith": "$fluent-action-strip" + }, + { + "name": "$_bootstrap-action-strip", + "replaceWith": "$bootstrap-action-strip" + }, + { + "name": "$_indigo-action-strip", + "replaceWith": "$indigo-action-strip" + }, + { + "name": "$_dark-action-strip", + "replaceWith": "$dark-action-strip" + }, + { + "name": "$_dark-fluent-action-strip", + "replaceWith": "$dark-fluent-action-strip" + }, + { + "name": "$_dark-bootstrap-action-strip", + "replaceWith": "$dark-bootstrap-action-strip" + }, + { + "name": "$_dark-indigo-action-strip", + "replaceWith": "$dark-indigo-action-strip" + }, + { + "name": "$_square-shape-avatar", + "replaceWith": "$square-shape-avatar" + }, + { + "name": "$_bootstrap-shape-avatar", + "replaceWith": "$bootstrap-shape-avatar" + }, + { + "name": "$_light-avatar", + "replaceWith": "$light-avatar" + }, + { + "name": "$_fluent-avatar", + "replaceWith": "$fluent-avatar" + }, + { + "name": "$_bootstrap-avatar", + "replaceWith": "$bootstrap-avatar" + }, + { + "name": "$_indigo-avatar", + "replaceWith": "$indigo-avatar" + }, + { + "name": "$_dark-avatar", + "replaceWith": "$dark-avatar" + }, + { + "name": "$_dark-fluent-avatar", + "replaceWith": "$dark-fluent-avatar" + }, + { + "name": "$_dark-bootstrap-avatar", + "replaceWith": "$dark-bootstrap-avatar" + }, + { + "name": "$_dark-indigo-avatar", + "replaceWith": "$dark-indigo-avatar" + }, + { + "name": "$_default-shape-badge", + "replaceWith": "$default-shape-badge" + }, + { + "name": "$_default-elevation-badge", + "replaceWith": "$default-elevation-badge" + }, + { + "name": "$_bootstrap-shape-badge", + "replaceWith": "$bootstrap-shape-badge" + }, + { + "name": "$_bootstrap-elevation-badge", + "replaceWith": "$bootstrap-elevation-badge" + }, + { + "name": "$_light-badge", + "replaceWith": "$light-badge" + }, + { + "name": "$_fluent-badge", + "replaceWith": "$fluent-badge" + }, + { + "name": "$_bootstrap-badge", + "replaceWith": "$bootstrap-badge" + }, + { + "name": "$_indigo-badge", + "replaceWith": "$indigo-badge" + }, + { + "name": "$_dark-light-badge", + "replaceWith": "$dark-light-badge" + }, + { + "name": "$_dark-fluent-badge", + "replaceWith": "$dark-fluent-badge" + }, + { + "name": "$_dark-bootstrap-badge", + "replaceWith": "$dark-bootstrap-badge" + }, + { + "name": "$_dark-indigo-badge", + "replaceWith": "$dark-indigo-badge" + }, + { + "name": "$_light-banner", + "replaceWith": "$light-banner" + }, + { + "name": "$_fluent-banner", + "replaceWith": "$fluent-banner" + }, + { + "name": "$_bootstrap-banner", + "replaceWith": "$bootstrap-banner" + }, + { + "name": "$_indigo-banner", + "replaceWith": "$indigo-banner" + }, + { + "name": "$_dark-banner", + "replaceWith": "$light-banner" + }, + { + "name": "$_dark-fluent-banner", + "replaceWith": "$fluent-banner" + }, + { + "name": "$_dark-bootstrap-banner", + "replaceWith": "$bootstrap-banner" + }, + { + "name": "$_dark-indigo-banner", + "replaceWith": "$indigo-banner" + }, + { + "name": "$_default-elevation-bottom-nav", + "replaceWith": "$default-elevation-bottom-nav" + }, + { + "name": "$_fluent-elevation-bottom-nav", + "replaceWith": "$fluent-elevation-bottom-nav" + }, + { + "name": "$_indigo-elevation-bottom-nav", + "replaceWith": "$indigo-elevation-bottom-nav" + }, + { + "name": "$_light-bottom-nav", + "replaceWith": "$light-bottom-nav" + }, + { + "name": "$_fluent-bottom-nav", + "replaceWith": "$fluent-bottom-nav" + }, + { + "name": "$_bootstrap-bottom-nav", + "replaceWith": "$bootstrap-bottom-nav" + }, + { + "name": "$_indigo-bottom-nav", + "replaceWith": "$indigo-bottom-nav" + }, + { + "name": "$_dark-bottom-nav", + "replaceWith": "$dark-bottom-nav" + }, + { + "name": "$_dark-fluent-bottom-nav", + "replaceWith": "$dark-fluent-bottom-nav" + }, + { + "name": "$_dark-bootstrap-bottom-nav", + "replaceWith": "$dark-bootstrap-bottom-nav" + }, + { + "name": "$_dark-indigo-bottom-nav", + "replaceWith": "$dark-indigo-bottom-nav" + }, + { + "name": "$_base-dark-bottom-nav", + "replaceWith": "$base-dark-bottom-nav" + }, + { + "name": "$_default-shape-button-group", + "replaceWith": "$default-shape-button-group" + }, + { + "name": "$_round-shape-button-group", + "replaceWith": "$round-shape-button-group" + }, + { + "name": "$_square-shape-button-group", + "replaceWith": "$square-shape-button-group" + }, + { + "name": "$_fluent-shape-button-group", + "replaceWith": "$fluent-shape-button-group" + }, + { + "name": "$_bootstrap-shape-button-group", + "replaceWith": "$bootstrap-shape-button-group" + }, + { + "name": "$_indigo-shape-button-group", + "replaceWith": "$indigo-shape-button-group" + }, + { + "name": "$_default-elevation-button-group", + "replaceWith": "$default-elevation-button-group" + }, + { + "name": "$_fluent-elevation-button-group", + "replaceWith": "$fluent-elevation-button-group" + }, + { + "name": "$_bootstrap-elevation-button-group", + "replaceWith": "$bootstrap-elevation-button-group" + }, + { + "name": "$_indigo-elevation-button-group", + "replaceWith": "$indigo-elevation-button-group" + }, + { + "name": "$_light-button-group", + "replaceWith": "$light-button-group" + }, + { + "name": "$_fluent-button-group", + "replaceWith": "$fluent-button-group" + }, + { + "name": "$_bootstrap-button-group", + "replaceWith": "$bootstrap-button-group" + }, + { + "name": "$_indigo-button-group", + "replaceWith": "$indigo-button-group" + }, + { + "name": "$_dark-button-group", + "replaceWith": "$dark-button-group" + }, + { + "name": "$_dark-fluent-button-group", + "replaceWith": "$dark-fluent-button-group" + }, + { + "name": "$_dark-bootstrap-button-group", + "replaceWith": "$bootstrap-button-group" + }, + { + "name": "$_dark-indigo-button-group", + "replaceWith": "$dark-indigo-button-group" + }, + { + "name": "$_base-dark-button-group", + "replaceWith": "$base-dark-button-group" + }, + { + "name": "$_round-shape-button", + "replaceWith": "$round-shape-button" + }, + { + "name": "$_square-shape-button", + "replaceWith": "$square-shape-button" + }, + { + "name": "$_material-shape-button", + "replaceWith": "$material-shape-button" + }, + { + "name": "$_fluent-shape-button", + "replaceWith": "$fluent-shape-button" + }, + { + "name": "$_bootstrap-shape-button", + "replaceWith": "$bootstrap-shape-button" + }, + { + "name": "$_flat-elevation-button", + "replaceWith": "$flat-elevation-button" + }, + { + "name": "$_material-raised-elevation", + "replaceWith": "$material-raised-elevation" + }, + { + "name": "$_material-fab-elevation", + "replaceWith": "$material-fab-elevation" + }, + { + "name": "$_material-ib-elevation", + "replaceWith": "$material-ib-elevation" + }, + { + "name": "$_bootstrap-elevation-button", + "replaceWith": "$bootstrap-elevation-button" + }, + { + "name": "$_indigo-elevation-button", + "replaceWith": "$indigo-elevation-button" + }, + { + "name": "$_material-base-button", + "replaceWith": "$material-base-button" + }, + { + "name": "$_material-flat-button", + "replaceWith": "$material-flat-button" + }, + { + "name": "$_material-outlined-button", + "replaceWith": "$material-outlined-button" + }, + { + "name": "$_material-raised-button", + "replaceWith": "$material-raised-button" + }, + { + "name": "$_material-fab-button", + "replaceWith": "$material-fab-button" + }, + { + "name": "$_material-icon-button", + "replaceWith": "$material-icon-button" + }, + { + "name": "$_light-button", + "replaceWith": "$light-button" + }, + { + "name": "$_fluent-base-button", + "replaceWith": "$fluent-base-button" + }, + { + "name": "$_fluent-flat-button", + "replaceWith": "$fluent-flat-button" + }, + { + "name": "$_fluent-outlined-button", + "replaceWith": "$fluent-outlined-button" + }, + { + "name": "$_fluent-raised-button", + "replaceWith": "$fluent-raised-button" + }, + { + "name": "$_fluent-fab-button", + "replaceWith": "$fluent-fab-button" + }, + { + "name": "$_fluent-icon-button", + "replaceWith": "$fluent-icon-button" + }, + { + "name": "$_fluent-button", + "replaceWith": "$fluent-button" + }, + { + "name": "$_bootstrap-base-button", + "replaceWith": "$bootstrap-base-button" + }, + { + "name": "$_bootstrap-flat-button", + "replaceWith": "$bootstrap-flat-button" + }, + { + "name": "$_bootstrap-outlined-button", + "replaceWith": "$bootstrap-outlined-button" + }, + { + "name": "$_bootstrap-raised-button", + "replaceWith": "$bootstrap-raised-button" + }, + { + "name": "$_bootstrap-fab-button", + "replaceWith": "$bootstrap-fab-button" + }, + { + "name": "$_bootstrap-icon-button", + "replaceWith": "$bootstrap-icon-button" + }, + { + "name": "$_bootstrap-button", + "replaceWith": "$bootstrap-button" + }, + { + "name": "$_indigo-base-button", + "replaceWith": "$indigo-base-button" + }, + { + "name": "$_indigo-button", + "replaceWith": "$indigo-button" + }, + { + "name": "$_indigo-flat-button", + "replaceWith": "$indigo-flat-button" + }, + { + "name": "$_indigo-outlined-button", + "replaceWith": "$indigo-outlined-button" + }, + { + "name": "$_indigo-raised-button", + "replaceWith": "$indigo-raised-button" + }, + { + "name": "$_indigo-fab-button", + "replaceWith": "$indigo-fab-button" + }, + { + "name": "$_indigo-icon-button", + "replaceWith": "$indigo-icon-button" + }, + { + "name": "$_dark-button", + "replaceWith": "$dark-button" + }, + { + "name": "$_material-base-button-dark", + "replaceWith": "$material-base-button-dark" + }, + { + "name": "$_material-flat-button-dark", + "replaceWith": "$material-flat-button-dark" + }, + { + "name": "$_material-icon-button-dark", + "replaceWith": "$material-icon-button-dark" + }, + { + "name": "$_dark-fluent-button", + "replaceWith": "$dark-fluent-button" + }, + { + "name": "$_fluent-flat-button-dark", + "replaceWith": "$fluent-flat-button-dark" + }, + { + "name": "$_bootstrap-base-button-dark", + "replaceWith": "$bootstrap-base-button-dark" + }, + { + "name": "$_dark-bootstrap-button", + "replaceWith": "$dark-bootstrap-button" + }, + { + "name": "$_bootstrap-outlined-button-dark", + "replaceWith": "$bootstrap-outlined-button-dark" + }, + { + "name": "$_dark-indigo-button", + "replaceWith": "$dark-indigo-button" + }, + { + "name": "$_default-shape-calendar", + "replaceWith": "$default-shape-calendar" + }, + { + "name": "$_round-shape-calendar", + "replaceWith": "$round-shape-calendar" + }, + { + "name": "$_square-shape-calendar", + "replaceWith": "$square-shape-calendar" + }, + { + "name": "$_fluent-shape-calendar", + "replaceWith": "$fluent-shape-calendar" + }, + { + "name": "$_bootstrap-shape-calendar", + "replaceWith": "$bootstrap-shape-calendar" + }, + { + "name": "$_indigo-shape-calendar", + "replaceWith": "$indigo-shape-calendar" + }, + { + "name": "$_light-calendar", + "replaceWith": "$light-calendar" + }, + { + "name": "$_fluent-calendar", + "replaceWith": "$fluent-calendar" + }, + { + "name": "$_bootstrap-calendar", + "replaceWith": "$bootstrap-calendar" + }, + { + "name": "$_indigo-calendar", + "replaceWith": "$indigo-calendar" + }, + { + "name": "$_dark-calendar", + "replaceWith": "$dark-calendar" + }, + { + "name": "$_dark-fluent-calendar", + "replaceWith": "$dark-fluent-calendar" + }, + { + "name": "$_dark-bootstrap-calendar", + "replaceWith": "$dark-bootstrap-calendar" + }, + { + "name": "$_dark-indigo-calendar", + "replaceWith": "$dark-indigo-calendar" + }, + { + "name": "$_default-shape-card", + "replaceWith": "$default-shape-card" + }, + { + "name": "$_round-shape-card", + "replaceWith": "$round-shape-card" + }, + { + "name": "$_square-shape-card", + "replaceWith": "$square-shape-card" + }, + { + "name": "$_fluent-shape-card", + "replaceWith": "$fluent-shape-card" + }, + { + "name": "$_bootstrap-shape-card", + "replaceWith": "$bootstrap-shape-card" + }, + { + "name": "$_indigo-shape-card", + "replaceWith": "$indigo-shape-card" + }, + { + "name": "$_default-elevation-card", + "replaceWith": "$default-elevation-card" + }, + { + "name": "$_flat-card", + "replaceWith": "$flat-card" + }, + { + "name": "$_fluent-elevation-card", + "replaceWith": "$fluent-elevation-card" + }, + { + "name": "$_indigo-elevation-card", + "replaceWith": "$indigo-elevation-card" + }, + { + "name": "$_light-card", + "replaceWith": "$light-card" + }, + { + "name": "$_fluent-card", + "replaceWith": "$fluent-card" + }, + { + "name": "$_bootstrap-card", + "replaceWith": "$bootstrap-card" + }, + { + "name": "$_indigo-card", + "replaceWith": "$indigo-card" + }, + { + "name": "$_dark-card", + "replaceWith": "$dark-card" + }, + { + "name": "$_dark-fluent-card", + "replaceWith": "$dark-fluent-card" + }, + { + "name": "$_dark-bootstrap-card", + "replaceWith": "$dark-bootstrap-card" + }, + { + "name": "$_dark-indigo-card", + "replaceWith": "$dark-indigo-card" + }, + { + "name": "$_default-shape-carousel", + "replaceWith": "$default-shape-carousel" + }, + { + "name": "$_round-shape-carousel", + "replaceWith": "$round-shape-carousel" + }, + { + "name": "$_square-shape-carousel", + "replaceWith": "$square-shape-carousel" + }, + { + "name": "$_bootstrap-shape-carousel", + "replaceWith": "$bootstrap-shape-carousel" + }, + { + "name": "$_default-elevation-carousel", + "replaceWith": "$default-elevation-carousel" + }, + { + "name": "$_flat-carousel", + "replaceWith": "$flat-carousel" + }, + { + "name": "$_fluent-elevation-carousel", + "replaceWith": "$fluent-elevation-carousel" + }, + { + "name": "$_bootstrap-elevation-carousel", + "replaceWith": "$bootstrap-elevation-carousel" + }, + { + "name": "$_indigo-elevation-carousel", + "replaceWith": "$indigo-elevation-carousel" + }, + { + "name": "$_light-carousel", + "replaceWith": "$light-carousel" + }, + { + "name": "$_fluent-carousel", + "replaceWith": "$fluent-carousel" + }, + { + "name": "$_bootstrap-carousel", + "replaceWith": "$bootstrap-carousel" + }, + { + "name": "$_indigo-carousel", + "replaceWith": "$indigo-carousel" + }, + { + "name": "$_base-dark-carousel", + "replaceWith": "$base-dark-carousel" + }, + { + "name": "$_dark-carousel", + "replaceWith": "$dark-carousel" + }, + { + "name": "$_dark-fluent-carousel", + "replaceWith": "$dark-fluent-carousel" + }, + { + "name": "$_dark-bootstrap-carousel", + "replaceWith": "$dark-bootstrap-carousel" + }, + { + "name": "$_dark-indigo-carousel", + "replaceWith": "$dark-indigo-carousel" + }, + { + "name": "$_light-category-chart:", + "replaceWith": "$light-category-chart:" + }, + { + "name": "$_fluent-category-chart", + "replaceWith": "$fluent-category-chart" + }, + { + "name": "$_bootstrap-category-chart", + "replaceWith": "$bootstrap-category-chart" + }, + { + "name": "$_indigo-category-chart", + "replaceWith": "$indigo-category-chart" + }, + { + "name": "$_base-dark-category-chart", + "replaceWith": "$base-dark-category-chart" + }, + { + "name": "$_dark-category-chart", + "replaceWith": "$dark-category-chart" + }, + { + "name": "$_dark-fluent-category-chart", + "replaceWith": "$dark-fluent-category-chart" + }, + { + "name": "$_dark-bootstrap-category-chart", + "replaceWith": "$dark-bootstrap-category-chart" + }, + { + "name": "$_dark-indigo-category-chart", + "replaceWith": "$dark-indigo-category-chart" + }, + { + "name": "$_default-shape-checkbox", + "replaceWith": "$default-shape-checkbox" + }, + { + "name": "$_round-shape-checkbox", + "replaceWith": "$round-shape-checkbox" + }, + { + "name": "$_square-shape-checkbox", + "replaceWith": "$square-shape-checkbox" + }, + { + "name": "$_fluent-shape-checkbox", + "replaceWith": "$fluent-shape-checkbox" + }, + { + "name": "$_bootstrap-shape-checkbox", + "replaceWith": "$bootstrap-shape-checkbox" + }, + { + "name": "$_indigo-shape-checkbox", + "replaceWith": "$indigo-shape-checkbox" + }, + { + "name": "$_light-checkbox", + "replaceWith": "$light-checkbox" + }, + { + "name": "$_fluent-checkbox", + "replaceWith": "$fluent-checkbox" + }, + { + "name": "$_bootstrap-checkbox", + "replaceWith": "$bootstrap-checkbox" + }, + { + "name": "$_indigo-checkbox", + "replaceWith": "$indigo-checkbox" + }, + { + "name": "$_dark-checkbox", + "replaceWith": "$dark-checkbox" + }, + { + "name": "$_dark-fluent-checkbox", + "replaceWith": "$dark-fluent-checkbox" + }, + { + "name": "$_dark-bootstrap-checkbox", + "replaceWith": "$dark-bootstrap-checkbox" + }, + { + "name": "$_dark-indigo-checkbox", + "replaceWith": "$dark-indigo-checkbox" + }, + { + "name": "$_round-shape-chip", + "replaceWith": "$round-shape-chip" + }, + { + "name": "$_square-shape-chip", + "replaceWith": "$square-shape-chip" + }, + { + "name": "$_bootstrap-shape-chip", + "replaceWith": "$bootstrap-shape-chip" + }, + { + "name": "$_indigo-shape-chip", + "replaceWith": "$indigo-shape-chip" + }, + { + "name": "$_default-elevation-chip", + "replaceWith": "$default-elevation-chip" + }, + { + "name": "$_fluent-elevation-chip", + "replaceWith": "$fluent-elevation-chip" + }, + { + "name": "$_bootstrap-elevation-chip", + "replaceWith": "$bootstrap-elevation-chip" + }, + { + "name": "$_indigo-elevation-chip", + "replaceWith": "$indigo-elevation-chip" + }, + { + "name": "$_light-chip", + "replaceWith": "$light-chip" + }, + { + "name": "$_fluent-chip", + "replaceWith": "$fluent-chip" + }, + { + "name": "$_bootstrap-chip", + "replaceWith": "$bootstrap-chip" + }, + { + "name": "$_indigo-chip", + "replaceWith": "$indigo-chip" + }, + { + "name": "$_base-dark-chip", + "replaceWith": "$base-dark-chip" + }, + { + "name": "$_dark-chip", + "replaceWith": "$dark-chip" + }, + { + "name": "$_dark-fluent-chip", + "replaceWith": "$dark-fluent-chip" + }, + { + "name": "$_dark-bootstrap-chip", + "replaceWith": "$dark-bootstrap-chip" + }, + { + "name": "$_dark-indigo-chip", + "replaceWith": "$dark-indigo-chip" + }, + { + "name": "$_light-column-actions", + "replaceWith": "$light-column-actions" + }, + { + "name": "$_fluent-column-actions", + "replaceWith": "$fluent-column-actions" + }, + { + "name": "$_bootstrap-column-actions", + "replaceWith": "$bootstrap-column-actions" + }, + { + "name": "$_indigo-column-actions", + "replaceWith": "$indigo-column-actions" + }, + { + "name": "$_base-dark-column-actions", + "replaceWith": "$dark-column-actions" + }, + { + "name": "$_dark-fluent-column-actions", + "replaceWith": "$dark-fluent-column-actions" + }, + { + "name": "$_dark-bootstrap-column-actions", + "replaceWith": "$dark-bootstrap-column-actions" + }, + { + "name": "$_dark-indigo-column-actions", + "replaceWith": "$dark-indigo-column-actions" + }, + { + "name": "$_light-combo", + "replaceWith": "$light-combo" + }, + { + "name": "$_fluent-combo", + "replaceWith": "$fluent-combo" + }, + { + "name": "$_bootstrap-combo", + "replaceWith": "$bootstrap-combo" + }, + { + "name": "$_indigo-combo", + "replaceWith": "$indigo-combo" + }, + { + "name": "$_dark-combo", + "replaceWith": "$dark-combo" + }, + { + "name": "$_dark-fluent-combo", + "replaceWith": "$dark-fluent-combo" + }, + { + "name": "$_dark-bootstrap-combo", + "replaceWith": "$dark-bootstrap-combo" + }, + { + "name": "$_dark-indigo-combo", + "replaceWith": "$dark-indigo-combo" + }, + { + "name": "$_light-data-chart", + "replaceWith": "$light-data-chart" + }, + { + "name": "$_fluent-data-chart", + "replaceWith": "$fluent-data-chart" + }, + { + "name": "$_bootstrap-data-chart", + "replaceWith": "$bootstrap-data-chart" + }, + { + "name": "$_indigo-data-chart", + "replaceWith": "$indigo-data-chart" + }, + { + "name": "$_dark-data-chart", + "replaceWith": "$dark-data-chart" + }, + { + "name": "$_dark-fluent-data-chart", + "replaceWith": "$dark-fluent-data-chart" + }, + { + "name": "$_dark-bootstrap-data-chart", + "replaceWith": "$dark-bootstrap-data-chart" + }, + { + "name": "$_dark-indigo-data-chart", + "replaceWith": "$dark-indigo-data-chart" + }, + { + "name": "$_light-date-range-picker", + "replaceWith": "$light-date-range-picker" + }, + { + "name": "$_fluent-date-range-picker", + "replaceWith": "$fluent-date-range-picker" + }, + { + "name": "$_bootstrap-date-range-picker", + "replaceWith": "$bootstrap-date-range-picker" + }, + { + "name": "$_indigo-date-range-picker", + "replaceWith": "$indigo-date-range-picker" + }, + { + "name": "$_dark-date-range-picker", + "replaceWith": "$dark-date-range-picker" + }, + { + "name": "$_dark-fluent-date-range-picker", + "replaceWith": "$dark-fluent-date-range-picker" + }, + { + "name": "$_dark-bootstrap-date-range-picker", + "replaceWith": "$dark-bootstrap-date-range-picker" + }, + { + "name": "$_dark-indigo-date-range-picker", + "replaceWith": "$dark-indigo-date-range-picker" + }, + { + "name": "$_default-shape-dialog", + "replaceWith": "$default-shape-dialog" + }, + { + "name": "$_round-shape-dialog", + "replaceWith": "$round-shape-dialog" + }, + { + "name": "$_square-shape-dialog", + "replaceWith": "$square-shape-dialog" + }, + { + "name": "$_fluent-shape-dialog", + "replaceWith": "$fluent-shape-dialog" + }, + { + "name": "$_bootstrap-shape-dialog", + "replaceWith": "$bootstrap-shape-dialog" + }, + { + "name": "$_indigo-shape-dialog", + "replaceWith": "$indigo-shape-dialog" + }, + { + "name": "$_default-elevation-dialog", + "replaceWith": "$default-elevation-dialog" + }, + { + "name": "$_bootstrap-elevation-dialog", + "replaceWith": "$bootstrap-elevation-dialog" + }, + { + "name": "$_light-dialog", + "replaceWith": "$light-dialog" + }, + { + "name": "$_fluent-dialog", + "replaceWith": "$fluent-dialog" + }, + { + "name": "$_bootstrap-dialog", + "replaceWith": "$bootstrap-dialog" + }, + { + "name": "$_indigo-dialog", + "replaceWith": "$indigo-dialog" + }, + { + "name": "$_dark-dialog", + "replaceWith": "$dark-dialog" + }, + { + "name": "$_dark-fluent-dialog", + "replaceWith": "$dark-fluent-dialog" + }, + { + "name": "$_dark-bootstrap-dialog", + "replaceWith": "$dark-bootstrap-dialog" + }, + { + "name": "$_dark-indigo-dialog", + "replaceWith": "$dark-indigo-dialog" + }, + { + "name": "$_light-divider", + "replaceWith": "$light-divider" + }, + { + "name": "$_fluent-divider", + "replaceWith": "$fluent-divider" + }, + { + "name": "$_bootstrap-divider", + "replaceWith": "$bootstrap-divider" + }, + { + "name": "$_indigo-divider", + "replaceWith": "$indigo-divider" + }, + { + "name": "$_dark-divider", + "replaceWith": "$dark-fluent-divider" + }, + { + "name": "$_dark-bootstrap-divider", + "replaceWith": "$dark-bootstrap-divider" + }, + { + "name": "$_dark-indigo-divider", + "replaceWith": "$dark-indigo-divider" + }, + { + "name": "$_light-dock-manager", + "replaceWith": "$light-dock-manager" + }, + { + "name": "$_fluent-dock-manager", + "replaceWith": "$fluent-dock-manager" + }, + { + "name": "$_bootstrap-dock-manager", + "replaceWith": "$bootstrap-dock-manager" + }, + { + "name": "$_indigo-dock-manager", + "replaceWith": "$indigo-dock-manager" + }, + { + "name": "$_dark-dock-manager", + "replaceWith": "$dark-dock-manager" + }, + { + "name": "$_dark-fluent-dock-manager", + "replaceWith": "$dark-fluent-dock-manager" + }, + { + "name": "$_dark-bootstrap-dock-manager", + "replaceWith": "$dark-bootstrap-dock-manager" + }, + { + "name": "$_dark-indigo-dock-manager", + "replaceWith": "$dark-indigo-dock-manager" + }, + { + "name": "$_light-doughnut-chart", + "replaceWith": "$light-doughnut-chart" + }, + { + "name": "$_fluent-doughnut-chart", + "replaceWith": "$fluent-doughnut-chart" + }, + { + "name": "$_bootstrap-doughnut-chart", + "replaceWith": "$bootstrap-doughnut-chart" + }, + { + "name": "$_indigo-doughnut-chart", + "replaceWith": "$indigo-doughnut-chart" + }, + { + "name": "$_default-shape-drop-down", + "replaceWith": "$default-shape-drop-down" + }, + { + "name": "$_round-shape-drop-down", + "replaceWith": "$round-shape-drop-down" + }, + { + "name": "$_square-shape-drop-down", + "replaceWith": "$square-shape-drop-down" + }, + { + "name": "$_fluent-shape-drop-down", + "replaceWith": "$fluent-shape-drop-down" + }, + { + "name": "$_bootstrap-shape-drop-down", + "replaceWith": "$bootstrap-shape-drop-down" + }, + { + "name": "$_indigo-shape-drop-down", + "replaceWith": "$indigo-shape-drop-down" + }, + { + "name": "$_default-elevation-drop-down", + "replaceWith": "$default-elevation-drop-down" + }, + { + "name": "$_fluent-elevation-drop-down", + "replaceWith": "$fluent-elevation-drop-down" + }, + { + "name": "$_bootstrap-elevation-drop-down", + "replaceWith": "$bootstrap-elevation-drop-down" + }, + { + "name": "$_indigo-elevation-drop-down", + "replaceWith": "$indigo-elevation-drop-down" + }, + { + "name": "$_light-drop-down", + "replaceWith": "$light-drop-down" + }, + { + "name": "$_fluent-drop-down", + "replaceWith": "$fluent-drop-down" + }, + { + "name": "$_bootstrap-drop-down", + "replaceWith": "$bootstrap-drop-down" + }, + { + "name": "$_indigo-drop-down", + "replaceWith": "$indigo-drop-down" + }, + { + "name": "$_dark-drop-down", + "replaceWith": "$dark-drop-down" + }, + { + "name": "$_dark-fluent-drop-down", + "replaceWith": "$dark-fluent-drop-down" + }, + { + "name": "$_dark-bootstrap-drop-down", + "replaceWith": "$dark-bootstrap-drop-down" + }, + { + "name": "$_dark-indigo-drop-down", + "replaceWith": "$dark-indigo-drop-down" + }, + { + "name": "$_default-shape-expansion-panel", + "replaceWith": "$default-shape-expansion-panel" + }, + { + "name": "$_round-shape-expansion-panel", + "replaceWith": "$round-shape-expansion-panel" + }, + { + "name": "$_square-shape-expansion-panel", + "replaceWith": "$square-shape-expansion-panel" + }, + { + "name": "$_bootstrap-shape-expansion-panel", + "replaceWith": "$bootstrap-shape-expansion-panel" + }, + { + "name": "$_indigo-shape-expansion-panel", + "replaceWith": "$indigo-shape-expansion-panel" + }, + { + "name": "$_light-expansion-panel", + "replaceWith": "$light-expansion-panel" + }, + { + "name": "$_fluent-expansion-panel", + "replaceWith": "$fluent-expansion-panel" + }, + { + "name": "$_bootstrap-expansion-panel", + "replaceWith": "$bootstrap-expansion-panel" + }, + { + "name": "$_indigo-expansion-panel", + "replaceWith": "$indigo-expansion-panel" + }, + { + "name": "$_base-dark-expansion-panel", + "replaceWith": "$base-dark-expansion-panel" + }, + { + "name": "$_dark-expansion-panel", + "replaceWith": "$dark-expansion-panel" + }, + { + "name": "$_dark-fluent-expansion-panel", + "replaceWith": "$dark-fluent-expansion-panel" + }, + { + "name": "$_dark-bootstrap-expansion-panel", + "replaceWith": "$dark-bootstrap-expansion-panel" + }, + { + "name": "$_dark-indigo-expansion-panel", + "replaceWith": "$dark-indigo-expansion-panel" + }, + { + "name": "$_light-financial-chart", + "replaceWith": "$light-financial-chart" + }, + { + "name": "$_fluent-financial-chart", + "replaceWith": "$fluent-financial-chart" + }, + { + "name": "$_bootstrap-financial-chart", + "replaceWith": "$bootstrap-financial-chart" + }, + { + "name": "$_indigo-financial-chart", + "replaceWith": "$indigo-financial-chart" + }, + { + "name": "$_dark-financial-chart", + "replaceWith": "$dark-financial-chart" + }, + { + "name": "$_dark-fluent-financial-chart", + "replaceWith": "$dark-fluent-financial-chart" + }, + { + "name": "$_dark-bootstrap-financial-chart", + "replaceWith": "$dark-bootstrap-financial-chart" + }, + { + "name": "$_dark-indigo-financial-chart", + "replaceWith": "$dark-indigo-financial-chart" + }, + { + "name": "$_light-funnel-chart", + "replaceWith": "$light-funnel-chart" + }, + { + "name": "$_fluent-funnel-chart", + "replaceWith": "$fluent-funnel-chart" + }, + { + "name": "$_bootstrap-funnel-chart", + "replaceWith": "$bootstrap-funnel-chart" + }, + { + "name": "$_indigo-funnel-chart", + "replaceWith": "$indigo-funnel-chart" + }, + { + "name": "$_dark-funnel-chart", + "replaceWith": "$dark-funnel-chart" + }, + { + "name": "$_dark-fluent-funnel-chart", + "replaceWith": "$dark-fluent-funnel-chart" + }, + { + "name": "$_dark-bootstrap-funnel-chart", + "replaceWith": "$dark-bootstrap-funnel-chart" + }, + { + "name": "$_dark-indigo-funnel-chart", + "replaceWith": "$dark-indigo-funnel-chart" + }, + { + "name": "$_light-gauge", + "replaceWith": "$light-gauge" + }, + { + "name": "$_light-linear-gauge", + "replaceWith": "$light-linear-gauge" + }, + { + "name": "$_light-radial-gauge", + "replaceWith": "$light-radial-gauge" + }, + { + "name": "$_fluent-linear-gauge", + "replaceWith": "$fluent-linear-gauge" + }, + { + "name": "$_fluent-radial-gauge", + "replaceWith": "$fluent-radial-gauge" + }, + { + "name": "$_bootstrap-linear-gauge", + "replaceWith": "$bootstrap-linear-gauge" + }, + { + "name": "$_bootstrap-radial-gauge", + "replaceWith": "$bootstrap-radial-gauge" + }, + { + "name": "$_indigo-linear-gauge", + "replaceWith": "$indigo-linear-gauge" + }, + { + "name": "$_indigo-radial-gauge", + "replaceWith": "$indigo-radial-gauge" + }, + { + "name": "$_dark-linear-gauge", + "replaceWith": "$dark-linear-gauge" + }, + { + "name": "$_dark-radial-gauge", + "replaceWith": "$dark-radial-gauge" + }, + { + "name": "$_dark-fluent-linear-gauge", + "replaceWith": "$dark-fluent-linear-gauge" + }, + { + "name": "$_dark-fluent-radial-gauge", + "replaceWith": "$dark-fluent-radial-gauge" + }, + { + "name": "$_dark-bootstrap-linear-gauge", + "replaceWith": "$dark-bootstrap-linear-gauge" + }, + { + "name": "$_dark-bootstrap-radial-gauge", + "replaceWith": "$dark-bootstrap-radial-gauge" + }, + { + "name": "$_dark-indigo-linear-gauge", + "replaceWith": "$dark-indigo-linear-gauge" + }, + { + "name": "$_dark-indigo-radial-gauge", + "replaceWith": "$dark-indigo-radial-gauge" + }, + { + "name": "$_light-geo-map", + "replaceWith": "$light-geo-map" + }, + { + "name": "$_fluent-geo-map", + "replaceWith": "$fluent-geo-map" + }, + { + "name": "$_bootstrap-geo-map", + "replaceWith": "$bootstrap-geo-map" + }, + { + "name": "$_indigo-geo-map", + "replaceWith": "$indigo-geo-map" + }, + { + "name": "$_dark-geo-map", + "replaceWith": "$dark-geo-map" + }, + { + "name": "$_dark-fluent-geo-map", + "replaceWith": "$dark-fluent-geo-map" + }, + { + "name": "$_dark-bootstrap-geo-map", + "replaceWith": "$dark-bootstrap-geo-map" + }, + { + "name": "$_dark-indigo-geo-map", + "replaceWith": "$dark-indigo-geo-map" + }, + { + "name": "$_light-graph", + "replaceWith": "$light-graph" + }, + { + "name": "$_fluent-graph", + "replaceWith": "$fluent-graph" + }, + { + "name": "$_bootstrap-graph", + "replaceWith": "$bootstrap-graph" + }, + { + "name": "$_indigo-graph", + "replaceWith": "$indigo-graph" + }, + { + "name": "$_dark-graph", + "replaceWith": "$dark-graph" + }, + { + "name": "$_dark-fluent-graph", + "replaceWith": "$dark-fluent-graph" + }, + { + "name": "$_dark-bootstrap-graph", + "replaceWith": "$dark-bootstrap-graph" + }, + { + "name": "$_dark-indigo-graph", + "replaceWith": "$dark-indigo-graph" + }, + { + "name": "$_light-grid-filtering", + "replaceWith": "$light-grid-filtering" + }, + { + "name": "$_fluent-grid-filtering", + "replaceWith": "$fluent-grid-filtering" + }, + { + "name": "$_bootstrap-grid-filtering", + "replaceWith": "$bootstrap-grid-filtering" + }, + { + "name": "$_indigo-grid-filtering", + "replaceWith": "$indigo-grid-filtering" + }, + { + "name": "$_dark-grid-filtering", + "replaceWith": "$dark-grid-filtering" + }, + { + "name": "$_dark-fluent-grid-filtering", + "replaceWith": "$dark-fluent-grid-filtering" + }, + { + "name": "$_dark-bootstrap-grid-filtering", + "replaceWith": "$dark-bootstrap-grid-filtering" + }, + { + "name": "$_dark-indigo-grid-filtering", + "replaceWith": "$dark-indigo-grid-filtering" + }, + { + "name": "$_light-grid-summary", + "replaceWith": "$light-grid-summary" + }, + { + "name": "$_fluent-grid-summary", + "replaceWith": "$fluent-grid-summary" + }, + { + "name": "$_bootstrap-grid-summary", + "replaceWith": "$bootstrap-grid-summary" + }, + { + "name": "$_indigo-grid-summary", + "replaceWith": "$indigo-grid-summary" + }, + { + "name": "$_dark-grid-summary", + "replaceWith": "$dark-grid-summary" + }, + { + "name": "$_dark-fluent-grid-summary", + "replaceWith": "$dark-fluent-grid-summary" + }, + { + "name": "$_dark-bootstrap-grid-summary", + "replaceWith": "$dark-bootstrap-grid-summary" + }, + { + "name": "$_dark-indigo-grid-summary", + "replaceWith": "$dark-indigo-grid-summary" + }, + { + "name": "$_light-grid-toolbar", + "replaceWith": "$light-grid-toolbar" + }, + { + "name": "$_fluent-grid-toolbar", + "replaceWith": "$fluent-grid-toolbar" + }, + { + "name": "$_bootstrap-grid-toolbar", + "replaceWith": "$bootstrap-grid-toolbar" + }, + { + "name": "$_indigo-grid-toolbar", + "replaceWith": "$indigo-grid-toolbar" + }, + { + "name": "$_base-dark-grid-toolbar", + "replaceWith": "$base-dark-grid-toolbar" + }, + { + "name": "$_dark-grid-toolbar", + "replaceWith": "$dark-grid-toolbar" + }, + { + "name": "$_dark-fluent-grid-toolbar", + "replaceWith": "$dark-fluent-grid-toolbar" + }, + { + "name": "$_dark-bootstrap-grid-toolbar", + "replaceWith": "$dark-bootstrap-grid-toolbar" + }, + { + "name": "$_dark-indigo-grid-toolbar", + "replaceWith": "$dark-indigo-grid-toolbar" + }, + { + "name": "$_default-shape-grid", + "replaceWith": "$default-shape-grid" + }, + { + "name": "$_round-shape-grid", + "replaceWith": "$round-shape-grid" + }, + { + "name": "$_square-shape-grid", + "replaceWith": "$square-shape-grid" + }, + { + "name": "$_fluent-shape-grid", + "replaceWith": "$fluent-shape-grid" + }, + { + "name": "$_bootstrap-shape-grid", + "replaceWith": "$bootstrap-shape-grid" + }, + { + "name": "$_default-elevation-grid", + "replaceWith": "$default-elevation-grid" + }, + { + "name": "$_fluent-elevation-grid", + "replaceWith": "$fluent-elevation-grid" + }, + { + "name": "$_light-grid", + "replaceWith": "$light-grid" + }, + { + "name": "$_fluent-grid", + "replaceWith": "$fluent-grid" + }, + { + "name": "$_bootstrap-grid", + "replaceWith": "$bootstrap-grid" + }, + { + "name": "$_indigo-grid", + "replaceWith": "$indigo-grid" + }, + { + "name": "$_base-dark-grid", + "replaceWith": "$base-dark-grid" + }, + { + "name": "$_dark-grid", + "replaceWith": "$dark-grid" + }, + { + "name": "$_dark-fluent-grid", + "replaceWith": "$dark-fluent-grid" + }, + { + "name": "$_dark-bootstrap-grid", + "replaceWith": "$dark-bootstrap-grid" + }, + { + "name": "$_dark-indigo-grid", + "replaceWith": "$dark-indigo-grid" + }, + { + "name": "$_light-highlight", + "replaceWith": "$light-highlight" + }, + { + "name": "$_fluent-highlight", + "replaceWith": "$fluent-highlight" + }, + { + "name": "$_bootstrap-highlight", + "replaceWith": "$bootstrap-highlight" + }, + { + "name": "$_indigo-highlight", + "replaceWith": "$indigo-highlight" + }, + { + "name": "$_dark-highlight", + "replaceWith": "$dark-highlight" + }, + { + "name": "$_dark-fluent-highlight", + "replaceWith": "$dark-fluent-highlight" + }, + { + "name": "$_dark-bootstrap-highlight", + "replaceWith": "$dark-bootstrap-highlight" + }, + { + "name": "$_dark-indigo-highlight", + "replaceWith": "$dark-indigo-highlight" + }, + { + "name": "$_light-icon", + "replaceWith": "$light-icon" + }, + { + "name": "$_fluent-icon", + "replaceWith": "$fluent-icon" + }, + { + "name": "$_bootstrap-icon", + "replaceWith": "$bootstrap-icon" + }, + { + "name": "$_indigo-icon", + "replaceWith": "$indigo-icon" + }, + { + "name": "$_dark-icon", + "replaceWith": "$dark-icon" + }, + { + "name": "$_dark-fluent-icon", + "replaceWith": "$dark-fluent-icon" + }, + { + "name": "$_dark-bootstrap-icon", + "replaceWith": "$dark-bootstrap-icon" + }, + { + "name": "$_dark-indigo-icon", + "replaceWith": "$dark-indigo-icon" + }, + { + "name": "$_default-shape-input-group", + "replaceWith": "$default-shape-input-group" + }, + { + "name": "$_round-shape-input-group", + "replaceWith": "$round-shape-input-group" + }, + { + "name": "$_square-shape-input-group", + "replaceWith": "$square-shape-input-group" + }, + { + "name": "$_fluent-shape-input-group", + "replaceWith": "$fluent-shape-input-group" + }, + { + "name": "$_default-elevation-input-group", + "replaceWith": "$default-elevation-input-group" + }, + { + "name": "$_fluent-elevation-input-group", + "replaceWith": "$fluent-elevation-input-group" + }, + { + "name": "$_indigo-elevation-input-group", + "replaceWith": "$indigo-elevation-input-group" + }, + { + "name": "$_light-input-group", + "replaceWith": "$light-input-group" + }, + { + "name": "$_fluent-input-group", + "replaceWith": "$fluent-input-group" + }, + { + "name": "$_bootstrap-input-group", + "replaceWith": "$bootstrap-input-group" + }, + { + "name": "$_indigo-input-group", + "replaceWith": "$indigo-input-group" + }, + { + "name": "$_base-dark-input-group", + "replaceWith": "$base-dark-input-group" + }, + { + "name": "$_dark-input-group", + "replaceWith": "$dark-input-group" + }, + { + "name": "$_dark-fluent-input-group", + "replaceWith": "$dark-fluent-input-group" + }, + { + "name": "$_dark-bootstrap-input-group", + "replaceWith": "$dark-bootstrap-input-group" + }, + { + "name": "$_dark-indigo-input-group", + "replaceWith": "$dark-indigo-input-group" + }, + { + "name": "$_default-shape-list", + "replaceWith": "$default-shape-list" + }, + { + "name": "$_round-shape-list", + "replaceWith": "$round-shape-list" + }, + { + "name": "$_square-shape-list", + "replaceWith": "$square-shape-list" + }, + { + "name": "$_bootstrap-shape-list", + "replaceWith": "$bootstrap-shape-list" + }, + { + "name": "$_indigo-shape-list", + "replaceWith": "$indigo-shape-list" + }, + { + "name": "$_light-list", + "replaceWith": "$light-list" + }, + { + "name": "$_fluent-list", + "replaceWith": "$fluent-list" + }, + { + "name": "$_bootstrap-list", + "replaceWith": "$bootstrap-list" + }, + { + "name": "$_indigo-list", + "replaceWith": "$indigo-list" + }, + { + "name": "$_base-dark-list", + "replaceWith": "$base-dark-list" + }, + { + "name": "$_dark-list", + "replaceWith": "$dark-list" + }, + { + "name": "$_dark-fluent-list", + "replaceWith": "$dark-fluent-list" + }, + { + "name": "$_dark-bootstrap-list", + "replaceWith": "$dark-bootstrap-list" + }, + { + "name": "$_dark-indigo-list", + "replaceWith": "$dark-indigo-list" + }, + { + "name": "$_default-elevation-navbar", + "replaceWith": "$default-elevation-navbar" + }, + { + "name": "$_bootstrap-elevation-navbar", + "replaceWith": "$bootstrap-elevation-navbar" + }, + { + "name": "$_indigo-elevation-navbar", + "replaceWith": "" + }, + { + "name": "$_light-navbar", + "replaceWith": "$light-navbar" + }, + { + "name": "$_fluent-navbar", + "replaceWith": "$fluent-navbar" + }, + { + "name": "$_bootstrap-navbar", + "replaceWith": "$bootstrap-navbar" + }, + { + "name": "$_indigo-navbar", + "replaceWith": "$indigo-navbar" + }, + { + "name": "$_default-shape-navdrawer", + "replaceWith": "$default-shape-navdrawer" + }, + { + "name": "$_round-shape-navdrawer", + "replaceWith": "$round-shape-navdrawer" + }, + { + "name": "$_square-shape-navdrawer", + "replaceWith": "$square-shape-navdrawer" + }, + { + "name": "$_indigo-shape-navdrawer", + "replaceWith": "$indigo-shape-navdrawer" + }, + { + "name": "$_default-elevation-navdrawer", + "replaceWith": "$default-elevation-navdrawer" + }, + { + "name": "$_indigo-elevation-navdrawer", + "replaceWith": "$indigo-elevation-navdrawer" + }, + { + "name": "$_light-navdrawer", + "replaceWith": "$light-navdrawer" + }, + { + "name": "$_fluent-navdrawer", + "replaceWith": "$fluent-navdrawer" + }, + { + "name": "$_bootstrap-navdrawer", + "replaceWith": "$bootstrap-navdrawer" + }, + { + "name": "$_indigo-navdrawer", + "replaceWith": "$indigo-navdrawer" + }, + { + "name": "$_dark-navdrawer", + "replaceWith": "$dark-navdrawer" + }, + { + "name": "$_dark-fluent-navdrawer", + "replaceWith": "$dark-fluent-navdrawer" + }, + { + "name": "$_dark-bootstrap-navdrawer", + "replaceWith": "$dark-bootstrap-navdrawer" + }, + { + "name": "$_dark-indigo-navdrawer", + "replaceWith": "$dark-indigo-navdrawer" + }, + { + "name": "$_light-overlay", + "replaceWith": "$light-overlay" + }, + { + "name": "$_fluent-overlay", + "replaceWith": "$fluent-overlay" + }, + { + "name": "$_bootstrap-overlay", + "replaceWith": "$bootstrap-overlay" + }, + { + "name": "$_indigo-overlay", + "replaceWith": "$indigo-overlay" + }, + { + "name": "$_dark-overlay", + "replaceWith": "$dark-overlay" + }, + { + "name": "$_dark-fluent-overlay", + "replaceWith": "$dark-fluent-overlay" + }, + { + "name": "$_dark-bootstrap-overlay", + "replaceWith": "$dark-bootstrap-overlay" + }, + { + "name": "$_dark-indigo-overlay", + "replaceWith": "$dark-indigo-overlay" + }, + { + "name": "$_light-pagination", + "replaceWith": "$light-pagination" + }, + { + "name": "$_fluent-pagination", + "replaceWith": "$fluent-pagination" + }, + { + "name": "$_bootstrap-pagination", + "replaceWith": "$bootstrap-pagination" + }, + { + "name": "$_indigo-pagination", + "replaceWith": "$indigo-pagination" + }, + { + "name": "$_base-dark-pagination", + "replaceWith": "$base-dark-pagination" + }, + { + "name": "$_dark-pagination", + "replaceWith": "$dark-pagination" + }, + { + "name": "$_dark-fluent-pagination", + "replaceWith": "$dark-fluent-pagination" + }, + { + "name": "$_dark-bootstrap-pagination", + "replaceWith": "$dark-bootstrap-pagination" + }, + { + "name": "$_dark-indigo-pagination", + "replaceWith": "$dark-indigo-pagination" + }, + { + "name": "$_light-pie-chart", + "replaceWith": "$light-pie-chart" + }, + { + "name": "$_fluent-pie-chart", + "replaceWith": "$fluent-pie-chart" + }, + { + "name": "$_bootstrap-pie-chart", + "replaceWith": "$bootstrap-pie-chart" + }, + { + "name": "$_indigo-pie-chart", + "replaceWith": "$indigo-pie-chart" + }, + { + "name": "$_dark-pie-chart", + "replaceWith": "$dark-pie-chart" + }, + { + "name": "$_dark-fluent-pie-chart", + "replaceWith": "$dark-fluent-pie-chart" + }, + { + "name": "$_dark-bootstrap-pie-chart", + "replaceWith": "$dark-bootstrap-pie-chart" + }, + { + "name": "$_dark-indigo-pie-chart", + "replaceWith": "$dark-indigo-pie-chart" + }, + { + "name": "$_default-shape-progress", + "replaceWith": "$default-shape-progress" + }, + { + "name": "$_round-shape-progress", + "replaceWith": "$round-shape-progress" + }, + { + "name": "$_square-shape-progress", + "replaceWith": "$square-shape-progress" + }, + { + "name": "$_fluent-shape-progress", + "replaceWith": "$fluent-shape-progress" + }, + { + "name": "$_bootstrap-shape-progress", + "replaceWith": "$bootstrap-shape-progress" + }, + { + "name": "$_light-progress-linear", + "replaceWith": "$light-progress-linear" + }, + { + "name": "$_fluent-progress-linear", + "replaceWith": "$fluent-progress-linear" + }, + { + "name": "$_bootstrap-progress-linear", + "replaceWith": "$bootstrap-progress-linear" + }, + { + "name": "$_indigo-progress-linear", + "replaceWith": "$indigo-progress-linear" + }, + { + "name": "$_light-progress-circular", + "replaceWith": "$light-progress-circular" + }, + { + "name": "$_fluent-progress-circular", + "replaceWith": "$fluent-progress-circular" + }, + { + "name": "$_bootstrap-progress-circular", + "replaceWith": "$bootstrap-progress-circular" + }, + { + "name": "$_indigo-progress-circular", + "replaceWith": "$indigo-progress-circular" + }, + { + "name": "$_dark-progress-linear", + "replaceWith": "$dark-progress-linear" + }, + { + "name": "$_dark-fluent-progress-linear", + "replaceWith": "$dark-fluent-progress-linear" + }, + { + "name": "$_dark-bootstrap-progress-linear", + "replaceWith": "$dark-bootstrap-progress-linear" + }, + { + "name": "$_dark-indigo-progress-linear", + "replaceWith": "$dark-indigo-progress-linear" + }, + { + "name": "$_dark-progress-circular", + "replaceWith": "$dark-progress-circular" + }, + { + "name": "$_dark-fluent-progress-circular", + "replaceWith": "$dark-fluent-progress-circular" + }, + { + "name": "$_dark-bootstrap-progress-circular", + "replaceWith": "$dark-bootstrap-progress-circular" + }, + { + "name": "$_dark-indigo-progress-circular", + "replaceWith": "$dark-indigo-progress-circular" + }, + { + "name": "$_light-radio", + "replaceWith": "$light-radio" + }, + { + "name": "$_fluent-radio", + "replaceWith": "$fluent-radio" + }, + { + "name": "$_bootstrap-radio", + "replaceWith": "$bootstrap-radio" + }, + { + "name": "$_indigo-radio", + "replaceWith": "$indigo-radio" + }, + { + "name": "$_dark-radio", + "replaceWith": "$dark-radio" + }, + { + "name": "$_dark-fluent-radio", + "replaceWith": "$dark-fluent-radio" + }, + { + "name": "$_dark-bootstrap-radio", + "replaceWith": "$dark-bootstrap-radio" + }, + { + "name": "$_dark-indigo-radio", + "replaceWith": "$dark-indigo-radio" + }, + { + "name": "$_light-ripple", + "replaceWith": "$light-ripple" + }, + { + "name": "$_fluent-ripple", + "replaceWith": "$fluent-ripple" + }, + { + "name": "$_bootstrap-ripple", + "replaceWith": "$bootstrap-ripple" + }, + { + "name": "$_indigo-ripple", + "replaceWith": "$indigo-ripple" + }, + { + "name": "$_dark-ripple", + "replaceWith": "$dark-ripple" + }, + { + "name": "$_dark-fluent-ripple", + "replaceWith": "$dark-fluent-ripple" + }, + { + "name": "$_dark-bootstrap-ripple", + "replaceWith": "$dark-bootstrap-ripple" + }, + { + "name": "$_dark-indigo-ripple", + "replaceWith": "$dark-indigo-ripple" + }, + { + "name": "$_light-scrollbar", + "replaceWith": "$light-scrollbar" + }, + { + "name": "$_fluent-scrollbar", + "replaceWith": "$fluent-scrollbar" + }, + { + "name": "$_bootstrap-scrollbar", + "replaceWith": "$bootstrap-scrollbar" + }, + { + "name": "$_indigo-scrollbar", + "replaceWith": "$indigo-scrollbar" + }, + { + "name": "$_dark-scrollbar", + "replaceWith": "$dark-scrollbar" + }, + { + "name": "$_dark-fluent-scrollbar", + "replaceWith": "$dark-fluent-scrollbar" + }, + { + "name": "$_dark-bootstrap-scrollbar", + "replaceWith": "$dark-bootstrap-scrollbar" + }, + { + "name": "$_dark-indigo-scrollbar", + "replaceWith": "$dark-indigo-scrollbar" + }, + { + "name": "$_light-shape-chart", + "replaceWith": "$light-shape-chart" + }, + { + "name": "$_fluent-shape-chart", + "replaceWith": "$fluent-shape-chart" + }, + { + "name": "$_bootstrap-shape-chart", + "replaceWith": "$bootstrap-shape-chart" + }, + { + "name": "$_indigo-shape-chart", + "replaceWith": "$indigo-shape-chart" + }, + { + "name": "$_dark-shape-chart", + "replaceWith": "$dark-shape-chart" + }, + { + "name": "$_dark-fluent-shape-chart", + "replaceWith": "$dark-fluent-shape-chart" + }, + { + "name": "$_dark-bootstrap-shape-chart", + "replaceWith": "$dark-bootstrap-shape-chart" + }, + { + "name": "$_dark-indigo-shape-chart", + "replaceWith": "$dark-indigo-shape-chart" + }, + { + "name": "$_light-slider", + "replaceWith": "$light-slider" + }, + { + "name": "$_fluent-slider", + "replaceWith": "$fluent-slider" + }, + { + "name": "$_bootstrap-slider", + "replaceWith": "$bootstrap-slider" + }, + { + "name": "$_indigo-slider", + "replaceWith": "$indigo-slider" + }, + { + "name": "$_dark-slider", + "replaceWith": "$dark-slider" + }, + { + "name": "$_dark-fluent-slider", + "replaceWith": "$dark-fluent-slider" + }, + { + "name": "$_dark-bootstrap-slider", + "replaceWith": "$dark-bootstrap-slider" + }, + { + "name": "$_dark-indigo-slider", + "replaceWith": "$dark-indigo-slider" + }, + { + "name": "$_default-shape-snackbar", + "replaceWith": "$default-shape-snackbar" + }, + { + "name": "$_round-shape-snackbar", + "replaceWith": "$round-shape-snackbar" + }, + { + "name": "$_square-shape-snackbar", + "replaceWith": "$square-shape-snackbar" + }, + { + "name": "$_fluent-shape-snackbar", + "replaceWith": "$fluent-shape-snackbar" + }, + { + "name": "$_bootstrap-shape-snackbar", + "replaceWith": "$bootstrap-shape-snackbar" + }, + { + "name": "$_indigo-shape-snackbar", + "replaceWith": "$indigo-shape-snackbar" + }, + { + "name": "$_default-elevation-snackbar", + "replaceWith": "$default-elevation-snackbar" + }, + { + "name": "$_bootstrap-elevation-snackbar", + "replaceWith": "$bootstrap-elevation-snackbar" + }, + { + "name": "$_light-snackbar", + "replaceWith": "$light-snackbar" + }, + { + "name": "$_fluent-snackbar", + "replaceWith": "$fluent-snackbar" + }, + { + "name": "$_bootstrap-snackbar", + "replaceWith": "$bootstrap-snackbar" + }, + { + "name": "$_indigo-snackbar", + "replaceWith": "$indigo-snackbar" + }, + { + "name": "$_dark-snackbar", + "replaceWith": "$dark-snackbar" + }, + { + "name": "$_dark-fluent-snackbar", + "replaceWith": "$dark-fluent-snackbar" + }, + { + "name": "$_dark-bootstrap-snackbar", + "replaceWith": "$dark-bootstrap-snackbar" + }, + { + "name": "$_dark-indigo-snackbar", + "replaceWith": "$dark-indigo-snackbar" + }, + { + "name": "$_light-sparkline", + "replaceWith": "$light-sparkline" + }, + { + "name": "$_fluent-sparkline", + "replaceWith": "$fluent-sparkline" + }, + { + "name": "$_bootstrap-sparkline", + "replaceWith": "$bootstrap-sparkline" + }, + { + "name": "$_indigo-sparkline", + "replaceWith": "$indigo-sparkline" + }, + { + "name": "$_dark-sparkline", + "replaceWith": "$dark-sparkline" + }, + { + "name": "$_dark-fluent-sparkline", + "replaceWith": "$dark-fluent-sparkline" + }, + { + "name": "$_dark-bootstrap-sparkline", + "replaceWith": "$dark-bootstrap-sparkline" + }, + { + "name": "$_dark-indigo-sparkline", + "replaceWith": "$dark-indigo-sparkline" + }, + { + "name": "$_round-shape-splitter", + "replaceWith": "$round-shape-splitter" + }, + { + "name": "$_square-shape-splitter", + "replaceWith": "$square-shape-splitter" + }, + { + "name": "$_light-splitter", + "replaceWith": "$light-splitter" + }, + { + "name": "$_fluent-splitter", + "replaceWith": "$fluent-splitter" + }, + { + "name": "$_bootstrap-splitter", + "replaceWith": "$bootstrap-splitter" + }, + { + "name": "$_indigo-splitter", + "replaceWith": "$indigo-splitter" + }, + { + "name": "$_dark-splitter", + "replaceWith": "$dark-splitter" + }, + { + "name": "$_dark-fluent-splitter", + "replaceWith": "$dark-fluent-splitter" + }, + { + "name": "$_dark-bootstrap-splitter", + "replaceWith": "$dark-bootstrap-splitter" + }, + { + "name": "$_dark-indigo-splitter", + "replaceWith": "$dark-indigo-splitter" + }, + { + "name": "$_default-shape-switch", + "replaceWith": "$default-shape-switch" + }, + { + "name": "$_round-shape-switch", + "replaceWith": "$round-shape-switch" + }, + { + "name": "$_square-shape-switch", + "replaceWith": "$square-shape-switch" + }, + { + "name": "$_fluent-shape-switch", + "replaceWith": "$fluent-shape-switch" + }, + { + "name": "$_bootstrap-shape-switch", + "replaceWith": "$bootstrap-shape-switch" + }, + { + "name": "$_indigo-shape-switch", + "replaceWith": "$indigo-shape-switch" + }, + { + "name": "$_default-elevation-switch", + "replaceWith": "$default-elevation-switch" + }, + { + "name": "$_light-switch", + "replaceWith": "$light-switch" + }, + { + "name": "$_fluent-switch", + "replaceWith": "$fluent-switch" + }, + { + "name": "$_bootstrap-switch", + "replaceWith": "$bootstrap-switch" + }, + { + "name": "$_indigo-switch", + "replaceWith": "$indigo-switch" + }, + { + "name": "$_base-dark-switch", + "replaceWith": "$base-dark-switch" + }, + { + "name": "$_dark-switch", + "replaceWith": "$dark-switch" + }, + { + "name": "$_dark-fluent-switch", + "replaceWith": "$dark-fluent-switch" + }, + { + "name": "$_dark-bootstrap-switch", + "replaceWith": "$dark-bootstrap-switch" + }, + { + "name": "$_dark-indigo-switch", + "replaceWith": "$dark-indigo-switch" + }, + { + "name": "$_default-shape-tabs", + "replaceWith": "$default-shape-tabs" + }, + { + "name": "$_round-shape-tabs:", + "replaceWith": "$round-shape-tabs:" + }, + { + "name": "$_square-shape-tabs", + "replaceWith": "$square-shape-tabs" + }, + { + "name": "$_fluent-shape-tabs", + "replaceWith": "$fluent-shape-tabs" + }, + { + "name": "$_bootstrap-shape-tabs", + "replaceWith": "$bootstrap-shape-tabs" + }, + { + "name": "$_light-tabs", + "replaceWith": "$light-tabs" + }, + { + "name": "$_fluent-tabs", + "replaceWith": "$fluent-tabs" + }, + { + "name": "$_bootstrap-tabs", + "replaceWith": "$bootstrap-tabs" + }, + { + "name": "$_indigo-tabs", + "replaceWith": "$indigo-tabs" + }, + { + "name": "$_base-dark-tabs", + "replaceWith": "$base-dark-tabs" + }, + { + "name": "$_dark-tabs", + "replaceWith": "$dark-tabs" + }, + { + "name": "$_dark-fluent-tabs", + "replaceWith": "$dark-fluent-tabs" + }, + { + "name": "$_dark-bootstrap-tabs", + "replaceWith": "$dark-bootstrap-tabs" + }, + { + "name": "$_dark-indigo-tabs", + "replaceWith": "$dark-indigo-tabs" + }, + { + "name": "$_default-shape-time-picker", + "replaceWith": "$default-shape-time-picker" + }, + { + "name": "$_round-shape-time-picker", + "replaceWith": "$round-shape-time-picker" + }, + { + "name": "$_square-shape-time-picker", + "replaceWith": "$square-shape-time-picker" + }, + { + "name": "$_fluent-shape-time-picker", + "replaceWith": "$fluent-shape-time-picker" + }, + { + "name": "$_bootstrap-shape-time-picker", + "replaceWith": "$bootstrap-shape-time-picker" + }, + { + "name": "$_indigo-shape-time-picker", + "replaceWith": "$indigo-shape-time-picker" + }, + { + "name": "$_default-elevation-time-picker", + "replaceWith": "$default-elevation-time-picker" + }, + { + "name": "$_light-time-picker", + "replaceWith": "$light-time-picker" + }, + { + "name": "$_fluent-time-picker", + "replaceWith": "$fluent-time-picker" + }, + { + "name": "$_bootstrap-time-picker", + "replaceWith": "$bootstrap-time-picker" + }, + { + "name": "$_indigo-time-picker", + "replaceWith": "$indigo-time-picker" + }, + { + "name": "$_dark-time-picker", + "replaceWith": "$dark-time-picker" + }, + { + "name": "$_dark-fluent-time-picker", + "replaceWith": "$dark-fluent-time-picker" + }, + { + "name": "$_dark-bootstrap-time-picker", + "replaceWith": "$dark-bootstrap-time-picker" + }, + { + "name": "$_dark-indigo-time-picker", + "replaceWith": "$dark-indigo-time-picker" + }, + { + "name": "$_default-shape-toast", + "replaceWith": "$default-shape-toast" + }, + { + "name": "$_round-shape-toast", + "replaceWith": "$round-shape-toast" + }, + { + "name": "$_square-shape-toast", + "replaceWith": "$square-shape-toast" + }, + { + "name": "$_fluent-shape-toast", + "replaceWith": "$fluent-shape-toast" + }, + { + "name": "$_bootstrap-shape-toast", + "replaceWith": "$bootstrap-shape-toast" + }, + { + "name": "$_indigo-shape-toast", + "replaceWith": "$indigo-shape-toast" + }, + { + "name": "$_default-elevation-toast", + "replaceWith": "$default-elevation-toast" + }, + { + "name": "$_bootstrap-elevation-toast", + "replaceWith": "$bootstrap-elevation-toast" + }, + { + "name": "$_light-toast", + "replaceWith": "$light-toast" + }, + { + "name": "$_fluent-toast", + "replaceWith": "$fluent-toast" + }, + { + "name": "$_bootstrap-toast", + "replaceWith": "$bootstrap-toast" + }, + { + "name": "$_indigo-toast", + "replaceWith": "$indigo-toast" + }, + { + "name": "$_dark-toast", + "replaceWith": "$dark-toast" + }, + { + "name": "$_dark-fluent-toast", + "replaceWith": "$dark-fluent-toast" + }, + { + "name": "$_dark-bootstrap-toast", + "replaceWith": "$dark-bootstrap-toast" + }, + { + "name": "$_dark-indigo-toast", + "replaceWith": "$dark-indigo-toast" + }, + { + "name": "$_default-shape-tooltip", + "replaceWith": "$default-shape-tooltip" + }, + { + "name": "$_round-shape-tooltip", + "replaceWith": "$round-shape-tooltip" + }, + { + "name": "$_square-shape-tooltip", + "replaceWith": "$square-shape-tooltip" + }, + { + "name": "$_fluent-shape-tooltip", + "replaceWith": "$fluent-shape-tooltip" + }, + { + "name": "$_bootstrap-shape-tooltip", + "replaceWith": "$bootstrap-shape-tooltip" + }, + { + "name": "$_indigo-shape-tooltip", + "replaceWith": "$indigo-shape-tooltip" + }, + { + "name": "$_light-tooltip", + "replaceWith": "$light-tooltip" + }, + { + "name": "$_fluent-tooltip", + "replaceWith": "$fluent-tooltip" + }, + { + "name": "$_bootstrap-tooltip", + "replaceWith": "$bootstrap-tooltip" + }, + { + "name": "$_indigo-tooltip", + "replaceWith": "$indigo-tooltip" + }, + { + "name": "$_dark-tooltip", + "replaceWith": "$dark-tooltip" + }, + { + "name": "$_dark-fluent-tooltip", + "replaceWith": "$dark-fluent-tooltip" + }, + { + "name": "$_dark-bootstrap-tooltip", + "replaceWith": "$dark-bootstrap-tooltip" + }, + { + "name": "$_dark-indigo-tooltip:", + "replaceWith": "$dark-indigo-tooltip:" + }, + { + "name": "$_light-tree", + "replaceWith": "$light-tree" + }, + { + "name": "$_fluent-tree", + "replaceWith": "$fluent-tree" + }, + { + "name": "$_bootstrap-tree", + "replaceWith": "$bootstrap-tree" + }, + { + "name": "$_indigo-tree", + "replaceWith": "$indigo-tree" + }, + { + "name": "$_base-dark-tree", + "replaceWith": "$base-dark-tree" + }, + { + "name": "$_dark-tree", + "replaceWith": "$dark-tree" + }, + { + "name": "$_dark-fluent-tree", + "replaceWith": "$dark-fluent-tree" + }, + { + "name": "$_dark-bootstrap-tree", + "replaceWith": "$dark-bootstrap-tree" + }, + { + "name": "$_dark-indigo-tree", + "replaceWith": "$dark-indigo-tree" + }, + { + "name": "$_round-shape-watermark", + "replaceWith": "$round-shape-watermark" + }, + { + "name": "$_square-shape-watermark", + "replaceWith": "$square-shape-watermark" + }, + { + "name": "$_material-shape-watermark", + "replaceWith": "$material-shape-watermark" + }, + { + "name": "$_fluent-shape-watermark", + "replaceWith": "$fluent-shape-watermark" + }, + { + "name": "$_bootstrap-shape-watermark", + "replaceWith": "$bootstrap-shape-watermark" + }, + { + "name": "$_indigo-shape-watermark", + "replaceWith": "$indigo-shape-watermark" + }, + { + "name": "$_light-watermark-image", + "replaceWith": "$light-watermark-image" + }, + { + "name": "$_light-watermark", + "replaceWith": "$light-watermark" + }, + { + "name": "$_fluent-watermark", + "replaceWith": "$fluent-watermark" + }, + { + "name": "$_bootstrap-watermark", + "replaceWith": "$bootstrap-watermark" + }, + { + "name": "$_indigo-watermark", + "replaceWith": "$indigo-watermark" + }, + { + "name": "$_dark-watermark-image", + "replaceWith": "$dark-watermark-image" + }, + { + "name": "$_dark-watermark", + "replaceWith": "$dark-watermark" + }, + { + "name": "$_dark-fluent-watermark", + "replaceWith": "$dark-fluent-watermark" + }, + { + "name": "$_dark-bootstrap-watermark", + "replaceWith": "$dark-bootstrap-watermark" + }, + { + "name": "$_dark-indigo-watermark", + "replaceWith": "$dark-indigo-watermark" + } + ] +} diff --git a/projects/igniteui-angular/migrations/update-13_0_0/index.spec.ts b/projects/igniteui-angular/migrations/update-13_0_0/index.spec.ts index f6aba3d0fc0..9797e2b393a 100644 --- a/projects/igniteui-angular/migrations/update-13_0_0/index.spec.ts +++ b/projects/igniteui-angular/migrations/update-13_0_0/index.spec.ts @@ -81,85 +81,6 @@ describe(`Update to ${version}`, () => { pending('LS must be setup for tests.'); }); - /* eslint-disable arrow-parens */ - it('Should properly rename columns property to columnsCollection', async () => { - appTree.create('/testSrc/appPrefix/component/test.component.ts', - ` - import { IgxGridComponent } from 'igniteui-angular'; - export class MyClass { - @ViewChild(IgxGridComponent, { read: IgxGridComponent }) - public grid1: IgxGridComponent; - - public ngAfterViewInit() { - const columns = grid1.columns; - } - } - `); - - const tree = await schematicRunner - .runSchematicAsync(migrationName, {}, appTree) - .toPromise(); - - expect( - tree.readContent('/testSrc/appPrefix/component/test.component.ts') - ).toEqual( - ` - import { IgxGridComponent } from 'igniteui-angular'; - export class MyClass { - @ViewChild(IgxGridComponent, { read: IgxGridComponent }) - public grid1: IgxGridComponent; - - public ngAfterViewInit() { - const columns = grid1.columnsCollection; - } - } - ` - ); - }); - - it('Should properly rename columns property to columnsCollection - treeGrid', async () => { - appTree.create('/testSrc/appPrefix/component/test.component.ts', - ` - import { IgxTreeGridComponent } from 'igniteui-angular'; - export class MyClass { - @ViewChild(IgxTreeGridComponent, { read: IgxTreeGridComponent }) - public tGrid1: IgxTreeGridComponent; - - public ngAfterViewInit() { - const columns = this.tGrid1.columns; - } - - public soSth() { - const editableColumns = this.tGrid1.columns.filter(c => e.editable); - } - } - `); - - const tree = await schematicRunner - .runSchematicAsync(migrationName, {}, appTree) - .toPromise(); - - expect( - tree.readContent('/testSrc/appPrefix/component/test.component.ts') - ).toEqual( - ` - import { IgxTreeGridComponent } from 'igniteui-angular'; - export class MyClass { - @ViewChild(IgxTreeGridComponent, { read: IgxTreeGridComponent }) - public tGrid1: IgxTreeGridComponent; - - public ngAfterViewInit() { - const columns = this.tGrid1.columnsCollection; - } - - public soSth() { - const editableColumns = this.tGrid1.columnsCollection.filter(c => e.editable); - } - } - ` - ); - }); - it('should remove paging and paginationTemplate property and define a igx-paginator component with custom content', async () => { appTree.create( '/testSrc/appPrefix/component/test.component.html', ` @@ -184,7 +105,7 @@ describe(`Update to ${version}`, () => { expect(tree.readContent('/testSrc/appPrefix/component/test.component.html').replace(lineBreaksAndSpaceRegex, '')) .toEqual(`
-
+
{{col.field}}
diff --git a/projects/igniteui-angular/migrations/update-13_0_0/index.ts b/projects/igniteui-angular/migrations/update-13_0_0/index.ts index c58ecdefb4d..3636f4cc977 100644 --- a/projects/igniteui-angular/migrations/update-13_0_0/index.ts +++ b/projects/igniteui-angular/migrations/update-13_0_0/index.ts @@ -4,65 +4,16 @@ import { Tree } from '@angular-devkit/schematics'; import { UpdateChanges } from '../common/UpdateChanges'; -import { Element } from '@angular/compiler'; -import { findElementNodes, getSourceOffset, parseFile } from '../common/util'; const version = '13.0.0'; -export default (): Rule => (host: Tree, context: SchematicContext) => { +export default (): Rule => async (host: Tree, context: SchematicContext) => { context.logger.info(`Applying migration for Ignite UI for Angular to version ${version}`); const update = new UpdateChanges(__dirname, host, context); - const GRIDS = ['IgxGridComponent', 'IgxTreeGridComponent', 'IgxHierarchicalGridComponent']; - const TAGS = ['igx-grid', 'igx-tree-grid', 'igx-hierarchical-grid']; const tsFiles = update.tsFiles; const SERVICES = ['IgxCsvExporterService', 'IgxExcelExporterService']; - for (const path of update.templateFiles) { - findElementNodes(parseFile(host, path), TAGS) - .map(node => getSourceOffset(node as Element)) - .forEach(offset => { - const { file, node } = offset; - if (file.content.includes('columns')) { - const gridRef = node.attrs.find(e => e.name.includes('#')).name.substring(1); - const content = file.content.split(gridRef + '.columns').join(gridRef + '.columnsCollection'); - host.overwrite(path, content); - } - }); - } - - const getIndicesOf = (searchStr, str) => { - if (searchStr.length === 0) { - return []; - } - let startIndex = 0; - let index = 0; - const indexes = []; - while ((index = str.indexOf(searchStr, startIndex)) > -1) { - indexes.push(index); - startIndex = index + searchStr.length; - } - return indexes; - }; - - for (const path of tsFiles) { - let content = host.read(path)?.toString(); - GRIDS.forEach(grid => { - if (content.indexOf(grid) > -1) { - const indexes = getIndicesOf('@ViewChild', content); - indexes.forEach(index => { - const viewChildRef = content.substring(index, content.indexOf(';', index)).replace(/\s\s+/g, ' '); - if (viewChildRef.includes(grid)) { - const gridDeclaration = viewChildRef.substring(viewChildRef.indexOf(')') + 1).replace(/\:/g, '').trim(); - const gridName = gridDeclaration.split(' ')[1]; - content = content.split(gridName + '.columns').join(gridName + '.columnsCollection'); - host.overwrite(path, content); - } - }); - } - }); - } - const moduleTsFiles = tsFiles.filter(x => x.endsWith('.module.ts')); for (const path of moduleTsFiles) { let content = host.read(path)?.toString(); diff --git a/projects/igniteui-angular/migrations/update-6/index.ts b/projects/igniteui-angular/migrations/update-6/index.ts index 2ef310d9262..be8f19e079a 100644 --- a/projects/igniteui-angular/migrations/update-6/index.ts +++ b/projects/igniteui-angular/migrations/update-6/index.ts @@ -7,7 +7,7 @@ import { UpdateChanges } from '../common/UpdateChanges'; const version = '6.0.0'; -export default (): Rule => (host: Tree, context: SchematicContext) => { +export default (): Rule => async (host: Tree, context: SchematicContext) => { context.logger.info(`Applying migration for Ignite UI for Angular to version ${version}`); const update = new UpdateChanges(__dirname, host, context); diff --git a/projects/igniteui-angular/migrations/update-6_01/index.ts b/projects/igniteui-angular/migrations/update-6_01/index.ts index d03aa1ef20b..9afdb12e0c8 100644 --- a/projects/igniteui-angular/migrations/update-6_01/index.ts +++ b/projects/igniteui-angular/migrations/update-6_01/index.ts @@ -8,7 +8,7 @@ import { UpdateChanges } from '../common/UpdateChanges'; const version = '6.0.1'; -export default (): Rule => (host: Tree, context: SchematicContext) => { +export default (): Rule => async (host: Tree, context: SchematicContext) => { context.logger.info(`Applying migration for Ignite UI for Angular to version ${version}`); const update = new UpdateChanges(__dirname, host, context); diff --git a/projects/igniteui-angular/migrations/update-6_02/index.ts b/projects/igniteui-angular/migrations/update-6_02/index.ts index d30799fdd57..a3dfcbbf946 100644 --- a/projects/igniteui-angular/migrations/update-6_02/index.ts +++ b/projects/igniteui-angular/migrations/update-6_02/index.ts @@ -7,7 +7,7 @@ import { getProjects, getWorkspace } from '../common/util'; const version = '6.0.2'; -export default (): Rule => (host: Tree, context: SchematicContext) => { +export default (): Rule => async (host: Tree, context: SchematicContext) => { const themeImport = '~igniteui-angular/core/styles/themes'; const newThemeImport = '~igniteui-angular/lib/core/styles/themes'; const config = getWorkspace(host); diff --git a/projects/igniteui-angular/migrations/update-6_1/index.ts b/projects/igniteui-angular/migrations/update-6_1/index.ts index 4783e410810..4d746545419 100644 --- a/projects/igniteui-angular/migrations/update-6_1/index.ts +++ b/projects/igniteui-angular/migrations/update-6_1/index.ts @@ -7,7 +7,7 @@ import { UpdateChanges } from '../common/UpdateChanges'; const version = '6.1.0'; -export default (): Rule => (host: Tree, context: SchematicContext) => { +export default (): Rule => async (host: Tree, context: SchematicContext) => { context.logger.info(`Applying migration for Ignite UI for Angular to version ${version}`); const update = new UpdateChanges(__dirname, host, context); diff --git a/projects/igniteui-angular/migrations/update-6_2/index.ts b/projects/igniteui-angular/migrations/update-6_2/index.ts index cbd2b4fe063..2c7a17624a7 100644 --- a/projects/igniteui-angular/migrations/update-6_2/index.ts +++ b/projects/igniteui-angular/migrations/update-6_2/index.ts @@ -7,7 +7,7 @@ import { UpdateChanges } from '../common/UpdateChanges'; const version = '6.2.0'; -export default (): Rule => (host: Tree, context: SchematicContext) => { +export default (): Rule => async (host: Tree, context: SchematicContext) => { context.logger.info(`Applying migration for Ignite UI for Angular to version ${version}`); const update = new UpdateChanges(__dirname, host, context); diff --git a/projects/igniteui-angular/migrations/update-6_2_1/index.ts b/projects/igniteui-angular/migrations/update-6_2_1/index.ts index 5c7eb35b5a7..c1421e912a3 100644 --- a/projects/igniteui-angular/migrations/update-6_2_1/index.ts +++ b/projects/igniteui-angular/migrations/update-6_2_1/index.ts @@ -7,7 +7,7 @@ import { UpdateChanges } from '../common/UpdateChanges'; const version = '6.2.1'; -export default (): Rule => (host: Tree, context: SchematicContext) => { +export default (): Rule => async (host: Tree, context: SchematicContext) => { context.logger.info(`Applying migration for Ignite UI for Angular to version ${version}`); const update = new UpdateChanges(__dirname, host, context); diff --git a/projects/igniteui-angular/migrations/update-7_0_2/index.ts b/projects/igniteui-angular/migrations/update-7_0_2/index.ts index a4c47a3fa84..6ca48e75bdd 100644 --- a/projects/igniteui-angular/migrations/update-7_0_2/index.ts +++ b/projects/igniteui-angular/migrations/update-7_0_2/index.ts @@ -1,4 +1,3 @@ -/* eslint-disable import/no-extraneous-dependencies */ import { Rule, SchematicContext, @@ -8,7 +7,7 @@ import { UpdateChanges } from '../common/UpdateChanges'; const version = '7.0.2'; -export default (): Rule => (host: Tree, context: SchematicContext) => { +export default (): Rule => async (host: Tree, context: SchematicContext) => { context.logger.info(`Applying migration for Ignite UI for Angular to version ${version}`); const update = new UpdateChanges(__dirname, host, context); diff --git a/projects/igniteui-angular/migrations/update-7_3_4/index.ts b/projects/igniteui-angular/migrations/update-7_3_4/index.ts index 2e20b08814e..4ae6dd37bba 100644 --- a/projects/igniteui-angular/migrations/update-7_3_4/index.ts +++ b/projects/igniteui-angular/migrations/update-7_3_4/index.ts @@ -7,7 +7,7 @@ import { UpdateChanges } from '../common/UpdateChanges'; const version = '7.3.4'; -export default (): Rule => (host: Tree, context: SchematicContext) => { +export default (): Rule => async (host: Tree, context: SchematicContext) => { context.logger.info(`Applying migration for Ignite UI for Angular to version ${version}`); const update = new UpdateChanges(__dirname, host, context); diff --git a/projects/igniteui-angular/migrations/update-8_2_0/index.ts b/projects/igniteui-angular/migrations/update-8_2_0/index.ts index ff1ed0cfebd..dcb9c330d8e 100644 --- a/projects/igniteui-angular/migrations/update-8_2_0/index.ts +++ b/projects/igniteui-angular/migrations/update-8_2_0/index.ts @@ -7,7 +7,7 @@ import { UpdateChanges } from '../common/UpdateChanges'; const version = '8.2.0'; -export default (): Rule => (host: Tree, context: SchematicContext) => { +export default (): Rule => async (host: Tree, context: SchematicContext) => { context.logger.info(`Applying migration for Ignite UI for Angular to version ${version}`); const update = new UpdateChanges(__dirname, host, context); diff --git a/projects/igniteui-angular/migrations/update-8_2_3/index.ts b/projects/igniteui-angular/migrations/update-8_2_3/index.ts index d996acd03e6..cf343d72ddd 100644 --- a/projects/igniteui-angular/migrations/update-8_2_3/index.ts +++ b/projects/igniteui-angular/migrations/update-8_2_3/index.ts @@ -7,7 +7,7 @@ import { UpdateChanges } from '../common/UpdateChanges'; const version = '8.2.3'; -export default (): Rule => (host: Tree, context: SchematicContext) => { +export default (): Rule => async (host: Tree, context: SchematicContext) => { context.logger.info(`Applying migration for Ignite UI for Angular to version ${version}`); const update = new UpdateChanges(__dirname, host, context); diff --git a/projects/igniteui-angular/migrations/update-8_2_6/index.ts b/projects/igniteui-angular/migrations/update-8_2_6/index.ts index 807586bc360..66a762b3134 100644 --- a/projects/igniteui-angular/migrations/update-8_2_6/index.ts +++ b/projects/igniteui-angular/migrations/update-8_2_6/index.ts @@ -8,7 +8,7 @@ import { UpdateChanges } from '../common/UpdateChanges'; const version = '8.2.6'; -export default (): Rule => (host: Tree, context: SchematicContext) => { +export default (): Rule => async (host: Tree, context: SchematicContext) => { const themes = ['$_base-dark-grid-pagination', '$_dark-grid-pagination', '$_dark-fluent-grid-pagination', diff --git a/projects/igniteui-angular/migrations/update-9_0_0/index.ts b/projects/igniteui-angular/migrations/update-9_0_0/index.ts index 368332243a5..b7df2c5f5de 100644 --- a/projects/igniteui-angular/migrations/update-9_0_0/index.ts +++ b/projects/igniteui-angular/migrations/update-9_0_0/index.ts @@ -7,7 +7,7 @@ import { UpdateChanges } from '../common/UpdateChanges'; const version = '9.0.0'; -export default (): Rule => (host: Tree, context: SchematicContext) => { +export default (): Rule => async (host: Tree, context: SchematicContext) => { context.logger.info(`Applying migration for Ignite UI for Angular to version ${version}`); const update = new UpdateChanges(__dirname, host, context); diff --git a/projects/igniteui-angular/migrations/update-9_0_1/index.ts b/projects/igniteui-angular/migrations/update-9_0_1/index.ts index 5d3e7a11346..dfbecc5c27a 100644 --- a/projects/igniteui-angular/migrations/update-9_0_1/index.ts +++ b/projects/igniteui-angular/migrations/update-9_0_1/index.ts @@ -7,7 +7,7 @@ import { UpdateChanges } from '../common/UpdateChanges'; const version = '9.0.1'; -export default (): Rule => (host: Tree, context: SchematicContext) => { +export default (): Rule => async (host: Tree, context: SchematicContext) => { context.logger.info(`Applying migration for Ignite UI for Angular to version ${version}`); const update = new UpdateChanges(__dirname, host, context); diff --git a/projects/igniteui-angular/migrations/update-9_1_0/index.ts b/projects/igniteui-angular/migrations/update-9_1_0/index.ts index f64af9fa582..5bf720d2341 100644 --- a/projects/igniteui-angular/migrations/update-9_1_0/index.ts +++ b/projects/igniteui-angular/migrations/update-9_1_0/index.ts @@ -7,7 +7,7 @@ import { UpdateChanges, InputPropertyType, BoundPropertyObject } from '../common const version = '9.1.0'; -export default (): Rule => (host: Tree, context: SchematicContext) => { +export default (): Rule => async (host: Tree, context: SchematicContext) => { context.logger.info(`Applying migration for Ignite UI for Angular to version ${version}`); const update = new UpdateChanges(__dirname, host, context); diff --git a/projects/igniteui-angular/ng-package.json b/projects/igniteui-angular/ng-package.json index aae8ac0d339..4286401e071 100644 --- a/projects/igniteui-angular/ng-package.json +++ b/projects/igniteui-angular/ng-package.json @@ -6,13 +6,12 @@ "entryFile": "src/public_api.ts" }, "allowedNonPeerDependencies": [ - "@types/hammerjs", - "hammerjs", - "jszip", - "@juggle/resize-observer", - "igniteui-trial-watermark", - "lodash.mergewith", - "uuid", - "@igniteui/material-icons-extended" - ] + "@types/hammerjs", + "hammerjs", + "jszip", + "igniteui-trial-watermark", + "lodash.mergewith", + "uuid", + "@igniteui/material-icons-extended" + ] } diff --git a/projects/igniteui-angular/ng-package.prod.json b/projects/igniteui-angular/ng-package.prod.json index 6b77e6751f0..0166626b058 100644 --- a/projects/igniteui-angular/ng-package.prod.json +++ b/projects/igniteui-angular/ng-package.prod.json @@ -2,19 +2,15 @@ "$schema": "../../node_modules/ng-packagr/ng-package.schema.json", "dest": "../../dist/igniteui-angular", "lib": { - "entryFile": "src/public_api.ts", - "umdModuleIds": { - "@juggle/resize-observer": "ResizeObserver" - } + "entryFile": "src/public_api.ts" }, "allowedNonPeerDependencies": [ - "@types/hammerjs", - "hammerjs", - "jszip", - "@juggle/resize-observer", - "igniteui-trial-watermark", - "lodash.mergewith", - "uuid", - "@igniteui/material-icons-extended" - ] + "@types/hammerjs", + "hammerjs", + "jszip", + "igniteui-trial-watermark", + "lodash.mergewith", + "uuid", + "@igniteui/material-icons-extended" + ] } diff --git a/projects/igniteui-angular/package.json b/projects/igniteui-angular/package.json index 2de0053e59c..a68b6ac5f9a 100644 --- a/projects/igniteui-angular/package.json +++ b/projects/igniteui-angular/package.json @@ -7,7 +7,8 @@ "homepage": "https://www.infragistics.com/products/ignite-ui-angular", "repository": { "type": "git", - "url": "https://github.com/IgniteUI/igniteui-angular" + "url": "https://github.com/IgniteUI/igniteui-angular.git", + "directory": "projects/igniteui-angular" }, "bugs": { "url": "https://github.com/IgniteUI/igniteui-angular/issues" @@ -72,26 +73,43 @@ "dependencies": { "@types/hammerjs": "^2.0.40", "hammerjs": "^2.0.8", - "jszip": "^3.6.0", - "tslib": "^2.0.0", - "@juggle/resize-observer": "^3.3.0", + "jszip": "^3.7.1", + "tslib": "^2.3.0", "igniteui-trial-watermark": "^1.0.3", "lodash.mergewith": "^4.6.2", "uuid": "^8.3.0", - "@igniteui/material-icons-extended": "^2.8.0" + "@igniteui/material-icons-extended": "^2.10.0" + }, + "exports": { + "./schematics/*": { + "default": "./schematics/*" + }, + "./migrations/*": { + "default": "./migrations/*" + } }, "peerDependencies": { - "@angular/common": "^12.2.0", - "@angular/core": "^12.2.0", - "@angular/animations": "^12.2.0", - "@angular/forms": "^12.2.0", - "web-animations-js": "^2.3.2" + "@angular/common": "^13.0.0", + "@angular/core": "^13.0.0", + "@angular/animations": "^13.0.0", + "@angular/forms": "^13.0.0" }, "igxDevDependencies": { - "@igniteui/angular-schematics": "~12.2.820" + "@igniteui/angular-schematics": "~13.0.900-rc.0" }, "ng-update": { "migrations": "./migrations/migration-collection.json" }, - "schematics": "./schematics/collection.json" + "schematics": "./schematics/collection.json", + "exports": { + "./lib/core/styles/themes/index": { + "sass": "./lib/core/styles/themes/_index.scss" + }, + "./theming": { + "sass": "./lib/core/styles/themes/_index.scss" + }, + "./themes": { + "sass": "./lib/core/styles/themes/_index.scss" + } + } } diff --git a/projects/igniteui-angular/schematics/ng-add/add-normalize.ts b/projects/igniteui-angular/schematics/ng-add/add-normalize.ts index 09526192d9f..4d190fe435d 100644 --- a/projects/igniteui-angular/schematics/ng-add/add-normalize.ts +++ b/projects/igniteui-angular/schematics/ng-add/add-normalize.ts @@ -13,7 +13,7 @@ export const scssImport = + `@import '~minireset.css/minireset';\n`; -export const addResetCss = (workspace: workspaces.WorkspaceDefinition , host: Tree): boolean => { +export const addResetCss = (workspace: workspaces.WorkspaceDefinition, host: Tree): boolean => { const project = workspace.projects.get(workspace.extensions['defaultProject'] as string); let addPackage; const styleExts = ['scss', 'sass', 'css', 'less', 'styl']; diff --git a/projects/igniteui-angular/schematics/ng-add/index.spec.ts b/projects/igniteui-angular/schematics/ng-add/index.spec.ts index bbb443f7bcb..569f50b15d1 100644 --- a/projects/igniteui-angular/schematics/ng-add/index.spec.ts +++ b/projects/igniteui-angular/schematics/ng-add/index.spec.ts @@ -38,65 +38,6 @@ describe('ng-add schematics', () => { } }; - const browserslistrcEnabledIE = ` -# This file is used by the build system to adjust CSS and JS output to support the specified browsers below. -# For additional information regarding the format and rule options, please see: -# https://github.com/browserslist/browserslist#queries - -# For the full list of supported browsers by the Angular framework, please see: -# https://angular.io/guide/browser-support - -# You can see what browsers were selected by your queries by running: -# npx browserslist - -last 1 Chrome version -last 1 Firefox version -last 2 Edge major versions -last 2 Safari major versions -last 2 iOS major versions -Firefox ESR -IE 11 # Angular supports IE 11 only as an opt-in. To opt-in, remove the 'not' prefix on this line. -`; - - const browserslistrcDisabledIE = ` -# This file is used by the build system to adjust CSS and JS output to support the specified browsers below. -# For additional information regarding the format and rule options, please see: -# https://github.com/browserslist/browserslist#queries - -# For the full list of supported browsers by the Angular framework, please see: -# https://angular.io/guide/browser-support - -# You can see what browsers were selected by your queries by running: -# npx browserslist - -last 1 Chrome version -last 1 Firefox version -last 2 Edge major versions -last 2 Safari major versions -last 2 iOS major versions -Firefox ESR -not IE 11 # Angular supports IE 11 only as an opt-in. To opt-in, remove the 'not' prefix on this line. -`; - -const _browserslistrcMissingIE = ` -# This file is used by the build system to adjust CSS and JS output to support the specified browsers below. -# For additional information regarding the format and rule options, please see: -# https://github.com/browserslist/browserslist#queries - -# For the full list of supported browsers by the Angular framework, please see: -# https://angular.io/guide/browser-support - -# You can see what browsers were selected by your queries by running: -# npx browserslist - -last 1 Chrome version -last 1 Firefox version -last 2 Edge major versions -last 2 Safari major versions -last 2 iOS major versions -Firefox ESR -`; - const pkgJsonConfig = { dependencies: {}, devDependencies: {} @@ -289,41 +230,5 @@ Firefox ESR tree.delete(`${sourceRoot}/styles.styl`); }); - it('should properly add web animations', async () => { - await runner.runSchematicAsync('ng-add', { normalizeCss: false }, tree).toPromise(); - const pkgJsonData = JSON.parse(tree.readContent('/package.json')); - expect(pkgJsonData.dependencies['web-animations-js']).toBeTruthy(); - }); - - /** - * Projects generated with AngularCLI v10.0 or above have a '.browserslistrc' file in the root folder. - * The ng-add schematic will consider a project that contains the '.browserslistrc' file, as a project - * that is built with AngularCLI v10.0 or above. - */ - it('should enable IE support and uncomment the IE section in .browserslistrc', async () => { - tree.create(`/.browserslistrc`, browserslistrcDisabledIE); - await runner.runSchematicAsync('ng-add', { polyfills: true }, tree).toPromise(); - const browserslistrcFile = (tree.read('/.browserslistrc').toString()); - expect(browserslistrcFile).toMatch(browserslistrcEnabledIE); - }); - - it('should enable web-animations and object.entries properly on projects with ng cli version >= 7.3', async () => { - const polyfills = ` -/** IE10 and IE11 requires the following for NgClass support on SVG elements */ -// import 'classlist.js'; // Run \`npm install --save classlist.js\`. - -// import 'web-animations-js'; // Run \`npm install --save web-animations-js\`. - `; - - const result = ` -/** IE10 and IE11 requires the following for NgClass support on SVG elements */ -import 'classlist.js'; // Run \`npm install --save classlist.js\`. - -import 'web-animations-js'; // Run \`npm install --save web-animations-js\`. - `; - - tree.create(`${sourceRoot}/polyfills.ts`, polyfills); - await runner.runSchematicAsync('ng-add', { polyfills: true }, tree).toPromise(); - expect(tree.readContent(`${sourceRoot}/polyfills.ts`).replace(/\r\n/g, '\n')).toEqual(result.replace(/\r\n/g, '\n')); - }); }); + diff --git a/projects/igniteui-angular/schematics/ng-add/index.ts b/projects/igniteui-angular/schematics/ng-add/index.ts index b5efa7b2eba..388cad4d18d 100644 --- a/projects/igniteui-angular/schematics/ng-add/index.ts +++ b/projects/igniteui-angular/schematics/ng-add/index.ts @@ -2,86 +2,26 @@ import { workspaces } from '@angular-devkit/core'; import { chain, Rule, SchematicContext, Tree } from '@angular-devkit/schematics'; import { Options } from '../interfaces/options'; import { installPackageJsonDependencies } from '../utils/package-handler'; -import { - logSuccess, addDependencies, getConfigFile -} from '../utils/dependency-handler'; +import { logSuccess, addDependencies } from '../utils/dependency-handler'; import { addResetCss } from './add-normalize'; import { createHost } from '../utils/util'; -const enableIESupport = (tree: Tree, context: SchematicContext) => { - const targetFile = '/.browserslistrc'; - let updateFile = false; - let content = (tree.read(targetFile)?.toString()); - while (content?.includes('not IE')) { - content = content.replace('not IE', 'IE'); - updateFile = true; - } - if (updateFile) { - tree.overwrite(targetFile, content); - } else { - context.logger.warn(`Either IE support is already enabled OR you may need to update ${targetFile} file manually.`); - } -}; - -// Only required if AnimationBuilder is used (igniteui-angular does) & using IE/Edge or Safari -const updatePolyfillsForIESupport = (tree: Tree, targetFile: string, polyfillsData: any): void => { - // Target the web-animations-js commented import statement and uncomment it. - const webAnimationsLine = '// import \'web-animations-js\';'; - const classlistLine = '// import \'classlist.js\';'; - polyfillsData = polyfillsData.replace(webAnimationsLine, - webAnimationsLine.substring(3, webAnimationsLine.length)); - - polyfillsData = polyfillsData.replace(classlistLine, - classlistLine.substring(3, classlistLine.length)); - - tree.overwrite(targetFile, polyfillsData); -}; - -const readInput = (options: Options): Rule => - async (tree: Tree, context: SchematicContext) => { - const workspaceHost = createHost(tree); - const { workspace } = await workspaces.readWorkspace(tree.root.path, workspaceHost); - if (options.polyfills) { - const project = workspace.projects.get(workspace.extensions['defaultProject'] as string); - const polyfillsFilePath = getConfigFile(project, 'polyfills', context); - const browserslistrcFile = (tree.read('/.browserslistrc')); - const animationsWarn = 'You may want to manually uncomment \'// import \'web-animations-js\' in polyfills.ts'; - // .browserslistrc --> If project targets angular cli version >= 10.0 - if (browserslistrcFile) { - enableIESupport(tree, context); - } else { - context.logger.warn('.browserslistrc file not found. You may want to manually add it and enable IE support.'); - } - if (polyfillsFilePath) { - const polyfillsData = tree.read(polyfillsFilePath)?.toString(); - if (polyfillsData) { - updatePolyfillsForIESupport(tree, polyfillsFilePath, polyfillsData); - } else { - context.logger.warn('polyfills.ts file not found OR empty. ' + animationsWarn); - } - } else { - context.logger.warn('polyfills.ts file path not found. ' + animationsWarn); - } - } - }; - const addNormalize = (options: Options): Rule => - async (tree: Tree, context: SchematicContext) => { - if (options.resetCss) { - const workspaceHost = createHost(tree); - const { workspace } = await workspaces.readWorkspace(tree.root.path, createHost(tree)); - const result = addResetCss(workspace, tree); - await workspaces.writeWorkspace(workspace, workspaceHost); - if (!result) { - context.logger.warn(`Could not complete adding reset styles. Those may need to be added manually.`); - } - } - }; + async (tree: Tree, context: SchematicContext) => { + if (options.resetCss) { + const workspaceHost = createHost(tree); + const { workspace } = await workspaces.readWorkspace(tree.root.path, createHost(tree)); + const result = addResetCss(workspace, tree); + await workspaces.writeWorkspace(workspace, workspaceHost); + if (!result) { + context.logger.warn(`Could not complete adding reset styles. Those may need to be added manually.`); + } + } + }; export default (options: Options): Rule => chain([ - readInput(options), - addNormalize(options), - addDependencies(options), - installPackageJsonDependencies(options), - logSuccess(options) + addNormalize(options), + addDependencies(options), + installPackageJsonDependencies(options), + logSuccess(options) ]); diff --git a/projects/igniteui-angular/schematics/ng-add/schema.json b/projects/igniteui-angular/schematics/ng-add/schema.json index a0b28a9e808..0c7905ed8f2 100644 --- a/projects/igniteui-angular/schematics/ng-add/schema.json +++ b/projects/igniteui-angular/schematics/ng-add/schema.json @@ -4,12 +4,6 @@ "title": "IgniteUI for Angular ng-add schematic", "type": "object", "properties": { - "polyfills": { - "type": "boolean", - "description": "Add polyfills for IE.", - "default": false, - "x-prompt": "Enable polyfills for IE, Edge and Safari?" - }, "resetCss": { "type": "boolean", "description": "Add reset CSS lib", diff --git a/projects/igniteui-angular/schematics/package.json b/projects/igniteui-angular/schematics/package.json new file mode 100644 index 00000000000..1cd945a3bfd --- /dev/null +++ b/projects/igniteui-angular/schematics/package.json @@ -0,0 +1,3 @@ +{ + "type": "commonjs" +} diff --git a/projects/igniteui-angular/schematics/utils/dependency-handler.ts b/projects/igniteui-angular/schematics/utils/dependency-handler.ts index fcd3e64eda3..07cf94daca0 100644 --- a/projects/igniteui-angular/schematics/utils/dependency-handler.ts +++ b/projects/igniteui-angular/schematics/utils/dependency-handler.ts @@ -23,12 +23,10 @@ export const DEPENDENCIES_MAP: PackageEntry[] = [ { name: 'hammerjs', target: PackageTarget.REGULAR }, { name: 'jszip', target: PackageTarget.REGULAR }, { name: 'tslib', target: PackageTarget.NONE }, - { name: '@juggle/resize-observer', target: PackageTarget.REGULAR }, { name: '@types/hammerjs', target: PackageTarget.DEV }, { name: 'igniteui-trial-watermark', target: PackageTarget.NONE }, { name: 'lodash.mergewith', target: PackageTarget.NONE }, { name: 'uuid', target: PackageTarget.NONE }, - { name: 'web-animations-js', target: PackageTarget.REGULAR }, { name: '@igniteui/material-icons-extended', target: PackageTarget.REGULAR }, // peerDependencies { name: '@angular/forms', target: PackageTarget.NONE }, @@ -98,15 +96,6 @@ export const addDependencies = (options: Options) => async (tree: Tree, context: await includeDependencies(pkgJson, context, tree); - // Add web-animations-js to dependencies - Object.keys(pkgJson.peerDependencies).forEach(pkg => { - if (pkg.includes('web-animations')) { - const version = pkgJson.peerDependencies[pkg]; - addPackageToPkgJson(tree, pkg, version, PackageTarget.REGULAR); - logIncludingDependency(context, pkg, version); - return; - } - }); addPackageToPkgJson(tree, schematicsPackage, pkgJson.igxDevDependencies[schematicsPackage], PackageTarget.DEV); }; diff --git a/projects/igniteui-angular/src/lib/action-strip/action-strip.module.ts b/projects/igniteui-angular/src/lib/action-strip/action-strip.module.ts index c4e6808141f..6755b3dd7d8 100644 --- a/projects/igniteui-angular/src/lib/action-strip/action-strip.module.ts +++ b/projects/igniteui-angular/src/lib/action-strip/action-strip.module.ts @@ -23,8 +23,6 @@ import { IgxGridActionButtonComponent } from './grid-actions/grid-action-button. IgxGridActionsBaseDirective, IgxGridActionButtonComponent ], - entryComponents: [ - ], exports: [ IgxActionStripComponent, IgxActionStripMenuItemDirective, diff --git a/projects/igniteui-angular/src/lib/action-strip/grid-actions/grid-actions-base.directive.ts b/projects/igniteui-angular/src/lib/action-strip/grid-actions/grid-actions-base.directive.ts index 05a74b7c47e..2f8b0f48e07 100644 --- a/projects/igniteui-angular/src/lib/action-strip/grid-actions/grid-actions-base.directive.ts +++ b/projects/igniteui-angular/src/lib/action-strip/grid-actions/grid-actions-base.directive.ts @@ -65,7 +65,7 @@ export class IgxGridActionsBaseDirective implements AfterViewInit { * @internal * @param context */ - protected isRow(context): context is IgxRowDirective { + protected isRow(context): context is IgxRowDirective { return context && context instanceof IgxRowDirective; } } diff --git a/projects/igniteui-angular/src/lib/action-strip/public_api.ts b/projects/igniteui-angular/src/lib/action-strip/public_api.ts index 34ddbdee7b1..db72123d9be 100644 --- a/projects/igniteui-angular/src/lib/action-strip/public_api.ts +++ b/projects/igniteui-angular/src/lib/action-strip/public_api.ts @@ -1,5 +1,6 @@ export { IgxGridActionsBaseDirective } from './grid-actions/grid-actions-base.directive'; export { IgxGridEditingActionsComponent } from './grid-actions/grid-editing-actions.component'; export { IgxGridPinningActionsComponent } from './grid-actions/grid-pinning-actions.component'; -export { IgxActionStripComponent } from './action-strip.component'; +export { IgxActionStripComponent, IgxActionStripMenuItemDirective } from './action-strip.component'; +export { IgxGridActionButtonComponent } from './grid-actions/grid-action-button.component'; export * from './action-strip.module'; diff --git a/projects/igniteui-angular/src/lib/banner/banner.component.ts b/projects/igniteui-angular/src/lib/banner/banner.component.ts index 7ccca5d1f60..aea9e74639d 100644 --- a/projects/igniteui-angular/src/lib/banner/banner.component.ts +++ b/projects/igniteui-angular/src/lib/banner/banner.component.ts @@ -1,5 +1,14 @@ -import { Component, NgModule, EventEmitter, Output, Input, ViewChild, ElementRef, - ContentChild, HostBinding } from '@angular/core'; +import { + Component, + ContentChild, + ElementRef, + EventEmitter, + HostBinding, + Input, + NgModule, + Output, + ViewChild +} from '@angular/core'; import { IgxExpansionPanelModule } from '../expansion-panel/expansion-panel.module'; import { IgxExpansionPanelComponent } from '../expansion-panel/public_api'; import { IgxIconModule, IgxIconComponent } from '../icon/public_api'; @@ -171,7 +180,7 @@ export class IgxBannerComponent implements IToggleView { private _bannerEvent: BannerEventArgs; private _animationSettings: ToggleAnimationSettings; - constructor(public elementRef: ElementRef) { } + constructor(public elementRef: ElementRef) { } /** * Opens the banner diff --git a/projects/igniteui-angular/src/lib/banner/banner.directives.ts b/projects/igniteui-angular/src/lib/banner/banner.directives.ts index aec33450544..bc9ded96409 100644 --- a/projects/igniteui-angular/src/lib/banner/banner.directives.ts +++ b/projects/igniteui-angular/src/lib/banner/banner.directives.ts @@ -1,8 +1,5 @@ import { Directive } from '@angular/core'; /* eslint-disable @angular-eslint/directive-selector */ -@Directive({ - selector: 'igx-banner-actions' -}) -export class IgxBannerActionsDirective { -} +@Directive({ selector: 'igx-banner-actions' }) +export class IgxBannerActionsDirective { } diff --git a/projects/igniteui-angular/src/lib/banner/public_api.ts b/projects/igniteui-angular/src/lib/banner/public_api.ts new file mode 100644 index 00000000000..5b503ca6eee --- /dev/null +++ b/projects/igniteui-angular/src/lib/banner/public_api.ts @@ -0,0 +1,2 @@ +export * from './banner.component'; +export * from './banner.directives'; diff --git a/projects/igniteui-angular/src/lib/carousel/public_api.ts b/projects/igniteui-angular/src/lib/carousel/public_api.ts index 5c2ab1747b4..4e82234d664 100644 --- a/projects/igniteui-angular/src/lib/carousel/public_api.ts +++ b/projects/igniteui-angular/src/lib/carousel/public_api.ts @@ -1,3 +1,4 @@ export * from './carousel-base'; export * from './carousel.component'; export * from './slide.component'; +export * from './carousel.directives'; diff --git a/projects/igniteui-angular/src/lib/combo/combo-dropdown.component.ts b/projects/igniteui-angular/src/lib/combo/combo-dropdown.component.ts index 897a729ae22..64f5a8add0a 100644 --- a/projects/igniteui-angular/src/lib/combo/combo-dropdown.component.ts +++ b/projects/igniteui-angular/src/lib/combo/combo-dropdown.component.ts @@ -11,7 +11,6 @@ import { IgxDropDownItemBaseDirective } from '../drop-down/drop-down-item.base'; import { IgxSelectionAPIService } from '../core/selection'; import { IgxComboItemComponent } from './combo-item.component'; import { DisplayDensityToken, IDisplayDensityOptions } from '../core/density'; -import { PlatformUtil } from '../core/utils'; /** @hidden */ @Component({ @@ -80,12 +79,11 @@ export class IgxComboDropDownComponent extends IgxDropDownComponent implements I constructor( protected elementRef: ElementRef, protected cdr: ChangeDetectorRef, - protected platform: PlatformUtil, protected selection: IgxSelectionAPIService, @Inject(IGX_COMBO_COMPONENT) public combo: IgxComboBase, protected comboAPI: IgxComboAPIService, @Optional() @Inject(DisplayDensityToken) protected _displayDensityOptions: IDisplayDensityOptions) { - super(elementRef, cdr, platform, selection, _displayDensityOptions); + super(elementRef, cdr, selection, _displayDensityOptions); } /** diff --git a/projects/igniteui-angular/src/lib/combo/combo-item.component.ts b/projects/igniteui-angular/src/lib/combo/combo-item.component.ts index e65e206e091..2cb80c7f0bd 100644 --- a/projects/igniteui-angular/src/lib/combo/combo-item.component.ts +++ b/projects/igniteui-angular/src/lib/combo/combo-item.component.ts @@ -3,8 +3,7 @@ import { ElementRef, HostBinding, Inject, - Input, - DoCheck + Input } from '@angular/core'; import { IgxDropDownItemComponent } from '../drop-down/drop-down-item.component'; import { IGX_DROPDOWN_BASE, IDropDownBase, Navigate } from '../drop-down/drop-down.common'; @@ -16,7 +15,7 @@ import { IgxSelectionAPIService } from '../core/selection'; selector: 'igx-combo-item', templateUrl: 'combo-item.component.html' }) -export class IgxComboItemComponent extends IgxDropDownItemComponent implements DoCheck { +export class IgxComboItemComponent extends IgxDropDownItemComponent { /** * Gets the height of a list item @@ -113,7 +112,4 @@ export class IgxComboItemComponent extends IgxDropDownItemComponent implements D public disableCheck(event: MouseEvent) { event.preventDefault(); } - - public ngDoCheck() { - } } diff --git a/projects/igniteui-angular/src/lib/combo/combo.common.ts b/projects/igniteui-angular/src/lib/combo/combo.common.ts index 0239daf7caa..0e6b1fa8473 100644 --- a/projects/igniteui-angular/src/lib/combo/combo.common.ts +++ b/projects/igniteui-angular/src/lib/combo/combo.common.ts @@ -1,6 +1,23 @@ import { - AfterViewInit, ChangeDetectorRef, ContentChild, Directive, DoCheck, ElementRef, EventEmitter, - HostBinding, HostListener, Inject, InjectionToken, Injector, Input, OnDestroy, OnInit, Optional, Output, TemplateRef, ViewChild + AfterViewInit, + ChangeDetectorRef, + ContentChild, + Directive, + DoCheck, + ElementRef, + EventEmitter, + HostBinding, + HostListener, + Inject, + InjectionToken, + Injector, + Input, + OnDestroy, + OnInit, + Optional, + Output, + TemplateRef, + ViewChild } from '@angular/core'; import { AbstractControl, ControlValueAccessor, NgControl } from '@angular/forms'; import { caseSensitive } from '@igniteui/material-icons-extended'; @@ -9,7 +26,7 @@ import { takeUntil } from 'rxjs/operators'; import { DisplayDensityBase, DisplayDensityToken, IDisplayDensityOptions } from '../core/displayDensity'; import { IgxSelectionAPIService } from '../core/selection'; import { CancelableBrowserEventArgs, cloneArray, IBaseCancelableBrowserEventArgs, IBaseEventArgs } from '../core/utils'; -import { SortingDirection } from '../data-operations/sorting-expression.interface'; +import { SortingDirection } from '../data-operations/sorting-strategy'; import { IForOfState, IgxForOfDirective } from '../directives/for-of/for_of.directive'; import { IgxIconService } from '../icon/public_api'; import { IgxInputGroupType, IGX_INPUT_GROUP_TYPE } from '../input-group/inputGroupType'; diff --git a/projects/igniteui-angular/src/lib/combo/combo.component.spec.ts b/projects/igniteui-angular/src/lib/combo/combo.component.spec.ts index bf7df182607..5e9382ccfd7 100644 --- a/projects/igniteui-angular/src/lib/combo/combo.component.spec.ts +++ b/projects/igniteui-angular/src/lib/combo/combo.component.spec.ts @@ -27,7 +27,7 @@ import { AbsoluteScrollStrategy, ConnectedPositioningStrategy } from '../service import { IgxSelectionAPIService } from '../core/selection'; import { IgxIconService } from '../icon/public_api'; import { IBaseCancelableBrowserEventArgs } from '../core/utils'; -import { SortingDirection } from '../data-operations/sorting-expression.interface'; +import { SortingDirection } from '../data-operations/sorting-strategy'; import { IgxComboState } from './combo.common'; const CSS_CLASS_COMBO = 'igx-combo'; diff --git a/projects/igniteui-angular/src/lib/combo/combo.component.ts b/projects/igniteui-angular/src/lib/combo/combo.component.ts index bed2f307b91..ed3653bc480 100644 --- a/projects/igniteui-angular/src/lib/combo/combo.component.ts +++ b/projects/igniteui-angular/src/lib/combo/combo.component.ts @@ -440,29 +440,51 @@ export class IgxComboComponent extends IgxComboBaseDirective implements AfterVie * @hidden */ @NgModule({ - declarations: [IgxComboComponent, IgxComboItemComponent, IgxComboGroupingPipe, - IgxComboFilteringPipe, IgxComboDropDownComponent, IgxComboAddItemComponent, - IgxComboItemDirective, - IgxComboEmptyDirective, - IgxComboHeaderItemDirective, - IgxComboHeaderDirective, - IgxComboFooterDirective, + declarations: [ + IgxComboAddItemComponent, IgxComboAddItemDirective, - IgxComboToggleIconDirective, - IgxComboClearIconDirective], - exports: [IgxComboComponent, IgxComboItemComponent, IgxComboDropDownComponent, IgxComboAddItemComponent, - IgxComboGroupingPipe, // TODO: create common ng module + IgxComboClearIconDirective, + IgxComboComponent, + IgxComboDropDownComponent, + IgxComboEmptyDirective, IgxComboFilteringPipe, + IgxComboFooterDirective, + IgxComboGroupingPipe, + IgxComboHeaderDirective, + IgxComboHeaderItemDirective, + IgxComboItemComponent, IgxComboItemDirective, + IgxComboToggleIconDirective + ], + exports: [ + IgxComboAddItemComponent, + IgxComboAddItemDirective, + IgxComboClearIconDirective, + IgxComboComponent, + IgxComboDropDownComponent, IgxComboEmptyDirective, - IgxComboHeaderItemDirective, - IgxComboHeaderDirective, + IgxComboFilteringPipe, IgxComboFooterDirective, - IgxComboAddItemDirective, + IgxComboGroupingPipe, + IgxComboHeaderDirective, + IgxComboHeaderItemDirective, + IgxComboItemComponent, + IgxComboItemDirective, IgxComboToggleIconDirective, - IgxComboClearIconDirective, - IgxInputGroupModule], - imports: [IgxRippleModule, CommonModule, IgxInputGroupModule, FormsModule, ReactiveFormsModule, - IgxForOfModule, IgxToggleModule, IgxCheckboxModule, IgxDropDownModule, IgxButtonModule, IgxIconModule] + IgxInputGroupModule + ], + imports: [ + CommonModule, + FormsModule, + IgxButtonModule, + IgxCheckboxModule, + IgxDropDownModule, + IgxForOfModule, + IgxIconModule, + IgxInputGroupModule, + IgxRippleModule, + IgxToggleModule, + ReactiveFormsModule + ] }) export class IgxComboModule { } diff --git a/projects/igniteui-angular/src/lib/combo/combo.directives.ts b/projects/igniteui-angular/src/lib/combo/combo.directives.ts index 5b6cbfc91ff..0891bda46d1 100644 --- a/projects/igniteui-angular/src/lib/combo/combo.directives.ts +++ b/projects/igniteui-angular/src/lib/combo/combo.directives.ts @@ -3,73 +3,48 @@ import { Directive } from '@angular/core'; /** * @hidden */ -@Directive({ - selector: '[igxComboHeader]' -}) -export class IgxComboHeaderDirective { -} +@Directive({ selector: '[igxComboHeader]' }) +export class IgxComboHeaderDirective { } /** * @hidden */ -@Directive({ - selector: '[igxComboFooter]' -}) -export class IgxComboFooterDirective { -} +@Directive({ selector: '[igxComboFooter]' }) +export class IgxComboFooterDirective { } /** * @hidden */ -@Directive({ - selector: '[igxComboItem]' -}) -export class IgxComboItemDirective { -} +@Directive({ selector: '[igxComboItem]' }) +export class IgxComboItemDirective { } /** * @hidden */ -@Directive({ - selector: '[igxComboEmpty]' -}) -export class IgxComboEmptyDirective { -} +@Directive({ selector: '[igxComboEmpty]' }) +export class IgxComboEmptyDirective { } /** * @hidden */ -@Directive({ - selector: '[igxComboHeaderItem]' -}) - -export class IgxComboHeaderItemDirective { -} +@Directive({ selector: '[igxComboHeaderItem]' }) +export class IgxComboHeaderItemDirective { } /** * @hidden */ -@Directive({ - selector: '[igxComboAddItem]' -}) -export class IgxComboAddItemDirective { -} +@Directive({ selector: '[igxComboAddItem]' }) +export class IgxComboAddItemDirective { } /** * @hidden */ -@Directive({ - selector: '[igxComboToggleIcon]' -}) -export class IgxComboToggleIconDirective { -} +@Directive({ selector: '[igxComboToggleIcon]' }) +export class IgxComboToggleIconDirective { } /** * @hidden */ -@Directive({ - selector: '[igxComboClearIcon]' -}) -export class IgxComboClearIconDirective { -} +@Directive({ selector: '[igxComboClearIcon]' }) +export class IgxComboClearIconDirective { } diff --git a/projects/igniteui-angular/src/lib/combo/combo.pipes.ts b/projects/igniteui-angular/src/lib/combo/combo.pipes.ts index d511dc7e8cb..eb24ebbf884 100644 --- a/projects/igniteui-angular/src/lib/combo/combo.pipes.ts +++ b/projects/igniteui-angular/src/lib/combo/combo.pipes.ts @@ -1,9 +1,8 @@ import { Inject, Pipe, PipeTransform } from '@angular/core'; import { cloneArray } from '../core/utils'; import { DataUtil } from '../data-operations/data-util'; -import { SortingDirection } from '../data-operations/sorting-expression.interface'; import { IGX_COMBO_COMPONENT, IgxComboBase } from './combo.common'; -import { DefaultSortingStrategy } from '../data-operations/sorting-strategy'; +import { DefaultSortingStrategy, SortingDirection } from '../data-operations/sorting-strategy'; import { IComboFilteringOptions } from './combo.component'; @@ -37,9 +36,7 @@ export class IgxComboFilteringPipe implements PipeTransform { /** * @hidden */ -@Pipe({ - name: 'comboGrouping' -}) +@Pipe({ name: 'comboGrouping' }) export class IgxComboGroupingPipe implements PipeTransform { constructor(@Inject(IGX_COMBO_COMPONENT) public combo: IgxComboBase) { } diff --git a/projects/igniteui-angular/src/lib/combo/public_api.ts b/projects/igniteui-angular/src/lib/combo/public_api.ts index d7f63d39226..8435cae962f 100644 --- a/projects/igniteui-angular/src/lib/combo/public_api.ts +++ b/projects/igniteui-angular/src/lib/combo/public_api.ts @@ -1 +1,6 @@ export * from './combo.component'; +export * from './combo.directives'; +export { IgxComboAddItemComponent } from './combo-add-item.component'; +export { IgxComboDropDownComponent } from './combo-dropdown.component'; +export { IgxComboItemComponent } from './combo-item.component'; +export * from './combo.pipes'; diff --git a/projects/igniteui-angular/src/lib/core/setImmediate.ts b/projects/igniteui-angular/src/lib/core/setImmediate.ts index 8e8d6f4c668..0780d40114b 100644 --- a/projects/igniteui-angular/src/lib/core/setImmediate.ts +++ b/projects/igniteui-angular/src/lib/core/setImmediate.ts @@ -36,7 +36,6 @@ const run = (id) => { const listener = (event) => run(event.data); // Use function instead of arrow function to workaround an issue in codesandbox -// eslint-disable-next-line prefer-arrow/prefer-arrow-functions export function setImmediate(cb: () => void, ...args) { if (window.setImmediate) { return window.setImmediate(cb); @@ -57,7 +56,6 @@ export function setImmediate(cb: () => void, ...args) { return counter; } -// eslint-disable-next-line prefer-arrow/prefer-arrow-functions export function clearImmediate(id: any) { if (window.clearImmediate) { return window.clearImmediate(id); diff --git a/projects/igniteui-angular/src/lib/core/styles/base/_index.scss b/projects/igniteui-angular/src/lib/core/styles/base/_index.scss index 61152c62a8a..097ac3204ea 100644 --- a/projects/igniteui-angular/src/lib/core/styles/base/_index.scss +++ b/projects/igniteui-angular/src/lib/core/styles/base/_index.scss @@ -1,5 +1,4 @@ -@import 'variables'; -@import 'linear-channel-values'; -@import 'utilities/index'; -@import 'animations/index'; -@import 'elevations/index'; +@forward 'variables'; +@forward 'animations'; +@forward 'elevations'; +@forward 'utilities'; diff --git a/projects/igniteui-angular/src/lib/core/styles/base/_linear-channel-values.scss b/projects/igniteui-angular/src/lib/core/styles/base/_linear-channel-values.scss deleted file mode 100644 index 21380892786..00000000000 --- a/projects/igniteui-angular/src/lib/core/styles/base/_linear-channel-values.scss +++ /dev/null @@ -1,289 +0,0 @@ -//// -/// @group base -/// @access private -/// @author Google Inc. -/// -//// - -// Copyright 2017 Google Inc. All Rights Reserved. -// -// Licensed under the Apache License, Version 2.0 (the "License"); -// you may not use this file except in compliance with the License. -// You may obtain a copy of the License at -// -// http://www.apache.org/licenses/LICENSE-2.0 -// -// Unless required by applicable law or agreed to in writing, software -// distributed under the License is distributed on an "AS IS" BASIS, -// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. -// See the License for the specific language governing permissions and -// limitations under the License. -// - -/// This lookup table is needed since there is no `pow` in SASS. -/// Pre-computed linear color channel values, for use in contrast calculations. -/// See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests -/// -/// @example javascript - Algorithm, for c in 0 to 255: -/// f(c) { -/// c = c / 255; -/// return c < 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4); -/// } -/// -/// @type List -$linear-channel-values: 0 - .0003035269835488375 - .000607053967097675 - .0009105809506465125 - .00121410793419535 - .0015176349177441874 - .001821161901293025 - .0021246888848418626 - .0024282158683907 - .0027317428519395373 - .003035269835488375 - .003346535763899161 - .003676507324047436 - .004024717018496307 - .004391442037410293 - .004776953480693729 - .005181516702338386 - .005605391624202723 - .006048833022857054 - .006512090792594475 - .006995410187265387 - .007499032043226175 - .008023192985384994 - .008568125618069307 - .009134058702220787 - .00972121732023785 - .010329823029626936 - .010960094006488246 - .011612245179743885 - .012286488356915872 - .012983032342173012 - .013702083047289686 - .014443843596092545 - .01520851442291271 - .01599629336550963 - .016807375752887384 - .017641954488384078 - .018500220128379697 - .019382360956935723 - .0202885630566524 - .021219010376003555 - .022173884793387385 - .02315336617811041 - .024157632448504756 - .02518685962736163 - .026241221894849898 - .027320891639074894 - .028426039504420793 - .0295568344378088 - .030713443732993635 - .03189603307301153 - .033104766570885055 - .03433980680868217 - .03560131487502034 - .03688945040110004 - .0382043715953465 - .03954623527673284 - .04091519690685319 - .042311410620809675 - .043735029256973465 - .04518620438567554 - .046665086336880095 - .04817182422688942 - .04970656598412723 - .05126945837404324 - .052860647023180246 - .05448027644244237 - .05612849004960009 - .05780543019106723 - .0595112381629812 - .06124605423161761 - .06301001765316767 - .06480326669290577 - .06662593864377289 - .06847816984440017 - .07036009569659588 - .07227185068231748 - .07421356838014963 - .07618538148130785 - .07818742180518633 - .08021982031446832 - .0822827071298148 - .08437621154414882 - .08650046203654976 - .08865558628577294 - .09084171118340768 - .09305896284668745 - .0953074666309647 - .09758734714186246 - .09989872824711389 - .10224173308810132 - .10461648409110419 - .10702310297826761 - .10946171077829933 - .1119324278369056 - .11443537382697373 - .11697066775851084 - .11953842798834562 - .12213877222960187 - .12477181756095049 - .12743768043564743 - .1301364766903643 - .13286832155381798 - .13563332965520566 - .13843161503245183 - .14126329114027164 - .14412847085805777 - .14702726649759498 - .14995978981060856 - .15292615199615017 - .1559264637078274 - .1589608350608804 - .162029375639111 - .1651321945016676 - .16826940018969075 - .1714411007328226 - .17464740365558504 - .17788841598362912 - .18116424424986022 - .184474994500441 - .18782077230067787 - .19120168274079138 - .1946178304415758 - .19806931955994886 - .20155625379439707 - .20507873639031693 - .20863687014525575 - .21223075741405523 - .21586050011389926 - .2195261997292692 - .2232279573168085 - .22696587351009836 - .23074004852434915 - .23455058216100522 - .238397573812271 - .24228112246555486 - .24620132670783548 - .25015828472995344 - .25415209433082675 - .2581828529215958 - .26225065752969623 - .26635560480286247 - .2704977910130658 - .27467731206038465 - .2788942634768104 - .2831487404299921 - .2874408377269175 - .29177064981753587 - .2961382707983211 - .3005437944157765 - .3049873140698863 - .30946892281750854 - .31398871337571754 - .31854677812509186 - .32314320911295075 - .3277780980565422 - .33245153634617935 - .33716361504833037 - .3419144249086609 - .3467040563550296 - .35153259950043936 - .3564001441459435 - .3613067797835095 - .3662525955988395 - .3712376804741491 - .3762621229909065 - .38132601143253014 - .386429433787049 - .39157247774972326 - .39675523072562685 - .4019777798321958 - .4072402119017367 - .41254261348390375 - .4178850708481375 - .4232676699860717 - .4286904966139066 - .43415363617474895 - .4396571738409188 - .44520119451622786 - .45078578283822346 - .45641102318040466 - .4620769996544071 - .467783796112159 - .47353149614800955 - .4793201831008268 - .4851499400560704 - .4910208498478356 - .4969329950608704 - .5028864580325687 - .5088813208549338 - .5149176653765214 - .5209955732043543 - .5271151257058131 - .5332764040105052 - .5394794890121072 - .5457244613701866 - .5520114015120001 - .5583403896342679 - .5647115057049292 - .5711248294648731 - .5775804404296506 - .5840784178911641 - .5906188409193369 - .5972017883637634 - .6038273388553378 - .6104955708078648 - .6172065624196511 - .6239603916750761 - .6307571363461468 - .6375968739940326 - .6444796819705821 - .6514056374198242 - .6583748172794485 - .665387298282272 - .6724431569576875 - .6795424696330938 - .6866853124353135 - .6938717612919899 - .7011018919329731 - .7083757798916868 - .7156935005064807 - .7230551289219693 - .7304607400903537 - .7379104087727308 - .7454042095403874 - .7529422167760779 - .7605245046752924 - .768151147247507 - .7758222183174236 - .7835377915261935 - .7912979403326302 - .799102738014409 - .8069522576692516 - .8148465722161012 - .8227857543962835 - .8307698767746546 - .83879901174074 - .846873231509858 - .8549926081242338 - .8631572134541023 - .8713671191987972 - .8796223968878317 - .8879231178819663 - .8962693533742664 - .9046611743911496 - .9130986517934192 - .9215818562772946 - .9301108583754237 - .938685728457888 - .9473065367331999 - .9559733532492861 - .9646862478944651 - .9734452903984125 - .9822505503331171 - .9911020971138298 - 1; diff --git a/projects/igniteui-angular/src/lib/core/styles/base/_variables.scss b/projects/igniteui-angular/src/lib/core/styles/base/_variables.scss index 7a587330e4b..4cb45505268 100644 --- a/projects/igniteui-angular/src/lib/core/styles/base/_variables.scss +++ b/projects/igniteui-angular/src/lib/core/styles/base/_variables.scss @@ -20,6 +20,117 @@ $keyframes: () !default; /// @type List $components: () !default; -/// The global themes registry map. -$themes: () !default; +/// The palette as passed to the igx-theme mixin. +$theme-palette: ( + primary: ( + 50: #c0c0ff, + '50-contrast': black, + 100: #a7a7fa, + '100-contrast': black, + 200: #6d6df1, + '200-contrast': black, + 300: #3c3cf2, + '300-contrast': white, + 400: #1d1df7, + '400-contrast': white, + 500: blue, + '500-contrast': white, + 600: #0000e5, + '600-contrast': white, + 700: #0000d2, + '700-contrast': white, + 800: #0000be, + '800-contrast': white, + 900: #0000a8, + '900-contrast': white, + 'A100': #55f, + 'A100-contrast': white, + 'A200': #2727ff, + 'A200-contrast': white, + 'A400': #0000eb, + 'A400-contrast': white, + 'A700': #00a, + 'A700-contrast': white + ), + secondary: ( + 50: #ffc0c0, + '50-contrast': black, + 100: #faa7a7, + '100-contrast': black, + 200: #f16d6d, + '200-contrast': black, + 300: #f23c3c, + '300-contrast': black, + 400: #f71d1d, + '400-contrast': black, + 500: var(--some-dynamic-color), + '500-contrast': black, + 600: #e50000, + '600-contrast': white, + 700: #d20000, + '700-contrast': white, + 800: #be0000, + '800-contrast': white, + 900: #a80000, + '900-contrast': white, + 'A100': #f55, + 'A100-contrast': black, + 'A200': #ff2727, + 'A200-contrast': black, + 'A400': #eb0000, + 'A400-contrast': white, + 'A700': #a00, + 'A700-contrast': white + ), + grays: ( + 50: hsl(0, 0%, 98%), + '50-contrast': black, + 100: hsl(0, 0%, 96%), + '100-contrast': black, + 200: hsl(0, 0%, 93%), + '200-contrast': black, + 300: hsl(0, 0%, 88%), + '300-contrast': black, + 400: hsl(0, 0%, 74%), + '400-contrast': black, + 500: hsl(0, 0%, 62%), + '500-contrast': black, + 600: hsl(0, 0%, 54%), + '600-contrast': black, + 700: hsl(0, 0%, 38%), + '700-contrast': white, + 800: hsl(0, 0%, 26%), + '800-contrast': white, + 900: hsl(0, 0%, 13%), + '900-contrast': white, + ), + info: ( + 500: #1377d5, + '500-contrast': black + ), + success: ( + 500: #4eb862, + '500-contrast': black + ), + warn: ( + 500: #fbb13c, + '500-contrast': black + ), + error: ( + 500: #ff134a, + '500-contrast': black + ), + surface: ( + 500: #222, + '500-contrast': white + ) +) !default; +/// Determines the content direction. +$direction: ltr !default; + +/// Determines whether color-blind palettes are enabled. +$enhanced-accessibility: false !default; + +/// Stores a list of dropped component themes. +$dropped-themes: () !default; diff --git a/projects/igniteui-angular/src/lib/core/styles/base/animations/_index.scss b/projects/igniteui-angular/src/lib/core/styles/base/animations/_index.scss index d42d0bf03c2..ae0a04134a8 100644 --- a/projects/igniteui-angular/src/lib/core/styles/base/animations/_index.scss +++ b/projects/igniteui-angular/src/lib/core/styles/base/animations/_index.scss @@ -1,38 +1,38 @@ -// Easing Functions -@import 'easings'; +// Easing Functions +@forward 'easings'; // Generic Animations -@import 'generic/flip'; -@import 'generic/rotate'; -@import 'generic/scale'; -@import 'generic/shadows'; -@import 'generic/slide'; -@import 'generic/swing'; +@forward 'generic/flip'; +@forward 'generic/rotate'; +@forward 'generic/scale'; +@forward 'generic/shadows'; +@forward 'generic/slide'; +@forward 'generic/swing'; // Entrance Animations -@import 'entrances/bounce'; -@import 'entrances/fade'; -@import 'entrances/flicker'; -@import 'entrances/flip'; -@import 'entrances/puff'; -@import 'entrances/roll'; -@import 'entrances/rotate'; -@import 'entrances/scale'; -@import 'entrances/slide'; -@import 'entrances/slit'; -@import 'entrances/swing'; -@import 'entrances/swirl'; +@forward 'entrances/bounce'; +@forward 'entrances/fade'; +@forward 'entrances/flicker'; +@forward 'entrances/flip'; +@forward 'entrances/puff'; +@forward 'entrances/roll'; +@forward 'entrances/rotate'; +@forward 'entrances/scale'; +@forward 'entrances/slide'; +@forward 'entrances/slit'; +@forward 'entrances/swing'; +@forward 'entrances/swirl'; // Exit Animations -@import 'exits/bounce'; -@import 'exits/fade'; -@import 'exits/flicker'; -@import 'exits/flip'; -@import 'exits/puff'; -@import 'exits/roll'; -@import 'exits/rotate'; -@import 'exits/scale'; -@import 'exits/slide'; -@import 'exits/slit'; -@import 'exits/swing'; -@import 'exits/swirl'; +@forward 'exits/bounce'; +@forward 'exits/fade'; +@forward 'exits/flicker'; +@forward 'exits/flip'; +@forward 'exits/puff'; +@forward 'exits/roll'; +@forward 'exits/rotate'; +@forward 'exits/scale'; +@forward 'exits/slide'; +@forward 'exits/slit'; +@forward 'exits/swing'; +@forward 'exits/swirl'; diff --git a/projects/igniteui-angular/src/lib/core/styles/base/animations/entrances/_bounce.scss b/projects/igniteui-angular/src/lib/core/styles/base/animations/entrances/_bounce.scss index 822f372c147..4aa63a4c31e 100644 --- a/projects/igniteui-angular/src/lib/core/styles/base/animations/entrances/_bounce.scss +++ b/projects/igniteui-angular/src/lib/core/styles/base/animations/entrances/_bounce.scss @@ -1,3 +1,5 @@ +@use '../../utilities' as *; + //// /// @group animations /// @access public diff --git a/projects/igniteui-angular/src/lib/core/styles/base/animations/entrances/_fade.scss b/projects/igniteui-angular/src/lib/core/styles/base/animations/entrances/_fade.scss index 896e0c70855..0adb8f59d52 100644 --- a/projects/igniteui-angular/src/lib/core/styles/base/animations/entrances/_fade.scss +++ b/projects/igniteui-angular/src/lib/core/styles/base/animations/entrances/_fade.scss @@ -1,3 +1,5 @@ +@use '../../utilities' as *; + //// /// @group animations /// @access public @@ -79,7 +81,6 @@ } } - /// @requires {mixin} keyframes @mixin fade-in-left { @include keyframes(fade-in-left) { @@ -110,7 +111,6 @@ } } - /// @requires {mixin} keyframes @mixin fade-in-tl { @include keyframes(fade-in-tl) { @@ -168,154 +168,3 @@ } } } - -/// @requires {mixin} keyframes -@mixin fade-in-fwd { - @include keyframes(fade-in-fwd) { - 0% { - transform: translateZ(-80px); - opacity: 0; - } - - 100% { - transform: translateZ(0); - opacity: 1; - } - } -} - -/// @requires {mixin} keyframes -@mixin fade-in-bck { - @include keyframes(fade-in-bck) { - 0% { - transform: translateZ(80px); - opacity: 0; - } - - 100% { - transform: translateZ(0); - opacity: 1; - } - } -} - -/// @requires {mixin} keyframes -@mixin fade-in-top { - @include keyframes(fade-in-top) { - 0% { - transform: translateY(-50px); - opacity: 0; - } - - 100% { - transform: translateY(0); - opacity: 1; - } - } -} - -/// @requires {mixin} keyframes -@mixin fade-in-tr { - @include keyframes(fade-in-tr) { - 0% { - transform: translateX(50px) translateY(-50px); - opacity: 0; - } - - 100% { - transform: translateX(0) translateY(0); - opacity: 1; - } - } -} - -/// @requires {mixin} keyframes -@mixin fade-in-right { - @include keyframes(fade-in-right) { - 0% { - transform: translateX(50px); - opacity: 0; - } - - 100% { - transform: translateX(0); - opacity: 1; - } - } -} - -/// @requires {mixin} keyframes -@mixin fade-in-br { - @include keyframes(fade-in-br) { - 0% { - transform: translateX(50px) translateY(50px); - opacity: 0; - } - - 100% { - transform: translateX(0) translateY(0); - opacity: 1; - } - } -} - - -/// @requires {mixin} keyframes -@mixin fade-in-bottom { - @include keyframes(fade-in-bottom) { - 0% { - transform: translateY(50px); - opacity: 0; - } - - 100% { - transform: translateY(0); - opacity: 1; - } - } -} - -/// @requires {mixin} keyframes -@mixin fade-in-bl { - @include keyframes(fade-in-bl) { - 0% { - transform: translateX(-50px) translateY(50px); - opacity: 0; - } - - 100% { - transform: translateX(0) translateY(0); - opacity: 1; - } - } -} - -/// @requires {mixin} keyframes -@mixin fade-in-left { - @include keyframes(fade-in-left) { - 0% { - transform: translateX(-50px); - opacity: 0; - } - - 100% { - transform: translateX(0); - opacity: 1; - } - } -} - -/// @requires {mixin} keyframes -@mixin fade-in-tl { - @include keyframes(fade-in-tl) { - 0% { - transform: translateX(-50px) translateY(-50px); - opacity: 0; - } - - 100% { - transform: translateX(0) translateY(0); - opacity: 1; - } - } -} diff --git a/projects/igniteui-angular/src/lib/core/styles/base/animations/entrances/_flicker.scss b/projects/igniteui-angular/src/lib/core/styles/base/animations/entrances/_flicker.scss index 3e592f56794..34188636c0f 100644 --- a/projects/igniteui-angular/src/lib/core/styles/base/animations/entrances/_flicker.scss +++ b/projects/igniteui-angular/src/lib/core/styles/base/animations/entrances/_flicker.scss @@ -1,3 +1,5 @@ +@use '../../utilities' as *; + //// /// @group animations /// @access public diff --git a/projects/igniteui-angular/src/lib/core/styles/base/animations/entrances/_flip.scss b/projects/igniteui-angular/src/lib/core/styles/base/animations/entrances/_flip.scss index a7ca2af598d..ec04e227e38 100644 --- a/projects/igniteui-angular/src/lib/core/styles/base/animations/entrances/_flip.scss +++ b/projects/igniteui-angular/src/lib/core/styles/base/animations/entrances/_flip.scss @@ -1,3 +1,5 @@ +@use '../../utilities' as *; + //// /// @group animations /// @access public diff --git a/projects/igniteui-angular/src/lib/core/styles/base/animations/entrances/_puff.scss b/projects/igniteui-angular/src/lib/core/styles/base/animations/entrances/_puff.scss index 081e5c0f778..640fcada805 100644 --- a/projects/igniteui-angular/src/lib/core/styles/base/animations/entrances/_puff.scss +++ b/projects/igniteui-angular/src/lib/core/styles/base/animations/entrances/_puff.scss @@ -1,3 +1,5 @@ +@use '../../utilities' as *; + //// /// @group animations /// @access public diff --git a/projects/igniteui-angular/src/lib/core/styles/base/animations/entrances/_roll.scss b/projects/igniteui-angular/src/lib/core/styles/base/animations/entrances/_roll.scss index ec911395422..031ff6df0fc 100644 --- a/projects/igniteui-angular/src/lib/core/styles/base/animations/entrances/_roll.scss +++ b/projects/igniteui-angular/src/lib/core/styles/base/animations/entrances/_roll.scss @@ -1,3 +1,5 @@ +@use '../../utilities' as *; + //// /// @group animations /// @access public diff --git a/projects/igniteui-angular/src/lib/core/styles/base/animations/entrances/_rotate.scss b/projects/igniteui-angular/src/lib/core/styles/base/animations/entrances/_rotate.scss index 55ad85a132c..34c2bb1dde9 100644 --- a/projects/igniteui-angular/src/lib/core/styles/base/animations/entrances/_rotate.scss +++ b/projects/igniteui-angular/src/lib/core/styles/base/animations/entrances/_rotate.scss @@ -1,3 +1,5 @@ +@use '../../utilities' as *; + //// /// @group animations /// @access public diff --git a/projects/igniteui-angular/src/lib/core/styles/base/animations/entrances/_scale.scss b/projects/igniteui-angular/src/lib/core/styles/base/animations/entrances/_scale.scss index acad4873fe5..04a5959aaa6 100644 --- a/projects/igniteui-angular/src/lib/core/styles/base/animations/entrances/_scale.scss +++ b/projects/igniteui-angular/src/lib/core/styles/base/animations/entrances/_scale.scss @@ -1,3 +1,5 @@ +@use '../../utilities' as *; + //// /// @group animations /// @access public diff --git a/projects/igniteui-angular/src/lib/core/styles/base/animations/entrances/_slide.scss b/projects/igniteui-angular/src/lib/core/styles/base/animations/entrances/_slide.scss index fb95bee440d..906a0239086 100644 --- a/projects/igniteui-angular/src/lib/core/styles/base/animations/entrances/_slide.scss +++ b/projects/igniteui-angular/src/lib/core/styles/base/animations/entrances/_slide.scss @@ -1,3 +1,5 @@ +@use '../../utilities' as *; + //// /// @group animations /// @access public @@ -5,7 +7,7 @@ //// /// @requires {mixin} keyframes -@mixin scale-in-top { +@mixin slide-in-top { @include keyframes(slide-in-top) { 0% { transform: translateY(-1000px); diff --git a/projects/igniteui-angular/src/lib/core/styles/base/animations/entrances/_slit.scss b/projects/igniteui-angular/src/lib/core/styles/base/animations/entrances/_slit.scss index c69b3ea863d..40f0c976975 100644 --- a/projects/igniteui-angular/src/lib/core/styles/base/animations/entrances/_slit.scss +++ b/projects/igniteui-angular/src/lib/core/styles/base/animations/entrances/_slit.scss @@ -1,3 +1,5 @@ +@use '../../utilities' as *; + //// /// @group animations /// @access public diff --git a/projects/igniteui-angular/src/lib/core/styles/base/animations/entrances/_swing.scss b/projects/igniteui-angular/src/lib/core/styles/base/animations/entrances/_swing.scss index a7e931c2ce3..df58ac0d9e6 100644 --- a/projects/igniteui-angular/src/lib/core/styles/base/animations/entrances/_swing.scss +++ b/projects/igniteui-angular/src/lib/core/styles/base/animations/entrances/_swing.scss @@ -1,3 +1,5 @@ +@use '../../utilities' as *; + //// /// @group animations /// @access public diff --git a/projects/igniteui-angular/src/lib/core/styles/base/animations/entrances/_swirl.scss b/projects/igniteui-angular/src/lib/core/styles/base/animations/entrances/_swirl.scss index 28cec94b3cb..42977ab8742 100644 --- a/projects/igniteui-angular/src/lib/core/styles/base/animations/entrances/_swirl.scss +++ b/projects/igniteui-angular/src/lib/core/styles/base/animations/entrances/_swirl.scss @@ -1,3 +1,5 @@ +@use '../../utilities' as *; + //// /// @group animations /// @access public diff --git a/projects/igniteui-angular/src/lib/core/styles/base/animations/exits/_bounce.scss b/projects/igniteui-angular/src/lib/core/styles/base/animations/exits/_bounce.scss index 0bb08481dfa..174a3a87c6c 100644 --- a/projects/igniteui-angular/src/lib/core/styles/base/animations/exits/_bounce.scss +++ b/projects/igniteui-angular/src/lib/core/styles/base/animations/exits/_bounce.scss @@ -1,3 +1,5 @@ +@use '../../utilities' as *; + //// /// @group animations /// @access public diff --git a/projects/igniteui-angular/src/lib/core/styles/base/animations/exits/_fade.scss b/projects/igniteui-angular/src/lib/core/styles/base/animations/exits/_fade.scss index 8ed0250bca5..5e46d86b9c9 100644 --- a/projects/igniteui-angular/src/lib/core/styles/base/animations/exits/_fade.scss +++ b/projects/igniteui-angular/src/lib/core/styles/base/animations/exits/_fade.scss @@ -1,3 +1,5 @@ +@use '../../utilities' as *; + //// /// @group animations /// @access public @@ -5,136 +7,164 @@ //// /// @requires {mixin} keyframes -@mixin swing-out-top-bck { - @include keyframes (swing-out-top-bck) { +@mixin fade-out-bck { + @include keyframes(fade-out-bck) { + 0% { + transform: translateZ(0); + opacity: 1; + } + + 100% { + transform: translateZ(-80px); + opacity: 0; + } + } +} + +/// @requires {mixin} keyframes +@mixin fade-out-bl { + @include keyframes(fade-out-bl) { 0% { - transform: rotateX(0deg); - transform-origin: top; + transform: translateX(0) translateY(0); opacity: 1; } 100% { - transform: rotateX(-100deg); - transform-origin: top; + transform: translateX(-50px) translateY(50px); opacity: 0; } } } /// @requires {mixin} keyframes -@mixin swing-out-top-fwd { - @include keyframes (swing-out-top-fwd) { +@mixin fade-out-bottom { + @include keyframes(fade-out-bottom) { 0% { - transform: rotateX(0deg); - transform-origin: top; + transform: translateY(0); opacity: 1; } 100% { - transform: rotateX(70deg); - transform-origin: top; + transform: translateY(50px); opacity: 0; } } } /// @requires {mixin} keyframes -@mixin swing-out-right-bck { - @include keyframes (swing-out-right-bck) { +@mixin fade-out-br { + @include keyframes(fade-out-br) { 0% { - transform: rotateY(0); - transform-origin: right; + transform: translateX(0) translateY(0); opacity: 1; } 100% { - transform: rotateY(-100deg); - transform-origin: right; + transform: translateX(50px) translateY(50px); opacity: 0; } } } /// @requires {mixin} keyframes -@mixin swing-out-right-fwd { - @include keyframes (swing-out-right-fwd) { +@mixin fade-out-fwd { + @include keyframes(fade-out-fwd) { 0% { - transform: rotateY(0); - transform-origin: right; + transform: translateZ(0); opacity: 1; } 100% { - transform: rotateY(70deg); - transform-origin: right; + transform: translateZ(80px); opacity: 0; } } } /// @requires {mixin} keyframes -@mixin swing-out-bottom-bck { - @include keyframes (swing-out-bottom-bck) { +@mixin fade-out-left { + @include keyframes(fade-out-left) { + 0% { + transform: translateX(0); + opacity: 1; + } + + 100% { + transform: translateX(-50px); + opacity: 0; + } + } +} + +/// @requires {mixin} keyframes +@mixin fade-out-right { + @include keyframes(fade-out-right) { + 0% { + transform: translateX(0); + opacity: 1; + } + + 100% { + transform: translateX(50px); + opacity: 0; + } + } +} + + +/// @requires {mixin} keyframes +@mixin fade-out-tl { + @include keyframes(fade-out-tl) { 0% { - transform: rotateX(0); - transform-origin: bottom; + transform: translateX(0) translateY(0); opacity: 1; } 100% { - transform: rotateX(100deg); - transform-origin: bottom; + transform: translateX(-50px) translateY(-50px); opacity: 0; } } } /// @requires {mixin} keyframes -@mixin swing-out-bottom-fwd { - @include keyframes (swing-out-bottom-fwd) { +@mixin fade-out-top { + @include keyframes(fade-out-top) { 0% { - transform: rotateX(0); - transform-origin: bottom; + transform: translateY(0); opacity: 1; } 100% { - transform: rotateX(-70deg); - transform-origin: bottom; + transform: translateY(-50px); opacity: 0; } } } /// @requires {mixin} keyframes -@mixin swing-out-left-bck { - @include keyframes (swing-out-left-bck) { +@mixin fade-out-tr { + @include keyframes(fade-out-tr) { 0% { - transform: rotateY(0); - transform-origin: left; + transform: translateX(0) translateY(0); opacity: 1; } 100% { - transform: rotateY(100deg); - transform-origin: left; + transform: translateX(50px) translateY(-50px); opacity: 0; } } } /// @requires {mixin} keyframes -@mixin swing-out-left-fwd { - @include keyframes (swing-out-left-fwd) { +@mixin fade-out { + @include keyframes(fade-out) { 0% { - transform: rotateY(0); - transform-origin: left; opacity: 1; } 100% { - transform: rotateY(-70deg); - transform-origin: left; opacity: 0; } } diff --git a/projects/igniteui-angular/src/lib/core/styles/base/animations/exits/_flicker.scss b/projects/igniteui-angular/src/lib/core/styles/base/animations/exits/_flicker.scss index a87037dcbe1..7352f2fac1f 100644 --- a/projects/igniteui-angular/src/lib/core/styles/base/animations/exits/_flicker.scss +++ b/projects/igniteui-angular/src/lib/core/styles/base/animations/exits/_flicker.scss @@ -1,3 +1,5 @@ +@use '../../utilities' as *; + //// /// @group animations /// @access public diff --git a/projects/igniteui-angular/src/lib/core/styles/base/animations/exits/_flip.scss b/projects/igniteui-angular/src/lib/core/styles/base/animations/exits/_flip.scss index 9b06fae91e2..e2bad7bedfd 100644 --- a/projects/igniteui-angular/src/lib/core/styles/base/animations/exits/_flip.scss +++ b/projects/igniteui-angular/src/lib/core/styles/base/animations/exits/_flip.scss @@ -1,3 +1,5 @@ +@use '../../utilities' as *; + //// /// @group animations /// @access public diff --git a/projects/igniteui-angular/src/lib/core/styles/base/animations/exits/_puff.scss b/projects/igniteui-angular/src/lib/core/styles/base/animations/exits/_puff.scss index 9265c8d82a5..34541274882 100644 --- a/projects/igniteui-angular/src/lib/core/styles/base/animations/exits/_puff.scss +++ b/projects/igniteui-angular/src/lib/core/styles/base/animations/exits/_puff.scss @@ -1,3 +1,5 @@ +@use '../../utilities' as *; + //// /// @group animations /// @access public diff --git a/projects/igniteui-angular/src/lib/core/styles/base/animations/exits/_roll.scss b/projects/igniteui-angular/src/lib/core/styles/base/animations/exits/_roll.scss index 6c6632a4fae..4bbb7c258b9 100644 --- a/projects/igniteui-angular/src/lib/core/styles/base/animations/exits/_roll.scss +++ b/projects/igniteui-angular/src/lib/core/styles/base/animations/exits/_roll.scss @@ -1,3 +1,5 @@ +@use '../../utilities' as *; + //// /// @group animations /// @access public diff --git a/projects/igniteui-angular/src/lib/core/styles/base/animations/exits/_rotate.scss b/projects/igniteui-angular/src/lib/core/styles/base/animations/exits/_rotate.scss index 29a47edbef6..57b28e2d6a4 100644 --- a/projects/igniteui-angular/src/lib/core/styles/base/animations/exits/_rotate.scss +++ b/projects/igniteui-angular/src/lib/core/styles/base/animations/exits/_rotate.scss @@ -1,3 +1,5 @@ +@use '../../utilities' as *; + //// /// @group animations /// @access public diff --git a/projects/igniteui-angular/src/lib/core/styles/base/animations/exits/_scale.scss b/projects/igniteui-angular/src/lib/core/styles/base/animations/exits/_scale.scss index af7080519a6..1b6f6ea9057 100644 --- a/projects/igniteui-angular/src/lib/core/styles/base/animations/exits/_scale.scss +++ b/projects/igniteui-angular/src/lib/core/styles/base/animations/exits/_scale.scss @@ -1,3 +1,5 @@ +@use '../../utilities' as *; + //// /// @group animations /// @access public diff --git a/projects/igniteui-angular/src/lib/core/styles/base/animations/exits/_slide.scss b/projects/igniteui-angular/src/lib/core/styles/base/animations/exits/_slide.scss index 34cf3e35bd1..0e28284b16e 100644 --- a/projects/igniteui-angular/src/lib/core/styles/base/animations/exits/_slide.scss +++ b/projects/igniteui-angular/src/lib/core/styles/base/animations/exits/_slide.scss @@ -1,3 +1,5 @@ +@use '../../utilities' as *; + //// /// @group animations /// @access public diff --git a/projects/igniteui-angular/src/lib/core/styles/base/animations/exits/_slit.scss b/projects/igniteui-angular/src/lib/core/styles/base/animations/exits/_slit.scss index b8f81db5550..51a66635f68 100644 --- a/projects/igniteui-angular/src/lib/core/styles/base/animations/exits/_slit.scss +++ b/projects/igniteui-angular/src/lib/core/styles/base/animations/exits/_slit.scss @@ -1,3 +1,5 @@ +@use '../../utilities' as *; + //// /// @group animations /// @access public diff --git a/projects/igniteui-angular/src/lib/core/styles/base/animations/exits/_swing.scss b/projects/igniteui-angular/src/lib/core/styles/base/animations/exits/_swing.scss index 8ed0250bca5..005f15becd2 100644 --- a/projects/igniteui-angular/src/lib/core/styles/base/animations/exits/_swing.scss +++ b/projects/igniteui-angular/src/lib/core/styles/base/animations/exits/_swing.scss @@ -1,3 +1,5 @@ +@use '../../utilities' as *; + //// /// @group animations /// @access public diff --git a/projects/igniteui-angular/src/lib/core/styles/base/animations/exits/_swirl.scss b/projects/igniteui-angular/src/lib/core/styles/base/animations/exits/_swirl.scss index a79681f4725..5b2853054d1 100644 --- a/projects/igniteui-angular/src/lib/core/styles/base/animations/exits/_swirl.scss +++ b/projects/igniteui-angular/src/lib/core/styles/base/animations/exits/_swirl.scss @@ -1,3 +1,5 @@ +@use '../../utilities' as *; + //// /// @group animations /// @access public diff --git a/projects/igniteui-angular/src/lib/core/styles/base/animations/generic/_flip.scss b/projects/igniteui-angular/src/lib/core/styles/base/animations/generic/_flip.scss index a1650f3f4cb..d0fb7d2a69a 100644 --- a/projects/igniteui-angular/src/lib/core/styles/base/animations/generic/_flip.scss +++ b/projects/igniteui-angular/src/lib/core/styles/base/animations/generic/_flip.scss @@ -1,3 +1,5 @@ +@use '../../utilities' as *; + //// /// @group animations /// @access public diff --git a/projects/igniteui-angular/src/lib/core/styles/base/animations/generic/_rotate.scss b/projects/igniteui-angular/src/lib/core/styles/base/animations/generic/_rotate.scss index 2bc5299c87c..68228ec8af4 100644 --- a/projects/igniteui-angular/src/lib/core/styles/base/animations/generic/_rotate.scss +++ b/projects/igniteui-angular/src/lib/core/styles/base/animations/generic/_rotate.scss @@ -1,3 +1,5 @@ +@use '../../utilities' as *; + //// /// @group animations /// @access public diff --git a/projects/igniteui-angular/src/lib/core/styles/base/animations/generic/_scale.scss b/projects/igniteui-angular/src/lib/core/styles/base/animations/generic/_scale.scss index bb5b0ea4141..b8e25d96a69 100644 --- a/projects/igniteui-angular/src/lib/core/styles/base/animations/generic/_scale.scss +++ b/projects/igniteui-angular/src/lib/core/styles/base/animations/generic/_scale.scss @@ -1,3 +1,5 @@ +@use '../../utilities' as *; + //// /// @group animations /// @access public diff --git a/projects/igniteui-angular/src/lib/core/styles/base/animations/generic/_shadows.scss b/projects/igniteui-angular/src/lib/core/styles/base/animations/generic/_shadows.scss index b17d8f9589e..410cea3923a 100644 --- a/projects/igniteui-angular/src/lib/core/styles/base/animations/generic/_shadows.scss +++ b/projects/igniteui-angular/src/lib/core/styles/base/animations/generic/_shadows.scss @@ -1,3 +1,5 @@ +@use '../../utilities' as *; + //// /// @group animations /// @access public diff --git a/projects/igniteui-angular/src/lib/core/styles/base/animations/generic/_slide.scss b/projects/igniteui-angular/src/lib/core/styles/base/animations/generic/_slide.scss index d2714690cca..88aaa1fed46 100644 --- a/projects/igniteui-angular/src/lib/core/styles/base/animations/generic/_slide.scss +++ b/projects/igniteui-angular/src/lib/core/styles/base/animations/generic/_slide.scss @@ -1,3 +1,5 @@ +@use '../../utilities' as *; + //// /// @group animations /// @access public diff --git a/projects/igniteui-angular/src/lib/core/styles/base/animations/generic/_swing.scss b/projects/igniteui-angular/src/lib/core/styles/base/animations/generic/_swing.scss index 50564af4e93..66472294282 100644 --- a/projects/igniteui-angular/src/lib/core/styles/base/animations/generic/_swing.scss +++ b/projects/igniteui-angular/src/lib/core/styles/base/animations/generic/_swing.scss @@ -1,3 +1,5 @@ +@use '../../utilities' as *; + //// /// @group animations /// @access public diff --git a/projects/igniteui-angular/src/lib/core/styles/base/elevations/_index.scss b/projects/igniteui-angular/src/lib/core/styles/base/elevations/_index.scss index 67da6528832..14a4380b6a1 100644 --- a/projects/igniteui-angular/src/lib/core/styles/base/elevations/_index.scss +++ b/projects/igniteui-angular/src/lib/core/styles/base/elevations/_index.scss @@ -1,3 +1,10 @@ +@use 'sass:map'; +@use 'sass:math'; +@use 'sass:meta'; +@use 'sass:string'; +@use '../variables' as *; +@use '../utilities' as *; + //// /// @group elevations /// @author Simeon Simeonoff @@ -110,10 +117,10 @@ /// @param {Color} $l3-color - The ambient color. /// @returns {String} - A string to be used as box-shadow value. @function _elevation($elevation, $l1-color, $l2-color, $l3-color) { - @return unquote(#{ - map-get(_l1-shadows($l1-color), $elevation), - map-get(_l2-shadows($l2-color), $elevation), - map-get(_l3-shadows($l3-color), $elevation)} + @return string.unquote(#{ + map.get(_l1-shadows($l1-color), $elevation), + map.get(_l2-shadows($l2-color), $elevation), + map.get(_l3-shadows($l3-color), $elevation)} ); } @@ -128,7 +135,7 @@ @for $i from 1 through 24 { $elevation: (#{$i}: _elevation($i, $color-1, $color-2, $color-3)); - $result: map-merge($result, $elevation) + $result: map.merge($result, $elevation) } @return $result; @@ -152,7 +159,7 @@ $igx-elevations: igx-elevations( /// @param {number} $elevation [0] - The elevation level from 0 to 24. /// @returns {String} Returns a box-shadow value. @function igx-elevation($elevations: null, $elevation: 0) { - @if type-of($elevation) != number or not unitless($elevation) { + @if meta.type-of($elevation) != number or not math.is-unitless($elevation) { @error '$elevation must be a number'; } @@ -161,13 +168,9 @@ $igx-elevations: igx-elevations( } @if $elevations == null { - @return if( - legacy(), - igx-elevation($igx-elevations, $elevation), - #{var(--igx-elevation-#{$elevation})} - ); + @return #{var(--igx-elevation-#{$elevation})}; } - @return map-get($elevations, #{$elevation}); + @return map.get($elevations, #{$elevation}); } diff --git a/projects/igniteui-angular/src/lib/core/styles/base/utilities/_bem.scss b/projects/igniteui-angular/src/lib/core/styles/base/utilities/_bem.scss index a02149982cb..2b690d1bc15 100644 --- a/projects/igniteui-angular/src/lib/core/styles/base/utilities/_bem.scss +++ b/projects/igniteui-angular/src/lib/core/styles/base/utilities/_bem.scss @@ -1,3 +1,8 @@ +@use 'sass:string'; +@use 'sass:meta'; +@use 'sass:list'; +@use 'sass:selector'; + //// /// @group bem /// @author Juan Patten @@ -5,11 +10,11 @@ //// /// @type String - The Element separator used. Default '__'. -$bem--sep-elem: if(variable-exists(bem--sep-elem), $bem--sep-elem, '__'); +$bem--sep-elem: if(meta.variable-exists(bem--sep-elem), $bem--sep-elem, '__'); /// @type String - The Modifier separator used. Default '--'. -$bem--sep-mod: if(variable-exists(bem--sep-mod), $bem--sep-mod, '--'); +$bem--sep-mod: if(meta.variable-exists(bem--sep-mod), $bem--sep-mod, '--'); /// @type String - The Modifier Value separator used. Default '-'. -$bem--sep-mod-val: if(variable-exists(bem--sep-mod-val), $bem--sep-mod-val, '-'); +$bem--sep-mod-val: if(meta.variable-exists(bem--sep-mod-val), $bem--sep-mod-val, '-'); /// Converts a passed selector value into plain string. /// @access private @@ -19,15 +24,8 @@ $bem--sep-mod-val: if(variable-exists(bem--sep-mod-val), $bem--sep-mod-val, '-') @if $s == null { @return ''; } - //cast to string - $s: inspect($s); - @if str-index($s, '(') { - // ruby sass => "(selector,)" - @return str-slice($s, 2, -3); - } @else { - // libsass => "selector" - @return str-slice($s, 1, -1); - } + + @return string.slice(meta.inspect($s), 2, -3); } /// Prepends a dot to the passed BEM selector. @@ -37,8 +35,8 @@ $bem--sep-mod-val: if(variable-exists(bem--sep-mod-val), $bem--sep-mod-val, '-') /// @example scss - Returns /// .#{$x} @function bem--with-dot($x) { - $first: str-slice($x, 0, 1); - @return if($first=='.', $x, '.'+$x); + $first: string.slice($x, 0, 1); + @return if($first == '.', $x, string.insert($x, '.', -100)); } /// Converts a key-value map into a modifier string. @@ -46,9 +44,9 @@ $bem--sep-mod-val: if(variable-exists(bem--sep-mod-val), $bem--sep-mod-val, '-') /// @param {List} $m - The modifier list to get converted. /// @returns {String} @function bem--mod-str($m) { - @if type-of($m) == 'map' { - $mm: nth($m, 1); - @return nth($mm, 1) + $bem--sep-mod-val + nth($mm, 2); + @if meta.type-of($m) == 'map' { + $mm: list.nth($m, 1); + @return list.nth($mm, 1) + $bem--sep-mod-val + list.nth($mm, 2); } @else { @return $m; } @@ -87,7 +85,7 @@ $bem--sep-mod-val: if(variable-exists(bem--sep-mod-val), $bem--sep-mod-val, '-') /// or null if the element separator name is not part of the passed string. @function bem--contains-elem($x) { // if you set the separators to common strings, this could fail - @return str-index($x, $bem--sep-elem); + @return string.index($x, $bem--sep-elem); } /// Checks if the modifier separator string is part of the passed string. @@ -97,7 +95,7 @@ $bem--sep-mod-val: if(variable-exists(bem--sep-mod-val), $bem--sep-mod-val, '-') /// or null if the modifier separator string is not part of the passed string. @function bem--contains-mod($x) { // if you set the separators to common strings, this could fail - @return str-index($x, $bem--sep-mod); + @return string.index($x, $bem--sep-mod); } /// Checks if the passed selector string contains a colon. @@ -106,7 +104,7 @@ $bem--sep-mod-val: if(variable-exists(bem--sep-mod-val), $bem--sep-mod-val, '-') /// @returns {number|null} Will return the index of the occurance, /// or null if the string does not contain any colons. @function bem--contains-pseudo($x) { - @return str-index($x, ':'); + @return string.index($x, ':'); } /// Returns the BEM block-name that generated `$x`. Does not include leading ".". @@ -114,11 +112,11 @@ $bem--sep-mod-val: if(variable-exists(bem--sep-mod-val), $bem--sep-mod-val, '-') /// @param {String} $x - The block name. @function bem--extract-block($x) { @if bem--contains-mod($x) { - @return str-slice($x, 1, str-index($x, $bem--sep-mod)-1); + @return string.slice($x, 1, string.index($x, $bem--sep-mod)-1); } @else if bem--contains-elem($x) { - @return str-slice($x, 1, str-index($x, $bem--sep-elem)-1); + @return string.slice($x, 1, string.index($x, $bem--sep-elem)-1); } @else if bem--contains-pseudo($x) { - @return str-slice($x, 1, str-index($x, ':')-1); + @return string.slice($x, 1, string.index($x, ':')-1); } @return $x; } @@ -128,8 +126,8 @@ $bem--sep-mod-val: if(variable-exists(bem--sep-mod-val), $bem--sep-mod-val, '-') /// @param {String} $x - The selector to search for. /// @returns {String} @function bem--extract-first-selector($x) { - $eow: str-index($x, ' ') or -1; - @return str-slice($x, 1, $eow); + $eow: string.index($x, ' ') or -1; + @return string.slice($x, 1, $eow); } /// Generates a full BEM selector. @@ -160,26 +158,26 @@ $bem--sep-mod-val: if(variable-exists(bem--sep-mod-val), $bem--sep-mod-val, '-') } @if $elem { // User passed an element-specific modifier - @if (type-of($elem) == list) and nth($elem, 2) { + @if (meta.type-of($elem) == list) and list.nth($elem, 2) { // For now we don't support multiple elem-mods at once - @if type-of(nth($elem, 2)) == list { + @if meta.type-of(list.nth($elem, 2)) == 'list' { @error 'Only one element-modifier allowed.'; } - $elem: str-slice(bem-selector(nth($elem, 1), $m: nth($elem, 2)), 2); + $elem: string.slice(bem-selector(list.nth($elem, 1), $m: list.nth($elem, 2)), 2); } $elem: bem--elem-str($block, $elem); } @if not $mods { @return bem--with-dot($elem); } - @if type-of($mods) != list { + @if meta.type-of($mods) != 'list' { $mods: ($mods, ); } $bemcls: ''; - @for $i from 1 to length($mods) { - $bemcls: $bemcls + bem--bem-str($block, $elem, nth($mods, $i)) + ', '; + @for $i from 1 to list.length($mods) { + $bemcls: $bemcls + bem--bem-str($block, $elem, list.nth($mods, $i)) + ', '; } - $bemcls: $bemcls + bem--bem-str($block, $elem, nth($mods, -1)); + $bemcls: $bemcls + bem--bem-str($block, $elem, list.nth($mods, -1)); @return $bemcls; } @@ -221,9 +219,9 @@ $bem--sep-mod-val: if(variable-exists(bem--sep-mod-val), $bem--sep-mod-val, '-') @error 'Detected a multi-level nested Element (#{$this} #{$elem})! Bemerald doesn\'t support nested ' + 'elements because they do not have BEM nature (www.getbem.com/faq/#css-nested-elements). ' + 'If you must do it, use a hardcoded selector like &__subsubelem '; } - @if $mods != null and type-of($mods) == 'list' { + @if $mods != null and meta.type-of($mods) == 'list' { @each $i in $mods { - $mx: append($mx, #{bem-selector($block, $e: ($elem, $i))}) + $mx: list.append($mx, #{bem-selector($block, $e: ($elem, $i))}) } } @@ -236,7 +234,7 @@ $bem--sep-mod-val: if(variable-exists(bem--sep-mod-val), $bem--sep-mod-val, '-') @content; } } @else { - #{selector-append($mx...)} { + #{selector.append($mx...)} { @content; } } @@ -253,7 +251,7 @@ $bem--sep-mod-val: if(variable-exists(bem--sep-mod-val), $bem--sep-mod-val, '-') @content; } } @else { - #{$first} #{selector-append($mx...)} { + #{$first} #{selector.append($mx...)} { @content; } } @@ -304,10 +302,10 @@ $bem--sep-mod-val: if(variable-exists(bem--sep-mod-val), $bem--sep-mod-val, '-') @if (bem--contains-pseudo($this)) { @error 'Nesting a Modifier inside a pseudo-selector is not supported: #{$this} #{$mod}'; } - $mod-classes: append($mod-classes, #{bem-selector($block: $this, $m: $mod)}) + $mod-classes: list.append($mod-classes, #{bem-selector($block: $this, $m: $mod)}) } @at-root { - #{selector-append($mod-classes...)} { + #{selector.append($mod-classes...)} { @content; } } diff --git a/projects/igniteui-angular/src/lib/core/styles/base/utilities/_functions.scss b/projects/igniteui-angular/src/lib/core/styles/base/utilities/_functions.scss index 444f34bd88c..52e9b0a7f08 100644 --- a/projects/igniteui-angular/src/lib/core/styles/base/utilities/_functions.scss +++ b/projects/igniteui-angular/src/lib/core/styles/base/utilities/_functions.scss @@ -1,31 +1,28 @@ +@use '../variables' as *; @use 'sass:math'; +@use 'sass:color'; +@use 'sass:meta'; +@use 'sass:map'; +@use 'sass:list'; +@use 'sass:string'; //// /// @group Utilities /// @author Simeon Simeonoff //// -/// @access private -@function private-div($a, $b) { - @if not global-variable-exists('__legacy-libsass') and call(get-function('function-exists'), 'div', 'math') { - @return call(get-function($name: 'div', $module: 'math'), $a, $b); - } @else { - @return $a / $b; - } -} - /// Converts pixels to relative values (em). /// @access public /// @param {number|string} $pixels - The pixel value to be converted. /// @param {number|string} $context [$browser-context] - The base context to convert against. @function em($pixels, $context: $browser-context) { - @if (unitless($pixels)) { + @if (math.is-unitless($pixels)) { $pixels: $pixels * 1px; } - @if (unitless($context)) { + @if (math.is-unitless($context)) { $context: $context * 1px; } - @return private-div($pixels, $context) * 1em; + @return math.div($pixels, $context) * 1em; } /// Pixels to root relative values (rem). @@ -33,13 +30,13 @@ /// @param {number|string} $pixels - The pixel value to be converted. /// @param {number|string} $context [$browser-context] - The base context to convert against. @function rem($pixels, $context: $browser-context) { - @if (unitless($pixels)) { + @if (math.is-unitless($pixels)) { $pixels: $pixels * 1px; } - @if (unitless($context)) { + @if (math.is-unitless($context)) { $context: $context * 1px; } - @return private-div($pixels, $context) * 1rem; + @return math.div($pixels, $context) * 1rem; } /// Relative value(em/rem) to pixel. @@ -47,24 +44,34 @@ /// @param {number|string} $num - The relative value to be converted. /// @param {number|string} $context [$browser-context] - The base context to convert against. @function px($num, $context: $browser-context) { - @if type-of $num == 'number' { - @return private-div($num, $num * 0 + 1) * 16px; + @if meta.type-of($num) == 'number' { + @return math.div($num, $num * 0 + 1) * 16px; } @return $num; } +/// Calculates the linear channel value for a given sRGB color. +/// @access private +@function _lcv($value) { + @return if( + $value < .03928, + math.div($value, 12.92), + math.pow(math.div($value + .055, 1.055), 2.4) + ); +} + /// Calculates the luminance for a given color. /// See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests. /// /// @param {Color} $color - The color to calculate luminance for. @function luminance($color) { - @if type-of($color) == 'color' { - $red: nth($linear-channel-values, red($color) + 1); - $green: nth($linear-channel-values, green($color) + 1); - $blue: nth($linear-channel-values, blue($color) + 1); + @if meta.type-of($color) == 'color' { + $r: math.div(color.red($color), 255); + $g: math.div(color.green($color), 255); + $b: math.div(color.blue($color), 255); - @return .2126 * $red + .7152 * $green + .0722 * $blue; + @return .2126 * _lcv($r) + .7152 * _lcv($g) + .0722 * _lcv($b); } @return $color; } @@ -79,22 +86,7 @@ $backLum: luminance($background) + .05; $foreLum: luminance($foreground) + .05; - @return private-div(max($backLum, $foreLum), min($backLum, $foreLum)); -} - -/// Returns an alpha channel map for a given palette variant. -/// @param {string} $variant ['material'] - The palette variant. -/// @returns {Map} - The alpha channel map for the specified palette. -@function _alpha-map($variant: 'material') { - $material: (50: .02, 100: .04, 200: .08, 300: .12, 400: .26, 500: .38, 600: .54, 700: .62, 800: .74, 900: .87); - $indigo: (50: .02, 100: .03, 200: .06, 300: .15, 400: .21, 500: .4, 600: .52, 700: .64, 800: .77, 900: .9); - - @return map-get(( - 'material': $material, - 'fluent': $material, - 'bootstrap': $material, - 'indigo-design': $indigo, - ), $variant); + @return math.div(math.max($backLum, $foreLum), math.min($backLum, $foreLum)); } /// Generates a color shade from base color and saturation level. @@ -134,87 +126,117 @@ } } +/// Generates a color shade from base color and saturation level. +/// @access private +/// @group Palettes +/// @param {Color} $color - The base color to be used to generate a color shade. +/// @param {number|string} $shade - The shade. +@function _gen-gray($color, $shade) { + $lumen: luminance($color); + + @if ($shade == 50) { + @return change-color($color, $lightness: if($lumen < .5, 98%, 13%)); + } @else if ($shade == 100) { + @return change-color($color, $lightness: if($lumen < .5, 96%, 26%)); + } @else if ($shade == 200) { + @return change-color($color, $lightness: if($lumen < .5, 93%, 38%)); + } @else if ($shade == 300) { + @return change-color($color, $lightness: if($lumen < .5, 88%, 54%)); + } @else if ($shade == 400) { + @return change-color($color, $lightness: if($lumen < .5, 74%, 62%)); + } @else if ($shade == 500) { + @return change-color($color, $lightness: if($lumen < .5, 62%, 74%)); + } @else if ($shade == 600) { + @return change-color($color, $lightness: if($lumen < .5, 54%, 88%)); + } @else if ($shade == 700) { + @return change-color($color, $lightness: if($lumen < .5, 38%, 93%)); + } @else if ($shade == 800) { + @return change-color($color, $lightness: if($lumen < .5, 26%, 96%)); + } @else if ($shade == 900) { + @return change-color($color, $lightness: if($lumen < .5, 13%, 98%)); + } +} + /// Generates an hsla color variant from base(500) colors. /// @access private /// @group Palettes /// @param {Color} $name - The base color name (primary, secondary, etc.) to be used to generate a color variant. /// @param {number|string} $variant - The target shade variant. /// @param {number|string} $theme - The target theme variant. -@function _gen-hsla-color($name, $variant, $theme) { +@function gen-hsla-color($name, $variant, $theme, $color) { $h: var(--igx-#{$name}-h); $s: var(--igx-#{$name}-s); $l: var(--igx-#{$name}-l); - $a: var(--igx-#{$name}-a); - $am: _alpha-map($theme); + $lumen: luminance($color); @if ($variant == 50) { @if $name == 'grays' { - @return #{hsla($h, $s, $l, calc(#{map-get($am, 50)} * #{$a}))}; + @return #{$h, $s, if($lumen < .5, 98%, 13%)}; } @else { - @return #{hsla($h, calc(#{$s} * 1.23), calc(#{$l} * 1.78), #{$a})}; + @return #{$h, calc(#{$s} * 1.23), calc(#{$l} * 1.78)}; } } @else if ($variant == 100) { @if $name == 'grays' { - @return #{hsla($h, $s, $l, calc(#{map-get($am, 100)} * #{$a}))}; + @return #{$h, $s, if($lumen < .5, 96%, 26%)}; } @else { - @return #{hsla($h, calc(#{$s} / 1.25), calc(#{$l} * 1.66), #{$a})}; + @return #{$h, calc(#{$s} / 1.25), calc(#{$l} * 1.66)}; } } @else if ($variant == 200) { @if $name == 'grays' { - @return #{hsla($h, $s, $l, calc(#{map-get($am, 200)} * #{$a}))}; + @return #{$h, $s, if($lumen < .5, 93%, 38%)}; } @else { - @return #{hsla($h, calc(#{$s} * .64), calc(#{$l} * 1.43), #{$a})}; + @return #{$h, calc(#{$s} * .64), calc(#{$l} * 1.43)}; } } @else if ($variant == 300) { @if $name == 'grays' { - @return #{hsla($h, $s, $l, calc(#{map-get($am, 300)} * #{$a}))}; + @return #{$h, $s, if($lumen < .5, 88%, 54%)}; } @else { - @return #{hsla($h, calc(#{$s} * .73), calc(#{$l} * 1.19), #{$a})}; + @return #{$h, calc(#{$s} * .73), calc(#{$l} * 1.19)}; } } @else if ($variant == 400) { @if $name == 'grays' { - @return #{hsla($h, $s, $l, calc(#{map-get($am, 400)} * #{$a}))}; + @return #{$h, $s, if($lumen < .5, 74%, 62%)}; } @else { - @return #{hsla($h, calc(#{$s} * .875), calc(#{$l} * 1.08), #{$a})}; + @return #{$h, calc(#{$s} * .875), calc(#{$l} * 1.08)}; } } @else if ($variant == 500) { @if $name == 'grays' { - @return #{hsla($h, $s, $l, calc(#{map-get($am, 500)} * #{$a}))}; + @return #{$h, $s, if($lumen < .5, 62%, 72%)}; } @else { - @return #{hsla($h, $s, $l, $a)}; + @return #{$h, $s, $l}; } } @else if ($variant == 600) { @if $name == 'grays' { - @return #{hsla($h, $s, $l, calc(#{map-get($am, 600)} * #{$a}))}; + @return #{$h, $s, if($lumen < .5, 54%, 88%)}; } @else { - @return #{hsla($h, calc(#{$s} * 1.26), calc(#{$l} * .89), #{$a})}; + @return #{$h, calc(#{$s} * 1.26), calc(#{$l} * .89)}; } } @else if ($variant == 700) { @if $name == 'grays' { - @return #{hsla($h, $s, $l, calc(#{map-get($am, 700)} * #{$a}))}; + @return #{$h, $s, if($lumen < .5, 38%, 93%)}; } @else { - @return #{hsla($h, calc(#{$s} * 1.52), calc(#{$l} * .81), #{$a})}; + @return #{$h, calc(#{$s} * 1.52), calc(#{$l} * .81)}; } } @else if ($variant == 800) { @if $name == 'grays' { - @return #{hsla($h, $s, $l, calc(#{map-get($am, 800)} * #{$a}))}; + @return #{$h, $s, if($lumen < .5, 26%, 96%)}; } @else { - @return #{hsla($h, calc(#{$s} * 1.5), calc(#{$l} * .73), #{$a})}; + @return #{$h, calc(#{$s} * 1.5), calc(#{$l} * .73)}; } } @else if ($variant == 900) { @if $name == 'grays' { - @return #{hsla($h, $s, $l, calc(#{map-get($am, 900)} * #{$a}))}; + @return #{$h, $s, if($lumen < .5, 13%, 98%)}; } @else { - @return #{hsla($h, calc(#{$s} * 1.34), calc(#{$l} * .64), #{$a})}; + @return #{$h, calc(#{$s} * 1.34), calc(#{$l} * .64)}; } } @else if ($variant == 'A100') { - @return #{hsla($h, calc(#{$s} * 1.23), calc(#{$l} * 1.34), #{$a})}; + @return #{$h, calc(#{$s} * 1.23), calc(#{$l} * 1.34)}; } @else if ($variant == 'A200') { - @return #{hsla($h, calc(#{$s} * 1.22), calc(#{$l} * 1.16), #{$a})}; + @return #{$h, calc(#{$s} * 1.22), calc(#{$l} * 1.16)}; } @else if ($variant == 'A400') { - @return #{hsla($h, calc(#{$s} * 1.23), calc(#{$l} * .91), #{$a})}; + @return #{$h, calc(#{$s} * 1.23), calc(#{$l} * .91)}; } @else if ($variant == 'A700') { - @return #{hsla($h, calc(#{$s} * 1.22), calc(#{$l} * .65), #{$a})}; + @return #{$h, calc(#{$s} * 1.22), calc(#{$l} * .65)}; } } @@ -238,7 +260,8 @@ @each $saturation in $saturations { $shade: gen-color($color, $saturation); $contrast: text-contrast(to-opaque($shade, $base, null)); - $result: map-merge($result, ( + + $result: map.merge($result, ( $saturation: $shade, #{$saturation}-contrast: $contrast )); @@ -258,12 +281,13 @@ /// text contrast colors for each variation. @function grayscale-palette($color, $shades, $base: #fff) { $result: (); - @each $saturation, $opacity in $shades { - $shade: rgba($color, $opacity); - $contrast: text-contrast(to-opaque($shade, $base, null)); + @each $shade in $shades { + $gray-shade: _gen-gray($color, $shade); + $contrast: text-contrast(to-opaque($gray-shade, $base, null)); + $result: map-merge($result, ( - $saturation: $shade, - #{$saturation}-contrast: $contrast + $shade: $gray-shade, + #{$shade}-contrast: $contrast )); } @return $result; @@ -296,11 +320,11 @@ $variant: 'material' ) { $saturations: (50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 'A100', 'A200', 'A400', 'A700'); - $shades: _alpha-map($variant); + $gray-shades: (50, 100, 200, 300, 400, 500, 600, 700, 800, 900); $primary-palette: generate-palette($primary, $saturations, $surface); $secondary-palette: generate-palette($secondary, $saturations, $surface); - $grayscale-palette: grayscale-palette($grays, $shades, $surface); + $grayscale-palette: grayscale-palette($grays, $gray-shades, $surface); // @debug 'Primary Colors Palette: #{$primary-palette}'; // @debug 'secondary Colors Palette: #{$secondary-palette}'; @@ -341,12 +365,12 @@ ) ), _meta: ( - variant: $variant + variant: $variant, + grays: $grays, ) ); } - /// @access private /// Used in igx-color to test internally /// for color and variant validity. @@ -359,9 +383,16 @@ $p-test: igx-palette(#fff, #000); /// @param {string} $color [primary]- The target color from the color palette. /// @param {number|string} $variant [500] - The target color shade from the color palette. /// @returns {Color} White if no palette, color, and variant matches found. -@function igx-color($palette: null, $color: primary, $variant: 500) { - $c: map-get($palette or $p-test, $color); - $v: if($c, map-get($c, $variant), null); +@function igx-color($palette: null, $color: primary, $variant: 500, $opacity: null) { + $c: map.get($palette or $p-test, $color); + $v: if($c, map.get($c, $variant), null); + $a: var(--igx-#{$color}-a); + $var-string: #{var(--igx-#{$color}-#{$variant})}; + $contrast: if( + type-of($variant) == string, + list.index(str-split($variant, '-'), 'contrast'), + null + ); @if not($c) { @error 'The passed color #{$color} is not valid.'; @@ -373,13 +404,13 @@ $p-test: igx-palette(#fff, #000); @if $palette == null { @return if( - legacy(), - igx-color($default-palette, $color, $variant), - #{var(--igx-#{$color}-#{$variant})} + $contrast, + $var-string, + hsla($var-string, if($opacity, $opacity, $a)), ); } - @return map-get($c, $variant); + @return rgba(map.get($c, $variant), $alpha: if($opacity, $opacity, 1)); } /// Retrieves a contrast text color for a given color from a color palette. @@ -390,8 +421,8 @@ $p-test: igx-palette(#fff, #000); /// @param {number|variant} $variant [500] - The target color shade from the color palette. /// @requires igx-color /// @returns {Color} [#fff] - Returns white if no palette, color and/or variant matches found. -@function igx-contrast-color($palette: null, $color: primary, $variant: 500) { - @return igx-color($palette, $color, #{$variant}-contrast); +@function igx-contrast-color($palette: null, $color: primary, $variant: 500, $opacity: null) { + @return igx-color($palette, $color, #{$variant}-contrast, $opacity); } /// Returns a CSS variable string reference as a list of words. @@ -402,7 +433,7 @@ $p-test: igx-palette(#fff, #000); /// $list: var-to-parts(var(--igx-primary-500)); // igx primary 500 /// @returns {List} @function var-to-parts($value, $separator: '-') { - @if type-of($value) != 'string' { + @if meta.type-of($value) != 'string' { @return null; } @@ -416,12 +447,12 @@ $p-test: igx-palette(#fff, #000); /// If the value is not a CSS variable it's simply passed through. /// @access private /// @returns {Color | Map} -@function igx-color-from-var($value, $palette: $default-palette, $raw: true) { +@function igx-color-from-var($value, $palette: $theme-palette, $raw: true) { $parts: var-to-parts($value); - $is-igx: index($parts, 'igx'); + $is-igx: list.index($parts, 'igx'); @if $parts and $is-igx { - $c: nth($parts, 2); + $c: list.nth($parts, 2); $v: to-number(nth($parts, 3)); $color: igx-color($palette, $c, $v); @return if($raw, $color, (($c $v): $color)); @@ -437,18 +468,18 @@ $p-test: igx-palette(#fff, #000); /// @param {Map} $palette [$default-palette] - Pass an igx-palette if the passed colors are CSS variable references. /// @requires {function} igx-color-from-var /// @return {Color} - The color representation of the rgba value. -@function to-opaque($color-1, $color-2: #fff, $palette: $default-palette) { +@function to-opaque($color-1, $color-2: #fff, $palette: $theme-palette) { $color-1: igx-color-from-var($color-1, $palette); $color-2: igx-color-from-var($color-2, $palette); - @if type-of($color-1) == color and type-of($color-2) == color { - $red: red($color-1); - $green: green($color-1); - $blue: blue($color-1); - $a: alpha($color-1); - $r: floor($a * $red + (1 - $a) * red($color-2)); - $g: floor($a * $green + (1 - $a) * green($color-2)); - $b: floor($a * $blue + (1 - $a) * blue($color-2)); + @if meta.type-of($color-1) == color and meta.type-of($color-2) == color { + $red: color.red($color-1); + $green: color.green($color-1); + $blue: color.blue($color-1); + $a: color.alpha($color-1); + $r: math.floor($a * $red + (1 - $a) * color.red($color-2)); + $g: math.floor($a * $green + (1 - $a) * color.green($color-2)); + $b: math.floor($a * $blue + (1 - $a) * color.blue($color-2)); @return rgb($r, $g, $b); } @return $color-1; @@ -471,12 +502,12 @@ $p-test: igx-palette(#fff, #000); $background: igx-color-from-var($background, $palette, $raw: false); $foreground: igx-color-from-var($foreground, $palette); - @if type-of($background) == 'map' { - @return igx-contrast-color(null, nth(map-keys($background), 1)...); + @if meta.type-of($background) == 'map' { + @return igx-contrast-color(null, nth(map.keys($background), 1)...); } - @if type-of($foreground) == 'color' and type-of($background) == 'color' { - $level: map-get(( + @if meta.type-of($foreground) == 'color' and meta.type-of($background) == 'color' { + $level: map.get(( 'A': 3, 'AA': 4.5, 'AAA': 7 @@ -508,8 +539,8 @@ $p-test: igx-palette(#fff, #000); /// @param {*} $value - The value to test. /// @return {Bool} @function is-direction($value) { - $is-keyword: index( ( to top, to top right, to right top, to right, to bottom right, to right bottom, to bottom, to bottom left, to left bottom, to left, to left top, to top left), $value); - $is-angle: type-of($value)=='number' and index('deg' 'grad' 'turn' 'rad', unit($value)); + $is-keyword: list.index(( to top, to top right, to right top, to right, to bottom right, to right bottom, to bottom, to bottom left, to left bottom, to left, to left top, to top left), $value); + $is-angle: meta.type-of($value)=='number' and list.index('deg' 'grad' 'turn' 'rad', math.unit($value)); @return $is-keyword or $is-angle; } @@ -519,10 +550,10 @@ $p-test: igx-palette(#fff, #000); /// @param {String|List} $items - The components list to check in. /// @return {List} - The list of passed items. @function is-component($items) { - $register: map-keys($components); + $register: map.keys($components); @each $item in $items { - @if not(index($register, $item)) { - @error unquote('Can\'t exclude "#{$item}" because it is not in the list of known components.'); + @if not(list.index($register, $item)) { + @warn unquote('Can\'t exclude "#{$item}" because it is not in the list of known components.'); } } @return $items; @@ -539,47 +570,47 @@ $p-test: igx-palette(#fff, #000); $sign: ''; @if $num < 0 { $sign: '-'; - $num: abs($num); + $num: math.abs($num); } @if $num >= 0 and $num < $radix { - @return $sign + str-slice($chars, ($num + 1), ($num + 1)); + @return $sign + string.slice($chars, ($num + 1), ($num + 1)); } $q: $num; @while $q !=0 { $r: $q % $radix; - $q: floor($q / $radix); - $result: str-slice($chars, ($r + 1), ($r + 1)) + $result; + $q: math.floor($q / $radix); + $result: string.slice($chars, ($r + 1), ($r + 1)) + $result; } @return $sign + $result; } /// @access private @function to-number($value) { - @if type-of($value) == 'number' { + @if meta.type-of($value) == 'number' { @return $value; - } @else if type-of($value) != 'string' { + } @else if meta.type-of($value) != 'string' { $_: log('Value for `to-number` should be a number or a string.'); } $result: 0; $digits: 0; - $minus: str-slice($value, 1, 1) == '-'; + $minus: string.slice($value, 1, 1) == '-'; $numbers: ('0': 0, '1': 1, '2': 2, '3': 3, '4': 4, '5': 5, '6': 6, '7': 7, '8': 8, '9': 9); - @for $i from if($minus, 2, 1) through str-length($value) { - $character: str-slice($value, $i, $i); + @for $i from if($minus, 2, 1) through string.length($value) { + $character: string.slice($value, $i, $i); - @if not(index(map-keys($numbers), $character) or $character == '.') { + @if not(list.index(map.keys($numbers), $character) or $character == '.') { @return $value; } @if $character == '.' { $digits: 1; } @else if $digits == 0 { - $result: $result * 10 + map-get($numbers, $character); + $result: $result * 10 + map.get($numbers, $character); } @else { $digits: $digits * 10; - $result: $result + map-get($numbers, $character) / $digits; + $result: $result + map.get($numbers, $character) / $digits; } } @@ -595,7 +626,7 @@ $p-test: igx-palette(#fff, #000); @each $key, $value in $map { @if($value) != null { - $result: map-merge($result, ( + $result: map.merge($result, ( #{$key}: $value )); } @@ -612,7 +643,7 @@ $p-test: igx-palette(#fff, #000); $result: (); @each $map in $maps { - $result: map-merge($result, map-clean($map)); + $result: map.merge($result, map-clean($map)); } @return $result; @@ -625,26 +656,19 @@ $p-test: igx-palette(#fff, #000); /// @param {string} $key - A key from the theme map to assign as value to the property. /// @example scss Assign the color property in a rule-set to a value from the default avatar theme. /// %igx-avatar-icon { -/// color: --var($avatar-theme, 'icon-color'); +/// color: var-get($avatar-theme, 'icon-color'); /// } -/// // If legacy-support is off, it will produce the following: -/// // %igx-avatar-icon { -/// // color: var(--igx-avatar-icon-color); -/// // } -/// // otherwise, it will return the value for key 'icon-color' in the '$avatar-theme'; +/// Returns the value for key 'icon-color' in the '$avatar-theme'; /// @returns {String} - The value of the key in the passed map, or the name of key concatenated with the key name. -@function --var($map, $key, $fallback: null) { - @if map-has-key($map, $key) { - @if not(legacy()) { - @if not($fallback) { - @return var(--#{$key}) - } - @return var(--#{$key}, #{$fallback}) +@function var-get($map, $key, $fallback: null) { + @if map.has-key($map, $key) { + @if not($fallback) { + @return var(--#{$key}) } @else { - @return map-get($map, $key); + @return var(--#{$key}, #{$fallback}) } } @else { - @error unquote('The map you passed does not contain a key #{$key}'); + @error string.unquote('The map you passed does not contain a key #{$key}'); } } @@ -654,14 +678,14 @@ $p-test: igx-palette(#fff, #000); /// @param {string} $separator - The string separator to split the string by. @function str-split($string, $separator) { $split-arr: (); - $index : str-index($string, $separator); + $index : string.index($string, $separator); @while $index != null { - $item: str-slice($string, 1, $index - 1); - $split-arr: append($split-arr, $item); - $string: str-slice($string, $index + 1); - $index : str-index($string, $separator); + $item: string.slice($string, 1, $index - 1); + $split-arr: list.append($split-arr, $item); + $string: string.slice($string, $index + 1); + $index : string.index($string, $separator); } - $split-arr: append($split-arr, $string); + $split-arr: list.append($split-arr, $string); @return $split-arr; } @@ -681,7 +705,7 @@ $p-test: igx-palette(#fff, #000); /// $resolved-value: resolve-value($value, $palette); @function resolve-value($value, $payload: null) { $result: null; - $dp: $default-palette; + $tp: $theme-palette; // Uncomment to discover some broken themes // @if type-of($value) != 'map' or type-of($value) != 'list' { @@ -689,23 +713,23 @@ $p-test: igx-palette(#fff, #000); // } @each $fn, $args in $value { - $func: get-function($fn); + $func: meta.get-function($fn); - @if legacy() or length(map-keys($value)) > 1 { + @if list.length(map.keys($value)) > 1 { @if $result == null and ($fn == 'igx-color' or $fn == 'igx-contrast-color') { - $result: call($func, $payload or $dp, $args...); - } @else if $fn == 'to-opaque' and type-of($args) == 'map' { - $result: call($func, $result, resolve-value($args, $payload or $dp)); + $result: meta.call($func, $payload or $tp, $args...); + } @else if $fn == 'to-opaque' and meta.type-of($args) == 'map' { + $result: meta.call($func, $result, resolve-value($args, $payload or $tp)); } @else if $result { - $result: call($func, $result, $args...); + $result: meta.call($func, $result, $args...); } @else { - $result: call($func, $args); + $result: meta.call($func, $args); } } @else { @if $result == null and ($fn == 'igx-color' or $fn == 'igx-contrast-color') { - $result: call($func, null, $args...); + $result: meta.call($func, $payload, $args...); } @else { - $result: call($func, $args...); + $result: meta.call($func, $args...); } } } @@ -716,11 +740,11 @@ $p-test: igx-palette(#fff, #000); /// Returns a random color. /// @access private @function random-color() { - @return hsl(random(360), 100%, 50%); + @return hsl(math.random(360), 100%, 50%); } @function igx-generate-series-colors($palette) { - $color-blind: if(global-variable-exists('_igx-enhanced-accessibility'), $_igx-enhanced-accessibility, false); + $color-blind: if(meta.global-variable-exists('_igx-enhanced-accessibility'), $_igx-enhanced-accessibility, false); @if $color-blind { @return ( @@ -771,7 +795,7 @@ $p-test: igx-palette(#fff, #000); @function apply-palette($schema, $palette) { $result: (); @each $key, $value in $schema { - @if type-of($value) == 'map' { + @if meta.type-of($value) == 'map' { $result: extend($result, (#{$key}: resolve-value($value, $palette))); } @else { $result: extend($result, (#{$key}: $value)); @@ -804,19 +828,11 @@ $p-test: igx-palette(#fff, #000); } } -@function legacy() { - @return if( - global-variable-exists('igx-legacy-support'), - $igx-legacy-support, - false - ); -} - /// Returns calc value between given min and max values /// @access private @function fraction-clamp($factor, $min, $max) { - $min: if(unitless($min), $min * 1px, $min); - $max: if(unitless($max), $max * 1px, $max); + $min: if(math.is-unitless($min), $min * 1px, $min); + $max: if(math.is-unitless($max), $max * 1px, $max); @if $min > $max { @error 'Min boundary should be less than max boundary.'; @@ -825,25 +841,24 @@ $p-test: igx-palette(#fff, #000); @return ($max - $min) * $factor + $min; } - /// If the value is unitless, returns value or list of values between 0 and 1 /// where the 0 is the minimum and 1 is the maximum /// If the value is NOT unitless return the value or list of values with the unit you pass /// @access private @function round-borders($value, $min: 0, $max: 0) { - @if type-of($value) == 'number' and unitless($value) { + @if meta.type-of($value) == 'number' and math.is-unitless($value) { @if $value < 0 or $value > 1 { @return $value; } - @return round(fraction-clamp($value, $min, $max)); + @return math.round(fraction-clamp($value, $min, $max)); } - @if type-of($value) == 'list' and length($value) <= 4 { + @if meta.type-of($value) == 'list' and list.length($value) <= 4 { $result: (); @each $i in $value { - $result: append($result, round-borders($i, $min, $max), auto); + $result: list.append($result, round-borders($i, $min, $max), auto); } @return $result; } @@ -851,7 +866,7 @@ $p-test: igx-palette(#fff, #000); @return $value; } -/// A thin wrapper around Sass' lighten function +/// A thin wrapper around Sass' color scale function /// to allow pass-through for values other than those /// of type color. /// @access private @@ -860,13 +875,13 @@ $p-test: igx-palette(#fff, #000); /// @returns {Color | any} - The modified color as produced by the lighten function. /// If the value passed is not a color, then the passed value will be returned. @function lighten-color($color, $amount) { - @if type-of($color) == 'color' { - @return lighten($color, $amount); + @if meta.type-of($color) == 'color' { + @return color.scale($color, $lightness: $amount); } @return $color; } -/// A thin wrapper around Sass' darken function +/// A thin wrapper around Sass' color scale function /// to allow pass-through for values other than those /// of type color. /// @access private @@ -875,8 +890,8 @@ $p-test: igx-palette(#fff, #000); /// @returns {Color | any} - The modified color as produced by the lighten function. /// If the value passed is not a color, then the passed value will be returned. @function darken-color($color, $amount) { - @if type-of($color) == 'color' { - @return darken($color, $amount); + @if meta.type-of($color) == 'color' { + @return color.scale($color, $lightness: -$amount); } @return $color; } @@ -889,7 +904,7 @@ $p-test: igx-palette(#fff, #000); /// $left: if-ltr(left, right); /// $right: if-ltr(right, left); @function if-ltr($if, $else: null) { - $dir: if(global-variable-exists('direction'), $direction, 'ltr'); + $dir: if(meta.global-variable-exists('direction'), $direction, 'ltr'); @if $dir != rtl { @return $if; @@ -910,7 +925,7 @@ $p-test: igx-palette(#fff, #000); } @function expand-shorthand($list) { - $len: length($list); + $len: list.length($list); $margins: ( 'margin-top': null, @@ -927,25 +942,25 @@ $p-test: igx-palette(#fff, #000); $n: 2; } - $key: nth(map-keys($margins), $i); - $value: nth($list, $n); + $key: list.nth(map.keys($margins), $i); + $value: list.nth($list, $n); - $margins: map-merge($margins, ($key: $value)); + $margins: map.merge($margins, ($key: $value)); } @return $margins; } @function map-keys-prefix($map, $prefix, $separator: '-') { - $keys: map-keys($map); - $len: length($keys); + $keys: map.keys($map); + $len: list.length($keys); $result: (); @for $i from 1 through $len { - $key: nth($keys, $i); + $key: list.nth($keys, $i); - $result: map-merge($result, ( - '#{$prefix}#{$separator}#{$key}': map-get($map, $key)) + $result: map.merge($result, ( + '#{$prefix}#{$separator}#{$key}': map.get($map, $key)) ); } @@ -953,13 +968,39 @@ $p-test: igx-palette(#fff, #000); } @function str-replace($string, $search, $replace: '') { - $index: str-index($string, $search); + $index: string.index($string, $search); @if $index { - @return str-slice($string, 1, $index - 1) + $replace + str-replace( - str-slice($string, $index + str-length($search)), + @return string.slice($string, 1, $index - 1) + $replace + str-replace( + string.slice($string, $index + string.length($search)), $search, $replace ); } @return $string; } + +/// @access private +@function is-used($name, $checklist) { + $used: true; + + @if list.index($checklist, $name) { + $deps: map.get($components, $name, 'usedBy'); + $excluded: (); + + @each $item in $checklist { + @if list.index($deps, $item) { + $excluded: list.append($excluded, $item); + } + } + + $used: list.length($deps) != list.length($excluded); + + @if not($used) { + $dropped-themes: list.append($dropped-themes, $name) !global; + } @else { + @warn 'You\'ve opted to exclude the "#{$name}" theme but it was held back as the following themes depend on it: "#{$deps}".'; + } + } + + @return $used; +} diff --git a/projects/igniteui-angular/src/lib/core/styles/base/utilities/_index.scss b/projects/igniteui-angular/src/lib/core/styles/base/utilities/_index.scss index f282ed79081..0211dc6a7b5 100644 --- a/projects/igniteui-angular/src/lib/core/styles/base/utilities/_index.scss +++ b/projects/igniteui-angular/src/lib/core/styles/base/utilities/_index.scss @@ -1,4 +1,3 @@ -@import 'functions'; -@import 'mixins'; -@import 'bem'; -@import 'quirks'; +@forward 'bem'; +@forward 'functions'; +@forward 'mixins'; diff --git a/projects/igniteui-angular/src/lib/core/styles/base/utilities/_mixins.scss b/projects/igniteui-angular/src/lib/core/styles/base/utilities/_mixins.scss index 563a82ce2f8..2df3bbeca29 100644 --- a/projects/igniteui-angular/src/lib/core/styles/base/utilities/_mixins.scss +++ b/projects/igniteui-angular/src/lib/core/styles/base/utilities/_mixins.scss @@ -1,10 +1,19 @@ +@use '../variables' as *; +@use 'functions' as *; +@use 'sass:color'; +@use 'sass:list'; +@use 'sass:map'; +@use 'sass:math'; +@use 'sass:meta'; +@use 'sass:string'; + //// /// @group Utilities /// @author Simeon Simeonoff //// /// @access private -@mixin _icon-w-margin($margin, $left) { +@mixin icon-w-margin($margin, $left) { > * { margin-#{$left}: $margin; @@ -56,11 +65,11 @@ /// @group animations /// @param {String} $name - The name of the keyframes animation. @mixin keyframes($name) { - $keyframe: map-get($keyframes, $name); + $keyframe: map.get($keyframes, $name); @if $keyframe == null { - $keyframe: unique-id(); - $keyframes: map-merge($keyframes, (#{$name}: $keyframe)) !global; + $keyframe: string.unique-id(); + $keyframes: map.merge($keyframes, (#{$name}: $keyframe)) !global; @at-root { @keyframes #{$name} { @@ -73,11 +82,30 @@ /// Registers a component to the list of known components. /// @access private /// @param {String} $name - The component name to register. -@mixin register-component($name) { - $component: map-get($components, $name); +@mixin register-component($name, $deps: ()) { + $component: map.get($components, $name); + @if $component == null { - $component: unique-id(); - $components: map-merge($components, (#{$name}: $component)) !global; + $components: map.merge($components, ( + #{$name}: ( + usedBy: () + ), + )) !global; + } + + @each $dep in $deps { + @include register-component($dep); + + @if map.has-key($components, $dep) { + $component: map.get($components, $dep); + $usedBy: map.get($component, 'usedBy'); + + $components: map.merge($components, ( + #{$dep}: map.merge($component, ( + usedBy: list.append($usedBy, $name, $separator: comma) + )) + )) !global; + } } } @@ -92,10 +120,10 @@ /// @include animation('fade-in' .3s ease-out); /// } @mixin animation($animate...) { - $max: length($animate); + $max: list.length($animate); $animations: ''; @for $i from 1 through $max { - $animations: #{$animations + nth($animate, $i)}; + $animations: #{$animations + list.nth($animate, $i)}; @if $i < $max { $animations: #{$animations + ', '}; } @@ -149,13 +177,9 @@ @mixin gen-color-classes($prop, $prefix, $suffix, $palette: $default-palette) { @each $name, $color in $palette { @each $variant, $value in $color { - @if type-of($value) != 'map' { + @if meta.type-of($value) != 'map' { @include gen-color-class($name, $variant, $prefix, $suffix) { - @if legacy() { - #{$prop}: igx-color($palette, $color: $name, $variant: $variant); - } @else { - #{$prop}: igx-color($color: $name, $variant: $variant); - } + #{$prop}: igx-color($color: $name, $variant: $variant); } } } @@ -172,29 +196,30 @@ /// @mixin igx-palette-vars($palette, $contrast: true) { $scope: if(is-root(), ':root', '&'); - $_meta: map-get($palette, '_meta'); - $theme: if($_meta, map-get($_meta, 'variant'), null); + $_meta: map.get($palette, '_meta'); + $theme: if($_meta, map.get($_meta, 'variant'), null); + $gray: if($_meta, map.get($_meta, 'grays'), #fff); #{$scope} { @each $name, $color in $palette { @each $variant, $value in $color { - $_valid-base: type-of(map-get($color, 500)) == 'color' and $theme; - $_valid-variant: not(str-index(#{$variant}, 'contrast')) and not(str-index(#{$variant}, 'variant')) and $theme; + $_valid-base: meta.type-of(map.get($color, 500)) == 'color' and $theme; + $_valid-variant: not(string.index(#{$variant}, 'contrast')) and not(string.index(#{$variant}, 'variant')) and $theme; @if $_valid-base and $variant == 500 { - --igx-#{$name}-h: #{round(hue($value))}; - --igx-#{$name}-s: #{round(saturation($value))}; - --igx-#{$name}-l: #{round(lightness($value))}; + --igx-#{$name}-h: #{math.round(color.hue($value))}; + --igx-#{$name}-s: #{math.round(color.saturation($value))}; + --igx-#{$name}-l: #{math.round(color.lightness($value))}; @if $name != 'grays' { - --igx-#{$name}-a: #{alpha($value)}; + --igx-#{$name}-a: #{color.alpha($value)}; } @else { --igx-#{$name}-a: 1; } } @if $_valid-base and $_valid-variant { - --igx-#{$name}-#{$variant}: #{_gen-hsla-color($name, $variant, $theme)}; + --igx-#{$name}-#{$variant}: #{gen-hsla-color($name, $variant, $theme, $gray)}; } @else if $name != '_meta' { --igx-#{$name}-#{$variant}: #{$value}; } @@ -252,30 +277,30 @@ /// @include css-vars-from-theme($my-theme); /// } @mixin css-vars-from-theme($theme, $prefix: null) { - $name: map-get($theme, 'name'); + $name: map.get($theme, 'name'); $ignore: ('name', 'palette', 'variant', 'selector'); $webc-prefix: 'igc'; - $webc: nth(str-split($name, '-'), 1) == $webc-prefix; - $themes: map-get($theme, 'themes'); + $webc: list.nth(str-split($name, '-'), 1) == $webc-prefix; + $themes: map.get($theme, 'themes'); @if not($prefix) and $webc { $prefix: $webc-prefix; } - @if not($name) or str-length($name) == 0 { + @if not($name) or string.length($name) == 0 { @error 'Theme should have a non-null or empty name property. Example: my-theme: (name: my-theme)'; } - @if $themes and type-of($themes) == 'map' { + @if $themes and meta.type-of($themes) == 'map' { @each $theme in $themes { - @include igx-css-vars(nth($theme, 2)); + @include igx-css-vars(list.nth($theme, 2)); } } @each $key, $value in $theme { - $elevation: str-index($key, 'elevation'); + $elevation: string.index($key, 'elevation'); - @if not(index($ignore, $key) or $elevation) and type-of($value) != 'map' { + @if not(list.index($ignore, $key) or $elevation) and meta.type-of($value) != 'map' { @if $prefix { --#{$prefix}-#{$key}: var(--#{$name}-#{$key}, #{$value}); } @else { @@ -290,20 +315,18 @@ /// @param {map} $theme - The component theme to be used /// @requires {mixin} css-vars-from-theme @mixin igx-css-vars($theme, $scope: null, $prefix: null) { - $s: map-get($theme, 'selector'); - $n: map-get($theme, 'name'); + $s: map.get($theme, 'selector'); + $n: map.get($theme, 'name'); $name: if($scope, $scope, $s or $n); - @if not(legacy()) { - @if is-root() { - #{$name} { - @include css-vars-from-theme($theme, $prefix); - } - } @else { - &, - #{$name} { - @include css-vars-from-theme($theme, $prefix); - } + @if is-root() { + #{$name} { + @include css-vars-from-theme($theme, $prefix); + } + } @else { + &, + #{$name} { + @include css-vars-from-theme($theme, $prefix); } } } @@ -330,12 +353,12 @@ /// // } @mixin igx-scope($parent) { @each $selector in & { - $len: length($selector); + $len: list.length($selector); @if $len == null { $parent: $parent; } @else { @for $i from 1 through $len { - $parent: append($parent, nth($selector, $i)); + $parent: list.append($parent, list.nth($selector, $i)); } } @@ -352,7 +375,7 @@ /// margin-right: 8px; /// } @mixin if-ltr { - $dir: if(global-variable-exists('direction'), $direction, 'ltr'); + $dir: if(meta.global-variable-exists('direction'), $direction, 'ltr'); @if $dir != 'rtl' { @content; @@ -366,7 +389,7 @@ /// margin-left: 8px; /// } @mixin if-rtl { - $dir: if(global-variable-exists('direction'), $direction, 'ltr'); + $dir: if(meta.global-variable-exists('direction'), $direction, 'ltr'); @if $dir == 'rtl' { @content; diff --git a/projects/igniteui-angular/src/lib/core/styles/base/utilities/_quirks.scss b/projects/igniteui-angular/src/lib/core/styles/base/utilities/_quirks.scss deleted file mode 100644 index 9aaeefde019..00000000000 --- a/projects/igniteui-angular/src/lib/core/styles/base/utilities/_quirks.scss +++ /dev/null @@ -1,5 +0,0 @@ -// Angular hack for binding to [hidden] property -// not working -[hidden] { - display: none !important; -} diff --git a/projects/igniteui-angular/src/lib/core/styles/components/_common/_igx-display-container.scss b/projects/igniteui-angular/src/lib/core/styles/components/_common/_igx-display-container.scss index f41e74dcd65..36935eff7c0 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/_common/_igx-display-container.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/_common/_igx-display-container.scss @@ -1,3 +1,5 @@ +@use '../../base' as *; + %display-container { display: inherit; flex-flow: inherit; @@ -11,10 +13,12 @@ width: 100%; } -@include b(igx-display-container) { - @extend %display-container !optional; +@mixin component { + @include b(igx-display-container) { + @extend %display-container !optional; - @include m(inactive) { - @extend %display-container--inactive !optional; + @include m(inactive) { + @extend %display-container--inactive !optional; + } } } diff --git a/projects/igniteui-angular/src/lib/core/styles/components/_common/_igx-drag.scss b/projects/igniteui-angular/src/lib/core/styles/components/_common/_igx-drag.scss index 3cd93e1e0c8..deed5e80aee 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/_common/_igx-drag.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/_common/_igx-drag.scss @@ -1,3 +1,5 @@ +@use '../../base' as *; + %drag { touch-action: none; } @@ -10,14 +12,16 @@ user-select: none; } -@include b(igx-drag) { - @extend %drag !optional; +@mixin component { + @include b(igx-drag) { + @extend %drag !optional; - @include e(handle) { - @extend %drag-handle !optional; - } + @include e(handle) { + @extend %drag-handle !optional; + } - @include m(select-disabled) { - @extend %drag--select-disabled !optional; + @include m(select-disabled) { + @extend %drag--select-disabled !optional; + } } } diff --git a/projects/igniteui-angular/src/lib/core/styles/components/_common/_igx-vhelper.scss b/projects/igniteui-angular/src/lib/core/styles/components/_common/_igx-vhelper.scss index c7e5ace7166..38925f701bc 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/_common/_igx-vhelper.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/_common/_igx-vhelper.scss @@ -1,50 +1,51 @@ +@use '../../base' as *; + /// @group themes /// @access private -@mixin igx-vhelper { - $left: if-ltr(left, right); - $right: if-ltr(right, left); - - %vhelper-display { - display: block; - overflow: auto; - z-index: 10001; - } +$_right: if-ltr(right, left); - %vhelper--vertical { - position: absolute; - top: 0; - #{$right}: 0; - } +%vhelper-display { + display: block; + overflow: auto; + z-index: 10001; +} - %vhelper--horizontal { - width: 100%; - } +%vhelper--vertical { + position: absolute; + top: 0; + #{$_right}: 0; +} - %vhelper-content--vertical { - width: 1px; - } +%vhelper--horizontal { + width: 100%; +} - %vhelper-content--horizontal { - height: 1px; - } +%vhelper-content--vertical { + width: 1px; } -@include b(igx-vhelper) { - @include m(vertical) { - @extend %vhelper-display !optional; - @extend %vhelper--vertical !optional; +%vhelper-content--horizontal { + height: 1px; +} + +@mixin component { + @include b(igx-vhelper) { + @include m(vertical) { + @extend %vhelper-display !optional; + @extend %vhelper--vertical !optional; - @include e(placeholder-content) { - @extend %vhelper-content--vertical !optional; + @include e(placeholder-content) { + @extend %vhelper-content--vertical !optional; + } } - } - @include m(horizontal) { - @extend %vhelper-display !optional; - @extend %vhelper--horizontal !optional; + @include m(horizontal) { + @extend %vhelper-display !optional; + @extend %vhelper--horizontal !optional; - @include e(placeholder-content) { - @extend %vhelper-content--horizontal !optional; + @include e(placeholder-content) { + @extend %vhelper-content--horizontal !optional; + } } } } diff --git a/projects/igniteui-angular/src/lib/core/styles/components/_index.scss b/projects/igniteui-angular/src/lib/core/styles/components/_index.scss new file mode 100644 index 00000000000..139ccc30b09 --- /dev/null +++ b/projects/igniteui-angular/src/lib/core/styles/components/_index.scss @@ -0,0 +1,48 @@ +@forward 'action-strip/action-strip-theme'; +@forward 'avatar/avatar-theme'; +@forward 'badge/badge-theme'; +@forward 'banner/banner-theme'; +@forward 'bottom-nav/bottom-nav-theme'; +@forward 'button/button-theme'; +@forward 'button-group/button-group-theme'; +@forward 'card/card-theme'; +@forward 'calendar/calendar-theme'; +@forward 'carousel/carousel-theme'; +@forward 'charts'; +@forward 'checkbox/checkbox-theme'; +@forward 'chip/chip-theme'; +@forward 'column-actions/column-actions-theme'; +@forward 'combo/combo-theme'; +@forward 'date-picker/date-picker-theme'; +@forward 'date-range-picker/date-range-picker-theme'; +@forward 'dialog/dialog-theme'; +@forward 'divider/divider-theme'; +@forward 'dock-manager/dock-manager-theme'; +@forward 'drop-down/drop-down-theme'; +@forward 'expansion-panel/expansion-panel-theme'; +@forward 'grid/grid-theme'; +@forward 'grid-summary/grid-summary-theme'; +@forward 'grid-toolbar/grid-toolbar-theme'; +@forward 'highlight/highlight-theme.scss'; +@forward 'icon/icon-theme'; +@forward 'input/input-group-theme'; +@forward 'list/list-theme'; +@forward 'navbar/navbar-theme'; +@forward 'navdrawer/navdrawer-theme'; +@forward 'overlay/overlay-theme'; +@forward 'paginator/paginator-theme'; +@forward 'progress/progress-theme'; +@forward 'radio/radio-theme'; +@forward 'ripple/ripple-theme'; +@forward 'scrollbar/scrollbar-theme'; +@forward 'slider/slider-theme'; +@forward 'snackbar/snackbar-theme'; +@forward 'splitter/splitter-theme'; +@forward 'switch/switch-theme'; +@forward 'stepper/stepper-theme'; +@forward 'tabs/tabs-theme'; +@forward 'time-picker/time-picker-theme'; +@forward 'toast/toast-theme'; +@forward 'tooltip/tooltip-theme'; +@forward 'tree/tree-theme.scss'; +@forward 'watermark/watermark-theme'; diff --git a/projects/igniteui-angular/src/lib/core/styles/components/action-strip/_action-strip-component.scss b/projects/igniteui-angular/src/lib/core/styles/components/action-strip/_action-strip-component.scss index e8ed3024cca..0bea012b79d 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/action-strip/_action-strip-component.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/action-strip/_action-strip-component.scss @@ -1,3 +1,6 @@ +@use '../../base' as *; +@use 'sass:string'; + //// /// @group components /// @author Simeon Simeonoff @@ -5,47 +8,57 @@ /// @requires {mixin} bem-elem /// @requires {mixin} bem-mod //// -@include b(igx-action-strip) { - // Register the component in the component registry - $this: bem--selector-to-string(&); - @include register-component(str-slice($this, 2, -1)); - @extend %igx-action-strip-display !optional; +@mixin component { + @include b(igx-action-strip) { + // Register the component in the component registry + $this: bem--selector-to-string(&); + @include register-component( + $name: string.slice($this, 2, -1), + $deps: ( + igx-button, + igx-drop-down, + igx-icon, + ) + ); - @include m(cosy) { - @extend %igx-action-strip--cosy !optional; - } + @extend %igx-action-strip-display !optional; - @include m(compact) { - @extend %igx-action-strip--compact !optional; - } + @include m(cosy) { + @extend %igx-action-strip--cosy !optional; + } - @include e(actions) { - @extend %igx-action-strip__actions !optional; - } + @include m(compact) { + @extend %igx-action-strip--compact !optional; + } - @include e(delete) { - @extend %igx-action-strip__delete !optional; - } + @include e(actions) { + @extend %igx-action-strip__actions !optional; + } - @include e(editing-actions) { - @extend %igx-action-strip__editing-actions !optional; - } + @include e(delete) { + @extend %igx-action-strip__delete !optional; + } - @include e(pinning-actions) { - @extend %igx-action-strip__pinning-actions !optional; - } + @include e(editing-actions) { + @extend %igx-action-strip__editing-actions !optional; + } - @include e(menu-item) { - @extend %igx-action-strip__menu-item !optional; - } + @include e(pinning-actions) { + @extend %igx-action-strip__pinning-actions !optional; + } - @include e(menu-item, $m: 'danger') { - @extend %igx-action-strip__menu-item !optional; - @extend %igx-action-strip__menu-item--danger !optional; - } + @include e(menu-item) { + @extend %igx-action-strip__menu-item !optional; + } + + @include e(menu-item, $m: 'danger') { + @extend %igx-action-strip__menu-item !optional; + @extend %igx-action-strip__menu-item--danger !optional; + } - @include e(menu-button) { - @extend %igx-action-strip__menu-button !optional; + @include e(menu-button) { + @extend %igx-action-strip__menu-button !optional; + } } } diff --git a/projects/igniteui-angular/src/lib/core/styles/components/action-strip/_action-strip-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/action-strip/_action-strip-theme.scss index b873bc2833d..1e127d3ddc8 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/action-strip/_action-strip-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/action-strip/_action-strip-theme.scss @@ -1,3 +1,7 @@ +@use '../../base' as *; +@use '../../themes/schemas' as *; +@use 'sass:map'; + //// /// @group themes /// @access public @@ -37,8 +41,8 @@ $name: 'igx-action-strip'; $action-strip-schema: (); - @if map-has-key($schema, $name) { - $action-strip-schema: map-get($schema, $name); + @if map.has-key($schema, $name) { + $action-strip-schema: map.get($schema, $name); } @else { $action-strip-schema: $schema; } @@ -46,7 +50,7 @@ $theme: apply-palette($action-strip-schema, $palette); $actions-border-radius: round-borders( - if($actions-border-radius, $actions-border-radius, map-get($action-strip-schema, 'actions-border-radius')), 0, 24px + if($actions-border-radius, $actions-border-radius, map.get($action-strip-schema, 'actions-border-radius')), 0, 24px ); @if not($icon-color) and $actions-background { @@ -67,7 +71,7 @@ /// @param {Map} $theme - The theme used to style the component. /// @requires {mixin} igx-css-vars /// @requires rem -/// @requires --var +/// @requires var-get @mixin igx-action-strip($theme) { @include igx-css-vars($theme); @@ -77,7 +81,7 @@ compact: 0 rem(12px) ); - $variant: map-get($theme, variant); + $variant: map.get($theme, variant); $left: if-ltr(left, right); $right: if-ltr(right, left); @@ -92,9 +96,9 @@ pointer-events: none; top: 0; #{$left}: 0; - background: --var($theme, 'background'); + background: var-get($theme, 'background'); color: inherit; - padding: map-get($padding, 'comfortable'); + padding: map.get($padding, 'comfortable'); z-index: 9999; } @@ -113,12 +117,12 @@ %igx-action-strip--cosy { @extend %action-icons-density; - padding: map-get($padding, 'cosy'); + padding: map.get($padding, 'cosy'); } %igx-action-strip--compact { @extend %action-icons-density; - padding: map-get($padding, 'compact'); + padding: map.get($padding, 'compact'); } %igx-action-strip__editing-actions, @@ -157,10 +161,10 @@ } %igx-action-strip__menu-item--danger { - color: igx-color(map-get($theme, 'palette'), 'error'); + color: igx-color(map.get($theme, 'palette'), 'error'); &:hover { - color: igx-color(map-get($theme, 'palette'), 'error'); + color: igx-color(map.get($theme, 'palette'), 'error'); } } @@ -175,9 +179,9 @@ justify-content: center; pointer-events: all; position: relative; - color: --var($theme, 'icon-color'); - border-radius: --var($theme, 'actions-border-radius'); - background: --var($theme, 'actions-background'); + color: var-get($theme, 'icon-color'); + border-radius: var-get($theme, 'actions-border-radius'); + background: var-get($theme, 'actions-background'); max-height: 36px; &:last-child { @@ -185,16 +189,16 @@ } igx-icon { - color: --var($theme, 'icon-color'); + color: var-get($theme, 'icon-color'); } [igxButton='icon'] { igx-icon { - color: --var($theme, 'icon-color'); + color: var-get($theme, 'icon-color'); } @if $variant == 'indigo-design' { - border-radius: --var($theme, 'actions-border-radius'); + border-radius: var-get($theme, 'actions-border-radius'); } } } @@ -211,7 +215,7 @@ %igx-action-strip__delete { igx-icon { - color: --var($theme, 'delete-action'); + color: var-get($theme, 'delete-action'); } } } diff --git a/projects/igniteui-angular/src/lib/core/styles/components/avatar/_avatar-component.scss b/projects/igniteui-angular/src/lib/core/styles/components/avatar/_avatar-component.scss index 82624ea659a..603342be342 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/avatar/_avatar-component.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/avatar/_avatar-component.scss @@ -1,3 +1,6 @@ +@use '../../base' as *; +@use 'sass:string'; + //// /// @group components /// @author Simeon Simeonoff @@ -5,42 +8,49 @@ /// @requires {mixin} bem-elem /// @requires {mixin} bem-mod //// -@include b(igx-avatar) { - // Register the component in the component registry - $this: bem--selector-to-string(&); - @include register-component(str-slice($this, 2, -1)); - - @extend %igx-avatar-display !optional; - - @include e(image) { - @extend %igx-avatar-image !optional; - } - - @include m(rounded) { - @extend %igx-avatar--rounded !optional; - } - - @include m(small) { - @extend %igx-avatar--small !optional; - } - - @include m(medium) { - @extend %igx-avatar--medium !optional; - } - - @include m(large) { - @extend %igx-avatar--large !optional; - } - - @include m(initials) { - @extend %igx-avatar-initials--small !optional; - } - - @include mx(medium, initials) { - @extend %igx-avatar-initials--medium !optional; - } - - @include mx(large, initials) { - @extend %igx-avatar-initials--large !optional; +@mixin component { + @include b(igx-avatar) { + // Register the component in the component registry + $this: bem--selector-to-string(&); + @include register-component( + $name: string.slice($this, 2, -1), + $deps: ( + igx-icon, + ) + ); + + @extend %igx-avatar-display !optional; + + @include e(image) { + @extend %igx-avatar-image !optional; + } + + @include m(rounded) { + @extend %igx-avatar--rounded !optional; + } + + @include m(small) { + @extend %igx-avatar--small !optional; + } + + @include m(medium) { + @extend %igx-avatar--medium !optional; + } + + @include m(large) { + @extend %igx-avatar--large !optional; + } + + @include m(initials) { + @extend %igx-avatar-initials--small !optional; + } + + @include mx(medium, initials) { + @extend %igx-avatar-initials--medium !optional; + } + + @include mx(large, initials) { + @extend %igx-avatar-initials--large !optional; + } } } diff --git a/projects/igniteui-angular/src/lib/core/styles/components/avatar/_avatar-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/avatar/_avatar-theme.scss index 5b0fbf11afb..c38e533dc5a 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/avatar/_avatar-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/avatar/_avatar-theme.scss @@ -1,3 +1,7 @@ +@use '../../base' as *; +@use '../../themes/schemas' as *; +@use 'sass:map'; + //// /// @group themes /// @access public @@ -33,8 +37,8 @@ $name: 'igx-avatar'; $avatar-schema: (); - @if map-has-key($schema, $name) { - $avatar-schema: map-get($schema, $name); + @if map.has-key($schema, $name) { + $avatar-schema: map.get($schema, $name); } @else { $avatar-schema: $schema; } @@ -42,7 +46,7 @@ $theme: apply-palette($avatar-schema, $palette); $border-radius: round-borders( - if($border-radius, $border-radius, map-get($avatar-schema, 'border-radius')), 0, 16px + if($border-radius, $border-radius, map.get($avatar-schema, 'border-radius')), 0, 16px ); @if not($color) and $background { @@ -62,26 +66,26 @@ /// @param {Map} $theme - The theme used to style the component. /// @requires {mixin} igx-css-vars /// @requires rem -/// @requires --var +/// @requires var-get @mixin igx-avatar($theme) { @include igx-css-vars($theme); - $size: map-get($theme, 'size'); + $size: map.get($theme, 'size'); $small-size: rem(40px); $medium-size: rem(64px); $large-size: rem(88px); - $variant: map-get($theme, variant); + $variant: map.get($theme, variant); $bootstrap-theme: $variant == 'bootstrap'; - $box-shadow: map-get(( + $box-shadow: map.get(( material: null, fluent: null, - bootstrap: 0 0 0 rem(3px) --var($theme, 'background'), + bootstrap: 0 0 0 rem(3px) var-get($theme, 'background'), indigo-design: null, ), $variant); - %_igx-avatar-outline { + %igx-avatar-outline { position: absolute; content: ''; width: 100%; @@ -96,17 +100,17 @@ justify-content: center; align-items: center; user-select: none; - color: --var($theme, 'color'); - background: --var($theme, 'background'); + color: var-get($theme, 'color'); + background: var-get($theme, 'background'); vertical-align: middle; - border-radius: --var($theme, 'border-radius'); + border-radius: var-get($theme, 'border-radius'); outline-style: none; flex-shrink: 0; &::after { box-shadow: none; @if $bootstrap-theme { - @extend %_igx-avatar-outline; + @extend %igx-avatar-outline; } transition: box-shadow .15s $ease-in-out-quad; } @@ -120,7 +124,7 @@ width: 100%; height: 100%; border-radius: inherit; - background-color: --var($theme, 'background'); + background-color: var-get($theme, 'background'); background-size: cover; background-repeat: no-repeat; background-position: center; @@ -128,7 +132,7 @@ %igx-avatar--rounded { --igx-avatar-border-radius: 44px; - border-radius: --var(('border-radius': 44px), 'border-radius'); + border-radius: var-get(('border-radius': 44px), 'border-radius'); } %igx-avatar--initials { @@ -137,37 +141,37 @@ %igx-avatar-initials--small { --size: #{$size or $small-size}; - font-size: calc(#{--var(('size': $size or $small-size), 'size')} / 2); - line-height: calc(#{--var(('size': $size or $small-size), 'size')} / 2); + font-size: calc(#{var-get(('size': $size or $small-size), 'size')} / 2); + line-height: calc(#{var-get(('size': $size or $small-size), 'size')} / 2); } %igx-avatar-initials--medium { --size: #{$size or $medium-size}; - font-size: calc(#{--var(('size': $size or $medium-size), 'size')} / 2); - line-height: calc(#{--var(('size': $size or $medium-size), 'size')} / 2); + font-size: calc(#{var-get(('size': $size or $medium-size), 'size')} / 2); + line-height: calc(#{var-get(('size': $size or $medium-size), 'size')} / 2); } %igx-avatar-initials--large { --size: #{$size or $large-size}; - font-size: calc(#{--var(('size': $size or $large-size), 'size')} / 2); - line-height: calc(#{--var(('size': $size or $large-size), 'size')} / 2); + font-size: calc(#{var-get(('size': $size or $large-size), 'size')} / 2); + line-height: calc(#{var-get(('size': $size or $large-size), 'size')} / 2); } %igx-avatar--small { --size: #{$size or $small-size}; - width: --var(('size': $size or $small-size), 'size'); - height: --var(('size': $size or $small-size), 'size'); + width: var-get(('size': $size or $small-size), 'size'); + height: var-get(('size': $size or $small-size), 'size'); } %igx-avatar--medium { --size: #{$size or $medium-size}; - width: --var(('size': $size or $medium-size), 'size'); - height: --var(('size': $size or $medium-size), 'size'); + width: var-get(('size': $size or $medium-size), 'size'); + height: var-get(('size': $size or $medium-size), 'size'); } %igx-avatar--large { --size: #{$size or $large-size}; - width: --var(('size': $size or $large-size), 'size'); - height: --var(('size': $size or $large-size), 'size'); + width: var-get(('size': $size or $large-size), 'size'); + height: var-get(('size': $size or $large-size), 'size'); } } diff --git a/projects/igniteui-angular/src/lib/core/styles/components/badge/_badge-component.scss b/projects/igniteui-angular/src/lib/core/styles/components/badge/_badge-component.scss index c931b5bbfd8..cdc7e7554c9 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/badge/_badge-component.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/badge/_badge-component.scss @@ -1,3 +1,6 @@ +@use '../../base' as *; +@use 'sass:string'; + //// /// @group components /// @author Simeon Simeonoff @@ -5,37 +8,45 @@ /// @requires {mixin} bem-elem /// @requires {mixin} bem-mod //// -@include b(igx-badge) { - $this: bem--selector-to-string(&); - @include register-component(str-slice($this, 2, -1)); - - @extend %igx-badge-display !optional; - - @include e(value) { - @extend %igx-badge-value !optional; - } - - @include m(default) { - @extend %igx-badge--default !optional; - } - - @include m(info) { - @extend %igx-badge--info !optional; - } - - @include m(success) { - @extend %igx-badge--success !optional; - } - - @include m(warning) { - @extend %igx-badge--warn !optional; - } - - @include m(error) { - @extend %igx-badge--error !optional; - } - @include m(hidden) { - @extend %igx-badge--hidden !optional; +@mixin component { + @include b(igx-badge) { + $this: bem--selector-to-string(&); + @include register-component( + $name: string.slice($this, 2, -1), + $deps: ( + igx-icon, + ) + ); + + @extend %igx-badge-display !optional; + + @include e(value) { + @extend %igx-badge-value !optional; + } + + @include m(default) { + @extend %igx-badge--default !optional; + } + + @include m(info) { + @extend %igx-badge--info !optional; + } + + @include m(success) { + @extend %igx-badge--success !optional; + } + + @include m(warning) { + @extend %igx-badge--warn !optional; + } + + @include m(error) { + @extend %igx-badge--error !optional; + } + + @include m(hidden) { + @extend %igx-badge--hidden !optional; + } } } diff --git a/projects/igniteui-angular/src/lib/core/styles/components/badge/_badge-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/badge/_badge-theme.scss index e0b2ae0f721..59db966d22b 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/badge/_badge-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/badge/_badge-theme.scss @@ -1,3 +1,7 @@ +@use '../../base' as *; +@use '../../themes/schemas' as *; +@use 'sass:map'; + //// /// @group themes /// @access public @@ -53,8 +57,8 @@ $name: 'igx-badge'; $badge-schema: (); - @if map-has-key($schema, $name) { - $badge-schema: map-get($schema, $name); + @if map.has-key($schema, $name) { + $badge-schema: map.get($schema, $name); } @else { $badge-schema: $schema; } @@ -62,7 +66,7 @@ $theme: apply-palette($badge-schema, $palette); $border-radius: round-borders( - if($border-radius, $border-radius, map-get($badge-schema, 'border-radius')), 0, 11px + if($border-radius, $border-radius, map.get($badge-schema, 'border-radius')), 0, 11px ); @if not($icon-color) and $background-color { @@ -74,7 +78,7 @@ } @if not($shadow) { - $elevation: map-get($badge-schema, 'elevation'); + $elevation: map.get($badge-schema, 'elevation'); $shadow: igx-elevation($elevations, $elevation); } @@ -95,11 +99,11 @@ /// @requires {mixin} igx-css-vars /// @requires igx-color /// @requires rem -/// @requires --var +/// @requires var-get @mixin igx-badge($theme) { @include igx-css-vars($theme); - $palette: map-get($theme, 'palette'); + $palette: map.get($theme, 'palette'); $badge-width: 22px; $badge-height: $badge-width; @@ -120,13 +124,13 @@ height: $badge-height; font-size: $badge-font-size; font-weight: $badge-font-weight; - color: --var($theme, 'text-color'); + color: var-get($theme, 'text-color'); line-height: 1; - background: --var($theme, 'background-color'); - border-radius: --var($theme, 'border-radius'); - box-shadow: --var($theme, 'shadow'); - border-width: --var($theme, 'border-width'); - border-color: --var($theme, 'border-color'); + background: var-get($theme, 'background-color'); + border-radius: var-get($theme, 'border-radius'); + box-shadow: var-get($theme, 'shadow'); + border-width: var-get($theme, 'border-width'); + border-color: var-get($theme, 'border-color'); border-style: $border-type; overflow: hidden; @@ -138,7 +142,7 @@ height: $badge-width - 2px; font-size: $badge-icon-font-size; font-weight: $badge-font-weight; - color: --var($theme, 'icon-color'); + color: var-get($theme, 'icon-color'); } } diff --git a/projects/igniteui-angular/src/lib/core/styles/components/banner/_banner-component.scss b/projects/igniteui-angular/src/lib/core/styles/components/banner/_banner-component.scss index 6e70df9c4ce..e09b3277eb2 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/banner/_banner-component.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/banner/_banner-component.scss @@ -1,3 +1,6 @@ +@use '../../base' as *; +@use 'sass:string'; + //// /// @group components /// @author Marin Popov @@ -6,51 +9,60 @@ /// @requires {mixin} bem-mod //// -@include b(igx-banner) { - $this: bem--selector-to-string(&); - @include register-component(str-slice($this, 2, -1)); +@mixin component { + @include b(igx-banner) { + $this: bem--selector-to-string(&); + @include register-component( + $name: string.slice($this, 2, -1), + $deps: ( + igx-button, + igx-expansion-panel, + igx-icon, + ) + ); - @extend %igx-banner !optional; + @extend %igx-banner !optional; - @include e(message) { - @extend %igx-banner__message !optional; - } + @include e(message) { + @extend %igx-banner__message !optional; + } - @include e(illustration) { - @extend %igx-banner__illustration !optional; - } + @include e(illustration) { + @extend %igx-banner__illustration !optional; + } - @include e(border-top) { - @extend %igx-banner__border-top !optional; - } + @include e(border-top) { + @extend %igx-banner__border-top !optional; + } - @include e(border-bottom) { - @extend %igx-banner__border-bottom !optional; - } + @include e(border-bottom) { + @extend %igx-banner__border-bottom !optional; + } - @include e(text) { - @extend %igx-banner__text !optional; - } + @include e(text) { + @extend %igx-banner__text !optional; + } - @include e(actions) { - @extend %igx-banner__actions !optional; - } + @include e(actions) { + @extend %igx-banner__actions !optional; + } - @include m(vertical) { - @extend %igx-banner--vertical !optional; - } + @include m(vertical) { + @extend %igx-banner--vertical !optional; + } - @include e(banner__row) { - @extend %igx-banner__row !optional; - } + @include e(banner__row) { + @extend %igx-banner__row !optional; + } - @include m(cosy) { - @extend %igx-banner !optional; - @extend %igx-banner--cosy !optional + @include m(cosy) { + @extend %igx-banner !optional; + @extend %igx-banner--cosy !optional } - @include m(compact) { - @extend %igx-banner !optional; - @extend %igx-banner--compact !optional; + @include m(compact) { + @extend %igx-banner !optional; + @extend %igx-banner--compact !optional; + } } } diff --git a/projects/igniteui-angular/src/lib/core/styles/components/banner/_banner-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/banner/_banner-theme.scss index f1e68eb533b..782bd0825e1 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/banner/_banner-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/banner/_banner-theme.scss @@ -1,3 +1,8 @@ +@use '../../base' as *; +@use '../../themes/schemas' as *; +@use '../../typography/base' as *; +@use 'sass:map'; + //// /// @group themes /// @access public @@ -36,8 +41,8 @@ $selector: 'igx-banner, .igx-banner, .igx-banner--cosy, .igx-banner--compact'; $banner-schema: (); - @if map-has-key($schema, $name) { - $banner-schema: map-get($schema, $name); + @if map.has-key($schema, $name) { + $banner-schema: map.get($schema, $name); } @else { $banner-schema: $schema; } @@ -62,7 +67,7 @@ /// @param {Map} $theme - The theme used to style the component. /// @requires {mixin} igx-css-vars /// @requires rem -/// @requires --var +/// @requires var-get @mixin igx-banner($theme) { @include igx-css-vars($theme); @@ -83,11 +88,11 @@ } %igx-banner { - padding-#{$right}: map-get($banner-padding, 'comfortable'); + padding-#{$right}: map.get($banner-padding, 'comfortable'); padding-#{$left}: 0; - padding-top: map-get($banner-padding, 'comfortable'); - padding-bottom: map-get($banner-padding, 'comfortable'); - background: --var($theme, 'banner-background'); + padding-top: map.get($banner-padding, 'comfortable'); + padding-bottom: map.get($banner-padding, 'comfortable'); + background: var-get($theme, 'banner-background'); align-items: center; position: relative; flex-wrap: wrap; @@ -100,31 +105,35 @@ min-width: rem(40); height: rem(40); margin-#{$left}: rem(16); - color: --var($theme, 'banner-illustration-color'); + color: var-get($theme, 'banner-illustration-color'); } %igx-banner__border-top { - border-top: 1px solid --var($theme, 'banner-border-color'); + border-top: 1px solid var-get($theme, 'banner-border-color'); top: -1px } %igx-banner__border-bottom { - border-bottom: 1px solid --var($theme, 'banner-border-color'); + border-bottom: 1px solid var-get($theme, 'banner-border-color'); top: 0; } %igx-banner__text { - color: --var($theme, 'banner-message-color'); + color: var-get($theme, 'banner-message-color'); flex: 1 0 0%; margin-#{$left}: rem(24); + + > * { + margin-top: 0 !important; + } } %igx-banner--cosy { - padding: map-get($banner-padding, 'cosy'); + padding: map.get($banner-padding, 'cosy'); } %igx-banner--compact { - padding: map-get($banner-padding, 'compact'); + padding: map.get($banner-padding, 'compact'); } %igx-banner__message { @@ -155,7 +164,7 @@ @mixin igx-banner-typography($type-scale, $categories: ( message: 'body-2') ) { - $message: map-get($categories, 'message'); + $message: map.get($categories, 'message'); %igx-banner__text { @include igx-type-style($type-scale, $message) { diff --git a/projects/igniteui-angular/src/lib/core/styles/components/bottom-nav/_bottom-nav-component.scss b/projects/igniteui-angular/src/lib/core/styles/components/bottom-nav/_bottom-nav-component.scss index ff2f7e643d3..0fca9f54947 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/bottom-nav/_bottom-nav-component.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/bottom-nav/_bottom-nav-component.scss @@ -1,3 +1,6 @@ +@use '../../base' as *; +@use 'sass:string'; + //// /// @group components /// @author Simeon Simeonoff @@ -5,63 +8,71 @@ /// @requires {mixin} bem-elem /// @requires {mixin} bem-mod //// -@include b(igx-bottom-nav) { - $this: bem--selector-to-string(&); - @include register-component(str-slice($this, 2, -1)); - - @include e(panel) { - @extend %igx-bottom-nav-panel !optional; - } - - @include e(menu) { - @extend %igx-bottom-nav-menu !optional; - } - @include e(menu, $m: top) { - @extend %igx-bottom-nav-menu--top !optional; - } +@mixin component { + @include b(igx-bottom-nav) { + $this: bem--selector-to-string(&); + @include register-component( + $name: string.slice($this, 2, -1), + $deps: ( + igx-icon, + ) + ); - @include e(menu, $m: bottom) { - @extend %igx-bottom-nav-menu--bottom !optional; - } + @include e(panel) { + @extend %igx-bottom-nav-panel !optional; + } - @include e(menu-item) { - @extend %igx-bottom-nav-menu-item !optional; + @include e(menu) { + @extend %igx-bottom-nav-menu !optional; + } - [igxBottomNavHeaderIcon] { - @extend %igx-tab-icon !optional; + @include e(menu, $m: top) { + @extend %igx-bottom-nav-menu--top !optional; } - [igxBottomNavHeaderLabel] { - @extend %igx-tab-label !optional; + @include e(menu, $m: bottom) { + @extend %igx-bottom-nav-menu--bottom !optional; } - } - @include e(menu-item, $m: selected) { - @extend %igx-bottom-nav-menu-item !optional; - @extend %igx-bottom-nav-menu-item--selected !optional; + @include e(menu-item) { + @extend %igx-bottom-nav-menu-item !optional; - [igxBottomNavHeaderIcon] { - @extend %igx-tab-icon !optional; - @extend %igx-tab-icon--selected !optional; - } + [igxBottomNavHeaderIcon] { + @extend %igx-tab-icon !optional; + } - [igxBottomNavHeaderLabel] { - @extend %igx-tab-label !optional; - @extend %igx-tab-label--selected !optional; + [igxBottomNavHeaderLabel] { + @extend %igx-tab-label !optional; + } } - } - @include e(menu-item, $m: disabled) { - @extend %igx-bottom-nav-menu-item !optional; - @extend %igx-bottom-nav-menu-item--disabled !optional; + @include e(menu-item, $m: selected) { + @extend %igx-bottom-nav-menu-item !optional; + @extend %igx-bottom-nav-menu-item--selected !optional; - [igxBottomNavHeaderIcon] { - @extend %igx-tab-icon !optional; + [igxBottomNavHeaderIcon] { + @extend %igx-tab-icon !optional; + @extend %igx-tab-icon--selected !optional; + } + + [igxBottomNavHeaderLabel] { + @extend %igx-tab-label !optional; + @extend %igx-tab-label--selected !optional; + } } - [igxBottomNavHeaderLabel] { - @extend %igx-tab-label !optional; + @include e(menu-item, $m: disabled) { + @extend %igx-bottom-nav-menu-item !optional; + @extend %igx-bottom-nav-menu-item--disabled !optional; + + [igxBottomNavHeaderIcon] { + @extend %igx-tab-icon !optional; + } + + [igxBottomNavHeaderLabel] { + @extend %igx-tab-label !optional; + } } } } diff --git a/projects/igniteui-angular/src/lib/core/styles/components/bottom-nav/_bottom-nav-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/bottom-nav/_bottom-nav-theme.scss index 6f825c567f0..950be09ba9a 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/bottom-nav/_bottom-nav-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/bottom-nav/_bottom-nav-theme.scss @@ -1,3 +1,9 @@ +@use '../../base' as *; +@use '../../themes/schemas' as *; +@use '../../typography/base' as *; +@use 'sass:map'; +@use 'sass:meta'; + //// /// @group themes /// @access public @@ -40,8 +46,8 @@ $name: 'igx-bottom-nav'; $bottom-nav-schema: (); - @if map-has-key($schema, $name) { - $bottom-nav-schema: map-get($schema, $name); + @if map.has-key($schema, $name) { + $bottom-nav-schema: map.get($schema, $name); } @else { $bottom-nav-schema: $schema; } @@ -49,13 +55,13 @@ $theme: apply-palette($bottom-nav-schema, $palette); @if not($idle-item-color) and $background { - @if type-of($background) == 'color' { + @if meta.type-of($background) == 'color' { $idle-item-color: rgba(text-contrast($background), .7); } } @if not($shadow) { - $elevation: map-get($bottom-nav-schema, 'elevation'); + $elevation: map.get($bottom-nav-schema, 'elevation'); $shadow: igx-elevation($igx-elevations, $elevation); } @@ -77,7 +83,7 @@ /// @requires extend /// @requires rem /// @requires $ease-in-out-quad -/// @requires --var +/// @requires var-get @mixin igx-bottom-nav($theme) { @include igx-css-vars($theme); @@ -106,7 +112,7 @@ left: 0; right: 0; height: $menu-height; - background: --var($theme, 'background'); + background: var-get($theme, 'background'); overflow: hidden; z-index: 8; } @@ -114,13 +120,13 @@ %igx-bottom-nav-menu--top { top: 0; bottom: inherit; - box-shadow: --var($theme, 'shadow'); + box-shadow: var-get($theme, 'shadow'); } %igx-bottom-nav-menu--bottom { top: inherit; bottom: 0; - box-shadow: --var($theme, 'shadow'); + box-shadow: var-get($theme, 'shadow'); } %igx-bottom-nav-menu-item { @@ -133,7 +139,7 @@ min-width: $item-min-width; max-width: $item-max-width; height: 100%; - color: --var($theme, 'idle-item-color'); + color: var-get($theme, 'idle-item-color'); cursor: pointer; user-select: none; overflow: hidden; @@ -149,7 +155,7 @@ } %igx-bottom-nav-menu-item--selected { - color: --var($theme, 'active-item-color'); + color: var-get($theme, 'active-item-color'); transition: color .15s $ease-in-out-quad, opacity .25s $ease-in-out-quad; } @@ -191,7 +197,7 @@ /// @param {Map} $categories [(label: 'caption')] - The categories from the typographic scale used for type styles. /// @requires {mixin} igx-type-style @mixin igx-bottom-nav-typography($type-scale, $categories: (label: 'caption')) { - $label: map-get($categories, 'label'); + $label: map.get($categories, 'label'); %igx-tab-label { @include igx-type-style($type-scale, $label) { diff --git a/projects/igniteui-angular/src/lib/core/styles/components/button-group/_button-group-component.scss b/projects/igniteui-angular/src/lib/core/styles/components/button-group/_button-group-component.scss index a30ec1f18c8..de312ccb2f4 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/button-group/_button-group-component.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/button-group/_button-group-component.scss @@ -1,3 +1,6 @@ +@use '../../base' as *; +@use 'sass:string'; + //// Button Group /// @group components /// @author Simeon Simeonoff @@ -5,33 +8,41 @@ /// @requires {mixin} bem-elem /// @requires {mixin} bem-mod //// -@include b(igx-button-group) { - $this: bem--selector-to-string(&); - @include register-component(str-slice($this, 2, -1)); - @extend %igx-group-display !optional; +@mixin component { + @include b(igx-button-group) { + $this: bem--selector-to-string(&); + @include register-component( + $name: string.slice($this, 2, -1), + $deps: ( + igx-button, + ) + ); - @include e(item) { - @extend %igx-group-item !optional; - } + @extend %igx-group-display !optional; - @include e(item, $m: selected) { - @extend %igx-group-item-selected !optional; - } + @include e(item) { + @extend %igx-group-item !optional; + } - @include e(item-content) { - @extend %igx-group-item-content !optional; - } + @include e(item, $m: selected) { + @extend %igx-group-item-selected !optional; + } - @include e(button-text) { - @extend %igx-button-group__button-text !optional; - } + @include e(item-content) { + @extend %igx-group-item-content !optional; + } - @include m(vertical) { - @extend %igx-group-vertical !optional; + @include e(button-text) { + @extend %igx-button-group__button-text !optional; + } - @include e(item) { - @extend %igx-group-item-vertical !optional; + @include m(vertical) { + @extend %igx-group-vertical !optional; + + @include e(item) { + @extend %igx-group-item-vertical !optional; + } } } } diff --git a/projects/igniteui-angular/src/lib/core/styles/components/button-group/_button-group-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/button-group/_button-group-theme.scss index 923890f5957..799b7e97ace 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/button-group/_button-group-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/button-group/_button-group-theme.scss @@ -1,3 +1,8 @@ +@use '../../base' as *; +@use '../../themes/schemas' as *; +@use 'sass:map'; +@use 'sass:meta'; + //// /// @group themes /// @access public @@ -28,7 +33,8 @@ /// @param {Color} $item-selected-background [null] - The background color for a selected item in the button group. /// @param {Color} $item-selected-border-color [null] - The border color for a selected item from the button group. /// @param {Color} $item-selected-hover-background [null] - The background color for a selected item in hover or focus state in the button group. -/// @param {Color} $selected-shadow-color [null] - The color for a focused button item in hover or focus state in the button group. +/// @param {Color} $selected-shadow-color [null] - The outline color of focused/selected button group items. +/// @param {Color} $idle-shadow-color [null] - The outline color of focused button group items. /// /// @param {border-radius} $border-radius [null] - The border radius used for button-group component. /// @@ -62,6 +68,7 @@ $item-hover-text-color: null, $item-hover-background: null, + $idle-shadow-color: null, $disabled-text-color: null, $disabled-background-color: null, @@ -77,70 +84,62 @@ $button-group-schema: (); - @if map-has-key($schema, $name) { - $button-group-schema: map-get($schema, $name); + @if map.has-key($schema, $name) { + $button-group-schema: map.get($schema, $name); } @else { $button-group-schema: $schema; } $theme: apply-palette($button-group-schema, $palette); - $border: 1px solid map-get($theme, 'item-selected-border-color'); + $border: 1px solid map.get($theme, 'item-selected-border-color'); $border-radius: round-borders( - if($border-radius, $border-radius, map-get($button-group-schema, 'border-radius')), 0, 20px + if($border-radius, $border-radius, map.get($button-group-schema, 'border-radius')), 0, 20px ); - $shadow-color: null; - - @if map-get($theme, 'variant') == 'bootstrap' { - $shadow-color: rgba(map-get($theme, 'item-background'), .5); - - @if $item-background { - $shadow-color: rgba($item-background, .5); - } - - @if $item-background and not($item-border-color) { - $item-border-color: $item-background; - } - } - @if not($item-text-color) and $item-background { - @if type-of($item-background) == 'color' { + @if meta.type-of($item-background) == 'color' { $item-text-color: text-contrast($item-background); } } @if not($item-hover-text-color) and $item-hover-background { - @if type-of($item-hover-background) == 'color' { + @if meta.type-of($item-hover-background) == 'color' { $item-hover-text-color: text-contrast($item-hover-background); } } @if not($item-selected-background) and $item-background { - @if type-of($item-background) == 'color' { + @if meta.type-of($item-background) == 'color' { $item-selected-text-color: text-contrast($item-background); } } - @if not($item-selected-text-color) and $item-selected-background { - @if type-of($item-selected-background) == 'color' { - $item-selected-text-color: text-contrast($item-selected-background); + @if not($idle-shadow-color) and $selected-shadow-color { + @if meta.type-of($selected-shadow-color) == 'color' { + $idle-shadow-color: $selected-shadow-color; } } - @if not($disabled-text-color) and $disabled-background-color { - @if type-of($disabled-background-color) == 'color' { - $disabled-text-color: rgba(text-contrast($item-background), .3); + @if not($selected-shadow-color) and $idle-shadow-color { + @if meta.type-of($idle-shadow-color) == 'color' { + $selected-shadow-color: $idle-shadow-color; } } - @if map-get($button-group-schema, 'elevation') > 0 { + @if not($item-selected-text-color) and $item-selected-background { + @if meta.type-of($item-selected-background) == 'color' { + $item-selected-text-color: text-contrast($item-selected-background); + } + } + + @if map.get($button-group-schema, 'elevation') > 0 { $border: none; } @if not($shadow) { - $elevation: map-get($button-group-schema, 'elevation'); + $elevation: map.get($button-group-schema, 'elevation'); $shadow: igx-elevation($elevations, $elevation); } @@ -163,7 +162,7 @@ item-selected-hover-background: $item-selected-hover-background, border: $border, shadow: $shadow, - shadow-color: $shadow-color, + idle-shadow-color: $idle-shadow-color, selected-shadow-color: $selected-shadow-color, )); } @@ -172,27 +171,27 @@ /// @param {Map} $theme - The theme used to style the component. /// @requires {mixin} igx-css-vars /// @requires igx-color -/// @requires --var +/// @requires var-get @mixin igx-button-group($theme) { @include igx-css-vars($theme); $group-item-min-width: 24px; $group-item-border-thickness: 1px; $group-items-margin: rem(10px, 16px); $transition: all 140ms $ease-in-out-quad; - $palette: map-get($theme, 'palette'); + $palette: map.get($theme, 'palette'); $left: if-ltr(left, right); $right: if-ltr(right, left); - $variant: map-get($theme, 'variant'); + $variant: map.get($theme, 'variant'); $bootstrap-theme: $variant == 'bootstrap'; $indigo-theme: $variant == 'indigo-design'; %igx-group-display { display: flex; - box-shadow: --var($theme, 'shadow'); + box-shadow: var-get($theme, 'shadow'); transition: $transition; - border-radius: --var($theme, 'border-radius'); + border-radius: var-get($theme, 'border-radius'); button { // The margin here is required to fix a bug in Safari #7858 @@ -203,9 +202,9 @@ } %igx-group-item { - border: $group-item-border-thickness solid --var($theme, 'item-border-color'); - color: --var($theme, 'item-text-color'); - background: --var($theme, 'item-background'); + border: $group-item-border-thickness solid var-get($theme, 'item-border-color'); + color: var-get($theme, 'item-text-color'); + background: var-get($theme, 'item-background'); min-width: $group-item-min-width; display: flex; flex: 1 0 0%; @@ -227,31 +226,34 @@ } &:first-of-type { - border-top-#{$left}-radius: --var($theme, 'border-radius'); - border-bottom-#{$left}-radius: --var($theme, 'border-radius'); + border-top-#{$left}-radius: var-get($theme, 'border-radius'); + border-bottom-#{$left}-radius: var-get($theme, 'border-radius'); } &:last-of-type { - border-top-#{$right}-radius: --var($theme, 'border-radius'); - border-bottom-#{$right}-radius: --var($theme, 'border-radius'); + border-top-#{$right}-radius: var-get($theme, 'border-radius'); + border-bottom-#{$right}-radius: var-get($theme, 'border-radius'); } &[igxButton][disabled='true'] { - color: --var($theme, 'disabled-text-color'); - background: --var($theme, 'disabled-background-color'); - border-color: --var($theme, 'item-disabled-border'); + color: var-get($theme, 'disabled-text-color'); + background: var-get($theme, 'disabled-background-color'); + border-color: var-get($theme, 'item-disabled-border'); } &:hover, &:focus { - color: --var($theme, 'item-hover-text-color'); - background: --var($theme, 'item-hover-background'); - z-index: 2; + color: var-get($theme, 'item-hover-text-color'); + background: var-get($theme, 'item-hover-background'); } &:focus { @if $bootstrap-theme or $indigo-theme { - box-shadow: 0 0 0 rem(3px) --var($theme, 'shadow-color'); + box-shadow: 0 0 0 rem(3px) var-get($theme, 'idle-shadow-color'); + } + + @if $indigo-theme { + z-index: 2; } } } @@ -263,8 +265,8 @@ } &:first-of-type { - border-top-#{$left}-radius: --var($theme, 'border-radius'); - border-top-#{$right}-radius: --var($theme, 'border-radius'); + border-top-#{$left}-radius: var-get($theme, 'border-radius'); + border-top-#{$right}-radius: var-get($theme, 'border-radius'); border-bottom-#{$left}-radius: 0; border-bottom-#{$right}-radius: 0; } @@ -272,27 +274,31 @@ &:last-of-type { border-top-#{$left}-radius: 0; border-top-#{$right}-radius: 0; - border-bottom-#{$left}-radius: --var($theme, 'border-radius'); - border-bottom-#{$right}-radius: --var($theme, 'border-radius'); + border-bottom-#{$left}-radius: var-get($theme, 'border-radius'); + border-bottom-#{$right}-radius: var-get($theme, 'border-radius'); } } %igx-group-item-selected { - color: --var($theme, 'item-selected-text-color'); - background: --var($theme, 'item-selected-background'); - border-color: --var($theme, 'item-selected-border-color'); + color: var-get($theme, 'item-selected-text-color'); + background: var-get($theme, 'item-selected-background'); + border-color: var-get($theme, 'item-selected-border-color'); position: relative; z-index: 1; &:hover, &:focus { - color: --var($theme, 'item-selected-text-color'); - background: --var($theme, 'item-selected-hover-background'); + color: var-get($theme, 'item-selected-text-color'); + background: var-get($theme, 'item-selected-hover-background'); + } + + &:focus { + z-index: 3; } @if $indigo-theme { &:focus { - box-shadow: 0 0 0 rem(3px) --var($theme, 'selected-shadow-color'); + box-shadow: 0 0 0 rem(3px) var-get($theme, 'selected-shadow-color'); } } @@ -306,7 +312,7 @@ #{$right}: 0; bottom: 0; #{$left}: 0; - background: rgba(igx-color($palette, 'grays', 500), .06); + background: igx-color($palette, 'grays', 500, .12); } } } diff --git a/projects/igniteui-angular/src/lib/core/styles/components/button/_button-component.scss b/projects/igniteui-angular/src/lib/core/styles/components/button/_button-component.scss index 4f7386064e3..3efee21f7c6 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/button/_button-component.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/button/_button-component.scss @@ -1,3 +1,6 @@ +@use '../../base' as *; +@use 'sass:string'; + //// /// @group components /// @author Simeon Simeonoff @@ -5,65 +8,71 @@ /// @requires {mixin} bem-elem /// @requires {mixin} bem-mod //// -@include b(igx-button) { - $this: bem--selector-to-string(&); - @include register-component(str-slice($this, 2, -1)); - @extend %igx-button-display !optional; +@mixin component { + @include b(igx-button) { + $this: bem--selector-to-string(&); + @include register-component( + $name: string.slice($this, 2, -1), + $deps: () + ); - @include m(cosy) { - @extend %igx-button-display--cosy !optional; - } + @extend %igx-button-display !optional; - @include m(compact) { - @extend %igx-button-display--compact !optional; - } + @include m(cosy) { + @extend %igx-button-display--cosy !optional; + } - // FLAT BUTTON - @include m(flat) { - @extend %igx-button--flat !optional; - } + @include m(compact) { + @extend %igx-button-display--compact !optional; + } - // RAISED BUTTON - @include m(raised) { - @extend %igx-button--raised !optional; - } + // FLAT BUTTON + @include m(flat) { + @extend %igx-button--flat !optional; + } - // OUTLINED BUTTON - @include m(outlined) { - @extend %igx-button--outlined !optional; - } + // RAISED BUTTON + @include m(raised) { + @extend %igx-button--raised !optional; + } - @include mx(cosy, outlined) { - @extend %igx-button--outlined-cosy !optional; - } + // OUTLINED BUTTON + @include m(outlined) { + @extend %igx-button--outlined !optional; + } - @include mx(compact, outlined) { - @extend %igx-button--outlined-compact !optional; - } + @include mx(cosy, outlined) { + @extend %igx-button--outlined-cosy !optional; + } - // FAB BUTTON - @include m(fab) { - @extend %igx-button--round !optional; - @extend %igx-button--fab !optional; - } + @include mx(compact, outlined) { + @extend %igx-button--outlined-compact !optional; + } - @include mx(cosy, fab) { - @extend %igx-button--fab-cosy !optional; - } + // FAB BUTTON + @include m(fab) { + @extend %igx-button--round !optional; + @extend %igx-button--fab !optional; + } - @include mx(compact, fab) { - @extend %igx-button--fab-compact !optional; - } + @include mx(cosy, fab) { + @extend %igx-button--fab-cosy !optional; + } - // ICON BUTTON - @include m(icon) { - @extend %igx-button--round !optional; - @extend %igx-button--icon !optional; - } + @include mx(compact, fab) { + @extend %igx-button--fab-compact !optional; + } + + // ICON BUTTON + @include m(icon) { + @extend %igx-button--round !optional; + @extend %igx-button--icon !optional; + } - // DISABLED BUTTON - @include m(disabled) { - @extend %igx-button--disabled !optional; + // DISABLED BUTTON + @include m(disabled) { + @extend %igx-button--disabled !optional; + } } } diff --git a/projects/igniteui-angular/src/lib/core/styles/components/button/_button-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/button/_button-theme.scss index 1775496a8ed..a75b2f7422a 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/button/_button-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/button/_button-theme.scss @@ -1,3 +1,8 @@ +@use '../../base' as *; +@use '../../themes/schemas' as *; +@use '../../typography/base' as *; +@use 'sass:map'; + //// /// @group themes /// @access public @@ -72,8 +77,8 @@ $name: 'igx-button'; $button-schema: (); - @if map-has-key($schema, $name) { - $button-schema: map-get($schema, $name); + @if map.has-key($schema, $name) { + $button-schema: map.get($schema, $name); } @else { $button-schema: $schema; } @@ -94,9 +99,9 @@ if( $border-radius, $border-radius, - map-get($_schema, 'border-radius') + map.get($_schema, 'border-radius') ), - map-get($_minmax-radius, $_name)... + map.get($_minmax-radius, $_name)... ); $_resting-shadow: $resting-shadow; @@ -104,7 +109,7 @@ $_focus-shadow: $focus-shadow; @if not($variant) { - $variant: map-get($_schema, 'variant'); + $variant: map.get($_schema, 'variant'); } @if not($foreground) and $background { @@ -128,21 +133,21 @@ } @if not($_resting-shadow) { - $resting-elevation: map-get($_schema, 'resting-elevation'); + $resting-elevation: map.get($_schema, 'resting-elevation'); $_resting-shadow: igx-elevation($elevations, $resting-elevation); } @if not($_hover-shadow) { - $hover-elevation: map-get($_schema, 'hover-elevation'); + $hover-elevation: map.get($_schema, 'hover-elevation'); $_hover-shadow: igx-elevation($elevations, $hover-elevation); } @if not($_focus-shadow) { - $focus-elevation: map-get($_schema, 'focus-elevation'); + $focus-elevation: map.get($_schema, 'focus-elevation'); $_focus-shadow: igx-elevation($elevations, $focus-elevation); } - $themes: map-merge($themes, ( + $themes: map.merge($themes, ( $_name: extend(apply-palette($_schema, $palette), ( name: $name, background: $background, @@ -181,20 +186,20 @@ /// @param {Map} $theme - The theme used to style the component. /// @requires {mixin} igx-css-vars /// @requires rem -/// @requires --var +/// @requires var-get @mixin igx-button($theme) { $left: if-ltr(left, right); $right: if-ltr(right, left); $button-border: 1px solid transparent; $button-width: rem(88px); - $variant: map-get($theme, variant); + $variant: map.get($theme, variant); - $flat-theme: map-get(map-get($theme, 'themes'), 'flat'); - $outlined-theme: map-get(map-get($theme, 'themes'), 'outlined'); - $raised-theme: map-get(map-get($theme, 'themes'), 'raised'); - $fab-theme: map-get(map-get($theme, 'themes'), 'fab'); - $icon-theme: map-get(map-get($theme, 'themes'), 'icon'); + $flat-theme: map.get(map.get($theme, 'themes'), 'flat'); + $outlined-theme: map.get(map.get($theme, 'themes'), 'outlined'); + $raised-theme: map.get(map.get($theme, 'themes'), 'raised'); + $fab-theme: map.get(map.get($theme, 'themes'), 'fab'); + $icon-theme: map.get(map.get($theme, 'themes'), 'icon'); @include igx-css-vars($flat-theme); @include igx-css-vars($outlined-theme); @@ -202,7 +207,7 @@ @include igx-css-vars($fab-theme); @include igx-css-vars($icon-theme); - $time: map-get(( + $time: map.get(( material: .1s, fluent: .1s, bootstrap: .15s, @@ -254,14 +259,14 @@ compact: rem(2px, 16px) rem(6px, 16px) ); - $button-padding: map-get(( + $button-padding: map.get(( material: $button-padding-material, fluent: $button-padding-fluent, bootstrap: $button-padding-bootstrap, indigo-design: $button-padding-bootstrap, ), $variant); - $outlined-button-padding: map-get(( + $outlined-button-padding: map.get(( material: $outlined-button-padding-material, fluent: $button-padding-fluent, bootstrap: $button-padding-bootstrap, @@ -292,7 +297,7 @@ compact: rem(24px) ); - $button-size: map-get(( + $button-size: map.get(( material: $button--size-material, fluent: $button--size-fluent, bootstrap: $button--size-bootstrap, @@ -319,53 +324,53 @@ $icon-in-button-size: rem(18px); - $raised-shadow: map-get(( - material: --var($raised-theme, 'resting-shadow'), - fluent: --var($raised-theme, 'resting-shadow'), + $raised-shadow: map.get(( + material: var-get($raised-theme, 'resting-shadow'), + fluent: var-get($raised-theme, 'resting-shadow'), bootstrap: none, indigo-design: none ), $variant); - $raised-shadow--hover: map-get(( - material: --var($raised-theme, 'hover-shadow'), - fluent: --var($raised-theme, 'hover-shadow'), + $raised-shadow--hover: map.get(( + material: var-get($raised-theme, 'hover-shadow'), + fluent: var-get($raised-theme, 'hover-shadow'), bootstrap: none, indigo-design: none ), $variant); - $raised-shadow--focus: map-get(( - material: --var($raised-theme, 'focus-shadow'), - fluent: 0 0 0 rem(3px) --var($raised-theme, 'shadow-color'), - bootstrap: 0 0 0 rem(3px) --var($raised-theme, 'shadow-color'), - indigo-design: 0 0 0 rem(3px) --var($raised-theme, 'shadow-color') + $raised-shadow--focus: map.get(( + material: var-get($raised-theme, 'focus-shadow'), + fluent: 0 0 0 rem(3px) var-get($raised-theme, 'shadow-color'), + bootstrap: 0 0 0 rem(3px) var-get($raised-theme, 'shadow-color'), + indigo-design: 0 0 0 rem(3px) var-get($raised-theme, 'shadow-color') ), $variant); - $fab-shadow: map-get(( - material: --var($fab-theme, 'resting-shadow'), - fluent: --var($fab-theme, 'resting-shadow'), + $fab-shadow: map.get(( + material: var-get($fab-theme, 'resting-shadow'), + fluent: var-get($fab-theme, 'resting-shadow'), bootstrap: none, indigo-design: none ), $variant); - $fab-shadow--hover: map-get(( - material: --var($fab-theme, 'hover-shadow'), - fluent: --var($fab-theme, 'hover-shadow'), + $fab-shadow--hover: map.get(( + material: var-get($fab-theme, 'hover-shadow'), + fluent: var-get($fab-theme, 'hover-shadow'), bootstrap: none, indigo-design: none ), $variant); - $fab-shadow--focus: map-get(( - material: --var($fab-theme, 'focus-shadow'), - fluent: 0 0 0 rem(3px) --var($fab-theme, 'shadow-color'), - bootstrap: 0 0 0 rem(3px) --var($fab-theme, 'shadow-color'), - indigo-design: 0 0 0 rem(3px) --var($fab-theme, 'shadow-color') + $fab-shadow--focus: map.get(( + material: var-get($fab-theme, 'focus-shadow'), + fluent: 0 0 0 rem(3px) var-get($fab-theme, 'shadow-color'), + bootstrap: 0 0 0 rem(3px) var-get($fab-theme, 'shadow-color'), + indigo-design: 0 0 0 rem(3px) var-get($fab-theme, 'shadow-color') ), $variant); - $icon-shadow: map-get(( - material: --var($icon-theme, 'focus-shadow'), - fluent: 0 0 0 rem(3px) --var($icon-theme, 'shadow-color'), - bootstrap: 0 0 0 rem(3px) --var($icon-theme, 'shadow-color'), - indigo-design: 0 0 0 rem(3px) --var($icon-theme, 'shadow-color') + $icon-shadow: map.get(( + material: var-get($icon-theme, 'focus-shadow'), + fluent: 0 0 0 rem(3px) var-get($icon-theme, 'shadow-color'), + bootstrap: 0 0 0 rem(3px) var-get($icon-theme, 'shadow-color'), + indigo-design: 0 0 0 rem(3px) var-get($icon-theme, 'shadow-color') ), $variant); %igx-button-display { @@ -374,8 +379,8 @@ align-items: center; justify-content: center; min-width: $button-width; - padding: map-get($button-padding, 'comfortable'); - min-height: map-get($button-size, 'comfortable'); + padding: map.get($button-padding, 'comfortable'); + min-height: map.get($button-size, 'comfortable'); border: none; cursor: pointer; user-select: none; @@ -393,115 +398,115 @@ color: inherit; } - @include _icon-w-margin( - map-get($icon-in-button-margin, 'comfortable'), + @include icon-w-margin( + map.get($icon-in-button-margin, 'comfortable'), $left ); } %igx-button-display--cosy { - padding: map-get($button-padding, 'cosy'); - min-height: map-get($button-size, 'cosy'); - @include _icon-w-margin( - map-get($icon-in-button-margin, 'cosy'), + padding: map.get($button-padding, 'cosy'); + min-height: map.get($button-size, 'cosy'); + @include icon-w-margin( + map.get($icon-in-button-margin, 'cosy'), $left ); } %igx-button-display--compact { - padding: map-get($button-padding, 'compact'); - min-height: map-get($button-size, 'compact'); - @include _icon-w-margin( - map-get($icon-in-button-margin, 'compact'), + padding: map.get($button-padding, 'compact'); + min-height: map.get($button-size, 'compact'); + @include icon-w-margin( + map.get($icon-in-button-margin, 'compact'), $left ); } %igx-button--flat { - background: --var($flat-theme, 'background'); - color: --var($flat-theme, 'foreground'); - border-radius: --var($flat-theme, 'border-radius'); + background: var-get($flat-theme, 'background'); + color: var-get($flat-theme, 'foreground'); + border-radius: var-get($flat-theme, 'border-radius'); &:hover { - background: --var($flat-theme, 'hover-background'); - color: --var($flat-theme, 'hover-foreground'); + background: var-get($flat-theme, 'hover-background'); + color: var-get($flat-theme, 'hover-foreground'); } &:focus, &:active { - background: --var($flat-theme, 'focus-background'); - color: --var($flat-theme, 'focus-foreground'); - box-shadow: 0 0 0 rem(3px) --var($flat-theme, 'shadow-color'); + background: var-get($flat-theme, 'focus-background'); + color: var-get($flat-theme, 'focus-foreground'); + box-shadow: 0 0 0 rem(3px) var-get($flat-theme, 'shadow-color'); } } %igx-button--outlined { - background: --var($outlined-theme, 'background'); - color: --var($outlined-theme, 'foreground'); - border-radius: --var($outlined-theme, 'border-radius'); - padding: map-get($outlined-button-padding, 'comfortable'); + background: var-get($outlined-theme, 'background'); + color: var-get($outlined-theme, 'foreground'); + border-radius: var-get($outlined-theme, 'border-radius'); + padding: map.get($outlined-button-padding, 'comfortable'); @if $variant != 'indigo-design' { border: $button-border; - border-color: --var($outlined-theme, 'border-color'); + border-color: var-get($outlined-theme, 'border-color'); } @else { border: { width: 2px; style: solid; - color: --var($outlined-theme, 'border-color'); + color: var-get($outlined-theme, 'border-color'); } } &:hover { - background: --var($outlined-theme, 'hover-background'); - color: --var($outlined-theme, 'hover-foreground'); + background: var-get($outlined-theme, 'hover-background'); + color: var-get($outlined-theme, 'hover-foreground'); } &:focus, &:active { - background: --var($outlined-theme, 'focus-background'); - color: --var($outlined-theme, 'focus-foreground'); - box-shadow: 0 0 0 rem(3px) --var($outlined-theme, 'shadow-color'); + background: var-get($outlined-theme, 'focus-background'); + color: var-get($outlined-theme, 'focus-foreground'); + box-shadow: 0 0 0 rem(3px) var-get($outlined-theme, 'shadow-color'); } } %igx-button--outlined-cosy { - padding: map-get($outlined-button-padding, 'cosy'); - min-height: map-get($button-size, 'cosy'); - @include _icon-w-margin( - map-get($icon-in-button-margin, 'cosy'), + padding: map.get($outlined-button-padding, 'cosy'); + min-height: map.get($button-size, 'cosy'); + @include icon-w-margin( + map.get($icon-in-button-margin, 'cosy'), $left ); } %igx-button--outlined-compact { - padding: map-get($outlined-button-padding, 'compact'); - min-height: map-get($button-size, 'compact'); - @include _icon-w-margin( - map-get($icon-in-button-margin, 'compact'), + padding: map.get($outlined-button-padding, 'compact'); + min-height: map.get($button-size, 'compact'); + @include icon-w-margin( + map.get($icon-in-button-margin, 'compact'), $left ); } %igx-button--raised { - color: --var($raised-theme, 'foreground'); - background: --var($raised-theme, 'background'); + color: var-get($raised-theme, 'foreground'); + background: var-get($raised-theme, 'background'); box-shadow: $raised-shadow; - border-radius: --var($raised-theme, 'border-radius'); + border-radius: var-get($raised-theme, 'border-radius'); &:hover { - color: --var($raised-theme, 'hover-foreground'); - background: --var($raised-theme, 'hover-background'); + color: var-get($raised-theme, 'hover-foreground'); + background: var-get($raised-theme, 'hover-background'); box-shadow: $raised-shadow--hover; } &:focus, &:active { - color: --var($raised-theme, 'focus-foreground'); - background: --var($raised-theme, 'focus-background'); + color: var-get($raised-theme, 'focus-foreground'); + background: var-get($raised-theme, 'focus-background'); @if $variant == 'material' or $variant == 'fluent' { - box-shadow: 0 0 0 rem(3px) --var($raised-theme, 'shadow-color'), $raised-shadow--focus; + box-shadow: 0 0 0 rem(3px) var-get($raised-theme, 'shadow-color'), $raised-shadow--focus; } @else { box-shadow: $raised-shadow--focus; } @@ -526,58 +531,58 @@ } %igx-button--fab { - padding: map-get($button-floating-padding, 'comfortable'); - min-width: map-get($button-floating-size, 'comfortable'); - min-height: map-get($button-floating-size, 'comfortable'); + padding: map.get($button-floating-padding, 'comfortable'); + min-width: map.get($button-floating-size, 'comfortable'); + min-height: map.get($button-floating-size, 'comfortable'); line-height: unset; white-space: nowrap; - color: --var($fab-theme, 'foreground'); - background: --var($fab-theme, 'background'); + color: var-get($fab-theme, 'foreground'); + background: var-get($fab-theme, 'background'); box-shadow: $fab-shadow; - border-radius: --var($fab-theme, 'border-radius'); + border-radius: var-get($fab-theme, 'border-radius'); &:hover { - color: --var($fab-theme, 'hover-foreground'); - background: --var($fab-theme, 'hover-background'); + color: var-get($fab-theme, 'hover-foreground'); + background: var-get($fab-theme, 'hover-background'); box-shadow: $fab-shadow; } &:focus, &:active { - color: --var($fab-theme, 'focus-foreground'); - background: --var($fab-theme, 'focus-background'); + color: var-get($fab-theme, 'focus-foreground'); + background: var-get($fab-theme, 'focus-background'); @if $variant == 'material' or $variant == 'fluent' { - box-shadow: 0 0 0 rem(3px) --var($fab-theme, 'shadow-color'), $fab-shadow--focus; + box-shadow: 0 0 0 rem(3px) var-get($fab-theme, 'shadow-color'), $fab-shadow--focus; } @else { box-shadow: $raised-shadow--focus; } } - @include _icon-w-margin( - map-get($icon-in-button-margin, 'comfortable'), + @include icon-w-margin( + map.get($icon-in-button-margin, 'comfortable'), $left ); } %igx-button--fab-cosy { - padding: map-get($button-floating-padding, 'cosy'); - min-width: map-get($button-floating-size, 'cosy'); - min-height: map-get($button-floating-size, 'cosy'); + padding: map.get($button-floating-padding, 'cosy'); + min-width: map.get($button-floating-size, 'cosy'); + min-height: map.get($button-floating-size, 'cosy'); - @include _icon-w-margin( - map-get($icon-in-button-margin, 'cosy'), + @include icon-w-margin( + map.get($icon-in-button-margin, 'cosy'), $left ); } %igx-button--fab-compact { - padding: map-get($button-floating-padding, 'compact'); - min-width: map-get($button-floating-size, 'compact'); - min-height: map-get($button-floating-size, 'compact'); + padding: map.get($button-floating-padding, 'compact'); + min-width: map.get($button-floating-size, 'compact'); + min-height: map.get($button-floating-size, 'compact'); - @include _icon-w-margin( - map-get($icon-in-button-margin, 'compact'), + @include icon-w-margin( + map.get($icon-in-button-margin, 'compact'), $left ); } @@ -589,23 +594,23 @@ min-height: unset; font-size: $button-icon-font-size; padding: $button-icon-padding; - color: --var($icon-theme, 'foreground'); - background: --var($icon-theme, 'background'); - border-radius: --var($icon-theme, 'border-radius'); + color: var-get($icon-theme, 'foreground'); + background: var-get($icon-theme, 'background'); + border-radius: var-get($icon-theme, 'border-radius'); &:hover { transition: $button-transition; - color: --var($icon-theme, 'hover-foreground'); - background: --var($icon-theme, 'hover-background'); + color: var-get($icon-theme, 'hover-foreground'); + background: var-get($icon-theme, 'hover-background'); } &:focus, &:active { - color: --var($icon-theme, 'focus-foreground'); - background: --var($icon-theme, 'focus-background'); + color: var-get($icon-theme, 'focus-foreground'); + background: var-get($icon-theme, 'focus-background'); @if $variant == 'material' or $variant == 'fluent' { - box-shadow: 0 0 0 rem(3px) --var($icon-theme, 'shadow-color'), $icon-shadow; + box-shadow: 0 0 0 rem(3px) var-get($icon-theme, 'shadow-color'), $icon-shadow; } @else { box-shadow: $icon-shadow; } @@ -615,16 +620,16 @@ %igx-button--disabled { pointer-events: none; box-shadow: none; - color: --var($flat-theme, 'disabled-foreground'); + color: var-get($flat-theme, 'disabled-foreground'); background: transparent; &%igx-button--raised, &%igx-button--fab { - background: --var($flat-theme, 'disabled-background'); + background: var-get($flat-theme, 'disabled-background'); } &%igx-button--outlined { - border-color: --var($flat-theme, 'disabled-border-color'); + border-color: var-get($flat-theme, 'disabled-border-color'); } &:focus { @@ -640,7 +645,7 @@ /// @param {String} $categories [(text: 'button')] - The category from the typographic scale used for type styles. /// @requires {mixin} igx-type-style @mixin igx-button-typography($type-scale, $categories: (text: 'button')) { - $text: map-get($categories, 'text'); + $text: map.get($categories, 'text'); %igx-button-display { @include igx-type-style($type-scale, $text) { diff --git a/projects/igniteui-angular/src/lib/core/styles/components/calendar/_calendar-component.scss b/projects/igniteui-angular/src/lib/core/styles/components/calendar/_calendar-component.scss index 930e7c3216a..6ea4b2e08d3 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/calendar/_calendar-component.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/calendar/_calendar-component.scss @@ -1,3 +1,6 @@ +@use '../../base' as *; +@use 'sass:string'; + //// /// @group components /// @author Simeon Simeonoff @@ -5,220 +8,228 @@ /// @requires {mixin} bem-elem /// @requires {mixin} bem-mod //// -@include b(igx-calendar) { - $this: bem--selector-to-string(&); - @include register-component(str-slice($this, 2, -1)); - @extend %cal-display !optional; +@mixin component { + @include b(igx-calendar) { + $this: bem--selector-to-string(&); + @include register-component( + $name: string.slice($this, 2, -1), + $deps: ( + igx-icon, + ) + ); - @include e(header) { - @extend %cal-header-display !optional; - } + @extend %cal-display !optional; - @include e(aria-off-screen) { - @extend %calendar__aria-off-screen !optional; - } + @include e(header) { + @extend %cal-header-display !optional; + } - @include e(header-year) { - @extend %cal-header-year !optional; - } + @include e(aria-off-screen) { + @extend %calendar__aria-off-screen !optional; + } - @include e(header-date) { - @extend %cal-header-date !optional; - } + @include e(header-year) { + @extend %cal-header-year !optional; + } - @include e(body) { - @extend %cal-body-display !optional; - } + @include e(header-date) { + @extend %cal-header-date !optional; + } - @include e(body-row) { - @extend %cal-row-display !optional; - } + @include e(body) { + @extend %cal-body-display !optional; + } - @include e(body-row, 'wrap') { - @extend %cal-row-display--wrap !optional; - } + @include e(body-row) { + @extend %cal-row-display !optional; + } - @include e(body-column) { - @extend %cal-column-year !optional; - } + @include e(body-row, 'wrap') { + @extend %cal-row-display--wrap !optional; + } - @include e(label) { - @extend %cal-value !optional; - @extend %cal-value--label !optional; - } + @include e(body-column) { + @extend %cal-column-year !optional; + } - @include e(label, 'week-number') { - @extend %label--week-number !optional; - } + @include e(label) { + @extend %cal-value !optional; + @extend %cal-value--label !optional; + } + + @include e(label, 'week-number') { + @extend %label--week-number !optional; + } - @include e(date) { - @extend %cal-value !optional; + @include e(date) { + @extend %cal-value !optional; - &:hover, - &:focus { - @extend %cal-value--hover !optional; + &:hover, + &:focus { + @extend %cal-value--hover !optional; + } } - } - @include e(date, 'week-number') { - @extend %cal-value-date--week-number !optional; - } + @include e(date, 'week-number') { + @extend %cal-value-date--week-number !optional; + } - @include e(date, 'inactive') { - @extend %cal-value--inactive !optional; - } + @include e(date, 'inactive') { + @extend %cal-value--inactive !optional; + } - @include e(date, $mods: ('inactive', 'single')) { - &:hover { - @extend %cal-value--inactive--single--hover !optional; + @include e(date, $mods: ('inactive', 'single')) { + &:hover { + @extend %cal-value--inactive--single--hover !optional; + } } - } - @include e(date, 'selected') { - @extend %cal-value--selected !optional; + @include e(date, 'selected') { + @extend %cal-value--selected !optional; - &:hover, - &:focus { - @extend %cal-value--selected--hover !optional; + &:hover, + &:focus { + @extend %cal-value--selected--hover !optional; + } } - } - @include e(date, 'current') { - @extend %cal-value--current !optional; - } + @include e(date, 'current') { + @extend %cal-value--current !optional; + } - @include e(date, 'hidden') { - @extend %cal-value--hidden !optional; - } + @include e(date, 'hidden') { + @extend %cal-value--hidden !optional; + } - @include e(date, 'range') { - @extend %cal-value--range !optional; - } + @include e(date, 'range') { + @extend %cal-value--range !optional; + } - @include e(date, $mods: ('selected', 'current')) { - @extend %cal-value--current--selected !optional; - } + @include e(date, $mods: ('selected', 'current')) { + @extend %cal-value--current--selected !optional; + } - @include e(date, 'weekend') { - @extend %cal-value--weekend !optional; + @include e(date, 'weekend') { + @extend %cal-value--weekend !optional; - &:hover, - &:focus { - @extend %cal-value--hover !optional; + &:hover, + &:focus { + @extend %cal-value--hover !optional; + } } - } - @include e(date, 'special') { - @extend %cal-value--special !optional; - } + @include e(date, 'special') { + @extend %cal-value--special !optional; + } - @include e(date, 'disabled') { - @extend %cal-value--disabled !optional; - } + @include e(date, 'disabled') { + @extend %cal-value--disabled !optional; + } - @include e(date, 'single') { - @extend %cal-value--single !optional; - } + @include e(date, 'single') { + @extend %cal-value--single !optional; + } - @include e(date, $mods: ('selected', 'first')) { - @extend %cal-value--first !optional; - } + @include e(date, $mods: ('selected', 'first')) { + @extend %cal-value--first !optional; + } - @include e(date, $mods: ('selected', 'last')) { - @extend %cal-value--last !optional; - } + @include e(date, $mods: ('selected', 'last')) { + @extend %cal-value--last !optional; + } - @include e(date, $mods: ('selected', 'first', 'last')) { - @extend %cal-value--single !optional; - } + @include e(date, $mods: ('selected', 'first', 'last')) { + @extend %cal-value--single !optional; + } - @include e(date, $mods: ('disabled', 'inactive')) { - @extend %cal-value--disabled !optional; - } + @include e(date, $mods: ('disabled', 'inactive')) { + @extend %cal-value--disabled !optional; + } - @include e(date, $mods: ('disabled', 'range')) { - @extend %cal-value--disabled-range !optional; - } + @include e(date, $mods: ('disabled', 'range')) { + @extend %cal-value--disabled-range !optional; + } - // This is added due to a bug in JavaScript - // where the selected dates collection also includes - // disabled dates. - @include e(date, $mods: ('selected', 'disabled', 'range')) { - @extend %cal-value--disabled-range !optional; - } + // This is added due to a bug in JavaScript + // where the selected dates collection also includes + // disabled dates. + @include e(date, $mods: ('selected', 'disabled', 'range')) { + @extend %cal-value--disabled-range !optional; + } - @include e(date-content) { - @extend %cal-value-content !optional; - } + @include e(date-content) { + @extend %cal-value-content !optional; + } - @include e(date-content, 'week-number') { - @extend %cal-value-content--week-number !optional; - } + @include e(date-content, 'week-number') { + @extend %cal-value-content--week-number !optional; + } - @include e(year) { - @extend %cal-value !optional; - @extend %cal-value--year !optional; + @include e(year) { + @extend %cal-value !optional; + @extend %cal-value--year !optional; - &:hover, - &:focus { - @extend %cal-value--year-hover !optional; + &:hover, + &:focus { + @extend %cal-value--year-hover !optional; + } } - } - @include e(year, 'current') { - @extend %cal-value--year !optional; - @extend %cal-value--year-current !optional; - } + @include e(year, 'current') { + @extend %cal-value--year !optional; + @extend %cal-value--year-current !optional; + } - @include e(month) { - @extend %cal-value--month !optional; + @include e(month) { + @extend %cal-value--month !optional; - &:hover, - &:focus { - @extend %cal-value--month-hover !optional; + &:hover, + &:focus { + @extend %cal-value--month-hover !optional; + } } - } - @include e(month, 'current') { - @extend %cal-value--month-current !optional; + @include e(month, 'current') { + @extend %cal-value--month-current !optional; - &:hover, - &:focus { - @extend %cal-value--month-hover !optional; - @extend %cal-value--month-current-hover !optional; + &:hover, + &:focus { + @extend %cal-value--month-hover !optional; + @extend %cal-value--month-current-hover !optional; + } } - } - @include m(vertical) { - @extend %cal-display !optional; - @extend %cal-display--vertical !optional; + @include m(vertical) { + @extend %cal-display !optional; + @extend %cal-display--vertical !optional; - @include e(header-date) { - @extend %cal-header-date !optional; - @extend %cal-header-date--vertical !optional; + @include e(header-date) { + @extend %cal-header-date !optional; + @extend %cal-header-date--vertical !optional; + } } } -} -@include b(igx-calendar-picker) { - @extend %cal-picker-display !optional; + @include b(igx-calendar-picker) { + @extend %cal-picker-display !optional; - @include e(dates) { - @extend %cal-picker-dates !optional; - } + @include e(dates) { + @extend %cal-picker-dates !optional; + } - @include e(date) { - @extend %cal-picker-date !optional; - } + @include e(date) { + @extend %cal-picker-date !optional; + } - @include e(prev) { - @extend %cal-picker-arrow !optional; - @extend %cal-picker-arrow__prev !optional; - } + @include e(prev) { + @extend %cal-picker-arrow !optional; + @extend %cal-picker-arrow__prev !optional; + } - @include e(next) { - @extend %cal-picker-arrow !optional; - @extend %cal-picker-arrow__next !optional; + @include e(next) { + @extend %cal-picker-arrow !optional; + @extend %cal-picker-arrow__next !optional; + } } } diff --git a/projects/igniteui-angular/src/lib/core/styles/components/calendar/_calendar-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/calendar/_calendar-theme.scss index c2c01c32260..faadc73f1fa 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/calendar/_calendar-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/calendar/_calendar-theme.scss @@ -1,3 +1,8 @@ +@use '../../base' as *; +@use '../../themes/schemas' as *; +@use '../../typography/base' as *; +@use 'sass:map'; +@use 'sass:meta'; @use 'sass:math'; //// @@ -133,49 +138,49 @@ $selector: 'igx-calendar, igx-days-view, igx-months-view, igx-years-view'; $calendar-schema: (); - @if map-has-key($schema, $name) { - $calendar-schema: map-get($schema, $name); + @if map.has-key($schema, $name) { + $calendar-schema: map.get($schema, $name); } @else { $calendar-schema: $schema; } $theme: apply-palette($calendar-schema, $palette); - $variant: map-get($theme, variant); + $variant: map.get($theme, variant); $not-bootstrap-theme: $variant != 'bootstrap'; $bootstrap-theme: $variant == 'bootstrap'; $border-radius: round-borders( - if($border-radius, $border-radius, map-get($calendar-schema, 'border-radius')), 0, 20px + if($border-radius, $border-radius, map.get($calendar-schema, 'border-radius')), 0, 20px ); $date-border-radius: round-borders( - if($date-border-radius, $date-border-radius, map-get($calendar-schema, 'date-border-radius')), 0, 20px + if($date-border-radius, $date-border-radius, map.get($calendar-schema, 'date-border-radius')), 0, 20px ); $month-border-radius: round-borders( - if($month-border-radius, $month-border-radius, map-get($calendar-schema, 'month-border-radius')), 0, 20px + if($month-border-radius, $month-border-radius, map.get($calendar-schema, 'month-border-radius')), 0, 20px ); @if not($content-text-color) and $content-background { - @if type-of($content-background) == 'color' { + @if meta.type-of($content-background) == 'color' { $content-text-color: text-contrast($content-background); } } @if not($weekend-text-color) and $content-background { - @if type-of($content-background) == 'color' { + @if meta.type-of($content-background) == 'color' { $weekend-text-color: rgba($content-text-color, .7); } } @if not($inactive-text-color) and $content-background { - @if type-of($content-background) == 'color' { + @if meta.type-of($content-background) == 'color' { $inactive-text-color: rgba($content-text-color, .5); } } @if not($label-color) and $content-background { - @if type-of($content-background) == 'color' { + @if meta.type-of($content-background) == 'color' { $label-color: rgba($content-text-color, .5); } } @@ -185,7 +190,7 @@ } @if not($picker-arrow-hover-color) and $header-background { - @if type-of($header-background) == 'color' { + @if meta.type-of($header-background) == 'color' { $picker-arrow-hover-color: $header-background; } } @@ -199,7 +204,7 @@ } @if not($date-hover-background) and $content-background { - @if type-of($content-background) == 'color' { + @if meta.type-of($content-background) == 'color' { $date-hover-background: rgba(text-contrast($content-background), .12); } } @@ -241,7 +246,7 @@ } @if not($date-special-background) and $content-background { - @if type-of($content-background) == 'color' { + @if meta.type-of($content-background) == 'color' { $date-special-background: rgba(text-contrast($content-background), .04); } } @@ -251,19 +256,19 @@ } @if not($month-hover-text-color) and $month-hover-background { - @if type-of($month-hover-background) == 'color' { + @if meta.type-of($month-hover-background) == 'color' { $month-hover-text-color: text-contrast($month-hover-background); } } @if not($month-hover-current-text-color) and $month-hover-background { - @if type-of($month-hover-background) == 'color' { + @if meta.type-of($month-hover-background) == 'color' { $month-hover-current-text-color: text-contrast($month-hover-background); } } @if not($date-disabled-text-color) and $date-disabled-background { - @if type-of($date-disabled-background) == 'color' { + @if meta.type-of($date-disabled-background) == 'color' { $date-disabled-color: rgba(text-contrast($date-disabled-background), .38); } } @@ -332,41 +337,41 @@ /// @requires em /// @requires rem /// @requires {mixin} ellipsis -/// @requires --var +/// @requires var-get @mixin igx-calendar($theme) { @include igx-css-vars($theme); - $palette: map-get($theme, 'palette'); + $palette: map.get($theme, 'palette'); $cal-header-year-margin: 0; $cal-header-date-margin: 0; $cal-header-padding: em(16px); - $variant: map-get($theme, 'variant'); + $variant: map.get($theme, 'variant'); $bootstrap-theme: $variant == 'bootstrap'; $not-bootstrap-theme: $variant != 'bootstrap'; - $cal-picker-padding: map-get(( + $cal-picker-padding: map.get(( material: em(16px), fluent: em(16px), bootstrap: em(8px), indigo-design: em(16px), ), $variant); - $cal-value-w: map-get(( + $cal-value-w: map.get(( material: em(40px), fluent: em(40px), bootstrap: em(32px), indigo-design: em(40px), ), $variant); - $border-width: map-get(( + $border-width: map.get(( material: 0, fluent: 0, bootstrap: 1px, indigo-design: 0 ), $variant); - $border-radius: map-get(( + $border-radius: map.get(( material: 4px, fluent: 0, bootstrap: 0, @@ -374,7 +379,7 @@ ), $variant); $cal-value-h: $cal-value-w; - $cal-value-br: private-div($cal-value-w, 2); + $cal-value-br: math.div($cal-value-w, 2); $cal-value-fw: 600; $cal-value-month-margin: 0 em(12px); @@ -382,23 +387,19 @@ $cal-row-padding: rem(8px); $cal-row-margin: rem(2px) 0; - $selected-hover-color: text-contrast( - map-get($theme, 'date-selected-background'), - $palette: $palette - ); - $current-color-variant: map-get(( - material: --var($theme, 'date-selected-background'), - fluent: --var($theme, 'date-current-bg-color'), - bootstrap: --var($theme, 'date-current-bg-color'), - indigo-design: --var($theme, 'date-selected-background'), + $current-color-variant: map.get(( + material: var-get($theme, 'date-selected-background'), + fluent: var-get($theme, 'date-current-bg-color'), + bootstrap: var-get($theme, 'date-current-bg-color'), + indigo-design: var-get($theme, 'date-selected-background'), ), $variant); - $current-text-color-variant: map-get(( - material: --var($theme, 'date-selected-text-color'), - fluent: --var($theme, 'date-current-text-color'), - bootstrap: --var($theme, 'date-current-text-color'), - indigo-design: --var($theme, 'date-selected-text-color'), + $current-text-color-variant: map.get(( + material: var-get($theme, 'date-selected-text-color'), + fluent: var-get($theme, 'date-current-text-color'), + bootstrap: var-get($theme, 'date-current-text-color'), + indigo-design: var-get($theme, 'date-selected-text-color'), ), $variant); $left: if-ltr(left, right); @@ -411,11 +412,11 @@ flex-flow: column nowrap; width: 100%; min-width: 290px; - background: --var($theme, 'content-background'); + background: var-get($theme, 'content-background'); outline: none; - border-radius: --var($theme, 'border-radius'); + border-radius: var-get($theme, 'border-radius'); overflow: hidden; - border: $border-width solid --var($theme, 'border-color'); + border: $border-width solid var-get($theme, 'border-color'); %cal-display { @@ -442,7 +443,7 @@ %cal-row-display { &:first-of-type { padding-top: 0; - padding-bottom: private-div($cal-picker-padding, 2); + padding-bottom: math.div($cal-picker-padding, 2); } } @@ -455,7 +456,7 @@ igx-month-picker { %cal-picker-display { @if $bootstrap-theme { - border-bottom: 1px solid --var($theme, 'border-color'); + border-bottom: 1px solid var-get($theme, 'border-color'); } } } @@ -477,8 +478,8 @@ } %cal-header-display { - background: --var($theme, 'header-background'); - color: --var($theme, 'header-text-color'); + background: var-get($theme, 'header-background'); + color: var-get($theme, 'header-text-color'); padding: $cal-header-padding; @if $bootstrap-theme { @@ -514,7 +515,7 @@ height: em(56px); align-items: center; padding-bottom: $cal-picker-padding; - background: --var($theme, 'picker-background-color'); + background: var-get($theme, 'picker-background-color'); @if $bootstrap-theme { height: auto; @@ -540,7 +541,7 @@ position: absolute; display: inline-flex; justify-content: center; - color: --var($theme, 'picker-arrow-color'); + color: var-get($theme, 'picker-arrow-color'); user-select: none; outline: none; cursor: pointer; @@ -549,12 +550,12 @@ top: 0; @if $bootstrap-theme { - top: private-div($cal-picker-padding, 2); + top: math.div($cal-picker-padding, 2); } &:focus, &:hover { - color: --var($theme, 'picker-arrow-hover-color'); + color: var-get($theme, 'picker-arrow-hover-color'); } @include if-rtl() { @@ -571,14 +572,14 @@ } %cal-picker-date { - color: --var($theme, 'picker-text-color'); + color: var-get($theme, 'picker-text-color'); text-align: center; outline: none; padding: 0 rem(2px); &:hover, &:focus { - color: --var($theme, 'picker-text-hover-color'); + color: var-get($theme, 'picker-text-hover-color'); cursor: pointer; } } @@ -608,7 +609,7 @@ display: flex; justify-content: center; align-items: center; - color: --var($theme, 'content-text-color'); + color: var-get($theme, 'content-text-color'); outline: none; &:first-of-type { @@ -640,8 +641,8 @@ &:first-of-type { @if $bootstrap-theme { margin-top: 0; - background: --var($theme, 'picker-background-color'); - border-bottom: 1px solid --var($theme, 'border-color'); + background: var-get($theme, 'picker-background-color'); + border-bottom: 1px solid var-get($theme, 'border-color'); padding-bottom: $cal-picker-padding; padding-top: $cal-picker-padding; } @@ -704,23 +705,17 @@ %cal-value--hover { @if $bootstrap-theme { - color: --var($theme, 'date-selected-text-color'); + color: var-get($theme, 'date-selected-text-color'); } %cal-value-content::after { - background: --var($theme, 'date-hover-background'); + background: var-get($theme, 'date-hover-background'); } } %cal-value--selected--hover { - %cal-value-content { - ::after { - @if type-of($selected-hover-color) == 'color' { - background: rgba($selected-hover-color, .18); - } @else { - background: $selected-hover-color; - } - } + %cal-value-content::after { + background: igx-color($palette, 'grays', 100, .18); } } @@ -732,7 +727,7 @@ width: $cal-value-w; min-width: $cal-value-w; height: $cal-value-h; - border-radius: --var($theme, 'date-border-radius'); + border-radius: var-get($theme, 'date-border-radius'); z-index: 0; // transition: background .15s ease-out; @@ -752,11 +747,11 @@ height: $cal-value-h; } - color: --var($theme, 'label-color'); + color: var-get($theme, 'label-color'); &:hover, &:focus { - color: --var($theme, 'label-color'); + color: var-get($theme, 'label-color'); } border-radius: 0; @@ -768,7 +763,7 @@ } %cal-value--weekend { - color: --var($theme, 'weekend-text-color'); + color: var-get($theme, 'weekend-text-color'); } %cal-value-date--week-number + %cal-value { @@ -778,7 +773,7 @@ %label--week-number, %cal-value-content--week-number { position: relative; - color: --var($theme, 'week-number-color') !important; + color: var-get($theme, 'week-number-color') !important; border-radius: 0; pointer-events: none; } @@ -790,14 +785,14 @@ &:hover, &:focus { %cal-value-content--week-number { - color: --var($theme, 'week-number-color') !important; + color: var-get($theme, 'week-number-color') !important; } } } %cal-value-content--week-number { position: relative; - background: --var($theme, 'week-number-background') !important; + background: var-get($theme, 'week-number-background') !important; min-width: auto; &::after { @@ -808,10 +803,10 @@ content: ''; position: absolute; width: 100%; - height: private-div($cal-row-padding, 2); + height: math.div($cal-row-padding, 2); #{$left}: 0; top: 100%; - background: --var($theme, 'week-number-background') !important; + background: var-get($theme, 'week-number-background') !important; } } @@ -822,20 +817,20 @@ span { width: $cal-value-w; position: relative; - background: --var($theme, 'week-number-background'); + background: var-get($theme, 'week-number-background'); &::before, &::after { content: ''; position: absolute; width: 100%; - background: --var($theme, 'week-number-background'); + background: var-get($theme, 'week-number-background'); #{$left}: 0; } &::after { top: 100%; - height: if($not-bootstrap-theme, private-div($cal-row-padding, 2) + rem(2px), $cal-row-padding + rem(5px)); + height: if($not-bootstrap-theme, math.div($cal-row-padding, 2) + rem(2px), $cal-row-padding + rem(5px)); } &::before { @@ -866,26 +861,26 @@ } %cal-value--year-current { - color: --var($theme, 'year-current-text-color'); + color: var-get($theme, 'year-current-text-color'); @if $bootstrap-theme { &:hover, &:focus { - color: --var($theme, 'year-hover-text-color'); + color: var-get($theme, 'year-hover-text-color'); } } } %cal-value--year-hover { - color: --var($theme, 'year-hover-text-color'); + color: var-get($theme, 'year-hover-text-color'); } %cal-value--month-hover { - color: --var($theme, 'month-hover-text-color'); + color: var-get($theme, 'month-hover-text-color'); outline-width: 0; &::after { - background: --var($theme, 'month-hover-background'); + background: var-get($theme, 'month-hover-background'); } } @@ -908,38 +903,38 @@ transform: translateY(-50%); height: 48px; background: transparent; - border-radius: --var($theme, 'month-border-radius'); + border-radius: var-get($theme, 'month-border-radius'); transition: background-color .15s ease-out; z-index: -1; } } %cal-value--month-current { - color: --var($theme, 'month-current-text-color'); + color: var-get($theme, 'month-current-text-color'); } %cal-value--month-current-hover { - color: --var($theme, 'month-hover-current-text-color'); + color: var-get($theme, 'month-hover-current-text-color'); } %cal-value--inactive { cursor: pointer; - color: --var($theme, 'inactive-text-color'); + color: var-get($theme, 'inactive-text-color'); } %cal-value--inactive--single--hover { @if $bootstrap-theme { - color: --var($theme, 'date-selected-text-color'); + color: var-get($theme, 'date-selected-text-color'); } @else { - color: --var($theme, 'inactive-text-color'); + color: var-get($theme, 'inactive-text-color'); } } %cal-value--special { %cal-value-content { - background: --var($theme, 'date-special-background'); + background: var-get($theme, 'date-special-background'); @if $not-bootstrap-theme { - color: --var($theme, 'date-special-text-color'); + color: var-get($theme, 'date-special-text-color'); } font-weight: 900; } @@ -947,26 +942,32 @@ %cal-value--selected { position: relative; - background: --var($theme, 'date-selected-background'); + background: var-get($theme, 'date-selected-background'); %cal-value-content { - color: --var($theme, 'date-selected-text-color'); - background: --var($theme, 'date-selected-background') ; + color: var-get($theme, 'date-selected-text-color'); + background: var-get($theme, 'date-selected-background') ; } } %cal-value--current { %cal-value-content { - color: --var($theme, 'date-current-text-color'); + color: var-get($theme, 'date-current-text-color'); font-weight: $cal-value-fw ; - background: --var($theme, 'date-current-bg-color'); + background: var-get($theme, 'date-current-bg-color'); &:hover { - background: --var($theme, 'date-current-bg-color'); + background: var-get($theme, 'date-current-bg-color'); } &:focus { - background: --var($theme, 'date-current-bg-color'); + background: var-get($theme, 'date-current-bg-color'); + } + + @if $variant == 'fluent' or 'bootstrap' { + &::after { + opacity: .2; + } } } } @@ -993,7 +994,7 @@ %cal-value--disabled { pointer-events: none; cursor: not-allowed; - color: --var($theme, 'date-disabled-text-color'); + color: var-get($theme, 'date-disabled-text-color'); } %cal-value--single { @@ -1007,16 +1008,16 @@ @if $bootstrap-theme { &:hover, &:focus { - color: --var($theme, 'date-selected-text-color'); + color: var-get($theme, 'date-selected-text-color'); } } } %cal-value--disabled-range { - background: --var($theme, 'date-disabled-background') !important; + background: var-get($theme, 'date-disabled-background') !important; %cal-value-content { - color: --var($theme, 'date-disabled-text-color'); + color: var-get($theme, 'date-disabled-text-color'); background: transparent !important; } } @@ -1032,21 +1033,21 @@ %cal-value--range%cal-value--inactive%cal-value--selected { %cal-value-content { - color: --var($theme, 'date-selected-text-color'); + color: var-get($theme, 'date-selected-text-color'); } &:focus, &:hover { %cal-value-content { - color: --var($theme, 'date-selected-text-color'); + color: var-get($theme, 'date-selected-text-color'); } } } %cal-value--range%cal-value--inactive%cal-value--selected%cal-value--single { %cal-value-content { - color: --var($theme, 'date-selected-text-color'); - background: --var($theme, 'date-selected-background') !important; + color: var-get($theme, 'date-selected-text-color'); + background: var-get($theme, 'date-selected-background') !important; } } @@ -1062,7 +1063,7 @@ top: 0; #{$left}: 50%; bottom: 0; - background: --var($theme, 'date-selected-background'); + background: var-get($theme, 'date-selected-background'); z-index: -1; } } @@ -1079,7 +1080,7 @@ top: 0; #{$right}: 50%; bottom: 0; - background: --var($theme, 'date-selected-background'); + background: var-get($theme, 'date-selected-background'); z-index: -1; } } @@ -1123,11 +1124,11 @@ picker-date: 'subtitle-1', content: 'body-1') ) { - $header-year: map-get($categories, 'header-year'); - $header-date: map-get($categories, 'header-date'); - $weekday-label: map-get($categories, 'weekday-labels'); - $picker-date: map-get($categories, 'picker-date'); - $content: map-get($categories, 'content'); + $header-year: map.get($categories, 'header-year'); + $header-date: map.get($categories, 'header-date'); + $weekday-label: map.get($categories, 'weekday-labels'); + $picker-date: map.get($categories, 'picker-date'); + $content: map.get($categories, 'content'); %cal-header-year { @include igx-type-style($type-scale, $header-year) { diff --git a/projects/igniteui-angular/src/lib/core/styles/components/card/_card-component.scss b/projects/igniteui-angular/src/lib/core/styles/components/card/_card-component.scss index 8de31f96d87..2693b388420 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/card/_card-component.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/card/_card-component.scss @@ -1,3 +1,6 @@ +@use '../../base' as *; +@use 'sass:string'; + //// /// @group components /// @author Simeon Simeonoff @@ -5,138 +8,147 @@ /// @requires {mixin} bem-elem /// @requires {mixin} bem-mod //// -@include b(igx-card) { - $this: bem--selector-to-string(&); - @include register-component(str-slice($this, 2, -1)); - @extend %igx-card-display !optional; +@mixin component { + @include b(igx-card) { + $this: bem--selector-to-string(&); + @include register-component( + $name: string.slice($this, 2, -1), + $deps: ( + igx-icon, + igx-button, + ) + ); + + @extend %igx-card-display !optional; + + @include e(tgroup) { + @extend %igx-card-tgroup !optional; + } - @include e(tgroup) { - @extend %igx-card-tgroup !optional; - } + @include e(media) { + @extend %igx-card-media !optional; + } - @include e(media) { - @extend %igx-card-media !optional; - } + @include e(media, $m: right) { + @extend %igx-card-media--right !optional; + } - @include e(media, $m: right) { - @extend %igx-card-media--right !optional; - } + @include m(outlined) { + @extend %igx-card--outlined !optional; + } - @include m(outlined) { - @extend %igx-card--outlined !optional; + @include m(horizontal) { + @extend %igx-card--horizontal !optional; + } } - @include m(horizontal) { - @extend %igx-card--horizontal !optional; - } -} + @include b(igx-card-header) { + @extend %igx-card-header !optional; -@include b(igx-card-header) { - @extend %igx-card-header !optional; + @include e(thumbnail) { + @extend %igx-card-header-thumbnail !optional; + } - @include e(thumbnail) { - @extend %igx-card-header-thumbnail !optional; - } + @include e(titles) { + @extend %igx-card-header-titles !optional; + } - @include e(titles) { - @extend %igx-card-header-titles !optional; - } + @include e(title) { + @extend %igx-card-header-title !optional; + } - @include e(title) { - @extend %igx-card-header-title !optional; - } + @include e(title, $m: small) { + @extend %igx-card-header-title !optional; + @extend %igx-card-header-title--small !optional; + } - @include e(title, $m: small) { - @extend %igx-card-header-title !optional; - @extend %igx-card-header-title--small !optional; - } + @include e(subtitle) { + @extend %igx-card-header-subtitle !optional; + } - @include e(subtitle) { - @extend %igx-card-header-subtitle !optional; - } + @include m(compact) { + @extend %igx-card-header--compact !optional; + } - @include m(compact) { - @extend %igx-card-header--compact !optional; + @include m(vertical) { + @extend %igx-card-header--vertical !optional; + } } - @include m(vertical) { - @extend %igx-card-header--vertical !optional; + @include b(igx-card-content) { + @extend %igx-card-content !optional; } -} -@include b(igx-card-content) { - @extend %igx-card-content !optional; -} + @include b(igx-card-actions) { + @extend %igx-card-actions !optional; -@include b(igx-card-actions) { - @extend %igx-card-actions !optional; - - @include e(icons) { - @extend %igx-card-actions__icons !optional; - } + @include e(icons) { + @extend %igx-card-actions__icons !optional; + } - @include e(buttons) { - @extend %igx-card-actions__buttons !optional; - } + @include e(buttons) { + @extend %igx-card-actions__buttons !optional; + } - @include e(igroup) { - @extend %igx-card-actions-igroup !optional; - } + @include e(igroup) { + @extend %igx-card-actions-igroup !optional; + } - @include e(igroup, $m: start) { - @extend %igx-card-actions-igroup !optional; - @extend %igx-card-actions-igroup--start !optional; - } + @include e(igroup, $m: start) { + @extend %igx-card-actions-igroup !optional; + @extend %igx-card-actions-igroup--start !optional; + } - @include e(igroup, $m: end) { - @extend %igx-card-actions-igroup !optional; - @extend %igx-card-actions-igroup--end !optional; - } + @include e(igroup, $m: end) { + @extend %igx-card-actions-igroup !optional; + @extend %igx-card-actions-igroup--end !optional; + } - @include e(bgroup) { - @extend %igx-card-actions-bgroup !optional; - } + @include e(bgroup) { + @extend %igx-card-actions-bgroup !optional; + } - @include m(vertical) { - @extend %igx-card-actions--vertical !optional; + @include m(vertical) { + @extend %igx-card-actions--vertical !optional; - @include e(icons) { - @extend %igx-card-actions__icons--vertical !optional; - } + @include e(icons) { + @extend %igx-card-actions__icons--vertical !optional; + } - @include e(buttons) { - @extend %igx-card-actions__buttons--vertical !optional; + @include e(buttons) { + @extend %igx-card-actions__buttons--vertical !optional; + } } - } - @include m(reverse) { - @include e(icons) { - @extend %igx-card-actions__icons--reverse !optional; - } + @include m(reverse) { + @include e(icons) { + @extend %igx-card-actions__icons--reverse !optional; + } - @include e(buttons) { - @extend %igx-card-actions__buttons--reverse !optional; + @include e(buttons) { + @extend %igx-card-actions__buttons--reverse !optional; + } } - } - @include mx(vertical, reverse) { - @include e(icons) { - @extend %igx-card-actions__icons--vertical-reverse !optional; - } + @include mx(vertical, reverse) { + @include e(icons) { + @extend %igx-card-actions__icons--vertical-reverse !optional; + } - @include e(buttons) { - @extend %igx-card-actions__buttons--vertical-reverse !optional; + @include e(buttons) { + @extend %igx-card-actions__buttons--vertical-reverse !optional; + } } - } - @include m(justify) { - @include e(icons) { - @extend %igx-card-actions__icons--justify !optional; - } + @include m(justify) { + @include e(icons) { + @extend %igx-card-actions__icons--justify !optional; + } - @include e(buttons) { - @extend %igx-card-actions__buttons--justify !optional; + @include e(buttons) { + @extend %igx-card-actions__buttons--justify !optional; + } } } } diff --git a/projects/igniteui-angular/src/lib/core/styles/components/card/_card-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/card/_card-theme.scss index 946560acf5b..a8f58da67b0 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/card/_card-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/card/_card-theme.scss @@ -1,3 +1,9 @@ +@use '../../base' as *; +@use '../../themes/schemas' as *; +@use '../../typography/base' as *; +@use 'sass:map'; +@use 'sass:meta'; + //// /// @group themes /// @access public @@ -53,8 +59,8 @@ $name: 'igx-card'; $card-schema: (); - @if map-has-key($schema, $name) { - $card-schema: map-get($schema, $name); + @if map.has-key($schema, $name) { + $card-schema: map.get($schema, $name); } @else { $card-schema: $schema; } @@ -62,7 +68,7 @@ $theme: apply-palette($card-schema, $palette); $border-radius: round-borders( - if($border-radius, $border-radius, map-get($card-schema, 'border-radius')),0 ,24px + if($border-radius, $border-radius, map.get($card-schema, 'border-radius')),0 ,24px ); @if not($header-text-color) and $background { @@ -70,30 +76,30 @@ } @if not($actions-text-color) and $background { - @if type-of($background) == 'color' { + @if meta.type-of($background) == 'color' { $actions-text-color: rgba(text-contrast($background), .5); } } @if not($content-text-color) and $background { - @if type-of($background) == 'color' { + @if meta.type-of($background) == 'color' { $content-text-color: rgba(text-contrast($background), .7); } } @if not($subtitle-text-color) and $background { - @if type-of($background) == 'color' { + @if meta.type-of($background) == 'color' { $subtitle-text-color: rgba(text-contrast($background), .7); } } @if not($resting-shadow) { - $resting-elevation: map-get($card-schema, 'resting-elevation'); + $resting-elevation: map.get($card-schema, 'resting-elevation'); $resting-shadow: igx-elevation($elevations, $resting-elevation); } @if not($hover-shadow) { - $hover-elevation: map-get($card-schema, 'hover-elevation'); + $hover-elevation: map.get($card-schema, 'hover-elevation'); $hover-shadow: igx-elevation($elevations, $hover-elevation); } @@ -116,11 +122,11 @@ /// @param {Map} $theme - The theme used to style the component. /// @requires {mixin} igx-css-vars /// @requires em -/// @requires --var +/// @requires var-get @mixin igx-card($theme) { @include igx-css-vars($theme); - $variant: map-get($theme, 'variant'); + $variant: map.get($theme, 'variant'); $not-material-theme: $variant != 'material'; $card-heading-padding: rem(16px); @@ -137,25 +143,25 @@ %igx-card-display { display: flex; flex-direction: column; - box-shadow: --var($theme, 'resting-shadow'); + box-shadow: var-get($theme, 'resting-shadow'); overflow: hidden; - border-radius: --var($theme, 'border-radius'); - background: --var($theme, 'background'); + border-radius: var-get($theme, 'border-radius'); + background: var-get($theme, 'background'); transition: $card-transitions; backface-visibility: hidden; @if $not-material-theme { - border: 1px solid --var($theme, 'outline-color'); + border: 1px solid var-get($theme, 'outline-color'); } &:hover { - box-shadow: --var($theme, 'hover-shadow'); + box-shadow: var-get($theme, 'hover-shadow'); } } %igx-card--outlined { box-shadow: none; - border: 1px solid --var($theme, 'outline-color'); + border: 1px solid var-get($theme, 'outline-color'); &:hover { box-shadow: none; @@ -173,7 +179,7 @@ align-content: flex-start; width: 100%; padding: $card-heading-padding; - color: --var($theme, 'header-text-color'); + color: var-get($theme, 'header-text-color'); &:empty { display: block; @@ -223,7 +229,7 @@ } %igx-card-header-subtitle { - color: --var($theme, 'subtitle-text-color'); + color: var-get($theme, 'subtitle-text-color'); } %igx-card-tgroup { @@ -235,7 +241,7 @@ width: 100%; flex: 1 1 auto; padding: $card-content-padding; - color: --var($theme, 'content-text-color'); + color: var-get($theme, 'content-text-color'); } %igx-card-media { @@ -281,7 +287,7 @@ display: flex; align-items: center; order: 1; - color: --var($theme, 'actions-text-color'); + color: var-get($theme, 'actions-text-color'); margin-#{$left}: auto; &:empty { @@ -358,7 +364,7 @@ flex-flow: row nowrap; %igx-button--icon { - color: --var($theme, 'actions-text-color'); + color: var-get($theme, 'actions-text-color'); } } @@ -384,10 +390,10 @@ subtitle: 'subtitle-2', content: 'body-2') ) { - $title: map-get($categories, 'title'); - $title-small: map-get($categories, 'title-small'); - $subtitle: map-get($categories, 'subtitle'); - $content: map-get($categories, 'content'); + $title: map.get($categories, 'title'); + $title-small: map.get($categories, 'title-small'); + $subtitle: map.get($categories, 'subtitle'); + $content: map.get($categories, 'content'); %igx-card-header-title { @include igx-type-style($type-scale, $title) { diff --git a/projects/igniteui-angular/src/lib/core/styles/components/carousel/_carousel-component.scss b/projects/igniteui-angular/src/lib/core/styles/components/carousel/_carousel-component.scss index 854f4d618aa..382732b9b22 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/carousel/_carousel-component.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/carousel/_carousel-component.scss @@ -1,4 +1,8 @@ +@use '../../base' as *; +@use 'sass:string'; + //// Carousel +/// @access private /// @group components /// @author Simeon Simeonoff /// @requires {mixin} bem-block @@ -6,7 +10,6 @@ /// @requires {mixin} bem-mod //// -/// @access private @mixin _igx-carousel-indicators-partial { @include b(igx-carousel-indicators) { @extend %igx-carousel-indicators !optional; @@ -27,7 +30,6 @@ } } -/// @access private @mixin _igx-carousel-navigation-partial { @include b(igx-nav-dot) { @extend %igx-nav-dot !optional; @@ -50,7 +52,6 @@ } } -/// @access private @mixin _igx-carousel-slide-partial { @include b(igx-slide) { @extend %igx-carousel-slide !optional; @@ -65,37 +66,42 @@ } } -/// @access public -@include b(igx-carousel) { - $this: bem--selector-to-string(&); - @include register-component(str-slice($this, 2, -1)); +@mixin component { + @include b(igx-carousel) { + $this: bem--selector-to-string(&); + @include register-component( + $name: string.slice($this, 2, -1), + $deps: ( + igx-icon, + ) + ); - @extend %igx-carousel-display !optional; + @extend %igx-carousel-display !optional; - @include e(inner) { - @extend %igx-carousel-slide-wrapper !optional; - } + @include e(inner) { + @extend %igx-carousel-slide-wrapper !optional; + } - @include e(label) { - @extend %igx-carousel-indicators-label !optional; - } + @include e(label) { + @extend %igx-carousel-indicators-label !optional; + } - @include e(arrow) { - @extend %igx-carousel-arrow !optional; - } + @include e(arrow) { + @extend %igx-carousel-arrow !optional; + } - @include e(arrow, $m: prev) { - @extend %igx-carousel-arrow !optional; - @extend %igx-carousel-arrow--prev !optional; - } + @include e(arrow, $m: prev) { + @extend %igx-carousel-arrow !optional; + @extend %igx-carousel-arrow--prev !optional; + } - @include e(arrow, $m: next) { - @extend %igx-carousel-arrow !optional; - @extend %igx-carousel-arrow--next !optional; - } + @include e(arrow, $m: next) { + @extend %igx-carousel-arrow !optional; + @extend %igx-carousel-arrow--next !optional; + } - @include _igx-carousel-indicators-partial(); - @include _igx-carousel-navigation-partial(); - @include _igx-carousel-slide-partial(); + @include _igx-carousel-indicators-partial(); + @include _igx-carousel-navigation-partial(); + @include _igx-carousel-slide-partial(); + } } - diff --git a/projects/igniteui-angular/src/lib/core/styles/components/carousel/_carousel-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/carousel/_carousel-theme.scss index 97993ff6bb1..3553bdc07b0 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/carousel/_carousel-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/carousel/_carousel-theme.scss @@ -1,3 +1,8 @@ +@use '../../base' as *; +@use '../../themes/schemas' as *; +@use 'sass:map'; +@use 'sass:meta'; + //// /// @group themes /// @access public @@ -63,8 +68,8 @@ $name: 'igx-carousel'; $carousel-schema: (); - @if map-has-key($schema, $name) { - $carousel-schema: map-get($schema, $name); + @if map.has-key($schema, $name) { + $carousel-schema: map.get($schema, $name); } @else { $carousel-schema: $schema; } @@ -72,11 +77,11 @@ $theme: apply-palette($carousel-schema, $palette); $border-radius: round-borders( - if($border-radius, $border-radius, map-get($carousel-schema, 'border-radius')),0 ,36px + if($border-radius, $border-radius, map.get($carousel-schema, 'border-radius')),0 ,36px ); @if not($button-shadow) { - $button-elevation: map-get($carousel-schema, 'button-elevation'); + $button-elevation: map.get($carousel-schema, 'button-elevation'); $button-shadow: igx-elevation($elevations, $button-elevation); } @@ -89,7 +94,7 @@ } @if not($button-disabled-arrow-color) and $button-disabled-background { - @if type-of($button-disabled-background) == 'color' { + @if meta.type-of($button-disabled-background) == 'color' { $button-disabled-arrow-color: rgba(text-contrast($button-disabled-background), .3); } } @@ -124,7 +129,7 @@ /// @requires {mixin} animation /// @requires {mixin} scale-in-center /// @requires {mixin} scale-out-center -/// @requires --var +/// @requires var-get @mixin igx-carousel($theme) { @include igx-css-vars($theme); @@ -140,7 +145,7 @@ $carousel-indicator-margin: 0 5px; $indicator-border-style: 2px solid; - $variant: map-get($theme, variant); + $variant: map.get($theme, variant); $not-bootstrap-theme: $variant != 'bootstrap'; %igx-carousel-display { @@ -163,19 +168,19 @@ @if $not-bootstrap-theme { border-radius: 50%; } @else { - border-radius: --var($theme, 'border-radius'); + border-radius: var-get($theme, 'border-radius'); } outline-style: none; transition: all .15s ease-in-out; - color: --var($theme, 'button-arrow-color'); - background: --var($theme, 'button-background'); - box-shadow: --var($theme, 'button-shadow'); + color: var-get($theme, 'button-arrow-color'); + background: var-get($theme, 'button-background'); + box-shadow: var-get($theme, 'button-shadow'); } %igx-nav-arrow--disabled { - background: --var($theme, 'button-disabled-background'); - color: --var($theme, 'button-disabled-arrow-color'); + background: var-get($theme, 'button-disabled-background'); + color: var-get($theme, 'button-disabled-arrow-color'); pointer-events: none; box-shadow: none; @@ -185,8 +190,8 @@ } %igx-nav-arrow--hover { - color: --var($theme, 'button-hover-arrow-color'); - background: --var($theme, 'button-hover-background'); + color: var-get($theme, 'button-hover-arrow-color'); + background: var-get($theme, 'button-hover-background'); } %igx-carousel-arrow { @@ -266,7 +271,7 @@ @if $variant != 'indigo-design' { border: $indicator-border-style; - border-color: --var($theme, 'indicator-border-color'); + border-color: var-get($theme, 'indicator-border-color'); box-shadow: igx-elevation($elevation: 1); opacity: .7; } @@ -292,7 +297,7 @@ #{$right}: 0; } border-radius: inherit; - background: --var($theme, 'indicator-dot-color'); + background: var-get($theme, 'indicator-dot-color'); } &:hover { @@ -303,13 +308,13 @@ %igx-nav-dot--active { @if $variant != 'indigo-design' { border: $indicator-border-style; - border-color: --var($theme, 'indicator-active-border-color'); + border-color: var-get($theme, 'indicator-active-border-color'); } opacity: 1; &::after { - background: --var($theme, 'indicator-active-dot-color'); + background: var-get($theme, 'indicator-active-dot-color'); @if $variant != 'indigo-design' { @include animation('scale-in-center' .15s $ease-out-quad forwards); } @@ -322,7 +327,7 @@ height: inherit; overflow: hidden; outline-style: none; - border-radius: --var($theme, 'border-radius'); + border-radius: var-get($theme, 'border-radius'); min-height: 300px; min-width: 300px; } @@ -336,7 +341,7 @@ right: 0; bottom: 0; z-index: -1; - background: --var($theme, 'slide-background'); + background: var-get($theme, 'slide-background'); visibility: hidden; } diff --git a/projects/igniteui-angular/src/lib/core/styles/components/charts/_category-chart-component.scss b/projects/igniteui-angular/src/lib/core/styles/components/charts/_category-chart-component.scss index b545ca229c3..f829366c5ef 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/charts/_category-chart-component.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/charts/_category-chart-component.scss @@ -1,3 +1,6 @@ +@use '../../base' as *; +@use 'sass:string'; + //// /// @group components /// @access private @@ -6,8 +9,11 @@ /// @requires {mixin} bem-elem /// @requires {mixin} bem-mod //// -@include b(category-chart) { - // Register the component in the component registry - $this: bem--selector-to-string(&); - @include register-component(str-slice($this, 2, -1)); + +@mixin component { + @include b(category-chart) { + // Register the component in the component registry + $this: bem--selector-to-string(&); + @include register-component(string.slice($this, 2, -1)); + } } diff --git a/projects/igniteui-angular/src/lib/core/styles/components/charts/_category-chart-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/charts/_category-chart-theme.scss index 9ab05f905e0..76e20e5026b 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/charts/_category-chart-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/charts/_category-chart-theme.scss @@ -1,10 +1,15 @@ +@use '../../base' as *; +@use '../../themes/schemas' as *; +@use '../../typography/base' as *; +@use 'sass:map'; + //// /// @group themes /// @access public /// @author Silvia Ivanova //// -/// @param {Map} $palette [$default-palette] - The palette used as basis for styling the component. +/// @param {Map} $palette [null] - The palette used as basis for styling the component. /// @param {Map} $schema [$light-schema] - The schema used as basis for styling the component. /// @param {List} $margin [null] - Sets the margin (top, right, bottom, left) of the chart content. /// @param {List} $brushes [series] - Defines the palette from which automatically assigned series brushes colors are selected. @@ -60,7 +65,6 @@ /// @param {Number} $y-axis-tick-length [null] - Sets the length of tickmarks along the Y-axis. /// @param {Color} $y-axis-tick-stroke [null] - Sets the color to apply to tickmarks along the Y-axis. /// @param {Number} $y-axis-tick-stroke-thickness [null] - Sets the thickness to apply to tickmarks along the Y-axis. -/// @requires $default-palette /// @requires $light-schema /// @requires apply-palette /// @requires extend @@ -70,7 +74,7 @@ /// // Pass the theme to the igx-css-vars mixin /// @include igx-css-vars($custom-chart-theme); @function igx-category-chart-theme( - $palette: $default-palette, + $palette: null, $schema: $light-schema, $margin: null, @@ -132,20 +136,20 @@ $selector: 'igx-category-chart'; $chart-schema: (); - @if map-has-key($schema, $name) { - $chart-schema: map-get($schema, $name); + @if map.has-key($schema, $name) { + $chart-schema: map.get($schema, $name); } @else { $chart-schema: $schema; } $theme: apply-palette($chart-schema, $palette); - $margin-default: map-get($theme, 'margin'); - $title-margin-default: map-get($theme, 'title-margin'); - $subtitle-margin-default: map-get($theme, 'subtitle-margin'); - $x-axis-label-margin-default: map-get($theme, 'x-axis-label-margin'); - $x-axis-title-margin-default: map-get($theme, 'x-axis-title-margin'); - $y-axis-label-margin-default: map-get($theme, 'y-axis-label-margin'); - $y-axis-title-margin-default: map-get($theme, 'y-axis-title-margin'); + $margin-default: map.get($theme, 'margin'); + $title-margin-default: map.get($theme, 'title-margin'); + $subtitle-margin-default: map.get($theme, 'subtitle-margin'); + $x-axis-label-margin-default: map.get($theme, 'x-axis-label-margin'); + $x-axis-title-margin-default: map.get($theme, 'x-axis-title-margin'); + $y-axis-label-margin-default: map.get($theme, 'y-axis-label-margin'); + $y-axis-title-margin-default: map.get($theme, 'y-axis-title-margin'); @if not($margin) { $margin: $margin-default; @@ -275,12 +279,12 @@ 'y-axis-title-text-style': 'h3', )) { $name: 'category-chart'; - $title: map-get($categories, 'title'); - $subtitle: map-get($categories, 'subtitle'); - $x-axis-label-text-style: map-get($categories, 'x-axis-label-text-style'); - $x-axis-title-text-style: map-get($categories, 'x-axis-title-text-style'); - $y-axis-label-text-style: map-get($categories, 'y-axis-label-text-style'); - $y-axis-title-text-style: map-get($categories, 'y-axis-title-text-style'); + $title: map.get($categories, 'title'); + $subtitle: map.get($categories, 'subtitle'); + $x-axis-label-text-style: map.get($categories, 'x-axis-label-text-style'); + $x-axis-title-text-style: map.get($categories, 'x-axis-title-text-style'); + $y-axis-label-text-style: map.get($categories, 'y-axis-label-text-style'); + $y-axis-title-text-style: map.get($categories, 'y-axis-title-text-style'); $title-styles: igx-type-scale-category($type-scale, $title); $subtitle-styles: igx-type-scale-category($type-scale, $subtitle); diff --git a/projects/igniteui-angular/src/lib/core/styles/components/charts/_data-chart-component.scss b/projects/igniteui-angular/src/lib/core/styles/components/charts/_data-chart-component.scss index f3b2c79d41b..5aec278fe7c 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/charts/_data-chart-component.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/charts/_data-chart-component.scss @@ -1,3 +1,6 @@ +@use '../../base' as *; +@use 'sass:string'; + //// /// @group components /// @access private @@ -6,8 +9,11 @@ /// @requires {mixin} bem-elem /// @requires {mixin} bem-mod //// -@include b(data-chart) { - // Register the component in the component registry - $this: bem--selector-to-string(&); - @include register-component(str-slice($this, 2, -1)); + +@mixin component { + @include b(data-chart) { + // Register the component in the component registry + $this: bem--selector-to-string(&); + @include register-component(string.slice($this, 2, -1)); + } } diff --git a/projects/igniteui-angular/src/lib/core/styles/components/charts/_data-chart-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/charts/_data-chart-theme.scss index 96d27d4dec3..333198594a1 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/charts/_data-chart-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/charts/_data-chart-theme.scss @@ -1,10 +1,15 @@ +@use '../../base' as *; +@use '../../themes/schemas' as *; +@use '../../typography/base' as *; +@use 'sass:map'; + //// /// @group themes /// @access public /// @author Simeon Simeonoff //// -/// @param {Map} $palette [$default-palette] - The palette used as basis for styling the component. +/// @param {Map} $palette [null] - The palette used as basis for styling the component. /// @param {Map} $schema [$light-schema] - The schema used as basis for styling the component. /// @param {List} $margin [null] - Sets the margin (top, right, bottom, left) of the chart content. /// @param {Color} $title-text-color [null] - Sets the color of the chart title. @@ -18,7 +23,6 @@ /// @param {Color} $plot-area-background [null] - Sets the brush used as the background for the current Chart object's plot area. /// @param {String} $title-horizontal-alignment [null] - The horizontal alignment to use for the title. Valid options are 'left', 'center', and 'right'; /// @param {String} $subtitle-horizontal-alignment [null] - The horizontal alignment to use for the subtitle. Valid options are 'left', 'center', and 'right'; -/// @requires $default-palette /// @requires $light-schema /// @requires apply-palette /// @requires extend @@ -28,7 +32,7 @@ /// // Pass the theme to the igx-css-vars mixin /// @include igx-css-vars($my-chart-theme); @function igx-data-chart-theme( - $palette: $default-palette, + $palette: null, $schema: $light-schema, $margin: null, @@ -48,16 +52,16 @@ $selector: 'igx-data-chart'; $chart-schema: (); - @if map-has-key($schema, $name) { - $chart-schema: map-get($schema, $name); + @if map.has-key($schema, $name) { + $chart-schema: map.get($schema, $name); } @else { $chart-schema: $schema; } $theme: apply-palette($chart-schema, $palette); - $margin-default: map-get($theme, 'margin'); - $title-margin-default: map-get($theme, 'title-margin'); - $subtitle-margin-default: map-get($theme, 'subtitle-margin'); + $margin-default: map.get($theme, 'margin'); + $title-margin-default: map.get($theme, 'title-margin'); + $subtitle-margin-default: map.get($theme, 'subtitle-margin'); @if not($margin) { $margin: $margin-default; @@ -110,8 +114,8 @@ subtitle: 'subtitle-1', )) { $name: 'data-chart'; - $title: map-get($categories, 'title'); - $subtitle: map-get($categories, 'subtitle'); + $title: map.get($categories, 'title'); + $subtitle: map.get($categories, 'subtitle'); $title-styles: igx-type-scale-category($type-scale, $title); $subtitle-styles: igx-type-scale-category($type-scale, $subtitle); diff --git a/projects/igniteui-angular/src/lib/core/styles/components/charts/_doughnut-chart-component.scss b/projects/igniteui-angular/src/lib/core/styles/components/charts/_doughnut-chart-component.scss index 5a80e314c4a..9e03896bb68 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/charts/_doughnut-chart-component.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/charts/_doughnut-chart-component.scss @@ -1,3 +1,6 @@ +@use '../../base' as *; +@use 'sass:string'; + //// /// @group components /// @access private @@ -6,8 +9,11 @@ /// @requires {mixin} bem-elem /// @requires {mixin} bem-mod //// -@include b(doughnut-chart) { - // Register the component in the component registry - $this: bem--selector-to-string(&); - @include register-component(str-slice($this, 2, -1)); + +@mixin component { + @include b(doughnut-chart) { + // Register the component in the component registry + $this: bem--selector-to-string(&); + @include register-component(string.slice($this, 2, -1)); + } } diff --git a/projects/igniteui-angular/src/lib/core/styles/components/charts/_doughnut-chart-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/charts/_doughnut-chart-theme.scss index 877b7c051a3..b0855ad0a84 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/charts/_doughnut-chart-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/charts/_doughnut-chart-theme.scss @@ -1,10 +1,15 @@ +@use '../../base' as *; +@use '../../themes/schemas' as *; +@use '../../typography/base' as *; +@use 'sass:map'; + //// /// @group themes /// @access public /// @author Simeon Simeonoff //// -/// @param {Map} $palette [$default-palette] - The palette used as basis for styling the component. +/// @param {Map} $palette [null] - The palette used as basis for styling the component. /// @param {Map} $schema [$light-schema] - The schema used as basis for styling the component. /// @param {Color} $others-category-fill [null] - Sets the fill color for others category. /// @param {Number} $others-category-opacity [null] - Sets the opacity for others category. @@ -14,7 +19,6 @@ /// @param {Number} $selected-slice-opacity [null] - Sets the opacity of the selected slice. /// @param {Color} $selected-slice-stroke [null] - Sets the stroke color of the selected slice. /// @param {Number} $selected-slice-stroke-thickness [null] - Sets the stroke thickness of the selected slice. -/// @requires $default-palette /// @requires $light-schema /// @requires apply-palette /// @requires extend @@ -24,7 +28,7 @@ /// // Pass the theme to the igx-css-vars mixin /// @include igx-css-vars($my-chart-theme); @function igx-doughnut-chart-theme( - $palette: $default-palette, + $palette: null, $schema: $light-schema, $brushes: null, @@ -42,8 +46,8 @@ $selector: 'igx-doughnut-chart'; $chart-schema: (); - @if map-has-key($schema, $name) { - $chart-schema: map-get($schema, $name); + @if map.has-key($schema, $name) { + $chart-schema: map.get($schema, $name); } @else { $chart-schema: $schema; } diff --git a/projects/igniteui-angular/src/lib/core/styles/components/charts/_financial-chart-component.scss b/projects/igniteui-angular/src/lib/core/styles/components/charts/_financial-chart-component.scss index 831efc28139..520af48c6f0 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/charts/_financial-chart-component.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/charts/_financial-chart-component.scss @@ -1,3 +1,6 @@ +@use '../../base' as *; +@use 'sass:string'; + //// /// @group components /// @access private @@ -6,8 +9,11 @@ /// @requires {mixin} bem-elem /// @requires {mixin} bem-mod //// -@include b(financial-chart) { - // Register the component in the component registry - $this: bem--selector-to-string(&); - @include register-component(str-slice($this, 2, -1)); + +@mixin component { + @include b(financial-chart) { + // Register the component in the component registry + $this: bem--selector-to-string(&); + @include register-component(string.slice($this, 2, -1)); + } } diff --git a/projects/igniteui-angular/src/lib/core/styles/components/charts/_financial-chart-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/charts/_financial-chart-theme.scss index c530bed5bde..43793fe802a 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/charts/_financial-chart-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/charts/_financial-chart-theme.scss @@ -1,10 +1,15 @@ +@use '../../base' as *; +@use '../../themes/schemas' as *; +@use '../../typography/base' as *; +@use 'sass:map'; + //// /// @group themes /// @access private /// @author Dilyana Dimova //// -/// @param {Map} $palette [$default-palette] - The palette used as basis for styling the component. +/// @param {Map} $palette [null] - The palette used as basis for styling the component. /// @param {Map} $schema [$light-schema] - The schema used as basis for styling the component. /// @param {List} $margin [null] - Sets the margin (top, right, bottom, left) of the chart content. /// @param {String} $title-alignment [null] - The horizontal alignment to use for the title. @@ -64,7 +69,6 @@ /// @param {Number} $y-axis-tick-stroke-thickness [null] - Sets the thickness to apply to tickmarks along the Y-axis. /// @param {String} $zoom-slider-x-axis-major-stroke [null] - Gets or sets stroke brush of major gridlines on x-axis of the zoom slider pane. /// @param {Number} $zoom-slider-x-axis-major-stroke-thickness [null] - Gets or sets thickness of major gridlines on x-axis of the zoom slider pane. -/// @requires $default-palette /// @requires $light-schema /// @requires apply-palette /// @requires extend @@ -74,7 +78,7 @@ /// // Pass the theme to the igx-css-vars mixin /// @include igx-css-vars($my-chart-theme); @function igx-financial-chart-theme( - $palette: $default-palette, + $palette: null, $schema: $light-schema, $margin: null, @@ -137,19 +141,19 @@ $selector: 'igx-financial-chart'; $chart-schema: (); - @if map-has-key($schema, $name) { - $chart-schema: map-get($schema, $name); + @if map.has-key($schema, $name) { + $chart-schema: map.get($schema, $name); } @else { $chart-schema: $schema; } $theme: apply-palette($chart-schema, $palette); - $title-margin-default: map-get($theme, 'title-margin'); - $subtitle-margin-default: map-get($theme, 'subtitle-margin'); - $x-axis-label-margin-default: map-get($theme, 'x-axis-label-margin'); - $x-axis-title-margin-default: map-get($theme, 'x-axis-title-margin'); - $y-axis-label-margin-default: map-get($theme, 'y-axis-label-margin'); - $y-axis-title-margin-default: map-get($theme, 'x-axis-title-margin'); + $title-margin-default: map.get($theme, 'title-margin'); + $subtitle-margin-default: map.get($theme, 'subtitle-margin'); + $x-axis-label-margin-default: map.get($theme, 'x-axis-label-margin'); + $x-axis-title-margin-default: map.get($theme, 'x-axis-title-margin'); + $y-axis-label-margin-default: map.get($theme, 'y-axis-label-margin'); + $y-axis-title-margin-default: map.get($theme, 'x-axis-title-margin'); @if not($title-margin) { $title-margin: $title-margin-default; @@ -267,12 +271,12 @@ 'y-axis-title-text-style': 'h3', )) { $name: 'financial-chart'; - $title: map-get($categories, 'title'); - $subtitle: map-get($categories, 'subtitle'); - $x-axis-label-text-style: map-get($categories, 'x-axis-label-text-style'); - $x-axis-title-text-style: map-get($categories, 'x-axis-title-text-style'); - $y-axis-label-text-style: map-get($categories, 'y-axis-label-text-style'); - $y-axis-title-text-style: map-get($categories, 'y-axis-title-text-style'); + $title: map.get($categories, 'title'); + $subtitle: map.get($categories, 'subtitle'); + $x-axis-label-text-style: map.get($categories, 'x-axis-label-text-style'); + $x-axis-title-text-style: map.get($categories, 'x-axis-title-text-style'); + $y-axis-label-text-style: map.get($categories, 'y-axis-label-text-style'); + $y-axis-title-text-style: map.get($categories, 'y-axis-title-text-style'); $title-styles: igx-type-scale-category($type-scale, $title); $subtitle-styles: igx-type-scale-category($type-scale, $subtitle); diff --git a/projects/igniteui-angular/src/lib/core/styles/components/charts/_funnel-chart-component.scss b/projects/igniteui-angular/src/lib/core/styles/components/charts/_funnel-chart-component.scss index bc09f19f6e7..196bdaee404 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/charts/_funnel-chart-component.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/charts/_funnel-chart-component.scss @@ -1,3 +1,6 @@ +@use '../../base' as *; +@use 'sass:string'; + //// /// @group components /// @access private @@ -6,8 +9,11 @@ /// @requires {mixin} bem-elem /// @requires {mixin} bem-mod //// -@include b(funnel-chart) { - // Register the component in the component registry - $this: bem--selector-to-string(&); - @include register-component(str-slice($this, 2, -1)); + +@mixin component { + @include b(funnel-chart) { + // Register the component in the component registry + $this: bem--selector-to-string(&); + @include register-component(string.slice($this, 2, -1)); + } } diff --git a/projects/igniteui-angular/src/lib/core/styles/components/charts/_funnel-chart-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/charts/_funnel-chart-theme.scss index 645fb3e9da1..894a8b48ccc 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/charts/_funnel-chart-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/charts/_funnel-chart-theme.scss @@ -1,10 +1,15 @@ +@use '../../base' as *; +@use '../../themes/schemas' as *; +@use '../../typography/base' as *; +@use 'sass:map'; + //// /// @group themes /// @access private /// @author Marin Popov //// -/// @param {Map} $palette [$default-palette] - The palette used as basis for styling the component. +/// @param {Map} $palette [null] - The palette used as basis for styling the component. /// @param {Map} $schema [$light-schema] - The schema used as basis for styling the component. /// /// @param {List} $brushes [null] - Defines the palette from which automatically assigned series colors are selected. @@ -15,7 +20,6 @@ /// @param {Number} $outline-thickness [null] - Sets the thickness of outline around slices. /// @param {Color} $text-color - [null] Sets the Color used for the inner labels. /// -/// @requires $default-palette /// @requires $light-schema /// @requires apply-palette /// @requires extend @@ -25,7 +29,7 @@ /// // Pass the theme to the igx-css-vars mixin /// @include igx-css-vars($my-chart-theme); @function igx-funnel-chart-theme( - $palette: $default-palette, + $palette: null, $schema: $light-schema, $brushes: null, @@ -40,8 +44,8 @@ $selector: 'igx-funnel-chart'; $chart-schema: (); - @if map-has-key($schema, $name) { - $chart-schema: map-get($schema, $name); + @if map.has-key($schema, $name) { + $chart-schema: map.get($schema, $name); } @else { $chart-schema: $schema; } @@ -66,8 +70,8 @@ text-style: 'subtitle-1', )) { $name: 'funnel-chart'; - $outer-label-text-style: map-get($categories, 'outer-label-text-style'); - $text-style: map-get($categories, 'text-style'); + $outer-label-text-style: map.get($categories, 'outer-label-text-style'); + $text-style: map.get($categories, 'text-style'); $outer-label: igx-type-scale-category($type-scale, $outer-label-text-style); $text: igx-type-scale-category($type-scale, $text-style); diff --git a/projects/igniteui-angular/src/lib/core/styles/components/charts/_gauge-component.scss b/projects/igniteui-angular/src/lib/core/styles/components/charts/_gauge-component.scss index 87cd90ea433..56165200aef 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/charts/_gauge-component.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/charts/_gauge-component.scss @@ -1,3 +1,6 @@ +@use '../../base' as *; +@use 'sass:string'; + //// /// @group components /// @access private @@ -6,14 +9,17 @@ /// @requires {mixin} bem-elem /// @requires {mixin} bem-mod //// -@include b(linear-gauge) { - // Register the component in the component registry - $this: bem--selector-to-string(&); - @include register-component(str-slice($this, 2, -1)); -} -@include b(radial-gauge) { - // Register the component in the component registry - $this: bem--selector-to-string(&); - @include register-component(str-slice($this, 2, -1)); +@mixin component { + @include b(linear-gauge) { + // Register the component in the component registry + $this: bem--selector-to-string(&); + @include register-component(string.slice($this, 2, -1)); + } + + @include b(radial-gauge) { + // Register the component in the component registry + $this: bem--selector-to-string(&); + @include register-component(string.slice($this, 2, -1)); + } } diff --git a/projects/igniteui-angular/src/lib/core/styles/components/charts/_gauge-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/charts/_gauge-theme.scss index b31243987f0..1607be797d4 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/charts/_gauge-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/charts/_gauge-theme.scss @@ -1,10 +1,15 @@ +@use '../../base' as *; +@use '../../themes/schemas' as *; +@use '../../typography/base' as *; +@use 'sass:map'; + //// /// @group themes /// @access public /// @author Silvia Ivanova //// -/// @param {Map} $palette [$default-palette] - The palette used as basis for styling the component. +/// @param {Map} $palette [null] - The palette used as basis for styling the component. /// @param {Map} $schema [$light-schema] - The schema used as basis for styling the component. /// /// @param {Color} $backing-brush [null] - Sets the color to use to fill the backing of the linear gauge. @@ -27,7 +32,6 @@ /// @param {Number} $scale-stroke-thickness [null] - Sets the stroke thickness of the scale outline. /// @param {Color} $tick-brush [null] - Sets the color to use for the major tickmarks. /// @param {Number} $tick-stroke-thickness [null] - Sets the stroke thickness to use when rendering ticks. -/// @requires $default-palette /// @requires $light-schema /// @requires apply-palette /// @requires extend @@ -37,7 +41,7 @@ /// // Pass the theme to the igx-css-vars mixin /// @include igx-css-vars($custom-gauge-theme); @function igx-linear-gauge-theme( - $palette: $default-palette, + $palette: null, $schema: $light-schema, $rest... ) { @@ -45,8 +49,8 @@ $selector: 'igx-linear-gauge'; $chart-schema: (); - @if map-has-key($schema, $name) { - $chart-schema: map-get($schema, $name); + @if map.has-key($schema, $name) { + $chart-schema: map.get($schema, $name); } @else { $chart-schema: $schema; } @@ -63,7 +67,7 @@ ); } -/// @param {Map} $palette [$default-palette] - The palette used as basis for styling the component. +/// @param {Map} $palette [null] - The palette used as basis for styling the component. /// @param {Map} $schema [$light-schema] - The schema used as basis for styling the component. /// @param {Map} $width [null] - The width of the gauge in pixels, string (px) or percentage (%). /// @param {Map} $height [null] - The height of the gauge in pixels, string (px) or percentage (%). @@ -82,7 +86,6 @@ /// @param {Number} $tick-stroke-thickness [null] - Sets the stroke thickness to use when rendering ticks. /// @param {Color} $needle-pivot-brush [null] - Sets the color of the needle pivot point. /// @param {Color} $needle-pivot-outline [null] - Sets the outline color of the needle pivot point. -/// @requires $default-palette /// @requires $light-schema /// @requires apply-palette /// @requires extend @@ -92,7 +95,7 @@ /// // Pass the theme to the igx-css-vars mixin /// @include igx-css-vars($custom-gauge-theme); @function igx-radial-gauge-theme( - $palette: $default-palette, + $palette: null, $schema: $light-schema, $rest... ) { @@ -100,8 +103,8 @@ $selector: 'igx-radial-gauge'; $chart-schema: (); - @if map-has-key($schema, $name) { - $chart-schema: map-get($schema, $name); + @if map.has-key($schema, $name) { + $chart-schema: map.get($schema, $name); } @else { $chart-schema: $schema; } diff --git a/projects/igniteui-angular/src/lib/core/styles/components/charts/_geo-map-component.scss b/projects/igniteui-angular/src/lib/core/styles/components/charts/_geo-map-component.scss index d7504024668..3e986e34b83 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/charts/_geo-map-component.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/charts/_geo-map-component.scss @@ -1,3 +1,6 @@ +@use '../../base' as *; +@use 'sass:string'; + //// /// @group components /// @access private @@ -6,8 +9,11 @@ /// @requires {mixin} bem-elem /// @requires {mixin} bem-mod //// -@include b(geo-map) { - // Register the component in the component registry - $this: bem--selector-to-string(&); - @include register-component(str-slice($this, 2, -1)); + +@mixin component { + @include b(geo-map) { + // Register the component in the component registry + $this: bem--selector-to-string(&); + @include register-component(string.slice($this, 2, -1)); + } } diff --git a/projects/igniteui-angular/src/lib/core/styles/components/charts/_geo-map-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/charts/_geo-map-theme.scss index d0ab1967326..e88a77dbe14 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/charts/_geo-map-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/charts/_geo-map-theme.scss @@ -1,13 +1,17 @@ +@use '../../base' as *; +@use '../../themes/schemas' as *; +@use '../../typography/base' as *; +@use 'sass:map'; + //// /// @group themes /// @access private /// @author Dilyana Dimova //// -/// @param {Map} $palette [$default-palette] - The palette used as basis for styling the component. +/// @param {Map} $palette [null] - The palette used as basis for styling the component. /// @param {Map} $schema [$light-schema] - The schema used as basis for styling the component. /// @param {String} $plot-area-background [null]- Gets or sets the brush used as the background for the current Map object's plot area. -/// @requires $default-palette /// @requires $light-schema /// @requires apply-palette /// @requires extend @@ -17,7 +21,7 @@ /// // Pass the theme to the igx-css-vars mixin /// @include igx-css-vars($my-map-theme); @function igx-geo-map-theme( - $palette: $default-palette, + $palette: null, $schema: $light-schema, $plot-area-background: null ) { @@ -25,8 +29,8 @@ $selector: 'igx-geographic-map'; $chart-schema: (); - @if map-has-key($schema, $name) { - $chart-schema: map-get($schema, $name); + @if map.has-key($schema, $name) { + $chart-schema: map.get($schema, $name); } @else { $chart-schema: $schema; } diff --git a/projects/igniteui-angular/src/lib/core/styles/components/charts/_graph-component.scss b/projects/igniteui-angular/src/lib/core/styles/components/charts/_graph-component.scss index d1398873f85..d350a43dcbe 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/charts/_graph-component.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/charts/_graph-component.scss @@ -1,3 +1,6 @@ +@use '../../base' as *; +@use 'sass:string'; + //// /// @group components /// @access private @@ -6,8 +9,11 @@ /// @requires {mixin} bem-elem /// @requires {mixin} bem-mod //// -@include b(bullet-graph) { - // Register the component in the component registry - $this: bem--selector-to-string(&); - @include register-component(str-slice($this, 2, -1)); + +@mixin component { + @include b(bullet-graph) { + // Register the component in the component registry + $this: bem--selector-to-string(&); + @include register-component(string.slice($this, 2, -1)); + } } diff --git a/projects/igniteui-angular/src/lib/core/styles/components/charts/_graph-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/charts/_graph-theme.scss index be39cc6e90e..9d2edbfa822 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/charts/_graph-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/charts/_graph-theme.scss @@ -1,10 +1,15 @@ +@use '../../base' as *; +@use '../../themes/schemas' as *; +@use '../../typography/base' as *; +@use 'sass:map'; + //// /// @group themes /// @access public /// @author Simeon Simeonoff //// -/// @param {Map} $palette [$default-palette] - The palette used as basis for styling the component. +/// @param {Map} $palette [null] - The palette used as basis for styling the component. /// @param {Map} $schema [$light-schema] - The schema used as basis for styling the component. /// @param {Color} $backing-brush [null] - Sets the brush to use to fill the backing of the bullet graph. /// @param {Color} $backing-outline [null] - Sets the brush to use for the outline of the backing. @@ -26,7 +31,6 @@ /// @param {Color} $value-brush [null] - Sets the brush to use for the actual value element. /// @param {Color} $value-outline [null] - Sets the brush to use for the outline of actual value element. /// @param {Number} $value-stroke-thickness [null] - Sets the stroke thickness to use when rendering single actual value element. -/// @requires $default-palette /// @requires $light-schema /// @requires apply-palette /// @requires extend @@ -36,7 +40,7 @@ /// // Pass the theme to the igx-css-vars mixin /// @include igx-css-vars($my-chart-theme); @function igx-bullet-graph-theme( - $palette: $default-palette, + $palette: null, $schema: $light-schema, $backing-brush: null, @@ -64,8 +68,8 @@ $selector: 'igx-bullet-graph'; $chart-schema: (); - @if map-has-key($schema, $name) { - $chart-schema: map-get($schema, $name); + @if map.has-key($schema, $name) { + $chart-schema: map.get($schema, $name); } @else { $chart-schema: $schema; } diff --git a/projects/igniteui-angular/src/lib/core/styles/components/charts/_index.scss b/projects/igniteui-angular/src/lib/core/styles/components/charts/_index.scss new file mode 100644 index 00000000000..89e9301098b --- /dev/null +++ b/projects/igniteui-angular/src/lib/core/styles/components/charts/_index.scss @@ -0,0 +1,12 @@ +@forward 'category-chart-theme'; +@forward 'data-chart-theme'; +@forward 'doughnut-chart-theme'; +@forward 'financial-chart-theme'; +@forward 'funnel-chart-theme'; +@forward 'gauge-theme'; +@forward 'geo-map-theme'; +@forward 'graph-theme'; +@forward 'pie-chart-theme'; +@forward 'shape-chart-theme'; +@forward 'shape-chart-theme'; +@forward 'sparkline-theme'; diff --git a/projects/igniteui-angular/src/lib/core/styles/components/charts/_pie-chart-component.scss b/projects/igniteui-angular/src/lib/core/styles/components/charts/_pie-chart-component.scss index 27c4bdccd97..c3e2058be51 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/charts/_pie-chart-component.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/charts/_pie-chart-component.scss @@ -1,3 +1,6 @@ +@use '../../base' as *; +@use 'sass:string'; + //// /// @group components /// @access private @@ -6,8 +9,11 @@ /// @requires {mixin} bem-elem /// @requires {mixin} bem-mod //// -@include b(pie-chart) { - // Register the component in the component registry - $this: bem--selector-to-string(&); - @include register-component(str-slice($this, 2, -1)); + +@mixin component { + @include b(pie-chart) { + // Register the component in the component registry + $this: bem--selector-to-string(&); + @include register-component(string.slice($this, 2, -1)); + } } diff --git a/projects/igniteui-angular/src/lib/core/styles/components/charts/_pie-chart-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/charts/_pie-chart-theme.scss index 8641087e02e..7d53b43745b 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/charts/_pie-chart-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/charts/_pie-chart-theme.scss @@ -1,10 +1,15 @@ +@use '../../base' as *; +@use '../../themes/schemas' as *; +@use '../../typography/base' as *; +@use 'sass:map'; + //// /// @group themes /// @access public /// @author Simeon Simeonoff //// -/// @param {Map} $palette [$default-palette] - The palette used as basis for styling the component. +/// @param {Map} $palette [null] - The palette used as basis for styling the component. /// @param {Map} $schema [$light-schema] - The schema used as basis for styling the component. /// @param {List} $brushes [series] - Defines the palette from which automatically assigned series colors are selected. /// @param {List} $outlines [series] - Defines the palette from which automatically assigned series outline colors are selected. @@ -16,7 +21,6 @@ /// @param {String} $leader-line-type [null] - Sets what type of leader lines will be used for the outside end labels. Valid values are: 'straight', 'spline', and 'arc'. /// @param {String} $leader-line-visibility [null] - Sets whether the leader lines are visible. Valid values are: 'visible' and 'collapsed'. /// @param {Number} $radius-factor [null] - Sets the scaling factor of the chart's radius. Value between 0 and 1. -/// @requires $default-palette /// @requires $light-schema /// @requires apply-palette /// @requires extend @@ -26,7 +30,7 @@ /// // Pass the theme to the igx-css-vars mixin /// @include igx-css-vars($my-chart-theme); @function igx-pie-chart-theme( - $palette: $default-palette, + $palette: null, $schema: $light-schema, $brushes: null, @@ -44,8 +48,8 @@ $selector: 'igx-pie-chart'; $chart-schema: (); - @if map-has-key($schema, $name) { - $chart-schema: map-get($schema, $name); + @if map.has-key($schema, $name) { + $chart-schema: map.get($schema, $name); } @else { $chart-schema: $schema; } diff --git a/projects/igniteui-angular/src/lib/core/styles/components/charts/_shape-chart-component.scss b/projects/igniteui-angular/src/lib/core/styles/components/charts/_shape-chart-component.scss index c62b57b48f1..c0504a7cb32 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/charts/_shape-chart-component.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/charts/_shape-chart-component.scss @@ -1,3 +1,6 @@ +@use '../../base' as *; +@use 'sass:string'; + //// /// @group components /// @access private @@ -6,8 +9,11 @@ /// @requires {mixin} bem-elem /// @requires {mixin} bem-mod //// -@include b(shape-chart) { - // Register the component in the component registry - $this: bem--selector-to-string(&); - @include register-component(str-slice($this, 2, -1)); + +@mixin component { + @include b(shape-chart) { + // Register the component in the component registry + $this: bem--selector-to-string(&); + @include register-component(string.slice($this, 2, -1)); + } } diff --git a/projects/igniteui-angular/src/lib/core/styles/components/charts/_shape-chart-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/charts/_shape-chart-theme.scss index d08811cacdf..97ab99c75ca 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/charts/_shape-chart-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/charts/_shape-chart-theme.scss @@ -1,10 +1,15 @@ +@use '../../base' as *; +@use '../../themes/schemas' as *; +@use '../../typography/base' as *; +@use 'sass:map'; + //// /// @group themes /// @access public /// @author Simeon Simeonoff //// -/// @param {Map} $palette [$default-palette] - The palette used as basis for styling the component. +/// @param {Map} $palette [null] - The palette used as basis for styling the component. /// @param {Map} $schema [$light-schema] - The schema used as basis for styling the component. /// @param {List} $margin [null] - Sets the margin (top, right, bottom, left) of the chart content. /// @param {Color} $title-alignment [null] - Sets horizontal alignment which determines the title position, relative to the left and right edges of the control. @@ -46,7 +51,6 @@ /// @param {String} $y-axis-title-alignment [null] - Sets Horizontal alignment of the Y-axis title. /// @param {Color} $y-axis-title-color [null] - Sets color of title on the Y-axis. /// @param {List} $y-axis-title-margin [null] - Sets the margin around the title on the Y-axis. -/// @requires $default-palette /// @requires $light-schema /// @requires apply-palette /// @requires extend @@ -56,7 +60,7 @@ /// // Pass the theme to the igx-css-vars mixin /// @include igx-css-vars($my-chart-theme); @function igx-shape-chart-theme( - $palette: $default-palette, + $palette: null, $schema: $light-schema, $margin: null, $title-text-color: null, @@ -101,20 +105,20 @@ $selector: 'igx-shape-chart'; $chart-schema: (); - @if map-has-key($schema, $name) { - $chart-schema: map-get($schema, $name); + @if map.has-key($schema, $name) { + $chart-schema: map.get($schema, $name); } @else { $chart-schema: $schema; } $theme: apply-palette($chart-schema, $palette); - $margin-default: map-get($theme, 'margin'); - $title-margin-default: map-get($theme, 'title-margin'); - $subtitle-margin-default: map-get($theme, 'subtitle-margin'); - $x-axis-label-margin-default: map-get($theme, 'x-axis-label-margin'); - $y-axis-label-margin-default: map-get($theme, 'y-axis-label-margin'); - $x-axis-title-margin-default: map-get($theme, 'x-axis-title-margin'); - $y-axis-title-margin-default: map-get($theme, 'y-axis-title-margin'); + $margin-default: map.get($theme, 'margin'); + $title-margin-default: map.get($theme, 'title-margin'); + $subtitle-margin-default: map.get($theme, 'subtitle-margin'); + $x-axis-label-margin-default: map.get($theme, 'x-axis-label-margin'); + $y-axis-label-margin-default: map.get($theme, 'y-axis-label-margin'); + $x-axis-title-margin-default: map.get($theme, 'x-axis-title-margin'); + $y-axis-title-margin-default: map.get($theme, 'y-axis-title-margin'); @if not($margin) { $margin: $margin-default; @@ -226,12 +230,12 @@ 'y-axis-title-text-style': 'h3', )) { $name: 'shape-chart'; - $title: map-get($categories, 'title'); - $subtitle: map-get($categories, 'subtitle'); - $x-axis-title-text-style: map-get($categories, 'x-axis-title-text-style'); - $x-axis-label-text-style: map-get($categories, 'x-axis-label-text-style'); - $y-axis-title-text-style: map-get($categories, 'y-axis-title-text-style'); - $y-axis-label-text-style: map-get($categories, 'y-axis-label-text-style'); + $title: map.get($categories, 'title'); + $subtitle: map.get($categories, 'subtitle'); + $x-axis-title-text-style: map.get($categories, 'x-axis-title-text-style'); + $x-axis-label-text-style: map.get($categories, 'x-axis-label-text-style'); + $y-axis-title-text-style: map.get($categories, 'y-axis-title-text-style'); + $y-axis-label-text-style: map.get($categories, 'y-axis-label-text-style'); $title-styles: igx-type-scale-category($type-scale, $title); $subtitle-styles: igx-type-scale-category($type-scale, $subtitle); diff --git a/projects/igniteui-angular/src/lib/core/styles/components/charts/_sparkline-component.scss b/projects/igniteui-angular/src/lib/core/styles/components/charts/_sparkline-component.scss index 3e9367e9cc5..d3c792f4d77 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/charts/_sparkline-component.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/charts/_sparkline-component.scss @@ -1,3 +1,6 @@ +@use '../../base' as *; +@use 'sass:string'; + //// /// @group components /// @access private @@ -6,8 +9,11 @@ /// @requires {mixin} bem-elem /// @requires {mixin} bem-mod //// -@include b(sparkline) { - // Register the component in the component registry - $this: bem--selector-to-string(&); - @include register-component(str-slice($this, 2, -1)); + +@mixin component { + @include b(sparkline) { + // Register the component in the component registry + $this: bem--selector-to-string(&); + @include register-component(string.slice($this, 2, -1)); + } } diff --git a/projects/igniteui-angular/src/lib/core/styles/components/charts/_sparkline-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/charts/_sparkline-theme.scss index 0f2ad6a0603..7321b10fc18 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/charts/_sparkline-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/charts/_sparkline-theme.scss @@ -1,10 +1,15 @@ +@use '../../base' as *; +@use '../../themes/schemas' as *; +@use '../../typography/base' as *; +@use 'sass:map'; + //// /// @group themes /// @access public /// @author Simeon Simeonoff //// -/// @param {Map} $palette [$default-palette] - The palette used as basis for styling the component. +/// @param {Map} $palette [null] - The palette used as basis for styling the component. /// @param {Map} $schema [$light-schema] - The schema used as basis for styling the component. /// /// @param {Color} $brush [null] - Sets the sparkline brush. @@ -27,7 +32,6 @@ /// @param {Color} $horizontal-axis-brush [null] - Sets the horizontal axis line brush of the sparkline. /// @param {Color} $vertical-axis-brush [null] - Sets the vertical axis line brush of the sparkline. /// @param {Color} $normal-range-fill [null] - Sets the normal range brush of the sparkline. -/// @requires $default-palette /// @requires $light-schema /// @requires apply-palette /// @requires extend @@ -37,7 +41,7 @@ /// // Pass the theme to the igx-css-vars mixin /// @include igx-css-vars($my-sparkline-theme); @function igx-sparkline-theme( - $palette: $default-palette, + $palette: null, $schema: $light-schema, $brush: null, @@ -65,8 +69,8 @@ $selector: 'igx-sparkline'; $sparkline-schema: (); - @if map-has-key($schema, $name) { - $sparkline-schema: map-get($schema, $name); + @if map.has-key($schema, $name) { + $sparkline-schema: map.get($schema, $name); } @else { $sparkline-schema: $schema; } diff --git a/projects/igniteui-angular/src/lib/core/styles/components/checkbox/_checkbox-component.scss b/projects/igniteui-angular/src/lib/core/styles/components/checkbox/_checkbox-component.scss index 39d3e99dc9b..97ed939f316 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/checkbox/_checkbox-component.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/checkbox/_checkbox-component.scss @@ -1,3 +1,6 @@ +@use '../../base' as *; +@use 'sass:string'; + //// /// @group components /// @author Simeon Simeonoff @@ -5,164 +8,169 @@ /// @requires {mixin} bem-elem /// @requires {mixin} bem-mod //// -@include b(igx-checkbox) { - $block: bem--selector-to-string(&); - @include register-component('igx-checkbox'); +@mixin component { + @include b(igx-checkbox) { + $this: bem--selector-to-string(&); + @include register-component( + $name: string.slice($this, 2, -1), + $deps: () + ); - @extend %cbx-display !optional; + @extend %cbx-display !optional; - &:hover { - @include e(ripple) { - @extend %cbx-ripple--hover !optional; - @extend %cbx-ripple--hover-unchecked !optional; + &:hover { + @include e(ripple) { + @extend %cbx-ripple--hover !optional; + @extend %cbx-ripple--hover-unchecked !optional; + } } - } - &:active { - @include e(ripple) { - @extend %cbx-ripple--hover !optional; - @extend %cbx-ripple--hover-unchecked !optional; - @extend %cbx-ripple--pressed !optional; + &:active { + @include e(ripple) { + @extend %cbx-ripple--hover !optional; + @extend %cbx-ripple--hover-unchecked !optional; + @extend %cbx-ripple--pressed !optional; + } } - } - - @include e(input) { - @extend %cbx-input !optional; - } - - @include e(label) { - @extend %cbx-label !optional; - @extend %cbx-label-pos--after !optional; - } - @include e(label, $m: before) { - @extend %cbx-label !optional; - @extend %cbx-label-pos--before !optional; - } + @include e(input) { + @extend %cbx-input !optional; + } - @include e(composite-wrapper) { - @extend %cbx-composite-wrapper !optional; - } + @include e(label) { + @extend %cbx-label !optional; + @extend %cbx-label-pos--after !optional; + } - @include e(composite) { - @extend %cbx-composite !optional; - } + @include e(label, $m: before) { + @extend %cbx-label !optional; + @extend %cbx-label-pos--before !optional; + } - @include e(composite-mark) { - @extend %cbx-composite-mark !optional; - } + @include e(composite-wrapper) { + @extend %cbx-composite-wrapper !optional; + } - @include e(ripple) { - @extend %cbx-ripple !optional; - } + @include e(composite) { + @extend %cbx-composite !optional; + } - @include m(focused) { - @extend %igx-checkbox--focused !optional; + @include e(composite-mark) { + @extend %cbx-composite-mark !optional; + } @include e(ripple) { - @extend %cbx-ripple--focused !optional; + @extend %cbx-ripple !optional; } - } - @include mx(focused, checked) { - @extend %igx-checkbox--focused-checked !optional; - } + @include m(focused) { + @extend %igx-checkbox--focused !optional; - @include m(indeterminate) { - @extend %igx-checkbox--indeterminate !optional; - - @include e(composite) { - @extend %cbx-composite--x !optional; + @include e(ripple) { + @extend %cbx-ripple--focused !optional; + } } - @include e(composite-mark) { - @extend %cbx-composite-mark--in !optional; + @include mx(focused, checked) { + @extend %igx-checkbox--focused-checked !optional; } - &:hover { - @include e(ripple) { - @extend %cbx-ripple--hover !optional; - @extend %cbx-ripple--hover-checked !optional; + @include m(indeterminate) { + @extend %igx-checkbox--indeterminate !optional; + + @include e(composite) { + @extend %cbx-composite--x !optional; } - } - &:active { - @include e(ripple) { - @extend %cbx-ripple--hover !optional; - @extend %cbx-ripple--hover-checked !optional; - @extend %cbx-ripple--pressed !optional; + @include e(composite-mark) { + @extend %cbx-composite-mark--in !optional; } - } - } - @include m(checked) { - @include e(composite) { - @extend %cbx-composite--x !optional; - } + &:hover { + @include e(ripple) { + @extend %cbx-ripple--hover !optional; + @extend %cbx-ripple--hover-checked !optional; + } + } - @include e(composite-mark) { - @extend %cbx-composite-mark--x !optional; + &:active { + @include e(ripple) { + @extend %cbx-ripple--hover !optional; + @extend %cbx-ripple--hover-checked !optional; + @extend %cbx-ripple--pressed !optional; + } + } } - &:hover { - @include e(ripple) { - @extend %cbx-ripple--hover !optional; - @extend %cbx-ripple--hover-checked !optional; + @include m(checked) { + @include e(composite) { + @extend %cbx-composite--x !optional; } - } - &:active { - @include e(ripple) { - @extend %cbx-ripple--hover !optional; - @extend %cbx-ripple--hover-checked !optional; - @extend %cbx-ripple--pressed !optional; + @include e(composite-mark) { + @extend %cbx-composite-mark--x !optional; } - } - } - @include m(disabled) { - @extend %cbx-display--disabled !optional; + &:hover { + @include e(ripple) { + @extend %cbx-ripple--hover !optional; + @extend %cbx-ripple--hover-checked !optional; + } + } - @include e(label) { - @extend %cbx-label--disabled !optional; + &:active { + @include e(ripple) { + @extend %cbx-ripple--hover !optional; + @extend %cbx-ripple--hover-checked !optional; + @extend %cbx-ripple--pressed !optional; + } + } } - @include e(label, $m: before) { - @extend %cbx-label--disabled !optional; - } + @include m(disabled) { + @extend %cbx-display--disabled !optional; - @include e(composite) { - @extend %cbx-composite--disabled !optional; + @include e(label) { + @extend %cbx-label--disabled !optional; + } + + @include e(label, $m: before) { + @extend %cbx-label--disabled !optional; + } + + @include e(composite) { + @extend %cbx-composite--disabled !optional; + } } - } - @include m(plain) { - @extend %cbx-display--plain !optional; - } + @include m(plain) { + @extend %cbx-display--plain !optional; + } - @include mx(focused, checked) { - @include e(ripple) { - @extend %cbx-ripple--focused !optional; - @extend %cbx-ripple--focused-checked !optional; + @include mx(focused, checked) { + @include e(ripple) { + @extend %cbx-ripple--focused !optional; + @extend %cbx-ripple--focused-checked !optional; + } } - } - @include mx(focused, indeterminate) { - @include e(ripple) { - @extend %cbx-ripple--focused !optional; - @extend %cbx-ripple--focused-checked !optional; + @include mx(focused, indeterminate) { + @include e(ripple) { + @extend %cbx-ripple--focused !optional; + @extend %cbx-ripple--focused-checked !optional; + } } - } - @include mx(indeterminate, disabled) { - @include e(composite) { - @extend %cbx-composite--x--disabled !optional; + @include mx(indeterminate, disabled) { + @include e(composite) { + @extend %cbx-composite--x--disabled !optional; + } } - } - @include mx(checked, disabled) { - @include e(composite) { - @extend %cbx-composite--x--disabled !optional; + @include mx(checked, disabled) { + @include e(composite) { + @extend %cbx-composite--x--disabled !optional; + } } } } diff --git a/projects/igniteui-angular/src/lib/core/styles/components/checkbox/_checkbox-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/checkbox/_checkbox-theme.scss index 2a931b133cd..3dc457cbc73 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/checkbox/_checkbox-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/checkbox/_checkbox-theme.scss @@ -1,6 +1,10 @@ +@use '../../base' as *; +@use '../../typography/base' as *; +@use '../../themes/schemas' as *; +@use '../ripple/ripple-component' as *; +@use '../ripple/ripple-theme' as *; +@use 'sass:map'; @use 'sass:math'; -@import '../ripple/ripple-theme'; -@import '../ripple/ripple-component'; //// /// @group themes @@ -49,8 +53,8 @@ $name: 'igx-checkbox'; $checkbox-schema: (); - @if map-has-key($schema, $name) { - $checkbox-schema: map-get($schema, $name); + @if map.has-key($schema, $name) { + $checkbox-schema: map.get($schema, $name); } @else { $checkbox-schema: $schema; } @@ -58,11 +62,11 @@ $theme: apply-palette($checkbox-schema, $palette); $border-radius: round-borders( - if($border-radius, $border-radius, map-get($checkbox-schema, 'border-radius')), 0, 10px + if($border-radius, $border-radius, map.get($checkbox-schema, 'border-radius')), 0, 10px ); $border-radius-ripple: round-borders( - if($border-radius-ripple, $border-radius-ripple, map-get($checkbox-schema, 'border-radius-ripple')), 0, 24px + if($border-radius-ripple, $border-radius-ripple, map.get($checkbox-schema, 'border-radius-ripple')), 0, 24px ); @return extend($theme, ( @@ -90,7 +94,7 @@ /// @requires igx-ripple-theme /// @requires rem /// @requires em -/// @requires --var +/// @requires var-get @mixin igx-checkbox($theme) { @include igx-css-vars($theme); @@ -100,26 +104,26 @@ // It is under the name of $cbx-size $size: em(20px); $size-bs: em(14px); - $checkbox-radius: private-div($size, 2); + $checkbox-radius: math.div($size, 2); - $variant: map-get($theme, variant); + $variant: map.get($theme, variant); $bootstrap-theme: $variant == 'bootstrap'; - $size: map-get(( + $size: map.get(( material: $size, fluent: $size, bootstrap: $size-bs, indigo-design: $size, ), $variant); - $border-width: map-get(( + $border-width: map.get(( material: 2px, fluent: 1px, bootstrap: 1px, indigo-design: 2px, ), $variant); - $ripple-display: map-get(( + $ripple-display: map.get(( material: block, fluent: none, bootstrap: none, @@ -128,14 +132,14 @@ $label-margin: em(8px); - $mark-stroke: map-get(( + $mark-stroke: map.get(( material: 3, fluent: 1, bootstrap: 2, indigo-design: 3, ), $variant); - $mark-offset: map-get(( + $mark-offset: map.get(( material: 0, fluent: -1px, bootstrap: 0, @@ -143,13 +147,14 @@ ), $variant); $mark-length: 24; - $mark-x-factor: private-div($mark-stroke, $mark-length); + $mark-x-factor: math.div($mark-stroke, $mark-length); $ripple-size: em(48px); - $ripple-radius: private-div($ripple-size, 2); + $ripple-radius: math.div($ripple-size, 2); $ripple-theme: igx-ripple-theme( - $color: --var($theme, 'fill-color') + $schema: $light-schema, + $color: var-get($theme, 'fill-color') ); $left: if-ltr(left, right); @@ -193,8 +198,8 @@ min-width: $size; border-width: rem($border-width); border-style: solid; - border-color: --var($theme, 'empty-color'); - border-radius: --var($theme, 'border-radius'); + border-color: var-get($theme, 'empty-color'); + border-radius: var-get($theme, 'border-radius'); -webkit-tap-highlight-color: transparent; transition: border-color .2s $ease-out-quad; overflow: hidden; @@ -211,21 +216,21 @@ } %cbx-composite--x { - border-color: --var($theme, 'fill-color'); - background: --var($theme, 'fill-color'); + border-color: var-get($theme, 'fill-color'); + background: var-get($theme, 'fill-color'); &::after { - background: --var($theme, 'fill-color'); + background: var-get($theme, 'fill-color'); } } %cbx-composite--disabled { - border-color: --var($theme, 'disabled-color'); + border-color: var-get($theme, 'disabled-color'); background: transparent; @if $bootstrap-theme { %cbx-composite-mark { - stroke: --var($theme, 'empty-color'); + stroke: var-get($theme, 'empty-color'); } } } @@ -234,20 +239,20 @@ @if $bootstrap-theme { background: transparent; } @else { - background: --var($theme, 'disabled-color'); + background: var-get($theme, 'disabled-color'); } &::after { @if $bootstrap-theme { background: transparent; } @else { - background: --var($theme, 'disabled-color'); + background: var-get($theme, 'disabled-color'); } } @if $bootstrap-theme { %cbx-composite-mark--x { - stroke: --var($theme, 'empty-color'); + stroke: var-get($theme, 'empty-color'); } } } @@ -258,7 +263,7 @@ right: 0; bottom: 0; left: 0; - stroke: --var($theme, 'tick-color'); + stroke: var-get($theme, 'tick-color'); stroke-linecap: square; stroke-width: $mark-stroke; stroke-dasharray: $mark-length; @@ -290,7 +295,7 @@ %cbx-label { display: inline-block; - color: --var($theme, 'label-color'); + color: var-get($theme, 'label-color'); cursor: pointer; user-select: none; word-wrap: break-all; @@ -317,7 +322,7 @@ } %cbx-label--disabled { - color: --var($theme, 'disabled-color-label'); + color: var-get($theme, 'disabled-color-label'); } %cbx-ripple { @@ -329,7 +334,7 @@ right: calc(100% - #{$ripple-radius} - #{$checkbox-radius}); width: $ripple-size; height: $ripple-size; - border-radius: --var($theme, 'border-radius-ripple'); + border-radius: var-get($theme, 'border-radius-ripple'); overflow: hidden; pointer-events: none; filter: opacity(1); @@ -346,7 +351,7 @@ position: absolute; top: -$focus-outline-offset-top; left: -$focus-outline-offset-left; - box-shadow: 0 0 0 1px --var($theme, 'focus-outline-color'); + box-shadow: 0 0 0 1px var-get($theme, 'focus-outline-color'); width: calc(100% + (#{$focus-outline-offset-left} * 2)); height: calc(100% + (#{$focus-outline-offset-top} * 2)); } @@ -354,15 +359,15 @@ @if $variant == 'bootstrap' { %cbx-composite { - border-radius: --var($theme, 'border-radius'); - box-shadow: 0 0 0 2px --var($theme, 'focus-outline-color'); + border-radius: var-get($theme, 'border-radius'); + box-shadow: 0 0 0 2px var-get($theme, 'focus-outline-color'); } } @if $variant == 'indigo-design' { %cbx-composite { - border-radius: --var($theme, 'border-radius'); - box-shadow: 0 0 0 3px --var($theme, 'focus-outline-color'); + border-radius: var-get($theme, 'border-radius'); + box-shadow: 0 0 0 3px var-get($theme, 'focus-outline-color'); } } } @@ -370,20 +375,20 @@ %igx-checkbox--focused-checked { @if $variant == 'indigo-design' { %cbx-composite { - border-radius: --var($theme, 'border-radius'); - box-shadow: 0 0 0 3px --var($theme, 'focus-outline-color-focused'); + border-radius: var-get($theme, 'border-radius'); + box-shadow: 0 0 0 3px var-get($theme, 'focus-outline-color-focused'); } } } %cbx-ripple--focused { - background: --var($theme, 'empty-color'); + background: var-get($theme, 'empty-color'); transition: background .2s $ease-out-quad; opacity: .12; } %cbx-ripple--focused-checked { - background: --var($theme, 'fill-color'); + background: var-get($theme, 'fill-color'); } %cbx-ripple--hover { @@ -400,13 +405,13 @@ %cbx-ripple--hover-unchecked { &::after { - background: --var($theme, 'empty-color'); + background: var-get($theme, 'empty-color'); } } %cbx-ripple--hover-checked { &::after { - background: --var($theme, 'fill-color'); + background: var-get($theme, 'fill-color'); } } @@ -436,7 +441,7 @@ $type-scale, $categories: (label: 'subtitle-1') ) { - $label: map-get($categories, 'label'); + $label: map.get($categories, 'label'); %cbx-label { @include igx-type-style($type-scale, $label) { diff --git a/projects/igniteui-angular/src/lib/core/styles/components/chip/_chip-component.scss b/projects/igniteui-angular/src/lib/core/styles/components/chip/_chip-component.scss index 106b7a4aa00..d30b4af0874 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/chip/_chip-component.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/chip/_chip-component.scss @@ -1,4 +1,7 @@ -//// Chips +@use '../../base' as *; +@use 'sass:string'; + +//// Chip /// @group components /// @author Marin Popov /// @requires {mixin} bem-block @@ -6,80 +9,85 @@ /// @requires {mixin} bem-mod //// -@include b(igx-chip-area) { - @extend %igx-chip-area !optional; -} - -@include b(igx-chip) { - $this: bem--selector-to-string(&); - @include register-component(str-slice($this, 2, -1)); - - @extend %igx-chip !optional; - - @include e(item) { - @extend %igx-chip__item !optional; +@mixin component { + @include b(igx-chip-area) { + @extend %igx-chip-area !optional; } - @include e(item, $m: 'selected') { - @extend %igx-chip__item--selected !optional; - } + @include b(igx-chip) { + $this: bem--selector-to-string(&); + @include register-component( + $name: string.slice($this, 2, -1), + $deps: ( + igx-icon, + ) + ); - @include e(content) { - @extend %igx-chip__content !optional; - } + @extend %igx-chip !optional; - @include e(select) { - @extend %igx-chip__select !optional; - } + @include e(item) { + @extend %igx-chip__item !optional; + } - @include e(select, $m: 'hidden') { - @extend %igx-chip__select !optional; - @extend %igx-chip__select--hidden !optional; - } + @include e(item, $m: 'selected') { + @extend %igx-chip__item--selected !optional; + } - @include e(remove) { - @extend %igx-chip__remove !optional; - } + @include e(content) { + @extend %igx-chip__content !optional; + } - @include e(ghost) { - @extend %igx-chip__ghost !optional; - } + @include e(select) { + @extend %igx-chip__select !optional; + } - @include e(ghost, $m: cosy) { - @extend %igx-chip__ghost--cosy !optional; - } + @include e(select, $m: 'hidden') { + @extend %igx-chip__select !optional; + @extend %igx-chip__select--hidden !optional; + } - @include e(ghost, $m: compact) { - @extend %igx-chip__ghost--compact !optional; - } + @include e(remove) { + @extend %igx-chip__remove !optional; + } - @include m(cosy) { - @extend %igx-chip--cosy !optional; + @include e(ghost) { + @extend %igx-chip__ghost !optional; + } - @include e(item) { - @extend %igx-chip__item--cosy !optional; + @include e(ghost, $m: cosy) { + @extend %igx-chip__ghost--cosy !optional; } - @include e(content) { - @extend %igx-chip__content--cosy !optional; + @include e(ghost, $m: compact) { + @extend %igx-chip__ghost--compact !optional; } - } - @include m(compact) { - @extend %igx-chip--compact !optional; + @include m(cosy) { + @extend %igx-chip--cosy !optional; - @include e(item) { - @extend %igx-chip__item--compact !optional; + @include e(item) { + @extend %igx-chip__item--cosy !optional; + } + + @include e(content) { + @extend %igx-chip__content--cosy !optional; + } } - @include e(content) { - @extend %igx-chip__content--compact !optional; + @include m(compact) { + @extend %igx-chip--compact !optional; + + @include e(item) { + @extend %igx-chip__item--compact !optional; + } + + @include e(content) { + @extend %igx-chip__content--compact !optional; + } } - } - @include m(disabled) { - @extend %igx-chip--disabled !optional; + @include m(disabled) { + @extend %igx-chip--disabled !optional; + } } } - - diff --git a/projects/igniteui-angular/src/lib/core/styles/components/chip/_chip-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/chip/_chip-theme.scss index 061c265d940..afb02da0ee4 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/chip/_chip-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/chip/_chip-theme.scss @@ -1,3 +1,9 @@ +@use '../../base' as *; +@use '../../themes/schemas' as *; +@use '../../typography/base' as *; +@use 'sass:map'; +@use 'sass:meta'; + //// /// @group themes /// @access public @@ -91,8 +97,8 @@ $selector: 'igx-chip, .igx-chip__ghost, .igx-chip__ghost--compact, .igx-chip__ghost--cosy'; $chip-schema: (); - @if map-has-key($schema, $name) { - $chip-schema: map-get($schema, $name); + @if map.has-key($schema, $name) { + $chip-schema: map.get($schema, $name); } @else { $chip-schema: $schema; } @@ -100,7 +106,7 @@ $theme: apply-palette($chip-schema, $palette); $border-radius: round-borders( - if($border-radius, $border-radius, map-get($chip-schema, 'border-radius')), 0, 16px + if($border-radius, $border-radius, map.get($chip-schema, 'border-radius')), 0, 16px ); @if not($text-color) and $background { @@ -110,7 +116,7 @@ @if not($hover-background) and $background { $luminance: luminance($background); - @if type-of($luminance) == 'color' and $luminance + .05 < .5 { + @if meta.type-of($luminance) == 'color' and $luminance + .05 < .5 { $hover-background: lighten-color($background, 14%); } @else { $hover-background: darken-color($background, 4%); @@ -124,7 +130,7 @@ @if not($focus-background) and $background { $luminance: luminance($background); - @if type-of($luminance) == 'color' and $luminance + .05 < .5 { + @if meta.type-of($luminance) == 'color' and $luminance + .05 < .5 { $focus-background: lighten-color($background, 22%); } @else { $focus-background: darken-color($background, 8%); @@ -138,7 +144,7 @@ @if not($selected-background) and $background { $luminance: luminance($background); - @if type-of($luminance) == 'color' and $luminance + .05 < .5 { + @if meta.type-of($luminance) == 'color' and $luminance + .05 < .5 { $selected-background: lighten-color($background, 22%); } @else { $selected-background: darken-color($background, 8%); @@ -160,7 +166,7 @@ @if not($focus-selected-background) and $selected-background { $luminance: luminance($selected-background); - @if type-of($luminance) == 'color' and $luminance + .05 < .5 { + @if meta.type-of($luminance) == 'color' and $luminance + .05 < .5 { $focus-selected-background: lighten-color($background, 32%); } @else { $focus-selected-background: darken-color($background, 16%); @@ -192,7 +198,7 @@ } @if not($ghost-shadow) { - $ghost-elevation: map-get($chip-schema, 'ghost-elevation'); + $ghost-elevation: map.get($chip-schema, 'ghost-elevation'); $ghost-shadow: igx-elevation($elevations, $ghost-elevation); } @@ -238,14 +244,14 @@ /// @param {Map} $theme - The theme used to style the component. /// @requires {mixin} igx-css-vars /// @requires rem -/// @requires --var +/// @requires var-get @mixin igx-chip($theme) { @include igx-css-vars($theme); $transition: all 120ms $ease-in-out-quad; $chip-max-width: 32ch; - $variant: map-get($theme, variant); + $variant: map.get($theme, variant); $bootstrap-theme: $variant == 'bootstrap'; $chip-height-material: ( @@ -260,7 +266,7 @@ compact: rem(18px) ); - $chip-height: map-get(( + $chip-height: map.get(( material: $chip-height-material, fluent: $chip-height-fluent, bootstrap: $chip-height-material, @@ -273,17 +279,17 @@ compact: 0 rem(2px) ); - $box-shadow: map-get(( + $box-shadow: map.get(( material: null, fluent: null, - bootstrap: 0 0 0 rem(3px) --var($theme, 'hover-background'), + bootstrap: 0 0 0 rem(3px) var-get($theme, 'hover-background'), indigo-design: null ), $variant); $item-padding: 4px; $chip-item-padding: 0 rem($item-padding); - $chip-avatar-inset: map-get(( + $chip-avatar-inset: map.get(( material: 0, fluent: -$item-padding, bootstrap: 0, @@ -374,27 +380,27 @@ %igx-chip-custom-icon { igx-icon { - width: map-get($chip-icon-size, 'comfortable'); - height: map-get($chip-icon-size, 'comfortable'); - font-size: map-get($chip-icon-size, 'comfortable'); + width: map.get($chip-icon-size, 'comfortable'); + height: map.get($chip-icon-size, 'comfortable'); + font-size: map.get($chip-icon-size, 'comfortable'); outline-style: none; } } %igx-chip-custom-icon--cosy { igx-icon { - width: map-get($chip-icon-size, 'cosy'); - height: map-get($chip-icon-size, 'cosy'); - font-size: map-get($chip-icon-size, 'cosy'); + width: map.get($chip-icon-size, 'cosy'); + height: map.get($chip-icon-size, 'cosy'); + font-size: map.get($chip-icon-size, 'cosy'); outline-style: none; } } %igx-chip-custom-icon--compact { igx-icon { - width: map-get($chip-icon-size, 'compact'); - height: map-get($chip-icon-size, 'compact'); - font-size: map-get($chip-icon-size, 'compact'); + width: map.get($chip-icon-size, 'compact'); + height: map.get($chip-icon-size, 'compact'); + font-size: map.get($chip-icon-size, 'compact'); outline-style: none; } } @@ -430,7 +436,7 @@ %igx-chip__content { @include ellipsis(); - padding: map-get($chip-padding, 'comfortable'); + padding: map.get($chip-padding, 'comfortable'); max-width: $chip-max-width; &:empty { @@ -439,17 +445,17 @@ } %igx-chip__content--cosy { - padding: map-get($chip-padding, 'cosy'); + padding: map.get($chip-padding, 'cosy'); } %igx-chip__content--compact { - padding: map-get($chip-padding, 'compact'); + padding: map.get($chip-padding, 'compact'); } %igx-chip__remove { display: inline-flex; margin-#{$right}: rem(4px); - color: --var($theme, 'remove-icon-color', currentColor); + color: var-get($theme, 'remove-icon-color', currentColor); &:empty { display: none; @@ -462,7 +468,7 @@ igx-icon { outline-style: none; - color: --var($theme, 'remove-icon-color-focus'); + color: var-get($theme, 'remove-icon-color-focus'); } } @@ -507,14 +513,14 @@ align-items: center; justify-content: center; flex: 1 1 auto; - height: map-get($chip-height, 'comfortable'); + height: map.get($chip-height, 'comfortable'); padding: $chip-item-padding; - color: --var($theme, 'text-color'); - background: --var($theme, 'background'); + color: var-get($theme, 'text-color'); + background: var-get($theme, 'background'); border-width: 1px; border-style: solid; - border-color: --var($theme, 'border-color'); - border-radius: --var($theme, 'border-radius'); + border-color: var-get($theme, 'border-color'); + border-radius: var-get($theme, 'border-radius'); user-select: none; overflow: hidden; cursor: pointer; @@ -524,85 +530,85 @@ } %igx-chip__item--hover { - color: --var($theme, 'hover-text-color'); - background: --var($theme, 'hover-background'); - border-color: --var($theme, 'hover-border-color'); + color: var-get($theme, 'hover-text-color'); + background: var-get($theme, 'hover-background'); + border-color: var-get($theme, 'hover-border-color'); transition: all 120ms ease-in; } %igx-chip__item--focus { - color: --var($theme, 'focus-text-color'); - background: --var($theme, 'focus-background'); - border-color: --var($theme, 'focus-border-color'); + color: var-get($theme, 'focus-text-color'); + background: var-get($theme, 'focus-background'); + border-color: var-get($theme, 'focus-border-color'); outline-style: none; box-shadow: $box-shadow; @if $variant == 'indigo-design' { - box-shadow: 0 0 0 rem(3px) --var($theme, 'focus-outline-color'); + box-shadow: 0 0 0 rem(3px) var-get($theme, 'focus-outline-color'); } } %igx-chip__item--selected { - color: --var($theme, 'selected-text-color'); - background: --var($theme, 'selected-background'); - border-color: --var($theme, 'selected-border-color'); + color: var-get($theme, 'selected-text-color'); + background: var-get($theme, 'selected-background'); + border-color: var-get($theme, 'selected-border-color'); } %igx-chip__item--hover-selected { - color: --var($theme, 'hover-selected-text-color'); - background: --var($theme, 'hover-selected-background'); - border-color: --var($theme, 'hover-selected-border-color'); + color: var-get($theme, 'hover-selected-text-color'); + background: var-get($theme, 'hover-selected-background'); + border-color: var-get($theme, 'hover-selected-border-color'); transition: $transition; } %igx-chip__item--focus-selected { - color: --var($theme, 'focus-selected-text-color'); - background: --var($theme, 'focus-selected-background'); - border-color: --var($theme, 'focus-selected-border-color'); + color: var-get($theme, 'focus-selected-text-color'); + background: var-get($theme, 'focus-selected-background'); + border-color: var-get($theme, 'focus-selected-border-color'); transition: $transition; @if $variant == 'indigo-design' { - box-shadow: 0 0 0 rem(3px) --var($theme, 'focus-selected-outline-color'); + box-shadow: 0 0 0 rem(3px) var-get($theme, 'focus-selected-outline-color'); } } %igx-chip__item--cosy { - height: map-get($chip-height, 'cosy'); - padding: map-get($chip-padding, 'cosy'); + height: map.get($chip-height, 'cosy'); + padding: map.get($chip-padding, 'cosy'); } %igx-chip__item--compact { - height: map-get($chip-height, 'compact'); - padding: map-get($chip-padding, 'compact'); + height: map.get($chip-height, 'compact'); + padding: map.get($chip-padding, 'compact'); } %igx-chip__ghost { position: absolute; - box-shadow: --var($theme, 'ghost-shadow'); + box-shadow: var-get($theme, 'ghost-shadow'); overflow: hidden; - color: --var($theme, 'focus-text-color'); - background: --var($theme, 'ghost-background'); + color: var-get($theme, 'focus-text-color'); + background: var-get($theme, 'ghost-background'); &:hover, &:focus { - background: --var($theme, 'ghost-background'); + background: var-get($theme, 'ghost-background'); } } %igx-chip__ghost--cosy { - height: map-get($chip-height, 'cosy'); + height: map.get($chip-height, 'cosy'); %igx-chip__content { - padding: map-get($chip-padding, 'cosy'); + padding: map.get($chip-padding, 'cosy'); } } %igx-chip__ghost--compact { @extend %igx-chip-custom-icon--compact; - height: map-get($chip-height, 'compact'); + height: map.get($chip-height, 'compact'); %igx-chip__content { - padding: map-get($chip-padding, 'compact'); + padding: map.get($chip-padding, 'compact'); } } @@ -626,7 +632,7 @@ $type-scale, $categories: (text: 'body-2')) { - $text: map-get($categories, 'text'); + $text: map.get($categories, 'text'); %igx-chip { @include igx-type-style($type-scale, $text) { diff --git a/projects/igniteui-angular/src/lib/core/styles/components/column-actions/_column-actions-component.scss b/projects/igniteui-angular/src/lib/core/styles/components/column-actions/_column-actions-component.scss index 4f260c08c65..4eb2d64e2bb 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/column-actions/_column-actions-component.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/column-actions/_column-actions-component.scss @@ -1,3 +1,6 @@ +@use '../../base' as *; +@use 'sass:string'; + //// /// @group components /// @author Simeon Simeonoff @@ -6,33 +9,39 @@ /// @requires {mixin} bem-elem /// @requires {mixin} bem-mod //// -@include b(igx-column-actions) { - $block: bem--selector-to-string(&); - @include register-component('igx-column-actions'); - @extend %column-actions-display !optional; +@mixin component { + @include b(igx-column-actions) { + $this: bem--selector-to-string(&); + @include register-component( + $name: string.slice($this, 2, -1), + $deps: () + ); - @include e(header) { - @extend %column-actions-header !optional; - } + @extend %column-actions-display !optional; - @include e(header-title) { - @extend %column-actions-title !optional; - } + @include e(header) { + @extend %column-actions-header !optional; + } - @include e(header-input) { - @extend %column-actions-input !optional; - } + @include e(header-title) { + @extend %column-actions-title !optional; + } - @include e(columns) { - @extend %column-actions-columns !optional; - } + @include e(header-input) { + @extend %column-actions-input !optional; + } - @include e(columns-item) { - @extend %column-actions-item !optional; - } + @include e(columns) { + @extend %column-actions-columns !optional; + } + + @include e(columns-item) { + @extend %column-actions-item !optional; + } - @include e(buttons) { - @extend %column-actions-buttons !optional; + @include e(buttons) { + @extend %column-actions-buttons !optional; + } } } diff --git a/projects/igniteui-angular/src/lib/core/styles/components/column-actions/_column-actions-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/column-actions/_column-actions-theme.scss index a52566ddca3..d176be2798a 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/column-actions/_column-actions-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/column-actions/_column-actions-theme.scss @@ -1,3 +1,8 @@ +@use '../../base' as *; +@use '../../themes/schemas' as *; +@use '../../typography/base' as *; +@use 'sass:map'; + //// /// @group themes /// @access public @@ -35,8 +40,8 @@ $name: 'igx-column-actions'; $column-actions-schema: (); - @if map-has-key($schema, $name) { - $column-actions-schema: map-get($schema, $name); + @if map.has-key($schema, $name) { + $column-actions-schema: map.get($schema, $name); } @else { $column-actions-schema: $schema; } @@ -59,22 +64,22 @@ /// @param {Map} $theme - The theme used to style the component. /// @requires {mixin} igx-css-vars /// @requires rem -/// @requires --var +/// @requires var-get @mixin igx-column-actions($theme) { @include igx-css-vars($theme); %column-actions-display { display: flex; flex-flow: column nowrap; - background: --var($theme, 'background-color'); - box-shadow: igx-elevation(map-get($theme, 'elevations'), 8); + background: var-get($theme, 'background-color'); + box-shadow: igx-elevation(map.get($theme, 'elevations'), 8); width: 100%; flex: 1 1 auto; min-width: rem(180px); } %column-actions-title { - color: --var($theme, 'title-color'); + color: var-get($theme, 'title-color'); margin: 0; padding: rem(16px) rem(16px) rem(8px); } @@ -112,7 +117,7 @@ /// @param {Map} $categories [(title: 'subtitle-1')] - The categories from the typographic scale used for type styles. /// @requires {mixin} igx-type-style @mixin igx-column-actions-typography($type-scale, $categories: (title: 'subtitle-1')) { - $title: map-get($categories, 'title'); + $title: map.get($categories, 'title'); %column-actions-title { @include igx-type-style($type-scale, $title) { diff --git a/projects/igniteui-angular/src/lib/core/styles/components/combo/_combo-component.scss b/projects/igniteui-angular/src/lib/core/styles/components/combo/_combo-component.scss index fa4f9db6dbd..9aa4f620954 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/combo/_combo-component.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/combo/_combo-component.scss @@ -1,42 +1,54 @@ +@use '../../base' as *; +@use 'sass:string'; + //// Combo /// @group components - /// @requires {mixin} bem-block /// @requires {mixin} bem-elem /// @requires {mixin} bem-mod //// -@include b(igx-combo) { - $this: bem--selector-to-string(&); - @include register-component(str-slice($this, 2, -1)); - - @extend %igx-combo !optional; - - @include e(drop-down) { - @extend %igx-combo__drop-down !optional; - } - - @include e(search) { - @extend %igx-combo__search !optional; - } - - @include e(checkbox) { - @extend %igx-combo__checkbox !optional; - } - - @include e(content) { - @extend %igx-combo__content !optional; - } - - @include e(add) { - @extend %igx-combo__add !optional; - } - - @include e(empty) { - @extend %igx-combo__empty !optional; - } - @include e(add-item) { - @extend %igx-combo__add-item !optional; +@mixin component { + @include b(igx-combo) { + $this: bem--selector-to-string(&); + @include register-component( + $name: string.slice($this, 2, -1), + $deps: ( + igx-checkbox, + igx-drop-down, + igx-input-group, + igx-icon + ) + ); + + @extend %igx-combo !optional; + + @include e(drop-down) { + @extend %igx-combo__drop-down !optional; + } + + @include e(search) { + @extend %igx-combo__search !optional; + } + + @include e(checkbox) { + @extend %igx-combo__checkbox !optional; + } + + @include e(content) { + @extend %igx-combo__content !optional; + } + + @include e(add) { + @extend %igx-combo__add !optional; + } + + @include e(empty) { + @extend %igx-combo__empty !optional; + } + + @include e(add-item) { + @extend %igx-combo__add-item !optional; + } } } - diff --git a/projects/igniteui-angular/src/lib/core/styles/components/combo/_combo-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/combo/_combo-theme.scss index a1ec22abbbc..3aa89ff0fa3 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/combo/_combo-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/combo/_combo-theme.scss @@ -1,3 +1,7 @@ +@use '../../base' as *; +@use '../../themes/schemas' as *; +@use 'sass:map'; + //// /// @group themes /// @access public @@ -25,8 +29,8 @@ $name: 'igx-combo'; $combo-schema: (); - @if map-has-key($schema, $name) { - $combo-schema: map-get($schema, $name); + @if map.has-key($schema, $name) { + $combo-schema: map.get($schema, $name); } @else { $combo-schema: $schema; } @@ -45,7 +49,7 @@ /// @param {Map} $theme - The theme used to style the component. /// @requires {mixin} igx-css-vars /// @requires rem -/// @requires --var +/// @requires var-get @mixin igx-combo($theme) { @include igx-css-vars($theme); @@ -74,7 +78,7 @@ padding: rem(8px) rem(16px); margin: 0 !important; z-index: 26; - border-bottom: 1px dashed --var($theme, 'search-separator-border-color'); + border-bottom: 1px dashed var-get($theme, 'search-separator-border-color'); } %igx-combo__content { @@ -93,7 +97,7 @@ align-items: center; position: relative; padding: rem(16px); - background: --var($theme, 'empty-list-background'); + background: var-get($theme, 'empty-list-background'); } %igx-combo__empty { @@ -101,7 +105,7 @@ justify-content: center; align-items: center; width: 100%; - color: --var($theme, 'empty-list-placeholder-color'); + color: var-get($theme, 'empty-list-placeholder-color'); padding: 0 rem(24px); font-size: rem(13px); } diff --git a/projects/igniteui-angular/src/lib/core/styles/components/date-picker/_date-picker-component.scss b/projects/igniteui-angular/src/lib/core/styles/components/date-picker/_date-picker-component.scss index ef55163463c..96501d8615a 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/date-picker/_date-picker-component.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/date-picker/_date-picker-component.scss @@ -1,3 +1,6 @@ +@use '../../base' as *; +@use 'sass:string'; + //// Date Picker /// @group components /// @author Simeon Simeonoff @@ -5,21 +8,29 @@ /// @requires {mixin} bem-elem /// @requires {mixin} bem-mod //// -@include b(igx-date-picker) { - $this: bem--selector-to-string(&); - @include register-component(str-slice($this, 2, -1)); - @extend %date-picker !optional; +@mixin component { + @include b(igx-date-picker) { + $this: bem--selector-to-string(&); + @include register-component( + $name: string.slice($this, 2, -1), + $deps: ( + igx-calendar + ) + ); - @include e(buttons) { - @extend %date-picker__buttons !optional; - } + @extend %date-picker !optional; - @include m(vertical) { - @extend %date-picker--vertical !optional; - } + @include e(buttons) { + @extend %date-picker__buttons !optional; + } + + @include m(vertical) { + @extend %date-picker--vertical !optional; + } - @include m(dropdown) { - @extend %date-picker--dropdown !optional; + @include m(dropdown) { + @extend %date-picker--dropdown !optional; + } } } diff --git a/projects/igniteui-angular/src/lib/core/styles/components/date-picker/_date-picker-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/date-picker/_date-picker-theme.scss index 21f7cf92a5c..3311d7d48dd 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/date-picker/_date-picker-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/date-picker/_date-picker-theme.scss @@ -1,3 +1,6 @@ +@use '../../base' as *; +@use 'sass:map'; + //// /// @group themes /// @access public @@ -8,130 +11,130 @@ /// @param {Map} $theme - The calendar theme used to style the component. /// @requires igx-elevation /// @requires text-contrast -/// @requires --var +/// @requires var-get /// @requires rem @mixin igx-date-picker($theme) { - $palette: map-get($theme, 'palette'); - $selected-hover-color: text-contrast(map-get($theme, 'date-selected-background'), $palette: $palette); + $palette: map.get($theme, 'palette'); + $selected-hover-color: text-contrast(map.get($theme, 'date-selected-background'), $palette: $palette); @include igx-css-vars($theme, '.igx-date-picker'); - $variant: map-get($theme, variant); + $variant: map.get($theme, variant); $bootstrap-theme: $variant == 'bootstrap'; %date-picker { box-shadow: igx-elevation($elevation: 24); - border-radius: --var($theme, 'border-radius'); - background: --var($theme, 'content-background'); + border-radius: var-get($theme, 'border-radius'); + background: var-get($theme, 'content-background'); overflow: hidden; %cal-display { - background: --var($theme, 'content-background'); + background: var-get($theme, 'content-background'); } %cal-header-display { - background: --var($theme, 'header-background'); - color: --var($theme, 'header-text-color'); + background: var-get($theme, 'header-background'); + color: var-get($theme, 'header-text-color'); } %cal-picker-arrow { - color: --var($theme, 'picker-arrow-color'); + color: var-get($theme, 'picker-arrow-color'); &:hover { - color: --var($theme, 'picker-arrow-hover-color'); + color: var-get($theme, 'picker-arrow-hover-color'); } } %cal-picker-date { - color: --var($theme, 'picker-text-color'); + color: var-get($theme, 'picker-text-color'); &:hover, &:focus { - color: --var($theme, 'picker-text-hover-color'); + color: var-get($theme, 'picker-text-hover-color'); } } %cal-value { - color: --var($theme, 'content-text-color'); + color: var-get($theme, 'content-text-color'); min-width: 14.28%; @if $bootstrap-theme { &:hover, &:focus { - color: --var($theme, 'date-selected-text-color'); + color: var-get($theme, 'date-selected-text-color'); } } } %cal-value--label { - color: --var($theme, 'label-color'); + color: var-get($theme, 'label-color'); &:hover, &:focus { - color: --var($theme, 'label-color'); + color: var-get($theme, 'label-color'); } } %cal-value--weekend { - color: --var($theme, 'weekend-text-color'); + color: var-get($theme, 'weekend-text-color'); } %cal-value--special { - color: --var($theme, 'date-special-text-color'); - background: --var($theme, 'date-special-background'); + color: var-get($theme, 'date-special-text-color'); + background: var-get($theme, 'date-special-background'); } %cal-value--disabled { - color: --var($theme, 'date-disabled-text-color'); + color: var-get($theme, 'date-disabled-text-color'); } %cal-value--year-current { - color: --var($theme, 'year-current-text-color'); + color: var-get($theme, 'year-current-text-color'); @if $bootstrap-theme { &:hover, &:focus { - color: --var($theme, 'year-hover-text-color'); + color: var-get($theme, 'year-hover-text-color'); } } } %cal-value--year-hover { - color: --var($theme, 'year-hover-text-color'); + color: var-get($theme, 'year-hover-text-color'); } %cal-value--month-hover { - color: --var($theme, 'month-hover-text-color'); + color: var-get($theme, 'month-hover-text-color'); } %cal-value--month-current { - color: --var($theme, 'month-current-text-color'); + color: var-get($theme, 'month-current-text-color'); } %cal-value--inactive { - color: --var($theme, 'inactive-text-color'); + color: var-get($theme, 'inactive-text-color'); &:hover { - color: --var($theme, 'inactive-text-color'); + color: var-get($theme, 'inactive-text-color'); } } %cal-value--selected { - color: --var($theme, 'date-selected-text-color'); - // background: --var($theme, 'date-selected-background') !important; + color: var-get($theme, 'date-selected-text-color'); + // background: var-get($theme, 'date-selected-background') !important; } %cal-value--current { - color: --var($theme, 'date-current-text-color'); + color: var-get($theme, 'date-current-text-color'); } %cal-value--hover { %cal-value-content::after { - background: --var($theme, 'date-hover-background'); + background: var-get($theme, 'date-hover-background'); } &%cal-value--selected %cal-value-content::after { - background: rgba($selected-hover-color, .18); + background: $selected-hover-color; } } } diff --git a/projects/igniteui-angular/src/lib/core/styles/components/date-range-picker/_date-range-picker-component.scss b/projects/igniteui-angular/src/lib/core/styles/components/date-range-picker/_date-range-picker-component.scss index 1a9c89d1131..f33613e44cb 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/date-range-picker/_date-range-picker-component.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/date-range-picker/_date-range-picker-component.scss @@ -1,3 +1,6 @@ +@use '../../base' as *; +@use 'sass:string'; + //// Range Picker /// @group components /// @author Marin Popov @@ -5,37 +8,44 @@ /// @requires {mixin} bem-elem /// @requires {mixin} bem-mod //// -@include b(igx-date-range-picker) { - $this: bem--selector-to-string(&); - @include register-component(str-slice($this, 2, -1)); - @extend %igx-date-range-picker !optional; +@mixin component { + @include b(igx-date-range-picker) { + $this: bem--selector-to-string(&); + @include register-component( + $name: string.slice($this, 2, -1), + $deps: ( + igx-calendar, + igx-input-group, + ) + ); - @include e(label) { - @extend %igx-date-range-picker__label !optional; - } + @extend %igx-date-range-picker !optional; - @include e(start) { - @extend %igx-date-range-picker__start !optional; - } + @include e(label) { + @extend %igx-date-range-picker__label !optional; + } - @include e(end) { - @extend %igx-date-range-picker__end !optional; - } + @include e(start) { + @extend %igx-date-range-picker__start !optional; + } - @include m(cosy){ - @extend %igx-date-range-picker !optional; - @extend %igx-date-range-picker--cosy !optional; - } + @include e(end) { + @extend %igx-date-range-picker__end !optional; + } + @include m(cosy){ + @extend %igx-date-range-picker !optional; + @extend %igx-date-range-picker--cosy !optional; + } - @include m(compact){ - @extend %igx-date-range-picker !optional; - @extend %igx-date-range-picker--compact !optional; + @include m(compact){ + @extend %igx-date-range-picker !optional; + @extend %igx-date-range-picker--compact !optional; + } } -} -@include b(igx-date-range-picker-buttons) { - @extend %igx-date-range-picker-buttons !optional; + @include b(igx-date-range-picker-buttons) { + @extend %igx-date-range-picker-buttons !optional; + } } - diff --git a/projects/igniteui-angular/src/lib/core/styles/components/date-range-picker/_date-range-picker-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/date-range-picker/_date-range-picker-theme.scss index eeabb09851f..2ddbfd78ebf 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/date-range-picker/_date-range-picker-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/date-range-picker/_date-range-picker-theme.scss @@ -1,3 +1,8 @@ +@use '../../base' as *; +@use '../../themes/schemas' as *; +@use '../../typography/base' as *; +@use 'sass:map'; + //// /// @group themes /// @access public @@ -7,7 +12,7 @@ /// @param {Map} $palette [null] - The palette used as basis for styling the component. /// @param {Map} $schema [$light-schema] - The schema used as basis for styling the component. /// @param {color} $label-color [null] - The color for date range separator label. -/// @requires --var +/// @requires var-get /// @requires rem @function igx-date-range-picker-theme( $palette: null, @@ -17,8 +22,8 @@ $name: 'igx-date-range'; $date-range-schema: (); - @if map-has-key($schema, $name) { - $date-range-schema: map-get($schema, $name); + @if map.has-key($schema, $name) { + $date-range-schema: map.get($schema, $name); } @else { $date-range-schema: $schema; } @@ -35,7 +40,7 @@ /// @param {Map} $theme - The theme used to style the component. /// @requires {mixin} igx-css-vars /// @requires rem -/// @requires --var +/// @requires var-get @mixin igx-date-range-picker($theme) { @include igx-css-vars($theme); $left: if-ltr(left, right); @@ -69,20 +74,20 @@ %igx-date-range-picker__label { display: flex; align-items: center; - color: --var($theme, 'label-color'); + color: var-get($theme, 'label-color'); margin: 0 rem(8px); - padding-top: rem(18px, map-get($base-scale-size, 'comfortable')); + padding-top: rem(18px, map.get($base-scale-size, 'comfortable')); } %igx-date-range-picker--cosy { %igx-date-range-picker__label { - padding-top: rem(18px, map-get($base-scale-size, 'cosy')); + padding-top: rem(18px, map.get($base-scale-size, 'cosy')); } } %igx-date-range-picker--compact { %igx-date-range-picker__label { - padding-top: rem(18px, map-get($base-scale-size, 'compact')); + padding-top: rem(18px, map.get($base-scale-size, 'compact')); } } @@ -118,7 +123,7 @@ label: 'subtitle-1', ) ) { - $label: map-get($categories, 'label'); + $label: map.get($categories, 'label'); %igx-date-range__label { @include igx-type-style($type-scale, $label); diff --git a/projects/igniteui-angular/src/lib/core/styles/components/dialog/_dialog-component.scss b/projects/igniteui-angular/src/lib/core/styles/components/dialog/_dialog-component.scss index fd3bf77ca14..2570c3fecfc 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/dialog/_dialog-component.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/dialog/_dialog-component.scss @@ -1,3 +1,6 @@ +@use '../../base' as *; +@use 'sass:string'; + //// Dialog /// @group components /// @author Simeon Simeonoff @@ -5,33 +8,41 @@ /// @requires {mixin} bem-elem /// @requires {mixin} bem-mod //// -@include b(igx-dialog) { - $this: bem--selector-to-string(&); - @include register-component(str-slice($this, 2, -1)); - @extend %igx-dialog-display !optional; +@mixin component { + @include b(igx-dialog) { + $this: bem--selector-to-string(&); + @include register-component( + $name: string.slice($this, 2, -1), + $deps: ( + igx-button, + ) + ); - @include e(window) { - @extend %igx-dialog-window !optional; - } + @extend %igx-dialog-display !optional; - @include e(window-title) { - @extend %igx-dialog-title !optional; - } + @include e(window) { + @extend %igx-dialog-window !optional; + } - @include e(window-content) { - @extend %igx-dialog-content !optional; - } + @include e(window-title) { + @extend %igx-dialog-title !optional; + } - @include e(window-message) { - @extend %igx-dialog-message !optional; - } + @include e(window-content) { + @extend %igx-dialog-content !optional; + } - @include e(window-actions) { - @extend %igx-dialog-actions !optional; - } + @include e(window-message) { + @extend %igx-dialog-message !optional; + } + + @include e(window-actions) { + @extend %igx-dialog-actions !optional; + } - @include m(hidden) { - @extend %igx-dialog--hidden !optional; + @include m(hidden) { + @extend %igx-dialog--hidden !optional; + } } } diff --git a/projects/igniteui-angular/src/lib/core/styles/components/dialog/_dialog-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/dialog/_dialog-theme.scss index edc73c5f7f4..a0856993832 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/dialog/_dialog-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/dialog/_dialog-theme.scss @@ -1,3 +1,9 @@ +@use '../../base' as *; +@use '../../themes/schemas' as *; +@use '../../typography/base' as *; +@use 'sass:map'; +@use 'sass:meta'; + //// /// @group themes /// @access public @@ -46,8 +52,8 @@ $dialog-schema: (); - @if map-has-key($schema, $name) { - $dialog-schema: map-get($schema, $name); + @if map.has-key($schema, $name) { + $dialog-schema: map.get($schema, $name); } @else { $dialog-schema: $schema; } @@ -55,7 +61,7 @@ $theme: apply-palette($dialog-schema, $palette); $border-radius: round-borders( - if($border-radius, $border-radius, map-get($dialog-schema, 'border-radius')), 0 , 36px + if($border-radius, $border-radius, map.get($dialog-schema, 'border-radius')), 0 , 36px ); @if not($title-color) and $background{ @@ -63,13 +69,13 @@ } @if not($message-color) and $background{ - @if type-of($background) == 'color' { + @if meta.type-of($background) == 'color' { $message-color: rgba(text-contrast($background), .8); } } @if not($shadow) { - $elevation: map-get($dialog-schema, 'elevation'); + $elevation: map.get($dialog-schema, 'elevation'); $shadow: igx-elevation($elevations, $elevation); } @@ -89,42 +95,42 @@ /// @param {Map} $theme - The theme used to style the component. /// @requires {mixin} igx-css-vars /// @requires rem -/// @requires --var +/// @requires var-get @mixin igx-dialog($theme) { @include igx-css-vars($theme); $left: if-ltr(left, right); $right: if-ltr(right, left); - $variant: map-get($theme, variant); + $variant: map.get($theme, variant); - $dialog-min-width: map-get(( + $dialog-min-width: map.get(( material: rem(280px), fluent: rem(288px), bootstrap: rem(288px), ), $variant); - $dialog-title-padding: map-get(( + $dialog-title-padding: map.get(( material: rem(24px) rem(24px) rem(12px) rem(24px), fluent: rem(16px) rem(24px) rem(24px) rem(24px), bootstrap: rem(16px), indigo-design: rem(16px) rem(24px), ), $variant); - $dialog-message-padding: map-get(( + $dialog-message-padding: map.get(( material: rem(12px) rem(24px), fluent: 0 rem(24px) rem(20px) rem(24px), bootstrap: rem(16px), indigo-design: 0 rem(24px) rem(8px) rem(24px), ), $variant); - $dialog-actions-padding: map-get(( + $dialog-actions-padding: map.get(( material: rem(8px), fluent: 0 rem(24px) rem(24px) rem(24px), bootstrap: rem(16px), indigo-design: rem(8px), ), $variant); - $bootstrap-theme: map-get($theme, variant) == 'bootstrap'; + $bootstrap-theme: map.get($theme, variant) == 'bootstrap'; %igx-dialog-display { outline-style: none; @@ -137,10 +143,10 @@ %igx-dialog-window { position: relative; min-width: $dialog-min-width; - border: 1px solid --var($theme, 'border-color'); - border-radius: --var($theme, 'border-radius'); - background: --var($theme, 'background'); - box-shadow: --var($theme, 'shadow'); + border: 1px solid var-get($theme, 'border-color'); + border-radius: var-get($theme, 'border-radius'); + background: var-get($theme, 'background'); + box-shadow: var-get($theme, 'shadow'); overflow: hidden; .igx-calendar { @@ -154,16 +160,16 @@ %igx-dialog-title { display: flex; - color: --var($theme, 'title-color'); + color: var-get($theme, 'title-color'); padding: $dialog-title-padding; @if $bootstrap-theme { - border-bottom: 1px solid --var($theme, 'border-color'); + border-bottom: 1px solid var-get($theme, 'border-color'); } } %igx-dialog-content { - color: --var($theme, 'message-color'); + color: var-get($theme, 'message-color'); padding: $dialog-message-padding; } @@ -173,7 +179,7 @@ @media all and (-ms-high-contrast: none) { - max-width: map-get(( + max-width: map.get(( material: 62ch, fluent: 48ch, bootstrap: 60ch, @@ -189,7 +195,7 @@ padding: $dialog-actions-padding; @if $bootstrap-theme { - border-top: 1px solid --var($theme, 'border-color'); + border-top: 1px solid var-get($theme, 'border-color'); } button + button { @@ -208,8 +214,8 @@ title: 'h6', content: 'body-1') ) { - $title: map-get($categories, 'title'); - $content: map-get($categories, 'content'); + $title: map.get($categories, 'title'); + $content: map.get($categories, 'content'); %igx-dialog-title { @include igx-type-style($type-scale, $title) { diff --git a/projects/igniteui-angular/src/lib/core/styles/components/divider/_divider-component.scss b/projects/igniteui-angular/src/lib/core/styles/components/divider/_divider-component.scss index 7df17dacc20..ae395dfd2dd 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/divider/_divider-component.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/divider/_divider-component.scss @@ -1,3 +1,6 @@ +@use '../../base' as *; +@use 'sass:string'; + //// /// @group components /// @author Simeon Simeonoff @@ -6,22 +9,27 @@ /// @requires {mixin} bem-mod //// -@include b(igx-divider) { - // Register the component in the component registry - $this: bem--selector-to-string(&); - @include register-component(str-slice($this, 2, -1)); +@mixin component { + @include b(igx-divider) { + // Register the component in the component registry + $this: bem--selector-to-string(&); + @include register-component( + $name: string.slice($this, 2, -1), + $deps: () + ); - @extend %igx-divider-display !optional; + @extend %igx-divider-display !optional; - @include m(dashed) { - @extend %igx-divider--dashed !optional; - } + @include m(dashed) { + @extend %igx-divider--dashed !optional; + } - @include m(vertical) { - @extend %igx-divider--vertical !optional; - } + @include m(vertical) { + @extend %igx-divider--vertical !optional; + } - @include mx(vertical, dashed) { - @extend %igx-divider--vertical-dashed !optional; + @include mx(vertical, dashed) { + @extend %igx-divider--vertical-dashed !optional; + } } } diff --git a/projects/igniteui-angular/src/lib/core/styles/components/divider/_divider-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/divider/_divider-theme.scss index 1ba889f8822..37acdbb69d6 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/divider/_divider-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/divider/_divider-theme.scss @@ -1,3 +1,7 @@ +@use '../../base' as *; +@use '../../themes/schemas' as *; +@use 'sass:map'; + //// /// @group themes /// @access public @@ -25,8 +29,8 @@ $name: 'igx-divider'; $divider-schema: (); - @if map-has-key($schema, $name) { - $divider-schema: map-get($schema, $name); + @if map.has-key($schema, $name) { + $divider-schema: map.get($schema, $name); } @else { $divider-schema: $schema; } @@ -43,7 +47,7 @@ /// /// @param {Map} $theme - The theme used to style the component. /// @requires {mixin} igx-css-vars -/// @requires --var +/// @requires var-get /// @mixin igx-divider($theme) { @include igx-css-vars($theme); @@ -51,11 +55,11 @@ %igx-divider-display { display: block; height: 1px; - background: --var($theme, 'color'); + background: var-get($theme, 'color'); } %igx-divider--dashed { - background: linear-gradient(to right, --var($theme, 'color') 50%, transparent 50%); + background: linear-gradient(to right, var-get($theme, 'color') 50%, transparent 50%); background-size: 10px 1px; /* dash size */ } @@ -67,7 +71,7 @@ } %igx-divider--vertical-dashed { - background: linear-gradient(to bottom, --var($theme, 'color') 50%, transparent 50%); + background: linear-gradient(to bottom, var-get($theme, 'color') 50%, transparent 50%); background-size: 1px 10px; /* dash size */ } } diff --git a/projects/igniteui-angular/src/lib/core/styles/components/dock-manager/_dock-manager-component.scss b/projects/igniteui-angular/src/lib/core/styles/components/dock-manager/_dock-manager-component.scss index ab06c417100..88436e1d439 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/dock-manager/_dock-manager-component.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/dock-manager/_dock-manager-component.scss @@ -1,3 +1,6 @@ +@use '../../base' as *; +@use 'sass:string'; + //// /// @group components /// @author Simeon Simeonoff @@ -5,8 +8,16 @@ /// @requires {mixin} bem-elem /// @requires {mixin} bem-mod //// -@include b(igc-dock-manager) { - // Register the component in the component registry - $this: bem--selector-to-string(&); - @include register-component(str-slice($this, 2, -1)); + +@mixin component { + @include b(igc-dock-manager) { + // Register the component in the component registry + $this: bem--selector-to-string(&); + @include register-component( + $name: string.slice($this, 2, -1), + $deps: ( + igx-watermark + ) + ); + } } diff --git a/projects/igniteui-angular/src/lib/core/styles/components/dock-manager/_dock-manager-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/dock-manager/_dock-manager-theme.scss index 34f2748f697..fa53bde4448 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/dock-manager/_dock-manager-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/dock-manager/_dock-manager-theme.scss @@ -1,3 +1,8 @@ +@use '../../base' as *; +@use '../../themes/schemas' as *; +@use '../../typography/base' as *; +@use 'sass:map'; + //// /// @group themes /// @access public @@ -61,8 +66,8 @@ $name: 'igc-dockmanager'; $dock-manager-schema: (); - @if map-has-key($schema, $name) { - $dock-manager-schema: map-get($schema, $name); + @if map.has-key($schema, $name) { + $dock-manager-schema: map.get($schema, $name); } @else { $dock-manager-schema: $schema; } diff --git a/projects/igniteui-angular/src/lib/core/styles/components/drop-down/_drop-down-component.scss b/projects/igniteui-angular/src/lib/core/styles/components/drop-down/_drop-down-component.scss index 713ba5265ab..f54c61c4f9a 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/drop-down/_drop-down-component.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/drop-down/_drop-down-component.scss @@ -1,3 +1,6 @@ +@use '../../base' as *; +@use 'sass:string'; + //// /// @group components /// @author Marin Popov @@ -6,74 +9,78 @@ /// @requires {mixin} bem-mod //// -/// @access public -@include b(igx-drop-down) { - $this: bem--selector-to-string(&); - @include register-component(str-slice($this, 2, -1)); +@mixin component { + @include b(igx-drop-down) { + $this: bem--selector-to-string(&); + @include register-component( + $name: string.slice($this, 2, -1), + $deps: () + ); - @extend %igx-drop-down !optional; + @extend %igx-drop-down !optional; - @include e(list) { - @extend %igx-drop-down__list !optional; - } + @include e(list) { + @extend %igx-drop-down__list !optional; + } - @include e(list-scroll) { - @extend %igx-drop-down__list-scroll !optional; - } + @include e(list-scroll) { + @extend %igx-drop-down__list-scroll !optional; + } - @include e(item) { - @extend %igx-drop-down__item !optional; - } + @include e(item) { + @extend %igx-drop-down__item !optional; + } - @include e(inner) { - @extend %igx-drop-down__inner !optional; - } + @include e(inner) { + @extend %igx-drop-down__inner !optional; + } - @include e(content) { - @extend %igx-drop-down__content !optional; - } + @include e(content) { + @extend %igx-drop-down__content !optional; + } - @include e(item, $m: cosy) { - @extend %igx-drop-down__item--cosy !optional; - } + @include e(item, $m: cosy) { + @extend %igx-drop-down__item--cosy !optional; + } - @include e(item, $m: compact) { - @extend %igx-drop-down__item--compact !optional; - } + @include e(item, $m: compact) { + @extend %igx-drop-down__item--compact !optional; + } - @include e(item, $m: focused) { - @extend %igx-drop-down__item--focused !optional; - } + @include e(item, $m: focused) { + @extend %igx-drop-down__item--focused !optional; + } - @include e(item, $m: selected) { - @extend %igx-drop-down__item--selected !optional; - } + @include e(item, $m: selected) { + @extend %igx-drop-down__item--selected !optional; + } - @include e(item, $mods: (selected, focused)) { - @extend %igx-drop-down__item--selected--focused !optional; - } + @include e(item, $mods: (selected, focused)) { + @extend %igx-drop-down__item--selected--focused !optional; + } - @include e(item, $m: disabled) { - @extend %igx-drop-down__item--disabled !optional; - } + @include e(item, $m: disabled) { + @extend %igx-drop-down__item--disabled !optional; + } - @include e(header) { - @extend %igx-drop-down__header !optional; - } + @include e(header) { + @extend %igx-drop-down__header !optional; + } - @include e(header, $m: cosy) { - @extend %igx-drop-down__header--cosy !optional; - } + @include e(header, $m: cosy) { + @extend %igx-drop-down__header--cosy !optional; + } - @include e(header, $m: compact) { - @extend %igx-drop-down__header--compact !optional; - } + @include e(header, $m: compact) { + @extend %igx-drop-down__header--compact !optional; + } - @include e(group) { - @extend %igx-drop-down__group !optional; - } + @include e(group) { + @extend %igx-drop-down__group !optional; + } - @include e(group, $m: disabled) { - @extend %igx-drop-down__item--disabled !optional; + @include e(group, $m: disabled) { + @extend %igx-drop-down__item--disabled !optional; + } } } diff --git a/projects/igniteui-angular/src/lib/core/styles/components/drop-down/_drop-down-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/drop-down/_drop-down-theme.scss index 7fff149ef3c..ef622d2a888 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/drop-down/_drop-down-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/drop-down/_drop-down-theme.scss @@ -1,3 +1,9 @@ +@use '../../base' as *; +@use '../../themes/schemas' as *; +@use '../../typography/base' as *; +@use 'sass:map'; +@use 'sass:meta'; + //// /// @group themes /// @access public @@ -84,8 +90,8 @@ $drop-down-schema: (); - @if map-has-key($schema, $name) { - $drop-down-schema: map-get($schema, $name); + @if map.has-key($schema, $name) { + $drop-down-schema: map.get($schema, $name); } @else { $drop-down-schema: $schema; } @@ -93,11 +99,11 @@ $theme: apply-palette($drop-down-schema, $palette); $border-radius: round-borders( - if($border-radius, $border-radius, map-get($drop-down-schema, 'border-radius')), 0, 20px + if($border-radius, $border-radius, map.get($drop-down-schema, 'border-radius')), 0, 20px ); $item-border-radius: round-borders( - if($item-border-radius, $item-border-radius, map-get($drop-down-schema, 'item-border-radius')), 0, 20px + if($item-border-radius, $item-border-radius, map.get($drop-down-schema, 'item-border-radius')), 0, 20px ); @if not($item-text-color) and $background-color { @@ -107,7 +113,7 @@ @if not($hover-item-background) and $background-color { $hover-item-text-color: text-contrast($background-color); - @if type-of($background-color) == 'color' { + @if meta.type-of($background-color) == 'color' { $hover-item-background: rgba(text-contrast($background-color), .12); } } @@ -119,7 +125,7 @@ @if not($focused-item-background) and $background-color { $focused-item-text-color: text-contrast($background-color); - @if type-of($background-color) == 'color' { + @if meta.type-of($background-color) == 'color' { $focused-item-background: rgba(text-contrast($background-color), .12); } } @@ -136,7 +142,6 @@ $selected-hover-item-text-color: text-contrast($selected-hover-item-background); } - @if not($selected-focus-item-text-color) and $selected-focus-item-background { $selected-focus-item-text-color: text-contrast($selected-focus-item-background); } @@ -145,27 +150,26 @@ $selected-focus-item-text-color: text-contrast($selected-focus-item-background); } - @if not($disabled-item-text-color) and $background-color { - @if type-of($background-color) == 'color' { + @if meta.type-of($background-color) == 'color' { $disabled-item-text-color: rgba(text-contrast($background-color), .36); } } @if not($disabled-item-text-color) and $disabled-item-background { - @if type-of($disabled-item-background) == 'color' { + @if meta.type-of($disabled-item-background) == 'color' { $disabled-item-text-color: rgba(text-contrast($disabled-item-background), .36); } } @if not($header-text-color) and $background-color { - @if type-of($background-color) == 'color' { + @if meta.type-of($background-color) == 'color' { $header-text-color: rgba(text-contrast($background-color), .7); } } @if not($shadow) { - $elevation: map-get($drop-down-schema, 'elevation'); + $elevation: map.get($drop-down-schema, 'elevation'); $shadow: igx-elevation($elevations, $elevation); } @@ -199,7 +203,7 @@ /// @param {Map} $theme - The theme used to style the component. /// @requires {mixin} igx-css-vars /// @requires rem -/// @requires --var +/// @requires var-get @mixin igx-drop-down($theme) { @include igx-css-vars($theme); @@ -254,11 +258,11 @@ %igx-drop-down__list { overflow: hidden; - border-radius: --var($theme, 'border-radius'); - background: --var($theme, 'background-color'); - box-shadow: --var($theme, 'shadow'); + border-radius: var-get($theme, 'border-radius'); + background: var-get($theme, 'background-color'); + box-shadow: var-get($theme, 'shadow'); min-width: rem(128px); - border: --var($theme, 'border-width') solid --var($theme, 'border-color'); + border: var-get($theme, 'border-width') solid var-get($theme, 'border-color'); } %igx-drop-down__list-scroll { @@ -279,7 +283,7 @@ align-items: center; width: 100%; white-space: nowrap; - height: map-get($item-height, 'comfortable'); + height: map.get($item-height, 'comfortable'); position: relative; igx-prefix, @@ -301,21 +305,21 @@ } %igx-drop-down__item { - color: --var($theme, 'item-text-color'); + color: var-get($theme, 'item-text-color'); cursor: pointer; - padding: map-get($item-padding, 'comfortable'); - border-radius: --var($theme, 'item-border-radius'); + padding: map.get($item-padding, 'comfortable'); + border-radius: var-get($theme, 'item-border-radius'); &:focus { outline: 0; outline-color: transparent; - background: --var($theme, 'focused-item-background'); - color: --var($theme, 'focused-item-text-color'); + background: var-get($theme, 'focused-item-background'); + color: var-get($theme, 'focused-item-text-color'); } &:hover { - background: --var($theme, 'hover-item-background'); - color: --var($theme, 'hover-item-text-color'); + background: var-get($theme, 'hover-item-background'); + color: var-get($theme, 'hover-item-text-color'); } } @@ -332,8 +336,8 @@ } %igx-drop-down__item--cosy { - height: map-get($item-height, 'cosy'); - padding: map-get($item-padding, 'cosy'); + height: map.get($item-height, 'cosy'); + padding: map.get($item-padding, 'cosy'); igx-prefix, [igxPrefix] { @@ -347,8 +351,8 @@ } %igx-drop-down__item--compact { - height: map-get($item-height, 'compact'); - padding: map-get($item-padding, 'compact'); + height: map.get($item-height, 'compact'); + padding: map.get($item-padding, 'compact'); igx-prefix, [igxPrefix] { @@ -362,47 +366,47 @@ } %igx-drop-down__prefix { - margin-#{$right}: map-get($prefix-margin, 'comfortable'); + margin-#{$right}: map.get($prefix-margin, 'comfortable'); } %igx-drop-down__suffix { + igx-suffix, + [igxSuffix] { - margin-#{$left}: map-get($suffix-margin, 'comfortable'); + margin-#{$left}: map.get($suffix-margin, 'comfortable'); } } %igx-drop-down__prefix--cosy { - margin-#{$right}: map-get($prefix-margin, 'cosy'); + margin-#{$right}: map.get($prefix-margin, 'cosy'); } %igx-drop-down__suffix--cosy { + igx-suffix, + [igxSuffix] { - margin-#{$left}: map-get($suffix-margin, 'cosy'); + margin-#{$left}: map.get($suffix-margin, 'cosy'); } } %igx-drop-down__prefix--compact { - margin-#{$right}: map-get($prefix-margin, 'compact'); + margin-#{$right}: map.get($prefix-margin, 'compact'); } %igx-drop-down__suffix--compact { + igx-suffix, + [igxSuffix] { - margin-#{$left}: map-get($suffix-margin, 'compact'); + margin-#{$left}: map.get($suffix-margin, 'compact'); } } %igx-drop-down__header { - color: --var($theme, 'header-text-color'); + color: var-get($theme, 'header-text-color'); pointer-events: none; - padding: map-get($header-item-padding, 'comfortable'); + padding: map.get($header-item-padding, 'comfortable'); } %igx-drop-down__header--cosy { - height: map-get($item-height, 'cosy'); - padding: map-get($header-item-padding, 'cosy'); + height: map.get($item-height, 'cosy'); + padding: map.get($header-item-padding, 'cosy'); igx-prefix, [igxPrefix] { @@ -416,8 +420,8 @@ } %igx-drop-down__header--compact { - height: map-get($item-height, 'compact'); - padding: map-get($header-item-padding, 'compact'); + height: map.get($item-height, 'compact'); + padding: map.get($header-item-padding, 'compact'); igx-prefix, [igxPrefix] { @@ -434,47 +438,47 @@ pointer-events: auto; label { - @extend %igx-drop-down__header; + @extend %igx-drop-down__header !optional; } %igx-drop-down__item { - text-indent: map-get($item-padding, 'comfortable'); + text-indent: map.get($item-padding, 'comfortable'); } } %igx-drop-down__item--focused { - background: --var($theme, 'focused-item-background'); - color: --var($theme, 'focused-item-text-color'); + background: var-get($theme, 'focused-item-background'); + color: var-get($theme, 'focused-item-text-color'); &:hover { - color: --var($theme, 'focused-item-text-color'); - background: --var($theme, 'focused-item-background'); + color: var-get($theme, 'focused-item-text-color'); + background: var-get($theme, 'focused-item-background'); } } %igx-drop-down__item--selected { - background: --var($theme, 'selected-item-background'); - color: --var($theme, 'selected-item-text-color'); + background: var-get($theme, 'selected-item-background'); + color: var-get($theme, 'selected-item-text-color'); &:hover { - background: --var($theme, 'selected-hover-item-background'); - color: --var($theme, 'selected-hover-item-text-color'); + background: var-get($theme, 'selected-hover-item-background'); + color: var-get($theme, 'selected-hover-item-text-color'); } } %igx-drop-down__item--selected--focused { - background: --var($theme, 'selected-focus-item-background'); - color: --var($theme, 'selected-focus-item-text-color'); + background: var-get($theme, 'selected-focus-item-background'); + color: var-get($theme, 'selected-focus-item-text-color'); } %igx-drop-down__item--disabled { - background: --var($theme, 'disabled-item-background'); - color: --var($theme, 'disabled-item-text-color'); + background: var-get($theme, 'disabled-item-background'); + color: var-get($theme, 'disabled-item-text-color'); cursor: default; pointer-events: none; &:hover { - background: --var($theme, 'disabled-item-background'); + background: var-get($theme, 'disabled-item-background'); } } } @@ -494,9 +498,9 @@ select-item: 'subtitle-1' ) ) { - $header: map-get($categories, 'header'); - $item: map-get($categories, 'item'); - $select-item: map-get($categories, 'select-item'); + $header: map.get($categories, 'header'); + $item: map.get($categories, 'item'); + $select-item: map.get($categories, 'select-item'); %igx-drop-down__header, %igx-drop-down__group > label { diff --git a/projects/igniteui-angular/src/lib/core/styles/components/expansion-panel/_expansion-panel-component.scss b/projects/igniteui-angular/src/lib/core/styles/components/expansion-panel/_expansion-panel-component.scss index 9a308c35fa8..3536c93628b 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/expansion-panel/_expansion-panel-component.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/expansion-panel/_expansion-panel-component.scss @@ -1,3 +1,6 @@ +@use '../../base' as *; +@use 'sass:string'; + //// /// @group components /// @author Marin Popov @@ -6,54 +9,61 @@ /// @requires {mixin} bem-mod //// -@include b(igx-expansion-panel) { - $this: bem--selector-to-string(&); - @include register-component(str-slice($this, 2, -1)); +@mixin component { + @include b(igx-expansion-panel) { + $this: bem--selector-to-string(&); + @include register-component( + $name: string.slice($this, 2, -1), + $deps: ( + igx-icon, + ) + ); - @extend %igx-expansion-panel !optional; + @extend %igx-expansion-panel !optional; - @include e(title-wrapper) { - @extend %igx-expansion-panel__title-wrapper !optional; - } + @include e(title-wrapper) { + @extend %igx-expansion-panel__title-wrapper !optional; + } - @include e(header-inner) { - @extend %igx-expansion-panel__header-inner !optional; - } + @include e(header-inner) { + @extend %igx-expansion-panel__header-inner !optional; + } - @include e(header-title) { - @extend %igx-expansion-panel__header-title !optional; - } + @include e(header-title) { + @extend %igx-expansion-panel__header-title !optional; + } - @include e(header-description) { - @extend %igx-expansion-panel__header-description !optional; - } + @include e(header-description) { + @extend %igx-expansion-panel__header-description !optional; + } - @include e(header-icon, $m: start) { - @extend %igx-expansion-panel__header-icon--start !optional; - } + @include e(header-icon, $m: start) { + @extend %igx-expansion-panel__header-icon--start !optional; + } - @include e(header-icon, $m: end) { - @extend %igx-expansion-panel__header-icon--end !optional; - } + @include e(header-icon, $m: end) { + @extend %igx-expansion-panel__header-icon--end !optional; + } - @include e(header-icon, $m: none) { - @extend %igx-expansion-panel__header-icon--none !optional; - } + @include e(header-icon, $m: none) { + @extend %igx-expansion-panel__header-icon--none !optional; + } - @include e(body) { - @extend %igx-expansion-panel__body !optional; - } + @include e(body) { + @extend %igx-expansion-panel__body !optional; + } - @include m(disabled) { - @extend %igx-expansion-panel--disabled !optional; - } + @include m(disabled) { + @extend %igx-expansion-panel--disabled !optional; + } - @include m(expanded) { - @extend %igx-expansion-panel--expanded !optional; + @include m(expanded) { + @extend %igx-expansion-panel--expanded !optional; + } } -} -@include b(igx-accordion) { - @extend %igx-title--no-ellipsis !optional; - @extend %igx-expanded-panel-margin !optional; + @include b(igx-accordion) { + @extend %igx-title--no-ellipsis !optional; + @extend %igx-expanded-panel-margin !optional; + } } diff --git a/projects/igniteui-angular/src/lib/core/styles/components/expansion-panel/_expansion-panel-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/expansion-panel/_expansion-panel-theme.scss index acb115b917b..b0a58b0dada 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/expansion-panel/_expansion-panel-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/expansion-panel/_expansion-panel-theme.scss @@ -1,3 +1,9 @@ +@use '../../base' as *; +@use '../../themes/schemas' as *; +@use '../../typography/base' as *; +@use 'sass:map'; +@use 'sass:meta'; + //// /// @group themes /// @access public @@ -48,8 +54,8 @@ $name: 'igx-expansion-panel'; $expansion-panel-schema: (); - @if map-has-key($schema, $name) { - $expansion-panel-schema: map-get($schema, $name); + @if map.has-key($schema, $name) { + $expansion-panel-schema: map.get($schema, $name); } @else { $expansion-panel-schema: $schema; } @@ -57,7 +63,7 @@ $theme: apply-palette($expansion-panel-schema, $palette); $border-radius: round-borders( - if($border-radius, $border-radius, map-get($expansion-panel-schema, 'border-radius')), 0, 16px + if($border-radius, $border-radius, map.get($expansion-panel-schema, 'border-radius')), 0, 16px ); @if not($header-title-color) and $header-background { @@ -65,7 +71,7 @@ } @if not($header-description-color) and $header-background { - @if type-of($header-background) == 'color' { + @if meta.type-of($header-background) == 'color' { $header-description-color: rgba(text-contrast($header-background), .8); } } @@ -97,7 +103,7 @@ /// @param {Map} $theme - The theme used to style the component. /// @requires {mixin} igx-css-vars /// @requires rem -/// @requires --var +/// @requires var-get @mixin igx-expansion-panel($theme) { @include igx-css-vars($theme); @@ -111,17 +117,17 @@ %igx-expansion-panel { display: flex; flex-direction: column; - border-radius: --var($theme, 'border-radius'); + border-radius: var-get($theme, 'border-radius'); overflow: hidden; } %igx-expansion-panel__header-title { - color: --var($theme, 'header-title-color'); + color: var-get($theme, 'header-title-color'); margin-#{$right}: rem(16px, 16px); } %igx-expansion-panel__header-description { - color: --var($theme, 'header-description-color'); + color: var-get($theme, 'header-description-color'); } %igx-expansion-panel__header-title, @@ -141,7 +147,7 @@ %igx-expanded-panel-margin { igx-expansion-panel[aria-expanded='true'] { - margin: --var($theme, 'expanded-margin') 0; + margin: var-get($theme, 'expanded-margin') 0; &:first-of-type { margin-top: 0; @@ -158,12 +164,12 @@ align-items: center; padding: $panel-padding; cursor: pointer; - background: --var($theme, 'header-background'); + background: var-get($theme, 'header-background'); &:focus, &:active { - background: --var($theme, 'header-focus-background'); + background: var-get($theme, 'header-focus-background'); outline: transparent; } } @@ -197,16 +203,16 @@ justify-content: center; user-select: none; - color: --var($theme, 'header-icon-color'); + color: var-get($theme, 'header-icon-color'); igx-icon { - color: --var($theme, 'header-icon-color'); + color: var-get($theme, 'header-icon-color'); } } %igx-expansion-panel__body { - color: --var($theme, 'body-color'); - background: --var($theme, 'body-background'); + color: var-get($theme, 'body-color'); + background: var-get($theme, 'body-background'); overflow: hidden; } @@ -215,13 +221,13 @@ %igx-expansion-panel__header-title, %igx-expansion-panel__header-description { - color: --var($theme, 'disabled-color') + color: var-get($theme, 'disabled-color') } %igx-expansion-panel__header-icon--start, %igx-expansion-panel__header-icon--end { igx-icon { - color: --var($theme, 'disabled-color'); + color: var-get($theme, 'disabled-color'); } } } @@ -237,9 +243,9 @@ description: 'subtitle-2', body: 'body-2') ) { - $title: map-get($categories, 'title'); - $description: map-get($categories, 'description'); - $body: map-get($categories, '$body'); + $title: map.get($categories, 'title'); + $description: map.get($categories, 'description'); + $body: map.get($categories, '$body'); %igx-expansion-panel__header-title { @include igx-type-style($type-scale, $title) { diff --git a/projects/igniteui-angular/src/lib/core/styles/components/grid-summary/_grid-summary-component.scss b/projects/igniteui-angular/src/lib/core/styles/components/grid-summary/_grid-summary-component.scss index 565db3d941c..1d77c492542 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/grid-summary/_grid-summary-component.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/grid-summary/_grid-summary-component.scss @@ -1,3 +1,6 @@ +@use '../../base' as *; +@use 'sass:string'; + //// /// @group components /// @author Marin Popov @@ -5,60 +8,68 @@ /// @requires {mixin} bem-elem /// @requires {mixin} bem-mod //// -@include b(igx-grid-summary) { - $this: bem--selector-to-string(&); - @include register-component(str-slice($this, 2, -1)); - @extend %igx-grid-summary !optional; +@mixin component { + @include b(igx-grid-summary) { + $this: bem--selector-to-string(&); + @include register-component( + $name: string.slice($this, 2, -1), + $deps: ( + igx-icon, + ) + ); - @include e(item) { - @extend %igx-grid-summary__item !optional; - } + @extend %igx-grid-summary !optional; - @include e(label) { - @extend %igx-grid-summary__label !optional; - } + @include e(item) { + @extend %igx-grid-summary__item !optional; + } - @include e(result) { - @extend %igx-grid-summary__result !optional; - } + @include e(label) { + @extend %igx-grid-summary__label !optional; + } - @include m(pinned) { - @extend %igx-grid-summary--pinned !optional; - } + @include e(result) { + @extend %igx-grid-summary__result !optional; + } - @include m(pinned-last) { - @extend %igx-grid-summary--pinned-last !optional; - } + @include m(pinned) { + @extend %igx-grid-summary--pinned !optional; + } - @include m(pinned-first) { - @extend %igx-grid-summary--pinned-first !optional; - } + @include m(pinned-last) { + @extend %igx-grid-summary--pinned-last !optional; + } - // TODO check if we need to implement styling for .igx-grid-summary--empty selector - @include m(empty) { - @extend %igx-grid-summary--empty !optional; - } + @include m(pinned-first) { + @extend %igx-grid-summary--pinned-first !optional; + } - @include m(fw) { - @extend %grid-summary--fixed-width !optional; - } + // TODO check if we need to implement styling for .igx-grid-summary--empty selector + @include m(empty) { + @extend %igx-grid-summary--empty !optional; + } - @include m(cosy) { - @extend %igx-grid-summary !optional; - @extend %igx-grid-summary--cosy !optional; + @include m(fw) { + @extend %grid-summary--fixed-width !optional; + } - @include e(item) { - @extend %igx-grid-summary__item--cosy !optional; + @include m(cosy) { + @extend %igx-grid-summary !optional; + @extend %igx-grid-summary--cosy !optional; + + @include e(item) { + @extend %igx-grid-summary__item--cosy !optional; + } } - } - @include m(compact) { - @extend %igx-grid-summary !optional; - @extend %igx-grid-summary--compact !optional; + @include m(compact) { + @extend %igx-grid-summary !optional; + @extend %igx-grid-summary--compact !optional; - @include e(item) { - @extend %igx-grid-summary__item--compact !optional; + @include e(item) { + @extend %igx-grid-summary__item--compact !optional; + } } } } diff --git a/projects/igniteui-angular/src/lib/core/styles/components/grid-summary/_grid-summary-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/grid-summary/_grid-summary-theme.scss index 0558813fb7e..77f4a9a9a9a 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/grid-summary/_grid-summary-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/grid-summary/_grid-summary-theme.scss @@ -1,3 +1,8 @@ +@use '../../base' as *; +@use '../../themes/schemas' as *; +@use 'sass:map'; +@use 'sass:meta'; + //// /// @group themes /// @access public @@ -49,8 +54,8 @@ $selector: '.igx-grid-summary'; $grid-summary-schema: (); - @if map-has-key($schema, $name) { - $grid-summary-schema: map-get($schema, $name); + @if map.has-key($schema, $name) { + $grid-summary-schema: map.get($schema, $name); } @else { $grid-summary-schema: $schema; } @@ -93,7 +98,7 @@ /// @requires {mixin} igx-css-vars /// @requires {mixin} ellipsis /// @requires rem -/// @requires --var +/// @requires var-get @mixin igx-grid-summary($theme) { @include igx-css-vars($theme); @@ -101,8 +106,8 @@ $right: if-ltr(right, left); $cell-pin: ( - style: --var($theme, 'pinned-border-width') --var($theme, 'pinned-border-style'), - color: --var($theme, 'pinned-border-color') + style: var-get($theme, 'pinned-border-width') var-get($theme, 'pinned-border-style'), + color: var-get($theme, 'pinned-border-color') ); $item-padding: ( @@ -122,8 +127,8 @@ display: flex; flex-direction: column; flex: 1 1 0%; - padding: map-get($summary-padding, 'comfortable'); - background: --var($theme, 'background-color', inherit); + padding: map.get($summary-padding, 'comfortable'); + background: var-get($theme, 'background-color', inherit); overflow: hidden; outline-style: none; @@ -136,16 +141,16 @@ } &:focus::after { - background: --var($theme, 'focus-background-color'); + background: var-get($theme, 'focus-background-color'); } } %igx-grid-summary--cosy { - padding: map-get($summary-padding, 'cosy'); + padding: map.get($summary-padding, 'cosy'); } %igx-grid-summary--compact { - padding: map-get($summary-padding, 'compact'); + padding: map.get($summary-padding, 'compact'); } %igx-grid-summary--pinned { @@ -158,47 +163,47 @@ } %igx-grid-summary--pinned-last { - border-#{$right}: map-get($cell-pin, 'style') map-get($cell-pin, 'color'); + border-#{$right}: map.get($cell-pin, 'style') map.get($cell-pin, 'color'); @media print { - border-right: map-get($cell-pin, 'style') #999; + border-right: map.get($cell-pin, 'style') #999; } } %igx-grid-summary--pinned-first { - border-#{$left}: map-get($cell-pin, 'style') map-get($cell-pin, 'color'); + border-#{$left}: map.get($cell-pin, 'style') map.get($cell-pin, 'color'); @media print { - border-left: map-get($cell-pin, 'style') #999; + border-left: map.get($cell-pin, 'style') #999; } } %igx-grid-summary__item { display: flex; align-items: center; - padding: map-get($item-padding, 'comfortable'); + padding: map.get($item-padding, 'comfortable'); font-size: rem(12px); position: relative; } %igx-grid-summary__item--cosy { - padding: map-get($item-padding, 'cosy'); + padding: map.get($item-padding, 'cosy'); } %igx-grid-summary__item--compact { - padding: map-get($item-padding, 'compact'); + padding: map.get($item-padding, 'compact'); } %igx-grid-summary__label { - color: --var($theme, 'label-color'); + color: var-get($theme, 'label-color'); min-width: rem(30px); margin-#{$right}: rem(3px); &:hover { - color: --var($theme, 'label-hover-color'); + color: var-get($theme, 'label-hover-color'); } } %igx-grid-summary__result { - color: --var($theme, 'result-color'); + color: var-get($theme, 'result-color'); font-weight: 600; flex: 1 1 auto; text-align: #{$right}; diff --git a/projects/igniteui-angular/src/lib/core/styles/components/grid-toolbar/_grid-toolbar-component.scss b/projects/igniteui-angular/src/lib/core/styles/components/grid-toolbar/_grid-toolbar-component.scss index 08431445eba..56dba5214ec 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/grid-toolbar/_grid-toolbar-component.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/grid-toolbar/_grid-toolbar-component.scss @@ -1,3 +1,6 @@ +@use '../../base' as *; +@use 'sass:string'; + //// /// @group components /// @author Marin Popov @@ -5,51 +8,62 @@ /// @requires {mixin} bem-elem /// @requires {mixin} bem-mod //// -@include b(igx-grid-toolbar) { - $this: bem--selector-to-string(&); - @include register-component(str-slice($this, 2, -1)); - @extend %igx-grid-toolbar !optional; +@mixin component { + @include b(igx-grid-toolbar) { + $this: bem--selector-to-string(&); + @include register-component( + $name: string.slice($this, 2, -1), + $deps: ( + igx-button, + igx-column-actions, + igx-icon, + igx-progress-linear, + ) + ); - @include e(title){ - @extend %igx-grid-toolbar__title !optional; - } + @extend %igx-grid-toolbar !optional; - @include e(custom-content){ - @extend %igx-grid-toolbar__custom-content !optional; - } + @include e(title){ + @extend %igx-grid-toolbar__title !optional; + } - @include e(actions){ - @extend %igx-grid-toolbar__actions !optional; - } + @include e(custom-content){ + @extend %igx-grid-toolbar__custom-content !optional; + } - @include e(progress-bar){ - @extend %igx-grid-toolbar__progress-bar !optional; - } + @include e(actions){ + @extend %igx-grid-toolbar__actions !optional; + } - @include e(adv-filter, $m: 'filtered') { - @extend %igx-grid-toolbar__adv-filter--filtered !optional; - } + @include e(progress-bar){ + @extend %igx-grid-toolbar__progress-bar !optional; + } - @include e(dropdown){ - @extend %igx-grid-toolbar__dropdown !optional; - } + @include e(adv-filter, $m: 'filtered') { + @extend %igx-grid-toolbar__adv-filter--filtered !optional; + } - @include e(dd-list-items){ - @extend %igx-grid-toolbar__dd-list-items !optional; - } + @include e(dropdown){ + @extend %igx-grid-toolbar__dropdown !optional; + } - @include e(dd-list){ - @extend %igx-grid-toolbar__dd-list !optional; - } + @include e(dd-list-items){ + @extend %igx-grid-toolbar__dd-list-items !optional; + } - @include m(cosy){ - @extend %igx-grid-toolbar !optional; - @extend %igx-grid-toolbar--cosy !optional; - } + @include e(dd-list){ + @extend %igx-grid-toolbar__dd-list !optional; + } - @include m(compact){ - @extend %igx-grid-toolbar !optional; - @extend %igx-grid-toolbar--compact !optional; + @include m(cosy){ + @extend %igx-grid-toolbar !optional; + @extend %igx-grid-toolbar--cosy !optional; + } + + @include m(compact){ + @extend %igx-grid-toolbar !optional; + @extend %igx-grid-toolbar--compact !optional; + } } } diff --git a/projects/igniteui-angular/src/lib/core/styles/components/grid-toolbar/_grid-toolbar-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/grid-toolbar/_grid-toolbar-theme.scss index f79e3aecb77..0b5b15fd5e7 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/grid-toolbar/_grid-toolbar-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/grid-toolbar/_grid-toolbar-theme.scss @@ -1,3 +1,7 @@ +@use '../../base' as *; +@use '../../themes/schemas' as *; +@use 'sass:map'; + //// /// @group themes /// @access public @@ -50,8 +54,8 @@ $selector: 'igx-grid-toolbar, .igx-grid-toolbar__dd-list'; $grid-toolbar-schema: (); - @if map-has-key($schema, $name) { - $grid-toolbar-schema: map-get($schema, $name); + @if map.has-key($schema, $name) { + $grid-toolbar-schema: map.get($schema, $name); } @else { $grid-toolbar-schema: $schema; } @@ -104,11 +108,11 @@ /// @requires {mixin} ellipsis /// @requires rem /// @requires em -/// @requires --var +/// @requires var-get @mixin igx-grid-toolbar($theme) { @include igx-css-vars($theme); - $variant: map-get($theme, variant); + $variant: map.get($theme, variant); $bootstrap-theme: $variant == 'bootstrap'; $left: if-ltr(left, right); @@ -147,22 +151,22 @@ justify-content: space-between; grid-row: 1; font-size: $grid-toolbar-fs; - border-bottom: 1px solid igx-color(map-get($theme, 'palette'), 'grays', 300); - background: --var($theme, 'background-color'); + border-bottom: 1px solid igx-color(map.get($theme, 'palette'), 'grays', 300); + background: var-get($theme, 'background-color'); height: auto; - min-height: map-get($grid-toolbar-height, 'comfortable'); + min-height: map.get($grid-toolbar-height, 'comfortable'); position: relative; @include if-ltr() { - padding: map-get($grid-toolbar-padding, 'comfortable'); + padding: map.get($grid-toolbar-padding, 'comfortable'); } @include if-rtl() { - padding: map-get($grid-toolbar-padding-rtl, 'comfortable'); + padding: map.get($grid-toolbar-padding-rtl, 'comfortable'); } [igxButton] { - margin-#{$left}: map-get($grid-toolbar-spacer, 'comfortable'); + margin-#{$left}: map.get($grid-toolbar-spacer, 'comfortable'); &:first-of-type { margin-#{$left}: 0; @@ -188,41 +192,41 @@ } %igx-grid-toolbar--cosy { - min-height: map-get($grid-toolbar-height, 'cosy'); + min-height: map.get($grid-toolbar-height, 'cosy'); @include if-ltr() { - padding: map-get($grid-toolbar-padding, 'cosy'); + padding: map.get($grid-toolbar-padding, 'cosy'); } @include if-rtl() { - padding: map-get($grid-toolbar-padding-rtl, 'cosy'); + padding: map.get($grid-toolbar-padding-rtl, 'cosy'); } [igxButton] { - margin-#{$left}: map-get($grid-toolbar-spacer, 'cosy'); + margin-#{$left}: map.get($grid-toolbar-spacer, 'cosy'); } } %igx-grid-toolbar--compact { - min-height: map-get($grid-toolbar-height, 'compact'); + min-height: map.get($grid-toolbar-height, 'compact'); @include if-ltr() { - padding: map-get($grid-toolbar-padding, 'compact'); + padding: map.get($grid-toolbar-padding, 'compact'); } @include if-rtl() { - padding: map-get($grid-toolbar-padding-rtl, 'compact'); + padding: map.get($grid-toolbar-padding-rtl, 'compact'); } [igxButton] { - margin-#{$left}: map-get($grid-toolbar-spacer, 'compact'); + margin-#{$left}: map.get($grid-toolbar-spacer, 'compact'); } } %igx-grid-toolbar__title { - color: --var($theme, 'title-text-color'); + color: var-get($theme, 'title-text-color'); flex: 1 1 auto; @include ellipsis(); max-width: 40ch; - margin-#{$right}: map-get($grid-toolbar-spacer, 'comfortable') + margin-#{$right}: map.get($grid-toolbar-spacer, 'comfortable') } %igx-grid-toolbar__custom-content { @@ -236,11 +240,11 @@ display: flex; align-items: center; flex-flow: row wrap; - margin-#{$left}: map-get($grid-toolbar-spacer, 'comfortable'); + margin-#{$left}: map.get($grid-toolbar-spacer, 'comfortable'); > * { display: flex; - margin-#{$left}: map-get($grid-toolbar-spacer, 'comfortable'); + margin-#{$left}: map.get($grid-toolbar-spacer, 'comfortable'); &:first-child { margin-#{$left}: 0; @@ -272,28 +276,28 @@ bottom: rem(-1px); height: rem(2px); overflow: hidden; - background: --var($theme, 'background-color'); + background: var-get($theme, 'background-color'); igx-linear-bar > * { border-radius: 0; &:first-child > div { - background: igx-color(map-get($theme, 'palette'), 'secondary'); + background: igx-color(map.get($theme, 'palette'), 'secondary'); } } } %igx-grid-toolbar__adv-filter--filtered { - border-color: igx-color(map-get($theme, 'palette'), 'secondary') !important; + border-color: igx-color(map.get($theme, 'palette'), 'secondary') !important; @if $bootstrap-theme { border-width: 2px; - border-color: igx-color(map-get($theme, 'palette'), 'primary', 800) !important; - color: igx-color(map-get($theme, 'palette'), 'primary', 800); + border-color: igx-color(map.get($theme, 'palette'), 'primary', 800) !important; + color: igx-color(map.get($theme, 'palette'), 'primary', 800); &:hover, &:focus { - background: igx-color(map-get($theme, 'palette'), 'primary', 800); + background: igx-color(map.get($theme, 'palette'), 'primary', 800); } } } @@ -304,7 +308,7 @@ %igx-grid-toolbar__dd-list { list-style: none; - background: --var($theme, 'dropdown-background'); + background: var-get($theme, 'dropdown-background'); margin: 0; padding: 0; box-shadow: igx-elevation($elevation: 8); @@ -314,17 +318,17 @@ cursor: pointer; position: relative; padding: em(8px) em(16px); - color: --var($theme, 'item-text-color'); + color: var-get($theme, 'item-text-color'); white-space: nowrap; &:hover { - background: --var($theme, 'item-hover-background'); - color: --var($theme, 'item-hover-text-color'); + background: var-get($theme, 'item-hover-background'); + color: var-get($theme, 'item-hover-text-color'); } &:focus { - background: --var($theme, 'item-focus-background'); - color: --var($theme, 'item-focus-text-color'); + background: var-get($theme, 'item-focus-background'); + color: var-get($theme, 'item-focus-text-color'); } } } diff --git a/projects/igniteui-angular/src/lib/core/styles/components/grid/_advanced-filtering-component.scss b/projects/igniteui-angular/src/lib/core/styles/components/grid/_advanced-filtering-component.scss index 5ee8806dc0c..2fa3ccff0cb 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/grid/_advanced-filtering-component.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/grid/_advanced-filtering-component.scss @@ -1,3 +1,5 @@ +@use '../../base' as *; + //// /// @access private /// @group components @@ -6,7 +8,7 @@ /// @requires {mixin} bem-elem /// @requires {mixin} bem-mod //// -@mixin _advanced-filtering-partial { +@mixin advanced-filtering-partial { @include b(igx-advanced-filter) { @include _advanced-filtering-legend(); @include _advanced-filtering-tree(); diff --git a/projects/igniteui-angular/src/lib/core/styles/components/grid/_advanced-filtering-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/grid/_advanced-filtering-theme.scss index 650d4c0d660..1774defe083 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/grid/_advanced-filtering-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/grid/_advanced-filtering-theme.scss @@ -1,3 +1,6 @@ +@use '../../base' as *; +@use 'sass:map'; + //// /// @group themes /// @access private @@ -9,9 +12,9 @@ /// @param {Map} $palette - The palette map used as base for the component. /// @requires igx-color /// @requires rem -/// @requires --var -@mixin _advanced-filtering($theme, $palette) { - $variant: map-get($theme, variant); +/// @requires var-get +@mixin advanced-filtering($theme, $palette) { + $variant: map.get($theme, variant); $not-bootstrap-theme: $variant != 'bootstrap'; $bootstrap-theme: $variant == 'bootstrap'; @@ -29,7 +32,7 @@ width: 660px; min-width: 660px; max-width: 720px; - background-color: --var($theme, 'filtering-row-background'); + background-color: var-get($theme, 'filtering-row-background'); box-shadow: igx-elevation($elevation: 12); border-radius: rem(4px); } @@ -87,26 +90,26 @@ %filter-tree__line--and { - background: --var($theme, 'filtering-background-and'); + background: var-get($theme, 'filtering-background-and'); &-selected { - background: --var($theme, 'filtering-background-and--focus'); + background: var-get($theme, 'filtering-background-and--focus'); } &:focus { - box-shadow: inset 0 0 0 2px --var($theme, 'filtering-background-and--focus'); + box-shadow: inset 0 0 0 2px var-get($theme, 'filtering-background-and--focus'); } } %filter-tree__line--or { - background: --var($theme, 'filtering-background-or'); + background: var-get($theme, 'filtering-background-or'); &-selected { - background-color: --var($theme, 'filtering-background-or--focus'); + background-color: var-get($theme, 'filtering-background-or--focus'); } &:focus { - box-shadow: inset 0 0 0 2px --var($theme, 'filtering-background-or--focus'); + box-shadow: inset 0 0 0 2px var-get($theme, 'filtering-background-or--focus'); } } @@ -226,11 +229,11 @@ } %filter-legend__item--and::before { - background: --var($theme, 'filtering-background-and'); + background: var-get($theme, 'filtering-background-and'); } %filter-legend__item--or::before { - background: --var($theme, 'filtering-background-or'); + background: var-get($theme, 'filtering-background-or'); } %filter-con-menu { @@ -238,7 +241,7 @@ display: flex; flex-flow: column; width: 196px; - background-color: --var($theme, 'filtering-row-background'); + background-color: var-get($theme, 'filtering-row-background'); padding: rem(16px); margin-#{$left}: rem(16px); border-radius: rem(4px); @@ -286,13 +289,13 @@ position: absolute; top: rem(-18px); #{$right}: rem(-18px); - background-color: --var($theme, 'filtering-row-background'); + background-color: var-get($theme, 'filtering-row-background'); border: 1px solid igx-color($palette, 'grays', 200); &:hover, &:focus { @if $not-bootstrap-theme { - background-color: --var($theme, 'filtering-row-background'); + background-color: var-get($theme, 'filtering-row-background'); } } } diff --git a/projects/igniteui-angular/src/lib/core/styles/components/grid/_excel-filtering-component.scss b/projects/igniteui-angular/src/lib/core/styles/components/grid/_excel-filtering-component.scss index 47a7e8c76ce..49ce69b4d1c 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/grid/_excel-filtering-component.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/grid/_excel-filtering-component.scss @@ -1,3 +1,5 @@ +@use '../../base' as *; + //// /// @access private /// @group components @@ -7,7 +9,7 @@ /// @requires {mixin} bem-mod //// -@mixin _excel-filtering-partial { +@mixin excel-filtering-partial { @include b(igx-excel-filter) { @extend %grid-excel-filter !optional; diff --git a/projects/igniteui-angular/src/lib/core/styles/components/grid/_excel-filtering-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/grid/_excel-filtering-theme.scss index 0c51f9c226f..dfc7252165d 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/grid/_excel-filtering-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/grid/_excel-filtering-theme.scss @@ -1,3 +1,10 @@ +@use '../../base' as *; +@use '../../typography/base' as *; +@use '../../themes/schemas/dark' as *; +@use '../button-group/button-group-component' as *; +@use '../button-group/button-group-theme' as *; +@use 'sass:map'; + //// /// @group themes /// @access private @@ -9,11 +16,11 @@ /// @param {Map} $palette - The palette map used as base for the component. /// @requires igx-color /// @requires rem -/// @requires --var -@mixin _excel-filtering($theme, $palette) { +/// @requires var-get +@mixin excel-filtering($theme, $palette) { $left: if-ltr(left, right); $right: if-ltr(right, left); - $variant: map-get($theme, 'variant'); + $variant: map.get($theme, 'variant'); %grid-excel-filter { display: block; @@ -61,14 +68,14 @@ display: flex; flex-direction: column; height: 100%; - background: --var($theme, 'filtering-row-background'); + background: var-get($theme, 'filtering-row-background'); // TODO The border-radius should not be hardcoded. border-radius: rem(4px); @include igx-button-group(igx-button-group-theme( $shadow: none, $schema: $dark-schema, - $item-background: --var($theme, 'filtering-row-background'), + $item-background: var-get($theme, 'filtering-row-background'), $item-hover-background: igx-color($palette, 'grays', 100), $item-selected-background: igx-color($palette, 'grays', 100), $item-text-color: igx-color($palette, 'grays', 700), @@ -198,7 +205,7 @@ margin: initial; } - @include _icon-w-margin(rem(8px), $right); + @include icon-w-margin(rem(8px), $right); } } } @@ -327,7 +334,7 @@ %grid-excel-menu__secondary { width: 520px; min-width: 520px; - background: --var($theme, 'filtering-row-background'); + background: var-get($theme, 'filtering-row-background'); box-shadow: igx-elevation($elevation: 12); border-radius: rem(4px); } @@ -439,12 +446,12 @@ /// @param {Map} $type-scale - A typographic scale as produced by igx-type-scale. /// @param {Map} $categories [(haeder-comfortable: 'overline', header-compact: 'subtitle-1')] - The categories from the typographic scale used for type styles. /// @requires {mixin} igx-type-style -@mixin _excel-filtering-typography($type-scale, $categories: ( +@mixin excel-filtering-typography($type-scale, $categories: ( header-comfortable: 'overline', header-compact: 'subtitle-1') ) { - $header-comfortable: map-get($categories, 'header-comfortable'); - $header-compact: map-get($categories, 'header-compact'); + $header-comfortable: map.get($categories, 'header-comfortable'); + $header-compact: map.get($categories, 'header-compact'); %grid-excel-menu { diff --git a/projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-component.scss b/projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-component.scss index 53f3018f06e..a0579cfacfc 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-component.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-component.scss @@ -1,7 +1,9 @@ -@import './excel-filtering-component'; -@import './advanced-filtering-component'; -@import './group-by-area-component'; -@import './header-row-component'; +@use '../../base' as *; +@use './excel-filtering-component' as *; +@use './advanced-filtering-component' as *; +@use './group-by-area-component' as *; +@use './header-row-component' as *; +@use 'sass:string'; //// /// @group components @@ -9,759 +11,773 @@ /// @requires {mixin} bem-block /// @requires {mixin} bem-elem /// @requires {mixin} bem-mod -/// @requires {mixin} _excel-filtering-partial -/// @requires {mixin} _advanced-filtering-partial -/// @requires {mixin} _group-by-area +/// @requires {mixin} excel-filtering-partial +/// @requires {mixin} advanced-filtering-partial +/// @requires {mixin} group-by-area //// -@include b(igx-grid) { - $this: bem--selector-to-string(&); - @include register-component(str-slice($this, 2, -1)); - @extend %grid-display !optional; +@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-input-group, + igx-grid-toolbar, + igx-paginator, + igx-watermark, + ) + ); - @include e(caption) { - @extend %grid-caption !optional; - } - - @include e(tbody) { - @extend %grid-tbody-container !optional; - } - - @include e(tbody-content) { - @extend %grid-tbody !optional; + @extend %grid-display !optional; - &:focus { - @extend %disable-focus-styles !optional; + @include e(caption) { + @extend %grid-caption !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(tbody) { + @extend %grid-tbody-container !optional; } - } - - @include e(tfoot-thumb) { - @extend %grid-tfoot-thumb !optional; - } - @include e(footer) { - @extend %grid-footer !optional; - } + @include e(tbody-content) { + @extend %grid-tbody !optional; - @include e(tr) { - @extend %grid-row !optional; - - igx-display-container { - @extend %grid-display-container-tr !optional; + &:focus { + @extend %disable-focus-styles !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; + @include e(tbody-message) { + @extend %grid-tbody-message !optional; + } - igx-display-container { - @extend %grid-display-container-tr !optional; + @include e(loading) { + @extend %igx-grid__loading !optional; } - } - @include e(summaries, $m: 'body') { - @extend %grid-summaries !optional; - @extend %grid-summaries--body !optional; + @include e(tbody-scrollbar) { + @extend %grid-tbody-scrollbar !optional; + } - igx-display-container { - @extend %grid-display-container-tr !optional; + @include e(tbody-scrollbar-main) { + @extend %grid-tbody-scrollbar-main !optional; } - } - @include e(summaries-patch) { - @extend %grid-summaries-patch !optional; - } + @include e(tbody-scrollbar-start) { + @extend %grid-tbody-scrollbar-start !optional; + } - @include e(tr, $m: odd) { - @extend %grid-row--odd !optional; - } + @include e(tbody-scrollbar-end) { + @extend %grid-tbody-scrollbar-end !optional; + } - @include e(tr, $m: even) { - @extend %grid-row--even !optional; - } + @include e(scroll) { + @extend %grid-scroll !optional; + } - @include e(tr, $m: selected) { - @extend %grid-row--selected !optional; - } + @include e(scroll-start) { + @extend %grid-scroll-start !optional; + } - @include e(tr, $m: edited) { - @extend %igx-grid__tr--edited !optional; - } + @include e(scroll-main) { + @extend %grid-scroll-main !optional; + } - @include e(tr, $m: deleted) { - @extend %igx-grid__tr--deleted !optional; - } + @include e(tfoot) { + @extend %grid-tfoot !optional; - @include e(tr, $m: highlighted) { - @extend %igx-grid__tr--highlighted !optional; - } + &:focus { + @extend %disable-focus-styles !optional; + } + } - @include e(tr, $m: edit) { - @extend %igx-grid__tr--edit !optional; - } + @include e(tfoot-thumb) { + @extend %grid-tfoot-thumb !optional; + } - @include e(tr, $m: add-animate) { - @extend %igx-grid__tr--add-animate !optional; - } + @include e(footer) { + @extend %grid-footer !optional; + } - @include e(tr, $m: inner) { - @extend %igx-grid__tr--inner !optional; - } + @include e(tr) { + @extend %grid-row !optional; - @include e(tr, $m: group) { - @extend %grid-row--group !optional; - } + igx-display-container { + @extend %grid-display-container-tr !optional; + } + } - @include e(tr, $m: mrl) { - @extend %grid-row--mrl !optional; - } + @include e(tr-action) { + @extend %igx-grid__tr-action !optional + } - @include e(tr-container) { - @extend %igx-grid__tr-container !optional; - } + @include e(tr, $m: 'drag') { + @extend %igx-grid__tr--drag !optional; + } - @include e(tr-container, $m: active) { - @extend %igx-grid__tr-container--active !optional; - } + @include e(tr, $m: 'ghost') { + @extend %igx-grid__tr--ghost !optional; + } - @include e(td) { - @extend %grid-cell-display !optional; - } + @include e(drag-indicator) { + @extend %igx-grid__drag-indicator !optional; + } - @include e(td, $m: tree-cell ) { - @extend %igx-grid__td--tree-cell !optional; - } + @include e(drag-indicator, $m: 'header') { + @extend %igx-grid__drag-indicator--header !optional; + } - @include e(td, $m: active) { - @extend %grid-cell--active !optional; - } + @include e(drag-indicator, $m: 'off') { + @extend %igx-grid__drag-indicator--off !optional; + } - @include e(td, $m: selected) { - @extend %grid-cell--selected !optional; - } + @include e(tr, $m: 'mrl') { + @extend %grid-row--mrl !optional; + } - @include e(td, $m: column-selected) { - @extend %grid-cell--column-selected !optional; - } + @include e(tr, $mods: ('mrl', 'edit')) { + @extend %grid-row--edit-mrl !optional; + } - @include e(td, $mods: (selected, column-selected)) { - @extend %grid-cell--cross-selected !optional; - } + @include e(summaries) { + @extend %grid-summaries !optional; - @include e(td, $m: bool) { - @extend %igx-grid__td--bool !optional; - } + igx-display-container { + @extend %grid-display-container-tr !optional; + } + } - @include e(td, $m: bool-true) { - @extend %igx-grid__td--bool-true !optional; - } + @include e(summaries, $m: 'body') { + @extend %grid-summaries !optional; + @extend %grid-summaries--body !optional; - @include e(tr, $mods: (selected, filtered)) { - @extend %grid-row--selected--filtered !optional; - } + igx-display-container { + @extend %grid-display-container-tr !optional; + } + } - @include e(tr, $m: filtered) { - @extend %igx-grid-row--filtered !optional; - } + @include e(summaries-patch) { + @extend %grid-summaries-patch !optional; + } - @include e(tr, $m: expanded) { - @extend %igx-grid__tr--expanded !optional; - } + @include e(tr, $m: odd) { + @extend %grid-row--odd !optional; + } - @include e(tr, $m: pinned) { - @extend %igx-grid__tr--pinned !optional; - } + @include e(tr, $m: even) { + @extend %grid-row--even !optional; + } - @include e(tr, $m: pinned-top) { - @extend %igx-grid__tr--pinned-top !optional; - } + @include e(tr, $m: selected) { + @extend %grid-row--selected !optional; + } - @include e(tr, $m: pinned-bottom) { - @extend %igx-grid__tr--pinned-bottom !optional; - } + @include e(tr, $m: edited) { + @extend %igx-grid__tr--edited !optional; + } - @include e(tree-grouping-indicator) { - @extend %igx-grid__tree-grouping-indicator !optional; - } + @include e(tr, $m: deleted) { + @extend %igx-grid__tr--deleted !optional; + } - @include e(tree-loading-indicator) { - @extend %igx-grid__tree-loading-indicator !optional; - @extend %igx-grid__tree-loading-indicator !optional; - } + @include e(tr, $m: highlighted) { + @extend %igx-grid__tr--highlighted !optional; + } - @include e(td, $m: new) { - @extend %igx-grid__td--new !optional; - } + @include e(tr, $m: edit) { + @extend %igx-grid__tr--edit !optional; + } - @include e(td, $m: edited) { - @extend %igx-grid__td--edited !optional; - } + @include e(tr, $m: add-animate) { + @extend %igx-grid__tr--add-animate !optional; + } - @include e(td, $m: editing) { - @extend %igx-grid__td--editing !optional; - } + @include e(tr, $m: inner) { + @extend %igx-grid__tr--inner !optional; + } - @include e(tr, $m: disabled) { - @extend %igx-grid__tr--disabled !optional; - } + @include e(tr, $m: group) { + @extend %grid-row--group !optional; + } - @include e(td, $m: number) { - @extend %grid-cell-number !optional; - } + @include e(tr, $m: mrl) { + @extend %grid-row--mrl !optional; + } - @include e(td, $m: pinned) { - @extend %grid-cell--pinned !optional; - } + @include e(tr-container) { + @extend %igx-grid__tr-container !optional; + } - @include e(td, $m: pinned-last) { - @extend %grid-cell--pinned !optional; - @extend %grid-cell--pinned-last !optional; - } + @include e(tr-container, $m: active) { + @extend %igx-grid__tr-container--active !optional; + } - @include e(td, $m: pinned-first) { - @extend %grid-cell--pinned !optional; - @extend %grid-cell--pinned-first !optional; - } + @include e(td) { + @extend %grid-cell-display !optional; + } - @include e(td, $m: pinned-end) { - @extend %grid-cell-pinned--end !optional; - } + @include e(td, $m: tree-cell ) { + @extend %igx-grid__td--tree-cell !optional; + } - @include e(td, $m: fw) { - @extend %grid-cell--fixed-width !optional; - } + @include e(td, $m: active) { + @extend %grid-cell--active !optional; + } - @include e(td, $mods: (pinned, selected)) { - @extend %grid-cell--pinned-selected !optional; - } + @include e(td, $m: selected) { + @extend %grid-cell--selected !optional; + } - @include e(td, $mods: (pinned, column-selected)) { - @extend %grid-cell--pinned--column-selected !optional; - } + @include e(td, $m: column-selected) { + @extend %grid-cell--column-selected !optional; + } - @include e(td, $m: row-pinned-first) { - @extend %grid-cell--row-pinned-first !optional; - } + @include e(td, $mods: (selected, column-selected)) { + @extend %grid-cell--cross-selected !optional; + } - @include e(td, $m: pinned-chip) { - @extend %grid-cell--pinned-chip !optional; - } + @include e(td, $m: bool) { + @extend %igx-grid__td--bool !optional; + } - @include e(td-text) { - @extend %grid-cell-text !optional; - } + @include e(td, $m: bool-true) { + @extend %igx-grid__td--bool-true !optional; + } - @include e(cbx-padding) { - @extend %cbx-padding !optional; - } + @include e(tr, $mods: (selected, filtered)) { + @extend %grid-row--selected--filtered !optional; + } - @include e(cbx-selection) { - @extend %grid__cbx-selection !optional; - } + @include e(tr, $m: filtered) { + @extend %igx-grid-row--filtered !optional; + } - @include e(cbx-selection, $m: push) { - @extend %grid__cbx-selection--push !optional; - } + @include e(tr, $m: expanded) { + @extend %igx-grid__tr--expanded !optional; + } - @include e(group-row) { - @extend %igx-grid__group-row !optional; - } + @include e(tr, $m: pinned) { + @extend %igx-grid__tr--pinned !optional; + } - @include e(group-row, $m: active) { - @extend %igx-grid__group-row--active !optional; - } + @include e(tr, $m: pinned-top) { + @extend %igx-grid__tr--pinned-top !optional; + } - @include e(group-content) { - @extend %igx-grid__group-content !optional; - } + @include e(tr, $m: pinned-bottom) { + @extend %igx-grid__tr--pinned-bottom !optional; + } - @include e(row-indentation) { - @extend %igx-grid__row-indentation !optional; - } + @include e(tree-grouping-indicator) { + @extend %igx-grid__tree-grouping-indicator !optional; + } - @include e(grouping-indicator) { - @extend %igx-grid__grouping-indicator !optional; - } + @include e(tree-loading-indicator) { + @extend %igx-grid__tree-loading-indicator !optional; + } - @include e(scroll-on-drag-left) { - @extend %grid__scroll-on-drag-left !optional; - } + @include e(td, $m: new) { + @extend %igx-grid__td--new !optional; + } - @include e(scroll-on-drag-right) { - @extend %grid__scroll-on-drag-right !optional; - } + @include e(td, $m: edited) { + @extend %igx-grid__td--edited !optional; + } - @include e(scroll-on-drag-pinned) { - @extend %grid__scroll-on-drag-pinned !optional; - } + @include e(td, $m: editing) { + @extend %igx-grid__td--editing !optional; + } - @include e(drag-ghost-image) { - @extend %grid__drag-ghost-image !optional; - } + @include e(tr, $m: disabled) { + @extend %igx-grid__tr--disabled !optional; + } - @include e(drag-ghost-image-icon) { - @extend %grid__drag-ghost-image-icon !optional; - } + @include e(td, $m: number) { + @extend %grid-cell-number !optional; + } - @include e(drag-ghost-image-icon-group) { - @extend %grid__drag-ghost-image-icon-group !optional; - } + @include e(td, $m: pinned) { + @extend %grid-cell--pinned !optional; + } - @include e(drag-col-header) { - @extend %igx-grid__drag-col-header !optional; - } + @include e(td, $m: pinned-last) { + @extend %grid-cell--pinned !optional; + @extend %grid-cell--pinned-last !optional; + } - @include e(header-indentation) { - @extend %igx-grid__header-indentation !optional; - } + @include e(td, $m: pinned-first) { + @extend %grid-cell--pinned !optional; + @extend %grid-cell--pinned-first !optional; + } - @include e(header-indentation, $m: 'no-border') { - @extend %igx-grid__header-indentation--no-border !optional; - } + @include e(td, $m: pinned-end) { + @extend %grid-cell-pinned--end !optional; + } - @include e(group-expand-btn) { - @extend %igx-grid__group-expand-btn !optional; - } + @include e(td, $m: fw) { + @extend %grid-cell--fixed-width !optional; + } - @include e(group-expand-btn, $m: 'push') { - @extend %igx-grid__group-expand-btn--push !optional; - } + @include e(td, $mods: (pinned, selected)) { + @extend %grid-cell--pinned-selected !optional; + } - @include e(outlet) { - @extend %igx-grid__outlet !optional; - } + @include e(td, $mods: (pinned, column-selected)) { + @extend %grid-cell--pinned--column-selected !optional; + } - @include e(loading-outlet) { - @extend %igx-grid__loading-outlet !optional; - } + @include e(td, $m: row-pinned-first) { + @extend %grid-cell--row-pinned-first !optional; + } - @include e(row-editing-outlet) { - @extend %igx-grid__row-editing-outlet !optional; - } + @include e(td, $m: pinned-chip) { + @extend %grid-cell--pinned-chip !optional; + } - @include e(addrow-snackbar) { - @extend %igx-grid__addrow-snackbar !optional; - } + @include e(td-text) { + @extend %grid-cell-text !optional; + } - @include e(filtering-cell) { - @extend %igx-grid__filtering-cell !optional; - } + @include e(cbx-padding) { + @extend %cbx-padding !optional; + } - @include e(filtering-cell, $m: cosy) { - @extend %igx-grid__filtering-cell--cosy !optional; - } + @include e(cbx-selection) { + @extend %grid__cbx-selection !optional; + } - @include e(filtering-cell, $m: compact) { - @extend %igx-grid__filtering-cell--compact !optional; - } + @include e(cbx-selection, $m: push) { + @extend %grid__cbx-selection--push !optional; + } - @include e(filtering-cell, $m: 'selected') { - @extend %igx-grid__filtering-cell !optional; - @extend %igx-grid__filtering-cell--selected !optional; - } + @include e(group-row) { + @extend %igx-grid__group-row !optional; + } - @include e(filtering-cell-indicator) { - @extend %igx-grid__filtering-cell-indicator !optional; - } + @include e(group-row, $m: active) { + @extend %igx-grid__group-row--active !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(group-content) { + @extend %igx-grid__group-content !optional; + } - @include e(filtering-dropdown-items) { - @extend %igx-grid__filtering-dropdown-items !optional; - } + @include e(row-indentation) { + @extend %igx-grid__row-indentation !optional; + } - @include e(filtering-dropdown-text) { - @extend %igx-grid__filtering-dropdown-text !optional; - } + @include e(grouping-indicator) { + @extend %igx-grid__grouping-indicator !optional; + } - @include e(filtering-row) { - @extend %igx-grid__filtering-row !optional; - } + @include e(scroll-on-drag-left) { + @extend %grid__scroll-on-drag-left !optional; + } - @include e(filtering-row, $m: cosy) { - @extend %igx-grid__filtering-row--cosy !optional; - } + @include e(scroll-on-drag-right) { + @extend %grid__scroll-on-drag-right !optional; + } - @include e(filtering-row, $m: compact) { - @extend %igx-grid__filtering-row--compact !optional; - } + @include e(scroll-on-drag-pinned) { + @extend %grid__scroll-on-drag-pinned !optional; + } - @include e(filtering-row-editing-buttons) { - @extend %igx-grid__filtering-row-editing-buttons !optional; - } + @include e(drag-ghost-image) { + @extend %grid__drag-ghost-image !optional; + } - @include e(filtering-row-editing-buttons, $m: small) { - @extend %igx-grid__filtering-row-editing-buttons--small !optional; - } + @include e(drag-ghost-image-icon) { + @extend %grid__drag-ghost-image-icon !optional; + } - @include e(filtering-row-main) { - @extend %igx-grid__filtering-row-main !optional; - } + @include e(drag-ghost-image-icon-group) { + @extend %grid__drag-ghost-image-icon-group !optional; + } - @include e(filtering-row-scroll-start) { - @extend %igx-grid__filtering-scroll-start !optional; - } + @include e(drag-col-header) { + @extend %igx-grid__drag-col-header !optional; + } - @include e(filtering-row-scroll-end) { - @extend %igx-grid__filtering-scroll-end !optional; - } + @include e(header-indentation) { + @extend %igx-grid__header-indentation !optional; + } - @include e(hierarchical-indent) { - @extend %igx-grid__hierarchical-indent !optional; - } + @include e(header-indentation, $m: 'no-border') { + @extend %igx-grid__header-indentation--no-border !optional; + } - @include e(hierarchical-expander) { - @extend %igx-grid__hierarchical-expander !optional; - } + @include e(group-expand-btn) { + @extend %igx-grid__group-expand-btn !optional; + } - @include e(hierarchical-expander, $m: empty) { - @extend %igx-grid__hierarchical-expander !optional; - @extend %igx-grid__hierarchical-expander--empty !optional; - } + @include e(group-expand-btn, $m: 'push') { + @extend %igx-grid__group-expand-btn--push !optional; + } - @include e(hierarchical-expander, $m: header) { - @extend %igx-grid__hierarchical-expander--header !optional; - } + @include e(outlet) { + @extend %igx-grid__outlet !optional; + } - @include e(hierarchical-expander, $m: push) { - @extend %igx-grid__hierarchical-expander--push !optional; - } + @include e(loading-outlet) { + @extend %igx-grid__loading-outlet !optional; + } - @include e(hierarchical-indent, $m: scroll) { - @extend %igx-grid__hierarchical-indent--scroll !optional; - } + @include e(row-editing-outlet) { + @extend %igx-grid__row-editing-outlet !optional; + } - @include e(mrl-block) { - @extend %grid-mrl-block !optional; - } + @include e(addrow-snackbar) { + @extend %igx-grid__addrow-snackbar !optional; + } - @for $i from 1 through 10 { - @include e(row-indentation, $m: level-#{$i}) { - @extend %igx-grid__row-indentation--level-#{$i} !optional; + @include e(filtering-cell) { + @extend %igx-grid__filtering-cell !optional; } - @include e(group-row, $m: padding-level-#{$i}) { - @extend %igx-grid__group-row--padding-level-#{$i} !optional; + @include e(filtering-cell, $m: cosy) { + @extend %igx-grid__filtering-cell--cosy !optional; } - } - @for $i from 1 through 25 { - @include e(tree-cell, $m: padding-level-#{$i}) { - @extend %igx-grid__tree-cell--padding-level-#{$i} !optional; + @include e(filtering-cell, $m: compact) { + @extend %igx-grid__filtering-cell--compact !optional; } - } - @include m(cosy) { - @extend %grid-display !optional; + @include e(filtering-cell, $m: 'selected') { + @extend %igx-grid__filtering-cell !optional; + @extend %igx-grid__filtering-cell--selected !optional; + } - @include e(drag-indicator) { - @extend %igx-grid__drag-indicator--cosy !optional; + @include e(filtering-cell-indicator) { + @extend %igx-grid__filtering-cell-indicator !optional; } - @include e(cbx-padding) { - @extend %cbx-padding--cosy !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(cbx-selection, $m: push) { - @extend %grid__cbx-selection--push--cosy !optional; + @include e(filtering-dropdown-items) { + @extend %igx-grid__filtering-dropdown-items !optional; } - @include e(drag-ghost-image) { - @extend %grid__drag-ghost-image--cosy !optional; + @include e(filtering-dropdown-text) { + @extend %igx-grid__filtering-dropdown-text !optional; } - @include e(td) { - @extend %grid-cell-display--cosy !optional; + @include e(filtering-row) { + @extend %igx-grid__filtering-row !optional; } - @include e(group-content) { - @extend %igx-grid__group-content--cosy !optional; + @include e(filtering-row, $m: cosy) { + @extend %igx-grid__filtering-row--cosy !optional; } - @include e(row-indentation) { - @extend %igx-grid__row-indentation--cosy !optional; + @include e(filtering-row, $m: compact) { + @extend %igx-grid__filtering-row--compact !optional; } - @include e(header-indentation) { - @extend %igx-grid__header-indentation--cosy !optional; + @include e(filtering-row-editing-buttons) { + @extend %igx-grid__filtering-row-editing-buttons !optional; } - @include e(grouping-indicator) { - @extend %igx-grid__grouping-indicator--cosy !optional; + @include e(filtering-row-editing-buttons, $m: small) { + @extend %igx-grid__filtering-row-editing-buttons--small !optional; } - @include e(group-expand-btn) { - @extend %igx-grid__group-expand-btn--cosy !optional; + @include e(filtering-row-main) { + @extend %igx-grid__filtering-row-main !optional; } - @include e(group-row) { - @extend %igx-grid__group-row--cosy !optional; + @include e(filtering-row-scroll-start) { + @extend %igx-grid__filtering-scroll-start !optional; } - @include e(hierarchical-indent) { - @extend %igx-grid__hierarchical-indent--cosy !optional; + @include e(filtering-row-scroll-end) { + @extend %igx-grid__filtering-scroll-end !optional; } - @include e(hierarchical-indent, $m: scroll) { - @extend %igx-grid__hierarchical-indent--cosy--scroll !optional; + @include e(hierarchical-indent) { + @extend %igx-grid__hierarchical-indent !optional; } @include e(hierarchical-expander) { - @extend %igx-grid__hierarchical-expander--cosy !optional; + @extend %igx-grid__hierarchical-expander !optional; } @include e(hierarchical-expander, $m: empty) { - @extend %igx-grid__hierarchical-expander--cosy !optional; + @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--cosy !optional; + @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-cosy--level-#{$i} !optional; + @extend %igx-grid__row-indentation--level-#{$i} !optional; } @include e(group-row, $m: padding-level-#{$i}) { - @extend %igx-grid__group-row-cosy--padding-level-#{$i} !optional; + @extend %igx-grid__group-row--padding-level-#{$i} !optional; } } @for $i from 1 through 25 { @include e(tree-cell, $m: padding-level-#{$i}) { - @extend %igx-grid__tree-cell-cosy--padding-level-#{$i} !optional; + @extend %igx-grid__tree-cell--padding-level-#{$i} !optional; } } - @include e(td, $m: pinned-chip) { - @extend %grid-cell--pinned-chip--cosy !optional; - } - } - @include m(compact) { - @extend %grid-display !optional; + @include m(cosy) { + @extend %grid-display !optional; - @include e(drag-indicator) { - @extend %igx-grid__drag-indicator--compact !optional; - } + @include e(drag-indicator) { + @extend %igx-grid__drag-indicator--cosy !optional; + } - @include e(cbx-padding) { - @extend %cbx-padding--compact !optional; - } + @include e(cbx-padding) { + @extend %cbx-padding--cosy !optional; + } - @include e(cbx-selection, $m: push) { - @extend %grid__cbx-selection--push--compact !optional; - } + @include e(cbx-selection, $m: push) { + @extend %grid__cbx-selection--push--cosy !optional; + } - @include e(drag-ghost-image) { - @extend %grid__drag-ghost-image--compact !optional; - } + @include e(drag-ghost-image) { + @extend %grid__drag-ghost-image--cosy !optional; + } - @include e(td) { - @extend %grid-cell-display--compact !optional; - } + @include e(td) { + @extend %grid-cell-display--cosy !optional; + } - @include e(group-content) { - @extend %igx-grid__group-content--compact !optional; - } + @include e(group-content) { + @extend %igx-grid__group-content--cosy !optional; + } - @include e(row-indentation) { - @extend %igx-grid__row-indentation--compact !optional; - } + @include e(row-indentation) { + @extend %igx-grid__row-indentation--cosy !optional; + } - @include e(header-indentation) { - @extend %igx-grid__header-indentation--compact !optional; - } + @include e(header-indentation) { + @extend %igx-grid__header-indentation--cosy !optional; + } - @include e(grouping-indicator) { - @extend %igx-grid__grouping-indicator--compact !optional; - } + @include e(grouping-indicator) { + @extend %igx-grid__grouping-indicator--cosy !optional; + } - @include e(group-expand-btn) { - @extend %igx-grid__group-expand-btn--compact !optional; - } + @include e(group-expand-btn) { + @extend %igx-grid__group-expand-btn--cosy !optional; + } - @include e(group-row) { - @extend %igx-grid__group-row--compact !optional; - } + @include e(group-row) { + @extend %igx-grid__group-row--cosy !optional; + } - @include e(hierarchical-indent) { - @extend %igx-grid__hierarchical-indent--compact !optional; - } + @include e(hierarchical-indent) { + @extend %igx-grid__hierarchical-indent--cosy !optional; + } - @include e(hierarchical-indent, $m: scroll) { - @extend %igx-grid__hierarchical-indent--compact--scroll !optional; - } + @include e(hierarchical-indent, $m: scroll) { + @extend %igx-grid__hierarchical-indent--cosy--scroll !optional; + } - @include e(hierarchical-expander) { - @extend %igx-grid__hierarchical-expander--compact !optional; - } + @include e(hierarchical-expander) { + @extend %igx-grid__hierarchical-expander--cosy !optional; + } - @include e(hierarchical-expander, $m: empty) { - @extend %igx-grid__hierarchical-expander--compact !optional; - @extend %igx-grid__hierarchical-expander--empty !optional; - } + @include e(hierarchical-expander, $m: empty) { + @extend %igx-grid__hierarchical-expander--cosy !optional; + @extend %igx-grid__hierarchical-expander--empty !optional; + } - @include e(hierarchical-expander, $m: push) { - @extend %igx-grid__hierarchical-expander--push--compact !optional; - } + @include e(hierarchical-expander, $m: push) { + @extend %igx-grid__hierarchical-expander--push--cosy !optional; + } - @for $i from 1 through 10 { - @include e(row-indentation, $m: level-#{$i}) { - @extend %igx-grid__row-indentation-compact--level-#{$i} !optional; + @for $i from 1 through 10 { + @include e(row-indentation, $m: level-#{$i}) { + @extend %igx-grid__row-indentation-cosy--level-#{$i} !optional; + } + + @include e(group-row, $m: padding-level-#{$i}) { + @extend %igx-grid__group-row-cosy--padding-level-#{$i} !optional; + } } - @include e(group-row, $m: padding-level-#{$i}) { - @extend %igx-grid__group-row-compact--padding-level-#{$i} !optional; + @for $i from 1 through 25 { + @include e(tree-cell, $m: padding-level-#{$i}) { + @extend %igx-grid__tree-cell-cosy--padding-level-#{$i} !optional; + } } - } - @for $i from 1 through 25 { - @include e(tree-cell, $m: padding-level-#{$i}) { - @extend %igx-grid__tree-cell-compact--padding-level-#{$i} !optional; + @include e(td, $m: pinned-chip) { + @extend %grid-cell--pinned-chip--cosy !optional; } } - @include e(td, $m: pinned-chip) { - @extend %grid-cell--pinned-chip--compact !optional; - } - } + @include m(compact) { + @extend %grid-display !optional; - @include _excel-filtering-partial(); - @include _advanced-filtering-partial(); - @include _group-by-area(); - @include _header-row(); -} + @include e(drag-indicator) { + @extend %igx-grid__drag-indicator--compact !optional; + } -@include b(igx-drop-area) { - @extend %igx-drop-area !optional; + @include e(cbx-padding) { + @extend %cbx-padding--compact !optional; + } - @include m(hover) { - @extend %igx-drop-area--hover !optional; - } + @include e(cbx-selection, $m: push) { + @extend %grid__cbx-selection--push--compact !optional; + } - @include e(icon) { - @extend %igx-drop-area__icon !optional; - } + @include e(drag-ghost-image) { + @extend %grid__drag-ghost-image--compact !optional; + } - @include e(text) { - @extend %igx-drop-area__text !optional; - } + @include e(td) { + @extend %grid-cell-display--compact !optional; + } - @include m(compact) { - @extend %igx-drop-area !optional; - @extend %igx-drop-area--cosy !optional; + @include e(group-content) { + @extend %igx-grid__group-content--compact !optional; + } + + @include e(row-indentation) { + @extend %igx-grid__row-indentation--compact !optional; + } + + @include e(header-indentation) { + @extend %igx-grid__header-indentation--compact !optional; + } + + @include e(grouping-indicator) { + @extend %igx-grid__grouping-indicator--compact !optional; + } + + @include e(group-expand-btn) { + @extend %igx-grid__group-expand-btn--compact !optional; + } + + @include e(group-row) { + @extend %igx-grid__group-row--compact !optional; + } + + @include e(hierarchical-indent) { + @extend %igx-grid__hierarchical-indent--compact !optional; + } + + @include e(hierarchical-indent, $m: scroll) { + @extend %igx-grid__hierarchical-indent--compact--scroll !optional; + } + + @include e(hierarchical-expander) { + @extend %igx-grid__hierarchical-expander--compact !optional; + } + + @include e(hierarchical-expander, $m: empty) { + @extend %igx-grid__hierarchical-expander--compact !optional; + @extend %igx-grid__hierarchical-expander--empty !optional; + } + + @include e(hierarchical-expander, $m: push) { + @extend %igx-grid__hierarchical-expander--push--compact !optional; + } + + @for $i from 1 through 10 { + @include e(row-indentation, $m: level-#{$i}) { + @extend %igx-grid__row-indentation-compact--level-#{$i} !optional; + } + + @include e(group-row, $m: padding-level-#{$i}) { + @extend %igx-grid__group-row-compact--padding-level-#{$i} !optional; + } + } + + @for $i from 1 through 25 { + @include e(tree-cell, $m: padding-level-#{$i}) { + @extend %igx-grid__tree-cell-compact--padding-level-#{$i} !optional; + } + } + + @include e(td, $m: pinned-chip) { + @extend %grid-cell--pinned-chip--compact !optional; + } + } + + @include excel-filtering-partial(); + @include advanced-filtering-partial(); + @include group-by-area(); + @include header-row(); } - @include m(cosy) { + @include b(igx-drop-area) { @extend %igx-drop-area !optional; - @extend %igx-drop-area--compact !optional; - } -} -@include b(igx-group-label) { - @extend %igx-group-label !optional; + @include m(hover) { + @extend %igx-drop-area--hover !optional; + } - @include e(icon) { - @extend %igx-group-label__icon !optional; - } + @include e(icon) { + @extend %igx-drop-area__icon !optional; + } - @include e(column-name) { - @extend %igx-group-label__column-name !optional; - } + @include e(text) { + @extend %igx-drop-area__text !optional; + } + + @include m(compact) { + @extend %igx-drop-area !optional; + @extend %igx-drop-area--cosy !optional; + } - @include e(text) { - @extend %igx-group-label__text !optional; + @include m(cosy) { + @extend %igx-drop-area !optional; + @extend %igx-drop-area--compact !optional; + } } - @include e(count-badge) { - @extend %igx-group-label__count-badge !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-summary) { + @include m(active) { + @extend %igx-grid-summary--active !optional; + } } } diff --git a/projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-theme.scss index e1a9fee5710..4c96ca2f32a 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-theme.scss @@ -1,6 +1,11 @@ +@use '../../base' as *; +@use '../../themes/schemas' as *; +@use './excel-filtering-theme' as *; +@use './advanced-filtering-theme' as *; +@use 'sass:map'; +@use 'sass:meta'; +@use 'sass:color'; @use 'sass:math'; -@import './excel-filtering-theme'; -@import './advanced-filtering-theme'; //// /// @group themes @@ -209,6 +214,8 @@ $filtering-background-and--focus: null, $filtering-background-or--focus: null, $tree-filtered-text-color: null, + $tree-selected-filtered-row-text-color: null, + $tree-selected-filtered-cell-text-color: null, $body-summaries-background: null, $body-summaries-text-color: null, @@ -231,8 +238,8 @@ $selector: 'igx-grid, igx-hierarchical-grid, igx-tree-grid, igx-advanced-filtering-dialog, igx-grid-excel-style-filtering, .igx-excel-filter__secondary'; $grid-schema: (); - @if map-has-key($schema, $name) { - $grid-schema: map-get($schema, $name); + @if map.has-key($schema, $name) { + $grid-schema: map.get($schema, $name); } @else { $grid-schema: $schema; } @@ -240,18 +247,15 @@ $theme: apply-palette($grid-schema, $palette); $drop-area-border-radius: round-borders( - if($drop-area-border-radius, $drop-area-border-radius, map-get($grid-schema, 'drop-area-border-radius')), 0, 16px + if($drop-area-border-radius, $drop-area-border-radius, map.get($grid-schema, 'drop-area-border-radius')), 0, 16px ); - $tree-selected-filtered-row-text-color: rgba(text-contrast(map-get($theme, 'row-selected-background')), .5); - $tree-selected-filtered-cell-text-color: rgba(text-contrast(map-get($theme, 'cell-selected-background')), .5); - @if not($cell-selected-within-text-color) and $cell-selected-within-background { $cell-selected-within-text-color: text-contrast($cell-selected-within-background); } @if not($ghost-header-icon-color) and $ghost-header-background { - @if type-of($ghost-header-background) == 'color' { + @if meta.type-of($ghost-header-background) == 'color' { $ghost-header-icon-color: rgba(text-contrast($ghost-header-background), .07); } } @@ -260,7 +264,7 @@ $ghost-header-text-color: text-contrast($ghost-header-background); } - @if $header-background and type-of($header-background) == 'color' { + @if $header-background and meta.type-of($header-background) == 'color' { $header-background: to-opaque($header-background, igx-color($palette, 'surface')); } @@ -273,7 +277,7 @@ } @if not($header-border-color) and $header-background { - @if type-of($header-background) == 'color' { + @if meta.type-of($header-background) == 'color' { $header-border-color: rgba(text-contrast($header-background), .24); } } @@ -286,8 +290,8 @@ $row-odd-background: $content-background; } - @if $row-odd-background and type-of($row-odd-background) == 'color' and alpha($row-odd-background) != 1 { - $cbg: if($content-background, $content-background, map-get($theme, 'content-background')); + @if $row-odd-background and meta.type-of($row-odd-background) == 'color' and color.alpha($row-odd-background) != 1 { + $cbg: if($content-background, $content-background, map.get($theme, 'content-background')); $row-odd-background: to-opaque($row-odd-background, $cbg); } @@ -300,8 +304,8 @@ $row-even-background: $content-background; } - @if $row-even-background and type-of($row-even-background) == 'color' and alpha($row-even-background) != 1 { - $cbg: if($content-background, $content-background, map-get($theme, 'content-background')); + @if $row-even-background and meta.type-of($row-even-background) == 'color' and color.alpha($row-even-background) != 1 { + $cbg: if($content-background, $content-background, map.get($theme, 'content-background')); $row-even-background: to-opaque($row-even-background, $cbg); } @@ -311,7 +315,7 @@ } @if not($row-hover-background) and $content-background { - @if type-of($content-background) == 'color' { + @if meta.type-of($content-background) == 'color' { $row-hover-background: to-opaque(rgba(text-contrast($content-background), .08), $content-background) } } @@ -333,13 +337,13 @@ } @if not($row-border-color) and $content-background { - @if type-of($content-background) == 'color' { + @if meta.type-of($content-background) == 'color' { $row-border-color: rgba(text-contrast($content-background), .08) } } @if not($pinned-border-color) and $content-background { - @if type-of($content-background) == 'color' { + @if meta.type-of($content-background) == 'color' { $pinned-border-color: rgba(text-contrast($content-background), .08) } } @@ -365,7 +369,7 @@ } @if not($expand-all-icon-color) and $header-background { - @if type-of($header-background) == 'color' { + @if meta.type-of($header-background) == 'color' { $expand-all-icon-color: rgba(text-contrast($header-background), .87); } } @@ -391,13 +395,13 @@ } @if not($grouparea-color) and $grouparea-background { - @if type-of($grouparea-background) == 'color' { + @if meta.type-of($grouparea-background) == 'color' { $grouparea-color: rgba(text-contrast($grouparea-background), .8) } } @if not($grouparea-color) and $header-background { - @if type-of($header-background) == 'color' { + @if meta.type-of($header-background) == 'color' { $grouparea-color: rgba(text-contrast($header-background), .8) } } @@ -419,7 +423,7 @@ } @if not($filtering-header-background) and $header-background { - @if type-of($header-background) == 'color' and luminance($header-background) < .5 { + @if meta.type-of($header-background) == 'color' and luminance($header-background) < .5 { $filtering-header-background: to-opaque(lighten-color($header-background, 5%)); } @else { $filtering-header-background: to-opaque(darken-color($header-background, 5%)); @@ -431,7 +435,7 @@ } @if not($filtering-row-background) and $header-background { - @if type-of($header-background) == 'color' and luminance($header-background) < .5 { + @if meta.type-of($header-background) == 'color' and luminance($header-background) < .5 { $filtering-row-background: to-opaque(lighten-color($header-background, 5%)); } @else { $filtering-row-background: to-opaque(darken-color($header-background, 5%)); @@ -451,12 +455,12 @@ } @if not($grid-shadow) { - $grid-elevation: map-get($grid-schema, 'grid-elevation'); + $grid-elevation: map.get($grid-schema, 'grid-elevation'); $grid-shadow: igx-elevation($elevations, $grid-elevation); } @if not($drag-shadow) { - $drag-elevation: map-get($grid-schema, 'drag-elevation'); + $drag-elevation: map.get($grid-schema, 'drag-elevation'); $drag-shadow: igx-elevation($elevations, $drag-elevation); } @@ -575,23 +579,23 @@ /// @param {Map} $theme - The theme used to style the component. /// @requires {mixin} igx-css-vars /// @requires {mixin} ellipsis -/// @requires {mixin} _excel-filtering +/// @requires {mixin} excel-filtering /// @requires igx-color /// @requires igx-contrast-color /// @requires rem -/// @requires --var +/// @requires var-get @mixin igx-grid($theme) { @include igx-css-vars($theme); @include scale-in-ver-center(); - $palette: map-get($theme, 'palette'); + $palette: map.get($theme, 'palette'); - $variant: map-get($theme, variant); + $variant: map.get($theme, variant); $bootstrap-theme: $variant == 'bootstrap'; $not-bootstrap-theme: $variant != 'bootstrap'; - $cbx-size: map-get(( + $cbx-size: map.get(( material: rem(20px), fluent: rem(20px), bootstrap: rem(14px), @@ -599,7 +603,7 @@ ), $variant); $cbx-bs-size: rem(14px); - $grid-shadow: --var($theme, 'grid-shadow'); + $grid-shadow: var-get($theme, 'grid-shadow'); $left: if-ltr(left, right); $right: if-ltr(right, left); @@ -619,11 +623,11 @@ $grid-cell-pinned-style: 1px solid; $grid-cell-pinned-border-color: igx-color($palette, 'grays', 300); - $grid-header-border: --var($theme, 'header-border-width') --var($theme, 'header-border-style') --var($theme, 'header-border-color'); + $grid-header-border: var-get($theme, 'header-border-width') var-get($theme, 'header-border-style') var-get($theme, 'header-border-color'); $cell-pin: ( - style: --var($theme, 'pinned-border-width') --var($theme, 'pinned-border-style'), - color: --var($theme, 'pinned-border-color') + style: var-get($theme, 'pinned-border-width') var-get($theme, 'pinned-border-style'), + color: var-get($theme, 'pinned-border-color') ); $grid-header-padding: ( @@ -638,9 +642,9 @@ compact: rem(12px) ); - $cbx-padding: map-get($grid-cbx-padding, 'comfortable'); - $cbx-padding-cosy: map-get($grid-cbx-padding, 'cosy'); - $cbx-padding-compact: map-get($grid-cbx-padding, 'compact'); + $cbx-padding: map.get($grid-cbx-padding, 'comfortable'); + $cbx-padding-cosy: map.get($grid-cbx-padding, 'cosy'); + $cbx-padding-compact: map.get($grid-cbx-padding, 'compact'); $grid-header-height: ( comfortable: rem(50px), @@ -694,7 +698,7 @@ $drag-icon-size: rem(24px); $grouping-padding-right: rem(12px); - $grid-header-weight: map-get(( + $grid-header-weight: map.get(( material: 600, fluent: 800, bootstrap: 700, @@ -714,7 +718,7 @@ box-shadow: $grid-shadow; @if $variant == 'fluent' { - box-shadow: 0 0 0 1px --var($theme, 'grid-border-color'); + box-shadow: 0 0 0 1px var-get($theme, 'grid-border-color'); } outline-style: none; @@ -738,8 +742,8 @@ %grid-tfoot { position: relative; display: flex; - background: --var($theme, 'header-background'); - color: --var($theme, 'header-text-color'); + background: var-get($theme, 'header-background'); + color: var-get($theme, 'header-text-color'); overflow: hidden; outline-style: none; @@ -769,10 +773,9 @@ z-index: 2; - %grid__cbx-selection--push { align-items: flex-start; - padding-top: private-div(map-get($grid-header-height, 'comfortable') - rem(20px), 2); + padding-top: math.div(map.get($grid-header-height, 'comfortable') - rem(20px), 2); } %grid-row { @@ -794,7 +797,7 @@ %igx-grid__header-indentation, %igx-grid__row-indentation, %grid__cbx-selection { - border-bottom: --var($theme, 'header-border-width') --var($theme, 'header-border-style') --var($theme, 'header-border-color'); + border-bottom: var-get($theme, 'header-border-width') var-get($theme, 'header-border-style') var-get($theme, 'header-border-color'); } } } @@ -802,14 +805,14 @@ %grid-thead--cosy { %grid__cbx-selection--push--cosy { align-items: flex-start; - padding-top: private-div(map-get($grid-header-height, 'cosy') - rem(20px), 2); + padding-top: math.div(map.get($grid-header-height, 'cosy') - rem(20px), 2); } } %grid-thead--compact { %grid__cbx-selection--push--compact { align-items: flex-start; - padding-top: private-div(map-get($grid-header-height, 'compact') - rem(20px), 2); + padding-top: math.div(map.get($grid-header-height, 'compact') - rem(20px), 2); } } @@ -817,21 +820,21 @@ flex-basis: auto !important; align-items: center !important; border-bottom: $grid-header-border; - height: map-get($grid-header-height, 'comfortable'); + height: map.get($grid-header-height, 'comfortable'); } %grid-thead-title--pinned { - border-#{$right}: map-get($cell-pin, 'style') map-get($cell-pin, 'color') !important; + border-#{$right}: map.get($cell-pin, 'style') map.get($cell-pin, 'color') !important; } %grid-thead-title--cosy { - height: map-get($grid-header-height, 'cosy'); - padding: map-get($grid-cell-padding, 'cosy'); + height: map.get($grid-header-height, 'cosy'); + padding: map.get($grid-cell-padding, 'cosy'); } %grid-thead-title--compact { - height: map-get($grid-header-height, 'compact'); - padding: map-get($grid-cell-padding, 'compact'); + height: map.get($grid-header-height, 'compact'); + padding: map.get($grid-cell-padding, 'compact'); } %grid-thead-group { @@ -904,8 +907,8 @@ } %grid-cell-display { - border-#{$right}: 1px solid --var($theme, 'row-border-color'); - border-bottom: 1px solid --var($theme, 'row-border-color'); + border-#{$right}: 1px solid var-get($theme, 'row-border-color'); + border-bottom: 1px solid var-get($theme, 'row-border-color'); } } @@ -917,14 +920,14 @@ %grid__cbx-selection, %igx-grid__row-indentation, %igx-grid__drag-indicator { - border-bottom: 1px solid --var($theme, 'row-border-color'); + border-bottom: 1px solid var-get($theme, 'row-border-color'); } } %grid-tbody { position: relative; - background: --var($theme, 'content-background'); - color: --var($theme, 'content-text-color'); + background: var-get($theme, 'content-background'); + color: var-get($theme, 'content-text-color'); overflow: hidden; z-index: 1; outline-style: none; @@ -942,7 +945,7 @@ justify-content: center; align-items: center; height: 100%; - color: --var($theme, 'content-text-color'); + color: var-get($theme, 'content-text-color'); flex-direction: column; padding: rem(24px); } @@ -965,28 +968,31 @@ display: flex; flex-flow: row nowrap; width: 100%; - background: --var($theme, 'header-background'); + background: var-get($theme, 'header-background'); z-index: 10001; } %grid-thead-thumb { - background: --var($theme, 'header-background'); - border-#{$left}: 1px solid igx-color($palette, 'grays', 300); + background: var-get($theme, 'header-background'); + border-#{$left}: 1px solid var-get($theme, 'header-border-color'); } %grid-tfoot-thumb { - background: --var($theme, 'header-background'); - border-#{$left}: 1px solid igx-color($palette, 'grays', 300); + position: absolute; + top: 0; + #{$right}: 0; + background: var-get($theme, 'header-background'); + border-#{$left}: 1px solid var-get($theme, 'header-border-color'); } %grid-tbody-scrollbar { - background: --var($theme, 'content-background'); - border-#{$left}: 1px solid igx-color($palette, 'grays', 300); + background: var-get($theme, 'content-background'); + border-#{$left}: 1px solid var-get($theme, 'row-border-color'); position: relative; } %grid-tbody-scrollbar-start { - background: --var($theme, 'header-background'); + background: var-get($theme, 'header-background'); } %grid-tbody-scrollbar-main { @@ -994,11 +1000,11 @@ } %grid-tbody-scrollbar-end { - background: --var($theme, 'header-background'); + background: var-get($theme, 'header-background'); } %grid-scroll-start { - background: --var($theme, 'header-background'); + background: var-get($theme, 'header-background'); } %grid-scroll-main { @@ -1013,35 +1019,35 @@ %grid-row { display: flex; - background: --var($theme, 'content-background'); - border-bottom: 1px solid --var($theme, 'row-border-color'); + background: var-get($theme, 'content-background'); + border-bottom: 1px solid var-get($theme, 'row-border-color'); outline-style: none; position: relative; &:hover { - background: --var($theme, 'row-hover-background'); - color: --var($theme, 'row-hover-text-color'); + background: var-get($theme, 'row-hover-background'); + color: var-get($theme, 'row-hover-text-color'); %grid-cell--column-selected { - color: --var($theme, 'row-selected-hover-text-color'); - background: --var($theme, 'row-selected-hover-background'); + color: var-get($theme, 'row-selected-hover-text-color'); + background: var-get($theme, 'row-selected-hover-background'); } %grid-cell--cross-selected { - color: --var($theme, 'cell-selected-within-text-color'); - background: --var($theme, 'cell-selected-within-background'); + color: var-get($theme, 'cell-selected-within-text-color'); + background: var-get($theme, 'cell-selected-within-background'); } } &%igx-grid__tr--ghost { @include igx-css-vars(( name: 'igx-grid-row', - row-ghost-background: map-get($theme, 'row-ghost-background'), - row-drag-color: map-get($theme, 'row-drago-color') + row-ghost-background: map.get($theme, 'row-ghost-background'), + row-drag-color: map.get($theme, 'row-drago-color') )); - background: --var($theme, 'row-ghost-background'); - color: --var($theme, 'row-drag-color'); + background: var-get($theme, 'row-ghost-background'); + color: var-get($theme, 'row-drag-color'); z-index: 1; } } @@ -1050,7 +1056,7 @@ display: flex; align-items: center; justify-content: center; - padding: map-get($grid-cell-padding, 'comfortable'); + padding: map.get($grid-cell-padding, 'comfortable'); flex: 1 0 auto; // Fix for IE 11 min-width: calc(#{$drag-icon-size} + #{$cell-padding-comfortable}); @@ -1067,13 +1073,13 @@ } %igx-grid__drag-indicator--cosy { - padding: map-get($grid-cell-padding, 'cosy'); + padding: map.get($grid-cell-padding, 'cosy'); // Fix for IE 11 min-width: calc(#{$drag-icon-size} + #{$cell-padding-cosy}); } %igx-grid__drag-indicator--compact { - padding: map-get($grid-cell-padding, 'compact'); + padding: map.get($grid-cell-padding, 'compact'); // Fix for IE 11 min-width: calc(#{$drag-icon-size} + #{$cell-padding-compact}); } @@ -1083,7 +1089,7 @@ } %igx-grid__drag-indicator--off { - color: --var($theme, 'row-drag-color'); + color: var-get($theme, 'row-drag-color'); } %igx-grid__tr--drag { @@ -1091,40 +1097,40 @@ } %grid-row--odd { - background: --var($theme, 'row-odd-background'); - color: --var($theme, 'row-odd-text-color'); + background: var-get($theme, 'row-odd-background'); + color: var-get($theme, 'row-odd-text-color'); } %grid-row--even { - background: --var($theme, 'row-even-background'); - color: --var($theme, 'row-even-text-color'); + background: var-get($theme, 'row-even-background'); + color: var-get($theme, 'row-even-text-color'); } %grid-row--selected { - color: --var($theme, 'row-selected-text-color'); - background: --var($theme, 'row-selected-background'); + color: var-get($theme, 'row-selected-text-color'); + background: var-get($theme, 'row-selected-background'); %grid-cell--selected, %grid-cell--pinned-selected { - color: --var($theme, 'cell-selected-within-text-color'); - background: --var($theme, 'cell-selected-within-background'); + color: var-get($theme, 'cell-selected-within-text-color'); + background: var-get($theme, 'cell-selected-within-background'); } &:hover { - background: --var($theme, 'row-selected-hover-background'); - color: --var($theme, 'row-selected-hover-text-color'); + background: var-get($theme, 'row-selected-hover-background'); + color: var-get($theme, 'row-selected-hover-text-color'); %grid-cell--column-selected { - color: --var($theme, 'row-selected-hover-text-color'); - background: --var($theme, 'row-selected-hover-background'); + color: var-get($theme, 'row-selected-hover-text-color'); + background: var-get($theme, 'row-selected-hover-background'); } } %igx-grid__tree-grouping-indicator { - color: --var($theme, 'row-selected-text-color'); + color: var-get($theme, 'row-selected-text-color'); &:hover { - color: --var($theme, 'row-selected-text-color'); + color: var-get($theme, 'row-selected-text-color'); } } } @@ -1144,11 +1150,11 @@ } %igx-grid__tr--pinned-top { - border-bottom: map-get($cell-pin, 'style') map-get($cell-pin, 'color') !important; + border-bottom: map.get($cell-pin, 'style') map.get($cell-pin, 'color') !important; } %igx-grid__tr--pinned-bottom { - border-top: map-get($cell-pin, 'style') map-get($cell-pin, 'color') !important; + border-top: map.get($cell-pin, 'style') map.get($cell-pin, 'color') !important; position: absolute; bottom: 0; } @@ -1174,7 +1180,7 @@ } %igx-grid__tr--edit { - border-bottom: 1px solid --var($theme, 'edit-mode-color'); + border-bottom: 1px solid var-get($theme, 'edit-mode-color'); position: relative; &::after { @@ -1184,30 +1190,30 @@ width: 100%; top: rem(-1); #{$left}: 0; - background: --var($theme, 'edit-mode-color'); + background: var-get($theme, 'edit-mode-color'); } &%grid-row { - border-bottom: 1px solid --var($theme, 'edit-mode-color'); + border-bottom: 1px solid var-get($theme, 'edit-mode-color'); } %igx-grid__td--editing { border: none; %form-group-bundle--focus { - caret-color: --var($theme, 'edit-mode-color') !important; + caret-color: var-get($theme, 'edit-mode-color') !important; } %form-group-border { - background: --var($theme, 'edit-mode-color') !important; + background: var-get($theme, 'edit-mode-color') !important; } } [aria-readonly='true'] { - color: --var($theme, 'cell-disabled-color'); + color: var-get($theme, 'cell-disabled-color'); igx-icon { - color: --var($theme, 'cell-disabled-color'); + color: var-get($theme, 'cell-disabled-color'); } } } @@ -1235,38 +1241,38 @@ width: if($variant == 'indigo-design', rem(4px), rem(2px)); height: 100%; z-index: 10000; - background: --var($theme, 'edited-row-indicator'); + background: var-get($theme, 'edited-row-indicator'); } } %grid-row--group { position: relative; - background: --var($theme, 'header-background') !important; + background: var-get($theme, 'header-background') !important; } %igx-grid-row--filtered { %grid-cell-text { - color: --var($theme, 'tree-filtered-text-color'); + color: var-get($theme, 'tree-filtered-text-color'); } %igx-grid__tree-grouping-indicator { - color: --var($theme, 'tree-filtered-text-color'); + color: var-get($theme, 'tree-filtered-text-color'); &:hover { - color: --var($theme, 'tree-filtered-text-color'); + color: var-get($theme, 'tree-filtered-text-color'); } } %grid-cell--selected { %grid-cell-text { - color: --var($theme, 'tree-selected-filtered-cell-text-color'); + color: var-get($theme, 'tree-selected-filtered-cell-text-color'); } %igx-grid__tree-grouping-indicator { - color: --var($theme, 'tree-selected-filtered-cell-text-color'); + color: var-get($theme, 'tree-selected-filtered-cell-text-color'); &:hover { - color: --var($theme, 'tree-selected-filtered-cell-text-color'); + color: var-get($theme, 'tree-selected-filtered-cell-text-color'); } } } @@ -1274,27 +1280,27 @@ %grid-row--selected--filtered { %grid-cell-text { - color: --var($theme, 'tree-selected-filtered-row-text-color'); + color: var-get($theme, 'tree-selected-filtered-row-text-color'); } %igx-grid__tree-grouping-indicator { - color: --var($theme, 'tree-selected-filtered-row-text-color'); + color: var-get($theme, 'tree-selected-filtered-row-text-color'); &:hover { - color: --var($theme, 'tree-selected-filtered-row-text-color'); + color: var-get($theme, 'tree-selected-filtered-row-text-color'); } } %grid-cell--selected { %grid-cell-text { - color: --var($theme, 'tree-selected-filtered-cell-text-color'); + color: var-get($theme, 'tree-selected-filtered-cell-text-color'); } %igx-grid__tree-grouping-indicator { - color: --var($theme, 'tree-selected-filtered-cell-text-color'); + color: var-get($theme, 'tree-selected-filtered-cell-text-color'); &:hover { - color: --var($theme, 'tree-selected-filtered-cell-text-color'); + color: var-get($theme, 'tree-selected-filtered-cell-text-color'); } } } @@ -1309,10 +1315,10 @@ margin-#{$right}: rem(8); cursor: pointer; - color: --var($theme, 'expand-icon-color'); + color: var-get($theme, 'expand-icon-color'); &:hover { - color: --var($theme, 'expand-icon-hover-color') + color: var-get($theme, 'expand-icon-hover-color') } @include if-rtl() { @@ -1326,7 +1332,7 @@ margin-#{$right}: rem(8px, 16px); %circular-outer { - stroke: --var($theme, 'expand-icon-color'); + stroke: var-get($theme, 'expand-icon-color'); } > %circular-display { @@ -1341,7 +1347,7 @@ flex: 1 1 0%; align-items: center; outline-style: none; - padding: map-get($grid-cell-padding, 'comfortable'); + padding: map.get($grid-cell-padding, 'comfortable'); font-size: $grid-cell-fs; line-height: $grid-cell-lh; color: inherit; @@ -1357,11 +1363,11 @@ } %grid-cell-display--cosy { - padding: map-get($grid-cell-padding, 'cosy'); + padding: map.get($grid-cell-padding, 'cosy'); } %grid-cell-display--compact { - padding: map-get($grid-cell-padding, 'compact'); + padding: map.get($grid-cell-padding, 'compact'); } %grid-cell--fixed-width { @@ -1370,40 +1376,46 @@ } %grid-cell--active { - box-shadow: inset 0 0 0 1px --var($theme, 'cell-active-border-color'); + box-shadow: inset 0 0 0 1px var-get($theme, 'cell-active-border-color'); + + %igx-grid__filtering-cell, + %grid-cell-header { + border-#{$right}-color: var-get($theme, 'cell-active-border-color'); + border-bottom-color: var-get($theme, 'cell-active-border-color'); + } } %grid-cell--selected { - color: --var($theme, 'cell-selected-text-color'); - background: --var($theme, 'cell-selected-background'); + color: var-get($theme, 'cell-selected-text-color'); + background: var-get($theme, 'cell-selected-background'); // this is causing an issue https://github.com/IgniteUI/igniteui-angular/issues/4981 // border-bottom: 0; %igx-grid__tree-grouping-indicator { &:hover { - color: --var($theme, 'cell-selected-text-color'); + color: var-get($theme, 'cell-selected-text-color'); } } } %grid-cell--column-selected { - color: --var($theme, 'row-selected-text-color'); - background: --var($theme, 'row-selected-background'); + color: var-get($theme, 'row-selected-text-color'); + background: var-get($theme, 'row-selected-background'); } %grid-cell--cross-selected { - color: --var($theme, 'cell-selected-within-text-color'); - background: --var($theme, 'cell-selected-within-background'); + color: var-get($theme, 'cell-selected-within-text-color'); + background: var-get($theme, 'cell-selected-within-background'); } %igx-grid__td--new { - color: --var($theme, 'cell-new-color'); + color: var-get($theme, 'cell-new-color'); } %igx-grid__td--edited { %grid-cell-text { font-style: italic; - color: --var($theme, 'cell-edited-value-color'); + color: var-get($theme, 'cell-edited-value-color'); padding: 0 1px; } } @@ -1411,20 +1423,20 @@ %igx-grid__tr--deleted { %grid-cell-text { font-style: italic; - color: igx-color(map-get($theme, 'palette'), 'error'); + color: igx-color(map.get($theme, 'palette'), 'error'); text-decoration: line-through; } } %igx-grid__tr--disabled { %grid-cell-text { - color: --var($theme, 'cell-disabled-color'); + color: var-get($theme, 'cell-disabled-color'); } } %igx-grid__td--editing { - background: --var($theme, 'cell-editing-background') !important; - box-shadow: inset 0 0 0 rem(2px) --var($theme, 'edit-mode-color'); + background: var-get($theme, 'cell-editing-background') !important; + box-shadow: inset 0 0 0 rem(2px) var-get($theme, 'edit-mode-color'); padding: 0 !important; // Have a more stable visual editing experience @@ -1482,24 +1494,24 @@ } %grid-cell--pinned-selected { - color: --var($theme, 'cell-selected-text-color'); - background: --var($theme, 'cell-selected-background'); + color: var-get($theme, 'cell-selected-text-color'); + background: var-get($theme, 'cell-selected-background'); // this is causing an issue https://github.com/IgniteUI/igniteui-angular/issues/4981 // border-bottom: 0; } %grid-cell--pinned--column-selected { - color: --var($theme, 'row-selected-text-color'); - background: --var($theme, 'row-selected-background'); + color: var-get($theme, 'row-selected-text-color'); + background: var-get($theme, 'row-selected-background'); &:hover { - background: --var($theme, 'row-selected-hover-background'); - color: --var($theme, 'row-selected-text-color'); + background: var-get($theme, 'row-selected-hover-background'); + color: var-get($theme, 'row-selected-text-color'); } } %grid-cell--pinned-last { - border-#{$right}: map-get($cell-pin, 'style') map-get($cell-pin, 'color') !important; + border-#{$right}: map.get($cell-pin, 'style') map.get($cell-pin, 'color') !important; %igx-grid__filtering-cell, %grid-cell-header { @@ -1507,15 +1519,15 @@ } &%grid-cell--editing { - border-#{$right}: map-get($cell-pin, 'style') --var($theme, 'cell-selected-background') !important; + border-#{$right}: map.get($cell-pin, 'style') var-get($theme, 'cell-selected-background') !important; } } %grid-cell--pinned-first { - border-#{$left}: map-get($cell-pin, 'style') map-get($cell-pin, 'color') !important; + border-#{$left}: map.get($cell-pin, 'style') map.get($cell-pin, 'color') !important; &%grid-cell--editing { - border-#{$left}: map-get($cell-pin, 'style') --var($theme, 'cell-selected-background') !important; + border-#{$left}: map.get($cell-pin, 'style') var-get($theme, 'cell-selected-background') !important; } } @@ -1542,7 +1554,7 @@ font-size: $grid-head-fs; font-weight: $grid-head-fw; min-width: 0; - padding: map-get($grid-header-padding, 'comfortable'); + padding: map.get($grid-header-padding, 'comfortable'); border-#{$right}: $grid-header-border; outline-style: none; overflow: hidden; @@ -1550,19 +1562,19 @@ } %grid-cell-header--filtering { - background: --var($theme, 'filtering-header-background'); - color: --var($theme, 'filtering-header-text-color'); + background: var-get($theme, 'filtering-header-background'); + color: var-get($theme, 'filtering-header-text-color'); z-index: 3; } %grid-cell-header--cosy { - padding: map-get($grid-header-padding, 'cosy'); - min-height: map-get($grid-header-height, 'cosy'); + padding: map.get($grid-header-padding, 'cosy'); + min-height: map.get($grid-header-height, 'cosy'); } %grid-cell-header--compact { - padding: map-get($grid-header-padding, 'compact'); - min-height: map-get($grid-header-height, 'compact'); + padding: map.get($grid-header-padding, 'compact'); + min-height: map.get($grid-header-height, 'compact'); } %grid-cell-header-title { @@ -1573,20 +1585,16 @@ cursor: initial; flex-grow: 1; /* hey IE, the text should take most of the space */ // align-self: flex-end; /* commenting out for now on external request */ - line-height: private-div(map-get($grid-header-height, 'comfortable'), $grid-head-fs); - transition: opacity 250ms ease-in-out, color 250ms ease-in-out; - - @if $variant != 'indigo-design' { - opacity: .7; - } + line-height: math.div(map.get($grid-header-height, 'comfortable'), $grid-head-fs); + transition: color 250ms ease-in-out; } %grid-cell-header-title--cosy { - line-height: private-div(map-get($grid-header-height, 'cosy'), $grid-head-fs); + line-height: math.div(map.get($grid-header-height, 'cosy'), $grid-head-fs); } %grid-cell-header-title--compact { - line-height: private-div(map-get($grid-header-height, 'compact'), $grid-head-fs); + line-height: math.div(map.get($grid-header-height, 'compact'), $grid-head-fs); } %grid-cell-header-icons { @@ -1595,7 +1603,7 @@ justify-content: flex-end; user-select: none; min-width: 30px; /* sort-icon + filter icon width */ - height: map-get($grid-header-height, 'comfortable'); + height: map.get($grid-header-height, 'comfortable'); align-self: flex-end; &:empty { @@ -1621,7 +1629,6 @@ text-align: $right; font-family: sans-serif; line-height: rem(10px); - background: --var($theme, 'header-background'); } } } @@ -1635,12 +1642,12 @@ cursor: pointer; igx-icon { - color: --var($theme, 'expand-icon-color'); + color: var-get($theme, 'expand-icon-color'); } &:hover { igx-icon { - color: --var($theme, 'expand-icon-hover-color'); + color: var-get($theme, 'expand-icon-hover-color'); } } } @@ -1654,21 +1661,21 @@ } %igx-grid-th--selectable { - color: --var($theme, 'header-selected-text-color'); - background: --var($theme, 'header-selected-background'); + color: var-get($theme, 'header-selected-text-color'); + background: var-get($theme, 'header-selected-background'); opacity: if($variant != 'indigo-design', .7, 1); .sort-icon::after { - background: --var($theme, 'header-selected-background'); + background: var-get($theme, 'header-selected-background'); } } %igx-grid-th--selected { - color: --var($theme, 'header-selected-text-color'); - background: --var($theme, 'header-selected-background'); + color: var-get($theme, 'header-selected-text-color'); + background: var-get($theme, 'header-selected-background'); .sort-icon::after { - background: --var($theme, 'header-selected-background'); + background: var-get($theme, 'header-selected-background'); } } @@ -1682,7 +1689,7 @@ } %igx-grid-summary--active { - @extend %grid-cell--active; + @extend %grid-cell--active !optional; } %igx-grid-th--sortable { @@ -1699,10 +1706,10 @@ %igx-grid-th--sorted { .sort-icon { opacity: 1; - color: --var($theme, 'sorted-header-icon-color'); + color: var-get($theme, 'sorted-header-icon-color'); &:hover { - color: --var($theme, 'sortable-header-icon-hover-color'); + color: var-get($theme, 'sortable-header-icon-hover-color'); } } } @@ -1727,11 +1734,11 @@ } %grid-cell-header-icons--cosy { - height: map-get($grid-header-height, 'cosy'); + height: map.get($grid-header-height, 'cosy'); } %grid-cell-header-icons--compact { - height: map-get($grid-header-height, 'compact'); + height: map.get($grid-header-height, 'compact'); } %grid-cell-number { @@ -1785,7 +1792,7 @@ position: absolute; cursor: col-resize; width: 4px; - background: --var($theme, 'resize-line-color'); + background: var-get($theme, 'resize-line-color'); z-index: 2; &::before, @@ -1808,17 +1815,17 @@ %grid-summaries { display: flex; overflow: hidden; - background: --var($theme, 'root-summaries-background'); + background: var-get($theme, 'root-summaries-background'); outline-style: none; %igx-grid-summary__result { - color: --var($theme, 'root-summaries-text-color'); + color: var-get($theme, 'root-summaries-text-color'); } } %grid-summaries--body { - background: --var($theme, 'body-summaries-background'); - border-bottom: 1px dashed --var($theme, 'row-border-color'); + background: var-get($theme, 'body-summaries-background'); + border-bottom: 1px dashed var-get($theme, 'row-border-color'); &:last-of-type { border-bottom: none; @@ -1826,7 +1833,7 @@ // %igx-grid-summary__label, %igx-grid-summary__result { - color: --var($theme, 'body-summaries-text-color'); + color: var-get($theme, 'body-summaries-text-color'); } } @@ -1834,7 +1841,7 @@ background: inherit; position: relative; z-index: 1; - border-#{$right}: 1px solid --var($theme, 'header-border-color'); + border-#{$right}: 1px solid var-get($theme, 'header-border-color'); } // Column moving @@ -1858,7 +1865,7 @@ %igx-grid-th__drop-indicator--active { &%igx-grid-th__drop-indicator-left, &%igx-grid-th__drop-indicator-right { - border-#{$right}: 1px solid --var($theme, 'drop-indicator-color'); + border-#{$right}: 1px solid var-get($theme, 'drop-indicator-color'); } &::after, @@ -1874,13 +1881,13 @@ &::before { bottom: 0; border-width: 0 4px 4px; - border-color: transparent transparent --var($theme, 'drop-indicator-color'); + border-color: transparent transparent var-get($theme, 'drop-indicator-color'); } &::after { top: 0; border-width: 4px 4px 0; - border-color: --var($theme, 'drop-indicator-color') transparent transparent; + border-color: var-get($theme, 'drop-indicator-color') transparent transparent; } } @@ -1913,16 +1920,16 @@ position: absolute; display: flex; align-items: center; - background: --var($theme, 'ghost-header-background'); - color: --var($theme, 'ghost-header-text-color'); + background: var-get($theme, 'ghost-header-background'); + color: var-get($theme, 'ghost-header-text-color'); min-width: 168px; max-width: 320px; - height: map-get($grid-header-height, 'comfortable'); - min-height: map-get($grid-header-height, 'comfortable'); + height: map.get($grid-header-height, 'comfortable'); + min-height: map.get($grid-header-height, 'comfortable'); top: -99999px; #{$left}: -99999px; border: none; - box-shadow: --var($theme, 'drag-shadow'); + box-shadow: var-get($theme, 'drag-shadow'); overflow: hidden; z-index: 20; @@ -1942,42 +1949,44 @@ } %grid__drag-ghost-image--cosy { - height: map-get($grid-header-height, 'cosy'); - min-height: map-get($grid-header-height, 'cosy'); + height: map.get($grid-header-height, 'cosy'); + min-height: map.get($grid-header-height, 'cosy'); } %grid__drag-ghost-image--compact { - height: map-get($grid-header-height, 'compact'); - min-height: map-get($grid-header-height, 'compact'); + height: map.get($grid-header-height, 'compact'); + min-height: map.get($grid-header-height, 'compact'); } %grid__drag-ghost-image-icon { - color: --var($theme, 'ghost-header-icon-color'); + color: var-get($theme, 'ghost-header-icon-color'); margin-#{$right}: rem(12px); } %grid__drag-ghost-image-icon-group { - color: --var($theme, 'ghost-header-icon-color'); - padding: --var($grid-header-padding, 'comfortable'); + color: var-get($theme, 'ghost-header-icon-color'); + padding: var-get($grid-header-padding, 'comfortable'); padding-#{$right}: 0; margin-#{$right}: rem(8); } %igx-grid__drag-col-header { - background: --var($theme, 'header-background'); + background: var-get($theme, 'header-background'); %grid-cell-header { - opacity: .4; + > * { + opacity: .4; + } } } // Group by section %igx-grid__group-row { - background: --var($theme, 'group-row-background'); + background: var-get($theme, 'group-row-background'); display: flex; outline-style: none; - border-bottom: 1px solid --var($theme, 'row-border-color'); - min-height: map-get($grid-header-height, 'comfortable'); + border-bottom: 1px solid var-get($theme, 'row-border-color'); + min-height: map.get($grid-header-height, 'comfortable'); %igx-grid__drag-indicator { cursor: default; @@ -1986,31 +1995,31 @@ } %igx-grid__group-row--active { - background: --var($theme, 'group-row-selected-background'); - @extend %grid-cell--active; + background: var-get($theme, 'group-row-selected-background'); + @extend %grid-cell--active !optional; %igx-grid__grouping-indicator { - color: --var($theme, 'expand-icon-color'); + color: var-get($theme, 'expand-icon-color'); } %igx-grid__drag-indicator { - border: 1px solid --var($theme, 'cell-active-border-color'); + border: 1px solid var-get($theme, 'cell-active-border-color'); border-left-width: 0; border-right-width: 0; - box-shadow: inset 1px 0 0 0 --var($theme, 'cell-active-border-color'); + box-shadow: inset 1px 0 0 0 var-get($theme, 'cell-active-border-color'); } &:hover { - background: --var($theme, 'group-row-selected-background'); + background: var-get($theme, 'group-row-selected-background'); } } %igx-grid__group-row--cosy { - min-height: map-get($grid-header-height, 'cosy'); + min-height: map.get($grid-header-height, 'cosy'); } %igx-grid__group-row--compact { - min-height: map-get($grid-header-height, 'compact'); + min-height: map.get($grid-header-height, 'compact'); } %igx-group-label { @@ -2032,7 +2041,7 @@ user-select: none; igx-icon { - color: --var($theme, 'group-label-icon'); + color: var-get($theme, 'group-label-icon'); width: rem(16px); height: rem(16px); font-size: rem(16px); @@ -2040,35 +2049,35 @@ } %igx-group-label__column-name { - color: --var($theme, 'group-label-column-name-text'); + color: var-get($theme, 'group-label-column-name-text'); font-weight: 600; font-size: 12px; } %igx-group-label__count-badge { > div { - background: --var($theme, 'group-count-background'); - color: --var($theme, 'group-count-text-color'); + background: var-get($theme, 'group-count-background'); + color: var-get($theme, 'group-count-text-color'); font-size: $grid-head-fs; } } %igx-group-label__text { font-size: rem(13px); - color: --var($theme, 'group-label-text') + color: var-get($theme, 'group-label-text') } [dir='rtl'] { %igx-grid__group-content { - padding-#{$left}: map-get($grid-grouping-indicator-padding, 'comfortable'); + padding-#{$left}: map.get($grid-grouping-indicator-padding, 'comfortable'); } %igx-grid__group-content--cosy { - padding-#{$left}: map-get($grid-grouping-indicator-padding, 'cosy'); + padding-#{$left}: map.get($grid-grouping-indicator-padding, 'cosy'); } %igx-grid__group-content--compact{ - padding-#{$left}: map-get($grid-grouping-indicator-padding, 'compact'); + padding-#{$left}: map.get($grid-grouping-indicator-padding, 'compact'); } %igx-group-label { @@ -2087,8 +2096,8 @@ align-items: center; justify-content: flex-start; flex: 1 1 auto; - padding-#{$left}: map-get($grid-grouping-indicator-padding, 'comfortable'); - min-height: map-get($grid-header-height, 'comfortable'); + padding-#{$left}: map.get($grid-grouping-indicator-padding, 'comfortable'); + min-height: map.get($grid-header-height, 'comfortable'); &:focus { outline: transparent; @@ -2096,13 +2105,13 @@ } %igx-grid__group-content--cosy { - padding-#{$left}: map-get($grid-grouping-indicator-padding, 'cosy'); - min-height: map-get($grid-header-height, 'cosy'); + padding-#{$left}: map.get($grid-grouping-indicator-padding, 'cosy'); + min-height: map.get($grid-header-height, 'cosy'); } %igx-grid__group-content--compact{ - padding-#{$left}: map-get($grid-grouping-indicator-padding, 'compact'); - min-height: map-get($grid-header-height, 'compact'); + padding-#{$left}: map.get($grid-grouping-indicator-padding, 'compact'); + min-height: map.get($grid-header-height, 'compact'); } %igx-grid__row-indentation { @@ -2110,9 +2119,9 @@ display: flex; justify-content: center; align-items: center; - padding-#{$left}: map-get($grid-grouping-indicator-padding, 'comfortable'); - padding-#{$right}: map-get($grid-grouping-indicator-padding, 'comfortable'); - border-#{$right}: 1px solid --var($theme, 'header-border-color'); + padding-#{$left}: map.get($grid-grouping-indicator-padding, 'comfortable'); + padding-#{$right}: map.get($grid-grouping-indicator-padding, 'comfortable'); + border-#{$right}: 1px solid var-get($theme, 'header-border-color'); background: inherit; z-index: 1; @@ -2129,25 +2138,25 @@ %igx-button--icon { width: rem(28px); height: rem(28px); - color: --var($theme, 'expand-all-icon-color'); + color: var-get($theme, 'expand-all-icon-color'); } &:focus, &:hover { %igx-button--icon { - color: --var($theme, 'expand-all-icon-hover-color'); + color: var-get($theme, 'expand-all-icon-hover-color'); } } } %igx-grid__row-indentation--cosy { - padding-#{$left}: map-get($grid-grouping-indicator-padding, 'cosy'); - padding-#{$right}: map-get($grid-grouping-indicator-padding, 'cosy') + padding-#{$left}: map.get($grid-grouping-indicator-padding, 'cosy'); + padding-#{$right}: map.get($grid-grouping-indicator-padding, 'cosy') } %igx-grid__row-indentation--compact { - padding-#{$left}: map-get($grid-grouping-indicator-padding, 'compact'); - padding-#{$right}: map-get($grid-grouping-indicator-padding, 'compact') + padding-#{$left}: map.get($grid-grouping-indicator-padding, 'compact'); + padding-#{$right}: map.get($grid-grouping-indicator-padding, 'compact') } %igx-grid-grouparea { @@ -2157,10 +2166,10 @@ justify-content: flex-start; flex-wrap: wrap; border-bottom: $grid-header-border; - background: --var($theme, 'grouparea-background'); - color: --var($theme, 'grouparea-color'); - min-height: map-get($grouparea-min-height, 'comfortable'); - padding: map-get($grouparea-padding, 'comfortable'); + background: var-get($theme, 'grouparea-background'); + color: var-get($theme, 'grouparea-color'); + min-height: map.get($grouparea-min-height, 'comfortable'); + padding: map.get($grouparea-padding, 'comfortable'); z-index: 2; height: 100%; overflow: hidden; @@ -2193,8 +2202,8 @@ } %igx-grid-grouparea--cosy { - min-height: map-get($grouparea-min-height, 'cosy'); - padding: map-get($grouparea-padding, 'cosy'); + min-height: map.get($grouparea-min-height, 'cosy'); + padding: map.get($grouparea-padding, 'cosy'); %igx-chip { margin-top: rem(8px); @@ -2203,8 +2212,8 @@ } %igx-grid-grouparea--compact { - min-height: map-get($grouparea-min-height, 'compact'); - padding: map-get($grouparea-padding, 'compact'); + min-height: map.get($grouparea-min-height, 'compact'); + padding: map.get($grouparea-padding, 'compact'); %igx-chip { margin-top: rem(4px); @@ -2217,14 +2226,14 @@ display: flex; align-items: center; justify-content: flex-start; - height: map-get($drop-area-height, 'comfortable'); - border-radius: --var($theme, 'drop-area-border-radius'); - padding: map-get($grid-cell-padding, 'comfortable'); + height: map.get($drop-area-height, 'comfortable'); + border-radius: var-get($theme, 'drop-area-border-radius'); + padding: map.get($grid-cell-padding, 'comfortable'); flex: 1 0 0%; - background: --var($theme, 'drop-area-background'); + background: var-get($theme, 'drop-area-background'); %igx-drop-area__icon { - color: --var($theme, 'drop-area-icon-color'); + color: var-get($theme, 'drop-area-icon-color'); width: rem(16px); height: rem(16px); font-size: rem(16px); @@ -2233,41 +2242,42 @@ } %igx-drop-area--hover { - background: --var($theme, 'drop-area-on-drop-background'); + background: var-get($theme, 'drop-area-on-drop-background'); } %igx-drop-area--cosy { - height: map-get($drop-area-height, 'cosy'); - border-radius: --var($theme, 'drop-area-border-radius'); - padding: map-get($grid-cell-padding, 'cosy'); + height: map.get($drop-area-height, 'cosy'); + border-radius: var-get($theme, 'drop-area-border-radius'); + padding: map.get($grid-cell-padding, 'cosy'); } %igx-drop-area--compact { - height: map-get($drop-area-height, 'compact'); - border-radius: --var($theme, 'drop-area-border-radius'); - padding: map-get($grid-cell-padding, 'compact'); + height: map.get($drop-area-height, 'compact'); + border-radius: var-get($theme, 'drop-area-border-radius'); + padding: map.get($grid-cell-padding, 'compact'); } %igx-drop-area__text { @include ellipsis(); - color: --var($theme, 'drop-area-text-color'); + color: var-get($theme, 'drop-area-text-color'); font-size: rem(13px); } %igx-grid__grouping-indicator { position: relative; display: flex; + user-select: none; justify-content: center; align-items: center; z-index: 1; cursor: pointer; padding-#{$right}: $grouping-padding-right; - margin-#{$left}: #{map-get($grid-grouping-indicator-padding, 'comfortable')}; - min-height: map-get($grid-header-height, 'comfortable'); + margin-#{$left}: #{map.get($grid-grouping-indicator-padding, 'comfortable')}; + min-height: map.get($grid-header-height, 'comfortable'); igx-icon { - color: --var($theme, 'expand-icon-color'); + color: var-get($theme, 'expand-icon-color'); width: $indicator-icon-width; } @@ -2276,7 +2286,7 @@ outline-style: none; igx-icon { - color: --var($theme, 'expand-icon-hover-color'); + color: var-get($theme, 'expand-icon-hover-color'); } } @@ -2286,29 +2296,29 @@ } %igx-grid__grouping-indicator--cosy { - min-height: map-get($grid-header-height, 'cosy'); - margin-#{$left}: #{map-get($grid-grouping-indicator-padding, 'cosy')}; + min-height: map.get($grid-header-height, 'cosy'); + margin-#{$left}: #{map.get($grid-grouping-indicator-padding, 'cosy')}; } %igx-grid__grouping-indicator--compact { - min-height: map-get($grid-header-height, 'compact'); - margin-#{$left}: #{map-get($grid-grouping-indicator-padding, 'compact')}; + min-height: map.get($grid-header-height, 'compact'); + margin-#{$left}: #{map.get($grid-grouping-indicator-padding, 'compact')}; } %igx-grid__header-indentation { position: relative; - padding-#{$right}: map-get($grid-grouping-indicator-padding, 'comfortable'); - border-#{$right}: 1px solid --var($theme, 'header-border-color'); - background: --var($theme, 'header-background'); + padding-#{$right}: map.get($grid-grouping-indicator-padding, 'comfortable'); + border-#{$right}: 1px solid var-get($theme, 'header-border-color'); + background: var-get($theme, 'header-background'); z-index: 4; } %igx-grid__header-indentation--cosy { - padding-#{$right}: map-get($grid-grouping-indicator-padding, 'cosy'); + padding-#{$right}: map.get($grid-grouping-indicator-padding, 'cosy'); } %igx-grid__header-indentation--compact { - padding-#{$right}: map-get($grid-grouping-indicator-padding, 'compact'); + padding-#{$right}: map.get($grid-grouping-indicator-padding, 'compact'); } %igx-grid__group-expand-btn { @@ -2316,76 +2326,76 @@ cursor: pointer; user-select: none; top: calc(50% - 12px); - #{$left}: map-get($grid-grouping-indicator-padding, 'comfortable'); + #{$left}: map.get($grid-grouping-indicator-padding, 'comfortable'); &:hover { - color: --var($theme, 'expand-icon-hover-color'); + color: var-get($theme, 'expand-icon-hover-color'); } &%igx-grid__group-expand-btn--push { - top: private-div(map-get($grid-header-height, 'comfortable') - rem(24px), 2); + top: math.div(map.get($grid-header-height, 'comfortable') - rem(24px), 2); } } %igx-grid__group-expand-btn--cosy { - #{$left}: map-get($grid-grouping-indicator-padding, 'cosy'); + #{$left}: map.get($grid-grouping-indicator-padding, 'cosy'); &%igx-grid__group-expand-btn--push { - top: private-div(map-get($grid-header-height, 'cosy') - rem(24px), 2); + top: math.div(map.get($grid-header-height, 'cosy') - rem(24px), 2); } } %igx-grid__group-expand-btn--compact { - #{$left}: map-get($grid-grouping-indicator-padding, 'compact'); + #{$left}: map.get($grid-grouping-indicator-padding, 'compact'); &%igx-grid__group-expand-btn--push { - top: private-div(map-get($grid-header-height, 'compact') - rem(24px), 2); + top: math.div(map.get($grid-header-height, 'compact') - rem(24px), 2); } } @for $i from 1 through 10 { %igx-grid__row-indentation--level-#{$i} { - padding-#{$left}: calc(#{$i*map-get($grid-grouping-indicator-padding, 'comfortable')} + #{$indicator-icon-width}); + padding-#{$left}: calc(#{$i*map.get($grid-grouping-indicator-padding, 'comfortable')} + #{$indicator-icon-width}); } %igx-grid__group-row--padding-level-#{$i} { %igx-grid__grouping-indicator { - padding-#{$left}: #{$i*map-get($grid-grouping-indicator-padding, 'comfortable')}; + padding-#{$left}: #{$i*map.get($grid-grouping-indicator-padding, 'comfortable')}; } } %igx-grid__row-indentation-cosy--level-#{$i} { - padding-#{$left}: calc(#{$i*map-get($grid-grouping-indicator-padding, 'cosy')} + #{$indicator-icon-width}); + padding-#{$left}: calc(#{$i*map.get($grid-grouping-indicator-padding, 'cosy')} + #{$indicator-icon-width}); } %igx-grid__group-row-cosy--padding-level-#{$i} { %igx-grid__grouping-indicator { - padding-#{$left}: #{$i*map-get($grid-grouping-indicator-padding, 'cosy')}; + padding-#{$left}: #{$i*map.get($grid-grouping-indicator-padding, 'cosy')}; } } %igx-grid__row-indentation-compact--level-#{$i} { - padding-#{$left}: calc(#{$i*map-get($grid-grouping-indicator-padding, 'compact')} + #{$indicator-icon-width}); + padding-#{$left}: calc(#{$i*map.get($grid-grouping-indicator-padding, 'compact')} + #{$indicator-icon-width}); } %igx-grid__group-row-compact--padding-level-#{$i} { %igx-grid__grouping-indicator { - padding-#{$left}: #{$i*map-get($grid-grouping-indicator-padding, 'compact')}; + padding-#{$left}: #{$i*map.get($grid-grouping-indicator-padding, 'compact')}; } } } @for $i from 1 through 25 { %igx-grid__tree-cell--padding-level-#{$i} { - padding-#{$left}: #{$i*map-get($grid-grouping-indicator-padding, 'comfortable')}; + padding-#{$left}: #{$i*map.get($grid-grouping-indicator-padding, 'comfortable')}; } %igx-grid__tree-cell-cosy--padding-level-#{$i} { - padding-#{$left}: #{$i*map-get($grid-grouping-indicator-padding, 'cosy')}; + padding-#{$left}: #{$i*map.get($grid-grouping-indicator-padding, 'cosy')}; } %igx-grid__tree-cell-compact--padding-level-#{$i} { - padding-#{$left}: #{$i*map-get($grid-grouping-indicator-padding, 'compact')}; + padding-#{$left}: #{$i*map.get($grid-grouping-indicator-padding, 'compact')}; } } @@ -2430,8 +2440,8 @@ align-items: center; border-#{$right}: $grid-header-border; border-top: $grid-header-border; - height: map-get($grid-header-height, 'comfortable'); - padding: map-get($grid-header-padding, 'comfortable'); + height: map.get($grid-header-height, 'comfortable'); + padding: map.get($grid-header-padding, 'comfortable'); overflow: hidden; igx-chips-area { @@ -2448,8 +2458,8 @@ } %igx-grid__filtering-cell--selected { - color: --var($theme, 'header-selected-text-color'); - background: --var($theme, 'header-selected-background'); + color: var-get($theme, 'header-selected-text-color'); + background: var-get($theme, 'header-selected-background'); } %igx-grid__filtering-cell-indicator { @@ -2488,25 +2498,25 @@ } %igx-grid__filtering-cell--cosy { - height: map-get($grid-header-height, 'cosy'); - padding: map-get($grid-header-padding, 'comfortable'); + height: map.get($grid-header-height, 'cosy'); + padding: map.get($grid-header-padding, 'comfortable'); } %igx-grid__filtering-cell--compact { - height: map-get($grid-header-height, 'compact'); - padding: map-get($grid-header-padding, 'comfortable'); + height: map.get($grid-header-height, 'compact'); + padding: map.get($grid-header-padding, 'comfortable'); } %igx-grid__filtering-row { position: absolute; display: flex; width: 100%; - height: map-get($grid-header-height, 'comfortable'); - padding: map-get($grid-cell-padding, 'cosy'); + height: map.get($grid-header-height, 'comfortable'); + padding: map.get($grid-cell-padding, 'cosy'); align-items: center; justify-content: space-between; - background: --var($theme, 'filtering-row-background'); - color: --var($theme, 'filtering-row-text-color'); + background: var-get($theme, 'filtering-row-background'); + color: var-get($theme, 'filtering-row-text-color'); #{$left}: 0; bottom: 0; z-index: 3; @@ -2520,7 +2530,7 @@ #{$right}: 0; top: 0; bottom: 0; - box-shadow: 0 1px 0 --var($theme, 'filtering-row-background'), + box-shadow: 0 1px 0 var-get($theme, 'filtering-row-background'), 0 4px 10px rgba(0, 0, 0, .12); z-index: -1; } @@ -2533,7 +2543,7 @@ } igx-prefix:focus { - color: igx-color(map-get($theme, 'palette'), 'secondary'); + color: igx-color(map.get($theme, 'palette'), 'secondary'); } igx-suffix { @@ -2561,11 +2571,11 @@ } %igx-grid__filtering-row--cosy { - height: map-get($grid-header-height, 'cosy'); + height: map.get($grid-header-height, 'cosy'); } %igx-grid__filtering-row--compact { - height: map-get($grid-header-height, 'compact'); + height: map.get($grid-header-height, 'compact'); } %igx-grid__filtering-row-main { @@ -2620,7 +2630,7 @@ &::after { @extend %filtering-scroll-mask; #{$left}: calc(100% + 6px); - background: linear-gradient(to #{$right}, --var($theme, 'filtering-row-background'), transparent); + background: linear-gradient(to #{$right}, var-get($theme, 'filtering-row-background'), transparent); } @include if-rtl() { @@ -2639,7 +2649,7 @@ &::before { @extend %filtering-scroll-mask; #{$right}: calc(100% + 6px); - background: linear-gradient(to left, --var($theme, 'filtering-row-background'), transparent); + background: linear-gradient(to left, var-get($theme, 'filtering-row-background'), transparent); } @include if-rtl() { @@ -2657,7 +2667,7 @@ #{$left}: 0; width: 4px; height: 100%; - background: --var($theme, 'row-highlight'); + background: var-get($theme, 'row-highlight'); z-index: 3; } @@ -2673,41 +2683,41 @@ } %igx-grid__tr-container { - border-bottom: 1px solid --var($theme, 'row-border-color'); + border-bottom: 1px solid var-get($theme, 'row-border-color'); } %igx-grid__tr-container--active { - @extend %grid-cell--active; + @extend %grid-cell--active !optional; } %igx-grid__hierarchical-expander { user-select: none; background: inherit; - padding-#{$left}: map-get($hierarchical-grid-indent, 'comfortable'); - padding-#{$right}: map-get($hierarchical-grid-indent, 'comfortable'); + padding-#{$left}: map.get($hierarchical-grid-indent, 'comfortable'); + padding-#{$right}: map.get($hierarchical-grid-indent, 'comfortable'); display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 3; - color: --var($theme, 'expand-icon-color'); + color: var-get($theme, 'expand-icon-color'); &:focus { outline: none; igx-icon { - color: --var($theme, 'expand-icon-hover-color'); + color: var-get($theme, 'expand-icon-hover-color'); } } &:hover { igx-icon { - color: --var($theme, 'expand-icon-hover-color'); + color: var-get($theme, 'expand-icon-hover-color'); } } igx-icon { - color: --var($theme, 'expand-icon-color'); + color: var-get($theme, 'expand-icon-color'); max-width: $hierarchical-action-icon; min-width: $hierarchical-action-icon; } @@ -2723,18 +2733,18 @@ } %igx-grid__hierarchical-expander--cosy { - padding-#{$left}: map-get($hierarchical-grid-indent, 'cosy'); - padding-#{$right}: map-get($hierarchical-grid-indent, 'cosy'); + padding-#{$left}: map.get($hierarchical-grid-indent, 'cosy'); + padding-#{$right}: map.get($hierarchical-grid-indent, 'cosy'); } %igx-grid__hierarchical-expander--compact { - padding-#{$left}: map-get($hierarchical-grid-indent, 'compact'); - padding-#{$right}: map-get($hierarchical-grid-indent, 'compact'); + padding-#{$left}: map.get($hierarchical-grid-indent, 'compact'); + padding-#{$right}: map.get($hierarchical-grid-indent, 'compact'); } %igx-grid__hierarchical-expander--header { background: inherit; - border-#{$right}: 1px solid --var($theme, 'header-border-color'); + border-#{$right}: 1px solid var-get($theme, 'header-border-color'); z-index: 3; igx-icon { @@ -2747,20 +2757,20 @@ align-items: flex-start; igx-icon { - min-height: map-get($grid-header-height, 'comfortable'); - max-height: map-get($grid-header-height, 'comfortable'); + min-height: map.get($grid-header-height, 'comfortable'); + max-height: map.get($grid-header-height, 'comfortable'); } } %igx-grid__hierarchical-expander--push--cosy { igx-icon { - min-height: map-get($grid-header-height, 'cosy'); + min-height: map.get($grid-header-height, 'cosy'); } } %igx-grid__hierarchical-expander--push--compact { igx-icon { - min-height: map-get($grid-header-height, 'compact'); + min-height: map.get($grid-header-height, 'compact'); } } @@ -2769,40 +2779,40 @@ } %igx-grid__hierarchical-indent { - margin-#{$left}: calc(2 * #{map-get($hierarchical-grid-indent, 'comfortable')} + #{$hierarchical-action-icon}); - margin-top: map-get($hierarchical-grid-indent, 'comfortable'); - margin-#{$right}: map-get($hierarchical-grid-indent, 'comfortable'); - margin-bottom: map-get($hierarchical-grid-indent, 'comfortable'); + margin-#{$left}: calc(2 * #{map.get($hierarchical-grid-indent, 'comfortable')} + #{$hierarchical-action-icon}); + margin-top: map.get($hierarchical-grid-indent, 'comfortable'); + margin-#{$right}: map.get($hierarchical-grid-indent, 'comfortable'); + margin-bottom: map.get($hierarchical-grid-indent, 'comfortable'); &--scroll { - margin-#{$right}: calc(#{map-get($hierarchical-grid-indent, 'comfortable')} + 18px); + margin-#{$right}: calc(#{map.get($hierarchical-grid-indent, 'comfortable')} + 18px); } } %igx-grid__hierarchical-indent--cosy { - margin-#{$left}: calc(2 * #{map-get($hierarchical-grid-indent, 'cosy')} + #{$hierarchical-action-icon}); - margin-top: map-get($hierarchical-grid-indent, 'cosy'); - margin-#{$right}: map-get($hierarchical-grid-indent, 'cosy'); - margin-bottom: map-get($hierarchical-grid-indent, 'cosy'); + margin-#{$left}: calc(2 * #{map.get($hierarchical-grid-indent, 'cosy')} + #{$hierarchical-action-icon}); + margin-top: map.get($hierarchical-grid-indent, 'cosy'); + margin-#{$right}: map.get($hierarchical-grid-indent, 'cosy'); + margin-bottom: map.get($hierarchical-grid-indent, 'cosy'); &--scroll { - margin-#{$right}: calc(#{map-get($hierarchical-grid-indent, 'cosy')} + 18px); + margin-#{$right}: calc(#{map.get($hierarchical-grid-indent, 'cosy')} + 18px); } } %igx-grid__hierarchical-indent--compact { - margin-#{$left}: calc(2 * #{map-get($hierarchical-grid-indent, 'compact')} + #{$hierarchical-action-icon}); - margin-top: map-get($hierarchical-grid-indent, 'compact'); - margin-#{$right}: map-get($hierarchical-grid-indent, 'compact'); - margin-bottom: map-get($hierarchical-grid-indent, 'compact'); + margin-#{$left}: calc(2 * #{map.get($hierarchical-grid-indent, 'compact')} + #{$hierarchical-action-icon}); + margin-top: map.get($hierarchical-grid-indent, 'compact'); + margin-#{$right}: map.get($hierarchical-grid-indent, 'compact'); + margin-bottom: map.get($hierarchical-grid-indent, 'compact'); &--scroll { - margin-#{$right}: calc(#{map-get($hierarchical-grid-indent, 'compact')} + 18px); + margin-#{$right}: calc(#{map.get($hierarchical-grid-indent, 'compact')} + 18px); } } - @include _excel-filtering($theme, $palette); - @include _advanced-filtering($theme, $palette); + @include excel-filtering($theme, $palette); + @include advanced-filtering($theme, $palette); %igx-grid__filtering-row-editing-buttons--small, %igx-grid__filtering-row-editing-buttons { @@ -2818,7 +2828,7 @@ button { &:not([disabled]) { igx-icon { - color: --var($theme, 'sorted-header-icon-color'); + color: var-get($theme, 'sorted-header-icon-color'); } } } @@ -2826,7 +2836,7 @@ %igx-grid__tr-action { &:last-of-type { - border-#{$right}: --var($theme, 'header-border-width') --var($theme, 'header-border-style') --var($theme, 'header-border-color'); + border-#{$right}: var-get($theme, 'header-border-width') var-get($theme, 'header-border-style') var-get($theme, 'header-border-color'); } } } diff --git a/projects/igniteui-angular/src/lib/core/styles/components/grid/_group-by-area-component.scss b/projects/igniteui-angular/src/lib/core/styles/components/grid/_group-by-area-component.scss index c780c543bc5..f17d8b7a1ae 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/grid/_group-by-area-component.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/grid/_group-by-area-component.scss @@ -1,3 +1,5 @@ +@use '../../base' as *; + //// /// @access private /// @group components @@ -6,7 +8,7 @@ /// @requires {mixin} bem-mod //// -@mixin _group-by-area { +@mixin group-by-area { @include b(igx-grid-grouparea) { @extend %igx-grid-grouparea !optional; diff --git a/projects/igniteui-angular/src/lib/core/styles/components/grid/_header-row-component.scss b/projects/igniteui-angular/src/lib/core/styles/components/grid/_header-row-component.scss index 509f2543090..ee5d1a8fa20 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/grid/_header-row-component.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/grid/_header-row-component.scss @@ -1,3 +1,5 @@ +@use '../../base' as *; + //// /// @access private /// @group components @@ -6,7 +8,7 @@ /// @requires {mixin} bem-mod //// -@mixin _header-row { +@mixin header-row { @include b(igx-grid-thead) { @extend %grid-thead-container !optional; diff --git a/projects/igniteui-angular/src/lib/core/styles/components/highlight/highlight-component.scss b/projects/igniteui-angular/src/lib/core/styles/components/highlight/highlight-component.scss index 21c3552dc5a..3fc80ee2cbd 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/highlight/highlight-component.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/highlight/highlight-component.scss @@ -1,3 +1,6 @@ +@use '../../base' as *; +@use 'sass:string'; + //// /// @group components /// @author Simeon Simeonoff @@ -5,16 +8,21 @@ /// @requires {mixin} bem-elem /// @requires {mixin} bem-mod //// -@include b(igx-highlight) { - // Register the component in the component registry - $this: bem--selector-to-string(&); - @include register-component(str-slice($this, 2, -1)); - @extend %igx-highlight !optional; +@mixin component { + @include b(igx-highlight) { + // Register the component in the component registry + $this: bem--selector-to-string(&); + @include register-component( + $name: string.slice($this, 2, -1), + $deps: () + ); - @include m(active) { @extend %igx-highlight !optional; - @extend %igx-highlight--active !optional; + + @include m(active) { + @extend %igx-highlight !optional; + @extend %igx-highlight--active !optional; + } } } - diff --git a/projects/igniteui-angular/src/lib/core/styles/components/highlight/highlight-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/highlight/highlight-theme.scss index adcd78e7e85..7177fde7a90 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/highlight/highlight-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/highlight/highlight-theme.scss @@ -1,3 +1,7 @@ +@use '../../base' as *; +@use '../../themes/schemas' as *; +@use 'sass:map'; + //// /// @group themes /// @access public @@ -33,8 +37,8 @@ $selector: '.igx-highlight'; $highlight-schema: (); - @if map-has-key($schema, $name) { - $highlight-schema: map-get($schema, $name); + @if map.has-key($schema, $name) { + $highlight-schema: map.get($schema, $name); } @else { $highlight-schema: $schema; } @@ -63,18 +67,18 @@ /// @param {Map} $theme - The theme used to style the component. /// @requires {mixin} igx-css-vars /// @requires rem -/// @requires --var +/// @requires var-get @mixin igx-highlight($theme) { @include igx-css-vars($theme); %igx-highlight { - color: --var($theme, 'resting-color'); - background: --var($theme, 'resting-background'); + color: var-get($theme, 'resting-color'); + background: var-get($theme, 'resting-background'); } %igx-highlight--active { - color: --var($theme, 'active-color'); - background: --var($theme, 'active-background'); + color: var-get($theme, 'active-color'); + background: var-get($theme, 'active-background'); } } diff --git a/projects/igniteui-angular/src/lib/core/styles/components/icon/_icon-component.scss b/projects/igniteui-angular/src/lib/core/styles/components/icon/_icon-component.scss index e7a5dc871c3..cdc932de203 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/icon/_icon-component.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/icon/_icon-component.scss @@ -1,3 +1,6 @@ +@use '../../base' as *; +@use 'sass:string'; + //// Icon /// @group components /// @author Simeon Simeonoff @@ -5,29 +8,35 @@ /// @requires {mixin} bem-elem /// @requires {mixin} bem-mod //// -@include b(igx-icon) { - $this: bem--selector-to-string(&); - @include register-component(str-slice($this, 2, -1)); - @extend %igx-icon-display !optional; +@mixin component { + @include b(igx-icon) { + $this: bem--selector-to-string(&); + @include register-component( + $name: string.slice($this, 2, -1), + $deps: () + ); - @include m(inactive) { - @extend %igx-icon--inactive !optional; - } + @extend %igx-icon-display !optional; - @include m(success) { - @extend %igx-icon--success !optional; - } + @include m(inactive) { + @extend %igx-icon--inactive !optional; + } - @include m(error) { - @extend %igx-icon--error !optional; + @include m(success) { + @extend %igx-icon--success !optional; + } + + @include m(error) { + @extend %igx-icon--error !optional; + } } -} -@include b(igx-svg-container) { - visibility: hidden; - width: 0; - height: 0; - font-size: 0; - overflow: hidden; + @include b(igx-svg-container) { + visibility: hidden; + width: 0; + height: 0; + font-size: 0; + overflow: hidden; + } } diff --git a/projects/igniteui-angular/src/lib/core/styles/components/icon/_icon-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/icon/_icon-theme.scss index 00167f8686f..9f1322b582a 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/icon/_icon-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/icon/_icon-theme.scss @@ -1,3 +1,7 @@ +@use '../../base' as *; +@use '../../themes/schemas' as *; +@use 'sass:map'; + //// /// @group themes /// @access public @@ -32,8 +36,8 @@ $name: 'igx-icon'; $icon-schema: (); - @if map-has-key($schema, $name) { - $icon-schema: map-get($schema, $name); + @if map.has-key($schema, $name) { + $icon-schema: map.get($schema, $name); } @else { $icon-schema: $schema; } @@ -51,18 +55,18 @@ /// @param {Map} $theme - The theme used to style the component. /// @requires {mixin} igx-css-vars -/// @requires --var +/// @requires var-get @mixin igx-icon($theme) { @include igx-css-vars($theme); - $igx-icon-font-size: --var($theme, 'size'); + $igx-icon-font-size: var-get($theme, 'size'); %igx-icon-display { display: inline-flex; width: $igx-icon-font-size; height: $igx-icon-font-size; font-size: $igx-icon-font-size; - color: --var($theme, 'color'); + color: var-get($theme, 'color'); div, svg { @@ -74,15 +78,15 @@ } %igx-icon--success { - color: igx-color(map-get($theme, 'palette'), 'success'); + color: igx-color(map.get($theme, 'palette'), 'success'); } %igx-icon--error { - color: igx-color(map-get($theme, 'palette'), 'error'); + color: igx-color(map.get($theme, 'palette'), 'error'); } %igx-icon--inactive { - color: --var($theme, 'disabled-color') !important; + color: var-get($theme, 'disabled-color') !important; opacity: .54; } } diff --git a/projects/igniteui-angular/src/lib/core/styles/components/input/_input-group-component.scss b/projects/igniteui-angular/src/lib/core/styles/components/input/_input-group-component.scss index 3de426306bd..aa3a07d33cf 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/input/_input-group-component.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/input/_input-group-component.scss @@ -1,3 +1,6 @@ +@use '../../base' as *; +@use 'sass:string'; + //// /// @group components /// @author Simeon Simeonoff @@ -6,1041 +9,1048 @@ /// @requires {mixin} bem-mod /// @requires {mixin} bem-mods //// -@include b(igx-input-group) { - $this: bem--selector-to-string(&); - @include register-component(str-slice($this, 2, -1)); - - @extend %form-group-display !optional; - &:hover { - @extend %form-group-display--hover !optional; - } +@mixin component { + @include b(igx-input-group) { + $this: bem--selector-to-string(&); + @include register-component( + $name: string.slice($this, 2, -1), + $deps: ( + igx-icon + ) + ); - @include e(bundle) { - @extend %form-group-bundle !optional; + @extend %form-group-display !optional; &:hover { - @extend %form-group-bundle--hover !optional; + @extend %form-group-display--hover !optional; } - } - @include e(bundle-main) { - @extend %form-group-bundle-main !optional; - } - - @include e(label) { - @extend %form-group-label !optional; - } + @include e(bundle) { + @extend %form-group-bundle !optional; - @include e(input) { - @extend %form-group-input !optional; - @extend %chrome-autofill-fix !optional; - @extend %edge-clear-icon-fix !optional; + &:hover { + @extend %form-group-bundle--hover !optional; + } + } - &:hover { - @extend %form-group-input--hover !optional; + @include e(bundle-main) { + @extend %form-group-bundle-main !optional; } - &:focus { - @extend %form-group-input--focus !optional; + @include e(label) { + @extend %form-group-label !optional; } - } - @include e(file-input) { - @extend %form-group-file-input !optional; + @include e(input) { + @extend %form-group-input !optional; + @extend %chrome-autofill-fix !optional; + @extend %edge-clear-icon-fix !optional; - &:hover { - @extend %form-group-input--hover !optional; - } + &:hover { + @extend %form-group-input--hover !optional; + } - &:focus { - @extend %form-group-input--focus !optional; + &:focus { + @extend %form-group-input--focus !optional; + } } - } - - @include e(clear-icon) { - @extend %form-group-clear-icon !optional; - } - @include e(upload-button) { - @extend %form-group-upload-button !optional; - } + @include e(file-input) { + @extend %form-group-file-input !optional; - @include e(textarea) { - @extend %form-group-input !optional; - @extend %form-group-textarea !optional; + &:hover { + @extend %form-group-input--hover !optional; + } - &:hover { - @extend %form-group-input--hover !optional; + &:focus { + @extend %form-group-input--focus !optional; + } } - &:focus { - @extend %form-group-input--focus !optional; + @include e(clear-icon) { + @extend %form-group-clear-icon !optional; } - } - - @include e(border) { - @extend %form-group-border !optional; - } - - @include e(hint) { - @extend %form-group-helper !optional; - } - - @include e(hint-item, $m: start) { - @extend %form-group-helper-item !optional; - @extend %form-group-helper-item--start !optional; - } - @include e(hint-item, $m: end) { - @extend %form-group-helper-item !optional; - @extend %form-group-helper-item--end !optional; - } + @include e(upload-button) { + @extend %form-group-upload-button !optional; + } - @include m(focused) { - @extend %form-group-display !optional; + @include e(textarea) { + @extend %form-group-input !optional; + @extend %form-group-textarea !optional; - @include e(bundle) { - @extend %form-group-bundle--focus !optional; - } + &:hover { + @extend %form-group-input--hover !optional; + } - @include e(label) { - @extend %form-group-label--float !optional; - @extend %form-group-label--focus !optional; + &:focus { + @extend %form-group-input--focus !optional; + } } @include e(border) { - @extend %form-group-border--focus !optional; + @extend %form-group-border !optional; } - } - @include m(placeholder) { - @include e(label) { - @extend %form-group-label--float !optional; - @extend %form-group-label--fixed !optional; + @include e(hint) { + @extend %form-group-helper !optional; } - } - @include m(filled) { - @include e(label) { - @extend %form-group-label--float !optional; + @include e(hint-item, $m: start) { + @extend %form-group-helper-item !optional; + @extend %form-group-helper-item--start !optional; } - } - @include m(file) { - @include e(label) { - @extend %form-group-label--float !optional; + @include e(hint-item, $m: end) { + @extend %form-group-helper-item !optional; + @extend %form-group-helper-item--end !optional; } - } - @include m(required) { - @include e(label) { - @extend %form-group-label--required !optional; - } - } + @include m(focused) { + @extend %form-group-display !optional; - @include m(invalid) { - @extend %form-group-display--error !optional; + @include e(bundle) { + @extend %form-group-bundle--focus !optional; + } - @include e(label) { - @extend %form-group-label--error !optional; - } + @include e(label) { + @extend %form-group-label--float !optional; + @extend %form-group-label--focus !optional; + } - @include e(border) { - @extend %form-group-border--error !optional; + @include e(border) { + @extend %form-group-border--focus !optional; + } } - @include e(hint) { - @extend %form-group-helper--error !optional; + @include m(placeholder) { + @include e(label) { + @extend %form-group-label--float !optional; + @extend %form-group-label--fixed !optional; + } } - @include e(bundle) { - @extend %form-group-bundle--error !optional; + @include m(filled) { + @include e(label) { + @extend %form-group-label--float !optional; + } } - } - @include m(valid) { - @include e(label) { - @extend %form-group-label--success !optional; + @include m(file) { + @include e(label) { + @extend %form-group-label--float !optional; + } } - @include e(border) { - @extend %form-group-border--success !optional; + @include m(required) { + @include e(label) { + @extend %form-group-label--required !optional; + } } - @include e(hint) { - @extend %form-group-helper--success !optional; - } + @include m(invalid) { + @extend %form-group-display--error !optional; - @include e(bundle) { - @extend %form-group-bundle--success !optional; - } - } + @include e(label) { + @extend %form-group-label--error !optional; + } - @include m(disabled) { - @extend %form-group-display--disabled !optional; + @include e(border) { + @extend %form-group-border--error !optional; + } - @include e(bundle) { - @extend %form-group-bundle--disabled !optional; - } + @include e(hint) { + @extend %form-group-helper--error !optional; + } - @include e(label) { - @extend %form-group-label--fixed !optional; + @include e(bundle) { + @extend %form-group-bundle--error !optional; + } } - @include e(input) { - @extend %form-group-input--disabled !optional; - } + @include m(valid) { + @include e(label) { + @extend %form-group-label--success !optional; + } - @include e(textarea) { - @extend %form-group-textarea--disabled !optional; - } + @include e(border) { + @extend %form-group-border--success !optional; + } - @include e(file-input) { - @extend %form-group-input--disabled !optional; + @include e(hint) { + @extend %form-group-helper--success !optional; + } + + @include e(bundle) { + @extend %form-group-bundle--success !optional; + } } - } - @include mx(disabled, required) { - @extend %form-group-display--disabled !optional; + @include m(disabled) { + @extend %form-group-display--disabled !optional; - @include e(bundle) { - @extend %form-group-bundle--disabled !optional; - } + @include e(bundle) { + @extend %form-group-bundle--disabled !optional; + } - @include e(label) { - @extend %form-group-label--fixed !optional; - } + @include e(label) { + @extend %form-group-label--fixed !optional; + } - @include e(input) { - @extend %form-group-input--disabled !optional; - } + @include e(input) { + @extend %form-group-input--disabled !optional; + } - @include e(textarea) { - @extend %form-group-textarea--disabled !optional; - } + @include e(textarea) { + @extend %form-group-textarea--disabled !optional; + } - @include e(file-input) { - @extend %form-group-input--disabled !optional; + @include e(file-input) { + @extend %form-group-input--disabled !optional; + } } - } - @include m(cosy) { - @extend %form-group-display--cosy !optional; + @include mx(disabled, required) { + @extend %form-group-display--disabled !optional; - @include e(bundle) { - @extend %form-group-bundle--cosy !optional; - } + @include e(bundle) { + @extend %form-group-bundle--disabled !optional; + } - @include e(label) { - @extend %form-group-label--cosy !optional; - } + @include e(label) { + @extend %form-group-label--fixed !optional; + } - @include e(input) { - @extend %form-group-input--cosy !optional; - } + @include e(input) { + @extend %form-group-input--disabled !optional; + } - @include e(file-input) { - @extend %form-group-file-input--cosy !optional; - } + @include e(textarea) { + @extend %form-group-textarea--disabled !optional; + } - @include e(textarea) { - @extend %form-group-textarea--cosy !optional; + @include e(file-input) { + @extend %form-group-input--disabled !optional; + } } - @include e(hint) { - @extend %form-group-hint--cosy !optional; - } - } + @include m(cosy) { + @extend %form-group-display--cosy !optional; - @include m(compact) { - @extend %form-group-display--compact !optional; + @include e(bundle) { + @extend %form-group-bundle--cosy !optional; + } - @include e(bundle) { - @extend %form-group-bundle--compact !optional; - } + @include e(label) { + @extend %form-group-label--cosy !optional; + } - @include e(label) { - @extend %form-group-label--compact !optional; - } + @include e(input) { + @extend %form-group-input--cosy !optional; + } - @include e(input) { - @extend %form-group-input--compact !optional; - } + @include e(file-input) { + @extend %form-group-file-input--cosy !optional; + } - @include e(file-input) { - @extend %form-group-file-input--compact !optional; - } + @include e(textarea) { + @extend %form-group-textarea--cosy !optional; + } - @include e(textarea) { - @extend %form-group-textarea--compact !optional; + @include e(hint) { + @extend %form-group-hint--cosy !optional; + } } - @include e(hint) { - @extend %form-group-hint--compact !optional; - } - } + @include m(compact) { + @extend %form-group-display--compact !optional; - @include m(box) { - @extend %form-group-display--no-margin !optional; + @include e(bundle) { + @extend %form-group-bundle--compact !optional; + } - @include e(wrapper) { - @extend %form-group-box-wrapper !optional; - } + @include e(label) { + @extend %form-group-label--compact !optional; + } - @include e(bundle) { - @extend %form-group-bundle--box !optional; - } + @include e(input) { + @extend %form-group-input--compact !optional; + } - @include e(bundle-main) { - @extend %form-group-bundle-main--box !optional; - } + @include e(file-input) { + @extend %form-group-file-input--compact !optional; + } - @include e(input) { - @extend %form-group-input--box !optional; - } + @include e(textarea) { + @extend %form-group-textarea--compact !optional; + } - @include e(file-input) { - @extend %form-group-file-input--box !optional; + @include e(hint) { + @extend %form-group-hint--compact !optional; + } } - @include e(label) { - @extend %form-group-label--box !optional; - } + @include m(box) { + @extend %form-group-display--no-margin !optional; - @include e(hint) { - @extend %form-group-helper--box !optional; - } - } + @include e(wrapper) { + @extend %form-group-box-wrapper !optional; + } - @include mx(box, cosy) { - @extend %form-group-display--no-margin-cosy !optional; + @include e(bundle) { + @extend %form-group-bundle--box !optional; + } - @include e(bundle) { - @extend %form-group-bundle--box-cosy !optional; - } + @include e(bundle-main) { + @extend %form-group-bundle-main--box !optional; + } - @include e(bundle-main) { - @extend %form-group-bundle-main--box-cosy !optional; - } - } + @include e(input) { + @extend %form-group-input--box !optional; + } - @include mx(box, compact) { - @extend %form-group-display--no-margin-compact !optional; + @include e(file-input) { + @extend %form-group-file-input--box !optional; + } - @include e(bundle) { - @extend %form-group-bundle--box-compact !optional; - } + @include e(label) { + @extend %form-group-label--box !optional; + } - @include e(bundle-main) { - @extend %form-group-bundle-main--box-compact !optional; + @include e(hint) { + @extend %form-group-helper--box !optional; + } } - } - @include mx(disabled, box) { - @include e(bundle) { - @extend %form-group-bundle--box-disabled !optional; + @include mx(box, cosy) { + @extend %form-group-display--no-margin-cosy !optional; + + @include e(bundle) { + @extend %form-group-bundle--box-cosy !optional; + } + + @include e(bundle-main) { + @extend %form-group-bundle-main--box-cosy !optional; + } } - } - @include m(border) { - @extend %form-group-display--no-margin !optional; + @include mx(box, compact) { + @extend %form-group-display--no-margin-compact !optional; - @include e(bundle) { - @extend %form-group-bundle--border !optional; + @include e(bundle) { + @extend %form-group-bundle--box-compact !optional; + } - &:hover { - @extend %form-group-bundle-border--hover !optional; + @include e(bundle-main) { + @extend %form-group-bundle-main--box-compact !optional; } } - @include e(bundle-main) { - @extend %form-group-bundle-main--box !optional; + @include mx(disabled, box) { + @include e(bundle) { + @extend %form-group-bundle--box-disabled !optional; + } } - @include e(border) { - @extend %form-group-border--hidden !optional; - } + @include m(border) { + @extend %form-group-display--no-margin !optional; - @include e(input) { - @extend %form-group-input--border !optional; - } + @include e(bundle) { + @extend %form-group-bundle--border !optional; - @include e(file-input) { - @extend %form-group-input--border !optional; - } + &:hover { + @extend %form-group-bundle-border--hover !optional; + } + } - @include e(label) { - @extend %form-group-label--border !optional; - } + @include e(bundle-main) { + @extend %form-group-bundle-main--box !optional; + } - @include e(hint) { - @extend %form-group-helper--box !optional; + @include e(border) { + @extend %form-group-border--hidden !optional; + } + + @include e(input) { + @extend %form-group-input--border !optional; + } + + @include e(file-input) { + @extend %form-group-input--border !optional; + } + + @include e(label) { + @extend %form-group-label--border !optional; + } + + @include e(hint) { + @extend %form-group-helper--box !optional; + } } - } - @include mx(border, filled) { - @include e(label) { - @extend %form-group-label--float-border !optional; + @include mx(border, filled) { + @include e(label) { + @extend %form-group-label--float-border !optional; + } } - } - @include mx(border, file) { - @include e(label) { - @extend %form-group-label--float-border !optional; + @include mx(border, file) { + @include e(label) { + @extend %form-group-label--float-border !optional; + } } - } - @include mx(border, focused) { - @include e(label) { - @extend %form-group-label--float-border !optional; + @include mx(border, focused) { + @include e(label) { + @extend %form-group-label--float-border !optional; + } } - } - @include mx(border, placeholder) { - @include e(label) { - @extend %form-group-label--float-border !optional; + @include mx(border, placeholder) { + @include e(label) { + @extend %form-group-label--float-border !optional; + } } - } - @include mx(border, cosy) { - @extend %form-group-display--no-margin-cosy !optional; + @include mx(border, cosy) { + @extend %form-group-display--no-margin-cosy !optional; - @include e(bundle) { - @extend %form-group-bundle--border-cosy !optional; - } + @include e(bundle) { + @extend %form-group-bundle--border-cosy !optional; + } - @include e(bundle-main) { - @extend %form-group-bundle-main--box-cosy !optional; + @include e(bundle-main) { + @extend %form-group-bundle-main--box-cosy !optional; + } } - } - @include mx(border, cosy, filled) { - @include e(label) { - @extend %form-group-label--float-border-cosy !optional; + @include mx(border, cosy, filled) { + @include e(label) { + @extend %form-group-label--float-border-cosy !optional; + } } - } - @include mx(border, cosy, file) { - @include e(label) { - @extend %form-group-label--float-border-cosy !optional; + @include mx(border, cosy, file) { + @include e(label) { + @extend %form-group-label--float-border-cosy !optional; + } } - } - @include mx(border, cosy, focused) { - @include e(label) { - @extend %form-group-label--float-border-cosy !optional; + @include mx(border, cosy, focused) { + @include e(label) { + @extend %form-group-label--float-border-cosy !optional; + } } - } - @include mx(border, cosy, placeholder) { - @include e(label) { - @extend %form-group-label--float-border-cosy !optional; + @include mx(border, cosy, placeholder) { + @include e(label) { + @extend %form-group-label--float-border-cosy !optional; + } } - } - @include mx(border, compact) { - @extend %form-group-display--no-margin-compact !optional; + @include mx(border, compact) { + @extend %form-group-display--no-margin-compact !optional; - @include e(bundle) { - @extend %form-group-bundle--border-compact !optional; - } + @include e(bundle) { + @extend %form-group-bundle--border-compact !optional; + } - @include e(bundle-main) { - @extend %form-group-bundle-main--box-compact !optional; + @include e(bundle-main) { + @extend %form-group-bundle-main--box-compact !optional; + } } - } - @include mx(border, compact, filled) { - @include e(label) { - @extend %form-group-label--float-border-compact !optional; + @include mx(border, compact, filled) { + @include e(label) { + @extend %form-group-label--float-border-compact !optional; + } } - } - @include mx(border, compact, file) { - @include e(label) { - @extend %form-group-label--float-border-compact !optional; + @include mx(border, compact, file) { + @include e(label) { + @extend %form-group-label--float-border-compact !optional; + } } - } - @include mx(border, compact, focused) { - @include e(label) { - @extend %form-group-label--float-border-compact !optional; + @include mx(border, compact, focused) { + @include e(label) { + @extend %form-group-label--float-border-compact !optional; + } } - } - @include mx(border, compact, placeholder) { - @include e(label) { - @extend %form-group-label--float-border-compact !optional; + @include mx(border, compact, placeholder) { + @include e(label) { + @extend %form-group-label--float-border-compact !optional; + } } - } - @include mx(valid, border) { - @include e(bundle) { - @extend %form-group-bundle-border--success !optional; + @include mx(valid, border) { + @include e(bundle) { + @extend %form-group-bundle-border--success !optional; + } } - } - @include mx(invalid, border) { - @include e(bundle) { - @extend %form-group-bundle-border--error !optional; + @include mx(invalid, border) { + @include e(bundle) { + @extend %form-group-bundle-border--error !optional; + } } - } - @include mx(focused, border) { - @include e(bundle) { - @extend %form-group-bundle-border--focus !optional; + @include mx(focused, border) { + @include e(bundle) { + @extend %form-group-bundle-border--focus !optional; + } } - } - @include mx(disabled, border) { - @include e(bundle) { - @extend %form-group-bundle-border--disabled !optional; - } + @include mx(disabled, border) { + @include e(bundle) { + @extend %form-group-bundle-border--disabled !optional; + } - @include e(label) { - @extend %form-group-label--float-border-disabled !optional; + @include e(label) { + @extend %form-group-label--float-border-disabled !optional; + } } - } - // Fluent Theme Start // - @include m(fluent) { - @extend %igx-input-group-fluent !optional; + // Fluent Theme Start // + @include m(fluent) { + @extend %igx-input-group-fluent !optional; - @include e(bundle) { - @extend %form-group-bundle--fluent !optional; + @include e(bundle) { + @extend %form-group-bundle--fluent !optional; - &:hover { - @extend %form-group-bundle--fluent--hover !optional; + &:hover { + @extend %form-group-bundle--fluent--hover !optional; + } } - } - @include e(bundle-main) { - @extend %form-group-bundle-main--fluent !optional; - } + @include e(bundle-main) { + @extend %form-group-bundle-main--fluent !optional; + } - @include e(input) { - @extend %fluent-input !optional; - } + @include e(input) { + @extend %fluent-input !optional; + } - @include e(file-input) { - @extend %fluent-input !optional; - } + @include e(file-input) { + @extend %fluent-input !optional; + } - @include e(label) { - @extend %fluent-label !optional; - } + @include e(label) { + @extend %fluent-label !optional; + } - @include e(textarea) { - @extend %fluent-textarea !optional; + @include e(textarea) { + @extend %fluent-textarea !optional; + } } - } - @include mx(placeholder, fluent) { - @include e(label) { - @extend %fluent-placeholder-label !optional; + @include mx(placeholder, fluent) { + @include e(label) { + @extend %fluent-placeholder-label !optional; + } } - } - @include mx(cosy, fluent) { - @extend %igx-input-group-fluent--cosy !optional; - } + @include mx(cosy, fluent) { + @extend %igx-input-group-fluent--cosy !optional; + } - @include mx(compact, fluent) { - @extend %igx-input-group-fluent--compact !optional; - } + @include mx(compact, fluent) { + @extend %igx-input-group-fluent--compact !optional; + } - @include mx(disabled, fluent) { - @include e(bundle) { - @extend %form-group-bundle--fluent-disabled !optional; + @include mx(disabled, fluent) { + @include e(bundle) { + @extend %form-group-bundle--fluent-disabled !optional; - &:hover { - @extend %form-group-bundle--fluent--hover-disabled !optional; + &:hover { + @extend %form-group-bundle--fluent--hover-disabled !optional; + } } - } - @include e(input) { - @extend %fluent-input-disabled !optional; + @include e(input) { + @extend %fluent-input-disabled !optional; - &:hover { - @extend %fluent-input-disabled !optional + &:hover { + @extend %fluent-input-disabled !optional } - &:focus { - @extend %fluent-input-disabled !optional + &:focus { + @extend %fluent-input-disabled !optional + } } - } - @include e(file-input) { - @extend %fluent-input-disabled !optional; + @include e(file-input) { + @extend %fluent-input-disabled !optional; - &:hover { - @extend %fluent-input-disabled !optional + &:hover { + @extend %fluent-input-disabled !optional } - &:focus { - @extend %fluent-input-disabled !optional + &:focus { + @extend %fluent-input-disabled !optional + } } - } - @include e(label) { - @extend %fluent-label-disabled !optional; + @include e(label) { + @extend %fluent-label-disabled !optional; + } } - } - @include mx(filled, fluent) { - @include e(label) { - @extend %fluent-label-filled !optional; + @include mx(filled, fluent) { + @include e(label) { + @extend %fluent-label-filled !optional; + } } - } - @include mx(file, fluent) { - @include e(label) { - @extend %fluent-label-filled !optional; + @include mx(file, fluent) { + @include e(label) { + @extend %fluent-label-filled !optional; + } } - } - @include mx(focused, fluent) { - @include e(bundle) { - @extend %form-group-bundle--focus !optional; + @include mx(focused, fluent) { + @include e(bundle) { + @extend %form-group-bundle--focus !optional; - &:hover { - @extend %form-group-bundle--fluent--focus !optional; + &:hover { + @extend %form-group-bundle--fluent--focus !optional; + } } - } - @include e(label) { - @extend %fluent-label-focused !optional; + @include e(label) { + @extend %fluent-label-focused !optional; + } } - } - @include mx(required, fluent) { - @include e(bundle) { - @extend %form-group-bundle-required--fluent !optional; + @include mx(required, fluent) { + @include e(bundle) { + @extend %form-group-bundle-required--fluent !optional; + } } - } - @include mx(valid, fluent) { - @include e(bundle) { - @extend %form-group-bundle-success--fluent !optional; + @include mx(valid, fluent) { + @include e(bundle) { + @extend %form-group-bundle-success--fluent !optional; - &:hover { - @extend %form-group-bundle-success--fluent--hover !optional; + &:hover { + @extend %form-group-bundle-success--fluent--hover !optional; + } } - } - @include e(label) { - @extend %fluent-label-success !optional; + @include e(label) { + @extend %fluent-label-success !optional; + } } - } - @include mx(invalid, fluent) { - @include e(bundle) { - @extend %form-group-bundle-error--fluent !optional; + @include mx(invalid, fluent) { + @include e(bundle) { + @extend %form-group-bundle-error--fluent !optional; - &:hover { - @extend %form-group-bundle-error--fluent--hover !optional; + &:hover { + @extend %form-group-bundle-error--fluent--hover !optional; + } } - } - @include e(label) { - @extend %fluent-label-error !optional; + @include e(label) { + @extend %fluent-label-error !optional; + } } - } - // Fluent Theme End // + // Fluent Theme End // - // Indigo Theme Start // - @include m(indigo) { - @extend %form-group-display--no-margin !optional; + // Indigo Theme Start // + @include m(indigo) { + @extend %form-group-display--no-margin !optional; - @include e(wrapper) { - @extend %form-group-box-wrapper !optional; - } + @include e(wrapper) { + @extend %form-group-box-wrapper !optional; + } - @include e(bundle) { - @extend %form-group-bundle--indigo !optional; - } + @include e(bundle) { + @extend %form-group-bundle--indigo !optional; + } - @include e(bundle-main) { - @extend %form-group-bundle-main--box !optional; - } + @include e(bundle-main) { + @extend %form-group-bundle-main--box !optional; + } - @include e(input) { - @extend %form-group-input--indigo !optional; - } + @include e(input) { + @extend %form-group-input--indigo !optional; + } - @include e(file-input) { - @extend %form-group-input--indigo !optional; - } + @include e(file-input) { + @extend %form-group-input--indigo !optional; + } - @include e(label) { - @extend %fluent-label !optional; - } + @include e(label) { + @extend %fluent-label !optional; + } - @include e(textarea) { - @extend %form-group-textarea--indigo !optional; - } + @include e(textarea) { + @extend %form-group-textarea--indigo !optional; + } - @include e(hint) { - @extend %form-group-helper--box !optional; + @include e(hint) { + @extend %form-group-helper--box !optional; + } } - } - @include mx(indigo, cosy) { - @extend %form-group-display--no-margin-cosy !optional; + @include mx(indigo, cosy) { + @extend %form-group-display--no-margin-cosy !optional; - @include e(bundle) { - @extend %form-group-bundle--box-cosy !optional; - } + @include e(bundle) { + @extend %form-group-bundle--box-cosy !optional; + } - @include e(bundle-main) { - @extend %form-group-bundle-main--box-cosy !optional; - } + @include e(bundle-main) { + @extend %form-group-bundle-main--box-cosy !optional; + } - @include e(textarea) { - @extend %form-group-textarea--indigo-cosy !optional; + @include e(textarea) { + @extend %form-group-textarea--indigo-cosy !optional; + } } - } - @include mx(indigo, compact) { - @extend %form-group-display--no-margin-compact !optional; + @include mx(indigo, compact) { + @extend %form-group-display--no-margin-compact !optional; - @include e(bundle) { - @extend %form-group-bundle--box-compact !optional; - } + @include e(bundle) { + @extend %form-group-bundle--box-compact !optional; + } - @include e(bundle-main) { - @extend %form-group-bundle-main--box-compact !optional; - } + @include e(bundle-main) { + @extend %form-group-bundle-main--box-compact !optional; + } - @include e(textarea) { - @extend %form-group-textarea--indigo-compact !optional; + @include e(textarea) { + @extend %form-group-textarea--indigo-compact !optional; + } } - } - @include mx(indigo, focused) { - @include e(bundle) { - @extend %indigo--box-focused !optional; + @include mx(indigo, focused) { + @include e(bundle) { + @extend %indigo--box-focused !optional; + } } - } - @include mx(indigo, valid) { - @include e(bundle) { - @extend %form-group-bundle-success--indigo !optional; + @include mx(indigo, valid) { + @include e(bundle) { + @extend %form-group-bundle-success--indigo !optional; + } } - } - @include mx(indigo, invalid) { - @include e(bundle) { - @extend %form-group-bundle-error--indigo !optional; + @include mx(indigo, invalid) { + @include e(bundle) { + @extend %form-group-bundle-error--indigo !optional; - &:hover { - @extend %form-group-bundle-error--fluent--hover !optional; + &:hover { + @extend %form-group-bundle-error--fluent--hover !optional; + } } } - } - @include mx(indigo, disabled) { - @include e(bundle) { - @extend %form-group-bundle--box-disabled !optional; - } + @include mx(indigo, disabled) { + @include e(bundle) { + @extend %form-group-bundle--box-disabled !optional; + } - @include e(input) { - @extend %form-group-input--disabled !optional; - } + @include e(input) { + @extend %form-group-input--disabled !optional; + } - @include e(file-input) { - @extend %form-group-input--disabled !optional; - } + @include e(file-input) { + @extend %form-group-input--disabled !optional; + } - @include e(hint) { - @extend %form-group-helper--indigo--disabled !optional; + @include e(hint) { + @extend %form-group-helper--indigo--disabled !optional; + } } - } - // Indigo Theme End // + // Indigo Theme End // - // Bootstrap Theme Start // - @include m(bootstrap) { - @extend %form-group-display--bootstrap !optional; + // Bootstrap Theme Start // + @include m(bootstrap) { + @extend %form-group-display--bootstrap !optional; - @include e(bundle) { - @extend %form-group-bundle--bootstrap !optional; + @include e(bundle) { + @extend %form-group-bundle--bootstrap !optional; - &:hover { - @extend %form-group-bundle--bootstrap-hover !optional; + &:hover { + @extend %form-group-bundle--bootstrap-hover !optional; + } } - } - @include e(label) { - @extend %bootstrap-label !optional; - } + @include e(label) { + @extend %bootstrap-label !optional; + } - @include e(input) { - @extend %bootstrap-input !optional; - } + @include e(input) { + @extend %bootstrap-input !optional; + } - @include e(file-input) { - @extend %bootstrap-file-input !optional; - } + @include e(file-input) { + @extend %bootstrap-file-input !optional; + } - @include e(textarea) { - @extend %bootstrap-input !optional; + @include e(textarea) { + @extend %bootstrap-input !optional; + } } - } - @include mx(focused, bootstrap) { - @include e(input) { - @extend %bootstrap-input--focus !optional; - } + @include mx(focused, bootstrap) { + @include e(input) { + @extend %bootstrap-input--focus !optional; + } - @include e(file-input) { - @extend %bootstrap-input--focus !optional; - } + @include e(file-input) { + @extend %bootstrap-input--focus !optional; + } - @include e(label) { - @extend %bootstrap-label !optional; - } + @include e(label) { + @extend %bootstrap-label !optional; + } - @include e(textarea) { - @extend %bootstrap-input--focus !optional; + @include e(textarea) { + @extend %bootstrap-input--focus !optional; + } } - } - @include mx(valid, bootstrap) { - @include e(input) { - @extend %bootstrap-input--success !optional; - - &:hover { + @include mx(valid, bootstrap) { + @include e(input) { @extend %bootstrap-input--success !optional; - } - } - @include e(file-input) { - @extend %bootstrap-input--success !optional; + &:hover { + @extend %bootstrap-input--success !optional; + } + } - &:hover { + @include e(file-input) { @extend %bootstrap-input--success !optional; - } - } - @include e(label) { - @extend %bootstrap-label !optional; - } + &:hover { + @extend %bootstrap-input--success !optional; + } + } + @include e(label) { + @extend %bootstrap-label !optional; + } - @include e(textarea) { - @extend %bootstrap-input--success !optional; - &:hover { + @include e(textarea) { @extend %bootstrap-input--success !optional; + + &:hover { + @extend %bootstrap-input--success !optional; + } } } - } - @include mx(invalid, bootstrap) { - @include e(input) { - @extend %bootstrap-input--error !optional; + @include mx(invalid, bootstrap) { + @include e(input) { + @extend %bootstrap-input--error !optional; - &:hover { + &:hover { + @extend %bootstrap-input--error !optional; + } + } + + @include e(file-input) { @extend %bootstrap-input--error !optional; + + &:hover { + @extend %bootstrap-input--error !optional; + } } - } - @include e(file-input) { - @extend %bootstrap-input--error !optional; + @include e(label) { + @extend %bootstrap-label !optional; + } - &:hover { + @include e(textarea) { @extend %bootstrap-input--error !optional; + + &:hover { + @extend %bootstrap-input--error !optional; + } } } - @include e(label) { - @extend %bootstrap-label !optional; + @include mx(search, bootstrap) { + @include e(input) { + @extend %bootstrap-input--search !optional; + } } - @include e(textarea) { - @extend %bootstrap-input--error !optional; + @include mx(disabled, bootstrap) { + @include e(bundle) { + @extend %form-group-display--disabled-bootstrap !optional; + } - &:hover { - @extend %bootstrap-input--error !optional; + @include e(label) { + @extend %bootstrap-label--disabled !optional; } - } - } - @include mx(search, bootstrap) { - @include e(input) { - @extend %bootstrap-input--search !optional; - } - } + @include e(input) { + @extend %bootstrap-input--disabled !optional; + } - @include mx(disabled, bootstrap) { - @include e(bundle) { - @extend %form-group-display--disabled-bootstrap !optional; - } + @include e(file-input) { + @extend %bootstrap-input--disabled !optional; + } - @include e(label) { - @extend %bootstrap-label--disabled !optional; + @include e(textarea) { + @extend %bootstrap-input--disabled !optional; + } } - @include e(input) { - @extend %bootstrap-input--disabled !optional; - } + @include mx(cosy, bootstrap) { + @extend %form-group-display--cosy-bootstrap !optional; - @include e(file-input) { - @extend %bootstrap-input--disabled !optional; - } + @include e(label) { + @extend %bootstrap-label--cosy !optional; + } - @include e(textarea) { - @extend %bootstrap-input--disabled !optional; + @include e(input) { + @extend %bootstrap-input--cosy !optional; + } + + @include e(textarea) { + @extend %bootstrap-input--cosy !optional; + } } - } - @include mx(cosy, bootstrap) { - @extend %form-group-display--cosy-bootstrap !optional; + @include mx(compact, bootstrap) { + @extend %form-group-display--compact-bootstrap !optional; - @include e(label) { - @extend %bootstrap-label--cosy !optional; - } + @include e(label) { + @extend %bootstrap-label--compact !optional; + } - @include e(input) { - @extend %bootstrap-input--cosy !optional; - } + @include e(input) { + @extend %bootstrap-input--compact !optional; + } - @include e(textarea) { - @extend %bootstrap-input--cosy !optional; + @include e(textarea) { + @extend %bootstrap-input--compact !optional; + } } - } + // Bootstrap Theme End // - @include mx(compact, bootstrap) { - @extend %form-group-display--compact-bootstrap !optional; + @include m(search) { + @extend %form-group-display--no-margin !optional; - @include e(label) { - @extend %bootstrap-label--compact !optional; - } + @include e(bundle) { + @extend %form-group-bundle--search !optional; - @include e(input) { - @extend %bootstrap-input--compact !optional; - } + &:hover { + @extend %form-group-bundle-search--hover !optional; + } + } - @include e(textarea) { - @extend %bootstrap-input--compact !optional; - } - } - // Bootstrap Theme End // + @include e(bundle-main) { + @extend %form-group-bundle-main--box !optional; + } - @include m(search) { - @extend %form-group-display--no-margin !optional; + @include e(border) { + @extend %form-group-border--hidden !optional; + } - @include e(bundle) { - @extend %form-group-bundle--search !optional; + @include e(input) { + @extend %form-group-input--search !optional; + } - &:hover { - @extend %form-group-bundle-search--hover !optional; + @include e(label) { + @extend %form-group-label--search !optional; } - } - @include e(bundle-main) { - @extend %form-group-bundle-main--box !optional; + @include e(hint) { + @extend %form-group-helper--box !optional; + } } - @include e(border) { - @extend %form-group-border--hidden !optional; - } + @include mx(search, cosy) { + @extend %form-group-display--no-margin-cosy !optional; - @include e(input) { - @extend %form-group-input--search !optional; - } + @include b(bundle) { + @extend %form-group-bundle--search-cosy !optional; + } - @include e(label) { - @extend %form-group-label--search !optional; + @include e(bundle-main) { + @extend %form-group-bundle-main--box-cosy !optional; + } } - @include e(hint) { - @extend %form-group-helper--box !optional; - } - } + @include mx(search, compact) { + @extend %form-group-display--no-margin-compact !optional; - @include mx(search, cosy) { - @extend %form-group-display--no-margin-cosy !optional; + @include b(bundle) { + @extend %form-group-bundle--search-compact !optional; + } - @include b(bundle) { - @extend %form-group-bundle--search-cosy !optional; + @include e(bundle-main) { + @extend %form-group-bundle-main--box-compact !optional; + } } - @include e(bundle-main) { - @extend %form-group-bundle-main--box-cosy !optional; + @include mx(focused, search) { + @include e(bundle) { + @extend %form-group-bundle-search--focus !optional; + } } - } - @include mx(search, compact) { - @extend %form-group-display--no-margin-compact !optional; - - @include b(bundle) { - @extend %form-group-bundle--search-compact !optional; + @include mx(disabled, search) { + @include e(bundle) { + @extend %form-group-bundle-search--disabled !optional; + } } - @include e(bundle-main) { - @extend %form-group-bundle-main--box-compact !optional; - } - } + @include mx(search, fluent) { + @extend %igx-input-group-fluent-search !optional; - @include mx(focused, search) { - @include e(bundle) { - @extend %form-group-bundle-search--focus !optional; - } - } + @include e(bundle) { + @extend %form-group-bundle--fluent !optional; - @include mx(disabled, search) { - @include e(bundle) { - @extend %form-group-bundle-search--disabled !optional; - } - } + &:hover { + @extend %form-group-bundle--fluent--hover !optional; + } + } - @include mx(search, fluent) { - @extend %igx-input-group-fluent-search !optional; + @include e(bundle-main) { + @extend %form-group-bundle-main--fluent !optional; + } - @include e(bundle) { - @extend %form-group-bundle--fluent !optional; + @include e(input) { + @extend %fluent-input !optional; + } - &:hover { - @extend %form-group-bundle--fluent--hover !optional; + @include e(label) { + @extend %fluent-label !optional; } - } - @include e(bundle-main) { - @extend %form-group-bundle-main--fluent !optional; + @include e(hint) { + @extend %form-group-helper--box !optional; + } } - @include e(input) { - @extend %fluent-input !optional; + @include mx(fluent, search, cosy) { + @extend %igx-input-group-fluent-search--cosy !optional; } - @include e(label) { - @extend %fluent-label !optional; + @include mx(fluent, search, compact) { + @extend %igx-input-group-fluent-search--compact !optional; } - @include e(hint) { - @extend %form-group-helper--box !optional; + @include mx(focused, fluent, search) { + @extend %igx-input-group-fluent-search--focused !optional; } - } - - @include mx(fluent, search, cosy) { - @extend %igx-input-group-fluent-search--cosy !optional; - } - - @include mx(fluent, search, compact) { - @extend %igx-input-group-fluent-search--compact !optional; - } - - @include mx(focused, fluent, search) { - @extend %igx-input-group-fluent-search--focused !optional; - } - @include mx(disabled, fluent, search) { - @include e(bundle) { - @extend %form-group-bundle-search--disabled !optional; + @include mx(disabled, fluent, search) { + @include e(bundle) { + @extend %form-group-bundle-search--disabled !optional; + } } } } - diff --git a/projects/igniteui-angular/src/lib/core/styles/components/input/_input-group-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/input/_input-group-theme.scss index e38d9df8db6..2bb5724f806 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/input/_input-group-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/input/_input-group-theme.scss @@ -1,3 +1,9 @@ +@use '../../base' as *; +@use '../../themes/schemas' as *; +@use '../../typography/base' as *; +@use 'sass:map'; +@use 'sass:meta'; + //// /// @group themes /// @access public @@ -127,8 +133,8 @@ $selector: 'igx-input-group, igx-date-range-start, igx-date-range-end'; $input-group-schema: (); - @if map-has-key($schema, $name) { - $input-group-schema: map-get($schema, $name); + @if map.has-key($schema, $name) { + $input-group-schema: map.get($schema, $name); } @else { $input-group-schema: $schema; } @@ -137,38 +143,22 @@ $box-border-radius: round-borders( if($box-border-radius, $box-border-radius, - map-get($input-group-schema, 'box-border-radius') + map.get($input-group-schema, 'box-border-radius') ), 0, 20px); $border-border-radius: round-borders( if($border-border-radius, $border-border-radius, - map-get($input-group-schema, 'border-border-radius') + map.get($input-group-schema, 'border-border-radius') ), 0, 20px); $search-border-radius: round-borders( if($search-border-radius, $search-border-radius, - map-get($input-group-schema, 'search-border-radius') + map.get($input-group-schema, 'search-border-radius') ), 0, 20px); - $search-resting-elevation: map-get($input-group-schema, 'search-resting-elevation'); - $search-hover-elevation: map-get($input-group-schema, 'search-hover-elevation'); - $search-disabled-elevation: map-get($input-group-schema, 'search-disabled-elevation'); - - $focused-shadow-color: rgba(map-get($theme, 'focused-secondary-color'), .5); - $success-shadow-color: rgba(map-get($theme, 'success-secondary-color'), .5); - $error-shadow-color: rgba(map-get($theme, 'error-secondary-color'), .5); - - @if $focused-secondary-color and type-of($focused-secondary-color) == 'color' { - $focused-shadow-color: rgba($focused-secondary-color, .5); - } - - @if $success-secondary-color and type-of($success-secondary-color) == 'color' { - $success-shadow-color: rgba($success-secondary-color, .5); - } - - @if $error-secondary-color and type-of($error-secondary-color) == 'color' { - $error-shadow-color: rgba($error-secondary-color, .5); - } + $search-resting-elevation: map.get($input-group-schema, 'search-resting-elevation'); + $search-hover-elevation: map.get($input-group-schema, 'search-hover-elevation'); + $search-disabled-elevation: map.get($input-group-schema, 'search-disabled-elevation'); @if not($placeholder-color) and $box-background { $placeholder-color: text-contrast($box-background); @@ -245,9 +235,6 @@ label-floated-background: $label-floated-background, label-floated-disabled-background: $label-floated-disabled-background, - focused-shadow-color: $focused-shadow-color, - success-shadow-color: $success-shadow-color, - error-shadow-color: $error-shadow-color, )); } @@ -257,15 +244,15 @@ /// @requires {mixin} igx-css-vars /// @requires rem /// @requires {mixin} ellipsis -/// @requires --var +/// @requires var-get @mixin igx-input-group($theme) { @include igx-css-vars($theme); - $palette: map-get($theme, 'palette'); + $palette: map.get($theme, 'palette'); $transition-timing: .25s $ease-out-cubic; - $variant: map-get($theme, variant); + $variant: map.get($theme, variant); $indigo-theme: $variant == 'indigo-design'; $required-symbol: '*'; @@ -294,20 +281,20 @@ 'compact': rem(14px), ); - $hint-padding-top: rem(6px, map-get($base-scale-size, 'comfortable')); - $hint--box-margin: rem(12px, map-get($base-scale-size, 'comfortable')); + $hint-padding-top: rem(6px, map.get($base-scale-size, 'comfortable')); + $hint--box-margin: rem(12px, map.get($base-scale-size, 'comfortable')); $left: if-ltr(left, right); $right: if-ltr(right, left); igx-input-group { - --theme: #{map-get($theme, 'variant')}; + --theme: #{map.get($theme, 'variant')}; } %form-group-display { position: relative; display: block; - color: --var($theme, 'idle-text-color'); + color: var-get($theme, 'idle-text-color'); igx-prefix, [igxPrefix] { @@ -413,7 +400,7 @@ } %form-group-box-wrapper { - border-radius: --var($theme, 'box-border-radius'); + border-radius: var-get($theme, 'box-border-radius'); overflow: hidden; } @@ -423,7 +410,7 @@ %form-group-display--disabled { user-select: none; - color: --var($theme, 'disabled-text-color') !important; + color: var-get($theme, 'disabled-text-color') !important; igx-prefix, [igxPrefix] { @@ -442,96 +429,96 @@ align-items: center; flex-flow: row nowrap; max-width: 100%; - padding-top: rem(18px, map-get($base-scale-size, 'comfortable')); - box-shadow: inset 0 -1px 0 0 --var($theme, 'idle-bottom-line-color'); + padding-top: rem(18px, map.get($base-scale-size, 'comfortable')); + box-shadow: inset 0 -1px 0 0 var-get($theme, 'idle-bottom-line-color'); transition: box-shadow $transition-timing, color $transition-timing; } %form-group-bundle--cosy { - padding-top: rem(18px, map-get($base-scale-size, 'cosy')); + padding-top: rem(18px, map.get($base-scale-size, 'cosy')); } %form-group-bundle--compact { - padding-top: rem(18px, map-get($base-scale-size, 'compact')); + padding-top: rem(18px, map.get($base-scale-size, 'compact')); } %form-group-bundle--box { - padding: 0 rem(16px, map-get($base-scale-size, 'comfortable')); - background: --var($theme, 'box-background'); - box-shadow: inset 0 -2px 0 0 --var($theme, 'idle-bottom-line-color'); + padding: 0 rem(16px, map.get($base-scale-size, 'comfortable')); + background: var-get($theme, 'box-background'); + box-shadow: inset 0 -2px 0 0 var-get($theme, 'idle-bottom-line-color'); } %form-group-bundle--indigo { - padding: 0 rem(16px, map-get($base-scale-size, 'comfortable')); + padding: 0 rem(16px, map.get($base-scale-size, 'comfortable')); background: transparent; transition: background $transition-timing, box-shadow $transition-timing; - box-shadow: inset 0 -1px 0 0 --var($theme, 'idle-bottom-line-color'); + box-shadow: inset 0 -1px 0 0 var-get($theme, 'idle-bottom-line-color'); &:hover, &:focus { - background: --var($theme, 'box-background'); + background: var-get($theme, 'box-background'); } } %indigo--box-focused { - background: --var($theme, 'box-background'); + background: var-get($theme, 'box-background'); } %form-group-bundle-success--indigo { - box-shadow: inset 0 -2px 0 0 --var($theme, 'success-secondary-color'); + box-shadow: inset 0 -2px 0 0 var-get($theme, 'success-secondary-color'); } %form-group-bundle-error--indigo { - box-shadow: inset 0 -2px 0 0 --var($theme, 'error-secondary-color'); + box-shadow: inset 0 -2px 0 0 var-get($theme, 'error-secondary-color'); } %form-group-helper--indigo--disabled { - color: --var($theme, 'disabled-text-color'); + color: var-get($theme, 'disabled-text-color'); } %form-group-bundle--box-cosy { - padding: 0 rem(16px, map-get($base-scale-size, 'cosy')); + padding: 0 rem(16px, map.get($base-scale-size, 'cosy')); } %form-group-bundle--box-compact { - padding: 0 rem(16px, map-get($base-scale-size, 'compact')); + padding: 0 rem(16px, map.get($base-scale-size, 'compact')); } %form-group-bundle--hover { cursor: pointer; @if not $indigo-theme { - box-shadow: inset 0 -2px 0 0 --var($theme, 'hover-bottom-line-color'); + box-shadow: inset 0 -2px 0 0 var-get($theme, 'hover-bottom-line-color'); } @else { - box-shadow: inset 0 -1px 0 0 --var($theme, 'hover-bottom-line-color'); + box-shadow: inset 0 -1px 0 0 var-get($theme, 'hover-bottom-line-color'); } } %form-group-bundle--focus { - caret-color: --var($theme, 'focused-secondary-color'); + caret-color: var-get($theme, 'focused-secondary-color'); @if not $indigo-theme { - box-shadow: inset 0 -2px 0 0 --var($theme, 'interim-bottom-line-color'); + box-shadow: inset 0 -2px 0 0 var-get($theme, 'interim-bottom-line-color'); } @else { - box-shadow: inset 0 -2px 0 0 --var($theme, 'focused-bottom-line-color'); + box-shadow: inset 0 -2px 0 0 var-get($theme, 'focused-bottom-line-color'); } } %form-group-bundle--success { - caret-color: --var($theme, 'success-secondary-color'); - box-shadow: inset 0 -1px 0 0 --var($theme, 'success-secondary-color'); + caret-color: var-get($theme, 'success-secondary-color'); + box-shadow: inset 0 -1px 0 0 var-get($theme, 'success-secondary-color'); } %form-group-bundle--error { - caret-color: --var($theme, 'error-secondary-color'); - box-shadow: inset 0 -1px 0 0 --var($theme, 'error-secondary-color'); + caret-color: var-get($theme, 'error-secondary-color'); + box-shadow: inset 0 -1px 0 0 var-get($theme, 'error-secondary-color'); } %form-group-bundle--disabled { @if not $indigo-theme { box-shadow: none; } @else { - box-shadow: inset 0 -1px 0 0 --var($theme, 'disabled-bottom-line-color'); + box-shadow: inset 0 -1px 0 0 var-get($theme, 'disabled-bottom-line-color'); } - background-image: linear-gradient(to #{$left}, --var($theme, 'disabled-bottom-line-color') 40%, transparent 10%); + background-image: linear-gradient(to #{$left}, var-get($theme, 'disabled-bottom-line-color') 40%, transparent 10%); background-position: bottom; background-size: 4px 1px; background-repeat: repeat-x; @@ -539,62 +526,62 @@ %form-group-bundle--box-disabled { @if not $indigo-theme { - background: --var($theme, 'box-disabled-background'); + background: var-get($theme, 'box-disabled-background'); } @else { background: transparent; } } %form-group-bundle--border { - padding: 0 rem(16px, map-get($base-scale-size, 'comfortable')); - box-shadow: inset 0 0 0 1px --var($theme, 'border-color'); - border-radius: --var($theme, 'border-border-radius'); - background: --var($theme, 'border-background'); + padding: 0 rem(16px, map.get($base-scale-size, 'comfortable')); + box-shadow: inset 0 0 0 1px var-get($theme, 'border-color'); + border-radius: var-get($theme, 'border-border-radius'); + background: var-get($theme, 'border-background'); } %form-group-bundle--border-cosy { - padding: 0 rem(16px, map-get($base-scale-size, 'cosy')); + padding: 0 rem(16px, map.get($base-scale-size, 'cosy')); } %form-group-bundle--border-compact { - padding: 0 rem(16px, map-get($base-scale-size, 'compact')); + padding: 0 rem(16px, map.get($base-scale-size, 'compact')); } %form-group-bundle-border--hover { @if not $indigo-theme { - box-shadow: inset 0 0 0 2px --var($theme, 'hover-border-color'); + box-shadow: inset 0 0 0 2px var-get($theme, 'hover-border-color'); } @else { - box-shadow: inset 0 0 0 1px --var($theme, 'hover-border-color'); + box-shadow: inset 0 0 0 1px var-get($theme, 'hover-border-color'); } } %form-group-bundle-border--focus { @if not $indigo-theme { - box-shadow: inset 0 0 0 2px --var($theme, 'focused-border-color'); + box-shadow: inset 0 0 0 2px var-get($theme, 'focused-border-color'); } @else { - box-shadow: inset 0 0 0 1px --var($theme, 'focused-border-color'); + box-shadow: inset 0 0 0 1px var-get($theme, 'focused-border-color'); } } %form-group-bundle-border--error { @if not $indigo-theme { - box-shadow: inset 0 0 0 2px --var($theme, 'error-secondary-color'); + box-shadow: inset 0 0 0 2px var-get($theme, 'error-secondary-color'); } @else { - box-shadow: inset 0 0 0 1px --var($theme, 'error-secondary-color'); + box-shadow: inset 0 0 0 1px var-get($theme, 'error-secondary-color'); } } %form-group-bundle-border--success { @if not $indigo-theme { - box-shadow: inset 0 0 0 2px --var($theme, 'success-secondary-color'); + box-shadow: inset 0 0 0 2px var-get($theme, 'success-secondary-color'); } @else { - box-shadow: inset 0 0 0 1px --var($theme, 'success-secondary-color'); + box-shadow: inset 0 0 0 1px var-get($theme, 'success-secondary-color'); } } %form-group-bundle-border--disabled { - background: --var($theme, 'border-disabled-background'); - box-shadow: inset 0 0 0 1px --var($theme, 'disabled-border-color'); + background: var-get($theme, 'border-disabled-background'); + box-shadow: inset 0 0 0 1px var-get($theme, 'disabled-border-color'); } // FLUENT START @@ -716,7 +703,7 @@ position: absolute; top: rem(-8px); #{$left}: calc(100% + #{rem(4px)}); - color: --var($theme, 'error-secondary-color'); + color: var-get($theme, 'error-secondary-color'); } } @@ -730,38 +717,38 @@ %form-group-bundle--fluent { padding: 0; min-height: 32px; - border: 1px solid --var($theme, 'border-color'); + border: 1px solid var-get($theme, 'border-color'); box-shadow: none; - border-radius: --var($theme, 'border-border-radius'); - background: --var($theme, 'border-background'); + border-radius: var-get($theme, 'border-border-radius'); + background: var-get($theme, 'border-background'); position: relative; align-items: stretch; } %form-group-bundle--fluent--hover { - border-color: --var($theme, 'hover-border-color'); + border-color: var-get($theme, 'hover-border-color'); box-shadow: none; } %form-group-bundle--fluent--focus { - border-color: --var($theme, 'focused-border-color'); + border-color: var-get($theme, 'focused-border-color'); box-shadow: none; } %form-group-bundle--fluent--hover-disabled, %form-group-bundle--fluent-disabled { - border-color: --var($theme, 'disabled-border-color'); - background: --var($theme, 'border-disabled-background'); + border-color: var-get($theme, 'disabled-border-color'); + background: var-get($theme, 'border-disabled-background'); } %form-group-bundle-error--fluent--hover, %form-group-bundle-error--fluent { - border-color: --var($theme, 'error-secondary-color'); + border-color: var-get($theme, 'error-secondary-color'); } %form-group-bundle-success--fluent--hover, %form-group-bundle-success--fluent { - border-color: --var($theme, 'success-secondary-color'); + border-color: var-get($theme, 'success-secondary-color'); } %fluent-input { @@ -771,7 +758,7 @@ } %fluent-input-disabled { - color: --var($theme, 'disabled-text-color'); + color: var-get($theme, 'disabled-text-color'); } %form-group-bundle-main--fluent { @@ -798,19 +785,19 @@ transform-origin: top #{$left}; margin-top: 0 !important; height: auto; - color: igx-color(map-get($theme, 'palette'), 'grays', 800); + color: igx-color(map.get($theme, 'palette'), 'grays', 800); } %fluent-label-success { - color: --var($theme, 'idle-text-color'); + color: var-get($theme, 'idle-text-color'); } %fluent-label-error { - color: --var($theme, 'idle-text-color'); + color: var-get($theme, 'idle-text-color'); } %fluent-label-disabled { - color: igx-color(map-get($theme, 'palette'), 'grays', 500); + color: igx-color(map.get($theme, 'palette'), 'grays', 500); } %fluent-label-filled { @@ -818,7 +805,7 @@ } %fluent-label-focused { - color: igx-color(map-get($theme, 'palette'), 'grays', 800); + color: igx-color(map.get($theme, 'palette'), 'grays', 800); transform: translateY(0) scale(1); } @@ -827,44 +814,44 @@ } %form-group-bundle--search { - padding: 0 rem(16px, map-get($base-scale-size, 'comfortable')); - border-radius: --var($theme, 'search-border-radius'); - background: --var($theme, 'search-background'); - box-shadow: --var($theme, 'search-resting-shadow'); + padding: 0 rem(16px, map.get($base-scale-size, 'comfortable')); + border-radius: var-get($theme, 'search-border-radius'); + background: var-get($theme, 'search-background'); + box-shadow: var-get($theme, 'search-resting-shadow'); } %form-group-bundle--search-cosy { - padding: 0 rem(16px, map-get($base-scale-size, 'cosy')); + padding: 0 rem(16px, map.get($base-scale-size, 'cosy')); } %form-group-bundle--search-compact { - padding: 0 rem(16px, map-get($base-scale-size, 'compact')); + padding: 0 rem(16px, map.get($base-scale-size, 'compact')); } %form-group-bundle-search--hover { - box-shadow: --var($theme, 'search-hover-shadow'); - border-color: --var($theme, 'hover-border-color'); + box-shadow: var-get($theme, 'search-hover-shadow'); + border-color: var-get($theme, 'hover-border-color'); } %form-group-bundle-search--focus { - box-shadow: --var($theme, 'search-hover-shadow'); - border-color: --var($theme, 'hover-border-color'); + box-shadow: var-get($theme, 'search-hover-shadow'); + border-color: var-get($theme, 'hover-border-color'); } %form-group-bundle-search--error { - box-shadow: --var($theme, 'search-hover-shadow'); - border-color: --var($theme, 'search-hover-shadow'); + box-shadow: var-get($theme, 'search-hover-shadow'); + border-color: var-get($theme, 'search-hover-shadow'); } %form-group-bundle-search--success { - box-shadow: --var($theme, 'search-hover-shadow'); - border-color: --var($theme, 'search-hover-shadow'); + box-shadow: var-get($theme, 'search-hover-shadow'); + border-color: var-get($theme, 'search-hover-shadow'); } %form-group-bundle-search--disabled { - background: --var($theme, 'search-disabled-background'); - box-shadow: --var($theme, 'search-disabled-shadow'); - border-color: --var($theme, 'disabled-border-color'); + background: var-get($theme, 'search-disabled-background'); + box-shadow: var-get($theme, 'search-disabled-shadow'); + border-color: var-get($theme, 'disabled-border-color'); } %form-group-bundle-main { @@ -874,15 +861,15 @@ } %form-group-bundle-main--box { - padding-top: rem(18px, map-get($base-scale-size, 'comfortable')); + padding-top: rem(18px, map.get($base-scale-size, 'comfortable')); } %form-group-bundle-main--box-cosy { - padding-top: rem(18px, map-get($base-scale-size, 'cosy')); + padding-top: rem(18px, map.get($base-scale-size, 'cosy')); } %form-group-bundle-main--box-compact { - padding-top: rem(18px, map-get($base-scale-size, 'compact')); + padding-top: rem(18px, map.get($base-scale-size, 'compact')); } %form-group-label { @@ -940,11 +927,11 @@ %form-group-label--float-border { // width: auto; transform: translateY(-130%) scale(.75); - background: --var($theme, 'label-floated-background', inherit); + background: var-get($theme, 'label-floated-background', inherit); } %form-group-label--float-border-disabled { - background: --var($theme, 'label-floated-disabled-background', inherit); + background: var-get($theme, 'label-floated-disabled-background', inherit); } %form-group-label--float-border-cosy { @@ -960,15 +947,15 @@ } %form-group-label--focus { - color: --var($theme, 'focused-secondary-color'); + color: var-get($theme, 'focused-secondary-color'); } %form-group-label--success { - color: --var($theme, 'success-secondary-color'); + color: var-get($theme, 'success-secondary-color'); } %form-group-label--error { - color: --var($theme, 'error-secondary-color'); + color: var-get($theme, 'error-secondary-color'); } %form-group-label--required { @@ -985,12 +972,12 @@ position: relative; display: block; border: none; - height: rem(32px, map-get($base-scale-size, 'comfortable')); + height: rem(32px, map.get($base-scale-size, 'comfortable')); width: 100%; min-width: 0; overflow: visible; background: transparent; - color: --var($theme, 'filled-text-color'); + color: var-get($theme, 'filled-text-color'); outline-style: none; box-shadow: none; border-top: rem(3px) solid transparent; @@ -1005,7 +992,7 @@ } &::placeholder { - color: --var($theme, 'placeholder-color'); + color: var-get($theme, 'placeholder-color'); opacity: 1; line-height: normal; /* Fix placeholder position in Safari */ } @@ -1016,8 +1003,8 @@ width: 100%; max-width: 100%; overflow: hidden; - height: rem(32px, map-get($base-scale-size, 'comfortable')); - color: --var($theme, 'filled-text-color'); + height: rem(32px, map.get($base-scale-size, 'comfortable')); + color: var-get($theme, 'filled-text-color'); line-height: 1; span { @@ -1032,20 +1019,20 @@ } %form-group-input--cosy { - height: rem(32px, map-get($base-scale-size, 'cosy')); + height: rem(32px, map.get($base-scale-size, 'cosy')); } %form-group-file-input--cosy { - height: rem(32px, map-get($base-scale-size, 'cosy')); + height: rem(32px, map.get($base-scale-size, 'cosy')); } %form-group-input--compact { - font-size: rem(map-get($base-scale-size, 'compact') - 1px, map-get($base-scale-size, 'compact')); - height: rem(32px, map-get($base-scale-size, 'compact')); + font-size: rem(map.get($base-scale-size, 'compact') - 1px, map.get($base-scale-size, 'compact')); + height: rem(32px, map.get($base-scale-size, 'compact')); } %form-group-file-input--compact { - height: rem(32px, map-get($base-scale-size, 'compact')); + height: rem(32px, map.get($base-scale-size, 'compact')); } %form-group-upload-button { @@ -1105,23 +1092,23 @@ %form-group-input--focus { cursor: text; - color: --var($theme, 'focused-text-color'); + color: var-get($theme, 'focused-text-color'); } %form-group-input--disabled { - color: --var($theme, 'disabled-text-color') !important; + color: var-get($theme, 'disabled-text-color') !important; &::placeholder { - color: --var($theme, 'disabled-placeholder-color'); + color: var-get($theme, 'disabled-placeholder-color'); } } %form-group-textarea { // 3 lines * 22px + 8px bottom padding + 8px top padding - min-height: rem(82px, map-get($base-scale-size, 'comfortable')); + min-height: rem(82px, map.get($base-scale-size, 'comfortable')); // this fixes resizing in chrome !?!? - margin-#{$right}: -#{rem(16px, map-get($base-scale-size, 'comfortable'))}; + margin-#{$right}: -#{rem(16px, map.get($base-scale-size, 'comfortable'))}; height: auto; resize: vertical; @@ -1136,33 +1123,33 @@ } %form-group-textarea--disabled { - color: --var($theme, 'disabled-text-color') !important; + color: var-get($theme, 'disabled-text-color') !important; &::placeholder { - color: --var($theme, 'disabled-placeholder-color'); + color: var-get($theme, 'disabled-placeholder-color'); } } %form-group-textarea--cosy { - min-height: rem(82px, map-get($base-scale-size, 'cosy')); - margin-#{$right}: -#{rem(16px, map-get($base-scale-size, 'cosy'))}; + min-height: rem(82px, map.get($base-scale-size, 'cosy')); + margin-#{$right}: -#{rem(16px, map.get($base-scale-size, 'cosy'))}; } %form-group-textarea--compact { - min-height: rem(82px, map-get($base-scale-size, 'compact')); - margin-#{$right}: -#{rem(16px, map-get($base-scale-size, 'compact'))}; + min-height: rem(82px, map.get($base-scale-size, 'compact')); + margin-#{$right}: -#{rem(16px, map.get($base-scale-size, 'compact'))}; } %form-group-textarea--indigo { - margin-top: -#{rem(18px, map-get($base-scale-size, 'comfortable'))} !important; + margin-top: -#{rem(18px, map.get($base-scale-size, 'comfortable'))} !important; } %form-group-textarea--indigo-cosy { - margin-top: -#{rem(18px, map-get($base-scale-size, 'cosy'))} !important; + margin-top: -#{rem(18px, map.get($base-scale-size, 'cosy'))} !important; } %form-group-textarea--indigo-compact { - margin-top: -#{rem(18px, map-get($base-scale-size, 'compact'))} !important; + margin-top: -#{rem(18px, map.get($base-scale-size, 'compact'))} !important; } %form-group-prefix, @@ -1170,85 +1157,85 @@ position: relative; display: inline-flex; align-items: center; - height: rem(32px, map-get($base-scale-size, 'comfortable')); + height: rem(32px, map.get($base-scale-size, 'comfortable')); transition: color $transition-timing; } %form-group-prefix { @include if-ltr() { - padding: rem(8px, map-get($base-scale-size, 'comfortable')) - rem(8px, map-get($base-scale-size, 'comfortable')) - rem(8px, map-get($base-scale-size, 'comfortable')) + padding: rem(8px, map.get($base-scale-size, 'comfortable')) + rem(8px, map.get($base-scale-size, 'comfortable')) + rem(8px, map.get($base-scale-size, 'comfortable')) 0; } @include if-rtl() { - padding: rem(8px, map-get($base-scale-size, 'comfortable')) + padding: rem(8px, map.get($base-scale-size, 'comfortable')) 0 - rem(8px, map-get($base-scale-size, 'comfortable')) - rem(8px, map-get($base-scale-size, 'comfortable')); + rem(8px, map.get($base-scale-size, 'comfortable')) + rem(8px, map.get($base-scale-size, 'comfortable')); } } %form-group-suffix { - padding: rem(8px, map-get($base-scale-size, 'comfortable')) 0; + padding: rem(8px, map.get($base-scale-size, 'comfortable')) 0; } %form-group-prefix--cosy, %form-group-suffix--cosy { - height: rem(32px, map-get($base-scale-size, 'cosy')); + height: rem(32px, map.get($base-scale-size, 'cosy')); } %form-group-prefix--compact, %form-group-suffix--compact { - font-size: rem(map-get($base-scale-size, 'compact') - 1px, map-get($base-scale-size, 'compact')); - height: rem(32px, map-get($base-scale-size, 'compact')); + font-size: rem(map.get($base-scale-size, 'compact') - 1px, map.get($base-scale-size, 'compact')); + height: rem(32px, map.get($base-scale-size, 'compact')); } %form-group-prefix--cosy { @include if-ltr() { - padding: rem(8px, map-get($base-scale-size, 'cosy')) - rem(8px, map-get($base-scale-size, 'cosy')) - rem(8px, map-get($base-scale-size, 'cosy')) + padding: rem(8px, map.get($base-scale-size, 'cosy')) + rem(8px, map.get($base-scale-size, 'cosy')) + rem(8px, map.get($base-scale-size, 'cosy')) 0; } @include if-rtl() { - padding: rem(8px, map-get($base-scale-size, 'cosy')) + padding: rem(8px, map.get($base-scale-size, 'cosy')) 0 - rem(8px, map-get($base-scale-size, 'cosy')) - rem(8px, map-get($base-scale-size, 'cosy')); + rem(8px, map.get($base-scale-size, 'cosy')) + rem(8px, map.get($base-scale-size, 'cosy')); } } %form-group-prefix--compact { @include if-ltr() { - padding: rem(8px, map-get($base-scale-size, 'compact')) - rem(8px, map-get($base-scale-size, 'compact')) - rem(8px, map-get($base-scale-size, 'compact')) + padding: rem(8px, map.get($base-scale-size, 'compact')) + rem(8px, map.get($base-scale-size, 'compact')) + rem(8px, map.get($base-scale-size, 'compact')) 0; } @include if-rtl() { - padding: rem(8px, map-get($base-scale-size, 'compact')) + padding: rem(8px, map.get($base-scale-size, 'compact')) 0 - rem(8px, map-get($base-scale-size, 'compact')) - rem(8px, map-get($base-scale-size, 'compact')); + rem(8px, map.get($base-scale-size, 'compact')) + rem(8px, map.get($base-scale-size, 'compact')); } } %form-group-suffix--cosy { - padding: rem(8px, map-get($base-scale-size, 'cosy')) 0; + padding: rem(8px, map.get($base-scale-size, 'cosy')) 0; } %form-group-suffix--compact { - padding: rem(8px, map-get($base-scale-size, 'compact')) 0; + padding: rem(8px, map.get($base-scale-size, 'compact')) 0; } %form-group-prefix-fluent { - color: --var($theme, 'input-prefix-color'); - background: --var($theme, 'input-prefix-background'); - padding: rem(8px, map-get($base-scale-size, 'comfortable')); + color: var-get($theme, 'input-prefix-color'); + background: var-get($theme, 'input-prefix-background'); + padding: rem(8px, map.get($base-scale-size, 'comfortable')); width: auto; height: auto; line-height: normal; @@ -1266,7 +1253,7 @@ } %form-group-prefix-fluent-search { - padding: rem(8px, map-get($base-scale-size, 'comfortable')); + padding: rem(8px, map.get($base-scale-size, 'comfortable')); igx-icon { width: rem(18px); @@ -1280,9 +1267,9 @@ } %form-group-suffix-fluent { - color: --var($theme, 'input-suffix-color'); - padding: rem(8px, map-get($base-scale-size, 'comfortable')); - background: --var($theme, 'input-suffix-background'); + color: var-get($theme, 'input-suffix-color'); + padding: rem(8px, map.get($base-scale-size, 'comfortable')); + background: var-get($theme, 'input-suffix-background'); width: auto; height: auto; line-height: normal; @@ -1301,7 +1288,7 @@ %form-group-suffix-fluent-search { width: auto; height: auto; - padding: rem(8px, map-get($base-scale-size, 'comfortable')); + padding: rem(8px, map.get($base-scale-size, 'comfortable')); line-height: normal; igx-icon { @@ -1327,59 +1314,59 @@ %form-group-suffix-fluent-search--compact, %form-group-prefix-fluent--compact, %form-group-suffix-fluent--compact { - font-size: rem(map-get($base-scale-size, 'compact') - 1px, map-get($base-scale-size, 'compact')); + font-size: rem(map.get($base-scale-size, 'compact') - 1px, map.get($base-scale-size, 'compact')); height: auto; line-height: normal; } %form-group-prefix-fluent-search--cosy, %form-group-prefix-fluent--cosy { - padding: rem(8px, map-get($base-scale-size, 'cosy')); + padding: rem(8px, map.get($base-scale-size, 'cosy')); } %form-group-prefix-fluent-search--compact, %form-group-prefix-fluent--compact { - padding: rem(8px, map-get($base-scale-size, 'compact')); + padding: rem(8px, map.get($base-scale-size, 'compact')); } %form-group-suffix-fluent-search--cosy, %form-group-suffix-fluent--cosy { - padding: rem(8px, map-get($base-scale-size, 'cosy')); + padding: rem(8px, map.get($base-scale-size, 'cosy')); } %form-group-suffix-fluent-search--compact, %form-group-suffix-fluent--compact { - padding: rem(8px, map-get($base-scale-size, 'compact')); + padding: rem(8px, map.get($base-scale-size, 'compact')); } // FLUENT END %form-group-prefix--box { @include if-ltr() { - padding: 0 rem(8px, map-get($base-scale-size, 'comfortable')) 0 0; + padding: 0 rem(8px, map.get($base-scale-size, 'comfortable')) 0 0; } @include if-rtl() { - padding: 0 0 0 rem(8px, map-get($base-scale-size, 'comfortable')); /* 8px, base is 16px */ + padding: 0 0 0 rem(8px, map.get($base-scale-size, 'comfortable')); /* 8px, base is 16px */ } } %form-group-prefix--box-cosy { @include if-ltr() { - padding: 0 rem(8px, map-get($base-scale-size, 'cosy')) 0 0; + padding: 0 rem(8px, map.get($base-scale-size, 'cosy')) 0 0; } @include if-rtl() { - padding: 0 0 0 rem(8px, map-get($base-scale-size, 'cosy')); /* 8px, base is 16px */ + padding: 0 0 0 rem(8px, map.get($base-scale-size, 'cosy')); /* 8px, base is 16px */ } } %form-group-prefix--box-compact { @include if-ltr() { - padding: 0 rem(8px, map-get($base-scale-size, 'compact')) 0 0; + padding: 0 rem(8px, map.get($base-scale-size, 'compact')) 0 0; } @include if-rtl() { - padding: 0 0 0 rem(8px, map-get($base-scale-size, 'compact')); /* 8px, base is 16px */ + padding: 0 0 0 rem(8px, map.get($base-scale-size, 'compact')); /* 8px, base is 16px */ } } @@ -1389,7 +1376,7 @@ %form-group-prefix--error, %form-group-suffix--error { - color: --var($theme, 'error-secondary-color'); + color: var-get($theme, 'error-secondary-color'); } %form-group-border { @@ -1397,7 +1384,7 @@ margin-top: -2px; /* 2px, when base is 16px */ transform: scaleX(0); transform-origin: center; - background: --var($theme, 'focused-secondary-color'); + background: var-get($theme, 'focused-secondary-color'); } %form-group-border--focus { @@ -1406,15 +1393,15 @@ } %form-group-border--success { - background: --var($theme, 'success-secondary-color'); + background: var-get($theme, 'success-secondary-color'); } %form-group-border--warning { - background: --var($theme, 'warning-secondary-color'); + background: var-get($theme, 'warning-secondary-color'); } %form-group-border--error { - background: --var($theme, 'error-secondary-color'); + background: var-get($theme, 'error-secondary-color'); } %form-group-border--hidden { @@ -1424,7 +1411,7 @@ %form-group-helper { position: relative; display: flex; - padding-top: rem(6px, map-get($base-scale-size, 'comfortable')); + padding-top: rem(6px, map.get($base-scale-size, 'comfortable')); justify-content: space-between; > * { @@ -1441,11 +1428,11 @@ } %form-group-help--cosy { - padding-top: rem(6px, map-get($base-scale-size, 'cosy')); + padding-top: rem(6px, map.get($base-scale-size, 'cosy')); } %form-group-help--compact { - padding-top: rem(6px, map-get($base-scale-size, 'compact')); + padding-top: rem(6px, map.get($base-scale-size, 'compact')); } %form-group-helper--box { @@ -1454,11 +1441,11 @@ } %form-group-helper--success { - color: --var($theme, 'success-secondary-color'); + color: var-get($theme, 'success-secondary-color'); } %form-group-helper--error { - color: --var($theme, 'error-secondary-color'); + color: var-get($theme, 'error-secondary-color'); } %form-group-helper-item { @@ -1482,7 +1469,7 @@ %form-group-prefix--disabled, %form-group-suffix--disabled { - color: --var($theme, 'disabled-text-color'); + color: var-get($theme, 'disabled-text-color'); } // Bootstrap @@ -1498,13 +1485,13 @@ } %form-group-prefix--bootstrap:first-child { - border-top-#{$left}-radius: --var($theme, 'box-border-radius'); - border-bottom-#{$left}-radius: --var($theme, 'box-border-radius'); + border-top-#{$left}-radius: var-get($theme, 'box-border-radius'); + border-bottom-#{$left}-radius: var-get($theme, 'box-border-radius'); } %form-group-suffix--bootstrap:last-child { - border-top-#{$right}-radius: --var($theme, 'box-border-radius'); - border-bottom-#{$right}-radius: --var($theme, 'box-border-radius'); + border-top-#{$right}-radius: var-get($theme, 'box-border-radius'); + border-bottom-#{$right}-radius: var-get($theme, 'box-border-radius'); } %bootstrap-input:not(:first-child), @@ -1572,71 +1559,71 @@ %form-group-prefix--bootstrap, %form-group-suffix--bootstrap { - border: 1px solid --var($theme, 'border-color'); - padding: map-get($bootstrap-padding, 'comfortable'); + border: 1px solid var-get($theme, 'border-color'); + padding: map.get($bootstrap-padding, 'comfortable'); z-index: -1; width: auto; height: auto; - font-size: map-get($bootstrap-font-size, 'comfortable'); + font-size: map.get($bootstrap-font-size, 'comfortable'); line-height: 1.5; white-space: nowrap; igx-icon { - width: map-get($bootstrap-font-size, 'comfortable'); - height: map-get($bootstrap-font-size, 'comfortable'); - font-size: map-get($bootstrap-font-size, 'comfortable'); + width: map.get($bootstrap-font-size, 'comfortable'); + height: map.get($bootstrap-font-size, 'comfortable'); + font-size: map.get($bootstrap-font-size, 'comfortable'); font-weight: 400; } } %form-group-prefix--bootstrap { - color: --var($theme, 'input-prefix-color'); - background: --var($theme, 'input-prefix-background'); + color: var-get($theme, 'input-prefix-color'); + background: var-get($theme, 'input-prefix-background'); border-#{$right}: 0; } %form-group-suffix--bootstrap { - color: --var($theme, 'input-suffix-color'); - background: --var($theme, 'input-suffix-background'); + color: var-get($theme, 'input-suffix-color'); + background: var-get($theme, 'input-suffix-background'); border-#{$left}: 0; } %form-group-prefix--disabled-bootstrap, %form-group-suffix--disabled-bootstrap { - border: 1px solid --var($theme, 'disabled-border-color'); - color: --var($theme, 'disabled-text-color'); + border: 1px solid var-get($theme, 'disabled-border-color'); + color: var-get($theme, 'disabled-text-color'); } %form-group-prefix--cosy-bootstrap, %form-group-suffix--cosy-bootstrap { - padding: map-get($bootstrap-padding, 'cosy'); + padding: map.get($bootstrap-padding, 'cosy'); width: auto; height: auto; igx-icon { - width: map-get($bootstrap-font-size, 'cosy'); - height: map-get($bootstrap-font-size, 'cosy'); - font-size: map-get($bootstrap-font-size, 'cosy'); + width: map.get($bootstrap-font-size, 'cosy'); + height: map.get($bootstrap-font-size, 'cosy'); + font-size: map.get($bootstrap-font-size, 'cosy'); } } %form-group-prefix--compact-bootstrap, %form-group-suffix--compact-bootstrap { - padding: map-get($bootstrap-padding, 'compact'); + padding: map.get($bootstrap-padding, 'compact'); width: auto; height: auto; igx-icon { - width: map-get($bootstrap-font-size, 'compact'); - height: map-get($bootstrap-font-size, 'compact'); - font-size: map-get($bootstrap-font-size, 'compact'); + width: map.get($bootstrap-font-size, 'compact'); + height: map.get($bootstrap-font-size, 'compact'); + font-size: map.get($bootstrap-font-size, 'compact'); } } %bootstrap-label { position: static; display: block; - color: --var($theme, 'idle-secondary-color'); + color: var-get($theme, 'idle-secondary-color'); padding: 0; line-height: normal !important; transform: translateY(0); @@ -1661,38 +1648,38 @@ height: auto; line-height: 1.5 !important; margin: 0; - border-radius: --var($theme, 'box-border-radius'); - border: 1px solid --var($theme, 'border-color'); - font-size: map-get($bootstrap-font-size, 'comfortable'); - padding: map-get($bootstrap-padding, 'comfortable'); + border-radius: var-get($theme, 'box-border-radius'); + border: 1px solid var-get($theme, 'border-color'); + font-size: map.get($bootstrap-font-size, 'comfortable'); + padding: map.get($bootstrap-padding, 'comfortable'); } %bootstrap-file-input { - width: calc(100% - #{2 * nth(map-get($bootstrap-padding, 'comfortable'), 2)}); + width: calc(100% - #{2 * nth(map.get($bootstrap-padding, 'comfortable'), 2)}); height: inherit; - border-radius: --var($theme, 'box-border-radius'); - border: 1px solid --var($theme, 'border-color'); - padding: map-get($bootstrap-padding, 'comfortable'); + border-radius: var-get($theme, 'box-border-radius'); + border: 1px solid var-get($theme, 'border-color'); + padding: map.get($bootstrap-padding, 'comfortable'); } %bootstrap-input--focus { - border: 1px solid --var($theme, 'focused-secondary-color'); - box-shadow: 0 0 0 rem(3px) --var($theme, 'focused-shadow-color'); + border: 1px solid var-get($theme, 'focused-secondary-color'); + box-shadow: 0 0 0 rem(3px) var-get($theme, 'focused-secondary-color'); } %bootstrap-input--success { - border: 1px solid --var($theme, 'success-secondary-color'); - box-shadow: 0 0 0 rem(3px) --var($theme, 'success-shadow-color'); + border: 1px solid var-get($theme, 'success-secondary-color'); + box-shadow: 0 0 0 rem(3px) var-get($theme, 'success-secondary-color'); } %bootstrap-input--error { - border: 1px solid --var($theme, 'error-secondary-color'); - box-shadow: 0 0 0 rem(3px) --var($theme, 'error-shadow-color'); + border: 1px solid var-get($theme, 'error-secondary-color'); + box-shadow: 0 0 0 rem(3px) var-get($theme, 'error-secondary-color'); } %bootstrap-input--disabled { - background: --var($theme, 'border-disabled-background'); - border: 1px solid --var($theme, 'disabled-border-color'); + background: var-get($theme, 'border-disabled-background'); + border: 1px solid var-get($theme, 'disabled-border-color'); box-shadow: none; } @@ -1701,13 +1688,13 @@ } %bootstrap-input--cosy { - font-size: map-get($bootstrap-font-size, 'cosy'); - padding: map-get($bootstrap-padding, 'cosy'); + font-size: map.get($bootstrap-font-size, 'cosy'); + padding: map.get($bootstrap-padding, 'cosy'); } %bootstrap-input--compact { - font-size: map-get($bootstrap-font-size, 'compact'); - padding: map-get($bootstrap-padding, 'compact'); + font-size: map.get($bootstrap-font-size, 'compact'); + padding: map.get($bootstrap-padding, 'compact'); } } @@ -1722,8 +1709,8 @@ helper-text: 'caption', input-text: 'subtitle-1') ) { - $helper-text: map-get($categories, 'helper-text'); - $input-text: map-get($categories, 'input-text'); + $helper-text: map.get($categories, 'helper-text'); + $input-text: map.get($categories, 'input-text'); $input-text-props: igx-type-scale-category($type-scale, $input-text); %form-group-input { diff --git a/projects/igniteui-angular/src/lib/core/styles/components/list/_list-component.scss b/projects/igniteui-angular/src/lib/core/styles/components/list/_list-component.scss index a6023f2f253..9175d3adef2 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/list/_list-component.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/list/_list-component.scss @@ -1,3 +1,6 @@ +@use '../../base' as *; +@use 'sass:string'; + //// /// @group components /// @author Simeon Simeonoff @@ -5,112 +8,118 @@ /// @requires {mixin} bem-elem /// @requires {mixin} bem-mod //// -@include b(igx-list) { - $this: bem--selector-to-string(&); - @include register-component(str-slice($this, 2, -1)); - - @extend %igx-list !optional; - - // css class 'igx-list__header' - @include e(header) { - @extend %igx-list-header !optional; - } - - // css class 'igx-list__item-base' - @include e(item-base) { - @extend %igx-list-item-base !optional; - } - // css class 'igx-list__item-right' applied to the panning container shown when the list item is panned left - @include e(item-right) { - @extend %igx-list-item-pan !optional; - } - - // css class 'igx-list__item-left' applied to the panning container shown when the list item in panned right - @include e(item-left) { - @extend %igx-list-item-pan !optional; - } +@mixin component { + @include b(igx-list) { + $this: bem--selector-to-string(&); + @include register-component( + $name: string.slice($this, 2, -1), + $deps: () + ); - // css class 'igx-list__item-content' - @include e(item-content) { - @extend %igx-list-item-content !optional; + @extend %igx-list !optional; - &:active { - @extend %igx-list-item-content !optional; - @extend %igx-list-item-content--active !optional; + // css class 'igx-list__header' + @include e(header) { + @extend %igx-list-header !optional; } - &:not(:active) { - @extend %igx-list-item-content--inactive !optional; + // css class 'igx-list__item-base' + @include e(item-base) { + @extend %igx-list-item-base !optional; } - } - - @include e(item-thumbnail) { - @extend %igx-list__item-thumbnail !optional; - } - @include e(item-actions) { - @extend %igx-list__item-actions !optional; - } - - @include e(item-lines) { - @extend %igx-list__item-lines !optional; - } + // css class 'igx-list__item-right' applied to the panning container shown when the list item is panned left + @include e(item-right) { + @extend %igx-list-item-pan !optional; + } - @include e(item-line-title) { - @extend %igx-list__item-line-title !optional; - } + // css class 'igx-list__item-left' applied to the panning container shown when the list item in panned right + @include e(item-left) { + @extend %igx-list-item-pan !optional; + } - @include e(item-line-subtitle) { - @extend %igx-list__item-line-subtitle !optional; - } + // css class 'igx-list__item-content' + @include e(item-content) { + @extend %igx-list-item-content !optional; - @include m(empty) { - @extend %igx-list !optional; - @extend %igx-list--empty !optional; + &:active { + @extend %igx-list-item-content !optional; + @extend %igx-list-item-content--active !optional; + } - @include e(message) { - @extend %igx-list__message--empty !optional; + &:not(:active) { + @extend %igx-list-item-content--inactive !optional; + } } - } - - @include m(compact) { - @extend %igx-list !optional; @include e(item-thumbnail) { - @extend %igx-list__item-thumbnail--compact !optional; + @extend %igx-list__item-thumbnail !optional; } @include e(item-actions) { - @extend %igx-list__item-actions--compact !optional; + @extend %igx-list__item-actions !optional; } - @include e(item-content) { - @extend %igx-list-item-content--compact !optional; + @include e(item-lines) { + @extend %igx-list__item-lines !optional; } - @include e(header) { - @extend %igx-list-header--compact !optional; + @include e(item-line-title) { + @extend %igx-list__item-line-title !optional; } - } - - @include m(cosy) { - @extend %igx-list !optional; - @include e(item-thumbnail) { - @extend %igx-list__item-thumbnail--cosy !optional; + @include e(item-line-subtitle) { + @extend %igx-list__item-line-subtitle !optional; } - @include e(item-actions) { - @extend %igx-list__item-actions--cosy !optional; + @include m(empty) { + @extend %igx-list !optional; + @extend %igx-list--empty !optional; + + @include e(message) { + @extend %igx-list__message--empty !optional; + } } - @include e(item-content) { - @extend %igx-list-item-content--cosy !optional; + @include m(compact) { + @extend %igx-list !optional; + + @include e(item-thumbnail) { + @extend %igx-list__item-thumbnail--compact !optional; + } + + @include e(item-actions) { + @extend %igx-list__item-actions--compact !optional; + } + + @include e(item-content) { + @extend %igx-list-item-content--compact !optional; + } + + @include e(header) { + @extend %igx-list-header--compact !optional; + } } - @include e(header) { - @extend %igx-list-header--cosy !optional; + @include m(cosy) { + @extend %igx-list !optional; + + @include e(item-thumbnail) { + @extend %igx-list__item-thumbnail--cosy !optional; + } + + @include e(item-actions) { + @extend %igx-list__item-actions--cosy !optional; + } + + @include e(item-content) { + @extend %igx-list-item-content--cosy !optional; + } + + @include e(header) { + @extend %igx-list-header--cosy !optional; + } } } } diff --git a/projects/igniteui-angular/src/lib/core/styles/components/list/_list-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/list/_list-theme.scss index 2e6f30f6072..25958e823df 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/list/_list-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/list/_list-theme.scss @@ -1,3 +1,9 @@ +@use '../../base' as *; +@use '../../themes/schemas' as *; +@use '../../typography/base' as *; +@use 'sass:map'; +@use 'sass:meta'; + //// /// @group themes /// @access public @@ -87,8 +93,8 @@ $name: 'igx-list'; $list-schema: (); - @if map-has-key($schema, $name) { - $list-schema: map-get($schema, $name); + @if map.has-key($schema, $name) { + $list-schema: map.get($schema, $name); } @else { $list-schema: $schema; } @@ -96,11 +102,11 @@ $theme: apply-palette($list-schema, $palette); $border-radius: round-borders( - if($border-radius, $border-radius, map-get($list-schema, 'border-radius')), 0, 24px + if($border-radius, $border-radius, map.get($list-schema, 'border-radius')), 0, 24px ); $item-border-radius: round-borders( - if($item-border-radius, $item-border-radius, map-get($list-schema, 'item-border-radius')), 0, 24px + if($item-border-radius, $item-border-radius, map.get($list-schema, 'item-border-radius')), 0, 24px ); @if not($header-background) and $background { @@ -120,7 +126,7 @@ } @if not($item-background-hover) and $item-background { - @if type-of($item-background) == 'color' and luminance($item-background) < .5 { + @if meta.type-of($item-background) == 'color' and luminance($item-background) < .5 { $item-background-hover: lighten-color($item-background, 8%); } @else { $item-background-hover: darken-color($item-background, 8%); @@ -128,7 +134,7 @@ } @if not($item-background-active) and $item-background { - @if type-of($item-background) == 'color' and luminance($item-background) < .5 { + @if meta.type-of($item-background) == 'color' and luminance($item-background) < .5 { $item-background-active: lighten-color($item-background, 8%); } @else { $item-background-active: darken-color($item-background, 8%); @@ -156,7 +162,7 @@ } @if not($item-subtitle-color) and $item-background { - @if type-of($item-background) == 'color' { + @if meta.type-of($item-background) == 'color' { $item-subtitle-color: rgba(text-contrast($item-background), .74); } } @@ -182,7 +188,7 @@ } @if not($item-subtitle-color-hover) and $item-background-hover { - @if type-of($item-background-hover) == 'color' { + @if meta.type-of($item-background-hover) == 'color' { $item-subtitle-color-hover: rgba(text-contrast($item-background-hover), .74); } } @@ -208,7 +214,7 @@ } @if not($item-subtitle-color-active) and $item-background-active { - @if type-of($item-background-active) == 'color' { + @if meta.type-of($item-background-active) == 'color' { $item-subtitle-color-active: rgba(text-contrast($item-background-active), .74); } } @@ -251,11 +257,11 @@ /// @param {Map} $theme - The theme used to style the component. /// @requires {mixin} igx-css-vars /// @requires em -/// @requires --var +/// @requires var-get @mixin igx-list($theme) { @include igx-css-vars($theme); - $variant: map-get($theme, variant); + $variant: map.get($theme, variant); $bootstrap-theme: $variant == 'bootstrap'; $left: if-ltr(left, right); @@ -301,14 +307,14 @@ position: relative; display: flex; flex-flow: column nowrap; - background: --var($theme, 'background'); + background: var-get($theme, 'background'); height: 100%; overflow: hidden; z-index: 0; - border-radius: --var($theme, 'border-radius'); + border-radius: var-get($theme, 'border-radius'); @if $bootstrap-theme { - border: --var($theme, 'border-width') solid --var($theme, 'border-color'); + border: var-get($theme, 'border-width') solid var-get($theme, 'border-color'); } } @@ -319,65 +325,65 @@ %igx-list__message--empty { text-align: center; - color: --var($theme, 'item-text-color'); - padding: map-get($list-empty-padding, 'comfortable'); + color: var-get($theme, 'item-text-color'); + padding: map.get($list-empty-padding, 'comfortable'); z-index: 1; } %igx-list-header { display: flex; align-items: center; - color: --var($theme, 'header-text-color'); - background: --var($theme, 'header-background'); - padding: map-get($list-item-padding, 'comfortable'); + color: var-get($theme, 'header-text-color'); + background: var-get($theme, 'header-background'); + padding: map.get($list-item-padding, 'comfortable'); user-select: none; } %igx-list-header--cosy { - padding: map-get($list-item-padding, 'cosy'); + padding: map.get($list-item-padding, 'cosy'); } %igx-list-header--compact { - padding: map-get($list-item-padding, 'compact'); + padding: map.get($list-item-padding, 'compact'); } %igx-list-item-base { display: flex; flex-flow: column wrap; justify-content: center; - border-radius: --var($theme, 'item-border-radius'); - color: --var($theme, 'item-text-color'); - background: --var($theme, 'item-background'); + border-radius: var-get($theme, 'item-border-radius'); + color: var-get($theme, 'item-text-color'); + background: var-get($theme, 'item-background'); &:hover { - color: --var($theme, 'item-text-color-hover'); - background: --var($theme, 'item-background-hover'); + color: var-get($theme, 'item-text-color-hover'); + background: var-get($theme, 'item-background-hover'); %igx-list__item-lines { color: currentColor; } %igx-list__item-line-title { - color: --var($theme, 'item-title-color-hover'); + color: var-get($theme, 'item-title-color-hover'); } %igx-list__item-line-subtitle { - color: --var($theme, 'item-subtitle-color-hover'); + color: var-get($theme, 'item-subtitle-color-hover'); } %igx-list__item-actions { - color: --var($theme, 'item-action-color-hover'); + color: var-get($theme, 'item-action-color-hover'); igx-icon { - color: --var($theme, 'item-action-color-hover') + color: var-get($theme, 'item-action-color-hover') } } %igx-list__item-thumbnail { - color: --var($theme, 'item-thumbnail-color-hover'); + color: var-get($theme, 'item-thumbnail-color-hover'); igx-icon { - color: --var($theme, 'item-thumbnail-color-hover') + color: var-get($theme, 'item-thumbnail-color-hover') } } } @@ -402,19 +408,19 @@ } %igx-list__item-line-subtitle { - color: --var($theme, 'item-subtitle-color'); + color: var-get($theme, 'item-subtitle-color'); opacity: .74 } %igx-list__item-line-title { - color: --var($theme, 'item-title-color'); + color: var-get($theme, 'item-title-color'); } %igx-list__item-actions { display: flex; align-items: center; justify-content: center; - color: --var($theme, 'item-action-color'); + color: var-get($theme, 'item-action-color'); > * { margin-#{$left}: rem(8px); @@ -425,7 +431,7 @@ } igx-icon { - color: --var($theme, 'item-action-color') + color: var-get($theme, 'item-action-color') } } @@ -433,18 +439,18 @@ display: flex; align-items: center; position: relative; - padding: map-get($list-item-padding, 'comfortable'); - border-radius: --var($theme, 'item-border-radius'); + padding: map.get($list-item-padding, 'comfortable'); + border-radius: var-get($theme, 'item-border-radius'); background: inherit; z-index: 2; } %igx-list-item-content--compact { - padding: map-get($list-item-padding, 'compact'); + padding: map.get($list-item-padding, 'compact'); } %igx-list-item-content--cosy { - padding: map-get($list-item-padding, 'cosy'); + padding: map.get($list-item-padding, 'cosy'); } %igx-list__item-thumbnail { @@ -453,15 +459,15 @@ justify-content: center; align-self: flex-start; padding: 0; - color: --var($theme, 'item-thumbnail-color'); + color: var-get($theme, 'item-thumbnail-color'); > igx-icon { @include if-ltr() { - margin: map-get($list-icon-margin, 'comfortable'); + margin: map.get($list-icon-margin, 'comfortable'); } @include if-rtl() { - margin: map-get($list-icon-margin-rtl, 'comfortable'); + margin: map.get($list-icon-margin-rtl, 'comfortable'); } } @@ -478,44 +484,44 @@ %igx-list__item-thumbnail:not(:empty) + %igx-list__item-lines { @include if-ltr() { - margin: map-get($list-line-margin, 'comfortable'); + margin: map.get($list-line-margin, 'comfortable'); } @include if-rtl() { - margin: map-get($list-line-margin-rtl, 'comfortable'); + margin: map.get($list-line-margin-rtl, 'comfortable'); } } %igx-list__item-thumbnail--cosy:not(:empty) + %igx-list__item-lines { @include if-ltr() { - margin: map-get($list-line-margin, 'cosy'); + margin: map.get($list-line-margin, 'cosy'); } @include if-rtl() { - margin: map-get($list-line-margin-rtl, 'cosy'); + margin: map.get($list-line-margin-rtl, 'cosy'); } } %igx-list__item-thumbnail--compact:not(:empty) + %igx-list__item-lines { @include if-ltr() { - margin: map-get($list-line-margin, 'compact'); + margin: map.get($list-line-margin, 'compact'); } @include if-rtl() { - margin: map-get($list-line-margin-rtl, 'compact'); + margin: map.get($list-line-margin-rtl, 'compact'); } } %igx-list__item-thumbnail--cosy { @include if-ltr() { > igx-icon { - margin: map-get($list-icon-margin, 'cosy'); + margin: map.get($list-icon-margin, 'cosy'); } } @include if-rtl() { > igx-icon { - margin: map-get($list-icon-margin-rtl, 'cosy'); + margin: map.get($list-icon-margin-rtl, 'cosy'); } } } @@ -523,13 +529,13 @@ %igx-list__item-thumbnail--compact { @include if-ltr() { > igx-icon { - margin: map-get($list-icon-margin, 'compact'); + margin: map.get($list-icon-margin, 'compact'); } } @include if-rtl() { > igx-icon { - margin: map-get($list-icon-margin-rtl, 'compact'); + margin: map.get($list-icon-margin-rtl, 'compact'); } } } @@ -552,31 +558,31 @@ %igx-list-item-content--active { %igx-list__item-line-title { - color: --var($theme, 'item-title-color-active') + color: var-get($theme, 'item-title-color-active') } %igx-list__item-line-subtitle { - color: --var($theme, 'item-subtitle-color-active') + color: var-get($theme, 'item-subtitle-color-active') } %igx-list__item-actions { - color: --var($theme, 'item-action-color-active'); + color: var-get($theme, 'item-action-color-active'); igx-icon { - color: --var($theme, 'item-action-color-active') + color: var-get($theme, 'item-action-color-active') } } %igx-list__item-thumbnail { - color: --var($theme, 'item-thumbnail-color-active'); + color: var-get($theme, 'item-thumbnail-color-active'); igx-icon { - color: --var($theme, 'item-thumbnail-color-active') + color: var-get($theme, 'item-thumbnail-color-active') } } - color: --var($theme, 'item-text-color-active'); - background: --var($theme, 'item-background-active'); + color: var-get($theme, 'item-text-color-active'); + background: var-get($theme, 'item-background-active'); z-index: 3; } @@ -601,10 +607,10 @@ subtitle: 'caption' ) ) { - $header: map-get($categories, 'header'); - $item: map-get($categories, 'item'); - $title: map-get($categories, 'title'); - $subtitle: map-get($categories, 'subtitle'); + $header: map.get($categories, 'header'); + $item: map.get($categories, 'item'); + $title: map.get($categories, 'title'); + $subtitle: map.get($categories, 'subtitle'); %igx-list-header { @include igx-type-style($type-scale, $header) { diff --git a/projects/igniteui-angular/src/lib/core/styles/components/navbar/_navbar-component.scss b/projects/igniteui-angular/src/lib/core/styles/components/navbar/_navbar-component.scss index 4df7f7917cc..462cfda82bd 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/navbar/_navbar-component.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/navbar/_navbar-component.scss @@ -1,3 +1,6 @@ +@use '../../base' as *; +@use 'sass:string'; + //// /// @group components /// @author Simeon Simeonoff @@ -5,21 +8,29 @@ /// @requires {mixin} bem-elem /// @requires {mixin} bem-mod //// -@include b(igx-navbar) { - $this: bem--selector-to-string(&); - @include register-component(str-slice($this, 2, -1)); - @extend %igx-navbar-display !optional; +@mixin component { + @include b(igx-navbar) { + $this: bem--selector-to-string(&); + @include register-component( + $name: string.slice($this, 2, -1), + $deps: ( + igx-icon, + ) + ); - @include e(title) { - @extend %igx-navbar-title !optional; - } + @extend %igx-navbar-display !optional; - @include e(left) { - @extend %igx-navbar-left !optional; - } + @include e(title) { + @extend %igx-navbar-title !optional; + } + + @include e(left) { + @extend %igx-navbar-left !optional; + } - @include e(right) { - @extend %igx-navbar-right !optional; + @include e(right) { + @extend %igx-navbar-right !optional; + } } } diff --git a/projects/igniteui-angular/src/lib/core/styles/components/navbar/_navbar-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/navbar/_navbar-theme.scss index 631dea45f87..d11db87b43a 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/navbar/_navbar-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/navbar/_navbar-theme.scss @@ -1,3 +1,8 @@ +@use '../../base' as *; +@use '../../themes/schemas' as *; +@use '../../typography/base' as *; +@use 'sass:map'; + //// /// @group themes /// @access public @@ -42,8 +47,8 @@ $name: 'igx-navbar'; $navbar-schema: (); - @if map-has-key($schema, $name) { - $navbar-schema: map-get($schema, $name); + @if map.has-key($schema, $name) { + $navbar-schema: map.get($schema, $name); } @else { $navbar-schema: $schema; } @@ -63,7 +68,7 @@ } @if not($shadow) { - $elevation: map-get($navbar-schema, 'elevation'); + $elevation: map.get($navbar-schema, 'elevation'); $shadow: igx-elevation($elevations, $elevation); } @@ -85,7 +90,7 @@ /// @param {Map} $theme - The theme used to style the component. /// @requires {mixin} igx-css-vars /// @requires em -/// @requires --var +/// @requires var-get @mixin igx-navbar($theme) { @include igx-css-vars($theme); @@ -105,9 +110,9 @@ min-height: 56px; max-height: 128px; padding: $navbar-padding; - background: --var($theme, 'background'); - color: --var($theme, 'text-color'); - box-shadow: --var($theme, 'shadow'); + background: var-get($theme, 'background'); + color: var-get($theme, 'text-color'); + box-shadow: var-get($theme, 'shadow'); z-index: 4; overflow: hidden; } @@ -138,11 +143,11 @@ %igx-navbar-icon-display { > igx-icon { cursor: pointer; - color: --var($theme, 'idle-icon-color'); + color: var-get($theme, 'idle-icon-color'); transition: color .15s $ease-out-quad; &:hover { - color: --var($theme, 'hover-icon-color'); + color: var-get($theme, 'hover-icon-color'); } } } @@ -166,7 +171,7 @@ igx-navbar-title, [igxNavbarTitle] { @extend %igx-navbar-part; - @extend %igx-navbar-title; + @extend %igx-navbar-title !optional; } } @@ -178,7 +183,7 @@ /// @param {Map} $categories [(title: 'h6')] - The categories from the typographic scale used for type styles. /// @requires {mixin} igx-type-style @mixin igx-navbar-typography($type-scale, $categories: (title: 'h6')) { - $title: map-get($categories, 'title'); + $title: map.get($categories, 'title'); %igx-navbar-title { @include igx-type-style($type-scale, $title); diff --git a/projects/igniteui-angular/src/lib/core/styles/components/navdrawer/_navdrawer-component.scss b/projects/igniteui-angular/src/lib/core/styles/components/navdrawer/_navdrawer-component.scss index ae1b275139a..8856d8d26c7 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/navdrawer/_navdrawer-component.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/navdrawer/_navdrawer-component.scss @@ -1,3 +1,6 @@ +@use '../../base' as *; +@use 'sass:string'; + //// /// @group components /// @author Marin Popov @@ -5,87 +8,93 @@ /// @requires {mixin} bem-elem /// @requires {mixin} bem-mod //// -@include b(igx-nav-drawer) { - $this: bem--selector-to-string(&); - @include register-component(str-slice($this, 2, -1)); - @extend %navdrawer-display !optional; +@mixin component { + @include b(igx-nav-drawer) { + $this: bem--selector-to-string(&); + @include register-component( + $name: string.slice($this, 2, -1), + $deps: () + ); + + @extend %navdrawer-display !optional; - // Main aside element - @include e(aside) { - @extend %aside !optional; + // Main aside element + @include e(aside) { + @extend %aside !optional; - &.panning { - @extend %aside-panning !optional; + &.panning { + @extend %aside-panning !optional; + } } - } - @include e(aside, collapsed) { - @extend %aside--collapsed !optional; + @include e(aside, collapsed) { + @extend %aside--collapsed !optional; - &.igx-nav-drawer__aside--right { - @extend %aside--collapsed--right !optional; + &.igx-nav-drawer__aside--right { + @extend %aside--collapsed--right !optional; + } } - } - @include e(aside, right) { - @extend %aside--right !optional; - } + @include e(aside, right) { + @extend %aside--right !optional; + } - @include e(aside, mini) { - @extend %aside--mini !optional; - } + @include e(aside, mini) { + @extend %aside--mini !optional; + } - @include e(aside, normal) { - @extend %aside--normal !optional; - } + @include e(aside, normal) { + @extend %aside--normal !optional; + } - @include e(aside, pinned) { - @extend %aside--pinned !optional; + @include e(aside, pinned) { + @extend %aside--pinned !optional; - &.igx-nav-drawer__aside--collapsed { - @extend %igx-nav-drawer__aside--collapsed !optional; + &.igx-nav-drawer__aside--collapsed { + @extend %igx-nav-drawer__aside--collapsed !optional; + } } - } - // Overlay - @include e(overlay) { - @extend %overlay !optional; + // Overlay + @include e(overlay) { + @extend %overlay !optional; - &.panning { - @extend %overlay-panning !optional; + &.panning { + @extend %overlay-panning !optional; - &.igx-nav-drawer__overlay--hidden { - @extend %overlay-panning--hidden !optional; + &.igx-nav-drawer__overlay--hidden { + @extend %overlay-panning--hidden !optional; + } } } - } - @include e(overlay, hidden) { - @extend %overlay--hidden !optional; - } + @include e(overlay, hidden) { + @extend %overlay--hidden !optional; + } - // Style Dummy(hidden) used for measures - @include e(style-dummy) { - @extend %style-dummy !optional; - } + // Style Dummy(hidden) used for measures + @include e(style-dummy) { + @extend %style-dummy !optional; + } - // igxDrawerItem Items - @include e(item) { - @extend %item !optional; - } + // igxDrawerItem Items + @include e(item) { + @extend %item !optional; + } - @include e(item, active) { - @extend %item !optional; - @extend %item--active !optional; - } + @include e(item, active) { + @extend %item !optional; + @extend %item--active !optional; + } - @include e(item, header) { - @extend %item--header !optional; - } + @include e(item, header) { + @extend %item--header !optional; + } - @include m(disable-animation) { - @extend %disable-animation !optional; + @include m(disable-animation) { + @extend %disable-animation !optional; + } } } diff --git a/projects/igniteui-angular/src/lib/core/styles/components/navdrawer/_navdrawer-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/navdrawer/_navdrawer-theme.scss index d4a20ff5564..ea80428e817 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/navdrawer/_navdrawer-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/navdrawer/_navdrawer-theme.scss @@ -1,3 +1,9 @@ +@use '../../base' as *; +@use '../../themes/schemas' as *; +@use '../../typography/base' as *; +@use 'sass:map'; +@use 'sass:meta'; + //// /// @group themes /// @access public @@ -67,8 +73,8 @@ $name: 'igx-nav-drawer'; $navdrawer-schema: (); - @if map-has-key($schema, $name) { - $navdrawer-schema: map-get($schema, $name); + @if map.has-key($schema, $name) { + $navdrawer-schema: map.get($schema, $name); } @else { $navdrawer-schema: $schema; } @@ -76,11 +82,11 @@ $theme: apply-palette($navdrawer-schema, $palette); $border-radius: round-borders( - if($border-radius, $border-radius, map-get($navdrawer-schema, 'border-radius')), 0, 36px + if($border-radius, $border-radius, map.get($navdrawer-schema, 'border-radius')), 0, 36px ); $item-border-radius: round-borders( - if($item-border-radius, $item-border-radius, map-get($navdrawer-schema, 'item-border-radius')), 0, 24px + if($item-border-radius, $item-border-radius, map.get($navdrawer-schema, 'item-border-radius')), 0, 24px ); @if not($item-header-text-color) and $background { @@ -96,7 +102,7 @@ } @if not($item-active-background) and $background { - @if type-of($background) == 'color' { + @if meta.type-of($background) == 'color' { $item-active-background: rgba(text-contrast($background), .24); } } @@ -110,7 +116,7 @@ } @if not($item-hover-background) and $background { - @if type-of($background) == 'color' { + @if meta.type-of($background) == 'color' { $item-hover-background: rgba(text-contrast($background), .08); } } @@ -120,7 +126,7 @@ } @if not($shadow) { - $elevation: map-get($navdrawer-schema, 'elevation'); + $elevation: map.get($navdrawer-schema, 'elevation'); $shadow: igx-elevation($elevations, $elevation); } @@ -148,7 +154,7 @@ /// @requires {mixin} igx-css-vars /// @requires $overlay-color /// @requires rem -/// @requires --var +/// @requires var-get @mixin igx-navdrawer($theme) { @include igx-css-vars($theme); @@ -162,7 +168,7 @@ $drawer-item-max-h: rem(48px); $drawer-item-min-w: rem(32px); - $variant: map-get($theme, variant); + $variant: map.get($theme, variant); %navdrawer-display { @@ -178,18 +184,18 @@ max-width: 90%; min-height: 100%; overflow-x: hidden; - background: --var($theme, 'background'); + background: var-get($theme, 'background'); top: 0; bottom: 0; #{$left}: 0; z-index: 999; transition: width, transform; transition-timing-function: $ease-out-quad, $ease-out-quad; - box-shadow: --var($theme, 'shadow'); + box-shadow: var-get($theme, 'shadow'); @if $variant != 'indigo-design' { - border-#{$right}: 1px solid --var($theme, 'border-color'); + border-#{$right}: 1px solid var-get($theme, 'border-color'); } - border-radius: --var($theme, 'border-radius'); + border-radius: var-get($theme, 'border-radius'); } %aside-panning { @@ -232,7 +238,7 @@ left: auto; right: 0; border-#{$right}: none; - border-#{$left}: 1px solid --var($theme, 'border-color'); + border-#{$left}: 1px solid var-get($theme, 'border-color'); } %aside--mini { @@ -260,7 +266,7 @@ %overlay { opacity: 1; - background: $overlay-color; + background: igx-color(map.get($theme, 'palette'), 'grays'); transition: opacity, visibility; transition-duration: .25s, .25s; transition-timing-function: ease-in, step-start; @@ -295,7 +301,7 @@ display: flex; align-items: center; flex-flow: row nowrap; - color: --var($theme, 'item-text-color'); + color: var-get($theme, 'item-text-color'); max-height: $drawer-item-max-h; min-width: $drawer-item-min-w; @@ -313,7 +319,7 @@ user-select: none; outline: transparent; white-space: nowrap; - border-radius: --var($theme, 'item-border-radius'); + border-radius: var-get($theme, 'item-border-radius'); text-decoration: none; width: calc(100% - #{$drawer-item-margin * 2}); border: none; @@ -334,7 +340,7 @@ } igx-icon { - color: --var($theme, 'item-icon-color'); + color: var-get($theme, 'item-icon-color'); @if $variant == 'indigo-design' { margin-#{$left}: rem(4px); } @@ -371,23 +377,23 @@ &:hover, &:focus { - background: --var($theme, 'item-hover-background'); - color: --var($theme, 'item-hover-text-color'); + background: var-get($theme, 'item-hover-background'); + color: var-get($theme, 'item-hover-text-color'); box-shadow: none; igx-icon { - color: --var($theme, 'item-hover-icon-color'); + color: var-get($theme, 'item-hover-icon-color'); } } } %item--active { // should be app primary color - color: --var($theme, 'item-active-text-color'); - background: --var($theme, 'item-active-background'); + color: var-get($theme, 'item-active-text-color'); + background: var-get($theme, 'item-active-background'); igx-icon { - color: --var($theme, 'item-active-icon-color'); + color: var-get($theme, 'item-active-icon-color'); } // Need this to override the igx-buttons @@ -410,11 +416,11 @@ &:focus, &:hover { - color: --var($theme, 'item-active-text-color'); - background: --var($theme, 'item-active-background'); + color: var-get($theme, 'item-active-text-color'); + background: var-get($theme, 'item-active-background'); igx-icon { - color: --var($theme, 'item-active-icon-color'); + color: var-get($theme, 'item-active-icon-color'); } } } @@ -423,7 +429,7 @@ display: block; padding: rem(12px) rem(16px); white-space: nowrap; - color: --var($theme, 'item-header-text-color'); + color: var-get($theme, 'item-header-text-color'); } %style-dummy { @@ -453,8 +459,8 @@ header: 'subtitle-1' ) ) { - $item: map-get($categories, 'item'); - $header: map-get($categories, 'header'); + $item: map.get($categories, 'item'); + $header: map.get($categories, 'header'); %item { @include igx-type-style($type-scale, $item); diff --git a/projects/igniteui-angular/src/lib/core/styles/components/overlay/_overlay-component.scss b/projects/igniteui-angular/src/lib/core/styles/components/overlay/_overlay-component.scss index e92501a02da..99d14f3786b 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/overlay/_overlay-component.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/overlay/_overlay-component.scss @@ -1,3 +1,6 @@ +@use '../../base' as *; +@use 'sass:string'; + //// /// @group components /// @author Simeon Simeonoff @@ -5,53 +8,59 @@ /// @requires {mixin} bem-elem /// @requires {mixin} bem-mod //// -@include b(igx-overlay) { - $block: bem--selector-to-string(&); - @include register-component(igx-overlay); - @extend %overlay-display !optional; +@mixin component { + @include b(igx-overlay) { + $this: bem--selector-to-string(&); + @include register-component( + $name: string.slice($this, 2, -1), + $deps: () + ); - @include e(wrapper) { - @extend %overlay-wrapper !optional; - } + @extend %overlay-display !optional; - @include e(wrapper, $m: modal) { - @extend %overlay-wrapper !optional; - @extend %overlay-wrapper--modal !optional; - } + @include e(wrapper) { + @extend %overlay-wrapper !optional; + } - @include e(wrapper, $m: flex) { - @extend %overlay-wrapper !optional; - @extend %overlay-wrapper--flex !optional; - } + @include e(wrapper, $m: modal) { + @extend %overlay-wrapper !optional; + @extend %overlay-wrapper--modal !optional; + } - @include e(wrapper, $m: flex-container) { - @extend %overlay-wrapper !optional; - @extend %overlay-wrapper--flex-container !optional; - } + @include e(wrapper, $m: flex) { + @extend %overlay-wrapper !optional; + @extend %overlay-wrapper--flex !optional; + } - @include e(content) { - @extend %overlay-content !optional; - } + @include e(wrapper, $m: flex-container) { + @extend %overlay-wrapper !optional; + @extend %overlay-wrapper--flex-container !optional; + } - @include e(content, $m: modal) { - @extend %overlay-content !optional; - @extend %overlay-content--modal !optional; - } + @include e(content) { + @extend %overlay-content !optional; + } - @include e(content, $m: elastic) { - @extend %overlay-content !optional; - @extend %overlay-content--elastic !optional; - } + @include e(content, $m: modal) { + @extend %overlay-content !optional; + @extend %overlay-content--modal !optional; + } - @include e(content, $m: relative) { - @extend %overlay-content !optional; - @extend %overlay-content--relative !optional; + @include e(content, $m: elastic) { + @extend %overlay-content !optional; + @extend %overlay-content--elastic !optional; + } + + @include e(content, $m: relative) { + @extend %overlay-content !optional; + @extend %overlay-content--relative !optional; + } } -} -@include b(igx-toggle) { - @include m(hidden) { - @extend %igx-toggle--hidden !optional; + @include b(igx-toggle) { + @include m(hidden) { + @extend %igx-toggle--hidden !optional; + } } } diff --git a/projects/igniteui-angular/src/lib/core/styles/components/overlay/_overlay-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/overlay/_overlay-theme.scss index 679da7d24e4..bbafc143c1c 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/overlay/_overlay-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/overlay/_overlay-theme.scss @@ -1,3 +1,7 @@ +@use '../../base' as *; +@use '../../themes/schemas' as *; +@use 'sass:map'; + //// /// @group themes /// @access public @@ -29,8 +33,8 @@ $selector: '.igx-overlay__wrapper--modal, .igx-overlay__content--modal'; $overlay-schema: (); - @if map-has-key($schema, $name) { - $overlay-schema: map-get($schema, $name); + @if map.has-key($schema, $name) { + $overlay-schema: map.get($schema, $name); } @else { $overlay-schema: $schema; } @@ -48,7 +52,7 @@ /// /// @param {Map} $theme - The theme used to style the component. /// @requires {mixin} igx-css-vars -/// @requires --var +/// @requires var-get /// @mixin igx-overlay($theme) { @include igx-css-vars($theme); @@ -73,7 +77,7 @@ } %overlay-wrapper--modal { - background: --var($theme, 'background-color'); + background: var-get($theme, 'background-color'); pointer-events: initial; } diff --git a/projects/igniteui-angular/src/lib/core/styles/components/paginator/_paginator-component.scss b/projects/igniteui-angular/src/lib/core/styles/components/paginator/_paginator-component.scss index 0b4600aad1e..bae3d6b1e94 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/paginator/_paginator-component.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/paginator/_paginator-component.scss @@ -1,45 +1,57 @@ +@use '../../base' as *; +@use 'sass:string'; + //// /// @group components /// @author Simeon Simeonoff //// -@include b(igx-paginator) { - $this: bem--selector-to-string(&); - @include register-component(str-slice($this, 2, -1)); - - @extend %igx-paginator !optional; +@mixin component { + @include b(igx-paginator) { + $this: bem--selector-to-string(&); + @include register-component( + $name: string.slice($this, 2, -1), + $deps: ( + igx-button, + igx-icon, + igx-input-group, + ) + ); - @include m(cosy) { @extend %igx-paginator !optional; - @extend %igx-paginator--cosy !optional; - } - @include m(compact) { - @extend %igx-paginator !optional; - @extend %igx-paginator--compact !optional; + @include m(cosy) { + @extend %igx-paginator !optional; + @extend %igx-paginator--cosy !optional; + } + + @include m(compact) { + @extend %igx-paginator !optional; + @extend %igx-paginator--compact !optional; + } } -} -@include b(igx-page-nav) { - @extend %igx-page-nav !optional; + @include b(igx-page-nav) { + @extend %igx-page-nav !optional; - @include e(text) { - @extend %igx-page-nav__text !optional; + @include e(text) { + @extend %igx-page-nav__text !optional; + } } -} -@include b(igx-page-size) { - @extend %igx-page-size !optional; + @include b(igx-page-size) { + @extend %igx-page-size !optional; - @include e(label) { - @extend %igx-page-size__label !optional; - } + @include e(label) { + @extend %igx-page-size__label !optional; + } - @include e(select) { - @extend %igx-page-size__select !optional; + @include e(select) { + @extend %igx-page-size__select !optional; + } } -} -@include b(igx-paginator-content) { - @extend %igx-paginator-content !optional; + @include b(igx-paginator-content) { + @extend %igx-paginator-content !optional; + } } diff --git a/projects/igniteui-angular/src/lib/core/styles/components/paginator/_paginator-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/paginator/_paginator-theme.scss index da1ea7a8a65..6e3c03af299 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/paginator/_paginator-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/paginator/_paginator-theme.scss @@ -1,3 +1,7 @@ +@use '../../base' as *; +@use '../../themes/schemas' as *; +@use 'sass:map'; + //// /// @group themes /// @access public @@ -34,8 +38,8 @@ $name: 'igx-paginator'; $grid-paginator-schema: (); - @if map-has-key($schema, $name) { - $grid-paginator-schema: map-get($schema, $name); + @if map.has-key($schema, $name) { + $grid-paginator-schema: map.get($schema, $name); } @else { $grid-paginator-schema: $schema; } @@ -59,7 +63,7 @@ /// @param {Map} $theme - The theme used to style the component. /// @requires {mixin} igx-css-vars /// @requires rem -/// @requires --var +/// @requires var-get @mixin igx-paginator($theme) { @include igx-css-vars($theme); @@ -82,14 +86,14 @@ display: flex; justify-content: space-between; align-items: center; - color: --var($theme, 'text-color'); - background: --var($theme, 'background-color'); + color: var-get($theme, 'text-color'); + background: var-get($theme, 'background-color'); grid-row: 7; font-size: 12px; - border-top: 1px solid --var($theme, 'border-color'); + border-top: 1px solid var-get($theme, 'border-color'); z-index: 1; - padding: map-get($paginator-padding, 'comfortable'); - height: map-get($paginator-height, 'comfortable'); + padding: map.get($paginator-padding, 'comfortable'); + height: map.get($paginator-height, 'comfortable'); width: 100%; &:empty { @@ -98,13 +102,13 @@ } %igx-paginator--cosy { - padding: map-get($paginator-padding, 'cosy'); - height: map-get($paginator-height, 'cosy'); + padding: map.get($paginator-padding, 'cosy'); + height: map.get($paginator-height, 'cosy'); } %igx-paginator--compact { - padding: map-get($paginator-padding, 'compact'); - height: map-get($paginator-height, 'compact'); + padding: map.get($paginator-padding, 'compact'); + height: map.get($paginator-height, 'compact'); } %igx-paginator-content { diff --git a/projects/igniteui-angular/src/lib/core/styles/components/progress/_progress-component.scss b/projects/igniteui-angular/src/lib/core/styles/components/progress/_progress-component.scss index b01c9ac60b4..8f945461337 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/progress/_progress-component.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/progress/_progress-component.scss @@ -1,3 +1,6 @@ +@use '../../base' as *; +@use 'sass:string'; + //// /// @group components /// @author Simeon Simeonoff @@ -6,130 +9,138 @@ /// @requires {mixin} bem-mod //// -/// Linear Progress -@include b(igx-linear-bar) { - $this: bem--selector-to-string(&); - @include register-component(str-slice($this, 2, -1)); - - @extend %linear-display !optional; - - @include e(base) { - @extend %linear-bar !optional; - } - - @include e(indicator) { - @extend %linear-indicator !optional; - @extend %linear-indicator--default !optional; - } - - @include e(value) { - @extend %linear-value !optional; - @extend %linear-value--start !optional; - } +@mixin component { + /// Linear Progress + @include b(igx-linear-bar) { + $this: bem--selector-to-string(&); + @include register-component( + $name: string.slice($this, 2, -1), + $deps: () + ); - @include e(value, $m: start) { - @extend %linear-value !optional; - @extend %linear-value--start !optional; - } - - @include e(value, $m: center) { - @extend %linear-value !optional; - @extend %linear-value--center !optional; - } - - @include e(value, $m: end) { - @extend %linear-value !optional; - @extend %linear-value--end !optional; - } - - @include e(value, $m: top) { - @extend %linear-value !optional; - @extend %linear-value--top !optional; - } + @extend %linear-display !optional; - @include e(value, $m: hidden) { - @extend %linear-value !optional; - @extend %linear-value--hidden !optional; - } + @include e(base) { + @extend %linear-bar !optional; + } - @include m(danger) { @include e(indicator) { - @extend %linear-indicator--danger !optional; + @extend %linear-indicator !optional; + @extend %linear-indicator--default !optional; } - } - @include m(warning) { - @include e(indicator) { - @extend %linear-indicator--warning !optional; + @include e(value) { + @extend %linear-value !optional; + @extend %linear-value--start !optional; } - } - @include m(info) { - @include e(indicator) { - @extend %linear-indicator--info !optional; + @include e(value, $m: start) { + @extend %linear-value !optional; + @extend %linear-value--start !optional; } - } - @include m(success) { - @include e(indicator) { - @extend %linear-indicator--success !optional; + @include e(value, $m: center) { + @extend %linear-value !optional; + @extend %linear-value--center !optional; } - } - @include m(striped) { - @include e(indicator) { - @extend %linear-indicator--striped !optional; + @include e(value, $m: end) { + @extend %linear-value !optional; + @extend %linear-value--end !optional; } - } - @include m(indeterminate) { - @include e(indicator) { - @extend %linear-indicator--indeterminate !optional; + @include e(value, $m: top) { + @extend %linear-value !optional; + @extend %linear-value--top !optional; } - @include e(value) { + @include e(value, $m: hidden) { @extend %linear-value !optional; @extend %linear-value--hidden !optional; } - } -} -/// Circular Progress -@include b(igx-circular-bar) { - $this: bem--selector-to-string(&); - @include register-component(str-slice($this, 2, -1)); + @include m(danger) { + @include e(indicator) { + @extend %linear-indicator--danger !optional; + } + } - @extend %circular-display !optional; + @include m(warning) { + @include e(indicator) { + @extend %linear-indicator--warning !optional; + } + } - @include e(inner) { - @extend %circular-inner !optional; - } + @include m(info) { + @include e(indicator) { + @extend %linear-indicator--info !optional; + } + } - @include e(outer) { - @extend %circular-outer !optional; - } + @include m(success) { + @include e(indicator) { + @extend %linear-indicator--success !optional; + } + } - @include e(text) { - @extend %circular-text !optional; - } + @include m(striped) { + @include e(indicator) { + @extend %linear-indicator--striped !optional; + } + } - @include e(gradient-start) { - @extend %circular-gradient-start !optional; - } + @include m(indeterminate) { + @include e(indicator) { + @extend %linear-indicator--indeterminate !optional; + } - @include e(gradient-end) { - @extend %circular-gradient-end !optional; + @include e(value) { + @extend %linear-value !optional; + @extend %linear-value--hidden !optional; + } + } } - @include m(indeterminate) { - @extend %circular-display--indeterminate !optional; + /// Circular Progress + @include b(igx-circular-bar) { + $this: bem--selector-to-string(&); + @include register-component( + $name: string.slice($this, 2, -1), + $deps: () + ); + + @extend %circular-display !optional; + + @include e(inner) { + @extend %circular-inner !optional; + } @include e(outer) { - @extend %circular-outer--indeterminate !optional; + @extend %circular-outer !optional; } @include e(text) { - @extend %circular-text--hidden !optional; + @extend %circular-text !optional; + } + + @include e(gradient-start) { + @extend %circular-gradient-start !optional; + } + + @include e(gradient-end) { + @extend %circular-gradient-end !optional; + } + + @include m(indeterminate) { + @extend %circular-display--indeterminate !optional; + + @include e(outer) { + @extend %circular-outer--indeterminate !optional; + } + + @include e(text) { + @extend %circular-text--hidden !optional; + } } } } diff --git a/projects/igniteui-angular/src/lib/core/styles/components/progress/_progress-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/progress/_progress-theme.scss index 860c884d2ea..9594f835dac 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/progress/_progress-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/progress/_progress-theme.scss @@ -1,3 +1,9 @@ +@use '../../base' as *; +@use '../../themes/schemas' as *; +@use 'sass:map'; +@use 'sass:meta'; +@use 'sass:list'; + //// /// @group themes /// @access public @@ -47,8 +53,8 @@ $name: 'igx-linear-bar'; $linear-bar-schema: (); - @if map-has-key($schema, $name) { - $linear-bar-schema: map-get($schema, $name); + @if map.has-key($schema, $name) { + $linear-bar-schema: map.get($schema, $name); } @else { $linear-bar-schema: $schema; } @@ -56,7 +62,7 @@ $theme: apply-palette($linear-bar-schema, $palette); $track-border-radius: round-borders( - if($track-border-radius, $track-border-radius, map-get($linear-bar-schema, 'track-border-radius')), 0, 8px + if($track-border-radius, $track-border-radius, map.get($linear-bar-schema, 'track-border-radius')), 0, 8px ); @return extend($theme, ( @@ -77,34 +83,34 @@ /// @param {Map} $theme - The theme used to style the component. /// @requires {mixin} igx-css-vars /// @requires em -/// @requires --var +/// @requires var-get @mixin igx-progress-linear($theme) { @include igx-css-vars($theme); - $variant: map-get($theme, variant); + $variant: map.get($theme, variant); - $bar-height: map-get(( + $bar-height: map.get(( material: rem(4px), fluent: rem(4px), bootstrap: rem(16px), indigo-design: rem(4px), ), $variant); - $gradient-orientation: map-get(( + $gradient-orientation: map.get(( material: -45deg, fluent: -45deg, bootstrap: 45deg, indigo-design: 45deg, ), $variant); - $background-size: map-get(( + $background-size: map.get(( material: rem(40px) rem(40px), fluent: rem(40px) rem(40px), bootstrap: rem(16px) rem(16px), indigo-design: rem(20px), ), $variant); - $stripe-color: --var($theme, 'stripes-color'); + $stripe-color: var-get($theme, 'stripes-color'); $value-fs: em(14px, 16px); $value-fw: 600; $value-margin: 0; @@ -122,9 +128,9 @@ position: relative; width: inherit; height: $bar-height; - background: --var($theme, 'track-color'); + background: var-get($theme, 'track-color'); overflow: hidden; - border-radius: --var($theme, 'track-border-radius'); + border-radius: var-get($theme, 'track-border-radius'); z-index: 0; } @@ -177,29 +183,29 @@ } %linear-indicator--default { - background: --var($theme, 'fill-color-default') + background: var-get($theme, 'fill-color-default') } %linear-indicator--danger { - background-color: --var($theme, 'fill-color-danger'); + background-color: var-get($theme, 'fill-color-danger'); } %linear-indicator--warning { - background-color: --var($theme, 'fill-color-warning'); + background-color: var-get($theme, 'fill-color-warning'); } %linear-indicator--info { - background-color: --var($theme, 'fill-color-info'); + background-color: var-get($theme, 'fill-color-info'); } %linear-indicator--success { - background-color: --var($theme, 'fill-color-success'); + background-color: var-get($theme, 'fill-color-success'); } %linear-value { margin: $value-margin; - color: --var($theme, 'text-color'); + color: var-get($theme, 'text-color'); font-size: $value-fs; font-weight: $value-fw; } @@ -261,7 +267,7 @@ /// // Pass the theme to the igx-progress-circular component mixin /// @include igx-progress-circular($my-progress-circle-theme); @function igx-progress-circular-theme( - $palette: $default-palette, + $palette: null, $schema: $light-schema, $base-circle-color: null, @@ -273,25 +279,25 @@ $circular-bar-schema: (); - @if map-has-key($schema, $name) { - $circular-bar-schema: map-get($schema, $name); + @if map.has-key($schema, $name) { + $circular-bar-schema: map.get($schema, $name); } @else { $circular-bar-schema: $schema; } $theme: apply-palette($circular-bar-schema, $palette); - $progress-circle-color-start: map-get($theme, 'progress-circle-color'); - $progress-circle-color-end: map-get($theme, 'progress-circle-color'); + $progress-circle-color-start: map.get($theme, 'progress-circle-color'); + $progress-circle-color-end: map.get($theme, 'progress-circle-color'); - @if type-of($progress-circle-color) == 'color' { + @if meta.type-of($progress-circle-color) == 'color' { $progress-circle-color-start: $progress-circle-color; $progress-circle-color-end: $progress-circle-color; } - @if length($progress-circle-color) == 2 { - $progress-circle-color-start: nth($progress-circle-color, 1); - $progress-circle-color-end: nth($progress-circle-color, 2); + @if list.length($progress-circle-color) == 2 { + $progress-circle-color-start: list.nth($progress-circle-color, 1); + $progress-circle-color-end: list.nth($progress-circle-color, 2); } @return extend($theme, ( @@ -308,23 +314,23 @@ /// @requires {mixin} igx-css-vars /// @requires rem /// @requires {mixin} rotate-center -/// @requires --var +/// @requires var-get @mixin igx-progress-circular($theme) { // Include rotate animation @include rotate-center(); @include igx-css-vars($theme); - $variant: map-get($theme, variant); + $variant: map.get($theme, variant); - $stroke-width: map-get(( + $stroke-width: map.get(( material: rem(4px), fluent: rem(4px), bootstrap: rem(8px), indigo-design: rem(6px), ), $variant); - $palette: map-get($theme, 'palette'); + $palette: map.get($theme, 'palette'); $circular-value-fs: rem(32px, 16px); $circular-value-fw: 600; $animation-direction: if-ltr(normal, reverse); @@ -351,7 +357,7 @@ %circular-inner { stroke-width: $stroke-width; fill: transparent; - stroke: --var($theme, 'base-circle-color'); + stroke: var-get($theme, 'base-circle-color'); } %circular-outer { @@ -375,7 +381,7 @@ %circular-text { font-size: $circular-value-fs; font-weight: $circular-value-fw; - fill: --var($theme, 'text-color'); + fill: var-get($theme, 'text-color'); } %circular-text--hidden { @@ -383,11 +389,11 @@ } %circular-gradient-start { - stop-color: --var($theme, 'progress-circle-color-start'); + stop-color: var-get($theme, 'progress-circle-color-start'); } %circular-gradient-end { - stop-color: --var($theme, 'progress-circle-color-end'); + stop-color: var-get($theme, 'progress-circle-color-end'); } @include keyframes('indeterminate-accordion') { diff --git a/projects/igniteui-angular/src/lib/core/styles/components/radio/_radio-component.scss b/projects/igniteui-angular/src/lib/core/styles/components/radio/_radio-component.scss index 38290fcbab5..64c8589b980 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/radio/_radio-component.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/radio/_radio-component.scss @@ -1,3 +1,6 @@ +@use '../../base' as *; +@use 'sass:string'; + //// /// @group components /// @author Simeon Simeonoff @@ -5,125 +8,131 @@ /// @requires {mixin} bem-elem /// @requires {mixin} bem-mod //// -@include b(igx-radio) { - $block: bem--selector-to-string(&); - @include register-component(igx-radio); - @extend %radio-display !optional; +@mixin component { + @include b(igx-radio) { + $this: bem--selector-to-string(&); + @include register-component( + $name: string.slice($this, 2, -1), + $deps: () + ); - &:hover { - @include e(composite) { - @extend %igx-radio-hover__composite !optional; - } + @extend %radio-display !optional; - @include e(ripple) { - @extend %radio-ripple--hover !optional; - @extend %radio-ripple--hover-unchecked !optional; - } - } - - &:active { - @include e(composite) { - @extend %igx-radio-hover__composite !optional; - } + &:hover { + @include e(composite) { + @extend %igx-radio-hover__composite !optional; + } - @include e(ripple) { - @extend %radio-ripple--hover !optional; - @extend %radio-ripple--hover-unchecked !optional; - @extend %radio-ripple--pressed !optional; + @include e(ripple) { + @extend %radio-ripple--hover !optional; + @extend %radio-ripple--hover-unchecked !optional; + } } - } - @include e(input) { - @extend %radio-input !optional; - } + &:active { + @include e(composite) { + @extend %igx-radio-hover__composite !optional; + } - @include e(composite) { - @extend %radio-composite !optional; - } + @include e(ripple) { + @extend %radio-ripple--hover !optional; + @extend %radio-ripple--hover-unchecked !optional; + @extend %radio-ripple--pressed !optional; + } + } - @include e(label) { - @extend %radio-label !optional; - @extend %radio-label--after !optional; - } + @include e(input) { + @extend %radio-input !optional; + } - @include e(label, $m: before) { - @extend %radio-label !optional; - @extend %radio-label--before !optional; - } + @include e(composite) { + @extend %radio-composite !optional; + } - @include e(ripple) { - @extend %radio-ripple !optional; - } + @include e(label) { + @extend %radio-label !optional; + @extend %radio-label--after !optional; + } - @include m(focused) { - @extend %igx-radio--focused !optional; + @include e(label, $m: before) { + @extend %radio-label !optional; + @extend %radio-label--before !optional; + } @include e(ripple) { - @extend %radio-ripple--focused !optional; + @extend %radio-ripple !optional; } - } - @include mx(focused, checked) { - @extend %igx-radio--focused-checked !optional; - } + @include m(focused) { + @extend %igx-radio--focused !optional; - @include m(checked) { - @include e(composite) { - @extend %radio-composite--x !optional; + @include e(ripple) { + @extend %radio-ripple--focused !optional; + } } - &:hover { + @include mx(focused, checked) { + @extend %igx-radio--focused-checked !optional; + } + + @include m(checked) { @include e(composite) { - @extend %igx-radio--checked-active__composite !optional; + @extend %radio-composite--x !optional; } - @include e(ripple) { - @extend %radio-ripple--hover !optional; - @extend %radio-ripple--hover-checked !optional; - } - } + &:hover { + @include e(composite) { + @extend %igx-radio--checked-active__composite !optional; + } - &:active { - @include e(composite) { - @extend %igx-radio--checked-active__composite !optional; + @include e(ripple) { + @extend %radio-ripple--hover !optional; + @extend %radio-ripple--hover-checked !optional; + } } - @include e(ripple) { - @extend %radio-ripple--hover !optional; - @extend %radio-ripple--hover-checked !optional; - @extend %radio-ripple--pressed !optional; + &:active { + @include e(composite) { + @extend %igx-radio--checked-active__composite !optional; + } + + @include e(ripple) { + @extend %radio-ripple--hover !optional; + @extend %radio-ripple--hover-checked !optional; + @extend %radio-ripple--pressed !optional; + } } } - } - @include m(disabled) { - @extend %radio-display--disabled !optional; + @include m(disabled) { + @extend %radio-display--disabled !optional; - @include e(composite) { - @extend %radio-composite--disabled !optional; + @include e(composite) { + @extend %radio-composite--disabled !optional; + } } - } - @include mx(focused, checked) { - @include e(ripple) { - @extend %radio-ripple--focused !optional; - @extend %radio-ripple--focused-checked !optional; + @include mx(focused, checked) { + @include e(ripple) { + @extend %radio-ripple--focused !optional; + @extend %radio-ripple--focused-checked !optional; + } } - } - @include mx(checked, disabled) { - @include e(composite) { - @extend %radio-composite--x--disabled !optional; + @include mx(checked, disabled) { + @include e(composite) { + @extend %radio-composite--x--disabled !optional; + } } } -} -@include b(igx-radio-group) { - display: block; + @include b(igx-radio-group) { + display: block; - @include m(vertical) { - display: flex; - flex-flow: column; + @include m(vertical) { + display: flex; + flex-flow: column; + } } } diff --git a/projects/igniteui-angular/src/lib/core/styles/components/radio/_radio-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/radio/_radio-theme.scss index d42b1bd44a3..9608e2aedd9 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/radio/_radio-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/radio/_radio-theme.scss @@ -1,6 +1,10 @@ +@use '../../base' as *; +@use '../../typography/base' as *; +@use '../../themes/schemas' as *; +@use '../ripple/ripple-theme' as *; +@use '../ripple/ripple-component' as *; +@use 'sass:map'; @use 'sass:math'; -@import '../ripple/ripple-theme'; -@import '../ripple/ripple-component'; //// /// @group themes @@ -47,8 +51,8 @@ $name: 'igx-radio'; $radio-schema: (); - @if map-has-key($schema, $name) { - $radio-schema: map-get($schema, $name); + @if map.has-key($schema, $name) { + $radio-schema: map.get($schema, $name); } @else { $radio-schema: $schema; } @@ -77,25 +81,25 @@ /// @requires {mixin} hide-default /// @requires igx-ripple-theme /// @requires em -/// @requires --var +/// @requires var-get @mixin igx-radio($theme) { @include igx-css-vars($theme); @include scale-in-out($start-scale: .9); $label-margin: em(8px); - $variant: map-get($theme, variant); + $variant: map.get($theme, variant); $bootstrap-theme: $variant == 'bootstrap'; $not-bootstrap-theme: $variant != 'bootstrap'; - $size: map-get(( + $size: map.get(( material: em(20px), fluent: em(20px), bootstrap: em(14px), indigo-design: em(20px), ), $variant); - $scale: map-get(( + $scale: map.get(( material: scale(.5), fluent: scale(.5), bootstrap: scale(.3), @@ -105,19 +109,19 @@ $left: if-ltr(left, right); $right: if-ltr(right, left); - $border-width: map-get(( + $border-width: map.get(( material: rem(2px), fluent: rem(1px), bootstrap: rem(1px), indigo-design: rem(2px), ), $variant); - $radio-hover-scale: map-get(( + $radio-hover-scale: map.get(( material: null, fluent: scale(.5), ), $variant); - $ripple-display: map-get(( + $ripple-display: map.get(( material: block, fluent: none, indigo-design: none, @@ -129,10 +133,11 @@ $transition: all .2s ease-in; $ripple-size: em(48px); - $ripple-radius: private-div($ripple-size, 2); + $ripple-radius: math.div($ripple-size, 2); $ripple-theme: igx-ripple-theme( - $color: --var($theme, 'fill-color') + $schema: $light-schema, + $color: var-get($theme, 'fill-color') ); %radio-display { @@ -140,7 +145,7 @@ display: inline-flex; flex-flow: row nowrap; align-items: center; - color: --var($theme, 'label-color'); + color: var-get($theme, 'label-color'); } %radio-input { @@ -149,7 +154,7 @@ %radio-display--disabled { pointer-events: none; - color: --var($theme, 'disabled-color'); + color: var-get($theme, 'disabled-color'); user-select: none; } @@ -161,7 +166,7 @@ min-width: $size; line-height: $size; cursor: pointer; - color: --var($theme, 'label-color'); + color: var-get($theme, 'label-color'); user-select: none; @@ -188,56 +193,56 @@ } &::after { - border: $border-width $border-style --var($theme, 'empty-color'); + border: $border-width $border-style var-get($theme, 'empty-color'); } } %radio-composite--x { &::before { - border: $border-width $border-style --var($theme, 'fill-color'); + border: $border-width $border-style var-get($theme, 'fill-color'); @if $bootstrap-theme { - border-color: --var($theme, 'fill-hover-border-color'); + border-color: var-get($theme, 'fill-hover-border-color'); } - background: --var($theme, 'fill-color-hover'); + background: var-get($theme, 'fill-color-hover'); transform: $scale; } &::after { - border: $border-width $border-style --var($theme, 'fill-color'); + border: $border-width $border-style var-get($theme, 'fill-color'); @if $bootstrap-theme{ - background: --var($theme, 'fill-color'); + background: var-get($theme, 'fill-color'); } } } %igx-radio-hover__composite { &::before { - background: --var($theme, 'fill-color-hover'); + background: var-get($theme, 'fill-color-hover'); transform: $radio-hover-scale; } } %igx-radio--checked-active__composite { &::before { - background: --var($theme, 'fill-color-hover'); - border-color: --var($theme, 'fill-hover-border-color'); + background: var-get($theme, 'fill-color-hover'); + border-color: var-get($theme, 'fill-hover-border-color'); } &::after { @if $bootstrap-theme { - border-color: --var($theme, 'fill-color'); + border-color: var-get($theme, 'fill-color'); } @else { - border-color: --var($theme, 'fill-hover-border-color'); + border-color: var-get($theme, 'fill-hover-border-color'); } } } %radio-composite--disabled { &::after { - border: $border-width $border-style --var($theme, 'disabled-color'); + border: $border-width $border-style var-get($theme, 'disabled-color'); @if $bootstrap-theme { background: transparent; @@ -247,11 +252,11 @@ %radio-composite--x--disabled { &::after { - border: $border-width $border-style --var($theme, 'disabled-color'); + border: $border-width $border-style var-get($theme, 'disabled-color'); } &::before { - background: --var($theme, 'disabled-color'); + background: var-get($theme, 'disabled-color'); border: $border-width $border-style transparent; } } @@ -313,7 +318,7 @@ position: absolute; top: -$focus-outline-offset-top; left: -$focus-outline-offset-left; - box-shadow: 0 0 0 1px --var($theme, 'focus-outline-color'); + box-shadow: 0 0 0 1px var-get($theme, 'focus-outline-color'); width: calc(100% + (#{$focus-outline-offset-left} * 2)); height: calc(100% + (#{$focus-outline-offset-top} * 2)); } @@ -322,14 +327,14 @@ @if $variant == 'bootstrap' { %radio-composite { border-radius: $border-radius; - box-shadow: 0 0 0 2px --var($theme, 'focus-outline-color'); + box-shadow: 0 0 0 2px var-get($theme, 'focus-outline-color'); } } @if $variant == 'indigo-design' { %radio-composite { border-radius: $border-radius; - box-shadow: 0 0 0 3px --var($theme, 'focus-outline-color'); + box-shadow: 0 0 0 3px var-get($theme, 'focus-outline-color'); } } } @@ -337,19 +342,19 @@ %igx-radio--focused-checked { @if $variant == 'indigo-design' { %radio-composite { - box-shadow: 0 0 0 3px --var($theme, 'focus-outline-color-focused'); + box-shadow: 0 0 0 3px var-get($theme, 'focus-outline-color-focused'); } } } %radio-ripple--focused { - background: --var($theme, 'empty-color'); + background: var-get($theme, 'empty-color'); transition: background .2s $ease-out-quad; opacity: .12; } %radio-ripple--focused-checked { - background: --var($theme, 'fill-color'); + background: var-get($theme, 'fill-color'); } %radio-ripple--hover { @@ -366,13 +371,13 @@ %radio-ripple--hover-unchecked { &::after { - background: --var($theme, 'empty-color'); + background: var-get($theme, 'empty-color'); } } %radio-ripple--hover-checked { &::after { - background: --var($theme, 'fill-color'); + background: var-get($theme, 'fill-color'); } } @@ -393,7 +398,7 @@ $type-scale, $categories: (label: 'subtitle-1') ) { - $label: map-get($categories, 'label'); + $label: map.get($categories, 'label'); %radio-label { @include igx-type-style($type-scale, $label) { diff --git a/projects/igniteui-angular/src/lib/core/styles/components/ripple/_ripple-component.scss b/projects/igniteui-angular/src/lib/core/styles/components/ripple/_ripple-component.scss index b67dbf7961b..39ed6bc3bf5 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/ripple/_ripple-component.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/ripple/_ripple-component.scss @@ -1,3 +1,6 @@ +@use '../../base' as *; +@use 'sass:string'; + //// Ripple /// @group components /// @author Simeon Simeonoff @@ -5,13 +8,19 @@ /// @requires {mixin} bem-elem /// @requires {mixin} bem-mod //// -@include b(igx-ripple) { - $this: bem--selector-to-string(&); - @include register-component(str-slice($this, 2, -1)); - @extend %igx-ripple-wrapper !optional; +@mixin component { + @include b(igx-ripple) { + $this: bem--selector-to-string(&); + @include register-component( + $name: string.slice($this, 2, -1), + $deps: () + ); + + @extend %igx-ripple-wrapper !optional; - @include e(inner) { - @extend %igx-ripple-display !optional; + @include e(inner) { + @extend %igx-ripple-display !optional; + } } } diff --git a/projects/igniteui-angular/src/lib/core/styles/components/ripple/_ripple-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/ripple/_ripple-theme.scss index f1cea3c294d..50454c1bb84 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/ripple/_ripple-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/ripple/_ripple-theme.scss @@ -1,3 +1,7 @@ +@use '../../base' as *; +@use '../../themes/schemas' as *; +@use 'sass:map'; + //// /// @group themes /// @access public @@ -29,8 +33,8 @@ $ripple-schema: (); - @if map-has-key($schema, $name) { - $ripple-schema: map-get($schema, $name); + @if map.has-key($schema, $name) { + $ripple-schema: map.get($schema, $name); } @else { $ripple-schema: $schema; } @@ -46,17 +50,16 @@ } /// @param {Map} $theme - The theme used to style the component. -/// @param {Map} $palette [$default-palette] - The palette used to style the component. /// @requires {mixin} igx-css-vars -/// @requires --var -@mixin igx-ripple($theme, $palette: $default-palette) { +/// @requires var-get +@mixin igx-ripple($theme) { @include igx-css-vars($theme); %igx-ripple-display { display: block; position: absolute; border-radius: 50%; - background: --var($theme, 'color'); + background: var-get($theme, 'color'); pointer-events: none; transform-origin: center; transform: translate3d(0, 0, 0) scale(0); diff --git a/projects/igniteui-angular/src/lib/core/styles/components/scrollbar/scrollbar-component.scss b/projects/igniteui-angular/src/lib/core/styles/components/scrollbar/scrollbar-component.scss index 55d602eab78..7012c5c7454 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/scrollbar/scrollbar-component.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/scrollbar/scrollbar-component.scss @@ -1,3 +1,6 @@ +@use '../../base' as *; +@use 'sass:string'; + //// /// @group components /// @author Simeon Simeonoff @@ -5,11 +8,16 @@ /// @requires {mixin} bem-elem /// @requires {mixin} bem-mod //// -@include b(igx-scrollbar) { - // Register the component in the component registry - $this: bem--selector-to-string(&); - @include register-component(str-slice($this, 2, -1)); - @extend %scrollbar-display !optional; -} +@mixin component { + @include b(igx-scrollbar) { + // Register the component in the component registry + $this: bem--selector-to-string(&); + @include register-component( + $name: string.slice($this, 2, -1), + $deps: () + ); + @extend %scrollbar-display !optional; + } +} diff --git a/projects/igniteui-angular/src/lib/core/styles/components/scrollbar/scrollbar-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/scrollbar/scrollbar-theme.scss index b7aeb3bbf1b..6a178169ea5 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/scrollbar/scrollbar-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/scrollbar/scrollbar-theme.scss @@ -1,3 +1,7 @@ +@use '../../base' as *; +@use '../../themes/schemas' as *; +@use 'sass:map'; + //// /// @group themes /// @access public @@ -31,8 +35,8 @@ $selector: '.igx-scrollbar'; $scrollbar-schema: (); - @if map-has-key($schema, $name) { - $scrollbar-schema: map-get($schema, $name); + @if map.has-key($schema, $name) { + $scrollbar-schema: map.get($schema, $name); } @else { $scrollbar-schema: $schema; } @@ -52,25 +56,25 @@ /// @param {Map} $theme - The theme used to style the component. /// @requires {mixin} igx-css-vars /// @requires rem -/// @requires --var +/// @requires var-get @mixin igx-scrollbar($theme) { @include igx-css-vars($theme); %scrollbar-display { - @if type-of(map-get($theme, 'size') == 'string') { - scrollbar-width: --var($theme, 'size'); + @if type-of(map.get($theme, 'size') == 'string') { + scrollbar-width: var-get($theme, 'size'); } - scrollbar-color: --var($theme, 'thumb-background') --var($theme, 'track-background'); + scrollbar-color: var-get($theme, 'thumb-background') var-get($theme, 'track-background'); ::-webkit-scrollbar { - width: --var($theme, 'size'); - height: --var($theme, 'size'); - background: --var($theme, 'track-background'); + width: var-get($theme, 'size'); + height: var-get($theme, 'size'); + background: var-get($theme, 'track-background'); } ::-webkit-scrollbar-thumb { - background: --var($theme, 'thumb-background'); + background: var-get($theme, 'thumb-background'); } } diff --git a/projects/igniteui-angular/src/lib/core/styles/components/slider/_slider-component.scss b/projects/igniteui-angular/src/lib/core/styles/components/slider/_slider-component.scss index 452dc78399f..d68cd7566ae 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/slider/_slider-component.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/slider/_slider-component.scss @@ -1,3 +1,6 @@ +@use '../../base' as *; +@use 'sass:string'; + //// /// @group components /// @author Simeon Simeonoff @@ -8,144 +11,149 @@ $_igx-slider-thumbs: 'from' 'to'; -/// Slider -@include b(igx-slider) { - $this: bem--selector-to-string(&); - @include register-component(str-slice($this, 2, -1)); +@mixin component { + /// Slider + @include b(igx-slider) { + $this: bem--selector-to-string(&); + @include register-component( + $name: string.slice($this, 2, -1), + $deps: () + ); - @extend %igx-slider-display !optional; + @extend %igx-slider-display !optional; - @include e(track) { - @extend %igx-slider-track !optional; - } + @include e(track) { + @extend %igx-slider-track !optional; + } - @include e(track-fill) { - @extend %igx-slider-track-fill !optional; - } + @include e(track-fill) { + @extend %igx-slider-track-fill !optional; + } - @include e(ticks) { - @extend %igx-slider__ticks !optional; - } + @include e(ticks) { + @extend %igx-slider__ticks !optional; + } - @include e(ticks, $m: tall) { - @extend %igx-slider__ticks--tall !optional; - } + @include e(ticks, $m: tall) { + @extend %igx-slider__ticks--tall !optional; + } - @include e(ticks, $m: top) { - @extend %igx-slider__ticks--top !optional; - } + @include e(ticks, $m: top) { + @extend %igx-slider__ticks--top !optional; + } - @include e(ticks-label) { - @extend %igx-slider__tick-label !optional; - } + @include e(ticks-label) { + @extend %igx-slider__tick-label !optional; + } - @include e(tick-label, $m: hidden) { - @extend %igx-slider__tick-label--hidden !optional; - } + @include e(tick-label, $m: hidden) { + @extend %igx-slider__tick-label--hidden !optional; + } - @include e(tick-labels, $m: top-bottom) { - @extend %igx-slider__tick-labels--top-bottom !optional; - } + @include e(tick-labels, $m: top-bottom) { + @extend %igx-slider__tick-labels--top-bottom !optional; + } - @include e(tick-labels, $m: bottom-top) { - @extend %igx-slider__tick-labels--bottom-top !optional; - } + @include e(tick-labels, $m: bottom-top) { + @extend %igx-slider__tick-labels--bottom-top !optional; + } - @include e(ticks-group) { - @extend %igx-slider__ticks-group !optional; - } + @include e(ticks-group) { + @extend %igx-slider__ticks-group !optional; + } - @include e(ticks-group, $m: tall) { - @extend %igx-slider__ticks-group--tall !optional; - } + @include e(ticks-group, $m: tall) { + @extend %igx-slider__ticks-group--tall !optional; + } - @include e(ticks-tick) { - @extend %igx-slider__ticks-tick !optional; - } + @include e(ticks-tick) { + @extend %igx-slider__ticks-tick !optional; + } - @include e(ticks-label) { - @extend %igx-slider__ticks-label !optional; - } + @include e(ticks-label) { + @extend %igx-slider__ticks-label !optional; + } - @include e(thumbs) { - @extend %igx-slider-thumbs-container !optional; - } + @include e(thumbs) { + @extend %igx-slider-thumbs-container !optional; + } - @include e(track-steps) { - @extend %igx-slider-track-steps !optional; - } + @include e(track-steps) { + @extend %igx-slider-track-steps !optional; + } - @include m(disabled) { - @extend %igx-slider-disabled !optional; + @include m(disabled) { + @extend %igx-slider-disabled !optional; - @include e(track) { - @extend %igx-slider-track--disabled !optional; - } + @include e(track) { + @extend %igx-slider-track--disabled !optional; + } - @include e(track-steps) { - @extend %igx-slider-track-steps--disabled !optional; - } + @include e(track-steps) { + @extend %igx-slider-track-steps--disabled !optional; + } - @include e(track-fill) { - @extend %igx-slider-track-fill--disabled !optional; - } + @include e(track-fill) { + @extend %igx-slider-track-fill--disabled !optional; + } - @include e(ticks-tick) { - @extend %igx-slider__tick--disabled !optional; - } + @include e(ticks-tick) { + @extend %igx-slider__tick--disabled !optional; + } - @include e(ticks-label) { - @extend %igx-slider__ticks-labels--disabled !optional; + @include e(ticks-label) { + @extend %igx-slider__ticks-labels--disabled !optional; + } } } -} -@each $t in $_igx-slider-thumbs { - @include b(igx-slider-thumb-#{$t}) { - @extend %igx-thumb-display !optional; + @each $t in $_igx-slider-thumbs { + @include b(igx-slider-thumb-#{$t}) { + @extend %igx-thumb-display !optional; - @include e(dot) { - @extend %igx-slider-thumb__dot !optional; - } + @include e(dot) { + @extend %igx-slider-thumb__dot !optional; + } - @include m(pressed) { - @include e(dot){ - @extend %igx-slider-thumb__dot--pressed !optional; + @include m(pressed) { + @include e(dot){ + @extend %igx-slider-thumb__dot--pressed !optional; + } } - } - @include m(active) { - @include e(dot){ - @extend %igx-slider-thumb__dot--active !optional; + @include m(active) { + @include e(dot){ + @extend %igx-slider-thumb__dot--active !optional; + } } - } - @include m(disabled) { - @extend %igx-thumb--disabled !optional; + @include m(disabled) { + @extend %igx-thumb--disabled !optional; - @include e(dot){ - @extend %igx-slider-thumb__dot--disabled !optional; + @include e(dot){ + @extend %igx-slider-thumb__dot--disabled !optional; + } } } - } - @include b(igx-slider-thumb-label-#{$t}) { - @extend %igx-label-display !optional; + @include b(igx-slider-thumb-label-#{$t}) { + @extend %igx-label-display !optional; - @include e(container) { - @extend %igx-slider-thumb-label__container !optional; - } + @include e(container) { + @extend %igx-slider-thumb-label__container !optional; + } - @include m(pressed) { - @include e(container){ - @extend %igx-slider-thumb-label__container--pressed !optional; + @include m(pressed) { + @include e(container){ + @extend %igx-slider-thumb-label__container--pressed !optional; + } } - } - @include m(active) { - @include e(container){ - @extend %igx-slider-thumb-label__container--active !optional; + @include m(active) { + @include e(container){ + @extend %igx-slider-thumb-label__container--active !optional; + } } } } diff --git a/projects/igniteui-angular/src/lib/core/styles/components/slider/_slider-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/slider/_slider-theme.scss index cbfa4f515bb..b1466d459b6 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/slider/_slider-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/slider/_slider-theme.scss @@ -1,3 +1,7 @@ +@use '../../base' as *; +@use '../../themes/schemas' as *; +@use '../../typography/base' as *; +@use 'sass:map'; @use 'sass:math'; //// @@ -65,8 +69,8 @@ $name: 'igx-slider'; $slider-schema: (); - @if map-has-key($schema, $name) { - $slider-schema: map-get($schema, $name); + @if map.has-key($schema, $name) { + $slider-schema: map.get($schema, $name); } @else { $slider-schema: $schema; } @@ -104,25 +108,25 @@ /// @param {Map} $theme - The theme used to style the component. /// @requires {mixin} igx-css-vars /// @requires rem -/// @requires --var +/// @requires var-get @mixin igx-slider($theme) { @include igx-css-vars($theme); - $variant: map-get($theme, variant); + $variant: map.get($theme, variant); $left: if-ltr(left, right); $right: if-ltr(right, left); $slider-height: 48px; - $slider-track-height: map-get(( + $slider-track-height: map.get(( material: 2px, fluent: 4px, bootstrap: 5px, indigo-design: 2px ), $variant); - $slider-outline-width: map-get(( + $slider-outline-width: map.get(( material: 3px, fluent: 0, bootstrap: 3px, @@ -136,7 +140,7 @@ $tick-height--tall: $base-tick-height * 2; $tick-width: rem(2px); - $thumb-border-width: map-get(( + $thumb-border-width: map.get(( material: 0, fluent: 2px, bootstrap: 1px, @@ -146,22 +150,22 @@ // Slider Thumb $slider-thumb-width: 40px; $slider-thumb-height: $slider-thumb-width; - $slider-thumb-radius: private-div($slider-thumb-width, 2); + $slider-thumb-radius: math.div($slider-thumb-width, 2); // Slider Label $slider-label-width: 36px; $slider-label-height: $slider-label-width; - $slider-label-radius: private-div($slider-label-width, 2); + $slider-label-radius: math.div($slider-label-width, 2); $slider-label-padding: 0 rem(2px); - $switch-display: map-get(( + $switch-display: map.get(( material: block, fluent: none, bootstrap: none, indigo-design: none, ), $variant); - $dot-size: map-get(( + $dot-size: map.get(( material: 12px, fluent: 16px, bootstrap: 14px, @@ -178,16 +182,16 @@ &:hover { %igx-slider-track-fill { - background: --var($theme, 'track-hover-color'); + background: var-get($theme, 'track-hover-color'); } %igx-slider-track { - background: --var($theme, 'base-track-hover-color'); + background: var-get($theme, 'base-track-hover-color'); } %igx-slider-thumb__dot { &::before { - border-color: --var($theme, 'track-hover-color'); + border-color: var-get($theme, 'track-hover-color'); } } } @@ -196,12 +200,12 @@ %igx-slider-disabled { &:hover { %igx-slider-track--disabled { - background: --var($theme, 'disabled-base-track-color'); + background: var-get($theme, 'disabled-base-track-color'); } %igx-slider-thumb__dot { &::before { - border-color: --var($theme, 'thumb-disabled-border-color'); + border-color: var-get($theme, 'thumb-disabled-border-color'); } } } @@ -220,19 +224,19 @@ position: relative; width: 100%; height: rem($slider-track-height); - background: --var($theme, 'base-track-color'); + background: var-get($theme, 'base-track-color'); transition: background .2s $ease-out-quad; } %igx-slider-track--disabled { - background: --var($theme, 'disabled-base-track-color'); + background: var-get($theme, 'disabled-base-track-color'); } %igx-slider-track-fill { position: absolute; width: 100%; height: inherit; - background: --var($theme, 'track-color'); + background: var-get($theme, 'track-color'); transform-origin: #{$left} center; transform: scaleX(0); } @@ -247,7 +251,7 @@ position: absolute; top: $tick-push; justify-content: space-between; - z-index: 1; + z-index: -1; &%igx-slider__ticks--top { bottom: $tick-push; @@ -272,7 +276,7 @@ } %igx-slider__ticks-label { - color: --var($theme, 'tick-label-color'); + color: var-get($theme, 'tick-label-color'); position: absolute; top: $tick-height--tall; transform: translate(-50%); @@ -286,7 +290,7 @@ } %igx-slider__ticks-tick { - background: --var($theme, 'tick-color'); + background: var-get($theme, 'tick-color'); height: $tick-height; width: $tick-width; } @@ -298,22 +302,22 @@ } %igx-slider__tick--disabled { - background: --var($theme, 'disabled-base-track-color')!important; + background: var-get($theme, 'disabled-base-track-color') !important; } %igx-slider__ticks-labels--disabled { - color: --var($theme, 'disabled-base-track-color')!important; + color: var-get($theme, 'disabled-base-track-color') !important; } %igx-slider__ticks-group--tall { %igx-slider__ticks-tick { height: $tick-height--tall; - background: --var($theme, 'tick-color-tall'); + background: var-get($theme, 'tick-color-tall'); } %igx-slider__ticks-label { top: calc(#{$tick-height--tall} + #{$tick-height}); - color: --var($theme, 'tick-label-color-tall'); + color: var-get($theme, 'tick-label-color-tall'); } } @@ -339,8 +343,10 @@ position: absolute; width: 100%; height: rem($slider-track-height); - background-size: 100% em($slider-track-height); - opacity: .85; + // TODO Remove after making sure that this does not break anything + //background-size: 100% em($slider-track-height); + //background-color: var-get($theme, 'track-step-color'); + //opacity: .85; transition: opacity .2s $ease-out-quad; z-index: 1; } @@ -423,10 +429,10 @@ } &:focus div::before { - box-shadow: 0 0 0 rem($slider-outline-width) --var($theme, 'thumb-focus-color'); + box-shadow: 0 0 0 rem($slider-outline-width) var-get($theme, 'thumb-focus-color'); @if $variant == 'fluent' { - border-color: --var($theme, 'thumb-focus-color') !important; + border-color: var-get($theme, 'thumb-focus-color') !important; } } } @@ -436,7 +442,7 @@ box-shadow: none; @if $variant == 'fluent' { - border-color: --var($theme, 'thumb-disabled-border-color') !important; + border-color: var-get($theme, 'thumb-disabled-border-color') !important; } } @@ -472,10 +478,10 @@ border-radius: rem($slider-label-radius); margin: 0 auto; line-height: rem(18px); - color: --var($theme, 'label-text-color'); - background: --var($theme, 'label-background-color'); + color: var-get($theme, 'label-text-color'); + background: var-get($theme, 'label-background-color'); opacity: 0; - border-color: --var($theme, 'label-background-color') transparent transparent; + border-color: var-get($theme, 'label-background-color') transparent transparent; // transition: opacity .1s $ease-out-quad; z-index: -1; @@ -522,10 +528,10 @@ content: ''; width: rem($dot-size); height: rem($dot-size); - #{$left}: #{rem($slider-thumb-radius) - private-div(rem($dot-size), 2)}; - top: #{rem($slider-thumb-radius) - private-div(rem($dot-size), 2)}; - background: --var($theme, 'thumb-color'); - border: rem($thumb-border-width) solid --var($theme, 'thumb-border-color'); + #{$left}: #{rem($slider-thumb-radius) - math.div(rem($dot-size), 2)}; + top: #{rem($slider-thumb-radius) - math.div(rem($dot-size), 2)}; + background: var-get($theme, 'thumb-color'); + border: rem($thumb-border-width) solid var-get($theme, 'thumb-border-color'); transform: rotate(45deg); transition: transform .1s $ease-out-quad, border-radius .1s $ease-out-quad; border-radius: rem($slider-thumb-radius); @@ -537,7 +543,7 @@ content: ''; width: rem($slider-thumb-width); height: rem($slider-thumb-height); - background: --var($theme, 'thumb-color'); + background: var-get($theme, 'thumb-color'); top: 0; #{$left}: 0; opacity: 0; @@ -552,8 +558,8 @@ pointer-events: none; &::before { - background: --var($theme, 'disabled-thumb-color'); - border-color: --var($theme, 'thumb-disabled-border-color'); + background: var-get($theme, 'disabled-thumb-color'); + border-color: var-get($theme, 'thumb-disabled-border-color'); border-radius: rem($slider-thumb-radius); } } @@ -595,8 +601,8 @@ thumb-label: 'caption', ) ) { - $ticks-label: map-get($categories, 'ticks-label'); - $thumb-label: map-get($categories, 'thumb-label'); + $ticks-label: map.get($categories, 'ticks-label'); + $thumb-label: map.get($categories, 'thumb-label'); %igx-slider-thumb-label__container { @include igx-type-style($type-scale, $thumb-label) diff --git a/projects/igniteui-angular/src/lib/core/styles/components/snackbar/_snackbar-component.scss b/projects/igniteui-angular/src/lib/core/styles/components/snackbar/_snackbar-component.scss index e3b261b0a7c..b32fc813605 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/snackbar/_snackbar-component.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/snackbar/_snackbar-component.scss @@ -1,3 +1,6 @@ +@use '../../base' as *; +@use 'sass:string'; + //// /// @group components /// @author Simeon Simeonoff @@ -5,17 +8,25 @@ /// @requires {mixin} bem-elem /// @requires {mixin} bem-mod //// -@include b(igx-snackbar) { - $this: bem--selector-to-string(&); - @include register-component(str-slice($this, 2, -1)); - @extend %igx-snackbar-display !optional; +@mixin component { + @include b(igx-snackbar) { + $this: bem--selector-to-string(&); + @include register-component( + $name: string.slice($this, 2, -1), + $deps: ( + igx-button + ) + ); - @include e(message) { - @extend %igx-snackbar-message !optional; - } + @extend %igx-snackbar-display !optional; + + @include e(message) { + @extend %igx-snackbar-message !optional; + } - @include e(button) { - @extend %igx-snackbar-button !optional; + @include e(button) { + @extend %igx-snackbar-button !optional; + } } } diff --git a/projects/igniteui-angular/src/lib/core/styles/components/snackbar/_snackbar-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/snackbar/_snackbar-theme.scss index 68147b11885..013f60064c5 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/snackbar/_snackbar-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/snackbar/_snackbar-theme.scss @@ -1,3 +1,8 @@ +@use '../../base' as *; +@use '../../themes/schemas' as *; +@use '../../typography/base' as *; +@use 'sass:map'; + //// /// @group themes /// @access public @@ -45,8 +50,8 @@ $name: 'igx-snackbar'; $snackbar-schema: (); - @if map-has-key($schema, $name) { - $snackbar-schema: map-get($schema, $name); + @if map.has-key($schema, $name) { + $snackbar-schema: map.get($schema, $name); } @else { $snackbar-schema: $schema; } @@ -54,7 +59,7 @@ $theme: apply-palette($snackbar-schema, $palette); $border-radius: round-borders( - if($border-radius, $border-radius, map-get($snackbar-schema, 'border-radius')), 0, 24px + if($border-radius, $border-radius, map.get($snackbar-schema, 'border-radius')), 0, 24px ); @if not($button-color) and $background { @@ -66,7 +71,7 @@ } @if not($shadow) { - $elevation: map-get($snackbar-schema, 'elevation'); + $elevation: map.get($snackbar-schema, 'elevation'); $shadow: igx-elevation($elevations, $elevation); } @@ -84,7 +89,7 @@ /// @param {Map} $theme - The theme used to style the component. /// @requires {mixin} igx-css-vars /// @requires rem -/// @requires --var +/// @requires var-get @mixin igx-snackbar($theme) { @include igx-css-vars($theme); @include fade-in(); @@ -107,11 +112,11 @@ min-height: $snackbar-min-height; padding: $snackbar-padding; margin: 8px; - color: --var($theme, 'text-color'); - background: --var($theme, 'background'); + color: var-get($theme, 'text-color'); + background: var-get($theme, 'background'); backface-visibility: hidden; - box-shadow: --var($theme, 'shadow'); - border-radius: --var($theme, 'border-radius'); + box-shadow: var-get($theme, 'shadow'); + border-radius: var-get($theme, 'border-radius'); backdrop-filter: blur(8px); } @@ -121,7 +126,7 @@ %igx-snackbar-button { background: transparent; - color: --var($theme, 'button-color'); + color: var-get($theme, 'button-color'); border: 0; line-height: $snackbar-button-line-height; margin-#{$left}: $snackbar-button-left-margin; @@ -137,7 +142,7 @@ @include animation('fade-in' .35s ease-out); &:hover { - color: --var($theme, 'button-color'); + color: var-get($theme, 'button-color'); } } } @@ -150,7 +155,7 @@ /// @param {Map} $categories [(text: 'body-2')] - The categories from the typographic scale used for type styles. /// @requires {mixin} igx-type-style @mixin igx-snackbar-typography($type-scale, $categories: (text: 'body-2')) { - $text: map-get($categories, 'text'); + $text: map.get($categories, 'text'); %igx-snackbar-message { @include igx-type-style($type-scale, $text); diff --git a/projects/igniteui-angular/src/lib/core/styles/components/splitter/_splitter-component.scss b/projects/igniteui-angular/src/lib/core/styles/components/splitter/_splitter-component.scss index 53ff46cfcec..d9db14fbdb2 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/splitter/_splitter-component.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/splitter/_splitter-component.scss @@ -1,3 +1,6 @@ +@use '../../base' as *; +@use 'sass:string'; + /// @group components /// @author Simeon Simeonoff /// @author Maya Kirova @@ -6,53 +9,57 @@ /// @requires {mixin} bem-mod //// -@include b(igx-splitter) { - // Register the component in the component registry - $this: str-slice(bem--selector-to-string(&), 2, -1); - @include register-component($this); - - @include b(#{$this}-bar-host) { - &:focus { - @extend %igx-splitter-bar--focus !optional; - } - } - - @include b(#{$this}-bar) { - @extend %igx-splitter-bar !optional; - - @include e(handle) { - @extend %igx-splitter-handle !optional; - @extend %igx-splitter-handle--horizontal !optional; - } - - @include e(expander, 'start') { - @extend %igx-splitter-expander !optional; - @extend %igx-splitter-expander--start !optional; - } +@mixin component { + @include b(igx-splitter) { + // Register the component in the component registry + $this: string.slice(bem--selector-to-string(&), 2, -1); + @include register-component( + $name: $this, + $deps: () + ); - @include e(expander, 'end') { - @extend %igx-splitter-expander !optional; - @extend %igx-splitter-expander--end !optional; + @include b(#{$this}-bar-host) { + &:focus { + @extend %igx-splitter-bar--focus !optional; + } } - @include m('vertical') { - @extend %igx-splitter-bar--vertical !optional; + @include b(#{$this}-bar) { + @extend %igx-splitter-bar !optional; @include e(handle) { @extend %igx-splitter-handle !optional; - @extend %igx-splitter-handle--vertical !optional; + @extend %igx-splitter-handle--horizontal !optional; } @include e(expander, 'start') { @extend %igx-splitter-expander !optional; - @extend %igx-splitter-expander--start-vertical !optional; + @extend %igx-splitter-expander--start !optional; } @include e(expander, 'end') { @extend %igx-splitter-expander !optional; - @extend %igx-splitter-expander--end-vertical !optional; + @extend %igx-splitter-expander--end !optional; + } + + @include m('vertical') { + @extend %igx-splitter-bar--vertical !optional; + + @include e(handle) { + @extend %igx-splitter-handle !optional; + @extend %igx-splitter-handle--vertical !optional; + } + + @include e(expander, 'start') { + @extend %igx-splitter-expander !optional; + @extend %igx-splitter-expander--start-vertical !optional; + } + + @include e(expander, 'end') { + @extend %igx-splitter-expander !optional; + @extend %igx-splitter-expander--end-vertical !optional; + } } } } } - diff --git a/projects/igniteui-angular/src/lib/core/styles/components/splitter/_splitter-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/splitter/_splitter-theme.scss index d02a1ad08de..3f0d09df77c 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/splitter/_splitter-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/splitter/_splitter-theme.scss @@ -1,3 +1,7 @@ +@use '../../base' as *; +@use '../../themes/schemas' as *; +@use 'sass:map'; + //// /// @group themes /// @access public @@ -29,8 +33,8 @@ $name: 'igx-splitter'; $splitter-schema: (); - @if map-has-key($schema, $name) { - $splitter-schema: map-get($schema, $name); + @if map.has-key($schema, $name) { + $splitter-schema: map.get($schema, $name); } @else { $splitter-schema: $schema; } @@ -38,7 +42,7 @@ $theme: apply-palette($splitter-schema, $palette); $border-radius-handle: round-borders( - if($border-radius, $border-radius, map-get($splitter-schema, 'border-radius')), 0, 2px + if($border-radius, $border-radius, map.get($splitter-schema, 'border-radius')), 0, 2px ); $theme: apply-palette($splitter-schema, $palette); @@ -66,15 +70,15 @@ /// @param {Map} $theme - The theme used to style the component. /// @requires {mixin} igx-css-vars /// @requires rem -/// @requires --var +/// @requires var-get @mixin igx-splitter($theme) { @include igx-css-vars($theme); - $splitter-color: --var($theme, 'bar-color'); + $splitter-color: var-get($theme, 'bar-color'); $hitbox-size: 4px; $debug-hitbox: false; $hitbox-debug-color: rgba(coral, .24); - $variant: map-get($theme, 'variant'); + $variant: map.get($theme, 'variant'); %handle-area { position: absolute; @@ -120,10 +124,10 @@ %igx-splitter-bar--focus { // Remove the default browser outline styles outline: transparent solid 1px; - box-shadow: inset 0 0 0 1px --var($theme, 'focus-color'); + box-shadow: inset 0 0 0 1px var-get($theme, 'focus-color'); @if $variant == 'indigo-design' { - background: --var($theme, 'focus-color'); + background: var-get($theme, 'focus-color'); } } @@ -145,18 +149,18 @@ } %igx-splitter-handle { - background: --var($theme, 'handle-color'); - border-radius: --var($theme, 'border-radius'); + background: var-get($theme, 'handle-color'); + border-radius: var-get($theme, 'border-radius'); } %igx-splitter-handle--horizontal { width: 25%; - height: --var($theme, 'size'); + height: var-get($theme, 'size'); margin: 0 rem(48px); } %igx-splitter-handle--vertical { - width: --var($theme, 'size'); + width: var-get($theme, 'size'); height: 25%; margin: rem(48px) 0; } @@ -171,64 +175,64 @@ position: relative; width: 0; height: 0; - border-right: --var($theme, 'size') solid transparent; - border-left: --var($theme, 'size') solid transparent; + border-right: var-get($theme, 'size') solid transparent; + border-left: var-get($theme, 'size') solid transparent; cursor: pointer; z-index: 1; } %igx-splitter-expander--start { - border-bottom: --var($theme, 'size') solid --var($theme, 'expander-color'); + border-bottom: var-get($theme, 'size') solid var-get($theme, 'expander-color'); &::before { @extend %igx-splitter-hitbox; - top: calc(100% - #{map-get($theme, 'size')}); - left: calc(100% - (#{map-get($theme, 'size')} * 2)); - width: calc(#{map-get($theme, 'size')} * 4); - height: calc(#{map-get($theme, 'size')} * 3); + top: calc(100% - #{map.get($theme, 'size')}); + left: calc(100% - (#{map.get($theme, 'size')} * 2)); + width: calc(#{map.get($theme, 'size')} * 4); + height: calc(#{map.get($theme, 'size')} * 3); } } %igx-splitter-expander--end { border-bottom: unset; - border-top: --var($theme, 'size') solid --var($theme, 'expander-color'); + border-top: var-get($theme, 'size') solid var-get($theme, 'expander-color'); &::before { @extend %igx-splitter-hitbox; - top: calc(100% - (#{map-get($theme, 'size')} * 2)); - left: calc(100% - (#{map-get($theme, 'size')} * 2)); - width: calc(#{map-get($theme, 'size')} * 4); - height: calc(#{map-get($theme, 'size')} * 3); + top: calc(100% - (#{map.get($theme, 'size')} * 2)); + left: calc(100% - (#{map.get($theme, 'size')} * 2)); + width: calc(#{map.get($theme, 'size')} * 4); + height: calc(#{map.get($theme, 'size')} * 3); } } %igx-splitter-expander--start-vertical { - border-top: --var($theme, 'size') solid transparent; - border-right: --var($theme, 'size') solid --var($theme, 'expander-color'); - border-bottom: --var($theme, 'size') solid transparent; + border-top: var-get($theme, 'size') solid transparent; + border-right: var-get($theme, 'size') solid var-get($theme, 'expander-color'); + border-bottom: var-get($theme, 'size') solid transparent; border-left: unset; &::before { @extend %igx-splitter-hitbox; - top: calc(100% - (#{map-get($theme, 'size')} * 2)); - left: calc(100% - (#{map-get($theme, 'size')} * 2)); - width: calc(#{map-get($theme, 'size')} * 3); - height: calc(#{map-get($theme, 'size')} * 4); + top: calc(100% - (#{map.get($theme, 'size')} * 2)); + left: calc(100% - (#{map.get($theme, 'size')} * 2)); + width: calc(#{map.get($theme, 'size')} * 3); + height: calc(#{map.get($theme, 'size')} * 4); } } %igx-splitter-expander--end-vertical { - border-top: --var($theme, 'size') solid transparent; + border-top: var-get($theme, 'size') solid transparent; border-right: unset; - border-bottom: --var($theme, 'size') solid transparent; - border-left: --var($theme, 'size') solid --var($theme, 'expander-color'); + border-bottom: var-get($theme, 'size') solid transparent; + border-left: var-get($theme, 'size') solid var-get($theme, 'expander-color'); &::before { @extend %igx-splitter-hitbox; - left: calc(100% - (#{map-get($theme, 'size')} * 2)); - top: calc(100% - (#{map-get($theme, 'size')} * 2)); - height: calc(#{map-get($theme, 'size')} * 4); - width: calc(#{map-get($theme, 'size')} * 3); + left: calc(100% - (#{map.get($theme, 'size')} * 2)); + top: calc(100% - (#{map.get($theme, 'size')} * 2)); + height: calc(#{map.get($theme, 'size')} * 4); + width: calc(#{map.get($theme, 'size')} * 3); } } } diff --git a/projects/igniteui-angular/src/lib/core/styles/components/stepper/_stepper-component.scss b/projects/igniteui-angular/src/lib/core/styles/components/stepper/_stepper-component.scss index 64b13c6a917..94a014d62f1 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/stepper/_stepper-component.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/stepper/_stepper-component.scss @@ -1,3 +1,5 @@ +@use '../../base' as *; +@use 'sass:string'; //// /// @group components /// @author Marin Popov @@ -5,97 +7,99 @@ /// @requires {mixin} bem-elem /// @requires {mixin} bem-mod //// -@include b(igx-stepper) { - $block: bem--selector-to-string(&); - @include register-component($block); +@mixin component { + @include b(igx-stepper) { + $block: bem--selector-to-string(&); + @include register-component($block); - @extend %stepper-display !optional; + @extend %stepper-display !optional; - @include e(header) { - @extend %igx-stepper__header !optional; - } + @include e(header) { + @extend %igx-stepper__header !optional; + } - @include e(body) { - @extend %igx-stepper__body !optional; - } + @include e(body) { + @extend %igx-stepper__body !optional; + } - @include e(step) { - @extend %igx-stepper__step !optional; - } + @include e(step) { + @extend %igx-stepper__step !optional; + } - @include e(step, $m: simple) { - @extend %igx-stepper__step--simple !optional; - } + @include e(step, $m: simple) { + @extend %igx-stepper__step--simple !optional; + } - @include e(step, $m: completed) { - @extend %igx-stepper__step--completed !optional; - } + @include e(step, $m: completed) { + @extend %igx-stepper__step--completed !optional; + } - @include e(step, $m: disabled) { - @extend %igx-stepper__step--disabled !optional; - } + @include e(step, $m: disabled) { + @extend %igx-stepper__step--disabled !optional; + } - @include e(step-header) { - @extend %igx-stepper__step-header !optional; - } + @include e(step-header) { + @extend %igx-stepper__step-header !optional; + } - @include e(step-header, $m: current) { - @extend %igx-stepper__step-header--current !optional; - } + @include e(step-header, $m: current) { + @extend %igx-stepper__step-header--current !optional; + } - @include e(step-header, $m: invalid) { - @extend %igx-stepper__step-header--invalid !optional; - } + @include e(step-header, $m: invalid) { + @extend %igx-stepper__step-header--invalid !optional; + } - @include e(step-content) { - @extend %igx-stepper__step-content !optional; - } + @include e(step-content) { + @extend %igx-stepper__step-content !optional; + } - @include e(step-content-wrapper) { - @extend %igx-stepper__step-content-wrapper !optional; - } + @include e(step-content-wrapper) { + @extend %igx-stepper__step-content-wrapper !optional; + } - @include e(step-indicator) { - @extend %igx-stepper__step-indicator !optional; - } + @include e(step-indicator) { + @extend %igx-stepper__step-indicator !optional; + } - @include e(step-title-wrapper) { - @extend %igx-stepper__step-title-wrapper !optional; - } + @include e(step-title-wrapper) { + @extend %igx-stepper__step-title-wrapper !optional; + } - @include e(step-title) { - @extend %igx-stepper__step-title !optional; - } + @include e(step-title) { + @extend %igx-stepper__step-title !optional; + } - @include e(step-subtitle) { - @extend %igx-stepper__step-subtitle !optional; - } + @include e(step-subtitle) { + @extend %igx-stepper__step-subtitle !optional; + } - @include e(step, $m: top) { - @extend %igx-stepper__step--top !optional; - } + @include e(step, $m: top) { + @extend %igx-stepper__step--top !optional; + } - @include e(step, $m: bottom) { - @extend %igx-stepper__step--bottom !optional; - } + @include e(step, $m: bottom) { + @extend %igx-stepper__step--bottom !optional; + } - @include e(step, $m: start) { - @extend %igx-stepper__step--start !optional; - } + @include e(step, $m: start) { + @extend %igx-stepper__step--start !optional; + } - @include e(step, $m: end) { - @extend %igx-stepper__step--end !optional; - } + @include e(step, $m: end) { + @extend %igx-stepper__step--end !optional; + } - @include m(horizontal) { - @extend %igx-stepper--horizontal !optional; + @include m(horizontal) { + @extend %igx-stepper--horizontal !optional; - @include e(body-content) { - @extend %igx-stepper__body-content !optional; - } + @include e(body-content) { + @extend %igx-stepper__body-content !optional; + } - @include e(body-content, $m: active) { - @extend %igx-stepper__body-content--active !optional; + @include e(body-content, $m: active) { + @extend %igx-stepper__body-content--active !optional; + } } } } diff --git a/projects/igniteui-angular/src/lib/core/styles/components/stepper/_stepper-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/stepper/_stepper-theme.scss index c1e0875b874..7f03dc8cc92 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/stepper/_stepper-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/stepper/_stepper-theme.scss @@ -1,3 +1,7 @@ +@use '../../base' as *; +@use '../../themes/schemas' as *; +@use '../../typography/base' as *; +@use 'sass:map'; @use 'sass:math'; //// @@ -180,10 +184,11 @@ $border-radius-step-header: null, ) { $name: 'igx-stepper'; + $selector: 'igx-stepper'; $stepper-schema: (); - @if map-has-key($schema, $name) { - $stepper-schema: map-get($schema, $name); + @if map.has-key($schema, $name) { + $stepper-schema: map.get($schema, $name); } @else { $stepper-schema: $schema; } @@ -191,11 +196,11 @@ $theme: apply-palette($stepper-schema, $palette); $border-radius-indicator: round-borders( - if($border-radius-indicator, $border-radius-indicator, map-get($stepper-schema, 'border-radius-indicator')), 0, 100px + if($border-radius-indicator, $border-radius-indicator, map.get($stepper-schema, 'border-radius-indicator')), 0, 100px ); $border-radius-step-header: round-borders( - if($border-radius-step-header, $border-radius-step-header, map-get($stepper-schema, 'border-radius-step-header')), 0, 100px + if($border-radius-step-header, $border-radius-step-header, map.get($stepper-schema, 'border-radius-step-header')), 0, 100px ); @if not($indicator-background) and $step-background { @@ -245,6 +250,7 @@ @return extend($theme, ( name: $name, palette: $palette, + selector: $selector, // Incomplete step-background: $step-background, @@ -324,27 +330,27 @@ /// @param {Map} $theme - The theme used to style the component. /// @requires {mixin} igx-css-vars /// @requires em -/// @requires --var +/// @requires var-get @mixin igx-stepper($theme) { @include igx-css-vars($theme); - $variant: map-get($theme, variant); + $variant: map.get($theme, variant); - $indicator-size: map-get(( + $indicator-size: map.get(( material: rem(24px), fluent: rem(24px), bootstrap: rem(40px), indigo-design: rem(24px) ), $variant); - $step-header-padding: map-get(( + $step-header-padding: map.get(( material: rem(24px), fluent: rem(8px), bootstrap: rem(24px), indigo-design: rem(16px) ), $variant); - $step-header-padding-simple: map-get(( + $step-header-padding-simple: map.get(( material: rem(8px), fluent: rem(8px), bootstrap: rem(16px), @@ -358,14 +364,14 @@ $v-line-indent: calc(#{$step-header-padding} + (#{$indicator-size} / 2)); $separator-position: 50%; - $outline-width: map-get(( + $outline-width: map.get(( material: rem(1px), fluent: rem(1px), bootstrap: rem(1px), indigo-design: rem(2px) ), $variant); - $separator-size: map-get(( + $separator-size: map.get(( material: rem(1px), fluent: rem(1px), bootstrap: rem(8px), @@ -408,11 +414,11 @@ } %igx-stepper__step-title { - color: --var($theme, 'title-color'); + color: var-get($theme, 'title-color'); } %igx-stepper__step-subtitle { - color: --var($theme, 'subtitle-color'); + color: var-get($theme, 'subtitle-color'); } %igx-stepper__step { @@ -426,43 +432,43 @@ outline: none; %igx-stepper__step-title { - color: --var($theme, 'title-focus-color'); + color: var-get($theme, 'title-focus-color'); } %igx-stepper__step-subtitle { - color: --var($theme, 'subtitle-focus-color'); + color: var-get($theme, 'subtitle-focus-color'); } %igx-stepper__step-header { - background: --var($theme, 'step-focus-background'); - color: --var($theme, 'title-focus-color'); + background: var-get($theme, 'step-focus-background'); + color: var-get($theme, 'title-focus-color'); @if $variant == 'bootstrap' { - box-shadow: inset 0 0 0 $outline-width --var($theme, 'indicator-outline'); + box-shadow: inset 0 0 0 $outline-width var-get($theme, 'indicator-outline'); } } %igx-stepper__step-header--current { - background: --var($theme, 'current-step-focus-background') !important; + background: var-get($theme, 'current-step-focus-background') !important; %igx-stepper__step-title { - color: --var($theme, 'current-title-focus-color'); + color: var-get($theme, 'current-title-focus-color'); } %igx-stepper__step-subtitle { - color: --var($theme, 'current-subtitle-focus-color'); + color: var-get($theme, 'current-subtitle-focus-color'); } } %igx-stepper__step-header--invalid { - background: --var($theme, 'invalid-step-focus-background'); + background: var-get($theme, 'invalid-step-focus-background'); %igx-stepper__step-title { - color: --var($theme, 'invalid-title-focus-color'); + color: var-get($theme, 'invalid-title-focus-color'); } %igx-stepper__step-subtitle { - color: --var($theme, 'invalid-subtitle-focus-color'); + color: var-get($theme, 'invalid-subtitle-focus-color'); } } } @@ -499,12 +505,12 @@ align-items: flex-start; gap: $title-gap; cursor: pointer; - background: --var($theme, 'step-background'); - border-radius: --var($theme, 'border-radius-step-header'); + background: var-get($theme, 'step-background'); + border-radius: var-get($theme, 'border-radius-step-header'); &:hover { - background: --var($theme, 'step-hover-background'); - color: --var($theme, 'title-hover-color'); + background: var-get($theme, 'step-hover-background'); + color: var-get($theme, 'title-hover-color'); } @if $variant != material { @@ -523,10 +529,10 @@ height: $indicator-size; width: $indicator-size; white-space: nowrap; - border-radius: --var($theme, 'border-radius-indicator'); - color: --var($theme, 'indicator-color'); - background: --var($theme, 'indicator-background'); - box-shadow: 0 0 0 $outline-width --var($theme, 'indicator-outline'); + border-radius: var-get($theme, 'border-radius-indicator'); + color: var-get($theme, 'indicator-color'); + background: var-get($theme, 'indicator-background'); + box-shadow: 0 0 0 $outline-width var-get($theme, 'indicator-outline'); @if $variant != 'bootstrap' { > igx-icon { @@ -546,83 +552,83 @@ } %igx-stepper__step-header--current { - background: --var($theme, 'current-step-background') !important; - color: --var($theme, 'current-title-color'); + background: var-get($theme, 'current-step-background') !important; + color: var-get($theme, 'current-title-color'); %igx-stepper__step-indicator { - color: --var($theme, 'current-indicator-color') !important; - background: --var($theme, 'current-indicator-background') !important; - box-shadow: 0 0 0 $outline-width --var($theme, 'current-indicator-outline') !important; + color: var-get($theme, 'current-indicator-color') !important; + background: var-get($theme, 'current-indicator-background') !important; + box-shadow: 0 0 0 $outline-width var-get($theme, 'current-indicator-outline') !important; } %igx-stepper__step-title { - color: --var($theme, 'current-title-color'); + color: var-get($theme, 'current-title-color'); } %igx-stepper__step-subtitle { - color: --var($theme, 'current-subtitle-color'); + color: var-get($theme, 'current-subtitle-color'); } &:hover { - background: --var($theme, 'current-step-hover-background') !important; + background: var-get($theme, 'current-step-hover-background') !important; %igx-stepper__step-title { - color: --var($theme, 'current-title-hover-color'); + color: var-get($theme, 'current-title-hover-color'); } %igx-stepper__step-subtitle { - color: --var($theme, 'current-subtitle-hover-color'); + color: var-get($theme, 'current-subtitle-hover-color'); } } } %igx-stepper__step--disabled { - color: --var($theme, 'disabled-title-color'); + color: var-get($theme, 'disabled-title-color'); pointer-events: none; cursor: default; %igx-stepper__step-indicator { - color: --var($theme, 'disabled-indicator-color'); - background: --var($theme, 'disabled-indicator-background'); - box-shadow: 0 0 0 $outline-width --var($theme, 'disabled-indicator-outline'); + color: var-get($theme, 'disabled-indicator-color'); + background: var-get($theme, 'disabled-indicator-background'); + box-shadow: 0 0 0 $outline-width var-get($theme, 'disabled-indicator-outline'); } %igx-stepper__step-title { - color: --var($theme, 'disabled-title-color'); + color: var-get($theme, 'disabled-title-color'); } %igx-stepper__step-subtitle { - color: --var($theme, 'disabled-subtitle-color'); + color: var-get($theme, 'disabled-subtitle-color'); } } %igx-stepper__step-header--invalid { - background: --var($theme, 'invalid-step-background'); - color: --var($theme, 'invalid-title-color'); + background: var-get($theme, 'invalid-step-background'); + color: var-get($theme, 'invalid-title-color'); %igx-stepper__step-indicator { - color: --var($theme, 'invalid-indicator-color'); - background: --var($theme, 'invalid-indicator-background'); - box-shadow: 0 0 0 $outline-width --var($theme, 'invalid-indicator-outline'); + color: var-get($theme, 'invalid-indicator-color'); + background: var-get($theme, 'invalid-indicator-background'); + box-shadow: 0 0 0 $outline-width var-get($theme, 'invalid-indicator-outline'); } %igx-stepper__step-title { - color: --var($theme, 'invalid-title-color'); + color: var-get($theme, 'invalid-title-color'); } %igx-stepper__step-subtitle { - color: --var($theme, 'invalid-subtitle-color'); + color: var-get($theme, 'invalid-subtitle-color'); } &:hover { - background: --var($theme, 'invalid-step-hover-background'); + background: var-get($theme, 'invalid-step-hover-background'); %igx-stepper__step-title { - color: --var($theme, 'invalid-title-hover-color'); + color: var-get($theme, 'invalid-title-hover-color'); } %igx-stepper__step-subtitle { - color: --var($theme, 'invalid-subtitle-hover-color'); + color: var-get($theme, 'invalid-subtitle-hover-color'); } } } @@ -663,7 +669,7 @@ top: calc(-#{$step-header-padding} + #{$title-gap}); bottom: calc(-#{$step-header-padding} + #{$title-gap}); width: $separator-size; - border-#{$left}: $separator-size unquote(--var($theme, 'step-separator-style')) --var($theme, 'step-separator-color'); + border-#{$left}: $separator-size unquote(var-get($theme, 'step-separator-style')) var-get($theme, 'step-separator-color'); } } @@ -703,71 +709,71 @@ %igx-stepper__step--completed { %igx-stepper__step-header { - background: --var($theme, 'complete-step-background'); + background: var-get($theme, 'complete-step-background'); &:hover { - background: --var($theme, 'complete-step-hover-background'); + background: var-get($theme, 'complete-step-hover-background'); %igx-stepper__step-title { - color: --var($theme, 'complete-title-hover-color'); + color: var-get($theme, 'complete-title-hover-color'); } %igx-stepper__step-subtitle { - color: --var($theme, 'complete-subtitle-hover-color'); + color: var-get($theme, 'complete-subtitle-hover-color'); } } &::after { - border-top-color: --var($theme, 'complete-step-separator-color') !important; - border-top-style: unquote(--var($theme, 'complete-step-separator-style')) !important; + border-top-color: var-get($theme, 'complete-step-separator-color') !important; + border-top-style: unquote(var-get($theme, 'complete-step-separator-style')) !important; } } %igx-stepper__step-indicator { - color: --var($theme, 'complete-indicator-color'); - background: --var($theme, 'complete-indicator-background'); - box-shadow: 0 0 0 $outline-width --var($theme, 'complete-indicator-outline'); + color: var-get($theme, 'complete-indicator-color'); + background: var-get($theme, 'complete-indicator-background'); + box-shadow: 0 0 0 $outline-width var-get($theme, 'complete-indicator-outline'); } %igx-stepper__step-title { - color: --var($theme, 'complete-title-color'); + color: var-get($theme, 'complete-title-color'); } %igx-stepper__step-subtitle { - color: --var($theme, 'complete-subtitle-color'); + color: var-get($theme, 'complete-subtitle-color'); } &:focus { %igx-stepper__step-header { - background: --var($theme, 'complete-step-focus-background'); + background: var-get($theme, 'complete-step-focus-background'); %igx-stepper__step-title { - color: --var($theme, 'complete-title-focus-color'); + color: var-get($theme, 'complete-title-focus-color'); } %igx-stepper__step-subtitle { - color: --var($theme, 'complete-subtitle-focus-color'); + color: var-get($theme, 'complete-subtitle-focus-color'); } } } %igx-stepper__step-content-wrapper { &::before { - border-#{$left}-style: unquote(--var($theme, 'complete-step-separator-style')); - border-#{$left}-color: --var($theme, 'complete-step-separator-color'); + border-#{$left}-style: unquote(var-get($theme, 'complete-step-separator-style')); + border-#{$left}-color: var-get($theme, 'complete-step-separator-color'); } } } %igx-stepper__step--completed + %igx-stepper__step { &::before { - border-top-color: --var($theme, 'complete-step-separator-color') !important; - border-top-style: unquote(--var($theme, 'complete-step-separator-style')) !important; + border-top-color: var-get($theme, 'complete-step-separator-color') !important; + border-top-style: unquote(var-get($theme, 'complete-step-separator-style')) !important; } %igx-stepper__step-header { &::before { - border-top-color: --var($theme, 'complete-step-separator-color') !important; - border-top-style: unquote(--var($theme, 'complete-step-separator-style')) !important; + border-top-color: var-get($theme, 'complete-step-separator-color') !important; + border-top-style: unquote(var-get($theme, 'complete-step-separator-style')) !important; } } } @@ -806,8 +812,9 @@ height: $separator-size; flex: 1; position: relative; + z-index: -1; top: $separator-title-bottom; - border-top: $separator-size unquote(--var($theme, 'step-separator-style')) --var($theme, 'step-separator-color'); + border-top: $separator-size unquote(var-get($theme, 'step-separator-style')) var-get($theme, 'step-separator-color'); } &:first-of-type { @@ -830,11 +837,12 @@ &::after { content: ''; position: absolute; + z-index: -1; height: $separator-size; width: calc(50% - (#{$indicator-size} - #{$indicator-gap})); top: $separator-title-bottom; flex: 1; - border-top: $separator-size unquote(--var($theme, 'step-separator-style')) --var($theme, 'step-separator-color'); + border-top: $separator-size unquote(var-get($theme, 'step-separator-style')) var-get($theme, 'step-separator-color'); } &::before { @@ -883,7 +891,7 @@ &%igx-stepper__step { &::before { - border-top: $separator-size unquote(--var($theme, 'step-separator-style')) --var($theme, 'step-separator-color'); + border-top: $separator-size unquote(var-get($theme, 'step-separator-style')) var-get($theme, 'step-separator-color'); top: $separator-title-top; } } @@ -959,9 +967,15 @@ /// @param {Map} $type-scale - A typographic scale as produced by igx-type-scale. /// @param {Map} $categories [(title: 'body-2')] - The categories from the typographic scale used for type styles. /// @requires {mixin} igx-type-style -@mixin igx-stepper-typography($type-scale, $categories: (title: 'body-2', subtitle: 'caption')) { - $title: map-get($categories, 'title'); - $subtitle: map-get($categories, 'subtitle'); +@mixin igx-stepper-typography( + $type-scale, + $categories: ( + title: 'body-2', + subtitle: 'caption' + ) +) { + $title: map.get($categories, 'title'); + $subtitle: map.get($categories, 'subtitle'); %igx-stepper__step-title { @include igx-type-style($type-scale, $title) { diff --git a/projects/igniteui-angular/src/lib/core/styles/components/switch/_switch-component.scss b/projects/igniteui-angular/src/lib/core/styles/components/switch/_switch-component.scss index 4edd9dd8628..dee856d4e57 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/switch/_switch-component.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/switch/_switch-component.scss @@ -1,3 +1,6 @@ +@use '../../base' as *; +@use 'sass:string'; + //// /// @group components /// @author Simeon Simeonoff @@ -5,114 +8,119 @@ /// @requires {mixin} bem-elem /// @requires {mixin} bem-mod //// -@include b(igx-switch) { - $block: bem--selector-to-string(&); - @include register-component(igx-switch); +@mixin component { + @include b(igx-switch) { + $this: bem--selector-to-string(&); + @include register-component( + $name: string.slice($this, 2, -1), + $deps: () + ); - @extend %switch-display !optional; + @extend %switch-display !optional; - &:hover { - @include e(ripple) { - @extend %switch-ripple--hover !optional; - @extend %switch-ripple--hover-unchecked !optional; + &:hover { + @include e(ripple) { + @extend %switch-ripple--hover !optional; + @extend %switch-ripple--hover-unchecked !optional; + } } - } - &:active { - @include e(ripple) { - @extend %switch-ripple--hover !optional; - @extend %switch-ripple--hover-unchecked !optional; - @extend %switch-ripple--pressed !optional; + &:active { + @include e(ripple) { + @extend %switch-ripple--hover !optional; + @extend %switch-ripple--hover-unchecked !optional; + @extend %switch-ripple--pressed !optional; + } } - } - - @include e(input) { - @extend %switch-input !optional; - } - - @include e(composite) { - @extend %switch-composite !optional; - } - - @include e(composite-thumb) { - @extend %switch-composite-thumb !optional; - } - - @include e(ripple) { - @extend %switch-ripple !optional; - } - @include e(label) { - @extend %switch-label !optional; - @extend %switch-label--after !optional; - } + @include e(input) { + @extend %switch-input !optional; + } - @include e(label, $m: before) { - @extend %switch-label !optional; - @extend %switch-label--before !optional; - } + @include e(composite) { + @extend %switch-composite !optional; + } - @include m(focused) { - @extend %igx-switch--focused !optional; + @include e(composite-thumb) { + @extend %switch-composite-thumb !optional; + } @include e(ripple) { - @extend %switch-ripple--focused !optional; + @extend %switch-ripple !optional; } - } - @include mx(focused, checked) { - @extend %igx-switch--focused-checked !optional; - } - - @include m(checked) { - @include e(composite) { - @extend %switch-composite--x !optional; + @include e(label) { + @extend %switch-label !optional; + @extend %switch-label--after !optional; } - @include e(composite-thumb) { - @extend %switch-composite-thumb--x !optional; + @include e(label, $m: before) { + @extend %switch-label !optional; + @extend %switch-label--before !optional; } - &:hover { + @include m(focused) { + @extend %igx-switch--focused !optional; + @include e(ripple) { - @extend %switch-ripple--hover !optional; - @extend %switch-ripple--hover-checked !optional; + @extend %switch-ripple--focused !optional; } } - &:active { - @include e(ripple) { - @extend %switch-ripple--hover !optional; - @extend %switch-ripple--hover-checked !optional; - @extend %switch-ripple--pressed !optional; - } + @include mx(focused, checked) { + @extend %igx-switch--focused-checked !optional; } - } - @include m(disabled) { - @extend %switch-display--disabled !optional; + @include m(checked) { + @include e(composite) { + @extend %switch-composite--x !optional; + } - @include e(composite) { - @extend %switch-composite--disabled !optional; - } + @include e(composite-thumb) { + @extend %switch-composite-thumb--x !optional; + } - @include e(composite-thumb) { - @extend %switch-composite-thumb--disabled !optional; - } + &:hover { + @include e(ripple) { + @extend %switch-ripple--hover !optional; + @extend %switch-ripple--hover-checked !optional; + } + } - @include e(label) { - @extend %switch-label--disabled !optional; + &:active { + @include e(ripple) { + @extend %switch-ripple--hover !optional; + @extend %switch-ripple--hover-checked !optional; + @extend %switch-ripple--pressed !optional; + } + } } - @include e(label, $m: before) { - @extend %switch-label--disabled !optional; + @include m(disabled) { + @extend %switch-display--disabled !optional; + + @include e(composite) { + @extend %switch-composite--disabled !optional; + } + + @include e(composite-thumb) { + @extend %switch-composite-thumb--disabled !optional; + } + + @include e(label) { + @extend %switch-label--disabled !optional; + } + + @include e(label, $m: before) { + @extend %switch-label--disabled !optional; + } } - } - @include mx(focused, checked) { - @include e(ripple) { - @extend %switch-ripple--focused !optional; - @extend %switch-ripple--focused-checked !optional; + @include mx(focused, checked) { + @include e(ripple) { + @extend %switch-ripple--focused !optional; + @extend %switch-ripple--focused-checked !optional; + } } } } diff --git a/projects/igniteui-angular/src/lib/core/styles/components/switch/_switch-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/switch/_switch-theme.scss index 1123beb428a..f535bb6cedd 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/switch/_switch-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/switch/_switch-theme.scss @@ -1,6 +1,10 @@ +@use '../../base' as *; +@use '../../typography/base' as *; +@use '../../themes/schemas' as *; +@use '../ripple/ripple-theme' as *; +@use '../ripple/ripple-component' as *; +@use 'sass:map'; @use 'sass:math'; -@import '../ripple/ripple-theme'; -@import '../ripple/ripple-component'; //// /// @group themes @@ -78,8 +82,8 @@ $name: 'igx-switch'; $switch-schema: (); - @if map-has-key($schema, $name) { - $switch-schema: map-get($schema, $name); + @if map.has-key($schema, $name) { + $switch-schema: map.get($schema, $name); } @else { $switch-schema: $schema; } @@ -87,29 +91,29 @@ $theme: apply-palette($switch-schema, $palette); $border-radius-track: round-borders( - if($border-radius-track, $border-radius-track, map-get($switch-schema, 'border-radius-track')), 0, 7px + if($border-radius-track, $border-radius-track, map.get($switch-schema, 'border-radius-track')), 0, 7px ); $border-radius-thumb: round-borders( - if($border-radius-thumb, $border-radius-thumb, map-get($switch-schema, 'border-radius-thumb')), 0, 10px + if($border-radius-thumb, $border-radius-thumb, map.get($switch-schema, 'border-radius-thumb')), 0, 10px ); $border-radius-ripple: round-borders( - if($border-radius-ripple, $border-radius-ripple, map-get($switch-schema, 'border-radius-ripple')), 0, 24px + if($border-radius-ripple, $border-radius-ripple, map.get($switch-schema, 'border-radius-ripple')), 0, 24px ); @if not($resting-shadow) { - $resting-elevation: map-get($switch-schema, 'resting-elevation'); + $resting-elevation: map.get($switch-schema, 'resting-elevation'); $resting-shadow: igx-elevation($elevation: $resting-elevation); } @if not($hover-shadow) { - $hover-elevation: map-get($switch-schema, 'hover-elevation'); + $hover-elevation: map.get($switch-schema, 'hover-elevation'); $hover-shadow: igx-elevation($elevation: $hover-elevation); } @if not($disabled-shadow) { - $disabled-elevation: map-get($switch-schema, 'disabled-elevation'); + $disabled-elevation: map.get($switch-schema, 'disabled-elevation'); $disabled-shadow: igx-elevation($elevation: $disabled-elevation); } @@ -155,71 +159,71 @@ /// @requires em /// @requires {mixin} scale-in-out /// @requires {mixin} animation -/// @requires --var +/// @requires var-get @mixin igx-switch($theme) { @include igx-css-vars($theme); @include scale-in-out($start-scale: .9); - $variant: map-get($theme, variant); + $variant: map.get($theme, variant); - $switch-width: map-get(( + $switch-width: map.get(( material: 36px, fluent: 40px, bootstrap: 32px, indigo-design: 34px ), $variant); - $switch-height: map-get(( + $switch-height: map.get(( material: 14px, fluent: 20px, bootstrap: 16px, indigo-design: 16px ), $variant); - $switch-thumb-width: map-get(( + $switch-thumb-width: map.get(( material: 20px, fluent: 12px, bootstrap: 8px, indigo-design: 8px ), $variant); - $switch-on-offset: map-get(( + $switch-on-offset: map.get(( material: 1px, - fluent: private-div($switch-thumb-width, 2), - bootstrap: private-div($switch-thumb-width, 2), + fluent: math.div($switch-thumb-width, 2), + bootstrap: math.div($switch-thumb-width, 2), indigo-design: 7px ), $variant); - $switch-off-offset: map-get(( + $switch-off-offset: map.get(( material: -1px, - fluent: private-div($switch-thumb-width, 3), - bootstrap: private-div($switch-thumb-width, 3), - indigo-design: private-div($switch-thumb-width, 3), + fluent: math.div($switch-thumb-width, 3), + bootstrap: math.div($switch-thumb-width, 3), + indigo-design: math.div($switch-thumb-width, 3), ), $variant); - $ripple-display: map-get(( + $ripple-display: map.get(( material: block, fluent: none, bootstrap: none, indigo-design: none ), $variant); - $thumb-resting-shadow: map-get(( - material: --var($theme, 'resting-shadow'), + $thumb-resting-shadow: map.get(( + material: var-get($theme, 'resting-shadow'), fluent: none, bootstrap: none, indigo-design: none ), $variant); - $thumb-hover-shadow: map-get(( - material: --var($theme, 'hover-shadow'), + $thumb-hover-shadow: map.get(( + material: var-get($theme, 'hover-shadow'), fluent: none, bootstrap: none, indigo-design: none ), $variant); - $thumb-disabled-shadow: map-get(( - material: --var($theme, 'disabled-shadow'), + $thumb-disabled-shadow: map.get(( + material: var-get($theme, 'disabled-shadow'), fluent: none, bootstrap: none, indigo-design: none @@ -228,14 +232,15 @@ $switch-thumb-height: $switch-thumb-width ; $ripple-size: em(48px); - $ripple-radius: private-div($ripple-size, 2); + $ripple-radius: math.div($ripple-size, 2); $label-margin: em(8px); $input-transition: all .2s $ease-in-out-quad; $ripple-theme: igx-ripple-theme( - $color: --var($theme, 'thumb-on-color') + $schema: $light-schema, + $color: var-get($theme, 'thumb-on-color') ); $left: if-ltr(left, right); @@ -263,36 +268,36 @@ align-items: center; width: rem($switch-width); height: rem($switch-height); - border: 1px solid --var($theme, 'border-color'); - border-radius: --var($theme, 'border-radius-track'); - background: --var($theme, 'track-off-color'); + border: 1px solid var-get($theme, 'border-color'); + border-radius: var-get($theme, 'border-radius-track'); + background: var-get($theme, 'track-off-color'); cursor: pointer; user-select: none; transition: $input-transition; @if $variant == 'indigo-design' { - border: 2px solid --var($theme, 'border-color'); + border: 2px solid var-get($theme, 'border-color'); } &:hover, &:focus { - border-color: --var($theme, 'border-hover-color'); + border-color: var-get($theme, 'border-hover-color'); } } %switch-composite--x { - background: --var($theme, 'track-on-color'); - border-color: --var($theme, 'border-on-color'); + background: var-get($theme, 'track-on-color'); + border-color: var-get($theme, 'border-on-color'); &:hover, &:focus { - border-color: --var($theme, 'border-on-hover-color'); + border-color: var-get($theme, 'border-on-hover-color'); } } %switch-composite--disabled { - background: --var($theme, 'track-disabled-color'); - border-color: --var($theme, 'border-disabled-color'); + background: var-get($theme, 'track-disabled-color'); + border-color: var-get($theme, 'border-disabled-color'); } %switch-composite-thumb { @@ -301,8 +306,8 @@ width: rem($switch-thumb-width); height: $switch-thumb-height; min-width: rem($switch-thumb-width); - border-radius: --var($theme, 'border-radius-thumb'); - background: --var($theme, 'thumb-off-color'); + border-radius: var-get($theme, 'border-radius-thumb'); + background: var-get($theme, 'thumb-off-color'); box-shadow: $thumb-resting-shadow; transition: $input-transition; @@ -320,7 +325,7 @@ } %switch-composite-thumb--x { - background: --var($theme, 'thumb-on-color'); + background: var-get($theme, 'thumb-on-color'); @include if-ltr() { transform: translateX(#{rem($switch-width) - rem($switch-thumb-width) - rem($switch-on-offset)}); @@ -332,7 +337,7 @@ } %switch-composite-thumb--disabled { - background: --var($theme, 'thumb-disabled-color'); + background: var-get($theme, 'thumb-disabled-color'); box-shadow: $thumb-disabled-shadow; } @@ -348,7 +353,7 @@ overflow: hidden; pointer-events: none; filter: opacity(1); - border-radius: --var($theme, 'border-radius-ripple'); + border-radius: var-get($theme, 'border-radius-ripple'); } %igx-switch--focused { @@ -362,7 +367,7 @@ position: absolute; top: -$focus-outline-offset-top; left: -$focus-outline-offset-left; - box-shadow: 0 0 0 1px --var($theme, 'focus-outline-color'); + box-shadow: 0 0 0 1px var-get($theme, 'focus-outline-color'); width: calc(100% + (#{$focus-outline-offset-left} * 2)); height: calc(100% + (#{$focus-outline-offset-top} * 2)); } @@ -370,15 +375,15 @@ @if $variant == 'bootstrap' { %switch-composite { - border-radius: --var($theme, 'border-radius-thumb'); - box-shadow: 0 0 0 2px --var($theme, 'focus-outline-color'); + border-radius: var-get($theme, 'border-radius-thumb'); + box-shadow: 0 0 0 2px var-get($theme, 'focus-outline-color'); } } @if $variant == 'indigo-design' { %switch-composite { - border-radius: --var($theme, 'border-radius-thumb'); - box-shadow: 0 0 0 3px --var($theme, 'focus-outline-color'); + border-radius: var-get($theme, 'border-radius-thumb'); + box-shadow: 0 0 0 3px var-get($theme, 'focus-outline-color'); } } } @@ -386,24 +391,24 @@ %igx-switch--focused-checked { @if $variant == 'indigo-design' { %switch-composite { - box-shadow: 0 0 0 3px --var($theme, 'focus-outline-color-focused'); + box-shadow: 0 0 0 3px var-get($theme, 'focus-outline-color-focused'); } } } %switch-ripple--focused { - background: --var($theme, 'track-off-color'); + background: var-get($theme, 'track-off-color'); transition: background .2s $ease-out-quad; opacity: .12; } %switch-ripple--focused-checked { - background: --var($theme, 'thumb-on-color'); + background: var-get($theme, 'thumb-on-color'); } %switch-label { display: inline-block; - color: --var($theme, 'label-color'); + color: var-get($theme, 'label-color'); cursor: pointer; user-select: none; word-wrap: break-all; @@ -430,7 +435,7 @@ } %switch-label--disabled { - color: --var($theme, 'label-disabled-color'); + color: var-get($theme, 'label-disabled-color'); } %switch-ripple--hover { @@ -447,13 +452,13 @@ %switch-ripple--hover-unchecked { &::after { - background: --var($theme, 'track-off-color'); + background: var-get($theme, 'track-off-color'); } } %switch-ripple--hover-checked { &::after { - background: --var($theme, 'thumb-on-color'); + background: var-get($theme, 'thumb-on-color'); } } @@ -474,7 +479,7 @@ $type-scale, $categories: (label: 'subtitle-1') ) { - $label: map-get($categories, 'label'); + $label: map.get($categories, 'label'); %switch-label { @include igx-type-style($type-scale, $label) { diff --git a/projects/igniteui-angular/src/lib/core/styles/components/tabs/_tabs-component.scss b/projects/igniteui-angular/src/lib/core/styles/components/tabs/_tabs-component.scss index caa5180e2af..457dc367d78 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/tabs/_tabs-component.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/tabs/_tabs-component.scss @@ -1,3 +1,6 @@ +@use '../../base' as *; +@use 'sass:string'; + //// /// @group components /// @author Simeon Simeonoff @@ -5,80 +8,89 @@ /// @requires {mixin} bem-elem /// @requires {mixin} bem-mod //// -@include b(igx-tabs) { - $this: bem--selector-to-string(&); - @include register-component(str-slice($this, 2, -1)); - - @extend %tabs-display !optional; - - @include e(header) { - @extend %tabs-header !optional; - } - - @include e(header-button) { - @extend %tabs-header-button !optional; - } - - @include e(header-button, $m: hidden) { - @extend %tabs-header-button--hidden !optional; - } - - @include e(header-button, $m: none) { - @extend %tabs-header-button--none !optional; - } - - @include e(header-content) { - @extend %tabs-header-content !optional; - } - @include e(header-wrapper) { - @extend %tabs-header-wrapper !optional; - } - - @include e(header-scroll) { - @extend %tabs-header-scroll !optional; - } - - @include e(header-scroll, $m: start) { - @extend %tabs-header-scroll--start !optional; - } - - @include e(header-scroll, $m: end) { - @extend %tabs-header-scroll--end !optional; - } - - @include e(header-scroll, $m: center) { - @extend %tabs-header-scroll--center !optional; - } - - @include e(header-scroll, $m: justify) { - @extend %tabs-header-scroll--justify !optional; - } - - @include e(header-item) { - @extend %tabs-header-item !optional; - } - - @include e(header-item, $m: selected) { - @extend %tabs-header-item--selected !optional; - } - - @include e(header-item, $m: disabled) { - @extend %tabs-header-item--disabled !optional; - } - - @include e(header-item-inner) { - @extend %tabs-header-item-inner !optional; - } - - @include e(header-active-indicator) { - @extend %tabs-header-active-indicator !optional; - } - - @include e(panels) { - @extend %tabs-panels !optional; - } - - @include e(panel) { - @extend %tabs-panel !optional; +@mixin component { + @include b(igx-tabs) { + $this: bem--selector-to-string(&); + @include register-component( + $name: string.slice($this, 2, -1), + $deps: ( + igx-button, + igx-icon, + ) + ); + + @extend %tabs-display !optional; + + @include e(header) { + @extend %tabs-header !optional; + } + + @include e(header-button) { + @extend %tabs-header-button !optional; + } + + @include e(header-button, $m: hidden) { + @extend %tabs-header-button--hidden !optional; + } + + @include e(header-button, $m: none) { + @extend %tabs-header-button--none !optional; + } + + @include e(header-content) { + @extend %tabs-header-content !optional; + } + + @include e(header-wrapper) { + @extend %tabs-header-wrapper !optional; + } + + @include e(header-scroll) { + @extend %tabs-header-scroll !optional; + } + + @include e(header-scroll, $m: start) { + @extend %tabs-header-scroll--start !optional; + } + + @include e(header-scroll, $m: end) { + @extend %tabs-header-scroll--end !optional; + } + + @include e(header-scroll, $m: center) { + @extend %tabs-header-scroll--center !optional; + } + + @include e(header-scroll, $m: justify) { + @extend %tabs-header-scroll--justify !optional; + } + + @include e(header-item) { + @extend %tabs-header-item !optional; + } + + @include e(header-item, $m: selected) { + @extend %tabs-header-item--selected !optional; + } + + @include e(header-item, $m: disabled) { + @extend %tabs-header-item--disabled !optional; + } + + @include e(header-item-inner) { + @extend %tabs-header-item-inner !optional; + } + + @include e(header-active-indicator) { + @extend %tabs-header-active-indicator !optional; + } + + @include e(panels) { + @extend %tabs-panels !optional; + } + + @include e(panel) { + @extend %tabs-panel !optional; + } } } diff --git a/projects/igniteui-angular/src/lib/core/styles/components/tabs/_tabs-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/tabs/_tabs-theme.scss index 815de339747..60a77f20e2f 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/tabs/_tabs-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/tabs/_tabs-theme.scss @@ -1,3 +1,11 @@ +@use '../../base' as *; +@use '../../typography/base' as *; +@use '../../themes/schemas' as *; +@use '../ripple/ripple-theme' as *; +@use '../ripple/ripple-component' as *; +@use 'sass:map'; +@use 'sass:meta'; + //// /// @group themes /// @access public @@ -79,26 +87,26 @@ $name: 'igx-tabs'; $tabs-schema: (); - @if map-has-key($schema, $name) { - $tabs-schema: map-get($schema, $name); + @if map.has-key($schema, $name) { + $tabs-schema: map.get($schema, $name); } @else { $tabs-schema: $schema; } $border-radius: round-borders( - if($border-radius, $border-radius, map-get($tabs-schema, 'border-radius')), 0, 6px + if($border-radius, $border-radius, map.get($tabs-schema, 'border-radius')), 0, 6px ); $theme: apply-palette($tabs-schema, $palette); - $variant: map-get($theme, variant); + $variant: map.get($theme, variant); $bootstrap-theme: $variant == 'boostrap'; $tab-area-shadow: if($disable-shadow == true, none, igx-elevation($elevation: 1)); $buttons-shadow: if($disable-shadow == true, none, igx-elevation($elevation: 4)); @if not($item-text-color) and $item-background { - @if type-of($item-background) == 'color' { + @if meta.type-of($item-background) == 'color' { $item-text-color: rgba(text-contrast($item-background), .54); } } @@ -149,7 +157,7 @@ } @if not($button-background) and $item-background { - @if type-of($item-background) == 'color' and lightness($item-background) > 50 { + @if meta.type-of($item-background) == 'color' and lightness($item-background) > 50 { $button-background: transparent; } @else { $button-background: rgba(255, 255, 255 , .1); @@ -157,7 +165,7 @@ } @if not($button-hover-background) and $item-background { - @if type-of($item-background) == 'color' and lightness($item-background) > 50 { + @if meta.type-of($item-background) == 'color' and lightness($item-background) > 50 { $button-hover-background: rgba(0, 0, 0, .05); } @else { $button-hover-background: rgba(255, 255, 255 , .14); @@ -165,7 +173,7 @@ } @if not($button-ripple-color) and $button-background { - @if type-of($item-background) == 'color' and lightness($item-background) > 50 { + @if meta.type-of($item-background) == 'color' and lightness($item-background) > 50 { $button-ripple-color: rgba(0, 0, 0, .4); } @else { $button-ripple-color: rgba(255, 255, 255, .4); @@ -212,11 +220,11 @@ /// @requires {mixin} igx-ripple /// @requires igx-elevation /// @requires rem -/// @requires --var +/// @requires var-get @mixin igx-tabs($theme) { @include igx-css-vars($theme); - $variant: map-get($theme, 'variant'); + $variant: map.get($theme, 'variant'); $not-bootstrap-theme: $variant != 'bootstrap'; $bootstrap-theme: $variant == 'bootstrap'; $indigo-theme: $variant == 'indigo-design'; @@ -228,8 +236,14 @@ $item-padding: rem(11px) rem(16px); - $tabs-ripple-theme: igx-ripple-theme($color: --var($theme, 'tab-ripple-color')); - $button-ripple-theme: igx-ripple-theme($color: --var($theme, 'button-ripple-color')); + $tabs-ripple-theme: igx-ripple-theme( + $schema: $light-schema, + $color: var-get($theme, 'tab-ripple-color') + ); + $button-ripple-theme: igx-ripple-theme( + $schema: $light-schema, + $color: var-get($theme, 'button-ripple-color') + ); $left: if-ltr(left, right); $right: if-ltr(right, left); @@ -253,8 +267,8 @@ %tabs-header { overflow: hidden; - background: --var($theme, 'item-background'); - box-shadow: --var($theme, 'tab-area-shadow'); + background: var-get($theme, 'item-background'); + box-shadow: var-get($theme, 'tab-area-shadow'); min-height: rem(42px); z-index: 1; @@ -281,7 +295,7 @@ left: 0; width: 100%; height: 1px; - background: --var($theme, 'border-color'); + background: var-get($theme, 'border-color'); z-index: 0; } } @@ -302,22 +316,22 @@ width: rem(48px); cursor: pointer; position: relative; - background: --var($theme, 'button-background'); - color: --var($theme, 'button-color'); + background: var-get($theme, 'button-background'); + color: var-get($theme, 'button-color'); outline: 0; @if not $indigo-theme { - box-shadow: --var($theme, 'buttons-shadow'); + box-shadow: var-get($theme, 'buttons-shadow'); } &:hover { - background: --var($theme, 'button-hover-background'); - color: --var($theme, 'button-hover-color'); + background: var-get($theme, 'button-hover-background'); + color: var-get($theme, 'button-hover-color'); } &:focus { outline: 0; - background: --var($theme, 'button-hover-background'); + background: var-get($theme, 'button-hover-background'); } &::-moz-focus-inner { @@ -338,7 +352,7 @@ } %tabs-header-item { - @include _icon-w-margin(map-get($icon-space, 'comfortable'), $left); + @include icon-w-margin(map.get($icon-space, 'comfortable'), $left); display: inline-flex; justify-content: center; align-items: center; @@ -358,18 +372,18 @@ } user-select: none; - background: --var($theme, 'item-background'); - color: --var($theme, 'item-text-color'); + background: var-get($theme, 'item-background'); + color: var-get($theme, 'item-text-color'); outline: 0; @if $bootstrap-theme { border: 1px solid transparent; - border-top-left-radius: --var($theme, 'border-radius'); - border-top-right-radius: --var($theme, 'border-radius'); + border-top-left-radius: var-get($theme, 'border-radius'); + border-top-right-radius: var-get($theme, 'border-radius'); } @if $indigo-theme { - border-bottom: 1px solid --var($theme, 'border-color'); + border-bottom: 1px solid var-get($theme, 'border-color'); } &::-moz-focus-inner { @@ -377,25 +391,25 @@ } &:focus { - background: --var($theme, 'item-active-background'); + background: var-get($theme, 'item-active-background'); border-bottom-color: transparent; } &:hover { - background: --var($theme, 'item-hover-background'); - color: --var($theme, 'item-hover-color'); + background: var-get($theme, 'item-hover-background'); + color: var-get($theme, 'item-hover-color'); @if $bootstrap-theme { - border-color: --var($theme, 'border-color--hover') --var($theme, 'border-color--hover') transparent; + border-color: var-get($theme, 'border-color--hover') var-get($theme, 'border-color--hover') transparent; } } @if $not-bootstrap-theme { - border: 1px solid --var($theme, 'border-color'); + border: 1px solid var-get($theme, 'border-color'); &:hover, &:focus { - border: 1px solid --var($theme, 'border-color--hover'); + border: 1px solid var-get($theme, 'border-color--hover'); } } @@ -418,33 +432,33 @@ %tabs-header-item--selected { outline: 0; - color: --var($theme, 'item-active-color'); + color: var-get($theme, 'item-active-color'); @if $bootstrap-theme { - border-color: --var($theme, 'border-color--hover') --var($theme, 'border-color--hover') transparent; + border-color: var-get($theme, 'border-color--hover') var-get($theme, 'border-color--hover') transparent; } &:focus { - background: --var($theme, 'item-active-background'); - color: --var($theme, 'item-active-color'); + background: var-get($theme, 'item-active-background'); + color: var-get($theme, 'item-active-color'); } &:hover { - background: --var($theme, 'item-active-background'); - color: --var($theme, 'item-active-color'); + background: var-get($theme, 'item-active-background'); + color: var-get($theme, 'item-active-color'); } igx-icon { - color: --var($theme, 'item-active-icon-color'); + color: var-get($theme, 'item-active-icon-color'); } @if $bootstrap-theme { - background: --var($theme, 'item-active-background'); + background: var-get($theme, 'item-active-background'); position: relative; z-index: 1; - border-top-color: --var($theme, 'border-color'); - border-left-color: --var($theme, 'border-color'); - border-right-color: --var($theme, 'border-color'); + border-top-color: var-get($theme, 'border-color'); + border-left-color: var-get($theme, 'border-color'); + border-right-color: var-get($theme, 'border-color'); border-bottom-color: transparent; &::after { @@ -454,14 +468,14 @@ left: 0; width: 100%; height: 1px; - background: --var($theme, 'item-active-background'); + background: var-get($theme, 'item-active-background'); } &:hover, &:focus { - border-top-color: --var($theme, 'border-color'); - border-left-color: --var($theme, 'border-color'); - border-right-color: --var($theme, 'border-color'); + border-top-color: var-get($theme, 'border-color'); + border-left-color: var-get($theme, 'border-color'); + border-right-color: var-get($theme, 'border-color'); border-bottom-color: transparent; } } @@ -503,7 +517,7 @@ transform: translateX(0); height: 2px; min-width: $item-min-width; - background: --var($theme, 'indicator-color'); + background: var-get($theme, 'indicator-color'); transition: transform .3s $tabs-animation-function, width .2s $tabs-animation-function; @if $bootstrap-theme { display: none; @@ -571,7 +585,7 @@ /// @param {Map} $categories [(label: 'button')] - The categories from the typographic scale used for type styles. /// @requires {mixin} igx-type-style @mixin igx-tabs-typography($type-scale, $categories: (label: 'button')) { - $label: map-get($categories, 'label'); + $label: map.get($categories, 'label'); %tabs-header-item-inner > [igxtabheaderlabel]{ @include igx-type-style($type-scale, $label) { diff --git a/projects/igniteui-angular/src/lib/core/styles/components/time-picker/_time-picker-component.scss b/projects/igniteui-angular/src/lib/core/styles/components/time-picker/_time-picker-component.scss index 947ffa373a9..675b96b61d6 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/time-picker/_time-picker-component.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/time-picker/_time-picker-component.scss @@ -1,84 +1,102 @@ -@include b(igx-time-picker) { - $this: bem--selector-to-string(&); - @include register-component(str-slice($this, 2, -1)); +@use '../../base' as *; +@use 'sass:string'; + +//// +/// @group components +/// @author Simeon Simeonoff +/// @requires {mixin} bem-block +/// @requires {mixin} bem-elem +/// @requires {mixin} bem-mod +//// + +@mixin component { + @include b(igx-time-picker) { + $this: bem--selector-to-string(&); + @include register-component( + $name: string.slice($this, 2, -1), + $deps: ( + igx-icon, + igx-input-group, + ) + ); + + @extend %time-picker-display !optional; - @extend %time-picker-display !optional; - - @include e(header) { - @extend %time-picker__header !optional; - } + @include e(header) { + @extend %time-picker__header !optional; + } - @include e(header-ampm) { - @extend %time-picker__header-ampm !optional; - } + @include e(header-ampm) { + @extend %time-picker__header-ampm !optional; + } - @include e(header-hour){ - @extend %time-picker__header-hour !optional; - } + @include e(header-hour){ + @extend %time-picker__header-hour !optional; + } - @include e(main) { - @extend %time-picker__main !optional; - } + @include e(main) { + @extend %time-picker__main !optional; + } - // COLUMN - @include e(column) { - @extend %time-picker__column !optional; - } + // COLUMN + @include e(column) { + @extend %time-picker__column !optional; + } - @include e(item) { - @extend %time-picker__item !optional; - } + @include e(item) { + @extend %time-picker__item !optional; + } - @include e(item, $m: selected) { - @extend %time-picker__item--selected !optional; - } + @include e(item, $m: selected) { + @extend %time-picker__item--selected !optional; + } - @include e(item, $m: active) { - @extend %time-picker__item--active !optional; - } + @include e(item, $m: active) { + @extend %time-picker__item--active !optional; + } - @include e(item, $m: disabled) { - @extend %time-picker__item--disabled !optional; - } + @include e(item, $m: disabled) { + @extend %time-picker__item--disabled !optional; + } - // HOUR - @include e(hourList) { - @extend %time-picker__hourList !optional; - } + // HOUR + @include e(hourList) { + @extend %time-picker__hourList !optional; + } - // MINUTE - @include e(minuteList) { - @extend %time-picker__minuteList !optional; - } + // MINUTE + @include e(minuteList) { + @extend %time-picker__minuteList !optional; + } - // SECONDS - @include e(secondsList) { - @extend %time-picker__secondsList !optional; - } + // SECONDS + @include e(secondsList) { + @extend %time-picker__secondsList !optional; + } - // AM PM - @include e(ampmList) { - @extend %time-picker__ampmList !optional; - } + // AM PM + @include e(ampmList) { + @extend %time-picker__ampmList !optional; + } - @include e(body) { - @extend %time-picker__body !optional; - } + @include e(body) { + @extend %time-picker__body !optional; + } - @include e(buttons) { - @extend %time-picker__buttons !optional; - } + @include e(buttons) { + @extend %time-picker__buttons !optional; + } - @include m(dropdown) { - @extend %time-picker--dropdown !optional; - } + @include m(dropdown) { + @extend %time-picker--dropdown !optional; + } - @include m(vertical) { - @extend %time-picker-display--vertical !optional; + @include m(vertical) { + @extend %time-picker-display--vertical !optional; - @include e(header) { - @extend %time-picker__header--vertical !optional; + @include e(header) { + @extend %time-picker__header--vertical !optional; + } } } } - diff --git a/projects/igniteui-angular/src/lib/core/styles/components/time-picker/_time-picker-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/time-picker/_time-picker-theme.scss index 2285905ff56..cda64f99137 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/time-picker/_time-picker-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/time-picker/_time-picker-theme.scss @@ -1,3 +1,9 @@ +@use '../../base' as *; +@use '../../themes/schemas' as *; +@use '../../typography/base' as *; +@use 'sass:map'; +@use 'sass:meta'; + //// /// @group themes /// @access public @@ -68,8 +74,8 @@ $time-picker-schema: (); - @if map-has-key($schema, $name) { - $time-picker-schema: map-get($schema, $name); + @if map.has-key($schema, $name) { + $time-picker-schema: map.get($schema, $name); } @else { $time-picker-schema: $schema; } @@ -77,11 +83,11 @@ $theme: apply-palette($time-picker-schema, $palette); $border-radius: round-borders( - if($border-radius, $border-radius, map-get($time-picker-schema, 'border-radius')), 0, 20px + if($border-radius, $border-radius, map.get($time-picker-schema, 'border-radius')), 0, 20px ); $active-item-border-radius: round-borders( - if($active-item-border-radius, $active-item-border-radius, map-get($time-picker-schema, 'active-item-border-radius')), 0, 20px + if($active-item-border-radius, $active-item-border-radius, map.get($time-picker-schema, 'active-item-border-radius')), 0, 20px ); @if not($text-color) and $background-color { @@ -93,7 +99,7 @@ } @if not($header-time-period-color) and $header-background { - @if type-of($header-background) == 'color' { + @if meta.type-of($header-background) == 'color' { $header-time-period-color: rgba(text-contrast($header-background), .8); } } @@ -103,24 +109,24 @@ } @if not($active-item-background) and $background-color { - @if type-of($background-color) == 'color' { + @if meta.type-of($background-color) == 'color' { $active-item-background: rgba(text-contrast($background-color), .12); } } @if not($disabled-text-color) and $disabled-item-background { - @if type-of($disabled-item-background) == 'color' { + @if meta.type-of($disabled-item-background) == 'color' { $disabled-text-color: rgba(text-contrast($disabled-item-background), .6); } } @if not($modal-shadow) { - $elevation: map-get($time-picker-schema, 'modal-elevation'); + $elevation: map.get($time-picker-schema, 'modal-elevation'); $modal-shadow: igx-elevation($elevations, $elevation); } @if not($dropdown-shadow) { - $elevation: map-get($time-picker-schema, 'dropdown-elevation'); + $elevation: map.get($time-picker-schema, 'dropdown-elevation'); $dropdown-shadow: igx-elevation($elevations, $elevation); } @@ -148,11 +154,11 @@ /// @param {Map} $theme - The theme used to style the component. /// @requires {mixin} igx-css-vars /// @requires rem -/// @requires --var +/// @requires var-get @mixin igx-time-picker($theme) { @include igx-css-vars($theme); - $variant: map-get($theme, 'variant'); + $variant: map.get($theme, 'variant'); $not-bootstrap-theme: $variant != 'bootstrap'; $left: if-ltr(left, right); @@ -160,7 +166,7 @@ $vertical-header-width: rem(168px); - $picker-buttons-padding: map-get(( + $picker-buttons-padding: map.get(( material: rem(8px), fluent: rem(8px), bootstrap: rem(16px) @@ -171,8 +177,8 @@ flex-flow: column nowrap; max-width: rem(340px); min-width: rem(320px); - border-radius: --var($theme, 'border-radius'); - box-shadow: --var($theme, 'modal-shadow'); + border-radius: var-get($theme, 'border-radius'); + box-shadow: var-get($theme, 'modal-shadow'); overflow: hidden; } @@ -182,13 +188,13 @@ } %time-picker__main { - background: --var($theme, 'background-color'); + background: var-get($theme, 'background-color'); flex: 1 1 auto; } %time-picker--dropdown { min-width: rem(200px); - box-shadow: --var($theme, 'dropdown-shadow'); + box-shadow: var-get($theme, 'dropdown-shadow'); } %time-picker__body { @@ -250,7 +256,7 @@ flex-flow: column nowrap; justify-content: space-between; align-items: center; - color: --var($theme, 'text-color'); + color: var-get($theme, 'text-color'); overflow: hidden; &:focus, @@ -262,7 +268,7 @@ %time-picker__item { width: rem(54px); padding: rem(5px) rem(10px); - border-radius: --var($theme, 'active-item-border-radius'); + border-radius: var-get($theme, 'active-item-border-radius'); height: rem(48px); display: flex; justify-content: center; @@ -274,32 +280,32 @@ } &:hover { - color: --var($theme, 'hover-text-color'); + color: var-get($theme, 'hover-text-color'); } } %time-picker__item--selected { font-size: rem(24px); - color: --var($theme, 'selected-text-color'); + color: var-get($theme, 'selected-text-color'); } %time-picker__item--active { - background: --var($theme, 'active-item-background'); + background: var-get($theme, 'active-item-background'); } %time-picker__item--disabled { - color: --var($theme, 'disabled-text-color'); - background: --var($theme, 'disabled-item-background'); + color: var-get($theme, 'disabled-text-color'); + background: var-get($theme, 'disabled-item-background'); pointer-events: none; } %time-picker__header { - background: --var($theme, 'header-background'); + background: var-get($theme, 'header-background'); padding: rem(24px) rem(16px); } %time-picker__header-ampm { - color: --var($theme, 'header-time-period-color'); + color: var-get($theme, 'header-time-period-color'); } %time-picker__header--vertical { @@ -308,7 +314,7 @@ %time-picker__header-hour { display: flex; - color: --var($theme, 'header-hour-text-color'); + color: var-get($theme, 'header-hour-text-color'); @include if-rtl() { flex-direction: row-reverse; @@ -348,9 +354,9 @@ header-hour: 'h4', content: 'body-1') ) { - $time-period: map-get($categories, 'header-time-period'); - $header-hour: map-get($categories, 'header-hour'); - $content: map-get($categories, 'content'); + $time-period: map.get($categories, 'header-time-period'); + $header-hour: map.get($categories, 'header-hour'); + $content: map.get($categories, 'content'); %time-picker__header-ampm { @include igx-type-style($type-scale, $time-period); diff --git a/projects/igniteui-angular/src/lib/core/styles/components/toast/_toast-component.scss b/projects/igniteui-angular/src/lib/core/styles/components/toast/_toast-component.scss index d087fb482d2..199299cefce 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/toast/_toast-component.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/toast/_toast-component.scss @@ -1,3 +1,6 @@ +@use '../../base' as *; +@use 'sass:string'; + //// /// @group components /// @author Simeon Simeonoff @@ -5,8 +8,14 @@ /// @requires {mixin} bem-elem /// @requires {mixin} bem-mod //// -@include b(igx-toast) { - $this: bem--selector-to-string(&); - @include register-component(str-slice($this, 2, -1)); - @extend %igx-toast-display !optional; + +@mixin component { + @include b(igx-toast) { + $this: bem--selector-to-string(&); + @include register-component( + $name: string.slice($this, 2, -1), + $deps: () + ); + @extend %igx-toast-display !optional; + } } diff --git a/projects/igniteui-angular/src/lib/core/styles/components/toast/_toast-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/toast/_toast-theme.scss index a0425778d63..12b9e3b57ca 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/toast/_toast-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/toast/_toast-theme.scss @@ -1,3 +1,8 @@ +@use '../../base' as *; +@use '../../themes/schemas' as *; +@use '../../typography/base' as *; +@use 'sass:map'; + //// /// @group themes /// @access public @@ -42,8 +47,8 @@ $name: 'igx-toast'; $toast-schema: (); - @if map-has-key($schema, $name) { - $toast-schema: map-get($schema, $name); + @if map.has-key($schema, $name) { + $toast-schema: map.get($schema, $name); } @else { $toast-schema: $schema; } @@ -51,11 +56,11 @@ $theme: apply-palette($toast-schema, $palette); $border-radius: round-borders( - if($border-radius, $border-radius, map-get($toast-schema, 'border-radius')), 0, 26px + if($border-radius, $border-radius, map.get($toast-schema, 'border-radius')), 0, 26px ); @if not($shadow) { - $elevation: map-get($toast-schema, 'elevation'); + $elevation: map.get($toast-schema, 'elevation'); $shadow: igx-elevation($elevation: $elevation); } @@ -77,24 +82,24 @@ /// @param {Map} $theme - The theme used to style the component. /// @requires {mixin} igx-css-vars /// @requires rem -/// @requires --var +/// @requires var-get @mixin igx-toast($theme) { @include igx-css-vars($theme); - $variant: map-get($theme, variant); + $variant: map.get($theme, variant); - $palette: map-get($theme, 'palette'); + $palette: map.get($theme, 'palette'); $width: 52px; $margin: rem(42px) auto; - $padding: map-get(( + $padding: map.get(( 'material': rem(16px) rem(24px), 'fluent': rem(16px) rem(24px), 'bootstrap': rem(12px), 'indigo-design': rem(14px) rem(24px) ), $variant); - $border: map-get(( + $border: map.get(( 'material': none, 'fluent': none, 'bootstrap': 1px solid igx-color($palette, 'grays', 300), @@ -108,11 +113,11 @@ margin: $margin; padding: $padding; min-width: $width; - color: --var($theme, 'text-color'); - background: --var($theme, 'background'); + color: var-get($theme, 'text-color'); + background: var-get($theme, 'background'); border: $border; - border-radius: --var($theme, 'border-radius'); - box-shadow: map-get($theme, 'shadow'); + border-radius: var-get($theme, 'border-radius'); + box-shadow: map.get($theme, 'shadow'); backdrop-filter: blur(10px); } } @@ -125,7 +130,7 @@ /// @param {Map} $categories [(text: 'body-2')] - The categories from the typographic scale used for type styles. /// @requires {mixin} igx-type-style @mixin igx-toast-typography($type-scale, $categories: (text: 'body-2')) { - $text: map-get($categories, 'text'); + $text: map.get($categories, 'text'); %igx-toast-display > *{ @include igx-type-style($type-scale, $text) { diff --git a/projects/igniteui-angular/src/lib/core/styles/components/tooltip/_tooltip-component.scss b/projects/igniteui-angular/src/lib/core/styles/components/tooltip/_tooltip-component.scss index 2233dc4f64e..cd05dbefa96 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/tooltip/_tooltip-component.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/tooltip/_tooltip-component.scss @@ -1,3 +1,6 @@ +@use '../../base' as *; +@use 'sass:string'; + //// /// @group components /// @author Simeon Simeonoff @@ -6,23 +9,25 @@ /// @requires {mixin} bem-mod //// -@include b(igx-tooltip) { - $this: bem--selector-to-string(&); - @include register-component(str-slice($this, 2, -1)); - - @extend %tooltip-display !optional; +@mixin component { + @include b(igx-tooltip) { + $this: bem--selector-to-string(&); + @include register-component(string.slice($this, 2, -1)); - @include m(desktop) { @extend %tooltip-display !optional; - @extend %tooltip--desktop !optional; - } - @include m(mobile) { - @extend %tooltip-display !optional; - @extend %tooltip--mobile !optional; - } + @include m(desktop) { + @extend %tooltip-display !optional; + @extend %tooltip--desktop !optional; + } + + @include m(mobile) { + @extend %tooltip-display !optional; + @extend %tooltip--mobile !optional; + } - @include m(disabled) { - @extend %tooltip--disabled !optional; + @include m(disabled) { + @extend %tooltip--disabled !optional; + } } } diff --git a/projects/igniteui-angular/src/lib/core/styles/components/tooltip/_tooltip-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/tooltip/_tooltip-theme.scss index 718a8164c51..c578485fd36 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/tooltip/_tooltip-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/tooltip/_tooltip-theme.scss @@ -1,3 +1,8 @@ +@use '../../base' as *; +@use '../../themes/schemas' as *; +@use '../../typography/base' as *; +@use 'sass:map'; + //// /// @group themes /// @access public @@ -38,8 +43,8 @@ $tooltip-schema: (); - @if map-has-key($schema, $name) { - $tooltip-schema: map-get($schema, $name); + @if map.has-key($schema, $name) { + $tooltip-schema: map.get($schema, $name); } @else { $tooltip-schema: $schema; } @@ -47,7 +52,7 @@ $theme: apply-palette($tooltip-schema, $palette); $border-radius: round-borders( - if($border-radius, $border-radius, map-get($tooltip-schema, 'border-radius')), 0, 16px + if($border-radius, $border-radius, map.get($tooltip-schema, 'border-radius')), 0, 16px ); @if not($text-color) and $background { @@ -57,7 +62,7 @@ @return extend($theme, ( name: $name, selector: $selector, - palette: $default-palette, + palette: $palette, background: $background, border-radius: $border-radius, text-color: $text-color, @@ -66,7 +71,7 @@ /// @param {Map} $theme - The theme used to style the component. /// @requires {mixin} igx-css-vars -/// @requires --var +/// @requires var-get @mixin igx-tooltip($theme) { @include igx-css-vars($theme); @@ -74,9 +79,9 @@ display: inline-flex; justify-content: center; flex-flow: column wrap; - background: --var($theme, 'background'); - color: --var($theme, 'text-color'); - border-radius: --var($theme, 'border-radius'); + background: var-get($theme, 'background'); + color: var-get($theme, 'text-color'); + border-radius: var-get($theme, 'border-radius'); margin: 0 auto; } @@ -106,8 +111,8 @@ $type-scale, $categories: (text-desktop: null, text-mobile: 'body-2') ) { - $text-desktop: map-get($categories, 'text-desktop'); - $text-mobile: map-get($categories, 'text-mobile'); + $text-desktop: map.get($categories, 'text-desktop'); + $text-mobile: map.get($categories, 'text-mobile'); %tooltip--mobile { @include igx-type-style($type-scale, $text-mobile); diff --git a/projects/igniteui-angular/src/lib/core/styles/components/tree/_tree-component.scss b/projects/igniteui-angular/src/lib/core/styles/components/tree/_tree-component.scss index 747f82498ce..a00c6e5214d 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/tree/_tree-component.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/tree/_tree-component.scss @@ -1,3 +1,6 @@ +@use '../../base' as *; +@use 'sass:string'; + //// /// @group components /// @author Marin Popov @@ -6,81 +9,89 @@ /// @requires {mixin} bem-mod //// -@include b(igx-tree) { - @extend %tree-display !optional; -} - -@include b(igx-tree-node) { - $this: bem--selector-to-string(&); - @include register-component(str-slice($this, 2, -1)); +@mixin component { + @include b(igx-tree) { + @extend %tree-display !optional; + $this: bem--selector-to-string(&); + + @include register-component( + $name: string.slice($this, 2, -1), + $deps: ( + igx-checkbox, + igx-icon, + ) + ); + } - @extend %tree-node !optional; + @include b(igx-tree-node) { + @extend %tree-node !optional; - @include e(wrapper) { - @extend %node-wrapper !optional; + @include e(wrapper) { + @extend %node-wrapper !optional; - &:hover { - &::after { - @extend %indigo-opacity !optional; + &:hover { + &::after { + @extend %indigo-opacity !optional; + } } } - } - @include e(wrapper, $m: cosy) { - @extend %node-wrapper--cosy !optional; - } + @include e(wrapper, $m: cosy) { + @extend %node-wrapper--cosy !optional; + } - @include e(wrapper, $m: compact) { - @extend %node-wrapper--compact !optional; - } + @include e(wrapper, $m: compact) { + @extend %node-wrapper--compact !optional; + } - // STATES START - @include e(wrapper, $m: selected) { - @extend %node-wrapper--selected !optional; - } + // STATES START + @include e(wrapper, $m: selected) { + @extend %node-wrapper--selected !optional; + } - @include e(wrapper, $m: active) { - @extend %node-wrapper--active !optional; - } + @include e(wrapper, $m: active) { + @extend %node-wrapper--active !optional; + } - @include e(wrapper, $mods: (active, selected)) { - @extend %node-wrapper--active-selected !optional; - } + @include e(wrapper, $mods: (active, selected)) { + @extend %node-wrapper--active-selected !optional; + } - @include e(wrapper, $m: focused) { - @extend %node-wrapper--focused !optional; - } + @include e(wrapper, $m: focused) { + @extend %node-wrapper--focused !optional; + } - @include e(wrapper, $m: disabled) { - @extend %node-wrapper--disabled !optional; - } - // STATES END + @include e(wrapper, $m: disabled) { + @extend %node-wrapper--disabled !optional; + } + // STATES END - @include e(content) { - @extend %node-content !optional; - } + @include e(content) { + @extend %node-content !optional; + } - @include e(spacer) { - @extend %node-spacer !optional; - } + @include e(spacer) { + @extend %node-spacer !optional; + } - @include e(toggle-button) { - @extend %node-toggle-button !optional; - } + @include e(toggle-button) { + @extend %node-toggle-button !optional; + } - @include e(toggle-button, $m: hidden) { - @extend %node-toggle-button--hidden !optional; - } + @include e(toggle-button, $m: hidden) { + @extend %node-toggle-button--hidden !optional; + } - @include e(drop-indicator) { - @extend %node-drop-indicator !optional; - } + @include e(drop-indicator) { + @extend %node-drop-indicator !optional; + } - @include e(select) { - @extend %node-select !optional; - } + @include e(select) { + @extend %node-select !optional; + } - @include e(group) { - @extend %node-group !optional; + @include e(group) { + @extend %node-group !optional; + } } } diff --git a/projects/igniteui-angular/src/lib/core/styles/components/tree/_tree-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/tree/_tree-theme.scss index f99efad7981..aab1058f459 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/tree/_tree-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/tree/_tree-theme.scss @@ -1,3 +1,9 @@ +@use '../../base' as *; +@use '../../themes/schemas' as *; +@use '../../typography/base' as *; +@use 'sass:map'; +@use 'sass:meta'; + //// /// @group themes /// @access public @@ -46,8 +52,8 @@ $name: 'igx-tree'; $tree-schema: (); - @if map-has-key($schema, $name) { - $tree-schema: map-get($schema, $name); + @if map.has-key($schema, $name) { + $tree-schema: map.get($schema, $name); } @else { $tree-schema: $schema; } @@ -72,7 +78,7 @@ @return extend($theme, ( name: $name, - palette: $default-palette, + palette: $palette, background: $background, foreground: $foreground, background-selected: $background-selected, @@ -90,14 +96,14 @@ /// @param {Map} $theme - The theme used to style the component. /// @requires {mixin} igx-css-vars -/// @requires --var +/// @requires var-get @mixin igx-tree($theme) { @include igx-css-vars($theme); $left: if-ltr(left, right); $right: if-ltr(right, left); - $variant: map-get($theme, variant); + $variant: map.get($theme, variant); $indigo-theme: $variant == 'indigo-design'; $node-indent: ( @@ -116,9 +122,9 @@ $icon-space: rem(8px); $drop-indicator-width: ( - comfortable: calc(100% - ((#{map-get($node-indent, 'comfortable')} * 2) + (#{$icon-size} + #{$icon-space}))), - cosy: calc(100% - ((#{map-get($node-indent, 'cosy')} * 2) + (#{$icon-size} + #{$icon-space}))), - compact: calc(100% - ((#{map-get($node-indent, 'compact')} * 2) + (#{$icon-size} + #{$icon-space}))) + comfortable: calc(100% - ((#{map.get($node-indent, 'comfortable')} * 2) + (#{$icon-size} + #{$icon-space}))), + cosy: calc(100% - ((#{map.get($node-indent, 'cosy')} * 2) + (#{$icon-size} + #{$icon-space}))), + compact: calc(100% - ((#{map.get($node-indent, 'compact')} * 2) + (#{$icon-size} + #{$icon-space}))) ); %tree-display { @@ -160,11 +166,11 @@ } %node-wrapper { - min-height: map-get($node-height, 'comfortable'); - padding: 0 map-get($node-indent, 'comfortable'); + min-height: map.get($node-height, 'comfortable'); + padding: 0 map.get($node-indent, 'comfortable'); position: relative; - background: --var($theme, 'background'); - color: --var($theme, 'foreground'); + background: var-get($theme, 'background'); + color: var-get($theme, 'foreground'); // We need this here, since we count on it to calculate the width of the tree drop indicator igx-icon { @@ -186,7 +192,7 @@ &:hover { &::after { - background: --var($theme, 'hover-color'); + background: var-get($theme, 'hover-color'); } } @@ -200,16 +206,16 @@ } &--cosy { - min-height: map-get($node-height, 'cosy'); - padding: 0 map-get($node-indent, 'cosy'); + min-height: map.get($node-height, 'cosy'); + padding: 0 map.get($node-indent, 'cosy'); %node-spacer { - width: map-get($node-indent, 'cosy') + width: map.get($node-indent, 'cosy') } %node-drop-indicator { - #{$right}: map-get($node-indent, 'cosy'); - width: map-get($drop-indicator-width, 'cosy'); + #{$right}: map.get($node-indent, 'cosy'); + width: map.get($drop-indicator-width, 'cosy'); } igx-circular-bar { @@ -219,16 +225,16 @@ } &--compact { - min-height: map-get($node-height, 'compact'); - padding: 0 map-get($node-indent, 'compact'); + min-height: map.get($node-height, 'compact'); + padding: 0 map.get($node-indent, 'compact'); %node-spacer { - width: map-get($node-indent, 'compact') + width: map.get($node-indent, 'compact') } %node-drop-indicator { - #{$right}: map-get($node-indent, 'compact'); - width: map-get($drop-indicator-width, 'compact'); + #{$right}: map.get($node-indent, 'compact'); + width: map.get($drop-indicator-width, 'compact'); } igx-circular-bar { @@ -239,20 +245,20 @@ } %node-wrapper--selected { - background: --var($theme, 'background-selected'); - color: --var($theme, 'foreground-selected'); + background: var-get($theme, 'background-selected'); + color: var-get($theme, 'foreground-selected'); } %node-wrapper--active { - background: --var($theme, 'background-active'); - color: --var($theme, 'foreground-active'); + background: var-get($theme, 'background-active'); + color: var-get($theme, 'foreground-active'); } %indigo-opacity { - $bg-active: map-get($theme, 'background-active'); + $bg-active: map.get($theme, 'background-active'); @if ($indigo-theme) { - @if type-of($bg-active) == 'color' and lightness($bg-active) < 50 { + @if meta.type-of($bg-active) == 'color' and lightness($bg-active) < 50 { opacity: .8; } @else { opacity: .3; @@ -261,17 +267,17 @@ } %node-wrapper--active-selected { - background: --var($theme, 'background-active-selected'); - color: --var($theme, 'foreground-active-selected'); + background: var-get($theme, 'background-active-selected'); + color: var-get($theme, 'foreground-active-selected'); } %node-wrapper--focused { - box-shadow: inset 0 0 0 1px --var($theme, 'border-color'); + box-shadow: inset 0 0 0 1px var-get($theme, 'border-color'); } %node-wrapper--disabled { - background: --var($theme, 'background-disabled') !important; - color: --var($theme, 'foreground-disabled') !important; + background: var-get($theme, 'background-disabled') !important; + color: var-get($theme, 'foreground-disabled') !important; box-shadow: none !important; @@ -282,13 +288,13 @@ } %node-toggle-button { - color: --var($theme, 'foreground-disabled') !important; + color: var-get($theme, 'foreground-disabled') !important; } } %node-spacer { display: inline-block; - width: map-get($node-indent, 'comfortable'); + width: map.get($node-indent, 'comfortable'); } %node-content { @@ -309,14 +315,14 @@ display: flex; visibility: hidden; position: absolute; - #{$right}: map-get($node-indent, 'comfortable'); + #{$right}: map.get($node-indent, 'comfortable'); bottom: 0; - width: map-get($drop-indicator-width, 'comfortable'); + width: map.get($drop-indicator-width, 'comfortable'); > div { flex: 1; height: rem(1px); - background: --var($theme, 'drop-area-color'); + background: var-get($theme, 'drop-area-color'); } } @@ -335,7 +341,7 @@ $type-scale, $categories: (label: 'body-2') ) { - $text: map-get($categories, 'label'); + $text: map.get($categories, 'label'); %node-content { @include igx-type-style($type-scale, $text) diff --git a/projects/igniteui-angular/src/lib/core/styles/components/watermark/_watermark-component.scss b/projects/igniteui-angular/src/lib/core/styles/components/watermark/_watermark-component.scss index ab115af2fb6..7269923c169 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/watermark/_watermark-component.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/watermark/_watermark-component.scss @@ -1,5 +1,8 @@ +@use '../../base' as *; +@use 'sass:string'; + //// -/// @access privet +/// @access private /// @group components /// @author Marin Popov /// @requires {mixin} bem-block @@ -7,17 +10,22 @@ /// @requires {mixin} bem-mod //// -@include b(igx-watermark) { - $this: bem--selector-to-string(&); - @include register-component(str-slice($this, 2, -1)); +@mixin component { + @include b(igx-watermark) { + $this: bem--selector-to-string(&); + @include register-component( + $name: string.slice($this, 2, -1), + $deps: () + ); - @extend %igx-watermark !optional; + @extend %igx-watermark !optional; - @include e(link) { - @extend %igx-watermark__link !optional; - } + @include e(link) { + @extend %igx-watermark__link !optional; + } - @include e(background-img) { - @extend %igx-watermark__background-img !optional; + @include e(background-img) { + @extend %igx-watermark__background-img !optional; + } } } diff --git a/projects/igniteui-angular/src/lib/core/styles/components/watermark/_watermark-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/watermark/_watermark-theme.scss index fb2747e3114..271372165d5 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/watermark/_watermark-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/watermark/_watermark-theme.scss @@ -1,3 +1,7 @@ +@use '../../base' as *; +@use '../../themes/schemas' as *; +@use 'sass:map'; + //// /// @group themes /// @access privet @@ -36,8 +40,8 @@ $name: 'igx-watermark'; $watermark-schema: (); - @if map-has-key($schema, $name) { - $watermark-schema: map-get($schema, $name); + @if map.has-key($schema, $name) { + $watermark-schema: map.get($schema, $name); } @else { $watermark-schema: $schema; } @@ -45,7 +49,7 @@ $theme: apply-palette($watermark-schema, $palette); $border-radius: round-borders( - if($border-radius, $border-radius, map-get($watermark-schema, 'border-radius')), 0, 16px + if($border-radius, $border-radius, map.get($watermark-schema, 'border-radius')), 0, 16px ); @if not($color) and $link-background { @@ -54,7 +58,7 @@ @return extend($theme, ( name: $name, - palette: $default-palette, + palette: $palette, background-image: $background-image, link-background: $link-background, border-radius: $border-radius, @@ -65,7 +69,7 @@ /// @param {Map} $theme - The theme used to style the component. /// @requires {mixin} igx-css-vars -/// @requires --var +/// @requires var-get @mixin igx-watermark($theme) { @include igx-css-vars($theme); @@ -89,11 +93,11 @@ font-size: rem(14px); padding: rem(2px) rem(4px); line-height: normal; - border-radius: --var($theme, 'border-radius'); - border: 1px solid --var($theme, 'border-color'); - color: --var($theme, 'color'); + border-radius: var-get($theme, 'border-radius'); + border: 1px solid var-get($theme, 'border-color'); + color: var-get($theme, 'color'); z-index: 10002; - background-color: --var($theme, 'link-background'); + background-color: var-get($theme, 'link-background'); pointer-events: all; text-decoration: none; } @@ -106,7 +110,7 @@ left: 0; z-index: 10001; pointer-events: none; - background-image: --var($theme, 'background-image'); + background-image: var-get($theme, 'background-image'); background-repeat: repeat; background-position: rem(16px) rem(16px); // Target only IE 10,11. diff --git a/projects/igniteui-angular/src/lib/core/styles/print/_grid-print.scss b/projects/igniteui-angular/src/lib/core/styles/print/_grid-print.scss index 6f195ce6a0c..5c82d863cfa 100644 --- a/projects/igniteui-angular/src/lib/core/styles/print/_grid-print.scss +++ b/projects/igniteui-angular/src/lib/core/styles/print/_grid-print.scss @@ -5,7 +5,7 @@ $print-background: #eee; /// Defines printing styles for the igx-grid component. /// @group print -@mixin igx-grid-print { +@mixin layout { igx-grid { igx-input-group, igx-checkbox, diff --git a/projects/igniteui-angular/src/lib/core/styles/print/_index.scss b/projects/igniteui-angular/src/lib/core/styles/print/_index.scss index 9a7e2b9ba7a..656c1b96adb 100644 --- a/projects/igniteui-angular/src/lib/core/styles/print/_index.scss +++ b/projects/igniteui-angular/src/lib/core/styles/print/_index.scss @@ -1,9 +1,9 @@ -@import 'grid-print'; +@use 'grid-print'; /// Defines printing styles for all components in the library. /// @group print /// @requires {mixin} igx-grid-print -@mixin igx-print-layout { +@mixin layout { @media print { html, body, @@ -33,7 +33,7 @@ display: none !important; } - @include igx-grid-print(); + @include grid-print.layout(); .igx-bottom-nav__menu, .igx-button-group, diff --git a/projects/igniteui-angular/src/lib/core/styles/spec/_elevations.spec.scss b/projects/igniteui-angular/src/lib/core/styles/spec/_elevations.spec.scss index d34b24a79bd..130973174a5 100644 --- a/projects/igniteui-angular/src/lib/core/styles/spec/_elevations.spec.scss +++ b/projects/igniteui-angular/src/lib/core/styles/spec/_elevations.spec.scss @@ -1,11 +1,9 @@ @use 'node_modules/sass-true' as *; -@import '../base/index'; -@import '../themes/index'; +@use '../base' as *; $_my-elevations: igx-elevations(red, green, blue); @include describe('Elevations') { - @include it('should add elevations as CSS variables') { @include assert() { @@ -19,33 +17,12 @@ $_my-elevations: igx-elevations(red, green, blue); } } - @include it('should get an elevation as a CSS variable from an elevations map') { - $expected: none; - - $igx-legacy-support: true !global; - $actual: igx-elevation($_my-elevations, 0); - @include assert-equal($actual, $expected); - - $igx-legacy-support: false !global; - $actual: igx-elevation($_my-elevations, 0); - @include assert-equal($actual, $expected); - } - - @include it('should get an elevation as a CSS variable w/ legacy-support off') { + @include it('should get an elevation as a CSS variable') { $expected: var(--igx-elevation-5); - $igx-legacy-support: false !global; $actual: igx-elevation($elevation: 5); @include assert-equal($actual, $expected); } - - @include it('should get an elevation value w/ legacy-support on') { - $expected: none; - - $igx-legacy-support: true !global; - $actual: igx-elevation($elevation: 0); - @include assert-equal($actual, $expected); - } } @include describe('igx-elevation-vars') { diff --git a/projects/igniteui-angular/src/lib/core/styles/spec/_functions.spec.scss b/projects/igniteui-angular/src/lib/core/styles/spec/_functions.spec.scss index 371828245dd..f7d21ba9056 100644 --- a/projects/igniteui-angular/src/lib/core/styles/spec/_functions.spec.scss +++ b/projects/igniteui-angular/src/lib/core/styles/spec/_functions.spec.scss @@ -1,6 +1,5 @@ @use 'node_modules/sass-true' as *; -@import '../base/index'; -@import '../themes/index'; +@use '../base' as *; @include describe('Unit conversions') { @include it('should convert pixel numbers to rem') { @@ -55,16 +54,6 @@ } @include describe('Meta introspection') { - @include it('legacy should return true with $legacy-support on') { - $igx-legacy-support: true !global; - @include assert-equal(legacy(), true); - } - - @include it('legacy should return false with $legacy-support off') { - $igx-legacy-support: false !global; - @include assert-equal(legacy(), false); - } - @include it('is-root should return true if called from root') { @include assert('when called from root') { // Defined at root level @@ -95,7 +84,7 @@ $_primary: #09f; $_secondary: #97c; $_palette: igx-palette($_primary, $_secondary); -$default-palette: $_palette; +$theme-palette: $_palette; @include describe('Palette operations') { @include describe('igx-color') { @@ -115,46 +104,23 @@ $default-palette: $_palette; } } - @include describe('igx-color w/ legacy support') { - $igx-legacy-support: true !global; - - @include it('should return a value of type color w/o arguments') { - $value: igx-color(); - @include assert-equal(type-of($value), color); - } - - @include it('should return a value of type color from $default-palette w/ color as only argument') { - $value: igx-color($color: secondary); - $actual: igx-color($default-palette, 'secondary'); - @include assert-equal($value, $actual); - } - - @include it('should return a value of type color from $default-palette w/ color and variant as only arguments') { - $value: igx-color($color: secondary, $variant: 700); - $actual: igx-color($default-palette, 'secondary', 700); - @include assert-equal($value, $actual); - } - } - - @include describe('igx-color w/o legacy support') { - $igx-legacy-support: false !global; - + @include describe('igx-color') { @include it('should return a value of type string as CSS var w/o arguments') { $value: igx-color(); @include assert-equal(type-of($value), string); - @include assert-equal($value, var(--igx-primary-500)); + @include assert-equal($value, hsla(var(--igx-primary-500), var(--igx-primary-a))); } @include it('should return a value of type string as CSS var w/ color as only argument') { $value: igx-color($color: secondary); @include assert-equal(type-of($value), string); - @include assert-equal($value, var(--igx-secondary-500)); + @include assert-equal($value, hsla(var(--igx-secondary-500), var(--igx-secondary-a))); } @include it('should return a value of type string as CSS var w/ color and variant as only arguments') { $value: igx-color($color: secondary, $variant: 'A400'); @include assert-equal(type-of($value), string); - @include assert-equal($value, var(--igx-secondary-A400)); + @include assert-equal($value, hsla(var(--igx-secondary-A400), var(--igx-secondary-a))); } } } @@ -189,7 +155,7 @@ $default-palette: $_palette; @include it('should resolve simple schema colors as CSS vars w/o palette') { $actual: resolve-value($value: $simple-color, $payload: null); - $expected: var(--igx-primary-500); + $expected: hsla(var(--igx-primary-500), var(--igx-primary-a)); @include assert-equal($actual, $expected); } @@ -226,3 +192,33 @@ $default-palette: $_palette; @include assert-equal($actual, $expected); } } + +@include describe('Theme Module System') { + $components: ( + igx-checkbox: ( + 'usedBy': ( + igx-combo, + igx-grid + ) + ) + ) !global; + + @include it('should include theme if other themes depend on it') { + $excluded: (igx-checkbox, igx-combo); + $test: is-used( + $name: 'igx-checkbox', + $checklist: $excluded, + ); + @include assert-equal($test, true); + } + + @include it('should exclude theme if no themes depend on it') { + $excluded: (igx-checkbox, igx-grid, igx-combo); + $test: is-used( + $name: 'igx-checkbox', + $checklist: $excluded, + ); + + @include assert-equal($test, false); + } +} diff --git a/projects/igniteui-angular/src/lib/core/styles/spec/_index.scss b/projects/igniteui-angular/src/lib/core/styles/spec/_index.scss index 77b19023912..bd34fa410b4 100644 --- a/projects/igniteui-angular/src/lib/core/styles/spec/_index.scss +++ b/projects/igniteui-angular/src/lib/core/styles/spec/_index.scss @@ -1,4 +1,3 @@ -@import 'functions.spec'; -@import 'mixins.spec'; -@import 'elevations.spec'; - +@use 'functions.spec' as *; +@use 'mixins.spec' as *; +@use 'elevations.spec' as *; diff --git a/projects/igniteui-angular/src/lib/core/styles/spec/_mixins.spec.scss b/projects/igniteui-angular/src/lib/core/styles/spec/_mixins.spec.scss index 8dee8ca62d5..eca0f86f777 100644 --- a/projects/igniteui-angular/src/lib/core/styles/spec/_mixins.spec.scss +++ b/projects/igniteui-angular/src/lib/core/styles/spec/_mixins.spec.scss @@ -1,13 +1,14 @@ +@use 'sass:map'; @use 'node_modules/sass-true' as *; -@import '../base/index'; -@import '../themes/index'; +@use '../base' as *; +@use '../components' as *; @include describe('Register Component') { $components: () !default; @include it('should add new component inside components list') { @include register-component('my-component'); - @include assert-true(map-has-key($components, 'my-component')); + @include assert-true(map.has-key($components, 'my-component')); } } @@ -43,7 +44,7 @@ } @include contains() { - --igc-active-color: var(--igc-dockmanager-#{$key}, #{map-get($theme, #{$key})}); + --igc-active-color: var(--igc-dockmanager-#{$key}, #{map.get($theme, #{$key})}); } } } @@ -119,7 +120,7 @@ --igx-primary-s: #{$s}; --igx-primary-l: #{$l}; --igx-primary-a: #{$a}; - --igx-primary-500: #{hsla(var(--igx-primary-h), var(--igx-primary-s), var(--igx-primary-l), var(--igx-primary-a))}; + --igx-primary-500: #{var(--igx-primary-h), var(--igx-primary-s), var(--igx-primary-l)}; } } } @@ -132,7 +133,7 @@ @include assert() { @include output() { - @include if-rtl() { + @include if-rtl() { margin: 1px; } } @@ -142,6 +143,7 @@ } } } + @include it('should return styles only when the global direction is LTR') { $direction: 'ltr' !global; @@ -179,7 +181,7 @@ $keyframes: () !default; @include it('should registers a keyframe animation in the global keyframes registry list') { @include keyframes('my-keyframe'); - @include assert-true(map-has-key($keyframes, 'my-keyframe')); + @include assert-true(map.has-key($keyframes, 'my-keyframe')); } /* stylelint-disable max-nesting-depth */ diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/_core.scss b/projects/igniteui-angular/src/lib/core/styles/themes/_core.scss index c67a9387807..9a2f0ddc826 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/_core.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/_core.scss @@ -3,91 +3,74 @@ /// @author Simeon Simeonoff //// -// Anything imported here shouldn't affect -// theme configuration +@use 'utilities' as *; -// Import utilities -@import './utilities'; +// Common components +@use '../components/_common/igx-control'; +@use '../components/_common/igx-display-container' as display-container; +@use '../components/_common/igx-drag' as drag; +@use '../components/_common/igx-vhelper' as vhelper; +@use '../components/ripple/ripple-component' as ripple; - -// Common component modules -@import '../components/_common/igx-control'; -@import '../components/_common/igx-display-container'; -@import '../components/_common/igx-drag'; -@import '../components/_common/igx-vhelper'; - -// Ensure the ripple is loaded before other component themes -@import '../components/ripple/ripple-component'; - -// Component composition styles -@import '../components/action-strip/action-strip-component'; -@import '../components/avatar/avatar-component'; -@import '../components/badge/badge-component'; -@import '../components/bottom-nav/bottom-nav-component'; -@import '../components/button/button-component'; -@import '../components/divider/divider-component'; -@import '../components/button-group/button-group-component'; -@import '../components/banner/banner-component'; -@import '../components/calendar/calendar-component'; -@import '../components/card/card-component'; -@import '../components/carousel/carousel-component'; -@import '../components/checkbox/checkbox-component'; -@import '../components/chip/chip-component'; -@import '../components/column-actions/column-actions-component'; -@import '../components/combo/combo-component'; -@import '../components/charts/category-chart-component'; -@import '../components/charts/data-chart-component'; -@import '../components/charts/doughnut-chart-component'; -@import '../components/charts/financial-chart-component'; -@import '../components/charts/funnel-chart-component'; -@import '../components/charts/gauge-component'; -@import '../components/charts/geo-map-component'; -@import '../components/charts/graph-component'; -@import '../components/charts/pie-chart-component'; -@import '../components/charts/shape-chart-component'; -@import '../components/charts/sparkline-component'; -@import '../components/date-picker/date-picker-component'; -@import '../components/date-range-picker/date-range-picker-component'; -@import '../components/dialog/dialog-component'; -@import '../components/dock-manager/dock-manager-component'; -@import '../components/drop-down/drop-down-component'; -@import '../components/expansion-panel/expansion-panel-component'; -@import '../components/grid/grid-component'; -@import '../components/grid-summary/grid-summary-component'; -@import '../components/paginator/paginator-component'; -@import '../components/grid-toolbar/grid-toolbar-component'; -@import '../components/highlight/highlight-component'; -@import '../components/icon/icon-component'; -@import '../components/input/input-group-component'; -@import '../components/list/list-component'; -@import '../components/navbar/navbar-component'; -@import '../components/navdrawer/navdrawer-component'; -@import '../components/overlay/overlay-component'; -@import '../components/progress/progress-component'; -@import '../components/radio/radio-component'; -@import '../components/scrollbar/scrollbar-component'; -@import '../components/slider/slider-component'; -@import '../components/splitter/splitter-component'; -@import '../components/snackbar/snackbar-component'; -@import '../components/switch/switch-component'; -@import '../components/stepper/stepper-component'; -@import '../components/tabs/tabs-component'; -@import '../components/toast/toast-component'; -@import '../components/tooltip/tooltip-component'; -@import '../components/time-picker/time-picker-component'; -@import '../components/tree/tree-component'; -@import '../components/watermark/watermark-component'; -@import '../print/index'; - -// Includes the base for each theme. -[class^='igx-'] { - &, - *, - *::before, - *::after { - box-sizing: border-box; - } -} +// Other components +@use '../components/action-strip/action-strip-component' as action-strip; +@use '../components/avatar/avatar-component' as avatar; +@use '../components/badge/badge-component' as badge; +@use '../components/bottom-nav/bottom-nav-component' as bottom-nav; +@use '../components/button/button-component' as button; +@use '../components/divider/divider-component' as divider; +@use '../components/button-group/button-group-component' as button-group; +@use '../components/banner/banner-component' as banner; +@use '../components/calendar/calendar-component' as calendar; +@use '../components/card/card-component' as card; +@use '../components/carousel/carousel-component' as carousel; +@use '../components/checkbox/checkbox-component' as checkbox; +@use '../components/chip/chip-component' as chip; +@use '../components/column-actions/column-actions-component' as column-actions; +@use '../components/combo/combo-component' as combo; +@use '../components/charts/category-chart-component' as category-chart; +@use '../components/charts/data-chart-component' as data-chart; +@use '../components/charts/doughnut-chart-component' as doughnut-chart; +@use '../components/charts/financial-chart-component' as financial-chart; +@use '../components/charts/funnel-chart-component' as funnel-chart; +@use '../components/charts/gauge-component' as gauge; +@use '../components/charts/geo-map-component' as geo-map; +@use '../components/charts/graph-component' as graph; +@use '../components/charts/pie-chart-component' as pie-chart; +@use '../components/charts/shape-chart-component' as shape-chart; +@use '../components/charts/sparkline-component' as sparkline; +@use '../components/date-picker/date-picker-component' as date-picker; +@use '../components/date-range-picker/date-range-picker-component' as date-range-picker; +@use '../components/dialog/dialog-component' as dialog; +@use '../components/dock-manager/dock-manager-component' as dock-manager; +@use '../components/drop-down/drop-down-component' as drop-down; +@use '../components/expansion-panel/expansion-panel-component' as expansion-panel; +@use '../components/grid/grid-component' as grid; +@use '../components/grid-summary/grid-summary-component' as grid-summary; +@use '../components/grid-toolbar/grid-toolbar-component' as grid-toolbar; +@use '../components/highlight/highlight-component' as highlight; +@use '../components/icon/icon-component' as icon; +@use '../components/input/input-group-component' as input-group; +@use '../components/list/list-component' as list; +@use '../components/navbar/navbar-component' as navbar; +@use '../components/navdrawer/navdrawer-component' as navdrawer; +@use '../components/overlay/overlay-component' as overlay; +@use '../components/paginator/paginator-component' as paginator; +@use '../components/progress/progress-component' as progress; +@use '../components/radio/radio-component' as radio; +@use '../components/scrollbar/scrollbar-component' as scrollbar; +@use '../components/slider/slider-component' as slider; +@use '../components/splitter/splitter-component' as splitter; +@use '../components/snackbar/snackbar-component' as snackbar; +@use '../components/switch/switch-component' as switch; +@use '../components/stepper/stepper-component' as stepper; +@use '../components/tabs/tabs-component' as tabs; +@use '../components/toast/toast-component' as toast; +@use '../components/tooltip/tooltip-component' as tooltip; +@use '../components/time-picker/time-picker-component' as time-picker; +@use '../components/tree/tree-component' as tree; +@use '../components/watermark/watermark-component' as watermark; +@use '../print'; /// @param {boolean} $print-layout [true] - Activates the printing styles of the components. /// @param {string} $direction [ltr] - Sets the layout direction. Can be 'ltr' or 'rtl'. @@ -96,8 +79,8 @@ /// @requires {mixin} igx-print-layout @mixin igx-core( $print-layout: true, - $direction: ltr, - $enhanced-accessibility: false + $direction: $direction, + $enhanced-accessibility: $enhanced-accessibility ) { @if $direction != ltr and $direction != rtl { $direction: ltr !global; @@ -105,12 +88,91 @@ $direction: $direction !global; } - $_igx-enhanced-accessibility: $enhanced-accessibility !global; + $enhanced-accessibility: $enhanced-accessibility !global; + + // Angular hack for binding to [hidden] property + // not working + [hidden] { + display: none !important; + } + + // Common styles + @include vhelper.component(); + @include display-container.component(); + @include drag.component(); + + // Includes the base for each theme. + [class^='igx-'] { + &, + *, + *::before, + *::after { + box-sizing: border-box; + } + } - @include igx-vhelper(); + // Component styles + @include ripple.component(); + @include action-strip.component(); + @include avatar.component(); + @include badge.component(); + @include banner.component(); + @include bottom-nav.component(); + @include button.component(); + @include button-group.component(); + @include divider.component(); + @include calendar.component(); + @include card.component(); + @include carousel.component(); + @include checkbox.component(); + @include chip.component(); + @include column-actions.component(); + @include combo.component(); + @include category-chart.component(); + @include data-chart.component(); + @include doughnut-chart.component(); + @include financial-chart.component(); + @include funnel-chart.component(); + @include gauge.component(); + @include geo-map.component(); + @include graph.component(); + @include pie-chart.component(); + @include shape-chart.component(); + @include sparkline.component(); + @include date-picker.component(); + @include date-range-picker.component(); + @include dialog.component(); + @include dock-manager.component(); + @include drop-down.component(); + @include expansion-panel.component(); + @include grid.component(); + @include grid-summary.component(); + @include grid-toolbar.component(); + @include highlight.component(); + @include icon.component(); + @include input-group.component(); + @include list.component(); + @include navbar.component(); + @include navdrawer.component(); + @include overlay.component(); + @include paginator.component(); + @include progress.component(); + @include radio.component(); + @include scrollbar.component(); + @include slider.component(); + @include splitter.component(); + @include snackbar.component(); + @include switch.component(); + @include stepper.component(); + @include tabs.component(); + @include toast.component(); + @include tooltip.component(); + @include time-picker.component(); + @include tree.component(); + @include watermark.component(); @if $print-layout == true { - @include igx-print-layout(); + @include print.layout(); } } diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/_index.scss b/projects/igniteui-angular/src/lib/core/styles/themes/_index.scss index a179f339930..5b38c0be756 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/_index.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/_index.scss @@ -3,86 +3,34 @@ /// @author Simeon Simeonoff //// -// Import the core module first -@import 'core'; - -// Import all component mixins -@import '../components/action-strip/action-strip-theme'; -@import '../components/avatar/avatar-theme'; -@import '../components/badge/badge-theme'; -@import '../components/bottom-nav/bottom-nav-theme'; -@import '../components/button/button-theme'; -@import '../components/button-group/button-group-theme'; -@import '../components/banner/banner-theme'; -@import '../components/calendar/calendar-theme'; -@import '../components/card/card-theme'; -@import '../components/carousel/carousel-theme'; -@import '../components/charts/data-chart-theme'; -@import '../components/charts/doughnut-chart-theme'; -@import '../components/charts/gauge-theme'; -@import '../components/charts/financial-chart-theme'; -@import '../components/charts/graph-theme'; -@import '../components/charts/category-chart-theme'; -@import '../components/charts/geo-map-theme'; -@import '../components/charts/pie-chart-theme'; -@import '../components/charts/sparkline-theme'; -@import '../components/charts/funnel-chart-theme'; -@import '../components/charts/shape-chart-theme'; -@import '../components/checkbox/checkbox-theme'; -@import '../components/chip/chip-theme'; -@import '../components/column-actions/column-actions-theme'; -@import '../components/combo/combo-theme'; -@import '../components/date-picker/date-picker-theme'; -@import '../components/date-range-picker/date-range-picker-theme'; -@import '../components/dialog/dialog-theme'; -@import '../components/divider/divider-theme'; -@import '../components/dock-manager/dock-manager-theme'; -@import '../components/drop-down/drop-down-theme'; -@import '../components/expansion-panel/expansion-panel-theme'; -@import '../components/grid/grid-theme'; -@import '../components/grid-summary/grid-summary-theme'; -@import '../components/paginator/paginator-theme'; -@import '../components/grid-toolbar/grid-toolbar-theme'; -@import '../components/highlight/highlight-theme'; -@import '../components/overlay/overlay-theme'; -@import '../components/toast/toast-theme'; -@import '../components/tooltip/tooltip-theme'; -@import '../components/tabs/tabs-theme'; -@import '../components/scrollbar/scrollbar-theme'; -@import '../components/switch/switch-theme'; -@import '../components/stepper/stepper-theme'; -@import '../components/snackbar/snackbar-theme'; -@import '../components/slider/slider-theme'; -@import '../components/splitter/splitter-theme'; -@import '../components/ripple/ripple-theme'; -@import '../components/radio/radio-theme'; -@import '../components/progress/progress-theme'; -@import '../components/navbar/navbar-theme'; -@import '../components/navdrawer/navdrawer-theme'; -@import '../components/list/list-theme'; -@import '../components/input/input-group-theme'; -@import '../components/icon/icon-theme'; -@import '../components/time-picker/time-picker-theme'; -@import '../components/tree/tree-theme'; -@import '../components/watermark/watermark-theme'; +@use 'sass:list'; +@use 'sass:string'; +@use '../base' as *; +@use 'schemas' as *; +@use 'palettes' as *; +@use '../components' as *; + +@forward 'palettes'; +@forward 'utilities'; +@forward 'schemas'; +@forward 'core'; +@forward '../components'; /// Generates an Ignite UI for Angular global theme. /// @param {Map} $palette - An igx-palette to be used by the global theme. /// @param {Map} $schema [$light-schema] - The schema used as basis for styling the components. /// @param {List} $exclude [( )] - A list of igx components to be excluded from the global theme styles. -/// @param {Boolean} $legacy-support [false] - If set to true, it turns on support for IE11, i.e. css variables are not used in the generated component themes. /// @param {Number} $roundness [null] - Sets the global roundness factor (the value can be any decimal fraction between 0 and 1) for all components. /// @param {Boolean} $elevation [true] - Turns on/off elevations for all components in the theme. /// @param {Map} $elevations [$igx-elevations] - The elevation map to be used by all component themes. /// @requires $components -/// @requires $default-palette +/// @requires $theme-palette /// @requires $igx-elevations /// @requires {function} is-component @mixin igx-theme( $palette, $schema: $light-material-schema, $exclude: (), - $legacy-support: false, $roundness: null, $elevation: true, $elevations: $igx-elevations, @@ -90,44 +38,37 @@ // Stores all excluded component styles $excluded: (); - @if not($legacy-support) { - @include igx-palette-vars($palette, $contrast: true); + @include igx-palette-vars($palette, $contrast: true); - @if $elevation { - @include igx-elevation-vars($elevations); - } + @if $elevation { + @include igx-elevation-vars($elevations); } - $default-palette: $palette !global; - $igx-legacy-support: $legacy-support !global; + $theme-palette: $palette !global; - @if length($exclude) > 0 { + @if list.length($exclude) > 0 { $excluded: is-component($exclude); } - @if length($excluded) > 0 { - @warn unquote('You have excluded the following components from the theme: "#{$excluded}". You can now add your own themes for the excluded components.'); - } - - @if not(index($exclude, 'igx-ripple')) { - @include igx-ripple(igx-ripple-theme($schema: $schema)); + @if is-used('igx-ripple', $exclude) { + @include igx-ripple(igx-ripple-theme( + $schema: $schema + )); } - @if not(index($exclude, 'igx-avatar')) { - // Palette is no longer required, the component adjusts - // its colors based on the context in browsers with CSS vars - // support. - // In older browsers, the component defaults to the old - // behavior where hard-coded values from the $default-palette - // are used. - @include igx-avatar(igx-avatar-theme($schema: $schema)); + @if is-used('igx-avatar', $exclude) { + @include igx-avatar(igx-avatar-theme( + $schema: $schema + )); } - @if not(index($exclude, 'igx-action-strip')) { - @include igx-action-strip(igx-action-strip-theme($schema: $schema)); + @if is-used('igx-action-strip', $exclude) { + @include igx-action-strip(igx-action-strip-theme( + $schema: $schema + )); } - @if not(index($exclude, 'igx-badge')) { + @if is-used('igx-badge', $exclude) { @include igx-badge(igx-badge-theme( $schema: $schema, $border-radius: $roundness, @@ -135,14 +76,14 @@ )); } - @if not(index($exclude, 'igx-bottom-nav')) { + @if is-used('igx-bottom-nav', $exclude) { @include igx-bottom-nav(igx-bottom-nav-theme( $schema: $schema, $shadow: if($elevation == false, none, null), )); } - @if not(index($exclude, 'igx-button')) { + @if is-used('igx-button', $exclude) { @include igx-button(igx-button-theme( $schema: $schema, $border-radius: $roundness, @@ -152,7 +93,7 @@ )); } - @if not(index($exclude, 'igx-button-group')) { + @if is-used('igx-button-group', $exclude) { @include igx-button-group(igx-button-group-theme( $schema: $schema, $border-radius: $roundness, @@ -160,13 +101,13 @@ )); } - @if not(index($exclude, 'igx-banner')) { + @if is-used('igx-banner', $exclude) { @include igx-banner(igx-banner-theme( $schema: $schema, )); } - @if not(index($exclude, 'igx-calendar')) { + @if is-used('igx-calendar', $exclude) { @include igx-calendar(igx-calendar-theme( $schema: $schema, $border-radius: $roundness, @@ -175,7 +116,7 @@ )); } - @if not(index($exclude, 'igx-card')) { + @if is-used('igx-card', $exclude) { @include igx-card(igx-card-theme( $schema: $schema, $border-radius: $roundness, @@ -184,7 +125,7 @@ )); } - @if not(index($exclude, 'igx-carousel')) { + @if is-used('igx-carousel', $exclude) { @include igx-carousel(igx-carousel-theme( $schema: $schema, $border-radius: $roundness, @@ -192,86 +133,86 @@ )); } - @if not(index($exclude, 'igx-splitter')) { + @if is-used('igx-splitter', $exclude) { @include igx-splitter(igx-splitter-theme( $schema: $schema, $border-radius: $roundness, )); } - @if not(index($exclude, 'data-chart')) { + @if is-used('data-chart', $exclude) { @include igx-css-vars(igx-data-chart-theme( $schema: $schema, )); } - @if not(index($exclude, 'doughnut-chart')) { + @if is-used('doughnut-chart', $exclude) { @include igx-css-vars(igx-doughnut-chart-theme( $schema: $schema, )); } - @if not(index($exclude, 'linear-gauge')) { + @if is-used('linear-gauge', $exclude) { @include igx-css-vars(igx-linear-gauge-theme( $schema: $schema, )); } - @if not(index($exclude, 'radial-gauge')) { + @if is-used('radial-gauge', $exclude) { @include igx-css-vars(igx-radial-gauge-theme( $schema: $schema, )); } - @if not(index($exclude, 'financial-chart')) { + @if is-used('financial-chart', $exclude) { @include igx-css-vars(igx-financial-chart-theme( $schema: $schema, )); } - @if not(index($exclude, 'bullet-graph')) { + @if is-used('bullet-graph', $exclude) { @include igx-css-vars(igx-bullet-graph-theme( $schema: $schema, )); } - @if not(index($exclude, 'category-chart')) { + @if is-used('category-chart', $exclude) { @include igx-css-vars(igx-category-chart-theme( $schema: $schema, )); } - @if not(index($exclude, 'geo-map')) { + @if is-used('geo-map', $exclude) { @include igx-css-vars(igx-geo-map-theme( $schema: $schema, )); } - @if not(index($exclude, 'pie-chart')) { + @if is-used('pie-chart', $exclude) { @include igx-css-vars(igx-pie-chart-theme( $schema: $schema, )); } - @if not(index($exclude, 'sparkline')) { + @if is-used('sparkline', $exclude) { @include igx-css-vars(igx-sparkline-theme( $schema: $schema, )); } - @if not(index($exclude, 'funnel-chart')) { + @if is-used('funnel-chart', $exclude) { @include igx-css-vars(igx-funnel-chart-theme( $schema: $schema, )); } - @if not(index($exclude, 'shape-chart')) { + @if is-used('shape-chart', $exclude) { @include igx-css-vars(igx-shape-chart-theme( $schema: $schema, )); } - @if not(index($exclude, 'igx-checkbox')) { + @if is-used('igx-checkbox', $exclude) { @include igx-checkbox(igx-checkbox-theme( $schema: $schema, $border-radius: $roundness, @@ -279,7 +220,7 @@ )); } - @if not(index($exclude, 'igx-chip')) { + @if is-used('igx-chip', $exclude) { @include igx-chip(igx-chip-theme( $schema: $schema, $border-radius: $roundness, @@ -287,26 +228,32 @@ )); } - @if not(index($exclude, 'igx-column-actions')) { - @include igx-column-actions(igx-column-actions-theme($schema: $schema)); + @if is-used('igx-column-actions', $exclude) { + @include igx-column-actions(igx-column-actions-theme( + $schema: $schema + )); } - @if not(index($exclude, 'igx-combo')) { - @include igx-combo(igx-combo-theme($schema: $schema)); + @if is-used('igx-combo', $exclude) { + @include igx-combo(igx-combo-theme( + $schema: $schema + )); } - @if not(index($exclude, 'igx-date-picker')) { + @if is-used('igx-date-picker', $exclude) { @include igx-date-picker(igx-calendar-theme( $schema: $schema, $border-radius: $roundness, )); } - @if not(index($exclude, 'igx-date-range-picker')) { - @include igx-date-range-picker(igx-date-range-picker-theme($schema: $schema)); + @if is-used('igx-date-range-picker', $exclude) { + @include igx-date-range-picker(igx-date-range-picker-theme( + $schema: $schema + )); } - @if not(index($exclude, 'igx-dialog')) { + @if is-used('igx-dialog', $exclude) { @include igx-dialog(igx-dialog-theme( $schema: $schema, $border-radius: $roundness, @@ -314,15 +261,19 @@ )); } - @if not(index($exclude, 'igx-divider')) { - @include igx-divider(igx-divider-theme($schema: $schema)); + @if is-used('igx-divider', $exclude) { + @include igx-divider(igx-divider-theme( + $schema: $schema + )); } - @if not(index($exclude, 'igc-dockmanager')) { - @include igc-dock-manager(igc-dock-manager-theme($schema: $schema)); + @if is-used('igc-dockmanager', $exclude) { + @include igc-dock-manager(igc-dock-manager-theme( + $schema: $schema + )); } - @if not(index($exclude, 'igx-drop-down')) { + @if is-used('igx-drop-down', $exclude) { @include igx-drop-down(igx-drop-down-theme( $schema: $schema, $border-radius: $roundness, @@ -330,14 +281,14 @@ )); } - @if not(index($exclude, 'igx-expansion-panel')) { + @if is-used('igx-expansion-panel', $exclude) { @include igx-expansion-panel(igx-expansion-panel-theme( $schema: $schema, $border-radius: $roundness, )); } - @if not(index($exclude, 'igx-grid')) { + @if is-used('igx-grid', $exclude) { @include igx-grid(igx-grid-theme( $schema: $schema, $drop-area-border-radius: $roundness, @@ -346,23 +297,31 @@ )); } - @if not(index($exclude, 'igx-grid-summary')) { - @include igx-grid-summary(igx-grid-summary-theme($schema: $schema)); + @if is-used('igx-grid-summary', $exclude) { + @include igx-grid-summary(igx-grid-summary-theme( + $schema: $schema + )); } - @if not(index($exclude, 'igx-grid-toolbar')) { - @include igx-grid-toolbar(igx-grid-toolbar-theme($schema: $schema)); + @if is-used('igx-grid-toolbar', $exclude) { + @include igx-grid-toolbar(igx-grid-toolbar-theme( + $schema: $schema + )); } - @if not(index($exclude, 'igx-highlight')) { - @include igx-highlight(igx-highlight-theme($schema: $schema)); + @if is-used('igx-highlight', $exclude) { + @include igx-highlight(igx-highlight-theme( + $schema: $schema + )); } - @if not(index($exclude, 'igx-icon')) { - @include igx-icon(igx-icon-theme($schema: $schema)); + @if is-used('igx-icon', $exclude) { + @include igx-icon(igx-icon-theme( + $schema: $schema + )); } - @if not(index($exclude, 'igx-input-group')) { + @if is-used('igx-input-group', $exclude) { @include igx-input-group(igx-input-group-theme( $schema: $schema, $box-border-radius: $roundness, @@ -374,7 +333,7 @@ )); } - @if not(index($exclude, 'igx-list')) { + @if is-used('igx-list', $exclude) { @include igx-list(igx-list-theme( $schema: $schema, $border-radius: $roundness, @@ -382,14 +341,14 @@ )); } - @if not(index($exclude, 'igx-navbar')) { + @if is-used('igx-navbar', $exclude) { @include igx-navbar(igx-navbar-theme( $schema: $schema, $shadow: if($elevation == false, none, null), )); } - @if not(index($exclude, 'igx-nav-drawer')) { + @if is-used('igx-nav-drawer', $exclude) { @include igx-navdrawer(igx-navdrawer-theme( $schema: $schema, $border-radius: $roundness, @@ -398,35 +357,49 @@ )); } - @if not(index($exclude, 'igx-overlay')) { - @include igx-overlay(igx-overlay-theme($schema: $schema)); + @if is-used('igx-overlay', $exclude) { + @include igx-overlay(igx-overlay-theme( + $schema: $schema + )); } - @if not(index($exclude, 'igx-paginator')) { - @include igx-paginator(igx-paginator-theme($schema: $schema)); + @if is-used('igx-paginator', $exclude) { + @include igx-paginator(igx-paginator-theme( + $schema: $schema + )); } - @if not(index($exclude, 'igx-circular-bar')) { - @include igx-progress-circular(igx-progress-circular-theme($schema: $schema)); + @if is-used('igx-circular-bar', $exclude) { + @include igx-progress-circular(igx-progress-circular-theme( + $schema: $schema + )); } - @if not(index($exclude, 'igx-linear-bar')) { - @include igx-progress-linear(igx-progress-linear-theme($schema: $schema)); + @if is-used('igx-linear-bar', $exclude) { + @include igx-progress-linear(igx-progress-linear-theme( + $schema: $schema + )); } - @if not(index($exclude, 'igx-radio')) { - @include igx-radio(igx-radio-theme($schema: $schema)); + @if is-used('igx-radio', $exclude) { + @include igx-radio(igx-radio-theme( + $schema: $schema + )); } - @if not(index($exclude, 'igx-scrollbar')) { - @include igx-scrollbar(igx-scrollbar-theme($schema: $schema)); + @if is-used('igx-scrollbar', $exclude) { + @include igx-scrollbar(igx-scrollbar-theme( + $schema: $schema + )); } - @if not(index($exclude, 'igx-slider')) { - @include igx-slider(igx-slider-theme($schema: $schema)); + @if is-used('igx-slider', $exclude) { + @include igx-slider(igx-slider-theme( + $schema: $schema + )); } - @if not(index($exclude, 'igx-snackbar')) { + @if is-used('igx-snackbar', $exclude) { @include igx-snackbar(igx-snackbar-theme( $schema: $schema, $border-radius: $roundness, @@ -434,7 +407,7 @@ )); } - @if not(index($exclude, 'igx-switch')) { + @if is-used('igx-switch', $exclude) { @include igx-switch(igx-switch-theme( $schema: $schema, $border-radius-track: $roundness, @@ -446,32 +419,34 @@ )); } - @if not(index($exclude, 'igx-stepper')) { - @include igx-stepper(igx-stepper-theme($schema: $schema)); - } - - @if not(index($exclude, 'igx-tabs')) { + @if is-used('igx-tabs', $exclude) { @include igx-tabs(igx-tabs-theme( $schema: $schema, $disable-shadow: if($elevation == false, true, false), )); } - @if not(index($exclude, 'igx-toast')) { + @if is-used('igx-stepper', $exclude) { + @include igx-stepper(igx-stepper-theme( + $schema: $schema, + )); + } + + @if is-used('igx-toast', $exclude) { @include igx-toast(igx-toast-theme( $schema: $schema, $border-radius: $roundness, )); } - @if not(index($exclude, 'igx-tooltip')) { + @if is-used('igx-tooltip', $exclude) { @include igx-tooltip(igx-tooltip-theme( $schema: $schema, $border-radius: $roundness, )); } - @if not(index($exclude, 'igx-time-picker')) { + @if is-used('igx-time-picker', $exclude) { @include igx-time-picker(igx-time-picker-theme( $schema: $schema, $border-radius: $roundness, @@ -481,29 +456,30 @@ )); } - @if not(index($exclude, 'igx-tree')) { + @if is-used('igx-tree', $exclude) { @include igx-tree(igx-tree-theme( - $palette: $palette, $schema: $schema, )); } - @if not(index($exclude, 'igx-watermark')) { + @if is-used('igx-watermark', $exclude) { @include igx-watermark(igx-watermark-theme( $schema: $schema, $border-radius: $roundness, )); } + + @if list.length($dropped-themes) > 0 { + @warn string.unquote('You have excluded the following components from the theme: "#{$dropped-themes}".'); + } } /// Creates a global material theme that can be used with light backgrounds. /// @param {Map} $palette - An igx-palette to be used by the global theme. /// @param {List} $exclude [( )] - A list of igx components to be excluded from the global theme styles. -/// @param {Boolean} $legacy-support [false] - If set to true, it turns on support for IE11, i.e. css variables are not used in the generated component themes. @mixin igx-light-theme( $palette, $exclude: (), - $legacy-support: false, $roundness: null, $elevation: true, ) { @@ -524,7 +500,6 @@ @include igx-theme( $palette: $light-palette, $schema: $light-schema, - $legacy-support: $legacy-support, $exclude: $exclude, $roundness: $roundness, $elevation: $elevation, @@ -534,11 +509,9 @@ /// Creates a global material theme that can be used with dark backgrounds. /// @param {Map} $palette - An igx-palette to be used by the global theme. /// @param {List} $exclude [( )] - A list of igx components to be excluded from the global theme styles. -/// @param {Boolean} $legacy-support [false] - If set to true, it turns on support for IE11, i.e. css variables are not used in the generated component themes. @mixin igx-dark-theme( $palette, $exclude: (), - $legacy-support: false, $roundness: null, $elevation: true, ) { @@ -559,7 +532,6 @@ @include igx-theme( $palette: $dark-palette, $schema: $dark-schema, - $legacy-support: $legacy-support, $exclude: $exclude, $roundness: $roundness, $elevation: $elevation, @@ -569,11 +541,9 @@ /// Creates a global fluent theme that can be used with light backgrounds. /// @param {Map} $palette - An igx-palette to be used by the global theme. /// @param {List} $exclude [( )] - A list of igx components to be excluded from the global theme styles. -/// @param {Boolean} $legacy-support [false] - If set to true, it turns on support for IE11, i.e. css variables are not used in the generated component themes. @mixin igx-fluent-light-theme( $palette, $exclude: (), - $legacy-support: false, $roundness: null, $elevation: true, ) { @@ -589,7 +559,6 @@ $grays: #000 ), $schema: $light-fluent-schema, - $legacy-support: $legacy-support, $exclude: $exclude, $roundness: $roundness, $elevation: $elevation, @@ -599,11 +568,9 @@ /// Creates a global fluent theme that can be used with dark backgrounds. /// @param {Map} $palette - An igx-palette to be used by the global theme. /// @param {List} $exclude [( )] - A list of igx components to be excluded from the global theme styles. -/// @param {Boolean} $legacy-support [false] - If set to true, it turns on support for IE11, i.e. css variables are not used in the generated component themes. @mixin igx-fluent-dark-theme( $palette, $exclude: (), - $legacy-support: false, $roundness: null, $elevation: true, ) { @@ -619,7 +586,6 @@ $grays: #fff ), $schema: $dark-fluent-schema, - $legacy-support: $legacy-support, $exclude: $exclude, $roundness: $roundness, $elevation: $elevation, @@ -630,11 +596,9 @@ /// Creates a global bootstrap-like theme that can be used with light backgrounds. /// @param {Map} $palette - An igx-palette to be used by the global theme. /// @param {List} $exclude [( )] - A list of igx components to be excluded from the global theme styles. -/// @param {Boolean} $legacy-support [false] - If set to true, it turns on support for IE11, i.e. css variables are not used in the generated component themes. @mixin igx-bootstrap-light-theme( $palette, $exclude: (), - $legacy-support: false, $roundness: null, $elevation: true, ) { @@ -650,7 +614,6 @@ $grays: #212529 ), $schema: $light-bootstrap-schema, - $legacy-support: $legacy-support, $exclude: $exclude, $roundness: $roundness, $elevation: $elevation, @@ -660,11 +623,9 @@ /// Creates a global bootstrap-like theme that can be used with dark backgrounds. /// @param {Map} $palette - An igx-palette to be used by the global theme. /// @param {List} $exclude [( )] - A list of igx components to be excluded from the global theme styles. -/// @param {Boolean} $legacy-support [false] - If set to true, it turns on support for IE11, i.e. css variables are not used in the generated component themes. @mixin igx-bootstrap-dark-theme( $palette, $exclude: (), - $legacy-support: false, $roundness: null, $elevation: true, ) { @@ -680,7 +641,6 @@ $grays: #fff ), $schema: $dark-bootstrap-schema, - $legacy-support: $legacy-support, $exclude: $exclude, $roundness: $roundness, $elevation: $elevation, @@ -690,11 +650,9 @@ /// Creates a global indigo theme that can be used with light backgrounds. /// @param {Map} $palette - An igx-palette to be used by the global theme. /// @param {List} $exclude [( )] - A list of igx components to be excluded from the global theme styles. -/// @param {Boolean} $legacy-support [false] - If set to true, it turns on support for IE11, i.e. css variables are not used in the generated component themes. @mixin igx-indigo-light-theme( $palette, $exclude: (), - $legacy-support: false, $roundness: null, $elevation: true, ) { @@ -710,7 +668,6 @@ $grays: #060716, ), $schema: $light-indigo-schema, - $legacy-support: $legacy-support, $exclude: $exclude, $roundness: $roundness, $elevation: $elevation, @@ -720,11 +677,9 @@ /// Creates a global indigo theme that can be used with dark backgrounds. /// @param {Map} $palette - An igx-palette to be used by the global theme. /// @param {List} $exclude [( )] - A list of igx components to be excluded from the global theme styles. -/// @param {Boolean} $legacy-support [false] - If set to true, it turns on support for IE11, i.e. css variables are not used in the generated component themes. @mixin igx-indigo-dark-theme( $palette, $exclude: (), - $legacy-support: false, $roundness: null, $elevation: true, ) { @@ -740,7 +695,6 @@ $grays: #fff ), $schema: $dark-indigo-schema, - $legacy-support: $legacy-support, $exclude: $exclude, $roundness: $roundness, $elevation: $elevation, diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/_palettes.scss b/projects/igniteui-angular/src/lib/core/styles/themes/_palettes.scss index 6a2e1f91bd7..b20b7304921 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/_palettes.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/_palettes.scss @@ -1,3 +1,5 @@ +@use '../base/utilities/functions' as *; + //// /// @group palettes /// @author Simeon Simeonoff @@ -353,7 +355,7 @@ $dark-bootstrap-palette: $bootstrap-dark-palette; $light-indigo-palette: igx-palette( $primary: #3f51b5, $secondary: #3f51b5, - $grays: #060716, + $grays: hsl(236, 8%, 5%), $surface: #fff, $info: #9208bc, $success: #689f38, @@ -382,7 +384,7 @@ $dark-indigo-palette: igx-palette( $warn: igx-color($light-indigo-palette, 'warn'), $error: igx-color($light-indigo-palette, 'error'), $surface: #2a2b2f, - $grays: #f8f4ff, + $grays: hsl(262, 8%, 98%), $variant: 'indigo-design' ) !default; diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/_utilities.scss b/projects/igniteui-angular/src/lib/core/styles/themes/_utilities.scss index 02b91022800..160ecd7b84a 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/_utilities.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/_utilities.scss @@ -1,4 +1,4 @@ -@import '../base/index'; -@import '../typography/index'; -@import './schemas/index'; -@import './palettes'; +@forward '../base'; +@forward '../typography'; +@forward 'schemas'; +@forward 'palettes'; diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/presets/igniteui-angular-dark-rtl.scss b/projects/igniteui-angular/src/lib/core/styles/themes/presets/igniteui-angular-dark-rtl.scss index 5806f8d440a..5c548fbe7e7 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/presets/igniteui-angular-dark-rtl.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/presets/igniteui-angular-dark-rtl.scss @@ -1,4 +1,4 @@ -@import '../index'; +@use '../../themes' as *; @include igx-core($direction: rtl); @include igx-typography($font-family: $material-typeface, $type-scale: $material-type-scale); diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/presets/igniteui-angular-dark.scss b/projects/igniteui-angular/src/lib/core/styles/themes/presets/igniteui-angular-dark.scss index aabb3cfe574..97835d45ab1 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/presets/igniteui-angular-dark.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/presets/igniteui-angular-dark.scss @@ -1,4 +1,4 @@ -@import '../index'; +@use '../../themes' as *; @include igx-core(); @include igx-typography($font-family: $material-typeface, $type-scale: $material-type-scale); diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/presets/igniteui-angular-rtl.scss b/projects/igniteui-angular/src/lib/core/styles/themes/presets/igniteui-angular-rtl.scss index dfbeb24717e..280fb46df57 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/presets/igniteui-angular-rtl.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/presets/igniteui-angular-rtl.scss @@ -1,4 +1,4 @@ -@import '../index'; +@use '../../themes' as *; @include igx-core($direction: rtl); @include igx-typography($font-family: $material-typeface, $type-scale: $material-type-scale); diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/presets/igniteui-angular.scss b/projects/igniteui-angular/src/lib/core/styles/themes/presets/igniteui-angular.scss index 94dceeef922..8c10fcf9dd1 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/presets/igniteui-angular.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/presets/igniteui-angular.scss @@ -1,4 +1,4 @@ -@import '../index'; +@use '../../themes' as *; @include igx-core(); @include igx-typography($font-family: $material-typeface, $type-scale: $material-type-scale); diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/presets/igniteui-bootstrap-dark-rtl.scss b/projects/igniteui-angular/src/lib/core/styles/themes/presets/igniteui-bootstrap-dark-rtl.scss index 218133f4021..a6cc00e5b31 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/presets/igniteui-bootstrap-dark-rtl.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/presets/igniteui-bootstrap-dark-rtl.scss @@ -1,4 +1,4 @@ -@import '../index'; +@use '../../themes' as *; @include igx-core($direction: rtl); @include igx-typography($font-family: $bootstrap-typeface, $type-scale: $bootstrap-type-scale); diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/presets/igniteui-bootstrap-dark.scss b/projects/igniteui-angular/src/lib/core/styles/themes/presets/igniteui-bootstrap-dark.scss index e9ac481fa16..816b19ab9c5 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/presets/igniteui-bootstrap-dark.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/presets/igniteui-bootstrap-dark.scss @@ -1,4 +1,4 @@ -@import '../index'; +@use '../../themes' as *; @include igx-core(); @include igx-typography($font-family: $bootstrap-typeface, $type-scale: $bootstrap-type-scale); diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/presets/igniteui-bootstrap-light-rtl.scss b/projects/igniteui-angular/src/lib/core/styles/themes/presets/igniteui-bootstrap-light-rtl.scss index 2612fdd6ec0..d7d22743118 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/presets/igniteui-bootstrap-light-rtl.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/presets/igniteui-bootstrap-light-rtl.scss @@ -1,4 +1,4 @@ -@import '../index'; +@use '../../themes' as *; @include igx-core($direction: rtl); @include igx-typography($font-family: $bootstrap-typeface, $type-scale: $bootstrap-type-scale); diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/presets/igniteui-bootstrap-light.scss b/projects/igniteui-angular/src/lib/core/styles/themes/presets/igniteui-bootstrap-light.scss index e61c4df6d72..a2eb21454de 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/presets/igniteui-bootstrap-light.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/presets/igniteui-bootstrap-light.scss @@ -1,4 +1,4 @@ -@import '../index'; +@use '../../themes' as *; @include igx-core(); @include igx-typography($font-family: $bootstrap-typeface, $type-scale: $bootstrap-type-scale); diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/presets/igniteui-dark-green-rtl.scss b/projects/igniteui-angular/src/lib/core/styles/themes/presets/igniteui-dark-green-rtl.scss index 2c3331dffe3..18d38cc134a 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/presets/igniteui-dark-green-rtl.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/presets/igniteui-dark-green-rtl.scss @@ -1,4 +1,4 @@ -@import '../index'; +@use '../../themes' as *; @include igx-core($direction: rtl); @include igx-typography($font-family: $material-typeface, $type-scale: $material-type-scale); diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/presets/igniteui-dark-green.scss b/projects/igniteui-angular/src/lib/core/styles/themes/presets/igniteui-dark-green.scss index 963376bfa7f..b3188b9731c 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/presets/igniteui-dark-green.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/presets/igniteui-dark-green.scss @@ -1,4 +1,4 @@ -@import '../index'; +@use '../../themes' as *; @include igx-core(); @include igx-typography($font-family: $material-typeface, $type-scale: $material-type-scale); diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/presets/igniteui-fluent-dark-excel-rtl.scss b/projects/igniteui-angular/src/lib/core/styles/themes/presets/igniteui-fluent-dark-excel-rtl.scss index d36731f1cbf..39cd0e9b992 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/presets/igniteui-fluent-dark-excel-rtl.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/presets/igniteui-fluent-dark-excel-rtl.scss @@ -1,4 +1,4 @@ -@import '../index'; +@use '../../themes' as *; @include igx-core($direction: rtl); @include igx-typography($font-family: $fluent-typeface, $type-scale: $fluent-type-scale); diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/presets/igniteui-fluent-dark-excel.scss b/projects/igniteui-angular/src/lib/core/styles/themes/presets/igniteui-fluent-dark-excel.scss index 84350f08d0c..b4bb0e70034 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/presets/igniteui-fluent-dark-excel.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/presets/igniteui-fluent-dark-excel.scss @@ -1,4 +1,4 @@ -@import '../index'; +@use '../../themes' as *; @include igx-core(); @include igx-typography($font-family: $fluent-typeface, $type-scale: $fluent-type-scale); diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/presets/igniteui-fluent-dark-word-rtl.scss b/projects/igniteui-angular/src/lib/core/styles/themes/presets/igniteui-fluent-dark-word-rtl.scss index da9b13adfa4..66ddf18c9bd 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/presets/igniteui-fluent-dark-word-rtl.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/presets/igniteui-fluent-dark-word-rtl.scss @@ -1,4 +1,4 @@ -@import '../index'; +@use '../../themes' as *; @include igx-core($direction: rtl); @include igx-typography($font-family: $fluent-typeface, $type-scale: $fluent-type-scale); diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/presets/igniteui-fluent-dark-word.scss b/projects/igniteui-angular/src/lib/core/styles/themes/presets/igniteui-fluent-dark-word.scss index 29f9722c252..af158ff9c93 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/presets/igniteui-fluent-dark-word.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/presets/igniteui-fluent-dark-word.scss @@ -1,4 +1,4 @@ -@import '../index'; +@use '../../themes' as *; @include igx-core(); @include igx-typography($font-family: $fluent-typeface, $type-scale: $fluent-type-scale); diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/presets/igniteui-fluent-light-excel-rtl.scss b/projects/igniteui-angular/src/lib/core/styles/themes/presets/igniteui-fluent-light-excel-rtl.scss index 90e5a64ffc1..44967ddf22e 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/presets/igniteui-fluent-light-excel-rtl.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/presets/igniteui-fluent-light-excel-rtl.scss @@ -1,4 +1,4 @@ -@import '../index'; +@use '../../themes' as *; @include igx-core($direction: rtl); @include igx-typography($font-family: $fluent-typeface, $type-scale: $fluent-type-scale); diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/presets/igniteui-fluent-light-excel.scss b/projects/igniteui-angular/src/lib/core/styles/themes/presets/igniteui-fluent-light-excel.scss index 58e5812b267..8b3cc430d1c 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/presets/igniteui-fluent-light-excel.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/presets/igniteui-fluent-light-excel.scss @@ -1,4 +1,4 @@ -@import '../index'; +@use '../../themes' as *; @include igx-core(); @include igx-typography($font-family: $fluent-typeface, $type-scale: $fluent-type-scale); diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/presets/igniteui-fluent-light-word-rtl.scss b/projects/igniteui-angular/src/lib/core/styles/themes/presets/igniteui-fluent-light-word-rtl.scss index c11b32ef628..517375c96fc 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/presets/igniteui-fluent-light-word-rtl.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/presets/igniteui-fluent-light-word-rtl.scss @@ -1,4 +1,4 @@ -@import '../index'; +@use '../../themes' as *; @include igx-core($direction: rtl); @include igx-typography($font-family: $fluent-typeface, $type-scale: $fluent-type-scale); diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/presets/igniteui-fluent-light-word.scss b/projects/igniteui-angular/src/lib/core/styles/themes/presets/igniteui-fluent-light-word.scss index 0772f7eecee..590269b4504 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/presets/igniteui-fluent-light-word.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/presets/igniteui-fluent-light-word.scss @@ -1,4 +1,4 @@ -@import '../index'; +@use '../../themes' as *; @include igx-core(); @include igx-typography($font-family: $fluent-typeface, $type-scale: $fluent-type-scale); diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/presets/igniteui-indigo-dark-rtl.scss b/projects/igniteui-angular/src/lib/core/styles/themes/presets/igniteui-indigo-dark-rtl.scss index f0219048bb0..aecc06d2c01 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/presets/igniteui-indigo-dark-rtl.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/presets/igniteui-indigo-dark-rtl.scss @@ -1,4 +1,4 @@ -@import '../index'; +@use '../../themes' as *; @include igx-core($direction: rtl); @include igx-typography($font-family: $indigo-typeface, $type-scale: $indigo-type-scale); diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/presets/igniteui-indigo-dark.scss b/projects/igniteui-angular/src/lib/core/styles/themes/presets/igniteui-indigo-dark.scss index 382504b9103..58b25edb820 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/presets/igniteui-indigo-dark.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/presets/igniteui-indigo-dark.scss @@ -1,4 +1,4 @@ -@import '../index'; +@use '../../themes' as *; @include igx-core(); @include igx-typography($font-family: $indigo-typeface, $type-scale: $indigo-type-scale); diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/presets/igniteui-indigo-light-rtl.scss b/projects/igniteui-angular/src/lib/core/styles/themes/presets/igniteui-indigo-light-rtl.scss index d730e3a4ddc..8616c9ce15b 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/presets/igniteui-indigo-light-rtl.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/presets/igniteui-indigo-light-rtl.scss @@ -1,4 +1,4 @@ -@import '../index'; +@use '../../themes' as *; @include igx-core($direction: rtl); @include igx-typography($font-family: $indigo-typeface, $type-scale: $indigo-type-scale); diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/presets/igniteui-indigo-light.scss b/projects/igniteui-angular/src/lib/core/styles/themes/presets/igniteui-indigo-light.scss index c5df8cc1293..cb6a066bbd3 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/presets/igniteui-indigo-light.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/presets/igniteui-indigo-light.scss @@ -1,4 +1,4 @@ -@import '../index'; +@use '../../themes' as *; @include igx-core(); @include igx-typography($font-family: $indigo-typeface, $type-scale: $indigo-type-scale); diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/_index.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/_index.scss index 9e42b6f3db4..82b76fbc4ff 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/_index.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/_index.scss @@ -1,4 +1,4 @@ -@import './light/index'; -@import './square-light/index'; -@import './round-light/index'; -@import './dark/index'; +@forward 'light'; +@forward 'dark'; +@forward 'square-light'; +@forward 'round-light'; diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_action-strip.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_action-strip.scss index b62eab95dc4..a954a3179f6 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_action-strip.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_action-strip.scss @@ -1,4 +1,5 @@ -@import '../light/action-strip'; +@use '../../../base' as *; +@use '../light/action-strip' as *; //// /// @group schemas @@ -8,29 +9,17 @@ /// Generates a dark action-strip schema. /// @type {Map} -/// @property {Map} actions-background [igx-color: ('grays', 200), to-opaque: #000, rgba: .8]- actions container background. /// @requires {function} extend -/// @requires $_light-action-strip +/// @requires $light-action-strip /// @see $default-palette -$_dark-action-strip: extend( - $_light-action-strip, - ( - variant: 'material', - - actions-background: ( - igx-color: ('grays', 200), - to-opaque: #222, - rgba: .8 - ), - ) -); +$dark-action-strip: $light-action-strip; /// Generates a dark fluent action strip schema. /// @type {Map} /// @requires {function} extend -/// @requires $_dark-action-strip -$_dark-fluent-action-strip: extend( - $_dark-action-strip, +/// @requires $dark-action-strip +$dark-fluent-action-strip: extend( + $dark-action-strip, ( variant: 'fluent' ) @@ -39,9 +28,9 @@ $_dark-fluent-action-strip: extend( /// Generates a dark bootstrap action strip schema. /// @type {Map} /// @requires {function} extend -/// @requires $_dark-action-strip -$_dark-bootstrap-action-strip: extend( - $_dark-action-strip, +/// @requires $dark-action-strip +$dark-bootstrap-action-strip: extend( + $dark-action-strip, ( variant: 'bootstrap' ) @@ -50,5 +39,5 @@ $_dark-bootstrap-action-strip: extend( /// Generates a dark indigo action strip schema. /// @type {Map} /// @requires {function} extend -/// @requires $_indigo-action-strip -$_dark-indigo-action-strip: extend($_indigo-action-strip); +/// @requires $indigo-action-strip +$dark-indigo-action-strip: extend($indigo-action-strip); diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_avatar.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_avatar.scss index 29a87974f7e..28764de4146 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_avatar.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_avatar.scss @@ -1,4 +1,5 @@ -@import '../light/avatar'; +@use '../light/avatar' as *; + //// /// @group schemas /// @access public @@ -7,25 +8,24 @@ /// Generates a dark avatar schema. /// @type {Map} -/// @requires {function} extend -/// @requires $_light-avatar +/// @requires $light-avatar /// @see $default-palette -$_dark-avatar: extend($_light-avatar); +$dark-avatar: $light-avatar; /// Generates a dark fluent avatar schema. /// @type {Map} /// @requires {function} extend -/// @requires $_fluent-avatar -$_dark-fluent-avatar: extend($_fluent-avatar); +/// @requires $fluent-avatar +$dark-fluent-avatar: $fluent-avatar; /// Generates a dark bootstrap avatar schema. /// @type {Map} /// @requires {function} extend -/// @requires $_bootstrap-avatar -$_dark-bootstrap-avatar: extend($_bootstrap-avatar); +/// @requires $bootstrap-avatar +$dark-bootstrap-avatar: $bootstrap-avatar; /// Generates a dark indigo avatar schema. /// @type {Map} /// @requires {function} extend -/// @requires $_indigo-avatar -$_dark-indigo-avatar: extend($_indigo-avatar); +/// @requires $indigo-avatar +$dark-indigo-avatar: $indigo-avatar; diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_badge.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_badge.scss index ebbec1d1b12..fa4f6ea8494 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_badge.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_badge.scss @@ -1,4 +1,4 @@ -@import '../light/badge'; +@use '../light/badge' as *; //// /// @group schemas @@ -9,24 +9,24 @@ /// Generates a dark badge schema. /// @type {Map} /// @requires {function} extend -/// @requires $_light-badge +/// @requires $light-badge /// @see $default-palette -$_dark-badge: extend($_light-badge); +$dark-badge: $light-badge; /// Generates a dark fluent badge schema. /// @type {Map} /// @requires {function} extend -/// @requires $_fluent-badge -$_dark-fluent-badge: extend($_fluent-badge); +/// @requires $fluent-badge +$dark-fluent-badge: $fluent-badge; /// Generates a dark bootstrap badge schema. /// @type {Map} /// @requires {function} extend -/// @requires $_bootstrap-badge -$_dark-bootstrap-badge: extend($_bootstrap-badge); +/// @requires $bootstrap-badge +$dark-bootstrap-badge: $bootstrap-badge; /// Generates a dark indigo badge schema. /// @type {Map} /// @requires {function} extend -/// @requires $_indigo-badge -$_dark-indigo-badge: extend($_indigo-badge); +/// @requires $indigo-badge +$dark-indigo-badge: $indigo-badge; diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_banner.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_banner.scss index c8499a3c356..f3d9d76c109 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_banner.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_banner.scss @@ -1,4 +1,6 @@ -@import '../light/banner'; +@use '../../../base' as *; +@use '../light/banner' as *; + //// /// @group schemas /// @access public @@ -7,31 +9,22 @@ /// Generates a dark banner schema. /// @type {Map} -/// @requires {function} extend -/// @requires $_light-banner +/// @requires $light-banner /// @see $default-palette -$_dark-banner: extend($_light-banner); +$dark-banner: $light-banner; /// Generates a dark fluent banner schema. /// @type {Map} -/// @requires {function} extend -/// @requires $_fluent-banner -$_dark-fluent-banner: extend($_fluent-banner); +/// @requires $fluent-banner +$dark-fluent-banner: $fluent-banner; /// Generates a dark bootstrap banner schema. /// @type {Map} -/// @property {Map} banner-background [#333]- The background color used banner background. /// @requires {function} extend -/// @requires $_bootstrap-banner -$_dark-bootstrap-banner: extend( - $_bootstrap-banner, - ( - banner-background: #333, - ) -); +/// @requires $bootstrap-banner +$dark-bootstrap-banner: $bootstrap-banner; /// Generates a dark indigo banner schema. /// @type {Map} -/// @requires {function} extend -/// @requires $_indigo-banner -$_dark-indigo-banner: extend($_indigo-banner); +/// @requires $indigo-banner +$dark-indigo-banner: $indigo-banner; diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_bottom-nav.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_bottom-nav.scss index 651fe4f15f2..2cc9be4e007 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_bottom-nav.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_bottom-nav.scss @@ -1,4 +1,6 @@ -@import '../light/bottom-nav'; +@use '../../../base' as *; +@use '../light/bottom-nav' as *; + //// /// @group schemas /// @access public @@ -7,56 +9,52 @@ /// Generates the base dark bottom-nav schema. /// @type {Map} -/// @prop {Color} background [#222] - The background color used for the bottom-nav. -$_base-dark-bottom-nav: ( - background: #222 -); +$base-dark-bottom-nav: $light-bottom-nav; -/// Generates a dark bottom-nav schema based on a mix of $_light-bottom-nav and $_base-dark-bottom-nav +/// Generates a dark bottom-nav schema based on a mix of $light-bottom-nav and $base-dark-bottom-nav /// @type {Map} /// @requires {function} extend -/// @requires $_light-bottom-nav -/// @requires $_base-dark-bottom-nav +/// @requires $light-bottom-nav +/// @requires $base-dark-bottom-nav /// @see $default-palette -$_dark-bottom-nav: extend($_light-bottom-nav, $_base-dark-bottom-nav); +$dark-bottom-nav: extend($light-bottom-nav, $base-dark-bottom-nav); -/// Generates a dark fluent bottom-nav schema based on a mix of $_fluent-bottom-nav and $_base-dark-bottom-nav +/// Generates a dark fluent bottom-nav schema based on a mix of $fluent-bottom-nav and $base-dark-bottom-nav /// @type {Map} /// @requires {function} extend -/// @requires $_fluent-bottom-nav -/// @requires $_base-dark-bottom-nav -$_dark-fluent-bottom-nav: extend($_fluent-bottom-nav, $_base-dark-bottom-nav); +/// @requires $fluent-bottom-nav +/// @requires $base-dark-bottom-nav +$dark-fluent-bottom-nav: extend($fluent-bottom-nav, $base-dark-bottom-nav); -/// Generates a dark bootstrap bottom-nav schema based on a mix of $_bootstrap-bottom-nav and $_base-dark-bottom-nav +/// Generates a dark bootstrap bottom-nav schema based on a mix of $bootstrap-bottom-nav and $base-dark-bottom-nav /// @type {Map} /// @requires {function} extend -/// @requires $_bootstrap-bottom-nav -/// @requires $_base-dark-bottom-nav -$_dark-bootstrap-bottom-nav: extend($_bootstrap-bottom-nav, $_base-dark-bottom-nav); +/// @requires $bootstrap-bottom-nav +/// @requires $base-dark-bottom-nav +$dark-bootstrap-bottom-nav: extend($bootstrap-bottom-nav, $base-dark-bottom-nav); -/// Generates a dark indigo bottom-nav schema based on a mix of $_indigo-bottom-nav and $_base-dark-bottom-nav +/// Generates a dark indigo bottom-nav schema based on a mix of $indigo-bottom-nav and $base-dark-bottom-nav /// @type {Map} /// @prop {Map} background [igx-color: 'surface'] - The background color used for the bottom-nav. -/// @prop {Color} active-item-color [igx-contrast-color: 'surface'] - The text-color used for the active color. -/// @prop {Map} idle-item-color [igx-contrast-color: 'surface', rgba: .6] - The text-color used for the idle color. +/// @prop {Color} active-item-color [igx-color: ('grays', 700)] - The text-color used for the active color. +/// @prop {Map} idle-item-color [igx-color: ('grays', 400)] - The text-color used for the idle color. /// @requires {function} extend -/// @requires $_indigo-bottom-nav -/// @requires $_base-dark-bottom-nav -$_dark-indigo-bottom-nav: extend( - $_indigo-bottom-nav, - $_base-dark-bottom-nav, +/// @requires $indigo-bottom-nav +/// @requires $base-dark-bottom-nav +$dark-indigo-bottom-nav: extend( + $indigo-bottom-nav, + $base-dark-bottom-nav, ( background: ( igx-color: 'surface', ), active-item-color:( - igx-contrast-color: 'surface', + igx-color: ('grays', 700) ), idle-item-color: ( - igx-contrast-color: 'surface', - rgba: .6 + igx-color: ('grays', 400) ), ) ); diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_button-group.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_button-group.scss index ac392f86e0c..d2dacc306d5 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_button-group.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_button-group.scss @@ -1,4 +1,6 @@ -@import '../light/button-group'; +@use '../../../base' as *; +@use '../light/button-group' as *; + //// /// @group schemas /// @access public @@ -8,116 +10,126 @@ /// Generates the base dark button-group schema. /// @type {Map} -/// @prop {Color} item-background [#222] - The background color for button group items. -/// @prop {Map} item-border-color [igx-color: ('grays', 400), to-opaque: #222] - The border color for button group items. -/// @prop {Map} item-selected-border-color [igx-color: ('grays', 500), to-opaque: #222] - The border color for button group selected items. -/// @prop {Map} item-disabled-border: [igx-color: ('grays', 400), to-opaque: #222] - The border color for button group disabled items. -$_base-dark-button-group: ( - item-background: #222, +/// @prop {Map} item-disabled-border [igx-color: ('grays', 100)] - The border color for a disabled item in the button group. +/// @prop {Map} item-border-color [igx-color: ('grays', 100)] - The border color between button group items. +/// @prop {Map} item-hover-background [igx-color: ('grays', 100), .8] - The hover background color for button group items. +/// @prop {Map} item-selected-background [igx-color: ('grays', 200)] - The background color for a selected item in the button group. +/// @prop {Map} item-selected-hover-background [igx-color: ('grays', 300, .8)] - The background color for a selected item in hover or focus state in the button group. +/// @prop {Map} item-selected-border-color [igx-color: ('grays', 300)] - The border color for button group selected items. +$base-dark-button-group: ( + item-hover-background: ( + igx-color: ('grays', 100, .8) + ), - item-border-color: ( - igx-color: ('grays', 400), - to-opaque: (#222) + item-selected-background: ( + igx-color: ('grays', 200) + ), + + item-selected-hover-background: ( + igx-color: ('grays', 300, .8) ), item-selected-border-color: ( - igx-color: ('grays', 500), - to-opaque: (#222) + igx-color: ('grays', 300), + ), + + item-border-color: ( + igx-color: ('grays', 100), ), item-disabled-border: ( - igx-color: ('grays', 400), - to-opaque: (#222) + igx-color: ('grays', 100), ), ); -/// Generates a dark button-group schema based on a mix of $_light-button-group and $_base-dark-button-group +/// Generates a dark button-group schema based on a mix of $light-button-group and $base-dark-button-group /// @type {Map} /// @requires {function} extend -/// @requires $_light-button-group -/// @requires $_base-dark-button-group +/// @requires $light-button-group +/// @requires $base-dark-button-group /// @see $default-palette -$_dark-button-group: extend($_light-button-group, $_base-dark-button-group); +$dark-button-group: extend($light-button-group, $base-dark-button-group); -/// Generates a dark fluent button-group schema based on a mix of $_fluent-button-group and $_base-dark-button-group +/// Generates a dark fluent button-group schema based on a mix of $fluent-button-group and $base-dark-button-group /// @type {Map} /// -/// @prop {Map} item-border-color [igx-color: ('grays', 100), to-opaque: #000] - The border color for button group items. -/// @prop {Map} item-selected-border-color [igx-color: ('grays', 100), to-opaque: #000] - The border color for button group selected items. -/// @prop {Map} item-disabled-border: [igx-color: ('grays', 100), to-opaque: #000] - The border color for button group disabled items. +/// @prop {Map} item-border-color [igx-color: ('grays', 100)] - The border color for button group items. +/// @prop {Map} item-selected-border-color [igx-color: ('grays', 100)] - The border color for button group selected items. +/// @prop {Map} item-disabled-border: [igx-color: ('grays', 100)] - The border color for button group disabled items. /// @prop {Map} item-text-color [igx-color: ('grays', 900)] - The text color for button group items. /// @prop {Map} item-hover-text-color [igx-color: ('primary', 200)] - The text color for button group items on hover. -/// @prop {Color} item-hover-background [#222] - The background color for button group items on hover. -/// @prop {Map} item-selected-background [igx-color: ('grays', 100)] - The background color for button group selected items. -/// @prop {Map} item-selected-hover-background [igx-color: ('grays', 100)] - The background color for button group selected items on hover. +/// @prop {Color} item-hover-background [igx-color: ('grays', 50)] - The background color for button group items on hover. +/// @prop {Map} item-selected-background [igx-color: ('grays', 100, .5)] - The background color for button group selected items. +/// @prop {Map} item-selected-hover-background [igx-color: ('grays', 100, .5)] - The background color for button group selected items on hover. /// @prop {Map} item-selected-text-color [igx-color: ('primary', 200)] - The text color for button group selected items. -/// @prop {Color} disabled-background-color [#222] - The background color for button group disabled items. +/// @prop {Color} disabled-background-color [igx-color: ('grays', 50)] - The background color for button group disabled items. /// /// @requires {function} extend -/// @requires $_fluent-button-group -/// @requires $_base-dark-button-group -$_dark-fluent-button-group: extend( - $_fluent-button-group, - $_base-dark-button-group, +/// @requires $fluent-button-group +/// @requires $base-dark-button-group +$dark-fluent-button-group: extend( + $fluent-button-group, + $base-dark-button-group, ( - item-border-color: ( - igx-color: ('grays', 100), - to-opaque: #000 - ), - - item-selected-border-color: ( - igx-color: ('grays', 100), - to-opaque: #000 - ), - - item-disabled-border: ( - igx-color: ('grays', 100), - to-opaque: #000 - ), - item-text-color: ( igx-color: ('grays', 900) ), + item-selected-text-color: ( + igx-color: ('primary', 200) + ), + item-hover-text-color: ( igx-color: ('primary', 200) ), - item-hover-background: #222, + item-hover-background: ( + igx-color: ('grays', 50) + ), item-selected-background: ( - igx-color: ('grays', 100) + igx-color: ('grays', 100, .5) ), item-selected-hover-background: ( - igx-color: ('grays', 100) + igx-color: ('grays', 100, .5) ), - item-selected-text-color: ( - igx-color: ('primary', 200) + item-border-color: ( + igx-color: ('grays', 100), + ), + + item-selected-border-color: ( + igx-color: ('grays', 100), + ), + + item-disabled-border: ( + igx-color: ('grays', 100), ), - disabled-background-color: #222, + disabled-background-color: ( + igx-color: ('grays', 50) + ), ) ); -/// Generates a dark bootstrap button-group schema based on a mix of $_bootstrap-button-group +/// Generates a dark bootstrap button-group schema based on a mix of $bootstrap-button-group /// @type {Map} /// /// @requires {function} extend -/// @requires $_bootstrap-button-group -$_dark-bootstrap-button-group: extend($_bootstrap-button-group); +/// @requires $bootstrap-button-group +$dark-bootstrap-button-group: extend($bootstrap-button-group); /// Generates a dark indigo button-group schema /// @type {Map} /// @prop {Map} item-background [igx-color: ('surface')] - The background color for button group items. /// @prop {Color} item-text-color [igx-contrast-color: 'surface']- The text color for button group items. -/// @prop {Color} item-hover-text-color [#fff] - The hover text color for button group items. +/// @prop {Color} item-hover-text-color [igx-contrast-color: 'surface'] - The hover text color for button group items. /// /// @requires {function} extend -/// @requires $_indigo-button-group -$_dark-indigo-button-group: extend( - $_indigo-button-group, +/// @requires $indigo-button-group +$dark-indigo-button-group: extend( + $indigo-button-group, ( item-background: ( igx-color: ('surface') @@ -127,7 +139,9 @@ $_dark-indigo-button-group: extend( igx-contrast-color: 'surface' ), - item-hover-text-color: #fff, + item-hover-text-color: ( + igx-contrast-color: 'surface' + ), ) ); diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_button.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_button.scss index cebd92182fe..9ddbed94c71 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_button.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_button.scss @@ -1,4 +1,6 @@ -@import '../light/button'; +@use '../../../base' as *; +@use '../light/button' as *; + //// /// @group schemas /// @access public @@ -6,152 +8,371 @@ //// /// @type {Map} -/// @prop {Map} disabled-background [igx-color: ('grays', 200)] - The disabled background color of the button. -/// @requires {Map} $_material-base-button +/// @prop {Map} disabled-background [igx-color: ('grays', 100, .3)] - The disabled background color of the button. +/// @prop {Color} disabled-foreground [igx-color: ('grays', 200)] - The disabled foreground color of the button. +/// @requires {Map} $material-base-button /// @requires {function} extend -$_material-base-button-dark: extend( - $_material-base-button, +$material-base-button-dark: extend( ( disabled-background: ( + igx-color: ('grays', 100, .3) + ), + + disabled-foreground: ( igx-color: ('grays', 200) - ) + ), ) ); /// @type {Map} -/// @prop {Map} hover-background [igx-color: ('secondary', 500), rgba: .12 ] - The hover background color of a flat button. -/// @prop {Map} focus-background [igx-color: ('secondary', 400), rgba: .24] - The focus background color of a flat button. -/// @requires {Map} $_material-base-button-dark -/// @requires {Map} $_material-flat-button +/// @prop {Map} hover-background [igx-color: ('secondary', 500, .12)] - The hover background color of a flat button. +/// @prop {Map} focus-background [igx-color: ('secondary', 400, .24)] - The focus background color of a flat button. +/// @requires {Map} $material-base-button-dark +/// @requires {Map} $material-flat-button /// @requires {function} extend -$_material-flat-button-dark: extend( - $_material-base-button-dark, - $_material-flat-button, +$material-flat-button-dark: extend( + $material-flat-button, + $material-base-button-dark, ( hover-background: ( - igx-color: ('secondary', 500), - rgba: .12 + igx-color: ('secondary', 500, .12), ), focus-background: ( - igx-color: ('secondary', 400), - rgba: .24 + igx-color: ('secondary', 400, .24), ), ) ); /// @type {Map} /// @prop {Map} hover-background [igx-color: ('grays', 300)] - The hover background color of an icon button. -/// @requires {Map} $_material-base-button-dark -/// @requires {Map} $_material-icon-button +/// @requires {Map} $material-base-button-dark +/// @requires {Map} $material-icon-button /// @requires {function} extend -$_material-icon-button-dark: extend( - $_material-base-button-dark, - $_material-icon-button, +$material-icon-button-dark: extend( + $material-icon-button, + $material-base-button-dark, ( hover-background: ( - igx-color: ('grays', 300) + igx-color: ('grays', 100, .5) + ), + + focus-background: ( + igx-color: ('grays', 200, .8) + ), + ) +); + +/// @requires {Map} $material-raised-button +/// @requires {Map} $material-base-button-dark +/// @requires {function} extend +$material-raised-button-dark: extend($material-raised-button, $material-base-button-dark); + +/// @requires {Map} $material-fab-button +/// @requires {Map} $material-base-button-dark +/// @requires {function} extend +$material-fab-button-dark: extend($material-fab-button, $material-base-button-dark); + + +/// @requires {Map} $material-outlined-button +/// @requires {Map} $material-base-button-dark +/// @prop {Map} disabled-border-color [igx-color: ('grays', 100, .3)] - The disabled focused border color of the button. +/// @requires {function} extend +$material-outlined-button-dark: extend( + $material-outlined-button, + $material-base-button-dark, + ( + disabled-border-color: ( + igx-color: ('grays', 100, .3) ), ) ); /// Generates a dark material button schema. /// @type {Map} -/// @requires {Map} $_material-flat-button-dark -/// @requires {Map} $_material-outlined-button -/// @requires {Map} $_material-raised-button -/// @requires {Map} $_material-fab-button -/// @requires {Map} $_material-icon-button-dark +/// @requires {Map} $material-flat-button-dark +/// @requires {Map} $material-outlined-button +/// @requires {Map} $material-raised-button +/// @requires {Map} $material-fab-button +/// @requires {Map} $material-icon-button-dark /// @see $dark-material-palette -$_dark-button: ( - flat: $_material-flat-button-dark, - outlined: $_material-outlined-button, - raised: $_material-raised-button, - fab: $_material-fab-button, - icon: $_material-icon-button-dark, +$dark-button: ( + flat: $material-flat-button-dark, + outlined: $material-outlined-button-dark, + raised: $material-raised-button-dark, + fab: $material-fab-button-dark, + icon: $material-icon-button-dark, +); + +/// @type {Map} +/// @requires {Map} $material-base-button +/// @requires {function} extend +$fluent-base-button-dark: extend( + $fluent-base-button, + $material-base-button-dark, ); /// @prop {Map} hover-foreground [igx-color: ('primary', 200)] - The text color of a flat button on hover. -/// @requires {Map} $_fluent-flat-button +/// @prop {Map} focus-background [igx-color: ('grays', 100, .3)] - The focus background color of a flat button. +/// @requires {Map} $fluent-flat-button +/// @requires {Map} $fluent-base-button-dark /// @requires {function} extend -$_fluent-flat-button-dark: extend( - $_fluent-flat-button, +$fluent-flat-button-dark: extend( + $fluent-flat-button, + $fluent-base-button-dark, ( hover-foreground: ( igx-color: ('primary', 200) ), + + focus-background: ( + igx-color:('grays', 100, .3) + ), + ) +); + +/// @requires {Map} $fluent-raised-button +/// @requires {Map} $fluent-base-button-dark +/// @requires {function} extend +$fluent-raised-button-dark: extend($fluent-raised-button, $fluent-base-button-dark); + +/// @requires {Map} $fluent-fab-button +/// @requires {Map} $fluent-base-button-dark +/// @requires {function} extend +$fluent-fab-button-dark: extend($fluent-fab-button, $fluent-base-button-dark); + +/// @prop {Map} focus-background [igx-color: ('grays', 100, .2)] - The focus background color of a icon button. +/// @requires {Map} $fluent-icon-button +/// @requires {Map} $fluent-base-button-dark +/// @requires {function} extend +$fluent-icon-button-dark: extend( + $fluent-icon-button, + $fluent-base-button-dark, + ( + focus-background: ( + igx-color:('grays', 100, .2) + ), + ) +); + +/// @prop {Map} hover-foreground [igx-color: ('grays', 100, .3)] - The text color of a outlined button on hover. +/// @prop {Map} focus-background [igx-color: ('grays', 100, .3)] - The focus background color of a outlined button. +/// @prop {Map} border-color [igx-color: ('grays', 100)] - The border color of an outlined button. +/// @requires {Map} $fluent-outlined-button +/// @requires {Map} $fluent-base-button-dark +/// @requires {function} extend +$fluent-outlined-button-dark: extend( + $fluent-outlined-button, + $fluent-base-button-dark, + ( + focus-background: ( + igx-color:('grays', 100, .3) + ), + + hover-background: ( + igx-color:('grays', 100, .3) + ), + + border-color: ( + igx-color: ('grays', 100) + ), ) ); /// Generates a dark fluent button schema. /// @type {Map} -/// @requires {Map} $_fluent-flat-button-dark -/// @requires {Map} $_fluent-outlined-button -/// @requires {Map} $_fluent-raised-button -/// @requires {Map} $_fluent-fab-button -/// @requires {Map} $_fluent-icon-button +/// @requires {Map} $fluent-flat-button-dark +/// @requires {Map} $fluent-outlined-button +/// @requires {Map} $fluent-raised-button +/// @requires {Map} $fluent-fab-button +/// @requires {Map} $fluent-icon-button /// @see $dark-fluent-word-palette /// @see $dark-fluent-excel-palette -$_dark-fluent-button: ( - flat: $_fluent-flat-button-dark, - outlined: $_fluent-outlined-button, - raised: $_fluent-raised-button, - fab: $_fluent-fab-button, - icon: $_fluent-icon-button, +$dark-fluent-button: ( + flat: $fluent-flat-button-dark, + outlined: $fluent-outlined-button-dark, + raised: $fluent-raised-button-dark, + fab: $fluent-fab-button-dark, + icon: $fluent-icon-button-dark, ); /// @type {Map} -/// @prop {Color} disabled-foreground [igx-color: ('primary', 900)] - The disabled foreground color of the button. -/// @prop {Color} disabled-background [igx-color: ('primary', 900), darken: 5%] - The disabled background color of the button. -/// @requires {Map} $_bootstrap-base-button +/// @requires {Map} $bootstrap-base-button /// @requires {function} extend -$_bootstrap-base-button-dark: extend( - $_bootstrap-base-button, +$bootstrap-base-button-dark: extend($bootstrap-base-button); + +/// @type {Map} +/// @prop {Map} disabled-border-color [igx-color: ('primary', 900)] - The disabled border color of the button. +/// @requires {Map} $bootstrap-base-button-dark +/// @requires {Map} $bootstrap-outlined-button +/// @requires {function} extend +$bootstrap-outlined-button-dark: extend( + $bootstrap-base-button-dark, + $bootstrap-outlined-button, + ( + disabled-border-color: ( + igx-color: ('primary', 900) + ), + ) +); + +/// @type {Map} +/// @prop {Map} focus-background [igx-color: ('grays', 100, .3)] - The focus background color of a flat button. +/// @requires {Map} $bootstrap-base-button-dark +/// @requires {Map} $bootstrap-flat-button +/// @requires {function} extend +$bootstrap-flat-button-dark: extend( + $bootstrap-base-button-dark, + $bootstrap-flat-button, + ( + focus-background: ( + igx-color: ('grays', 100, .3) + ), + ) +); + + +/// Generates a dark bootstrap button schema. +/// @type {Map} +/// @requires {Map} $bootstrap-flat-button +/// @requires {Map} $bootstrap-outlined-button +/// @requires {Map} $bootstrap-raised-button +/// @requires {Map} $bootstrap-fab-button +/// @requires {Map} $bootstrap-icon-button +/// @see $dark-bootstrap-palette +$dark-bootstrap-button: ( + flat: $bootstrap-flat-button-dark, + outlined: $bootstrap-outlined-button-dark, + raised: $bootstrap-raised-button, + fab: $bootstrap-fab-button, + icon: $bootstrap-icon-button, +); + +/// @type {Map} +/// @prop {Color} disabled-foreground [igx-color: ('grays', 300)] - The disabled foreground color of the button. +/// @prop {Color} disabled-background [igx-color: ('grays', 200, .1)] - The disabled background color of the button. +/// @requires {Map} $indigo-base-button +/// @requires {function} extend +$indigo-base-button-dark: extend( ( disabled-foreground: ( - igx-color: ('primary', 900), + igx-color: ('grays', 300), ), disabled-background: ( - igx-color: ('primary', 900), - darken: 5% + igx-color: ('grays', 200, .1), + ) + ) +); + +/// @type {Map} +/// @prop {Map} foreground [igx-color: ('grays', 600, .8)] - The idle text color of a outlined button. +/// @requires {Map} $indigo-base-button-dark +/// @requires {Map} $indigo-flat-button +/// @requires {function} extend +$indigo-flat-button-dark: extend( + $indigo-flat-button, + $indigo-base-button-dark, + ( + foreground: ( + igx-color: ('grays', 600, .8), ), ) ); /// @type {Map} -/// @prop {Map} disabled-border-color [igx-color: ('primary', 900), darken: 5%] - The disabled border color of the button. -/// @requires {Map} $_bootstrap-base-button-dark -/// @requires {Map} $_bootstrap-outlined-button +/// @prop {Color} foreground [igx-color: ('grays', 900)] - The idle text color of a raised button. +/// @prop {Color} hover-foreground [igx-color: ('grays', 900)] - The hover text color of a raised button. +/// @prop {Color} focus-foreground [igx-color: ('grays', 900)] - The focus text color of a raised button. +/// @requires {Map} $indigo-base-button-dark +/// @requires {Map} $indigo-raised-button /// @requires {function} extend -$_bootstrap-outlined-button-dark: extend( - $_bootstrap-base-button-dark, - $_bootstrap-outlined-button, +$indigo-raised-button-dark: extend( + $indigo-raised-button, + $indigo-base-button-dark, ( - disabled-border-color: ( - igx-color: ('primary', 900), - darken: 5% + foreground: ( + igx-color: ('grays', 900) + ), + + hover-foreground: ( + igx-color: ('grays', 900) + ), + + focus-foreground: ( + igx-color: ('grays', 900) ), ) ); -/// Generates a dark bootstrap button schema. /// @type {Map} -/// @requires {Map} $_bootstrap-flat-button -/// @requires {Map} $_bootstrap-outlined-button -/// @requires {Map} $_bootstrap-raised-button -/// @requires {Map} $_bootstrap-fab-button -/// @requires {Map} $_bootstrap-icon-button -/// @see $dark-bootstrap-palette -$_dark-bootstrap-button: ( - flat: $_bootstrap-flat-button, - outlined: $_bootstrap-outlined-button-dark, - raised: $_bootstrap-raised-button, - fab: $_bootstrap-fab-button, - icon: $_bootstrap-icon-button, +/// @prop {Map} foreground [igx-color: ('grays', 600, .8)] - The idle text color of a outlined button. +/// @prop {Map} border-color [igx-color: ('grays', 300)] - The border color of an outlined button. +/// @prop {Map} shadow-color [igx-color: ('grays', 200, .8)] - The shadow color of the button. +/// @requires {Map} $indigo-base-button-dark +/// @requires {Map} $indigo-outlined-button +/// @requires {function} extend +$indigo-outlined-button-dark: extend( + $indigo-outlined-button, + $indigo-base-button-dark, + ( + foreground: ( + igx-color: ('grays', 500), + ), + + border-color: ( + igx-color: ('grays', 300), + ), + + shadow-color: ( + igx-color: ('grays', 200, .8), + ), + ) +); + +/// @type {Map} +/// @requires {Map} $indigo-base-button-dark +/// @requires {Map} $indigo-icon-button +/// @requires {function} extend +$indigo-icon-button-dark: extend($indigo-icon-button, $indigo-base-button-dark); + +/// @type {Map} +/// @prop {Color} foreground [igx-color: ('grays', 900) - The idle text color of a raised button. +/// @prop {Color} hover-foreground [igx-color: ('grays', 900)] - The hover text color of a raised button. +/// @prop {Color} focus-foreground [igx-color: ('grays', 900)] - The focus text color of a raised button. +/// @requires {Map} $indigo-base-button-dark +/// @requires {Map} $indigo-fab-button +/// @requires {function} extend +$indigo-fab-button-dark: extend( + $indigo-fab-button, + $indigo-base-button-dark, + ( + foreground: ( + igx-color: ('grays', 900) + ), + + hover-foreground: ( + igx-color: ('grays', 900) + ), + + focus-foreground: ( + igx-color: ('grays', 900) + ), + ) ); /// Generates a dark indigo button schema. /// @type {Map} -/// @requires $_indigo-button -$_dark-indigo-button: $_indigo-button; +/// @requires {Map} $indigo-flat-button +/// @requires {Map} $indigo-outlined-button +/// @requires {Map} $indigo-raised-button +/// @requires {Map} $indigo-fab-button +/// @requires {Map} $indigo-icon-button +/// @see $dark-indigo-palette +$dark-indigo-button: ( + flat: $indigo-flat-button-dark, + outlined: $indigo-outlined-button-dark, + raised: $indigo-raised-button-dark, + fab: $indigo-fab-button-dark, + icon: $indigo-icon-button-dark, +); diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_calendar.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_calendar.scss index 894fe5f0ddf..b32cb6268b1 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_calendar.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_calendar.scss @@ -1,4 +1,6 @@ -@import '../light/calendar'; +@use '../../../base' as *; +@use '../light/calendar' as *; + //// /// @group schemas /// @access public @@ -7,35 +9,89 @@ /// Generates a dark calendar schema. /// @type {Map} -/// @prop {Map} date-disabled-text-color [igx-color: ('grays', 500), to-opaque: (), rgba: .38] - The text color for disabled dates. +/// @prop {Map} week-number-background [igx-color: ('grays', 100, .3)] - The background color of the week number column. +/// @prop {Map} date-hover-background [igx-color: ('grays', 100)] - The hover date background color. +/// @prop {Map} month-hover-background [igx-color: ('grays', 100, .5)] - The month hover text color. +$dark-base-calendar: ( + week-number-background: ( + igx-color: ('grays', 100, .3), + ), + + date-hover-background: ( + igx-color: ('grays', 100) + ), + + month-hover-background: ( + igx-color: ('grays', 100, .5) + ), +); + +/// Generates a dark calendar schema. +/// @type {Map} +/// @prop {Map} date-disabled-text-color [igx-color: ('grays', 500)] - The text color for disabled dates. /// @requires {function} extend -/// @requires $_light-calendar +/// @requires $light-calendar +/// @requires $dark-base-calendar /// @see $default-palette -$_dark-calendar: extend($_light-calendar, ( - date-disabled-text-color: ( - igx-color: ('grays', 500), - to-opaque: (), - rgba: .38 - ), -)); +$dark-calendar: extend( + $light-calendar, + $dark-base-calendar, + ( + date-disabled-text-color: ( + igx-color: ('grays', 500) + ), + ) +); /// Generates a dark fluent calendar schema. /// @type {Map} /// @requires {function} extend -/// @requires $_fluent-calendar -$_dark-fluent-calendar: extend($_fluent-calendar); +/// @requires $fluent-calendar +$dark-fluent-calendar: extend($fluent-calendar, $dark-base-calendar); /// Generates a dark bootstrap calendar schema. /// @type {Map} -/// @prop {Map} content-background [#222] - The main content background color. -/// @prop {Map} picker-text-color [#fff]- The idle picker month/year color. +/// @prop {Map} content-background [igx-color: ('grays', 50)] - The main content background color. +/// @prop {Color} picker-background-color [igx-color: ('grays', 100, .5)] - The igx calendar picker background color. +/// @prop {Map} border-color [igx-color: ('grays', 100)] - The calendar border color. +/// @prop {Map} picker-text-color [igx-contrast-color: ('surface')]- The idle picker month/year color. +/// @prop {Map} date-selected-text-color [igx-contrast-color: ('secondary', 600)] - The text color for the selected date. +/// @prop {Map} date-current-text-color [igx-contrast-color: 'surface'] - The text color for the current date. +/// @prop {Map} week-number-background [('grays', 300, .2)] - The background color of the week number column. /// @requires {function} extend -/// @requires $_bootstrap-calendar -$_dark-bootstrap-calendar: extend( - $_bootstrap-calendar, +/// @requires $bootstrap-calendar +/// @requires $dark-base-calendar +$dark-bootstrap-calendar: extend( + $bootstrap-calendar, + $dark-base-calendar, ( - content-background: #222, - picker-text-color: #fff, + content-background: ( + igx-color: ('grays', 50) + ), + + picker-background-color: ( + igx-color: ('grays', 100, .5) + ), + + border-color: ( + igx-color: ('grays', 100) + ), + + picker-text-color: ( + igx-contrast-color: ('surface') + ), + + date-selected-text-color: ( + igx-contrast-color: ('secondary', 600) + ), + + date-current-text-color: ( + igx-contrast-color: 'surface' + ), + + week-number-background: ( + igx-color: ('grays', 300, .2), + ), ) ); @@ -55,9 +111,11 @@ $_dark-bootstrap-calendar: extend( /// @prop {Map} month-current-text-color [igx-color: ('primary', 300)]- The text color for the current/selected month. /// @prop {Map} month-hover-current-text-color [igx-color: ('primary', 300)]- The text color for the current/selected month on hover. /// @requires {function} extend -/// @requires $_indigo-calendar -$_dark-indigo-calendar: extend( - $_indigo-calendar, +/// @requires $indigo-calendar +/// @requires $dark-base-calendar +$dark-indigo-calendar: extend( + $indigo-calendar, + $dark-base-calendar, ( content-text-color: ( igx-contrast-color: ('surface') diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_card.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_card.scss index 2af67765ab4..20497c0a03f 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_card.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_card.scss @@ -1,4 +1,6 @@ -@import '../light/card'; +@use '../../../base' as *; +@use '../light/card' as *; + //// /// @group schemas /// @access public @@ -7,39 +9,38 @@ /// Generates a dark card schema. /// @type {Map} +/// @prop {Map} outline-color [igx-color: ('grays', 400, .38)] - The outline color of an outlined type card. /// @requires {function} extend -/// @requires $_light-card +/// @requires $light-card /// @see $default-palette -$_dark-card: extend($_light-card); +$dark-card: extend($light-card, ( + outline-color: ( + igx-color: ('grays', 400, .38) + ) +)); /// Generates a dark fluent card schema. /// @type {Map} /// @requires {function} extend -/// @requires $_fluent-card -$_dark-fluent-card: extend($_fluent-card); +/// @requires $fluent-card +$dark-fluent-card: $fluent-card; /// Generates a dark bootstrap card schema. /// @type {Map} -/// @prop {Map} background [#222]- The card background color. /// @requires {function} extend -/// @requires $_bootstrap-card -$_dark-bootstrap-card: extend( - $_bootstrap-card, - ( - background: #222, - ) -); +/// @requires $bootstrap-card +$dark-bootstrap-card: $bootstrap-card; /// Generates a dark indigo card schema. /// @type {Map} /// @prop {Map} outline-color [igx-color: ('grays', 200)] - The outline color of an outlined type card. /// @requires {function} extend -/// @requires $_indigo-card -$_dark-indigo-card: extend( - $_indigo-card, +/// @requires $ndigo-card +$dark-indigo-card: extend( + $indigo-card, ( outline-color: ( - igx-color: ('grays', 200) + igx-color: ('grays', 200, .54) ), ) ); diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_carousel.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_carousel.scss index d4f65c39881..b9cad08ecb8 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_carousel.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_carousel.scss @@ -1,4 +1,6 @@ -@import '../light/carousel'; +@use '../../../base' as *; +@use '../light/carousel' as *; + //// /// @group schemas /// @access public @@ -6,62 +8,67 @@ //// /// Generates the base dark carousel schema. +/// @prop {Map} button-arrow-color [igx-color: ('grays', 400)] - The previous/next buttons idle arrow color. +/// @prop {Map} button-hover-arrow-color [igx-color: ('grays', 700)] - The previous/next buttons hover arrow color. +/// @prop {Color} indicator-border-color [igx-color: ('grays', 600)] - The idle indicator border color. +/// @prop {Color} indicator-active-dot-color [igx-color: ('grays', 600)] - The active indicator dot color. +/// @prop {Color} indicator-active-border-color [igx-color: ('grays', 600)] - The active indicator border color. +/// @requires {function} extend /// @type {Map} -/// @prop {Color} slide-background [#222] - The slide background color. -/// @prop {Color} button-background [#222] - The previous/next buttons idle background color. -/// @prop {Color} button-hover-background [#222] - The previous/next buttons hover background color. -/// @prop {Map} button-disabled-background [igx-color: ('grays', 100), to-opaque: (#222)] - The previous/next buttons disabled background color. -/// @prop {Map} button-disabled-arrow-color [igx-color: ('grays' 400), to-opaque: (#222)] - The previous/next buttons disabled color. -$_base-dark-carousel: ( - slide-background: #222, - button-background: #222, - button-hover-background: #222, - button-disabled-background: ( - igx-color: ('grays', 100), - to-opaque: (#222) +$base-dark-carousel: extend($light-carousel, ( + button-arrow-color: ( + igx-color: ('grays', 400) ), - button-disabled-arrow-color: ( - igx-color: ('grays' 400), - to-opaque: (#222) + + button-hover-arrow-color: ( + igx-color: ('grays', 700) + ), + + indicator-border-color: ( + igx-color: ('grays', 600) ), -); -/// Generates a dark carousel schema based on a mix of $_light-carousel and $_base-dark-carousel + indicator-active-dot-color: ( + igx-color: ('grays', 600) + ), + + indicator-active-border-color: ( + igx-color: ('grays', 600) + ), +)); + +/// Generates a dark carousel schema based on a mix of $light-carousel and $base-dark-carousel /// @type {Map} -/// @requires {function} extend -/// @requires $_light-carousel -/// @requires $_base-dark-carousel +/// @requires $light-carousel +/// @requires $base-dark-carousel /// @see $default-palette -$_dark-carousel: extend($_light-carousel, $_base-dark-carousel); +$dark-carousel: $base-dark-carousel; -/// Generates a dark fluent carousel schema based on a mix of $_fluent-carousel and $_base-dark-carousel +/// Generates a dark fluent carousel schema based on a mix of $fluent-carousel and $base-dark-carousel /// @type {Map} /// @requires {function} extend -/// @requires $_fluent-carousel -/// @requires $_base-dark-carousel -$_dark-fluent-carousel: extend($_fluent-carousel, $_base-dark-carousel); +/// @requires $fluent-carousel +/// @requires $base-dark-carousel +$dark-fluent-carousel: extend($fluent-carousel, $base-dark-carousel); -/// Generates a dark bootstrap carousel schema based on a mix of $_bootstrap-carousel and $_base-dark-carousel +/// Generates a dark bootstrap carousel schema based on a mix of $bootstrap-carousel and $base-dark-carousel /// @type {Map} /// @requires {function} extend -/// @requires $_bootstrap-carousel -/// @requires $_base-dark-carousel -$_dark-bootstrap-carousel: extend($_bootstrap-carousel, $_base-dark-carousel); +/// @requires $bootstrap-carousel +/// @requires $base-dark-carousel +$dark-bootstrap-carousel: extend($bootstrap-carousel, $base-dark-carousel); -/// Generates a dark indigo carousel schema based on a mix of $_indigo-carousel and $_base-dark-carousel +/// Generates a dark indigo carousel schema based on a mix of $indigo-carousel and $base-dark-carousel /// @type {Map} -/// @prop {Color} slide-background [#222] - The slide background color. /// @prop {Map} button-background [igx-color: ('grays', 400)] - The previous/next buttons idle background color. /// @prop {Map} button-hover-background [igx-color: ('grays', 200)] - The previous/next buttons hover background color. /// @prop {Map} button-arrow-color [igx-color: ('grays', 800)] - The previous/next buttons idle arrow color. /// @prop {Map} button-hover-arrow-color [igx-color: ('grays', 900)] - The previous/next buttons hover arrow color. -/// @prop {Map} indicator-dot-color [igx-color: ('grays', 600)] - The idle indicator dot color. +/// @prop {Map} indicator-dot-color [igx-color: ('grays', 600, .6)] - The idle indicator dot color. /// @prop {Map} indicator-active-dot-color [igx-color: ('grays', 900)] - The active indicator dot color. /// @requires {function} extend -/// @requires $_indigo-carousel -$_dark-indigo-carousel: extend($_indigo-carousel, ( - slide-background: #222, - +/// @requires $indigo-carousel +$dark-indigo-carousel: extend($indigo-carousel, ( button-background: ( igx-color: ('grays' 400), ), @@ -79,7 +86,7 @@ $_dark-indigo-carousel: extend($_indigo-carousel, ( ), indicator-dot-color: ( - igx-color: ('grays' 600), + igx-color: ('grays', 600, .6), ), indicator-active-dot-color: ( diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_category-chart.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_category-chart.scss index 7fe728468ca..e4ec3f34b43 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_category-chart.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_category-chart.scss @@ -1,4 +1,5 @@ -@import '../light/category-chart'; +@use '../../../base' as *; +@use '../light/category-chart' as *; //// /// @group schemas @@ -16,7 +17,7 @@ /// @prop {Color} y-axis-label-text-color [igx-color: ('grays', 400), to-opaque: #fff] - Sets the color of labels on the Y-axis. /// @prop {Color} y-axis-tick-stroke [igx-color: ('grays', 400), to-opaque: #fff] - Sets the color to apply to tickmarks along the Y-axis. /// @prop {Color} y-axis-title-text-color [igx-color: ('grays', 400), to-opaque: #fff] - Sets the color of the title on the Y-axis. -$_base-dark-category-chart: ( +$base-dark-category-chart: ( title-text-color: ( igx-color: ('grays', 400), to-opaque: #fff @@ -58,31 +59,31 @@ $_base-dark-category-chart: ( ) ); -/// Generates a dark category-chart schema based on a mix of $_light-category-chart and $_base-dark-category-chart +/// Generates a dark category-chart schema based on a mix of $light-category-chart and $base-dark-category-chart /// @type {Map} /// @requires {function} extend -/// @requires $_light-category-chart -/// @requires $_base-dark-category-chart +/// @requires $light-category-chart +/// @requires $base-dark-category-chart /// @see $default-palette -$_dark-category-chart: extend($_light-category-chart, $_base-dark-category-chart); +$dark-category-chart: extend($light-category-chart, $base-dark-category-chart); -/// Generates a dark fluent category-chart schema based on a mix of $_fluent-category-chart and $_base-dark-category-chart +/// Generates a dark fluent category-chart schema based on a mix of $fluent-category-chart and $base-dark-category-chart /// @type {Map} /// @requires {function} extend -/// @requires $_fluent-category-chart -/// @requires $_base-dark-category-chart -$_dark-fluent-category-chart: extend($_fluent-category-chart, $_base-dark-category-chart); +/// @requires $fluent-category-chart +/// @requires $base-dark-category-chart +$dark-fluent-category-chart: extend($fluent-category-chart, $base-dark-category-chart); -/// Generates a bootstrap category-chart schema based on a mix of $_bootstrap-category-chart and $_base-dark-category-chart +/// Generates a bootstrap category-chart schema based on a mix of $bootstrap-category-chart and $base-dark-category-chart /// @type {Map} /// @requires {function} extend -/// @requires $_bootstrap-category-chart -/// @requires $_base-dark-category-chart -$_dark-bootstrap-category-chart: extend($_bootstrap-category-chart, $_base-dark-category-chart); +/// @requires $bootstrap-category-chart +/// @requires $base-dark-category-chart +$dark-bootstrap-category-chart: extend($bootstrap-category-chart, $base-dark-category-chart); -/// Generates an indigo category-chart schema based on a mix of $_indigo-category-chart and $_base-dark-category-chart +/// Generates an indigo category-chart schema based on a mix of $indigo-category-chart and $base-dark-category-chart /// @type {Map} /// @requires {function} extend -/// @requires $_indigo-category-chart -/// @requires $_base-dark-category-chart -$_dark-indigo-category-chart: extend($_indigo-category-chart, $_base-dark-category-chart); +/// @requires $indigo-category-chart +/// @requires $base-dark-category-chart +$dark-indigo-category-chart: extend($indigo-category-chart, $base-dark-category-chart); diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_checkbox.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_checkbox.scss index f4f87072467..18dfb40c7a8 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_checkbox.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_checkbox.scss @@ -1,4 +1,6 @@ -@import '../light/checkbox'; +@use '../../../base' as *; +@use '../light/checkbox' as *; + //// /// @group schemas /// @access public @@ -7,40 +9,44 @@ /// Generates a dark checkbox schema. /// @type {Map} -/// @prop {Color} tick-color [#222] - The checked mark color. -/// @requires {function} extend -/// @requires $_light-checkbox +/// @requires $light-checkbox /// @see $default-palette -$_dark-checkbox: extend($_light-checkbox, ( - tick-color: #222 -)); +$dark-checkbox: $light-checkbox; /// Generates a dark fluent checkbox schema. /// @type {Map} -/// @prop {Color} tick-color [#fff] - The checked mark color. +/// @prop {Color} tick-color [igx-color: ('grays', 900)] - The checked mark color. /// @requires {function} extend -/// @requires $_fluent-checkbox -$_dark-fluent-checkbox: extend($_fluent-checkbox, ( - tick-color: #fff +/// @requires $fluent-checkbox +$dark-fluent-checkbox: extend($fluent-checkbox, ( + tick-color: ( + igx-color: ('grays', 900) + ) )); /// Generates a dark bootstrap checkbox schema. /// @type {Map} -/// @prop {Color} tick-color [#fff] - The checked mark color. +/// @prop {Color} tick-color [igx-color: ('grays', 900)] - The checked mark color. /// @requires {function} extend -/// @requires $_bootstrap-checkbox -$_dark-bootstrap-checkbox: extend($_bootstrap-checkbox); +/// @requires $bootstrap-checkbox +$dark-bootstrap-checkbox: extend($bootstrap-checkbox, ( + tick-color: ( + igx-color: ('grays', 900) + ) +)); /// Generates a dark indigo checkbox schema. /// @type {Map} -/// @prop {Color} fill-color [#fff] - The checked border and fill colors. +/// @prop {Color} fill-color [igx-color: ('grays', 900)] - The checked border and fill colors. /// @prop {Color} empty-color [igx-color: ('grays', 700)] - The unchecked border color. /// @prop {Color} disabled-color [igx-color: ('grays', 400)] - The disabled border and fill colors. /// @prop {Color} disabled-color-label [igx-color: ('grays', 400)] - The disabled label color. /// @requires {function} extend -/// @requires $_indigo-checkbox -$_dark-indigo-checkbox: extend($_indigo-checkbox, ( - fill-color: #fff, +/// @requires $indigo-checkbox +$dark-indigo-checkbox: extend($indigo-checkbox, ( + fill-color: ( + igx-color: ('grays', 900) + ), empty-color: ( igx-color: ('grays', 700) diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_chip.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_chip.scss index 66631cfffe0..fb7a8c3c2fc 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_chip.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_chip.scss @@ -1,4 +1,6 @@ -@import '../light/chip'; +@use '../../../base' as *; +@use '../light/chip' as *; + //// /// @group schemas /// @access public @@ -7,66 +9,177 @@ /// Generates the base dark chip schema. /// @type {Map} -/// @prop {Map} ghost-background [igx-color: ('grays', 400), to-opaque: #000] - The chip ghost background color. -$_base-dark-chip: ( +/// @prop {Map} background [igx-color: ('grays', 100, .4)] - The chip background color. +/// @prop {Map} hover-background [igx-color: ('grays', 200, .6)] - The chip hover background color. +/// @prop {Map} focus-background [igx-color: ('grays', 200, .6)] The focused chip background color. +/// @prop {Map} selected-background [igx-color: ('grays', 100, .8)] - The selected chip background color. +/// @prop {Map} hover-selected-background [igx-color: ('grays', 200, .8)] - The selected chip hover background color. +/// @prop {Map} focus-selected-background [igx-color: ('grays', 200, .8)] - The selected chip focus background color. +/// @prop {Map} ghost-background [igx-color: ('grays', 100))] - The chip ghost background color. +/// @prop {Map} text-color [igx-color: ('grays', 600)] - The chip text color. +/// @prop {Map} selected-text-color [igx-color: ('grays', 900)] - The selected chip text color. +/// @prop {Map} hover-selected-text-color [igx-color: ('grays', 900)] - The selected chip hover text color. +/// @prop {Map} focus-selected-text-color [igx-color: ('grays', 900)] - The selected chip text focus color. +$base-dark-chip: ( + background: ( + igx-color: ('grays', 100, .4) + ), + + hover-background: ( + igx-color: ('grays', 200, .6) + ), + + focus-background: ( + igx-color:('grays', 200, .6) + ), + + selected-background: ( + igx-color: ('grays', 100, .8) + ), + + hover-selected-background: ( + igx-color: ('grays', 200, .8) + ), + + focus-selected-background: ( + igx-color: ('grays', 200, .8) + ), + ghost-background: ( - igx-color: ('grays', 400), - to-opaque: #000 - ) + igx-color: ('grays', 100) + ), + + text-color: ( + igx-color: ('grays', 600) + ), + + selected-text-color: ( + igx-color: ('grays', 900) + ), + + hover-selected-text-color: ( + igx-color: ('grays', 900) + ), + + focus-selected-text-color: ( + igx-color: ('grays', 900) + ), ); -/// Generates a dark chip schema based on a mix of $_light-chip and $_base-dark-chip. +/// Generates a dark chip schema based on a mix of $light-chip and $base-dark-chip. /// @type {Map} /// @requires {function} extend -/// @requires $_light-chip -/// @requires $_base-dark-chip +/// @requires $light-chip +/// @requires $base-dark-chip /// @see $default-palette -$_dark-chip: extend($_light-chip, $_base-dark-chip); +$dark-chip: extend($light-chip, $base-dark-chip); -/// Generates a dark fluent chip schema based on a mix of $_fluent-chip and $_base-dark-chip. +/// Generates a dark fluent chip schema based on a mix of $fluent-chip and $base-dark-chip. /// @type {Map} +/// @prop {Map} background [igx-color: ('grays', 100, .2)] - The chip background color. +/// @prop {Map} hover-background [igx-color: ('grays', 100, .8)] - The chip hover background color. +/// @prop {Map} text-color [igx-color: ('grays', 500)] - The chip text color. /// @requires {function} extend -/// @requires $_fluent-chip -/// @requires $_base-dark-chip -$_dark-fluent-chip: extend($_fluent-chip, $_base-dark-chip); +/// @requires $fluent-chip +/// @requires $base-dark-chip +$dark-fluent-chip: extend( + $fluent-chip, + $base-dark-chip, + ( + background: ( + igx-color: ('grays', 100, .2) + ), -/// Generates a dark bootstrap chip schema based on a mix of $_bootstrap-chip and $_base-dark-chip. -/// @type {Map} -/// @requires {function} extend -/// @requires $_bootstrap-chip -/// @requires $_base-dark-chip -$_dark-bootstrap-chip: extend($_bootstrap-chip, $_base-dark-chip); + hover-background: ( + igx-color: ('grays', 100, .8) + ), -/// Generates a dark indigo chip schema based on a mix of $_indigo-chip and $_base-dark-chip. + text-color: ( + igx-color: ('grays', 500) + ), + ) +); + +/// Generates a dark bootstrap chip schema based on a mix of $bootstrap-chip and $ase-dark-chip. /// @type {Map} -/// @prop {Color} background [igx-color: ('surface')] - The chip background color. -/// @prop {Color} ghost-background igx-color: ('surface'), to-opaque: (igx-color: 'surface',)), to-opaque: (igx-color: 'surface')] - The chip ghost background color. -/// @prop {Map} hover-background [igx-color: ('grays', 300)] - The chip hover background color. -/// @prop {Color} focus-background [igx-color: ('surface')] The focused chip background color. /// @requires {function} extend -/// @requires $_indigo-chip -/// @requires $_base-dark-chip -$_dark-indigo-chip: extend( - $_indigo-chip, +/// @requires $bootstrap-chip +/// @requires $base-dark-chip +$dark-bootstrap-chip: extend( + $bootstrap-chip, + $base-dark-chip, ( background: ( - igx-color: ('surface') + igx-color: ('grays', 100, .4) + ), + + hover-background: ( + igx-color: ('grays', 100, .8) + ), + + focus-background: ( + igx-color: ('grays', 200, .8) + ), + + selected-background: ( + igx-color: ('grays', 100, .4) + ), + + hover-selected-background: ( + igx-color: ('grays', 100) + ), + + focus-selected-background: ( + igx-color: ('grays', 200, .8) + ), + + focus-border-color: ( + igx-color: ('grays', 200, .4) ), ghost-background: ( - igx-color: ('surface'), + igx-color: ('grays', 100) + ), + + ) +); - to-opaque: ( - igx-color: 'surface', - ) +/// Generates a dark indigo chip schema based on a mix of $indigo-chip and $base-dark-chip. +/// @type {Map} +/// @prop {Map} background [igx-color: ('grays', 100, .4)] - The chip background color. +/// @prop {Map} hover-background [igx-color: ('grays', 200, .5)] - The chip hover background color. +/// @prop {Map} focus-background [igx-color: ('grays', 200, .8)] The focused chip background color. +/// @prop {Map} ghost-background [igx-color: ('grays', 200)] - The chip ghost background color. +/// @prop {Map} border-color [igx-color: ('grays', 200)] - The chip border color. +/// @prop {Map} hover-border-color [igx-color: ('grays', 200)] - The chip hover border color. +/// @requires {function} extend +/// @requires $indigo-chip +/// @requires $base-dark-chip +$dark-indigo-chip: extend( + $indigo-chip, + ( + background: ( + igx-color: ('grays', 100, .4) ), hover-background: ( - igx-color: ('grays', 300) + igx-color: ('grays', 200, .5) ), focus-background: ( - igx-color: ('surface') + igx-color: ('grays', 200, .8) + ), + + ghost-background: ( + igx-color: ('grays', 200), + ), + + border-color: ( + igx-color: ('grays', 200) + ), + + hover-border-color: ( + igx-color: ('grays', 200) ), ) ); diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_column-actions.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_column-actions.scss index e1f28fae864..7266cd92c9d 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_column-actions.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_column-actions.scss @@ -1,41 +1,36 @@ -@import '../light/column-actions'; +@use '../../../base' as *; +@use '../light/column-actions' as *; + //// /// @group schemas /// @access private /// @author Simeon Simeonoff //// -/// Generates a base dark column actions schema. -/// @type {Map} -/// @prop {Color} background-color [#222] - The background color of the panel. -$_base-dark-column-actions: ( - background-color: #222 -); - -/// Generates a dark column actions schema based on a mix of $_light-column-actions and $_base-dark-column-actions. +/// Generates a dark column actions schema based on a mix of $light-column-actions and $base-dark-column-actions. /// @type {Map} /// @requires extend -/// @requires $_light-column-actions -/// @requires $_base-dark-column-actions +/// @requires $light-column-actions +/// @requires $base-dark-column-actions /// @see $default-palette -$_dark-column-actions: extend($_light-column-actions, $_base-dark-column-actions); +$dark-column-actions: extend($light-column-actions); -/// Generates a dark fluent column actions schema based on a mix of $_fluent-column-actions and $_base-dark-column-actions. +/// Generates a dark fluent column actions schema based on a mix of $luent-column-actions and $base-dark-column-actions. /// @type {Map} /// @requires extend -/// @requires $_fluent-column-actions -/// @requires $_base-dark-column-actions -$_dark-fluent-column-actions: extend($_fluent-column-actions, $_base-dark-column-actions); +/// @requires $fluent-column-actions +/// @requires $base-dark-column-actions +$dark-fluent-column-actions: extend($fluent-column-actions); -/// Generates a dark bootstrap column actions schema based on a mix of $_bootstrap-column-actions and $_base-dark-column-actions. +/// Generates a dark bootstrap column actions schema based on a mix of $bootstrap-column-actions and $base-dark-column-actions. /// @type {Map} /// @requires extend -/// @requires $_bootstrap-column-actions -/// @requires $_base-dark-column-actions -$_dark-bootstrap-column-actions: extend($_bootstrap-column-actions, $_base-dark-column-actions); +/// @requires $bootstrap-column-actions +/// @requires $base-dark-column-actions +$dark-bootstrap-column-actions: extend($bootstrap-column-actions); -/// Generates a dark indigo column actions schema based on a mix of $_indigo-column-actions and $_base-dark-column-actions. +/// Generates a dark indigo column actions schema based on a mix of $indigo-column-actions and $base-dark-column-actions. /// @type {Map} /// @requires extend -/// @requires $_indigo-column-actions -$_dark-indigo-column-actions: extend($_indigo-column-actions, $_base-dark-column-actions); +/// @requires $indigo-column-actions +$dark-indigo-column-actions: extend($indigo-column-actions); diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_combo.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_combo.scss index aff9d0139ef..0049f2e4261 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_combo.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_combo.scss @@ -1,4 +1,5 @@ -@import '../light/combo'; +@use '../../../base' as *; +@use '../light/combo' as *; //// /// @group schemas @@ -9,30 +10,24 @@ /// Generates a dark combo schema. /// @type {Map} /// @requires {function} extend -/// @requires $_light-combo +/// @requires $light-combo /// @see $default-palette -$_dark-combo: extend($_light-combo); +$dark-combo: $light-combo; /// Generates a dark fluent combo schema. /// @type {Map} /// @requires {function} extend -/// @requires $_fluent-combo -$_dark-fluent-combo: extend($_fluent-combo); +/// @requires $fluent-combo +$dark-fluent-combo: $fluent-combo; /// Generates a dark bootstrap combo schema. /// @type {Map} -/// @prop {Color} empty-list-background [#222] - The combo list background color. /// @requires {function} extend -/// @requires $_bootstrap-combo -$_dark-bootstrap-combo: extend( - $_bootstrap-combo, - ( - empty-list-background: #222, - ) -); +/// @requires $bootstrap-combo +$dark-bootstrap-combo: extend($bootstrap-combo); /// Generates a dark indigo combo schema. /// @type {Map} /// @requires {function} extend -/// @requires $_indigo-combo -$_dark-indigo-combo: extend($_indigo-combo); +/// @requires $indigo-combo +$dark-indigo-combo: $indigo-combo; diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_data-chart.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_data-chart.scss index 555822398cb..653bed36f86 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_data-chart.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_data-chart.scss @@ -1,4 +1,4 @@ -@import '../light/data-chart'; +@use '../light/data-chart' as *; //// /// @group schemas @@ -8,26 +8,22 @@ /// Generates a dark data chart schema. /// @type {Map} -/// @requires {function} extend -/// @requires $_light-data-chart +/// @requires $light-data-chart /// @see $default-palette -$_dark-data-chart: extend($_light-data-chart); +$dark-data-chart: $light-data-chart; /// Generates a dark fluent data-chart schema. /// @type {Map} -/// @requires {function} extend -/// @requires $_fluent-data-chart -$_dark-fluent-data-chart: extend($_fluent-data-chart); +/// @requires $fluent-data-chart +$dark-fluent-data-chart: $fluent-data-chart; /// Generates a dark bootstrap data-chart schema. /// @type {Map} -/// @requires {function} extend -/// @requires $_bootstrap-data-chart -$_dark-bootstrap-data-chart: extend($_bootstrap-data-chart); +/// @requires $bootstrap-data-chart +$dark-bootstrap-data-chart: $bootstrap-data-chart; /// Generates a dark indigo data-chart schema. /// @type {Map} -/// @requires {function} extend -/// @requires $_indigo-data-chart -$_dark-indigo-data-chart: extend($_indigo-data-chart); +/// @requires $indigo-data-chart +$dark-indigo-data-chart: $indigo-data-chart; diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_date-range-picker.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_date-range-picker.scss index 7aaa1695882..0c16ec83e05 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_date-range-picker.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_date-range-picker.scss @@ -1,4 +1,4 @@ -@import '../light/date-range-picker'; +@use '../light/date-range-picker' as *; //// /// @group schemas @@ -7,25 +7,21 @@ //// /// Generates a dark date-range-picker schema. /// @type {Map} -/// @requires {function} extend -/// @requires $_light-date-range-picker +/// @requires $light-date-range-picker /// @see $default-palette -$_dark-date-range-picker: extend($_light-date-range-picker); +$dark-date-range-picker: $light-date-range-picker; /// Generates a dark fluent date-range-picker schema. /// @type {Map} -/// @requires {function} extend -/// @requires $_fluent-date-range-picker -$_dark-fluent-date-range-picker: extend($_fluent-date-range-picker); +/// @requires $fluent-date-range-picker +$dark-fluent-date-range-picker: $fluent-date-range-picker; /// Generates a dark bootstrap date-range-picker schema. /// @type {Map} -/// @requires {function} extend -/// @requires $_bootstrap-date-range-picker -$_dark-bootstrap-date-range-picker: extend($_bootstrap-date-range-picker); +/// @requires $bootstrap-date-range-picker +$dark-bootstrap-date-range-picker: $bootstrap-date-range-picker; /// Generates a dark indigo date-range-picker schema. /// @type {Map} -/// @requires {function} extend -/// @requires $_indigo-date-range-picker -$_dark-indigo-date-range-picker: extend($_indigo-date-range-picker); +/// @requires $ndigo-date-range-picker +$dark-indigo-date-range-picker: $indigo-date-range-picker; diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_dialog.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_dialog.scss index 390b833c554..0c7715a8d41 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_dialog.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_dialog.scss @@ -1,31 +1,55 @@ -@import '../light/dialog'; +@use '../../../base' as *; +@use '../light/dialog' as *; + //// /// @group schemas /// @access public /// @author Simeon Simeonoff //// +/// Generates a base dark dialog schema. +/// @type {Map} +/// @prop {Map} message-color [igx-color: ('grays', 500)] - The dialog message text color. +$base-dark-dialog: ( + message-color: ( + igx-color: ('grays', 500) + ), +); + /// Generates a dark dialog schema. /// @type {Map} /// @requires {function} extend -/// @requires $_light-dialog +/// @requires $light-dialog /// @see $default-palette -$_dark-dialog: extend($_light-dialog); +/// @requires $base-dark-dialog +$dark-dialog: extend($light-dialog, $base-dark-dialog); /// Generates a dark fluent dialog schema. /// @type {Map} /// @requires {function} extend -/// @requires $_fluent-dialog -$_dark-fluent-dialog: extend($_fluent-dialog); +/// @requires $fluent-dialog +/// @requires $base-dark-dialog +$dark-fluent-dialog: extend($fluent-dialog, $base-dark-dialog); /// Generates a dark bootstrap dialog schema. /// @type {Map} +/// @prop {Map} border-color [igx-color: ('grays', 100)] - The border color for dialog component. /// @requires {function} extend -/// @requires $_bootstrap-dialog -$_dark-bootstrap-dialog: extend($_bootstrap-dialog); +/// @requires $bootstrap-dialog +/// @requires $base-dark-dialog +$dark-bootstrap-dialog: extend( + $bootstrap-dialog, + $base-dark-dialog, + ( + border-color: ( + igx-color: ('grays', 100) + ) + ) +); /// Generates a dark indigo dialog schema. /// @type {Map} /// @requires {function} extend -/// @requires $_indigo-dialog -$_dark-indigo-dialog: extend($_indigo-dialog); +/// @requires $indigo-dialog +/// @requires $base-dark-dialog +$dark-indigo-dialog: extend($indigo-dialog, $base-dark-dialog); diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_divider.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_divider.scss index 4e510f9ad48..cd23dd19d09 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_divider.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_divider.scss @@ -1,30 +1,47 @@ +@use '../../../base' as *; +@use '../light/divider' as *; + //// /// @group schemas /// @access public /// @author Simeon Simeonoff //// +/// Generates a base dark divider schema. +/// @type {Map} +/// @property {Map} color [igx-color: ('grays', 100)] - The color used for the divider. +/// +$base-dark-divider: ( + color: ( + igx-color: ('grays', 100) + ) +); + /// Generates a dark divider schema. /// @type {Map} -/// @requires {function} extend -/// @requires $_light-divider /// @see $default-palette -$_dark-divider: extend($_light-divider); +/// @requires $light-divider +/// @requires $base-dark-divider +/// @requires {function} extend +$dark-divider: extend($light-divider, $base-dark-divider); /// Generates a dark fluent divider schema. /// @type {Map} +/// @requires $fluent-divider +/// @requires $base-dark-divider /// @requires {function} extend -/// @requires $_fluent-divider -$_dark-fluent-divider: extend($_fluent-divider); +$dark-fluent-divider: extend($fluent-divider, $base-dark-divider); /// Generates a dark bootstrap divider schema. /// @type {Map} +/// @requires $bootstrap-divider +/// @requires $base-dark-divider /// @requires {function} extend -/// @requires $_bootstrap-divider -$_dark-bootstrap-divider: extend($_bootstrap-divider); +$dark-bootstrap-divider: extend($bootstrap-divider, $base-dark-divider); /// Generates a dark indigo divider schema. /// @type {Map} +/// @requires $indigo-divider +/// @requires $base-dark-divider /// @requires {function} extend -/// @requires $_indigo-divider -$_dark-indigo-divider: extend($_indigo-divider); +$dark-indigo-divider: extend($indigo-divider, $base-dark-divider); diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_dock-manager.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_dock-manager.scss index a1a32c42915..db3e361e304 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_dock-manager.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_dock-manager.scss @@ -1,313 +1,254 @@ -@import '../light/dock-manager'; +@use '../../../base' as *; +@use '../light/dock-manager' as *; + //// /// @group schemas /// @access public /// @author Simeon Simeonoff //// -/// Generates a dark dock-manager schema. +/// Generates a dark base dock-manager schema. /// @type {Map} -/// @prop {Color} accent-color [igx-color: ('grays', 400), to-opaque: #000] - Sets the pinned header background color, the joystick background and border colors, as well as the context menu background color. -/// @prop {Color} background-color [igx-color: ('grays', 200), to-opaque: #000] - Sets the base dock manager color as well as the pane headers and tabs background colors. -/// @prop {Color} border-color [igx-color: 'surface'] - Sets the global border color in the dock manager. Also sets the pane content background and the context menu active background colors. -/// @prop {Color} button-text [igx-contrast-color: 'surface'] - Sets the button text color. -/// @prop {Color} floating-pane-border-color [igx-color: ('grays', 100), to-opaque: #000] - Sets the border color for floating panes. -/// @prop {Color} flyout-shadow-color [rgba(0, 0, 0, .38)] - Sets the border color for floating panes. -/// @prop {Color} joystick-background-active [igx-color: 'surface'] - Sets the background color of the joysticks. -/// @prop {Color} joystick-border-color [igx-color: ('grays', 400), to-opaque: #000] - Sets the border color of the joystick. +/// @prop {Color} dock-background [igx-color: ('grays', 50)] - Sets the background color of the dock manager. +/// @prop {Color} background-color [igx-color: ('grays', 50)] - Sets the base dock manager color as well as the pane headers and tabs background colors. +/// @prop {Color} pane-header-background [igx-color: ('grays', 50)] - Sets the background color for pane headers. +/// @prop {Color} pane-content-background [igx-color: ('grays', 100, .3)] - Sets the background color of the content panes. +/// @prop {Color} border-color [igx-color: ('grays', 100)] - Sets the global border color in the dock manager. Also sets the pane content background and the context menu active background colors. +/// @prop {Color} floating-pane-border-color [igx-color: ('grays', 50)] - Sets the border color for floating panes. +/// @prop {Color} joystick-background [igx-color: ('grays', 100)] - Sets the background color of the joystick. +/// @prop {Color} joystick-background-active [igx-color: ('grays', 50)] - Sets the background color of the joysticks. +/// @prop {Color} joystick-border-color [igx-color: ('grays', 200, .5)] - Sets the border color of the joystick. /// @prop {Color} joystick-icon-color [igx-contrast-color: 'surface'] - Sets the color for the joystick icons. -/// @prop {Color} pane-content-background [igx-color: 'surface'] - Sets the background color of the content panes. -/// @prop {Color} splitter-background [igx-clor: ('grays', 100), to-opaque: #000] - Sets the background color for the splitters. -/// @prop {Color} tab-background-active [igx-color: 'surface'] - Sets the background color for active tabs. -/// @requires {function} extend -/// @requires $_light-dock-manager -$_dark-dock-manager: extend( - $_light-dock-manager, ( - accent-color: ( - igx-color: ('grays', 400), - to-opaque: #000, - ), - background-color: ( - igx-color: ('grays', 200), - to-opaque: #000, - ), - border-color: ( - igx-color: 'surface', - ), - button-text: ( - igx-contrast-color: 'surface', - ), - floating-pane-border-color: ( - igx-color: ('grays', 100), - to-opaque: #000, - ), - flyout-shadow-color: rgba(0, 0, 0, .38), - joystick-background-active: ( - igx-color: 'surface', - ), - joystick-border-color: ( - igx-color: ('grays', 400), - to-opaque: #000, - ), - joystick-icon-color: ( - igx-contrast-color: 'surface', - ), - pane-content-background: ( - igx-color: 'surface', - ), - splitter-background: ( - igx-color: ('grays', 100), - to-opaque: #000, - ), - tab-background-active: ( - igx-color: 'surface', - ), - ) +/// @prop {Color} joystick-icon-color-active [igx-contrast-color: 'surface'] - Sets the color of the active joystick icons. +/// @prop {Color} context-menu-background-active [igx-color: ('grays', 50)] - Sets the background color for active context menus. +/// @prop {Color} context-menu-color-active [igx-contrast-color: ('grays', 50)] - Sets the text color for active context menus. +/// @prop {Color} context-menu-background [ igx-color: ('grays', 100)] - Sets the background color for context menus. +/// @prop {Color} context-menu-color [igx-contrast-color: 'surface'] - Sets the text color for context menus. +/// @prop {Color} tab-background [igx-color: ('grays', 100, .3)] - Sets the background color for tabs. +/// @prop {Color} tab-background-active [igx-color: ('grays', 100, .3)] - Sets the background color for active tabs. +/// @prop {Color} tab-border-color-active [igx-color: ('grays', 100)] - Sets the border color for active tabs. +/// @prop {Color} button-text [igx-contrast-color: 'surface'] - Sets the button text color. +/// @prop {Color} flyout-shadow-color [igx-color: ('grays', 50, .3)] - Sets the flyout shadow color. +/// @prop {Color} drop-shadow-background [igx-color: ('primary', 900, .3)] - Sets the drop-shadow background color. +/// @prop {Color} splitter-background [igx-color: ('grays', 100)] - Sets the background color for the splitters. +$dark-base-dock-manager: ( + dock-background: ( + igx-color: ('grays', 50) + ), + + background-color: ( + igx-color: ('grays', 50) + ), + + pane-header-background: ( + igx-color: ('grays', 50) + ), + + pane-content-background: ( + igx-color: ('grays', 100, .3) + ), + + border-color: ( + igx-color: ('grays', 100) + ), + + floating-pane-border-color: ( + igx-color: ('grays', 50), + ), + + joystick-background: ( + igx-color: ('grays', 100) + ), + + joystick-border-color: ( + igx-color: ('grays', 200, .5) + ), + + joystick-icon-color: ( + igx-contrast-color: 'surface' + ), + + joystick-background-active: ( + igx-color: ('grays', 50) + ), + + context-menu-background-active: ( + igx-color: ('grays', 50) + ), + + context-menu-color-active: ( + igx-contrast-color: ('grays', 50) + ), + + context-menu-background: ( + igx-color: ('grays', 100) + ), + + context-menu-color: ( + igx-contrast-color: 'surface' + ), + + tab-background: ( + igx-color: ('grays', 100, .3), + ), + + tab-background-active: ( + igx-color: ('grays', 100, .3), + ), + + tab-border-color-active: ( + igx-color: ('grays', 100) + ), + + button-text: ( + igx-contrast-color: 'surface' + ), + + flyout-shadow-color: ( + igx-color: ('grays', 50, .3) + ), + + drop-shadow-background: ( + igx-color: ('primary', 900, .3) + ), + + splitter-background: ( + igx-color: ('grays', 100) + ), ); +/// Generates a dark dock-manager schema. +/// @type {Map} +/// @requires {function} extend +/// @requires $light-dock-manager +/// @requires $dark-base-dock-manager +$dark-dock-manager: extend($light-dock-manager, $dark-base-dock-manager); + /// Generates a dark fluent dock-manager schema. /// @type {Map} -/// @prop {Color} accent-color [igx-color: 'surface', rgba: .5, to-opaque: #000] - Sets the pinned header background color, the joystick background and border colors, as well as the context menu background color. -/// @prop {Color} background-color [igx-color: 'surface', rgba: .85, to-opaque: #000] - Sets the base dock manager color as well as the pane headers and tabs background colors. -/// @prop {Color} button-text [igx-contrast-color: 'surface'] - Sets the button text color. -/// @prop {Color} context-menu-background-active [igx-color: 'surface', rgba: .5, to-opaque: #000] - Sets the background color for active context menus. -/// @prop {Color} context-menu-color-active [igx-contrast-color: 'surface'] - Sets the text color for active context menus. -/// @prop {Color} context-menu-background [igx-color: ('grays', 400), to-opaque: #000] - Sets the background color for context menus. -/// @prop {Color} context-menu-color [igx-contrast-color: 'surface'] - Sets the text color for context menus. -/// @prop {Color} dock-background [igx-color: 'surface', rgba: .85, to-opaque: #000] - Sets the background color of the dock manager. +/// @prop {Color} tab-text-active [igx-color: ('primary', 200)] - Sets the text color for active tabs. /// @prop {Color} floating-pane-border-color [transparent] - Sets the border color for floating panes. -/// @prop {Color} joystick-background-active [igx-color: 'surface', rgba: .5, to-opaque: #000] - Sets the background color of the joysticks. -/// @prop {Color} joystick-background [igx-color: ('grays', 400), to-opaque: #000] - Sets the background color of the joystick. /// @prop {Color} joystick-border-color [transparent] - Sets the border color of the joystick. -/// @prop {Color} joystick-icon-color [igx-contrast-color: 'surface'] - Sets the color for the joystick icons. -/// @prop {Color} joystick-icon-color-active [igx-contrast-color: 'surface'] - Sets the color of the active joystick icons. -/// @prop {Color} pane-header-background [igx-color: 'surface', rgba: .33, to-opaque: #000] - Sets the background color for pane headers. -/// @prop {Color} pinned-header-background [igx-color: 'surface', rgba: .85, to-opaque: #000] - Sets the background colors of pinned headers. -/// @prop {Color} splitter-background [igx-color: 'surface', rgba: .7, to-opaque: #000] - Sets the background color for the splitters. -/// @prop {Color} splitter-handle [igx-color: 'surface', rgba: .2, to-opaque: #000] - Sets the background color for the splitter handles. -/// @prop {Color} tab-text [igx-contrast-color: 'surface'] - Sets the text color for tabs. -/// @prop {Color} text-color [igx-contrast-color: 'surface'] - Sets the text color for most elements in the dock manager. Used as the default joystick icon color. +/// @prop {Color} splitter-handle [igx-color: ('grays', 50)] - Sets the background color for the splitter handles. /// @requires {function} extend -/// @requires $_fluent-dock-manager -$_dark-fluent-dock-manager: extend( - $_fluent-dock-manager, ( - accent-color: ( - igx-color: 'surface', - rgba: .5, - to-opaque: #000, - ), - background-color: ( - igx-color: 'surface', - rgba: .85, - to-opaque: #000, - ), - button-text: ( - igx-contrast-color: 'surface', - ), - context-menu-background-active: ( - igx-color: 'surface', - rgba: .5, - to-opaque: #000, - ), - context-menu-color-active: ( - igx-contrast-color: 'surface', - ), - context-menu-background: ( - igx-color: ('grays', 400), - to-opaque: #000, - ), - context-menu-color: ( - igx-contrast-color: 'surface', - ), - dock-background: ( - igx-color: 'surface', - rgba: .85, - to-opaque: #000, +/// @requires $fluent-dock-manager +$dark-fluent-dock-manager: extend( + $fluent-dock-manager, + $dark-base-dock-manager, + ( + tab-text-active: ( + igx-color: ('primary', 200) ), + floating-pane-border-color: transparent, - joystick-background-active: ( - igx-color: 'surface', - rgba: .5, - to-opaque: #000, - ), - joystick-background: ( - igx-color: ('grays', 400), - to-opaque: #000, - ), + joystick-border-color: transparent, - joystick-icon-color: ( - igx-contrast-color: 'surface', - ), - joystick-icon-color-active: ( - igx-contrast-color: 'surface', - ), - pane-header-background: ( - igx-color: 'surface', - rgba: .85, - to-opaque: #000, - ), - pinned-header-background: ( - igx-color: 'surface', - rgba: .85, - to-opaque: #000, - ), - splitter-background: ( - igx-color: 'surface', - rgba: .7, - to-opaque: #000, - ), + splitter-handle: ( - igx-color: 'surface', - rgba: .2, - to-opaque: #000, - ), - tab-text: ( - igx-contrast-color: 'surface', - ), - text-color: ( - igx-contrast-color: 'surface', + igx-color: ('grays', 50) ), ) ); /// Generates a dark bootstrap dock-manager schema. /// @type {Map} -/// @prop {Color} accent-color [igx-color: 'surface', rgba: .33, to-opaque: ()] - Sets the pinned header background color, the joystick background and border colors, as well as the context menu background color. -/// @prop {Color} background-color [igx-color: 'surface', rgba: .33, to-opaque: ()] - Sets the base dock manager color as well as the pane headers and tabs background colors. -/// @prop {Color} context-menu-background [igx-color: 'surface', rgba: .66, to-opaque: ()] - Sets the background color for context menus. -/// @prop {Color} context-menu-color-active [igx-context-color: 'surface'] - Sets the text color for active context menus. -/// @prop {Color} dock-background [igx-color: 'surface', rgba: .33, to-opaque: ()] - Sets the background color of the dock manager. -/// @prop {Color} joystick-background [igx-color: 'surface', rgba: .66, to-opaque: ()] - Sets the background color of the joystick. -/// @prop {Color} joystick-icon-color-active [igx-context-color: 'surface'] - Sets the color of the active joystick icons. -/// @prop {Color} pane-header-background [igx-color: 'surface', rgba: .33, to-opaque: ()] - Sets the background color for pane headers. -/// @prop {Color} pinned-header-background [igx-color: 'surface', rgba: .33, to-opaque: ()] - Sets the background colors of pinned headers. -/// @prop {Color} splitter-background [igx-color: ('grays', 300), to-opaque: ()] - Sets the background color for the splitters. -/// @prop {Color} splitter-handle [igx-color: ('grays', 50), to-opaque: ()] - Sets the background color for the splitter handles. -/// @prop {Color} text-color [igx-contrast-color: 'surface'] - Sets the text color for most elements in the dock manager. Used as the default joystick icon color. +/// @prop {Color} joystick-background [igx-color: ('surface')] - Sets the background color of the joystick. +/// @prop {Color} joystick-background-active [igx-color: ('grays', 50)] - Sets the background color of the joysticks. +/// @prop {Color} joystick-icon-color [igx-contrast-color: 'surface'] - Sets the color for the joystick icons. +/// @prop {Color} joystick-icon-color-active [igx-contrast-color: ('primary', 600)] - Sets the color of the active joystick icons. +/// @prop {Color} context-menu-background-active [igx-color: ('grays', 50)] - Sets the background color for active context menus. +/// @prop {Color} context-menu-color-active [igx-contrast-color: ('primary', 600),] - Sets the text color for active context menus. +/// @prop {Color} context-menu-background [igx-color: ('grays', 500)] - Sets the background color for context menus. +/// @prop {Color} context-menu-color [igx-contrast-color: ('grays', 500)] - Sets the text color for context menus. /// @requires {function} extend -/// @requires $_bootstrap-dock-manager -$_dark-bootstrap-dock-manager: extend( - $_bootstrap-dock-manager, ( - accent-color: ( - igx-color: 'surface', - rgba: .33, - to-opaque: #000, - ), - background-color: ( - igx-color: 'surface', - rgba: .33, - to-opaque: #000, - ), - context-menu-background: ( - igx-color: 'surface', - rgba: .66, - to-opaque: #000, - ), - context-menu-color-active: ( - igx-contrast-color: 'surface', - ), - dock-background: ( - igx-color: 'surface', - rgba: .33, - to-opaque: #000, - ), +/// @requires $bootstrap-dock-manager +/// @requires $dark-base-dock-manager +$dark-bootstrap-dock-manager: extend( + $bootstrap-dock-manager, + $dark-base-dock-manager, + ( joystick-background: ( - igx-color: 'surface', - rgba: .66, - to-opaque: #000, + igx-color: ('surface') ), - joystick-icon-color-active: ( - igx-contrast-color: 'surface', + + joystick-background-active: ( + igx-color: ('primary') ), - pane-header-background: ( - igx-color: 'surface', - rgba: .33, - to-opaque: #000, + + joystick-icon-color-active: ( + igx-contrast-color: ('primary', 600) ), - pinned-header-background: ( - igx-color: 'surface', - rgba: .33, - to-opaque: #000, + + context-menu-background-active: ( + igx-color: ('primary') ), - splitter-background: ( - igx-color: ('grays', 300), - to-opaque: #000, + + context-menu-color-active: ( + igx-contrast-color: ('primary', 600) ), - splitter-handle: ( - igx-color: ('grays', 50), - to-opaque: #000, + + context-menu-background: ( + igx-color: ('grays', 500) ), - text-color: ( - igx-contrast-color: 'surface', + + context-menu-color: ( + igx-contrast-color: ('grays', 500) ), ) ); /// Generates a dark indigo dock-manager schema. /// @type Map -/// @prop {Color} background-color [igx-color: 'surface'] - Sets the base dock manager color as well as the pane headers and tabs background colors. -/// @prop {Color} border-color [igx-color: ('grays', 100), to-opaque: (igx-color: 'surface')] - Sets the global border color in the dock manager. Also sets the pane content background and the context menu active background colors. /// @prop {Color} button-text [igx-color: ('primary', 200)] - Sets the button text color. -/// @prop {Color} context-menu-background [igx-color: ('grays', 300), to-opaque: (igx-color: 'surface')] - Sets the background color for context menus. -/// @prop {Color} joystick-background [igx-color: ('grays', 300), to-opaque: (igx-color: 'surface')] - Sets the background color of the joysticks. -/// @prop {Color} joystick-border-color [igx-color: 'surface'] - Sets the border color of the joystick. -/// @prop {Color} joystick-icon-color [igx-contrast-color: 'surface'] - Sets the color for the joystick icons. -/// @prop {Color} pane-content-background [igx-color: ('grays', 100), to-opaque: (igx-color: 'surface')] - Sets the background color of the content panes. -/// @prop {Color} pinned-header-background [igx-color: 'surface'] - Sets the background colors of pinned headers. -/// @prop {Color} tab-background-active [igx-color: ('grays', 100), to-opaque: (igx-color: 'surface')] - Sets the background color for active tabs. -/// @prop {Color} tab-background [igx-color: 'surface'] - Sets the background color for tabs. +/// @prop {Color} joystick-background [igx-color: ('surface')] - Sets the background color of the joystick. +/// @prop {Color} joystick-background-active [igx-color: ('primary')] - Sets the background color of the joysticks. +/// @prop {Color} joystick-border-color [igx-color: ('grays', 100)] - Sets the border color of the joystick. +/// @prop {Color} joystick-icon-color-active [igx-contrast-color: ('primary', 600)] - Sets the color of the active joystick icons. +/// @prop {Color} context-menu-background-active [igx-color: ('primary')] - Sets the background color for active context menus. +/// @prop {Color} context-menu-color-active [igx-contrast-color: ('primary', 600)] - Sets the text color for active context menus. +/// @prop {Color} context-menu-background [igx-contrast-color: ('primary', 600)] - Sets the background color for context menus. +/// @prop {Color} context-menu-color [igx-contrast-color: ('primary', 600)] - Sets the text color for context menus. /// @requires {function} extend -/// @requires $_indigo-dock-manager -$_dark-indigo-dock-manager: extend( - $_indigo-dock-manager, +/// @requires $indigo-dock-manager +/// @requires $dark-base-dock-manager +$dark-indigo-dock-manager: extend( + $indigo-dock-manager, + $dark-base-dock-manager, ( - background-color: ( - igx-color: 'surface', - ), - border-color: ( - igx-color: ('grays', 100), - to-opaque: ( - igx-color: 'surface', - ) - ), button-text: ( - igx-color: ('primary', 200), - ), - context-menu-background: ( - igx-color: ('grays', 300), - to-opaque: ( - igx-color: 'surface', - ) + igx-color: ('primary', 200) ), + joystick-background: ( - igx-color: ('grays', 300), - to-opaque: ( - igx-color: 'surface', - ) + igx-color: ('surface') ), - joystick-border-color: ( - igx-color: 'surface', + + joystick-background-active: ( + igx-color: ('primary') ), - joystick-icon-color: ( - igx-contrast-color: 'surface', + + joystick-icon-color-active: ( + igx-contrast-color: ('primary', 600) ), - pane-content-background: ( - igx-color: ('grays', 100), - to-opaque: ( - igx-color: 'surface', - ) + + joystick-border-color: ( + igx-color: ('grays', 100) ), - pinned-header-background: ( - igx-color: 'surface', + + context-menu-background-active: ( + igx-color: ('primary') ), - tab-background-active: ( - igx-color: ('grays', 100), - to-opaque: ( - igx-color: 'surface', - ) + + context-menu-color-active: ( + igx-contrast-color: ('primary', 600), ), - tab-background: ( - igx-color: 'surface', + + context-menu-background: ( + igx-color: ('grays', 200), + ), + + context-menu-color: ( + igx-contrast-color: ('grays', 500), ), ) ); diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_doughnut-chart.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_doughnut-chart.scss index 0d54e72fe58..a4959fcd7a9 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_doughnut-chart.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_doughnut-chart.scss @@ -1,4 +1,4 @@ -@import '../light/doughnut-chart'; +@use '../light/doughnut-chart' as *; //// /// @group schemas @@ -9,25 +9,21 @@ /// Generates a dark doughnut chart schema. /// @type {Map} /// @requires {function} extend -/// @requires $_light-doughnut-chart /// @see $default-palette -$_dark-doughnut-chart: extend($_light-doughnut-chart); +$dark-doughnut-chart: $light-doughnut-chart; /// Generates a dark fluent doughnut-chart schema. /// @type {Map} -/// @requires {function} extend -/// @requires $_fluent-doughnut-chart -$_dark-fluent-doughnut-chart: extend($_fluent-doughnut-chart); +/// @requires $fluent-doughnut-chart +$dark-fluent-doughnut-chart: $fluent-doughnut-chart; /// Generates a dark bootstrap doughnut-chart schema. /// @type {Map} -/// @requires {function} extend -/// @requires $_bootstrap-doughnut-chart -$_dark-bootstrap-doughnut-chart: extend($_bootstrap-doughnut-chart); +/// @requires $bootstrap-doughnut-chart +$dark-bootstrap-doughnut-chart: $bootstrap-doughnut-chart; /// Generates a dark indigo doughnut-chart schema. /// @type {Map} -/// @requires {function} extend -/// @requires $_indigo-doughnut-chart -$_dark-indigo-doughnut-chart: extend($_indigo-doughnut-chart); +/// @requires $indigo-doughnut-chart +$dark-indigo-doughnut-chart: $indigo-doughnut-chart; diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_drop-down.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_drop-down.scss index 8e96e29a5fc..3ecbbb5e7e5 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_drop-down.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_drop-down.scss @@ -1,48 +1,73 @@ -@import '../light/drop-down'; +@use '../../../base' as *; +@use '../light/drop-down' as *; + //// /// @group schemas /// @access public /// @author Simeon Simeonoff //// +/// Generates a base dark drop-down schema. +/// @type {Map} +/// @prop {Map} border-color [igx-color: ('grays', 100)] - The border color used for drop-down component. +$base-dark-drop-down: ( + border-color: ( + igx-color: ('grays', 100), + ), +); + /// Generates a dark drop-down schema. /// @type {Map} /// @requires {function} extend -/// @requires $_light-drop-down +/// @requires $light-drop-down +/// @requires $base-dark-drop-down /// @see $default-palette -$_dark-drop-down: extend($_light-drop-down); +$dark-drop-down: extend($light-drop-down, $base-dark-drop-down); /// Generates a dark fluent drop-down schema. /// @type {Map} -/// @prop {Color} selected-item-text-color [#fff)] - The drop-down selected item text color. -/// @prop {Color} selected-hover-item-text-color [#fff] - The drop-down selected item hover text color. -/// @prop {Color} selected-focus-item-text-color [#fff] - The drop-down selected item focus text color. +/// @prop {Map} selected-item-text-color [igx-contrast-color: 'surface'] - The drop-down selected item text color. +/// @prop {Map} selected-hover-item-text-color [igx-contrast-color: 'surface'] - The drop-down selected item hover text color. +/// @prop {Map} selected-focus-item-text-color [igx-contrast-color: 'surface'] - The drop-down selected item focus text color. /// @requires {function} extend -/// @requires $_fluent-drop-down -$_dark-fluent-drop-down: extend( - $_fluent-drop-down, +/// @requires $fluent-drop-down +/// @requires $base-dark-drop-down +$dark-fluent-drop-down: extend( + $fluent-drop-down, + $base-dark-drop-down, ( - selected-item-text-color: #fff, + selected-item-text-color: ( + igx-contrast-color: 'surface' + ), - selected-hover-item-text-color: #fff, + selected-hover-item-text-color: ( + igx-contrast-color: 'surface' + ), - selected-focus-item-text-color: #fff, + selected-focus-item-text-color: ( + igx-contrast-color: 'surface' + ), ) ); /// Generates a dark bootstrap drop-down schema. /// @type {Map} -/// @prop {Map} background-color [#222] - The drop-down background color. -/// @prop {Map} item-text-color [#fff] - The drop-down text color. -/// @prop {Map} hover-item-text-color [#fff] - The drop-down hover text color. +/// @prop {Map} item-text-color [igx-contrast-color: 'surface'] - The drop-down text color. +/// @prop {Map} hover-item-text-color [igx-contrast-color: 'surface'] - The drop-down hover text color. /// @requires {function} extend -/// @requires $_bootstrap-drop-down -$_dark-bootstrap-drop-down: extend( - $_bootstrap-drop-down, +/// @requires $bootstrap-drop-down +/// @requires $base-dark-drop-down +$dark-bootstrap-drop-down: extend( + $bootstrap-drop-down, + $base-dark-drop-down, ( - background-color: #222, - item-text-color: #fff, - hover-item-text-color: #fff, + item-text-color: ( + igx-contrast-color: 'surface' + ), + + hover-item-text-color: ( + igx-contrast-color: 'surface' + ), ) ); @@ -50,9 +75,11 @@ $_dark-bootstrap-drop-down: extend( /// @type {Map} /// @prop {Map} header-text-color [igx-contrast-color: 'surface'] - The drop-down header text color. /// @requires {function} extend -/// @requires $_indigo-drop-down -$_dark-indigo-drop-down: extend( - $_indigo-drop-down, +/// @requires $indigo-drop-down +/// @requires $base-dark-drop-down +$dark-indigo-drop-down: extend( + $indigo-drop-down, + $base-dark-drop-down, ( header-text-color: ( igx-contrast-color: 'surface' diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_expansion-panel.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_expansion-panel.scss index c303c2262c8..a6c6e553df4 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_expansion-panel.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_expansion-panel.scss @@ -1,4 +1,6 @@ -@import '../light/expansion-panel'; +@use '../../../base' as *; +@use '../light/expansion-panel' as *; + //// /// @group schemas /// @access public @@ -7,64 +9,53 @@ /// Generates a dark expansion panel schema. /// @type {Map} -/// @prop {Color} header-background [#222] - The panel header background color. -/// @prop {Color} body-background [#222] - The panel body background color. -$_base-dark-expansion-panel: ( - header-background: #222, - body-background: #222, +/// @prop {Map} header-focus-background [igx-color: ('grays', 100, .3)] - The panel header focus background color. +$base-dark-expansion-panel: ( + header-focus-background: ( + igx-color: ('grays', 100, .3) + ), ); -/// Generates a dark expansion panel schema based on a mix of $_light-expansion-panel and $_base-dark-expansion-panel. +/// Generates a dark expansion panel schema based on a mix of $light-expansion-panel and $base-dark-expansion-panel. /// @type {Map} /// @requires {function} extend -/// @requires $_light-expansion-panel -/// @requires $_base-dark-expansion-panel +/// @requires $light-expansion-panel +/// @requires $base-dark-expansion-panel /// @see $default-palette -$_dark-expansion-panel: extend($_light-expansion-panel, $_base-dark-expansion-panel); +$dark-expansion-panel: extend($light-expansion-panel, $base-dark-expansion-panel); -/// Generates a dark fluent expansion panel schema based on a mix of $_fluent-expansion-panel and $_base-dark-expansion-panel. +/// Generates a dark fluent expansion panel schema based on a mix of $fluent-expansion-panel and $base-dark-expansion-panel. /// @type {Map} /// @requires {function} extend -/// @requires $_fluent-expansion-panel -/// @requires $_base-dark-expansion-panel -$_dark-fluent-expansion-panel: extend($_fluent-expansion-panel, $_base-dark-expansion-panel); +/// @requires $fluent-expansion-panel +/// @requires $base-dark-expansion-panel +$dark-fluent-expansion-panel: extend($fluent-expansion-panel, $base-dark-expansion-panel); -/// Generates a dark bootstrap expansion panel schema based on a mix of $_bootstrap-expansion-panel and $_base-dark-expansion-panel. +/// Generates a dark bootstrap expansion panel schema based on a mix of $bootstrap-expansion-panel and $base-dark-expansion-panel. /// @type {Map} /// @requires {function} extend -/// @requires $_bootstrap-expansion-panel -/// @requires $_base-dark-expansion-panel -$_dark-bootstrap-expansion-panel: extend($_bootstrap-expansion-panel, $_base-dark-expansion-panel); +/// @requires $bootstrap-expansion-panel +/// @requires $base-dark-expansion-panel +$dark-bootstrap-expansion-panel: extend($bootstrap-expansion-panel, $base-dark-expansion-panel); /// Generates a dark indigo expansion panel schema. /// @type {Map} /// -/// @prop {Color} header-background [igx-color: 'surface'] - The panel header background color. -/// @prop {Color} body-background [igx-color: 'surface'] - The panel body background color. -/// @prop {Map} header-focus-background [igx-color: ('primary', 500), rgba: .5] - The panel header focus background color. +/// @prop {Map} header-focus-background [igx-color: ('primary', 500, .5)] - The panel header focus background color. /// @prop {Map} header-title-color [igx-color: ('grays', 800)] - The panel header title text color. /// @prop {Number} border-radius [3px] - The border radius used for expansion-panel. /// /// @requires {function} extend -/// @requires $_indigo-expansion-panel -$_dark-indigo-expansion-panel: extend( - $_indigo-expansion-panel, +/// @requires $indigo-expansion-panel +$dark-indigo-expansion-panel: extend( + $indigo-expansion-panel, ( - header-background: ( - igx-color: 'surface' - ), - - body-background: ( - igx-color: 'surface' - ), - header-title-color: ( igx-color: ('grays', 800) ), header-focus-background: ( - igx-color: ('primary', 500), - rgba: .5 + igx-color: ('primary', 500, .5) ) ) ); diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_financial-chart.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_financial-chart.scss index 3ec264fc45c..ddf1d4560e0 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_financial-chart.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_financial-chart.scss @@ -1,4 +1,4 @@ -@import '../light/financial-chart'; +@use '../light/financial-chart' as *; //// /// @group schemas @@ -8,25 +8,21 @@ /// Generates a dark financial chart schema. /// @type {Map} -/// @requires {function} extend -/// @requires $_light-financial-chart +/// @requires $light-financial-chart /// @see $default-palette -$_dark-financial-chart: extend($_light-financial-chart); +$dark-financial-chart: $light-financial-chart; /// Generates a dark fluent financial-chart schema. /// @type {Map} -/// @requires {function} extend -/// @requires $_fluent-financial-chart -$_dark-fluent-financial-chart: extend($_fluent-financial-chart); +/// @requires $fluent-financial-chart +$dark-fluent-financial-chart: $fluent-financial-chart; /// Generates a dark bootstrap financial-chart schema. /// @type {Map} -/// @requires {function} extend -/// @requires $_bootstrap-financial-chart -$_dark-bootstrap-financial-chart: extend($_bootstrap-financial-chart); +/// @requires $bootstrap-financial-chart +$dark-bootstrap-financial-chart: $bootstrap-financial-chart; /// Generates a dark indigo financial-chart schema. /// @type {Map} -/// @requires {function} extend -/// @requires $_indigo-financial-chart -$_dark-indigo-financial-chart: extend($_indigo-financial-chart); +/// @requires $indigo-financial-chart +$dark-indigo-financial-chart: $indigo-financial-chart; diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_funnel-chart.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_funnel-chart.scss index ccab12188b7..d4b0b210a64 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_funnel-chart.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_funnel-chart.scss @@ -1,4 +1,4 @@ -@import '../light/funnel-chart'; +@use '../light/funnel-chart' as *; //// /// @group schemas @@ -8,26 +8,22 @@ /// Generates a dark funnel chart schema. /// @type {Map} -/// @requires {function} extend -/// @requires $_light-funnel-chart +/// @requires $light-funnel-chart /// @see $default-palette -$_dark-funnel-chart: extend($_light-funnel-chart); +$dark-funnel-chart: $light-funnel-chart; /// Generates a dark fluent funnel-chart schema. /// @type {Map} -/// @requires {function} extend -/// @requires $_fluent-funnel-chart -$_dark-fluent-funnel-chart: extend($_fluent-funnel-chart); +/// @requires $fluent-funnel-chart +$dark-fluent-funnel-chart: $fluent-funnel-chart; /// Generates a dark bootstrap funnel-chart schema. /// @type {Map} -/// @requires {function} extend -/// @requires $_bootstrap-funnel-chart -$_dark-bootstrap-funnel-chart: extend($_bootstrap-funnel-chart); +/// @requires $bootstrap-funnel-chart +$dark-bootstrap-funnel-chart: $bootstrap-funnel-chart; /// Generates a dark indigo funnel-chart schema. /// @type {Map} -/// @requires {function} extend -/// @requires $_indigo-funnel-chart -$_dark-indigo-funnel-chart: extend($_indigo-funnel-chart); +/// @requires $ndigo-funnel-chart +$dark-indigo-funnel-chart: $indigo-funnel-chart; diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_gauge.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_gauge.scss index 043a18d6ac0..d4cc2d03d68 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_gauge.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_gauge.scss @@ -1,4 +1,4 @@ -@import '../light/gauge'; +@use '../light/gauge' as *; //// /// @group schemas @@ -8,49 +8,41 @@ /// Generates dark gauge schemas. /// @type {Map} -/// @requires {function} extend -/// @requires $_light-linear-gauge -$_dark-linear-gauge: extend($_light-linear-gauge); +/// @requires $light-linear-gauge +$dark-linear-gauge: $light-linear-gauge; /// Generates dark gauge schemas. /// @type {Map} -/// @requires {function} extend -/// @requires $_light-radial-gauge -$_dark-radial-gauge: extend($_light-radial-gauge); +/// @requires $light-radial-gauge +$dark-radial-gauge: $light-radial-gauge; /// Generates a dark fluent gauge schema. /// @type {Map} -/// @requires {function} extend -/// @requires $_fluent-linear-gauge -$_dark-fluent-linear-gauge: extend($_fluent-linear-gauge); +/// @requires $fluent-linear-gauge +$dark-fluent-linear-gauge: $fluent-linear-gauge; /// Generates a dark fluent gauge schema. /// @type {Map} -/// @requires {function} extend -/// @requires $_fluent-radial-gauge -$_dark-fluent-radial-gauge: extend($_fluent-radial-gauge); +/// @requires $fluent-radial-gauge +$dark-fluent-radial-gauge: $fluent-radial-gauge; /// Generates a dark bootstrap gauge schema. /// @type {Map} -/// @requires {function} extend -/// @requires $_bootstrap-linear-gauge -$_dark-bootstrap-linear-gauge: extend($_bootstrap-linear-gauge); +/// @requires $bootstrap-linear-gauge +$dark-bootstrap-linear-gauge: $bootstrap-linear-gauge; /// Generates a dark bootstrap gauge schema. /// @type {Map} -/// @requires {function} extend -/// @requires $_bootstrap-radial-gauge -$_dark-bootstrap-radial-gauge: extend($_bootstrap-radial-gauge); +/// @requires $bootstrap-radial-gauge +$dark-bootstrap-radial-gauge: $bootstrap-radial-gauge; /// Generates a dark indigo gauge schema. /// @type {Map} -/// @requires {function} extend -/// @requires $_indigo-linear-gauge -$_dark-indigo-linear-gauge: extend($_indigo-linear-gauge); +/// @requires $indigo-linear-gauge +$dark-indigo-linear-gauge: $indigo-linear-gauge; /// Generates a dark indigo gauge schema. /// @type {Map} -/// @requires {function} extend -/// @requires $_indigo-radial-gauge -$_dark-indigo-radial-gauge: extend($_indigo-radial-gauge); +/// @requires $indigo-radial-gauge +$dark-indigo-radial-gauge: $indigo-radial-gauge; diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_geo-map.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_geo-map.scss index 0bff46c150b..f0ed26f338e 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_geo-map.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_geo-map.scss @@ -1,4 +1,4 @@ -@import '../light/geo-map'; +@use '../light/geo-map' as *; //// /// @group schemas @@ -8,29 +8,25 @@ /// Generates a dark base geo map schema. /// @type {Map} -/// @requires {function} extend -/// @requires $_light-geo-map -/// @see $_light-geo-map -$_dark-geo-map: extend($_light-geo-map); +/// @requires $light-geo-map +/// @see $light-geo-map +$dark-geo-map: $light-geo-map; /// Generates a dark fluent geo map schema. /// @type {Map} -/// @requires {function} extend -/// @requires $_fluent-geo-map -/// @see $_fluent-geo-map -$_dark-fluent-geo-map: extend($_fluent-geo-map); +/// @requires $fluent-geo-map +/// @see $fluent-geo-map +$dark-fluent-geo-map: $fluent-geo-map; /// Generates a dark bootstrap geo map schema. /// @type {Map} -/// @requires {function} extend -/// @requires $_bootstrap-geo-map -/// @see $_bootstrap-geo-map -$_dark-bootstrap-geo-map: extend($_bootstrap-geo-map); +/// @requires $bootstrap-geo-map +/// @see $bootstrap-geo-map +$dark-bootstrap-geo-map: $bootstrap-geo-map; /// Generates a dark indigo geo map schema. /// @type {Map} -/// @requires {function} extend -/// @requires $_indigo-geo-map -/// @see $_indigo-geo-map -$_dark-indigo-geo-map: extend($_indigo-geo-map); +/// @requires $indigo-geo-map +/// @see $indigo-geo-map +$dark-indigo-geo-map: $indigo-geo-map; diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_graph.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_graph.scss index 0b5f12b64ce..1ea376cfbf9 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_graph.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_graph.scss @@ -1,4 +1,4 @@ -@import '../light/graph'; +@use '../light/graph' as *; //// /// @group schemas @@ -8,26 +8,22 @@ /// Generates a dark graph schema. /// @type {Map} -/// @requires {function} extend -/// @requires $_light-graph +/// @requires $light-graph /// @see $default-palette -$_dark-graph: extend($_light-graph); +$dark-graph: $light-graph; /// Generates a dark fluent graph schema. /// @type {Map} -/// @requires {function} extend -/// @requires $_fluent-graph -$_dark-fluent-graph: extend($_fluent-graph); +/// @requires $fluent-graph +$dark-fluent-graph: $fluent-graph; /// Generates a dark bootstrap graph schema. /// @type {Map} -/// @requires {function} extend -/// @requires $_bootstrap-graph -$_dark-bootstrap-graph: extend($_bootstrap-graph); +/// @requires $bootstrap-graph +$dark-bootstrap-graph: $bootstrap-graph; /// Generates a dark indigo graph schema. /// @type {Map} -/// @requires {function} extend -/// @requires $_indigo-graph -$_dark-indigo-graph: extend($_indigo-graph); +/// @requires $indigo-graph +$dark-indigo-graph: $indigo-graph; diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_grid-filtering.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_grid-filtering.scss index 55c37b404ad..8554f5af089 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_grid-filtering.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_grid-filtering.scss @@ -1,4 +1,5 @@ -@import '../light/grid-filtering'; +@use '../light/grid-filtering' as *; + //// /// @group schemas /// @access public @@ -7,25 +8,21 @@ /// Generates a dark grid-filtering schema. /// @type {Map} -/// @requires {function} extend -/// @requires $_light-grid-filtering +/// @requires $light-grid-filtering /// @see $default-palette -$_dark-grid-filtering: extend($_light-grid-filtering); +$dark-grid-filtering: $light-grid-filtering; /// Generates a dark fluent grid-filtering schema. /// @type {Map} -/// @requires {function} extend -/// @requires $_fluent-grid-filtering -$_dark-fluent-grid-filtering: extend($_fluent-grid-filtering); +/// @requires $fluent-grid-filtering +$dark-fluent-grid-filtering: $fluent-grid-filtering; /// Generates a dark bootstrap grid-filtering schema. /// @type {Map} -/// @requires {function} extend -/// @requires $_bootstrap-grid-filtering -$_dark-bootstrap-grid-filtering: extend($_bootstrap-grid-filtering); +/// @requires $bootstrap-grid-filtering +$dark-bootstrap-grid-filtering: $bootstrap-grid-filtering; /// Generates a dark indigo grid-filtering schema. /// @type {Map} -/// @requires {function} extend -/// @requires $_indigo-grid-filtering -$_dark-indigo-grid-filtering: extend($_indigo-grid-filtering); +/// @requires $indigo-grid-filtering +$dark-indigo-grid-filtering: $indigo-grid-filtering; diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_grid-summary.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_grid-summary.scss index 26196effb92..99c2e66df36 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_grid-summary.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_grid-summary.scss @@ -1,4 +1,5 @@ -@import '../light/grid-summary'; +@use '../../../base' as *; +@use '../light/grid-summary' as *; //// /// @group schemas @@ -8,35 +9,32 @@ /// Generates a dark grid-summary schema. /// @type {Map} -/// @requires {function} extend -/// @requires $_light-grid-summary +/// @requires $light-grid-summary /// @see $default-palette -$_dark-grid-summary: extend($_light-grid-summary); +$dark-grid-summary: $light-grid-summary; /// Generates a dark fluent grid-summary schema. /// @type {Map} -/// @requires {function} extend -/// @requires $_fluent-grid-summary -$_dark-fluent-grid-summary: extend($_fluent-grid-summary); +/// @requires $fluent-grid-summary +$dark-fluent-grid-summary: $fluent-grid-summary; /// Generates a dark bootstrap grid-summary schema. /// @type {Map} -/// @requires {function} extend -/// @requires $_bootstrap-grid-summary -$_dark-bootstrap-grid-summary: extend($_bootstrap-grid-summary); +/// @requires $bootstrap-grid-summary +$dark-bootstrap-grid-summary: $bootstrap-grid-summary; /// Generates a dark indigo grid-summary schema. /// @type {Map} -/// @property {Color} background-color [igx-color: 'surface'] - The summaries background color is inherited form igx-grid__tfoot. +/// @property {Color} background-color [igx-color: 'surface'] - The summaries background color is inherited form igx-grid footer. /// @property {Map} focus-background-color [igx-color: ('grays', 100)] - The background color when a summary item is on focus. /// @property {Map} label-color [igx-color: ('primary', 200)] - The summaries label color. /// @property {map} label-hover-color [igx-color: ('primary', 100)] - The summaries hover label color. /// @property {Color} result-color [igx-color: 'surface'] - The summaries value/result color. /// @property {Map} pinned-border-color [igx-color: ('primary', 200)] - The border color of the summary panel. /// @requires {function} extend -/// @requires $_indigo-grid-summary -$_dark-indigo-grid-summary: extend( - $_indigo-grid-summary, +/// @requires $indigo-grid-summary +$dark-indigo-grid-summary: extend( + $indigo-grid-summary, ( background-color: ( igx-color: 'surface', diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_grid-toolbar.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_grid-toolbar.scss index 030f6bb5f27..4f6c21c7a33 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_grid-toolbar.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_grid-toolbar.scss @@ -1,4 +1,6 @@ -@import '../light/grid-toolbar'; +@use '../../../base' as *; +@use '../light/grid-toolbar' as *; + //// /// @group schemas /// @access public @@ -9,42 +11,42 @@ /// @type {Map} /// @prop {Map} background-color [#222] - The toolbar background color. /// @prop {Map} dropdown-background [#222] - The toolbar drop-down background color. -$_base-dark-grid-toolbar: ( +$base-dark-grid-toolbar: ( background-color: #222, dropdown-background: #222 ); -/// Generates a dark grid-toolbar schema based on a mix of $_light-grid-toolbar and $_base-dark-grid-toolbar. +/// Generates a dark grid-toolbar schema based on a mix of $light-grid-toolbar and $base-dark-grid-toolbar. /// @type {Map} /// @requires {function} extend -/// @requires $_light-grid-toolbar -/// @requires $_base-dark-grid-toolbar +/// @requires $light-grid-toolbar +/// @requires $base-dark-grid-toolbar /// @see $default-palette -$_dark-grid-toolbar: extend($_light-grid-toolbar, $_base-dark-grid-toolbar); +$dark-grid-toolbar: extend($light-grid-toolbar, $base-dark-grid-toolbar); -/// Generates a dark fluent grid-toolbar schema based on a mix of $_fluent-grid-toolbar and $_base-dark-grid-toolbar.. +/// Generates a dark fluent grid-toolbar schema based on a mix of $fluent-grid-toolbar and $base-dark-grid-toolbar.. /// @type {Map} /// @requires {function} extend -/// @requires $_fluent-grid-toolbar -/// @requires $_base-dark-grid-toolbar -$_dark-fluent-grid-toolbar: extend($_fluent-grid-toolbar, $_base-dark-grid-toolbar); +/// @requires $fluent-grid-toolbar +/// @requires $base-dark-grid-toolbar +$dark-fluent-grid-toolbar: extend($fluent-grid-toolbar, $base-dark-grid-toolbar); -/// Generates a dark bootstrap grid-toolbar schema based on a mix of $_bootstrap-grid-toolbar and $_base-dark-grid-toolbar.. +/// Generates a dark bootstrap grid-toolbar schema based on a mix of $bootstrap-grid-toolbar and $base-dark-grid-toolbar.. /// @type {Map} /// @requires {function} extend -/// @requires $_bootstrap-grid-toolbar -/// @requires $_base-dark-grid-toolbar -$_dark-bootstrap-grid-toolbar: extend($_bootstrap-grid-toolbar, $_base-dark-grid-toolbar); +/// @requires $bootstrap-grid-toolbar +/// @requires $base-dark-grid-toolbar +$dark-bootstrap-grid-toolbar: extend($bootstrap-grid-toolbar, $base-dark-grid-toolbar); /// Generates a dark indigo grid-toolbar schema. /// @type {Map} /// @property {Map} background-color [igx-color: 'surface'] - The toolbar background color. /// @requires {function} extend -/// @requires $_indigo-grid-toolbar -/// @requires $_base-dark-grid-toolbar -$_dark-indigo-grid-toolbar: extend( - $_indigo-grid-toolbar, - $_base-dark-grid-toolbar, +/// @requires $indigo-grid-toolbar +/// @requires $base-dark-grid-toolbar +$dark-indigo-grid-toolbar: extend( + $indigo-grid-toolbar, + $base-dark-grid-toolbar, ( background-color: ( igx-color: 'surface', diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_grid.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_grid.scss index 25f43f00d14..d290fe50734 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_grid.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_grid.scss @@ -1,4 +1,5 @@ -@import '../light/grid'; +@use '../../../base' as *; +@use '../light/grid' as *; //// /// @group schemas @@ -8,149 +9,116 @@ /// Generates the base dark grid schema. /// @type {Map} -/// @prop {Map} header-background [igx-color: ('grays', 100), to-opaque: #222] - The table header background color. -/// @prop {Map} header-selected-background [igx-color: ('secondary', 500), rgba: .24, to-opaque: #222, lighten-color: 8%] - The table header background color when selected (ex. column selection). -/// @prop {Map} header-selected-text-color [igx-color: ('secondary', 500), rgba: .24, to-opaque: #222, lighten-color: 8%, text-contrast: ()] - The table header text color when selected (ex. column selection). -/// @prop {Color} content-background [#222] - The table body background color. -/// @prop {Color} row-odd-background [#222] - The background color of odd rows. -/// @prop {Color} row-even-background [#222] - The background color of even rows. -/// @prop {Map} row-hover-background [igx-color: ('grays', 100), to-opaque: #222] - The hover row background color. -/// @prop {Color} row-hover-text-color [#fff] - The hover row text color. -/// @prop {Map} row-selected-background [igx-color: ('secondary', 500), rgba: .24, to-opaque: #222] - The selected row background color. -/// @prop {Map} row-selected-hover-background [igx-color: ('secondary', 'A700'), rgba: .24, to-opaque: #222, lighten-color: 5%] - The selected row background color on hover. -/// @prop {Color} row-selected-text-color [#fff] - The selected row text color. -/// @prop {Color} ghost-header-background [#222] - The dragged header background color. -/// @prop {Color} cell-editing-background [#222] - The background for the cell in editing mode. -/// @prop {Map} cell-selected-background [igx-color: ('grays', 200), to-opaque: #222] - The selected cell background color. -/// @prop {Map} cell-selected-text-color [#fff] - The selected cell text color. -/// @prop {Map} grouparea-background [igx-color: ('grays', 100), to-opaque: #222] - The grid group area background color. -/// @prop {Map} group-row-background [igx-color: ('grays', 100), to-opaque: #222] - The grid group row background color. -/// @prop {Map} group-row-selected-background [igx-color: ('grays', 200), to-opaque: #222] - The drop area background on drop color. -/// @prop {Color} filtering-header-background [#222] - The background color of the filtered column header. -/// @prop {Color} filtering-row-background [#222] - The background color of the filtering row. -/// @prop {Map} body-summaries-background [igx-color: ('grays', 300), to-opaque: #222] - The background color of the summary groups located the body. -/// @prop {Map} body-summaries-text-color [igx-color: ('grays', 100), to-opaque: #222, text-contrast: ()] - The text color of the summary groups located the body. -/// @prop {Map} root-summaries-background [igx-color: ('grays', 300), to-opaque: #222] - The background color of the summary groups located the footer. -/// @prop {Map} root-summaries-text-color [igx-color: ('grays', 300), to-opaque: #222, text-contrast: ()] - The text color of the summary groups located the footer. +/// @prop {Map} header-background [igx-color: ('grays', 100)] - The table header background color. +/// @prop {Map} header-selected-background [igx-color: ('secondary', 600)] - The table header background color when selected (ex. column selection). +/// @prop {Map} header-selected-text-color [igx-contrast-color: ('secondary', 600)] - The table header text color when selected (ex. column selection). +/// @prop {Color} content-background [igx-color: 'surface'] - The table body background color. +/// @prop {Map} row-hover-background [igx-color: ('grays', 100)] - The hover row background color. +/// @prop {Color} row-hover-text-color [igx-contrast-color: ('grays', 100)] - The hover row text color. +/// @prop {Map} row-selected-background [igx-color: ('secondary', 'A700')] - The selected row background color. +/// @prop {Map} row-selected-hover-background [igx-color: ('secondary', 'A700')] - The selected row background color on hover. +/// @prop {Color} row-selected-text-color [igx-contrast-color: ('secondary', 'A700')] - The selected row text color. +/// @prop {Map} cell-selected-background [igx-color: ('grays', 200)] - The selected cell background color. +/// @prop {Map} cell-selected-text-color [igx-contrast-color: ('grays', 200)] - The selected cell text color. +/// @prop {Map} grouparea-background [igx-color: ('grays', 100)] - The grid group area background color. +/// @prop {Map} group-row-background [igx-color: ('grays', 100)] - The grid group row background color. +/// @prop {Map} group-row-selected-background [igx-color: ('grays', 200)] - The drop area background on drop color. +/// @prop {Map} body-summaries-background [igx-color: ('grays', 100)] - The background color of the summary groups located the body. +/// @prop {Map} body-summaries-text-color [igx-contrast-color: ('grays', 100)] - The text color of the summary groups located the body. +/// @prop {Map} root-summaries-background [igx-color: ('grays', 200)] - The background color of the summary groups located the footer. +/// @prop {Map} root-summaries-text-color [igx-contrast-color: ('grays', 200)] - The text color of the summary groups located the footer. /// @prop {Map} row-highlight [igx-color: ('secondary', 500)] - The highlight color of a row. /// @prop {Map} row-ghost-background [igx-color: ('primary', 900)] - The dragged row background color. -/// @prop {Map} cell-selected-within-background [igx-color: ('secondary', 500), rgba: .8, to-opaque: #222] - The background of the selected cell inside a selected row/column. -/// @prop {Map} cell-selected-within-text-color [igx-contrast-color: ('secondary', 500)] - The color of the selected cell inside a selected row/column. -/// @prop {Map} row-selected-hover-text-color [igx-contrast-color: ('secondary', A700)] - The selected row hover text color. - -$_base-dark-grid: ( +/// @prop {Map} cell-selected-within-background [igx-color: ('secondary', 'A400')] - The background of the selected cell inside a selected row/column. +/// @prop {Map} cell-selected-within-text-color [igx-contrast-color: ('secondary', 'A400')] - The color of the selected cell inside a selected row/column. +/// @prop {Map} row-selected-hover-text-color [igx-contrast-color: ('secondary', 'A700')] - The selected row hover text color. +$base-dark-grid: ( header-background: ( - igx-color: ('grays', 100), - to-opaque: #222 + igx-color: ('grays', 100) + ), + + drop-area-background: ( + igx-color: ('grays', 100, .5) ), header-selected-background: ( - igx-color: ('secondary', 500), - rgba: .24, - to-opaque: #222, - lighten-color: 8% + igx-color: ('secondary', 600) ), header-selected-text-color: ( - igx-color: ('secondary', 500), - rgba: .24, - to-opaque: #222, - lighten-color: 8%, - text-contrast: () + igx-contrast-color: ('secondary', 600) ), - content-background: #222, - - row-odd-background: #222, - - row-even-background: #222, + content-background: ( + igx-color: 'surface', + ), row-hover-background: ( - igx-color: ('grays', 100), - to-opaque: #222 + igx-color: ('grays', 100) ), - row-hover-text-color: #fff, + row-hover-text-color: ( + igx-contrast-color: ('grays', 100) + ), row-selected-background: ( - igx-color: ('secondary', 500), - rgba: .24, - to-opaque: #222 + igx-color: ('secondary', 'A700'), + ), + + row-selected-text-color: ( + igx-contrast-color: ('secondary', 'A700') ), cell-selected-within-background: ( - igx-color: ('secondary', 500), - rgba: .8, - to-opaque: #222, + igx-color: ('secondary', 'A400'), ), cell-selected-within-text-color: ( - igx-contrast-color: ('secondary', 500) + igx-contrast-color: ('secondary', 'A400') ), row-selected-hover-background: ( igx-color: ('secondary', 'A700'), - rgba: .24, - to-opaque: #222, - lighten-color: 5% ), row-selected-hover-text-color: ( igx-contrast-color: ('secondary', 'A700'), ), - row-selected-text-color: #fff, - - ghost-header-background: #222, - - cell-editing-background: #222, - cell-selected-background: ( - igx-color: ('grays', 200), - to-opaque: #222 + igx-color: ('grays', 100), + ), + + cell-selected-text-color: ( + igx-contrast-color: ('grays', 100) ), grouparea-background: ( - igx-color: ('grays', 100), - to-opaque: #222 + igx-color: ('grays', 50), ), group-row-background: ( - igx-color: ('grays', 100), - to-opaque: #222 + igx-color: ('grays', 50), ), group-row-selected-background: ( - igx-color: ('grays', 200), - to-opaque: #222 + igx-color: ('grays', 100), ), - filtering-header-background: #222, - - filtering-row-background: #222, - - cell-selected-text-color: #fff, - body-summaries-background: ( - igx-color: ('grays', 300), - to-opaque: #222 + igx-color: ('grays', 50), ), body-summaries-text-color: ( - igx-color: ('grays', 100), - to-opaque: #222, - text-contrast: () + igx-contrast-color: ('grays', 50), ), root-summaries-background: ( - igx-color: ('grays', 300), - to-opaque: #222 + igx-color: ('grays', 50), ), root-summaries-text-color: ( - igx-color: ('grays', 300), - to-opaque: #222, - text-contrast: () + igx-contrast-color: ('grays', 50), ), row-highlight: ( @@ -162,57 +130,54 @@ $_base-dark-grid: ( ) ); -/// Generates a dark grid schema based on a mix of $_light-grid and $_base-dark-grid. +/// Generates a dark grid schema based on a mix of $light-grid and $base-dark-grid. /// @type {Map} /// @requires {function} extend -/// @requires $_light-grid -/// @requires $_base-dark-grid +/// @requires $light-grid +/// @requires $base-dark-grid /// @see $default-palette -$_dark-grid: extend($_light-grid, $_base-dark-grid); +$dark-grid: extend($light-grid, $base-dark-grid); -/// Generates a dark fluent grid schema based on a mix of $_fluent-grid and $_base-dark-grid. -/// @prop {Map} header-selected-background [igx-color: ('grays', 200), to-opaque: #222] - The table header background color when selected (ex. column selection). -/// @prop {Map} header-selected-text-color [igx-color: ('grays', 200), to-opaque: #222, text-contrast: ()] - The table header text color when selected (ex. column selection). -/// @prop {Map} row-hover-background [igx-color: ('grays', 100), to-opaque: #222] - The hover row background color. -/// @prop {Map} row-selected-background [igx-color: ('grays', 200), to-opaque: #222] - The selected row background color. -/// @prop {Map} row-selected-hover-background [igx-color: ('grays', '300'), to-opaque: #222] - The selected row background color on hover. -/// @prop {Map} cell-selected-within-background [igx-color: ('grays', 200), rgba: .2, to-opaque: #222] - The background of the selected cell inside a selected row/column. -/// @prop {Map} cell-selected-within-text-color [igx-contrast-color: ('grays', 200)] - The color of the selected cell inside a selected row/column. +/// Generates a dark fluent grid schema based on a mix of $fluent-grid and $base-dark-grid. +/// @prop {Map} header-selected-background [igx-color: ('grays', 200)] - The table header background color when selected (ex. column selection). +/// @prop {Map} header-selected-text-color [igx-contrast-color: ('grays', 200)] - The table header text color when selected (ex. column selection). +/// @prop {Map} row-hover-background [igx-color: ('grays', 100)] - The hover row background color. +/// @prop {Map} row-selected-background [igx-color: ('grays', 200)] - The selected row background color. +/// @prop {Map} row-selected-hover-background [igx-color: ('grays', 300)] - The selected row background color on hover. +/// @prop {Map} cell-selected-within-background [igx-color: ('grays', 300)] - The background of the selected cell inside a selected row/column. +/// @prop {Map} cell-selected-within-text-color [igx-contrast-color: ('grays', 300)] - The color of the selected cell inside a selected row/column. /// @prop {Map} row-selected-hover-text-color [igx-contrast-color: ('grays', 300)] - The selected row hover text color. /// /// @requires {function} extend -/// @requires $_fluent-grid -/// @requires $_base-dark-grid -$_dark-fluent-grid: extend( - $_fluent-grid, - $_base-dark-grid, +/// @requires $fluent-grid +/// @requires $base-dark-grid +$dark-fluent-grid: extend( + $fluent-grid, + $base-dark-grid, ( header-selected-background: ( igx-color: ('grays', 200), - to-opaque: #222 ), header-selected-text-color: ( - igx-color: ('grays', 200), - to-opaque: #222, - text-contrast: () + igx-contrast-color: ('grays', 200), ), row-hover-background: ( - igx-color: ('grays', 100), - to-opaque: #222 + igx-color: ('grays', 100) + ), + + pinned-border-color: ( + igx-color: ('grays', 300, .24), ), row-selected-background: ( - igx-color: ('grays', 200), - to-opaque: #222 + igx-color: ('grays', 100), ), cell-selected-within-background: ( - igx-color: ('grays', 200), - rgba: .2, - to-opaque: #222, + igx-color: ('grays', 100), ), cell-selected-within-text-color: ( @@ -220,57 +185,31 @@ $_dark-fluent-grid: extend( ), row-selected-hover-background: ( - igx-color: ('grays', 300), - to-opaque: #222 + igx-color: ('grays', 200) ), row-selected-hover-text-color: ( - igx-contrast-color: ('grays', 300), + igx-contrast-color: ('grays', 200), ), - ) -); - -/// Generates a dark bootstrap grid schema based on a mix of $_bootstrap-grid and $_base-dark-grid. -/// @type {Map} -/// -/// @prop {Color} header-background [#222] - The table header background color. -/// @prop {Color} header-text-color [#fff] - The table header text color. -/// @prop {Map} header-selected-background [igx-color: ('secondary', 500), rgba: .24, to-opaque: #222] - The table header background color when selected (ex. column selection). -/// @prop {Map} header-selected-text-color [igx-color: ('secondary', 500), rgba: .24, to-opaque: #222, text-contrast: ()] - The table header text color when selected (ex. column selection). -/// @prop {Map} cell-selected-within-background [igx-color: ('secondary', 500), rgba: .5, to-opaque: #222] - The background of the selected cell inside a selected row/column. -/// -/// @requires {function} extend -/// @requires $_bootstrap-grid -/// @requires $_base-dark-grid -$_dark-bootstrap-grid: extend( - $_bootstrap-grid, - $_base-dark-grid, - ( - header-background: #222, - header-text-color: #fff, - - cell-selected-within-background: ( - igx-color: ('secondary', 500), - rgba: .5, - to-opaque: #222, - ), - - header-selected-background: ( - igx-color: ('secondary', 500), - rgba: .24, - to-opaque: #222, + header-border-color: ( + igx-color: ('grays', 200, .24) ), - header-selected-text-color: ( - igx-color: ('secondary', 500), - rgba: .24, - to-opaque: #222, - text-contrast: () + row-border-color: ( + igx-color: ('grays', 200, .24), ), ) ); + +/// Generates a dark bootstrap grid schema based on a mix of $bootstrap-grid and $base-dark-grid. +/// @type {Map} +/// @requires {function} extend +/// @requires $bootstrap-grid +/// @requires $base-dark-grid +$dark-bootstrap-grid: extend($bootstrap-grid, $base-dark-grid); + /// Generates a dark indigo grid schema. /// @type {Map} /// @@ -278,48 +217,38 @@ $_dark-bootstrap-grid: extend( /// @prop {Color} header-text-color [igx-contrast-color: 'surface'] - The table header text color. /// @prop {Map} header-selected-background [igx-color: 'primary'] - The table header background color when selected (ex. column selection). /// @prop {Map} header-selected-text-color [igx-contrast-color: 'primary'] - The table header text color when selected (ex. column selection). -/// @prop {Map} header-border-color [igx-color: ('grays', 100)] - The color used for header borders. -/// -/// @prop {Map} filtering-header-text-color [igx-color: ('grays', 100), to-opaque: (igx-color: 'surface'), text-contrast: ()] - The text color color of the filtered column header. -/// -/// +/// @prop {Map} header-border-color [igx-color: ('grays', 100, .24)] - The color used for header borders. +/// @prop {Map} filtering-header-text-color [igx-contrast-color: ('grays', 100)] - The text color color of the filtered column header. /// @prop {Map} cell-selected-background [igx-color: ('grays', 200)] - The selected cell background color. /// @prop {Map} cell-active-border-color [igx-contrast-color: 'surface'] - The active(focused) cell border color. -/// @prop {Map} cell-selected-text-color [igx-color: ('grays', 200), to-opaque: (igx-color: 'surface'), text-contrast: ()] - The selected cell text color. +/// @prop {Map} cell-selected-text-color [igx-contrast-color: ('grays', 200), to-opaque: (igx-color: 'surface'), text-contrast: ()] - The selected cell text color. /// @prop {Color} cell-editing-background [igx-color: 'surface'] - The background for the cell in editing mode. -/// -/// @prop {Color} filtering-header-background [igx-color: ('grays', 100), to-opaque: (igx-color: 'surface')] - The background color of the filtered column header. +/// @prop {Color} filtering-header-background [igx-color: ('grays', 100)] - The background color of the filtered column header. /// @prop {Color} content-background [igx-color: 'surface'] - The table body background color. -/// -/// @prop {Map} row-border-color [igx-color: ('grays', 100)] - The row bottom border color. -/// @prop {Map} row-hover-background [igx-color: ('primary', 100), rgba: .12, to-opaque: (igx-color: 'surface')] - The hover row background color. -/// +/// @prop {Map} row-border-color [igx-color: ('grays', 50, .24)] - The row bottom border color. +/// @prop {Map} row-hover-background [igx-color: ('primary', 200)] - The hover row background color. /// @prop {Map} sorted-header-icon-color [igx-contrast-color: 'surface'] - The sorted table header icon color. /// @prop {Map} sortable-header-icon-hover-color [igx-contrast-color: 'surface'] - The icon color on hover in grid header when the column is sortable. -/// /// @prop {Map} row-selected-background [igx-color: ('primary', 500)] - The selected row background color. /// @prop {Color} row-selected-text-color [igx-contrast-color: 'primary'] - The selected row text color. /// @prop {Color} row-selected-hover-text-color [igx-contrast-color: ('primary', 400)] - The selected row text color. /// @prop {Map} row-selected-hover-background [igx-color: ('primary', 400)] - The selected row hover background. -/// @prop {Color} row-odd-background [igx-color: ('grays', 100), to-opaque: (igx-color: 'surface')] - The background color of odd rows. -/// @prop {Color} row-even-background [igx-color: ('grays', 100), to-opaque: (igx-color: 'surface')] - The background color of even rows. -/// @prop {Color} row-hover-text-color [igx-color: ('primary', 100), to-opaque: (igx-color: 'surface'), text-contrast: ()] - The hover row text color. -/// +/// @prop {Color} row-odd-background [igx-color: ('grays', 100)] - The background color of odd rows. +/// @prop {Color} row-even-background [igx-color: ('grays', 100)] - The background color of even rows. +/// @prop {Color} row-hover-text-color [igx-contrast-color: ('grays', 200)] - The hover row text color. /// @prop {Map} pinned-border-color [igx-color: ('primary', 200)] - The color of the pinned border. -/// /// @prop {Map} grouparea-background [igx-color: 'surface'] - The grid group area background color. /// @prop {Map} grouparea-color [igx-contrast-color: 'surface'] - The grid group area color. /// @prop {Map} drop-area-background [igx-color: ('grays', 200)] - The drop area background color. -/// @prop {Map} drop-area-text-color [igx-color: ('grays', 200), to-opaque: (igx-color: 'surface'), text-contrast: (), rgba: .87] - The drop area text color. -/// @prop {Map} drop-area-icon-color [igx-color: ('grays', 200), to-opaque: (igx-color: 'surface'), text-contrast: (), rgba: .87] - The drop area icon color. +/// @prop {Map} drop-area-text-color [igx-contrast-color: ('grays', 200)] - The drop area text color. +/// @prop {Map} drop-area-icon-color [igx-contrast-color: ('grays', 200)] - The drop area icon color. /// @prop {Map} root-summaries-background [igx-color: 'surface'] - The background color of the summary groups located the footer. /// @prop {Map} root-summaries-text-color [igx-contrast-color: 'surface'] - The text color of the summary groups located the footer. /// @prop {Map} body-summaries-background [igx-color: 'surface'] - The background color of the summary groups located the body. /// @prop {Map} body-summaries-text-color [igx-contrast-color: 'surface'] - The text color of the summary groups located the body. /// @prop {Map} group-row-background [igx-color: 'surface'] - The grid group row background color. -/// @prop {Map} group-row-selected-background [igx-color: ('primary', 100), rgba: .12, to-opaque: (igx-color: 'surface')] - The drop area background on drop color. +/// @prop {Map} group-row-selected-background [igx-color: ('grays', 200)] - The drop area background on drop color. /// @prop {Map} group-count-text-color [igx-contrast-color: ('primary', 300)] - The grid group row cont badge text color. -/// /// @prop {Map} group-label-column-name-text [igx-contrast-color: 'surface'] - The grid group row column name text color. /// @prop {Map} group-label-icon [igx-contrast-color: 'surface'] - The grid group row icon color. /// @prop {Map} group-label-text [igx-color: ('grays', 700)] - The grid group row text color. @@ -330,9 +259,9 @@ $_dark-bootstrap-grid: extend( /// @prop {Map} cell-selected-within-text-color [igx-contrast-color: ('primary', 400)] - The color of the selected cell inside a selected row/column. /// /// @requires {function} extend -/// @requires $_indigo-grid -$_dark-indigo-grid: extend( - $_indigo-grid, +/// @requires $indigo-grid +$dark-indigo-grid: extend( + $indigo-grid, ( header-background: ( igx-color: 'surface', @@ -359,22 +288,15 @@ $_dark-indigo-grid: extend( ), header-border-color: ( - igx-color: ('grays', 100) + igx-color: ('grays', 50, .24) ), filtering-header-background: ( - igx-color: ('grays', 100), - to-opaque: ( - igx-color: 'surface', - ) + igx-color: ('grays', 100) ), filtering-header-text-color: ( - igx-color: ('grays', 100), - to-opaque: ( - igx-color: 'surface', - ), - text-contrast: () + igx-contrast-color: ('grays', 100), ), content-background: ( @@ -390,56 +312,31 @@ $_dark-indigo-grid: extend( ), drop-area-text-color: ( - igx-color: ('grays', 200), - to-opaque: ( - igx-color: 'surface', - ), - text-contrast: (), - rgba: .87 + igx-contrast-color: ('grays', 200), ), drop-area-icon-color: ( - igx-color: ('grays', 200), - to-opaque: ( - igx-color: 'surface', - ), - text-contrast: (), - rgba: .87 + igx-contrast-color: ('grays', 200), ), row-odd-background: ( - igx-color: ('grays', 100), - to-opaque: ( - igx-color: 'surface', - ) + igx-color: ('grays', 100) ), row-even-background: ( - igx-color: ('grays', 100), - to-opaque: ( - igx-color: 'surface', - ) + igx-color: ('grays', 100) ), row-border-color: ( - igx-color: ('grays', 100), + igx-color: ('grays', 50, .24), ), row-hover-background: ( - igx-color: ('primary', 100), - rgba: .12, - to-opaque: ( - igx-color: 'surface', - ) + igx-color: ('grays', 200), ), row-hover-text-color: ( - igx-color: ('primary', 100), - rgba: .12, - to-opaque: ( - igx-color: 'surface', - ), - text-contrast: (), + igx-contrast-color: ('grays', 200), ), row-selected-background: ( @@ -471,11 +368,7 @@ $_dark-indigo-grid: extend( ), group-row-selected-background: ( - igx-color: ('primary', 100), - rgba: .12, - to-opaque: ( - igx-color: 'surface', - ) + igx-color: ('grays', 200), ), group-label-column-name-text: ( @@ -495,18 +388,11 @@ $_dark-indigo-grid: extend( ), cell-selected-background: ( - igx-color: ('grays', 200), - to-opaque: ( - igx-color: 'surface', - ) + igx-color: ('primary', 400), ), cell-selected-text-color: ( - igx-color: ('grays', 200), - to-opaque: ( - igx-color: 'surface', - ), - text-contrast: () + igx-contrast-color: ('primary', 400) ), cell-active-border-color: ( diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_highlight.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_highlight.scss index 3d8a8b5b17b..65a8f3f86c4 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_highlight.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_highlight.scss @@ -1,48 +1,66 @@ -@import '../light/highlight'; +@use '../../../base' as *; +@use '../light/highlight' as *; + //// /// @group schemas /// @access public /// @author Simeon Simeonoff //// +/// Generates a base dark grid-toolbar schema. +/// @property {Map} resting-background [igx-color: ('grays', 200)] - The background color used for the highlight in its resting state. +/// @property {Map} resting-color [igx-contrast-color: ('grays', 200)] - The icon color used for the highlight in its resting state. +/// @type {Map} +$dark-base-highlight: ( + resting-background: ( + igx-color: ('grays', 200) + ), + + resting-color: ( + igx-contrast-color: ('grays', 200) + ), +); + /// Generates a dark highlight schema. /// @type {Map} -/// @property {Map} resting-color [igx-color: ('grays', 300), to-opaque: #222, text-contrast: ()] - The icon color used for the highlight in its resting state. /// @requires {function} extend -/// @requires $_light-highlight +/// @requires $light-highlight +/// @requires $dark-base-highlight /// @see $default-palette -$_dark-highlight: extend($_light-highlight, ( - resting-color: ( - igx-color: ('grays', 300), - to-opaque: (#222), - text-contrast: () - ), -)); +$dark-highlight: extend($light-highlight, $dark-base-highlight); /// Generates a dark fluent highlight schema. /// @type {Map} -/// @property {Map} resting-color [igx-color: ('grays', 300), to-opaque: #222, text-contrast: ()] - The icon color used for the highlight in its resting state. /// @requires {function} extend -/// @requires $_fluent-highlight -$_dark-fluent-highlight: extend($_fluent-highlight, ( - resting-color: ( - igx-color: ('grays', 300), - to-opaque: (#222), - text-contrast: () - ), -)); +/// @requires $fluent-highlight +/// @requires $dark-base-highlight +$dark-fluent-highlight: extend($fluent-highlight, $dark-base-highlight); /// Generates a dark bootstrap highlight schema. /// @type {Map} +/// @property {Map} active-background [igx-color: ('primary', A100)] - The background color used for the highlight in its active state. +/// @property {Map} active-color [igx-contrast-color: ('primary', A100) - The text color used for the highlight in its active state. /// @requires {function} extend -/// @requires $_bootstrap-highlight -$_dark-bootstrap-highlight: extend($_bootstrap-highlight, ( +/// @requires $bootstrap-highlight +/// @requires $dark-base-highlight +$dark-bootstrap-highlight: extend( + $bootstrap-highlight, + $dark-base-highlight, + ( + active-background: ( + igx-color: ('primary', 'A100') + ), -)); + active-color: ( + igx-contrast-color: ('primary', 'A100'), + ), + ) +); /// Generates a dark indigo highlight schema. /// @type {Map} /// @requires {function} extend -/// @requires $_indigo-highlight -$_dark-indigo-highlight: extend($_indigo-highlight); +/// @requires $indigo-highlight +/// @requires $dark-base-highlight +$dark-indigo-highlight: extend($indigo-highlight, $dark-base-highlight); diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_icon.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_icon.scss index 173bdacf385..c990f4f36ce 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_icon.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_icon.scss @@ -1,4 +1,5 @@ -@import '../light/icon'; +@use '../../../base' as *; +@use '../light/icon' as *; //// /// @group schemas @@ -8,22 +9,18 @@ /// Generates a dark icon schema. /// @type {Map} -/// @requires {function} extend -/// @requires $_light-icon +/// @requires $light-icon /// @see $default-palette -$_dark-icon: extend($_light-icon); +$dark-icon: $light-icon; /// Generates a dark fluent icon schema. /// @type {Map} -/// @property {Color} color [#fff] - The icon color. /// @property {Map} disabled-color [igx-color: ('grays' 500)] - The icon color. /// @requires {function} extend -/// @requires $_light-icon -$_dark-fluent-icon: extend( - $_fluent-icon, +/// @requires $light-icon +$dark-fluent-icon: extend( + $fluent-icon, ( - color: #fff, - disabled-color: ( igx-color: ('grays' 500) ) @@ -33,11 +30,11 @@ $_dark-fluent-icon: extend( /// Generates a dark bootstrap icon schema. /// @type {Map} /// @requires {function} extend -/// @requires $_light-icon -$_dark-bootstrap-icon: extend($_bootstrap-icon); +/// @requires $light-icon +$dark-bootstrap-icon: $bootstrap-icon; /// Generates a dark indigo icon schema. /// @type {Map} /// @requires {function} extend -/// @requires $_light-icon -$_dark-indigo-icon: extend($_indigo-icon); +/// @requires $light-icon +$dark-indigo-icon: $indigo-icon; diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_index.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_index.scss index e12f406a412..7d757bb5341 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_index.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_index.scss @@ -4,188 +4,188 @@ /// @author Simeon Simeonoff //// -@import './action-strip'; -@import './avatar'; -@import './badge'; -@import './banner'; -@import './bottom-nav'; -@import './button'; -@import './button-group'; -@import './calendar'; -@import './card'; -@import './carousel'; -@import './category-chart'; -@import './checkbox'; -@import './chip'; -@import './column-actions'; -@import './combo'; -@import './dialog'; -@import './data-chart'; -@import './doughnut-chart'; -@import './date-range-picker'; -@import './divider'; -@import './dock-manager'; -@import './drop-down'; -@import './expansion-panel'; -@import './gauge'; -@import './financial-chart'; -@import './graph'; -@import './funnel-chart'; -@import './grid'; -@import './grid-filtering'; -@import './pagination'; -@import './grid-summary'; -@import './grid-toolbar'; -@import './highlight'; -@import './icon'; -@import './input-group'; -@import './list'; -@import './geo-map'; -@import './navbar'; -@import './navdrawer'; -@import './overlay'; -@import './progress'; -@import './pie-chart'; -@import './radio'; -@import './ripple'; -@import './scrollbar'; -@import './shape-chart'; -@import './slider'; -@import './snackbar'; -@import './sparkline'; -@import './splitter'; -@import './switch'; -@import './stepper'; -@import './tabs'; -@import './time-picker'; -@import './toast'; -@import './tooltip'; -@import './tree'; -@import './watermark'; +@use './avatar' as *; +@use './action-strip' as *; +@use './badge' as *; +@use './banner' as *; +@use './bottom-nav' as *; +@use './button' as *; +@use './button-group' as *; +@use './calendar' as *; +@use './card' as *; +@use './carousel' as *; +@use './category-chart' as *; +@use './checkbox' as *; +@use './chip' as *; +@use './column-actions' as *; +@use './combo' as *; +@use './dialog' as *; +@use './data-chart' as *; +@use './doughnut-chart' as *; +@use './funnel-chart' as *; +@use './date-range-picker' as *; +@use './divider' as *; +@use './dock-manager' as *; +@use './drop-down' as *; +@use './expansion-panel' as *; +@use './gauge' as *; +@use './financial-chart' as *; +@use './graph' as *; +@use './grid' as *; +@use './grid-filtering' as *; +@use './pagination' as *; +@use './grid-summary' as *; +@use './grid-toolbar' as *; +@use './highlight' as *; +@use './icon' as *; +@use './input-group' as *; +@use './list' as *; +@use './navbar' as *; +@use './navdrawer' as *; +@use './geo-map' as *; +@use './overlay' as *; +@use './pie-chart' as *; +@use './progress' as *; +@use './radio' as *; +@use './ripple' as *; +@use './scrollbar' as *; +@use './shape-chart' as *; +@use './slider' as *; +@use './snackbar' as *; +@use './sparkline' as *; +@use './splitter' as *; +@use './switch' as *; +@use './stepper' as *; +@use './tabs' as *; +@use './time-picker' as *; +@use './toast' as *; +@use './tooltip' as *; +@use './tree' as *; +@use './watermark' as *; /// Used to create Material Design themes. /// Use with dark palettes. /// @type Map -/// @property {Map} igx-avatar [$_dark-avatar] -/// @property {Map} igx-action-strip [$_dark-action-strip] -/// @property {Map} igx-badge [$_dark-badge] -/// @property {Map} igx-banner [$_dark-banner] -/// @property {Map} igx-bottom-nav [$_dark-bottom-nav] -/// @property {Map} igx-button [$_dark-button] -/// @property {Map} igx-button-group [$_dark-button-group] -/// @property {Map} igx-calendar [$_dark-calendar] -/// @property {Map} igx-card [$_dark-card] -/// @property {Map} igx-carousel [$_dark-carousel] -/// @property {Map} category-chart [$_dark-category-chart] -/// @property {Map} igx-checkbox [$_dark-checkbox] -/// @property {Map} igx-chip [$_dark-chip] -/// @property {Map} igx-column-actions [$_dark-column-actions] -/// @property {Map} igx-combo [$_dark-combo] -/// @property {Map} igx-dialog [$_dark-dialog] -/// @property {Map} data-chart [$_dark-data-chart] -/// @property {Map} doughnut-chart [$_dark-doughnut-chart] -/// @property {Map} igx-date-range-picker [$_dark-date-range-picker] -/// @property {Map} igx-divider [$_dark-divider] -/// @property {Map} igc-dockmanager [$_dark-dock-manager] -/// @property {Map} igx-drop-down [$_dark-drop-down] -/// @property {Map} igx-expansion-panel [$_dark-expansion-panel] -/// @property {Map} linear-gauge [$_dark-linear-gauge] -/// @property {Map} radial-gauge [$_dark-radial-gauge] -/// @property {Map} financial-chart [$_dark-financial-chart] -/// @property {Map} bullet-graph [$_dark-graph] -/// @property {Map} igx-grid [$_dark-grid] -/// @property {Map} igx-grid-filtering [$_dark-grid-filtering] -/// @property {Map} igx-paginator [$_dark-pagination] -/// @property {Map} funnel-chart [$_dark-funnel-chart] -/// @property {Map} igx-grid-summary [$_dark-grid-summary] -/// @property {Map} igx-grid-toolbar [$_dark-grid-toolbar] -/// @property {Map} igx-highlight [$_dark-highlight] -/// @property {Map} igx-icon [$_dark-icon] -/// @property {Map} igx-input-group [$_dark-input-group] -/// @property {Map} igx-list [$_dark-list] -/// @property {Map} geo-map [$_dark-geo-map] -/// @property {Map} igx-navbar [$_dark-navbar] -/// @property {Map} igx-nav-drawer [$_dark-navdrawer] -/// @property {Map} igx-overlay [$_dark-overlay] -/// @property {Map} igx-progress-linear [$_dark-progress-linear] -/// @property {Map} igx-progress-circular [$_dark-progress-circular] -/// @property {Map} pie-chart [$_dark-pie-chart] -/// @property {Map} igx-radio [$_dark-radio] -/// @property {Map} igx-ripple [$_dark-ripple] -/// @property {Map} igx-scrollbar [$_dark-scrollbar] -/// @property {Map} shape-chart [$_dark-shape-chart] -/// @property {Map} igx-slider [$_dark-slider] -/// @property {Map} igx-snackbar [$_dark-snackbar] -/// @property {Map} sparkline [$_dark-sparkline] -/// @property {Map} igx-splitter [$_dark-splitter] -/// @property {Map} igx-switch [$_dark-switch] -/// @property {Map} igx-stepper [$_dark-stepper] -/// @property {Map} igx-tabs [$_dark-tabs] -/// @property {Map} igx-time-picker [$_dark-time-picker] -/// @property {Map} igx-toast [$_dark-toast] -/// @property {Map} igx-tooltip [$_dark-tooltip] -/// @property {Map} igx-tree [$_dark-tree] +/// @property {Map} igx-avatar [$dark-avatar] +/// @property {Map} igx-action-strip [$dark-action-strip] +/// @property {Map} igx-badge [$dark-badge] +/// @property {Map} igx-banner [$dark-banner] +/// @property {Map} igx-bottom-nav [$dark-bottom-nav] +/// @property {Map} igx-button [$dark-button] +/// @property {Map} igx-button-group [$ark-button-group] +/// @property {Map} igx-calendar [$dark-calendar] +/// @property {Map} igx-card [$dark-card] +/// @property {Map} igx-carousel [$dark-carousel] +/// @property {Map} category-chart [$dark-category-chart] +/// @property {Map} igx-checkbox [$dark-checkbox] +/// @property {Map} igx-chip [$dark-chip] +/// @property {Map} igx-column-actions [$dark-column-actions] +/// @property {Map} igx-combo [$dark-combo] +/// @property {Map} igx-dialog [$dark-dialog] +/// @property {Map} data-chart [$dark-data-chart] +/// @property {Map} doughnut-chart [$dark-doughnut-chart] +/// @property {Map} igx-date-range-picker [$dark-date-range-picker] +/// @property {Map} igx-divider [$dark-divider] +/// @property {Map} igc-dockmanager [$dark-dock-manager] +/// @property {Map} igx-drop-down [$dark-drop-down] +/// @property {Map} igx-expansion-panel [$dark-expansion-panel] +/// @property {Map} linear-gauge [$dark-linear-gauge] +/// @property {Map} radial-gauge [$dark-radial-gauge] +/// @property {Map} financial-chart [$dark-financial-chart] +/// @property {Map} bullet-graph [$dark-graph] +/// @property {Map} igx-grid [$dark-grid] +/// @property {Map} igx-grid-filtering [$dark-grid-filtering] +/// @property {Map} igx-paginator [$dark-pagination] +/// @property {Map} funnel-chart [$dark-funnel-chart] +/// @property {Map} igx-grid-summary [$dark-grid-summary] +/// @property {Map} igx-grid-toolbar [$dark-grid-toolbar] +/// @property {Map} igx-highlight [$dark-highlight] +/// @property {Map} igx-icon [$dark-icon] +/// @property {Map} igx-input-group [$dark-input-group] +/// @property {Map} igx-list [$dark-list] +/// @property {Map} geo-map [$dark-geo-map] +/// @property {Map} igx-navbar [$dark-navbar] +/// @property {Map} igx-nav-drawer [$dark-navdrawer] +/// @property {Map} igx-overlay [$dark-overlay] +/// @property {Map} igx-progress-linear [$dark-progress-linear] +/// @property {Map} igx-progress-circular [$dark-progress-circular] +/// @property {Map} pie-chart [$dark-pie-chart] +/// @property {Map} igx-radio [$dark-radio] +/// @property {Map} igx-ripple [$dark-ripple] +/// @property {Map} igx-scrollbar [$dark-scrollbar] +/// @property {Map} shape-chart [$dark-shape-chart] +/// @property {Map} igx-slider [$dark-slider] +/// @property {Map} igx-snackbar [$dark-snackbar] +/// @property {Map} sparkline [$dark-sparkline] +/// @property {Map} igx-splitter [$dark-splitter] +/// @property {Map} igx-switch [$dark-switch] +/// @property {Map} igx-stepper [$dark-stepper] +/// @property {Map} igx-tabs [$dark-tabs] +/// @property {Map} igx-time-picker [$dark-time-picker] +/// @property {Map} igx-toast [$dark-toast] +/// @property {Map} igx-tooltip [$dark-tooltip] +/// @property {Map} igx-tree [$dark-tree] $dark-schema: ( - igx-avatar: $_dark-avatar, - igx-action-strip: $_dark-action-strip, - igx-badge: $_dark-badge, - igx-banner: $_dark-banner, - igx-bottom-nav: $_dark-bottom-nav, - igx-button: $_dark-button, - igx-button-group: $_dark-button-group, - igx-calendar: $_dark-calendar, - igx-card: $_dark-card, - igx-carousel: $_dark-carousel, - category-chart: $_dark-category-chart, - igx-checkbox: $_dark-checkbox, - igx-chip: $_dark-chip, - igx-column-actions: $_dark-column-actions, - igx-combo: $_dark-combo, - igx-dialog: $_dark-dialog, - data-chart: $_dark-data-chart, - doughnut-chart: $_dark-doughnut-chart, - igx-date-range: $_dark-date-range-picker, - igx-divider: $_dark-divider, - igc-dockmanager: $_dark-dock-manager, - igx-drop-down: $_dark-drop-down, - igx-expansion-panel: $_dark-expansion-panel, - linear-gauge: $_dark-linear-gauge, - radial-gauge: $_dark-radial-gauge, - financial-chart: $_dark-financial-chart, - bullet-graph: $_dark-graph, - funnel-chart: $_dark-funnel-chart, - igx-grid: $_dark-grid, - igx-grid-filtering: $_dark-grid-filtering, - igx-paginator: $_dark-pagination, - igx-grid-summary: $_dark-grid-summary, - igx-grid-toolbar: $_dark-grid-toolbar, - igx-highlight: $_dark-highlight, - igx-icon: $_dark-icon, - igx-input-group: $_dark-input-group, - igx-list: $_dark-list, - geo-map: $_dark-geo-map, - igx-navbar: $_dark-navbar, - igx-nav-drawer: $_dark-navdrawer, - igx-overlay: $_dark-overlay, - igx-linear-bar: $_dark-progress-linear, - igx-circular-bar: $_dark-progress-circular, - pie-chart: $_dark-pie-chart, - igx-radio: $_dark-radio, - igx-ripple: $_dark-ripple, - igx-scrollbar: $_dark-scrollbar, - shape-chart: $_dark-shape-chart, - igx-slider: $_dark-slider, - igx-snackbar: $_dark-snackbar, - sparkline: $_dark-sparkline, - igx-splitter: $_dark-splitter, - igx-switch: $_dark-switch, - igx-stepper: $_dark-stepper, - igx-tabs: $_dark-tabs, - igx-time-picker: $_dark-time-picker, - igx-toast: $_dark-toast, - igx-tooltip: $_dark-tooltip, - igx-tree: $_dark-tree, - igx-watermark: $_dark-watermark, + igx-avatar: $dark-avatar, + igx-action-strip: $dark-action-strip, + igx-badge: $dark-badge, + igx-banner: $dark-banner, + igx-bottom-nav: $dark-bottom-nav, + igx-button: $dark-button, + igx-button-group: $dark-button-group, + igx-calendar: $dark-calendar, + igx-card: $dark-card, + igx-carousel: $dark-carousel, + category-chart: $dark-category-chart, + igx-checkbox: $dark-checkbox, + igx-chip: $dark-chip, + igx-column-actions: $dark-column-actions, + igx-combo: $dark-combo, + igx-dialog: $dark-dialog, + data-chart: $dark-data-chart, + doughnut-chart: $dark-doughnut-chart, + igx-date-range: $dark-date-range-picker, + igx-divider: $dark-divider, + igc-dockmanager: $dark-dock-manager, + igx-drop-down: $dark-drop-down, + igx-expansion-panel: $dark-expansion-panel, + linear-gauge: $dark-linear-gauge, + radial-gauge: $dark-radial-gauge, + financial-chart: $dark-financial-chart, + bullet-graph: $dark-graph, + funnel-chart: $dark-funnel-chart, + igx-grid: $dark-grid, + igx-grid-filtering: $dark-grid-filtering, + igx-paginator: $dark-pagination, + igx-grid-summary: $dark-grid-summary, + igx-grid-toolbar: $dark-grid-toolbar, + igx-highlight: $dark-highlight, + igx-icon: $dark-icon, + igx-input-group: $dark-input-group, + igx-list: $dark-list, + geo-map: $dark-geo-map, + igx-navbar: $dark-navbar, + igx-nav-drawer: $dark-navdrawer, + igx-overlay: $dark-overlay, + igx-linear-bar: $dark-progress-linear, + igx-circular-bar: $dark-progress-circular, + pie-chart: $dark-pie-chart, + igx-radio: $dark-radio, + igx-ripple: $dark-ripple, + igx-scrollbar: $dark-scrollbar, + shape-chart: $dark-shape-chart, + igx-slider: $dark-slider, + igx-snackbar: $dark-snackbar, + sparkline: $dark-sparkline, + igx-splitter: $dark-splitter, + igx-switch: $dark-switch, + igx-stepper: $dark-stepper, + igx-tabs: $dark-tabs, + igx-time-picker: $dark-time-picker, + igx-toast: $dark-toast, + igx-tooltip: $dark-tooltip, + igx-tree: $dark-tree, + igx-watermark: $dark-watermark, ); /// An alias of $dark-schema. @@ -196,375 +196,375 @@ $dark-material-schema: $dark-schema; /// Used to create fluent component themes. /// Use in combination with dark palettes. /// @type Map -/// @property {Map} igx-avatar [$_dark-fluent-avatar], -/// @property {Map} igx-action-strip [$_dark-fluent-action-strip] -/// @property {Map} igx-badge [$_dark-fluent-badge], -/// @property {Map} igx-banner [$_dark-fluent-banner], -/// @property {Map} igx-bottom-nav [$_dark-fluent-bottom-nav], -/// @property {Map} igx-button [$_dark-fluent-button], -/// @property {Map} igx-button-group [$_dark-fluent-button-group], -/// @property {Map} igx-calendar [$_dark-fluent-calendar], -/// @property {Map} igx-card [$_dark-fluent-card], -/// @property {Map} igx-carousel [$_dark-fluent-carousel], -/// @property {Map} category-chart [$_dark-fluent-category-chart] -/// @property {Map} igx-checkbox [$_dark-fluent-checkbox], -/// @property {Map} igx-chip [$_dark-fluent-chip], -/// @property {Map} igx-column-actions [$_dark-fluent-column-actions], -/// @property {Map} igx-combo [$_dark-fluent-combo], -/// @property {Map} igx-dialog [$_dark-fluent-dialog], -/// @property {Map} data-chart [$_dark-fluent-data-chart] -/// @property {Map} doughnut-chart [$_dark-fluent-doughnut-chart] -/// @property {Map} igx-date-range-picker [$_dark-fluent-date-range-picker], -/// @property {Map} igx-divider [$_dark-fluent-divider], -/// @property {Map} igc-dockmanager [$_dark-fluent-dock-manager], -/// @property {Map} igx-drop-down [$_dark-fluent-drop-down], -/// @property {Map} igx-expansion-panel [$_dark-fluent-expansion-panel], -/// @property {Map} linear-gauge [$_dark-fluent-linear-gauge] -/// @property {Map} radial-gauge [$_dark-fluent-radial-gauge] -/// @property {Map} financial-chart [$_dark-fluent-financial-chart] -/// @property {Map} bullet-graph [$_dark-fluent-graph], -/// @property {Map} igx-grid [$_dark-fluent-grid], -/// @property {Map} igx-grid-filtering [$_dark-fluent-grid-filtering], -/// @property {Map} igx-paginator [$_dark-fluent-pagination], -/// @property {Map} funnel-chart [$_dark-fluent-funnel-chart], -/// @property {Map} igx-grid-summary [$_dark-fluent-grid-summary], -/// @property {Map} igx-grid-toolbar [$_dark-fluent-grid-toolbar], -/// @property {Map} igx-highlight [$_dark-fluent-highlight], -/// @property {Map} igx-icon [$_dark-fluent-icon], -/// @property {Map} igx-input-group [$_dark-fluent-input-group], -/// @property {Map} igx-list [$_dark-fluent-list], -/// @property {Map} geo-map [$_dark-fluent-geo-map] -/// @property {Map} igx-navbar [$_dark-fluent-navbar], -/// @property {Map} igx-nav-drawer [$_dark-fluent-navdrawer], -/// @property {Map} igx-overlay [$_dark-fluent-overlay], -/// @property {Map} igx-linear-bar [$_dark-fluent-progress-linear], -/// @property {Map} igx-circular-bar [$_dark-fluent-progress-circular], -/// @property {Map} pie-chart [$_dark-fluent-pie-chart], -/// @property {Map} igx-radio [$_dark-fluent-radio], -/// @property {Map} igx-ripple [$_dark-fluent-ripple], -/// @property {Map} igx-scrollbar [$_dark-fluent-scrollbar], -/// @property {Map} shape-chart [$_dark-fluent-shape-chart], -/// @property {Map} igx-slider [$_dark-fluent-slider], -/// @property {Map} igx-snackbar [$_dark-fluent-snackbar], -/// @property {Map} sparkline [$_dark-fluent-sparkline], -/// @property {Map} igx-splitter [$_dark-fluent-splitter], -/// @property {Map} igx-switch [$_dark-fluent-switch], -/// @property {Map} igx-stepper [$_dark-fluent-stepper], -/// @property {Map} igx-tabs [$_dark-fluent-tabs], -/// @property {Map} igx-time-picker [$_dark-fluent-time-picker], -/// @property {Map} igx-toast [$_dark-fluent-toast], -/// @property {Map} igx-tooltip [$_dark-fluent-tooltip] -/// @property {Map} igx-tree [$_dark-fluent-tree] +/// @property {Map} igx-avatar [$dark-fluent-avatar], +/// @property {Map} igx-action-strip [$dark-fluent-action-strip] +/// @property {Map} igx-badge [$dark-fluent-badge], +/// @property {Map} igx-banner [$dark-fluent-banner], +/// @property {Map} igx-bottom-nav [$dark-fluent-bottom-nav], +/// @property {Map} igx-button [$dark-fluent-button], +/// @property {Map} igx-button-group [$dark-fluent-button-group], +/// @property {Map} igx-calendar [$dark-fluent-calendar], +/// @property {Map} igx-card [$dark-fluent-card], +/// @property {Map} igx-carousel [$dark-fluent-carousel], +/// @property {Map} category-chart [$dark-fluent-category-chart] +/// @property {Map} igx-checkbox [$dark-fluent-checkbox], +/// @property {Map} igx-chip [$dark-fluent-chip], +/// @property {Map} igx-column-actions [$dark-fluent-column-actions], +/// @property {Map} igx-combo [$dark-fluent-combo], +/// @property {Map} igx-dialog [$dark-fluent-dialog], +/// @property {Map} data-chart [$dark-fluent-data-chart] +/// @property {Map} doughnut-chart [$dark-fluent-doughnut-chart] +/// @property {Map} igx-date-range-picker [$dark-fluent-date-range-picker], +/// @property {Map} igx-divider [$dark-fluent-divider], +/// @property {Map} igc-dockmanager [$dark-fluent-dock-manager], +/// @property {Map} igx-drop-down [$dark-fluent-drop-down], +/// @property {Map} igx-expansion-panel [$dark-fluent-expansion-panel], +/// @property {Map} linear-gauge [$dark-fluent-linear-gauge] +/// @property {Map} radial-gauge [$dark-fluent-radial-gauge] +/// @property {Map} financial-chart [$dark-fluent-financial-chart] +/// @property {Map} bullet-graph [$dark-fluent-graph], +/// @property {Map} igx-grid [$dark-fluent-grid], +/// @property {Map} igx-grid-filtering [$dark-fluent-grid-filtering], +/// @property {Map} igx-paginator [$dark-fluent-pagination], +/// @property {Map} funnel-chart [$dark-fluent-funnel-chart], +/// @property {Map} igx-grid-summary [$dark-fluent-grid-summary], +/// @property {Map} igx-grid-toolbar [$dark-fluent-grid-toolbar], +/// @property {Map} igx-highlight [$dark-fluent-highlight], +/// @property {Map} igx-icon [$dark-fluent-icon], +/// @property {Map} igx-input-group [$dark-fluent-input-group], +/// @property {Map} igx-list [$dark-fluent-list], +/// @property {Map} geo-map [$dark-fluent-geo-map] +/// @property {Map} igx-navbar [$dark-fluent-navbar], +/// @property {Map} igx-nav-drawer [$dark-fluent-navdrawer], +/// @property {Map} igx-overlay [$dark-fluent-overlay], +/// @property {Map} igx-linear-bar [$dark-fluent-progress-linear], +/// @property {Map} igx-circular-bar [$dark-fluent-progress-circular], +/// @property {Map} pie-chart [$dark-fluent-pie-chart], +/// @property {Map} igx-radio [$dark-fluent-radio], +/// @property {Map} igx-ripple [$dark-fluent-ripple], +/// @property {Map} igx-scrollbar [$dark-fluent-scrollbar], +/// @property {Map} shape-chart [$dark-fluent-shape-chart], +/// @property {Map} igx-slider [$dark-fluent-slider], +/// @property {Map} igx-snackbar [$dark-fluent-snackbar], +/// @property {Map} sparkline [$dark-fluent-sparkline], +/// @property {Map} igx-splitter [$dark-fluent-splitter], +/// @property {Map} igx-switch [$dark-fluent-switch], +/// @property {Map} igx-stepper [$dark-fluent-stepper], +/// @property {Map} igx-tabs [$dark-fluent-tabs], +/// @property {Map} igx-time-picker [$dark-fluent-time-picker], +/// @property {Map} igx-toast [$dark-fluent-toast], +/// @property {Map} igx-tooltip [$dark-fluent-tooltip] +/// @property {Map} igx-tree [$dark-fluent-tree] $dark-fluent-schema: ( - igx-avatar: $_dark-fluent-avatar, - igx-action-strip: $_dark-fluent-action-strip, - igx-badge: $_dark-fluent-badge, - igx-banner: $_dark-fluent-banner, - igx-bottom-nav: $_dark-fluent-bottom-nav, - igx-button: $_dark-fluent-button, - igx-button-group: $_dark-fluent-button-group, - igx-calendar: $_dark-fluent-calendar, - igx-card: $_dark-fluent-card, - igx-carousel: $_dark-fluent-carousel, - category-chart: $_dark-fluent-category-chart, - igx-checkbox: $_dark-fluent-checkbox, - igx-chip: $_dark-fluent-chip, - igx-column-actions: $_dark-fluent-column-actions, - igx-combo: $_dark-fluent-combo, - igx-dialog: $_dark-fluent-dialog, - data-chart: $_dark-fluent-data-chart, - doughnut-chart: $_dark-fluent-doughnut-chart, - igx-date-range: $_dark-fluent-date-range-picker, - igx-divider: $_dark-fluent-divider, - igc-dockmanager: $_dark-fluent-dock-manager, - igx-drop-down: $_dark-fluent-drop-down, - igx-expansion-panel: $_dark-fluent-expansion-panel, - linear-gauge: $_dark-fluent-linear-gauge, - radial-gauge: $_dark-fluent-radial-gauge, - financial-chart: $_dark-fluent-financial-chart, - bullet-graph: $_dark-fluent-graph, - igx-grid: $_dark-fluent-grid, - igx-grid-filtering: $_dark-fluent-grid-filtering, - igx-paginator: $_dark-fluent-pagination, - funnel-chart: $_dark-fluent-funnel-chart, - igx-grid-summary: $_dark-fluent-grid-summary, - igx-grid-toolbar: $_dark-fluent-grid-toolbar, - igx-highlight: $_dark-fluent-highlight, - igx-icon: $_dark-fluent-icon, - igx-input-group: $_dark-fluent-input-group, - igx-list: $_dark-fluent-list, - geo-map: $_dark-fluent-geo-map, - igx-navbar: $_dark-fluent-navbar, - igx-nav-drawer: $_dark-fluent-navdrawer, - igx-overlay: $_dark-fluent-overlay, - igx-linear-bar: $_dark-fluent-progress-linear, - igx-circular-bar: $_dark-fluent-progress-circular, - pie-chart: $_dark-fluent-pie-chart, - igx-radio: $_dark-fluent-radio, - igx-ripple: $_dark-fluent-ripple, - igx-scrollbar: $_dark-fluent-scrollbar, - shape-chart: $_dark-fluent-shape-chart, - igx-slider: $_dark-fluent-slider, - igx-snackbar: $_dark-fluent-snackbar, - sparkline: $_dark-fluent-sparkline, - igx-splitter: $_dark-fluent-splitter, - igx-switch: $_dark-fluent-switch, - igx-stepper: $_dark-fluent-stepper, - igx-tabs: $_dark-fluent-tabs, - igx-time-picker: $_dark-fluent-time-picker, - igx-toast: $_dark-fluent-toast, - igx-tooltip: $_dark-fluent-tooltip, - igx-tree: $_dark-fluent-tree, - igx-watermark: $_dark-fluent-watermark, + igx-avatar: $dark-fluent-avatar, + igx-action-strip: $dark-fluent-action-strip, + igx-badge: $dark-fluent-badge, + igx-banner: $dark-fluent-banner, + igx-bottom-nav: $dark-fluent-bottom-nav, + igx-button: $dark-fluent-button, + igx-button-group: $dark-fluent-button-group, + igx-calendar: $dark-fluent-calendar, + igx-card: $dark-fluent-card, + igx-carousel: $dark-fluent-carousel, + category-chart: $dark-fluent-category-chart, + igx-checkbox: $dark-fluent-checkbox, + igx-chip: $dark-fluent-chip, + igx-column-actions: $dark-fluent-column-actions, + igx-combo: $dark-fluent-combo, + igx-dialog: $dark-fluent-dialog, + data-chart: $dark-fluent-data-chart, + doughnut-chart: $dark-fluent-doughnut-chart, + igx-date-range: $dark-fluent-date-range-picker, + igx-divider: $dark-fluent-divider, + igc-dockmanager: $dark-fluent-dock-manager, + igx-drop-down: $dark-fluent-drop-down, + igx-expansion-panel: $dark-fluent-expansion-panel, + linear-gauge: $dark-fluent-linear-gauge, + radial-gauge: $dark-fluent-radial-gauge, + financial-chart: $dark-fluent-financial-chart, + bullet-graph: $dark-fluent-graph, + igx-grid: $dark-fluent-grid, + igx-grid-filtering: $dark-fluent-grid-filtering, + igx-paginator: $dark-fluent-pagination, + funnel-chart: $dark-fluent-funnel-chart, + igx-grid-summary: $dark-fluent-grid-summary, + igx-grid-toolbar: $dark-fluent-grid-toolbar, + igx-highlight: $dark-fluent-highlight, + igx-icon: $dark-fluent-icon, + igx-input-group: $dark-fluent-input-group, + igx-list: $dark-fluent-list, + geo-map: $dark-fluent-geo-map, + igx-navbar: $dark-fluent-navbar, + igx-nav-drawer: $dark-fluent-navdrawer, + igx-overlay: $dark-fluent-overlay, + igx-linear-bar: $dark-fluent-progress-linear, + igx-circular-bar: $dark-fluent-progress-circular, + pie-chart: $dark-fluent-pie-chart, + igx-radio: $dark-fluent-radio, + igx-ripple: $dark-fluent-ripple, + igx-scrollbar: $dark-fluent-scrollbar, + shape-chart: $dark-fluent-shape-chart, + igx-slider: $dark-fluent-slider, + igx-snackbar: $dark-fluent-snackbar, + sparkline: $dark-fluent-sparkline, + igx-splitter: $dark-fluent-splitter, + igx-switch: $dark-fluent-switch, + igx-stepper: $dark-fluent-stepper, + igx-tabs: $dark-fluent-tabs, + igx-time-picker: $dark-fluent-time-picker, + igx-toast: $dark-fluent-toast, + igx-tooltip: $dark-fluent-tooltip, + igx-tree: $dark-fluent-tree, + igx-watermark: $dark-fluent-watermark, ); /// Used to create bootstrap component themes. /// Use in combination with dark palettes. /// @type Map -/// @property {Map} igx-avatar [$_dark-bootstrap-avatar] -/// @property {Map} igx-action-strip [$_dark-bootstrap-action-strip] -/// @property {Map} igx-badge [$_dark-bootstrap-badge] -/// @property {Map} igx-banner [$_dark-bootstrap-banner] -/// @property {Map} igx-bottom-nav [$_dark-bootstrap-bottom-nav] -/// @property {Map} igx-button [$_dark-bootstrap-button] -/// @property {Map} igx-button-group [$_dark-bootstrap-button-group] -/// @property {Map} igx-calendar [$_dark-bootstrap-calendar] -/// @property {Map} igx-card [$_dark-bootstrap-card] -/// @property {Map} igx-carousel [$_dark-bootstrap-carousel], -/// @property {Map} category-chart [$_dark-bootstrap-category-chart] -/// @property {Map} igx-checkbox [$_dark-bootstrap-checkbox], -/// @property {Map} igx-chip [$_dark-bootstrap-chip], -/// @property {Map} igx-column-actions [$_dark-bootstrap-column-actions], -/// @property {Map} igx-combo [$_dark-bootstrap-combo], -/// @property {Map} igx-dialog [$_dark-bootstrap-dialog], -/// @property {Map} data-chart [$_dark-bootstrap-data-chart] -/// @property {Map} doughnut-chart [$_dark-bootstrap-doughnut-chart] -/// @property {Map} igx-date-range-picker [$_dark-bootstrap-date-range-picker], -/// @property {Map} igx-divider [$_dark-bootstrap-divider], -/// @property {Map} igc-dockmanager [$_dark-bootstrap-dock-manager], -/// @property {Map} igx-drop-down [$_dark-bootstrap-drop-down], -/// @property {Map} igx-expansion-panel [$_dark-bootstrap-expansion-panel], -/// @property {Map} linear-gauge [$_dark-bootstrap-linear-gauge] -/// @property {Map} radial-gauge [$_dark-bootstrap-radial-gauge] -/// @property {Map} financial-chart [$_dark-bootstrap-financial-chart] -/// @property {Map} bullet-graph [$_dark-bootstrap-graph], -/// @property {Map} igx-grid [$_dark-bootstrap-grid], -/// @property {Map} igx-grid-filtering [$_dark-bootstrap-grid-filtering], -/// @property {Map} igx-paginator [$_dark-bootstrap-pagination], -/// @property {Map} funnel-chart [$_dark-bootstrap-funnel-chart], -/// @property {Map} igx-grid-summary [$_dark-bootstrap-grid-summary], -/// @property {Map} igx-grid-toolbar [$_dark-bootstrap-grid-toolbar], -/// @property {Map} igx-highlight [$_dark-bootstrap-highlight], -/// @property {Map} igx-icon [$_dark-bootstrap-icon], -/// @property {Map} igx-input-group [$_dark-bootstrap-input-group], -/// @property {Map} igx-list [$_dark-bootstrap-list], -/// @property {Map} geo-map [$_dark-bootstrap-geo-map] -/// @property {Map} igx-navbar [$_dark-bootstrap-navbar], -/// @property {Map} igx-nav-drawer [$_dark-bootstrap-navdrawer], -/// @property {Map} igx-overlay [$_dark-bootstrap-overlay], -/// @property {Map} igx-linear-bar [$_dark-bootstrap-progress-linear], -/// @property {Map} igx-circular-bar [$_dark-bootstrap-progress-circular], -/// @property {Map} pie-chart [$_dark-bootstrap-pie-chart], -/// @property {Map} igx-radio [$_dark-bootstrap-radio], -/// @property {Map} igx-ripple [$_dark-bootstrap-ripple], -/// @property {Map} igx-scrollbar [$_dark-bootstrap-scrollbar], -/// @property {Map} shape-chart [$_dark-bootstrap-shape-chart], -/// @property {Map} igx-slider [$_dark-bootstrap-slider], -/// @property {Map} igx-snackbar [$_dark-bootstrap-snackbar], -/// @property {Map} sparkline [$_dark-bootstrap-sparkline], -/// @property {Map} igx-splitter [$_dark-bootstrap-splitter], -/// @property {Map} igx-switch [$_dark-bootstrap-switch], -/// @property {Map} igx-stepper [$_dark-bootstrap-stepper], -/// @property {Map} igx-tabs [$_dark-bootstrap-tabs], -/// @property {Map} igx-time-picker [$_dark-bootstrap-time-picker], -/// @property {Map} igx-toast [$_dark-bootstrap-toast], -/// @property {Map} igx-tooltip [$_dark-bootstrap-tooltip] -/// @property {Map} igx-tree [$_dark-bootstrap-tree] +/// @property {Map} igx-avatar [$dark-bootstrap-avatar] +/// @property {Map} igx-action-strip [$dark-bootstrap-action-strip] +/// @property {Map} igx-badge [$dark-bootstrap-badge] +/// @property {Map} igx-banner [$dark-bootstrap-banner] +/// @property {Map} igx-bottom-nav [$dark-bootstrap-bottom-nav] +/// @property {Map} igx-button [$dark-bootstrap-button] +/// @property {Map} igx-button-group [$dark-bootstrap-button-group] +/// @property {Map} igx-calendar [$dark-bootstrap-calendar] +/// @property {Map} igx-card [$dark-bootstrap-card] +/// @property {Map} igx-carousel [$dark-bootstrap-carousel], +/// @property {Map} category-chart [$dark-bootstrap-category-chart] +/// @property {Map} igx-checkbox [$dark-bootstrap-checkbox], +/// @property {Map} igx-chip [$dark-bootstrap-chip], +/// @property {Map} igx-column-actions [$dark-bootstrap-column-actions], +/// @property {Map} igx-combo [$dark-bootstrap-combo], +/// @property {Map} igx-dialog [$dark-bootstrap-dialog], +/// @property {Map} data-chart [$dark-bootstrap-data-chart] +/// @property {Map} doughnut-chart [$dark-bootstrap-doughnut-chart] +/// @property {Map} igx-date-range-picker [$dark-bootstrap-date-range-picker], +/// @property {Map} igx-divider [$dark-bootstrap-divider], +/// @property {Map} igc-dockmanager [$dark-bootstrap-dock-manager], +/// @property {Map} igx-drop-down [$dark-bootstrap-drop-down], +/// @property {Map} igx-expansion-panel [$dark-bootstrap-expansion-panel], +/// @property {Map} linear-gauge [$dark-bootstrap-linear-gauge] +/// @property {Map} radial-gauge [$dark-bootstrap-radial-gauge] +/// @property {Map} financial-chart [$dark-bootstrap-financial-chart] +/// @property {Map} bullet-graph [$dark-bootstrap-graph], +/// @property {Map} igx-grid [$dark-bootstrap-grid], +/// @property {Map} igx-grid-filtering [$dark-bootstrap-grid-filtering], +/// @property {Map} igx-paginator [$dark-bootstrap-pagination], +/// @property {Map} funnel-chart [$dark-bootstrap-funnel-chart], +/// @property {Map} igx-grid-summary [$dark-bootstrap-grid-summary], +/// @property {Map} igx-grid-toolbar [$dark-bootstrap-grid-toolbar], +/// @property {Map} igx-highlight [$dark-bootstrap-highlight], +/// @property {Map} igx-icon [$dark-bootstrap-icon], +/// @property {Map} igx-input-group [$dark-bootstrap-input-group], +/// @property {Map} igx-list [$dark-bootstrap-list], +/// @property {Map} geo-map [$dark-bootstrap-geo-map] +/// @property {Map} igx-navbar [$dark-bootstrap-navbar], +/// @property {Map} igx-nav-drawer [$dark-bootstrap-navdrawer], +/// @property {Map} igx-overlay [$dark-bootstrap-overlay], +/// @property {Map} igx-linear-bar [$dark-bootstrap-progress-linear], +/// @property {Map} igx-circular-bar [$dark-bootstrap-progress-circular], +/// @property {Map} pie-chart [$dark-bootstrap-pie-chart], +/// @property {Map} igx-radio [$dark-bootstrap-radio], +/// @property {Map} igx-ripple [$dark-bootstrap-ripple], +/// @property {Map} igx-scrollbar [$dark-bootstrap-scrollbar], +/// @property {Map} shape-chart [$dark-bootstrap-shape-chart], +/// @property {Map} igx-slider [$dark-bootstrap-slider], +/// @property {Map} igx-snackbar [$dark-bootstrap-snackbar], +/// @property {Map} sparkline [$dark-bootstrap-sparkline], +/// @property {Map} igx-splitter [$dark-bootstrap-splitter], +/// @property {Map} igx-switch [$dark-bootstrap-switch], +/// @property {Map} igx-stepper [$dark-bootstrap-stepper], +/// @property {Map} igx-tabs [$dark-bootstrap-tabs], +/// @property {Map} igx-time-picker [$dark-bootstrap-time-picker], +/// @property {Map} igx-toast [$dark-bootstrap-toast], +/// @property {Map} igx-tooltip [$dark-bootstrap-tooltip] +/// @property {Map} igx-tree [$dark-bootstrap-tree] $dark-bootstrap-schema: ( - igx-avatar: $_dark-bootstrap-avatar, - igx-action-strip: $_dark-bootstrap-action-strip, - igx-badge: $_dark-bootstrap-badge, - igx-banner: $_dark-bootstrap-banner, - igx-bottom-nav: $_dark-bootstrap-bottom-nav, - igx-button: $_dark-bootstrap-button, - igx-button-group: $_dark-bootstrap-button-group, - igx-calendar: $_dark-bootstrap-calendar, - igx-card: $_dark-bootstrap-card, - igx-carousel: $_dark-bootstrap-carousel, - category-chart: $_dark-bootstrap-category-chart, - igx-checkbox: $_dark-bootstrap-checkbox, - igx-chip: $_dark-bootstrap-chip, - igx-column-actions: $_dark-bootstrap-column-actions, - igx-combo: $_dark-bootstrap-combo, - igx-dialog: $_dark-bootstrap-dialog, - data-chart: $_dark-bootstrap-data-chart, - doughnut-chart: $_dark-bootstrap-doughnut-chart, - igx-date-range: $_dark-bootstrap-date-range-picker, - igx-divider: $_dark-bootstrap-divider, - igc-dockmanager: $_dark-bootstrap-dock-manager, - igx-drop-down: $_dark-bootstrap-drop-down, - igx-expansion-panel: $_dark-bootstrap-expansion-panel, - linear-gauge: $_dark-bootstrap-linear-gauge, - radial-gauge: $_dark-bootstrap-radial-gauge, - financial-chart: $_dark-bootstrap-financial-chart, - bullet-graph: $_dark-bootstrap-graph, - igx-grid: $_dark-bootstrap-grid, - igx-grid-filtering: $_dark-bootstrap-grid-filtering, - igx-paginator: $_dark-bootstrap-pagination, - funnel-chart: $_dark-bootstrap-funnel-chart, - igx-grid-summary: $_dark-bootstrap-grid-summary, - igx-grid-toolbar: $_dark-bootstrap-grid-toolbar, - igx-highlight: $_dark-bootstrap-highlight, - igx-icon: $_dark-bootstrap-icon, - igx-input-group: $_dark-bootstrap-input-group, - igx-list: $_dark-bootstrap-list, - geo-map: $_dark-bootstrap-geo-map, - igx-navbar: $_dark-bootstrap-navbar, - igx-nav-drawer: $_dark-bootstrap-navdrawer, - igx-overlay: $_dark-bootstrap-overlay, - igx-linear-bar: $_dark-bootstrap-progress-linear, - igx-circular-bar: $_dark-bootstrap-progress-circular, - pie-chart: $_dark-bootstrap-pie-chart, - igx-radio: $_dark-bootstrap-radio, - igx-ripple: $_dark-bootstrap-ripple, - igx-scrollbar: $_dark-bootstrap-scrollbar, - shape-chart: $_dark-bootstrap-shape-chart, - igx-slider: $_dark-bootstrap-slider, - igx-snackbar: $_dark-bootstrap-snackbar, - sparkline: $_dark-bootstrap-sparkline, - igx-splitter: $_dark-bootstrap-splitter, - igx-switch: $_dark-bootstrap-switch, - igx-stepper: $_dark-bootstrap-stepper, - igx-tabs: $_dark-bootstrap-tabs, - igx-time-picker: $_dark-bootstrap-time-picker, - igx-toast: $_dark-bootstrap-toast, - igx-tooltip: $_dark-bootstrap-tooltip, - igx-tree: $_dark-bootstrap-tree, - igx-watermark: $_dark-bootstrap-watermark, + igx-avatar: $dark-bootstrap-avatar, + igx-action-strip: $dark-bootstrap-action-strip, + igx-badge: $dark-bootstrap-badge, + igx-banner: $dark-bootstrap-banner, + igx-bottom-nav: $dark-bootstrap-bottom-nav, + igx-button: $dark-bootstrap-button, + igx-button-group: $dark-bootstrap-button-group, + igx-calendar: $dark-bootstrap-calendar, + igx-card: $dark-bootstrap-card, + igx-carousel: $dark-bootstrap-carousel, + category-chart: $dark-bootstrap-category-chart, + igx-checkbox: $dark-bootstrap-checkbox, + igx-chip: $dark-bootstrap-chip, + igx-column-actions: $dark-bootstrap-column-actions, + igx-combo: $dark-bootstrap-combo, + igx-dialog: $dark-bootstrap-dialog, + data-chart: $dark-bootstrap-data-chart, + doughnut-chart: $dark-bootstrap-doughnut-chart, + igx-date-range: $dark-bootstrap-date-range-picker, + igx-divider: $dark-bootstrap-divider, + igc-dockmanager: $dark-bootstrap-dock-manager, + igx-drop-down: $dark-bootstrap-drop-down, + igx-expansion-panel: $dark-bootstrap-expansion-panel, + linear-gauge: $dark-bootstrap-linear-gauge, + radial-gauge: $dark-bootstrap-radial-gauge, + financial-chart: $dark-bootstrap-financial-chart, + bullet-graph: $dark-bootstrap-graph, + igx-grid: $dark-bootstrap-grid, + igx-grid-filtering: $dark-bootstrap-grid-filtering, + igx-paginator: $dark-bootstrap-pagination, + funnel-chart: $dark-bootstrap-funnel-chart, + igx-grid-summary: $dark-bootstrap-grid-summary, + igx-grid-toolbar: $dark-bootstrap-grid-toolbar, + igx-highlight: $dark-bootstrap-highlight, + igx-icon: $dark-bootstrap-icon, + igx-input-group: $dark-bootstrap-input-group, + igx-list: $dark-bootstrap-list, + geo-map: $dark-bootstrap-geo-map, + igx-navbar: $dark-bootstrap-navbar, + igx-nav-drawer: $dark-bootstrap-navdrawer, + igx-overlay: $dark-bootstrap-overlay, + igx-linear-bar: $dark-bootstrap-progress-linear, + igx-circular-bar: $dark-bootstrap-progress-circular, + pie-chart: $dark-bootstrap-pie-chart, + igx-radio: $dark-bootstrap-radio, + igx-ripple: $dark-bootstrap-ripple, + igx-scrollbar: $dark-bootstrap-scrollbar, + shape-chart: $dark-bootstrap-shape-chart, + igx-slider: $dark-bootstrap-slider, + igx-snackbar: $dark-bootstrap-snackbar, + sparkline: $dark-bootstrap-sparkline, + igx-splitter: $dark-bootstrap-splitter, + igx-switch: $dark-bootstrap-switch, + igx-stepper: $dark-bootstrap-stepper, + igx-tabs: $dark-bootstrap-tabs, + igx-time-picker: $dark-bootstrap-time-picker, + igx-toast: $dark-bootstrap-toast, + igx-tooltip: $dark-bootstrap-tooltip, + igx-tree: $dark-bootstrap-tree, + igx-watermark: $dark-bootstrap-watermark, ); /// Used to create indigo component themes. /// Use in combination with dark palettes. /// @type Map -/// @property {Map} igx-avatar [$_dark-indigo-avatar] -/// @property {Map} igx-action-strip [$_dark-indigo-action-strip] -/// @property {Map} igx-badge [$_dark-indigo-badge] -/// @property {Map} igx-banner [$_dark-indigo-banner] -/// @property {Map} igx-bottom-nav [$_dark-indigo-bottom-nav] -/// @property {Map} igx-button [$_dark-indigo-button] -/// @property {Map} igx-button-group [$_dark-indigo-button-group] -/// @property {Map} igx-calendar [$_dark-indigo-calendar] -/// @property {Map} igx-card [$_dark-indigo-card] -/// @property {Map} igx-carousel [$_dark-indigo-carousel] -/// @property {Map} category-chart [$_dark-indigo-category-chart] -/// @property {Map} igx-checkbox [$_dark-indigo-checkbox] -/// @property {Map} igx-chip [$_dark-indigo-chip] -/// @property {Map} igx-column-actions [$_dark-bootstrap-column-actions] -/// @property {Map} igx-combo [$_dark-indigo-combo] -/// @property {Map} igx-dialog [$_dark-indigo-dialog] -/// @property {Map} data-chart [$_dark-indigo-data-chart] -/// @property {Map} doughnut-chart [$_dark-indigo-doughnut-chart] -/// @property {Map} igx-date-range-picker [$_dark-indigo-date-range-picker] -/// @property {Map} igx-drop-down [$_dark-indigo-drop-down] -/// @property {Map} igx-divider [$_dark-indigo-divider] -/// @property {Map} igc-dockmanager [$_dark-indigo-dock-manager] -/// @property {Map} igx-expansion-panel [$_dark-indigo-expansion-panel] -/// @property {Map} linear-gauge [$_dark-indigo-linear-gauge] -/// @property {Map} radial-gauge [$_dark-indigo-radial-gauge] -/// @property {Map} financial-chart [$_dark-indigo-financial-chart] -/// @property {Map} bullet-graph [$_dark-indigo-graph] -/// @property {Map} igx-grid [$_dark-indigo-grid] -/// @property {Map} igx-grid-filtering [$_dark-indigo-grid-filtering] -/// @property {Map} igx-paginator [$_dark-indigo-pagination] -/// @property {Map} funnel-chart [$_dark-indigo-funnel-chart] -/// @property {Map} igx-grid-summary [$_dark-indigo-grid-summary] -/// @property {Map} igx-grid-toolbar [$_dark-indigo-grid-toolbar] -/// @property {Map} igx-highlight [$_dark-indigo-highlight] -/// @property {Map} igx-icon [$_dark-indigo-icon] -/// @property {Map} igx-input-group [$_dark-indigo-input-group] -/// @property {Map} igx-list [$_dark-indigo-list] -/// @property {Map} geo-map [$_dark-indigo-geo-map] -/// @property {Map} igx-navbar [$_dark-indigo-navbar] -/// @property {Map} igx-nav-drawer [$_dark-indigo-navdrawer] -/// @property {Map} igx-overlay [$_dark-indigo-overlay] -/// @property {Map} igx-linear-bar [$_dark-indigo-progress-linear] -/// @property {Map} igx-circular-bar [$_dark-indigo-progress-circular] -/// @property {Map} pie-chart [$_dark-indigo-pie-chart] -/// @property {Map} igx-radio [$_dark-indigo-radio] -/// @property {Map} igx-ripple [$_dark-indigo-ripple] -/// @property {Map} igx-scrollbar [$_dark-indigo-scrollbar] -/// @property {Map} shape-chart [$_dark-indigo-shape-chart] -/// @property {Map} igx-slider [$_dark-indigo-slider] -/// @property {Map} igx-snackbar [$_dark-indigo-snackbar] -/// @property {Map} sparkline [$_dark-indigo-sparkline] -/// @property {Map} igx-splitter [$_dark-indigo-splitter] -/// @property {Map} igx-switch [$_dark-indigo-switch] -/// @property {Map} igx-stepper [$_dark-indigo-stepper] -/// @property {Map} igx-tabs [$_dark-indigo-tabs] -/// @property {Map} igx-time-picker [$_dark-indigo-time-picker] -/// @property {Map} igx-toast [$_dark-indigo-toast] -/// @property {Map} igx-tooltip [$_dark-indigo-tooltip] -/// @property {Map} igx-tree [$_dark-indigo-tree] +/// @property {Map} igx-avatar [$dark-indigo-avatar] +/// @property {Map} igx-action-strip [$dark-indigo-action-strip] +/// @property {Map} igx-badge [$dark-indigo-badge] +/// @property {Map} igx-banner [$dark-indigo-banner] +/// @property {Map} igx-bottom-nav [$dark-indigo-bottom-nav] +/// @property {Map} igx-button [$dark-indigo-button] +/// @property {Map} igx-button-group [$dark-indigo-button-group] +/// @property {Map} igx-calendar [$dark-indigo-calendar] +/// @property {Map} igx-card [$dark-indigo-card] +/// @property {Map} igx-carousel [$dark-indigo-carousel] +/// @property {Map} category-chart [$dark-indigo-category-chart] +/// @property {Map} igx-checkbox [$ark-indigo-checkbox] +/// @property {Map} igx-chip [$dark-indigo-chip] +/// @property {Map} igx-column-actions [$dark-bootstrap-column-actions] +/// @property {Map} igx-combo [$dark-indigo-combo] +/// @property {Map} igx-dialog [$dark-indigo-dialog] +/// @property {Map} data-chart [$dark-indigo-data-chart] +/// @property {Map} doughnut-chart [$dark-indigo-doughnut-chart] +/// @property {Map} igx-date-range-picker [$dark-indigo-date-range-picker] +/// @property {Map} igx-drop-down [$dark-indigo-drop-down] +/// @property {Map} igx-divider [$dark-indigo-divider] +/// @property {Map} igc-dockmanager [$dark-indigo-dock-manager] +/// @property {Map} igx-expansion-panel [$dark-indigo-expansion-panel] +/// @property {Map} linear-gauge [$dark-indigo-linear-gauge] +/// @property {Map} radial-gauge [$dark-indigo-radial-gauge] +/// @property {Map} financial-chart [$dark-indigo-financial-chart] +/// @property {Map} bullet-graph [$dark-indigo-graph] +/// @property {Map} igx-grid [$dark-indigo-grid] +/// @property {Map} igx-grid-filtering [$dark-indigo-grid-filtering] +/// @property {Map} igx-paginator [$dark-indigo-pagination] +/// @property {Map} funnel-chart [$dark-indigo-funnel-chart] +/// @property {Map} igx-grid-summary [$dark-indigo-grid-summary] +/// @property {Map} igx-grid-toolbar [$dark-indigo-grid-toolbar] +/// @property {Map} igx-highlight [$dark-indigo-highlight] +/// @property {Map} igx-icon [$dark-indigo-icon] +/// @property {Map} igx-input-group [$dark-indigo-input-group] +/// @property {Map} igx-list [$dark-indigo-list] +/// @property {Map} geo-map [$dark-indigo-geo-map] +/// @property {Map} igx-navbar [$dark-indigo-navbar] +/// @property {Map} igx-nav-drawer [$dark-indigo-navdrawer] +/// @property {Map} igx-overlay [$dark-indigo-overlay] +/// @property {Map} igx-linear-bar [$dark-indigo-progress-linear] +/// @property {Map} igx-circular-bar [$dark-indigo-progress-circular] +/// @property {Map} pie-chart [$dark-indigo-pie-chart] +/// @property {Map} igx-radio [$dark-indigo-radio] +/// @property {Map} igx-ripple [$dark-indigo-ripple] +/// @property {Map} igx-scrollbar [$dark-indigo-scrollbar] +/// @property {Map} shape-chart [$dark-indigo-shape-chart] +/// @property {Map} igx-slider [$dark-indigo-slider] +/// @property {Map} igx-snackbar [$dark-indigo-snackbar] +/// @property {Map} sparkline [$dark-indigo-sparkline] +/// @property {Map} igx-splitter [$dark-indigo-splitter] +/// @property {Map} igx-switch [$dark-indigo-switch] +/// @property {Map} igx-stepper [$dark-indigo-stepper] +/// @property {Map} igx-tabs [$dark-indigo-tabs] +/// @property {Map} igx-time-picker [$dark-indigo-time-picker] +/// @property {Map} igx-toast [$dark-indigo-toast] +/// @property {Map} igx-tooltip [$dark-indigo-tooltip] +/// @property {Map} igx-tree [$dark-indigo-tree] $dark-indigo-schema: ( - igx-avatar: $_dark-indigo-avatar, - igx-action-strip: $_dark-indigo-action-strip, - igx-badge: $_dark-indigo-badge, - igx-banner: $_dark-indigo-banner, - igx-bottom-nav: $_dark-indigo-bottom-nav, - igx-button: $_dark-indigo-button, - igx-button-group: $_dark-indigo-button-group, - igx-calendar: $_dark-indigo-calendar, - igx-card: $_dark-indigo-card, - igx-carousel: $_dark-indigo-carousel, - category-chart: $_dark-indigo-category-chart, - igx-checkbox: $_dark-indigo-checkbox, - igx-chip: $_dark-indigo-chip, - igx-column-actions: $_dark-bootstrap-column-actions, - igx-combo: $_dark-indigo-combo, - igx-dialog: $_dark-indigo-dialog, - data-chart: $_dark-indigo-data-chart, - doughnut-chart: $_dark-indigo-doughnut-chart, - igx-date-range: $_dark-indigo-date-range-picker, - igx-drop-down: $_dark-indigo-drop-down, - igx-divider: $_dark-indigo-divider, - igc-dockmanager: $_dark-indigo-dock-manager, - igx-expansion-panel: $_dark-indigo-expansion-panel, - linear-gauge: $_dark-indigo-linear-gauge, - radial-gauge: $_dark-indigo-radial-gauge, - financial-chart: $_dark-indigo-financial-chart, - bullet-graph: $_dark-indigo-graph, - igx-grid: $_dark-indigo-grid, - igx-grid-filtering: $_dark-indigo-grid-filtering, - igx-paginator: $_dark-indigo-pagination, - funnel-chart: $_dark-indigo-funnel-chart, - igx-grid-summary: $_dark-indigo-grid-summary, - igx-grid-toolbar: $_dark-indigo-grid-toolbar, - igx-highlight: $_dark-indigo-highlight, - igx-icon: $_dark-indigo-icon, - igx-input-group: $_dark-indigo-input-group, - igx-list: $_dark-indigo-list, - geo-map: $_dark-indigo-geo-map, - igx-navbar: $_dark-indigo-navbar, - igx-nav-drawer: $_dark-indigo-navdrawer, - igx-overlay: $_dark-indigo-overlay, - igx-linear-bar: $_dark-indigo-progress-linear, - igx-circular-bar: $_dark-indigo-progress-circular, - pie-chart: $_dark-indigo-pie-chart, - igx-radio: $_dark-indigo-radio, - igx-ripple: $_dark-indigo-ripple, - igx-scrollbar: $_dark-indigo-scrollbar, - shape-chart: $_dark-indigo-shape-chart, - igx-slider: $_dark-indigo-slider, - igx-snackbar: $_dark-indigo-snackbar, - sparkline: $_dark-indigo-sparkline, - igx-splitter: $_dark-indigo-splitter, - igx-switch: $_dark-indigo-switch, - igx-stepper: $_dark-indigo-stepper, - igx-tabs: $_dark-indigo-tabs, - igx-time-picker: $_dark-indigo-time-picker, - igx-toast: $_dark-indigo-toast, - igx-tooltip: $_dark-indigo-tooltip, - igx-tree: $_dark-indigo-tree, - igx-watermark: $_dark-indigo-watermark, + igx-avatar: $dark-indigo-avatar, + igx-action-strip: $dark-indigo-action-strip, + igx-badge: $dark-indigo-badge, + igx-banner: $dark-indigo-banner, + igx-bottom-nav: $dark-indigo-bottom-nav, + igx-button: $dark-indigo-button, + igx-button-group: $dark-indigo-button-group, + igx-calendar: $dark-indigo-calendar, + igx-card: $dark-indigo-card, + igx-carousel: $dark-indigo-carousel, + category-chart: $dark-indigo-category-chart, + igx-checkbox: $dark-indigo-checkbox, + igx-chip: $dark-indigo-chip, + igx-column-actions: $dark-bootstrap-column-actions, + igx-combo: $dark-indigo-combo, + igx-dialog: $dark-indigo-dialog, + data-chart: $dark-indigo-data-chart, + doughnut-chart: $dark-indigo-doughnut-chart, + igx-date-range: $dark-indigo-date-range-picker, + igx-drop-down: $dark-indigo-drop-down, + igx-divider: $dark-indigo-divider, + igc-dockmanager: $dark-indigo-dock-manager, + igx-expansion-panel: $dark-indigo-expansion-panel, + linear-gauge: $dark-indigo-linear-gauge, + radial-gauge: $dark-indigo-radial-gauge, + financial-chart: $dark-indigo-financial-chart, + bullet-graph: $dark-indigo-graph, + igx-grid: $dark-indigo-grid, + igx-grid-filtering: $dark-indigo-grid-filtering, + igx-paginator: $dark-indigo-pagination, + funnel-chart: $dark-indigo-funnel-chart, + igx-grid-summary: $dark-indigo-grid-summary, + igx-grid-toolbar: $dark-indigo-grid-toolbar, + igx-highlight: $dark-indigo-highlight, + igx-icon: $dark-indigo-icon, + igx-input-group: $dark-indigo-input-group, + igx-list: $dark-indigo-list, + geo-map: $dark-indigo-geo-map, + igx-navbar: $dark-indigo-navbar, + igx-nav-drawer: $dark-indigo-navdrawer, + igx-overlay: $dark-indigo-overlay, + igx-linear-bar: $dark-indigo-progress-linear, + igx-circular-bar: $dark-indigo-progress-circular, + pie-chart: $dark-indigo-pie-chart, + igx-radio: $dark-indigo-radio, + igx-ripple: $dark-indigo-ripple, + igx-scrollbar: $dark-indigo-scrollbar, + shape-chart: $dark-indigo-shape-chart, + igx-slider: $dark-indigo-slider, + igx-snackbar: $dark-indigo-snackbar, + sparkline: $dark-indigo-sparkline, + igx-splitter: $dark-indigo-splitter, + igx-switch: $dark-indigo-switch, + igx-stepper: $dark-indigo-stepper, + igx-tabs: $dark-indigo-tabs, + igx-time-picker: $dark-indigo-time-picker, + igx-toast: $dark-indigo-toast, + igx-tooltip: $dark-indigo-tooltip, + igx-tree: $dark-indigo-tree, + igx-watermark: $dark-indigo-watermark, ); diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_input-group.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_input-group.scss index 4e848ab8d28..e24b078e9e4 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_input-group.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_input-group.scss @@ -1,4 +1,5 @@ -@import '../light/input-group'; +@use '../../../base' as *; +@use '../light/input-group' as *; //// /// @group schemas @@ -8,85 +9,77 @@ /// Generates a base dark input-group schema. /// @type {Map} -/// @prop {Color} search-background [#222] - The background color of an input group of type search. -$_base-dark-input-group: ( - search-background: #222 -); +$base-dark-input-group: $light-input-group; -/// Generates a dark input-group schema based on a mix of $_light-input-group and $_base-dark-input-group.. +/// Generates a dark input-group schema based on a mix of $light-input-group and $base-dark-input-group.. /// @type {Map} -/// @requires {function} extend -/// @requires $_light-input-group -/// @requires $_base-dark-input-group +/// @requires $light-input-group +/// @requires $base-dark-input-group /// @see $default-palette -$_dark-input-group: extend($_light-input-group, $_base-dark-input-group); +$dark-input-group: $base-dark-input-group; -/// Generates a dark fluent input-group schema based on a mix of $_fluent-input-group and $_base-dark-input-group. +/// Generates a dark fluent input-group schema based on a mix of $fluent-input-group and $base-dark-input-group. /// @type {Map} -/// @prop {Map} input-prefix-background [igx-color: ('grays', 100), to-opaque: #222] - The background color of an input prefix of type line, box and border. -/// @prop {Map} input-suffix-background [igx-color: ('grays', 100), to-opaque: #222] - The background color of an input sufix of type line, box and border. +/// @prop {Map} input-prefix-background [igx-color: ('grays', 100)] - The background color of an input prefix of type line, box and border. +/// @prop {Map} input-suffix-background [igx-color: ('grays', 100)] - The background color of an input sufix of type line, box and border. /// @requires {function} extend -/// @requires $_fluent-input-group -/// @requires $_base-dark-input-group -$_dark-fluent-input-group: extend( - $_fluent-input-group, - $_base-dark-input-group, +/// @requires $fluent-input-group +/// @requires $base-dark-input-group +$dark-fluent-input-group: extend( + $fluent-input-group, + $base-dark-input-group, ( input-prefix-background: ( - igx-color: ('grays', 100), - to-opaque: #222 + igx-color: ('grays', 50) ), input-suffix-background: ( - igx-color: ('grays', 100), - to-opaque: #222 + igx-color: ('grays', 50) + ), + + box-background: ( + igx-color: ('grays', 50), ), ) ); -/// Generates a dark bootstrap input-group schema based on a mix of $_bootstrap-input-group and $_base-dark-input-group. +/// Generates a dark bootstrap input-group schema based on a mix of $bootstrap-input-group and $base-dark-input-group. /// @type {Map} /// @requires {function} extend -/// @requires $_bootstrap-input-group -/// @requires $_base-dark-input-group -$_dark-bootstrap-input-group: extend( - $_bootstrap-input-group, - $_base-dark-input-group +/// @requires $bootstrap-input-group +/// @requires $base-dark-input-group +$dark-bootstrap-input-group: extend( + $bootstrap-input-group, + $base-dark-input-group ); /// Generates an dark indigo input-group schema /// @type {Map} -/// @prop {Map} success-secondary-color [igx-color: ('success'), rgba: .7, to-opaque: #fff] - The success color used in the valid state. -/// @prop {Map} warning-secondary-color [igx-color: ('warn'), rgba: .7, to-opaque: #fff] - The warning color used in the warning state. -/// @prop {Map} error-secondary-color [igx-color: ('error'), rgba: .7, to-opaque: #fff] - The error color used in the error state. +/// @prop {Map} success-secondary-color [igx-color: ('success', 500, .7)] - The success color used in the valid state. +/// @prop {Map} warning-secondary-color [igx-color: ('warn', 500, .7)] - The warning color used in the warning state. +/// @prop {Map} error-secondary-color [igx-color: ('error', 500, .7)] - The error color used in the error state. /// @prop {Map} $idle-secondary-color [igx-contrast-color: ('surface')] - The label color in the idle state. /// @prop {Map} $filled-secondary-color [igx-contrast-color: ('surface')] - The label color in the filled state. /// @prop {Map} $focused-secondary-color [igx-contrast-color: ('surface')] - The label color in the focused state. -/// @prop {Map} focused-bottom-line-color [igx-contrast-color: ('surface'), rgba: .38] - The bottom line and border colors in the focused state. +/// @prop {Map} focused-bottom-line-color [igx-contrast-color: ('surface')] - The bottom line and border colors in the focused state. /// @requires {function} extend -/// @requires $_indigo-input-group +/// @requires $indigo-input-group /// @see $default-palette -$_dark-indigo-input-group: extend( - $_indigo-input-group, +$dark-indigo-input-group: extend( + $indigo-input-group, ( search-background: transparent, success-secondary-color: ( - igx-color: ('success'), - rgba: .7, - to-opaque: #fff + igx-color: ('success', 500, .7) ), warning-secondary-color: ( - igx-color: ('warn'), - rgba: .7, - to-opaque: #fff + igx-color: ('warn', 500, .7) ), error-secondary-color: ( - igx-color: ('error'), - rgba: .7, - to-opaque: #fff + igx-color: ('error', 500, .7), ), idle-secondary-color: ( @@ -102,8 +95,7 @@ $_dark-indigo-input-group: extend( ), focused-bottom-line-color: ( - igx-contrast-color: ('surface'), - rgba: .38 + igx-contrast-color: ('surface') ), ) diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_list.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_list.scss index 2bed0217fbb..3210b08951f 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_list.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_list.scss @@ -1,4 +1,5 @@ -@import '../light/list'; +@use '../../../base' as *; +@use '../light/list' as *; //// /// @group schemas @@ -8,50 +9,55 @@ /// Generates a base dark list schema. /// @type {Map} -/// @property {Map} item-background-hover [igx-color: ('grays', 400), to-opaque: (#000)] - The list item hover background. -/// @property {Map} item-background-active [igx-color: ('grays', 400), to-opaque: (#000)] - The active list item background color. -$_base-dark-list: ( +/// @property {Map} item-background-hover [igx-color: ('grays', 400)] - The list item hover background. +/// @property {Map} item-background-active [igx-color: ('grays', 400)] - The active list item background color. +$base-dark-list: ( item-background-hover: ( - igx-color: ('grays', 400), - to-opaque: (#000) + igx-color: ('grays', 100) ), item-background-active: ( - igx-color: ('grays', 400), - to-opaque: (#000) + igx-color: ('grays', 100) ), ); -/// Generates a base dark list schema based on a mix of $_light-list and $_base-dark-list. +/// Generates a base dark list schema based on a mix of $light-list and $base-dark-list. /// @type {Map} /// @requires {function} extend -/// @requires $_light-list -/// @requires $_base-dark-list +/// @requires $light-list +/// @requires $base-dark-list /// @see $default-palette -$_dark-list: extend($_light-list, $_base-dark-list); +$dark-list: extend($light-list, $base-dark-list); -/// Generates a base dark fluent list schema based on a mix of $_fluent-list and $_base-dark-list.. +/// Generates a base dark fluent list schema based on a mix of $fluent-list and $base-dark-list.. /// @type {Map} /// @requires {function} extend -/// @requires $_fluent-list -/// @requires $_base-dark-list -$_dark-fluent-list: extend($_fluent-list, $_base-dark-list); +/// @requires $fluent-list +/// @requires $base-dark-list +$dark-fluent-list: extend($fluent-list, $base-dark-list); -/// Generates a base dark bootstrap list schema based on a mix of $_bootstrap-list and $_base-dark-list.. +/// Generates a base dark bootstrap list schema based on a mix of $bootstrap-list and $base-dark-list.. /// @type {Map} +/// @prop {Number} border-color [igx-color: ('grays', 100)] - The list border color. +/// @property {Map} item-background-hover [igx-color: ('grays', 100)] - The list item hover background. +/// @property {Map} item-background-active [igx-color: ('grays', 100)] - The active list item background color. /// @requires {function} extend -/// @property {Map} background [#222] - The list background color. -/// @property {Map} item-background [#222] - The list item background color. -/// @property {Map} header-background [#222] - The list header background color. -/// @requires $_bootstrap-list -/// @requires $_base-dark-list -$_dark-bootstrap-list: extend( - $_bootstrap-list, - $_base-dark-list, +/// @requires $bootstrap-list +/// @requires $base-dark-list +$dark-bootstrap-list: extend( + $bootstrap-list, ( - background: #222, - item-background: #222, - header-background: #222, + border-color: ( + igx-color: ('grays', 100) + ), + + item-background-hover: ( + igx-color: ('grays', 100), + ), + + item-background-active: ( + igx-color: ('grays', 100), + ), ) ); @@ -61,9 +67,9 @@ $_dark-bootstrap-list: extend( /// @property {Map} item-background-hover [igx-color: ('primary', 500), rgba: .5, to-opaque: (igx-color: 'surface')] - The list item hover background. /// @property {Map} item-background-active [igx-color: ('primary', 500), rgba: .5, to-opaque: (igx-color: 'surface')] - The active list item background color. /// @requires {function} extend -/// @requires $_indigo-list -$_dark-indigo-list: extend( - $_indigo-list, +/// @requires $indigo-list +$dark-indigo-list: extend( + $indigo-list, ( header-text-color: ( igx-contrast-color: 'surface' diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_navbar.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_navbar.scss index 3bb5c401cfb..d81e9eeb8a8 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_navbar.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_navbar.scss @@ -1,4 +1,4 @@ -@import '../light/navbar'; +@use '../light/navbar' as *; //// /// @group schemas @@ -9,25 +9,25 @@ /// Generates a dark navbar schema. /// @type {Map} /// @requires {function} extend -/// @requires $_light-navbar +/// @requires $light-navbar /// @see $default-palette -$_dark-navbar: extend($_light-navbar); +$dark-navbar: $light-navbar; /// Generates a dark fluent navbar schema. /// @type {Map} /// @requires {function} extend -/// @requires $_fluent-navbar -$_dark-fluent-navbar: extend($_fluent-navbar); +/// @requires $fluent-navbar +$dark-fluent-navbar: $fluent-navbar; /// Generates a dark bootstrap navbar schema. /// @type {Map} /// @requires {function} extend -/// @requires $_bootstrap-navbar -$_dark-bootstrap-navbar: extend($_bootstrap-navbar); +/// @requires $bootstrap-navbar +$dark-bootstrap-navbar: $bootstrap-navbar; /// Generates a dark indigo navbar schema. /// @type {Map} /// @requires {function} extend -/// @requires $_indigo-navbar -$_dark-indigo-navbar: extend($_indigo-navbar); +/// @requires $indigo-navbar +$dark-indigo-navbar: $indigo-navbar; diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_navdrawer.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_navdrawer.scss index 67472b46e80..7ead8789c5e 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_navdrawer.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_navdrawer.scss @@ -1,4 +1,5 @@ -@import '../light/navdrawer'; +@use '../../../base' as *; +@use '../light/navdrawer' as *; //// /// @group schemas @@ -6,22 +7,31 @@ /// @author Marin Popov //// +/// Generates a base dark navdrawer schema. +/// @type {Map} +/// @prop {Map} item-hover-background [igx-color: ('grays', 100, .5)] - The item's hover background color. +$dark-base-navdrawer: ( + item-hover-background: ( + igx-color: ('grays', 100, .5), + ), +); + /// Generates a dark navdrawer schema. /// @type {Map} -/// @requires {function} extend -/// @requires $_light-navdrawer +/// @requires $light-navdrawer /// @see $default-palette -$_dark-navdrawer: extend($_light-navdrawer); +$dark-navdrawer: extend($light-navdrawer, $dark-base-navdrawer); /// Generates a dark fluent navdrawer schema. /// @type {Map} /// @prop {Map} item-active-text-color [igx-color: ('primary', 200)] - The item's active text color. /// @prop {Map} item-active-icon-color [igx-color: ('primary', 100)] - The item's icon active color. -/// @prop {Map} item-active-background [igx-color: ('primary', 400), rgba: .12] - The item's active background color. +/// @prop {Map} item-active-background [igx-color: ('primary', 400, .12)] - The item's active background color. /// @requires {function} extend -/// @requires $_fluent-navdrawer -$_dark-fluent-navdrawer: extend( - $_fluent-navdrawer, +/// @requires $fluent-navdrawer +$dark-fluent-navdrawer: extend( + $fluent-navdrawer, + $dark-base-navdrawer, ( item-active-text-color: ( igx-color: ('primary', 200) @@ -32,75 +42,57 @@ $_dark-fluent-navdrawer: extend( ), item-active-background: ( - igx-color: ('primary', 400), - rgba: .12 + igx-color: ('primary', 400, .12), ), ) ); /// Generates a dark bootstrap navdrawer schema. /// @type {Map} -/// @requires {function} extend -/// @requires $_bootstrap-navdrawer -$_dark-bootstrap-navdrawer: extend( - $_bootstrap-navdrawer, -); +/// @requires $bootstrap-navdrawer +$dark-bootstrap-navdrawer: extend($bootstrap-navdrawer, $dark-base-navdrawer); /// Generates a dark indigo navdrawer schema. /// @type {Map} -/// @prop {Map} background [igx-color: ('grays', 800), to-opaque: #000] - The navigation drawer background color. -/// @prop {Map} item-header-text-color [igx-contrast-color: ('grays', 800)] - The header's idle text color. -/// @prop {Map} item-text-color [igx-contrast-color: ('grays', 800), rgba: .8] - The item's idle text color. -/// @prop {Map} item-icon-color [igx-contrast-color: ('grays', 800), rgba: .8] - The item's icon color. -/// @prop {Map} item-active-background [igx-contrast-color: ('grays', 800), rgba: .1] - The item's active background color. -/// @prop {map} item-active-text-color [igx-contrast-color: ('grays', 800)] - The item's active text color. -/// @prop {Map} item-active-icon-color [igx-contrast-color: ('grays', 800)] - The item's icon active color. -/// @prop {Map} item-hover-text-color [igx-contrast-color: ('grays', 800)] - The item's hover text color. -/// @prop {Map} item-hover-icon-color [igx-contrast-color: ('grays', 800)] - The item's hover icon color. +/// @prop {Map} background [igx-color: ('grays', 500)] - The navigation drawer background color. +/// @prop {Map} item-header-text-color [igx-contrast-color: ('grays', 50)] - The header's idle text color. +/// @prop {Map} item-text-color [igx-contrast-color: ('grays', 100) - The item's idle text color. +/// @prop {Map} item-icon-color [igx-contrast-color: ('grays', 100)] - The item's icon color. +/// @prop {Map} item-active-background [igx-contrast-color: ('grays', 400, .5)] - The item's active background color. +/// @prop {Map} item-hover-text-color [igx-contrast-color: ('grays', 50)] - The item's hover text color. +/// @prop {Map} item-hover-icon-color [igx-contrast-color: ('grays', 50)] - The item's hover icon color. /// @requires {function} extend -/// @requires $_indigo-navdrawer -$_dark-indigo-navdrawer: extend( - $_indigo-navdrawer, +/// @requires $indigo-navdrawer +$dark-indigo-navdrawer: extend( + $indigo-navdrawer, ( background: ( - igx-color: ('grays', 800), - to-opaque: #000 + igx-color: ('grays', 500) ), item-header-text-color: ( - igx-contrast-color: ('grays', 800), + igx-color: ('grays', 50), ), item-text-color: ( - igx-contrast-color: ('grays', 800), - rgba: .8 + igx-color: ('grays', 100), ), item-icon-color: ( - igx-contrast-color: ('grays', 800), - rgba: .8 - ), - - item-active-background: ( - igx-contrast-color: ('grays', 800), - rgba: .1 - ), - - item-active-text-color: ( - igx-contrast-color: ('grays', 800), - ), - - item-active-icon-color: ( - igx-contrast-color: ('grays', 800), + igx-color: ('grays', 100), ), item-hover-text-color: ( - igx-contrast-color: ('grays', 800), + igx-color: ('grays', 50) ), item-hover-icon-color: ( - igx-contrast-color: ('grays', 800), + igx-color: ('grays', 50) + ), + + item-active-background: ( + igx-color: ('grays', 400, .5), ), ) ); diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_overlay.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_overlay.scss index 02735c40119..a284f652cd5 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_overlay.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_overlay.scss @@ -1,4 +1,5 @@ -@import '../light/overlay'; +@use '../../../base' as *; +@use '../light/overlay' as *; //// /// @group schemas @@ -8,18 +9,17 @@ /// Generates a dark overlay schema. /// @type {Map} -/// @requires {function} extend -/// @requires $_light-overlay +/// @requires $light-overlay /// @see $default-palette -$_dark-overlay: extend($_light-overlay); +$dark-overlay: $light-overlay; /// Generates a dark fluent overlay schema. /// @type {Map} /// @property {Color} background-color [rgba(0, 0, 0, .4)] - The background color used for modal overlays. /// @requires {function} extend -/// @requires $_fluent-overlay -$_dark-fluent-overlay: extend( - $_fluent-overlay, +/// @requires $fluent-overlay +$dark-fluent-overlay: extend( + $fluent-overlay, ( background-color: rgba(0, 0, 0, .4) ) @@ -27,12 +27,10 @@ $_dark-fluent-overlay: extend( /// Generates a dark bootstrap overlay schema. /// @type {Map} -/// @requires {function} extend -/// @requires $_bootstrap-overlay -$_dark-bootstrap-overlay: extend($_bootstrap-overlay); +/// @requires $bootstrap-overlay +$dark-bootstrap-overlay: $bootstrap-overlay; /// Generates a dark indigo overlay schema. /// @type {Map} -/// @requires {function} extend -/// @requires $_indigo-overlay -$_dark-indigo-overlay: extend($_indigo-overlay); +/// @requires $indigo-overlay +$dark-indigo-overlay: $indigo-overlay; diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_pagination.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_pagination.scss index aacccd89e04..432099d1322 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_pagination.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_pagination.scss @@ -1,4 +1,6 @@ -@import '../light/pagination'; +@use '../../../base' as *; +@use '../light/pagination' as *; + //// /// @group schemas /// @access public @@ -7,47 +9,40 @@ /// Generates a base dark pagination schema. /// @type {Map} -/// @requires {function} extend -/// @prop {Map} background-color [#222] - The background color of the paging panel. -/// @requires $_light-pagination +/// @prop {Map} background-color [igx-color: ('surface')] - The background color of the paging panel. +/// @requires $light-pagination /// @see $default-palette -$_base-dark-pagination: ( - background-color: #222 +$base-dark-pagination: ( + background-color: ( + igx-color: ('surface') + ) ); -/// Generates a dark pagination schema based on a mix of $_light-pagination and $_base-dark-pagination. +/// Generates a dark pagination schema based on a mix of $light-pagination and $base-dark-pagination. /// @type {Map} /// @requires {function} extend -/// @requires $_light-pagination -/// @requires $_base-dark-pagination +/// @requires $light-pagination +/// @requires $base-dark-pagination /// @see $default-palette -$_dark-pagination: extend($_light-pagination, $_base-dark-pagination); +$dark-pagination: extend($light-pagination, $base-dark-pagination); -/// Generates a dark fluent pagination schema based on a mix of $_fluent-pagination and $_base-dark-pagination. +/// Generates a dark fluent pagination schema based on a mix of $fluent-pagination and $base-dark-pagination. /// @type {Map} /// @requires {function} extend -/// @requires $_fluent-pagination -/// @requires $_base-dark-pagination -$_dark-fluent-pagination: extend($_fluent-pagination, $_base-dark-pagination); +/// @requires $fluent-pagination +/// @requires $base-dark-pagination +$dark-fluent-pagination: extend($fluent-pagination, $base-dark-pagination); -/// Generates a dark bootstrap pagination schema based on a mix of $_bootstrap-pagination and $_base-dark-pagination. +/// Generates a dark bootstrap pagination schema based on a mix of $bootstrap-pagination and $base-dark-pagination. /// @type {Map} /// @requires {function} extend -/// @requires $_bootstrap-pagination -/// @requires $_base-dark-pagination -$_dark-bootstrap-pagination: extend($_bootstrap-pagination, $_base-dark-pagination); +/// @requires $bootstrap-pagination +/// @requires $base-dark-pagination +$dark-bootstrap-pagination: extend($bootstrap-pagination, $base-dark-pagination); /// Generates a dark indigo pagination schema. /// @type {Map} -/// @prop {Map} background-color [igx-color: ('surface', 500)] - The background color of the paging panel. /// @requires {function} extend -/// @requires $_dark-pagination -$_dark-indigo-pagination: extend( - $_indigo-pagination, - ( - background-color: ( - igx-color: ('surface', 500) - ), - ) -); +/// @requires $dark-pagination +$dark-indigo-pagination: extend($indigo-pagination, $base-dark-pagination); diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_pie-chart.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_pie-chart.scss index 8b2b86b7a8a..f10b0a78943 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_pie-chart.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_pie-chart.scss @@ -1,4 +1,4 @@ -@import '../light/pie-chart'; +@use '../light/pie-chart' as *; //// /// @group schemas @@ -9,28 +9,28 @@ /// Generates a dark base pie chart schema. /// @type {Map} /// @requires {function} extend -/// @requires $_light-pie-chart -/// @see $_light-pie-chart -$_dark-pie-chart: extend($_light-pie-chart); +/// @requires $light-pie-chart +/// @see $light-pie-chart +$dark-pie-chart: $light-pie-chart; /// Generates a dark fluent pie chart schema. /// @type {Map} /// @requires {function} extend -/// @requires $_fluent-pie-chart -/// @see $_fluent-pie-chart -$_dark-fluent-pie-chart: extend($_fluent-pie-chart); +/// @requires $fluent-pie-chart +/// @see $fluent-pie-chart +$dark-fluent-pie-chart: $fluent-pie-chart; /// Generates a dark bootstrap pie chart schema. /// @type {Map} /// @requires {function} extend -/// @requires $_bootstrap-pie-chart -/// @see $_bootstrap-pie-chart -$_dark-bootstrap-pie-chart: extend($_bootstrap-pie-chart); +/// @requires $bootstrap-pie-chart +/// @see $bootstrap-pie-chart +$dark-bootstrap-pie-chart: $bootstrap-pie-chart; /// Generates a dark indigo pie chart schema. /// @type {Map} /// @requires {function} extend -/// @requires $_indigo-pie-chart -/// @see $_indigo-pie-chart -$_dark-indigo-pie-chart: extend($_indigo-pie-chart); +/// @requires $indigo-pie-chart +/// @see $indigo-pie-chart +$dark-indigo-pie-chart: $indigo-pie-chart; diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_progress.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_progress.scss index 46596034c9a..124ba7523d3 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_progress.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_progress.scss @@ -1,4 +1,5 @@ -@import '../light/progress'; +@use '../../../base' as *; +@use '../light/progress' as *; //// /// @group schemas @@ -6,61 +7,86 @@ /// @author Marin Popov //// +/// Generates a dark base progress-linear schema. +/// @type {Map} +/// @property {Map} track-color [igx-color: ('grays', 100)] - The main track color. +/// @property {Map} stripes-color [igx-color: ('grays', 900, .7)] - The track stripes color. +$dark-base-progress-linear: ( + track-color: ( + igx-color: ('grays', 100) + ), + + stripes-color: ( + igx-color: ('grays', 900, .7) + ), +); + /// Generates a dark progress-linear schema. /// @type {Map} -/// @requires {function} extend -/// @requires $_light-progress-linear +/// @requires $light-progress-linear +/// @requires $dark-base-progress-linear /// @see $default-palette -$_dark-progress-linear: extend($_light-progress-linear); +$dark-progress-linear: extend($light-progress-linear, $dark-base-progress-linear); /// Generates a dark fluent progress-linear schema. /// @type {Map} -/// @requires {function} extend -/// @requires $_fluent-progress-linear +/// @requires $fluent-progress-linear +/// @requires $dark-base-progress-linear /// @see $default-palette -$_dark-fluent-progress-linear: extend($_fluent-progress-linear); +$dark-fluent-progress-linear: extend($fluent-progress-linear, $dark-base-progress-linear); /// Generates a dark bootstrap progress-linear schema. /// @type {Map} -/// @requires {function} extend -/// @requires $_bootstrap-progress-linear +/// @requires $bootstrap-progress-linear /// @see $default-palette -$_dark-bootstrap-progress-linear: extend($_bootstrap-progress-linear); +$dark-bootstrap-progress-linear: $bootstrap-progress-linear; /// Generates a dark indigo progress-linear schema. /// @type {Map} /// @requires {function} extend +/// @property {Map} track-color [igx-color: ('grays', 100)] - The main track color. /// @property {Color} stripes-color [rgba(#222, .35)] - The track stripes color. -/// @requires $_indigo-progress-linear +/// @requires $indigo-progress-linear /// @see $default-palette -$_dark-indigo-progress-linear: extend( - $_indigo-progress-linear, +$dark-indigo-progress-linear: extend( + $indigo-progress-linear, ( - stripes-color: rgba(#222, .35) + track-color: ( + igx-color: ('grays', 100) + ), + + stripes-color: ( + igx-color: ('grays', 50, .35) + ) ) ); /// Generates a dark progress-circular schema. /// @type {Map} -/// @requires {function} extend -/// @requires $_light-progress-circular -$_dark-progress-circular: extend($_light-progress-circular); +/// @property {Map} track-color [igx-color: ('grays', 100)] - The main track color. +$dark-base-progress-circular: ( + base-circle-color: ( + igx-color: ('grays', 100) + ), +); + +/// Generates a dark progress-circular schema. +/// @type {Map} +/// @requires $light-progress-circular +$dark-progress-circular: extend($light-progress-circular, $dark-base-progress-circular); /// Generates a dark fluent progress-circular schema. /// @type {Map} -/// @requires {function} extend -/// @requires $_fluent-progress-circular -$_dark-fluent-progress-circular: extend($_fluent-progress-circular); +/// @requires $fluent-progress-circular +$dark-fluent-progress-circular: extend($fluent-progress-circular, $dark-base-progress-circular); /// Generates a dark bootstrap progress-circular schema. /// @type {Map} -/// @requires {function} extend -/// @requires $_bootstrap-progress-circular -$_dark-bootstrap-progress-circular: extend($_bootstrap-progress-circular); +/// @requires $bootstrap-progress-circular +$dark-bootstrap-progress-circular: extend($bootstrap-progress-circular, $dark-base-progress-circular); /// Generates a dark indigo progress-circular schema. /// @type {Map} -/// @requires {function} extend -/// @requires $_indigo-progress-circular -$_dark-indigo-progress-circular: extend($_indigo-progress-circular); +/// @requires $indigo-progress-circular +$dark-indigo-progress-circular: extend($indigo-progress-circular, $dark-base-progress-circular); diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_radio.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_radio.scss index 63d90459c9c..6fb2415c3f1 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_radio.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_radio.scss @@ -1,4 +1,5 @@ -@import '../light/radio'; +@use '../../../base' as *; +@use '../light/radio' as *; //// /// @group schemas @@ -8,50 +9,54 @@ /// Generates a dark radio schema. /// @type {Map} -/// @requires {function} extend -/// @requires $_light-ripple +/// @requires $light-ripple /// @see $default-palette -$_dark-radio: extend($_light-radio); +$dark-radio: $light-radio; /// Generates a dark fluent radio schema. /// @type {Map} -/// @requires {function} extend -/// @requires $_fluent-radio -$_dark-fluent-radio: extend($_fluent-radio); +/// @requires $fluent-radio +$dark-fluent-radio: $fluent-radio; /// Generates a dark bootstrap radio schema. /// @type {Map} /// @property {Map} fill-hover-border-color [igx-color: 'surface'] - The text color used for the label text. /// @property {Map} fill-color-hover [igx-color: 'surface'] - The checked border and dot colors on hover. /// @requires {function} extend -/// @requires $_bootstrap-radio -$_dark-bootstrap-radio: extend($_bootstrap-radio, ( +/// @requires $bootstrap-radio +$dark-bootstrap-radio: extend($bootstrap-radio, ( fill-hover-border-color: ( - igx-color: 'surface' + igx-color: ('grays', 900) ), fill-color-hover: ( - igx-color: 'surface' + igx-color: ('grays', 900) ), )); /// Generates a dark indigo radio schema. /// @type {Map} -/// @property {Map} fill-hover-border-color [#fff] - The text color used for the label text. +/// @property {Map} fill-hover-border-color [igx-color: ('grays', 900)] - The text color used for the label text. /// @property {Map} empty-color [igx-color: ('grays', 700)] - The unchecked border color. -/// @property {Map} fill-color [#fff] - The checked border and dot colors. -/// @property {Map} fill-color-hover [#fff] - The checked border and dot colors on hover. +/// @property {Map} fill-color [igx-color: ('grays', 900)] - The checked border and dot colors. +/// @property {Map} fill-color-hover [igx-color: ('grays', 900)] - The checked border and dot colors on hover. /// @property {Map} disabled-color [igx-color: ('grays', 400)] - The disabled border and dot colors. /// @requires {function} extend -/// @requires $_indigo-radio -$_dark-indigo-radio: extend( - $_indigo-radio, +/// @requires $indigo-radio +$dark-indigo-radio: extend( + $indigo-radio, ( - fill-hover-border-color: #fff, + fill-hover-border-color: ( + igx-color: ('grays', 900) + ), - fill-color: #fff, + fill-color: ( + igx-color: ('grays', 900) + ), - fill-color-hover: #fff, + fill-color-hover: ( + igx-color: ('grays', 900) + ), empty-color: ( igx-color: ('grays', 700) diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_ripple.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_ripple.scss index ddec10d2edb..f6834404172 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_ripple.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_ripple.scss @@ -1,4 +1,4 @@ -@import '../light/ripple'; +@use '../light/ripple' as *; //// /// @group schemas @@ -8,26 +8,22 @@ /// Generates a dark ripple schema. /// @type {Map} -/// @requires {function} extend -/// @requires $_light-ripple +/// @requires $light-ripple /// @see $default-palette -$_dark-ripple: extend($_light-ripple); +$dark-ripple: $light-ripple; /// Generates a dark fluent ripple schema. /// @type {Map} -/// @requires {function} extend -/// @requires $_fluent-ripple -$_dark-fluent-ripple: extend($_fluent-ripple); +/// @requires $fluent-ripple +$dark-fluent-ripple: $fluent-ripple; /// Generates a dark bootstrap ripple schema. /// @type {Map} -/// @requires {function} extend -/// @requires $_bootstrap-ripple -$_dark-bootstrap-ripple: extend($_bootstrap-ripple); +/// @requires $bootstrap-ripple +$dark-bootstrap-ripple: $bootstrap-ripple; /// Generates a dark indigo ripple schema. /// @type {Map} -/// @requires {function} extend -/// @requires $_indigo-ripple -$_dark-indigo-ripple: extend($_indigo-ripple); +/// @requires $indigo-ripple +$dark-indigo-ripple: $indigo-ripple; diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_scrollbar.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_scrollbar.scss index 48046471c74..a94432a3ca4 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_scrollbar.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_scrollbar.scss @@ -1,4 +1,5 @@ -@import '../light/scrollbar'; +@use '../../../base' as *; +@use '../light/scrollbar' as *; //// /// @group schemas @@ -8,52 +9,40 @@ /// Generates a dark scrollbar schema. /// @type {Map} -/// @property {Color} thumb-background [igx-color: surface, lighten: 20%] - The background color used for the thumb. -/// @property {Color} track-background [igx-color: 'surface', lighten: 5%] - The background color used for the track. /// @property {String | Number} size [16px] - The size of the track. /// @requires {function} extend -/// @requires $_light-scrollbar +/// @requires $light-scrollbar /// @see $default-palette -$_dark-scrollbar: extend( - $_light-scrollbar, - ( - thumb-background: ( - igx-color: 'surface', - lighten: 20% - ), - ) -); +$dark-scrollbar: $light-scrollbar; /// Generates a dark fluent scrollbar schema. /// @type {Map} /// @requires {function} extend -/// @requires $_dark-scrollbar -$_dark-fluent-scrollbar: extend( - $_dark-scrollbar, - ( - variant: 'fluent', - ) -); +/// @requires $fluent-scrollbar +$dark-fluent-scrollbar: $fluent-scrollbar; /// Generates a dark bootstrap scrollbar schema. /// @type {Map} /// @requires {function} extend -/// @requires $_light-scrollbar -$_dark-bootstrap-scrollbar: extend( - $_light-scrollbar, - ( - variant: 'bootstrap', - ) -); +/// @requires $light-scrollbar +$dark-bootstrap-scrollbar: $bootstrap-scrollbar; /// Generates a dark indigo scrollbar schema. /// @type {Map} +/// @property {Map} thumb-background [igx-color: ('grays', 200)] - The background color used for the thumb. +/// @property {Color} track-background [igx-color: ('surface')] - The background color used for the track. /// @requires {function} extend -/// @requires $_indigo-scrollbar -$_dark-indigo-scrollbar: extend( - $_indigo-scrollbar, +/// @requires $indigo-scrollbar +$dark-indigo-scrollbar: extend( + $indigo-scrollbar, ( - variant: 'indigo-design', + thumb-background: ( + igx-color: ('grays', 200) + ), + + track-background: ( + igx-color: ('surface') + ), ) ); diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_shape-chart.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_shape-chart.scss index 03379a6fd56..4eb0f815a9a 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_shape-chart.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_shape-chart.scss @@ -1,4 +1,4 @@ -@import '../light/shape-chart'; +@use '../light/shape-chart' as *; //// /// @group schemas @@ -8,26 +8,22 @@ /// Generates a dark shape chart schema. /// @type {Map} -/// @requires {function} extend -/// @requires $_light-shape-chart +/// @requires $light-shape-chart /// @see $default-palette -$_dark-shape-chart: extend($_light-shape-chart); +$dark-shape-chart: $light-shape-chart; /// Generates a dark fluent shape-chart schema. /// @type {Map} -/// @requires {function} extend -/// @requires $_fluent-shape-chart -$_dark-fluent-shape-chart: extend($_fluent-shape-chart); +/// @requires $fluent-shape-chart +$dark-fluent-shape-chart: $fluent-shape-chart; /// Generates a dark bootstrap shape-chart schema. /// @type {Map} -/// @requires {function} extend -/// @requires $_bootstrap-shape-chart -$_dark-bootstrap-shape-chart: extend($_bootstrap-shape-chart); +/// @requires $bootstrap-shape-chart +$dark-bootstrap-shape-chart: $bootstrap-shape-chart; /// Generates a dark indigo shape-chart schema. /// @type {Map} -/// @requires {function} extend -/// @requires $_indigo-shape-chart -$_dark-indigo-shape-chart: extend($_indigo-shape-chart); +/// @requires $indigo-shape-chart +$dark-indigo-shape-chart: $indigo-shape-chart; diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_slider.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_slider.scss index d6b168474d9..f6a65e173f3 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_slider.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_slider.scss @@ -1,4 +1,5 @@ -@import '../light/slider'; +@use '../../../base' as *; +@use '../light/slider' as *; //// /// @group schemas @@ -6,61 +7,120 @@ /// @author Marin Popov //// +/// Generates a dark base slider schema. +/// @type {Map} +/// @property {Map} thumb-disabled-border-color [igx-color: ('grays', 100)] - The thumb border color when its disabled +/// @property {Map} disabled-thumb-color [igx-color: ('grays', 200)] - The thumb color when its disabled. +/// @property {Map} disabled-base-track-color [igx-color: ('grays', 100)] - The base background color of the track when is disabled. +/// @property {Map} tick-color [igx-color: ('grays', 100)] - The background-color of the tick. +/// @property {Map} tick-color-tall [igx-color: ('grays', 100)] - The background-color of the tall tick. + +$dark-base-slider: ( + tick-color: ( + igx-color: ('grays', 100) + ), + + tick-color-tall: ( + igx-color: ('grays', 100) + ), + + disabled-thumb-color: ( + igx-color: ('grays', 200), + ), + + disabled-base-track-color: ( + igx-color: ('grays', 100) + ), + + thumb-disabled-border-color: ( + igx-color: ('grays', 100) + ), +); + /// Generates a dark slider schema. /// @type {Map} -/// @requires {function} extend -/// @requires $_light-slider +/// @property {Map} track-color [igx-color: ('secondary', 500)] - The thumb border color. +/// @requires $light-slider /// @see $default-palette -$_dark-slider: extend($_light-slider); +$dark-slider: extend( + $light-slider, + $dark-base-slider, + ( + track-color: ( + igx-color: ('secondary', 500), + ), + ) +); /// Generates a dark fluent slider schema. /// @type {Map} -/// @property {Map} track-color [igx-color: ('secondary', 700), to-opaque: #222] - The thumb border color. -/// @property {Map} thumb-disabled-border-color [igx-color: ('grays', 400), to-opaque: #222] - The thumb border color when its disabled +/// @property {Map} track-color [igx-color: ('grays', 400)] - The thumb border color. +/// @property {Map} thumb-border-color [igx-color: ('grays', 400)] - The thumb border color. +/// @property {Map} base-track-color [igx-color: ('grays', 100)] - The base background color of the track. /// @requires {function} extend -/// @requires $_fluent-slider -$_dark-fluent-slider: extend( - $_fluent-slider, +/// @requires $fluent-slider +/// @requires $dark-base-slider +$dark-fluent-slider: extend( + $fluent-slider, + $dark-base-slider, ( track-color: ( - igx-color: ('grays', 700), - to-opaque: #222 + igx-color: ('grays', 400), ), - thumb-disabled-border-color: ( - igx-color: ('grays', 400), - to-opaque: #222 + thumb-border-color: ( + igx-color: ('grays', 400) + ), + + base-track-color: ( + igx-color: ('grays', 100), ), ) ); /// Generates a dark bootstrap slider schema. /// @type {Map} -/// @property {Map} track-color [igx-color: ('secondary', 700), to-opaque: #222] - The thumb border color. -/// @property {Map} thumb-disabled-border-color [igx-color: ('grays', 400), to-opaque: #222] - The thumb border color when its disabled +/// @property {Map} track-color [igx-color: ('grays', 400)] - The thumb border color. +/// @property {Map} thumb-border-color [igx-color: ('grays', 400)] - The thumb border color. +/// @property {Map} base-track-color [igx-color: ('grays', 100)] - The base background color of the track. /// @requires {function} extend -/// @requires $_bootstrap-slider -$_dark-bootstrap-slider: extend($_bootstrap-slider, ( - track-color: ( - igx-color: ('grays', 700), - to-opaque: #222 - ), +/// @requires $bootstrap-slider +/// @requires $dark-base-slider +$dark-bootstrap-slider: extend( + $bootstrap-slider, + $dark-base-slider, + ( + track-color: ( + igx-color: ('grays', 400), + ), - thumb-disabled-border-color: ( - igx-color: ('grays', 400), - to-opaque: #222 - ), -)); + thumb-border-color: ( + igx-color: ('grays', 400) + ), + + base-track-color: ( + igx-color: ('grays', 100), + ), + ) +); /// Generates a dark indigo slider schema. /// @type {Map} /// -/// @property {Map} base-track-hover-color [igx-color: ('grays', 600)] - The base background color of the track on hover. -/// +/// @property {Map} base-track-color [igx-color: ('grays', 200)] - The base background color of the track. +/// @property {Map} base-track-hover-color [igx-color: ('grays', 400)] - The base background color of the track on hover. /// @requires {function} extend -/// @requires $_indigo-slider -$_dark-indigo-slider: extend($_indigo-slider, ( - base-track-hover-color: ( - igx-color: ('grays', 600) - ), -)); +/// @requires $indigo-slider +$dark-indigo-slider: extend( + $indigo-slider, + $dark-base-slider, + ( + base-track-color: ( + igx-color: ('grays', 200) + ), + + base-track-hover-color: ( + igx-color: ('grays', 400) + ), + ) +); diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_snackbar.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_snackbar.scss index 10265f642b7..4ad00d230c6 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_snackbar.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_snackbar.scss @@ -1,4 +1,5 @@ -@import '../light/snackbar'; +@use '../../../base' as *; +@use '../light/snackbar' as *; //// /// @group schemas @@ -6,42 +7,43 @@ /// @author Marin Popov //// + /// Generates a dark snackbar schema. /// @type {Map} -/// @requires {function} extend -/// @requires $_light-snackbar +/// @requires $light-snackbar /// @see $default-palette -$_dark-snackbar: extend($_light-snackbar); +$dark-snackbar: $light-snackbar; /// Generates a dark fluent snackbar schema. /// @type {Map} -/// @requires {function} extend -/// @requires $_fluent-snackbar -$_dark-fluent-snackbar: extend($_fluent-snackbar); +/// @requires $fluent-snackbar +$dark-fluent-snackbar: $fluent-snackbar; /// Generates a dark bootstrap snackbar schema. /// @type {Map} -/// @requires {function} extend -/// @requires $_bootstrap-snackbar -$_dark-bootstrap-snackbar: extend($_bootstrap-snackbar); +/// @requires $bootstrap-snackbar +$dark-bootstrap-snackbar: $bootstrap-snackbar; /// Generates a dark indigo snackbar schema. /// @type {Map} -/// @property {Map} background [igx-color: ('grays', 400)] - The background color used in the snackbar. -/// @property {Map} text-color [#fff] - The text color used in the snackbar. -/// @property {Map} button-color [#fff] - The button color used in the snackbar. +/// @property {Map} background [igx-color: ('grays', 300)] - The background color used in the snackbar. +/// @property {Map} text-color [igx-contrast-color: ('grays', 200)] - The text color used in the snackbar. +/// @property {Map} button-color [igx-contrast-color: ('grays', 200)] - The button color used in the snackbar. /// @requires {function} extend -/// @requires $_indigo-snackbar -$_dark-indigo-snackbar: extend( - $_indigo-snackbar, +/// @requires $indigo-snackbar +$dark-indigo-snackbar: extend( + $indigo-snackbar, ( background: ( - igx-color: ('grays', 400) + igx-color: ('grays', 300) ), - text-color: #fff, - + text-color: ( + igx-contrast-color: ('grays', 200) + ), - button-color: #fff + button-color: ( + igx-contrast-color: ('grays', 200) + ), ) ); diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_sparkline.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_sparkline.scss index 386c084aef8..9fe9439ed9a 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_sparkline.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_sparkline.scss @@ -1,4 +1,4 @@ -@import '../light/sparkline'; +@use '../light/sparkline' as *; //// /// @group schemas @@ -8,26 +8,22 @@ /// Generates a dark sparkline schema. /// @type {Map} -/// @requires {function} extend -/// @requires $_light-sparkline +/// @requires $light-sparkline /// @see $default-palette -$_dark-sparkline: extend($_light-sparkline); +$dark-sparkline: $light-sparkline; /// Generates a dark fluent sparkline schema. /// @type {Map} -/// @requires {function} extend -/// @requires $_fluent-sparkline -$_dark-fluent-sparkline: extend($_fluent-sparkline); +/// @requires $fluent-sparkline +$dark-fluent-sparkline: $fluent-sparkline; /// Generates a dark bootstrap sparkline schema. /// @type {Map} -/// @requires {function} extend -/// @requires $_bootstrap-sparkline -$_dark-bootstrap-sparkline: extend($_bootstrap-sparkline); +/// @requires $bootstrap-sparkline +$dark-bootstrap-sparkline: $bootstrap-sparkline; /// Generates a dark indigo sparkline schema. /// @type {Map} -/// @requires {function} extend -/// @requires $_indigo-sparkline -$_dark-indigo-sparkline: extend($_indigo-sparkline); +/// @requires $indigo-sparkline +$dark-indigo-sparkline: $indigo-sparkline; diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_splitter.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_splitter.scss index 8294ec8b82f..4e733a6a4a3 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_splitter.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_splitter.scss @@ -1,4 +1,5 @@ -@import '../light/splitter'; +@use '../../../base' as *; +@use '../light/splitter' as *; //// /// @group schemas @@ -8,45 +9,46 @@ /// Generates a dark splitter schema. /// @type {Map} -/// @property {Map} handle-color [igx-color: 'surface', lighten: 20%] - The color for the bar drag handle. -/// @property {Map} expander-color [igx-color: 'surface', lighten: 20%] - The color for the arrow expander's. +/// @property {Map} bar-color [igx-color: ('grays', 50)] - The background color of the bar. +/// @property {Map} handle-color [igx-color: ('grays', 800)] - The color for the bar drag handle. +/// @property {Map} expander-color [igx-color: ('grays', 800)] - The color for the arrow expander's. /// @requires {function} extend -/// @requires $_light-splitter -$_dark-splitter: extend( - $_light-splitter, +/// @requires $light-splitter +$dark-splitter: extend( + $light-splitter, ( + bar-color: ( + igx-color: ('grays', 50) + ), + handle-color: ( - igx-color: 'surface', - lighten: 20% + igx-color: ('grays', 800) ), expander-color: ( - igx-color: 'surface', - lighten: 20% + igx-color: ('grays', 800) ), ) ); /// Generates a dark fluent splitter schema. /// @type {Map} -/// @requires {function} extend -/// @requires $_fluent-splitter -$_dark-fluent-splitter: extend($_fluent-splitter); +/// @requires $fluent-splitter +$dark-fluent-splitter: $fluent-splitter; /// Generates a dark bootstrap splitter schema. /// @type {Map} -/// @requires {function} extend -/// @requires $_bootstrap-splitter -$_dark-bootstrap-splitter: extend($_bootstrap-splitter); +/// @requires $bootstrap-splitter +$dark-bootstrap-splitter: $bootstrap-splitter; /// Generates a dark indigo splitter schema. /// @type {Map} /// @property {Map} handle-color [igx-color: 'surface'] - The color for the bar drag handle. /// @property {Map} expander-color [igx-color: 'surface'] - The color for the bar drag handle. /// @requires {function} extend -/// @requires $_indigo-splitter -$_dark-indigo-splitter: extend( - $_indigo-splitter, +/// @requires $indigo-splitter +$dark-indigo-splitter: extend( + $indigo-splitter, ( handle-color: ( igx-color: 'surface', diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_stepper.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_stepper.scss index e21419ebcab..891af647a49 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_stepper.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_stepper.scss @@ -1,4 +1,5 @@ -@import '../light/stepper'; +@use '../../../base' as *; +@use '../light/stepper' as *; //// /// @group schemas @@ -9,8 +10,40 @@ /// Generates a base dark stepper schema. /// @property {Map} current-indicator-color [igx-color: ('grays', 900)] - The color of the current step indicator. /// @property {Map} invalid-indicator-color [igx-color: ('grays', 900)] - The color of the invalid step indicator. +/// @property {Map} step-hover-background [igx-color: ('grays', 100, .3)] - The background of the step header on hover. +/// @property {Map} invalid-step-hover-background [igx-color: ('grays', 100, .3)] - The background of the invalid step header on hover. +/// @property {Map} current-step-hover-background [igx-color: ('grays', 100, .3)] - The background of the current step header on hover. +/// @property {Map} complete-step-hover-background [igx-color: ('grays', 100, .3)] - The background of the complete step header on hover. +/// @property {Map} step-focus-background [igx-color: ('grays', 100, .5)] - The background of the step header on hover. +/// @property {Map} invalid-step-focus-background [igx-color: ('grays', 100, .5)] - The background of the invalid step header on hover. +/// @property {Map} current-step-focus-background [igx-color: ('grays', 100, .5)] - The background of the current step header on hover. +/// @property {Map} complete-step-focus-background [igx-color: ('grays', 100, .5)] - The background of the complete step header on hover. /// @type {Map} -$_base-stepper: ( +$base-stepper: ( + step-hover-background: ( + igx-color: ('grays', 100, .3) + ), + complete-step-hover-background: ( + igx-color: ('grays', 100, .3) + ), + current-step-hover-background: ( + igx-color: ('grays', 100, .3) + ), + invalid-step-hover-background: ( + igx-color: ('grays', 100, .3) + ), + step-focus-background: ( + igx-color: ('grays', 100, .5) + ), + complete-step-focus-background: ( + igx-color: ('grays', 100, .5) + ), + current-step-focus-background: ( + igx-color: ('grays', 100, .5) + ), + invalid-step-focus-background: ( + igx-color: ('grays', 100, .5) + ), current-indicator-color: ( igx-color: ('grays', 900) ), @@ -23,39 +56,50 @@ $_base-stepper: ( /// Generates a dark stepper schema. /// @type {Map} /// @requires {function} extend -/// @requires $_light-stepper -/// @requires $_base-stepper +/// @requires $light-stepper +/// @requires $base-stepper /// @see $default-palette -$_dark-stepper: extend( - $_light-stepper, - $_base-stepper +$dark-stepper: extend( + $light-stepper, + $base-stepper ); /// Generates a dark fluent stepper schema /// @type {Map} +/// @property {Map} complete-indicator-background [igx-color: ('grays', 100)] - The background color of the completed step indicator. /// @requires {function} extend -/// @requires $_fluent-stepper -/// @requires $_base-stepper +/// @requires $fluent-stepper +/// @requires $base-stepper /// @see $default-palette -$_dark-fluent-stepper: extend( - $_fluent-stepper, - $_base-stepper +$dark-fluent-stepper: extend( + $fluent-stepper, + $base-stepper, + ( + complete-indicator-background: ( + igx-color: ('grays', 100) + ), + ) ); /// Generates a dark bootstrap stepper schema. /// @type {Map} -/// @property {Map} indicator-outline [igx-color: (igx-color: ('grays', 600)] - The outline color of the incomplete step indicator. +/// @property {Map} indicator-outline [igx-color: (igx-color: ('grays', 200)] - The outline color of the incomplete step indicator. /// @property {Map} disabled-indicator-outline [igx-color: ('grays', 300)] - The outline color of the disabled step indicator. +/// @property {Map} step-separator-color [igx-color: ('grays', 100)] - The separator border-color of between the steps. /// @requires {function} extend -/// @requires $_bootstrap-stepper -/// @requires $_base-stepper +/// @requires $bootstrap-stepper +/// @requires $base-stepper /// @see $default-palette -$_dark-bootstrap-stepper: extend( - $_bootstrap-stepper, - $_base-stepper, +$dark-bootstrap-stepper: extend( + $bootstrap-stepper, + $base-stepper, ( + step-separator-color: ( + igx-color: ('grays', 100) + ), + indicator-outline: ( - igx-color: ('grays', 600) + igx-color: ('grays', 200) ), disabled-indicator-outline: ( @@ -69,12 +113,12 @@ $_dark-bootstrap-stepper: extend( /// @property {Map} indicator-outline [igx-color: (igx-color: ('grays', 600)] - The outline color of the incomplete step indicator. /// @property {Map} disabled-indicator-outline [igx-color: ('grays', 300)] - The outline color of the disabled step indicator. /// @requires {function} extend -/// @requires $_indigo-stepper -/// @requires $_base-stepper +/// @requires $indigo-stepper +/// @requires $base-stepper /// @see $default-palette -$_dark-indigo-stepper: extend( - $_indigo-stepper, - $_base-stepper, +$dark-indigo-stepper: extend( + $indigo-stepper, + $base-stepper, ( indicator-outline: ( igx-color: ('grays', 600) diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_switch.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_switch.scss index 1b849043443..5ff824a84b2 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_switch.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_switch.scss @@ -1,4 +1,5 @@ -@import '../light/switch'; +@use '../../../base' as *; +@use '../light/switch' as *; //// /// @group schemas @@ -8,33 +9,33 @@ /// Generates a base dark switch schema. /// @type {Map} -/// @prop {Map} thumb-disabled-color [igx-color: ('grays', 400), to-opaque: #000] - The color of the thumb when the switch is disabled. +/// @prop {Map} thumb-disabled-color [igx-color: ('grays', 400)] - The color of the thumb when the switch is disabled. /// @see $default-palette -$_base-dark-switch: ( +$base-dark-switch: ( thumb-disabled-color: ( - igx-color: ('grays', 400), - to-opaque: #000 + igx-color: ('grays', 400) ) ); -/// Generates a dark switch schema based on a mix of $_light-switch and $_base-dark-switch. +/// Generates a dark switch schema based on a mix of $light-switch and $base-dark-switch. /// @type {Map} /// @requires {function} extend -/// @requires $_light-switch -/// @requires $_base-dark-switch +/// @requires $light-switch +/// @requires $base-dark-switch /// @see $default-palette -$_dark-switch: extend($_light-switch, $_base-dark-switch); +$dark-switch: extend($light-switch, $base-dark-switch); -/// Generates a dark fluent switch schema based on a mix of $_fluent-switch and $_base-dark-switch. +/// Generates a dark fluent switch schema based on a mix of $fluent-switch and $base-dark-switch. /// @type {Map} /// @property {Map} border-color [igx-color: ('grays', 500)] - The border color of the switch. /// @property {Map} border-hover-color [igx-color: ('grays', 800)] - The border color of the switch on hover. /// @property {Map} border-disabled-color [igx-color: ('grays', 200)] - The border color of the disabled switch. /// @property {Map} track-disabled-color [igx-color: ('grays', 200)] - The color of the track when the switch is disabled. +/// @property {Map} thumb-on-color [igx-color: ('grays', 900)] - The color of the thumb when the switch is on. /// @requires {function} extend -/// @requires $_fluent-switch -/// @requires $_base-dark-switch -$_dark-fluent-switch: extend($_fluent-switch, $_base-dark-switch, ( +/// @requires $fluent-switch +/// @requires $base-dark-switch +$dark-fluent-switch: extend($fluent-switch, $base-dark-switch, ( border-color: ( igx-color: ('grays', 500) ), @@ -49,36 +50,45 @@ $_dark-fluent-switch: extend($_fluent-switch, $_base-dark-switch, ( track-disabled-color: ( igx-color: ('grays', 200) - ) + ), + + thumb-on-color: ( + igx-color: ('grays', 900) + ), )); -/// Generates a dark bootstrap switch schema based on a mix of $_bootstrap-switch and $_base-dark-switch. +/// Generates a dark bootstrap switch schema based on a mix of $bootstrap-switch and $base-dark-switch. /// @type {Map} +/// @property {Map} thumb-on-color [igx-color: ('grays', 900)] - The color of the thumb when the switch is on. /// @requires {function} extend -/// @requires $_bootstrap-switch -/// @requires $_base-dark-switch -$_dark-bootstrap-switch: extend( - $_bootstrap-switch, - $_base-dark-switch +/// @requires $bootstrap-switch +/// @requires $base-dark-switch +$dark-bootstrap-switch: extend( + $bootstrap-switch, + $base-dark-switch, ( + thumb-on-color: ( + igx-color: ('grays', 900) + ), + ) ); /// Generates a dark indigo switch schema. /// @type {Map} /// @property {Map} thumb-on-color [igx-color: 'surface'] - The color of the thumb when the switch is on. -/// @property {Map} track-on-color [#fff] - The color of the track when the switch is on. +/// @property {Map} track-on-color [igx-color: ('grays', 900)] - The color of the track when the switch is on. /// @property {Map} thumb-off-color [igx-color: ('grays', 700)] - The color of the thumb when the switch is off. /// @property {Map} track-off-color [transparent] - The color of the track when the switch is off. /// /// @property {Color} border-color [igx-color: ('grays', 700)] - The border color of the switch. /// @property {Color} border-hover-color [igx-color: ('grays', 700)] - The border color of the switch on hover. /// @property {Color} border-disabled-color [igx-color: ('grays', 400)] - The border color of the disabled switch. -/// @property {Color} border-on-color [#fff] - The border color of the on-switch. -/// @property {Color} border-on-hover-color [#fff] - The border color of the on-switch. +/// @property {Color} border-on-color [igx-color: ('grays', 900)] - The border color of the on-switch. +/// @property {Color} border-on-hover-color [igx-color: ('grays', 900)] - The border color of the on-switch. /// @property {Map} label-disabled-color [igx-color: ('grays', 400)] - The color of the switch label when the switch is disabled /// @requires {function} extend -/// @requires $_indigo-switch -$_dark-indigo-switch: extend( - $_indigo-switch, +/// @requires $indigo-switch +$dark-indigo-switch: extend( + $indigo-switch, ( border-color: ( igx-color: ('grays', 700) @@ -92,9 +102,13 @@ $_dark-indigo-switch: extend( igx-color: ('grays', 400) ), - border-on-color: #fff, + border-on-color: ( + igx-color: ('grays', 900) + ), - border-on-hover-color: #fff, + border-on-hover-color: ( + igx-color: ('grays', 900) + ), thumb-on-color: ( igx-color: 'surface' @@ -104,7 +118,9 @@ $_dark-indigo-switch: extend( igx-color: ('grays', 700) ), - track-on-color: #fff, + track-on-color: ( + igx-color: ('grays', 900) + ), track-off-color: transparent, diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_tabs.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_tabs.scss index 6093c285ac5..987ce1db073 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_tabs.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_tabs.scss @@ -1,4 +1,5 @@ -@import '../light/badge'; +@use '../../../base' as *; +@use '../light/tabs' as *; //// /// @group schemas @@ -8,34 +9,39 @@ /// Generates a base dark tabs schema. /// @type {Map} -/// @prop {Color} item-background [#222] - The background color used for the tabs header. -/// @prop {Color} button-background [#222] - The color used for the button background. -$_base-dark-tabs: ( - item-background: #222, - button-background: #222 +/// @property {Map} item-hover-background [igx-color: ('grays', 100, .5)] - The background used for the tabs on hover. +/// @property {Map} item-active-background [igx-color: ('grays', 100, .5)] - The color used for the active/focused tab background. +$base-dark-tabs: ( + item-hover-background: ( + igx-color: ('grays', 100, .5) + ), + + item-active-background: ( + igx-color: ('grays', 100, .5) + ), ); -/// Generates a dark tabs schema based on a mix of $_light-tabs and $_base-dark-tabs. +/// Generates a dark tabs schema based on a mix of $light-tabs and $base-dark-tabs. /// @type {Map} /// @requires {function} extend -/// @requires $_light-tabs -/// @requires $_base-dark-tabs +/// @requires $light-tabs +/// @requires $base-dark-tabs /// @see $default-palette -$_dark-tabs: extend($_light-tabs, $_base-dark-tabs); +$dark-tabs: extend($light-tabs, $base-dark-tabs); -/// Generates a dark fluent tabs schema based on a mix of $_fluent-tabs and $_base-dark-tabs. +/// Generates a dark fluent tabs schema based on a mix of $fluent-tabs and $base-dark-tabs. /// @type {Map} /// @requires {function} extend -/// @requires $_fluent-tabs -/// @requires $_base-dark-tabs -$_dark-fluent-tabs: extend($_fluent-tabs, $_base-dark-tabs); +/// @requires $fluent-tabs +/// @requires $base-dark-tabs +$dark-fluent-tabs: extend($fluent-tabs, $base-dark-tabs); -/// Generates a dark bootstrap tabs schema based on a mix of $_bootstrap-tabs and $_base-dark-tabs. +/// Generates a dark bootstrap tabs schema based on a mix of $bootstrap-tabs and $base-dark-tabs. /// @type {Map} /// @prop {Map} item-background [igx-color: ('primary', 400)] - The background color used for the tabs header. /// @requires {function} extend -/// @requires $_bootstrap-tabs -$_dark-bootstrap-tabs: extend($_bootstrap-tabs, ( +/// @requires $bootstrap-tabs +$dark-bootstrap-tabs: extend($bootstrap-tabs, ( item-hover-color: ( igx-color: ('primary', 400) ), @@ -44,5 +50,5 @@ $_dark-bootstrap-tabs: extend($_bootstrap-tabs, ( /// Generates a dark indigo tabs schema. /// @type {Map} /// @requires {function} extend -/// @requires $_indigo-tabs -$_dark-indigo-tabs: extend($_indigo-tabs); +/// @requires $indigo-tabs +$dark-indigo-tabs: extend($indigo-tabs); diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_time-picker.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_time-picker.scss index b423b8fd5be..fba8b4402af 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_time-picker.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_time-picker.scss @@ -1,4 +1,5 @@ -@import '../light/badge'; +@use '../../../base' as *; +@use '../light/time-picker' as *; //// /// @group schemas @@ -8,22 +9,19 @@ /// Generates a dark time-picker schema. /// @type {Map} -/// @requires {function} extend -/// @requires $_light-time-picker +/// @requires $light-time-picker /// @see $default-palette -$_dark-time-picker: extend($_light-time-picker); +$dark-time-picker: $light-time-picker; /// Generates a dark fluent time-picker schema. /// @type {Map} -/// @requires {function} extend -/// @requires $_fluent-time-picker -$_dark-fluent-time-picker: extend($_fluent-time-picker); +/// @requires $fluent-time-picker +$dark-fluent-time-picker: $fluent-time-picker; /// Generates a dark bootstrap time-picker schema. /// @type {Map} -/// @requires {function} extend -/// @requires $_bootstrap-time-picker -$_dark-bootstrap-time-picker: extend($_bootstrap-time-picker); +/// @requires $bootstrap-time-picker +$dark-bootstrap-time-picker: $bootstrap-time-picker; /// Generates a dark indigo time-picker schema. /// @type {Map} @@ -31,9 +29,9 @@ $_dark-bootstrap-time-picker: extend($_bootstrap-time-picker); /// @prop {Map} selected-text-color [igx-color: ('primary', 300)] - The text color of a selected item in time picker. /// @prop {Map} hover-text-color [igx-color: ('primary', 300)] - The hover text color of an open time picker. /// @requires {function} extend -/// @requires $_indigo-time-picker -$_dark-indigo-time-picker: extend( - $_indigo-time-picker, +/// @requires $indigo-time-picker +$dark-indigo-time-picker: extend( + $indigo-time-picker, ( text-color: ( igx-contrast-color: ('surface') diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_toast.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_toast.scss index 4148cf2cfa5..409da00946d 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_toast.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_toast.scss @@ -1,4 +1,5 @@ -@import '../light/toast'; +@use '../../../base' as *; +@use '../light/toast' as *; //// /// @group schemas @@ -6,42 +7,55 @@ /// @author Marin Popov //// +/// Generates a dark base toast schema. +/// @type {Map} +/// @prop {Map} background [igx-color: ('grays', 500, .9)] - The background color used for the toast. +/// @prop {Map} text-color [igx-contrast-color: ('grays', 500)] - The text-color used for the toast. +$dark-base-toast: ( + background: ( + igx-color: ('grays', 500, .9) + ), + + text-color: ( + igx-contrast-color: ('grays', 500) + ) +); + /// Generates a dark toast schema. /// @type {Map} -/// @requires {function} extend -/// @requires $_light-toast +/// @requires $light-toast /// @see $default-palette -$_dark-toast: extend($_light-toast); +$dark-toast: extend($light-toast, $dark-base-toast); /// Generates a dark fluent toast schema. /// @type {Map} -/// @requires {function} extend -/// @requires $_fluent-toast -$_dark-fluent-toast: extend($_fluent-toast); +/// @requires $fluent-toast +$dark-fluent-toast: extend($fluent-toast, $dark-base-toast); /// Generates a dark bootstrap toast schema. /// @type {Map} +/// @prop {Map} background [igx-contrast-color: ('surface')] - The background color used for the toast. /// @prop {Map} text-color [igx-contrast-color: ('grays', 600)] - The text-color used for the toast. /// @requires {function} extend -/// @requires $_bootstrap-toast -$_dark-bootstrap-toast: extend( - $_bootstrap-toast, ( +/// @requires $bootstrap-toast +$dark-bootstrap-toast: extend( + $bootstrap-toast, ( + background: ( + igx-contrast-color: ('surface') + ), + text-color: ( - igx-contrast-color: ('grays', 600) + igx-contrast-color: ('grays', 900) ) ) ); /// Generates a dark indigo toast schema. /// @type {Map} -/// @prop {Map} background [igx-color: ('grays', 400)] - The background color used for the toast. /// @requires {function} extend -/// @requires $_indigo-toast -$_dark-indigo-toast: extend( - $_indigo-toast, ( - background: ( - igx-color: ('grays', 400) - ) - ) +/// @requires $indigo-toast +$dark-indigo-toast: extend( + $indigo-toast, + $dark-base-toast ); diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_tooltip.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_tooltip.scss index ec8cddd87f2..2b3c06acf26 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_tooltip.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_tooltip.scss @@ -1,4 +1,6 @@ -@import '../light/tooltip'; +@use '../../../base' as *; +@use '../light/tooltip' as *; + //// /// @group schemas /// @access public @@ -7,35 +9,34 @@ /// Generates a dark tooltip schema. /// @type {Map} -/// @requires {function} extend -/// @requires $_light-tooltip +/// @requires $light-tooltip /// @see $default-palette -$_dark-tooltip: extend($_light-tooltip); +$dark-tooltip: $light-tooltip; /// Generates a dark fluent tooltip schema. /// @type {Map} -/// @requires {function} extend -/// @requires $_fluent-tooltip -$_dark-fluent-tooltip: extend($_fluent-tooltip); +/// @requires $fluent-tooltip +$dark-fluent-tooltip: $fluent-tooltip; /// Generates a dark bootstrap tooltip schema. /// @type {Map} -/// @requires {function} extend -/// @requires $_bootstrap-tooltip -$_dark-bootstrap-tooltip: extend($_bootstrap-tooltip); +/// @requires $bootstrap-tooltip +$dark-bootstrap-tooltip: $bootstrap-tooltip; /// Generates a dark indigo tooltip schema. /// @type {Map} /// -/// @property {Map} background [#fff] - The background color of the tooltip. +/// @property {Map} background [igx-contrast-color: ('surface')] - The background color of the tooltip. /// @property {Map} text-color [text-color: (igx-color: 'surface')] - The text color of the tooltip. /// /// @requires {function} extend -/// @requires $_indigo-tooltip -$_dark-indigo-tooltip: extend( - $_indigo-tooltip, +/// @requires $indigo-tooltip +$dark-indigo-tooltip: extend( + $indigo-tooltip, ( - background: #fff, + background: ( + igx-contrast-color: ('surface') + ), text-color: ( igx-color: 'surface' diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_tree.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_tree.scss index ce3d052cf89..b63a38f463d 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_tree.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_tree.scss @@ -1,4 +1,6 @@ -@import '../light/tree'; +@use '../../../base' as *; +@use '../light/tree' as *; + //// /// @group schemas /// @access public @@ -7,11 +9,11 @@ /// Generates a base dark tree schema. /// @type {Map} -/// @prop {Map} background-active [igx-color: ('grays', 300)] - The background color used for the active tree node. -/// @prop {Map} foreground-active [igx-color: ('grays', 300)] - The color used for the content in active state of the tree node. -$_base-dark-tree: ( +/// @prop {Map} background-active [igx-color: ('grays', 100)] - The background color used for the active tree node. +/// @prop {Map} foreground-active [igx-color: ('grays', 900)] - The color used for the content in active state of the tree node. +$base-dark-tree: ( background-active: ( - igx-color: ('grays', 300), + igx-color: ('grays', 100), ), foreground-active: ( @@ -19,32 +21,37 @@ $_base-dark-tree: ( ), hover-color: ( - igx-color: ('grays', 300) - ) + igx-color: ('grays', 50, .1) + ), ); /// Generates a dark tree schema. /// @type {Map} /// @requires {function} extend -/// @requires $_light-tree -/// @requires $_base-dark-tree -$_dark-tree: extend($_light-tree, $_base-dark-tree); +/// @requires $light-tree +/// @requires $base-dark-tree +$dark-tree: extend($light-tree, $base-dark-tree); /// Generates a dark fluent tree schema. /// @type {Map} -/// @prop {Map} background-selected [igx-color: ('grays', 400)] - The background color used for the selected tree node. +/// @prop {Map} background-active [igx-color: ('grays', 100)] - The background color used for the active tree node. +/// @prop {Map} background-selected [igx-color: ('grays', 100)] - The background color used for the selected tree node. /// @prop {Map} foreground-selected [igx-color: ('grays', 900)] - The color used for the content of the selected tree node. /// @prop {Map} background-active-selected [igx-color: ('grays', 200)] - The background color used for the active selected tree node. /// @prop {Map} foreground-active-selected [igx-color: ('grays', 900)] - The color used for the content of the active selected tree node. /// @requires {function} extend -/// @requires $_fluent-tree -/// @requires $_base-dark-tree -$_dark-fluent-tree: extend( - $_fluent-tree, - $_base-dark-tree, +/// @requires $fluent-tree +/// @requires $base-dark-tree +$dark-fluent-tree: extend( + $fluent-tree, + $base-dark-tree, ( - backgroubd-selected: ( - igx-color: ('grays', 400) + background-active: ( + igx-color: ('grays', 100) + ), + + background-selected: ( + igx-color: ('grays', 100) ), foreground-selected: ( @@ -58,19 +65,39 @@ $_dark-fluent-tree: extend( foreground-active-selected: ( igx-color: ('grays', 900) ), + + hover-color: ( + igx-color: ('grays', 200, .5) + ), ) ); /// Generates a dark bootstrap tree schema. /// @type {Map} /// @requires {function} extend -/// @requires $_bootstrap-tree -/// @requires $_base-dark-tree -$_dark-bootstrap-tree: extend($_bootstrap-tree, $_base-dark-tree); +/// @requires $bootstrap-tree +/// @requires $base-dark-tree +$dark-bootstrap-tree: extend( + $bootstrap-tree, + $base-dark-tree, + ( + hover-color: ( + igx-color: ('grays', 300, .3) + ) + ) +); /// Generates a dark indigo tree schema. /// @type {Map} /// @requires {function} extend -/// @requires $_indigo-tree -/// @requires $_base-dark-tree -$_dark-indigo-tree: extend($_indigo-tree, $_base-dark-tree); +/// @requires $indigo-tree +/// @requires $base-dark-tree +$dark-indigo-tree: extend( + $indigo-tree, + $base-dark-tree, + ( + hover-color: ( + igx-color: ('primary', 200, .5) + ) + ) +); diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_watermark.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_watermark.scss index 09733b8de50..e7b2424b75e 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_watermark.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_watermark.scss @@ -1,4 +1,5 @@ -@import '../light/watermark'; +@use '../../../base' as *; +@use '../light/watermark' as *; //// /// @group schemas @@ -7,15 +8,15 @@ //// /// @ignore -$_dark-watermark-image: 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxODQiIGhlaWdodD0iMTA0IiB2aWV3Qm94PSIwIDAgMTg0IDEwNCI+CiAgPGRlZnM+CiAgICA8c3R5bGU+CiAgICAgIC5jbHMtMSB7CiAgICAgICAgZmlsbDogI2ZmZjsKICAgICAgICBmaWxsLXJ1bGU6IGV2ZW5vZGQ7CiAgICAgICAgb3BhY2l0eTogMC4wNTsKICAgICAgfQogICAgPC9zdHlsZT4KICA8L2RlZnM+CiAgPHBhdGggaWQ9InRyaWFsIiBjbGFzcz0iY2xzLTEiIGQ9Ik0xNi43MiwxMC4xNDhMMTAuMyw4LjQzNGwxLjgwNi02LjcyM0w3LjA5LDAuMzY5LDUuMjgzLDcuMDkyLDIuMzA4LDYuMywxLjE1LDEwLjYwOWwyLjk3NSwwLjhMMS4yMzUsMjIuMTYxcS0xLjM0NSw1LjAwNy0uMzY3LDcuMjA3VDUuOCwzMi42MjNhMjguMTYzLDI4LjE2MywwLDAsMCw0LjkuNjY0bDAuODUxLTQuMS0zLjg1LS44OHEtMS43MjEtLjQ2LTEuODg5LTEuNWExMS4xODgsMTEuMTg4LDAsMCwxLC41OTEtMy44NjdsMi43NDEtMTAuMiw2LjQxNiwxLjcxNFpNMTkuNywzNS43OWw0LjM0OC0xNi4xODEsMS4xMzUtLjE0NGEzMy44NzEsMzMuODcxLDAsMCwxLDcuMzgyLS4yMTRMMzMuOTE5LDE0LjJhMjIuOTQxLDIyLjk0MSwwLDAsMC04Ljc4OCwxLjE4TDI1Ljg3OCwxMi42bC01LjAyMS0xLjM0MkwxNC42MjksMzQuNDM2Wm0xNi43ODMsNC40ODUsNi4yMjktMjMuMTgyTDM3LjY0LDE1LjczOCwzMS40MTIsMzguOTIxWm03LjI4Ny0yNy4xMjNMNDUuMiw3LjgyLDQwLjEzMiw2LjQ2NiwzOC43LDExLjhabTIwLjA0MiwxMXEtMS4zOTEtMi4zMzQtNS42NDUtMy40NzFhNDEuOTUxLDQxLjk1MSwwLDAsMC05LjY0NS0xLjI4NWwtMC43NzMsMy42MiwxLjUxMywwLjNxNC41NjMsMC44MjIsNy41MzgsMS42MTdhMy41NjIsMy41NjIsMCwwLDEsMi4yLDEuMzgyLDMuNTI4LDMuNTI4LDAsMCwxLC4xMTYsMi44MTRMNTguNjU4LDMwLjgsNTIuNTI0LDI5LjdhMTAuNjQ1LDEwLjY0NSwwLDAsMC02LjMuMzU0cS0yLjMwNiwxLjA3NC0zLjI1Myw0LjYtMS45ODEsNy4zNzIsNC45NDYsOS4yMjNhMTguMzU3LDE4LjM1NywwLDAsMCw3Ljk0Ni4yODUsMTAuMTM0LDEwLjEzNCwwLDAsMCw1LjcyMiwzLjM2OEw2Mi43Niw0My43MmEyLjY2NSwyLjY2NSwwLDAsMS0xLjM0My0xLjAzLDIuMjczLDIuMjczLDAsMCwxLS4xMy0xLjY1bDIuODQtMTAuNTcxUTY1LjIsMjYuNDgyLDYzLjgwOCwyNC4xNDdaTTU3LjcsMzQuMzY3bC0xLjY1Nyw2LjE2Ni0wLjkxMi4wNTVBMTguNjM1LDE4LjYzNSwwLDAsMSw1MCw0MC4wMTNxLTIuODM2LS43NTgtMS45NzYtMy45NTdhMy4yMzcsMy4yMzcsMCwwLDEsNC4xNDItMi42MlpNNzEuNTMyLDQ5LjY0Mmw4LjgyLTMyLjgyNi01LjA2OC0xLjM1NC04LjgyLDMyLjgyNloiLz4KPC9zdmc+Cg=='; +$dark-watermark-image: 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxODQiIGhlaWdodD0iMTA0IiB2aWV3Qm94PSIwIDAgMTg0IDEwNCI+CiAgPGRlZnM+CiAgICA8c3R5bGU+CiAgICAgIC5jbHMtMSB7CiAgICAgICAgZmlsbDogI2ZmZjsKICAgICAgICBmaWxsLXJ1bGU6IGV2ZW5vZGQ7CiAgICAgICAgb3BhY2l0eTogMC4wNTsKICAgICAgfQogICAgPC9zdHlsZT4KICA8L2RlZnM+CiAgPHBhdGggaWQ9InRyaWFsIiBjbGFzcz0iY2xzLTEiIGQ9Ik0xNi43MiwxMC4xNDhMMTAuMyw4LjQzNGwxLjgwNi02LjcyM0w3LjA5LDAuMzY5LDUuMjgzLDcuMDkyLDIuMzA4LDYuMywxLjE1LDEwLjYwOWwyLjk3NSwwLjhMMS4yMzUsMjIuMTYxcS0xLjM0NSw1LjAwNy0uMzY3LDcuMjA3VDUuOCwzMi42MjNhMjguMTYzLDI4LjE2MywwLDAsMCw0LjkuNjY0bDAuODUxLTQuMS0zLjg1LS44OHEtMS43MjEtLjQ2LTEuODg5LTEuNWExMS4xODgsMTEuMTg4LDAsMCwxLC41OTEtMy44NjdsMi43NDEtMTAuMiw2LjQxNiwxLjcxNFpNMTkuNywzNS43OWw0LjM0OC0xNi4xODEsMS4xMzUtLjE0NGEzMy44NzEsMzMuODcxLDAsMCwxLDcuMzgyLS4yMTRMMzMuOTE5LDE0LjJhMjIuOTQxLDIyLjk0MSwwLDAsMC04Ljc4OCwxLjE4TDI1Ljg3OCwxMi42bC01LjAyMS0xLjM0MkwxNC42MjksMzQuNDM2Wm0xNi43ODMsNC40ODUsNi4yMjktMjMuMTgyTDM3LjY0LDE1LjczOCwzMS40MTIsMzguOTIxWm03LjI4Ny0yNy4xMjNMNDUuMiw3LjgyLDQwLjEzMiw2LjQ2NiwzOC43LDExLjhabTIwLjA0MiwxMXEtMS4zOTEtMi4zMzQtNS42NDUtMy40NzFhNDEuOTUxLDQxLjk1MSwwLDAsMC05LjY0NS0xLjI4NWwtMC43NzMsMy42MiwxLjUxMywwLjNxNC41NjMsMC44MjIsNy41MzgsMS42MTdhMy41NjIsMy41NjIsMCwwLDEsMi4yLDEuMzgyLDMuNTI4LDMuNTI4LDAsMCwxLC4xMTYsMi44MTRMNTguNjU4LDMwLjgsNTIuNTI0LDI5LjdhMTAuNjQ1LDEwLjY0NSwwLDAsMC02LjMuMzU0cS0yLjMwNiwxLjA3NC0zLjI1Myw0LjYtMS45ODEsNy4zNzIsNC45NDYsOS4yMjNhMTguMzU3LDE4LjM1NywwLDAsMCw3Ljk0Ni4yODUsMTAuMTM0LDEwLjEzNCwwLDAsMCw1LjcyMiwzLjM2OEw2Mi43Niw0My43MmEyLjY2NSwyLjY2NSwwLDAsMS0xLjM0My0xLjAzLDIuMjczLDIuMjczLDAsMCwxLS4xMy0xLjY1bDIuODQtMTAuNTcxUTY1LjIsMjYuNDgyLDYzLjgwOCwyNC4xNDdaTTU3LjcsMzQuMzY3bC0xLjY1Nyw2LjE2Ni0wLjkxMi4wNTVBMTguNjM1LDE4LjYzNSwwLDAsMSw1MCw0MC4wMTNxLTIuODM2LS43NTgtMS45NzYtMy45NTdhMy4yMzcsMy4yMzcsMCwwLDEsNC4xNDItMi42MlpNNzEuNTMyLDQ5LjY0Mmw4LjgyLTMyLjgyNi01LjA2OC0xLjM1NC04LjgyLDMyLjgyNloiLz4KPC9zdmc+Cg=='; /// Generates a dark watermark schema. /// @type {Map} /// @requires {function} extend -/// @requires $_light-watermark +/// @requires $light-watermark /// @see $default-palette -$_dark-watermark: extend( - $_light-watermark, +$dark-watermark: extend( + $light-watermark, ( background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTg0IiBoZWlnaHQ9IjEwNCIgdmlld0JveD0iMCAwIDE4NCAxMDQiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxnIHN0eWxlPSJtaXgtYmxlbmQtbW9kZTpjb2xvci1kb2RnZSIgb3BhY2l0eT0iMC4wNSI+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMTYuNzIgMTAuMTQ4TDEwLjMgOC40MzM5OUwxMi4xMDYgMS43MTA5OUw3LjA5IDAuMzY4OTg4TDUuMjgzIDcuMDkxOTlMMi4zMDggNi4yOTk5OUwxLjE1IDEwLjYwOUw0LjEyNSAxMS40MDlMMS4yMzUgMjIuMTYxQzAuMzM4MzMzIDI1LjQ5OSAwLjIxNiAyNy45MDEzIDAuODY4IDI5LjM2OEMxLjUyIDMwLjgzNDcgMy4xNjQgMzEuOTE5NyA1LjggMzIuNjIzQzcuNDEwNzEgMzIuOTg3NiA5LjA1MDM2IDMzLjIwOTcgMTAuNyAzMy4yODdMMTEuNTUxIDI5LjE4N0w3LjcwMSAyOC4zMDdDNi41NTM2NyAyOC4wMDAzIDUuOTI0IDI3LjUwMDMgNS44MTIgMjYuODA3QzUuNzgwMzcgMjUuNDkzMyA1Ljk4MDQzIDI0LjE4NDMgNi40MDMgMjIuOTRMOS4xNDQgMTIuNzRMMTUuNTYgMTQuNDU0TDE2LjcyIDEwLjE0OFpNMTkuNyAzNS43OUwyNC4wNDggMTkuNjA5TDI1LjE4MyAxOS40NjVDMjcuNjI4NSAxOS4xMjQ4IDMwLjEwMzkgMTkuMDUzIDMyLjU2NSAxOS4yNTFMMzMuOTE5IDE0LjJDMzAuOTQwOCAxNC4wMTgxIDI3Ljk1NTcgMTQuNDE4OSAyNS4xMzEgMTUuMzhMMjUuODc4IDEyLjZMMjAuODU3IDExLjI1OEwxNC42MjkgMzQuNDM2TDE5LjcgMzUuNzlaTTM2LjQ4MyA0MC4yNzVMNDIuNzEyIDE3LjA5M0wzNy42NCAxNS43MzhMMzEuNDEyIDM4LjkyMUwzNi40ODMgNDAuMjc1Wk00My43NyAxMy4xNTJMNDUuMiA3LjgxOTk5TDQwLjEzMiA2LjQ2NTk5TDM4LjcgMTEuOEw0My43NyAxMy4xNTJaTTYzLjgxMiAyNC4xNTJDNjIuODg0NyAyMi41OTYgNjEuMDAzIDIxLjQzOSA1OC4xNjcgMjAuNjgxQzU1LjAxMjcgMTkuODggNTEuNzc2IDE5LjQ0ODggNDguNTIyIDE5LjM5Nkw0Ny43NDkgMjMuMDE2TDQ5LjI2MiAyMy4zMTZDNTIuMzA0IDIzLjg2NCA1NC44MTY3IDI0LjQwMyA1Ni44IDI0LjkzM0M1Ny42ODEyIDI1LjEwMDIgNTguNDY2OCAyNS41OTM4IDU5IDI2LjMxNUM1OS4yMTE1IDI2Ljc1MDkgNTkuMzMxIDI3LjIyNTggNTkuMzUxIDI3LjcwOTlDNTkuMzcwOSAyOC4xOTQxIDU5LjI5MDkgMjguNjc3MSA1OS4xMTYgMjkuMTI5TDU4LjY1OCAzMC44TDUyLjUyNCAyOS43QzUwLjQzNjUgMjkuMTc4NiA0OC4yNCAyOS4zMDIgNDYuMjI0IDMwLjA1NEM0NC42ODY3IDMwLjc3IDQzLjYwMjMgMzIuMzAzMyA0Mi45NzEgMzQuNjU0QzQxLjY1MDMgMzkuNTY4NyA0My4yOTkgNDIuNjQzIDQ3LjkxNyA0My44NzdDNTAuNTEzIDQ0LjU1MTQgNTMuMjI1MyA0NC42NDg2IDU1Ljg2MyA0NC4xNjJDNTcuMzM4IDQ1Ljg5NTQgNTkuMzUzNiA0Ny4wODE3IDYxLjU4NSA0Ny41M0w2Mi43NiA0My43MkM2Mi4yMTIzIDQzLjUzMTcgNjEuNzQwOSA0My4xNzAxIDYxLjQxNyA0Mi42OUM2MS4xNjc4IDQyLjE3NTkgNjEuMTIxNCA0MS41ODY4IDYxLjI4NyA0MS4wNEw2NC4xMjcgMzAuNDY5QzY0Ljg0MjMgMjcuODExIDY0LjczNiAyNS43MDM3IDYzLjgwOCAyNC4xNDdMNjMuODEyIDI0LjE1MlpNNTcuNyAzNC4zNjdMNTYuMDQzIDQwLjUzM0w1NS4xMzEgNDAuNTg4QzUzLjQwMjMgNDAuNjM1MyA1MS42NzU0IDQwLjQ0MTggNTAgNDAuMDEzQzQ4LjEwOTMgMzkuNTA3NyA0Ny40NTA3IDM4LjE4ODcgNDguMDI0IDM2LjA1NkM0OC4wOTI2IDM1LjU5NiA0OC4yNTk1IDM1LjE1NjIgNDguNTEzNCAzNC43NjY1QzQ4Ljc2NzMgMzQuMzc2OCA0OS4xMDIxIDM0LjA0NjQgNDkuNDk1MiAzMy43OTc3QzQ5Ljg4ODIgMzMuNTQ5MSA1MC4zMzAzIDMzLjM4ODEgNTAuNzkxMiAzMy4zMjU3QzUxLjI1MiAzMy4yNjMyIDUxLjcyMSAzMy4zMDA5IDUyLjE2NiAzMy40MzZMNTcuNyAzNC4zNjdaTTcxLjUzMiA0OS42NDJMODAuMzUyIDE2LjgxNkw3NS4yODQgMTUuNDYyTDY2LjQ2NCA0OC4yODhMNzEuNTMyIDQ5LjY0MloiIGZpbGw9IiMwMDk5RkYiLz4KPC9nPgo8L3N2Zz4K') ) @@ -24,33 +25,33 @@ $_dark-watermark: extend( /// Generates a dark fluent watermark schema. /// @type {Map} /// @requires {function} extend -/// @requires $_fluent-watermark -$_dark-fluent-watermark: extend( - $_fluent-watermark, +/// @requires $fluent-watermark +$dark-fluent-watermark: extend( + $fluent-watermark, ( - background-image: #{url($_dark-watermark-image)}, + background-image: #{url($dark-watermark-image)}, ) ); /// Generates a dark bootstrap watermark schema. /// @type {Map} /// @requires {function} extend -/// @requires $_bootstrap-watermark -$_dark-bootstrap-watermark: extend( - $_bootstrap-watermark, +/// @requires $bootstrap-watermark +$dark-bootstrap-watermark: extend( + $bootstrap-watermark, ( - background-image: #{url($_dark-watermark-image)}, + background-image: #{url($dark-watermark-image)}, ) ); /// Generates a dark indigo watermark schema. /// @type {Map} /// @requires {function} extend -/// @requires $_bootstrap-watermark -$_dark-indigo-watermark: extend( - $_indigo-watermark, +/// @requires $bootstrap-watermark +$dark-indigo-watermark: extend( + $indigo-watermark, ( - background-image: #{url($_dark-watermark-image)}, + background-image: #{url($dark-watermark-image)}, ) ); diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/elevation/_badge.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/elevation/_badge.scss index 830353e2f12..7a7b2e078d9 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/elevation/_badge.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/elevation/_badge.scss @@ -6,13 +6,13 @@ /// @type Map /// @prop {Number} elevation [1] - The elevation level, between 0-24, to be used for the badge shadow. -$_default-elevation-badge: ( +$default-elevation-badge: ( elevation: 1 ); /// @type Map /// @prop {Number} elevation [0] - The elevation level, between 0-24, to be used for the badge shadow. -$_bootstrap-elevation-badge: ( +$bootstrap-elevation-badge: ( elevation: 0 ); diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/elevation/_bottom-nav.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/elevation/_bottom-nav.scss index bf2d18ae11b..da20211db50 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/elevation/_bottom-nav.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/elevation/_bottom-nav.scss @@ -6,19 +6,19 @@ /// @type Map /// @prop {Number} elevation [8] - The elevation level, between 0-24, to be used for the bottom nav. -$_default-elevation-bottom-nav: ( +$default-elevation-bottom-nav: ( elevation: 8 ); /// @type Map /// @prop {Number} elevation [1] - The elevation level, between 0-24, to be used for the bottom nav. -$_fluent-elevation-bottom-nav: ( +$fluent-elevation-bottom-nav: ( elevation: 1 ); /// @type Map /// @prop {Number} elevation [4] - The elevation level, between 0-24, to be used for the bottom nav. -$_indigo-elevation-bottom-nav: ( +$indigo-elevation-bottom-nav: ( elevation: 4 ); diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/elevation/_button-group.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/elevation/_button-group.scss index 8e5434f3ba8..be24fc0c10e 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/elevation/_button-group.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/elevation/_button-group.scss @@ -1,3 +1,5 @@ +@use '../../../base' as *; + //// /// @group schemas /// @access public @@ -12,28 +14,28 @@ $_flat-button-group: ( /// @type Map /// @prop {Number} elevation [2] - The elevation level, between 0-24, to be used for the button group shadow. -$_default-elevation-button-group: ( +$default-elevation-button-group: ( elevation: 2 ); /// @type Map /// @requires {function} extend /// @requires {Map} $_flat-button-group -$_fluent-elevation-button-group: extend( +$fluent-elevation-button-group: extend( $_flat-button-group ); /// @type Map /// @requires {function} extend /// @requires {Map} $_flat-button-group -$_bootstrap-elevation-button-group: extend( +$bootstrap-elevation-button-group: extend( $_flat-button-group ); /// @type Map /// @requires {function} extend /// @requires {Map} $_flat-button-group -$_indigo-elevation-button-group: extend( +$indigo-elevation-button-group: extend( $_flat-button-group ); diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/elevation/_button.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/elevation/_button.scss index 3788ae83a73..ba7363e2414 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/elevation/_button.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/elevation/_button.scss @@ -8,7 +8,7 @@ /// @prop {Number} resting-elevation [0] - The elevation level, between 0-24, to be used for the resting state. /// @prop {Number} hover-elevation [0] - The elevation level, between 0-24, to be used for the hover state. /// @prop {Number} focus-elevation [0] - The elevation level, between 0-24, to be used for the focus state. -$_flat-elevation-button: ( +$flat-elevation-button: ( resting-elevation: 0, hover-elevation: 0, focus-elevation: 0, @@ -18,7 +18,7 @@ $_flat-elevation-button: ( /// @prop {Number} resting-elevation [2] - The elevation level, between 0-24, to be used for the resting state. /// @prop {Number} hover-elevation [4] - The elevation level, between 0-24, to be used for the hover state. /// @prop {Number} focus-elevation [8] - The elevation level, between 0-24, to be used for the focus state. -$_material-raised-elevation: ( +$material-raised-elevation: ( resting-elevation: 2, hover-elevation: 4, focus-elevation: 8, @@ -28,7 +28,7 @@ $_material-raised-elevation: ( /// @prop {Number} resting-elevation [6] - The elevation level, between 0-24, to be used for the resting state. /// @prop {Number} hover-elevation [12] - The elevation level, between 0-24, to be used for the hover state. /// @prop {Number} focus-elevation [12] - The elevation level, between 0-24, to be used for the focus state. -$_material-fab-elevation: ( +$material-fab-elevation: ( resting-elevation: 6, hover-elevation: 12, focus-elevation: 12 @@ -38,7 +38,7 @@ $_material-fab-elevation: ( /// @prop {Number} resting-elevation [0] - The elevation level, between 0-24, to be used for the resting state. /// @prop {Number} hover-elevation [0] - The elevation level, between 0-24, to be used for the hover state. /// @prop {Number} focus-elevation [6] - The elevation level, between 0-24, to be used for the focus state. -$_material-ib-elevation: ( +$material-ib-elevation: ( resting-elevation: 0, hover-elevation: 0, focus-elevation: 6 @@ -47,9 +47,9 @@ $_material-ib-elevation: ( /// @type Map /// @see $_flat-elevation-button /// @requires $_flat-elevation-button -$_bootstrap-elevation-button: $_flat-elevation-button; +$bootstrap-elevation-button: $flat-elevation-button; /// @type Map /// @see $_flat-elevation-button /// @requires $_flat-elevation-button -$_indigo-elevation-button: $_flat-elevation-button; +$indigo-elevation-button: $flat-elevation-button; diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/elevation/_card.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/elevation/_card.scss index ea726ca5861..152e7d13a83 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/elevation/_card.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/elevation/_card.scss @@ -1,3 +1,5 @@ +@use '../../../base' as *; + //// /// @group schemas /// @access public @@ -7,7 +9,7 @@ /// @type Map /// @prop {Number} resting-elevation [2] - The elevation level, between 0-24, to be used for the resting state. /// @prop {Number} hover-elevation [8] - The elevation level, between 0-24, to be used for the hover state. -$_default-elevation-card: ( +$default-elevation-card: ( resting-elevation: 2, hover-elevation: 8 ); @@ -15,7 +17,7 @@ $_default-elevation-card: ( /// @type Map /// @prop {Number} resting-elevation [0] - The elevation level, between 0-24, to be used for the resting state. /// @prop {Number} hover-elevation [0] - The elevation level, between 0-24, to be used for the hover state. -$_flat-card: ( +$flat-card: ( resting-elevation: 0, hover-elevation: 0 ); @@ -23,17 +25,17 @@ $_flat-card: ( /// @type Map /// @requires {function} extend /// @requires {Map} $_flat-card -$_fluent-elevation-card: extend($_flat-card); +$fluent-elevation-card: extend($flat-card); /// @type Map /// @requires {function} extend /// @requires {Map} $_flat-card -$_bootstrap-elevation-card: extend($_flat-card); +$bootstrap-elevation-card: extend($flat-card); /// @type Map /// @prop {Number} resting-elevation [4] - The elevation level, between 0-24, to be used for the resting state. /// @prop {Number} hover-elevation [6] - The elevation level, between 0-24, to be used for the hover state. -$_indigo-elevation-card: ( +$indigo-elevation-card: ( resting-elevation: 4, hover-elevation: 6 ); diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/elevation/_carousel.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/elevation/_carousel.scss index 055d456b416..2b29a876399 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/elevation/_carousel.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/elevation/_carousel.scss @@ -1,3 +1,5 @@ +@use '../../../base' as *; + //// /// @group schemas /// @access public @@ -6,28 +8,28 @@ /// @type Map /// @prop {Number} button-elevation [1] - The elevation level, between 0-24, to be used for the carousel buttons. -$_default-elevation-carousel: ( +$default-elevation-carousel: ( button-elevation: 1, ); /// @type Map /// @prop {Number} button-elevation [0] - The elevation level, between 0-24, to be used for the carousel buttons. -$_flat-carousel: ( +$flat-carousel: ( button-elevation: 0, ); /// @type Map /// @requires {function} extend /// @requires {Map} $_flat-carousel -$_fluent-elevation-carousel: extend($_flat-carousel); +$fluent-elevation-carousel: extend($flat-carousel); /// @type Map /// @requires {function} extend /// @requires {Map} $_flat-carousel -$_bootstrap-elevation-carousel: extend($_flat-carousel); +$bootstrap-elevation-carousel: extend($flat-carousel); /// @type Map /// @requires {function} extend /// @requires {Map} $_flat-carousel -$_indigo-elevation-carousel: extend($_flat-carousel); +$indigo-elevation-carousel: extend($flat-carousel); diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/elevation/_chip.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/elevation/_chip.scss index 923b1a253d9..aa1a89c869c 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/elevation/_chip.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/elevation/_chip.scss @@ -6,24 +6,24 @@ /// @type Map /// @prop {Number} ghost-elevation [8] - The elevation level, between 0-24, to be used for the chip's ghost (dragging mode). -$_default-elevation-chip: ( +$default-elevation-chip: ( ghost-elevation: 8 ); /// @type Map /// @prop {Number} ghost-elevation [2] - The elevation level, between 0-24, to be used for the chip's ghost (dragging mode). -$_fluent-elevation-chip: ( +$fluent-elevation-chip: ( ghost-elevation: 2 ); /// @type Map /// @prop {Number} ghost-elevation [0] - The elevation level, between 0-24, to be used for the chip's ghost (dragging mode). -$_bootstrap-elevation-chip: ( +$bootstrap-elevation-chip: ( ghost-elevation: 0 ); /// @type Map /// @prop {Number} ghost-elevation [0] - The elevation level, between 0-24, to be used for the chip's ghost (dragging mode). -$_indigo-elevation-chip: ( +$indigo-elevation-chip: ( ghost-elevation: 1 ); diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/elevation/_dialog.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/elevation/_dialog.scss index dc2028357e3..8f8f3a91223 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/elevation/_dialog.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/elevation/_dialog.scss @@ -6,12 +6,12 @@ /// @type Map /// @prop {Number} elevation [24] - The elevation level, between 0-24, to be used for the dialog. -$_default-elevation-dialog: ( +$default-elevation-dialog: ( elevation: 24 ); /// @type Map /// @prop {Number} elevation [0] - The elevation level, between 0-24, to be used for the dialog. -$_bootstrap-elevation-dialog: ( +$bootstrap-elevation-dialog: ( elevation: 0 ); diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/elevation/_drop-down.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/elevation/_drop-down.scss index 754f9bb2207..aa76c98435d 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/elevation/_drop-down.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/elevation/_drop-down.scss @@ -6,24 +6,24 @@ /// @type Map /// @prop {Number} elevation [8] - The elevation level, between 0-24, to be used for the drop-down shadow. -$_default-elevation-drop-down: ( +$default-elevation-drop-down: ( elevation: 8 ); /// @type Map /// @prop {Number} elevation [4] - The elevation level, between 0-24, to be used for the drop-down shadow. -$_fluent-elevation-drop-down: ( +$fluent-elevation-drop-down: ( elevation: 4 ); /// @type Map /// @prop {Number} elevation [0] - The elevation level, between 0-24, to be used for the drop-down shadow. -$_bootstrap-elevation-drop-down: ( +$bootstrap-elevation-drop-down: ( elevation: 0 ); /// @type Map /// @prop {Number} elevation [3] - The elevation level, between 0-24, to be used for the drop-down shadow. -$_indigo-elevation-drop-down: ( +$indigo-elevation-drop-down: ( elevation: 3 ); diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/elevation/_grid.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/elevation/_grid.scss index 740bed13397..1131cdf45cf 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/elevation/_grid.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/elevation/_grid.scss @@ -7,7 +7,7 @@ /// @type Map /// @prop {number} grid-elevation [2] - The elevation level, between 0-24, to be used for the grid. /// @prop {number} drag-elevation [5] - The elevation level, between 0-24, to be used for movable elements (ex. column header). -$_default-elevation-grid: ( +$default-elevation-grid: ( grid-elevation: 2, drag-elevation: 5, ); @@ -15,7 +15,7 @@ $_default-elevation-grid: ( /// @type Map /// @prop {number} grid-elevation [0] - The elevation level, between 0-24, to be used for the grid. /// @prop {number} drag-elevation [1] - The elevation level, between 0-24, to be used for movable elements (ex. column header). -$_fluent-elevation-grid: ( +$fluent-elevation-grid: ( grid-elevation: 0, drag-elevation: 1, ); diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/elevation/_input-group.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/elevation/_input-group.scss index 78bc9c0068b..5e99c9a92f4 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/elevation/_input-group.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/elevation/_input-group.scss @@ -8,7 +8,7 @@ /// @prop {Number} search-resting-elevation [1] - The elevation level, between 0-24, to be used for the resting state of the search input. /// @prop {Number} search-hover-elevation [2] - The elevation level, between 0-24, to be used for the hover state of the search input. /// @prop {Number} search-disabled-elevation [0] - The elevation level, between 0-24, to be used for the disabled state of the search input. -$_default-elevation-input-group: ( +$default-elevation-input-group: ( search-resting-elevation: 1, search-hover-elevation: 2, search-disabled-elevation: 0, @@ -18,7 +18,7 @@ $_default-elevation-input-group: ( /// @prop {Number} search-resting-elevation [0] - The elevation level, between 0-24, to be used for the resting state of the search input. /// @prop {Number} search-hover-elevation [0] - The elevation level, between 0-24, to be used for the hover state of the search input. /// @prop {Number} search-disabled-elevation [0] - The elevation level, between 0-24, to be used for the disabled state of the search input. -$_fluent-elevation-input-group: ( +$fluent-elevation-input-group: ( search-resting-elevation: 0, search-hover-elevation: 0, search-disabled-elevation: 0, @@ -28,7 +28,7 @@ $_fluent-elevation-input-group: ( /// @prop {Number} search-resting-elevation [1] - The elevation level, between 0-24, to be used for the resting state of the search input. /// @prop {Number} search-hover-elevation [1] - The elevation level, between 0-24, to be used for the hover state of the search input. /// @prop {Number} search-disabled-elevation [1] - The elevation level, between 0-24, to be used for the disabled state of the search input. -$_indigo-elevation-input-group: ( +$indigo-elevation-input-group: ( search-resting-elevation: 1, search-hover-elevation: 1, search-disabled-elevation: 1, diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/elevation/_navbar.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/elevation/_navbar.scss index f227a4d6fe3..defe5e0f911 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/elevation/_navbar.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/elevation/_navbar.scss @@ -6,18 +6,18 @@ /// @type Map /// @prop {Number} elevation [4] - The elevation level, between 0-24, to be used for the navbar. -$_default-elevation-navbar: ( +$default-elevation-navbar: ( elevation: 4 ); /// @type Map /// @prop {Number} elevation [0] - The elevation level, between 0-24, to be used for the navbar. -$_bootstrap-elevation-navbar: ( +$bootstrap-elevation-navbar: ( elevation: 0 ); /// @type Map /// @prop {Number} elevation [0] - The elevation level, between 0-24, to be used for the navbar. -$_indigo-elevation-navbar: ( +$indigo-elevation-navbar: ( elevation: 0 ); diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/elevation/_navdrawer.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/elevation/_navdrawer.scss index 9bd05a1a8e4..892dda50879 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/elevation/_navdrawer.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/elevation/_navdrawer.scss @@ -6,12 +6,12 @@ /// @type Map /// @prop {Map} elevation [16] - The elevation level, between 0-24, to be used for the drawer. -$_default-elevation-navdrawer: ( +$default-elevation-navdrawer: ( elevation: 16 ); /// @type Map /// @prop {Map} elevation [0] - The elevation level, between 0-24, to be used for the drawer. -$_indigo-elevation-navdrawer: ( +$indigo-elevation-navdrawer: ( elevation: 0 ); diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/elevation/_snackbar.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/elevation/_snackbar.scss index 4ca02591c92..70b23b3f0aa 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/elevation/_snackbar.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/elevation/_snackbar.scss @@ -6,12 +6,12 @@ /// @type Map /// @prop {Number} elevation [4] - The elevation level, between 0-24, to be used in the snackbar. -$_default-elevation-snackbar: ( +$default-elevation-snackbar: ( elevation: 4 ); /// @type Map /// @prop {Number} elevation [10] - The elevation level, between 0-24, to be used in the snackbar. -$_bootstrap-elevation-snackbar: ( +$bootstrap-elevation-snackbar: ( elevation: 10 ); diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/elevation/_switch.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/elevation/_switch.scss index 6bf5ce92437..851b7d3c298 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/elevation/_switch.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/elevation/_switch.scss @@ -8,7 +8,7 @@ /// @property {Number} resting-elevation [2] - The elevation level, between 0-24, to be used for the resting state. /// @property {Number} hover-elevation [3] - The elevation level, between 0-24, to be used for the hover state. /// @property {Number} disabled-elevation [1] - The elevation level, between 0-24, to be used for the disabled state. -$_default-elevation-switch: ( +$default-elevation-switch: ( resting-elevation: 2, hover-elevation: 3, disabled-elevation: 1 diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/elevation/_time-picker.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/elevation/_time-picker.scss index ed35e628927..261bec4997e 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/elevation/_time-picker.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/elevation/_time-picker.scss @@ -7,7 +7,7 @@ /// @type Map /// @prop {Number} modal-elevation [24] - The elevation level, between 0-24, to be used for the time picker in modal mode. /// @prop {Number} dropdown-elevation [8] - The elevation level, between 0-24, to be used for the time picker in dropdown mode. -$_default-elevation-time-picker: ( +$default-elevation-time-picker: ( modal-elevation: 24, dropdown-elevation: 8 ); diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/elevation/_toast.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/elevation/_toast.scss index 53e1b1ed6d5..ceb36ad1246 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/elevation/_toast.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/elevation/_toast.scss @@ -6,13 +6,13 @@ /// @type Map /// @prop {Number} elevation [0] - The elevation level, between 0-24, to be used for the toast. -$_default-elevation-toast: ( +$default-elevation-toast: ( elevation: 0 ); /// @type Map /// @prop {Number} elevation [10] - The elevation level, between 0-24, to be used for the toast. -$_bootstrap-elevation-toast: ( +$bootstrap-elevation-toast: ( elevation: 10 ); diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_action-strip.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_action-strip.scss index b4ee24aeda0..65636f88310 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_action-strip.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_action-strip.scss @@ -1,4 +1,5 @@ -@import '../shape/action-strip'; +@use '../../../base' as *; +@use '../shape/action-strip' as *; //// /// @group schemas @@ -16,19 +17,17 @@ /// @requires {function} extend /// @requires {Map} $_default-shape-action-strip /// @see $default-palette -$_light-action-strip: extend( - $_default-shape-action-strip, +$light-action-strip: extend( + $default-shape-action-strip, ( variant: 'material', actions-background: ( igx-color: ('grays', 200), - to-opaque: #fff, - rgba: .9 ), background: ( - igx-color: ('grays', 100) + igx-color: ('grays', 100, .38) ), icon-color: "'currentColor'", @@ -45,9 +44,9 @@ $_light-action-strip: extend( /// @requires {function} extend /// @requires {Map} $_light-action-strip /// @requires {Map} $_fluent-shape-action-strip -$_fluent-action-strip: extend( - $_light-action-strip, - $_fluent-shape-action-strip, +$fluent-action-strip: extend( + $light-action-strip, + $fluent-shape-action-strip, ( variant: 'fluent', ) @@ -59,9 +58,9 @@ $_fluent-action-strip: extend( /// @requires {function} extend /// @requires {Map} $_light-action-strip /// @requires {Map} $_bootstrap-shape-action-strip -$_bootstrap-action-strip: extend( - $_light-action-strip, - $_bootstrap-shape-action-strip, +$bootstrap-action-strip: extend( + $light-action-strip, + $bootstrap-shape-action-strip, ( variant: 'bootstrap', ) @@ -75,9 +74,9 @@ $_bootstrap-action-strip: extend( /// @requires {function} extend /// @requires {Map} $_light-action-strip /// @requires {Map} $_indigo-shape-action-strip -$_indigo-action-strip: extend( - $_light-action-strip, - $_indigo-shape-action-strip, +$indigo-action-strip: extend( + $light-action-strip, + $indigo-shape-action-strip, ( variant: 'indigo-design', @@ -86,7 +85,7 @@ $_indigo-action-strip: extend( ), icon-color: ( - igx-contrast-color: 'primary' + igx-contrast-color: 'primary', ), ) ); diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_avatar.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_avatar.scss index 7f463930f4e..58431d80f6b 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_avatar.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_avatar.scss @@ -1,4 +1,5 @@ -@import '../shape/avatar'; +@use '../../../base' as *; +@use '../shape/avatar' as *; //// /// @group schemas @@ -15,15 +16,15 @@ /// @requires {function} extend /// @requires {Map} $_square-shape-avatar /// @see $default-palette -$_light-avatar: extend( - $_square-shape-avatar, +$light-avatar: extend( + $square-shape-avatar, ( background: ( - igx-color: ('grays', 400) + igx-color: ('grays', 400, .54) ), color: ( - igx-color: ('grays', 800) + igx-color: ('grays', 800, .96) ), ) ); @@ -32,8 +33,8 @@ $_light-avatar: extend( /// @type {Map} /// @requires {function} extend /// @requires {Map} $_light-avatar -$_fluent-avatar: extend( - $_light-avatar, +$fluent-avatar: extend( + $light-avatar, ( variant: 'fluent', ) @@ -45,9 +46,9 @@ $_fluent-avatar: extend( /// @requires {function} extend /// @requires {Map} $_light-avatar /// @requires {Map} $_bootstrap-shape-avatar -$_bootstrap-avatar: extend( - $_light-avatar, - $_bootstrap-shape-avatar, +$bootstrap-avatar: extend( + $light-avatar, + $bootstrap-shape-avatar, ( variant: 'bootstrap', ) @@ -57,8 +58,8 @@ $_bootstrap-avatar: extend( /// @type {Map} /// @requires {function} extend /// @requires {Map} $_light-avatar -$_indigo-avatar: extend( - $_light-avatar, +$indigo-avatar: extend( + $light-avatar, ( variant: 'indigo-design', ) diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_badge.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_badge.scss index 977b077e9cd..f09b6f124aa 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_badge.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_badge.scss @@ -1,5 +1,6 @@ -@import '../shape/badge'; -@import '../elevation/badge'; +@use '../../../base' as *; +@use '../shape/badge' as *; +@use '../elevation/badge' as *; //// /// @group schemas @@ -11,7 +12,7 @@ /// @type {Map} /// @prop {Map} icon-color [igx-contrast-color: ('primary', 500)] - The icon color used. /// @prop {Map} text-color [igx-contrast-color: ('primary', 500)] - The text color used. -/// @prop {Color} border-color [#fff] - The border color used. +/// @prop {Color} border-color [igx-color: ('grays', 50)] - The border color used. /// @prop {Number} border-width [0] - The border width of the badge component. /// @prop {Map} background-color [igx-color: ('primary', 500)] - The background color used. /// @prop {Number} elevation [1] - The elevation level, between 0-24, to be used for the badge shadow. @@ -20,9 +21,9 @@ /// @requires {Map} $_default-shape-badge /// @requires {Map} $_default-elevation-badge /// @see $default-palette -$_light-badge: extend( - $_default-shape-badge, - $_default-elevation-badge, +$light-badge: extend( + $default-shape-badge, + $default-elevation-badge, ( icon-color: ( igx-contrast-color: ('primary', 500) @@ -32,11 +33,14 @@ $_light-badge: extend( igx-contrast-color: ('primary', 500) ), - border-color: #fff, + border-color: ( + igx-color: ('grays', 50) + ), background-color: ( igx-color: ('primary', 500) ), + border-width: 0 ) ); @@ -45,7 +49,7 @@ $_light-badge: extend( /// @type {Map} /// @requires {function} extend /// @requires {Map} $_light-badge -$_fluent-badge: extend($_light-badge); +$fluent-badge: $light-badge; /// Generates a bootstrap badge schema. /// @type {Map} @@ -55,10 +59,10 @@ $_fluent-badge: extend($_light-badge); /// @requires {Map} $_light-badge /// @requires {Map} $_bootstrap-shape-badge /// @requires {Map} $_bootstrap-elevation-badge -$_bootstrap-badge: extend( - $_light-badge, - $_bootstrap-shape-badge, - $_bootstrap-elevation-badge, +$bootstrap-badge: extend( + $light-badge, + $bootstrap-shape-badge, + $bootstrap-elevation-badge, ( border-width: 1px ) @@ -68,7 +72,5 @@ $_bootstrap-badge: extend( /// @type {Map} /// @requires {function} extend /// @requires {Map} $_light-badge -$_indigo-badge: extend( - $_light-badge -); +$indigo-badge: $light-badge; diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_banner.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_banner.scss index 9718975ca31..cb3a47b74b0 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_banner.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_banner.scss @@ -1,3 +1,5 @@ +@use '../../../base' as *; + //// /// @group schemas /// @access public @@ -7,19 +9,17 @@ /// Generates a light banner schema. /// @type {Map} /// @property {Map} banner-background [igx-color: 'surface']- The background color used banner background. -/// @property {Map} banner-message-color [igx-color: 'surface', text-contrast: (), rgba: .87]- The color used for banner label. +/// @property {Map} banner-message-color [igx-contrast-color: 'surface']- The color used for banner label. /// @property {Map} banner-border-color [igx-color: ('grays', 400)] - The border color used banner border. -/// @property {Map} banner-illustration-color [igx-color: 'surface', text-contrast: (), rgba: .87] - The color used banner illustration. +/// @property {Map} banner-illustration-color [igx-contrast-color: 'surface'] - The color used banner illustration. /// @see $default-palette -$_light-banner: ( +$light-banner: ( banner-background: ( igx-color: 'surface' ), banner-message-color: ( - igx-color: 'surface', - text-contrast: (), - rgba: .87 + igx-contrast-color: 'surface', ), banner-border-color: ( @@ -27,29 +27,29 @@ $_light-banner: ( ), banner-illustration-color: ( - igx-color: 'surface', - text-contrast: (), - rgba: .87 + igx-contrast-color: 'surface', ) ); /// Generates a fluent banner schema. /// @type {Map} /// @requires {function} extend -/// @requires {Map} $_light-banner -$_fluent-banner: extend($_light-banner); +/// @requires {Map} $light-banner +$fluent-banner: $light-banner; /// Generates a bootstrap banner schema. /// @type {Map} -/// @property {Map} banner-background [#fff]- The background color used banner background. +/// @property {Map} banner-background [igx-color: ('grays', 50)]- The background color used banner background. /// @property {Map} banner-message-color [igx-color: ('grays', 800)]- The color used for banner label. /// @property {Map} banner-illustration-color [igx-color: ('grays', 800)] - The color used banner illustration. /// @requires {function} extend -/// @requires {Map} $_light-banner -$_bootstrap-banner: extend( - $_light-banner, +/// @requires {Map} $light-banner +$bootstrap-banner: extend( + $light-banner, ( - banner-background: #fff, + banner-background: ( + igx-color: ('grays', 50), + ), banner-message-color: ( igx-color: ('grays', 800) @@ -66,9 +66,9 @@ $_bootstrap-banner: extend( /// @property {Map} banner-message-color [igx-color: ('grays', 900)]- The color used for banner label. /// @property {Map} banner-illustration-color [igx-color: ('grays', 600)] - The color used banner illustration. /// @requires {function} extend -/// @requires {Map} $_light-banner -$_indigo-banner: extend( - $_light-banner, +/// @requires {Map} $light-banner +$indigo-banner: extend( + $light-banner, ( banner-message-color: ( igx-color: ('grays', 900) diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_bottom-nav.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_bottom-nav.scss index 972a2f762a3..ff4acefc871 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_bottom-nav.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_bottom-nav.scss @@ -1,4 +1,5 @@ -@import '../elevation/bottom-nav'; +@use '../../../base' as *; +@use '../elevation/bottom-nav' as *; //// /// @group schemas @@ -8,17 +9,19 @@ /// Generates a light bottom navigation scheme. /// @type {Map} -/// @prop {Color} background [#fff] - The background color used for the toast. +/// @prop {Color} background [igx-color: ('grays', 50))] - The background color used for the toast. /// @prop {Map} idle-item-color [igx-color: ('grays', 700)] - The text-color used for the idle color. /// @prop {Map} active-item-color [igx-color: ('primary', 500)] - The text-color used for the active color. /// @prop {Number} elevation [8] - The elevation level, between 0-24, to be used for the bottom nav. /// @requires {function} extend -/// @requires {Map} $_default-elevation-bottom-nav +/// @requires {Map} $default-elevation-bottom-nav /// @see $default-palette -$_light-bottom-nav: extend( - $_default-elevation-bottom-nav, +$light-bottom-nav: extend( + $default-elevation-bottom-nav, ( - background: #fff, + background: ( + igx-color: ('grays', 50) + ), idle-item-color: ( igx-color: ('grays', 700) @@ -34,20 +37,20 @@ $_light-bottom-nav: extend( /// @type {Map} /// @prop {Number} elevation [1] - The elevation level, between 0-24, to be used for the bottom nav. /// @requires {function} extend -/// @requires {Map} $_light-bottom-nav -/// @requires {Map} $_fluent-elevation-bottom-nav -$_fluent-bottom-nav: extend($_light-bottom-nav, $_fluent-elevation-bottom-nav); +/// @requires {Map} $light-bottom-nav +/// @requires {Map} $fluent-elevation-bottom-nav +$fluent-bottom-nav: extend($light-bottom-nav, $fluent-elevation-bottom-nav); /// Generates a bootstrap bottom navigation schema. /// @type {Map} /// @requires {function} extend -/// @requires {Map} $_light-bottom-nav -$_bootstrap-bottom-nav: extend($_light-bottom-nav); +/// @requires {Map} $light-bottom-nav +$bootstrap-bottom-nav: $light-bottom-nav; /// Generates an indigo bottom navigation schema. /// @type {Map} /// @prop {Number} elevation [4] - The elevation level, between 0-24, to be used for the bottom nav. /// @requires {function} extend -/// @requires {Map} $_light-bottom-nav -/// @requires {Map} $_indigo-elevation-bottom-nav -$_indigo-bottom-nav: extend($_light-bottom-nav, $_indigo-elevation-bottom-nav); +/// @requires {Map} $light-bottom-nav +/// @requires {Map} $indigo-elevation-bottom-nav +$indigo-bottom-nav: extend($light-bottom-nav, $indigo-elevation-bottom-nav); diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_button-group.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_button-group.scss index a5f75f7e6d0..305b4f7c259 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_button-group.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_button-group.scss @@ -1,5 +1,6 @@ -@import '../shape/button-group'; -@import '../elevation/button-group'; +@use '../../../base' as *; +@use '../shape/button-group' as *; +@use '../elevation/button-group' as *; //// /// @group schemas @@ -10,37 +11,41 @@ /// Generates a light button group schema. /// @type {Map} /// @prop {Map} item-text-color [igx-color: ('grays', 700)]- The text color for button group items. -/// @prop {Color} item-background [#fff] - The background color for button group items . -/// @prop {Map} item-border-color [igx-color: ('grays', 50), to-opaque: #ccc] - The border color between button group items. +/// @prop {Color} item-background [igx-color: ('grays', 50)] - The background color for button group items . +/// @prop {Map} item-border-color [igx-color: ('grays', 400)] - The border color between button group items. /// /// @prop {Map} item-hover-text-color [igx-color: ('grays', 800)] - The hover text color for button group items. /// @prop {Map} item-hover-background [igx-color: ('grays', 300)] - The hover background color for button group items. /// /// @prop {Map} disabled-text-color [igx-color: ('grays', 400)]- The text/icon color for a disabled item in the button group. /// @prop {Map} disabled-background-color [igx-color: ('grays', 50)] - The background color for a disabled item in the button group. -/// @prop {Map} item-disabled-border [igx-color: ('grays', 50), to-opaque: #ccc] - The border color for a disabled item in the button group. +/// @prop {Map} item-disabled-border [igx-color: ('grays', 400)] - The border color for a disabled item in the button group. /// /// @prop {Map} item-selected-text-color [igx-color: ('grays', 800)]- The text color for a selected item in the button group. /// @prop {Map} item-selected-background [igx-color: ('grays', 400)] - The background color for a selected item in the button group. -/// @prop {Map} item-selected-border-color [igx-color: ('grays', 400), to-opaque: #ccc] - The border color for a selected item from the button group. -/// @prop {Map} item-selected-hover-background [igx-color: ('grays', 500)] - The background color for a selected item in hover or focus state in the button group. +/// @prop {Map} item-selected-border-color [igx-color: ('grays', 500)] - The border color for a selected item from the button group. +/// @prop {Map} item-selected-hover-background [igx-color: ('grays', 500, 8)] - The background color for a selected item in hover or focus state in the button group. +/// @prop {Map} idle-shadow-color [transparent] - The outline color of button group items. /// @prop {Number} elevation [2] - The elevation level, between 0-24, to be used for the button group shadow. /// @prop {Number} border-radius [.2] - The border radius used for button-group component. Can be a fraction between 0 and 1, pixels, or percent. /// @requires {function} extend -/// @requires {Map} $_default-shape-button-group -/// @requires {Map} $_default-elevation-button-group +/// @requires {Map} $default-shape-button-group +/// @requires {Map} $default-elevation-button-group /// @see $default-palette -$_light-button-group: extend( - $_default-shape-button-group, - $_default-elevation-button-group, +$light-button-group: extend( + $default-shape-button-group, + $default-elevation-button-group, ( variant: 'material', - item-background: #fff, + idle-shadow-color: transparent, + + item-background: ( + igx-color: ('grays', 50) + ), item-border-color: ( - igx-color: ('grays', 50), - to-opaque: (#ccc) + igx-color: ('grays', 400), ), item-text-color: ( @@ -64,12 +69,11 @@ $_light-button-group: extend( ), item-selected-hover-background: ( - igx-color: ('grays', 500) + igx-color: ('grays', 500, .8) ), item-selected-border-color: ( - igx-color: ('grays', 400), - to-opaque: (#ccc) + igx-color: ('grays', 500), ), disabled-text-color: ( @@ -81,8 +85,7 @@ $_light-button-group: extend( ), item-disabled-border: ( - igx-color: ('grays', 50), - to-opaque: (#ccc) + igx-color: ('grays', 400), ), ) ); @@ -91,23 +94,24 @@ $_light-button-group: extend( /// @type {Map} /// @prop {Map} item-text-color [igx-color: ('grays', 900)]- The text color for button group items. /// @prop {Map} item-hover-text-color [igx-color: ('primary', 200)] - The hover text color for button group items. -/// @prop {Color} item-hover-background [transparent] - The hover background color for button group items. +/// @prop {Color} item-hover-background [igx-color: ('grays', 50)] - The hover background color for button group items. /// @prop {Map} item-selected-background [igx-color: ('grays', 100)] - The background color for a selected item in the button group. -/// @prop {Map} item-selected-hover-background [igx-color: ('grays', 100)] - The background color for a selected item in hover or focus state in the button group. +/// @prop {Map} item-selected-hover-background [igx-color: ('grays', 200)] - The background color for a selected item in hover or focus state in the button group. +/// @prop {Map} item-selected-border-color [igx-color: ('grays', 300)] - The border color for a selected item from the button group. /// @prop {Map} item-selected-text-color [igx-color: ('primary', 200)]- The text color for a selected item in the button group. -/// @prop {Color} disabled-background-color [transparent] - The background color for a disabled item in the button group. +/// @prop {Color} disabled-background-color [igx-color: ('grays', 50)] - The background color for a disabled item in the button group. /// /// @prop {Number} elevation [0] - The elevation level, between 0-24, to be used for the button group shadow. /// @prop {Number} border-radius [2px] - The border radius used for button-group component. Can be a fraction between 0 and 1, pixels, or percent. /// /// @requires {function} extend -/// @requires {Map} $_light-button-group -/// @requires {Map} $_fluent-shape-button-group -/// @requires {Map} $_fluent-elevation-button-group -$_fluent-button-group: extend( - $_light-button-group, - $_fluent-shape-button-group, - $_fluent-elevation-button-group, +/// @requires {Map} $light-button-group +/// @requires {Map} $fluent-shape-button-group +/// @requires {Map} $fluent-elevation-button-group +$fluent-button-group: extend( + $light-button-group, + $fluent-shape-button-group, + $fluent-elevation-button-group, ( variant: 'fluent', @@ -119,48 +123,52 @@ $_fluent-button-group: extend( igx-color: ('primary', 200) ), - item-hover-background: transparent, + item-hover-background: ( + igx-color: ('grays', 50) + ), item-selected-background: ( - igx-color: ('grays', 100) + igx-color: ('grays', 200) ), item-selected-hover-background: ( - igx-color: ('grays', 100) + igx-color: ('grays', 200) ), item-selected-text-color: ( igx-color: ('primary', 200) ), - disabled-background-color: transparent, + disabled-background-color: ( + igx-color: ('grays', 50) + ), ) ); /// Generates a bootstrap button group schema. /// @type {Map} /// @prop {Map} item-background [igx-color: ('primary', 500)] - The background color for button group items. -/// @prop {Color} item-text-color [#fff]- The text color for button group items. +/// @prop {Color} item-text-color [igx-contrast-color: ('primary', 600)]- The text color for button group items. /// @prop {Map} item-border-color [igx-color: ('primary', 500)] - The border color between button group items. /// @prop {Map} item-hover-background [igx-color: ('primary', 600)] - The hover background color for button group items. -/// @prop {Color} item-hover-text-color [#fff] - The hover text color for button group items. -/// @prop {Map} item-selected-background [igx-color: ('primary', 500), darken: 10%] - The background color for a selected item in the button group. -/// @prop {Color} item-selected-text-color [#fff]- The text color for a selected item in the button group. -/// @prop {Map} item-selected-border-color [igx-color: ('primary', 500), darken: 10%] - The border color for a selected item from the button group. -/// @prop {Map} item-selected-hover-background [igx-color: ('primary', 500), darken: 15%] - The background color for a selected item in hover or focus state in the button group. -/// @prop {Map} disabled-background-color [igx-color: ('primary', 500), lighten: 35%] - The background color for a disabled item in the button group. -/// @prop {Map} disabled-text-color [igx-color: ('primary', 500), lighten: 20%]- The text/icon color for a disabled item in the button group. -/// @prop {Map} item-disabled-border [igx-color: ('primary', 500), lighten: 35%] - The border color for a disabled item in the button group. +/// @prop {Color} item-hover-text-color [igx-contrast-color: ('primary', 600)] - The hover text color for button group items. +/// @prop {Map} item-selected-background [igx-color: ('primary', 700)] - The background color for a selected item in the button group. +/// @prop {Color} item-selected-text-color [igx-contrast-color: ('primary', 700)]- The text color for a selected item in the button group. +/// @prop {Map} item-selected-border-color [igx-color: ('primary', 700)] - The border color for a selected item from the button group. +/// @prop {Map} item-selected-hover-background [igx-color: ('primary', 500)] - The background color for a selected item in hover or focus state in the button group. +/// @prop {Map} disabled-background-color [igx-color: ('primary', 100)] - The background color for a disabled item in the button group. +/// @prop {Map} disabled-text-color [igx-color: ('primary', 200)]- The text/icon color for a disabled item in the button group. +/// @prop {Map} item-disabled-border [igx-color: ('primary', 500)] - The border color for a disabled item in the button group. /// @prop {Number} elevation [0] - The elevation level, between 0-24, to be used for the button group shadow. /// @prop {Number} border-radius [4px] - The border radius used for button-group component. Can be a fraction between 0 and 1, pixels, or percent. /// @requires {function} extend -/// @requires {Map} $_light-button-group -/// @requires {Map} $_bootstrap-shape-button-group -/// @requires {Map} $_bootstrap-elevation-button-group -$_bootstrap-button-group: extend( - $_light-button-group, - $_bootstrap-shape-button-group, - $_bootstrap-elevation-button-group, +/// @requires {Map} $light-button-group +/// @requires {Map} $bootstrap-shape-button-group +/// @requires {Map} $bootstrap-elevation-button-group +$bootstrap-button-group: extend( + $light-button-group, + $bootstrap-shape-button-group, + $bootstrap-elevation-button-group, ( variant: 'bootstrap', @@ -168,7 +176,9 @@ $_bootstrap-button-group: extend( igx-color: ('primary', 500), ), - item-text-color: #fff, + item-text-color: ( + igx-contrast-color: ('primary', 600) + ), item-border-color: ( igx-color: ('primary', 500), @@ -178,49 +188,48 @@ $_bootstrap-button-group: extend( igx-color: ('primary', 600), ), - item-hover-text-color: #fff, + item-hover-text-color: ( + igx-contrast-color: ('primary', 600) + ), item-selected-background: ( - igx-color: ('primary', 500), - darken: 10% + igx-color: ('primary', 700), ), - item-selected-text-color: #fff, + item-selected-text-color: ( + igx-contrast-color: ('primary', 700) + ), item-selected-border-color: ( - igx-color: ('primary', 500), - darken: 10% + igx-color: ('primary', 700), ), item-selected-hover-background: ( - igx-color: ('primary', 500), - darken: 15% + igx-color: ('primary', 800), ), disabled-background-color: ( - igx-color: ('primary', 500), - lighten: 35% + igx-color: ('primary', 100), ), disabled-text-color: ( - igx-color: ('primary', 500), - lighten: 20% + igx-color: ('primary', 200), ), item-disabled-border: ( - igx-color: ('primary', 500), lighten: 35% + igx-color: ('primary', 100), ), ) ); /// Generates an indigo light button-group schema. /// @type {Map} -/// @prop {Color} item-background [#fff] - The background color for button group items. -/// @prop {Color} item-text-color [text-contrast: #fff]- The text color for button group items. -/// @prop {Map} shadow-color [igx-color: ('grays', 300)] - The outline color of button group items. +/// @prop {Color} item-background [igx-color: ('grays', 50)] - The background color for button group items. +/// @prop {Color} item-text-color [igx-contrast-color: ('grays', 50)]- The text color for button group items. +/// @prop {Map} idle-shadow-color [igx-color: ('primary', 200)] - The outline color of button group items. /// @prop {Map} selected-shadow-color [igx-color: ('primary', 200)] - The outline color of selected button group items. /// @prop {Map} item-border-color [igx-color: ('primary', 400)] - The border color between button group items. -/// @prop {Map} item-hover-background [igx-color: ('grays', 100)] - The hover background color for button group items. +/// @prop {Map} item-hover-background [igx-color: ('grays', 100, .87)] - The hover background color for button group items. /// @prop {Map} item-hover-text-color [igx-contrast-color: ('grays', 100)] - The hover text color for button group items. /// @prop {Map} item-selected-background [igx-color: ('primary', 400)] - The background color for a selected item in the button group. /// @prop {Color} item-selected-text-color [igx-contrast-color: ('primary', 400)]- The text color for a selected item in the button group. @@ -228,24 +237,26 @@ $_bootstrap-button-group: extend( /// @prop {Map} item-selected-hover-background [igx-color: ('primary', 400)] - The background color for a selected item in hover or focus state in the button group. /// @prop {Map} disabled-background-color [igx-color: ('grays', 100)] - The background color for a disabled item in the button group. /// @prop {Map} disabled-text-color [igx-color: ('grays', 400)]- The text/icon color for a disabled item in the button group. -/// @prop {Map} item-disabled-border [igx-color: ('grays', 100)] - The border color for a disabled item in the button group. +/// @prop {Map} item-disabled-border [igx-color: ('grays', 300)] - The border color for a disabled item in the button group. /// @prop {Number} elevation [0] - The elevation level, between 0-24, to be used for the button group shadow. /// @prop {Number} border-radius [8px] - The border radius used for button-group component. Can be a fraction between 0 and 1, pixels, or percent. /// @requires {function} extend -/// @requires {Map} $_light-button-group -/// @requires {Map} $_indigo-shape-button-group -/// @requires {Map} $_indigo-elevation-button-group -$_indigo-button-group: extend( - $_light-button-group, - $_indigo-shape-button-group, - $_indigo-elevation-button-group, +/// @requires {Map} $light-button-group +/// @requires {Map} $indigo-shape-button-group +/// @requires {Map} $indigo-elevation-button-group +$indigo-button-group: extend( + $light-button-group, + $indigo-shape-button-group, + $indigo-elevation-button-group, ( variant: 'indigo-design', - item-background: #fff, + item-background: ( + igx-color: ('grays', 50), + ), - shadow-color: ( - igx-color: ('grays', 300), + idle-shadow-color: ( + igx-color: ('primary', 200), ), selected-shadow-color: ( @@ -253,7 +264,7 @@ $_indigo-button-group: extend( ), item-text-color: ( - text-contrast: #fff + igx-contrast-color: ('grays', 50) ), item-border-color: ( @@ -261,7 +272,7 @@ $_indigo-button-group: extend( ), item-hover-background: ( - igx-color: ('grays', 100), + igx-color: ('grays', 100, .87), ), item-hover-text-color: ( @@ -293,7 +304,7 @@ $_indigo-button-group: extend( ), item-disabled-border: ( - igx-color: ('grays', 100) + igx-color: ('grays', 300) ), ) ); diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_button.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_button.scss index 5090a48fad7..18b034e2000 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_button.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_button.scss @@ -1,5 +1,6 @@ -@import '../shape/button'; -@import '../elevation/button'; +@use '../../../base' as *; +@use '../shape/button' as *; +@use '../elevation/button' as *; //// /// @group schemas @@ -12,9 +13,9 @@ /// @prop {Color} border-color [transparent] - The outline color of the button. /// @prop {Color} focus-border-color [transparent] - The focused border color of the button. /// @prop {Color} disabled-border-color [transparent] - The disabled border color of the button. -/// @prop {Color} disabled-background [igx-color: ('grays', 100)] - The disabled background color of the button. -/// @prop {Color} disabled-foreground [igx-color: ('grays', 400)] - The disabled foreground color of the button. -$_material-base-button: ( +/// @prop {Color} disabled-background [igx-color: ('grays', 300)] - The disabled background color of the button. +/// @prop {Color} disabled-foreground [igx-color: ('grays', 500)] - The disabled foreground color of the button. +$material-base-button: ( variant: 'material', shadow-color: transparent, @@ -26,30 +27,30 @@ $_material-base-button: ( disabled-border-color: transparent, disabled-background: ( - igx-color: ('grays', 100) + igx-color: ('grays', 300) ), disabled-foreground: ( - igx-color: ('grays', 400) + igx-color: ('grays', 500) ), ); /// @type {Map} /// @prop {Color} background [transparent] - The background color of a flat button. /// @prop {Map} foreground [igx-color: ('secondary', 500)] - The idle text color of a flat button. -/// @prop {Map} hover-background [igx-color: ('secondary', 500), rgba: .05 ] - The hover background color of a flat button. +/// @prop {Map} hover-background [igx-color: ('secondary', 500, .05)] - The hover background color of a flat button. /// @prop {Map} hover-foreground [igx-color: ('secondary', 500)] - The hover text color of a flat button. -/// @prop {Map} focus-background [igx-color: ('secondary', 400), rgba: .12] - The focus background color of a flat button. +/// @prop {Map} focus-background [igx-color: ('secondary', 400, .12)] - The focus background color of a flat button. /// @prop {Map} focus-foreground [igx-color: ('secondary', 500)] - The focus text color of a flat button. /// @prop {Number} flat-border-radius [.2] - The border radius used for flat button. Can be a fraction between 0 and 1, pixels, or percent. /// @requires {function} extend -/// @requires {Map} $_material-base-button -/// @requires {Map} $_flat-elevation-button -/// @requires {Map} $_material-shape-button -$_material-flat-button: extend( - $_material-base-button, - $_flat-elevation-button, - $_material-shape-button, +/// @requires {Map} $material-base-button +/// @requires {Map} $flat-elevation-button +/// @requires {Map} $material-shape-button +$material-flat-button: extend( + $material-base-button, + $flat-elevation-button, + $material-shape-button, ( selector: '[igxButton="flat"], .igx-button--flat', @@ -60,8 +61,7 @@ $_material-flat-button: extend( ), hover-background: ( - igx-color: ('secondary', 500), - rgba: .05 + igx-color: ('secondary', 500, .05), ), hover-foreground: ( @@ -69,8 +69,7 @@ $_material-flat-button: extend( ), focus-background: ( - igx-color: ('secondary', 400), - rgba: .12 + igx-color: ('secondary', 400, .12), ), focus-foreground: ( @@ -80,18 +79,18 @@ $_material-flat-button: extend( ); /// @type {Map} -/// @prop {Color} border-color [igx-color: (grays, 300)] - The outline color of the button. -/// @prop {Color} focus-border-color [igx-color: ('grays', 300)] - The focused border color of the button. -/// @prop {Color} disabled-border-color [igx-color: ('grays', 300)] - The disabled focused border color of the button. +/// @prop {Map} border-color [igx-color: ('secondary', 500)] - The outline color of the button. +/// @prop {Map} focus-border-color [igx-color: ('grays', 300)] - The focused border color of the button. +/// @prop {Map} disabled-border-color [igx-color: ('grays', 300)] - The disabled focused border color of the button. /// @requires {function} extend -/// @requires {Map} $_material-flat-button -$_material-outlined-button: extend( - $_material-flat-button, +/// @requires {Map} $material-flat-button +$material-outlined-button: extend( + $material-flat-button, ( selector: '[igxButton="outlined"], .igx-button--outlined', border-color: ( - igx-color: ('grays', 300) + igx-color: ('secondary', 300) ), focus-border-color: ( @@ -116,13 +115,13 @@ $_material-outlined-button: extend( /// @prop {Number} focus-elevation [8] - The elevation level, between 0-24, to be used for the focus state. /// @prop {Number} border-radius [.2] - The border radius used for raised button. Can be a fraction between 0 and 1, pixels, or percent. /// @requires {function} extend -/// @requires {Map} $_material-base-button -/// @requires {Map} $_material-raised-elevation -/// @requires {Map} $_material-shape-button -$_material-raised-button: extend( - $_material-base-button, - $_material-raised-elevation, - $_material-shape-button, +/// @requires {Map} $material-base-button +/// @requires {Map} $material-raised-elevation +/// @requires {Map} $material-shape-button +$material-raised-button: extend( + $material-base-button, + $material-raised-elevation, + $material-shape-button, ( selector: '[igxButton="raised"], .igx-button--raised', @@ -158,13 +157,13 @@ $_material-raised-button: extend( /// @prop {Number} focus-elevation [12] - The elevation level, between 0-24, to be used for the focus state. /// @prop {Number} border-radius [1] - The border radius used for the floating button. Can be a fraction between 0 and 1, pixels, or percent. /// @requires {function} extend -/// @requires {Map} $_material-raised-button -/// @requires {Map} $_material-fab-elevation -/// @requires {Map} $_round-shape-button -$_material-fab-button: extend( - $_material-raised-button, - $_material-fab-elevation, - $_round-shape-button, +/// @requires {Map} $material-raised-button +/// @requires {Map} $material-fab-elevation +/// @requires {Map} $round-shape-button +$material-fab-button: extend( + $material-raised-button, + $material-fab-elevation, + $round-shape-button, ( selector: '[igxButton="fab"], .igx-button--fab', ) @@ -182,13 +181,13 @@ $_material-fab-button: extend( /// @prop {Number} focus-elevation [6] - The elevation level, between 0-24, to be used for the focus state. /// @prop {Number} border-radius [1] - The border radius used for the floating button. Can be a fraction between 0 and 1, pixels, or percent. /// @requires {function} extend -/// @requires {Map} $_material-base-button -/// @requires {Map} $_material-ib-elevation -/// @requires {Map} $_round-shape-button -$_material-icon-button: extend( - $_material-base-button, - $_material-ib-elevation, - $_round-shape-button, +/// @requires {Map} $material-base-button +/// @requires {Map} $material-ib-elevation +/// @requires {Map} $round-shape-button +$material-icon-button: extend( + $material-base-button, + $material-ib-elevation, + $round-shape-button, ( selector: '[igxButton="icon"], .igx-button--icon', @@ -218,27 +217,27 @@ $_material-icon-button: extend( /// Generates a light material button schema. /// @type {Map} -/// @requires {Map} $_material-flat-button -/// @requires {Map} $_material-outlined-button -/// @requires {Map} $_material-raised-button -/// @requires {Map} $_material-fab-button -/// @requires {Map} $_material-icon-button +/// @requires {Map} $material-flat-button +/// @requires {Map} $material-outlined-button +/// @requires {Map} $material-raised-button +/// @requires {Map} $material-fab-button +/// @requires {Map} $material-icon-button /// @see $light-material-palette -$_light-button: ( - flat: $_material-flat-button, - outlined: $_material-outlined-button, - raised: $_material-raised-button, - fab: $_material-fab-button, - icon: $_material-icon-button, +$light-button: ( + flat: $material-flat-button, + outlined: $material-outlined-button, + raised: $material-raised-button, + fab: $material-fab-button, + icon: $material-icon-button, ); /// @type {Map} -/// @requires {Map} $_material-base-button -/// @requires {Map} $_flat-elevation-button +/// @requires {Map} $material-base-button +/// @requires {Map} $flat-elevation-button /// @requires {function} extend -$_fluent-base-button: extend( - $_material-base-button, - $_flat-elevation-button, +$fluent-base-button: extend( + $material-base-button, + $flat-elevation-button, ( variant: 'fluent', ) @@ -251,14 +250,14 @@ $_fluent-base-button: extend( /// @prop {Map} focus-background [igx-color:('grays', 100)] - The focus background color of a flat button. /// @prop {Map} focus-foreground [igx-color: ('primary', 500)] - The focus text color of a flat button. /// @prop {Number} border-radius [0] - The border radius used for flat button. Can be a fraction between 0 and 1, pixels, or percent. -/// @requires {Map} $_material-flat-button -/// @requires {Map} $_fluent-base-button -/// @requires {Map} $_square-shape-button +/// @requires {Map} $material-flat-button +/// @requires {Map} $fluent-base-button +/// @requires {Map} $square-shape-button /// @requires {function} extend -$_fluent-flat-button: extend( - $_material-flat-button, - $_fluent-base-button, - $_square-shape-button, +$fluent-flat-button: extend( + $material-flat-button, + $fluent-base-button, + $square-shape-button, ( foreground: ( igx-color: ('grays', 900) @@ -288,14 +287,14 @@ $_fluent-flat-button: extend( /// @prop {Map} focus-background [igx-color: ('grays', 100)] - The focus background color of an outlined button. /// @prop {Map} focus-foreground [igx-color: ('grays', 900)] - The focus text color of an outlined button. /// @prop {Number} border-radius [.1] - The border radius used for outlined button. Can be a fraction between 0 and 1, pixels, or percent. -/// @requires {Map} $_material-outlined-button -/// @requires {Map} $_fluent-base-button -/// @requires {Map} $_fluent-shape-button +/// @requires {Map} $material-outlined-button +/// @requires {Map} $fluent-base-button +/// @requires {Map} $fluent-shape-button /// @requires {function} extend -$_fluent-outlined-button: extend( - $_material-outlined-button, - $_fluent-base-button, - $_fluent-shape-button, +$fluent-outlined-button: extend( + $material-outlined-button, + $fluent-base-button, + $fluent-shape-button, ( border-color: ( igx-color: ('grays', 800) @@ -334,32 +333,38 @@ $_fluent-outlined-button: extend( /// @prop {Number} hover-elevation [0] - The elevation level, between 0-24, to be used for the hover state. /// @prop {Number} focus-elevation [0] - The elevation level, between 0-24, to be used for the focus state. /// @prop {Number} border-radius [.1] - The border radius used for raised button. Can be a fraction between 0 and 1, pixels, or percent. -/// @requires {Map} $_material-raised-button -/// @requires {Map} $_fluent-base-button -/// @requires {Map} $_fluent-shape-button +/// @requires {Map} $material-raised-button +/// @requires {Map} $fluent-base-button +/// @requires {Map} $fluent-shape-button /// @requires {function} extend -$_fluent-raised-button: extend( - $_material-raised-button, - $_fluent-base-button, - $_fluent-shape-button, +$fluent-raised-button: extend( + $material-raised-button, + $fluent-base-button, + $fluent-shape-button, ( background: ( igx-color: ('primary', 500) ), - foreground: #fff, + foreground: ( + igx-contrast-color: ('primary', 500) + ), hover-background: ( igx-color: ('primary', 600) ), - hover-foreground: #fff, + hover-foreground: ( + igx-contrast-color: ('primary', 600) + ), focus-background: ( igx-color: ('primary', 600) ), - focus-foreground: #fff, + focus-foreground: ( + igx-contrast-color: ('primary', 600) + ), ) ); @@ -368,14 +373,14 @@ $_fluent-raised-button: extend( /// @prop {Number} hover-elevation [0] - The elevation level, between 0-24, to be used for the hover state. /// @prop {Number} focus-elevation [0] - The elevation level, between 0-24, to be used for the focus state. /// @prop {Number} border-radius [1] - The border radius used for fab button. Can be a fraction between 0 and 1, pixels, or percent. -/// @requires {Map} $_fluent-base-button -/// @requires {Map} $_fluent-raised-button -/// @requires {Map} $_round-shape-button +/// @requires {Map} $fluent-base-button +/// @requires {Map} $fluent-raised-button +/// @requires {Map} $round-shape-button /// @requires {function} extend -$_fluent-fab-button: extend( - $_fluent-base-button, - $_round-shape-button, - $_fluent-raised-button, +$fluent-fab-button: extend( + $fluent-base-button, + $round-shape-button, + $fluent-raised-button, ( selector: '[igxButton="fab"], .igx-button--fab', ) @@ -385,14 +390,14 @@ $_fluent-fab-button: extend( /// @prop {Map} hover-background [igx-color: ('grays', 50)] - The hover background color of an icon button. /// @prop {Map} focus-background [igx-color: ('grays', 100)] - The focus icon color of an icon button. /// @prop {Number} border-radius [0] - The border radius used for icon button. Can be a fraction between 0 and 1, pixels, or percent. -/// @requires {Map} $_material-fab-button -/// @requires {Map} $_fluent-base-button -/// @requires {Map} $_square-shape-button +/// @requires {Map} $material-icon-button +/// @requires {Map} $fluent-base-button +/// @requires {Map} $square-shape-button /// @requires {function} extend -$_fluent-icon-button: extend( - $_material-icon-button, - $_fluent-base-button, - $_square-shape-button, +$fluent-icon-button: extend( + $material-icon-button, + $fluent-base-button, + $square-shape-button, ( hover-background: ( igx-color: ('grays', 50) @@ -407,40 +412,38 @@ $_fluent-icon-button: extend( /// Generates a light fluent button schema. /// @type {Map} /// @requires {function} extend -/// @requires {Map} $_fluent-flat-button -/// @requires {Map} $_fluent-outlined-button -/// @requires {Map} $_fluent-raised-button -/// @requires {Map} $_fluent-fab-button -/// @requires {Map} $_fluent-icon-button -$_fluent-button: ( - flat: $_fluent-flat-button, - outlined: $_fluent-outlined-button, - raised: $_fluent-raised-button, - fab: $_fluent-fab-button, - icon: $_fluent-icon-button, +/// @requires {Map} $fluent-flat-button +/// @requires {Map} $fluent-outlined-button +/// @requires {Map} $fluent-raised-button +/// @requires {Map} $fluent-fab-button +/// @requires {Map} $fluent-icon-button +$fluent-button: ( + flat: $fluent-flat-button, + outlined: $fluent-outlined-button, + raised: $fluent-raised-button, + fab: $fluent-fab-button, + icon: $fluent-icon-button, ); /// @type {Map} -/// @prop {Map} disabled-background [igx-color: ('primary', 500), lighten: 20%] - The disabled background color of the button. -/// @prop {Map} disabled-foreground [igx-color: ('primary', 500), lighten: 35%] - The disabled foreground color of the button. -/// @requires {Map} $_material-base-button -/// @requires {Map} $_flat-elevation-button +/// @prop {Map} disabled-background [igx-color: ('primary', 50)] - The disabled background color of the button. +/// @prop {Map} disabled-foreground [igx-color: ('primary', 200)] - The disabled foreground color of the button. +/// @requires {Map} $material-base-button +/// @requires {Map} $flat-elevation-button /// @requires {function} extend -$_bootstrap-base-button: extend( - $_material-base-button, - $_flat-elevation-button, +$bootstrap-base-button: extend( + $material-base-button, + $flat-elevation-button, ( variant: 'bootstrap', disabled-foreground: ( - igx-color: ('primary', 500), - lighten: 20% + igx-color: ('primary', 200) ), disabled-background: ( - igx-color: ('primary', 500), - lighten: 35% + igx-color: ('primary', 50) ), ) ); @@ -452,12 +455,12 @@ $_bootstrap-base-button: extend( /// @prop {Color} hover-background [transparent] - The hover background color of a flat button. /// @prop {Map} focus-background [igx-color: ('grays', 100)] - The focus background color of a flat button. /// @prop {Number} border-radius [.2] - The border radius used for flat button. Can be a fraction between 0 and 1, pixels, or percent. -/// @requires {Map} $_material-flat-button -/// @requires {Map} $_bootstrap-base-button +/// @requires {Map} $material-flat-button +/// @requires {Map} $bootstrap-base-button /// @requires {function} extend -$_bootstrap-flat-button: extend( - $_material-flat-button, - $_bootstrap-base-button, +$bootstrap-flat-button: extend( + $material-flat-button, + $bootstrap-base-button, ( foreground: ( igx-color: ('primary', 500) @@ -474,35 +477,39 @@ $_bootstrap-flat-button: extend( hover-background: transparent, focus-background: ( - igx-color: ('grays', 100) + igx-color: ('grays', 200) ), ) ); /// @type {Map} /// @prop {Map} foreground [igx-color: ('primary', 500)] - The idle text color of an outlined button. -/// @prop {Color} hover-foreground [#fff] - The hover text color of an outlined button. -/// @prop {Color} focus-foreground [#fff] - The focus text color of an outlined button. +/// @prop {Color} hover-foreground [igx-contrast-color: ('primary', 600)] - The hover text color of an raised button. +/// @prop {Color} focus-foreground [igx-contrast-color: ('primary', 600)] - The focus text color of an raised button. /// @prop {Map} hover-background [igx-color: ('primary', 500)] - The hover background color of an outlined button. /// @prop {Map} focus-background [igx-color: ('primary', 500)] - The focus background color of an outlined button. /// @prop {Map} border-color [igx-color: ('primary', 500)] - The border color of an outlined button. /// @prop {Map} disabled-border-color [igx-color: ('primary', 500), lighten: 35%] - The disabled focused border color of the button. /// @prop {Map} shadow-color [igx-color: ('primary', 200)] - The shadow color of the button. /// @prop {Number} border-radius [.2] - The border radius used for outlined button. Can be a fraction between 0 and 1, pixels, or percent. -/// @requires {Map} $_material-outlined-button -/// @requires {Map} $_bootstrap-base-button +/// @requires {Map} $material-outlined-button +/// @requires {Map} $bootstrap-base-button /// @requires {function} extend -$_bootstrap-outlined-button: extend( - $_material-outlined-button, - $_bootstrap-base-button, +$bootstrap-outlined-button: extend( + $material-outlined-button, + $bootstrap-base-button, ( foreground: ( igx-color: ('primary', 500) ), - hover-foreground: #fff, + hover-foreground: ( + igx-contrast-color: ('primary', 600) + ), - focus-foreground: #fff, + focus-foreground: ( + igx-contrast-color: ('primary', 600) + ), hover-background: ( igx-color: ('primary', 500) @@ -517,8 +524,7 @@ $_bootstrap-outlined-button: extend( ), disabled-border-color: ( - igx-color: ('primary', 500), - lighten: 35% + igx-color: ('primary', 50) ), shadow-color: ( @@ -528,23 +534,27 @@ $_bootstrap-outlined-button: extend( ); /// @type {Map} -/// @prop {Color} hover-foreground [#fff] - The hover text color of an raised button. -/// @prop {Color} focus-foreground [#fff] - The focus text color of an raised button. +/// @prop {Color} hover-foreground [igx-contrast-color: ('primary', 600)] - The hover text color of an raised button. +/// @prop {Color} focus-foreground [igx-contrast-color: ('primary', 600)] - The focus text color of an raised button. /// @prop {Map} background [igx-color: ('primary', 500)] - The background color of a raised button. /// @prop {Map} hover-background [igx-color: ('primary', 600)] - The hover background color of an raised button. /// @prop {Map} focus-background [igx-color: ('primary', 600)] - The focus background color of an raised button. /// @prop {Map} shadow-color [igx-color: ('primary', 200)] - The shadow color of the button. /// @prop {Number} border-radius [.2] - The border radius used for outlined button. Can be a fraction between 0 and 1, pixels, or percent. -/// @requires {Map} $_material-raised-button -/// @requires {Map} $_bootstrap-base-button +/// @requires {Map} $material-raised-button +/// @requires {Map} $bootstrap-base-button /// @requires {function} extend -$_bootstrap-raised-button: extend( - $_material-raised-button, - $_bootstrap-base-button, +$bootstrap-raised-button: extend( + $material-raised-button, + $bootstrap-base-button, ( - hover-foreground: #fff, + hover-foreground: ( + igx-contrast-color: ('primary', 600) + ), - focus-foreground: #fff, + focus-foreground: ( + igx-contrast-color: ('primary', 600) + ), background: ( igx-color: ('primary', 500) @@ -566,22 +576,28 @@ $_bootstrap-raised-button: extend( /// @type {Map} /// @requires {function} extend +/// @prop {Color} hover-foreground [igx-contrast-color: ('primary', 600)] - The hover text color of an raised button. +/// @prop {Color} focus-foreground [igx-contrast-color: ('primary', 600)] - The focus text color of an raised button. /// @prop {Map} background [igx-color: ('primary', 500)] - The background color of a raised button. /// @prop {Map} hover-background [igx-color: ('primary', 600)] - The hover background color of an raised button. /// @prop {Map} focus-background [igx-color: ('primary', 600)] - The focus background color of an raised button. -/// @requires {Map} $_material-fab-button -/// @requires {Map} $_bootstrap-base-button -/// @requires {Map} $_bootstrap-raised-button -$_bootstrap-fab-button: extend( - $_material-fab-button, - $_bootstrap-base-button, - $_bootstrap-raised-button, +/// @requires {Map} $material-fab-button +/// @requires {Map} $bootstrap-base-button +/// @requires {Map} $bootstrap-raised-button +$bootstrap-fab-button: extend( + $material-fab-button, + $bootstrap-base-button, + $bootstrap-raised-button, ( selector: '[igxButton="fab"], .igx-button--fab', - hover-foreground: #fff, + hover-foreground: ( + igx-contrast-color: ('primary', 600) + ), - focus-foreground: #fff, + focus-foreground: ( + igx-contrast-color: ('primary', 600) + ), background: ( igx-color: ('primary', 500) @@ -604,14 +620,14 @@ $_bootstrap-fab-button: extend( /// @prop {Map} focus-foreground [igx-contrast-color: ('primary', 600)] - The focus text color of an icon button. /// @prop {Map} shadow-color [igx-color: ('primary', 200)] - The shadow color of the button. /// @prop {Number} border-radius [.2] - The border radius used for outlined button. Can be a fraction between 0 and 1, pixels, or percent. -/// @requires {Map} $_material-icon-button -/// @requires {Map} $_bootstrap-base-button -/// @requires {Map} $_bootstrap-shape-button +/// @requires {Map} $material-icon-button +/// @requires {Map} $bootstrap-base-button +/// @requires {Map} $bootstrap-shape-button /// @requires {function} extend -$_bootstrap-icon-button: extend( - $_bootstrap-base-button, - $_material-icon-button, - $_bootstrap-shape-button, +$bootstrap-icon-button: extend( + $bootstrap-base-button, + $material-icon-button, + $bootstrap-shape-button, ( hover-background: ( igx-color: ('primary', 500) @@ -638,27 +654,28 @@ $_bootstrap-icon-button: extend( /// Generates a light bootstrap button schema. /// @type {Map} /// @requires {function} extend -/// @requires {Map} $_bootstrap-flat-button -/// @requires {Map} $_bootstrap-outlined-button -/// @requires {Map} $_bootstrap-raised-button -/// @requires {Map} $_bootstrap-fab-button -/// @requires {Map} $_bootstrap-icon-button -$_bootstrap-button: ( - flat: $_bootstrap-flat-button, - outlined: $_bootstrap-outlined-button, - raised: $_bootstrap-raised-button, - fab: $_bootstrap-fab-button, - icon: $_bootstrap-icon-button, +/// @requires {Map} $bootstrap-flat-button +/// @requires {Map} $bootstrap-outlined-button +/// @requires {Map} $bootstrap-raised-button +/// @requires {Map} $bootstrap-fab-button +/// @requires {Map} $bootstrap-icon-button +$bootstrap-button: ( + flat: $bootstrap-flat-button, + outlined: $bootstrap-outlined-button, + raised: $bootstrap-raised-button, + fab: $bootstrap-fab-button, + icon: $bootstrap-icon-button, ); /// @type {Map} -/// @requires {Map} $_material-base-button -/// @requires {Map} $_flat-elevation-button +/// @requires {Map} $material-base-button +/// @requires {Map} $flat-elevation-button +/// @requires {Map} $round-shape-button /// @requires {function} extend -$_indigo-base-button: extend( - $_material-base-button, - $_flat-elevation-button, - $_round-shape-button, +$indigo-base-button: extend( + $material-base-button, + $flat-elevation-button, + $round-shape-button, ( variant: 'indigo-design', ) @@ -672,12 +689,12 @@ $_indigo-base-button: extend( /// @prop {Color} focus-background [transparent] - The focus background color of a flat button. /// @prop {Map} shadow-color [igx-color: ('grays', 300)] - The shadow color of the button. /// @prop {Number} border-radius [1] - The border radius used for flat button. Can be a fraction between 0 and 1, pixels, or percent. -/// @requires {Map} $_material-flat-button -/// @requires {Map} $_indigo-base-button +/// @requires {Map} $material-flat-button +/// @requires {Map} $indigo-base-button /// @requires {function} extend -$_indigo-flat-button: extend( - $_material-flat-button, - $_indigo-base-button, +$indigo-flat-button: extend( + $material-flat-button, + $indigo-base-button, ( foreground: ( igx-color: ('grays', 700), @@ -711,12 +728,12 @@ $_indigo-flat-button: extend( /// @prop {Map} border-color [igx-color: 'grays'] - The border color of an outlined button. /// @prop {Map} shadow-color [igx-color: ('grays', 300)] - The shadow color of the button. /// @prop {Number} border-radius [1] - The border radius used for flat button. Can be a fraction between 0 and 1, pixels, or percent. -/// @requires {Map} $_material-outlined-button -/// @requires {Map} $_indigo-base-button +/// @requires {Map} $material-outlined-button +/// @requires {Map} $indigo-base-button /// @requires {function} extend -$_indigo-outlined-button: extend( - $_material-outlined-button, - $_indigo-base-button, +$indigo-outlined-button: extend( + $material-outlined-button, + $indigo-base-button, ( foreground: ( igx-color: ('grays', 700), @@ -749,51 +766,72 @@ $_indigo-outlined-button: extend( ); /// @type {Map} -/// @prop {Color} foreground [#fff] - The idle text color of a raised button. -/// @prop {Color} hover-foreground [#fff] - The hover text color of a raised button. -/// @prop {Color} focus-foreground [#fff] - The focus text color of a raised button. +/// @prop {Color} foreground [igx-color: ('grays', 50)] - The idle text color of a raised button. +/// @prop {Color} hover-foreground [ igx-color: ('grays', 50)] - The hover text color of a raised button. +/// @prop {Color} focus-foreground [ igx-color: ('grays', 50)] - The focus text color of a raised button. /// @prop {Map} hover-background [igx-color: ('primary', 400)] - The hover background color of a raised button. /// @prop {Map} focus-background [igx-color: ('primary', 400)] - The focus background color of a raised button. /// @prop {Map} shadow-color [igx-color: ('primary', 200)] - The shadow color of the button. /// @prop {Number} border-radius [1] - The border radius used for flat button. Can be a fraction between 0 and 1, pixels, or percent. -/// @requires {Map} $_material-raised-button -/// @requires {Map} $_indigo-base-button +/// @requires {Map} $material-raised-button +/// @requires {Map} $indigo-base-button /// @requires {function} extend -$_indigo-raised-button: extend( - $_material-raised-button, - $_indigo-base-button, +$indigo-raised-button: extend( + $material-raised-button, + $indigo-base-button, ( - foreground: #fff, + foreground: ( + igx-color: ('grays', 50) + ), - hover-foreground: #fff, + hover-foreground: ( + igx-color: ('grays', 50) + ), - focus-foreground: #fff, + focus-foreground: ( + igx-color: ('grays', 50) + ), hover-background: ( - igx-color: ('primary', 400), + igx-color: ('secondary', 400), ), focus-background: ( - igx-color: ('primary', 400), + igx-color: ('secondary', 400), ), shadow-color: ( - igx-color: ('primary', 200), + igx-color: ('secondary', 200), ), ) ); /// @type {Map} -/// @requires {Map} $_material-fab-button -/// @requires {Map} $_indigo-base-button -/// @requires {Map} $_indigo-raised-button +/// @prop {Color} foreground [ igx-color: ('grays', 50)] - The idle text color of a raised button. +/// @prop {Color} hover-foreground [ igx-color: ('grays', 50)] - The hover text color of a raised button. +/// @prop {Color} focus-foreground [ igx-color: ('grays', 50)] - The focus text color of a raised button. +/// @requires {Map} $material-fab-button +/// @requires {Map} $indigo-base-button +/// @requires {Map} $indigo-raised-button /// @requires {function} extend -$_indigo-fab-button: extend( - $_material-fab-button, - $_indigo-base-button, - $_indigo-raised-button, +$indigo-fab-button: extend( + $material-fab-button, + $indigo-base-button, + $indigo-raised-button, ( selector: '[igxButton="fab"], .igx-button--fab', + + foreground: ( + igx-color: ('grays', 50) + ), + + hover-foreground: ( + igx-color: ('grays', 50) + ), + + focus-foreground: ( + igx-color: ('grays', 50) + ), ) ); @@ -801,12 +839,12 @@ $_indigo-fab-button: extend( /// @prop {Map} hover-background [igx-color: ('grays', 300)] - The hover background color of a icon button. /// @prop {Map} focus-background [igx-color: ('grays', 300)] - The focus background color of a icon button. /// @prop {Number} border-radius [1] - The border radius used for flat button. Can be a fraction between 0 and 1, pixels, or percent. -/// @requires {Map} $_material-icon-button -/// @requires {Map} $_indigo-base-button +/// @requires {Map} $material-icon-button +/// @requires {Map} $indigo-base-button /// @requires {function} extend -$_indigo-icon-button: extend( - $_material-icon-button, - $_indigo-base-button, +$indigo-icon-button: extend( + $material-icon-button, + $indigo-base-button, ( hover-background: ( igx-color: ('grays', 300) @@ -821,15 +859,15 @@ $_indigo-icon-button: extend( /// Generates a light indigo button schema. /// @type {Map} /// @requires {function} extend -/// @requires {Map} $_indigo-flat-button -/// @requires {Map} $_indigo-outlined-button -/// @requires {Map} $_indigo-raised-button -/// @requires {Map} $_indigo-fab-button -/// @requires {Map} $_indigo-icon-button -$_indigo-button: ( - flat: $_indigo-flat-button, - outlined: $_indigo-outlined-button, - raised: $_indigo-raised-button, - fab: $_indigo-fab-button, - icon: $_indigo-icon-button, +/// @requires {Map} $indigo-flat-button +/// @requires {Map} $indigo-outlined-button +/// @requires {Map} $indigo-raised-button +/// @requires {Map} $indigo-fab-button +/// @requires {Map} $indigo-icon-button +$indigo-button: ( + flat: $indigo-flat-button, + outlined: $indigo-outlined-button, + raised: $indigo-raised-button, + fab: $indigo-fab-button, + icon: $indigo-icon-button, ); diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_calendar.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_calendar.scss index 6e9d91f9f5c..ed734f815e4 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_calendar.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_calendar.scss @@ -1,4 +1,5 @@ -@import '../shape/calendar'; +@use '../../../base' as *; +@use '../shape/calendar' as *; //// /// @group schemas @@ -9,24 +10,24 @@ /// Generates a light calendar schema. /// @type {Map} /// @prop {Map} content-background [igx-color: 'surface'] - The main content background color. -/// @prop {Map} content-text-color [igx-color: 'surface', text-contrast: (), rgba: .87] - The main content text color. +/// @prop {Map} content-text-color [igx-contrast-color: 'surface'] - The main content text color. /// /// @prop {Map} header-background [igx-color: ('secondary', 500)] - The header background color. /// @prop {Map} header-text-color [igx-contrast-color: ('secondary', 500)] - The header text color. /// -/// @prop {Map} picker-arrow-color [igx-color: 'surface', text-contrast: (), rgba: .74] - The idle picker arrow color. +/// @prop {Map} picker-arrow-color [igx-color: ('grays', 800)] - The idle picker arrow color. /// @prop {Map} picker-arrow-hover-color [igx-color: ('secondary', 500)] - The picker hover arrow color. -/// @prop {Map} picker-text-color [igx-color: 'surface', text-contrast: (), rgba: .74]- The idle picker month/year color. +/// @prop {Map} picker-text-color [igx-color: ('grays', 800)]- The idle picker month/year color. /// @prop {Map} picker-text-hover-color [igx-color: ('secondary', 500)]- The hover picker month/year color. /// -/// @prop {Map} inactive-text-color [igx-color: 'surface', text-contrast: (), rgba: .26] - The text color for previous and next month dates. -/// @prop {Map} label-color [igx-color: 'surface', text-contrast: (), rgba: .26] - The text color for weekday labels. -/// @prop {Map} weekend-text-color [igx-color: 'surface', text-contrast: (), rgba: .38] - The text color for weekend days. +/// @prop {Map} inactive-text-color [igx-color: ('grays', 400)] - The text color for previous and next month dates. +/// @prop {Map} label-color [igx-color: ('grays', 400)] - The text color for weekday labels. +/// @prop {Map} weekend-text-color [igx-color: ('grays', 500)] - The text color for weekend days. /// /// @prop {Map} year-current-text-color [igx-color: ('secondary', 500)] - The text color for the current/selected year. /// @prop {Map} year-hover-text-color [igx-color: ('secondary', 500)] - The year hover text color. /// -/// @prop {Map} month-hover-text-color [igx-color: 'surface', text-contrast: ()] - The month hover text color. +/// @prop {Map} month-hover-text-color [igx-contrast-color: ('grays', 200)] - The month hover text color. /// @prop {Map} month-hover-background [igx-color: ('grays', 200)] - The month hover text color. /// @prop {Map} month-current-text-color [igx-color: ('secondary', 500)]- The text color for the current/selected month. /// @prop {Map} month-hover-current-text-color [igx-color: ('secondary', 500)]- The text color for the current/selected month on hover. @@ -43,10 +44,10 @@ /// @prop {Map} date-special-background [igx-color: ('grays', 100)] - The background color used for special dates. /// @prop {Map} date-special-text-color [igx-color: ('grays', 900)] - The text color used for special dates. /// -/// @prop {Map} date-disabled-text-color [igx-color: ('grays', 500), to-opaque: (), rgba: .6] - The text color for disabled dates. +/// @prop {Map} date-disabled-text-color [igx-color: ('grays', 400)] - The text color for disabled dates. /// @prop {Map} date-disabled-background [igx-color: ('grays', 100)] - The background color for disabled dates. /// -/// @prop {Color} picker-background-color [transparent] - The igx calendar picker background color. +/// @prop {Color} picker-background-color [igx-color: 'surface'] - The igx calendar picker background color. /// @prop {Map} border-color [igx-color: ('grays', 300)] - The calendar border color. /// @prop {Map} week-number-color [igx-color: ('grays', 500)] - The text color of the week number column. /// @prop {Map} week-number-background [igx-color: ('grays', 200)] - The background color of the week number column. @@ -54,10 +55,10 @@ /// @prop {Number} border-radius [.2] - The border radius used for calendar. Can be a fraction between 0 and 1, pixels, or percent. /// @prop {Number} date-border-radius [1] - The border radius used for calendar date. Can be a fraction between 0 and 1, pixels, or percent. /// @requires {function} extend -/// @requires {Map} $_default-shape-calendar +/// @requires {Map} $default-shape-calendar /// @see $default-palette -$_light-calendar: extend( - $_default-shape-calendar, +$light-calendar: extend( + $default-shape-calendar, ( variant: 'material', @@ -65,20 +66,14 @@ $_light-calendar: extend( igx-color: 'surface' ), - picker-background-color: ( - igx-color: 'surface' + content-text-color: ( + igx-contrast-color: 'surface', ), border-color: ( igx-color: ('grays', 300) ), - content-text-color: ( - igx-color: 'surface', - text-contrast: (), - rgba: .87 - ), - header-background: ( igx-color: ('secondary', 500) ), @@ -87,10 +82,12 @@ $_light-calendar: extend( igx-contrast-color: ('secondary', 500) ), + picker-background-color: ( + igx-color: 'surface' + ), + picker-arrow-color: ( - igx-color: 'surface', - text-contrast: (), - rgba: .74 + igx-color: ('grays', 800), ), picker-arrow-hover-color: ( @@ -98,9 +95,7 @@ $_light-calendar: extend( ), picker-text-color: ( - igx-color: 'surface', - text-contrast: (), - rgba: .74 + igx-color: ('grays', 800), ), picker-text-hover-color: ( @@ -108,21 +103,15 @@ $_light-calendar: extend( ), inactive-text-color: ( - igx-color: 'surface', - text-contrast: (), - rgba: .26 + igx-color: ('grays', 400), ), label-color: ( - igx-color: 'surface', - text-contrast: (), - rgba: .26 + igx-color: ('grays', 400), ), weekend-text-color: ( - igx-color: 'surface', - text-contrast: (), - rgba: .38 + igx-color: ('grays', 500), ), year-current-text-color: ( @@ -146,8 +135,7 @@ $_light-calendar: extend( ), month-hover-text-color: ( - igx-color: 'surface', - text-contrast: () + igx-contrast-color: ('grays', 200), ), date-selected-background: ( @@ -177,9 +165,7 @@ $_light-calendar: extend( ), date-disabled-text-color: ( - igx-color: ('grays', 500), - to-opaque: (), - rgba: .6 + igx-color: ('grays', 400), ), date-disabled-background: ( @@ -198,32 +184,33 @@ $_light-calendar: extend( /// Generates a fluent calendar schema. /// @type {Map} -/// @prop {Color} date-current-text-color [#fff] - The text color for the current date. +/// @prop {Color} date-current-text-color [igx-color: 'surface'] - The text color for the current date. /// @prop {Map} date-current-bg-color [igx-color: ('primary', 500)] - The background color for the current date. -/// @prop {Map} date-selected-background [igx-color: ('primary', 100), rgba: .5, to-opaque: #fff] - The background color for the selected date. +/// @prop {Map} date-selected-background [igx-color: ('primary', 50)] - The background color for the selected date. /// @prop {Map} date-selected-text-color [igx-color: ('primary', 100)] - The text color for the selected date. /// /// @prop {Number} border-radius [0] - The border radius used for calendar. Can be a fraction between 0 and 1, pixels, or percent. /// @prop {Number} date-border-radius [0] - The border radius used for calendar date. Can be a fraction between 0 and 1, pixels, or percent. /// @prop {Number} month-border-radius [0] - The border radius used for calendar month. Can be a fraction between 0 and 1, pixels, or percent. /// @requires {function} extend -/// @requires {Map} $_light-calendar -/// @requires {Map} $_fluent-shape-calendar -$_fluent-calendar: extend( - $_light-calendar, - $_fluent-shape-calendar, +/// @requires {Map} $light-calendar +/// @requires {Map} $fluent-shape-calendar +$fluent-calendar: extend( + $light-calendar, + $fluent-shape-calendar, ( variant: 'fluent', - date-current-text-color: #fff, + + date-current-text-color: ( + igx-color: 'surface', + ), date-current-bg-color: ( igx-color: ('primary', 500) ), date-selected-background: ( - igx-color: ('primary', 100), - rgba: .5, - to-opaque: #fff + igx-color: ('primary', 50), ), date-selected-text-color: ( @@ -235,7 +222,7 @@ $_fluent-calendar: extend( /// Generates a bootstrap calendar schema. /// @type {Map} /// @prop {Map} year-hover-text-color [igx-color: ('primary', 500)] - The year hover text color. -/// @prop {Map} date-special-background [igx-color: ('warn'), rgba:.5] - The background color used for special dates. +/// @prop {Map} date-special-background [igx-color: ('warn')] - The background color used for special dates. /// /// @prop {Map} month-hover-text-color [igx-color: ('primary', 500)] - The month hover text color. /// @prop {Map} month-hover-current-text-color [igx-color: ('primary', 500)] - The current month hover text color. @@ -244,31 +231,32 @@ $_fluent-calendar: extend( /// @prop {Map} picker-text-hover-color [igx-color: ('primary', 500)]- The hover picker month/year color. /// @prop {Map} picker-arrow-color [igx-color: ('primary', 500)] - The idle picker arrow color. /// @prop {Map} picker-arrow-hover-color [igx-color: ('primary', 800)] - The picker hover arrow color. -/// @prop {Color} picker-text-color [#000]- The idle picker month/year color. +/// @prop {Color} picker-text-color [igx-color: ('grays', 900)]- The idle picker month/year color. /// /// @prop {Map} picker-background-color [igx-color: ('grays', 100)] - The igx calendar picker background color. /// /// @prop {Map} year-current-text-color [igx-color: ('primary', 500)] - The text color for the current/selected year. /// @prop {Map} month-current-text-color [igx-color: ('primary', 500)]- The text color for the current/selected month. /// -/// @prop {Map} label-color [igx-color: 'info', rgba: .5, to-opaque: #fff] - The text color for weekday labels. -/// @prop {Color} date-current-text-color [#fff] - The text color for the current date. +/// @prop {Map} label-color [igx-color: 'info'] - The text color for weekday labels. +/// @prop {Color} date-current-text-color [igx-color: 'surface'] - The text color for the current date. /// /// @prop {Map} date-hover-background [igx-color: ('primary', 500)] - The hover date background color. /// @prop {Map} date-current-bg-color [igx-color: ('primary', 600)] - The background color for the current date. -/// @prop {Map} date-selected-background [igx-color: ('primary', 500), rgba: .8, to-opaque: #fff] - The background color for the selected date. -/// @prop {Color} date-selected-text-color [#fff] - The text color for the selected date. -/// @prop {Color} content-background [#fff] - The main content background color. +/// @prop {Map} date-selected-background [igx-color: ('primary', 300)] - The background color for the selected date. +/// @prop {Color} date-selected-text-color [igx-color: 'surface'] - The text color for the selected date. +/// @prop {Color} content-background [igx-color: 'surface'] - The main content background color. +/// @prop {Map} week-number-background [('grays', 300, .5)] - The background color of the week number column. /// /// @prop {Number} border-radius [4px] - The border radius used for calendar. Can be a fraction between 0 and 1, pixels, or percent. /// @prop {Number} date-border-radius [4px] - The border radius used for calendar date. Can be a fraction between 0 and 1, pixels, or percent. /// @prop {Number} month-border-radius [4px] - The border radius used for calendar month. Can be a fraction between 0 and 1, pixels, or percent. /// @requires {function} extend -/// @requires {Map} $_light-calendar -/// @requires {Map} $_bootstrap-shape-calendar -$_bootstrap-calendar: extend( - $_light-calendar, - $_bootstrap-shape-calendar, +/// @requires {Map} $light-calendar +/// @requires {Map} $bootstrap-shape-calendar +$bootstrap-calendar: extend( + $light-calendar, + $bootstrap-shape-calendar, ( variant: 'bootstrap', @@ -281,8 +269,7 @@ $_bootstrap-calendar: extend( ), date-special-background: ( - igx-color: ('warn'), - rgba:.5 + igx-color: 'warn', ), month-hover-text-color: ( @@ -319,11 +306,11 @@ $_bootstrap-calendar: extend( label-color: ( igx-color: 'info', - rgba: .5, - to-opaque: #fff ), - date-current-text-color: #fff, + date-current-text-color: ( + igx-color: 'surface', + ), date-hover-background: ( igx-color: ('primary', 500) @@ -334,14 +321,16 @@ $_bootstrap-calendar: extend( ), date-selected-background: ( - igx-color: ('primary', 500), - rgba: .8, - to-opaque: #fff + igx-color: ('primary', 300), ), - date-selected-text-color: #fff, + date-selected-text-color: ( + igx-color: 'surface', + ), - content-background: #fff, + content-background: ( + igx-color: 'surface', + ), content-text-color: ( igx-color: ('grays', 900) @@ -358,6 +347,10 @@ $_bootstrap-calendar: extend( inactive-text-color: ( igx-color: ('grays', 500) ), + + week-number-background: ( + igx-color: ('grays', 300, .5), + ), ) ); @@ -379,11 +372,11 @@ $_bootstrap-calendar: extend( /// @prop {Number} date-border-radius [1] - The border radius used for calendar date. Can be a fraction between 0 and 1, pixels, or percent. /// @prop {Number} month-border-radius [1] - The border radius used for calendar month. Can be a fraction between 0 and 1, pixels, or percent. /// @requires {function} extend -/// @requires {Map} $_light-calendar -/// @requires {Map} $_indigo-shape-calendar -$_indigo-calendar: extend( - $_light-calendar, - $_indigo-shape-calendar, +/// @requires {Map} $light-calendar +/// @requires {Map} $indigo-shape-calendar +$indigo-calendar: extend( + $light-calendar, + $indigo-shape-calendar, ( variant: 'indigo-design', diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_card.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_card.scss index 9de584e32ae..c6f0e685848 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_card.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_card.scss @@ -1,5 +1,6 @@ -@import '../shape/card'; -@import '../elevation/card'; +@use '../../../base' as *; +@use '../shape/card' as *; +@use '../elevation/card' as *; //// /// @group schemas @@ -10,22 +11,22 @@ /// Generates a light card schema. /// @type {Map} /// @prop {Map} background [igx-color: 'surface']- The card background color. -/// @prop {Map} header-text-color [igx-color: 'surface', text-contrast: (), rgba: .87] - The text color of the card title. -/// @prop {Map} subtitle-text-color [igx-color: 'surface', text-contrast: (), rgba: .6] - The text color of the card subtitle. -/// @prop {Map} content-text-color [igx-color: 'surface', text-contrast: (), rgba: .6] - The text color of the card content. -/// @prop {Map} actions-text-color [igx-color: 'surface', text-contrast: (), rgba: .6] - The text color of the card buttons. +/// @prop {Map} header-text-color [igx-color: ('grays', 900)] - The text color of the card title. +/// @prop {Map} subtitle-text-color [igx-color: ('grays', 700)] - The text color of the card subtitle. +/// @prop {Map} content-text-color [igx-color: ('grays', 700)] - The text color of the card content. +/// @prop {Map} actions-text-color [igx-color: ('grays', 700)] - The text color of the card buttons. +/// @prop {Map} outline-color [igx-color: ('grays', 400, .54)] - The outline color of an outlined type card. /// @prop {Number} resting-elevation [2] - The elevation level, between 0-24, to be used for the resting state. /// @prop {Number} hover-elevation [8] - The elevation level, between 0-24, to be used for the hover state. /// @prop {Number} border-radius [.17] - The border radius used for card. Can be a fraction between 0 and 1, pixels, or percent. -/// @prop {Map} outline-color [igx-color: ('grays', 400)] - The outline color of an outlined type card. /// /// @requires {function} extend -/// @requires {Map} $_default-shape-card -/// @requires {Map} $_default-elevation-card +/// @requires {Map} $default-shape-card +/// @requires {Map} $default-elevation-card /// @see $default-palette -$_light-card: extend( - $_default-shape-card, - $_default-elevation-card, +$light-card: extend( + $default-shape-card, + $default-elevation-card, ( variant: 'material', @@ -34,31 +35,23 @@ $_light-card: extend( ), header-text-color: ( - igx-color: 'surface', - text-contrast: (), - rgba: .87 + igx-color: ('grays', 900), ), subtitle-text-color: ( - igx-color: 'surface', - text-contrast: (), - rgba: .6 + igx-color: ('grays', 700) ), content-text-color: ( - igx-color: 'surface', - text-contrast: (), - rgba: .6 + igx-color: ('grays', 700), ), actions-text-color: ( - igx-color: 'surface', - text-contrast: (), - rgba: .6 + igx-color: ('grays', 700), ), outline-color: ( - igx-color: ('grays', 400) + igx-color: ('grays', 400, .54) ) ) ); @@ -71,13 +64,13 @@ $_light-card: extend( /// @prop {Number} border-radius [2px] - The border radius used for card. Can be a fraction between 0 and 1, pixels, or percent. /// /// @requires {function} extend -/// @requires {Map} $_light-card -/// @requires {Map} $_fluent-shape-card -/// @requires {Map} $_fluent-elevation-card -$_fluent-card: extend( - $_light-card, - $_fluent-shape-card, - $_fluent-elevation-card, +/// @requires {Map} $light-card +/// @requires {Map} $fluent-shape-card +/// @requires {Map} $fluent-elevation-card +$fluent-card: extend( + $light-card, + $fluent-shape-card, + $fluent-elevation-card, ( variant: 'fluent', @@ -89,7 +82,7 @@ $_fluent-card: extend( /// Generates a bootstrap card schema. /// @type {Map} -/// @prop {Color} background [#fff]- The card background color. +/// @prop {Color} background [igx-color: ('grays', 50)]- The card background color. /// @prop {Map} outline-color [igx-color: ('grays', 300)] - The outline color of an outlined type card. /// @prop {Map} header-text-color [igx-color: ('grays', 900)] - The text color of the card title. /// @prop {Map} subtitle-text-color [igx-color: ('grays', 800)] - The text color of the card subtitle. @@ -99,17 +92,19 @@ $_fluent-card: extend( /// @prop {Number} hover-elevation [0] - The elevation level, between 0-24, to be used for the hover state. /// @prop {Number} border-radius [4px] - The border radius used for card. Can be a fraction between 0 and 1, pixels, or percent. /// @requires {function} extend -/// @requires {Map} $_light-card -/// @requires {Map} $_bootstrap-shape-card -/// @requires {Map} $_bootstrap-elevation-card -$_bootstrap-card: extend( - $_light-card, - $_bootstrap-shape-card, - $_bootstrap-elevation-card, +/// @requires {Map} $light-card +/// @requires {Map} $bootstrap-shape-card +/// @requires {Map} $bootstrap-elevation-card +$bootstrap-card: extend( + $light-card, + $bootstrap-shape-card, + $bootstrap-elevation-card, ( variant: 'bootstrap', - background: #fff, + background: ( + igx-color: ('grays', 50) + ), outline-color: ( igx-color: ('grays', 300) @@ -144,13 +139,13 @@ $_bootstrap-card: extend( /// @prop {Number} hover-elevation [6] - The elevation level, between 0-24, to be used for the hover state. /// @prop {Number} border-radius [3px] - The border radius used for card. Can be a fraction between 0 and 1, pixels, or percent. /// @requires {function} extend -/// @requires {Map} $_light-card -/// @requires {Map} $_indigo-shape-card -/// @requires {Map} $_indigo-elevation-card -$_indigo-card: extend( - $_light-card, - $_indigo-shape-card, - $_indigo-elevation-card, +/// @requires {Map} $light-card +/// @requires {Map} $indigo-shape-card +/// @requires {Map} $indigo-elevation-card +$indigo-card: extend( + $light-card, + $indigo-shape-card, + $indigo-elevation-card, ( variant: 'indigo-design', diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_carousel.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_carousel.scss index 89461e5d9ec..c37b669ebcb 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_carousel.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_carousel.scss @@ -1,5 +1,6 @@ -@import '../shape/carousel'; -@import '../elevation/carousel'; +@use '../../../base' as *; +@use '../shape/carousel' as *; +@use '../elevation/carousel' as *; //// /// @group schemas @@ -9,31 +10,38 @@ /// Generates a light carousel schema. /// @type {Map} -/// @prop {Color} slide-background [#fff] - The slide background color. -/// @prop {Color} button-background [#fff] - The previous/next buttons idle background color. -/// @prop {Color} button-hover-background [#fff] - The previous/next buttons hover background color. -/// @prop {Map} button-disabled-background [igx-color: ('grays', 100), to-opaque: ()] - The previous/next buttons disabled background color. +/// @prop {Color} slide-background [igx-color: ('grays', 50)] - The slide background color. +/// @prop {Color} button-background [igx-color: ('grays', 50)] - The previous/next buttons idle background color. +/// @prop {Color} button-hover-background [igx-color: ('grays', 50)] - The previous/next buttons hover background color. +/// @prop {Map} button-disabled-background [igx-color: ('grays', 100)] - The previous/next buttons disabled background color. /// @prop {Map} button-arrow-color [igx-color: ('grays', 700)] - The previous/next buttons idle arrow color. /// @prop {Map} button-hover-arrow-color [igx-color: ('grays', 900)] - The previous/next buttons hover arrow color. /// @prop {Map} button-disabled-arrow-color [igx-color: ('grays' 400)] - The previous/next buttons disabled color. /// @prop {Color} indicator-dot-color [transparent] - The idle indicator dot color. -/// @prop {Color} indicator-border-color [#fff] - The idle indicator border color. -/// @prop {Color} indicator-active-dot-color [#fff] - The active indicator dot color. -/// @prop {Color} indicator-active-border-color [#fff] - The active indicator border color. +/// @prop {Color} indicator-border-color [igx-color: ('grays', 50)] - The idle indicator border color. +/// @prop {Color} indicator-active-dot-color [igx-color: ('grays', 50)] - The active indicator dot color. +/// @prop {Color} indicator-active-border-color [igx-color: ('grays', 50)] - The active indicator border color. /// @prop {Number} button-elevation [1] - The elevation level, between 0-24, to be used for the carousel buttons. /// @prop {Number} border-radius [0] - The border radius used for carousel. Can be a fraction between 0 and 1, pixels, or percent. /// @requires {function} extend -/// @requires {Map} $_default-shape-carousel -/// @requires {Map} $_default-elevation-carousel +/// @requires {Map} $default-shape-carousel +/// @requires {Map} $default-elevation-carousel /// @see $default-palette -$_light-carousel: extend( - $_default-shape-carousel, - $_default-elevation-carousel, +$light-carousel: extend( + $default-shape-carousel, + $default-elevation-carousel, ( - slide-background: #fff, + slide-background: ( + igx-color: ('grays', 50) + ), - button-background: #fff, - button-hover-background: #fff, + button-background: ( + igx-color: ('grays', 50) + ), + + button-hover-background: ( + igx-color: ('grays', 50) + ), button-arrow-color: ( igx-color: ('grays', 700) @@ -44,8 +52,7 @@ $_light-carousel: extend( ), button-disabled-background: ( - igx-color: ('grays', 100), - to-opaque: () + igx-color: ('grays', 100) ), button-disabled-arrow-color: ( @@ -53,9 +60,18 @@ $_light-carousel: extend( ), indicator-dot-color: transparent, - indicator-border-color: #fff, - indicator-active-dot-color: #fff, - indicator-active-border-color: #fff, + + indicator-border-color: ( + igx-color: ('grays', 50) + ), + + indicator-active-dot-color: ( + igx-color: ('grays', 50) + ), + + indicator-active-border-color: ( + igx-color: ('grays', 50) + ), ) ); @@ -64,13 +80,13 @@ $_light-carousel: extend( /// @prop {Number} border-radius [0] - The border radius used for carousel. Can be a fraction between 0 and 1, pixels, or percent. /// @prop {Number} button-elevation [0] - The elevation level, between 0-24, to be used for the carousel buttons. /// @requires {function} extend -/// @requires {Map} $_light-carousel -/// @requires {Map} $_square-shape-carousel -/// @requires {Map} $_fluent-elevation-carousel -$_fluent-carousel: extend( - $_light-carousel, - $_square-shape-carousel, - $_fluent-elevation-carousel +/// @requires {Map} $light-carousel +/// @requires {Map} $square-shape-carousel +/// @requires {Map} $fluent-elevation-carousel +$fluent-carousel: extend( + $light-carousel, + $square-shape-carousel, + $fluent-elevation-carousel ); /// Generates a bootstrap carousel schema. @@ -78,52 +94,52 @@ $_fluent-carousel: extend( /// @prop {Number} border-radius [4px] - The border radius used for carousel. Can be a fraction between 0 and 1, pixels, or percent. /// @prop {Number} button-elevation [0] - The elevation level, between 0-24, to be used for the carousel buttons. /// @requires {function} extend -/// @requires {Map} $_light-carousel -/// @requires {Map} $_bootstrap-shape-carousel -/// @requires {Map} $_bootstrap-elevation-carousel -$_bootstrap-carousel: extend( - $_light-carousel, - $_bootstrap-shape-carousel, - $_bootstrap-elevation-carousel, ( +/// @requires {Map} $light-carousel +/// @requires {Map} $bootstrap-shape-carousel +/// @requires {Map} $bootstrap-elevation-carousel +$bootstrap-carousel: extend( + $light-carousel, + $bootstrap-shape-carousel, + $bootstrap-elevation-carousel, + ( variant: 'bootstrap' ) ); /// Generates an indigo carousel schema. /// @type {Map} -/// @prop {Map} button-background [igx-color: 'surface', rgba: .4] - The previous/next buttons idle background color. -/// @prop {Map} button-hover-background [igx-color: 'surface', rgba: .65] - The previous/next buttons hover background color. +/// @prop {Map} button-background [igx-color: ('surface', 500, .4)] - The previous/next buttons idle background color. +/// @prop {Map} button-hover-background [igx-color: ('surface', 500, .65)] - The previous/next buttons hover background color. /// @prop {Color} button-disabled-background [transparent] - The previous/next buttons disabled background color. /// @prop {Map} button-arrow-color [igx-color: ('grays', 600)] - The previous/next buttons idle arrow color. /// @prop {Map} button-hover-arrow-color [igx-color: ('grays', 700)] - The previous/next buttons hover arrow color. /// @prop {Map} button-disabled-arrow-color [igx-color: ('grays' 400)] - The previous/next buttons disabled color. -/// @prop {Map} indicator-dot-color [igx-color: 'surface', rgba: .6] - The idle indicator dot color. +/// @prop {Map} indicator-dot-color [igx-color: ('surface', 500, .6)] - The idle indicator dot color. /// @prop {Map} indicator-active-dot-color [igx-color: 'surface'] - The active indicator dot color. /// @prop {Number} border-radius [0] - The border radius used for carousel. Can be a fraction between 0 and 1, pixels, or percent. /// @prop {Number} button-elevation [0] - The elevation level, between 0-24, to be used for the carousel buttons. /// /// @requires {function} extend -/// @requires {Map} $_light-carousel -/// @requires {Map} $_default-shape-carousel -/// @requires {Map} $_indigo-elevation-carousel -$_indigo-carousel: extend( - $_light-carousel, - $_default-shape-carousel, - $_indigo-elevation-carousel, ( +/// @requires {Map} $light-carousel +/// @requires {Map} $default-shape-carousel +/// @requires {Map} $indigo-elevation-carousel +$indigo-carousel: extend( + $light-carousel, + $default-shape-carousel, + $indigo-elevation-carousel, + ( variant: 'indigo-design', button-background: ( - igx-color: 'surface', - rgba: .4 + igx-color: ('surface', 500, .4), ), button-arrow-color: ( - igx-color: ('grays', 600) + igx-color: ('grays', 100) ), button-hover-background: ( - igx-color: 'surface', - rgba: .65, + igx-color: ('surface', 500, .65), ), button-hover-arrow-color: ( @@ -137,8 +153,7 @@ $_indigo-carousel: extend( ), indicator-dot-color: ( - igx-color: 'surface', - rgba: .6 + igx-color: ('surface', 500, .6), ), indicator-active-dot-color:( diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_category-chart.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_category-chart.scss index 5d477a40632..82d0bad8ddc 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_category-chart.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_category-chart.scss @@ -61,177 +61,175 @@ /// @property {Color} y-axis-tick-stroke [null] - Sets the color to apply to tickmarks along the Y-axis. /// @property {Number} y-axis-tick-stroke-thickness [null] - Sets the thickness to apply to tickmarks along the Y-axis. /// @see $default-palette -$_light-category-chart: extend( - ( - 'margin': ( - expand-shorthand: (null) - ), +$light-category-chart: ( + 'margin': ( + expand-shorthand: (null) + ), - 'brushes': series, + 'brushes': series, - 'marker-brushes': series, + 'marker-brushes': series, - 'negative-brushes': series, + 'negative-brushes': series, - 'outlines': series, + 'outlines': series, - 'marker-outlines': series, + 'marker-outlines': series, - 'negative-outlines': series, + 'negative-outlines': series, - 'title-alignment': null, + 'title-alignment': null, - 'title-margin': ( - expand-shorthand: (null), - map-keys-prefix: 'title' - ), + 'title-margin': ( + expand-shorthand: (null), + map-keys-prefix: 'title' + ), - 'title-text-color': ( - igx-color: ('grays', 700), - to-opaque: #fff - ), + 'title-text-color': ( + igx-color: ('grays', 700), + to-opaque: #fff + ), - 'title-text-style': null, + 'title-text-style': null, - 'subtitle-margin': ( - expand-shorthand: (null), - map-keys-prefix: 'subtitle' - ), + 'subtitle-margin': ( + expand-shorthand: (null), + map-keys-prefix: 'subtitle' + ), - 'subtitle-alignment': null, + 'subtitle-alignment': null, - 'subtitle-text-color': ( - igx-color: ('grays', 700), - to-opaque: #fff - ), + 'subtitle-text-color': ( + igx-color: ('grays', 700), + to-opaque: #fff + ), - 'subtitle-text-style': null, + 'subtitle-text-style': null, - 'thickness': null, + 'thickness': null, - 'trend-line-brushes': series, + 'trend-line-brushes': series, - 'trend-line-thickness': null, + 'trend-line-thickness': null, - 'x-axis-label-margin': ( - expand-shorthand: (null), - map-keys-prefix: 'x-axis-label' - ), + 'x-axis-label-margin': ( + expand-shorthand: (null), + map-keys-prefix: 'x-axis-label' + ), - 'x-axis-label-text-color': ( - igx-color: ('grays', 700), - to-opaque: #fff - ), + 'x-axis-label-text-color': ( + igx-color: ('grays', 700), + to-opaque: #fff + ), - 'x-axis-label-text-style': null, + 'x-axis-label-text-style': null, - 'x-axis-label-vertical-alignment': null, + 'x-axis-label-vertical-alignment': null, - 'x-axis-major-stroke': null, + 'x-axis-major-stroke': null, - 'x-axis-major-stroke-thickness': null, + 'x-axis-major-stroke-thickness': null, - 'x-axis-minor-stroke': null, + 'x-axis-minor-stroke': null, - 'x-axis-minor-stroke-thickness': null, + 'x-axis-minor-stroke-thickness': null, - 'x-axis-strip': null, + 'x-axis-strip': null, - 'x-axis-stroke': null, + 'x-axis-stroke': null, - 'x-axis-stroke-thickness': null, + 'x-axis-stroke-thickness': null, - 'x-axis-tick-length': null, + 'x-axis-tick-length': null, - 'x-axis-tick-stroke': ( - igx-color: ('grays', 700), - to-opaque: #fff - ), + 'x-axis-tick-stroke': ( + igx-color: ('grays', 700), + to-opaque: #fff + ), - 'x-axis-tick-stroke-thickness': null, + 'x-axis-tick-stroke-thickness': null, - 'x-axis-title-alignment': null, + 'x-axis-title-alignment': null, - 'x-axis-title-margin': ( - expand-shorthand: (null), - map-keys-prefix: 'x-axis-title' - ), + 'x-axis-title-margin': ( + expand-shorthand: (null), + map-keys-prefix: 'x-axis-title' + ), - 'x-axis-title-text-color': ( - igx-color: ('grays', 700), - to-opaque: #fff - ), + 'x-axis-title-text-color': ( + igx-color: ('grays', 700), + to-opaque: #fff + ), - 'x-axis-title-text-style': null, + 'x-axis-title-text-style': null, - 'y-axis-label-margin': ( - expand-shorthand: (null), - map-keys-prefix: 'y-axis-label' - ), + 'y-axis-label-margin': ( + expand-shorthand: (null), + map-keys-prefix: 'y-axis-label' + ), - 'y-axis-label-text-color': ( - igx-color: ('grays', 700), - to-opaque: #fff - ), + 'y-axis-label-text-color': ( + igx-color: ('grays', 700), + to-opaque: #fff + ), - 'y-axis-label-text-style': null, + 'y-axis-label-text-style': null, - 'y-axis-label-vertical-alignment': null, + 'y-axis-label-vertical-alignment': null, - 'y-axis-major-stroke': null, + 'y-axis-major-stroke': null, - 'y-axis-major-stroke-thickness': null, + 'y-axis-major-stroke-thickness': null, - 'y-axis-minor-stroke': null, + 'y-axis-minor-stroke': null, - 'y-axis-minor-stroke-thickness': null, + 'y-axis-minor-stroke-thickness': null, - 'y-axis-strip': null, + 'y-axis-strip': null, - 'y-axis-stroke': null, + 'y-axis-stroke': null, - 'y-axis-stroke-thickness': null, + 'y-axis-stroke-thickness': null, - 'y-axis-title-alignment': null, + 'y-axis-title-alignment': null, - 'y-axis-title-margin': ( - expand-shorthand: (null), - map-keys-prefix: 'y-axis-title' - ), + 'y-axis-title-margin': ( + expand-shorthand: (null), + map-keys-prefix: 'y-axis-title' + ), - 'y-axis-title-text-color': ( - igx-color: ('grays', 700), - to-opaque: #fff - ), + 'y-axis-title-text-color': ( + igx-color: ('grays', 700), + to-opaque: #fff + ), - 'y-axis-title-text-style': null, + 'y-axis-title-text-style': null, - 'y-axis-tick-length': null, + 'y-axis-tick-length': null, - 'y-axis-tick-stroke': ( - igx-color: ('grays', 700), - to-opaque: #fff - ), + 'y-axis-tick-stroke': ( + igx-color: ('grays', 700), + to-opaque: #fff + ), - 'y-axis-tick-stroke-thickness': null - ) + 'y-axis-tick-stroke-thickness': null ); /// Generates a fluent category-chart schema. /// @type {Map} /// @requires {function} extend -/// @requires {Map} $_light-category-chart -$_fluent-category-chart: extend($_light-category-chart); +/// @requires {Map} $light-category-chart +$fluent-category-chart: $light-category-chart; /// Generates a bootstrap category-chart schema. /// @type {Map} /// @requires {function} extend -/// @requires {Map} $_light-category-chart -$_bootstrap-category-chart: extend($_light-category-chart); +/// @requires {Map} $light-category-chart +$bootstrap-category-chart: $light-category-chart; /// Generates an indigo category-chart schema. /// @type {Map} /// @requires {function} extend -/// @requires {Map} $_light-category-chart -$_indigo-category-chart: extend($_light-category-chart); +/// @requires {Map} $light-category-chart +$indigo-category-chart: $light-category-chart; diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_checkbox.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_checkbox.scss index 79f97a50784..1b5dc92f3bc 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_checkbox.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_checkbox.scss @@ -1,4 +1,5 @@ -@import '../shape/checkbox'; +@use '../../../base' as *; +@use '../shape/checkbox' as *; //// /// @group schemas @@ -8,7 +9,7 @@ /// Generates a light checkbox schema. /// @type {Map} -/// @prop {Color} tick-color [#fff] - The checked mark color. +/// @prop {Color} tick-color [igx-color: ('grays', 50)] - The checked mark color. /// @prop {Map} label-color [igx-color: ('grays', 900)]- The text color used for the label text. /// @prop {Map} empty-color [igx-color: ('grays', 600)] - The unchecked border color. /// @prop {Map} fill-color [igx-color: ('secondary', 500)] - The checked border and fill colors. @@ -18,13 +19,16 @@ /// @prop {Number} border-radius-ripple [1] - The border radius used for checkbox ripple. Can be a fraction between 0 and 1, pixels, or percent. /// /// @requires {function} extend -/// @requires {Map} $_default-shape-checkbox +/// @requires {Map} $default-shape-checkbox /// @see $default-palette -$_light-checkbox: extend( - $_default-shape-checkbox, +$light-checkbox: extend( + $default-shape-checkbox, ( variant: 'material', - tick-color: #fff, + + tick-color: ( + igx-color: ('grays', 50) + ), label-color: ( igx-color: ('grays', 900) @@ -58,11 +62,11 @@ $_light-checkbox: extend( /// @property {Map} focus-outline-color [igx-color: ('grays', 800)] - The focus outlined color. /// /// @requires {function} extend -/// @requires {Map} $_light-checkbox -/// @requires {Map} $_fluent-shape-checkbox -$_fluent-checkbox: extend( - $_light-checkbox, - $_fluent-shape-checkbox, +/// @requires {Map} $light-checkbox +/// @requires {Map} $fluent-shape-checkbox +$fluent-checkbox: extend( + $light-checkbox, + $fluent-shape-checkbox, ( variant: 'fluent', @@ -94,11 +98,11 @@ $_fluent-checkbox: extend( /// @property {Map} focus-outline-color [igx-color: ('primary', 200)] - The focus outlined color. /// /// @requires {function} extend -/// @requires {Map} $_light-checkbox -/// @requires {Map} $_bootstrap-shape-checkbox -$_bootstrap-checkbox: extend( - $_light-checkbox, - $_bootstrap-shape-checkbox, +/// @requires {Map} $light-checkbox +/// @requires {Map} $bootstrap-shape-checkbox +$bootstrap-checkbox: extend( + $light-checkbox, + $bootstrap-shape-checkbox, ( variant: 'bootstrap', @@ -134,11 +138,11 @@ $_bootstrap-checkbox: extend( /// @property {Map} focus-outline-color-focused [igx-color: ('primary', 200)] - The focus outlined color for focused state. /// /// @requires {function} extend -/// @requires {Map} $_light-checkbox -/// @requires {Map} $_indigo-shape-checkbox -$_indigo-checkbox: extend( - $_light-checkbox, - $_indigo-shape-checkbox, +/// @requires {Map} $light-checkbox +/// @requires {Map} $indigo-shape-checkbox +$indigo-checkbox: extend( + $light-checkbox, + $indigo-shape-checkbox, ( variant: 'indigo-design', diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_chip.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_chip.scss index 2c2ad0bbf0c..e82f86c227b 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_chip.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_chip.scss @@ -1,5 +1,6 @@ -@import '../elevation/chip'; -@import '../shape/chip'; +@use '../../../base' as *; +@use '../elevation/chip' as *; +@use '../shape/chip' as *; //// /// @group schemas @@ -11,35 +12,35 @@ /// @type {Map} /// @prop {Number} border-radius [1] - The border radius used for chip. Can be a fraction between 0 and 1, pixels, or percent. /// @prop {Map} text-color [igx-color: ('grays', 700)] - The chip text color. -/// @prop {Map} background [igx-color: ('grays', 200)] - The chip background color. +/// @prop {Map} background [igx-color: ('grays', 300)] - The chip background color. /// @prop {Color} border-color [transparent] - The chip border color. -/// @prop {Map} ghost-background [igx-color: ('grays', 400), to-opaque: #fff)] - The chip ghost background color. +/// @prop {Map} ghost-background [igx-color: ('grays', 400))] - The chip ghost background color. /// @prop {Map} hover-text-color [igx-color: ('grays', 700)] - The chip text hover color. -/// @prop {Map} hover-background [igx-color: ('grays', 300)] - The chip hover background color. +/// @prop {Map} hover-background [igx-color: ('grays', 400, .5)] - The chip hover background color. /// @prop {Color} hover-border-color [transparent] - The chip hover border color. /// @prop {Map} selected-text-color [igx-color: ('grays', 700)] - The selected chip text color. /// @prop {Map} selected-background [igx-color: ('grays', 300)] - The selected chip background color. /// @prop {Color} selected-border-color [transparent] The selected chip border color. -/// @prop {Map} focus-background [igx-color: ('grays', 400)] The focused chip background color. +/// @prop {Map} focus-background [igx-color: ('grays', 400, .5)] The focused chip background color. /// @prop {Map} focus-text-color [igx-color: ('grays', 700)] The focused chip text color. /// @prop {Color} focus-border-color [transparent] - The chip focus border color. /// @prop {Map} hover-selected-text-color [igx-color: ('grays', 700)] - The selected chip hover text color. -/// @prop {Map} hover-selected-background [igx-color: ('grays', 400)] - The selected chip hover background color. +/// @prop {Map} hover-selected-background [igx-color: ('grays', 400, .8)] - The selected chip hover background color. /// @prop {Color} hover-selected-border-color [transparent] - The selected chip hover border color. /// @prop {Map} focus-selected-text-color [igx-color: ('grays', 700)] - The selected chip text focus color. -/// @prop {Map} focus-selected-background [igx-color: ('grays', 400)] - The selected chip focus background color. +/// @prop {Map} focus-selected-background [igx-color: ('grays', 400, .8)] - The selected chip focus background color. /// @prop {Color} focus-selected-border-color [transparent] - The selected chip focus border color. /// @prop {Number} ghost-elevation [8] - The elevation level, between 0-24, to be used for the chip's ghost (dragging mode). /// @prop {color} remove-icon-color ["'currentColor'"] - The remove icon color for the chip. /// @prop {Map} remove-icon-color-focus [igx-color: ('error')] - The remove icon color on focus for the chip. /// /// @requires {function} extend -/// @requires {Map} $_round-shape-chip -/// @requires {Map} $_default-elevation-chip +/// @requires {Map} $round-shape-chip +/// @requires {Map} $default-elevation-chip /// @see $default-palette -$_light-chip: extend( - $_round-shape-chip, - $_default-elevation-chip, +$light-chip: extend( + $round-shape-chip, + $default-elevation-chip, ( variant:'material', @@ -58,14 +59,13 @@ $_light-chip: extend( ), background: ( - igx-color: ('grays', 200) + igx-color: ('grays', 300) ), border-color: transparent, ghost-background: ( - igx-color: ('grays', 400), - to-opaque: #fff + igx-color: ('grays', 400) ), hover-text-color: ( @@ -73,7 +73,7 @@ $_light-chip: extend( ), hover-background: ( - igx-color: ('grays', 300) + igx-color: ('grays', 400, .5) ), hover-border-color: transparent, @@ -83,7 +83,7 @@ $_light-chip: extend( ), focus-background: ( - igx-color: ('grays', 400) + igx-color: ('grays', 400, .5) ), focus-border-color: transparent, @@ -103,7 +103,7 @@ $_light-chip: extend( ), hover-selected-background: ( - igx-color: ('grays', 400) + igx-color: ('grays', 400, .8) ), hover-selected-border-color: transparent, @@ -113,7 +113,7 @@ $_light-chip: extend( ), focus-selected-background: ( - igx-color: ('grays', 400) + igx-color: ('grays', 400, .8) ), focus-selected-border-color: transparent @@ -122,9 +122,9 @@ $_light-chip: extend( /// Generates a fluent chip schema. /// @type {Map} -/// @prop {Map} background [igx-color: ('grays', 100)] - The chip background color. -/// @prop {Color} ghost-background [#fff] - The chip ghost background color. -/// @prop {Map} hover-background [igx-color: ('grays', 200)] - The chip hover background color. +/// @prop {Map} background [igx-color: ('grays', 300, .6)] - The chip background color. +/// @prop {Map} ghost-background [igx-color: ('primary', 500)] - The chip ghost background color. +/// @prop {Map} hover-background [igx-color: ('grays', 300)] - The chip hover background color. /// @prop {Map} selected-text-color [igx-contrast-color: ('primary', 500))] - The selected chip text color. /// @prop {Map} selected-background [igx-color: ('primary', 500)] - The selected chip background color. /// @prop {Map} focus-background [igx-color: ('primary', 500)] The focused chip background color. @@ -137,24 +137,26 @@ $_light-chip: extend( /// @prop {Number} border-radius [1] - The border radius used for chip. Can be a fraction between 0 and 1, pixels, or percent. /// /// @requires {function} extend -/// @requires {Map} $_light-chip -/// @requires {Map} $_round-shape-chip -/// @requires {Map} $_fluent-elevation-chip -$_fluent-chip: extend( - $_light-chip, - $_round-shape-chip, - $_fluent-elevation-chip, +/// @requires {Map} $light-chip +/// @requires {Map} $round-shape-chip +/// @requires {Map} $fluent-elevation-chip +$fluent-chip: extend( + $light-chip, + $round-shape-chip, + $fluent-elevation-chip, ( variant:'fluent', background: ( - igx-color: ('grays', 100), + igx-color: ('grays', 300, .6), ), - ghost-background: #fff, + ghost-background: ( + igx-color: ('primary', 500) + ), hover-background: ( - igx-color: ('grays', 200), + igx-color: ('grays', 300), ), selected-text-color: ( @@ -194,19 +196,60 @@ $_fluent-chip: extend( /// Generates a bootstrap chip schema. /// @type {Map} /// +/// @prop {Map} background [igx-color: ('grays', 400, .5)] - The chip background color. +/// @prop {Map} hover-background [igx-color: ('grays', 400, .7)] - The chip hover background color. +/// @prop {Map} focus-background [igx-color: ('primary', 500)] The focused chip background color. +/// @prop {Map} selected-background [igx-color: ('grays', 400, .5)] - The selected chip background color. +/// @prop {Map} focus-text-color [igx-contrast-color: ('grays', 500, .8)] The focused chip text color. +/// @prop {Map} hover-selected-background [igx-color: ('grays', 400, .8)] - The selected chip hover background color. +/// @prop {Map} focus-selected-background [igx-color: ('grays', 500, .8)] - The selected chip focus background color. +/// @prop {Map} focus-selected-text-color [igx-color: ('grays', 800)] - The selected chip text focus color. /// @prop {Number} ghost-elevation [0] - The elevation level, between 0-24, to be used for the chip's ghost (dragging mode). /// @prop {Number} border-radius [.25] - The border radius used for chip. Can be a fraction between 0 and 1, pixels, or percent. /// /// @requires {function} extend -/// @requires {Map} $_light-chip -/// @requires {Map} $_bootstrap-shape-chip -/// @requires {Map} $_bootstrap-elevation-chip -$_bootstrap-chip: extend( - $_light-chip, - $_bootstrap-shape-chip, - $_bootstrap-elevation-chip, +/// @requires {Map} $light-chip +/// @requires {Map} $bootstrap-shape-chip +/// @requires {Map} $bootstrap-elevation-chip +$bootstrap-chip: extend( + $light-chip, + $bootstrap-shape-chip, + $bootstrap-elevation-chip, ( variant: 'bootstrap', + + background: ( + igx-color: ('grays', 400, .5) + ), + + hover-background: ( + igx-color: ('grays', 400, .7) + ), + + focus-background: ( + igx-color: ('grays', 500, .8), + ), + + selected-background: ( + igx-color: ('grays', 400, .5) + ), + + focus-selected-background:( + igx-color: ('grays', 500, .8), + ), + + + hover-selected-background: ( + igx-color: ('grays', 400, .8), + ), + + focus-selected-text-color: ( + igx-color: ('grays', 800) + ), + + focus-text-color: ( + igx-color: ('grays', 800) + ), ) ); @@ -215,13 +258,10 @@ $_bootstrap-chip: extend( /// /// @prop {Number} ghost-elevation [1] - The elevation level, between 0-24, to be used for the chip's ghost (dragging mode). /// @prop {Number} border-radius [1] - The border radius used for chip. Can be a fraction between 0 and 1, pixels, or percent. -/// @prop {Color} text-color [#fff] - The chip text color. -/// @prop {Color} background [#fff)] - The chip background color. -/// @prop {Map} ghost-background [igx-color: ('grays', 200), to-opaque: (igx-color: 'surface')] - The chip ghost background color. -/// @prop {Map} hover-text-color [igx-color: ('grays', 700)] - The chip text hover color. +/// @prop {Map} background [igx-color: ('surface')] - The chip background color. +/// @prop {Map} ghost-background [igx-color: ('surface')] - The chip ghost background color. /// @prop {Map} hover-background [igx-color: ('grays', 200)] - The chip hover background color. -/// @prop {Map} focus-text-color [igx-color: ('grays', 700)] The focused chip text color. -/// @prop {Color} focus-background [#fff)] The focused chip background color. +/// @prop {Map} focus-background [igx-color: ('surface')] The focused chip background color. /// @prop {Map} selected-text-color [igx-contrast-color: ('primary', 500)] - The selected chip text color. /// @prop {Map} selected-background [igx-color: ('primary', 500)] - The selected chip background color. /// @prop {Map} hover-selected-text-color [igx-contrast-color: ('primary', 400)] - The selected chip hover text color. @@ -234,13 +274,13 @@ $_bootstrap-chip: extend( /// @prop {Map} hover-border-color [igx-color: ('grays', 400)] - The chip hover border color. /// @prop {Map} focus-border-color [igx-color: ('grays', 400)] - The chip focus border color. /// @requires {function} extend -/// @requires {Map} $_light-chip -/// @requires {Map} $_indigo-shape-chip -/// @requires {Map} $_indigo-elevation-chip -$_indigo-chip: extend( - $_light-chip, - $_indigo-shape-chip, - $_indigo-elevation-chip, +/// @requires {Map} $light-chip +/// @requires {Map} $indigo-shape-chip +/// @requires {Map} $indigo-elevation-chip +$indigo-chip: extend( + $light-chip, + $indigo-shape-chip, + $indigo-elevation-chip, ( variant: 'indigo-design', @@ -252,28 +292,20 @@ $_indigo-chip: extend( igx-color: ('primary', 200) ), - background: #fff, + background: ( + igx-color: ('surface') + ), ghost-background: ( igx-color: ('surface'), - - to-opaque: ( - igx-color: 'surface', - ) ), hover-background: ( igx-color: ('grays', 200) ), - focus-background: #fff, - - hover-text-color: ( - igx-color: ('grays', 700) - ), - - focus-text-color: ( - igx-color: ('grays', 700) + focus-background: ( + igx-color: ('surface') ), border-color: ( @@ -288,10 +320,6 @@ $_indigo-chip: extend( igx-color: ('grays', 400) ), - text-color: ( - igx-color: ('grays', 700) - ), - selected-text-color: ( igx-contrast-color: ('primary', 500) ), diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_column-actions.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_column-actions.scss index 83a384f189c..b536071ab97 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_column-actions.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_column-actions.scss @@ -9,8 +9,10 @@ /// @prop {Map} title-color [igx-color: ('primary', 500)]- The text color used for the title of the list. /// @prop {Color} background-color [#fff] - The background color of the panel. /// @see $default-palette -$_light-column-actions: ( - background-color: #fff, +$light-column-actions: ( + background-color: ( + igx-color: ('surface') + ), title-color: ( igx-color: ('primary', 500) @@ -19,18 +21,15 @@ $_light-column-actions: ( /// Generates a fluent column actions schema. /// @type {Map} -/// @requires {function} extend -/// @requires {map} $_light-column-actions -$_fluent-column-actions: extend($_light-column-actions); +/// @requires {map} $light-column-actions +$fluent-column-actions: $light-column-actions; /// Generates a bootstrap column actions schema. /// @type {Map} -/// @requires {function} extend -/// @requires {map} $_light-column-actions -$_bootstrap-column-actions: extend($_light-column-actions); +/// @requires {map} $light-column-actions +$bootstrap-column-actions: $light-column-actions; /// Generates an indigo column actions schema. /// @type {Map} -/// @requires {function} extend -/// @requires {map} $_light-column-actions -$_indigo-column-actions: extend($_light-column-actions); +/// @requires {map} $light-column-actions +$indigo-column-actions: $light-column-actions; diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_combo.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_combo.scss index e4fec6847fe..c7ce760dccb 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_combo.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_combo.scss @@ -1,3 +1,5 @@ +@use '../../../base' as *; + //// /// @group schemas /// @access public @@ -7,46 +9,42 @@ /// Generates a light combo schema. /// @type {Map} /// @prop {Map} empty-list-background [igx-color: 'surface'] - The combo list background color. -/// @prop {Map} search-separator-border-color [igx-color: 'surface', to-opaque: (), text-contrast: (), rgba: .12] - The combo search box separator color. -/// @prop {Map} empty-list-placeholder-color [igx-color: 'surface', to-opaque: (), text-contrast: (), rgba: .26] - The combo placeholder text color. +/// @prop {Map} search-separator-border-color [igx-color: ('grays', 500)] - The combo search box separator color. +/// @prop {Map} empty-list-placeholder-color [igx-color: ('grays', 700)] - The combo placeholder text color. /// @see $default-palette -$_light-combo: ( +$light-combo: ( empty-list-background: ( igx-color: 'surface' ), search-separator-border-color: ( - igx-color: 'surface', - to-opaque: (), - text-contrast: (), - rgba: .12 + igx-color: ('grays', 500), ), empty-list-placeholder-color: ( - igx-color: 'surface', - to-opaque: (), - text-contrast: (), - rgba: .26 + igx-color: ('grays', 700), ) ); /// Generates a fluent combo schema. /// @type {Map} /// @requires {function} extend -/// @requires {Map} $_light-combo -$_fluent-combo: extend($_light-combo); +/// @requires {Map} $light-combo +$fluent-combo: $light-combo; /// Generates a bootstrap combo schema. /// @type {Map} -/// @prop {Color} empty-list-background [#fff] - The combo list background color. +/// @prop {Color} empty-list-background [igx-color: ('surface')] - The combo list background color. /// @prop {Map} search-separator-border-color [igx-color: ('grays', 400)] - The combo search box separator color. /// @prop {Map} empty-list-placeholder-color [igx-color: ('grays', 600)] - The combo placeholder text color. /// @requires {function} extend -/// @requires {Map} $_light-combo -$_bootstrap-combo: extend( - $_light-combo, +/// @requires {Map} $light-combo +$bootstrap-combo: extend( + $light-combo, ( - empty-list-background: #fff, + empty-list-background: ( + igx-color: ('surface') + ), search-separator-border-color: ( igx-color: ('grays', 400) @@ -61,5 +59,5 @@ $_bootstrap-combo: extend( /// Generates an indigo combo schema. /// @type {Map} /// @requires {function} extend -/// @requires {Map} $_light-combo -$_indigo-combo: extend($_light-combo); +/// @requires {Map} $light-combo +$indigo-combo: $light-combo; diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_data-chart.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_data-chart.scss index 091405553d6..5006ce09bd2 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_data-chart.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_data-chart.scss @@ -19,55 +19,53 @@ /// @property {String} title-horizontal-alignment [null] - The horizontal alignment to use for the title. /// @property {String} subtitle-horizontal-alignment [null] - The horizontal alignment to use for the subtitle. /// @see $default-palette -$_light-data-chart: extend( - ( - 'margin': null, +$light-data-chart: ( + 'margin': null, - 'title-text-color': ( - igx-color: ('grays', 900) - ), + 'title-text-color': ( + igx-color: ('grays', 900) + ), - 'title-margin': null, + 'title-margin': null, - 'subtitle-text-color': ( - igx-color: ('grays', 600) - ), + 'subtitle-text-color': ( + igx-color: ('grays', 600) + ), - 'subtitle-margin': null, + 'subtitle-margin': null, - 'brushes': series, + 'brushes': series, - 'marker-brushes': series, + 'marker-brushes': series, - 'outlines': series, + 'outlines': series, - 'marker-outlines': series, + 'marker-outlines': series, - 'plot-area-background': ( - igx-color: ('surface', 500) - ), + 'plot-area-background': ( + igx-color: ('surface', 500) + ), - 'title-horizontal-alignment': null, + 'title-horizontal-alignment': null, - 'subtitle-horizontal-alignment': null, - ) + 'subtitle-horizontal-alignment': null, ); /// Generates a fluent data-chart schema. /// @type {Map} /// @requires {function} extend -/// @requires {Map} $_light-data-chart -$_fluent-data-chart: extend($_light-data-chart); +/// @requires {Map} $light-data-chart +$fluent-data-chart: $light-data-chart; /// Generates a bootstrap data-chart schema. /// @type {Map} /// @requires {function} extend -/// @requires {Map} $_light-data-chart -$_bootstrap-data-chart: extend($_light-data-chart); +/// @requires {Map} $light-data-chart +$bootstrap-data-chart: $light-data-chart; /// Generates an indigo data-chart schema. /// @type {Map} /// @requires {function} extend -/// @requires {Map} $_light-data-chart -$_indigo-data-chart: extend($_light-data-chart); +/// @requires {Map} $light-data-chart +$indigo-data-chart: $light-data-chart; diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_date-range-picker.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_date-range-picker.scss index 834998b9880..1edfaa70cd5 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_date-range-picker.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_date-range-picker.scss @@ -1,3 +1,5 @@ +@use '../../../base' as *; + //// /// @group schemas /// @access public @@ -8,7 +10,7 @@ /// @type {Map} /// @prop {Map} label-color [igx-color: 'surface'] - The Color for date range separator label. /// @see $default-palette -$_light-date-range-picker: ( +$light-date-range-picker: ( label-color: ( igx-color: ('grays', 500), ) @@ -17,17 +19,15 @@ $_light-date-range-picker: ( /// Generates a fluent date-range-picker schema. /// @type {Map} /// @requires {function} extend -/// @requires {Map} $_light-date-range-picker -$_fluent-date-range-picker: extend($_light-date-range-picker); +/// @requires {Map} $light-date-range-picker +$fluent-date-range-picker: $light-date-range-picker; /// Generates a bootstrap date-range-picker schema. /// @type {Map} -/// @requires {function} extend -/// @requires {Map} $_light-date-range-picker -$_bootstrap-date-range-picker: extend($_light-date-range-picker); +/// @requires {Map} $light-date-range-picker +$bootstrap-date-range-picker: $light-date-range-picker; /// Generates an indigo date-range-picker schema. /// @type {Map} -/// @requires {function} extend -/// @requires {Map} $_light-date-range-picker -$_indigo-date-range-picker: extend($_light-date-range-picker); +/// @requires {Map} $light-date-range-picker +$indigo-date-range-picker: $light-date-range-picker; diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_dialog.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_dialog.scss index 6394a566b8a..953e1e47e42 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_dialog.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_dialog.scss @@ -1,5 +1,6 @@ -@import '../shape/dialog'; -@import '../elevation/dialog'; +@use '../../../base' as *; +@use '../shape/dialog' as *; +@use '../elevation/dialog' as *; //// /// @group schemas @@ -10,7 +11,7 @@ /// Generates a light dialog schema. /// @type {Map} /// @prop {Map} background [igx-color: 'surface'] - The dialog background color. -/// @prop {Map} title-color [igx-color: 'surface', text-contrast: (), rgba: .87] - The dialog title text color. +/// @prop {Map} title-color [igx-contrast-color: 'surface'] - The dialog title text color. /// @prop {Map} message-color [igx-color: 'surface', text-contrast: (), rgba: .6] - The dialog message text color. /// @prop {map} border-color [igx-color: ('grays', 300)] - The border color for dialog component. /// @@ -19,27 +20,24 @@ /// /// @see $default-palette /// @requires {function} extend -/// @requires {Map} $_default-shape-dialog -/// @requires {Map} $_default-elevation-dialog -$_light-dialog: extend( - $_default-shape-dialog, - $_default-elevation-dialog, +/// @requires {Map} $default-shape-dialog +/// @requires {Map} $default-elevation-dialog +$light-dialog: extend( + $default-shape-dialog, + $default-elevation-dialog, ( variant: 'material', + background: ( igx-color: 'surface' ), title-color: ( - igx-color: 'surface', - text-contrast: (), - rgba: .87 + igx-color: ('grays', 900), ), message-color: ( - igx-color: 'surface', - text-contrast: (), - rgba: .6 + igx-color: ('grays', 600), ), border-color: transparent, @@ -51,11 +49,11 @@ $_light-dialog: extend( /// @prop {Number} border-radius [2px] - The border radius used for dialog. Can be a fraction between 0 and 1, pixels, or percent. /// /// @requires {function} extend -/// @requires {Map} $_light-dialog -/// @requires {Map} $_fluent-shape-dialog -$_fluent-dialog: extend( - $_light-dialog, - $_fluent-shape-dialog, +/// @requires {Map} $light-dialog +/// @requires {Map} $fluent-shape-dialog +$fluent-dialog: extend( + $light-dialog, + $fluent-shape-dialog, ( variant: 'fluent', ) @@ -67,15 +65,16 @@ $_fluent-dialog: extend( /// @prop {Number} elevation [0] - The elevation level, between 0-24, to be used for the dialog. /// @prop {Number} border-radius [4px] - The border radius used for dialog. Can be a fraction between 0 and 1, pixels, or percent. /// @requires {function} extend -/// @requires {Map} $_light-dialog -/// @requires {Map} $_bootstrap-shape-dialog -/// @requires {Map} $_bootstrap-elevation-dialog -$_bootstrap-dialog: extend( - $_light-dialog, - $_bootstrap-shape-dialog, - $_bootstrap-elevation-dialog, +/// @requires {Map} $light-dialog +/// @requires {Map} $bootstrap-shape-dialog +/// @requires {Map} $bootstrap-elevation-dialog +$bootstrap-dialog: extend( + $light-dialog, + $bootstrap-shape-dialog, + $bootstrap-elevation-dialog, ( variant: 'bootstrap', + border-color: ( igx-color: ('grays', 300) ) @@ -84,22 +83,17 @@ $_bootstrap-dialog: extend( /// Generates an indigo dialog schema. /// @type {Map} -/// @prop {Map} title-color ['grays', 900)] - The dialog title text color. /// @prop {Map} message-color [igx-color: ('grays', 700)] - The dialog message text color. /// @prop {Number} border-radius [2px] - The border radius used for dialog. Can be a fraction between 0 and 1, pixels, or percent. /// @requires {function} extend -/// @requires {Map} $_light-dialog -/// @requires {Map} $_indigo-shape-dialog -$_indigo-dialog: extend( - $_light-dialog, - $_indigo-shape-dialog, +/// @requires {Map} $light-dialog +/// @requires {Map} $indigo-shape-dialog +$indigo-dialog: extend( + $light-dialog, + $indigo-shape-dialog, ( variant: 'indigo-design', - title-color: ( - igx-color: ('grays', 900), - ), - message-color: ( igx-color: ('grays', 700), ), diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_divider.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_divider.scss index 3ea5a0ef5b6..cd580b9cc06 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_divider.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_divider.scss @@ -8,7 +8,7 @@ /// @type {Map} /// @property {Map} color [igx-color: ('grays', 300)] - The color used for the divider. /// @see $default-palette -$_light-divider: ( +$light-divider: ( color: ( igx-color: ('grays', 300) ) @@ -16,19 +16,16 @@ $_light-divider: ( /// Generates a fluent divider schema. /// @type {Map} -/// @requires {function} extend -/// @requires {Map} $_light-divider -$_fluent-divider: extend($_light-divider); +/// @requires {Map} $light-divider +$fluent-divider: $light-divider; /// Generates a bootstrap divider schema. /// @type {Map} /// @requires {function} extend -/// @requires {Map} $_light-divider -$_bootstrap-divider: extend($_light-divider); +$bootstrap-divider: $light-divider; /// Generates an indigo divider schema. /// @type {Map} /// @requires {function} extend -/// @requires {Map} $_light-divider -$_indigo-divider: extend($_light-divider); +$indigo-divider: $light-divider; diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_dock-manager.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_dock-manager.scss index 1952522860e..c854edfe1d0 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_dock-manager.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_dock-manager.scss @@ -1,3 +1,5 @@ +@use '../../../base' as *; + //// /// @group schemas /// @access public @@ -9,7 +11,7 @@ /// @prop {Color} accent-color [null] - Sets the pinned header background color, the joystick background and border colors, as well as the context menu background color. /// @prop {Color} active-color [igx-color: 'primary'] - Sets the active text and border colors for tabs, panes, and menus. /// @prop {Color} background-color [null] - Sets the base dock manager color as well as the pane headers and tabs background colors. -/// @prop {Color} border-color [igx-color: ('primary', 100), rgba: .1, to-opaque: ()] - Sets the global border color in the dock manager. Also sets the pane content background and the context menu active background colors. +/// @prop {Color} border-color [igx-color: ('surface')] - Sets the global border color in the dock manager. Also sets the pane content background and the context menu active background colors. /// @prop {Color} button-text [igx-color: ('grays', 800)] - Sets the button text color. /// @prop {Color} context-menu-background-active [null] - Sets the background color for active context menus. /// @prop {Color} context-menu-background [null] - Sets the background color for context menus. @@ -17,15 +19,15 @@ /// @prop {Color} context-menu-color [null] - Sets the text color for context menus. /// @prop {Color} dock-background [null] - Sets the background color of the dock manager. /// @prop {Color} dock-text [null] - Sets the text color of the dock manager. -/// @prop {Color} drop-shadow-background [igx-color: 'primary', rgba: .2] - Sets the drop-shadow background color. +/// @prop {Color} drop-shadow-background [igx-color: ('primary', 500, .2)] - Sets the drop-shadow background color. /// @prop {Color} floating-pane-border-color [igx-color: 'surface'] - Sets the border color for floating panes. -/// @prop {Color} flyout-shadow-color [rgba(0, 0, 0, .08)] - Sets the flyout shadow color. +/// @prop {Color} flyout-shadow-color [igx-color: ('grays', 900, .8)] - Sets the flyout shadow color. /// @prop {Color} joystick-background [null] - Sets the background color of the joystick. /// @prop {Color} joystick-background-active [null] - Sets the background color of the joysticks. /// @prop {Color} joystick-border-color [igx-color: ('grays', 300)] - Sets the border color of the joystick. /// @prop {Color} joystick-icon-color [igx-color: ('grays', 600)] - Sets the color for the joystick icons. /// @prop {Color} joystick-icon-color-active [igx-contrast-color: 'surface'] - Sets the color of the active joystick icons. -/// @prop {Color} pane-content-background [igx-color: ('primary', 100), rgba: .1, to-opaque: ()] - Sets the background color of the content panes. +/// @prop {Color} pane-content-background [igx-color: ('primary', 100)] - Sets the background color of the content panes. /// @prop {Color} pane-content-text [null] - Sets the text color of the content panes. /// @prop {Color} pane-header-background [null] - Sets the background color for pane headers. /// @prop {Color} pane-header-text [null] - Sets the text color for pane headers. @@ -33,7 +35,7 @@ /// @prop {Color} pinned-header-text [null] - Sets the text colors of pinned headers. /// @prop {Color} splitter-background [igx-color: ('grays', 300)] - Sets the background color for the splitters. /// @prop {Color} splitter-handle [null] - Sets the background color for the splitter handles. -/// @prop {Color} tab-background-active [igx-color: ('primary', 100), rgba: .1, to-opaque: ()] - Sets the background color for active tabs. +/// @prop {Color} tab-background-active [igx-color: ('primary', 100)] - Sets the background color for active tabs. /// @prop {Color} tab-background [null] - Sets the background color for tabs. /// @prop {Color} tab-border-color [null] - Sets the border color for tabs. /// @prop {Color} tab-border-color-active [null] - Sets the border color for active tabs. @@ -41,71 +43,103 @@ /// @prop {Color} tab-text-active [null] - Sets the text color for active tabs. /// @prop {Color} text-color [igx-color: ('grays', 800)] - Sets the text color for most elements in the dock manager. Used as the default joystick icon color. /// @see $default-palette -$_light-dock-manager: ( +$light-dock-manager: ( accent-color: null, + active-color: ( igx-color: primary, ), - background-color: null, + + background-color: ( + igx-color: ('grays', 200) + ), + border-color: ( - igx-color: ('primary', 100), - rgba: .1, - to-opaque: (), + igx-color: ('surface'), ), + button-text: ( igx-color: ('grays', 800), ), + context-menu-background-active: null, + context-menu-background: null, + context-menu-color-active: ( igx-contrast-color: 'surface', ), + context-menu-color: null, - dock-background: null, + + dock-background: ( + igx-color: ('grays', 50) + ), + dock-text: null, + drop-shadow-background: ( - igx-color: ('primary', 500), - rgba: .2 + igx-color: ('primary', 900, .1), ), + floating-pane-border-color: ( igx-color: 'surface', ), - flyout-shadow-color: rgba(0, 0, 0, .08), + + flyout-shadow-color: ( + igx-color: ('grays', 900, .1) + ), + joystick-background-active: null, + joystick-background: null, + joystick-border-color: ( igx-color: ('grays', 300), ), + joystick-icon-color: ( igx-color: ('grays', 600), ), + joystick-icon-color-active: ( igx-contrast-color: 'surface', ), + pane-content-background: ( - igx-color: ('primary', 100), - rgba: .1, - to-opaque: (), + igx-color: ('surface'), ), + pane-content-text: null, - pane-header-background: null, + + pane-header-background: ( + igx-color: ('grays', 200) + ), + pane-header-text: null, - pinned-header-background: null, + + pinned-header-background: ( + igx-color: ('grays', 50) + ), + pinned-header-text: null, + splitter-background: ( igx-color: ('grays', 300), ), + splitter-handle: null, + tab-background-active: ( - igx-color: ('primary', 100), - rgba: .1, - to-opaque: (), + igx-color: ('surface'), ), + tab-background: null, tab-border-color-active: null, tab-border-color: null, tab-text-active: null, tab-text: null, + text-color: ( igx-color: ('grays', 800), ), @@ -113,106 +147,87 @@ $_light-dock-manager: ( /// Generates a fluent dock-manager schema. /// @type {Map} -/// @prop {Color} background-color [igx-color: ('grays', 50), to-opaque: ()] - Sets the base dock manager color as well as the pane headers and tabs background colors. -/// @prop {Color} border-color [igx-color: 'surface'] - Sets the global border color in the dock manager. Also sets the pane content background and the context menu active background colors. -/// @prop {Color} context-menu-background-active [igx-color: ('grays', 200), to-opaque: ()] - Sets the background color for active context menus. +/// @prop {Color} context-menu-background-active [igx-color: ('grays', 200)] - Sets the background color for active context menus. /// @prop {Color} context-menu-color-active [igx-color: ('grays', 800)] - Sets the text color for active context menus. /// @prop {Color} context-menu-color [igx-color: ('grays', 800)] - Sets the text color for active context menus. -/// @prop {Color} dock-background [igx-color: ('grays', 50), to-opaque: ()] - Sets the background color of the dock manager. -/// @prop {Color} floating-pane-border-color [igx-color: ('grays', 400), to-opaque: ()] - Sets the border color for floating panes. -/// @prop {Color} joystick-background-active [igx-color: ('grays', 200), to-opaque: ()] - Sets the background color of the joysticks. -/// @prop {Color} joystick-border-color [igx-color: ('grays', 400), to-opaque: ()] - Sets the border color of the joystick. +/// @prop {Color} floating-pane-border-color [igx-color: ('grays', 400)] - Sets the border color for floating panes. +/// @prop {Color} joystick-background-active [igx-color: ('grays', 200)] - Sets the background color of the joysticks. +/// @prop {Color} joystick-border-color [igx-color: ('grays', 400)] - Sets the border color of the joystick. /// @prop {Color} joystick-icon-color [igx-color: ('grays', 800)] - Sets the color for the joystick icons. /// @prop {Color} joystick-icon-color-active [igx-color: ('grays', 800)] - Sets the color of the active joystick icons. -/// @prop {Color} pane-content-background [igx-color: 'surface'] - Sets the background color of the content panes. -/// @prop {Color} pane-header-background [igx-color: ('grays', 50), to-opaque: ()] - Sets the background color for pane headers. -/// @prop {Color} splitter-background [igx-color: ('grays', 100), to-opaque: ()] - Sets the background color for the splitters. -/// @prop {Color} splitter-handle [igx-color: ('grays', 400), rgba: .2, to-opaque: ()] - Sets the background color for the splitter handles. -/// @prop {Color} tab-background-active [igx-color: 'surface'] - Sets the background color for active tabs. +/// @prop {Color} pane-header-background [igx-color: ('grays', 100)] - Sets the background color for pane headers. +/// @prop {Color} splitter-background [igx-color: ('grays', 100) - Sets the background color for the splitters. +/// @prop {Color} splitter-handle [igx-color: ('grays', 400)] - Sets the background color for the splitter handles. /// @prop {Color} tab-background [igx-color: 'surface'] - Sets the background color for tabs. /// @prop {Color} tab-border-color [igx-color: 'surface'] - Sets the border color for tabs. /// @prop {Color} tab-border-color-active [igx-color: 'surface'] - Sets the border color for active tabs. -/// @prop {Color} tab-text-active [igx-color: 'surface'] - Sets the text color for active tabs. +/// @prop {Color} tab-text-active [igx-color: 'primary'] - Sets the text color for active tabs. /// @prop {Color} tab-text [igx-color: ('grays', 700)] - Sets the text color for tabs. /// @requires {function} extend -/// @requires {Map} $_light-dock-manager -$_fluent-dock-manager: extend( - $_light-dock-manager, +/// @requires {Map} $light-dock-manager +$fluent-dock-manager: extend( + $light-dock-manager, ( - background-color: ( - igx-color: ('grays', 50), - to-opaque: (), - ), - border-color: ( - igx-color: 'surface', - ), context-menu-background-active: ( igx-color: ('grays', 200), - to-opaque: (), ), + context-menu-color-active: ( igx-color: ('grays', 800), ), + context-menu-color: ( igx-color: ('grays', 800), ), - dock-background: ( - igx-color: ('grays', 50), - to-opaque: (), - ), + floating-pane-border-color: ( igx-color: ('grays', 400), - to-opaque: (), ), + joystick-background-active: ( igx-color: ('grays', 200), - to-opaque: (), ), + joystick-border-color: ( igx-color: ('grays', 400), - to-opaque: (), ), + joystick-icon-color: ( igx-color: ('grays', 800), ), + joystick-icon-color-active: ( igx-color: ('grays', 800), ), - pane-content-background: ( - igx-color: 'surface', - ), + pane-header-background: ( - igx-color: ('grays', 50), - to-opaque: (), - ), - pinned-header-background: ( - igx-color: ('grays', 50), - to-opaque: (), + igx-color: ('grays', 100), ), + splitter-background: ( igx-color: ('grays', 100), - to-opaque: (), ), + splitter-handle: ( igx-color: ('grays', 400), - rgba: .2, - to-opaque: (), - ), - tab-background-active: ( - igx-color: 'surface', ), + tab-background: ( igx-color: 'surface', ), + tab-border-color-active: ( igx-color: 'surface', ), + tab-border-color: ( igx-color: 'surface', ), + tab-text-active: ( igx-color: 'primary', ), + tab-text: ( igx-color: ('grays', 700) ), @@ -221,99 +236,97 @@ $_fluent-dock-manager: extend( /// Generates a bootstrap dock-manager schema. /// @type {Map} -/// @prop {Color} background-color [igx-color: ('grays', 100), to-opaque: ()] - Sets the base dock manager color as well as the pane headers and tabs background colors. -/// @prop {Color} border-color [igx-color: 'surface'] - Sets the global border color in the dock manager. Also sets the pane content background and the context menu active background colors. /// @prop {Color} button-text [igx-color: 'primary'] - Sets the button text color. +/// @prop {Color} context-menu-background [igx-color: 'surface'] - Sets the background color for context menus. /// @prop {Color} context-menu-background-active [igx-color: 'primary'] - Sets the background color for active context menus. /// @prop {Color} context-menu-color-active [igx-color: 'surface'] - Sets the text color for active context menus. /// @prop {Color} context-menu-color [igx-color: 'primary'] - Sets the text color for context menus. -/// @prop {Color} dock-background [igx-color: ('grays', 100), to-opaque: ()] - Sets the background color of the dock manager. +/// @prop {Color} dock-background [igx-color: ('grays', 100)] - Sets the background color of the dock manager. /// @prop {Color} floating-pane-border-color [igx-color: ('grays', 300)] - Sets the border color for floating panes. /// @prop {Color} joystick-background-active [igx-color: 'primary'] - Sets the background color of the joysticks. /// @prop {Color} joystick-icon-color [igx-color: 'primary'] - Sets the color for the joystick icons. -/// @prop {Color} pane-content-background [igx-color: 'surface'] - Sets the background color of the content panes. -/// @prop {Color} pane-header-background [igx-color: ('grays', 100), to-opaque: ()] - Sets the background color for pane headers. -/// @prop {Color} pinned-header-background [igx-color: ('grays', 100), to-opaque: ()] - Sets the background colors of pinned headers. -/// @prop {Color} splitter-background [igx-color: ('grays', 200), to-opaque: ()] - Sets the background color for the splitters. -/// @prop {Color} splitter-handle [igx-color: ('grays', 400), rgba: .2, to-opaque: ()] - Sets the background color for the splitter handles. -/// @prop {Color} tab-background-active [igx-color: 'surface'] - Sets the background color for active tabs. +/// @prop {Color} pane-header-background [igx-color: ('grays', 100)] - Sets the background color for pane headers. +/// @prop {Color} pinned-header-background [igx-color: ('grays', 100)] - Sets the background colors of pinned headers. +/// @prop {Color} splitter-background [igx-color: ('grays', 200)] - Sets the background color for the splitters. +/// @prop {Color} splitter-handle [igx-color: ('grays', 400)] - Sets the background color for the splitter handles. /// @prop {Color} tab-background [igx-color: 'surface'] - Sets the background color for tabs. /// @prop {Color} tab-border-color-active [igx-color: ('grays', 300)] - Sets the border color for active tabs. /// @prop {Color} tab-border-color [igx-color: 'surface'] - Sets the border color for tabs. /// @prop {Color} tab-text-active [igx-color: ('grays', 800)] - Sets the text color for active tabs. /// @prop {Color} tab-text [igx-color: 'primary'] - Sets the text color for tabs. /// @requires {function} extend -/// @requires {Map} $_light-dock-manager -$_bootstrap-dock-manager: extend( - $_light-dock-manager, +/// @requires {Map} $light-dock-manager +$bootstrap-dock-manager: extend( + $light-dock-manager, ( - background-color: ( - igx-color: ('grays', 100), - to-opaque: (), - ), - border-color: ( - igx-color: 'surface', - ), button-text: ( igx-color: 'primary', ), + + context-menu-background: ( + igx-color: 'surface', + ), + context-menu-background-active: ( igx-color: 'primary', ), + context-menu-color-active: ( igx-color: 'surface', ), + context-menu-color: ( igx-color: 'primary', ), + dock-background: ( igx-color: ('grays', 100), - to-opaque: (), ), + floating-pane-border-color: ( igx-color: ('grays', 300), ), + joystick-background-active: ( igx-color: 'primary', ), + joystick-icon-color: ( igx-color: 'primary', ), - pane-content-background: ( - igx-color: 'surface', - ), + pane-header-background: ( igx-color: ('grays', 100), - to-opaque: (), ), + pinned-header-background: ( igx-color: ('grays', 100), - to-opaque: (), ), + splitter-background: ( igx-color: ('grays', 200), - to-opaque: (), ), + splitter-handle: ( igx-color: ('grays', 400), - rgba: .2, - to-opaque: (), - ), - tab-background-active: ( - igx-color: 'surface', ), + tab-background: ( igx-color: 'surface', ), + tab-border-color-active: ( igx-color: ('grays', 300) ), + tab-border-color: ( igx-color: 'surface', ), + tab-text-active: ( igx-color: ('grays', 800) ), + tab-text: ( igx-color: 'primary', ), @@ -322,8 +335,7 @@ $_bootstrap-dock-manager: extend( /// Generates a light indigo dock-manager schema. /// @type Map -/// @prop {Color} background-color [igx-color: ('grays', 100), to-opaque: (igx-color: 'surface')] - Sets the base dock manager color as well as the pane headers and tabs background colors. -/// @prop {Color} border-color [igx-color: 'surface'] - Sets the global border color in the dock manager. Also sets the pane content background and the context menu active background colors. +/// @prop {Color} background-color [igx-color: ('grays', 100)] - Sets the base dock manager color as well as the pane headers and tabs background colors. /// @prop {Color} button-text [igx-color: 'primary'] - Sets the button text color. /// @prop {Color} context-menu-background-active [igx-color: 'primary'] - Sets the background color for active context menus. /// @prop {Color} context-menu-color-active [igx-contrast-color: 'primary'] - Sets the text color for active context menus. @@ -333,89 +345,77 @@ $_bootstrap-dock-manager: extend( /// @prop {Color} joystick-border-color [igx-color: ('primary', 50)] - Sets the border color of the joystick. /// @prop {Color} joystick-icon-color [igx-color: 'primary'] - Sets the color for the joystick icons. /// @prop {Color} joystick-icon-color-active [igx-contrast-color: 'primary'] - Sets the color of the active joystick icons. -/// @prop {Color} pane-content-background [igx-color: 'surface'] - Sets the background color of the content panes. -/// @prop {Color} pinned-header-background [igx-color: ('grays', 100), to-opaque: (igx-color: 'surface')] - Sets the background colors of pinned headers. -/// @prop {Color} splitter-background [igx-color: ('grays',300), to-opaque: (igx-color: 'surface')] - Sets the background color for the splitters. +/// @prop {Color} pinned-header-background [igx-color: ('grays', 100)] - Sets the background colors of pinned headers. /// @prop {Color} splitter-handle [igx-color: 'surface'] - Sets the background color for the splitter handles. -/// @prop {Color} tab-background-active [igx-color: 'surface'] - Sets the background color for active tabs. -/// @prop {Color} tab-background [igx-color: ('grays', 100), to-opaque: (igx-color: 'surface')] - Sets the background color for tabs. +/// @prop {Color} tab-background [igx-color: ('grays', 100)] - Sets the background color for tabs. /// @prop {Color} tab-text-active [igx-color: ('grays', 900)] - Sets the text color for active tabs. /// @prop {Color} tab-text [igx-color: ('grays', 700)] - Sets the text color for tabs. /// @prop {Color} text-color [igx-color: ('grays', 900)] - Sets the text color for most elements in the dock manager. Used as the default joystick icon color. /// @requires {function} extend -/// @requires {Map} $_light-dock-manager -$_indigo-dock-manager: extend( - $_light-dock-manager, +/// @requires {Map} $light-dock-manager +$indigo-dock-manager: extend( + $light-dock-manager, ( background-color: ( igx-color: ('grays', 100), - to-opaque: ( - igx-color: 'surface', - ) - ), - border-color: ( - igx-color: 'surface', ), + button-text: ( igx-color: 'primary', ), + context-menu-background-active: ( igx-color: 'primary', ), + context-menu-color-active: ( igx-contrast-color: 'primary', ), + context-menu-color: ( igx-color: ('grays', 700), ), + joystick-background: ( igx-color: ('primary', 50), ), + joystick-background-active: ( igx-color: 'primary', ), + joystick-border-color: ( igx-color: ('primary', 50), ), + joystick-icon-color: ( igx-color: 'primary', ), + joystick-icon-color-active: ( igx-contrast-color: 'primary', ), - pane-content-background: ( - igx-color: 'surface', - ), + pinned-header-background: ( igx-color: ('grays', 100), - to-opaque: ( - igx-color: 'surface', - ) - ), - splitter-background: ( - igx-color: ('grays',300), - to-opaque: ( - igx-color: 'surface', - ) ), + splitter-handle: ( igx-color: 'surface', ), - tab-background-active: ( - igx-color: 'surface', - ), + tab-background: ( igx-color: ('grays', 100), - to-opaque: ( - igx-color: 'surface', - ) ), + tab-text-active: ( igx-color: ('grays', 900), ), + tab-text: ( igx-color: ('grays', 700), ), + text-color: ( igx-color: ('grays', 900), ), diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_doughnut-chart.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_doughnut-chart.scss index 9d0c5282d6b..71c5b45a2ac 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_doughnut-chart.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_doughnut-chart.scss @@ -17,36 +17,34 @@ /// @property {Color} selected-slice-stroke [null] - Sets the stroke color of the selected slice. /// @property {Number} selected-slice-stroke-thickness [null] - Sets the stroke thickness of the selected slice. /// @see $default-palette -$_light-doughnut-chart: extend( - ( - 'brushes': series, - 'outlines': series, - 'others-category-fill': null, - 'others-category-opacity': null, - 'others-category-stroke': null, - 'others-category-stroke-thickness': null, - 'selected-slice-fill': null, - 'selected-slice-opacity': null, - 'selected-slice-stroke': null, - 'selected-slice-stroke-thickness': null, - ) +$light-doughnut-chart: ( + 'brushes': series, + 'outlines': series, + 'others-category-fill': null, + 'others-category-opacity': null, + 'others-category-stroke': null, + 'others-category-stroke-thickness': null, + 'selected-slice-fill': null, + 'selected-slice-opacity': null, + 'selected-slice-stroke': null, + 'selected-slice-stroke-thickness': null, ); /// Generates a fluent doughnut-chart schema. /// @type {Map} /// @requires {function} extend -/// @requires {Map} $_light-doughnut-chart -$_fluent-doughnut-chart: extend($_light-doughnut-chart); +/// @requires {Map} $light-doughnut-chart +$fluent-doughnut-chart: $light-doughnut-chart; /// Generates a bootstrap doughnut-chart schema. /// @type {Map} /// @requires {function} extend -/// @requires {Map} $_light-doughnut-chart -$_bootstrap-doughnut-chart: extend($_light-doughnut-chart); +/// @requires {Map} $light-doughnut-chart +$bootstrap-doughnut-chart: $light-doughnut-chart; /// Generates an indigo doughnut-chart schema. /// @type {Map} /// @requires {function} extend -/// @requires {Map} $_light-doughnut-chart -$_indigo-doughnut-chart: extend($_light-doughnut-chart); +/// @requires {Map} $light-doughnut-chart +$indigo-doughnut-chart: $light-doughnut-chart; diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_drop-down.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_drop-down.scss index 07e52dbd674..1c895e5cafc 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_drop-down.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_drop-down.scss @@ -1,5 +1,6 @@ -@import '../shape/drop-down'; -@import '../elevation/drop-down'; +@use '../../../base' as *; +@use '../shape/drop-down' as *; +@use '../elevation/drop-down' as *; //// /// @group schemas @@ -11,11 +12,11 @@ /// @type {Map} /// @prop {Map} background-color [igx-color: 'surface'] - The drop-down background color. /// @prop {Map} header-text-color [igx-color: ('secondary', 500)] - The drop-down header text color. -/// @prop {Map} item-text-color [igx-color: 'surface', text-contrast: (), rgba: .74] - The drop-down text color. -/// @prop {Map} hover-item-text-color [igx-color: 'surface', text-contrast: (), rgba: .74] - The drop-down hover text color. -/// @prop {Map} hover-item-background [igx-color: 'surface', text-contrast: (), rgba: .04] - The drop-down hover item background color. -/// @prop {Map} focused-item-background [igx-color: 'surface', text-contrast: (), rgba: .04] - The drop-down focused item background color. -/// @prop {Map} focused-item-text-color [igx-color: 'surface', text-contrast: (), rgba: .74] - The drop-down focused item text color. +/// @prop {Map} item-text-color [igx-color: ('grays', 800)] - The drop-down text color. +/// @prop {Map} hover-item-text-color [igx-color: ('grays', 800)] - The drop-down hover text color. +/// @prop {Map} hover-item-background [igx-color: ('grays', 100, .8)4] - The drop-down hover item background color. +/// @prop {Map} focused-item-background [igx-color: ('grays', 100, .8)] - The drop-down focused item background color. +/// @prop {Map} focused-item-text-color [igx-color: ('grays', 800)] - The drop-down focused item text color. /// @prop {Map} selected-item-background [igx-color: ('secondary', 100)] - The drop-down selected item background color. /// @prop {Map} selected-item-text-color [igx-contrast-color: ('secondary', 100)] - The drop-down selected item text color. /// @prop {Map} selected-hover-item-background [igx-color: ('secondary', 200)] - The drop-down selected item hover background color. @@ -30,12 +31,12 @@ /// @prop {Number} border-radius [.2] - The border radius used for drop-down component. Can be a fraction between 0 and 1, pixels, or percent. /// @prop {Number} item-border-radius [0] - The border radius used for the drop-down items. Can be a fraction between 0 and 1, pixels, or percent. /// @requires {function} extend -/// @requires {Map} $_default-shape-drop-down -/// @requires {Map} $_default-elevation-drop-down +/// @requires {Map} $default-shape-drop-down +/// @requires {Map} $default-elevation-drop-down /// @see $default-palette -$_light-drop-down: extend( - $_default-shape-drop-down, - $_default-elevation-drop-down, +$light-drop-down: extend( + $default-shape-drop-down, + $default-elevation-drop-down, ( background-color: ( igx-color: 'surface' @@ -46,33 +47,23 @@ $_light-drop-down: extend( ), item-text-color: ( - igx-color: 'surface', - text-contrast: (), - rgba: .74 + igx-color: ('grays', 800) ), hover-item-text-color: ( - igx-color: 'surface', - text-contrast: (), - rgba: .74 + igx-color: ('grays', 800) ), hover-item-background: ( - igx-color: 'surface', - text-contrast: (), - rgba: .04 + igx-color: ('grays', 100, .8) ), focused-item-background: ( - igx-color: 'surface', - text-contrast: (), - rgba: .04 + igx-color: ('grays', 100, .8) ), focused-item-text-color: ( - igx-color: 'surface', - text-contrast: (), - rgba: .74 + igx-color: ('grays', 800) ), selected-item-background: ( @@ -99,12 +90,12 @@ $_light-drop-down: extend( igx-contrast-color: ('secondary', 200) ), - disabled-item-background: transparent, + disabled-item-background: ( + igx-color: ('grays', 50, 0) + ), disabled-item-text-color: ( - igx-color: 'surface', - text-contrast: (), - rgba: .38 + igx-color: ('grays', 400) ), border-color: ( @@ -127,13 +118,13 @@ $_light-drop-down: extend( /// @prop {Number} border-radius [2px] - The border radius used for drop-down component. Can be a fraction between 0 and 1, pixels, or percent. /// @prop {Number} item-border-radius [0] - The border radius used for the drop-down items. Can be a fraction between 0 and 1, pixels, or percent. /// @requires {function} extend -/// @requires {Map} $_light-drop-down -/// @requires {Map} $_fluent-shape-drop-down -/// @requires {Map} $_fluent-elevation-drop-down -$_fluent-drop-down: extend( - $_light-drop-down, - $_fluent-shape-drop-down, - $_fluent-elevation-drop-down, +/// @requires {Map} $light-drop-down +/// @requires {Map} $fluent-shape-drop-down +/// @requires {Map} $fluent-elevation-drop-down +$fluent-drop-down: extend( + $light-drop-down, + $fluent-shape-drop-down, + $fluent-elevation-drop-down, ( selected-item-background: ( igx-color: ('grays', 100) @@ -144,7 +135,7 @@ $_fluent-drop-down: extend( ), selected-hover-item-background: ( - igx-color: ('grays', 200) + igx-color: ('grays', 100) ), selected-hover-item-text-color: ( @@ -163,39 +154,33 @@ $_fluent-drop-down: extend( /// Generates a bootstrap drop-down schema. /// @type {Map} -/// @prop {Map} header-text-color [igx-color: ('primary', 500)] - The drop-down header text color. -/// @prop {Color} background-color [#fff] - The drop-down background color. -/// @prop {Color} item-text-color [#212529] - The drop-down text color. -/// @prop {Color} hover-item-text-color [#212529] - The drop-down hover text color. +/// @prop {Map} header-text-color [igx-color: ('grays', 700)] - The drop-down header text color. /// @prop {Map} hover-item-background [igx-color: ('grays', 100)] - The drop-down hover item background color. /// @prop {Map} focused-item-background [igx-color: ('primary', 500)] - The drop-down focused item background color. -/// @prop {Color} focused-item-text-color [#fff] - The drop-down focused item text color. +/// @prop {Map} focused-item-text-color [igx-contrast-color('primary', 600)] - The drop-down focused item text color. /// @prop {Map} selected-item-background [igx-color: ('primary', 500)] - The drop-down selected item background color. -/// @prop {Color} selected-item-text-color [#fff] - The drop-down selected item text color. +/// @prop {Map} selected-item-text-color [igx-contrast-color('primary', 600)] - The drop-down selected item text color. /// @prop {Map} selected-hover-item-background [igx-color: ('primary', 600)] - The drop-down selected item hover background color. -/// @prop {Color} selected-hover-item-text-color [#fff] - The drop-down selected item hover text color. +/// @prop {Map} selected-hover-item-text-color [igx-contrast-color('primary', 600)] - The drop-down selected item hover text color. /// @prop {Map} selected-focus-item-background [igx-color: ('primary', 600)] - The drop-down selected item focus background color. -/// @prop {Color} selected-focus-item-text-color [#fff] - The drop-down selected item focus text color. +/// @prop {Map} selected-focus-item-text-color [igx-contrast-color('primary', 600)] - The drop-down selected item focus text color. /// @prop {Number} elevation [0] - The elevation level, between 0-24, to be used for the drop-down shadow. /// @prop {Number} border-radius [4px] - The border radius used for drop-down component. Can be a fraction between 0 and 1, pixels, or percent. /// @prop {Number} item-border-radius [0] - The border radius used for the drop-down items. Can be a fraction between 0 and 1, pixels, or percent. /// @prop {Number} border-width [1px] - The border width used for drop-down component. /// @requires {function} extend -/// @requires {Map} $_light-drop-down -/// @requires {Map} $_bootstrap-shape-drop-down -/// @requires {Map} $_bootstrap-elevation-drop-down -$_bootstrap-drop-down: extend( - $_light-drop-down, - $_bootstrap-shape-drop-down, - $_bootstrap-elevation-drop-down, +/// @requires {Map} $light-drop-down +/// @requires {Map} $bootstrap-shape-drop-down +/// @requires {Map} $bootstrap-elevation-drop-down +$bootstrap-drop-down: extend( + $light-drop-down, + $bootstrap-shape-drop-down, + $bootstrap-elevation-drop-down, ( header-text-color: ( igx-color: ('grays', 700) ), - background-color: #fff, - - hover-item-background: ( igx-color: ('grays', 100) ), @@ -204,60 +189,66 @@ $_bootstrap-drop-down: extend( igx-color: ('primary', 500) ), - focused-item-text-color: #fff, + focused-item-text-color: ( + igx-contrast-color: ('primary', 600) + ), selected-item-background: ( igx-color: ('primary', 500), ), - selected-item-text-color: #fff, + selected-item-text-color: ( + igx-contrast-color: ('primary', 600) + ), selected-hover-item-background: ( igx-color: ('primary', 600), ), - selected-hover-item-text-color: #fff, + selected-hover-item-text-color: ( + igx-contrast-color: ('primary', 600) + ), selected-focus-item-background: ( igx-color: ('primary', 600), ), - selected-focus-item-text-color: #fff, + selected-focus-item-text-color: ( + igx-contrast-color: ('primary', 600) + ), border-width: 1px, disabled-item-text-color: ( igx-color: ('grays', 400) ), + ) ); /// Generates an indigo drop-down schema. /// @type {Map} /// @prop {Map} header-text-color [igx-color: ('primary', 500)] - The drop-down header text color. -/// @prop {Color} item-text-color [igx-color: 'surface', text-contrast: (), rgba: .62] - The drop-down text color. -/// @prop {Color} hover-item-text-color [igx-color: 'surface', text-contrast: (), rgba: .87] - The drop-down hover text color. -/// @prop {Color} focused-item-text-color [igx-color: 'surface', text-contrast: (), rgba: .87] - The drop-down focused item text color. -/// @prop {Map} hover-item-background [igx-color: ('primary', 500), , rgba: .15] - The drop-down hover item background color. -/// @prop {Map} focused-item-background [igx-color: ('primary', 500), rgba: .15] - The drop-down focused item background color. +/// @prop {Color} item-text-color [igx-color: ('grays', 700)] - The drop-down text color. +/// @prop {Map} hover-item-background [igx-color: ('primary', 500, .15)] - The drop-down hover item background color. +/// @prop {Map} focused-item-background [igx-color: ('primary', 500, .15)] - The drop-down focused item background color. /// @prop {Map} selected-item-background [igx-color: ('primary', 500)] - The drop-down selected item background color. /// @prop {Color} selected-item-text-color [#fff] - The drop-down selected item text color. /// @prop {Map} selected-hover-item-background [igx-color: ('primary', 400)] - The drop-down selected item hover background color. /// @prop {Color} selected-hover-item-text-color [#fff] - The drop-down selected item hover text color. /// @prop {Map} selected-focus-item-background [igx-color: ('primary', 400)] - The drop-down selected item focus background color. /// @prop {Color} selected-focus-item-text-color [#fff] - The drop-down selected item focus text color. -/// @prop {Map} disabled-item-text-color [igx-color: ('grays', 700), rgba: .4] - The drop-down disabled item text color. /// @prop {Number} elevation [3] - The elevation level, between 0-24, to be used for the badge shadow. /// @prop {Number} border-radius [2px] - The border radius used for drop-down component. Can be a fraction between 0 and 1, pixels, or percent. /// @prop {Number} item-border-radius [2px] - The border radius used for the drop-down items. Can be a fraction between 0 and 1, pixels, or percent. /// @requires {function} extend -/// @requires {Map} $_light-drop-down -/// @requires {Map} $_indigo-shape-drop-down -/// @requires {Map} $_indigo-elevation-drop-down -$_indigo-drop-down: extend( - $_light-drop-down, - $_indigo-shape-drop-down, - $_indigo-elevation-drop-down, +/// @requires {Map} $light-drop-down +/// @requires {Map} $indigo-shape-drop-down +/// @requires {Map} $indigo-elevation-drop-down +$indigo-drop-down: extend( + $light-drop-down, + $indigo-shape-drop-down, + $indigo-elevation-drop-down, ( variant: 'indigo-design', @@ -266,31 +257,15 @@ $_indigo-drop-down: extend( ), item-text-color: ( - igx-color: 'surface', - text-contrast: (), - rgba: .62 - ), - - hover-item-text-color: ( - igx-color: 'surface', - text-contrast: (), - rgba: .87 - ), - - focused-item-text-color: ( - igx-color: 'surface', - text-contrast: (), - rgba: .87 + igx-color: ('grays', 700) ), hover-item-background: ( - igx-color: ('primary', 500), - rgba: .15 + igx-color: ('primary', 500, .15), ), focused-item-background: ( - igx-color: ('primary', 500), - rgba: .15 + igx-color: ('primary', 500, .15), ), selected-item-background: ( @@ -316,11 +291,5 @@ $_indigo-drop-down: extend( selected-focus-item-text-color: ( igx-contrast-color: ('primary', 400), ), - - disabled-item-text-color: ( - igx-color: ('grays', 700), - rgba: .4 - ), ) ); - diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_expansion-panel.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_expansion-panel.scss index a65b8adb9e9..55062d644e3 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_expansion-panel.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_expansion-panel.scss @@ -1,4 +1,5 @@ -@import '../shape/expansion-panel'; +@use '../../../base' as *; +@use '../shape/expansion-panel' as *; //// /// @group schemas @@ -8,8 +9,8 @@ /// Generates a light expansion panel schema. /// @type {Map} -/// @prop {Color} header-background [#fff] - The panel header background color. -/// @prop {Color} body-background [#fff] - The panel body background color. +/// @prop {Map} header-background [igx-color: ('surface')] - The panel header background color. +/// @prop {Map} body-background [igx-color: ('surface')] - The panel body background color. /// @prop {Map} header-focus-background [igx-color: ('grays', 100)] - The panel header focus background color. /// @prop {Map} header-title-color [igx-color: ('grays', 800)] - The panel header title text color. /// @prop {Map} header-description-color [igx-color: ('grays', 600)] - The panel header description text color. @@ -20,13 +21,18 @@ /// @prop {Number} expanded-margin [8px] - The expansion panel margin in expanded state when positioned inside accordion. /// /// @requires {function} extend -/// @requires {Map} $_default-shape-expansion-panel +/// @requires {Map} $default-shape-expansion-panel /// @see $default-palette -$_light-expansion-panel: extend( - $_default-shape-expansion-panel, +$light-expansion-panel: extend( + $default-shape-expansion-panel, ( - header-background: #fff, - body-background: #fff, + header-background: ( + igx-color: ('surface') + ), + + body-background: ( + igx-color: ('surface') + ), header-focus-background: ( igx-color: ('grays', 100) @@ -59,20 +65,23 @@ $_light-expansion-panel: extend( /// Generates a fluent expansion panel schema. /// @type {Map} /// @requires {function} extend -/// @requires {Map} $_light-expansion-panel -$_fluent-expansion-panel: extend($_light-expansion-panel); +/// @requires {Map} $light-expansion-panel +$fluent-expansion-panel: extend($light-expansion-panel); /// Generates a bootstrap expansion panel schema. /// @type {Map} /// @prop {Number} border-radius [0] - The border radius used for expansion-panel. Can be a fraction between 0 and 1, pixels, or percent. /// @requires {function} extend -/// @requires {Map} $_light-expansion-panel -/// @requires {Map} $_bootstrap-shape-expansion-panel -$_bootstrap-expansion-panel: extend($_light-expansion-panel, $_bootstrap-shape-expansion-panel); +/// @requires {Map} $light-expansion-panel +/// @requires {Map} $bootstrap-shape-expansion-panel +$bootstrap-expansion-panel: extend( + $light-expansion-panel, + $bootstrap-shape-expansion-panel +); // Generates an indigo expansion panel schema. /// @type {Map} -/// @prop {Map} header-focus-background [igx-color: ('primary', 500), rgba: .15] - The panel header focus background color. +/// @prop {Map} header-focus-background [igx-color: ('primary', 500, .15)] - The panel header focus background color. /// @prop {Map} header-title-color [igx-color: ('grays', 900)] - The panel header title text color. /// @prop {Map} header-description-color [igx-color: ('grays', 700)] - The panel header description text color. /// @prop {Map} header-icon-color [igx-color: ('grays', 600)] - The panel header icon color. @@ -80,11 +89,11 @@ $_bootstrap-expansion-panel: extend($_light-expansion-panel, $_bootstrap-shape-e /// @prop {Number} border-radius [3px] - The border radius used for expansion-panel. Can be a fraction between 0 and 1, pixels, or percent. /// /// @requires {function} extend -/// @requires {Map} $_light-expansion-panel -/// @requires {Map} $_indigo-shape-expansion-panel -$_indigo-expansion-panel: extend( - $_light-expansion-panel, - $_indigo-shape-expansion-panel, +/// @requires {Map} $light-expansion-panel +/// @requires {Map} $indigo-shape-expansion-panel +$indigo-expansion-panel: extend( + $light-expansion-panel, + $indigo-shape-expansion-panel, ( header-title-color: ( igx-color: ('grays', 900) @@ -99,8 +108,7 @@ $_indigo-expansion-panel: extend( ), header-focus-background: ( - igx-color: ('primary', 500), - rgba: .15 + igx-color: ('primary', 500, .15), ), disabled-color: ( diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_financial-chart.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_financial-chart.scss index 412acb37864..09045682343 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_financial-chart.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_financial-chart.scss @@ -1,3 +1,5 @@ +@use '../../../base' as *; + //// /// @group schemas /// @access public @@ -65,81 +67,76 @@ /// @prop {String} zoom-slider-x-axis-major-stroke [null] - Gets or sets stroke brush of major gridlines on x-axis of the zoom slider pane. /// @prop {Number} zoom-slider-x-axis-major-stroke-thickness [null] - Gets or sets thickness of major gridlines on x-axis of the zoom slider pane. /// @see $default-palette -$_light-financial-chart: extend( - ( - 'margin': null, - 'title-alignment': null, - 'title-text-color': null, - 'title-margin': null, - 'subtitle-text-color': null, - 'subtitle-margin': null, - 'subtitle-alignment': null, - 'brushes': series, - 'outlines': series, - 'marker-brushes': series, - 'marker-outlines': series, - 'plot-area-background': null, - 'indicator-brushes': series, - 'indicator-negative-brushes': series, - 'indicator-thickness': null, - 'negative-brushes': series, - 'negative-outlines': series, - 'overlay-brushes': series, - 'overlay-outlines': series, - 'overlay-thickness': series, - 'thickness': null, - 'toolbar-height': null, - 'trend-line-brushes': series, - 'trend-line-thickness': null, - 'volume-brushes': series, - 'volume-outlines': series, - 'volume-thickness': null, - 'x-axis-label-margin': null, - 'x-axis-label-text-color': null, - 'x-axis-label-vertical-alignment': null, - 'x-axis-major-stroke': null, - 'x-axis-major-stroke-thickness': null, - 'x-axis-minor-stroke': null, - 'x-axis-minor-stroke-thickness': null, - 'x-axis-strip': null, - 'x-axis-stroke': null, - 'x-axis-stroke-thickness': null, - 'x-axis-title-alignment': null, - 'x-axis-title-margin': null, - 'x-axis-title-text-color': null, - 'y-axis-label-margin': null, - 'y-axis-label-text-color': null, - 'y-axis-label-vertical-alignment': null, - 'y-axis-major-stroke': null, - 'y-axis-major-stroke-thickness': null, - 'y-axis-minor-stroke': null, - 'y-axis-minor-stroke-thickness': null, - 'y-axis-strip': null, - 'y-axis-stroke': null, - 'y-axis-stroke-thickness': null, - 'y-axis-title-alignment': null, - 'y-axis-title-margin': null, - 'y-axis-title-text-color': null, - 'zoom-slider-x-axis-major-stroke': null, - 'zoom-slider-x-axis-major-stroke-thickness': null - ) +$light-financial-chart: ( + 'margin': null, + 'title-alignment': null, + 'title-text-color': null, + 'title-margin': null, + 'subtitle-text-color': null, + 'subtitle-margin': null, + 'subtitle-alignment': null, + 'brushes': series, + 'outlines': series, + 'marker-brushes': series, + 'marker-outlines': series, + 'plot-area-background': null, + 'indicator-brushes': series, + 'indicator-negative-brushes': series, + 'indicator-thickness': null, + 'negative-brushes': series, + 'negative-outlines': series, + 'overlay-brushes': series, + 'overlay-outlines': series, + 'overlay-thickness': series, + 'thickness': null, + 'toolbar-height': null, + 'trend-line-brushes': series, + 'trend-line-thickness': null, + 'volume-brushes': series, + 'volume-outlines': series, + 'volume-thickness': null, + 'x-axis-label-margin': null, + 'x-axis-label-text-color': null, + 'x-axis-label-vertical-alignment': null, + 'x-axis-major-stroke': null, + 'x-axis-major-stroke-thickness': null, + 'x-axis-minor-stroke': null, + 'x-axis-minor-stroke-thickness': null, + 'x-axis-strip': null, + 'x-axis-stroke': null, + 'x-axis-stroke-thickness': null, + 'x-axis-title-alignment': null, + 'x-axis-title-margin': null, + 'x-axis-title-text-color': null, + 'y-axis-label-margin': null, + 'y-axis-label-text-color': null, + 'y-axis-label-vertical-alignment': null, + 'y-axis-major-stroke': null, + 'y-axis-major-stroke-thickness': null, + 'y-axis-minor-stroke': null, + 'y-axis-minor-stroke-thickness': null, + 'y-axis-strip': null, + 'y-axis-stroke': null, + 'y-axis-stroke-thickness': null, + 'y-axis-title-alignment': null, + 'y-axis-title-margin': null, + 'y-axis-title-text-color': null, + 'zoom-slider-x-axis-major-stroke': null, + 'zoom-slider-x-axis-major-stroke-thickness': null ); /// Generates a fluent financial-chart schema. /// @type {Map} -/// @requires {function} extend -/// @requires {Map} $_light-financial-chart -$_fluent-financial-chart: extend($_light-financial-chart); +/// @requires {Map} $light-financial-chart +$fluent-financial-chart: $light-financial-chart; /// Generates a bootstrap financial-chart schema. /// @type {Map} -/// @requires {function} extend -/// @requires {Map} $_light-financial-chart -$_bootstrap-financial-chart: extend($_light-financial-chart); +/// @requires {Map} $light-financial-chart +$bootstrap-financial-chart: $light-financial-chart; /// Generates an indigo financial-chart schema. /// @type {Map} -/// @requires {function} extend -/// @requires {Map} $_light-financial-chart -$_indigo-financial-chart: extend($_light-financial-chart); +/// @requires {Map} $light-financial-chart +$indigo-financial-chart: $light-financial-chart; diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_funnel-chart.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_funnel-chart.scss index 1c05068e139..5cf9aaf35b0 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_funnel-chart.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_funnel-chart.scss @@ -16,35 +16,33 @@ /// @property {Color} text-color [null] - Sets the Color used for the inner labels. /// @property {String} text-style [null] - Sets the text style for inner labels. /// @see $default-palette -$_light-funnel-chart: extend( - ( - 'brushes': series, - 'outlines': series, - 'outer-label-alignment': null, - 'outer-label-text-color': null, - 'outer-label-text-style': null, - 'outer-label-visibility': null, - 'outline-thickness': null, - 'text-color': null, - 'text-style': null, - ) +$light-funnel-chart: ( + 'brushes': series, + 'outlines': series, + 'outer-label-alignment': null, + 'outer-label-text-color': null, + 'outer-label-text-style': null, + 'outer-label-visibility': null, + 'outline-thickness': null, + 'text-color': null, + 'text-style': null, ); /// Generates a fluent funnel-chart schema. /// @type {Map} /// @requires {function} extend -/// @requires {Map} $_light-funnel-chart -$_fluent-funnel-chart: extend($_light-funnel-chart); +/// @requires {Map} $light-funnel-chart +$fluent-funnel-chart: $light-funnel-chart; /// Generates a bootstrap funnel-chart schema. /// @type {Map} /// @requires {function} extend -/// @requires {Map} $_light-funnel-chart -$_bootstrap-funnel-chart: extend($_light-funnel-chart); +/// @requires {Map} $light-funnel-chart +$bootstrap-funnel-chart: $light-funnel-chart; /// Generates an indigo funnel-chart schema. /// @type {Map} /// @requires {function} extend -/// @requires {Map} $_light-funnel-chart -$_indigo-funnel-chart: extend($_light-funnel-chart); +/// @requires {Map} $light-funnel-chart +$indigo-funnel-chart: $light-funnel-chart; diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_gauge.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_gauge.scss index 342f663838c..47c31f32100 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_gauge.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_gauge.scss @@ -1,3 +1,5 @@ +@use '../../../base' as *; + //// /// @group schemas /// @access public @@ -21,58 +23,56 @@ /// @property {Color} tick-brush [(igx-color: 'surface', rgba: .62)] - Sets the color to use for the major tickmarks. /// @property {Number} tick-stroke-thickness [null] - Sets the stroke thickness to use when rendering ticks. /// @see $default-palette -$_light-gauge: extend( - ( - 'backing-brush': ( - igx-color: 'surface', - darken: 5% - ), +$light-gauge: ( + 'backing-brush': ( + igx-color: 'surface', + darken: 5% + ), - 'backing-outline': ( - igx-color: 'surface', - darken: 8% - ), + 'backing-outline': ( + igx-color: 'surface', + darken: 8% + ), - 'backing-stroke-thickness': null, + 'backing-stroke-thickness': null, - 'font-brush': ( - igx-contrast-color: 'surface', - rgba: .62 - ), + 'font-brush': ( + igx-contrast-color: 'surface', + rgba: .62 + ), - 'minor-tick-brush': ( - igx-contrast-color: 'surface', - rgba: .62 - ), + 'minor-tick-brush': ( + igx-contrast-color: 'surface', + rgba: .62 + ), - 'minor-tick-stroke-thickness': null, + 'minor-tick-stroke-thickness': null, - 'needle-brush': ( - igx-color: 'primary', - ), + 'needle-brush': ( + igx-color: 'primary', + ), - 'needle-outline': ( - igx-color: 'surface', - ), + 'needle-outline': ( + igx-color: 'surface', + ), - 'needle-stroke-thickness': null, + 'needle-stroke-thickness': null, - 'range-brushes': series, + 'range-brushes': series, - 'range-outlines': series, + 'range-outlines': series, - 'scale-brush': ( - igx-color: 'surface', - darken: 8% - ), + 'scale-brush': ( + igx-color: 'surface', + darken: 8% + ), - 'tick-brush': ( - igx-contrast-color: 'surface', - rgba: .62 - ), + 'tick-brush': ( + igx-contrast-color: 'surface', + rgba: .62 + ), - 'tick-stroke-thickness': null - ) + 'tick-stroke-thickness': null ); /// Generates a light linear gauge schema. @@ -85,9 +85,9 @@ $_light-gauge: extend( /// @property {Color} scale-outline [(igx-color: 'surface', darken: 8%)] - Sets the color to use for the outline of the scale. /// @property {Number} scale-stroke-thickness [null] - Sets the stroke thickness of the scale outline. /// @requires {function} extend -/// @requires {Map} $_light-gauge -$_light-linear-gauge: extend( - $_light-gauge, +/// @requires {Map} $light-gauge +$light-linear-gauge: extend( + $light-gauge, ( needle-breadth: null, @@ -113,9 +113,9 @@ $_light-linear-gauge: extend( /// @property {Color} needle-pivot-brush [igx-color: 'primary'] - Sets the color of the needle pivot point. /// @property {Color} needle-pivot-outline [igx-color: 'surface'] - Sets the outline color of the needle pivot point. /// @requires {function} extend -/// @requires {Map} $_light-gauge -$_light-radial-gauge: extend( - $_light-gauge, +/// @requires {Map} $light-gauge +$light-radial-gauge: extend( + $light-gauge, ( needle-pivot-brush: ( igx-color: 'primary', @@ -129,37 +129,31 @@ $_light-radial-gauge: extend( /// Generates a light fluent gauge schemas. /// @type {Map} -/// @requires {function} extend -/// @requires {Map} $_light-linear-gauge -$_fluent-linear-gauge: extend($_light-linear-gauge); +/// @requires {Map} $light-linear-gauge +$fluent-linear-gauge: $light-linear-gauge; /// Generates a light fluent gauge schemas. /// @type {Map} -/// @requires {function} extend -/// @requires {Map} $_light-radial-gauge -$_fluent-radial-gauge: extend($_light-radial-gauge); +/// @requires {Map} $light-radial-gauge +$fluent-radial-gauge: $light-radial-gauge; /// Generates a light bootstrap gauge schemas. /// @type {Map} -/// @requires {function} extend -/// @requires {Map} $_light-linear-gauge -$_bootstrap-linear-gauge: extend($_light-linear-gauge); +/// @requires {Map} $light-linear-gauge +$bootstrap-linear-gauge: $light-linear-gauge; /// Generates a light bootstrap gauge schemas. /// @type {Map} -/// @requires {function} extend -/// @requires {Map} $_light-radial-gauge -$_bootstrap-radial-gauge: extend($_light-radial-gauge); +/// @requires {Map} $light-radial-gauge +$bootstrap-radial-gauge: $light-radial-gauge; /// Generates a light indigo gauge schemas. /// @type {Map} -/// @requires {function} extend -/// @requires {Map} $_light-linear-gauge -$_indigo-linear-gauge: extend($_light-linear-gauge); +/// @requires {Map} $light-linear-gauge +$indigo-linear-gauge: $light-linear-gauge; /// Generates a light indigo gauge schemas. /// @type {Map} -/// @requires {function} extend -/// @requires {Map} $_light-radial-gauge -$_indigo-radial-gauge: extend($_light-radial-gauge); +/// @requires {Map} $light-radial-gauge +$indigo-radial-gauge: $light-radial-gauge; diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_geo-map.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_geo-map.scss index 5c404c7fe3b..b14831f16ee 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_geo-map.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_geo-map.scss @@ -8,29 +8,27 @@ /// @type {Map} /// @prop {String} plot-area-background [null]- Gets or sets the brush used as the background for the current Map object's plot area. /// @see $default-palette -$_light-geo-map: extend( - ( - 'plot-area-background': ( - igx-color: 'surface' - ) +$light-geo-map: ( + 'plot-area-background': ( + igx-color: 'surface' ) ); /// Generates a fluent geo map schema. /// @type {Map} /// @requires {function} extend -/// @requires {Map} $_light-geo-map -$_fluent-geo-map: extend($_light-geo-map); +/// @requires {Map} $light-geo-map +$fluent-geo-map: $light-geo-map; /// Generates a bootstrap geo map schema. /// @type {Map} /// @requires {function} extend -/// @requires {Map} $_light-geo-map -$_bootstrap-geo-map: extend($_light-geo-map); +/// @requires {Map} $light-geo-map +$bootstrap-geo-map: $light-geo-map; /// Generates an indigo geo map schema. /// @type {Map} /// @requires {function} extend -/// @requires {Map} $_light-geo-map -$_indigo-geo-map: extend($_light-geo-map); +/// @requires {Map} $light-geo-map +$indigo-geo-map: $light-geo-map; diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_graph.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_graph.scss index 1cdc71da777..d64c9373033 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_graph.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_graph.scss @@ -1,3 +1,5 @@ +@use '../../../base' as *; + //// /// @group schemas /// @access public @@ -27,69 +29,64 @@ /// @prop {Color} value-outline [null] - Sets the brush to use for the outline of actual value element. /// @prop {Number} value-stroke-thickness [null] - Sets the stroke thickness to use when rendering single actual value element. /// @see $default-palette -$_light-graph: extend( - ( - 'backing-brush': ( - igx-color: 'surface', - darken: 5% - ), - 'backing-outline': ( - igx-color: 'surface', - darken: 8% - ), - 'backing-stroke-thickness': null, - 'font-brush': ( - igx-contrast-color: 'surface', - rgba: .62 - ), - 'minor-tick-brush': ( - igx-contrast-color: 'surface', - rgba: .62 - ), - 'minor-tick-thickness': null, - 'range-brushes': series, - 'range-outlines': series, - 'scale-background-brush': ( - igx-color: 'primary', - ), - 'scale-background-outline': ( - igx-color: 'surface', - ), - 'scale-background-thickness': null, - 'target-value-breadth': null, - 'target-value-brush': ( - igx-color: ('grays', 800), - ), - 'target-value-outline': null, - 'target-value-thickness': null, - 'tick-brush': ( - igx-contrast-color: 'surface', - rgba: .62 - ), - 'tick-stroke-thickness': null, - 'value-brush': ( - igx-color: ('grays', 800), - ), - 'value-outline': null, - 'value-stroke-thickness': null, - ) +$light-graph: ( + 'backing-brush': ( + igx-color: 'surface', + darken: 5% + ), + 'backing-outline': ( + igx-color: 'surface', + darken: 8% + ), + 'backing-stroke-thickness': null, + 'font-brush': ( + igx-contrast-color: 'surface', + rgba: .62 + ), + 'minor-tick-brush': ( + igx-contrast-color: 'surface', + rgba: .62 + ), + 'minor-tick-thickness': null, + 'range-brushes': series, + 'range-outlines': series, + 'scale-background-brush': ( + igx-color: 'primary', + ), + 'scale-background-outline': ( + igx-color: 'surface', + ), + 'scale-background-thickness': null, + 'target-value-breadth': null, + 'target-value-brush': ( + igx-color: ('grays', 800), + ), + 'target-value-outline': null, + 'target-value-thickness': null, + 'tick-brush': ( + igx-contrast-color: 'surface', + rgba: .62 + ), + 'tick-stroke-thickness': null, + 'value-brush': ( + igx-color: ('grays', 800), + ), + 'value-outline': null, + 'value-stroke-thickness': null, ); /// Generates a fluent graph schema. /// @type {Map} -/// @requires {function} extend -/// @requires {Map} $_light-graph -$_fluent-graph: extend($_light-graph); +/// @requires {Map} $light-graph +$fluent-graph: $light-graph; /// Generates a bootstrap graph schema. /// @type {Map} -/// @requires {function} extend -/// @requires {Map} $_light-graph -$_bootstrap-graph: extend($_light-graph); +/// @requires {Map} $light-graph +$bootstrap-graph: $light-graph; /// Generates an indigo graph schema. /// @type {Map} -/// @requires {function} extend -/// @requires {Map} $_light-graph -$_indigo-graph: extend($_light-graph); +/// @requires {Map} $light-graph +$indigo-graph: $light-graph; diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_grid-filtering.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_grid-filtering.scss index e467211e578..2a4cd73dc95 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_grid-filtering.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_grid-filtering.scss @@ -1,3 +1,5 @@ +@use '../../../base' as *; + //// /// @group schemas /// @access public @@ -19,7 +21,7 @@ /// @prop {Map} menu-text-color [igx-color: ('grays', 900)] - The idle menu text color. /// @prop {Map} menu-button-text-color [igx-color: ('secondary', 500)] - The menu button text color. /// @see $default-palette -$_light-grid-filtering: ( +$light-grid-filtering: ( menu-background: #fff, toggle-background: transparent, toggle-filtered-background: transparent, @@ -56,9 +58,9 @@ $_light-grid-filtering: ( /// @type {Map} /// @prop {Map} menu-background [igx-color: 'surface'] - The idle menu background color. /// @requires {function} extend -/// @requires {Map} $_light-grid-filtering -$_fluent-grid-filtering: extend( - $_light-grid-filtering, +/// @requires {Map} $light-grid-filtering +$fluent-grid-filtering: extend( + $light-grid-filtering, ( menu-background: ( igx-color: 'surface' @@ -69,12 +71,12 @@ $_fluent-grid-filtering: extend( /// Generates a bootstrap grid-filtering schema. /// @type {Map} /// @requires {function} extend -/// @requires {Map} $_light-grid-filtering -$_bootstrap-grid-filtering: extend($_light-grid-filtering); +/// @requires {Map} $light-grid-filtering +$bootstrap-grid-filtering: extend($light-grid-filtering); /// Generates an indigo grid-filtering schema. /// @type {Map} /// @requires {function} extend -/// @requires {Map} $_light-grid-filtering -$_indigo-grid-filtering: extend($_light-grid-filtering); +/// @requires {Map} $light-grid-filtering +$indigo-grid-filtering: extend($light-grid-filtering); diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_grid-summary.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_grid-summary.scss index d355f267303..82e53351c50 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_grid-summary.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_grid-summary.scss @@ -1,3 +1,5 @@ +@use '../../../base' as *; + //// /// @group schemas /// @access public @@ -18,7 +20,7 @@ /// @property {map} pinned-border-color [igx-color: ('grays', 400)] - The border color of the summary panel. /// /// @see $default-palette -$_light-grid-summary: ( +$light-grid-summary: ( background-color: inherit, focus-background-color: ( @@ -54,9 +56,9 @@ $_light-grid-summary: ( /// @property {map} pinned-border-color [igx-color: ('grays', 300), to-opaque: #fff] - The border color of the summary panel. /// /// @requires {function} extend -/// @requires {Map} $_light-grid-summary -$_fluent-grid-summary: extend( - $_light-grid-summary, +/// @requires {Map} $light-grid-summary +$fluent-grid-summary: extend( + $light-grid-summary, ( background-color: ( igx-color: ('surface') @@ -75,9 +77,8 @@ $_fluent-grid-summary: extend( /// Generates a bootstrap grid-summary schema. /// @type {Map} -/// @requires {function} extend -/// @requires {Map} $_light-grid-summary -$_bootstrap-grid-summary: extend($_light-grid-summary); +/// @requires {Map} $light-grid-summary +$bootstrap-grid-summary: $light-grid-summary; /// Generates an indigo grid-summary schema. /// @type {Map} @@ -86,9 +87,9 @@ $_bootstrap-grid-summary: extend($_light-grid-summary); /// @property {map} border-color [igx-color: ('primary', 50)] - The summaries border color. /// @property {map} pinned-border-color [igx-color: ('primary', 200)] - The border color of the summary panel. /// @requires {function} extend -/// @requires {Map} $_light-grid-summary -$_indigo-grid-summary: extend( - $_light-grid-summary, +/// @requires {Map} $light-grid-summary +$indigo-grid-summary: extend( + $light-grid-summary, ( variant: 'indigo-design', diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_grid-toolbar.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_grid-toolbar.scss index ff48b0250f7..6e3f086372a 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_grid-toolbar.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_grid-toolbar.scss @@ -1,3 +1,5 @@ +@use '../../../base' as *; + //// /// @group schemas /// @access public @@ -16,7 +18,7 @@ /// @property {Map} item-focus-background [igx-color: ('grays', 100)] - The toolbar drop-down item focus background color. /// @property {Map} item-focus-text-color [igx-color: ('grays', 600)] - The toolbar drop-down item focus text color. /// @see $default-palette -$_light-grid-toolbar: ( +$light-grid-toolbar: ( variant: 'material', background-color: ( @@ -55,9 +57,9 @@ $_light-grid-toolbar: ( /// /// @property {Map} background-color [igx-color: 'surface'] - The toolbar background color. /// @requires {function} extend -/// @requires {Map} $_light-grid-toolbar -$_fluent-grid-toolbar: extend( - $_light-grid-toolbar, +/// @requires {Map} $light-grid-toolbar +$fluent-grid-toolbar: extend( + $light-grid-toolbar, ( variant: 'fluent', @@ -70,9 +72,9 @@ $_fluent-grid-toolbar: extend( /// Generates a bootstrap grid-toolbar schema. /// @type {Map} /// @requires {function} extend -/// @requires {Map} $_light-grid-toolbar -$_bootstrap-grid-toolbar: extend( - $_light-grid-toolbar, +/// @requires {Map} $light-grid-toolbar +$bootstrap-grid-toolbar: extend( + $light-grid-toolbar, ( variant: 'bootstrap' ) @@ -83,9 +85,9 @@ $_bootstrap-grid-toolbar: extend( /// @property {Map} background-color [igx-color: ('grays', 100)] - The toolbar background color. /// @property {Map} title-text-color [igx-color: ('primary', 500)] - The toolbar title text color. /// @requires {function} extend -/// @requires {Map} $_light-grid-toolbar -$_indigo-grid-toolbar: extend( - $_light-grid-toolbar, +/// @requires {Map} $light-grid-toolbar +$indigo-grid-toolbar: extend( + $light-grid-toolbar, ( variant: 'indigo-design', diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_grid.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_grid.scss index 2c454a164db..7dec368bd84 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_grid.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_grid.scss @@ -1,5 +1,6 @@ -@import '../shape/grid'; -@import '../elevation/grid'; +@use '../../../base' as *; +@use '../shape/grid' as *; +@use '../elevation/grid' as *; //// /// @group schemas @@ -10,55 +11,55 @@ /// Generates a light grid schema. /// @type {Map} /// @prop {Color} grid-border-color [transparent] - The grid border color. -/// @prop {Map} header-background [igx-color: ('grays', 100), to-opaque: #fff] - The table header background color. -/// @prop {Map} header-text-color [igx-color: ('grays', 600)] - The table header text color. -/// @prop {Map} header-selected-background [igx-color: ('secondary', 50), darken-color: 8%] - The table header background color when selected (ex. column selection). -/// @prop {Map} header-selected-text-color [igx-contrast-color: ('secondary', 50)] - The table header text color when selected (ex. column selection). +/// @prop {Map} header-background [igx-color: ('grays', 100)] - The table header background color. +/// @prop {Map} header-text-color [igx-color: ('grays', 800)] - The table header text color. +/// @prop {Map} header-selected-background [igx-color: ('secondary', 100)] - The table header background color when selected (ex. column selection). +/// @prop {Map} header-selected-text-color [igx-contrast-color: ('secondary', 100)] - The table header text color when selected (ex. column selection). /// /// @prop {Map} sorted-header-icon-color [igx-color: ('secondary', 500)] - The sorted table header icon color. /// @prop {Map} sortable-header-icon-hover-color [igx-color: ('secondary', 500)] - The icon color on hover in grid header when the column is sortable. /// /// @prop {Number} header-border-width [1px] - The border width used for header borders. /// @prop {String} header-border-style [solid] - The border style used for header borders. -/// @prop {Map} header-border-color [igx-color: ('grays', 200)] - The color used for header borders. -/// @prop {Map} ghost-header-text-color [igx-color: ('grays', 600)] - The dragged header text color. -/// @prop {Map} ghost-header-icon-color [igx-color: ('grays', 500)] - The dragged header icon color. -/// @prop {Color} ghost-header-background [#fff] - The dragged header background color. -/// @prop {Color} content-background [#fff] - The table body background color. +/// @prop {Map} header-border-color [igx-color: ('grays', 400, .38)] - The color used for header borders. +/// @prop {Map} ghost-header-text-color [igx-color: ('grays', 700)] - The dragged header text color. +/// @prop {Map} ghost-header-icon-color [igx-color: ('grays', 600)] - The dragged header icon color. +/// @prop {Color} ghost-header-background [igx-color: ('grays', 50)] - The dragged header background color. +/// @prop {Color} content-background [igx-color: ('grays', 50)] - The table body background color. /// @prop {Map} content-text-color [igx-color: ('grays', 800)] - The table body text color. -/// @prop {Color} row-odd-background [#fff] - The background color of odd rows. -/// @prop {Color} row-even-background [#fff] - The background color of even rows. +/// @prop {Color} row-odd-background [igx-color: ('grays', 50)] - The background color of odd rows. +/// @prop {Color} row-even-background [igx-color: ('grays', 50)] - The background color of even rows. /// @prop {Color} row-odd-text-color [inherit] - The text color of odd rows. /// @prop {Color} row-even-text-color [inherit] - The text color of even rows. /// @prop {Map} row-selected-background [igx-color: ('secondary', 50)] - The selected row background color. /// @prop {Map} row-selected-text-color [igx-contrast-color: ('secondary', 50)] - The selected row text color. -/// @prop {Map} row-selected-hover-background [igx-color: ('secondary', 50), darken-color: 2%] - The selected row hover background. -/// @prop {Map} row-selected-hover-text-color [igx-contrast-color: ('secondary', 50)] - The selected row hover text color. -/// @prop {Map} row-hover-background [igx-color: ('grays', 100), to-opaque: #fff] - The hover row background color. +/// @prop {Map} row-selected-hover-background [igx-color: ('secondary', 100)] - The selected row hover background. +/// @prop {Map} row-selected-hover-text-color [igx-contrast-color: ('secondary', 100)] - The selected row hover text color. +/// @prop {Map} row-hover-background [igx-color: ('grays', 200)] - The hover row background color. /// @prop {Map} row-hover-text-color [igx-contrast-color: ('grays', 200)] - The hover row text color. -/// @prop {Map} row-border-color [igx-color: ('grays', 300)] - The row bottom border color. +/// @prop {Map} row-border-color [igx-color: ('grays', 300, .38)] - The row bottom border color. /// @prop {Map} row-highlight [igx-color: ('secondary', 500)] - The grid row highlight color. /// @prop {Number} pinned-border-width [2px] - The border width of the pinned border. /// @prop {String} pinned-border-style [solid] - The CSS border style of the pinned border. /// @prop {Map} pinned-border-color [igx-color: ('grays', 400)] - The color of the pinned border. /// @prop {Map} cell-active-border-color [igx-color: ('secondary', 500)] - The active(focused) cell border color. -/// @prop {Map} cell-selected-background [igx-color: ('grays', 200), to-opaque: #fff] - The selected cell background color. +/// @prop {Map} cell-selected-background [igx-color: ('grays', 200)] - The selected cell background color. /// @prop {Map} cell-selected-text-color [igx-contrast-color: ('grays', 200)] - The selected cell text color. -/// @prop {Color} cell-editing-background [#fff] - The editing background color of a cell. +/// @prop {Color} cell-editing-background [igx-color: ('grays', 50)] - The editing background color of a cell. /// @prop {Map} edit-mode-color [igx-color: ('secondary', 500)] - The text color in edit mode. /// @prop {Map} edited-row-indicator [igx-color: ('grays', 400)] - The indicator's color of edited row. /// @prop {String} cell-new-color [inherit] - The text color of a new, unedited cell. Used when adding new row in a grid. /// @prop {Map} cell-edited-value-color [igx-color: ('grays', 600)] - The color of cell edited value. /// @prop {Map} cell-disabled-color [igx-color: ('grays', 500)] - The text color of a disabled cell. -/// @prop {Map} cell-selected-within-background [igx-color: ('secondary', 100), darken-color: 2%] - The background of the selected cell inside a selected row/column. -/// @prop {Map} cell-selected-within-text-color [igx-contrast-color: ('secondary', 100)] - The color of the selected cell inside a selected row/column. +/// @prop {Map} cell-selected-within-background [igx-color: ('secondary', 200)] - The background of the selected cell inside a selected row/column. +/// @prop {Map} cell-selected-within-text-color [igx-contrast-color: ('secondary', 200)] - The color of the selected cell inside a selected row/column. /// /// @prop {Map} resize-line-color [igx-color: ('secondary', 500)] - The table header resize line color. /// @prop {Map} drop-indicator-color [igx-color: ('secondary', 500)] - The color of the drop indicator. -/// @prop {Map} grouparea-background [igx-color: ('grays', 100), to-opaque: #fff] - The grid group area background color. +/// @prop {Map} grouparea-background [igx-color: ('grays', 100)] - The grid group area background color. /// @prop {Map} grouparea-color [igx-color: ('grays', 500)] - The grid group area color. -/// @prop {Map} group-row-background [igx-color: ('grays', 100), to-opaque: #fff] - The grid group row background color. -/// @prop {Map} group-row-selected-background [igx-color: ('grays', 200), to-opaque: #fff] - The drop area background on drop color. +/// @prop {Map} group-row-background [igx-color: ('grays', 100)] - The grid group row background color. +/// @prop {Map} group-row-selected-background [igx-color: ('grays', 200)] - The drop area background on drop color. /// @prop {Map} active-expand-icon-color [igx-color: ('grays', 500)] - The drop area background on drop color. /// @prop {Map} active-expand-icon-hover-color [igx-color: ('primary', 500)] - The drop area background on drop color. /// @prop {Map} group-label-column-name-text [igx-color: ('primary', 500)] - The grid group row column name text color. @@ -70,12 +71,12 @@ /// @prop {Map} expand-icon-hover-color [igx-color: ('primary', 500)] - The grid row expand icon hover color. /// @prop {Map} group-count-background [igx-color: ('grays', 200)] - The grid group row cont badge background color. /// @prop {Map} group-count-text-color [igx-color: ('grays', 600)] - The grid group row cont badge text color. -/// @prop {Map} drop-area-text-color [igx-color: ('grays', 600)] - The drop area text color. +/// @prop {Map} drop-area-text-color [igx-color: ('grays', 700)] - The drop area text color. /// @prop {Map} drop-area-icon-color [igx-color: ('grays', 500), to-opaque: ()] - The drop area icon color. -/// @prop {Map} drop-area-background [igx-color: ('grays', 100)] - The drop area background color. +/// @prop {Map} drop-area-background [igx-color: ('grays', 200)] - The drop area background color. /// @prop {Map} drop-area-on-drop-background [igx-color: ('grays', 200)] - The drop area background on drop color. /// @prop {Map} tree-filtered-text-color [igx-color: ('grays', 500)] - grouping row background color on focus. -/// @prop {Color} filtering-header-background [#fff] - The background color of the filtered column header. +/// @prop {Color} filtering-header-background [igx-color: ('grays', 50)] - The background color of the filtered column header. /// @prop {Map} filtering-header-text-color [igx-color: ('grays', 800)] - The text color color of the filtered column header. /// /// @prop {Map} filtering-background-and [igx-color: ('primary', 300)] - The background color of advanced filtering "AND" condition. @@ -83,24 +84,24 @@ /// @prop {Map} filtering-background-or [igx-color: ('secondary', 300)] - The background color of advanced filtering "OR" condition. /// @prop {Map} filtering-background-or--focus [igx-color: ('secondary', 700)] - The background color on focus/selected of advanced filtering "OR" condition. /// -/// @prop {Color} filtering-row-background [#fff] - The background color of the filtering row. +/// @prop {Color} filtering-row-background [igx-color: 'grays', 50)] - The background color of the filtering row. /// @prop {Map} filtering-row-text-color [igx-color: ('grays', 800)] - The text-color color of the filtering row. -/// @prop {Map} body-summaries-background [igx-color: ('grays', 100), to-opaque: #fff] - The background color of the summary groups located the body. -/// @prop {Map} body-summaries-text-color [igx-color: ('grays', 100), to-opaque: #fff, text-contrast: ()] - The text color of the summary groups located the body. -/// @prop {Map} root-summaries-background [igx-color: ('grays', 300), to-opaque: #fff] - The background color of the summary groups located the footer. -/// @prop {Map} root-summaries-text-color [igx-color: ('grays', 300), to-opaque: #fff, text-contrast: ()] - The text color of the summary groups located the footer. +/// @prop {Map} body-summaries-background [igx-color: ('grays', 100)] - The background color of the summary groups located the body. +/// @prop {Map} body-summaries-text-color [igx-contrast-color: ('grays', 100)] - The text color of the summary groups located the body. +/// @prop {Map} root-summaries-background [igx-color: ('grays', 300)] - The background color of the summary groups located the footer. +/// @prop {Map} root-summaries-text-color [igx-contrast-color: ('grays', 300)] - The text color of the summary groups located the footer. /// @prop {Map} row-drag-color [igx-color: ('grays', 200))] - The color of the drag handle. /// @prop {Map} row-ghost-background [igx-color: ('primary', 50))] - The background color of the dragged row. /// @prop {number} grid-elevation [2] - The elevation level, between 0-24, to be used for the grid. /// @prop {number} drag-elevation [5] - The elevation level, between 0-24, to be used for movable elements (ex. column header). /// @prop {Number} drop-area-border-radius [1] - The border radius used for drop-area. Can be a fraction between 0 and 1, pixels, or percent. /// @requires {function} extend -/// @requires {Map} $_default-shape-grid -/// @requires {Map} $_default-elevation-grid +/// @requires {Map} $default-shape-grid +/// @requires {Map} $default-elevation-grid /// @see $default-palette -$_light-grid: extend( - $_default-shape-grid, - $_default-elevation-grid, +$light-grid: extend( + $default-shape-grid, + $default-elevation-grid, ( variant: 'material', @@ -108,40 +109,40 @@ $_light-grid: extend( igx-color: ('grays', 500) ), - filtering-background-and: ( - igx-color: ('primary', 300) + grouparea-background: ( + igx-color: ('grays', 100) ), - filtering-background-or: ( - igx-color: ('secondary', 300) + drop-area-text-color: ( + igx-color: ('grays', 700) ), - filtering-background-and--focus: ( - igx-color: ('primary', 700) + drop-area-icon-color: ( + igx-color: ('grays', 500), ), - filtering-background-or--focus: ( - igx-color: ('secondary', 700) + drop-area-background: ( + igx-color: ('grays', 200) ), - grid-border-color: transparent, + drop-area-on-drop-background: ( + igx-color: ('grays', 200) + ), header-background: ( - igx-color: ('grays', 100), - to-opaque: #fff + igx-color: ('grays', 100) ), header-text-color: ( - igx-color: ('grays', 600) + igx-color: ('grays', 800, .7) ), header-selected-background: ( - igx-color: ('secondary', 50), - darken-color: 8% + igx-color: ('secondary', 100), ), header-selected-text-color: ( - igx-contrast-color: ('secondary', 50) + igx-contrast-color: ('secondary', 100, .7) ), sortable-header-icon-hover-color: ( @@ -153,61 +154,93 @@ $_light-grid: extend( ), header-border-width: 1px, + header-border-style: solid, header-border-color: ( - igx-color: ('grays', 200) + igx-color: ('grays', 400, .38) ), - content-background: #fff, - content-text-color: ( - igx-color: ('grays', 800) + ghost-header-background: ( + igx-color: ('grays', 50) ), ghost-header-text-color: ( - igx-color: ('grays', 600) + igx-color: ('grays', 700) ), ghost-header-icon-color: ( - igx-color: ('grays', 500) + igx-color: ('grays', 600) + ), + + filtering-background-and: ( + igx-color: ('primary', 300) ), - ghost-header-background: #fff, + filtering-background-or: ( + igx-color: ('secondary', 300) + ), + + filtering-background-and--focus: ( + igx-color: ('primary', 700) + ), + + filtering-background-or--focus: ( + igx-color: ('secondary', 700) + ), + + grid-border-color: transparent, + + content-background: ( + igx-color: ('grays', 50) + ), + + content-text-color: ( + igx-color: ('grays', 800) + ), + + row-odd-background: ( + igx-color: ('grays', 50) + ), + + row-even-background: ( + igx-color: ('grays', 50) + ), - row-odd-background: #fff, - row-even-background: #fff, row-odd-text-color: inherit, + row-even-text-color: inherit, row-selected-background: ( igx-color: ('secondary', 50), ), + tree-selected-filtered-row-text-color: ( + igx-color: ('secondary', 300) + ), + row-selected-text-color: ( igx-contrast-color: ('secondary', 50) ), cell-selected-within-background: ( - igx-color: ('secondary', 100), - darken-color: 2% + igx-color: ('secondary', 200) ), cell-selected-within-text-color: ( - igx-contrast-color: ('secondary', 100) + igx-contrast-color: ('secondary', 200) ), row-selected-hover-background: ( - igx-color: ('secondary', 50), - darken-color: 2% + igx-color: ('secondary', 100), ), row-selected-hover-text-color: ( - igx-contrast-color: ('secondary', 50) + igx-contrast-color: ('secondary', 100) ), row-hover-background: ( - igx-color: ('grays', 100), - to-opaque: #fff + igx-color: ('grays', 200) ), row-hover-text-color: ( @@ -215,10 +248,11 @@ $_light-grid: extend( ), row-border-color: ( - igx-color: ('grays', 300) + igx-color: ('grays', 300, .38) ), pinned-border-width: 2px, + pinned-border-style: solid, pinned-border-color: ( @@ -231,14 +265,19 @@ $_light-grid: extend( cell-selected-background: ( igx-color: ('grays', 200), - to-opaque: #fff + ), + + tree-selected-filtered-cell-text-color: ( + igx-color: ('secondary', 500) ), cell-selected-text-color: ( igx-contrast-color: ('grays', 200) ), - cell-editing-background: #fff, + cell-editing-background: ( + igx-color: ('grays', 50) + ), edit-mode-color: ( igx-color: ('secondary', 500) @@ -266,11 +305,6 @@ $_light-grid: extend( igx-color: ('secondary', 500) ), - grouparea-background: ( - igx-color: ('grays', 100), - to-opaque: #fff - ), - group-label-column-name-text: ( igx-color: ('primary', 500) ), @@ -315,40 +349,25 @@ $_light-grid: extend( igx-color: ('grays', 600) ), - drop-area-text-color: ( - igx-color: ('grays', 600) - ), - - drop-area-icon-color: ( - igx-color: ('grays', 500), - to-opaque: () - ), - - drop-area-background: ( + group-row-background: ( igx-color: ('grays', 100) ), - drop-area-on-drop-background: ( + group-row-selected-background: ( igx-color: ('grays', 200) ), - group-row-background: ( - igx-color: ('grays', 100), - to-opaque: #fff - ), - - group-row-selected-background: ( - igx-color: ('grays', 200), - to-opaque: #fff + filtering-header-background: ( + igx-color: ('grays', 50) ), - filtering-header-background: #fff, - filtering-header-text-color: ( igx-color: ('grays', 800) ), - filtering-row-background: #fff, + filtering-row-background: ( + igx-color: ('grays', 50) + ), filtering-row-text-color: ( igx-color: ('grays', 800) @@ -359,25 +378,19 @@ $_light-grid: extend( ), body-summaries-background: ( - igx-color: ('grays', 100), - to-opaque: #fff + igx-color: ('grays', 100) ), body-summaries-text-color: ( - igx-color: ('grays', 100), - to-opaque: #fff, - text-contrast: () + igx-contrast-color: ('grays', 100), ), root-summaries-background: ( - igx-color: ('grays', 300), - to-opaque: #fff + igx-color: ('grays', 300) ), root-summaries-text-color: ( - igx-color: ('grays', 300), - to-opaque: #fff, - text-contrast: () + igx-contrast-color: ('grays', 300), ), row-highlight: ( @@ -398,47 +411,45 @@ $_light-grid: extend( /// @type {Map} /// @prop {Map} grid-border-color [igx-color: ('grays', 100)] - The grid border color only. /// @prop {Map} header-background [igx-color: 'surface'] - The table header background color. -/// @prop {Map} header-text-color [igx-color: ('grays', 900)] - The table header text color. -/// @prop {Map} header-selected-background [igx-color: ('grays', 100), to-opaque: #fff] - The table header background color when selected (ex. column selection). -/// @prop {Map} header-selected-text-color [igx-color: ('grays', 100), to-opaque: #fff, text-contrast: ()] - The table header text color when selected (ex. column selection). +/// @prop {Map} header-text-color [igx-color: ('grays', 800)] - The table header text color. +/// @prop {Map} header-selected-background [igx-color: ('grays', 200)] - The table header background color when selected (ex. column selection). +/// @prop {Map} header-selected-text-color [igx-contrast-color: ('grays', 200)] - The table header text color when selected (ex. column selection). /// @prop {Map} header-border-color [igx-color: ('grays', 100)] - The color used for header borders. -/// @prop {Map} row-selected-background [igx-color: ('grays', 100)] - The selected row background color. -/// @prop {Map} row-selected-hover-background [igx-color: ('grays', 200), to-opaque: #fff] - The selected row hover background. +/// @prop {Map} row-selected-background [igx-color: ('grays', 200)] - The selected row background color. +/// @prop {Map} row-selected-hover-background [igx-color: ('grays', 300)] - The selected row hover background. /// @prop {Map} row-border-color [igx-color: ('grays', 100)] - The row bottom border color. /// @prop {Map} pinned-border-color [igx-color: ('grays', 200)] - The color of the pinned border. /// @prop {Map} cell-active-border-color [igx-color: ('primary', 100)] - The active(focused) cell border color. -/// @prop {Map} cell-selected-background [igx-color: ('grays', 300), to-opaque: #fff] - The selected cell background color. /// @prop {Map} grouparea-background [igx-color: 'surface'] - The grid group area background color. -/// @prop {Map} group-row-background [igx-color: ('grays', 50), to-opaque: #fff] - The grid group row background color. -/// @prop {Map} group-row-selected-background [igx-color: ('grays', 100), to-opaque: #fff] - The drop area background on drop color. -/// @prop {Map} filtering-header-background [igx-color: ('grays', 100), to-opaque: #fff] - The background color of the filtered column header. -/// @prop {Map} filtering-header-text-color [igx-color: ('grays', 900), to-opaque: #fff] - The text color color of the filtered column header. -/// @prop {Map} filtering-row-background [igx-color: ('grays', 100), to-opaque: #fff] - The background color of the filtering row. +/// @prop {Map} group-row-background [igx-color: ('grays', 50)] - The grid group row background color. +/// @prop {Map} group-row-selected-background [igx-color: ('grays', 100)] - The drop area background on drop color. +/// @prop {Map} filtering-header-background [igx-color: ('grays', 100)] - The background color of the filtered column header. +/// @prop {Map} filtering-header-text-color [igx-color: ('grays', 900)] - The text color color of the filtered column header. +/// @prop {Map} filtering-row-background [igx-color: ('grays', 200)] - The background color of the filtering row. /// @prop {Map} root-summaries-background [igx-color: 'surface'] - The background color of the summary groups located the footer. /// @prop {Map} row-ghost-background [igx-color: 'surface'] - The background color of the dragged row. /// @prop {number} grid-elevation [0] - The elevation level, between 0-24, to be used for the grid. /// @prop {number} drag-elevation [1] - The elevation level, between 0-24, to be used for movable elements (ex. column header). /// @prop {Number} drop-area-border-radius [2px] - The border radius used for drop-area. Can be a fraction between 0 and 1, pixels, or percent. -/// @prop {Map} filtering-background-or [igx-color: ('error'), rgba: .5] - The background color of advanced filtering "OR" condition. +/// @prop {Map} filtering-background-or [igx-color: ('error', .5)] - The background color of advanced filtering "OR" condition. /// @prop {Map} filtering-background-or--focus [igx-color: ('error')] - The background color on focus/selected of advanced filtering "OR" condition. -/// @prop {Map} cell-selected-within-background [igx-color: ('grays', 300), to-opaque: #fff] - The background of the selected cell inside a selected row/column. +/// @prop {Map} cell-selected-within-background [igx-color: ('grays', 300)] - The background of the selected cell inside a selected row/column. /// @prop {Map} cell-selected-within-text-color [igx-contrast-color: ('grays', 300)] - The color of the selected cell inside a selected row/column. -/// @prop {Map} row-selected-hover-text-color [igx-contrast-color: ('grays', 200)] - The selected row hover text color. +/// @prop {Map} row-selected-hover-text-color [igx-contrast-color: ('grays', 300)] - The selected row hover text color. /// /// @requires {function} extend -/// @requires {Map} $_light-grid -/// @requires {Map} $_fluent-shape-grid -/// @requires {Map} $_fluent-elevation-grid -$_fluent-grid: extend( - $_light-grid, - $_fluent-shape-grid, - $_fluent-elevation-grid, +/// @requires {Map} $light-grid +/// @requires {Map} $fluent-shape-grid +/// @requires {Map} $fluent-elevation-grid +$fluent-grid: extend( + $light-grid, + $fluent-shape-grid, + $fluent-elevation-grid, ( variant: 'fluent', filtering-background-or: ( - igx-color: ('error'), - rgba: .5 + igx-color: ('error', 500, .5), ), filtering-background-or--focus: ( @@ -454,19 +465,15 @@ $_fluent-grid: extend( ), header-text-color: ( - igx-color: ('grays', 900), - to-opaque: #fff + igx-color: ('grays', 800) ), header-selected-background: ( - igx-color: ('grays', 100), - to-opaque: #fff + igx-color: ('grays', 200) ), header-selected-text-color: ( - igx-color: ('grays', 100), - to-opaque: #fff, - text-contrast: () + igx-contrast-color: ('grays', 200) ), header-border-color: ( @@ -474,12 +481,11 @@ $_fluent-grid: extend( ), row-selected-hover-background: ( - igx-color: ('grays', 200), - to-opaque: #fff + igx-color: ('grays', 300), ), row-selected-hover-text-color: ( - igx-contrast-color: ('grays', 200) + igx-contrast-color: ('grays', 300) ), row-border-color: ( @@ -491,12 +497,7 @@ $_fluent-grid: extend( ), cell-active-border-color: ( - igx-color: ('primary', 100), - ), - - cell-selected-background: ( - igx-color: ('grays', 300), - to-opaque: #fff + igx-color: ('primary', 100) ), grouparea-background: ( @@ -504,38 +505,35 @@ $_fluent-grid: extend( ), group-row-background: ( - igx-color: ('grays', 50), - to-opaque: #fff + igx-color: ('grays', 50) ), group-row-selected-background: ( - igx-color: ('grays', 100), - to-opaque: #fff + igx-color: ('grays', 100) ), filtering-header-background: ( - igx-color: ('grays', 100), - to-opaque: #fff + igx-color: ('grays', 100) ), filtering-header-text-color: ( - igx-color: ('grays', 900), - to-opaque: #fff + igx-color: ('grays', 900) ), filtering-row-background: ( - igx-color: ('grays', 100), - to-opaque: #fff + igx-color: ('grays', 200) ), row-selected-background: ( - igx-color: ('grays', 100), - to-opaque: #fff + igx-color: ('grays', 200) + ), + + tree-selected-filtered-row-text-color: ( + igx-color: ('grays', 400) ), cell-selected-within-background: ( igx-color: ('grays', 300), - to-opaque: #fff, ), cell-selected-within-text-color: ( @@ -554,34 +552,42 @@ $_fluent-grid: extend( /// Generates a bootstrap grid schema. /// @type {Map} -/// @prop {Color} header-background [#fff] - The table header background color. -/// @prop {Color} header-text-color [#000] - The table header text color. +/// @prop {Color} header-background [igx-color: 'surface'] - The table header background color. +/// @prop {Color} header-text-color [igx-contrast-color: 'surface'] - The table header text color. /// @prop {Map} header-selected-background [igx-color: ('primary', 50)] - The table header background color when selected (ex. column selection). /// @prop {Map} header-selected-text-color [igx-contrast-color: ('primary', 50)] - The table header text color when selected (ex. column selection). /// @prop {Map} cell-active-border-color [igx-color: ('primary', 500)] - The active(focused) cell border color. /// @prop {Map} row-highlight [igx-color: ('primary', 500)] - The grid row highlight color. /// /// @prop {Map} sorted-header-icon-color [igx-color: ('primary', 500)] - The sorted table header icon color. -/// @prop {Map} row-selected-background [ igx-color: ('primary', 50), to-opaque: #fff] - The selected row background color. -/// @prop {Map} row-selected-hover-background [igx-color: ('primary', 100), to-opaque: #fff] - The selected row hover background. -/// @prop {Map} pinned-border-color [igx-color: ('primary', 200)] - The color of the pinned border. +/// @prop {Map} row-selected-background [ igx-color: ('primary', 50)] - The selected row background color. +/// @prop {Map} row-selected-hover-background [igx-color: ('primary', 100)] - The selected row hover background. +/// @prop {Map} pinned-border-color [igx-color: ('grays', 400)] - The color of the pinned border. /// @prop {Map} resize-line-color [igx-color: ('primary', 500)] - The table header resize line color. /// @prop {Number} drop-area-border-radius [4px] - The border radius used for drop-area. Can be a fraction between 0 and 1, pixels, or percent. /// @prop {Map} cell-selected-within-background [igx-color: ('primary', 100)] - The background of the selected cell inside a selected row/column. /// @prop {Map} cell-selected-within-text-color [igx-contrast-color: ('primary', 100)] - The color of the selected cell inside a selected row/column. /// @prop {Map} row-selected-hover-text-color [igx-contrast-color: ('primary', 100)] - The selected row hover text color. /// @requires {function} extend -/// @requires {Map} $_light-grid -/// @requires {Map} $_bootstrap-shape-grid -$_bootstrap-grid: extend( - $_light-grid, - $_bootstrap-shape-grid, +/// @requires {Map} $light-grid +/// @requires {Map} $bootstrap-shape-grid +$bootstrap-grid: extend( + $light-grid, + $bootstrap-shape-grid, ( variant: 'bootstrap', - header-background: #fff, + grouparea-background: ( + igx-color: 'surface' + ), - header-text-color: #000, + header-background: ( + igx-color: 'surface' + ), + + header-text-color: ( + igx-contrast-color: 'surface' + ), header-selected-background: ( igx-color: ('primary', 50), @@ -615,6 +621,10 @@ $_bootstrap-grid: extend( igx-color: ('primary', 50), ), + tree-selected-filtered-row-text-color: ( + igx-color: ('primary', 400) + ), + cell-selected-within-background: ( igx-color: ('primary', 100), ), @@ -651,19 +661,19 @@ $_bootstrap-grid: extend( /// Generates an indigo grid schema. /// @type {Map} -/// @prop {Color} header-background [igx-color: ('grays', 100), to-opaque()] - The table header background color. +/// @prop {Color} header-background [igx-color: ('grays', 100)] - The table header background color. /// @prop {Color} header-text-color [igx-color: 'primary'] - The table header text color. -/// @prop {Map} header-selected-background [igx-color: ('primary', 50)] - The table header background color when selected (ex. column selection). +/// @prop {Map} header-selected-background [igx-color: ('primary', 100)] - The table header background color when selected (ex. column selection). /// @prop {Map} header-selected-text-color [igx-color: 'primary'] - The table header text color when selected (ex. column selection). -/// @prop {Map} header-border-color [igx-color: ('primary', 500), rgba: .24] - The color used for header borders. +/// @prop {Map} header-border-color [igx-color: ('primary', 500, .24)] - The color used for header borders. /// /// @prop {Map} filtering-header-text-color [igx-color: ('primary', 900)] - The text color color of the filtered column header. -/// @prop {Map} filtering-background-or [igx-color: 'warn'] - The background color of advanced filtering "OR" condition. -/// @prop {Map} filtering-background-or--focus [igx-color: 'warn', darken: 8%] - The background color on focus/selected of advanced filtering "OR" condition. +/// @prop {Map} filtering-background-or [igx-color: ('warn', 500, .72)] - The background color of advanced filtering "OR" condition. +/// @prop {Map} filtering-background-or--focus [igx-color: 'warn'] - The background color on focus/selected of advanced filtering "OR" condition. /// /// @prop {Map} edited-row-indicator [igx-color: 'primary'] - The indicator's color of edited row. /// -/// @prop {Map} cell-selected-background [igx-color: ('primary', 50), rgba: .5] - The selected cell background color. +/// @prop {Map} cell-selected-background [igx-color: ('primary', 100)] - The selected cell background color. /// @prop {Map} cell-active-border-color [igx-color: ('primary', 500)] - The active(focused) cell border color. /// /// @prop {Color} ghost-header-background [igx-color: 'primary'] - The dragged header background color. @@ -673,13 +683,13 @@ $_bootstrap-grid: extend( /// @prop {Map} row-border-color [igx-color: ('primary', 50)] - The row bottom border color. /// @prop {Map} row-highlight [igx-color: 'primary'] - The grid row highlight color. /// @prop {Map} row-ghost-background [igx-color: ('primary', 50)] - The background color of the dragged row. -/// @prop {Map} row-hover-background [igx-color: ('primary', 50), rgba: .12, to-opaque: (igx-color: 'surface')] - The hover row background color. +/// @prop {Map} row-hover-background [igx-color: ('primary', 50)] - The hover row background color. /// /// @prop {Map} sorted-header-icon-color [igx-color: 'primary'] - The sorted table header icon color. /// @prop {Map} sortable-header-icon-hover-color [igx-color: 'primary'] - The icon color on hover in grid header when the column is sortable. /// -/// @prop {Map} row-selected-background [igx-color: ('primary', 50), rgba: .72, to-opaque: ()] - The selected row background color. -/// @prop {Map} row-selected-hover-background [igx-color: ('primary', 50)] - The selected row hover background. +/// @prop {Map} row-selected-background [igx-color: ('primary', 100)] - The selected row background color. +/// @prop {Map} row-selected-hover-background [igx-color: ('primary', 100)] - The selected row hover background. /// /// @prop {Map} pinned-border-color [igx-color: ('primary', 200)] - The color of the pinned border. /// @prop {Map} resize-line-color [igx-color: 'primary'] - The table header resize line color. @@ -689,29 +699,28 @@ $_bootstrap-grid: extend( /// @prop {Map} grouparea-background [igx-color: ('grays', 100)] - The grid group area background color. /// @prop {Map} grouparea-color [igx-color: 'primary'] - The grid group area color. /// @prop {Map} drop-area-background [igx-color: ('grays', 200)] - The drop area background color. -/// @prop {Map} drop-area-text-color [igx-contrast-color: ('grays', 200), rgba: .62] - The drop area text color. -/// @prop {Map} drop-area-icon-color [igx-contrast-color: ('grays', 200), rgba: .62] - The drop area icon color. -/// @prop {Map} root-summaries-background [igx-color: ('grays', 100), to-opaque: ()] - The background color of the summary groups located the footer. -/// @prop {Map} body-summaries-background [igx-color: ('grays', 100), to-opaque: ()] - The background color of the summary groups located the body. -/// @prop {Map} group-row-background [igx-color: ('grays', 100), to-opaque: ()] - The grid group row background color. -/// @prop {Map} group-row-selected-background [igx-color: ('grays', 100), to-opaque: ()] - The drop area background on drop color. +/// @prop {Map} drop-area-text-color [igx-contrast-color: ('grays', 200, .62)] - The drop area text color. +/// @prop {Map} drop-area-icon-color [igx-contrast-color: ('grays', 200, .62)] - The drop area icon color. +/// @prop {Map} root-summaries-background [igx-color: ('grays', 100)] - The background color of the summary groups located the footer. +/// @prop {Map} body-summaries-background [igx-color: ('grays', 100)] - The background color of the summary groups located the body. +/// @prop {Map} group-row-background [igx-color: ('grays', 100)] - The grid group row background color. +/// @prop {Map} group-row-selected-background [igx-color: ('grays', 100)] - The drop area background on drop color. /// @prop {Map} group-count-background [igx-color: ('primary', 300)] - The grid group row cont badge background color. /// @prop {Map} group-count-text-color [igx-contrast-color: ('primary', 500)] - The grid group row cont badge text color. /// @prop {Map} expand-icon-color [igx-color: ('primary', 200)] - The grid row expand icon color. -/// @prop {Map} cell-selected-within-background [igx-color: ('primary', 50)] - The background of the selected cell inside a selected row/column. -/// @prop {Map} cell-selected-within-text-color [igx-contrast-color: ('primary', 50)] - The color of the selected cell inside a selected row/column. +/// @prop {Map} cell-selected-within-background [igx-color: ('primary', 200)] - The background of the selected cell inside a selected row/column. +/// @prop {Map} cell-selected-within-text-color [igx-contrast-color: ('primary', 200)] - The color of the selected cell inside a selected row/column. /// @prop {Map} row-selected-hover-text-color [igx-contrast-color: ('primary', 50)] - The selected row hover text color. /// /// @requires {function} extend -/// @requires {Map} $_light-grid -$_indigo-grid: extend( - $_light-grid, +/// @requires {Map} $light-grid +$indigo-grid: extend( + $light-grid, ( variant: 'indigo-design', header-background: ( - igx-color: ('grays', 100), - to-opaque: () + igx-color: ('grays', 100) ), header-text-color: ( @@ -719,7 +728,7 @@ $_indigo-grid: extend( ), header-selected-background: ( - igx-color: ('primary', 50), + igx-color: ('primary', 100), ), header-selected-text-color: ( @@ -727,8 +736,7 @@ $_indigo-grid: extend( ), header-border-color: ( - igx-color: ('primary', 500), - rgba: .24 + igx-color: ('primary', 500, .24), ), filtering-header-text-color: ( @@ -736,12 +744,11 @@ $_indigo-grid: extend( ), filtering-background-or: ( - igx-color: 'warn', + igx-color: ('warn', 500, .72), ), filtering-background-or--focus: ( igx-color: 'warn', - darken: 8% ), edited-row-indicator: ( @@ -749,9 +756,15 @@ $_indigo-grid: extend( ), cell-selected-background: ( - igx-color: ('primary', 50), - rgba: .5, - to-opaque: #fff + igx-color: ('primary', 100), + ), + + tree-selected-filtered-cell-text-color: ( + igx-color: ('primary', 500) + ), + + cell-selected-text-color: ( + igx-contrast-color: ('primary', 100), ), cell-active-border-color: ( @@ -784,10 +797,6 @@ $_indigo-grid: extend( row-hover-background: ( igx-color: ('primary', 50), - rgba: .12, - to-opaque: ( - igx-color: 'surface' - ) ), sorted-header-icon-color: ( @@ -799,21 +808,23 @@ $_indigo-grid: extend( ), row-selected-background: ( - igx-color: ('primary', 50), - rgba: .72, - to-opaque: () + igx-color: ('primary', 100), + ), + + tree-selected-filtered-row-text-color: ( + igx-color: ('primary', 400) ), cell-selected-within-background: ( - igx-color: ('primary', 50), + igx-color: ('primary', 300), ), cell-selected-within-text-color: ( - igx-contrast-color: ('primary', 50) + igx-contrast-color: ('primary', 300) ), row-selected-hover-background: ( - igx-color: ('primary', 50), + igx-color: ('primary', 100), ), row-selected-hover-text-color: ( @@ -849,33 +860,27 @@ $_indigo-grid: extend( ), drop-area-text-color: ( - igx-contrast-color: ('grays', 200), - rgba: .62 + igx-contrast-color: ('grays', 200, .62), ), drop-area-icon-color: ( - igx-contrast-color: ('grays', 200), - rgba: .62 + igx-contrast-color: ('grays', 200, .62), ), root-summaries-background: ( - igx-color: ('grays', 100), - to-opaque: () + igx-color: ('grays', 100) ), body-summaries-background: ( - igx-color: ('grays', 100), - to-opaque: () + igx-color: ('grays', 100) ), group-row-background: ( - igx-color: ('grays', 100), - to-opaque: () + igx-color: ('grays', 100) ), group-row-selected-background: ( - igx-color: ('grays', 100), - to-opaque: () + igx-color: ('grays', 100) ), group-count-background: ( diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_highlight.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_highlight.scss index 9d834c0261f..eaed367f7a0 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_highlight.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_highlight.scss @@ -1,3 +1,5 @@ +@use '../../../base' as *; + //// /// @group schemas /// @access public @@ -7,19 +9,17 @@ /// Generates a light highlight schema. /// @type {Map} /// @property {Map} resting-background [igx-color: ('grays', 300)] - The background color used for the highlight in its resting state. -/// @property {Map} resting-color [igx-color: ('grays', 300), to-opaque: #fff, text-contrast: ()] - The icon color used for the highlight in its resting state. +/// @property {Map} resting-color [igx-contrast-color: ('grays', 300)] - The icon color used for the highlight in its resting state. /// @property {Map} active-background [igx-color: ('secondary', A100)] - The background color used for the highlight in its active state. -/// @property {Map} active-color [igx-color: ('secondary', A100), text-contrast: ()] - The text color used for the highlight in its active state. +/// @property {Map} active-color [igx-contrast-color: ('secondary', A100) - The text color used for the highlight in its active state. /// @see $default-palette -$_light-highlight: ( +$light-highlight: ( resting-background: ( igx-color: ('grays', 300) ), resting-color: ( - igx-color: ('grays', 300), - to-opaque: (#fff), - text-contrast: () + igx-contrast-color: ('grays', 300), ), active-background: ( @@ -27,32 +27,29 @@ $_light-highlight: ( ), active-color: ( - igx-color: ('secondary', 'A100'), - text-contrast: () + igx-contrast-color: ('secondary', 'A100'), ), ); /// Generates a fluent highlight schema. /// @type {Map} -/// @requires {function} extend -/// @requires {Map} $_light-highlight -$_fluent-highlight: extend($_light-highlight); +/// @requires {Map} $light-highlight +$fluent-highlight: $light-highlight; /// Generates a bootstrap highlight schema. /// @type {Map} -/// @requires {function} extend -/// @requires {Map} $_light-highlight -$_bootstrap-highlight: extend($_light-highlight); +/// @requires {Map} $light-highlight +$bootstrap-highlight: $light-highlight; /// Generates an indigo highlight schema. /// @type {Map} /// @property {Map} active-background [igx-color: ('primary', 500)] - The background color used for the highlight in its active state. /// @property {Map} active-color [igx-contrast-color: ('primary', 500)] - The text color used for the highlight in its active state. -/// @property {Map} resting-color [igx-contrast-color: ( igx-color: ('grays', 300), to-opaque: 'surface' )] - The icon color used for the highlight in its resting state. +/// @property {Map} resting-color [igx-contrast-color: ( igx-color: ('grays', 300))] - The icon color used for the highlight in its resting state. /// @requires {function} extend -/// @requires {Map} $_light-highlight -$_indigo-highlight: extend( - $_light-highlight, +/// @requires {Map} $light-highlight +$indigo-highlight: extend( + $light-highlight, ( active-background: ( igx-color: ('primary', 500) @@ -64,9 +61,6 @@ $_indigo-highlight: extend( resting-color: ( igx-contrast-color: ('grays', 300), - to-opaque: ( - igx-color: 'surface' - ) ) ) ); diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_icon.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_icon.scss index d3c1a91f9fb..3d141da63c9 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_icon.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_icon.scss @@ -1,3 +1,5 @@ +@use '../../../base' as *; + //// /// @group schemas /// @access public @@ -12,7 +14,7 @@ /// @property {Color} disabled-color ["'currentColor'"] - The disabled icon color. /// /// @see $default-palette -$_light-icon: ( +$light-icon: ( color: "'currentColor'", size: rem(24px), disabled-color: "'currentColor'" @@ -20,23 +22,21 @@ $_light-icon: ( /// Generates a fluent icon schema. /// @type {Map} -/// @requires {function} extend -/// @requires {Map} $_light-icon -$_fluent-icon: extend($_light-icon); +/// @requires {Map} $light-icon +$fluent-icon: $light-icon; /// Generates a bootstrap icon schema. /// @type {Map} -/// @requires {function} extend -/// @requires {Map} $_light-icon -$_bootstrap-icon: extend($_light-icon); +/// @requires {Map} $light-icon +$bootstrap-icon: $light-icon; /// Generates an indigo icon schema. /// @type {Map} /// @property {Map} disabled-color [igx-color: ('grays', 400)] - The disabled icon color. /// @requires {function} extend -/// @requires {Map} $_light-icon -$_indigo-icon: extend( - $_light-icon, +/// @requires {Map} $light-icon +$indigo-icon: extend( + $light-icon, ( disabled-color: ( igx-color: ('grays', 400) diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_index.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_index.scss index f2c9d1acdc8..ebcfe2b852b 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_index.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_index.scss @@ -4,188 +4,188 @@ /// @author Simeon Simeonoff //// -@import './avatar'; -@import './action-strip'; -@import './badge'; -@import './banner'; -@import './bottom-nav'; -@import './button'; -@import './button-group'; -@import './calendar'; -@import './card'; -@import './carousel'; -@import './category-chart'; -@import './checkbox'; -@import './chip'; -@import './column-actions'; -@import './combo'; -@import './dialog'; -@import './data-chart'; -@import './doughnut-chart'; -@import './funnel-chart'; -@import './date-range-picker'; -@import './divider'; -@import './dock-manager'; -@import './drop-down'; -@import './expansion-panel'; -@import './gauge'; -@import './financial-chart'; -@import './graph'; -@import './grid'; -@import './grid-filtering'; -@import './pagination'; -@import './grid-summary'; -@import './grid-toolbar'; -@import './highlight'; -@import './icon'; -@import './input-group'; -@import './list'; -@import './navbar'; -@import './navdrawer'; -@import './geo-map'; -@import './overlay'; -@import './pie-chart'; -@import './progress'; -@import './radio'; -@import './ripple'; -@import './scrollbar'; -@import './shape-chart'; -@import './slider'; -@import './snackbar'; -@import './sparkline'; -@import './splitter'; -@import './switch'; -@import './stepper'; -@import './tabs'; -@import './time-picker'; -@import './toast'; -@import './tooltip'; -@import './tree'; -@import './watermark'; +@use './avatar' as *; +@use './action-strip' as *; +@use './badge' as *; +@use './banner' as *; +@use './bottom-nav' as *; +@use './button' as *; +@use './button-group' as *; +@use './calendar' as *; +@use './card' as *; +@use './carousel' as *; +@use './category-chart' as *; +@use './checkbox' as *; +@use './chip' as *; +@use './column-actions' as *; +@use './combo' as *; +@use './dialog' as *; +@use './data-chart' as *; +@use './doughnut-chart' as *; +@use './funnel-chart' as *; +@use './date-range-picker' as *; +@use './divider' as *; +@use './dock-manager' as *; +@use './drop-down' as *; +@use './expansion-panel' as *; +@use './gauge' as *; +@use './financial-chart' as *; +@use './graph' as *; +@use './grid' as *; +@use './grid-filtering' as *; +@use './pagination' as *; +@use './grid-summary' as *; +@use './grid-toolbar' as *; +@use './highlight' as *; +@use './icon' as *; +@use './input-group' as *; +@use './list' as *; +@use './navbar' as *; +@use './navdrawer' as *; +@use './geo-map' as *; +@use './overlay' as *; +@use './pie-chart' as *; +@use './progress' as *; +@use './radio' as *; +@use './ripple' as *; +@use './scrollbar' as *; +@use './shape-chart' as *; +@use './slider' as *; +@use './snackbar' as *; +@use './sparkline' as *; +@use './splitter' as *; +@use './switch' as *; +@use './stepper' as *; +@use './tabs' as *; +@use './time-picker' as *; +@use './toast' as *; +@use './tooltip' as *; +@use './tree' as *; +@use './watermark' as *; /// The default schema. Used to create Material Design themes. /// Use with light palettes. /// @type Map -/// @property {Map} igx-avatar [$_light-avatar] -/// @property {Map} igx-action-strip [$_light-action-strip] -/// @property {Map} igx-badge [$_light-badge] -/// @property {Map} igx-banner [$_light-banner] -/// @property {Map} igx-bottom-nav [$_light-bottom-nav] -/// @property {Map} igx-button [$_light-button] -/// @property {Map} igx-button-group [$_light-button-group] -/// @property {Map} igx-calendar [$_light-calendar] -/// @property {Map} igx-card [$_light-card] -/// @property {Map} igx-carousel [$_light-carousel] -/// @property {Map} category-chart [$_light-category-chart] -/// @property {Map} data-chart [$_light-data-chart] -/// @property {Map} doughnut-chart [$_light-dough-chart] -/// @property {Map} funnel-chart [$_light-funnel-chart] -/// @property {Map} igx-checkbox [$_light-checkbox] -/// @property {Map} igx-chip [$_light-chip] -/// @property {Map} igx-column-actions [$_light-column-actions] -/// @property {Map} igx-combo [$_light-combo] -/// @property {Map} igx-dialog [$_light-dialog] -/// @property {Map} igx-date-range-picker [$_light-date-range-picker ] -/// @property {Map} igx-divider [$_light-divider] -/// @property {Map} igc-dockmanager [$_light-dock-manager] -/// @property {Map} igx-drop-down [$_light-drop-down] -/// @property {Map} igx-expansion-panel [$_light-expansion-panel] -/// @property {Map} linear-gauge [$_light-linear-gauge] -/// @property {Map} radial-gauge [$_light-radial-gauge] -/// @property {Map} financial-chart [$_light-financial-chart] -/// @property {Map} bullet-graph [$_light-graph] -/// @property {Map} igx-grid [$_light-grid] -/// @property {Map} igx-grid-filtering [$_light-grid-filtering] -/// @property {Map} igx-paginator [$_light-pagination] -/// @property {Map} igx-grid-summary [$_light-grid-summary] -/// @property {Map} igx-grid-toolbar [$_light-grid-toolbar] -/// @property {Map} igx-highlight [$_light-highlight] -/// @property {Map} igx-icon [$_light-icon] -/// @property {Map} igx-input-group [$_light-input-group] -/// @property {Map} igx-list [$_light-list] -/// @property {Map} geo-map [$_light-geo-map] -/// @property {Map} igx-navbar [$_light-navbar] -/// @property {Map} igx-nav-drawer [$_light-nav-drawer] -/// @property {Map} igx-overlay [$_light-overlay] -/// @property {Map} pie-chart [$_light-pie-chart] -/// @property {Map} igx-progress-linear [$_light-progress-linear] -/// @property {Map} igx-progress-circular [$_light-progress-circular] -/// @property {Map} igx-radio [$_light-radio] -/// @property {Map} igx-ripple [$_light-ripple] -/// @property {Map} igx-scrollbar [$_light-scrollbar] -/// @property {Map} shape-chart [$_light-shape-chart] -/// @property {Map} igx-slider [$_light-slider] -/// @property {Map} igx-snackbar [$_light-snackbar] -/// @property {Map} sparkline [$_light-sparkline] -/// @property {Map} igx-splitter [$_light-splitter] -/// @property {Map} igx-switch [$_light-switch] -/// @property {Map} igx-stepper [$_light-stepper] -/// @property {Map} igx-tabs [$_light-tabs] -/// @property {Map} igx-time-picker [$_light-time-picker] -/// @property {Map} igx-toast [$_light-toast] -/// @property {Map} igx-tooltip [$_light-tooltip] -/// @property {Map} igx-tree [$_light-tree] +/// @property {Map} igx-avatar [$light-avatar] +/// @property {Map} igx-action-strip [$light-action-strip] +/// @property {Map} igx-badge [$light-badge] +/// @property {Map} igx-banner [$light-banner] +/// @property {Map} igx-bottom-nav [$light-bottom-nav] +/// @property {Map} igx-button [$light-button] +/// @property {Map} igx-button-group [$light-button-group] +/// @property {Map} igx-calendar [$light-calendar] +/// @property {Map} igx-card [$light-card] +/// @property {Map} igx-carousel [$light-carousel] +/// @property {Map} category-chart [$light-category-chart] +/// @property {Map} data-chart [$light-data-chart] +/// @property {Map} doughnut-chart [$light-dough-chart] +/// @property {Map} funnel-chart [$light-funnel-chart] +/// @property {Map} igx-checkbox [$light-checkbox] +/// @property {Map} igx-chip [$light-chip] +/// @property {Map} igx-column-actions [$light-column-actions] +/// @property {Map} igx-combo [$light-combo] +/// @property {Map} igx-dialog [$light-dialog] +/// @property {Map} igx-date-range-picker [$light-date-range-picker ] +/// @property {Map} igx-divider [$light-divider] +/// @property {Map} igc-dockmanager [$light-dock-manager] +/// @property {Map} igx-drop-down [$light-drop-down] +/// @property {Map} igx-expansion-panel [$light-expansion-panel] +/// @property {Map} linear-gauge [$light-linear-gauge] +/// @property {Map} radial-gauge [$light-radial-gauge] +/// @property {Map} financial-chart [$light-financial-chart] +/// @property {Map} bullet-graph [$light-graph] +/// @property {Map} igx-grid [$light-grid] +/// @property {Map} igx-grid-filtering [$light-grid-filtering] +/// @property {Map} igx-paginator [$light-pagination] +/// @property {Map} igx-grid-summary [$light-grid-summary] +/// @property {Map} igx-grid-toolbar [$light-grid-toolbar] +/// @property {Map} igx-highlight [$light-highlight] +/// @property {Map} igx-icon [$light-icon] +/// @property {Map} igx-input-group [$light-input-group] +/// @property {Map} igx-list [$light-list] +/// @property {Map} geo-map [$light-geo-map] +/// @property {Map} igx-navbar [$light-navbar] +/// @property {Map} igx-nav-drawer [$light-nav-drawer] +/// @property {Map} igx-overlay [$light-overlay] +/// @property {Map} pie-chart [$light-pie-chart] +/// @property {Map} igx-progress-linear [$light-progress-linear] +/// @property {Map} igx-progress-circular [$light-progress-circular] +/// @property {Map} igx-radio [$light-radio] +/// @property {Map} igx-ripple [$light-ripple] +/// @property {Map} igx-scrollbar [$light-scrollbar] +/// @property {Map} shape-chart [$light-shape-chart] +/// @property {Map} igx-slider [$light-slider] +/// @property {Map} igx-snackbar [$light-snackbar] +/// @property {Map} sparkline [$light-sparkline] +/// @property {Map} igx-splitter [$light-splitter] +/// @property {Map} igx-switch [$light-switch] +/// @property {Map} igx-stepper [$light-stepper] +/// @property {Map} igx-tabs [$light-tabs] +/// @property {Map} igx-time-picker [$light-time-picker] +/// @property {Map} igx-toast [$light-toast] +/// @property {Map} igx-tooltip [$light-tooltip] +/// @property {Map} igx-tree [$light-tree] $light-schema: ( - igx-avatar: $_light-avatar, - igx-action-strip: $_light-action-strip, - igx-badge: $_light-badge, - igx-banner: $_light-banner, - igx-bottom-nav: $_light-bottom-nav, - igx-button: $_light-button, - igx-button-group: $_light-button-group, - igx-calendar: $_light-calendar, - igx-card: $_light-card, - igx-carousel: $_light-carousel, - category-chart: $_light-category-chart, - data-chart: $_light-data-chart, - doughnut-chart: $_light-doughnut-chart, - funnel-chart: $_light-funnel-chart, - igx-checkbox: $_light-checkbox, - igx-chip: $_light-chip, - igx-column-actions: $_light-column-actions, - igx-combo: $_light-combo, - igx-dialog: $_light-dialog, - igx-date-range: $_light-date-range-picker, - igx-divider: $_light-divider, - igc-dockmanager: $_light-dock-manager, - igx-drop-down: $_light-drop-down, - igx-expansion-panel: $_light-expansion-panel, - linear-gauge: $_light-linear-gauge, - radial-gauge: $_light-radial-gauge, - financial-chart: $_light-financial-chart, - bullet-graph: $_light-graph, - igx-grid: $_light-grid, - igx-grid-filtering: $_light-grid-filtering, - igx-paginator: $_light-pagination, - igx-grid-summary: $_light-grid-summary, - igx-grid-toolbar: $_light-grid-toolbar, - igx-highlight: $_light-highlight, - igx-icon: $_light-icon, - igx-input-group: $_light-input-group, - igx-list: $_light-list, - geo-map: $_light-geo-map, - igx-navbar: $_light-navbar, - igx-nav-drawer: $_light-navdrawer, - igx-overlay: $_light-overlay, - igx-linear-bar: $_light-progress-linear, - igx-circular-bar: $_light-progress-circular, - pie-chart: $_light-pie-chart, - igx-radio: $_light-radio, - igx-ripple: $_light-ripple, - shape-chart: $_light-shape-chart, - igx-scrollbar: $_light-scrollbar, - igx-slider: $_light-slider, - igx-snackbar: $_light-snackbar, - sparkline: $_light-sparkline, - igx-splitter: $_light-splitter, - igx-switch: $_light-switch, - igx-stepper: $_light-stepper, - igx-tabs: $_light-tabs, - igx-time-picker: $_light-time-picker, - igx-toast: $_light-toast, - igx-tooltip: $_light-tooltip, - igx-tree: $_light-tree, - igx-watermark: $_light-watermark + igx-avatar: $light-avatar, + igx-action-strip: $light-action-strip, + igx-badge: $light-badge, + igx-banner: $light-banner, + igx-bottom-nav: $light-bottom-nav, + igx-button: $light-button, + igx-button-group: $light-button-group, + igx-calendar: $light-calendar, + igx-card: $light-card, + igx-carousel: $light-carousel, + category-chart: $light-category-chart, + data-chart: $light-data-chart, + doughnut-chart: $light-doughnut-chart, + funnel-chart: $light-funnel-chart, + igx-checkbox: $light-checkbox, + igx-chip: $light-chip, + igx-column-actions: $light-column-actions, + igx-combo: $light-combo, + igx-dialog: $light-dialog, + igx-date-range: $light-date-range-picker, + igx-divider: $light-divider, + igc-dockmanager: $light-dock-manager, + igx-drop-down: $light-drop-down, + igx-expansion-panel: $light-expansion-panel, + linear-gauge: $light-linear-gauge, + radial-gauge: $light-radial-gauge, + financial-chart: $light-financial-chart, + bullet-graph: $light-graph, + igx-grid: $light-grid, + igx-grid-filtering: $light-grid-filtering, + igx-paginator: $light-pagination, + igx-grid-summary: $light-grid-summary, + igx-grid-toolbar: $light-grid-toolbar, + igx-highlight: $light-highlight, + igx-icon: $light-icon, + igx-input-group: $light-input-group, + igx-list: $light-list, + geo-map: $light-geo-map, + igx-navbar: $light-navbar, + igx-nav-drawer: $light-navdrawer, + igx-overlay: $light-overlay, + igx-linear-bar: $light-progress-linear, + igx-circular-bar: $light-progress-circular, + pie-chart: $light-pie-chart, + igx-radio: $light-radio, + igx-ripple: $light-ripple, + shape-chart: $light-shape-chart, + igx-scrollbar: $light-scrollbar, + igx-slider: $light-slider, + igx-snackbar: $light-snackbar, + sparkline: $light-sparkline, + igx-splitter: $light-splitter, + igx-switch: $light-switch, + igx-stepper: $light-stepper, + igx-tabs: $light-tabs, + igx-time-picker: $light-time-picker, + igx-toast: $light-toast, + igx-tooltip: $light-tooltip, + igx-tree: $light-tree, + igx-watermark: $light-watermark, ); /// An alias of $light-schema. @@ -197,197 +197,197 @@ $light-material-schema: $light-schema; /// Use in combination with light palettes. /// @type Map $light-fluent-schema: ( - igx-avatar: $_fluent-avatar, - igx-action-strip: $_fluent-action-strip, - igx-badge: $_fluent-badge, - igx-banner: $_fluent-banner, - igx-bottom-nav: $_fluent-bottom-nav, - igx-button: $_fluent-button, - igx-button-group: $_fluent-button-group, - igx-calendar: $_fluent-calendar, - igx-card: $_fluent-card, - igx-carousel: $_fluent-carousel, - category-chart: $_fluent-category-chart, - igx-checkbox: $_fluent-checkbox, - igx-chip: $_fluent-chip, - igx-column-actions: $_fluent-column-actions, - igx-combo: $_fluent-combo, - igx-dialog: $_fluent-dialog, - data-chart: $_fluent-data-chart, - doughnut-chart: $_fluent-doughnut-chart, - funnel-chart: $_fluent-funnel-chart, - igx-date-range: $_fluent-date-range-picker, - igx-divider: $_fluent-divider, - igc-dockmanager: $_fluent-dock-manager, - igx-drop-down: $_fluent-drop-down, - igx-expansion-panel: $_fluent-expansion-panel, - linear-gauge: $_fluent-linear-gauge, - radial-gauge: $_fluent-radial-gauge, - financial-chart: $_fluent-financial-chart, - bullet-graph: $_fluent-graph, - igx-grid: $_fluent-grid, - igx-grid-filtering: $_fluent-grid-filtering, - igx-paginator: $_fluent-pagination, - igx-grid-summary: $_fluent-grid-summary, - igx-grid-toolbar: $_fluent-grid-toolbar, - igx-highlight: $_fluent-highlight, - igx-icon: $_fluent-icon, - igx-input-group: $_fluent-input-group, - igx-list: $_fluent-list, - geo-map: $_fluent-geo-map, - igx-navbar: $_fluent-navbar, - igx-nav-drawer: $_fluent-navdrawer, - igx-overlay: $_fluent-overlay, - igx-linear-bar: $_fluent-progress-linear, - igx-circular-bar: $_fluent-progress-circular, - pie-chart: $_fluent-pie-chart, - igx-radio: $_fluent-radio, - igx-ripple: $_fluent-ripple, - shape-chart: $_fluent-shape-chart, - igx-scrollbar: $_fluent-scrollbar, - igx-slider: $_fluent-slider, - igx-snackbar: $_fluent-snackbar, - sparkline: $_fluent-sparkline, - igx-splitter: $_fluent-splitter, - igx-switch: $_fluent-switch, - igx-stepper: $_fluent-stepper, - igx-tabs: $_fluent-tabs, - igx-time-picker: $_fluent-time-picker, - igx-toast: $_fluent-toast, - igx-tooltip: $_fluent-tooltip, - igx-tree: $_fluent-tree, - igx-watermark: $_fluent-watermark + igx-avatar: $fluent-avatar, + igx-action-strip: $fluent-action-strip, + igx-badge: $fluent-badge, + igx-banner: $fluent-banner, + igx-bottom-nav: $fluent-bottom-nav, + igx-button: $fluent-button, + igx-button-group: $fluent-button-group, + igx-calendar: $fluent-calendar, + igx-card: $fluent-card, + igx-carousel: $fluent-carousel, + category-chart: $fluent-category-chart, + igx-checkbox: $fluent-checkbox, + igx-chip: $fluent-chip, + igx-column-actions: $fluent-column-actions, + igx-combo: $fluent-combo, + igx-dialog: $fluent-dialog, + data-chart: $fluent-data-chart, + doughnut-chart: $fluent-doughnut-chart, + funnel-chart: $fluent-funnel-chart, + igx-date-range: $fluent-date-range-picker, + igx-divider: $fluent-divider, + igc-dockmanager: $fluent-dock-manager, + igx-drop-down: $fluent-drop-down, + igx-expansion-panel: $fluent-expansion-panel, + linear-gauge: $fluent-linear-gauge, + radial-gauge: $fluent-radial-gauge, + financial-chart: $fluent-financial-chart, + bullet-graph: $fluent-graph, + igx-grid: $fluent-grid, + igx-grid-filtering: $fluent-grid-filtering, + igx-paginator: $fluent-pagination, + igx-grid-summary: $fluent-grid-summary, + igx-grid-toolbar: $fluent-grid-toolbar, + igx-highlight: $fluent-highlight, + igx-icon: $fluent-icon, + igx-input-group: $fluent-input-group, + igx-list: $fluent-list, + geo-map: $fluent-geo-map, + igx-navbar: $fluent-navbar, + igx-nav-drawer: $fluent-navdrawer, + igx-overlay: $fluent-overlay, + igx-linear-bar: $fluent-progress-linear, + igx-circular-bar: $fluent-progress-circular, + pie-chart: $fluent-pie-chart, + igx-radio: $fluent-radio, + igx-ripple: $fluent-ripple, + shape-chart: $fluent-shape-chart, + igx-scrollbar: $fluent-scrollbar, + igx-slider: $fluent-slider, + igx-snackbar: $fluent-snackbar, + sparkline: $fluent-sparkline, + igx-splitter: $fluent-splitter, + igx-switch: $fluent-switch, + igx-stepper: $fluent-stepper, + igx-tabs: $fluent-tabs, + igx-time-picker: $fluent-time-picker, + igx-toast: $fluent-toast, + igx-tooltip: $fluent-tooltip, + igx-tree: $fluent-tree, + igx-watermark: $fluent-watermark, ); /// Used to create bootstrap component themes. /// Use in combination with light palettes. /// @type Map $light-bootstrap-schema: ( - igx-avatar: $_bootstrap-avatar, - igx-action-strip: $_bootstrap-action-strip, - igx-badge: $_bootstrap-badge, - igx-banner: $_bootstrap-banner, - igx-bottom-nav: $_bootstrap-bottom-nav, - igx-button: $_bootstrap-button, - igx-button-group: $_bootstrap-button-group, - igx-calendar: $_bootstrap-calendar, - igx-card: $_bootstrap-card, - igx-carousel: $_bootstrap-carousel, - category-chart: $_bootstrap-category-chart, - igx-checkbox: $_bootstrap-checkbox, - igx-chip: $_bootstrap-chip, - igx-column-actions: $_bootstrap-column-actions, - igx-combo: $_bootstrap-combo, - igx-dialog: $_bootstrap-dialog, - data-chart: $_bootstrap-data-chart, - doughnut-chart: $_bootstrap-doughnut-chart, - funnel-chart: $_bootstrap-funnel-chart, - igx-date-range: $_bootstrap-date-range-picker, - igx-divider: $_bootstrap-divider, - igc-dockmanager: $_bootstrap-dock-manager, - igx-drop-down: $_bootstrap-drop-down, - igx-expansion-panel: $_bootstrap-expansion-panel, - linear-gauge: $_bootstrap-linear-gauge, - radial-gauge: $_bootstrap-radial-gauge, - financial-chart: $_bootstrap-financial-chart, - bullet-graph: $_bootstrap-graph, - igx-grid: $_bootstrap-grid, - igx-grid-filtering: $_bootstrap-grid-filtering, - igx-paginator: $_bootstrap-pagination, - igx-grid-summary: $_bootstrap-grid-summary, - igx-grid-toolbar: $_bootstrap-grid-toolbar, - igx-highlight: $_bootstrap-highlight, - igx-icon: $_bootstrap-icon, - igx-input-group: $_bootstrap-input-group, - igx-list: $_bootstrap-list, - geo-map: $_bootstrap-geo-map, - igx-navbar: $_bootstrap-navbar, - igx-nav-drawer: $_bootstrap-navdrawer, - igx-overlay: $_bootstrap-overlay, - igx-linear-bar: $_bootstrap-progress-linear, - igx-circular-bar: $_bootstrap-progress-circular, - pie-chart: $_bootstrap-pie-chart, - igx-radio: $_bootstrap-radio, - igx-ripple: $_bootstrap-ripple, - shape-chart: $_bootstrap-shape-chart, - igx-scrollbar: $_bootstrap-scrollbar, - igx-slider: $_bootstrap-slider, - igx-snackbar: $_bootstrap-snackbar, - sparkline: $_bootstrap-sparkline, - igx-splitter: $_bootstrap-splitter, - igx-switch: $_bootstrap-switch, - igx-stepper: $_bootstrap-stepper, - igx-tabs: $_bootstrap-tabs, - igx-time-picker: $_bootstrap-time-picker, - igx-toast: $_bootstrap-toast, - igx-tooltip: $_bootstrap-tooltip, - igx-tree: $_bootstrap-tree, - igx-watermark: $_bootstrap-watermark + igx-avatar: $bootstrap-avatar, + igx-action-strip: $bootstrap-action-strip, + igx-badge: $bootstrap-badge, + igx-banner: $bootstrap-banner, + igx-bottom-nav: $bootstrap-bottom-nav, + igx-button: $bootstrap-button, + igx-button-group: $bootstrap-button-group, + igx-calendar: $bootstrap-calendar, + igx-card: $bootstrap-card, + igx-carousel: $bootstrap-carousel, + category-chart: $bootstrap-category-chart, + igx-checkbox: $bootstrap-checkbox, + igx-chip: $bootstrap-chip, + igx-column-actions: $bootstrap-column-actions, + igx-combo: $bootstrap-combo, + igx-dialog: $bootstrap-dialog, + data-chart: $bootstrap-data-chart, + doughnut-chart: $bootstrap-doughnut-chart, + funnel-chart: $bootstrap-funnel-chart, + igx-date-range: $bootstrap-date-range-picker, + igx-divider: $bootstrap-divider, + igc-dockmanager: $bootstrap-dock-manager, + igx-drop-down: $bootstrap-drop-down, + igx-expansion-panel: $bootstrap-expansion-panel, + linear-gauge: $bootstrap-linear-gauge, + radial-gauge: $bootstrap-radial-gauge, + financial-chart: $bootstrap-financial-chart, + bullet-graph: $bootstrap-graph, + igx-grid: $bootstrap-grid, + igx-grid-filtering: $bootstrap-grid-filtering, + igx-paginator: $bootstrap-pagination, + igx-grid-summary: $bootstrap-grid-summary, + igx-grid-toolbar: $bootstrap-grid-toolbar, + igx-highlight: $bootstrap-highlight, + igx-icon: $bootstrap-icon, + igx-input-group: $bootstrap-input-group, + igx-list: $bootstrap-list, + geo-map: $bootstrap-geo-map, + igx-navbar: $bootstrap-navbar, + igx-nav-drawer: $bootstrap-navdrawer, + igx-overlay: $bootstrap-overlay, + igx-linear-bar: $bootstrap-progress-linear, + igx-circular-bar: $bootstrap-progress-circular, + pie-chart: $bootstrap-pie-chart, + igx-radio: $bootstrap-radio, + igx-ripple: $bootstrap-ripple, + shape-chart: $bootstrap-shape-chart, + igx-scrollbar: $bootstrap-scrollbar, + igx-slider: $bootstrap-slider, + igx-snackbar: $bootstrap-snackbar, + sparkline: $bootstrap-sparkline, + igx-splitter: $bootstrap-splitter, + igx-switch: $bootstrap-switch, + igx-stepper: $bootstrap-stepper, + igx-tabs: $bootstrap-tabs, + igx-time-picker: $bootstrap-time-picker, + igx-toast: $bootstrap-toast, + igx-tooltip: $bootstrap-tooltip, + igx-tree: $bootstrap-tree, + igx-watermark: $bootstrap-watermark, ); /// Used to create indigo component themes. /// Use in combination with light palettes. /// @type Map $light-indigo-schema: ( - igx-avatar: $_indigo-avatar, - igx-action-strip: $_indigo-action-strip, - igx-badge: $_indigo-badge, - igx-banner: $_indigo-banner, - igx-bottom-nav: $_indigo-bottom-nav, - igx-button: $_indigo-button, - igx-button-group: $_indigo-button-group, - igx-calendar: $_indigo-calendar, - igx-card: $_indigo-card, - igx-carousel: $_indigo-carousel, - category-chart: $_indigo-category-chart, - igx-checkbox: $_indigo-checkbox, - igx-chip: $_indigo-chip, - igx-column-actions: $_bootstrap-column-actions, - igx-combo: $_indigo-combo, - igx-dialog: $_indigo-dialog, - data-chart: $_indigo-data-chart, - doughnut-chart: $_indigo-doughnut-chart, - funnel-chart: $_indigo-funnel-chart, - igx-date-range: $_indigo-date-range-picker, - igx-drop-down: $_indigo-drop-down, - igx-divider: $_indigo-divider, - igc-dockmanager: $_indigo-dock-manager, - igx-expansion-panel: $_indigo-expansion-panel, - linear-gauge: $_indigo-linear-gauge, - radial-gauge: $_indigo-radial-gauge, - financial-chart: $_indigo-financial-chart, - bullet-graph: $_indigo-graph, - igx-grid: $_indigo-grid, - igx-grid-filtering: $_indigo-grid-filtering, - igx-paginator: $_indigo-pagination, - igx-grid-summary: $_indigo-grid-summary, - igx-grid-toolbar: $_indigo-grid-toolbar, - igx-highlight: $_indigo-highlight, - igx-icon: $_indigo-icon, - igx-input-group: $_indigo-input-group, - igx-list: $_indigo-list, - geo-map: $_indigo-geo-map, - igx-navbar: $_indigo-navbar, - igx-nav-drawer: $_indigo-navdrawer, - igx-overlay: $_indigo-overlay, - igx-linear-bar: $_indigo-progress-linear, - igx-circular-bar: $_indigo-progress-circular, - pie-chart: $_indigo-pie-chart, - igx-radio: $_indigo-radio, - shape-chart: $_indigo-shape-chart, - igx-ripple: $_indigo-ripple, - igx-scrollbar: $_indigo-scrollbar, - igx-slider: $_indigo-slider, - igx-snackbar: $_indigo-snackbar, - sparkline: $_indigo-sparkline, - igx-splitter: $_indigo-splitter, - igx-switch: $_indigo-switch, - igx-stepper: $_indigo-stepper, - igx-tabs: $_indigo-tabs, - igx-time-picker: $_indigo-time-picker, - igx-toast: $_indigo-toast, - igx-tooltip: $_indigo-tooltip, - igx-tree: $_indigo-tree, - igx-watermark: $_indigo-watermark + igx-avatar: $indigo-avatar, + igx-action-strip: $indigo-action-strip, + igx-badge: $indigo-badge, + igx-banner: $indigo-banner, + igx-bottom-nav: $indigo-bottom-nav, + igx-button: $indigo-button, + igx-button-group: $indigo-button-group, + igx-calendar: $indigo-calendar, + igx-card: $indigo-card, + igx-carousel: $indigo-carousel, + category-chart: $indigo-category-chart, + igx-checkbox: $indigo-checkbox, + igx-chip: $indigo-chip, + igx-column-actions: $bootstrap-column-actions, + igx-combo: $indigo-combo, + igx-dialog: $indigo-dialog, + data-chart: $indigo-data-chart, + doughnut-chart: $indigo-doughnut-chart, + funnel-chart: $indigo-funnel-chart, + igx-date-range: $indigo-date-range-picker, + igx-drop-down: $indigo-drop-down, + igx-divider: $indigo-divider, + igc-dockmanager: $indigo-dock-manager, + igx-expansion-panel: $indigo-expansion-panel, + linear-gauge: $indigo-linear-gauge, + radial-gauge: $indigo-radial-gauge, + financial-chart: $indigo-financial-chart, + bullet-graph: $indigo-graph, + igx-grid: $indigo-grid, + igx-grid-filtering: $indigo-grid-filtering, + igx-paginator: $indigo-pagination, + igx-grid-summary: $indigo-grid-summary, + igx-grid-toolbar: $indigo-grid-toolbar, + igx-highlight: $indigo-highlight, + igx-icon: $indigo-icon, + igx-input-group: $indigo-input-group, + igx-list: $indigo-list, + geo-map: $indigo-geo-map, + igx-navbar: $indigo-navbar, + igx-nav-drawer: $indigo-navdrawer, + igx-overlay: $indigo-overlay, + igx-linear-bar: $indigo-progress-linear, + igx-circular-bar: $indigo-progress-circular, + pie-chart: $indigo-pie-chart, + igx-radio: $indigo-radio, + shape-chart: $indigo-shape-chart, + igx-ripple: $indigo-ripple, + igx-scrollbar: $indigo-scrollbar, + igx-slider: $indigo-slider, + igx-snackbar: $indigo-snackbar, + sparkline: $indigo-sparkline, + igx-splitter: $indigo-splitter, + igx-switch: $indigo-switch, + igx-stepper: $indigo-stepper, + igx-tabs: $indigo-tabs, + igx-time-picker: $indigo-time-picker, + igx-toast: $indigo-toast, + igx-tooltip: $indigo-tooltip, + igx-tree: $indigo-tree, + igx-watermark: $indigo-watermark, ); diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_input-group.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_input-group.scss index aaa55e673f8..ad925d4e650 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_input-group.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_input-group.scss @@ -1,5 +1,6 @@ -@import '../shape/input-group'; -@import '../elevation/input-group'; +@use '../../../base' as *; +@use '../shape/input-group' as *; +@use '../elevation/input-group' as *; //// /// @group schemas @@ -27,13 +28,13 @@ /// @prop {Map} idle-bottom-line-color [igx-color: ('grays', 600)] - The bottom line and border colors in the idle state. /// @prop {Map} hover-bottom-line-color [igx-color: ('grays', 900)] - The bottom line and border colors in the hover state. /// @prop {Map} focused-bottom-line-color [igx-color: ('primary', 500)] - The bottom line and border colors in the focused state. -/// @prop {Map} interim-bottom-line-color [igx-color: ('primary', 500), rgba: .12] - The bottom line and border colors during the to-focused transition. +/// @prop {Map} interim-bottom-line-color [igx-color: ('primary', 500, .12)] - The bottom line and border colors during the to-focused transition. /// @prop {Map} disabled-bottom-line-color [igx-color: ('grays', 500)] - The bottom line and border colors in the disabled state. /// /// @prop {Map} border-color [igx-color: ('grays', 600)] - The border color for input groups of type border and fluent. /// @prop {Map} hover-border-color [igx-color: ('grays', 900)] - The hover input border for input groups of type border and fluent. /// @prop {Map} focused-border-color [igx-color: ('primary', 500)] - The focused input border color for input groups of type border and fluent. -/// @prop {Map} disabled-border-color [igx-color: ('grays', 500), rgba: .06] - The disabled border color for input groups of type border and fluent. +/// @prop {Map} disabled-border-color [igx-color: ('grays', 500, .12)] - The disabled border color for input groups of type border and fluent. /// /// @prop {Map} box-background [igx-color: ('grays', 200)] - The background color of an input group of type box. /// @prop {Map} box-disabled-background [igx-color: ('grays', 100)] - The background color of an input group of type box in the disabled state. @@ -41,7 +42,7 @@ /// @prop {Color} border-background [transparent] - The background color of an input group of type border. /// @prop {Map} border-disabled-background [igx-color: ('grays', 100)] - The background color of an input group of type border in the disabled state. /// -/// @prop {Color} search-background [#fff] - The background color of an input group of type search. +/// @prop {Color} search-background [igx-color: ('grays', 50)] - The background color of an input group of type search. /// @prop {Map} search-disabled-background [igx-color: ('grays', 100)] - The background color of an input group of type search in the disabled state. /// /// @prop {Number} search-resting-elevation [1] - The elevation level, between 0-24, to be used for the resting state of the search input. @@ -62,12 +63,12 @@ /// @prop {Color} label-floated-disabled-background [igx-color: surface] - The background color of the label when floated for input group of type border in its disabled state. /// /// @requires {function} extend -/// @requires {Map} $_default-shape-input-group -/// @requires {Map} $_default-elevation-input-group +/// @requires {Map} $default-shape-input-group +/// @requires {Map} $default-elevation-input-group /// @see $default-palette -$_light-input-group: extend( - $_default-shape-input-group, - $_default-elevation-input-group, +$light-input-group: extend( + $default-shape-input-group, + $default-elevation-input-group, ( variant: 'material', @@ -136,8 +137,7 @@ $_light-input-group: extend( ), interim-bottom-line-color: ( - igx-color: ('primary', 500), - rgba: .12 + igx-color: ('primary', 500, .12), ), disabled-bottom-line-color: ( @@ -145,12 +145,11 @@ $_light-input-group: extend( ), disabled-border-color: ( - igx-color: ('grays', 500), - rgba: .12 + igx-color: ('grays', 500, .12), ), box-background: ( - igx-color: ('grays', 200) + igx-color: ('grays', 200, .38) ), box-disabled-background: ( @@ -169,7 +168,9 @@ $_light-input-group: extend( igx-color: surface ), - search-background: #fff, + search-background: ( + igx-color: ('grays', 50) + ), search-disabled-background: ( igx-color: ('grays', 100) @@ -209,8 +210,8 @@ $_light-input-group: extend( /// /// @prop {Color} search-disabled-background [igx-color: ('grays', 100)] - The background color of an input group of type search in the disabled state. /// -/// @prop {Color} input-prefix-background [igx-color: ('grays', 100), to-opaque: #fff] - The background color of an input prefix of type line, box, border and fluent. -/// @prop {Color} input-suffix-background [ igx-color: ('grays', 100), to-opaque: #fff] - The background color of an input suffix of type line, box, border and fluent. +/// @prop {Color} input-prefix-background [igx-color: ('grays', 100)] - The background color of an input prefix of type line, box, border and fluent. +/// @prop {Color} input-suffix-background [ igx-color: ('grays', 100)] - The background color of an input suffix of type line, box, border and fluent. /// /// @prop {Number} search-resting-elevation [0] - The elevation level, between 0-24, to be used for the resting state of the search input. /// @prop {Number} search-hover-elevation [0] - The elevation level, between 0-24, to be used for the hover state of the search input. @@ -221,13 +222,13 @@ $_light-input-group: extend( /// @prop {Number} search-border-radius [2px] - The border radius used for search input. Can be a fraction between 0 and 1, pixels, or percent. /// /// @requires {function} extend -/// @requires {Map} $_light-input-group -/// @requires {Map} $_fluent-shape-input-group -/// @requires {Map} $_fluent-elevation-input-group -$_fluent-input-group: extend( - $_light-input-group, - $_fluent-shape-input-group, - $_fluent-elevation-input-group, +/// @requires {Map} $light-input-group +/// @requires {Map} $fluent-shape-input-group +/// @requires {Map} $fluent-elevation-input-group +$fluent-input-group: extend( + $light-input-group, + $fluent-shape-input-group, + $fluent-elevation-input-group, ( variant: 'fluent', @@ -256,41 +257,38 @@ $_fluent-input-group: extend( ), input-prefix-background: ( - igx-color: ('grays', 100), - to-opaque: #fff + igx-color: ('grays', 200), ), input-suffix-background: ( - igx-color: ('grays', 100), - to-opaque: #fff + igx-color: ('grays', 200), ), ) ); /// Generates a bootstrap input-group schema. /// @type {Map} -/// @prop {Map} border-color [igx-color: ('grays', 400), to-opaque: #fff] - The border color for input groups of type border and fluent. +/// @prop {Map} border-color [igx-color: ('grays', 400)] - The border color for input groups of type border and fluent. /// @prop {Map} input-prefix-color [igx-color: ('grays', 800)] - The text color of an input prefix of type line, box and border. /// @prop {Map} idle-secondary-color [igx-color: ('grays', 800)] - The label color in the idle state. /// @prop {Map} input-suffix-color [igx-color: ('grays', 800)] - The text color of an input sufix of type line, box and border. -/// @prop {Map} disabled-border-color [igx-color: ('grays', 300), to-opaque: #fff] - The disabled border color for input groups of type border and fluent. +/// @prop {Map} disabled-border-color [igx-color: ('grays', 300)] - The disabled border color for input groups of type border and fluent. /// @prop {Color} input-prefix-background [igx-color: ('grays', 300)] - The background color of an input prefix of type line, box, border and fluent. /// @prop {Color} input-suffix-background [ igx-color: ('grays', 300)] - The background color of an input suffix of type line, box, border and fluent. /// @prop {Number} box-border-radius [.2] - The border radius used for box input. Can be a fraction between 0 and 1, pixels, or percent. /// @prop {Number} border-border-radius [.2] - The border radius used for border input. Can be a fraction between 0 and 1, pixels, or percent. /// @prop {Number} search-border-radius [.2] - The border radius used for search input. Can be a fraction between 0 and 1, pixels, or percent. /// @requires {function} extend -/// @requires {Map} $_light-input-group -/// @requires {Map} $_bootstrap-shape-input-group -$_bootstrap-input-group: extend( - $_light-input-group, - $_bootstrap-shape-input-group, +/// @requires {Map} $light-input-group +/// @requires {Map} $bootstrap-shape-input-group +$bootstrap-input-group: extend( + $light-input-group, + $bootstrap-shape-input-group, ( variant: 'bootstrap', border-color: ( - igx-color: ('grays', 400), - to-opaque: #fff + igx-color: ('grays', 400) ), input-prefix-color: ( @@ -314,8 +312,7 @@ $_bootstrap-input-group: extend( ), disabled-border-color: ( - igx-color: ('grays', 300), - to-opaque: #fff + igx-color: ('grays', 300) ) ) ); @@ -338,13 +335,13 @@ $_bootstrap-input-group: extend( /// @prop {Number} border-border-radius [0] - The border radius used for border input. Can be a fraction between 0 and 1, pixels, or percent. /// @prop {Number} search-border-radius [2px] - The border radius used for search input. Can be a fraction between 0 and 1, pixels, or percent. /// @requires {function} extend -/// @requires {Map} $_light-input-group -/// @requires {Map} $_indigo-shape-input-group -/// @requires {Map} $_indigo-elevation-input-group -$_indigo-input-group: extend( - $_light-input-group, - $_indigo-shape-input-group, - $_indigo-elevation-input-group, +/// @requires {Map} $light-input-group +/// @requires {Map} $indigo-shape-input-group +/// @requires {Map} $indigo-elevation-input-group +$indigo-input-group: extend( + $light-input-group, + $indigo-shape-input-group, + $indigo-elevation-input-group, ( variant: 'indigo-design', diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_list.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_list.scss index f115ff79c23..cbe4da1f201 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_list.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_list.scss @@ -1,4 +1,5 @@ -@import '../shape/list'; +@use '../../../base' as *; +@use '../shape/list' as *; //// /// @group schemas @@ -14,12 +15,12 @@ /// @property {Map} header-text-color [igx-color: ('secondary', 500)] - The list header text color. /// /// @property {Map} item-background [igx-color: 'surface'] - The list item background color. -/// @property {Map} item-background-hover [igx-color: ('grays', 200), to-opaque: (#fff)] - The list item hover background. -/// @property {Map} item-background-active [igx-color: ('grays', 200), to-opaque: (#fff)] - The active list item background color. +/// @property {Map} item-background-hover [igx-color: ('grays', 200)] - The list item hover background. +/// @property {Map} item-background-active [igx-color: ('grays', 200)] - The active list item background color. /// -/// @property {Map} item-text-color [igx-color: 'surface', text-contrast: (), rgba: .74] - The list item text color. -/// @property {Map} item-text-color-hover [igx-color: 'surface', text-contrast: (), rgba: .74] - The list item text color. -/// @property {Map} item-text-color-active [igx-color: 'surface', text-contrast: (), rgba: .74] - The active list item text color. +/// @property {Map} item-text-color [igx-color: ('grays', 700)] - The list item text color. +/// @property {Map} item-text-color-hover [igx-color: ('grays', 700)] - The list item text color. +/// @property {Map} item-text-color-active [igx-color: ('grays', 700)] - The active list item text color. /// /// @property {Color} item-title-color ["'currentColor'"] - The list item title color. /// @property {Color} item-title-color-hover ["'currentColor'"] - The list item title hover color. @@ -43,10 +44,10 @@ /// @prop {Color} border-width [0] - The list border width. /// /// @requires {function} extend -/// @requires {Map} $_default-shape-list +/// @requires {Map} $default-shape-list /// @see $default-palette -$_light-list: extend( - $_default-shape-list, +$light-list: extend( + $default-shape-list, ( background: ( igx-color: 'surface' @@ -66,30 +67,22 @@ $_light-list: extend( item-background-hover: ( igx-color: ('grays', 200), - to-opaque: (#fff) ), item-background-active: ( igx-color: ('grays', 200), - to-opaque: (#fff) ), item-text-color: ( - igx-color: 'surface', - text-contrast: (), - rgba: .74 + igx-color: ('grays', 700), ), item-text-color-hover: ( - igx-color: 'surface', - text-contrast: (), - rgba: .74 + igx-color: ('grays', 700), ), item-text-color-active: ( - igx-color: 'surface', - text-contrast: (), - rgba: .74 + igx-color: ('grays', 700), ), item-title-color: "'currentColor'", @@ -125,15 +118,14 @@ $_light-list: extend( /// Generates a fluent list schema. /// @type {Map} /// @requires {function} extend -/// @requires {Map} $_light-list -$_fluent-list: extend($_light-list); +/// @requires {Map} $light-list +$fluent-list: extend($light-list); /// Generates a bootstrap list schema. /// @type {Map} -/// @property {Map} header-background [#fff] - The list header background color. +/// @property {Map} header-background [igx-color: ('surface')] - The list header background color. /// -/// @property {Map} item-background [#fff] - The list item background color. -/// @property {Map} item-background-hover [igx-color: ('grays', 100), to-opaque: (#fff)] - The list item hover background. +/// @property {Map} item-background [igx-color: ('surface')] - The list item background color. /// /// @property {Map} item-text-color [igx-color: ('grays', 900)] - The list item text color. /// @property {Map} item-text-color-hover [igx-color: ('grays', 900)] - The list item text color. @@ -144,11 +136,11 @@ $_fluent-list: extend($_light-list); /// @prop {Number} border-color [igx-color: ('grays', 300)] - The list border color. /// @prop {Color} border-width [rem(1px)] - The list border width. /// @requires {function} extend -/// @requires {Map} $_light-list -/// @requires {Map} $_bootstrap-shape-list -$_bootstrap-list: extend( - $_light-list, - $_bootstrap-shape-list, +/// @requires {Map} $light-list +/// @requires {Map} $bootstrap-shape-list +$bootstrap-list: extend( + $light-list, + $bootstrap-shape-list, ( variant: 'bootstrap', @@ -158,13 +150,12 @@ $_bootstrap-list: extend( igx-color: ('grays', 300) ), - item-background: #fff, - - header-background: #fff, + item-background: ( + igx-color: ('surface') + ), - item-background-hover: ( - igx-color: ('grays', 100), - to-opaque: (#fff) + header-background: ( + igx-color: ('surface') ), item-text-color: ( @@ -186,8 +177,8 @@ $_bootstrap-list: extend( /// /// @property {Map} header-text-color [igx-color: ('primary', 500)] - The list header text color. /// -/// @property {Map} item-background-hover [igx-color: ('primary', 500), rgba: .15, to-opaque: (igx-color: 'surface')] - The list item hover background. -/// @property {Map} item-background-active [ igx-color: ('primary', 500), rgba: .15, to-opaque: (igx-color: 'surface')] - The active list item background color. +/// @property {Map} item-background-hover [igx-color: ('primary', 400)] - The list item hover background. +/// @property {Map} item-background-active [ igx-color: ('primary', 400)] - The active list item background color. /// /// @property {Map} item-text-color [igx-color: ('grays', 900)] - The list item text color. /// @property {Map} item-text-color-hover [igx-color: ('grays', 900)] - The list item text color. @@ -209,11 +200,11 @@ $_bootstrap-list: extend( /// @prop {Number} item-border-radius [2px] - The border radius used for list item. Can be a fraction between 0 and 1, pixels, or percent. /// /// @requires {function} extend -/// @requires {Map} $_light-list -/// @requires {Map} $_indigo-shape-list -$_indigo-list: extend( - $_light-list, - $_indigo-shape-list, +/// @requires {Map} $light-list +/// @requires {Map} $indigo-shape-list +$indigo-list: extend( + $light-list, + $indigo-shape-list, ( variant: 'indigo-design', @@ -222,19 +213,11 @@ $_indigo-list: extend( ), item-background-hover: ( - igx-color: ('primary', 500), - rgba: .15, - to-opaque: ( - igx-color: 'surface', - ) + igx-color: ('primary', 50), ), item-background-active: ( - igx-color: ('primary', 500), - rgba: .15, - to-opaque: ( - igx-color: 'surface', - ) + igx-color: ('primary', 50), ), item-text-color: ( diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_navbar.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_navbar.scss index e1fa7deb66a..a694b1e3132 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_navbar.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_navbar.scss @@ -1,4 +1,5 @@ -@import '../elevation/navbar'; +@use '../../../base' as *; +@use '../elevation/navbar' as *; //// /// @group schemas @@ -16,10 +17,10 @@ /// @prop {Number} elevation [4] - The elevation level, between 0-24, to be used for the navbar. /// /// @requires {function} extend -/// @requires {Map} $_default-elevation-navbar +/// @requires {Map} $default-elevation-navbar /// @see $default-palette -$_light-navbar: extend( - $_default-elevation-navbar, +$light-navbar: extend( + $default-elevation-navbar, ( background: ( igx-color: ('primary', 500) @@ -41,9 +42,8 @@ $_light-navbar: extend( /// Generates a fluent navbar schema. /// @type {Map} -/// @requires {function} extend -/// @requires {Map} $_light-navbar -$_fluent-navbar: extend($_light-navbar); +/// @requires {Map} $light-navbar +$fluent-navbar: $light-navbar; /// Generates a bootstrap navbar schema. /// @type {Map} @@ -53,11 +53,11 @@ $_fluent-navbar: extend($_light-navbar); /// @prop {Map} hover-icon-color [igx-contrast-color: 'surface'] - The navbar hover icon color. /// @prop {Number} elevation [0] - The elevation level, between 0-24, to be used for the navbar. /// @requires {function} extend -/// @requires {Map} $_light-navbar -/// @requires {Map} $_bootstrap-elevation-navbar -$_bootstrap-navbar: extend( - $_light-navbar, - $_bootstrap-elevation-navbar, +/// @requires {Map} $light-navbar +/// @requires {Map} $bootstrap-elevation-navbar +$bootstrap-navbar: extend( + $light-navbar, + $bootstrap-elevation-navbar, ( background: ( igx-color: 'surface', @@ -81,6 +81,6 @@ $_bootstrap-navbar: extend( /// @type {Map} /// @prop {Number} elevation [0] - The elevation level, between 0-24, to be used for the navbar. /// @requires {function} extend -/// @requires {Map} $_light-navbar -/// @requires {Map} $_indigo-elevation-navbar -$_indigo-navbar: extend($_light-navbar, $_indigo-elevation-navbar); +/// @requires {Map} $light-navbar +/// @requires {Map} $indigo-elevation-navbar +$indigo-navbar: extend($light-navbar, $indigo-elevation-navbar); diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_navdrawer.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_navdrawer.scss index cfa75021d71..bbe8659d1cf 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_navdrawer.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_navdrawer.scss @@ -1,5 +1,6 @@ -@import '../shape/navdrawer'; -@import '../elevation/navdrawer'; +@use '../../../base' as *; +@use '../shape/navdrawer' as *; +@use '../elevation/navdrawer' as *; //// /// @group schemas @@ -11,27 +12,27 @@ /// @type {Map} /// /// @prop {Map} background [igx-color: 'surface'] - The navigation drawer background color. -/// @prop {Color} border-color [rgba(0, 0, 0, .14)] - The navigation drawer right border color. -/// @prop {Map} item-header-text-color [igx-color: 'surface', text-contrast: (), rgba: .87] - The header's idle text color. -/// @prop {Map} item-text-color [igx-color: 'surface', text-contrast: (), rgba: .54] - The item's idle text color. -/// @prop {Map} item-icon-color [igx-color: 'surface', text-contrast: (), rgba: .54] - The item's icon color. +/// @prop {Map} border-color [igx-color: ('grays', 900, .14)] - The navigation drawer right border color. +/// @prop {Map} item-header-text-color [igx-color: ('grays', 800),] - The header's idle text color. +/// @prop {Map} item-text-color [igx-color: ('grays', 700)] - The item's idle text color. +/// @prop {Map} item-icon-color [ igx-color: ('grays', 700)] - The item's icon color. /// @prop {Map} item-active-text-color [igx-color: ('primary', 500)] - The item's active text color. -/// @prop {Map} item-active-background [igx-color: ('primary', 500), rgba: .12] - The item's active background color. +/// @prop {Map} item-active-background [igx-color: ('primary', 500, .12)] - The item's active background color. /// @prop {Map} item-active-icon-color [igx-color: ('primary', 500)] - The item's icon active color. -/// @prop {Map} item-hover-background [ igx-color: 'surface', text-contrast: (), rgba: .08] - The item's hover background color. -/// @prop {Map} item-hover-text-color [igx-color: 'surface', text-contrast: (), rgba: .87] - The item's hover text color. -/// @prop {Map} item-hover-icon-color [igx-color: 'surface', text-contrast: (), rgba: .87] - The item's hover icon color. +/// @prop {Map} item-hover-background [igx-color: ('grays', 200, .8)] - The item's hover background color. +/// @prop {Map} item-hover-text-color [igx-color: ('grays', 900)] - The item's hover text color. +/// @prop {Map} item-hover-icon-color [igx-color: ('grays', 900)] - The item's hover icon color. /// @prop {Map} elevation [16] - The elevation level, between 0-24, to be used for the drawer. /// @prop {Number} border-radius [0] - The border radius used for the navdrawer component. Can be a fraction between 0 and 1, pixels, or percent. /// @prop {Number} item-border-radius [.16667] - The border radius used for the navdrawer items. Can be a fraction between 0 and 1, pixels, or percent. /// /// @requires {function} extend -/// @requires {Map} $_default-shape-navdrawer -/// @requires {Map} $_default-elevation-navdrawer +/// @requires {Map} $default-shape-navdrawer +/// @requires {Map} $default-elevation-navdrawer /// @see $default-palette -$_light-navdrawer: extend( - $_default-shape-navdrawer, - $_default-elevation-navdrawer, +$light-navdrawer: extend( + $default-shape-navdrawer, + $default-elevation-navdrawer, ( variant: 'material', @@ -39,24 +40,20 @@ $_light-navdrawer: extend( igx-color: 'surface' ), - border-color: rgba(0, 0, 0, .14), + border-color: ( + igx-color: ('grays', 900, .14) + ), item-header-text-color: ( - igx-color: 'surface', - text-contrast: (), - rgba: .87 + igx-color: ('grays', 800), ), item-text-color: ( - igx-color: 'surface', - text-contrast: (), - rgba: .54 + igx-color: ('grays', 700), ), item-icon-color: ( - igx-color: 'surface', - text-contrast: (), - rgba: .54 + igx-color: ('grays', 700), ), item-active-text-color: ( @@ -64,20 +61,15 @@ $_light-navdrawer: extend( ), item-active-background: ( - igx-color: ('primary', 500), - rgba: .12 + igx-color: ('primary', 500, .12), ), item-hover-background: ( - igx-color: 'surface', - text-contrast: (), - rgba: .08 + igx-color: ('grays', 200, .8), ), item-hover-text-color: ( - igx-color: 'surface', - text-contrast: (), - rgba: .87 + igx-color: ('grays', 900), ), item-active-icon-color: ( @@ -85,9 +77,7 @@ $_light-navdrawer: extend( ), item-hover-icon-color: ( - igx-color: 'surface', - text-contrast: (), - rgba: .87 + igx-color: ('grays', 900), ), ) ); @@ -95,9 +85,9 @@ $_light-navdrawer: extend( /// Generates a fluent navdrawer schema. /// @type {Map} /// @requires {function} extend -/// @requires {Map} $_light-navdrawer -$_fluent-navdrawer: extend( - $_light-navdrawer, +/// @requires {Map} $light-navdrawer +$fluent-navdrawer: extend( + $light-navdrawer, ( variant: 'fluent', ) @@ -106,9 +96,9 @@ $_fluent-navdrawer: extend( /// Generates a bootstrap navdrawer schema. /// @type {Map} /// @requires {function} extend -/// @requires {Map} $_light-navdrawer -$_bootstrap-navdrawer: extend( - $_light-navdrawer, +/// @requires {Map} $light-navdrawer +$bootstrap-navdrawer: extend( + $light-navdrawer, ( variant: 'bootstrap', ) @@ -116,12 +106,12 @@ $_bootstrap-navdrawer: extend( /// Generates an indigo navdrawer schema. /// @type {Map} -/// @prop {Map} background [igx-color: ('grays', 700), to-opaque: #fff] - The navigation drawer background color. +/// @prop {Map} background [igx-color: ('grays', 700)] - The navigation drawer background color. /// @prop {Map} item-header-text-color [igx-contrast-color: ('grays', 700)] - The header's idle text color. -/// @prop {Map} item-text-color [igx-contrast-color: ('grays', 700), rgba: .8] - The item's idle text color. -/// @prop {Map} item-icon-color [igx-contrast-color: ('grays', 700), rgba: .8] - The item's icon color. +/// @prop {Map} item-text-color [igx-contrast-color: ('grays', 700, .8)] - The item's idle text color. +/// @prop {Map} item-icon-color [igx-contrast-color: ('grays', 700, .8)] - The item's icon color. /// @prop {Map} item-active-text-color [igx-contrast-color: ('grays', 700)] - The item's active text color. -/// @prop {Map} item-active-background [igx-contrast-color: ('grays', 700), rgba: .1] - The item's active background color. +/// @prop {Map} item-active-background [igx-contrast-color: ('grays', 700, .1)] - The item's active background color. /// @prop {Map} item-active-icon-color [igx-contrast-color: ('grays', 700)] - The item's icon active color. /// @prop {Map} item-hover-background [transparent] - The item's hover background color. /// @prop {Map} item-hover-text-color [igx-contrast-color: ('grays', 700)] - The item's hover text color. @@ -130,56 +120,52 @@ $_bootstrap-navdrawer: extend( /// @prop {Number} border-radius [0] - The border radius used for the navdrawer component. Can be a fraction between 0 and 1, pixels, or percent. /// @prop {Number} item-border-radius [1] - The border radius used for the navdrawer items. Can be a fraction between 0 and 1, pixels, or percent. /// @requires {function} extend -/// @requires {Map} $_light-navdrawer -/// @requires {Map} $_indigo-shape-navdrawer -/// @requires {Map} $_indigo-elevation-navdrawer -$_indigo-navdrawer: extend( - $_light-navdrawer, - $_indigo-shape-navdrawer, - $_indigo-elevation-navdrawer, +/// @requires {Map} $light-navdrawer +/// @requires {Map} $indigo-shape-navdrawer +/// @requires {Map} $indigo-elevation-navdrawer +$indigo-navdrawer: extend( + $light-navdrawer, + $indigo-shape-navdrawer, + $indigo-elevation-navdrawer, ( variant: 'indigo-design', background: ( - igx-color: ('grays', 700), - to-opaque: #fff + igx-color: ('grays', 700) ), item-header-text-color: ( - igx-contrast-color: ('grays', 700) + igx-color: ('grays', 50) ), item-text-color: ( - igx-contrast-color: ('grays', 700), - rgba: .8 + igx-color: ('grays', 300, .8), ), item-icon-color: ( - igx-contrast-color: ('grays', 700), - rgba: .8 + igx-color: ('grays', 300, .8) ), item-active-background: ( - igx-contrast-color: ('grays', 700), - rgba: .1 + igx-color: ('grays', 600, .8), ), item-active-text-color: ( - igx-contrast-color: ('grays', 700) + igx-color: ('grays', 50) ), item-active-icon-color: ( - igx-contrast-color: ('grays', 700) + igx-color: ('grays', 50) ), item-hover-background: transparent, item-hover-text-color: ( - igx-contrast-color: ('grays', 700) + igx-color: ('grays', 100) ), item-hover-icon-color: ( - igx-contrast-color: ('grays', 700) + igx-color: ('grays', 100) ), ) ); diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_overlay.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_overlay.scss index e925a8e3ca0..605f1922e3a 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_overlay.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_overlay.scss @@ -1,3 +1,5 @@ +@use '../../../base' as *; + //// /// @group schemas /// @access public @@ -8,9 +10,9 @@ /// @type {Map} /// @property {Map} background-color [igx-color: ('grays', 500)] - The background color used for modal overlays. /// @see $default-palette -$_light-overlay: ( +$light-overlay: ( background-color: ( - igx-color: ('grays', 500) + igx-color: ('grays', 500, .54) ) ); @@ -18,9 +20,9 @@ $_light-overlay: ( /// @type {Map} /// @property {Color} background-color [rgba(255, 255, 255, .4)] - The background color used for modal overlays. /// @requires {function} extend -/// @requires {Map} $_light-overlay -$_fluent-overlay: extend( - $_light-overlay, +/// @requires {Map} $light-overlay +$fluent-overlay: extend( + $light-overlay, ( background-color: rgba(255, 255, 255, .4) ) @@ -28,13 +30,11 @@ $_fluent-overlay: extend( /// Generates a bootstrap overlay schema. /// @type {Map} -/// @requires {function} extend -/// @requires {Map} $_light-overlay -$_bootstrap-overlay: extend($_light-overlay); +/// @requires {Map} $light-overlay +$bootstrap-overlay: $light-overlay; /// Generates an indigo overlay schema. /// @type {Map} -/// @requires {function} extend -/// @requires {Map} $_light-overlay -$_indigo-overlay: extend($_light-overlay); +/// @requires {Map} $light-overlay +$indigo-overlay: $light-overlay; diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_pagination.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_pagination.scss index 6a08e560f9d..80e10077629 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_pagination.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_pagination.scss @@ -1,3 +1,5 @@ +@use '../../../base' as *; + //// /// @group schemas /// @access public @@ -8,9 +10,9 @@ /// @type {Map} /// @prop {Map} text-color [igx-color: ('grays', 800)] - The text color. /// @prop {Map} background-color [igx-color: ('grays', 100), to-opaque: #fff] - The background color of the paging panel. -/// @prop {Map} border-color [igx-color: ('grays', 400)] - The border color of the paging panel. +/// @prop {Map} border-color [igx-color: ('grays', 200)] - The border color of the paging panel. /// @see $default-palette -$_light-pagination: ( +$light-pagination: ( variant: 'material', text-color: ( @@ -18,12 +20,11 @@ $_light-pagination: ( ), background-color: ( - igx-color: ('grays', 100), - to-opaque: #fff + igx-color: ('grays', 100) ), border-color: ( - igx-color: ('grays', 400) + igx-color: ('grays', 200) ) ); @@ -32,9 +33,9 @@ $_light-pagination: ( /// @prop {Map} background-color [igx-color: 'surface'] - The background color of the paging panel. /// @prop {Map} border-color [igx-color: ('grays', 100)] - The border color of the paging panel. /// @requires {function} extend -/// @requires {Map} $_light-pagination -$_fluent-pagination: extend( - $_light-pagination, +/// @requires {Map} $light-pagination +$fluent-pagination: extend( + $light-pagination, ( variant: 'material', @@ -50,29 +51,22 @@ $_fluent-pagination: extend( /// Generates a bootstrap pagination schema. /// @type {Map} -/// @requires {function} extend -/// @requires {Map} $_light-pagination -$_bootstrap-pagination: extend($_light-pagination); +/// @requires {Map} $light-pagination +$bootstrap-pagination: $light-pagination; /// Generates an indigo pagination schema. /// @type {Map} /// @prop {Map} text-color [igx-color: ('grays', 700)] - The text color. -/// @prop {Map} background-color [igx-color: ('grays', 100), to-opaque: ()] - The background color of the paging panel. /// @prop {Map} border-color [igx-color: ('grays', 100)] - The border color of the paging panel. /// @requires {function} extend -/// @requires {Map} $_light-pagination -$_indigo-pagination: extend( - $_light-pagination, +/// @requires {Map} $light-pagination +$indigo-pagination: extend( + $light-pagination, ( text-color: ( igx-color: ('grays', 700) ), - background-color: ( - igx-color: ('grays', 100), - to-opaque: () - ), - border-color: ( igx-color: ('grays', 100) ) diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_pie-chart.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_pie-chart.scss index 88e173891d9..4925c85ef48 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_pie-chart.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_pie-chart.scss @@ -17,39 +17,34 @@ /// @property {String} leader-line-visibility [null] - Sets whether the leader lines are visible. Valid values are: 'visible' and 'collapsed'. /// @property {Number} radius-factor [null] - Sets the scaling factor of the chart's radius. Value between 0 and 1. /// @see $default-palette -$_light-pie-chart: extend( - ( - 'brushes': series, - 'outlines': series, - 'label-extent': null, - 'label-inner-color': null, - 'label-outer-color': null, - 'labels-position': null, - 'leader-line-margin': null, - 'leader-line-type': null, - 'leader-line-visibility': null, - 'radius-factor': null, - ) +$light-pie-chart: ( + 'brushes': series, + 'outlines': series, + 'label-extent': null, + 'label-inner-color': null, + 'label-outer-color': null, + 'labels-position': null, + 'leader-line-margin': null, + 'leader-line-type': null, + 'leader-line-visibility': null, + 'radius-factor': null, ); /// Generates a fluent pie chart schema. /// @type {Map} -/// @requires {function} extend -/// @requires {Map} $_light-pie-chart -/// @see $_light-pie-chart -$_fluent-pie-chart: extend($_light-pie-chart); +/// @requires {Map} $light-pie-chart +/// @see $light-pie-chart +$fluent-pie-chart: $light-pie-chart; /// Generates a bootstrap pie chart schema. /// @type {Map} -/// @requires {function} extend -/// @requires {Map} $_light-pie-chart -/// @see $_light-pie-chart -$_bootstrap-pie-chart: extend($_light-pie-chart); +/// @requires {Map} $light-pie-chart +/// @see $light-pie-chart +$bootstrap-pie-chart: $light-pie-chart; /// Generates an indigo pie chart schema. /// @type {Map} -/// @requires {function} extend -/// @requires {Map} $_light-pie-chart -/// @see $_light-pie-chart -$_indigo-pie-chart: extend($_light-pie-chart); +/// @requires {Map} $light-pie-chart +/// @see $light-pie-chart +$indigo-pie-chart: $light-pie-chart; diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_progress.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_progress.scss index 057a5411d25..154eb9edecf 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_progress.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_progress.scss @@ -1,4 +1,5 @@ -@import '../shape/progress'; +@use '../../../base' as *; +@use '../shape/progress' as *; //// /// @group schemas @@ -15,15 +16,15 @@ /// @property {Map} fill-color-warning [igx-color: ('warn')] - The track warning fill color. /// @property {Map} fill-color-info [igx-color: ('info')] - The track info fill color. /// @property {Map} fill-color-success [igx-color: ('success')] - The track success fill color. -/// @property {Color} stripes-color [rgba(#fff, .7)] - The track stripes color. +/// @property {Map} stripes-color [igx-color: ('grays', 50, .7)] - The track stripes color. /// @property {Map} text-color [igx-color: ('grays', 700)] - The track value text color. /// @prop {Number} track-border-radius [0] - The border radius used for the progress bar track. Can be a fraction between 0 and 1, pixels, or percent. /// /// @requires {function} extend -/// @requires {Map} $_default-shape-progress +/// @requires {Map} $default-shape-progress /// @see $default-palette -$_light-progress-linear: extend( - $_default-shape-progress, +$light-progress-linear: extend( + $default-shape-progress, ( variant: 'material', @@ -51,7 +52,9 @@ $_light-progress-linear: extend( igx-color: ('success') ), - stripes-color: rgba(#fff, .7), + stripes-color: ( + igx-color: ('grays', 50, .7) + ), text-color: ( igx-color: ('grays', 700) @@ -63,11 +66,11 @@ $_light-progress-linear: extend( /// @type {Map} /// @prop {Number} track-border-radius [0] - The border radius used for the progress bar track. Can be a fraction between 0 and 1, pixels, or percent. /// @requires {function} extend -/// @requires $_light-progress-linear -/// @requires $_fluent-shape-progress -$_fluent-progress-linear: extend( - $_light-progress-linear, - $_fluent-shape-progress, +/// @requires $light-progress-linear +/// @requires $fluent-shape-progress +$fluent-progress-linear: extend( + $light-progress-linear, + $fluent-shape-progress, ( variant: 'fluent', ) @@ -77,32 +80,36 @@ $_fluent-progress-linear: extend( /// @type {Map} /// /// @property {Map} track-color [igx-color: ('grays', 200)] - The main track color. -/// @property {Color} stripes-color [rgba(#fff, .15)] - The track stripes color. +/// @property {Map} stripes-color [igx-color: ('grays', 50, .15)] - The track stripes color. /// @prop {Number} track-border-radius [4px] - The border radius used for the progress bar track. Can be a fraction between 0 and 1, pixels, or percent. /// /// @requires {function} extend -/// @requires $_light-progress-linear -/// @requires $_bootstrap-shape-progress -$_bootstrap-progress-linear: extend( - $_light-progress-linear, - $_bootstrap-shape-progress, +/// @requires $light-progress-linear +/// @requires $bootstrap-shape-progress +$bootstrap-progress-linear: extend( + $light-progress-linear, + $bootstrap-shape-progress, ( variant: 'bootstrap', + track-color: ( - igx-color: ('grays', 200) + igx-color: ('grays', 300) + ), + + stripes-color: ( + igx-color: ('grays', 50, .15) ), - stripes-color: rgba(#fff, .15), ) ); /// Generates an indigo progress-linear schema. /// @type {Map} /// @property {Map} track-color [igx-color: ('grays', 300)] - The main track color. -/// @property {Color} stripes-color [rgba(#fff, .45)] - The track stripes color. +/// @property {Map} stripes-color [igx-color: ('grays', 50, .45)] - The track stripes color. /// @requires {function} extend -/// @requires $_light-progress-linear -$_indigo-progress-linear: extend( - $_light-progress-linear, +/// @requires $light-progress-linear +$indigo-progress-linear: extend( + $light-progress-linear, ( variant: 'indigo-design', @@ -110,7 +117,9 @@ $_indigo-progress-linear: extend( igx-color: ('grays', 300) ), - stripes-color: rgba(#fff, .45), + stripes-color: ( + igx-color: ('grays', 50, .45) + ), ) ); @@ -122,8 +131,8 @@ $_indigo-progress-linear: extend( /// @property {Map} text-color [igx-color: ('grays', 700)] - The value text color. /// /// @see $default-palette -$_light-progress-circular: extend( - $_default-shape-progress, +$light-progress-circular: extend( + $default-shape-progress, ( variant: 'material', @@ -144,9 +153,9 @@ $_light-progress-circular: extend( /// Generates a fluent progress-circular schema. /// @type {Map} /// @requires {function} extend -/// @requires {Map} $_light-progress-circular -$_fluent-progress-circular: extend( - $_light-progress-circular,( +/// @requires {Map} $light-progress-circular +$fluent-progress-circular: extend( + $light-progress-circular,( variant: 'fluent', ) ); @@ -156,9 +165,9 @@ $_fluent-progress-circular: extend( /// @property {Map} track-color [igx-color: ('grays', 200)] - The main track color. /// /// @requires {function} extend -/// @requires {Map} $_light-progress-circular -$_bootstrap-progress-circular: extend( - $_light-progress-circular, +/// @requires {Map} $light-progress-circular +$bootstrap-progress-circular: extend( + $light-progress-circular, ( variant: 'bootstrap', @@ -172,9 +181,9 @@ $_bootstrap-progress-circular: extend( /// @type {Map} /// @property {Map} track-color [igx-color: ('grays', 300)] - The main track color. /// @requires {function} extend -/// @requires {Map} $_light-progress-circular -$_indigo-progress-circular: extend( - $_light-progress-circular, +/// @requires {Map} $light-progress-circular +$indigo-progress-circular: extend( + $light-progress-circular, ( variant: 'indigo-design', diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_radio.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_radio.scss index 5b704420326..9060d51bad1 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_radio.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_radio.scss @@ -1,3 +1,5 @@ +@use '../../../base' as *; + //// /// @group schemas /// @access public @@ -15,7 +17,7 @@ /// @property {Map} fill-color-hover [igx-color: ('secondary', 500)] - The checked border and dot colors on hover. /// @property {Map} disabled-color [igx-color: ('grays', 400)] - The disabled border and dot colors. /// @see $default-palette -$_light-radio: ( +$light-radio: ( variant: 'material', name: 'igx-radio', @@ -57,9 +59,9 @@ $_light-radio: ( /// @property {Map} focus-outline-color [igx-color: ('grays', 800)] - The focus outlined color. /// /// @requires {function} extend -/// @requires {Map} $_light-radio -$_fluent-radio: extend( - $_light-radio, +/// @requires {Map} $light-radio +$fluent-radio: extend( + $light-radio, ( variant: 'fluent', @@ -91,15 +93,15 @@ $_fluent-radio: extend( /// Generates a bootstrap radio schema. /// @type {Map} -/// @property {Map} fill-hover-border-color [igx-color: ('primary', 500)] - The checked dot border color on hover. +/// @property {Map} fill-hover-border-color [igx-color: ('grays', 50)] - The checked dot border color on hover. /// @property {Map} empty-color [igx-color: ('grays', 500)] - The unchecked border color. /// @property {Map} fill-color [igx-color: ('primary', 500)] - The checked border and dot colors. -/// @property {Color} fill-color-hover [#fff] - The checked border and dot colors on hover. +/// @property {Color} fill-color-hover [igx-color: ('grays', 50)] - The checked border and dot colors on hover. /// @property {Map} focus-outline-color [igx-color: ('primary', 200)] - The focus outlined color. /// @requires {function} extend -/// @requires {Map} $_light-radio -$_bootstrap-radio: extend( - $_light-radio, +/// @requires {Map} $light-radio +$bootstrap-radio: extend( + $light-radio, ( variant: 'bootstrap', @@ -107,7 +109,9 @@ $_bootstrap-radio: extend( igx-color: ('primary', 200) ), - fill-hover-border-color: #fff, + fill-hover-border-color: ( + igx-color: ('grays', 50) + ), empty-color: ( igx-color: ('grays', 500) @@ -117,7 +121,9 @@ $_bootstrap-radio: extend( igx-color: ('primary', 500) ), - fill-color-hover: #fff, + fill-color-hover: ( + igx-color: ('grays', 50) + ), ) ); @@ -133,9 +139,9 @@ $_bootstrap-radio: extend( /// @property {Map} focus-outline-color [igx-color: ('grays', 300)] - The focus outlined color. /// @property {Map} focus-outline-color-focused [igx-color: ('primary', 200)] - The focus outlined color for focused state. /// @requires {function} extend -/// @requires {Map} $_light-radio -$_indigo-radio: extend( - $_light-radio, +/// @requires {Map} $light-radio +$indigo-radio: extend( + $light-radio, ( variant: 'indigo-design', diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_ripple.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_ripple.scss index f326c107501..d6e6ea483ba 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_ripple.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_ripple.scss @@ -1,3 +1,5 @@ +@use '../../../base' as *; + //// /// @group schemas /// @access public @@ -7,38 +9,37 @@ /// Generates a light ripple schema. /// @type {Map} /// -/// @property {Map} color [igx-color: ('grays', 800)] - The color of the ripple. +/// @property {Map} color [igx-color: ('grays', 800, 7)] - The color of the ripple. /// /// @see $default-palette -$_light-ripple: ( +$light-ripple: ( variant: 'material', color: ( - igx-color: ('grays', 800) + igx-color: ('grays', 800, .7) ) ); /// Generates a fluent ripple schema. /// @type {Map} /// @requires {function} extend -/// @requires {Map} $_light-ripple -$_fluent-ripple: extend($_light-ripple, ( +/// @requires {Map} $light-ripple +$fluent-ripple: extend($light-ripple, ( variant: 'fluent' )); /// Generates a bootstrap ripple schema. /// @type {Map} /// @requires {function} extend -/// @requires {Map} $_light-ripple -$_bootstrap-ripple: extend($_light-ripple, ( +/// @requires {Map} $light-ripple +$bootstrap-ripple: extend($light-ripple, ( variant: 'bootstrap' )); /// Generates an indigo ripple schema. /// @type {Map} /// @requires {function} extend -/// @requires {Map} $_light-ripple -$_indigo-ripple: extend($_light-ripple, ( +/// @requires {Map} $light-ripple +$indigo-ripple: extend($light-ripple, ( variant: 'indigo-design' )); - diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_scrollbar.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_scrollbar.scss index b235e0df4c3..0e5e2e8cb9f 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_scrollbar.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_scrollbar.scss @@ -1,3 +1,5 @@ +@use '../../../base' as *; + //// /// @group schemas /// @access public @@ -6,22 +8,20 @@ /// Generates a light scrollbar schema. /// @type {Map} -/// @property {Color} thumb-background [igx-color: surface, darken: 20%] - The background color used for the thumb. -/// @property {Color} track-background [igx-color: 'surface', darken: 5%] - The background color used for the track. +/// @property {Color} thumb-background [igx-color: ('grays', 400)] - The background color used for the thumb. +/// @property {Color} track-background [igx-color: ('grays', 100)] - The background color used for the track. /// @property {String | Number} size [16px] - The size of the track. /// @see $default-palette -$_light-scrollbar: extend( +$light-scrollbar: extend( ( size: 16px, thumb-background: ( - igx-color: 'surface', - darken: 20% + igx-color: ('grays', 400) ), track-background: ( - igx-color: 'surface', - darken: 5% + igx-color: ('grays', 100) ), ) ); @@ -29,9 +29,9 @@ $_light-scrollbar: extend( /// Generates a fluent scrollbar schema. /// @type {Map} /// @requires {function} extend -/// @requires {Map} $_light-scrollbar -$_fluent-scrollbar: extend( - $_light-scrollbar, +/// @requires {Map} $light-scrollbar +$fluent-scrollbar: extend( + $light-scrollbar, ( variant: 'fluent', ) @@ -40,9 +40,9 @@ $_fluent-scrollbar: extend( /// Generates a bootstrap scrollbar schema. /// @type {Map} /// @requires {function} extend -/// @requires {Map} $_light-scrollbar -$_bootstrap-scrollbar: extend( - $_light-scrollbar, +/// @requires {Map} $light-scrollbar +$bootstrap-scrollbar: extend( + $light-scrollbar, ( variant: 'bootstrap', ) @@ -50,17 +50,22 @@ $_bootstrap-scrollbar: extend( /// Generates an indigo scrollbar schema. /// @type {Map} -/// @property {Map} thumb-background [igx-color: ('grays', 300)] - The background color used for the thumb. +/// @property {Map} thumb-background [igx-color: ('grays', 400)] - The background color used for the thumb. +/// @property {Color} track-background [igx-color: ('grays', 200)] - The background color used for the track. /// @requires {function} extend -/// @requires {Map} $_light-scrollbar -$_indigo-scrollbar: extend( - $_light-scrollbar, +/// @requires {Map} $light-scrollbar +$indigo-scrollbar: extend( + $light-scrollbar, ( variant: 'indigo-design', thumb-background: ( - igx-color: ('grays', 300) - ) + igx-color: ('grays', 400) + ), + + track-background: ( + igx-color: ('grays', 200) + ), ) ); diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_shape-chart.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_shape-chart.scss index bfece1716fe..b3ffb74bcb0 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_shape-chart.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_shape-chart.scss @@ -48,73 +48,71 @@ /// @property {Color} y-axis-title-color [null] - Sets color of title on the Y-axis. /// @property {List} y-axis-title-margin [null] - Sets the margin around the title on the Y-axis. /// @see $default-palette -$_light-shape-chart: extend( - ( - 'margin': null, - 'title-alignment': null, +$light-shape-chart: ( + 'margin': null, + 'title-alignment': null, - 'title-text-color': ( - igx-color: ('grays', 900) - ), - 'title-margin': null, - 'subtitle-alignment': null, + 'title-text-color': ( + igx-color: ('grays', 900) + ), + 'title-margin': null, + 'subtitle-alignment': null, - 'subtitle-text-color': ( - igx-color: ('grays', 600) - ), + 'subtitle-text-color': ( + igx-color: ('grays', 600) + ), - 'subtitle-margin': null, - 'brushes': series, - 'marker-brushes': series, - 'outlines': series, - 'marker-outlines': series, - 'thickness': null, - 'trend-line-brushes': series, - 'trend-line-thickness': null, - 'x-axis-label-margin': null, - 'x-axis-label-text-color': null, - 'x-axis-label-vertical-alignment': null, - 'x-axis-major-stroke': null, - 'x-axis-major-stroke-thickness': null, - 'x-axis-minor-stroke': null, - 'x-axis-minor-stroke-thickness': null, - 'x-axis-strip': null, - 'x-axis-stroke': null, - 'x-axis-stroke-thickness': null, - 'x-axis-title-alignment': null, - 'x-axis-title-color': null, - 'x-axis-title-margin': null, - 'y-axis-label-margin': null, - 'y-axis-label-text-color': null, - 'y-axis-label-vertical-alignment': null, - 'y-axis-major-stroke': null, - 'y-axis-major-stroke-thickness': null, - 'y-axis-minor-stroke': null, - 'y-axis-minor-stroke-thickness': null, - 'y-axis-strip': null, - 'y-axis-stroke': null, - 'y-axis-stroke-thickness': null, - 'y-axis-title-alignment': null, - 'y-axis-title-color': null, - 'y-axis-title-margin': null, - ) + 'subtitle-margin': null, + 'brushes': series, + 'marker-brushes': series, + 'outlines': series, + 'marker-outlines': series, + 'thickness': null, + 'trend-line-brushes': series, + 'trend-line-thickness': null, + 'x-axis-label-margin': null, + 'x-axis-label-text-color': null, + 'x-axis-label-vertical-alignment': null, + 'x-axis-major-stroke': null, + 'x-axis-major-stroke-thickness': null, + 'x-axis-minor-stroke': null, + 'x-axis-minor-stroke-thickness': null, + 'x-axis-strip': null, + 'x-axis-stroke': null, + 'x-axis-stroke-thickness': null, + 'x-axis-title-alignment': null, + 'x-axis-title-color': null, + 'x-axis-title-margin': null, + 'y-axis-label-margin': null, + 'y-axis-label-text-color': null, + 'y-axis-label-vertical-alignment': null, + 'y-axis-major-stroke': null, + 'y-axis-major-stroke-thickness': null, + 'y-axis-minor-stroke': null, + 'y-axis-minor-stroke-thickness': null, + 'y-axis-strip': null, + 'y-axis-stroke': null, + 'y-axis-stroke-thickness': null, + 'y-axis-title-alignment': null, + 'y-axis-title-color': null, + 'y-axis-title-margin': null, ); /// Generates a fluent shaep-chart schema. /// @type {Map} /// @requires {function} extend -/// @requires {Map} $_light-shape-chart -$_fluent-shape-chart: extend($_light-shape-chart); +/// @requires {Map} $light-shape-chart +$fluent-shape-chart: $light-shape-chart; /// Generates a bootstrap shape-chart schema. /// @type {Map} /// @requires {function} extend -/// @requires {Map} $_light-shape-chart -$_bootstrap-shape-chart: extend($_light-shape-chart); +/// @requires {Map} $light-shape-chart +$bootstrap-shape-chart: $light-shape-chart; /// Generates an indigo shape-chart schema. /// @type {Map} /// @requires {function} extend -/// @requires {Map} $_light-shape-chart -$_indigo-shape-chart: extend($_light-shape-chart); +/// @requires {Map} $light-shape-chart +$indigo-shape-chart: $light-shape-chart; diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_slider.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_slider.scss index d74ca77bbcd..6fff7f38169 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_slider.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_slider.scss @@ -1,3 +1,4 @@ +@use '../../../base' as *; //// /// @group schemas @@ -16,12 +17,12 @@ /// @property {Map} thumb-border-color [igx-color: ('secondary', 500)] - The thumb border color. /// @property {Map} thumb-disabled-border-color [igx-color: ('grays', 400)] - The thumb border color when its disabled /// -/// @property {Map} disabled-thumb-color [igx-color: ('grays', 400), to-opaque: ()] - The thumb color when its disabled. -/// @property {Map} label-background-color [igx-color: ('secondary', 500), to-opaque: ()] - The background color of the bubble label. +/// @property {Map} disabled-thumb-color [igx-color: ('grays', 400)] - The thumb color when its disabled. +/// @property {Map} label-background-color [igx-color: ('secondary', 500)] - The background color of the bubble label. /// @property {Map} label-text-color [igx-contrast-color: ('secondary', 500)] - The text color of the bubble label. /// -/// @property {Map} base-track-color [igx-color: ('secondary', 500), rgba: .24] - The base background color of the track. -/// @property {Map} base-track-hover-color [igx-color: ('secondary', 500), rgba: .24] - The base background color of the track on hover. +/// @property {Map} base-track-color [igx-color: ('secondary', 500, .24)] - The base background color of the track. +/// @property {Map} base-track-hover-color [igx-color: ('secondary', 500, .24)] - The base background color of the track on hover. /// @property {Map} disabled-base-track-color [igx-color: ('grays', 400)] - The base background color of the track when is disabled. /// /// @property {Map} tick-label-color [igx-color: ('grays', 500)] - The color of the tick label. @@ -29,7 +30,7 @@ /// @property {Map} tick-color [igx-color: ('grays', 500)] - The background-color of the tick. /// @property {Map} tick-color-tall [igx-color: ('grays', 500)] - The background-color of the tall tick. /// @see $default-palette -$_light-slider: ( +$light-slider: ( variant: 'material', tick-color: ( @@ -68,7 +69,6 @@ $_light-slider: ( label-background-color: ( igx-color: ('secondary', 500), - to-opaque: () ), label-text-color: ( @@ -77,7 +77,6 @@ $_light-slider: ( disabled-thumb-color: ( igx-color: ('grays', 400), - to-opaque: () ), disabled-base-track-color: ( @@ -89,41 +88,38 @@ $_light-slider: ( ), base-track-color: ( - igx-color: ('secondary', 500), - rgba: .24 + igx-color: ('secondary', 500, .24), ), base-track-hover-color: ( - igx-color: ('secondary', 500), - rgba: .24 + igx-color: ('secondary', 500, .24), ), track-hover-color: ( - igx-color: ('secondary', 500) + igx-color: ('secondary', 400) ) ); /// Generates a fluent slider schema. /// @type {Map} /// -/// @property {Map} track-color [igx-color: ('grays', 700), to-opaque: #fff] - The color of the track. +/// @property {Map} track-color [igx-color: ('grays', 700)] - The color of the track. /// @property {Map} track-hover-color [igx-color: ('primary', 500)] - The color of the track on hover. /// @property {Map} thumb-color [igx-color: 'surface'] - The color of the thumb. /// @property {Map} thumb-border-color [igx-color: ('grays', 700)] - The thumb border color. -/// @property {Map} thumb-disabled-border-color [igx-color: ('grays', 400), to-opaque: #fff] - The thumb border color when its disabled +/// @property {Map} thumb-disabled-border-color [igx-color: ('grays', 400)] - The thumb border color when its disabled /// @property {Map} thumb-focus-color [igx-color: ('primary', 200)] - The focus outline color of the thumb. /// @property {Map} disabled-thumb-color [igx-color: 'surface'] - The thumb color when its disabled. /// @property {Map} base-track-color [igx-color: ('grays', 400)] - The base background color of the track. -/// @property {Map} base-track-hover-color [igx-color: ('primary', 500), rgba: .32] - The base background color of the track on hover. +/// @property {Map} base-track-hover-color [igx-color: ('primary', 500, .32)] - The base background color of the track on hover. /// /// @requires {function} extend -/// @requires {Map} $_light-slider -$_fluent-slider: extend($_light-slider, ( +/// @requires {Map} $light-slider +$fluent-slider: extend($light-slider, ( variant: 'fluent', track-color: ( igx-color: ('grays', 700), - to-opaque: #fff ), track-hover-color: ( @@ -144,7 +140,6 @@ $_fluent-slider: extend($_light-slider, ( thumb-disabled-border-color: ( igx-color: ('grays', 400), - to-opaque: #fff ), disabled-thumb-color: ( @@ -156,20 +151,19 @@ $_fluent-slider: extend($_light-slider, ( ), base-track-hover-color: ( - igx-color: ('primary', 500), - rgba: .32 + igx-color: ('primary', 500, .32), ), )); /// Generates a bootstrap slider schema. /// @type {Map} /// @property {Map} label-background-color [igx-color: ('primary', 500)] - The background color of the bubble label. -/// @property {Map} thumb-disabled-border-color [igx-color: ('grays', 400), to-opaque: #fff] - The thumb border color when its disabled +/// @property {Map} thumb-disabled-border-color [igx-color: ('grays', 400)] - The thumb border color when its disabled /// @property {Map} thumb-focus-color [igx-color: ('primary', 200)] - The focus outline color of the thumb. /// @requires {function} extend -/// @requires {Map} $_light-slider -$_bootstrap-slider: extend( - $_fluent-slider, +/// @requires {Map} $light-slider +$bootstrap-slider: extend( + $fluent-slider, ( variant: 'bootstrap', @@ -183,7 +177,6 @@ $_bootstrap-slider: extend( thumb-disabled-border-color: ( igx-color: ('grays', 400), - to-opaque: #fff ), ) ); @@ -192,16 +185,16 @@ $_bootstrap-slider: extend( /// @type {Map} /// /// @property {Map} track-hover-color [igx-color: ('primary', 400)] - The color of the track on hover. -/// @property {Map} disabled-thumb-color [igx-color: ('grays', 300), to-opaque: ( igx-color: 'surface')] - The thumb color when its disabled. +/// @property {Map} disabled-thumb-color [igx-color: ('grays', 300)] - The thumb color when its disabled. /// @property {Map} base-track-color [igx-color: ('grays', 400)] - The base background color of the track. /// @property {Map} base-track-hover-color [igx-color: ('grays', 500)] - The base background color of the track on hover. -/// @property {Map} disabled-base-track-color [igx-color: ('grays', 300), to-opaque: ( igx-color: 'surface')] - The base background color of the track when is disabled. +/// @property {Map} disabled-base-track-color [igx-color: ('grays', 300)] - The base background color of the track when is disabled. /// @property {Map} thumb-focus-color [igx-color: ('primary', 200)] - The focus outline color of the thumb. /// /// @requires {function} extend -/// @requires {Map} $_light-slider -$_indigo-slider: extend( - $_light-slider, +/// @requires {Map} $light-slider +$indigo-slider: extend( + $light-slider, ( variant: 'indigo-design', @@ -223,16 +216,10 @@ $_indigo-slider: extend( disabled-thumb-color: ( igx-color: ('grays', 300), - to-opaque: ( - igx-color: 'surface' - ) ), disabled-base-track-color: ( igx-color: ('grays', 300), - to-opaque: ( - igx-color: 'surface' - ) ) ) ); diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_snackbar.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_snackbar.scss index 3208bbd1326..802a74edb9d 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_snackbar.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_snackbar.scss @@ -1,5 +1,6 @@ -@import '../shape/snackbar'; -@import '../elevation/snackbar'; +@use '../../../base' as *; +@use '../shape/snackbar' as *; +@use '../elevation/snackbar' as *; //// /// @group schemas @@ -9,21 +10,21 @@ /// Generates a light snackbar schema. /// @type {Map} -/// @property {Map} background [igx-color: ('grays', 900)] - The background color used in the snackbar. +/// @property {Map} background [igx-color: ('grays', 900, .9)] - The background color used in the snackbar. /// @property {Map} text-color [igx-contrast-color: ('grays', 900)] - The text color used in the snackbar. /// @property {Map} button-color [igx-color: ('secondary', 500)] - The button color used in the snackbar. /// @property {Number} elevation [4] - The elevation level, between 0-24, to be used in the snackbar. /// @prop {Number} border-radius [.17] - The border radius used for snackbar. Can be a fraction between 0 and 1, pixels, or percent. /// @requires {function} extend -/// @requires {Map} $_default-shape-snackbar -/// @requires {Map} $_default-elevation-snackbar +/// @requires {Map} $default-shape-snackbar +/// @requires {Map} $default-elevation-snackbar /// @see $default-palette -$_light-snackbar: extend( - $_default-shape-snackbar, - $_default-elevation-snackbar, +$light-snackbar: extend( + $default-shape-snackbar, + $default-elevation-snackbar, ( background: ( - igx-color: ('grays', 900) + igx-color: ('grays', 900, .9) ), text-color: ( @@ -40,9 +41,9 @@ $_light-snackbar: extend( /// @type {Map} /// @prop {Number} border-radius [2px] - The border radius used for snackbar. Can be a fraction between 0 and 1, pixels, or percent. /// @requires {function} extend -/// @requires $_light-snackbar -/// @requires $_fluent-shape-snackbar -$_fluent-snackbar: extend($_light-snackbar, $_fluent-shape-snackbar); +/// @requires $light-snackbar +/// @requires $fluent-shape-snackbar +$fluent-snackbar: extend($light-snackbar, $fluent-shape-snackbar); /// Generates a bootstrap snackbar schema. /// @type {Map} @@ -52,13 +53,13 @@ $_fluent-snackbar: extend($_light-snackbar, $_fluent-shape-snackbar); /// @property {Number} elevation [10] - The elevation level, between 0-24, to be used in the snackbar. /// @prop {Number} border-radius [.17] - The border radius used for snackbar. Can be a fraction between 0 and 1, pixels, or percent. /// @requires {function} extend -/// @requires $_light-snackbar -/// @requires {Map} $_bootstrap-shape-snackbar -/// @requires {Map} $_bootstrap-elevation-snackbar -$_bootstrap-snackbar: extend( - $_light-snackbar, - $_bootstrap-shape-snackbar, - $_bootstrap-elevation-snackbar, +/// @requires $light-snackbar +/// @requires {Map} $bootstrap-shape-snackbar +/// @requires {Map} $bootstrap-elevation-snackbar +$bootstrap-snackbar: extend( + $light-snackbar, + $bootstrap-shape-snackbar, + $bootstrap-elevation-snackbar, ( background: ( igx-color: ('surface') @@ -77,30 +78,28 @@ $_bootstrap-snackbar: extend( /// Generates an indigo snackbar schema. /// @type {Map} /// -/// @property {Map} background [igx-color: ('grays', 600)] - The background color used in the snackbar. -/// @property {Map} text-color [igx-color: ('grays', 600), text-contrast: ()] - The text color used in the snackbar. -/// @property {Map} button-color [igx-color: ('grays', 600), text-contrast: ()] - The button color used in the snackbar. +/// @property {Map} background [igx-color: ('grays', 700, .9)] - The background color used in the snackbar. +/// @property {Map} text-color [igx-contrast-color: ('grays', 700)] - The text color used in the snackbar. +/// @property {Map} button-color [igx-contrast-color: ('grays', 700)] - The button color used in the snackbar. /// @prop {Number} border-radius [6px] - The border radius used for snackbar. Can be a fraction between 0 and 1, pixels, or percent. /// /// @requires {function} extend -/// @requires $_light-snackbar -/// @requires $_indigo-shape-snackbar -$_indigo-snackbar: extend( - $_light-snackbar, - $_indigo-shape-snackbar, +/// @requires $light-snackbar +/// @requires $indigo-shape-snackbar +$indigo-snackbar: extend( + $light-snackbar, + $indigo-shape-snackbar, ( background: ( - igx-color: ('grays', 600) + igx-color: ('grays', 700, .9) ), text-color: ( - igx-color: ('grays', 600), - text-contrast: () + igx-contrast-color: ('grays', 700), ), button-color: ( - igx-color: ('grays', 600), - text-contrast: () + igx-contrast-color: ('grays', 700), ) ) ); diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_sparkline.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_sparkline.scss index 55b09ebf716..8f831a4b8c4 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_sparkline.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_sparkline.scss @@ -27,48 +27,46 @@ /// @prop {Color} vertical-axis-brush [null] - Sets the vertical axis line brush of the sparkline. /// @prop {Color} normal-range-fill [null] - Sets the normal range brush of the sparkline. /// @see $default-palette -$_light-sparkline: extend( - ( - 'brush': ( - igx-color: ('primary', 500) - ), - 'line-thickness': null, - 'marker-brush': null, - 'marker-size': null, - 'first-marker-brush': null, - 'first-marker-size': null, - 'last-marker-brush': null, - 'last-marker-size': null, - 'low-marker-brush': null, - 'low-marker-size': null, - 'high-marker-brush': null, - 'high-marker-size': null, - 'negative-brush': null, - 'negative-marker-brush': null, - 'negative-marker-size': null, - 'trend-line-brush': null, - 'trend-line-thickness': null, - 'horizontal-axis-brush': null, - 'vertical-axis-brush': null, - 'normal-range-fill': null, - ) +$light-sparkline: ( + 'brush': ( + igx-color: ('primary', 500) + ), + 'line-thickness': null, + 'marker-brush': null, + 'marker-size': null, + 'first-marker-brush': null, + 'first-marker-size': null, + 'last-marker-brush': null, + 'last-marker-size': null, + 'low-marker-brush': null, + 'low-marker-size': null, + 'high-marker-brush': null, + 'high-marker-size': null, + 'negative-brush': null, + 'negative-marker-brush': null, + 'negative-marker-size': null, + 'trend-line-brush': null, + 'trend-line-thickness': null, + 'horizontal-axis-brush': null, + 'vertical-axis-brush': null, + 'normal-range-fill': null, ); /// Generates a fluent sparkline schema. /// @type {Map} /// @requires {function} extend -/// @requires {Map} $_light-sparkline -$_fluent-sparkline: extend($_light-sparkline); +/// @requires {Map} $light-sparkline +$fluent-sparkline: $light-sparkline; /// Generates a bootstrap sparkline schema. /// @type {Map} /// @requires {function} extend -/// @requires {Map} $_light-sparkline -$_bootstrap-sparkline: extend($_light-sparkline); +/// @requires {Map} $light-sparkline +$bootstrap-sparkline: $light-sparkline; /// Generates an indigo sparkline schema. /// @type {Map} /// @requires {function} extend -/// @requires {Map} $_light-sparkline -$_indigo-sparkline: extend($_light-sparkline); +/// @requires {Map} $light-sparkline +$indigo-sparkline: $light-sparkline; diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_splitter.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_splitter.scss index b2832726718..6eb25fdc6d0 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_splitter.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_splitter.scss @@ -1,4 +1,5 @@ -@import '../shape/splitter'; +@use '../../../base' as *; +@use '../shape/splitter' as *; //// /// @group schemas @@ -10,21 +11,20 @@ /// Generates a light splitter schema. /// @type {Map} /// @property {Map} icon-background [igx-color: ('grays', 400)]- The background color used for splitters of type icon. -/// @property {Map} bar-color [igx-color: 'surface', darken: 5%] - The background color of the bar. -/// @property {Map} handle-color [igx-color: 'surface', darken: 20%] - The color for the bar drag handle. -/// @property {Map} expander-color [igx-color: 'surface', darken: 20%] - The color for the arrow expander's. +/// @property {Map} bar-color [igx-color: ('grays', 200)] - The background color of the bar. +/// @property {Map} handle-color [igx-color: ('grays', 400)] - The color for the bar drag handle. +/// @property {Map} expander-color [igx-color: ('grays', 400)] - The color for the arrow expander's. /// @property {Number} border-radius [1] - The border radius used for splitter. Can be a fraction between 0 and 1, pixels, or percent. /// @property {Map} focus-color [igx-color: ('secondary', 500)] - The color used for focused splitter bar. /// @property {Number} size [4px] - The size of the splitter, it's width for vertical and height for horizontal splitter. /// @requires {function} extend -/// @requires {Map} $_round-shape-splitter +/// @requires {Map} $round-shape-splitter /// @see $default-palette -$_light-splitter: extend( - $_round-shape-splitter, +$light-splitter: extend( + $round-shape-splitter, ( bar-color: ( - igx-color: 'surface', - darken: 5% + igx-color: ('grays', 200) ), focus-color: ( @@ -32,13 +32,11 @@ $_light-splitter: extend( ), handle-color: ( - igx-color: 'surface', - darken: 20% + igx-color: ('grays', 400) ), expander-color: ( - igx-color: 'surface', - darken: 20% + igx-color: ('grays', 400) ), size: 4px @@ -47,16 +45,15 @@ $_light-splitter: extend( /// Generates a fluent splitter schema. /// @type {Map} -/// @requires {function} extend -/// @requires {Map} $_light-splitter -$_fluent-splitter: extend($_light-splitter); +/// @requires {Map} $light-splitter +$fluent-splitter: $light-splitter; /// Generates a bootstrap splitter schema. /// @type {Map} /// @requires {function} extend -/// @requires {Map} $_light-splitter -$_bootstrap-splitter: extend( - $_light-splitter, +/// @requires {Map} $light-splitter +$bootstrap-splitter: extend( + $light-splitter, ( variant: 'bootstrap', ) @@ -64,27 +61,31 @@ $_bootstrap-splitter: extend( /// Generates an indigo splitter schema. /// @type {Map} -/// @property {Map} bar-color [igx-color: ('grays', 300)] - The background color of the bar. -/// @property {Color} handle-color [#fff] - The color for the bar drag handle. -/// @property {Color} expander-color [#fff] - The color for the bar drag handle. +/// @property {Map} bar-color [igx-color: ('grays', 400)] - The background color of the bar. +/// @property {Map} handle-color [igx-color: ('surface')] - The color for the bar drag handle. +/// @property {Map} expander-color [igx-color: ('surface')] - The color for the bar drag handle. /// @property {Map} focus-color [igx-color: ('primary', 500)] - The color used for focused splitter bar. /// @requires {function} extend -/// @requires {Map} $_light-splitter -$_indigo-splitter: extend( - $_light-splitter, +/// @requires {Map} $light-splitter +$indigo-splitter: extend( + $light-splitter, ( variant: 'indigo-design', bar-color: ( - igx-color: ('grays', 300) + igx-color: ('grays', 400) ), focus-color: ( igx-color: ('primary', 500) ), - handle-color: #fff, + handle-color: ( + igx-color: ('surface') + ), - expander-color: #fff + expander-color: ( + igx-color: ('surface') + ) ) ); diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_stepper.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_stepper.scss index 3f4b2a0d76c..f9b86b115f6 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_stepper.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_stepper.scss @@ -1,4 +1,5 @@ -@import '../shape/stepper'; +@use '../../../base' as *; +@use '../shape/stepper' as *; /// @group schemas /// @access public @@ -9,8 +10,8 @@ /// @type {Map} /// /// @property {Color} step-background [transparent] - The background of the step header. -/// @property {Map} step-hover-background [igx-color: 'grays', 50)] - The background of the step header on hover. -/// @property {Map} step-focus-background [igx-color: 'grays', 100)] - The background of the step header on focus. +/// @property {Map} step-hover-background [igx-color: ('grays', 200)] - The background of the step header on hover. +/// @property {Map} step-focus-background [igx-color: ('grays', 100)] - The background of the step header on focus. /// @property {Map} title-color [igx-color: ('grays', 900)] - The text color of the step title. /// @property {Map} title-hover-color [igx-color: ('grays', 900)] - The text color of the step title on hover. /// @property {Map} title-focus-color [igx-color: ('grays', 900)] - The text color of the step title on focus. @@ -22,7 +23,7 @@ /// @property {Map} indicator-outline [igx-color: ('grays', 400)] - The outline color of the incomplete step indicator. /// /// @property {Color} invalid-step-background [transparent] - The background of the invalid step header. -/// @property {Map} invalid-step-hover-background [igx-color: 'grays', 50)] - The background of the invalid step header on hover. +/// @property {Map} invalid-step-hover-background [igx-color: ('grays', 200)] - The background of the invalid step header on hover. /// @property {Map} invalid-step-focus-background [igx-color: 'grays', 100)] - The background of the invalid step header on focus. /// @property {Map} invalid-title-color [igx-color: ('error')] - The color of the invalid step title. /// @property {Map} invalid-title-hover-color [igx-color: ('error')] - The color of the invalid step title on hover. @@ -35,7 +36,7 @@ /// @property {Map} invalid-indicator-outline [igx-color: ('error')] - The outline color of the invalid step indicator. /// /// @property {Color} current-step-background [transparent] - The background of the current step header. -/// @property {Map} current-step-hover-background [igx-color: 'grays', 50)] - The background of the current step header on hover. +/// @property {Map} current-step-hover-background [igx-color: ('grays', 200)] - The background of the current step header on hover. /// @property {Map} current-step-focus-background [igx-color: 'grays', 100)] - The background of the current step header on focus. /// @property {Map} current-title-color [igx-color: ('grays', 900)] - The color of the current step title. /// @property {Map} current-title-hover-color [igx-color: ('grays', 900)] - The color of the current step title on hover. @@ -48,7 +49,7 @@ /// @property {Map} current-indicator-outline [igx-color: ('primary', 500)] - The outline color of the current step indicator. /// /// @property {Color} complete-step-background [transparent] - The background of the complete step header. -/// @property {Map} complete-step-hover-background [igx-color: 'grays', 50)] - The background of the complete step header on hover. +/// @property {Map} complete-step-hover-background [igx-color: ('grays', 200)] - The background of the complete step header on hover. /// @property {Map} complete-step-focus-background [igx-color: 'grays', 100)] - The background of the complete step header on focus. /// @property {Map} complete-title-color [igx-color: ('grays', 900)] - The color of the complete step title. /// @property {Map} complete-title-hover-color [igx-color: ('grays', 900)] - The color of the complete step title on hover. @@ -72,27 +73,27 @@ /// @property {String} complete-step-separator-style ['solid'] - The separator border-style between the completed steps. /// /// @requires {function} extend -/// @requires {Map} $_default-shape-stepper +/// @requires {Map} $default-shape-stepper /// @see $default-palette -$_light-stepper: extend( - $_default-shape-stepper, +$light-stepper: extend( + $default-shape-stepper, ( variant: 'material', // Step incomplete step-background: transparent, step-hover-background: ( - igx-color: ('grays', 50) + igx-color: ('grays', 200) ), step-focus-background: ( igx-color: ('grays', 100) ), indicator-background: ( - igx-color: ('grays', 400) + igx-color: ('grays', 300) ), indicator-outline: ( - igx-color: ('grays', 400) + igx-color: ('grays', 300) ), indicator-color: ( igx-contrast-color: ('grays', 400) @@ -121,7 +122,7 @@ $_light-stepper: extend( // Complete complete-step-background: transparent, complete-step-hover-background: ( - igx-color: ('grays', 50) + igx-color: ('grays', 200) ), complete-step-focus-background: ( igx-color: ('grays', 100) @@ -160,7 +161,7 @@ $_light-stepper: extend( // Current current-step-background: transparent, current-step-hover-background: ( - igx-color: ('grays', 50) + igx-color: ('grays', 200) ), current-step-focus-background: ( igx-color: ('grays', 100) @@ -201,7 +202,7 @@ $_light-stepper: extend( // Invalid invalid-step-background: transparent, invalid-step-hover-background: ( - igx-color: ('grays', 50) + igx-color: ('grays', 200) ), invalid-step-focus-background: ( igx-color: ('grays', 100) @@ -271,7 +272,7 @@ $_light-stepper: extend( /// @property {Color} indicator-background [transparent] - The background color of the incomplete step indicator. /// @property {Color} indicator-outline [transparent] - The outline color of the incomplete step indicator. /// @property {Map} indicator-color [igx-color: ('grays', 900)] - The text color of the incomplete step indicator. -/// @property {Map} complete-indicator-background [igx-color: ('grays', 200)] - The background color of the completed step indicator. +/// @property {Map} complete-indicator-background [igx-color: ('grays', 300)] - The background color of the completed step indicator. /// @property {Color} complete-indicator-outline [transparent] - The outline color of the completed step indicator. /// @property {Map} complete-indicator-color [igx-contrast-color: ('grays', 200)] - The text color of the completed step indicator. /// @property {Map} complete-step-separator-color [igx-color: ('primary', 500)] - The separator border-color between the completed steps. @@ -279,11 +280,11 @@ $_light-stepper: extend( /// @property {Color} disabled-indicator-outline [transparent] - The outline color of the disabled step indicator. /// /// @requires {function} extend -/// @requires {Map} $_light-stepper -/// @requires {Map} $_fluent-shape-stepper -$_fluent-stepper: extend( - $_light-stepper, - $_fluent-shape-stepper, +/// @requires {Map} $light-stepper +/// @requires {Map} $fluent-shape-stepper +$fluent-stepper: extend( + $light-stepper, + $fluent-shape-stepper, ( variant: 'fluent', @@ -295,7 +296,7 @@ $_fluent-stepper: extend( // Complete complete-indicator-background: ( - igx-color: ('grays', 200) + igx-color: ('grays', 300) ), complete-indicator-outline: transparent, complete-indicator-color: ( @@ -331,23 +332,59 @@ $_fluent-stepper: extend( /// @property {Map} complete-indicator-outline [igx-color: ('grays', 300)] - The outline color of the completed step indicator. /// @property {Map} complete-indicator-color [igx-color: ('grays', 300)] - The text color of the completed step indicator. /// -/// @property {Map} step-separator-color [igx-color: ('grays', 200)] - The separator border-color of between the steps. +/// @property {Map} step-separator-color [igx-color: ('grays', 300)] - The separator border-color of between the steps. /// @property {Map} complete-step-separator-color [igx-color: ('primary', 500)] - The separator border-color between the completed steps. /// @property {String} step-separator-style ['solid'] - The separator border-style of between the steps. /// @property {String} complete-step-separator-style ['solid'] - The separator border-style between the completed steps. /// +/// @property {Map} step-hover-background [igx-color: ('grays', 300, .5)] - The background of the step header on hover. +/// @property {Map} invalid-step-hover-background [igx-color: ('grays', 300, .5)] - The background of the invalid step header on hover. +/// @property {Map} current-step-hover-background [igx-color: ('grays', 300, .5)] - The background of the current step header on hover. +/// @property {Map} complete-step-hover-background [igx-color: ('grays', 300, .5)] - The background of the complete step header on hover. +/// +/// @property {Map} step-focus-background [igx-color: ('grays', 300, .5)] - The background of the step header on hover. +/// @property {Map} invalid-step-focus-background [igx-color: ('grays', 300, .5)] - The background of the invalid step header on hover. +/// @property {Map} current-step-focus-background [igx-color: ('grays', 300, .5)] - The background of the current step header on hover. +/// @property {Map} complete-step-focus-background [igx-color: ('grays', 300, .5)] - The background of the complete step header on hover. +/// /// @requires {function} extend -/// @requires {Map} $_light-stepper -/// @requires {Map} $_bootstrap-shape-stepper -$_bootstrap-stepper: extend( - $_light-stepper, - $_bootstrap-shape-stepper, +/// @requires {Map} $light-stepper +/// @requires {Map} $bootstrap-shape-stepper +$bootstrap-stepper: extend( + $light-stepper, + $bootstrap-shape-stepper, ( variant: 'bootstrap', + step-hover-background: ( + igx-color: ('grays', 300, .5) + ), + complete-step-hover-background: ( + igx-color: ('grays', 300, .5) + ), + current-step-hover-background: ( + igx-color: ('grays', 300, .5) + ), + invalid-step-hover-background: ( + igx-color: ('grays', 300, .5) + ), + + step-focus-background: ( + igx-color: ('grays', 300, .5) + ), + complete-step-focus-background: ( + igx-color: ('grays', 300, .5) + ), + current-step-focus-background: ( + igx-color: ('grays', 300, .5) + ), + invalid-step-focus-background: ( + igx-color: ('grays', 300, .5) + ), + indicator-background: transparent, indicator-outline: ( - igx-color: ('grays', 300) + igx-color: ('grays', 400) ), indicator-color: ( igx-color: ('primary', 500) @@ -375,10 +412,10 @@ $_bootstrap-stepper: extend( // Complete complete-indicator-background: ( - igx-color: ('grays', 300) + igx-color: ('grays', 400) ), complete-indicator-outline: ( - igx-color: ('grays', 300) + igx-color: ('grays', 400) ), complete-indicator-color: ( igx-contrast-color: ('grays', 300) @@ -392,7 +429,7 @@ $_bootstrap-stepper: extend( // Separator step-separator-color: ( - igx-color: ('grays', 200) + igx-color: ('grays', 300) ), complete-step-separator-color: ( igx-color: ('primary', 500) @@ -421,9 +458,9 @@ $_bootstrap-stepper: extend( /// @property {String} complete-step-separator-style ['solid'] - The separator border-style between the completed steps. /// /// @requires {function} extend -/// @requires $_light-stepper -$_indigo-stepper: extend( - $_light-stepper, +/// @requires $light-stepper +$indigo-stepper: extend( + $light-stepper, ( variant: 'indigo-design', diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_switch.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_switch.scss index 83a14c28b3d..c19b5a0c6f6 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_switch.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_switch.scss @@ -1,5 +1,6 @@ -@import '../shape/switch'; -@import '../elevation/switch'; +@use '../../../base' as *; +@use '../shape/switch' as *; +@use '../elevation/switch' as *; //// /// @group schemas @@ -11,10 +12,10 @@ /// @type {Map} /// /// @property {Map} thumb-on-color [igx-color: ('secondary', 500)] - The color of the thumb when the switch is on. -/// @property {Map} track-on-color [igx-color: ('secondary', 500), rgba: .5] - The color of the track when the switch is on. -/// @property {Map} thumb-off-color [igx-color: ('grays', 200), to-opaque: #fff] - The color of the thumb when the switch is off. +/// @property {Map} track-on-color [igx-color: ('secondary', 200)] - The color of the track when the switch is on. +/// @property {Map} thumb-off-color [igx-color: ('grays', 200)] - The color of the thumb when the switch is off. /// @property {Map} track-off-color [igx-color: ('grays', 600)] - The color of the track when the switch is off. -/// @property {Map} thumb-disabled-color [igx-color: ('grays', 400), to-opaque: #fff] - The color of the thumb when the switch is disabled. +/// @property {Map} thumb-disabled-color [igx-color: ('grays', 400)] - The color of the thumb when the switch is disabled. /// @property {Map} track-disabled-color [igx-color: ('grays', 300)] - The color of the track when the switch is disabled. /// @property {Map} label-color [igx-color: ('grays', 900)] - The color of the switch label /// @property {Map} label-disabled-color [igx-color: ('grays', 400)] - The color of the switch label when the switch is disabled @@ -33,12 +34,12 @@ /// @property {Color} border-on-hover-color [transparent] - The border color of the on-switch. /// /// @requires {function} extend -/// @requires {Map} $_default-shape-switch -/// @requires {Map} $_default-elevation-switch +/// @requires {Map} $default-shape-switch +/// @requires {Map} $default-elevation-switch /// @see $default-palette -$_light-switch: extend( - $_default-shape-switch, - $_default-elevation-switch, +$light-switch: extend( + $default-shape-switch, + $default-elevation-switch, ( variant: 'material', @@ -53,17 +54,15 @@ $_light-switch: extend( ), track-on-color: ( - igx-color: ('secondary', 500), - rgba: .5 + igx-color: ('secondary', 200), ), thumb-off-color: ( - igx-color: ('grays', 200), - to-opaque: #fff + igx-color: ('grays', 200) ), track-disabled-color: ( - igx-color: ('grays', 300) + igx-color: ('grays', 300, .54) ), track-off-color: ( @@ -72,7 +71,6 @@ $_light-switch: extend( thumb-disabled-color: ( igx-color: ('grays', 400), - to-opaque: #fff ), label-color: ( @@ -88,14 +86,14 @@ $_light-switch: extend( /// Generates a fluent switch schema. /// @type {Map} /// -/// @property {Map} border-color [igx-color('grays', 500), to-opaque: #fff] - The border color of the switch. -/// @property {Map} border-hover-color [igx-color('grays', 800), to-opaque: #fff] - The border color of the switch on hover. -/// @property {Map} border-disabled-color [igx-color('grays', 300), to-opaque: #fff] - The border color of the disabled switch. +/// @property {Map} border-color [igx-color('grays', 500)] - The border color of the switch. +/// @property {Map} border-hover-color [igx-color('grays', 800)] - The border color of the switch on hover. +/// @property {Map} border-disabled-color [igx-color('grays', 300)] - The border color of the disabled switch. /// @property {Map} border-on-color [igx-color('primary', 500)] - The border color of the on-switch. /// @property {Map} border-on-hover-color [igx-color('primary', 500)] - The border color of the on-switch. /// -/// @property {Color} thumb-on-color [#fff] - The color of the thumb when the switch is on. -/// @property {Map} thumb-off-color [igx-color: ('grays', 900), to-opaque: #fff] - The color of the thumb when the switch is off. +/// @property {Color} thumb-on-color [igx-color: ('grays', 50)] - The color of the thumb when the switch is on. +/// @property {Map} thumb-off-color [igx-color: ('grays', 900)] - The color of the thumb when the switch is off. /// @property {Map} track-on-color [igx-color: ('secondary', 500)] - The color of the track when the switch is on. /// @property {Color} track-off-color [transparent] - The color of the track when the switch is off. /// @property {Map} focus-outline-color [igx-color: ('grays', 800)] - The focus outlined color. @@ -103,11 +101,11 @@ $_light-switch: extend( /// @property {Number} border-radius-track [10px] - The border radius used for switch track. Can be a fraction between 0 and 1, pixels, or percent. /// /// @requires {function} extend -/// @requires {Map} $_light-switch -/// @requires {Map} $_fluent-shape-switch -$_fluent-switch: extend( - $_light-switch, - $_fluent-shape-switch, +/// @requires {Map} $light-switch +/// @requires {Map} $fluent-shape-switch +$fluent-switch: extend( + $light-switch, + $fluent-shape-switch, ( variant: 'fluent', @@ -117,17 +115,14 @@ $_fluent-switch: extend( border-color: ( igx-color: ('grays', 500), - to-opaque: #fff ), border-hover-color:( igx-color: ('grays', 800), - to-opaque: #fff ), border-disabled-color:( igx-color: ('grays', 300), - to-opaque: #fff ), border-on-color:( @@ -138,11 +133,12 @@ $_fluent-switch: extend( igx-color: ('primary', 500) ), - thumb-on-color: #fff, + thumb-on-color: ( + igx-color: ('grays', 50) + ), thumb-off-color: ( igx-color: ('grays', 900), - to-opaque: #fff ), track-on-color: ( @@ -162,11 +158,11 @@ $_fluent-switch: extend( /// @property {Map} focus-outline-color [igx-color: ('primary', 200)] - The focus outlined color. /// /// @requires {function} extend -/// @requires {Map} $_fluent-switch -/// @requires {Map} $_bootstrap-shape-switch -$_bootstrap-switch: extend( - $_fluent-switch, - $_bootstrap-shape-switch, +/// @requires {Map} $fluent-switch +/// @requires {Map} $bootstrap-shape-switch +$bootstrap-switch: extend( + $fluent-switch, + $bootstrap-shape-switch, ( variant: 'bootstrap', @@ -187,7 +183,7 @@ $_bootstrap-switch: extend( /// Generates an indigo switch schema. /// @type {Map} /// -/// @property {Map} thumb-on-color [#fff] - The color of the thumb when the switch is on. +/// @property {Map} thumb-on-color [igx-color: ('grays', 50)] - The color of the thumb when the switch is on. /// @property {Map} track-on-color [igx-color: ('primary', 500)] - The color of the track when the switch is on. /// @property {Map} thumb-off-color [igx-color: ('grays', 600)] - The color of the thumb when the switch is off. /// @property {Map} track-off-color [transparent] - The color of the track when the switch is off. @@ -206,11 +202,11 @@ $_bootstrap-switch: extend( /// @property {Map} focus-outline-color-focused [igx-color: ('primary', 200)] - The focus outlined color for focused state. /// /// @requires {function} extend -/// @requires $_light-switch -/// @requires $_indigo-shape-switch -$_indigo-switch: extend( - $_light-switch, - $_indigo-shape-switch, +/// @requires $light-switch +/// @requires $indigo-shape-switch +$indigo-switch: extend( + $light-switch, + $indigo-shape-switch, ( variant: 'indigo-design', @@ -242,7 +238,9 @@ $_indigo-switch: extend( igx-color: ('primary', 500) ), - thumb-on-color: #fff, + thumb-on-color: ( + igx-color: ('grays', 50) + ), thumb-off-color: ( igx-color: ('grays', 600) diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_tabs.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_tabs.scss index 763792c4e84..aa69fe4dba4 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_tabs.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_tabs.scss @@ -1,4 +1,5 @@ -@import '../shape/tabs'; +@use '../../../base' as *; +@use '../shape/tabs' as *; //// /// @group schemas @@ -10,7 +11,7 @@ /// @type {Map} /// /// @property {Map} item-text-color [igx-color: ('grays', 700)] - The color used for the tab text color. -/// @property {Color} item-background [#fff] - The background color used for the tabs header. +/// @property {Color} item-background [igx-color: ('surface')] - The background color used for the tabs header. /// @property {Map} item-hover-background [igx-color: ('grays', 200)] - The background used for the tabs on hover. /// @property {Map} item-hover-color [igx-color: ('grays', 700)] - The text color used for the tabs on hover. /// @@ -21,7 +22,7 @@ /// @property {Map} indicator-color [igx-color: ('primary', 500)] - The color used for the active tab indicator. /// @property {Map} button-color [igx-color: ('grays', 500)] - The color used for the button icon/text color. /// @property {Map} button-hover-color [igx-color: ('grays', 600)] - The color used for the button icon/text color on hover. -/// @property {Color} button-background [#fff] - The color used for the button background. +/// @property {Color} button-background [igx-color: ('surface')] - The color used for the button background. /// @property {Map} button-hover-background [igx-color: ('grays', 100)] - The color used for the button background on hover. /// /// @property {Map} tab-ripple-color [igx-color: ('grays', 100)] - The color used for the button background. @@ -29,16 +30,18 @@ /// @property {Number} border-radius [0] - The border radius used for tabs. Can be a fraction between 0 and 1, pixels, or percent. /// /// @requires {function} extend -/// @requires {Map} $_default-shape-tabs +/// @requires {Map} $default-shape-tabs /// @see $default-palette -$_light-tabs: extend( - $_default-shape-tabs, +$light-tabs: extend( + $default-shape-tabs, ( item-text-color: ( igx-color: ('grays', 700) ), - item-background: #fff, + item-background: ( + igx-color: ('surface') + ), item-hover-background: ( igx-color: ('grays', 200) @@ -68,7 +71,9 @@ $_light-tabs: extend( igx-color: ('grays', 500) ), - button-background: #fff, + button-background: ( + igx-color: ('surface') + ), button-hover-background: ( igx-color: ('grays', 100) @@ -105,9 +110,9 @@ $_light-tabs: extend( /// @property {Map} indicator-color [igx-color: ('grays', 400)] - The color used for the tabs borders. /// /// @requires {function} extend -/// @requires {Map} $_light-tabs -/// @requires {Map} $_fluent-shape-tabs -$_fluent-tabs: extend($_light-tabs, $_fluent-shape-tabs); +/// @requires {Map} $light-tabs +/// @requires {Map} $fluent-shape-tabs +$fluent-tabs: extend($light-tabs, $fluent-shape-tabs); /// Generates a bootstrap tabs schema. /// @type {Map} @@ -124,11 +129,11 @@ $_fluent-tabs: extend($_light-tabs, $_fluent-shape-tabs); /// @property {map} border-color--hover [igx-color: ('grays', 200)] - The color used for the tab items border on hover. /// @property {Number} border-radius [4px] - The border radius used for tabs. Can be a fraction between 0 and 1, pixels, or percent. /// @requires {function} extend -/// @requires {Map} $_light-tabs -/// @requires {Map} $_bootstrap-shape-tabs -$_bootstrap-tabs: extend( - $_light-tabs, - $_bootstrap-shape-tabs, +/// @requires {Map} $light-tabs +/// @requires {Map} $bootstrap-shape-tabs +$bootstrap-tabs: extend( + $light-tabs, + $bootstrap-shape-tabs, ( variant: 'bootstrap', @@ -188,17 +193,17 @@ $_bootstrap-tabs: extend( /// @property {Map} item-active-color [igx-color: ('grays', 900)] - The color used for the active tabs text. /// @property {Map} item-active-icon-color [igx-color: ('primary', 400)] - The color used for the active tabs icon. /// @property {Map} indicator-color [igx-color: ('primary', 400)] - The color used for the tabs borders. -/// @property {Map} border-color [igx-color: ('grays', 300), to-opaque: (igx-color: 'surface')] - The color used for the tab items bottom border. -/// @property {Map} border-color--hover [igx-color: ('grays', 300), to-opaque: (igx-color: 'surface')] - The color used for the tab items bottom border on hover. +/// @property {Map} border-color [igx-color: ('grays', 300)] - The color used for the tab items bottom border. +/// @property {Map} border-color--hover [igx-color: ('grays', 300) - The color used for the tab items bottom border on hover. /// @property {Map} button-color [igx-color: ('grays', 700)] - The color used for the button icon/text color. /// @property {Map} button-hover-color [igx-color: ('grays', 900)] - The color used for the button icon/text color on hover. /// @property {Color} button-background [transparent] - The color used for the button background. /// @property {Color} button-hover-background [transparent] - The color used for the button background on hover. /// /// @requires {function} extend -/// @requires {Map} $_light-tabs -$_indigo-tabs: extend( - $_light-tabs, +/// @requires {Map} $light-tabs +$indigo-tabs: extend( + $light-tabs, ( variant: 'indigo-design', @@ -229,17 +234,11 @@ $_indigo-tabs: extend( ), border-color: ( - igx-color: ('grays', 300), - to-opaque: ( - igx-color: 'surface' - ) + igx-color: ('grays', 300) ), border-color--hover: ( - igx-color: ('grays', 300), - to-opaque: ( - igx-color: 'surface' - ) + igx-color: ('grays', 300) ), button-color: ( diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_time-picker.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_time-picker.scss index 3c321497b0e..e53f822ec54 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_time-picker.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_time-picker.scss @@ -1,5 +1,6 @@ -@import '../shape/time-picker'; -@import '../elevation/time-picker'; +@use '../../../base' as *; +@use '../shape/time-picker' as *; +@use '../elevation/time-picker' as *; //// /// @group schemas @@ -10,7 +11,7 @@ /// Generates a light time-picker schema. /// @type {Map} /// -/// @prop {Map} text-color [igx-color: 'surface', to-opaque: (), text-contrast: (), rgba: .38] - The text color of an open time picker. +/// @prop {Map} text-color [igx-color: ('grays', 500)] - The text color of an open time picker. /// @prop {Map} hover-text-color [igx-color: ('secondary', 500)] - The hover text color of an open time picker. /// @prop {Map} selected-text-color [igx-color: ('secondary', 500)] - The text color of a selected item in time picker. /// @prop {Map} active-item-background [igx-color: ('grays', 100)] - The background color for current item in focused column inside the time picker. @@ -18,7 +19,7 @@ /// @prop {Color} disabled-item-background [transparent] - The background color for disabled values . /// @prop {Map} header-background [igx-color: ('secondary', 500)] - The header background color of a time picker. /// @prop {Map} header-hour-text-color [igx-contrast-color: ('secondary', 500)] - The header hour text color of a time picker. -/// @prop {Map} header-time-period-color [igx-contrast-color: ('secondary', 500), rgba: .8] - The header AM/PM text color of a time picker. +/// @prop {Map} header-time-period-color [igx-contrast-color: ('secondary', 500, .8)] - The header AM/PM text color of a time picker. /// @prop {Map} background-color [igx-color: 'surface'] - The time-picker panel background color. /// @prop {Number} modal-elevation [24] - The elevation level, between 0-24, to be used for the time picker in modal mode. /// @prop {Number} dropdown-elevation [8] - The elevation level, between 0-24, to be used for the time picker in dropdown mode. @@ -26,20 +27,17 @@ /// @prop {Number} active-item-border-radius [.75] - The border radius used for the highlight of the active item in the time-picker. Can be a fraction between 0 and 1, pixels, or percent. /// /// @requires {function} extend -/// @requires {Map} $_default-shape-time-picker -/// @requires {Map} $_default-elevation-time-picker +/// @requires {Map} $default-shape-time-picker +/// @requires {Map} $default-elevation-time-picker /// @see $default-palette -$_light-time-picker: extend( - $_default-shape-time-picker, - $_default-elevation-time-picker, +$light-time-picker: extend( + $default-shape-time-picker, + $default-elevation-time-picker, ( variant: 'material', text-color: ( - igx-color: 'surface', - to-opaque: (), - text-contrast: (), - rgba: .38 + igx-color: ('grays', 500), ), hover-text-color: ( @@ -55,9 +53,7 @@ $_light-time-picker: extend( ), disabled-text-color: ( - igx-color: ('grays', 500), - to-opaque: (), - rgba: .5 + igx-color: ('grays', 400), ), disabled-item-background: transparent, @@ -71,8 +67,7 @@ $_light-time-picker: extend( ), header-time-period-color: ( - igx-contrast-color: ('secondary', 500), - rgba: .8 + igx-contrast-color: ('secondary', 500, .8), ), background-color: ( @@ -86,11 +81,11 @@ $_light-time-picker: extend( /// @prop {Number} border-radius [2px] - The border radius used for the overall shape of the time-picker. Can be a fraction between 0 and 1, pixels, or percent. /// @prop {Number} active-item-border-radius [2px] - The border radius used for the highlight of the active item in the time-picker. Can be a fraction between 0 and 1, pixels, or percent. /// @requires {function} extend -/// @requires $_light-time-picker -/// @requires $_fluent-shape-time-picker -$_fluent-time-picker: extend( - $_light-time-picker, - $_fluent-shape-time-picker, +/// @requires $light-time-picker +/// @requires $fluent-shape-time-picker +$fluent-time-picker: extend( + $light-time-picker, + $fluent-shape-time-picker, ( variant: 'fluent', ) @@ -104,11 +99,11 @@ $_fluent-time-picker: extend( /// @prop {Number} border-radius [4px] - The border radius used for the overall shape of the time-picker. Can be a fraction between 0 and 1, pixels, or percent. /// @prop {Number} active-item-border-radius [4px] - The border radius used for the highlight of the active item in the time-picker. Can be a fraction between 0 and 1, pixels, or percent. /// @requires {function} extend -/// @requires $_light-time-picker -/// @requires $_bootstrap-shape-time-picker -$_bootstrap-time-picker: extend( - $_light-time-picker, - $_bootstrap-shape-time-picker, +/// @requires $light-time-picker +/// @requires $bootstrap-shape-time-picker +$bootstrap-time-picker: extend( + $light-time-picker, + $bootstrap-shape-time-picker, ( variant: 'bootstrap', @@ -137,11 +132,11 @@ $_bootstrap-time-picker: extend( /// @prop {Number} border-radius [3px] - The border radius used for the overall shape of the time-picker. Can be a fraction between 0 and 1, pixels, or percent. /// @prop {Number} active-item-border-radius [20px] - The border radius used for the highlight of the active item in the time-picker. Can be a fraction between 0 and 1, pixels, or percent. /// @requires {function} extend -/// @requires $_light-time-picker -/// @requires $_indigo-shape-time-picker -$_indigo-time-picker: extend( - $_light-time-picker, - $_indigo-shape-time-picker, +/// @requires $light-time-picker +/// @requires $indigo-shape-time-picker +$indigo-time-picker: extend( + $light-time-picker, + $indigo-shape-time-picker, ( variant: 'indigo-design', diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_toast.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_toast.scss index d99ef471cc4..241b1ad3f1d 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_toast.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_toast.scss @@ -1,5 +1,6 @@ -@import '../shape/toast'; -@import '../elevation/toast'; +@use '../../../base' as *; +@use '../shape/toast' as *; +@use '../elevation/toast' as *; //// /// @group schemas @@ -10,27 +11,27 @@ /// Generates a light toast schema. /// @type {Map} /// -/// @prop {Map} background [igx-color: ('grays', 600)] - The background color used for the toast. -/// @prop {Map} text-color [igx-contrast-color: ('grays', 600)] - The text-color used for the toast. +/// @prop {Map} background [igx-color: ('grays', 700, .9)] - The background color used for the toast. +/// @prop {Map} text-color [igx-contrast-color: ('grays', 700)] - The text-color used for the toast. /// @prop {Number} elevation [0] - The elevation level, between 0-24, to be used for the toast. /// @prop {Number} border-radius [1] - The border radius used for toast. Can be a fraction between 0 and 1, pixels, or percent. /// /// @requires {function} extend -/// @requires {Map} $_default-shape-toast -/// @requires {Map} $_default-elevation-toast +/// @requires {Map} $default-shape-toast +/// @requires {Map} $default-elevation-toast /// @see $default-palette -$_light-toast: extend( - $_default-shape-toast, - $_default-elevation-toast, +$light-toast: extend( + $default-shape-toast, + $default-elevation-toast, ( variant: 'material', background: ( - igx-color: ('grays', 600) + igx-color: ('grays', 700, .9) ), text-color: ( - igx-contrast-color: ('grays', 600) + igx-contrast-color: ('grays', 700) ) ) ); @@ -39,11 +40,11 @@ $_light-toast: extend( /// @type {Map} /// @prop {Number} border-radius [2px] - The border radius used for toast. Can be a fraction between 0 and 1, pixels, or percent. /// @requires {function} extend -/// @requires $_light-toast -/// @requires $_fluent-shape-toast -$_fluent-toast: extend( - $_light-toast, - $_fluent-shape-toast, +/// @requires $light-toast +/// @requires $fluent-shape-toast +$fluent-toast: extend( + $light-toast, + $fluent-shape-toast, ( variant: 'fluent', ) @@ -51,22 +52,24 @@ $_fluent-toast: extend( /// Generates a bootstrap toast schema. /// @type {Map} -/// @prop {Map} background [#fff] - The background color used for the toast. +/// @prop {Map} background [igx-color: (igx-color: ('surface')] - The background color used for the toast. /// @prop {Map} text-color [igx-color: ('grays', 600)] - The text-color used for the toast. /// @prop {Number} elevation [10] - The elevation level, between 0-24, to be used for the toast. /// @prop {Number} border-radius [4px] - The border radius used for toast. Can be a fraction between 0 and 1, pixels, or percent. /// @requires {function} extend -/// @requires {Map} $_light-toast -/// @requires {Map} $_bootstrap-shape-toast -/// @requires {Map} $_bootstrap-elevation-toast -$_bootstrap-toast: extend( - $_light-toast, - $_bootstrap-shape-toast, - $_bootstrap-elevation-toast, +/// @requires {Map} $light-toast +/// @requires {Map} $bootstrap-shape-toast +/// @requires {Map} $bootstrap-elevation-toast +$bootstrap-toast: extend( + $light-toast, + $bootstrap-shape-toast, + $bootstrap-elevation-toast, ( variant: 'bootstrap', - background: #fff, + background: ( + igx-color: ('surface') + ), text-color: ( igx-color: ('grays', 600) @@ -77,19 +80,16 @@ $_bootstrap-toast: extend( /// Generates an indigo toast schema. /// @type {Map} /// -/// @prop {Map} text-color [#fff] - The text-color used for the toast. /// @prop {Number} border-radius [24px] - The border radius used for toast. Can be a fraction between 0 and 1, pixels, or percent. /// /// @requires {function} extend -/// @requires {Map} $_light-toast -/// @requires {Map} $_indigo-shape-toast -$_indigo-toast: extend( - $_light-toast, - $_indigo-shape-toast, +/// @requires {Map} $light-toast +/// @requires {Map} $indigo-shape-toast +$indigo-toast: extend( + $light-toast, + $indigo-shape-toast, ( variant: 'indigo-design', - - text-color: #fff ) ); diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_tooltip.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_tooltip.scss index 66641fd6ae2..4993a0d9894 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_tooltip.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_tooltip.scss @@ -1,4 +1,5 @@ -@import '../shape/tooltip'; +@use '../../../base' as *; +@use '../shape/tooltip' as *; //// /// @group schemas @@ -9,27 +10,22 @@ /// Generates a light tooltip schema. /// @type {Map} /// -/// @property {Map} background [igx-color: ('grays', 700), to-opaque: (), rgba: .9] - The background color of the tooltip. -/// @property {Map} text-color [igx-color: ('grays', 700), to-opaque: (), rgba: .9, text-contrast: ()] - The text color of the tooltip. +/// @property {Map} background [igx-color: ('grays', 700, .8),] - The background color of the tooltip. +/// @property {Map} text-color [igx-contrast-color: ('grays', 700)] - The text color of the tooltip. /// @property {Number} border-radius [.25] - The border radius used for tooltip. Can be a fraction between 0 and 1, pixels, or percent. /// /// @requires {function} extend -/// @requires {Map} $_default-shape-tooltip +/// @requires {Map} $default-shape-tooltip /// @see $default-palette -$_light-tooltip: extend( - $_default-shape-tooltip, +$light-tooltip: extend( + $default-shape-tooltip, ( background: ( - igx-color: ('grays', 700), - to-opaque: (), - rgba: .9 + igx-color: ('grays', 700, .9), ), text-color: ( - igx-color: ('grays', 700), - to-opaque: (), - rgba: .9, - text-contrast: () + igx-contrast-color: ('grays', 700), ), roundness: rem(4px) @@ -38,18 +34,18 @@ $_light-tooltip: extend( /// Generates a light fluent tooltip schema. /// @type {Map} -/// @prop {Map} background [igx-color: ('grays', 900)] - The background color of the tooltip. +/// @prop {Map} background [igx-color: ('grays', 900, .8)] - The background color of the tooltip. /// @prop {Map} text-color [igx-contrast-color: ('grays', 900)] - The text color of the tooltip. /// @prop {Number} border-radius [2px] - The border radius used for tooltip. Can be a fraction between 0 and 1, pixels, or percent. /// @requires {function} extend -/// @requires {Map} $_light-tooltip -/// @requires {Map} $_fluent-shape-tooltip -$_fluent-tooltip: extend( - $_light-tooltip, - $_fluent-shape-tooltip, +/// @requires {Map} $light-tooltip +/// @requires {Map} $fluent-shape-tooltip +$fluent-tooltip: extend( + $light-tooltip, + $fluent-shape-tooltip, ( background: ( - igx-color: ('grays', 900) + igx-color: ('grays', 900, .8) ), text-color: ( @@ -60,18 +56,18 @@ $_fluent-tooltip: extend( /// Generates a bootstrap tooltip schema. /// @type {Map} -/// @prop {Map} background [igx-color: ('grays', 900)] - The background color of the tooltip. +/// @prop {Map} background [igx-color: ('grays', 900, .8)] - The background color of the tooltip. /// @prop {Map} text-color [igx-contrast-color: ('grays', 900)] - The text color of the tooltip. /// @prop {Number} border-radius [4px] - The border radius used for tooltip. Can be a fraction between 0 and 1, pixels, or percent. /// @requires {function} extend -/// @requires $_light-tooltip -/// @requires $_bootstrap-shape-tooltip -$_bootstrap-tooltip: extend( - $_light-tooltip, - $_bootstrap-shape-tooltip, +/// @requires $light-tooltip +/// @requires $bootstrap-shape-tooltip +$bootstrap-tooltip: extend( + $light-tooltip, + $bootstrap-shape-tooltip, ( background: ( - igx-color: ('grays', 900) + igx-color: ('grays', 900, .8) ), text-color: ( igx-contrast-color: ('grays', 900) @@ -82,21 +78,12 @@ $_bootstrap-tooltip: extend( /// Generates an indigo tooltip schema. /// @type {Map} /// -/// @prop {Map} background [igx-color: ('grays', 600)] - The background color of the tooltip. -/// @prop {Map} text-color [#fff] - The text color of the tooltip. /// @prop {Number} border-radius [3px] - The border radius used for tooltip. Can be a fraction between 0 and 1, pixels, or percent. /// /// @requires {function} extend -/// @requires {Map} $_light-tooltip -/// @requires {Map} $_indigo-shape-tooltip -$_indigo-tooltip: extend( - $_light-tooltip, - $_indigo-shape-tooltip, - ( - background: ( - igx-color: ('grays', 600) - ), - - text-color: #fff - ) +/// @requires {Map} $light-tooltip +/// @requires {Map} $indigo-shape-tooltip +$indigo-tooltip: extend( + $light-tooltip, + $indigo-shape-tooltip, ); diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_tree.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_tree.scss index 54065742d0d..8974362047a 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_tree.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_tree.scss @@ -1,3 +1,5 @@ +@use '../../../base' as *; + //// /// @group schemas /// @access public @@ -9,74 +11,72 @@ /// @prop {Map} background [ igx-color: ('surface')] - The background color used for the tree node. /// @prop {Map} background-selected [igx-color: ('secondary', 200)] - The background color used for the selected tree node. /// @prop {Map} background-active [igx-color: ('grays', 200)] - The background color used for the active tree node. -/// @prop {Map} background-active-selected [igx-color: ('grays', 200)] - The background color used for the active selected tree node. -/// @prop {Map} background-disabled [igx-color: ('secondary', 300)] - The background color used for the tree node in disabled state. +/// @prop {Map} background-active-selected [igx-color: ('secondary', 300)] - The background color used for the active selected tree node. +/// @prop {Map} background-disabled [igx-color: ('surface')] - The background color used for the tree node in disabled state. /// @prop {Map} foreground [igx-contrast-color: ('surface')] - The color used for the tree node content. /// @prop {Map} foreground-selected [igx-contrast-color: ('secondary', 200)] - The color used for the content of the selected tree node. /// @prop {Map} foreground-active [igx-contrast-color: ('grays', 200)] - The color used for the content in active state of the tree node. -/// @prop {Map} foreground-active-selected [igx-contrast-color: ('grays', 200)] - The color used for the content of the active selected tree node. -/// @prop {Map} foreground-disabled [igx-contrast-color: ('secondary', 300)] - The color used for the content of the disabled tree node. +/// @prop {Map} foreground-active-selected [igx-contrast-color: ('secondary', 300)] - The color used for the content of the active selected tree node. +/// @prop {Map} foreground-disabled [igx-color: ('grays', 500)] - The color used for the content of the disabled tree node. /// @prop {Map} drop-area-color [igx-color: ('secondary'] - The background color used for the tree node drop aria. /// @prop {Map} border-color [igx-color: ('secondary')] - The outline shadow color used for tree node in focus state. /// @requires {function} extend /// @see $default-palette -$_light-tree: extend( - ( - variant: 'material', +$light-tree: ( + variant: 'material', - background: ( - igx-color: ('surface') - ), + background: ( + igx-color: ('surface') + ), - foreground: ( - igx-contrast-color: ('surface') - ), + foreground: ( + igx-contrast-color: ('surface') + ), - background-selected: ( - igx-color: ('secondary', 200) - ), + background-selected: ( + igx-color: ('secondary', 200) + ), - foreground-selected: ( - igx-contrast-color: ('secondary', 200) - ), + foreground-selected: ( + igx-contrast-color: ('secondary', 200) + ), - background-active: ( - igx-color: ('grays', 200), - ), + background-active: ( + igx-color: ('grays', 200), + ), - foreground-active: ( - igx-contrast-color: ('grays', 200), - ), + foreground-active: ( + igx-contrast-color: ('grays', 200), + ), - background-active-selected: ( - igx-color: ('secondary', 300) - ), + background-active-selected: ( + igx-color: ('secondary', 300) + ), - foreground-active-selected: ( - igx-contrast-color: ('secondary', 300), - ), + foreground-active-selected: ( + igx-contrast-color: ('secondary', 300), + ), - border-color: ( - igx-color: ('secondary') - ), + border-color: ( + igx-color: ('secondary') + ), - // Same for all themes + // Same for all themes - background-disabled: ( - igx-color: ('surface') - ), + background-disabled: ( + igx-color: ('surface') + ), - foreground-disabled: ( - igx-color: ('grays', 500) - ), + foreground-disabled: ( + igx-color: ('grays', 500) + ), - drop-area-color: ( - igx-color: ('secondary') - ), + drop-area-color: ( + igx-color: ('secondary') + ), - hover-color: ( - igx-color: ('grays', 200) - ) + hover-color: ( + igx-color: ('grays', 900, .1) ) ); @@ -84,17 +84,17 @@ $_light-tree: extend( /// @type {Map} /// @prop {Map} background [ igx-color: ('surface')] - The background color used for the tree node. /// @prop {Map} foreground [igx-contrast-color: ('surface')] - The color used for the tree node content. -/// @prop {Map} background-selected [igx-color: ('grays', 100)] - The background color used for the selected tree node. -/// @prop {Map} foreground-selected [igx-contrast-color: ('grays', 100)] - The color used for the content of the selected tree node. -/// @prop {Map} background-active [igx-color: ('surface')] - The background color used for the active tree node. -/// @prop {Map} foreground-active [igx-contrast-color: ('surface')] - The color used for the content in active state of the tree node. -/// @prop {Map} background-active-selected [igx-color: ('grays', 200)] - The background color used for the active selected tree node. -/// @prop {Map} foreground-active-selected [igx-contrast-color: ('grays', 200)] - The color used for the content of the active selected tree node. +/// @prop {Map} background-selected [igx-color: ('grays', 200)] - The background color used for the selected tree node. +/// @prop {Map} foreground-selected [igx-contrast-color: ('grays', 200)] - The color used for the content of the selected tree node. +/// @prop {Map} background-active [igx-color: ('grays', 200)] - The background color used for the active tree node. +/// @prop {Map} foreground-active [igx-contrast-color: ('grays', 200)] - The color used for the content in active state of the tree node. +/// @prop {Map} background-active-selected [igx-color: ('grays', 300)] - The background color used for the active selected tree node. +/// @prop {Map} foreground-active-selected [igx-contrast-color: ('grays', 300)] - The color used for the content of the active selected tree node. /// @prop {Map} border-color [igx-color: ('grays', 800)] - The outline shadow color used for tree node in focus state. /// @requires {function} extend -/// @requires {Map} $_light-tree -$_fluent-tree: extend( - $_light-tree, +/// @requires {Map} $light-tree +$fluent-tree: extend( + $light-tree, ( variant: 'fluent', @@ -107,27 +107,27 @@ $_fluent-tree: extend( ), background-selected: ( - igx-color: ('grays', 100) + igx-color: ('grays', 200) ), foreground-selected: ( - igx-contrast-color: ('grays', 100) + igx-contrast-color: ('grays', 200) ), background-active: ( - igx-color: ('surface') + igx-color: ('grays', 200) ), foreground-active: ( - igx-contrast-color: ('surface'), + igx-contrast-color: ('grays', 200) ), background-active-selected: ( - igx-color: ('grays', 200) + igx-color: ('grays', 300) ), foreground-active-selected: ( - igx-contrast-color: ('grays', 200), + igx-contrast-color: ('grays', 300), ), border-color: ( @@ -138,7 +138,6 @@ $_fluent-tree: extend( /// Generates a bootstrap tree schema. /// @type {Map} -/// @prop {Map} background-active [igx-color: ('surface')] - The background color used for the active tree node. /// @prop {Map} foreground-active [igx-contrast-color: ('primary')] - The color used for the content in active state of the tree node. /// @prop {Map} background-selected [igx-color: ('primary')] - The background color used for the selected tree node. /// @prop {Map} foreground-selected [igx-contrast-color: ('primary', 600)] - The color used for the content of the selected tree node. @@ -146,16 +145,12 @@ $_fluent-tree: extend( /// @prop {Map} foreground-active-selected [igx-contrast-color: ('primary', 600)] - The color used for the content of the active selected tree node. /// @prop {Map} border-color [igx-color: ('primary', 200)] - The outline shadow color used for tree node in focus state. /// @requires {function} extend -/// @requires $_light-tree -$_bootstrap-tree: extend( - $_light-tree, +/// @requires $light-tree +$bootstrap-tree: extend( + $light-tree, ( variant: 'bootstrap', - background-active: ( - igx-color: ('surface'), - ), - foreground-active: ( igx-color: ('primary'), ), @@ -181,7 +176,7 @@ $_bootstrap-tree: extend( ), hover-color: ( - igx-color: ('grays', 100) + igx-color: ('grays', 900, .1) ) ) ); @@ -196,9 +191,9 @@ $_bootstrap-tree: extend( /// @prop {Map} foreground-active-selected [igx-contrast-color: ('primary', 400)] - The color used for the content of the active selected tree node. /// @prop {Map} border-color [igx-color: ('primary', 300)] - The outline shadow color used for tree node in focus state. /// @requires {function} extend -/// @requires {Map} $_light-tree -$_indigo-tree: extend( - $_light-tree, +/// @requires {Map} $light-tree +$indigo-tree: extend( + $light-tree, ( variant: 'indigo-design', diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_watermark.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_watermark.scss index 0cee866ff9c..c178efdb732 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_watermark.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_watermark.scss @@ -1,4 +1,5 @@ -@import '../shape/watermark'; +@use '../../../base' as *; +@use '../shape/watermark' as *; //// /// @group schemas @@ -7,7 +8,7 @@ //// /// @ignore -$_light-watermark-image: 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxODQiIGhlaWdodD0iMTA0IiB2aWV3Qm94PSIwIDAgMTg0IDEwNCI+CiAgPGRlZnM+CiAgICA8c3R5bGU+CiAgICAgIC5jbHMtMSB7CiAgICAgICAgZmlsbC1ydWxlOiBldmVub2RkOwogICAgICAgIG9wYWNpdHk6IDAuMDU7CiAgICAgIH0KICAgIDwvc3R5bGU+CiAgPC9kZWZzPgogIDxwYXRoIGlkPSJ0cmlhbCIgY2xhc3M9ImNscy0xIiBkPSJNMTYuNzIsMTAuMTQ4TDEwLjMsOC40MzRsMS44MDYtNi43MjNMNy4wOSwwLjM2OSw1LjI4Myw3LjA5MiwyLjMwOCw2LjMsMS4xNSwxMC42MDlsMi45NzUsMC44TDEuMjM1LDIyLjE2MXEtMS4zNDUsNS4wMDctLjM2Nyw3LjIwN1Q1LjgsMzIuNjIzYTI4LjE2MywyOC4xNjMsMCwwLDAsNC45LjY2NGwwLjg1MS00LjEtMy44NS0uODhxLTEuNzIxLS40Ni0xLjg4OS0xLjVhMTEuMTg4LDExLjE4OCwwLDAsMSwuNTkxLTMuODY3bDIuNzQxLTEwLjIsNi40MTYsMS43MTRaTTE5LjcsMzUuNzlsNC4zNDgtMTYuMTgxLDEuMTM1LS4xNDRhMzMuODcxLDMzLjg3MSwwLDAsMSw3LjM4Mi0uMjE0TDMzLjkxOSwxNC4yYTIyLjk0MSwyMi45NDEsMCwwLDAtOC43ODgsMS4xOEwyNS44NzgsMTIuNmwtNS4wMjEtMS4zNDJMMTQuNjI5LDM0LjQzNlptMTYuNzgzLDQuNDg1LDYuMjI5LTIzLjE4MkwzNy42NCwxNS43MzgsMzEuNDEyLDM4LjkyMVptNy4yODctMjcuMTIzTDQ1LjIsNy44Miw0MC4xMzIsNi40NjYsMzguNywxMS44Wm0yMC4wNDIsMTFxLTEuMzkxLTIuMzM0LTUuNjQ1LTMuNDcxYTQxLjk1MSw0MS45NTEsMCwwLDAtOS42NDUtMS4yODVsLTAuNzczLDMuNjIsMS41MTMsMC4zcTQuNTYzLDAuODIyLDcuNTM4LDEuNjE3YTMuNTYyLDMuNTYyLDAsMCwxLDIuMiwxLjM4MiwzLjUyOCwzLjUyOCwwLDAsMSwuMTE2LDIuODE0TDU4LjY1OCwzMC44LDUyLjUyNCwyOS43YTEwLjY0NSwxMC42NDUsMCwwLDAtNi4zLjM1NHEtMi4zMDYsMS4wNzQtMy4yNTMsNC42LTEuOTgxLDcuMzcyLDQuOTQ2LDkuMjIzYTE4LjM1NywxOC4zNTcsMCwwLDAsNy45NDYuMjg1LDEwLjEzNCwxMC4xMzQsMCwwLDAsNS43MjIsMy4zNjhMNjIuNzYsNDMuNzJhMi42NjUsMi42NjUsMCwwLDEtMS4zNDMtMS4wMywyLjI3MywyLjI3MywwLDAsMS0uMTMtMS42NWwyLjg0LTEwLjU3MVE2NS4yLDI2LjQ4Miw2My44MDgsMjQuMTQ3Wk01Ny43LDM0LjM2N2wtMS42NTcsNi4xNjYtMC45MTIuMDU1QTE4LjYzNSwxOC42MzUsMCwwLDEsNTAsNDAuMDEzcS0yLjgzNi0uNzU4LTEuOTc2LTMuOTU3YTMuMjM3LDMuMjM3LDAsMCwxLDQuMTQyLTIuNjJaTTcxLjUzMiw0OS42NDJsOC44Mi0zMi44MjYtNS4wNjgtMS4zNTQtOC44MiwzMi44MjZaIi8+Cjwvc3ZnPgo='; +$light-watermark-image: 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxODQiIGhlaWdodD0iMTA0IiB2aWV3Qm94PSIwIDAgMTg0IDEwNCI+CiAgPGRlZnM+CiAgICA8c3R5bGU+CiAgICAgIC5jbHMtMSB7CiAgICAgICAgZmlsbC1ydWxlOiBldmVub2RkOwogICAgICAgIG9wYWNpdHk6IDAuMDU7CiAgICAgIH0KICAgIDwvc3R5bGU+CiAgPC9kZWZzPgogIDxwYXRoIGlkPSJ0cmlhbCIgY2xhc3M9ImNscy0xIiBkPSJNMTYuNzIsMTAuMTQ4TDEwLjMsOC40MzRsMS44MDYtNi43MjNMNy4wOSwwLjM2OSw1LjI4Myw3LjA5MiwyLjMwOCw2LjMsMS4xNSwxMC42MDlsMi45NzUsMC44TDEuMjM1LDIyLjE2MXEtMS4zNDUsNS4wMDctLjM2Nyw3LjIwN1Q1LjgsMzIuNjIzYTI4LjE2MywyOC4xNjMsMCwwLDAsNC45LjY2NGwwLjg1MS00LjEtMy44NS0uODhxLTEuNzIxLS40Ni0xLjg4OS0xLjVhMTEuMTg4LDExLjE4OCwwLDAsMSwuNTkxLTMuODY3bDIuNzQxLTEwLjIsNi40MTYsMS43MTRaTTE5LjcsMzUuNzlsNC4zNDgtMTYuMTgxLDEuMTM1LS4xNDRhMzMuODcxLDMzLjg3MSwwLDAsMSw3LjM4Mi0uMjE0TDMzLjkxOSwxNC4yYTIyLjk0MSwyMi45NDEsMCwwLDAtOC43ODgsMS4xOEwyNS44NzgsMTIuNmwtNS4wMjEtMS4zNDJMMTQuNjI5LDM0LjQzNlptMTYuNzgzLDQuNDg1LDYuMjI5LTIzLjE4MkwzNy42NCwxNS43MzgsMzEuNDEyLDM4LjkyMVptNy4yODctMjcuMTIzTDQ1LjIsNy44Miw0MC4xMzIsNi40NjYsMzguNywxMS44Wm0yMC4wNDIsMTFxLTEuMzkxLTIuMzM0LTUuNjQ1LTMuNDcxYTQxLjk1MSw0MS45NTEsMCwwLDAtOS42NDUtMS4yODVsLTAuNzczLDMuNjIsMS41MTMsMC4zcTQuNTYzLDAuODIyLDcuNTM4LDEuNjE3YTMuNTYyLDMuNTYyLDAsMCwxLDIuMiwxLjM4MiwzLjUyOCwzLjUyOCwwLDAsMSwuMTE2LDIuODE0TDU4LjY1OCwzMC44LDUyLjUyNCwyOS43YTEwLjY0NSwxMC42NDUsMCwwLDAtNi4zLjM1NHEtMi4zMDYsMS4wNzQtMy4yNTMsNC42LTEuOTgxLDcuMzcyLDQuOTQ2LDkuMjIzYTE4LjM1NywxOC4zNTcsMCwwLDAsNy45NDYuMjg1LDEwLjEzNCwxMC4xMzQsMCwwLDAsNS43MjIsMy4zNjhMNjIuNzYsNDMuNzJhMi42NjUsMi42NjUsMCwwLDEtMS4zNDMtMS4wMywyLjI3MywyLjI3MywwLDAsMS0uMTMtMS42NWwyLjg0LTEwLjU3MVE2NS4yLDI2LjQ4Miw2My44MDgsMjQuMTQ3Wk01Ny43LDM0LjM2N2wtMS42NTcsNi4xNjYtMC45MTIuMDU1QTE4LjYzNSwxOC42MzUsMCwwLDEsNTAsNDAuMDEzcS0yLjgzNi0uNzU4LTEuOTc2LTMuOTU3YTMuMjM3LDMuMjM3LDAsMCwxLDQuMTQyLTIuNjJaTTcxLjUzMiw0OS42NDJsOC44Mi0zMi44MjYtNS4wNjgtMS4zNTQtOC44MiwzMi44MjZaIi8+Cjwvc3ZnPgo='; /// Generates a light watermark schema. /// @type {Map} @@ -17,9 +18,9 @@ $_light-watermark-image: 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3 /// @prop {Map} link-background [igx-color: ('primary')] - The background color used for the link. /// @prop {Color} color [#fff] - The color used for the link text. /// @requires {function} extend -/// @requires {Map} $_material-shape-watermark -$_light-watermark: extend( - $_material-shape-watermark, +/// @requires {Map} $material-shape-watermark +$light-watermark: extend( + $material-shape-watermark, ( variant: 'material', @@ -41,15 +42,15 @@ $_light-watermark: extend( /// @type {Map} /// @prop {Number} border-radius [2px] - The border radius used for watermark. Can be a fraction between 0 and 1, pixels, or percent. /// @requires {function} extend -/// @requires {Map} $_light-watermark -/// @requires {Map} $_fluent-shape-watermark -$_fluent-watermark: extend( - $_light-watermark, - $_fluent-shape-watermark, +/// @requires {Map} $light-watermark +/// @requires {Map} $fluent-shape-watermark +$fluent-watermark: extend( + $light-watermark, + $fluent-shape-watermark, ( variant: 'fluent', - background-image: #{url($_light-watermark-image)}, + background-image: #{url($light-watermark-image)}, ) ); @@ -57,15 +58,15 @@ $_fluent-watermark: extend( /// @type {Map} /// @prop {Number} border-radius [4px] - The border radius used for watermark. Can be a fraction between 0 and 1, pixels, or percent. /// @requires {function} extend -/// @requires {Map} $_light-watermark -/// @requires {Map} $_bootstrap-shape-watermark -$_bootstrap-watermark: extend( - $_light-watermark, - $_bootstrap-shape-watermark, +/// @requires {Map} $light-watermark +/// @requires {Map} $bootstrap-shape-watermark +$bootstrap-watermark: extend( + $light-watermark, + $bootstrap-shape-watermark, ( variant: 'bootstrap', - background-image: #{url($_light-watermark-image)}, + background-image: #{url($light-watermark-image)}, ) ); @@ -74,15 +75,15 @@ $_bootstrap-watermark: extend( /// @prop {Map} border-color [igx-color: ('primary', 300)] - The border color for the link. /// @prop {Number} border-radius [1] - The border radius used for watermark. Can be a fraction between 0 and 1, pixels, or percent. /// @requires {function} extend -/// @requires {Map} $_light-watermark -/// @requires {Map} $_indigo-shape-watermark -$_indigo-watermark: extend( - $_light-watermark, - $_indigo-shape-watermark, +/// @requires {Map} $light-watermark +/// @requires {Map} $indigo-shape-watermark +$indigo-watermark: extend( + $light-watermark, + $indigo-shape-watermark, ( variant: 'indigo-design', - background-image: #{url($_light-watermark-image)}, + background-image: #{url($light-watermark-image)}, border-color: ( igx-color: ('primary', 300), diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/round-light/_index.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/round-light/_index.scss index 347ef9757b1..c20612e8229 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/round-light/_index.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/round-light/_index.scss @@ -4,120 +4,146 @@ /// @author Simeon Simeonoff //// -@import '../light/action-strip'; -@import '../light/avatar'; -@import '../light/badge'; -@import '../light/banner'; -@import '../light/bottom-nav'; -@import '../light/button'; -@import '../light/button-group'; -@import '../light/calendar'; -@import '../light/card'; -@import '../light/carousel'; -@import '../light/checkbox'; -@import '../light/chip'; -@import '../light/column-actions'; -@import '../light/combo'; -@import '../light/dialog'; -@import '../light/divider'; -@import '../light/drop-down'; -@import '../light/expansion-panel'; -@import '../light/grid'; -@import '../light/grid-filtering'; -@import '../light/pagination'; -@import '../light/grid-summary'; -@import '../light/grid-toolbar'; -@import '../light/highlight'; -@import '../light/icon'; -@import '../light/input-group'; -@import '../light/list'; -@import '../light/navbar'; -@import '../light/navdrawer'; -@import '../light/overlay'; -@import '../light/progress'; -@import '../light/radio'; -@import '../light/ripple'; -@import '../light/slider'; -@import '../light/snackbar'; -@import '../light/switch'; -@import '../light/stepper'; -@import '../light/tabs'; -@import '../light/time-picker'; -@import '../light/toast'; -@import '../light/tooltip'; +@use '../../../base' as *; +@use '../light/action-strip' as *; +@use '../shape/action-strip' as *; +@use '../light/avatar' as *; +@use '../shape/avatar' as *; +@use '../light/badge' as *; +@use '../shape/badge' as *; +@use '../light/banner' as *; +@use '../light/bottom-nav' as *; +@use '../light/button' as *; +@use '../shape/button' as *; +@use '../light/button-group' as *; +@use '../shape/button-group' as *; +@use '../light/calendar' as *; +@use '../shape/calendar' as *; +@use '../light/card' as *; +@use '../shape/card' as *; +@use '../light/carousel' as *; +@use '../shape/carousel' as *; +@use '../light/checkbox' as *; +@use '../shape/checkbox' as *; +@use '../light/chip' as *; +@use '../shape/chip' as *; +@use '../light/column-actions' as *; +@use '../light/combo' as *; +@use '../light/dialog' as *; +@use '../shape/dialog' as *; +@use '../light/divider' as *; +@use '../light/drop-down' as *; +@use '../shape/drop-down' as *; +@use '../light/expansion-panel' as *; +@use '../shape/expansion-panel' as *; +@use '../light/grid' as *; +@use '../shape/grid' as *; +@use '../light/grid-filtering' as *; +@use '../light/pagination' as *; +@use '../light/grid-summary' as *; +@use '../light/grid-toolbar' as *; +@use '../light/highlight' as *; +@use '../light/icon' as *; +@use '../light/input-group' as *; +@use '../shape/input-group' as *; +@use '../light/list' as *; +@use '../shape/list' as *; +@use '../light/navbar' as *; +@use '../light/navdrawer' as *; +@use '../shape/navdrawer' as *; +@use '../light/overlay' as *; +@use '../light/progress' as *; +@use '../shape/progress' as *; +@use '../light/radio' as *; +@use '../light/ripple' as *; +@use '../light/slider' as *; +@use '../light/snackbar' as *; +@use '../shape/snackbar' as *; +@use '../light/switch' as *; +@use '../shape/switch' as *; +@use '../light/stepper' as *; +@use '../shape/stepper' as *; +@use '../light/tabs' as *; +@use '../shape/tabs' as *; +@use '../light/time-picker' as *; +@use '../shape/time-picker' as *; +@use '../light/toast' as *; +@use '../shape/toast' as *; +@use '../light/tooltip' as *; +@use '../shape/tooltip' as *; /// Used to create round Material Design themes. /// Use with light palettes. /// @type {Map} -/// @property {Map} igx-action-strip [$_light-action-strip] -/// @property {Map} igx-avatar [$_light-avatar] -/// @property {Map} igx-badge [$_light-badge] -/// @property {Map} igx-banner [$_light-banner] -/// @property {Map} igx-bottom-nav [$_light-bottom-nav] -/// @property {Map} igx-button [$_light-button] -/// @property {Map} igx-button-group [$_light-button-group] -/// @property {Map} igx-calendar [$_light-calendar] -/// @property {Map} igx-card [$_light-card] -/// @property {Map} igx-carousel [$_light-carousel] -/// @property {Map} igx-checkbox [$_light-checkbox] -/// @property {Map} igx-chip [$_light-chip] -/// @property {Map} igx-column-actions [$_light-column-actions] -/// @property {Map} igx-combo [$_light-combo] -/// @property {Map} igx-dialog [$_light-dialog] -/// @property {Map} igx-divider [$_light-divider] -/// @property {Map} igx-drop-down [$_light-drop-down] -/// @property {Map} igx-expansion-panel [$_light-expansion-panel] -/// @property {Map} igx-grid [$_light-grid] -/// @property {Map} igx-grid-filtering [$_light-grid-filtering] -/// @property {Map} igx-paginator [$_light-pagination] -/// @property {Map} igx-grid-summary [$_light-grid-summary] -/// @property {Map} igx-grid-toolbar [$_light-grid-toolbar] -/// @property {Map} igx-highlight [$_light-highlight] -/// @property {Map} igx-icon [$_light-icon] -/// @property {Map} igx-input-group [$_light-input-group] -/// @property {Map} igx-list [$_light-list] -/// @property {Map} igx-navbar [$_light-navbar] -/// @property {Map} igx-navdrawer [$_light-navdrawer] -/// @property {Map} igx-overlay [$_light-overlay] -/// @property {Map} igx-progress-linear [$_light-progress-linear] -/// @property {Map} igx-progress-circular [$_light-progress-circular] -/// @property {Map} igx-radio [$_light-radio] -/// @property {Map} igx-ripple [$_light-ripple] -/// @property {Map} igx-slider [$_light-slider] -/// @property {Map} igx-snackbar [$_light-snackbar] -/// @property {Map} igx-switch [$_light-switch] -/// @property {Map} igx-stepper [$_light-stepper] -/// @property {Map} igx-tabs [$_light-tabs] -/// @property {Map} igx-time-picker [$_light-time-picker] -/// @property {Map} igx-toast [$_light-toast] -/// @property {Map} igx-tooltip [$_light-tooltip] +/// @property {Map} igx-action-strip [$light-action-strip] +/// @property {Map} igx-avatar [$light-avatar] +/// @property {Map} igx-badge [$light-badge] +/// @property {Map} igx-banner [$light-banner] +/// @property {Map} igx-bottom-nav [$light-bottom-nav] +/// @property {Map} igx-button [$light-button] +/// @property {Map} igx-button-group [$ight-button-group] +/// @property {Map} igx-calendar [$light-calendar] +/// @property {Map} igx-card [$light-card] +/// @property {Map} igx-carousel [$light-carousel] +/// @property {Map} igx-checkbox [$light-checkbox] +/// @property {Map} igx-chip [$light-chip] +/// @property {Map} igx-column-actions [$light-column-actions] +/// @property {Map} igx-combo [$ight-combo] +/// @property {Map} igx-dialog [$light-dialog] +/// @property {Map} igx-divider [$light-divider] +/// @property {Map} igx-drop-down [$light-drop-down] +/// @property {Map} igx-expansion-panel [$light-expansion-panel] +/// @property {Map} igx-grid [$light-grid] +/// @property {Map} igx-grid-filtering [$light-grid-filtering] +/// @property {Map} igx-paginator [$light-pagination] +/// @property {Map} igx-grid-summary [$light-grid-summary] +/// @property {Map} igx-grid-toolbar [$light-grid-toolbar] +/// @property {Map} igx-highlight [$light-highlight] +/// @property {Map} igx-icon [$light-icon] +/// @property {Map} igx-input-group [$light-input-group] +/// @property {Map} igx-list [$light-list] +/// @property {Map} igx-navbar [$light-navbar] +/// @property {Map} igx-navdrawer [$light-navdrawer] +/// @property {Map} igx-overlay [$ight-overlay] +/// @property {Map} igx-progress-linear [$light-progress-linear] +/// @property {Map} igx-progress-circular [$light-progress-circular] +/// @property {Map} igx-radio [$light-radio] +/// @property {Map} igx-ripple [$light-ripple] +/// @property {Map} igx-slider [$light-slider] +/// @property {Map} igx-snackbar [$light-snackbar] +/// @property {Map} igx-switch [$light-switch] +/// @property {Map} igx-stepper [$light-stepper] +/// @property {Map} igx-tabs [$light-tabs] +/// @property {Map} igx-time-picker [$light-time-picker] +/// @property {Map} igx-toast [$light-toast] +/// @property {Map} igx-tooltip [$light-tooltip] $light-round-schema: ( - igx-action-strip: extend($_light-action-strip, $_round-shape-avatar), - igx-avatar: extend($_light-avatar, $_round-shape-avatar), - igx-badge: extend($_light-badge, $_round-shape-badge), - igx-button: extend($_light-button, $_round-shape-button), - igx-button-group: extend($_light-button-group, $_round-shape-button-group), - igx-calendar: extend($_light-calendar, $_round-shape-calendar), - igx-card: extend($_light-card, $_round-shape-card), - igx-carousel: extend($_light-carousel, $_round-shape-carousel), - igx-checkbox: extend($_light-checkbox, $_round-shape-checkbox), - igx-chip: extend($_light-chip, $_round-shape-chip), - igx-dialog: extend($_light-dialog, $_round-shape-dialog), - igx-drop-down: extend($_light-drop-down, $_round-shape-drop-down), - igx-expansion-panel: extend($_light-expansion-panel, $_round-shape-expansion-panel), - igx-grid: extend($_light-grid, $_round-shape-grid), - igx-highlight: $_light-highlight, - igx-input-group: extend($_light-input-group, $_round-shape-input-group), - igx-list: extend($_light-list, $_round-shape-list), - igx-navdrawer: extend($_light-navdrawer, $_round-shape-navdrawer), - igx-linear-bar: extend($_light-progress-linear, $_default-shape-progress), - igx-circular-bar: extend($_light-progress-circular, $_default-shape-progress), - igx-snackbar: extend($_light-snackbar, $_round-shape-snackbar), - igx-switch: extend($_light-switch, $_round-shape-switch), - igx-stepper: extend($_light-stepper, $_round-shape-stepper), - igx-tabs: extend($_light-tabs, $_round-shape-tabs), - igx-time-picker: extend($_light-time-picker, $_round-shape-time-picker), - igx-toast: extend($_light-toast, $_round-shape-toast), - igx-tooltip: extend($_light-tooltip, $_round-shape-tooltip) + igx-action-strip: extend($light-action-strip, $round-shape-avatar), + igx-avatar: extend($light-avatar, $round-shape-avatar), + igx-badge: extend($light-badge, $round-shape-badge), + igx-button: extend($light-button, $round-shape-button), + igx-button-group: extend($light-button-group, $round-shape-button-group), + igx-calendar: extend($light-calendar, $round-shape-calendar), + igx-card: extend($light-card, $round-shape-card), + igx-carousel: extend($light-carousel, $round-shape-carousel), + igx-checkbox: extend($light-checkbox, $round-shape-checkbox), + igx-chip: extend($light-chip, $round-shape-chip), + igx-dialog: extend($light-dialog, $round-shape-dialog), + igx-drop-down: extend($light-drop-down, $round-shape-drop-down), + igx-expansion-panel: extend($light-expansion-panel, $round-shape-expansion-panel), + igx-grid: extend($light-grid, $round-shape-grid), + igx-highlight: $light-highlight, + igx-input-group: extend($light-input-group, $round-shape-input-group), + igx-list: extend($light-list, $round-shape-list), + igx-navdrawer: extend($light-navdrawer, $round-shape-navdrawer), + igx-linear-bar: extend($light-progress-linear, $default-shape-progress), + igx-circular-bar: extend($light-progress-circular, $default-shape-progress), + igx-snackbar: extend($light-snackbar, $round-shape-snackbar), + igx-switch: extend($light-switch, $round-shape-switch), + igx-stepper: extend($light-stepper, $round-shape-stepper), + igx-tabs: extend($light-tabs, $round-shape-tabs), + igx-time-picker: extend($light-time-picker, $round-shape-time-picker), + igx-toast: extend($light-toast, $round-shape-toast), + igx-tooltip: extend($light-tooltip, $round-shape-tooltip) ); diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/shape/_action-strip.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/shape/_action-strip.scss index a45828b6651..2403df6a7fd 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/shape/_action-strip.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/shape/_action-strip.scss @@ -1,3 +1,5 @@ +@use '../../../base' as *; + //// /// @group schemas /// @access public @@ -6,19 +8,19 @@ /// @type Map /// @prop {Number} actions-border-radius [1] - The border radius used for action strip actions container. Can be a fraction between 0 and 1, pixels, or percent. -$_default-shape-action-strip: ( +$default-shape-action-strip: ( actions-border-radius: 1 ); /// @type Map /// @prop {Number} actions-border-radius [1] - The border radius used for action strip actions container. Can be a fraction between 0 and 1, pixels, or percent. -$_round-shape-action-strip: ( +$round-shape-action-strip: ( actions-border-radius: 1 ); /// @type Map /// @prop {Number} actions-border-radius [0] - The border radius used for action strip actions container. Can be a fraction between 0 and 1, pixels, or percent. -$_square-shape-action-strip: ( +$square-shape-action-strip: ( actions-border-radius: 0 ); @@ -26,17 +28,17 @@ $_square-shape-action-strip: ( /// @prop {Number} actions-border-radius [1] - The border radius used for action strip actions container. Can be a fraction between 0 and 1, pixels, or percent. /// @requires {function} extend /// @requires {Map} $_round-shape-action-strip -$_fluent-shape-action-strip: extend($_round-shape-action-strip); +$fluent-shape-action-strip: extend($round-shape-action-strip); /// @type Map /// @prop {Number} actions-border-radius [4px] - The border radius used for action strip actions container. Can be a fraction between 0 and 1, pixels, or percent. -$_bootstrap-shape-action-strip: ( +$bootstrap-shape-action-strip: ( actions-border-radius: 4px ); /// @type Map /// @prop {Number} actions-border-radius [3px] - The border radius used for action strip actions container. Can be a fraction between 0 and 1, pixels, or percent. -$_indigo-shape-action-strip: ( +$indigo-shape-action-strip: ( actions-border-radius: 3px ); diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/shape/_avatar.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/shape/_avatar.scss index d9d4a4af97e..e952fd1de7f 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/shape/_avatar.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/shape/_avatar.scss @@ -6,13 +6,13 @@ ///@type Map /// @prop {Number} border-radius [1] - The border radius used for square avatar. Can be a fraction between 0 and 1, pixels, or percent. -$_round-shape-avatar: ( +$round-shape-avatar: ( border-radius: 1, ); ///@type Map /// @prop {Number} border-radius [0] - The border radius used for square avatar. Can be a fraction between 0 and 1, pixels, or percent. -$_square-shape-avatar: ( +$square-shape-avatar: ( border-radius: 0, ); @@ -20,6 +20,6 @@ $_square-shape-avatar: ( /// @prop {Number} border-radius [.25] - The border radius used for square avatar. Can be a fraction between 0 and 1, pixels, or percent. /// @requires {function} extend /// @requires {Map} $_round-shape-avatar -$_bootstrap-shape-avatar: ( +$bootstrap-shape-avatar: ( border-radius: .25 ); diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/shape/_badge.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/shape/_badge.scss index dfffdf74f7a..e3c7cd13fdf 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/shape/_badge.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/shape/_badge.scss @@ -6,25 +6,25 @@ /// @type Map /// @prop {Number} border-radius [1] - The border radius used for badge. Can be a fraction between 0 and 1, pixels, or percent. -$_default-shape-badge: ( +$default-shape-badge: ( border-radius: 1, ); /// @type Map /// @prop {Number} border-radius [1] - The border radius used for badge. Can be a fraction between 0 and 1, pixels, or percent. -$_round-shape-badge: ( +$round-shape-badge: ( border-radius: 1 ); /// @type Map /// @prop {Number} border-radius [0] - The border radius used for badge. Can be a fraction between 0 and 1, pixels, or percent. -$_square-shape-badge: ( +$square-shape-badge: ( border-radius: 0, ); /// @type Map /// @prop {Number} border-radius [4px] - The border radius used for badge. Can be a fraction between 0 and 1, pixels, or percent. -$_bootstrap-shape-badge: ( +$bootstrap-shape-badge: ( border-radius: 4px, ); diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/shape/_button-group.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/shape/_button-group.scss index 54115d039d9..4f496f57330 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/shape/_button-group.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/shape/_button-group.scss @@ -6,37 +6,37 @@ /// @type Map /// @prop {Number} border-radius [.2] - The border radius used for button-group component. Can be a fraction between 0 and 1, pixels, or percent. -$_default-shape-button-group: ( +$default-shape-button-group: ( border-radius: .2, ); /// @type Map /// @prop {Number} border-radius [1] - The border radius used for button-group component. Can be a fraction between 0 and 1, pixels, or percent. -$_round-shape-button-group: ( +$round-shape-button-group: ( border-radius: 1, ); /// @type Map /// @prop {Number} border-radius [0] - The border radius used for button-group component. Can be a fraction between 0 and 1, pixels, or percent. -$_square-shape-button-group: ( +$square-shape-button-group: ( border-radius: 0, ); /// @type Map /// @prop {Number} border-radius [2px] - The border radius used for button-group component. Can be a fraction between 0 and 1, pixels, or percent. -$_fluent-shape-button-group: ( +$fluent-shape-button-group: ( border-radius: 2px, ); /// @type Map /// @prop {Number} border-radius [4px] - The border radius used for button-group component. Can be a fraction between 0 and 1, pixels, or percent. -$_bootstrap-shape-button-group: ( +$bootstrap-shape-button-group: ( border-radius: 4px, ); /// @type Map /// @prop {Number} border-radius [8px] - The border radius used for button-group component. Can be a fraction between 0 and 1, pixels, or percent. -$_indigo-shape-button-group: ( +$indigo-shape-button-group: ( border-radius: 8px ); diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/shape/_button.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/shape/_button.scss index 41e39f3e143..517f873483f 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/shape/_button.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/shape/_button.scss @@ -6,35 +6,35 @@ /// @type Map /// @prop {Number} border-radius [1] - The border radius used for icon button. Can be a fraction between 0 and 1, pixels, or percent. -$_round-shape-button: ( +$round-shape-button: ( border-radius: 1 ); /// @type Map /// @prop {Number} border-radius [0] - The border radius used for icon button. Can be a fraction between 0 and 1, pixels, or percent. -$_square-shape-button: ( +$square-shape-button: ( border-radius: 0 ); /// @type Map /// @prop {Number} border-radius [.2] - The border radius used for icon button. Can be a fraction between 0 and 1, pixels, or percent. -$_material-shape-button: ( +$material-shape-button: ( border-radius: .2 ); /// @type Map /// @prop {Number} border-radius [.1] - The border radius used for icon button. Can be a fraction between 0 and 1, pixels, or percent. -$_fluent-shape-button: ( +$fluent-shape-button: ( border-radius: .1 ); /// @type Map /// @prop {Number} border-radius [.2] - The border radius used for icon button. Can be a fraction between 0 and 1, pixels, or percent. -$_bootstrap-shape-button: ( +$bootstrap-shape-button: ( border-radius: .2 ); /// @type Map /// @see $_round-shape-button /// @requires $_round-shape-button -$_indigo-shape-button: $_round-shape-button; +$indigo-shape-button: $round-shape-button; diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/shape/_calendar.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/shape/_calendar.scss index 1742cfb20ff..db8200a4519 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/shape/_calendar.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/shape/_calendar.scss @@ -1,3 +1,5 @@ +@use '../../../base' as *; + //// /// @group schemas /// @access public @@ -8,7 +10,7 @@ /// @prop {Number} border-radius [.2] - The border radius used for calendar. Can be a fraction between 0 and 1, pixels, or percent. /// @prop {Number} date-border-radius [1] - The border radius used for calendar date. Can be a fraction between 0 and 1, pixels, or percent. /// @prop {Number} month-border-radius [1] - The border radius used for calendar month. Can be a fraction between 0 and 1, pixels, or percent. -$_default-shape-calendar: ( +$default-shape-calendar: ( border-radius: .2, date-border-radius: 1, month-border-radius: 1, @@ -18,7 +20,7 @@ $_default-shape-calendar: ( /// @prop {Number} border-radius [1] - The border radius used for calendar. Can be a fraction between 0 and 1, pixels, or percent. /// @prop {Number} date-border-radius [1] - The border radius used for calendar date. Can be a fraction between 0 and 1, pixels, or percent. /// @prop {Number} month-border-radius [1] - The border radius used for calendar month. Can be a fraction between 0 and 1, pixels, or percent. -$_round-shape-calendar: ( +$round-shape-calendar: ( border-radius: 1, date-border-radius: 1, month-border-radius: 1, @@ -28,7 +30,7 @@ $_round-shape-calendar: ( /// @prop {Number} border-radius [0] - The border radius used for calendar. Can be a fraction between 0 and 1, pixels, or percent. /// @prop {Number} date-border-radius [0] - The border radius used for calendar date. Can be a fraction between 0 and 1, pixels, or percent. /// @prop {Number} month-border-radius [0] - The border radius used for calendar month. Can be a fraction between 0 and 1, pixels, or percent. -$_square-shape-calendar: ( +$square-shape-calendar: ( border-radius: 0, date-border-radius: 0, month-border-radius: 0, @@ -40,13 +42,13 @@ $_square-shape-calendar: ( /// @prop {Number} month-border-radius [0] - The border radius used for calendar month. Can be a fraction between 0 and 1, pixels, or percent. /// @requires {function} extend /// @requires {Map} $_square-shape-calendar -$_fluent-shape-calendar: extend($_square-shape-calendar); +$fluent-shape-calendar: extend($square-shape-calendar); /// @type Map /// @prop {Number} border-radius [4px] - The border radius used for calendar. Can be a fraction between 0 and 1, pixels, or percent. /// @prop {Number} date-border-radius [4px] - The border radius used for calendar date. Can be a fraction between 0 and 1, pixels, or percent. /// @prop {Number} month-border-radius [4px] - The border radius used for calendar month. Can be a fraction between 0 and 1, pixels, or percent. -$_bootstrap-shape-calendar: ( +$bootstrap-shape-calendar: ( border-radius: 4px, date-border-radius: 4px, month-border-radius: 4px, @@ -56,7 +58,7 @@ $_bootstrap-shape-calendar: ( /// @prop {Number} border-radius [3px] - The border radius used for calendar. Can be a fraction between 0 and 1, pixels, or percent. /// @prop {Number} date-border-radius [1] - The border radius used for calendar date. Can be a fraction between 0 and 1, pixels, or percent. /// @prop {Number} month-border-radius [1] - The border radius used for calendar month. Can be a fraction between 0 and 1, pixels, or percent. -$_indigo-shape-calendar: ( +$indigo-shape-calendar: ( border-radius: 3px, date-border-radius: 1, month-border-radius: 1 diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/shape/_card.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/shape/_card.scss index b71b44c5b80..f09f75cd0e4 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/shape/_card.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/shape/_card.scss @@ -6,36 +6,36 @@ /// @type Map /// @prop {Number} border-radius [.17] - The border radius used for card. Can be a fraction between 0 and 1, pixels, or percent. -$_default-shape-card: ( +$default-shape-card: ( border-radius: .17, ); /// @type Map /// @prop {Number} border-radius [1] - The border radius used for card. Can be a fraction between 0 and 1, pixels, or percent. -$_round-shape-card: ( +$round-shape-card: ( border-radius: 1, ); /// @type Map /// @prop {Number} border-radius [0] - The border radius used for card. Can be a fraction between 0 and 1, pixels, or percent. -$_square-shape-card: ( +$square-shape-card: ( border-radius: 0, ); /// @type Map /// @prop {Number} border-radius [2px] - The border radius used for card. Can be a fraction between 0 and 1, pixels, or percent. -$_fluent-shape-card: ( +$fluent-shape-card: ( border-radius: 2px, ); /// @type Map /// @prop {Number} border-radius [4px] - The border radius used for card. Can be a fraction between 0 and 1, pixels, or percent. -$_bootstrap-shape-card: ( +$bootstrap-shape-card: ( border-radius: 4px, ); /// @type Map /// @prop {Number} border-radius [3px] - The border radius used for card. Can be a fraction between 0 and 1, pixels, or percent. -$_indigo-shape-card: ( +$indigo-shape-card: ( border-radius: 3px, ); diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/shape/_carousel.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/shape/_carousel.scss index f6ab68d373a..2adee619edc 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/shape/_carousel.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/shape/_carousel.scss @@ -6,24 +6,24 @@ /// @type Map /// @prop {Number} border-radius [0] - The border radius used for carousel. Can be a fraction between 0 and 1, pixels, or percent. -$_default-shape-carousel: ( +$default-shape-carousel: ( border-radius: 0, ); /// @type Map /// @prop {Number} border-radius [1] - The border radius used for carousel. Can be a fraction between 0 and 1, pixels, or percent. -$_round-shape-carousel: ( +$round-shape-carousel: ( border-radius: 1, ); /// @type Map /// @prop {Number} border-radius [0] - The border radius used for carousel. Can be a fraction between 0 and 1, pixels, or percent. -$_square-shape-carousel: ( +$square-shape-carousel: ( border-radius: 0, ); /// @type Map /// @prop {Number} border-radius [4px] - The border radius used for carousel. Can be a fraction between 0 and 1, pixels, or percent. -$_bootstrap-shape-carousel: ( +$bootstrap-shape-carousel: ( border-radius: 4px ); diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/shape/_checkbox.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/shape/_checkbox.scss index 17fd3b509f2..e66f4e9ad1a 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/shape/_checkbox.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/shape/_checkbox.scss @@ -7,7 +7,7 @@ /// @type Map /// @prop {Number} border-radius [.2] - The border radius used for checkbox. Can be a fraction between 0 and 1, pixels, or percent. /// @prop {Number} border-radius-ripple [1] - The border radius used for checkbox ripple. Can be a fraction between 0 and 1, pixels, or percent. -$_default-shape-checkbox: ( +$default-shape-checkbox: ( border-radius: .2, border-radius-ripple: 1, ); @@ -15,7 +15,7 @@ $_default-shape-checkbox: ( /// @type Map /// @prop {Number} border-radius [50%] - The border radius used for checkbox. Can be a fraction between 0 and 1, pixels, or percent. /// @prop {Number} border-radius-ripple [1] - The border radius used for checkbox ripple. Can be a fraction between 0 and 1, pixels, or percent. -$_round-shape-checkbox: ( +$round-shape-checkbox: ( border-radius: 50%, border-radius-ripple: 1 ); @@ -23,7 +23,7 @@ $_round-shape-checkbox: ( /// @type Map /// @prop {Number} border-radius [0] - The border radius used for checkbox. Can be a fraction between 0 and 1, pixels, or percent. /// @prop {Number} border-radius-ripple [0] - The border radius used for checkbox ripple. Can be a fraction between 0 and 1, pixels, or percent. -$_square-shape-checkbox: ( +$square-shape-checkbox: ( border-radius: 0, border-radius-ripple: 0 ); @@ -31,7 +31,7 @@ $_square-shape-checkbox: ( /// @type Map /// @prop {Number} border-radius [2px] - The border radius used for checkbox. Can be a fraction between 0 and 1, pixels, or percent. /// @prop {Number} border-radius-ripple [2px] - The border radius used for checkbox ripple. Can be a fraction between 0 and 1, pixels, or percent. -$_fluent-shape-checkbox: ( +$fluent-shape-checkbox: ( border-radius: 2px, border-radius-ripple: 2px ); @@ -39,7 +39,7 @@ $_fluent-shape-checkbox: ( /// @type Map /// @prop {Number} border-radius [4px] - The border radius used for checkbox. Can be a fraction between 0 and 1, pixels, or percent. /// @prop {Number} border-radius-ripple [4px] - The border radius used for checkbox ripple. Can be a fraction between 0 and 1, pixels, or percent. -$_bootstrap-shape-checkbox: ( +$bootstrap-shape-checkbox: ( border-radius: 4px, border-radius-ripple: 4px ); @@ -47,7 +47,7 @@ $_bootstrap-shape-checkbox: ( /// @type Map /// @prop {Number} border-radius [3px] - The border radius used for checkbox. Can be a fraction between 0 and 1, pixels, or percent. /// @prop {Number} border-radius-ripple [3px] - The border radius used for checkbox ripple. Can be a fraction between 0 and 1, pixels, or percent. -$_indigo-shape-checkbox: ( +$indigo-shape-checkbox: ( border-radius: 3px, border-radius-ripple: 3px ); diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/shape/_chip.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/shape/_chip.scss index 0f2f3a9a740..bc5fe772b61 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/shape/_chip.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/shape/_chip.scss @@ -1,3 +1,5 @@ +@use '../../../base' as *; + //// /// @group schemas /// @access public @@ -6,23 +8,23 @@ /// @type Map /// @prop {Number} border-radius [1] - The border radius used for chip. Can be a fraction between 0 and 1, pixels, or percent. -$_round-shape-chip: ( +$round-shape-chip: ( border-radius: 1, ); /// @type Map /// @prop {Number} border-radius [0] - The border radius used for chip. Can be a fraction between 0 and 1, pixels, or percent. -$_square-shape-chip: ( +$square-shape-chip: ( border-radius: 0, ); /// @type Map /// @prop {Number} border-radius [.25] - The border radius used for chip. Can be a fraction between 0 and 1, pixels, or percent. -$_bootstrap-shape-chip: ( +$bootstrap-shape-chip: ( border-radius: .25 ); /// @type Map /// @prop {Number} border-radius [1] - The border radius used for chip. Can be a fraction between 0 and 1, pixels, or percent. /// @requires {Map} $_round-shape-button -$_indigo-shape-chip: extend($_round-shape-chip); +$indigo-shape-chip: extend($round-shape-chip); diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/shape/_dialog.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/shape/_dialog.scss index d20964c5e20..3de64c121d5 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/shape/_dialog.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/shape/_dialog.scss @@ -6,36 +6,36 @@ /// @type Map /// @prop {Number} border-radius [.1] - The border radius used for dialog. Can be a fraction between 0 and 1, pixels, or percent. -$_default-shape-dialog: ( +$default-shape-dialog: ( border-radius: .1, ); /// @type Map /// @prop {Number} border-radius [1] - The border radius used for dialog. Can be a fraction between 0 and 1, pixels, or percent. -$_round-shape-dialog: ( +$round-shape-dialog: ( border-radius: 1, ); /// @type Map /// @prop {Number} border-radius [0] - The border radius used for dialog. Can be a fraction between 0 and 1, pixels, or percent. -$_square-shape-dialog: ( +$square-shape-dialog: ( border-radius: 0, ); /// @type Map /// @prop {Number} border-radius [2px] - The border radius used for dialog. Can be a fraction between 0 and 1, pixels, or percent. -$_fluent-shape-dialog: ( +$fluent-shape-dialog: ( border-radius: 2px, ); /// @type Map /// @prop {Number} border-radius [4px] - The border radius used for dialog. Can be a fraction between 0 and 1, pixels, or percent. -$_bootstrap-shape-dialog: ( +$bootstrap-shape-dialog: ( border-radius: 4px, ); /// @type Map /// @prop {Number} border-radius [2px] - The border radius used for dialog. Can be a fraction between 0 and 1, pixels, or percent. -$_indigo-shape-dialog: ( +$indigo-shape-dialog: ( border-radius: 2px, ); diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/shape/_drop-down.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/shape/_drop-down.scss index ec1381bfd33..280d8f6ac2d 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/shape/_drop-down.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/shape/_drop-down.scss @@ -7,7 +7,7 @@ /// @type Map /// @prop {Number} border-radius [.2] - The border radius used for drop-down component. Can be a fraction between 0 and 1, pixels, or percent. /// @prop {Number} item-border-radius [0] - The border radius used for the drop-down items. Can be a fraction between 0 and 1, pixels, or percent. -$_default-shape-drop-down: ( +$default-shape-drop-down: ( border-radius: .2, item-border-radius: 0, ); @@ -15,7 +15,7 @@ $_default-shape-drop-down: ( /// @type Map /// @prop {Number} border-radius [1] - The border radius used for drop-down component. Can be a fraction between 0 and 1, pixels, or percent. /// @prop {Number} item-border-radius [0] - The border radius used for the drop-down items. Can be a fraction between 0 and 1, pixels, or percent. -$_round-shape-drop-down: ( +$round-shape-drop-down: ( border-radius: 1, item-border-radius: 0, ); @@ -23,7 +23,7 @@ $_round-shape-drop-down: ( /// @type Map /// @prop {Number} border-radius [0] - The border radius used for drop-down component. Can be a fraction between 0 and 1, pixels, or percent. /// @prop {Number} item-border-radius [0] - The border radius used for the drop-down items. Can be a fraction between 0 and 1, pixels, or percent. -$_square-shape-drop-down: ( +$square-shape-drop-down: ( border-radius: 0, item-border-radius: 0, ); @@ -31,7 +31,7 @@ $_square-shape-drop-down: ( /// @type Map /// @prop {Number} border-radius [2px] - The border radius used for drop-down component. Can be a fraction between 0 and 1, pixels, or percent. /// @prop {Number} item-border-radius [0] - The border radius used for the drop-down items. Can be a fraction between 0 and 1, pixels, or percent. -$_fluent-shape-drop-down: ( +$fluent-shape-drop-down: ( border-radius: 2px, item-border-radius: 0, ); @@ -39,7 +39,7 @@ $_fluent-shape-drop-down: ( /// @type Map /// @prop {Number} border-radius [4px] - The border radius used for drop-down component. Can be a fraction between 0 and 1, pixels, or percent. /// @prop {Number} item-border-radius [0] - The border radius used for the drop-down items. Can be a fraction between 0 and 1, pixels, or percent. -$_bootstrap-shape-drop-down: ( +$bootstrap-shape-drop-down: ( border-radius: 4px, item-border-radius: 0, ); @@ -47,7 +47,7 @@ $_bootstrap-shape-drop-down: ( /// @type Map /// @prop {Number} border-radius [2px] - The border radius used for drop-down component. Can be a fraction between 0 and 1, pixels, or percent. /// @prop {Number} item-border-radius [2px] - The border radius used for the drop-down items. Can be a fraction between 0 and 1, pixels, or percent. -$_indigo-shape-drop-down: ( +$indigo-shape-drop-down: ( border-radius: 2px, item-border-radius: 2px, ); diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/shape/_expansion-panel.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/shape/_expansion-panel.scss index 3c56f0200d8..8ead11e6b40 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/shape/_expansion-panel.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/shape/_expansion-panel.scss @@ -6,19 +6,19 @@ /// @type Map /// @prop {Number} border-radius [0] - The border radius used for expansion-panel. Can be a fraction between 0 and 1, pixels, or percent. -$_default-shape-expansion-panel: ( +$default-shape-expansion-panel: ( border-radius: 0, ); /// @type Map /// @prop {Number} border-radius [1] - The border radius used for expansion-panel. Can be a fraction between 0 and 1, pixels, or percent. -$_round-shape-expansion-panel: ( +$round-shape-expansion-panel: ( border-radius: 1, ); /// @type Map /// @prop {Number} border-radius [0] - The border radius used for expansion-panel. Can be a fraction between 0 and 1, pixels, or percent. -$_square-shape-expansion-panel: ( +$square-shape-expansion-panel: ( border-radius: 0, ); @@ -26,11 +26,11 @@ $_square-shape-expansion-panel: ( /// @prop {Number} border-radius [0] - The border radius used for expansion-panel. Can be a fraction between 0 and 1, pixels, or percent. /// @requires {function} extend /// @requires {Map} $_square-shape-expansion-panel -$_bootstrap-shape-expansion-panel: extend($_square-shape-expansion-panel); +$bootstrap-shape-expansion-panel: $square-shape-expansion-panel; /// @type Map /// @prop {Number} border-radius [3px] - The border radius used for expansion-panel. Can be a fraction between 0 and 1, pixels, or percent. -$_indigo-shape-expansion-panel: ( +$indigo-shape-expansion-panel: ( border-radius: 3px ); diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/shape/_grid.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/shape/_grid.scss index b66225e16c9..b30023d668c 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/shape/_grid.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/shape/_grid.scss @@ -6,26 +6,26 @@ /// @type Map /// @prop {Number} drop-area-border-radius [1] - The border radius used for drop-area. Can be a fraction between 0 and 1, pixels, or percent. -$_default-shape-grid: ( +$default-shape-grid: ( drop-area-border-radius: 1 ); -$_round-shape-grid: (); +$round-shape-grid: (); /// @type Map /// @prop {Number} drop-area-border-radius [0] - The border radius used for drop-area. Can be a fraction between 0 and 1, pixels, or percent. -$_square-shape-grid: ( +$square-shape-grid: ( drop-area-border-radius: 0 ); /// @type Map /// @prop {Number} drop-area-border-radius [2px] - The border radius used for drop-area. Can be a fraction between 0 and 1, pixels, or percent. -$_fluent-shape-grid: ( +$fluent-shape-grid: ( drop-area-border-radius: 2px ); /// @type Map /// @prop {Number} drop-area-border-radius [4px] - The border radius used for drop-area. Can be a fraction between 0 and 1, pixels, or percent. -$_bootstrap-shape-grid: ( +$bootstrap-shape-grid: ( drop-area-border-radius: 4px ); diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/shape/_input-group.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/shape/_input-group.scss index bc15f59afa9..98151b9b1cd 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/shape/_input-group.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/shape/_input-group.scss @@ -8,7 +8,7 @@ /// @prop {Number} box-border-radius [.2 .2 0 0] - The border radius used for box input. Can be a fraction between 0 and 1, pixels, or percent. /// @prop {Number} border-border-radius [.2] - The border radius used for border input. Can be a fraction between 0 and 1, pixels, or percent. /// @prop {Number} search-border-radius [.2] - The border radius used for search input. Can be a fraction between 0 and 1, pixels, or percent. -$_default-shape-input-group: ( +$default-shape-input-group: ( box-border-radius: .2 .2 0 0, border-border-radius: .2, search-border-radius: .2, @@ -18,7 +18,7 @@ $_default-shape-input-group: ( /// @prop {Number} box-border-radius [1 1 1 1] - The border radius used for box input. Can be a fraction between 0 and 1, pixels, or percent. /// @prop {Number} border-border-radius [1] - The border radius used for border input. Can be a fraction between 0 and 1, pixels, or percent. /// @prop {Number} search-border-radius [1] - The border radius used for search input. Can be a fraction between 0 and 1, pixels, or percent. -$_round-shape-input-group: ( +$round-shape-input-group: ( box-border-radius: 1 1 1 1, border-border-radius: 1, search-border-radius: 1, @@ -28,7 +28,7 @@ $_round-shape-input-group: ( /// @prop {Number} box-border-radius [0] - The border radius used for box input. Can be a fraction between 0 and 1, pixels, or percent. /// @prop {Number} border-border-radius [0] - The border radius used for border input. Can be a fraction between 0 and 1, pixels, or percent. /// @prop {Number} search-border-radius [0] - The border radius used for search input. Can be a fraction between 0 and 1, pixels, or percent. -$_square-shape-input-group: ( +$square-shape-input-group: ( box-border-radius: 0, border-border-radius: 0, search-border-radius: 0, @@ -38,7 +38,7 @@ $_square-shape-input-group: ( /// @prop {Number} box-border-radius [2px] - The border radius used for box input. Can be a fraction between 0 and 1, pixels, or percent. /// @prop {Number} border-border-radius [2px] - The border radius used for border input. Can be a fraction between 0 and 1, pixels, or percent. /// @prop {Number} search-border-radius [2px] - The border radius used for search input. Can be a fraction between 0 and 1, pixels, or percent. -$_fluent-shape-input-group: ( +$fluent-shape-input-group: ( box-border-radius: 2px, border-border-radius: 2px, search-border-radius: 2px, @@ -48,7 +48,7 @@ $_fluent-shape-input-group: ( /// @prop {Number} box-border-radius [.2] - The border radius used for box input. Can be a fraction between 0 and 1, pixels, or percent. /// @prop {Number} border-border-radius [.2] - The border radius used for border input. Can be a fraction between 0 and 1, pixels, or percent. /// @prop {Number} search-border-radius [.2] - The border radius used for search input. Can be a fraction between 0 and 1, pixels, or percent. -$_bootstrap-shape-input-group: ( +$bootstrap-shape-input-group: ( box-border-radius: .2, border-border-radius: .2, search-border-radius: .2, @@ -58,7 +58,7 @@ $_bootstrap-shape-input-group: ( /// @prop {Number} box-border-radius [0] - The border radius used for box input. Can be a fraction between 0 and 1, pixels, or percent. /// @prop {Number} border-border-radius [0] - The border radius used for border input. Can be a fraction between 0 and 1, pixels, or percent. /// @prop {Number} search-border-radius [2px] - The border radius used for search input. Can be a fraction between 0 and 1, pixels, or percent. -$_indigo-shape-input-group: ( +$indigo-shape-input-group: ( box-border-radius: 0, border-border-radius: 0, search-border-radius: 2px, diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/shape/_list.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/shape/_list.scss index 54c0f37b43e..cd2b27188b1 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/shape/_list.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/shape/_list.scss @@ -7,7 +7,7 @@ /// @type Map /// @prop {Number} border-radius [0] - The border radius used for list component. Can be a fraction between 0 and 1, pixels, or percent. /// @prop {Number} item-border-radius [0] - The border radius used for list item. Can be a fraction between 0 and 1, pixels, or percent. -$_default-shape-list: ( +$default-shape-list: ( border-radius: 0, item-border-radius: 0, ); @@ -15,7 +15,7 @@ $_default-shape-list: ( /// @type Map /// @prop {Number} border-radius [1] - The border radius used for list component. Can be a fraction between 0 and 1, pixels, or percent. /// @prop {Number} item-border-radius [1] - The border radius used for list item. Can be a fraction between 0 and 1, pixels, or percent. -$_round-shape-list: ( +$round-shape-list: ( border-radius: 1, item-border-radius: 1, ); @@ -23,7 +23,7 @@ $_round-shape-list: ( /// @type Map /// @prop {Number} border-radius [0] - The border radius used for list component. Can be a fraction between 0 and 1, pixels, or percent. /// @prop {Number} item-border-radius [0] - The border radius used for list item. Can be a fraction between 0 and 1, pixels, or percent. -$_square-shape-list: ( +$square-shape-list: ( border-radius: 0, item-border-radius: 0, ); @@ -31,7 +31,7 @@ $_square-shape-list: ( /// @type Map /// @prop {Number} border-radius [4px] - The border radius used for list component. Can be a fraction between 0 and 1, pixels, or percent. /// @prop {Number} item-border-radius [0] - The border radius used for list item. Can be a fraction between 0 and 1, pixels, or percent. -$_bootstrap-shape-list: ( +$bootstrap-shape-list: ( border-radius: 4px, item-border-radius: 0, ); @@ -39,7 +39,7 @@ $_bootstrap-shape-list: ( /// @type Map /// @prop {Number} border-radius [0] - The border radius used for list component. Can be a fraction between 0 and 1, pixels, or percent. /// @prop {Number} item-border-radius [2px] - The border radius used for list item. Can be a fraction between 0 and 1, pixels, or percent. -$_indigo-shape-list: ( +$indigo-shape-list: ( border-radius: 0, item-border-radius: 2px ); diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/shape/_navdrawer.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/shape/_navdrawer.scss index 009220c3a4d..0dbff5555e2 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/shape/_navdrawer.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/shape/_navdrawer.scss @@ -7,7 +7,7 @@ /// @type Map /// @prop {Number} border-radius [0] - The border radius used for the navdrawer component. Can be a fraction between 0 and 1, pixels, or percent. /// @prop {Number} item-border-radius [.16667] - The border radius used for the navdrawer items. Can be a fraction between 0 and 1, pixels, or percent. -$_default-shape-navdrawer: ( +$default-shape-navdrawer: ( border-radius: 0, item-border-radius: .16667, ); @@ -15,7 +15,7 @@ $_default-shape-navdrawer: ( /// @type Map /// @prop {Number} border-radius [1] - The border radius used for the navdrawer component. Can be a fraction between 0 and 1, pixels, or percent. /// @prop {Number} item-border-radius [1] - The border radius used for the navdrawer items. Can be a fraction between 0 and 1, pixels, or percent. -$_round-shape-navdrawer: ( +$round-shape-navdrawer: ( border-radius: 1, item-border-radius: 1, ); @@ -23,7 +23,7 @@ $_round-shape-navdrawer: ( /// @type Map /// @prop {Number} border-radius [0] - The border radius used for the navdrawer component. Can be a fraction between 0 and 1, pixels, or percent. /// @prop {Number} item-border-radius [0] - The border radius used for the navdrawer items. Can be a fraction between 0 and 1, pixels, or percent. -$_square-shape-navdrawer: ( +$square-shape-navdrawer: ( border-radius: 0, item-border-radius: 0 ); @@ -31,7 +31,7 @@ $_square-shape-navdrawer: ( /// @type Map /// @prop {Number} border-radius [0] - The border radius used for the navdrawer component. Can be a fraction between 0 and 1, pixels, or percent. /// @prop {Number} item-border-radius [1] - The border radius used for the navdrawer items. Can be a fraction between 0 and 1, pixels, or percent. -$_indigo-shape-navdrawer: ( +$indigo-shape-navdrawer: ( border-radius: 0, item-border-radius: 1, ); diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/shape/_progress.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/shape/_progress.scss index aadfe3c5d58..37f86661f4f 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/shape/_progress.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/shape/_progress.scss @@ -6,19 +6,19 @@ /// @type Map /// @prop {Number} track-border-radius [0] - The border radius used for the progress bar track. Can be a fraction between 0 and 1, pixels, or percent. -$_default-shape-progress: ( +$default-shape-progress: ( track-border-radius: 0 ); /// @type Map /// @prop {Number} track-border-radius [1] - The border radius used for the progress bar track. Can be a fraction between 0 and 1, pixels, or percent. -$_round-shape-progress: ( +$round-shape-progress: ( track-border-radius: 1 ); /// @type Map /// @prop {Number} track-border-radius [0] - The border radius used for the progress bar track. Can be a fraction between 0 and 1, pixels, or percent. -$_square-shape-progress: ( +$square-shape-progress: ( track-border-radius: 0 ); @@ -26,11 +26,11 @@ $_square-shape-progress: ( /// @prop {Number} track-border-radius [0] - The border radius used for the progress bar track. Can be a fraction between 0 and 1, pixels, or percent. /// @requires {function} extend /// @requires {Map} $_square-shape-progress -$_fluent-shape-progress: extend($_square-shape-progress); +$fluent-shape-progress: $square-shape-progress; /// @type Map /// @prop {Number} track-border-radius [4px] - The border radius used for the progress bar track. Can be a fraction between 0 and 1, pixels, or percent. -$_bootstrap-shape-progress: ( +$bootstrap-shape-progress: ( track-border-radius: 4px ); diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/shape/_snackbar.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/shape/_snackbar.scss index 23f66b381e6..6e2174e8e76 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/shape/_snackbar.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/shape/_snackbar.scss @@ -6,37 +6,37 @@ /// @type Map /// @prop {Number} border-radius [.17] - The border radius used for snackbar. Can be a fraction between 0 and 1, pixels, or percent. -$_default-shape-snackbar: ( +$default-shape-snackbar: ( border-radius: .17, ); /// @type Map /// @prop {Number} border-radius [1] - The border radius used for snackbar. Can be a fraction between 0 and 1, pixels, or percent. -$_round-shape-snackbar: ( +$round-shape-snackbar: ( border-radius: 1 ); /// @type Map /// @prop {Number} border-radius [0] - The border radius used for snackbar. Can be a fraction between 0 and 1, pixels, or percent. -$_square-shape-snackbar: ( +$square-shape-snackbar: ( border-radius: 0, ); /// @type Map /// @prop {Number} border-radius [2px] - The border radius used for snackbar. Can be a fraction between 0 and 1, pixels, or percent. -$_fluent-shape-snackbar: ( +$fluent-shape-snackbar: ( border-radius: 2px, ); /// @type Map /// @prop {Number} border-radius [.17] - The border radius used for snackbar. Can be a fraction between 0 and 1, pixels, or percent. /// @requires {function} extend -/// @requires $_default-shape-snackbar -$_bootstrap-shape-snackbar: extend($_default-shape-snackbar); +/// @requires $default-shape-snackbar +$bootstrap-shape-snackbar: $default-shape-snackbar; /// @type Map /// @prop {Number} border-radius [6px] - The border radius used for snackbar. Can be a fraction between 0 and 1, pixels, or percent. -$_indigo-shape-snackbar: ( +$indigo-shape-snackbar: ( border-radius: 6px ); diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/shape/_splitter.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/shape/_splitter.scss index 05333ab97b7..a90c036cf2f 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/shape/_splitter.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/shape/_splitter.scss @@ -6,13 +6,13 @@ /// @type Map /// @prop {Number} border-radius [1] - The border radius used for splitter. Can be a fraction between 0 and 1, pixels, or percent. -$_round-shape-splitter: ( +$round-shape-splitter: ( border-radius: 1, ); /// @type Map /// @prop {Number} border-radius [0] - The border radius used for splitter. Can be a fraction between 0 and 1, pixels, or percent. -$_square-shape-splitter: ( +$square-shape-splitter: ( border-radius: 0, ); diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/shape/_stepper.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/shape/_stepper.scss index cf2eab72913..7bdfaf6a66d 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/shape/_stepper.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/shape/_stepper.scss @@ -1,3 +1,5 @@ +@use '../../../base' as *; + //// /// @group schemas /// @access public @@ -7,32 +9,45 @@ /// @type Map /// @property {Number} border-radius-indicator [1] - The border radius used for stepper indicator. Can be a fraction between 0 and 1, pixels, or percent. /// @property {Number} border-radius-step-header [0] - The border radius used for stepper step-header. Can be a fraction between 0 and 1, pixels, or percent. -$_default-shape-stepper: ( +$default-shape-stepper: ( border-radius-indicator: 1, border-radius-step-header: 0 ); -$_round-shape-stepper: ( +/// @type Map +/// @property {Number} border-radius-indicator [1] - The border radius used for stepper indicator. Can be a fraction between 0 and 1, pixels, or percent. +/// @property {Number} border-radius-step-header [32px] - The border radius used for stepper step-header. Can be a fraction between 0 and 1, pixels, or percent. +$round-shape-stepper: ( border-radius-indicator: 1, border-radius-step-header: 32px ); -$_square-shape-stepper: ( +/// @type Map +/// @property {Number} border-radius-indicator [0] - The border radius used for stepper indicator. Can be a fraction between 0 and 1, pixels, or percent. +/// @property {Number} border-radius-step-header [0] - The border radius used for stepper step-header. Can be a fraction between 0 and 1, pixels, or percent. + +$square-shape-stepper: ( border-radius-indicator: 0, border-radius-step-header: 0 ); /// @type Map -$_fluent-shape-stepper: ( +/// @property {Number} border-radius-indicator [2px] - The border radius used for stepper indicator. Can be a fraction between 0 and 1, pixels, or percent. +/// @property {Number} border-radius-step-header [2px] - The border radius used for stepper step-header. Can be a fraction between 0 and 1, pixels, or percent. +$fluent-shape-stepper: ( border-radius-indicator: 2px, border-radius-step-header: 2px ); /// @type Map -$_bootstrap-shape-stepper: ( +/// @property {Number} border-radius-indicator [2px] - The border radius used for stepper indicator. Can be a fraction between 0 and 1, pixels, or percent. +/// @property {Number} border-radius-step-header [2px] - The border radius used for stepper step-header. Can be a fraction between 0 and 1, pixels, or percent. +$bootstrap-shape-stepper: ( border-radius-indicator: 2px, border-radius-step-header: 2px ); /// @type Map -$_indigo-shape-stepper: extend($_default-shape-stepper); +/// @requires {function} extend +/// @requires {Map} $default-shape-stepper +$indigo-shape-stepper: extend($default-shape-stepper); diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/shape/_switch.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/shape/_switch.scss index a156d8d8360..cb49f5b78cd 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/shape/_switch.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/shape/_switch.scss @@ -8,7 +8,7 @@ /// @property {Number} border-radius-track [1] - The border radius used for switch track. Can be a fraction between 0 and 1, pixels, or percent. /// @property {Number} border-radius-thumb [1] - The border radius used for switch thumb. Can be a fraction between 0 and 1, pixels, or percent. /// @property {Number} border-radius-ripple [1] - The border radius used for switch ripple. Can be a fraction between 0 and 1, pixels, or percent. -$_default-shape-switch: ( +$default-shape-switch: ( border-radius-track: 1, border-radius-thumb: 1, border-radius-ripple: 1 @@ -18,7 +18,7 @@ $_default-shape-switch: ( /// @property {Number} border-radius-track [1] - The border radius used for switch track. Can be a fraction between 0 and 1, pixels, or percent. /// @property {Number} border-radius-thumb [1] - The border radius used for switch thumb. Can be a fraction between 0 and 1, pixels, or percent. /// @property {Number} border-radius-ripple [1] - The border radius used for switch ripple. Can be a fraction between 0 and 1, pixels, or percent. -$_round-shape-switch: ( +$round-shape-switch: ( border-radius-track: 1, border-radius-thumb: 1, border-radius-ripple: 1 @@ -28,7 +28,7 @@ $_round-shape-switch: ( /// @property {Number} border-radius-track [0] - The border radius used for switch track. Can be a fraction between 0 and 1, pixels, or percent. /// @property {Number} border-radius-thumb [0] - The border radius used for switch thumb. Can be a fraction between 0 and 1, pixels, or percent. /// @property {Number} border-radius-ripple [0] - The border radius used for switch ripple. Can be a fraction between 0 and 1, pixels, or percent. -$_square-shape-switch: ( +$square-shape-switch: ( border-radius-track: 0, border-radius-thumb: 0, border-radius-ripple: 0 @@ -36,14 +36,14 @@ $_square-shape-switch: ( /// @type Map /// @property {Number} border-radius-track [10px] - The border radius used for switch track. Can be a fraction between 0 and 1, pixels, or percent. -$_fluent-shape-switch: ( +$fluent-shape-switch: ( border-radius-track: 10px, ); /// @type Map /// @property {Number} border-radius-track [4px] - The border radius used for switch track. Can be a fraction between 0 and 1, pixels, or percent. /// @property {Number} border-radius-thumb [2px] - The border radius used for switch thumb. Can be a fraction between 0 and 1, pixels, or percent. -$_bootstrap-shape-switch: ( +$bootstrap-shape-switch: ( border-radius-track: 4px, border-radius-thumb: 2px, ); @@ -51,7 +51,7 @@ $_bootstrap-shape-switch: ( /// @type Map /// @property {Number} border-radius-track [8px] - The border radius used for switch track. Can be a fraction between 0 and 1, pixels, or percent. /// @property {Number} border-radius-thumb [1] - The border radius used for switch thumb. Can be a fraction between 0 and 1, pixels, or percent. -$_indigo-shape-switch: ( +$indigo-shape-switch: ( border-radius-track: 8px, border-radius-thumb: 1 ); diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/shape/_tabs.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/shape/_tabs.scss index 09a6b33ae19..a28820596fb 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/shape/_tabs.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/shape/_tabs.scss @@ -6,19 +6,19 @@ /// @type Map /// @property {Number} border-radius [0] - The border radius used for tabs. Can be a fraction between 0 and 1, pixels, or percent. -$_default-shape-tabs: ( +$default-shape-tabs: ( border-radius: 0 ); /// @type Map /// @property {Number} border-radius [1] - The border radius used for tabs. Can be a fraction between 0 and 1, pixels, or percent. -$_round-shape-tabs: ( +$round-shape-tabs: ( border-radius: 1 ); /// @type Map /// @property {Number} border-radius [0] - The border radius used for tabs. Can be a fraction between 0 and 1, pixels, or percent. -$_square-shape-tabs: ( +$square-shape-tabs: ( border-radius: 0 ); @@ -26,10 +26,10 @@ $_square-shape-tabs: ( /// @property {Number} border-radius [0] - The border radius used for tabs. Can be a fraction between 0 and 1, pixels, or percent. /// @requires {function} extend /// @requires {Map} $_square-shape-tabs -$_fluent-shape-tabs: extend($_square-shape-tabs); +$fluent-shape-tabs: $square-shape-tabs; /// @type Map /// @property {Number} border-radius [4px] - The border radius used for tabs. Can be a fraction between 0 and 1, pixels, or percent. -$_bootstrap-shape-tabs: ( +$bootstrap-shape-tabs: ( border-radius: 4px ); diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/shape/_time-picker.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/shape/_time-picker.scss index 4043af97efe..d1dab94a780 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/shape/_time-picker.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/shape/_time-picker.scss @@ -7,7 +7,7 @@ /// @type Map /// @prop {Number} border-radius [.2] - The border radius used for the overall shape of the time-picker. Can be a fraction between 0 and 1, pixels, or percent. /// @prop {Number} active-item-border-radius [.75] - The border radius used for the highlight of the active item in the time-picker. Can be a fraction between 0 and 1, pixels, or percent. -$_default-shape-time-picker: ( +$default-shape-time-picker: ( border-radius: .2, active-item-border-radius: .75, ); @@ -15,7 +15,7 @@ $_default-shape-time-picker: ( /// @type Map /// @prop {Number} border-radius [1] - The border radius used for the overall shape of the time-picker. Can be a fraction between 0 and 1, pixels, or percent. /// @prop {Number} active-item-border-radius [1] - The border radius used for the highlight of the active item in the time-picker. Can be a fraction between 0 and 1, pixels, or percent. -$_round-shape-time-picker: ( +$round-shape-time-picker: ( border-radius: 1, active-item-border-radius: 1, ); @@ -23,7 +23,7 @@ $_round-shape-time-picker: ( /// @type Map /// @prop {Number} border-radius [0] - The border radius used for the overall shape of the time-picker. Can be a fraction between 0 and 1, pixels, or percent. /// @prop {Number} active-item-border-radius [0] - The border radius used for the highlight of the active item in the time-picker. Can be a fraction between 0 and 1, pixels, or percent. -$_square-shape-time-picker: ( +$square-shape-time-picker: ( border-radius: 0, active-item-border-radius: 0, ); @@ -31,7 +31,7 @@ $_square-shape-time-picker: ( /// @type Map /// @prop {Number} border-radius [2px] - The border radius used for the overall shape of the time-picker. Can be a fraction between 0 and 1, pixels, or percent. /// @prop {Number} active-item-border-radius [2px] - The border radius used for the highlight of the active item in the time-picker. Can be a fraction between 0 and 1, pixels, or percent. -$_fluent-shape-time-picker: ( +$fluent-shape-time-picker: ( border-radius: 2px, active-item-border-radius: 2px, ); @@ -39,7 +39,7 @@ $_fluent-shape-time-picker: ( /// @type Map /// @prop {Number} border-radius [4px] - The border radius used for the overall shape of the time-picker. Can be a fraction between 0 and 1, pixels, or percent. /// @prop {Number} active-item-border-radius [4px] - The border radius used for the highlight of the active item in the time-picker. Can be a fraction between 0 and 1, pixels, or percent. -$_bootstrap-shape-time-picker: ( +$bootstrap-shape-time-picker: ( border-radius: 4px, active-item-border-radius: 4px, ); @@ -47,7 +47,7 @@ $_bootstrap-shape-time-picker: ( /// @type Map /// @prop {Number} border-radius [3px] - The border radius used for the overall shape of the time-picker. Can be a fraction between 0 and 1, pixels, or percent. /// @prop {Number} active-item-border-radius [20px] - The border radius used for the highlight of the active item in the time-picker. Can be a fraction between 0 and 1, pixels, or percent. -$_indigo-shape-time-picker: ( +$indigo-shape-time-picker: ( border-radius: 3px, active-item-border-radius: 20px ); diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/shape/_toast.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/shape/_toast.scss index 5e26c64218e..b6b7f0eb8fd 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/shape/_toast.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/shape/_toast.scss @@ -6,37 +6,37 @@ /// @type Map /// @prop {Number} border-radius [1] - The border radius used for toast. Can be a fraction between 0 and 1, pixels, or percent. -$_default-shape-toast: ( +$default-shape-toast: ( border-radius: 1, ); /// @type Map /// @prop {Number} border-radius [1] - The border radius used for toast. Can be a fraction between 0 and 1, pixels, or percent. -$_round-shape-toast: ( +$round-shape-toast: ( border-radius: 1, ); /// @type Map /// @prop {Number} border-radius [0] - The border radius used for toast. Can be a fraction between 0 and 1, pixels, or percent. -$_square-shape-toast: ( +$square-shape-toast: ( border-radius: 0, ); /// @type Map /// @prop {Number} border-radius [2px] - The border radius used for toast. Can be a fraction between 0 and 1, pixels, or percent. -$_fluent-shape-toast: ( +$fluent-shape-toast: ( border-radius: 2px ); /// @type Map /// @prop {Number} border-radius [4px] - The border radius used for toast. Can be a fraction between 0 and 1, pixels, or percent. -$_bootstrap-shape-toast: ( +$bootstrap-shape-toast: ( border-radius: 4px ); /// @type Map /// @prop {Number} border-radius [24px] - The border radius used for toast. Can be a fraction between 0 and 1, pixels, or percent. -$_indigo-shape-toast: ( +$indigo-shape-toast: ( border-radius: 24px ); diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/shape/_tooltip.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/shape/_tooltip.scss index e968377f7dc..e813da741b8 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/shape/_tooltip.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/shape/_tooltip.scss @@ -6,37 +6,37 @@ /// @type Map /// @prop {Number} border-radius [.25] - The border radius used for tooltip. Can be a fraction between 0 and 1, pixels, or percent. -$_default-shape-tooltip: ( +$default-shape-tooltip: ( border-radius: .25, ); /// @type Map /// @prop {Number} border-radius [1] - The border radius used for tooltip. Can be a fraction between 0 and 1, pixels, or percent. -$_round-shape-tooltip: ( +$round-shape-tooltip: ( border-radius: 1, ); /// @type Map /// @prop {Number} border-radius [0] - The border radius used for tooltip. Can be a fraction between 0 and 1, pixels, or percent. -$_square-shape-tooltip: ( +$square-shape-tooltip: ( border-radius: 0, ); /// @type Map /// @prop {Number} border-radius [2px] - The border radius used for tooltip. Can be a fraction between 0 and 1, pixels, or percent. -$_fluent-shape-tooltip: ( +$fluent-shape-tooltip: ( border-radius: 2px, ); /// @type Map /// @prop {Number} border-radius [4px] - The border radius used for tooltip. Can be a fraction between 0 and 1, pixels, or percent. -$_bootstrap-shape-tooltip: ( +$bootstrap-shape-tooltip: ( border-radius: 4px, ); /// @type Map /// @prop {Number} border-radius [3px] - The border radius used for tooltip. Can be a fraction between 0 and 1, pixels, or percent. -$_indigo-shape-tooltip: ( +$indigo-shape-tooltip: ( border-radius: 3px ); diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/shape/_watermark.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/shape/_watermark.scss index ac44b1c62e2..0f0bb214f52 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/shape/_watermark.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/shape/_watermark.scss @@ -6,13 +6,13 @@ /// @type Map /// @prop {Number} border-radius [1] - The border radius used for watermark. Can be a fraction between 0 and 1, pixels, or percent. -$_round-shape-watermark: ( +$round-shape-watermark: ( border-radius: 1, ); /// @type Map /// @prop {Number} border-radius [0] - The border radius used for watermark. Can be a fraction between 0 and 1, pixels, or percent. -$_square-shape-watermark: ( +$square-shape-watermark: ( border-radius: 0, ); @@ -20,17 +20,17 @@ $_square-shape-watermark: ( /// @prop {Number} border-radius [0] - The border radius used for watermark. Can be a fraction between 0 and 1, pixels, or percent. /// @requires {function} extend /// @requires {Map} $_square-shape-watermark -$_material-shape-watermark: extend($_square-shape-watermark); +$material-shape-watermark: $square-shape-watermark; /// @type Map /// @prop {Number} border-radius [2px] - The border radius used for watermark. Can be a fraction between 0 and 1, pixels, or percent. -$_fluent-shape-watermark: ( +$fluent-shape-watermark: ( border-radius: 2px, ); /// @type Map /// @prop {Number} border-radius [4px] - The border radius used for watermark. Can be a fraction between 0 and 1, pixels, or percent. -$_bootstrap-shape-watermark: ( +$bootstrap-shape-watermark: ( border-radius: 4px, ); @@ -38,5 +38,5 @@ $_bootstrap-shape-watermark: ( /// @prop {Number} border-radius [1] - The border radius used for watermark. Can be a fraction between 0 and 1, pixels, or percent. /// @requires {function} extend /// @requires {Map} $_round-shape-watermark -$_indigo-shape-watermark: extend($_round-shape-watermark); +$indigo-shape-watermark: $round-shape-watermark; diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/square-light/_index.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/square-light/_index.scss index 4cf4a46debf..a27113f6963 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/square-light/_index.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/square-light/_index.scss @@ -4,120 +4,151 @@ /// @author Simeon Simeonoff //// -@import '../light/action-strip'; -@import '../light/avatar'; -@import '../light/badge'; -@import '../light/banner'; -@import '../light/bottom-nav'; -@import '../light/button'; -@import '../light/button-group'; -@import '../light/calendar'; -@import '../light/card'; -@import '../light/carousel'; -@import '../light/checkbox'; -@import '../light/chip'; -@import '../light/column-actions'; -@import '../light/combo'; -@import '../light/dialog'; -@import '../light/divider'; -@import '../light/drop-down'; -@import '../light/expansion-panel'; -@import '../light/grid'; -@import '../light/grid-filtering'; -@import '../light/pagination'; -@import '../light/grid-summary'; -@import '../light/grid-toolbar'; -@import '../light/highlight'; -@import '../light/icon'; -@import '../light/input-group'; -@import '../light/list'; -@import '../light/navbar'; -@import '../light/navdrawer'; -@import '../light/overlay'; -@import '../light/progress'; -@import '../light/radio'; -@import '../light/ripple'; -@import '../light/slider'; -@import '../light/snackbar'; -@import '../light/switch'; -@import '../light/stepper'; -@import '../light/tabs'; -@import '../light/time-picker'; -@import '../light/toast'; -@import '../light/tooltip'; +@use '../../../base' as *; +@use '../light/action-strip' as *; +@use '../shape/action-strip' as *; +@use '../light/avatar' as *; +@use '../shape/avatar' as *; +@use '../light/badge' as *; +@use '../shape/badge' as *; +@use '../light/banner' as *; +@use '../light/bottom-nav' as *; +@use '../light/button' as *; +@use '../shape/button' as *; +@use '../light/button-group' as *; +@use '../shape/button-group' as *; +@use '../light/calendar' as *; +@use '../shape/calendar' as *; +@use '../light/card' as *; +@use '../shape/card' as *; +@use '../light/carousel' as *; +@use '../shape/carousel' as *; +@use '../light/checkbox' as *; +@use '../shape/checkbox' as *; +@use '../light/chip' as *; +@use '../shape/chip' as *; +@use '../light/column-actions' as *; +@use '../light/combo' as *; +@use '../light/dialog' as *; +@use '../shape/dialog' as *; +@use '../light/divider' as *; +@use '../light/drop-down' as *; +@use '../shape/drop-down' as *; +@use '../light/expansion-panel' as *; +@use '../shape/expansion-panel' as *; +@use '../light/grid' as *; +@use '../shape/grid' as *; +@use '../light/grid-filtering' as *; +@use '../light/pagination' as *; +@use '../light/grid-summary' as *; +@use '../light/grid-toolbar' as *; +@use '../light/highlight' as *; +@use '../light/icon' as *; +@use '../light/input-group' as *; +@use '../shape/input-group' as *; +@use '../light/list' as *; +@use '../shape/list' as *; +@use '../light/navbar' as *; +@use '../light/navdrawer' as *; +@use '../shape/navdrawer' as *; +@use '../light/overlay' as *; +@use '../light/progress' as *; +@use '../shape/progress' as *; +@use '../light/radio' as *; +@use '../light/ripple' as *; +@use '../light/slider' as *; +@use '../light/snackbar' as *; +@use '../shape/snackbar' as *; +@use '../light/switch' as *; +@use '../shape/switch' as *; + +@use '../light/stepper' as *; +@use '../shape/stepper' as *; + +@use '../light/tabs' as *; +@use '../shape/tabs' as *; + +@use '../light/time-picker' as *; +@use '../shape/time-picker' as *; + +@use '../light/toast' as *; +@use '../shape/toast' as *; + +@use '../light/tooltip' as *; +@use '../shape/tooltip' as *; /// Used to create square Material Design themes. /// Use with light palettes. /// @type {Map} -/// @property {Map} igx-action-strip [$_light-action-strip] -/// @property {Map} igx-avatar [$_light-avatar] -/// @property {Map} igx-badge [$_light-badge] -/// @property {Map} igx-banner [$_light-banner] -/// @property {Map} igx-bottom-nav [$_light-bottom-nav] -/// @property {Map} igx-button [$_light-button] -/// @property {Map} igx-button-group [$_light-button-group] -/// @property {Map} igx-calendar [$_light-calendar] -/// @property {Map} igx-card [$_light-card] -/// @property {Map} igx-carousel [$_light-carousel] -/// @property {Map} igx-checkbox [$_light-checkbox] -/// @property {Map} igx-chip [$_light-chip] -/// @property {Map} igx-column-actions [$_light-column-actions] -/// @property {Map} igx-combo [$_light-combo] -/// @property {Map} igx-dialog [$_light-dialog] -/// @property {Map} igx-divider [$_light-divider] -/// @property {Map} igx-drop-down [$_light-drop-down] -/// @property {Map} igx-expansion-panel [$_light-expansion-panel] -/// @property {Map} igx-grid [$_light-grid] -/// @property {Map} igx-grid-filtering [$_light-grid-filtering] -/// @property {Map} igx-paginator [$_light-pagination] -/// @property {Map} igx-grid-summary [$_light-grid-summary] -/// @property {Map} igx-grid-toolbar [$_light-grid-toolbar] -/// @property {Map} igx-highlight [$_light-highlight] -/// @property {Map} igx-icon [$_light-icon] -/// @property {Map} igx-input-group [$_light-input-group] -/// @property {Map} igx-list [$_light-list] -/// @property {Map} igx-navbar [$_light-navbar] -/// @property {Map} igx-navdrawer [$_light-navdrawer] -/// @property {Map} igx-overlay [$_light-overlay] -/// @property {Map} igx-progress-linear [$_light-progress-linear] -/// @property {Map} igx-progress-circular [$_light-progress-circular] -/// @property {Map} igx-radio [$_light-radio] -/// @property {Map} igx-ripple [$_light-ripple] -/// @property {Map} igx-slider [$_light-slider] -/// @property {Map} igx-snackbar [$_light-snackbar] -/// @property {Map} igx-switch [$_light-switch] -/// @property {Map} igx-stepper [$_light-stepper] -/// @property {Map} igx-tabs [$_light-tabs] -/// @property {Map} igx-time-picker [$_light-time-picker] -/// @property {Map} igx-toast [$_light-toast] -/// @property {Map} igx-tooltip [$_light-tooltip] +/// @property {Map} igx-action-strip [$light-action-strip] +/// @property {Map} igx-avatar [$light-avatar] +/// @property {Map} igx-badge [$light-badge] +/// @property {Map} igx-banner [$light-banner] +/// @property {Map} igx-bottom-nav [$light-bottom-nav] +/// @property {Map} igx-button [$light-button] +/// @property {Map} igx-button-group [$light-button-group] +/// @property {Map} igx-calendar [$light-calendar] +/// @property {Map} igx-card [$light-card] +/// @property {Map} igx-carousel [$light-carousel] +/// @property {Map} igx-checkbox [$light-checkbox] +/// @property {Map} igx-chip [$light-chip] +/// @property {Map} igx-column-actions [$ight-column-actions] +/// @property {Map} igx-combo [$light-combo] +/// @property {Map} igx-dialog [$light-dialog] +/// @property {Map} igx-divider [$light-divider] +/// @property {Map} igx-drop-down [$light-drop-down] +/// @property {Map} igx-expansion-panel [$light-expansion-panel] +/// @property {Map} igx-grid [$light-grid] +/// @property {Map} igx-grid-filtering [$light-grid-filtering] +/// @property {Map} igx-paginator [$light-pagination] +/// @property {Map} igx-grid-summary [$light-grid-summary] +/// @property {Map} igx-grid-toolbar [$light-grid-toolbar] +/// @property {Map} igx-highlight [$light-highlight] +/// @property {Map} igx-icon [$light-icon] +/// @property {Map} igx-input-group [$light-input-group] +/// @property {Map} igx-list [$light-list] +/// @property {Map} igx-navbar [$light-navbar] +/// @property {Map} igx-navdrawer [$light-navdrawer] +/// @property {Map} igx-overlay [$light-overlay] +/// @property {Map} igx-progress-linear [$light-progress-linear] +/// @property {Map} igx-progress-circular [$light-progress-circular] +/// @property {Map} igx-radio [$light-radio] +/// @property {Map} igx-ripple [$light-ripple] +/// @property {Map} igx-slider [$light-slider] +/// @property {Map} igx-snackbar [$light-snackbar] +/// @property {Map} igx-switch [$light-switch] +/// @property {Map} igx-stepper [$light-stepper] +/// @property {Map} igx-tabs [$light-tabs] +/// @property {Map} igx-time-picker [$light-time-picker] +/// @property {Map} igx-toast [$light-toast] +/// @property {Map} igx-tooltip [$ight-tooltip] $light-square-schema: ( - igx-action-strip: extend($_light-action-strip, $_square-shape-action-strip), - igx-avatar: extend($_light-avatar, $_square-shape-avatar), - igx-badge: extend($_light-badge, $_square-shape-badge), - igx-button: extend($_light-button, $_square-shape-button), - igx-button-group: extend($_light-button-group, $_square-shape-button-group), - igx-calendar: extend($_light-calendar, $_square-shape-calendar), - igx-card: extend($_light-card, $_square-shape-card), - igx-carousel: extend($_light-carousel, $_square-shape-carousel), - igx-checkbox: extend($_light-checkbox, $_square-shape-checkbox), - igx-chip: extend($_light-chip, $_square-shape-chip), - igx-dialog: extend($_light-dialog, $_square-shape-dialog), - igx-drop-down: extend($_light-drop-down, $_square-shape-drop-down), - igx-expansion-panel: extend($_light-expansion-panel, $_square-shape-expansion-panel), - igx-grid: extend($_light-grid, $_square-shape-grid), - igx-highlight: $_light-highlight, - igx-input-group: extend($_light-input-group, $_square-shape-input-group), - igx-list: extend($_light-list, $_square-shape-list), - igx-navdrawer: extend($_light-navdrawer, $_square-shape-navdrawer), - igx-linear-bar: extend($_light-progress-linear, $_default-shape-progress), - igx-circular-bar: extend($_light-progress-circular, $_default-shape-progress), - igx-snackbar: extend($_light-snackbar, $_square-shape-snackbar), - igx-switch: extend($_light-switch, $_square-shape-switch), - igx-stepper: extend($_light-stepper, $_square-shape-stepper), - igx-tabs: extend($_light-tabs, $_square-shape-tabs), - igx-time-picker: extend($_light-time-picker, $_square-shape-time-picker), - igx-toast: extend($_light-toast, $_square-shape-toast), - igx-tooltip: extend($_light-tooltip, $_square-shape-tooltip) + igx-action-strip: extend($light-action-strip, $square-shape-action-strip), + igx-avatar: extend($light-avatar, $square-shape-avatar), + igx-badge: extend($light-badge, $square-shape-badge), + igx-button: extend($light-button, $square-shape-button), + igx-button-group: extend($light-button-group, $square-shape-button-group), + igx-calendar: extend($light-calendar, $square-shape-calendar), + igx-card: extend($light-card, $square-shape-card), + igx-carousel: extend($light-carousel, $square-shape-carousel), + igx-checkbox: extend($light-checkbox, $square-shape-checkbox), + igx-chip: extend($light-chip, $square-shape-chip), + igx-dialog: extend($light-dialog, $square-shape-dialog), + igx-drop-down: extend($light-drop-down, $square-shape-drop-down), + igx-expansion-panel: extend($light-expansion-panel, $square-shape-expansion-panel), + igx-grid: extend($light-grid, $square-shape-grid), + igx-highlight: $light-highlight, + igx-input-group: extend($light-input-group, $square-shape-input-group), + igx-list: extend($light-list, $square-shape-list), + igx-navdrawer: extend($light-navdrawer, $square-shape-navdrawer), + igx-linear-bar: extend($light-progress-linear, $default-shape-progress), + igx-circular-bar: extend($light-progress-circular, $default-shape-progress), + igx-snackbar: extend($light-snackbar, $square-shape-snackbar), + igx-switch: extend($light-switch, $square-shape-switch), + igx-stepper: extend($light-stepper, $square-shape-stepper), + igx-tabs: extend($light-tabs, $square-shape-tabs), + igx-time-picker: extend($light-time-picker, $square-shape-time-picker), + igx-toast: extend($light-toast, $square-shape-toast), + igx-tooltip: extend($light-tooltip, $square-shape-tooltip) ); diff --git a/projects/igniteui-angular/src/lib/core/styles/typography/_base.scss b/projects/igniteui-angular/src/lib/core/styles/typography/_base.scss index 703ddc32822..c6120b67f8a 100644 --- a/projects/igniteui-angular/src/lib/core/styles/typography/_base.scss +++ b/projects/igniteui-angular/src/lib/core/styles/typography/_base.scss @@ -1,3 +1,6 @@ +@use 'sass:map'; +@use '../base' as *; + //// /// @group typography /// @access public @@ -207,20 +210,20 @@ ); @return ( - h1: extend(map-get($default-scale, 'h1'), $h1), - h2: extend(map-get($default-scale, 'h2'), $h2), - h3: extend(map-get($default-scale, 'h3'), $h3), - h4: extend(map-get($default-scale, 'h4'), $h4), - h5: extend(map-get($default-scale, 'h5'), $h5), - h6: extend(map-get($default-scale, 'h6'), $h6), - subtitle-1: extend(map-get($default-scale, 'subtitle-1'), $subtitle-1), - subtitle-2: extend(map-get($default-scale, 'subtitle-2'), $subtitle-2), - body-1: extend(map-get($default-scale, 'body-1'), $body-1), - body-2: extend(map-get($default-scale, 'body-2'), $body-2), - button: extend(map-get($default-scale, 'button'), $button), - caption: extend(map-get($default-scale, 'caption'), $caption), - overline: extend(map-get($default-scale, 'overline'), $overline), - _meta: extend(map-get($default-scale, '_meta'), $_meta) + h1: extend(map.get($default-scale, 'h1'), $h1), + h2: extend(map.get($default-scale, 'h2'), $h2), + h3: extend(map.get($default-scale, 'h3'), $h3), + h4: extend(map.get($default-scale, 'h4'), $h4), + h5: extend(map.get($default-scale, 'h5'), $h5), + h6: extend(map.get($default-scale, 'h6'), $h6), + subtitle-1: extend(map.get($default-scale, 'subtitle-1'), $subtitle-1), + subtitle-2: extend(map.get($default-scale, 'subtitle-2'), $subtitle-2), + body-1: extend(map.get($default-scale, 'body-1'), $body-1), + body-2: extend(map.get($default-scale, 'body-2'), $body-2), + button: extend(map.get($default-scale, 'button'), $button), + caption: extend(map.get($default-scale, 'caption'), $caption), + overline: extend(map.get($default-scale, 'overline'), $overline), + _meta: extend(map.get($default-scale, '_meta'), $_meta) ); } @@ -231,7 +234,7 @@ /// $h1-type-scale: igx-type-scale-category($default-type-scale, 'h1'); /// @returns {Map} - The config map for the selected category in the type scale. @function igx-type-scale-category($scale, $category) { - @return map-get($scale, $category); + @return map.get($scale, $category); } /// Assigns type scale category config properties @@ -245,7 +248,7 @@ /// color: mediumvioletred; /// } @mixin igx-type-style($scale, $category) { - $type-category: map-get($scale, $category); + $type-category: map.get($scale, $category); @each $key, $value in $type-category { #{$key}: #{$value}; } @@ -260,16 +263,16 @@ /// $h1-style: igx-type-scale-category($type-scale, 'h1'); /// @include igx-font-var('h1-font', $h1-style); @mixin igx-font-var($name, $type-style, $prefix: null) { - $fs: map-get($type-style, 'font-style'); - $fz: map-get($type-style, 'font-size'); - $fw: map-get($type-style, 'font-weight'); - $lh: map-get($type-style, 'line-height'); + $fs: map.get($type-style, 'font-style'); + $fz: map.get($type-style, 'font-size'); + $fw: map.get($type-style, 'font-weight'); + $lh: map.get($type-style, 'line-height'); // unused for now - $tt: map-get($type-style, 'text-transform'); - $ls: map-get($type-style, 'letter-spacing'); - $mt: map-get($type-style, 'margin-top'); - $mb: map-get($type-style, 'margin-bottom'); + $tt: map.get($type-style, 'text-transform'); + $ls: map.get($type-style, 'letter-spacing'); + $mt: map.get($type-style, 'margin-top'); + $mb: map.get($type-style, 'margin-bottom'); @include igx-css-vars(( 'name': $prefix, diff --git a/projects/igniteui-angular/src/lib/core/styles/typography/_index.scss b/projects/igniteui-angular/src/lib/core/styles/typography/_index.scss index 24808744372..66fe412b0b9 100644 --- a/projects/igniteui-angular/src/lib/core/styles/typography/_index.scss +++ b/projects/igniteui-angular/src/lib/core/styles/typography/_index.scss @@ -1,4 +1,4 @@ -@import './base'; -@import './variables'; -@import './typography'; -@import './scale-presets/index'; +@forward 'base'; +@forward 'variables'; +@forward 'typography'; +@forward 'scale-presets'; diff --git a/projects/igniteui-angular/src/lib/core/styles/typography/_typography.scss b/projects/igniteui-angular/src/lib/core/styles/typography/_typography.scss index 3b5786574bb..690835d134f 100644 --- a/projects/igniteui-angular/src/lib/core/styles/typography/_typography.scss +++ b/projects/igniteui-angular/src/lib/core/styles/typography/_typography.scss @@ -1,3 +1,9 @@ +@use 'sass:map'; +@use 'sass:string'; +@use '../base' as *; +@use 'base' as *; +@use 'variables' as *; + //// /// @group typography /// @author Simeon Simeonoff @@ -5,51 +11,54 @@ // Import the typography mixins from component themes // with typography support. -@import '../components/bottom-nav/bottom-nav-theme'; -@import '../components/button/button-theme'; -@import '../components/calendar/calendar-theme'; -@import '../components/card/card-theme'; -@import '../components/charts/category-chart-theme'; -@import '../components/charts/data-chart-theme'; -@import '../components/charts/financial-chart-theme'; -@import '../components/charts/funnel-chart-theme'; -@import '../components/charts/gauge-theme'; -@import '../components/charts/graph-theme'; -@import '../components/charts/shape-chart-theme'; -@import '../components/checkbox/checkbox-theme'; -@import '../components/chip/chip-theme'; -@import '../components/column-actions/column-actions-theme'; -@import '../components/date-range-picker/date-range-picker-theme'; -@import '../components/dialog/dialog-theme'; -@import '../components/dock-manager/dock-manager-theme'; -@import '../components/drop-down/drop-down-theme'; -@import '../components/expansion-panel/expansion-panel-theme'; -@import '../components/grid/excel-filtering-theme'; -@import '../components/input/input-group-theme'; -@import '../components/list/list-theme'; -@import '../components/navbar/navbar-theme'; -@import '../components/navdrawer/navdrawer-theme'; -@import '../components/radio/radio-theme'; -@import '../components/slider/slider-theme'; -@import '../components/snackbar/snackbar-theme'; -@import '../components/switch/switch-theme'; -@import '../components/stepper/stepper-theme'; -@import '../components/tabs/tabs-theme'; -@import '../components/time-picker/time-picker-theme'; -@import '../components/toast/toast-theme'; -@import '../components/tooltip/tooltip-theme'; +@use '../components/banner/banner-theme' as *; +@use '../components/bottom-nav/bottom-nav-theme' as *; +@use '../components/button/button-theme' as *; +@use '../components/calendar/calendar-theme' as *; +@use '../components/card/card-theme' as *; +@use '../components/charts/category-chart-theme' as *; +@use '../components/charts/data-chart-theme' as *; +@use '../components/charts/financial-chart-theme' as *; +@use '../components/charts/funnel-chart-theme' as *; +@use '../components/charts/gauge-theme' as *; +@use '../components/charts/graph-theme' as *; +@use '../components/charts/shape-chart-theme' as *; +@use '../components/checkbox/checkbox-theme' as *; +@use '../components/chip/chip-theme' as *; +@use '../components/column-actions/column-actions-theme' as *; +@use '../components/date-range-picker/date-range-picker-theme' as *; +@use '../components/dialog/dialog-theme' as *; +@use '../components/dock-manager/dock-manager-theme' as *; +@use '../components/drop-down/drop-down-theme' as *; +@use '../components/expansion-panel/expansion-panel-theme' as *; +@use '../components/grid/excel-filtering-theme' as *; +@use '../components/input/input-group-theme' as *; +@use '../components/list/list-theme' as *; +@use '../components/navbar/navbar-theme' as *; +@use '../components/navdrawer/navdrawer-theme' as *; +@use '../components/radio/radio-theme' as *; +@use '../components/slider/slider-theme' as *; +@use '../components/snackbar/snackbar-theme' as *; +@use '../components/switch/switch-theme' as *; +@use '../components/stepper/stepper-theme' as *; +@use '../components/tabs/tabs-theme' as *; +@use '../components/time-picker/time-picker-theme' as *; +@use '../components/toast/toast-theme' as *; +@use '../components/tooltip/tooltip-theme' as *; +@use '../components/tree/tree-theme' as *; /// @access private @mixin _igx-typography-styles($font-family, $type-scale) { - $_variant: map-get(map-get($type-scale, '_meta'), 'variant'); + $_variant: map.get(map.get($type-scale, '_meta'), 'variant'); - font-family: unquote($font-family); + // TODO: Replace string.unquote with meta.inspect + font-family: string.unquote($font-family); font-size: $browser-context; line-height: $browser-line-height; font-size-adjust: 100%; // Call the individual component styles with the type scale - @include _excel-filtering-typography($type-scale); + @include excel-filtering-typography($type-scale); @include igx-banner-typography($type-scale); @include igx-bottom-nav-typography($type-scale); @include igx-button-typography($type-scale); @@ -90,7 +99,7 @@ } @if ($_variant == 'bootstrap') { - $calendar-labels: map-get($type-scale, 'calendar-labels'); + $calendar-labels: map.get($type-scale, 'calendar-labels'); @include igx-calendar-typography($type-scale, $categories: ( header-year: 'subtitle-1', @@ -180,7 +189,7 @@ @if $category != _meta { // Get the native element that uses typographic styles directly // as mapped in the $category-element-map - $e: map-get($category-element-map, $category); + $e: map.get($category-element-map, $category); // Create a placeholder selector with styles for each // typographic style to be able to easily extend it diff --git a/projects/igniteui-angular/src/lib/core/styles/typography/_variables.scss b/projects/igniteui-angular/src/lib/core/styles/typography/_variables.scss index 80e97e49cb2..49afdf5d54c 100644 --- a/projects/igniteui-angular/src/lib/core/styles/typography/_variables.scss +++ b/projects/igniteui-angular/src/lib/core/styles/typography/_variables.scss @@ -1,3 +1,5 @@ +@use 'base' as *; + //// /// @group typography /// @access public diff --git a/projects/igniteui-angular/src/lib/core/styles/typography/scale-presets/_bootstrap.scss b/projects/igniteui-angular/src/lib/core/styles/typography/scale-presets/_bootstrap.scss index 736eaa79e21..d856c0cf436 100644 --- a/projects/igniteui-angular/src/lib/core/styles/typography/scale-presets/_bootstrap.scss +++ b/projects/igniteui-angular/src/lib/core/styles/typography/scale-presets/_bootstrap.scss @@ -1,3 +1,6 @@ +@use '../base' as *; +@use '../../base' as *; + $bootstrap_h1: igx-type-style( $font-size: rem(40px), $font-weight: 500, diff --git a/projects/igniteui-angular/src/lib/core/styles/typography/scale-presets/_fluent.scss b/projects/igniteui-angular/src/lib/core/styles/typography/scale-presets/_fluent.scss index 2772e776788..7ba1476eb55 100644 --- a/projects/igniteui-angular/src/lib/core/styles/typography/scale-presets/_fluent.scss +++ b/projects/igniteui-angular/src/lib/core/styles/typography/scale-presets/_fluent.scss @@ -1,3 +1,6 @@ +@use '../base' as *; +@use '../../base' as *; + $fluent_h1: igx-type-style( $font-size: rem(68px), $font-weight: 700, diff --git a/projects/igniteui-angular/src/lib/core/styles/typography/scale-presets/_index.scss b/projects/igniteui-angular/src/lib/core/styles/typography/scale-presets/_index.scss index 388c753c422..7026806ad45 100644 --- a/projects/igniteui-angular/src/lib/core/styles/typography/scale-presets/_index.scss +++ b/projects/igniteui-angular/src/lib/core/styles/typography/scale-presets/_index.scss @@ -1,3 +1,3 @@ -@import './bootstrap'; -@import './fluent'; -@import './indigo'; +@forward 'bootstrap'; +@forward 'fluent'; +@forward 'indigo'; diff --git a/projects/igniteui-angular/src/lib/core/styles/typography/scale-presets/_indigo.scss b/projects/igniteui-angular/src/lib/core/styles/typography/scale-presets/_indigo.scss index aab2ffbb565..9cfc9f1db36 100644 --- a/projects/igniteui-angular/src/lib/core/styles/typography/scale-presets/_indigo.scss +++ b/projects/igniteui-angular/src/lib/core/styles/typography/scale-presets/_indigo.scss @@ -1,3 +1,6 @@ +@use '../base' as *; +@use '../../base' as *; + $indigo_h1: igx-type-style( $font-size: rem(96px), $font-weight: 200, diff --git a/projects/igniteui-angular/src/lib/core/utils.ts b/projects/igniteui-angular/src/lib/core/utils.ts index 8cb2880408b..5c9456056ed 100644 --- a/projects/igniteui-angular/src/lib/core/utils.ts +++ b/projects/igniteui-angular/src/lib/core/utils.ts @@ -1,8 +1,7 @@ import { AnimationReferenceMetadata } from '@angular/animations'; -import { isPlatformBrowser } from '@angular/common'; +import { CurrencyPipe, formatDate as _formatDate, isPlatformBrowser } from '@angular/common'; import { Inject, Injectable, PLATFORM_ID } from '@angular/core'; import mergeWith from 'lodash.mergewith'; -import { ResizeObserver as Polyfill } from '@juggle/resize-observer'; import { Observable } from 'rxjs'; import { blink, fadeIn, fadeOut, flipBottom, flipHorBck, flipHorFwd, flipLeft, flipRight, flipTop, @@ -41,11 +40,10 @@ export const showMessage = (message: string, isMessageShown: boolean): boolean = export const mkenum = (x: T) => x; /** - * Returns the ResizeObserver type or the polyfilled version if not available. * * @hidden @internal */ -export const getResizeObserver = () => window.ResizeObserver || Polyfill; +export const getResizeObserver = () => window.ResizeObserver; /** * @hidden @@ -205,18 +203,17 @@ export class PlatformUtil { public isIOS = this.isBrowser && /iPad|iPhone|iPod/.test(navigator.userAgent) && !('MSStream' in window); public isFirefox = this.isBrowser && /Firefox[\/\s](\d+\.\d+)/.test(navigator.userAgent); public isEdge = this.isBrowser && /Edge[\/\s](\d+\.\d+)/.test(navigator.userAgent); - public isIE = this.isBrowser && navigator.appVersion.indexOf('Trident/') > 0; public isChromium = this.isBrowser && (/Chrom|e?ium/g.test(navigator.userAgent) || - /Google Inc/g.test(navigator.vendor)) && !/Edge/g.test(navigator.userAgent); + /Google Inc/g.test(navigator.vendor)) && !/Edge/g.test(navigator.userAgent); public KEYMAP = mkenum({ ENTER: 'Enter', - SPACE: this.isIE ? 'Spacebar' : ' ', - ESCAPE: this.isIE ? 'Esc' : 'Escape', - ARROW_DOWN: this.isIE ? 'Down' : 'ArrowDown', - ARROW_UP: this.isIE ? 'Up' : 'ArrowUp', - ARROW_LEFT: this.isIE ? 'Left' : 'ArrowLeft', - ARROW_RIGHT: this.isIE ? 'Right' : 'ArrowRight', + SPACE: ' ', + ESCAPE: 'Escape', + ARROW_DOWN: 'ArrowDown', + ARROW_UP: 'ArrowUp', + ARROW_LEFT: 'ArrowLeft', + ARROW_RIGHT: 'ArrowRight', END: 'End', HOME: 'Home', PAGE_DOWN: 'PageDown', @@ -225,7 +222,7 @@ export class PlatformUtil { TAB: 'Tab', SEMICOLON: ';', // https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key/Key_Values#editing_keys - DELETE: this.isIE ? 'Del' : 'Delete', + DELETE: 'Delete', BACKSPACE: 'Backspace', CONTROL: 'Control', X: 'x', @@ -250,7 +247,7 @@ export class PlatformUtil { * and the function may instead remove the parent size while measuring to get the correct value. * ``` */ - public getNodeSizeViaRange(range: Range, node: HTMLElement, sizeHoldingNode?: HTMLElement) { + public getNodeSizeViaRange(range: Range, node: HTMLElement, sizeHoldingNode?: HTMLElement) { let overflow = null; let nodeStyles; @@ -262,7 +259,7 @@ export class PlatformUtil { if (sizeHoldingNode) { const style = sizeHoldingNode.style; - nodeStyles = [ style.width, style.minWidth, style.flexBasis ]; + nodeStyles = [style.width, style.minWidth, style.flexBasis]; style.width = ''; style.minWidth = ''; style.flexBasis = ''; @@ -751,3 +748,17 @@ const verticalAnimations: AnimationReferenceMetadata[] = [ swingInBottomBck, swingOutBottomBck, ]; + + +/** + * Similar to Angular's formatDate. However it will not throw on `undefined | null` instead + * coalescing to an empty string. + */ +export const formatDate = (value: string | number | Date, format: string, locale: string, timezone?: string): string => { + if (value === null || value === undefined) { + return ''; + } + return _formatDate(value, format, locale, timezone); +}; + +export const formatCurrency = new CurrencyPipe(undefined).transform; diff --git a/projects/igniteui-angular/src/lib/data-operations/data-util.spec.ts b/projects/igniteui-angular/src/lib/data-operations/data-util.spec.ts index 0383bec4257..7055e06c7c9 100644 --- a/projects/igniteui-angular/src/lib/data-operations/data-util.spec.ts +++ b/projects/igniteui-angular/src/lib/data-operations/data-util.spec.ts @@ -1,9 +1,8 @@ import { waitForAsync } from '@angular/core/testing'; import { DataGenerator } from './test-util/data-generator'; -import { DefaultSortingStrategy } from './sorting-strategy'; +import { DefaultSortingStrategy, ISortingExpression, SortingDirection } from './sorting-strategy'; import { cloneArray } from '../core/utils'; -import { ISortingExpression, SortingDirection } from './sorting-expression.interface'; import { DataUtil } from './data-util'; import { IGroupByResult } from './grouping-result.interface'; import { IGroupingState } from './groupby-state.interface'; diff --git a/projects/igniteui-angular/src/lib/data-operations/data-util.ts b/projects/igniteui-angular/src/lib/data-operations/data-util.ts index e199c4881ba..4d62ff15e0f 100644 --- a/projects/igniteui-angular/src/lib/data-operations/data-util.ts +++ b/projects/igniteui-angular/src/lib/data-operations/data-util.ts @@ -1,7 +1,5 @@ import { IFilteringState } from './filtering-state.interface'; -import { IgxSorting, IgxDataRecordSorting, IGridSortingStrategy } from './sorting-strategy'; -import { IgxGrouping } from './grouping-strategy'; import { IGroupByResult } from './grouping-result.interface'; import { IPagingState, PagingError } from './paging-state.interface'; @@ -9,14 +7,20 @@ import { IPagingState, PagingError } from './paging-state.interface'; import { IGroupByKey } from './groupby-expand-state.interface'; import { IGroupByRecord } from './groupby-record.interface'; import { IGroupingState } from './groupby-state.interface'; -import { ISortingExpression } from './sorting-expression.interface'; import { FilteringStrategy } from './filtering-strategy'; -import { IGridGroupingStrategy } from './grouping-strategy'; -import { ITreeGridRecord } from '../grids/tree-grid/public_api'; import { cloneValue, mergeObjects, mkenum } from '../core/utils'; import { Transaction, TransactionType, HierarchicalTransaction } from '../services/transaction/transaction'; import { getHierarchy, isHierarchyMatch } from './operations'; import { GridType } from '../grids/common/grid.interface'; +import { ITreeGridRecord } from '../grids/tree-grid/tree-grid.interfaces'; +import { ISortingExpression } from './sorting-strategy'; +import { + IGridSortingStrategy, + IGridGroupingStrategy, + IgxDataRecordSorting, + IgxSorting, + IgxGrouping +} from '../grids/common/strategy'; /** * @hidden diff --git a/projects/igniteui-angular/src/lib/data-operations/filtering-expressions-tree.ts b/projects/igniteui-angular/src/lib/data-operations/filtering-expressions-tree.ts index b2c7458f605..3b14b9c18ff 100644 --- a/projects/igniteui-angular/src/lib/data-operations/filtering-expressions-tree.ts +++ b/projects/igniteui-angular/src/lib/data-operations/filtering-expressions-tree.ts @@ -38,7 +38,7 @@ export class FilteringExpressionsTree implements IFilteringExpressionsTree { * * @memberof FilteringExpressionsTree */ - filteringOperands: (IFilteringExpressionsTree | IFilteringExpression)[] = []; + public filteringOperands: (IFilteringExpressionsTree | IFilteringExpression)[] = []; /** * Sets/gets the operator. @@ -51,7 +51,7 @@ export class FilteringExpressionsTree implements IFilteringExpressionsTree { * * @memberof FilteringExpressionsTree */ - operator: FilteringLogic; + public operator: FilteringLogic; /** * Sets/gets the field name of the column where the filtering expression is placed. @@ -64,7 +64,7 @@ export class FilteringExpressionsTree implements IFilteringExpressionsTree { * * @memberof FilteringExpressionsTree */ - fieldName?: string; + public fieldName?: string; /** * Sets/gets the type of the filtering expressions tree. @@ -77,7 +77,7 @@ export class FilteringExpressionsTree implements IFilteringExpressionsTree { * * @memberof FilteringExpressionsTree */ - type?: FilteringExpressionsTreeType; + public type?: FilteringExpressionsTreeType; constructor(operator: FilteringLogic, fieldName?: string) { this.operator = operator; diff --git a/projects/igniteui-angular/src/lib/data-operations/groupby-record.interface.ts b/projects/igniteui-angular/src/lib/data-operations/groupby-record.interface.ts index 9fc177044c4..ef09392ca3b 100644 --- a/projects/igniteui-angular/src/lib/data-operations/groupby-record.interface.ts +++ b/projects/igniteui-angular/src/lib/data-operations/groupby-record.interface.ts @@ -1,5 +1,5 @@ -import { ISortingExpression } from './sorting-expression.interface'; -import { IgxColumnComponent } from '../grids/columns/column.component'; +import { ColumnType } from '../grids/common/grid.interface'; +import { ISortingExpression } from './sorting-strategy'; /** * @hidden @@ -14,5 +14,5 @@ export interface IGroupByRecord { groupParent: IGroupByRecord; groups?: IGroupByRecord[]; height: number; - column?: IgxColumnComponent; + column?: ColumnType; } diff --git a/projects/igniteui-angular/src/lib/data-operations/groupby-strategy.spec.ts b/projects/igniteui-angular/src/lib/data-operations/groupby-strategy.spec.ts index f52d3fc3096..79ca6b74bb5 100644 --- a/projects/igniteui-angular/src/lib/data-operations/groupby-strategy.spec.ts +++ b/projects/igniteui-angular/src/lib/data-operations/groupby-strategy.spec.ts @@ -1,8 +1,7 @@ -import { DataGenerator } from './test-util/data-generator'; -import { DefaultSortingStrategy } from './sorting-strategy'; -import { SortingDirection } from './sorting-expression.interface'; +import { IgxGrouping } from '../grids/common/strategy'; import { IGroupByRecord } from './groupby-record.interface'; -import { IgxGrouping } from './grouping-strategy'; +import { DefaultSortingStrategy, SortingDirection } from './sorting-strategy'; +import { DataGenerator } from './test-util/data-generator'; describe('Unit testing GroupingStrategy', () => { let dataGenerator: DataGenerator; diff --git a/projects/igniteui-angular/src/lib/data-operations/grouping-expression.interface.ts b/projects/igniteui-angular/src/lib/data-operations/grouping-expression.interface.ts index e2463a81c46..f9150691043 100644 --- a/projects/igniteui-angular/src/lib/data-operations/grouping-expression.interface.ts +++ b/projects/igniteui-angular/src/lib/data-operations/grouping-expression.interface.ts @@ -1,4 +1,4 @@ -import { ISortingExpression } from './sorting-expression.interface'; +import { ISortingExpression } from './sorting-strategy'; export interface IGroupingExpression extends ISortingExpression { groupingComparer?: (a: any, b: any) => number; diff --git a/projects/igniteui-angular/src/lib/data-operations/grouping-strategy.ts b/projects/igniteui-angular/src/lib/data-operations/grouping-strategy.ts deleted file mode 100644 index be8fdfdeb81..00000000000 --- a/projects/igniteui-angular/src/lib/data-operations/grouping-strategy.ts +++ /dev/null @@ -1,22 +0,0 @@ -import { IGroupByRecord } from './groupby-record.interface'; -import { IgxSorting, IGridSortingStrategy } from './sorting-strategy'; -import { IGroupingState } from './groupby-state.interface'; -import { IGroupByResult } from './grouping-result.interface'; - - -export interface IGridGroupingStrategy extends IGridSortingStrategy { - groupBy(data: any[], state: IGroupingState, grid?: any, groupsRecords?: any[], fullResult?: IGroupByResult): IGroupByResult; -} - -export class IgxGrouping extends IgxSorting implements IGridGroupingStrategy { - public groupBy(data: any[], state: IGroupingState, grid?: any, - groupsRecords?: any[], fullResult: IGroupByResult = { data: [], metadata: [] }): IGroupByResult { - const metadata: IGroupByRecord[] = []; - const grouping = this.groupDataRecursive(data, state, 0, null, metadata, grid, groupsRecords, fullResult); - return { - data: grouping, - metadata - }; - } -} - diff --git a/projects/igniteui-angular/src/lib/data-operations/sorting-expression.interface.ts b/projects/igniteui-angular/src/lib/data-operations/sorting-expression.interface.ts deleted file mode 100644 index b9de019dc50..00000000000 --- a/projects/igniteui-angular/src/lib/data-operations/sorting-expression.interface.ts +++ /dev/null @@ -1,18 +0,0 @@ -import { ISortingStrategy } from './sorting-strategy'; -import { IBaseEventArgs } from '../core/utils'; - -/** - * Represents sorting expressions. - */ -export enum SortingDirection { - None = 0, - Asc = 1, - Desc = 2 -} - -export interface ISortingExpression extends IBaseEventArgs { - fieldName: string; - dir: SortingDirection; - ignoreCase?: boolean; - strategy?: ISortingStrategy; -} diff --git a/projects/igniteui-angular/src/lib/data-operations/sorting-strategy.spec.ts b/projects/igniteui-angular/src/lib/data-operations/sorting-strategy.spec.ts index d26d3d6aa61..152ec5abef3 100644 --- a/projects/igniteui-angular/src/lib/data-operations/sorting-strategy.spec.ts +++ b/projects/igniteui-angular/src/lib/data-operations/sorting-strategy.spec.ts @@ -1,6 +1,6 @@ import { DataGenerator } from './test-util/data-generator'; -import { IgxSorting, DefaultSortingStrategy } from './sorting-strategy'; -import { SortingDirection } from './sorting-expression.interface'; +import { DefaultSortingStrategy, SortingDirection } from './sorting-strategy'; +import { IgxSorting } from '../grids/common/strategy'; describe('Unit testing SortingStrategy', () => { let dataGenerator: DataGenerator; diff --git a/projects/igniteui-angular/src/lib/data-operations/sorting-strategy.ts b/projects/igniteui-angular/src/lib/data-operations/sorting-strategy.ts index 0b1ae67d280..8f938472ed3 100644 --- a/projects/igniteui-angular/src/lib/data-operations/sorting-strategy.ts +++ b/projects/igniteui-angular/src/lib/data-operations/sorting-strategy.ts @@ -1,49 +1,55 @@ -import { cloneArray, resolveNestedPath, parseDate } from '../core/utils'; -import { IGroupByRecord } from './groupby-record.interface'; -import { ISortingExpression, SortingDirection } from './sorting-expression.interface'; -import { IGroupingExpression } from './grouping-expression.interface'; -import { IGroupingState } from './groupby-state.interface'; -import { IGroupByExpandState } from './groupby-expand-state.interface'; -import { IGroupByResult } from './grouping-result.interface'; -import { getHierarchy, isHierarchyMatch } from './operations'; -import { GridType } from '../grids/common/grid.interface'; +import { IBaseEventArgs } from '../core/utils'; + +export enum SortingDirection { + None = 0, + Asc = 1, + Desc = 2 +} + +export interface ISortingExpression extends IBaseEventArgs { + fieldName: string; + dir: SortingDirection; + ignoreCase?: boolean; + strategy?: ISortingStrategy; +} -const DATE_TYPE = 'date'; -const TIME_TYPE = 'time'; -const DATE_TIME_TYPE = 'dateTime'; export interface ISortingStrategy { - sort: (data: any[], - fieldName: string, - dir: SortingDirection, - ignoreCase: boolean, - valueResolver: (obj: any, key: string, isDate?: boolean) => any, - isDate?: boolean, - isTime?: boolean) => any[]; + sort: ( + data: any[], + fieldName: string, + dir: SortingDirection, + ignoreCase: boolean, + valueResolver: (obj: any, key: string, isDate?: boolean) => any, + isDate?: boolean, + isTime?: boolean + ) => any[]; } export class DefaultSortingStrategy implements ISortingStrategy { private static _instance: DefaultSortingStrategy = null; - protected constructor() {} + protected constructor() { } public static instance(): DefaultSortingStrategy { return this._instance || (this._instance = new this()); } - public sort(data: any[], - fieldName: string, - dir: SortingDirection, - ignoreCase: boolean, - valueResolver: (obj: any, key: string, isDate?: boolean) => any, - isDate?: boolean, - isTime?: boolean) { + public sort( + data: any[], + fieldName: string, + dir: SortingDirection, + ignoreCase: boolean, + valueResolver: (obj: any, key: string, isDate?: boolean) => any, + isDate?: boolean, + isTime?: boolean + ) { const key = fieldName; const reverse = (dir === SortingDirection.Desc ? -1 : 1); - const cmpFunc = (obj1, obj2) => this.compareObjects(obj1, obj2, key, reverse, ignoreCase, valueResolver, isDate, isTime); + const cmpFunc = (obj1: any, obj2: any) => this.compareObjects(obj1, obj2, key, reverse, ignoreCase, valueResolver, isDate, isTime); return this.arraySort(data, cmpFunc); } - public compareValues(a: any, b: any) { + public compareValues(a: any, b: any): number { const an = (a === null || a === undefined); const bn = (b === null || b === undefined); if (an) { @@ -57,14 +63,16 @@ export class DefaultSortingStrategy implements ISortingStrategy { return a > b ? 1 : a < b ? -1 : 0; } - protected compareObjects(obj1: any, - obj2: any, - key: string, - reverse: number, - ignoreCase: boolean, - valueResolver: (obj: any, key: string, isDate?: boolean, isTime?: boolean) => any, - isDate: boolean, - isTime: boolean) { + protected compareObjects( + obj1: any, + obj2: any, + key: string, + reverse: number, + ignoreCase: boolean, + valueResolver: (obj: any, key: string, isDate?: boolean, isTime?: boolean) => any, + isDate: boolean, + isTime: boolean + ) { let a = valueResolver(obj1, key, isDate, isTime); let b = valueResolver(obj2, key, isDate, isTime); if (ignoreCase) { @@ -74,179 +82,7 @@ export class DefaultSortingStrategy implements ISortingStrategy { return reverse * this.compareValues(a, b); } - protected arraySort(data: any[], compareFn?): any[] { + protected arraySort(data: any[], compareFn?: (arg0: any, arg1: any) => number): any[] { return data.sort(compareFn); } } - -export interface IGridSortingStrategy { - sort(data: any[], expressions: ISortingExpression[], grid?: GridType): any[]; -} - -export class NoopSortingStrategy implements IGridSortingStrategy { - private static _instance: NoopSortingStrategy = null; - - private constructor() { } - - public static instance() { - return this._instance || (this._instance = new NoopSortingStrategy()); - } - - public sort(data: any[]): any[] { - return data; - } -} - -export class IgxSorting implements IGridSortingStrategy { - public sort(data: any[], expressions: ISortingExpression[], grid?: GridType): any[] { - return this.sortDataRecursive(data, expressions, 0, grid); - } - - protected groupDataRecursive(data: T[], state: IGroupingState, level: number, - parent: IGroupByRecord, metadata: IGroupByRecord[], grid: GridType = null, - groupsRecords: any[] = [], fullResult: IGroupByResult = { data: [], metadata: [] }): T[] { - const expressions = state.expressions; - const expansion = state.expansion; - let i = 0; - let result = []; - while (i < data.length) { - const column = grid ? grid.getColumnByName(expressions[level].fieldName) : null; - const isDate = column?.dataType === DATE_TYPE || column?.dataType === DATE_TIME_TYPE; - const isTime = column?.dataType === TIME_TYPE; - const group = this.groupedRecordsByExpression(data, i, expressions[level], isDate); - const groupRow: IGroupByRecord = { - expression: expressions[level], - level, - records: cloneArray(group), - value: this.getFieldValue(group[0], expressions[level].fieldName, isDate, isTime), - groupParent: parent, - groups: [], - height: grid ? grid.renderedRowHeight : null, - column - }; - if (parent) { - parent.groups.push(groupRow); - } else { - groupsRecords.push(groupRow); - } - const hierarchy = getHierarchy(groupRow); - const expandState: IGroupByExpandState = expansion.find((s) => - isHierarchyMatch(s.hierarchy || [{ fieldName: groupRow.expression.fieldName, value: groupRow.value }], hierarchy)); - const expanded = expandState ? expandState.expanded : state.defaultExpanded; - let recursiveResult; - result.push(groupRow); - metadata.push(null); - fullResult.data.push(groupRow); - fullResult.metadata.push(null); - if (level < expressions.length - 1) { - recursiveResult = this.groupDataRecursive(group, state, level + 1, groupRow, - expanded ? metadata : [], grid, groupsRecords, fullResult); - if (expanded) { - result = result.concat(recursiveResult); - } - } else { - for (const groupItem of group) { - fullResult.metadata.push(groupRow); - fullResult.data.push(groupItem); - } - if (expanded) { - // Replaced object destructing as in a single big group scenario - // it hits the max number of arguments for a function the underlying JS engine - // supports. - let j = fullResult.metadata.length - group.length; - - for (; j < fullResult.metadata.length; j++) { - metadata.push(fullResult.metadata[j]); - } - - j = fullResult.data.length - group.length; - - for (; j < fullResult.data.length; j++) { - result.push(fullResult.data[j]); - } - } - } - i += group.length; - } - return result; - } - - protected getFieldValue(obj: any, key: string, isDate: boolean = false, isTime: boolean = false): any { - let resolvedValue = resolveNestedPath(obj, key); - if (isDate || isTime) { - const date = parseDate(resolvedValue); - resolvedValue = isTime && date ? - new Date().setHours(date.getHours(), date.getMinutes(), date.getSeconds(), date.getMilliseconds()) : date; - - } - return resolvedValue; - } - - private groupedRecordsByExpression(data: any[], - index: number, - expression: IGroupingExpression, - isDate: boolean = false): any[] { - const res = []; - const key = expression.fieldName; - const len = data.length; - const groupval = this.getFieldValue(data[index], key, isDate); - res.push(data[index]); - index++; - const comparer = expression.groupingComparer || DefaultSortingStrategy.instance().compareValues; - for (let i = index; i < len; i++) { - if (comparer(this.getFieldValue(data[i], key, isDate), groupval) === 0) { - res.push(data[i]); - } else { - break; - } - } - return res; - } - - private sortDataRecursive(data: T[], - expressions: ISortingExpression[], - expressionIndex: number = 0, - grid: GridType): T[] { - let i; - let j; - let gbData; - let gbDataLen; - const exprsLen = expressions.length; - const dataLen = data.length; - expressionIndex = expressionIndex || 0; - if (expressionIndex >= exprsLen || dataLen <= 1) { - return data; - } - const expr: ISortingExpression = expressions[expressionIndex]; - if (!expr.strategy) { - expr.strategy = DefaultSortingStrategy.instance(); - } - const column = grid?.getColumnByName(expr.fieldName); - const isDate = column?.dataType === DATE_TYPE || column?.dataType === DATE_TIME_TYPE; - const isTime = column?.dataType === TIME_TYPE; - data = expr.strategy.sort(data, expr.fieldName, expr.dir, expr.ignoreCase, this.getFieldValue, isDate, isTime); - if (expressionIndex === exprsLen - 1) { - return data; - } - // in case of multiple sorting - for (i = 0; i < dataLen; i++) { - gbData = this.groupedRecordsByExpression(data, i, expr, isDate); - gbDataLen = gbData.length; - if (gbDataLen > 1) { - gbData = this.sortDataRecursive(gbData, expressions, expressionIndex + 1, grid); - } - for (j = 0; j < gbDataLen; j++) { - data[i + j] = gbData[j]; - } - i += gbDataLen - 1; - } - return data; - } -} - -export class IgxDataRecordSorting extends IgxSorting { - - protected getFieldValue(obj: any, key: string, isDate: boolean = false, isTime: boolean = false): any { - return super.getFieldValue(obj.data, key, isDate, isTime); - } -} diff --git a/projects/igniteui-angular/src/lib/date-picker/date-picker.component.ts b/projects/igniteui-angular/src/lib/date-picker/date-picker.component.ts index 24206b2f918..6bd5bd816bc 100644 --- a/projects/igniteui-angular/src/lib/date-picker/date-picker.component.ts +++ b/projects/igniteui-angular/src/lib/date-picker/date-picker.component.ts @@ -773,6 +773,7 @@ export class IgxDatePickerComponent extends PickerBaseDirective implements Contr } if (this._overlayId) { this._overlayService.detach(this._overlayId); + delete this._overlayId; } } diff --git a/projects/igniteui-angular/src/lib/dialog/dialog.component.ts b/projects/igniteui-angular/src/lib/dialog/dialog.component.ts index e557b46657a..745b81a5086 100644 --- a/projects/igniteui-angular/src/lib/dialog/dialog.component.ts +++ b/projects/igniteui-angular/src/lib/dialog/dialog.component.ts @@ -382,7 +382,7 @@ export class IgxDialogComponent implements IToggleView, OnInit, OnDestroy, After * } * ``` */ - public get state(): string { + public get state(): string { return this.isOpen ? 'open' : 'close'; } @@ -633,3 +633,5 @@ export interface IDialogCancellableEventArgs extends IDialogEventArgs, Cancelabl imports: [CommonModule, IgxToggleModule, IgxButtonModule, IgxRippleModule, IgxFocusModule, IgxFocusTrapModule] }) export class IgxDialogModule { } + +export * from './dialog.directives'; diff --git a/projects/igniteui-angular/src/lib/directives/button/button.directive.spec.ts b/projects/igniteui-angular/src/lib/directives/button/button.directive.spec.ts index cbbd045f7b3..4cf8946b8cd 100644 --- a/projects/igniteui-angular/src/lib/directives/button/button.directive.spec.ts +++ b/projects/igniteui-angular/src/lib/directives/button/button.directive.spec.ts @@ -158,7 +158,7 @@ describe('IgxButton', () => { }) class InitButtonComponent { @ViewChild(IgxButtonDirective, { read: IgxButtonDirective, static: true }) - button: IgxButtonDirective; + public button: IgxButtonDirective; } @Component({ @@ -189,11 +189,16 @@ class ButtonWithAttribsComponent { ` }) class ButtonsWithDisplayDensityComponent { - @ViewChild('flat', { read: IgxButtonDirective, static: true }) flatButton: IgxButtonDirective; - @ViewChild('raised', { read: IgxButtonDirective, static: true }) raisedButton: IgxButtonDirective; - @ViewChild('outlined', { read: IgxButtonDirective, static: true }) outlinedButton: IgxButtonDirective; - @ViewChild('fab', { read: IgxButtonDirective, static: true }) fabButton: IgxButtonDirective; - @ViewChild('icon', { read: IgxButtonDirective, static: true }) iconButton: IgxButtonDirective; + @ViewChild('flat', { read: IgxButtonDirective, static: true }) + public flatButton: IgxButtonDirective; + @ViewChild('raised', { read: IgxButtonDirective, static: true }) + public raisedButton: IgxButtonDirective; + @ViewChild('outlined', { read: IgxButtonDirective, static: true }) + public outlinedButton: IgxButtonDirective; + @ViewChild('fab', { read: IgxButtonDirective, static: true }) + public fabButton: IgxButtonDirective; + @ViewChild('icon', { read: IgxButtonDirective, static: true }) + public iconButton: IgxButtonDirective; public density: DisplayDensity = DisplayDensity.comfortable; } diff --git a/projects/igniteui-angular/src/lib/directives/divider/divider.directive.ts b/projects/igniteui-angular/src/lib/directives/divider/divider.directive.ts index 7d13741d364..27c35e15ba5 100644 --- a/projects/igniteui-angular/src/lib/directives/divider/divider.directive.ts +++ b/projects/igniteui-angular/src/lib/directives/divider/divider.directive.ts @@ -48,7 +48,7 @@ export class IgxDividerDirective { public type: IgxDividerType | string = IgxDividerType.SOLID; @HostBinding('class.igx-divider--dashed') - get isDashed() { + public get isDashed() { return this.type === IgxDividerType.DASHED; } @@ -83,7 +83,7 @@ export class IgxDividerDirective { * ``` */ @HostBinding('style.margin') - set inset(value: string) { + public set inset(value: string) { this._inset = value; } @@ -94,7 +94,7 @@ export class IgxDividerDirective { * const inset = this.divider.inset; * ``` */ - get inset() { + public get inset() { const baseMargin = '0'; if (this.middle) { @@ -127,7 +127,7 @@ export class IgxDividerDirective { * const isDefault = this.divider.isDefault; * ``` */ - get isSolid() { + public get isSolid() { return this.type === IgxDividerType.SOLID; } } diff --git a/projects/igniteui-angular/src/lib/directives/divider/divider.spec.ts b/projects/igniteui-angular/src/lib/directives/divider/divider.spec.ts index 2fbac0a6ab4..f32ef4cce83 100644 --- a/projects/igniteui-angular/src/lib/directives/divider/divider.spec.ts +++ b/projects/igniteui-angular/src/lib/directives/divider/divider.spec.ts @@ -129,9 +129,9 @@ describe('Divider', () => { ` }) class TestDividerComponent { - type: string; - vertical: boolean; - middle: boolean; - inset: string; - role: string; + public type: string; + public vertical: boolean; + public middle: boolean; + public inset: string; + public role: string; } diff --git a/projects/igniteui-angular/src/lib/directives/filter/filter.directive.spec.ts b/projects/igniteui-angular/src/lib/directives/filter/filter.directive.spec.ts index f4032ad0fbf..189606f3ef5 100644 --- a/projects/igniteui-angular/src/lib/directives/filter/filter.directive.spec.ts +++ b/projects/igniteui-angular/src/lib/directives/filter/filter.directive.spec.ts @@ -160,7 +160,7 @@ class DeclarativeListTestComponent { public filteringArgs: FilteringArgs; public filteredArgs: FilteringArgs; - get fo() { + public get fo() { const options = new IgxFilterOptions(); options.items = this.list.items; options.inputValue = this.filterValue; @@ -200,7 +200,7 @@ class DynamicListTestComponent { { key: '4', text: 'Nav4' } ]; - get fo() { + public get fo() { const options = new IgxFilterOptions(); options.inputValue = this.filterValue; options.key = 'text'; diff --git a/projects/igniteui-angular/src/lib/directives/focus/focus.directive.spec.ts b/projects/igniteui-angular/src/lib/directives/focus/focus.directive.spec.ts index 61dbeee9dd1..a95ae4d72cc 100644 --- a/projects/igniteui-angular/src/lib/directives/focus/focus.directive.spec.ts +++ b/projects/igniteui-angular/src/lib/directives/focus/focus.directive.spec.ts @@ -112,7 +112,7 @@ class NoFocusComponent { } class TriggerFocusOnClickComponent { @ViewChild(IgxFocusDirective, { static: true }) public focusRef: IgxFocusDirective; - focus() { + public focus() { this.focusRef.trigger(); } diff --git a/projects/igniteui-angular/src/lib/directives/for-of/base.helper.component.ts b/projects/igniteui-angular/src/lib/directives/for-of/base.helper.component.ts index 0f386ead9eb..3a5c2c23318 100644 --- a/projects/igniteui-angular/src/lib/directives/for-of/base.helper.component.ts +++ b/projects/igniteui-angular/src/lib/directives/for-of/base.helper.component.ts @@ -48,7 +48,7 @@ export class VirtualHelperBaseDirective implements OnDestroy, AfterViewInit { if (!this.platformUtil.isBrowser) { return; } - const delayTime = this.platformUtil.isIE ? 40 : 0; + const delayTime = 0; this._zone.runOutsideAngular(() => { resizeObservable(this.nativeElement).pipe( throttleTime(delayTime), diff --git a/projects/igniteui-angular/src/lib/directives/for-of/for_of.directive.spec.ts b/projects/igniteui-angular/src/lib/directives/for-of/for_of.directive.spec.ts index aec65dd730f..0e90b055a15 100644 --- a/projects/igniteui-angular/src/lib/directives/for-of/for_of.directive.spec.ts +++ b/projects/igniteui-angular/src/lib/directives/for-of/for_of.directive.spec.ts @@ -1295,7 +1295,7 @@ export class TestIgxForOfDirective extends IgxForOfDirective { public zone: NgZone, protected syncService: IgxForOfScrollSyncService, platformUtil: PlatformUtil) { - super(viewContainer, template, differs, fResolver, changeDet, zone, syncService, platformUtil, document); + super(viewContainer, template, differs, changeDet, zone, syncService, platformUtil, document); } public onScroll(evt) { const ind = this.scrTopArray.length - 1; diff --git a/projects/igniteui-angular/src/lib/directives/for-of/for_of.directive.ts b/projects/igniteui-angular/src/lib/directives/for-of/for_of.directive.ts index 5289481f965..d3f4170d00e 100644 --- a/projects/igniteui-angular/src/lib/directives/for-of/for_of.directive.ts +++ b/projects/igniteui-angular/src/lib/directives/for-of/for_of.directive.ts @@ -2,8 +2,6 @@ import { CommonModule, DOCUMENT, NgForOfContext } from '@angular/common'; import { ChangeDetectorRef, - ComponentFactory, - ComponentFactoryResolver, ComponentRef, Directive, DoCheck, @@ -369,7 +367,6 @@ export class IgxForOfDirective implements OnInit, OnChanges, DoCheck, OnDestr private _viewContainer: ViewContainerRef, protected _template: TemplateRef>, protected _differs: IterableDiffers, - private resolver: ComponentFactoryResolver, public cdr: ChangeDetectorRef, protected _zone: NgZone, protected syncScrollService: IgxForOfScrollSyncService, @@ -393,14 +390,8 @@ export class IgxForOfDirective implements OnInit, OnChanges, DoCheck, OnDestr let totalSize = 0; const vc = this.igxForScrollContainer ? this.igxForScrollContainer._viewContainer : this._viewContainer; this.igxForSizePropName = this.igxForSizePropName || 'width'; - - const dcFactory: ComponentFactory = this.resolver.resolveComponentFactory(DisplayContainerComponent); - this.dc = this._viewContainer.createComponent(dcFactory, 0); + this.dc = this._viewContainer.createComponent(DisplayContainerComponent, { index: 0 }); this.dc.instance.scrollDirection = this.igxForScrollOrientation; - if (typeof MSGesture === 'function') { - // On Edge and IE when scrolling on touch the page scroll instead of the grid. - this.dc.instance._viewContainer.element.nativeElement.style.touchAction = 'none'; - } if (this.igxForOf && this.igxForOf.length) { totalSize = this.initSizesCache(this.igxForOf); this.scrollComponent = this.syncScrollService.getScrollMaster(this.igxForScrollOrientation); @@ -423,8 +414,7 @@ export class IgxForOfDirective implements OnInit, OnChanges, DoCheck, OnDestr if (this.igxForScrollOrientation === 'vertical') { this.dc.instance._viewContainer.element.nativeElement.style.top = '0px'; - const factory: ComponentFactory = this.resolver.resolveComponentFactory(VirtualHelperComponent); - this.scrollComponent = vc.createComponent(factory).instance; + this.scrollComponent = vc.createComponent(VirtualHelperComponent).instance; this._maxHeight = this._calcMaxBrowserHeight(); this.scrollComponent.size = this.igxForOf ? this._calcHeight() : 0; this.syncScrollService.setScrollMaster(this.igxForScrollOrientation, this.scrollComponent); @@ -435,9 +425,9 @@ export class IgxForOfDirective implements OnInit, OnChanges, DoCheck, OnDestr }); const destructor = takeUntil(this.destroy$); this.contentResizeNotify.pipe( - destructor, filter(() => this.igxForContainerSize && this.igxForOf && this.igxForOf.length > 0), - throttleTime(40, undefined, { leading: true, trailing: true }) + throttleTime(40, undefined, { leading: true, trailing: true }), + destructor ).subscribe(() => this._zone.runTask(() => this.updateSizes())); } @@ -445,9 +435,7 @@ export class IgxForOfDirective implements OnInit, OnChanges, DoCheck, OnDestr this.func = (evt) => this.onHScroll(evt); this.scrollComponent = this.syncScrollService.getScrollMaster(this.igxForScrollOrientation); if (!this.scrollComponent) { - const hvFactory: ComponentFactory = - this.resolver.resolveComponentFactory(HVirtualHelperComponent); - this.scrollComponent = vc.createComponent(hvFactory).instance; + this.scrollComponent = vc.createComponent(HVirtualHelperComponent).instance; this.scrollComponent.size = totalSize; this.syncScrollService.setScrollMaster(this.igxForScrollOrientation, this.scrollComponent); this._zone.runOutsideAngular(() => { @@ -1476,14 +1464,13 @@ export class IgxGridForOfDirective extends IgxForOfDirective implements On _viewContainer: ViewContainerRef, _template: TemplateRef>, _differs: IterableDiffers, - resolver: ComponentFactoryResolver, cdr: ChangeDetectorRef, _zone: NgZone, _platformUtil: PlatformUtil, @Inject(DOCUMENT) _document: any, protected syncScrollService: IgxForOfScrollSyncService, protected syncService: IgxForOfSyncService) { - super(_viewContainer, _template, _differs, resolver, cdr, _zone, syncScrollService, _platformUtil, _document); + super(_viewContainer, _template, _differs, cdr, _zone, syncScrollService, _platformUtil, _document); } public ngOnInit() { diff --git a/projects/igniteui-angular/src/lib/directives/mask/mask.directive.spec.ts b/projects/igniteui-angular/src/lib/directives/mask/mask.directive.spec.ts index fb308202e5a..e4765435c70 100644 --- a/projects/igniteui-angular/src/lib/directives/mask/mask.directive.spec.ts +++ b/projects/igniteui-angular/src/lib/directives/mask/mask.directive.spec.ts @@ -499,7 +499,6 @@ describe('igxMaskDirective ControlValueAccessor Unit', () => { DELETE: 'Delete', Y: 'y', Z: 'z' - } }; diff --git a/projects/igniteui-angular/src/lib/directives/mask/mask.directive.ts b/projects/igniteui-angular/src/lib/directives/mask/mask.directive.ts index 9bc9a41d882..a63e33052ec 100644 --- a/projects/igniteui-angular/src/lib/directives/mask/mask.directive.ts +++ b/projects/igniteui-angular/src/lib/directives/mask/mask.directive.ts @@ -140,7 +140,6 @@ export class IgxMaskDirective implements OnInit, AfterViewChecked, ControlValueA private _focused = false; private _droppedData: string; private _hasDropAction: boolean; - private _stopPropagation: boolean; private readonly defaultMask = 'CCCCCCCCCC'; @@ -161,10 +160,6 @@ export class IgxMaskDirective implements OnInit, AfterViewChecked, ControlValueA return; } - if (this.platform.isIE && this._stopPropagation) { - this._stopPropagation = false; - } - if ((event.ctrlKey && (key === this.platform.KEYMAP.Z || key === this.platform.KEYMAP.Y))) { event.preventDefault(); } @@ -238,11 +233,6 @@ export class IgxMaskDirective implements OnInit, AfterViewChecked, ControlValueA this._end = this.selectionEnd; } - if (this.platform.isIE && (this._stopPropagation || !this._focused)) { - this._stopPropagation = false; - return; - } - if (this._hasDropAction) { this._start = this.selectionStart; } @@ -357,9 +347,6 @@ export class IgxMaskDirective implements OnInit, AfterViewChecked, ControlValueA /** @hidden */ protected showMask(value: string): void { if (this.focusedValuePipe) { - if (this.platform.isIE) { - this._stopPropagation = true; - } // TODO(D.P.): focusedValuePipe should be deprecated or force-checked to match mask format this.inputValue = this.focusedValuePipe.transform(value); } else { diff --git a/projects/igniteui-angular/src/lib/directives/radio/radio-group.directive.spec.ts b/projects/igniteui-angular/src/lib/directives/radio/radio-group.directive.spec.ts index 90abdc41867..b870a7e6382 100644 --- a/projects/igniteui-angular/src/lib/directives/radio/radio-group.directive.spec.ts +++ b/projects/igniteui-angular/src/lib/directives/radio/radio-group.directive.spec.ts @@ -237,7 +237,7 @@ class RadioGroupComponent { @ViewChild('radioGroup', { read: IgxRadioGroupDirective, static: true }) public radioGroup: IgxRadioGroupDirective; } -class Person { +interface Person { name: string; favoriteSeason: string; } @@ -253,14 +253,14 @@ class Person { class RadioGroupWithModelComponent { @ViewChild('radioGroupSeasons', { read: IgxRadioGroupDirective, static: true }) public radioGroup: IgxRadioGroupDirective; - seasons = [ + public seasons = [ 'Winter', 'Spring', 'Summer', 'Autumn', ]; - personBob: Person = { name: 'Bob', favoriteSeason: 'Summer' }; + public personBob: Person = { name: 'Bob', favoriteSeason: 'Summer' }; } @Component({ @@ -275,22 +275,22 @@ class RadioGroupWithModelComponent { ` }) class RadioGroupReactiveFormsComponent { - seasons = [ + public seasons = [ 'Winter', 'Spring', 'Summer', 'Autumn', ]; - newModel: Person; - model: Person = { name: 'Kirk', favoriteSeason: this.seasons[1] }; - personForm: FormGroup; + public newModel: Person; + public model: Person = { name: 'Kirk', favoriteSeason: this.seasons[1] }; + public personForm: FormGroup; constructor(private _formBuilder: FormBuilder) { this._createForm(); } - updateModel() { + public updateModel() { const formModel = this.personForm.value; this.newModel = { @@ -328,10 +328,10 @@ class RadioGroupReactiveFormsComponent { class RadioGroupDeepProjectionComponent { @ViewChild(IgxRadioGroupDirective, { static: true }) - radioGroup: IgxRadioGroupDirective; + public radioGroup: IgxRadioGroupDirective; - choices = [0, 1, 2]; - group1: FormGroup; + public choices = [0, 1, 2]; + public group1: FormGroup; constructor(private _builder: FormBuilder) { this._createForm(); diff --git a/projects/igniteui-angular/src/lib/directives/scroll-inertia/scroll_inertia.directive.spec.ts b/projects/igniteui-angular/src/lib/directives/scroll-inertia/scroll_inertia.directive.spec.ts index 3b08119742a..11771613a02 100644 --- a/projects/igniteui-angular/src/lib/directives/scroll-inertia/scroll_inertia.directive.spec.ts +++ b/projects/igniteui-angular/src/lib/directives/scroll-inertia/scroll_inertia.directive.spec.ts @@ -300,83 +300,6 @@ describe('Scroll Inertia Directive - Scrolling', () => { expect (() => scrollInertiaDir.onTouchMove(evt)).not.toThrow(); expect (() => scrollInertiaDir.onTouchEnd(evt)).not.toThrow(); }); - - // Unit tests for touch events on IE/Edge - it('should change scroll top related scrollbar via gesture events. ', () => { - let evt = { - screenX: 0, - screenY: 0 - }; - scrollInertiaDir.onMSGestureStart(evt); - - - evt = { - screenX: 0, - screenY: -100 - }; - - scrollInertiaDir.onMSGestureChange(evt); - expect(scrollContainerMock.scrollTop).toEqual(100); - }); - - it('should change scroll left related scrollbar via gesture events. ', () => { - let evt = { - screenX: 0, - screenY: 0 - }; - scrollInertiaDir.onMSGestureStart(evt); - - - evt = { - screenX: -100, - screenY: 0 - }; - - scrollInertiaDir.onMSGestureChange(evt); - expect(scrollContainerMock.scrollLeft).toEqual(80); - }); - - // Unit tests for Pointer Down/Pointer Up - IE/Edge specific - it('should prepare MSGesture on PointerDown to handle touch interactions on IE/Edge and should release them on PointerUp.', () => { - const targetElem = { - setPointerCapture: (_args) => {}, - releasePointerCapture: (_args) => {} - }; - const pointerId = 100; - spyOn(targetElem, 'setPointerCapture'); - spyOn(targetElem, 'releasePointerCapture'); - const msGesture = window['MSGesture']; - if (!msGesture) { - // if MSGesture does not exist create a dummy obj to use instead. - window['MSGesture'] = (() => ({ addPointer: () => {} })) as any; - } - - const evt = { - pointerType: 2, - target: targetElem, - pointerId - }; - scrollInertiaDir.onPointerDown(evt); - - expect(targetElem.setPointerCapture).toHaveBeenCalledWith(pointerId); - - scrollInertiaDir.onPointerUp(evt); - expect(targetElem.releasePointerCapture).toHaveBeenCalledWith(pointerId); - - // restore original MSGesture state - window['MSGesture'] = msGesture; - }); - - it('should not throw error when calling pointerDown/pointerUp if there is no associated scrollbar.', () => { - scrollInertiaDir.IgxScrollInertiaScrollContainer = null; - const evt = { - pointerType: 2, - target: {}, - pointerId: 0 - }; - expect (() => scrollInertiaDir.onPointerDown(evt)).not.toThrow(); - expect (() => scrollInertiaDir.onPointerUp(evt)).not.toThrow(); - }); }); /** igxScroll inertia for testing */ @@ -384,7 +307,7 @@ describe('Scroll Inertia Directive - Scrolling', () => { export class IgxTestScrollInertiaDirective extends IgxScrollInertiaDirective { constructor(element: ElementRef, _zone: NgZone) { - super(element, _zone, { isIE: false } as any); + super(element, _zone); } public onWheel(evt) { super.onWheel(evt); @@ -400,23 +323,6 @@ export class IgxTestScrollInertiaDirective extends IgxScrollInertiaDirective { return super.onTouchMove(evt); } - // IE/Edge specific events - public onPointerDown(evt) { - return super.onPointerDown(evt); - } - - public onPointerUp(evt) { - return super.onPointerUp(evt); - } - - public onMSGestureStart(evt) { - return super.onMSGestureStart(evt); - } - - public onMSGestureChange(evt) { - return super.onMSGestureChange(evt); - } - public _inertiaInit(speedX, speedY) { super._inertiaInit(speedX, speedY); } diff --git a/projects/igniteui-angular/src/lib/directives/scroll-inertia/scroll_inertia.directive.ts b/projects/igniteui-angular/src/lib/directives/scroll-inertia/scroll_inertia.directive.ts index 49db537f301..d86b15b1b7c 100644 --- a/projects/igniteui-angular/src/lib/directives/scroll-inertia/scroll_inertia.directive.ts +++ b/projects/igniteui-angular/src/lib/directives/scroll-inertia/scroll_inertia.directive.ts @@ -1,6 +1,5 @@ import { Directive, Input, ElementRef, NgZone, OnInit, NgModule, OnDestroy } from '@angular/core'; import { CommonModule } from '@angular/common'; -import { PlatformUtil } from '../../core/utils'; /** * @hidden @@ -51,24 +50,15 @@ export class IgxScrollInertiaDirective implements OnInit, OnDestroy { private _totalMovedX; private _offsetRecorded; private _offsetDirection; - private _touchPrevented; private _lastMovedX; private _lastMovedY; - private _gestureObject; - private setPointerCaptureFName = typeof Element.prototype['msSetPointerCapture'] === 'function' ? - 'msSetPointerCapture' : - 'setPointerCapture'; - private releasePointerCaptureFName = typeof Element.prototype['msReleasePointerCapture'] === 'function' ? - 'msReleasePointerCapture' : - 'releasePointerCapture'; - private _pointer; private _nextX; private _nextY; private parentElement; private baseDeltaMultiplier = 1 / 120; private firefoxDeltaMultiplier = 1 / 30; - constructor(private element: ElementRef, private _zone: NgZone, private platform: PlatformUtil) { } + constructor(private element: ElementRef, private _zone: NgZone) { } public ngOnInit(): void { this._zone.runOutsideAngular(() => { @@ -81,10 +71,6 @@ export class IgxScrollInertiaDirective implements OnInit, OnDestroy { targetElem.addEventListener('touchstart', this.onTouchStart.bind(this)); targetElem.addEventListener('touchmove', this.onTouchMove.bind(this)); targetElem.addEventListener('touchend', this.onTouchEnd.bind(this)); - targetElem.addEventListener('pointerdown', this.onPointerDown.bind(this)); - targetElem.addEventListener('pointerup', this.onPointerUp.bind(this)); - targetElem.addEventListener('MSGestureStart', this.onMSGestureStart.bind(this)); - targetElem.addEventListener('MSGestureChange', this.onMSGestureChange.bind(this)); }); } @@ -98,10 +84,6 @@ export class IgxScrollInertiaDirective implements OnInit, OnDestroy { targetElem.removeEventListener('touchstart', this.onTouchStart); targetElem.removeEventListener('touchmove', this.onTouchMove); targetElem.removeEventListener('touchend', this.onTouchEnd); - targetElem.removeEventListener('pointerdown', this.onPointerDown); - targetElem.removeEventListener('pointerup', this.onPointerUp); - targetElem.removeEventListener('MSGestureStart', this.onMSGestureStart); - targetElem.removeEventListener('MSGestureChange', this.onMSGestureChange); }); } @@ -118,14 +100,11 @@ export class IgxScrollInertiaDirective implements OnInit, OnDestroy { if (evt.ctrlKey) { return; } - if (evt.shiftKey && this.platform.isIE) { - evt.preventDefault(); - } let scrollDeltaX; let scrollDeltaY; const scrollStep = this.wheelStep; const minWheelStep = 1 / this.wheelStep; - const smoothing = this.smoothingDuration !== 0 && !this.platform.isIE; + const smoothing = this.smoothingDuration !== 0; this._startX = this.IgxScrollInertiaScrollContainer.scrollLeft; this._startY = this.IgxScrollInertiaScrollContainer.scrollTop; @@ -212,7 +191,7 @@ export class IgxScrollInertiaDirective implements OnInit, OnDestroy { * Function that is called the first moment we start interacting with the content on a touch device */ protected onTouchStart(event) { - if (typeof MSGesture === 'function' || !this.IgxScrollInertiaScrollContainer) { + if (!this.IgxScrollInertiaScrollContainer) { return false; } @@ -239,7 +218,6 @@ export class IgxScrollInertiaDirective implements OnInit, OnDestroy { this._offsetRecorded = false; this._offsetDirection = 0; - this._touchPrevented = false; if (this.IgxScrollInertiaDirection === 'vertical') { this.preventParentScroll(event, false); } @@ -250,10 +228,6 @@ export class IgxScrollInertiaDirective implements OnInit, OnDestroy { * Function that is called when we need to scroll the content based on touch interactions */ protected onTouchMove(event) { - if (typeof MSGesture === 'function') { - this._touchPrevented = false; - return false; - } if (!this.IgxScrollInertiaScrollContainer) { return; } @@ -295,10 +269,9 @@ export class IgxScrollInertiaDirective implements OnInit, OnDestroy { this._totalMovedX += this._lastMovedX; - let scrolledXY; // Object: {x, y} /* Do not scroll using touch untill out of the swipeToleranceX bounds */ if (Math.abs(this._totalMovedX) < this.swipeToleranceX && !this._offsetRecorded) { - scrolledXY = this._scrollTo(this._startX, destY); + this._scrollTo(this._startX, destY); } else { /* Record the direction the first time we are out of the swipeToleranceX bounds. * That way we know which direction we apply the offset so it doesn't hickup when moving out of the swipeToleranceX bounds */ @@ -309,12 +282,7 @@ export class IgxScrollInertiaDirective implements OnInit, OnDestroy { /* Scroll with offset ammout of swipeToleranceX in the direction we have exited the bounds and don't change it after that ever until touchend and again touchstart */ - scrolledXY = this._scrollTo(destX - this._offsetDirection * this.swipeToleranceX, - destY); - } - - if (scrolledXY.x === 0 && scrolledXY.y === 0) { - this._touchPrevented = true; + this._scrollTo(destX - this._offsetDirection * this.swipeToleranceX, destY); } // On Safari preventing the touchmove would prevent default page scroll behaviour even if there is the element doesn't have overflow @@ -324,9 +292,6 @@ export class IgxScrollInertiaDirective implements OnInit, OnDestroy { } protected onTouchEnd(event) { - if (typeof MSGesture === 'function') { - return; - } let speedX = 0; let speedY = 0; @@ -348,96 +313,6 @@ export class IgxScrollInertiaDirective implements OnInit, OnDestroy { } } - /** - * @hidden - * Function that is called when we need to detect touch starting on a touch device on IE/Edge - */ - protected onPointerDown(event) { - if (!event || (event.pointerType !== 2 && event.pointerType !== 'touch') || - typeof MSGesture !== 'function') { - return true; - } - if (!this.IgxScrollInertiaScrollContainer) { - return; - } - // setPointerCaptureFName is the name of the function that is supported - event.target[this.setPointerCaptureFName](this._pointer = event.pointerId); - - // create gestureObject only one time to prevent overlapping during intertia - if (!this._gestureObject) { - this._gestureObject = new MSGesture(); - this._gestureObject.target = this.parentElement; - } - this._gestureObject.addPointer(this._pointer); - } - - /** - * @hidden - * Function that is called when we need to detect touch ending on a touch device on IE/Edge - */ - protected onPointerUp(event) { - if (!this._pointer) { - return true; - } - if (!this.IgxScrollInertiaScrollContainer) { - return; - } - /* releasePointerCaptureFName is the name of the function that is supported */ - event.target[this.releasePointerCaptureFName](this._pointer); - - delete this._pointer; - } - - /** - * @hidden - * Function that is called when a gesture begins on IE/Edge - */ - protected onMSGestureStart(event) { - if (!this.IgxScrollInertiaScrollContainer) { - return; - } - this._startX = this.IgxScrollInertiaScrollContainer.scrollLeft; - this._startY = this.IgxScrollInertiaScrollContainer.scrollTop; - - - this._touchStartX = event.screenX; - this._touchStartY = event.screenY; - - // Vars regarding swipe offset - this._totalMovedX = 0; - this._offsetRecorded = false; - this._offsetDirection = 0; - return false; - } - - /** - * @hidden - * Function that is called when a we need to scroll based on the gesture performed on IE/Edge - */ - protected onMSGestureChange(event) { - if (!this.IgxScrollInertiaScrollContainer) { - return; - } - const touchPos = event; - const destX = this._startX + this._touchStartX - touchPos.screenX; - const destY = this._startY + this._touchStartY - touchPos.screenY; - /* Logic regarding x tolerance to prevent accidental horizontal scrolling when scrolling vertically */ - this._totalMovedX = this._touchStartX - touchPos.screenX; - if (Math.abs(this._totalMovedX) < this.swipeToleranceX && !this._offsetRecorded) { - /* Do not scroll horizontally yet while in the tolerance range */ - this._scrollToY(destY); - } else { - if (!this._offsetRecorded) { - this._offsetDirection = Math.sign(destX - this._startX); - this._offsetRecorded = true; - } - /* Once the tolerance is exceeded it can be scrolled horizontally */ - this._scrollTo(destX - this._offsetDirection * this.swipeToleranceX, destY); - } - - return false; - } - protected _smoothWheelScroll(delta) { this._nextY = this.IgxScrollInertiaScrollContainer.scrollTop; this._nextX = this.IgxScrollInertiaScrollContainer.scrollLeft; diff --git a/projects/igniteui-angular/src/lib/directives/template-outlet/template_outlet.directive.ts b/projects/igniteui-angular/src/lib/directives/template-outlet/template_outlet.directive.ts index 6694efe6609..3d05478f8e3 100644 --- a/projects/igniteui-angular/src/lib/directives/template-outlet/template_outlet.directive.ts +++ b/projects/igniteui-angular/src/lib/directives/template-outlet/template_outlet.directive.ts @@ -218,10 +218,8 @@ export interface ICachedViewLoadedEventArgs extends IViewChangeEventArgs { */ @NgModule({ declarations: [IgxTemplateOutletDirective], - entryComponents: [], exports: [IgxTemplateOutletDirective], imports: [CommonModule] }) - export class IgxTemplateOutletModule { } diff --git a/projects/igniteui-angular/src/lib/directives/text-selection/text-selection.directive.ts b/projects/igniteui-angular/src/lib/directives/text-selection/text-selection.directive.ts index 0aa733fb57d..ca7df42780b 100644 --- a/projects/igniteui-angular/src/lib/directives/text-selection/text-selection.directive.ts +++ b/projects/igniteui-angular/src/lib/directives/text-selection/text-selection.directive.ts @@ -22,7 +22,7 @@ export class IgxTextSelectionDirective { * ``` */ @Input('igxTextSelection') - get selected(): boolean { + public get selected(): boolean { return this.selectionState; } @@ -45,7 +45,7 @@ export class IgxTextSelectionDirective { * * ``` */ - set selected(val: boolean) { + public set selected(val: boolean) { this.selectionState = val; } @@ -70,7 +70,7 @@ export class IgxTextSelectionDirective { * } * ``` */ - get nativeElement() { + public get nativeElement() { return this.element.nativeElement; } @@ -80,7 +80,7 @@ export class IgxTextSelectionDirective { * @hidden */ @HostListener('focus') - onFocus() { + public onFocus() { this.trigger(); } @@ -105,7 +105,7 @@ export class IgxTextSelectionDirective { * } * ``` */ - trigger() { + public trigger() { if (this.selected && this.nativeElement.value.length) { requestAnimationFrame(() => this.nativeElement.setSelectionRange(0, this.nativeElement.value.length)); } diff --git a/projects/igniteui-angular/src/lib/directives/toggle/toggle.directive.spec.ts b/projects/igniteui-angular/src/lib/directives/toggle/toggle.directive.spec.ts index 5b206f11862..b984cc8e61a 100644 --- a/projects/igniteui-angular/src/lib/directives/toggle/toggle.directive.spec.ts +++ b/projects/igniteui-angular/src/lib/directives/toggle/toggle.directive.spec.ts @@ -262,7 +262,8 @@ describe('IgxToggle', () => { spyOn(toggle.closing, 'emit').and.callThrough(); spyOn(toggle.closed, 'emit').and.callThrough(); - toggle.closing.pipe(first()).subscribe((e: CancelableEventArgs) => e.cancel = true); + let cancelClosing = true; + toggle.closing.pipe(first()).subscribe((e: CancelableEventArgs) => e.cancel = cancelClosing); toggle.open(); fixture.detectChanges(); @@ -278,10 +279,14 @@ describe('IgxToggle', () => { expect(toggle.closing.emit).toHaveBeenCalledTimes(1); expect(toggle.closed.emit).toHaveBeenCalledTimes(0); + cancelClosing = false; toggle.close(); fixture.detectChanges(); tick(); + expect(toggle.closing.emit).toHaveBeenCalledTimes(2); + expect(toggle.closed.emit).toHaveBeenCalledTimes(1); + toggle.opening.subscribe((e: CancelableEventArgs) => e.cancel = true); toggle.open(); fixture.detectChanges(); diff --git a/projects/igniteui-angular/src/lib/directives/toggle/toggle.directive.ts b/projects/igniteui-angular/src/lib/directives/toggle/toggle.directive.ts index b495b171f69..e84fbf537d6 100644 --- a/projects/igniteui-angular/src/lib/directives/toggle/toggle.directive.ts +++ b/projects/igniteui-angular/src/lib/directives/toggle/toggle.directive.ts @@ -5,27 +5,23 @@ import { EventEmitter, HostBinding, HostListener, + Inject, Input, NgModule, OnDestroy, OnInit, Optional, - Output, - Inject + Output } from '@angular/core'; +import { AbsoluteScrollStrategy } from '../../services/overlay/scroll/absolute-scroll-strategy'; +import { CancelableBrowserEventArgs, IBaseEventArgs } from '../../core/utils'; +import { ConnectedPositioningStrategy } from '../../services/overlay/position/connected-positioning-strategy'; +import { filter, first, takeUntil } from 'rxjs/operators'; import { IgxNavigationService, IToggleView } from '../../core/navigation'; import { IgxOverlayService } from '../../services/overlay/overlay'; -import { - AbsoluteScrollStrategy, - ConnectedPositioningStrategy, - IPositionStrategy, - OverlayEventArgs, - OverlaySettings -} from '../../services/public_api'; -import { filter, first, takeUntil } from 'rxjs/operators'; +import { IPositionStrategy } from '../../services/overlay/position/IPositionStrategy'; +import { OverlayClosingEventArgs, OverlayEventArgs, OverlaySettings } from '../../services/overlay/utilities'; import { Subscription, Subject, MonoTypeOperatorFunction } from 'rxjs'; -import { OverlayClosingEventArgs } from '../../services/overlay/utilities'; -import { CancelableBrowserEventArgs, IBaseEventArgs } from '../../core/utils'; export interface ToggleViewEventArgs extends IBaseEventArgs { /** Id of the toggle view */ @@ -231,6 +227,7 @@ export class IgxToggleDirective implements IToggleView, OnInit, OnDestroy { this.unsubscribe(); this.overlayService.detach(this._overlayId); this._collapsed = true; + delete this._overlayId; this.cdr.detectChanges(); return; } diff --git a/projects/igniteui-angular/src/lib/drop-down/drop-down.base.ts b/projects/igniteui-angular/src/lib/drop-down/drop-down.base.ts index 0951bd992e2..9259f079060 100644 --- a/projects/igniteui-angular/src/lib/drop-down/drop-down.base.ts +++ b/projects/igniteui-angular/src/lib/drop-down/drop-down.base.ts @@ -7,7 +7,6 @@ import { IDropDownList } from './drop-down.common'; import { DropDownActionKey } from './drop-down.common'; import { IgxDropDownItemBaseDirective } from './drop-down-item.base'; import { DisplayDensityBase, DisplayDensityToken, IDisplayDensityOptions } from '../core/density'; -import { PlatformUtil } from '../core/utils'; let NEXT_ID = 0; @@ -179,7 +178,6 @@ export abstract class IgxDropDownBaseDirective extends DisplayDensityBase implem constructor( protected elementRef: ElementRef, protected cdr: ChangeDetectorRef, - protected platform: PlatformUtil, @Optional() @Inject(DisplayDensityToken) protected _displayDensityOptions: IDisplayDensityOptions) { super(_displayDensityOptions); } diff --git a/projects/igniteui-angular/src/lib/drop-down/drop-down.component.spec.ts b/projects/igniteui-angular/src/lib/drop-down/drop-down.component.spec.ts index 6caef07cfcc..33e5145d36d 100644 --- a/projects/igniteui-angular/src/lib/drop-down/drop-down.component.spec.ts +++ b/projects/igniteui-angular/src/lib/drop-down/drop-down.component.spec.ts @@ -52,7 +52,7 @@ describe('IgxDropDown ', () => { const mockForOf = jasmine.createSpyObj('IgxForOfDirective', ['totalItemCount']); it('should notify when selection has changed', () => { const selectionService = new IgxSelectionAPIService(); - dropdown = new IgxDropDownComponent({ nativeElement: null }, mockCdr, null, selectionService, null); + dropdown = new IgxDropDownComponent({ nativeElement: null }, mockCdr, selectionService, null); dropdown.ngOnInit(); (dropdown as any).virtDir = mockForOf; spyOnProperty(dropdown, 'items', 'get').and.returnValue(data); @@ -68,7 +68,7 @@ describe('IgxDropDown ', () => { }); it('should fire selectionChanging with correct args', () => { const selectionService = new IgxSelectionAPIService(); - dropdown = new IgxDropDownComponent({ nativeElement: null }, mockCdr, null, selectionService, null); + dropdown = new IgxDropDownComponent({ nativeElement: null }, mockCdr, selectionService, null); dropdown.ngOnInit(); (dropdown as any).virtDir = mockForOf; spyOnProperty(dropdown, 'items', 'get').and.returnValue(data); @@ -92,7 +92,7 @@ describe('IgxDropDown ', () => { }); it('should notify when selection is cleared', () => { const selectionService = new IgxSelectionAPIService(); - dropdown = new IgxDropDownComponent({ nativeElement: null }, mockCdr, null, selectionService, null); + dropdown = new IgxDropDownComponent({ nativeElement: null }, mockCdr, selectionService, null); dropdown.ngOnInit(); (dropdown as any).virtDir = mockForOf; spyOnProperty(dropdown, 'items', 'get').and.returnValue(data); @@ -122,7 +122,7 @@ describe('IgxDropDown ', () => { }); it('setSelectedItem should return selected item', () => { const selectionService = new IgxSelectionAPIService(); - dropdown = new IgxDropDownComponent({ nativeElement: null }, mockCdr, null, selectionService, null); + dropdown = new IgxDropDownComponent({ nativeElement: null }, mockCdr, selectionService, null); dropdown.ngOnInit(); (dropdown as any).virtDir = mockForOf; (dropdown as any).virtDir.igxForOf = data; @@ -137,7 +137,7 @@ describe('IgxDropDown ', () => { }); it('setSelectedItem should return null when selection is cleared', () => { const selectionService = new IgxSelectionAPIService(); - dropdown = new IgxDropDownComponent({ nativeElement: null }, mockCdr, null, selectionService, null); + dropdown = new IgxDropDownComponent({ nativeElement: null }, mockCdr, selectionService, null); dropdown.ngOnInit(); (dropdown as any).virtDir = mockForOf; (dropdown as any).virtDir.igxForOf = data; @@ -152,7 +152,7 @@ describe('IgxDropDown ', () => { }); it('toggle should call open method when dropdown is collapsed', () => { const selectionService = new IgxSelectionAPIService(); - dropdown = new IgxDropDownComponent({ nativeElement: null }, mockCdr, null, selectionService, null); + dropdown = new IgxDropDownComponent({ nativeElement: null }, mockCdr, selectionService, null); dropdown.ngOnInit(); (dropdown as any).virtDir = mockForOf; spyOnProperty(dropdown, 'items', 'get').and.returnValue(data); @@ -164,7 +164,7 @@ describe('IgxDropDown ', () => { }); it('toggle should call close method when dropdown is opened', () => { const selectionService = new IgxSelectionAPIService(); - dropdown = new IgxDropDownComponent({ nativeElement: null }, mockCdr, null, selectionService, null); + dropdown = new IgxDropDownComponent({ nativeElement: null }, mockCdr, selectionService, null); dropdown.ngOnInit(); (dropdown as any).virtDir = mockForOf; const mockToggle = jasmine.createSpyObj('IgxToggleDirective', ['open']); diff --git a/projects/igniteui-angular/src/lib/drop-down/drop-down.component.ts b/projects/igniteui-angular/src/lib/drop-down/drop-down.component.ts index a70acb38567..45087811eb4 100644 --- a/projects/igniteui-angular/src/lib/drop-down/drop-down.component.ts +++ b/projects/igniteui-angular/src/lib/drop-down/drop-down.component.ts @@ -23,14 +23,14 @@ import { IgxDropDownBaseDirective } from './drop-down.base'; import { DropDownActionKey, Navigate } from './drop-down.common'; import { IGX_DROPDOWN_BASE, IDropDownBase } from './drop-down.common'; import { ISelectionEventArgs } from './drop-down.common'; -import { IBaseCancelableBrowserEventArgs, IBaseEventArgs, PlatformUtil } from '../core/utils'; +import { IBaseCancelableBrowserEventArgs, IBaseEventArgs } from '../core/utils'; import { IgxSelectionAPIService } from '../core/selection'; import { Subject } from 'rxjs'; import { IgxDropDownItemBaseDirective } from './drop-down-item.base'; -import { OverlaySettings } from '../services/public_api'; import { IgxForOfDirective } from '../directives/for-of/for_of.directive'; import { take } from 'rxjs/operators'; import { DisplayDensityToken, IDisplayDensityOptions } from '../core/density'; +import { OverlaySettings } from '../services/overlay/utilities'; /** * **Ignite UI for Angular DropDown** - @@ -218,10 +218,9 @@ export class IgxDropDownComponent extends IgxDropDownBaseDirective implements ID constructor( protected elementRef: ElementRef, protected cdr: ChangeDetectorRef, - protected platform: PlatformUtil, protected selection: IgxSelectionAPIService, @Optional() @Inject(DisplayDensityToken) protected _displayDensityOptions: IDisplayDensityOptions) { - super(elementRef, cdr, platform, _displayDensityOptions); + super(elementRef, cdr, _displayDensityOptions); } /** @@ -566,19 +565,7 @@ export class IgxDropDownComponent extends IgxDropDownBaseDirective implements ID } protected scrollToItem(item: IgxDropDownItemBaseDirective) { - const itemPosition = this.calculateScrollPosition(item); - - // in IE11 setting sctrollTop is somehow slow and forces dropdown - // to appear on screen before animation start. As a result dropdown - // flickers badly. This is why we set scrollTop just a little later - // allowing animation to start and prevent dropdown flickering - if (this.platform.isIE) { - setTimeout(() => { - this.scrollContainer.scrollTop = (itemPosition); - }, 1); - } else { - this.scrollContainer.scrollTop = (itemPosition); - } + this.scrollContainer.scrollTop = this.calculateScrollPosition(item); } protected focusItem(value: boolean) { diff --git a/projects/igniteui-angular/src/lib/expansion-panel/expansion-panel.directives.ts b/projects/igniteui-angular/src/lib/expansion-panel/expansion-panel.directives.ts index 284974d68ed..79063b3c834 100644 --- a/projects/igniteui-angular/src/lib/expansion-panel/expansion-panel.directives.ts +++ b/projects/igniteui-angular/src/lib/expansion-panel/expansion-panel.directives.ts @@ -31,5 +31,4 @@ export class IgxExpansionPanelDescriptionDirective { // eslint-disable-next-line @angular-eslint/directive-selector selector: 'igx-expansion-panel-icon' }) -export class IgxExpansionPanelIconDirective { -} +export class IgxExpansionPanelIconDirective { } diff --git a/projects/igniteui-angular/src/lib/expansion-panel/expansion-panel.module.ts b/projects/igniteui-angular/src/lib/expansion-panel/expansion-panel.module.ts index 3b23e336648..15e90e96a75 100644 --- a/projects/igniteui-angular/src/lib/expansion-panel/expansion-panel.module.ts +++ b/projects/igniteui-angular/src/lib/expansion-panel/expansion-panel.module.ts @@ -17,31 +17,28 @@ import { * @hidden */ @NgModule({ - declarations: [ - IgxExpansionPanelComponent, - IgxExpansionPanelHeaderComponent, - IgxExpansionPanelBodyComponent, - IgxExpansionPanelDescriptionDirective, - IgxExpansionPanelTitleDirective, - IgxExpansionPanelIconDirective - ], - entryComponents: [ - ], - exports: [ - IgxExpansionPanelComponent, - IgxExpansionPanelHeaderComponent, - IgxExpansionPanelBodyComponent, - IgxExpansionPanelDescriptionDirective, - IgxExpansionPanelTitleDirective, - IgxExpansionPanelIconDirective - ], - imports: [ - CommonModule, - IgxRippleModule, - IgxIconModule, - IgxButtonModule, - IgxAvatarModule - ] + declarations: [ + IgxExpansionPanelComponent, + IgxExpansionPanelHeaderComponent, + IgxExpansionPanelBodyComponent, + IgxExpansionPanelDescriptionDirective, + IgxExpansionPanelTitleDirective, + IgxExpansionPanelIconDirective + ], + exports: [ + IgxExpansionPanelComponent, + IgxExpansionPanelHeaderComponent, + IgxExpansionPanelBodyComponent, + IgxExpansionPanelDescriptionDirective, + IgxExpansionPanelTitleDirective, + IgxExpansionPanelIconDirective + ], + imports: [ + CommonModule, + IgxRippleModule, + IgxIconModule, + IgxButtonModule, + IgxAvatarModule + ] }) -export class IgxExpansionPanelModule { -} +export class IgxExpansionPanelModule { } diff --git a/projects/igniteui-angular/src/lib/expansion-panel/public_api.ts b/projects/igniteui-angular/src/lib/expansion-panel/public_api.ts index d8fcd737d12..98d18c16815 100644 --- a/projects/igniteui-angular/src/lib/expansion-panel/public_api.ts +++ b/projects/igniteui-angular/src/lib/expansion-panel/public_api.ts @@ -2,5 +2,10 @@ export { IExpansionPanelEventArgs } from './expansion-panel.common'; export { IgxExpansionPanelHeaderComponent } from './expansion-panel-header.component'; export { IgxExpansionPanelBodyComponent } from './expansion-panel-body.component'; export { IgxExpansionPanelComponent } from './expansion-panel.component'; +export { + IgxExpansionPanelDescriptionDirective, + IgxExpansionPanelIconDirective, + IgxExpansionPanelTitleDirective +} from './expansion-panel.directives'; export { ExpansionPanelHeaderIconPosition } from './expansion-panel-header.component'; export * from './expansion-panel.module'; diff --git a/projects/igniteui-angular/src/lib/grids/api.service.ts b/projects/igniteui-angular/src/lib/grids/api.service.ts index 452df1cbbab..6a07285a718 100644 --- a/projects/igniteui-angular/src/lib/grids/api.service.ts +++ b/projects/igniteui-angular/src/lib/grids/api.service.ts @@ -2,23 +2,19 @@ import { Injectable } from '@angular/core'; import { Subject } from 'rxjs'; import { cloneArray, reverseMapper, mergeObjects } from '../core/utils'; import { DataUtil, GridColumnDataType } from '../data-operations/data-util'; -import { ISortingExpression, SortingDirection } from '../data-operations/sorting-expression.interface'; -import { IgxGridCellComponent } from './cell.component'; -import { IgxGridBaseDirective } from './grid-base.directive'; -import { IgxRowDirective } from './row.directive'; import { IFilteringExpressionsTree } from '../data-operations/filtering-expressions-tree'; import { Transaction, TransactionType, State } from '../services/transaction/transaction'; import { IgxCell, IgxGridCRUDService, IgxEditRow } from './common/crud.service'; -import { GridType } from './common/grid.interface'; -import { ColumnType } from './common/column.interface'; +import { CellType, ColumnType, GridServiceType, GridType, RowType } from './common/grid.interface'; import { IGridEditEventArgs, IRowToggleEventArgs } from './common/events'; import { IgxColumnMovingService } from './moving/moving.service'; +import { ISortingExpression, SortingDirection } from '../data-operations/sorting-strategy'; /** * @hidden */ @Injectable() -export class GridBaseAPIService { +export class GridBaseAPIService implements GridServiceType { public grid: T; @@ -26,7 +22,8 @@ export class GridBaseAPIService { constructor( public crudService: IgxGridCRUDService, - public cms: IgxColumnMovingService) { } + public cms: IgxColumnMovingService + ) { } public get_column_by_name(name: string): ColumnType { return this.grid.columnList.find((col: ColumnType) => col.field === name); @@ -71,7 +68,7 @@ export class GridBaseAPIService { } public get_row_index_in_data(rowID: any, dataCollection?: any[]): number { - const grid = this.grid as IgxGridBaseDirective; + const grid = this.grid; if (!grid) { return -1; } @@ -80,7 +77,7 @@ export class GridBaseAPIService { : record[grid.primaryKey] === rowID) : data.indexOf(rowID); } - public get_row_by_key(rowSelector: any): IgxRowDirective { + public get_row_by_key(rowSelector: any): RowType { if (!this.grid) { return null; } @@ -92,45 +89,30 @@ export class GridBaseAPIService { } } - public get_row_by_index(rowIndex: number): IgxRowDirective { + public get_row_by_index(rowIndex: number): RowType { return this.grid.rowList.find((row) => row.index === rowIndex); } - /** - * Gets the rowID of the record at the specified data view index - * - * @param index - * @param dataCollection - */ - public get_rec_id_by_index(index: number, dataCollection?: any[]): any { - dataCollection = dataCollection || this.grid.data; - if (index >= 0 && index < dataCollection.length) { - const rec = dataCollection[index]; - return this.grid.primaryKey ? rec[this.grid.primaryKey] : rec; - } - return null; - } - - public get_cell_by_key(rowSelector: any, field: string): IgxGridCellComponent { + public get_cell_by_key(rowSelector: any, field: string): CellType { const row = this.get_row_by_key(rowSelector); if (row && row.cells) { return row.cells.find((cell) => cell.column.field === field); } } - public get_cell_by_index(rowIndex: number, columnID: number | string): IgxGridCellComponent { + public get_cell_by_index(rowIndex: number, columnID: number | string): CellType { const row = this.get_row_by_index(rowIndex); const hasCells = row && row.cells; if (hasCells && typeof columnID === 'number') { return row.cells.find((cell) => cell.column.index === columnID); } - if (hasCells && typeof columnID === 'string'){ + if (hasCells && typeof columnID === 'string') { return row.cells.find((cell) => cell.column.field === columnID); } } - public get_cell_by_visible_index(rowIndex: number, columnIndex: number): IgxGridCellComponent { + public get_cell_by_visible_index(rowIndex: number, columnIndex: number): CellType { const row = this.get_row_by_index(rowIndex); if (row && row.cells) { return row.cells.find((cell) => cell.visibleColumnIndex === columnIndex); @@ -268,7 +250,7 @@ export class GridBaseAPIService { return this.grid.filteredData; } - public addRowToData(rowData: any, parentID?) { + public addRowToData(rowData: any, _parentID?: any) { // Add row goes to transactions and if rowEditable is properly implemented, added rows will go to pending transactions // If there is a row in edit - > commit and close const grid = this.grid; diff --git a/projects/igniteui-angular/src/lib/grids/cell.component.ts b/projects/igniteui-angular/src/lib/grids/cell.component.ts index 3a0b12b7033..c49d5fced80 100644 --- a/projects/igniteui-angular/src/lib/grids/cell.component.ts +++ b/projects/igniteui-angular/src/lib/grids/cell.component.ts @@ -12,24 +12,22 @@ OnInit, OnDestroy, OnChanges, - SimpleChanges + SimpleChanges, + Inject } from '@angular/core'; +import { formatPercent } from '@angular/common'; import { IgxTextHighlightDirective } from '../directives/text-highlight/text-highlight.directive'; -import { GridBaseAPIService } from './api.service'; -import { PlatformUtil } from '../core/utils'; -import { IgxGridBaseDirective } from './grid-base.directive'; -import { IgxGridSelectionService, ISelectionNode } from './selection/selection.service'; +import { formatCurrency, formatDate, PlatformUtil } from '../core/utils'; +import { IgxGridSelectionService } from './selection/selection.service'; import { HammerGesturesManager } from '../core/touch'; -import { ColumnType } from './common/column.interface'; -import { RowType } from './common/row.interface'; import { GridSelectionMode } from './common/enums'; -import { GridType } from './common/grid.interface'; +import { CellType, ColumnType, GridType, IGX_GRID_BASE, RowType } from './common/grid.interface'; import { getCurrencySymbol, getLocaleCurrencyCode } from '@angular/common'; import { GridColumnDataType } from '../data-operations/data-util'; import { IgxRowDirective } from './row.directive'; import { ISearchInfo } from './common/events'; -import { CellType } from './common/cell.interface'; import { IgxGridCell } from './grid-public-cell'; +import { ISelectionNode } from './common/types'; /** * Providing reference to `IgxGridCellComponent`: @@ -76,7 +74,7 @@ export class IgxGridCellComponent implements OnInit, OnChanges, OnDestroy { * @internal */ @Input() - public intRow: IgxRowDirective; + public intRow: IgxRowDirective; /** * Gets the row of the cell. @@ -227,17 +225,6 @@ export class IgxGridCellComponent implements OnInit, OnChanges, OnDestroy { return this.intRow.gridID; } - /** - * Gets the grid of the cell. - * ```typescript - * let grid = this.cell.grid; - * ``` - * - * @memberof IgxGridCellComponent - */ - public get grid(): any { - return this.gridAPI.grid; - } /** * Gets the `index` of the row where the cell is stored. @@ -303,16 +290,28 @@ export class IgxGridCellComponent implements OnInit, OnChanges, OnDestroy { @HostBinding('attr.title') public get title() { - return this.editMode || this.cellTemplate ? '' : this.formatter ? this.formatter(this.value, this.rowData) : - this.column.dataType === GridColumnDataType.Percent ? - this.grid.percentPipe.transform(this.value, this.column.pipeArgs.digitsInfo, this.grid.locale) : - this.column.dataType === GridColumnDataType.Currency ? - this.grid.currencyPipe.transform(this.value, this.currencyCode, this.column.pipeArgs.display, - this.column.pipeArgs.digitsInfo, this.grid.locale) : - (this.column.dataType === GridColumnDataType.Date || this.column.dataType === GridColumnDataType.DateTime || - this.column.dataType === GridColumnDataType.Time) ? - this.grid.datePipe.transform(this.value, this.column.pipeArgs.format, this.column.pipeArgs.timezone, this.grid.locale) : - this.value; + if (this.editMode || this.cellTemplate) { + return ''; + } + + if (this.formatter) { + return this.formatter(this.value, this.rowData); + } + + const args = this.column.pipeArgs; + const locale = this.grid.locale; + + switch (this.column.dataType) { + case GridColumnDataType.Percent: + return formatPercent(this.value, locale, args.digitsInfo); + case GridColumnDataType.Currency: + return formatCurrency(this.value, this.currencyCode, args.display, args.digitsInfo, locale); + case GridColumnDataType.Date: + case GridColumnDataType.DateTime: + case GridColumnDataType.Time: + return formatDate(this.value, args.format, locale, args.timezone); + } + return this.value; } @HostBinding('class.igx-grid__td--bool-true') @@ -643,10 +642,6 @@ export class IgxGridCellComponent implements OnInit, OnChanges, OnDestroy { return getCurrencySymbol(this.currencyCode, 'wide', this.grid.locale); } - /** @hidden @internal @deprecated */ - public focused = this.active; - protected compositionStartHandler; - protected compositionEndHandler; protected _lastSearchInfo: ISearchInfo; private _highlight: IgxTextHighlightDirective; private _cellSelection = GridSelectionMode.multiple; @@ -654,22 +649,23 @@ export class IgxGridCellComponent implements OnInit, OnChanges, OnDestroy { constructor( protected selectionService: IgxGridSelectionService, - public gridAPI: GridBaseAPIService, + @Inject(IGX_GRID_BASE) public grid: GridType, public cdr: ChangeDetectorRef, - private element: ElementRef, + private element: ElementRef, protected zone: NgZone, private touchManager: HammerGesturesManager, - protected platformUtil: PlatformUtil) { } + protected platformUtil: PlatformUtil + ) { } /** * @hidden * @internal */ @HostListener('dblclick', ['$event']) - public onDoubleClick = (event: MouseEvent | HammerInput) => { + public onDoubleClick = (event: MouseEvent) => { if (event.type === 'doubletap') { // prevent double-tap to zoom on iOS - (event as HammerInput).preventDefault(); + event.preventDefault(); } if (this.editable && !this.editMode && !this.intRow.deleted && !this.grid.crudService.rowEditingBlocked) { this.grid.crudService.enterEditMode(this, event as Event); @@ -713,14 +709,6 @@ export class IgxGridCellComponent implements OnInit, OnChanges, OnDestroy { this.zone.runOutsideAngular(() => { this.nativeElement.addEventListener('pointerdown', this.pointerdown); this.addPointerListeners(this.cellSelectionMode); - // IE 11 workarounds - if (this.platformUtil.isIE) { - this.compositionStartHandler = () => this.grid.crudService.isInCompositionMode = true; - this.compositionEndHandler = () => this.grid.crudService.isInCompositionMode = false; - // Hitting Enter with IME submits and exits from edit mode instead of first closing the IME dialog - this.nativeElement.addEventListener('compositionstart', this.compositionStartHandler); - this.nativeElement.addEventListener('compositionend', this.compositionEndHandler); - } }); if (this.platformUtil.isIOS) { this.touchManager.addEventListener(this.nativeElement, 'doubletap', this.onDoubleClick, { @@ -737,10 +725,6 @@ export class IgxGridCellComponent implements OnInit, OnChanges, OnDestroy { this.zone.runOutsideAngular(() => { this.nativeElement.removeEventListener('pointerdown', this.pointerdown); this.removePointerListeners(this.cellSelectionMode); - if (this.platformUtil.isIE) { - this.nativeElement.removeEventListener('compositionstart', this.compositionStartHandler); - this.nativeElement.removeEventListener('compositionend', this.compositionEndHandler); - } }); this.touchManager.destroy(); } @@ -772,7 +756,7 @@ export class IgxGridCellComponent implements OnInit, OnChanges, OnDestroy { } if (this.editable && value) { if (this.grid.crudService.cellInEditMode) { - this.gridAPI.update_cell(this.grid.crudService.cell); + this.grid.gridAPI.update_cell(this.grid.crudService.cell); this.grid.crudService.endCellEdit(); } this.grid.crudService.enterEditMode(this); @@ -801,7 +785,7 @@ export class IgxGridCellComponent implements OnInit, OnChanges, OnDestroy { cell = this.grid.crudService.createCell(this); } cell.editValue = val; - this.gridAPI.update_cell(cell); + this.grid.gridAPI.update_cell(cell); this.grid.crudService.endCellEdit(); this.cdr.markForCheck(); } @@ -848,9 +832,6 @@ export class IgxGridCellComponent implements OnInit, OnChanges, OnDestroy { const dragMode = this.selectionService.pointerEnter(this.selectionNode, event); if (dragMode) { this.grid.cdr.detectChanges(); - if (this.platformUtil.isIE) { - this.grid.tbody.nativeElement.focus({ preventScroll: true }); - } } }; @@ -866,9 +847,6 @@ export class IgxGridCellComponent implements OnInit, OnChanges, OnDestroy { } if (this.selectionService.pointerUp(this.selectionNode, this.grid.rangeSelected)) { this.grid.cdr.detectChanges(); - if (this.platformUtil.isIE) { - this.grid.tbody.nativeElement.focus({ preventScroll: true }); - } } }; @@ -884,9 +862,8 @@ export class IgxGridCellComponent implements OnInit, OnChanges, OnDestroy { this._updateCRUDStatus(event); const activeElement = this.selectionService.activeElement; - const row = activeElement ? this.gridAPI.get_row_by_index(activeElement.row) : null; - if ((this.grid.crudService.rowEditingBlocked && row && this.intRow.rowID !== row.rowID) || - (this.grid.crudService.cell && this.grid.crudService.cellEditingBlocked)) { + const row = activeElement ? this.grid.gridAPI.get_row_by_index(activeElement.row) : null; + if (this.grid.crudService.rowEditingBlocked && row && this.intRow.rowID !== row.rowID) { return; } @@ -1020,6 +997,7 @@ export class IgxGridCellComponent implements OnInit, OnChanges, OnDestroy { private getCellType(useRow?: boolean): CellType { const rowID = useRow ? this.grid.createRow(this.intRow.index, this.intRow.rowData) : this.intRow.index; + // TODO: Fix types return new IgxGridCell(this.grid, rowID, this.column.field); } } diff --git a/projects/igniteui-angular/src/lib/grids/column-actions/column-actions-base.directive.ts b/projects/igniteui-angular/src/lib/grids/column-actions/column-actions-base.directive.ts index 27fc35a1461..ead1f465082 100644 --- a/projects/igniteui-angular/src/lib/grids/column-actions/column-actions-base.directive.ts +++ b/projects/igniteui-angular/src/lib/grids/column-actions/column-actions-base.directive.ts @@ -1,14 +1,14 @@ import { Directive } from '@angular/core'; -import { IgxColumnComponent } from '../columns/column.component'; +import { ColumnType } from '../common/grid.interface'; @Directive() export abstract class IgxColumnActionsBaseDirective { /** @hidden @internal */ public actionEnabledColumnsFilter: ( - value: IgxColumnComponent, + value: ColumnType, index: number, - array: IgxColumnComponent[] + array: ColumnType[] ) => boolean; /** @@ -22,10 +22,10 @@ export abstract class IgxColumnActionsBaseDirective { public abstract get uncheckAllLabel(): string; /** @hidden @internal */ - public abstract columnChecked(column: IgxColumnComponent): boolean; + public abstract columnChecked(column: ColumnType): boolean; /** @hidden @internal */ - public abstract toggleColumn(column: IgxColumnComponent): void; + public abstract toggleColumn(column: ColumnType): void; /** @hidden @internal */ public abstract uncheckAll(): void; diff --git a/projects/igniteui-angular/src/lib/grids/column-actions/column-actions.component.html b/projects/igniteui-angular/src/lib/grids/column-actions/column-actions.component.html index 54d572e9c6b..7e472da19eb 100644 --- a/projects/igniteui-angular/src/lib/grids/column-actions/column-actions.component.html +++ b/projects/igniteui-angular/src/lib/grids/column-actions/column-actions.component.html @@ -14,7 +14,7 @@

{
boolean, + _pipeTrigger: number + ): ColumnType[] { + if (!collection) { + return collection; + } + let copy = collection.slice(0); + if (copy.length && copy[0].grid.hasColumnLayouts) { + copy = copy.filter(c => c.columnLayout); + } + if (actionFilter) { + copy = copy.filter(actionFilter); + } + // Preserve the actionable collection for use in the component + this.columnActions.actionableColumns = copy as any; + return copy; + } +} + +@Pipe({ name: 'filterActionColumns' }) +export class IgxFilterActionColumnsPipe implements PipeTransform { + + constructor(@Inject(IgxColumnActionsComponent) protected columnActions: IgxColumnActionsComponent) { } + + public transform(collection: ColumnType[], filterCriteria: string, _pipeTrigger: number): ColumnType[] { + if (!collection) { + return collection; + } + let copy = collection.slice(0); + if (filterCriteria && filterCriteria.length > 0) { + const filterFunc = (c) => { + const filterText = c.header || c.field; + if (!filterText) { + return false; + } + return filterText.toLocaleLowerCase().indexOf(filterCriteria.toLocaleLowerCase()) >= 0 || + (c.children?.some(filterFunc) ?? false); + }; + copy = collection.filter(filterFunc); + } + // Preserve the filtered collection for use in the component + this.columnActions.filteredColumns = copy as any; + return copy; + } +} + +@Pipe({ name: 'sortActionColumns' }) +export class IgxSortActionColumnsPipe implements PipeTransform { + + public transform(collection: ColumnType[], displayOrder: ColumnDisplayOrder, _pipeTrigger: number): ColumnType[] { + if (displayOrder === ColumnDisplayOrder.Alphabetical) { + return collection.sort((a, b) => (a.header || a.field).localeCompare(b.header || b.field)); + } + return collection; } } diff --git a/projects/igniteui-angular/src/lib/grids/column-actions/column-actions.module.ts b/projects/igniteui-angular/src/lib/grids/column-actions/column-actions.module.ts index f94a5026ed9..b0657be02bf 100644 --- a/projects/igniteui-angular/src/lib/grids/column-actions/column-actions.module.ts +++ b/projects/igniteui-angular/src/lib/grids/column-actions/column-actions.module.ts @@ -2,14 +2,25 @@ import { NgModule } from '@angular/core'; import { IgxGridSharedModules } from '../common/shared.module'; import { IgxColumnHidingDirective } from './column-hiding.directive'; import { IgxColumnPinningDirective } from './column-pinning.directive'; -import { IgxColumnActionsComponent } from './column-actions.component'; +import { + IgxColumnActionEnabledPipe, + IgxColumnActionsComponent, + IgxFilterActionColumnsPipe, + IgxSortActionColumnsPipe +} from './column-actions.component'; import { IgxGridPipesModule } from '../common/grid-pipes.module'; +export * from './column-actions.component'; +export * from './column-hiding.directive'; +export * from './column-pinning.directive'; @NgModule({ declarations: [ IgxColumnHidingDirective, IgxColumnPinningDirective, IgxColumnActionsComponent, + IgxColumnActionEnabledPipe, + IgxFilterActionColumnsPipe, + IgxSortActionColumnsPipe ], imports: [ IgxGridSharedModules, @@ -18,7 +29,10 @@ import { IgxGridPipesModule } from '../common/grid-pipes.module'; exports: [ IgxColumnHidingDirective, IgxColumnPinningDirective, - IgxColumnActionsComponent + IgxColumnActionsComponent, + IgxColumnActionEnabledPipe, + IgxFilterActionColumnsPipe, + IgxSortActionColumnsPipe ] }) -export class IgxColumnActionsModule {} +export class IgxColumnActionsModule { } diff --git a/projects/igniteui-angular/src/lib/grids/column-actions/column-hiding.directive.ts b/projects/igniteui-angular/src/lib/grids/column-actions/column-hiding.directive.ts index 6a1c2f3c8c6..5878211756f 100644 --- a/projects/igniteui-angular/src/lib/grids/column-actions/column-hiding.directive.ts +++ b/projects/igniteui-angular/src/lib/grids/column-actions/column-hiding.directive.ts @@ -1,11 +1,9 @@ import { Directive, Inject } from '@angular/core'; +import { ColumnType } from '../common/grid.interface'; import { IgxColumnActionsBaseDirective } from './column-actions-base.directive'; -import { IgxColumnComponent } from '../columns/column.component'; import { IgxColumnActionsComponent } from './column-actions.component'; -@Directive({ - selector: '[igxColumnHiding]' -}) +@Directive({ selector: '[igxColumnHiding]' }) export class IgxColumnHidingDirective extends IgxColumnActionsBaseDirective { constructor( @@ -51,14 +49,14 @@ export class IgxColumnHidingDirective extends IgxColumnActionsBaseDirective { /** * @hidden @internal */ - public columnChecked(column: IgxColumnComponent): boolean { + public columnChecked(column: ColumnType): boolean { return !column.hidden; } /** * @hidden @internal */ - public toggleColumn(column: IgxColumnComponent) { + public toggleColumn(column: ColumnType) { column.toggleVisibility(); } diff --git a/projects/igniteui-angular/src/lib/grids/column-actions/column-pinning.directive.ts b/projects/igniteui-angular/src/lib/grids/column-actions/column-pinning.directive.ts index c0f268bcfd1..3915354113a 100644 --- a/projects/igniteui-angular/src/lib/grids/column-actions/column-pinning.directive.ts +++ b/projects/igniteui-angular/src/lib/grids/column-actions/column-pinning.directive.ts @@ -1,11 +1,9 @@ import { Directive, Inject } from '@angular/core'; +import { ColumnType } from '../common/grid.interface'; import { IgxColumnActionsBaseDirective } from './column-actions-base.directive'; -import { IgxColumnComponent } from '../columns/column.component'; import { IgxColumnActionsComponent } from './column-actions.component'; -@Directive({ - selector: '[igxColumnPinning]' -}) +@Directive({ selector: '[igxColumnPinning]' }) export class IgxColumnPinningDirective extends IgxColumnActionsBaseDirective { constructor( @@ -45,19 +43,19 @@ export class IgxColumnPinningDirective extends IgxColumnActionsBaseDirective { /** * @hidden @internal */ - public actionEnabledColumnsFilter = (c: IgxColumnComponent) => !c.disablePinning && !c.level; + public actionEnabledColumnsFilter = (c: ColumnType) => !c.disablePinning && !c.level; /** * @hidden @internal */ - public columnChecked(column: IgxColumnComponent): boolean { + public columnChecked(column: ColumnType): boolean { return column.pinned; } /** * @hidden @internal */ - public toggleColumn(column: IgxColumnComponent) { + public toggleColumn(column: ColumnType) { column.pinned = !column.pinned; } diff --git a/projects/igniteui-angular/src/lib/grids/columns/column-group.component.ts b/projects/igniteui-angular/src/lib/grids/columns/column-group.component.ts index 0ca274ff806..90f5dbd61db 100644 --- a/projects/igniteui-angular/src/lib/grids/columns/column-group.component.ts +++ b/projects/igniteui-angular/src/lib/grids/columns/column-group.component.ts @@ -13,7 +13,7 @@ import { import { IgxColumnComponent } from './column.component'; import { flatten } from '../../core/utils'; -import { CellType } from '../common/cell.interface'; +import { CellType } from '../common/grid.interface'; @Component({ diff --git a/projects/igniteui-angular/src/lib/grids/columns/column-layout.component.ts b/projects/igniteui-angular/src/lib/grids/columns/column-layout.component.ts index 0db444d25bc..153658c2c23 100644 --- a/projects/igniteui-angular/src/lib/grids/columns/column-layout.component.ts +++ b/projects/igniteui-angular/src/lib/grids/columns/column-layout.component.ts @@ -101,14 +101,14 @@ export class IgxColumnLayoutComponent extends IgxColumnGroupComponent implements public set hidden(value: boolean) { this._hidden = value; this.children.forEach(child => child.hidden = value); - if (this.grid && this.grid.columns && this.grid.columns.length > 0) { + if (this.grid && this.grid.columnList && this.grid.columnList.length > 0) { // reset indexes in case columns are hidden/shown runtime const columns = this.grid && this.grid.pinnedColumns && this.grid.unpinnedColumns ? - this.grid.pinnedColumns.concat(this.grid.unpinnedColumns) : []; + this.grid.pinnedColumns.concat(this.grid.unpinnedColumns) : []; if (!this._hidden && !columns.find(c => c.field === this.field)) { this.grid.resetColumnCollections(); } - this.grid.columns.filter(x => x.columnLayout).forEach(x => x.populateVisibleIndexes()); + this.grid.columnList.filter(x => x.columnLayout).forEach(x => x.populateVisibleIndexes()); } } @@ -155,8 +155,9 @@ export class IgxColumnLayoutComponent extends IgxColumnGroupComponent implements */ public populateVisibleIndexes() { this.childrenVisibleIndexes = []; - const grid = this.gridAPI.grid; - const columns = grid && grid.pinnedColumns && grid.unpinnedColumns ? grid.pinnedColumns.concat(grid.unpinnedColumns) : []; + const columns = this.grid?.pinnedColumns && this.grid?.unpinnedColumns + ? this.grid.pinnedColumns.concat(this.grid.unpinnedColumns) + : []; const orderedCols = columns .filter(x => !x.columnGroup && !x.hidden) .sort((a, b) => a.rowStart - b.rowStart || columns.indexOf(a.parent) - columns.indexOf(b.parent) || a.colStart - b.colStart); diff --git a/projects/igniteui-angular/src/lib/grids/columns/column.component.ts b/projects/igniteui-angular/src/lib/grids/columns/column.component.ts index b1f453a3c92..c667a0286ca 100644 --- a/projects/igniteui-angular/src/lib/grids/columns/column.component.ts +++ b/projects/igniteui-angular/src/lib/grids/columns/column.component.ts @@ -12,6 +12,7 @@ import { Output, EventEmitter, OnDestroy, + Inject, } from '@angular/core'; import { notifyChanges } from '../watch-changes'; import { WatchColumnChanges } from '../watch-changes'; @@ -27,12 +28,9 @@ import { } from '../../data-operations/filtering-condition'; import { ISortingStrategy, DefaultSortingStrategy } from '../../data-operations/sorting-strategy'; import { DisplayDensity } from '../../core/displayDensity'; -import { IgxGridBaseDirective } from '../grid-base.directive'; -import { IgxGridCellComponent } from '../cell.component'; import { IgxRowDirective } from '../row.directive'; import { FilteringExpressionsTree } from '../../data-operations/filtering-expressions-tree'; -import { GridBaseAPIService } from '../api.service'; -import { GridType } from '../common/grid.interface'; +import { CellType, ColumnType, GridType, IGX_GRID_BASE } from '../common/grid.interface'; import { IgxGridHeaderComponent } from '../headers/grid-header.component'; import { IgxGridFilteringCellComponent } from '../filtering/base/grid-filtering-cell.component'; import { IgxGridHeaderGroupComponent } from '../headers/grid-header-group.component'; @@ -49,10 +47,8 @@ import { } from './templates.directive'; import { MRLResizeColumnInfo, MRLColumnSizeInfo, IColumnPipeArgs } from './interfaces'; import { DropPosition } from '../moving/moving.service'; -import { IgxColumnGroupComponent } from './column-group.component'; import { IColumnVisibilityChangingEventArgs, IPinColumnCancellableEventArgs, IPinColumnEventArgs } from '../common/events'; import { isConstructor, PlatformUtil } from '../../core/utils'; -import { CellType } from '../common/cell.interface'; import { IgxGridCell } from '../grid-public-cell'; const DEFAULT_DATE_FORMAT = 'mediumDate'; @@ -73,7 +69,7 @@ const DEFAULT_DIGITS_INFO = '1.0-3'; selector: 'igx-column', template: `` }) -export class IgxColumnComponent implements AfterContentInit, OnDestroy { +export class IgxColumnComponent implements AfterContentInit, OnDestroy, ColumnType { /** * Sets/gets the `field` value. * ```typescript @@ -940,7 +936,7 @@ export class IgxColumnComponent implements AfterContentInit, OnDestroy { * @memberof IgxColumnComponent */ public get index(): number { - return this.grid.columns.indexOf(this); + return (this.grid as any)._columns.indexOf(this); } /** @@ -1113,17 +1109,6 @@ export class IgxColumnComponent implements AfterContentInit, OnDestroy { return '80'; } } - /** - * The reference to the `igx-grid` owner. - * ```typescript - * let gridComponent = this.column.grid; - * ``` - * - * @memberof IgxColumnComponent - */ - public get grid(): IgxGridBaseDirective { - return this.gridAPI.grid; - } /** * Returns a reference to the `bodyTemplate`. * ```typescript @@ -1261,7 +1246,7 @@ export class IgxColumnComponent implements AfterContentInit, OnDestroy { /** * Gets the cells of the column. * ```typescript - * let columnCells = this.column._cells; + * let columnCells = this.column.cells; * ``` * */ @@ -1281,7 +1266,7 @@ export class IgxColumnComponent implements AfterContentInit, OnDestroy { /** * @hidden @internal */ - public get _cells(): IgxGridCellComponent[] { + public get _cells(): CellType[] { return this.grid.rowList.filter((row) => row instanceof IgxRowDirective) .map((row) => { if (row._cells) { @@ -1660,7 +1645,7 @@ export class IgxColumnComponent implements AfterContentInit, OnDestroy { private _columnPipeArgs: IColumnPipeArgs = { digitsInfo: DEFAULT_DIGITS_INFO }; constructor( - public gridAPI: GridBaseAPIService, + @Inject(IGX_GRID_BASE) public grid: GridType, public cdr: ChangeDetectorRef, protected platform: PlatformUtil, ) { } @@ -1757,12 +1742,10 @@ export class IgxColumnComponent implements AfterContentInit, OnDestroy { /** * @hidden */ - public getGridTemplate(isRow: boolean, isIE: boolean): string { + public getGridTemplate(isRow: boolean): string { if (isRow) { const rowsCount = this.grid.multiRowLayoutRowSize; - return isIE ? - `(1fr)[${rowsCount}]` : - `repeat(${rowsCount},1fr)`; + return `repeat(${rowsCount},1fr)`; } else { return this.getColumnSizesString(this.children); } @@ -2007,7 +1990,7 @@ export class IgxColumnComponent implements AfterContentInit, OnDestroy { grid.resetCaches(); grid.notifyChanges(); if (this.columnLayoutChild) { - this.grid.columns.filter(x => x.columnLayout).forEach(x => x.populateVisibleIndexes()); + this.grid.columnList.filter(x => x.columnLayout).forEach(x => x.populateVisibleIndexes()); } this.grid.filteringService.refreshExpressions(); const eventArgs: IPinColumnEventArgs = { column: this, insertAtIndex: index, isPinned: true }; @@ -2086,7 +2069,7 @@ export class IgxColumnComponent implements AfterContentInit, OnDestroy { grid.notifyChanges(); if (this.columnLayoutChild) { - this.grid.columns.filter(x => x.columnLayout).forEach(x => x.populateVisibleIndexes()); + this.grid.columnList.filter(x => x.columnLayout).forEach(x => x.populateVisibleIndexes()); } this.grid.filteringService.refreshExpressions(); @@ -2108,8 +2091,7 @@ export class IgxColumnComponent implements AfterContentInit, OnDestroy { */ public move(index: number) { let target; - const grid = (this.grid as IgxGridBaseDirective); - let columns: Array = grid.columnList.filter(c => c.visibleIndex > -1); + let columns = (this.grid.columnList as QueryList).filter(c => c.visibleIndex > -1); // grid last visible index const li = columns.map(c => c.visibleIndex).reduce((a, b) => Math.max(a, b)); const parent = this.parent; @@ -2140,7 +2122,7 @@ export class IgxColumnComponent implements AfterContentInit, OnDestroy { } const pos = isPreceding ? DropPosition.AfterDropTarget : DropPosition.BeforeDropTarget; - grid.moveColumn(this, target as IgxColumnComponent, pos); + this.grid.moveColumn(this, target as IgxColumnComponent, pos); } /** @@ -2242,7 +2224,7 @@ export class IgxColumnComponent implements AfterContentInit, OnDestroy { /** * @hidden */ - public getAutoSize(byHeader = false) { + public getAutoSize(byHeader = false): string { const size = !byHeader ? this.getLargestCellWidth() : (Object.values(this.getHeaderCellWidths()).reduce((a, b) => a + b) + 'px'); const isPercentageWidth = this.width && typeof this.width === 'string' && this.width.indexOf('%') !== -1; @@ -2384,14 +2366,13 @@ export class IgxColumnComponent implements AfterContentInit, OnDestroy { * @internal */ protected cacheCalcWidth(): any { - const grid = this.gridAPI.grid; const colWidth = this.width; const isPercentageWidth = colWidth && typeof colWidth === 'string' && colWidth.indexOf('%') !== -1; if (isPercentageWidth) { - this._calcWidth = parseFloat(colWidth) / 100 * grid.calcWidth; + this._calcWidth = parseFloat(colWidth) / 100 * this.grid.calcWidth; } else if (!colWidth) { // no width - this._calcWidth = this.defaultWidth || grid.getPossibleColumnWidth(); + this._calcWidth = this.defaultWidth || this.grid.getPossibleColumnWidth(); } else { this._calcWidth = this.width; } diff --git a/projects/igniteui-angular/src/lib/grids/columns/interfaces.ts b/projects/igniteui-angular/src/lib/grids/columns/interfaces.ts index f6a7ea4daf2..1d22ac220b8 100644 --- a/projects/igniteui-angular/src/lib/grids/columns/interfaces.ts +++ b/projects/igniteui-angular/src/lib/grids/columns/interfaces.ts @@ -1,4 +1,4 @@ -import { IgxColumnComponent } from './column.component'; +import { ColumnType } from '../common/grid.interface'; /** @@ -6,7 +6,7 @@ import { IgxColumnComponent } from './column.component'; * @internal */ export interface MRLColumnSizeInfo { - ref: IgxColumnComponent; + ref: ColumnType; width: number; colSpan: number; colEnd: number; @@ -18,7 +18,7 @@ export interface MRLColumnSizeInfo { * @internal */ export interface MRLResizeColumnInfo { - target: IgxColumnComponent; + target: ColumnType; spanUsed: number; } diff --git a/projects/igniteui-angular/src/lib/grids/common/cell.interface.ts b/projects/igniteui-angular/src/lib/grids/common/cell.interface.ts deleted file mode 100644 index 27699224295..00000000000 --- a/projects/igniteui-angular/src/lib/grids/common/cell.interface.ts +++ /dev/null @@ -1,21 +0,0 @@ -import { IgxColumnComponent } from '../columns/column.component'; -import { IgxGridComponent } from '../grid/grid.component'; -import { IgxHierarchicalGridComponent } from '../hierarchical-grid/hierarchical-grid.component'; -import { IgxTreeGridComponent } from '../tree-grid/tree-grid.component'; -import { RowType } from './row.interface'; - -export interface CellType { - value: any; - editValue: any; - selected: boolean; - active: boolean; - editable: boolean; - editMode: boolean; - column: IgxColumnComponent; - row: RowType; - grid: IgxGridComponent | IgxTreeGridComponent | IgxHierarchicalGridComponent; - id: { rowID: any; columnID: number; rowIndex: number }; - width: string; - update: (value: any) => void; -} - diff --git a/projects/igniteui-angular/src/lib/grids/common/column.interface.ts b/projects/igniteui-angular/src/lib/grids/common/column.interface.ts deleted file mode 100644 index 802351afb7e..00000000000 --- a/projects/igniteui-angular/src/lib/grids/common/column.interface.ts +++ /dev/null @@ -1,53 +0,0 @@ -import { TemplateRef } from '@angular/core'; -import { GridColumnDataType } from '../../data-operations/data-util'; -import { ISortingStrategy } from '../../data-operations/sorting-strategy'; -import { FilteringExpressionsTree } from '../../data-operations/filtering-expressions-tree'; -import { IColumnPipeArgs } from '../columns/interfaces'; - -/** - * @hidden - * @internal - */ -export interface ColumnType { - field: string; - header?: string; - index: number; - dataType: GridColumnDataType; - inlineEditorTemplate: TemplateRef; - visibleIndex: number; - editable: boolean; - resizable: boolean; - searchable: boolean; - columnGroup: boolean; - movable: boolean; - groupable: boolean; - sortable: boolean; - filterable: boolean; - hidden: boolean; - disablePinning: boolean; - sortStrategy: ISortingStrategy; - filteringIgnoreCase: boolean; - filteringExpressionsTree: FilteringExpressionsTree; - hasSummary: boolean; - summaries: any; - pinned: boolean; - selected: boolean; - selectable: boolean; - level: number; - rowStart: number; - rowEnd: number; - colStart: number; - colEnd: number; - gridRowSpan: number; - gridColumnSpan: number; - columnLayoutChild: boolean; - width: string; - topLevelParent?: ColumnType; - parent?: ColumnType; - pipeArgs: IColumnPipeArgs; - hasNestedPath: boolean; - defaultTimeFormat: string; - defaultDateTimeFormat: string; - additionalTemplateContext: any; - getGridTemplate(isRow: boolean, isIE: boolean): string; -} diff --git a/projects/igniteui-angular/src/lib/grids/common/crud.service.ts b/projects/igniteui-angular/src/lib/grids/common/crud.service.ts index ca002b6a0fe..524187b2fb6 100644 --- a/projects/igniteui-angular/src/lib/grids/common/crud.service.ts +++ b/projects/igniteui-angular/src/lib/grids/common/crud.service.ts @@ -1,8 +1,7 @@ import { Injectable } from '@angular/core'; import { first } from 'rxjs/operators'; -import { IGridEditDoneEventArgs, IGridEditEventArgs, IgxGridBaseDirective, IRowDataEventArgs } from '../grid/public_api'; -import { IgxRowDirective } from '../row.directive'; -import { GridType } from './grid.interface'; +import { IGridEditDoneEventArgs, IGridEditEventArgs, IRowDataEventArgs } from '../common/events'; +import { GridType, RowType } from './grid.interface'; import { Subject } from 'rxjs'; import { isEqual } from '../../core/utils'; @@ -11,7 +10,7 @@ export class IgxEditRow { public state: any; public newData: any; - constructor(public id: any, public index: number, public data: any, public grid: IgxGridBaseDirective & GridType) { } + constructor(public id: any, public index: number, public data: any, public grid: GridType) { } public createEditEventArgs(includeNewValue = true, event?: Event): IGridEditEventArgs { const args: IGridEditEventArgs = { @@ -58,7 +57,7 @@ export class IgxAddRow extends IgxEditRow { public index: number, public data: any, public recordRef: any, - public grid: IgxGridBaseDirective & GridType) { + public grid: GridType) { super(id, index, data, grid); } @@ -94,7 +93,7 @@ export class IgxCell { public value: any, public editValue: any, public rowData: any, - public grid: IgxGridBaseDirective & GridType) { } + public grid: GridType) { } public castToNumber(value: any): any { if (this.column.dataType === 'number' && !this.column.inlineEditorTemplate) { @@ -142,7 +141,7 @@ export class IgxCell { } export class IgxCellCrudState { - public grid: IgxGridBaseDirective & GridType; + public grid: GridType; public cell: IgxCell | null = null; public row: IgxEditRow | null = null; public isInCompositionMode = false; @@ -266,7 +265,7 @@ export class IgxRowCrudState extends IgxCellCrudState { return this.grid.primaryKey; } - public get rowInEditMode(): IgxRowDirective { + public get rowInEditMode(): RowType { const editRowState = this.row; return editRowState !== null ? this.grid.rowList.find(e => e.rowID === editRowState.id) : null; } @@ -430,7 +429,7 @@ export class IgxRowAddCrudState extends IgxRowCrudState { /** * @hidden @internal */ - public createAddRow(parentRow: IgxRowDirective, asChild?: boolean) { + public createAddRow(parentRow: RowType, asChild?: boolean) { this.createAddRowParent(parentRow, asChild); const newRec = this.grid.getEmptyRecordObjectFor(parentRow); @@ -441,9 +440,10 @@ export class IgxRowAddCrudState extends IgxRowCrudState { /** * @hidden @internal */ - public createAddRowParent(row: IgxRowDirective, newRowAsChild?: boolean) { + public createAddRowParent(row: RowType, newRowAsChild?: boolean) { const rowIndex = row ? row.index : -1; - const rowId = row ? row.rowID : null; + const rowId = row ? row.rowID : (rowIndex >= 0 ? this.grid.rowList.last.rowID : null); + const isInPinnedArea = this.grid.isRecordPinnedByViewIndex(rowIndex); const pinIndex = this.grid.pinnedRecords.findIndex(x => x[this.primaryKey] === rowId); const unpinIndex = this.grid.getUnpinnedIndexById(rowId); @@ -563,7 +563,7 @@ export class IgxGridCRUDService extends IgxRowAddCrudState { * @param asChild Specifies if the new row should be added as a child to a tree row. * @param event Base event that triggered the add row mode. */ - public enterAddRowMode(parentRow: IgxRowDirective, asChild?: boolean, event?: Event) { + public enterAddRowMode(parentRow: RowType, asChild?: boolean, event?: Event) { if (!this.rowEditing && (this.grid.primaryKey === undefined || this.grid.primaryKey === null)) { console.warn('The grid must use row edit mode to perform row adding! Please set rowEditable to true.'); return; @@ -588,7 +588,9 @@ export class IgxGridCRUDService extends IgxRowAddCrudState { this.grid.navigateTo(this.row.index, -1); // when selecting the dummy row we need to adjust for top pinned rows const indexAdjust = this.grid.isRowPinningToTop && !this.addRowParent.isPinned ? this.grid.pinnedRows.length : 0; - const dummyRow = this.grid.gridAPI.get_row_by_index(this.row.index + indexAdjust); + + // TODO: Type this without shoving a bunch of internal properties in the row type + const dummyRow = this.grid.gridAPI.get_row_by_index(this.row.index + indexAdjust) as any; dummyRow.triggerAddAnimation(); dummyRow.cdr.detectChanges(); dummyRow.addAnimationEnd.pipe(first()).subscribe(() => { diff --git a/projects/igniteui-angular/src/lib/grids/common/events.ts b/projects/igniteui-angular/src/lib/grids/common/events.ts index b7007db10b6..962da9c694d 100644 --- a/projects/igniteui-angular/src/lib/grids/common/events.ts +++ b/projects/igniteui-angular/src/lib/grids/common/events.ts @@ -1,16 +1,10 @@ import { IBaseEventArgs, CancelableEventArgs } from '../../core/utils'; -import { IgxBaseExporter, IgxExporterOptionsBase } from '../../services/public_api'; import { GridKeydownTargetType } from './enums'; -import { IgxDragDirective } from '../../directives/drag-drop/drag-drop.directive'; -import { GridType } from './grid.interface'; -import { IgxColumnComponent } from '../columns/column.component'; -import { IgxGridBaseDirective } from '../grid-base.directive'; -import { ColumnType } from './column.interface'; -import { ISortingExpression } from '../../data-operations/sorting-expression.interface'; +import { CellType, ColumnType, GridType, RowType } from './grid.interface'; import { IFilteringExpressionsTree } from '../../data-operations/filtering-expressions-tree'; -import { RowType } from './row.interface'; -import { CellType } from './cell.interface'; -export { GridSelectionRange } from '../selection/selection.service'; +import { IgxBaseExporter } from '../../services/exporter-common/base-export-service'; +import { IgxExporterOptionsBase } from '../../services/exporter-common/exporter-options-base'; +import { ISortingExpression } from '../../data-operations/sorting-strategy'; export interface IGridClipboardEvent { data: any[]; @@ -34,7 +28,7 @@ export interface IGridEditDoneEventArgs extends IBaseEventArgs { newValue?: any; event?: Event; column?: ColumnType; - owner?: IgxGridBaseDirective & GridType; + owner?: GridType; isAddRow?: boolean; } @@ -47,7 +41,7 @@ export interface IGridEditEventArgs extends CancelableEventArgs, IGridEditDoneEv * `isPinned` returns the actual pin state of the column after the operation completed. */ export interface IPinColumnEventArgs extends IBaseEventArgs { - column: IgxColumnComponent; + column: ColumnType; /** * If pinned, specifies at which index in the pinned area the column is inserted. * If unpinned, specifies at which index in the unpinned area the column is inserted. @@ -74,7 +68,7 @@ export interface IRowDataEventArgs extends IBaseEventArgs { } export interface IColumnResizeEventArgs extends IBaseEventArgs { - column: IgxColumnComponent; + column: ColumnType; prevWidth: string; newWidth: string; } @@ -107,24 +101,24 @@ export interface ISearchInfo { } export interface IGridToolbarExportEventArgs extends IBaseEventArgs { - grid: IgxGridBaseDirective; + grid: GridType; exporter: IgxBaseExporter; options: IgxExporterOptionsBase; cancel: boolean; } export interface IColumnMovingStartEventArgs extends IBaseEventArgs { - source: IgxColumnComponent; + source: ColumnType; } export interface IColumnMovingEventArgs extends IBaseEventArgs { - source: IgxColumnComponent; + source: ColumnType; cancel: boolean; } export interface IColumnMovingEndEventArgs extends IBaseEventArgs { - source: IgxColumnComponent; - target: IgxColumnComponent; + source: ColumnType; + target: ColumnType; cancel: boolean; } @@ -141,14 +135,14 @@ export interface ICellPosition { } export interface IRowDragEndEventArgs extends IBaseEventArgs { - dragDirective: IgxDragDirective; + dragDirective: any; dragData: RowType; dragElement: HTMLElement; animation: boolean; } export interface IRowDragStartEventArgs extends CancelableEventArgs, IBaseEventArgs { - dragDirective: IgxDragDirective; + dragDirective: any; dragData: RowType; dragElement: HTMLElement; } @@ -194,7 +188,7 @@ export interface IGridScrollEventArgs extends IBaseEventArgs { */ export interface IColumnToggledEventArgs extends IBaseEventArgs { /** The column that is toggled. */ - column: IgxColumnComponent; + column: ColumnType; /** The checked state after the action. */ checked: boolean; } diff --git a/projects/igniteui-angular/src/lib/grids/common/grid-pipes.module.ts b/projects/igniteui-angular/src/lib/grids/common/grid-pipes.module.ts index 6bbdcadeec4..3e39faddfbf 100644 --- a/projects/igniteui-angular/src/lib/grids/common/grid-pipes.module.ts +++ b/projects/igniteui-angular/src/lib/grids/common/grid-pipes.module.ts @@ -10,20 +10,16 @@ import { IgxGridPaginatorOptionsPipe, IgxHasVisibleColumnsPipe, IgxGridRowPinningPipe, - IgxColumnActionEnabledPipe, - IgxFilterActionColumnsPipe, - IgxSortActionColumnsPipe, IgxGridDataMapperPipe, IgxStringReplacePipe, IgxGridTransactionStatePipe, IgxColumnFormatterPipe, IgxSummaryFormatterPipe, IgxGridAddRowPipe, - IgxHeaderGroupWidthPipe, IgxGridRowClassesPipe, IgxGridRowStylesPipe, - IgxHeaderGroupStylePipe } from './pipes'; +export * from './pipes'; @NgModule({ declarations: [ @@ -36,19 +32,14 @@ import { IgxGridPaginatorOptionsPipe, IgxHasVisibleColumnsPipe, IgxGridRowPinningPipe, - IgxColumnActionEnabledPipe, - IgxFilterActionColumnsPipe, - IgxSortActionColumnsPipe, IgxGridDataMapperPipe, IgxStringReplacePipe, IgxGridTransactionStatePipe, IgxGridAddRowPipe, IgxColumnFormatterPipe, IgxSummaryFormatterPipe, - IgxHeaderGroupWidthPipe, IgxGridRowClassesPipe, - IgxGridRowStylesPipe, - IgxHeaderGroupStylePipe + IgxGridRowStylesPipe ], exports: [ IgxGridFilterConditionPipe, @@ -60,19 +51,14 @@ import { IgxGridPaginatorOptionsPipe, IgxHasVisibleColumnsPipe, IgxGridRowPinningPipe, - IgxColumnActionEnabledPipe, - IgxFilterActionColumnsPipe, - IgxSortActionColumnsPipe, IgxGridDataMapperPipe, IgxStringReplacePipe, IgxGridTransactionStatePipe, IgxGridAddRowPipe, IgxColumnFormatterPipe, IgxSummaryFormatterPipe, - IgxHeaderGroupWidthPipe, IgxGridRowClassesPipe, - IgxGridRowStylesPipe, - IgxHeaderGroupStylePipe + IgxGridRowStylesPipe ], imports: [ CommonModule diff --git a/projects/igniteui-angular/src/lib/grids/common/grid.interface.ts b/projects/igniteui-angular/src/lib/grids/common/grid.interface.ts index f12220cda4b..1b52185b0fe 100644 --- a/projects/igniteui-angular/src/lib/grids/common/grid.interface.ts +++ b/projects/igniteui-angular/src/lib/grids/common/grid.interface.ts @@ -1,20 +1,258 @@ -import { FilterMode } from './enums'; -import { DisplayDensity } from '../../core/displayDensity'; -import { EventEmitter } from '@angular/core'; -import { IFilteringExpressionsTree } from '../../data-operations/filtering-expressions-tree'; +import { FilterMode, GridPagingMode, GridSelectionMode, GridSummaryCalculationMode, GridSummaryPosition } from './enums'; +import { + ISearchInfo, IGridCellEventArgs, IRowSelectionEventArgs, IColumnSelectionEventArgs, IGridEditEventArgs, + IPinColumnCancellableEventArgs, IColumnVisibilityChangedEventArgs, IColumnVisibilityChangingEventArgs, + IRowDragEndEventArgs, IColumnMovingStartEventArgs, IColumnMovingEndEventArgs, + IGridEditDoneEventArgs, IRowDataEventArgs, IGridKeydownEventArgs, IRowDragStartEventArgs, + IColumnMovingEventArgs, IPinColumnEventArgs, + IActiveNodeChangeEventArgs, + ICellPosition, IFilteringEventArgs, IColumnResizeEventArgs, IRowToggleEventArgs, IGridToolbarExportEventArgs +} from '../common/events'; +import { DisplayDensity, IDensityChangedEventArgs } from '../../core/displayDensity'; +import { ChangeDetectorRef, ElementRef, EventEmitter, InjectionToken, QueryList, TemplateRef, ViewContainerRef } from '@angular/core'; +import { FilteringExpressionsTree, IFilteringExpressionsTree } from '../../data-operations/filtering-expressions-tree'; import { IGridResourceStrings } from '../../core/i18n/grid-resources'; -import { ISortingExpression } from '../../data-operations/sorting-expression.interface'; import { IGroupingExpression } from '../../data-operations/grouping-expression.interface'; -import { TransactionService, Transaction, State } from '../../services/public_api'; -import { ITreeGridRecord } from '../tree-grid/public_api'; import { IGroupByRecord } from '../../data-operations/groupby-record.interface'; import { IGroupByExpandState } from '../../data-operations/groupby-expand-state.interface'; +import { IgxPaginatorComponent } from '../../paginator/paginator.component'; +import { IgxCell, IgxEditRow } from './crud.service'; +import { GridSelectionRange } from './types'; +import { FilteringLogic } from '../../data-operations/filtering-expression.interface'; +import { IFilteringStrategy } from '../../data-operations/filtering-strategy'; +import { DropPosition, IgxColumnMovingService } from '../moving/moving.service'; +import { IgxOverlayOutletDirective, IgxToggleDirective } from '../../directives/toggle/toggle.directive'; +import { Observable, Subject } from 'rxjs'; +import { ITreeGridRecord } from '../tree-grid/tree-grid.interfaces'; +import { State, Transaction, TransactionService } from '../../services/transaction/transaction'; +import { GridColumnDataType } from '../../data-operations/data-util'; +import { IgxFilteringOperand } from '../../data-operations/filtering-condition'; +import { IColumnPipeArgs, MRLResizeColumnInfo } from '../columns/interfaces'; +import { IgxSummaryResult } from '../summaries/grid-summary'; +import { ISortingExpression, ISortingStrategy } from '../../data-operations/sorting-strategy'; +import { IGridGroupingStrategy, IGridSortingStrategy } from './strategy'; +import { IForOfState, IgxGridForOfDirective } from '../../directives/for-of/for_of.directive'; +import { OverlaySettings } from '../../services/overlay/utilities'; +import { IPinningConfig } from '../grid.common'; + +export const IGX_GRID_BASE = new InjectionToken('IgxGridBaseToken'); +export const IGX_GRID_SERVICE_BASE = new InjectionToken('IgxGridServiceBaseToken'); + +export interface IPathSegment { + rowID: any; + rowIslandKey: string; +} export interface IGridDataBindable { data: any[] | null; filteredData: any[]; } +export interface CellType { + value: any; + editValue: any; + selected: boolean; + active: boolean; + editable: boolean; + editMode: boolean; + nativeElement?: HTMLElement; + column: ColumnType; + row: RowType; + grid: GridType; + id: { rowID: any; columnID: number; rowIndex: number }; + cellID?: any; + readonly?: boolean; + title?: any; + width: string; + visibleColumnIndex?: number; + update: (value: any) => void; + setEditMode?(value: boolean): void; + calculateSizeToFit?(range: any): number; + activate?(event: FocusEvent | KeyboardEvent): void; + onDoubleClick?(event: MouseEvent): void; + onClick?(event: MouseEvent): void; +} + +export interface RowType { + nativeElement?: HTMLElement; + index: number; + viewIndex: number; + isGroupByRow?: boolean; + isSummaryRow?: boolean; + summaries?: Map; + groupRow?: IGroupByRecord; + /** @deprecated in version 12.0.0 + * Deprecated, will be removed. key is the new property */ + rowID?: any; + key?: any; + /** @deprecated in version 12.0.0 + * Deprecated, will be removed. data is the new property */ + rowData?: any; + data?: any; + cells?: QueryList | CellType[]; + disabled?: boolean; + virtDirRow?: IgxGridForOfDirective; + pinned?: boolean; + selected?: boolean; + expanded?: boolean; + deleted?: boolean; + inEditMode?: boolean; + children?: RowType[]; + parent?: RowType; + hasChildren?: boolean; + treeRow? : ITreeGridRecord; + addRowUI?: any; + focused?: boolean; + grid: GridType; + onRowSelectorClick?: (event) => void; + onClick?: (event: MouseEvent) => void; + beginAddRow?: () => void; + update?: (value: any) => void; + delete?: () => any; + pin?: () => void; + unpin?: () => void; +} + +export interface ColumnType { + grid: GridType; + children: QueryList; + allChildren: ColumnType[]; + // TYPE + headerGroup: any; + // TYPE + headerCell: any; + + headerTemplate: TemplateRef; + collapsibleIndicatorTemplate?: TemplateRef; + headerClasses: any; + headerStyles: any; + headerGroupClasses: any; + headerGroupStyles: any; + + calcWidth: any; + minWidthPx: number; + maxWidthPx: number; + minWidth: string; + maxWidth: string; + minWidthPercent: number; + maxWidthPercent: number; + + field: string; + header?: string; + index: number; + dataType: GridColumnDataType; + inlineEditorTemplate: TemplateRef; + visibleIndex: number; + collapsible?: boolean; + editable: boolean; + resizable: boolean; + searchable: boolean; + columnGroup: boolean; + movable: boolean; + groupable: boolean; + sortable: boolean; + filterable: boolean; + hidden: boolean; + disablePinning: boolean; + disableHiding: boolean; + sortStrategy: ISortingStrategy; + sortingIgnoreCase: boolean; + filterCell: any; + filters: IgxFilteringOperand; + filteringIgnoreCase: boolean; + filteringExpressionsTree: FilteringExpressionsTree; + hasSummary: boolean; + summaries: any; + pinned: boolean; + expanded: boolean; + selected: boolean; + selectable: boolean; + columnLayout: boolean; + level: number; + rowStart: number; + rowEnd: number; + colStart: number; + colEnd: number; + gridRowSpan: number; + gridColumnSpan: number; + columnLayoutChild: boolean; + width: string; + topLevelParent?: ColumnType; + parent?: ColumnType; + pipeArgs: IColumnPipeArgs; + hasNestedPath: boolean; + defaultTimeFormat: string; + defaultDateTimeFormat: string; + additionalTemplateContext: any; + isLastPinned: boolean; + isFirstPinned: boolean; + applySelectableClass: boolean; + title: string; + groupingComparer: (a: any, b: any) => number; + + filterCellTemplate: TemplateRef; + + move(index: number): void; + getAutoSize(): string; + getResizableColUnderEnd(): MRLResizeColumnInfo[]; + getCellWidth(): string; + getGridTemplate(isRow: boolean): string; + toggleVisibility(value?: boolean): void; + formatter(value: any, rowData?: any): any; + populateVisibleIndexes?(): void; +} + +export interface GridServiceType { + + grid: GridType; + crudService: any; + cms: IgxColumnMovingService; + + get_data(): any[]; + get_all_data(includeTransactions?: boolean): any[]; + get_column_by_name(name: string): ColumnType; + getRowData(id: any): any; + get_rec_by_id(id: any): any; + get_row_id(rowData: any): any; + get_row_by_index(rowSelector: any): RowType; + get_row_by_key(rowSelector: any): RowType; + get_rec_index_by_id(pk: string | number, dataCollection?: any[]): number; + get_row_index_in_data(rowID: any, dataCollection?: any[]): number; + get_cell_by_key(rowSelector: any, field: string): CellType; + get_cell_by_index(rowIndex: number, columnID: number | string): CellType; + get_cell_by_visible_index(rowIndex: number, columnIndex: number); + set_grouprow_expansion_state?(groupRow: IGroupByRecord, value: boolean): void; + row_deleted_transaction(id: any): boolean; + addRowToData(rowData: any, parentID?: any): void; + deleteRowById(id: any): any; + get_row_expansion_state(id: any): boolean; + set_row_expansion_state(id: any, expanded: boolean, event?: Event): void; + get_summary_data(): any[]; + + prepare_sorting_expression(stateCollections: Array>, expression: ISortingExpression): void; + sort(expression: ISortingExpression): void; + sort_multiple(expressions: ISortingExpression[]): void; + clear_sort(fieldName: string): void; + + filterDataByExpressions(expressionsTree: IFilteringExpressionsTree): any[]; + + update_cell(cell: IgxCell): IGridEditEventArgs; + update_row(row: IgxEditRow, value: any, event?: Event): IGridEditEventArgs; + + expand_path_to_record?(record: ITreeGridRecord): void; + get_selected_children?(record: ITreeGridRecord, selectedRowIDs: any[]): void; + get_rec_id_by_index?(index: number, dataCollection?: any[]): any; + get_groupBy_record_id?(gRow: IGroupByRecord): string; + remove_grouping_expression?(fieldName: string): void; + clear_groupby?(field: string | any): void; + getParentRowId?(child: GridType): any; + getChildGrids?(inDepth?: boolean): GridType[]; + getChildGrid?(path: IPathSegment[]): GridType; + // XXX: Fix type + unsetChildRowIsland?(rowIsland: any): void; +} + + /** * An interface describing a Grid type */ @@ -30,11 +268,34 @@ export interface GridType extends IGridDataBindable { primaryKey: any; id: string; renderedRowHeight: number; + pipeTrigger: number; summaryPipeTrigger: number; hasColumnLayouts: boolean; + isLoading: boolean; + + gridAPI: GridServiceType; + filterMode: FilterMode; + // TYPE + theadRow: any; + groupArea: any; + filterCellList: any[]; + filteringRow: any; + actionStrip: any; + resizeLine: any; + + tfoot: ElementRef; + paginator: IgxPaginatorComponent; + paginatorList?: QueryList; + crudService: any; + summaryService: any; + + + + virtualizationState: IForOfState; + // TYPE selectionService: any; navigation: any; filteringService: any; @@ -46,35 +307,189 @@ export interface GridType extends IGridDataBindable { columnInDrag: any; pinnedWidth: number; unpinnedWidth: number; + summariesMargin: number; + headSelectorBaseAriaLabel: string; + + hasVisibleColumns: boolean; + hasExpandableChildren?: boolean; + showExpandAll?: boolean; + + hiddenColumnsCount: number; + pinnedColumnsCount: number; + iconTemplate?: TemplateRef; + groupRowTemplate?: TemplateRef; + groupByRowSelectorTemplate?: TemplateRef; + rowLoadingIndicatorTemplate?: TemplateRef; + headSelectorTemplate: TemplateRef; + rowSelectorTemplate: TemplateRef; + sortHeaderIconTemplate: TemplateRef; + sortAscendingHeaderIconTemplate: TemplateRef; + sortDescendingHeaderIconTemplate: TemplateRef; + headerCollapseIndicatorTemplate: TemplateRef; + headerExpandIndicatorTemplate: TemplateRef; dragIndicatorIconTemplate: any; dragIndicatorIconBase: any; + disableTransitions: boolean; + currencyPositionLeft: boolean; + columnWidthSetByUser: boolean; + headerFeaturesWidth: number; calcHeight: number; + calcWidth: number; + outerWidth: number; + rowHeight: number; + multiRowLayoutRowSize: number; defaultHeaderGroupMinWidth: any; + maxLevelHeaderDepth: number; + defaultRowHeight: number; + _baseFontSize?: number; scrollSize: number; + pinning: IPinningConfig; + expansionStates: Map; parentVirtDir: any; tbody: any; verticalScrollContainer: any; dataRowList: any; rowList: any; - columnList: any; - columns: any; - unpinnedColumns: any; - pinnedColumns: any; + columnList: QueryList; + columns: ColumnType[]; + visibleColumns: ColumnType[]; + unpinnedColumns: ColumnType[]; + pinnedColumns: ColumnType[]; + headerCellList: any[]; + headerGroups: any[]; + headerGroupsList: any[]; summariesRowList: any; headerContainer: any; + isCellSelectable: boolean; + isMultiRowSelectionEnabled: boolean; + hasPinnedRecords: boolean; + pinnedRecordsCount: number; + pinnedRecords: any[]; + unpinnedRecords: any[]; + pinnedDataView: any[]; + pinnedRows: any[]; dataView: any[]; + _filteredUnpinnedData: any[]; + _filteredSortedUnpinnedData: any[]; + filteredSortedData: any[]; + dataWithAddedInTransactionRows: any[]; transactions: TransactionService; defaultSummaryHeight: number; + rowEditingOverlay: IgxToggleDirective; + totalRowsCountAfterFilter: number; + _totalRecords: number; + + pagingMode: GridPagingMode; + pagingState: any; rowEditTabs: any; + lastSearchInfo: ISearchInfo; + page: number; + perPage: number; + dragRowID: any; + rowDragging: boolean; + evenRowCSS: string; + oddRowCSS: string; firstEditableColumnIndex: number; lastEditableColumnIndex: number; + isRowPinningToTop: boolean; hasDetails: boolean; + hasSummarizedColumns: boolean; + hasColumnGroups: boolean; + hasEditableColumns: boolean; + uniqueColumnValuesStrategy: (column: ColumnType, tree: FilteringExpressionsTree, done: (values: any[]) => void) => void; + + cdr: ChangeDetectorRef; + document: Document; + rowExpandedIndicatorTemplate: TemplateRef; + rowCollapsedIndicatorTemplate: TemplateRef; + excelStyleHeaderIconTemplate: TemplateRef; + + selectRowOnClick: boolean; + cellSelection: GridSelectionMode; + rowSelection: GridSelectionMode; + columnSelection: GridSelectionMode; + summaryCalculationMode: GridSummaryCalculationMode; + summaryPosition: GridSummaryPosition; + + // XXX: Work around till we fixed the injection tokens + lastChildGrid?: GridType; + toolbarOutlet?: ViewContainerRef; + paginatorOutlet?: ViewContainerRef; + flatData?: any[] | null; + childRow?: any; + expansionDepth?: number; + childDataKey?: any; + foreignKey?: any; + cascadeOnDelete?: boolean; + loadChildrenOnDemand?: (parentID: any, done: (children: any[]) => void) => void; + hasChildrenKey?: any; + loadingRows?: Set; + parent?: GridType; + highlightedRowID?: any; + hgridAPI?: GridServiceType; + updateOnRender?: boolean; + childLayoutKeys?: any[]; + childLayoutList?: QueryList; + rootGrid?: GridType; + processedRootRecords?: ITreeGridRecord[]; + rootRecords?: ITreeGridRecord[]; + records?: Map; + processedExpandedFlatData?: any[] | null; + processedRecords?: Map; + + activeNodeChange: EventEmitter; + gridKeydown: EventEmitter; + cellClick: EventEmitter; + doubleClick: EventEmitter; + contextMenu: EventEmitter; + selected: EventEmitter; + rangeSelected: EventEmitter; + rowSelectionChanging: EventEmitter; + localeChange: EventEmitter; + filtering: EventEmitter; + filteringDone: EventEmitter; + columnPinned: EventEmitter; + columnResized: EventEmitter; + columnMovingEnd: EventEmitter; + columnSelectionChanging: EventEmitter; + columnMoving: EventEmitter; + columnMovingStart: EventEmitter; + columnPin: EventEmitter; + columnVisibilityChanging: EventEmitter; + columnVisibilityChanged: EventEmitter; + batchEditingChange?: EventEmitter; + onDensityChanged: EventEmitter; + rowAdd: EventEmitter; + rowAdded: EventEmitter; + rowAddedNotifier: Subject; + rowDeleted: EventEmitter; + rowDeletedNotifier: Subject; + cellEditEnter: EventEmitter; + cellEdit: EventEmitter; + cellEditDone: EventEmitter; + cellEditExit: EventEmitter; + rowEditEnter: EventEmitter; + rowEdit: EventEmitter; + rowEditDone: EventEmitter; + rowEditExit: EventEmitter; + rowDragStart: EventEmitter; + rowDragEnd: EventEmitter; + rowToggle: EventEmitter; + toolbarExporting: EventEmitter; + rendered$: Observable; + resizeNotify: Subject; + + sortStrategy: IGridSortingStrategy; + groupStrategy?: IGridGroupingStrategy; + filteringLogic: FilteringLogic; + filterStrategy: IFilteringStrategy; + allowAdvancedFiltering: boolean; sortingExpressions: ISortingExpression[]; sortingExpressionsChange: EventEmitter; filteringExpressionsTree: IFilteringExpressionsTree; @@ -82,15 +497,96 @@ export interface GridType extends IGridDataBindable { advancedFilteringExpressionsTree: IFilteringExpressionsTree; advancedFilteringExpressionsTreeChange: EventEmitter; + batchEditing: boolean; + groupingExpansionState?: IGroupByExpandState[]; + groupingExpressions?: IGroupingExpression[]; + groupingExpressionsChange?: EventEmitter; + groupsExpanded?: boolean; + groupsRecords?: IGroupByRecord[]; + groupingFlatResult?: any[]; + groupingResult?: any[]; + groupingMetadata?: any[]; + selectedCells?: CellType[]; + selectedRows: any[]; + + toggleGroup?(groupRow: IGroupByRecord): void; + clearGrouping?(field: string): void; + groupBy?(expression: IGroupingExpression | Array): void; + resolveOutlet?(): IgxOverlayOutletDirective; + + getSelectedRanges(): GridSelectionRange[]; + deselectAllColumns(): void; + deselectColumns(columns: string[] | ColumnType[]): void; + selectColumns(columns: string[] | ColumnType[]): void; + selectedColumns(): ColumnType[]; + refreshSearch(): void; + getDefaultExpandState(record: any): boolean; trackColumnChanges(index: number, column: any): any; + getPossibleColumnWidth(): string; + resetHorizontalVirtualization(): void; hasVerticalScroll(): boolean; + getVisibleContentHeight(): number; + getDragGhostCustomTemplate(): TemplateRef | null; + openRowOverlay(id: any): void; + openAdvancedFilteringDialog(): void; + showSnackbarFor(index: number): void; getColumnByName(name: string): any; - sort(expression: ISortingExpression | Array): void; + getColumnByVisibleIndex(index: number): ColumnType; + getHeaderGroupWidth(column: ColumnType): string; + getRowByKey?(key: any): RowType; + getRowByIndex?(index: number): RowType; + setFilteredData(data: any, pinned: boolean): void; + setFilteredSortedData(data: any, pinned: boolean): void; + sort(expression: ISortingExpression | ISortingExpression[]): void; clearSort(name?: string): void; + pinRow(id: any, index?: number, row?: RowType): boolean; + unpinRow(id: any, row?: RowType): boolean; + getUnpinnedIndexById(id: any): number; + getEmptyRecordObjectFor(inRow: RowType): any; + isSummaryRow(rec: any): boolean; + isRecordPinned(rec: any): boolean; + getInitialPinnedIndex(rec: any): number; + isRecordPinnedByViewIndex(rowIndex: number): boolean; isColumnGrouped(fieldName: string): boolean; isDetailRecord(rec: any): boolean; isGroupByRecord(rec: any): boolean; + isGhostRecord(rec: any): boolean; + isTreeRow?(rec: any): boolean; + isChildGridRecord?(rec: any): boolean; + getChildGrids?(inDepth?: boolean): any[]; + isHierarchicalRecord?(record: any): boolean; + columnToVisibleIndex(key: string | number): number; + moveColumn(column: ColumnType, target: ColumnType, pos: DropPosition): void; + navigateTo(rowIndex: number, visibleColumnIndex: number, callback?: (e: any) => any): void; + getPreviousCell(currRowIndex: number, curVisibleColIndex: number, callback: (c: ColumnType) => boolean): ICellPosition; + getNextCell(currRowIndex: number, curVisibleColIndex: number, callback: (c: ColumnType) => boolean): ICellPosition; + clearCellSelection(): void; + selectRange(range: GridSelectionRange | GridSelectionRange[]): void; + selectRows(rowIDs: any[], clearCurrentSelection?: boolean): void; + deselectRows(rowIDs: any[]): void; + selectAllRows(onlyFilterData?: boolean): void; + deselectAllRows(onlyFilterData?: boolean): void; + setUpPaginator(): void; + createFilterDropdown(column: ColumnType, options: OverlaySettings): any; + // Type to RowType + createRow?(index: number, data?: any): RowType; + deleteRow(id: any): any; + deleteRowById(id: any): any; + collapseRow(id: any): void; notifyChanges(repaint?: boolean): void; + resetColumnCollections(): void; + triggerPipes(): void; + repositionRowEditingOverlay(row: RowType): void; + closeRowEditingOverlay(): void; + reflow(): void; + + // TODO: Maybe move them to FlatGridType, but then will we need another token? + isExpandedGroup(group: IGroupByRecord): boolean; + createColumnsList?(cols: ColumnType[]): void; + toggleAllGroupRows?(): void; + toggleAll?(): void; + generateRowPath?(rowId: any): any[]; + } /** @@ -117,7 +613,7 @@ export interface TreeGridType extends GridType { /** * An interface describing a Hierarchical Grid type */ - export interface HierarchicalGridType extends GridType { +export interface HierarchicalGridType extends GridType { childLayoutKeys: any[]; } diff --git a/projects/igniteui-angular/src/lib/grids/common/pipes.ts b/projects/igniteui-angular/src/lib/grids/common/pipes.ts index 0e4cee9f97b..b6c85fbb447 100644 --- a/projects/igniteui-angular/src/lib/grids/common/pipes.ts +++ b/projects/igniteui-angular/src/lib/grids/common/pipes.ts @@ -1,20 +1,12 @@ import { Pipe, PipeTransform, Inject } from '@angular/core'; -import { GridBaseAPIService } from '../api.service'; -import { IgxGridBaseDirective } from '../grid-base.directive'; import { DataUtil } from '../../data-operations/data-util'; import { cloneArray, resolveNestedPath } from '../../core/utils'; -import { GridType } from './grid.interface'; -import { IgxColumnComponent } from '../columns/column.component'; -import { ColumnDisplayOrder } from './enums'; -import { IgxColumnActionsComponent } from '../column-actions/column-actions.component'; +import { GridType, IGX_GRID_BASE, RowType } from './grid.interface'; import { IgxAddRow } from './crud.service'; -import { IgxGridRow } from '../grid-public-row'; -import { IgxTreeGridRowComponent } from '../tree-grid/tree-grid-row.component'; -import { IgxGridRowComponent } from '../grid/grid-row.component'; -import { IgxHierarchicalRowComponent } from '../hierarchical-grid/hierarchical-row.component'; import { IgxSummaryOperand, IgxSummaryResult } from '../summaries/grid-summary'; +import { IgxGridRow } from '../grid-public-row'; -interface CSSProp { +interface GridStyleCSSProperty { [prop: string]: any; } @@ -22,12 +14,10 @@ interface CSSProp { * @hidden * @internal */ -@Pipe({ - name: 'igxCellStyleClasses' -}) +@Pipe({ name: 'igxCellStyleClasses' }) export class IgxGridCellStyleClassesPipe implements PipeTransform { - public transform(cssClasses: CSSProp, _: any, data: any, field: string, index: number, __: number): string { + public transform(cssClasses: GridStyleCSSProperty, _: any, data: any, field: string, index: number, __: number): string { if (!cssClasses) { return ''; } @@ -56,7 +46,8 @@ export class IgxGridCellStyleClassesPipe implements PipeTransform { }) export class IgxGridCellStylesPipe implements PipeTransform { - public transform(styles: CSSProp, _: any, data: any, field: string, index: number, __: number): CSSProp { + public transform(styles: GridStyleCSSProperty, _: any, data: any, field: string, index: number, __: number): + GridStyleCSSProperty { const css = {}; if (!styles) { return css; @@ -71,7 +62,6 @@ export class IgxGridCellStylesPipe implements PipeTransform { } } -type _RowType = IgxGridRowComponent | IgxTreeGridRowComponent | IgxHierarchicalRowComponent; /** * @hidden @@ -79,15 +69,15 @@ type _RowType = IgxGridRowComponent | IgxTreeGridRowComponent | IgxHierarchicalR */ @Pipe({ name: 'igxGridRowClasses' }) export class IgxGridRowClassesPipe implements PipeTransform { - public row: IgxGridRow; + public row: RowType; - constructor(private gridAPI: GridBaseAPIService) { - this.row = new IgxGridRow(this.gridAPI.grid as any, -1, {}); + constructor(@Inject(IGX_GRID_BASE) private grid: GridType) { + this.row = new IgxGridRow(this.grid as any, -1, {}); } public transform( - cssClasses: CSSProp, - row: _RowType, + cssClasses: GridStyleCSSProperty, + row: RowType, editMode: boolean, selected: boolean, dirty: boolean, @@ -136,16 +126,16 @@ export class IgxGridRowClassesPipe implements PipeTransform { @Pipe({ name: 'igxGridRowStyles' }) export class IgxGridRowStylesPipe implements PipeTransform { - constructor(private gridAPI: GridBaseAPIService) { } + constructor(@Inject(IGX_GRID_BASE) private grid: GridType) { } - public transform(styles: CSSProp, rowData: any, index: number, __: number): CSSProp { + public transform(styles: GridStyleCSSProperty, rowData: any, index: number, __: number): GridStyleCSSProperty { const css = {}; if (!styles) { return css; } for (const prop of Object.keys(styles)) { const cb = styles[prop]; - const row = new IgxGridRow((this.gridAPI.grid as any), index, rowData); + const row = new IgxGridRow((this.grid as any), index, rowData); css[prop] = typeof cb === 'function' ? cb(row) : cb; } return css; @@ -199,22 +189,18 @@ export class IgxGridFilterConditionPipe implements PipeTransform { * @hidden * @internal */ -@Pipe({ - name: 'gridTransaction', - pure: true -}) +@Pipe({ name: 'gridTransaction' }) export class IgxGridTransactionPipe implements PipeTransform { - constructor(private gridAPI: GridBaseAPIService) { } + constructor(@Inject(IGX_GRID_BASE) private grid: GridType) { } public transform(collection: any[], _id: string, _pipeTrigger: number) { - const grid: IgxGridBaseDirective = this.gridAPI.grid; - if (grid.transactions.enabled) { + if (this.grid.transactions.enabled) { const result = DataUtil.mergeTransactions( cloneArray(collection), - grid.transactions.getAggregatedChanges(true), - grid.primaryKey); + this.grid.transactions.getAggregatedChanges(true), + this.grid.primaryKey); return result; } return collection; @@ -225,10 +211,7 @@ export class IgxGridTransactionPipe implements PipeTransform { * @hidden * @internal */ -@Pipe({ - name: 'paginatorOptions', - pure: true, -}) +@Pipe({ name: 'paginatorOptions' }) export class IgxGridPaginatorOptionsPipe implements PipeTransform { public transform(values: Array) { return Array.from(new Set([...values])).sort((a, b) => a - b); @@ -239,10 +222,7 @@ export class IgxGridPaginatorOptionsPipe implements PipeTransform { * @hidden * @internal */ -@Pipe({ - name: 'visibleColumns', - pure: true -}) +@Pipe({ name: 'visibleColumns' }) export class IgxHasVisibleColumnsPipe implements PipeTransform { public transform(values: any[], hasVisibleColumns) { if (!(values && values.length)) { @@ -256,104 +236,27 @@ export class IgxHasVisibleColumnsPipe implements PipeTransform { /** * @hidden */ -@Pipe({ - name: 'gridRowPinning', - pure: true -}) +@Pipe({ name: 'gridRowPinning' }) export class IgxGridRowPinningPipe implements PipeTransform { - constructor(private gridAPI: GridBaseAPIService) { } + constructor(@Inject(IGX_GRID_BASE) private grid: GridType) { } public transform(collection: any[], id: string, isPinned = false, _pipeTrigger: number) { - const grid = this.gridAPI.grid; - if (grid.hasPinnedRecords && isPinned) { - const result = collection.filter(rec => !grid.isSummaryRow(rec) && grid.isRecordPinned(rec)); - result.sort((rec1, rec2) => grid.getInitialPinnedIndex(rec1) - grid.getInitialPinnedIndex(rec2)); + if (this.grid.hasPinnedRecords && isPinned) { + const result = collection.filter(rec => !this.grid.isSummaryRow(rec) && this.grid.isRecordPinned(rec)); + result.sort((rec1, rec2) => this.grid.getInitialPinnedIndex(rec1) - this.grid.getInitialPinnedIndex(rec2)); return result; } - grid.unpinnedRecords = collection; - if (!grid.hasPinnedRecords) { - grid.pinnedRecords = []; + this.grid.unpinnedRecords = collection; + if (!this.grid.hasPinnedRecords) { + this.grid.pinnedRecords = []; return isPinned ? [] : collection; } - return collection.map((rec) => !grid.isSummaryRow(rec) && - grid.isRecordPinned(rec) ? { recordRef: rec, ghostRecord: true } : rec); - } -} - -@Pipe({ - name: 'columnActionEnabled', - pure: true -}) -export class IgxColumnActionEnabledPipe implements PipeTransform { - - constructor(@Inject(IgxColumnActionsComponent) protected columnActions: IgxColumnActionsComponent) { } - - public transform( - collection: IgxColumnComponent[], - actionFilter: (value: IgxColumnComponent, index: number, array: IgxColumnComponent[]) => boolean, - _pipeTrigger: number - ): IgxColumnComponent[] { - if (!collection) { - return collection; - } - let copy = collection.slice(0); - if (copy.length && copy[0].grid.hasColumnLayouts) { - copy = copy.filter(c => c.columnLayout); - } - if (actionFilter) { - copy = copy.filter(actionFilter); - } - // Preserve the actionable collection for use in the component - this.columnActions.actionableColumns = copy; - return copy; - } -} - -@Pipe({ - name: 'filterActionColumns', - pure: true -}) -export class IgxFilterActionColumnsPipe implements PipeTransform { - - constructor(@Inject(IgxColumnActionsComponent) protected columnActions: IgxColumnActionsComponent) { } - - public transform(collection: IgxColumnComponent[], filterCriteria: string, _pipeTrigger: number): IgxColumnComponent[] { - if (!collection) { - return collection; - } - let copy = collection.slice(0); - if (filterCriteria && filterCriteria.length > 0) { - const filterFunc = (c) => { - const filterText = c.header || c.field; - if (!filterText) { - return false; - } - return filterText.toLocaleLowerCase().indexOf(filterCriteria.toLocaleLowerCase()) >= 0 || - (c.children?.some(filterFunc) ?? false); - }; - copy = collection.filter(filterFunc); - } - // Preserve the filtered collection for use in the component - this.columnActions.filteredColumns = copy; - return copy; - } -} - -@Pipe({ - name: 'sortActionColumns', - pure: true -}) -export class IgxSortActionColumnsPipe implements PipeTransform { - - public transform(collection: IgxColumnComponent[], displayOrder: ColumnDisplayOrder, _pipeTrigger: number): IgxColumnComponent[] { - if (displayOrder === ColumnDisplayOrder.Alphabetical) { - return collection.sort((a, b) => (a.header || a.field).localeCompare(b.header || b.field)); - } - return collection; + return collection.map((rec) => !this.grid.isSummaryRow(rec) && + this.grid.isRecordPinned(rec) ? { recordRef: rec, ghostRecord: true } : rec); } } @@ -411,44 +314,16 @@ export class IgxSummaryFormatterPipe implements PipeTransform { @Pipe({ name: 'gridAddRow' }) export class IgxGridAddRowPipe implements PipeTransform { - constructor(private gridAPI: GridBaseAPIService) { } + constructor(@Inject(IGX_GRID_BASE) private grid: GridType) { } public transform(collection: any, isPinned = false, _pipeTrigger: number) { - const grid = this.gridAPI.grid; - if (!grid.rowEditable || !grid.crudService.row || grid.crudService.row.getClassName() !== IgxAddRow.name || - !grid.gridAPI.crudService.addRowParent || isPinned !== grid.gridAPI.crudService.addRowParent.isPinned) { + if (!this.grid.rowEditable || !this.grid.crudService.row || this.grid.crudService.row.getClassName() !== IgxAddRow.name || + !this.grid.crudService.addRowParent || isPinned !== this.grid.crudService.addRowParent.isPinned) { return collection; } const copy = collection.slice(0); - const rec = (grid.crudService.row as IgxAddRow).recordRef; - copy.splice(grid.crudService.row.index, 0, rec); + const rec = (this.grid.crudService.row as IgxAddRow).recordRef; + copy.splice(this.grid.crudService.row.index, 0, rec); return copy; } } - -@Pipe({ name: 'igxHeaderGroupWidth' }) -export class IgxHeaderGroupWidthPipe implements PipeTransform { - - public transform(width: any, minWidth: any, hasLayout: boolean) { - return hasLayout ? '' : `${Math.max(parseFloat(width), minWidth)}px`; - } -} - -@Pipe({ name: 'igxHeaderGroupStyle' }) -export class IgxHeaderGroupStylePipe implements PipeTransform { - - public transform(styles: { [prop: string]: any }, column: IgxColumnComponent, _: number): { [prop: string]: any } { - const css = {}; - - if (!styles) { - return css; - } - - for (const prop of Object.keys(styles)) { - const res = styles[prop]; - css[prop] = typeof res === 'function' ? res(column) : res; - } - - return css; - } -} diff --git a/projects/igniteui-angular/src/lib/grids/common/row.interface.ts b/projects/igniteui-angular/src/lib/grids/common/row.interface.ts deleted file mode 100644 index 78006cf0d79..00000000000 --- a/projects/igniteui-angular/src/lib/grids/common/row.interface.ts +++ /dev/null @@ -1,37 +0,0 @@ -import { IGroupByRecord } from '../../data-operations/groupby-record.interface'; -import { IgxSummaryResult } from '../summaries/grid-summary'; -import { ITreeGridRecord } from '../tree-grid/tree-grid.interfaces'; -import { CellType } from './cell.interface'; -import { GridType } from './grid.interface'; - -export interface RowType { - index: number; - viewIndex: number; - isGroupByRow?: boolean; - isSummaryRow?: boolean; - summaries?: Map; - groupRow?: IGroupByRecord; - /** Deprecated, will be removed. key is the new property */ - rowID?: any; - key?: any; - /** Deprecated, will be removed. data is the new property */ - rowData?: any; - data?: any; - cells?: CellType[]; - disabled?: boolean; - pinned?: boolean; - selected?: boolean; - expanded?: boolean; - deleted?: boolean; - inEditMode?: boolean; - children?: RowType[]; - parent?: RowType; - hasChildren?: boolean; - treeRow? : ITreeGridRecord; - grid: GridType; - update?: (value: any) => void; - delete?: () => any; - pin?: () => void; - unpin?: () => void; -} - diff --git a/projects/igniteui-angular/src/lib/grids/common/strategy.ts b/projects/igniteui-angular/src/lib/grids/common/strategy.ts new file mode 100644 index 00000000000..bc0389c71e6 --- /dev/null +++ b/projects/igniteui-angular/src/lib/grids/common/strategy.ts @@ -0,0 +1,201 @@ +import { cloneArray, parseDate, resolveNestedPath } from '../../core/utils'; +import { IGroupByExpandState } from '../../data-operations/groupby-expand-state.interface'; +import { IGroupByRecord } from '../../data-operations/groupby-record.interface'; +import { IGroupingState } from '../../data-operations/groupby-state.interface'; +import { IGroupingExpression } from '../../data-operations/grouping-expression.interface'; +import { IGroupByResult } from '../../data-operations/grouping-result.interface'; +import { getHierarchy, isHierarchyMatch } from '../../data-operations/operations'; +import { DefaultSortingStrategy, ISortingExpression } from '../../data-operations/sorting-strategy'; +import { GridType } from './grid.interface'; + +const DATE_TYPE = 'date'; +const TIME_TYPE = 'time'; +const DATE_TIME_TYPE = 'dateTime'; + +export interface IGridSortingStrategy { + sort(data: any[], expressions: ISortingExpression[], grid?: GridType): any[]; +} + +export interface IGridGroupingStrategy extends IGridSortingStrategy { + groupBy(data: any[], state: IGroupingState, grid?: any, groupsRecords?: any[], fullResult?: IGroupByResult): IGroupByResult; +} + +export class IgxSorting implements IGridSortingStrategy { + public sort(data: any[], expressions: ISortingExpression[], grid?: GridType): any[] { + return this.sortDataRecursive(data, expressions, 0, grid); + } + + protected groupDataRecursive( + data: any[], + state: IGroupingState, + level: number, + parent: IGroupByRecord, + metadata: IGroupByRecord[], + grid: GridType = null, + groupsRecords: any[] = [], + fullResult: IGroupByResult = { data: [], metadata: [] } + ): any[] { + const expressions = state.expressions; + const expansion = state.expansion; + let i = 0; + let result = []; + while (i < data.length) { + const column = grid ? grid.getColumnByName(expressions[level].fieldName) : null; + const isDate = column?.dataType === DATE_TYPE || column?.dataType === DATE_TIME_TYPE; + const isTime = column?.dataType === TIME_TYPE; + const group = this.groupedRecordsByExpression(data, i, expressions[level], isDate); + const groupRow: IGroupByRecord = { + expression: expressions[level], + level, + records: cloneArray(group), + value: this.getFieldValue(group[0], expressions[level].fieldName, isDate, isTime), + groupParent: parent, + groups: [], + height: grid ? grid.renderedRowHeight : null, + column + }; + if (parent) { + parent.groups.push(groupRow); + } else { + groupsRecords.push(groupRow); + } + const hierarchy = getHierarchy(groupRow); + const expandState: IGroupByExpandState = expansion.find((s) => + isHierarchyMatch(s.hierarchy || [{ fieldName: groupRow.expression.fieldName, value: groupRow.value }], hierarchy)); + const expanded = expandState ? expandState.expanded : state.defaultExpanded; + let recursiveResult; + result.push(groupRow); + metadata.push(null); + fullResult.data.push(groupRow); + fullResult.metadata.push(null); + if (level < expressions.length - 1) { + recursiveResult = this.groupDataRecursive(group, state, level + 1, groupRow, + expanded ? metadata : [], grid, groupsRecords, fullResult); + if (expanded) { + result = result.concat(recursiveResult); + } + } else { + for (const groupItem of group) { + fullResult.metadata.push(groupRow); + fullResult.data.push(groupItem); + } + if (expanded) { + metadata.push(...fullResult.metadata.slice(fullResult.metadata.length - group.length)); + result.push(...fullResult.data.slice(fullResult.data.length - group.length)); + } + } + i += group.length; + } + return result; + } + + protected getFieldValue(obj: T, key: string, isDate: boolean = false, isTime: boolean = false) { + let resolvedValue = resolveNestedPath(obj, key); + if (isDate || isTime) { + const date = parseDate(resolvedValue); + resolvedValue = isTime && date ? + new Date().setHours(date.getHours(), date.getMinutes(), date.getSeconds(), date.getMilliseconds()) : date; + + } + return resolvedValue; + } + + private groupedRecordsByExpression( + data: T[], + index: number, + expression: IGroupingExpression, + isDate: boolean = false + ): T[] { + const res = []; + const key = expression.fieldName; + const len = data.length; + const groupval = this.getFieldValue(data[index], key, isDate); + res.push(data[index]); + index++; + const comparer = expression.groupingComparer || DefaultSortingStrategy.instance().compareValues; + for (let i = index; i < len; i++) { + if (comparer(this.getFieldValue(data[i], key, isDate), groupval) === 0) { + res.push(data[i]); + } else { + break; + } + } + return res; + } + + private sortDataRecursive( + data: T[], + expressions: ISortingExpression[], + expressionIndex: number = 0, + grid: GridType + ): T[] { + let i: number; + let j: number; + let gbData: T[]; + let gbDataLen: number; + const exprsLen = expressions.length; + const dataLen = data.length; + + expressionIndex = expressionIndex || 0; + if (expressionIndex >= exprsLen || dataLen <= 1) { + return data; + } + const expr = expressions[expressionIndex]; + if (!expr.strategy) { + expr.strategy = DefaultSortingStrategy.instance() as any; + } + const column = grid?.getColumnByName(expr.fieldName); + const isDate = column?.dataType === DATE_TYPE || column?.dataType === DATE_TIME_TYPE; + const isTime = column?.dataType === TIME_TYPE; + data = expr.strategy.sort(data, expr.fieldName, expr.dir, expr.ignoreCase, this.getFieldValue, isDate, isTime); + if (expressionIndex === exprsLen - 1) { + return data; + } + // in case of multiple sorting + for (i = 0; i < dataLen; i++) { + gbData = this.groupedRecordsByExpression(data, i, expr, isDate); + gbDataLen = gbData.length; + if (gbDataLen > 1) { + gbData = this.sortDataRecursive(gbData, expressions, expressionIndex + 1, grid); + } + for (j = 0; j < gbDataLen; j++) { + data[i + j] = gbData[j]; + } + i += gbDataLen - 1; + } + return data; + } +} + +export class IgxGrouping extends IgxSorting implements IGridGroupingStrategy { + public groupBy(data: any[], state: IGroupingState, grid?: any, + groupsRecords?: any[], fullResult: IGroupByResult = { data: [], metadata: [] }): IGroupByResult { + const metadata: IGroupByRecord[] = []; + const grouping = this.groupDataRecursive(data, state, 0, null, metadata, grid, groupsRecords, fullResult); + return { + data: grouping, + metadata + }; + } +} + +export class NoopSortingStrategy implements IGridSortingStrategy { + private static _instance: NoopSortingStrategy = null; + + private constructor() { } + + public static instance() { + return this._instance || (this._instance = new NoopSortingStrategy()); + } + + public sort(data: any[]): any[] { + return data; + } +} + +export class IgxDataRecordSorting extends IgxSorting { + + protected getFieldValue(obj: any, key: string, isDate: boolean = false, isTime: boolean = false): any { + return super.getFieldValue(obj.data, key, isDate, isTime); + } +} diff --git a/projects/igniteui-angular/src/lib/grids/common/types.ts b/projects/igniteui-angular/src/lib/grids/common/types.ts new file mode 100644 index 00000000000..912916289c6 --- /dev/null +++ b/projects/igniteui-angular/src/lib/grids/common/types.ts @@ -0,0 +1,44 @@ +import { InjectionToken } from '@angular/core'; + +export interface GridSelectionRange { + rowStart: number; + rowEnd: number; + columnStart: string | number; + columnEnd: string | number; +} + +export interface ISelectionNode { + row: number; + column: number; + layout?: IMultiRowLayoutNode; + isSummaryRow?: boolean; +} + +export interface IMultiRowLayoutNode { + rowStart: number; + colStart: number; + rowEnd: number; + colEnd: number; + columnVisibleIndex: number; +} + +export interface ISelectionKeyboardState { + node: null | ISelectionNode; + shift: boolean; + range: GridSelectionRange; + active: boolean; +} + +export interface ISelectionPointerState extends ISelectionKeyboardState { + ctrl: boolean; + primaryButton: boolean; +} + +export interface IColumnSelectionState { + field: null | string; + range: string[]; +} + +export type SelectionState = ISelectionKeyboardState | ISelectionPointerState; + +export const IgxGridTransaction = new InjectionToken('IgxGridTransaction'); diff --git a/projects/igniteui-angular/src/lib/grids/filtering/advanced-filtering/advanced-filtering-dialog.component.ts b/projects/igniteui-angular/src/lib/grids/filtering/advanced-filtering/advanced-filtering-dialog.component.ts index f3d566761ee..25f48b30075 100644 --- a/projects/igniteui-angular/src/lib/grids/filtering/advanced-filtering/advanced-filtering-dialog.component.ts +++ b/projects/igniteui-angular/src/lib/grids/filtering/advanced-filtering/advanced-filtering-dialog.component.ts @@ -15,13 +15,13 @@ import { IButtonGroupEventArgs } from '../../../buttonGroup/buttonGroup.componen import { takeUntil } from 'rxjs/operators'; import { Subject, Subscription } from 'rxjs'; import { AbsoluteScrollStrategy, AutoPositionStrategy } from '../../../services/public_api'; -import { IgxColumnComponent } from '../../columns/column.component'; import { DataUtil } from './../../../data-operations/data-util'; import { IActiveNode } from '../../grid-navigation.service'; -import { IgxGridBaseDirective } from '../../public_api'; import { PlatformUtil } from '../../../core/utils'; import { IgxDatePickerComponent } from '../../../date-picker/date-picker.component'; import { IgxTimePickerComponent } from '../../../time-picker/time-picker.component'; +import { ColumnType, GridType } from '../../common/grid.interface'; +import { DisplayDensity } from '../../../core/displayDensity'; /** * @hidden @@ -290,14 +290,14 @@ export class IgxAdvancedFilteringDialogComponent implements AfterViewInit, OnDes private destroy$ = new Subject(); private _overlayComponentId: string; private _overlayService: IgxOverlayService; - private _selectedColumn: IgxColumnComponent; + private _selectedColumn: ColumnType; private _clickTimer; private _dblClickDelay = 200; private _preventChipClick = false; private _editingInputsContainer: ElementRef; private _addModeContainer: ElementRef; private _currentGroupButtonsContainer: ElementRef; - private _grid: IgxGridBaseDirective; + private _grid: GridType; private _filteringChange: Subscription; private _positionSettings = { @@ -333,21 +333,21 @@ export class IgxAdvancedFilteringDialogComponent implements AfterViewInit, OnDes /** * @hidden @internal */ - public get displayDensity() { + public get displayDensity(): DisplayDensity { return this.grid.displayDensity; } /** * @hidden @internal */ - public get selectedColumn(): IgxColumnComponent { + public get selectedColumn(): ColumnType { return this._selectedColumn; } /** * @hidden @internal */ - public set selectedColumn(value: IgxColumnComponent) { + public set selectedColumn(value: ColumnType) { const oldValue = this._selectedColumn; if (this._selectedColumn !== value) { @@ -364,7 +364,7 @@ export class IgxAdvancedFilteringDialogComponent implements AfterViewInit, OnDes * An @Input property that sets the grid. */ @Input() - public set grid(grid: IgxGridBaseDirective) { + public set grid(grid: GridType) { this._grid = grid; if (this._filteringChange) { @@ -385,15 +385,15 @@ export class IgxAdvancedFilteringDialogComponent implements AfterViewInit, OnDes /** * Returns the grid. */ - public get grid(): IgxGridBaseDirective { + public get grid(): GridType { return this._grid; } /** * @hidden @internal */ - public get filterableColumns(): IgxColumnComponent[] { - return this.grid.columns.filter((col) => !col.columnGroup && col.filterable); + public get filterableColumns(): ColumnType[] { + return this.grid.columnList.filter((col) => !col.columnGroup && col.filterable); } /** @@ -810,7 +810,7 @@ export class IgxAdvancedFilteringDialogComponent implements AfterViewInit, OnDes /** * @hidden @internal */ - public initialize(grid: IgxGridBaseDirective, overlayService: IgxOverlayService, + public initialize(grid: GridType, overlayService: IgxOverlayService, overlayComponentId: string) { this.inline = false; this.grid = grid; diff --git a/projects/igniteui-angular/src/lib/grids/filtering/base/filtering.module.ts b/projects/igniteui-angular/src/lib/grids/filtering/base/filtering.module.ts index dd83d8871d4..492f18fd1d2 100644 --- a/projects/igniteui-angular/src/lib/grids/filtering/base/filtering.module.ts +++ b/projects/igniteui-angular/src/lib/grids/filtering/base/filtering.module.ts @@ -5,6 +5,9 @@ import { IgxGridSharedModules } from '../../common/shared.module'; import { IgxGridPipesModule } from '../../common/grid-pipes.module'; +export { IgxGridFilteringCellComponent as θIgxGridFilteringCellComponent } from './grid-filtering-cell.component'; +export { IgxGridFilteringRowComponent as θIgxGridFilteringRowComponent } from './grid-filtering-row.component'; + @NgModule({ declarations: [ IgxGridFilteringCellComponent, @@ -19,4 +22,4 @@ import { IgxGridPipesModule } from '../../common/grid-pipes.module'; IgxGridFilteringRowComponent ] }) -export class IgxGridFilteringModule {} +export class IgxGridFilteringModule { } diff --git a/projects/igniteui-angular/src/lib/grids/filtering/base/grid-filtering-cell.component.ts b/projects/igniteui-angular/src/lib/grids/filtering/base/grid-filtering-cell.component.ts index 1601f1c9ad3..f74cef3a8ed 100644 --- a/projects/igniteui-angular/src/lib/grids/filtering/base/grid-filtering-cell.component.ts +++ b/projects/igniteui-angular/src/lib/grids/filtering/base/grid-filtering-cell.component.ts @@ -1,21 +1,23 @@ import { + AfterViewInit, + ChangeDetectionStrategy, ChangeDetectorRef, Component, - Input, - TemplateRef, - ViewChild, - HostBinding, - AfterViewInit, + DoCheck, ElementRef, + HostBinding, + Input, OnInit, - ChangeDetectionStrategy, - DoCheck + TemplateRef, + ViewChild } from '@angular/core'; -import { IgxColumnComponent } from '../../columns/column.component'; import { IFilteringExpression } from '../../../data-operations/filtering-expression.interface'; -import { IBaseChipEventArgs, IgxChipsAreaComponent, IgxChipComponent } from '../../../chips/public_api'; -import { IgxFilteringService, ExpressionUI } from '../grid-filtering.service'; +import { IgxFilteringService } from '../grid-filtering.service'; import { DisplayDensity } from '../../../core/displayDensity'; +import { ExpressionUI } from '../excel-style/common'; +import { IgxChipsAreaComponent } from '../../../chips/chips-area.component'; +import { IBaseChipEventArgs, IgxChipComponent } from '../../../chips/chip.component'; +import { ColumnType } from '../../common/grid.interface'; /** * @hidden @@ -27,7 +29,7 @@ import { DisplayDensity } from '../../../core/displayDensity'; }) export class IgxGridFilteringCellComponent implements AfterViewInit, OnInit, DoCheck { @Input() - public column: IgxColumnComponent; + public column: ColumnType; @ViewChild('emptyFilter', { read: TemplateRef, static: true }) protected emptyFilter: TemplateRef; diff --git a/projects/igniteui-angular/src/lib/grids/filtering/base/grid-filtering-row.component.ts b/projects/igniteui-angular/src/lib/grids/filtering/base/grid-filtering-row.component.ts index 28aa1107db5..488fbee6a91 100644 --- a/projects/igniteui-angular/src/lib/grids/filtering/base/grid-filtering-row.component.ts +++ b/projects/igniteui-angular/src/lib/grids/filtering/base/grid-filtering-row.component.ts @@ -15,14 +15,12 @@ import { OnDestroy } from '@angular/core'; import { GridColumnDataType, DataUtil } from '../../../data-operations/data-util'; -import { IgxColumnComponent } from '../../columns/column.component'; import { IgxDropDownComponent, ISelectionEventArgs } from '../../../drop-down/public_api'; import { IFilteringOperation } from '../../../data-operations/filtering-condition'; import { FilteringLogic, IFilteringExpression } from '../../../data-operations/filtering-expression.interface'; import { HorizontalAlignment, VerticalAlignment, OverlaySettings } from '../../../services/overlay/utilities'; import { ConnectedPositioningStrategy } from '../../../services/overlay/position/connected-positioning-strategy'; import { IBaseChipEventArgs, IgxChipsAreaComponent, IgxChipComponent } from '../../../chips/public_api'; -import { ExpressionUI } from '../grid-filtering.service'; import { IgxDropDownItemComponent } from '../../../drop-down/drop-down-item.component'; import { IgxFilteringService } from '../grid-filtering.service'; import { AbsoluteScrollStrategy } from '../../../services/overlay/scroll'; @@ -32,6 +30,8 @@ import { IgxTimePickerComponent } from '../../../time-picker/time-picker.compone import { isEqual, PlatformUtil } from '../../../core/utils'; import { Subject } from 'rxjs'; import { takeUntil } from 'rxjs/operators'; +import { ExpressionUI } from '../excel-style/common'; +import { ColumnType } from '../../common/grid.interface'; /** * @hidden @@ -43,7 +43,7 @@ import { takeUntil } from 'rxjs/operators'; }) export class IgxGridFilteringRowComponent implements AfterViewInit, OnDestroy { @Input() - public get column(): IgxColumnComponent { + public get column(): ColumnType { return this._column; } @@ -331,7 +331,7 @@ export class IgxGridFilteringRowComponent implements AfterViewInit, OnDestroy { return; } if (this.platform.isEdge && target.type !== 'number' - || this.isKeyPressed && this.platform.isIE || target.value || target.checkValidity()) { + || this.isKeyPressed || target.value || target.checkValidity()) { this.value = target.value; } } diff --git a/projects/igniteui-angular/src/lib/grids/filtering/excel-style/base-filtering.component.ts b/projects/igniteui-angular/src/lib/grids/filtering/excel-style/base-filtering.component.ts new file mode 100644 index 00000000000..61d773e84c3 --- /dev/null +++ b/projects/igniteui-angular/src/lib/grids/filtering/excel-style/base-filtering.component.ts @@ -0,0 +1,44 @@ +import { ChangeDetectorRef, Directive, ElementRef, EventEmitter } from '@angular/core'; +import { DisplayDensity } from '../../../core/displayDensity'; +import { PlatformUtil } from '../../../core/utils'; +import { IgxOverlayService } from '../../../services/overlay/overlay'; +import { ExpressionUI, FilterListItem } from './common'; + + + +@Directive() +export abstract class BaseFilteringComponent { + + public abstract column: any; + public abstract get grid(): any; + public abstract get displayDensity(): DisplayDensity; + + public abstract overlayComponentId: string; + public abstract mainDropdown: ElementRef; + public abstract expressionsList: ExpressionUI[]; + public abstract listData: FilterListItem[]; + + abstract loadingStart: EventEmitter; + abstract loadingEnd: EventEmitter; + abstract initialized: EventEmitter; + abstract columnChange: EventEmitter; + abstract sortingChanged: EventEmitter; + abstract listDataLoaded: EventEmitter; + + constructor( + protected cdr: ChangeDetectorRef, + public element: ElementRef, + protected platform: PlatformUtil + ) { } + + + abstract initialize(column: any, overlayService: IgxOverlayService): void; + abstract detectChanges(): void; + abstract hide(): void; + abstract closeDropdown(): void; + abstract onSelect(): void; + abstract onPin(): void; + abstract onHideToggle(): void; + abstract cancel(): void; + +} diff --git a/projects/igniteui-angular/src/lib/grids/filtering/excel-style/common.ts b/projects/igniteui-angular/src/lib/grids/filtering/excel-style/common.ts new file mode 100644 index 00000000000..86e6dfc3ba4 --- /dev/null +++ b/projects/igniteui-angular/src/lib/grids/filtering/excel-style/common.ts @@ -0,0 +1,67 @@ +import { FilteringLogic, IFilteringExpression } from '../../../data-operations/filtering-expression.interface'; +import { FilteringExpressionsTree, IFilteringExpressionsTree } from '../../../data-operations/filtering-expressions-tree'; + +/** + * @hidden @internal + */ +export class FilterListItem { + public value: any; + public label: any; + public isSelected: boolean; + public indeterminate: boolean; + public isFiltered: boolean; + public isSpecial = false; + public isBlanks = false; +} + +/** + * @hidden + */ +export class ExpressionUI { + public expression: IFilteringExpression; + public beforeOperator: FilteringLogic; + public afterOperator: FilteringLogic; + public isSelected = false; + public isVisible = true; +} + +export function generateExpressionsList(expressions: IFilteringExpressionsTree | IFilteringExpression, + operator: FilteringLogic, + expressionsUIs: ExpressionUI[]): void { + generateExpressionsListRecursive(expressions, operator, expressionsUIs); + + // The beforeOperator of the first expression and the afterOperator of the last expression should be null + if (expressionsUIs.length) { + expressionsUIs[expressionsUIs.length - 1].afterOperator = null; + } +} + + +function generateExpressionsListRecursive(expressions: IFilteringExpressionsTree | IFilteringExpression, + operator: FilteringLogic, + expressionsUIs: ExpressionUI[]): void { + if (!expressions) { + return; + } + + if (expressions instanceof FilteringExpressionsTree) { + const expressionsTree = expressions as FilteringExpressionsTree; + for (const operand of expressionsTree.filteringOperands) { + generateExpressionsListRecursive(operand, expressionsTree.operator, expressionsUIs); + } + if (expressionsUIs.length) { + expressionsUIs[expressionsUIs.length - 1].afterOperator = operator; + } + } else { + const exprUI = new ExpressionUI(); + exprUI.expression = expressions as IFilteringExpression; + exprUI.afterOperator = operator; + + const prevExprUI = expressionsUIs[expressionsUIs.length - 1]; + if (prevExprUI) { + exprUI.beforeOperator = prevExprUI.afterOperator; + } + + expressionsUIs.push(exprUI); + } +} diff --git a/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-clear-filters.component.ts b/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-clear-filters.component.ts index 0775d0f019f..b1231dd424b 100644 --- a/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-clear-filters.component.ts +++ b/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-clear-filters.component.ts @@ -1,6 +1,6 @@ import { Component } from '@angular/core'; import { PlatformUtil } from '../../../core/utils'; -import { IgxGridExcelStyleFilteringComponent } from './grid.excel-style-filtering.component'; +import { BaseFilteringComponent } from './base-filtering.component'; /** * A component used for presenting Excel style clear filters UI. @@ -10,7 +10,7 @@ import { IgxGridExcelStyleFilteringComponent } from './grid.excel-style-filterin templateUrl: './excel-style-clear-filters.component.html' }) export class IgxExcelStyleClearFiltersComponent { - constructor(public esf: IgxGridExcelStyleFilteringComponent, protected platform: PlatformUtil) { } + constructor(public esf: BaseFilteringComponent, protected platform: PlatformUtil) { } /** * @hidden @internal diff --git a/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-conditional-filter.component.html b/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-conditional-filter.component.html index 367febf178b..649d532d523 100644 --- a/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-conditional-filter.component.html +++ b/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-conditional-filter.component.html @@ -40,7 +40,6 @@ [column]="esf.column" [filteringService]="esf.grid.filteringService" [overlayComponentId]="esf.overlayComponentId" - [overlayService]="esf.overlayService" [displayDensity]="esf.grid.displayDensity"> diff --git a/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-conditional-filter.component.ts b/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-conditional-filter.component.ts index aacd28303dc..0a36ffa74ee 100644 --- a/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-conditional-filter.component.ts +++ b/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-conditional-filter.component.ts @@ -1,27 +1,22 @@ import { Component, OnDestroy, ViewChild } from '@angular/core'; import { Subject } from 'rxjs'; +import { takeUntil } from 'rxjs/operators'; import { GridColumnDataType } from '../../../data-operations/data-util'; import { IFilteringOperation } from '../../../data-operations/filtering-condition'; import { IFilteringExpression } from '../../../data-operations/filtering-expression.interface'; import { ISelectionEventArgs, IgxDropDownComponent } from '../../../drop-down/public_api'; import { IgxExcelStyleCustomDialogComponent } from './excel-style-custom-dialog.component'; -import { - HorizontalAlignment, - VerticalAlignment, - OverlaySettings, - AutoPositionStrategy, - AbsoluteScrollStrategy -} from '../../../services/public_api'; -import { IgxGridExcelStyleFilteringComponent } from './grid.excel-style-filtering.component'; -import { takeUntil } from 'rxjs/operators'; import { PlatformUtil } from '../../../core/utils'; +import { BaseFilteringComponent } from './base-filtering.component'; +import { AutoPositionStrategy } from '../../../services/overlay/position/auto-position-strategy'; +import { AbsoluteScrollStrategy } from '../../../services/overlay/scroll/absolute-scroll-strategy'; +import { HorizontalAlignment, OverlaySettings, VerticalAlignment } from '../../../services/overlay/utilities'; /** * A component used for presenting Excel style conditional filter UI. */ @Component({ - preserveWhitespaces: false, selector: 'igx-excel-style-conditional-filter', templateUrl: './excel-style-conditional-filter.component.html' }) @@ -52,7 +47,7 @@ export class IgxExcelStyleConditionalFilterComponent implements OnDestroy { scrollStrategy: new AbsoluteScrollStrategy() }; - constructor(public esf: IgxGridExcelStyleFilteringComponent, protected platform: PlatformUtil) { + constructor(public esf: BaseFilteringComponent, protected platform: PlatformUtil) { this.esf.columnChange.pipe(takeUntil(this.destroy$)).subscribe(() => { if (this.esf.grid) { this.shouldOpenSubMenu = true; diff --git a/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-custom-dialog.component.ts b/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-custom-dialog.component.ts index 8d0f31e8ea7..43da1e099ed 100644 --- a/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-custom-dialog.component.ts +++ b/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-custom-dialog.component.ts @@ -9,8 +9,7 @@ import { QueryList, ElementRef } from '@angular/core'; -import { IgxColumnComponent } from '../../columns/column.component'; -import { IgxFilteringService, ExpressionUI } from '../grid-filtering.service'; +import { IgxFilteringService } from '../grid-filtering.service'; import { FilteringLogic } from '../../../data-operations/filtering-expression.interface'; import { GridColumnDataType } from '../../../data-operations/data-util'; import { @@ -22,25 +21,21 @@ import { IgxTimeFilteringOperand } from '../../../data-operations/filtering-condition'; import { IgxToggleDirective } from '../../../directives/toggle/toggle.directive'; -import { - AutoPositionStrategy, - OverlaySettings, - VerticalAlignment, - PositionSettings, - HorizontalAlignment, - IgxOverlayService, - AbsoluteScrollStrategy -} from '../../../services/public_api'; import { ILogicOperatorChangedArgs, IgxExcelStyleDefaultExpressionComponent } from './excel-style-default-expression.component'; import { IgxExcelStyleDateExpressionComponent } from './excel-style-date-expression.component'; import { DisplayDensity } from '../../../core/density'; import { PlatformUtil } from '../../../core/utils'; +import { ExpressionUI } from './common'; +import { ColumnType } from '../../common/grid.interface'; +import { HorizontalAlignment, OverlaySettings, PositionSettings, VerticalAlignment } from '../../../services/overlay/utilities'; +import { AutoPositionStrategy } from '../../../services/overlay/position/auto-position-strategy'; +import { AbsoluteScrollStrategy } from '../../../services/overlay/scroll/absolute-scroll-strategy'; +import { IgxOverlayService } from '../../../services/overlay/overlay'; /** * @hidden */ @Component({ - preserveWhitespaces: false, selector: 'igx-excel-style-custom-dialog', templateUrl: './excel-style-custom-dialog.component.html' }) @@ -48,7 +43,7 @@ export class IgxExcelStyleCustomDialogComponent implements AfterViewInit { @Input() public expressionsList = new Array(); @Input() - public column: IgxColumnComponent; + public column: ColumnType; @Input() public selectedOperator: string; @@ -59,9 +54,6 @@ export class IgxExcelStyleCustomDialogComponent implements AfterViewInit { @Input() public overlayComponentId: string; - @Input() - public overlayService: IgxOverlayService; - @Input() public displayDensity: DisplayDensity; @@ -98,7 +90,11 @@ export class IgxExcelStyleCustomDialogComponent implements AfterViewInit { }; - constructor(private cdr: ChangeDetectorRef, protected platform: PlatformUtil) { } + constructor( + protected overlayService: IgxOverlayService, + private cdr: ChangeDetectorRef, + protected platform: PlatformUtil + ) { } public ngAfterViewInit(): void { this._customDialogOverlaySettings.outlet = this.grid.outlet; diff --git a/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-date-expression.component.ts b/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-date-expression.component.ts index fe7919d4c71..dd2da5dddf9 100644 --- a/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-date-expression.component.ts +++ b/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-date-expression.component.ts @@ -1,8 +1,4 @@ -import { - Component, - ViewChild, - Input -} from '@angular/core'; +import { Component, Input, ViewChild } from '@angular/core'; import { IgxExcelStyleDefaultExpressionComponent } from './excel-style-default-expression.component'; import { DisplayDensity } from '../../../core/density'; import { IgxInputDirective } from '../../../directives/input/input.directive'; @@ -13,7 +9,6 @@ import { IgxTimePickerComponent } from '../../../time-picker/time-picker.compone * @hidden */ @Component({ - preserveWhitespaces: false, selector: 'igx-excel-style-date-expression', templateUrl: './excel-style-date-expression.component.html' }) diff --git a/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-default-expression.component.ts b/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-default-expression.component.ts index 2a48c59e02a..9053be5d1dc 100644 --- a/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-default-expression.component.ts +++ b/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-default-expression.component.ts @@ -7,18 +7,20 @@ import { ChangeDetectorRef, ViewChild } from '@angular/core'; -import { IgxColumnComponent } from '../../columns/column.component'; -import { ExpressionUI } from '../grid-filtering.service'; import { IgxButtonGroupComponent } from '../../../buttonGroup/buttonGroup.component'; import { GridColumnDataType, DataUtil } from '../../../data-operations/data-util'; import { IFilteringOperation } from '../../../data-operations/filtering-condition'; -import { OverlaySettings, ConnectedPositioningStrategy, AbsoluteScrollStrategy } from '../../../services/public_api'; import { IBaseEventArgs, PlatformUtil } from '../../../core/utils'; import { FilteringLogic } from '../../../data-operations/filtering-expression.interface'; import { DisplayDensity } from '../../../core/density'; import { IgxSelectComponent } from '../../../select/select.component'; import { IgxOverlayOutletDirective } from '../../../directives/toggle/toggle.directive'; import { IgxInputDirective } from '../../../input-group/public_api'; +import { ExpressionUI } from './common'; +import { ColumnType } from '../../common/grid.interface'; +import { OverlaySettings } from '../../../services/overlay/utilities'; +import { AbsoluteScrollStrategy } from '../../../services/overlay/scroll/absolute-scroll-strategy'; +import { ConnectedPositioningStrategy } from '../../../services/overlay/position/connected-positioning-strategy'; /** * @hidden @@ -32,13 +34,12 @@ export interface ILogicOperatorChangedArgs extends IBaseEventArgs { * @hidden */ @Component({ - preserveWhitespaces: false, selector: 'igx-excel-style-default-expression', templateUrl: './excel-style-default-expression.component.html' }) export class IgxExcelStyleDefaultExpressionComponent implements AfterViewInit { @Input() - public column: IgxColumnComponent; + public column: ColumnType; @Input() public expressionUI: ExpressionUI; diff --git a/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-header.component.html b/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-header.component.html index 7c6a6a7e91b..53962038668 100644 --- a/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-header.component.html +++ b/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-header.component.html @@ -5,7 +5,7 @@

{{ esf.column.header || esf.column.field }}

    -
  • - {{ grid.exportExcelText || grid?.resourceStrings.igx_grid_toolbar_exporter_excel_entry_text}} + {{ grid?.resourceStrings.igx_grid_toolbar_exporter_excel_entry_text}}
    • -
  • - {{ grid.exportCsvText || grid?.resourceStrings.igx_grid_toolbar_exporter_csv_entry_text }} + {{ grid?.resourceStrings.igx_grid_toolbar_exporter_csv_entry_text }}
diff --git a/projects/igniteui-angular/src/lib/grids/toolbar/grid-toolbar-exporter.component.ts b/projects/igniteui-angular/src/lib/grids/toolbar/grid-toolbar-exporter.component.ts index 7b3b55d1f75..9a742ff39a3 100644 --- a/projects/igniteui-angular/src/lib/grids/toolbar/grid-toolbar-exporter.component.ts +++ b/projects/igniteui-angular/src/lib/grids/toolbar/grid-toolbar-exporter.component.ts @@ -1,7 +1,6 @@ -import { Component, ContentChild, Input, Output, EventEmitter, Optional, Host } from '@angular/core'; +import { Component, ContentChild, Input, Output, EventEmitter, Inject } from '@angular/core'; import { first } from 'rxjs/operators'; import { BaseToolbarDirective } from './grid-toolbar.base'; -import { IgxGridToolbarComponent } from './grid-toolbar.component'; import { IgxExcelTextDirective, IgxCSVTextDirective } from './common'; import { CsvFileTypes, @@ -11,8 +10,9 @@ import { IgxExcelExporterOptions, IgxExcelExporterService } from '../../services/public_api'; -import { IgxGridBaseDirective } from '../grid-base.directive'; import { IgxToggleDirective } from '../../directives/toggle/toggle.directive'; +import { GridType } from '../common/grid.interface'; +import { IgxToolbarToken } from './token'; export type IgxExporterOptions = IgxCsvExporterOptions | IgxExcelExporterOptions; @@ -21,7 +21,7 @@ export type IgxExporterOptions = IgxCsvExporterOptions | IgxExcelExporterOptions export interface IgxExporterEvent { exporter: IgxBaseExporter; options: IgxExporterOptions; - grid: IgxGridBaseDirective; + grid: GridType; cancel: boolean; } @@ -56,20 +56,6 @@ export class IgxGridToolbarExporterComponent extends BaseToolbarDirective { @ContentChild(IgxCSVTextDirective) public hasCSVAttr: IgxCSVTextDirective; - /** - * Returns whether the CSV exporter service is available in the DI chain. - */ - public get hasCsvExporter() { - return !!this.csvExporter; - } - - /** - * Returns whether the Excel exporter service is available in the DI chain. - */ - public get hasExcelExporter() { - return !!this.excelExporter; - } - /** * Show entry for CSV export. */ @@ -107,7 +93,7 @@ export class IgxGridToolbarExporterComponent extends BaseToolbarDirective { public isExporting = false; constructor( - @Host() protected toolbar: IgxGridToolbarComponent, + @Inject(IgxToolbarToken) protected toolbar: IgxToolbarToken, private excelExporter: IgxExcelExporterService, private csvExporter: IgxCsvExporterService, ) { diff --git a/projects/igniteui-angular/src/lib/grids/toolbar/grid-toolbar.base.ts b/projects/igniteui-angular/src/lib/grids/toolbar/grid-toolbar.base.ts index fa03c11e2e7..029e9fb739e 100644 --- a/projects/igniteui-angular/src/lib/grids/toolbar/grid-toolbar.base.ts +++ b/projects/igniteui-angular/src/lib/grids/toolbar/grid-toolbar.base.ts @@ -1,18 +1,15 @@ -import { Directive, Host, Input, EventEmitter, OnDestroy, Output } from '@angular/core'; +import { Directive, Input, EventEmitter, OnDestroy, Output, Inject } from '@angular/core'; import { Subject, Subscription } from 'rxjs'; import { first, takeUntil } from 'rxjs/operators'; -import { IgxToggleDirective, ToggleViewCancelableEventArgs, ToggleViewEventArgs } from '../../directives/toggle/toggle.directive'; -import { - AbsoluteScrollStrategy, - ConnectedPositioningStrategy, - HorizontalAlignment, - OverlaySettings, - VerticalAlignment -} from '../../services/public_api'; -import { IgxColumnActionsComponent } from '../column-actions/column-actions.component'; + +import { AbsoluteScrollStrategy } from '../../services/overlay/scroll/absolute-scroll-strategy'; import { ColumnDisplayOrder } from '../common/enums'; +import { ElasticPositionStrategy } from '../../services/overlay/position/elastic-position-strategy'; import { IColumnToggledEventArgs } from '../common/events'; -import { IgxGridToolbarComponent } from './grid-toolbar.component'; +import { IgxColumnActionsComponent } from '../column-actions/column-actions.component'; +import { IgxToggleDirective, ToggleViewCancelableEventArgs, ToggleViewEventArgs } from '../../directives/toggle/toggle.directive'; +import { OverlaySettings } from '../../services/overlay/utilities'; +import { IgxToolbarToken } from './token'; /** @@ -84,16 +81,11 @@ export abstract class BaseToolbarDirective implements OnDestroy { @Output() public columnToggle = new EventEmitter(); - private $destroyer = new Subject(); + private $destroy = new Subject(); private $sub: Subscription; private _overlaySettings: OverlaySettings = { - positionStrategy: new ConnectedPositioningStrategy({ - horizontalDirection: HorizontalAlignment.Left, - horizontalStartPoint: HorizontalAlignment.Right, - verticalDirection: VerticalAlignment.Bottom, - verticalStartPoint: VerticalAlignment.Bottom - }), + positionStrategy: new ElasticPositionStrategy(), scrollStrategy: new AbsoluteScrollStrategy(), modal: false, closeOnEscape: true, @@ -107,10 +99,11 @@ export abstract class BaseToolbarDirective implements OnDestroy { return this.toolbar.grid; } - constructor(@Host() protected toolbar: IgxGridToolbarComponent) { } + constructor(@Inject(IgxToolbarToken) protected toolbar: IgxToolbarToken) { } public ngOnDestroy() { - this.$destroyer.next(true); + this.$destroy.next(); + this.$destroy.complete(); } /** @hidden @internal */ @@ -141,52 +134,53 @@ export abstract class BaseToolbarDirective implements OnDestroy { } /** The if statement prevents emitting open and close events twice */ if (toggleRef.collapsed) { - toggleRef.opening.pipe(first(), takeUntil(this.$destroyer)).subscribe((event) => this.opening.emit(event)); - toggleRef.opened.pipe(first(), takeUntil(this.$destroyer)).subscribe((event) => this.opened.emit(event)); + toggleRef.opening.pipe(first(), takeUntil(this.$destroy)).subscribe((event) => this.opening.emit(event)); + toggleRef.opened.pipe(first(), takeUntil(this.$destroy)).subscribe((event) => this.opened.emit(event)); } else { - toggleRef.closing.pipe(first(), takeUntil(this.$destroyer)).subscribe((event) => this.closing.emit(event)); - toggleRef.closed.pipe(first(), takeUntil(this.$destroyer)).subscribe((event) => this.closed.emit(event)); + toggleRef.closing.pipe(first(), takeUntil(this.$destroy)).subscribe((event) => this.closing.emit(event)); + toggleRef.closed.pipe(first(), takeUntil(this.$destroy)).subscribe((event) => this.closed.emit(event)); } } } + /** * @hidden @internal * Base class for pinning/hiding column actions */ -@Directive() -export abstract class BaseToolbarColumnActionsDirective extends BaseToolbarDirective { - @Input() - public hideFilter = false; + @Directive() + export abstract class BaseToolbarColumnActionsDirective extends BaseToolbarDirective { + @Input() + public hideFilter = false; - @Input() - public filterCriteria = ''; + @Input() + public filterCriteria = ''; - @Input() - public columnDisplayOrder: ColumnDisplayOrder = ColumnDisplayOrder.DisplayOrder; + @Input() + public columnDisplayOrder: ColumnDisplayOrder = ColumnDisplayOrder.DisplayOrder; - @Input() - public columnsAreaMaxHeight = '100%'; + @Input() + public columnsAreaMaxHeight = '100%'; - @Input() - public uncheckAllText: string; + @Input() + public uncheckAllText: string; - @Input() - public checkAllText: string; + @Input() + public checkAllText: string; - @Input() - public indentetion = 30; + @Input() + public indentetion = 30; @Input() public buttonText: string; protected columnActionsUI: IgxColumnActionsComponent; - public checkAll() { - this.columnActionsUI.checkAllColumns(); - } + public checkAll() { + this.columnActionsUI.checkAllColumns(); + } - public uncheckAll() { - this.columnActionsUI.uncheckAllColumns(); - } -} + public uncheckAll() { + this.columnActionsUI.uncheckAllColumns(); + } + } diff --git a/projects/igniteui-angular/src/lib/grids/toolbar/grid-toolbar.component.html b/projects/igniteui-angular/src/lib/grids/toolbar/grid-toolbar.component.html index bf0c7c8b223..e02a63d450e 100644 --- a/projects/igniteui-angular/src/lib/grids/toolbar/grid-toolbar.component.html +++ b/projects/igniteui-angular/src/lib/grids/toolbar/grid-toolbar.component.html @@ -1,7 +1,4 @@ - - - - +
@@ -12,7 +9,9 @@ - + + + diff --git a/projects/igniteui-angular/src/lib/grids/toolbar/grid-toolbar.component.ts b/projects/igniteui-angular/src/lib/grids/toolbar/grid-toolbar.component.ts index 035d111c013..16f315c3b54 100644 --- a/projects/igniteui-angular/src/lib/grids/toolbar/grid-toolbar.component.ts +++ b/projects/igniteui-angular/src/lib/grids/toolbar/grid-toolbar.component.ts @@ -12,10 +12,9 @@ import { Subscription } from 'rxjs'; import { IDisplayDensityOptions, DisplayDensityToken, DisplayDensityBase } from '../../core/displayDensity'; import { IgxIconService } from '../../icon/public_api'; import { pinLeft, unpinLeft } from '@igniteui/material-icons-extended'; -import { IgxGridToolbarTitleDirective, IgxGridToolbarActionsDirective } from './common'; -import { GridBaseAPIService } from '../api.service'; -import { IgxGridBaseDirective } from '../grid-base.directive'; -import { GridType } from '../common/grid.interface'; +import { IgxGridToolbarActionsDirective } from './common'; +import { GridServiceType, GridType, IGX_GRID_SERVICE_BASE } from '../common/grid.interface'; +import { IgxToolbarToken } from './token'; /** @@ -26,7 +25,8 @@ import { GridType } from '../common/grid.interface'; */ @Component({ selector: 'igx-grid-toolbar', - templateUrl: './grid-toolbar.component.html' + templateUrl: './grid-toolbar.component.html', + providers: [{ provide: IgxToolbarToken, useClass: IgxGridToolbarComponent }] }) export class IgxGridToolbarComponent extends DisplayDensityBase implements OnDestroy { @@ -56,7 +56,7 @@ export class IgxGridToolbarComponent extends DisplayDensityBase implements OnDes return this.api.grid; } - public set grid(value: IgxGridBaseDirective) { + public set grid(value: GridType) { this._grid = value; } @@ -65,13 +65,6 @@ export class IgxGridToolbarComponent extends DisplayDensityBase implements OnDes return this.element.nativeElement; } - /** - * @hidden - * @internal - */ - @ContentChild(IgxGridToolbarTitleDirective) - public hasTitle: IgxGridToolbarTitleDirective; - /** * @hidden * @internal @@ -105,12 +98,12 @@ export class IgxGridToolbarComponent extends DisplayDensityBase implements OnDes } - protected _grid: IgxGridBaseDirective; + protected _grid: GridType; protected sub: Subscription; constructor( @Optional() @Inject(DisplayDensityToken) protected _displayDensityOptions: IDisplayDensityOptions, - private api: GridBaseAPIService, + @Inject(IGX_GRID_SERVICE_BASE) private api: GridServiceType, private iconService: IgxIconService, private element: ElementRef ) { diff --git a/projects/igniteui-angular/src/lib/grids/toolbar/token.ts b/projects/igniteui-angular/src/lib/grids/toolbar/token.ts new file mode 100644 index 00000000000..825ef2f83f6 --- /dev/null +++ b/projects/igniteui-angular/src/lib/grids/toolbar/token.ts @@ -0,0 +1,8 @@ +import { GridType } from '../common/grid.interface'; + +/** @hidden @internal */ +export abstract class IgxToolbarToken { + + abstract grid: GridType; + abstract showProgress: boolean; +} diff --git a/projects/igniteui-angular/src/lib/grids/toolbar/toolbar.module.ts b/projects/igniteui-angular/src/lib/grids/toolbar/toolbar.module.ts index d7b7acdee45..81b8057c9bf 100644 --- a/projects/igniteui-angular/src/lib/grids/toolbar/toolbar.module.ts +++ b/projects/igniteui-angular/src/lib/grids/toolbar/toolbar.module.ts @@ -13,7 +13,12 @@ import { IgxGridToolbarDirective, IgxGridToolbarTitleDirective } from './common'; - +export * from './grid-toolbar.component'; +export * from './common'; +export * from './grid-toolbar-advanced-filtering.component'; +export * from './grid-toolbar-exporter.component'; +export * from './grid-toolbar-hiding.component'; +export * from './grid-toolbar-pinning.component'; @NgModule({ @@ -46,4 +51,4 @@ import { IgxGridToolbarDirective ] }) -export class IgxGridToolbarModule {} +export class IgxGridToolbarModule { } diff --git a/projects/igniteui-angular/src/lib/grids/tree-grid/public_api.ts b/projects/igniteui-angular/src/lib/grids/tree-grid/public_api.ts index 43e9d224737..4835a08719e 100644 --- a/projects/igniteui-angular/src/lib/grids/tree-grid/public_api.ts +++ b/projects/igniteui-angular/src/lib/grids/tree-grid/public_api.ts @@ -5,3 +5,7 @@ export * from './tree-grid-api.service'; export * from './tree-grid.interfaces'; export * from './tree-grid.filtering.strategy'; export * from './tree-grid.grouping.pipe'; +export * from './tree-grid.directives'; +export { IgxTreeGridRowComponent as θIgxTreeGridRowComponent } from './tree-grid-row.component'; +export { IgxTreeGridAddRowPipe } from './tree-grid.pipes'; +export { IgxTreeGridCellComponent as θIgxTreeGridCellComponent } from './tree-cell.component'; diff --git a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-cell.component.html b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-cell.component.html index 79c27811e43..e0225670215 100644 --- a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-cell.component.html +++ b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-cell.component.html @@ -158,7 +158,7 @@ class="igx-grid__tree-grouping-indicator" [ngStyle]="{ visibility: showIndicator ? 'visible' : 'hidden' }" (click)="toggle($event)" - (focus)="onIndicatorFocus($event)" + (focus)="onIndicatorFocus()" > { +export class IgxTreeGridAPIService extends GridBaseAPIService { public get_all_data(transactions?: boolean): any[] { const grid = this.grid; @@ -139,7 +138,7 @@ export class IgxTreeGridAPIService extends GridBaseAPIService { it('should support updating a child tree-cell through the treeGrid API', () => { // Test prerequisites: move 'Age' column so it becomes the tree-column - const sourceColumn = treeGrid.columns.filter(c => c.field === 'Age')[0]; - const targetColumn = treeGrid.columns.filter(c => c.field === 'ID')[0]; + const sourceColumn = treeGrid.columnList.filter(c => c.field === 'Age')[0]; + const targetColumn = treeGrid.columnList.filter(c => c.field === 'ID')[0]; treeGrid.moveColumn(sourceColumn, targetColumn, DropPosition.BeforeDropTarget); fix.detectChanges(); @@ -387,8 +387,8 @@ describe('IgxTreeGrid - CRUD #tGrid', () => { it('should support updating a child tree-cell through the cellObject API', () => { // Test prerequisites: move 'Age' column so it becomes the tree-column - const sourceColumn = treeGrid.columns.filter(c => c.field === 'Age')[0]; - const targetColumn = treeGrid.columns.filter(c => c.field === 'ID')[0]; + const sourceColumn = treeGrid.columnList.filter(c => c.field === 'Age')[0]; + const targetColumn = treeGrid.columnList.filter(c => c.field === 'ID')[0]; treeGrid.moveColumn(sourceColumn, targetColumn, DropPosition.BeforeDropTarget); fix.detectChanges(); @@ -420,7 +420,6 @@ describe('IgxTreeGrid - CRUD #tGrid', () => { verifyTreeGridRecordsCount(fix, 3, 8); // Update row on level 1 - const oldRow = Object.assign({}, treeGrid.getRowByKey(1).data); const newRow = { ID: 1, ParentID: -1, @@ -517,8 +516,8 @@ describe('IgxTreeGrid - CRUD #tGrid', () => { it('should support updating a child tree-cell through the treeGrid API', () => { // Test prerequisites: move 'Name' column so it becomes the tree-column - const sourceColumn = treeGrid.columns.filter(c => c.field === 'Name')[0]; - const targetColumn = treeGrid.columns.filter(c => c.field === 'ID')[0]; + const sourceColumn = treeGrid.columnList.filter(c => c.field === 'Name')[0]; + const targetColumn = treeGrid.columnList.filter(c => c.field === 'ID')[0]; treeGrid.moveColumn(sourceColumn, targetColumn, DropPosition.BeforeDropTarget); fix.detectChanges(); @@ -535,8 +534,8 @@ describe('IgxTreeGrid - CRUD #tGrid', () => { it('should support updating a child tree-cell through the cellObject API', () => { // Test prerequisites: move 'Name' column so it becomes the tree-column - const sourceColumn = treeGrid.columns.filter(c => c.field === 'Name')[0]; - const targetColumn = treeGrid.columns.filter(c => c.field === 'ID')[0]; + const sourceColumn = treeGrid.columnList.filter(c => c.field === 'Name')[0]; + const targetColumn = treeGrid.columnList.filter(c => c.field === 'ID')[0]; treeGrid.moveColumn(sourceColumn, targetColumn, DropPosition.BeforeDropTarget); fix.detectChanges(); @@ -561,7 +560,7 @@ describe('IgxTreeGrid - CRUD #tGrid', () => { fix.detectChanges(); tick(16); treeGrid = fix.componentInstance.treeGrid; - for (const col of treeGrid.columns) { + for (const col of treeGrid.columnList) { col.editable = true; } gridContent = GridFunctions.getGridContent(fix); @@ -702,7 +701,7 @@ describe('IgxTreeGrid - CRUD #tGrid', () => { fix.detectChanges(); tick(16); treeGrid = fix.componentInstance.treeGrid; - for (const col of treeGrid.columns) { + for (const col of treeGrid.columnList) { col.editable = true; } gridContent = GridFunctions.getGridContent(fix); diff --git a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-expanding.spec.ts b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-expanding.spec.ts index 71b68daca4b..b75d31b8aa3 100644 --- a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-expanding.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-expanding.spec.ts @@ -1,6 +1,6 @@ import { TestBed, fakeAsync, tick, waitForAsync } from '@angular/core/testing'; import { BrowserAnimationsModule, NoopAnimationsModule } from '@angular/platform-browser/animations'; -import { IgxTreeGridModule } from './public_api'; +import { IgxTreeGridAPIService, IgxTreeGridModule } from './public_api'; import { IgxTreeGridExpandingComponent, IgxTreeGridPrimaryForeignKeyComponent, @@ -14,10 +14,11 @@ import { TreeGridFunctions } from '../../test-utils/tree-grid-functions.spec'; import { configureTestSuite } from '../../test-utils/configure-suite'; import { first } from 'rxjs/operators'; import { wait } from '../../test-utils/ui-interactions.spec'; -import { IgxGridModule } from '../grid/public_api'; +import { CellType, IgxGridModule } from '../grid/public_api'; import { GridFunctions } from '../../test-utils/grid-functions.spec'; import { GridSelectionMode } from '../common/enums'; import { IgxTreeGridComponent } from './tree-grid.component'; +import { QueryList } from '@angular/core'; describe('IgxTreeGrid - Expanding / Collapsing #tGrid', () => { configureTestSuite(); @@ -221,7 +222,8 @@ describe('IgxTreeGrid - Expanding / Collapsing #tGrid', () => { // expand a root level row let aRow = treeGrid.gridAPI.get_row_by_index(0); - expect(aRow.cells.first.value).toBe(147, 'wrong root level row'); + let cells = (aRow.cells as QueryList).toArray(); + expect(cells[0].value).toBe(147, 'wrong root level row'); expect(aRow.expanded).toBe(false); aRow.expanded = true; fix.detectChanges(); @@ -230,7 +232,8 @@ describe('IgxTreeGrid - Expanding / Collapsing #tGrid', () => { // expand a second level row aRow = treeGrid.gridAPI.get_row_by_index(3); - expect(aRow.cells.first.value).toBe(317, 'wrong second level row'); + cells = (aRow.cells as QueryList).toArray(); + expect(cells[0].value).toBe(317, 'wrong second level row'); expect(aRow.expanded).toBe(false); aRow.expanded = true; fix.detectChanges(); @@ -239,9 +242,11 @@ describe('IgxTreeGrid - Expanding / Collapsing #tGrid', () => { // check third level rows are having the correct values aRow = treeGrid.gridAPI.get_row_by_index(4); - expect(aRow.cells.first.value).toBe(711, 'wrong third level row'); + cells = (aRow.cells as QueryList).toArray(); + expect(cells[0].value).toBe(711, 'wrong third level row'); aRow = treeGrid.gridAPI.get_row_by_index(5); - expect(aRow.cells.first.value).toBe(998, 'wrong third level row'); + cells = (aRow.cells as QueryList).toArray(); + expect(cells[0].value).toBe(998, 'wrong third level row'); // collapse a second level row aRow = treeGrid.gridAPI.get_row_by_index(3); @@ -576,7 +581,7 @@ describe('IgxTreeGrid - Expanding / Collapsing #tGrid', () => { treeGrid.toggleRow(ri); fix.detectChanges(); for (let rowToCheck = 0; rowToCheck < rows.length; rowToCheck++) { - if (rowToCheck === rowToToggle && treeGrid.gridAPI.allow_expansion_state_change(ri, false)) { + if (rowToCheck === rowToToggle && (treeGrid.gridAPI as IgxTreeGridAPIService).allow_expansion_state_change(ri, false)) { TreeGridFunctions.verifyTreeRowHasExpandedIcon(rows[rowToCheck]); } else { TreeGridFunctions.verifyTreeRowHasCollapsedIcon(rows[rowToCheck]); @@ -671,7 +676,8 @@ describe('IgxTreeGrid - Expanding / Collapsing #tGrid', () => { // expand a root level row let aRow = treeGrid.gridAPI.get_row_by_index(0); - expect(aRow.cells.first.value).toBe(1, 'wrong root level row'); + let cells = (aRow.cells as QueryList).toArray(); + expect(cells[0].value).toBe(1, 'wrong root level row'); expect(aRow.expanded).toBe(false); aRow.expanded = true; fix.detectChanges(); @@ -681,7 +687,8 @@ describe('IgxTreeGrid - Expanding / Collapsing #tGrid', () => { // expand a second level row aRow = treeGrid.gridAPI.get_row_by_index(1); - expect(aRow.cells.first.value).toBe(2, 'wrong second level row'); + cells = (aRow.cells as QueryList).toArray(); + expect(cells[0].value).toBe(2, 'wrong second level row'); expect(aRow.expanded).toBe(false); aRow.expanded = true; fix.detectChanges(); @@ -691,9 +698,11 @@ describe('IgxTreeGrid - Expanding / Collapsing #tGrid', () => { // check third level rows are having the correct values aRow = treeGrid.gridAPI.get_row_by_index(2); - expect(aRow.cells.first.value).toBe(3, 'wrong third level row'); + cells = (aRow.cells as QueryList).toArray(); + expect(cells[0].value).toBe(3, 'wrong third level row'); aRow = treeGrid.gridAPI.get_row_by_index(3); - expect(aRow.cells.first.value).toBe(7, 'wrong third level row'); + cells = (aRow.cells as QueryList).toArray(); + expect(cells[0].value).toBe(7, 'wrong third level row'); // collapse a second level row aRow = treeGrid.gridAPI.get_row_by_index(1); diff --git a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-filtering.spec.ts b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-filtering.spec.ts index c1df4adff53..a4fbacedbb5 100644 --- a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-filtering.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-filtering.spec.ts @@ -285,7 +285,7 @@ describe('IgxTreeGrid - Filtering actions #tGrid', () => { const formattedStrategy = new TreeGridFormattedValuesFilteringStrategy(); grid.filterStrategy = formattedStrategy; const idFormatter = (val: number): number => val % 2; - grid.columns[0].formatter = idFormatter; + grid.columnList.get(0).formatter = idFormatter; fix.detectChanges(); grid.filter('ID', 0, IgxNumberFilteringOperand.instance().condition('equals')); @@ -322,8 +322,8 @@ describe('IgxTreeGrid - Filtering actions #tGrid', () => { grid.data = newData; grid.allowFiltering = true; grid.filterMode = FilterMode.excelStyleFilter; - grid.columns[2].formatter = idFormatter; - grid.columns[2].dataType = 'string'; + grid.columnList.get(2).formatter = idFormatter; + grid.columnList.get(2).dataType = 'string'; fix.detectChanges(); GridFunctions.clickExcelFilterIcon(fix, 'HireDate'); diff --git a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-grouping.spec.ts b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-grouping.spec.ts index 16c8dd61a4e..937c7733171 100644 --- a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-grouping.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-grouping.spec.ts @@ -1,6 +1,5 @@ import { fakeAsync, TestBed, tick, waitForAsync } from '@angular/core/testing'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; -import { DefaultSortingStrategy } from 'igniteui-angular'; import { configureTestSuite } from '../../test-utils/configure-suite'; import { setupGridScrollDetection } from '../../test-utils/helper-utils.spec'; import { IgxTreeGridGroupByAreaTestComponent, IgxTreeGridGroupingComponent } from '../../test-utils/tree-grid-components.spec'; @@ -8,6 +7,7 @@ import { IgxTreeGridGroupByAreaComponent } from '../grouping/tree-grid-group-by- import { TreeGridFunctions } from '../../test-utils/tree-grid-functions.spec'; import { IgxTreeGridModule } from './public_api'; import { IgxTreeGridComponent } from './tree-grid.component'; +import { DefaultSortingStrategy } from '../../data-operations/sorting-strategy'; describe('IgxTreeGrid', () => { configureTestSuite(); @@ -106,7 +106,7 @@ describe('IgxTreeGrid', () => { expect(groupByArea.dropAreaVisible).toBeFalse(); })); - it('is loaded grouped by two fields.', () => { + it('is loaded grouped by two fields.', fakeAsync(() => { const groupArea = fix.debugElement.nativeElement.querySelector('igx-tree-grid-group-by-area'); expect(groupArea).toBeDefined(); const chips = fix.debugElement.nativeElement.querySelectorAll('igx-chip'); @@ -117,10 +117,11 @@ describe('IgxTreeGrid', () => { treeGrid.expandAll(); fix.detectChanges(); + tick(); rows = TreeGridFunctions.getAllRows(fix); - expect(rows.length).toBe(19); - }); + expect(rows.length).toBe(20); + })); it('shows a new group chip when adding a grouping expression', fakeAsync(() => { expect(groupByArea.expressions).toEqual(groupingExpressions); diff --git a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-indentation.spec.ts b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-indentation.spec.ts index fb3648319a8..03c961e6a10 100644 --- a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-indentation.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-indentation.spec.ts @@ -1,5 +1,4 @@ import { TestBed, fakeAsync, tick, waitForAsync } from '@angular/core/testing'; -import { SortingDirection } from '../../data-operations/sorting-expression.interface'; import { IgxTreeGridComponent } from './tree-grid.component'; import { IgxTreeGridModule } from './public_api'; import { IgxTreeGridSimpleComponent, IgxTreeGridPrimaryForeignKeyComponent } from '../../test-utils/tree-grid-components.spec'; @@ -10,6 +9,7 @@ import { UIInteractions } from '../../test-utils/ui-interactions.spec'; import { DropPosition } from '../moving/moving.service'; import { configureTestSuite } from '../../test-utils/configure-suite'; import { NoopAnimationsModule } from '@angular/platform-browser/animations'; +import { SortingDirection } from '../../data-operations/sorting-strategy'; const GRID_RESIZE_CLASS = '.igx-grid-th__resize-handle'; @@ -174,8 +174,8 @@ describe('IgxTreeGrid - Indentation #tGrid', () => { verifyCellsContentAlignment(fix, 'ID', true); // Verify cells of 'ID' are left-aligned. // Moving 'ID' column - const sourceColumn = treeGrid.columns.filter(c => c.field === 'ID')[0]; - let targetColumn = treeGrid.columns.filter(c => c.field === 'Age')[0]; + const sourceColumn = treeGrid.columnList.filter(c => c.field === 'ID')[0]; + let targetColumn = treeGrid.columnList.filter(c => c.field === 'Age')[0]; treeGrid.moveColumn(sourceColumn, targetColumn, DropPosition.BeforeDropTarget); fix.detectChanges(); @@ -183,7 +183,7 @@ describe('IgxTreeGrid - Indentation #tGrid', () => { verifyCellsContentAlignment(fix, 'ID', false); // Verify cells of 'ID' are right-aligned. // Moving 'ID' column - targetColumn = treeGrid.columns.filter(c => c.field === 'Name')[0]; + targetColumn = treeGrid.columnList.filter(c => c.field === 'Name')[0]; treeGrid.moveColumn(sourceColumn, targetColumn, DropPosition.BeforeDropTarget); fix.detectChanges(); @@ -331,8 +331,8 @@ describe('IgxTreeGrid - Indentation #tGrid', () => { verifyCellsContentAlignment(fix, 'ID', true); // Verify cells of 'ID' are left-aligned. // Moving 'ID' column - const sourceColumn = treeGrid.columns.filter(c => c.field === 'ID')[0]; - let targetColumn = treeGrid.columns.filter(c => c.field === 'Age')[0]; + const sourceColumn = treeGrid.columnList.filter(c => c.field === 'ID')[0]; + let targetColumn = treeGrid.columnList.filter(c => c.field === 'Age')[0]; treeGrid.moveColumn(sourceColumn, targetColumn, DropPosition.BeforeDropTarget); fix.detectChanges(); tick(16); @@ -340,7 +340,7 @@ describe('IgxTreeGrid - Indentation #tGrid', () => { verifyCellsContentAlignment(fix, 'ID', false); // Verify cells of 'ID' are right-aligned. // Moving 'ID' column - targetColumn = treeGrid.columns.filter(c => c.field === 'ParentID')[0]; + targetColumn = treeGrid.columnList.filter(c => c.field === 'ParentID')[0]; treeGrid.moveColumn(sourceColumn, targetColumn, DropPosition.BeforeDropTarget); fix.detectChanges(); tick(16); diff --git a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-integration.spec.ts b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-integration.spec.ts index 233421a939a..9ee4b255d22 100644 --- a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-integration.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-integration.spec.ts @@ -1,7 +1,6 @@ import { fakeAsync, TestBed, tick, flush, ComponentFixture, waitForAsync } from '@angular/core/testing'; import { DebugElement } from '@angular/core'; import { IgxTreeGridComponent } from './tree-grid.component'; -import { SortingDirection } from '../../data-operations/sorting-expression.interface'; import { CellType, IgxTreeGridModule } from './public_api'; import { IgxTreeGridSimpleComponent, IgxTreeGridPrimaryForeignKeyComponent, @@ -19,12 +18,13 @@ import { configureTestSuite } from '../../test-utils/configure-suite'; import { IgxToggleModule } from '../../directives/toggle/toggle.directive'; import { IgxNumberFilteringOperand, IgxStringFilteringOperand } from '../../data-operations/filtering-condition'; import { IgxHierarchicalTransactionService } from '../../services/transaction/igx-hierarchical-transaction'; -import { IgxGridTransaction } from '../grid-base.directive'; import { IgxTreeGridRow } from '../grid/public_api'; import { IgxPaginatorComponent } from '../../paginator/paginator.component'; import { HierarchicalTransaction, TransactionType } from '../../services/public_api'; import { DropPosition } from '../moving/moving.service'; import { IgxTreeGridRowComponent } from './tree-grid-row.component'; +import { IgxGridTransaction } from '../common/types'; +import { SortingDirection } from '../../data-operations/sorting-strategy'; const CSS_CLASS_BANNER = 'igx-banner'; const CSS_CLASS_ROW_EDITED = 'igx-grid__tr--edited'; @@ -113,7 +113,7 @@ describe('IgxTreeGrid - Integration #tGrid', () => { it('should transform a non-tree column into a tree column when hiding the original tree-column', () => { TreeGridFunctions.verifyTreeColumn(fix, 'ID', 4); - const column = treeGrid.columns.filter(c => c.field === 'ID')[0]; + const column = treeGrid.columnList.filter(c => c.field === 'ID')[0]; column.hidden = true; fix.detectChanges(); @@ -131,7 +131,7 @@ describe('IgxTreeGrid - Integration #tGrid', () => { treeGrid.pinColumn('Age'); fix.detectChanges(); - const column = treeGrid.columns.filter(c => c.field === 'Age')[0]; + const column = treeGrid.columnList.filter(c => c.field === 'Age')[0]; column.hidden = true; fix.detectChanges(); @@ -142,8 +142,8 @@ describe('IgxTreeGrid - Integration #tGrid', () => { TreeGridFunctions.verifyTreeColumn(fix, 'ID', 4); // Move tree-column - const sourceColumn = treeGrid.columns.filter(c => c.field === 'ID')[0]; - const targetColumn = treeGrid.columns.filter(c => c.field === 'HireDate')[0]; + const sourceColumn = treeGrid.columnList.filter(c => c.field === 'ID')[0]; + const targetColumn = treeGrid.columnList.filter(c => c.field === 'HireDate')[0]; treeGrid.moveColumn(sourceColumn, targetColumn); fix.detectChanges(); @@ -227,7 +227,7 @@ describe('IgxTreeGrid - Integration #tGrid', () => { it('should transform a non-tree column into a tree column when hiding the original tree-column', () => { TreeGridFunctions.verifyTreeColumn(fix, 'ID', 5); - const column = treeGrid.columns.filter(c => c.field === 'ID')[0]; + const column = treeGrid.columnList.filter(c => c.field === 'ID')[0]; column.hidden = true; fix.detectChanges(); @@ -245,7 +245,7 @@ describe('IgxTreeGrid - Integration #tGrid', () => { treeGrid.pinColumn('Age'); fix.detectChanges(); - const column = treeGrid.columns.filter(c => c.field === 'Age')[0]; + const column = treeGrid.columnList.filter(c => c.field === 'Age')[0]; column.hidden = true; fix.detectChanges(); @@ -256,8 +256,8 @@ describe('IgxTreeGrid - Integration #tGrid', () => { TreeGridFunctions.verifyTreeColumn(fix, 'ID', 5); // Move tree-column - const sourceColumn = treeGrid.columns.filter(c => c.field === 'ID')[0]; - const targetColumn = treeGrid.columns.filter(c => c.field === 'JobTitle')[0]; + const sourceColumn = treeGrid.columnList.filter(c => c.field === 'ID')[0]; + const targetColumn = treeGrid.columnList.filter(c => c.field === 'JobTitle')[0]; treeGrid.moveColumn(sourceColumn, targetColumn); fix.detectChanges(); @@ -333,8 +333,7 @@ describe('IgxTreeGrid - Integration #tGrid', () => { cell.editMode = true; fix.detectChanges(); - // const editRow = cell.row.nativeElement; - const editRow = cellElem.intRow.nativeElement; + const editRow = (cellElem as any).intRow.nativeElement; const banner = fix.debugElement.query(By.css('.' + CSS_CLASS_BANNER)).nativeElement; const bannerTop = banner.getBoundingClientRect().top; @@ -366,7 +365,7 @@ describe('IgxTreeGrid - Integration #tGrid', () => { fix.detectChanges(); // const editRow = cell.row.nativeElement; - const editRow = cell.intRow.nativeElement; + const editRow = grid.gridAPI.get_row_by_index(1).nativeElement; const banner = fix.debugElement.query(By.css('.' + CSS_CLASS_BANNER)).nativeElement; const bannerTop = banner.getBoundingClientRect().top; @@ -393,7 +392,7 @@ describe('IgxTreeGrid - Integration #tGrid', () => { fix.detectChanges(); // const editRow = cell.row.nativeElement; - const editRow = cell.intRow.nativeElement; + const editRow = grid.gridAPI.get_row_by_index(2).nativeElement; const banner = fix.debugElement.query(By.css('.' + CSS_CLASS_BANNER)).nativeElement; const bannerBottom = banner.getBoundingClientRect().bottom; @@ -415,7 +414,7 @@ describe('IgxTreeGrid - Integration #tGrid', () => { fix.detectChanges(); // const editRow = cell.row.nativeElement; - const editRow = cell.intRow.nativeElement; + const editRow = grid.gridAPI.get_row_by_index(grid.rowList.length - 1).nativeElement; const banner = fix.debugElement.query(By.css('.' + CSS_CLASS_BANNER)).nativeElement; const bannerBottom = banner.getBoundingClientRect().bottom; @@ -1249,7 +1248,7 @@ describe('IgxTreeGrid - Integration #tGrid', () => { it('Should transform a hidden column to a tree column when it becomes visible and it is part of a column group', () => { TreeGridFunctions.verifyTreeColumnInMultiColHeaders(fix, 'ID', 4); - const column = treeGrid.columns.filter(c => c.field === 'ID')[0]; + const column = treeGrid.columnList.filter(c => c.field === 'ID')[0]; column.hidden = true; fix.detectChanges(); @@ -1263,13 +1262,13 @@ describe('IgxTreeGrid - Integration #tGrid', () => { it('Should transform a hidden column to a tree column when all columns from left-most group are hidden', () => { // hide Name column so that the tested columns (ID and HireDate) are not part of the same group - const columnName = treeGrid.columns.filter(c => c.field === 'Name')[0]; + const columnName = treeGrid.columnList.filter(c => c.field === 'Name')[0]; columnName.hidden = true; fix.detectChanges(); TreeGridFunctions.verifyTreeColumnInMultiColHeaders(fix, 'ID', 3); - const column = treeGrid.columns.filter(c => c.field === 'ID')[0]; + const column = treeGrid.columnList.filter(c => c.field === 'ID')[0]; column.hidden = true; fix.detectChanges(); @@ -1285,8 +1284,8 @@ describe('IgxTreeGrid - Integration #tGrid', () => { TreeGridFunctions.verifyTreeColumnInMultiColHeaders(fix, 'ID', 4); // Move tree-column - const sourceColumn = treeGrid.columns.filter(c => c.field === 'ID')[0]; - const targetColumn = treeGrid.columns.filter(c => c.field === 'Name')[0]; + const sourceColumn = treeGrid.columnList.filter(c => c.field === 'ID')[0]; + const targetColumn = treeGrid.columnList.filter(c => c.field === 'Name')[0]; treeGrid.moveColumn(sourceColumn, targetColumn); fix.detectChanges(); @@ -1314,8 +1313,8 @@ describe('IgxTreeGrid - Integration #tGrid', () => { TreeGridFunctions.verifyTreeColumnInMultiColHeaders(fix, 'ID', 4); // Move group-column - const sourceColumn = treeGrid.columns.filter(c => c.header === 'General Information')[0]; - const targetColumn = treeGrid.columns.filter(c => c.header === 'Additional Information')[0]; + const sourceColumn = treeGrid.columnList.filter(c => c.header === 'General Information')[0]; + const targetColumn = treeGrid.columnList.filter(c => c.header === 'Additional Information')[0]; treeGrid.moveColumn(sourceColumn, targetColumn); fix.detectChanges(); @@ -1548,7 +1547,7 @@ describe('IgxTreeGrid - Integration #tGrid', () => { treeGrid.pinRow(rowToPin.data[primaryKey]); - const firstColumnField = treeGrid.columns[0].field; + const firstColumnField = treeGrid.columnList.get(0).field; const pinnedChipPosition = treeGrid.gridAPI.get_cell_by_index(1, firstColumnField); const pinnedRowCell = treeGrid.gridAPI.get_cell_by_index(0, firstColumnField); const wrongChipPosition = treeGrid.gridAPI.get_cell_by_index(2, firstColumnField); @@ -1564,9 +1563,9 @@ describe('IgxTreeGrid - Integration #tGrid', () => { treeGrid.pinRow(rowToPin.data[primaryKey]); - const thirdColumnField = treeGrid.columns[2].field; + const thirdColumnField = treeGrid.columnList.get(2).field; - treeGrid.moveColumn(treeGrid.columns[2], treeGrid.columns[0], DropPosition.BeforeDropTarget); + treeGrid.moveColumn(treeGrid.columnList.get(2), treeGrid.columnList.get(0), DropPosition.BeforeDropTarget); fix.detectChanges(); const pinnedChipExpectedPosition = treeGrid.gridAPI.get_cell_by_index(1, thirdColumnField); @@ -1725,9 +1724,8 @@ describe('IgxTreeGrid - Integration #tGrid', () => { expect(firstRow.children.length).toEqual(1); expect(treeGrid.getRowByIndex(1).parent.rowID).toEqual(147); - const firstColumnField = treeGrid.columns[0].field; + const firstColumnField = treeGrid.columnList.get(0).field; const pinnedChipExpectedPosition = treeGrid.gridAPI.get_cell_by_index(1, firstColumnField); - const pinnedRow = pinnedChipExpectedPosition.row; expect(pinnedChipExpectedPosition.nativeElement.getElementsByClassName('igx-grid__td--pinned-chip').length).toBe(0); }); diff --git a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-keyBoardNav.spec.ts b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-keyBoardNav.spec.ts index 164f6ccb53f..bb72341f275 100644 --- a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-keyBoardNav.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-keyBoardNav.spec.ts @@ -1,6 +1,6 @@ import { TestBed, fakeAsync, tick, waitForAsync } from '@angular/core/testing'; import { NoopAnimationsModule } from '@angular/platform-browser/animations'; -import { IgxTreeGridModule, IgxTreeGridComponent } from './public_api'; +import { IgxTreeGridModule, IgxTreeGridComponent, CellType } from './public_api'; import { IgxTreeGridWithNoScrollsComponent, IgxTreeGridWithScrollsComponent } from '../../test-utils/tree-grid-components.spec'; import { TreeGridFunctions } from '../../test-utils/tree-grid-functions.spec'; import { UIInteractions, wait } from '../../test-utils/ui-interactions.spec'; @@ -8,7 +8,6 @@ import { configureTestSuite } from '../../test-utils/configure-suite'; import { setupGridScrollDetection } from '../../test-utils/helper-utils.spec'; import { GridFunctions } from '../../test-utils/grid-functions.spec'; import { DebugElement } from '@angular/core'; -import { IgxGridCellComponent } from '../cell.component'; const DEBOUNCETIME = 30; @@ -409,7 +408,7 @@ describe('IgxTreeGrid - Key Board Navigation #tGrid', () => { it('should navigate with arrow Up and Down keys', async () => { spyOn(treeGrid.selected, 'emit').and.callThrough(); - const firstCell: IgxGridCellComponent = treeGrid.gridAPI.get_cell_by_index(5, 'ID'); + const firstCell: CellType = treeGrid.gridAPI.get_cell_by_index(5, 'ID'); UIInteractions.simulateClickAndSelectEvent(firstCell); fix.detectChanges(); diff --git a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-multi-cell-selection.spec.ts b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-multi-cell-selection.spec.ts index 4d0afd67884..42c321f7625 100644 --- a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-multi-cell-selection.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-multi-cell-selection.spec.ts @@ -256,7 +256,7 @@ describe('IgxTreeGrid - Multi Cell selection #tGrid', () => { GridSelectionFunctions.verifyCellsRegionSelected(treeGrid, 3, 9, 2, 4); for (let i = 4; i > 2; i--) { - cell = treeGrid.gridAPI.get_cell_by_index(3, treeGrid.columns[i].field); + cell = treeGrid.gridAPI.get_cell_by_index(3, treeGrid.columnList.get(i).field); UIInteractions.triggerKeyDownEvtUponElem('arrowleft', cell.nativeElement, true, false, true); await wait(30); fix.detectChanges(); @@ -1058,7 +1058,7 @@ describe('IgxTreeGrid - Multi Cell selection #tGrid', () => { expect(startCell.active).toBe(true); for (let i = 5; i < 7; i++) { - const cell = treeGrid.gridAPI.get_cell_by_index(i, treeGrid.columns[i - 3].field); + const cell = treeGrid.gridAPI.get_cell_by_index(i, treeGrid.columnList.get(i - 3).field); UIInteractions.simulatePointerOverElementEvent('pointerenter', cell.nativeElement); detect(); GridSelectionFunctions.verifyCellsRegionSelected(treeGrid, 4, i, 1, i - 3); @@ -1072,7 +1072,7 @@ describe('IgxTreeGrid - Multi Cell selection #tGrid', () => { } for (let i = 2; i >= 0; i--) { - const cell = treeGrid.gridAPI.get_cell_by_index(1, treeGrid.columns[i].field); + const cell = treeGrid.gridAPI.get_cell_by_index(1, treeGrid.columnList.get(i).field); UIInteractions.simulatePointerOverElementEvent('pointerenter', cell.nativeElement); detect(); GridSelectionFunctions.verifyCellsRegionSelected(treeGrid, 4, 1, 1, i); @@ -1086,7 +1086,7 @@ describe('IgxTreeGrid - Multi Cell selection #tGrid', () => { } for (let i = 8; i > 6; i--) { - const cell = treeGrid.gridAPI.get_cell_by_index(i, treeGrid.columns[9 - i].field); + const cell = treeGrid.gridAPI.get_cell_by_index(i, treeGrid.columnList.get(9 - i).field); UIInteractions.simulatePointerOverElementEvent('pointerenter', cell.nativeElement); detect(); GridSelectionFunctions.verifyCellsRegionSelected(treeGrid, 4, i, 1, 9 - i); diff --git a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-row.component.ts b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-row.component.ts index a150bcd45d9..3ce7164c8f2 100644 --- a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-row.component.ts +++ b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-row.component.ts @@ -1,8 +1,6 @@ import { Component, forwardRef, Input, ViewChildren, QueryList, HostBinding, DoCheck, ChangeDetectionStrategy } from '@angular/core'; -import { IgxTreeGridComponent } from './tree-grid.component'; import { IgxRowDirective } from '../row.directive'; import { ITreeGridRecord } from './tree-grid.interfaces'; -import { IgxTreeGridAPIService } from './tree-grid-api.service'; @Component({ changeDetection: ChangeDetectionStrategy.OnPush, @@ -10,7 +8,7 @@ import { IgxTreeGridAPIService } from './tree-grid-api.service'; templateUrl: 'tree-grid-row.component.html', providers: [{ provide: IgxRowDirective, useExisting: forwardRef(() => IgxTreeGridRowComponent) }] }) -export class IgxTreeGridRowComponent extends IgxRowDirective implements DoCheck { +export class IgxTreeGridRowComponent extends IgxRowDirective implements DoCheck { @ViewChildren('treeCell') protected _cells: QueryList; @@ -107,7 +105,7 @@ export class IgxTreeGridRowComponent extends IgxRowDirective { verifySearchResult(fixNativeElement, 6, 0); // Apply asc sorting - treeGrid.columns.filter(c => c.field === 'JobTitle')[0].sortable = true; + treeGrid.columnList.filter(c => c.field === 'JobTitle')[0].sortable = true; fix.detectChanges(); treeGrid.sort({fieldName: 'JobTitle', dir: SortingDirection.Asc, ignoreCase: true }); fix.detectChanges(); @@ -202,7 +202,7 @@ describe('IgxTreeGrid - search API #tGrid', () => { it('Should update search highlights when clearing sorting', () => { // Apply asc sorting - treeGrid.columns.filter(c => c.field === 'JobTitle')[0].sortable = true; + treeGrid.columnList.filter(c => c.field === 'JobTitle')[0].sortable = true; fix.detectChanges(); treeGrid.sort({fieldName: 'JobTitle', dir: SortingDirection.Asc, ignoreCase: true }); fix.detectChanges(); @@ -229,7 +229,7 @@ describe('IgxTreeGrid - search API #tGrid', () => { verifySearchResult(cell.nativeElement, 1, 0); // Pin column - const column = treeGrid.columns.filter(c => c.field === 'Name')[0]; + const column = treeGrid.columnList.filter(c => c.field === 'Name')[0]; column.pinned = true; fix.detectChanges(); @@ -257,7 +257,7 @@ describe('IgxTreeGrid - search API #tGrid', () => { verifySearchResult(cell.nativeElement, 1, 0); // Hide 'Age' column - const column = treeGrid.columns.filter(c => c.field === 'Age')[0]; + const column = treeGrid.columnList.filter(c => c.field === 'Age')[0]; column.hidden = true; fix.detectChanges(); @@ -279,7 +279,7 @@ describe('IgxTreeGrid - search API #tGrid', () => { verifySearchResult(cell.nativeElement, 1, 0); // Hide 'Name' column - const column = treeGrid.columns.filter(c => c.field === 'Name')[0]; + const column = treeGrid.columnList.filter(c => c.field === 'Name')[0]; column.hidden = true; fix.detectChanges(); @@ -322,7 +322,7 @@ describe('IgxTreeGrid - search API #tGrid', () => { treeGrid = fix.componentInstance.treeGrid; treeGrid.expansionDepth = 0; treeGrid.height = '400px'; - treeGrid.columns[3].hasSummary = false; + treeGrid.columnList.get(3).hasSummary = false; fix.detectChanges(); }); diff --git a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-selection.spec.ts b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-selection.spec.ts index 15c84a7d332..5590eccd0f1 100644 --- a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-selection.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-selection.spec.ts @@ -1,5 +1,4 @@ import { TestBed, fakeAsync, tick, waitForAsync } from '@angular/core/testing'; -import { SortingDirection } from '../../data-operations/sorting-expression.interface'; import { IgxTreeGridComponent } from './tree-grid.component'; import { IgxGridCell, IgxTreeGridModule } from './public_api'; import { @@ -31,6 +30,7 @@ import { By } from '@angular/platform-browser'; import { FilteringExpressionsTree } from '../../data-operations/filtering-expressions-tree'; import { FilteringLogic } from '../../data-operations/filtering-expression.interface'; import { IRowSelectionEventArgs } from '../common/events'; +import { SortingDirection } from '../../data-operations/sorting-strategy'; describe('IgxTreeGrid - Selection #tGrid', () => { configureTestSuite(); diff --git a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-sorting.spec.ts b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-sorting.spec.ts index eb3e289a49a..37525fb44b0 100644 --- a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-sorting.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-sorting.spec.ts @@ -1,11 +1,10 @@ import { TestBed, fakeAsync, tick, waitForAsync } from '@angular/core/testing'; -import { SortingDirection } from '../../data-operations/sorting-expression.interface'; import { IgxTreeGridComponent } from './tree-grid.component'; import { IgxTreeGridModule } from './public_api'; import { IgxTreeGridSortingComponent } from '../../test-utils/tree-grid-components.spec'; import { TreeGridFunctions } from '../../test-utils/tree-grid-functions.spec'; import { configureTestSuite } from '../../test-utils/configure-suite'; -import { DefaultSortingStrategy } from '../../data-operations/sorting-strategy'; +import { DefaultSortingStrategy, SortingDirection } from '../../data-operations/sorting-strategy'; import { NoopAnimationsModule } from '@angular/platform-browser/animations'; import { GridFunctions } from '../../test-utils/grid-functions.spec'; diff --git a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.component.spec.ts b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.component.spec.ts index d82f5e6d724..9d39192b8ac 100644 --- a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.component.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.component.spec.ts @@ -112,7 +112,7 @@ describe('IgxTreeGrid Component Tests #tGrid', () => { it('should display horizontal scroll bar when column width is set in %', () => { fix.detectChanges(); - grid.columns[0].width = '50%'; + grid.columnList.get(0).width = '50%'; fix.detectChanges(); const horizontalScroll = fix.nativeElement.querySelector('igx-horizontal-virtual-helper'); @@ -133,7 +133,7 @@ describe('IgxTreeGrid Component Tests #tGrid', () => { fix.detectChanges(); const expectedColumns = ['ID', 'ParentID', 'Name', 'JobTitle', 'Age']; - expect(grid.columns.map(c => c.field)).toEqual(expectedColumns); + expect(grid.columnList.map(c => c.field)).toEqual(expectedColumns); })); }); diff --git a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.component.ts b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.component.ts index b19a163b5d1..e26da1dd5b4 100644 --- a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.component.ts +++ b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.component.ts @@ -3,7 +3,6 @@ import { Component, HostBinding, Input, - forwardRef, OnInit, TemplateRef, QueryList, @@ -20,11 +19,13 @@ import { IterableDiffers, ViewContainerRef, Optional, - LOCALE_ID + LOCALE_ID, + ApplicationRef, + NgModuleRef, + Injector } from '@angular/core'; import { IgxTreeGridAPIService } from './tree-grid-api.service'; -import { IgxGridBaseDirective, IgxGridTransaction } from '../grid-base.directive'; -import { GridBaseAPIService } from '../api.service'; +import { IgxGridBaseDirective } from '../grid-base.directive'; import { ITreeGridRecord } from './tree-grid.interfaces'; import { IRowDataEventArgs, IRowToggleEventArgs } from '../common/events'; import { @@ -34,7 +35,6 @@ import { TransactionEventOrigin, StateUpdateEvent } from '../../services/transaction/transaction'; -import { HierarchicalTransactionService, IgxOverlayService } from '../../services/public_api'; import { IgxFilteringService } from '../filtering/grid-filtering.service'; import { IgxGridSummaryService } from '../summaries/grid-summary.service'; import { IgxGridSelectionService } from '../selection/selection.service'; @@ -43,20 +43,21 @@ import { first, takeUntil } from 'rxjs/operators'; import { IgxRowLoadingIndicatorTemplateDirective } from './tree-grid.directives'; import { IgxForOfSyncService, IgxForOfScrollSyncService } from '../../directives/for-of/for_of.sync.service'; import { IgxGridNavigationService } from '../grid-navigation.service'; -import { GridType } from '../common/grid.interface'; +import { CellType, GridServiceType, GridType, IGX_GRID_BASE, IGX_GRID_SERVICE_BASE, RowType } from '../common/grid.interface'; import { IgxColumnComponent } from '../columns/column.component'; import { IgxTreeGridSelectionService } from './tree-grid-selection.service'; import { GridInstanceType, GridSelectionMode } from '../common/enums'; import { IgxSummaryRow, IgxTreeGridRow } from '../grid-public-row'; -import { RowType } from '../common/row.interface'; import { IgxGridCRUDService } from '../common/crud.service'; import { IgxTreeGridGroupByAreaComponent } from '../grouping/tree-grid-group-by-area.component'; import { IgxGridCell } from '../grid-public-cell'; -import { CellType } from '../common/cell.interface'; import { IgxHierarchicalTransactionFactory } from '../../services/transaction/transaction-factory.service'; import { IgxColumnResizingService } from '../resizing/resizing.service'; import { DOCUMENT } from '@angular/common'; import { DisplayDensityToken, IDisplayDensityOptions } from '../../core/density'; +import { HierarchicalTransactionService } from '../../services/transaction/hierarchical-transaction'; +import { IgxOverlayService } from '../../services/overlay/overlay'; +import { IgxGridTransaction } from '../common/types'; let NEXT_ID = 0; @@ -78,7 +79,6 @@ let NEXT_ID = 0; */ @Component({ changeDetection: ChangeDetectionStrategy.OnPush, - preserveWhitespaces: false, selector: 'igx-tree-grid', templateUrl: 'tree-grid.component.html', providers: [ @@ -86,8 +86,8 @@ let NEXT_ID = 0; IgxGridSummaryService, IgxGridNavigationService, { provide: IgxGridSelectionService, useClass: IgxTreeGridSelectionService }, - { provide: GridBaseAPIService, useClass: IgxTreeGridAPIService }, - { provide: IgxGridBaseDirective, useExisting: forwardRef(() => IgxTreeGridComponent) }, + { provide: IGX_GRID_SERVICE_BASE, useClass: IgxTreeGridAPIService }, + { provide: IGX_GRID_BASE, useExisting: IgxTreeGridComponent }, IgxFilteringService, IgxForOfSyncService, IgxForOfScrollSyncService @@ -383,14 +383,15 @@ export class IgxTreeGridComponent extends IgxGridBaseDirective implements GridTy } // Kind of stupid - private get _gridAPI(): IgxTreeGridAPIService { - return this.gridAPI as IgxTreeGridAPIService; - } + // private get _gridAPI(): IgxTreeGridAPIService { + // return this.gridAPI as IgxTreeGridAPIService; + // } constructor( public selectionService: IgxGridSelectionService, public colResizingService: IgxColumnResizingService, - public gridAPI: GridBaseAPIService, + @Inject(IGX_GRID_SERVICE_BASE) public gridAPI: GridServiceType, + // public gridAPI: GridBaseAPIService, protected transactionFactory: IgxHierarchicalTransactionFactory, private _elementRef: ElementRef, private _zone: NgZone, @@ -399,6 +400,10 @@ export class IgxTreeGridComponent extends IgxGridBaseDirective implements GridTy protected resolver: ComponentFactoryResolver, protected differs: IterableDiffers, protected viewRef: ViewContainerRef, + appRef: ApplicationRef, + moduleRef: NgModuleRef, + factoryResolver: ComponentFactoryResolver, + injector: Injector, public navigation: IgxGridNavigationService, public filteringService: IgxFilteringService, @Inject(IgxOverlayService) protected overlayService: IgxOverlayService, @@ -407,10 +412,10 @@ export class IgxTreeGridComponent extends IgxGridBaseDirective implements GridTy @Inject(LOCALE_ID) localeId: string, protected platform: PlatformUtil, @Optional() @Inject(IgxGridTransaction) protected _diTransactions?: - HierarchicalTransactionService, - ) { + HierarchicalTransactionService, + ) { super(selectionService, colResizingService, gridAPI, transactionFactory, - _elementRef, _zone, document, cdr, resolver, differs, viewRef, navigation, + _elementRef, _zone, document, cdr, resolver, differs, viewRef, appRef, moduleRef,factoryResolver, injector, navigation, filteringService, overlayService, summaryService, _displayDensityOptions, localeId, platform); } @@ -430,7 +435,7 @@ export class IgxTreeGridComponent extends IgxGridBaseDirective implements GridTy const row = this.getRowByIndex(rowIndex); const column = this.columnList.find((col) => col.visibleIndex === index); if (row && row instanceof IgxTreeGridRow && column) { - return new IgxGridCell(this, rowIndex, column.field); + return new IgxGridCell(this as any, rowIndex, column.field); } } @@ -447,7 +452,7 @@ export class IgxTreeGridComponent extends IgxGridBaseDirective implements GridTy // TODO: cascade selection logic should be refactor to be handled in the already existing subs this.rowAddedNotifier.pipe(takeUntil(this.destroy$)).subscribe(args => { if (this.rowSelection === GridSelectionMode.multipleCascade) { - let rec = this._gridAPI.get_rec_by_id(this.primaryKey ? args.data[this.primaryKey] : args.data); + let rec = this.gridAPI.get_rec_by_id(this.primaryKey ? args.data[this.primaryKey] : args.data); if (rec && rec.parent) { this.gridAPI.grid.selectionService.updateCascadeSelectionOnFilterAndCRUD( new Set([rec.parent]), rec.parent.rowID); @@ -455,7 +460,7 @@ export class IgxTreeGridComponent extends IgxGridBaseDirective implements GridTy // The record is still not available // Wait for the change detection to update records through pipes requestAnimationFrame(() => { - rec = this._gridAPI.get_rec_by_id(this.primaryKey ? + rec = this.gridAPI.get_rec_by_id(this.primaryKey ? args.data[this.primaryKey] : args.data); if (rec && rec.parent) { this.gridAPI.grid.selectionService.updateCascadeSelectionOnFilterAndCRUD( @@ -470,7 +475,7 @@ export class IgxTreeGridComponent extends IgxGridBaseDirective implements GridTy this.rowDeletedNotifier.pipe(takeUntil(this.destroy$)).subscribe(args => { if (this.rowSelection === GridSelectionMode.multipleCascade) { if (args.data) { - const rec = this._gridAPI.get_rec_by_id( + const rec = this.gridAPI.get_rec_by_id( this.primaryKey ? args.data[this.primaryKey] : args.data); this.handleCascadeSelection(args, rec); } else { @@ -714,7 +719,7 @@ export class IgxTreeGridComponent extends IgxGridBaseDirective implements GridTy // if this is flat self-referencing data, and CascadeOnDelete is set to true // and if we have transactions we should start pending transaction. This allows // us in case of delete action to delete all child rows as single undo action - return this._gridAPI.deleteRowById(rowId); + return this.gridAPI.deleteRowById(rowId); } @@ -750,7 +755,7 @@ export class IgxTreeGridComponent extends IgxGridBaseDirective implements GridTy if (index < 0 || index >= this.filteredSortedData.length) { return undefined; } - return new IgxTreeGridRow(this, index, rec); + return new IgxTreeGridRow(this as any, index, rec); } /** @@ -798,7 +803,7 @@ export class IgxTreeGridComponent extends IgxGridBaseDirective implements GridTy const row = this.getRowByIndex(rowIndex); const column = this.columnList.find((col) => col.field === columnField); if (row && row instanceof IgxTreeGridRow && column) { - return new IgxGridCell(this, rowIndex, columnField); + return new IgxGridCell(this as any, rowIndex, columnField); } } @@ -818,7 +823,7 @@ export class IgxTreeGridComponent extends IgxGridBaseDirective implements GridTy const row = this.getRowByKey(rowSelector); const column = this.columnList.find((col) => col.field === columnField); if (row && column) { - return new IgxGridCell(this, row.index, columnField); + return new IgxGridCell(this as any, row.index, columnField); } } @@ -863,14 +868,14 @@ export class IgxTreeGridComponent extends IgxGridBaseDirective implements GridTy const rec: any = data ?? this.dataView[index]; if (this.isSummaryRow(rec)) { - row = new IgxSummaryRow(this, index, rec.summaries, GridInstanceType.TreeGrid); + row = new IgxSummaryRow(this as any, index, rec.summaries, GridInstanceType.TreeGrid); } if (!row && rec) { const isTreeRow = this.isTreeRow(rec); const dataRec = isTreeRow ? rec.data : rec; const treeRow = isTreeRow ? rec : undefined; - row = new IgxTreeGridRow(this, index, dataRec, treeRow); + row = new IgxTreeGridRow(this as any, index, dataRec, treeRow); } return row; @@ -899,7 +904,7 @@ export class IgxTreeGridComponent extends IgxGridBaseDirective implements GridTy actions = event.actions ? event.actions.filter(x => x.transaction.type === TransactionType.ADD) : []; if (this.rowSelection === GridSelectionMode.multipleCascade) { if (event.actions[0].transaction.type === 'add') { - const rec = this._gridAPI.get_rec_by_id(event.actions[0].transaction.id); + const rec = this.gridAPI.get_rec_by_id(event.actions[0].transaction.id); this.handleCascadeSelection(event, rec); } else { this.handleCascadeSelection(event); @@ -935,9 +940,9 @@ export class IgxTreeGridComponent extends IgxGridBaseDirective implements GridTy if (typeof (row) !== 'number') { const rowData = row; - const rowID = this._gridAPI.get_row_id(rowData); + const rowID = this.gridAPI.get_row_id(rowData); record = this.processedRecords.get(rowID); - this._gridAPI.expand_path_to_record(record); + this.gridAPI.expand_path_to_record(record); if (this.paginator) { const rowIndex = this.processedExpandedFlatData.indexOf(rowData); @@ -1000,7 +1005,7 @@ export class IgxTreeGridComponent extends IgxGridBaseDirective implements GridTy // return only row components (i.e. records in view). const rowToDeselect = this.records.get(recordID); this.selectionService.deselectRow(recordID); - this._gridAPI.get_selected_children(rowToDeselect, selectedChildren); + this.gridAPI.get_selected_children(rowToDeselect, selectedChildren); if (selectedChildren.length > 0) { selectedChildren.forEach(x => this.deselectChildren(x)); } @@ -1073,7 +1078,7 @@ export class IgxTreeGridComponent extends IgxGridBaseDirective implements GridTy // Wait for the change detection to update records through the pipes requestAnimationFrame(() => { if (rec === null) { - rec = this._gridAPI.get_rec_by_id((event as StateUpdateEvent).actions[0].transaction.id); + rec = this.gridAPI.get_rec_by_id((event as StateUpdateEvent).actions[0].transaction.id); } if (rec && rec.parent) { this.gridAPI.grid.selectionService.updateCascadeSelectionOnFilterAndCRUD( diff --git a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.filtering.pipe.ts b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.filtering.pipe.ts index 7ad5157109e..cec938cb243 100644 --- a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.filtering.pipe.ts +++ b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.filtering.pipe.ts @@ -1,32 +1,21 @@ -import { Pipe, PipeTransform } from '@angular/core'; -import { GridBaseAPIService } from '../api.service'; -import { IgxTreeGridComponent } from './tree-grid.component'; +import { Inject, Pipe, PipeTransform } from '@angular/core'; import { IFilteringStrategy } from '../../data-operations/filtering-strategy'; import { IFilteringExpressionsTree, FilteringExpressionsTree } from '../../data-operations/filtering-expressions-tree'; import { IFilteringState } from '../../data-operations/filtering-state.interface'; import { ITreeGridRecord } from './tree-grid.interfaces'; -import { IgxTreeGridAPIService } from './tree-grid-api.service'; -import { IgxGridBaseDirective } from '../grid/public_api'; -import { GridType } from '../common/grid.interface'; +import { GridType, IGX_GRID_BASE } from '../common/grid.interface'; import { TreeGridFilteringStrategy } from './tree-grid.filtering.strategy'; /** @hidden */ -@Pipe({ - name: 'treeGridFiltering', - pure: true -}) +@Pipe({name: 'treeGridFiltering'}) export class IgxTreeGridFilteringPipe implements PipeTransform { - private gridAPI: IgxTreeGridAPIService; - constructor(gridAPI: GridBaseAPIService) { - this.gridAPI = gridAPI as IgxTreeGridAPIService; - } + constructor(@Inject(IGX_GRID_BASE) private grid: GridType) {} public transform(hierarchyData: ITreeGridRecord[], expressionsTree: IFilteringExpressionsTree, filterStrategy: IFilteringStrategy, advancedFilteringExpressionsTree: IFilteringExpressionsTree, _: number, __: number, pinned?): ITreeGridRecord[] { - const grid: IgxTreeGridComponent = this.gridAPI.grid; const state: IFilteringState = { expressionsTree, advancedExpressionsTree: advancedFilteringExpressionsTree, @@ -38,19 +27,19 @@ export class IgxTreeGridFilteringPipe implements PipeTransform { } if (FilteringExpressionsTree.empty(state.expressionsTree) && FilteringExpressionsTree.empty(state.advancedExpressionsTree)) { - grid.setFilteredData(null, pinned); + this.grid.setFilteredData(null, pinned); return hierarchyData; } - const result = this.filter(hierarchyData, state, grid); + const result = this.filter(hierarchyData, state, this.grid); const filteredData: any[] = []; - this.expandAllRecursive(grid, result, grid.expansionStates, filteredData); - grid.setFilteredData(filteredData, pinned); + this.expandAllRecursive(this.grid, result, this.grid.expansionStates, filteredData); + this.grid.setFilteredData(filteredData, pinned); return result; } - private expandAllRecursive(grid: IgxTreeGridComponent, data: ITreeGridRecord[], + private expandAllRecursive(grid: GridType, data: ITreeGridRecord[], expandedStates: Map, filteredData: any[]) { for (const rec of data) { filteredData.push(rec.data); diff --git a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.grouping.pipe.ts b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.grouping.pipe.ts index 858fad0f885..06755f4c214 100644 --- a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.grouping.pipe.ts +++ b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.grouping.pipe.ts @@ -1,8 +1,9 @@ import { Pipe, PipeTransform } from '@angular/core'; +import { formatDate } from '../../core/utils'; import { GridColumnDataType } from '../../data-operations/data-util'; import { IGroupingExpression } from '../../data-operations/grouping-expression.interface'; -import { IgxSorting } from '../../data-operations/sorting-strategy'; -import { IgxTreeGridComponent } from './tree-grid.component'; +import { GridType } from '../common/grid.interface'; +import { IgxSorting } from '../common/strategy'; const HIDDEN_FIELD_NAME = '_Igx_Hidden_Data_'; @@ -41,13 +42,13 @@ export class IgxGroupedTreeGridSorting extends IgxSorting { name: 'treeGridGrouping' }) export class IgxTreeGridGroupingPipe implements PipeTransform { - private grid: IgxTreeGridComponent; + private grid: GridType; public transform(collection: any[], groupingExpressions: IGroupingExpression[], groupKey: string, childDataKey: string, - grid: IgxTreeGridComponent, + grid: GridType, aggregations?: ITreeGridAggregation[] ): any[] { if (groupingExpressions.length === 0) { @@ -117,7 +118,7 @@ export class IgxTreeGridGroupingPipe implements PipeTransform { const map: Map = new Map(); for (const record of array) { const value = isDateTime - ? this.grid.datePipe.transform(record[key]) + ? formatDate(record[key], column.pipeArgs.format, this.grid.locale) : record[key]; let groupByRecord: GroupByRecord; diff --git a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.pipes.ts b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.pipes.ts index 3a46fb145f5..a70048ab456 100644 --- a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.pipes.ts +++ b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.pipes.ts @@ -1,34 +1,23 @@ -import { Pipe, PipeTransform } from '@angular/core'; +import { Inject, Pipe, PipeTransform } from '@angular/core'; import { cloneArray, cloneHierarchicalArray } from '../../core/utils'; import { DataUtil } from '../../data-operations/data-util'; -import { IgxTreeGridAPIService } from './tree-grid-api.service'; -import { GridBaseAPIService } from '../api.service'; -import { IgxTreeGridComponent } from './tree-grid.component'; import { ITreeGridRecord } from './tree-grid.interfaces'; -import { IgxGridBaseDirective } from '../grid/public_api'; -import { ISortingExpression } from '../../data-operations/sorting-expression.interface'; -import { GridType } from '../common/grid.interface'; -import { IGridSortingStrategy } from '../../data-operations/sorting-strategy'; +import { GridType, IGX_GRID_BASE } from '../common/grid.interface'; import { GridPagingMode } from '../common/enums'; import { TransactionType } from '../../services/public_api'; import { IgxAddRow } from '../common/crud.service'; +import { ISortingExpression } from '../../data-operations/sorting-strategy'; +import { IGridSortingStrategy } from '../common/strategy'; /** * @hidden */ -@Pipe({ - name: 'treeGridHierarchizing', - pure: true -}) +@Pipe({ name: 'treeGridHierarchizing' }) export class IgxTreeGridHierarchizingPipe implements PipeTransform { - private gridAPI: IgxTreeGridAPIService; - constructor(gridAPI: GridBaseAPIService) { - this.gridAPI = gridAPI as IgxTreeGridAPIService; - } + constructor(@Inject(IGX_GRID_BASE) private grid: GridType) { } public transform(collection: any[], primaryKey: string, foreignKey: string, childDataKey: string, _: number): ITreeGridRecord[] { - const grid = this.gridAPI.grid; let hierarchicalRecords: ITreeGridRecord[] = []; const treeGridRecordsMap = new Map(); const flatData: any[] = []; @@ -40,13 +29,13 @@ export class IgxTreeGridHierarchizingPipe implements PipeTransform { flatData, 0, treeGridRecordsMap); } - grid.flatData = grid.transactions.enabled ? + this.grid.flatData = this.grid.transactions.enabled ? flatData.filter(rec => { - const state = grid.transactions.getState(this.getRowID(primaryKey, rec)); + const state = this.grid.transactions.getState(this.getRowID(primaryKey, rec)); return !state || state.type !== TransactionType.ADD; }) : flatData; - grid.records = treeGridRecordsMap; - grid.rootRecords = hierarchicalRecords; + this.grid.records = treeGridRecordsMap; + this.grid.rootRecords = hierarchicalRecords; return hierarchicalRecords; } @@ -94,7 +83,7 @@ export class IgxTreeGridHierarchizingPipe implements PipeTransform { private setIndentationLevels(collection: ITreeGridRecord[], indentationLevel: number, flatData: any[]) { for (const record of collection) { record.level = indentationLevel; - record.expanded = this.gridAPI.get_row_expansion_state(record); + record.expanded = this.grid.gridAPI.get_row_expansion_state(record); flatData.push(record.data); if (record.children && record.children.length > 0) { @@ -114,7 +103,7 @@ export class IgxTreeGridHierarchizingPipe implements PipeTransform { parent, level: indentationLevel }; - record.expanded = this.gridAPI.get_row_expansion_state(record); + record.expanded = this.grid.gridAPI.get_row_expansion_state(record); flatData.push(item); map.set(record.rowID, record); record.children = item[childDataKey] ? @@ -130,29 +119,22 @@ export class IgxTreeGridHierarchizingPipe implements PipeTransform { /** * @hidden */ -@Pipe({ - name: 'treeGridFlattening', - pure: true -}) +@Pipe({ name: 'treeGridFlattening' }) export class IgxTreeGridFlatteningPipe implements PipeTransform { - private gridAPI: IgxTreeGridAPIService; - constructor(gridAPI: GridBaseAPIService) { - this.gridAPI = gridAPI as IgxTreeGridAPIService; - } + constructor(@Inject(IGX_GRID_BASE) private grid: GridType) { } public transform(collection: ITreeGridRecord[], expandedLevels: number, expandedStates: Map, _: number): any[] { - const grid: IgxTreeGridComponent = this.gridAPI.grid; const data: ITreeGridRecord[] = []; - grid.processedRootRecords = collection; - grid.processedRecords = new Map(); + this.grid.processedRootRecords = collection; + this.grid.processedRecords = new Map(); this.getFlatDataRecursive(collection, data, expandedLevels, expandedStates, true); - grid.processedExpandedFlatData = data.map(r => r.data); + this.grid.processedExpandedFlatData = data.map(r => r.data); return data; } @@ -162,41 +144,34 @@ export class IgxTreeGridFlatteningPipe implements PipeTransform { if (!collection || !collection.length) { return; } - const grid: IgxTreeGridComponent = this.gridAPI.grid; for (const hierarchicalRecord of collection) { if (parentExpanded) { data.push(hierarchicalRecord); } - hierarchicalRecord.expanded = this.gridAPI.get_row_expansion_state(hierarchicalRecord); + hierarchicalRecord.expanded = this.grid.gridAPI.get_row_expansion_state(hierarchicalRecord); - this.updateNonProcessedRecordExpansion(grid, hierarchicalRecord); + this.updateNonProcessedRecordExpansion(this.grid, hierarchicalRecord); - grid.processedRecords.set(hierarchicalRecord.rowID, hierarchicalRecord); + this.grid.processedRecords.set(hierarchicalRecord.rowID, hierarchicalRecord); this.getFlatDataRecursive(hierarchicalRecord.children, data, expandedLevels, expandedStates, parentExpanded && hierarchicalRecord.expanded); } } - private updateNonProcessedRecordExpansion(grid: IgxTreeGridComponent, record: ITreeGridRecord) { + private updateNonProcessedRecordExpansion(grid: GridType, record: ITreeGridRecord) { const rec = grid.records.get(record.rowID); rec.expanded = record.expanded; } } /** @hidden */ -@Pipe({ - name: 'treeGridSorting', - pure: true -}) +@Pipe({ name: 'treeGridSorting' }) export class IgxTreeGridSortingPipe implements PipeTransform { - private gridAPI: IgxTreeGridAPIService; - constructor(gridAPI: GridBaseAPIService) { - this.gridAPI = gridAPI as IgxTreeGridAPIService; - } + constructor(@Inject(IGX_GRID_BASE) private grid: GridType) { } public transform( hierarchicalData: ITreeGridRecord[], @@ -204,18 +179,17 @@ export class IgxTreeGridSortingPipe implements PipeTransform { sorting: IGridSortingStrategy, _: number, pinned?: boolean): ITreeGridRecord[] { - const grid = this.gridAPI.grid; let result: ITreeGridRecord[]; if (!expressions.length) { result = hierarchicalData; } else { - result = DataUtil.treeGridSort(hierarchicalData, expressions, sorting, null, grid); + result = DataUtil.treeGridSort(hierarchicalData, expressions, sorting, null, this.grid); } const filteredSortedData = []; this.flattenTreeGridRecords(result, filteredSortedData); - grid.setFilteredSortedData(filteredSortedData, pinned); + this.grid.setFilteredSortedData(filteredSortedData, pinned); return result; } @@ -231,24 +205,17 @@ export class IgxTreeGridSortingPipe implements PipeTransform { } /** @hidden */ -@Pipe({ - name: 'treeGridPaging', - pure: true -}) +@Pipe({ name: 'treeGridPaging' }) export class IgxTreeGridPagingPipe implements PipeTransform { - private gridAPI: IgxTreeGridAPIService; - constructor(gridAPI: GridBaseAPIService) { - this.gridAPI = gridAPI as IgxTreeGridAPIService; - } + constructor(@Inject(IGX_GRID_BASE) private grid: GridType) { } public transform(collection: ITreeGridRecord[], page = 0, perPage = 15, _: number): ITreeGridRecord[] { - const grid = this.gridAPI.grid; - if (!grid.paginator || grid.pagingMode !== GridPagingMode.Local) { + if (!this.grid.paginator || this.grid.pagingMode !== GridPagingMode.Local) { return collection; } - const len = grid._totalRecords >= 0 ? grid._totalRecords : collection.length; + const len = this.grid._totalRecords >= 0 ? this.grid._totalRecords : collection.length; const totalPages = Math.ceil(len / perPage); const state = { @@ -257,52 +224,45 @@ export class IgxTreeGridPagingPipe implements PipeTransform { }; const result: ITreeGridRecord[] = DataUtil.page(cloneArray(collection), state, len); - grid.pagingState = state; - grid.paginator.page = state.index; + this.grid.pagingState = state; + this.grid.paginator.page = state.index; return result; } } /** @hidden */ -@Pipe({ - name: 'treeGridTransaction', - pure: true -}) +@Pipe({ name: 'treeGridTransaction' }) export class IgxTreeGridTransactionPipe implements PipeTransform { - private gridAPI: IgxTreeGridAPIService; - constructor(gridAPI: GridBaseAPIService) { - this.gridAPI = gridAPI as IgxTreeGridAPIService; - } + constructor(@Inject(IGX_GRID_BASE) private grid: GridType) { } public transform(collection: any[], _: number): any[] { - const grid: IgxTreeGridComponent = this.gridAPI.grid; - if (grid.transactions.enabled) { - const aggregatedChanges = grid.transactions.getAggregatedChanges(true); + if (this.grid.transactions.enabled) { + const aggregatedChanges = this.grid.transactions.getAggregatedChanges(true); if (aggregatedChanges.length > 0) { - const primaryKey = grid.primaryKey; + const primaryKey = this.grid.primaryKey; if (!primaryKey) { return collection; } - const foreignKey = grid.foreignKey; - const childDataKey = grid.childDataKey; + const foreignKey = this.grid.foreignKey; + const childDataKey = this.grid.childDataKey; if (foreignKey) { const flatDataClone = cloneArray(collection); return DataUtil.mergeTransactions( flatDataClone, aggregatedChanges, - grid.primaryKey); + this.grid.primaryKey); } else if (childDataKey) { const hierarchicalDataClone = cloneHierarchicalArray(collection, childDataKey); return DataUtil.mergeHierarchicalTransactions( hierarchicalDataClone, aggregatedChanges, childDataKey, - grid.primaryKey); + this.grid.primaryKey); } } } @@ -313,54 +273,40 @@ export class IgxTreeGridTransactionPipe implements PipeTransform { /** * This pipe maps the original record to ITreeGridRecord format used in TreeGrid. */ -@Pipe({ - name: 'treeGridNormalizeRecord', - pure: true -}) +@Pipe({ name: 'treeGridNormalizeRecord' }) export class IgxTreeGridNormalizeRecordsPipe implements PipeTransform { - private gridAPI: IgxTreeGridAPIService; - constructor(gridAPI: GridBaseAPIService) { - this.gridAPI = gridAPI as IgxTreeGridAPIService; - } + constructor(@Inject(IGX_GRID_BASE) private grid: GridType) { } public transform(_: any[], __: number): any[] { - const grid = this.gridAPI.grid; - const primaryKey = grid.primaryKey; + const primaryKey = this.grid.primaryKey; // using flattened data because origin data may be hierarchical. - const flatData = grid.flatData; + const flatData = this.grid.flatData; const res = flatData.map(rec => - ({ - rowID: grid.primaryKey ? rec[primaryKey] : rec, - data: rec, - level: 0, - children: [] - })); + ({ + rowID: this.grid.primaryKey ? rec[primaryKey] : rec, + data: rec, + level: 0, + children: [] + })); return res; } } -@Pipe({ - name: 'treeGridAddRow', - pure: true -}) +@Pipe({ name: 'treeGridAddRow' }) export class IgxTreeGridAddRowPipe implements PipeTransform { - private gridAPI: IgxTreeGridAPIService; - constructor(gridAPI: GridBaseAPIService) { - this.gridAPI = gridAPI as IgxTreeGridAPIService; - } + constructor(@Inject(IGX_GRID_BASE) private grid: GridType) { } public transform(collection: any, isPinned = false, _pipeTrigger: number) { - const grid = this.gridAPI.grid; - if (!grid.rowEditable || !grid.crudService.row || grid.crudService.row.getClassName() !== IgxAddRow.name || - !grid.gridAPI.crudService.addRowParent || isPinned !== grid.gridAPI.crudService.addRowParent.isPinned) { + if (!this.grid.rowEditable || !this.grid.crudService.row || this.grid.crudService.row.getClassName() !== IgxAddRow.name || + !this.grid.gridAPI.crudService.addRowParent || isPinned !== this.grid.gridAPI.crudService.addRowParent.isPinned) { return collection; } const copy = collection.slice(0); - const rec = (grid.crudService.row as IgxAddRow).recordRef; - copy.splice(grid.crudService.row.index, 0, rec); - grid.records.set(rec.rowID, rec); + const rec = (this.grid.crudService.row as IgxAddRow).recordRef; + copy.splice(this.grid.crudService.row.index, 0, rec); + this.grid.records.set(rec.rowID, rec); return copy; } } diff --git a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.summary.pipe.ts b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.summary.pipe.ts index 9af55d16183..347945d788c 100644 --- a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.summary.pipe.ts +++ b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.summary.pipe.ts @@ -1,39 +1,28 @@ -import { Pipe, PipeTransform } from '@angular/core'; -import { IgxTreeGridAPIService } from './tree-grid-api.service'; -import { GridBaseAPIService } from '../api.service'; -import { IgxGridBaseDirective } from '../grid-base.directive'; +import { Inject, Pipe, PipeTransform } from '@angular/core'; import { ITreeGridRecord } from './tree-grid.interfaces'; -import { IgxTreeGridComponent } from './tree-grid.component'; import { ISummaryRecord } from '../summaries/grid-summary'; import { GridSummaryCalculationMode, GridSummaryPosition } from '../common/enums'; -import { GridType } from '../common/grid.interface'; +import { GridType, IGX_GRID_BASE } from '../common/grid.interface'; /** @hidden */ -@Pipe({ - name: 'treeGridSummary', - pure: true -}) +@Pipe({name: 'treeGridSummary'}) export class IgxTreeGridSummaryPipe implements PipeTransform { - private gridAPI: IgxTreeGridAPIService; - constructor(gridAPI: GridBaseAPIService) { - this.gridAPI = gridAPI as IgxTreeGridAPIService; - } + constructor(@Inject(IGX_GRID_BASE) private grid: GridType) {} public transform(flatData: ITreeGridRecord[], hasSummary: boolean, summaryCalculationMode: GridSummaryCalculationMode, summaryPosition: GridSummaryPosition, showSummaryOnCollapse: boolean, _: number, __: number): any[] { - const grid: IgxTreeGridComponent = this.gridAPI.grid; if (!flatData || !hasSummary || summaryCalculationMode === GridSummaryCalculationMode.rootLevelOnly) { return flatData; } - return this.addSummaryRows(grid, flatData, summaryPosition, showSummaryOnCollapse); + return this.addSummaryRows(this.grid, flatData, summaryPosition, showSummaryOnCollapse); } - private addSummaryRows(grid: IgxTreeGridComponent, collection: ITreeGridRecord[], + private addSummaryRows(grid: GridType, collection: ITreeGridRecord[], summaryPosition: GridSummaryPosition, showSummaryOnCollapse: boolean): any[] { const recordsWithSummary = []; const maxSummaryHeight = grid.summaryService.calcMaxSummaryHeight(); diff --git a/projects/igniteui-angular/src/lib/icon/icon.component.ts b/projects/igniteui-angular/src/lib/icon/icon.component.ts index cd2f3a66971..5f9e634f056 100644 --- a/projects/igniteui-angular/src/lib/icon/icon.component.ts +++ b/projects/igniteui-angular/src/lib/icon/icon.component.ts @@ -78,19 +78,6 @@ export class IgxIconComponent implements OnInit, OnDestroy { @Input('active') public active = true; - /** - * @deprecated in version 11.1.0. `color` is deprecated - * - * An @Input property that allows you to change the `color` of the icon. - * - * @example - * ```html - * settings - * ``` - */ - @Input('color') - public color: string; - /** * An @Input property that allows you to set the `name` of the icon. * @@ -194,23 +181,6 @@ export class IgxIconComponent implements OnInit, OnDestroy { return !this.active; } - /** - * An accessor that returns the opposite value of the `color` property. - * - * @example - * ```typescript - * @ViewChild("MyIcon") - * public icon: IgxIconComponent; - * ngAfterViewInit() { - * let color = this.icon.getColor; - * } - * ``` - */ - @HostBinding('style.color') - public get getColor(): string { - return this.color; - } - /** * An accessor that returns the value of the iconName property. * diff --git a/projects/igniteui-angular/src/lib/input-group/input-group.component.ts b/projects/igniteui-angular/src/lib/input-group/input-group.component.ts index a86ec1c581e..b47b41b5bd9 100644 --- a/projects/igniteui-angular/src/lib/input-group/input-group.component.ts +++ b/projects/igniteui-angular/src/lib/input-group/input-group.component.ts @@ -449,21 +449,15 @@ export class IgxInputGroupComponent extends DisplayDensityBase implements IgxInp /** @hidden @internal */ public ngAfterViewChecked() { if (!this._theme) { - if(this.platform.isIE) { + const cssProp = this.document.defaultView + .getComputedStyle(this.element.nativeElement) + .getPropertyValue('--theme') + .trim(); + + if(cssProp !== '') { Promise.resolve().then(() => { - this._theme$.next(IgxInputGroupTheme.Material); + this._theme$.next(cssProp); }); - } else { - const cssProp = this.document.defaultView - .getComputedStyle(this.element.nativeElement) - .getPropertyValue('--theme') - .trim(); - - if(cssProp !== '') { - Promise.resolve().then(() => { - this._theme$.next(cssProp); - }); - } } } } diff --git a/projects/igniteui-angular/src/lib/paginator/page-size-selector.component.html b/projects/igniteui-angular/src/lib/paginator/page-size-selector.component.html index 03cc232f9f6..df6c554e9de 100644 --- a/projects/igniteui-angular/src/lib/paginator/page-size-selector.component.html +++ b/projects/igniteui-angular/src/lib/paginator/page-size-selector.component.html @@ -1,22 +1,10 @@ - +
- - - + + + {{ val }}
- diff --git a/projects/igniteui-angular/src/lib/paginator/page-size-selector.component.ts b/projects/igniteui-angular/src/lib/paginator/page-size-selector.component.ts deleted file mode 100644 index fd9b03ca242..00000000000 --- a/projects/igniteui-angular/src/lib/paginator/page-size-selector.component.ts +++ /dev/null @@ -1,17 +0,0 @@ -import { Component, Host, HostBinding} from '@angular/core'; -import { IgxPaginatorComponent } from './paginator.component'; - -@Component({ - selector: 'igx-page-size', - templateUrl: 'page-size-selector.component.html', -}) -export class IgxPageSizeSelectorComponent { - /** - * @internal - * @hidden - */ - @HostBinding('class.igx-page-size') - public cssClass = 'igx-page-size'; - - constructor(@Host() public paginator: IgxPaginatorComponent) {} -} diff --git a/projects/igniteui-angular/src/lib/paginator/pager.component.ts b/projects/igniteui-angular/src/lib/paginator/pager.component.ts deleted file mode 100644 index dd27d262ee6..00000000000 --- a/projects/igniteui-angular/src/lib/paginator/pager.component.ts +++ /dev/null @@ -1,24 +0,0 @@ -import { Component, Host, HostBinding, Input } from '@angular/core'; -import { IgxPaginatorComponent } from './paginator.component'; - -@Component({ - selector: 'igx-page-nav', - templateUrl: 'pager.component.html', -}) -export class IgxPageNavigationComponent { - /** - * @internal - * @hidden - */ - @HostBinding('class.igx-page-nav') - public cssClass = 'igx-page-nav'; - - /** - * An @Input property that sets the `role` attribute of the element. - */ - @HostBinding('attr.role') - @Input() - public role = 'navigation'; - - constructor(@Host() public paginator: IgxPaginatorComponent) { } -} diff --git a/projects/igniteui-angular/src/lib/paginator/paginator.component.ts b/projects/igniteui-angular/src/lib/paginator/paginator.component.ts index dfada3da054..117da48e861 100644 --- a/projects/igniteui-angular/src/lib/paginator/paginator.component.ts +++ b/projects/igniteui-angular/src/lib/paginator/paginator.component.ts @@ -1,10 +1,22 @@ -import { Component, Input, Output, Optional, Inject, EventEmitter, - HostBinding, Directive, ContentChild, ElementRef, ChangeDetectorRef } from '@angular/core'; +import { + ChangeDetectorRef, + Component, + ContentChild, + Directive, + ElementRef, + EventEmitter, + Host, + HostBinding, + Inject, + Input, + Optional, + Output, +} from '@angular/core'; import { CurrentResourceStrings } from '../core/i18n/resources'; import { IDisplayDensityOptions, DisplayDensityToken, DisplayDensityBase, DisplayDensity } from '../core/displayDensity'; -import { OverlaySettings } from '../services/public_api'; -import { IPaginatorResourceStrings } from '../core/i18n/paginator-resources'; import { IPageCancellableEventArgs, IPageEventArgs } from './paginator-interfaces'; +import { IPaginatorResourceStrings } from '../core/i18n/paginator-resources'; +import { OverlaySettings } from '../services/overlay/utilities'; @Directive({ selector: '[igxPaginatorContent],igx-paginator-content' }) export class IgxPaginatorTemplateDirective { @@ -248,7 +260,7 @@ export class IgxPaginatorComponent extends DisplayDensityBase { } constructor(@Optional() @Inject(DisplayDensityToken) protected _displayDensityOptions: IDisplayDensityOptions, - private elementRef: ElementRef, private cdr: ChangeDetectorRef) { + private elementRef: ElementRef, private cdr: ChangeDetectorRef) { super(_displayDensityOptions); } @@ -348,3 +360,42 @@ export class IgxPaginatorComponent extends DisplayDensityBase { return Array.from(new Set([...values, newOption])).sort((a, b) => a - b); } } + + +@Component({ + selector: 'igx-page-size', + templateUrl: 'page-size-selector.component.html', +}) +export class IgxPageSizeSelectorComponent { + /** + * @internal + * @hidden + */ + @HostBinding('class.igx-page-size') + public cssClass = 'igx-page-size'; + + constructor(@Host() public paginator: IgxPaginatorComponent) { } +} + + +@Component({ + selector: 'igx-page-nav', + templateUrl: 'pager.component.html', +}) +export class IgxPageNavigationComponent { + /** + * @internal + * @hidden + */ + @HostBinding('class.igx-page-nav') + public cssClass = 'igx-page-nav'; + + /** + * An @Input property that sets the `role` attribute of the element. + */ + @HostBinding('attr.role') + @Input() + public role = 'navigation'; + + constructor(@Host() public paginator: IgxPaginatorComponent) { } +} diff --git a/projects/igniteui-angular/src/lib/paginator/public_api.ts b/projects/igniteui-angular/src/lib/paginator/public_api.ts index 25a021dd1e6..91cc3216247 100644 --- a/projects/igniteui-angular/src/lib/paginator/public_api.ts +++ b/projects/igniteui-angular/src/lib/paginator/public_api.ts @@ -8,13 +8,15 @@ import { IgxButtonModule } from '../directives/button/button.directive'; import { IgxRippleModule } from '../directives/ripple/ripple.directive'; import { IgxInputGroupModule } from '../input-group/public_api'; -import { IgxPageSizeSelectorComponent } from './page-size-selector.component'; -import { IgxPageNavigationComponent } from './pager.component'; -import { IgxPaginatorComponent, IgxPaginatorTemplateDirective } from './paginator.component'; + +import { + IgxPageNavigationComponent, + IgxPageSizeSelectorComponent, + IgxPaginatorComponent, + IgxPaginatorTemplateDirective +} from './paginator.component'; import { IgxPaginatorDirective } from './paginator-interfaces'; -export * from './page-size-selector.component'; -export * from './pager.component'; export * from './paginator.component'; @NgModule({ diff --git a/projects/igniteui-angular/src/lib/select/public_api.ts b/projects/igniteui-angular/src/lib/select/public_api.ts index 3646723046b..662c6c310f2 100644 --- a/projects/igniteui-angular/src/lib/select/public_api.ts +++ b/projects/igniteui-angular/src/lib/select/public_api.ts @@ -2,4 +2,4 @@ export * from './select-group.component'; export * from './select-item.component'; export * from './select.component'; export * from './select.module'; - +export * from './select-navigation.directive'; diff --git a/projects/igniteui-angular/src/lib/select/select-item.component.ts b/projects/igniteui-angular/src/lib/select/select-item.component.ts index 5f2eec637cd..dae4fde2dcc 100644 --- a/projects/igniteui-angular/src/lib/select/select-item.component.ts +++ b/projects/igniteui-angular/src/lib/select/select-item.component.ts @@ -1,11 +1,11 @@ import { IgxDropDownItemComponent } from './../drop-down/drop-down-item.component'; -import { Component, DoCheck, Input } from '@angular/core'; +import { Component, Input } from '@angular/core'; @Component({ selector: 'igx-select-item', template: '' }) -export class IgxSelectItemComponent extends IgxDropDownItemComponent implements DoCheck { +export class IgxSelectItemComponent extends IgxDropDownItemComponent { /** @hidden @internal */ public isHeader: boolean; @@ -60,8 +60,4 @@ export class IgxSelectItemComponent extends IgxDropDownItemComponent implements this.dropDown.selectItem(this); } } - - /** @hidden @internal */ - public ngDoCheck(): void { - } } diff --git a/projects/igniteui-angular/src/lib/select/select.common.ts b/projects/igniteui-angular/src/lib/select/select.common.ts index d532e8ce053..7f9c0ed0245 100644 --- a/projects/igniteui-angular/src/lib/select/select.common.ts +++ b/projects/igniteui-angular/src/lib/select/select.common.ts @@ -1,6 +1,6 @@ import { IgxDropDownBaseDirective, IgxDropDownItemBaseDirective } from '../drop-down/public_api'; -import { OverlaySettings } from '../services/public_api'; import { IgxInputDirective } from '../input-group/public_api'; +import { OverlaySettings } from '../services/overlay/utilities'; /** @hidden @internal */ export interface IgxSelectBase extends IgxDropDownBaseDirective { diff --git a/projects/igniteui-angular/src/lib/select/select.component.spec.ts b/projects/igniteui-angular/src/lib/select/select.component.spec.ts index 32819976ad8..e53350f02f5 100644 --- a/projects/igniteui-angular/src/lib/select/select.component.spec.ts +++ b/projects/igniteui-angular/src/lib/select/select.component.spec.ts @@ -2683,7 +2683,7 @@ describe('igxSelect ControlValueAccessor Unit', () => { }); // init - select = new IgxSelectComponent(null, mockCdr, null, mockSelection, null, null, null, mockInjector); + select = new IgxSelectComponent(null, mockCdr, mockSelection, null, null, null, mockInjector); select.ngOnInit(); select.registerOnChange(mockNgControl.registerOnChangeCb); select.registerOnTouched(mockNgControl.registerOnTouchedCb); diff --git a/projects/igniteui-angular/src/lib/select/select.component.ts b/projects/igniteui-angular/src/lib/select/select.component.ts index 83219d39c46..02478ec622d 100644 --- a/projects/igniteui-angular/src/lib/select/select.component.ts +++ b/projects/igniteui-angular/src/lib/select/select.component.ts @@ -27,14 +27,13 @@ import { takeUntil } from 'rxjs/operators'; import { DisplayDensityToken, IDisplayDensityOptions } from '../core/density'; import { EditorProvider } from '../core/edit-provider'; import { IgxSelectionAPIService } from '../core/selection'; -import { IBaseCancelableBrowserEventArgs, IBaseEventArgs, PlatformUtil } from '../core/utils'; +import { IBaseCancelableBrowserEventArgs, IBaseEventArgs } from '../core/utils'; import { IgxLabelDirective } from '../directives/label/label.directive'; import { IgxDropDownItemBaseDirective } from '../drop-down/drop-down-item.base'; import { IGX_DROPDOWN_BASE, ISelectionEventArgs, Navigate } from '../drop-down/drop-down.common'; import { IgxInputGroupComponent } from '../input-group/input-group.component'; import { AbsoluteScrollStrategy } from '../services/overlay/scroll/absolute-scroll-strategy'; import { OverlaySettings } from '../services/overlay/utilities'; -import { IgxOverlayService } from '../services/public_api'; import { IgxInputDirective, IgxInputState } from './../directives/input/input.directive'; import { IgxDropDownComponent } from './../drop-down/drop-down.component'; import { IgxSelectItemComponent } from './select-item.component'; @@ -42,6 +41,7 @@ import { SelectPositioningStrategy } from './select-positioning-strategy'; import { IgxSelectBase } from './select.common'; import { IgxHintDirective, IgxInputGroupType, IGX_INPUT_GROUP_TYPE } from '../input-group/public_api'; import { ToggleViewCancelableEventArgs, ToggleViewEventArgs } from '../directives/toggle/toggle.directive'; +import { IgxOverlayService } from '../services/overlay/overlay'; /** @hidden @internal */ @Directive({ @@ -325,13 +325,12 @@ export class IgxSelectComponent extends IgxDropDownComponent implements IgxSelec constructor( protected elementRef: ElementRef, protected cdr: ChangeDetectorRef, - protected platform: PlatformUtil, protected selection: IgxSelectionAPIService, @Inject(IgxOverlayService) protected overlayService: IgxOverlayService, @Optional() @Inject(DisplayDensityToken) protected _displayDensityOptions: IDisplayDensityOptions, @Optional() @Inject(IGX_INPUT_GROUP_TYPE) private _inputGroupType: IgxInputGroupType, private _injector: Injector) { - super(elementRef, cdr, platform, selection, _displayDensityOptions); + super(elementRef, cdr, selection, _displayDensityOptions); } //#region ControlValueAccessor diff --git a/projects/igniteui-angular/src/lib/services/csv/csv-exporter-grid.spec.ts b/projects/igniteui-angular/src/lib/services/csv/csv-exporter-grid.spec.ts index 8b7f40b44b4..55f045ef684 100644 --- a/projects/igniteui-angular/src/lib/services/csv/csv-exporter-grid.spec.ts +++ b/projects/igniteui-angular/src/lib/services/csv/csv-exporter-grid.spec.ts @@ -1,5 +1,4 @@ import { TestBed, fakeAsync, tick, waitForAsync } from '@angular/core/testing'; -import { SortingDirection } from '../../data-operations/sorting-expression.interface'; import { IgxGridModule } from '../../grids/grid/public_api'; import { IgxGridComponent } from '../../grids/grid/grid.component'; import { IColumnExportingEventArgs, IRowExportingEventArgs } from '../exporter-common/base-export-service'; @@ -16,7 +15,7 @@ import { ReorderedColumnsComponent, ColumnsAddedOnInitComponent } from '../../test-utils/grid-samples.spec'; import { SampleTestData } from '../../test-utils/sample-test-data.spec'; import { first } from 'rxjs/operators'; -import { DefaultSortingStrategy } from '../../data-operations/sorting-strategy'; +import { DefaultSortingStrategy, SortingDirection } from '../../data-operations/sorting-strategy'; import { IgxStringFilteringOperand, IgxNumberFilteringOperand } from '../../data-operations/filtering-condition'; import { FilteringExpressionsTree } from '../../data-operations/filtering-expressions-tree'; import { FilteringLogic } from '../../data-operations/filtering-expression.interface'; @@ -108,7 +107,7 @@ describe('CSV Grid Exporter', () => { fix.detectChanges(); const grid = fix.componentInstance.grid; - grid.columns[0].hidden = true; + grid.columnList.get(0).hidden = true; options.ignoreColumnsVisibility = false; fix.detectChanges(); @@ -134,19 +133,19 @@ describe('CSV Grid Exporter', () => { let wrapper = await getExportedData(grid, options); wrapper.verifyData(wrapper.simpleGridData, 'All columns data should have been exported!'); - grid.columns[0].hidden = true; + grid.columnList.get(0).hidden = true; fix.detectChanges(); expect(grid.visibleColumns.length).toEqual(2, 'Invalid number of visible columns!'); wrapper = await getExportedData(grid, options); wrapper.verifyData(wrapper.gridNameJobTitle, 'Two columns data should have been exported!'); - grid.columns[0].hidden = false; + grid.columnList.get(0).hidden = false; fix.detectChanges(); expect(grid.visibleColumns.length).toEqual(3, 'Invalid number of visible columns!'); wrapper = await getExportedData(grid, options); wrapper.verifyData(wrapper.simpleGridData, 'All columns data should have been exported!'); - grid.columns[0].hidden = undefined; + grid.columnList.get(0).hidden = undefined; fix.detectChanges(); expect(grid.visibleColumns.length).toEqual(3, 'Invalid number of visible columns!'); wrapper = await getExportedData(grid, options); @@ -249,7 +248,7 @@ describe('CSV Grid Exporter', () => { cols.push({ header: value.header, index: value.columnIndex }); }); - grid.columns[0].hidden = true; + grid.columnList.get(0).hidden = true; options.ignoreColumnsVisibility = false; fix.detectChanges(); @@ -315,8 +314,8 @@ describe('CSV Grid Exporter', () => { fix.detectChanges(); const grid = fix.componentInstance.grid; - grid.columns[1].formatter = ((val: string) => val.toUpperCase()); - grid.columns[2].formatter = ((val: string) => val.toLowerCase()); + grid.columnList.get(1).formatter = ((val: string) => val.toUpperCase()); + grid.columnList.get(2).formatter = ((val: string) => val.toLowerCase()); grid.cdr.detectChanges(); let wrapper = await getExportedData(grid, options); @@ -461,8 +460,8 @@ describe('CSV Grid Exporter', () => { }); it('should skip the column formatter when columnExportinging skipFormatter is true.', async () => { - treeGrid.columns[3].formatter = ((val: string) => val.toLowerCase()); - treeGrid.columns[4].formatter = ((val: number) => + treeGrid.columnList.get(3).formatter = ((val: string) => val.toLowerCase()); + treeGrid.columnList.get(4).formatter = ((val: number) => val * 12 // months ); treeGrid.cdr.detectChanges(); diff --git a/projects/igniteui-angular/src/lib/services/direction/directionality.ts b/projects/igniteui-angular/src/lib/services/direction/directionality.ts index 1e50b699370..6e17b21e1e7 100644 --- a/projects/igniteui-angular/src/lib/services/direction/directionality.ts +++ b/projects/igniteui-angular/src/lib/services/direction/directionality.ts @@ -9,7 +9,6 @@ export type Direction = 'ltr' | 'rtl'; /** * @hidden */ -// eslint-disable-next-line prefer-arrow/prefer-arrow-functions export function DIR_DOCUMENT_FACTORY(): Document { return inject(DOCUMENT); } diff --git a/projects/igniteui-angular/src/lib/services/excel/excel-exporter-grid.spec.ts b/projects/igniteui-angular/src/lib/services/excel/excel-exporter-grid.spec.ts index 4368c9a7e5d..e526e62370f 100644 --- a/projects/igniteui-angular/src/lib/services/excel/excel-exporter-grid.spec.ts +++ b/projects/igniteui-angular/src/lib/services/excel/excel-exporter-grid.spec.ts @@ -21,9 +21,8 @@ import { } from '../../test-utils/grid-samples.spec'; import { SampleTestData } from '../../test-utils/sample-test-data.spec'; import { first } from 'rxjs/operators'; -import { DefaultSortingStrategy } from '../../data-operations/sorting-strategy'; +import { DefaultSortingStrategy, SortingDirection } from '../../data-operations/sorting-strategy'; import { IgxStringFilteringOperand } from '../../data-operations/filtering-condition'; -import { SortingDirection } from '../../data-operations/sorting-expression.interface'; import { configureTestSuite } from '../../test-utils/configure-suite'; import { IgxTreeGridPrimaryForeignKeyComponent } from '../../test-utils/tree-grid-components.spec'; import { IgxTreeGridModule, IgxTreeGridComponent } from '../../grids/tree-grid/public_api'; @@ -134,7 +133,7 @@ describe('Excel Exporter', () => { await wait(); const grid = fix.componentInstance.grid; - grid.columns[0].hidden = true; + grid.columnList.get(0).hidden = true; options.ignoreColumnsVisibility = false; fix.detectChanges(); @@ -160,21 +159,21 @@ describe('Excel Exporter', () => { let wrapper = await getExportedData(grid, options); await wrapper.verifyDataFilesContent(actualData.simpleGridData, 'All columns should have been exported!'); - grid.columns[0].hidden = true; + grid.columnList.get(0).hidden = true; fix.detectChanges(); expect(grid.visibleColumns.length).toEqual(2, 'Invalid number of visible columns!'); wrapper = await getExportedData(grid, options); await wrapper.verifyDataFilesContent(actualData.simpleGridNameJobTitle, 'Two columns should have been exported!'); - grid.columns[0].hidden = false; + grid.columnList.get(0).hidden = false; fix.detectChanges(); expect(grid.visibleColumns.length).toEqual(3, 'Invalid number of visible columns!'); wrapper = await getExportedData(grid, options); await wrapper.verifyDataFilesContent(actualData.simpleGridData, 'All columns should have been exported!'); - grid.columns[0].hidden = undefined; + grid.columnList.get(0).hidden = undefined; fix.detectChanges(); expect(grid.visibleColumns.length).toEqual(3, 'Invalid number of visible columns!'); @@ -220,7 +219,7 @@ describe('Excel Exporter', () => { let wrapper = await getExportedData(grid, options); await wrapper.verifyDataFilesContent(actualData.gridNameFrozen, 'One frozen column should have been exported!'); - grid.columns[1].pinned = false; + grid.columnList.get(1).pinned = false; fix.detectChanges(); wrapper = await getExportedData(grid, options); await wrapper.verifyDataFilesContent(actualData.simpleGridData, 'No frozen columns should have been exported!'); @@ -312,8 +311,8 @@ describe('Excel Exporter', () => { await wait(); const grid = fix.componentInstance.grid; - grid.columns[1].hidden = true; - grid.columns[2].hidden = true; + grid.columnList.get(1).hidden = true; + grid.columnList.get(2).hidden = true; const columnWidths = [100, 200, 0, null]; fix.detectChanges(); @@ -373,7 +372,7 @@ describe('Excel Exporter', () => { cols.push({ header: value.header, index: value.columnIndex }); }); - grid.columns[0].hidden = true; + grid.columnList.get(0).hidden = true; options.ignoreColumnsVisibility = false; fix.detectChanges(); @@ -497,8 +496,8 @@ describe('Excel Exporter', () => { await wait(); const grid = fix.componentInstance.grid; - grid.columns[1].header = 'My header'; - grid.columns[1].sortable = true; + grid.columnList.get(1).header = 'My header'; + grid.columnList.get(1).sortable = true; grid.sort({fieldName: 'Name', dir: SortingDirection.Desc, ignoreCase: false}); const sortField = grid.sortingExpressions[0].fieldName; fix.detectChanges(); @@ -519,7 +518,7 @@ describe('Excel Exporter', () => { const grid = fix.componentInstance.grid; // Set column formatters - grid.columns[0].formatter = ((val: number) => { + grid.columnList.get(0).formatter = ((val: number) => { const numbers = ['one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight', 'nine' , 'ten']; return numbers[val - 1]; }); @@ -973,7 +972,7 @@ describe('Excel Exporter', () => { }); it('should skip the formatter when columnExporting skipFormatter is true', async () => { - treeGrid.columns[4].formatter = ((val: number) => { + treeGrid.columnList.get(4).formatter = ((val: number) => { const t = Math.floor(val / 10); const o = val % 10; return val + parseFloat(((t + o) / 12).toFixed(2)); @@ -1036,21 +1035,21 @@ describe('Excel Exporter', () => { }); it('should export grid with multi column headers and moved column', async () => { - grid.columns[0].move(2); + grid.columnList.get(0).move(2); fix.detectChanges(); await exportAndVerify(grid, options, actualData.exportMultiColumnHeadersDataWithMovedColumn, false); }); it('should export grid with hidden column', async () => { - grid.columns[0].hidden = true; + grid.columnList.get(0).hidden = true; fix.detectChanges(); await exportAndVerify(grid, options, actualData.exportMultiColumnHeadersDataWithHiddenColumn, false); }); it('should export grid with hidden column and ignoreColumnVisibility set to true', async () => { - grid.columns[0].hidden = true; + grid.columnList.get(0).hidden = true; options.ignoreColumnsVisibility = true; fix.detectChanges(); @@ -1058,15 +1057,15 @@ describe('Excel Exporter', () => { }); it('should export grid with pinned column group', async () => { - grid.columns[1].pinned = true; + grid.columnList.get(1).pinned = true; fix.detectChanges(); await exportAndVerify(grid, options, actualData.exportMultiColumnHeadersDataWithPinnedColumn, false); }); it('should export grid with collapsed and expanded multi column headers', async () => { - GridFunctions.clickGroupExpandIndicator(fix, grid.columns[1]); - GridFunctions.clickGroupExpandIndicator(fix, grid.columns[7]); + GridFunctions.clickGroupExpandIndicator(fix, grid.columnList.get(1)); + GridFunctions.clickGroupExpandIndicator(fix, grid.columnList.get(7)); fix.detectChanges(); await exportAndVerify(grid, options, actualData.exportCollapsedAndExpandedMultiColumnHeadersData, false); }); diff --git a/projects/igniteui-angular/src/lib/services/excel/excel-files.ts b/projects/igniteui-angular/src/lib/services/excel/excel-files.ts index 19be2f04bdc..e92cbaa6381 100644 --- a/projects/igniteui-angular/src/lib/services/excel/excel-files.ts +++ b/projects/igniteui-angular/src/lib/services/excel/excel-files.ts @@ -385,12 +385,8 @@ export class WorksheetFile implements IExcelFile { * @hidden */ export class StyleFile implements IExcelFile { - public writeElement(folder: JSZip, worksheetData: WorksheetData) { - const hasNumberValues = worksheetData.dataDictionary && worksheetData.dataDictionary.hasNumberValues; - const hasDateValues = worksheetData.dataDictionary && worksheetData.dataDictionary.hasDateValues; - const isHierarchicalGrid = worksheetData.data[0]?.type === ExportRecordType.HierarchicalGridRecord; - - folder.file('styles.xml', ExcelStrings.getStyles(hasNumberValues, hasDateValues, isHierarchicalGrid)); + public writeElement(folder: JSZip) { + folder.file('styles.xml', ExcelStrings.getStyles()); } } diff --git a/projects/igniteui-angular/src/lib/services/excel/excel-strings.ts b/projects/igniteui-angular/src/lib/services/excel/excel-strings.ts index d364a6d893b..f3e3865f730 100644 --- a/projects/igniteui-angular/src/lib/services/excel/excel-strings.ts +++ b/projects/igniteui-angular/src/lib/services/excel/excel-strings.ts @@ -20,7 +20,7 @@ export class ExcelStrings { return ExcelStrings.XML_STRING + ''; } - public static getStyles(hasNumberValues: boolean, hasDateValues: boolean, isHierarchicalGrid: boolean): string { + public static getStyles(): string { return ExcelStrings.XML_STRING + ' '; } diff --git a/projects/igniteui-angular/src/lib/services/excel/jszip-helper.spec.ts b/projects/igniteui-angular/src/lib/services/excel/jszip-helper.spec.ts index e91db27d953..840bd0503df 100644 --- a/projects/igniteui-angular/src/lib/services/excel/jszip-helper.spec.ts +++ b/projects/igniteui-angular/src/lib/services/excel/jszip-helper.spec.ts @@ -126,9 +126,6 @@ export class JSZipFiles { } public static getStylesheetXML(): string { - const cellXfCount = this.hasDates ? 3 : 1; - const additionalCellXf = this.hasDates ? ` ` : ''; - return ' '; } diff --git a/projects/igniteui-angular/src/lib/services/exporter-common/base-export-service.ts b/projects/igniteui-angular/src/lib/services/exporter-common/base-export-service.ts index 10a4c9809ee..4a61b4f7b67 100644 --- a/projects/igniteui-angular/src/lib/services/exporter-common/base-export-service.ts +++ b/projects/igniteui-angular/src/lib/services/exporter-common/base-export-service.ts @@ -9,15 +9,9 @@ import { IGroupingState } from '../../data-operations/groupby-state.interface'; import { getHierarchy, isHierarchyMatch } from '../../data-operations/operations'; import { IGroupByExpandState } from '../../data-operations/groupby-expand-state.interface'; import { IFilteringState } from '../../data-operations/filtering-state.interface'; -import { IgxColumnComponent, IgxGridBaseDirective } from '../../grids/public_api'; -import { IgxTreeGridComponent } from '../../grids/tree-grid/public_api'; -import { IgxGridComponent } from '../../grids/grid/public_api'; import { DatePipe } from '@angular/common'; import { IGroupByRecord } from '../../data-operations/groupby-record.interface'; -import { IgxHierarchicalGridComponent } from '../../grids/hierarchical-grid/hierarchical-grid.component'; -import { IgxRowIslandComponent } from '../../grids/hierarchical-grid/row-island.component'; -import { IPathSegment } from './../../grids/hierarchical-grid/hierarchical-grid-base.directive'; -import { IgxColumnGroupComponent } from './../../grids/columns/column-group.component'; +import { ColumnType, GridType, IPathSegment } from '../../grids/common/grid.interface'; export enum ExportRecordType { GroupedRecord = 'GroupedRecord', @@ -36,7 +30,7 @@ export interface IExportRecord { data: any; level: number; type: ExportRecordType; - owner?: string | IgxGridBaseDirective; + owner?: string | GridType; hidden?: boolean; } @@ -121,7 +115,7 @@ export interface IColumnExportingEventArgs extends IBaseEventArgs { /** * A reference to the grid owner. */ - grid?: IgxGridBaseDirective; + grid?: GridType; } /**hidden @@ -133,7 +127,7 @@ class IgxColumnExportingEventArgs implements IColumnExportingEventArgs { public field: string; public cancel: boolean; public skipFormatter: boolean; - public grid?: IgxGridBaseDirective; + public grid?: GridType; public owner?: any; public userSetIndex? = false; @@ -223,7 +217,7 @@ export abstract class IgxBaseExporter { if (tagName === 'igx-hierarchical-grid') { this._ownersMap.set(grid, columnList); - const childLayoutList = (grid as IgxHierarchicalGridComponent).childLayoutList; + const childLayoutList = grid.childLayoutList; for (const island of childLayoutList) { this.mapHierarchicalGridColumns(island, grid.data[0]); @@ -264,7 +258,7 @@ export abstract class IgxBaseExporter { this.exportGridRecordsData(records); } - private exportGridRecordsData(records: IExportRecord[], grid?: IgxGridBaseDirective) { + private exportGridRecordsData(records: IExportRecord[], grid?: GridType) { if (this._ownersMap.size === 0) { const recordsData = records.map(r => r.data); const keys = ExportUtilities.getKeysFromData(recordsData); @@ -432,7 +426,7 @@ export abstract class IgxBaseExporter { return reorderedColumns; } - private prepareData(grid: IgxGridBaseDirective) { + private prepareData(grid: GridType) { this.flatRecords = []; const tagName = grid.nativeElement.tagName.toLowerCase(); @@ -444,21 +438,21 @@ export abstract class IgxBaseExporter { switch (tagName) { case 'igx-hierarchical-grid': { - this.prepareHierarchicalGridData(grid as IgxHierarchicalGridComponent, hasFiltering, hasSorting); + this.prepareHierarchicalGridData(grid, hasFiltering, hasSorting); break; } case 'igx-tree-grid': { - this.prepareTreeGridData(grid as IgxTreeGridComponent, hasFiltering, hasSorting); + this.prepareTreeGridData(grid, hasFiltering, hasSorting); break; } default: { - this.prepareGridData(grid as IgxGridComponent, hasFiltering, hasSorting); + this.prepareGridData(grid, hasFiltering, hasSorting); break; } } } - private prepareHierarchicalGridData(grid: IgxHierarchicalGridComponent, hasFiltering: boolean, hasSorting: boolean) { + private prepareHierarchicalGridData(grid: GridType, hasFiltering: boolean, hasSorting: boolean) { const skipOperations = (!hasFiltering || !this.options.ignoreFiltering) && @@ -490,7 +484,7 @@ export abstract class IgxBaseExporter { } } - private addHierarchicalGridData(grid: IgxHierarchicalGridComponent, records: any[]) { + private addHierarchicalGridData(grid: GridType, records: any[]) { const childLayoutList = grid.childLayoutList; const columnFields = this._ownersMap.get(grid).columns.map(col => col.field); @@ -527,7 +521,7 @@ export abstract class IgxBaseExporter { } } - private prepareIslandData(island: IgxRowIslandComponent, islandGrid: IgxHierarchicalGridComponent, data: any[]): any[] { + private prepareIslandData(island: any, islandGrid: GridType, data: any[]): any[] { if (islandGrid !== undefined) { const hasFiltering = (islandGrid.filteringExpressionsTree && islandGrid.filteringExpressionsTree.filteringOperands.length > 0) || @@ -595,8 +589,8 @@ export abstract class IgxBaseExporter { return data; } - private getAllChildColumnsAndData(island: IgxRowIslandComponent, - childData: any[], expansionStateVal: boolean, grid: IgxHierarchicalGridComponent) { + private getAllChildColumnsAndData(island: any, + childData: any[], expansionStateVal: boolean, grid: GridType) { const columnList = this._ownersMap.get(island).columns; const columnHeader = columnList .filter(col => col.headerType === HeaderType.ColumnHeader) @@ -647,7 +641,7 @@ export abstract class IgxBaseExporter { } } - private prepareGridData(grid: IgxGridComponent, hasFiltering: boolean, hasSorting: boolean) { + private prepareGridData(grid: GridType, hasFiltering: boolean, hasSorting: boolean) { const groupedGridGroupingState: IGroupingState = { expressions: grid.groupingExpressions, expansion: grid.groupingExpansionState, @@ -706,7 +700,7 @@ export abstract class IgxBaseExporter { } } - private prepareTreeGridData(grid: IgxTreeGridComponent, hasFiltering: boolean, hasSorting: boolean) { + private prepareTreeGridData(grid: GridType, hasFiltering: boolean, hasSorting: boolean) { const skipOperations = (!hasFiltering || !this.options.ignoreFiltering) && (!hasSorting || !this.options.ignoreSorting); @@ -769,7 +763,7 @@ export abstract class IgxBaseExporter { } } - private addGroupedData(grid: IgxGridComponent, records: IGroupByRecord[], + private addGroupedData(grid: GridType, records: IGroupByRecord[], groupingState: IGroupingState, parentExpanded: boolean = true) { if (!records) { return; @@ -828,7 +822,7 @@ export abstract class IgxBaseExporter { } } - private getColumns(columns: IgxColumnComponent[]): IColumnList { + private getColumns(columns: ColumnType[]): IColumnList { const colList = []; const colWidthList = []; const hiddenColumns = []; @@ -843,10 +837,10 @@ export abstract class IgxBaseExporter { const columnWidth = Number(column.width?.slice(0, -2)) || DEFAULT_COLUMN_WIDTH; const columnLevel = !this.options.ignoreMultiColumnHeaders ? column.level : 0; - const isMultiColHeader = column instanceof IgxColumnGroupComponent; + const isMultiColHeader = column.columnGroup; const colSpan = isMultiColHeader ? column.allChildren - .filter(ch => !(ch instanceof IgxColumnGroupComponent) && (!this.options.ignoreColumnsVisibility ? !ch.hidden : true)) + .filter(ch => !(ch.columnGroup) && (!this.options.ignoreColumnsVisibility ? !ch.hidden : true)) .length : 1; @@ -908,7 +902,7 @@ export abstract class IgxBaseExporter { return result; } - private mapHierarchicalGridColumns(island: IgxRowIslandComponent, gridData: any) { + private mapHierarchicalGridColumns(island: any, gridData: any) { let columnList: IColumnList; let keyData; diff --git a/projects/igniteui-angular/src/lib/services/exporter-common/export-utilities.ts b/projects/igniteui-angular/src/lib/services/exporter-common/export-utilities.ts index 261f2eed2f5..404bbba1731 100644 --- a/projects/igniteui-angular/src/lib/services/exporter-common/export-utilities.ts +++ b/projects/igniteui-angular/src/lib/services/exporter-common/export-utilities.ts @@ -19,24 +19,19 @@ export class ExportUtilities { const keys = new Set(keys1.concat(keys2).concat(keys3)); - return !ExportUtilities.isSpecialData(dataEntry) ? Array.from(keys) : [ 'Column 1' ]; + return !ExportUtilities.isSpecialData(dataEntry) ? Array.from(keys) : ['Column 1']; } public static saveBlobToFile(blob: Blob, fileName) { const a = document.createElement('a'); - - if (window.navigator && window.navigator.msSaveOrOpenBlob) { - window.navigator.msSaveOrOpenBlob(blob, fileName); - } else { - const url = window.URL.createObjectURL(blob); - a.download = fileName; - - a.href = url; - document.body.appendChild(a); - a.click(); - document.body.removeChild(a); - window.URL.revokeObjectURL(url); - } + const url = window.URL.createObjectURL(blob); + a.download = fileName; + + a.href = url; + document.body.appendChild(a); + a.click(); + document.body.removeChild(a); + window.URL.revokeObjectURL(url); } public static stringToArrayBuffer(s: string): ArrayBuffer { @@ -52,8 +47,8 @@ export class ExportUtilities { public static isSpecialData(data: any): boolean { return (typeof data === 'string' || - typeof data === 'number' || - data instanceof Date); + typeof data === 'number' || + data instanceof Date); } public static hasValue(value: any): boolean { diff --git a/projects/igniteui-angular/src/lib/services/exporter-common/test-methods.spec.ts b/projects/igniteui-angular/src/lib/services/exporter-common/test-methods.spec.ts index 4618e215391..4567361fb5d 100644 --- a/projects/igniteui-angular/src/lib/services/exporter-common/test-methods.spec.ts +++ b/projects/igniteui-angular/src/lib/services/exporter-common/test-methods.spec.ts @@ -41,10 +41,9 @@ export class TestMethods { await wait(16); const myGrid = fix.componentInstance.grid; - // Pin columns colIndices.forEach((i) => { - myGrid.columns[i].pinned = true; + myGrid.columnList.get(i).pinned = true; }); await wait(16); diff --git a/projects/igniteui-angular/src/lib/services/overlay/overlay.spec.ts b/projects/igniteui-angular/src/lib/services/overlay/overlay.spec.ts index e77bb2c38db..773867d2daf 100644 --- a/projects/igniteui-angular/src/lib/services/overlay/overlay.spec.ts +++ b/projects/igniteui-angular/src/lib/services/overlay/overlay.spec.ts @@ -262,7 +262,8 @@ describe('igxOverlay', () => { hostView: '', location: mockElementRef, changeDetectorRef: { detectChanges: () => { } }, - destroy: () => { } + destroy: () => { }, + onDestroy: () => { } }) }) }; @@ -815,51 +816,51 @@ describe('igxOverlay', () => { })); // TODO: refactor utilities to include all exported methods in a class - it('#1799 - content div should reposition on window resize.', fakeAsync(() => { - const rect: ClientRect = { - bottom: 50, - height: 0, - left: 50, - right: 50, - top: 50, - width: 0 - }; - const getPointSpy = spyOn(Util, 'getTargetRect').and.returnValue(rect); - const fixture = TestBed.createComponent(FlexContainerComponent); - fixture.detectChanges(); - const overlayInstance = fixture.componentInstance.overlay; - const buttonElement: HTMLElement = fixture.componentInstance.buttonElement.nativeElement; - - const id = overlayInstance.attach( - SimpleDynamicComponent, - { positionStrategy: new ConnectedPositioningStrategy({ target: buttonElement }) }); - overlayInstance.show(id); - tick(DEBOUNCE_TIME); - - let contentElement = (fixture.nativeElement as HTMLElement) - .parentElement.getElementsByClassName(CLASS_OVERLAY_CONTENT_MODAL)[0] as HTMLElement; - let contentRect = contentElement.getBoundingClientRect(); - - expect(50).toEqual(contentRect.left); - expect(50).toEqual(contentRect.top); - - rect.left = 200; - rect.right = 200; - rect.top = 200; - rect.bottom = 200; - getPointSpy.and.callThrough().and.returnValue(rect); - window.resizeBy(200, 200); - window.dispatchEvent(new Event('resize')); - tick(DEBOUNCE_TIME); - - contentElement = (fixture.nativeElement as HTMLElement) - .parentElement.getElementsByClassName(CLASS_OVERLAY_CONTENT_MODAL)[0] as HTMLElement; - contentRect = contentElement.getBoundingClientRect(); - expect(200).toEqual(contentRect.left); - expect(200).toEqual(contentRect.top); - - overlayInstance.hide(id); - })); + // it('#1799 - content div should reposition on window resize.', fakeAsync(() => { + // const rect: ClientRect = { + // bottom: 50, + // height: 0, + // left: 50, + // right: 50, + // top: 50, + // width: 0 + // }; + // const getPointSpy = spyOn(Util, 'getTargetRect').and.returnValue(rect); + // const fixture = TestBed.createComponent(FlexContainerComponent); + // fixture.detectChanges(); + // const overlayInstance = fixture.componentInstance.overlay; + // const buttonElement: HTMLElement = fixture.componentInstance.buttonElement.nativeElement; + + // const id = overlayInstance.attach( + // SimpleDynamicComponent, + // { positionStrategy: new ConnectedPositioningStrategy({ target: buttonElement }) }); + // overlayInstance.show(id); + // tick(DEBOUNCE_TIME); + + // let contentElement = (fixture.nativeElement as HTMLElement) + // .parentElement.getElementsByClassName(CLASS_OVERLAY_CONTENT_MODAL)[0] as HTMLElement; + // let contentRect = contentElement.getBoundingClientRect(); + + // expect(50).toEqual(contentRect.left); + // expect(50).toEqual(contentRect.top); + + // rect.left = 200; + // rect.right = 200; + // rect.top = 200; + // rect.bottom = 200; + // getPointSpy.and.callThrough().and.returnValue(rect); + // window.resizeBy(200, 200); + // window.dispatchEvent(new Event('resize')); + // tick(DEBOUNCE_TIME); + + // contentElement = (fixture.nativeElement as HTMLElement) + // .parentElement.getElementsByClassName(CLASS_OVERLAY_CONTENT_MODAL)[0] as HTMLElement; + // contentRect = contentElement.getBoundingClientRect(); + // expect(200).toEqual(contentRect.left); + // expect(200).toEqual(contentRect.top); + + // overlayInstance.hide(id); + // })); it('#2475 - An error is thrown for IgxOverlay when showing a component' + 'instance that is not attached to the DOM', fakeAsync(() => { @@ -1064,45 +1065,45 @@ describe('igxOverlay', () => { expect(overlay.getOverlayById(id).componentRef as any).toBe(mockComponent); })); - it('##6474 - should calculate correctly position', () => { - const elastic: ElasticPositionStrategy = new ElasticPositionStrategy(); - const targetRect: ClientRect = { - top: 100, - bottom: 200, - height: 100, - left: 100, - right: 200, - width: 100 - }; - const elementRect: ClientRect = { - top: 0, - bottom: 300, - height: 300, - left: 0, - right: 300, - width: 300 - }; - const viewPortRect: ClientRect = { - top: 1000, - bottom: 1300, - height: 300, - left: 1000, - right: 1300, - width: 300 - }; - spyOn(elastic, 'setStyle').and.returnValue({}); - spyOn(Util, 'getViewportRect').and.returnValue(viewPortRect); - spyOn(Util, 'getTargetRect').and.returnValue(targetRect); - - const mockElement = jasmine.createSpyObj('HTMLElement', ['getBoundingClientRect']); - spyOn(mockElement, 'getBoundingClientRect').and.returnValue(elementRect); - mockElement.classList = { add: () => { } }; - mockElement.style = { width: '', height: '' }; - elastic.position(mockElement, null, null, true); - - expect(mockElement.style.width).toBe('200px'); - expect(mockElement.style.height).toBe('100px'); - }); + // it('##6474 - should calculate correctly position', () => { + // const elastic: ElasticPositionStrategy = new ElasticPositionStrategy(); + // const targetRect: ClientRect = { + // top: 100, + // bottom: 200, + // height: 100, + // left: 100, + // right: 200, + // width: 100 + // }; + // const elementRect: ClientRect = { + // top: 0, + // bottom: 300, + // height: 300, + // left: 0, + // right: 300, + // width: 300 + // }; + // const viewPortRect: ClientRect = { + // top: 1000, + // bottom: 1300, + // height: 300, + // left: 1000, + // right: 1300, + // width: 300 + // }; + // spyOn(elastic, 'setStyle').and.returnValue({}); + // spyOn(Util, 'getViewportRect').and.returnValue(viewPortRect); + // spyOn(Util, 'getTargetRect').and.returnValue(targetRect); + + // const mockElement = jasmine.createSpyObj('HTMLElement', ['getBoundingClientRect']); + // spyOn(mockElement, 'getBoundingClientRect').and.returnValue(elementRect); + // mockElement.classList = { add: () => { } }; + // mockElement.style = { width: '', height: '' }; + // elastic.position(mockElement, null, null, true); + + // expect(mockElement.style.width).toBe('200px'); + // expect(mockElement.style.height).toBe('100px'); + // }); it('should close overlay on outside click when target is point, #8297', fakeAsync(() => { const fixture = TestBed.createComponent(EmptyPageComponent); @@ -2079,155 +2080,155 @@ describe('igxOverlay', () => { expect(overlayStyle).toEqual(expectedStyle); })); - it('Should display each shown component based on the options specified if the component fits into the visible window.', - fakeAsync(() => { - const fixture = TestBed.createComponent(EmptyPageComponent); - fixture.detectChanges(); - - const overlay = fixture.componentInstance.overlay; - const button = fixture.componentInstance.buttonElement.nativeElement; - button.style.left = '150px'; - button.style.top = '150px'; - button.style.position = 'relative'; - - const hAlignmentArray = Object.keys(HorizontalAlignment).filter(key => !isNaN(Number(HorizontalAlignment[key]))); - const vAlignmentArray = Object.keys(VerticalAlignment).filter(key => !isNaN(Number(VerticalAlignment[key]))); - hAlignmentArray.forEach(horizontalStartPoint => { - vAlignmentArray.forEach(verticalStartPoint => { - hAlignmentArray.forEach(horizontalDirection => { - // do not check Center as we do nothing here - if (horizontalDirection === 'Center') { - return; - } - vAlignmentArray.forEach(verticalDirection => { - // do not check Middle as we do nothing here - if (verticalDirection === 'Middle') { - return; - } - const positionSettings: PositionSettings = {}; - positionSettings.horizontalStartPoint = HorizontalAlignment[horizontalStartPoint]; - positionSettings.verticalStartPoint = VerticalAlignment[verticalStartPoint]; - positionSettings.horizontalDirection = HorizontalAlignment[horizontalDirection]; - positionSettings.verticalDirection = VerticalAlignment[verticalDirection]; - - const overlaySettings: OverlaySettings = { - target: button, - positionStrategy: new AutoPositionStrategy(positionSettings), - modal: false, - closeOnOutsideClick: false - }; - - overlay.show(overlay.attach(SimpleDynamicComponent, overlaySettings)); - tick(); - fixture.detectChanges(); - - const targetRect = (overlaySettings.target as HTMLElement).getBoundingClientRect(); - const componentElement = (fixture.debugElement.nativeElement as HTMLElement) - .parentElement.getElementsByTagName('component')[0]; - const componentRect = componentElement.getBoundingClientRect(); - const screenRect: ClientRect = { - left: 0, - top: 0, - right: window.innerWidth, - bottom: window.innerHeight, - width: window.innerWidth, - height: window.innerHeight, - }; - - const location = getOverlayWrapperLocation(positionSettings, targetRect, componentRect, screenRect); - expect(componentRect.top.toFixed(1)).toEqual(location.y.toFixed(1)); - expect(componentRect.left.toFixed(1)).toEqual(location.x.toFixed(1)); - expect(document.body.scrollHeight > document.body.clientHeight).toBeFalsy(); // check scrollbar - fixture.componentInstance.overlay.detachAll(); - tick(); - fixture.detectChanges(); - }); - }); - }); - }); - })); - - it(`Should reposition the component and render it correctly in the window, even when the rendering options passed - should result in otherwise a partially hidden component. No scrollbars should appear.`, - fakeAsync(() => { - const fixture = TestBed.createComponent(EmptyPageComponent); - fixture.detectChanges(); - - const button = fixture.componentInstance.buttonElement.nativeElement; - const overlay = fixture.componentInstance.overlay; - button.style.position = 'relative'; - button.style.width = '50px'; - button.style.height = '50px'; - const buttonLocations = [ - { left: `0px`, top: `0px` }, // topLeft - { left: `${window.innerWidth - 200}px`, top: `0px` }, // topRight - { left: `0px`, top: `${window.innerHeight - 200}px` }, // bottomLeft - { left: `${window.innerWidth - 200}px`, top: `${window.innerHeight - 200}px` } // bottomRight - ]; - const hAlignmentArray = Object.keys(HorizontalAlignment).filter(key => !isNaN(Number(HorizontalAlignment[key]))); - const vAlignmentArray = Object.keys(VerticalAlignment).filter(key => !isNaN(Number(VerticalAlignment[key]))); - for (const buttonLocation of buttonLocations) { - for (const horizontalStartPoint of hAlignmentArray) { - for (const verticalStartPoint of vAlignmentArray) { - for (const horizontalDirection of hAlignmentArray) { - for (const verticalDirection of vAlignmentArray) { - - const positionSettings: PositionSettings = {}; - button.style.left = buttonLocation.left; - button.style.top = buttonLocation.top; - - positionSettings.horizontalStartPoint = HorizontalAlignment[horizontalStartPoint]; - positionSettings.verticalStartPoint = VerticalAlignment[verticalStartPoint]; - positionSettings.horizontalDirection = HorizontalAlignment[horizontalDirection]; - positionSettings.verticalDirection = VerticalAlignment[verticalDirection]; - - const overlaySettings: OverlaySettings = { - target: button, - positionStrategy: new AutoPositionStrategy(positionSettings), - modal: false, - closeOnOutsideClick: false - }; - - overlay.show(overlay.attach(SimpleDynamicComponent, overlaySettings)); - tick(); - fixture.detectChanges(); - - const targetRect = (overlaySettings.target as HTMLElement).getBoundingClientRect(); - const contentElement = (fixture.nativeElement as HTMLElement) - .parentElement.getElementsByClassName(CLASS_OVERLAY_CONTENT)[0] as HTMLElement; - const contentRect = contentElement.getBoundingClientRect(); - const screenRect: ClientRect = { - left: 0, - top: 0, - right: window.innerWidth, - bottom: window.innerHeight, - width: window.innerWidth, - height: window.innerHeight, - }; - - const loc = getOverlayWrapperLocation(positionSettings, targetRect, contentRect, screenRect); - expect(contentRect.top.toFixed(1)) - .withContext(`YYY HD: ${horizontalDirection}; VD: ${verticalDirection}; ` + - `HSP: ${horizontalStartPoint}; VSP: ${verticalStartPoint}; ` + - `BL: ${buttonLocation.left}; BT: ${buttonLocation.top}; ` + - `STYLE: ${contentElement.getAttribute('style')};`) - .toEqual(loc.y.toFixed(1)); - expect(contentRect.left.toFixed(1)) - .withContext(`XXX HD: ${horizontalDirection}; VD: ${verticalDirection}; ` + - `HSP: ${horizontalStartPoint}; VSP: ${verticalStartPoint}; ` + - `BL: ${buttonLocation.left}; BT: ${buttonLocation.top}; ` + - `STYLE: ${contentElement.getAttribute('style')};`) - .toEqual(loc.x.toFixed(1)); - expect(document.body.scrollHeight > document.body.clientHeight).toBeFalsy(); // check scrollbar - fixture.componentInstance.overlay.detachAll(); - tick(); - fixture.detectChanges(); - } - } - } - } - } - })); + // it('Should display each shown component based on the options specified if the component fits into the visible window.', + // fakeAsync(() => { + // const fixture = TestBed.createComponent(EmptyPageComponent); + // fixture.detectChanges(); + + // const overlay = fixture.componentInstance.overlay; + // const button = fixture.componentInstance.buttonElement.nativeElement; + // button.style.left = '150px'; + // button.style.top = '150px'; + // button.style.position = 'relative'; + + // const hAlignmentArray = Object.keys(HorizontalAlignment).filter(key => !isNaN(Number(HorizontalAlignment[key]))); + // const vAlignmentArray = Object.keys(VerticalAlignment).filter(key => !isNaN(Number(VerticalAlignment[key]))); + // hAlignmentArray.forEach(horizontalStartPoint => { + // vAlignmentArray.forEach(verticalStartPoint => { + // hAlignmentArray.forEach(horizontalDirection => { + // // do not check Center as we do nothing here + // if (horizontalDirection === 'Center') { + // return; + // } + // vAlignmentArray.forEach(verticalDirection => { + // // do not check Middle as we do nothing here + // if (verticalDirection === 'Middle') { + // return; + // } + // const positionSettings: PositionSettings = {}; + // positionSettings.horizontalStartPoint = HorizontalAlignment[horizontalStartPoint]; + // positionSettings.verticalStartPoint = VerticalAlignment[verticalStartPoint]; + // positionSettings.horizontalDirection = HorizontalAlignment[horizontalDirection]; + // positionSettings.verticalDirection = VerticalAlignment[verticalDirection]; + + // const overlaySettings: OverlaySettings = { + // target: button, + // positionStrategy: new AutoPositionStrategy(positionSettings), + // modal: false, + // closeOnOutsideClick: false + // }; + + // overlay.show(overlay.attach(SimpleDynamicComponent, overlaySettings)); + // tick(); + // fixture.detectChanges(); + + // const targetRect = (overlaySettings.target as HTMLElement).getBoundingClientRect(); + // const componentElement = (fixture.debugElement.nativeElement as HTMLElement) + // .parentElement.getElementsByTagName('component')[0]; + // const componentRect = componentElement.getBoundingClientRect(); + // const screenRect: ClientRect = { + // left: 0, + // top: 0, + // right: window.innerWidth, + // bottom: window.innerHeight, + // width: window.innerWidth, + // height: window.innerHeight, + // }; + + // const location = getOverlayWrapperLocation(positionSettings, targetRect, componentRect, screenRect); + // expect(componentRect.top.toFixed(1)).toEqual(location.y.toFixed(1)); + // expect(componentRect.left.toFixed(1)).toEqual(location.x.toFixed(1)); + // expect(document.body.scrollHeight > document.body.clientHeight).toBeFalsy(); // check scrollbar + // fixture.componentInstance.overlay.detachAll(); + // tick(); + // fixture.detectChanges(); + // }); + // }); + // }); + // }); + // })); + + // it(`Should reposition the component and render it correctly in the window, even when the rendering options passed + // should result in otherwise a partially hidden component. No scrollbars should appear.`, + // fakeAsync(() => { + // const fixture = TestBed.createComponent(EmptyPageComponent); + // fixture.detectChanges(); + + // const button = fixture.componentInstance.buttonElement.nativeElement; + // const overlay = fixture.componentInstance.overlay; + // button.style.position = 'relative'; + // button.style.width = '50px'; + // button.style.height = '50px'; + // const buttonLocations = [ + // { left: `0px`, top: `0px` }, // topLeft + // { left: `${window.innerWidth - 200}px`, top: `0px` }, // topRight + // { left: `0px`, top: `${window.innerHeight - 200}px` }, // bottomLeft + // { left: `${window.innerWidth - 200}px`, top: `${window.innerHeight - 200}px` } // bottomRight + // ]; + // const hAlignmentArray = Object.keys(HorizontalAlignment).filter(key => !isNaN(Number(HorizontalAlignment[key]))); + // const vAlignmentArray = Object.keys(VerticalAlignment).filter(key => !isNaN(Number(VerticalAlignment[key]))); + // for (const buttonLocation of buttonLocations) { + // for (const horizontalStartPoint of hAlignmentArray) { + // for (const verticalStartPoint of vAlignmentArray) { + // for (const horizontalDirection of hAlignmentArray) { + // for (const verticalDirection of vAlignmentArray) { + + // const positionSettings: PositionSettings = {}; + // button.style.left = buttonLocation.left; + // button.style.top = buttonLocation.top; + + // positionSettings.horizontalStartPoint = HorizontalAlignment[horizontalStartPoint]; + // positionSettings.verticalStartPoint = VerticalAlignment[verticalStartPoint]; + // positionSettings.horizontalDirection = HorizontalAlignment[horizontalDirection]; + // positionSettings.verticalDirection = VerticalAlignment[verticalDirection]; + + // const overlaySettings: OverlaySettings = { + // target: button, + // positionStrategy: new AutoPositionStrategy(positionSettings), + // modal: false, + // closeOnOutsideClick: false + // }; + + // overlay.show(overlay.attach(SimpleDynamicComponent, overlaySettings)); + // tick(); + // fixture.detectChanges(); + + // const targetRect = (overlaySettings.target as HTMLElement).getBoundingClientRect(); + // const contentElement = (fixture.nativeElement as HTMLElement) + // .parentElement.getElementsByClassName(CLASS_OVERLAY_CONTENT)[0] as HTMLElement; + // const contentRect = contentElement.getBoundingClientRect(); + // const screenRect: ClientRect = { + // left: 0, + // top: 0, + // right: window.innerWidth, + // bottom: window.innerHeight, + // width: window.innerWidth, + // height: window.innerHeight, + // }; + + // const loc = getOverlayWrapperLocation(positionSettings, targetRect, contentRect, screenRect); + // expect(contentRect.top.toFixed(1)) + // .withContext(`YYY HD: ${horizontalDirection}; VD: ${verticalDirection}; ` + + // `HSP: ${horizontalStartPoint}; VSP: ${verticalStartPoint}; ` + + // `BL: ${buttonLocation.left}; BT: ${buttonLocation.top}; ` + + // `STYLE: ${contentElement.getAttribute('style')};`) + // .toEqual(loc.y.toFixed(1)); + // expect(contentRect.left.toFixed(1)) + // .withContext(`XXX HD: ${horizontalDirection}; VD: ${verticalDirection}; ` + + // `HSP: ${horizontalStartPoint}; VSP: ${verticalStartPoint}; ` + + // `BL: ${buttonLocation.left}; BT: ${buttonLocation.top}; ` + + // `STYLE: ${contentElement.getAttribute('style')};`) + // .toEqual(loc.x.toFixed(1)); + // expect(document.body.scrollHeight > document.body.clientHeight).toBeFalsy(); // check scrollbar + // fixture.componentInstance.overlay.detachAll(); + // tick(); + // fixture.detectChanges(); + // } + // } + // } + // } + // } + // })); it('Should render margins correctly.', fakeAsync(() => { const expectedMargin = '0px'; @@ -2540,177 +2541,177 @@ describe('igxOverlay', () => { expect(contentRect.left).toEqual(expectedLeft); })); - it('Should display each shown component based on the options specified if the component fits into the visible window.', - fakeAsync(() => { - const fixture = TestBed.createComponent(EmptyPageComponent); - fixture.detectChanges(); - - const overlay = fixture.componentInstance.overlay; - const button = fixture.componentInstance.buttonElement.nativeElement; - button.style.left = '150px'; - button.style.top = '150px'; - button.style.position = 'relative'; - - const hAlignmentArray = Object.keys(HorizontalAlignment).filter(key => !isNaN(Number(HorizontalAlignment[key]))); - const vAlignmentArray = Object.keys(VerticalAlignment).filter(key => !isNaN(Number(VerticalAlignment[key]))); - hAlignmentArray.forEach(horizontalStartPoint => { - vAlignmentArray.forEach(verticalStartPoint => { - hAlignmentArray.forEach(horizontalDirection => { - vAlignmentArray.forEach(verticalDirection => { - const positionSettings: PositionSettings = {}; - positionSettings.horizontalStartPoint = HorizontalAlignment[horizontalStartPoint]; - positionSettings.verticalStartPoint = VerticalAlignment[verticalStartPoint]; - positionSettings.horizontalDirection = HorizontalAlignment[horizontalDirection]; - positionSettings.verticalDirection = VerticalAlignment[verticalDirection]; - positionSettings.minSize = { width: 80, height: 80 }; - - const overlaySettings: OverlaySettings = { - target: button, - positionStrategy: new ElasticPositionStrategy(positionSettings), - modal: false, - closeOnOutsideClick: false - }; - - overlay.show(overlay.attach(SimpleDynamicComponent, overlaySettings)); - tick(); - fixture.detectChanges(); - - const targetRect = (overlaySettings.target as HTMLElement).getBoundingClientRect() as ClientRect; - // we need original rect of the wrapper element. After it was shown in overlay elastic may - // set width and/or height. To get original rect remove width and height, get the rect and - // restore width and height; - const contentElement = (fixture.nativeElement as HTMLElement) - .parentElement.getElementsByClassName(CLASS_OVERLAY_CONTENT)[0] as HTMLElement; - const width = contentElement.style.width; - contentElement.style.width = ''; - const height = contentElement.style.height; - contentElement.style.height = ''; - let contentRect = contentElement.getBoundingClientRect() as ClientRect; - contentElement.style.width = width; - contentElement.style.height = height; - const screenRect: ClientRect = { - left: 0, - top: 0, - right: window.innerWidth, - bottom: window.innerHeight, - width: window.innerWidth, - height: window.innerHeight, - }; - - const location = - getOverlayWrapperLocation(positionSettings, targetRect, contentRect, screenRect, true); - // now get the wrapper rect as it is after elastic was applied - contentRect = contentElement.getBoundingClientRect() as ClientRect; - expect(contentRect.top.toFixed(1)) - .withContext(`HD: ${horizontalDirection}; HSP: ${horizontalStartPoint};` + - `VD: ${verticalDirection}; VSP: ${verticalStartPoint};` + - `STYLE: ${contentElement.getAttribute('style')};`) - .toEqual(location.y.toFixed(1)); - expect(contentRect.left.toFixed(1)) - .withContext(`HD: ${horizontalDirection}; HSP: ${horizontalStartPoint};` + - `VD: ${verticalDirection}; VSP: ${verticalStartPoint};` + - `STYLE: ${contentElement.getAttribute('style')};`) - .toEqual(location.x.toFixed(1)); - fixture.componentInstance.overlay.detachAll(); - tick(); - fixture.detectChanges(); - }); - }); - }); - }); - })); - - it(`Should reposition the component and render it correctly in the window, even when the rendering options passed - should result in otherwise a partially hidden component.No scrollbars should appear.`, - fakeAsync(() => { - const fixture = TestBed.createComponent(EmptyPageComponent); - fixture.detectChanges(); - - const overlay = fixture.componentInstance.overlay; - const button = fixture.componentInstance.buttonElement.nativeElement; - button.style.position = 'relative'; - button.style.width = '50px'; - button.style.height = '50px'; - const buttonLocations = [ - { left: `0px`, top: `0px` }, // topLeft - { left: `${window.innerWidth - button.width} px`, top: `0px` }, // topRight - { left: `0px`, top: `${window.innerHeight - button.height} px` }, // bottomLeft - { left: `${window.innerWidth - button.width} px`, top: `${window.innerHeight - button.height} px` } // bottomRight - ]; - const hAlignmentArray = Object.keys(HorizontalAlignment).filter(key => !isNaN(Number(HorizontalAlignment[key]))); - const vAlignmentArray = Object.keys(VerticalAlignment).filter(key => !isNaN(Number(VerticalAlignment[key]))); - for (const buttonLocation of buttonLocations) { - for (const horizontalStartPoint of hAlignmentArray) { - for (const verticalStartPoint of vAlignmentArray) { - for (const horizontalDirection of hAlignmentArray) { - for (const verticalDirection of vAlignmentArray) { - const positionSettings: PositionSettings = {}; - button.style.left = buttonLocation.left; - button.style.top = buttonLocation.top; - - positionSettings.horizontalStartPoint = HorizontalAlignment[horizontalStartPoint]; - positionSettings.verticalStartPoint = VerticalAlignment[verticalStartPoint]; - positionSettings.horizontalDirection = HorizontalAlignment[horizontalDirection]; - positionSettings.verticalDirection = VerticalAlignment[verticalDirection]; - positionSettings.minSize = { width: 80, height: 80 }; - - const overlaySettings: OverlaySettings = { - target: button, - positionStrategy: new ElasticPositionStrategy(positionSettings), - modal: false, - closeOnOutsideClick: false - }; - - overlay.show(overlay.attach(SimpleDynamicComponent, overlaySettings)); - tick(); - fixture.detectChanges(); - - const targetRect = (overlaySettings.target as HTMLElement).getBoundingClientRect() as ClientRect; - // we need original rect of the wrapper element. After it was shown in overlay elastic may - // set width and/or height. To get original rect remove width and height, get the rect and - // restore width and height; - const contentElement = (fixture.nativeElement as HTMLElement) - .parentElement.getElementsByClassName(CLASS_OVERLAY_CONTENT)[0] as HTMLElement; - const width = contentElement.style.width; - contentElement.style.width = ''; - const height = contentElement.style.height; - contentElement.style.height = ''; - let contentRect = contentElement.getBoundingClientRect(); - contentElement.style.width = width; - contentElement.style.height = height; - const screenRect: ClientRect = { - left: 0, - top: 0, - right: window.innerWidth, - bottom: window.innerHeight, - width: window.innerWidth, - height: window.innerHeight, - }; - - const loc = - getOverlayWrapperLocation(positionSettings, targetRect, contentRect, screenRect, true); - // now get the wrapper rect as it is after elastic was applied - contentRect = contentElement.getBoundingClientRect(); - expect(contentRect.top.toFixed(1)) - .withContext(`HD: ${horizontalDirection}; HSP: ${horizontalStartPoint};` + - `VD: ${verticalDirection}; VSP: ${verticalStartPoint};` + - `STYLE: ${contentElement.getAttribute('style')};`) - .toEqual(loc.y.toFixed(1)); - expect(contentRect.left.toFixed(1)) - .withContext(`HD: ${horizontalDirection}; HSP: ${horizontalStartPoint};` + - `VD: ${verticalDirection}; VSP: ${verticalStartPoint}` + - `STYLE: ${contentElement.getAttribute('style')};`) - .toEqual(loc.x.toFixed(1)); - expect(document.body.scrollHeight > document.body.clientHeight).toBeFalsy(); // check scrollbars - fixture.componentInstance.overlay.detachAll(); - tick(); - fixture.detectChanges(); - } - } - } - } - } - })); + // it('Should display each shown component based on the options specified if the component fits into the visible window.', + // fakeAsync(() => { + // const fixture = TestBed.createComponent(EmptyPageComponent); + // fixture.detectChanges(); + + // const overlay = fixture.componentInstance.overlay; + // const button = fixture.componentInstance.buttonElement.nativeElement; + // button.style.left = '150px'; + // button.style.top = '150px'; + // button.style.position = 'relative'; + + // const hAlignmentArray = Object.keys(HorizontalAlignment).filter(key => !isNaN(Number(HorizontalAlignment[key]))); + // const vAlignmentArray = Object.keys(VerticalAlignment).filter(key => !isNaN(Number(VerticalAlignment[key]))); + // hAlignmentArray.forEach(horizontalStartPoint => { + // vAlignmentArray.forEach(verticalStartPoint => { + // hAlignmentArray.forEach(horizontalDirection => { + // vAlignmentArray.forEach(verticalDirection => { + // const positionSettings: PositionSettings = {}; + // positionSettings.horizontalStartPoint = HorizontalAlignment[horizontalStartPoint]; + // positionSettings.verticalStartPoint = VerticalAlignment[verticalStartPoint]; + // positionSettings.horizontalDirection = HorizontalAlignment[horizontalDirection]; + // positionSettings.verticalDirection = VerticalAlignment[verticalDirection]; + // positionSettings.minSize = { width: 80, height: 80 }; + + // const overlaySettings: OverlaySettings = { + // target: button, + // positionStrategy: new ElasticPositionStrategy(positionSettings), + // modal: false, + // closeOnOutsideClick: false + // }; + + // overlay.show(overlay.attach(SimpleDynamicComponent, overlaySettings)); + // tick(); + // fixture.detectChanges(); + + // const targetRect = (overlaySettings.target as HTMLElement).getBoundingClientRect() as ClientRect; + // // we need original rect of the wrapper element. After it was shown in overlay elastic may + // // set width and/or height. To get original rect remove width and height, get the rect and + // // restore width and height; + // const contentElement = (fixture.nativeElement as HTMLElement) + // .parentElement.getElementsByClassName(CLASS_OVERLAY_CONTENT)[0] as HTMLElement; + // const width = contentElement.style.width; + // contentElement.style.width = ''; + // const height = contentElement.style.height; + // contentElement.style.height = ''; + // let contentRect = contentElement.getBoundingClientRect() as ClientRect; + // contentElement.style.width = width; + // contentElement.style.height = height; + // const screenRect: ClientRect = { + // left: 0, + // top: 0, + // right: window.innerWidth, + // bottom: window.innerHeight, + // width: window.innerWidth, + // height: window.innerHeight, + // }; + + // const location = + // getOverlayWrapperLocation(positionSettings, targetRect, contentRect, screenRect, true); + // // now get the wrapper rect as it is after elastic was applied + // contentRect = contentElement.getBoundingClientRect() as ClientRect; + // expect(contentRect.top.toFixed(1)) + // .withContext(`HD: ${horizontalDirection}; HSP: ${horizontalStartPoint};` + + // `VD: ${verticalDirection}; VSP: ${verticalStartPoint};` + + // `STYLE: ${contentElement.getAttribute('style')};`) + // .toEqual(location.y.toFixed(1)); + // expect(contentRect.left.toFixed(1)) + // .withContext(`HD: ${horizontalDirection}; HSP: ${horizontalStartPoint};` + + // `VD: ${verticalDirection}; VSP: ${verticalStartPoint};` + + // `STYLE: ${contentElement.getAttribute('style')};`) + // .toEqual(location.x.toFixed(1)); + // fixture.componentInstance.overlay.detachAll(); + // tick(); + // fixture.detectChanges(); + // }); + // }); + // }); + // }); + // })); + + // it(`Should reposition the component and render it correctly in the window, even when the rendering options passed + // should result in otherwise a partially hidden component.No scrollbars should appear.`, + // fakeAsync(() => { + // const fixture = TestBed.createComponent(EmptyPageComponent); + // fixture.detectChanges(); + + // const overlay = fixture.componentInstance.overlay; + // const button = fixture.componentInstance.buttonElement.nativeElement; + // button.style.position = 'relative'; + // button.style.width = '50px'; + // button.style.height = '50px'; + // const buttonLocations = [ + // { left: `0px`, top: `0px` }, // topLeft + // { left: `${window.innerWidth - button.width} px`, top: `0px` }, // topRight + // { left: `0px`, top: `${window.innerHeight - button.height} px` }, // bottomLeft + // { left: `${window.innerWidth - button.width} px`, top: `${window.innerHeight - button.height} px` } // bottomRight + // ]; + // const hAlignmentArray = Object.keys(HorizontalAlignment).filter(key => !isNaN(Number(HorizontalAlignment[key]))); + // const vAlignmentArray = Object.keys(VerticalAlignment).filter(key => !isNaN(Number(VerticalAlignment[key]))); + // for (const buttonLocation of buttonLocations) { + // for (const horizontalStartPoint of hAlignmentArray) { + // for (const verticalStartPoint of vAlignmentArray) { + // for (const horizontalDirection of hAlignmentArray) { + // for (const verticalDirection of vAlignmentArray) { + // const positionSettings: PositionSettings = {}; + // button.style.left = buttonLocation.left; + // button.style.top = buttonLocation.top; + + // positionSettings.horizontalStartPoint = HorizontalAlignment[horizontalStartPoint]; + // positionSettings.verticalStartPoint = VerticalAlignment[verticalStartPoint]; + // positionSettings.horizontalDirection = HorizontalAlignment[horizontalDirection]; + // positionSettings.verticalDirection = VerticalAlignment[verticalDirection]; + // positionSettings.minSize = { width: 80, height: 80 }; + + // const overlaySettings: OverlaySettings = { + // target: button, + // positionStrategy: new ElasticPositionStrategy(positionSettings), + // modal: false, + // closeOnOutsideClick: false + // }; + + // overlay.show(overlay.attach(SimpleDynamicComponent, overlaySettings)); + // tick(); + // fixture.detectChanges(); + + // const targetRect = (overlaySettings.target as HTMLElement).getBoundingClientRect() as ClientRect; + // // we need original rect of the wrapper element. After it was shown in overlay elastic may + // // set width and/or height. To get original rect remove width and height, get the rect and + // // restore width and height; + // const contentElement = (fixture.nativeElement as HTMLElement) + // .parentElement.getElementsByClassName(CLASS_OVERLAY_CONTENT)[0] as HTMLElement; + // const width = contentElement.style.width; + // contentElement.style.width = ''; + // const height = contentElement.style.height; + // contentElement.style.height = ''; + // let contentRect = contentElement.getBoundingClientRect(); + // contentElement.style.width = width; + // contentElement.style.height = height; + // const screenRect: ClientRect = { + // left: 0, + // top: 0, + // right: window.innerWidth, + // bottom: window.innerHeight, + // width: window.innerWidth, + // height: window.innerHeight, + // }; + + // const loc = + // getOverlayWrapperLocation(positionSettings, targetRect, contentRect, screenRect, true); + // // now get the wrapper rect as it is after elastic was applied + // contentRect = contentElement.getBoundingClientRect(); + // expect(contentRect.top.toFixed(1)) + // .withContext(`HD: ${horizontalDirection}; HSP: ${horizontalStartPoint};` + + // `VD: ${verticalDirection}; VSP: ${verticalStartPoint};` + + // `STYLE: ${contentElement.getAttribute('style')};`) + // .toEqual(loc.y.toFixed(1)); + // expect(contentRect.left.toFixed(1)) + // .withContext(`HD: ${horizontalDirection}; HSP: ${horizontalStartPoint};` + + // `VD: ${verticalDirection}; VSP: ${verticalStartPoint}` + + // `STYLE: ${contentElement.getAttribute('style')};`) + // .toEqual(loc.x.toFixed(1)); + // expect(document.body.scrollHeight > document.body.clientHeight).toBeFalsy(); // check scrollbars + // fixture.componentInstance.overlay.detachAll(); + // tick(); + // fixture.detectChanges(); + // } + // } + // } + // } + // } + // })); it('Should render margins correctly.', fakeAsync(() => { const expectedMargin = '0px'; diff --git a/projects/igniteui-angular/src/lib/services/overlay/overlay.ts b/projects/igniteui-angular/src/lib/services/overlay/overlay.ts index 17e9fc14845..7d10e39c634 100644 --- a/projects/igniteui-angular/src/lib/services/overlay/overlay.ts +++ b/projects/igniteui-angular/src/lib/services/overlay/overlay.ts @@ -1,4 +1,4 @@ -import { AnimationAnimateRefMetadata, AnimationBuilder, AnimationMetadataType, AnimationReferenceMetadata } from '@angular/animations'; +import { AnimationBuilder, AnimationReferenceMetadata } from '@angular/animations'; import { DOCUMENT } from '@angular/common'; import { ApplicationRef, @@ -364,6 +364,7 @@ export class IgxOverlayService implements OnDestroy { console.warn('igxOverlay.detach was called with wrong id: ', id); return; } + info.detached = true; this.finishAnimations(info); info.settings.scrollStrategy.detach(); this.removeOutsideClickListener(info); @@ -458,6 +459,9 @@ export class IgxOverlayService implements OnDestroy { console.error('Wrong id provided in overlay.reposition method. Id: ' + id); return; } + if (!overlayInfo.visible) { + return; + } const contentElement = overlayInfo.elementRef.nativeElement.parentElement; const contentElementRect = contentElement.getBoundingClientRect(); overlayInfo.settings.positionStrategy.position( @@ -555,6 +559,13 @@ export class IgxOverlayService implements OnDestroy { const injector = moduleRef ? moduleRef.injector : this._injector; const dynamicComponent: ComponentRef = dynamicFactory.create(injector); + if (dynamicComponent.onDestroy) { + dynamicComponent.onDestroy(() => { + if (!info.detached && this._overlayInfos.indexOf(info) !== -1) { + this.detach(info.id); + } + }) + } this._appRef.attachView(dynamicComponent.hostView); // If the element is newly created from a Component, it is wrapped in 'ng-component' tag - we do not want that. @@ -653,11 +664,11 @@ export class IgxOverlayService implements OnDestroy { private cleanUp(info: OverlayInfo) { const child: HTMLElement = info.elementRef.nativeElement; const outlet = this.getOverlayElement(info); - if (!outlet.contains(child)) { - console.warn(`Component with id: ${info.id} is already detached!`); - return; + // if same element is shown in other overlay outlet will not contain + // the element and we should not remove it form outlet + if (outlet.contains(child)) { + outlet.removeChild(child.parentNode.parentNode); } - outlet.removeChild(child.parentNode.parentNode); if (info.componentRef) { this._appRef.detachView(info.componentRef.hostView); info.componentRef.destroy(); diff --git a/projects/igniteui-angular/src/lib/services/overlay/position/base-fit-position-strategy.ts b/projects/igniteui-angular/src/lib/services/overlay/position/base-fit-position-strategy.ts index a33e3dff61a..7453894a984 100644 --- a/projects/igniteui-angular/src/lib/services/overlay/position/base-fit-position-strategy.ts +++ b/projects/igniteui-angular/src/lib/services/overlay/position/base-fit-position-strategy.ts @@ -67,8 +67,11 @@ export abstract class BaseFitPositionStrategy extends ConnectedPositioningStrate * @param direction Direction in which to show the element */ protected calculateLeft( - targetRect: ClientRect, elementRect: ClientRect, startPoint: HorizontalAlignment, direction: HorizontalAlignment, offset?: number): - number { + targetRect: Partial, + elementRect: Partial, + startPoint: HorizontalAlignment, + direction: HorizontalAlignment, + offset?: number): number { return targetRect.right + targetRect.width * startPoint + elementRect.width * direction + offset; } @@ -82,8 +85,11 @@ export abstract class BaseFitPositionStrategy extends ConnectedPositioningStrate * @param direction Direction in which to show the element */ protected calculateTop( - targetRect: ClientRect, elementRect: ClientRect, startPoint: VerticalAlignment, direction: VerticalAlignment, offset?: number): - number { + targetRect: Partial, + elementRect: Partial, + startPoint: VerticalAlignment, + direction: VerticalAlignment, + offset?: number): number { return targetRect.bottom + targetRect.height * startPoint + elementRect.height * direction + offset; } diff --git a/projects/igniteui-angular/src/lib/services/overlay/position/connected-positioning-strategy.ts b/projects/igniteui-angular/src/lib/services/overlay/position/connected-positioning-strategy.ts index 3184089b28e..3b354c3fb2f 100644 --- a/projects/igniteui-angular/src/lib/services/overlay/position/connected-positioning-strategy.ts +++ b/projects/igniteui-angular/src/lib/services/overlay/position/connected-positioning-strategy.ts @@ -49,14 +49,15 @@ export class ConnectedPositioningStrategy implements IPositionStrategy { } /** - * Obtains the ClientRect objects for the required elements - target and element to position + * Obtains the DomRect objects for the required elements - target and element to position * - * @returns target and element ClientRect objects + * @returns target and element DomRect objects */ - protected calculateElementRectangles(contentElement, target: Point | HTMLElement): { targetRect: ClientRect; elementRect: ClientRect } { + protected calculateElementRectangles(contentElement, target: Point | HTMLElement): + { targetRect: Partial; elementRect: Partial } { return { targetRect: Util.getTargetRect(target), - elementRect: contentElement.getBoundingClientRect() as ClientRect + elementRect: contentElement.getBoundingClientRect() as DOMRect }; } @@ -68,7 +69,7 @@ export class ConnectedPositioningStrategy implements IPositionStrategy { * @param targetRect Bounding rectangle of strategy target * @param elementRect Bounding rectangle of the element */ - protected setStyle(element: HTMLElement, targetRect: ClientRect, elementRect: ClientRect, connectedFit: ConnectedFit) { + protected setStyle(element: HTMLElement, targetRect: Partial, elementRect: Partial, connectedFit: ConnectedFit) { const horizontalOffset = connectedFit.horizontalOffset ? connectedFit.horizontalOffset : 0; const verticalOffset = connectedFit.verticalOffset ? connectedFit.verticalOffset : 0; const startPoint: Point = { diff --git a/projects/igniteui-angular/src/lib/services/overlay/utilities.ts b/projects/igniteui-angular/src/lib/services/overlay/utilities.ts index cad5626a0b7..720c0a34360 100644 --- a/projects/igniteui-angular/src/lib/services/overlay/utilities.ts +++ b/projects/igniteui-angular/src/lib/services/overlay/utilities.ts @@ -166,9 +166,9 @@ export interface OverlayInfo { /** @hidden */ export interface ConnectedFit { - contentElementRect?: ClientRect; - targetRect?: ClientRect; - viewPortRect?: ClientRect; + contentElementRect?: Partial; + targetRect?: Partial; + viewPortRect?: Partial; fitHorizontal?: OutOfViewPort; fitVertical?: OutOfViewPort; left?: number; @@ -187,8 +187,8 @@ export class Util { * * @param settings Overlay settings for which to calculate target rectangle */ - public static getTargetRect(target?: Point | HTMLElement): ClientRect { - let targetRect: ClientRect = { + public static getTargetRect(target?: Point | HTMLElement): Partial { + let targetRect: Partial = { bottom: 0, height: 0, left: 0, @@ -214,7 +214,7 @@ export class Util { return targetRect; } - public static getViewportRect(document: Document): ClientRect { + public static getViewportRect(document: Document): Partial { const width = document.documentElement.clientWidth; const height = document.documentElement.clientHeight; const scrollPosition = Util.getViewportScrollPosition(document); diff --git a/projects/igniteui-angular/src/lib/slider/slider.component.ts b/projects/igniteui-angular/src/lib/slider/slider.component.ts index 690068dd73d..0630df59698 100644 --- a/projects/igniteui-angular/src/lib/slider/slider.component.ts +++ b/projects/igniteui-angular/src/lib/slider/slider.component.ts @@ -1281,7 +1281,7 @@ export class IgxSliderComponent implements } const renderCallbackExecution = !this.continuous ? this.generateTickMarks( - this.platform.isIE ? 'white' : 'var(--igx-slider-track-step-color, var(--track-step-color, white))', interval) : null; + 'var(--igx-slider-track-step-color, var(--track-step-color, white))', interval) : null; this.renderer.setStyle(this.ticks.nativeElement, 'background', renderCallbackExecution); } diff --git a/projects/igniteui-angular/src/lib/splitter/splitter-bar/splitter-bar.component.html b/projects/igniteui-angular/src/lib/splitter/splitter-bar.component.html similarity index 100% rename from projects/igniteui-angular/src/lib/splitter/splitter-bar/splitter-bar.component.html rename to projects/igniteui-angular/src/lib/splitter/splitter-bar.component.html diff --git a/projects/igniteui-angular/src/lib/splitter/splitter-bar/splitter-bar.component.ts b/projects/igniteui-angular/src/lib/splitter/splitter-bar/splitter-bar.component.ts deleted file mode 100644 index b3a80ded9e1..00000000000 --- a/projects/igniteui-angular/src/lib/splitter/splitter-bar/splitter-bar.component.ts +++ /dev/null @@ -1,250 +0,0 @@ -import {Component, EventEmitter, HostBinding, HostListener, Input, Output} from '@angular/core'; -import {SplitterType} from '../splitter.component'; -import {IgxSplitterPaneComponent} from '../splitter-pane/splitter-pane.component'; -import {DragDirection, IDragMoveEventArgs, IDragStartEventArgs} from '../../directives/drag-drop/drag-drop.directive'; - - -export const SPLITTER_INTERACTION_KEYS = new Set('right down left up arrowright arrowdown arrowleft arrowup'.split(' ')); - -/** - * @hidden @internal - * Represents the draggable bar that visually separates panes and allows for changing their sizes. - */ -@Component({ - selector: 'igx-splitter-bar', - templateUrl: './splitter-bar.component.html' -}) -export class IgxSplitBarComponent { - /** - * Set css class to the host element. - */ - @HostBinding('class.igx-splitter-bar-host') - public cssClass = 'igx-splitter-bar-host'; - - /** - * Gets/Sets the orientation. - */ - @Input() - public type: SplitterType = SplitterType.Horizontal; - - /** - * Sets/gets the element order. - */ - @HostBinding('style.order') - @Input() - public order!: number; - - /** - * @hidden - * @internal - */ - @HostBinding('attr.tabindex') - public get tabindex() { - return this.resizeDisallowed ? null : 0; - } - - /** - * @hidden - * @internal - */ - @HostBinding('attr.aria-orientation') - public get orientation() { - return this.type === SplitterType.Horizontal ? 'horizontal' : 'vertical'; - } - - /** - * @hidden - * @internal - */ - public get cursor() { - if (this.resizeDisallowed) { - return ''; - } - return this.type === SplitterType.Horizontal ? 'col-resize' : 'row-resize'; - } - - /** - * Sets/gets the `SplitPaneComponent` associated with the current `SplitBarComponent`. - * - * @memberof SplitBarComponent - */ - @Input() - public pane!: IgxSplitterPaneComponent; - - /** - * Sets/Gets the `SplitPaneComponent` sibling components associated with the current `SplitBarComponent`. - */ - @Input() - public siblings!: Array; - - /** - * An event that is emitted whenever we start dragging the current `SplitBarComponent`. - */ - @Output() - public moveStart = new EventEmitter(); - - /** - * An event that is emitted while we are dragging the current `SplitBarComponent`. - */ - @Output() - public moving = new EventEmitter(); - - @Output() - public movingEnd = new EventEmitter(); - - /** - * A temporary holder for the pointer coordinates. - */ - private startPoint!: number; - - /** - * @hidden @internal - */ - public get prevButtonHidden() { - return this.siblings[0].collapsed && !this.siblings[1].collapsed; - } - - /** - * @hidden @internal - */ - @HostListener('keydown', ['$event']) - public keyEvent(event: KeyboardEvent) { - const key = event.key.toLowerCase(); - const ctrl = event.ctrlKey; - event.stopPropagation(); - if (SPLITTER_INTERACTION_KEYS.has(key)) { - event.preventDefault(); - } - switch (key) { - case 'arrowup': - case 'up': - if (this.type === SplitterType.Vertical) { - if (ctrl) { - this.onCollapsing(false); - break; - } - if (!this.resizeDisallowed) { - event.preventDefault(); - this.moveStart.emit(this.pane); - this.moving.emit(10); - } - } - break; - case 'arrowdown': - case 'down': - if (this.type === SplitterType.Vertical) { - if (ctrl) { - this.onCollapsing(true); - break; - } - if (!this.resizeDisallowed) { - event.preventDefault(); - this.moveStart.emit(this.pane); - this.moving.emit(-10); - } - } - break; - case 'arrowleft': - case 'left': - if (this.type === SplitterType.Horizontal) { - if (ctrl) { - this.onCollapsing(false); - break; - } - if (!this.resizeDisallowed) { - event.preventDefault(); - this.moveStart.emit(this.pane); - this.moving.emit(10); - } - } - break; - case 'arrowright': - case 'right': - if (this.type === SplitterType.Horizontal) { - if (ctrl) { - this.onCollapsing(true); - break; - } - if (!this.resizeDisallowed) { - event.preventDefault(); - this.moveStart.emit(this.pane); - this.moving.emit(-10); - } - } - break; - default: - break; - } - } - - /** - * @hidden @internal - */ - public get dragDir() { - return this.type === SplitterType.Horizontal ? DragDirection.VERTICAL : DragDirection.HORIZONTAL; - } - - /** - * @hidden @internal - */ - public get nextButtonHidden() { - return this.siblings[1].collapsed && !this.siblings[0].collapsed; - } - - /** - * @hidden @internal - */ - public onDragStart(event: IDragStartEventArgs) { - if (this.resizeDisallowed) { - event.cancel = true; - return; - } - this.startPoint = this.type === SplitterType.Horizontal ? event.startX : event.startY; - this.moveStart.emit(this.pane); - } - - /** - * @hidden @internal - */ - public onDragMove(event: IDragMoveEventArgs) { - const isHorizontal = this.type === SplitterType.Horizontal; - const curr = isHorizontal ? event.pageX : event.pageY; - const delta = this.startPoint - curr; - if (delta !== 0) { - this.moving.emit(delta); - event.cancel = true; - event.owner.element.nativeElement.style.transform = ''; - } - } - - public onDragEnd(event: any) { - const isHorizontal = this.type === SplitterType.Horizontal; - const curr = isHorizontal ? event.pageX : event.pageY; - const delta = this.startPoint - curr; - if (delta !== 0) { - this.movingEnd.emit(delta); - } - } - - protected get resizeDisallowed() { - const relatedTabs = this.siblings; - return !!relatedTabs.find(x => x.resizable === false || x.collapsed === true); - } - - /** - * @hidden @internal - */ - public onCollapsing(next: boolean) { - const prevSibling = this.siblings[0]; - const nextSibling = this.siblings[1]; - let target; - if (next) { - // if next is clicked when prev pane is hidden, show prev pane, else hide next pane. - target = prevSibling.collapsed ? prevSibling : nextSibling; - } else { - // if prev is clicked when next pane is hidden, show next pane, else hide prev pane. - target = nextSibling.collapsed ? nextSibling : prevSibling; - } - target.toggle(); - } -} diff --git a/projects/igniteui-angular/src/lib/splitter/splitter.component.ts b/projects/igniteui-angular/src/lib/splitter/splitter.component.ts index ad22c9f0bde..2d571c21ab9 100644 --- a/projects/igniteui-angular/src/lib/splitter/splitter.component.ts +++ b/projects/igniteui-angular/src/lib/splitter/splitter.component.ts @@ -1,7 +1,8 @@ import { Component, QueryList, Input, ContentChildren, AfterContentInit, HostBinding, Inject, ElementRef, - Output, EventEmitter } from '@angular/core'; + Output, EventEmitter, HostListener } from '@angular/core'; import { IgxSplitterPaneComponent } from './splitter-pane/splitter-pane.component'; import { DOCUMENT } from '@angular/common'; +import { DragDirection, IDragMoveEventArgs, IDragStartEventArgs } from '../directives/drag-drop/drag-drop.directive'; /** * An enumeration that defines the `SplitterComponent` panes orientation. @@ -305,3 +306,248 @@ export class IgxSplitterComponent implements AfterContentInit { }); } } + +export const SPLITTER_INTERACTION_KEYS = new Set('right down left up arrowright arrowdown arrowleft arrowup'.split(' ')); + +/** + * @hidden @internal + * Represents the draggable bar that visually separates panes and allows for changing their sizes. + */ + @Component({ + selector: 'igx-splitter-bar', + templateUrl: './splitter-bar.component.html' +}) +export class IgxSplitBarComponent { + /** + * Set css class to the host element. + */ + @HostBinding('class.igx-splitter-bar-host') + public cssClass = 'igx-splitter-bar-host'; + + /** + * Gets/Sets the orientation. + */ + @Input() + public type: SplitterType = SplitterType.Horizontal; + + /** + * Sets/gets the element order. + */ + @HostBinding('style.order') + @Input() + public order!: number; + + /** + * @hidden + * @internal + */ + @HostBinding('attr.tabindex') + public get tabindex() { + return this.resizeDisallowed ? null : 0; + } + + /** + * @hidden + * @internal + */ + @HostBinding('attr.aria-orientation') + public get orientation() { + return this.type === SplitterType.Horizontal ? 'horizontal' : 'vertical'; + } + + /** + * @hidden + * @internal + */ + public get cursor() { + if (this.resizeDisallowed) { + return ''; + } + return this.type === SplitterType.Horizontal ? 'col-resize' : 'row-resize'; + } + + /** + * Sets/gets the `SplitPaneComponent` associated with the current `SplitBarComponent`. + * + * @memberof SplitBarComponent + */ + @Input() + public pane!: IgxSplitterPaneComponent; + + /** + * Sets/Gets the `SplitPaneComponent` sibling components associated with the current `SplitBarComponent`. + */ + @Input() + public siblings!: Array; + + /** + * An event that is emitted whenever we start dragging the current `SplitBarComponent`. + */ + @Output() + public moveStart = new EventEmitter(); + + /** + * An event that is emitted while we are dragging the current `SplitBarComponent`. + */ + @Output() + public moving = new EventEmitter(); + + @Output() + public movingEnd = new EventEmitter(); + + /** + * A temporary holder for the pointer coordinates. + */ + private startPoint!: number; + + /** + * @hidden @internal + */ + public get prevButtonHidden() { + return this.siblings[0].collapsed && !this.siblings[1].collapsed; + } + + /** + * @hidden @internal + */ + @HostListener('keydown', ['$event']) + public keyEvent(event: KeyboardEvent) { + const key = event.key.toLowerCase(); + const ctrl = event.ctrlKey; + event.stopPropagation(); + if (SPLITTER_INTERACTION_KEYS.has(key)) { + event.preventDefault(); + } + switch (key) { + case 'arrowup': + case 'up': + if (this.type === SplitterType.Vertical) { + if (ctrl) { + this.onCollapsing(false); + break; + } + if (!this.resizeDisallowed) { + event.preventDefault(); + this.moveStart.emit(this.pane); + this.moving.emit(10); + } + } + break; + case 'arrowdown': + case 'down': + if (this.type === SplitterType.Vertical) { + if (ctrl) { + this.onCollapsing(true); + break; + } + if (!this.resizeDisallowed) { + event.preventDefault(); + this.moveStart.emit(this.pane); + this.moving.emit(-10); + } + } + break; + case 'arrowleft': + case 'left': + if (this.type === SplitterType.Horizontal) { + if (ctrl) { + this.onCollapsing(false); + break; + } + if (!this.resizeDisallowed) { + event.preventDefault(); + this.moveStart.emit(this.pane); + this.moving.emit(10); + } + } + break; + case 'arrowright': + case 'right': + if (this.type === SplitterType.Horizontal) { + if (ctrl) { + this.onCollapsing(true); + break; + } + if (!this.resizeDisallowed) { + event.preventDefault(); + this.moveStart.emit(this.pane); + this.moving.emit(-10); + } + } + break; + default: + break; + } + } + + /** + * @hidden @internal + */ + public get dragDir() { + return this.type === SplitterType.Horizontal ? DragDirection.VERTICAL : DragDirection.HORIZONTAL; + } + + /** + * @hidden @internal + */ + public get nextButtonHidden() { + return this.siblings[1].collapsed && !this.siblings[0].collapsed; + } + + /** + * @hidden @internal + */ + public onDragStart(event: IDragStartEventArgs) { + if (this.resizeDisallowed) { + event.cancel = true; + return; + } + this.startPoint = this.type === SplitterType.Horizontal ? event.startX : event.startY; + this.moveStart.emit(this.pane); + } + + /** + * @hidden @internal + */ + public onDragMove(event: IDragMoveEventArgs) { + const isHorizontal = this.type === SplitterType.Horizontal; + const curr = isHorizontal ? event.pageX : event.pageY; + const delta = this.startPoint - curr; + if (delta !== 0) { + this.moving.emit(delta); + event.cancel = true; + event.owner.element.nativeElement.style.transform = ''; + } + } + + public onDragEnd(event: any) { + const isHorizontal = this.type === SplitterType.Horizontal; + const curr = isHorizontal ? event.pageX : event.pageY; + const delta = this.startPoint - curr; + if (delta !== 0) { + this.movingEnd.emit(delta); + } + } + + protected get resizeDisallowed() { + const relatedTabs = this.siblings; + return !!relatedTabs.find(x => x.resizable === false || x.collapsed === true); + } + + /** + * @hidden @internal + */ + public onCollapsing(next: boolean) { + const prevSibling = this.siblings[0]; + const nextSibling = this.siblings[1]; + let target; + if (next) { + // if next is clicked when prev pane is hidden, show prev pane, else hide next pane. + target = prevSibling.collapsed ? prevSibling : nextSibling; + } else { + // if prev is clicked when next pane is hidden, show next pane, else hide prev pane. + target = nextSibling.collapsed ? nextSibling : prevSibling; + } + target.toggle(); + } +} diff --git a/projects/igniteui-angular/src/lib/splitter/splitter.module.ts b/projects/igniteui-angular/src/lib/splitter/splitter.module.ts index 9409b5ecd06..cb67c6bbc18 100644 --- a/projects/igniteui-angular/src/lib/splitter/splitter.module.ts +++ b/projects/igniteui-angular/src/lib/splitter/splitter.module.ts @@ -1,8 +1,7 @@ import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; -import { IgxSplitBarComponent } from './splitter-bar/splitter-bar.component'; import { IgxSplitterPaneComponent } from './splitter-pane/splitter-pane.component'; -import { IgxSplitterComponent } from './splitter.component'; +import { IgxSplitterComponent, IgxSplitBarComponent } from './splitter.component'; import { IgxIconModule } from '../icon/public_api'; import { IgxDragDropModule } from '../directives/drag-drop/drag-drop.directive'; diff --git a/projects/igniteui-angular/src/lib/stepper/public_api.ts b/projects/igniteui-angular/src/lib/stepper/public_api.ts index ca991bac1e5..a7792408539 100644 --- a/projects/igniteui-angular/src/lib/stepper/public_api.ts +++ b/projects/igniteui-angular/src/lib/stepper/public_api.ts @@ -1,3 +1,4 @@ export * from './stepper.component'; export * from './step/step.component'; export * from './stepper.common'; +export * from './stepper.directive'; diff --git a/projects/igniteui-angular/src/lib/stepper/stepper.directive.ts b/projects/igniteui-angular/src/lib/stepper/stepper.directive.ts index b623013c82d..50f1f34ad67 100644 --- a/projects/igniteui-angular/src/lib/stepper/stepper.directive.ts +++ b/projects/igniteui-angular/src/lib/stepper/stepper.directive.ts @@ -1,6 +1,5 @@ import { Directive, ElementRef, HostBinding, Inject, Input } from '@angular/core'; -import { IGX_STEP_COMPONENT } from './stepper.common'; -import { IgxStepComponent } from './step/step.component'; +import { IgxStep, IGX_STEP_COMPONENT } from './stepper.common'; import { IgxStepperService } from './stepper.service'; @Directive({ @@ -43,7 +42,7 @@ export class IgxStepSubTitleDirective { selector: '[igxStepContent]' }) export class IgxStepContentDirective { - private get target(): IgxStepComponent { + private get target(): IgxStep { return this.step; } @@ -78,8 +77,9 @@ export class IgxStepContentDirective { private _tabIndex = null; - constructor(@Inject(IGX_STEP_COMPONENT) private step: IgxStepComponent, + constructor( + @Inject(IGX_STEP_COMPONENT) private step: IgxStep, private stepperService: IgxStepperService, - public elementRef: ElementRef) { - } + public elementRef: ElementRef + ) { } } diff --git a/projects/igniteui-angular/src/lib/tabs/tabs.directive.ts b/projects/igniteui-angular/src/lib/tabs/tabs.directive.ts index 9d53d2c8944..fb58ad936c0 100644 --- a/projects/igniteui-angular/src/lib/tabs/tabs.directive.ts +++ b/projects/igniteui-angular/src/lib/tabs/tabs.directive.ts @@ -1,7 +1,6 @@ import { AnimationBuilder } from '@angular/animations'; import { AfterViewInit, ContentChildren, Directive, EventEmitter, - HostBinding, Input, OnDestroy, Output, QueryList } from '@angular/core'; import { Subscription } from 'rxjs'; diff --git a/projects/igniteui-angular/src/lib/test-utils/grid-functions.spec.ts b/projects/igniteui-angular/src/lib/test-utils/grid-functions.spec.ts index 5681573e413..bf32e4136ba 100644 --- a/projects/igniteui-angular/src/lib/test-utils/grid-functions.spec.ts +++ b/projects/igniteui-angular/src/lib/test-utils/grid-functions.spec.ts @@ -1,5 +1,5 @@ -import { DebugElement } from '@angular/core'; +import { DebugElement, QueryList } from '@angular/core'; import { By } from '@angular/platform-browser'; import { ComponentFixture, tick } from '@angular/core/testing'; import { IgxInputDirective } from '../input-group/public_api'; @@ -8,7 +8,6 @@ import { IgxChipComponent } from '../chips/public_api'; import { IgxGridComponent } from '../grids/grid/grid.component'; import { IgxColumnGroupComponent } from '../grids/columns/column-group.component'; import { IgxGridHeaderGroupComponent } from '../grids/headers/grid-header-group.component'; -import { SortingDirection } from '../data-operations/sorting-expression.interface'; import { UIInteractions, wait } from './ui-interactions.spec'; import { CellType, @@ -23,6 +22,10 @@ import { parseDate } from '../core/utils'; import { IgxGridHeaderRowComponent } from '../grids/headers/grid-header-row.component'; import { IgxGridRowComponent } from '../grids/grid/grid-row.component'; import { IgxGridCellComponent } from '../grids/cell.component'; +import { SortingDirection } from '../data-operations/sorting-strategy'; +import { IgxRowDirective } from '../grids/row.directive'; +import { GridType, RowType } from '../grids/common/grid.interface'; + const SUMMARY_LABEL_CLASS = '.igx-grid-summary__label'; const SUMMARY_ROW = 'igx-grid-summary-row'; @@ -176,7 +179,7 @@ export class GridFunctions { /** * Focus the cell in the grid */ - public static focusCell(fix: ComponentFixture, cell: IgxGridCellComponent) { + public static focusCell(fix: ComponentFixture, cell: IgxGridCellComponent | CellType) { this.getGridContent(fix).triggerEventHandler('focus', null); fix.detectChanges(); cell.activate(null); @@ -230,15 +233,15 @@ export class GridFunctions { resolve(); }); - public static toggleMasterRow(fix: ComponentFixture, row: IgxGridRowComponent) { - const rowDE = fix.debugElement.queryAll(By.directive(IgxGridRowComponent)).find(el => el.componentInstance === row); + public static toggleMasterRow(fix: ComponentFixture, row: IgxRowDirective) { + const rowDE = fix.debugElement.queryAll(By.directive(IgxRowDirective)).find(el => el.componentInstance === row); const expandCellDE = rowDE.query(By.directive(IgxGridExpandableCellComponent)); expandCellDE.componentInstance.toggle(new MouseEvent('click')); fix.detectChanges(); } - public static getMasterRowDetailDebug(fix: ComponentFixture, row: IgxGridRowComponent) { - const rowDE = fix.debugElement.queryAll(By.directive(IgxGridRowComponent)).find(el => el.componentInstance === row); + public static getMasterRowDetailDebug(fix: ComponentFixture, row: IgxRowDirective) { + const rowDE = fix.debugElement.queryAll(By.directive(IgxRowDirective)).find(el => el.componentInstance === row); const detailDE = rowDE.parent.children .find(el => el.attributes['detail'] === 'true' && el.attributes['data-rowindex'] === row.index + 1 + ''); return detailDE; @@ -248,7 +251,7 @@ export class GridFunctions { return fix.debugElement.queryAll(By.css('div[detail="true"]')).sort((a, b) => a.context.index - b.context.index); } - public static getRowExpandIconName(row: IgxGridRowComponent) { + public static getRowExpandIconName(row: IgxRowDirective) { return row.element.nativeElement.querySelector('igx-icon').textContent; } @@ -933,7 +936,7 @@ export class GridFunctions { const headerGroups = fix.debugElement.queryAll(By.directive(IgxGridHeaderGroupComponent)); const headerGroup = headerGroups.find((hg) => { const col: IgxColumnComponent = hg.componentInstance.column; - return col.field === columnField && (forGrid ? forGrid === col.grid : true); + return col.field === columnField && (forGrid ? forGrid.gridAPI.grid === col.grid : true); }); const filterCell = headerGroup.query(By.css(FILTER_UI_CELL)); const chip = filterCell.query(By.css('igx-chip')); @@ -1895,7 +1898,7 @@ export class GridFunctions { return fix.nativeElement.querySelectorAll(DRAG_INDICATOR_CLASS); } - public static isCellPinned(cell: IgxGridCellComponent): boolean { + public static isCellPinned(cell: CellType): boolean { return cell.nativeElement.classList.contains(CELL_PINNED_CLASS); } @@ -1964,27 +1967,37 @@ export class GridFunctions { return null; } - public static verifyLayoutHeadersAreAligned(headerGroups: IgxGridHeaderGroupComponent[], rowCells: IgxGridCellComponent[]) { - for (let i = 0; i < headerGroups.length; i++) { - const widthDiff = headerGroups[i].header.nativeElement.clientWidth - rowCells[i].nativeElement.clientWidth; - const heightDiff = headerGroups[i].header.nativeElement.clientHeight - rowCells[i].nativeElement.clientHeight; + public static verifyLayoutHeadersAreAligned(grid: GridType, row: RowType, verifyPinnedCells?: boolean) { + let firstRowCells = (row.cells as QueryList).toArray(); + const headerCells = grid.headerCellList; + + if (verifyPinnedCells) { + firstRowCells = firstRowCells + .filter(c => c.nativeElement.className.indexOf('igx-grid__td--pinned') !== -1); + } + + for (let i = 0; i < firstRowCells.length; i++) { + const dataCell = firstRowCells[i]; + const headerCell = headerCells.find(h => h.column.index === dataCell.column.index); + const widthDiff = headerCell?.nativeElement.clientWidth - dataCell?.nativeElement.clientWidth; + const heightDiff = headerCell?.nativeElement.clientHeight - dataCell?.nativeElement.clientHeight; expect(widthDiff).toBeLessThanOrEqual(1); expect(heightDiff).toBeLessThanOrEqual(3); } } - public static verifyDOMMatchesLayoutSettings(row, colSettings) { - const firstRowCells = row.cells.toArray(); + public static verifyDOMMatchesLayoutSettings(grid: GridType, row: RowType, colSettings) { + const firstRowCells = (row.cells as QueryList).toArray(); const rowElem = row.nativeElement; const mrlBlocks = rowElem.querySelectorAll('.igx-grid__mrl-block'); colSettings.forEach((groupSetting, index) => { // check group has rendered block - const groupBlock = mrlBlocks[index]; + const groupBlock = mrlBlocks[index] as any; const cellsFromBlock = firstRowCells.filter((cell) => cell.nativeElement.parentNode === groupBlock); expect(groupBlock).not.toBeNull(); groupSetting.columns.forEach((col, colIndex) => { - const cell = cellsFromBlock[colIndex]; + const cell = cellsFromBlock[colIndex] as any; const cellElem = cell.nativeElement; // check correct attributes are applied expect(parseInt(cellElem.style['gridRowStart'], 10)).toBe(parseInt(col.rowStart, 10)); @@ -2216,7 +2229,7 @@ export class GridSelectionFunctions { expect(range[rangeIndex].rowEnd).toBe(rowEnd); } - public static verifyCellSelected(cell: IgxGridCellComponent, selected = true) { + public static verifyCellSelected(cell: IgxGridCellComponent | CellType, selected = true) { expect(cell.selected).toBe(selected); expect(cell.nativeElement.classList.contains(CELL_SELECTED_CSS_CLASS)).toBe(selected); } diff --git a/projects/igniteui-angular/src/lib/test-utils/grid-samples.spec.ts b/projects/igniteui-angular/src/lib/test-utils/grid-samples.spec.ts index aa70b807f07..dbe2cad3fd5 100644 --- a/projects/igniteui-angular/src/lib/test-utils/grid-samples.spec.ts +++ b/projects/igniteui-angular/src/lib/test-utils/grid-samples.spec.ts @@ -10,16 +10,15 @@ import { SampleTestData, DataParent } from './sample-test-data.spec'; import { ColumnDefinitions, GridTemplateStrings, EventSubscriptions, TemplateDefinitions } from './template-strings.spec'; import { IgxColumnComponent } from '../grids/columns/column.component'; import { IgxFilteringOperand, IgxNumberFilteringOperand } from '../data-operations/filtering-condition'; -import { ExpressionUI } from '../grids/filtering/grid-filtering.service'; import { IFilteringExpressionsTree, FilteringExpressionsTree } from '../data-operations/filtering-expressions-tree'; import { FilteringStrategy } from '../data-operations/filtering-strategy'; import { CellType, IgxGridComponent } from '../grids/grid/public_api'; import { IgxRowEditTabStopDirective } from '../grids/grid.rowEdit.directive'; import { IgxGridExcelStyleFilteringComponent } from '../grids/filtering/excel-style/grid.excel-style-filtering.component'; import { FilteringLogic } from '../data-operations/filtering-expression.interface'; -import { SortingDirection } from '../data-operations/sorting-expression.interface'; -import { ISortingStrategy } from '../data-operations/sorting-strategy'; +import { ISortingStrategy, SortingDirection } from '../data-operations/sorting-strategy'; import { IgxActionStripComponent } from '../action-strip/action-strip.component'; +import { ExpressionUI } from '../grids/filtering/excel-style/common'; @Component({ template: `
diff --git a/projects/igniteui-angular/src/lib/test-utils/hierarchical-grid-functions.spec.ts b/projects/igniteui-angular/src/lib/test-utils/hierarchical-grid-functions.spec.ts index 3eb3e19eb0b..ae060b81302 100644 --- a/projects/igniteui-angular/src/lib/test-utils/hierarchical-grid-functions.spec.ts +++ b/projects/igniteui-angular/src/lib/test-utils/hierarchical-grid-functions.spec.ts @@ -43,7 +43,7 @@ export class HierarchicalGridFunctions { * * @param row the row instance to check for expander */ - public static hasExpander(row: IgxRowDirective): boolean { + public static hasExpander(row: IgxRowDirective): boolean { return row.nativeElement.children[0].classList.contains(EXPANDER_CLASS); } diff --git a/projects/igniteui-angular/src/lib/test-utils/tree-grid-components.spec.ts b/projects/igniteui-angular/src/lib/test-utils/tree-grid-components.spec.ts index 92e12160ec7..7c470a6f443 100644 --- a/projects/igniteui-angular/src/lib/test-utils/tree-grid-components.spec.ts +++ b/projects/igniteui-angular/src/lib/test-utils/tree-grid-components.spec.ts @@ -930,7 +930,7 @@ export class IgxTreeGridCascadingSelectionTransactionComponent { [childDataKey]="childDataKey" expansionDepth="0" width="900px" height="1000px"> diff --git a/projects/igniteui-angular/src/lib/test-utils/tree-grid-functions.spec.ts b/projects/igniteui-angular/src/lib/test-utils/tree-grid-functions.spec.ts index 09d32fb315d..430b80e544c 100644 --- a/projects/igniteui-angular/src/lib/test-utils/tree-grid-functions.spec.ts +++ b/projects/igniteui-angular/src/lib/test-utils/tree-grid-functions.spec.ts @@ -1,6 +1,6 @@ import { By } from '@angular/platform-browser'; -import { IgxTreeGridComponent, IgxGridBaseDirective } from '../grids/tree-grid/public_api'; -import { IGridDataBindable } from '../grids/common/grid.interface'; +import { IgxTreeGridComponent } from '../grids/tree-grid/public_api'; +import { CellType } from '../grids/common/grid.interface'; import { IgxCheckboxComponent } from '../checkbox/checkbox.component'; import { UIInteractions, wait } from './ui-interactions.spec'; import { GridFunctions } from './grid-functions.spec'; @@ -279,14 +279,14 @@ export class TreeGridFunctions { /** * Returns true if a tree-grid row is 'grayed out' because of filtering */ - public static checkRowIsGrayedOut(row: IgxRowDirective): boolean { + public static checkRowIsGrayedOut(row: IgxRowDirective): boolean { return row.nativeElement.classList.contains('igx-grid__tr--filtered'); } /** * Returns true if a tree-grid row is NOT 'grayed out' because of filtering */ - public static checkRowIsNotGrayedOut(row: IgxRowDirective): boolean { + public static checkRowIsNotGrayedOut(row: IgxRowDirective): boolean { return !row.nativeElement.classList.contains('igx-grid__tr--filtered'); } @@ -400,7 +400,8 @@ export class TreeGridFunctions { return cellDOM.nativeElement.classList.contains(TREE_CELL_SELECTION_CSS_CLASS); } - public static verifyTreeGridCellSelected(treeGrid: IgxTreeGridComponent, cell: IgxGridCellComponent, selected: boolean = true) { + public static verifyTreeGridCellSelected(treeGrid: IgxTreeGridComponent, + cell: IgxGridCellComponent | CellType, selected: boolean = true) { expect(cell).toBeDefined(); if (cell) { expect(TreeGridFunctions.verifyGridCellHasSelectedClass(cell)).toBe(selected); @@ -463,7 +464,7 @@ export class TreeGridFunctions { public static moveGridCellWithTab = - (fix, cell: IgxGridCellComponent) => new Promise(async resolve => { + (fix, cell: IgxGridCellComponent | CellType) => new Promise(async resolve => { UIInteractions.triggerKeyDownEvtUponElem('Tab', cell.nativeElement, true); await wait(DEBOUNCETIME); fix.detectChanges(); diff --git a/projects/igniteui-angular/src/lib/test-utils/ui-interactions.spec.ts b/projects/igniteui-angular/src/lib/test-utils/ui-interactions.spec.ts index 6525d1f84ee..8828daa2a83 100644 --- a/projects/igniteui-angular/src/lib/test-utils/ui-interactions.spec.ts +++ b/projects/igniteui-angular/src/lib/test-utils/ui-interactions.spec.ts @@ -53,10 +53,11 @@ export class UIInteractions { /** * Double click an element - native or debug, by dispatching pointerdown, pointerup and dblclick events. + * // TODO - typing of element - whe npassing cell/row, should be CellType/RowTpe * * @param element - Native or debug element. */ - public static simulateDoubleClickAndSelectEvent(element) { + public static simulateDoubleClickAndSelectEvent(element: any) { const nativeElement = element.nativeElement ?? element; UIInteractions.simulatePointerOverElementEvent('pointerdown', nativeElement); UIInteractions.simulatePointerOverElementEvent('pointerup', nativeElement); diff --git a/projects/igniteui-angular/src/lib/time-picker/time-picker.component.spec.ts b/projects/igniteui-angular/src/lib/time-picker/time-picker.component.spec.ts index 6e1544fd387..cb6e8134eb0 100644 --- a/projects/igniteui-angular/src/lib/time-picker/time-picker.component.spec.ts +++ b/projects/igniteui-angular/src/lib/time-picker/time-picker.component.spec.ts @@ -11,7 +11,6 @@ import { import { configureTestSuite } from '../test-utils/configure-suite'; import { PickerInteractionMode } from '../date-common/types'; import { IgxIconModule } from '../icon/public_api'; -import { IgxToggleDirective } from '../directives/toggle/toggle.directive'; import { PlatformUtil } from '../core/utils'; import { DatePart, IgxDateTimeEditorDirective } from '../directives/date-time-editor/public_api'; import { DateTimeUtil } from '../date-common/util/date-time.util'; @@ -466,7 +465,6 @@ describe('IgxTimePicker', () => { let minutesColumn: DebugElement; let secondsColumn: DebugElement; let ampmColumn: DebugElement; - let toggleDirectiveElement: DebugElement; describe('Dropdown/dialog mode', () => { let fixture: ComponentFixture; @@ -495,7 +493,6 @@ describe('IgxTimePicker', () => { minutesColumn = fixture.debugElement.query(By.css(`.${CSS_CLASS_MINUTELIST}`)); secondsColumn = fixture.debugElement.query(By.css(CSS_CLASS_SECONDSLIST)); ampmColumn = fixture.debugElement.query(By.css(`.${CSS_CLASS_AMPMLIST}`)); - toggleDirectiveElement = fixture.debugElement.query(By.directive(IgxToggleDirective)); })); it('should open/close the dropdown and keep the current selection on toggle icon click', fakeAsync(() => { const toggleIcon = fixture.debugElement.query(By.css('igx-prefix')); @@ -1099,7 +1096,6 @@ describe('IgxTimePicker', () => { hourColumn = fixture.debugElement.query(By.css(`.${CSS_CLASS_HOURLIST}`)); minutesColumn = fixture.debugElement.query(By.css(`.${CSS_CLASS_MINUTELIST}`)); ampmColumn = fixture.debugElement.query(By.css(`.${CSS_CLASS_AMPMLIST}`)); - toggleDirectiveElement = fixture.debugElement.query(By.directive(IgxToggleDirective)); })); it('Should render default toggle and clear icons', () => { diff --git a/projects/igniteui-angular/src/lib/tree/tree-node/tree-node.component.ts b/projects/igniteui-angular/src/lib/tree/tree-node/tree-node.component.ts index 2705f004856..6d69107c4f7 100644 --- a/projects/igniteui-angular/src/lib/tree/tree-node/tree-node.component.ts +++ b/projects/igniteui-angular/src/lib/tree/tree-node/tree-node.component.ts @@ -1,7 +1,7 @@ import { AnimationBuilder } from '@angular/animations'; import { Component, OnInit, - OnDestroy, Input, Inject, ViewChild, TemplateRef, AfterViewInit, QueryList, ContentChildren, Optional, SkipSelf, + OnDestroy, Input, Inject, ViewChild, TemplateRef, QueryList, ContentChildren, Optional, SkipSelf, HostBinding, ElementRef, ChangeDetectorRef, @@ -135,7 +135,7 @@ export class IgxTreeNodeLinkDirective implements OnDestroy { { provide: IGX_TREE_NODE_COMPONENT, useExisting: IgxTreeNodeComponent } ] }) -export class IgxTreeNodeComponent extends ToggleAnimationPlayer implements IgxTreeNode, OnInit, AfterViewInit, OnDestroy { +export class IgxTreeNodeComponent extends ToggleAnimationPlayer implements IgxTreeNode, OnInit, OnDestroy { /** * The data entry that the node is visualizing. * @@ -521,9 +521,6 @@ export class IgxTreeNodeComponent extends ToggleAnimationPlayer implements Ig }); } - /** @hidden @internal */ - public ngAfterViewInit() { } - /** * @hidden @internal * Sets the focus to the node's child, if present diff --git a/projects/igniteui-angular/src/public_api.ts b/projects/igniteui-angular/src/public_api.ts index 9509d4c3eb5..c670e65b230 100644 --- a/projects/igniteui-angular/src/public_api.ts +++ b/projects/igniteui-angular/src/public_api.ts @@ -28,6 +28,7 @@ export * from './lib/directives/radio/radio-group.directive'; export * from './lib/directives/ripple/ripple.directive'; export * from './lib/directives/text-highlight/text-highlight.directive'; export * from './lib/directives/text-selection/text-selection.directive'; +export * from './lib/directives/template-outlet/template_outlet.directive'; export * from './lib/directives/toggle/toggle.directive'; export * from './lib/directives/tooltip/tooltip.directive'; export * from './lib/directives/date-time-editor/public_api'; @@ -44,8 +45,6 @@ export * from './lib/data-operations/groupby-expand-state.interface'; export * from './lib/data-operations/groupby-record.interface'; export * from './lib/data-operations/groupby-state.interface'; export * from './lib/data-operations/grouping-expression.interface'; -export * from './lib/data-operations/grouping-strategy'; -export * from './lib/data-operations/sorting-expression.interface'; export * from './lib/data-operations/sorting-strategy'; export * from './lib/data-operations/paging-state.interface'; export * from './lib/data-operations/data-util'; @@ -57,7 +56,7 @@ export * from './lib/action-strip/public_api'; export * from './lib/accordion/public_api'; export * from './lib/avatar/avatar.component'; export * from './lib/badge/badge.component'; -export * from './lib/banner/banner.component'; +export * from './lib/banner/public_api'; export * from './lib/buttonGroup/buttonGroup.component'; export * from './lib/calendar/public_api'; export * from './lib/card/card.component'; @@ -88,6 +87,7 @@ export * from './lib/navbar/navbar.component'; export * from './lib/navigation-drawer/public_api'; export * from './lib/paginator/public_api'; export * from './lib/paginator/paginator-interfaces'; +export * from './lib/progressbar/progressbar.common'; export * from './lib/progressbar/progressbar.component'; export * from './lib/radio/radio.component'; export * from './lib/slider/public_api'; @@ -96,6 +96,7 @@ export * from './lib/switch/switch.component'; export * from './lib/tabs/public_api'; export * from './lib/tabs/bottom-nav/public_api'; export * from './lib/tabs/tabs/public_api'; +export * from './lib/time-picker/time-picker.directives'; export * from './lib/time-picker/time-picker.component'; export * from './lib/toast/toast.component'; export * from './lib/select/public_api'; diff --git a/projects/igniteui-angular/src/test.ts b/projects/igniteui-angular/src/test.ts index e1b9120e956..e48e34cf22a 100644 --- a/projects/igniteui-angular/src/test.ts +++ b/projects/igniteui-angular/src/test.ts @@ -1,6 +1,6 @@ // This file is required by karma.conf.js and loads recursively all the .spec and framework files -import 'core-js/es7/reflect'; +import 'core-js/es/reflect'; import 'zone.js'; import 'zone.js/testing'; import { getTestBed } from '@angular/core/testing'; @@ -22,10 +22,10 @@ registerLocaleData(localeDe); registerLocaleData(localeJa); // First, initialize the Angular testing environment. -getTestBed().initTestEnvironment( - BrowserDynamicTestingModule, - platformBrowserDynamicTesting() -); +// First, initialize the Angular testing environment. +getTestBed().initTestEnvironment(BrowserDynamicTestingModule, platformBrowserDynamicTesting(), { + teardown: { destroyAfterEach: false } +}); // Then we find all the tests. const context = require.context('./', true, /\.spec\.ts$/); // And load the modules. diff --git a/projects/igniteui-angular/tsconfig.ivy.false.spec.json b/projects/igniteui-angular/tsconfig.ivy.false.spec.json deleted file mode 100644 index a81f83bc413..00000000000 --- a/projects/igniteui-angular/tsconfig.ivy.false.spec.json +++ /dev/null @@ -1,6 +0,0 @@ -{ - "extends": "./tsconfig.spec.json", - "angularCompilerOptions": { - "enableIvy": false - } -} diff --git a/projects/igniteui-angular/tsconfig.lib.prod.json b/projects/igniteui-angular/tsconfig.lib.prod.json index 04c0e66277e..2a2faa884cf 100644 --- a/projects/igniteui-angular/tsconfig.lib.prod.json +++ b/projects/igniteui-angular/tsconfig.lib.prod.json @@ -4,6 +4,6 @@ "declarationMap": false }, "angularCompilerOptions": { - "enableIvy": false + "compilationMode": "partial" } } diff --git a/src/app/calendar/calendar.sample.ts b/src/app/calendar/calendar.sample.ts index 2ea14e6f5e0..1bc01b39a9e 100644 --- a/src/app/calendar/calendar.sample.ts +++ b/src/app/calendar/calendar.sample.ts @@ -1,4 +1,4 @@ -import { AfterViewInit, Component, OnInit, ViewChild } from '@angular/core'; +import { Component, OnInit, ViewChild } from '@angular/core'; import { IgxCalendarComponent, IgxDialogComponent, DateRangeType, IViewDateChangeEventArgs } from 'igniteui-angular'; @Component({ @@ -6,7 +6,7 @@ import { IgxCalendarComponent, IgxDialogComponent, DateRangeType, IViewDateChang templateUrl: 'calendar.sample.html', styleUrls: ['calendar.sample.scss'] }) -export class CalendarSampleComponent implements OnInit, AfterViewInit { +export class CalendarSampleComponent implements OnInit { @ViewChild('calendar', { static: true }) private calendar: IgxCalendarComponent; @ViewChild('calendar1', { static: true }) @@ -30,9 +30,6 @@ export class CalendarSampleComponent implements OnInit, AfterViewInit { new Date(this.today.getFullYear(), this.today.getMonth(), 27)]); } - public ngAfterViewInit() { - } - public selectPTOdays(dates: Date | Date[]) { this.range = dates as Date []; console.log(this.range); diff --git a/src/app/grid-cell-api/grid-cell-api.sample.ts b/src/app/grid-cell-api/grid-cell-api.sample.ts index 8120a1c190a..c1c0401795c 100644 --- a/src/app/grid-cell-api/grid-cell-api.sample.ts +++ b/src/app/grid-cell-api/grid-cell-api.sample.ts @@ -3,7 +3,7 @@ import { IgxGridComponent, IgxTreeGridComponent, IgxHierarchicalGridComponent, - CellType, + CellType } from 'igniteui-angular'; import { HIERARCHICAL_SAMPLE_DATA } from '../shared/sample-data'; diff --git a/src/app/grid-column-groups/grid-column-groups.sample.ts b/src/app/grid-column-groups/grid-column-groups.sample.ts index 351b4995dc2..89bc0d37071 100644 --- a/src/app/grid-column-groups/grid-column-groups.sample.ts +++ b/src/app/grid-column-groups/grid-column-groups.sample.ts @@ -1,4 +1,4 @@ -import { Component, ViewChild, AfterViewInit } from '@angular/core'; +import { Component, ViewChild } from '@angular/core'; import { IgxGridComponent, IgxColumnGroupComponent, GridSelectionMode, ColumnPinningPosition } from 'igniteui-angular'; @Component({ @@ -6,7 +6,7 @@ import { IgxGridComponent, IgxColumnGroupComponent, GridSelectionMode, ColumnPin styleUrls: ['grid-column-groups.sample.css'], templateUrl: 'grid-column-groups.sample.html' }) -export class GridColumnGroupsSampleComponent implements AfterViewInit { +export class GridColumnGroupsSampleComponent { @ViewChild('grid', { read: IgxGridComponent, static: true }) public grid: IgxGridComponent; public collapse = true; @@ -82,10 +82,6 @@ export class GridColumnGroupsSampleComponent implements AfterViewInit { !(this.grid.columnList.filter(c => c.header === 'General Information')[0] as any).collapsible; } - public ngAfterViewInit() { - // this.grid.groupBy({ fieldName: 'Country', dir: 1, ignoreCase: false }); - } - public toggleColumnGroup(columnGroup: IgxColumnGroupComponent) { const columns = columnGroup.children.toArray(); diff --git a/src/app/grid-formatting/grid-formatting.component.html b/src/app/grid-formatting/grid-formatting.component.html index 210cff4c8a2..f662e5b336a 100644 --- a/src/app/grid-formatting/grid-formatting.component.html +++ b/src/app/grid-formatting/grid-formatting.component.html @@ -22,9 +22,6 @@

Grid with local data

--> - - {{ getVal(cell) }} - diff --git a/src/app/grid-multi-row-layout-config/grid-mrl-config.sample.ts b/src/app/grid-multi-row-layout-config/grid-mrl-config.sample.ts index 04299e8162a..530a1dd3a5e 100644 --- a/src/app/grid-multi-row-layout-config/grid-mrl-config.sample.ts +++ b/src/app/grid-multi-row-layout-config/grid-mrl-config.sample.ts @@ -1,5 +1,6 @@ -import { Component, ViewChild, AfterViewInit, ElementRef, ChangeDetectorRef, ViewChildren, QueryList } from '@angular/core'; +import { Component, ViewChild, ElementRef, ChangeDetectorRef, ViewChildren, QueryList } from '@angular/core'; import { IgxGridComponent, IDropBaseEventArgs, IgxDialogComponent, IDropDroppedEventArgs, GridSelectionMode} from 'igniteui-angular'; +import { SAMPLE_DATA } from '../shared/sample-data'; interface ColumnConfig { key: string; @@ -17,7 +18,7 @@ interface ColumnConfig { templateUrl: 'grid-mrl-config.sample.html', styleUrls: ['grid-mrl-config.sample.css'] }) -export class GridMRLConfigSampleComponent implements AfterViewInit { +export class GridMRLConfigSampleComponent { @ViewChild('jsonDialog', { read: IgxDialogComponent, static: true }) public jsonDialog: IgxDialogComponent; @@ -72,48 +73,13 @@ export class GridMRLConfigSampleComponent implements AfterViewInit { ]; public columnsConfiguration; - public data = [ - /* eslint-disable max-len */ - { ID: 'ALFKI', CompanyName: 'Alfreds Futterkiste', ContactName: 'Maria Anders', ContactTitle: 'Sales Representative', Address: 'Obere Str. 57', City: 'Berlin', Region: null, PostalCode: '12209', Country: 'Germany', Phone: '030-0074321', Fax: '030-0076545' }, - { ID: 'ANATR', CompanyName: 'Ana Trujillo Emparedados y helados', ContactName: 'Ana Trujillo', ContactTitle: 'Owner', Address: 'Avda. de la Constitución 2222', City: 'México D.F.', Region: null, PostalCode: '05021', Country: 'Mexico', Phone: '(5) 555-4729', Fax: '(5) 555-3745' }, - { ID: 'ANTON', CompanyName: 'Antonio Moreno Taquería', ContactName: 'Antonio Moreno', ContactTitle: 'Owner', Address: 'Mataderos 2312', City: 'México D.F.', Region: null, PostalCode: '05023', Country: 'Mexico', Phone: '(5) 555-3932', Fax: null }, - { ID: 'AROUT', CompanyName: 'Around the Horn', ContactName: 'Thomas Hardy', ContactTitle: 'Sales Representative', Address: '120 Hanover Sq.', City: 'London', Region: null, PostalCode: 'WA1 1DP', Country: 'UK', Phone: '(171) 555-7788', Fax: '(171) 555-6750' }, - { ID: 'BERGS', CompanyName: 'Berglunds snabbköp', ContactName: 'Christina Berglund', ContactTitle: 'Order Administrator', Address: 'Berguvsvägen 8', City: 'Luleå', Region: null, PostalCode: 'S-958 22', Country: 'Sweden', Phone: '0921-12 34 65', Fax: '0921-12 34 67' }, - { ID: 'BLAUS', CompanyName: 'Blauer See Delikatessen', ContactName: 'Hanna Moos', ContactTitle: 'Sales Representative', Address: 'Forsterstr. 57', City: 'Mannheim', Region: null, PostalCode: '68306', Country: 'Germany', Phone: '0621-08460', Fax: '0621-08924' }, - { ID: 'BLONP', CompanyName: 'Blondesddsl père et fils', ContactName: 'Frédérique Citeaux', ContactTitle: 'Marketing Manager', Address: '24, place Kléber', City: 'Strasbourg', Region: null, PostalCode: '67000', Country: 'France', Phone: '88.60.15.31', Fax: '88.60.15.32' }, - { ID: 'BOLID', CompanyName: 'Bólido Comidas preparadas', ContactName: 'Martín Sommer', ContactTitle: 'Owner', Address: 'C/ Araquil, 67', City: 'Madrid', Region: null, PostalCode: '28023', Country: 'Spain', Phone: '(91) 555 22 82', Fax: '(91) 555 91 99' }, - { ID: 'BONAP', CompanyName: 'Bon app\'', ContactName: 'Laurence Lebihan', ContactTitle: 'Owner', Address: '12, rue des Bouchers', City: 'Marseille', Region: null, PostalCode: '13008', Country: 'France', Phone: '91.24.45.40', Fax: '91.24.45.41' }, - { ID: 'BOTTM', CompanyName: 'Bottom-Dollar Markets', ContactName: 'Elizabeth Lincoln', ContactTitle: 'Accounting Manager', Address: '23 Tsawassen Blvd.', City: 'Tsawassen', Region: 'BC', PostalCode: 'T2F 8M4', Country: 'Canada', Phone: '(604) 555-4729', Fax: '(604) 555-3745' }, - { ID: 'BSBEV', CompanyName: 'B\'s Beverages', ContactName: 'Victoria Ashworth', ContactTitle: 'Sales Representative', Address: 'Fauntleroy Circus', City: 'London', Region: null, PostalCode: 'EC2 5NT', Country: 'UK', Phone: '(171) 555-1212', Fax: null }, - { ID: 'CACTU', CompanyName: 'Cactus Comidas para llevar', ContactName: 'Patricio Simpson', ContactTitle: 'Sales Agent', Address: 'Cerrito 333', City: 'Buenos Aires', Region: null, PostalCode: '1010', Country: 'Argentina', Phone: '(1) 135-5555', Fax: '(1) 135-4892' }, - { ID: 'CENTC', CompanyName: 'Centro comercial Moctezuma', ContactName: 'Francisco Chang', ContactTitle: 'Marketing Manager', Address: 'Sierras de Granada 9993', City: 'México D.F.', Region: null, PostalCode: '05022', Country: 'Mexico', Phone: '(5) 555-3392', Fax: '(5) 555-7293' }, - { ID: 'CHOPS', CompanyName: 'Chop-suey Chinese', ContactName: 'Yang Wang', ContactTitle: 'Owner', Address: 'Hauptstr. 29', City: 'Bern', Region: null, PostalCode: '3012', Country: 'Switzerland', Phone: '0452-076545', Fax: null }, - { ID: 'COMMI', CompanyName: 'Comércio Mineiro', ContactName: 'Pedro Afonso', ContactTitle: 'Sales Associate', Address: 'Av. dos Lusíadas, 23', City: 'Sao Paulo', Region: 'SP', PostalCode: '05432-043', Country: 'Brazil', Phone: '(11) 555-7647', Fax: null }, - { ID: 'CONSH', CompanyName: 'Consolidated Holdings', ContactName: 'Elizabeth Brown', ContactTitle: 'Sales Representative', Address: 'Berkeley Gardens 12 Brewery', City: 'London', Region: null, PostalCode: 'WX1 6LT', Country: 'UK', Phone: '(171) 555-2282', Fax: '(171) 555-9199' }, - { ID: 'DRACD', CompanyName: 'Drachenblut Delikatessen', ContactName: 'Sven Ottlieb', ContactTitle: 'Order Administrator', Address: 'Walserweg 21', City: 'Aachen', Region: null, PostalCode: '52066', Country: 'Germany', Phone: '0241-039123', Fax: '0241-059428' }, - { ID: 'DUMON', CompanyName: 'Du monde entier', ContactName: 'Janine Labrune', ContactTitle: 'Owner', Address: '67, rue des Cinquante Otages', City: 'Nantes', Region: null, PostalCode: '44000', Country: 'France', Phone: '40.67.88.88', Fax: '40.67.89.89' }, - { ID: 'EASTC', CompanyName: 'Eastern Connection', ContactName: 'Ann Devon', ContactTitle: 'Sales Agent', Address: '35 King George', City: 'London', Region: null, PostalCode: 'WX3 6FW', Country: 'UK', Phone: '(171) 555-0297', Fax: '(171) 555-3373' }, - { ID: 'ERNSH', CompanyName: 'Ernst Handel', ContactName: 'Roland Mendel', ContactTitle: 'Sales Manager', Address: 'Kirchgasse 6', City: 'Graz', Region: null, PostalCode: '8010', Country: 'Austria', Phone: '7675-3425', Fax: '7675-3426' }, - { ID: 'FAMIA', CompanyName: 'Familia Arquibaldo', ContactName: 'Aria Cruz', ContactTitle: 'Marketing Assistant', Address: 'Rua Orós, 92', City: 'Sao Paulo', Region: 'SP', PostalCode: '05442-030', Country: 'Brazil', Phone: '(11) 555-9857', Fax: null }, - { ID: 'FISSA', CompanyName: 'FISSA Fabrica Inter. Salchichas S.A.', ContactName: 'Diego Roel', ContactTitle: 'Accounting Manager', Address: 'C/ Moralzarzal, 86', City: 'Madrid', Region: null, PostalCode: '28034', Country: 'Spain', Phone: '(91) 555 94 44', Fax: '(91) 555 55 93' }, - { ID: 'FOLIG', CompanyName: 'Folies gourmandes', ContactName: 'Martine Rancé', ContactTitle: 'Assistant Sales Agent', Address: '184, chaussée de Tournai', City: 'Lille', Region: null, PostalCode: '59000', Country: 'France', Phone: '20.16.10.16', Fax: '20.16.10.17' }, - { ID: 'FOLKO', CompanyName: 'Folk och fä HB', ContactName: 'Maria Larsson', ContactTitle: 'Owner', Address: 'Åkergatan 24', City: 'Bräcke', Region: null, PostalCode: 'S-844 67', Country: 'Sweden', Phone: '0695-34 67 21', Fax: null }, - { ID: 'FRANK', CompanyName: 'Frankenversand', ContactName: 'Peter Franken', ContactTitle: 'Marketing Manager', Address: 'Berliner Platz 43', City: 'München', Region: null, PostalCode: '80805', Country: 'Germany', Phone: '089-0877310', Fax: '089-0877451' }, - { ID: 'FRANR', CompanyName: 'France restauration', ContactName: 'Carine Schmitt', ContactTitle: 'Marketing Manager', Address: '54, rue Royale', City: 'Nantes', Region: null, PostalCode: '44000', Country: 'France', Phone: '40.32.21.21', Fax: '40.32.21.20' }, - { ID: 'FRANS', CompanyName: 'Franchi S.p.A.', ContactName: 'Paolo Accorti', ContactTitle: 'Sales Representative', Address: 'Via Monte Bianco 34', City: 'Torino', Region: null, PostalCode: '10100', Country: 'Italy', Phone: '011-4988260', Fax: '011-4988261' } - ]; - /* eslint-enable max-len */ + public data = SAMPLE_DATA; constructor(public cdr: ChangeDetectorRef) { this.updateCollectionSize(); this.selectionMode = GridSelectionMode.none; } - public ngAfterViewInit() { - // this.grid.groupBy({ fieldName: 'Country', dir: 1, ignoreCase: false }); - } - - public get layoutRowStyle() { let style = ''; this.collection.forEach(() => { diff --git a/src/app/grid-row-api/grid-row-api.sample.html b/src/app/grid-row-api/grid-row-api.sample.html index 95efdf174de..3a4f01f724f 100644 --- a/src/app/grid-row-api/grid-row-api.sample.html +++ b/src/app/grid-row-api/grid-row-api.sample.html @@ -31,7 +31,7 @@
-
@@ -251,4 +251,4 @@
-
\ No newline at end of file +

diff --git a/src/app/grid-row-pinning/grid-row-pinning.sample.css b/src/app/grid-row-pinning/grid-row-pinning.sample.css index 28ad6b22b5c..27125998ff8 100644 --- a/src/app/grid-row-pinning/grid-row-pinning.sample.css +++ b/src/app/grid-row-pinning/grid-row-pinning.sample.css @@ -3,15 +3,16 @@ margin-top: 24px; } -[igxButton]+[igxButton] { +[igxButton] + [igxButton] { margin-left: 8px; } .pin-icon { cursor: pointer; - color: #999; + opacity: .8; + transition: opacity 240ms ease-in-out; } .pin-icon:hover { - color: #444 -} \ No newline at end of file + opacity: 1; +} diff --git a/src/app/grid-state/grid-state.component.ts b/src/app/grid-state/grid-state.component.ts index 797b0dcd57a..34b5d4de2e4 100644 --- a/src/app/grid-state/grid-state.component.ts +++ b/src/app/grid-state/grid-state.component.ts @@ -1,4 +1,4 @@ -import { Component, OnInit, ViewChild, AfterViewInit, QueryList, ViewChildren } from '@angular/core'; +import { Component, OnInit, ViewChild, QueryList, ViewChildren } from '@angular/core'; import { FilteringExpressionsTree, FilteringLogic, IgxNumberSummaryOperand, IgxSummaryResult, IGridState, IgxGridStateDirective, IgxExpansionPanelComponent, IgxGridBaseDirective, @@ -48,7 +48,7 @@ interface GridState { templateUrl: './grid-state.component.html' }) -export class GridSaveStateComponent implements OnInit, AfterViewInit { +export class GridSaveStateComponent implements OnInit { @ViewChild(IgxExpansionPanelComponent, { static: true }) private igxExpansionPanel: IgxExpansionPanelComponent; @ViewChildren(IgxGridStateDirective) @@ -127,22 +127,6 @@ export class GridSaveStateComponent implements OnInit, AfterViewInit { }); } - public ngAfterViewInit() { - // const gridFilteringExpressionsTree = new FilteringExpressionsTree(FilteringLogic.And); - // const productFilteringExpressionsTree = new FilteringExpressionsTree(FilteringLogic.And, 'ProductName'); - // const productExpression = { - // condition: IgxStringFilteringOperand.instance().condition('contains'), - // fieldName: 'FirstName', - // ignoreCase: true, - // searchVal: 'c' - // }; - // productFilteringExpressionsTree.filteringOperands.push(productExpression); - // gridFilteringExpressionsTree.filteringOperands.push(productFilteringExpressionsTree); - - // this.grid.filteringExpressionsTree = gridFilteringExpressionsTree; - // this.restoreGridState(); - } - public getContext(grid: IgxGridBaseDirective) { if (this.state) { const stateDirective = this.state.find(st => st.grid.id === grid.id); diff --git a/src/app/grid-toolbar/grid-toolbar.sample.ts b/src/app/grid-toolbar/grid-toolbar.sample.ts index 83e183e63e0..d854f9c0094 100644 --- a/src/app/grid-toolbar/grid-toolbar.sample.ts +++ b/src/app/grid-toolbar/grid-toolbar.sample.ts @@ -1,4 +1,4 @@ -import { Component, OnInit } from '@angular/core'; +import { Component } from '@angular/core'; import { IgxCsvExporterService, IgxExcelExporterService, IgxColumnComponent, DisplayDensity } from 'igniteui-angular'; @Component({ @@ -6,7 +6,7 @@ import { IgxCsvExporterService, IgxExcelExporterService, IgxColumnComponent, Dis styleUrls: ['grid-toolbar.sample.css'], templateUrl: 'grid-toolbar.sample.html' }) -export class GridToolbarSampleComponent implements OnInit { +export class GridToolbarSampleComponent { public showToolbar = true; public title = 'Custom Title'; public customContent = false; @@ -32,9 +32,6 @@ export class GridToolbarSampleComponent implements OnInit { constructor() { } - public ngOnInit() { - } - public toolbarExportClicked(obj) { obj.cancel = true; let exporter; diff --git a/src/app/overlay/overlay-animation.sample.scss b/src/app/overlay/overlay-animation.sample.scss index bfdb5269d94..98a4862f7aa 100644 --- a/src/app/overlay/overlay-animation.sample.scss +++ b/src/app/overlay/overlay-animation.sample.scss @@ -1,5 +1,5 @@ // Import the IgniteUI themes library first -@import '../../../projects/igniteui-angular/src/lib/core/styles/themes/index'; +@use '../../../projects/igniteui-angular/src/lib/core/styles/themes/index' as *; $new-card-theme: igx-card-theme( $background: royalblue diff --git a/src/app/overlay/overlay-presets.sample.scss b/src/app/overlay/overlay-presets.sample.scss index edf9e37f53b..abc1e285237 100644 --- a/src/app/overlay/overlay-presets.sample.scss +++ b/src/app/overlay/overlay-presets.sample.scss @@ -1,11 +1,11 @@ // Import the IgniteUI themes library first -@import '../../../projects/igniteui-angular/src/lib/core/styles/themes/index'; +@use '../../../projects/igniteui-angular/src/lib/core/styles/themes' as *; $new-card-theme: igx-card-theme( $background: royalblue ); -::ng-deep{ +:host ::ng-deep{ @include igx-card($new-card-theme); } @@ -14,15 +14,15 @@ $new-card-theme: igx-card-theme( flex-direction: row; flex-wrap: wrap; justify-content: space-between; - min-height: 100%; + min-height: 100%; width: 100%; } .settings{ - background-color: #444444; + background-color: #444; flex: 0 0 15%; align-content: center; - padding: 0.5%; + padding: .5%; } .igx-radio{ @@ -30,7 +30,7 @@ $new-card-theme: igx-card-theme( } .outlet{ - background-color: #444444; + background-color: #444; flex: 0 0 60%; height: 500px; position: relative; @@ -38,10 +38,10 @@ $new-card-theme: igx-card-theme( } .sample-dropdown{ - display: flex; - justify-content: center; + display: flex; + justify-content: center; } p { - padding: 5% 0; + padding: 5% 0; } diff --git a/src/app/pageHeading/pageHeading.styles.scss b/src/app/pageHeading/pageHeading.styles.scss index 87cfec89301..d1905df8f93 100644 --- a/src/app/pageHeading/pageHeading.styles.scss +++ b/src/app/pageHeading/pageHeading.styles.scss @@ -25,11 +25,11 @@ align-items: center; height: rem(90px); padding: 0 rem(16px); - background: var(--igx-primary-500); + background: hsla(var(--igx-primary-500)); overflow: hidden; .title { - color: var(--igx-primary-500-contrast); + color: hsla(var(--igx-primary-500-contrast)); margin: 0; text-transform: capitalize; white-space: nowrap; diff --git a/src/app/progressbar/progressbar.sample.scss b/src/app/progressbar/progressbar.sample.scss index 1d3b0a676b2..929215f0365 100644 --- a/src/app/progressbar/progressbar.sample.scss +++ b/src/app/progressbar/progressbar.sample.scss @@ -1,4 +1,4 @@ -@import '../../../projects/igniteui-angular/src/lib/core/styles/themes/index'; +@use '../../../projects/igniteui-angular/src/lib/core/styles/themes/index' as *; .circular-samples { display: flex; @@ -28,10 +28,10 @@ } .custom-gradient { - $circ-theme: igx-progress-circular-theme( - $progress-circle-color: purple orange, - ); + // $circ-theme: igx-progress-circular-theme( + // $progress-circle-color: purple orange, + // ); - @include igx-progress-circular($circ-theme); + // @include igx-progress-circular($circ-theme); } diff --git a/src/app/stepper/stepper.sample.html b/src/app/stepper/stepper.sample.html index 00b7bae344a..fcf4794a4ec 100644 --- a/src/app/stepper/stepper.sample.html +++ b/src/app/stepper/stepper.sample.html @@ -32,7 +32,7 @@
diff --git a/src/app/stepper/stepper.sample.ts b/src/app/stepper/stepper.sample.ts index bee6bc8ba81..82b3f24b13c 100644 --- a/src/app/stepper/stepper.sample.ts +++ b/src/app/stepper/stepper.sample.ts @@ -1,4 +1,4 @@ -import { AfterViewInit, ChangeDetectorRef, Component, ViewChild } from '@angular/core'; +import { ChangeDetectorRef, Component, ViewChild } from '@angular/core'; import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms'; import { HorizontalAnimationType } from 'projects/igniteui-angular/src/lib/carousel/carousel-base'; import { @@ -10,7 +10,7 @@ import { IgxStepperComponent } from 'projects/igniteui-angular/src/lib/stepper/s templateUrl: 'stepper.sample.html', styleUrls: ['stepper.sample.scss'] }) -export class IgxStepperSampleComponent implements AfterViewInit { +export class IgxStepperSampleComponent { @ViewChild('stepper', { static: true }) public stepper: IgxStepperComponent; public displayStep = false; public horizontalAnimationType: HorizontalAnimationType = 'slide'; @@ -119,9 +119,6 @@ export class IgxStepperSampleComponent implements AfterViewInit { }); } - public ngAfterViewInit() { - } - public toggleStepTypes(event) { this.stepType = this.stepTypes[event.index].stepType; } @@ -146,9 +143,8 @@ export class IgxStepperSampleComponent implements AfterViewInit { } } - public activeChanged(event) { + public activeChanged() { console.log('GOLQM ACTIVE CHANGED'); - // console.log(event); } public activeStepChange(ev) { diff --git a/src/app/styleguide/colors/color.sample.scss b/src/app/styleguide/colors/color.sample.scss index e9aa7c272b8..0594332f2ff 100644 --- a/src/app/styleguide/colors/color.sample.scss +++ b/src/app/styleguide/colors/color.sample.scss @@ -1,8 +1,6 @@ @import '../../../../projects/igniteui-angular/src/lib/core/styles/themes/utilities'; @import '../../../styles/variables'; -$igx-legacy-support: $legacy-support; - .sample-wrapper { display: grid; grid-template-columns: 1fr; diff --git a/src/app/tooltip/tooltip.sample.ts b/src/app/tooltip/tooltip.sample.ts index 1e181ed6188..295b9084d16 100644 --- a/src/app/tooltip/tooltip.sample.ts +++ b/src/app/tooltip/tooltip.sample.ts @@ -1,4 +1,4 @@ -import { Component, OnInit, ViewChild, AfterViewInit } from '@angular/core'; +import { Component, OnInit, ViewChild } from '@angular/core'; import { IgxTooltipTargetDirective, OverlaySettings } from 'igniteui-angular'; @@ -8,7 +8,7 @@ import { styleUrls: ['tooltip.sample.css'], templateUrl: 'tooltip.sample.html' }) -export class TooltipSampleComponent implements OnInit, AfterViewInit { +export class TooltipSampleComponent implements OnInit { @ViewChild('target', { static: true }) public tooltipTarget: IgxTooltipTargetDirective; @@ -86,12 +86,6 @@ export class TooltipSampleComponent implements OnInit, AfterViewInit { ]; } - public ngAfterViewInit() { - // this.settings.positionStrategy.settings.target = this.tooltipTarget.nativeElement; - // this.settings.positionStrategy.settings.openAnimation = null; - // this.settings.positionStrategy.settings.closeAnimation = null; - } - public showTooltip() { this.tooltipTarget.showTooltip(); } diff --git a/src/app/tree-grid-groupby/tree-grid-groupby.sample.html b/src/app/tree-grid-groupby/tree-grid-groupby.sample.html index 458099c258d..864e28ca544 100644 --- a/src/app/tree-grid-groupby/tree-grid-groupby.sample.html +++ b/src/app/tree-grid-groupby/tree-grid-groupby.sample.html @@ -15,7 +15,7 @@ [sortStrategy]="sorting" [allowFiltering]="true" [filterMode]="'excelStyleFilter'" - (cellEditDone)="cellEditDone($event)"> + (cellEditDone)="cellEditDone()">