From 526cb1122775659347d285fe7ea6bea9e097020e Mon Sep 17 00:00:00 2001 From: _Bastler Date: Tue, 5 Oct 2021 14:44:46 +0200 Subject: [PATCH] ng update --- package-lock.json | 73 +++++++++++++++++++++++++++++++++------------- package.json | 10 +++---- src/styles.scss | 12 ++++---- src/variables.scss | 26 ++++++++--------- 4 files changed, 77 insertions(+), 44 deletions(-) diff --git a/package-lock.json b/package-lock.json index e4e963c..ad07e8a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -225,11 +225,18 @@ } }, "@angular-material-components/datetime-picker": { - "version": "5.1.0", - "resolved": "https://registry.npmjs.org/@angular-material-components/datetime-picker/-/datetime-picker-5.1.0.tgz", - "integrity": "sha512-SzxBG9oquHF4EWXgr0QStdMG9oR+aY0Uc5j/x0pq36NzqHWUkR+NgkwjSx6fEk0orQ751UMcgdM90525JO4OWQ==", + "version": "6.0.3", + "resolved": "https://registry.npmjs.org/@angular-material-components/datetime-picker/-/datetime-picker-6.0.3.tgz", + "integrity": "sha512-Pc11woDH0leghqhvqRDKy4/bk3sdYV8f7IJO8om50YTeF2/y9+RfQinxL1JTaojdJ/PBeyGTJlsK3wdxjVZ0cA==", "requires": { - "tslib": "^2.0.0" + "tslib": "^2.1.0" + }, + "dependencies": { + "tslib": { + "version": "2.3.1", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.1.tgz", + "integrity": "sha512-77EbyPPpMz+FRFRuAFlWMtmgUWGe9UOG2Z25NqCwiIjRhOf5iKGuzSe5P2w1laq+FkRy4p+PCuVkJSGkzTEKVw==" + } } }, "@angular/animations": { @@ -248,12 +255,12 @@ } }, "@angular/cdk": { - "version": "11.2.9", - "resolved": "https://registry.npmjs.org/@angular/cdk/-/cdk-11.2.9.tgz", - "integrity": "sha512-3gHobkgCQIJ4kJFkqexaKramI6k4OZ0/Vw5qvabGhpwWtICvrrfZyRejJzhecYKOcw+hiJNoDqP9TVNfkLme9g==", + "version": "12.2.8", + "resolved": "https://registry.npmjs.org/@angular/cdk/-/cdk-12.2.8.tgz", + "integrity": "sha512-M0Y61o0yEVLMg+DSNsaDgiOifAV6OdumTgt2/kNoSuauPRWS0bkZJE58k3LR+cPi1Cho3UXELMKMOXZN9AhofA==", "requires": { "parse5": "^5.0.0", - "tslib": "^2.0.0" + "tslib": "^2.2.0" }, "dependencies": { "parse5": { @@ -261,6 +268,11 @@ "resolved": "https://registry.npmjs.org/parse5/-/parse5-5.1.1.tgz", "integrity": "sha512-ugq4DFI0Ptb+WWjAdOK16+u/nHfiIrcE+sh8kZMaM0WllQKLI9rOUq6c2b7cwPkXdzfQESqvoqK6ug7U/Yyzug==", "optional": true + }, + "tslib": { + "version": "2.3.1", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.1.tgz", + "integrity": "sha512-77EbyPPpMz+FRFRuAFlWMtmgUWGe9UOG2Z25NqCwiIjRhOf5iKGuzSe5P2w1laq+FkRy4p+PCuVkJSGkzTEKVw==" } } }, @@ -494,11 +506,18 @@ } }, "@angular/flex-layout": { - "version": "11.0.0-beta.33", - "resolved": "https://registry.npmjs.org/@angular/flex-layout/-/flex-layout-11.0.0-beta.33.tgz", - "integrity": "sha512-unfhw3abZuKtdwQicRStHCYGbANPTHYg4WNRQk/RC5Mxq+4WOp4Q8HI7GqRHCGUYDCGUP7w1sU/oDt8f09nM8w==", + "version": "12.0.0-beta.35", + "resolved": "https://registry.npmjs.org/@angular/flex-layout/-/flex-layout-12.0.0-beta.35.tgz", + "integrity": "sha512-nPi2MGDFuCacwWHqxF/G7lUJd2X99HbLjjUvKXnyLwyCIVgH1sfS52su2wYbVYWJRqAVAB2/VMlrtW8Khr8hDA==", "requires": { - "tslib": "^2.0.0" + "tslib": "^2.1.0" + }, + "dependencies": { + "tslib": { + "version": "2.3.1", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.1.tgz", + "integrity": "sha512-77EbyPPpMz+FRFRuAFlWMtmgUWGe9UOG2Z25NqCwiIjRhOf5iKGuzSe5P2w1laq+FkRy4p+PCuVkJSGkzTEKVw==" + } } }, "@angular/forms": { @@ -667,19 +686,33 @@ } }, "@angular/material": { - "version": "11.2.9", - "resolved": "https://registry.npmjs.org/@angular/material/-/material-11.2.9.tgz", - "integrity": "sha512-Pe1aScSX8fMOSs5hfF/V7NCJn9pt/60rFmwYxgtFser4BcJrO0Moz4eqxhNcR0PjiCQgKJpjjPxBept2+o5N5A==", + "version": "12.2.8", + "resolved": "https://registry.npmjs.org/@angular/material/-/material-12.2.8.tgz", + "integrity": "sha512-wRTaTZIGC9+2e8aft44V9Qqwp3PsR9AG0FeJ0spl8mdOlYEqMMyoRXjvMiWIjo2ywxHLoQgLXXsWn3ip2xnnVg==", "requires": { - "tslib": "^2.0.0" + "tslib": "^2.2.0" + }, + "dependencies": { + "tslib": { + "version": "2.3.1", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.1.tgz", + "integrity": "sha512-77EbyPPpMz+FRFRuAFlWMtmgUWGe9UOG2Z25NqCwiIjRhOf5iKGuzSe5P2w1laq+FkRy4p+PCuVkJSGkzTEKVw==" + } } }, "@angular/material-moment-adapter": { - "version": "11.2.9", - "resolved": "https://registry.npmjs.org/@angular/material-moment-adapter/-/material-moment-adapter-11.2.9.tgz", - "integrity": "sha512-qeZKzNIywqVfgmSj34wBBfuh/YIqLnICj3LFqSA2/odrxcBDFBKF6iu+R3GDNlTqivIoor1eyaODxB+jD2shSA==", + "version": "12.2.8", + "resolved": "https://registry.npmjs.org/@angular/material-moment-adapter/-/material-moment-adapter-12.2.8.tgz", + "integrity": "sha512-uk81sYrY4TfX889ZXo7l7iV8Idxww+sTHzZueq8xC9UTG35FM0KLSvUa/EqwR31lau+6rbgKFCGurQVhBvHrQA==", "requires": { - "tslib": "^2.0.0" + "tslib": "^2.2.0" + }, + "dependencies": { + "tslib": { + "version": "2.3.1", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.1.tgz", + "integrity": "sha512-77EbyPPpMz+FRFRuAFlWMtmgUWGe9UOG2Z25NqCwiIjRhOf5iKGuzSe5P2w1laq+FkRy4p+PCuVkJSGkzTEKVw==" + } } }, "@angular/platform-browser": { diff --git a/package.json b/package.json index b4df835..06f46df 100644 --- a/package.json +++ b/package.json @@ -11,16 +11,16 @@ }, "private": true, "dependencies": { - "@angular-material-components/datetime-picker": "^5.1.0", + "@angular-material-components/datetime-picker": "^6.0.3", "@angular/animations": "~12.2.8", - "@angular/cdk": "^11.2.9", + "@angular/cdk": "^12.2.8", "@angular/common": "~12.2.8", "@angular/compiler": "~12.2.8", "@angular/core": "~12.2.8", - "@angular/flex-layout": "^11.0.0-beta.33", + "@angular/flex-layout": "^12.0.0-beta.35", "@angular/forms": "~12.2.8", - "@angular/material": "^11.2.9", - "@angular/material-moment-adapter": "^11.2.9", + "@angular/material": "^12.2.8", + "@angular/material-moment-adapter": "^12.2.8", "@angular/platform-browser": "~12.2.8", "@angular/platform-browser-dynamic": "~12.2.8", "@angular/router": "~12.2.8", diff --git a/src/styles.scss b/src/styles.scss index f1a1b19..8305245 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -1,12 +1,12 @@ // Custom Theming for Angular Material +@use '~@angular/material' as mat; // For more information: https://material.angular.io/guide/theming -@import '~@angular/material/theming'; // Plus imports for other components in your app. // Include the common styles for Angular Material. We include this here so that you only // have to load a single css file for Angular Material in your app. // Be sure that you only ever include this mixin once! -@include mat-core(); +@include mat.core(); @import './variables.scss'; @@ -14,13 +14,13 @@ // Define the palettes for your theme using the Material Design palettes available in palette.scss // (imported above). For each palette, you can optionally specify a default, lighter, and darker // hue. Available color palettes: https://material.io/design/color/ -$light-theme: mat-light-theme((color: (primary: $light-primary, +$light-theme: mat.define-light-theme((color: (primary: $light-primary, accent: $light-accent, warn: $light-warn, ))); // Define an alternate dark theme. -$dark-theme: mat-dark-theme((color: (primary: $dark-primary, +$dark-theme: mat.define-dark-theme((color: (primary: $dark-primary, accent: $light-accent, warn: $light-warn, ))); @@ -30,10 +30,10 @@ $dark-theme: mat-dark-theme((color: (primary: $dark-primary, // Include theme styles for core and each component used in your app. // Alternatively, you can import and @include the theme mixins for each component // that you are using. -@include angular-material-theme($light-theme); +@include mat.all-component-themes($light-theme); .dark-theme { - @include angular-material-color($dark-theme); + @include mat.all-component-colors($dark-theme); } diff --git a/src/variables.scss b/src/variables.scss index 7d1b242..3596f31 100644 --- a/src/variables.scss +++ b/src/variables.scss @@ -1,19 +1,19 @@ -@import '~@angular/material/theming'; +@use '~@angular/material' as mat; -$light-primary: mat-palette($mat-deep-orange, 800); -$light-accent: mat-palette($mat-grey, A200, A100, A400); -$light-warn: mat-palette($mat-red); +$light-primary: mat.define-palette(mat.$deep-orange-palette, 800); +$light-accent: mat.define-palette(mat.$grey-palette, A200, A100, A400); +$light-warn: mat.define-palette(mat.$red-palette); -$primary: mat-color($light-primary); -$accent: mat-color($light-accent); -$warn: mat-color($light-warn); +$primary: mat.get-color-from-palette($light-primary); +$accent: mat.get-color-from-palette($light-accent); +$warn: mat.get-color-from-palette($light-warn); -$dark-primary: mat-palette($mat-deep-orange, 900, 500, 700); -$dark-accent: mat-palette($mat-grey, A200, A100, A400); -$dark-warn: mat-palette($mat-red); +$dark-primary: mat.define-palette(mat.$deep-orange-palette, 900, 500, 700); +$dark-accent: mat.define-palette(mat.$grey-palette, A200, A100, A400); +$dark-warn: mat.define-palette(mat.$red-palette); .dark-theme { - $primary: mat-color($light-primary); - $accent: mat-color($light-accent); - $warn: mat-color($light-warn); + $primary: mat.get-color-from-palette($light-primary); + $accent: mat.get-color-from-palette($light-accent); + $warn: mat.get-color-from-palette($light-warn); } \ No newline at end of file