@ds-autonomie/web-components 2.13.0 → 2.14.1

package/dist/chunks/chunk.MLGOEO6G.js

@@ -0,0 +1,286 @@
+import {
+  waitForEvent
+} from "./chunk.B4BZKR24.js";
+import {
+  animateTo,
+  stopAnimations
+} from "./chunk.D6XRV35U.js";
+import {
+  getAnimation,
+  setDefaultAnimation
+} from "./chunk.HPDCOGLH.js";
+import {
+  a11yWarning
+} from "./chunk.PWL7QCVG.js";
+import {
+  LocalizeController
+} from "./chunk.QY3AIGLE.js";
+import {
+  watch
+} from "./chunk.QB2NJE2Y.js";
+import {
+  ShoelaceElement
+} from "./chunk.SL3DN4BD.js";
+import {
+  alert_styles_default
+} from "./chunk.SLR7OI7J.js";
+import {
+  __decorateClass
+} from "./chunk.N3L4GIUO.js";
+
+// src/components/alert/alert.ts
+import { html } from "lit";
+import { customElement, property, query } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.js";
+import { ifDefined } from "lit/directives/if-defined.js";
+var toastStack = Object.assign(document.createElement("div"), {
+  className: "dsa-toast-stack"
+});
+var DSAAlert = class extends ShoelaceElement {
+  constructor() {
+    super(...arguments);
+    this.localize = new LocalizeController(this);
+    this.alertTitle = "";
+    this.title = "";
+    this.open = false;
+    this.closable = false;
+    this.variant = "primary";
+    this.duration = Infinity;
+  }
+  firstUpdated() {
+    this.base.hidden = !this.open;
+  }
+  restartAutoHide() {
+    clearTimeout(this.autoHideTimeout);
+    if (this.open && this.duration < Infinity) {
+      this.autoHideTimeout = window.setTimeout(
+        () => this.hide(),
+        this.duration
+      );
+    }
+  }
+  handleCloseClick() {
+    this.hide();
+  }
+  handleMouseMove() {
+    this.restartAutoHide();
+  }
+  getPrefixIconName() {
+    switch (this.variant) {
+      case "danger":
+        return "report_gmailerrorred";
+      case "neutral":
+        return "settings";
+      case "success":
+        return "task_alt";
+      case "warning":
+        return "report_problem";
+      default:
+        return "info";
+    }
+  }
+  getIconLabel() {
+    switch (this.variant) {
+      case "danger":
+        return this.localize.term("error");
+      case "neutral":
+        return void 0;
+      case "success":
+        return this.localize.term("success");
+      case "warning":
+        return this.localize.term("warning");
+      default:
+        return this.localize.term("info");
+    }
+  }
+  async handleOpenChange() {
+    if (this.open) {
+      this.emit("dsa-show");
+      if (this.duration < Infinity) {
+        this.restartAutoHide();
+      }
+      await stopAnimations(this.base);
+      this.base.hidden = false;
+      const { keyframes, options } = getAnimation(this, "alert.show", {
+        dir: this.localize.dir()
+      });
+      await animateTo(this.base, keyframes, options);
+      this.emit("dsa-after-show");
+    } else {
+      this.emit("dsa-hide");
+      clearTimeout(this.autoHideTimeout);
+      await stopAnimations(this.base);
+      const { keyframes, options } = getAnimation(this, "alert.hide", {
+        dir: this.localize.dir()
+      });
+      await animateTo(this.base, keyframes, options);
+      this.base.hidden = true;
+      this.emit("dsa-after-hide");
+    }
+  }
+  handleDurationChange() {
+    this.restartAutoHide();
+  }
+  /** Shows the alert. */
+  async show() {
+    if (this.open) {
+      return void 0;
+    }
+    this.open = true;
+    return await waitForEvent(this, "dsa-after-show");
+  }
+  /** Hides the alert */
+  async hide() {
+    if (!this.open) {
+      return void 0;
+    }
+    this.open = false;
+    return await waitForEvent(this, "dsa-after-hide");
+  }
+  /**
+   * Displays the alert as a toast notification. This will move the alert out of its position in the DOM and, when
+   * dismissed, it will be removed from the DOM completely. By storing a reference to the alert, you can reuse it by
+   * calling this method again. The returned promise will resolve after the alert is hidden.
+   */
+  toast() {
+    return new Promise((resolve) => {
+      if (toastStack.parentElement === null) {
+        document.body.append(toastStack);
+      }
+      toastStack.appendChild(this);
+      requestAnimationFrame(() => {
+        this.clientWidth;
+        this.show();
+      });
+      this.addEventListener(
+        "dsa-after-hide",
+        () => {
+          toastStack.removeChild(this);
+          resolve();
+          if (toastStack.querySelector("dsa-alert") === null) {
+            toastStack.remove();
+          }
+        },
+        { once: true }
+      );
+    });
+  }
+  render() {
+    if (this.alertTitle && !this.headerLevel) {
+      a11yWarning(
+        "<dsa-alert> requires a header-level attribute for accessibility if alert-title is set"
+      );
+    }
+    if (this.duration) {
+      a11yWarning(
+        "The duration attribute of <dsa-alert> is deprecated and should not be used, because it can prevent some persons from accessing the alert content."
+      );
+    }
+    return html`
+      <div aria-live="polite" aria-atomic="true">
+        <div
+          part="base"
+          class=${classMap({
+      alert: true,
+      "alert--open": this.open,
+      "alert--closable": this.closable,
+      "alert--primary": this.variant === "primary",
+      "alert--success": this.variant === "success",
+      "alert--neutral": this.variant === "neutral",
+      "alert--warning": this.variant === "warning",
+      "alert--danger": this.variant === "danger"
+    })}
+          aria-hidden=${this.open ? "false" : "true"}
+          @mousemove=${this.handleMouseMove}
+        >
+          <dsa-icon
+            class="alert__icon"
+            name=${this.getPrefixIconName()}
+            library="system"
+            label=${ifDefined(this.getIconLabel())}
+          ></dsa-icon>
+          <div class="alert__text">
+            ${this.title || this.alertTitle ? html`
+                  <div
+                    part="header"
+                    id="header"
+                    aria-level=${ifDefined(this.headerLevel)}
+                    role=${ifDefined(this.headerLevel ? "heading" : void 0)}
+                    class="alert__title"
+                  >
+                    ${this.alertTitle || this.title}
+                  </div>
+                ` : ""}
+            <slot part="message" class="alert__message"></slot>
+          </div>
+
+          <slot part="actions" class="alert__action" name="action"></slot>
+
+          ${this.closable ? html`
+                <dsa-icon-button
+                  part="close-button"
+                  class="alert__close-button"
+                  size="xlarge"
+                  name="close"
+                  label=${this.localize.term("close")}
+                  @click=${this.handleCloseClick}
+                  library="system"
+                ></dsa-icon-button>
+              ` : ""}
+        </div>
+      </div>
+    `;
+  }
+};
+DSAAlert.styles = alert_styles_default;
+__decorateClass([
+  query('[part~="base"]')
+], DSAAlert.prototype, "base", 2);
+__decorateClass([
+  property({ attribute: "alert-title" })
+], DSAAlert.prototype, "alertTitle", 2);
+__decorateClass([
+  property()
+], DSAAlert.prototype, "title", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], DSAAlert.prototype, "open", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], DSAAlert.prototype, "closable", 2);
+__decorateClass([
+  property({ attribute: "header-level", reflect: true })
+], DSAAlert.prototype, "headerLevel", 2);
+__decorateClass([
+  property({ reflect: true })
+], DSAAlert.prototype, "variant", 2);
+__decorateClass([
+  property({ type: Number })
+], DSAAlert.prototype, "duration", 2);
+__decorateClass([
+  watch("open", { waitUntilFirstUpdate: true })
+], DSAAlert.prototype, "handleOpenChange", 1);
+__decorateClass([
+  watch("duration")
+], DSAAlert.prototype, "handleDurationChange", 1);
+DSAAlert = __decorateClass([
+  customElement("dsa-alert")
+], DSAAlert);
+setDefaultAnimation("alert.show", {
+  keyframes: [
+    { opacity: 0, scale: 0.8 },
+    { opacity: 1, scale: 1 }
+  ],
+  options: { duration: 250, easing: "ease" }
+});
+setDefaultAnimation("alert.hide", {
+  keyframes: [
+    { opacity: 1, scale: 1 },
+    { opacity: 0, scale: 0.8 }
+  ],
+  options: { duration: 250, easing: "ease" }
+});
+
+export {
+  DSAAlert
+};

