@ds-autonomie/web-components 1.22.2 → 1.23.0

package/dist/chunks/{chunk.GBFSCUF6.js → chunk.52QZ25CM.js}

@@ -1,12 +1,12 @@
+import {
+  radio_group_styles_default
+} from "./chunk.3XIJ443Y.js";
 import {
   wrapIndex
 } from "./chunk.HV63L5BF.js";
-import {
-  radio_group_styles_default
-} from "./chunk.PQR2GAOE.js";
 import {
   renderFormElementErrors
-} from "./chunk.E3B2D5KE.js";
+} from "./chunk.IZBHR7GP.js";
 import {
   FormControlController,
   customErrorValidityState,
@@ -15,7 +15,7 @@ import {
 } from "./chunk.KIFBWPW5.js";
 import {
   HasSlotController
-} from "./chunk.DA6UU6UL.js";
+} from "./chunk.YIY5RM53.js";
 import {
   watch
 } from "./chunk.6IH66JBY.js";

package/dist/chunks/{chunk.M3FN3PFT.js → chunk.5OBDCB7I.js}

@@ -2,7 +2,7 @@ import {
   getIconLibrary,
   unwatchIcon,
   watchIcon
-} from "./chunk.O2PIWM25.js";
+} from "./chunk.UCR5H4HY.js";
 import {
   requestIcon
 } from "./chunk.23TOS4ZE.js";

package/dist/chunks/{chunk.5DJID6VS.js → chunk.5RR67NIN.js}

@@ -1,6 +1,6 @@
 import {
   LocalizeController
-} from "./chunk.5MBTOZ4X.js";
+} from "./chunk.4ZYXTXB5.js";
 import {
   ShoelaceElement
 } from "./chunk.YCXTCVAZ.js";

package/dist/chunks/{chunk.TOWCNBTG.js → chunk.5SPPXRRA.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk.DX25IW4S.js";
 import {
   LocalizeController
-} from "./chunk.5MBTOZ4X.js";
+} from "./chunk.4ZYXTXB5.js";
 import {
   ShoelaceElement
 } from "./chunk.YCXTCVAZ.js";

package/dist/chunks/{chunk.HRKZRSEX.js → chunk.5W2ADPTV.js}

@@ -15,7 +15,7 @@ import {
 } from "./chunk.V7RJROLH.js";
 import {
   LocalizeController
-} from "./chunk.5MBTOZ4X.js";
+} from "./chunk.4ZYXTXB5.js";
 import {
   watch
 } from "./chunk.6IH66JBY.js";

package/dist/chunks/{chunk.GUSO7ZX7.js → chunk.66WACVGP.js}

@@ -1,6 +1,6 @@
 import {
   HasSlotController
-} from "./chunk.DA6UU6UL.js";
+} from "./chunk.YIY5RM53.js";
 import {
   badge_styles_default
 } from "./chunk.BVRGK5ZO.js";

package/dist/chunks/{chunk.FCXJCZEG.js → chunk.6AMOVQMF.js}

@@ -1,9 +1,9 @@
 import {
   checkbox_group_styles_default
-} from "./chunk.KVWD6T4L.js";
+} from "./chunk.VOOE2BQV.js";
 import {
   renderFormElementErrors
-} from "./chunk.E3B2D5KE.js";
+} from "./chunk.IZBHR7GP.js";
 import {
   FormControlController,
   customErrorValidityState,
@@ -12,7 +12,7 @@ import {
 } from "./chunk.KIFBWPW5.js";
 import {
   HasSlotController
-} from "./chunk.DA6UU6UL.js";
+} from "./chunk.YIY5RM53.js";
 import {
   watch
 } from "./chunk.6IH66JBY.js";

package/dist/chunks/{chunk.FUDAY7X2.js → chunk.6QHJJ6HQ.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk.PUPPORXG.js";
 import {
   DSATableRow
-} from "./chunk.POBERW54.js";
+} from "./chunk.ZJSZJA26.js";
 import {
   __decorateClass
 } from "./chunk.6M63UXML.js";

