@ds-autonomie/web-components 2.6.0 → 2.7.1

package/dist/chunks/chunk.22OCLFM3.js

@@ -0,0 +1,100 @@
+import {
+  form_control_styles_default
+} from "./chunk.6KQTEZWQ.js";
+import {
+  component_styles_default
+} from "./chunk.TUVJKY7S.js";
+
+// src/components/checkbox/checkbox.styles.ts
+import { css } from "lit";
+var checkbox_styles_default = css`
+  ${component_styles_default}
+  ${form_control_styles_default}
+  :host {
+    display: inline-block;
+  }
+
+  .form-control {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .checkbox {
+    position: relative;
+    display: inline-flex;
+    align-items: flex-start;
+    color: var(--dsa-wc-checkbox-color);
+    vertical-align: middle;
+    cursor: pointer;
+  }
+
+  .checkbox--small {
+    --toggle-size: var(--dsa-wc-checkbox-size-small);
+    font: var(--dsa-wc-checkbox-font-small);
+  }
+
+  .checkbox--medium {
+    --toggle-size: var(--dsa-wc-checkbox-size);
+    font: var(--dsa-wc-checkbox-font);
+  }
+
+  .checkbox--large {
+    --toggle-size: var(--dsa-wc-checkbox-size-large);
+    font: var(--dsa-wc-checkbox-font-large);
+  }
+
+  .checkbox__input {
+    position: absolute;
+    opacity: 0;
+    padding: 0;
+    margin: 0;
+    pointer-events: none;
+  }
+
+  /* Focus */
+  .checkbox
+    .checkbox__input:focus-visible
+    ~ dsa-internal-checkbox-box::part(control) {
+    outline: var(--dsa-wc-focus-ring);
+    outline-offset: var(--dsa-wc-focus-ring-offset);
+  }
+
+  .checkbox__label:not(.checkbox--disabled) {
+    display: none;
+  }
+
+  .checkbox--has-label .checkbox__label:not(.checkbox--disabled) {
+    display: inline-block;
+    color: var(--dsa-wc-checkbox-color);
+    line-height: var(--toggle-size);
+    margin-inline-start: 0.5em;
+    user-select: none;
+  }
+
+  .checkbox__label-required {
+    color: var(--dsa-wc-form-required-content-color);
+  }
+
+  /* Disabled */
+  .checkbox--disabled {
+    cursor: not-allowed;
+  }
+  .checkbox--disabled:not(.checkbox--readonly) .checkbox__label {
+    color: var(--dsa-wc-checkbox-label-color-disabled);
+  }
+
+  /* Error */
+  .checkbox--error:not(.checkbox--disabled):not(.checkbox--readonly)
+    > .checkbox__label {
+    color: var(--dsa-wc-checkbox-label-color-error);
+  }
+
+  /* Readonly */
+  .checkbox--readonly {
+    cursor: not-allowed;
+  }
+`;
+
+export {
+  checkbox_styles_default
+};

package/dist/chunks/chunk.2E4YJNET.js

@@ -0,0 +1,31 @@
+import {
+  component_styles_default
+} from "./chunk.TUVJKY7S.js";
+
+// src/components/table-single-cell-row/table-single-cell-row.styles.ts
+import { css } from "lit";
+var table_single_cell_row_styles_default = css`
+  ${component_styles_default}
+
+  :host {
+    display: table-row;
+  }
+
+  :host(:hover) {
+    background: var(--dsa-wc-table-row-hover-background);
+  }
+
+  .single-cell-row {
+    font: var(--dsa-wc-table-row-font);
+    color: var(--dsa-wc-table-row-color);
+    inline-size: 100%;
+    padding: var(--dsa-wc-table-cell-padding-y)
+      var(--dsa-wc-table-cell-padding-x);
+    border-block-end: var(--dsa-wc-table-cell-border-size) solid
+      var(--dsa-wc-table-cell-border-color);
+  }
+`;
+
+export {
+  table_single_cell_row_styles_default
+};

