@cordwainer/cw-elements 1.3.0-alpha.0 → 1.3.0-alpha.1

package/cdn/chunks/chunk.25HC2TNX.js

@@ -0,0 +1,113 @@
+import {
+  mutation_observer_styles_default
+} from "./chunk.UHWQVLAZ.js";
+import {
+  watch
+} from "./chunk.RB5L7E7Z.js";
+import {
+  component_styles_default
+} from "./chunk.NJIHXHXI.js";
+import {
+  CwElement,
+  n
+} from "./chunk.3ZEBFGMU.js";
+import {
+  b
+} from "./chunk.6A2LG33L.js";
+import {
+  __decorateClass
+} from "./chunk.QIOX6AG5.js";
+
+// src/components/mutation-observer/mutation-observer.component.ts
+var CwMutationObserver = class extends CwElement {
+  constructor() {
+    super(...arguments);
+    this.attrOldValue = false;
+    this.charData = false;
+    this.charDataOldValue = false;
+    this.childList = false;
+    this.disabled = false;
+    this.handleMutation = (mutationList) => {
+      this.emit("cw-mutation", {
+        detail: { mutationList }
+      });
+    };
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.mutationObserver = new MutationObserver(this.handleMutation);
+    if (!this.disabled) {
+      this.startObserver();
+    }
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.stopObserver();
+  }
+  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 b` <slot></slot> `;
+  }
+};
+CwMutationObserver.styles = [component_styles_default, mutation_observer_styles_default];
+__decorateClass([
+  n({ reflect: true })
+], CwMutationObserver.prototype, "attr", 2);
+__decorateClass([
+  n({ attribute: "attr-old-value", type: Boolean, reflect: true })
+], CwMutationObserver.prototype, "attrOldValue", 2);
+__decorateClass([
+  n({ attribute: "char-data", type: Boolean, reflect: true })
+], CwMutationObserver.prototype, "charData", 2);
+__decorateClass([
+  n({ attribute: "char-data-old-value", type: Boolean, reflect: true })
+], CwMutationObserver.prototype, "charDataOldValue", 2);
+__decorateClass([
+  n({ attribute: "child-list", type: Boolean, reflect: true })
+], CwMutationObserver.prototype, "childList", 2);
+__decorateClass([
+  n({ type: Boolean, reflect: true })
+], CwMutationObserver.prototype, "disabled", 2);
+__decorateClass([
+  watch("disabled")
+], CwMutationObserver.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 })
+], CwMutationObserver.prototype, "handleChange", 1);
+
+export {
+  CwMutationObserver
+};

package/cdn/chunks/chunk.2KVDB3GS.js

