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

package/dist/cjs/six-datepicker.cjs.entry.js

@@ -2,11 +2,11 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-ccf35821.js');
-const eventListeners = require('./event-listeners-dd94dcfb.js');
-const executionControl = require('./execution-control-45c84c46.js');
-const slot = require('./slot-bccbdb59.js');
-const popup = require('./popup-44836aaf.js');
+const index = require('./index-900437fc.js');
+const eventListeners = require('./event-listeners-fdfe838c.js');
+const executionControl = require('./execution-control-b4707294.js');
+const slot = require('./slot-6e6a400f.js');
+const popup = require('./popup-f1d9910f.js');
 
 const isString = (value) => typeof value === 'string';
 // only use '==' instead of '===' to also catch undefined and void
@@ -124,6 +124,7 @@ const i18nDate = {
  * ```
  */
 const now = () => new Date();
+const removeTime = (date) => new Date(date.getFullYear(), date.getMonth(), date.getDate());
 /**
  * Returns `true` if the given date is valid
  */
@@ -690,15 +691,8 @@ const SixDatepicker = class {
       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);
@@ -706,16 +700,15 @@ const SixDatepicker = class {
           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;
@@ -746,12 +739,12 @@ const SixDatepicker = class {
     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 = executionControl.DEFAULT_DEBOUNCE_FAST;
-    this.errorOnBlur = false;
-    this.errorText = '';
-    this.label = '';
     this.name = '';
     this.clearable = false;
     this.iconPosition = 'left';
@@ -760,6 +753,11 @@ const SixDatepicker = class {
   debounceChanged() {
     this.sixSelect = executionControl.debounceEvent(this.sixSelect, this.debounce);
   }
+  invalidChanged(invalid) {
+    if (this.inputElement) {
+      this.inputElement.invalid = invalid;
+    }
+  }
   /**
    * Update the native input element when the value changes
    */
@@ -767,10 +765,10 @@ const SixDatepicker = class {
     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();
@@ -791,28 +789,10 @@ const SixDatepicker = class {
     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() {
+  /** Sets focus on the datepickers input. */
+  async setFocus(options) {
     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) {
-    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({
@@ -921,16 +901,14 @@ const SixDatepicker = class {
     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) {
@@ -939,6 +917,7 @@ const SixDatepicker = class {
       return;
     }
     this.value = newDate;
+    this.sixSelect.emit(this.value);
   }
   /**
    * Selects an option
@@ -958,7 +937,6 @@ const SixDatepicker = class {
     }
   }
   componentWillLoad() {
-    this.defaultValue = this.value;
     this.selectedDate = this.value;
     this.updatePointerDates();
     this.updateValue(this.value);
@@ -1008,7 +986,7 @@ const SixDatepicker = class {
   render() {
     var _a, _b, _c;
     this.adjustPopupPosition();
-    return (index.h("div", { ref: (el) => (this.wrapper = el), class: "datepicker__container" }, index.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(), slot.hasSlot(this.host, 'error-text') ? (index.h("span", { slot: "error-text" }, index.h("slot", { name: "error-text" }))) : null, slot.hasSlot(this.host, 'label') ? (index.h("span", { slot: "label" }, index.h("slot", { name: "label" }))) : null), this.open && (index.h("div", { part: "popup", ref: (el) => (this.popup = el), class: {
+    return (index.h("div", { ref: (el) => (this.wrapper = el), class: "datepicker__container" }, index.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(), slot.hasSlot(this.host, 'label') ? (index.h("span", { slot: "label" }, index.h("slot", { name: "label" }))) : null), this.open && (index.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,
@@ -1022,21 +1000,13 @@ const SixDatepicker = class {
     popup.adjustPopupForHoisting(this.hoist, this.popup, this.inputElement, this.wrapper, MIN_POPUP_HEIGHT, (isUp) => (this.isDropDownContentUp = isUp));
     popup.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()),
@@ -1050,6 +1020,7 @@ const SixDatepicker = class {
   get host() { return index.getElement(this); }
   static get watchers() { return {
     "debounce": ["debounceChanged"],
+    "invalid": ["invalidChanged"],
     "value": ["valueChanged"]
   }; }
 };