@ds-autonomie/web-components 1.0.1

package/dist/chunks/chunk.ENKP2IFW.js

@@ -0,0 +1,361 @@
+import {
+  popup_styles_default
+} from "./chunk.6PS5KB3O.js";
+import {
+  ShoelaceElement
+} from "./chunk.YCXTCVAZ.js";
+import {
+  __decorateClass,
+  __spreadProps,
+  __spreadValues
+} from "./chunk.6M63UXML.js";
+
+// src/components/popup/popup.ts
+import { html } from "lit";
+import { customElement, property, query } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.js";
+import {
+  arrow,
+  autoUpdate,
+  computePosition,
+  flip,
+  offset,
+  platform,
+  shift,
+  size
+} from "@floating-ui/dom";
+import { offsetParent } from "composed-offset-position";
+var DSAPopup = class extends ShoelaceElement {
+  constructor() {
+    super(...arguments);
+    this.active = false;
+    this.placement = "top";
+    this.strategy = "absolute";
+    this.distance = 0;
+    this.skidding = 0;
+    this.arrow = false;
+    this.arrowPlacement = "anchor";
+    this.arrowPadding = 10;
+    this.flip = false;
+    this.flipFallbackPlacements = "";
+    this.flipFallbackStrategy = "best-fit";
+    this.flipPadding = 0;
+    this.shift = false;
+    this.shiftPadding = 0;
+    this.autoSizePadding = 0;
+  }
+  async connectedCallback() {
+    super.connectedCallback();
+    await this.updateComplete;
+    this.start();
+  }
+  disconnectedCallback() {
+    this.stop();
+  }
+  async updated(changedProps) {
+    super.updated(changedProps);
+    if (changedProps.has("active")) {
+      if (this.active) {
+        this.start();
+      } else {
+        this.stop();
+      }
+    }
+    if (changedProps.has("anchor")) {
+      this.handleAnchorChange();
+    }
+    if (this.active) {
+      await this.updateComplete;
+      this.reposition();
+    }
+  }
+  async handleAnchorChange() {
+    await this.stop();
+    if (this.anchor && typeof this.anchor === "string") {
+      const root = this.getRootNode();
+      this.anchorEl = root.getElementById(this.anchor);
+    } else if (this.anchor instanceof Element) {
+      this.anchorEl = this.anchor;
+    } else {
+      this.anchorEl = this.querySelector('[slot="anchor"]');
+    }
+    if (this.anchorEl instanceof HTMLSlotElement) {
+      this.anchorEl = this.anchorEl.assignedElements({
+        flatten: true
+      })[0];
+    }
+    if (!this.anchorEl) {
+      throw new Error(
+        "Invalid anchor element: no anchor could be found using the anchor slot or the anchor attribute."
+      );
+    }
+    this.start();
+  }
+  start() {
+    if (!this.anchorEl) {
+      return;
+    }
+    this.cleanup = autoUpdate(this.anchorEl, this.popup, () => {
+      this.reposition();
+    });
+  }
+  stop() {
+    return new Promise((resolve) => {
+      if (this.cleanup) {
+        this.cleanup();
+        this.cleanup = void 0;
+        this.removeAttribute("data-current-placement");
+        this.style.removeProperty("--auto-size-available-width");
+        this.style.removeProperty("--auto-size-available-height");
+        requestAnimationFrame(() => resolve());
+      } else {
+        resolve();
+      }
+    });
+  }
+  /** Forces the popup to recalculate and reposition itself. */
+  reposition() {
+    if (!this.active || !this.anchorEl) {
+      return;
+    }
+    const middleware = [
+      // The offset middleware goes first
+      offset({ mainAxis: this.distance, crossAxis: this.skidding })
+    ];
+    if (this.sync) {
+      middleware.push(
+        size({
+          apply: ({ rects }) => {
+            const syncWidth = this.sync === "width" || this.sync === "both";
+            const syncHeight = this.sync === "height" || this.sync === "both";
+            this.popup.style.width = syncWidth ? `${rects.reference.width}px` : "";
+            this.popup.style.height = syncHeight ? `${rects.reference.height}px` : "";
+          }
+        })
+      );
+    } else {
+      this.popup.style.width = "";
+      this.popup.style.height = "";
+    }
+    if (this.flip) {
+      middleware.push(
+        flip({
+          boundary: this.flipBoundary,
+          // @ts-expect-error - We're converting a string attribute to an array here
+          fallbackPlacements: this.flipFallbackPlacements,
+          fallbackStrategy: this.flipFallbackStrategy === "best-fit" ? "bestFit" : "initialPlacement",
+          padding: this.flipPadding
+        })
+      );
+    }
+    if (this.shift) {
+      middleware.push(
+        shift({
+          boundary: this.shiftBoundary,
+          padding: this.shiftPadding
+        })
+      );
+    }
+    if (this.autoSize) {
+      middleware.push(
+        size({
+          boundary: this.autoSizeBoundary,
+          padding: this.autoSizePadding,
+          apply: ({ availableWidth, availableHeight }) => {
+            if (this.autoSize === "vertical" || this.autoSize === "both") {
+              this.style.setProperty(
+                "--auto-size-available-height",
+                `${availableHeight}px`
+              );
+            } else {
+              this.style.removeProperty("--auto-size-available-height");
+            }
+            if (this.autoSize === "horizontal" || this.autoSize === "both") {
+              this.style.setProperty(
+                "--auto-size-available-width",
+                `${availableWidth}px`
+              );
+            } else {
+              this.style.removeProperty("--auto-size-available-width");
+            }
+          }
+        })
+      );
+    } else {
+      this.style.removeProperty("--auto-size-available-width");
+      this.style.removeProperty("--auto-size-available-height");
+    }
+    if (this.arrow) {
+      middleware.push(
+        arrow({
+          element: this.arrowEl,
+          padding: this.arrowPadding
+        })
+      );
+    }
+    const getOffsetParent = this.strategy === "absolute" ? (element) => platform.getOffsetParent(element, offsetParent) : platform.getOffsetParent;
+    computePosition(this.anchorEl, this.popup, {
+      placement: this.placement,
+      middleware,
+      strategy: this.strategy,
+      platform: __spreadProps(__spreadValues({}, platform), {
+        getOffsetParent
+      })
+    }).then(({ x, y, middlewareData, placement }) => {
+      const isRtl = getComputedStyle(this).direction === "rtl";
+      const staticSide = {
+        top: "bottom",
+        right: "left",
+        bottom: "top",
+        left: "right"
+      }[placement.split("-")[0]];
+      this.setAttribute("data-current-placement", placement);
+      Object.assign(this.popup.style, {
+        left: `${x}px`,
+        top: `${y}px`
+      });
+      if (this.arrow) {
+        const arrowX = middlewareData.arrow.x;
+        const arrowY = middlewareData.arrow.y;
+        let top = "";
+        let right = "";
+        let bottom = "";
+        let left = "";
+        if (this.arrowPlacement === "start") {
+          const value = typeof arrowX === "number" ? `calc(${this.arrowPadding}px - var(--arrow-padding-offset))` : "";
+          top = typeof arrowY === "number" ? `calc(${this.arrowPadding}px - var(--arrow-padding-offset))` : "";
+          right = isRtl ? value : "";
+          left = isRtl ? "" : value;
+        } else if (this.arrowPlacement === "end") {
+          const value = typeof arrowX === "number" ? `calc(${this.arrowPadding}px - var(--arrow-padding-offset))` : "";
+          right = isRtl ? "" : value;
+          left = isRtl ? value : "";
+          bottom = typeof arrowY === "number" ? `calc(${this.arrowPadding}px - var(--arrow-padding-offset))` : "";
+        } else if (this.arrowPlacement === "center") {
+          left = typeof arrowX === "number" ? `calc(50% - var(--arrow-size-diagonal))` : "";
+          top = typeof arrowY === "number" ? `calc(50% - var(--arrow-size-diagonal))` : "";
+        } else {
+          left = typeof arrowX === "number" ? `${arrowX}px` : "";
+          top = typeof arrowY === "number" ? `${arrowY}px` : "";
+        }
+        Object.assign(this.arrowEl.style, {
+          top,
+          right,
+          bottom,
+          left,
+          [staticSide]: "calc(var(--arrow-size-diagonal) * -1)"
+        });
+      }
+    });
+    this.emit("dsa-reposition");
+  }
+  render() {
+    return html`
+      <slot name="anchor" @slotchange=${this.handleAnchorChange}></slot>
+
+      <div
+        part="popup"
+        class=${classMap({
+      popup: true,
+      "popup--active": this.active,
+      "popup--fixed": this.strategy === "fixed",
+      "popup--has-arrow": this.arrow
+    })}
+      >
+        <slot></slot>
+        ${this.arrow ? html`<div
+              part="arrow"
+              class="popup__arrow"
+              role="presentation"
+            ></div>` : ""}
+      </div>
+    `;
+  }
+};
+DSAPopup.styles = popup_styles_default;
+__decorateClass([
+  query(".popup")
+], DSAPopup.prototype, "popup", 2);
+__decorateClass([
+  query(".popup__arrow")
+], DSAPopup.prototype, "arrowEl", 2);
+__decorateClass([
+  property()
+], DSAPopup.prototype, "anchor", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], DSAPopup.prototype, "active", 2);
+__decorateClass([
+  property({ reflect: true })
+], DSAPopup.prototype, "placement", 2);
+__decorateClass([
+  property({ reflect: true })
+], DSAPopup.prototype, "strategy", 2);
+__decorateClass([
+  property({ type: Number })
+], DSAPopup.prototype, "distance", 2);
+__decorateClass([
+  property({ type: Number })
+], DSAPopup.prototype, "skidding", 2);
+__decorateClass([
+  property({ type: Boolean })
+], DSAPopup.prototype, "arrow", 2);
+__decorateClass([
+  property({ attribute: "arrow-placement" })
+], DSAPopup.prototype, "arrowPlacement", 2);
+__decorateClass([
+  property({ attribute: "arrow-padding", type: Number })
+], DSAPopup.prototype, "arrowPadding", 2);
+__decorateClass([
+  property({ type: Boolean })
+], DSAPopup.prototype, "flip", 2);
+__decorateClass([
+  property({
+    attribute: "flip-fallback-placements",
+    converter: {
+      fromAttribute: (value) => {
+        return value.split(" ").map((p) => p.trim()).filter((p) => p !== "");
+      },
+      toAttribute: (value) => {
+        return value.join(" ");
+      }
+    }
+  })
+], DSAPopup.prototype, "flipFallbackPlacements", 2);
+__decorateClass([
+  property({ attribute: "flip-fallback-strategy" })
+], DSAPopup.prototype, "flipFallbackStrategy", 2);
+__decorateClass([
+  property({ type: Object })
+], DSAPopup.prototype, "flipBoundary", 2);
+__decorateClass([
+  property({ attribute: "flip-padding", type: Number })
+], DSAPopup.prototype, "flipPadding", 2);
+__decorateClass([
+  property({ type: Boolean })
+], DSAPopup.prototype, "shift", 2);
+__decorateClass([
+  property({ type: Object })
+], DSAPopup.prototype, "shiftBoundary", 2);
+__decorateClass([
+  property({ attribute: "shift-padding", type: Number })
+], DSAPopup.prototype, "shiftPadding", 2);
+__decorateClass([
+  property({ attribute: "auto-size" })
+], DSAPopup.prototype, "autoSize", 2);
+__decorateClass([
+  property()
+], DSAPopup.prototype, "sync", 2);
+__decorateClass([
+  property({ type: Object })
+], DSAPopup.prototype, "autoSizeBoundary", 2);
+__decorateClass([
+  property({ attribute: "auto-size-padding", type: Number })
+], DSAPopup.prototype, "autoSizePadding", 2);
+DSAPopup = __decorateClass([
+  customElement("dsa-popup")
+], DSAPopup);
+
+export {
+  DSAPopup
+};

