@ds-autonomie/web-components 2.7.1 → 2.8.1

package/CHANGELOG.md

@@ -1,5 +1,40 @@
 # @ds-autonomie/web-components
 
+## 2.8.1
+
+### Patch Changes
+
+- 49132cd: `sidenav` : (a11y) ajout d'aria-labels en mode collapsed
+- 05288d4: `input-time` : émission de dsa-change lors de l'ouverture du panneau sans valeur initiale
+
+## 2.8.0
+
+### Minor Changes
+
+- f90bad2: `search` : ajout du composant recherche
+- 941ea97: `sidenav` : ajout du composant ;
+  `menu-accordion` : ajout de l'attribut `size`, ajout des slots `prefix` et `badge` ;
+  `menu-label` : ajustement rendu ;
+- f2aa551: `page-header` : ajout de la propriété `reduced` pour l'affichage limité
+- 388c7ba: `card-content` : ajout/modification des tailles `medium`/`small`
+
+### Patch Changes
+
+- 674f38d: `input-date`, `input-time` : dans un drawer, empêcher l'appui sur Echap pour fermer la popup de fermer également le drawer
+- 263d113: `table-action` : mise à jour du style
+- fcf11b5: `table-container` : (a11y) Empecher d'atteindre la barre d'outil avec le lecteur d'écran si la barre d'action est affichée; `table-actions` : (a11y) empêcher d'atteindre la barre d'action au lecteur d'écran lorsqu'elle est cachée; `select`, `combobox`: désactivation des tags lorsque l'élément est désactivé
+- 8f68653: `fieldset` : modification pour permettre aux champs enfants d'être désactivé de manière individuelle
+- 6e512ce: `combobox`, `dialog`, `drawer`, `navbar-menu`, `select` : suppression d'attributs tabindex inutiles
+- feec186: `file-upload` : changement du style du bouton de `primary` à `secondary`
+- 99c1894: `tag` : ajout des variantes `neutral`, et ajustement des couleurs disponibles (100 à 400)
+- a59c265: `switch` : renommage des attributs pour les libéllés des états on et off
+- 180407a: `accordion` : résolution du problème de z-index dans le slot "actions"
+- 5a60230: `tree-item` : séparation des comportement d'ouverture et de sélection, ajout d'un icone check pour la sélection simple
+- Updated dependencies [263d113]
+- Updated dependencies [99c1894]
+- Updated dependencies [0ff990d]
+  - @ds-autonomie/assets@1.4.9
+
 ## 2.7.1
 
 ### Patch Changes

package/cdn/chunks/{chunk.H5LXYWU4.js → chunk.2MMASCIR.js}

@@ -1,6 +1,6 @@
 import {
   accordion_styles_default
-} from "./chunk.4NCJ5UUW.js";
+} from "./chunk.ZI6HZEZQ.js";
 import {
   HasSlotController
 } from "./chunk.YIY5RM53.js";
@@ -21,7 +21,7 @@ import {
 } from "./chunk.PWL7QCVG.js";
 import {
   LocalizeController
-} from "./chunk.EM2CIX7W.js";
+} from "./chunk.57JI3UNH.js";
 import {
   o
 } from "./chunk.XED65RH5.js";

package/cdn/chunks/{chunk.QWF2EIS5.js → chunk.32DAUHJ6.js}

@@ -1,6 +1,6 @@
 import {
   tree_item_styles_default
-} from "./chunk.VQ6RNAGR.js";
+} from "./chunk.3VGPRUUT.js";
 import {
   l
 } from "./chunk.LDYYA5WE.js";
@@ -15,7 +15,7 @@ import {
 } from "./chunk.2WRFDMKN.js";
 import {
   LocalizeController
-} from "./chunk.EM2CIX7W.js";
+} from "./chunk.57JI3UNH.js";
 import {
   e2
 } from "./chunk.JY4LUWQC.js";
@@ -222,6 +222,15 @@ var DSATreeItem = class extends ShoelaceElement {
     )}
 
           <slot class="tree-item__label" part="label"></slot>
+
+          ${n2(
+      !this.selectable && this.selected,
+      () => x` <dsa-icon
+                class="tree-item__selected-icon"
+                name="check"
+                library="system"
+              ></dsa-icon>`
+    )}
         </div>
 
         <slot

