import { r as registerInstance, d as createEvent, h, c as getElement } from './core-3f33e631.js';
import { T as Tunnel } from './i18n.provider-106e9203.js';
import { T as TimePickerService, M as MeridiemTimeDisplay, a as MilitaryTimeDisplay } from './time-picker.service-de4d4a4f.js';
import { g as getValidator } from './validatorFactory-d4b539f1.js';

let inputId = 0;
const TimePicker = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
        this.clockListener = ({ detail }) => this.valueChangeHandler(detail);
        this.overlayListener = () => this.close();
        this.toggleClickListener = () => this.open();
        /**
         * The time picker id
         */
        this.inputId = `anj-time-picker-${inputId++}`;
        /**
         * Bool to display time in meridiem or military
         */
        this.meridiem = true;
        /**
         * How to align the overlay when it opens.
         * Options are `"bottom-end"` or `"bottom-start"` which is the default.
         */
        this.placement = 'bottom-end';
        this.anjClockSelection = createEvent(this, "anjClockSelection", 7);
        this.anjInputControlDidLoad = createEvent(this, "anjInputControlDidLoad", 7);
    }
    injectedPropWatcher() {
        this.assignStrategy();
    }
    valueHandler(newValue, oldValue) {
        if (newValue !== oldValue) {
            this.updateCustomValidity(newValue);
        }
    }
    connectedCallback() {
        this.input = this.element.parentElement;
        this.assignStrategy();
        this.connectToggle(this.input.querySelector('anj-time-picker-toggle'));
        this.setValues(this.input.value);
        this.configureValidationParameters();
    }
    componentDidLoad() {
        this.anjInputControlDidLoad.emit();
    }
    disconnectedCallback() {
        if (this.overlay) {
            this.overlay.removeEventListener('anjWillDismiss', this.overlayListener);
            this.overlay = null;
        }
        if (this.clock) {
            this.clock.removeEventListener('anjTimeChanged', this.clockListener);
            this.clock = null;
        }
        const toggle = this.input.querySelector('anj-time-picker-toggle');
        if (toggle) {
            toggle.removeEventListener('click', this.toggleClickListener);
        }
    }
    /**
     * open the time picker
     */
    async open() {
        if (!this.overlay) {
            this.bindOverlay(this.element.querySelector('anj-overlay'));
            this.bindClock(this.element.querySelector('anj-time-picker-clock'));
        }
        const popper = await this.overlay.popper();
        if (!popper) {
            this.configureValidationParameters();
            await this.overlay.open(this.element);
            setTimeout(() => this.clock.focusHour(), 100);
        }
        this.setValues(this.input.value);
    }
    /**
     * close the time picker
     */
    async close() {
        await this.overlay.close();
        this.updateInputValue();
    }
    /**
     * formatter, passed to anj-input, currently a pass-through
     */
    inputFormatter(inputValue) {
        this.input.placeholder = this.strategy.genPlaceHolder(null);
        return Promise.resolve(inputValue);
    }
    /**
     * comparator, passed to anj-input, which compares two time strings for parity
     */
    hasValueChanged(newVal, oldVal) {
        this.input.placeholder = this.strategy.genPlaceHolder(null);
        return Promise.resolve(newVal !== oldVal);
    }
    async innerValue() {
        return this.value;
    }
    async remoteCustomValidator(valueString) {
        const militaryTimeSegments = TimePickerService.parseToTimeFields(valueString)['military'];
        const valueAsNum = militaryTimeSegments.hour.concat(militaryTimeSegments.minutes);
        return this.updateCustomValidity(valueAsNum);
    }
    assignStrategy() {
        this.strategy = (this.meridiem) ? new MeridiemTimeDisplay(this.locale, this.language) : new MilitaryTimeDisplay(this.locale, this.language);
    }
    configureValidationParameters() {
        if (this.input.min) {
            const { boundary } = this.strategy.minmaxHandler(this.input.min);
            this.min = boundary;
        }
        if (this.input.max) {
            const { boundary } = this.strategy.minmaxHandler(this.input.max);
            this.max = boundary;
        }
        this.setCustomValidator();
    }
    connectToggle(toggle) {
        if (toggle) {
            toggle.addEventListener('click', this.toggleClickListener);
        }
    }
    setCustomValidator() {
        this.validator = getValidator([
            { name: 'min', options: { min: this.min } },
            { name: 'max', options: { max: this.max } }
        ]);
    }
    setValues(value) {
        if (value && value === '') {
            this.value = undefined;
        }
        else if (value) {
            this.value = value.toString();
        }
    }
    updateCustomValidity(value) {
        let response = {};
        if (this.validator) {
            response = this.validator.validate(value);
        }
        return response;
    }
    updateInputValue() {
        this.input.value = (this.value) ? this.value : '';
        this.anjClockSelection.emit(this.value);
    }
    valueChangeHandler({ parsedValue }) {
        this.input.placeholder = this.strategy.genPlaceHolder(parsedValue);
        if (parsedValue && parsedValue.hour && parsedValue.minutes) {
            this.value = this.strategy.stringifyParsedTime(parsedValue, this.timezone);
        }
    }
    bindOverlay(el) {
        if (el) {
            this.overlay = el;
            this.overlay.addEventListener('anjWillDismiss', this.overlayListener);
        }
    }
    bindClock(el) {
        if (el) {
            this.clock = el;
            this.clock.addEventListener('anjTimeChanged', this.clockListener);
        }
    }
    render() {
        const overlayClasses = this.meridiem ? 'anj-time-picker-menu anj-dropdown-menu' : 'anj-time-picker-menu anj-dropdown-menu anj-no-control';
        return (h("anj-overlay", { class: overlayClasses, placement: this.placement }, h("anj-time-picker-clock", { context: 'horizontal', locale: this.locale, language: this.language, meridiem: this.meridiem, value: this.value })));
    }
    get element() { return getElement(this); }
    static get watchers() { return {
        "locale": ["injectedPropWatcher"],
        "language": ["injectedPropWatcher"],
        "value": ["valueHandler"]
    }; }
    static get style() { return "anj-time-picker {\n  bottom: 0;\n  display: block;\n  position: absolute;\n  right: 0;\n}\n\n.anj-time-picker-menu {\n  display: block;\n  font-size: 0.875rem;\n  font-family: var(--anj-font-family);\n  font-weight: normal;\n  line-height: 1.5;\n  outline: none;\n  border-top: solid var(--anj-highlight) 1px;\n  float: right;\n  margin: 0;\n  min-width: 0 !important;\n  max-width: 250px;\n  padding: 0;\n  position: absolute;\n  right: 0;\n  top: 0;\n}\n.anj-time-picker-menu, .anj-time-picker-menu::before, .anj-time-picker-menu::after {\n  -webkit-box-sizing: border-box;\n  box-sizing: border-box;\n  outline: none;\n}\n.anj-time-picker-menu:focus, .anj-time-picker-menu:active, .anj-time-picker-menu *:focus, .anj-time-picker-menu *:active {\n  outline: none;\n}\n.anj-time-picker-menu.anj-no-control {\n  width: 175px;\n}"; }
};
Tunnel.injectProps(TimePicker, ['locale', 'language']);

export { TimePicker as anj_time_picker };
