@ds-autonomie/web-components 2.2.0 → 2.3.0

package/dist/chunks/{chunk.JCL6HX6O.js → chunk.2GRTPJX3.js}

@@ -6,7 +6,7 @@ import {
 } from "./chunk.CFUNT7FK.js";
 import {
   LocalizeController
-} from "./chunk.QLA2JXR7.js";
+} from "./chunk.U7ZMMMJ3.js";
 import {
   watch
 } from "./chunk.NOMN6DGD.js";

package/dist/chunks/{chunk.CPCLGC5J.js → chunk.2O3M7HBZ.js}

@@ -14,7 +14,7 @@ import {
 } from "./chunk.HGR7A5FK.js";
 import {
   LocalizeController
-} from "./chunk.QLA2JXR7.js";
+} from "./chunk.U7ZMMMJ3.js";
 import {
   watch
 } from "./chunk.NOMN6DGD.js";

package/dist/chunks/{chunk.XJMGXWLM.js → chunk.2W6FOXSH.js}

@@ -1,6 +1,6 @@
 import {
   checkbox_group_styles_default
-} from "./chunk.6HR34L7E.js";
+} from "./chunk.ODXKNTKC.js";
 import {
   a11yWarning
 } from "./chunk.PWL7QCVG.js";
@@ -41,6 +41,7 @@ var DSACheckboxGroup = class extends ShoelaceElement {
     );
     this.customValidityMessage = "";
     this.hasCheckboxButtons = false;
+    this.hasCheckboxCards = false;
     this.defaultValue = [];
     this.label = "";
     this.helpText = "";
