@ds-autonomie/web-components 2.3.1 → 2.4.0

package/dist/chunks/{chunk.NHPMJYPM.js → chunk.G3UE6SMI.js}

@@ -3,10 +3,10 @@ import {
 } from "./chunk.O4MZVDWB.js";
 import {
   FormControlLayout
-} from "./chunk.LGDM46D4.js";
+} from "./chunk.RVCSQIWF.js";
 import {
   combobox_styles_default
-} from "./chunk.WB2DWTAB.js";
+} from "./chunk.YJEHKLDJ.js";
 import {
   scrollIntoView
 } from "./chunk.EMIT7S33.js";
@@ -29,7 +29,7 @@ import {
 } from "./chunk.HGR7A5FK.js";
 import {
   LocalizeController
-} from "./chunk.U7ZMMMJ3.js";
+} from "./chunk.YWHYMKYI.js";
 import {
   watch
 } from "./chunk.NOMN6DGD.js";
@@ -58,6 +58,7 @@ var DSACombobox = class extends FormControlLayout {
     this.selectedOptions = [];
     this.allOptions = [];
     this.filteredOptions = [];
+    this.displayedOptionsCount = 0;
     this.debounceTimerId = null;
     this.open = false;
     this.value = "";
@@ -69,8 +70,9 @@ var DSACombobox = class extends FormControlLayout {
     this.items = void 0;
     this.multiple = false;
     this.maxOptionsVisible = 3;
+    this.visibleListLength = void 0;
     this.debounceTimeout = 300;
-    this.fetchingState = "success";
+    this.fetchingState = "idle";
     this.overrideDefaultFiltering = false;
   }
   /** Gets the validity state object */
@@ -88,6 +90,7 @@ var DSACombobox = class extends FormControlLayout {
     this.open = false;
     this.allOptions = this.getAllOptions();
     this.filteredOptions = [...this.allOptions];
+    this.resetDisplayedOptionsCount();
   }
   /** Input events */
   handleBlur() {
@@ -109,7 +112,11 @@ var DSACombobox = class extends FormControlLayout {
     event.preventDefault();
     this.displayInput.focus({ preventScroll: true });
     this.filterOptions(this.displayLabel);
-    this.open = !this.open;
+    if (!this.open) {
+      this.show();
+    } else {
+      this.hide();
+    }
   }
   handleComboboxKeyDown(event) {
     this.filterOptions(this.displayLabel);
@@ -136,7 +143,6 @@ var DSACombobox = class extends FormControlLayout {
     }
   }
   handleInput() {
-    var _a;
     this.displayLabel = this.displayInput.value;
     this.show();
     if (this.debounceTimerId !== null) {
@@ -146,12 +152,6 @@ var DSACombobox = class extends FormControlLayout {
       () => this.emit("dsa-input"),
       this.debounceTimeout
     );
-    if (!this.multiple) {
-      if (this.displayLabel !== ((_a = this.selectedOptions[0]) == null ? void 0 : _a.getTextLabel())) {
-        this.value = "";
-        this.clearSelectedOptions();
-      }
-    }
   }
   handleClearClick(event) {
     event.stopPropagation();
@@ -179,6 +179,9 @@ var DSACombobox = class extends FormControlLayout {
       });
     }
   }
+  resetDisplayedOptionsCount() {
+    this.displayedOptionsCount = this.visibleListLength ? Math.min(this.visibleListLength, this.filteredOptions.length) : this.filteredOptions.length;
+  }
   // Toggles an option's selected state
   toggleOptionSelection(option, force) {
     option.selected = force || !option.selected;
@@ -188,6 +191,10 @@ var DSACombobox = class extends FormControlLayout {
   handleOptionClick(event) {
     const target = event.target;
     const option = target.closest(OPTION_TAG);
+    this.setCurrentOption(void 0);
+    if (option === this.seeMoreOption) {
+      return;
+    }
     if (option !== null && !option.disabled) {
       const oldValue = this.value;
       if (this.multiple) {
@@ -211,6 +218,7 @@ var DSACombobox = class extends FormControlLayout {
     }
   }
   handleDefaultSlotChange() {
+    this.resetDisplayedOptionsCount();
     if (customElements.get(OPTION_TAG)) {
       this.allOptions = this.getAllOptions();
       this.filterOptions(this.displayLabel);
@@ -255,6 +263,7 @@ var DSACombobox = class extends FormControlLayout {
     optionsNodeList.forEach((option) => {
       const clonedOption = option.cloneNode(true);
       clonedOption.multiple = this.multiple;
+      clonedOption.id = clonedOption.value;
       allOptions.push(clonedOption);
     });
     return allOptions;
@@ -267,7 +276,7 @@ var DSACombobox = class extends FormControlLayout {
   }
   // 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, focus = false) {
+  setCurrentOption(option) {
     this.allOptions.forEach((el) => {
       el.current = false;
       el.tabIndex = -1;
@@ -275,10 +284,6 @@ var DSACombobox = class extends FormControlLayout {
     if (option !== void 0) {
       this.currentOption = option;
       option.current = true;
-      option.tabIndex = 0;
-      if (focus) {
-        option.focus();
-      }
     } else {
       this.currentOption = void 0;
     }
@@ -302,7 +307,6 @@ var DSACombobox = class extends FormControlLayout {
     var _a, _b, _c, _d;
     if (this.multiple) {
       this.value = this.selectedOptions.map((el) => el.value);
-      this.displayLabel = "";
     } else {
       this.value = (_b = (_a = this.selectedOptions[0]) == null ? void 0 : _a.value) != null ? _b : this.value;
       this.displayLabel = (_d = (_c = this.selectedOptions[0]) == null ? void 0 : _c.getTextLabel()) != null ? _d : "";
@@ -370,7 +374,9 @@ var DSACombobox = class extends FormControlLayout {
       this.hide();
       this.displayInput.focus({ preventScroll: true });
       this.hasVisualFocus = true;
-    } else if (event.key === "Escape" && !this.open) {
+      return;
+    }
+    if (event.key === "Escape") {
       if (this.multiple && this.displayLabel !== "") {
         event.stopPropagation();
         this.displayLabel = "";
@@ -382,8 +388,13 @@ var DSACombobox = class extends FormControlLayout {
     }
   }
   handleEnterKey(event) {
+    var _a;
     const target = event.target;
     const isTag = target.closest("dsa-tag") !== null;
+    if ((_a = this.seeMoreOption) == null ? void 0 : _a.current) {
+      this.handleSeeMoreClick();
+      return;
+    }
     if (isTag) {
       return;
     }
@@ -411,35 +422,69 @@ var DSACombobox = class extends FormControlLayout {
     this.setCurrentOption(void 0);
   }
   handleNavigationKeys(event) {
-    const currentIndex = this.currentOption !== void 0 ? this.filteredOptions.indexOf(this.currentOption) : -1;
-    let newIndex = Math.max(0, currentIndex);
+    var _a, _b;
+    const currentOptionIndex = this.currentOption !== void 0 ? this.filteredOptions.indexOf(this.currentOption) : -1;
     event.preventDefault();
     if (!this.open) {
       this.show();
     }
     switch (event.key) {
       case "ArrowDown":
-        if (currentIndex < this.allOptions.length - 1) {
-          newIndex = currentIndex + 1;
+        if ((_a = this.seeMoreOption) == null ? void 0 : _a.current) break;
+        else if (currentOptionIndex < this.displayedOptionsCount - 1) {
+          this.setCurrentOption(this.filteredOptions[currentOptionIndex + 1]);
+        } else if (this.filteredOptions.length > this.displayedOptionsCount) {
+          this.setCurrentOption(void 0);
+          if (this.seeMoreOption) this.seeMoreOption.current = true;
         }
         break;
       case "ArrowUp":
-        if (currentIndex === -1) {
-          newIndex = 1;
-        } else if (currentIndex > 0) {
-          newIndex = currentIndex - 1;
+        if ((_b = this.seeMoreOption) == null ? void 0 : _b.current) {
+          this.setCurrentOption(
+            this.filteredOptions[this.displayedOptionsCount - 1]
+          );
+          this.seeMoreOption.current = false;
+        } else if (currentOptionIndex === -1) {
+          this.setCurrentOption(this.filteredOptions[0]);
+        } else if (currentOptionIndex > 0) {
+          this.setCurrentOption(this.filteredOptions[currentOptionIndex - 1]);
         }
         break;
       case "Home":
-        newIndex = 0;
+        this.setCurrentOption(this.filteredOptions[0]);
+        if (this.seeMoreOption) this.seeMoreOption.current = false;
         break;
       case "End":
-        newIndex = this.filteredOptions.length - 1;
+        this.setCurrentOption(
+          this.filteredOptions[this.displayedOptionsCount - 1]
+        );
+        if (this.seeMoreOption) this.seeMoreOption.current = false;
         break;
     }
-    this.setCurrentOption(this.filteredOptions[newIndex], true);
     this.hasVisualFocus = false;
   }
+  handleSeeMoreClick() {
+    var _a;
+    this.setCurrentOption(this.filteredOptions[this.displayedOptionsCount]);
+    this.displayedOptionsCount = Math.min(
+      this.displayedOptionsCount + ((_a = this.visibleListLength) != null ? _a : 0),
+      this.filteredOptions.length
+    );
+    if (this.seeMoreOption) this.seeMoreOption.current = false;
+  }
+  getDescriptionIds() {
+    let ids = [];
+    if (this.multiple && this.maxOptionsVisible > 0) {
+      const tagList = this.selectedOptions.slice(0, this.maxOptionsVisible).map((option) => `tag-${option.value}`).join(" ");
+      ids = [...ids, tagList];
+    }
+    if (this.multiple && this.selectedOptions.length > this.maxOptionsVisible) {
+      ids = [...ids, "tag-remaining"];
+    }
+    if (this.error) ids = [...ids, "error-text"];
+    ids = [...ids, "help-text", "description"];
+    return ids.join(" ");
+  }
   handleDisabledChange() {
     if (this.disabled) {
       this.open = false;
@@ -455,6 +500,7 @@ var DSACombobox = class extends FormControlLayout {
   handleItemsChange() {
     var _a;
     (_a = this.items) == null ? void 0 : _a.forEach((item) => {
+      item.id = item.id && item.id !== "" ? item.id : item.value;
       item.multiple = this.multiple;
     });
     this.allOptions = this.getAllOptions();
@@ -466,6 +512,7 @@ var DSACombobox = class extends FormControlLayout {
     if (!this.multiple && this.selectedOptions.length > 0) {
       this.syncOnSelection();
     }
+    this.resetDisplayedOptionsCount();
   }
   handleValueChange() {
     const value = Array.isArray(this.value) ? this.value : [this.value];
@@ -485,7 +532,7 @@ var DSACombobox = class extends FormControlLayout {
       this.popup.active = true;
       this.displayInput.focus({ preventScroll: true });
       requestAnimationFrame(() => {
-        this.setCurrentOption(this.currentOption, true);
+        this.setCurrentOption(this.currentOption);
       });
       const { keyframes, options } = getAnimation(this, "select.show", {
         dir: this.localize.dir()
@@ -509,7 +556,12 @@ 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() {
     this.allOptions.forEach((option) => {
@@ -518,7 +570,7 @@ var DSACombobox = class extends FormControlLayout {
   }
   /** Shows the listbox. */
   async show() {
-    if (this.open || this.disabled || this.readonly) {
+    if (this.open || this.disabled || this.readonly || this.allOptions.length === 0 && this.fetchingState === "idle") {
       return void 0;
     }
     this.open = true;
@@ -570,7 +622,10 @@ var DSACombobox = class extends FormControlLayout {
     const isPlaceholderVisible = this.placeholder && this.value.length === 0;
     const selectInputWidth = this.value ? isValueDefined ? this.value.length : 1 : void 0;
     const isDisabledOrReadonly = this.disabled || this.readonly;
-    const ariaDescribedBy = `${this.multiple && this.maxOptionsVisible > 0 ? this.selectedOptions.slice(0, this.maxOptionsVisible).map((option) => `tag-${option.value}`).join(" ") : ""} ${this.multiple && this.selectedOptions.length > this.maxOptionsVisible ? "tag-remaining" : ""} ${this.error ? "error-text" : ""} help-text`;
+    const displayedOptions = this.filteredOptions.slice(
+      0,
+      this.displayedOptionsCount
+    );
     return html`
       <dsa-popup
         class=${classMap({
@@ -641,7 +696,7 @@ var DSACombobox = class extends FormControlLayout {
       hasLabel ? void 0 : this.title
     )}
               aria-disabled=${isDisabledOrReadonly ? "true" : "false"}
-              aria-describedby=${ariaDescribedBy}
+              aria-describedby=${this.getDescriptionIds()}
               aria-activedescendant=${(_b = (_a = this.currentOption) == null ? void 0 : _a.id) != null ? _b : ""}
               aria-invalid=${ifDefined(this.error ? "true" : void 0)}
               aria-required=${ifDefined(this.required ? "true" : void 0)}
@@ -721,43 +776,55 @@ var DSACombobox = class extends FormControlLayout {
                   <dsa-icon name="close" library="system"></dsa-icon>
                 </button>
               ` : ""}
-
-          <dsa-icon
-            class="select__expand-icon"
-            name="expand_more"
-            library="system"
-          ></dsa-icon>
+          ${this.allOptions.length > 0 || this.fetchingState !== "idle" ? html`
+                <dsa-icon
+                  class="select__expand-icon"
+                  name="expand_more"
+                  library="system"
+                ></dsa-icon>
+              ` : ""}
+        </div>
+        <div class="select__panel" @keydown=${this.handleDefaultKeyDown}>
+          <ul
+            id="listbox"
+            role="listbox"
+            aria-expanded=${this.open ? "true" : "false"}
+            aria-multiselectable="false"
+            aria-labelledby="label"
+            part="listbox"
+            class="select__listbox"
+            tabindex="-1"
+            @mouseup=${this.handleOptionClick}
+          >
+            ${this.fetchingState === "loading" ? html`
+                  <div class="select__loading_text">
+                    <dsa-spinner></dsa-spinner>
+                    <p>${this.localize.term("optionsLoading")}</p>
+                  </div>
+                ` : html``}
+            ${this.fetchingState === "error" ? html`
+                  <div class="select__loading_text">
+                    <p>${this.localize.term("optionsError")}</p>
+                  </div>
+                ` : html``}
+            ${["idle", "success"].includes(this.fetchingState) && this.filteredOptions.length > 0 ? displayedOptions : html``}
+            ${this.visibleListLength && this.visibleListLength > 0 && this.filteredOptions.length > this.displayedOptionsCount ? html`
+                  <dsa-option
+                    class="select__panel-see-more-option"
+                    id="dsa-seemore-option"
+                    @click=${this.handleSeeMoreClick}
+                    ><span class="see-more-option-text"
+                      >${this.localize.term("seeMore")}</span
+                    ></dsa-option
+                  >
+                ` : ""}
+            ${["idle", "success"].includes(this.fetchingState) && this.filteredOptions.length === 0 ? html`
+                  <div class="select__empty_text">
+                    <p>${this.localize.term("noMatchFound")}</p>
+                  </div>
+                ` : html``}
+          </ul>
         </div>
-        <ul
-          id="listbox"
-          role="listbox"
-          aria-expanded=${this.open ? "true" : "false"}
-          aria-multiselectable="false"
-          aria-labelledby="label"
-          part="listbox"
-          class="select__listbox"
-          tabindex="-1"
-          @mouseup=${this.handleOptionClick}
-          @keydown=${this.handleDefaultKeyDown}
-        >
-          ${this.fetchingState === "loading" ? html`
-                <div class="select__loading_text">
-                  <dsa-spinner></dsa-spinner>
-                  <p>${this.localize.term("optionsLoading")}</p>
-                </div>
-              ` : html``}
-          ${this.fetchingState === "error" ? html`
-                <div class="select__loading_text">
-                  <p>${this.localize.term("optionsError")}</p>
-                </div>
-              ` : html``}
-          ${this.fetchingState === "success" && this.filteredOptions.length > 0 ? this.filteredOptions : html``}
-          ${this.fetchingState === "success" && this.filteredOptions.length === 0 ? html`
-                <div class="select__empty_text">
-                  <p>${this.localize.term("noMatchFound")}</p>
-                </div>
-              ` : html``}
-        </ul>
 
         <slot
           class="slot_options"
@@ -785,6 +852,9 @@ __decorateClass([
 __decorateClass([
   query(".select__listbox")
 ], DSACombobox.prototype, "listbox", 2);
+__decorateClass([
+  query(".select__panel-see-more-option")
+], DSACombobox.prototype, "seeMoreOption", 2);
 __decorateClass([
   state()
 ], DSACombobox.prototype, "hasVisualFocus", 2);
@@ -803,6 +873,9 @@ __decorateClass([
 __decorateClass([
   state()
 ], DSACombobox.prototype, "filteredOptions", 2);
+__decorateClass([
+  state()
+], DSACombobox.prototype, "displayedOptionsCount", 2);
 __decorateClass([
   state()
 ], DSACombobox.prototype, "debounceTimerId", 2);
@@ -847,6 +920,9 @@ __decorateClass([
 __decorateClass([
   property({ attribute: "max-options-visible", type: Number })
 ], DSACombobox.prototype, "maxOptionsVisible", 2);
+__decorateClass([
+  property({ attribute: "visible-list-length", type: Number || void 0 })
+], DSACombobox.prototype, "visibleListLength", 2);
 __decorateClass([
   property({ type: Number, attribute: "debounce-timeout" })
 ], DSACombobox.prototype, "debounceTimeout", 2);

package/dist/chunks/{chunk.6KWCQDRD.js → chunk.GFXISORD.js}

@@ -1,9 +1,15 @@
 import {
   button_styles_default
 } from "./chunk.JEZOETYM.js";
+import {
+  HasSlotController
+} from "./chunk.YIY5RM53.js";
 import {
   watch
 } from "./chunk.NOMN6DGD.js";
+import {
+  a11yWarning
+} from "./chunk.PWL7QCVG.js";
 import {
   ShoelaceElement
 } from "./chunk.XZ5FE34T.js";
@@ -167,6 +173,7 @@ var form_toggle_button_styles_default = css`
 var FormToggleButton = class extends ShoelaceElement {
   constructor() {
     super(...arguments);
+    this.hasSlotController = new HasSlotController(this, "[default]");
     this.checked = false;
     this.parentDisabled = false;
     this.disabled = false;
@@ -202,6 +209,11 @@ var FormToggleButton = class extends ShoelaceElement {
     const isDisabled = this.disabled || this.parentDisabled;
     const isReadonly = this.readonly || this.parentReadonly;
     const isDeactivated = isDisabled || isReadonly;
+    if (!this.hasSlotController.test("[default]")) {
+      a11yWarning(
+        `<dsa-${this.type}-card> requires an accessible name in the default slot for accessibility`
+      );
+    }
     return html`
       <div part="base">
         <button

package/dist/chunks/{chunk.OWG5FD2H.js → chunk.GI3JNOHH.js}

@@ -15,8 +15,17 @@ var table_header_row_styles_default = css`
     color: var(--dsa-wc-table-header-row-color);
   }
 
-  ::slotted(dsa-table-header-cell) {
-    block-size: var(--dsa-wc-table-header-row-height);
+  /* Sizes */
+  :host([size='small']) {
+    block-size: var(--dsa-wc-table-row-small-height);
+  }
+
+  :host([size='medium']) {
+    block-size: var(--dsa-wc-table-row-medium-height);
+  }
+
+  :host([size='large']) {
+    block-size: var(--dsa-wc-table-row-large-height);
   }
 
   [part~='column-checkbox'] {

package/dist/chunks/{chunk.K53YJ3XK.js → chunk.GNJX6QSO.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk.JDIBYGPL.js";
 import {
   LocalizeController
-} from "./chunk.U7ZMMMJ3.js";
+} from "./chunk.YWHYMKYI.js";
 import {
   watch
 } from "./chunk.NOMN6DGD.js";

package/dist/chunks/{chunk.P3CATWXI.js → chunk.GRNDTTXR.js}

@@ -1,12 +1,12 @@
 import {
   breadcrumb_item_styles_default
-} from "./chunk.MILDW5D6.js";
+} from "./chunk.WBUREDTC.js";
 import {
   HasSlotController
 } from "./chunk.YIY5RM53.js";
 import {
   LocalizeController
-} from "./chunk.U7ZMMMJ3.js";
+} from "./chunk.YWHYMKYI.js";
 import {
   ShoelaceElement
 } from "./chunk.XZ5FE34T.js";

package/dist/chunks/{chunk.5H3FRLYG.js → chunk.GSKMPYLG.js}

@@ -47,32 +47,32 @@ var icon_button_styles_default = css`
     pointer-events: none;
   }
   .icon-button__icon--2xsmall {
-    width: 10px;
-    height: 10px;
+    width: var(--dsa-wc-icon-button-size--2xsmall);
+    height: var(--dsa-wc-icon-button-size--2xsmall);
   }
   .icon-button__icon--xsmall {
-    width: 12px;
-    height: 12px;
+    width: var(--dsa-wc-icon-button-size--xsmall);
+    height: var(--dsa-wc-icon-button-size--xsmall);
   }
   .icon-button__icon--small {
-    width: 14px;
-    height: 14px;
+    width: var(--dsa-wc-icon-button-size--small);
+    height: var(--dsa-wc-icon-button-size--small);
   }
   .icon-button__icon--medium {
-    width: 16px;
-    height: 16px;
+    width: var(--dsa-wc-icon-button-size--medium);
+    height: var(--dsa-wc-icon-button-size--medium);
   }
   .icon-button__icon--large {
-    width: 20px;
-    height: 20px;
+    width: var(--dsa-wc-icon-button-size--large);
+    height: var(--dsa-wc-icon-button-size--large);
   }
   .icon-button__icon--xlarge {
-    width: 24px;
-    height: 24px;
+    width: var(--dsa-wc-icon-button-size--xlarge);
+    height: var(--dsa-wc-icon-button-size--xlarge);
   }
   .icon-button__icon--2xlarge {
-    width: 36px;
-    height: 36px;
+    width: var(--dsa-wc-icon-button-size--2xlarge);
+    height: var(--dsa-wc-icon-button-size--2xlarge);
   }
 
   .icon-button__description {

package/dist/chunks/{chunk.KFUZ6JMQ.js → chunk.H3X3D747.js}

@@ -1,9 +1,9 @@
 import {
   tag_styles_default
-} from "./chunk.WFHOSUOX.js";
+} from "./chunk.4LRLYTU2.js";
 import {
   LocalizeController
-} from "./chunk.U7ZMMMJ3.js";
+} from "./chunk.YWHYMKYI.js";
 import {
   watch
 } from "./chunk.NOMN6DGD.js";

package/dist/chunks/{chunk.3EAWXV27.js → chunk.H7ZLX7SO.js}

@@ -1,6 +1,6 @@
 import {
   input_styles_default
-} from "./chunk.CWDSCTUA.js";
+} from "./chunk.OHDR6G6J.js";
 
 // src/components/input-date/input-date.styles.ts
 import { css } from "lit";