feat: changes for M3

BREAKING CHANGE: peer deps updated to angular v18

projects/docs/src/app/app.component.html

@@ -10,6 +10,9 @@ <h3 style="margin: 0">ngx-mat-timepicker</h3>
     </ng-template>
     <ng-template #controls>
       <div class="right-content">
+        <button ng-doc-button-icon ngDocTooltip="Toggle M2/M3" size="large" (click)="toggleMaterialDesign()">
+          <ng-doc-icon customIcon="palette" [size]="24"></ng-doc-icon>
+        </button>
         <ng-doc-theme-toggle></ng-doc-theme-toggle>
         <a
           href="https://github.com/dhutaryan/ngx-mat-timepicker"

projects/docs/src/app/app.component.ts

@@ -1,9 +1,33 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { DOCUMENT } from '@angular/common';
+import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
+import { NgDocThemeService, NgDocTheme, NG_DOC_NIGHT_THEME } from '@ng-doc/app';
 
 @Component({
   selector: 'docs-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class AppComponent {}
+export class AppComponent {
+  private themeService = inject(NgDocThemeService);
+  private document = inject(DOCUMENT);
+
+  constructor() {
+    this.handleTheme(this.themeService.currentTheme);
+    this.themeService.themeChanges().subscribe(theme=>{
+      this.handleTheme(theme);
+    })
+  }
+
+  private handleTheme(theme: NgDocTheme | undefined) {
+    if (theme?.id === NG_DOC_NIGHT_THEME.id) {
+      this.document.documentElement.classList.add("dark-theme");
+    } else {
+      this.document.documentElement.classList.remove("dark-theme");
+    }
+  }
+
+  toggleMaterialDesign() {
+    this.document.documentElement.classList.toggle("m2");
+  }
+}

projects/docs/src/app/app.module.ts

@@ -17,6 +17,7 @@ import {
   NG_DOC_DEFAULT_PAGE_PROCESSORS,
   NgDocThemeToggleComponent,
 } from '@ng-doc/app';
+import { NgDocTooltipDirective } from '@ng-doc/ui-kit';
 
 import { NG_DOC_ROUTING, provideNgDocContext } from '@ng-doc/generated';
 import { AppComponent } from './app.component';
@@ -41,6 +42,7 @@ import { AppComponent } from './app.component';
     NgDocButtonIconComponent,
     NgDocIconComponent,
     NgDocThemeToggleComponent,
+    NgDocTooltipDirective
   ],
   providers: [
     provideNgDocContext(),

projects/docs/src/app/getting-started/index.md

@@ -69,11 +69,15 @@ export class MyModule {}
 
 Then you have to define a theme. [More details about theming](https://material.angular.io/guide/theming). As ngx-mat-timepicker uses some material components, it's necessary to add theme for them.
 
+`ngx-mat-timepicker` supports both, Material 2 (M2) and Material 3 (M3) designs.
+
+### M2 Design Theme
+
 ```scss
 @use "@angular/material" as mat;
 @use "@dhutaryan/ngx-mat-timepicker" as mat-timepicker;
 
-$my-theme: mat.define-light-theme(...);
+$my-theme: mat.m2-define-light-theme(...);
 
 // timepicker uses these component
 @include mat.form-field-theme($my-theme);
@@ -85,3 +89,25 @@ $my-theme: mat.define-light-theme(...);
 // timepicker theme
 @include mat-timepicker.timepicker-theme($my-theme);
 ```
+
+### M3 Design Theme
+
+```scss
+@use "@angular/material" as mat;
+@use "@dhutaryan/ngx-mat-timepicker" as mat-timepicker;
+
+$my-theme: mat.define-theme(...);
+
+:root {
+  // timepicker uses these component
+  @include mat.form-field-theme($my-theme);
+  @include mat.input-theme($my-theme);
+  @include mat.button-theme($my-theme);
+  @include mat.fab-theme($my-theme);
+  @include mat.icon-button-theme($my-theme);
+  @include mat.divider-theme($my-theme);
+  // timepicker theme
+  @include mat-timepicker.timepicker-theme($my-theme);
+}
+
+```

projects/docs/src/styles.scss

@@ -1,10 +1,10 @@
 // Custom Theming for Angular Material
 // For more information: https://material.angular.io/guide/theming
-@use "sass:map";
-@use "@angular/material" as mat;
-@use "projects/mat-timepicker" as mat-timepicker;
+@use 'sass:map';
+@use '@angular/material' as mat;
 
-@use "./styles/theme";
+@use './styles/theme';
+@use './styles/all-components';
 
 // Plus imports for other components in your app.
 
@@ -17,16 +17,23 @@
 // Alternatively, you can import and @include the theme mixins for each component
 // that you are using.
 :root {
-  @include mat.core-theme(theme.$ngx-mat-timepicker-theme);
-  @include mat.toolbar-theme(theme.$ngx-mat-timepicker-theme);
-  @include mat.form-field-theme(theme.$ngx-mat-timepicker-theme);
-  @include mat.input-theme(theme.$ngx-mat-timepicker-theme);
-  @include mat.button-theme(theme.$ngx-mat-timepicker-theme);
-  @include mat.fab-theme(theme.$ngx-mat-timepicker-theme);
-  @include mat.icon-button-theme(theme.$ngx-mat-timepicker-theme);
-  @include mat.divider-theme(theme.$ngx-mat-timepicker-theme);
-  @include mat.card-theme(theme.$ngx-mat-timepicker-theme);
-  @include mat-timepicker.timepicker-theme(theme.$ngx-mat-timepicker-theme);
+  &:not(.m2) {
+    @include all-components.theme(theme.$ngx-mat-timepicker-theme);
+  }
+
+  &.m2 {
+    @include all-components.theme(theme.$ngx-mat-timepicker-theme-m2);
+  }
+
+  &.dark-theme {
+    &:not(.m2) {
+      @include all-components.color(theme.$ngx-mat-timepicker-theme-dark);
+    }
+
+    &.m2 {
+      @include all-components.color(theme.$ngx-mat-timepicker-theme-m2-dark);
+    }
+  }
 }
 
 /* You can add global styles to this file, and also import other style files */

projects/docs/src/styles/_all-components.scss

@@ -0,0 +1,28 @@
+@use '@angular/material' as mat;
+@use 'projects/mat-timepicker' as mat-timepicker;
+
+@mixin theme($theme) {
+  @include mat.core-theme($theme);
+  @include mat.toolbar-theme($theme);
+  @include mat.form-field-theme($theme);
+  @include mat.input-theme($theme);
+  @include mat.button-theme($theme);
+  @include mat.fab-theme($theme);
+  @include mat.icon-button-theme($theme);
+  @include mat.divider-theme($theme);
+  @include mat.card-theme($theme);
+  @include mat-timepicker.timepicker-theme($theme);
+}
+
+@mixin color($theme) {
+    @include mat.core-color($theme);
+    @include mat.toolbar-color($theme);
+    @include mat.form-field-color($theme);
+    @include mat.input-color($theme);
+    @include mat.button-color($theme);
+    @include mat.fab-color($theme);
+    @include mat.icon-button-color($theme);
+    @include mat.divider-color($theme);
+    @include mat.card-color($theme);
+    @include mat-timepicker.timepicker-color($theme);
+  }

projects/docs/src/styles/_theme.scss

@@ -1,5 +1,5 @@
-@use "sass:map";
-@use "@angular/material" as mat;
+@use 'sass:map';
+@use '@angular/material' as mat;
 
 // 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
@@ -12,18 +12,43 @@ $ngx-mat-timepicker-accent: mat.m2-define-palette(
   A400
 );
 
-// The warn palette is optional (defaults to red).
-$ngx-mat-timepicker-warn: mat.m2-define-palette(mat.$m2-red-palette);
-
 // Create the theme object. A theme consists of configurations for individual
 // theming systems such as "color" or "typography".
-$ngx-mat-timepicker-theme: mat.m2-define-light-theme(
+$ngx-mat-timepicker-theme-m2: mat.m2-define-light-theme(
   (
     color: (
       primary: $ngx-mat-timepicker-primary,
       accent: $ngx-mat-timepicker-accent,
-      warn: $ngx-mat-timepicker-warn,
     ),
     typography: mat.m2-define-typography-config(),
   )
 );
+$ngx-mat-timepicker-theme-m2-dark: mat.m2-define-dark-theme(
+  (
+    color: (
+      primary: mat.m2-define-palette(mat.$m2-pink-palette),
+      accent: mat.m2-define-palette(mat.$m2-blue-grey-palette),
+    ),
+    typography: mat.m2-define-typography-config(),
+  )
+);
+
+$ngx-mat-timepicker-theme: mat.define-theme(
+  (
+    color: (
+      theme-type: light,
+      primary: mat.$azure-palette,
+      tertiary: mat.$blue-palette,
+    ),
+  )
+);
+
+$ngx-mat-timepicker-theme-dark: mat.define-theme(
+  (
+    color: (
+      theme-type: dark,
+      primary: mat.$azure-palette,
+      tertiary: mat.$blue-palette,
+    ),
+  )
+);

projects/mat-timepicker/_index.scss

@@ -1 +1 @@
-@forward "./timepicker-theme" as timepicker-* show timepicker-theme;
+@forward "./timepicker-theme" as timepicker-* show timepicker-theme, timepicker-color;