import { r as registerInstance, d as createEvent, h, c as getElement } from './core-b78a8f7e.js';
import { T as TimePickerService } from './time-picker.service-de4d4a4f.js';

const TimePickerInput = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
        this.minutes = false;
        this.anjHourChanged = createEvent(this, "anjHourChanged", 7);
        this.anjHourTab = createEvent(this, "anjHourTab", 7);
        this.anjMinuteChanged = createEvent(this, "anjMinuteChanged", 7);
    }
    strategyWatcher() {
        this.assignLabel();
    }
    valueHandler(newValue) {
        this.digits = TimePickerService.padZero(newValue);
    }
    /**
     * Listens for input blur.
     */
    onAnjBlur() {
        this.debounceErrors();
        (this.minutes) ? this.minuteChangedHandler(this.digits) : this.hourChangedHandler(this.digits);
    }
    /**
     * Listens for input update.
     */
    onAnjInput(event) {
        this.digits = TimePickerService.padZero(event.detail.target.value);
        this.checkTab();
    }
    /**
     * Listens for child input focus, then highlights all input text
     * Typically used when an autotab is forced from the hour input to the minute input, to select all minute input text
     */
    onAnjFocus(event) {
        setTimeout(() => {
            const anjInput = event.target;
            anjInput.firstElementChild.select();
        }, 100);
    }
    /**
     * Allows input focus to be set from an external source
     * Typically used when opening the picker to set the focus to the hour input
     */
    async focusNativeInput() {
        this.input.setFocus();
    }
    componentWillLoad() {
        this.digits = TimePickerService.padZero(this.value);
        this.assignLabel();
        this.placeholderText = (this.minutes) ? 'mm' : 'hh';
        this.regexPattern = this.strategy.getRegex(this.minutes);
    }
    componentDidUpdate() {
        this.selectInput();
    }
    assignLabel() {
        this.label = this.strategy.getInputLabel(this.minutes);
    }
    checkTab() {
        const numDigits = Number(this.digits);
        if (!this.minutes && this.strategy.autoTab(numDigits)) {
            this.anjHourTab.emit();
        }
    }
    displayErrors(invalid) {
        const errorMessage = (this.minutes) ? `(1-59)` : `(${this.strategy.getHourRange()})`;
        this.displayError = (invalid) ? errorMessage : '';
    }
    debounceErrors() {
        window.clearTimeout(this.errorsTimer);
        this.errorsTimer = window.setTimeout(() => {
            this.displayErrors(this.input.invalid);
        }, 100);
    }
    minuteChangedHandler(val) {
        this.anjMinuteChanged.emit(val);
    }
    hourChangedHandler(val) {
        this.anjHourChanged.emit(val);
    }
    selectInput() {
        const nativeInput = this.input.firstElementChild;
        if (this.element.firstElementChild.classList.contains('anj-focused')) {
            nativeInput.select();
        }
    }
    render() {
        return (h("anj-form-group", null, h("anj-label", null, this.label), h("anj-input", { ref: r => this.input = r, value: this.digits, pattern: this.regexPattern, placeholder: this.placeholderText, minlength: 1, maxlength: 2, type: "text" }), h("anj-form-error", null, this.displayError)));
    }
    get element() { return getElement(this); }
    static get watchers() { return {
        "strategy": ["strategyWatcher"],
        "value": ["valueHandler"]
    }; }
};

export { TimePickerInput as anj_time_picker_input };
