@six-group/ui-library 0.0.0-insider.0052ba1

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

@@ -0,0 +1,1213 @@
+import { h } from "@stencil/core";
+import { createCalendarGrid, day, formatDate, getFirstDayOfTheWeek, hours, i18nDate, isValidDate, isValidDateString, minutes, month, now, rangeAround, removeTime, seconds, toDate, year, } from "../../utils/date-util";
+import { EventListeners } from "../../utils/event-listeners";
+import { debounce, debounceEvent, DEFAULT_DEBOUNCE_FAST } from "../../utils/execution-control";
+import { hasSlot } from "../../utils/slot";
+import { SixDateFormats } from "./six-date-formats";
+import { MonthSelection } from "./components/month-selection";
+import { DaySelection } from "./components/day-selection";
+import { YearSelection } from "./components/year-selection";
+import { adjustPopupForHoisting, adjustPopupForSmallScreens, calcIsDropDownContentUp, movePopup, } from "../../utils/popup";
+const NUMBER_OF_YEARS_SHOWN = 25;
+const MIN_POPUP_HEIGHT = 400;
+var SelectionMode;
+(function (SelectionMode) {
+    SelectionMode["DAY"] = "day";
+    SelectionMode["MONTH"] = "month";
+    SelectionMode["YEAR"] = "year";
+})(SelectionMode || (SelectionMode = {}));
+/**
+ * @since 1.0
+ * @status stable
+ *
+ * @slot - Used to define a footer for the date picker.
+ * @slot error-text - Error text that is shown for validation errors. Alternatively, you can use the error-text prop.
+ */
+export class SixDatepicker {
+    constructor() {
+        this.eventListeners = new EventListeners();
+        this.pointerDate = SixDatepicker.getCurrentDateAsPointer();
+        this.selectionMode = SelectionMode.DAY;
+        this.isDropDownContentUp = false;
+        /**
+         * Set the type.
+         */
+        this.type = 'date';
+        /**
+         * The language used to render the weekdays and months.
+         */
+        this.locale = 'en';
+        /** Indicates whether or not the calendar dropdown is open on startup. You can use this in lieu of the show/hide methods. */
+        this.open = false;
+        /** Indicates whether or not the calendar should be shown as an inline (always open) component */
+        this.inline = false;
+        /**
+         * 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 date in the datepicker should be selectable.
+         * the callback function will get a datestring as an argument, e.g. '2021-07-04'
+         *
+         * Usage e.g.:
+         * const datepicker = document.getElementById('allowed-date-picker');
+         * datepicker.allowedDates = datestring => parseInt(datestring.split('-')[2], 10) % 2 === 0;
+         */
+        this.allowedDates = () => true;
+        /**
+         * Closes the datepicker dropdown after selection
+         */
+        this.closeOnSelect = this.type === 'date';
+        /** Datepicker size. */
+        this.size = 'medium';
+        /** Set to true to show an asterisk beneath the label. */
+        this.required = false;
+        /** The label text. */
+        this.label = '';
+        /** 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. Valid formats are:
+         * 'dd.mm.yyyy'
+         * 'yyyy-mm-dd'
+         * 'dd-mm-yyyy'
+         * 'dd/mm/yyyy'
+         * 'yyyy/mm/dd'
+         * 'dd.mm.yy'
+         * 'yy-mm-dd'
+         * 'dd-mm-yy'
+         * 'dd/mm/yy'
+         * 'yy/mm/dd'
+         * */
+        this.dateFormat = SixDateFormats.DDMMYYY_DOT;
+        /**
+         * 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;
+        /** Set the position of the icon */
+        this.iconPosition = 'left';
+        /**
+         * Enable this option to prevent the panel from being clipped when the component is placed inside a container with
+         * `overflow: auto|scroll`.
+         */
+        this.hoist = false;
+        this.previousUnit = () => {
+            if (this.selectionMode === SelectionMode.DAY) {
+                this.previousMonth();
+            }
+            else if (this.selectionMode === SelectionMode.MONTH) {
+                this.previousYear();
+            }
+            else if (this.selectionMode === SelectionMode.YEAR) {
+                this.previousYearGroup();
+            }
+        };
+        this.nextUnit = () => {
+            if (this.selectionMode === SelectionMode.DAY) {
+                this.nextMonth();
+            }
+            else if (this.selectionMode === SelectionMode.MONTH) {
+                this.nextYear();
+            }
+            else if (this.selectionMode === SelectionMode.YEAR) {
+                this.nextYearGroup();
+            }
+        };
+        this.handleDocumentKeyDown = (event) => {
+            var _a;
+            const keyboardEvent = event;
+            // Close when escape is pressed
+            if (this.open && keyboardEvent.key === 'Escape') {
+                keyboardEvent.stopPropagation();
+                this.closePopup();
+                void ((_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.setFocus());
+            }
+            // Handle tabbing
+            if (keyboardEvent.key === 'Tab') {
+                this.closePopup();
+            }
+        };
+        this.handleDocumentMouseDown = (event) => {
+            // Close when clicking outside the containing element
+            const path = event.composedPath();
+            if (!path.includes(this.container)) {
+                this.closePopup();
+                return;
+            }
+        };
+        this.handleClearClick = async (event) => {
+            event.stopPropagation();
+            await this.select(undefined);
+            this.sixClear.emit();
+        };
+        this.onTimepickerChange = (sixTimepickerChange) => {
+            const time = sixTimepickerChange.detail.value;
+            const newDate = new Date();
+            if (this.selectedDate != null) {
+                newDate.setFullYear(this.selectedDate.getFullYear(), this.selectedDate.getMonth(), this.selectedDate.getDate());
+            }
+            if (time != null) {
+                const hours = time.hours;
+                const minutes = time.minutes;
+                const seconds = time.seconds;
+                if (hours != null) {
+                    newDate.setHours(hours, minutes, seconds);
+                }
+            }
+            this.updateValue(newDate);
+            this.updatePointerDates();
+        };
+        this.onClickDateCell = (cell) => {
+            if (!cell.isDisabled) {
+                void this.select(cell.dateString);
+            }
+        };
+        this.onClickMonthCell = (selectedMonth) => {
+            const month = i18nDate[this.locale].monthsShort.findIndex((monthShort) => monthShort === selectedMonth);
+            this.pointerDate = Object.assign(Object.assign({}, this.pointerDate), { month });
+            this.selectionMode = SelectionMode.DAY;
+        };
+        this.onClickYearCell = (year) => {
+            this.pointerDate = Object.assign(Object.assign({}, this.pointerDate), { year });
+            this.selectionMode = SelectionMode.DAY;
+        };
+        this.handleInputChange = (event) => {
+            if (this.inputElement == null) {
+                return;
+            }
+            event.stopPropagation();
+            const inputValue = this.inputElement.value;
+            if (!isValidDateString(inputValue, this.dateFormat)) {
+                return;
+            }
+            const inputValueDate = toDate(inputValue, this.dateFormat);
+            if (inputValueDate === undefined) {
+                return;
+            }
+            this.updateIfChanged(inputValueDate);
+            const datesOnly = inputValue.replace(/[^\d]/g, '');
+            if (datesOnly.length >= 6) {
+                const date = toDate(inputValue, this.dateFormat);
+                const dateAsString = formatDate(date, this.dateFormat);
+                if (isValidDateString(dateAsString, this.dateFormat)) {
+                    this.selectedDate = toDate(dateAsString, this.dateFormat);
+                    this.updatePointerDates();
+                    this.updateValue(this.selectedDate);
+                }
+            }
+        };
+        this.handleOnBlur = (event) => {
+            var _a, _b, _c;
+            event.stopPropagation();
+            // clear the value if the user deleted the date
+            if (((_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.value) === '' && isValidDate(this.value)) {
+                this.value = undefined;
+                this.sixSelect.emit(this.value);
+            }
+            const currentDate = toDate((_b = this.inputElement) === null || _b === void 0 ? void 0 : _b.value, this.dateFormat);
+            if (isValidDate(currentDate) && ((_c = this.value) === null || _c === void 0 ? void 0 : _c.getTime()) !== (currentDate === null || currentDate === void 0 ? void 0 : currentDate.getTime())) {
+                // Set the value if the input field's value has changed. This can happen if the blur occurs
+                // before the change event had a chance to fire due to its debouncing.
+                this.value = currentDate;
+            }
+            if (this.inputElement != null) {
+                this.inputElement.value = formatDate(this.value, this.dateFormat);
+            }
+            this.sixBlur.emit(this.value);
+        };
+    }
+    debounceChanged() {
+        this.sixSelect = debounceEvent(this.sixSelect, this.debounce);
+    }
+    /**
+     * Update the native input element when the value changes
+     */
+    valueChanged() {
+        if (this.value != null && !isValidDate(this.value)) {
+            console.warn('invalid date value: ', this.value);
+            this.value = undefined;
+            this.sixSelect.emit(this.value);
+        }
+        this.selectedDate = this.value;
+        this.updatePointerDates();
+    }
+    async resizeHandler() {
+        this.updateDropdownDirection();
+        this.moveOpenHoistedPopup();
+        this.adjustPopupPosition();
+    }
+    async scrollHandler() {
+        this.updateDropdownDirection();
+        this.moveOpenHoistedPopup();
+    }
+    moveOpenHoistedPopup() {
+        movePopup(this.hoist, this.open, this.popup, this.inputElement, this.wrapper, MIN_POPUP_HEIGHT);
+    }
+    get container() {
+        return this.containingElement || this.host;
+    }
+    get firstDateOfBox() {
+        const date = new Date(this.pointerDate.year, this.pointerDate.month, 1);
+        return getFirstDayOfTheWeek(date);
+    }
+    /** Sets focus on the datepickers input. */
+    async setFocus(options) {
+        var _a;
+        (_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.setFocus(options);
+    }
+    get calendarGrid() {
+        return createCalendarGrid({
+            firstDateOfBox: this.firstDateOfBox,
+            allowedDates: this.allowedDates,
+            dateFormat: this.dateFormat,
+            locale: this.locale,
+            selectedDate: this.selectedDate,
+            minDate: this.min,
+            maxDate: this.max,
+            pointerDate: this.pointerDate,
+        });
+    }
+    updateDropdownDirection() {
+        if (this.inputElement == null || this.wrapper == null) {
+            return;
+        }
+        this.isDropDownContentUp = calcIsDropDownContentUp(this.inputElement, this.wrapper, MIN_POPUP_HEIGHT);
+    }
+    getMonthStringForIndex(index) {
+        return i18nDate[this.locale].months[index];
+    }
+    previousYear() {
+        this.pointerDate = Object.assign(Object.assign({}, this.pointerDate), { year: this.pointerDate.year - 1 });
+    }
+    previousYearGroup() {
+        this.pointerDate = Object.assign(Object.assign({}, this.pointerDate), { year: this.pointerDate.year - NUMBER_OF_YEARS_SHOWN });
+    }
+    previousMonth() {
+        if (this.pointerDate.month === 0) {
+            this.pointerDate = { year: this.pointerDate.year - 1, month: 11, day: 1, hours: 0, minutes: 0, seconds: 0 };
+        }
+        else {
+            this.pointerDate = {
+                year: this.pointerDate.year,
+                month: this.pointerDate.month - 1,
+                day: 1,
+                hours: 0,
+                minutes: 0,
+                seconds: 0,
+            };
+        }
+    }
+    nextMonth() {
+        if (this.pointerDate.month === 11) {
+            this.pointerDate = { year: this.pointerDate.year + 1, month: 0, day: 1, hours: 0, minutes: 0, seconds: 0 };
+        }
+        else {
+            this.pointerDate = {
+                year: this.pointerDate.year,
+                month: this.pointerDate.month + 1,
+                day: 1,
+                hours: 0,
+                minutes: 0,
+                seconds: 0,
+            };
+        }
+    }
+    nextYear() {
+        this.pointerDate = Object.assign(Object.assign({}, this.pointerDate), { year: this.pointerDate.year + 1 });
+    }
+    nextYearGroup() {
+        this.pointerDate = Object.assign(Object.assign({}, this.pointerDate), { year: this.pointerDate.year + NUMBER_OF_YEARS_SHOWN });
+    }
+    openCalendar() {
+        if (!this.open && !this.disabled) {
+            this.open = true;
+            this.setupEventListenersForOpenPopup();
+        }
+    }
+    setupEventListenersForOpenPopup() {
+        this.eventListeners.add(document, 'keydown', this.handleDocumentKeyDown);
+        this.eventListeners.add(document, 'mousedown', this.handleDocumentMouseDown);
+    }
+    closePopup() {
+        if (this.inline) {
+            return;
+        }
+        this.open = false;
+        this.eventListeners.remove(document, 'keydown', this.handleDocumentKeyDown);
+        this.eventListeners.remove(document, 'mousedown', this.handleDocumentMouseDown);
+        this.selectionMode = SelectionMode.DAY;
+    }
+    updatePointerDates() {
+        const date = this.getPointerDate();
+        if (this.differsFromPointerDate(date)) {
+            this.pointerDate = {
+                year: year(date),
+                month: month(date),
+                day: day(date),
+                hours: hours(date),
+                minutes: minutes(date),
+                seconds: seconds(date),
+            };
+        }
+    }
+    differsFromPointerDate(date) {
+        return (this.pointerDate.day !== day(date) ||
+            this.pointerDate.month !== month(date) ||
+            this.pointerDate.year !== year(date) ||
+            this.pointerDate.hours !== hours(date) ||
+            this.pointerDate.minutes !== minutes(date) ||
+            this.pointerDate.seconds !== seconds(date));
+    }
+    getPointerDate() {
+        if (this.selectedDate !== undefined && this.selectedDate !== null) {
+            return this.selectedDate;
+        }
+        if (this.defaultDate == null) {
+            return this.type === 'date' ? removeTime(now()) : now();
+        }
+        else {
+            return toDate(this.defaultDate, this.dateFormat);
+        }
+    }
+    updateValue(newDate) {
+        this.updateIfChanged(newDate);
+    }
+    updateIfChanged(newDate) {
+        var _a;
+        if (((_a = this.value) === null || _a === void 0 ? void 0 : _a.getTime()) === (newDate === null || newDate === void 0 ? void 0 : newDate.getTime())) {
+            return;
+        }
+        this.value = newDate;
+        this.sixSelect.emit(this.value);
+    }
+    /**
+     * Selects an option
+     */
+    async select(datestring) {
+        if (datestring == null) {
+            this.updateValue(undefined);
+        }
+        else {
+            const newDate = toDate(datestring, this.dateFormat);
+            newDate === null || newDate === void 0 ? void 0 : newDate.setHours(this.pointerDate.hours, this.pointerDate.minutes, this.pointerDate.seconds);
+            this.updateValue(newDate);
+        }
+        this.updatePointerDates();
+        if (this.closeOnSelect) {
+            this.closePopup();
+        }
+    }
+    componentWillLoad() {
+        this.selectedDate = this.value;
+        this.updatePointerDates();
+        this.updateValue(this.value);
+        if (this.inline) {
+            this.open = true;
+        }
+        if (this.open) {
+            this.setupEventListenersForOpenPopup();
+        }
+    }
+    componentDidLoad() {
+        if (this.inputElement != null) {
+            this.eventListeners.add(this.inputElement, 'six-input-input', debounce(this.handleInputChange, this.debounce));
+            this.eventListeners.add(this.inputElement, 'six-input-blur', this.handleOnBlur);
+        }
+    }
+    componentDidRender() {
+        this.adjustPopupPosition();
+    }
+    renderHeader() {
+        return (h("header", { class: "datepicker-header", part: "header" }, h("div", { class: "datepicker-header__btn prev", onClick: this.previousUnit }, h("svg", { viewBox: "0 5 13 13", width: "14", height: "23" }, h("path", { d: "M11.67 3.87L9.9 2.1 0 12l9.9 9.9 1.77-1.77L3.54 12z" }))), h("div", { class: "datepicker-header__label" }, this.selectionMode === SelectionMode.DAY && (h("div", { onClick: () => (this.selectionMode = SelectionMode.MONTH) }, h("span", { class: "datepicker-header__label-month" }, this.getMonthStringForIndex(this.pointerDate.month)), h("span", null, h("svg", { viewBox: "-3 -4 24 24", width: "20", height: "20" }, h("polyline", { points: "6 9 12 15 18 9" }))))), this.selectionMode !== SelectionMode.YEAR && (h("div", { onClick: () => (this.selectionMode = SelectionMode.YEAR) }, h("span", { class: "datepicker-header__label-year" }, this.pointerDate.year), h("span", null, h("svg", { viewBox: "-3 -4 24 24", width: "20", height: "20" }, h("polyline", { points: "6 9 12 15 18 9" }))))), this.selectionMode === SelectionMode.YEAR && (h("div", null, this.pointerDate.year - Math.floor(NUMBER_OF_YEARS_SHOWN / 2), " \u2013", ' ', this.pointerDate.year + Math.floor(NUMBER_OF_YEARS_SHOWN / 2)))), h("div", { class: "datepicker-header__btn next", onClick: this.nextUnit }, h("svg", { viewBox: "5 5 13 13", width: "14", height: "23" }, h("path", { d: "M5.88 4.12L13.76 12l-7.88 7.88L8 22l10-10L8 2z" })))));
+    }
+    renderBody() {
+        switch (this.selectionMode) {
+            case SelectionMode.DAY:
+                return (h(DaySelection, { locale: i18nDate[this.locale], calendarGrid: this.calendarGrid, onClickDateCell: this.onClickDateCell }));
+            case SelectionMode.MONTH:
+                return (h(MonthSelection, { locale: i18nDate[this.locale], selectedDate: this.selectedDate, onClickMonthCell: this.onClickMonthCell }));
+            case SelectionMode.YEAR:
+                return (h(YearSelection, { selectedDate: this.selectedDate, yearSelection: rangeAround(this.pointerDate.year, NUMBER_OF_YEARS_SHOWN), onClickYearCell: this.onClickYearCell }));
+        }
+    }
+    renderCustomIcon() {
+        const icon = hasSlot(this.host, 'custom-icon') ? (h("slot", { name: "custom-icon" })) : (h("six-icon", { size: this.size === 'large' ? 'medium' : this.size }, "today"));
+        return (h("span", { slot: "prefix", part: "icon", class: {
+                prefix: true,
+                'prefix--right': this.iconPosition === 'right',
+            } }, icon));
+    }
+    renderClearable() {
+        return (this.clearable && (h("button", { slot: "suffix", class: {
+                'datepicker-clear': true,
+                'datepicker-clear--right': this.iconPosition === 'left',
+                'datepicker-clear--left': this.iconPosition === 'right',
+            }, type: "button", onClick: this.handleClearClick, tabindex: "-1" }, h("six-icon", { size: "small" }, "clear"))));
+    }
+    render() {
+        var _a, _b, _c;
+        this.adjustPopupPosition();
+        return (h("div", { key: 'b5ba1d95babef5f6f47bd176f607756df09f293b', ref: (el) => (this.wrapper = el), class: "datepicker__container" }, h("six-input", { key: 'bbc7941bb975cb5e66eda215fea89dc3455724a3', part: "base", value: formatDate(this.value, this.dateFormat), ref: (el) => (this.inputElement = el), placeholder: this.placeholder, readonly: this.readonly, disabled: this.disabled, name: this.name, label: this.label, required: this.required, errorText: this.errorText, errorTextCount: this.errorTextCount, invalid: this.invalid, onClick: () => this.openCalendar(), size: this.size, class: { 'input--empty': this.value == null } }, this.renderCustomIcon(), this.renderClearable(), 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), this.open && (h("div", { key: 'ceaf12686b514b8708e1b254e8ed8990c519e19b', part: "popup", ref: (el) => (this.popup = el), class: {
+                datepicker__popup: true,
+                'datepicker__popup--is-up': this.placement != null ? this.placement === 'top' : this.isDropDownContentUp,
+                'datepicker__popup--is-inline': this.inline,
+            } }, this.renderHeader(), this.renderBody(), this.type === 'date-time' && (h("six-timepicker", { key: 'c978d4bf39f7b212eb6f4f37acbfc2f5533e2ebc', debounce: this.debounce, inline: true, "onSix-timepicker-change-debounced": (event) => this.onTimepickerChange(event), value: ((_a = this.selectedDate) === null || _a === void 0 ? void 0 : _a.getHours()) +
+                ':' +
+                ((_b = this.selectedDate) === null || _b === void 0 ? void 0 : _b.getMinutes()) +
+                ':' +
+                ((_c = this.selectedDate) === null || _c === void 0 ? void 0 : _c.getSeconds()) })), h("div", { key: 'ffaec9fff60951e6f8134437f31b359d93b3b91e', class: "datepicker__footer" }, h("slot", { key: '58655ebaf55d53e2524eee16e87ecf629fe9eb29' }))))));
+    }
+    adjustPopupPosition() {
+        adjustPopupForHoisting(this.hoist, this.popup, this.inputElement, this.wrapper, MIN_POPUP_HEIGHT, (isUp) => (this.isDropDownContentUp = isUp));
+        adjustPopupForSmallScreens(this.popup);
+    }
+    connectedCallback() {
+        this.eventListeners.forward('six-datepicker-select', 'change', this.host);
+        this.eventListeners.forward('six-datepicker-blur', 'blur', this.host);
+    }
+    disconnectedCallback() {
+        this.eventListeners.removeAll();
+    }
+    static getCurrentDateAsPointer() {
+        return {
+            year: year(now()),
+            month: month(now()),
+            day: day(now()),
+            hours: hours(now()),
+            minutes: minutes(now()),
+            seconds: seconds(now()),
+        };
+    }
+    static get is() { return "six-datepicker"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["six-datepicker.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["six-datepicker.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "type": {
+                "type": "string",
+                "attribute": "type",
+                "mutable": false,
+                "complexType": {
+                    "original": "'date' | 'date-time'",
+                    "resolved": "\"date\" | \"date-time\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Set the type."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "'date'"
+            },
+            "locale": {
+                "type": "string",
+                "attribute": "locale",
+                "mutable": false,
+                "complexType": {
+                    "original": "'en' | 'de' | 'fr' | 'it' | 'es'",
+                    "resolved": "\"de\" | \"en\" | \"es\" | \"fr\" | \"it\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The language used to render the weekdays and months."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "'en'"
+            },
+            "open": {
+                "type": "boolean",
+                "attribute": "open",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Indicates whether or not the calendar dropdown is open on startup. You can use this in lieu of the show/hide methods."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "inline": {
+                "type": "boolean",
+                "attribute": "inline",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Indicates whether or not the calendar should be shown as an inline (always open) component"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "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: Date) => boolean",
+                    "resolved": "(date: Date) => boolean",
+                    "references": {
+                        "Date": {
+                            "location": "global",
+                            "id": "global::Date"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Callback to determine which date in the datepicker should be selectable.\nthe callback function will get a datestring as an argument, e.g. '2021-07-04'\n\nUsage e.g.:\nconst datepicker = document.getElementById('allowed-date-picker');\ndatepicker.allowedDates = datestring => parseInt(datestring.split('-')[2], 10) % 2 === 0;"
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "() => true"
+            },
+            "min": {
+                "type": "unknown",
+                "attribute": "min",
+                "mutable": false,
+                "complexType": {
+                    "original": "Date",
+                    "resolved": "Date | undefined",
+                    "references": {
+                        "Date": {
+                            "location": "global",
+                            "id": "global::Date"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The minimum datetime allowed. Value must be a date object"
+                },
+                "getter": false,
+                "setter": false
+            },
+            "max": {
+                "type": "unknown",
+                "attribute": "max",
+                "mutable": false,
+                "complexType": {
+                    "original": "Date",
+                    "resolved": "Date | undefined",
+                    "references": {
+                        "Date": {
+                            "location": "global",
+                            "id": "global::Date"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The maximum datetime allowed. Value must be a date object"
+                },
+                "getter": false,
+                "setter": false
+            },
+            "closeOnSelect": {
+                "type": "boolean",
+                "attribute": "close-on-select",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Closes the datepicker dropdown after selection"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "this.type === 'date'"
+            },
+            "placement": {
+                "type": "string",
+                "attribute": "placement",
+                "mutable": false,
+                "complexType": {
+                    "original": "'top' | 'bottom'",
+                    "resolved": "\"bottom\" | \"top\" | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The enforced placement of the dropdown panel."
+                },
+                "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": "Datepicker size."
+                },
+                "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"
+            },
+            "defaultDate": {
+                "type": "string",
+                "attribute": "default-date",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The date to defines where the datepicker popup starts. The prop accepts ISO 8601 date strings (YYYY-MM-DD)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": 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": "unknown",
+                "attribute": "value",
+                "mutable": true,
+                "complexType": {
+                    "original": "Date",
+                    "resolved": "Date | undefined",
+                    "references": {
+                        "Date": {
+                            "location": "global",
+                            "id": "global::Date"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The value of the form field, which accepts a date object."
+                },
+                "getter": false,
+                "setter": false
+            },
+            "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": "''"
+            },
+            "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"
+            },
+            "containingElement": {
+                "type": "unknown",
+                "attribute": "containing-element",
+                "mutable": false,
+                "complexType": {
+                    "original": "HTMLElement",
+                    "resolved": "HTMLElement | undefined",
+                    "references": {
+                        "HTMLElement": {
+                            "location": "global",
+                            "id": "global::HTMLElement"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The dropdown will close when the user interacts outside of this element (e.g. clicking)."
+                },
+                "getter": false,
+                "setter": false
+            },
+            "dateFormat": {
+                "type": "string",
+                "attribute": "date-format",
+                "mutable": false,
+                "complexType": {
+                    "original": "SixDateFormats",
+                    "resolved": "SixDateFormats.DDMMYYYY_DASH | SixDateFormats.DDMMYYYY_DASH_TIME | SixDateFormats.DDMMYYYY_SLASH | SixDateFormats.DDMMYYYY_SLASH_TIME | SixDateFormats.DDMMYYY_DOT | SixDateFormats.DDMMYYY_DOT_TIME | SixDateFormats.DDMMYY_DASH | SixDateFormats.DDMMYY_DASH_TIME | SixDateFormats.DDMMYY_DOT | SixDateFormats.DDMMYY_DOT_TIME | SixDateFormats.DDMMYY_SLASH | SixDateFormats.DDMMYY_SLASH_TIME | SixDateFormats.YYMMDD_DASH | SixDateFormats.YYMMDD_DASH_TIME | SixDateFormats.YYMMDD_SLASH | SixDateFormats.YYMMDD_SLASH_TIME | SixDateFormats.YYYYMMDD_DASH | SixDateFormats.YYYYMMDD_DASH_TIME | SixDateFormats.YYYYMMDD_SLASH | SixDateFormats.YYYYMMDD_SLASH_TIME",
+                    "references": {
+                        "SixDateFormats": {
+                            "location": "import",
+                            "path": "./six-date-formats",
+                            "id": "src/components/six-datepicker/six-date-formats.tsx::SixDateFormats"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Define the dateFormat. Valid formats are:\n'dd.mm.yyyy'\n'yyyy-mm-dd'\n'dd-mm-yyyy'\n'dd/mm/yyyy'\n'yyyy/mm/dd'\n'dd.mm.yy'\n'yy-mm-dd'\n'dd-mm-yy'\n'dd/mm/yy'\n'yy/mm/dd'"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "SixDateFormats.DDMMYYY_DOT"
+            },
+            "debounce": {
+                "type": "number",
+                "attribute": "debounce",
+                "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,
+                "reflect": false,
+                "defaultValue": "DEFAULT_DEBOUNCE_FAST"
+            },
+            "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"
+            },
+            "iconPosition": {
+                "type": "string",
+                "attribute": "icon-position",
+                "mutable": false,
+                "complexType": {
+                    "original": "'left' | 'right'",
+                    "resolved": "\"left\" | \"right\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Set the position of the icon"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "'left'"
+            },
+            "hoist": {
+                "type": "boolean",
+                "attribute": "hoist",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Enable this option to prevent the panel from being clipped when the component is placed inside a container with\n`overflow: auto|scroll`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "pointerDate": {},
+            "selectionMode": {},
+            "isDropDownContentUp": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "sixSelect",
+                "name": "six-datepicker-select",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when a option got selected."
+                },
+                "complexType": {
+                    "original": "SixDatepickerSelectPayload",
+                    "resolved": "Date | null | undefined",
+                    "references": {
+                        "SixDatepickerSelectPayload": {
+                            "location": "local",
+                            "path": "/home/runner/work/six-webcomponents/six-webcomponents/libraries/ui-library/src/components/six-datepicker/six-datepicker.tsx",
+                            "id": "src/components/six-datepicker/six-datepicker.tsx::SixDatepickerSelectPayload"
+                        }
+                    }
+                }
+            }, {
+                "method": "sixClear",
+                "name": "six-datepicker-clear",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the clear button is activated."
+                },
+                "complexType": {
+                    "original": "EmptyPayload",
+                    "resolved": "undefined",
+                    "references": {
+                        "EmptyPayload": {
+                            "location": "import",
+                            "path": "../../utils/types",
+                            "id": "src/utils/types.ts::EmptyPayload"
+                        }
+                    }
+                }
+            }, {
+                "method": "sixBlur",
+                "name": "six-datepicker-blur",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when a option got selected."
+                },
+                "complexType": {
+                    "original": "SixDatepickerSelectPayload",
+                    "resolved": "Date | null | undefined",
+                    "references": {
+                        "SixDatepickerSelectPayload": {
+                            "location": "local",
+                            "path": "/home/runner/work/six-webcomponents/six-webcomponents/libraries/ui-library/src/components/six-datepicker/six-datepicker.tsx",
+                            "id": "src/components/six-datepicker/six-datepicker.tsx::SixDatepickerSelectPayload"
+                        }
+                    }
+                }
+            }];
+    }
+    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 datepickers input.",
+                    "tags": []
+                }
+            },
+            "select": {
+                "complexType": {
+                    "signature": "(datestring?: string) => Promise<void>",
+                    "parameters": [{
+                            "name": "datestring",
+                            "type": "string | undefined",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Selects an option",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "host"; }
+    static get watchers() {
+        return [{
+                "propName": "debounce",
+                "methodName": "debounceChanged"
+            }, {
+                "propName": "value",
+                "methodName": "valueChanged"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "resize",
+                "method": "resizeHandler",
+                "target": "window",
+                "capture": false,
+                "passive": true
+            }, {
+                "name": "scroll",
+                "method": "scrollHandler",
+                "target": "window",
+                "capture": false,
+                "passive": true
+            }];
+    }
+}
+//# sourceMappingURL=six-datepicker.js.map