@ds-autonomie/web-components 1.16.2 → 1.18.0

package/dist/chunks/{chunk.5MXBL3PY.js → chunk.4WWQYBFA.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk.NHRDZGLI.js";
 import {
   DSAIcon
-} from "./chunk.V7MYOBN4.js";
+} from "./chunk.4L7EJLR4.js";
 import {
   watch
 } from "./chunk.6IH66JBY.js";

package/dist/chunks/{chunk.E475BLMD.js → chunk.63LGJMTZ.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk.SGIGGO5M.js";
 import {
   LocalizeController
-} from "./chunk.6L6CZSQX.js";
+} from "./chunk.G3MRVMJ4.js";
 import {
   ifDefinedAndNotEmpty
 } from "./chunk.ZQJVCRB2.js";

package/dist/chunks/{chunk.45B5UA3U.js → chunk.64JQY57B.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk.OZ2GKA3Q.js";
 import {
   LocalizeController
-} from "./chunk.6L6CZSQX.js";
+} from "./chunk.G3MRVMJ4.js";
 import {
   watch
 } from "./chunk.6IH66JBY.js";

package/dist/chunks/{chunk.NXQ42SSB.js → chunk.67S77FO4.js}

@@ -1,35 +1,24 @@
 import {
   filter_select_styles_default
-} from "./chunk.YOLAIUYX.js";
+} from "./chunk.TSW2ZSHN.js";
+import {
+  FilterBase
+} from "./chunk.EWT3XVAN.js";
 import {
   DSAOption
-} from "./chunk.BAU3732X.js";
+} from "./chunk.G2PBKGYI.js";
+import {
+  DSAInput
+} from "./chunk.YVJBJSTS.js";
 import {
   scrollIntoView
 } from "./chunk.EMIT7S33.js";
 import {
   normalizeStr
 } from "./chunk.U7V5J6UX.js";
-import {
-  waitForEvent
-} from "./chunk.B4BZKR24.js";
-import {
-  animateTo,
-  stopAnimations
-} from "./chunk.2FK6USFR.js";
-import {
-  getAnimation,
-  setDefaultAnimation
-} from "./chunk.V7RJROLH.js";
-import {
-  LocalizeController
-} from "./chunk.6L6CZSQX.js";
 import {
   watch
 } from "./chunk.6IH66JBY.js";
-import {
-  ShoelaceElement
-} from "./chunk.YCXTCVAZ.js";
 import {
   __decorateClass
 } from "./chunk.6M63UXML.js";
