@ds-autonomie/web-components 2.5.1 → 2.7.0

package/cdn/chunks/chunk.HAD2A62Q.js

@@ -0,0 +1,309 @@
+import {
+  __spreadProps,
+  __spreadValues
+} from "./chunk.4ZGVANML.js";
+
+// src/internal/form.ts
+var formCollections = /* @__PURE__ */ new WeakMap();
+var reportValidityOverloads = /* @__PURE__ */ new WeakMap();
+var userInteractedControls = /* @__PURE__ */ new WeakSet();
+var interactions = /* @__PURE__ */ new WeakMap();
+var FormControlController = class {
+  constructor(host, options) {
+    (this.host = host).addController(this);
+    this.options = __spreadValues({
+      form: (input) => {
+        if (input.hasAttribute("form") && input.getAttribute("form") !== "") {
+          const root = input.getRootNode();
+          const formId = input.getAttribute("form");
+          if (formId) {
+            return root.getElementById(formId);
+          }
+        }
+        return input.closest("form");
+      },
+      name: (input) => input.name,
+      value: (input) => input.value,
+      defaultValue: (input) => input.defaultValue,
+      disabled: (input) => {
+        var _a;
+        return (_a = input.disabled) != null ? _a : false;
+      },
+      reportValidity: (input) => typeof input.reportValidity === "function" ? input.reportValidity() : true,
+      // TODO: Decide if using unknown here is a good decision
+      setValue: (input, value) => input.value = value,
+      assumeInteractionOn: ["dsa-input"]
+    }, options);
+    this.handleFormData = this.handleFormData.bind(this);
+    this.handleFormSubmit = this.handleFormSubmit.bind(this);
+    this.handleFormReset = this.handleFormReset.bind(this);
+    this.reportFormValidity = this.reportFormValidity.bind(this);
+    this.handleInteraction = this.handleInteraction.bind(this);
+  }
+  hostConnected() {
+    const form = this.options.form(this.host);
+    if (form) {
+      this.attachForm(form);
+    }
+    interactions.set(this.host, []);
+    this.options.assumeInteractionOn.forEach((event) => {
+      this.host.addEventListener(event, this.handleInteraction);
+    });
+  }
+  hostDisconnected() {
+    this.detachForm();
+    interactions.delete(this.host);
+    this.options.assumeInteractionOn.forEach((event) => {
+      this.host.removeEventListener(event, this.handleInteraction);
+    });
+  }
+  hostUpdated() {
+    const form = this.options.form(this.host);
+    if (!form) {
+      this.detachForm();
+    }
+    if (form && this.form !== form) {
+      this.detachForm();
+      this.attachForm(form);
+    }
+    if (this.host.hasUpdated) {
+      this.setValidity(this.host.validity.valid);
+    }
+  }
+  attachForm(form) {
+    if (form) {
+      this.form = form;
+      if (formCollections.has(this.form)) {
+        formCollections.get(this.form).add(this.host);
+      } else {
+        formCollections.set(
+          this.form,
+          /* @__PURE__ */ new Set([this.host])
+        );
+      }
+      this.form.addEventListener("formdata", this.handleFormData);
+      this.form.addEventListener("submit", this.handleFormSubmit);
+      this.form.addEventListener("reset", this.handleFormReset);
+      if (!reportValidityOverloads.has(this.form)) {
+        reportValidityOverloads.set(this.form, this.form.reportValidity);
+        this.form.reportValidity = () => this.reportFormValidity();
+      }
+    } else {
+      this.form = void 0;
+    }
+  }
+  detachForm() {
+    var _a;
+    if (this.form) {
+      (_a = formCollections.get(this.form)) == null ? void 0 : _a.delete(this.host);
+      this.form.removeEventListener("formdata", this.handleFormData);
+      this.form.removeEventListener("submit", this.handleFormSubmit);
+      this.form.removeEventListener("reset", this.handleFormReset);
+      if (reportValidityOverloads.has(this.form)) {
+        this.form.reportValidity = reportValidityOverloads.get(this.form);
+        reportValidityOverloads.delete(this.form);
+      }
+    }
+    this.form = void 0;
+  }
+  handleFormData(event) {
+    const disabled = this.options.disabled(this.host);
+    const name = this.options.name(this.host);
+    const value = this.options.value(this.host);
+    const isButton = this.host.tagName.toLowerCase() === "dsa-button";
+    const isFileUpload = this.host.tagName.toLowerCase() === "dsa-file-upload";
+    if (!disabled && !isButton && typeof name === "string" && name.length > 0 && typeof value !== "undefined") {
+      if (isFileUpload) {
+        if (Array.isArray(value)) {
+          value.forEach((file) => {
+            event.formData.append(name, file);
+          });
+        } else {
+          event.formData.append(name, value);
+        }
+        return;
+      }
+      if (Array.isArray(value)) {
+        value.forEach((val) => {
+          event.formData.append(
+            name,
+            val.toString()
+          );
+        });
+      } else {
+        event.formData.append(
+          name,
+          value.toString()
+        );
+      }
+    }
+  }
+  handleFormSubmit(event) {
+    var _a;
+    const disabled = this.options.disabled(this.host);
+    const reportValidity = this.options.reportValidity;
+    if (this.form && !this.form.noValidate) {
+      (_a = formCollections.get(this.form)) == null ? void 0 : _a.forEach((control) => {
+        this.setUserInteracted(control, true);
+      });
+    }
+    if (this.form && !this.form.noValidate && !disabled && !reportValidity(this.host)) {
+      event.preventDefault();
+      event.stopImmediatePropagation();
+    }
+  }
+  handleFormReset() {
+    this.options.setValue(this.host, this.options.defaultValue(this.host));
+    this.setUserInteracted(this.host, false);
+    interactions.set(this.host, []);
+  }
+  handleInteraction(event) {
+    const emittedEvents = interactions.get(this.host);
+    if (!emittedEvents.includes(event.type)) {
+      emittedEvents.push(event.type);
+    }
+    if (emittedEvents.length === this.options.assumeInteractionOn.length) {
+      this.setUserInteracted(this.host, true);
+    }
+  }
+  reportFormValidity() {
+    if (this.form && !this.form.noValidate) {
+      const elements = this.form.querySelectorAll("*");
+      for (const element of elements) {
+        if (typeof element.reportValidity === "function") {
+          if (!element.reportValidity()) {
+            return false;
+          }
+        }
+      }
+    }
+    return true;
+  }
+  setUserInteracted(el, hasInteracted) {
+    if (hasInteracted) {
+      userInteractedControls.add(el);
+    } else {
+      userInteractedControls.delete(el);
+    }
+    el.requestUpdate();
+  }
+  doAction(type, submitter) {
+    if (this.form) {
+      const button = document.createElement("button");
+      button.type = type;
+      button.style.position = "absolute";
+      button.style.width = "0";
+      button.style.height = "0";
+      button.style.clipPath = "inset(50%)";
+      button.style.overflow = "hidden";
+      button.style.whiteSpace = "nowrap";
+      if (submitter) {
+        button.name = submitter.name;
+        button.value = submitter.value;
+        [
+          "formaction",
+          "formenctype",
+          "formmethod",
+          "formnovalidate",
+          "formtarget"
+        ].forEach((attr) => {
+          if (submitter.hasAttribute(attr)) {
+            button.setAttribute(attr, submitter.getAttribute(attr));
+          }
+        });
+      }
+      this.form.append(button);
+      button.click();
+      button.remove();
+    }
+  }
+  /** Returns the associated `<form>` element, if one exists. */
+  getForm() {
+    var _a;
+    return (_a = this.form) != null ? _a : null;
+  }
+  /** Resets the form, restoring all the control to their default value */
+  reset(submitter) {
+    this.doAction("reset", submitter);
+  }
+  /** Submits the form, triggering validation and form data injection. */
+  submit(submitter) {
+    this.doAction("submit", submitter);
+  }
+  /**
+   * Synchronously sets the form control's validity. Call this when you know the future validity but need to update
+   * the host element immediately, i.e. before Lit updates the component in the next update.
+   */
+  setValidity(isValid) {
+    const host = this.host;
+    const hasInteracted = Boolean(userInteractedControls.has(host));
+    const required = Boolean(host.required);
+    host.toggleAttribute("data-required", required);
+    host.toggleAttribute("data-optional", !required);
+    host.toggleAttribute("data-invalid", !isValid);
+    host.toggleAttribute("data-valid", isValid);
+    host.toggleAttribute("data-user-invalid", !isValid && hasInteracted);
+    host.toggleAttribute("data-user-valid", isValid && hasInteracted);
+  }
+  /**
+   * Updates the form control's validity based on the current value of `host.validity.valid`. Call this when anything
+   * that affects constraint validation changes so the component receives the correct validity states.
+   */
+  updateValidity() {
+    const host = this.host;
+    this.setValidity(host.validity.valid);
+  }
+  /**
+   * Dispatches a non-bubbling, cancelable custom event of type `dsa-invalid`.
+   * If the `dsa-invalid` event will be cancelled then the original `invalid`
+   * event (which may have been passed as argument) will also be cancelled.
+   * If no original `invalid` event has been passed then the `dsa-invalid`
+   * event will be cancelled before being dispatched.
+   */
+  emitInvalidEvent(originalInvalidEvent) {
+    const slInvalidEvent = new CustomEvent(
+      "dsa-invalid",
+      {
+        bubbles: false,
+        composed: false,
+        cancelable: true,
+        detail: {}
+      }
+    );
+    if (!originalInvalidEvent) {
+      slInvalidEvent.preventDefault();
+    }
+    if (!this.host.dispatchEvent(slInvalidEvent)) {
+      originalInvalidEvent == null ? void 0 : originalInvalidEvent.preventDefault();
+    }
+  }
+};
+var validValidityState = Object.freeze({
+  badInput: false,
+  customError: false,
+  patternMismatch: false,
+  rangeOverflow: false,
+  rangeUnderflow: false,
+  stepMismatch: false,
+  tooLong: false,
+  tooShort: false,
+  typeMismatch: false,
+  valid: true,
+  valueMissing: false
+});
+var valueMissingValidityState = Object.freeze(__spreadProps(__spreadValues({}, validValidityState), {
+  valid: false,
+  valueMissing: true
+}));
+var customErrorValidityState = Object.freeze(__spreadProps(__spreadValues({}, validValidityState), {
+  valid: false,
+  customError: true
+}));
+
+export {
+  formCollections,
+  FormControlController,
+  validValidityState,
+  valueMissingValidityState,
+  customErrorValidityState
+};

