@ds-autonomie/web-components 2.19.0 → 2.21.0

package/dist/chunks/{chunk.JATRBE3H.js → chunk.DEEMRWEE.js}

@@ -3,28 +3,28 @@ import {
 } from "./chunk.2LB4AUIL.js";
 import {
   DSAInput
-} from "./chunk.QUEYKUIS.js";
+} from "./chunk.C6BC46KV.js";
 import {
   FilterBase
-} from "./chunk.4VSGAJJL.js";
-import {
-  scrollIntoView
-} from "./chunk.EMIT7S33.js";
+} from "./chunk.KOO2JWHZ.js";
 import {
   DSAOption
-} from "./chunk.SAQFLKP7.js";
+} from "./chunk.WEWJQ2AA.js";
 import {
-  normalizeStr
-} from "./chunk.PSYTLBRK.js";
+  scrollIntoView
+} from "./chunk.EMIT7S33.js";
 import {
   DSAVisuallyHidden
 } from "./chunk.JIN6PGAK.js";
 import {
   DSAButton
-} from "./chunk.SXFVCR7O.js";
+} from "./chunk.2G35OVLZ.js";
 import {
   DSAIcon
-} from "./chunk.CKJJ4MSU.js";
+} from "./chunk.YPBLUIU7.js";
+import {
+  normalizeStr
+} from "./chunk.PSYTLBRK.js";
 import {
   watch
 } from "./chunk.QB2NJE2Y.js";
