@six-group/ui-library 0.0.0-insider.77a508a → 0.0.0-insider.79a0d1c

package/dist/components/six-card.js

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, h, d as Host } from './p-BAe7gBEi.js';
+import { p as proxyCustomElement, H, h, d as Host } from './p-D512q9rn.js';
 
 const sixCardCss = ":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:border-box}.sr-only{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}:host{display:inline-block;box-shadow:var(--six-shadow-medium);border:1px solid var(--six-color-web-rock-100);padding:var(--six-spacing-medium)}";
 
@@ -9,7 +9,7 @@ const SixCard$1 = /*@__PURE__*/ proxyCustomElement(class SixCard extends H {
         this.__attachShadow();
     }
     render() {
-        return (h(Host, { key: 'd2459e12a9f8274f095a3d09a077c59a7f091dea' }, h("slot", { key: '1619a201af796250d6808a0974047644e7fb6a69' })));
+        return (h(Host, { key: '9a56f190ccdf8545c4503284ae32a23220e1af37' }, h("slot", { key: 'db6e7fe7d83c4e41747ad39a85bf108ce581ae87' })));
     }
     static get style() { return sixCardCss; }
 }, [1, "six-card"]);

package/dist/components/six-checkbox.js

@@ -1,4 +1,4 @@
-import { S as SixCheckbox$1, d as defineCustomElement$1 } from './p-C4Shm3wX.js';
+import { S as SixCheckbox$1, d as defineCustomElement$1 } from './p-BKl-wAjt.js';
 
 const SixCheckbox = SixCheckbox$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/six-date.js

@@ -1,12 +1,11 @@
-import { h, p as proxyCustomElement, H, c as createEvent } from './p-BAe7gBEi.js';
+import { h, p as proxyCustomElement, H, c as createEvent } from './p-D512q9rn.js';
 import { E as EventListeners } from './p-C4h4qpGl.js';
-import { D as DEFAULT_DEBOUNCE_FAST, d as debounce } from './p-ltzGzaAu.js';
 import { h as hasSlot } from './p-j3oIB5oT.js';
 import { P as Popover } from './p-kHci8ddv.js';
-import { d as defineCustomElement$5 } from './p-su5lTFPV.js';
-import { d as defineCustomElement$4 } from './p-Bga8smgq.js';
-import { d as defineCustomElement$3 } from './p-CS9Rg27-.js';
-import { d as defineCustomElement$2 } from './p-BFrSuO7n.js';
+import { d as defineCustomElement$5 } from './p-BLocui1Z.js';
+import { d as defineCustomElement$4 } from './p-CT4IVFqs.js';
+import { d as defineCustomElement$3 } from './p-CoOyRFuR.js';
+import { d as defineCustomElement$2 } from './p-CzGRjc9h.js';
 
 var dateFns = {};
 
@@ -22162,12 +22161,12 @@ var dateFnsExports = /*@__PURE__*/ requireDateFns();
  * - "MM/dd/yyyy" (e.g., "01/08/2021")
  *
  * @param dateString - The date string to validate.
- * @param format - The expected format of the date string (e.g., "yyyy-MM-dd").
+ * @param dateFormat - The expected format of the date string (e.g., "yyyy-MM-dd").
  * @returns An IsoDate if the date string is valid, otherwise undefined.
  */
