import { r as registerInstance, c as createEvent, h, H as Host } from './index-0b18a276.js';

const TimeField = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
        /** Display a timepicker when clicking on the time-field */
        this.timepicker = true;
        /** The timepicker options interval (in minutes) */
        this.timepickerStep = 15;
        /** The timepicker format */
        this.timepickerFormat = '24h';
        this.input = createEvent(this, "input", 7);
    }
    /** Return the time-field current value validity */
    async isValid() {
        return await this.materialsTextFieldEl.isValid();
    }
    /** Force the validation of thid time field (native validation + custom validation) */
    async forceValidation() {
        this.materialsTextFieldEl.forceValidation();
    }
    componentWillLoad() {
        if (this.outlined && this.fullwidth) {
            console.warn('[materials-date-field] You should not use fullwidth and outlined together');
        }
    }
    updateValue() {
        if (this.materialsTextFieldEl) {
            this.materialsTextFieldEl.value = this.value;
        }
    }
    renderTimePicker() {
        if (!this.timepicker)
            return;
        return h("materials-menu", { maxHeight: 200, noPadding: true, ref: el => this.materialsMenuTimepickerEl = el }, h("materials-timepicker", { timeSelected: this.value, clock24: this.timepickerFormat === '24h', step: this.timepickerStep, onTimeSelectedChange: ev => {
                this.value = ev.detail;
                this.input.emit(); // pour déclencher la validation en fonction de onInput
                if (this.materialsMenuTimepickerEl)
                    this.materialsMenuTimepickerEl.close();
            }, onClick: ev => ev.stopPropagation() }));
    }
    async openPicker(ev) {
        if (this.disabled) {
            return;
        }
        if (this.timepicker) {
            ev.stopPropagation();
            ev.preventDefault();
            if (this.materialsMenuTimepickerEl) {
                await this.materialsMenuTimepickerEl.open();
                // timepicker scroll auto
                const timepicker = this.materialsMenuTimepickerEl.querySelector('materials-timepicker');
                const scrollableContainer = this.materialsMenuTimepickerEl.shadowRoot.querySelector('.mdc-menu');
                const selectedItem = timepicker.shadowRoot.querySelector('materials-list-item[selected]');
                // positione l'élément au milieu de la liste deroulante.
                if (timepicker && scrollableContainer && selectedItem)
                    scrollableContainer.scrollTop = selectedItem.offsetTop - 60;
            }
        }
    }
    render() {
        return (h(Host, { class: { 'materials-time-field--dense': this.dense } }, h("materials-text-field", { class: "timepicker-with-value", type: "time", value: this.value, label: this.label, fullwidth: this.fullwidth, dense: this.dense, outlined: this.outlined, focused: this.focused, disabled: this.disabled, leadingIcon: this.leadingIcon, required: this.required, width: this.width, helperText: this.helperText, persistent: this.persistent, hideNativeClear: true, customValidation: this.customValidation, ref: el => this.materialsTextFieldEl = el, onInput: ev => {
                ev.stopPropagation();
                this.input.emit(ev.detail);
            }, onClick: ev => this.openPicker(ev) }), this.renderTimePicker()));
    }
    static get watchers() { return {
        "value": ["updateValue"]
    }; }
    static get style() { return ":host{display:-ms-flexbox;display:flex;}.date-picker{padding:16px;}"; }
};

export { TimeField as materials_time_field };