package/cdn/chunks/{chunk.2Y5NYPC2.js → chunk.36Y6T57J.js}

@@ -6,7 +6,7 @@ import {
 } from "./chunk.YIY5RM53.js";
 import {
   LocalizeController
-} from "./chunk.EM2CIX7W.js";
+} from "./chunk.57JI3UNH.js";
 import {
   o
 } from "./chunk.XED65RH5.js";

package/cdn/chunks/{chunk.VQ6RNAGR.js → chunk.3VGPRUUT.js}

@@ -128,6 +128,13 @@ var tree_item_styles_default = i`
     transition: var(--dsa-wc-transition-fast) color;
   }
 
+  .tree-item__selected-icon {
+    margin-inline-start: auto;
+    margin-inline-end: var(--dsa-spacing-8);
+    font: var(--dsa-wc-tree-item-font);
+    color: var(--dsa-wc-tree-item-selected-border-color);
+  }
+
   .tree-item__children {
     display: block;
     font-size: calc(1em + var(--dsa-wc-tree-indent-size));

package/cdn/chunks/{chunk.YKUXDSKS.js → chunk.3VYO2UYA.js}

@@ -1,9 +1,12 @@
+import {
+  DEPRECATED_TAG_VARIANTS
+} from "./chunk.WFSNJLGP.js";
 import {
   tag_styles_default
-} from "./chunk.TY7XK6UL.js";
+} from "./chunk.FSMUXFAQ.js";
 import {
   LocalizeController
-} from "./chunk.EM2CIX7W.js";
+} from "./chunk.57JI3UNH.js";
 import {
   e2 as e
 } from "./chunk.JY4LUWQC.js";
@@ -51,6 +54,13 @@ var DSATag = class extends ShoelaceElement {
     }
   }
   render() {
+    if (DEPRECATED_TAG_VARIANTS.includes(
+      this.variant
+    )) {
+      console.warn(
+        `The ${this.variant} variant of <dsa-tag> is deprecated, and will be removed in the next major release. Please consider using a variant from 100 to 500 instead.`
+      );
+    }
     return x`
       <span
         part="base"

package/cdn/chunks/{chunk.XQSTAOEF.js → chunk.3Z2GKRZW.js}

@@ -1,6 +1,6 @@
 import {
   form_control_styles_default
-} from "./chunk.Z67R2PEC.js";
+} from "./chunk.VCFEF4I5.js";
 import {
   component_styles_default
 } from "./chunk.MQAAYEM3.js";

package/cdn/chunks/{chunk.OA2FMS3O.js → chunk.46MVNLKZ.js}