-function fromFormattedString(dateString, format) {
-    const date = dateFnsExports.parse(dateString, format, new Date());
-    if (dateFnsExports.isValid(date) && dateFnsExports.format(date, format) === dateString) {
+function fromFormattedString(dateString, dateFormat) {
+    const date = dateFnsExports.parse(dateString, dateFormat, new Date());
+    if (dateFnsExports.isValid(date)) {
         return fromDate(date);
     }
     return undefined;
@@ -22186,11 +22185,11 @@ function fromFormattedString(dateString, format) {
  * - "MM/dd/yyyy" (e.g., "01/08/2021")
  *
  * @param {IsoDate} isoDate - The ISO date string to be formatted.
- * @param {string} format - The desired date format string.
+ * @param {string} dateFormat - The desired date format string.
  * @return {string} A string representing the formatted date.
  */
-function formatDate(isoDate, format) {
-    return dateFnsExports.format(dateFnsExports.parseISO(isoDate), format);
+function formatDate(isoDate, dateFormat) {
+    return dateFnsExports.format(dateFnsExports.parseISO(isoDate), dateFormat);
 }
 function fromDate(date) {
     return dateFnsExports.formatISO(date, { representation: 'date' });
@@ -22217,6 +22216,38 @@ function toPointerDate(isoDate) {
         day: parseInt(isoDate.slice(8), 10),
     };
 }
+function nextPointerDate(selectionMode, pointerDate) {
+    if (selectionMode === 'day') {
+        if (pointerDate.month === 12) {
+            return { year: pointerDate.year + 1, month: 1, day: 1 };
+        }
+        else {
+            return { year: pointerDate.year, month: pointerDate.month + 1, day: 1 };
+        }
+    }
+    else if (selectionMode === 'month') {
+        return Object.assign(Object.assign({}, pointerDate), { year: pointerDate.year + 1 });
+    }
+    else if (selectionMode === 'year') {
+        return Object.assign(Object.assign({}, pointerDate), { year: pointerDate.year + 25 });
+    }
+    return pointerDate;
+}
+function previousPointerDate(selectionMode, pointerDate) {
+    switch (selectionMode) {
+        case 'day':
+            if (pointerDate.month === 1) {
+                return { year: pointerDate.year - 1, month: 12, day: 1 };
+            }
+            else {
+                return { year: pointerDate.year, month: pointerDate.month - 1, day: 1 };
+            }
+        case 'month':
+            return Object.assign(Object.assign({}, pointerDate), { year: pointerDate.year - 1 });
+        case 'year':
+            return Object.assign(Object.assign({}, pointerDate), { year: pointerDate.year - 25 });
+    }
+}
 function todayAsPointerDate() {
     const today = new Date();
     return {
@@ -22432,8 +22463,8 @@ const SixDate$1 = /*@__PURE__*/ proxyCustomElement(class SixDate extends H {
         super();
         this.__registerHost();
         this.__attachShadow();
-        this.sixChange = createEvent(this, "sixChange");
-        this.sixBlur = createEvent(this, "sixBlur");
+        this.sixChange = createEvent(this, "six-change");
+        this.sixBlur = createEvent(this, "six-blur");
         this.eventListeners = new EventListeners();
         /**
          * Current state of the date picker for day, month, or year selection.
@@ -22446,7 +22477,7 @@ const SixDate$1 = /*@__PURE__*/ proxyCustomElement(class SixDate extends H {
          */
         this.language = 'en';
         /**
-         * If `true` the user can only select a date via the component in the popup, but not directly edit the input field.
+         * 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;
         /**
@@ -22457,14 +22488,43 @@ const SixDate$1 = /*@__PURE__*/ proxyCustomElement(class SixDate extends H {
          * Callback to determine which dates in the picker should be selectable.
          */
         this.allowedDates = () => true;
-        /** Dates size. */
+        /**
+         * The size of the date input field.
+         */
         this.size = 'medium';
         /** Set to true to show an asterisk beneath the label. */
         this.required = false;
         /**
-         * The value of the form field, which accepts a date object.
+         * The value of the form field in ISO 8601 date format (yyyy-MM-dd).
+         * Example: '2024-01-01'.
+         *
+         * When an invalid date is provided, it will be replaced with an empty string (''),
+         * matching the behavior of native HTML <input type="date">.
+         *
+         * The displayed format can be customized using the dateFormat property, but the underlying
+         * value will always be stored in ISO format.
          */
         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".
+         *
+         * Available patterns:
+         * - Year: "yyyy" (e.g., "2021")
+         * - Month: "MM" (e.g., "01" for January) or "M" (e.g., "1" for January)
+         * - Day: "dd" (e.g., "08" for the 8th) or "d" (e.g., "8" for the 8th)
+         *
+         * Examples:
+         * - "dd.MM.yyyy" -> "31.01.2024"
+         * - "yyyy-MM-dd" -> "2024-01-31"
+         * - "d.M.yyyy" -> "31.1.2024"
+         * */
+        this.dateFormat = 'dd.MM.yyyy';
         /** The label text. */
         this.label = '';
         /** The input's help text. Alternatively, you can use the help-text slot. */
@@ -22473,56 +22533,16 @@ const SixDate$1 = /*@__PURE__*/ proxyCustomElement(class SixDate extends H {
         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. Defaults to "dd.MM.yyyy".
-         *
-         * Available patterns:
-         * - Year: "yyyy" (e.g., "2021")
-         * - Month: "MM" (e.g., "01" for January, "12" for December)
-         * - Day: "dd" (e.g., "08" for the 8th day of the month)
-         * */
-        this.dateFormat = 'dd.MM.yyyy';
-        /**
-         * 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;
         this.panelHideInProgress = false;
         this.handlePreviousClick = () => {
-            switch (this.selectionMode) {
-                case 'day':
-                    if (this.pointerDate.month === 0) {
-                        this.pointerDate = { year: this.pointerDate.year - 1, month: 11, day: 1 };
-                    }
-                    else {
-                        this.pointerDate = { year: this.pointerDate.year, month: this.pointerDate.month - 1, day: 1 };
-                    }
-                    break;
-                case 'month':
-                    this.pointerDate = Object.assign(Object.assign({}, this.pointerDate), { year: this.pointerDate.year - 1 });
-                    break;
-                case 'year':
-                    this.pointerDate = Object.assign(Object.assign({}, this.pointerDate), { year: this.pointerDate.year - NUMBER_OF_YEARS_SHOWN });
-                    break;
-            }
+            this.pointerDate = previousPointerDate(this.selectionMode, this.pointerDate);
         };
         this.handleNextClick = () => {
-            if (this.selectionMode === 'day') {
-                if (this.pointerDate.month === 11) {
-                    this.pointerDate = { year: this.pointerDate.year + 1, month: 0, day: 1 };
-                }
-                else {
-                    this.pointerDate = { year: this.pointerDate.year, month: this.pointerDate.month + 1, day: 1 };
-                }
-            }
-            else if (this.selectionMode === 'month') {
-                this.pointerDate = Object.assign(Object.assign({}, this.pointerDate), { year: this.pointerDate.year + 1 });
-            }
-            else if (this.selectionMode === 'year') {
-                this.pointerDate = Object.assign(Object.assign({}, this.pointerDate), { year: this.pointerDate.year + NUMBER_OF_YEARS_SHOWN });
-            }
+            this.pointerDate = nextPointerDate(this.selectionMode, this.pointerDate);
         };
         this.handleDocumentMouseDown = (event) => {
             const baseElement = this.getSixInputBaseElement();
@@ -22535,12 +22555,6 @@ const SixDate$1 = /*@__PURE__*/ proxyCustomElement(class SixDate extends H {
                 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;
@@ -22573,14 +22587,18 @@ const SixDate$1 = /*@__PURE__*/ proxyCustomElement(class SixDate extends H {
             }
             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();
@@ -22606,6 +22624,7 @@ const SixDate$1 = /*@__PURE__*/ proxyCustomElement(class SixDate extends H {
         if (warning != null) {
             console.warn(warning);
         }
+        this.updateInputElementValue();
     }
     getSixInputBaseElement() {
         var _a, _b;
@@ -22622,9 +22641,7 @@ const SixDate$1 = /*@__PURE__*/ proxyCustomElement(class SixDate extends H {
         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;
@@ -22647,13 +22664,19 @@ const SixDate$1 = /*@__PURE__*/ proxyCustomElement(class SixDate extends H {
             },
         });
     }
+    updateInputElementValue() {
+        if (this.inputElement && document.activeElement !== this.host) {
+            this.inputElement.value = this.value === '' ? '' : formatDate(this.value, this.dateFormat);
+        }
+    }
     connectedCallback() {
         this.initPopover();
         this.updateValueAndPointerDate();
-        this.eventListeners.forward('sixChange', 'change', this.host);
-        this.eventListeners.forward('sixBlur', 'blur', this.host);
+        this.eventListeners.forward('six-change', 'change', this.host);
+        this.eventListeners.forward('six-blur', 'blur', this.host);
     }
     componentDidLoad() {
+        this.updateInputElementValue();
         this.initPopover();
     }
     disconnectedCallback() {
@@ -22663,7 +22686,7 @@ const SixDate$1 = /*@__PURE__*/ proxyCustomElement(class SixDate extends H {
         this.popoverHelper = undefined;
     }
     render() {
-        return (h("div", { key: 'c265e5d13e1b427ae90518739b636f88d699bb26', class: "container" }, h("six-input", { key: 'f54a006c5dad56772a835fcaf50bd71af6b72012', 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: debounce(this.handleInputChange, this.debounce), onBlur: this.handleOnBlur, "onSix-input-clear": this.handleClearClick, size: this.size, clearable: this.clearable, "aria-describedby": "date-format" }, h("six-icon", { key: 'c439a91f415360095df11777c716458a5a33524a', slot: "prefix", size: this.size === 'large' ? 'medium' : this.size }, "today"), hasSlot(this.host, 'label') ? (h("span", { slot: "label" }, h("slot", { name: "label" }))) : null, hasSlot(this.host, 'error-text') ? (h("span", { slot: "error-text" }, h("slot", { name: "error-text" }))) : null, hasSlot(this.host, 'help-text') ? (h("span", { slot: "help-text" }, h("slot", { name: "help-text" }))) : null), h("span", { key: '429013fa5ab20bc7d43667ca6c806c6f35d36193', id: "date-format", class: "sr-only" }, translateFormatHelp(this.language, this.dateFormat)), h("div", { key: '11cb4223c0a281e81bf8ee6c6094f843e0933dd3', ref: (el) => (this.positioner = el), class: "positioner" }, h("div", { key: 'cd9e835fe163a29f768f73cdb5595112aba3acfb', class: "panel", ref: (el) => (this.panel = el) }, h("header", { key: '32638197c7fbf6c971c4cba86d6ad403d59d8568', class: "panel__header" }, h("six-icon-button", { key: '270c601321d5ab2770db5a3cc38ba5b9e1c0c9c0', tabindex: "-1", class: "previous", onClick: this.handlePreviousClick, name: "arrow_back_ios" }), this.selectionMode === 'day' && (h("div", { key: 'a1b16f14156a6f65f48a56b77dd7f452d3ed2ea5', class: "selector", onClick: () => (this.selectionMode = 'month') }, translateMonth(this.pointerDate.month, this.language), h("six-icon", { key: '0ab2dd455eeca3a7fb8ecd8af15688ec64ce3469' }, "arrow_drop_down"))), this.selectionMode !== 'year' && (h("div", { key: 'd9794772d6992d4e9b67d12443e9f10ac9d89d1d', class: "selector", onClick: () => (this.selectionMode = 'year') }, this.pointerDate.year, h("six-icon", { key: '6f70820606bc8fb7101f64ca41ca90296ba140e7' }, "arrow_drop_down"))), this.selectionMode === 'year' && (h("div", { key: 'b0847793e0ab3baf1f866d8b0f2f777560fbd539', class: "selector" }, this.pointerDate.year - Math.floor(NUMBER_OF_YEARS_SHOWN / 2), " \u2013", ' ', this.pointerDate.year + Math.floor(NUMBER_OF_YEARS_SHOWN / 2))), h("six-icon-button", { key: '0d47af045fa9c8590ade47c4d738410b04b7b552', tabindex: "-1", class: "next", onClick: this.handleNextClick, name: "arrow_forward_ios" })), this.selectionMode === 'day' && (h(DaySelection, { key: '28c7bad7579a206a3bdf8b0bd5325c6613634270', language: this.language, calendarGrid: createCalendarGrid({
+        return (h("div", { key: '915708e6b3815709fbf93546453a1527f0e2f4b2', class: "container" }, h("six-input", { key: '7beac04f73a37fba611860890c02a79d5a065fb6', 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" }, h("six-icon", { key: '88f5d61c8d6af1627be1b9ed5ddf534669cbbedd', slot: "prefix", size: this.size === 'large' ? 'medium' : this.size }, "today"), hasSlot(this.host, 'label') ? (h("span", { slot: "label" }, h("slot", { name: "label" }))) : null, hasSlot(this.host, 'error-text') ? (h("span", { slot: "error-text" }, h("slot", { name: "error-text" }))) : null, hasSlot(this.host, 'help-text') ? (h("span", { slot: "help-text" }, h("slot", { name: "help-text" }))) : null), h("span", { key: '36f359e7ed900e6102444dcbf7e7c22b1aac042d', id: "date-format", class: "sr-only" }, translateFormatHelp(this.language, this.dateFormat)), h("div", { key: '560443132d2dbe1f0f2c147c2d0538eb33c7b76a', ref: (el) => (this.positioner = el), class: "positioner" }, h("div", { key: '800d71554bf415d0e39d40696271791785004e7f', class: "panel", ref: (el) => (this.panel = el) }, h("header", { key: '71baa85fece27f99982e5cb06e15c5d89d81f7a1', class: "panel__header" }, h("six-icon-button", { key: '43274a816945112492cb030012f4ecd0f1c6f5f3', tabindex: "-1", class: "previous", onClick: this.handlePreviousClick, name: "arrow_back_ios" }), this.selectionMode === 'day' && (h("div", { key: '2f391850b72291bfb7249bccf2ccf4aea6387340', class: "selector", onClick: () => (this.selectionMode = 'month') }, translateMonth(this.pointerDate.month, this.language), h("six-icon", { key: '95ea49cd1ccbeec9019491799cefb4d31b846f87' }, "arrow_drop_down"))), this.selectionMode !== 'year' && (h("div", { key: '7d65185d34d64361b8addfac6e3a5eb130fcf6b7', class: "selector", onClick: () => (this.selectionMode = 'year') }, this.pointerDate.year, h("six-icon", { key: 'ab5c06e07a09f945e845902588096ce4f906b5bf' }, "arrow_drop_down"))), this.selectionMode === 'year' && (h("div", { key: '9871ad7e39d18fdd5629b0f9d1caf935952d4ca5', class: "selector" }, this.pointerDate.year - Math.floor(NUMBER_OF_YEARS_SHOWN / 2), " \u2013", ' ', this.pointerDate.year + Math.floor(NUMBER_OF_YEARS_SHOWN / 2))), h("six-icon-button", { key: '20bafd71902a85f3db3c3b54628555b0f86e50aa', tabindex: "-1", class: "next", onClick: this.handleNextClick, name: "arrow_forward_ios" })), this.selectionMode === 'day' && (h(DaySelection, { key: '38e23637ec958abf9615adba7900f4ea6b15f27c', language: this.language, calendarGrid: createCalendarGrid({
                 year: this.pointerDate.year,
                 month: this.pointerDate.month,
                 selected: this.value || undefined,
@@ -22671,7 +22694,7 @@ const SixDate$1 = /*@__PURE__*/ proxyCustomElement(class SixDate extends H {
                 maxDate: this.max,
                 dateFormat: this.dateFormat,
                 allowedDates: this.allowedDates,
-            }), dayClicked: this.handleDayClick })), this.selectionMode === 'month' && (h(MonthSelection, { key: '34f2aafe0f63276c36f867006f4f64344dd41eb8', language: this.language, selected: this.value, monthClicked: this.handleMonthClicked })), this.selectionMode === 'year' && (h(YearSelection, { key: 'b67ead6fc8fc0c50e2e505b896040c605e176155', selected: this.value, pointerYear: this.pointerDate.year, yearCount: NUMBER_OF_YEARS_SHOWN, yearClicked: this.handleYearClicked }))))));
+            }), dayClicked: this.handleDayClick })), this.selectionMode === 'month' && (h(MonthSelection, { key: '10ec980d8a5fc1bf6480a96ee5df66abb9b347cb', language: this.language, selected: this.value, monthClicked: this.handleMonthClicked })), this.selectionMode === 'year' && (h(YearSelection, { key: 'ba791467977c55f80781a20774c5e32951641877', selected: this.value, pointerYear: this.pointerDate.year, yearCount: NUMBER_OF_YEARS_SHOWN, yearClicked: this.handleYearClicked }))))));
     }
     get host() { return this; }
     static get watchers() { return {
@@ -22682,20 +22705,19 @@ const SixDate$1 = /*@__PURE__*/ proxyCustomElement(class SixDate extends H {
         "language": [1],
         "readonly": [4],
         "disabled": [4],
-        "allowedDates": [16],
+        "allowedDates": [16, "allowed-dates"],
         "min": [1],
         "max": [1],
         "size": [1],
         "required": [4],
         "placeholder": [1],
         "value": [1025],
+        "dateFormat": [1, "date-format"],
         "label": [1],
         "helpText": [1, "help-text"],
         "errorText": [1, "error-text"],
         "errorTextCount": [2, "error-text-count"],
         "invalid": [516],
-        "dateFormat": [1, "date-format"],
-        "debounce": [2],
         "name": [513],
         "clearable": [4],
         "pointerDate": [32],