@ds-autonomie/web-components 1.0.1

package/dist/chunks/chunk.ABGBXXKA.js

@@ -0,0 +1,164 @@
+import {
+  menu_item_styles_default
+} from "./chunk.NKKVGICB.js";
+import {
+  getTextContent
+} from "./chunk.YIY5RM53.js";
+import {
+  watch
+} from "./chunk.D7CATJYB.js";
+import {
+  ShoelaceElement
+} from "./chunk.YCXTCVAZ.js";
+import {
+  __decorateClass
+} from "./chunk.6M63UXML.js";
+
+// src/components/menu-item/menu-item.ts
+import { html } from "lit";
+import { customElement, property, query } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.js";
+var DSAMenuItem = class extends ShoelaceElement {
+  constructor() {
+    super(...arguments);
+    this.type = "normal";
+    this.size = "medium";
+    this.checked = false;
+    this.value = "";
+    this.disabled = false;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.handleHostClick = this.handleHostClick.bind(this);
+    this.addEventListener("click", this.handleHostClick);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.removeEventListener("click", this.handleHostClick);
+  }
+  handleDefaultSlotChange() {
+    const textLabel = this.getTextLabel();
+    if (typeof this.cachedTextLabel === "undefined") {
+      this.cachedTextLabel = textLabel;
+      return;
+    }
+    if (textLabel !== this.cachedTextLabel) {
+      this.cachedTextLabel = textLabel;
+      this.emit("slotchange", {
+        bubbles: true,
+        composed: false,
+        cancelable: false
+      });
+    }
+  }
+  handleHostClick(event) {
+    if (this.disabled) {
+      event.preventDefault();
+      event.stopImmediatePropagation();
+    }
+  }
+  handleCheckedChange() {
+    if (this.checked && this.type !== "checkbox") {
+      this.checked = false;
+      console.error(
+        'The checked attribute can only be used on menu items with type="checkbox"',
+        this
+      );
+      return;
+    }
+    if (this.type === "checkbox") {
+      this.setAttribute("aria-checked", this.checked ? "true" : "false");
+    } else {
+      this.removeAttribute("aria-checked");
+    }
+  }
+  handleDisabledChange() {
+    this.setAttribute("aria-disabled", this.disabled ? "true" : "false");
+  }
+  handleTypeChange() {
+    if (this.type === "checkbox") {
+      this.setAttribute("role", "menuitemcheckbox");
+      this.setAttribute("aria-checked", this.checked ? "true" : "false");
+    } else {
+      this.setAttribute("role", "menuitem");
+      this.removeAttribute("aria-checked");
+    }
+  }
+  /** Returns a text label based on the contents of the menu item's default slot. */
+  getTextLabel() {
+    return getTextContent(this.defaultSlot);
+  }
+  render() {
+    return html`
+      <div
+        part="base"
+        class=${classMap({
+      "menu-item": true,
+      "menu-item--small": this.size === "small",
+      "menu-item--medium": this.size === "medium",
+      "menu-item--large": this.size === "large",
+      "menu-item--checked": this.checked,
+      "menu-item--disabled": this.disabled,
+      "menu-item--has-submenu": false
+      // reserved for future use
+    })}
+      >
+        <span part="checked-icon" class="menu-item__check">
+          <dsa-icon name="check" aria-hidden="true"></dsa-icon>
+        </span>
+
+        <slot name="prefix" part="prefix" class="menu-item__prefix"></slot>
+
+        <slot
+          part="label"
+          class="menu-item__label"
+          @slotchange=${this.handleDefaultSlotChange}
+        ></slot>
+
+        <slot name="suffix" part="suffix" class="menu-item__suffix"></slot>
+
+        <span class="menu-item__chevron">
+          <dsa-icon name="chevron_right" aria-hidden="true"></dsa-icon>
+        </span>
+      </div>
+    `;
+  }
+};
+DSAMenuItem.styles = menu_item_styles_default;
+__decorateClass([
+  query("slot:not([name])")
+], DSAMenuItem.prototype, "defaultSlot", 2);
+__decorateClass([
+  query(".menu-item")
+], DSAMenuItem.prototype, "menuItem", 2);
+__decorateClass([
+  property()
+], DSAMenuItem.prototype, "type", 2);
+__decorateClass([
+  property({ reflect: true })
+], DSAMenuItem.prototype, "size", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], DSAMenuItem.prototype, "checked", 2);
+__decorateClass([
+  property()
+], DSAMenuItem.prototype, "value", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], DSAMenuItem.prototype, "disabled", 2);
+__decorateClass([
+  watch("checked")
+], DSAMenuItem.prototype, "handleCheckedChange", 1);
+__decorateClass([
+  watch("disabled")
+], DSAMenuItem.prototype, "handleDisabledChange", 1);
+__decorateClass([
+  watch("type")
+], DSAMenuItem.prototype, "handleTypeChange", 1);
+DSAMenuItem = __decorateClass([
+  customElement("dsa-menu-item")
+], DSAMenuItem);
+
+export {
+  DSAMenuItem
+};