package/dist/chunks/chunk.N3L4GIUO.js

@@ -0,0 +1,71 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __knownSymbol = (name, symbol) => (symbol = Symbol[name]) ? symbol : /* @__PURE__ */ Symbol.for("Symbol." + name);
+var __typeError = (msg) => {
+  throw TypeError(msg);
+};
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+var __await = function(promise, isYieldStar) {
+  this[0] = promise;
+  this[1] = isYieldStar;
+};
+var __yieldStar = (value) => {
+  var obj = value[__knownSymbol("asyncIterator")], isAwait = false, method, it = {};
+  if (obj == null) {
+    obj = value[__knownSymbol("iterator")]();
+    method = (k) => it[k] = (x) => obj[k](x);
+  } else {
+    obj = obj.call(value);
+    method = (k) => it[k] = (v) => {
+      if (isAwait) {
+        isAwait = false;
+        if (k === "throw") throw v;
+        return v;
+      }
+      isAwait = true;
+      return {
+        done: false,
+        value: new __await(new Promise((resolve) => {
+          var x = obj[k](v);
+          if (!(x instanceof Object)) __typeError("Object expected");
+          resolve(x);
+        }), 1)
+      };
+    };
+  }
+  return it[__knownSymbol("iterator")] = () => it, method("next"), "throw" in obj ? method("throw") : it.throw = (x) => {
+    throw x;
+  }, "return" in obj && method("return"), it;
+};
+
+export {
+  __spreadValues,
+  __spreadProps,
+  __decorateClass,
+  __yieldStar
+};

