@ds-autonomie/web-components 2.6.0 → 2.7.1

package/cdn/chunks/chunk.5CO3IOJ7.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.RPE5DQV3.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
+};

package/cdn/chunks/chunk.5LA3UQGA.js

@@ -0,0 +1,45 @@
+import {
+  footer_mandatory_mentions_styles_default
+} from "./chunk.W3IOWNM7.js";
+import {
+  HasSlotController
+} from "./chunk.YIY5RM53.js";
+import {
+  ShoelaceElement,
+  t
+} from "./chunk.EW5LC4ZI.js";
+import {
+  x
+} from "./chunk.JXF4O366.js";
+import {
+  __decorateClass
+} from "./chunk.4ZGVANML.js";
+
+// src/components/footer-mandatory-mentions/footer-mandatory-mentions.ts
+var DSAFooterMandatoryMentions = class extends ShoelaceElement {
+  constructor() {
+    super(...arguments);
+    this.hasSlotController = new HasSlotController(
+      this,
+      "text-left",
+      "text-right"
+    );
+  }
+  render() {
+    return x`
+      <div part="base">
+        <slot part="text-left" name="text-left"></slot>
+        ${this.hasSlotController.test("text-left") && this.hasSlotController.test("text-right") ? x`<dsa-divider part="divider" vertical></dsa-divider>` : ""}
+        <slot part="text-right" name="text-right"></slot>
+      </div>
+    `;
+  }
+};
+DSAFooterMandatoryMentions.styles = footer_mandatory_mentions_styles_default;
+DSAFooterMandatoryMentions = __decorateClass([
+  t("dsa-footer-mandatory-mentions")
+], DSAFooterMandatoryMentions);
+
+export {
+  DSAFooterMandatoryMentions
+};

package/cdn/chunks/chunk.5LZSOU2R.js

@@ -0,0 +1,52 @@
+import {
+  skeleton_styles_default
+} from "./chunk.HOR2STZV.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/skeleton/skeleton.ts
+var skeletonEffects = ["pulse", "sheen", "none"];
+var DSASkeleton = class extends ShoelaceElement {
+  constructor() {
+    super(...arguments);
+    this.effect = "none";
+  }
+  render() {
+    return x`
+      <div
+        part="base"
+        class=${e({
+      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([
+  n()
+], DSASkeleton.prototype, "effect", 2);
+DSASkeleton = __decorateClass([
+  t("dsa-skeleton")
+], DSASkeleton);
+
+export {
+  skeletonEffects,
+  DSASkeleton
+};

package/cdn/chunks/chunk.5SFJEW3X.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.XED65RH5.js";
+import {
+  e2
+} from "./chunk.JY4LUWQC.js";
+import {
+  watch
+} from "./chunk.4FQJ3QJK.js";
+import {
+  ShoelaceElement,
+  e,
+  n,
+  t
+} from "./chunk.EW5LC4ZI.js";
+import {
+  alert_styles_default
+} from "./chunk.CDFRZZN5.js";
+import {
+  x
+} from "./chunk.JXF4O366.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.5WSWBPLP.js

@@ -0,0 +1,80 @@
+import {
+  component_styles_default
+} from "./chunk.MQAAYEM3.js";
+import {
+  i
+} from "./chunk.UKK3NS3L.js";
+
+// src/components/quote/quote.styles.ts
+var quote_styles_default = i`
+  ${component_styles_default}
+
+  :host {
+    display: contents;
+  }
+  p {
+    margin: 0;
+    word-break: break-word;
+  }
+
+  .quote {
+    display: flex;
+    gap: var(--dsa-spacing-16);
+  }
+
+  .quote--with-borders {
+    border-radius: 60px 0px;
+    border: 1px solid var(--dsa-wc-quote-border-color);
+    padding: var(--dsa-spacing-32);
+    background-color: var(--dsa-wc-quote-background-color);
+  }
+
+  .quote__mark {
+    flex-shrink: 0;
+    width: 32px;
+    align-self: baseline;
+    color: var(--dsa-wc-quote-icon-color);
+  }
+  .quote--small .quote__mark {
+    width: 24px;
+  }
+
+  .quote__content {
+    display: flex;
+    flex-direction: column;
+    gap: var(--dsa-spacing-8);
+  }
+
+  .quote__blockquote {
+    margin: 0;
+    font: var(--dsa-wc-quote-blockquote-font);
+    word-wrap: break-word;
+    color: var(--dsa-wc-quote-text-color);
+  }
+  .quote--small .quote__blockquote {
+    font: var(--dsa-wc-quote-blockquote-font-small);
+  }
+
+  .quote__source {
+    display: flex;
+    gap: var(--dsa-spacing-4);
+    font: var(--dsa-wc-quote-source-font);
+    color: var(--dsa-wc-quote-text-color);
+  }
+
+  .quote--small .quote__source {
+    font: var(--dsa-wc-quote-source-font-small);
+  }
+
+  .quote__details {
+    font: var(--dsa-wc-quote-details-font);
+    color: var(--dsa-wc-quote-details-color);
+  }
+  .quote--small .quote__details {
+    font: var(--dsa-wc-quote-details-font-small);
+  }
+`;
+
+export {
+  quote_styles_default
+};

package/cdn/chunks/chunk.6B5QADAQ.js

@@ -0,0 +1,77 @@
+import {
+  component_styles_default
+} from "./chunk.MQAAYEM3.js";
+import {
+  i
+} from "./chunk.UKK3NS3L.js";
+
+// src/components/popup/popup.styles.ts
+var popup_styles_default = i`
+  ${component_styles_default}
+
+  :host {
+    --arrow-color: var(--dsa-color-primitive-colors-neutral-900);
+    --arrow-size: 6px;
+
+    /*
+     * These properties are computed to account for the arrow's dimensions after being rotated 45º. The constant
+     * 0.7071 is derived from sin(45), which is the diagonal size of the arrow's container after rotating.
+     */
+    --arrow-size-diagonal: calc(var(--arrow-size) * 0.7071);
+    --arrow-padding-offset: calc(
+      var(--arrow-size-diagonal) - var(--arrow-size)
+    );
+
+    display: contents;
+  }
+
+  .popup {
+    position: absolute;
+    isolation: isolate;
+    /* stylelint-disable-next-line */
+    max-width: var(--auto-size-available-width, none);
+    /* stylelint-disable-next-line */
+    max-height: var(--auto-size-available-height, none);
+  }
+
+  .popup--fixed {
+    position: fixed;
+  }
+
+  .popup:not(.popup--active) {
+    display: none;
+  }
+
+  .popup__arrow {
+    position: absolute;
+    width: calc(var(--arrow-size-diagonal) * 2);
+    height: calc(var(--arrow-size-diagonal) * 2);
+    rotate: 45deg;
+    background: var(--arrow-color);
+    z-index: -1;
+  }
+
+  /* Hover bridge */
+  .popup-hover-bridge:not(.popup-hover-bridge--visible) {
+    display: none;
+  }
+  .popup-hover-bridge {
+    position: fixed;
+    z-index: calc(var(--dsa-wc-z-index-dropdown) - 1);
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    clip-path: polygon(
+      var(--hover-bridge-top-left-x, 0) var(--hover-bridge-top-left-y, 0),
+      var(--hover-bridge-top-right-x, 0) var(--hover-bridge-top-right-y, 0),
+      var(--hover-bridge-bottom-right-x, 0)
+        var(--hover-bridge-bottom-right-y, 0),
+      var(--hover-bridge-bottom-left-x, 0) var(--hover-bridge-bottom-left-y, 0)
+    );
+  }
+`;
+
+export {
+  popup_styles_default
+};