@ds-autonomie/web-components 2.14.0 → 2.14.1

package/dist/chunks/chunk.TZQ3MU6S.js

@@ -0,0 +1,184 @@
+import {
+  filter_counter_styles_default
+} from "./chunk.YSCXTTQZ.js";
+import {
+  FilterBase
+} from "./chunk.ZVKFVRCK.js";
+import {
+  watch
+} from "./chunk.QB2NJE2Y.js";
+import {
+  __decorateClass
+} from "./chunk.N3L4GIUO.js";
+
+// src/components/filter-counter/filter-counter.ts
+import { html } from "lit";
+import { customElement, property, query, state } from "lit/decorators.js";
+var DSAFilterCounter = class extends FilterBase {
+  constructor() {
+    super(...arguments);
+    this.value = "";
+    this.defaultValue = "";
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.tempValue = this.value === "" ? this.defaultValue : this.value;
+  }
+  handleInput(event) {
+    event.stopPropagation();
+    this.tempValue = this.filterInput.value;
+  }
+  handleDecrease() {
+    if (this.tempValue === "") {
+      this.tempValue = this.defaultValue !== "" ? this.defaultValue : "0";
+    } else if (!this.min || parseFloat(this.tempValue) > this.min) {
+      this.tempValue = `${parseFloat(this.tempValue) - 1}`;
+      this.emit("dsa-input");
+    }
+  }
+  handleIncrease() {
+    if (this.tempValue === "") {
+      this.tempValue = this.defaultValue !== "" ? this.defaultValue : "0";
+    } else if (!this.max || parseFloat(this.tempValue) < this.max) {
+      this.tempValue = `${parseFloat(this.tempValue) + 1}`;
+      this.emit("dsa-input");
+    }
+  }
+  handleReset() {
+    this.tempValue = this.defaultValue;
+    this.emit("dsa-input");
+    this.filterInput.focus({ preventScroll: true });
+  }
+  handleSubmit() {
+    this.value = this.tempValue;
+    this.emit("dsa-submit");
+    this.hide();
+    this.filterTrigger.focus({ preventScroll: true });
+  }
+  handleValueChange() {
+    if (this.value !== "") {
+      this.tempValue = this.value === "" ? this.defaultValue : this.value;
+    }
+  }
+  handleTempValueChange() {
+    if (this.drawer) {
+      this.value = this.tempValue;
+    }
+  }
+  handleFilterCounterOpenChange() {
+    if (!this.open) {
+      this.tempValue = this.value === "" ? this.defaultValue : this.value;
+    }
+  }
+  renderPanelContent() {
+    return html`
+      <div class="filter__content">
+        <dsa-icon-button
+          name="remove"
+          variant="secondary"
+          size="xlarge"
+          label=${this.localize.term("decrease")}
+          @click=${this.handleDecrease}
+          ?disabled=${this.min && parseFloat(this.tempValue) <= this.min}
+          class="filter__decrease"
+          library="system"
+        ></dsa-icon-button>
+        <dsa-input
+          type="number"
+          .value=${this.tempValue}
+          @input=${this.handleInput}
+          min=${this.min}
+          max=${this.max}
+          variant=${this.drawer ? "layer" : "base"}
+          accessible-name=${this.label}
+        ></dsa-input>
+        <dsa-icon-button
+          name="add"
+          variant="secondary"
+          size="xlarge"
+          label=${this.localize.term("increase")}
+          @click=${this.handleIncrease}
+          ?disabled=${this.max && parseFloat(this.tempValue) >= this.max}
+          class="filter__increase"
+          library="system"
+        ></dsa-icon-button>
+      </div>
+
+      <div class="filter__footer">
+        <dsa-button
+          variant="tertiary"
+          size="small"
+          @click=${this.handleReset}
+          class="filter__reset"
+          ?disabled=${this.tempValue === this.defaultValue}
+        >
+          <dsa-icon
+            name="restart_alt"
+            slot="prefix"
+            library="system"
+          ></dsa-icon>
+          ${this.localize.term("reinitialize")}
+        </dsa-button>
+
+        ${!this.drawer ? html`
+              <dsa-button
+                variant="primary"
+                size="small"
+                @click=${this.handleSubmit}
+                class="filter__submit"
+                ?disabled=${this.min && parseFloat(this.tempValue) < this.min || this.max && parseFloat(this.tempValue) > this.max}
+              >
+                ${this.localize.term("validate")}
+              </dsa-button>
+            ` : ""}
+      </div>
+    `;
+  }
+};
+DSAFilterCounter.styles = filter_counter_styles_default;
+__decorateClass([
+  query("dsa-input")
+], DSAFilterCounter.prototype, "filterInput", 2);
+__decorateClass([
+  query(".filter__decrease")
+], DSAFilterCounter.prototype, "decreaseButton", 2);
+__decorateClass([
+  query(".filter__increase")
+], DSAFilterCounter.prototype, "increaseButton", 2);
+__decorateClass([
+  query(".filter__reset")
+], DSAFilterCounter.prototype, "resetButton", 2);
+__decorateClass([
+  query(".filter__submit")
+], DSAFilterCounter.prototype, "submitButton", 2);
+__decorateClass([
+  state()
+], DSAFilterCounter.prototype, "tempValue", 2);
+__decorateClass([
+  property({ reflect: true })
+], DSAFilterCounter.prototype, "value", 2);
+__decorateClass([
+  property({ attribute: "default-value" })
+], DSAFilterCounter.prototype, "defaultValue", 2);
+__decorateClass([
+  property()
+], DSAFilterCounter.prototype, "min", 2);
+__decorateClass([
+  property()
+], DSAFilterCounter.prototype, "max", 2);
+__decorateClass([
+  watch("value", { waitUntilFirstUpdate: true })
+], DSAFilterCounter.prototype, "handleValueChange", 1);
+__decorateClass([
+  watch("tempValue", { waitUntilFirstUpdate: true })
+], DSAFilterCounter.prototype, "handleTempValueChange", 1);
+__decorateClass([
+  watch("open", { waitUntilFirstUpdate: true })
+], DSAFilterCounter.prototype, "handleFilterCounterOpenChange", 1);
+DSAFilterCounter = __decorateClass([
+  customElement("dsa-filter-counter")
+], DSAFilterCounter);
+
+export {
+  DSAFilterCounter
+};

