@ds-autonomie/web-components 1.22.2 → 1.23.0

package/CHANGELOG.md

@@ -1,5 +1,29 @@
 # @ds-autonomie/web-components
 
+## 1.23.0
+
+### Minor Changes
+
+- d72ea56: `file-upload`: ajout de la possibilité d'importer un dossier complet
+- 3f12bad: `link css class`: ajout d'une classe css pour les icones en suffixe
+- 1e7e67c: `download-card`: ajout d'un attribut permettant de renommer le document téléchargé
+  `download-link`: ajout d'un attribut permettant de renommer le document téléchargé
+- 6657b26: `button` : ajout d'un mode "toggle" (bouton à basculement)
+  `icon-button` : ajout d'un mode "toggle" (bouton à basculement)
+- ef5fce3: `divers composants`: utilisation de la librairie système pour les icônes
+
+### Patch Changes
+
+- cba1830: `input-mask`: `patternMismatch` à `false` quand aucune valeur n'est saisie
+- d171346: `radio`: correction d'une couleur rendant le bouton invisible en contraste élevé
+- e3b59b9: `tab` : correction de la largeur d'onglet avec un contenu custom
+- 1367806: `step` : (a11y) amélioration de la restitution des étapes cliquables
+- 498ea04: Communalisation de code pour les éléments de formulaire
+- ef44b36: `select`: ne pas sélectionner une option si son attribut `value` est vide
+- 02bd2c2: `radio-group`, `checkbox-group`: communalisation du code
+- 3f84296: `tab` : (a11y) déplacement du tabindex sur le host
+- 6a17f31: `input-phone`: mise à jour de la valeur après chaque entrée
+
 ## 1.22.2
 
 ### Patch Changes

package/dist/chunks/{chunk.BPEI35FP.js → chunk.2JIPPL3I.js}

@@ -16,7 +16,7 @@ var button_styles_default = css`
 
   .button {
     display: inline-flex;
-    align-items: stretch;
+    align-items: center;
     justify-content: center;
     width: 100%;
     border-style: solid;

package/dist/chunks/{chunk.5X4QTZAP.js → chunk.2LWUWDHO.js}

@@ -11,6 +11,10 @@ var tab_styles_default = css`
     display: inline-block;
   }
 
+  :host(:focus) {
+    outline: none;
+  }
+
   .tab {
     display: inline-flex;
     align-items: center;
@@ -29,7 +33,6 @@ var tab_styles_default = css`
     align-items: center;
   }
   .tab__width-placeholder {
-    content: attr(data-label);
     font-weight: 700;
     visibility: hidden;
     display: inline-block;
@@ -49,7 +52,7 @@ var tab_styles_default = css`
     color: var(--dsa-wc-tab-color-active-tab);
   }
 
