@ds-autonomie/web-components 1.8.0 → 1.9.0

package/dist/chunks/{chunk.DMP5NRB3.js → chunk.BMSQX3ZA.js}

@@ -1,23 +1,23 @@
 import {
   DSASelect
-} from "./chunk.ADG7SYDH.js";
-import {
-  frenchFlag,
-  frenchNumberPrefix,
-  phoneInputValidityRegex,
-  phonePrefixOptions
-} from "./chunk.6ZQ4OQ2C.js";
+} from "./chunk.G2S6QEJM.js";
 import {
   maskedValueToRawValue,
   rawValueToMaskedValue,
   stripSpecialChars
 } from "./chunk.7OLEA3GQ.js";
 import {
-  PhoneConfig
-} from "./chunk.UCJGKOXX.js";
+  getPhoneConfig
+} from "./chunk.65HTBW2L.js";
 import {
   input_phone_styles_default
-} from "./chunk.MUBB5GXY.js";
+} from "./chunk.GOSPYXFS.js";
+import {
+  frenchFlagOption,
+  frenchFlagSelect,
+  frenchNumberPrefix,
+  phonePrefixOptions
+} from "./chunk.ESYJVRG3.js";
 import {
   defaultValue
 } from "./chunk.CMJ2SRTL.js";