package/dist/chunks/chunk.UKOZXT7U.js

@@ -0,0 +1,17 @@
+// src/internal/debounce.ts
+var TIMER_ID_KEY = /* @__PURE__ */ Symbol();
+function debounce(delay) {
+  return (_target, _propertyKey, descriptor) => {
+    const fn = descriptor.value;
+    descriptor.value = function valueFn(...args) {
+      clearTimeout(this[TIMER_ID_KEY]);
+      this[TIMER_ID_KEY] = window.setTimeout(() => {
+        fn.apply(this, args);
+      }, delay);
+    };
+  };
+}
+
+export {
+  debounce
+};

package/dist/chunks/chunk.UU7FKYW6.js

@@ -0,0 +1,312 @@
+import {
+  tree_item_styles_default
+} from "./chunk.42QDYDUA.js";
+import {
+  animateTo,
+  shimKeyframesHeightAuto,
+  stopAnimations
+} from "./chunk.D6XRV35U.js";
+import {
+  getAnimation,
+  setDefaultAnimation
+} from "./chunk.HPDCOGLH.js";
+import {
+  LocalizeController
+} from "./chunk.QY3AIGLE.js";
+import {
+  watch
+} from "./chunk.QB2NJE2Y.js";
+import {
+  ShoelaceElement
+} from "./chunk.SL3DN4BD.js";
+import {
+  __decorateClass
+} from "./chunk.N3L4GIUO.js";
+
+// src/components/tree-item/tree-item.ts
+import { html } from "lit";
+import { customElement, property, query, state } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.js";
+import { live } from "lit/directives/live.js";
+import { when } from "lit/directives/when.js";
+var DSATreeItem = class extends ShoelaceElement {
+  constructor() {
+    super(...arguments);
+    this.localize = new LocalizeController(this);
+    this.indeterminate = false;
+    this.isLeaf = false;
+    this.loading = false;
+    this.selectable = false;
+    this.expanded = false;
+    this.selected = false;
+    this.disabled = false;
+    this.lazy = false;
+  }
+  static isTreeItem(node) {
+    return node instanceof Element && node.getAttribute("role") === "treeitem";
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.setAttribute("role", "treeitem");
+    this.setAttribute("tabindex", "-1");
+    if (this.isNestedItem()) {
+      this.slot = "children";
+    }
+  }
+  firstUpdated() {
+    this.childrenContainer.hidden = !this.expanded;
+    this.childrenContainer.style.height = this.expanded ? "auto" : "0";
+    this.isLeaf = !this.lazy && this.getChildrenItems().length === 0;
+    this.handleExpandedChange();
+  }
+  async animateCollapse() {
+    this.emit("dsa-collapse");
+    await stopAnimations(this.childrenContainer);
+    const { keyframes, options } = getAnimation(this, "tree-item.collapse", {
+      dir: this.localize.dir()
+    });
+    await animateTo(
+      this.childrenContainer,
+      shimKeyframesHeightAuto(keyframes, this.childrenContainer.scrollHeight),
+      options
+    );
+    this.childrenContainer.hidden = true;
+    this.emit("dsa-after-collapse");
+  }
+  // Checks whether the item is nested into an item
+  isNestedItem() {
+    const parent = this.parentElement;
+    return !!parent && DSATreeItem.isTreeItem(parent);
+  }
+  handleChildrenSlotChange() {
+    this.loading = false;
+    this.isLeaf = !this.lazy && this.getChildrenItems().length === 0;
+  }
+  willUpdate(changedProperties) {
+    if (changedProperties.has("selected") && !changedProperties.has("indeterminate")) {
+      this.indeterminate = false;
+    }
+  }
+  async animateExpand() {
+    this.emit("dsa-expand");
+    await stopAnimations(this.childrenContainer);
+    this.childrenContainer.hidden = false;
+    const { keyframes, options } = getAnimation(this, "tree-item.expand", {
+      dir: this.localize.dir()
+    });
+    await animateTo(
+      this.childrenContainer,
+      shimKeyframesHeightAuto(keyframes, this.childrenContainer.scrollHeight),
+      options
+    );
+    this.childrenContainer.style.height = "auto";
+    this.emit("dsa-after-expand");
+  }
+  handleLoadingChange() {
+    this.setAttribute("aria-busy", this.loading ? "true" : "false");
+    if (!this.loading) {
+      this.animateExpand();
+    }
+  }
+  handleDisabledChange() {
+    this.setAttribute("aria-disabled", this.disabled ? "true" : "false");
+  }
+  handleSelectedChange() {
+    this.setAttribute("aria-selected", this.selected ? "true" : "false");
+  }
+  handleExpandedChange() {
+    if (!this.isLeaf) {
+      this.setAttribute("aria-expanded", this.expanded ? "true" : "false");
+    } else {
+      this.removeAttribute("aria-expanded");
+    }
+  }
+  handleExpandAnimation() {
+    if (this.expanded) {
+      if (this.lazy) {
+        this.loading = true;
+        this.emit("dsa-lazy-load");
+      } else {
+        this.animateExpand();
+      }
+    } else {
+      this.animateCollapse();
+    }
+  }
+  handleLazyChange() {
+    this.emit("dsa-lazy-change");
+  }
+  /** Gets all the nested tree items in this node. */
+  getChildrenItems({
+    includeDisabled = true
+  } = {}) {
+    return this.childrenSlot ? [...this.childrenSlot.assignedElements({ flatten: true })].filter(
+      // @ts-expect-error cleanup upon implementation
+      (item) => DSATreeItem.isTreeItem(item) && (includeDisabled || !item.disabled)
+    ) : [];
+  }
+  render() {
+    const isRtl = this.localize.dir() === "rtl";
+    const showExpandButton = !this.loading && (!this.isLeaf || this.lazy);
+    return html`
+      <div
+        part="base"
+        class="${classMap({
+      "tree-item": true,
+      "tree-item--expanded": this.expanded,
+      "tree-item--selected": this.selected,
+      "tree-item--disabled": this.disabled,
+      "tree-item--leaf": this.isLeaf,
+      "tree-item--has-expand-button": showExpandButton,
+      "tree-item--rtl": this.localize.dir() === "rtl"
+    })}"
+      >
+        <div
+          class="tree-item__item"
+          part="
+            item
+            ${this.disabled ? "item--disabled" : ""}
+            ${this.expanded ? "item--expanded" : ""}
+            ${this.indeterminate ? "item--indeterminate" : ""}
+            ${this.selected ? "item--selected" : ""}
+          "
+        >
+          <div class="tree-item__indentation" part="indentation"></div>
+
+          <div
+            part="expand-button"
+            class=${classMap({
+      "tree-item__expand-button": true,
+      "tree-item__expand-button--visible": showExpandButton
+    })}
+            aria-hidden="true"
+          >
+            ${when(this.loading, () => html` <dsa-spinner></dsa-spinner> `)}
+            <dsa-icon
+              class="tree-item__expand-icon"
+              name=${isRtl ? "chevron_left" : "chevron_right"}
+              library="system"
+            ></dsa-icon>
+
+            <dsa-icon
+              class="tree-item__collapse-icon"
+              name=${isRtl ? "chevron_left" : "chevron_right"}
+              library="system"
+            ></dsa-icon>
+          </div>
+
+          ${when(
+      this.selectable,
+      () => html`
+              <dsa-checkbox
+                tabindex="-1"
+                class="tree-item__checkbox"
+                ?disabled="${this.disabled}"
+                ?checked="${live(this.selected)}"
+                ?indeterminate="${this.indeterminate}"
+              ></dsa-checkbox>
+            `
+    )}
+
+          <slot class="tree-item__label" part="label"></slot>
+
+          ${when(
+      !this.selectable && this.selected,
+      () => html` <dsa-icon
+                class="tree-item__selected-icon"
+                name="check"
+                library="system"
+              ></dsa-icon>`
+    )}
+        </div>
+
+        <slot
+          name="children"
+          class="tree-item__children"
+          part="children"
+          role="group"
+          @slotchange="${this.handleChildrenSlotChange}"
+        ></slot>
+      </div>
+    `;
+  }
+};
+DSATreeItem.styles = tree_item_styles_default;
+__decorateClass([
+  state()
+], DSATreeItem.prototype, "indeterminate", 2);
+__decorateClass([
+  state()
+], DSATreeItem.prototype, "isLeaf", 2);
+__decorateClass([
+  state()
+], DSATreeItem.prototype, "loading", 2);
+__decorateClass([
+  state()
+], DSATreeItem.prototype, "selectable", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], DSATreeItem.prototype, "expanded", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], DSATreeItem.prototype, "selected", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], DSATreeItem.prototype, "disabled", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], DSATreeItem.prototype, "lazy", 2);
+__decorateClass([
+  query("slot:not([name])")
+], DSATreeItem.prototype, "defaultSlot", 2);
+__decorateClass([
+  query("slot[name=children]")
+], DSATreeItem.prototype, "childrenSlot", 2);
+__decorateClass([
+  query(".tree-item__item")
+], DSATreeItem.prototype, "itemElement", 2);
+__decorateClass([
+  query(".tree-item__children")
+], DSATreeItem.prototype, "childrenContainer", 2);
+__decorateClass([
+  query(".tree-item__expand-button slot")
+], DSATreeItem.prototype, "expandButtonSlot", 2);
+__decorateClass([
+  watch("loading", { waitUntilFirstUpdate: true })
+], DSATreeItem.prototype, "handleLoadingChange", 1);
+__decorateClass([
+  watch("disabled")
+], DSATreeItem.prototype, "handleDisabledChange", 1);
+__decorateClass([
+  watch("selected")
+], DSATreeItem.prototype, "handleSelectedChange", 1);
+__decorateClass([
+  watch("expanded", { waitUntilFirstUpdate: true })
+], DSATreeItem.prototype, "handleExpandedChange", 1);
+__decorateClass([
+  watch("expanded", { waitUntilFirstUpdate: true })
+], DSATreeItem.prototype, "handleExpandAnimation", 1);
+__decorateClass([
+  watch("lazy", { waitUntilFirstUpdate: true })
+], DSATreeItem.prototype, "handleLazyChange", 1);
+DSATreeItem = __decorateClass([
+  customElement("dsa-tree-item")
+], DSATreeItem);
+setDefaultAnimation("tree-item.expand", {
+  keyframes: [
+    { height: "0", opacity: "0", overflow: "hidden" },
+    { height: "auto", opacity: "1", overflow: "hidden" }
+  ],
+  options: { duration: 250, easing: "cubic-bezier(0.4, 0.0, 0.2, 1)" }
+});
+setDefaultAnimation("tree-item.collapse", {
+  keyframes: [
+    { height: "auto", opacity: "1", overflow: "hidden" },
+    { height: "0", opacity: "0", overflow: "hidden" }
+  ],
+  options: { duration: 200, easing: "cubic-bezier(0.4, 0.0, 0.2, 1)" }
+});
+
+export {
+  DSATreeItem
+};

