import * as i0 from '@angular/core';
import { inject, booleanAttribute, Input, ViewEncapsulation, Component } from '@angular/core';
import * as i1 from '@angular/forms';
import { FormControl, NgControl, Validators, FormsModule, ReactiveFormsModule } from '@angular/forms';
import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';
import { uniqueId, DYNAMIC_COMPONENT_CONFIG } from '@eui/core';
import { NgxMaskDirective, provideNgxMask } from 'ngx-mask';
import * as i2 from '@eui/components/eui-input-number';
import { EUI_INPUT_NUMBER } from '@eui/components/eui-input-number';
import * as i3 from '@eui/components/eui-input-text';
import { EUI_INPUT_TEXT } from '@eui/components/eui-input-text';
import * as i4 from '@eui/components/eui-icon';
import { EUI_ICON } from '@eui/components/eui-icon';

/**
 * @description
 * A timepicker component that allows the user to select a time. The component
 * can be used in two modes: one input field or three separate input fields
 * for hours, minutes, and seconds. The component also supports incremental and
 * decremental buttons for each input field.
 *
 * @usageNotes
 * ### Basic Usage
 * ```html
 * <!-- Single input field mode -->
 * <eui-timepicker
 *   [isOneInputField]="true"
 *   [(ngModel)]="selectedTime" />
 *
 * <!-- Separate fields mode -->
 * <eui-timepicker
 *   [showSeconds]="true"
 *   [(ngModel)]="selectedTime" />
 *
 * <!-- With reactive forms -->
 * <form [formGroup]="form">
 *   <eui-timepicker formControlName="appointmentTime" />
 * </form>
 * ```
 *
 * ```typescript
 * selectedTime: EuiTimePicker = { hours: 14, minutes: 30, seconds: 0 };
 * form = new FormGroup({
 *   appointmentTime: new FormControl(null)
 * });
 * ```
 *
 * ### Accessibility
 * - Provide clear labels for time input purpose
 * - Use aria-label on increment/decrement buttons
 * - Ensure keyboard navigation works (Tab, Arrow keys)
 * - Announce time changes to screen readers
 *
 * ### Notes
 * - Time format: { hours: number, minutes: number, seconds?: number }
 * - Single input mode uses mask for formatted input (HH:MM or HH:MM:SS)
 * - Separate fields mode provides individual controls with +/- buttons
 * - Step values control increment/decrement amounts
 */
