@dhutaryan/ngx-mat-timepicker 0.0.2 → 12.0.0

package/README.md

@@ -1,116 +1,120 @@
-**It's a beta version. Don't use it in production till major version release.**
-
-# ngx-mat-timepicker
-
-[![npm](https://img.shields.io/npm/v/@dhutaryan/ngx-mat-timepicker.svg)](https://www.npmjs.com/package/@dhutaryan/ngx-mat-timepicker)
-[![code factor](https://img.shields.io/codefactor/grade/github/dgutoryan/ngx-mat-timepicker)](https://www.codefactor.io/repository/github/dgutoryan/ngx-mat-timepicker)
-[![license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/dgutoryan/ngx-timepicker/blob/master/LICENSE)
-
-The timepicker module using Angular material.
-
-## Installation
-
-You have to install the Angular Material and set it up. [Learn more about the setup](https://material.angular.io/guide/getting-started).
-
-Install the library:
-
-```bash
-$ npm install --save @dhutaryan/ngx-mat-timepicker
-```
-
-or
-
-```bash
-$ yarn add @dhutaryan/ngx-mat-timepicker
-```
-
-## Getting started
-
-Import `MatTimepickerModule` to your project.
-
-```typescript
-import { MatTimepickerModule } from "@dhutaryan/ngx-mat-timepicker";
-
-@NgModule({
-  imports: [
-    // ...
-    MatTimepickerModule,
-    // ...
-  ],
-})
-export class MyModule {}
-```
-
-## Adapter
-
-Add a timepicker adapter.
-
-```typescript
-import { MatNativeDateTimeModule, MatTimepickerModule } from "@dhutaryan/ngx-mat-timepicker";
-
-@NgModule({
-  imports: [
-    // ...
-    MatTimepickerModule,
-    MatNativeDateTimeModule,
-    // ...
-  ],
-})
-export class MyModule {}
-```
-
-or create your own
-
-```typescript
-import { MatTimepickerModule } from "@dhutaryan/ngx-mat-timepicker";
-
-@NgModule({
-  imports: [
-    // ...
-    MatTimepickerModule,
-    // ...
-  ],
-  providers: [{ provide: TimeAdapter, useClass: MyTimeAdapter }],
-})
-export class MyModule {}
-```
-
-## Theming
-
-Then you have to define a theme. [More details about theming](https://material.angular.io/guide/theming).
-
-```scss
-@use "@dhutaryan/ngx-mat-timepicker" as mat-timepicker;
-
-@include mat-timepicker.timepicker-theme($theme);
-```
-
-## Usage
-
-```html
-<mat-form-field>
-  <input type="text" matInput [matTimepicker]="timepicker" />
-  <mat-timepicker-toggle matSuffix [for]="timepicker"></mat-timepicker-toggle>
-  <mat-timepicker #timepicker></mat-timepicker>
-</mat-form-field>
-```
-
-## Locale
-
-Default locale is `en-US`. You can set your locale as:
-
-```typescript
-import { MAT_TIME_LOCALE } from "@dhutaryan/ngx-mat-timepicker";
-
-@NgModule({
-  imports: [
-    // ...
-  ],
-  providers: [{ provide: MAT_TIME_LOCALE, useValue: "en-GB" }],
-})
-export class MyModule {}
-```
-
-## License
-
-MIT
+# ngx-mat-timepicker
+
+[![npm](https://img.shields.io/npm/v/@dhutaryan/ngx-mat-timepicker.svg)](https://www.npmjs.com/package/@dhutaryan/ngx-mat-timepicker)
+[![code factor](https://img.shields.io/codefactor/grade/github/dgutoryan/ngx-mat-timepicker)](https://www.codefactor.io/repository/github/dgutoryan/ngx-mat-timepicker)
+[![license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/dgutoryan/ngx-timepicker/blob/master/LICENSE)
+
+The timepicker module using Angular material.
+
+### Versions
+
+| mat-timepicker | Angular             |
+| -------------- | ------------------- |
+| 12.x.x         | >=12.0.0 && <15.0.0 |
+
+## Installation
+
+You have to install the Angular Material and set it up. [Learn more about the setup](https://material.angular.io/guide/getting-started).
+
+Install the library:
+
+```bash
+$ npm install --save @dhutaryan/ngx-mat-timepicker
+```
+
+or
+
+```bash
+$ yarn add @dhutaryan/ngx-mat-timepicker
+```
+
+## Getting started
+
+Import `MatTimepickerModule` to your project.
+
+```typescript
+import { MatTimepickerModule } from "@dhutaryan/ngx-mat-timepicker";
+
+@NgModule({
+  imports: [
+    // ...
+    MatTimepickerModule,
+    // ...
+  ],
+})
+export class MyModule {}
+```
+
+## Adapter
+
+Add a timepicker adapter.
+
+```typescript
+import { MatNativeDateTimeModule, MatTimepickerModule } from "@dhutaryan/ngx-mat-timepicker";
+
+@NgModule({
+  imports: [
+    // ...
+    MatTimepickerModule,
+    MatNativeDateTimeModule,
+    // ...
+  ],
+})
+export class MyModule {}
+```
+
+or create your own
+
+```typescript
+import { MatTimepickerModule } from "@dhutaryan/ngx-mat-timepicker";
+
+@NgModule({
+  imports: [
+    // ...
+    MatTimepickerModule,
+    // ...
+  ],
+  providers: [{ provide: TimeAdapter, useClass: MyTimeAdapter }],
+})
+export class MyModule {}
+```
+
+## Theming
+
+Then you have to define a theme. [More details about theming](https://material.angular.io/guide/theming).
+
+```scss
+@use "@dhutaryan/ngx-mat-timepicker" as mat-timepicker;
+
+@include mat-timepicker.timepicker-theme($theme);
+```
+
+## Usage
+
+```html
+<mat-form-field>
+  <input type="text" matInput [matTimepicker]="timepicker" />
+  <mat-timepicker-toggle matSuffix [for]="timepicker"></mat-timepicker-toggle>
+  <mat-timepicker #timepicker></mat-timepicker>
+</mat-form-field>
+```
+
+## Locale
+
+Default locale is `en-US`. You can set your locale as:
+
+```typescript
+import { MAT_TIME_LOCALE } from "@dhutaryan/ngx-mat-timepicker";
+
+@NgModule({
+  imports: [
+    // ...
+  ],
+  providers: [{ provide: MAT_TIME_LOCALE, useValue: "en-GB" }],
+})
+export class MyModule {}
+```
+
+## License
+
+MIT

package/_index.scss

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

package/_timepicker-theme.scss

@@ -1,109 +1,148 @@
-@use "sass:color";
-@use "sass:map";
-@use "@angular/material" as mat;
-
-$timepicker-content-title-font-size: 10px !default;
-$input-font-size: 2rem !default;
-$inputs-separator-font-size: 3rem !default;
-$inputs-separator-line-height: 1.25rem;
-$primary-opacity: 0.15;
-
-@mixin color($config-or-theme) {
-  $config: mat.get-color-config($config-or-theme);
-  $is-dark-theme: map.get($config, is-dark);
-  $primary: map.get($config, primary);
-  $foreground: map.get($config, foreground);
-  $background: map.get($config, background);
-
-  .mat-timepicker-content {
-    @include mat.elevation(4);
-    background-color: mat.get-color-from-palette($background, card);
-    color: mat.get-color-from-palette($foreground, text);
-  }
-
-  .mat-timepicker-content-layout-title {
-    color: mat.get-color-from-palette($foreground, secondary-text);
-  }
-
-  .mat-time-toggle-mode-button svg {
-    fill: mat.get-color-from-palette($foreground, secondary-text);
-  }
-
-  .mat-time-period {
-    border-color: mat.get-color-from-palette($foreground, divider);
-  }
-
-  .mat-time-period-item-active,
-  .mat-clock-dial-value.mat-clock-dial-value-active {
-    color: mat.get-color-from-palette($primary);
-    background-color: mat.get-color-from-palette($primary, $primary-opacity);
-  }
-
-  .mat-clock-dial-value,
-  .mat-clock-dial {
-    background-color: mat.get-color-from-palette($background, background);
-  }
-
-  .mat-clock-dial::before {
-    background-color: mat.get-color-from-palette($primary);
-  }
-
-  .mat-clock-dial-hand {
-    background-color: mat.get-color-from-palette($primary);
-
-    &::before {
-      background-color: mat.get-color-from-palette($primary);
-    }
-  }
-
-  [mat-mini-fab]:not(.mat-primary):not(.mat-accent):not(.mat-warn) {
-    background: transparent;
-
-    &:hover {
-      background-color: mat.get-color-from-palette($background, hover);
-    }
-  }
-}
-
-@mixin typography($config-or-theme) {
-  $config: mat.get-typography-config($config-or-theme);
-
-  h6.mat-timepicker-content-layout-title {
-    font: {
-      size: $timepicker-content-title-font-size;
-      weight: mat.font-weight($config, body-2);
-    }
-  }
-
-  .mat-time-inputs-field {
-    input.mat-input-element {
-      font-size: $input-font-size;
-      line-height: normal;
-    }
-  }
-
-  .mat-timepicker-content-layout-separator {
-    font-size: $inputs-separator-font-size;
-    line-height: $inputs-separator-line-height;
-  }
-
-  .mat-clock-dial-value {
-    font-size: $input-font-size;
-  }
-}
-
-@mixin theme($theme-or-color-config) {
-  $color: mat.get-color-config($theme-or-color-config);
-  $typography: mat.get-typography-config($theme-or-color-config);
-
-  @if $color != null {
-    @include color($color);
-  }
-
-  @if $typography != null {
-    @include typography($typography);
-  } @else {
-    $typography: mat.define-typography-config();
-    @include typography($typography);
-  }
-}
+@use "sass:color";
+@use "sass:map";
+@use "@angular/material" as mat;
+
+$timepicker-content-title-font-size: 10px !default;
+$input-font-size: 2rem !default;
+$inputs-separator-font-size: 3rem !default;
+$inputs-separator-line-height: 1.25rem;
+$primary-opacity: 0.15;
+
+@mixin _color($palette) {
+  .mat-time-period-item-active,
+  .mat-clock-dial-value.mat-clock-dial-value-active {
+    color: mat.get-color-from-palette($palette);
+    background-color: mat.get-color-from-palette($palette, $primary-opacity);
+  }
+
+  .mat-clock-dial::before {
+    background-color: mat.get-color-from-palette($palette);
+  }
+
+  .mat-clock-dial-hand {
+    background-color: mat.get-color-from-palette($palette);
+
+    &::before {
+      background-color: mat.get-color-from-palette($palette);
+    }
+  }
+
+  .mat-clock-dial-hand.mat-clock-dial-hand-disabled {
+    &::before {
+      background-color: color.adjust(
+        mat.get-color-from-palette($palette),
+        $alpha: -0.6
+      );
+    }
+  }
+
+  [mat-mini-fab].mat-clock-dial-cell.mat-button-disabled {
+    background-color: color.adjust(
+      mat.get-color-from-palette($palette),
+      $alpha: -0.6
+    );
+  }
+}
+
+@mixin color($config-or-theme) {
+  $config: mat.get-color-config($config-or-theme);
+  $is-dark-theme: map.get($config, is-dark);
+  $primary: map.get($config, primary);
+  $accent: map.get($config, accent);
+  $warn: map.get($config, warn);
+  $foreground: map.get($config, foreground);
+  $background: map.get($config, background);
+
+  @include _color(map.get($config, primary));
+
+  .mat-timepicker-content {
+    @include mat.elevation(4);
+    background-color: mat.get-color-from-palette($background, card);
+    color: mat.get-color-from-palette($foreground, text);
+
+    &.mat-accent {
+      @include _color(map.get($config, accent));
+    }
+
+    &.mat-warn {
+      @include _color(map.get($config, warn));
+    }
+  }
+
+  .mat-timepicker-content-layout-title {
+    color: mat.get-color-from-palette($foreground, secondary-text);
+  }
+
+  .mat-time-toggle-mode-button svg {
+    fill: mat.get-color-from-palette($foreground, secondary-text);
+  }
+
+  .mat-time-period {
+    border-color: mat.get-color-from-palette($foreground, divider);
+  }
+
+  .mat-time-period-item-disabled {
+    color: mat.get-color-from-palette($foreground, disabled-button);
+    background-color: mat.get-color-from-palette($background, disabled-button);
+  }
+
+  .mat-clock-dial-value,
+  .mat-clock-dial {
+    background-color: mat.get-color-from-palette($background, background);
+  }
+
+  .mat-clock-dial-hand.mat-clock-dial-hand-disabled {
+    background-color: transparent;
+  }
+
+  [mat-mini-fab]:not(.mat-primary):not(.mat-accent):not(.mat-warn) {
+    background: transparent;
+
+    &:hover {
+      background-color: mat.get-color-from-palette($background, hover);
+    }
+  }
+}
+
+@mixin typography($config-or-theme) {
+  $config: mat.get-typography-config($config-or-theme);
+
+  h6.mat-timepicker-content-layout-title {
+    font: {
+      size: $timepicker-content-title-font-size;
+      weight: mat.font-weight($config, body-2);
+    }
+  }
+
+  .mat-time-inputs-field {
+    input.mat-input-element {
+      font-size: $input-font-size;
+      line-height: normal;
+    }
+  }
+
+  .mat-timepicker-content-layout-separator {
+    font-size: $inputs-separator-font-size;
+    line-height: $inputs-separator-line-height;
+  }
+
+  .mat-clock-dial-value {
+    font-size: $input-font-size;
+  }
+}
+
+@mixin theme($theme-or-color-config) {
+  $color: mat.get-color-config($theme-or-color-config);
+  $typography: mat.get-typography-config($theme-or-color-config);
+
+  @if $color != null {
+    @include color($color);
+  }
+
+  @if $typography != null {
+    @include typography($typography);
+  } @else {
+    $typography: mat.define-typography-config();
+    @include typography($typography);
+  }
+}