/*!
 * Custom elements for Nanopore-Digital Web applications
 */
import { Host, } from "@stencil/core";
import { h } from "../../utils/renderer";
import { createDate, printISODate, parseISODate, } from "../../utils/date-utils";
import { createColorClasses } from "../../utils/theme";
const DateRegxps = {
    d: '(\\d{1,2})',
    m: '(\\d{1,2})',
    y: '(\\d{4})',
};
let inputIds = 0;
/**
 * Enables date selection and input in a form.
 *
 * @version 1.0.0
 * @status deprecated
 * @deprecated - use `nano-input` with `type="date"` instead.
 *
 * @slot label - if you do not set a label attribute, you can use this slot for more complex markup
 * @slot helper - helper text to accompany the form field underneath.
 * @slot start - input start slot
 * @slot end - input end slot
 */
export class DateInput {
    pickerEle;
    trigger;
    pickerCloseBtn;
    dropdown;
    input;
    directInput = false;
    dateOrderIndeces = { d: 0, m: 1, y: 3 };
    inputId = `nano-input-${inputIds++}`;
    locale = window.navigator.languages ||
        window.navigator.language ||
        undefined;
    host;
    // Private state
    pattern;
    inputValue;
    // Public Api / Prop
    /**
     * This will be true when the control is in an invalid state.
     * Validity is determined by the `required` prop. Or if custom validity message is set. @readonly
     */
    get invalid() {
        return this._invalid;
    }
    _invalid = false;
    /**
     * Current validation message - if any. @readonly
     */
    get validityMessage() {
        if (!this.input)
            return '';
        return this.input.validityMessage;
    }
    /**
     * Whether to show a long form, confirmation date string of the one currently entered
     */
    helperText = true;
    /**
     * Options for the date string display. Refer to https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleDateString.
     */
    helperTextFormat = {
        year: 'numeric',
        month: 'long',
        day: 'numeric',
    };
    /**
     * Enable floating label behaviour. Will disable placeholder if set.
     */
    floatLabel = false;
    /**
     * The name of the control, which is submitted with the form data.
     */
    name = this.inputId;
    /**
     * If `true`, the user cannot modify the value.
     */
    readonly = false;
    /**
     * The initial size (number of characters) of the control.
     */
    size;
    /**
     * The form element to associate the select with (its form owner). Must be the id of a form.
     */
    form;
    /**
     * Which day is considered first day of the week? `0` for Sunday, `1` for Monday, etc.
     * Default is Monday.
     */
    firstDayOfWeek;
    /**
     * Button labels, day names, month names, etc, used for localization.
     * Default is English.
     */
    localization;
    /**
     * If `true`, the user cannot interact with the input.
     */
    disabled = false;
    /**
     * The color to use from the application's color palette.
     */
    color;
    /**
     * This Boolean attribute lets you specify that a form control should have input focus when the page loads.
     */
    autofocus = false;
    /**
     * If `true`, a clear icon will appear in the input when there is a value. Clicking it clears the input.
     */
    clearable = false;
    /**
     * String to place within a label element. Alternatively you may use a label slot.
     */
    label;
    /**
     * Instructional text that shows before the input has a value.
     * The pattern prop will be used to create a placeholder automatically if unused.
     */
    placeholder;
    /**
     * Current value. Must be in IS0-8601 format: YYYY-MM-DD.
     */
    value = '';
    handleValueChange() {
        if (!this.directInput)
            this.inputValue = this.formatIsoDate(this.value);
        setTimeout(() => {
            this.nanoChange.emit({
                value: this.value,
                date: parseISODate(this.value),
            });
        }, 20);
        this.directInput = false;
    }
    /**
     * When should the field perform validation
     */
    validateOn = 'submitThenDirty';
    /**
     * Whether to show validation errors underneath input
     */
    showInlineError = true;
    /**
     * The order of the date parts for entry and display.
     * e.g. dmy = dd mm yyyy
     */
    dateOrder = 'dmy';
    handleDateOrderChange() {
        this.setDatePattern();
    }
    /**
     * If `true`, the user must fill in a value before submitting a form.
     */
    required = false;
    /**
     * Minimum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD.
     * This setting can be used alone or together with the max property.
     */
    min;
    /**
     * Maximum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD.
     * This setting can be used alone or together with the min property.
     */
    max;
    /**
     * Visually hide the label - but make it accessible.
     */
    hideLabel = false;
    testDateValidity() {
        const valueDate = parseISODate(this.value);
        let min, max, error = '';
        if (this.value && valueDate) {
            if (this.min && (min = parseISODate(this.min)) && valueDate < min) {
                error =
                    'Date below the minimum: ' +
                        min.toLocaleDateString(this.locale, this.helperTextFormat);
            }
            if (this.max && (max = parseISODate(this.max)) && valueDate > max) {
                error =
                    'Date above the maximum: ' +
                        max.toLocaleDateString(this.locale, this.helperTextFormat);
            }
            if (this.isDateDisabled(valueDate)) {
                error = 'Date selected is disabled.';
            }
        }
        requestAnimationFrame(async (_) => {
            if (!this.input)
                return;
            const input = await this.input.getInputElement();
            if (this.value.length && !valueDate)
                error = 'Please enter a valid date';
            input.setCustomValidity(error);
            if (this.input.validateOn === 'dirty') {
                this.input.showError(error);
            }
        });
    }
    /**
     * Show a date picker. Date pickers are not very useful
     * if the potential input is too far in the distance or past
     * e.g. Birthdays
     */
    picker = true;
    /**
     * Initial picker date. Defaults to `value` if set and today's date if not.
     * Must be in IS0-8601 format: YYYY-MM-DD.
     */
    initialPickerDate;
    /**
     * Set / read whether the picker is currently open.
     */
    pickerOpen = false;
    handlePickerOpenChange() {
        this.dropdown.open = this.pickerOpen;
    }
    /**
     * Close the picker after a date is selected
     */
    closeAfterPicked = true;
    /** nano-dropdown config options you can pass to the nested dropdown component */
    get dropDownConfig() {
        return this._dropDownConfig;
    }
    set dropDownConfig(ddc) {
        this._dropDownConfig = { ...this._dropDownConfig, ...ddc };
    }
    _dropDownConfig = {};
    /** @readonly get the value as a `Date` */
    get dateValue() {
        return parseISODate(this.value);
    }
    /** Controls which days are disabled and therefore disallowed.
     * For example, this can be used to disallow selection of weekends.
     * @returns `false` for not disabled and `true` for disabled */
    isDateDisabled = () => false;
    // Event emitters
    /**
     * Event emitted when a date is selected.
     */
    nanoChange;
    /**
     * Called when validation is performed (which depends on `validateOn`).
     * @returns event.detail: `{ isValid: boolean, errorMessage: string, originalEvent: Event }`.
     */
    nanoValidate;
    // Methods
    /**
     * Get the current state of the control.
     * @param validateFirst - perform validation first before reporting
     * @returns `{ isValid: boolean, errorMessage: string }`
     */
    async reportValidity(validateFirst) {
        const initValidity = await this.input.reportValidity(validateFirst);
        if (initValidity.isValid && validateFirst)
            this.testDateValidity();
        return await this.input.reportValidity(validateFirst);
    }
    /**
     * Sets focus on the child `nano-input`.
     */
    async setFocus() {
        if (this.input)
            this.input.setFocus();
    }
    /**
     * Returns the native `<input>` element used under the hood.
     * @returns `HTMLInputElement`
     */
    async getInputElement() {
        return await this.input.getInputElement();
    }
    /**
     * Invalidate the field and show a custom error message. To clear the error you will need to re-call this method with an empty string.
     */
    async showError(message) {
        if (!this.input)
            return;
        this.input.showError(message);
    }
    // Event handlers
    onInputChange = (e) => {
        e.stopPropagation();
        this.setValue(e.target.value);
    };
    onInputValidate = (e) => {
        e.stopPropagation();
        this._invalid = !e.detail.isValid;
        this.nanoValidate.emit({
            isValid: e.detail.isValid,
            errorMessage: e.detail.errorMessage,
            originalEvent: e.detail.originalEvent,
        });
    };
    onInputKey = () => {
        this.directInput = true;
    };
    onDatePicked = (e) => {
        this.directInput = false;
        this.value = e.detail.value;
        if (this.closeAfterPicked)
            this.pickerOpen = false;
    };
    onDropdownHide = () => {
        setTimeout((_) => (this.pickerOpen = false), 200);
        setTimeout((_) => this.trigger.focus(), 50);
    };
    onTriggerClick = () => {
        if (!this.pickerOpen) {
            this.pickerOpen = true;
        }
    };
    onTriggerKey = (e) => {
        if ([' ', 'Enter'].includes(e.key)) {
            if (!this.pickerOpen) {
                this.pickerOpen = true;
            }
        }
    };
    onCloseClick = () => {
        if (this.pickerOpen)
            this.pickerOpen = false;
    };
    onCloseKeyDown = (e) => {
        // this ensures focus is trapped inside the picker
        if (e.key === 'Tab' && e.shiftKey) {
            this.pickerEle.setFocus(true);
            e.preventDefault();
        }
        if (e.key === ' ' || e.key === 'Enter') {
            if (this.pickerOpen)
                this.pickerOpen = false;
        }
    };
    // Private logic
    // set the regexp input pattern and placeholder (if necessary)
    setDatePattern() {
        const dateRegexOrdered = [];
        const dateStrOrd = [];
        Array.from(this.dateOrder).map((datepart, i) => {
            dateRegexOrdered.push(DateRegxps[datepart]);
            this.dateOrderIndeces[datepart] = i;
            dateStrOrd.push(datepart === 'y' ? 'yyyy' : datepart + datepart);
        });
        this.pattern = dateRegexOrdered.join('\\W+');
        if (!this.placeholder && this.placeholder !== 'false')
            this.placeholder = dateStrOrd.join(' ');
    }
    // set the public facing date string
    formatIsoDate(isoDate) {
        const dateRegexOrdered = [];
        Array.from('ymd').map((datepart) => dateRegexOrdered.push(DateRegxps[datepart]));
        const matches = isoDate.match(new RegExp(dateRegexOrdered.join('\\W+')));
        if (!matches)
            return '';
        const formatted = [];
        formatted[this.dateOrderIndeces.d] = matches[3];
        formatted[this.dateOrderIndeces.m] = matches[2];
        formatted[this.dateOrderIndeces.y] = matches[1];
        return formatted.join(' ');
    }
    // on manual user entry, set the value that will be sent with the form field
    setValue(inputValue) {
        const matches = inputValue.match(new RegExp(this.pattern));
        // it's an invalid date, but we still need to set it
        if (!matches) {
            this.value = inputValue;
            return;
        }
        let date = createDate(matches[this.dateOrderIndeces.y + 1], matches[this.dateOrderIndeces.m + 1], matches[this.dateOrderIndeces.d + 1]);
        if (!date) {
            // last ditch attempt - see if the browser can get something
            date = new Date(inputValue);
            // it's definitely an invalid date, but set it anyway for validation messages
            if (!date) {
                this.value = inputValue;
                return;
            }
        }
        const dateStr = printISODate(date);
        this.value = dateStr;
        return dateStr;
    }
    connectedCallback() {
        console.warn('nano-date-input is deprecated and will be removed in a future version. Use nano-input with type="date" instead.');
        this.setDatePattern();
        this.handleValueChange();
    }
    componentDidLoad() {
        if (!this.pickerCloseBtn || !this.picker)
            return;
        this.pickerEle.firstFocusEle = this.pickerCloseBtn;
        this.dropdown.tetherTo = this.trigger;
        setTimeout((_) => this.handlePickerOpenChange(), 300);
    }
    render() {
        this.locale =
            navigator.languages || navigator.language || undefined;
        this.dropDownConfig.placement =
            this.dropDownConfig.placement || 'bottom-end';
        if (this.host.ownerDocument.dir === 'rtl') {
            this.dropDownConfig.placement.replace('start', 'end');
        }
        if (this.trigger)
            this.dropDownConfig.tetherTo = this.trigger;
        const valueDate = parseISODate(this.value);
        const hasHelperSlot = !!this.host.querySelector('[slot="helper"]');
        return (h(Host, { key: 'd584003b7188229e35c59048e46b0c2be1068987', class: { ...createColorClasses(this.color), 'date-input': true } }, h("div", { key: '88ef9423db0ed1e11b5ccad2c75a0c9d0f9b9d29', class: "date-field" }, h("nano-input", { key: 'a4d5c368da0bb9b296563e09760d8c450360d2d3', class: "date-field__input", slot: "trigger", required: this.required || undefined, showInlineError: this.showInlineError, validateOn: this.validateOn, placeholder: this.placeholder !== 'false' ? this.placeholder : undefined, pattern: this.pattern, label: this.label, disabled: this.disabled || undefined, color: this.color || undefined, autofocus: this.autofocus || undefined, clearable: this.clearable || undefined, onNanoChange: this.onInputChange, onNanoInput: this.onInputKey, onNanoValidate: this.onInputValidate, name: "", form: this.form || undefined, size: this.size || undefined, readonly: this.readonly, value: this.inputValue, ref: (input) => (this.input = input), floatLabel: this.floatLabel, hideLabel: this.hideLabel, inputmode: 'numeric', part: "input" }, h("slot", { key: '8852fd0a14ed85773706f6313be4af121c33f212', name: "start", slot: "start" }), h("slot", { key: 'c34815b4acd3bd9e556d908dcebb4e39a9ab1f78', name: "label", slot: "label" }), h("slot", { key: '3ba077636a9908c1ff57ca6a82824586becd8497', name: "end", slot: "end" }), this.picker && [
            h("button", { key: 'c45a42017fc0023f1f9b6c8201b209979678fd52', slot: "end", class: "date-field__open", type: "button", onKeyDown: this.onTriggerKey, onClick: this.onTriggerClick, ref: (trigger) => (this.trigger = trigger), disabled: this.disabled || this.readonly }, h("nano-icon", { key: 'ae888424999bff07e6693023e1ef38a2ae471c96', name: "light/calendar-days" })),
            h("nano-dropdown", { key: 'd82337659d8656f162e51789dcd32c102f733f77', slot: "end", onNanoHide: this.onDropdownHide, dialogTitle: "Choose a date", class: "date-field__dropdown", ref: (dropdown) => (this.dropdown = dropdown), ...this.dropDownConfig, part: "dropdown" }, h("div", { key: 'f5c9d99cd1a6725068f7f1acd27cf6e3e3717754' }, h("div", { key: 'b9e02ade28a5213382b993e57143dff2d19ececd', class: "date-field__close-bar" }, h("button", { key: 'af6aebad9c406b500d17338a0f5fb178638d3a01', class: "date-field__close", type: "button", onMouseDown: this.onCloseClick, onKeyDown: this.onCloseKeyDown, ref: (pickerClose) => (this.pickerCloseBtn = pickerClose) }, h("nano-icon", { key: '6cecd49256234320e73d732e689dd552dbf22645', name: "light/xmark" }), h("span", { key: 'fc9f86d2f3dbf06d53217ccf6556b3b119240ceb', class: "vhidden" }, "Close window"))), h("nano-date-picker", { key: 'd0a388667a9372ecfebae22d0175fe68230c11ac', isDateDisabled: this.isDateDisabled, onNanoDatePicked: this.onDatePicked, min: this.min || undefined, max: this.max || undefined, "is-modal": true, ref: (picker) => (this.pickerEle = picker), localization: this.localization, selectedDate: this.value || this.initialPickerDate, firstDayOfWeek: this.firstDayOfWeek, color: this.color || undefined, part: "date-picker" }))),
        ], (hasHelperSlot || this.helperText || this.showInlineError) && (h("span", { key: '109ec3fe3dd22087fca3240b3ad2b712b7444a3e', slot: "helper" }, h("span", { key: 'a709814dfcb66923cb512737768b4385c6a2fa85', class: { vhidden: !!this.value.length } }, h("slot", { key: '16375d1e2af0839d94b93b02117817fe54ed5887', name: "helper" })), this.helperText && !!valueDate && (h("span", { key: 'dce160d23dbf15337800f15f43380c75643f6373' }, valueDate.toLocaleDateString(this.locale, this.helperTextFormat)))))), h("input", { key: 'c50fb0b2a5104229cf44f9564a902b813e45111f', type: "hidden", value: this.value, name: this.name }))));
    }
    static get is() { return "nano-date-input"; }
    static get encapsulation() { return "scoped"; }
    static get originalStyleUrls() {
        return {
            "$": ["date-input.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["date-input.css"]
        };
    }
    static get properties() {
        return {
            "invalid": {
                "type": "boolean",
                "attribute": "invalid",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "readonly",
                            "text": undefined
                        }],
                    "text": "This will be true when the control is in an invalid state.\nValidity is determined by the `required` prop. Or if custom validity message is set."
                },
                "getter": true,
                "setter": false,
                "reflect": true,
                "defaultValue": "false"
            },
            "validityMessage": {
                "type": "string",
                "attribute": "validity-message",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "readonly",
                            "text": undefined
                        }],
                    "text": "Current validation message - if any."
                },
                "getter": true,
                "setter": false,
                "reflect": false
            },
            "helperText": {
                "type": "boolean",
                "attribute": "helper-text",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Whether to show a long form, confirmation date string of the one currently entered"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "defaultValue": "true"
            },
            "helperTextFormat": {
                "type": "unknown",
                "attribute": "helper-text-format",
                "mutable": false,
                "complexType": {
                    "original": "LocalDateOpts",
                    "resolved": "LocalDateOpts",
                    "references": {
                        "LocalDateOpts": {
                            "location": "import",
                            "path": "./date-input-interface",
                            "id": "src/components/date-input/date-input-interface.d.ts::LocalDateOpts"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Options for the date string display. Refer to https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleDateString."
                },
                "getter": false,
                "setter": false,
                "defaultValue": "{\n    year: 'numeric',\n    month: 'long',\n    day: 'numeric',\n  }"
            },
            "floatLabel": {
                "type": "boolean",
                "attribute": "float-label",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Enable floating label behaviour. Will disable placeholder if set."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "defaultValue": "false"
            },
            "name": {
                "type": "string",
                "attribute": "name",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "The name of the control, which is submitted with the form data."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "defaultValue": "this.inputId"
            },
            "readonly": {
                "type": "boolean",
                "attribute": "readonly",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "If `true`, the user cannot modify the value."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "defaultValue": "false"
            },
            "size": {
                "type": "number",
                "attribute": "size",
                "mutable": false,
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "The initial size (number of characters) of the control."
                },
                "getter": false,
                "setter": false,
                "reflect": false
            },
            "form": {
                "type": "string",
                "attribute": "form",
                "mutable": false,
                "complexType": {
                    "original": "string | null",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "The form element to associate the select with (its form owner). Must be the id of a form."
                },
                "getter": false,
                "setter": false,
                "reflect": false
            },
            "firstDayOfWeek": {
                "type": "number",
                "attribute": "first-day-of-week",
                "mutable": false,
                "complexType": {
                    "original": "DaysOfWeek",
                    "resolved": "DaysOfWeek.Friday | DaysOfWeek.Monday | DaysOfWeek.Saturday | DaysOfWeek.Sunday | DaysOfWeek.Thursday | DaysOfWeek.Tuesday | DaysOfWeek.Wednesday",
                    "references": {
                        "DaysOfWeek": {
                            "location": "import",
                            "path": "../../utils/date-utils",
                            "id": "src/utils/date-utils.ts::DaysOfWeek"
                        }
                    }
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Which day is considered first day of the week? `0` for Sunday, `1` for Monday, etc.\nDefault is Monday."
                },
                "getter": false,
                "setter": false,
                "reflect": false
            },
            "localization": {
                "type": "unknown",
                "attribute": "localization",
                "mutable": false,
                "complexType": {
                    "original": "DuetLocalizedText",
                    "resolved": "{ buttonLabel: string; placeholder: string; selectedDateMessage: string; prevMonthLabel: string; nextMonthLabel: string; monthSelectLabel: string; yearSelectLabel: string; closeLabel: string; keyboardInstruction: string; calendarHeading: string; dayNames: DayNames; monthNames: MonthsNames; monthNamesShort: MonthsNames; }",
                    "references": {
                        "DuetLocalizedText": {
                            "location": "import",
                            "path": "./date-input-interface",
                            "id": "src/components/date-input/date-input-interface.d.ts::DuetLocalizedText"
                        }
                    }
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Button labels, day names, month names, etc, used for localization.\nDefault is English."
                },
                "getter": false,
                "setter": false
            },
            "disabled": {
                "type": "boolean",
                "attribute": "disabled",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "If `true`, the user cannot interact with the input."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "defaultValue": "false"
            },
            "color": {
                "type": "string",
                "attribute": "color",
                "mutable": false,
                "complexType": {
                    "original": "Color",
                    "resolved": "\"danger\" | \"neutral\" | \"primary\" | \"success\" | \"warning\"",
                    "references": {
                        "Color": {
                            "location": "import",
                            "path": "../../types/shared",
                            "id": "src/types/shared.ts::Color"
                        }
                    }
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "The color to use from the application's color palette."
                },
                "getter": false,
                "setter": false,
                "reflect": false
            },
            "autofocus": {
                "type": "boolean",
                "attribute": "autofocus",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "This Boolean attribute lets you specify that a form control should have input focus when the page loads."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "defaultValue": "false"
            },
            "clearable": {
                "type": "boolean",
                "attribute": "clearable",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "If `true`, a clear icon will appear in the input when there is a value. Clicking it clears the input."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "defaultValue": "false"
            },
            "label": {
                "type": "string",
                "attribute": "label",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "String to place within a label element. Alternatively you may use a label slot."
                },
                "getter": false,
                "setter": false,
                "reflect": false
            },
            "placeholder": {
                "type": "string",
                "attribute": "placeholder",
                "mutable": true,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Instructional text that shows before the input has a value.\nThe pattern prop will be used to create a placeholder automatically if unused."
                },
                "getter": false,
                "setter": false,
                "reflect": false
            },
            "value": {
                "type": "string",
                "attribute": "value",
                "mutable": true,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Current value. Must be in IS0-8601 format: YYYY-MM-DD."
                },
                "getter": false,
                "setter": false,
                "reflect": true,
                "defaultValue": "''"
            },
            "validateOn": {
                "type": "string",
                "attribute": "validate-on",
                "mutable": false,
                "complexType": {
                    "original": "'dirty' | 'submit' | 'submitThenDirty'",
                    "resolved": "\"dirty\" | \"submit\" | \"submitThenDirty\"",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "When should the field perform validation"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "defaultValue": "'submitThenDirty'"
            },
            "showInlineError": {
                "type": "boolean",
                "attribute": "show-inline-error",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Whether to show validation errors underneath input"
                },
                "getter": false,
                "setter": false,
                "reflect": true,
                "defaultValue": "true"
            },
            "dateOrder": {
                "type": "string",
                "attribute": "date-order",
                "mutable": false,
                "complexType": {
                    "original": "'dmy' | 'mdy' | 'ymd' | 'dym'",
                    "resolved": "\"dmy\" | \"dym\" | \"mdy\" | \"ymd\"",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "The order of the date parts for entry and display.\ne.g. dmy = dd mm yyyy"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "defaultValue": "'dmy'"
            },
            "required": {
                "type": "boolean",
                "attribute": "required",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "If `true`, the user must fill in a value before submitting a form."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "defaultValue": "false"
            },
            "min": {
                "type": "string",
                "attribute": "min",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Minimum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD.\nThis setting can be used alone or together with the max property."
                },
                "getter": false,
                "setter": false,
                "reflect": false
            },
            "max": {
                "type": "string",
                "attribute": "max",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Maximum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD.\nThis setting can be used alone or together with the min property."
                },
                "getter": false,
                "setter": false,
                "reflect": false
            },
            "hideLabel": {
                "type": "boolean",
                "attribute": "hide-label",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Visually hide the label - but make it accessible."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "defaultValue": "false"
            },
            "picker": {
                "type": "boolean",
                "attribute": "picker",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Show a date picker. Date pickers are not very useful\nif the potential input is too far in the distance or past\ne.g. Birthdays"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "defaultValue": "true"
            },
            "initialPickerDate": {
                "type": "string",
                "attribute": "initial-picker-date",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Initial picker date. Defaults to `value` if set and today's date if not.\nMust be in IS0-8601 format: YYYY-MM-DD."
                },
                "getter": false,
                "setter": false,
                "reflect": false
            },
            "pickerOpen": {
                "type": "boolean",
                "attribute": "picker-open",
                "mutable": true,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Set / read whether the picker is currently open."
                },
                "getter": false,
                "setter": false,
                "reflect": true,
                "defaultValue": "false"
            },
            "closeAfterPicked": {
                "type": "boolean",
                "attribute": "close-after-picked",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Close the picker after a date is selected"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "defaultValue": "true"
            },
            "dropDownConfig": {
                "type": "unknown",
                "attribute": "drop-down-config",
                "mutable": false,
                "complexType": {
                    "original": "Partial<Dropdown>",
                    "resolved": "{ host?: HTMLNanoDropdownElement; autoOpen?: boolean; open?: boolean; handleOpenChange?: () => void; closeOnSelect?: boolean; containingElement?: HTMLElement; tetherTo?: HTMLElement; handleTetherToChange?: () => void; placement?: PopoverPlacement; distance?: number; skidding?: number; hoist?: boolean; handlePopoverOptionsChange?: () => void; dialogTitle?: string; nanoShow?: EventEmitter<any>; nanoAfterShow?: EventEmitter<any>; nanoHide?: EventEmitter<any>; nanoAfterHide?: EventEmitter<any>; eventType?: EventEmitter<any>; secondaryOpen?: (ev: CustomEvent<any>) => void; secondaryClose?: (ev: CustomEvent<any>) => void; handlePanelSelect?: (event: CustomEvent<any>) => void; show?: () => Promise<void>; hide?: () => Promise<void>; connectedCallback?: () => void; componentDidLoad?: () => void; disconnectedCallback?: () => void; render?: () => any; }",
                    "references": {
                        "Partial": {
                            "location": "global",
                            "id": "global::Partial"
                        },
                        "Dropdown": {
                            "location": "import",
                            "path": "../dropdown/dropdown",
                            "id": "src/components/dropdown/dropdown.tsx::Dropdown"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "nano-dropdown config options you can pass to the nested dropdown component"
                },
                "getter": true,
                "setter": true,
                "defaultValue": "{}"
            },
            "dateValue": {
                "type": "unknown",
                "attribute": "date-value",
                "mutable": false,
                "complexType": {
                    "original": "Date",
                    "resolved": "Date",
                    "references": {
                        "Date": {
                            "location": "global",
                            "id": "global::Date"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "readonly",
                            "text": "get the value as a `Date`"
                        }],
                    "text": ""
                },
                "getter": true,
                "setter": false
            },
            "isDateDisabled": {
                "type": "unknown",
                "attribute": "is-date-disabled",
                "mutable": false,
                "complexType": {
                    "original": "DateDisabledPredicate",
                    "resolved": "(date: Date) => boolean",
                    "references": {
                        "DateDisabledPredicate": {
                            "location": "import",
                            "path": "../date-picker/date-picker-interface",
                            "id": "src/components/date-picker/date-picker-interface.d.ts::DateDisabledPredicate"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "returns",
                            "text": "`false` for not disabled and `true` for disabled"
                        }],
                    "text": "Controls which days are disabled and therefore disallowed.\nFor example, this can be used to disallow selection of weekends."
                },
                "getter": false,
                "setter": false,
                "defaultValue": "() => false"
            }
        };
    }
    static get states() {
        return {
            "pattern": {},
            "inputValue": {},
            "_invalid": {}
        };
    }
    static get events() {
        return [{
                "method": "nanoChange",
                "name": "nanoChange",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "Event emitted when a date is selected."
                },
                "complexType": {
                    "original": "DateInputChangeEventDetail",
                    "resolved": "DateInputChangeEventDetail",
                    "references": {
                        "DateInputChangeEventDetail": {
                            "location": "import",
                            "path": "./date-input-interface",
                            "id": "src/components/date-input/date-input-interface.d.ts::DateInputChangeEventDetail"
                        }
                    }
                }
            }, {
                "method": "nanoValidate",
                "name": "nanoValidate",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [{
                            "name": "returns",
                            "text": "event.detail: `{ isValid: boolean, errorMessage: string, originalEvent: Event }`."
                        }],
                    "text": "Called when validation is performed (which depends on `validateOn`)."
                },
                "complexType": {
                    "original": "ControlValidityEventDetail",
                    "resolved": "ControlValidityEventDetail",
                    "references": {
                        "ControlValidityEventDetail": {
                            "location": "import",
                            "path": "../../types/shared",
                            "id": "src/types/shared.ts::ControlValidityEventDetail"
                        }
                    }
                }
            }];
    }
    static get methods() {
        return {
            "reportValidity": {
                "complexType": {
                    "signature": "(validateFirst: boolean) => Promise<ControlValidity>",
                    "parameters": [{
                            "name": "validateFirst",
                            "type": "boolean",
                            "docs": "- perform validation first before reporting"
                        }],
                    "references": {
                        "Promise": {
                            "location": "global",
                            "id": "global::Promise"
                        },
                        "ControlValidity": {
                            "location": "import",
                            "path": "../../types/shared",
                            "id": "src/types/shared.ts::ControlValidity"
                        }
                    },
                    "return": "Promise<ControlValidity>"
                },
                "docs": {
                    "text": "Get the current state of the control.",
                    "tags": [{
                            "name": "param",
                            "text": "validateFirst - perform validation first before reporting"
                        }, {
                            "name": "returns",
                            "text": "`{ isValid: boolean, errorMessage: string }`"
                        }]
                }
            },
            "setFocus": {
                "complexType": {
                    "signature": "() => Promise<void>",
                    "parameters": [],
                    "references": {
                        "Promise": {
                            "location": "global",
                            "id": "global::Promise"
                        }
                    },
                    "return": "Promise<void>"
                },
                "docs": {
                    "text": "Sets focus on the child `nano-input`.",
                    "tags": []
                }
            },
            "getInputElement": {
                "complexType": {
                    "signature": "() => Promise<HTMLTextAreaElement | HTMLInputElement>",
                    "parameters": [],
                    "references": {
                        "Promise": {
                            "location": "global",
                            "id": "global::Promise"
                        },
                        "HTMLTextAreaElement": {
                            "location": "global",
                            "id": "global::HTMLTextAreaElement"
                        },
                        "HTMLInputElement": {
                            "location": "global",
                            "id": "global::HTMLInputElement"
                        }
                    },
                    "return": "Promise<HTMLTextAreaElement | HTMLInputElement>"
                },
                "docs": {
                    "text": "Returns the native `<input>` element used under the hood.",
                    "tags": [{
                            "name": "returns",
                            "text": "`HTMLInputElement`"
                        }]
                }
            },
            "showError": {
                "complexType": {
                    "signature": "(message: string) => Promise<void>",
                    "parameters": [{
                            "name": "message",
                            "type": "string",
                            "docs": ""
                        }],
                    "references": {
                        "Promise": {
                            "location": "global",
                            "id": "global::Promise"
                        }
                    },
                    "return": "Promise<void>"
                },
                "docs": {
                    "text": "Invalidate the field and show a custom error message. To clear the error you will need to re-call this method with an empty string.",
                    "tags": []
                }
            }
        };
    }
    static get elementRef() { return "host"; }
    static get watchers() {
        return [{
                "propName": "value",
                "methodName": "handleValueChange"
            }, {
                "propName": "dateOrder",
                "methodName": "handleDateOrderChange"
            }, {
                "propName": "min",
                "methodName": "testDateValidity"
            }, {
                "propName": "max",
                "methodName": "testDateValidity"
            }, {
                "propName": "value",
                "methodName": "testDateValidity"
            }, {
                "propName": "pickerOpen",
                "methodName": "handlePickerOpenChange"
            }];
    }
}
