@six-group/ui-library 3.0.0-beta.1.8 → 4.0.0-beta.1

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

@@ -1,4 +1,4 @@
-import { Component, Element, Event, h, Listen, Method, Prop, State, Watch } from '@stencil/core';
+import { h } from '@stencil/core';
 import { createCalendarGrid, day, formatDate, getFirstDayOfTheWeek, hours, i18nDate, isValidDate, isValidDateString, minutes, month, now, seconds, toDate, year, } from '../../utils/date-util';
 import { EventListeners } from '../../utils/event-listeners';
 import { isNil } from '../../utils/type-check';
@@ -39,90 +39,6 @@ export class SixDatepicker {
   constructor() {
     this.eventListeners = new EventListeners();
     this.selectedDate = null;
-    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;
-    /**
-     * The minimum datetime allowed. Value must be a date object
-     */
-    this.min = null;
-    /**
-     * The maximum datetime allowed. Value must be a date object
-     */
-    this.max = null;
-    /**
-     * Closes the datepicker dropdown after selection
-     */
-    this.closeOnSelect = this.type === 'date';
-    /** Datepicker size. */
-    this.size = 'medium';
-    /**
-     * The value of the form field, which accepts a date object.
-     */
-    this.value = null;
-    /** 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;
-    /** Set to display the error text on blur and not when typing */
-    this.errorOnBlur = false;
-    /** The input's error text. Alternatively, you can use the error-text slot. */
-    this.errorText = '';
-    /** The input's label. Alternatively, you can use the label slot. */
-    this.label = '';
-    /** 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.defaultValue = null;
     this.handleDocumentKeyDown = (event) => {
       // Close when escape is pressed
@@ -214,6 +130,35 @@ export class SixDatepicker {
       }
       this.sixBlur.emit(this.value);
     };
+    this.pointerDate = SixDatepicker.getCurrentDateAsPointer();
+    this.selectionMode = SelectionMode.DAY;
+    this.isDropDownContentUp = false;
+    this.type = 'date';
+    this.locale = 'en';
+    this.open = false;
+    this.inline = false;
+    this.readonly = false;
+    this.disabled = false;
+    this.allowedDates = () => true;
+    this.min = null;
+    this.max = null;
+    this.closeOnSelect = this.type === 'date';
+    this.placement = undefined;
+    this.size = 'medium';
+    this.required = undefined;
+    this.defaultDate = undefined;
+    this.placeholder = undefined;
+    this.value = null;
+    this.containingElement = undefined;
+    this.dateFormat = SixDateFormats.DDMMYYY_DOT;
+    this.debounce = DEFAULT_DEBOUNCE_FAST;
+    this.errorOnBlur = false;
+    this.errorText = '';
+    this.label = '';
+    this.name = '';
+    this.clearable = false;
+    this.iconPosition = 'left';
+    this.hoist = false;
   }
   debounceChanged() {
     this.sixSelect = debounceEvent(this.sixSelect, this.debounce);
@@ -477,29 +422,7 @@ export class SixDatepicker {
     this.eventListeners.add(this.inputElement, 'six-input-blur', this.handleOnBlur);
   }
   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" })))));
+    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) {
@@ -523,34 +446,20 @@ export class SixDatepicker {
         '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"))));
+      }, type: "button", onClick: this.handleClearClick, tabindex: "-1" }, h("six-icon", { size: "small" }, "clear"))));
   }
   render() {
     var _a, _b, _c;
     this.adjustPopupPosition();
-    return (h("div", { ref: (el) => (this.wrapper = el), class: "datepicker__container" },
-      h("six-input", { 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, "error-text": this.errorText, "error-on-blur": this.errorOnBlur, onClick: () => this.openCalendar(), size: this.size, class: { 'input--empty': !this.value } },
-        this.renderCustomIcon(),
-        this.renderClearable(),
-        hasSlot(this.host, 'error-text') ? (h("span", { slot: "error-text" },
-          h("slot", { name: "error-text" }))) : null,
-        hasSlot(this.host, 'label') ? (h("span", { slot: "label" },
-          h("slot", { name: "label" }))) : null),
-      this.open && (h("div", { part: "popup", ref: (el) => (this.popup = el), class: {
-          datepicker__popup: true,
-          'datepicker__popup--is-up': this.placement ? this.placement === 'top' : this.isDropDownContentUp,
-          'datepicker__popup--is-inline': this.inline,
-        } },
-        this.renderHeader(),
-        this.renderBody(),
-        this.type === 'date-time' && (h("six-timepicker", { 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", { class: "datepicker__footer" },
-          h("slot", null))))));
+    return (h("div", { ref: (el) => (this.wrapper = el), class: "datepicker__container" }, h("six-input", { 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, "error-text": this.errorText, "error-on-blur": this.errorOnBlur, onClick: () => this.openCalendar(), size: this.size, class: { 'input--empty': !this.value } }, this.renderCustomIcon(), this.renderClearable(), hasSlot(this.host, 'error-text') ? (h("span", { slot: "error-text" }, h("slot", { name: "error-text" }))) : null, hasSlot(this.host, 'label') ? (h("span", { slot: "label" }, h("slot", { name: "label" }))) : null), this.open && (h("div", { part: "popup", ref: (el) => (this.popup = el), class: {
+        datepicker__popup: true,
+        'datepicker__popup--is-up': this.placement ? this.placement === 'top' : this.isDropDownContentUp,
+        'datepicker__popup--is-inline': this.inline,
+      } }, this.renderHeader(), this.renderBody(), this.type === 'date-time' && (h("six-timepicker", { 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", { class: "datepicker__footer" }, h("slot", null))))));
   }
   adjustPopupPosition() {
     this.adjustPopupForHoisting();
@@ -681,663 +590,682 @@ export class SixDatepicker {
   }
   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",
-      "mutable": false,
-      "complexType": {
-        "original": "'date' | 'date-time'",
-        "resolved": "\"date\" | \"date-time\"",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Set the type."
-      },
-      "attribute": "type",
-      "reflect": false,
-      "defaultValue": "'date'"
-    },
-    "locale": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "'en' | 'de' | 'fr' | 'it'",
-        "resolved": "\"de\" | \"en\" | \"fr\" | \"it\"",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "The language used to render the weekdays and months."
-      },
-      "attribute": "locale",
-      "reflect": false,
-      "defaultValue": "'en'"
-    },
-    "open": {
-      "type": "boolean",
-      "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."
-      },
-      "attribute": "open",
-      "reflect": true,
-      "defaultValue": "false"
-    },
-    "inline": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
+  static get originalStyleUrls() {
+    return {
+      "$": ["six-datepicker.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["six-datepicker.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "type": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'date' | 'date-time'",
+          "resolved": "\"date\" | \"date-time\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Set the type."
+        },
+        "attribute": "type",
+        "reflect": false,
+        "defaultValue": "'date'"
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Indicates whether or not the calendar should be shown as an inline (always open) component"
+      "locale": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'en' | 'de' | 'fr' | 'it'",
+          "resolved": "\"de\" | \"en\" | \"fr\" | \"it\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The language used to render the weekdays and months."
+        },
+        "attribute": "locale",
+        "reflect": false,
+        "defaultValue": "'en'"
       },
-      "attribute": "inline",
-      "reflect": true,
-      "defaultValue": "false"
-    },
-    "readonly": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
+      "open": {
+        "type": "boolean",
+        "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."
+        },
+        "attribute": "open",
+        "reflect": true,
+        "defaultValue": "false"
       },
-      "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."
+      "inline": {
+        "type": "boolean",
+        "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"
+        },
+        "attribute": "inline",
+        "reflect": true,
+        "defaultValue": "false"
       },
-      "attribute": "readonly",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "disabled": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
+      "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."
+        },
+        "attribute": "readonly",
+        "reflect": false,
+        "defaultValue": "false"
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "If `true` the component is disabled."
+      "disabled": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "If `true` the component is disabled."
+        },
+        "attribute": "disabled",
+        "reflect": false,
+        "defaultValue": "false"
       },
-      "attribute": "disabled",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "allowedDates": {
-      "type": "unknown",
-      "mutable": false,
-      "complexType": {
-        "original": "(date: Date) => boolean",
-        "resolved": "(date: Date) => boolean",
-        "references": {
-          "Date": {
-            "location": "global"
+      "allowedDates": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "(date: Date) => boolean",
+          "resolved": "(date: Date) => boolean",
+          "references": {
+            "Date": {
+              "location": "global"
+            }
           }
-        }
-      },
-      "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;"
+        },
+        "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;"
+        },
+        "defaultValue": "() => true"
       },
-      "defaultValue": "() => true"
-    },
-    "min": {
-      "type": "unknown",
-      "mutable": false,
-      "complexType": {
-        "original": "Date | null",
-        "resolved": "Date",
-        "references": {
-          "Date": {
-            "location": "global"
+      "min": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "Date | null",
+          "resolved": "Date",
+          "references": {
+            "Date": {
+              "location": "global"
+            }
           }
-        }
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "The minimum datetime allowed. Value must be a date object"
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "The minimum datetime allowed. Value must be a date object"
+        },
+        "defaultValue": "null"
       },
-      "defaultValue": "null"
-    },
-    "max": {
-      "type": "unknown",
-      "mutable": false,
-      "complexType": {
-        "original": "Date | null",
-        "resolved": "Date",
-        "references": {
-          "Date": {
-            "location": "global"
+      "max": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "Date | null",
+          "resolved": "Date",
+          "references": {
+            "Date": {
+              "location": "global"
+            }
           }
-        }
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "The maximum datetime allowed. Value must be a date object"
-      },
-      "defaultValue": "null"
-    },
-    "closeOnSelect": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Closes the datepicker dropdown after selection"
-      },
-      "attribute": "close-on-select",
-      "reflect": false,
-      "defaultValue": "this.type === 'date'"
-    },
-    "placement": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "'top' | 'bottom'",
-        "resolved": "\"bottom\" | \"top\"",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "The enforced placement of the dropdown panel."
-      },
-      "attribute": "placement",
-      "reflect": false
-    },
-    "size": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "'small' | 'medium' | 'large'",
-        "resolved": "\"large\" | \"medium\" | \"small\"",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Datepicker size."
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "The maximum datetime allowed. Value must be a date object"
+        },
+        "defaultValue": "null"
       },
-      "attribute": "size",
-      "reflect": false,
-      "defaultValue": "'medium'"
-    },
-    "required": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
+      "closeOnSelect": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Closes the datepicker dropdown after selection"
+        },
+        "attribute": "close-on-select",
+        "reflect": false,
+        "defaultValue": "this.type === 'date'"
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Set to true to make the input a required field."
+      "placement": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'top' | 'bottom'",
+          "resolved": "\"bottom\" | \"top\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The enforced placement of the dropdown panel."
+        },
+        "attribute": "placement",
+        "reflect": false
       },
-      "attribute": "required",
-      "reflect": true
-    },
-    "defaultDate": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string | null",
-        "resolved": "string",
-        "references": {}
+      "size": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'small' | 'medium' | 'large'",
+          "resolved": "\"large\" | \"medium\" | \"small\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Datepicker size."
+        },
+        "attribute": "size",
+        "reflect": false,
+        "defaultValue": "'medium'"
       },
-      "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)."
+      "required": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Set to true to make the input a required field."
+        },
+        "attribute": "required",
+        "reflect": true
       },
-      "attribute": "default-date",
-      "reflect": false
-    },
-    "placeholder": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string | null",
-        "resolved": "string",
-        "references": {}
+      "defaultDate": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string | null",
+          "resolved": "string",
+          "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)."
+        },
+        "attribute": "default-date",
+        "reflect": false
       },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "The placeholder defines what text to be shown on the input element"
+      "placeholder": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string | null",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "The placeholder defines what text to be shown on the input element"
+        },
+        "attribute": "placeholder",
+        "reflect": false
       },
-      "attribute": "placeholder",
-      "reflect": false
-    },
-    "value": {
-      "type": "unknown",
-      "mutable": true,
-      "complexType": {
-        "original": "Date | null",
-        "resolved": "Date",
-        "references": {
-          "Date": {
-            "location": "global"
+      "value": {
+        "type": "unknown",
+        "mutable": true,
+        "complexType": {
+          "original": "Date | null",
+          "resolved": "Date",
+          "references": {
+            "Date": {
+              "location": "global"
+            }
           }
-        }
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "The value of the form field, which accepts a date object."
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "The value of the form field, which accepts a date object."
+        },
+        "defaultValue": "null"
       },
-      "defaultValue": "null"
-    },
-    "containingElement": {
-      "type": "unknown",
-      "mutable": false,
-      "complexType": {
-        "original": "HTMLElement",
-        "resolved": "HTMLElement",
-        "references": {
-          "HTMLElement": {
-            "location": "global"
+      "containingElement": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "HTMLElement",
+          "resolved": "HTMLElement",
+          "references": {
+            "HTMLElement": {
+              "location": "global"
+            }
           }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The dropdown will close when the user interacts outside of this element (e.g. clicking)."
         }
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "The dropdown will close when the user interacts outside of this element (e.g. clicking)."
-      }
-    },
-    "dateFormat": {
-      "type": "string",
-      "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"
+      "dateFormat": {
+        "type": "string",
+        "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"
+            }
           }
-        }
-      },
-      "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'"
-      },
-      "attribute": "date-format",
-      "reflect": false,
-      "defaultValue": "SixDateFormats.DDMMYYY_DOT"
-    },
-    "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."
-      },
-      "attribute": "debounce",
-      "reflect": false,
-      "defaultValue": "DEFAULT_DEBOUNCE_FAST"
-    },
-    "errorOnBlur": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Set to display the error text on blur and not when typing"
-      },
-      "attribute": "error-on-blur",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "errorText": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "The input's error text. Alternatively, you can use the error-text slot."
-      },
-      "attribute": "error-text",
-      "reflect": false,
-      "defaultValue": "''"
-    },
-    "label": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "The input's label. Alternatively, you can use the label slot."
-      },
-      "attribute": "label",
-      "reflect": false,
-      "defaultValue": "''"
-    },
-    "name": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "The input's name attribute."
+        },
+        "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'"
+        },
+        "attribute": "date-format",
+        "reflect": false,
+        "defaultValue": "SixDateFormats.DDMMYYY_DOT"
       },
-      "attribute": "name",
-      "reflect": true,
-      "defaultValue": "''"
-    },
-    "clearable": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
+      "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."
+        },
+        "attribute": "debounce",
+        "reflect": false,
+        "defaultValue": "DEFAULT_DEBOUNCE_FAST"
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Set to true to add a clear button when the input is populated."
+      "errorOnBlur": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Set to display the error text on blur and not when typing"
+        },
+        "attribute": "error-on-blur",
+        "reflect": false,
+        "defaultValue": "false"
       },
-      "attribute": "clearable",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "iconPosition": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "'left' | 'right'",
-        "resolved": "\"left\" | \"right\"",
-        "references": {}
+      "errorText": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The input's error text. Alternatively, you can use the error-text slot."
+        },
+        "attribute": "error-text",
+        "reflect": false,
+        "defaultValue": "''"
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Set the position of the icon"
+      "label": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The input's label. Alternatively, you can use the label slot."
+        },
+        "attribute": "label",
+        "reflect": false,
+        "defaultValue": "''"
       },
-      "attribute": "icon-position",
-      "reflect": false,
-      "defaultValue": "'left'"
-    },
-    "hoist": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
+      "name": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The input's name attribute."
+        },
+        "attribute": "name",
+        "reflect": true,
+        "defaultValue": "''"
       },
-      "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`."
+      "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."
+        },
+        "attribute": "clearable",
+        "reflect": false,
+        "defaultValue": "false"
       },
-      "attribute": "hoist",
-      "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."
+      "iconPosition": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'left' | 'right'",
+          "resolved": "\"left\" | \"right\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Set the position of the icon"
+        },
+        "attribute": "icon-position",
+        "reflect": false,
+        "defaultValue": "'left'"
       },
-      "complexType": {
-        "original": "SixDatepickerSelectPayload",
-        "resolved": "Date",
-        "references": {
-          "SixDatepickerSelectPayload": {
-            "location": "local"
-          }
-        }
+      "hoist": {
+        "type": "boolean",
+        "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`."
+        },
+        "attribute": "hoist",
+        "reflect": false,
+        "defaultValue": "false"
       }
-    }, {
-      "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"
+    };
+  }
+  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",
+          "references": {
+            "SixDatepickerSelectPayload": {
+              "location": "local",
+              "path": "/home/runner/work/six-webcomponents/six-webcomponents/libraries/ui-library/src/components/six-datepicker/six-datepicker.tsx"
+            }
           }
         }
-      }
-    }, {
-      "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",
-        "references": {
-          "SixDatepickerSelectPayload": {
-            "location": "local"
+      }, {
+        "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"
+            }
           }
         }
-      }
-    }]; }
-  static get methods() { return {
-    "reportValidity": {
-      "complexType": {
-        "signature": "() => Promise<boolean>",
-        "parameters": [],
-        "references": {
-          "Promise": {
-            "location": "global"
-          }
+      }, {
+        "method": "sixBlur",
+        "name": "six-datepicker-blur",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitted when a option got selected."
         },
-        "return": "Promise<boolean>"
-      },
-      "docs": {
-        "text": "Checks for validity and shows the browser's validation message if the control is invalid.",
-        "tags": []
-      }
-    },
-    "checkValidity": {
-      "complexType": {
-        "signature": "() => Promise<boolean>",
-        "parameters": [],
-        "references": {
-          "Promise": {
-            "location": "global"
+        "complexType": {
+          "original": "SixDatepickerSelectPayload",
+          "resolved": "Date",
+          "references": {
+            "SixDatepickerSelectPayload": {
+              "location": "local",
+              "path": "/home/runner/work/six-webcomponents/six-webcomponents/libraries/ui-library/src/components/six-datepicker/six-datepicker.tsx"
+            }
           }
+        }
+      }];
+  }
+  static get methods() {
+    return {
+      "reportValidity": {
+        "complexType": {
+          "signature": "() => Promise<boolean>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<boolean>"
         },
-        "return": "Promise<boolean>"
+        "docs": {
+          "text": "Checks for validity and shows the browser's validation message if the control is invalid.",
+          "tags": []
+        }
       },
-      "docs": {
-        "text": "Checks for validity.",
-        "tags": []
-      }
-    },
-    "setCustomValidity": {
-      "complexType": {
-        "signature": "(message: string) => Promise<void>",
-        "parameters": [{
-            "tags": [],
-            "text": ""
-          }],
-        "references": {
-          "Promise": {
-            "location": "global"
-          }
+      "checkValidity": {
+        "complexType": {
+          "signature": "() => Promise<boolean>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<boolean>"
         },
-        "return": "Promise<void>"
+        "docs": {
+          "text": "Checks for validity.",
+          "tags": []
+        }
       },
-      "docs": {
-        "text": "Sets a custom validation message. If `message` is not empty, the field will be considered invalid.",
-        "tags": []
-      }
-    },
-    "reset": {
-      "complexType": {
-        "signature": "() => Promise<void>",
-        "parameters": [],
-        "references": {
-          "Promise": {
-            "location": "global"
-          }
+      "setCustomValidity": {
+        "complexType": {
+          "signature": "(message: string) => Promise<void>",
+          "parameters": [{
+              "tags": [],
+              "text": ""
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
         },
-        "return": "Promise<void>"
+        "docs": {
+          "text": "Sets a custom validation message. If `message` is not empty, the field will be considered invalid.",
+          "tags": []
+        }
       },
-      "docs": {
-        "text": "Resets the formcontrol",
-        "tags": []
-      }
-    },
-    "select": {
-      "complexType": {
-        "signature": "(datestring: string) => Promise<void>",
-        "parameters": [{
-            "tags": [],
-            "text": ""
-          }],
-        "references": {
-          "Promise": {
-            "location": "global"
-          }
+      "reset": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
         },
-        "return": "Promise<void>"
+        "docs": {
+          "text": "Resets the formcontrol",
+          "tags": []
+        }
       },
-      "docs": {
-        "text": "Selects an option",
-        "tags": []
+      "select": {
+        "complexType": {
+          "signature": "(datestring: string) => Promise<void>",
+          "parameters": [{
+              "tags": [],
+              "text": ""
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "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
-    }]; }
+  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