package/dist/chunks/chunk.EU56EW33.js

@@ -0,0 +1,91 @@
+import {
+  component_styles_default
+} from "./chunk.TUVJKY7S.js";
+
+// src/components/progress-ring/progress-ring.styles.ts
+import { css } from "lit";
+var progress_ring_styles_default = css`
+  ${component_styles_default}
+
+  :host {
+    display: inline-flex;
+  }
+
+  .progress-ring.progress-ring--small {
+    --size: var(--dsa-wc-progress-bar-small-size);
+    --track-width: var(--dsa-wc-progress-bar-small-track-width);
+    gap: var(--dsa-wc-progress-bar-small-gap);
+    height: var(--size);
+  }
+
+  .progress-ring.progress-ring--medium {
+    --size: var(--dsa-wc-progress-bar-size);
+    --track-width: var(--dsa-wc-progress-bar-track-width);
+    position: relative;
+  }
+
+  .progress-ring {
+    --indicator-width: var(--track-width);
+    --indicator-transition-duration: 0.35s;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    font: var(--dsa-wc-progress-ring-font);
+  }
+
+  .progress-ring__image {
+    width: var(--size);
+    height: var(--size);
+    rotate: -90deg;
+    transform-origin: 50% 50%;
+    flex-shrink: 0;
+  }
+
+  .progress-ring__track,
+  .progress-ring__indicator {
+    --radius: calc(
+      var(--size) / 2 - max(var(--track-width), var(--indicator-width)) * 0.5
+    );
+    --circumference: calc(var(--radius) * 2 * 3.141592654);
+    fill: none;
+    r: var(--radius);
+    cx: calc(var(--size) / 2);
+    cy: calc(var(--size) / 2);
+  }
+
+  .progress-ring__track {
+    stroke: var(--dsa-wc-progress-ring-track-color);
+    stroke-width: var(--track-width);
+  }
+
+  .progress-ring__indicator {
+    stroke: var(--dsa-wc-progress-ring-content-color);
+    stroke-width: var(--indicator-width);
+    stroke-linecap: round;
+    transition-property: stroke-dashoffset;
+    transition-duration: var(--indicator-transition-duration);
+    stroke-dasharray: var(--circumference) var(--circumference);
+    stroke-dashoffset: calc(
+      var(--circumference) - var(--percentage) * var(--circumference)
+    );
+  }
+
+  .progress-ring__label {
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+    text-align: center;
+    user-select: none;
+  }
+  .progress-ring--medium .progress-ring__label {
+    top: 0;
+    left: 0;
+    display: flex;
+    position: absolute;
+  }
+`;
+
+export {
+  progress_ring_styles_default
+};