@@ -56,12 +56,14 @@ var DSAInputPhone = class extends ShoelaceElement {
     this.hasSlotController = new HasSlotController(
       this,
       "help-text",
-      "label",
-      "prefix"
+      "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 = "";
@@ -74,13 +76,12 @@ var DSAInputPhone = class extends ShoelaceElement {
     this.helpText = "";
     this.clearable = false;
     this.disabled = false;
-    this.placeholder = PhoneConfig.placeholder;
+    this.inputPrefix = "";
     this.readonly = false;
     this.error = false;
     this.errorMessage = "";
     this.form = "";
     this.required = false;
-    this.pattern = PhoneConfig.pattern;
     this.placement = "bottom-start";
   }
   /** Gets the validity state object */
@@ -126,7 +127,10 @@ var DSAInputPhone = class extends ShoelaceElement {
   }
   handleDocumentKeyUp() {
     const strippedValue = stripSpecialChars(this.inputEl.value);
-    const newValue = maskedValueToRawValue(strippedValue, PhoneConfig.mask);
+    const newValue = maskedValueToRawValue(
+      strippedValue,
+      this.phoneConfig.mask
+    );
     const maskedValue = rawValueToMaskedValue(newValue, this.placeholder);
     this.phoneNumber = newValue;
     this.maskedNumber = maskedValue;
@@ -229,6 +233,11 @@ var DSAInputPhone = class extends ShoelaceElement {
     }
     this.formControlController.setValidity(this.disabled);
   }
+  updatePhoneConfig() {
+    this.phoneConfig = getPhoneConfig(this.phonePrefix);
+    this.placeholder = this.phoneConfig.placeholder;
+    this.pattern = this.phoneConfig.pattern;
+  }
   async handleValueChange() {
     await this.updateComplete;
     this.formControlController.updateValidity();
@@ -269,9 +278,14 @@ var DSAInputPhone = class extends ShoelaceElement {
   }
   /** Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid. */
   checkValidity() {
-    if (this.phoneNumber === "" && this.required)
-      return false;
-    return phoneInputValidityRegex.test(this.value);
+    var _a;
+    const isValidInput = (_a = this.inputEl) == null ? void 0 : _a.checkValidity();
+    if (this.phoneNumber.length === 0) {
+      return isValidInput != null ? isValidInput : false;
+    }
+    const matches = this.value.match(this.pattern);
+    const patternMatch = matches !== null;
+    return patternMatch;
   }
   /** Gets the associated form, if one exists. */
   getForm() {
@@ -279,9 +293,14 @@ var DSAInputPhone = class extends ShoelaceElement {
   }
   /** Checks for validity and shows the browser's validation message if the control is invalid. */
   reportValidity() {
-    if (this.phoneNumber === "" && this.required)
-      return false;
-    return phoneInputValidityRegex.test(this.value);
+    var _a;
+    const isValidInput = (_a = this.inputEl) == null ? void 0 : _a.reportValidity();
+    if (this.phoneNumber.length === 0) {
+      return isValidInput != null ? isValidInput : false;
+    }
+    const matches = this.value.match(this.pattern);
+    const patternMatch = matches !== null;
+    return patternMatch;
   }
   /** Sets a custom validation message. Pass an empty string to restore validity. */
   setCustomValidity(message) {
@@ -292,16 +311,16 @@ var DSAInputPhone = class extends ShoelaceElement {
     var _a;
     const hasLabelSlot = this.hasSlotController.test("label");
     const hasHelpTextSlot = this.hasSlotController.test("help-text");
-    const hasPrefixIcon = this.hasSlotController.test("prefix");
     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({
+    return html`
+    <div
+      part="form-control"
+      class=${classMap({
       "form-control": true,
       "form-control--error": this.error,
       "form-control--readonly": this.readonly,
@@ -312,57 +331,54 @@ var DSAInputPhone = class extends ShoelaceElement {
       "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>
+      <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" >
+      <div part="base" class="input-phone__input form-control__field" >
 
-    <dsa-select
-      id="prefix"
-      part="select"
-      class=${classMap({
+      <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}
-      @keydown=${this.handlePhonePrefixKeydown}
-      enterkeyhint="enter"
-      display-value
-      no-sync-width
-    >
-    ${frenchFlag}
-    ${phonePrefixOptions.map((option) => {
-      return html`<dsa-option value=${option.value} .size=${this.size}>
-        ${frenchFlag} (${option.value}) ${this.localize.term(option.label)}
-      </dsa-option>`;
+        .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}
+        @keydown=${this.handlePhonePrefixKeydown}
+        enterkeyhint="enter"
+        display-value
+        no-sync-width
+      >
+        ${frenchFlagSelect}
+        ${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-select>
+      </dsa-select>
 
-    <div
-        part="mask"
+      <div
         class=${classMap({
       "input-phone": true,
-      // Sizes
-      "input-phone--small": this.size === "small",
-      "input-phone--medium": this.size === "medium",
-      "input-phone--large": this.size === "large",
       // States
       "input-phone--error": this.error,
       "input-phone--on-layer": this.variant === "layer",
@@ -373,56 +389,55 @@ var DSAInputPhone = class extends ShoelaceElement {
       "input-phone--empty": this.phoneNumber === ""
     })}
       >
-     
-
+        <span>${this.inputPrefix}</span>
 
-
-      <div class=${classMap({
+        <div class="input-phone__mask">
+          <div 
+            class=${classMap({
       "input-phone__placeholder": true
-    })}   aria-placeholder=${placeholder} aria-hidden="true"
+    })}   
+            aria-placeholder=${placeholder} aria-hidden="true"
           >
             <span class="input-phone__value"  aria-hidden="true">
             ${this.maskedNumber}</span>
             ${placeholder}
-           </div
-        >
+          </div>
 
 
-        <input
-          part="input"
-          id="input-phone"
-          class=${classMap({
-      "input-phone__control": true,
-      "input-phone__control-with-prefix": hasPrefixIcon
+          <input
+            part="input"
+            id="input-phone"
+            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.minlength)}
-          maxlength=${ifDefined(this.placeholder.length)}
-          size=${ifDefined(this.placeholder.length)}
-          placeholder=${ifDefined(this.placeholder)}
-          .value=${live(this.maskedNumber)}
-          autocomplete='tel-national'
-          autocorrect=${ifDefined(this.autocorrect)}
-          ?autofocus=${this.autofocus}
-          spellcheck=${this.spellcheck}
-          enterkeyhint=${ifDefined(this.enterkeyhint)}
-          inputmode='tel'
-          aria-label=${ifDefinedAndNotEmpty(hasLabel ? this.label : this.title)}
-          aria-describedby=${this.error ? "input-phone error-text help-text" : "input-phone help-text"}
-          @change=${this.handleChange}
-          @keyup=${this.handleDocumentKeyUp}
-          @keydown=${this.handleKeyDown}
-          @focus=${this.handleFocus}
-          @blur=${this.handleBlur}
-          @invalid=${this.handleInvalid}
-        />
-
+            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 ? this.label : this.title
+    )}
+            aria-describedby=${this.error ? "input-phone error-text help-text" : "input-phone help-text"}
+            @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"
@@ -433,8 +448,6 @@ var DSAInputPhone = class extends ShoelaceElement {
                 >
                 </dsa-icon-button>
               ` : ""}
-
-
       </div>
     </div>
 
@@ -468,6 +481,15 @@ __decorateClass([
 __decorateClass([
   state()
 ], DSAInputPhone.prototype, "maskedNumber", 2);
+__decorateClass([
+  state()
+], DSAInputPhone.prototype, "phoneConfig", 2);
+__decorateClass([
+  state()
+], DSAInputPhone.prototype, "placeholder", 2);
+__decorateClass([
+  state()
+], DSAInputPhone.prototype, "pattern", 2);
 __decorateClass([
   property()
 ], DSAInputPhone.prototype, "title", 2);
@@ -505,8 +527,8 @@ __decorateClass([
   property({ type: Boolean, reflect: true })
 ], DSAInputPhone.prototype, "disabled", 2);
 __decorateClass([
-  state()
-], DSAInputPhone.prototype, "placeholder", 2);
+  property({ attribute: "input-prefix" })
+], DSAInputPhone.prototype, "inputPrefix", 2);
 __decorateClass([
   property({ type: Boolean, reflect: true })
 ], DSAInputPhone.prototype, "readonly", 2);
@@ -522,15 +544,6 @@ __decorateClass([
 __decorateClass([
   property({ type: Boolean, reflect: true })
 ], DSAInputPhone.prototype, "required", 2);
-__decorateClass([
-  state()
-], DSAInputPhone.prototype, "pattern", 2);
-__decorateClass([
-  property({ type: Number })
-], DSAInputPhone.prototype, "minlength", 2);
-__decorateClass([
-  property()
-], DSAInputPhone.prototype, "autocorrect", 2);
 __decorateClass([
   property({ type: Boolean })
 ], DSAInputPhone.prototype, "autofocus", 2);
@@ -543,6 +556,9 @@ __decorateClass([
 __decorateClass([
   watch("disabled", { waitUntilFirstUpdate: true })
 ], DSAInputPhone.prototype, "handleDisabledChange", 1);
+__decorateClass([
+  watch("phonePrefix")
+], DSAInputPhone.prototype, "updatePhoneConfig", 1);
 __decorateClass([
   watch("value", { waitUntilFirstUpdate: true })
 ], DSAInputPhone.prototype, "handleValueChange", 1);

package/dist/chunks/{chunk.IFXLU6P3.js → chunk.BVRGK5ZO.js}

@@ -17,14 +17,13 @@ var badge_styles_default = css`
     justify-content: center;
     align-items: center;
     white-space: pre;
-    font: var(--dsa-wc-badge-font);
     border-radius: var(--dsa-wc-badge-border-radius);
     white-space: nowrap;
-    padding: var(--spacing-8, 0.5rem);
     user-select: none;
     cursor: inherit;
-    height: var(--dsa-wc-badge-dot-size);
-    min-width: var(--dsa-wc-badge-dot-size);
+  }
+  .badge slot {
+    padding: 2px;
   }
 
   /* Variant modifiers */
@@ -53,6 +52,30 @@ var badge_styles_default = css`
     color: var(--dsa-wc-badge-text-color-danger);
   }
 
+  /*
+   * Size modifiers
+   */
+
+  .badge--small {
+    padding: var(--dsa-wc-badge-dot-small-padding);
+  }
+  .badge--small.badge--has-text {
+    font: var(--dsa-wc-badge-small-font);
+    padding: var(--dsa-wc-badge-text-small-padding);
+    line-height: 1;
+    min-width: var(--dsa-wc-badge-text-small-min-width);
+  }
+
+  .badge--medium {
+    padding: var(--dsa-wc-badge-dot-padding);
+  }
+  .badge--medium.badge--has-text {
+    font: var(--dsa-wc-badge-font);
+    padding: var(--dsa-wc-badge-text-padding);
+    line-height: 1;
+    min-width: var(--dsa-wc-badge-text-min-width);
+  }
+
   /* Pulse modifier */
   .badge--pulse {
     animation: pulse 1.5s var(--dsa-wc-no-animations-duration, infinite);

package/dist/chunks/{chunk.AXJZDS4O.js → chunk.BWQBVIRR.js}

@@ -10,7 +10,7 @@ import {
 } from "./chunk.DXQY7NLW.js";
 import {
   LocalizeController
-} from "./chunk.KZIAHLAV.js";
+} from "./chunk.27JQOQHL.js";
 import {
   watch
 } from "./chunk.6IH66JBY.js";

package/dist/chunks/{chunk.VN7U4QIC.js → chunk.CFTA3QKA.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk.SGIGGO5M.js";
 import {
   LocalizeController
-} from "./chunk.KZIAHLAV.js";
+} from "./chunk.27JQOQHL.js";
 import {
   ifDefinedAndNotEmpty
 } from "./chunk.ZQJVCRB2.js";

package/dist/chunks/{chunk.F6EDQPCA.js → chunk.CPEI3G7E.js}

@@ -17,7 +17,7 @@ import {
 } from "./chunk.YIY5RM53.js";
 import {
   LocalizeController
-} from "./chunk.KZIAHLAV.js";
+} from "./chunk.27JQOQHL.js";
 import {
   watch
 } from "./chunk.6IH66JBY.js";

package/dist/chunks/{chunk.WTGBJNXJ.js → chunk.CURRLKGD.js}

@@ -14,7 +14,7 @@ import {
 } from "./chunk.V7RJROLH.js";
 import {
   LocalizeController
-} from "./chunk.KZIAHLAV.js";
+} from "./chunk.27JQOQHL.js";
 import {
   watch
 } from "./chunk.6IH66JBY.js";

package/dist/chunks/{chunk.MIO6K4QD.js → chunk.DAQJDIFW.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk.2DGAEK66.js";
 import {
   LocalizeController
-} from "./chunk.KZIAHLAV.js";
+} from "./chunk.27JQOQHL.js";
 import {
   watch
 } from "./chunk.6IH66JBY.js";

package/dist/chunks/{chunk.ZC74GTBL.js → chunk.DX25IW4S.js}

@@ -28,10 +28,6 @@ var skip_links_styles_default = css`
     align-items: center;
     gap: var(--dsa-wc-skip-link-list-gap);
   }
-
-  .slot_links {
-    display: none;
-  }
 `;
 
 export {

package/dist/chunks/{chunk.ZCNXAXKX.js → chunk.EETYUDWR.js}

@@ -3,10 +3,13 @@ import {
 } from "./chunk.CMJ2SRTL.js";
 import {
   checkbox_styles_default
-} from "./chunk.DIC5NUF5.js";
+} from "./chunk.YAF5P5CP.js";
 import {
   FormControlController
 } from "./chunk.KIFBWPW5.js";
+import {
+  HasSlotController
+} from "./chunk.YIY5RM53.js";
 import {
   watch
 } from "./chunk.6IH66JBY.js";
@@ -34,6 +37,7 @@ var DSACheckbox = class extends ShoelaceElement {
       defaultValue: (control) => control.defaultChecked,
       setValue: (control, checked) => control.checked = checked
     });
+    this.hasSlotController = new HasSlotController(this, "[default]");
     this.hasFocus = false;
     this.title = "";
     this.name = "";
@@ -47,6 +51,7 @@ var DSACheckbox = class extends ShoelaceElement {
     this.errorMessage = "";
     this.form = "";
     this.required = false;
+    this.ariaLabel = "";
   }
   /** Gets the validity state object */
   get validity() {
@@ -127,6 +132,7 @@ var DSACheckbox = class extends ShoelaceElement {
     this.formControlController.updateValidity();
   }
   render() {
+    const hasLabelSlot = this.hasSlotController.test("[default]");
     return html`
       <div
         part="base"
@@ -147,6 +153,7 @@ var DSACheckbox = class extends ShoelaceElement {
       "checkbox--readonly": this.readonly,
       "checkbox--focused": this.hasFocus,
       "checkbox--indeterminate": this.indeterminate,
+      "checkbox--has-label": hasLabelSlot,
       "checkbox--small": this.size === "small",
       "checkbox--medium": this.size === "medium",
       "checkbox--large": this.size === "large"
@@ -162,6 +169,7 @@ var DSACheckbox = class extends ShoelaceElement {
             .checked=${live(this.checked)}
             .disabled=${this.disabled || this.readonly}
             .required=${this.required}
+            aria-label=${ifDefinedAndNotEmpty(this.ariaLabel)}
             aria-checked=${this.checked ? "true" : "false"}
             aria-describedby=${ifDefined(this.error ? "error-text" : void 0)}
             @click=${this.handleClick}
@@ -254,6 +262,9 @@ __decorateClass([
 __decorateClass([
   property({ type: Boolean, reflect: true })
 ], DSACheckbox.prototype, "required", 2);
+__decorateClass([
+  property({ attribute: "aria-label" })
+], DSACheckbox.prototype, "ariaLabel", 2);
 __decorateClass([
   watch("disabled", { waitUntilFirstUpdate: true })
 ], DSACheckbox.prototype, "handleDisabledChange", 1);

package/dist/chunks/{chunk.OIWFTO2A.js → chunk.EFCI6CBB.js}

@@ -1,12 +1,12 @@
 import {
   DSATableCell
-} from "./chunk.C33YMWL6.js";
+} from "./chunk.V5O2GRVM.js";
 import {
   table_header_cell_styles_default
-} from "./chunk.6OP6GCU4.js";
+} from "./chunk.R4Y6XOHR.js";
 import {
   LocalizeController
-} from "./chunk.KZIAHLAV.js";
+} from "./chunk.27JQOQHL.js";
 import {
   TABLE_SORT_CYCLE
 } from "./chunk.HB7A2UQ7.js";
@@ -27,6 +27,7 @@ var DSATableHeaderCell = class extends DSATableCell {
     this.localize = new LocalizeController(this);
     this.nextSortDirection = this.getNextSortDirection();
     this.isHovered = false;
+    this.textContent = "";
     this.role = "columnheader";
     this.sortable = false;
     this.alignment = "left";
@@ -60,6 +61,10 @@ var DSATableHeaderCell = class extends DSATableCell {
   handleMouseOut() {
     this.isHovered = false;
   }
+  handleSlotChange() {
+    var _a;
+    this.textContent = (_a = this.innerText) != null ? _a : "";
+  }
   handleSortableChange() {
     if (this.sortable) {
       this.setAttribute("aria-sort", this.sortDirection);
@@ -86,6 +91,9 @@ var DSATableHeaderCell = class extends DSATableCell {
     this.button.blur();
   }
   render() {
+    if (this.loading) {
+      return html`<dsa-skeleton effect=${this.skeletonEffect}></dsa-skeleton>`;
+    }
     if (this.sortable) {
       const visualSortDirection = this.isHovered ? this.nextSortDirection : this.sortDirection;
       return html`
@@ -94,7 +102,8 @@ var DSATableHeaderCell = class extends DSATableCell {
           part="sort-button"
           aria-label=${this.localize.term(
         "nextSortDirection",
-        this.nextSortDirection
+        this.nextSortDirection,
+        this.innerText
       )}
           class=${classMap({
         "sort-button--align-right": this.alignment === "right",
@@ -104,7 +113,7 @@ var DSATableHeaderCell = class extends DSATableCell {
           @mouseover=${this.handleMouseOver}
           @mouseout=${this.handleMouseOut}
         >
-          <slot></slot>
+          <slot @slotchange=${this.handleSlotChange}></slot>
           <dsa-icon
             class=${classMap({
         "sort-button-icon": true,
@@ -129,6 +138,9 @@ __decorateClass([
 __decorateClass([
   state()
 ], DSATableHeaderCell.prototype, "isHovered", 2);
+__decorateClass([
+  state()
+], DSATableHeaderCell.prototype, "textContent", 2);
 __decorateClass([
   property({ reflect: true })
 ], DSATableHeaderCell.prototype, "role", 2);