@ds-autonomie/web-components 1.0.1

package/dist/chunks/chunk.JETXIC4F.js

@@ -0,0 +1,150 @@
+import {
+  radio_styles_default
+} from "./chunk.VFYKLPN2.js";
+import {
+  watch
+} from "./chunk.D7CATJYB.js";
+import {
+  ShoelaceElement
+} from "./chunk.YCXTCVAZ.js";
+import {
+  __decorateClass
+} from "./chunk.6M63UXML.js";
+
+// src/components/radio/radio.ts
+import { html } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.js";
+var DSARadio = class extends ShoelaceElement {
+  constructor() {
+    super(...arguments);
+    this.checked = false;
+    this.hasFocus = false;
+    this.size = "medium";
+    this.disabled = false;
+    this.error = false;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.handleBlur = this.handleBlur.bind(this);
+    this.handleClick = this.handleClick.bind(this);
+    this.handleFocus = this.handleFocus.bind(this);
+    this.setInitialAttributes();
+    this.addEventListeners();
+  }
+  disconnectedCallback() {
+    this.removeEventListeners();
+  }
+  addEventListeners() {
+    this.addEventListener("blur", this.handleBlur);
+    this.addEventListener("click", this.handleClick);
+    this.addEventListener("focus", this.handleFocus);
+  }
+  removeEventListeners() {
+    this.removeEventListener("blur", this.handleBlur);
+    this.removeEventListener("click", this.handleClick);
+    this.removeEventListener("focus", this.handleFocus);
+  }
+  handleBlur() {
+    this.hasFocus = false;
+    this.emit("dsa-blur");
+  }
+  handleClick() {
+    if (!this.disabled) {
+      this.checked = true;
+    }
+  }
+  handleFocus() {
+    this.hasFocus = true;
+    this.emit("dsa-focus");
+  }
+  setInitialAttributes() {
+    this.setAttribute("role", "radio");
+    this.setAttribute("aria-disabled", this.disabled ? "true" : "false");
+  }
+  handleCheckedChange() {
+    this.setAttribute("aria-checked", this.checked ? "true" : "false");
+  }
+  handleDisabledChange() {
+    this.setAttribute("aria-disabled", this.disabled ? "true" : "false");
+  }
+  handleErrorChange() {
+    if (this.error) {
+      this.setAttribute("aria-invalid", "true");
+    } else {
+      this.removeAttribute("aria-invalid");
+    }
+  }
+  render() {
+    return html`
+      <span
+        part="base"
+        class=${classMap({
+      radio: true,
+      "radio--checked": this.checked,
+      "radio--disabled": this.disabled,
+      "radio--focused": this.hasFocus,
+      "radio--small": this.size === "small",
+      "radio--medium": this.size === "medium",
+      "radio--large": this.size === "large"
+    })}
+      >
+        <span
+          part="${`control${this.checked ? " control--checked" : ""}`}"
+          class="radio__control"
+        >
+          ${this.checked ? html`
+                <dsa-icon
+                  part="checked-icon"
+                  class="radio__checked-icon"
+                  name="circle_filled"
+                ></dsa-icon>
+              ` : ""}
+        </span>
+
+        <slot
+          part="label"
+          class=${classMap({
+      radio__label: true,
+      "radio__label--error": this.error
+    })}
+        ></slot>
+      </span>
+    `;
+  }
+};
+DSARadio.styles = radio_styles_default;
+__decorateClass([
+  state()
+], DSARadio.prototype, "checked", 2);
+__decorateClass([
+  state()
+], DSARadio.prototype, "hasFocus", 2);
+__decorateClass([
+  property()
+], DSARadio.prototype, "value", 2);
+__decorateClass([
+  property({ reflect: true })
+], DSARadio.prototype, "size", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], DSARadio.prototype, "disabled", 2);
+__decorateClass([
+  property({ type: Boolean })
+], DSARadio.prototype, "error", 2);
+__decorateClass([
+  watch("checked")
+], DSARadio.prototype, "handleCheckedChange", 1);
+__decorateClass([
+  watch("disabled", { waitUntilFirstUpdate: true })
+], DSARadio.prototype, "handleDisabledChange", 1);
+__decorateClass([
+  watch("error")
+], DSARadio.prototype, "handleErrorChange", 1);
+DSARadio = __decorateClass([
+  customElement("dsa-radio")
+], DSARadio);
+
+export {
+  DSARadio
+};

package/dist/chunks/chunk.JT7UJED5.js

@@ -0,0 +1,33 @@
+import {
+  form_control_styles_default
+} from "./chunk.3RBCYA4F.js";
+import {
+  component_styles_default
+} from "./chunk.TUVJKY7S.js";
+
+// src/components/radio-group/radio-group.styles.ts
+import { css } from "lit";
+var radio_group_styles_default = css`
+  ${component_styles_default}
+  ${form_control_styles_default}
+
+  :host {
+    display: block;
+  }
+
+  .visually-hidden {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+  }
+`;
+
+export {
+  radio_group_styles_default
+};

package/dist/chunks/chunk.K6WCEYZI.js

