@ds-autonomie/web-components 2.7.0 → 2.8.0

package/cdn/chunks/chunk.EXKO4BNS.js

@@ -0,0 +1,343 @@
+import {
+  renderFormElementErrors
+} from "./chunk.PZK4ARTY.js";
+import {
+  waitForEvent
+} from "./chunk.B4BZKR24.js";
+import {
+  animateTo,
+  shimKeyframesHeightAuto,
+  stopAnimations
+} from "./chunk.UBKKXGSV.js";
+import {
+  getAnimation,
+  setDefaultAnimation
+} from "./chunk.2WRFDMKN.js";
+import {
+  a11yWarning
+} from "./chunk.PWL7QCVG.js";
+import {
+  LocalizeController
+} from "./chunk.57JI3UNH.js";
+import {
+  watch
+} from "./chunk.4FQJ3QJK.js";
+import {
+  ShoelaceElement,
+  e,
+  n,
+  r
+} from "./chunk.EW5LC4ZI.js";
+import {
+  x
+} from "./chunk.JXF4O366.js";
+import {
+  __decorateClass
+} from "./chunk.4ZGVANML.js";
+
+// src/internal/components/filter-base/filter-base.ts
+var FilterBase = class extends ShoelaceElement {
+  constructor() {
+    super(...arguments);
+    this.localize = new LocalizeController(this);
+    this.errorMessages = [];
+    this.value = "";
+    this.label = "";
+    this.open = false;
+    this.hoist = false;
+    this.disabled = false;
+    this.readonly = false;
+    this.drawer = false;
+    this.placement = "bottom-start";
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.handleDocumentFocusIn = this.handleDocumentFocusIn.bind(this);
+    this.handleDocumentMouseDown = this.handleDocumentMouseDown.bind(this);
+  }
+  firstUpdated() {
+    if (this.drawer) {
+      this.filterPanel.hidden = !this.open;
+      this.filterPanel.style.height = this.open ? "auto" : "0";
+    }
+  }
+  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 && !this.drawer && !path.includes(this)) {
+      this.hide();
+      this.filterTrigger.focus({ preventScroll: true });
+    }
+  }
+  handleKeyDown(event) {
+    if (event.key !== "Escape") {
+      event.stopPropagation();
+    }
+    if (!this.drawer && this.open && event.key === "Escape") {
+      event.stopPropagation();
+      event.preventDefault();
+      this.hide();
+      this.filterTrigger.focus({ preventScroll: true });
+    }
+    if (!this.drawer && 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();
+        }
+      });
+    }
+    const path = event.composedPath();
+    const isFilterTrigger = path.some((el) => el === this.filterTrigger);
+    if (isFilterTrigger && (event.key === "Enter" || event.key === " ")) {
+      event.preventDefault();
+      if (!this.open) {
+        this.show();
+        return;
+      }
+      if (isFilterTrigger) {
+        this.hide();
+      }
+    }
+  }
+  handleDocumentMouseDown(event) {
+    const path = event.composedPath();
+    if (this && !this.drawer && !path.includes(this)) {
+      this.hide();
+    }
+  }
+  handleFilterTriggerMouseDown(event) {
+    event.preventDefault();
+    this.filterTrigger.focus({ preventScroll: true });
+    this.open = !this.open;
+  }
+  handleDisabledChange() {
+    if (this.disabled || this.readonly) {
+      this.open = false;
+      this.handleOpenChange();
+    }
+  }
+  async handleOpenChange() {
+    if (this.open) {
+      this.emit("dsa-show");
+      this.addOpenListeners();
+      await stopAnimations(this);
+      if (this.drawer) {
+        const { keyframes, options } = getAnimation(this, "accordion.show", {
+          dir: this.localize.dir()
+        });
+        this.filterPanel.hidden = false;
+        await animateTo(
+          this.filterPanel,
+          shimKeyframesHeightAuto(keyframes, this.filterPanel.scrollHeight),
+          options
+        );
+        this.filterPanel.style.height = "auto";
+      } else {
+        const { keyframes, options } = getAnimation(this, "filter.show", {
+          dir: this.localize.dir()
+        });
+        this.popup.active = true;
+        await animateTo(this.popup.popup, keyframes, options);
+      }
+      this.emit("dsa-after-show");
+    } else {
+      this.emit("dsa-hide");
+      this.removeOpenListeners();
+      await stopAnimations(this);
+      if (this.drawer) {
+        const { keyframes, options } = getAnimation(this, "accordion.hide", {
+          dir: this.localize.dir()
+        });
+        await animateTo(
+          this.filterPanel,
+          shimKeyframesHeightAuto(keyframes, this.filterPanel.scrollHeight),
+          options
+        );
+        this.filterPanel.hidden = true;
+        this.filterPanel.style.height = "auto";
+      } else {
+        const { keyframes, options } = getAnimation(this, "filter.hide", {
+          dir: this.localize.dir()
+        });
+        await animateTo(this.popup.popup, keyframes, options);
+        this.popup.active = false;
+      }
+      this.emit("dsa-after-hide");
+    }
+  }
+  /** Shows the listbox. */
+  async show() {
+    if (this.disabled || this.readonly) {
+      return void 0;
+    }
+    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;
+    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();
+  }
+  // To be implemented by subclasses
+  renderPanelContent() {
+    return x``;
+  }
+  // Common render methods
+  renderTrigger() {
+    if (!this.label) {
+      a11yWarning("Filters require a label attribute for accessibility");
+    }
+    return x` <dsa-filter-button
+      slot="anchor"
+      class="filter__trigger"
+      label=${this.label}
+      selected-option=${this.value}
+      selection-count=${this.value !== "" ? 1 : 0}
+      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() {
+    if (this.drawer) {
+      return x`
+        <div class="filter--drawer" @keydown=${this.handleKeyDown}>
+          ${this.renderTrigger()}
+          <div id="filter__panel" class="filter__panel">
+            ${this.renderPanelContent()}
+          </div>
+        </div>
+      `;
+    }
+    return x`
+      <dsa-popup
+        class="filter"
+        part="popup"
+        placement=${this.placement}
+        strategy=${this.hoist ? "fixed" : "absolute"}
+        distance="4"
+        flip
+        shift
+        auto-size="vertical"
+        auto-size-padding="10"
+        @keydown=${this.handleKeyDown}
+      >
+        ${this.renderTrigger()}
+        <div id="filter__panel" class="filter__panel">
+          ${this.renderPanelContent()}
+        </div>
+      </dsa-popup>
+      ${this.errorMessages.length > 0 ? renderFormElementErrors(this.errorMessages) : ""}
+    `;
+  }
+};
+__decorateClass([
+  e(".filter")
+], FilterBase.prototype, "popup", 2);
+__decorateClass([
+  e(".filter__trigger")
+], FilterBase.prototype, "filterTrigger", 2);
+__decorateClass([
+  e(".filter__panel")
+], FilterBase.prototype, "filterPanel", 2);
+__decorateClass([
+  r()
+], FilterBase.prototype, "errorMessages", 2);
+__decorateClass([
+  n({ reflect: true })
+], FilterBase.prototype, "value", 2);
+__decorateClass([
+  n()
+], FilterBase.prototype, "label", 2);
+__decorateClass([
+  n({ type: Boolean, reflect: true })
+], FilterBase.prototype, "open", 2);
+__decorateClass([
+  n({ type: Boolean })
+], FilterBase.prototype, "hoist", 2);
+__decorateClass([
+  n({ type: Boolean, reflect: true })
+], FilterBase.prototype, "disabled", 2);
+__decorateClass([
+  n({ type: Boolean, reflect: true })
+], FilterBase.prototype, "readonly", 2);
+__decorateClass([
+  n({ type: Boolean, reflect: true })
+], FilterBase.prototype, "drawer", 2);
+__decorateClass([
+  n()
+], FilterBase.prototype, "placement", 2);
+__decorateClass([
+  watch(["disabled", "readonly"], { waitUntilFirstUpdate: true })
+], FilterBase.prototype, "handleDisabledChange", 1);
+__decorateClass([
+  watch("open", { waitUntilFirstUpdate: true })
+], FilterBase.prototype, "handleOpenChange", 1);
+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" }
+});
+setDefaultAnimation("accordion.show", {
+  keyframes: [
+    { height: "0", opacity: "0" },
+    { height: "auto", opacity: "1" }
+  ],
+  options: { duration: 250, easing: "linear" }
+});
+setDefaultAnimation("accordion.hide", {
+  keyframes: [
+    { height: "auto", opacity: "1" },
+    { height: "0", opacity: "0" }
+  ],
+  options: { duration: 250, easing: "linear" }
+});
+
+export {
+  FilterBase
+};

package/cdn/chunks/chunk.EXPTHDVJ.js

@@ -0,0 +1,15 @@
+import {
+  input_base_styles_default
+} from "./chunk.S442ESGW.js";
+import {
+  i
+} from "./chunk.UKK3NS3L.js";
+
+// src/components/input-amount/input-amount.styles.ts
+var input_amount_styles_default = i`
+  ${input_base_styles_default}
+`;
+
+export {
+  input_amount_styles_default
+};

package/cdn/chunks/chunk.EYBXAYU3.js

@@ -0,0 +1,100 @@
+import {
+  download_link_styles_default
+} from "./chunk.PZFZE7HZ.js";
+import {
+  e2 as e
+} from "./chunk.JY4LUWQC.js";
+import {
+  ShoelaceElement,
+  n,
+  t
+} from "./chunk.EW5LC4ZI.js";
+import {
+  x
+} from "./chunk.JXF4O366.js";
+import {
+  __decorateClass
+} from "./chunk.4ZGVANML.js";
+
+// src/components/download-link/download-link.ts
+var DSADownloadLink = class extends ShoelaceElement {
+  constructor() {
+    super(...arguments);
+    this.variant = "base";
+    this.size = "medium";
+  }
+  handleFocus() {
+    this.emit("dsa-focus");
+  }
+  handleBlur() {
+    this.emit("dsa-blur");
+  }
+  render() {
+    if (this.variant === "contrasted") {
+      console.warn(
+        "The `contrasted` variant is deprecated, and will be removed in the next major release."
+      );
+    }
+    return x`
+      <a
+        part="link"
+        class=${e({
+      link: true,
+      "link--on-layer": this.variant === "layer",
+      "link--on-contrasted": this.variant === "contrasted",
+      "link--floating-menu": this.variant === "floating",
+      "document-link--x-large": this.size === "xlarge",
+      "document-link--large": this.size === "large",
+      "document-link--medium": this.size === "medium",
+      "document-link--small": this.size === "small",
+      "document-link--x-small": this.size === "xsmall",
+      "document-link--2x-small": this.size === "2xsmall"
+    })}
+        download=${this.filename}
+        href=${this.href}
+        @focus=${this.handleFocus}
+        @blur=${this.handleBlur}
+      >
+        <slot></slot>
+        <dsa-icon name="download" library="system"></dsa-icon>
+        <p
+          id="document-info"
+          class=${e({
+      "document-info": true,
+      "document-info--on-layer": this.variant === "layer",
+      "document-info--on-contrasted": this.variant === "contrasted",
+      "document-info--floating-menu": this.variant === "floating"
+    })}
+        >
+          ${this.format}${this.format && this.documentSize ? " - " : ""}${this.documentSize}
+        </p>
+      </a>
+    `;
+  }
+};
+DSADownloadLink.styles = download_link_styles_default;
+__decorateClass([
+  n()
+], DSADownloadLink.prototype, "href", 2);
+__decorateClass([
+  n()
+], DSADownloadLink.prototype, "format", 2);
+__decorateClass([
+  n({ attribute: "documentsize" })
+], DSADownloadLink.prototype, "documentSize", 2);
+__decorateClass([
+  n()
+], DSADownloadLink.prototype, "variant", 2);
+__decorateClass([
+  n()
+], DSADownloadLink.prototype, "size", 2);
+__decorateClass([
+  n()
+], DSADownloadLink.prototype, "filename", 2);
+DSADownloadLink = __decorateClass([
+  t("dsa-download-link")
+], DSADownloadLink);
+
+export {
+  DSADownloadLink
+};

package/cdn/chunks/chunk.F4UWOB6D.js

@@ -0,0 +1,51 @@
+import {
+  e,
+  i,
+  t
+} from "./chunk.JY4LUWQC.js";
+import {
+  T
+} from "./chunk.JXF4O366.js";
+
+// ../../node_modules/.pnpm/lit-html@3.3.0/node_modules/lit-html/directives/style-map.js
+var n = "important";
+var i2 = " !" + n;
+var o = e(class extends i {
+  constructor(t2) {
+    var _a;
+    if (super(t2), t2.type !== t.ATTRIBUTE || "style" !== t2.name || ((_a = t2.strings) == null ? void 0 : _a.length) > 2) throw Error("The `styleMap` directive must be used in the `style` attribute and must be the only part in the attribute.");
+  }
+  render(t2) {
+    return Object.keys(t2).reduce((e2, r) => {
+      const s = t2[r];
+      return null == s ? e2 : e2 + `${r = r.includes("-") ? r : r.replace(/(?:^(webkit|moz|ms|o)|)(?=[A-Z])/g, "-$&").toLowerCase()}:${s};`;
+    }, "");
+  }
+  update(e2, [r]) {
+    const { style: s } = e2.element;
+    if (void 0 === this.ft) return this.ft = new Set(Object.keys(r)), this.render(r);
+    for (const t2 of this.ft) null == r[t2] && (this.ft.delete(t2), t2.includes("-") ? s.removeProperty(t2) : s[t2] = null);
+    for (const t2 in r) {
+      const e3 = r[t2];
+      if (null != e3) {
+        this.ft.add(t2);
+        const r2 = "string" == typeof e3 && e3.endsWith(i2);
+        t2.includes("-") || r2 ? s.setProperty(t2, r2 ? e3.slice(0, -11) : e3, r2 ? n : "") : s[t2] = e3;
+      }
+    }
+    return T;
+  }
+});
+
+export {
+  o
+};
+/*! Bundled license information:
+
+lit-html/directives/style-map.js:
+  (**
+   * @license
+   * Copyright 2018 Google LLC
+   * SPDX-License-Identifier: BSD-3-Clause
+   *)
+*/

package/cdn/chunks/chunk.F4WG4HCT.js

@@ -0,0 +1,155 @@
+import {
+  o
+} from "./chunk.F4UWOB6D.js";
+import {
+  file_upload_item_styles_default
+} from "./chunk.LQLCDMCQ.js";
+import {
+  renderFormElementErrors
+} from "./chunk.PZK4ARTY.js";
+import {
+  a11yWarning
+} from "./chunk.PWL7QCVG.js";
+import {
+  ifDefinedAndNotEmpty
+} from "./chunk.SUUV7E4I.js";
+import {
+  LocalizeController
+} from "./chunk.CAMVBH5H.js";
+import {
+  e2 as e
+} from "./chunk.JY4LUWQC.js";
+import {
+  ShoelaceElement,
+  n,
+  r,
+  t
+} from "./chunk.EW5LC4ZI.js";
+import {
+  x
+} from "./chunk.JXF4O366.js";
+import {
+  __decorateClass
+} from "./chunk.4ZGVANML.js";
+
+// src/components/file-upload-item/file-upload-item.ts
+var DSAFileUploadItem = class extends ShoelaceElement {
+  constructor() {
+    super(...arguments);
+    this.localize = new LocalizeController(this);
+    this.size = "medium";
+    this.error = false;
+    this.errorMessage = "";
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    if (!this.hasAttribute("role")) {
+      this.setAttribute("role", "listitem");
+    }
+  }
+  handleRemoveClick(event) {
+    event.stopPropagation();
+    this.emit("dsa-clear");
+  }
+  handleDefaultSlotChange() {
+    this.labelText = this.innerText;
+  }
+  render() {
+    var _a;
+    const isUploadCompleted = (this.uploadProgress === void 0 || this.uploadProgress === 100) && !this.error;
+    if (this.error && !this.errorMessage) {
+      a11yWarning(
+        "<dsa-file-upload-item> requires an error-message attribute for accessibility when the error attribute is set"
+      );
+    }
+    return x`
+      <div
+        part="base"
+        class=${e({
+      "file-item-container": true,
+      "file-item-container--error": this.error,
+      "file-item-container--small": this.size === "small",
+      "file-item-container--medium": this.size === "medium",
+      "file-item-container--large": this.size === "large"
+    })}
+      >
+        <article part="file-item">
+          <slot part="label" @slotchange=${this.handleDefaultSlotChange}></slot>
+          <slot
+            part="upload-indicator"
+            name="upload-indicator"
+            class=${e({
+      "upload-indicator": true,
+      "upload-indicator--show": this.uploadProgress !== void 0 && !isUploadCompleted
+    })}
+            >${this.uploadProgress}%</slot
+          >
+          <button
+            part="clear-button"
+            type="button"
+            @click=${this.handleRemoveClick}
+            aria-label=${this.localize.term("clearFile", this.labelText)}
+            aria-describedby=${ifDefinedAndNotEmpty(
+      this.error ? "error-text" : void 0
+    )}
+          >
+            ${isUploadCompleted ? x`<dsa-icon name="delete" library="system"></dsa-icon>` : x`<dsa-icon name="close" library="system"></dsa-icon>`}
+          </button>
+          <div
+            part="progress-bar"
+            role="progressbar"
+            title=${this.localize.term("uploadFileProgressBar")}
+            class=${e({
+      "progress-bar": this.uploadProgress !== void 0 && !isUploadCompleted
+    })}
+            aria-label=${this.localize.term("uploadFileProgressBar")}
+            aria-valuemin="0"
+            aria-valuemax="100"
+            aria-valuenow=${this.uploadProgress === void 0 ? 0 : this.uploadProgress}
+          >
+            <div
+              part="progress-bar-indicator"
+              style=${o({ width: `${(_a = this.uploadProgress) != null ? _a : 0}%` })}
+            ></div>
+          </div>
+        </article>
+        ${this.error ? renderFormElementErrors(this.errorMessage) : x``}
+      </div>
+    `;
+  }
+};
+DSAFileUploadItem.styles = file_upload_item_styles_default;
+__decorateClass([
+  n({ reflect: true })
+], DSAFileUploadItem.prototype, "size", 2);
+__decorateClass([
+  n({ type: Number, attribute: "upload-progress" })
+], DSAFileUploadItem.prototype, "uploadProgress", 2);
+__decorateClass([
+  n({ type: Boolean })
+], DSAFileUploadItem.prototype, "error", 2);
+__decorateClass([
+  n({
+    attribute: "error-message",
+    converter: {
+      fromAttribute: (value) => value ? value.split("|") : "",
+      toAttribute: (value) => {
+        if (typeof value === "string") {
+          return value;
+        } else {
+          return value.join("|");
+        }
+      }
+    }
+  })
+], DSAFileUploadItem.prototype, "errorMessage", 2);
+__decorateClass([
+  r()
+], DSAFileUploadItem.prototype, "labelText", 2);
+DSAFileUploadItem = __decorateClass([
+  t("dsa-file-upload-item")
+], DSAFileUploadItem);
+
+export {
+  DSAFileUploadItem
+};