import * as i5 from '@angular/common';
import { CommonModule } from '@angular/common';
import * as i0 from '@angular/core';
import { EventEmitter, Component, ChangeDetectionStrategy, ViewEncapsulation, Self, Optional, ViewChild, Output, Input, NgModule } from '@angular/core';
import * as i1 from '@angular/forms';
import { FormsModule } from '@angular/forms';
import * as i2 from '@angular/material/form-field';
import { MatFormFieldModule } from '@angular/material/form-field';
import * as i4 from '@angular/material/input';
import { MatInputModule } from '@angular/material/input';
import * as i3 from '@deja-js/component/v2/numeric-stepper';
import { DejaNumericStepperModule } from '@deja-js/component/v2/numeric-stepper';
import { coerceBooleanProperty, coerceNumberProperty } from '@angular/cdk/coercion';
import { Destroy } from '@deja-js/component/core';
import { set } from 'date-fns';
import { Subject, debounceTime, distinctUntilChanged, map, takeUntil } from 'rxjs';

/*
 *  @license
 *  Copyright Hôpitaux Universitaires de Genève. All Rights Reserved.
 *
 *  Use of this source code is governed by an Apache-2.0 license that can be
 *  found in the LICENSE file at https://github.com/DSI-HUG/dejajs-components/blob/master/LICENSE
 */
/**
 * Time-picker component for Angular
 */