@@ -1,6 +1,6 @@
 import {
   LocalizeController
-} from "./chunk.EM2CIX7W.js";
+} from "./chunk.57JI3UNH.js";
 import {
   ShoelaceElement,
   n,

package/cdn/chunks/chunk.4DEEMH54.js

@@ -0,0 +1,229 @@
+import {
+  search_styles_default
+} from "./chunk.L43WS4PE.js";
+import {
+  l
+} from "./chunk.LDYYA5WE.js";
+import {
+  renderFormElementErrors
+} from "./chunk.PZK4ARTY.js";
+import {
+  HasSlotController
+} from "./chunk.YIY5RM53.js";
+import {
+  ifDefinedAndNotEmpty
+} from "./chunk.SUUV7E4I.js";
+import {
+  LocalizeController
+} from "./chunk.57JI3UNH.js";
+import {
+  o
+} from "./chunk.XED65RH5.js";
+import {
+  e2
+} from "./chunk.JY4LUWQC.js";
+import {
+  ShoelaceElement,
+  e,
+  n,
+  r,
+  t
+} from "./chunk.EW5LC4ZI.js";
+import {
+  x
+} from "./chunk.JXF4O366.js";
+import {
+  __decorateClass
+} from "./chunk.4ZGVANML.js";
+
+// src/components/search/search.ts
+var DSASearch = class extends ShoelaceElement {
+  constructor() {
+    super(...arguments);
+    this.localize = new LocalizeController(this);
+    this.hasSlotController = new HasSlotController(
+      this,
+      "help-text"
+    );
+    this.hasFocus = false;
+    this.size = "medium";
+    this.variant = "base";
+    this.value = "";
+    this.helpText = "";
+    this.error = false;
+    this.errorMessage = "";
+  }
+  handleChange() {
+    this.value = this.input.value;
+    this.emit("dsa-change");
+  }
+  handleInput() {
+    this.value = this.input.value;
+    this.emit("dsa-input");
+  }
+  handleInputFocus() {
+    this.hasFocus = true;
+    this.emit("dsa-focus");
+  }
+  handleInputBlur() {
+    this.hasFocus = false;
+    this.emit("dsa-blur");
+  }
+  handleClearClick(event) {
+    this.value = "";
+    this.emit("dsa-clear");
+    this.emit("dsa-input");
+    this.emit("dsa-change");
+    this.input.focus();
+    event.stopPropagation();
+  }
+  handleKeyDown(event) {
+    event.stopPropagation();
+    const hasModifier = event.metaKey || event.ctrlKey || event.shiftKey || event.altKey;
+    if (event.key === "Enter" && !hasModifier) {
+      setTimeout(() => {
+        if (!event.defaultPrevented && !event.isComposing) {
+          this.handleSubmitClick();
+        }
+      });
+    }
+  }
+  handleSubmitClick() {
+    this.emit("dsa-submit");
+  }
+  getDescriptionIds() {
+    const hasHelpTextSlot = this.hasSlotController.test("help-text");
+    const hasHelpText = this.helpText ? true : !!hasHelpTextSlot;
+    let ids = [];
+    if (this.error) ids = [...ids, "error-text"];
+    if (hasHelpText) ids = [...ids, "help-text"];
+    return ids.join(" ");
+  }
+  render() {
+    const iconButtonSize = (() => {
+      switch (this.size) {
+        case "small":
+          return "large";
+        case "large":
+          return "2xlarge";
+        default:
+          return "xlarge";
+      }
+    })();
+    return x`
+      <div
+        class=${e2({
+      "search-bar": true,
+      "search-bar--error": this.error,
+      "search-bar--small": this.size === "small",
+      "search-bar--medium": this.size === "medium",
+      "search-bar--large": this.size === "large",
+      "search-bar--on-layer": this.variant === "layer",
+      "search-bar--on-base": this.variant === "base",
+      "search-bar--on-floating": this.variant === "floating"
+    })}
+      >
+        <div class="search-bar__wrapper">
+          <div
+            class=${e2({ input: true, "input--focused": this.hasFocus })}
+          >
+            <input
+              class="input__control"
+              type="search"
+              placeholder=${this.localize.term("search")}
+              aria-label=${this.localize.term("search")}
+              aria-describedby=${ifDefinedAndNotEmpty(this.getDescriptionIds())}
+              aria-invalid=${o(this.error ? "true" : void 0)}
+              title=${this.localize.term("search")}
+              .value=${l(this.value)}
+              @change=${this.handleChange}
+              @input=${this.handleInput}
+              @focus=${this.handleInputFocus}
+              @blur=${this.handleInputBlur}
+              @keydown=${this.handleKeyDown}
+            />
+            ${this.value.length > 0 ? x`
+                  <dsa-icon-button
+                    id="clear-button"
+                    part="clear-button"
+                    name="clear"
+                    label=${this.localize.term("clearEntry")}
+                    @click=${this.handleClearClick}
+                    size=${this.size === "large" ? "large" : "medium"}
+                    library="system"
+                  ></dsa-icon-button>
+                ` : ""}
+          </div>
+
+          <dsa-icon-button
+            id="submit-button"
+            name="search"
+            library="system"
+            label=${this.localize.term("search")}
+            variant="primary"
+            ?floating=${this.variant === "floating"}
+            size=${iconButtonSize}
+            @click=${this.handleSubmitClick}
+          >
+          </dsa-icon-button>
+        </div>
+
+        <slot name="help-text" id="help-text" class="search-bar__help-text">
+          ${this.helpText}
+        </slot>
+
+        ${this.error && this.errorMessage !== "" ? renderFormElementErrors(this.errorMessage, this.variant) : ""}
+      </div>
+    `;
+  }
+};
+DSASearch.styles = search_styles_default;
+__decorateClass([
+  e(".input__control")
+], DSASearch.prototype, "input", 2);
+__decorateClass([
+  e("#submit-button")
+], DSASearch.prototype, "submitButton", 2);
+__decorateClass([
+  e("#clear-button")
+], DSASearch.prototype, "clearButton", 2);
+__decorateClass([
+  r()
+], DSASearch.prototype, "hasFocus", 2);
+__decorateClass([
+  n({ reflect: true })
+], DSASearch.prototype, "size", 2);
+__decorateClass([
+  n({ reflect: true })
+], DSASearch.prototype, "variant", 2);
+__decorateClass([
+  n()
+], DSASearch.prototype, "value", 2);
+__decorateClass([
+  n({ attribute: "help-text" })
+], DSASearch.prototype, "helpText", 2);
+__decorateClass([
+  n({ type: Boolean })
+], DSASearch.prototype, "error", 2);
+__decorateClass([
+  n({
+    attribute: "error-message",
+    converter: {
+      fromAttribute: (value) => value ? value.split("|") : "",
+      toAttribute: (value) => {
+        if (typeof value === "string") {
+          return value;
+        } else {
+          return value.join("|");
+        }
+      }
+    }
+  })
+], DSASearch.prototype, "errorMessage", 2);
+DSASearch = __decorateClass([
+  t("dsa-search")
+], DSASearch);
+
+export {
+  DSASearch
+};

package/cdn/chunks/{chunk.RIREJ6N6.js → chunk.4XTF2ZKZ.js}

@@ -30,7 +30,7 @@ import {
 } from "./chunk.SUUV7E4I.js";
 import {
   LocalizeController
-} from "./chunk.EM2CIX7W.js";
+} from "./chunk.57JI3UNH.js";
 import {
   o
 } from "./chunk.XED65RH5.js";
