@six-group/ui-library 0.0.0-insider.b2db78f → 0.0.0-insider.b85326c

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

@@ -1,8 +1,7 @@
 'use strict';
 
-var index = require('./index-B_stPhJp.js');
+var index = require('./index-BKTrCUjx.js');
 var eventListeners = require('./event-listeners-BrSR7arL.js');
-var executionControl = require('./execution-control-oU0MWBWI.js');
 var slot = require('./slot-DBK7c7jH.js');
 var popover = require('./popover-BUVXXnz7.js');
 
@@ -22165,7 +22164,7 @@ var dateFnsExports = /*@__PURE__*/ requireDateFns();
  */
 function fromFormattedString(dateString, dateFormat) {
     const date = dateFnsExports.parse(dateString, dateFormat, new Date());
-    if (dateFnsExports.isValid(date) && dateFnsExports.format(date, dateFormat) === dateString) {
+    if (dateFnsExports.isValid(date)) {
         return fromDate(date);
     }
     return undefined;
@@ -22471,6 +22470,11 @@ const SixDate = class {
          */
         this.value = '';
         /** Defines the format pattern for displaying dates and how dates can be entered via keyboard.
+         *
+         * The parser accepts flexible input that doesn't strictly match the format pattern.
+         * Input with missing leading zeros or incomplete years will be automatically normalized.
+         * For example, with the pattern "dd.MM.yyyy": "1.1.2025" becomes "01.01.2025" and
+         * "1.1.225" becomes "01.01.0225".
          *
          * Defaults to "dd.MM.yyyy".
          *
@@ -22493,10 +22497,6 @@ const SixDate = class {
         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;
-        /**
-         * Set the amount of time, in milliseconds, to wait to trigger the `six-change` event after each keystroke.
-         */
-        this.debounce = executionControl.DEFAULT_DEBOUNCE_FAST;
         /** The input's name attribute. */
         this.name = '';
         /** Set to true to add a clear button when the input is populated. */
@@ -22547,12 +22547,6 @@ const SixDate = class {
                 this.sixBlur.emit();
             }
         };
-        this.handleClearClick = () => {
-            this.hide();
-            this.value = '';
-            this.pointerDate = todayAsPointerDate();
-            this.sixChange.emit(this.value);
-        };
         this.handleDayClick = (date) => {
             var _a;
             this.value = date;
@@ -22585,14 +22579,18 @@ const SixDate = class {
             }
             this.sixChange.emit(this.value);
         };
-        this.handleOnBlur = () => {
+        this.handleInputBlur = () => {
             var _a;
             if (((_a = this.popoverHelper) === null || _a === void 0 ? void 0 : _a.isVisible) === false) {
-                if (this.inputElement) {
-                    this.inputElement.value = this.value === '' ? '' : formatDate(this.value, this.dateFormat);
-                }
+                this.updateInputElementValue();
             }
         };
+        this.handleInputClearClick = () => {
+            this.hide();
+            this.value = '';
+            this.pointerDate = todayAsPointerDate();
+            this.sixChange.emit(this.value);
+        };
         this.handleInputKeyDown = (event) => {
             if (event.key === 'Tab') {
                 this.hide();
@@ -22634,9 +22632,7 @@ const SixDate = class {
         var _a, _b;
         if (((_a = this.popoverHelper) === null || _a === void 0 ? void 0 : _a.isVisible) === false)
             return;
-        if (this.inputElement) {
-            this.inputElement.value = this.value === '' ? '' : formatDate(this.value, this.dateFormat);
-        }
+        this.updateInputElementValue();
         this.selectionMode = 'day';
         this.eventListeners.remove(document, 'mousedown', this.handleDocumentMouseDown);
         this.panelHideInProgress = true;
@@ -22659,6 +22655,11 @@ const SixDate = class {
             },
         });
     }
+    updateInputElementValue() {
+        if (this.inputElement) {
+            this.inputElement.value = this.value === '' ? '' : formatDate(this.value, this.dateFormat);
+        }
+    }
     connectedCallback() {
         this.initPopover();
         this.updateValueAndPointerDate();
@@ -22666,6 +22667,7 @@ const SixDate = class {
         this.eventListeners.forward('six-blur', 'blur', this.host);
     }
     componentDidLoad() {
+        this.updateInputElementValue();
         this.initPopover();
     }
     disconnectedCallback() {
@@ -22675,7 +22677,7 @@ const SixDate = class {
         this.popoverHelper = undefined;
     }
     render() {
-        return (index.h("div", { key: '7df1efadccea9e30f96be4edeeae124649fb119e', class: "container" }, index.h("six-input", { key: 'e76e46d4eade078d2395e39a112426824f6e6ed9', value: this.value === '' ? '' : formatDate(this.value, this.dateFormat), ref: (el) => (this.inputElement = el), placeholder: this.placeholder == null ? this.dateFormat : this.placeholder, readonly: this.readonly, disabled: this.disabled, name: this.name, label: this.label, required: this.required, helpText: this.helpText, errorText: this.errorText, errorTextCount: this.errorTextCount, invalid: this.invalid, onKeyDown: this.handleInputKeyDown, onInput: executionControl.debounce(this.handleInputChange, this.debounce), onBlur: this.handleOnBlur, "onSix-input-clear": this.handleClearClick, size: this.size, clearable: this.clearable, "aria-describedby": "date-format" }, index.h("six-icon", { key: '96e71e847d2696297b13f3fbf332faaa3a05b626', slot: "prefix", size: this.size === 'large' ? 'medium' : this.size }, "today"), slot.hasSlot(this.host, 'label') ? (index.h("span", { slot: "label" }, index.h("slot", { name: "label" }))) : null, slot.hasSlot(this.host, 'error-text') ? (index.h("span", { slot: "error-text" }, index.h("slot", { name: "error-text" }))) : null, slot.hasSlot(this.host, 'help-text') ? (index.h("span", { slot: "help-text" }, index.h("slot", { name: "help-text" }))) : null), index.h("span", { key: 'f065385a9f382c847713aeb0162a7429c1303f66', id: "date-format", class: "sr-only" }, translateFormatHelp(this.language, this.dateFormat)), index.h("div", { key: 'd0ed8f5babfda44168d349a1340ac4e5f7993e23', ref: (el) => (this.positioner = el), class: "positioner" }, index.h("div", { key: '27250b4ed9b8fbeacf4104380a3f75b1b395d26c', class: "panel", ref: (el) => (this.panel = el) }, index.h("header", { key: '5d70aeb04a68fa320cd51d5219bd9d8499bc8099', class: "panel__header" }, index.h("six-icon-button", { key: '7eb4a255ecb028e2d3f254b3ffc0886995698af7', tabindex: "-1", class: "previous", onClick: this.handlePreviousClick, name: "arrow_back_ios" }), this.selectionMode === 'day' && (index.h("div", { key: '42e9e6ffbb7ded041cc766a4ecafd9350b1beec1', class: "selector", onClick: () => (this.selectionMode = 'month') }, translateMonth(this.pointerDate.month, this.language), index.h("six-icon", { key: '72ab31ef4d76739a955253ce718705c171aeffc4' }, "arrow_drop_down"))), this.selectionMode !== 'year' && (index.h("div", { key: '760255898924358aa99856d211c218aa3ab3bf92', class: "selector", onClick: () => (this.selectionMode = 'year') }, this.pointerDate.year, index.h("six-icon", { key: 'dbd9d1f346c56e2df6162edaa53a458afe9883db' }, "arrow_drop_down"))), this.selectionMode === 'year' && (index.h("div", { key: 'd04218a353e377b276388708c86694bca2c97228', class: "selector" }, this.pointerDate.year - Math.floor(NUMBER_OF_YEARS_SHOWN / 2), " \u2013", ' ', this.pointerDate.year + Math.floor(NUMBER_OF_YEARS_SHOWN / 2))), index.h("six-icon-button", { key: '5a924541cc2f89a2bb76113757c00211c86b3adf', tabindex: "-1", class: "next", onClick: this.handleNextClick, name: "arrow_forward_ios" })), this.selectionMode === 'day' && (index.h(DaySelection, { key: 'd1e853fd6fcd9d8c74b4d5f8072f998ba081a8c4', language: this.language, calendarGrid: createCalendarGrid({
+        return (index.h("div", { key: '2fccfb9c005bf6ac4906be3735c3b0fc61bfad8f', class: "container" }, index.h("six-input", { key: '453bf29f4aec7bc192d1bc5191c7f74a93f0ac48', ref: (el) => (this.inputElement = el), placeholder: this.placeholder == null ? this.dateFormat : this.placeholder, readonly: this.readonly, disabled: this.disabled, name: this.name, label: this.label, required: this.required, helpText: this.helpText, errorText: this.errorText, errorTextCount: this.errorTextCount, invalid: this.invalid, onKeyDown: this.handleInputKeyDown, onInput: this.handleInputChange, onBlur: this.handleInputBlur, "onSix-input-clear": this.handleInputClearClick, size: this.size, clearable: this.clearable, "aria-describedby": "date-format" }, index.h("six-icon", { key: '93e4add573a5617e9f90e9e8060a9a3a6ec10b98', slot: "prefix", size: this.size === 'large' ? 'medium' : this.size }, "today"), slot.hasSlot(this.host, 'label') ? (index.h("span", { slot: "label" }, index.h("slot", { name: "label" }))) : null, slot.hasSlot(this.host, 'error-text') ? (index.h("span", { slot: "error-text" }, index.h("slot", { name: "error-text" }))) : null, slot.hasSlot(this.host, 'help-text') ? (index.h("span", { slot: "help-text" }, index.h("slot", { name: "help-text" }))) : null), index.h("span", { key: '5fb919b6861ed8307de1105c881350d4094bbf52', id: "date-format", class: "sr-only" }, translateFormatHelp(this.language, this.dateFormat)), index.h("div", { key: 'ccddb6c5b5c49f77d31d2d0c75742cc0ffbda2ee', ref: (el) => (this.positioner = el), class: "positioner" }, index.h("div", { key: '3eec69b5bac555fd542cab3a967700403af68750', class: "panel", ref: (el) => (this.panel = el) }, index.h("header", { key: 'a16e0c72e430580b0f0c229476b7c45ea50e194a', class: "panel__header" }, index.h("six-icon-button", { key: 'bfc02505301c5264de2934f3f4f3fcea52cacf07', tabindex: "-1", class: "previous", onClick: this.handlePreviousClick, name: "arrow_back_ios" }), this.selectionMode === 'day' && (index.h("div", { key: '2f64e3cc6f2ee9326c953f81b1ea6a3f5ab13551', class: "selector", onClick: () => (this.selectionMode = 'month') }, translateMonth(this.pointerDate.month, this.language), index.h("six-icon", { key: '9372e403d994348716322f39d7e30971c3d37842' }, "arrow_drop_down"))), this.selectionMode !== 'year' && (index.h("div", { key: '16a3de3dd5207eeb91d341a02b93b11e707f3372', class: "selector", onClick: () => (this.selectionMode = 'year') }, this.pointerDate.year, index.h("six-icon", { key: '81024acff597b548875a7500cbb5aab7ba47952e' }, "arrow_drop_down"))), this.selectionMode === 'year' && (index.h("div", { key: 'f8615b0ca8ce732a18776e3677a997fd43d9fac4', class: "selector" }, this.pointerDate.year - Math.floor(NUMBER_OF_YEARS_SHOWN / 2), " \u2013", ' ', this.pointerDate.year + Math.floor(NUMBER_OF_YEARS_SHOWN / 2))), index.h("six-icon-button", { key: '0e689a5621ae8a62415c4a19efb64a983b720115', tabindex: "-1", class: "next", onClick: this.handleNextClick, name: "arrow_forward_ios" })), this.selectionMode === 'day' && (index.h(DaySelection, { key: '6fe9920a9449418460e069eefa96adda867c2eb3', language: this.language, calendarGrid: createCalendarGrid({
                 year: this.pointerDate.year,
                 month: this.pointerDate.month,
                 selected: this.value || undefined,
@@ -22683,7 +22685,7 @@ const SixDate = class {
                 maxDate: this.max,
                 dateFormat: this.dateFormat,
                 allowedDates: this.allowedDates,
-            }), dayClicked: this.handleDayClick })), this.selectionMode === 'month' && (index.h(MonthSelection, { key: '9804ad6d7222024095e7c2d83357506c61d68cfa', language: this.language, selected: this.value, monthClicked: this.handleMonthClicked })), this.selectionMode === 'year' && (index.h(YearSelection, { key: 'd6f67dacd54f4ca384f7a4a328c4a87b0d95878a', selected: this.value, pointerYear: this.pointerDate.year, yearCount: NUMBER_OF_YEARS_SHOWN, yearClicked: this.handleYearClicked }))))));
+            }), dayClicked: this.handleDayClick })), this.selectionMode === 'month' && (index.h(MonthSelection, { key: 'ad02bb9d8b6c96abf77ccd30585490b2236fbfd0', language: this.language, selected: this.value, monthClicked: this.handleMonthClicked })), this.selectionMode === 'year' && (index.h(YearSelection, { key: 'a14118d8b9ec16182522d1de6dc12d9026ef3aa3', selected: this.value, pointerYear: this.pointerDate.year, yearCount: NUMBER_OF_YEARS_SHOWN, yearClicked: this.handleYearClicked }))))));
     }
     get host() { return index.getElement(this); }
     static get watchers() { return {