class DejaTimePickerComponent extends Destroy {
    constructor(changeDetectorRef, control) {
        super();
        this.changeDetectorRef = changeDetectorRef;
        this.control = control;
        this.timeChange = new EventEmitter();
        /** Display mode for the time-picker */
        this.mode = 'fullTime';
        this.defaultPlaceholderHours = '_ _';
        this.defaultPlaceholderMinutes = '_ _';
        this.onHoursChange$ = new Subject();
        this.onMinutesChange$ = new Subject();
        this._step = 1;
        this._disabled = false;
        this._autoFocus = true;
        // ************* End of ControlValueAccessor Implementation **************
        this.onChangeCallback = (_a) => undefined;
        this.onTouchedCallback = () => undefined;
        if (this.control) {
            this.control.valueAccessor = this;
        }
        this.onHoursChange$.pipe(debounceTime(10), distinctUntilChanged(), map(hours => {
            let isEvent = false;
            if (typeof hours === 'object') {
                const value = hours.target.value;
                hours = value !== undefined ? parseInt(value, 10) : undefined;
                isEvent = true;
            }
            return {
                hours: !isNaN(hours) ? hours : 0,
                isEvent
            };
        }), takeUntil(this.destroyed$)).subscribe(({ hours, isEvent }) => {
            const value = this.value?.getTime();
            const clone = value ? new Date(value) : set(new Date(), { hours: 0, minutes: 0, seconds: 0 });
            clone.setHours(hours);
            this.value = clone;
            this.changeDetectorRef.markForCheck();
            if (isEvent && this._autoFocus) {
                this.minutes.nativeElement.focus({
                    preventScroll: true
                });
                this.minutes.nativeElement.select();
            }
        });
        this.onMinutesChange$.pipe(debounceTime(10), distinctUntilChanged(), map(minutes => {
            if (typeof minutes === 'object') {
                const value = minutes.target.value;
                minutes = value !== undefined ? parseInt(value, 10) : undefined;
            }
            return !isNaN(minutes) ? minutes : 0;
        }), takeUntil(this.destroyed$)).subscribe(minutes => {
            const value = this.value?.getTime();
            const clone = value ? new Date(value) : set(new Date(), { hours: 0, minutes: 0, seconds: 0 });
            if (minutes < 0) {
                minutes += 60;
            }
            else if (minutes >= 60) {
                minutes -= 60;
            }
            clone.setMinutes(minutes);
            this.value = clone;
            this.changeDetectorRef.markForCheck();
        });
    }
    set autoFocus(value) {
        this._autoFocus = coerceBooleanProperty(value);
    }
    set time(value) {
        this.writeValue(value);
    }
    get time() {
        return this.value;
    }
    /** Step of the arrows */
    set step(value) {
        this._step = coerceNumberProperty(value);
        this.changeDetectorRef.markForCheck();
    }
    /** To get the step of the minutes arrows */
    get step() {
        return this._step;
    }
    /** Disabled property setter. Can be string or empty so you can use it like : <time-picker disabled></time-picker> */
    set disabled(value) {
        this._disabled = coerceBooleanProperty(value);
        this.changeDetectorRef.markForCheck();
    }
    /** To get disabled attribute. */
    get disabled() {
        return this._disabled;
    }
    onKeyDown($event, mode) {
        // 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 ($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
            const regex = mode === 'hours' ? /^(\d|[01]\d|2[0123])$/ : /^(\d|[012345]\d)$/;
            // Get the selection in input element
            const [selectionStart, selectionEnd] = [inputElement.selectionStart, inputElement.selectionEnd].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' && (parseFloat(newInputValue) >= 3 || newInputValue.length === 2)) {
                this.onHoursChange$.next($event);
            }
        }
    }
    onClick(mode) {
        if (this._autoFocus) {
            if (mode === 'hours') {
                this.hours.nativeElement.select();
            }
            else {
                this.minutes.nativeElement.select();
            }
        }
    }
    // ************* ControlValueAccessor Implementation **************
    /** set accessor including call the onchange callback */
    set value(v) {
        if (v !== this._value) {
            this.writeValue(v);
            this.onChangeCallback(v);
            this.timeChange.emit(v);
        }
    }
    /** get accessor */
    get value() {
        return this._value;
    }
    /** From ControlValueAccessor interface */
    writeValue(value) {
        if ((value || null) !== (this._value || null)) {
            this._value = value && value instanceof Date ? new Date(value.getTime()) : null;
            this.changeDetectorRef.markForCheck();
        }
    }
    /** From ControlValueAccessor interface */
    registerOnChange(fn) {
        this.onChangeCallback = fn;
    }
    /** From ControlValueAccessor interface */
    registerOnTouched(fn) {
        this.onTouchedCallback = fn;
    }
    setDisabledState(isDisabled) {
        this.disabled = isDisabled;
    }
}
DejaTimePickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: DejaTimePickerComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component });
DejaTimePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.1", type: DejaTimePickerComponent, selector: "deja-time-picker", inputs: { mode: "mode", autoFocus: "autoFocus", defaultPlaceholderHours: "defaultPlaceholderHours", defaultPlaceholderMinutes: "defaultPlaceholderMinutes", time: "time", step: "step", disabled: "disabled" }, outputs: { timeChange: "timeChange" }, viewQueries: [{ propertyName: "hours", first: true, predicate: ["hours"], descendants: true }, { propertyName: "minutes", first: true, predicate: ["minutes"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<!-- Hours -->\n<mat-form-field appearance=\"outline\" class=\"hours\" [class.disabled]=\"disabled || mode === 'fullTimeWithHoursDisabled'\" [style.display]=\"mode === 'minutesOnly' ? 'none' : 'block'\">\n    <input #hours matInput type=\"text\" [ngModel]=\"value?.getHours() | number:'2.'\" (change)=\"onHoursChange$.next($event)\" (keydown)=\"onKeyDown($event, 'hours')\" [disabled]=\"disabled || mode === 'fullTimeWithHoursDisabled'\" [maxLength]=\"2\" autocomplete=\"off\" [placeholder]=\"defaultPlaceholderHours\" (click)=\"onClick('hours')\" />\n    <deja-numeric-stepper (increment)=\"onHoursChange$.next((value?.getHours() || 0) + 1)\" (decrement)=\"onHoursChange$.next((value?.getHours() || 0) - 1)\"></deja-numeric-stepper>\n</mat-form-field>\n\n<!-- Separator -->\n<span class=\"time-separator\" [style.display]=\"mode === 'minutesOnly' || mode === 'hoursOnly' ? 'none' : 'block'\">:</span>\n\n<!-- Minutes -->\n<mat-form-field appearance=\"outline\" class=\"minutes\" [class.disabled]=\"disabled || mode === 'fullTimeWithMinutesDisabled'\" [style.display]=\"mode === 'hoursOnly' ? 'none' : 'block'\">\n    <input #minutes matInput type=\"text\" [ngModel]=\"value?.getMinutes() | number:'2.'\" (change)=\"onMinutesChange$.next($event)\" (keydown)=\"onKeyDown($event, 'minutes')\" [disabled]=\"disabled || mode === 'fullTimeWithMinutesDisabled'\" [maxLength]=\"2\" autocomplete=\"off\" [placeholder]=\"defaultPlaceholderMinutes\" (click)=\"onClick('minutes')\" />\n    <deja-numeric-stepper (increment)=\"onMinutesChange$.next((value?.getMinutes() || 0) + _step)\" (decrement)=\"onMinutesChange$.next((value?.getMinutes() || 0) - _step)\"></deja-numeric-stepper>\n</mat-form-field>\n", styles: ["deja-time-picker{display:flex;flex-direction:row;align-items:baseline;justify-content:center}deja-time-picker:not([inform]) .mat-form-field-wrapper{padding-bottom:0}deja-time-picker:not([inform]) .mat-form-field-wrapper .mat-form-field-infix{border-bottom:.7em solid transparent}deja-time-picker mat-form-field[deja-numeric-stepper-form-field]{width:48px}deja-time-picker .time-separator{width:4px;font-size:14.5px;line-height:17px;margin:0 8px}\n"], components: [{ type: i2.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i3.DejaNumericStepperComponent, selector: "deja-numeric-stepper", inputs: ["layout", "input", "arrowIcons", "showOnInit"], outputs: ["increment", "decrement"] }], directives: [{ type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], pipes: { "number": i5.DecimalPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: DejaTimePickerComponent, decorators: [{
            type: Component,
            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'deja-time-picker', encapsulation: ViewEncapsulation.None, template: "<!-- Hours -->\n<mat-form-field appearance=\"outline\" class=\"hours\" [class.disabled]=\"disabled || mode === 'fullTimeWithHoursDisabled'\" [style.display]=\"mode === 'minutesOnly' ? 'none' : 'block'\">\n    <input #hours matInput type=\"text\" [ngModel]=\"value?.getHours() | number:'2.'\" (change)=\"onHoursChange$.next($event)\" (keydown)=\"onKeyDown($event, 'hours')\" [disabled]=\"disabled || mode === 'fullTimeWithHoursDisabled'\" [maxLength]=\"2\" autocomplete=\"off\" [placeholder]=\"defaultPlaceholderHours\" (click)=\"onClick('hours')\" />\n    <deja-numeric-stepper (increment)=\"onHoursChange$.next((value?.getHours() || 0) + 1)\" (decrement)=\"onHoursChange$.next((value?.getHours() || 0) - 1)\"></deja-numeric-stepper>\n</mat-form-field>\n\n<!-- Separator -->\n<span class=\"time-separator\" [style.display]=\"mode === 'minutesOnly' || mode === 'hoursOnly' ? 'none' : 'block'\">:</span>\n\n<!-- Minutes -->\n<mat-form-field appearance=\"outline\" class=\"minutes\" [class.disabled]=\"disabled || mode === 'fullTimeWithMinutesDisabled'\" [style.display]=\"mode === 'hoursOnly' ? 'none' : 'block'\">\n    <input #minutes matInput type=\"text\" [ngModel]=\"value?.getMinutes() | number:'2.'\" (change)=\"onMinutesChange$.next($event)\" (keydown)=\"onKeyDown($event, 'minutes')\" [disabled]=\"disabled || mode === 'fullTimeWithMinutesDisabled'\" [maxLength]=\"2\" autocomplete=\"off\" [placeholder]=\"defaultPlaceholderMinutes\" (click)=\"onClick('minutes')\" />\n    <deja-numeric-stepper (increment)=\"onMinutesChange$.next((value?.getMinutes() || 0) + _step)\" (decrement)=\"onMinutesChange$.next((value?.getMinutes() || 0) - _step)\"></deja-numeric-stepper>\n</mat-form-field>\n", styles: ["deja-time-picker{display:flex;flex-direction:row;align-items:baseline;justify-content:center}deja-time-picker:not([inform]) .mat-form-field-wrapper{padding-bottom:0}deja-time-picker:not([inform]) .mat-form-field-wrapper .mat-form-field-infix{border-bottom:.7em solid transparent}deja-time-picker mat-form-field[deja-numeric-stepper-form-field]{width:48px}deja-time-picker .time-separator{width:4px;font-size:14.5px;line-height:17px;margin:0 8px}\n"] }]
        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i1.NgControl, decorators: [{
                    type: Self
                }, {
                    type: Optional
                }] }]; }, propDecorators: { hours: [{
                type: ViewChild,
                args: ['hours']
            }], minutes: [{
                type: ViewChild,
                args: ['minutes']
            }], timeChange: [{
                type: Output
            }], mode: [{
                type: Input
            }], autoFocus: [{
                type: Input
            }], defaultPlaceholderHours: [{
                type: Input
            }], defaultPlaceholderMinutes: [{
                type: Input
            }], time: [{
                type: Input
            }], step: [{
                type: Input
            }], disabled: [{
                type: Input
            }] } });

