@ds-autonomie/web-components 2.14.0 → 2.15.0

package/dist/chunks/chunk.WUA5D6EA.js

@@ -1,182 +0,0 @@
-import {
-  icon_styles_default
-} from "./chunk.LMJPQPQT.js";
-import {
-  getIconLibrary,
-  unwatchIcon,
-  watchIcon
-} from "./chunk.2FH4CXEK.js";
-import {
-  watch
-} from "./chunk.7627FYPL.js";
-import {
-  ShoelaceElement
-} from "./chunk.KPJCYT4S.js";
-import {
-  __decorateClass
-} from "./chunk.5GB6F3WA.js";
-
-// src/components/icon/icon.ts
-import { html } from "lit";
-import { customElement, property, state } from "lit/decorators.js";
-import { isTemplateResult } from "lit/directive-helpers.js";
-var CACHEABLE_ERROR = Symbol();
-var RETRYABLE_ERROR = Symbol();
-var parser;
-var iconCache = /* @__PURE__ */ new Map();
-var DSAIcon = class extends ShoelaceElement {
-  constructor() {
-    super(...arguments);
-    this.initialRender = false;
-    this.svg = null;
-    this.label = "";
-    this.library = "default";
-  }
-  /** Given a URL, this function returns the resulting SVG element or an appropriate error symbol. */
-  async resolveIcon(url, library) {
-    var _a;
-    let fileData;
-    if (library == null ? void 0 : library.spriteSheet) {
-      this.svg = html`<svg part="svg">
-        <use part="use" href="${url}"></use>
-      </svg>`;
-      return this.svg;
-    }
-    try {
-      fileData = await fetch(url, { mode: "cors" });
-      if (!fileData.ok)
-        return fileData.status === 410 ? CACHEABLE_ERROR : RETRYABLE_ERROR;
-    } catch (e) {
-      return RETRYABLE_ERROR;
-    }
-    try {
-      const div = document.createElement("div");
-      div.innerHTML = await fileData.text();
-      const svg = div.firstElementChild;
-      if (((_a = svg == null ? void 0 : svg.tagName) == null ? void 0 : _a.toLowerCase()) !== "svg") return CACHEABLE_ERROR;
-      if (!parser) parser = new DOMParser();
-      const doc = parser.parseFromString(svg.outerHTML, "text/html");
-      const svgEl = doc.body.querySelector("svg");
-      if (!svgEl) return CACHEABLE_ERROR;
-      svgEl.part.add("svg");
-      return document.adoptNode(svgEl);
-    } catch (e) {
-      return CACHEABLE_ERROR;
-    }
-  }
-  connectedCallback() {
-    super.connectedCallback();
-    watchIcon(this);
-  }
-  firstUpdated() {
-    this.initialRender = true;
-    this.setIcon();
-  }
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    unwatchIcon(this);
-  }
-  getIconSource() {
-    const library = getIconLibrary(this.library);
-    if (this.name && library) {
-      return {
-        url: library.resolver(this.name),
-        fromLibrary: true
-      };
-    }
-    return {
-      url: this.src,
-      fromLibrary: false
-    };
-  }
-  handleLabelChange() {
-    const hasLabel = typeof this.label === "string" && this.label.length > 0;
-    if (hasLabel) {
-      this.setAttribute("role", "img");
-      this.setAttribute("aria-label", this.label);
-      this.removeAttribute("aria-hidden");
-    } else {
-      this.removeAttribute("role");
-      this.removeAttribute("aria-label");
-      this.setAttribute("aria-hidden", "true");
-    }
-  }
-  async setIcon() {
-    var _a;
-    const { url, fromLibrary } = this.getIconSource();
-    const library = fromLibrary ? getIconLibrary(this.library) : void 0;
-    if (!url) {
-      this.svg = null;
-      return;
-    }
-    let iconResolver = iconCache.get(url);
-    if (!iconResolver) {
-      iconResolver = this.resolveIcon(url, library);
-      iconCache.set(url, iconResolver);
-    }
-    if (!this.initialRender) {
-      return;
-    }
-    const svg = await iconResolver;
-    if (svg === RETRYABLE_ERROR) {
-      iconCache.delete(url);
-    }
-    if (url !== this.getIconSource().url) {
-      return;
-    }
-    if (isTemplateResult(svg)) {
-      this.svg = svg;
-      if (library) {
-        await this.updateComplete;
-        const shadowSVG = this.shadowRoot.querySelector("[part='svg']");
-        if (typeof library.mutator === "function" && shadowSVG) {
-          library.mutator(shadowSVG);
-        }
-      }
-      return;
-    }
-    switch (svg) {
-      case RETRYABLE_ERROR:
-      case CACHEABLE_ERROR:
-        this.svg = null;
-        this.emit("dsa-error");
-        break;
-      default:
-        this.svg = svg.cloneNode(true);
-        (_a = library == null ? void 0 : library.mutator) == null ? void 0 : _a.call(library, this.svg);
-        this.emit("dsa-load");
-    }
-  }
-  render() {
-    return this.svg;
-  }
-};
-DSAIcon.styles = icon_styles_default;
-__decorateClass([
-  state()
-], DSAIcon.prototype, "svg", 2);
-__decorateClass([
-  property({ reflect: true })
-], DSAIcon.prototype, "name", 2);
-__decorateClass([
-  property()
-], DSAIcon.prototype, "src", 2);
-__decorateClass([
-  property()
-], DSAIcon.prototype, "label", 2);
-__decorateClass([
-  property({ reflect: true })
-], DSAIcon.prototype, "library", 2);
-__decorateClass([
-  watch("label")
-], DSAIcon.prototype, "handleLabelChange", 1);
-__decorateClass([
-  watch(["name", "src", "library"])
-], DSAIcon.prototype, "setIcon", 1);
-DSAIcon = __decorateClass([
-  customElement("dsa-icon")
-], DSAIcon);
-
-export {
-  DSAIcon
-};

