@ds-autonomie/web-components 2.12.0 → 2.14.0

package/dist/chunks/{chunk.QOTRG3SW.js → chunk.N5HIPUUE.js}

@@ -1,6 +1,6 @@
 import {
   select_styles_default
-} from "./chunk.DRR77YKL.js";
+} from "./chunk.LCNXSDAI.js";
 import {
   scrollIntoView
 } from "./chunk.EMIT7S33.js";
@@ -29,7 +29,7 @@ import {
 } from "./chunk.ZQJVCRB2.js";
 import {
   LocalizeController
-} from "./chunk.7BLYNLBH.js";
+} from "./chunk.QY3AIGLE.js";
 import {
   watch
 } from "./chunk.7627FYPL.js";
@@ -143,7 +143,7 @@ var DSASelect = class extends FormControlLayout {
     }
     if (["ArrowUp", "ArrowDown", "Home", "End"].includes(event.key)) {
       const allOptions = this.getAllOptions();
-      const currentIndex = allOptions.indexOf(this.currentOption);
+      const currentIndex = this.currentOption ? allOptions.indexOf(this.currentOption) : -1;
       let newIndex = Math.max(0, currentIndex);
       event.preventDefault();
       if (!this.open) {
@@ -294,10 +294,6 @@ var DSASelect = class extends FormControlLayout {
   getAllOptions() {
     return [...this.querySelectorAll("dsa-option")];
   }
-  // Gets the first <dsa-option> element
-  getFirstOption() {
-    return this.querySelector("dsa-option");
-  }
   // Sets the current option, which is the option the user is currently interacting with (e.g. via keyboard). Only one
   // option may be "current" at a time.
   setCurrentOption(option) {
@@ -311,6 +307,8 @@ var DSASelect = class extends FormControlLayout {
       option.current = true;
       option.tabIndex = 0;
       option.focus();
+    } else {
+      this.currentOption = void 0;
     }
   }
   // Sets the selected option(s)
@@ -373,7 +371,6 @@ var DSASelect = class extends FormControlLayout {
   }
   async handleOpenChange() {
     if (this.open && !this.disabled && !this.readonly) {
-      this.setCurrentOption(this.selectedOptions[0] || this.getFirstOption());
       this.emit("dsa-show");
       this.addOpenListeners();
       await stopAnimations(this);
@@ -400,6 +397,7 @@ var DSASelect = class extends FormControlLayout {
       await animateTo(this.popup.popup, keyframes, options);
       this.listbox.hidden = true;
       this.popup.active = false;
+      this.setCurrentOption(void 0);
       this.emit("dsa-after-hide");
     }
   }

package/dist/chunks/{chunk.TEHV57S2.js → chunk.NLQQDGEL.js}

@@ -14,7 +14,7 @@ import {
 } from "./chunk.PWL7QCVG.js";
 import {
   LocalizeController
-} from "./chunk.7BLYNLBH.js";
+} from "./chunk.QY3AIGLE.js";
 import {
   watch
 } from "./chunk.7627FYPL.js";
@@ -79,6 +79,20 @@ var DSAAlert = class extends ShoelaceElement {
         return "info";
     }
   }
+  getIconLabel() {
+    switch (this.variant) {
+      case "danger":
+        return this.localize.term("error");
+      case "neutral":
+        return void 0;
+      case "success":
+        return this.localize.term("success");
+      case "warning":
+        return this.localize.term("warning");
+      default:
+        return this.localize.term("info");
+    }
+  }
   async handleOpenChange() {
     if (this.open) {
       this.emit("dsa-show");
@@ -183,6 +197,7 @@ var DSAAlert = class extends ShoelaceElement {
             class="alert__icon"
             name=${this.getPrefixIconName()}
             library="system"
+            label=${ifDefined(this.getIconLabel())}
           ></dsa-icon>
           <div class="alert__text">
             ${this.title || this.alertTitle ? html`

package/dist/chunks/{chunk.N36MBM2Q.js → chunk.O42OVLHD.js}

@@ -21,7 +21,7 @@ import {
 } from "./chunk.PWL7QCVG.js";
 import {
   LocalizeController
-} from "./chunk.7BLYNLBH.js";
+} from "./chunk.QY3AIGLE.js";
 import {
   watch
 } from "./chunk.7627FYPL.js";

package/dist/chunks/{chunk.N6N5PXAU.js → chunk.OOJRFXKM.js}

@@ -15,7 +15,7 @@ import {
 } from "./chunk.ZQJVCRB2.js";
 import {
   LocalizeController
-} from "./chunk.7BLYNLBH.js";
+} from "./chunk.QY3AIGLE.js";
 import {
   __decorateClass
 } from "./chunk.5GB6F3WA.js";

package/dist/chunks/{chunk.7M5CM6FS.js → chunk.Q2YIXYWB.js}

@@ -18,7 +18,7 @@ import {
 } from "./chunk.PWL7QCVG.js";
 import {
   LocalizeController
-} from "./chunk.7BLYNLBH.js";
+} from "./chunk.QY3AIGLE.js";
 import {
   watch
 } from "./chunk.7627FYPL.js";

package/dist/chunks/{chunk.GXXH57EX.js → chunk.QCSAZGXA.js}

@@ -3,10 +3,10 @@ import {
 } from "./chunk.I5IKEQES.js";
 import {
   FilterBase
-} from "./chunk.7M5CM6FS.js";
+} from "./chunk.Q2YIXYWB.js";
 import {
   filter_range_styles_default
-} from "./chunk.MWZRCNNO.js";
+} from "./chunk.VGW52PNG.js";
 import {
   ifDefinedAndNotEmpty
 } from "./chunk.ZQJVCRB2.js";

package/dist/chunks/{chunk.IW2YJ6FJ.js → chunk.QKV2UFTU.js}

@@ -9,7 +9,7 @@ import {
 } from "./chunk.YIY5RM53.js";
 import {
   LocalizeController
-} from "./chunk.7BLYNLBH.js";
+} from "./chunk.QY3AIGLE.js";
 import {
   ShoelaceElement
 } from "./chunk.KPJCYT4S.js";

package/dist/chunks/{chunk.WQVKSBYD.js → chunk.QXRV6D3A.js}

@@ -50,6 +50,7 @@ var drawer_styles_default = css`
     max-width: 100%;
     max-height: 100%;
     background-color: var(--dsa-wc-drawer-background-color);
+    color: var(--dsa-wc-drawer-color);
     overflow: auto;
     pointer-events: all;
   }

package/dist/chunks/{chunk.7BLYNLBH.js → chunk.QY3AIGLE.js}

@@ -54,8 +54,10 @@ var translation = {
   previousPage: "Page pr\xE9c\xE9dente",
   nextPage: "Page suivante",
   results: "r\xE9sultats",
+  cnsa: "CNSA Caisse Nationale de solidarit\xE9 pour l'autonomie",
+  spa: "Service public de l'autonomie",
   cnsaGoToHomepage: "CNSA Caisse Nationale de solidarit\xE9 pour l'autonomie, aller \xE0 la page d'accueil",
-  dsaGoToHomepage: "Service public de l'autonomie, aller \xE0 la page d'accueil",
+  spaGoToHomepage: "Service public de l'autonomie, aller \xE0 la page d'accueil",
   search: "Rechercher",
   cancel: "Annuler",
   showTableActionsAnnouncement: "Une barre d'actions est d\xE9sormais disponible au-dessus du tableau.",
@@ -152,6 +154,10 @@ var translation = {
   toggleSidenav: "D\xE9velopper/R\xE9duire la navigation lat\xE9rale",
   copied: "Texte copi\xE9 dans le presse-papiers",
   copyError: "Echec de la copie",
+  info: "Information",
+  warning: "Attention",
+  error: "Erreur",
+  success: "Succ\xE8s",
   // countries and regions
   fr_FR: "France",
   fr_GP: "Guadeloupe, Saint-Barth\xE9lemy et Saint-Martin",
@@ -224,8 +230,10 @@ var translation2 = {
   previousPage: "Previous page",
   nextPage: "Next page",
   results: "results",
+  cnsa: "CNSA Caisse Nationale de solidarit\xE9 pour l'autonomie",
+  spa: "Service public de l'autonomie",
   cnsaGoToHomepage: "CNSA Caisse Nationale de solidarit\xE9 pour l'autonomie, go to homepage",
-  dsaGoToHomepage: "Service public de l'autonomie, go to homepage",
+  spaGoToHomepage: "Service public de l'autonomie, go to homepage",
   search: "Search",
   cancel: "Cancel",
   showTableActionsAnnouncement: "An action bar is now available above the table",
@@ -322,6 +330,10 @@ var translation2 = {
   toggleSidenav: "Toggle side navigation",
   copied: "Copied",
   copyError: "Copy error",
+  info: "Information",
+  warning: "Warning",
+  error: "Error",
+  success: "Success",
   // countries and regions
   fr_FR: "France",
   fr_GP: "Guadeloupe",

package/dist/chunks/{chunk.PL7FGR6O.js → chunk.RBRPIIUZ.js}

@@ -160,7 +160,7 @@ var DSACheckbox = class extends ShoelaceElement {
     this.formControlController.updateValidity();
   }
   render() {
-    var _a, _b, _c, _d;
+    var _a, _b, _c;
     const hasLabelSlot = this.hasSlotController.test("[default]");
     const isDisabled = this.disabled || this.parentDisabled;
     const isReadonly = this.readonly || this.parentReadonly;
@@ -231,7 +231,6 @@ var DSACheckbox = class extends ShoelaceElement {
             ?disabled=${isDisabled}
             ?readonly=${isReadonly}
             ?error=${this.error}
-            title=${ifDefinedAndNotEmpty((_c = this.accessibleName) != null ? _c : this.title)}
             aria-hidden="true"
           ></dsa-internal-checkbox-box>
 
@@ -239,7 +238,7 @@ var DSACheckbox = class extends ShoelaceElement {
             ${this.required ? html`<span class="checkbox__label-required">*</span>` : ""}
             <slot
               ><dsa-visually-hidden
-                >${(_d = this.accessibleName) != null ? _d : this.title}</dsa-visually-hidden
+                >${(_c = this.accessibleName) != null ? _c : this.title}</dsa-visually-hidden
               ></slot
             >
           </div>

package/dist/chunks/{chunk.ULC7VUCJ.js → chunk.RCKLGFQP.js}

@@ -12,7 +12,7 @@ import {
 } from "./chunk.LRTTUCZP.js";
 import {
   LocalizeController
-} from "./chunk.7BLYNLBH.js";
+} from "./chunk.QY3AIGLE.js";
 import {
   watch
 } from "./chunk.7627FYPL.js";

package/dist/chunks/{chunk.25GTO3QB.js → chunk.RH2CIWCE.js}

@@ -1,6 +1,6 @@
 import {
   tab_panel_styles_default
-} from "./chunk.5WAZTHII.js";
+} from "./chunk.S3E2SSO2.js";
 import {
   watch
 } from "./chunk.7627FYPL.js";

package/dist/chunks/{chunk.6PBTRK6C.js → chunk.RHI7PHVF.js}

@@ -1,9 +1,9 @@
 import {
   filter_counter_styles_default
-} from "./chunk.PVXX2LT7.js";
+} from "./chunk.YSCXTTQZ.js";
 import {
   FilterBase
-} from "./chunk.7M5CM6FS.js";
+} from "./chunk.Q2YIXYWB.js";
 import {
   watch
 } from "./chunk.7627FYPL.js";
@@ -90,7 +90,7 @@ var DSAFilterCounter = class extends FilterBase {
           min=${this.min}
           max=${this.max}
           variant=${this.drawer ? "layer" : "base"}
-          title=${this.label}
+          accessible-name=${this.label}
         ></dsa-input>
         <dsa-icon-button
           name="add"

package/dist/chunks/{chunk.KQCEZOVH.js → chunk.ROCLZVBA.js}

@@ -9,7 +9,7 @@ import {
 } from "./chunk.CMJ2SRTL.js";
 import {
   combobox_styles_default
-} from "./chunk.EXD4UGIK.js";
+} from "./chunk.A3SHXMQF.js";
 import {
   FormControlController
 } from "./chunk.APQFQQX5.js";
@@ -29,7 +29,7 @@ import {
 } from "./chunk.ZQJVCRB2.js";
 import {
   LocalizeController
-} from "./chunk.7BLYNLBH.js";
+} from "./chunk.QY3AIGLE.js";
 import {
   watch
 } from "./chunk.7627FYPL.js";
@@ -142,6 +142,9 @@ var DSACombobox = class extends FormControlLayout {
   handleInput() {
     this.displayLabel = this.displayInput.value;
     this.show();
+    if (!this.multiple && this.displayLabel === "") {
+      this.clearSelection();
+    }
     if (this.debounceTimerId !== null) {
       clearTimeout(this.debounceTimerId);
     }
@@ -280,7 +283,8 @@ var DSACombobox = class extends FormControlLayout {
     if (option !== void 0) {
       this.currentOption = option;
       option.current = true;
-      option.scrollIntoView();
+      option.tabIndex = 0;
+      option.focus();
     } else {
       this.currentOption = void 0;
     }
@@ -348,6 +352,9 @@ var DSACombobox = class extends FormControlLayout {
         event.stopPropagation();
         this.handleEnterKey(event);
         break;
+      case " ":
+        this.handleSpaceKey(event);
+        break;
       case "ArrowLeft":
       case "ArrowRight":
         event.stopPropagation();
@@ -362,6 +369,7 @@ var DSACombobox = class extends FormControlLayout {
         break;
       default:
         event.stopPropagation();
+        this.focus();
         break;
     }
   }
@@ -413,6 +421,25 @@ var DSACombobox = class extends FormControlLayout {
       });
     }
   }
+  handleSpaceKey(event) {
+    if (this.open && this.currentOption !== void 0 && !this.currentOption.disabled) {
+      event.preventDefault();
+      event.stopImmediatePropagation();
+      if (this.multiple) {
+        this.toggleOptionSelection(this.currentOption);
+      } else {
+        this.setSelectedOptions(this.currentOption);
+        this.syncOnSelection();
+        this.hide();
+        this.hasVisualFocus = true;
+        this.displayInput.focus({ preventScroll: true });
+      }
+      this.updateComplete.then(() => {
+        this.emit("dsa-input");
+        this.emit("dsa-change");
+      });
+    }
+  }
   handleArrowKeys() {
     this.hasVisualFocus = true;
     this.displayInput.focus({ preventScroll: true });
@@ -444,8 +471,9 @@ var DSACombobox = class extends FormControlLayout {
             this.filteredOptions[this.displayedOptionsCount - 1]
           );
           this.seeMoreOption.current = false;
-        } else if (currentOptionIndex === -1) {
-          this.setCurrentOption(this.filteredOptions[0]);
+        } else if (currentOptionIndex === 0) {
+          this.setCurrentOption(void 0);
+          this.focus();
         } else if (currentOptionIndex > 0) {
           this.setCurrentOption(this.filteredOptions[currentOptionIndex - 1]);
         }
@@ -524,8 +552,8 @@ var DSACombobox = class extends FormControlLayout {
     }
   }
   async handleOpenChange() {
+    var _a, _b;
     if (this.open && !this.disabled && !this.readonly) {
-      this.setCurrentOption(this.selectedOptions[0] || this.filteredOptions[0]);
       this.emit("dsa-show");
       this.addOpenListeners();
       await stopAnimations(this);
@@ -543,6 +571,9 @@ var DSACombobox = class extends FormControlLayout {
     } else {
       this.emit("dsa-hide");
       this.removeOpenListeners();
+      if (!this.multiple) {
+        this.displayLabel = (_b = (_a = this.selectedOptions[0]) == null ? void 0 : _a.getTextLabel()) != null ? _b : "";
+      }
       await stopAnimations(this);
       const { keyframes, options } = getAnimation(this, "select.hide", {
         dir: this.localize.dir()
@@ -554,11 +585,7 @@ var DSACombobox = class extends FormControlLayout {
     }
   }
   handleDisplayLabelChange() {
-    var _a;
     this.filterOptions(this.displayLabel);
-    if (!((_a = this.seeMoreOption) == null ? void 0 : _a.current)) {
-      this.setCurrentOption(this.filteredOptions[0]);
-    }
     this.resetDisplayedOptionsCount();
   }
   handleMultipleChange() {

package/dist/chunks/{chunk.5WAZTHII.js → chunk.S3E2SSO2.js}

@@ -20,6 +20,7 @@ var tab_panel_styles_default = css`
   .tab-panel {
     display: block;
     padding: var(--padding);
+    color: var(--dsa-color-text-on-base-primary);
   }
 
   :host(:focus) {

package/dist/chunks/chunk.TCTJKHNY.js

@@ -0,0 +1,187 @@
+import {
+  cnsaLogoNoSubtextSvg,
+  spaLogoSvg
+} from "./chunk.7TLERCGA.js";
+import {
+  header_modern_styles_default
+} from "./chunk.ISWWNUGH.js";
+import {
+  HasSlotController
+} from "./chunk.YIY5RM53.js";
+import {
+  LocalizeController
+} from "./chunk.QY3AIGLE.js";
+import {
+  watch
+} from "./chunk.7627FYPL.js";
+import {
+  ShoelaceElement
+} from "./chunk.KPJCYT4S.js";
+import {
+  __decorateClass
+} from "./chunk.5GB6F3WA.js";
+
+// src/components/header-modern/header-modern.ts
+import { html } from "lit";
+import { customElement, property, query } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.js";
+var DSAHeaderModern = class extends ShoelaceElement {
+  constructor() {
+    super(...arguments);
+    this.hasSlotController = new HasSlotController(
+      this,
+      "external-links",
+      "second-logo",
+      "site-name",
+      "search",
+      "navbar"
+    );
+    this.localize = new LocalizeController(this);
+    this.firstLogo = "public";
+    this.searchExpanded = false;
+    this.mobile = false;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.handleSearchExpandEvent = this.handleSearchExpandEvent.bind(this);
+    this.handleSearchCollapseEvent = this.handleSearchCollapseEvent.bind(this);
+    this.addEventListener("dsa-expand", this.handleSearchExpandEvent);
+    this.addEventListener("dsa-collapse", this.handleSearchCollapseEvent);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.removeEventListener("dsa-expand", this.handleSearchExpandEvent);
+    this.removeEventListener("dsa-collapse", this.handleSearchCollapseEvent);
+  }
+  handleSearchExpandEvent() {
+    this.searchExpanded = true;
+  }
+  handleSearchCollapseEvent() {
+    this.searchExpanded = false;
+  }
+  getFirtLogo() {
+    if (this.firstLogo === "pro") {
+      return spaLogoSvg(this.localize.term("spa"));
+    }
+    return cnsaLogoNoSubtextSvg(this.localize.term("cnsa"));
+  }
+  handleSearchExpanded() {
+    if (this.hasSlotController.test("search")) {
+      const search = this.querySelector("dsa-header-search");
+      if (search !== null) {
+        search.expanded = this.searchExpanded;
+      }
+    }
+  }
+  handleMobile() {
+    if (this.hasSlotController.test("search")) {
+      const search = this.querySelector("dsa-header-search");
+      if (search !== null && this.mobile !== void 0) {
+        search.mobile = this.mobile;
+      }
+    }
+  }
+  render() {
+    if (!this.hasSlotController.test("site-name")) {
+      console.warn(
+        "(DSA) The <site-name> slot is required. Please use a link to your homepage in the <site-name> slot."
+      );
+    }
+    return html`
+      <header
+        part="base"
+        role="banner"
+        class=${classMap({
+      header: true,
+      "header--mobile": this.mobile === true,
+      "header--desktop": this.mobile === false,
+      "header--spa": this.firstLogo === "pro",
+      "header--cnsa": this.firstLogo === "public",
+      "header--with-external-links": this.hasSlotController.test("external-links"),
+      "header--with-second-logo": this.hasSlotController.test("second-logo"),
+      "header--with-navbar": this.hasSlotController.test("navbar")
+    })}
+      >
+        <ul class="external-links__container">
+          <slot name="external-links" part="external-links"></slot>
+        </ul>
+
+        <div class="header__main-container">
+          <section
+            part="main"
+            class=${classMap({
+      header__main: true,
+      "header--search-expanded": this.hasSlotController.test("search") && this.searchExpanded
+    })}
+          >
+            <div class="header__brand-top">
+              <slot
+                name="first-logo"
+                part="first-logo"
+                class=${classMap({
+      logo: true
+    })}
+              >
+                ${this.getFirtLogo()}
+              </slot>
+              ${!this.mobile ? html`
+                    <div class="header__brand">
+                      <slot
+                        id="second-logo"
+                        name="second-logo"
+                        class="logo"
+                      ></slot>
+                      <slot name="site-name" part="site-name"></slot>
+                    </div>
+                  ` : ""}
+            </div>
+            <div class="header__actions">
+              <slot name="search" part="search"></slot>
+              <slot part="navigation"></slot>
+            </div>
+            ${this.mobile ? html`
+                  <div class="header__brand">
+                    <slot
+                      id="second-logo"
+                      name="second-logo"
+                      class="logo"
+                    ></slot>
+                    <slot name="site-name" part="site-name"></slot>
+                  </div>
+                ` : ""}
+          </section>
+        </div>
+
+        <div class="header__navbar-container">
+          <slot name="navbar" part="navbar"></slot>
+        </div>
+      </header>
+    `;
+  }
+};
+DSAHeaderModern.styles = header_modern_styles_default;
+__decorateClass([
+  query('[part="external-links"]')
+], DSAHeaderModern.prototype, "externalLinks", 2);
+__decorateClass([
+  property({ reflect: true, attribute: "first-logo" })
+], DSAHeaderModern.prototype, "firstLogo", 2);
+__decorateClass([
+  property({ reflect: true, type: Boolean, attribute: "search-expanded" })
+], DSAHeaderModern.prototype, "searchExpanded", 2);
+__decorateClass([
+  property({ type: Boolean })
+], DSAHeaderModern.prototype, "mobile", 2);
+__decorateClass([
+  watch("searchExpanded")
+], DSAHeaderModern.prototype, "handleSearchExpanded", 1);
+__decorateClass([
+  watch("mobile")
+], DSAHeaderModern.prototype, "handleMobile", 1);
+DSAHeaderModern = __decorateClass([
+  customElement("dsa-header-modern")
+], DSAHeaderModern);
+
+export {
+  DSAHeaderModern
+};