package/cdn/chunks/chunk.HBXPRZYC.js

@@ -0,0 +1,147 @@
+import {
+  component_styles_default
+} from "./chunk.B5IB4265.js";
+import {
+  i
+} from "./chunk.R7BJEFEU.js";
+
+// src/components/footer/footer.styles.ts
+var footer_styles_default = i`
+  ${component_styles_default}
+
+  :host {
+    display: block;
+    --internal-footer-padding-inline: var(
+      --footer-padding-inline,
+      var(--dsa-wc-footer-padding-x)
+    );
+  }
+
+  [part~='base'] {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    background: var(--dsa-wc-footer-background);
+    padding-block: var(--dsa-wc-footer-padding-y);
+    padding-inline: var(--internal-footer-padding-inline);
+  }
+
+  [part~='footer-top'],
+  .footer-top-divider,
+  [part~='footer-center'],
+  .footer-center-divider,
+  [part~='footer-bottom-container'] {
+    width: 100%;
+    /* stylelint-disable-next-line */
+    max-width: var(--footer-max-width);
+  }
+
+  /* Dividers */
+  dsa-divider {
+    --spacing-start: var(--dsa-wc-footer-divider-spacing);
+    --spacing-end: var(--dsa-wc-footer-divider-spacing);
+  }
+
+  .footer-top-divider {
+    display: none;
+  }
+
+  .footer--has-top-section .footer-top-divider {
+    display: block;
+  }
+
+  .footer-center-divider {
+    display: none;
+  }
+
+  .footer--has-center-section .footer-center-divider {
+    display: block;
+  }
+
+  [part~='footer-top'] {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: var(--dsa-wc-footer-top-spacing);
+  }
+
+  [part~='footer-top']::slotted(*) {
+    grid-column: span 2;
+  }
+
+  [part~='footer-center'] {
+    display: block;
+  }
+
+  [part~='footer-bottom-container'] {
+    display: flex;
+    flex-direction: column;
+    gap: var(--dsa-wc-footer-bottom-spacing);
+  }
+
+  .footer-logos {
+    display: flex;
+    gap: var(--dsa-spacing-32);
+    align-items: flex-start;
+  }
+
+  .logo {
+    display: flex;
+    justify-content: center;
+  }
+
+  /* Mobile-specific styles */
+
+  .footer--mobile .logo {
+    width: var(--dsa-wc-footer-logo-width-mobile);
+    height: var(--dsa-wc-footer-logo-height-mobile);
+  }
+
+  /* Desktop-specific styles */
+
+  .footer--desktop {
+    --internal-footer-padding-inline: var(
+      --footer-padding-inline,
+      var(--dsa-wc-footer-medium-padding-x)
+    );
+  }
+
+  .footer--desktop [part~='base'] {
+    padding-block: var(--dsa-wc-footer-medium-padding-y);
+  }
+
+  .footer--desktop [part~='footer-top'] {
+    grid-template-columns: repeat(8, 1fr);
+  }
+
+  .footer--desktop [part~='footer-bottom-container'] {
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  .footer--desktop .logo {
+    width: var(--dsa-wc-footer-logo-width-desktop);
+    height: var(--dsa-wc-footer-logo-height-desktop);
+  }
+
+  @media only screen and (min-width: 1440px) {
+    :host {
+      --internal-footer-padding-inline: var(
+        --footer-padding-inline,
+        var(--dsa-wc-footer-x-large-padding-x)
+      );
+    }
+
+    [part~='base'] {
+      padding-block: var(--dsa-wc-footer-x-large-padding-y);
+    }
+
+    [part~='footer-top'] {
+      grid-template-columns: repeat(12, 1fr);
+    }
+  }
+`;
+
+export {
+  footer_styles_default
+};