-  .tab:focus-visible {
+  :host(:focus-visible) .tab {
     outline: var(--dsa-wc-focus-ring);
     outline-offset: calc(
       -1 * var(--dsa-wc-focus-ring-width) - var(--dsa-wc-focus-ring-offset)

package/dist/chunks/{chunk.KCJKFLMI.js → chunk.2TQJGNLG.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.4CA7E26P.js → chunk.33HY22NK.js}

@@ -5,31 +5,25 @@ import {
 } from "./chunk.7OLEA3GQ.js";
 import {
   input_mask_styles_default
-} from "./chunk.DMX6VF2L.js";
+} from "./chunk.47JHZBMB.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 {
   LocalizeController
-} from "./chunk.5MBTOZ4X.js";
+} from "./chunk.4ZYXTXB5.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";
@@ -40,43 +34,24 @@ 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 DSAInputMask = class extends ShoelaceElement {
+var DSAInputMask = class extends FormControlLayout {
   constructor() {
     super(...arguments);
     this.formControlController = new FormControlController(this, {
       assumeInteractionOn: ["dsa-blur", "dsa-input"]
     });
-    this.hasSlotController = new HasSlotController(
-      this,
-      "help-text",
-      "label",
-      "prefix"
-    );
     this.localize = new LocalizeController(this);
     this.hasFocus = false;
     this.maskedValue = "";
-    this.title = "";
-    this.name = "";
     this.value = "";
     this.defaultValue = "";
-    this.size = "medium";
-    this.variant = "base";
-    this.label = "";
-    this.helpText = "";
     this.clearable = false;
-    this.disabled = false;
-    this.placeholder = "";
-    this.readonly = false;
-    this.error = false;
-    this.errorMessage = "";
-    this.form = "";
-    this.required = false;
     this.pattern = "";
     this.mask = "";
   }
   /** Gets the validity state object */
   get validity() {
-    let patternMatch = void 0;
+    let patternMatch = true;
     if (this.value.length > 0 && this.pattern.length > 0) {
       const strippedValue = stripSpecialChars(this.value);
       const matches = strippedValue.match(this.pattern);
@@ -92,7 +67,7 @@ var DSAInputMask = class extends ShoelaceElement {
       tooLong: this.input.validity.tooLong,
       tooShort: this.input.validity.tooShort,
       typeMismatch: this.input.validity.typeMismatch,
-      valid: patternMatch !== void 0 ? patternMatch : this.input.validity.valid,
+      valid: this.value.length > 0 && this.pattern.length > 0 ? patternMatch : this.input.validity.valid,
       valueMissing: this.input.validity.valueMissing
     };
     return validityState;
@@ -223,44 +198,17 @@ var DSAInputMask = class extends ShoelaceElement {
     this.input.setCustomValidity(message);
     this.formControlController.updateValidity();
   }
-  render() {
+  renderInput() {
     const hasLabelSlot = this.hasSlotController.test("label");
-    const hasHelpTextSlot = this.hasSlotController.test("help-text");
     const hasPrefixIcon = this.hasSlotController.test("prefix");
     const hasSuffixIcon = this.hasSlotController.test("suffix");
     const hasLabel = this.label ? true : !!hasLabelSlot;
-    const hasHelpText = this.helpText ? true : !!hasHelpTextSlot;
     const hasClearIcon = this.clearable && !this.disabled && !this.readonly && (typeof this.value === "number" || this.value.length > 0);
     const placeholder = this.placeholder.substring(this.maskedValue.length);
     return html`
       <div
-        part="form-control"
+        part="base"
         class=${classMap({
-      "form-control": true,
-      "form-control--error": this.error,
-      "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-mask"
-          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="form-control-input" class="form-control-input form-control__field">
-          <div
-            part="base"
-            class=${classMap({
       "input-mask": true,
       // Sizes
       "input-mask--small": this.size === "small",
@@ -275,89 +223,80 @@ var DSAInputMask = class extends ShoelaceElement {
       "input-mask--focused": this.hasFocus,
       "input-mask--empty": !this.value
     })}
-          >
-          <slot name="prefix" part="prefix" id="input__prefix" class="input-mask__prefix"></slot>
-
+      >
+        <slot
+          name="prefix"
+          part="prefix"
+          id="input__prefix"
+          class="input-mask__prefix"
+        ></slot>
 
-          <div class=${classMap({
+        <div
+          class=${classMap({
       "input-mask__placeholder": true
-    })}  aria-placeholder=${placeholder}  aria-hidden="true"
-              >
-                <span class="input-mask__value"  aria-hidden="true">${this.maskedValue}</span>
-                ${placeholder}</div>
+    })}
+          aria-placeholder=${placeholder}
+          aria-hidden="true"
+        >
+          <span class="input-mask__value" aria-hidden="true"
+            >${this.maskedValue}</span
+          >
+          ${placeholder}
+        </div>
 
-            <input
-              part="input"
-              id="input-mask"
-              class=${classMap({
+        <input
+          part="input"
+          id="input"
+          class=${classMap({
       "input-mask__control": true,
       "input-mask__control-with-prefix": hasPrefixIcon
     })}
-              type="text"
-              title=${ifDefinedAndNotEmpty(hasLabel ? void 0 : 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.maskedValue)}
-              autocomplete=${ifDefined(this.autocomplete)}
-              autocorrect=${ifDefined(this.autocorrect)}
-              ?autofocus=${this.autofocus}
-              spellcheck=${this.spellcheck}
-              enterkeyhint=${ifDefined(this.enterkeyhint)}
-              inputmode=${this.inputmode}
-              aria-label=${ifDefinedAndNotEmpty(
-      hasLabel ? void 0 : this.title
-    )}
-              aria-describedby=${this.getDescriptionIds()}
-              aria-invalid=${ifDefined(this.error ? "true" : void 0)}
-              @change=${this.handleChange}
-              @invalid=${this.handleInvalid}
-              @keyup=${this.handleDocumentKeyUp}
-              @keydown=${this.handleKeyDown}
-              @focus=${this.handleFocus}
-              @blur=${this.handleBlur}
-            />
-
-            ${hasSuffixIcon ? html`<slot
-                    name="suffix"
-                    id="input__suffix"
-                    class="input-mask__suffix"
-                  ></slot>` : ""}
-
-            ${hasClearIcon ? html`
-                    <button
-                      part="clear-button"
-                      class="input-mask__clear"
-                      type="button"
-                      aria-label=${this.localize.term("clearEntry")}
-                      @click=${this.handleClearClick}
-                    >
-                      <slot name="clear-icon">
-                        <dsa-icon name="close"></dsa-icon>
-                      </slot>
-                    </button>
-                  ` : ""}
-
-          </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>
+          type="text"
+          title=${ifDefinedAndNotEmpty(hasLabel ? void 0 : 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.maskedValue)}
+          autocomplete=${ifDefined(this.autocomplete)}
+          autocorrect=${ifDefined(this.autocorrect)}
+          ?autofocus=${this.autofocus}
+          spellcheck=${this.spellcheck}
+          enterkeyhint=${ifDefined(this.enterkeyhint)}
+          inputmode=${this.inputmode}
+          aria-label=${ifDefinedAndNotEmpty(hasLabel ? void 0 : this.title)}
+          aria-describedby=${this.getDescriptionIds()}
+          aria-invalid=${ifDefined(this.error ? "true" : void 0)}
+          @change=${this.handleChange}
+          @invalid=${this.handleInvalid}
+          @keyup=${this.handleDocumentKeyUp}
+          @keydown=${this.handleKeyDown}
+          @focus=${this.handleFocus}
+          @blur=${this.handleBlur}
+        />
 
-        ${this.error && !this.disabled && this.errorMessage !== "" ? renderFormElementErrors(this.errorMessage) : ""}
-        </div>
+        ${hasSuffixIcon ? html`<slot
+              name="suffix"
+              id="input__suffix"
+              class="input-mask__suffix"
+            ></slot>` : ""}
+        ${hasClearIcon ? html`
+              <button
+                part="clear-button"
+                class="input-mask__clear"
+                type="button"
+                aria-label=${this.localize.term("clearEntry")}
+                @click=${this.handleClearClick}
+              >
+                <slot name="clear-icon">
+                  <dsa-icon name="close" library="system"></dsa-icon>
+                </slot>
+              </button>
+            ` : ""}
       </div>
     `;
   }
@@ -372,69 +311,18 @@ __decorateClass([
 __decorateClass([
   state()
 ], DSAInputMask.prototype, "maskedValue", 2);
-__decorateClass([
-  property()
-], DSAInputMask.prototype, "title", 2);
-__decorateClass([
-  property()
-], DSAInputMask.prototype, "name", 2);
 __decorateClass([
   property()
 ], DSAInputMask.prototype, "value", 2);
 __decorateClass([
   defaultValue()
 ], DSAInputMask.prototype, "defaultValue", 2);
-__decorateClass([
-  property({ reflect: true })
-], DSAInputMask.prototype, "size", 2);
-__decorateClass([
-  property({ reflect: true })
-], DSAInputMask.prototype, "variant", 2);
-__decorateClass([
-  property()
-], DSAInputMask.prototype, "label", 2);
-__decorateClass([
-  property({ attribute: "help-text" })
-], DSAInputMask.prototype, "helpText", 2);
 __decorateClass([
   property({ type: Boolean })
 ], DSAInputMask.prototype, "clearable", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], DSAInputMask.prototype, "disabled", 2);
-__decorateClass([
-  property()
-], DSAInputMask.prototype, "placeholder", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], DSAInputMask.prototype, "readonly", 2);
-__decorateClass([
-  property({ type: Boolean })
-], DSAInputMask.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("|");
-        }
-      }
-    }
-  })
-], DSAInputMask.prototype, "errorMessage", 2);
 __decorateClass([
   property()
 ], DSAInputMask.prototype, "inputmode", 2);