package/dist/chunks/chunk.V2LO3RHA.js

@@ -0,0 +1,128 @@
+import {
+  LocalizeController
+} from "./chunk.QY3AIGLE.js";
+import {
+  ShoelaceElement
+} from "./chunk.SL3DN4BD.js";
+import {
+  __decorateClass
+} from "./chunk.N3L4GIUO.js";
+
+// src/components/relative-time/relative-time.ts
+import { html } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+var availableUnits = [
+  { max: 276e4, value: 6e4, unit: "minute" },
+  // max 46 minutes
+  { max: 72e6, value: 36e5, unit: "hour" },
+  // max 20 hours
+  { max: 5184e5, value: 864e5, unit: "day" },
+  // max 6 days
+  { max: 24192e5, value: 6048e5, unit: "week" },
+  // max 28 days
+  { max: 28512e6, value: 2592e6, unit: "month" },
+  // max 11 months
+  { max: Infinity, value: 31536e6, unit: "year" }
+];
+var DSARelativeTime = class extends ShoelaceElement {
+  constructor() {
+    super(...arguments);
+    this.localize = new LocalizeController(this);
+    this.isoTime = "";
+    this.relativeTime = "";
+    this.titleTime = "";
+    this.date = /* @__PURE__ */ new Date();
+    this.format = "long";
+    this.numeric = "auto";
+    this.sync = false;
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    clearTimeout(this.updateTimeout);
+  }
+  render() {
+    const now = /* @__PURE__ */ new Date();
+    const then = new Date(this.date);
+    if (isNaN(then.getMilliseconds())) {
+      this.relativeTime = "";
+      this.isoTime = "";
+      return "";
+    }
+    const diff = then.getTime() - now.getTime();
+    const { unit, value } = availableUnits.find(
+      (singleUnit) => Math.abs(diff) < singleUnit.max
+    );
+    this.isoTime = then.toISOString();
+    this.titleTime = this.localize.date(then, {
+      month: "long",
+      year: "numeric",
+      day: "numeric",
+      hour: "numeric",
+      minute: "numeric",
+      timeZoneName: "short"
+    });
+    this.relativeTime = this.localize.relativeTime(
+      Math.round(diff / value),
+      unit,
+      {
+        numeric: this.numeric,
+        style: this.format
+      }
+    );
+    clearTimeout(this.updateTimeout);
+    if (this.sync) {
+      let nextInterval;
+      if (unit === "minute") {
+        nextInterval = getTimeUntilNextUnit("second");
+      } else if (unit === "hour") {
+        nextInterval = getTimeUntilNextUnit("minute");
+      } else if (unit === "day") {
+        nextInterval = getTimeUntilNextUnit("hour");
+      } else {
+        nextInterval = getTimeUntilNextUnit("day");
+      }
+      this.updateTimeout = window.setTimeout(
+        () => this.requestUpdate(),
+        nextInterval
+      );
+    }
+    return html`
+      <time datetime=${this.isoTime} title=${this.titleTime}
+        >${this.relativeTime}</time
+      >
+    `;
+  }
+};
+__decorateClass([
+  state()
+], DSARelativeTime.prototype, "isoTime", 2);
+__decorateClass([
+  state()
+], DSARelativeTime.prototype, "relativeTime", 2);
+__decorateClass([
+  state()
+], DSARelativeTime.prototype, "titleTime", 2);
+__decorateClass([
+  property()
+], DSARelativeTime.prototype, "date", 2);
+__decorateClass([
+  property()
+], DSARelativeTime.prototype, "format", 2);
+__decorateClass([
+  property()
+], DSARelativeTime.prototype, "numeric", 2);
+__decorateClass([
+  property({ type: Boolean })
+], DSARelativeTime.prototype, "sync", 2);
+DSARelativeTime = __decorateClass([
+  customElement("dsa-relative-time")
+], DSARelativeTime);
+function getTimeUntilNextUnit(unit) {
+  const units = { second: 1e3, minute: 6e4, hour: 36e5, day: 864e5 };
+  const value = units[unit];
+  return value - Date.now() % value;
+}
+
+export {
+  DSARelativeTime
+};