package/cdn/chunks/chunk.HCKHVMVB.js

@@ -0,0 +1,94 @@
+import {
+  component_styles_default
+} from "./chunk.B5IB4265.js";
+import {
+  i
+} from "./chunk.R7BJEFEU.js";
+
+// src/components/menu-accordion/menu-accordion.styles.ts
+var menu_accordion_styles_default = i`
+  ${component_styles_default}
+
+  :host {
+    display: block;
+  }
+
+  .menu-accordion {
+    font: var(--dsa-wc-menu-accordion-font-closed);
+    color: var(--dsa-wc-menu-accordion-color-closed);
+    overflow-anchor: none;
+  }
+  .menu-accordion.menu-accordion--level-2 {
+    font: var(--dsa-wc-menu-accordion-level-2-font-closed);
+  }
+  .menu-accordion.menu-accordion--open {
+    font: var(--dsa-wc-menu-accordion-font-open);
+    color: var(--dsa-wc-menu-accordion-color-open);
+  }
+  .menu-accordion.menu-accordion--level-2.menu-accordion--open {
+    font: var(--dsa-wc-menu-accordion-level-2-font-open);
+  }
+
+  .menu-accordion__header-button {
+    display: flex;
+    align-items: center;
+    border-radius: inherit;
+    padding: var(--dsa-wc-menu-accordion-button-padding);
+    user-select: none;
+    cursor: pointer;
+  }
+  .menu-accordion--level-2 .menu-accordion__header-button {
+    padding-inline-start: var(--dsa-spacing-24);
+  }
+
+  .menu-accordion__header:focus-within :focus:focus-visible {
+    outline: var(--dsa-wc-focus-ring);
+    outline-offset: var(--dsa-wc-menu-accordion-button-focus-ring-offset);
+  }
+  .menu-accordion__header-button:hover {
+    background-color: var(--dsa-wc-accordion-header-hover-background-color);
+    color: var(--dsa-wc-menu-accordion-color-hover);
+  }
+
+  .menu-accordion__header-button:not(.menu-accordion--open):focus-visible {
+    outline: none;
+  }
+
+  .menu-accordion__summary {
+    flex: 1 1 auto;
+    display: flex;
+    align-items: center;
+  }
+
+  .menu-accordion__summary-icon {
+    flex: 0 0 auto;
+    display: flex;
+    align-items: center;
+    transition: var(--dsa-wc-transition-medium) rotate ease;
+  }
+
+  .menu-accordion--open.menu-accordion--chevron .menu-accordion__summary-icon {
+    rotate: 180deg;
+  }
+
+  .menu-accordion__body {
+    overflow: hidden;
+  }
+
+  .menu-accordion__content {
+    display: block;
+  }
+
+  ::slotted(dsa-menu-navigation) {
+    border: none;
+    border-radius: 0;
+    padding: 0;
+  }
+  .menu-accordion--level-2 ::slotted(dsa-menu-navigation) {
+    background-color: var(--dsa-color-primitive-colors-neutral-200);
+  }
+`;
+
+export {
+  menu_accordion_styles_default
+};

