@ds-autonomie/web-components 2.19.0 → 2.21.0

package/dist/chunks/{chunk.H4WJ64X5.js → chunk.KGP2JSZ7.js}

@@ -1,9 +1,9 @@
 import {
   input_otp_styles_default
-} from "./chunk.EMPEBDHH.js";
+} from "./chunk.ADVAWXPE.js";
 import {
   InputBase
-} from "./chunk.WMFEJDPX.js";
+} from "./chunk.7HMEK2ND.js";
 import {
   ifDefinedAndNotEmpty
 } from "./chunk.ZQJVCRB2.js";
@@ -32,70 +32,79 @@ var DSAInputOTP = class extends InputBase {
     this.emit("dsa-focus");
   }
   handleInput(event) {
-    var _a;
-    if (this.patternRegexp && !this.patternRegexp.test(this.input.value)) {
+    const inputValue = this.input.value;
+    if (this.patternRegexp && !this.patternRegexp.test(inputValue)) {
       this.input.value = this.value;
       this.handleCurrentIndexChange();
       return;
     }
-    if (this.input.value.length > this.length) {
-      this.input.value = this.input.value.slice(0, this.length);
-    } else {
-      this.value = this.input.value;
-      if (!event.data) {
-        if (this.currentIndex === 0) {
-          this.handleCurrentIndexChange();
-        } else if (this.currentIndex === -1) {
-          this.currentIndex = 0;
-        } else {
-          this.currentIndex -= 1;
-        }
+    this.value = inputValue.length > this.length ? inputValue.slice(0, this.length) : inputValue;
+    if (this.value !== inputValue) {
+      this.input.value = this.value;
+    }
+    if (!event.data) {
+      if (this.currentIndex === 0) {
+        this.handleCurrentIndexChange();
+      } else if (this.currentIndex === -1) {
+        this.currentIndex = 0;
       } else {
-        if (((_a = event.data) == null ? void 0 : _a.length) === 1) {
-          this.currentIndex = this.currentIndex < this.length ? this.currentIndex + 1 : this.length - 1;
-        } else {
-          this.currentIndex = this.getLastIndex();
-        }
+        this.currentIndex -= 1;
       }
-      this.formControlController.updateValidity();
-      this.emit("dsa-input");
+    } else if (event.data.length === 1) {
+      this.currentIndex = this.currentIndex < this.length ? this.currentIndex + 1 : this.length - 1;
+    } else {
+      this.currentIndex = this.getLastIndex();
     }
+    this.formControlController.updateValidity();
+    this.emit("dsa-input");
   }
   handleSelect() {
-    if (this.input.value.length > 1 && this.input.selectionStart === 0 && this.input.selectionEnd === this.input.value.length) {
+    const input = this.input;
+    if (input.value.length > 1 && input.selectionStart === 0 && input.selectionEnd === input.value.length) {
       this.currentIndex = -1;
     }
   }
   handleKeyDown(event) {
     super.handleKeyDown(event);
-    if (["ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown"].includes(event.key)) {
-      event.preventDefault();
-      switch (event.key) {
-        case "ArrowLeft":
-          this.currentIndex = this.currentIndex > 0 ? this.currentIndex - 1 : 0;
-          break;
-        case "ArrowRight":
-          if (this.currentIndex === -1) {
-            this.currentIndex = this.getLastIndex();
-          } else if (this.currentIndex < this.value.length && this.currentIndex < this.length - 1) {
-            this.currentIndex += 1;
-          }
-          break;
-        case "ArrowUp":
-          this.currentIndex = 0;
-          break;
-        case "ArrowDown":
+    switch (event.key) {
+      case "ArrowLeft":
+        event.preventDefault();
+        this.currentIndex = this.currentIndex > 0 ? this.currentIndex - 1 : 0;
+        break;
+      case "ArrowRight":
+        event.preventDefault();
+        if (this.currentIndex === -1) {
           this.currentIndex = this.getLastIndex();
-          break;
-      }
+        } else if (this.currentIndex < this.value.length && this.currentIndex < this.length - 1) {
+          this.currentIndex += 1;
+        }
+        break;
+      case "ArrowUp":
+        event.preventDefault();
+        this.currentIndex = 0;
+        break;
+      case "ArrowDown":
+        event.preventDefault();
+        this.currentIndex = this.getLastIndex();
+        break;
+      default:
+        break;
     }
   }
   handleSingleFieldClick(event) {
+    var _a;
+    const clickedField = (_a = event.target) == null ? void 0 : _a.closest(
+      ".single-field"
+    );
+    if (!clickedField || !this.renderRoot.contains(clickedField)) {
+      return;
+    }
     this.focus();
-    if (event.currentTarget instanceof HTMLElement) {
-      const clickedIndex = Number(event.currentTarget.dataset.fieldIndex);
-      this.currentIndex = clickedIndex < this.value.length ? clickedIndex : this.getLastIndex();
+    const clickedIndex = Number(clickedField.dataset.fieldIndex);
+    if (Number.isNaN(clickedIndex)) {
+      return;
     }
+    this.currentIndex = clickedIndex < this.value.length ? clickedIndex : this.getLastIndex();
   }
   getLastIndex() {
     return this.value.length > 0 ? Math.min(this.value.length, this.length - 1) : 0;
@@ -115,19 +124,14 @@ var DSAInputOTP = class extends InputBase {
     return result;
   }
   renderSingleField(index) {
-    const charValue = this.value.split("")[index];
+    const charValue = this.value.charAt(index);
     const isCurrentField = this.currentIndex === index || this.currentIndex === -1 && charValue;
     const inputClasses = classMap({
       "single-field": true,
       "single-field--active": this.hasFocus && isCurrentField
     });
     return html`
-      <div
-        class=${inputClasses}
-        data-field-index=${index}
-        aria-hidden="true"
-        @click=${this.handleSingleFieldClick}
-      >
+      <div class=${inputClasses} data-field-index=${index} aria-hidden="true">
         ${charValue || this.hasFocus && isCurrentField ? html`<span class="single-field__value">${charValue}</span>` : html`
               <span class="single-field__placeholder"
                 >${this.placeholder.charAt(0)}</span
@@ -158,6 +162,7 @@ var DSAInputOTP = class extends InputBase {
       "input--on-base": this.variant === "base",
       "input--disabled": this.disabled
     })}
+          @click=${this.handleSingleFieldClick}
         >
           ${Array.from(Array(this.length)).map(
       (_, index) => this.renderSingleField(index)

package/dist/chunks/{chunk.FLRNIL37.js → chunk.KN6JQY6O.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk.N54TKSON.js";
 import {
   LocalizeController
-} from "./chunk.34HS7ICN.js";
+} from "./chunk.DVIHNMQQ.js";
 import {
   ShoelaceElement
 } from "./chunk.SVWU6JW4.js";

package/dist/chunks/{chunk.4VSGAJJL.js → chunk.KOO2JWHZ.js}

@@ -1,6 +1,6 @@
 import {
   DSAFilterButton
-} from "./chunk.GTO6NACR.js";
+} from "./chunk.FLCLDNUC.js";
 import {
   DSAPopup
 } from "./chunk.GYWU4AAB.js";
@@ -24,7 +24,7 @@ import {
 } from "./chunk.PWL7QCVG.js";
 import {
   LocalizeController
-} from "./chunk.34HS7ICN.js";
+} from "./chunk.DVIHNMQQ.js";
 import {
   watch
 } from "./chunk.QB2NJE2Y.js";

package/dist/chunks/{chunk.XZU6MLWO.js → chunk.LBLBASKK.js}

@@ -1,9 +1,9 @@
 import {
   textarea_styles_default
-} from "./chunk.EGJGLON7.js";
+} from "./chunk.VRUSJUXU.js";
 import {
   FormControlLayout
-} from "./chunk.RVUUZ3KA.js";
+} from "./chunk.RLLACUYR.js";
 import {
   defaultValue
 } from "./chunk.CMJ2SRTL.js";
@@ -96,15 +96,21 @@ var DSATextarea = class extends FormControlLayout {
       this.input.style.height = "auto";
       this.input.style.height = `${this.input.scrollHeight}px`;
     } else {
-      this.input.style.height = void 0;
+      if (this.input.style.height !== "") {
+        this.input.style.removeProperty("height");
+      }
     }
   }
   getDescriptionIds() {
-    let ids = [];
-    if (this.error) ids = ["error-text"];
-    ids = [...ids, "help-text"];
-    if (this.maxlength && this.counter) ids = [...ids, "counter"];
-    ids = [...ids, "description"];
+    const ids = [];
+    if (this.error) {
+      ids.push("error-text");
+    }
+    ids.push("help-text");
+    if (this.maxlength && this.counter) {
+      ids.push("counter");
+    }
+    ids.push("description");
     return ids.join(" ");
   }
   handleDisabledChange() {

package/dist/chunks/{chunk.FZFK3D6L.js → chunk.LUN6HLAE.js}

@@ -3,13 +3,13 @@ import {
 } from "./chunk.HF7GESMZ.js";
 import {
   split_panel_styles_default
-} from "./chunk.CFUNT7FK.js";
+} from "./chunk.TXX2YIZA.js";
 import {
   LocalizeController
-} from "./chunk.34HS7ICN.js";
+} from "./chunk.DVIHNMQQ.js";
 import {
   DSAIcon
-} from "./chunk.CKJJ4MSU.js";
+} from "./chunk.YPBLUIU7.js";
 import {
   watch
 } from "./chunk.QB2NJE2Y.js";
@@ -56,15 +56,27 @@ function drag(container, options) {
 }
 
 // src/components/split-panel/split-panel.ts
+var ARROW_KEYS = /* @__PURE__ */ new Set([
+  "ArrowLeft",
+  "ArrowRight",
+  "ArrowUp",
+  "ArrowDown",
+  "Home",
+  "End"
+]);
 var DSASplitPanel = class extends ShoelaceElement {
   constructor() {
     super(...arguments);
     this.localize = new LocalizeController(this);
+    this.snapValues = [];
     this.position = 50;
     this.vertical = false;
     this.disabled = false;
     this.snapThreshold = 12;
   }
+  handleSnapChange() {
+    this.snapValues = this.snap ? this.snap.split(" ") : [];
+  }
   connectedCallback() {
     super.connectedCallback();
     this.resizeObserver = new ResizeObserver(
@@ -90,7 +102,6 @@ var DSASplitPanel = class extends ShoelaceElement {
     return value / this.size * 100;
   }
   handleDrag(event) {
-    const isRtl = this.localize.dir() === "rtl";
     if (this.disabled) {
       return;
     }
@@ -104,17 +115,13 @@ var DSASplitPanel = class extends ShoelaceElement {
           newPositionInPixels = this.size - newPositionInPixels;
         }
         if (this.snap) {
-          const snaps = this.snap.split(" ");
-          snaps.forEach((value) => {
+          this.snapValues.forEach((value) => {
             let snapPoint;
             if (value.endsWith("%")) {
               snapPoint = this.size * (parseFloat(value) / 100);
             } else {
               snapPoint = parseFloat(value);
             }
-            if (isRtl && !this.vertical) {
-              snapPoint = this.size - snapPoint;
-            }
             if (newPositionInPixels >= snapPoint - this.snapThreshold && newPositionInPixels <= snapPoint + this.snapThreshold) {
               newPositionInPixels = snapPoint;
             }
@@ -133,14 +140,7 @@ var DSASplitPanel = class extends ShoelaceElement {
     if (this.disabled) {
       return;
     }
-    if ([
-      "ArrowLeft",
-      "ArrowRight",
-      "ArrowUp",
-      "ArrowDown",
-      "Home",
-      "End"
-    ].includes(event.key)) {
+    if (ARROW_KEYS.has(event.key)) {
       let newPosition = this.position;
       const incr = (event.shiftKey ? 10 : 1) * (this.primary === "end" ? -1 : 1);
       event.preventDefault();
@@ -187,7 +187,6 @@ var DSASplitPanel = class extends ShoelaceElement {
   render() {
     const gridTemplate = this.vertical ? "gridTemplateRows" : "gridTemplateColumns";
     const gridTemplateAlt = this.vertical ? "gridTemplateColumns" : "gridTemplateRows";
-    const isRtl = this.localize.dir() === "rtl";
     const primary = `
       clamp(
         0%,
@@ -200,19 +199,8 @@ var DSASplitPanel = class extends ShoelaceElement {
       )
     `;
     const secondary = "auto";
-    if (this.primary === "end") {
-      if (isRtl && !this.vertical) {
-        this.style[gridTemplate] = `${primary} var(--divider-width) ${secondary}`;
-      } else {
-        this.style[gridTemplate] = `${secondary} var(--divider-width) ${primary}`;
-      }
-    } else {
-      if (isRtl && !this.vertical) {
-        this.style[gridTemplate] = `${secondary} var(--divider-width) ${primary}`;
-      } else {
-        this.style[gridTemplate] = `${primary} var(--divider-width) ${secondary}`;
-      }
-    }
+    const invertPanels = this.primary === "end";
+    this.style[gridTemplate] = invertPanels ? `${secondary} var(--divider-width) ${primary}` : `${primary} var(--divider-width) ${secondary}`;
     this.style[gridTemplateAlt] = "";
     return html`
       <slot name="start" part="panel start" class="start"></slot>
@@ -264,6 +252,9 @@ __decorateClass([
 __decorateClass([
   property()
 ], DSASplitPanel.prototype, "snap", 2);
+__decorateClass([
+  watch("snap")
+], DSASplitPanel.prototype, "handleSnapChange", 1);
 __decorateClass([
   property({ type: Number, attribute: "snap-threshold" })
 ], DSASplitPanel.prototype, "snapThreshold", 2);

package/dist/chunks/{chunk.ZFGRB56M.js → chunk.LVSZUO34.js}

@@ -7,12 +7,9 @@ import {
 import {
   scrollIntoView
 } from "./chunk.EMIT7S33.js";
-import {
-  setAttributeIfDifferent
-} from "./chunk.PSYTLBRK.js";
 import {
   DSAIconButton
-} from "./chunk.WNESPUKK.js";
+} from "./chunk.2GTXVMMC.js";
 import {
   a11yWarning
 } from "./chunk.PWL7QCVG.js";
@@ -21,7 +18,10 @@ import {
 } from "./chunk.ZQJVCRB2.js";
 import {
   LocalizeController
-} from "./chunk.34HS7ICN.js";
+} from "./chunk.DVIHNMQQ.js";
+import {
+  setAttributeIfDifferent
+} from "./chunk.PSYTLBRK.js";
 import {
   watch
 } from "./chunk.QB2NJE2Y.js";

package/dist/chunks/{chunk.7BBNETYY.js → chunk.M347TELO.js}

@@ -1,12 +1,12 @@
-import {
-  FilterBase
-} from "./chunk.4VSGAJJL.js";
 import {
   filter_date_styles_default
-} from "./chunk.SRLGPXHB.js";
+} from "./chunk.IJYHCSO5.js";
+import {
+  FilterBase
+} from "./chunk.KOO2JWHZ.js";
 import {
   DSACalendar
-} from "./chunk.DN3K2GHZ.js";
+} from "./chunk.MRGJKLE3.js";
 import {
   formatDateRange,
   getDateFromISO,
@@ -17,10 +17,10 @@ import {
 } from "./chunk.OYVF3HNG.js";
 import {
   DSAButton
-} from "./chunk.SXFVCR7O.js";
+} from "./chunk.2G35OVLZ.js";
 import {
   DSAIconButton
-} from "./chunk.WNESPUKK.js";
+} from "./chunk.2GTXVMMC.js";
 import {
   a11yWarning
 } from "./chunk.PWL7QCVG.js";
@@ -29,7 +29,7 @@ import {
 } from "./chunk.ZQJVCRB2.js";
 import {
   DSAIcon
-} from "./chunk.CKJJ4MSU.js";
+} from "./chunk.YPBLUIU7.js";
 import {
   watch
 } from "./chunk.QB2NJE2Y.js";

package/dist/chunks/{chunk.XL3HVVDK.js → chunk.M47YUO2L.js}

@@ -9,7 +9,7 @@ import {
 } from "./chunk.PWL7QCVG.js";
 import {
   DSAIcon
-} from "./chunk.CKJJ4MSU.js";
+} from "./chunk.YPBLUIU7.js";
 import {
   ShoelaceElement
 } from "./chunk.SVWU6JW4.js";

package/dist/chunks/{chunk.6HSTAJNR.js → chunk.M6X2ZDO6.js}

@@ -71,6 +71,7 @@ var download_link_styles_default = css`
     outline-offset: var(--dsa-wc-focus-ring-offset);
     border-radius: var(--dsa-wc-focus-ring-radius);
   }
+
   .document-link--x-large {
     font: var(--dsa-wc-link-font-x-large);
     --icon-size: var(--dsa-wc-download-link-icon-size--xlarge);
@@ -105,8 +106,7 @@ var download_link_styles_default = css`
 
   .document-info {
     color: var(--dsa-wc-link-document-info-on-base-color);
-    margin-top: var(--dsa-spacing-8);
-    margin-bottom: 0;
+    margin-block: var(--dsa-spacing-8) 0;
     pointer-events: none;
   }
   .document-info--on-layer {

package/dist/chunks/{chunk.DN3K2GHZ.js → chunk.MRGJKLE3.js}

@@ -7,7 +7,7 @@ import {
 } from "./chunk.LJ2VCS7Q.js";
 import {
   LocalizeController
-} from "./chunk.34HS7ICN.js";
+} from "./chunk.DVIHNMQQ.js";
 import {
   watch
 } from "./chunk.QB2NJE2Y.js";

package/dist/chunks/{chunk.YKL22V4E.js → chunk.N2V4KI76.js}

@@ -1,6 +1,6 @@
 import {
   footer_sitemap_styles_default
-} from "./chunk.JVIWPP43.js";
+} from "./chunk.IEYQPZRM.js";
 import {
   HasSlotController
 } from "./chunk.YIY5RM53.js";

package/dist/chunks/{chunk.UQ7ZIOBO.js → chunk.N2XNANRE.js}

@@ -24,10 +24,10 @@ import {
 } from "./chunk.PWL7QCVG.js";
 import {
   LocalizeController
-} from "./chunk.34HS7ICN.js";
+} from "./chunk.DVIHNMQQ.js";
 import {
   DSAIcon
-} from "./chunk.CKJJ4MSU.js";
+} from "./chunk.YPBLUIU7.js";
 import {
   watch
 } from "./chunk.QB2NJE2Y.js";

package/dist/chunks/{chunk.YMBSK45L.js → chunk.NBEDK6M4.js}

@@ -81,6 +81,7 @@ var page_header_styles_default = css`
   .tags {
     display: flex;
     gap: var(--dsa-spacing-12);
+    flex-wrap: wrap;
   }
 
   .text-second-line {
@@ -106,6 +107,7 @@ var page_header_styles_default = css`
   .actions {
     display: flex;
     gap: var(--dsa-spacing-16);
+    flex-wrap: wrap;
   }
 
   /* 

package/dist/chunks/{chunk.34BCRRRT.js → chunk.NTKYNRVQ.js}

@@ -1,6 +1,6 @@
 import {
   file_upload_item_styles_default
-} from "./chunk.RU7L7OSM.js";
+} from "./chunk.ESWLZEFC.js";
 import {
   renderFormElementErrors
 } from "./chunk.6QDM5FUA.js";
@@ -30,6 +30,7 @@ var DSAFileUploadItem = class extends ShoelaceElement {
     this.size = "medium";
     this.error = false;
     this.errorMessage = "";
+    this.labelText = "";
   }
   connectedCallback() {
     super.connectedCallback();
@@ -41,8 +42,12 @@ var DSAFileUploadItem = class extends ShoelaceElement {
     event.stopPropagation();
     this.emit("dsa-clear");
   }
-  handleDefaultSlotChange() {
-    this.labelText = this.innerText;
+  handleDefaultSlotChange(event) {
+    const slot = event.target;
+    this.labelText = slot.assignedNodes({ flatten: true }).map((node) => {
+      var _a;
+      return (_a = node.textContent) != null ? _a : "";
+    }).join("").trim();
   }
   render() {
     var _a;

package/dist/chunks/{chunk.ERMNNF77.js → chunk.ORAH2BHK.js}

@@ -1,6 +1,6 @@
 import {
   DSAIconButton
-} from "./chunk.WNESPUKK.js";
+} from "./chunk.2GTXVMMC.js";
 import {
   waitForEvent
 } from "./chunk.B4BZKR24.js";
@@ -17,10 +17,10 @@ import {
 } from "./chunk.PWL7QCVG.js";
 import {
   LocalizeController
-} from "./chunk.34HS7ICN.js";
+} from "./chunk.DVIHNMQQ.js";
 import {
   DSAIcon
-} from "./chunk.CKJJ4MSU.js";
+} from "./chunk.YPBLUIU7.js";
 import {
   watch
 } from "./chunk.QB2NJE2Y.js";

package/dist/chunks/{chunk.3SAKVK56.js → chunk.P57KFF6A.js}

@@ -1,9 +1,9 @@
 import {
   download_card_styles_default
-} from "./chunk.TLQMWL6I.js";
+} from "./chunk.67J6LDJW.js";
 import {
   DSAIcon
-} from "./chunk.CKJJ4MSU.js";
+} from "./chunk.YPBLUIU7.js";
 import {
   ShoelaceElement
 } from "./chunk.SVWU6JW4.js";
@@ -12,12 +12,19 @@ import {
 } from "./chunk.N3L4GIUO.js";
 
 // src/components/download-card/download-card.ts
-import { html } from "lit";
+import { html, nothing } from "lit";
 import { customElement, property } from "lit/decorators.js";
 var DSADownloadCard = class extends ShoelaceElement {
   constructor() {
     super(...arguments);
     this.href = "";
+    this.cachedDocumentInfo = "";
+  }
+  willUpdate(changedProperties) {
+    var _a, _b;
+    if (changedProperties.has("format") || changedProperties.has("documentSize")) {
+      this.cachedDocumentInfo = this.format && this.documentSize ? `${this.format} - ${this.documentSize}` : ((_a = this.format) != null ? _a : "") + ((_b = this.documentSize) != null ? _b : "");
+    }
   }
   handleFocus() {
     this.emit("dsa-focus");
@@ -37,10 +44,8 @@ var DSADownloadCard = class extends ShoelaceElement {
         <slot name="image" part="image"></slot>
         <div part="content">
           <slot></slot>
-          ${this.description ? html` <p part="description">${this.description}</p> ` : ""}
-          <p part="document-info">
-            ${this.format}${this.format && this.documentSize ? " - " : ""}${this.documentSize}
-          </p>
+          ${this.description ? html` <p part="description">${this.description}</p> ` : nothing}
+          <p part="document-info">${this.cachedDocumentInfo}</p>
         </div>
         <dsa-icon part="icon" name="download" library="system"></dsa-icon>
       </a>