package/dist/chunks/chunk.2M2IP243.js

@@ -0,0 +1,549 @@
+import {
+  DSAOption
+} from "./chunk.UVHW7PER.js";
+import {
+  DSAInput
+} from "./chunk.JMI76HD4.js";
+import {
+  FilterBase
+} from "./chunk.7APL3BFH.js";
+import {
+  filter_select_styles_default
+} from "./chunk.WIJ5PZTL.js";
+import {
+  normalizeStr
+} from "./chunk.O4MZVDWB.js";
+import {
+  scrollIntoView
+} from "./chunk.EMIT7S33.js";
+import {
+  watch
+} from "./chunk.NOMN6DGD.js";
+import {
+  __decorateClass
+} from "./chunk.S3NI7NKU.js";
+
+// src/components/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 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 html`<div role="list">
+        ${this.displayedOptions.map(
+        (el) => html`<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 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"
+            library="system"
+          ></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>
+      `;
+    }
+  }
+  renderDeSelectAll() {
+    const selectionCount = this.selectedOptions.length;
+    return html`
+      <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"
+                library="system"
+              ></dsa-icon>
+              ${this.localize.term("deselectAll")}
+            `}
+      </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
+              >
+              ${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>
+          ` : ""}
+
+      <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"
+        role=${this.multiple ? "group" : "radiogroup"}
+        @slotchange=${this.handleDefaultSlotChange}
+      ></slot>
+
+      <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__multiselect-header__deselect-all")
+], DSAFilterSelect.prototype, "deselectAllButton", 2);
+__decorateClass([
+  query("dsa-input")
+], DSAFilterSelect.prototype, "searchInput", 2);
+__decorateClass([
+  query(".filter__listbox")
+], DSAFilterSelect.prototype, "listbox", 2);
+__decorateClass([
+  query(".filter__see-all-button")
+], DSAFilterSelect.prototype, "seeAllButton", 2);
+__decorateClass([
+  state()
+], DSAFilterSelect.prototype, "displayLabel", 2);
+__decorateClass([
+  state()
+], DSAFilterSelect.prototype, "allOptions", 2);
+__decorateClass([
+  state()
+], DSAFilterSelect.prototype, "currentOption", 2);
+__decorateClass([
+  state()
+], DSAFilterSelect.prototype, "selectedOptions", 2);
+__decorateClass([
+  state()
+], DSAFilterSelect.prototype, "displayedOptions", 2);
+__decorateClass([
+  state()
+], DSAFilterSelect.prototype, "searchValue", 2);
+__decorateClass([
+  state()
+], DSAFilterSelect.prototype, "nbOptions", 2);
+__decorateClass([
+  state()
+], DSAFilterSelect.prototype, "seeAll", 2);
+__decorateClass([
+  state()
+], DSAFilterSelect.prototype, "debounceTimerId", 2);
+__decorateClass([
+  property({
+    converter: {
+      fromAttribute: (value) => value.split(" "),
+      toAttribute: (value) => {
+        if (typeof value === "string") {
+          return value;
+        } else {
+          return value.join(" ");
+        }
+      }
+    }
+  })
+], DSAFilterSelect.prototype, "value", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], DSAFilterSelect.prototype, "multiple", 2);
+__decorateClass([
+  property({ attribute: "max-visible-list-length", type: Number })
+], DSAFilterSelect.prototype, "maxVisibleListLength", 2);
+__decorateClass([
+  property({ type: Boolean })
+], DSAFilterSelect.prototype, "searchable", 2);
+__decorateClass([
+  property({ type: Number, attribute: "debounce-timeout" })
+], DSAFilterSelect.prototype, "debounceTimeout", 2);
+__decorateClass([
+  property({ attribute: "option-gender" })
+], DSAFilterSelect.prototype, "optionGender", 2);
+__decorateClass([
+  property({ 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([
+  customElement("dsa-filter-select")
+], DSAFilterSelect);
+
+export {
+  DSAFilterSelect
+};