@ds-autonomie/web-components 2.1.0 → 2.3.0

package/dist/chunks/{chunk.P4HRQ2D7.js → chunk.D6SKE3AF.js}

@@ -1,9 +1,9 @@
 import {
   textarea_styles_default
-} from "./chunk.IPUOJRFA.js";
+} from "./chunk.IIYPN5OC.js";
 import {
   FormControlLayout
-} from "./chunk.T4BUHP4L.js";
+} from "./chunk.5EBCNG2J.js";
 import {
   defaultValue
 } from "./chunk.CMJ2SRTL.js";

package/dist/chunks/{chunk.6ZAEF56K.js → chunk.DB3EDROT.js}

@@ -24,7 +24,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.RZT42FVN.js → chunk.DIM7WDHO.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.7DBNKQ7N.js → chunk.DLACE2NU.js}

@@ -1,6 +1,6 @@
 import {
   file_upload_styles_default
-} from "./chunk.CQHOJJEI.js";
+} from "./chunk.B2KV6DSI.js";
 import {
   renderFormElementErrors
 } from "./chunk.IZBHR7GP.js";
@@ -9,7 +9,7 @@ import {
 } from "./chunk.YIY5RM53.js";
 import {
   LocalizeController
-} from "./chunk.QLA2JXR7.js";
+} from "./chunk.U7ZMMMJ3.js";
 import {
   watch
 } from "./chunk.NOMN6DGD.js";

package/dist/chunks/{chunk.W7TI3W77.js → chunk.DLE3F4GC.js}

@@ -1,6 +1,6 @@
 import {
   LocalizeController
-} from "./chunk.QLA2JXR7.js";
+} from "./chunk.U7ZMMMJ3.js";
 import {
   ShoelaceElement
 } from "./chunk.XZ5FE34T.js";

package/dist/chunks/chunk.E45DVVIM.js

