From 5139486cf4f3aefd8aba19fec1ec6608d85a8fd7 Mon Sep 17 00:00:00 2001 From: Gery Hirschfeld Date: Tue, 6 Dec 2022 10:11:12 +0100 Subject: [PATCH 1/5] chore(angular): update stage --- angular/src/app/app.component.html | 10 ++-------- angular/src/polyfills.ts | 4 ++-- 2 files changed, 4 insertions(+), 10 deletions(-) diff --git a/angular/src/app/app.component.html b/angular/src/app/app.component.html index f409fe5..10a424d 100644 --- a/angular/src/app/app.component.html +++ b/angular/src/app/app.component.html @@ -1,15 +1,9 @@
- - - Demo - + Angular Demo - - +
{{ diff --git a/angular/src/polyfills.ts b/angular/src/polyfills.ts index 429bb9e..9635091 100644 --- a/angular/src/polyfills.ts +++ b/angular/src/polyfills.ts @@ -41,12 +41,12 @@ * (window as any).__Zone_enable_cross_context_check = true; * */ +(window as any).__Zone_disable_customElements = true; /*************************************************************************************************** * Zone JS is required by default for Angular itself. */ -import 'zone.js'; // Included with Angular CLI. - +import 'zone.js'; // Included with Angular CLI. /*************************************************************************************************** * APPLICATION IMPORTS From 2aa70c272e60287221b086d49f4c5102e1c191bb Mon Sep 17 00:00:00 2001 From: Gery Hirschfeld Date: Wed, 14 Dec 2022 07:49:58 +0100 Subject: [PATCH 2/5] before v12 --- angular/package-lock.json | 149 ++++++++++++++------------ angular/package.json | 2 +- angular/src/app/app.component.html | 68 +++++++----- angular/src/app/app.component.scss | 1 + angular/src/app/app.component.ts | 39 +------ angular/src/app/app.componentold.html | 71 ++++++++++++ angular/src/styles.scss | 7 +- 7 files changed, 203 insertions(+), 134 deletions(-) create mode 100644 angular/src/app/app.componentold.html diff --git a/angular/package-lock.json b/angular/package-lock.json index 7a60750..9e4b50a 100644 --- a/angular/package-lock.json +++ b/angular/package-lock.json @@ -17,7 +17,7 @@ "@angular/platform-browser": "~13.2.0", "@angular/platform-browser-dynamic": "~13.2.0", "@angular/router": "~13.2.0", - "@baloise/design-system-components-angular": "^11.0.0", + "@baloise/design-system-components-angular": "^11.0.18", "@baloise/web-app-unsupported-browsers": "^3.0.0", "@baloise/web-app-validators-angular": "^3.6.1", "rxjs": "~7.5.0", @@ -2426,21 +2426,22 @@ } }, "node_modules/@baloise/design-system-components": { - "version": "11.0.0", - "resolved": "https://registry.npmjs.org/@baloise/design-system-components/-/design-system-components-11.0.0.tgz", - "integrity": "sha512-gHQWIXYj2nEjRVYANhwn4UHvY3IGGCURjzL5z48+aupJvBlzQpP2Q2a0iR3/gRvhSkzVTOXU8k1WPf8jTLK1Jw==", - "dependencies": { - "@baloise/design-system-css": "11.0.0", - "@baloise/design-system-fonts": "11.0.0", - "@baloise/design-system-icons": "11.0.0", - "@baloise/design-system-tokens": "11.0.0", - "@baloise/web-app-utils": "~3.6.1", + "version": "11.0.18", + "resolved": "https://registry.npmjs.org/@baloise/design-system-components/-/design-system-components-11.0.18.tgz", + "integrity": "sha512-m/BzHP8Eucdf6IEyvk5zWOyHZqdzij2urkiclIUDaQ6tvA8EWOWPzoa0/NotXdnHAIjQc6dyOoQaq9NWmOHOyw==", + "dependencies": { + "@baloise/design-system-css": "11.0.18", + "@baloise/design-system-fonts": "11.0.18", + "@baloise/design-system-icons": "11.0.18", + "@baloise/design-system-tokens": "11.0.18", + "@baloise/web-app-utils": "^3.8.0", "@popperjs/core": "~2.11.4", "@stencil/core": "~2.16.1", "big.js": "~6.2.1", "bulma": "~0.9.3", "date-fns": "~2.29.1", "filesize.js": "~2.0.0", + "hammerjs": "^2.0.8", "lodash.camelcase": "~4.3.0", "lodash.capitalize": "~4.2.1", "lodash.isarray": "~4.0.0", @@ -2456,11 +2457,11 @@ } }, "node_modules/@baloise/design-system-components-angular": { - "version": "11.0.0", - "resolved": "https://registry.npmjs.org/@baloise/design-system-components-angular/-/design-system-components-angular-11.0.0.tgz", - "integrity": "sha512-eGlml1kMGjQJNtkt6aYpEbgT7FvUGQ2Ov0kYbVeFLXa2C6fuxoHBlX3Rcm8bGStR9BPU5iu3y6Hz7ID1KNxYuA==", + "version": "11.0.18", + "resolved": "https://registry.npmjs.org/@baloise/design-system-components-angular/-/design-system-components-angular-11.0.18.tgz", + "integrity": "sha512-79CLerrBTWtCmpa5Mx5bQ45eDp+b7660/94F7CLeiHGxUnt3F+9IyiXJgg5vLOeF/L2z8ZNPqGD/ds9Ofxi6og==", "dependencies": { - "@baloise/design-system-components": "11.0.0", + "@baloise/design-system-components": "11.0.18", "tslib": "^2.2.0" }, "peerDependencies": { @@ -2473,28 +2474,28 @@ } }, "node_modules/@baloise/design-system-css": { - "version": "11.0.0", - "resolved": "https://registry.npmjs.org/@baloise/design-system-css/-/design-system-css-11.0.0.tgz", - "integrity": "sha512-Z43GgDqdcMOP3h+ArvU11zNelIUoXAJtH+CQJrjUWtgkPL0GjAK4Gdjismwof8KMN9tZm+oOO7m7B4AtomzeGA==", + "version": "11.0.18", + "resolved": "https://registry.npmjs.org/@baloise/design-system-css/-/design-system-css-11.0.18.tgz", + "integrity": "sha512-WH8QX31UYazTEBLgWEwTQUfs+vSxKkJKiCIbx/ibqHZKFs6f88AKlO7/WAs9K/3l9vGkXzD7zLGtyD4TPHM4kw==", "dependencies": { - "@baloise/design-system-fonts": "11.0.0", - "@baloise/design-system-tokens": "11.0.0" + "@baloise/design-system-fonts": "11.0.18", + "@baloise/design-system-tokens": "11.0.18" } }, "node_modules/@baloise/design-system-fonts": { - "version": "11.0.0", - "resolved": "https://registry.npmjs.org/@baloise/design-system-fonts/-/design-system-fonts-11.0.0.tgz", - "integrity": "sha512-bi+YgacjQ2SDHj3uNmzyNxIDFyuvYZLkEPm+h7MtQtJ6MX8wlMhccrKOSM2/p+kMqczj+43BZFLeWiDa4uJttA==" + "version": "11.0.18", + "resolved": "https://registry.npmjs.org/@baloise/design-system-fonts/-/design-system-fonts-11.0.18.tgz", + "integrity": "sha512-4vwZZcKqC0TqdFdh/Y2T3/8t/+vWHXp03ZoAX6vVzPqu9eoNQD/UYGq91S4mrPmBz4m/AQ2PV1fzBZmlgpipRg==" }, "node_modules/@baloise/design-system-icons": { - "version": "11.0.0", - "resolved": "https://registry.npmjs.org/@baloise/design-system-icons/-/design-system-icons-11.0.0.tgz", - "integrity": "sha512-8DiXo6mA74iiYvrxFtcwYz3Ob3mRuA+ngFOOskqYw6ijNj6q5wL4JWXTXoi1oEEx0M/P5W1UxEb7Cb7cM2W7Sg==" + "version": "11.0.18", + "resolved": "https://registry.npmjs.org/@baloise/design-system-icons/-/design-system-icons-11.0.18.tgz", + "integrity": "sha512-u7Jz59GrAGVUwqVN6XQQLi6b0v/0sAOwkkeoQtO/reF+kKZLBxD+ZDiB7MFhZs1VxlF4E1VOTkD9f6pTVHNsCg==" }, "node_modules/@baloise/design-system-tokens": { - "version": "11.0.0", - "resolved": "https://registry.npmjs.org/@baloise/design-system-tokens/-/design-system-tokens-11.0.0.tgz", - "integrity": "sha512-lsEI4Dlyp9LXrxMbFhZV3k5+mBAA/y+HJBkCYY+5AVVbjBLJlqmFbxpFAKteH9UAMWk1NfTmbzeLxLnA54IiJQ==" + "version": "11.0.18", + "resolved": "https://registry.npmjs.org/@baloise/design-system-tokens/-/design-system-tokens-11.0.18.tgz", + "integrity": "sha512-dQojhdDPHBUtTnj95EHuuS/LWdzw1IPJzDGN0/kBPq5xZlIDge2WWoomXvZD/TNsDja5tWjvSFdvUpY31FLD8w==" }, "node_modules/@baloise/web-app-unsupported-browsers": { "version": "3.6.2", @@ -2503,9 +2504,9 @@ "hasInstallScript": true }, "node_modules/@baloise/web-app-utils": { - "version": "3.6.2", - "resolved": "https://registry.npmjs.org/@baloise/web-app-utils/-/web-app-utils-3.6.2.tgz", - "integrity": "sha512-iz8vo/h6zL2mWHG6B72c9SRVF0aFP/WVY62PNUXGp063+iRm0EE/6h0lEAKd7IYKI3hNcCypd9eie29lL0Bqog==", + "version": "3.8.0", + "resolved": "https://registry.npmjs.org/@baloise/web-app-utils/-/web-app-utils-3.8.0.tgz", + "integrity": "sha512-xqEfk9rX3/VdyObrEH3HFnq2zjvYMgA/C3Sok5zLYeyd2Ec/wHwAvp9N9gy7nW5oWbIuUrpQUjCux/xwMer+kQ==", "dependencies": { "date-fns": "^2.28.0", "lodash.camelcase": "^4.3.0", @@ -3026,9 +3027,9 @@ "dev": true }, "node_modules/@types/lodash": { - "version": "4.14.186", - "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.186.tgz", - "integrity": "sha512-eHcVlLXP0c2FlMPm56ITode2AgLMSa6aJ05JTTbYbI+7EMkCEE5qk2E41d5g2lCVTqRe0GnnRFurmlCsDODrPw==" + "version": "4.14.191", + "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.191.tgz", + "integrity": "sha512-BdZ5BCCvho3EIXw6wUCXHe7rS53AIDPLE+JzwgT+OsJk53oBfbSmZZ7CX4VaRoN78N+TJpFi9QPlfIVNmJYWxQ==" }, "node_modules/@types/lodash.clonedeep": { "version": "4.5.7", @@ -6430,6 +6431,14 @@ "integrity": "sha512-9ByhssR2fPVsNZj478qUUbKfmL0+t5BDVyjShtyZZLiK7ZDAArFFfopyOTj0M05wE2tJPisA4iTnnXl2YoPvOA==", "dev": true }, + "node_modules/hammerjs": { + "version": "2.0.8", + "resolved": "https://registry.npmjs.org/hammerjs/-/hammerjs-2.0.8.tgz", + "integrity": "sha512-tSQXBXS/MWQOn/RKckawJ61vvsDpCom87JgxiYdGwHdOa0ht0vzUWDlfioofFCRU0L+6NGDt6XzbgoJvZkMeRQ==", + "engines": { + "node": ">=0.8.0" + } + }, "node_modules/handle-thing": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/handle-thing/-/handle-thing-2.0.1.tgz", @@ -14181,21 +14190,22 @@ } }, "@baloise/design-system-components": { - "version": "11.0.0", - "resolved": "https://registry.npmjs.org/@baloise/design-system-components/-/design-system-components-11.0.0.tgz", - "integrity": "sha512-gHQWIXYj2nEjRVYANhwn4UHvY3IGGCURjzL5z48+aupJvBlzQpP2Q2a0iR3/gRvhSkzVTOXU8k1WPf8jTLK1Jw==", - "requires": { - "@baloise/design-system-css": "11.0.0", - "@baloise/design-system-fonts": "11.0.0", - "@baloise/design-system-icons": "11.0.0", - "@baloise/design-system-tokens": "11.0.0", - "@baloise/web-app-utils": "~3.6.1", + "version": "11.0.18", + "resolved": "https://registry.npmjs.org/@baloise/design-system-components/-/design-system-components-11.0.18.tgz", + "integrity": "sha512-m/BzHP8Eucdf6IEyvk5zWOyHZqdzij2urkiclIUDaQ6tvA8EWOWPzoa0/NotXdnHAIjQc6dyOoQaq9NWmOHOyw==", + "requires": { + "@baloise/design-system-css": "11.0.18", + "@baloise/design-system-fonts": "11.0.18", + "@baloise/design-system-icons": "11.0.18", + "@baloise/design-system-tokens": "11.0.18", + "@baloise/web-app-utils": "^3.8.0", "@popperjs/core": "~2.11.4", "@stencil/core": "~2.16.1", "big.js": "~6.2.1", "bulma": "~0.9.3", "date-fns": "~2.29.1", "filesize.js": "~2.0.0", + "hammerjs": "^2.0.8", "lodash.camelcase": "~4.3.0", "lodash.capitalize": "~4.2.1", "lodash.isarray": "~4.0.0", @@ -14211,37 +14221,37 @@ } }, "@baloise/design-system-components-angular": { - "version": "11.0.0", - "resolved": "https://registry.npmjs.org/@baloise/design-system-components-angular/-/design-system-components-angular-11.0.0.tgz", - "integrity": "sha512-eGlml1kMGjQJNtkt6aYpEbgT7FvUGQ2Ov0kYbVeFLXa2C6fuxoHBlX3Rcm8bGStR9BPU5iu3y6Hz7ID1KNxYuA==", + "version": "11.0.18", + "resolved": "https://registry.npmjs.org/@baloise/design-system-components-angular/-/design-system-components-angular-11.0.18.tgz", + "integrity": "sha512-79CLerrBTWtCmpa5Mx5bQ45eDp+b7660/94F7CLeiHGxUnt3F+9IyiXJgg5vLOeF/L2z8ZNPqGD/ds9Ofxi6og==", "requires": { - "@baloise/design-system-components": "11.0.0", + "@baloise/design-system-components": "11.0.18", "tslib": "^2.2.0" } }, "@baloise/design-system-css": { - "version": "11.0.0", - "resolved": "https://registry.npmjs.org/@baloise/design-system-css/-/design-system-css-11.0.0.tgz", - "integrity": "sha512-Z43GgDqdcMOP3h+ArvU11zNelIUoXAJtH+CQJrjUWtgkPL0GjAK4Gdjismwof8KMN9tZm+oOO7m7B4AtomzeGA==", + "version": "11.0.18", + "resolved": "https://registry.npmjs.org/@baloise/design-system-css/-/design-system-css-11.0.18.tgz", + "integrity": "sha512-WH8QX31UYazTEBLgWEwTQUfs+vSxKkJKiCIbx/ibqHZKFs6f88AKlO7/WAs9K/3l9vGkXzD7zLGtyD4TPHM4kw==", "requires": { - "@baloise/design-system-fonts": "11.0.0", - "@baloise/design-system-tokens": "11.0.0" + "@baloise/design-system-fonts": "11.0.18", + "@baloise/design-system-tokens": "11.0.18" } }, "@baloise/design-system-fonts": { - "version": "11.0.0", - "resolved": "https://registry.npmjs.org/@baloise/design-system-fonts/-/design-system-fonts-11.0.0.tgz", - "integrity": "sha512-bi+YgacjQ2SDHj3uNmzyNxIDFyuvYZLkEPm+h7MtQtJ6MX8wlMhccrKOSM2/p+kMqczj+43BZFLeWiDa4uJttA==" + "version": "11.0.18", + "resolved": "https://registry.npmjs.org/@baloise/design-system-fonts/-/design-system-fonts-11.0.18.tgz", + "integrity": "sha512-4vwZZcKqC0TqdFdh/Y2T3/8t/+vWHXp03ZoAX6vVzPqu9eoNQD/UYGq91S4mrPmBz4m/AQ2PV1fzBZmlgpipRg==" }, "@baloise/design-system-icons": { - "version": "11.0.0", - "resolved": "https://registry.npmjs.org/@baloise/design-system-icons/-/design-system-icons-11.0.0.tgz", - "integrity": "sha512-8DiXo6mA74iiYvrxFtcwYz3Ob3mRuA+ngFOOskqYw6ijNj6q5wL4JWXTXoi1oEEx0M/P5W1UxEb7Cb7cM2W7Sg==" + "version": "11.0.18", + "resolved": "https://registry.npmjs.org/@baloise/design-system-icons/-/design-system-icons-11.0.18.tgz", + "integrity": "sha512-u7Jz59GrAGVUwqVN6XQQLi6b0v/0sAOwkkeoQtO/reF+kKZLBxD+ZDiB7MFhZs1VxlF4E1VOTkD9f6pTVHNsCg==" }, "@baloise/design-system-tokens": { - "version": "11.0.0", - "resolved": "https://registry.npmjs.org/@baloise/design-system-tokens/-/design-system-tokens-11.0.0.tgz", - "integrity": "sha512-lsEI4Dlyp9LXrxMbFhZV3k5+mBAA/y+HJBkCYY+5AVVbjBLJlqmFbxpFAKteH9UAMWk1NfTmbzeLxLnA54IiJQ==" + "version": "11.0.18", + "resolved": "https://registry.npmjs.org/@baloise/design-system-tokens/-/design-system-tokens-11.0.18.tgz", + "integrity": "sha512-dQojhdDPHBUtTnj95EHuuS/LWdzw1IPJzDGN0/kBPq5xZlIDge2WWoomXvZD/TNsDja5tWjvSFdvUpY31FLD8w==" }, "@baloise/web-app-unsupported-browsers": { "version": "3.6.2", @@ -14249,9 +14259,9 @@ "integrity": "sha512-tTxMk0Ou22I/6lHLaik5NiL2ztkN2v82dWnVV0zgT4rPVs7eeSSXhuvdsWXb8EUF+WTjdiMXN7UD/K5jtpg1eg==" }, "@baloise/web-app-utils": { - "version": "3.6.2", - "resolved": "https://registry.npmjs.org/@baloise/web-app-utils/-/web-app-utils-3.6.2.tgz", - "integrity": "sha512-iz8vo/h6zL2mWHG6B72c9SRVF0aFP/WVY62PNUXGp063+iRm0EE/6h0lEAKd7IYKI3hNcCypd9eie29lL0Bqog==", + "version": "3.8.0", + "resolved": "https://registry.npmjs.org/@baloise/web-app-utils/-/web-app-utils-3.8.0.tgz", + "integrity": "sha512-xqEfk9rX3/VdyObrEH3HFnq2zjvYMgA/C3Sok5zLYeyd2Ec/wHwAvp9N9gy7nW5oWbIuUrpQUjCux/xwMer+kQ==", "requires": { "date-fns": "^2.28.0", "lodash.camelcase": "^4.3.0", @@ -14677,9 +14687,9 @@ "dev": true }, "@types/lodash": { - "version": "4.14.186", - "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.186.tgz", - "integrity": "sha512-eHcVlLXP0c2FlMPm56ITode2AgLMSa6aJ05JTTbYbI+7EMkCEE5qk2E41d5g2lCVTqRe0GnnRFurmlCsDODrPw==" + "version": "4.14.191", + "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.191.tgz", + "integrity": "sha512-BdZ5BCCvho3EIXw6wUCXHe7rS53AIDPLE+JzwgT+OsJk53oBfbSmZZ7CX4VaRoN78N+TJpFi9QPlfIVNmJYWxQ==" }, "@types/lodash.clonedeep": { "version": "4.5.7", @@ -17215,6 +17225,11 @@ "integrity": "sha512-9ByhssR2fPVsNZj478qUUbKfmL0+t5BDVyjShtyZZLiK7ZDAArFFfopyOTj0M05wE2tJPisA4iTnnXl2YoPvOA==", "dev": true }, + "hammerjs": { + "version": "2.0.8", + "resolved": "https://registry.npmjs.org/hammerjs/-/hammerjs-2.0.8.tgz", + "integrity": "sha512-tSQXBXS/MWQOn/RKckawJ61vvsDpCom87JgxiYdGwHdOa0ht0vzUWDlfioofFCRU0L+6NGDt6XzbgoJvZkMeRQ==" + }, "handle-thing": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/handle-thing/-/handle-thing-2.0.1.tgz", diff --git a/angular/package.json b/angular/package.json index 8ac1bc9..3c3682f 100644 --- a/angular/package.json +++ b/angular/package.json @@ -20,7 +20,7 @@ "@angular/platform-browser": "~13.2.0", "@angular/platform-browser-dynamic": "~13.2.0", "@angular/router": "~13.2.0", - "@baloise/design-system-components-angular": "^11.0.0", + "@baloise/design-system-components-angular": "^11.0.18", "@baloise/web-app-unsupported-browsers": "^3.0.0", "@baloise/web-app-validators-angular": "^3.6.1", "rxjs": "~7.5.0", diff --git a/angular/src/app/app.component.html b/angular/src/app/app.component.html index 10a424d..4e31c57 100644 --- a/angular/src/app/app.component.html +++ b/angular/src/app/app.component.html @@ -1,16 +1,14 @@
- Angular Demo + - +
- {{ - title - }} + v12 Breaking changes - To the Baloise Design System + Lets update together
@@ -18,45 +16,61 @@
- Property example + Load Custom Icons - A little demonstration how to change properties of our - components + Not all icons are loaded from the beginning only the ones are used by the Design System. The + others need to be registered or directly used with the component. - + + + - Event example + Lazy Loading Component Styles - A short example how to use the events of our - components + The default is now that we load the component styles as a CSS file when they are used. Therefore, customization + with SASS variables could be broken. - + Customized stage with sass variable + - Method example + Design Token Reduction - A tiny use case of how to call the components methods - - - - - - Reactive form + There has been a lot of duplications and aliases, which increased the css file by 66%. + - +

Typography Size Aliases

+
+
Color Aliases
+
+

Text-Color Aliases

+
+
Border-Color Aliases
+
+
Radius
+
+
Shadow
+
+
+
Spacing
+
+ - Template form + Separation of bal-number-input & bal-input + + + This feature was marked as deprecated at was finally removed. The number input has some dependencies and every + time we used a bal-input we also loaded all of that with us. + - - - Value is adapted on: {{value}} + diff --git a/angular/src/app/app.component.scss b/angular/src/app/app.component.scss index e69de29..406b81f 100644 --- a/angular/src/app/app.component.scss +++ b/angular/src/app/app.component.scss @@ -0,0 +1 @@ +@import "@baloise/design-system-components/src/styles/global.utilities"; diff --git a/angular/src/app/app.component.ts b/angular/src/app/app.component.ts index 230466c..b262a10 100644 --- a/angular/src/app/app.component.ts +++ b/angular/src/app/app.component.ts @@ -1,7 +1,5 @@ -import {Component} from '@angular/core'; -import {EmailValidator, FormControl, FormGroup, RequiredValidator} from "@angular/forms"; -import {BalConfigState, BalSwissLanguage, onBalConfigChange} from '@baloise/design-system-components' -import {BalValidators} from "@baloise/web-app-validators-angular"; +import { Component } from '@angular/core'; +import { balIconStarFull } from '@baloise/design-system-icons'; @Component({ selector: 'app-root', @@ -9,38 +7,5 @@ import {BalValidators} from "@baloise/web-app-validators-angular"; styleUrls: ['./app.component.scss'], }) export class AppComponent { - title = 'Welcome'; - language: BalSwissLanguage = 'en'; - form = new FormGroup({ - name: new FormControl('Example name'), - radioButton: new FormControl('yes'), - email: new FormControl(null, [BalValidators.isRequired(), BalValidators.isMinLength(4), BalValidators.isEmail()]), - status: new FormControl('Hans Muster'), - correct: new FormControl(true), - birthdate: new FormControl() - }); - value = 'input template form' - - constructor() { - - onBalConfigChange((config: BalConfigState) => { - this.language = config.language as BalSwissLanguage; - - switch (this.language) { - case 'de': - this.title = 'Willkommen'; - break; - case 'it': - this.title = 'Benvenuta'; - break; - case 'fr': - this.title = 'Bienvenue'; - break; - default: - this.title = 'Welcome'; - break; - } - }); - } } diff --git a/angular/src/app/app.componentold.html b/angular/src/app/app.componentold.html new file mode 100644 index 0000000..b90d132 --- /dev/null +++ b/angular/src/app/app.componentold.html @@ -0,0 +1,71 @@ + +
+ + Angular Demo + + + +
+ {{ + title + }} + + To the Baloise Design System + +
+ + +
+
+ + v12 Breaking changes + + + + + + +
+ + diff --git a/angular/src/styles.scss b/angular/src/styles.scss index c15280e..9803b1e 100644 --- a/angular/src/styles.scss +++ b/angular/src/styles.scss @@ -1,5 +1,8 @@ -$font-path: '~assets/fonts'; +$font-path: "~assets/fonts"; -@import 'node_modules/@baloise/design-system-components/src/styles/global'; +// customization +$bal-color-purple-3: lime; + +@import "@baloise/design-system-components/src/styles/global"; // add custom styles below From 3793239df3293b27da4e67bd3e947f1d743c987d Mon Sep 17 00:00:00 2001 From: Gery Hirschfeld Date: Wed, 14 Dec 2022 08:07:00 +0100 Subject: [PATCH 3/5] before v12 --- angular/README.md | 6 ++ angular/src/app/app.component.html | 10 +-- angular/src/app/app.component.ts | 1 - angular/src/app/app.componentold.html | 71 ------------------- angular/src/app/app.module.ts | 45 ++++++++---- angular/src/app/event/event.component.html | 6 -- angular/src/app/event/event.component.spec.ts | 43 ----------- angular/src/app/event/event.component.ts | 13 ---- .../form-component.component.html | 67 ----------------- .../form-component.component.ts | 25 ------- angular/src/app/forms/forms-sub.module.ts | 14 ---- angular/src/app/method/method.component.html | 6 -- angular/src/app/method/method.component.ts | 18 ----- .../src/app/property/property.component.html | 10 --- .../src/app/property/property.component.ts | 10 --- angular/src/app/shared/shared.module.ts | 53 -------------- 16 files changed, 43 insertions(+), 355 deletions(-) delete mode 100644 angular/src/app/app.componentold.html delete mode 100644 angular/src/app/event/event.component.html delete mode 100644 angular/src/app/event/event.component.spec.ts delete mode 100644 angular/src/app/event/event.component.ts delete mode 100644 angular/src/app/forms/forms-component/form-component.component.html delete mode 100644 angular/src/app/forms/forms-component/form-component.component.ts delete mode 100644 angular/src/app/forms/forms-sub.module.ts delete mode 100644 angular/src/app/method/method.component.html delete mode 100644 angular/src/app/method/method.component.ts delete mode 100644 angular/src/app/property/property.component.html delete mode 100644 angular/src/app/property/property.component.ts delete mode 100644 angular/src/app/shared/shared.module.ts diff --git a/angular/README.md b/angular/README.md index 64b6523..99216dc 100644 --- a/angular/README.md +++ b/angular/README.md @@ -28,3 +28,9 @@ Run `ng e2e` to execute the end-to-end tests via a platform of your choice. To u ## Further help To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page. + +# v12 Update + +## Steps + +- run `npm add @baloise/design-system-components-angular@12.x` diff --git a/angular/src/app/app.component.html b/angular/src/app/app.component.html index 4e31c57..f41621d 100644 --- a/angular/src/app/app.component.html +++ b/angular/src/app/app.component.html @@ -3,7 +3,7 @@ - +
v12 Breaking changes @@ -22,8 +22,10 @@ others need to be registered or directly used with the component. - - +
+ + +
@@ -34,7 +36,7 @@ with SASS variables could be broken. - Customized stage with sass variable + Customized stage with SASS $variable. Should be purple. diff --git a/angular/src/app/app.component.ts b/angular/src/app/app.component.ts index b262a10..3ed82e2 100644 --- a/angular/src/app/app.component.ts +++ b/angular/src/app/app.component.ts @@ -1,5 +1,4 @@ import { Component } from '@angular/core'; -import { balIconStarFull } from '@baloise/design-system-icons'; @Component({ selector: 'app-root', diff --git a/angular/src/app/app.componentold.html b/angular/src/app/app.componentold.html deleted file mode 100644 index b90d132..0000000 --- a/angular/src/app/app.componentold.html +++ /dev/null @@ -1,71 +0,0 @@ - -
- - Angular Demo - - - -
- {{ - title - }} - - To the Baloise Design System - -
- - -
-
- - v12 Breaking changes - - - - - - -
- - diff --git a/angular/src/app/app.module.ts b/angular/src/app/app.module.ts index 6c05bc2..71186e6 100644 --- a/angular/src/app/app.module.ts +++ b/angular/src/app/app.module.ts @@ -1,21 +1,30 @@ +import { CommonModule } from '@angular/common'; import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; -import {BalCoreModule, BalTextModule} from '@baloise/design-system-components-angular'; +import { + BalButtonModule, + BalCardModule, + BalCheckboxModule, + BalCoreModule, + BalDatepickerModule, + BalFieldModule, + BalFooterModule, + BalHeadingModule, + BalInputModule, + BalLogoModule, + BalNavbarModule, + BalRadioModule, + BalSelectModule, + BalStageModule, + BalTextModule, + BalToastModule, +} from '@baloise/design-system-components-angular'; import { AppComponent } from './app.component'; -import { PropertyComponent } from './property/property.component'; -import { EventComponent } from './event/event.component'; -import { MethodComponent } from './method/method.component'; -import { FormsSubModule } from './forms/forms-sub.module'; -import { SharedModule } from './shared/shared.module'; @NgModule({ - declarations: [ - AppComponent, - PropertyComponent, - EventComponent, - MethodComponent, - ], + declarations: [AppComponent], imports: [ + CommonModule, BrowserModule, BalCoreModule.forRoot({ defaults: { @@ -24,9 +33,17 @@ import { SharedModule } from './shared/shared.module'; allowedLanguages: ['de', 'fr', 'it', 'en'], }, }), - SharedModule, - FormsSubModule, + /** + * Design System Modules + */ + BalLogoModule, + BalNavbarModule, + BalFooterModule, + BalStageModule, + BalCardModule, + BalHeadingModule, BalTextModule, + BalInputModule, ], providers: [], bootstrap: [AppComponent], diff --git a/angular/src/app/event/event.component.html b/angular/src/app/event/event.component.html deleted file mode 100644 index c17d0bd..0000000 --- a/angular/src/app/event/event.component.html +++ /dev/null @@ -1,6 +0,0 @@ - -My name is {{ myName }} diff --git a/angular/src/app/event/event.component.spec.ts b/angular/src/app/event/event.component.spec.ts deleted file mode 100644 index 72c4f57..0000000 --- a/angular/src/app/event/event.component.spec.ts +++ /dev/null @@ -1,43 +0,0 @@ -import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'; -import { TestBed } from '@angular/core/testing'; -import { - BalInputModule, - BalTextModule, -} from '@baloise/design-system-components-angular'; -import { EventComponent } from './event.component'; - -describe('EventComponent', () => { - beforeEach(async () => { - await TestBed.configureTestingModule({ - declarations: [EventComponent], - imports: [BalInputModule, BalTextModule], - schemas: [CUSTOM_ELEMENTS_SCHEMA], - }).compileComponents(); - }); - - it('should create the app', () => { - const fixture = TestBed.createComponent(EventComponent); - const app = fixture.componentInstance; - expect(app).toBeTruthy(); - }); - - it(`should have as input 'gugus'`, async () => { - const fixture = TestBed.createComponent(EventComponent); - fixture.detectChanges(); - const compiled = fixture.nativeElement as HTMLElement; - - const inputElement = compiled.querySelector('bal-input'); - if (inputElement) { - inputElement.value = 'Gugus'; - inputElement.dispatchEvent( - new CustomEvent('balInput', { detail: 'Gugus' }) - ); - } - fixture.detectChanges(); - await fixture.whenStable(); - - expect(compiled.querySelector('bal-text')?.textContent).toContain( - 'My name is Gugus' - ); - }); -}); diff --git a/angular/src/app/event/event.component.ts b/angular/src/app/event/event.component.ts deleted file mode 100644 index 301543e..0000000 --- a/angular/src/app/event/event.component.ts +++ /dev/null @@ -1,13 +0,0 @@ -import { Component } from '@angular/core'; - -@Component({ - selector: 'app-event', - templateUrl: './event.component.html', -}) -export class EventComponent { - myName?: string; - - updateName(value: string | undefined) { - this.myName = value - } -} diff --git a/angular/src/app/forms/forms-component/form-component.component.html b/angular/src/app/forms/forms-component/form-component.component.html deleted file mode 100644 index b10cc48..0000000 --- a/angular/src/app/forms/forms-component/form-component.component.html +++ /dev/null @@ -1,67 +0,0 @@ -
- - - - - - - email touched: {{form?.get('email')?.touched}} - - - - - - Required error - - Email error - - - - - - - - - {{ status}} - - - - - status touched: {{form?.get('status')?.touched}} - - - Label - - - Yes - No - - - Field Message - - radioButton touched: {{form?.get('radioButton')?.touched}} - - - Is this form correct? - - - - Label - - - - Field Message - - value is: {{form?.get('correct')?.value}} - - - Birthdate - - - - - -
diff --git a/angular/src/app/forms/forms-component/form-component.component.ts b/angular/src/app/forms/forms-component/form-component.component.ts deleted file mode 100644 index 2a93104..0000000 --- a/angular/src/app/forms/forms-component/form-component.component.ts +++ /dev/null @@ -1,25 +0,0 @@ -import {ChangeDetectionStrategy, Component, Input, OnInit} from '@angular/core'; -import {FormGroup} from "@angular/forms"; -import {formatDateString} from "@baloise/web-app-utils"; - -@Component({ - selector: 'app-form-component', - templateUrl: './form-component.component.html', - changeDetection: ChangeDetectionStrategy.OnPush -}) -export class FormComponent implements OnInit { - - constructor() { - } - - statusOptions = ['John Doe', 'Hans Muster']; - todayDate = new Date(); - todayDateDatePickerValue = formatDateString(new Date(new Date().setFullYear(this.todayDate.getFullYear() - 25))); - - @Input() - form?: FormGroup - - ngOnInit(): void { - } - -} diff --git a/angular/src/app/forms/forms-sub.module.ts b/angular/src/app/forms/forms-sub.module.ts deleted file mode 100644 index e1e350d..0000000 --- a/angular/src/app/forms/forms-sub.module.ts +++ /dev/null @@ -1,14 +0,0 @@ -import {NgModule} from '@angular/core'; -import {FormComponent} from "./forms-component/form-component.component"; -import {SharedModule} from "../shared/shared.module"; - - -@NgModule({ - declarations: [FormComponent], - exports: [FormComponent], - imports: [ - SharedModule - ] -}) -export class FormsSubModule { -} diff --git a/angular/src/app/method/method.component.html b/angular/src/app/method/method.component.html deleted file mode 100644 index 47726d7..0000000 --- a/angular/src/app/method/method.component.html +++ /dev/null @@ -1,6 +0,0 @@ - - Tennis - Soccer - Other - -Choose Tennis diff --git a/angular/src/app/method/method.component.ts b/angular/src/app/method/method.component.ts deleted file mode 100644 index 8aa24fb..0000000 --- a/angular/src/app/method/method.component.ts +++ /dev/null @@ -1,18 +0,0 @@ -import { Component, ViewChild } from '@angular/core'; -import type { Components } from '@baloise/design-system-components'; -// import { ProxyComponent } from '@baloise/design-system-components-angular'; -export interface ProxyComponent { - el: T; -} - -@Component({ - selector: 'app-method', - templateUrl: './method.component.html', -}) -export class MethodComponent { - @ViewChild('mySelect') mySelect!: ProxyComponent; - - chooseTennis(): void { - this.mySelect.el.select('tennis'); - } -} diff --git a/angular/src/app/property/property.component.html b/angular/src/app/property/property.component.html deleted file mode 100644 index 59383ea..0000000 --- a/angular/src/app/property/property.component.html +++ /dev/null @@ -1,10 +0,0 @@ - - - My danger button - - - My disabled button - - - My info button - diff --git a/angular/src/app/property/property.component.ts b/angular/src/app/property/property.component.ts deleted file mode 100644 index 81ab0b2..0000000 --- a/angular/src/app/property/property.component.ts +++ /dev/null @@ -1,10 +0,0 @@ -import { Component } from '@angular/core'; -import { Props } from '@baloise/design-system-components'; - -@Component({ - selector: 'app-property', - templateUrl: './property.component.html', -}) -export class PropertyComponent { - myColor: Props.BalButtonColor = 'info'; -} diff --git a/angular/src/app/shared/shared.module.ts b/angular/src/app/shared/shared.module.ts deleted file mode 100644 index 0525b51..0000000 --- a/angular/src/app/shared/shared.module.ts +++ /dev/null @@ -1,53 +0,0 @@ -import {NgModule} from '@angular/core'; -import {CommonModule} from '@angular/common'; -import {FormsModule, ReactiveFormsModule} from '@angular/forms'; -import { - BalButtonModule, - BalCardModule, - BalCheckboxModule, - BalDatepickerModule, - BalFieldModule, - BalFooterModule, - BalHeadingModule, - BalInputModule, - BalLogoModule, - BalNavbarModule, - BalRadioModule, - BalSelectModule, - BalStageModule, - BalToastModule, -} from '@baloise/design-system-components-angular'; - -const commonModules = [ - /** - * Angular Modules - */ - CommonModule, - FormsModule, - ReactiveFormsModule, - /** - * Design System Modules - */ - BalFieldModule, - BalInputModule, - BalSelectModule, - BalHeadingModule, - BalButtonModule, - BalFooterModule, - BalNavbarModule, - BalLogoModule, - BalStageModule, - BalCardModule, - BalToastModule, - BalCheckboxModule, - BalRadioModule, - BalDatepickerModule, -]; - -@NgModule({ - declarations: [], - imports: [...commonModules], - exports: [...commonModules], -}) -export class SharedModule { -} From 2eb3c6e7d460cb0524af2b3898e8c3ce7206801c Mon Sep 17 00:00:00 2001 From: Gery Hirschfeld Date: Wed, 14 Dec 2022 08:09:06 +0100 Subject: [PATCH 4/5] before v12 --- angular/src/app/app.module.ts | 15 ++++----------- 1 file changed, 4 insertions(+), 11 deletions(-) diff --git a/angular/src/app/app.module.ts b/angular/src/app/app.module.ts index 71186e6..d70ea2e 100644 --- a/angular/src/app/app.module.ts +++ b/angular/src/app/app.module.ts @@ -2,22 +2,15 @@ import { CommonModule } from '@angular/common'; import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { - BalButtonModule, - BalCardModule, - BalCheckboxModule, BalCoreModule, - BalDatepickerModule, - BalFieldModule, - BalFooterModule, - BalHeadingModule, - BalInputModule, BalLogoModule, BalNavbarModule, - BalRadioModule, - BalSelectModule, + BalFooterModule, BalStageModule, + BalCardModule, + BalHeadingModule, BalTextModule, - BalToastModule, + BalInputModule, } from '@baloise/design-system-components-angular'; import { AppComponent } from './app.component'; From d14f89f296d0e85fe9bdc64ae73c39fbb6750919 Mon Sep 17 00:00:00 2001 From: Gery Hirschfeld Date: Wed, 14 Dec 2022 08:09:24 +0100 Subject: [PATCH 5/5] before v12 --- angular/src/app/app.module.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/angular/src/app/app.module.ts b/angular/src/app/app.module.ts index d70ea2e..e76cfa8 100644 --- a/angular/src/app/app.module.ts +++ b/angular/src/app/app.module.ts @@ -19,6 +19,9 @@ import { AppComponent } from './app.component'; imports: [ CommonModule, BrowserModule, + /** + * Design System Modules + */ BalCoreModule.forRoot({ defaults: { region: 'CH', @@ -26,9 +29,6 @@ import { AppComponent } from './app.component'; allowedLanguages: ['de', 'fr', 'it', 'en'], }, }), - /** - * Design System Modules - */ BalLogoModule, BalNavbarModule, BalFooterModule,