@six-group/ui-library 0.0.0-insider.d16ec8e → 0.0.0-insider.d82aaa2

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

@@ -1,14 +1,13 @@
-import { h } from '@stencil/core';
-import { createCalendarGrid, day, formatDate, getFirstDayOfTheWeek, hours, i18nDate, isValidDate, isValidDateString, minutes, month, now, rangeAround, seconds, toDate, year, } from '../../utils/date-util';
-import { EventListeners } from '../../utils/event-listeners';
-import { isNil } from '../../utils/type-check';
-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';
+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;
@@ -119,15 +118,8 @@ export class SixDatepicker {
       if (inputValueDate === undefined) {
         return;
       }
-      if (this.min && this.min.getTime() > inputValueDate.getTime()) {
-        return;
-      }
-      if (this.max && this.max.getTime() < inputValueDate.getTime()) {
-        return;
-      }
       this.updateIfChanged(inputValueDate);
       const datesOnly = inputValue.replace(/[^\d]/g, '');
-      let isDateValid = inputValue !== '';
       if (datesOnly.length >= 6) {
         const date = toDate(inputValue, this.dateFormat);
         const dateAsString = formatDate(date, this.dateFormat);
@@ -135,16 +127,15 @@ export class SixDatepicker {
           this.selectedDate = toDate(dateAsString, this.dateFormat);
           this.updatePointerDates();
           this.updateValue(this.selectedDate);
-          isDateValid = true;
         }
       }
-      this.displayCustomMessage(isDateValid);
     };
     this.handleOnBlur = (event) => {
       var _a, _b;
       // 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);
       }
       event.stopPropagation();
       const inputValue = (_b = this.inputElement) === null || _b === void 0 ? void 0 : _b.value;
