import { h, Host } from '@stencil/core';
/**
 * A simple time field component with an integrated timepicker and custom validation capability.
 * Basic usage : <materials-time-field value="12:00"></materials-time-field>
 */
export class TimeField {
    constructor() {
        /** 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';
    }
    /** 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 is() { return "materials-time-field"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() { return {
        "$": ["time-field.scss"]
    }; }
    static get styleUrls() { return {
        "$": ["time-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
        },
        "timepicker": {
            "type": "boolean",
            "mutable": false,
            "complexType": {
                "original": "boolean",
                "resolved": "boolean",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": "Display a timepicker when clicking on the time-field"
            },
            "attribute": "timepicker",
            "reflect": false,
            "defaultValue": "true"
        },
        "timepickerStep": {
            "type": "number",
            "mutable": false,
            "complexType": {
                "original": "number",
                "resolved": "number",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": "The timepicker options interval (in minutes)"
            },
            "attribute": "timepicker-step",
            "reflect": false,
            "defaultValue": "15"
        },
        "timepickerFormat": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "'12h' | '24h'",
                "resolved": "\"12h\" | \"24h\"",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": "The timepicker format"
            },
            "attribute": "timepicker-format",
            "reflect": false,
            "defaultValue": "'24h'"
        },
        "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"
            }
        }
    }; }
    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": "Return the time-field current value validity",
                "tags": []
            }
        },
        "forceValidation": {
            "complexType": {
                "signature": "() => Promise<void>",
                "parameters": [],
                "references": {
                    "Promise": {
                        "location": "global"
                    }
                },
                "return": "Promise<void>"
            },
            "docs": {
                "text": "Force the validation of thid time field (native validation + custom validation)",
                "tags": []
            }
        }
    }; }
    static get watchers() { return [{
            "propName": "value",
            "methodName": "updateValue"
        }]; }
}
