@six-group/ui-library 4.3.2 → 5.0.0-rc.1

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

@@ -26,6 +26,80 @@ var SelectionMode;
 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();
@@ -150,36 +224,6 @@ 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 = undefined;
-        this.max = undefined;
-        this.closeOnSelect = this.type === 'date';
-        this.placement = undefined;
-        this.size = 'medium';
-        this.required = false;
-        this.defaultDate = undefined;
-        this.placeholder = undefined;
-        this.value = undefined;
-        this.label = '';
-        this.errorText = '';
-        this.errorTextCount = undefined;
-        this.invalid = false;
-        this.containingElement = undefined;
-        this.dateFormat = SixDateFormats.DDMMYYY_DOT;
-        this.debounce = DEFAULT_DEBOUNCE_FAST;
-        this.name = '';
-        this.clearable = false;
-        this.iconPosition = 'left';
-        this.hoist = false;
     }
     debounceChanged() {
         this.sixSelect = debounceEvent(this.sixSelect, this.debounce);
@@ -459,6 +503,7 @@ export class SixDatepicker {
         return {
             "type": {
                 "type": "string",
+                "attribute": "type",
                 "mutable": false,
                 "complexType": {
                     "original": "'date' | 'date-time'",
@@ -471,12 +516,14 @@ export class SixDatepicker {
                     "tags": [],
                     "text": "Set the type."
                 },
-                "attribute": "type",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "'date'"
             },
             "locale": {
                 "type": "string",
+                "attribute": "locale",
                 "mutable": false,
                 "complexType": {
                     "original": "'en' | 'de' | 'fr' | 'it' | 'es'",
@@ -489,12 +536,14 @@ export class SixDatepicker {
                     "tags": [],
                     "text": "The language used to render the weekdays and months."
                 },
-                "attribute": "locale",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "'en'"
             },
             "open": {
                 "type": "boolean",
+                "attribute": "open",
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
@@ -507,12 +556,14 @@ export class SixDatepicker {
                     "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",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
                 "defaultValue": "false"
             },
             "inline": {
                 "type": "boolean",
+                "attribute": "inline",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -525,12 +576,14 @@ export class SixDatepicker {
                     "tags": [],
                     "text": "Indicates whether or not the calendar should be shown as an inline (always open) component"
                 },
-                "attribute": "inline",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
                 "defaultValue": "false"
             },
             "readonly": {
                 "type": "boolean",
+                "attribute": "readonly",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -543,12 +596,14 @@ export class SixDatepicker {
                     "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",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "false"
             },
             "disabled": {
                 "type": "boolean",
+                "attribute": "disabled",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -561,12 +616,14 @@ export class SixDatepicker {
                     "tags": [],
                     "text": "If `true` the component is disabled."
                 },
-                "attribute": "disabled",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "false"
             },
             "allowedDates": {
                 "type": "unknown",
+                "attribute": "allowed-dates",
                 "mutable": false,
                 "complexType": {
                     "original": "(date: Date) => boolean",
@@ -584,10 +641,13 @@ export class SixDatepicker {
                     "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",
@@ -604,10 +664,13 @@ export class SixDatepicker {
                 "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",
@@ -624,10 +687,13 @@ export class SixDatepicker {
                 "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",
@@ -640,12 +706,14 @@ export class SixDatepicker {
                     "tags": [],
                     "text": "Closes the datepicker dropdown after selection"
                 },
-                "attribute": "close-on-select",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "this.type === 'date'"
             },
             "placement": {
                 "type": "string",
+                "attribute": "placement",
                 "mutable": false,
                 "complexType": {
                     "original": "'top' | 'bottom'",
@@ -658,11 +726,13 @@ export class SixDatepicker {
                     "tags": [],
                     "text": "The enforced placement of the dropdown panel."
                 },
-                "attribute": "placement",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             },
             "size": {
                 "type": "string",
+                "attribute": "size",
                 "mutable": false,
                 "complexType": {
                     "original": "'small' | 'medium' | 'large'",
@@ -675,12 +745,14 @@ export class SixDatepicker {
                     "tags": [],
                     "text": "Datepicker size."
                 },
-                "attribute": "size",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "'medium'"
             },
             "required": {
                 "type": "boolean",
+                "attribute": "required",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -693,12 +765,14 @@ export class SixDatepicker {
                     "tags": [],
                     "text": "Set to true to show an asterisk beneath the label."
                 },
-                "attribute": "required",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "false"
             },
             "defaultDate": {
                 "type": "string",
+                "attribute": "default-date",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -711,11 +785,13 @@ export class SixDatepicker {
                     "tags": [],
                     "text": "The date to defines where the datepicker popup starts. The prop accepts ISO 8601 date strings (YYYY-MM-DD)."
                 },
-                "attribute": "default-date",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             },
             "placeholder": {
                 "type": "string",
+                "attribute": "placeholder",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -728,11 +804,13 @@ export class SixDatepicker {
                     "tags": [],
                     "text": "The placeholder defines what text to be shown on the input element"
                 },
-                "attribute": "placeholder",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             },
             "value": {
                 "type": "unknown",
+                "attribute": "value",
                 "mutable": true,
                 "complexType": {
                     "original": "Date",
@@ -749,10 +827,13 @@ export class SixDatepicker {
                 "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",
@@ -765,12 +846,14 @@ export class SixDatepicker {
                     "tags": [],
                     "text": "The label text."
                 },
-                "attribute": "label",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "''"
             },
             "errorText": {
                 "type": "string",
+                "attribute": "error-text",
                 "mutable": false,
                 "complexType": {
                     "original": "string | string[]",
@@ -783,12 +866,14 @@ export class SixDatepicker {
                     "tags": [],
                     "text": "The error message shown, if `invalid` is set to true."
                 },
-                "attribute": "error-text",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "''"
             },
             "errorTextCount": {
                 "type": "number",
+                "attribute": "error-text-count",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -801,11 +886,13 @@ export class SixDatepicker {
                     "tags": [],
                     "text": "The number of error texts to be shown (if the error-text slot isn't used). Defaults to 1"
                 },
-                "attribute": "error-text-count",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             },
             "invalid": {
                 "type": "boolean",
+                "attribute": "invalid",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -818,12 +905,14 @@ export class SixDatepicker {
                     "tags": [],
                     "text": "If this property is set to true and an error message is provided by `errorText`, the error message is displayed."
                 },
-                "attribute": "invalid",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
                 "defaultValue": "false"
             },
             "containingElement": {
                 "type": "unknown",
+                "attribute": "containing-element",
                 "mutable": false,
                 "complexType": {
                     "original": "HTMLElement",
@@ -840,10 +929,13 @@ export class SixDatepicker {
                 "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",
@@ -862,12 +954,14 @@ export class SixDatepicker {
                     "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",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "SixDateFormats.DDMMYYY_DOT"
             },
             "debounce": {
                 "type": "number",
+                "attribute": "debounce",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -880,12 +974,14 @@ export class SixDatepicker {
                     "tags": [],
                     "text": "Set the amount of time, in milliseconds, to wait to trigger the `dateChange` event after each keystroke."
                 },
-                "attribute": "debounce",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "DEFAULT_DEBOUNCE_FAST"
             },
             "name": {
                 "type": "string",
+                "attribute": "name",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -898,12 +994,14 @@ export class SixDatepicker {
                     "tags": [],
                     "text": "The input's name attribute."
                 },
-                "attribute": "name",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
                 "defaultValue": "''"
             },
             "clearable": {
                 "type": "boolean",
+                "attribute": "clearable",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -916,12 +1014,14 @@ export class SixDatepicker {
                     "tags": [],
                     "text": "Set to true to add a clear button when the input is populated."
                 },
-                "attribute": "clearable",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "false"
             },
             "iconPosition": {
                 "type": "string",
+                "attribute": "icon-position",
                 "mutable": false,
                 "complexType": {
                     "original": "'left' | 'right'",
@@ -934,12 +1034,14 @@ export class SixDatepicker {
                     "tags": [],
                     "text": "Set the position of the icon"
                 },
-                "attribute": "icon-position",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "'left'"
             },
             "hoist": {
                 "type": "boolean",
+                "attribute": "hoist",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -952,7 +1054,8 @@ export class SixDatepicker {
                     "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",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "false"
             }