package/dist/chunks/{chunk.EEKMHAZ5.js → chunk.7CXSHK4V.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk.IX2S32IE.js";
 import {
   FilterBase
-} from "./chunk.YGFOBU5R.js";
+} from "./chunk.BLOOH4O7.js";
 import {
   watch
 } from "./chunk.6IH66JBY.js";
@@ -225,7 +225,11 @@ var DSAFilterRange = class extends FilterBase {
           @click=${this.handleReset}
           ?disabled=${this.currentStartValue === this.defaultStart && this.currentEndValue === this.defaultEnd}
         >
-          <dsa-icon name="restart_alt" slot="prefix"></dsa-icon>
+          <dsa-icon
+            name="restart_alt"
+            slot="prefix"
+            library="system"
+          ></dsa-icon>
           ${this.localize.term("filterReset")}
         </dsa-button>
 

package/dist/chunks/{chunk.NZSU3FNO.js → chunk.7NKRGNGW.js}

@@ -6,10 +6,10 @@ import {
 } from "./chunk.BJAMGNY4.js";
 import {
   HasSlotController
-} from "./chunk.DA6UU6UL.js";
+} from "./chunk.YIY5RM53.js";
 import {
   LocalizeController
-} from "./chunk.5MBTOZ4X.js";
+} from "./chunk.4ZYXTXB5.js";
 import {
   watch
 } from "./chunk.6IH66JBY.js";