@@ -85,19 +86,18 @@ var DSACheckboxGroup = class extends ShoelaceElement {
     this.formControlController.updateValidity();
   }
   getAllCheckboxes() {
-    return [...this.defaultSlot.assignedElements({ flatten: true })];
+    return [
+      ...this.querySelectorAll("dsa-checkbox, dsa-checkbox-button, dsa-checkbox-card")
+    ];
   }
   handleCheckboxClick(event) {
     if (event.target.tagName.toLowerCase() === "a") {
       return;
     }
-    const target = event.target.closest("dsa-checkbox, dsa-checkbox-button");
+    const target = event.target.closest("dsa-checkbox, dsa-checkbox-button, dsa-checkbox-card");
     event.preventDefault();
     event.stopPropagation();
-    if (!target) {
-      return;
-    }
-    if (target.disabled || target.readonly) {
+    if (!target || target.disabled || target.readonly || this.disabled || this.readonly) {
       return;
     }
     const oldValue = this.value;
@@ -121,7 +121,7 @@ var DSACheckboxGroup = class extends ShoelaceElement {
     const target = event.target;
     if (event.key === " ") {
       event.preventDefault();
-      if (target.disabled || target.readonly) {
+      if (this.disabled || this.readonly || target.disabled || target.readonly) {
         return;
       }
       target.checked = !target.checked;
@@ -132,6 +132,9 @@ var DSACheckboxGroup = class extends ShoelaceElement {
       this.emit("dsa-input");
       this.emit("dsa-change");
     }
+    if (event.key === "Enter" && (this.disabled || this.readonly || target.disabled || target.readonly)) {
+      event.preventDefault();
+    }
   }
   handleLabelClick() {
     const availableCheckboxes = this.getAllCheckboxes().filter(
@@ -142,28 +145,19 @@ var DSACheckboxGroup = class extends ShoelaceElement {
       checkboxToFocus.focus();
     }
   }
-  handleSlottedElementChange() {
+  handleSlotChange() {
     const allCheckboxes = this.getAllCheckboxes();
     allCheckboxes.forEach((checkbox) => {
-      if (this.disabled) {
-        checkbox.disabled = true;
-      }
-      if (this.readonly) {
-        checkbox.readonly = true;
-      }
       checkbox.checked = this.value.includes(checkbox.value);
+      checkbox.parentDisabled = this.disabled;
+      checkbox.parentReadonly = this.readonly;
     });
     this.hasCheckboxButtons = allCheckboxes.some(
       (checkbox) => checkbox.tagName.toLowerCase() === "dsa-checkbox-button"
     );
-  }
-  handleSlotChange() {
-    if (customElements.get("dsa-checkbox") || customElements.get("dsa-checkbox-button")) {
-      this.handleSlottedElementChange();
-    } else {
-      customElements.whenDefined("dsa-checkbox").then(() => this.handleSlotChange());
-      customElements.whenDefined("dsa-checkbox-button").then(() => this.handleSlotChange());
-    }
+    this.hasCheckboxCards = allCheckboxes.some(
+      (checkbox) => checkbox.tagName.toLowerCase() === "dsa-checkbox-card"
+    );
   }
   handleInvalid(event) {
     this.formControlController.setValidity(false);
@@ -175,6 +169,16 @@ var DSACheckboxGroup = class extends ShoelaceElement {
     );
     this.formControlController.setValidity(this.validity.valid);
   }
+  handleDisabledChange() {
+    this.getAllCheckboxes().forEach(
+      (checkbox) => checkbox.parentDisabled = this.disabled
+    );
+  }
+  handleReadonlyChange() {
+    this.getAllCheckboxes().forEach(
+      (checkbox) => checkbox.parentReadonly = this.readonly
+    );
+  }
   handleErrorChange() {
     if (this.error) {
       this.setAttribute("aria-invalid", "true");
@@ -238,7 +242,8 @@ var DSACheckboxGroup = class extends ShoelaceElement {
       "form-control--checkbox-group": true,
       "form-control--has-label": hasLabel,
       "form-control--has-help-text": hasHelpText,
-      "form-control--has-button-group": this.hasCheckboxButtons,
+      "form-control--has-buttons": this.hasCheckboxButtons,
+      "form-control--has-cards": this.hasCheckboxCards,
       "form-control--options-horizontal": !!this.horizontal
     })}
         role="group"
@@ -279,18 +284,13 @@ var DSACheckboxGroup = class extends ShoelaceElement {
             </label>
           </dsa-visually-hidden>
 
-          <div class="checkbox-group__list-container">
-            <div
-              role="list"
-              class=${classMap({
-      "form-control__options": true,
-      "checkbox-group__list--checkbox-buttons": this.hasCheckboxButtons
-    })}
-              @click=${this.handleCheckboxClick}
-              @keydown=${this.handleKeyDown}
-            >
-              <slot @slotchange=${this.handleSlotChange}></slot>
-            </div>
+          <div
+            role="list"
+            class="form-control__options"
+            @click=${this.handleCheckboxClick}
+            @keydown=${this.handleKeyDown}
+          >
+            <slot @slotchange=${this.handleSlotChange}></slot>
           </div>
         </div>
         <slot
@@ -318,6 +318,9 @@ __decorateClass([
 __decorateClass([
   state()
 ], DSACheckboxGroup.prototype, "hasCheckboxButtons", 2);
+__decorateClass([
+  state()
+], DSACheckboxGroup.prototype, "hasCheckboxCards", 2);
 __decorateClass([
   state()
 ], DSACheckboxGroup.prototype, "defaultValue", 2);
@@ -383,6 +386,12 @@ __decorateClass([
 __decorateClass([
   watch("value", { waitUntilFirstUpdate: true })
 ], DSACheckboxGroup.prototype, "handleValueChange", 1);
+__decorateClass([
+  watch("disabled")
+], DSACheckboxGroup.prototype, "handleDisabledChange", 1);
+__decorateClass([
+  watch("readonly")
+], DSACheckboxGroup.prototype, "handleReadonlyChange", 1);
 __decorateClass([
   watch("error")
 ], DSACheckboxGroup.prototype, "handleErrorChange", 1);

package/dist/chunks/{chunk.EQZ4YFRU.js → chunk.3B3226HJ.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk.HRIAHWFV.js";
 import {
   LocalizeController
-} from "./chunk.QLA2JXR7.js";
+} from "./chunk.U7ZMMMJ3.js";
 import {
   ShoelaceElement
 } from "./chunk.XZ5FE34T.js";

package/dist/chunks/{chunk.RWGL6D5U.js → chunk.3EAWXV27.js}

@@ -1,6 +1,6 @@
 import {
   input_styles_default
-} from "./chunk.VNFFOE7Z.js";
+} from "./chunk.CWDSCTUA.js";
 
 // src/components/input-date/input-date.styles.ts
 import { css } from "lit";

package/dist/chunks/{chunk.UEWG3G4R.js → chunk.3HX6HRHC.js}

@@ -1,6 +1,9 @@
 import {
   FormToggleButton
-} from "./chunk.GGXJ2MP3.js";
+} from "./chunk.6KWCQDRD.js";
+import {
+  DSACheckboxGroup
+} from "./chunk.2W6FOXSH.js";
 import {
   watch
 } from "./chunk.NOMN6DGD.js";
@@ -17,11 +20,15 @@ var DSACheckboxButton = class extends FormToggleButton {
   }
   connectedCallback() {
     super.connectedCallback();
-    if (!this.hasAttribute("role")) {
+    const parent = this.parentElement;
+    if (!this.hasAttribute("role") && parent instanceof DSACheckboxGroup) {
       this.setAttribute("role", "listitem");
     }
   }
   handleClick() {
+    if (this.readonly || this.disabled || this.parentDisabled || this.parentReadonly) {
+      return;
+    }
     this.checked = !this.checked;
   }
   handleErrorChange() {

package/dist/chunks/{chunk.5P2EEOC5.js → chunk.3NNE7XGI.js}

@@ -1,6 +1,6 @@
 import {
   form_control_styles_default
-} from "./chunk.QDKQMUIQ.js";
+} from "./chunk.EIZK62ST.js";
 import {
   component_styles_default
 } from "./chunk.TUVJKY7S.js";
@@ -84,7 +84,7 @@ var input_otp_styles_default = css`
   .single-field__value {
     display: flex;
     justify-content: center;
-    width: var(--dsa-wc-input-otp-single-field-width);
+    width: var(--dsa-wc-input-otp-single-field-value-width);
   }
   .single-field--active .single-field__value {
     background-color: var(

package/dist/chunks/{chunk.FQB6S2KS.js → chunk.3SX7AERB.js}

@@ -15,7 +15,7 @@ import {
 } from "./chunk.HGR7A5FK.js";
 import {
   LocalizeController
-} from "./chunk.QLA2JXR7.js";
+} from "./chunk.U7ZMMMJ3.js";
 import {
   watch
 } from "./chunk.NOMN6DGD.js";

package/dist/chunks/{chunk.L3LZ4MKX.js → chunk.4P7DDUA4.js}

@@ -3,10 +3,10 @@ import {
 } from "./chunk.O4MZVDWB.js";
 import {
   FormControlLayout
-} from "./chunk.I5HR7JYK.js";
+} from "./chunk.5EBCNG2J.js";
 import {
   combobox_styles_default
-} from "./chunk.FQMS24GI.js";
+} from "./chunk.WB2DWTAB.js";
 import {
   scrollIntoView
 } from "./chunk.EMIT7S33.js";
@@ -29,7 +29,7 @@ import {
 } from "./chunk.HGR7A5FK.js";
 import {
   LocalizeController
-} from "./chunk.QLA2JXR7.js";
+} from "./chunk.U7ZMMMJ3.js";
 import {
   watch
 } from "./chunk.NOMN6DGD.js";

package/dist/chunks/{chunk.WRPRKCVY.js → chunk.52V3WTR3.js}

@@ -1,15 +1,15 @@
 import {
   DSAOption
-} from "./chunk.2VH3OZ2T.js";
+} from "./chunk.K53YJ3XK.js";
+import {
+  DSAInput
+} from "./chunk.O4WGPUE5.js";
 import {
   filter_select_styles_default
 } from "./chunk.OOZC4AR2.js";
-import {
-  DSAInput
-} from "./chunk.H3FSR35C.js";
 import {
   FilterBase
-} from "./chunk.FQB6S2KS.js";
+} from "./chunk.3SX7AERB.js";
 import {
   normalizeStr
 } from "./chunk.O4MZVDWB.js";

package/dist/chunks/{chunk.LGA24XY2.js → chunk.54KX7M52.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk.XSXVVUKP.js";
 import {
   LocalizeController
-} from "./chunk.QLA2JXR7.js";
+} from "./chunk.U7ZMMMJ3.js";
 import {
   ShoelaceElement
 } from "./chunk.XZ5FE34T.js";

package/dist/chunks/{chunk.I5HR7JYK.js → chunk.5EBCNG2J.js}

@@ -50,6 +50,8 @@ var FormControlLayout = class extends ShoelaceElement {
   renderCounter() {
     return html``;
   }
+  handleLabelClick() {
+  }
   render() {
     const hasLabelSlot = this.hasSlotController.test("label");
     const hasHelpTextSlot = this.hasSlotController.test("help-text");
@@ -79,6 +81,7 @@ var FormControlLayout = class extends ShoelaceElement {
             class='form-control__label'
             for="input"
             aria-hidden=${ifDefined(hasLabel ? void 0 : "true")}
+            @click=${this.handleLabelClick}
           >
             ${this.required ? html`<span class="form-control__label-required">*</span>` : ""}
             <slot name="label">${this.label}</slot>

package/dist/chunks/{chunk.IZDRWFAB.js → chunk.5NUQTJJR.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk.EI563TWV.js";
 import {
   LocalizeController
-} from "./chunk.QLA2JXR7.js";
+} from "./chunk.U7ZMMMJ3.js";
 import {
   watch
 } from "./chunk.NOMN6DGD.js";