package/dist/chunks/chunk.NH2ICE4Q.js

@@ -0,0 +1,207 @@
+import {
+  option_styles_default
+} from "./chunk.ZCPJ4TUK.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/option/option.ts
+import { html } from "lit";
+import { customElement, property, query, state } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.js";
+var DSAOption = class extends ShoelaceElement {
+  constructor() {
+    super(...arguments);
+    // @ts-expect-error - Controller is currently unused
+    this.localize = new LocalizeController(this);
+    this.current = false;
+    this.selected = false;
+    this.hasHover = false;
+    this.value = "";
+    this.disabled = false;
+    this.size = "medium";
+    this.error = false;
+    this.role = "option";
+    this.multiple = false;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    if (this.role === "option") {
+      this.setAttribute("aria-selected", "false");
+    } else {
+      this.setAttribute("aria-checked", "false");
+      this.removeAttribute("aria-selected");
+    }
+  }
+  handleDefaultSlotChange() {
+    const textLabel = this.getTextLabel();
+    if (typeof this.cachedTextLabel === "undefined") {
+      this.cachedTextLabel = textLabel;
+      return;
+    }
+    if (textLabel !== this.cachedTextLabel) {
+      this.cachedTextLabel = textLabel;
+      this.emit("slotchange", {
+        bubbles: true,
+        composed: false,
+        cancelable: false
+      });
+    }
+  }
+  handleMouseEnter() {
+    this.hasHover = true;
+  }
+  handleMouseLeave() {
+    this.hasHover = false;
+  }
+  handleDisabledChange() {
+    this.setAttribute("aria-disabled", this.disabled ? "true" : "false");
+  }
+  handleSelectedChange() {
+    this.setAttribute(
+      this.role === "option" ? "aria-selected" : "aria-checked",
+      this.selected ? "true" : "false"
+    );
+  }
+  handleErrorChange() {
+    this.setAttribute("aria-invalid", this.error ? "true" : "false");
+  }
+  handleValueChange() {
+    if (typeof this.value !== "string") {
+      this.value = String(this.value);
+    }
+    if (this.value.includes(" ")) {
+      console.error(
+        `Option values cannot include a space. All spaces have been replaced with underscores.`,
+        this
+      );
+      this.value = this.value.replace(/ /g, "_");
+    }
+  }
+  /** Returns a plain text label based on the option's content. */
+  getTextLabel() {
+    var _a;
+    return ((_a = this.textContent) != null ? _a : "").trim();
+  }
+  render() {
+    return html`
+      <div
+        part="base"
+        class=${classMap({
+      option: true,
+      // Sizes
+      "option--small": this.size === "small",
+      "option--medium": this.size === "medium",
+      "option--large": this.size === "large",
+      // States
+      "option--current": this.current,
+      "option--disabled": this.disabled,
+      "option--selected": this.selected,
+      "option--hover": this.hasHover,
+      "option--error": this.error,
+      "option--multiple": this.multiple
+    })}
+        @mouseenter=${this.handleMouseEnter}
+        @mouseleave=${this.handleMouseLeave}
+      >
+        ${this.multiple ? html`
+              <span class="checkbox__control">
+                ${this.selected ? html`
+                      <dsa-icon
+                        name="done"
+                        class="checkbox__checked-icon"
+                        library="system"
+                      ></dsa-icon>
+                    ` : ""}
+              </span>
+            ` : html`
+              <dsa-icon
+                part="checked-icon"
+                class="option__check"
+                name="check"
+                aria-hidden="true"
+                library="system"
+              ></dsa-icon>
+            `}
+        ${this.error ? html`<dsa-icon
+              class="option__error-icon"
+              name="error"
+              library="system"
+            ></dsa-icon>` : ""}
+        <slot part="prefix" name="prefix" class="option__prefix"></slot>
+        <slot
+          part="label"
+          class="option__label"
+          @slotchange=${this.handleDefaultSlotChange}
+        ></slot>
+        ${this.amount ? html`
+              <dsa-visually-hidden>:</dsa-visually-hidden>
+              <span class="option__amount">${this.amount}</span>
+            ` : ""}
+        <slot part="suffix" name="suffix" class="option__suffix"></slot>
+      </div>
+    `;
+  }
+};
+DSAOption.styles = option_styles_default;
+__decorateClass([
+  query(".option__label")
+], DSAOption.prototype, "defaultSlot", 2);
+__decorateClass([
+  state()
+], DSAOption.prototype, "current", 2);
+__decorateClass([
+  state()
+], DSAOption.prototype, "selected", 2);
+__decorateClass([
+  state()
+], DSAOption.prototype, "hasHover", 2);
+__decorateClass([
+  property({ reflect: true })
+], DSAOption.prototype, "value", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], DSAOption.prototype, "disabled", 2);
+__decorateClass([
+  property()
+], DSAOption.prototype, "size", 2);
+__decorateClass([
+  property({ type: Boolean })
+], DSAOption.prototype, "error", 2);
+__decorateClass([
+  property()
+], DSAOption.prototype, "amount", 2);
+__decorateClass([
+  property({ reflect: true })
+], DSAOption.prototype, "role", 2);
+__decorateClass([
+  property({ type: Boolean })
+], DSAOption.prototype, "multiple", 2);
+__decorateClass([
+  watch("disabled")
+], DSAOption.prototype, "handleDisabledChange", 1);
+__decorateClass([
+  watch("selected")
+], DSAOption.prototype, "handleSelectedChange", 1);
+__decorateClass([
+  watch("error")
+], DSAOption.prototype, "handleErrorChange", 1);
+__decorateClass([
+  watch("value")
+], DSAOption.prototype, "handleValueChange", 1);
+DSAOption = __decorateClass([
+  customElement("dsa-option")
+], DSAOption);
+
+export {
+  DSAOption
+};

