import { h, Host } from '@stencil/core';
import { yyyymmdd } from '../../utils/utils';
export class DateField {
    constructor() {
        /** 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;
    }
    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", { 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 is() { return "materials-date-field"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() { return {
        "$": ["date-field.scss"]
    }; }
    static get styleUrls() { return {
        "$": ["date-field.css"]
    }; }
    static get properties() { return {
        "fullwidth": {
            "type": "boolean",
            "mutable": false,
            "complexType": {
                "original": "boolean",
                "resolved": "boolean",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": "Styles the date field as a full width text field.\nWarning : do not use with outlined"
            },
            "attribute": "fullwidth",
            "reflect": false
        },
        "dense": {
            "type": "boolean",
            "mutable": false,
            "complexType": {
                "original": "boolean",
                "resolved": "boolean",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": "Styles the date field as a dense text field."
            },
            "attribute": "dense",
            "reflect": false
        },
        "outlined": {
            "type": "boolean",
            "mutable": false,
            "complexType": {
                "original": "boolean",
                "resolved": "boolean",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": "Render an outlined date field"
            },
            "attribute": "outlined",
            "reflect": false
        },
        "focused": {
            "type": "boolean",
            "mutable": false,
            "complexType": {
                "original": "boolean",
                "resolved": "boolean",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": "Styles the date field as a text field in focus."
            },
            "attribute": "focused",
            "reflect": false
        },
        "disabled": {
            "type": "boolean",
            "mutable": false,
            "complexType": {
                "original": "boolean",
                "resolved": "boolean",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": "Styles the date field as a disabled text field."
            },
            "attribute": "disabled",
            "reflect": false
        },
        "leadingIcon": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": "Add a leading icon to ths date field.\nYou have to pass a material icon name"
            },
            "attribute": "leading-icon",
            "reflect": false
        },
        "label": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": "The date field label."
            },
            "attribute": "label",
            "reflect": false
        },
        "required": {
            "type": "boolean",
            "mutable": false,
            "complexType": {
                "original": "boolean",
                "resolved": "boolean",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": "Mark this date field as required"
            },
            "attribute": "required",
            "reflect": false
        },
        "value": {
            "type": "any",
            "mutable": true,
            "complexType": {
                "original": "any",
                "resolved": "any",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": "The date field value"
            },
            "attribute": "value",
            "reflect": true
        },
        "width": {
            "type": "number",
            "mutable": false,
            "complexType": {
                "original": "number",
                "resolved": "number",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": "The date field width"
            },
            "attribute": "width",
            "reflect": false
        },
        "helperText": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": "Add an helper text to this date field"
            },
            "attribute": "helper-text",
            "reflect": false
        },
        "persistent": {
            "type": "boolean",
            "mutable": false,
            "complexType": {
                "original": "boolean",
                "resolved": "boolean",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": "Set the helper text persistant (appears on focus otherwise)"
            },
            "attribute": "persistent",
            "reflect": false
        },
        "customValidation": {
            "type": "unknown",
            "mutable": false,
            "complexType": {
                "original": "() => Promise<string>",
                "resolved": "() => Promise<string>",
                "references": {
                    "Promise": {
                        "location": "global"
                    }
                }
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": "Provide a custom validation function to this time-field.\nIn case of error, the promise should return a message with the\nerror message to display"
            }
        },
        "datepicker": {
            "type": "boolean",
            "mutable": false,
            "complexType": {
                "original": "boolean",
                "resolved": "boolean",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": "Display a datepicker when clicking on the date-field"
            },
            "attribute": "datepicker",
            "reflect": false,
            "defaultValue": "true"
        },
        "datepickerTodayPicker": {
            "type": "boolean",
            "mutable": false,
            "complexType": {
                "original": "boolean",
                "resolved": "boolean",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": "The datepicker has a today button"
            },
            "attribute": "datepicker-today-picker",
            "reflect": false,
            "defaultValue": "true"
        },
        "datepickerMonthPicker": {
            "type": "boolean",
            "mutable": false,
            "complexType": {
                "original": "boolean",
                "resolved": "boolean",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": "The datepicker has a month navigation bar"
            },
            "attribute": "datepicker-month-picker",
            "reflect": false,
            "defaultValue": "true"
        },
        "datepickerYearPicker": {
            "type": "boolean",
            "mutable": false,
            "complexType": {
                "original": "boolean",
                "resolved": "boolean",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": "The datepicker has a year navigation bar"
            },
            "attribute": "datepicker-year-picker",
            "reflect": false,
            "defaultValue": "true"
        }
    }; }
    static get events() { return [{
            "method": "input",
            "name": "input",
            "bubbles": true,
            "cancelable": true,
            "composed": true,
            "docs": {
                "tags": [],
                "text": "Emitted when the input text change"
            },
            "complexType": {
                "original": "any",
                "resolved": "any",
                "references": {}
            }
        }]; }
    static get methods() { return {
        "isValid": {
            "complexType": {
                "signature": "() => Promise<boolean>",
                "parameters": [],
                "references": {
                    "Promise": {
                        "location": "global"
                    }
                },
                "return": "Promise<boolean>"
            },
            "docs": {
                "text": "",
                "tags": []
            }
        },
        "forceValidation": {
            "complexType": {
                "signature": "() => Promise<void>",
                "parameters": [],
                "references": {
                    "Promise": {
                        "location": "global"
                    }
                },
                "return": "Promise<void>"
            },
            "docs": {
                "text": "",
                "tags": []
            }
        }
    }; }
    static get watchers() { return [{
            "propName": "value",
            "methodName": "updateValue"
        }]; }
}
