chore: add time-picker demo

projects/demo-app/src/app/app.component.html

@@ -38,6 +38,12 @@ <h1 class="demo-app-name">hug/ngx-components Demo</h1>
                     <span mat-line>Splitter</span>
                 </mat-list-item>
             </mat-nav-list>
+            <mat-nav-list>
+                <mat-list-item title="Timpe Picker" routerLink="/time-picker" routerLinkActive="active">
+                    <mat-icon mat-list-icon>access_time</mat-icon>
+                    <span mat-line>Timpe Picker</span>
+                </mat-list-item>
+            </mat-nav-list>
         </mat-sidenav>
 
         <mat-sidenav-content>

projects/demo-app/src/app/app.component.ts

@@ -1,6 +1,7 @@
 import { MediaMatcher } from '@angular/cdk/layout';
 import { NgFor, NgIf } from '@angular/common';
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, inject, OnDestroy } from '@angular/core';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnDestroy, inject } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
 import { MatIconModule } from '@angular/material/icon';
 import { MatListModule } from '@angular/material/list';
 import { MatSidenavModule } from '@angular/material/sidenav';
@@ -15,6 +16,7 @@ import { RouterModule } from '@angular/router';
     templateUrl: './app.component.html',
     styleUrls: ['./app.component.scss'],
     imports: [
+        MatButtonModule,
         MatIconModule,
         MatListModule,
         MatSidenavModule,

projects/demo-app/src/app/app.routes.ts

@@ -7,5 +7,6 @@ export const appRoutes: Routes = [
     { path: 'overlay', loadComponent: () => import('./overlay/overlay-demo.component').then(m => m.OverlayDemoComponent), data: { title: 'Overlay' } },
     { path: 'snackbar', loadComponent: () => import('./snackbar/snackbar-demo.component').then(m => m.SnackbarDemoComponent), data: { title: 'Snackbar' } },
     { path: 'splitter', loadComponent: () => import('./splitter/splitter-demo.component').then(m => m.SplitterDemoComponent), data: { title: 'Splitter' } },
+    { path: 'time-picker', loadComponent: () => import('./time-picker/time-picker-demo.component').then(m => m.TimePickerDemoComponent), data: { title: 'Time Picker' } },
     { path: '**', redirectTo: 'message-box', pathMatch: 'prefix' }
 ];

projects/demo-app/src/app/message-box/message-box-demo.component.ts

@@ -27,9 +27,9 @@ import { Subject, switchMap, takeUntil } from 'rxjs';
     ]
 })
 export class MessageBoxDemoComponent extends Destroy {
-    public tabIndex = 1;
+    protected tabIndex = 1;
 
-    public closeAction = [
+    protected closeAction = [
         {
             action: (): void => alert('test action'),
             icon: 'clear'

projects/demo-app/src/app/numeric-stepper/numeric-stepper-demo.component.ts

@@ -47,19 +47,19 @@ const numberValidator = (control: AbstractControl): string[] | null => {
     ]
 })
 export class NumericStepperDemoComponent extends Destroy {
-    public tabIndex = 1;
+    protected tabIndex = 1;
 
-    public value1 = 90;
-    public value2 = 9.5;
-    public value3 = 5;
-    public value4 = 1;
-    public value5 = 1;
-    public value6 = 1;
-    public value6min = 0;
-    public value6max = 20;
+    protected value1 = 90;
+    protected value2 = 9.5;
+    protected value3 = 5;
+    protected value4 = 1;
+    protected value5 = 1;
+    protected value6 = 1;
+    protected value6min = 0;
+    protected value6max = 20;
 
-    public numberForm: FormGroup<NumberFormControls>;
-    public onInput1Change$ = new Subject<Event>();
+    protected numberForm: FormGroup<NumberFormControls>;
+    protected onInput1Change$ = new Subject<Event>();
 
     private changeDetectorRef = inject(ChangeDetectorRef);
     private formBuilder = inject(FormBuilder);
@@ -85,19 +85,19 @@ export class NumericStepperDemoComponent extends Destroy {
         });
     }
 
-    public changeValue3(step: number): void {
+    protected changeValue3(step: number): void {
         this.numberForm.controls.numberValue3.setValue(+this.numberForm.controls.numberValue3.value + step);
     }
 
-    public changeValue4(step: number): void {
+    protected changeValue4(step: number): void {
         this.numberForm.controls.numberValue4.setValue(+this.numberForm.controls.numberValue4.value + step);
     }
 
-    public changeValue5(step: number): void {
+    protected changeValue5(step: number): void {
         this.numberForm.controls.numberValue5.setValue(+this.numberForm.controls.numberValue5.value + step);
     }
 
-    public changeValue6(step: number): void {
+    protected changeValue6(step: number): void {
         const value = Math.max(Math.min(+this.numberForm.controls.numberValue6.value + step, this.value6max), this.value6min);
         this.numberForm.controls.numberValue6.setValue(value);
     }

projects/demo-app/src/app/overlay/overlay-demo.component.ts

@@ -31,21 +31,21 @@ export class OverlayDemoComponent {
     @ViewChild('contextMenu')
     private contextMenu?: OverlayComponent;
 
-    public selected = '';
-    public items = [
+    protected selected = '';
+    protected items = [
         { text: 'Refresh' },
         { text: 'Settings' },
         { text: 'Help', disabled: true },
         { text: 'Sign Out' }
     ];
 
-    public tabIndex = 1;
+    protected tabIndex = 1;
 
-    public select(text: string): void {
+    protected select(text: string): void {
         this.selected = text;
     }
 
-    public onContextMenu(event: MouseEvent): boolean {
+    protected onContextMenu(event: MouseEvent): boolean {
         const parent = event.currentTarget as HTMLElement;
         const parentRect = parent.getBoundingClientRect();
         this.contextMenu?.show(event.pageX - parentRect.left, event.pageY - parentRect.top);

projects/demo-app/src/app/snackbar/snackbar-demo.component.ts

@@ -34,21 +34,21 @@ class Message {
     ]
 })
 export class SnackbarDemoComponent {
-    public tabIndex = 1;
+    protected tabIndex = 1;
     /*
      The example below demonstrate how you can dynamically add snackbars using *ngFor structural directive.
      Here the Observable simulate items being push from the server
      */
-    public messages$: Observable<Message[]>;
+    protected messages$: Observable<Message[]>;
 
-    public dangers$: Observable<Message[]>;
-    public warnings$: Observable<Message[]>;
-    public successes$: Observable<Message[]>;
-    public infos$: Observable<Message[]>;
+    protected dangers$: Observable<Message[]>;
+    protected warnings$: Observable<Message[]>;
+    protected successes$: Observable<Message[]>;
+    protected infos$: Observable<Message[]>;
 
-    public push = new EventEmitter<string>();
+    protected push = new EventEmitter<string>();
 
-    public simpleGate = false;
+    protected simpleGate = false;
 
     private statusService = inject(StatusService);
 

projects/demo-app/src/app/splitter/splitter-demo.component.scss

@@ -34,7 +34,6 @@ app-splitter-demo {
 
                     .mat-tab-body-content {
                         overflow: hidden;
-                        padding: 5px;
 
                         .mat-card {
                             height: calc(100% - 10px);
@@ -50,6 +49,10 @@ app-splitter-demo {
                                     width: 100%;
                                     height: 100%;
                                     overflow: hidden;
+
+                                    split-area {
+                                        padding: 0.5rem 0;
+                                    }
                                 }
                             }
                         }

projects/demo-app/src/app/time-picker/time-picker-demo.component.html

@@ -0,0 +1,101 @@
+<mat-tab-group [selectedIndex]="tabIndex" (selectedTabChange)="tabIndex = $event.index">
+    <mat-tab label="API REFERENCE"></mat-tab>
+    <mat-tab label="EXAMPLES"></mat-tab>
+</mat-tab-group>
+
+<mat-card class="demo-card demo-basic" *ngIf="tabIndex === 0">
+    <!-- <markdown [url]="'https://raw.githubusercontent.com/DSI-HUG/dejajs-components/develop/projects/deja-js/component/time-picker/readme.md'"></markdown> -->
+</mat-card>
+
+<div *ngIf="tabIndex === 1">
+    <mat-card class="demo-card">
+        <mat-toolbar color="primary">Basic Time Picker with ngModel and ngModelChange event</mat-toolbar>
+        <mat-card-content>
+            <div class="flex-layout">
+                <div>
+                    <h3>Without initial hours and minutes (null)</h3>
+                    <div class="flex-layout-center">
+                        <time-picker [ngModel]="date0" (ngModelChange)="date0Changed($event)" mode="fullTime"></time-picker>
+                    </div>
+                    <p>Selected : {{ date0 | date: 'HH:mm' }}</p>
+                </div>
+                <div>
+                    <h3>With initial hours and minutes (09:05)</h3>
+                    <div class="flex-layout-center">
+                        <time-picker appearance="legacy" [ngModel]="date1" (ngModelChange)="date1Changed($event)" mode="fullTime"></time-picker>
+                    </div>
+                    <p>Selected : {{ date1 | date: 'HH:mm' }}</p>
+                </div>
+            </div>
+        </mat-card-content>
+    </mat-card>
+    <mat-card class="demo-card">
+        <mat-toolbar color="primary">Time Picker modes</mat-toolbar>
+        <mat-card-content>
+            <div class="flex-layout">
+                <div>
+                    <h3>With hours disabled</h3>
+                    <div class="flex-layout-center">
+                        <time-picker [ngModel]="date2" (ngModelChange)="date2Changed($event)" [step]="5" mode="fullTimeWithHoursDisabled"></time-picker>
+                    </div>
+                    <p>Selected date : {{ date2 | date: 'HH:mm' }}</p>
+                </div>
+                <div>
+                    <h3>With minutes disabled</h3>
+                    <div class="flex-layout-center">
+                        <time-picker [ngModel]="date3" (ngModelChange)="date3Changed($event)" mode="fullTimeWithMinutesDisabled"></time-picker>
+                    </div>
+                    <p>Selected date : {{ date3 | date: 'HH:mm' }}</p>
+                </div>
+                <div>
+                    <h3>With hours displayed only</h3>
+                    <div class="flex-layout-center">
+                        <time-picker [ngModel]="date4" (ngModelChange)="date4Changed($event)" mode="hoursOnly"></time-picker>
+                    </div>
+                    <p>Selected date : {{ date4 | date: 'HH:mm' }}</p>
+                </div>
+                <div>
+                    <h3>With minutes displayed only inline in a form</h3>
+                    <div class="flex-layout-center">
+                        <time-picker inform [ngModel]="date5" (ngModelChange)="date5Changed($event)" mode="minutesOnly"></time-picker>
+                        <mat-form-field appearance="outline">
+                            <input matInput name="fakeInput" [(ngModel)]="fakeInput" />
+                        </mat-form-field>
+                    </div>
+                    <p>Selected date : {{ date5 | date: 'HH:mm' }}</p>
+                </div>
+            </div>
+        </mat-card-content>
+    </mat-card>
+    <mat-card class="demo-card">
+        <mat-toolbar color="primary">Time Picker disable</mat-toolbar>
+        <mat-card-content>
+            <div class="flex-layout">
+                <div>
+                    <h3>Time Picker disabled</h3>
+                    <div class="flex-layout-center">
+                        <time-picker [ngModel]="date6" (ngModelChange)="date6Changed($event)" [disabled]="disable6"></time-picker>
+                    </div>
+                    <p>
+                        <mat-checkbox name="disable-checkbox" [(ngModel)]="disable6">Disable time-picker</mat-checkbox>
+                    </p>
+                    <p>Selected date : {{ date6 | date: 'HH:mm' }}</p>
+                </div>
+            </div>
+        </mat-card-content>
+    </mat-card>
+    <mat-card class="demo-card">
+        <mat-toolbar color="primary">Time Picker form control</mat-toolbar>
+        <mat-card-content>
+            <div class="flex-layout">
+                <form [formGroup]="dateForm">
+                    <h3>Time Picker form control</h3>
+                    <div class="flex-layout-center">
+                        <time-picker formControlName="date7"></time-picker>
+                    </div>
+                    <p>Selected date : {{ dateForm.controls.date7.value | date: 'HH:mm' }}</p>
+                </form>
+            </div>
+        </mat-card-content>
+    </mat-card>
+</div>

projects/demo-app/src/app/time-picker/time-picker-demo.component.scss

@@ -0,0 +1,42 @@
+app-time-picker-demo {
+    .flex-layout {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+
+        > div,
+        > form {
+            flex: 1 1 auto;
+        }
+    }
+
+    .flex-layout-center {
+        display: flex;
+        align-items: center;
+    }
+
+    .time-picker-actions {
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: space-evenly;
+    }
+
+    /* Override Material datepicker style */
+    .mat-calendar-body-cell-content.mat-focus-indicator {
+        position: absolute !important;
+    }
+
+    .mat-datepicker-content-container {
+        flex-direction: row !important;
+    }
+
+    .mat-datepicker-actions {
+        margin-left: 64px !important;
+    }
+
+    time-picker[inform] {
+        padding-right: 1rem;
+    }
+}