@ds-autonomie/web-components 2.6.0 → 2.7.1

package/cdn/chunks/chunk.RMYPFUS2.js

@@ -0,0 +1,74 @@
+import {
+  card_nav_styles_default
+} from "./chunk.BQTG5LTJ.js";
+import {
+  HasSlotController
+} from "./chunk.YIY5RM53.js";
+import {
+  ifDefinedAndNotEmpty
+} from "./chunk.SUUV7E4I.js";
+import {
+  ShoelaceElement,
+  t
+} from "./chunk.EW5LC4ZI.js";
+import {
+  x
+} from "./chunk.JXF4O366.js";
+import {
+  __decorateClass
+} from "./chunk.4ZGVANML.js";
+
+// src/components/card-nav/card-nav.ts
+var DSACardNav = class extends ShoelaceElement {
+  constructor() {
+    super(...arguments);
+    this.hasSlotController = new HasSlotController(
+      this,
+      "[default]",
+      "media",
+      "title-icon",
+      "title",
+      "subtitle"
+    );
+  }
+  render() {
+    return x`
+      <div part="base" class="card-nav">
+        <slot name="media" part="media" class="card-nav__media"></slot>
+        <div class="card-nav__title-block">
+          <slot
+            name="title-icon"
+            class=${ifDefinedAndNotEmpty(
+      this.hasSlotController.test("title-icon") ? "card-nav__title_icon" : void 0
+    )}
+          ></slot>
+          <div class="title-block-text">
+            <slot
+              name="title"
+              class=${ifDefinedAndNotEmpty(
+      this.hasSlotController.test("title") ? "title" : void 0
+    )}
+            ></slot>
+            <slot
+              name="subtitle"
+              class=${ifDefinedAndNotEmpty(
+      this.hasSlotController.test("subtitle") ? "subtitle" : void 0
+    )}
+            ></slot>
+          </div>
+        </div>
+        <div class="card-nav__content" role="list">
+          <slot></slot>
+        </div>
+      </div>
+    `;
+  }
+};
+DSACardNav.styles = card_nav_styles_default;
+DSACardNav = __decorateClass([
+  t("dsa-card-nav")
+], DSACardNav);
+
+export {
+  DSACardNav
+};

package/cdn/chunks/chunk.RNH6IZWW.js

@@ -0,0 +1,27 @@
+import {
+  component_styles_default
+} from "./chunk.MQAAYEM3.js";
+import {
+  i
+} from "./chunk.UKK3NS3L.js";
+
+// src/components/visually-hidden/visually-hidden.styles.ts
+var visually_hidden_styles_default = i`
+  ${component_styles_default}
+
+  :host(:not(:focus-within)) {
+    position: absolute !important;
+    width: 1px !important;
+    height: 1px !important;
+    clip: rect(0 0 0 0) !important;
+    clip-path: inset(50%) !important;
+    border: none !important;
+    overflow: hidden !important;
+    white-space: nowrap !important;
+    padding: 0 !important;
+  }
+`;
+
+export {
+  visually_hidden_styles_default
+};

package/cdn/chunks/chunk.RPE5DQV3.js

@@ -0,0 +1,31 @@
+import {
+  x
+} from "./chunk.JXF4O366.js";
+
+// src/components/error-text/error-text.utils.ts
+function renderFormElementErrors(errorMessage) {
+  if (Array.isArray(errorMessage) && errorMessage.length > 1) {
+    return x` <div
+      id="error-text"
+      class="form-control__error-text"
+      role="list"
+    >
+      ${errorMessage.map((message) => {
+      return x`<dsa-error-text role="listitem"
+          >${message}</dsa-error-text
+        >`;
+    })}
+    </div>`;
+  } else {
+    return x` <dsa-error-text
+      id="error-text"
+      class="form-control__error-text"
+    >
+      ${errorMessage}
+    </dsa-error-text>`;
+  }
+}
+
+export {
+  renderFormElementErrors
+};

package/cdn/chunks/chunk.RPKQJKOJ.js

