feat(timepicker): component TimePicker (#42)

package.json

@@ -163,6 +163,7 @@
         "server-dev:theme-picker": "npm run server-dev -- --env.component theme-picker",
         "server-dev:tree": "npm run server-dev -- --env.component tree",
         "server-dev:typography": "npm run server-dev -- --env.component typography",
-        "server-dev:tooltip": "npm run server-dev -- --env.component tooltip"
+        "server-dev:tooltip": "npm run server-dev -- --env.component tooltip",
+        "server-dev:timepicker": "npm run server-dev -- --env.component timepicker"
     }
 }

src/lib-dev/timepicker/module.ts

@@ -0,0 +1,54 @@
+import {
+    Component,
+    NgModule,
+    ViewEncapsulation
+} from '@angular/core';
+
+import { FormsModule } from '@angular/forms';
+import { BrowserModule } from '@angular/platform-browser';
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import { McFormFieldModule } from '@ptsecurity/mosaic/form-field';
+import { McTimepickerModule } from '@ptsecurity/mosaic/timepicker';
+
+import { McButtonModule } from '../../lib/button';
+import { McIconModule } from '../../lib/icon';
+
+
+@Component({
+    selector: 'app',
+    styleUrls: ['./styles.css'],
+    template: require('./template.html'),
+    encapsulation: ViewEncapsulation.None
+})
+export class TimepickerDemoComponent {
+    timeValue1: Date = new Date();
+    timeValue2: Date = new Date();
+    isDisabled: boolean = false;
+
+    toggleDisable() {
+        this.isDisabled = !this.isDisabled;
+    }
+}
+
+@NgModule({
+    declarations: [
+        TimepickerDemoComponent
+    ],
+    imports: [
+        BrowserModule,
+        FormsModule,
+        McTimepickerModule,
+        McFormFieldModule,
+        McButtonModule,
+        McIconModule
+    ],
+    bootstrap: [
+        TimepickerDemoComponent
+    ]
+})
+export class TimepickerDemoModule {}
+
+
+platformBrowserDynamic()
+    .bootstrapModule(TimepickerDemoModule)
+    .catch((error) => console.error(error)); // tslint:disable-line no-console

src/lib-dev/timepicker/styles.scss

@@ -0,0 +1,16 @@
+@import '~@ptsecurity/mosaic-icons/dist/styles/mc-icons';
+@import '../../lib/core/theming/prebuilt/default-theme';
+
+.demo-timepicker_full {
+    width: 150px;
+}
+
+.demo-timepicker_short {
+    width: 120px;
+}
+
+header {
+    $config: mc-typography-config();
+
+    @include mc-typography-level-to-styles($config, caption);
+}

src/lib-dev/timepicker/template.html

@@ -0,0 +1,51 @@
+<div class="mc-headline">Timepicker</div>
+<div class="mc-body">
+    <h3 class="mc-title">Example 1</h3>
+    <p>Params:</p>
+    <ul>
+        <li><span class="mc-body_mono">min-time="10:00:00"</span><br>
+        <li><span class="mc-body_mono">max-time="13:30:00"</span><br>
+        <li><span class="mc-body_mono">format `HH:mm:ss`</span>
+    </ul>
+
+
+    <div>
+        <button mc-button (click)="toggleDisable()">Toggle disabled state</button>
+        <br>
+        <span class="mc-small-text">current disable state === {{isDisabled}}</span>
+    </div>
+    <br>
+
+    <section class="demo-timepicker_full">
+        <mc-form-field >
+            <i mcPrefix mc-icon="mc-clock_16"></i>
+            <input mcTimepicker
+                   [(ngModel)]="timeValue1"
+                   time-format="HH:mm:ss"
+                   min-time="10:00:00"
+                   max-time="13:30:00"
+                   [disabled]="isDisabled">
+        </mc-form-field>
+    </section>
+
+    <br>
+
+    <p class="mc-caption_mono" *ngIf="timeValue1 !== null">
+        Current time value:
+        {{timeValue1.getHours()}}:
+        {{timeValue1.getMinutes()}}:
+        {{timeValue1.getSeconds()}}
+    </p>
+
+    <p class="mc-caption_mono" *ngIf="timeValue1 === null"> Incorrect input - null result</p>
+
+    <br>
+
+    <!--<h4>No any validation, format `HH:mm`, no icon:</h4>-->
+    <!--<mc-timepicker [(ngModel)]="timeValue2"-->
+    <!--time-format="HH:mm">-->
+    <!--</mc-timepicker>-->
+    <!--<br>-->
+    <!--<p>Current time value: {{timeValue2.getHours()}}:{{timeValue2.getMinutes()}}:{{timeValue2.getSeconds()}}</p>-->
+
+</div>

