@dhutaryan/ngx-mat-timepicker 0.0.1

package/README.md

@@ -0,0 +1,100 @@
+**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-timepicker)](https://www.codefactor.io/repository/github/dgutoryan/ngx-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>
+```
+
+## License
+
+MIT

package/_index.scss

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

package/_timepicker-theme.scss

@@ -0,0 +1,109 @@
+@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);
+  }
+}