@@ -0,0 +1,186 @@
+import {
+  l
+} from "./chunk.H5L5Y6Q5.js";
+import {
+  icon_styles_default
+} from "./chunk.WEEMHBZO.js";
+import {
+  getIconLibrary,
+  unwatchIcon,
+  watchIcon
+} from "./chunk.XIIPR36B.js";
+import {
+  watch
+} from "./chunk.RB5L7E7Z.js";
+import {
+  component_styles_default
+} from "./chunk.NJIHXHXI.js";
+import {
+  CwElement,
+  n,
+  r
+} from "./chunk.3ZEBFGMU.js";
+import {
+  b
+} from "./chunk.6A2LG33L.js";
+import {
+  __decorateClass
+} from "./chunk.QIOX6AG5.js";
+
+// src/components/icon/icon.component.ts
+var CACHEABLE_ERROR = /* @__PURE__ */ Symbol();
+var RETRYABLE_ERROR = /* @__PURE__ */ Symbol();
+var parser;
+var iconCache = /* @__PURE__ */ new Map();
+var CwIcon = class extends CwElement {
+  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 = b`<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 (l(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("cw-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("cw-load");
+    }
+  }
+  render() {
+    return this.svg;
+  }
+};
+CwIcon.styles = [component_styles_default, icon_styles_default];
+__decorateClass([
+  r()
+], CwIcon.prototype, "svg", 2);
+__decorateClass([
+  n({ reflect: true })
+], CwIcon.prototype, "name", 2);
+__decorateClass([
+  n()
+], CwIcon.prototype, "src", 2);
+__decorateClass([
+  n()
+], CwIcon.prototype, "label", 2);
+__decorateClass([
+  n({ reflect: true })
+], CwIcon.prototype, "library", 2);
+__decorateClass([
+  watch("label")
+], CwIcon.prototype, "handleLabelChange", 1);
+__decorateClass([
+  watch(["name", "src", "library"])
+], CwIcon.prototype, "setIcon", 1);
+
+export {
+  CwIcon
+};

package/cdn/chunks/chunk.34HPBSDA.js

@@ -0,0 +1,11 @@
+import {
+  CwResizeObserver
+} from "./chunk.AYLSHETT.js";
+
+// src/components/resize-observer/resize-observer.ts
+var resize_observer_default = CwResizeObserver;
+CwResizeObserver.define("cw-resize-observer");
+
+export {
+  resize_observer_default
+};

package/cdn/chunks/chunk.35R4VUT2.js

@@ -0,0 +1,21 @@
+import {
+  CwProgressBar
+} from "./chunk.KXQ47DFE.js";
+
+// src/react/progress-bar/index.ts
+import * as React from "react";
+import { createComponent } from "@lit/react";
+var tagName = "cw-progress-bar";
+CwProgressBar.define("cw-progress-bar");
+var reactWrapper = createComponent({
+  tagName,
+  elementClass: CwProgressBar,
+  react: React,
+  events: {},
+  displayName: "CwProgressBar"
+});
+var progress_bar_default = reactWrapper;
+
+export {
+  progress_bar_default
+};

package/cdn/chunks/chunk.36WD7XXM.js

@@ -0,0 +1,147 @@
+import {
+  primary_navigation_item_styles_default
+} from "./chunk.3WY5UV4F.js";
+import {
+  CwDropdown
+} from "./chunk.SAHNSFLV.js";
+import {
+  o
+} from "./chunk.LRAERZML.js";
+import {
+  e
+} from "./chunk.VBR4VS53.js";
+import {
+  CwIcon
+} from "./chunk.2KVDB3GS.js";
+import {
+  component_styles_default
+} from "./chunk.NJIHXHXI.js";
+import {
+  CwElement,
+  e as e2,
+  n,
+  r
+} from "./chunk.3ZEBFGMU.js";
+import {
+  A,
+  b
+} from "./chunk.6A2LG33L.js";
+import {
+  __decorateClass
+} from "./chunk.QIOX6AG5.js";
+
+// src/components/primary-navigation-item/primary-navigation-item.component.ts
+var CwPrimaryNavigationItem = class extends CwElement {
+  constructor() {
+    super(...arguments);
+    this.hasMenu = false;
+    this.open = false;
+    this.rel = "noreferrer noopener";
+    this.current = false;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.setAttribute("role", "listitem");
+  }
+  handleMenuSlotChange() {
+    var _a;
+    this.hasMenu = Boolean((_a = this.menuSlot) == null ? void 0 : _a.assignedElements({ flatten: true }).length);
+  }
+  handleDropdownShow() {
+    this.open = true;
+  }
+  handleDropdownHide() {
+    this.open = false;
+  }
+  /** Opens the item's dropdown, if it has one. No-op for link/plain items. */
+  async show() {
+    var _a;
+    return (_a = this.dropdown) == null ? void 0 : _a.show();
+  }
+  /** Closes the item's dropdown, if it has one. No-op for link/plain items. */
+  async hide() {
+    var _a;
+    return (_a = this.dropdown) == null ? void 0 : _a.hide();
+  }
+  render() {
+    const ariaCurrent = this.current ? "page" : A;
+    const menuSlot = b`<slot name="menu" @slotchange=${this.handleMenuSlotChange} hidden></slot>`;
+    let content;
+    if (this.href) {
+      content = b`
+        <a
+          part="link"
+          class="primary-navigation-item__link"
+          href=${this.href}
+          target=${o(this.target || void 0)}
+          rel=${o(this.rel || void 0)}
+          aria-current=${ariaCurrent}
+        >
+          <slot></slot>
+        </a>
+        ${menuSlot}
+      `;
+    } else if (this.hasMenu) {
+      content = b`
+        <cw-dropdown
+          part="trigger"
+          placement="bottom-start"
+          @cw-show=${this.handleDropdownShow}
+          @cw-hide=${this.handleDropdownHide}
+        >
+          <button slot="trigger" type="button" class="primary-navigation-item__trigger">
+            <slot></slot>
+            <cw-icon library="system" name="chevron-down"></cw-icon>
+          </button>
+          ${menuSlot}
+        </cw-dropdown>
+      `;
+    } else {
+      content = b`
+        <span class="primary-navigation-item__label"><slot></slot></span>
+        ${menuSlot}
+      `;
+    }
+    return b`
+      <div
+        part="base"
+        class=${e({
+      "primary-navigation-item": true,
+      "primary-navigation-item--current": this.current
+    })}
+      >
+        ${content}
+      </div>
+    `;
+  }
+};
+CwPrimaryNavigationItem.styles = [component_styles_default, primary_navigation_item_styles_default];
+CwPrimaryNavigationItem.dependencies = { "cw-dropdown": CwDropdown, "cw-icon": CwIcon };
+__decorateClass([
+  e2("cw-dropdown")
+], CwPrimaryNavigationItem.prototype, "dropdown", 2);
+__decorateClass([
+  e2('slot[name="menu"]')
+], CwPrimaryNavigationItem.prototype, "menuSlot", 2);
+__decorateClass([
+  r()
+], CwPrimaryNavigationItem.prototype, "hasMenu", 2);
+__decorateClass([
+  r()
+], CwPrimaryNavigationItem.prototype, "open", 2);
+__decorateClass([
+  n()
+], CwPrimaryNavigationItem.prototype, "href", 2);
+__decorateClass([
+  n()
+], CwPrimaryNavigationItem.prototype, "target", 2);
+__decorateClass([
+  n()
+], CwPrimaryNavigationItem.prototype, "rel", 2);
+__decorateClass([
+  n({ type: Boolean, reflect: true })
+], CwPrimaryNavigationItem.prototype, "current", 2);
+
+export {
+  CwPrimaryNavigationItem
+};

package/cdn/chunks/chunk.3B2I6H6O.js

@@ -0,0 +1,153 @@
+import {
+  option_styles_default
+} from "./chunk.WIMBCK75.js";
+import {
+  LocalizeController
+} from "./chunk.DO5JU7WR.js";
+import {
+  e
+} from "./chunk.VBR4VS53.js";
+import {
+  CwIcon
+} from "./chunk.2KVDB3GS.js";
+import {
+  watch
+} from "./chunk.RB5L7E7Z.js";
+import {
+  component_styles_default
+} from "./chunk.NJIHXHXI.js";
+import {
+  CwElement,
+  e as e2,
+  n,
+  r
+} from "./chunk.3ZEBFGMU.js";
+import {
+  b
+} from "./chunk.6A2LG33L.js";
+import {
+  __decorateClass
+} from "./chunk.QIOX6AG5.js";
+
+// src/components/option/option.component.ts
+var CwOption = class extends CwElement {
+  constructor() {
+    super(...arguments);
+    // @ts-expect-error - Controller is currently unused
+    this.localize = new LocalizeController(this);
+    this.isInitialized = false;
+    this.current = false;
+    this.selected = false;
+    this.hasHover = false;
+    this.value = "";
+    this.disabled = false;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.setAttribute("role", "option");
+    this.setAttribute("aria-selected", "false");
+  }
+  handleDefaultSlotChange() {
+    if (this.isInitialized) {
+      customElements.whenDefined("cw-select").then(() => {
+        const controller = this.closest("cw-select");
+        if (controller) {
+          controller.handleDefaultSlotChange();
+        }
+      });
+    } else {
+      this.isInitialized = true;
+    }
+  }
+  handleMouseEnter() {
+    this.hasHover = true;
+  }
+  handleMouseLeave() {
+    this.hasHover = false;
+  }
+  handleDisabledChange() {
+    this.setAttribute("aria-disabled", this.disabled ? "true" : "false");
+  }
+  handleSelectedChange() {
+    this.setAttribute("aria-selected", this.selected ? "true" : "false");
+  }
+  handleValueChange() {
+    if (typeof this.value !== "string") {
+      this.value = String(this.value);
+    }
+    if (this.value.includes(" ")) {
+      console.error(`Option values cannot include a space. All spaces have been replaced with underscores.`, this);
+      this.value = this.value.replace(/ /g, "_");
+    }
+  }
+  /** Returns a plain text label based on the option's content. */
+  getTextLabel() {
+    const nodes = this.childNodes;
+    let label = "";
+    [...nodes].forEach((node) => {
+      if (node.nodeType === Node.ELEMENT_NODE) {
+        if (!node.hasAttribute("slot")) {
+          label += node.textContent;
+        }
+      }
+      if (node.nodeType === Node.TEXT_NODE) {
+        label += node.textContent;
+      }
+    });
+    return label.trim();
+  }
+  render() {
+    return b`
+      <div
+        part="base"
+        class=${e({
+      option: true,
+      "option--current": this.current,
+      "option--disabled": this.disabled,
+      "option--selected": this.selected,
+      "option--hover": this.hasHover
+    })}
+        @mouseenter=${this.handleMouseEnter}
+        @mouseleave=${this.handleMouseLeave}
+      >
+        <cw-icon part="checked-icon" class="option__check" name="check" library="system" aria-hidden="true"></cw-icon>
+        <slot part="prefix" name="prefix" class="option__prefix"></slot>
+        <slot part="label" class="option__label" @slotchange=${this.handleDefaultSlotChange}></slot>
+        <slot part="suffix" name="suffix" class="option__suffix"></slot>
+      </div>
+    `;
+  }
+};
+CwOption.styles = [component_styles_default, option_styles_default];
+CwOption.dependencies = { "cw-icon": CwIcon };
+__decorateClass([
+  e2(".option__label")
+], CwOption.prototype, "defaultSlot", 2);
+__decorateClass([
+  r()
+], CwOption.prototype, "current", 2);
+__decorateClass([
+  r()
+], CwOption.prototype, "selected", 2);
+__decorateClass([
+  r()
+], CwOption.prototype, "hasHover", 2);
+__decorateClass([
+  n({ reflect: true })
+], CwOption.prototype, "value", 2);
+__decorateClass([
+  n({ type: Boolean, reflect: true })
+], CwOption.prototype, "disabled", 2);
+__decorateClass([
+  watch("disabled")
+], CwOption.prototype, "handleDisabledChange", 1);
+__decorateClass([
+  watch("selected")
+], CwOption.prototype, "handleSelectedChange", 1);
+__decorateClass([
+  watch("value")
+], CwOption.prototype, "handleValueChange", 1);
+
+export {
+  CwOption
+};

package/cdn/chunks/chunk.3BNKKZRC.js

@@ -0,0 +1,11 @@
+import {
+  CwTooltip
+} from "./chunk.AVFM4W6N.js";
+
+// src/components/tooltip/tooltip.ts
+var tooltip_default = CwTooltip;
+CwTooltip.define("cw-tooltip");
+
+export {
+  tooltip_default
+};

package/cdn/chunks/chunk.3SBB34SH.js

@@ -0,0 +1,11 @@
+import {
+  CwFormatBytes
+} from "./chunk.BDO27C2F.js";
+
+// src/components/format-bytes/format-bytes.ts
+var format_bytes_default = CwFormatBytes;
+CwFormatBytes.define("cw-format-bytes");
+
+export {
+  format_bytes_default
+};

package/cdn/chunks/chunk.3TFHILX5.js

@@ -0,0 +1,25 @@
+import {
+  CwRadio
+} from "./chunk.E342SEX2.js";
+
+// src/react/radio/index.ts
+import * as React from "react";
+import { createComponent } from "@lit/react";
+import "@lit/react";
+var tagName = "cw-radio";
+CwRadio.define("cw-radio");
+var reactWrapper = createComponent({
+  tagName,
+  elementClass: CwRadio,
+  react: React,
+  events: {
+    onCwBlur: "cw-blur",
+    onCwFocus: "cw-focus"
+  },
+  displayName: "CwRadio"
+});
+var radio_default = reactWrapper;
+
+export {
+  radio_default
+};