@@ -275,7 +275,6 @@ var DSADrawer = class extends ShoelaceElement {
           part="overlay"
           class="drawer__overlay"
           @click=${() => this.requestClose("overlay")}
-          tabindex="-1"
         ></div>
 
         <div

package/cdn/chunks/{chunk.EM2CIX7W.js → chunk.57JI3UNH.js}

@@ -150,6 +150,9 @@ var translation = {
   userMenu: "Menu utilisateur",
   switchOn: "Activ\xE9",
   switchOff: "D\xE9sactiv\xE9",
+  sidenav: "Navigation lat\xE9rale",
+  expandSidenav: "D\xE9velopper la navigation lat\xE9rale",
+  collapseSidenav: "R\xE9duire la navigation lat\xE9rale",
   // countries and regions
   fr_FR: "France",
   fr_GP: "Guadeloupe, Saint-Barth\xE9lemy et Saint-Martin",
@@ -315,6 +318,9 @@ var translation2 = {
   userMenu: "User Menu",
   switchOn: "On",
   switchOff: "Off",
+  sidenav: "Side navigation",
+  expandSidenav: "Expand side navigation",
+  collapseSidenav: "Collapse side navigation",
   // countries and regions
   fr_FR: "France",
   fr_GP: "Guadeloupe",

package/cdn/chunks/{chunk.JBUTAD7Y.js → chunk.5FH6QU4A.js}

@@ -43,7 +43,7 @@ var DSAFieldset = class extends ShoelaceElement {
     var _a;
     const children = (_a = this.defaultSlot) == null ? void 0 : _a.assignedElements();
     children == null ? void 0 : children.forEach((child) => {
-      if ("disabled" in child) {
+      if ("disabled" in child && !child.disabled) {
         child.disabled = this.disabled;
       }
     });

package/cdn/chunks/{chunk.IRKLMCCV.js → chunk.5R2EV6NZ.js}

@@ -1,6 +1,6 @@
 import {
   input_base_styles_default
-} from "./chunk.6GRHC4QP.js";
+} from "./chunk.S442ESGW.js";
 import {
   i
 } from "./chunk.UKK3NS3L.js";

package/cdn/chunks/{chunk.DHNNNXA5.js → chunk.6BIIFPUX.js}

@@ -1,6 +1,6 @@
 import {
   input_time_styles_default
-} from "./chunk.IRKLMCCV.js";
+} from "./chunk.5R2EV6NZ.js";
 import {
   compareTimeStrings,
   setTimeStringValue,
@@ -8,7 +8,7 @@ import {
 } from "./chunk.IONY2GZF.js";
 import {
   InputBase
-} from "./chunk.DDR5VWG6.js";
+} from "./chunk.FWUVNYIG.js";
 import {
   l
 } from "./chunk.LDYYA5WE.js";
@@ -31,7 +31,7 @@ import {
 } from "./chunk.SUUV7E4I.js";
 import {
   LocalizeController
-} from "./chunk.EM2CIX7W.js";
+} from "./chunk.57JI3UNH.js";
 import {
   o
 } from "./chunk.XED65RH5.js";
@@ -68,19 +68,16 @@ var DSAInputTime = class extends InputBase {
   connectedCallback() {
     super.connectedCallback();
     this.handleDocumentFocusIn = this.handleDocumentFocusIn.bind(this);
-    this.handleDocumentKeyDown = this.handleDocumentKeyDown.bind(this);
     this.handleDocumentMouseDown = this.handleDocumentMouseDown.bind(this);
   }
   //Adds opened dropdown event listeners
   addOpenListeners() {
     document.addEventListener("focusin", this.handleDocumentFocusIn);
-    document.addEventListener("keydown", this.handleDocumentKeyDown);
     document.addEventListener("mousedown", this.handleDocumentMouseDown);
   }
   //Removes opened dropdown event listeners
   removeOpenListeners() {
     document.removeEventListener("focusin", this.handleDocumentFocusIn);
-    document.removeEventListener("keydown", this.handleDocumentKeyDown);
     document.removeEventListener("mousedown", this.handleDocumentMouseDown);
   }
   handleDocumentFocusIn(event) {
@@ -95,10 +92,10 @@ var DSAInputTime = class extends InputBase {
       this.hideTimePicker();
     }
   }
-  handleDocumentKeyDown(event) {
-    event.stopPropagation();
+  handleDefaultKeyDown(event) {
     if (this.isTimePickerOpen && event.key === "Escape") {
       event.preventDefault();
+      event.stopPropagation();
       this.hideTimePicker();
     }
     if (this.isTimePickerOpen && event.key === "Tab") {
@@ -158,11 +155,11 @@ var DSAInputTime = class extends InputBase {
       await stopAnimations(this);
       this.popup.active = false;
       this.timePickerButton.button.setAttribute("aria-expanded", "false");
+      this.timePickerButton.focus({ preventScroll: true });
       const { keyframes, options } = getAnimation(this, "time-popup.hide", {
         dir: this.localize.dir()
       });
       await animateTo(this.popup.popup, keyframes, options);
-      this.timePickerButton.focus({ preventScroll: true });
       this.emit("dsa-after-hide");
     }
   }
@@ -178,8 +175,10 @@ var DSAInputTime = class extends InputBase {
   async showTimePicker() {
     if (this.value === "" || compareTimeStrings(this.value, this.min) === -1) {
       this.value = this.min;
+      this.emit("dsa-change");
     } else if (compareTimeStrings(this.value, this.max) === 1) {
       this.value = this.max;
+      this.emit("dsa-change");
     }
     this.isTimePickerOpen = true;
     return await waitForEvent(this, "dsa-after-show");
@@ -410,6 +409,7 @@ var DSAInputTime = class extends InputBase {
       "input--empty": !this.value,
       "form-control--has-prefix-icon": hasPrefixIcon
     })}
+        @keydown=${this.handleDefaultKeyDown}
       >
         <slot
           name="prefix"

package/cdn/chunks/{chunk.ICB64ITZ.js → chunk.6MHC5DNA.js}

@@ -1,6 +1,6 @@
 import {
   input_base_styles_default
-} from "./chunk.6GRHC4QP.js";
+} from "./chunk.S442ESGW.js";
 import {
   i
 } from "./chunk.UKK3NS3L.js";

package/cdn/chunks/{chunk.AAIT63AW.js → chunk.6P7WH7AZ.js}

@@ -1,6 +1,6 @@
 import {
   DSARadioGroup
-} from "./chunk.6UZBVLUM.js";
+} from "./chunk.RO655SBI.js";
 import {
   FormSelectableCard
 } from "./chunk.HLQS67ES.js";

package/cdn/chunks/{chunk.OIIMIRMI.js → chunk.6PLXHBET.js}

@@ -1,6 +1,6 @@
 import {
   form_control_styles_default
-} from "./chunk.Z67R2PEC.js";
+} from "./chunk.VCFEF4I5.js";
 import {
   component_styles_default
 } from "./chunk.MQAAYEM3.js";

package/cdn/chunks/{chunk.OXTOMS7Z.js → chunk.6QCIYDOP.js}

@@ -6,7 +6,7 @@ import {
 } from "./chunk.UUAI33MM.js";
 import {
   LocalizeController
-} from "./chunk.EM2CIX7W.js";
+} from "./chunk.57JI3UNH.js";
 import {
   o
 } from "./chunk.XED65RH5.js";

package/cdn/chunks/{chunk.PUGGE6YS.js → chunk.6UXGYL2N.js}

@@ -1,9 +1,9 @@
 import {
   select_styles_default
-} from "./chunk.CGWQEFIA.js";
+} from "./chunk.CRX7KUAK.js";
 import {
   FormControlLayout
-} from "./chunk.OSDQDIQK.js";
+} from "./chunk.SI2RABQ3.js";
 import {
   scrollIntoView
 } from "./chunk.EMIT7S33.js";
