From 0c0cf703149ff1995dc714803b6920525f21dcd9 Mon Sep 17 00:00:00 2001 From: OZGCloud <ozgcloud@mgm-tp.com> Date: Fri, 9 Jul 2021 17:10:10 +0200 Subject: [PATCH] dependencies update angular material --- .../src/styles/abstracts/_variables.scss | 16 ++++++------- goofy-client/apps/goofy/src/styles/main.scss | 7 +++--- .../src/lib/navigation/_navigation.theme.scss | 12 ++++++---- .../lib/navigation/navigation.component.scss | 4 +++- .../src/lib/snackbar/snackbar.component.scss | 6 +++-- .../_button-with-spinner.theme.scss | 7 ++++-- .../_expansion-panel.theme.scss | 10 +++++--- ...er-profile-in-vorgang-container.theme.scss | 10 +++++--- .../_vorgang-detail-header.theme.scss | 8 +++++-- .../lib/status-dot/status-dot.component.scss | 6 +++-- .../_vorgang-search-container.theme.scss | 8 +++++-- .../vorgang-next-frist-button.component.scss | 4 +++- .../breadcrumb/_breadcrumb.theme.scss | 8 +++++-- .../wiedervorlage-status.component.scss | 10 ++++---- goofy-client/package-lock.json | 24 +++++++++---------- goofy-client/package.json | 6 ++--- 16 files changed, 92 insertions(+), 54 deletions(-) diff --git a/goofy-client/apps/goofy/src/styles/abstracts/_variables.scss b/goofy-client/apps/goofy/src/styles/abstracts/_variables.scss index 63f4c60043..2616e3aa4c 100644 --- a/goofy-client/apps/goofy/src/styles/abstracts/_variables.scss +++ b/goofy-client/apps/goofy/src/styles/abstracts/_variables.scss @@ -1,4 +1,4 @@ -@import "~@angular/material/theming"; +@use '~@angular/material' as mat; $grey: #777; @@ -9,11 +9,11 @@ $shadow-bottom: inset 0 -1px 0 rgba(#000, 0.08); $header-height: 64px; $navigation-width: 20px; -$primaryPalette: mat-palette($mat-blue, 700, 300, 900); -$accentPalette: mat-palette($mat-yellow, 600, 300, 800); -$warnPalette: mat-palette($mat-red, 500, 300, 800); +$primaryPalette: mat.define-palette(mat.$blue-palette, 700, 300, 900); +$accentPalette: mat.define-palette(mat.$yellow-palette, 600, 300, 800); +$warnPalette: mat.define-palette(mat.$red-palette, 500, 300, 800); -$goofyTheme: mat-light-theme(( +$goofyTheme: mat.define-light-theme(( color: ( primary: $primaryPalette, accent: $accentPalette, @@ -23,10 +23,10 @@ $goofyTheme: mat-light-theme(( // dark theme -$primaryDarkPalette: mat-palette($mat-yellow, 700, 300, 900); -$accentDarkPalette: mat-palette($mat-brown, 600, 300, 800); +$primaryDarkPalette: mat.define-palette(mat.$yellow-palette, 700, 300, 900); +$accentDarkPalette: mat.define-palette(mat.$brown-palette, 600, 300, 800); -$goofyDarkTheme: mat-dark-theme(( +$goofyDarkTheme: mat.define-dark-theme(( color: ( primary: $primaryDarkPalette, accent: $accentDarkPalette, diff --git a/goofy-client/apps/goofy/src/styles/main.scss b/goofy-client/apps/goofy/src/styles/main.scss index e1008f2793..380c86bc66 100644 --- a/goofy-client/apps/goofy/src/styles/main.scss +++ b/goofy-client/apps/goofy/src/styles/main.scss @@ -1,3 +1,4 @@ +@use '~@angular/material' as mat; @import "~material-design-icons-iconfont/dist/material-design-icons.css"; //@import url("https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+Outlined"); @import "~typeface-roboto/index.css"; @@ -18,7 +19,7 @@ @import "~libs/user-profile/src/lib/user-profile-in-vorgang-container/user-profile-in-vorgang-container.theme"; @import "~libs/user-profile/src/lib/user-profile-search-container/user-profile-search-container.theme"; -@include mat-core(); +@include mat.core(); @mixin custom-components-theme($theme) { @include navigation($theme); @@ -30,11 +31,11 @@ @include user-profile-icon($theme); } -@include angular-material-theme($goofyTheme); +@include mat.all-component-themes($goofyTheme); @include custom-components-theme($goofyTheme); body.dark { - @include angular-material-color($goofyDarkTheme); + @include mat.all-component-colors($goofyDarkTheme); @include custom-components-theme($goofyDarkTheme); } diff --git a/goofy-client/libs/navigation/src/lib/navigation/_navigation.theme.scss b/goofy-client/libs/navigation/src/lib/navigation/_navigation.theme.scss index 98ce7ce522..c2fb028bb9 100644 --- a/goofy-client/libs/navigation/src/lib/navigation/_navigation.theme.scss +++ b/goofy-client/libs/navigation/src/lib/navigation/_navigation.theme.scss @@ -1,3 +1,6 @@ +@use 'sass:map'; +@use '~@angular/material' as mat; + goofy-client-navigation nav a { &:hover, &:focus-within { @@ -13,7 +16,8 @@ body.dark goofy-client-navigation nav a { } @mixin navigation($theme) { - $primary: map-get($theme, primary); + $color-config: mat.get-color-config($theme); + $primary: map.get($color-config, 'primary'); goofy-client-navigation { a { @@ -21,12 +25,12 @@ body.dark goofy-client-navigation nav a { &.active { font-weight: 500; - color: mat-color($primary, darker); - background-color: mat-color($primaryPalette, 50); + color: mat.get-color-from-palette($primary, darker); + background-color: mat.get-color-from-palette($primaryPalette, 50); &:hover, &:focus-within { - background-color: mat-color($primaryPalette, 50); + background-color: mat.get-color-from-palette($primaryPalette, 50); } } diff --git a/goofy-client/libs/navigation/src/lib/navigation/navigation.component.scss b/goofy-client/libs/navigation/src/lib/navigation/navigation.component.scss index c4a730b688..f129e02825 100644 --- a/goofy-client/libs/navigation/src/lib/navigation/navigation.component.scss +++ b/goofy-client/libs/navigation/src/lib/navigation/navigation.component.scss @@ -1,3 +1,5 @@ +@use 'sass:map'; +@use '~@angular/material' as mat; @import "variables"; nav { @@ -66,7 +68,7 @@ ul { width: 32px; &.active { - background-color: mat-color($primaryPalette, 50); + background-color: mat.get-color-from-palette($primaryPalette, 50); } } diff --git a/goofy-client/libs/ui/src/lib/snackbar/snackbar.component.scss b/goofy-client/libs/ui/src/lib/snackbar/snackbar.component.scss index 8ec4a97dbd..a5ad807003 100644 --- a/goofy-client/libs/ui/src/lib/snackbar/snackbar.component.scss +++ b/goofy-client/libs/ui/src/lib/snackbar/snackbar.component.scss @@ -1,3 +1,5 @@ +@use 'sass:map'; +@use '~@angular/material' as mat; @import "variables"; ::ng-deep .mat-snack-bar-container { @@ -5,7 +7,7 @@ max-width: 90vw; .mat-button { - color: mat-color($primaryPalette, lighter); + color: mat.get-color-from-palette($primaryPalette, lighter); } } @@ -14,5 +16,5 @@ button { } ::ng-deep body.dark .mat-snack-bar-container .mat-button { - color: mat-color($primaryPalette); + color: mat.get-color-from-palette($primaryPalette); } diff --git a/goofy-client/libs/ui/src/lib/ui/button-with-spinner/_button-with-spinner.theme.scss b/goofy-client/libs/ui/src/lib/ui/button-with-spinner/_button-with-spinner.theme.scss index 63c4105fad..f2806b09d4 100644 --- a/goofy-client/libs/ui/src/lib/ui/button-with-spinner/_button-with-spinner.theme.scss +++ b/goofy-client/libs/ui/src/lib/ui/button-with-spinner/_button-with-spinner.theme.scss @@ -1,8 +1,11 @@ +@use 'sass:map'; +@use '~@angular/material' as mat; @mixin button-with-spinner($theme) { - $primary: map-get($theme, primary); + $color-config: mat.get-color-config($theme); + $primary: map.get($color-config, 'primary'); goofy-client-button-with-spinner .mat-primary svg path { - fill: mat-color($primary); + fill: mat.get-color-from-palette($primary); } } diff --git a/goofy-client/libs/ui/src/lib/ui/expansion-panel/_expansion-panel.theme.scss b/goofy-client/libs/ui/src/lib/ui/expansion-panel/_expansion-panel.theme.scss index 0157d5bfb2..a25682f65a 100644 --- a/goofy-client/libs/ui/src/lib/ui/expansion-panel/_expansion-panel.theme.scss +++ b/goofy-client/libs/ui/src/lib/ui/expansion-panel/_expansion-panel.theme.scss @@ -1,8 +1,12 @@ +@use 'sass:map'; +@use '~@angular/material' as mat; + @mixin expansion-panel($theme) { - $primary: map-get($theme, primary); + $color-config: mat.get-color-config($theme); + $primary-palette: map.get($color-config, 'primary'); goofy-client-expansion-panel h3 { - color: mat-color($primary); + color: mat.get-color-from-palette($primary-palette); } } @@ -55,6 +59,6 @@ body.mat-typography goofy-client-expansion-panel { .dark goofy-client-expansion-panel { h3 { - color: mat-color($primaryPalette, lighter); + color: mat.get-color-from-palette($primaryPalette, lighter); } } diff --git a/goofy-client/libs/user-profile/src/lib/user-profile-in-vorgang-container/_user-profile-in-vorgang-container.theme.scss b/goofy-client/libs/user-profile/src/lib/user-profile-in-vorgang-container/_user-profile-in-vorgang-container.theme.scss index 2f059045fd..7c9b132e74 100644 --- a/goofy-client/libs/user-profile/src/lib/user-profile-in-vorgang-container/_user-profile-in-vorgang-container.theme.scss +++ b/goofy-client/libs/user-profile/src/lib/user-profile-in-vorgang-container/_user-profile-in-vorgang-container.theme.scss @@ -1,17 +1,21 @@ +@use 'sass:map'; +@use '~@angular/material' as mat; + @mixin user-profile-icon($theme) { - $primary: map-get($theme, primary); + $color-config: mat.get-color-config($theme); + $primary: map.get($color-config, 'primary'); goofy-client-user-profile-in-vorgang-container { .user-profile-button { &:focus-within { .user-profile-icon { - box-shadow: 0 0 0 2px mat-color($primary); + box-shadow: 0 0 0 2px mat.get-color-from-palette($primary); } } .user-profile-icon { - box-shadow: 0 0 0 1px mat-color($primary); + box-shadow: 0 0 0 1px mat.get-color-from-palette($primary); } } } diff --git a/goofy-client/libs/vorgang-detail/src/lib/vorgang-detail-page/vorgang-detail-area/vorgang-detail-header/_vorgang-detail-header.theme.scss b/goofy-client/libs/vorgang-detail/src/lib/vorgang-detail-page/vorgang-detail-area/vorgang-detail-header/_vorgang-detail-header.theme.scss index 053af66044..7dc50a5ffd 100644 --- a/goofy-client/libs/vorgang-detail/src/lib/vorgang-detail-page/vorgang-detail-area/vorgang-detail-header/_vorgang-detail-header.theme.scss +++ b/goofy-client/libs/vorgang-detail/src/lib/vorgang-detail-page/vorgang-detail-area/vorgang-detail-header/_vorgang-detail-header.theme.scss @@ -1,7 +1,11 @@ +@use 'sass:map'; +@use '~@angular/material' as mat; + @mixin vorgang-detail-header($theme) { - $primary: map-get($theme, primary); + $color-config: mat.get-color-config($theme); + $primary: map.get($color-config, 'primary'); goofy-client-vorgang-detail-header h1 { - color: mat-color($primary); + color: mat.get-color-from-palette($primary); } } diff --git a/goofy-client/libs/vorgang-shared-ui/src/lib/status-dot/status-dot.component.scss b/goofy-client/libs/vorgang-shared-ui/src/lib/status-dot/status-dot.component.scss index 3465e9753a..2a47d896e4 100644 --- a/goofy-client/libs/vorgang-shared-ui/src/lib/status-dot/status-dot.component.scss +++ b/goofy-client/libs/vorgang-shared-ui/src/lib/status-dot/status-dot.component.scss @@ -1,3 +1,5 @@ +@use 'sass:map'; +@use '~@angular/material' as mat; @import "variables"; :host { @@ -11,14 +13,14 @@ .dot { border-radius: 50%; - background-color: mat-color($primaryPalette); + background-color: mat.get-color-from-palette($primaryPalette); margin: 0 29px; &.angenommen, &.in_bearbeitung, &.redirect, // TODO kann raus, wenn der forward status auf deutsch umgestellt wurde &.weiterleiten { - background-color: mat-color($accentPalette, darker); + background-color: mat.get-color-from-palette($accentPalette, darker); } &.verworfen { diff --git a/goofy-client/libs/vorgang-shared-ui/src/lib/vorgang-search-container/_vorgang-search-container.theme.scss b/goofy-client/libs/vorgang-shared-ui/src/lib/vorgang-search-container/_vorgang-search-container.theme.scss index 69e2b74685..c1ded1941a 100644 --- a/goofy-client/libs/vorgang-shared-ui/src/lib/vorgang-search-container/_vorgang-search-container.theme.scss +++ b/goofy-client/libs/vorgang-shared-ui/src/lib/vorgang-search-container/_vorgang-search-container.theme.scss @@ -1,3 +1,6 @@ +@use 'sass:map'; +@use '~@angular/material' as mat; + goofy-client-vorgang-search-container { .search-field { box-shadow: 0 0 0 1px rgba(#000, 0.08); @@ -32,11 +35,12 @@ body.dark goofy-client-vorgang-search-container { } @mixin search-container($theme) { - $primary: map-get($theme, primary); + $color-config: mat.get-color-config($theme); + $primary: map.get($color-config, 'primary'); goofy-client-vorgang-search-container { .search-icon { - color: mat-color($primary); + color: mat.get-color-from-palette($primary); } } } diff --git a/goofy-client/libs/vorgang/src/lib/vorgang-list-container/vorgang-list/vorgang-list-item/vorgang-next-frist-button/vorgang-next-frist-button.component.scss b/goofy-client/libs/vorgang/src/lib/vorgang-list-container/vorgang-list/vorgang-list-item/vorgang-next-frist-button/vorgang-next-frist-button.component.scss index aeff005f45..3381d746d7 100644 --- a/goofy-client/libs/vorgang/src/lib/vorgang-list-container/vorgang-list/vorgang-list-item/vorgang-next-frist-button/vorgang-next-frist-button.component.scss +++ b/goofy-client/libs/vorgang/src/lib/vorgang-list-container/vorgang-list/vorgang-list-item/vorgang-next-frist-button/vorgang-next-frist-button.component.scss @@ -1,3 +1,5 @@ +@use 'sass:map'; +@use '~@angular/material' as mat; @import "variables"; button { @@ -13,5 +15,5 @@ button { } .red:not(.erledigt) { - color: mat-color($warnPalette, darker); + color: mat.get-color-from-palette($warnPalette, darker); } diff --git a/goofy-client/libs/wiedervorlage/src/lib/wiedervorlage-page-container/wiedervorlage-page/breadcrumb/_breadcrumb.theme.scss b/goofy-client/libs/wiedervorlage/src/lib/wiedervorlage-page-container/wiedervorlage-page/breadcrumb/_breadcrumb.theme.scss index d4ccb60664..fe1d718652 100644 --- a/goofy-client/libs/wiedervorlage/src/lib/wiedervorlage-page-container/wiedervorlage-page/breadcrumb/_breadcrumb.theme.scss +++ b/goofy-client/libs/wiedervorlage/src/lib/wiedervorlage-page-container/wiedervorlage-page/breadcrumb/_breadcrumb.theme.scss @@ -1,7 +1,11 @@ +@use 'sass:map'; +@use '~@angular/material' as mat; + @mixin breadcrumb($theme) { - $primary: map-get($theme, primary); + $color-config: mat.get-color-config($theme); + $primary: map.get($color-config, 'primary'); goofy-client-breadcrumb a { - color: mat-color($primary); + color: mat.get-color-from-palette($primary); } } diff --git a/goofy-client/libs/wiedervorlage/src/lib/wiedervorlage-status/wiedervorlage-status.component.scss b/goofy-client/libs/wiedervorlage/src/lib/wiedervorlage-status/wiedervorlage-status.component.scss index b3fdd5647f..85745a1830 100644 --- a/goofy-client/libs/wiedervorlage/src/lib/wiedervorlage-status/wiedervorlage-status.component.scss +++ b/goofy-client/libs/wiedervorlage/src/lib/wiedervorlage-status/wiedervorlage-status.component.scss @@ -1,3 +1,5 @@ +@use 'sass:map'; +@use '~@angular/material' as mat; @import "variables"; :host { @@ -23,13 +25,13 @@ } &.red:not(.erledigt) { - background-color: mat-color($warnPalette); - border-color: mat-color($warnPalette, darker); + background-color: mat.get-color-from-palette($warnPalette); + border-color: mat.get-color-from-palette($warnPalette, darker); } &.yellow:not(.erledigt) { - background-color: mat-color($accentPalette); - border-color: mat-color($accentPalette, darker); + background-color: mat.get-color-from-palette($accentPalette); + border-color: mat.get-color-from-palette($accentPalette, darker); } } diff --git a/goofy-client/package-lock.json b/goofy-client/package-lock.json index d7545adb14..89ff392783 100644 --- a/goofy-client/package-lock.json +++ b/goofy-client/package-lock.json @@ -530,12 +530,12 @@ } }, "@angular/cdk": { - "version": "11.1.2", - "resolved": "https://registry.npmjs.org/@angular/cdk/-/cdk-11.1.2.tgz", - "integrity": "sha512-RnKvMWAIcWbWoUdBfAoOs4pQl6t5O+1OuPlBNK5aL2FYqoLv5U0fP88Rf7OhjPlD0ASsPGLG45t+dA5sUVZ46Q==", + "version": "12.1.1", + "resolved": "https://registry.npmjs.org/@angular/cdk/-/cdk-12.1.1.tgz", + "integrity": "sha512-MJENa8qmfLAr6t59u1+mEC2YPbCn4n3vsY6k8fKyf+ILXwwGHWNZlYblaRMBjrF/crSx1Kd5vb30RCqIcNTGsA==", "requires": { "parse5": "^5.0.0", - "tslib": "^2.0.0" + "tslib": "^2.2.0" } }, "@angular/cli": { @@ -787,19 +787,19 @@ "dev": true }, "@angular/material": { - "version": "11.1.2", - "resolved": "https://registry.npmjs.org/@angular/material/-/material-11.1.2.tgz", - "integrity": "sha512-Fyjk6LUrJ+mJmRMrnM2L4Q9pijuhLa8q1G50mUYa81OJPWnhMRlzoM2dDHpS/ibIARpBc3QA8PmF3hUgyLxgMg==", + "version": "12.1.1", + "resolved": "https://registry.npmjs.org/@angular/material/-/material-12.1.1.tgz", + "integrity": "sha512-q2vhbVQfjr+88beqCotCVlaPRyy9y2O2asiR3+0BU9OJ1DjTo1QpBmMpck5InP7Es49t9RTk9RzzC0t18p45yA==", "requires": { - "tslib": "^2.0.0" + "tslib": "^2.2.0" } }, "@angular/material-moment-adapter": { - "version": "11.2.3", - "resolved": "https://registry.npmjs.org/@angular/material-moment-adapter/-/material-moment-adapter-11.2.3.tgz", - "integrity": "sha512-koLpRU3Kiuxhoic+N0JjeJdqRG7fzZJDe83bwqQ991eCDdVbdMd0Xh7cEbFTjnWFQSHdqfMl2dZmHFpvJ46Xwg==", + "version": "12.1.1", + "resolved": "https://registry.npmjs.org/@angular/material-moment-adapter/-/material-moment-adapter-12.1.1.tgz", + "integrity": "sha512-YQs4BFiQ0rCYhWzcPJ6IS6zJRM+iKAjAEo/Z89G4tR1vekA4Fl95PBs9DVoCLS2uptOPL99tnUMqeNtFjUM6wQ==", "requires": { - "tslib": "^2.0.0" + "tslib": "^2.2.0" } }, "@angular/platform-browser": { diff --git a/goofy-client/package.json b/goofy-client/package.json index d34497a427..70e0f16626 100644 --- a/goofy-client/package.json +++ b/goofy-client/package.json @@ -48,13 +48,13 @@ "private": true, "dependencies": { "@angular/animations": "12.0.0", - "@angular/cdk": "11.1.2", + "@angular/cdk": "12.1.1", "@angular/common": "12.0.0", "@angular/compiler": "12.0.0", "@angular/core": "12.0.0", "@angular/forms": "12.0.0", - "@angular/material": "11.1.2", - "@angular/material-moment-adapter": "11.2.3", + "@angular/material": "12.1.1", + "@angular/material-moment-adapter": "12.1.1", "@angular/platform-browser": "12.0.0", "@angular/platform-browser-dynamic": "12.0.0", "@angular/router": "12.0.0", -- GitLab