@@ -0,0 +1,558 @@
+import {
+  DSAOption
+} from "./chunk.DUVDKUAG.js";
+import {
+  DSAInput
+} from "./chunk.WYJYCTJH.js";
+import {
+  FilterBase
+} from "./chunk.727KD4JC.js";
+import {
+  filter_select_styles_default
+} from "./chunk.BQTNLW5P.js";
+import {
+  normalizeStr
+} from "./chunk.O4MZVDWB.js";
+import {
+  scrollIntoView
+} from "./chunk.EMIT7S33.js";
+import {
+  o
+} from "./chunk.XED65RH5.js";
+import {
+  watch
+} from "./chunk.4FQJ3QJK.js";
+import {
+  e,
+  n,
+  r,
+  t
+} from "./chunk.EW5LC4ZI.js";
+import {
+  x
+} from "./chunk.JXF4O366.js";
+import {
+  __decorateClass
+} from "./chunk.4ZGVANML.js";
+
+// src/components/filter-select/filter-select.ts
+var OPTION_TAG = "dsa-option";
+var DSAFilterSelect = class extends FilterBase {
+  constructor() {
+    super(...arguments);
+    this.displayLabel = "";
+    this.allOptions = [];
+    this.selectedOptions = [];
+    this.displayedOptions = [];
+    this.searchValue = "";
+    this.nbOptions = 0;
+    this.seeAll = false;
+    this.debounceTimerId = null;
+    this.value = "";
+    this.multiple = false;
+    this.maxVisibleListLength = 5;
+    this.searchable = false;
+    this.debounceTimeout = 300;
+    this.optionGender = "masculine";
+    this.columnsFilter = false;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.allOptions = this.getAllOptions();
+    this.nbOptions = this.allOptions.length;
+    this.filterOptions();
+  }
+  handleKeyDown(event) {
+    super.handleKeyDown(event);
+    const path = event.composedPath();
+    const isOption = path.some((el) => el instanceof DSAOption);
+    const isSearchInput = path.some((el) => el instanceof DSAInput);
+    if ((event.key === "Enter" || event.key === " ") && isOption && this.currentOption && !this.currentOption.disabled) {
+      event.preventDefault();
+      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.drawer) {
+        this.hide();
+        this.filterTrigger.focus({ preventScroll: true });
+      }
+    }
+    if (!this.multiple && isOption && ["ArrowUp", "ArrowDown", "Home", "End"].includes(event.key)) {
+      const currentIndex = this.displayedOptions.indexOf(this.currentOption);
+      let newIndex = Math.max(0, currentIndex);
+      if (!(currentIndex === 0 && event.key === "ArrowUp") && !(currentIndex === this.displayedOptions.length - 1 && event.key === "ArrowDown")) {
+        event.preventDefault();
+      }
+      if (event.key === "ArrowDown" && currentIndex < this.displayedOptions.length - 1) {
+        newIndex = currentIndex + 1;
+      } else if (event.key === "ArrowUp" && currentIndex > 0) {
+        newIndex = currentIndex - 1;
+      } else if (event.key === "Home") {
+        newIndex = 0;
+      } else if (event.key === "End") {
+        newIndex = this.displayedOptions.length - 1;
+      }
+      this.setCurrentOption(this.displayedOptions[newIndex]);
+    }
+    if (isSearchInput) {
+      event.stopPropagation();
+    }
+  }
+  handleSearchInput(event) {
+    event.stopPropagation();
+    this.searchValue = this.searchInput.value;
+    if (this.debounceTimerId !== null) {
+      clearTimeout(this.debounceTimerId);
+    }
+    this.debounceTimerId = setTimeout(() => {
+      this.emit("dsa-input");
+    }, this.debounceTimeout);
+  }
+  handleOptionFocus(event) {
+    const target = event.target;
+    const option = target.closest(OPTION_TAG);
+    if (option) {
+      this.setCurrentOption(option);
+    }
+  }
+  handleOptionClick(event) {
+    const target = event.target;
+    const option = target.closest(OPTION_TAG);
+    const oldValue = this.value;
+    if (option && !option.disabled) {
+      if (this.multiple || this.value.includes(option.value)) {
+        this.toggleOptionSelection(option);
+      } else {
+        this.setSelectedOptions(option);
+      }
+      if (this.value !== oldValue) {
+        this.updateComplete.then(() => {
+          this.emit("dsa-change");
+        });
+      }
+      if (!this.multiple && !this.drawer) {
+        this.updateComplete.then(
+          () => this.filterTrigger.focus({ preventScroll: true })
+        );
+        this.hide();
+        this.filterTrigger.focus({ preventScroll: true });
+      }
+    }
+  }
+  filterOptions() {
+    if (this.searchValue.length > 0) {
+      this.displayedOptions = this.allOptions.filter((option) => {
+        return normalizeStr(option.innerText).includes(
+          normalizeStr(this.searchValue)
+        );
+      });
+    } else if (!this.seeAll && this.maxVisibleListLength > 0) {
+      this.displayedOptions = this.allOptions.slice(
+        0,
+        this.maxVisibleListLength
+      );
+    } else {
+      this.displayedOptions = this.allOptions;
+    }
+    this.displayedOptions.forEach((el) => el.tabIndex = 0);
+  }
+  handleMultipleHeaderButtonClick() {
+    if (this.selectedOptions.length > 0) {
+      this.allOptions.forEach((el) => el.selected = false);
+    } else {
+      this.allOptions.forEach((el) => el.selected = true);
+    }
+    this.selectionChanged();
+    this.updateComplete.then(() => {
+      this.emit("dsa-change");
+    });
+  }
+  handleSearchClear() {
+    this.searchValue = "";
+  }
+  handleSeeAllClick() {
+    this.seeAll = true;
+    this.filterOptions();
+  }
+  handleDefaultSlotChange() {
+    if (customElements.get(OPTION_TAG)) {
+      this.allOptions = this.getAllOptions();
+      this.nbOptions = this.allOptions.length;
+      const value = Array.isArray(this.value) ? this.value : [this.value];
+      this.setSelectedOptions(
+        this.allOptions.filter((el) => value.includes(el.value))
+      );
+      this.filterOptions();
+    } else {
+      customElements.whenDefined(OPTION_TAG).then(() => this.handleDefaultSlotChange());
+    }
+  }
+  // Gets an array of all <dsa-option> elements
+  getAllOptions() {
+    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;
+      clonedOption.role = this.multiple ? "checkbox" : "radio";
+      clonedOption.classList.add("filter-select__option");
+      clonedOption.onfocus = this.handleOptionFocus.bind(this);
+      allOptions.push(clonedOption);
+    });
+    return allOptions;
+  }
+  // Gets the first <dsa-option> element
+  getFirstOption() {
+    return this.querySelector(OPTION_TAG);
+  }
+  // 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) {
+    this.displayedOptions.forEach((el) => {
+      el.current = false;
+    });
+    if (option) {
+      this.currentOption = option;
+      option.current = true;
+      option.focus();
+    }
+  }
+  // Sets the selected option(s)
+  setSelectedOptions(option) {
+    const newSelectedOptions = Array.isArray(option) ? option : [option];
+    this.allOptions.forEach((el) => el.selected = false);
+    if (newSelectedOptions.length) {
+      newSelectedOptions.forEach((el) => {
+        el.selected = true;
+        this.allOptions.find(
+          (rootOption) => rootOption.value === el.value
+        ).selected = true;
+      });
+    }
+    this.selectionChanged();
+  }
+  // Toggles an option's selected state
+  toggleOptionSelection(option, force) {
+    const rootOption = this.allOptions.find((el) => el.value === option.value);
+    if (force === true || force === false) {
+      rootOption.selected = force;
+    } else {
+      rootOption.selected = !option.selected;
+    }
+    this.selectionChanged();
+  }
+  // This method must be called whenever the selection changes. It will update the selected options cache, the current value, and the display value
+  selectionChanged() {
+    var _a, _b;
+    this.selectedOptions = this.allOptions.filter((el) => el.selected);
+    this.filterOptions();
+    this.displayedOptions.forEach((option) => {
+      option.selected = this.selectedOptions.map((el) => el.value).includes(option.value);
+    });
+    if (this.multiple) {
+      this.value = this.selectedOptions.map((el) => el.value);
+    } else {
+      this.value = (_b = (_a = this.selectedOptions[0]) == null ? void 0 : _a.value) != null ? _b : "";
+    }
+    if (this.selectedOptions[0]) {
+      this.selectedOptions[0].updateComplete.then(() => {
+        var _a2, _b2;
+        this.displayLabel = (_b2 = (_a2 = this.selectedOptions[0]) == null ? void 0 : _a2.getTextLabel()) != null ? _b2 : "";
+      });
+    } else {
+      this.displayLabel = "";
+    }
+  }
+  getDisplayedOptionsList() {
+    if (this.multiple) {
+      return x`<div role="list">
+        ${this.displayedOptions.map(
+        (el) => x`<div role="listitem">${el}</div>`
+      )}
+      </div>`;
+    } else {
+      return this.displayedOptions;
+    }
+  }
+  handleSearchValueChange() {
+    if (this.searchValue.length > 0) {
+      this.seeAll = true;
+    }
+    this.filterOptions();
+  }
+  handleValueChange() {
+    const value = Array.isArray(this.value) ? this.value : [this.value];
+    this.setSelectedOptions(
+      this.allOptions.filter((el) => value.includes(el.value))
+    );
+  }
+  async handleOpenChange() {
+    if (this.open) {
+      if (this.selectedOptions.length > 0) {
+        this.seeAll = true;
+      }
+      this.filterOptions();
+      this.setCurrentOption(this.selectedOptions[0] || this.getFirstOption());
+    }
+    await super.handleOpenChange();
+    if (this.open) {
+      requestAnimationFrame(() => {
+        this.setCurrentOption(this.currentOption);
+      });
+      if (this.currentOption) {
+        scrollIntoView(this.currentOption, this.listbox, "vertical", "auto");
+      }
+    }
+  }
+  handleSeeAllChange() {
+    if (this.seeAll && this.displayedOptions[this.maxVisibleListLength] !== void 0) {
+      setTimeout(
+        () => this.displayedOptions[this.maxVisibleListLength].focus()
+      );
+    }
+  }
+  handleMultipleChange() {
+    this.handleDefaultSlotChange();
+  }
+  /** Hides the listbox. */
+  async hide() {
+    await super.hide();
+    this.searchValue = "";
+  }
+  renderTrigger() {
+    if (this.columnsFilter) {
+      return x`
+        <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"
+            library="system"
+          ></dsa-icon>
+          ${this.label !== "" ? this.label : this.localize.term("columns")}
+        </dsa-button>
+      `;
+    } else {
+      const selectionCount = this.selectedOptions.length;
+      return x`
+        <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>
+      `;
+    }
+  }
+  renderDeSelectAll() {
+    const selectionCount = this.selectedOptions.length;
+    return x`
+      <dsa-button
+        class="filter__multiselect-header__deselect-all"
+        variant="tertiary"
+        size="small"
+        @click=${this.handleMultipleHeaderButtonClick}
+      >
+        ${selectionCount === 0 ? x` ${this.localize.term("selectAll")} ` : x`
+              <dsa-icon
+                name="restart_alt"
+                slot="prefix"
+                library="system"
+              ></dsa-icon>
+              ${this.localize.term("deselectAll")}
+            `}
+      </dsa-button>
+    `;
+  }
+  renderPanelContent() {
+    const selectionCount = this.selectedOptions.length;
+    return x`
+      ${this.multiple && !this.drawer ? x`
+            <div class="filter__multiselect-header">
+              <span role="status"
+                >${this.localize.term(
+      "numberSelected",
+      selectionCount,
+      this.optionGender
+    )}</span
+              >
+              ${this.renderDeSelectAll()}
+            </div>
+          ` : ""}
+      ${this.searchable ? x`
+            <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>
+          ` : ""}
+
+      <div
+        id="listbox"
+        role=${this.multiple ? "group" : "radiogroup"}
+        aria-multiselectable=${o(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() : x`<div class="filter__empty_text">
+              <p>${this.localize.term("noMatchFound")}</p>
+            </div>`}
+      </div>
+
+      <slot
+        class="filter__options"
+        tabindex="-1"
+        role=${this.multiple ? "group" : "radiogroup"}
+        @slotchange=${this.handleDefaultSlotChange}
+      ></slot>
+
+      <div class="filter-select__footer">
+        ${this.maxVisibleListLength > 0 && this.nbOptions > this.maxVisibleListLength && !this.seeAll ? x`
+              <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([
+  e(".filter__multiselect-header__deselect-all")
+], DSAFilterSelect.prototype, "deselectAllButton", 2);
+__decorateClass([
+  e("dsa-input")
+], DSAFilterSelect.prototype, "searchInput", 2);
+__decorateClass([
+  e(".filter__listbox")
+], DSAFilterSelect.prototype, "listbox", 2);
+__decorateClass([
+  e(".filter__see-all-button")
+], DSAFilterSelect.prototype, "seeAllButton", 2);
+__decorateClass([
+  r()
+], DSAFilterSelect.prototype, "displayLabel", 2);
+__decorateClass([
+  r()
+], DSAFilterSelect.prototype, "allOptions", 2);
+__decorateClass([
+  r()
+], DSAFilterSelect.prototype, "currentOption", 2);
+__decorateClass([
+  r()
+], DSAFilterSelect.prototype, "selectedOptions", 2);
+__decorateClass([
+  r()
+], DSAFilterSelect.prototype, "displayedOptions", 2);
+__decorateClass([
+  r()
+], DSAFilterSelect.prototype, "searchValue", 2);
+__decorateClass([
+  r()
+], DSAFilterSelect.prototype, "nbOptions", 2);
+__decorateClass([
+  r()
+], DSAFilterSelect.prototype, "seeAll", 2);
+__decorateClass([
+  r()
+], DSAFilterSelect.prototype, "debounceTimerId", 2);
+__decorateClass([
+  n({
+    converter: {
+      fromAttribute: (value) => value.split(" "),
+      toAttribute: (value) => {
+        if (typeof value === "string") {
+          return value;
+        } else {
+          return value.join(" ");
+        }
+      }
+    }
+  })
+], DSAFilterSelect.prototype, "value", 2);
+__decorateClass([
+  n({ type: Boolean, reflect: true })
+], DSAFilterSelect.prototype, "multiple", 2);
+__decorateClass([
+  n({ attribute: "max-visible-list-length", type: Number })
+], DSAFilterSelect.prototype, "maxVisibleListLength", 2);
+__decorateClass([
+  n({ type: Boolean })
+], DSAFilterSelect.prototype, "searchable", 2);
+__decorateClass([
+  n({ type: Number, attribute: "debounce-timeout" })
+], DSAFilterSelect.prototype, "debounceTimeout", 2);
+__decorateClass([
+  n({ attribute: "option-gender" })
+], DSAFilterSelect.prototype, "optionGender", 2);
+__decorateClass([
+  n({ type: Boolean, attribute: "columns-filter" })
+], DSAFilterSelect.prototype, "columnsFilter", 2);
+__decorateClass([
+  watch("searchValue", { waitUntilFirstUpdate: true })
+], DSAFilterSelect.prototype, "handleSearchValueChange", 1);
+__decorateClass([
+  watch("value", { waitUntilFirstUpdate: true })
+], DSAFilterSelect.prototype, "handleValueChange", 1);
+__decorateClass([
+  watch("seeAll")
+], DSAFilterSelect.prototype, "handleSeeAllChange", 1);
+__decorateClass([
+  watch("multiple")
+], DSAFilterSelect.prototype, "handleMultipleChange", 1);
+DSAFilterSelect = __decorateClass([
+  t("dsa-filter-select")
+], DSAFilterSelect);
+
+export {
+  DSAFilterSelect
+};