@@ -0,0 +1,271 @@
+import {
+  switch_styles_default
+} from "./chunk.VKIBAACD.js";
+import {
+  defaultValue
+} from "./chunk.CMJ2SRTL.js";
+import {
+  form_control_styles_default
+} from "./chunk.EIZK62ST.js";
+import {
+  FormControlController
+} from "./chunk.JA7YFGLI.js";
+import {
+  LocalizeController
+} from "./chunk.U7ZMMMJ3.js";
+import {
+  watch
+} from "./chunk.NOMN6DGD.js";
+import {
+  ShoelaceElement
+} from "./chunk.XZ5FE34T.js";
+import {
+  component_styles_default
+} from "./chunk.TUVJKY7S.js";
+import {
+  __decorateClass
+} from "./chunk.S3NI7NKU.js";
+
+// src/components/switch/switch.ts
+import { html } from "lit";
+import { customElement, property, query, state } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.js";
+import { ifDefined } from "lit/directives/if-defined.js";
+import { live } from "lit/directives/live.js";
+var DSASwitch = class extends ShoelaceElement {
+  constructor() {
+    super(...arguments);
+    this.formControlController = new FormControlController(this, {
+      value: (control) => control.checked ? control.value || "on" : void 0,
+      defaultValue: (control) => control.defaultChecked,
+      setValue: (control, checked) => control.checked = checked
+    });
+    this.localize = new LocalizeController(this);
+    this.hasFocus = false;
+    this.name = "";
+    this.size = "medium";
+    this.disabled = false;
+    this.readonly = false;
+    this.checked = false;
+    this.defaultChecked = false;
+    this.form = "";
+    this.required = false;
+    this.onLabel = this.localize.term("switchOn");
+    this.offLabel = this.localize.term("switchOff");
+  }
+  /** Gets the validity state object */
+  get validity() {
+    return this.input.validity;
+  }
+  /** Gets the validation message */
+  get validationMessage() {
+    return this.input.validationMessage;
+  }
+  firstUpdated() {
+    this.formControlController.updateValidity();
+  }
+  handleBlur() {
+    this.hasFocus = false;
+    this.emit("dsa-blur");
+  }
+  handleInput() {
+    this.emit("dsa-input");
+  }
+  handleInvalid(event) {
+    this.formControlController.setValidity(false);
+    this.formControlController.emitInvalidEvent(event);
+  }
+  handleClick() {
+    if (this.readonly) {
+      return;
+    }
+    this.checked = !this.checked;
+    this.emit("dsa-change");
+  }
+  handleFocus() {
+    this.hasFocus = true;
+    this.emit("dsa-focus");
+  }
+  handleKeyDown(event) {
+    if (this.readonly) {
+      return;
+    }
+    if (event.key === "Enter") {
+      event.preventDefault();
+      this.checked = !this.checked;
+      this.emit("dsa-change");
+      this.emit("dsa-input");
+    }
+    if (event.key === "ArrowLeft") {
+      event.preventDefault();
+      this.checked = false;
+      this.emit("dsa-change");
+      this.emit("dsa-input");
+    }
+    if (event.key === "ArrowRight") {
+      event.preventDefault();
+      this.checked = true;
+      this.emit("dsa-change");
+      this.emit("dsa-input");
+    }
+  }
+  handleCheckedChange() {
+    this.input.checked = this.checked;
+    this.formControlController.updateValidity();
+  }
+  handleDisabledChange() {
+    this.formControlController.setValidity(true);
+  }
+  /** Simulates a click on the switch. */
+  click() {
+    this.input.click();
+  }
+  /** Sets focus on the switch. */
+  focus(options) {
+    this.input.focus(options);
+  }
+  /** Removes focus from the switch. */
+  blur() {
+    this.input.blur();
+  }
+  /** Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid. */
+  checkValidity() {
+    return this.input.checkValidity();
+  }
+  /** Gets the associated form, if one exists. */
+  getForm() {
+    return this.formControlController.getForm();
+  }
+  /** Checks for validity and shows the browser's validation message if the control is invalid. */
+  reportValidity() {
+    return this.input.reportValidity();
+  }
+  /** Sets a custom validation message. Pass an empty string to restore validity. */
+  setCustomValidity(message) {
+    this.input.setCustomValidity(message);
+    this.formControlController.updateValidity();
+  }
+  render() {
+    return html`
+      <div
+        class=${classMap({
+      "form-control": true,
+      "form-control--small": this.size === "small",
+      "form-control--medium": this.size === "medium",
+      "form-control--large": this.size === "large"
+    })}
+      >
+        <label
+          part="base"
+          class=${classMap({
+      switch: true,
+      "switch--checked": this.checked,
+      "switch--disabled": this.disabled,
+      "switch--readonly": this.readonly,
+      "switch--focused": this.hasFocus,
+      "switch--small": this.size === "small",
+      "switch--medium": this.size === "medium",
+      "switch--large": this.size === "large"
+    })}
+        >
+          <div part="label" class="switch__label">
+            ${this.required ? html`<span class="switch__label-required">*</span>` : ""}
+            <slot></slot>
+          </div>
+
+          <div class="switch__indicator">
+            <input
+              class="switch__input"
+              type="checkbox"
+              name=${this.name}
+              value=${ifDefined(this.value)}
+              .checked=${live(this.checked)}
+              .disabled=${this.disabled}
+              .required=${this.required}
+              role="switch"
+              aria-checked=${this.checked ? "true" : "false"}
+              aria-disabled=${ifDefined(
+      this.disabled || this.readonly ? "true" : void 0
+    )}
+              @click=${this.handleClick}
+              @input=${this.handleInput}
+              @invalid=${this.handleInvalid}
+              @blur=${this.handleBlur}
+              @focus=${this.handleFocus}
+              @keydown=${this.handleKeyDown}
+            />
+
+            <span part="control" class="switch__control">
+              <span part="thumb" class="switch__thumb">
+                <dsa-icon
+                  class="switch__checked-icon"
+                  name="done"
+                  library="system"
+                ></dsa-icon>
+              </span>
+            </span>
+
+            <div class="switch__state" aria-hidden="true">
+              <span class="switch__state-placeholder">${this.onLabel}</span>
+              <span class="switch__state-placeholder">${this.offLabel}</span>
+              ${this.checked ? this.onLabel : this.offLabel}
+            </div>
+          </div>
+        </label>
+      </div>
+    `;
+  }
+};
+DSASwitch.styles = [component_styles_default, form_control_styles_default, switch_styles_default];
+__decorateClass([
+  query('input[type="checkbox"]')
+], DSASwitch.prototype, "input", 2);
+__decorateClass([
+  state()
+], DSASwitch.prototype, "hasFocus", 2);
+__decorateClass([
+  property()
+], DSASwitch.prototype, "name", 2);
+__decorateClass([
+  property()
+], DSASwitch.prototype, "value", 2);
+__decorateClass([
+  property({ reflect: true })
+], DSASwitch.prototype, "size", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], DSASwitch.prototype, "disabled", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], DSASwitch.prototype, "readonly", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], DSASwitch.prototype, "checked", 2);
+__decorateClass([
+  defaultValue("checked")
+], DSASwitch.prototype, "defaultChecked", 2);
+__decorateClass([
+  property({ reflect: true })
+], DSASwitch.prototype, "form", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], DSASwitch.prototype, "required", 2);
+__decorateClass([
+  property({ attribute: "on-label" })
+], DSASwitch.prototype, "onLabel", 2);
+__decorateClass([
+  property({ attribute: "off-label" })
+], DSASwitch.prototype, "offLabel", 2);
+__decorateClass([
+  watch("checked", { waitUntilFirstUpdate: true })
+], DSASwitch.prototype, "handleCheckedChange", 1);
+__decorateClass([
+  watch("disabled", { waitUntilFirstUpdate: true })
+], DSASwitch.prototype, "handleDisabledChange", 1);
+DSASwitch = __decorateClass([
+  customElement("dsa-switch")
+], DSASwitch);
+
+export {
+  DSASwitch
+};

