@six-group/ui-library 0.0.0-insider.777a428 → 0.0.0-insider.77a508a

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

@@ -0,0 +1,764 @@
+import { h } from "@stencil/core";
+import { EventListeners } from "../../utils/event-listeners";
+import { debounce, DEFAULT_DEBOUNCE_FAST } from "../../utils/execution-control";
+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;
+/**
+ * @since 5.0
+ * @status experimental
+ *
+ * @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;
+        /** Dates size. */
+        this.size = 'medium';
+        /** Set to true to show an asterisk beneath the label. */
+        this.required = false;
+        /**
+         * The value of the form field, which accepts a date object.
+         */
+        this.value = '';
+        /** 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;
+        /** Define the dateFormat. Defaults to "dd.MM.yyyy".
+         *
+         * Available patterns:
+         * - Year: "yyyy" (e.g., "2021")
+         * - Month: "MM" (e.g., "01" for January, "12" for December)
+         * - Day: "dd" (e.g., "08" for the 8th day of the month)
+         * */
+        this.dateFormat = 'dd.MM.yyyy';
+        /**
+         * Set the amount of time, in milliseconds, to wait to trigger the `dateChange` event after each keystroke.
+         */
+        this.debounce = DEFAULT_DEBOUNCE_FAST;
+        /** 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.handleClearClick = () => {
+            this.hide();
+            this.value = '';
+            this.pointerDate = todayAsPointerDate();
+            this.sixChange.emit(this.value);
+        };
+        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.handleOnBlur = () => {
+            var _a;
+            if (((_a = this.popoverHelper) === null || _a === void 0 ? void 0 : _a.isVisible) === false) {
+                if (this.inputElement) {
+                    this.inputElement.value = this.value === '' ? '' : formatDate(this.value, this.dateFormat);
+                }
+            }
+        };
+        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;
+        if (this.inputElement) {
+            this.inputElement.value = this.value === '' ? '' : formatDate(this.value, this.dateFormat);
+        }
+        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;
+            },
+        });
+    }
+    connectedCallback() {
+        this.initPopover();
+        this.updateValueAndPointerDate();
+        this.eventListeners.forward('sixChange', 'change', this.host);
+        this.eventListeners.forward('sixBlur', 'blur', this.host);
+    }
+    componentDidLoad() {
+        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: 'c265e5d13e1b427ae90518739b636f88d699bb26', class: "container" }, h("six-input", { key: 'f54a006c5dad56772a835fcaf50bd71af6b72012', value: this.value === '' ? '' : formatDate(this.value, this.dateFormat), 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: debounce(this.handleInputChange, this.debounce), onBlur: this.handleOnBlur, "onSix-input-clear": this.handleClearClick, size: this.size, clearable: this.clearable, "aria-describedby": "date-format" }, h("six-icon", { key: 'c439a91f415360095df11777c716458a5a33524a', 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: '429013fa5ab20bc7d43667ca6c806c6f35d36193', id: "date-format", class: "sr-only" }, translateFormatHelp(this.language, this.dateFormat)), h("div", { key: '11cb4223c0a281e81bf8ee6c6094f843e0933dd3', ref: (el) => (this.positioner = el), class: "positioner" }, h("div", { key: 'cd9e835fe163a29f768f73cdb5595112aba3acfb', class: "panel", ref: (el) => (this.panel = el) }, h("header", { key: '32638197c7fbf6c971c4cba86d6ad403d59d8568', class: "panel__header" }, h("six-icon-button", { key: '270c601321d5ab2770db5a3cc38ba5b9e1c0c9c0', tabindex: "-1", class: "previous", onClick: this.handlePreviousClick, name: "arrow_back_ios" }), this.selectionMode === 'day' && (h("div", { key: 'a1b16f14156a6f65f48a56b77dd7f452d3ed2ea5', class: "selector", onClick: () => (this.selectionMode = 'month') }, translateMonth(this.pointerDate.month, this.language), h("six-icon", { key: '0ab2dd455eeca3a7fb8ecd8af15688ec64ce3469' }, "arrow_drop_down"))), this.selectionMode !== 'year' && (h("div", { key: 'd9794772d6992d4e9b67d12443e9f10ac9d89d1d', class: "selector", onClick: () => (this.selectionMode = 'year') }, this.pointerDate.year, h("six-icon", { key: '6f70820606bc8fb7101f64ca41ca90296ba140e7' }, "arrow_drop_down"))), this.selectionMode === 'year' && (h("div", { key: 'b0847793e0ab3baf1f866d8b0f2f777560fbd539', 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: '0d47af045fa9c8590ade47c4d738410b04b7b552', tabindex: "-1", class: "next", onClick: this.handleNextClick, name: "arrow_forward_ios" })), this.selectionMode === 'day' && (h(DaySelection, { key: '28c7bad7579a206a3bdf8b0bd5325c6613634270', 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: '34f2aafe0f63276c36f867006f4f64344dd41eb8', language: this.language, selected: this.value, monthClicked: this.handleMonthClicked })), this.selectionMode === 'year' && (h(YearSelection, { key: 'b67ead6fc8fc0c50e2e505b896040c605e176155', 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",
+                "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,
+                "attribute": "language",
+                "reflect": false,
+                "defaultValue": "'en'"
+            },
+            "readonly": {
+                "type": "boolean",
+                "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,
+                "attribute": "readonly",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "disabled": {
+                "type": "boolean",
+                "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,
+                "attribute": "disabled",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "allowedDates": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "(date: IsoDate) => boolean",
+                    "resolved": "(date: `${number}${number}${number}${number}-${number}${number}-${number}${number}`) => boolean",
+                    "references": {
+                        "IsoDate": {
+                            "location": "import",
+                            "path": "./iso-date",
+                            "id": "src/components/six-date/iso-date.ts::IsoDate"
+                        }
+                    }
+                },
+                "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",
+                "mutable": false,
+                "complexType": {
+                    "original": "IsoDate",
+                    "resolved": "`${number}${number}${number}${number}-${number}${number}-${number}${number}` | undefined",
+                    "references": {
+                        "IsoDate": {
+                            "location": "import",
+                            "path": "./iso-date",
+                            "id": "src/components/six-date/iso-date.ts::IsoDate"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The minimum date allowed. Value must be an iso-date string."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "min",
+                "reflect": false
+            },
+            "max": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "IsoDate",
+                    "resolved": "`${number}${number}${number}${number}-${number}${number}-${number}${number}` | undefined",
+                    "references": {
+                        "IsoDate": {
+                            "location": "import",
+                            "path": "./iso-date",
+                            "id": "src/components/six-date/iso-date.ts::IsoDate"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The maximum date allowed.Value must be an iso-date string."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "max",
+                "reflect": false
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'small' | 'medium' | 'large'",
+                    "resolved": "\"large\" | \"medium\" | \"small\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Dates size."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "size",
+                "reflect": false,
+                "defaultValue": "'medium'"
+            },
+            "required": {
+                "type": "boolean",
+                "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,
+                "attribute": "required",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "placeholder": {
+                "type": "string",
+                "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,
+                "attribute": "placeholder",
+                "reflect": false
+            },
+            "value": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "IsoDate | ''",
+                    "resolved": "\"\" | `${number}${number}${number}${number}-${number}${number}-${number}${number}`",
+                    "references": {
+                        "IsoDate": {
+                            "location": "import",
+                            "path": "./iso-date",
+                            "id": "src/components/six-date/iso-date.ts::IsoDate"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The value of the form field, which accepts a date object."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "value",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The label text."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "label",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "helpText": {
+                "type": "string",
+                "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,
+                "attribute": "help-text",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "errorText": {
+                "type": "string",
+                "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,
+                "attribute": "error-text",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "errorTextCount": {
+                "type": "number",
+                "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,
+                "attribute": "error-text-count",
+                "reflect": false
+            },
+            "invalid": {
+                "type": "boolean",
+                "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,
+                "attribute": "invalid",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "dateFormat": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Define the dateFormat. Defaults to \"dd.MM.yyyy\".\n\nAvailable patterns:\n- Year: \"yyyy\" (e.g., \"2021\")\n- Month: \"MM\" (e.g., \"01\" for January, \"12\" for December)\n- Day: \"dd\" (e.g., \"08\" for the 8th day of the month)"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "date-format",
+                "reflect": false,
+                "defaultValue": "'dd.MM.yyyy'"
+            },
+            "debounce": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Set the amount of time, in milliseconds, to wait to trigger the `dateChange` event after each keystroke."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "debounce",
+                "reflect": false,
+                "defaultValue": "DEFAULT_DEBOUNCE_FAST"
+            },
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The input's name attribute."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "name",
+                "reflect": true,
+                "defaultValue": "''"
+            },
+            "clearable": {
+                "type": "boolean",
+                "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,
+                "attribute": "clearable",
+                "reflect": false,
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "pointerDate": {},
+            "selectionMode": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "sixChange",
+                "name": "sixChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the control's value changes."
+                },
+                "complexType": {
+                    "original": "IsoDate | ''",
+                    "resolved": "\"\" | `${number}${number}${number}${number}-${number}${number}-${number}${number}`",
+                    "references": {
+                        "IsoDate": {
+                            "location": "import",
+                            "path": "./iso-date",
+                            "id": "src/components/six-date/iso-date.ts::IsoDate"
+                        }
+                    }
+                }
+            }, {
+                "method": "sixBlur",
+                "name": "sixBlur",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the control loses focus."
+                },
+                "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