package/dist/chunks/chunk.AQRNB4GJ.js

@@ -0,0 +1,33 @@
+import {
+  divider_styles_default
+} from "./chunk.RY4QCT3T.js";
+import {
+  ShoelaceElement
+} from "./chunk.YCXTCVAZ.js";
+import {
+  __decorateClass
+} from "./chunk.6M63UXML.js";
+
+// src/components/divider/divider.ts
+import { customElement, property } from "lit/decorators.js";
+var DSADivider = class extends ShoelaceElement {
+  constructor() {
+    super(...arguments);
+    this.vertical = false;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.setAttribute("role", "none");
+  }
+};
+DSADivider.styles = divider_styles_default;
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], DSADivider.prototype, "vertical", 2);
+DSADivider = __decorateClass([
+  customElement("dsa-divider")
+], DSADivider);
+
+export {
+  DSADivider
+};

package/dist/chunks/chunk.AR5HJD7F.js

@@ -0,0 +1,111 @@
+import {
+  mutation_observer_styles_default
+} from "./chunk.YZHDFJWJ.js";
+import {
+  watch
+} from "./chunk.D7CATJYB.js";
+import {
+  ShoelaceElement
+} from "./chunk.YCXTCVAZ.js";
+import {
+  __decorateClass
+} from "./chunk.6M63UXML.js";
+
+// src/components/mutation-observer/mutation-observer.ts
+import { html } from "lit";
+import { customElement, property } from "lit/decorators.js";
+var DSAMutationObserver = class extends ShoelaceElement {
+  constructor() {
+    super(...arguments);
+    this.attrOldValue = false;
+    this.charData = false;
+    this.charDataOldValue = false;
+    this.childList = false;
+    this.disabled = false;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.handleMutation = this.handleMutation.bind(this);
+    this.mutationObserver = new MutationObserver(this.handleMutation);
+    if (!this.disabled) {
+      this.startObserver();
+    }
+  }
+  disconnectedCallback() {
+    this.stopObserver();
+  }
+  handleMutation(mutationList) {
+    this.emit("dsa-mutation", {
+      detail: { mutationList }
+    });
+  }
+  startObserver() {
+    const observeAttributes = typeof this.attr === "string" && this.attr.length > 0;
+    const attributeFilter = observeAttributes && this.attr !== "*" ? this.attr.split(" ") : void 0;
+    try {
+      this.mutationObserver.observe(this, {
+        subtree: true,
+        childList: this.childList,
+        attributes: observeAttributes,
+        attributeFilter,
+        attributeOldValue: this.attrOldValue,
+        characterData: this.charData,
+        characterDataOldValue: this.charDataOldValue
+      });
+    } catch (e) {
+    }
+  }
+  stopObserver() {
+    this.mutationObserver.disconnect();
+  }
+  handleDisabledChange() {
+    if (this.disabled) {
+      this.stopObserver();
+    } else {
+      this.startObserver();
+    }
+  }
+  handleChange() {
+    this.stopObserver();
+    this.startObserver();
+  }
+  render() {
+    return html` <slot></slot> `;
+  }
+};
+DSAMutationObserver.styles = mutation_observer_styles_default;
+__decorateClass([
+  property({ reflect: true })
+], DSAMutationObserver.prototype, "attr", 2);
+__decorateClass([
+  property({ attribute: "attr-old-value", type: Boolean, reflect: true })
+], DSAMutationObserver.prototype, "attrOldValue", 2);
+__decorateClass([
+  property({ attribute: "char-data", type: Boolean, reflect: true })
+], DSAMutationObserver.prototype, "charData", 2);
+__decorateClass([
+  property({ attribute: "char-data-old-value", type: Boolean, reflect: true })
+], DSAMutationObserver.prototype, "charDataOldValue", 2);
+__decorateClass([
+  property({ attribute: "child-list", type: Boolean, reflect: true })
+], DSAMutationObserver.prototype, "childList", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], DSAMutationObserver.prototype, "disabled", 2);
+__decorateClass([
+  watch("disabled")
+], DSAMutationObserver.prototype, "handleDisabledChange", 1);
+__decorateClass([
+  watch("attr", { waitUntilFirstUpdate: true }),
+  watch("attr-old-value", { waitUntilFirstUpdate: true }),
+  watch("char-data", { waitUntilFirstUpdate: true }),
+  watch("char-data-old-value", { waitUntilFirstUpdate: true }),
+  watch("childList", { waitUntilFirstUpdate: true })
+], DSAMutationObserver.prototype, "handleChange", 1);
+DSAMutationObserver = __decorateClass([
+  customElement("dsa-mutation-observer")
+], DSAMutationObserver);
+
+export {
+  DSAMutationObserver
+};

