@ds-autonomie/web-components 2.5.1 → 2.7.0

package/cdn/chunks/chunk.2KZI74VU.js

@@ -0,0 +1,274 @@
+import {
+  waitForEvent
+} from "./chunk.B4BZKR24.js";
+import {
+  animateTo,
+  stopAnimations
+} from "./chunk.UBKKXGSV.js";
+import {
+  getAnimation,
+  setDefaultAnimation
+} from "./chunk.2WRFDMKN.js";
+import {
+  a11yWarning
+} from "./chunk.PWL7QCVG.js";
+import {
+  LocalizeController
+} from "./chunk.EM2CIX7W.js";
+import {
+  o
+} from "./chunk.YQLIIKLI.js";
+import {
+  e2
+} from "./chunk.A2REDF56.js";
+import {
+  watch
+} from "./chunk.4FQJ3QJK.js";
+import {
+  ShoelaceElement,
+  e,
+  n,
+  t
+} from "./chunk.JIQUSHGZ.js";
+import {
+  alert_styles_default
+} from "./chunk.UA5KKPLL.js";
+import {
+  x
+} from "./chunk.7HUC6BF3.js";
+import {
+  __decorateClass
+} from "./chunk.4ZGVANML.js";
+
+// src/components/alert/alert.ts
+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";
+    }
+  }
+  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"
+      );
+    }
+    return x`
+      <div aria-live="polite" aria-atomic="true">
+        <div
+          part="base"
+          class=${e2({
+      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"
+          ></dsa-icon>
+          <div class="alert__text">
+            ${this.title || this.alertTitle ? x`
+                  <div
+                    part="header"
+                    id="header"
+                    aria-level=${o(this.headerLevel)}
+                    role=${o(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 ? x`
+                <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([
+  e('[part~="base"]')
+], DSAAlert.prototype, "base", 2);
+__decorateClass([
+  n({ attribute: "alert-title" })
+], DSAAlert.prototype, "alertTitle", 2);
+__decorateClass([
+  n()
+], DSAAlert.prototype, "title", 2);
+__decorateClass([
+  n({ type: Boolean, reflect: true })
+], DSAAlert.prototype, "open", 2);
+__decorateClass([
+  n({ type: Boolean, reflect: true })
+], DSAAlert.prototype, "closable", 2);
+__decorateClass([
+  n({ attribute: "header-level", reflect: true })
+], DSAAlert.prototype, "headerLevel", 2);
+__decorateClass([
+  n({ reflect: true })
+], DSAAlert.prototype, "variant", 2);
+__decorateClass([
+  n({ type: Number })
+], DSAAlert.prototype, "duration", 2);
+__decorateClass([
+  watch("open", { waitUntilFirstUpdate: true })
+], DSAAlert.prototype, "handleOpenChange", 1);
+__decorateClass([
+  watch("duration")
+], DSAAlert.prototype, "handleDurationChange", 1);
+DSAAlert = __decorateClass([
+  t("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/cdn/chunks/chunk.2LZEF7F5.js

@@ -0,0 +1,378 @@
+import {
+  FormControlController,
+  validValidityState
+} from "./chunk.HAD2A62Q.js";
+import {
+  button_styles_default
+} from "./chunk.EHJBUI4G.js";
+import {
+  HasSlotController
+} from "./chunk.YIY5RM53.js";
+import {
+  i,
+  u
+} from "./chunk.VIVOXZF6.js";
+import {
+  ifDefinedAndNotEmpty
+} from "./chunk.B6GVVW66.js";
+import {
+  LocalizeController
+} from "./chunk.EM2CIX7W.js";
+import {
+  o
+} from "./chunk.YQLIIKLI.js";
+import {
+  e2
+} from "./chunk.A2REDF56.js";
+import {
+  watch
+} from "./chunk.4FQJ3QJK.js";
+import {
+  ShoelaceElement,
+  e,
+  n,
+  r,
+  t
+} from "./chunk.JIQUSHGZ.js";
+import {
+  __decorateClass
+} from "./chunk.4ZGVANML.js";
+
+// src/components/button/button.ts
+var DSAButton = class extends ShoelaceElement {
+  constructor() {
+    super(...arguments);
+    this.formControlController = new FormControlController(this, {
+      form: (input) => {
+        if (input.hasAttribute("form")) {
+          const doc = input.getRootNode();
+          const formId = input.getAttribute("form");
+          return doc.getElementById(formId);
+        }
+        return input.closest("form");
+      },
+      assumeInteractionOn: ["click"]
+    });
+    this.hasSlotController = new HasSlotController(
+      this,
+      "[default]",
+      "prefix",
+      "suffix"
+    );
+    this.localize = new LocalizeController(this);
+    this.hasFocus = false;
+    this.invalid = false;
+    this.title = "";
+    this.variant = "primary";
+    this.size = "medium";
+    this.caret = false;
+    this.disabled = false;
+    this.loading = false;
+    this.floating = false;
+    this.contrasted = false;
+    this.toggle = false;
+    this.pressed = false;
+    this.type = "button";
+    this.name = "";
+    this.value = "";
+    this.href = "";
+    this.rel = "noreferrer noopener";
+    this.ariaLabel = "";
+    this.accessibleName = "";
+    this.description = "";
+  }
+  /** Gets the validity state object */
+  get validity() {
+    if (this.isButton()) {
+      return this.button.validity;
+    }
+    return validValidityState;
+  }
+  /** Gets the validation message */
+  get validationMessage() {
+    if (this.isButton()) {
+      return this.button.validationMessage;
+    }
+    return "";
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.handleHostClick = this.handleHostClick.bind(this);
+    this.addEventListener("click", this.handleHostClick);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.removeEventListener("click", this.handleHostClick);
+  }
+  firstUpdated() {
+    if (this.isButton()) {
+      this.formControlController.updateValidity();
+    }
+  }
+  handleBlur() {
+    this.hasFocus = false;
+    this.emit("dsa-blur");
+  }
+  handleFocus() {
+    this.hasFocus = true;
+    this.emit("dsa-focus");
+  }
+  handleClick() {
+    if (this.type === "submit") {
+      this.formControlController.submit(this);
+    }
+    if (this.type === "reset") {
+      this.formControlController.reset(this);
+    }
+    if (this.type === "button" && this.toggle) {
+      this.pressed = !this.pressed;
+      this.emit("dsa-change");
+    }
+  }
+  handleHostClick(event) {
+    if (this.disabled || this.loading) {
+      event.preventDefault();
+      event.stopImmediatePropagation();
+    }
+  }
+  handleInvalid(event) {
+    this.formControlController.setValidity(false);
+    this.formControlController.emitInvalidEvent(event);
+  }
+  getSpinnerVariant() {
+    if (this.floating) {
+      return "floating";
+    } else if (this.contrasted) {
+      return "contrasted";
+    }
+    return "base";
+  }
+  isButton() {
+    return this.href ? false : true;
+  }
+  isLink() {
+    return this.href ? true : false;
+  }
+  handleDisabledChange() {
+    if (this.isButton()) {
+      this.formControlController.setValidity(this.disabled);
+    }
+  }
+  /** Simulates a click on the button. */
+  click() {
+    this.button.click();
+  }
+  /** Sets focus on the button. */
+  focus(options) {
+    this.button.focus(options);
+  }
+  /** Removes focus from the button. */
+  blur() {
+    this.button.blur();
+  }
+  /** Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid. */
+  checkValidity() {
+    if (this.isButton()) {
+      return this.button.checkValidity();
+    }
+    return true;
+  }
+  /** Gets the associated form, if one exists. */
+  getForm() {
+    return this.formControlController.getForm();
+  }
+  /** Checks for validity and shows the browser's validation message if the control is invalid. */
+  reportValidity() {
+    if (this.isButton()) {
+      return this.button.reportValidity();
+    }
+    return true;
+  }
+  /** Sets a custom validation message. Pass an empty string to restore validity. */
+  setCustomValidity(message) {
+    if (this.isButton()) {
+      this.button.setCustomValidity(message);
+      this.formControlController.updateValidity();
+    }
+  }
+  render() {
+    const isLink = this.isLink();
+    const spinnerVariant = this.getSpinnerVariant();
+    const tag = isLink ? i`a` : i`button`;
+    return u`
+      <${tag}
+        part="base"
+        class=${e2({
+      button: true,
+      "button--on-base": !this.floating,
+      "button--on-floating-menu": this.floating,
+      "button--on-contrasted-menu": this.contrasted,
+      "button--navigation": this.variant === "navigation",
+      "button--primary": this.variant === "primary",
+      "button--secondary": this.variant === "secondary",
+      "button--tertiary": this.variant === "tertiary" || this.variant === "tertiary-with-outline",
+      "button--tertiary-with-outline": this.variant === "tertiary-with-outline",
+      "button--neutral": this.variant === "neutral",
+      "button--danger": this.variant === "danger",
+      "button--small": this.size === "small",
+      "button--medium": this.size === "medium",
+      "button--large": this.size === "large",
+      "button--caret": this.caret,
+      "button--toggle": this.toggle,
+      "button--pressed": this.toggle && this.pressed,
+      "button--disabled": this.disabled,
+      "button--focused": this.hasFocus,
+      "button--loading": this.loading,
+      "button--rtl": this.localize.dir() === "rtl",
+      "button--has-label": this.hasSlotController.test("[default]"),
+      "button--has-prefix": this.hasSlotController.test("prefix"),
+      "button--has-suffix": this.hasSlotController.test("suffix")
+    })}
+        ?disabled=${o(isLink ? void 0 : this.disabled)}
+        type=${o(isLink ? void 0 : this.type)}
+        title=${ifDefinedAndNotEmpty(this.title)}
+        name=${ifDefinedAndNotEmpty(isLink ? void 0 : this.name)}
+        value=${ifDefinedAndNotEmpty(isLink ? void 0 : this.value)}
+        href=${o(isLink ? this.href : void 0)}
+        target=${o(isLink ? this.target : void 0)}
+        download=${o(isLink ? this.download : void 0)}
+        rel=${o(isLink ? this.rel : void 0)}
+        aria-label=${ifDefinedAndNotEmpty(
+      this.accessibleName || this.ariaLabel
+    )}
+        aria-describedby="description"
+        aria-disabled=${o(this.disabled ? "true" : void 0)}
+        aria-pressed=${o(this.toggle ? this.pressed : void 0)}
+        tabindex=${o(this.disabled ? "-1" : void 0)}
+        @blur=${this.handleBlur}
+        @focus=${this.handleFocus}
+        @invalid=${this.isButton() ? this.handleInvalid : null}
+        @click=${this.handleClick}
+      >
+      
+        <slot name="prefix" part="prefix" class="button__prefix">
+          ${this.toggle && this.pressed && this.variant === "secondary" ? u` <dsa-icon
+                  part="pressed-check"
+                  name="check"
+                  class="button__icon-check"
+                  library="system"
+                ></dsa-icon>` : ""}
+        </slot>
+        <slot part="label" class="button__label"></slot>
+        <slot name="suffix" part="suffix" class="button__suffix"></slot>
+        ${this.caret ? u`
+                <dsa-icon
+                  part="caret"
+                  class="button__caret"
+                  name="expand_more"
+                  library="system"
+                ></dsa-icon>
+              ` : ""}
+        ${this.loading ? u`<dsa-spinner variant=${spinnerVariant}></dsa-spinner>` : ""}
+      </${tag}>
+      ${this.description !== "" ? u`
+              <p id="description" class="button__description">
+                ${this.description}
+              </p>
+            ` : ""}
+    `;
+  }
+};
+DSAButton.styles = button_styles_default;
+__decorateClass([
+  e(".button")
+], DSAButton.prototype, "button", 2);
+__decorateClass([
+  r()
+], DSAButton.prototype, "hasFocus", 2);
+__decorateClass([
+  r()
+], DSAButton.prototype, "invalid", 2);
+__decorateClass([
+  n()
+], DSAButton.prototype, "title", 2);
+__decorateClass([
+  n({ reflect: true })
+], DSAButton.prototype, "variant", 2);
+__decorateClass([
+  n({ reflect: true })
+], DSAButton.prototype, "size", 2);
+__decorateClass([
+  n({ type: Boolean, reflect: true })
+], DSAButton.prototype, "caret", 2);
+__decorateClass([
+  n({ type: Boolean, reflect: true })
+], DSAButton.prototype, "disabled", 2);
+__decorateClass([
+  n({ type: Boolean, reflect: true })
+], DSAButton.prototype, "loading", 2);
+__decorateClass([
+  n({ type: Boolean, reflect: true })
+], DSAButton.prototype, "floating", 2);
+__decorateClass([
+  n({ type: Boolean, reflect: true })
+], DSAButton.prototype, "contrasted", 2);
+__decorateClass([
+  n({ type: Boolean, reflect: true })
+], DSAButton.prototype, "toggle", 2);
+__decorateClass([
+  n({ type: Boolean, reflect: true })
+], DSAButton.prototype, "pressed", 2);
+__decorateClass([
+  n()
+], DSAButton.prototype, "type", 2);
+__decorateClass([
+  n()
+], DSAButton.prototype, "name", 2);
+__decorateClass([
+  n()
+], DSAButton.prototype, "value", 2);
+__decorateClass([
+  n()
+], DSAButton.prototype, "href", 2);
+__decorateClass([
+  n()
+], DSAButton.prototype, "target", 2);
+__decorateClass([
+  n()
+], DSAButton.prototype, "rel", 2);
+__decorateClass([
+  n()
+], DSAButton.prototype, "download", 2);
+__decorateClass([
+  n()
+], DSAButton.prototype, "form", 2);
+__decorateClass([
+  n({ attribute: "formaction" })
+], DSAButton.prototype, "formAction", 2);
+__decorateClass([
+  n({ attribute: "formenctype" })
+], DSAButton.prototype, "formEnctype", 2);
+__decorateClass([
+  n({ attribute: "formmethod" })
+], DSAButton.prototype, "formMethod", 2);
+__decorateClass([
+  n({ attribute: "formnovalidate", type: Boolean })
+], DSAButton.prototype, "formNoValidate", 2);
+__decorateClass([
+  n({ attribute: "formtarget" })
+], DSAButton.prototype, "formTarget", 2);
+__decorateClass([
+  n({ attribute: "aria-label" })
+], DSAButton.prototype, "ariaLabel", 2);
+__decorateClass([
+  n({ attribute: "accessible-name" })
+], DSAButton.prototype, "accessibleName", 2);
+__decorateClass([
+  n({ attribute: "description" })
+], DSAButton.prototype, "description", 2);
+__decorateClass([
+  watch("disabled", { waitUntilFirstUpdate: true })
+], DSAButton.prototype, "handleDisabledChange", 1);
+DSAButton = __decorateClass([
+  t("dsa-button")
+], DSAButton);
+
+export {
+  DSAButton
+};