@@ -50,6 +50,8 @@ var DSAFilterSelect = class extends FilterBase {
     this.nbOptions = 0;
     this.seeAll = false;
     this.debounceTimerId = null;
+    this.optionsByValue = /* @__PURE__ */ new Map();
+    this.normalizedLabelsByValue = /* @__PURE__ */ new Map();
     this.value = "";
     this.multiple = false;
     this.maxVisibleListLength = 5;
@@ -64,6 +66,13 @@ var DSAFilterSelect = class extends FilterBase {
     this.nbOptions = this.allOptions.length;
     this.filterOptions();
   }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    if (this.debounceTimerId !== null) {
+      clearTimeout(this.debounceTimerId);
+      this.debounceTimerId = null;
+    }
+  }
   handleKeyDown(event) {
     super.handleKeyDown(event);
     const path = event.composedPath();
@@ -142,16 +151,16 @@ var DSAFilterSelect = class extends FilterBase {
           () => this.filterTrigger.focus({ preventScroll: true })
         );
         this.hide();
-        this.filterTrigger.focus({ preventScroll: true });
       }
     }
   }
   filterOptions() {
     if (this.searchValue.length > 0) {
+      const normalizedSearchValue = normalizeStr(this.searchValue);
       this.displayedOptions = this.allOptions.filter((option) => {
-        return normalizeStr(option.innerText).includes(
-          normalizeStr(this.searchValue)
-        );
+        var _a;
+        const normalizedLabel = (_a = this.normalizedLabelsByValue.get(option.value)) != null ? _a : normalizeStr(option.innerText);
+        return normalizedLabel.includes(normalizedSearchValue);
       });
     } else if (!this.seeAll && this.maxVisibleListLength > 0) {
       this.displayedOptions = this.allOptions.slice(
@@ -198,6 +207,8 @@ var DSAFilterSelect = class extends FilterBase {
   getAllOptions() {
     const optionsNodeList = this.querySelectorAll(OPTION_TAG);
     const allOptions = [];
+    this.optionsByValue.clear();
+    this.normalizedLabelsByValue.clear();
     optionsNodeList.forEach((option) => {
       option.role = this.multiple ? "checkbox" : "radio";
       const clonedOption = option.cloneNode(true);
@@ -207,6 +218,11 @@ var DSAFilterSelect = class extends FilterBase {
       clonedOption.classList.add("filter-select__option");
       clonedOption.onfocus = this.handleOptionFocus.bind(this);
       allOptions.push(clonedOption);
+      this.optionsByValue.set(option.value, option);
+      this.normalizedLabelsByValue.set(
+        option.value,
+        normalizeStr(clonedOption.innerText)
+      );
     });
     return allOptions;
   }
@@ -231,17 +247,22 @@ var DSAFilterSelect = class extends FilterBase {
     this.allOptions.forEach((el) => el.selected = false);
     if (newSelectedOptions.length) {
       newSelectedOptions.forEach((el) => {
+        const rootOption = this.optionsByValue.get(el.value);
+        if (!rootOption) {
+          return;
+        }
         el.selected = true;
-        this.allOptions.find(
-          (rootOption) => rootOption.value === el.value
-        ).selected = true;
+        rootOption.selected = true;
       });
     }
     this.selectionChanged();
   }
   // Toggles an option's selected state
   toggleOptionSelection(option, force) {
-    const rootOption = this.allOptions.find((el) => el.value === option.value);
+    const rootOption = this.optionsByValue.get(option.value);
+    if (!rootOption) {
+      return;
+    }
     if (force === true || force === false) {
       rootOption.selected = force;
     } else {
@@ -254,8 +275,9 @@ var DSAFilterSelect = class extends FilterBase {
     var _a, _b;
     this.selectedOptions = this.allOptions.filter((el) => el.selected);
     this.filterOptions();
+    const selectedValues = new Set(this.selectedOptions.map((el) => el.value));
     this.displayedOptions.forEach((option) => {
-      option.selected = this.selectedOptions.map((el) => el.value).includes(option.value);
+      option.selected = selectedValues.has(option.value);
     });
     if (this.multiple) {
       this.value = this.selectedOptions.map((el) => el.value);

package/dist/chunks/{chunk.WJFVQRWU.js → chunk.DIRVCY5C.js}

@@ -1,6 +1,6 @@
 import {
   DSAIcon
-} from "./chunk.CKJJ4MSU.js";
+} from "./chunk.YPBLUIU7.js";
 import {
   ShoelaceElement
 } from "./chunk.SVWU6JW4.js";

package/dist/chunks/{chunk.XAYOMJ4X.js → chunk.DJFSPHO4.js}

@@ -5,16 +5,16 @@ import {
   cnsaLogoNoSubtextSvg,
   spaLogoSvg
 } from "./chunk.7TLERCGA.js";
-import {
-  removeAttributeIfPresent,
-  setAttributeIfDifferent
-} from "./chunk.PSYTLBRK.js";
 import {
   HasSlotController
 } from "./chunk.YIY5RM53.js";
 import {
   LocalizeController
-} from "./chunk.34HS7ICN.js";
+} from "./chunk.DVIHNMQQ.js";
+import {
+  removeAttributeIfPresent,
+  setAttributeIfDifferent
+} from "./chunk.PSYTLBRK.js";
 import {
   watch
 } from "./chunk.QB2NJE2Y.js";

package/dist/chunks/{chunk.34HS7ICN.js → chunk.DVIHNMQQ.js}

@@ -37,7 +37,7 @@ var translation = {
   stepInProgress: "\xC9tape en cours",
   stepError: "\xC9tape en erreur",
   skipLinksAriaLabel: `Liens d'acc\xE8s rapide`,
-  errorMessagePanelCodePrefix: "Code d'erreur: ",
+  errorMessagePanelCodePrefix: "Code d'erreur : ",
   fileSelect: (directory, multiple) => {
     if (directory) return "Choisir un dossier";
     if (multiple) return "Choisir des fichiers";
@@ -162,11 +162,12 @@ var translation = {
   sidenav: "Navigation lat\xE9rale",
   toggleSidenav: "D\xE9velopper/R\xE9duire la navigation lat\xE9rale",
   copied: "Texte copi\xE9 dans le presse-papiers",
-  copyError: "Echec de la copie",
+  copyError: "\xC9chec de la copie",
   info: "Information",
   warning: "Attention",
   error: "Erreur",
   success: "Succ\xE8s",
+  closeBanner: "Fermer le bandeau",
   // countries and regions
   fr_FR: "France",
   fr_GP: "Guadeloupe, Saint-Barth\xE9lemy et Saint-Martin",
@@ -352,6 +353,7 @@ var translation2 = {
   warning: "Warning",
   error: "Error",
   success: "Success",
+  closeBanner: "Close banner",
   // countries and regions
   fr_FR: "France",
   fr_GP: "Guadeloupe",

package/dist/chunks/{chunk.H26XMOUA.js → chunk.DX7525EY.js}

@@ -1,6 +1,6 @@
 import {
   LocalizeController
-} from "./chunk.34HS7ICN.js";
+} from "./chunk.DVIHNMQQ.js";
 import {
   ShoelaceElement
 } from "./chunk.SVWU6JW4.js";

package/dist/chunks/{chunk.WEPA3NJG.js → chunk.DZLEAEG5.js}

@@ -1,6 +1,6 @@
 import {
   drawer_styles_default
-} from "./chunk.LO42XUHN.js";
+} from "./chunk.HAWD2P5K.js";
 import {
   Modal
 } from "./chunk.STZAPPWR.js";
@@ -13,7 +13,7 @@ import {
 } from "./chunk.YIY5RM53.js";
 import {
   DSAIconButton
-} from "./chunk.WNESPUKK.js";
+} from "./chunk.2GTXVMMC.js";
 import {
   waitForEvent
 } from "./chunk.B4BZKR24.js";
@@ -33,7 +33,7 @@ import {
 } from "./chunk.ZQJVCRB2.js";
 import {
   LocalizeController
-} from "./chunk.34HS7ICN.js";
+} from "./chunk.DVIHNMQQ.js";
 import {
   watch
 } from "./chunk.QB2NJE2Y.js";
@@ -93,10 +93,11 @@ var DSADrawer = class extends ShoelaceElement {
       detail: { source }
     });
     if (dsaRequestClose.defaultPrevented) {
+      const { localize, panel } = this;
       const animation = getAnimation(this, "drawer.denyClose", {
-        dir: this.localize.dir()
+        dir: localize.dir()
       });
-      animateTo(this.panel, animation.keyframes, animation.options);
+      animateTo(panel, animation.keyframes, animation.options);
       return;
     }
     this.hide();
@@ -109,10 +110,7 @@ var DSADrawer = class extends ShoelaceElement {
   }
   handleDocumentKeyDown(event) {
     if (this.open && !this.contained && event.key === "Escape") {
-      const tooltipChildren = this.querySelectorAll("dsa-tooltip");
-      const isTooltipOpen = Array.from(tooltipChildren).some(
-        (tooltip) => tooltip.open
-      );
+      const isTooltipOpen = !!this.querySelector("dsa-tooltip[open]");
       if (!isTooltipOpen) {
         event.stopPropagation();
         this.requestClose("keyboard");
@@ -124,7 +122,8 @@ var DSADrawer = class extends ShoelaceElement {
       this.emit("dsa-show");
       this.addOpenListeners();
       this.originalTrigger = document.activeElement;
-      if (!this.contained) {
+      const { drawer, panel, overlay, contained, placement, localize } = this;
+      if (!contained) {
         this.modal.activate();
         lockBodyScrolling(this);
       }
@@ -132,11 +131,8 @@ var DSADrawer = class extends ShoelaceElement {
       if (autoFocusTarget) {
         autoFocusTarget.removeAttribute("autofocus");
       }
-      await Promise.all([
-        stopAnimations(this.drawer),
-        stopAnimations(this.overlay)
-      ]);
-      this.drawer.hidden = false;
+      await Promise.all([stopAnimations(drawer), stopAnimations(overlay)]);
+      drawer.hidden = false;
       requestAnimationFrame(() => {
         const dsaInitialFocus = this.emit("dsa-initial-focus", {
           cancelable: true
@@ -147,7 +143,7 @@ var DSADrawer = class extends ShoelaceElement {
               preventScroll: true
             });
           } else {
-            this.panel.focus({ preventScroll: true });
+            panel.focus({ preventScroll: true });
           }
         }
         if (autoFocusTarget) {
@@ -156,18 +152,18 @@ var DSADrawer = class extends ShoelaceElement {
       });
       const panelAnimation = getAnimation(
         this,
-        `drawer.show${uppercaseFirstLetter(this.placement)}`,
+        `drawer.show${uppercaseFirstLetter(placement)}`,
         {
-          dir: this.localize.dir()
+          dir: localize.dir()
         }
       );
       const overlayAnimation = getAnimation(this, "drawer.overlay.show", {
-        dir: this.localize.dir()
+        dir: localize.dir()
       });
       await Promise.all([
-        animateTo(this.panel, panelAnimation.keyframes, panelAnimation.options),
+        animateTo(panel, panelAnimation.keyframes, panelAnimation.options),
         animateTo(
-          this.overlay,
+          overlay,
           overlayAnimation.keyframes,
           overlayAnimation.options
         )
@@ -176,43 +172,39 @@ var DSADrawer = class extends ShoelaceElement {
     } else {
       this.emit("dsa-hide");
       this.removeOpenListeners();
-      if (!this.contained) {
+      const { drawer, panel, overlay, contained, placement, localize } = this;
+      if (!contained) {
         this.modal.deactivate();
         unlockBodyScrolling(this);
       }
-      await Promise.all([
-        stopAnimations(this.drawer),
-        stopAnimations(this.overlay)
-      ]);
+      await Promise.all([stopAnimations(drawer), stopAnimations(overlay)]);
       const panelAnimation = getAnimation(
         this,
-        `drawer.hide${uppercaseFirstLetter(this.placement)}`,
+        `drawer.hide${uppercaseFirstLetter(placement)}`,
         {
-          dir: this.localize.dir()
+          dir: localize.dir()
         }
       );
       const overlayAnimation = getAnimation(this, "drawer.overlay.hide", {
-        dir: this.localize.dir()
+        dir: localize.dir()
       });
       await Promise.all([
         animateTo(
-          this.overlay,
+          overlay,
           overlayAnimation.keyframes,
           overlayAnimation.options
         ).then(() => {
-          this.overlay.hidden = true;
+          overlay.hidden = true;
         }),
-        animateTo(
-          this.panel,
-          panelAnimation.keyframes,
-          panelAnimation.options
-        ).then(() => {
-          this.panel.hidden = true;
-        })
+        animateTo(panel, panelAnimation.keyframes, panelAnimation.options).then(
+          () => {
+            panel.hidden = true;
+          }
+        )
       ]);
-      this.drawer.hidden = true;
-      this.overlay.hidden = false;
-      this.panel.hidden = false;
+      drawer.hidden = true;
+      overlay.hidden = false;
+      panel.hidden = false;
       const trigger = this.originalTrigger;
       if (typeof (trigger == null ? void 0 : trigger.focus) === "function") {
         setTimeout(() => trigger.focus());
@@ -247,12 +239,22 @@ var DSADrawer = class extends ShoelaceElement {
     return await waitForEvent(this, "dsa-after-hide");
   }
   render() {
-    if (!this.label && !this.hasSlotController.test("label")) {
+    const {
+      open,
+      placement,
+      contained,
+      localize,
+      hasSlotController,
+      noHeader,
+      label,
+      filters
+    } = this;
+    if (!label && !hasSlotController.test("label")) {
       a11yWarning(
         "<dsa-drawer> requires a label attribute or a label slot for accessibility"
       );
     }
-    if (this.noHeader && !this.label) {
+    if (noHeader && !label) {
       a11yWarning(
         "<dsa-drawer> requires a label attribute for accessibility when `no-header` is set"
       );
@@ -262,16 +264,16 @@ var DSADrawer = class extends ShoelaceElement {
         part="base"
         class=${classMap({
       drawer: true,
-      "drawer--open": this.open,
-      "drawer--top": this.placement === "top",
-      "drawer--end": this.placement === "end",
-      "drawer--bottom": this.placement === "bottom",
-      "drawer--start": this.placement === "start",
-      "drawer--contained": this.contained,
-      "drawer--fixed": !this.contained,
-      "drawer--rtl": this.localize.dir() === "rtl",
-      "drawer--has-footer": this.hasSlotController.test("footer"),
-      "drawer--filters": this.filters
+      "drawer--open": open,
+      "drawer--top": placement === "top",
+      "drawer--end": placement === "end",
+      "drawer--bottom": placement === "bottom",
+      "drawer--start": placement === "start",
+      "drawer--contained": contained,
+      "drawer--fixed": !contained,
+      "drawer--rtl": localize.dir() === "rtl",
+      "drawer--has-footer": hasSlotController.test("footer"),
+      "drawer--filters": filters
     })}
       >
         <div
@@ -285,19 +287,17 @@ var DSADrawer = class extends ShoelaceElement {
           class="drawer__panel"
           role="dialog"
           aria-modal="true"
-          aria-hidden=${this.open ? "false" : "true"}
-          aria-label=${ifDefinedAndNotEmpty(
-      this.noHeader ? this.label : void 0
-    )}
-          aria-labelledby=${ifDefined(!this.noHeader ? "title" : void 0)}
+          aria-hidden=${open ? "false" : "true"}
+          aria-label=${ifDefinedAndNotEmpty(noHeader ? label : void 0)}
+          aria-labelledby=${ifDefined(!noHeader ? "title" : void 0)}
           tabindex="-1"
         >
-          ${!this.noHeader ? html`
+          ${!noHeader ? html`
                 <header part="header" class="drawer__header">
                   <h1 part="title" class="drawer__title" id="title">
                     <!-- If there's no label, use an invisible character to prevent the header from collapsing -->
                     <slot name="label">
-                      ${this.label.length > 0 ? this.label : String.fromCharCode(65279)}
+                      ${label.length > 0 ? label : String.fromCharCode(65279)}
                     </slot>
                   </h1>
                   <div part="header-actions" class="drawer__header-actions">
@@ -307,7 +307,7 @@ var DSADrawer = class extends ShoelaceElement {
                       exportparts="base:close-button__base"
                       class="drawer__close"
                       name="close"
-                      label=${this.localize.term("close")}
+                      label=${localize.term("close")}
                       @click=${() => this.requestClose("close-button")}
                       library="system"
                       size="large"

package/dist/chunks/chunk.E2AA6JZR.js

@@ -0,0 +1,102 @@
+import {
+  banner_styles_default
+} from "./chunk.7Z3P7ZIT.js";
+import {
+  HasSlotController
+} from "./chunk.YIY5RM53.js";
+import {
+  DSAIconButton
+} from "./chunk.2GTXVMMC.js";
+import {
+  LocalizeController
+} from "./chunk.DVIHNMQQ.js";
+import {
+  ShoelaceElement
+} from "./chunk.SVWU6JW4.js";
+import {
+  __decorateClass
+} from "./chunk.N3L4GIUO.js";
+
+// src/components/banner/banner.ts
+import { html } from "lit";
+import { customElement, property, query } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.js";
+var DSABanner = class extends ShoelaceElement {
+  constructor() {
+    super(...arguments);
+    this.hasSlotController = new HasSlotController(
+      this,
+      "icon",
+      "action"
+    );
+    this.localize = new LocalizeController(this);
+    this.closable = false;
+    this.mobile = false;
+    this.closeLabel = "";
+  }
+  handleClose() {
+    this.emit("dsa-close");
+  }
+  render() {
+    const hasIcon = this.hasSlotController.test("icon");
+    return html`
+      <div
+        part="base"
+        class=${classMap({
+      banner: true,
+      "banner--mobile": this.mobile
+    })}
+      >
+        <div class="banner__content">
+          ${hasIcon ? html`
+                <div class="banner__icon-container" part="icon-container">
+                  <slot name="icon"> </slot>
+                </div>
+              ` : null}
+
+          <div class="banner__info">
+            <p class="banner__message" part="message">
+              <slot></slot>
+            </p>
+            <slot name="action"></slot>
+          </div>
+        </div>
+
+        ${this.closable ? html`
+              <dsa-icon-button
+                class="banner__close-button"
+                part="close-button"
+                name="close"
+                library="system"
+                size="large"
+                label=${this.closeLabel || this.localize.term("closeBanner")}
+                @click=${this.handleClose}
+              ></dsa-icon-button>
+            ` : ""}
+      </div>
+    `;
+  }
+};
+DSABanner.styles = banner_styles_default;
+DSABanner.dependencies = {
+  "dsa-icon-button": DSAIconButton
+};
+__decorateClass([
+  query('[part="close-button"]')
+], DSABanner.prototype, "closeButton", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], DSABanner.prototype, "closable", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], DSABanner.prototype, "mobile", 2);
+__decorateClass([
+  property({ attribute: "close-label" })
+], DSABanner.prototype, "closeLabel", 2);
+DSABanner = __decorateClass([
+  customElement("dsa-banner")
+], DSABanner);
+
+export {
+  DSABanner
+};

package/dist/chunks/{chunk.6QE4MIXY.js → chunk.E6D26DI7.js}

@@ -47,11 +47,8 @@ var DSAResizeObserver = class extends ShoelaceElement {
         flatten: true
       });
       this.observedElements.forEach((el) => this.resizeObserver.unobserve(el));
-      this.observedElements = [];
-      elements.forEach((el) => {
-        this.resizeObserver.observe(el);
-        this.observedElements.push(el);
-      });
+      this.observedElements = elements;
+      elements.forEach((el) => this.resizeObserver.observe(el));
     }
   }
   stopObserver() {

package/dist/chunks/{chunk.KAG2EIKO.js → chunk.EH2DQIPN.js}

@@ -15,10 +15,17 @@ var pagination_styles_default = css`
     margin: 0;
   }
 
-  .pagination {
+  .pagination,
+  .pagination__items,
+  .pagination__itemsperpage,
+  .pagination__navigation,
+  .pagination__navigation__page-input {
     display: flex;
-    flex-wrap: wrap;
     align-items: center;
+  }
+
+  .pagination {
+    flex-wrap: wrap;
     gap: var(--dsa-spacing-16);
     font: var(--dsa-wc-pagination-font);
     color: var(--dsa-wc-pagination-color);
@@ -30,8 +37,6 @@ var pagination_styles_default = css`
   }
 
   .pagination__items {
-    display: flex;
-    align-items: center;
     width: 100%;
     height: 2rem;
     justify-content: space-between;
@@ -42,8 +47,6 @@ var pagination_styles_default = css`
   }
 
   .pagination__itemsperpage {
-    display: flex;
-    align-items: center;
     gap: 8px;
   }
   ::slotted(dsa-select) {
@@ -55,9 +58,7 @@ var pagination_styles_default = css`
   }
 
   .pagination__navigation {
-    display: flex;
     justify-content: space-between;
-    align-items: center;
     flex-wrap: wrap;
     width: 100%;
   }
@@ -67,8 +68,6 @@ var pagination_styles_default = css`
   }
 
   .pagination__navigation__page-input {
-    display: flex;
-    align-items: center;
     flex-shrink: 0;
     gap: var(--dsa-spacing-4);
   }

package/dist/chunks/{chunk.U4W57NV6.js → chunk.EPG5ZB4T.js}

@@ -1,9 +1,9 @@
 import {
   DSARadioGroup
-} from "./chunk.QKUUHXNR.js";
+} from "./chunk.Q6GPBRDV.js";
 import {
   FormSelectableCard
-} from "./chunk.XMBQRPGX.js";
+} from "./chunk.ZUG2HYP5.js";
 import {
   watch
 } from "./chunk.QB2NJE2Y.js";