package/dist/chunks/chunk.WXIWEJWG.js

@@ -1,96 +0,0 @@
-import {
-  input_base_styles_default
-} from "./chunk.6BNYXFNI.js";
-
-// src/components/input-time/input-time.styles.ts
-import { css } from "lit";
-var input_time_styles_default = css`
-  ${input_base_styles_default}
-
-  .input--time {
-    overflow: visible;
-  }
-
-  .icon-button--time {
-    --padding: var(--dsa-spacing-4);
-    margin-right: var(--dsa-wc-input-padding-x);
-  }
-
-  .icon-button--time::part(base) {
-    color: inherit;
-  }
-
-  .time-popup::part(popup) {
-    z-index: var(--dsa-wc-z-index-dropdown);
-    overflow: hidden;
-  }
-
-  .time-popup--panel {
-    border: 1px solid var(--dsa-wc-input-time-panel-border-color);
-    border-radius: var(--dsa-wc-input-time-panel-border-radius);
-    background: var(--dsa-color-background-base);
-    box-shadow: var(--dsa-wc-shadow-small);
-    display: grid;
-    grid-auto-flow: column;
-  }
-
-  .time-popup--unit-container {
-    width: var(--dsa-wc-input-time-picker-unit-size);
-    max-height: calc(var(--dsa-wc-input-time-picker-unit-size) * 6);
-    margin: 0;
-    padding: var(--dsa-spacing-4);
-    overflow: auto;
-    scrollbar-width: none;
-    list-style: none;
-  }
-
-  .time-popup--unit {
-    cursor: pointer;
-    border-radius: var(--dsa-wc-input-time-picker-unit-radius);
-    font: var(--dsa-wc-input-time-picker-unit-font);
-    color: var(--dsa-wc-input-time-picker-unit-color);
-  }
-
-  .time-popup--unit:hover {
-    background-color: var(--dsa-wc-input-time-picker-unit-hover-color);
-  }
-
-  .time-popup--unit.time-popup--unit-selected {
-    border: 1px solid var(--dsa-wc-input-time-picker-unit-current-color);
-    color: var(--dsa-color-text-on-contrasted-primary);
-    background-color: var(--dsa-wc-input-time-picker-unit-selected-color);
-  }
-
-  .time-popup--unit.time-popup--unit-selected:hover {
-    background-color: var(--dsa-color-primitive-colors-identity-purple-800);
-  }
-
-  .time-popup--unit > * {
-    aspect-ratio: 1;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-  }
-
-  .time-anchor {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: space-between;
-  }
-
-  /* Focus */
-  .time-popup--unit:focus-visible {
-    outline: var(--dsa-wc-focus-ring);
-    outline-offset: var(--dsa-wc-focus-ring-offset);
-  }
-
-  /* Value description for screen readers */
-  .input--time-description {
-    display: none;
-  }
-`;
-
-export {
-  input_time_styles_default
-};

