From 79feb6e0ecf99032677b2ad40c077361ca563d74 Mon Sep 17 00:00:00 2001 From: Serge Date: Wed, 3 Jul 2024 15:47:10 +0200 Subject: [PATCH 1/2] fix(): theming --- angular.json | 3 + package-lock.json | 653 ++++++++++++++++++ package.json | 3 +- projects/core/package.json | 19 +- projects/core/src/styles/_theme.scss | 4 +- .../core/src/styles/mixins/_icon-theme.scss | 2 +- .../{loader-theme.scss => _loader-theme.scss} | 2 +- ...-theme.scss => _material-icons-theme.scss} | 2 +- .../core/src/styles/mixins/_menu-theme.scss | 2 +- .../styles/mixins/_ngx-components-theme.scss | 25 - projects/layout/package.json | 5 + projects/layout/src/_layout-theme.scss | 2 +- .../list-loader/src/list-loader.component.ts | 4 +- projects/message-box-dialog/package.json | 5 + .../src/_message-box-dialog-theme.scss | 2 +- projects/search-container/package.json | 5 + .../src/_search-container-theme.scss | 2 +- projects/sidenav/package.json | 5 + projects/user-card/package.json | 5 + projects/user-card/src/_user-card-theme.scss | 4 +- 20 files changed, 712 insertions(+), 42 deletions(-) rename projects/core/src/styles/mixins/{loader-theme.scss => _loader-theme.scss} (98%) rename projects/core/src/styles/mixins/{material-icons-theme.scss => _material-icons-theme.scss} (97%) delete mode 100644 projects/core/src/styles/mixins/_ngx-components-theme.scss diff --git a/angular.json b/angular.json index 900be523..13eb8537 100644 --- a/angular.json +++ b/angular.json @@ -601,5 +601,8 @@ } } } + }, + "cli": { + "analytics": false } } diff --git a/package-lock.json b/package-lock.json index 722d1a8f..67b8c458 100644 --- a/package-lock.json +++ b/package-lock.json @@ -3637,6 +3637,20 @@ "node": ">=8" } }, + "node_modules/@commitlint/load/node_modules/typescript": { + "version": "5.5.3", + "resolved": "https://nxrm.hisaas.hcuge.ch/repository/npm-all/typescript/-/typescript-5.5.3.tgz", + "integrity": "sha512-/hreyEujaB0w76zKo6717l3L0o/qEUtRgdvUBvlkhoWeOVMjMuHNHk0BRBzikzuGDqNmPQbg5ifMEqsHLiIUcQ==", + "dev": true, + "peer": true, + "bin": { + "tsc": "bin/tsc", + "tsserver": "bin/tsserver" + }, + "engines": { + "node": ">=14.17" + } + }, "node_modules/@commitlint/message": { "version": "18.6.1", "resolved": "https://registry.npmjs.org/@commitlint/message/-/message-18.6.1.tgz", @@ -4229,6 +4243,137 @@ "node": "^12.0.0 || ^14.0.0 || >=16.0.0" } }, + "node_modules/@eslint/eslintrc": { + "version": "2.1.4", + "resolved": "https://nxrm.hisaas.hcuge.ch/repository/npm-all/@eslint/eslintrc/-/eslintrc-2.1.4.tgz", + "integrity": "sha512-269Z39MS6wVJtsoUl10L60WdkhJVdPG24Q4eZTH3nnF6lpvSShEK3wQjDX9JRWAUPvPh7COouPpU9IrqaZFvtQ==", + "dev": true, + "peer": true, + "dependencies": { + "ajv": "^6.12.4", + "debug": "^4.3.2", + "espree": "^9.6.0", + "globals": "^13.19.0", + "ignore": "^5.2.0", + "import-fresh": "^3.2.1", + "js-yaml": "^4.1.0", + "minimatch": "^3.1.2", + "strip-json-comments": "^3.1.1" + }, + "engines": { + "node": "^12.22.0 || ^14.17.0 || >=16.0.0" + }, + "funding": { + "url": "https://opencollective.com/eslint" + } + }, + "node_modules/@eslint/eslintrc/node_modules/ajv": { + "version": "6.12.6", + "resolved": "https://nxrm.hisaas.hcuge.ch/repository/npm-all/ajv/-/ajv-6.12.6.tgz", + "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==", + "dev": true, + "peer": true, + "dependencies": { + "fast-deep-equal": "^3.1.1", + "fast-json-stable-stringify": "^2.0.0", + "json-schema-traverse": "^0.4.1", + "uri-js": "^4.2.2" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/epoberezkin" + } + }, + "node_modules/@eslint/eslintrc/node_modules/argparse": { + "version": "2.0.1", + "resolved": "https://nxrm.hisaas.hcuge.ch/repository/npm-all/argparse/-/argparse-2.0.1.tgz", + "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==", + "dev": true, + "peer": true + }, + "node_modules/@eslint/eslintrc/node_modules/brace-expansion": { + "version": "1.1.11", + "resolved": "https://nxrm.hisaas.hcuge.ch/repository/npm-all/brace-expansion/-/brace-expansion-1.1.11.tgz", + "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==", + "dev": true, + "peer": true, + "dependencies": { + "balanced-match": "^1.0.0", + "concat-map": "0.0.1" + } + }, + "node_modules/@eslint/eslintrc/node_modules/globals": { + "version": "13.24.0", + "resolved": "https://nxrm.hisaas.hcuge.ch/repository/npm-all/globals/-/globals-13.24.0.tgz", + "integrity": "sha512-AhO5QUcj8llrbG09iWhPU2B204J1xnPeL8kQmVorSsy+Sjj1sk8gIyh6cUocGmH4L0UuhAJy+hJMRA4mgA4mFQ==", + "dev": true, + "peer": true, + "dependencies": { + "type-fest": "^0.20.2" + }, + "engines": { + "node": ">=8" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/@eslint/eslintrc/node_modules/js-yaml": { + "version": "4.1.0", + "resolved": "https://nxrm.hisaas.hcuge.ch/repository/npm-all/js-yaml/-/js-yaml-4.1.0.tgz", + "integrity": "sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==", + "dev": true, + "peer": true, + "dependencies": { + "argparse": "^2.0.1" + }, + "bin": { + "js-yaml": "bin/js-yaml.js" + } + }, + "node_modules/@eslint/eslintrc/node_modules/json-schema-traverse": { + "version": "0.4.1", + "resolved": "https://nxrm.hisaas.hcuge.ch/repository/npm-all/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz", + "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==", + "dev": true, + "peer": true + }, + "node_modules/@eslint/eslintrc/node_modules/minimatch": { + "version": "3.1.2", + "resolved": "https://nxrm.hisaas.hcuge.ch/repository/npm-all/minimatch/-/minimatch-3.1.2.tgz", + "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==", + "dev": true, + "peer": true, + "dependencies": { + "brace-expansion": "^1.1.7" + }, + "engines": { + "node": "*" + } + }, + "node_modules/@eslint/eslintrc/node_modules/type-fest": { + "version": "0.20.2", + "resolved": "https://nxrm.hisaas.hcuge.ch/repository/npm-all/type-fest/-/type-fest-0.20.2.tgz", + "integrity": "sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ==", + "dev": true, + "peer": true, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/@eslint/js": { + "version": "8.57.0", + "resolved": "https://nxrm.hisaas.hcuge.ch/repository/npm-all/@eslint/js/-/js-8.57.0.tgz", + "integrity": "sha512-Ys+3g2TaW7gADOJzPt83SJtCDhMjndcDMFVQ/Tj9iA1BfJzFKD9mAUXT3OenpuPHbI6P/myECxRJrofUsDx/5g==", + "dev": true, + "peer": true, + "engines": { + "node": "^12.22.0 || ^14.17.0 || >=16.0.0" + } + }, "node_modules/@gar/promisify": { "version": "1.1.3", "resolved": "https://registry.npmjs.org/@gar/promisify/-/promisify-1.1.3.tgz", @@ -4383,6 +4528,68 @@ "resolved": "projects/user-tooltip", "link": true }, + "node_modules/@humanwhocodes/config-array": { + "version": "0.11.14", + "resolved": "https://nxrm.hisaas.hcuge.ch/repository/npm-all/@humanwhocodes/config-array/-/config-array-0.11.14.tgz", + "integrity": "sha512-3T8LkOmg45BV5FICb15QQMsyUSWrQ8AygVfC7ZG32zOalnqrilm018ZVCw0eapXux8FtA33q8PSRSstjee3jSg==", + "deprecated": "Use @eslint/config-array instead", + "dev": true, + "peer": true, + "dependencies": { + "@humanwhocodes/object-schema": "^2.0.2", + "debug": "^4.3.1", + "minimatch": "^3.0.5" + }, + "engines": { + "node": ">=10.10.0" + } + }, + "node_modules/@humanwhocodes/config-array/node_modules/brace-expansion": { + "version": "1.1.11", + "resolved": "https://nxrm.hisaas.hcuge.ch/repository/npm-all/brace-expansion/-/brace-expansion-1.1.11.tgz", + "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==", + "dev": true, + "peer": true, + "dependencies": { + "balanced-match": "^1.0.0", + "concat-map": "0.0.1" + } + }, + "node_modules/@humanwhocodes/config-array/node_modules/minimatch": { + "version": "3.1.2", + "resolved": "https://nxrm.hisaas.hcuge.ch/repository/npm-all/minimatch/-/minimatch-3.1.2.tgz", + "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==", + "dev": true, + "peer": true, + "dependencies": { + "brace-expansion": "^1.1.7" + }, + "engines": { + "node": "*" + } + }, + "node_modules/@humanwhocodes/module-importer": { + "version": "1.0.1", + "resolved": "https://nxrm.hisaas.hcuge.ch/repository/npm-all/@humanwhocodes/module-importer/-/module-importer-1.0.1.tgz", + "integrity": "sha512-bxveV4V8v5Yb4ncFTT3rPSgZBOpCkjfK0y4oVVVJwIuDVBRMDXrPyXRL988i5ap9m9bnyEEjWfm5WkBmtffLfA==", + "dev": true, + "peer": true, + "engines": { + "node": ">=12.22" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/nzakas" + } + }, + "node_modules/@humanwhocodes/object-schema": { + "version": "2.0.3", + "resolved": "https://nxrm.hisaas.hcuge.ch/repository/npm-all/@humanwhocodes/object-schema/-/object-schema-2.0.3.tgz", + "integrity": "sha512-93zYdMES/c1D69yZiKDBj0V24vqNzB/koF26KPaagAfd3P/4gUlh3Dys5ogAK+Exi9QyzlD8x/08Zt7wIKcDcA==", + "deprecated": "Use @eslint/object-schema instead", + "dev": true, + "peer": true + }, "node_modules/@istanbuljs/load-nyc-config": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/@istanbuljs/load-nyc-config/-/load-nyc-config-1.1.0.tgz", @@ -7142,6 +7349,13 @@ "url": "https://opencollective.com/typescript-eslint" } }, + "node_modules/@ungap/structured-clone": { + "version": "1.2.0", + "resolved": "https://nxrm.hisaas.hcuge.ch/repository/npm-all/@ungap/structured-clone/-/structured-clone-1.2.0.tgz", + "integrity": "sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==", + "dev": true, + "peer": true + }, "node_modules/@webassemblyjs/ast": { "version": "1.11.1", "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.11.1.tgz", @@ -9742,6 +9956,13 @@ "node": ">=0.10" } }, + "node_modules/deep-is": { + "version": "0.1.4", + "resolved": "https://nxrm.hisaas.hcuge.ch/repository/npm-all/deep-is/-/deep-is-0.1.4.tgz", + "integrity": "sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==", + "dev": true, + "peer": true + }, "node_modules/deepmerge": { "version": "4.3.1", "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.3.1.tgz", @@ -9970,6 +10191,19 @@ "node": ">=6" } }, + "node_modules/doctrine": { + "version": "3.0.0", + "resolved": "https://nxrm.hisaas.hcuge.ch/repository/npm-all/doctrine/-/doctrine-3.0.0.tgz", + "integrity": "sha512-yS+Q5i3hBf7GBkd4KG8a7eBNNWNGLTaEwwYWUijIYM7zrlYDM0BFXHjjPWlWZ1Rg7UaddZeIDmi9jF3HmqiQ2w==", + "dev": true, + "peer": true, + "dependencies": { + "esutils": "^2.0.2" + }, + "engines": { + "node": ">=6.0.0" + } + }, "node_modules/dom-serialize": { "version": "2.2.1", "resolved": "https://registry.npmjs.org/dom-serialize/-/dom-serialize-2.2.1.tgz", @@ -10865,6 +11099,62 @@ "node": ">=0.8.0" } }, + "node_modules/eslint": { + "version": "8.57.0", + "resolved": "https://nxrm.hisaas.hcuge.ch/repository/npm-all/eslint/-/eslint-8.57.0.tgz", + "integrity": "sha512-dZ6+mexnaTIbSBZWgou51U6OmzIhYM2VcNdtiTtI7qPNZm35Akpr0f6vtw3w1Kmn5PYo+tZVfh13WrhpS6oLqQ==", + "dev": true, + "peer": true, + "dependencies": { + "@eslint-community/eslint-utils": "^4.2.0", + "@eslint-community/regexpp": "^4.6.1", + "@eslint/eslintrc": "^2.1.4", + "@eslint/js": "8.57.0", + "@humanwhocodes/config-array": "^0.11.14", + "@humanwhocodes/module-importer": "^1.0.1", + "@nodelib/fs.walk": "^1.2.8", + "@ungap/structured-clone": "^1.2.0", + "ajv": "^6.12.4", + "chalk": "^4.0.0", + "cross-spawn": "^7.0.2", + "debug": "^4.3.2", + "doctrine": "^3.0.0", + "escape-string-regexp": "^4.0.0", + "eslint-scope": "^7.2.2", + "eslint-visitor-keys": "^3.4.3", + "espree": "^9.6.1", + "esquery": "^1.4.2", + "esutils": "^2.0.2", + "fast-deep-equal": "^3.1.3", + "file-entry-cache": "^6.0.1", + "find-up": "^5.0.0", + "glob-parent": "^6.0.2", + "globals": "^13.19.0", + "graphemer": "^1.4.0", + "ignore": "^5.2.0", + "imurmurhash": "^0.1.4", + "is-glob": "^4.0.0", + "is-path-inside": "^3.0.3", + "js-yaml": "^4.1.0", + "json-stable-stringify-without-jsonify": "^1.0.1", + "levn": "^0.4.1", + "lodash.merge": "^4.6.2", + "minimatch": "^3.1.2", + "natural-compare": "^1.4.0", + "optionator": "^0.9.3", + "strip-ansi": "^6.0.1", + "text-table": "^0.2.0" + }, + "bin": { + "eslint": "bin/eslint.js" + }, + "engines": { + "node": "^12.22.0 || ^14.17.0 || >=16.0.0" + }, + "funding": { + "url": "https://opencollective.com/eslint" + } + }, "node_modules/eslint-compat-utils": { "version": "0.5.1", "resolved": "https://registry.npmjs.org/eslint-compat-utils/-/eslint-compat-utils-0.5.1.tgz", @@ -11343,6 +11633,222 @@ "url": "https://opencollective.com/eslint" } }, + "node_modules/eslint/node_modules/ajv": { + "version": "6.12.6", + "resolved": "https://nxrm.hisaas.hcuge.ch/repository/npm-all/ajv/-/ajv-6.12.6.tgz", + "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==", + "dev": true, + "peer": true, + "dependencies": { + "fast-deep-equal": "^3.1.1", + "fast-json-stable-stringify": "^2.0.0", + "json-schema-traverse": "^0.4.1", + "uri-js": "^4.2.2" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/epoberezkin" + } + }, + "node_modules/eslint/node_modules/ansi-styles": { + "version": "4.3.0", + "resolved": "https://nxrm.hisaas.hcuge.ch/repository/npm-all/ansi-styles/-/ansi-styles-4.3.0.tgz", + "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==", + "dev": true, + "peer": true, + "dependencies": { + "color-convert": "^2.0.1" + }, + "engines": { + "node": ">=8" + }, + "funding": { + "url": "https://github.com/chalk/ansi-styles?sponsor=1" + } + }, + "node_modules/eslint/node_modules/argparse": { + "version": "2.0.1", + "resolved": "https://nxrm.hisaas.hcuge.ch/repository/npm-all/argparse/-/argparse-2.0.1.tgz", + "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==", + "dev": true, + "peer": true + }, + "node_modules/eslint/node_modules/brace-expansion": { + "version": "1.1.11", + "resolved": "https://nxrm.hisaas.hcuge.ch/repository/npm-all/brace-expansion/-/brace-expansion-1.1.11.tgz", + "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==", + "dev": true, + "peer": true, + "dependencies": { + "balanced-match": "^1.0.0", + "concat-map": "0.0.1" + } + }, + "node_modules/eslint/node_modules/chalk": { + "version": "4.1.2", + "resolved": "https://nxrm.hisaas.hcuge.ch/repository/npm-all/chalk/-/chalk-4.1.2.tgz", + "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", + "dev": true, + "peer": true, + "dependencies": { + "ansi-styles": "^4.1.0", + "supports-color": "^7.1.0" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/chalk/chalk?sponsor=1" + } + }, + "node_modules/eslint/node_modules/color-convert": { + "version": "2.0.1", + "resolved": "https://nxrm.hisaas.hcuge.ch/repository/npm-all/color-convert/-/color-convert-2.0.1.tgz", + "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==", + "dev": true, + "peer": true, + "dependencies": { + "color-name": "~1.1.4" + }, + "engines": { + "node": ">=7.0.0" + } + }, + "node_modules/eslint/node_modules/color-name": { + "version": "1.1.4", + "resolved": "https://nxrm.hisaas.hcuge.ch/repository/npm-all/color-name/-/color-name-1.1.4.tgz", + "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==", + "dev": true, + "peer": true + }, + "node_modules/eslint/node_modules/escape-string-regexp": { + "version": "4.0.0", + "resolved": "https://nxrm.hisaas.hcuge.ch/repository/npm-all/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz", + "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==", + "dev": true, + "peer": true, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/eslint/node_modules/eslint-scope": { + "version": "7.2.2", + "resolved": "https://nxrm.hisaas.hcuge.ch/repository/npm-all/eslint-scope/-/eslint-scope-7.2.2.tgz", + "integrity": "sha512-dOt21O7lTMhDM+X9mB4GX+DZrZtCUJPL/wlcTqxyrx5IvO0IYtILdtrQGQp+8n5S0gwSVmOf9NQrjMOgfQZlIg==", + "dev": true, + "peer": true, + "dependencies": { + "esrecurse": "^4.3.0", + "estraverse": "^5.2.0" + }, + "engines": { + "node": "^12.22.0 || ^14.17.0 || >=16.0.0" + }, + "funding": { + "url": "https://opencollective.com/eslint" + } + }, + "node_modules/eslint/node_modules/glob-parent": { + "version": "6.0.2", + "resolved": "https://nxrm.hisaas.hcuge.ch/repository/npm-all/glob-parent/-/glob-parent-6.0.2.tgz", + "integrity": "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==", + "dev": true, + "peer": true, + "dependencies": { + "is-glob": "^4.0.3" + }, + "engines": { + "node": ">=10.13.0" + } + }, + "node_modules/eslint/node_modules/globals": { + "version": "13.24.0", + "resolved": "https://nxrm.hisaas.hcuge.ch/repository/npm-all/globals/-/globals-13.24.0.tgz", + "integrity": "sha512-AhO5QUcj8llrbG09iWhPU2B204J1xnPeL8kQmVorSsy+Sjj1sk8gIyh6cUocGmH4L0UuhAJy+hJMRA4mgA4mFQ==", + "dev": true, + "peer": true, + "dependencies": { + "type-fest": "^0.20.2" + }, + "engines": { + "node": ">=8" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/eslint/node_modules/has-flag": { + "version": "4.0.0", + "resolved": "https://nxrm.hisaas.hcuge.ch/repository/npm-all/has-flag/-/has-flag-4.0.0.tgz", + "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==", + "dev": true, + "peer": true, + "engines": { + "node": ">=8" + } + }, + "node_modules/eslint/node_modules/js-yaml": { + "version": "4.1.0", + "resolved": "https://nxrm.hisaas.hcuge.ch/repository/npm-all/js-yaml/-/js-yaml-4.1.0.tgz", + "integrity": "sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==", + "dev": true, + "peer": true, + "dependencies": { + "argparse": "^2.0.1" + }, + "bin": { + "js-yaml": "bin/js-yaml.js" + } + }, + "node_modules/eslint/node_modules/json-schema-traverse": { + "version": "0.4.1", + "resolved": "https://nxrm.hisaas.hcuge.ch/repository/npm-all/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz", + "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==", + "dev": true, + "peer": true + }, + "node_modules/eslint/node_modules/minimatch": { + "version": "3.1.2", + "resolved": "https://nxrm.hisaas.hcuge.ch/repository/npm-all/minimatch/-/minimatch-3.1.2.tgz", + "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==", + "dev": true, + "peer": true, + "dependencies": { + "brace-expansion": "^1.1.7" + }, + "engines": { + "node": "*" + } + }, + "node_modules/eslint/node_modules/supports-color": { + "version": "7.2.0", + "resolved": "https://nxrm.hisaas.hcuge.ch/repository/npm-all/supports-color/-/supports-color-7.2.0.tgz", + "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==", + "dev": true, + "peer": true, + "dependencies": { + "has-flag": "^4.0.0" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/eslint/node_modules/type-fest": { + "version": "0.20.2", + "resolved": "https://nxrm.hisaas.hcuge.ch/repository/npm-all/type-fest/-/type-fest-0.20.2.tgz", + "integrity": "sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ==", + "dev": true, + "peer": true, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, "node_modules/espree": { "version": "9.6.1", "resolved": "https://registry.npmjs.org/espree/-/espree-9.6.1.tgz", @@ -11658,6 +12164,13 @@ "dev": true, "license": "MIT" }, + "node_modules/fast-levenshtein": { + "version": "2.0.6", + "resolved": "https://nxrm.hisaas.hcuge.ch/repository/npm-all/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz", + "integrity": "sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==", + "dev": true, + "peer": true + }, "node_modules/fastq": { "version": "1.17.1", "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.17.1.tgz", @@ -11697,6 +12210,19 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/file-entry-cache": { + "version": "6.0.1", + "resolved": "https://nxrm.hisaas.hcuge.ch/repository/npm-all/file-entry-cache/-/file-entry-cache-6.0.1.tgz", + "integrity": "sha512-7Gps/XWymbLk2QLYK4NzpMOrYjMhdIxXuIvy2QBsLE6ljuodKvdkWs/cpyJJ3CVIVpH0Oi1Hvg1ovbMzLdFBBg==", + "dev": true, + "peer": true, + "dependencies": { + "flat-cache": "^3.0.4" + }, + "engines": { + "node": "^10.12.0 || >=12.0.0" + } + }, "node_modules/filelist": { "version": "1.0.4", "resolved": "https://registry.npmjs.org/filelist/-/filelist-1.0.4.tgz", @@ -11824,6 +12350,21 @@ "flat": "cli.js" } }, + "node_modules/flat-cache": { + "version": "3.2.0", + "resolved": "https://nxrm.hisaas.hcuge.ch/repository/npm-all/flat-cache/-/flat-cache-3.2.0.tgz", + "integrity": "sha512-CYcENa+FtcUKLmhhqyctpclsq7QF38pKjZHsGNiSQF5r4FtoKDWabFDl3hzaEQMvT1LHEysw5twgLvpYYb4vbw==", + "dev": true, + "peer": true, + "dependencies": { + "flatted": "^3.2.9", + "keyv": "^4.5.3", + "rimraf": "^3.0.2" + }, + "engines": { + "node": "^10.12.0 || >=12.0.0" + } + }, "node_modules/flatted": { "version": "3.3.1", "resolved": "https://registry.npmjs.org/flatted/-/flatted-3.3.1.tgz", @@ -13386,6 +13927,16 @@ "node": ">=8" } }, + "node_modules/is-path-inside": { + "version": "3.0.3", + "resolved": "https://nxrm.hisaas.hcuge.ch/repository/npm-all/is-path-inside/-/is-path-inside-3.0.3.tgz", + "integrity": "sha512-Fd4gABb+ycGAmKou8eMftCupSir5lRxqf4aD/vd0cD2qc4HL07OjCeuHMr8Ro4CoMaeCKDB0/ECBOVWjTwUvPQ==", + "dev": true, + "peer": true, + "engines": { + "node": ">=8" + } + }, "node_modules/is-plain-obj": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-3.0.0.tgz", @@ -14062,6 +14613,13 @@ "node": ">=4" } }, + "node_modules/json-buffer": { + "version": "3.0.1", + "resolved": "https://nxrm.hisaas.hcuge.ch/repository/npm-all/json-buffer/-/json-buffer-3.0.1.tgz", + "integrity": "sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ==", + "dev": true, + "peer": true + }, "node_modules/json-parse-even-better-errors": { "version": "2.3.1", "resolved": "https://registry.npmjs.org/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz", @@ -14095,6 +14653,13 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/json-stable-stringify-without-jsonify": { + "version": "1.0.1", + "resolved": "https://nxrm.hisaas.hcuge.ch/repository/npm-all/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz", + "integrity": "sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==", + "dev": true, + "peer": true + }, "node_modules/json5": { "version": "2.2.3", "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz", @@ -14436,6 +15001,16 @@ "node": ">=10" } }, + "node_modules/keyv": { + "version": "4.5.4", + "resolved": "https://nxrm.hisaas.hcuge.ch/repository/npm-all/keyv/-/keyv-4.5.4.tgz", + "integrity": "sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw==", + "dev": true, + "peer": true, + "dependencies": { + "json-buffer": "3.0.1" + } + }, "node_modules/kind-of": { "version": "6.0.3", "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz", @@ -14586,6 +15161,20 @@ "node": ">=0.10.0" } }, + "node_modules/levn": { + "version": "0.4.1", + "resolved": "https://nxrm.hisaas.hcuge.ch/repository/npm-all/levn/-/levn-0.4.1.tgz", + "integrity": "sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==", + "dev": true, + "peer": true, + "dependencies": { + "prelude-ls": "^1.2.1", + "type-check": "~0.4.0" + }, + "engines": { + "node": ">= 0.8.0" + } + }, "node_modules/license-webpack-plugin": { "version": "4.0.2", "resolved": "https://registry.npmjs.org/license-webpack-plugin/-/license-webpack-plugin-4.0.2.tgz", @@ -16733,6 +17322,24 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/optionator": { + "version": "0.9.4", + "resolved": "https://nxrm.hisaas.hcuge.ch/repository/npm-all/optionator/-/optionator-0.9.4.tgz", + "integrity": "sha512-6IpQ7mKUxRcZNLIObR0hz7lxsapSSIYNZJwXPGeF0mTVqGKFIXj1DQcMoT22S3ROcLyY/rz0PWaWZ9ayWmad9g==", + "dev": true, + "peer": true, + "dependencies": { + "deep-is": "^0.1.3", + "fast-levenshtein": "^2.0.6", + "levn": "^0.4.1", + "prelude-ls": "^1.2.1", + "type-check": "^0.4.0", + "word-wrap": "^1.2.5" + }, + "engines": { + "node": ">= 0.8.0" + } + }, "node_modules/ora": { "version": "5.4.1", "resolved": "https://registry.npmjs.org/ora/-/ora-5.4.1.tgz", @@ -18281,6 +18888,16 @@ "dev": true, "license": "MIT" }, + "node_modules/prelude-ls": { + "version": "1.2.1", + "resolved": "https://nxrm.hisaas.hcuge.ch/repository/npm-all/prelude-ls/-/prelude-ls-1.2.1.tgz", + "integrity": "sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==", + "dev": true, + "peer": true, + "engines": { + "node": ">= 0.8.0" + } + }, "node_modules/pretty-bytes": { "version": "5.6.0", "resolved": "https://registry.npmjs.org/pretty-bytes/-/pretty-bytes-5.6.0.tgz", @@ -20410,6 +21027,19 @@ "node": ">=8" } }, + "node_modules/strip-json-comments": { + "version": "3.1.1", + "resolved": "https://nxrm.hisaas.hcuge.ch/repository/npm-all/strip-json-comments/-/strip-json-comments-3.1.1.tgz", + "integrity": "sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==", + "dev": true, + "peer": true, + "engines": { + "node": ">=8" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, "node_modules/strong-log-transformer": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/strong-log-transformer/-/strong-log-transformer-2.1.0.tgz", @@ -21077,6 +21707,19 @@ "dev": true, "license": "0BSD" }, + "node_modules/type-check": { + "version": "0.4.0", + "resolved": "https://nxrm.hisaas.hcuge.ch/repository/npm-all/type-check/-/type-check-0.4.0.tgz", + "integrity": "sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==", + "dev": true, + "peer": true, + "dependencies": { + "prelude-ls": "^1.2.1" + }, + "engines": { + "node": ">= 0.8.0" + } + }, "node_modules/type-fest": { "version": "0.21.3", "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.21.3.tgz", @@ -21890,6 +22533,16 @@ "dev": true, "license": "MIT" }, + "node_modules/word-wrap": { + "version": "1.2.5", + "resolved": "https://nxrm.hisaas.hcuge.ch/repository/npm-all/word-wrap/-/word-wrap-1.2.5.tgz", + "integrity": "sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA==", + "dev": true, + "peer": true, + "engines": { + "node": ">=0.10.0" + } + }, "node_modules/wrap-ansi": { "version": "7.0.0", "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz", diff --git a/package.json b/package.json index 6c35ea57..727b7690 100644 --- a/package.json +++ b/package.json @@ -6,7 +6,8 @@ "prepare": "husky || true", "new-package": "ng g .:new-package", "release:dry-run": "nx release --verbose --dry-run", - "postinstall": "patch-package" + "postinstall": "patch-package", + "ng": "ng" }, "workspaces": [ "projects/core", diff --git a/projects/core/package.json b/projects/core/package.json index cc3912c2..2a65f782 100644 --- a/projects/core/package.json +++ b/projects/core/package.json @@ -21,8 +21,23 @@ ], "sideEffects": false, "exports": { - ".": { - "sass": "./styles" + "./theme": { + "sass": "./styles/_theme.scss" + }, + "./themeVariables": { + "sass": "./styles/_themeVariables.scss" + }, + "./menu": { + "sass": "./styles/mixins/_menu.scss" + }, + "./menu-theme": { + "sass": "./styles/mixins/_menu-theme.scss" + }, + "./loader-theme": { + "sass": "./styles/mixins/_loader-theme.scss" + }, + "./icon-theme": { + "sass": "./styles/mixins/_icon-theme.scss" } }, "scripts": { diff --git a/projects/core/src/styles/_theme.scss b/projects/core/src/styles/_theme.scss index 0a73fa51..b4864368 100644 --- a/projects/core/src/styles/_theme.scss +++ b/projects/core/src/styles/_theme.scss @@ -1,15 +1,13 @@ @use '@angular/material' as mat; @use './themeVariables' as themeVariables; @use './mixins/material-icons-theme' as materialIconsTheme; -@use './mixins/ngx-components-theme' as ngxComponentsTheme; @import './roboto'; // Include theme styles for core and each component used in the app @include mat.core(); @include mat.all-component-themes(themeVariables.$theme); -@include materialIconsTheme.material-icons-theme(); -@include ngxComponentsTheme.all-component-themes(themeVariables.$theme); +@include materialIconsTheme.theme(); body#hug-ngx { margin: 0; diff --git a/projects/core/src/styles/mixins/_icon-theme.scss b/projects/core/src/styles/mixins/_icon-theme.scss index 79ab0243..edcca502 100644 --- a/projects/core/src/styles/mixins/_icon-theme.scss +++ b/projects/core/src/styles/mixins/_icon-theme.scss @@ -1,6 +1,6 @@ @use '@angular/material' as mat; -@mixin icon-theme($theme) { +@mixin theme($theme) { $primary: map-get($theme, primary); $accent: map-get($theme, accent); $warn: map-get($theme, warn); diff --git a/projects/core/src/styles/mixins/loader-theme.scss b/projects/core/src/styles/mixins/_loader-theme.scss similarity index 98% rename from projects/core/src/styles/mixins/loader-theme.scss rename to projects/core/src/styles/mixins/_loader-theme.scss index 0804999c..1b014062 100644 --- a/projects/core/src/styles/mixins/loader-theme.scss +++ b/projects/core/src/styles/mixins/_loader-theme.scss @@ -1,6 +1,6 @@ @use '@angular/material' as mat; -@mixin loader-theme($theme) { +@mixin theme($theme) { $primary: map-get($theme, primary); .loader { diff --git a/projects/core/src/styles/mixins/material-icons-theme.scss b/projects/core/src/styles/mixins/_material-icons-theme.scss similarity index 97% rename from projects/core/src/styles/mixins/material-icons-theme.scss rename to projects/core/src/styles/mixins/_material-icons-theme.scss index b3ef98a9..3238bc63 100644 --- a/projects/core/src/styles/mixins/material-icons-theme.scss +++ b/projects/core/src/styles/mixins/_material-icons-theme.scss @@ -4,7 +4,7 @@ $fontFamily: "Material Symbols Outlined Variable"; -@mixin material-icons-theme { +@mixin theme { .mat-icon { font-family: $fontFamily; diff --git a/projects/core/src/styles/mixins/_menu-theme.scss b/projects/core/src/styles/mixins/_menu-theme.scss index faba5bf8..8c0e9b3e 100644 --- a/projects/core/src/styles/mixins/_menu-theme.scss +++ b/projects/core/src/styles/mixins/_menu-theme.scss @@ -1,6 +1,6 @@ @use "@angular/material" as mat; -@mixin menu-theme($theme) { +@mixin theme($theme) { $primary: map-get($theme, primary); .ngx-menu, diff --git a/projects/core/src/styles/mixins/_ngx-components-theme.scss b/projects/core/src/styles/mixins/_ngx-components-theme.scss deleted file mode 100644 index 783a2169..00000000 --- a/projects/core/src/styles/mixins/_ngx-components-theme.scss +++ /dev/null @@ -1,25 +0,0 @@ -@use '../../components/layout/layout-theme' as layoutTheme; -@use '../../components/search-container/search-container-theme' as searchContainerTheme; -@use '../../components/message-box/message-box-theme' as messageBoxTheme; -@use '../../components/message-box-dialog/message-box-dialog-theme' as messageBoxDialogTheme; -@use '../../components/splitter/splitter-theme' as splitterTheme; -@use '../../components/numeric-stepper/numeric-stepper-theme' as numericStepperTheme; -@use '../../components/user-card/user-card-theme' as userCardTheme; -@use './icon-theme' as iconTheme; -@use './menu-theme' as menuTheme; -@use '../../components/status/status-theme' as statusTheme; -@use '../../components/list-loader/list-loader-theme' as listLoaderTheme; - -@mixin all-component-themes($theme) { - @include layoutTheme.layout-theme($theme); - @include searchContainerTheme.search-container-theme($theme); - @include messageBoxTheme.message-box-theme($theme); - @include messageBoxDialogTheme.message-box-dialog-theme($theme); - @include splitterTheme.splitter-theme($theme); - @include numericStepperTheme.numeric-stepper-theme($theme); - @include userCardTheme.user-card-theme($theme); - @include iconTheme.icon-theme($theme); - @include menuTheme.menu-theme($theme); - @include statusTheme.status-theme($theme); - @include listLoaderTheme.list-loader-theme($theme); -} diff --git a/projects/layout/package.json b/projects/layout/package.json index 1b698d8c..ddbd66a1 100644 --- a/projects/layout/package.json +++ b/projects/layout/package.json @@ -20,6 +20,11 @@ "components" ], "sideEffects": false, + "exports": { + ".": { + "sass": "./_layout-theme.scss" + } + }, "scripts": { "lint": "eslint . --fix", "test": "ng test layout", diff --git a/projects/layout/src/_layout-theme.scss b/projects/layout/src/_layout-theme.scss index c3d1b166..f5d9f8f1 100644 --- a/projects/layout/src/_layout-theme.scss +++ b/projects/layout/src/_layout-theme.scss @@ -1,6 +1,6 @@ @use '@angular/material'as mat; -@mixin layout-theme($theme) { +@mixin theme($theme) { $primary: map-get($theme, primary); $accent: map-get($theme, accent); $background: map-get($theme, background); diff --git a/projects/list-loader/src/list-loader.component.ts b/projects/list-loader/src/list-loader.component.ts index 4d47cc8e..986db88a 100644 --- a/projects/list-loader/src/list-loader.component.ts +++ b/projects/list-loader/src/list-loader.component.ts @@ -1,4 +1,4 @@ -import { CommonModule } from '@angular/common'; +import { NgIf } from '@angular/common'; import { ChangeDetectionStrategy, Component, Input, ViewEncapsulation } from '@angular/core'; @Component({ @@ -9,7 +9,7 @@ import { ChangeDetectionStrategy, Component, Input, ViewEncapsulation } from '@a encapsulation: ViewEncapsulation.None, standalone: true, imports: [ - CommonModule + NgIf ] }) export class ListLoaderComponent { diff --git a/projects/message-box-dialog/package.json b/projects/message-box-dialog/package.json index 329a955e..4d1f9b07 100644 --- a/projects/message-box-dialog/package.json +++ b/projects/message-box-dialog/package.json @@ -20,6 +20,11 @@ "components" ], "sideEffects": false, + "exports": { + ".": { + "sass": "./_message-box-dialog-theme.scss" + } + }, "scripts": { "lint": "eslint . --fix", "test": "ng test message-box-dialog", diff --git a/projects/message-box-dialog/src/_message-box-dialog-theme.scss b/projects/message-box-dialog/src/_message-box-dialog-theme.scss index 3fa92f43..96479545 100644 --- a/projects/message-box-dialog/src/_message-box-dialog-theme.scss +++ b/projects/message-box-dialog/src/_message-box-dialog-theme.scss @@ -1,6 +1,6 @@ @use '@angular/material' as mat; -@mixin message-box-dialog-theme($theme) { +@mixin theme($theme) { $warn: map-get($theme, warn); .cdk-overlay-container { diff --git a/projects/search-container/package.json b/projects/search-container/package.json index 00964aec..b4921868 100644 --- a/projects/search-container/package.json +++ b/projects/search-container/package.json @@ -20,6 +20,11 @@ "components" ], "sideEffects": false, + "exports": { + ".": { + "sass": "./_search-container-theme.scss" + } + }, "scripts": { "lint": "eslint . --fix", "test": "ng test search-container", diff --git a/projects/search-container/src/_search-container-theme.scss b/projects/search-container/src/_search-container-theme.scss index 5eb46ff6..069a8897 100644 --- a/projects/search-container/src/_search-container-theme.scss +++ b/projects/search-container/src/_search-container-theme.scss @@ -1,6 +1,6 @@ @use '@angular/material' as mat; -@mixin search-container-theme($theme) { +@mixin theme($theme) { $primary: map-get($theme, primary); $accent: map-get($theme, accent); $background: map-get($theme, background); diff --git a/projects/sidenav/package.json b/projects/sidenav/package.json index e7348d99..edcbea99 100644 --- a/projects/sidenav/package.json +++ b/projects/sidenav/package.json @@ -20,6 +20,11 @@ "components" ], "sideEffects": false, + "exports": { + ".": { + "sass": "./_sidenav-theme.scss" + } + }, "scripts": { "lint": "eslint . --fix", "test": "ng test sidenav", diff --git a/projects/user-card/package.json b/projects/user-card/package.json index ed3be12c..227a74fe 100644 --- a/projects/user-card/package.json +++ b/projects/user-card/package.json @@ -20,6 +20,11 @@ "components" ], "sideEffects": false, + "exports": { + ".": { + "sass": "./_user-card-theme.scss" + } + }, "scripts": { "lint": "eslint . --fix", "test": "ng test user-card", diff --git a/projects/user-card/src/_user-card-theme.scss b/projects/user-card/src/_user-card-theme.scss index d5cd74b7..84e63b2f 100644 --- a/projects/user-card/src/_user-card-theme.scss +++ b/projects/user-card/src/_user-card-theme.scss @@ -1,6 +1,6 @@ @use '@angular/material' as mat; -@mixin user-card-theme($theme) { +@mixin theme($theme) { $foreground: map-get($theme, foreground); $background: map-get($theme, background); @@ -27,7 +27,7 @@ } } - .header-separator, + .header-separator, .header-initials { color: mat.get-color-from-palette(mat.$grey-palette, 400); } From c8ac2b49fa14b9201b64ef2db3c89cbc98ef9a24 Mon Sep 17 00:00:00 2001 From: Serge Date: Thu, 4 Jul 2024 12:29:57 +0200 Subject: [PATCH 2/2] fix: overlay-demo.component and add demo --- .vscode/settings.json | 2 +- projects/demo-app/src/app/app.component.html | 32 ++++- projects/demo-app/src/app/app.component.scss | 33 +++++ .../demo-app/src/app/app.component.spec.ts | 30 ----- projects/demo-app/src/app/app.component.ts | 40 +++++- projects/demo-app/src/app/app.routes.ts | 6 +- .../app/overlay/overlay-demo.component.html | 123 ++++++++++++++++++ .../app/overlay/overlay-demo.component.scss | 30 +++++ .../src/app/overlay/overlay-demo.component.ts | 55 ++++++++ projects/demo-app/src/main.ts | 7 +- projects/demo-app/src/styles.scss | 1 + projects/overlay/package.json | 2 +- projects/overlay/src/overlay.component.ts | 38 ++++-- 13 files changed, 345 insertions(+), 54 deletions(-) delete mode 100644 projects/demo-app/src/app/app.component.spec.ts create mode 100644 projects/demo-app/src/app/overlay/overlay-demo.component.html create mode 100644 projects/demo-app/src/app/overlay/overlay-demo.component.scss create mode 100644 projects/demo-app/src/app/overlay/overlay-demo.component.ts diff --git a/.vscode/settings.json b/.vscode/settings.json index d4cfe13c..bfdf84c8 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -23,7 +23,7 @@ "editor.defaultFormatter": "vscode.html-language-features" }, "[scss]": { - "editor.defaultFormatter": "sibiraj-s.vscode-scss-formatter" + "editor.defaultFormatter": "HookyQR.beautify" }, "npm.exclude": "**/{dist,tmp}{,/**}", "npm.scriptExplorerExclude": [ diff --git a/projects/demo-app/src/app/app.component.html b/projects/demo-app/src/app/app.component.html index 0f5bda97..b0ecf3fc 100644 --- a/projects/demo-app/src/app/app.component.html +++ b/projects/demo-app/src/app/app.component.html @@ -1 +1,31 @@ -Hello World +
+ + +

@hug/ngx-components Demo

+ + + + + + + menu + Overlay + + + + + + + + +
\ No newline at end of file diff --git a/projects/demo-app/src/app/app.component.scss b/projects/demo-app/src/app/app.component.scss index e69de29b..40d009e5 100644 --- a/projects/demo-app/src/app/app.component.scss +++ b/projects/demo-app/src/app/app.component.scss @@ -0,0 +1,33 @@ +:host { + .demo-container { + display: flex; + flex-direction: column; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + } + + .demo-is-mobile .demo-toolbar { + position: fixed; + /* Make sure the toolbar will stay on top of the content as it scrolls past. */ + z-index: 2; + } + + h1.demo-app-name { + margin-left: 8px; + } + + .demo-sidenav-container { + /* When the sidenav is not fixed, stretch the sidenav container to fill the available space. This + causes `` to act as our scrolling element for desktop layouts. */ + flex: 1; + } + + .demo-is-mobile .demo-sidenav-container { + /* When the sidenav is fixed, don't constrain the height of the sidenav container. This allows the + `` to be our scrolling element for mobile layouts. */ + flex: 1 0 auto; + } +} diff --git a/projects/demo-app/src/app/app.component.spec.ts b/projects/demo-app/src/app/app.component.spec.ts deleted file mode 100644 index d747e171..00000000 --- a/projects/demo-app/src/app/app.component.spec.ts +++ /dev/null @@ -1,30 +0,0 @@ -import { TestBed } from '@angular/core/testing'; - -import { AppComponent } from './app.component'; - -describe('AppComponent', () => { - beforeEach(async () => { - await TestBed.configureTestingModule({ - imports: [AppComponent] - }).compileComponents(); - }); - - it('should create the app', () => { - const fixture = TestBed.createComponent(AppComponent); - const app = fixture.componentInstance; - expect(app).toBeTruthy(); - }); - - it('should have the \'demo-app\' title property', () => { - const fixture = TestBed.createComponent(AppComponent); - const app = fixture.componentInstance; - expect(app.title).toEqual('demo-app'); - }); - - it('should render example', () => { - const fixture = TestBed.createComponent(AppComponent); - fixture.detectChanges(); - const compiled = fixture.nativeElement as HTMLElement; - expect(compiled.querySelector('b')?.textContent).toContain('Hello World'); - }); -}); diff --git a/projects/demo-app/src/app/app.component.ts b/projects/demo-app/src/app/app.component.ts index 81e6cd67..6b247cbb 100644 --- a/projects/demo-app/src/app/app.component.ts +++ b/projects/demo-app/src/app/app.component.ts @@ -1,14 +1,44 @@ -import { ChangeDetectionStrategy, Component } from '@angular/core'; +import { MediaMatcher } from '@angular/cdk/layout'; +import { NgFor, NgIf } from '@angular/common'; +import { ChangeDetectionStrategy, ChangeDetectorRef, Component, inject, OnDestroy } from '@angular/core'; +import { MatIconModule } from '@angular/material/icon'; +import { MatListModule } from '@angular/material/list'; +import { MatSidenavModule } from '@angular/material/sidenav'; +import { MatToolbarModule } from '@angular/material/toolbar'; import { RouterOutlet } from '@angular/router'; + @Component({ selector: 'app-root', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, - imports: [RouterOutlet], templateUrl: './app.component.html', - styleUrls: ['./app.component.scss'] + styleUrls: ['./app.component.scss'], + imports: [ + MatIconModule, + MatListModule, + MatSidenavModule, + MatToolbarModule, + NgIf, + NgFor, + RouterOutlet + ] }) -export class AppComponent { - public title = 'demo-app'; +export class AppComponent implements OnDestroy { + protected mobileQuery: MediaQueryList; + + private _mobileQueryListener: () => void; + + private changeDetectorRef = inject(ChangeDetectorRef); + private media = inject(MediaMatcher); + + public constructor() { + this.mobileQuery = this.media.matchMedia('(max-width: 600px)'); + this._mobileQueryListener = (): void => this.changeDetectorRef.detectChanges(); + this.mobileQuery.addListener(this._mobileQueryListener); + } + + public ngOnDestroy(): void { + this.mobileQuery.removeListener(this._mobileQueryListener); + } } diff --git a/projects/demo-app/src/app/app.routes.ts b/projects/demo-app/src/app/app.routes.ts index dc39edb5..7ce24d14 100644 --- a/projects/demo-app/src/app/app.routes.ts +++ b/projects/demo-app/src/app/app.routes.ts @@ -1,3 +1,7 @@ import { Routes } from '@angular/router'; -export const routes: Routes = []; +export const appRoutes: Routes = [ + { path: '', redirectTo: 'overlay', pathMatch: 'full' }, + { path: 'overlay', loadComponent: () => import('./overlay/overlay-demo.component').then(m => m.OverlayDemoComponent), data: { title: 'Overlay' } }, + { path: '**', redirectTo: 'overlay', pathMatch: 'prefix' } +]; diff --git a/projects/demo-app/src/app/overlay/overlay-demo.component.html b/projects/demo-app/src/app/overlay/overlay-demo.component.html new file mode 100644 index 00000000..77892800 --- /dev/null +++ b/projects/demo-app/src/app/overlay/overlay-demo.component.html @@ -0,0 +1,123 @@ + + + + + + + TODO + + +
+ +
+
    +
  • + delete_sweep Context menu +
    • +
  • + content_copy Dupliquer +
    • +
  • + edit Editer +
    • +
+
+ + + Overlay + + +
+
    +
  • + delete_sweep Supprimer +
    • +
  • + content_copy Dupliquer +
    • +
  • + edit Editer +
    • +
+
+ + +
+
+

You clicked on: {{ selected }}

+ + + + + + +
+ +
+ +
+
+

Clicking these will navigate:

+ + + + + +
+ + {{ item.text }} + +
+ +
+
+

+ With buttons position before +

+ + + + + +
+ +
+ +
+ +
+

+ With ul/li, position top +

+ + + +
+
+ + +
\ No newline at end of file diff --git a/projects/demo-app/src/app/overlay/overlay-demo.component.scss b/projects/demo-app/src/app/overlay/overlay-demo.component.scss new file mode 100644 index 00000000..a98e8d8f --- /dev/null +++ b/projects/demo-app/src/app/overlay/overlay-demo.component.scss @@ -0,0 +1,30 @@ +overlay-demo { + #demo-deja-menu { + display: flex; + flex-flow: row; + + .menu-section { + width: 300px; + margin: 0.5rem; + } + + .end-icon { + align-items: flex-end; + } + } +} + +.overlay-container { + .deja-menu-content { + &#anchorMenu { + .menu-item { + white-space: nowrap; + padding: 0.5rem 2rem; + } + } + + .mat-icon { + margin-right: 0.5rem; + } + } +} diff --git a/projects/demo-app/src/app/overlay/overlay-demo.component.ts b/projects/demo-app/src/app/overlay/overlay-demo.component.ts new file mode 100644 index 00000000..8506dc0e --- /dev/null +++ b/projects/demo-app/src/app/overlay/overlay-demo.component.ts @@ -0,0 +1,55 @@ +import { CommonModule } from '@angular/common'; +import { ChangeDetectionStrategy, Component, ViewChild, ViewEncapsulation } from '@angular/core'; +import { FormsModule } from '@angular/forms'; +import { MatButtonModule } from '@angular/material/button'; +import { MatCardModule } from '@angular/material/card'; +import { MatIconModule } from '@angular/material/icon'; +import { MatTabsModule } from '@angular/material/tabs'; +import { MatToolbarModule } from '@angular/material/toolbar'; +import { OverlayComponent } from '@hug/ngx-overlay'; + + +@Component({ + encapsulation: ViewEncapsulation.None, + changeDetection: ChangeDetectionStrategy.OnPush, + selector: 'app-overlay-demo', + styleUrls: ['./overlay-demo.component.scss'], + templateUrl: './overlay-demo.component.html', + standalone: true, + imports: [ + CommonModule, + OverlayComponent, + FormsModule, + MatButtonModule, + MatCardModule, + MatIconModule, + MatTabsModule, + MatToolbarModule + ] +}) +export class OverlayDemoComponent { + @ViewChild('contextMenu') + private contextMenu?: OverlayComponent; + + public selected = ''; + public items = [ + { text: 'Refresh' }, + { text: 'Settings' }, + { text: 'Help', disabled: true }, + { text: 'Sign Out' } + ]; + + public tabIndex = 1; + + public select(text: string): void { + this.selected = text; + } + + public onContextMenu(event: MouseEvent): boolean { + const parent = event.currentTarget as HTMLElement; + const parentRect = parent.getBoundingClientRect(); + this.contextMenu?.show(event.pageX - parentRect.left, event.pageY - parentRect.top); + event.preventDefault(); + return false; + } +} diff --git a/projects/demo-app/src/main.ts b/projects/demo-app/src/main.ts index 4a61f92e..c68b56b6 100644 --- a/projects/demo-app/src/main.ts +++ b/projects/demo-app/src/main.ts @@ -1,8 +1,10 @@ import { enableProdMode } from '@angular/core'; import { bootstrapApplication } from '@angular/platform-browser'; import { provideAnimations } from '@angular/platform-browser/animations'; +import { PreloadAllModules, provideRouter, withPreloading } from '@angular/router'; import { AppComponent } from './app/app.component'; +import { appRoutes } from './app/app.routes'; import { environment } from './environments/environment'; if (environment.production) { @@ -10,5 +12,8 @@ if (environment.production) { } bootstrapApplication(AppComponent, { - providers: [provideAnimations()] + providers: [ + provideAnimations(), + provideRouter(appRoutes, withPreloading(PreloadAllModules)) + ] }).catch(err => console.error(err)); diff --git a/projects/demo-app/src/styles.scss b/projects/demo-app/src/styles.scss index c99331b8..472dc441 100644 --- a/projects/demo-app/src/styles.scss +++ b/projects/demo-app/src/styles.scss @@ -44,6 +44,7 @@ html, body { height: 100%; } + body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; diff --git a/projects/overlay/package.json b/projects/overlay/package.json index a0732d58..c319d89a 100644 --- a/projects/overlay/package.json +++ b/projects/overlay/package.json @@ -1,6 +1,6 @@ { "name": "@hug/ngx-overlay", - "version": "1.1.2", + "version": "1.1.3", "description": "HUG Angular - overlay component", "homepage": "https://github.com/dsi-hug/ngx-components", "license": "GPL-3.0-only", diff --git a/projects/overlay/src/overlay.component.ts b/projects/overlay/src/overlay.component.ts index 4a06e4b4..84e7b18c 100644 --- a/projects/overlay/src/overlay.component.ts +++ b/projects/overlay/src/overlay.component.ts @@ -1,9 +1,9 @@ import { BooleanInput, coerceBooleanProperty } from '@angular/cdk/coercion'; -import { CdkConnectedOverlay, CdkOverlayOrigin, OverlayContainer, OverlayModule } from '@angular/cdk/overlay'; +import { CdkConnectedOverlay, CdkOverlayOrigin, OverlayContainer, OverlayModule, OverlayRef } from '@angular/cdk/overlay'; import { CommonModule } from '@angular/common'; import { ChangeDetectionStrategy, Component, ContentChild, ElementRef, Input, OnChanges, SimpleChanges, TemplateRef, ViewChild, ViewEncapsulation } from '@angular/core'; import { MediaService } from '@hug/ngx-core'; -import { BehaviorSubject, combineLatestWith, delay, distinctUntilChanged, EMPTY, map, mergeWith, Observable, of, ReplaySubject, shareReplay, startWith, Subject, switchMap } from 'rxjs'; +import { BehaviorSubject, combineLatestWith, distinctUntilChanged, EMPTY, map, mergeWith, Observable, of, ReplaySubject, shareReplay, startWith, Subject, switchMap, take } from 'rxjs'; import { defaultConnectionPositionPair, OverlayConnectionPositionPair } from './connection-position-pair'; @@ -50,11 +50,18 @@ export class OverlayComponent implements OnChanges { @ContentChild('content') protected contentTemplate?: TemplateRef; /** Overlay pane containing the options. */ - @ViewChild(CdkConnectedOverlay, { static: true }) private overlay?: CdkConnectedOverlay; + @ViewChild(CdkConnectedOverlay) protected set overlay(value: CdkConnectedOverlay | undefined) { + if (!value) { + return; + } + + this.overlayRef$.next(value.overlayRef); + } public readonly isVisible$: Observable; protected overlayInfos$: Observable; + protected overlayRef$ = new ReplaySubject(1); private show$ = new ReplaySubject(1); private hide$ = new Subject(); @@ -115,19 +122,22 @@ export class OverlayComponent implements OnChanges { const info$ = this.ownerElement$.pipe( combineLatestWith(isMobile$), - map(([ownerElement, isMobile]) => ({ - offsetX: showParams.offsetX && +showParams.offsetX || 0, - offsetY: showParams.offsetY && +showParams.offsetY || 0, - origin: new CdkOverlayOrigin(new ElementRef((isMobile && document.body) ?? showParams.event?.target ?? ownerElement ?? this.elementRef.nativeElement)), - width: isMobile ? this.widthForMobile : this.width, - context: showParams.context - } as OverlayInfos)) + map(([ownerElement, isMobile]) => { + const mobileElement = isMobile ? document.body : undefined; + return { + offsetX: showParams.offsetX && +showParams.offsetX || 0, + offsetY: showParams.offsetY && +showParams.offsetY || 0, + origin: new CdkOverlayOrigin(new ElementRef(mobileElement ?? showParams.event?.target ?? ownerElement ?? this.elementRef.nativeElement)), + width: isMobile ? this.widthForMobile : this.width, + context: showParams.context + } as OverlayInfos; + }) ); - const updatePosition$ = info$.pipe( - delay(1), - switchMap(() => { - this.overlay?.overlayRef?.updatePosition(); + const updatePosition$ = this.overlayRef$.pipe( + take(1), + switchMap(overlayRef => { + overlayRef.updatePosition(); return EMPTY; }) );