package/cdn/chunks/chunk.HG3KIBKS.js

@@ -0,0 +1,95 @@
+import {
+  download_link_styles_default
+} from "./chunk.ZFXIELL7.js";
+import {
+  e2 as e
+} from "./chunk.A2REDF56.js";
+import {
+  ShoelaceElement,
+  n,
+  t
+} from "./chunk.JIQUSHGZ.js";
+import {
+  x
+} from "./chunk.7HUC6BF3.js";
+import {
+  __decorateClass
+} from "./chunk.4ZGVANML.js";
+
+// src/components/download-link/download-link.ts
+var DSADownloadLink = class extends ShoelaceElement {
+  constructor() {
+    super(...arguments);
+    this.variant = "base";
+    this.size = "medium";
+  }
+  handleFocus() {
+    this.emit("dsa-focus");
+  }
+  handleBlur() {
+    this.emit("dsa-blur");
+  }
+  render() {
+    return x`
+      <a
+        part="link"
+        class=${e({
+      link: true,
+      "link--on-layer": this.variant === "layer",
+      "link--on-contrasted": this.variant === "contrasted",
+      "link--floating-menu": this.variant === "floating",
+      "document-link--x-large": this.size === "xlarge",
+      "document-link--large": this.size === "large",
+      "document-link--medium": this.size === "medium",
+      "document-link--small": this.size === "small",
+      "document-link--x-small": this.size === "xsmall",
+      "document-link--2x-small": this.size === "2xsmall"
+    })}
+        download=${this.filename}
+        href=${this.href}
+        @focus=${this.handleFocus}
+        @blur=${this.handleBlur}
+      >
+        <slot></slot>
+        <dsa-icon name="download" library="system"></dsa-icon>
+        <p
+          id="document-info"
+          class=${e({
+      "document-info": true,
+      "document-info--on-layer": this.variant === "layer",
+      "document-info--on-contrasted": this.variant === "contrasted",
+      "document-info--floating-menu": this.variant === "floating"
+    })}
+        >
+          ${this.format}${this.format && this.documentSize ? " - " : ""}${this.documentSize}
+        </p>
+      </a>
+    `;
+  }
+};
+DSADownloadLink.styles = download_link_styles_default;
+__decorateClass([
+  n()
+], DSADownloadLink.prototype, "href", 2);
+__decorateClass([
+  n()
+], DSADownloadLink.prototype, "format", 2);
+__decorateClass([
+  n({ attribute: "documentsize" })
+], DSADownloadLink.prototype, "documentSize", 2);
+__decorateClass([
+  n()
+], DSADownloadLink.prototype, "variant", 2);
+__decorateClass([
+  n()
+], DSADownloadLink.prototype, "size", 2);
+__decorateClass([
+  n()
+], DSADownloadLink.prototype, "filename", 2);
+DSADownloadLink = __decorateClass([
+  t("dsa-download-link")
+], DSADownloadLink);
+
+export {
+  DSADownloadLink
+};