package/dist/chunks/chunk.EYZGEU3G.js

@@ -0,0 +1,45 @@
+// src/components/error-text/error-text.styles.ts
+import { css } from "lit";
+var error_text_styles_default = css`
+  :host {
+    font: var(--dsa-wc-error-text-font);
+    font-size: inherit;
+  }
+  .error-text {
+    align-items: flex-start;
+    display: flex;
+    flex-direction: row;
+    padding: 0;
+    gap: var(--dsa-wc-error-text-gap);
+    font: inherit;
+  }
+
+  /* Text  */
+
+  .error-text__slot {
+    color: var(--dsa-wc-error-text-color);
+    display: block;
+  }
+
+  /* Icon  */
+  .error-text__icon {
+    flex: 0 0 auto;
+    display: flex;
+    color: var(--dsa-wc-error-text-icon-color);
+    padding-top: 0.1em;
+  }
+
+  .error-text__icon dsa-icon {
+    width: 1.666em;
+    height: 1.666em;
+  }
+
+  // .error-text__icon dsa-icon::part(svg) {
+  //   width: auto;
+  //   height: auto;
+  // }
+`;
+
+export {
+  error_text_styles_default
+};

package/dist/chunks/chunk.FDYFSRSX.js

@@ -0,0 +1,33 @@
+// src/utilities/base-path.ts
+var basePath = "";
+function setBasePath(path) {
+  basePath = path;
+}
+function getBasePath(subpath = "") {
+  if (!basePath) {
+    const scripts = [
+      ...document.getElementsByTagName("script")
+    ];
+    const configScript = scripts.find(
+      (script) => script.hasAttribute("data-design-system")
+    );
+    if (configScript) {
+      setBasePath(configScript.getAttribute("data-design-system"));
+    } else {
+      const fallbackScript = scripts.find((s) => {
+        return /design-system(\.min)?\.js($|\?)/.test(s.src) || /design-system-autoloader(\.min)?\.js($|\?)/.test(s.src);
+      });
+      let path = "";
+      if (fallbackScript) {
+        path = fallbackScript.getAttribute("src");
+      }
+      setBasePath(path.split("/").slice(0, -1).join("/"));
+    }
+  }
+  return basePath.replace(/\/$/, "") + (subpath ? `/${subpath.replace(/^\//, "")}` : ``);
+}
+
+export {
+  setBasePath,
+  getBasePath
+};