/*
 *  @license
 *  Copyright Hôpitaux Universitaires de Genève. All Rights Reserved.
 *
 *  Use of this source code is governed by an Apache-2.0 license that can be
 *  found in the LICENSE file at https://github.com/DSI-HUG/dejajs-components/blob/master/LICENSE
 */
class DejaTimePickerModule {
}
DejaTimePickerModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: DejaTimePickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
DejaTimePickerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: DejaTimePickerModule, declarations: [DejaTimePickerComponent], imports: [CommonModule,
        DejaNumericStepperModule,
        FormsModule,
        MatFormFieldModule,
        MatInputModule], exports: [DejaTimePickerComponent] });
DejaTimePickerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: DejaTimePickerModule, imports: [[
            CommonModule,
            DejaNumericStepperModule,
            FormsModule,
            MatFormFieldModule,
            MatInputModule
        ]] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: DejaTimePickerModule, decorators: [{
            type: NgModule,
            args: [{
                    declarations: [DejaTimePickerComponent],
                    exports: [DejaTimePickerComponent],
                    imports: [
                        CommonModule,
                        DejaNumericStepperModule,
                        FormsModule,
                        MatFormFieldModule,
                        MatInputModule
                    ]
                }]
        }] });

/**
 * Generated bundle index. Do not edit.
 */

export { DejaTimePickerComponent, DejaTimePickerModule };
//# sourceMappingURL=deja-js-component-time-picker.mjs.map