package/cdn/chunks/chunk.HKSZDW6A.js

@@ -0,0 +1,58 @@
+import {
+  ShoelaceElement,
+  t
+} from "./chunk.JIQUSHGZ.js";
+import {
+  component_styles_default
+} from "./chunk.B5IB4265.js";
+import {
+  i
+} from "./chunk.R7BJEFEU.js";
+import {
+  x
+} from "./chunk.7HUC6BF3.js";
+import {
+  __decorateClass
+} from "./chunk.4ZGVANML.js";
+
+// src/components/header-external-link/header-external-link.style.ts
+var header_external_link_style_default = i`
+  ${component_styles_default}
+
+  :host {
+    display: inline-flex;
+  }
+
+  dsa-divider {
+    --spacing-start: var(--dsa-spacing-24);
+    --spacing-end: var(--dsa-spacing-24);
+  }
+
+  :host(:last-of-type) dsa-divider {
+    display: none;
+  }
+`;
+
+// src/components/header-external-link/header-external-link.ts
+var DSAHeaderExternalLink = class extends ShoelaceElement {
+  connectedCallback() {
+    super.connectedCallback();
+    if (!this.hasAttribute("role")) {
+      this.setAttribute("role", "listitem");
+    }
+  }
+  render() {
+    return x`
+      <slot></slot>
+      <dsa-divider vertical></dsa-divider>
+    `;
+  }
+};
+DSAHeaderExternalLink.styles = header_external_link_style_default;
+DSAHeaderExternalLink = __decorateClass([
+  t("dsa-header-external-link")
+], DSAHeaderExternalLink);
+
+export {
+  DSAHeaderExternalLink
+};