@hug/ngx-time-picker 1.1.0

package/CHANGELOG.md

@@ -0,0 +1,11 @@
+## 1.1.0 (2024-06-23)
+
+
+### 🚀 Features
+
+- **time-picker:** first commit ([721f5e8](https://github.com/DSI-HUG/ngx-components/commit/721f5e8))
+
+
+### ❤️  Thank You
+
+- Badisi

package/README.md

@@ -0,0 +1,6 @@
+@hug/ngx-time-picker
+=======
+
+The sources for this package are in the main [DSI-HUG/ngx-components](https://github.com/dsi-hug/ngx-components) repo. Please file issues and pull requests against that repo.
+
+License: GPL-3.0-only

package/karma.conf.js

@@ -0,0 +1,45 @@
+// Karma configuration file, see link for more information
+// https://karma-runner.github.io/1.0/config/configuration-file.html
+
+module.exports = config => {
+    config.set({
+        basePath: '',
+        frameworks: ['jasmine', '@angular-devkit/build-angular'],
+        plugins: [
+            require('karma-jasmine'),
+            require('karma-chrome-launcher'),
+            require('karma-jasmine-html-reporter'),
+            require('karma-coverage'),
+            require('@angular-devkit/build-angular/plugins/karma')
+        ],
+        client: {
+            jasmine: {
+                // you can add configuration options for Jasmine here
+                // the possible options are listed at https://jasmine.github.io/api/edge/Configuration.html
+                // for example, you can disable the random execution with `random: false`
+                // or set a specific seed with `seed: 4321`
+            },
+            clearContext: false // leave Jasmine Spec Runner output visible in browser
+        },
+        jasmineHtmlReporter: {
+            suppressAll: true // removes the duplicated traces
+        },
+        coverageReporter: {
+            dir: require('path').join(__dirname, '../../coverage/time-picker'),
+            subdir: '.',
+            reporters: [
+                { type: 'html' },
+                { type: 'text-summary' }
+            ]
+        },
+        reporters: ['progress', 'kjhtml'],
+        port: 9876,
+        colors: true,
+        logLevel: config.LOG_INFO,
+        autoWatch: true,
+        browsers: ['Chrome'],
+        singleRun: false,
+        failOnEmptyTestSuite: false,
+        restartOnFileChange: true
+    });
+};

package/ng-package.json

@@ -0,0 +1,10 @@
+{
+    "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+    "dest": "../../dist/time-picker",
+    "assets": [
+        "CHANGELOG.md"
+    ],
+    "lib": {
+        "entryFile": "src/index.ts"
+    }
+}

package/package.json

@@ -0,0 +1,46 @@
+{
+    "name": "@hug/ngx-time-picker",
+    "version": "1.1.0",
+    "description": "HUG Angular - time picker component",
+    "homepage": "https://github.com/dsi-hug/ngx-components",
+    "license": "GPL-3.0-only",
+    "author": "HUG - Hôpitaux Universitaires Genève",
+    "contributors": [
+        "badisi (https://github.com/badisi)",
+        "vapkse (https://github.com/vapkse)"
+    ],
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/dsi-hug/ngx-components.git"
+    },
+    "keywords": [
+        "angular",
+        "material",
+        "material design",
+        "components"
+    ],
+    "sideEffects": false,
+    "scripts": {
+        "lint": "eslint . --fix",
+        "test": "ng test time-picker",
+        "test:ci": "ng test time-picker --watch=false --browsers=ChromeHeadless",
+        "build:ng": "ng build time-picker -c=production",
+        "build": "nx build:ng @hug/ngx-time-picker --verbose",
+        "release": "nx release -p=@hug/ngx-time-picker --yes --verbose",
+        "release:dry-run": "nx release -p=@hug/ngx-time-picker --verbose --dry-run"
+    },
+    "peerDependencies": {
+        "@angular/common": ">= 14",
+        "@angular/core": ">= 14",
+        "@angular/cdk": ">= 14",
+        "@angular/forms": ">= 14",
+        "@angular/material": ">= 14",
+        "rxjs": ">= 7.0.0",
+        "date-fns": "^2.30.0",
+        "@hug/ngx-core": "1.1.4",
+        "@hug/ngx-numeric-stepper": "1.1.1"
+    },
+    "dependencies": {
+        "tslib": "^2.6.3"
+    }
+}

package/src/index.ts

@@ -0,0 +1 @@
+export * from './time-picker.component';

package/src/test.ts

@@ -0,0 +1,28 @@
+// This file is required by karma.conf.js and loads recursively all the .spec and framework files
+
+import 'zone.js';
+import 'zone.js/testing';
+
+import { getTestBed } from '@angular/core/testing';
+import {
+    BrowserDynamicTestingModule,
+    platformBrowserDynamicTesting
+} from '@angular/platform-browser-dynamic/testing';
+
+declare const require: {
+    context: (path: string, deep?: boolean, filter?: RegExp) => {
+        <T>(id: string): T;
+        keys: () => string[];
+    };
+};
+
+// First, initialize the Angular testing environment.
+getTestBed().initTestEnvironment(
+    BrowserDynamicTestingModule,
+    platformBrowserDynamicTesting()
+);
+
+// Then we find all the tests.
+const context = require.context('./', true, /\.spec\.ts$/);
+// And load the modules.
+context.keys().forEach(context);

package/src/time-picker.component.html

@@ -0,0 +1,14 @@
+<!-- Hours -->
+<mat-form-field [appearance]="appearance" class="hours" [class.disabled]="disabled || mode === 'fullTimeWithHoursDisabled'" [style.display]="mode === 'minutesOnly' ? 'none' : 'block'" floatLabel="never">
+    <input #hours matInput type="text" [ngModel]="hoursValue | number:'2.'" (change)="onHoursChange$.next($event)" (keydown)="onKeyDown($event, 'hours')" [disabled]="disabled || mode === 'fullTimeWithHoursDisabled'" [maxLength]="2" autocomplete="off" [placeholder]="defaultPlaceholderHours" (click)="onClick('hours')" />
+    <numeric-stepper (increment)="incrementValue('hours')" (decrement)="decrementValue('hours')"></numeric-stepper>
+</mat-form-field>
+
+<!-- Separator -->
+<span class="time-separator" [style.display]="mode === 'minutesOnly' || mode === 'hoursOnly' ? 'none' : 'block'">:</span>
+
+<!-- Minutes -->
+<mat-form-field [appearance]="appearance" class="minutes" [class.disabled]="disabled || mode === 'fullTimeWithMinutesDisabled'" [style.display]="mode === 'hoursOnly' ? 'none' : 'block'" floatLabel="never">
+    <input #minutes matInput type="text" [ngModel]="minutesValue | number:'2.'" (change)="onMinutesChange$.next($event)" (keydown)="onKeyDown($event, 'minutes')" [disabled]="disabled || mode === 'fullTimeWithMinutesDisabled'" [maxLength]="2" autocomplete="off" [placeholder]="defaultPlaceholderMinutes" (click)="onClick('minutes')" />
+    <numeric-stepper (increment)="incrementValue('minutes')" (decrement)="decrementValue('minutes')"></numeric-stepper>
+</mat-form-field>

package/src/time-picker.component.scss

@@ -0,0 +1,27 @@
+time-picker {
+    display: flex;
+    flex-direction: row;
+    align-items: baseline;
+    justify-content: center;
+
+    &:not([inform]) .mat-form-field-appearance-outline {
+        .mat-form-field-wrapper {
+            padding-bottom: 0;
+
+            .mat-form-field-infix {
+                border-bottom: 0.7em solid transparent;
+            }
+        }
+    }
+
+    mat-form-field[numeric-stepper-form-field] {
+        width: 48px;
+    }
+
+    .time-separator {
+        width: 4px;
+        font-size: 14.5px;
+        line-height: 17px;
+        margin: 0 8px;
+    }
+}

package/src/time-picker.component.ts

@@ -0,0 +1,317 @@
+import { BooleanInput, coerceBooleanProperty, coerceNumberProperty, NumberInput } from '@angular/cdk/coercion';
+import { CommonModule } from '@angular/common';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, EventEmitter, Input, Optional, Output, Self, ViewChild, ViewEncapsulation } from '@angular/core';
+import { ControlValueAccessor, FormsModule, NgControl } from '@angular/forms';
+import { MatFormFieldAppearance, MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
+import { Destroy } from '@hug/ngx-core';
+import { NumericStepperComponent } from '@hug/ngx-numeric-stepper';
+import { isSameHour, set } from 'date-fns';
+import { debounce, distinctUntilChanged, map, Subject, takeUntil, timer } from 'rxjs';
+
+export type TimePickerDisplayMode = 'fullTime' | 'fullTimeWithHoursDisabled' | 'fullTimeWithMinutesDisabled' | 'hoursOnly' | 'minutesOnly';
+
+export type DateOrDuration = Date | Duration;
+
+type DataType = 'date' | 'duration';
+
+type FieldType = 'hours' | 'minutes';
+
+// TODO sdil refactor rxjs flows
+@Component({
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    selector: 'time-picker',
+    styleUrls: ['./time-picker.component.scss'],
+    templateUrl: './time-picker.component.html',
+    encapsulation: ViewEncapsulation.None,
+    standalone: true,
+    imports: [
+        CommonModule,
+        FormsModule,
+        MatFormFieldModule,
+        MatInputModule,
+        NumericStepperComponent
+    ]
+})
+export class TimePickerComponent extends Destroy implements ControlValueAccessor {
+    @ViewChild('hours') public hours?: ElementRef<HTMLInputElement>;
+    @ViewChild('minutes') public minutes?: ElementRef<HTMLInputElement>;
+
+    @Output() public readonly timeChange = new EventEmitter<DateOrDuration>();
+
+    /** Display mode for the time-picker */
+    @Input() public mode: TimePickerDisplayMode = 'fullTime';
+
+    /** Data type to manage (Date or Duration) */
+    @Input() public dataType: DataType = 'date';
+
+    /**
+     * Force the hour or minute to be null (only if the other field is disabled)
+     *
+     * For instance, if set to true and the hours are disabled, the minutes input value will be null
+     * This is useful to force the user to provide a value
+     */
+    @Input() public forceNullValue = false;
+
+    @Input() public appearance: MatFormFieldAppearance = 'outline';
+
+    @Input()
+    public set autoFocus(value: BooleanInput) {
+        this._autoFocus = coerceBooleanProperty(value);
+    }
+
+    @Input() public defaultPlaceholderHours = '_ _';
+    @Input() public defaultPlaceholderMinutes = '_ _';
+
+    @Input()
+    public set time(value: DateOrDuration | undefined) {
+        this.writeValue(value);
+    }
+
+    public get time(): DateOrDuration | undefined {
+        return this.value;
+    }
+
+    /** Step of the arrows */
+    @Input()
+    public set step(value: NumberInput) {
+        this._step = coerceNumberProperty(value);
+        this.changeDetectorRef.markForCheck();
+    }
+
+    /** To get the step of the minutes arrows */
+    public get step(): NumberInput {
+        return this._step;
+    }
+
+    /** Disabled property setter. Can be string or empty so you can use it like : <time-picker disabled></time-picker> */
+    @Input()
+    public set disabled(value: BooleanInput) {
+        this._disabled = coerceBooleanProperty(value);
+        this.changeDetectorRef.markForCheck();
+    }
+
+    /** To get disabled attribute. */
+    public get disabled(): BooleanInput {
+        return this._disabled;
+    }
+
+    public onHoursChange$ = new Subject<Event | number>();
+    public onMinutesChange$ = new Subject<Event | number>();
+    public _step = 1;
+    private _disabled = false;
+    private _value?: DateOrDuration;
+    private _autoFocus = true;
+
+    public constructor(
+        private changeDetectorRef: ChangeDetectorRef,
+        @Self() @Optional() public control: NgControl
+    ) {
+        super();
+
+        if (this.control) {
+            this.control.valueAccessor = this;
+        }
+
+        this.onHoursChange$.pipe(
+            debounce(hours => timer(typeof hours === 'object' ? 0 : 10)),
+            distinctUntilChanged(),
+            map(hours => {
+                if (typeof hours === 'object') {
+                    const value = (hours.target as HTMLInputElement).value;
+                    return [value !== undefined ? parseInt(value, 10) : undefined, true] as const;
+                }
+                return [!isNaN(hours) ? hours : 0, false] as const;
+            }),
+            takeUntil(this.destroyed$)
+        ).subscribe(([hours, isEvent]) => {
+            if (!this.value) {
+                this.value = this.dataType === 'date' ? set(new Date(), { hours, minutes: 0, seconds: 0, milliseconds: 0 }) : { hours, minutes: 0 } as Duration;
+            } else if (this.value instanceof Date) {
+                const value = this.value?.getTime();
+                const clone = new Date(value);
+                if (hours !== undefined) {
+                    clone.setHours(hours);
+                }
+                this.value = clone;
+            } else {
+                this.value = {
+                    hours: hours && hours < 0 ? 0 : hours,
+                    minutes: this.value.minutes
+                };
+            }
+            this.changeDetectorRef.markForCheck();
+
+            if (isEvent && this._autoFocus && this.minutes) {
+                this.minutes.nativeElement.focus({
+                    preventScroll: true
+                });
+                this.minutes.nativeElement.select();
+            }
+        });
+
+        this.onMinutesChange$.pipe(
+            debounce(minutes => timer(typeof minutes === 'object' ? 0 : 10)),
+            distinctUntilChanged(),
+            map(event => {
+                let minutes: number | undefined;
+                if (typeof event === 'object') {
+                    const value = (event.target as HTMLInputElement).value;
+                    minutes = value !== undefined ? parseInt(value, 10) : undefined;
+                } else {
+                    minutes = event;
+                }
+                return minutes && !isNaN(minutes) && minutes || 0;
+            }),
+            takeUntil(this.destroyed$)
+        ).subscribe(minutes => {
+            if (!this.value) {
+                this.value = this.dataType === 'date' ? set(new Date(), { hours: 0, minutes, seconds: 0, milliseconds: 0 }) : { hours: 0, minutes } as Duration;
+            } else if (this.value instanceof Date) {
+                const newValue = new Date(this.value.getTime());
+                if (minutes < 0) {
+                    minutes += 60;
+                } else if (minutes >= 60) {
+                    minutes -= 60;
+                }
+                newValue.setMinutes(minutes);
+
+                if (this.mode !== 'fullTimeWithHoursDisabled' || (this.mode === 'fullTimeWithHoursDisabled' && isSameHour(this.value, newValue))) {
+                    this.value = newValue;
+                }
+            } else {
+                this.value = {
+                    hours: this.value.hours,
+                    minutes: minutes < 0 || minutes >= 60 ? 0 : minutes
+                };
+            }
+            this.changeDetectorRef.markForCheck();
+        });
+    }
+
+    public onKeyDown($event: KeyboardEvent, mode: 'hours' | 'minutes'): void {
+        // Get input element
+        const inputElement = mode === 'hours' ? this.hours?.nativeElement : this.minutes?.nativeElement;
+        if ($event.key?.toLowerCase() === 'd') {
+            $event.stopPropagation();
+            $event.preventDefault();
+            this.value = new Date();
+        } else if (inputElement) {
+            if ($event.key?.toLowerCase() === 'a' && $event.ctrlKey) {
+                inputElement.select();
+            } else if ($event.key && !['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight', 'Backspace', 'Delete', 'Tab', 'Enter', 'Control', 'Shift'].includes($event.key)) {
+                // Set regex for input format validation (differs if we are dealing with a date or a duration)
+                let regex;
+                if (mode === 'hours') {
+                    regex = this.dataType === 'date' ? /^(\d|[01]\d|2[0-3])$/ : /^(\d+)$/;
+                } else {
+                    regex = /^(\d|[0-5]\d)$/;
+                }
+
+                // Get the selection in input element
+                const [selectionStart, selectionEnd] = [inputElement.selectionStart || 0, inputElement.selectionEnd || 0].sort((a, b) => a - b);
+                const selectionDiff = selectionEnd - selectionStart;
+
+                // Get the current value in input element and update it with the new touched key
+                const inputValue = inputElement.value || '';
+                const inputValueArr = Array.from(inputValue);
+                inputValueArr.splice(selectionStart, selectionDiff, $event.key);
+                const newInputValue = inputValueArr.join('');
+
+                // Prevent event if the time is not valid
+                if (!regex.test(newInputValue)) {
+                    $event.stopPropagation();
+                    $event.preventDefault();
+                } else if (this._autoFocus && mode === 'hours' && ((this.dataType === 'date' && parseFloat(newInputValue) >= 3) || newInputValue.length === 2)) {
+                    this.onHoursChange$.next($event);
+                }
+            }
+        }
+    }
+
+    public get hoursValue(): number | undefined {
+        if (!this.value || (this.forceNullValue && this.mode === 'fullTimeWithMinutesDisabled' && this.control.pristine)) {
+            return undefined;
+        }
+        return this.value instanceof Date ? this.value.getHours() : this.value.hours;
+    }
+
+    public get minutesValue(): number | undefined {
+        if (!this.value || (this.forceNullValue && this.mode === 'fullTimeWithHoursDisabled' && this.control.pristine)) {
+            return undefined;
+        }
+        return this.value instanceof Date ? this.value.getMinutes() : this.value.minutes;
+    }
+
+    public incrementValue(fieldType: FieldType): void {
+        if (fieldType === 'hours') {
+            this.onHoursChange$.next((this.hoursValue || 0) + 1);
+        } else {
+            this.onMinutesChange$.next((this.minutesValue || 0) + this._step);
+        }
+    }
+
+    public decrementValue(fieldType: FieldType): void {
+        if (fieldType === 'hours') {
+            this.onHoursChange$.next((this.hoursValue || 0) - 1);
+        } else {
+            this.onMinutesChange$.next((this.minutesValue || 0) - this._step);
+        }
+    }
+
+    public onClick(mode: 'hours' | 'minutes'): void {
+        if (this._autoFocus) {
+            if (mode === 'hours') {
+                this.hours?.nativeElement.select();
+            } else {
+                this.minutes?.nativeElement.select();
+            }
+        }
+    }
+
+    // ************* ControlValueAccessor Implementation **************
+    /** set accessor including call the onchange callback */
+    public set value(v: DateOrDuration | undefined) {
+        if (v !== this._value) {
+            this.writeValue(v);
+            this.onChangeCallback(v);
+            this.timeChange.emit(v);
+        }
+    }
+
+    /** get accessor */
+    public get value(): DateOrDuration | undefined {
+        return this._value;
+    }
+
+    /** From ControlValueAccessor interface */
+    public writeValue(value: DateOrDuration | undefined): void {
+        if ((value ?? null) !== (this._value ?? null)) {
+            if (value instanceof Date) {
+                this._value = value ? new Date(value.getTime()) : set(new Date(), { hours: 0, minutes: 0, seconds: 0 });
+            } else {
+                this._value = value;
+            }
+
+            this.changeDetectorRef.markForCheck();
+        }
+    }
+
+    /** From ControlValueAccessor interface */
+    public registerOnChange(fn: (_a: unknown) => void): void {
+        this.onChangeCallback = fn;
+    }
+
+    /** From ControlValueAccessor interface */
+    public registerOnTouched(fn: () => void): void {
+        this.onTouchedCallback = fn;
+    }
+
+    public setDisabledState(isDisabled: boolean): void {
+        this.disabled = isDisabled;
+    }
+    // ************* End of ControlValueAccessor Implementation **************
+
+    protected onChangeCallback = (_a: unknown): void => undefined;
+    protected onTouchedCallback = (): void => undefined;
+}

package/tsconfig.lib.json

@@ -0,0 +1,15 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+    "extends": "../../tsconfig.base.json",
+    "compilerOptions": {
+        "outDir": "../../out-tsc/lib",
+        "declaration": true,
+        "declarationMap": true,
+        "inlineSources": true,
+        "types": []
+    },
+    "exclude": [
+        "src/test.ts",
+        "**/*.spec.ts"
+    ]
+}

package/tsconfig.lib.prod.json

@@ -0,0 +1,10 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+    "extends": "./tsconfig.lib.json",
+    "compilerOptions": {
+        "declarationMap": false
+    },
+    "angularCompilerOptions": {
+        "compilationMode": "partial"
+    }
+}

package/tsconfig.spec.json

@@ -0,0 +1,17 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+    "extends": "../../tsconfig.json",
+    "compilerOptions": {
+        "outDir": "../../out-tsc/spec",
+        "types": [
+            "jasmine"
+        ]
+    },
+    "files": [
+        "src/test.ts"
+    ],
+    "include": [
+        "**/*.spec.ts",
+        "**/*.d.ts"
+    ]
+}