-__decorateClass([
-  property({ reflect: true })
-], DSAInputMask.prototype, "form", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], DSAInputMask.prototype, "required", 2);
 __decorateClass([
   property()
 ], DSAInputMask.prototype, "pattern", 2);

package/dist/chunks/{chunk.7KYHO6CO.js → chunk.35CKPBLE.js}

@@ -50,7 +50,7 @@ var radio_styles_default = css`
     border: solid var(--dsa-wc-radio-border-width) var(--dsa-wc-radio-color);
     border-radius: 50%;
     background-color: none;
-    color: transparent;
+    color: var(--dsa-wc-radio-color);
     transition: var(--dsa-wc-transition-fast) border-color,
       var(--dsa-wc-transition-fast) background-color,
       var(--dsa-wc-transition-fast) color,

package/dist/chunks/{chunk.BUDRSMFF.js → chunk.3EZTOQNV.js}

@@ -6,10 +6,10 @@ import {
 } from "./chunk.PFGVYROJ.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";

package/dist/chunks/{chunk.FPXW7ZMC.js → chunk.3KY7QTZE.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk.UYGZPSDY.js";
 import {
   HasSlotController
-} from "./chunk.DA6UU6UL.js";
+} from "./chunk.YIY5RM53.js";
 import {
   waitForEvent
 } from "./chunk.B4BZKR24.js";
@@ -17,7 +17,7 @@ import {
 } from "./chunk.V7RJROLH.js";
 import {
   LocalizeController
-} from "./chunk.5MBTOZ4X.js";
+} from "./chunk.4ZYXTXB5.js";
 import {
   watch
 } from "./chunk.6IH66JBY.js";
@@ -176,7 +176,9 @@ var DSANavbarMenu = class extends ShoelaceElement {
       })}
             tabindex="0"
           >
-            ${this.open ? html` <dsa-icon name="chevron_left"></dsa-icon> ` : ""}
+            ${this.open ? html`
+                  <dsa-icon name="chevron_left" library="system"></dsa-icon>
+                ` : ""}
 
             <span class="navbar-menu__button__label">
               <slot name="label" class="navbar-menu__button__label"
@@ -184,7 +186,9 @@ var DSANavbarMenu = class extends ShoelaceElement {
               >
             </span>
 
-            ${!this.open ? html` <dsa-icon name="chevron_right"></dsa-icon> ` : ""}
+            ${!this.open ? html`
+                  <dsa-icon name="chevron_right" library="system"></dsa-icon>
+                ` : ""}
           </button>
 
           ${this.open ? html`