package/dist/chunks/chunk.NHDRJV4R.js

@@ -0,0 +1,47 @@
+import {
+  skeleton_styles_default
+} from "./chunk.M245ZGRR.js";
+import {
+  ShoelaceElement
+} from "./chunk.SL3DN4BD.js";
+import {
+  __decorateClass
+} from "./chunk.N3L4GIUO.js";
+
+// src/components/skeleton/skeleton.ts
+import { html } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.js";
+var skeletonEffects = ["pulse", "sheen", "none"];
+var DSASkeleton = class extends ShoelaceElement {
+  constructor() {
+    super(...arguments);
+    this.effect = "none";
+  }
+  render() {
+    return html`
+      <div
+        part="base"
+        class=${classMap({
+      skeleton: true,
+      "skeleton--pulse": this.effect === "pulse",
+      "skeleton--sheen": this.effect === "sheen"
+    })}
+      >
+        <div part="indicator" class="skeleton__indicator"></div>
+      </div>
+    `;
+  }
+};
+DSASkeleton.styles = skeleton_styles_default;
+__decorateClass([
+  property()
+], DSASkeleton.prototype, "effect", 2);
+DSASkeleton = __decorateClass([
+  customElement("dsa-skeleton")
+], DSASkeleton);
+
+export {
+  skeletonEffects,
+  DSASkeleton
+};