@six-group/ui-library 0.0.0-insider.d833923 → 0.0.0-insider.d89f9dc

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

@@ -0,0 +1,752 @@
+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;
+/**
+ * A date picker component that allows users to select dates via a calendar popup or direct input.
+ *
+ * @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;
+        /**
+         * 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.
+         *
+         * 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;
+        /**
+         * Set the amount of time, in milliseconds, to wait to trigger the `six-change` 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('six-change', 'change', this.host);
+        this.eventListeners.forward('six-blur', '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: '7df1efadccea9e30f96be4edeeae124649fb119e', class: "container" }, h("six-input", { key: 'e76e46d4eade078d2395e39a112426824f6e6ed9', 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: '96e71e847d2696297b13f3fbf332faaa3a05b626', 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: 'f065385a9f382c847713aeb0162a7429c1303f66', id: "date-format", class: "sr-only" }, translateFormatHelp(this.language, this.dateFormat)), h("div", { key: 'd0ed8f5babfda44168d349a1340ac4e5f7993e23', ref: (el) => (this.positioner = el), class: "positioner" }, h("div", { key: '27250b4ed9b8fbeacf4104380a3f75b1b395d26c', class: "panel", ref: (el) => (this.panel = el) }, h("header", { key: '5d70aeb04a68fa320cd51d5219bd9d8499bc8099', class: "panel__header" }, h("six-icon-button", { key: '7eb4a255ecb028e2d3f254b3ffc0886995698af7', tabindex: "-1", class: "previous", onClick: this.handlePreviousClick, name: "arrow_back_ios" }), this.selectionMode === 'day' && (h("div", { key: '42e9e6ffbb7ded041cc766a4ecafd9350b1beec1', class: "selector", onClick: () => (this.selectionMode = 'month') }, translateMonth(this.pointerDate.month, this.language), h("six-icon", { key: '72ab31ef4d76739a955253ce718705c171aeffc4' }, "arrow_drop_down"))), this.selectionMode !== 'year' && (h("div", { key: '760255898924358aa99856d211c218aa3ab3bf92', class: "selector", onClick: () => (this.selectionMode = 'year') }, this.pointerDate.year, h("six-icon", { key: 'dbd9d1f346c56e2df6162edaa53a458afe9883db' }, "arrow_drop_down"))), this.selectionMode === 'year' && (h("div", { key: 'd04218a353e377b276388708c86694bca2c97228', 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: '5a924541cc2f89a2bb76113757c00211c86b3adf', tabindex: "-1", class: "next", onClick: this.handleNextClick, name: "arrow_forward_ios" })), this.selectionMode === 'day' && (h(DaySelection, { key: 'd1e853fd6fcd9d8c74b4d5f8072f998ba081a8c4', 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: '9804ad6d7222024095e7c2d83357506c61d68cfa', language: this.language, selected: this.value, monthClicked: this.handleMonthClicked })), this.selectionMode === 'year' && (h(YearSelection, { key: 'd6f67dacd54f4ca384f7a4a328c4a87b0d95878a', 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: 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",
+                "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,
+                "attribute": "min",
+                "reflect": false
+            },
+            "max": {
+                "type": "string",
+                "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,
+                "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": "The size of the date input field."
+                },
+                "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": "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,
+                "attribute": "value",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "dateFormat": {
+                "type": "string",
+                "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\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,
+                "attribute": "date-format",
+                "reflect": false,
+                "defaultValue": "'dd.MM.yyyy'"
+            },
+            "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"
+            },
+            "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 `six-change` 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": "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