@@ -228,7 +232,11 @@ var DSANavbarMenu = class extends ShoelaceElement {
             <slot name="label">${this.label}</slot>
           </span>
 
-          <dsa-icon class="navbar-menu__icon" name="expand_more"></dsa-icon>
+          <dsa-icon
+            class="navbar-menu__icon"
+            name="expand_more"
+            library="system"
+          ></dsa-icon>
         </button>
 
         <div id="menu__panel" class="menu__panel">

package/dist/chunks/{chunk.YXVKJQFH.js → chunk.3PHQ4BLH.js}

@@ -44,7 +44,7 @@ var DSADownloadLink = class extends ShoelaceElement {
       "link--on-contrasted": this.variant === "contrasted",
       "link--floating-menu": this.variant === "floating"
     })}
-          download
+          download=${this.filename}
           href=${this.href}
           @focus=${this.handleFocus}
           @blur=${this.handleBlur}
@@ -83,6 +83,9 @@ __decorateClass([
 __decorateClass([
   property()
 ], DSADownloadLink.prototype, "size", 2);
+__decorateClass([
+  property()
+], DSADownloadLink.prototype, "filename", 2);
 DSADownloadLink = __decorateClass([
   customElement("dsa-download-link")
 ], DSADownloadLink);

package/dist/chunks/{chunk.PQR2GAOE.js → chunk.3XIJ443Y.js}

@@ -1,6 +1,6 @@
 import {
   form_control_styles_default
-} from "./chunk.EOWQAIDU.js";
+} from "./chunk.QDKQMUIQ.js";
 import {
   component_styles_default
 } from "./chunk.TUVJKY7S.js";

package/dist/chunks/{chunk.YQX6XBXO.js → chunk.43G4V4JA.js}

@@ -1,13 +1,13 @@
-import {
-  formatDateRange,
-  parseDateRange
-} from "./chunk.BY3RW35M.js";
 import {
   FilterBase
-} from "./chunk.YGFOBU5R.js";
+} from "./chunk.BLOOH4O7.js";
 import {
   filter_date_styles_default
 } from "./chunk.BNG3ZOCY.js";