@@ -195,7 +195,11 @@ var DSAPagination = class extends LoadingStateElement {
                   class="pagination__navigation__button--mobile previous-button"
                   @click=${this.handlePageButtonClick}
                 >
-                  <dsa-icon name="chevron_left" slot="prefix"></dsa-icon>
+                  <dsa-icon
+                    name="chevron_left"
+                    slot="prefix"
+                    library="system"
+                  ></dsa-icon>
                   ${this.localize.term("previousPage")}
                 </dsa-pagination-button>
                 <div class="pagination__navigation__page-input">
@@ -222,7 +226,11 @@ var DSAPagination = class extends LoadingStateElement {
                   @click=${this.handlePageButtonClick}
                 >
                   ${this.localize.term("nextPage")}
-                  <dsa-icon name="chevron_right" slot="suffix"></dsa-icon>
+                  <dsa-icon
+                    name="chevron_right"
+                    slot="suffix"
+                    library="system"
+                  ></dsa-icon>
                 </dsa-pagination-button>
               ` : html`
                 <ul class="button-list">
@@ -235,7 +243,11 @@ var DSAPagination = class extends LoadingStateElement {
                     class="first-button previous-button"
                     @click=${this.handlePageButtonClick}
                   >
-                    <dsa-icon name="chevron_left" slot="prefix"></dsa-icon>
+                    <dsa-icon
+                      name="chevron_left"
+                      slot="prefix"
+                      library="system"
+                    ></dsa-icon>
                     ${this.compact ? html`
                           <dsa-visually-hidden
                             >${this.localize.term(
@@ -259,7 +271,11 @@ var DSAPagination = class extends LoadingStateElement {
       "nextPage"
     )}</dsa-visually-hidden
                         >` : this.localize.term("nextPage")}
-                    <dsa-icon name="chevron_right" slot="suffix"></dsa-icon>
+                    <dsa-icon
+                      name="chevron_right"
+                      slot="suffix"
+                      library="system"
+                    ></dsa-icon>
                   </dsa-pagination-button>
                 </ul>
               `}

package/dist/chunks/{chunk.6YV75XW5.js → chunk.AF3ZNLUV.js}

@@ -10,7 +10,7 @@ import {
 } from "./chunk.R426GAXO.js";
 import {
   HasSlotController
-} from "./chunk.DA6UU6UL.js";
+} from "./chunk.YIY5RM53.js";
 import {
   waitForEvent
 } from "./chunk.B4BZKR24.js";
@@ -24,7 +24,7 @@ import {
 } from "./chunk.V7RJROLH.js";
 import {
   LocalizeController
-} from "./chunk.5MBTOZ4X.js";
+} from "./chunk.4ZYXTXB5.js";
 import {
   watch
 } from "./chunk.6IH66JBY.js";
@@ -251,6 +251,7 @@ var DSADialog = class extends ShoelaceElement {
                       name="close"
                       label=${this.localize.term("close")}
                       @click="${() => this.requestClose("close-button")}"
+                      library="system"
                     ></dsa-icon-button>
                   </div>
                 </header>

package/dist/chunks/{chunk.F4QJBOMR.js → chunk.AYYW4GA7.js}

@@ -1,43 +1,37 @@
 import {
   DSASelect
-} from "./chunk.46QRHHLQ.js";
-import {
-  maskedValueToRawValue,
-  rawValueToMaskedValue,
-  stripSpecialChars
-} from "./chunk.7OLEA3GQ.js";
+} from "./chunk.ELSWDQF7.js";
 import {
   getPhoneConfig
 } from "./chunk.65HTBW2L.js";
 import {
   input_phone_styles_default
-} from "./chunk.5KFYZRQZ.js";
+} from "./chunk.TB3WT3D4.js";
 import {
   frenchFlagOption,
   frenchNumberPrefix,
   phonePrefixOptions
 } from "./chunk.ESYJVRG3.js";
+import {
+  maskedValueToRawValue,
+  rawValueToMaskedValue,
+  stripSpecialChars
+} from "./chunk.7OLEA3GQ.js";
+import {
+  FormControlLayout
+} from "./chunk.FJI3P5RX.js";
 import {
   defaultValue
 } from "./chunk.CMJ2SRTL.js";
-import {
-  renderFormElementErrors
-} from "./chunk.E3B2D5KE.js";
 import {
   FormControlController
 } from "./chunk.KIFBWPW5.js";
-import {
-  HasSlotController
-} from "./chunk.DA6UU6UL.js";
 import {
   watch
 } from "./chunk.6IH66JBY.js";
 import {
   ifDefinedAndNotEmpty
 } from "./chunk.ZQJVCRB2.js";
-import {
-  ShoelaceElement
-} from "./chunk.YCXTCVAZ.js";
 import {
   __decorateClass
 } from "./chunk.6M63UXML.js";
@@ -49,41 +43,24 @@ import { classMap } from "lit/directives/class-map.js";
 import { ifDefined } from "lit/directives/if-defined.js";
 import { live } from "lit/directives/live.js";
 import { LocalizeController } from "@shoelace-style/localize";
-var DSAInputPhone = class extends ShoelaceElement {
+var DSAInputPhone = class extends FormControlLayout {
   constructor() {
     super(...arguments);
     this.formControlController = new FormControlController(this, {
       assumeInteractionOn: ["dsa-blur", "dsa-input"]
     });
-    this.hasSlotController = new HasSlotController(
-      this,
-      "help-text",
-      "label"
-    );
     this.localize = new LocalizeController(this);
     this.hasFocus = false;
     this.maskedNumber = "";
     this.phoneConfig = getPhoneConfig("+33");
     this.placeholder = this.phoneConfig.placeholder;
     this.pattern = this.phoneConfig.pattern;
-    this.title = "";
-    this.name = "";
     this.value = "";
     this.phonePrefix = "+33";
     this.phoneNumber = "";
     this.defaultValue = "";
-    this.size = "medium";
-    this.variant = "base";
-    this.label = "";
-    this.helpText = "";
     this.clearable = false;
-    this.disabled = false;
     this.inputPrefix = "";
-    this.readonly = false;
-    this.error = false;
-    this.errorMessage = "";
-    this.form = "";
-    this.required = false;
     this.placement = "bottom-start";
   }
   /** Gets the validity state object */
@@ -134,6 +111,7 @@ var DSAInputPhone = class extends ShoelaceElement {
     this.phoneNumber = newValue;
     this.maskedNumber = maskedValue;
     this.inputEl.value = maskedValue;
+    this.updateValue();
     this.formControlController.updateValidity();
     this.emit("dsa-input");
   }
@@ -300,75 +278,48 @@ var DSAInputPhone = class extends ShoelaceElement {
     this.inputEl.setCustomValidity(message);
     this.formControlController.updateValidity();
   }
-  render() {
+  renderInput() {
     var _a;
     const hasLabelSlot = this.hasSlotController.test("label");
-    const hasHelpTextSlot = this.hasSlotController.test("help-text");
     const hasLabel = this.label ? true : !!hasLabelSlot;
-    const hasHelpText = this.helpText ? true : !!hasHelpTextSlot;
     const hasClearIcon = this.clearable && !this.disabled && !this.readonly && (typeof this.phoneNumber === "number" || ((_a = this.phoneNumber) == null ? void 0 : _a.length) > 0);
     const placeholder = this.placeholder.substring(
       this.maskedNumber.length || 0
     );
     return html`
-    <div
-      part="form-control"
-      class=${classMap({
-      "form-control": true,
-      "form-control--error": this.error,
-      "form-control--readonly": this.readonly,
-      "form-control--disabled": this.disabled,
-      "form-control--small": this.size === "small",
-      "form-control--medium": this.size === "medium",
-      "form-control--large": this.size === "large",
-      "form-control--has-label": hasLabel,
-      "form-control--has-help-text": hasHelpText
-    })}
-    >
-      <label
-        part="form-control-label"
-        class='form-control__label'
-        for="input-phone"
-        aria-hidden=${hasLabel ? "false" : "true"}
-      >
-        ${this.required ? html`<span class="form-control__label-required">*</span>` : ""}
-        <slot name="label">${this.label}</slot>
-      </label>
-      <slot name="tooltip" class="form-control__tooltip"></slot>
-
-      <div part="base" class="input-phone__input form-control__field" >
-
-      <dsa-select
-        id="prefix"
-        part="select"
-        class=${classMap({
+      <div part="base" class="input-phone__input form-control__field">
+        <dsa-select
+          id="prefix"
+          part="select"
+          class=${classMap({
       "input-phone__select": true,
       "input-phone__select-error": this.error
     })}
-        .variant=${live(this.variant)}
-        .value=${this.phonePrefix}
-        ?disabled=${this.disabled || this.readonly}
-        title=${this.localize.term("countryCallingCode")}
-        .placement=${this.placement}
-        hoist
-        .size=${this.size}
-        @dsa-change=${this.handlePhonePrefixChange}
-        enterkeyhint="enter"
-        display-value
-        no-sync-width
-      >
-        ${phonePrefixOptions.map((option, index) => {
+          .variant=${live(this.variant)}
+          .value=${this.phonePrefix}
+          ?disabled=${this.disabled}
+          ?readonly=${this.readonly}
+          title=${this.localize.term("countryCallingCode")}
+          .placement=${this.placement}
+          hoist
+          .size=${this.size}
+          @dsa-change=${this.handlePhonePrefixChange}
+          enterkeyhint="enter"
+          display-value
+          no-sync-width
+        >
+          ${phonePrefixOptions.map((option, index) => {
       return html`
-            <dsa-option value=${option.value} .size=${this.size}>
-              ${frenchFlagOption(`option_${index}`)}
-              ${this.localize.term(option.label)} (${option.value})
-            </dsa-option>
-          `;
+              <dsa-option value=${option.value} .size=${this.size}>
+                ${frenchFlagOption(`option_${index}`)}
+                ${this.localize.term(option.label)} (${option.value})
+              </dsa-option>
+            `;
     })}
-      </dsa-select>
+        </dsa-select>
 
-      <div
-        class=${classMap({
+        <div
+          class=${classMap({
       "input-phone": true,
       // States
       "input-phone--error": this.error,
@@ -379,83 +330,71 @@ var DSAInputPhone = class extends ShoelaceElement {
       "input-phone--focused": this.hasFocus,
       "input-phone--empty": this.phoneNumber === ""
     })}
-      >
-        <span>${this.inputPrefix}</span>
+        >
+          <span>${this.inputPrefix}</span>
 
-        <div class="input-phone__mask">
-          <div 
-            class=${classMap({
+          <div class="input-phone__mask">
+            <div
+              class=${classMap({
       "input-phone__placeholder": true
-    })}   
-            aria-placeholder=${placeholder} aria-hidden="true"
-          >
-            <span class="input-phone__value"  aria-hidden="true">
-            ${this.maskedNumber}</span>
-            ${placeholder}
-          </div>
-
+    })}
+              aria-placeholder=${placeholder}
+              aria-hidden="true"
+            >
+              <span class="input-phone__value" aria-hidden="true">
+                ${this.maskedNumber}</span
+              >
+              ${placeholder}
+            </div>
 
-          <input
-            part="input"
-            id="input-phone"
-            class=${classMap({
+            <input
+              part="input"
+              id="input"
+              class=${classMap({
       "input-phone__control": true
     })}
-            type="text"
-            title=${ifDefinedAndNotEmpty(this.title)}
-            name=${ifDefinedAndNotEmpty(this.name)}
-            ?disabled=${this.disabled}
-            ?readonly=${this.readonly}
-            ?required=${this.required}
-            minlength=${ifDefined(this.placeholder.length)}
-            maxlength=${ifDefined(this.placeholder.length)}
-            size=${ifDefined(this.placeholder.length)}
-            placeholder=${ifDefined(this.placeholder)}
-            .value=${live(this.maskedNumber)}
-            autocomplete='tel-national'
-            ?autofocus=${this.autofocus}
-            enterkeyhint=${ifDefined(this.enterkeyhint)}
-            inputmode='tel'
-            aria-label=${ifDefinedAndNotEmpty(
+              type="text"
+              title=${ifDefinedAndNotEmpty(this.title)}
+              name=${ifDefinedAndNotEmpty(this.name)}
+              ?disabled=${this.disabled}
+              ?readonly=${this.readonly}
+              ?required=${this.required}
+              minlength=${ifDefined(this.placeholder.length)}
+              maxlength=${ifDefined(this.placeholder.length)}
+              size=${ifDefined(this.placeholder.length)}
+              placeholder=${ifDefined(this.placeholder)}
+              .value=${live(this.maskedNumber)}
+              autocomplete="tel-national"
+              ?autofocus=${this.autofocus}
+              enterkeyhint=${ifDefined(this.enterkeyhint)}
+              inputmode="tel"
+              aria-label=${ifDefinedAndNotEmpty(
       hasLabel ? void 0 : this.title
     )}
-            aria-describedby=${this.error ? "input-phone error-text help-text" : "input-phone help-text"}
-            aria-invalid=${ifDefined(this.error ? "true" : void 0)}
-            @change=${this.handleChange}
-            @keyup=${this.handleDocumentKeyUp}
-            @keydown=${this.handleKeyDown}
-            @focus=${this.handleFocus}
-            @blur=${this.handleBlur}
-            @invalid=${this.handleInvalid}
-          />
-
-        </div>
-        ${hasClearIcon ? html`
+              aria-describedby=${this.error ? "input-phone error-text help-text" : "input-phone help-text"}
+              aria-invalid=${ifDefined(this.error ? "true" : void 0)}
+              @change=${this.handleChange}
+              @keyup=${this.handleDocumentKeyUp}
+              @keydown=${this.handleKeyDown}
+              @focus=${this.handleFocus}
+              @blur=${this.handleBlur}
+              @invalid=${this.handleInvalid}
+            />
+          </div>
+          ${hasClearIcon ? html`
                 <dsa-icon-button
                   part="clear-button"
                   class="input-phone__clear"
                   label=${this.localize.term("clearEntry")}
                   @click=${this.handleClearIconClick}
                   name="close"
+                  library="system"
                 >
                 </dsa-icon-button>
               ` : ""}
+        </div>
       </div>
-    </div>
-
-    <slot
-      name="help-text"
-      part="form-control-help-text"
-      id="help-text"
-      class="form-control__help-text"
-      aria-hidden=${hasHelpText ? "false" : "true"}
-    >
-      ${this.helpText}
-    </slot>
-
-        ${this.error && !this.disabled && this.errorMessage !== "" ? renderFormElementErrors(this.errorMessage) : ""}
-    </div>
-  </div>`;
+    `;
   }
 };
 DSAInputPhone.styles = input_phone_styles_default;
@@ -480,12 +419,6 @@ __decorateClass([
 __decorateClass([
   state()
 ], DSAInputPhone.prototype, "pattern", 2);
-__decorateClass([
-  property()
-], DSAInputPhone.prototype, "title", 2);
-__decorateClass([
-  property()
-], DSAInputPhone.prototype, "name", 2);
 __decorateClass([
   property()
 ], DSAInputPhone.prototype, "value", 2);
@@ -498,54 +431,12 @@ __decorateClass([
 __decorateClass([
   defaultValue()
 ], DSAInputPhone.prototype, "defaultValue", 2);
-__decorateClass([
-  property({ reflect: true })
-], DSAInputPhone.prototype, "size", 2);
-__decorateClass([
-  property({ reflect: true })
-], DSAInputPhone.prototype, "variant", 2);
-__decorateClass([
-  property()
-], DSAInputPhone.prototype, "label", 2);
-__decorateClass([
-  property({ attribute: "help-text" })
-], DSAInputPhone.prototype, "helpText", 2);
 __decorateClass([
   property({ type: Boolean })
 ], DSAInputPhone.prototype, "clearable", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], DSAInputPhone.prototype, "disabled", 2);
 __decorateClass([
   property({ attribute: "input-prefix" })
 ], DSAInputPhone.prototype, "inputPrefix", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], DSAInputPhone.prototype, "readonly", 2);
-__decorateClass([
-  property({ type: Boolean })
-], DSAInputPhone.prototype, "error", 2);
-__decorateClass([
-  property({
-    attribute: "error-message",
-    converter: {
-      fromAttribute: (value) => value ? value.split("|") : "",
-      toAttribute: (value) => {
-        if (typeof value === "string") {
-          return value;
-        } else {
-          return value.join("|");
-        }
-      }
-    }
-  })
-], DSAInputPhone.prototype, "errorMessage", 2);
-__decorateClass([
-  property({ reflect: true })
-], DSAInputPhone.prototype, "form", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], DSAInputPhone.prototype, "required", 2);
 __decorateClass([
   property({ type: Boolean })
 ], DSAInputPhone.prototype, "autofocus", 2);

package/dist/chunks/{chunk.YGFOBU5R.js → chunk.BLOOH4O7.js}

@@ -1,6 +1,6 @@
 import {
   renderFormElementErrors
-} from "./chunk.E3B2D5KE.js";
+} from "./chunk.IZBHR7GP.js";
 import {
   waitForEvent
 } from "./chunk.B4BZKR24.js";
@@ -15,7 +15,7 @@ import {
 } from "./chunk.V7RJROLH.js";
 import {
   LocalizeController
-} from "./chunk.5MBTOZ4X.js";
+} from "./chunk.4ZYXTXB5.js";
 import {
   watch
 } from "./chunk.6IH66JBY.js";

package/dist/chunks/{chunk.QUB3Z4YN.js → chunk.BSUMGQ4B.js}

@@ -14,7 +14,7 @@ import {
 } from "./chunk.V7RJROLH.js";
 import {
   LocalizeController
-} from "./chunk.5MBTOZ4X.js";
+} from "./chunk.4ZYXTXB5.js";
 import {
   watch
 } from "./chunk.6IH66JBY.js";