package/dist/chunks/chunk.FIGO7UV2.js

@@ -0,0 +1,77 @@
+import {
+  component_styles_default
+} from "./chunk.TUVJKY7S.js";
+
+// src/components/tab/tab.styles.ts
+import { css } from "lit";
+var tab_styles_default = css`
+  ${component_styles_default}
+
+  :host {
+    display: inline-block;
+  }
+
+  .tab {
+    display: inline-flex;
+    align-items: center;
+    font: var(--dsa-wc-tab-font);
+    border-radius: var(--dsa-wc-tab-border-radius);
+    color: var(--dsa-wc-tab-color);
+    padding: var(--dsa-wc-tab-padding);
+    white-space: nowrap;
+    user-select: none;
+    cursor: pointer;
+    transition: var(--transition-speed) box-shadow,
+      var(--transition-speed) color;
+  }
+
+  .tab:hover:not(.tab--disabled) {
+    color: var(--dsa-wc-tab-color-hover);
+  }
+
+  .tab:focus {
+    outline: none;
+  }
+
+  .tab:focus-visible:not(.tab--disabled) {
+    color: var(--dsa-wc-tab-color-active-tab);
+  }
+
+  .tab:focus-visible {
+    outline: var(--dsa-wc-focus-ring);
+    outline-offset: calc(
+      -1 * var(--dsa-wc-focus-ring-width) - var(--dsa-wc-focus-ring-offset)
+    );
+    border-radius: var(--dsa-wc-focus-ring-radius);
+  }
+
+  .tab.tab--active:not(.tab--disabled) {
+    color: var(--dsa-wc-tab-color-active-tab);
+    font: var(--dsa-wc-tab-font-active-tab);
+  }
+
+  .tab.tab--disabled {
+    color: var(--dsa-wc-tab-color-disabled);
+    cursor: not-allowed;
+  }
+
+  .tab__close-button {
+    font-size: var(--dsa-wc-tab-close-size);
+    margin-inline-start: var(--dsa-wc-tab-closable-padding-inline-start);
+  }
+
+  .tab__close-button::part(base) {
+    padding: var(--dsa-wc-tab-close-padding);
+  }
+
+  @media (forced-colors: active) {
+    .tab.tab--active:not(.tab--disabled) {
+      outline: solid 1px transparent;
+      outline-offset: -3px;
+    }
+  }
+`;
+
+export {
+  tab_styles_default
+};