class EuiTimepickerComponent {
    constructor() {
        this.oneInputFormControl = new FormControl();
        this.hoursUpDisabled = false;
        this.hoursDownDisabled = false;
        this.minutesUpDisabled = false;
        this.minutesDownDisabled = false;
        this.secondsUpDisabled = false;
        this.secondsDownDisabled = false;
        this.e2eAttr = 'eui-timepicker';
        /**
         * The id of the input element when isOneInputField attribute is used. If not provided, a unique id will be generated.
         * @default 'eui-timepicker-<unique-id>'
         */
        this.inputId = `eui-timepicker-${uniqueId()}`;
        /**
         * The mask for the input field when isOneInputField attribute is used.
         * @default 'Hh:m0'
         */
        this.timeMask = 'Hh:m0';
        /**
         * The placeholder of the input field when isOneInputField attribute is used.
         * @default 'Hh:m0'
         */
        this.placeholder = this.timeMask;
        /**
         * The step used for changing hours.
         * @default 1
         */
        this.stepHours = 1;
        /**
         * The step used for changing minutes.
         * @default 1
         */
        this.stepMinutes = 1;
        /**
         * The step used for changing seconds.
         * @default 1
         */
        this.stepSeconds = 1;
        /**
         * The size of the icon used for changing hours, minutes and seconds.
         * @default 'l'
         */
        this.iconSize = 'l';
        /**
         * Sets the readonly attribute of the input field.
         * @default false
         */
        this.isreadOnly = false;
        /**
         * Sets the disabled state.
         * @default false
         */
        this.isDisabled = false;
        /**
         * Attribute that transforms the 3 separate inputs into one input field.
         * @default false
         */
        this.isOneInputField = false;
        /**
         * Option for enabling seconds.
         * @default false
         */
        this.hasSeconds = false;
        this.propagatedValues = {
            hours: null,
            mins: null,
            secs: this.hasSeconds ? null : undefined,
        };
        this.destroy$ = new Subject();
        this.control = inject(NgControl, { self: true, optional: true });
        /**
         * A callback function that is called when the time is changed. It is used to propagate the value back to the form.
         * @param hours The hours value
         * @param mins The minutes value
         * @param secs The seconds value
         */
        this.callbackFn = () => { };
        this.propagateChange = (value) => { };
        this.propagateTouched = () => { };
        const config = inject(DYNAMIC_COMPONENT_CONFIG, { optional: true });
        this.hours = config?.hours || 0;
        this.mins = config?.mins || 0;
        this.secs = config?.secs || 0;
        this.isDatetimepicker = config?.isDatetimepicker;
        this.hasSeconds = config?.hasSeconds;
        this.isOneInputField = config?.isOneInputField;
        this.isDisabled = config?.isDisabled || false;
        this.stepHours = config ? config.stepHours : this.stepHours;
        this.stepMinutes = config ? config.stepMinutes : this.stepMinutes;
        this.stepSeconds = config ? config.stepSeconds : this.stepSeconds;
        const hours = this.hours === 0 || null ? '00' : this.hours;
        const mins = this.mins === 0 || null ? '00' : this.mins;
        const secs = this.secs === 0 || null ? '00' : this.secs;
        this.oneInputFormControl.setValue('' + hours + ':' + mins + ':' + secs);
        this.callbackFn = config?.callbackFn || this.callbackFn;
        if (this.control) {
            this.control.valueAccessor = this;
        }
    }
    ngOnInit() {
        this.oneInputFormControl.valueChanges.pipe(takeUntil(this.destroy$)).subscribe((value) => {
            // splits the entered time into 3 parts based on the : and propagates back the corresponding parts
            if (value === null) {
                this.propagatedValues = {
                    hours: null,
                    mins: null,
                    secs: null,
                };
                this.propagateChange(null);
                return;
            }
            [this.oneInputHours, this.oneInputMins, this.oneInputSecs] = value.split(':');
            const splittedhours = this.oneInputHours ? Number(this.oneInputHours) : null;
            const splittedmins = this.oneInputMins ? Number(this.oneInputMins) : null;
            const splittedsecs = this.oneInputSecs ? Number(this.oneInputSecs) : null;
            if (this.hasSeconds) {
                this.propagatedValues = {
                    ...this.propagatedValues,
                    hours: splittedhours,
                    mins: splittedmins,
                    secs: splittedsecs,
                };
                this.callbackFn(splittedhours, splittedmins, splittedsecs);
            }
            else {
                this.propagatedValues = {
                    ...this.propagatedValues,
                    hours: splittedhours,
                    mins: splittedmins,
                };
                this.callbackFn(splittedhours, splittedmins);
            }
            if (splittedhours === null && splittedmins === null && splittedsecs === null) {
                this.propagateChange(null);
            }
            else {
                this.propagateChange(this.propagatedValues);
            }
        });
        this.updateInputAriaRequiredAttribute(this.control);
        this.control?.valueChanges.pipe(takeUntil(this.destroy$)).subscribe((value) => {
            this.updateInputAriaRequiredAttribute(this.control);
        });
    }
    ngOnChanges(changes) {
        if (this.isOneInputField) {
            if (this.hasSeconds && changes.hasSeconds) {
                this.timeMask = 'Hh:m0:s0';
                this.placeholder = 'Hh:m0:s0';
            }
            if (changes.timeMask) {
                this.timeMask = changes.timeMask.currentValue;
                this.placeholder = changes.timeMask.currentValue;
            }
            if (changes.placeholder) {
                this.placeholder = changes.placeholder.currentValue;
            }
        }
    }
    ngDoCheck() {
        if (this.control) {
            // marks the input control as touched/invalid if the form control is touched/invalid
            // eslint-disable-next-line
            this.control?.touched ? this.oneInputFormControl.markAsTouched() : this.oneInputFormControl.markAsUntouched();
            // eslint-disable-next-line
            this.control?.invalid ? this.oneInputFormControl.setErrors(this.control.errors) : this.oneInputFormControl.setErrors(null);
        }
    }
    ngOnDestroy() {
        this.destroy$.next(true);
        this.destroy$.unsubscribe();
    }
    /**
     * Increments or decrements hours according to the step param being passed
     *
     * @param step The step number that hours will increase or decrease
     */
    changeHours(step) {
        if (this.isDisabled)
            return;
        if ((!this.hoursUpDisabled && step > 0) || (!this.hoursDownDisabled && step < 0)) {
            const val = (isNaN(this.hours) ? 0 : this.hours) + step;
            this.updateHours(val.toString());
        }
    }
    /**
     * Increments or decrements minutes according to the step param being passed
     *
     * @param step The step number that minutes will increase or decrease
     */
    changeMinutes(step) {
        if (this.isDisabled)
            return;
        if ((!this.minutesUpDisabled && step > 0) || (!this.minutesDownDisabled && step < 0)) {
            const val = (isNaN(this.mins) ? 0 : this.mins) + step;
            this.updateMinutes(val.toString());
        }
    }
    /**
     * Increments or decrements seconds according to the step param being passed
     *
     * @param step The step number that seconds will increase or decrease
     */
    changeSeconds(step) {
        if (this.isDisabled)
            return;
        if ((!this.secondsUpDisabled && step > 0) || (!this.secondsDownDisabled && step < 0)) {
            const val = (isNaN(this.secs) ? 0 : this.secs) + step;
            this.updateSeconds(val.toString());
        }
    }
    /**
     * Updates the input field when hours change and adds 24hour validation + propagates the value back to the form
     *
     * @param newVal The new value that hours will have
     */
    updateHours(newVal) {
        const enteredHour = this.toInteger(newVal);
        if (!isNaN(enteredHour)) {
            this.hours = (enteredHour < 0 ? 24 + enteredHour : enteredHour) % 24;
        }
        else {
            this.hours = NaN;
        }
        this.callbackFn(this.hours, this.mins, this.secs);
        this.propagatedValues = {
            ...this.propagatedValues,
            hours: this.hours,
        };
        this.propagateChange(this.propagatedValues);
    }
    /**
     * Updates the input field when minutes change and adds 60mins validation + propagates the value back to the form
     *
     * @param newVal The new value that minutes will have
     */
    updateMinutes(newVal) {
        const enteredMin = this.toInteger(newVal);
        if (!isNaN(enteredMin)) {
            this.mins = enteredMin % 60 < 0 ? 60 + (enteredMin % 60) : enteredMin % 60;
            this.changeHours(Math.floor(enteredMin / 60));
        }
        else {
            this.mins = NaN;
        }
        this.callbackFn(this.hours, this.mins, this.secs);
        this.propagatedValues = {
            ...this.propagatedValues,
            mins: this.mins,
        };
        this.propagateChange(this.propagatedValues);
    }
    /**
     * Updates the input field when seconds change and adds 60secs validation + propagates the value back to the form
     *
     * @param newVal The new value that seconds will have
     */
    updateSeconds(newVal) {
        const enteredSec = this.toInteger(newVal);
        if (!isNaN(enteredSec)) {
            this.secs = enteredSec % 60 < 0 ? 60 + (enteredSec % 60) : enteredSec % 60;
            this.changeMinutes(Math.floor(enteredSec / 60));
        }
        else {
            this.secs = NaN;
        }
        this.callbackFn(this.hours, this.mins, this.secs);
        this.propagatedValues = {
            ...this.propagatedValues,
            secs: this.secs,
        };
        this.propagateChange(this.propagatedValues);
    }
    /**
     * Autofills mins and secs with 00s if the user tabs after entering hours and marks the input as touched
     */
    onFocusOut() {
        if (this.oneInputHours && !this.oneInputMins && !this.oneInputSecs) {
            switch (this.oneInputHours) {
                case '0':
                    this.oneInputHours = '00';
                    break;
                case '1':
                    this.oneInputHours = '01';
                    break;
                case '2':
                    this.oneInputHours = '02';
                    break;
            }
            this.oneInputFormControl.patchValue(`${this.oneInputHours} : 00 : 00`);
        }
        this.propagateTouched();
    }
    writeValue(values) {
        if (!values) {
            this.hours = null;
            this.mins = null;
            this.secs = null;
            if (this.isOneInputField) {
                this.oneInputFormControl.setValue(null);
            }
            return;
        }
        if (values.hours < 0 || values.hours > 23 || typeof values.hours !== 'number') {
            throw new Error('hours must be defined and be a number with range 0-23');
        }
        if (values.mins < 0 || values.mins > 59 || typeof values.mins !== 'number') {
            throw new Error('mins must be defined and be a number with range 0-59');
        }
        if (this.hasSeconds && (values.secs < 0 || values.secs > 59 || typeof values.secs !== 'number')) {
            throw new Error('secs must be defined and be a number with range 0-59');
        }
        this.updateHours(values.hours.toString());
        this.updateMinutes(values.mins.toString());
        if (values.secs) {
            this.updateSeconds(values.secs.toString());
        }
        if (this.isOneInputField) {
            const hours = this.padNumber(values.hours);
            const mins = this.padNumber(values.mins);
            const secs = this.padNumber(values.secs);
            this.oneInputFormControl.patchValue('' + hours + ':' + mins + ':' + secs);
        }
    }
    /**
     * Disables the hour up incremental when max time range is reached
     *
     * @param state The boolean value that enables the feature
     */
    hoursUpDisable(state) {
        this.hoursUpDisabled = state;
    }
    /**
     * Disables the hour down decremental when min time range is reached
     *
     * @param state The boolean value that enables the feature
     */
    hoursDownDisable(state) {
        this.hoursDownDisabled = state;
    }
    /**
     * Disables the minutes up incremental when max time range is reached
     *
     * @param state The boolean value that enables the feature
     */
    minutesUpDisable(state) {
        this.minutesUpDisabled = state;
    }
    /**
     * Disables the minutes down decremental when min time range is reached
     *
     * @param state The boolean value that enables the feature
     */
    minutesDownDisable(state) {
        this.minutesDownDisabled = state;
    }
    /**
     * Disables the seconds up incremental when max time range is reached
     *
     * @param state The boolean value that enables the feature
     */
    secondsUpDisable(state) {
        this.secondsUpDisabled = state;
    }
    /**
     * Disables the seconds down decremental when min time range is reached
     *
     * @param state The boolean value that enables the feature
     */
    secondsDownDisable(state) {
        this.secondsDownDisabled = state;
    }
    registerOnChange(fn) {
        this.propagateChange = fn;
    }
    registerOnTouched(fn) {
        this.propagateTouched = fn;
    }
    setDisabledState(isDisabled) {
        this.isDisabled = isDisabled;
        if (this.isOneInputField) {
            if (isDisabled) {
                this.oneInputFormControl.disable();
            }
            else {
                this.oneInputFormControl.enable();
            }
        }
    }
    /**
     * Converts the provided value to an integer.
     *
     * @param value The value to convert
     * @private
     */
    toInteger(value) {
        return parseInt(`${value}`, 10);
    }
    /**
     * Pads leading zero to the provided number when isOneInputField
     *
     * @param value The value to add leading zero to
     * @private
     */
    padNumber(value) {
        if (!isNaN(this.toInteger(value))) {
            return `0${value}`.slice(-2);
        }
        else {
            return '';
        }
    }
    /**
     * Updates the `aria-required` attribute on the input element.
     * @param control The NgControl instance to check for required validator
     * @private
     */
    updateInputAriaRequiredAttribute(control) {
        this.hasAriaRequiredAttribute = control?.control?.hasValidator(Validators.required);
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: EuiTimepickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: EuiTimepickerComponent, isStandalone: true, selector: "eui-timepicker", inputs: { e2eAttr: "e2eAttr", inputId: "inputId", timeMask: "timeMask", placeholder: "placeholder", stepHours: "stepHours", stepMinutes: "stepMinutes", stepSeconds: "stepSeconds", iconSize: "iconSize", isreadOnly: ["isreadOnly", "isreadOnly", booleanAttribute], isDisabled: ["isDisabled", "isDisabled", booleanAttribute], isOneInputField: ["isOneInputField", "isOneInputField", booleanAttribute], hasSeconds: ["hasSeconds", "hasSeconds", booleanAttribute] }, providers: [provideNgxMask()], usesOnChanges: true, ngImport: i0, template: "<div class=\"eui-timepicker\" [class.eui-timepicker--centered]=\"isDatetimepicker\" attr.data-e2e=\"{{ e2eAttr }}\">\n    @if (isOneInputField) {\n        <input\n            [class.eui-timepicker__input--one-field]=\"isDatetimepicker\"\n            euiInputText\n            [id]=\"inputId\"\n            mask=\"{{ timeMask }}\"\n            [leadZeroDateTime]=\"true\"\n            [placeholder]=\"placeholder\"\n            [attr.aria-label]=\"oneInputFormControl.value?oneInputFormControl.value:'No time value'\"\n            [formControl]=\"oneInputFormControl\"\n            (focusout)=\"onFocusOut()\"\n            [dropSpecialCharacters]=\"false\"\n            [readonly]=\"isreadOnly\" />\n    } @else {\n        <div class=\"eui-timepicker__input-container\">\n            @if (!isreadOnly) {\n                <div class=\"eui-timepicker__chevron eui-timepicker__hours-up\">\n                    <eui-icon-svg\n                        (click)=\"changeHours(stepHours)\"\n                        [class.time-control--disabled]=\"hoursUpDisabled || isDisabled\"\n                        icon=\"eui-chevron-up\"\n                        fillColor=\"secondary\"\n                        [size]=\"iconSize\"\n                        role=\"button\"\n                        aria-label=\"Increase Hours\">\n                    </eui-icon-svg>\n                </div>\n            }\n            <input\n                #inputrefhours\n                euiInputNumber\n                [leadingZero]=\"2\"\n                [digits]=\"2\"\n                [fractionDigits]=\"0\"\n                class=\"eui-timepicker__input\"\n                placeholder=\"HH\"\n                [ngModel]=\"hours\"\n                (ngModelChange)=\"updateHours($event)\"\n                [readonly]=\"isreadOnly\"\n                [disabled]=\"isDisabled\"\n                aria-label=\"Hours\"\n                [attr.aria-required]=\"hasAriaRequiredAttribute ? 'true' : null\"\n                (keydown.ArrowUp)=\"changeHours(stepHours); $event.preventDefault()\"\n                (keydown.ArrowDown)=\"changeHours(-stepHours); $event.preventDefault()\" />\n            @if (!isreadOnly) {\n                <div class=\"eui-timepicker__chevron eui-timepicker__hours-down\">\n                    <eui-icon-svg\n                        (click)=\"changeHours(-stepHours)\"\n                        [class.time-control--disabled]=\"hoursDownDisabled || isDisabled\"\n                        icon=\"eui-chevron-down\"\n                        fillColor=\"secondary\"\n                        [size]=\"iconSize\"\n                        role=\"button\"\n                        aria-label=\"Decrease Hours\">\n                    </eui-icon-svg>\n                </div>\n            }\n        </div>\n        <div class=\"eui-timepicker__spacer\">:</div>\n        <div class=\"eui-timepicker__input-container\">\n            @if (!isreadOnly) {\n                <div class=\"eui-timepicker__chevron eui-timepicker__minutes-up\">\n                    <eui-icon-svg\n                        (click)=\"changeMinutes(stepMinutes)\"\n                        [class.time-control--disabled]=\"minutesUpDisabled || isDisabled\"\n                        icon=\"eui-chevron-up\"\n                        fillColor=\"secondary\"\n                        [size]=\"iconSize\"\n                        role=\"button\"\n                        aria-label=\"Increase Minutes\">\n                    </eui-icon-svg>\n                </div>\n            }\n            <input\n                #inputrefmins\n                euiInputNumber\n                [leadingZero]=\"2\"\n                [digits]=\"2\"\n                [fractionDigits]=\"0\"\n                class=\"eui-timepicker__input\"\n                placeholder=\"MM\"\n                [ngModel]=\"mins\"\n                (ngModelChange)=\"updateMinutes($event)\"\n                [readonly]=\"isreadOnly\"\n                [disabled]=\"isDisabled\"\n                aria-label=\"Minutes\"\n                [attr.aria-required]=\"hasAriaRequiredAttribute ? 'true' : null\"\n                (keydown.ArrowUp)=\"changeMinutes(stepMinutes); $event.preventDefault()\"\n                (keydown.ArrowDown)=\"changeMinutes(-stepMinutes); $event.preventDefault()\" />\n            @if (!isreadOnly) {\n                <div class=\"eui-timepicker__chevron eui-timepicker__minutes-down\">\n                    <eui-icon-svg\n                        (click)=\"changeMinutes(-stepMinutes)\"\n                        [class.time-control--disabled]=\"minutesDownDisabled || isDisabled\"\n                        icon=\"eui-chevron-down\"\n                        fillColor=\"secondary\"\n                        [size]=\"iconSize\"\n                        role=\"button\"\n                        aria-label=\"Decrease Minutes\">\n                    </eui-icon-svg>\n                </div>\n            }\n        </div>\n        @if (hasSeconds) {\n            <div class=\"eui-timepicker__spacer\">:</div>\n            <div class=\"eui-timepicker__input-container\">\n                @if (!isreadOnly) {\n                    <div class=\"eui-timepicker__chevron eui-timepicker__seconds-up\">\n                        <eui-icon-svg\n                            (click)=\"changeSeconds(stepSeconds)\"\n                            [class.time-control--disabled]=\"secondsUpDisabled || isDisabled\"\n                            icon=\"eui-chevron-up\"\n                            fillColor=\"secondary\"\n                            [size]=\"iconSize\"\n                            role=\"button\"\n                            aria-label=\"Increase seconds\">\n                        </eui-icon-svg>\n                    </div>\n                }\n                <input\n                    #inputrefsecs\n                    euiInputNumber\n                    [leadingZero]=\"2\"\n                    [digits]=\"2\"\n                    [fractionDigits]=\"0\"\n                    class=\"eui-timepicker__input\"\n                    placeholder=\"SS\"\n                    [ngModel]=\"secs\"\n                    (ngModelChange)=\"updateSeconds($event)\"\n                    [readonly]=\"isreadOnly\"\n                    [disabled]=\"isDisabled\"\n                    aria-label=\"Seconds\"\n                    [attr.aria-required]=\"hasAriaRequiredAttribute ? 'true' : null\"\n                    (keydown.ArrowUp)=\"changeSeconds(stepSeconds); $event.preventDefault()\"\n                    (keydown.ArrowDown)=\"changeSeconds(-stepSeconds); $event.preventDefault()\" />\n                @if (!isreadOnly) {\n                    <div class=\"eui-timepicker__chevron eui-timepicker__seconds-down\">\n                        <eui-icon-svg\n                            (click)=\"changeSeconds(-stepSeconds)\"\n                            [class.time-control--disabled]=\"secondsDownDisabled || isDisabled\"\n                            icon=\"eui-chevron-down\"\n                            fillColor=\"secondary\"\n                            [size]=\"iconSize\"\n                            role=\"button\"\n                            aria-label=\"Decrease seconds\">\n                        </eui-icon-svg>\n                    </div>\n                }\n            </div>\n        }\n    }\n</div>\n", styles: [".eui-21 .eui-timepicker{align-items:center;display:flex}.eui-21 .eui-timepicker--centered{justify-content:center}.eui-21 .eui-timepicker__input-container{width:calc(4 * var(--eui-s-m))}.eui-21 .eui-timepicker__input{text-align:center;width:100%}.eui-21 .eui-timepicker__input--one-field{width:calc(6 * var(--eui-s-m))!important;margin-bottom:var(--eui-s-3xs)}.eui-21 .eui-timepicker__spacer{text-align:center;width:var(--eui-s-m)}.eui-21 .eui-timepicker__chevron{display:flex;justify-content:center;padding:var(--eui-s-xs)}.eui-21 .eui-timepicker__chevron .eui-icon-svg:not(.time-control--disabled):hover{cursor:pointer;color:var(--eui-c-active)}.eui-21 .eui-timepicker__chevron .eui-icon-svg.time-control--disabled{background-image:none;box-shadow:none;cursor:not-allowed!important;opacity:var(--eui-o-50)}.eui-21 input[type=number]::-webkit-inner-spin-button,.eui-21 input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.eui-21 input[type=number]{-moz-appearance:textfield}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", 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]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: NgxMaskDirective, selector: "input[mask], textarea[mask]", inputs: ["mask", "specialCharacters", "patterns", "prefix", "suffix", "thousandSeparator", "decimalMarker", "dropSpecialCharacters", "hiddenInput", "showMaskTyped", "placeHolderCharacter", "shownMaskExpression", "clearIfNotMatch", "validation", "separatorLimit", "allowNegativeNumbers", "leadZeroDateTime", "leadZero", "triggerOnMaskChange", "apm", "inputTransformFn", "outputTransformFn", "keepCharacterPositions", "instantPrefix"], outputs: ["maskFilled"], exportAs: ["mask", "ngxMask"] }, { kind: "component", type: i2.EuiInputNumberComponent, selector: "input[euiInputNumber]", inputs: ["min", "max", "leadingZero", "isInvalid", "fractionDigits", "digits", "fillFraction", "roundUp", "noFormat", "value"] }, { kind: "directive", type: i2.EuiInputNumberDirective, selector: "input[euiInputNumber][formControl],input[euiInputNumber][formControlName],input[euiInputNumber][ngModel]" }, { kind: "component", type: i3.EuiInputTextComponent, selector: "input[euiInputText]", inputs: ["isInvalid"] }, { kind: "component", type: i4.EuiIconSvgComponent, selector: "eui-icon-svg, span[euiIconSvg], i[euiIconSvg]", inputs: ["icon", "fillColor", "set", "size", "style", "iconUrl", "transform", "ariaLabel", "ariaHidden", "focusable", "isLoading", "isInputIcon", "euiStart", "euiEnd"] }], encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: EuiTimepickerComponent, decorators: [{
            type: Component,
            args: [{ selector: 'eui-timepicker', encapsulation: ViewEncapsulation.None, imports: [
                        FormsModule,
                        ReactiveFormsModule,
                        NgxMaskDirective,
                        ...EUI_INPUT_NUMBER,
                        ...EUI_INPUT_TEXT,
                        ...EUI_ICON,
                    ], providers: [provideNgxMask()], template: "<div class=\"eui-timepicker\" [class.eui-timepicker--centered]=\"isDatetimepicker\" attr.data-e2e=\"{{ e2eAttr }}\">\n    @if (isOneInputField) {\n        <input\n            [class.eui-timepicker__input--one-field]=\"isDatetimepicker\"\n            euiInputText\n            [id]=\"inputId\"\n            mask=\"{{ timeMask }}\"\n            [leadZeroDateTime]=\"true\"\n            [placeholder]=\"placeholder\"\n            [attr.aria-label]=\"oneInputFormControl.value?oneInputFormControl.value:'No time value'\"\n            [formControl]=\"oneInputFormControl\"\n            (focusout)=\"onFocusOut()\"\n            [dropSpecialCharacters]=\"false\"\n            [readonly]=\"isreadOnly\" />\n    } @else {\n        <div class=\"eui-timepicker__input-container\">\n            @if (!isreadOnly) {\n                <div class=\"eui-timepicker__chevron eui-timepicker__hours-up\">\n                    <eui-icon-svg\n                        (click)=\"changeHours(stepHours)\"\n                        [class.time-control--disabled]=\"hoursUpDisabled || isDisabled\"\n                        icon=\"eui-chevron-up\"\n                        fillColor=\"secondary\"\n                        [size]=\"iconSize\"\n                        role=\"button\"\n                        aria-label=\"Increase Hours\">\n                    </eui-icon-svg>\n                </div>\n            }\n            <input\n                #inputrefhours\n                euiInputNumber\n                [leadingZero]=\"2\"\n                [digits]=\"2\"\n                [fractionDigits]=\"0\"\n                class=\"eui-timepicker__input\"\n                placeholder=\"HH\"\n                [ngModel]=\"hours\"\n                (ngModelChange)=\"updateHours($event)\"\n                [readonly]=\"isreadOnly\"\n                [disabled]=\"isDisabled\"\n                aria-label=\"Hours\"\n                [attr.aria-required]=\"hasAriaRequiredAttribute ? 'true' : null\"\n                (keydown.ArrowUp)=\"changeHours(stepHours); $event.preventDefault()\"\n                (keydown.ArrowDown)=\"changeHours(-stepHours); $event.preventDefault()\" />\n            @if (!isreadOnly) {\n                <div class=\"eui-timepicker__chevron eui-timepicker__hours-down\">\n                    <eui-icon-svg\n                        (click)=\"changeHours(-stepHours)\"\n                        [class.time-control--disabled]=\"hoursDownDisabled || isDisabled\"\n                        icon=\"eui-chevron-down\"\n                        fillColor=\"secondary\"\n                        [size]=\"iconSize\"\n                        role=\"button\"\n                        aria-label=\"Decrease Hours\">\n                    </eui-icon-svg>\n                </div>\n            }\n        </div>\n        <div class=\"eui-timepicker__spacer\">:</div>\n        <div class=\"eui-timepicker__input-container\">\n            @if (!isreadOnly) {\n                <div class=\"eui-timepicker__chevron eui-timepicker__minutes-up\">\n                    <eui-icon-svg\n                        (click)=\"changeMinutes(stepMinutes)\"\n                        [class.time-control--disabled]=\"minutesUpDisabled || isDisabled\"\n                        icon=\"eui-chevron-up\"\n                        fillColor=\"secondary\"\n                        [size]=\"iconSize\"\n                        role=\"button\"\n                        aria-label=\"Increase Minutes\">\n                    </eui-icon-svg>\n                </div>\n            }\n            <input\n                #inputrefmins\n                euiInputNumber\n                [leadingZero]=\"2\"\n                [digits]=\"2\"\n                [fractionDigits]=\"0\"\n                class=\"eui-timepicker__input\"\n                placeholder=\"MM\"\n                [ngModel]=\"mins\"\n                (ngModelChange)=\"updateMinutes($event)\"\n                [readonly]=\"isreadOnly\"\n                [disabled]=\"isDisabled\"\n                aria-label=\"Minutes\"\n                [attr.aria-required]=\"hasAriaRequiredAttribute ? 'true' : null\"\n                (keydown.ArrowUp)=\"changeMinutes(stepMinutes); $event.preventDefault()\"\n                (keydown.ArrowDown)=\"changeMinutes(-stepMinutes); $event.preventDefault()\" />\n            @if (!isreadOnly) {\n                <div class=\"eui-timepicker__chevron eui-timepicker__minutes-down\">\n                    <eui-icon-svg\n                        (click)=\"changeMinutes(-stepMinutes)\"\n                        [class.time-control--disabled]=\"minutesDownDisabled || isDisabled\"\n                        icon=\"eui-chevron-down\"\n                        fillColor=\"secondary\"\n                        [size]=\"iconSize\"\n                        role=\"button\"\n                        aria-label=\"Decrease Minutes\">\n                    </eui-icon-svg>\n                </div>\n            }\n        </div>\n        @if (hasSeconds) {\n            <div class=\"eui-timepicker__spacer\">:</div>\n            <div class=\"eui-timepicker__input-container\">\n                @if (!isreadOnly) {\n                    <div class=\"eui-timepicker__chevron eui-timepicker__seconds-up\">\n                        <eui-icon-svg\n                            (click)=\"changeSeconds(stepSeconds)\"\n                            [class.time-control--disabled]=\"secondsUpDisabled || isDisabled\"\n                            icon=\"eui-chevron-up\"\n                            fillColor=\"secondary\"\n                            [size]=\"iconSize\"\n                            role=\"button\"\n                            aria-label=\"Increase seconds\">\n                        </eui-icon-svg>\n                    </div>\n                }\n                <input\n                    #inputrefsecs\n                    euiInputNumber\n                    [leadingZero]=\"2\"\n                    [digits]=\"2\"\n                    [fractionDigits]=\"0\"\n                    class=\"eui-timepicker__input\"\n                    placeholder=\"SS\"\n                    [ngModel]=\"secs\"\n                    (ngModelChange)=\"updateSeconds($event)\"\n                    [readonly]=\"isreadOnly\"\n                    [disabled]=\"isDisabled\"\n                    aria-label=\"Seconds\"\n                    [attr.aria-required]=\"hasAriaRequiredAttribute ? 'true' : null\"\n                    (keydown.ArrowUp)=\"changeSeconds(stepSeconds); $event.preventDefault()\"\n                    (keydown.ArrowDown)=\"changeSeconds(-stepSeconds); $event.preventDefault()\" />\n                @if (!isreadOnly) {\n                    <div class=\"eui-timepicker__chevron eui-timepicker__seconds-down\">\n                        <eui-icon-svg\n                            (click)=\"changeSeconds(-stepSeconds)\"\n                            [class.time-control--disabled]=\"secondsDownDisabled || isDisabled\"\n                            icon=\"eui-chevron-down\"\n                            fillColor=\"secondary\"\n                            [size]=\"iconSize\"\n                            role=\"button\"\n                            aria-label=\"Decrease seconds\">\n                        </eui-icon-svg>\n                    </div>\n                }\n            </div>\n        }\n    }\n</div>\n", styles: [".eui-21 .eui-timepicker{align-items:center;display:flex}.eui-21 .eui-timepicker--centered{justify-content:center}.eui-21 .eui-timepicker__input-container{width:calc(4 * var(--eui-s-m))}.eui-21 .eui-timepicker__input{text-align:center;width:100%}.eui-21 .eui-timepicker__input--one-field{width:calc(6 * var(--eui-s-m))!important;margin-bottom:var(--eui-s-3xs)}.eui-21 .eui-timepicker__spacer{text-align:center;width:var(--eui-s-m)}.eui-21 .eui-timepicker__chevron{display:flex;justify-content:center;padding:var(--eui-s-xs)}.eui-21 .eui-timepicker__chevron .eui-icon-svg:not(.time-control--disabled):hover{cursor:pointer;color:var(--eui-c-active)}.eui-21 .eui-timepicker__chevron .eui-icon-svg.time-control--disabled{background-image:none;box-shadow:none;cursor:not-allowed!important;opacity:var(--eui-o-50)}.eui-21 input[type=number]::-webkit-inner-spin-button,.eui-21 input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.eui-21 input[type=number]{-moz-appearance:textfield}\n"] }]
        }], ctorParameters: () => [], propDecorators: { e2eAttr: [{
                type: Input
            }], inputId: [{
                type: Input
            }], timeMask: [{
                type: Input
            }], placeholder: [{
                type: Input
            }], stepHours: [{
                type: Input
            }], stepMinutes: [{
                type: Input
            }], stepSeconds: [{
                type: Input
            }], iconSize: [{
                type: Input
            }], isreadOnly: [{
                type: Input,
                args: [{ transform: booleanAttribute }]
            }], isDisabled: [{
                type: Input,
                args: [{ transform: booleanAttribute }]
            }], isOneInputField: [{
                type: Input,
                args: [{ transform: booleanAttribute }]
            }], hasSeconds: [{
                type: Input,
                args: [{ transform: booleanAttribute }]
            }] } });

const EUI_TIMEPICKER = [
    EuiTimepickerComponent,
];
// export { EuiTimepickerComponent as EuiTimepicker } from './eui-timepicker.component';

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

export { EUI_TIMEPICKER, EuiTimepickerComponent };
//# sourceMappingURL=eui-components-eui-timepicker.mjs.map