package/dist/chunks/chunk.B4BZKR24.js

@@ -0,0 +1,16 @@
+// src/internal/event.ts
+function waitForEvent(el, eventName) {
+  return new Promise((resolve) => {
+    function done(event) {
+      if (event.target === el) {
+        el.removeEventListener(eventName, done);
+        resolve();
+      }
+    }
+    el.addEventListener(eventName, done);
+  });
+}
+
+export {
+  waitForEvent
+};

package/dist/chunks/chunk.BD63GRU5.js

@@ -0,0 +1,132 @@
+import {
+  menu_styles_default
+} from "./chunk.OBU65KDL.js";
+import {
+  ShoelaceElement
+} from "./chunk.YCXTCVAZ.js";
+import {
+  __decorateClass
+} from "./chunk.6M63UXML.js";
+
+// src/components/menu/menu.ts
+import { html } from "lit";
+import { customElement, query } from "lit/decorators.js";
+var DSAMenu = class extends ShoelaceElement {
+  connectedCallback() {
+    super.connectedCallback();
+    this.setAttribute("role", "menu");
+  }
+  handleClick(event) {
+    const target = event.target;
+    const item = target.closest("dsa-menu-item");
+    if (!item || item.disabled || item.inert) {
+      return;
+    }
+    if (item.type === "checkbox") {
+      item.checked = !item.checked;
+    }
+    this.emit("dsa-select", { detail: { item } });
+  }
+  handleKeyDown(event) {
+    if (event.key === "Enter") {
+      const item = this.getCurrentItem();
+      event.preventDefault();
+      item == null ? void 0 : item.click();
+    }
+    if (event.key === " ") {
+      event.preventDefault();
+    }
+    if (["ArrowDown", "ArrowUp", "Home", "End"].includes(event.key)) {
+      const items = this.getAllItems();
+      const activeItem = this.getCurrentItem();
+      let index = activeItem ? items.indexOf(activeItem) : 0;
+      if (items.length > 0) {
+        event.preventDefault();
+        if (event.key === "ArrowDown") {
+          index++;
+        } else if (event.key === "ArrowUp") {
+          index--;
+        } else if (event.key === "Home") {
+          index = 0;
+        } else if (event.key === "End") {
+          index = items.length - 1;
+        }
+        if (index < 0) {
+          index = items.length - 1;
+        }
+        if (index > items.length - 1) {
+          index = 0;
+        }
+        this.setCurrentItem(items[index]);
+        items[index].focus();
+      }
+    }
+  }
+  handleMouseDown(event) {
+    const target = event.target;
+    if (this.isMenuItem(target)) {
+      this.setCurrentItem(target);
+    }
+  }
+  handleSlotChange() {
+    const items = this.getAllItems();
+    if (items.length > 0) {
+      this.setCurrentItem(items[0]);
+    }
+  }
+  isMenuItem(item) {
+    var _a;
+    return item.tagName.toLowerCase() === "dsa-menu-item" || ["menuitem", "menuitemcheckbox", "menuitemradio"].includes(
+      (_a = item.getAttribute("role")) != null ? _a : ""
+    );
+  }
+  /** @internal Gets all slotted menu items, ignoring dividers, headers, and other elements. */
+  getAllItems() {
+    return [...this.defaultSlot.assignedElements({ flatten: true })].filter(
+      (el) => {
+        if (el instanceof HTMLElement && (el.inert || !this.isMenuItem(el))) {
+          return false;
+        }
+        return true;
+      }
+    );
+  }
+  /**
+   * @internal Gets the current menu item, which is the menu item that has `tabindex="0"` within the roving tab index.
+   * The menu item may or may not have focus, but for keyboard interaction purposes it's considered the "active" item.
+   */
+  getCurrentItem() {
+    return this.getAllItems().find((i) => i.getAttribute("tabindex") === "0");
+  }
+  /**
+   * @internal Sets the current menu item to the specified element. This sets `tabindex="0"` on the target element and
+   * `tabindex="-1"` to all other items. This method must be called prior to setting focus on a menu item.
+   */
+  setCurrentItem(item) {
+    const items = this.getAllItems();
+    items.forEach((i) => {
+      i.setAttribute("tabindex", i === item ? "0" : "-1");
+    });
+  }
+  render() {
+    return html`
+      <slot
+        @slotchange=${this.handleSlotChange}
+        @click=${this.handleClick}
+        @keydown=${this.handleKeyDown}
+        @mousedown=${this.handleMouseDown}
+      ></slot>
+    `;
+  }
+};
+DSAMenu.styles = menu_styles_default;
+__decorateClass([
+  query("slot")
+], DSAMenu.prototype, "defaultSlot", 2);
+DSAMenu = __decorateClass([
+  customElement("dsa-menu")
+], DSAMenu);
+
+export {
+  DSAMenu
+};