package/dist/chunks/{chunk.LB54GRRB.js → chunk.EAYW5L6J.js}

@@ -4,13 +4,13 @@ import {
 } from "./chunk.JSNVYESF.js";
 import {
   header_styles_default
-} from "./chunk.2EDNCADP.js";
+} from "./chunk.6SDBUBGE.js";
 import {
   HasSlotController
 } from "./chunk.YIY5RM53.js";
 import {
   LocalizeController
-} from "./chunk.QLA2JXR7.js";
+} from "./chunk.U7ZMMMJ3.js";
 import {
   watch
 } from "./chunk.NOMN6DGD.js";

package/dist/chunks/{chunk.QDKQMUIQ.js → chunk.EIZK62ST.js}

@@ -32,11 +32,27 @@ var form_control_styles_default = css`
   }
 
   .form-control .form-control__options {
-    display: flex;
+    display: inline-flex;
     flex-direction: column;
     gap: var(--dsa-wc-toggle-group-spacing);
   }
 
+  .form-control.form-control--has-buttons .form-control__options,
+  .form-control.form-control--has-cards .form-control__options {
+    gap: var(--dsa-spacing-8);
+  }
+  .form-control:not(.form-control--options-horizontal).form-control--has-buttons
+    .form-control__options {
+    min-width: 120px;
+    max-width: 400px;
+  }
+  .form-control:not(.form-control--options-horizontal).form-control--has-cards
+    .form-control__options {
+    display: flex;
+    min-width: 204px;
+    max-width: 660px;
+  }
+
   .form-control--options-horizontal .form-control__options {
     flex-direction: row;
     flex-wrap: wrap;

package/dist/chunks/{chunk.T6UX2FVU.js → chunk.EK7OT2VJ.js}

@@ -1,15 +1,15 @@
-import {
-  footer_styles_default
-} from "./chunk.QRCGXHRO.js";
 import {
   footerLogoSvg
 } from "./chunk.6EHBM4N7.js";
+import {
+  footer_styles_default
+} from "./chunk.CQR34TNY.js";
 import {
   HasSlotController
 } from "./chunk.YIY5RM53.js";
 import {
   LocalizeController
-} from "./chunk.QLA2JXR7.js";
+} from "./chunk.U7ZMMMJ3.js";
 import {
   ShoelaceElement
 } from "./chunk.XZ5FE34T.js";

package/dist/chunks/{chunk.FKXOTDTY.js → chunk.ERN34WYC.js}

@@ -1,14 +1,14 @@
+import {
+  getIconLibrary,
+  unwatchIcon,
+  watchIcon
+} from "./chunk.CAYHSQZJ.js";
 import {
   requestIcon
 } from "./chunk.23TOS4ZE.js";
 import {
   icon_styles_default
 } from "./chunk.LMJPQPQT.js";
-import {
-  getIconLibrary,
-  unwatchIcon,
-  watchIcon
-} from "./chunk.P45DWAWT.js";
 import {
   watch
 } from "./chunk.NOMN6DGD.js";

package/dist/chunks/chunk.F7NUIVDV.js

@@ -0,0 +1,10 @@
+// src/components/input-otp/input-otp.utils.ts
+var REGEXP_ONLY_DIGITS = "^\\d*$";
+var REGEXP_ONLY_LETTERS = "^[a-zA-Z]*$";
+var REGEXP_ONLY_DIGITS_AND_LETTERS = "^[a-zA-Z0-9]*$";
+
+export {
+  REGEXP_ONLY_DIGITS,
+  REGEXP_ONLY_LETTERS,
+  REGEXP_ONLY_DIGITS_AND_LETTERS
+};

package/dist/chunks/{chunk.3TJPAISV.js → chunk.FC2HFFUI.js}

@@ -1,6 +1,6 @@
 import {
   pagination_button_styles_default
-} from "./chunk.EP7LLKJN.js";
+} from "./chunk.V75T6QXR.js";
 import {
   HasSlotController
 } from "./chunk.YIY5RM53.js";

package/dist/chunks/chunk.FK5HR2F4.js

@@ -0,0 +1,100 @@
+import {
+  form_control_styles_default
+} from "./chunk.EIZK62ST.js";
+import {
+  component_styles_default
+} from "./chunk.TUVJKY7S.js";
+
+// src/components/checkbox/checkbox.styles.ts
+import { css } from "lit";
+var checkbox_styles_default = css`
+  ${component_styles_default}
+  ${form_control_styles_default}
+  :host {
+    display: inline-block;
+  }
+
+  .form-control {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .checkbox {
+    position: relative;
+    display: inline-flex;
+    align-items: flex-start;
+    color: var(--dsa-wc-checkbox-color);
+    vertical-align: middle;
+    cursor: pointer;
+  }
+
+  .checkbox--small {
+    --toggle-size: var(--dsa-wc-checkbox-size-small);
+    font: var(--dsa-wc-checkbox-font-small);
+  }
+
+  .checkbox--medium {
+    --toggle-size: var(--dsa-wc-checkbox-size);
+    font: var(--dsa-wc-checkbox-font);
+  }
+
+  .checkbox--large {
+    --toggle-size: var(--dsa-wc-checkbox-size-large);
+    font: var(--dsa-wc-checkbox-font-large);
+  }
+
+  .checkbox__input {
+    position: absolute;
+    opacity: 0;
+    padding: 0;
+    margin: 0;
+    pointer-events: none;
+  }
+
+  /* Focus */
+  .checkbox
+    .checkbox__input:focus-visible
+    ~ dsa-internal-checkbox-box::part(control) {
+    outline: var(--dsa-wc-focus-ring);
+    outline-offset: var(--dsa-wc-focus-ring-offset);
+  }
+
+  .checkbox__label:not(.checkbox--disabled) {
+    display: none;
+  }
+
+  .checkbox--has-label .checkbox__label:not(.checkbox--disabled) {
+    display: inline-block;
+    color: var(--dsa-wc-checkbox-color);
+    line-height: var(--toggle-size);
+    margin-inline-start: 0.5em;
+    user-select: none;
+  }
+
+  .checkbox__label-required {
+    color: var(--dsa-wc-form-required-content-color);
+  }
+
+  /* Disabled */
+  .checkbox--disabled {
+    cursor: not-allowed;
+  }
+  .checkbox--disabled:not(.checkbox--readonly) .checkbox__label {
+    color: var(--dsa-wc-checkbox-label-color-disabled);
+  }
+
+  /* Error */
+  .checkbox--error:not(.checkbox--disabled):not(.checkbox--readonly)
+    > .checkbox__label {
+    color: var(--dsa-wc-checkbox-label-color-error);
+  }
+
+  /* Readonly */
+  .checkbox--readonly {
+    cursor: not-allowed;
+  }
+`;
+
+export {
+  checkbox_styles_default
+};

package/dist/chunks/{chunk.XRZGSSHY.js → chunk.FWVIQUG4.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk.NHRDZGLI.js";
 import {
   DSAIcon
-} from "./chunk.FKXOTDTY.js";
+} from "./chunk.ERN34WYC.js";
 import {
   watch
 } from "./chunk.NOMN6DGD.js";

package/dist/chunks/{chunk.BDO6TPPP.js → chunk.G6JRMCFB.js}

@@ -1,6 +1,6 @@
 import {
   radio_styles_default
-} from "./chunk.35CKPBLE.js";
+} from "./chunk.ANOLAL4B.js";
 import {
   watch
 } from "./chunk.NOMN6DGD.js";
@@ -21,7 +21,9 @@ var DSARadio = class extends ShoelaceElement {
     this.checked = false;
     this.hasFocus = false;
     this.size = "medium";
+    this.parentDisabled = false;
     this.disabled = false;
+    this.parentReadonly = false;
     this.readonly = false;
     this.error = false;
   }
@@ -30,8 +32,8 @@ var DSARadio = class extends ShoelaceElement {
     this.handleBlur = this.handleBlur.bind(this);
     this.handleClick = this.handleClick.bind(this);
     this.handleFocus = this.handleFocus.bind(this);
-    this.setInitialAttributes();
     this.addEventListeners();
+    this.setAttribute("role", "radio");
   }
   disconnectedCallback() {
     this.removeEventListeners();
@@ -51,58 +53,50 @@ var DSARadio = class extends ShoelaceElement {
     this.emit("dsa-blur");
   }
   handleClick() {
-    if (!this.disabled && !this.readonly) {
-      this.checked = true;
+    if (this.readonly || this.disabled || this.parentDisabled || this.parentReadonly) {
+      return;
     }
+    this.checked = true;
   }
   handleFocus() {
     this.hasFocus = true;
     this.emit("dsa-focus");
   }
-  setInitialAttributes() {
-    this.setAttribute("role", "radio");
-    this.setAttribute(
-      "aria-disabled",
-      this.disabled || this.readonly ? "true" : "false"
-    );
-  }
   handleCheckedChange() {
     this.setAttribute("aria-checked", this.checked ? "true" : "false");
   }
-  handleDisabledChange() {
-    this.setAttribute(
-      "aria-disabled",
-      this.disabled || this.readonly ? "true" : "false"
-    );
+  handleDeactivatedChange() {
+    if (this.disabled || this.readonly || this.parentDisabled || this.parentReadonly) {
+      this.setAttribute("aria-disabled", "true");
+    } else {
+      this.removeAttribute("aria-disabled");
+    }
   }
   render() {
+    const isDisabled = this.disabled || this.parentDisabled;
+    const isReadonly = this.readonly || this.parentReadonly;
     return html`
       <span
         part="base"
         class=${classMap({
       radio: true,
       "radio--checked": this.checked,
-      "radio--readonly": this.readonly,
-      "radio--disabled": this.disabled,
+      "radio--readonly": isReadonly,
+      "radio--disabled": isDisabled,
       "radio--focused": this.hasFocus,
       "radio--small": this.size === "small",
       "radio--medium": this.size === "medium",
       "radio--large": this.size === "large"
     })}
       >
-        <span
-          part="${`control${this.checked ? " control--checked" : ""}`}"
-          class="radio__control"
+        <dsa-internal-radio-icon
+          ?checked=${this.checked}
+          size=${this.size}
+          ?disabled=${isDisabled}
+          ?readonly=${isReadonly}
+          ?error=${this.error}
         >
-          ${this.checked ? html`
-                <dsa-icon
-                  part="checked-icon"
-                  class="radio__checked-icon"
-                  name="circle_filled"
-                  library="system"
-                ></dsa-icon>
-              ` : ""}
-        </span>
+        </dsa-internal-radio-icon>
 
         <slot
           part="label"
@@ -128,9 +122,15 @@ __decorateClass([
 __decorateClass([
   property({ reflect: true })
 ], DSARadio.prototype, "size", 2);
+__decorateClass([
+  property({ type: Boolean })
+], DSARadio.prototype, "parentDisabled", 2);
 __decorateClass([
   property({ type: Boolean, reflect: true })
 ], DSARadio.prototype, "disabled", 2);
+__decorateClass([
+  property({ type: Boolean })
+], DSARadio.prototype, "parentReadonly", 2);
 __decorateClass([
   property({ type: Boolean, reflect: true })
 ], DSARadio.prototype, "readonly", 2);
@@ -141,8 +141,8 @@ __decorateClass([
   watch("checked")
 ], DSARadio.prototype, "handleCheckedChange", 1);
 __decorateClass([
-  watch(["disabled", "readonly"])
-], DSARadio.prototype, "handleDisabledChange", 1);
+  watch(["disabled", "readonly", "parentDisabled", "parentReadonly"])
+], DSARadio.prototype, "handleDeactivatedChange", 1);
 DSARadio = __decorateClass([
   customElement("dsa-radio")
 ], DSARadio);