@@ -37,11 +26,11 @@ import {
 // src/components/filter/filter-select/filter-select.ts
 import { html } from "lit";
 import { customElement, property, query, state } from "lit/decorators.js";
+import { ifDefined } from "lit/directives/if-defined.js";
 var OPTION_TAG = "dsa-option";
-var DSAFilterSelect = class extends ShoelaceElement {
+var DSAFilterSelect = class extends FilterBase {
   constructor() {
     super(...arguments);
-    this.localize = new LocalizeController(this);
     this.displayLabel = "";
     this.allOptions = [];
     this.selectedOptions = [];
@@ -54,101 +43,40 @@ var DSAFilterSelect = class extends ShoelaceElement {
     this.multiple = false;
     this.maxVisibleListLength = 5;
     this.searchable = false;
-    this.open = false;
-    this.hoist = false;
-    this.label = "";
-    this.filterLabel = "";
     this.debounceTimeout = 300;
     this.optionGender = "masculine";
     this.columnsFilter = false;
-    this.disabled = false;
-    this.readonly = false;
   }
   connectedCallback() {
     super.connectedCallback();
-    this.handleDocumentFocusIn = this.handleDocumentFocusIn.bind(this);
-    this.handleDocumentMouseDown = this.handleDocumentMouseDown.bind(this);
     this.allOptions = this.getAllOptions();
     this.nbOptions = this.allOptions.length;
     this.filterOptions();
   }
-  addOpenListeners() {
-    document.addEventListener("focusin", this.handleDocumentFocusIn);
-    document.addEventListener("mousedown", this.handleDocumentMouseDown);
-  }
-  removeOpenListeners() {
-    document.removeEventListener("focusin", this.handleDocumentFocusIn);
-    document.removeEventListener("mousedown", this.handleDocumentMouseDown);
-  }
-  handleFocus() {
-    this.emit("dsa-focus");
-  }
-  handleBlur() {
-    this.emit("dsa-blur");
-  }
-  handleDocumentFocusIn(event) {
-    const path = event.composedPath();
-    if (this && !path.includes(this)) {
-      this.hide();
-      this.filterTrigger.focus({ preventScroll: true });
-    }
-  }
   handleKeyDown(event) {
-    if (this.open && event.key === "Escape") {
-      event.stopPropagation();
-      event.preventDefault();
-      this.hide();
-      this.filterTrigger.focus({ preventScroll: true });
-    }
-    if (this.open && event.key === "Tab") {
-      setTimeout(() => {
-        var _a, _b;
-        const activeElement = (this == null ? void 0 : this.getRootNode()) instanceof ShadowRoot ? (_b = (_a = document.activeElement) == null ? void 0 : _a.shadowRoot) == null ? void 0 : _b.activeElement : document.activeElement;
-        if (!this || (activeElement == null ? void 0 : activeElement.closest(this.tagName.toLowerCase())) !== this) {
-          this.hide();
-          this.filterTrigger.focus({ preventScroll: true });
-        }
-      });
-    }
+    super.handleKeyDown(event);
     const path = event.composedPath();
-    const isFilterTrigger = path.some((el) => el === this.filterTrigger);
     const isOption = path.some((el) => el instanceof DSAOption);
-    if ((isFilterTrigger || isOption) && (event.key === "Enter" || event.key === " ")) {
+    const isSearchInput = path.some((el) => el instanceof DSAInput);
+    if ((event.key === "Enter" || event.key === " ") && isOption && this.currentOption && !this.currentOption.disabled) {
       event.preventDefault();
-      if (!this.open) {
-        this.show();
-        return;
+      if (this.multiple || this.value.includes(this.currentOption.value)) {
+        this.toggleOptionSelection(this.currentOption);
+      } else {
+        this.setSelectedOptions(this.currentOption);
       }
-      if (isFilterTrigger) {
+      this.updateComplete.then(() => {
+        this.emit("dsa-change");
+      });
+      if (!this.multiple && !this.drawer) {
         this.hide();
-      }
-      if (isOption && this.currentOption && !this.currentOption.disabled) {
-        if (this.multiple || this.value.includes(this.currentOption.value)) {
-          this.toggleOptionSelection(this.currentOption);
-        } else {
-          this.setSelectedOptions(this.currentOption);
-        }
-        this.updateComplete.then(() => {
-          this.emit("dsa-change");
-        });
-        if (!this.multiple) {
-          this.hide();
-          this.filterTrigger.focus({ preventScroll: true });
-        }
+        this.filterTrigger.focus({ preventScroll: true });
       }
     }
-  }
-  handleDocumentMouseDown(event) {
-    const path = event.composedPath();
-    if (this && !path.includes(this)) {
-      this.hide();
+    if (isSearchInput) {
+      event.stopPropagation();
     }
   }
-  handleFilterTriggerMouseDown(event) {
-    event.preventDefault();
-    this.filterTrigger.focus({ preventScroll: true });
-    this.open = !this.open;
-  }
   handleSearchInput(event) {
     event.stopPropagation();
     this.searchValue = this.searchInput.value;
@@ -181,7 +109,7 @@ var DSAFilterSelect = class extends ShoelaceElement {
           this.emit("dsa-change");
         });
       }
-      if (!this.multiple) {
+      if (!this.multiple && !this.drawer) {
         this.updateComplete.then(
           () => this.filterTrigger.focus({ preventScroll: true })
         );
@@ -243,6 +171,7 @@ var DSAFilterSelect = class extends ShoelaceElement {
     const optionsNodeList = this.querySelectorAll(OPTION_TAG);
     const allOptions = [];
     optionsNodeList.forEach((option) => {
+      option.role = this.multiple ? "checkbox" : "radio";
       const clonedOption = option.cloneNode(true);
       clonedOption.selected = option.selected;
       clonedOption.multiple = this.multiple;
@@ -337,20 +266,6 @@ var DSAFilterSelect = class extends ShoelaceElement {
       this.allOptions.filter((el) => value.includes(el.value))
     );
   }
-  async handleDisabledChange() {
-    if (this.disabled || this.readonly) {
-      this.open = false;
-      this.emit("dsa-hide");
-      this.removeOpenListeners();
-      await stopAnimations(this);
-      this.popup.active = false;
-      const { keyframes, options } = getAnimation(this, "filter.hide", {
-        dir: this.localize.dir()
-      });
-      await animateTo(this.popup.popup, keyframes, options);
-      this.emit("dsa-after-hide");
-    }
-  }
   async handleOpenChange() {
     if (this.open) {
       if (this.selectedOptions.length > 0) {
@@ -358,33 +273,15 @@ var DSAFilterSelect = class extends ShoelaceElement {
       }
       this.filterOptions();
       this.setCurrentOption(this.selectedOptions[0] || this.getFirstOption());
-      this.emit("dsa-show");
-      this.addOpenListeners();
-      await stopAnimations(this);
-      this.listbox.hidden = false;
-      this.popup.active = true;
+    }
+    await super.handleOpenChange();
+    if (this.open) {
       requestAnimationFrame(() => {
         this.setCurrentOption(this.currentOption);
       });
-      const { keyframes, options } = getAnimation(this, "filter.show", {
-        dir: this.localize.dir()
-      });
-      await animateTo(this.popup.popup, keyframes, options);
       if (this.currentOption) {
         scrollIntoView(this.currentOption, this.listbox, "vertical", "auto");
       }
-      this.emit("dsa-after-show");
-    } else {
-      this.emit("dsa-hide");
-      this.removeOpenListeners();
-      await stopAnimations(this);
-      const { keyframes, options } = getAnimation(this, "filter.hide", {
-        dir: this.localize.dir()
-      });
-      await animateTo(this.popup.popup, keyframes, options);
-      this.listbox.hidden = true;
-      this.popup.active = false;
-      this.emit("dsa-after-hide");
     }
   }
   handleSeeAllChange() {
@@ -394,171 +291,144 @@ var DSAFilterSelect = class extends ShoelaceElement {
       );
     }
   }
-  /** Shows the listbox. */
-  async show() {
-    if (this.open) {
-      this.open = false;
-      return void 0;
-    }
-    this.open = true;
-    return await waitForEvent(this, "dsa-after-show");
-  }
   /** Hides the listbox. */
   async hide() {
-    if (!this.open) {
-      this.open = false;
-      return void 0;
-    }
-    this.open = false;
+    await super.hide();
     this.searchValue = "";
-    return await waitForEvent(this, "dsa-after-hide");
-  }
-  /** Sets focus on the control. */
-  focus(options) {
-    this.filterTrigger.focus(options);
   }
-  /** Removes focus from the control. */
-  blur() {
-    this.filterTrigger.blur();
+  renderTrigger() {
+    if (this.columnsFilter) {
+      return html`
+        <dsa-button
+          slot="anchor"
+          class="filter__trigger"
+          aria-expanded=${this.open ? "true" : "false"}
+          aria-controls="filter__panel"
+          ?disabled=${this.disabled}
+          @focus=${this.handleFocus}
+          @blur=${this.handleBlur}
+          @mousedown=${this.handleFilterTriggerMouseDown}
+          variant="tertiary"
+          caret
+        >
+          <dsa-icon name="view_column" slot="prefix"></dsa-icon>
+          ${this.label !== "" ? this.label : this.localize.term("columns")}
+        </dsa-button>
+      `;
+    } else {
+      const selectionCount = this.selectedOptions.length;
+      return html`
+        <dsa-filter-button
+          slot="anchor"
+          class="filter__trigger"
+          label=${this.label}
+          selected-option=${selectionCount === 1 ? this.displayLabel : ""}
+          selection-count=${selectionCount}
+          aria-expanded=${this.open ? "true" : "false"}
+          aria-controls="filter__panel"
+          ?disabled=${this.disabled}
+          ?readonly=${this.readonly}
+          ?drawer=${this.drawer}
+          @focus=${this.handleFocus}
+          @blur=${this.handleBlur}
+          @mousedown=${this.handleFilterTriggerMouseDown}
+        ></dsa-filter-button>
+      `;
+    }
   }
-  render() {
+  renderDeSelectAll() {
     const selectionCount = this.selectedOptions.length;
-    const buttonLabel = this.label !== "" ? this.label : this.filterLabel;
     return html`
-      <dsa-popup
-        class="filter"
-        part="popup"
-        placement=${this.columnsFilter ? "bottom-end" : "bottom-start"}
-        strategy=${this.hoist ? "fixed" : "absolute"}
-        distance="4"
-        flip
-        shift
-        auto-size="vertical"
-        auto-size-padding="10"
-        @keydown=${this.handleKeyDown}
+      <dsa-button
+        class="filter__multiselect-header__deselect-all"
+        variant="tertiary"
+        size="small"
+        @click=${this.handleMultipleHeaderButtonClick}
       >
-        ${this.columnsFilter ? html`
-              <dsa-button
-                slot="anchor"
-                class="filter__trigger"
-                aria-expanded=${this.open ? "true" : "false"}
-                aria-controls="filter__panel"
-                ?disabled=${this.disabled}
-                @focus=${this.handleFocus}
-                @blur=${this.handleBlur}
-                @mousedown=${this.handleFilterTriggerMouseDown}
-                variant="tertiary"
-                caret
-              >
-                <dsa-icon name="view_column" slot="prefix"></dsa-icon>
-                ${buttonLabel !== "" ? buttonLabel : this.localize.term("columns")}
-              </dsa-button>
-            ` : html`
-              <dsa-filter-button
-                slot="anchor"
-                class="filter__trigger"
-                label=${buttonLabel}
-                selected-option=${selectionCount === 1 ? this.displayLabel : ""}
-                selection-count=${selectionCount}
-                aria-expanded=${this.open ? "true" : "false"}
-                aria-controls="filter__panel"
-                ?disabled=${this.disabled}
-                ?readonly=${this.readonly}
-                @focus=${this.handleFocus}
-                @blur=${this.handleBlur}
-                @mousedown=${this.handleFilterTriggerMouseDown}
-              ></dsa-filter-button>
+        ${selectionCount === 0 ? html` ${this.localize.term("selectAll")} ` : html`
+              <dsa-icon name="restart_alt" slot="prefix"></dsa-icon>
+              ${this.localize.term("deselectAll")}
             `}
-
-        <div id="filter__panel" class="filter__panel">
-          ${this.multiple ? html`
-                <div class="filter__multiselect-header">
-                  <span role="status"
-                    >${this.localize.term(
+      </dsa-button>
+    `;
+  }
+  renderPanelContent() {
+    const selectionCount = this.selectedOptions.length;
+    return html`
+      ${this.multiple && !this.drawer ? html`
+            <div class="filter__multiselect-header">
+              <span role="status"
+                >${this.localize.term(
       "numberSelected",
       selectionCount,
       this.optionGender
     )}</span
-                  >
-                  <dsa-button
-                    class="filter__multiselect-header__deselect-all"
-                    variant="tertiary"
-                    size="small"
-                    @click=${this.handleMultipleHeaderButtonClick}
-                  >
-                    ${selectionCount === 0 ? html` ${this.localize.term("selectAll")} ` : html`
-                          <dsa-icon name="restart_alt" slot="prefix"></dsa-icon>
-                          ${this.localize.term("deselectAll")}
-                        `}
-                  </dsa-button>
-                </div>
-              ` : ""}
-          ${this.searchable ? html`
-                <dsa-input
-                  type="search"
-                  title=${this.localize.term("search")}
-                  placeholder=${this.localize.term("search")}
-                  variant="layer"
-                  .value=${this.searchValue}
-                  @input=${this.handleSearchInput}
-                  clearable
-                  @dsa-clear=${this.handleSearchClear}
-                ></dsa-input>
-                <dsa-visually-hidden>
-                  <span
-                    role="status"
-                    aria-live="polite"
-                    aria-relevant="all"
-                    .live=${this.searchValue}
-                    >${this.searchValue.length > 0 ? `${this.displayedOptions.length} ${this.localize.term(
+              >
+              ${this.renderDeSelectAll()}
+            </div>
+          ` : ""}
+      ${this.searchable ? html`
+            <dsa-input
+              type="search"
+              title=${this.localize.term("search")}
+              placeholder=${this.localize.term("search")}
+              variant="layer"
+              .value=${this.searchValue}
+              @input=${this.handleSearchInput}
+              clearable
+              @dsa-clear=${this.handleSearchClear}
+            ></dsa-input>
+            <dsa-visually-hidden>
+              <span
+                role="status"
+                aria-live="polite"
+                aria-relevant="all"
+                .live=${this.searchValue}
+                >${this.searchValue.length > 0 ? `${this.displayedOptions.length} ${this.localize.term(
       "optionsAvailable"
     )}` : ""}</span
-                  >
-                </dsa-visually-hidden>
-              ` : ""}
+              >
+            </dsa-visually-hidden>
+          ` : ""}
 
-          <div
-            id="listbox"
-            role=${this.multiple ? "group" : "radiogroup"}
-            aria-multiselectable=${this.multiple ? "true" : "false"}
-            aria-label=${this.localize.term("selectValue", this.multiple)}
-            part="listbox"
-            class="filter__listbox"
-            @mouseup=${this.handleOptionClick}
-          >
-            ${this.displayedOptions.length > 0 ? this.getDisplayedOptionsList() : html`<div class="filter__empty_text">
-                  <p>${this.localize.term("noMatchFound")}</p>
-                </div>`}
-          </div>
+      <div
+        id="listbox"
+        role=${this.multiple ? "group" : "radiogroup"}
+        aria-multiselectable=${ifDefined(this.multiple ? "true" : void 0)}
+        aria-label=${this.localize.term("selectValue", this.multiple)}
+        part="listbox"
+        class="filter__listbox"
+        @mouseup=${this.handleOptionClick}
+      >
+        ${this.displayedOptions.length > 0 ? this.getDisplayedOptionsList() : html`<div class="filter__empty_text">
+              <p>${this.localize.term("noMatchFound")}</p>
+            </div>`}
+      </div>
 
-          <slot
-            class="filter__options"
-            tabindex="-1"
-            @slotchange=${this.handleDefaultSlotChange}
-          ></slot>
+      <slot
+        class="filter__options"
+        tabindex="-1"
+        role=${this.multiple ? "group" : "radiogroup"}
+        @slotchange=${this.handleDefaultSlotChange}
+      ></slot>
 
-          ${this.maxVisibleListLength > 0 && this.nbOptions > this.maxVisibleListLength && !this.seeAll ? html`
-                <dsa-button
-                  variant="tertiary"
-                  size="small"
-                  class="filter__see-all-button"
-                  @click=${this.handleSeeAllClick}
-                >
-                  ${this.localize.term("seeAll", this.nbOptions)}
-                </dsa-button>
-              ` : ""}
-        </div>
-      </dsa-popup>
+      <div class="filter-select__footer">
+        ${this.maxVisibleListLength > 0 && this.nbOptions > this.maxVisibleListLength && !this.seeAll ? html`
+              <dsa-button
+                variant="tertiary"
+                size="small"
+                class="filter__see-all-button"
+                @click=${this.handleSeeAllClick}
+              >
+                ${this.localize.term("seeAll", this.nbOptions)}
+              </dsa-button>
+            ` : ""}
+        ${this.drawer && this.multiple ? this.renderDeSelectAll() : ""}
+      </div>
     `;
   }
 };
 DSAFilterSelect.styles = filter_select_styles_default;
-__decorateClass([
-  query(".filter")
-], DSAFilterSelect.prototype, "popup", 2);
-__decorateClass([
-  query(".filter__trigger")
-], DSAFilterSelect.prototype, "filterTrigger", 2);
 __decorateClass([
   query(".filter__multiselect-header__deselect-all")
 ], DSAFilterSelect.prototype, "deselectAllButton", 2);
@@ -621,18 +491,6 @@ __decorateClass([
 __decorateClass([
   property({ type: Boolean })
 ], DSAFilterSelect.prototype, "searchable", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], DSAFilterSelect.prototype, "open", 2);
-__decorateClass([
-  property({ type: Boolean })
-], DSAFilterSelect.prototype, "hoist", 2);
-__decorateClass([
-  property({ attribute: "label", reflect: true })
-], DSAFilterSelect.prototype, "label", 2);
-__decorateClass([
-  property({ attribute: "filter-label", reflect: true })
-], DSAFilterSelect.prototype, "filterLabel", 2);
 __decorateClass([
   property({ type: Number, attribute: "debounce-timeout" })
 ], DSAFilterSelect.prototype, "debounceTimeout", 2);
@@ -642,44 +500,18 @@ __decorateClass([
 __decorateClass([
   property({ type: Boolean, attribute: "columns-filter" })
 ], DSAFilterSelect.prototype, "columnsFilter", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], DSAFilterSelect.prototype, "disabled", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], DSAFilterSelect.prototype, "readonly", 2);
 __decorateClass([
   watch("searchValue", { waitUntilFirstUpdate: true })
 ], DSAFilterSelect.prototype, "handleSearchValueChange", 1);
 __decorateClass([
   watch("value", { waitUntilFirstUpdate: true })
 ], DSAFilterSelect.prototype, "handleValueChange", 1);
-__decorateClass([
-  watch(["disabled", "readonly"], { waitUntilFirstUpdate: true })
-], DSAFilterSelect.prototype, "handleDisabledChange", 1);
-__decorateClass([
-  watch("open", { waitUntilFirstUpdate: true })
-], DSAFilterSelect.prototype, "handleOpenChange", 1);
 __decorateClass([
   watch("seeAll")
 ], DSAFilterSelect.prototype, "handleSeeAllChange", 1);
 DSAFilterSelect = __decorateClass([
   customElement("dsa-filter-select")
 ], DSAFilterSelect);
-setDefaultAnimation("filter.show", {
-  keyframes: [
-    { opacity: 0, scale: 0.9 },
-    { opacity: 1, scale: 1 }
-  ],
-  options: { duration: 100, easing: "ease" }
-});
-setDefaultAnimation("filter.hide", {
-  keyframes: [
-    { opacity: 1, scale: 1 },
-    { opacity: 0, scale: 0.9 }
-  ],
-  options: { duration: 100, easing: "ease" }
-});
 
 export {
   DSAFilterSelect

package/dist/chunks/{chunk.IDAQJSVV.js → chunk.6GVM3YU4.js}

@@ -11,7 +11,7 @@ import {
 } from "./chunk.V7RJROLH.js";
 import {
   LocalizeController
-} from "./chunk.6L6CZSQX.js";
+} from "./chunk.G3MRVMJ4.js";
 import {
   watch
 } from "./chunk.6IH66JBY.js";
@@ -29,6 +29,7 @@ import {
 import { html } from "lit";
 import { customElement, property, query } from "lit/decorators.js";
 import { classMap } from "lit/directives/class-map.js";
+import { ifDefined } from "lit/directives/if-defined.js";
 var toastStack = Object.assign(document.createElement("div"), {
   className: "dsa-toast-stack"
 });
@@ -169,7 +170,17 @@ var DSAAlert = class extends ShoelaceElement {
             name=${this.getPrefixIconName()}
           ></dsa-icon>
           <div class="alert__text">
-            <div class="alert__title">${this.title}</div>
+            ${this.title !== "" ? html`
+                  <div
+                    part="header"
+                    id="header"
+                    aria-level=${ifDefined(this.headerLevel)}
+                    role=${ifDefined(this.headerLevel ? "heading" : void 0)}
+                    class="alert__title"
+                  >
+                    ${this.title}
+                  </div>
+                ` : ""}
             <slot part="message" class="alert__message"></slot>
           </div>
 
@@ -203,6 +214,9 @@ __decorateClass([
 __decorateClass([
   property({ type: Boolean, reflect: true })
 ], DSAAlert.prototype, "closable", 2);
+__decorateClass([
+  property({ attribute: "header-level", reflect: true })
+], DSAAlert.prototype, "headerLevel", 2);
 __decorateClass([
   property({ reflect: true })
 ], DSAAlert.prototype, "variant", 2);