package/dist/chunks/chunk.WYUQG5BJ.js

@@ -1,75 +0,0 @@
-import {
-  component_styles_default
-} from "./chunk.TUVJKY7S.js";
-
-// src/components/popup/popup.styles.ts
-import { css } from "lit";
-var popup_styles_default = css`
-  ${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
-};

package/dist/chunks/chunk.X3ZR4IMO.js

@@ -1,44 +0,0 @@
-import {
-  skip_links_styles_default
-} from "./chunk.DX25IW4S.js";
-import {
-  LocalizeController
-} from "./chunk.QY3AIGLE.js";
-import {
-  ShoelaceElement
-} from "./chunk.KPJCYT4S.js";
-import {
-  __decorateClass
-} from "./chunk.5GB6F3WA.js";
-
-// src/components/skip-links/skip-links.ts
-import { html } from "lit";
-import { customElement } from "lit/decorators.js";
-var DSASkipLinks = class extends ShoelaceElement {
-  constructor() {
-    super(...arguments);
-    this.localize = new LocalizeController(this);
-  }
-  render() {
-    return html`
-      <nav
-        role="navigation"
-        part="base"
-        class="skip-links"
-        aria-label=${this.localize.term("skipLinksAriaLabel")}
-      >
-        <ul class="skip-links__list">
-          <slot></slot>
-        </ul>
-      </nav>
-    `;
-  }
-};
-DSASkipLinks.styles = skip_links_styles_default;
-DSASkipLinks = __decorateClass([
-  customElement("dsa-skip-links")
-], DSASkipLinks);
-
-export {
-  DSASkipLinks
-};

package/dist/chunks/chunk.XBQLQJQG.js

@@ -1,48 +0,0 @@
-import {
-  footer_content_block_styles_default
-} from "./chunk.SUFR3KIW.js";
-import {
-  HasSlotController
-} from "./chunk.YIY5RM53.js";
-import {
-  ShoelaceElement
-} from "./chunk.KPJCYT4S.js";
-import {
-  __decorateClass
-} from "./chunk.5GB6F3WA.js";
-
-// src/components/footer-content-block/footer-content-block.ts
-import { html } from "lit";
-import { customElement } from "lit/decorators.js";
-import { ifDefined } from "lit/directives/if-defined.js";
-var DSAFooterContentBlock = class extends ShoelaceElement {
-  constructor() {
-    super(...arguments);
-    this.hasSlotController = new HasSlotController(
-      this,
-      "title",
-      "content"
-    );
-  }
-  render() {
-    const hasTitle = this.hasSlotController.test("title");
-    return html`
-      <div
-        part="base"
-        role=${ifDefined(hasTitle ? "region" : void 0)}
-        aria-labelledby=${ifDefined(hasTitle ? "block-title" : void 0)}
-      >
-        <slot id="block-title" part="title" name="title"></slot>
-        <slot part="content" name="content"></slot>
-      </div>
-    `;
-  }
-};
-DSAFooterContentBlock.styles = footer_content_block_styles_default;
-DSAFooterContentBlock = __decorateClass([
-  customElement("dsa-footer-content-block")
-], DSAFooterContentBlock);
-
-export {
-  DSAFooterContentBlock
-};

package/dist/chunks/chunk.XH64BF6I.js

@@ -1,228 +0,0 @@
-import {
-  getStepIcon
-} from "./chunk.CCTWXABH.js";
-import {
-  step_styles_default
-} from "./chunk.6RDA3XLH.js";
-import {
-  HasSlotController
-} from "./chunk.YIY5RM53.js";
-import {
-  a11yWarning
-} from "./chunk.PWL7QCVG.js";
-import {
-  LocalizeController
-} from "./chunk.QY3AIGLE.js";
-import {
-  ShoelaceElement
-} from "./chunk.KPJCYT4S.js";
-import {
-  __decorateClass
-} from "./chunk.5GB6F3WA.js";
-
-// src/components/step/step.ts
-import { customElement, property, query } from "lit/decorators.js";
-import { classMap } from "lit/directives/class-map.js";
-import { ifDefined } from "lit/directives/if-defined.js";
-import { html, literal } from "lit/static-html.js";
-var DSAStep = class extends ShoelaceElement {
-  constructor() {
-    super(...arguments);
-    this.hasSlotController = new HasSlotController(
-      this,
-      "title",
-      "content"
-    );
-    this.localize = new LocalizeController(this);
-    this.status = "default";
-    this.stepTitle = "";
-    this.content = "";
-    this.vertical = false;
-    this.clickable = false;
-    this.href = "";
-    this.rel = "noreferrer noopener";
-  }
-  /** Simulates a click on the step. */
-  click() {
-    this.button.click();
-  }
-  /** Sets focus on the step. */
-  focus(options) {
-    this.button.focus(options);
-  }
-  /** Removes focus from the step. */
-  blur() {
-    this.button.blur();
-  }
-  connectedCallback() {
-    this.setAttribute("role", "listitem");
-    super.connectedCallback();
-  }
-  getTag() {
-    if (!this.clickable) {
-      return literal`div`;
-    }
-    return this.href ? literal`a` : literal`button`;
-  }
-  getStepLabel() {
-    switch (this.status) {
-      case "complete":
-        return this.localize.term("stepCompleted");
-      case "in-progress":
-        return this.localize.term("stepInProgress");
-      case "active":
-        return this.localize.term("stepActive");
-      case "error":
-        return this.localize.term("stepError");
-      case "default":
-      default:
-        return void 0;
-    }
-  }
-  render() {
-    const hasTitleSlot = this.hasSlotController.test("title");
-    const hasContentSlot = this.hasSlotController.test("content");
-    const hasTitle = this.stepTitle ? true : !!hasTitleSlot;
-    const hasContent = this.content ? true : !!hasContentSlot;
-    const isStaticStep = !this.clickable;
-    const stepIconName = this.status !== "in-progress" && this.status !== "active" ? getStepIcon(this.status) : void 0;
-    const stepLabel = this.getStepLabel();
-    const isLink = this.clickable && this.href;
-    const isButton = this.clickable && !this.href;
-    const tag = this.getTag();
-    if (this.clickable && !hasTitle) {
-      a11yWarning(
-        "<dsa-step> requires a `step-title` attribute or an element in its `title` slot for accessibility when clickable, "
-      );
-    }
-    return html`
-      <div
-        part="step"
-        class=${classMap({
-      "step-container": true,
-      "step-container--clickable": !isStaticStep,
-      "step-container--has-title": hasTitle,
-      "step-container--has-content": hasContent,
-      "step-container__horizontal": !this.vertical,
-      "step-container__vertical": this.vertical
-    })}
-      >
-        <div
-          class=${classMap({
-      step: true,
-      "step--default": this.status === "default",
-      "step--complete": this.status === "complete",
-      "step--in-progress": this.status === "in-progress" || this.status === "active",
-      "step--error": this.status === "error"
-    })}
-          aria-hidden=${ifDefined(this.clickable ? "true" : void 0)}
-        >
-          ${this.status === "in-progress" || this.status === "active" ? html`<span class="step-icon--in-progress"
-                  ><dsa-visually-hidden>${stepLabel}</dsa-visually-hidden></span
-                >` : ""}
-          ${this.status === "complete" || this.status === "error" ? html`
-                  <dsa-icon
-                    class="step-icon"
-                    name="${ifDefined(stepIconName)}"
-                    label=${ifDefined(stepLabel)}
-                    library="system"
-                  >
-                  </dsa-icon>
-
-                  ${this.clickable ? html`</dsa-icon>
-                        <dsa-icon
-                          class="step-icon--edit"
-                          name="edit"
-                          label=${ifDefined(stepLabel)}
-                          library="system"
-                        >
-                        </dsa-icon>` : ""}
-                ` : ""}
-        </div>
-
-        <div class="step-content-container">
-          ${this.index !== void 0 ? html`
-                  <p
-                    class="step-index"
-                    aria-hidden=${ifDefined(
-      this.clickable ? "true" : void 0
-    )}
-                  >
-                    ${this.localize.term("step")} ${this.index + 1}
-                  </p>
-                ` : html``}
-
-          <div class="step-title-container">
-            <${tag}
-              class=${classMap({
-      "step-clickable": !isStaticStep,
-      "step-link": isLink,
-      "step-button": isButton
-    })}
-              type=${ifDefined(isButton ? "button" : void 0)}
-              href=${ifDefined(isLink ? this.href : void 0)}
-              target=${ifDefined(isLink ? this.target : void 0)}
-              rel=${ifDefined(isLink ? this.rel : void 0)}
-            >
-              ${this.clickable ? html`
-                      <dsa-visually-hidden>${stepLabel},</dsa-visually-hidden>
-                    ` : ""}
-              ${this.clickable && this.index !== void 0 ? html`
-                      <dsa-visually-hidden
-                        >${this.localize.term("step")}
-                        ${this.index + 1},</dsa-visually-hidden
-                      >
-                    ` : ""}
-              <slot
-                name="title"
-                class="step-title"
-                aria-hidden=${ifDefined(hasTitle ? void 0 : "true")}
-                >${this.stepTitle}</slot
-              >
-            </${tag}>
-            ${this.hasSlotController.test("tooltip") ? html` <slot name="tooltip" class="step-tooltip"></slot> ` : ""}
-          </div>
-          <slot name="content" class="step-content">${this.content}</slot>
-        </div>
-      </div>
-    `;
-  }
-};
-DSAStep.styles = step_styles_default;
-__decorateClass([
-  query(".button")
-], DSAStep.prototype, "button", 2);
-__decorateClass([
-  property()
-], DSAStep.prototype, "status", 2);
-__decorateClass([
-  property({ attribute: "step-title" })
-], DSAStep.prototype, "stepTitle", 2);
-__decorateClass([
-  property()
-], DSAStep.prototype, "content", 2);
-__decorateClass([
-  property()
-], DSAStep.prototype, "index", 2);
-__decorateClass([
-  property({ type: Boolean })
-], DSAStep.prototype, "vertical", 2);
-__decorateClass([
-  property({ type: Boolean })
-], DSAStep.prototype, "clickable", 2);
-__decorateClass([
-  property()
-], DSAStep.prototype, "href", 2);
-__decorateClass([
-  property()
-], DSAStep.prototype, "target", 2);
-__decorateClass([
-  property()
-], DSAStep.prototype, "rel", 2);
-DSAStep = __decorateClass([
-  customElement("dsa-step")
-], DSAStep);
-
-export {
-  DSAStep
-};