@six-group/ui-library 0.0.0-insider.e8b5a11 → 0.0.0-insider.eb446eb

package/dist/collection/components/six-date/six-date.js

@@ -0,0 +1,735 @@
+import { h } from "@stencil/core";
+import { EventListeners } from "../../utils/event-listeners";
+import { hasSlot } from "../../utils/slot";
+import { MonthSelection } from "./components/month-selection";
+import { YearSelection } from "./components/year-selection";
+import { DaySelection } from "./components/day-selection";
+import { cleanupValue, formatDate, fromFormattedString, todayAsPointerDate, toPointerDate } from "./iso-date";
+import { createCalendarGrid } from "./calendar-grid";
+import { translateFormatHelp, translateMonth } from "./translations";
+import Popover from "../../utils/popover";
+const NUMBER_OF_YEARS_SHOWN = 25;
+/**
+ * A date picker component that allows users to select dates via a calendar popup or direct input.
+ *
+ * @since 5.0
+ * @status beta
+ *
+ * @slot label - The date's label. Alternatively, you can use the label prop.
+ * @slot help-text - Help text that describes the usage.
+ * @slot error-text - Error text that is shown for validation errors. Alternatively, you can use the error-text property.
+ */
+export class SixDate {
+    constructor() {
+        this.eventListeners = new EventListeners();
+        /**
+         * Current state of the date picker for day, month, or year selection.
+         * Independent of the currently selected date value.
+         */
+        this.pointerDate = todayAsPointerDate();
+        this.selectionMode = 'day';
+        /**
+         * The language used to render the weekdays and months.
+         */
+        this.language = 'en';
+        /**
+         * If `true` the user can only select a date via the component in the popup but not directly edit the input field.
+         */
+        this.readonly = false;
+        /**
+         * If `true` the component is disabled.
+         */
+        this.disabled = false;
+        /**
+         * Callback to determine which dates in the picker should be selectable.
+         */
+        this.allowedDates = () => true;
+        /**
+         * The size of the date input field.
+         */
+        this.size = 'medium';
+        /** Set to true to show an asterisk beneath the label. */
+        this.required = false;
+        /**
+         * The value of the form field in ISO 8601 date format (yyyy-MM-dd).
+         * Example: '2024-01-01'.
+         *
+         * When an invalid date is provided, it will be replaced with an empty string (''),
+         * matching the behavior of native HTML <input type="date">.
+         *
+         * The displayed format can be customized using the dateFormat property, but the underlying
+         * value will always be stored in ISO format.
+         */
+        this.value = '';
+        /** Defines the format pattern for displaying dates and how dates can be entered via keyboard.
+         *
+         * The parser accepts flexible input that doesn't strictly match the format pattern.
+         * Input with missing leading zeros or incomplete years will be automatically normalized.
+         * For example, with the pattern "dd.MM.yyyy": "1.1.2025" becomes "01.01.2025" and
+         * "1.1.225" becomes "01.01.0225".
+         *
+         * Defaults to "dd.MM.yyyy".
+         *
+         * Available patterns:
+         * - Year: "yyyy" (e.g., "2021")
+         * - Month: "MM" (e.g., "01" for January) or "M" (e.g., "1" for January)
+         * - Day: "dd" (e.g., "08" for the 8th) or "d" (e.g., "8" for the 8th)
+         *
+         * Examples:
+         * - "dd.MM.yyyy" -> "31.01.2024"
+         * - "yyyy-MM-dd" -> "2024-01-31"
+         * - "d.M.yyyy" -> "31.1.2024"
+         * */
+        this.dateFormat = 'dd.MM.yyyy';
+        /** The label text. */
+        this.label = '';
+        /** The input's help text. Alternatively, you can use the help-text slot. */
+        this.helpText = '';
+        /** The error message shown, if `invalid` is set to true.  */
+        this.errorText = '';
+        /** If this property is set to true and an error message is provided by `errorText`, the error message is displayed.  */
+        this.invalid = false;
+        /** The input's name attribute. */
+        this.name = '';
+        /** Set to true to add a clear button when the input is populated. */
+        this.clearable = false;
+        this.panelHideInProgress = false;
+        this.handlePreviousClick = () => {
+            switch (this.selectionMode) {
+                case 'day':
+                    if (this.pointerDate.month === 0) {
+                        this.pointerDate = { year: this.pointerDate.year - 1, month: 11, day: 1 };
+                    }
+                    else {
+                        this.pointerDate = { year: this.pointerDate.year, month: this.pointerDate.month - 1, day: 1 };
+                    }
+                    break;
+                case 'month':
+                    this.pointerDate = Object.assign(Object.assign({}, this.pointerDate), { year: this.pointerDate.year - 1 });
+                    break;
+                case 'year':
+                    this.pointerDate = Object.assign(Object.assign({}, this.pointerDate), { year: this.pointerDate.year - NUMBER_OF_YEARS_SHOWN });
+                    break;
+            }
+        };
+        this.handleNextClick = () => {
+            if (this.selectionMode === 'day') {
+                if (this.pointerDate.month === 11) {
+                    this.pointerDate = { year: this.pointerDate.year + 1, month: 0, day: 1 };
+                }
+                else {
+                    this.pointerDate = { year: this.pointerDate.year, month: this.pointerDate.month + 1, day: 1 };
+                }
+            }
+            else if (this.selectionMode === 'month') {
+                this.pointerDate = Object.assign(Object.assign({}, this.pointerDate), { year: this.pointerDate.year + 1 });
+            }
+            else if (this.selectionMode === 'year') {
+                this.pointerDate = Object.assign(Object.assign({}, this.pointerDate), { year: this.pointerDate.year + NUMBER_OF_YEARS_SHOWN });
+            }
+        };
+        this.handleDocumentMouseDown = (event) => {
+            const baseElement = this.getSixInputBaseElement();
+            if (baseElement == null || this.panel == null)
+                return;
+            // Close when clicking outside
+            const path = event.composedPath();
+            if (!path.includes(this.panel) && !path.includes(baseElement)) {
+                this.hide();
+                this.sixBlur.emit();
+            }
+        };
+        this.handleDayClick = (date) => {
+            var _a;
+            this.value = date;
+            this.pointerDate = toPointerDate(this.value);
+            this.hide();
+            (_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.setFocus();
+            this.sixChange.emit(this.value);
+        };
+        this.handleMonthClicked = (month) => {
+            this.pointerDate = Object.assign(Object.assign({}, this.pointerDate), { month });
+            this.selectionMode = 'day';
+        };
+        this.handleYearClicked = (year) => {
+            this.pointerDate = Object.assign(Object.assign({}, this.pointerDate), { year });
+            this.selectionMode = 'day';
+        };
+        this.handleInputChange = (event) => {
+            if (this.inputElement == null)
+                return;
+            event.stopPropagation();
+            const isoDate = fromFormattedString(this.inputElement.value, this.dateFormat);
+            if (isoDate != null) {
+                this.value = isoDate;
+                this.pointerDate = toPointerDate(this.value);
+            }
+            else if (this.inputElement.value === '') {
+                this.value = '';
+                this.pointerDate = todayAsPointerDate();
+                this.selectionMode = 'day';
+            }
+            this.sixChange.emit(this.value);
+        };
+        this.handleInputBlur = () => {
+            var _a;
+            if (((_a = this.popoverHelper) === null || _a === void 0 ? void 0 : _a.isVisible) === false) {
+                this.updateInputElementValue();
+            }
+        };
+        this.handleInputClearClick = () => {
+            this.hide();
+            this.value = '';
+            this.pointerDate = todayAsPointerDate();
+            this.sixChange.emit(this.value);
+        };
+        this.handleInputKeyDown = (event) => {
+            if (event.key === 'Tab') {
+                this.hide();
+                this.sixBlur.emit();
+            }
+            if (event.key === 'Escape') {
+                this.hide();
+            }
+        };
+    }
+    valueChanged() {
+        this.updateValueAndPointerDate();
+    }
+    /** Sets focus on the input. */
+    async setFocus(options) {
+        var _a;
+        (_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.setFocus(options);
+    }
+    updateValueAndPointerDate() {
+        const { value, pointerDate, warning } = cleanupValue(this.value);
+        this.value = value;
+        this.pointerDate = pointerDate;
+        if (warning != null) {
+            console.warn(warning);
+        }
+    }
+    getSixInputBaseElement() {
+        var _a, _b;
+        return (_b = (_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('div.input');
+    }
+    show() {
+        var _a, _b;
+        if (((_a = this.popoverHelper) === null || _a === void 0 ? void 0 : _a.isVisible) === true || this.panelHideInProgress || this.disabled)
+            return;
+        (_b = this.popoverHelper) === null || _b === void 0 ? void 0 : _b.show();
+        this.eventListeners.add(document, 'mousedown', this.handleDocumentMouseDown);
+    }
+    hide() {
+        var _a, _b;
+        if (((_a = this.popoverHelper) === null || _a === void 0 ? void 0 : _a.isVisible) === false)
+            return;
+        this.updateInputElementValue();
+        this.selectionMode = 'day';
+        this.eventListeners.remove(document, 'mousedown', this.handleDocumentMouseDown);
+        this.panelHideInProgress = true;
+        (_b = this.popoverHelper) === null || _b === void 0 ? void 0 : _b.hide();
+    }
+    initPopover() {
+        const sixInputBaseElement = this.getSixInputBaseElement();
+        if (this.inputElement == null || this.positioner == null || this.panel == null || sixInputBaseElement == null) {
+            return;
+        }
+        this.eventListeners.add(sixInputBaseElement, 'click', () => this.show());
+        this.popoverHelper = new Popover(sixInputBaseElement, this.positioner, {
+            strategy: 'fixed',
+            placement: 'bottom-start',
+            transitionElement: this.panel,
+            distance: 4,
+            skidding: 0,
+            onAfterHide: () => {
+                this.panelHideInProgress = false;
+            },
+        });
+    }
+    updateInputElementValue() {
+        if (this.inputElement) {
+            this.inputElement.value = this.value === '' ? '' : formatDate(this.value, this.dateFormat);
+        }
+    }
+    connectedCallback() {
+        this.initPopover();
+        this.updateValueAndPointerDate();
+        this.eventListeners.forward('six-change', 'change', this.host);
+        this.eventListeners.forward('six-blur', 'blur', this.host);
+    }
+    componentDidLoad() {
+        this.updateInputElementValue();
+        this.initPopover();
+    }
+    disconnectedCallback() {
+        var _a;
+        this.eventListeners.removeAll();
+        (_a = this.popoverHelper) === null || _a === void 0 ? void 0 : _a.destroy();
+        this.popoverHelper = undefined;
+    }
+    render() {
+        return (h("div", { key: '2fccfb9c005bf6ac4906be3735c3b0fc61bfad8f', class: "container" }, h("six-input", { key: '453bf29f4aec7bc192d1bc5191c7f74a93f0ac48', ref: (el) => (this.inputElement = el), placeholder: this.placeholder == null ? this.dateFormat : this.placeholder, readonly: this.readonly, disabled: this.disabled, name: this.name, label: this.label, required: this.required, helpText: this.helpText, errorText: this.errorText, errorTextCount: this.errorTextCount, invalid: this.invalid, onKeyDown: this.handleInputKeyDown, onInput: this.handleInputChange, onBlur: this.handleInputBlur, "onSix-input-clear": this.handleInputClearClick, size: this.size, clearable: this.clearable, "aria-describedby": "date-format" }, h("six-icon", { key: '93e4add573a5617e9f90e9e8060a9a3a6ec10b98', slot: "prefix", size: this.size === 'large' ? 'medium' : this.size }, "today"), hasSlot(this.host, 'label') ? (h("span", { slot: "label" }, h("slot", { name: "label" }))) : null, hasSlot(this.host, 'error-text') ? (h("span", { slot: "error-text" }, h("slot", { name: "error-text" }))) : null, hasSlot(this.host, 'help-text') ? (h("span", { slot: "help-text" }, h("slot", { name: "help-text" }))) : null), h("span", { key: '5fb919b6861ed8307de1105c881350d4094bbf52', id: "date-format", class: "sr-only" }, translateFormatHelp(this.language, this.dateFormat)), h("div", { key: 'ccddb6c5b5c49f77d31d2d0c75742cc0ffbda2ee', ref: (el) => (this.positioner = el), class: "positioner" }, h("div", { key: '3eec69b5bac555fd542cab3a967700403af68750', class: "panel", ref: (el) => (this.panel = el) }, h("header", { key: 'a16e0c72e430580b0f0c229476b7c45ea50e194a', class: "panel__header" }, h("six-icon-button", { key: 'bfc02505301c5264de2934f3f4f3fcea52cacf07', tabindex: "-1", class: "previous", onClick: this.handlePreviousClick, name: "arrow_back_ios" }), this.selectionMode === 'day' && (h("div", { key: '2f64e3cc6f2ee9326c953f81b1ea6a3f5ab13551', class: "selector", onClick: () => (this.selectionMode = 'month') }, translateMonth(this.pointerDate.month, this.language), h("six-icon", { key: '9372e403d994348716322f39d7e30971c3d37842' }, "arrow_drop_down"))), this.selectionMode !== 'year' && (h("div", { key: '16a3de3dd5207eeb91d341a02b93b11e707f3372', class: "selector", onClick: () => (this.selectionMode = 'year') }, this.pointerDate.year, h("six-icon", { key: '81024acff597b548875a7500cbb5aab7ba47952e' }, "arrow_drop_down"))), this.selectionMode === 'year' && (h("div", { key: 'f8615b0ca8ce732a18776e3677a997fd43d9fac4', class: "selector" }, this.pointerDate.year - Math.floor(NUMBER_OF_YEARS_SHOWN / 2), " \u2013", ' ', this.pointerDate.year + Math.floor(NUMBER_OF_YEARS_SHOWN / 2))), h("six-icon-button", { key: '0e689a5621ae8a62415c4a19efb64a983b720115', tabindex: "-1", class: "next", onClick: this.handleNextClick, name: "arrow_forward_ios" })), this.selectionMode === 'day' && (h(DaySelection, { key: '6fe9920a9449418460e069eefa96adda867c2eb3', language: this.language, calendarGrid: createCalendarGrid({
+                year: this.pointerDate.year,
+                month: this.pointerDate.month,
+                selected: this.value || undefined,
+                minDate: this.min,
+                maxDate: this.max,
+                dateFormat: this.dateFormat,
+                allowedDates: this.allowedDates,
+            }), dayClicked: this.handleDayClick })), this.selectionMode === 'month' && (h(MonthSelection, { key: 'ad02bb9d8b6c96abf77ccd30585490b2236fbfd0', language: this.language, selected: this.value, monthClicked: this.handleMonthClicked })), this.selectionMode === 'year' && (h(YearSelection, { key: 'a14118d8b9ec16182522d1de6dc12d9026ef3aa3', selected: this.value, pointerYear: this.pointerDate.year, yearCount: NUMBER_OF_YEARS_SHOWN, yearClicked: this.handleYearClicked }))))));
+    }
+    static get is() { return "six-date"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["six-date.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["six-date.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "language": {
+                "type": "string",
+                "attribute": "language",
+                "mutable": false,
+                "complexType": {
+                    "original": "Language",
+                    "resolved": "\"de\" | \"en\" | \"es\" | \"fr\" | \"it\"",
+                    "references": {
+                        "Language": {
+                            "location": "import",
+                            "path": "../../utils/error-messages",
+                            "id": "src/utils/error-messages.ts::Language"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The language used to render the weekdays and months."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "'en'"
+            },
+            "readonly": {
+                "type": "boolean",
+                "attribute": "readonly",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If `true` the user can only select a date via the component in the popup but not directly edit the input field."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "disabled": {
+                "type": "boolean",
+                "attribute": "disabled",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If `true` the component is disabled."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "allowedDates": {
+                "type": "unknown",
+                "attribute": "allowed-dates",
+                "mutable": false,
+                "complexType": {
+                    "original": "(date: string) => boolean",
+                    "resolved": "(date: string) => boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Callback to determine which dates in the picker should be selectable."
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "() => true"
+            },
+            "min": {
+                "type": "string",
+                "attribute": "min",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The minimum allowed selectable date in ISO format (yyyy-MM-dd).\nDates before this value will be disabled in the date picker.\nExample: '2024-01-01'"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "max": {
+                "type": "string",
+                "attribute": "max",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The maximum allowed selectable date in ISO format (yyyy-MM-dd).\nDates after this value will be disabled in the date picker.\nExample: '2025-01-01'"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "size": {
+                "type": "string",
+                "attribute": "size",
+                "mutable": false,
+                "complexType": {
+                    "original": "'small' | 'medium' | 'large'",
+                    "resolved": "\"large\" | \"medium\" | \"small\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The size of the date input field."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "'medium'"
+            },
+            "required": {
+                "type": "boolean",
+                "attribute": "required",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Set to true to show an asterisk beneath the label."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "placeholder": {
+                "type": "string",
+                "attribute": "placeholder",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The placeholder defines what text to be shown on the input element"
+                },
+                "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": "The value of the form field in ISO 8601 date format (yyyy-MM-dd).\nExample: '2024-01-01'.\n\nWhen an invalid date is provided, it will be replaced with an empty string (''),\nmatching the behavior of native HTML <input type=\"date\">.\n\nThe displayed format can be customized using the dateFormat property, but the underlying\nvalue will always be stored in ISO format."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "dateFormat": {
+                "type": "string",
+                "attribute": "date-format",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Defines the format pattern for displaying dates and how dates can be entered via keyboard.\n\nThe parser accepts flexible input that doesn't strictly match the format pattern.\nInput with missing leading zeros or incomplete years will be automatically normalized.\nFor example, with the pattern \"dd.MM.yyyy\": \"1.1.2025\" becomes \"01.01.2025\" and\n\"1.1.225\" becomes \"01.01.0225\".\n\nDefaults to \"dd.MM.yyyy\".\n\nAvailable patterns:\n- Year: \"yyyy\" (e.g., \"2021\")\n- Month: \"MM\" (e.g., \"01\" for January) or \"M\" (e.g., \"1\" for January)\n- Day: \"dd\" (e.g., \"08\" for the 8th) or \"d\" (e.g., \"8\" for the 8th)\n\nExamples:\n- \"dd.MM.yyyy\" -> \"31.01.2024\"\n- \"yyyy-MM-dd\" -> \"2024-01-31\"\n- \"d.M.yyyy\" -> \"31.1.2024\""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "'dd.MM.yyyy'"
+            },
+            "label": {
+                "type": "string",
+                "attribute": "label",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The label text."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "helpText": {
+                "type": "string",
+                "attribute": "help-text",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The input's help text. Alternatively, you can use the help-text slot."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "errorText": {
+                "type": "string",
+                "attribute": "error-text",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | string[]",
+                    "resolved": "string | string[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The error message shown, if `invalid` is set to true."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "errorTextCount": {
+                "type": "number",
+                "attribute": "error-text-count",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The number of error texts to be shown (if the error-text slot isn't used). Defaults to 1"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "invalid": {
+                "type": "boolean",
+                "attribute": "invalid",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If this property is set to true and an error message is provided by `errorText`, the error message is displayed."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "name": {
+                "type": "string",
+                "attribute": "name",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The input's name attribute."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "defaultValue": "''"
+            },
+            "clearable": {
+                "type": "boolean",
+                "attribute": "clearable",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Set to true to add a clear button when the input is populated."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "pointerDate": {},
+            "selectionMode": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "sixChange",
+                "name": "six-change",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the control's value changes.\nEvent detail contains the new date value in ISO format (yyyy-MM-dd) or an empty string if cleared."
+                },
+                "complexType": {
+                    "original": "string | ''",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }, {
+                "method": "sixBlur",
+                "name": "six-blur",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the control loses focus or the date picker popup is closed.\nDoes not contain event details."
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "setFocus": {
+                "complexType": {
+                    "signature": "(options?: FocusOptions) => Promise<void>",
+                    "parameters": [{
+                            "name": "options",
+                            "type": "FocusOptions | undefined",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "FocusOptions": {
+                            "location": "global",
+                            "id": "global::FocusOptions"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Sets focus on the input.",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "host"; }
+    static get watchers() {
+        return [{
+                "propName": "value",
+                "methodName": "valueChanged"
+            }];
+    }
+}
+//# sourceMappingURL=six-date.js.map