+import {
+  formatDateRange,
+  parseDateRange
+} from "./chunk.BY3RW35M.js";
 import {
   getDateFromISO,
   getISOFormattedDate,
@@ -278,6 +278,7 @@ var DSAFilterDate = class extends FilterBase {
           description=${this.getDescriptionText("calendarButton")}
           ?disabled=${this.disabled || this.readonly}
           @mousedown=${this.handleFilterTriggerMouseDown}
+          library="system"
         >
         </dsa-icon-button>
       </fieldset>
@@ -310,7 +311,7 @@ var DSAFilterDate = class extends FilterBase {
           @click=${this.handleReset}
           ?disabled=${this.value === ""}
         >
-          <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>
       </div>

package/dist/chunks/{chunk.DMX6VF2L.js → chunk.47JHZBMB.js}

@@ -1,6 +1,6 @@
 import {
   form_control_styles_default
-} from "./chunk.EOWQAIDU.js";
+} from "./chunk.QDKQMUIQ.js";
 import {
   component_styles_default
 } from "./chunk.TUVJKY7S.js";

package/dist/chunks/{chunk.GAC47LAL.js → chunk.4P45LB2J.js}

@@ -6,7 +6,7 @@ import {
 } from "./chunk.EMIT7S33.js";
 import {
   LocalizeController
-} from "./chunk.5MBTOZ4X.js";
+} from "./chunk.4ZYXTXB5.js";
 import {
   watch
 } from "./chunk.6IH66JBY.js";
@@ -187,7 +187,7 @@ var DSATabGroup = class extends ShoelaceElement {
       this.tabs.map((el) => {
         const isActive = el === this.activeTab;
         el.active = isActive;
-        el.tab.tabIndex = isActive ? 0 : -1;
+        el.tabIndex = isActive ? 0 : -1;
         return el;
       });
       this.panels.map((el) => {
@@ -258,9 +258,9 @@ var DSATabGroup = class extends ShoelaceElement {
     this.panels = this.getAllPanels();
     let activeIndex = -1;
     this.tabs.forEach((tab, index) => {
-      tab.tab.tabIndex = -1;
+      tab.tabIndex = -1;
       if (tab.active) {
-        tab.tab.tabIndex = 0;
+        tab.tabIndex = 0;
         activeIndex = index;
       }
     });
@@ -318,6 +318,7 @@ var DSATabGroup = class extends ShoelaceElement {
                   name=${isRtl ? "chevron_right" : "chevron_left"}
                   label=${this.localize.term("scrollToStart")}
                   @click=${this.handleScrollToStart}
+                  library="system"
                 ></dsa-icon-button>
               ` : ""}
 
@@ -339,6 +340,7 @@ var DSATabGroup = class extends ShoelaceElement {
                   name=${isRtl ? "chevron_left" : "chevron_right"}
                   label=${this.localize.term("scrollToEnd")}
                   @click=${this.handleScrollToEnd}
+                  library="system"
                 ></dsa-icon-button>
               ` : ""}
         </div>

package/dist/chunks/{chunk.5MBTOZ4X.js → chunk.4ZYXTXB5.js}

@@ -38,7 +38,9 @@ var translation = {
   stepError: "\xC9tape en erreur",
   skipLinksAriaLabel: `Liens d'acc\xE8s rapide`,
   errorMessagePanelCodePrefix: "Code d'erreur: ",
-  fileSelect: (multiple) => {
+  fileSelect: (directory, multiple) => {
+    if (directory)
+      return "S\xE9lect. dossier";
     if (multiple)
       return "S\xE9lect. fichiers";
     return "Choisir un fichier";
@@ -193,7 +195,9 @@ var translation2 = {
   stepError: "Step in error",
   skipLinksAriaLabel: `Skip links`,
   errorMessagePanelCodePrefix: "Error code: ",
-  fileSelect: (multiple) => {
+  fileSelect: (directory, multiple) => {
+    if (directory)
+      return "Select a directory";
     if (multiple)
       return "Select files";
     return "Choose a file";