@@ -29,7 +29,7 @@ import {
 } from "./chunk.SUUV7E4I.js";
 import {
   LocalizeController
-} from "./chunk.EM2CIX7W.js";
+} from "./chunk.57JI3UNH.js";
 import {
   o
 } from "./chunk.XED65RH5.js";
@@ -283,7 +283,7 @@ var DSASelect = class extends FormControlLayout {
   }
   handleTagRemove(event, option) {
     event.stopPropagation();
-    if (!this.disabled) {
+    if (!this.disabled && !this.readonly) {
       this.focusNextTagOrInput(option);
       this.toggleOptionSelection(option, false);
       this.updateComplete.then(() => {
@@ -541,7 +541,6 @@ var DSASelect = class extends FormControlLayout {
       hasLabel ? void 0 : this.title
     )}
             role="combobox"
-            tabindex="0"
             @focus=${this.handleFocus}
             @blur=${this.handleBlur}
           />
@@ -561,6 +560,7 @@ var DSASelect = class extends FormControlLayout {
                               "
                           size=${this.size}
                           removable
+                          ?disable-removable-focus=${this.disabled || this.readonly}
                           @dsa-remove=${(event) => this.handleTagRemove(event, option)}
                           label=${option.getTextLabel()}
                         >

package/cdn/chunks/{chunk.PB3XIUKQ.js → chunk.77VY2UR4.js}

@@ -4,10 +4,10 @@ import {
 } from "./chunk.I6S6TC3T.js";
 import {
   input_native_styles_default
-} from "./chunk.PSEUH4XD.js";
+} from "./chunk.UIHXF3PF.js";
 import {
   InputBase
-} from "./chunk.DDR5VWG6.js";
+} from "./chunk.FWUVNYIG.js";
 import {
   l
 } from "./chunk.LDYYA5WE.js";
@@ -16,7 +16,7 @@ import {
 } from "./chunk.SUUV7E4I.js";
 import {
   LocalizeController
-} from "./chunk.EM2CIX7W.js";
+} from "./chunk.57JI3UNH.js";
 import {
   o
 } from "./chunk.XED65RH5.js";
@@ -71,6 +71,7 @@ var DSAInputNative = class extends InputBase {
       "input--success": this.success && !this.error,
       "input--on-layer": this.variant === "layer",
       "input--on-base": this.variant === "base",
+      "input--on-floating-menu": this.variant === "floating",
       "input--disabled": this.disabled,
       "input--readonly": this.readonly,
       "input--focused": this.hasFocus,

package/cdn/chunks/{chunk.WI43OAV3.js → chunk.7JC3OWVV.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk.OAM7FL75.js";
 import {
   FilterBase
-} from "./chunk.727KD4JC.js";
+} from "./chunk.EXKO4BNS.js";
 import {
   watch
 } from "./chunk.4FQJ3QJK.js";