@@ -0,0 +1,52 @@
+import {
+  spinner_styles_default
+} from "./chunk.S4ATPBQN.js";
+import {
+  LocalizeController
+} from "./chunk.5XL2LZLC.js";
+import {
+  ShoelaceElement
+} from "./chunk.YCXTCVAZ.js";
+import {
+  __decorateClass
+} from "./chunk.6M63UXML.js";
+
+// src/components/spinner/spinner.ts
+import { html } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.js";
+var DSASpinner = class extends ShoelaceElement {
+  constructor() {
+    super(...arguments);
+    this.localize = new LocalizeController(this);
+    this.variant = "base";
+  }
+  render() {
+    return html`
+      <svg
+        part="base"
+        class=${classMap({
+      spinner: true,
+      "spinner--on-base": this.variant === "base",
+      "spinner--on-floating": this.variant === "floating"
+    })}
+        role="progressbar"
+        aria-valuetext=${this.localize.term("loading")}
+      >
+        <circle class="spinner__track"></circle>
+        <circle class="spinner__indicator"></circle>
+      </svg>
+    `;
+  }
+};
+DSASpinner.styles = spinner_styles_default;
+__decorateClass([
+  property({ reflect: true })
+], DSASpinner.prototype, "variant", 2);
+DSASpinner = __decorateClass([
+  customElement("dsa-spinner")
+], DSASpinner);
+
+export {
+  DSASpinner
+};

package/dist/chunks/chunk.KBT2EKLF.js

@@ -0,0 +1,25 @@
+// src/components/input/input.utils.ts
+function isPrefixIconOverriden(type) {
+  return ["email", "password", "search"].includes(type);
+}
+var values = {
+  email: { iconName: "email", partName: "email-icon", ariaLabel: "email" },
+  password: {
+    iconName: "lock",
+    partName: "password-lock-icon",
+    ariaLabel: "password-lock"
+  },
+  search: {
+    iconName: "search",
+    partName: "search-icon",
+    ariaLabel: "search"
+  }
+};
+function getOverridenIconDetails(type) {
+  return values[type];
+}
+
+export {
+  isPrefixIconOverriden,
+  getOverridenIconDetails
+};

package/dist/chunks/chunk.KDAK2GXX.js

@@ -0,0 +1,58 @@
+import {
+  LocalizeController
+} from "./chunk.5XL2LZLC.js";
+import {
+  ShoelaceElement
+} from "./chunk.YCXTCVAZ.js";
+import {
+  __decorateClass
+} from "./chunk.6M63UXML.js";
+
+// src/components/format-bytes/format-bytes.ts
+import { customElement, property } from "lit/decorators.js";
+var DSAFormatBytes = class extends ShoelaceElement {
+  constructor() {
+    super(...arguments);
+    this.localize = new LocalizeController(this);
+    this.value = 0;
+    this.unit = "byte";
+    this.display = "short";
+  }
+  render() {
+    if (isNaN(this.value)) {
+      return "";
+    }
+    const bitPrefixes = ["", "kilo", "mega", "giga", "tera"];
+    const bytePrefixes = ["", "kilo", "mega", "giga", "tera", "peta"];
+    const prefix = this.unit === "bit" ? bitPrefixes : bytePrefixes;
+    const index = Math.max(
+      0,
+      Math.min(Math.floor(Math.log10(this.value) / 3), prefix.length - 1)
+    );
+    const unit = prefix[index] + this.unit;
+    const valueToFormat = parseFloat(
+      (this.value / Math.pow(1e3, index)).toPrecision(3)
+    );
+    return this.localize.number(valueToFormat, {
+      style: "unit",
+      unit,
+      unitDisplay: this.display
+    });
+  }
+};
+__decorateClass([
+  property({ type: Number })
+], DSAFormatBytes.prototype, "value", 2);
+__decorateClass([
+  property()
+], DSAFormatBytes.prototype, "unit", 2);
+__decorateClass([
+  property()
+], DSAFormatBytes.prototype, "display", 2);
+DSAFormatBytes = __decorateClass([
+  customElement("dsa-format-bytes")
+], DSAFormatBytes);
+
+export {
+  DSAFormatBytes
+};

package/dist/chunks/chunk.KHIMMW3T.js

@@ -0,0 +1,33 @@
+import {
+  avatar_group_styles_default
+} from "./chunk.XWUQFDIN.js";
+import {
+  ShoelaceElement
+} from "./chunk.YCXTCVAZ.js";
+import {
+  __decorateClass
+} from "./chunk.6M63UXML.js";
+
+// src/components/avatar-group/avatar-group.ts
+import { html } from "lit";
+import { customElement, query } from "lit/decorators.js";
+var DSAAvatarGroup = class extends ShoelaceElement {
+  render() {
+    return html`
+      <div part="base" class="avatar-group" role="group">
+        <slot></slot>
+      </div>
+    `;
+  }
+};
+DSAAvatarGroup.styles = avatar_group_styles_default;
+__decorateClass([
+  query("slot")
+], DSAAvatarGroup.prototype, "defaultSlot", 2);
+DSAAvatarGroup = __decorateClass([
+  customElement("dsa-avatar-group")
+], DSAAvatarGroup);
+
+export {
+  DSAAvatarGroup
+};

package/dist/chunks/chunk.KIFBWPW5.js

@@ -0,0 +1,298 @@
+import {
+  __spreadProps,
+  __spreadValues
+} from "./chunk.6M63UXML.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";
+    if (!disabled && !isButton && typeof name === "string" && name.length > 0 && typeof value !== "undefined") {
+      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
+};