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

const DateField = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
        /** Display a datepicker when clicking on the date-field */
        this.datepicker = true;
        /** The datepicker has a today button */
        this.datepickerTodayPicker = true;
        /** The datepicker has a month navigation bar */
        this.datepickerMonthPicker = true;
        /** The datepicker has a year navigation bar */
        this.datepickerYearPicker = true;
        this.input = createEvent(this, "input", 7);
    }
    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;
        }
    }
    async isValid() {
        return await this.materialsTextFieldEl.isValid();
    }
    async forceValidation() {
        this.materialsTextFieldEl.forceValidation();
    }
    renderDatepicker() {
        if (!this.datepicker)
            return;
        return (h("materials-menu", { noPadding: true, ref: el => this.materialsMenuDatepickerEl = el }, h("materials-card", { padding: 16, elevation: 4, width: "fit-content" }, h("materials-datepicker", { class: "date-picker", dateSelected: this.value ? new Date(this.value) : new Date(), "today-picker": this.datepickerTodayPicker, yearPicker: this.datepickerYearPicker, monthPicker: this.datepickerMonthPicker, nullable: !this.required, onDateSelectedUpdate: ev => {
                this.value = ev.detail ? yyyymmdd(ev.detail) : '';
                this.input.emit(); // pour déclencher la validation en fonction de onInput
                if (this.materialsMenuDatepickerEl)
                    this.materialsMenuDatepickerEl.close();
            }, onClick: ev => ev.stopPropagation() }))));
    }
    async openPicker(ev) {
        if (this.disabled) {
            return;
        }
        if (this.datepicker) {
            ev.stopPropagation();
            ev.preventDefault();
            if (this.materialsMenuDatepickerEl)
                this.materialsMenuDatepickerEl.open();
        }
    }
    render() {
        return (h(Host, { class: { 'materials-date-field--dense': this.dense } }, h("materials-text-field", { class: "datepicker-with-value", type: "date", 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.renderDatepicker()));
    }
    static get watchers() { return {
        "value": ["updateValue"]
    }; }
    static get style() { return ":host{display:-ms-flexbox;display:flex;}.date-picker{padding:16px;}"; }
};

export { DateField as materials_date_field };
