From 484164d0063d8de169e82b5a5b771b6c3f40a799 Mon Sep 17 00:00:00 2001 From: Daniel Kimmich Date: Fri, 24 Feb 2023 16:43:40 +0100 Subject: [PATCH] docs: offer datetime picker --- angular.json | 1 - package-lock.json | 25 +++++++++-- package.json | 1 + .../src/app/pipes/date/date.component.html | 7 ++++ .../src/app/pipes/pipes.module.ts | 5 +++ projects/angular-intl-demo/src/index.html | 2 +- projects/angular-intl-demo/src/styles.scss | 41 ++++++++++++++++++- 7 files changed, 75 insertions(+), 7 deletions(-) diff --git a/angular.json b/angular.json index 4891894a..e46a84f8 100644 --- a/angular.json +++ b/angular.json @@ -68,7 +68,6 @@ "projects/angular-intl-demo/src/assets" ], "styles": [ - "@angular/material/prebuilt-themes/deeppurple-amber.css", "node_modules/prismjs/themes/prism-okaidia.css", "projects/angular-intl-demo/src/styles.scss" ], diff --git a/package-lock.json b/package-lock.json index b59bcc90..47316789 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,13 +1,14 @@ { - "name": "angular-ecmascript-intl", - "version": "0.0.0", + "name": "angular-ecmascript-intl-monorepo", + "version": "0.3.0", "lockfileVersion": 3, "requires": true, "packages": { "": { - "name": "angular-ecmascript-intl", - "version": "0.0.0", + "name": "angular-ecmascript-intl-monorepo", + "version": "0.3.0", "dependencies": { + "@angular-material-components/datetime-picker": "^9.0.0", "@angular/animations": "^15.1.0", "@angular/cdk": "^15.1.5", "@angular/common": "^15.1.0", @@ -609,6 +610,22 @@ "typescript": "*" } }, + "node_modules/@angular-material-components/datetime-picker": { + "version": "9.0.0", + "resolved": "https://registry.npmjs.org/@angular-material-components/datetime-picker/-/datetime-picker-9.0.0.tgz", + "integrity": "sha512-F+yf5kxzu62q1H2ZiVbKGfKHlszQhYN/avZyejCyq7bI7V9kg93BaTJ+ACOf9NEtM05USzrLXdiBGjEAMW82aQ==", + "dependencies": { + "tslib": "^2.3.0" + }, + "peerDependencies": { + "@angular/cdk": "^15.0.1", + "@angular/common": "^15.0.1", + "@angular/core": "^15.0.1", + "@angular/forms": "^15.0.1", + "@angular/material": "^15.0.1", + "@angular/platform-browser": "^15.0.1" + } + }, "node_modules/@angular/animations": { "version": "15.1.5", "resolved": "https://registry.npmjs.org/@angular/animations/-/animations-15.1.5.tgz", diff --git a/package.json b/package.json index 1bd02926..d97aeb6d 100644 --- a/package.json +++ b/package.json @@ -14,6 +14,7 @@ }, "private": true, "dependencies": { + "@angular-material-components/datetime-picker": "^9.0.0", "@angular/animations": "^15.1.0", "@angular/cdk": "^15.1.5", "@angular/common": "^15.1.0", diff --git a/projects/angular-intl-demo/src/app/pipes/date/date.component.html b/projects/angular-intl-demo/src/app/pipes/date/date.component.html index 90dfd6a6..6c6cf982 100644 --- a/projects/angular-intl-demo/src/app/pipes/date/date.component.html +++ b/projects/angular-intl-demo/src/app/pipes/date/date.component.html @@ -1,4 +1,11 @@
+ + Date + + + + + Locale diff --git a/projects/angular-intl-demo/src/app/pipes/pipes.module.ts b/projects/angular-intl-demo/src/app/pipes/pipes.module.ts index 94aeb2d3..e8271991 100644 --- a/projects/angular-intl-demo/src/app/pipes/pipes.module.ts +++ b/projects/angular-intl-demo/src/app/pipes/pipes.module.ts @@ -13,6 +13,8 @@ import {FormsModule} from "@angular/forms"; import {MatInputModule} from "@angular/material/input"; import {PipesRoutingModule} from "./pipes-routing.module"; import {CountryComponent} from "./country/country.component"; +import {NgxMatDatetimePickerModule, NgxMatNativeDateModule} from "@angular-material-components/datetime-picker"; +import {MatDatepickerModule} from "@angular/material/datepicker"; @NgModule({ declarations: [ @@ -32,6 +34,9 @@ import {CountryComponent} from "./country/country.component"; MatSelectModule, FormsModule, MatInputModule, + NgxMatDatetimePickerModule, + MatDatepickerModule, + NgxMatNativeDateModule, ], }) export class PipesModule { diff --git a/projects/angular-intl-demo/src/index.html b/projects/angular-intl-demo/src/index.html index 171e0b50..aaf172a9 100644 --- a/projects/angular-intl-demo/src/index.html +++ b/projects/angular-intl-demo/src/index.html @@ -10,7 +10,7 @@ - + diff --git a/projects/angular-intl-demo/src/styles.scss b/projects/angular-intl-demo/src/styles.scss index fa39552e..98c76323 100644 --- a/projects/angular-intl-demo/src/styles.scss +++ b/projects/angular-intl-demo/src/styles.scss @@ -1,4 +1,43 @@ -/* You can add global styles to this file, and also import other style files */ +@use "@angular/material" as mat; + +@include mat.core(); + +$light-theme: mat.define-light-theme(( + color: ( + primary: mat.define-palette(mat.$deep-purple-palette), + accent: mat.define-palette(mat.$deep-orange-palette), + ), + typography: mat.define-typography-config(), + density: 0, +)); + +$dark-theme: mat.define-dark-theme(( + color: ( + primary: mat.define-palette(mat.$deep-purple-palette), + accent: mat.define-palette(mat.$deep-orange-palette), + ), +)); + +@include mat.legacy-button-color($light-theme); +@include mat.button-theme($light-theme); +@include mat.toolbar-theme($light-theme); +@include mat.tabs-theme($light-theme); +@include mat.select-theme($light-theme); +@include mat.input-theme($light-theme); +@include mat.datepicker-theme($light-theme); +@include mat.form-field-theme($light-theme); + +@media (prefers-color-scheme: dark) { + @include mat.core-color($dark-theme); + @include mat.legacy-button-color($dark-theme); + @include mat.button-color($dark-theme); + @include mat.toolbar-color($dark-theme); + @include mat.tabs-color($dark-theme); + @include mat.select-color($dark-theme); + @include mat.input-color($dark-theme); + @include mat.datepicker-color($dark-theme); + @include mat.form-field-color($dark-theme); +} html, body { height: 100%;