package/dist/chunks/chunk.VFDZ6OTM.js

@@ -0,0 +1,61 @@
+import {
+  table_action_styles_default
+} from "./chunk.UXRWPABH.js";
+import {
+  LocalizeController
+} from "./chunk.QY3AIGLE.js";
+import {
+  ShoelaceElement
+} from "./chunk.SL3DN4BD.js";
+import {
+  __decorateClass
+} from "./chunk.N3L4GIUO.js";
+
+// src/components/table-action/table-action.ts
+import { html } from "lit";
+import { customElement, property, query } from "lit/decorators.js";
+var DSATableAction = class extends ShoelaceElement {
+  constructor() {
+    super(...arguments);
+    this.localize = new LocalizeController(this);
+    this.show = false;
+    this.deselectAllOnClose = false;
+  }
+  handleClose() {
+    this.emit("dsa-table-actions-close");
+    this.show = false;
+  }
+  render() {
+    return html`
+      <slot part="label" name="label"></slot>
+      <slot part="action"></slot>
+      <dsa-divider vertical></dsa-divider>
+      <dsa-button
+        id="closeButton"
+        variant="tertiary"
+        contrasted
+        @click=${this.handleClose}
+      >
+        <dsa-icon slot="prefix" name="close" library="system"></dsa-icon>
+        ${this.deselectAllOnClose ? this.localize.term("deselectAll") : this.localize.term("close")}
+      </dsa-button>
+    `;
+  }
+};
+DSATableAction.styles = table_action_styles_default;
+__decorateClass([
+  query("#closeButton")
+], DSATableAction.prototype, "closeButton", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], DSATableAction.prototype, "show", 2);
+__decorateClass([
+  property({ type: Boolean, attribute: "deselect-all-on-close" })
+], DSATableAction.prototype, "deselectAllOnClose", 2);
+DSATableAction = __decorateClass([
+  customElement("dsa-table-action")
+], DSATableAction);
+
+export {
+  DSATableAction
+};