@@ -175,12 +166,12 @@ export class SixDatepicker {
     this.defaultDate = undefined;
     this.placeholder = undefined;
     this.value = undefined;
+    this.label = '';
+    this.errorText = '';
+    this.invalid = false;
     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';
@@ -189,6 +180,11 @@ export class SixDatepicker {
   debounceChanged() {
     this.sixSelect = debounceEvent(this.sixSelect, this.debounce);
   }
+  invalidChanged(invalid) {
+    if (this.inputElement) {
+      this.inputElement.invalid = invalid;
+    }
+  }
   /**
    * Update the native input element when the value changes
    */
@@ -196,10 +192,10 @@ export class SixDatepicker {
     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();
-    this.sixSelect.emit(this.value);
   }
   async resizeHandler() {
     this.updateDropdownDirection();
@@ -220,28 +216,10 @@ export class SixDatepicker {
     const date = new Date(this.pointerDate.year, this.pointerDate.month, 1);
     return getFirstDayOfTheWeek(date);
   }
-  /** Checks for validity and shows the browser's validation message if the control is invalid. */
-  async reportValidity() {
-    var _a;
-    return (_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.reportValidity();
-  }
-  /** Checks for validity. */
-  async checkValidity() {
-    var _a;
-    return (_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.checkValidity();
-  }
-  /** Sets a custom validation message. If `message` is not empty, the field will be considered invalid. */
-  async setCustomValidity(message) {
+  /** Sets focus on the datepickers input. */
+  async setFocus(options) {
     var _a;
-    await ((_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.setCustomValidity(message));
-  }
-  /** Resets the formcontrol */
-  async reset() {
-    this.value = this.defaultValue;
-    if (this.inputElement != null) {
-      this.inputElement.value = formatDate(this.defaultValue, this.dateFormat);
-      await this.inputElement.reset();
-    }
+    (_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.setFocus(options);
   }
   get calendarGrid() {
     return createCalendarGrid({
@@ -350,16 +328,14 @@ export class SixDatepicker {
     if (this.selectedDate !== undefined && this.selectedDate !== null) {
       return this.selectedDate;
     }
-    if (isNil(this.defaultDate)) {
-      return now();
+    if (this.defaultDate == null) {
+      return this.type === 'date' ? removeTime(now()) : now();
     }
-    else if (this.defaultDate != null) {
+    else {
       return toDate(this.defaultDate, this.dateFormat);
     }
-    return undefined;
   }
   updateValue(newDate) {
-    this.displayCustomMessage(true);
     this.updateIfChanged(newDate);
   }
   updateIfChanged(newDate) {
@@ -368,6 +344,7 @@ export class SixDatepicker {
       return;
     }
     this.value = newDate;
+    this.sixSelect.emit(this.value);
   }
   /**
    * Selects an option
@@ -387,7 +364,6 @@ export class SixDatepicker {
     }
   }
   componentWillLoad() {
-    this.defaultValue = this.value;
     this.selectedDate = this.value;
     this.updatePointerDates();
     this.updateValue(this.value);
@@ -437,7 +413,7 @@ export class SixDatepicker {
   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 == null } }, 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: {
+    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, 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), this.open && (h("div", { 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,
@@ -451,21 +427,13 @@ export class SixDatepicker {
     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();
   }
-  displayCustomMessage(valid) {
-    if (this.inputElement == null) {
-      return;
-    }
-    if (valid) {
-      void this.setCustomValidity('');
-    }
-    else {
-      const message = this.errorText != null ? this.errorText : 'Invalid date format';
-      void this.setCustomValidity(message);
-    }
-  }
   static getCurrentDateAsPointer() {
     return {
       year: year(now()),
@@ -606,7 +574,8 @@ export class SixDatepicker {
           "resolved": "(date: Date) => boolean",
           "references": {
             "Date": {
-              "location": "global"
+              "location": "global",
+              "id": "global::Date"
             }
           }
         },
@@ -626,7 +595,8 @@ export class SixDatepicker {
           "resolved": "Date | undefined",
           "references": {
             "Date": {
-              "location": "global"
+              "location": "global",
+              "id": "global::Date"
             }
           }
         },
@@ -645,7 +615,8 @@ export class SixDatepicker {
           "resolved": "Date | undefined",
           "references": {
             "Date": {
-              "location": "global"
+              "location": "global",
+              "id": "global::Date"
             }
           }
         },
@@ -721,10 +692,10 @@ export class SixDatepicker {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Set to true to make the input a required field."
+          "text": "Set to true to show an asterisk beneath the label."
         },
         "attribute": "required",
-        "reflect": true,
+        "reflect": false,
         "defaultValue": "false"
       },
       "defaultDate": {
@@ -769,7 +740,8 @@ export class SixDatepicker {
           "resolved": "Date | undefined",
           "references": {
             "Date": {
-              "location": "global"
+              "location": "global",
+              "id": "global::Date"
             }
           }
         },
@@ -780,67 +752,43 @@ export class SixDatepicker {
           "text": "The value of the form field, which accepts a date object."
         }
       },
-      "containingElement": {
-        "type": "unknown",
-        "mutable": false,
-        "complexType": {
-          "original": "HTMLElement",
-          "resolved": "HTMLElement | undefined",
-          "references": {
-            "HTMLElement": {
-              "location": "global"
-            }
-          }
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "The dropdown will close when the user interacts outside of this element (e.g. clicking)."
-        }
-      },
-      "dateFormat": {
+      "label": {
         "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"
-            }
-          }
+          "original": "string",
+          "resolved": "string",
+          "references": {}
         },
         "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'"
+          "text": "The label text."
         },
-        "attribute": "date-format",
+        "attribute": "label",
         "reflect": false,
-        "defaultValue": "SixDateFormats.DDMMYYY_DOT"
+        "defaultValue": "''"
       },
-      "debounce": {
-        "type": "number",
+      "errorText": {
+        "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "number",
-          "resolved": "number",
+          "original": "string",
+          "resolved": "string",
           "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."
+          "text": "The error message shown, if `invalid` is set to true."
         },
-        "attribute": "debounce",
+        "attribute": "error-text",
         "reflect": false,
-        "defaultValue": "DEFAULT_DEBOUNCE_FAST"
+        "defaultValue": "''"
       },
-      "errorOnBlur": {
+      "invalid": {
         "type": "boolean",
         "mutable": false,
         "complexType": {
@@ -852,47 +800,73 @@ export class SixDatepicker {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Set to display the error text on blur and not when typing"
+          "text": "If this property is set to true and an error message is provided by `errorText`, the error message is displayed."
         },
-        "attribute": "error-on-blur",
-        "reflect": false,
+        "attribute": "invalid",
+        "reflect": true,
         "defaultValue": "false"
       },
-      "errorText": {
+      "containingElement": {
+        "type": "unknown",
+        "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)."
+        }
+      },
+      "dateFormat": {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
+          "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": "The input's error text. Alternatively, you can use the error-text slot."
+          "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": "error-text",
+        "attribute": "date-format",
         "reflect": false,
-        "defaultValue": "''"
+        "defaultValue": "SixDateFormats.DDMMYYY_DOT"
       },
-      "label": {
-        "type": "string",
+      "debounce": {
+        "type": "number",
         "mutable": false,
         "complexType": {
-          "original": "string",
-          "resolved": "string",
+          "original": "number",
+          "resolved": "number",
           "references": {}
         },
         "required": false,
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "The input's label. Alternatively, you can use the label slot."
+          "text": "Set the amount of time, in milliseconds, to wait to trigger the `dateChange` event after each keystroke."
         },
-        "attribute": "label",
+        "attribute": "debounce",
         "reflect": false,
-        "defaultValue": "''"
+        "defaultValue": "DEFAULT_DEBOUNCE_FAST"
       },
       "name": {
         "type": "string",
@@ -992,7 +966,8 @@ export class SixDatepicker {
           "references": {
             "SixDatepickerSelectPayload": {
               "location": "local",
-              "path": "/home/runner/work/six-webcomponents/six-webcomponents/libraries/ui-library/src/components/six-datepicker/six-datepicker.tsx"
+              "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"
             }
           }
         }
@@ -1012,7 +987,8 @@ export class SixDatepicker {
           "references": {
             "EmptyPayload": {
               "location": "import",
-              "path": "../../utils/types"
+              "path": "../../utils/types",
+              "id": "src/utils/types.ts::EmptyPayload"
             }
           }
         }
@@ -1032,7 +1008,8 @@ export class SixDatepicker {
           "references": {
             "SixDatepickerSelectPayload": {
               "location": "local",
-              "path": "/home/runner/work/six-webcomponents/six-webcomponents/libraries/ui-library/src/components/six-datepicker/six-datepicker.tsx"
+              "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"
             }
           }
         }
@@ -1040,70 +1017,27 @@ export class SixDatepicker {
   }
   static get methods() {
     return {
-      "reportValidity": {
-        "complexType": {
-          "signature": "() => Promise<boolean | undefined>",
-          "parameters": [],
-          "references": {
-            "Promise": {
-              "location": "global"
-            }
-          },
-          "return": "Promise<boolean | undefined>"
-        },
-        "docs": {
-          "text": "Checks for validity and shows the browser's validation message if the control is invalid.",
-          "tags": []
-        }
-      },
-      "checkValidity": {
+      "setFocus": {
         "complexType": {
-          "signature": "() => Promise<boolean | undefined>",
-          "parameters": [],
-          "references": {
-            "Promise": {
-              "location": "global"
-            }
-          },
-          "return": "Promise<boolean | undefined>"
-        },
-        "docs": {
-          "text": "Checks for validity.",
-          "tags": []
-        }
-      },
-      "setCustomValidity": {
-        "complexType": {
-          "signature": "(message: string) => Promise<void>",
+          "signature": "(options?: FocusOptions) => Promise<void>",
           "parameters": [{
               "tags": [],
               "text": ""
             }],
           "references": {
             "Promise": {
-              "location": "global"
+              "location": "global",
+              "id": "global::Promise"
+            },
+            "FocusOptions": {
+              "location": "global",
+              "id": "global::FocusOptions"
             }
           },
           "return": "Promise<void>"
         },
         "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"
-            }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "Resets the formcontrol",
+          "text": "Sets focus on the datepickers input.",
           "tags": []
         }
       },
@@ -1116,7 +1050,8 @@ export class SixDatepicker {
             }],
           "references": {
             "Promise": {
-              "location": "global"
+              "location": "global",
+              "id": "global::Promise"
             }
           },
           "return": "Promise<void>"
@@ -1133,6 +1068,9 @@ export class SixDatepicker {
     return [{
         "propName": "debounce",
         "methodName": "debounceChanged"
+      }, {
+        "propName": "invalid",
+        "methodName": "invalidChanged"
       }, {
         "propName": "value",
         "methodName": "valueChanged"