src/lib/public-api.ts

@@ -18,6 +18,7 @@ export * from '@ptsecurity/mosaic/progress-spinner';
 export * from '@ptsecurity/mosaic/radio';
 export * from '@ptsecurity/mosaic/tree';
 export * from '@ptsecurity/mosaic/tag';
+export * from '@ptsecurity/mosaic/timepicker';
 export * from '@ptsecurity/mosaic/select';
 export * from '@ptsecurity/mosaic/splitter';
 export * from '@ptsecurity/mosaic/tooltip';

src/lib/timepicker/index.ts

@@ -0,0 +1 @@
+export * from './public-api';

src/lib/timepicker/public-api.ts

@@ -0,0 +1,3 @@
+export * from './timepicker.module';
+export * from './timepicker.constants';
+export * from './timepicker';

src/lib/timepicker/timepicker.constants.ts

@@ -0,0 +1,32 @@
+export enum TimeParts {
+    hours,
+    minutes,
+    seconds
+}
+
+export enum TimeFormats {
+    HHmmss = 'HH:mm:ss',
+    HHmm = 'HH:mm'
+}
+
+export const TIMEFORMAT_PLACEHOLDERS: { [timeFormat: string]: string } = {
+    'hh:mm:ss': '  :  :  ',
+    'hh:mm': '  :  '
+};
+
+export const DEFAULT_TIME_FORMAT: TimeFormats = TimeFormats.HHmm;
+
+export const HOURS_MINUTES_SECONDS_REGEXP =
+    new RegExp(/^([0-9]|0[0-9]|1[0-9]|2[0-3]):([0-5][0-9]|[0-9]):([0-5][0-9]|[0-9])?$/);
+export const HOURS_MINUTES_REGEXP = /^([0-9]|0[0-9]|1[0-9]|2[0-3]):([0-5][0-9]|[0-9])?$/;
+export const HOURS_ONLY_REGEXP = /^([0-9]|0[0-9]|1[0-9]|2[0-3]):?$/;
+
+export const SECONDS_PER_MINUTE: number = 59;
+export const MINUTES_PER_HOUR: number = 59;
+export const HOURS_PER_DAY: number = 23;
+
+// TODO Move it to common CDK
+export const ARROW_UP_KEYCODE: string = 'ArrowUp';
+export const ARROW_DOWN_KEYCODE: string = 'ArrowDown';
+export const ARROW_LEFT_KEYCODE: string = 'ArrowLeft';
+export const ARROW_RIGHT_KEYCODE: string = 'ArrowRight';

src/lib/timepicker/timepicker.module.ts

@@ -0,0 +1,25 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+
+import { A11yModule } from '@ptsecurity/cdk/a11y';
+import { PlatformModule } from '@ptsecurity/cdk/platform';
+
+import { McTimepicker } from './timepicker';
+
+
+@NgModule({
+    imports: [
+        CommonModule,
+        A11yModule,
+        PlatformModule,
+        FormsModule
+    ],
+    declarations: [
+        McTimepicker
+    ],
+    exports: [
+        McTimepicker
+    ]
+})
+export class McTimepickerModule {}