@cordwainer/cw-elements 1.4.0-alpha.1 → 1.5.0-alpha.0

package/README.md

@@ -72,3 +72,5 @@ Cordwainer Elements is an open source project and contributions are encouraged!
 Cordwainer Elements is developed by Matt Hand. It’s available under the terms of the MIT license.
 
 Whether you're building Cordwainer Elements or building something _with_ Cordwainer Elements — have fun creating! 🥾
+
+**Keywords:** Shoelace alternative, Shoelace fork, Shoelace replacement, migrate from Shoelace, Shoelace migration tool, Shoelace web components alternative

package/cdn/chunks/chunk.22CTYNXG.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.6PG467MA.js";
+import {
+  watch
+} from "./chunk.RB5L7E7Z.js";
+import {
+  component_styles_default
+} from "./chunk.NJIHXHXI.js";
+import {
+  CwElement,
+  n,
+  r
+} from "./chunk.OJV7ANCQ.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.25YJIL7N.js

@@ -0,0 +1,11 @@
+import {
+  CwProgressRing
+} from "./chunk.QFTWCRAS.js";
+
+// src/components/progress-ring/progress-ring.ts
+var progress_ring_default = CwProgressRing;
+CwProgressRing.define("cw-progress-ring");
+
+export {
+  progress_ring_default
+};

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

@@ -0,0 +1,11 @@
+import {
+  CwRadioGroup
+} from "./chunk.EXF7QDLH.js";
+
+// src/components/radio-group/radio-group.ts
+var radio_group_default = CwRadioGroup;
+CwRadioGroup.define("cw-radio-group");
+
+export {
+  radio_group_default
+};

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

@@ -0,0 +1,28 @@
+import {
+  CwTextarea
+} from "./chunk.JHIPJ3PG.js";
+
+// src/react/textarea/index.ts
+import * as React from "react";
+import { createComponent } from "@lit/react";
+import "@lit/react";
+var tagName = "cw-textarea";
+CwTextarea.define("cw-textarea");
+var reactWrapper = createComponent({
+  tagName,
+  elementClass: CwTextarea,
+  react: React,
+  events: {
+    onCwBlur: "cw-blur",
+    onCwChange: "cw-change",
+    onCwFocus: "cw-focus",
+    onCwInput: "cw-input",
+    onCwInvalid: "cw-invalid"
+  },
+  displayName: "CwTextarea"
+});
+var textarea_default = reactWrapper;
+
+export {
+  textarea_default
+};

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

@@ -0,0 +1,24 @@
+import {
+  CwMenu
+} from "./chunk.PSKCDK3N.js";
+
+// src/react/menu/index.ts
+import * as React from "react";
+import { createComponent } from "@lit/react";
+import "@lit/react";
+var tagName = "cw-menu";
+CwMenu.define("cw-menu");
+var reactWrapper = createComponent({
+  tagName,
+  elementClass: CwMenu,
+  react: React,
+  events: {
+    onCwSelect: "cw-select"
+  },
+  displayName: "CwMenu"
+});
+var menu_default = reactWrapper;
+
+export {
+  menu_default
+};

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

@@ -0,0 +1,122 @@
+import {
+  tab_styles_default
+} from "./chunk.KQ6YVFLH.js";
+import {
+  CwIconButton
+} from "./chunk.TWVJO46F.js";
+import {
+  LocalizeController
+} from "./chunk.75ZQOYXC.js";
+import {
+  e
+} from "./chunk.VBR4VS53.js";
+import {
+  watch
+} from "./chunk.RB5L7E7Z.js";
+import {
+  component_styles_default
+} from "./chunk.NJIHXHXI.js";
+import {
+  CwElement,
+  e as e2,
+  n
+} from "./chunk.OJV7ANCQ.js";
+import {
+  b
+} from "./chunk.6A2LG33L.js";
+import {
+  __decorateClass
+} from "./chunk.QIOX6AG5.js";
+
+// src/components/tab/tab.component.ts
+var id = 0;
+var CwTab = class extends CwElement {
+  constructor() {
+    super(...arguments);
+    this.localize = new LocalizeController(this);
+    this.attrId = ++id;
+    this.componentId = `cw-tab-${this.attrId}`;
+    this.panel = "";
+    this.active = false;
+    this.closable = false;
+    this.disabled = false;
+    this.tabIndex = 0;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.setAttribute("role", "tab");
+  }
+  handleCloseClick(event) {
+    event.stopPropagation();
+    this.emit("cw-close");
+  }
+  handleActiveChange() {
+    this.setAttribute("aria-selected", this.active ? "true" : "false");
+  }
+  handleDisabledChange() {
+    this.setAttribute("aria-disabled", this.disabled ? "true" : "false");
+    if (this.disabled && !this.active) {
+      this.tabIndex = -1;
+    } else {
+      this.tabIndex = 0;
+    }
+  }
+  render() {
+    this.id = this.id.length > 0 ? this.id : this.componentId;
+    return b`
+      <div
+        part="base"
+        class=${e({
+      tab: true,
+      "tab--active": this.active,
+      "tab--closable": this.closable,
+      "tab--disabled": this.disabled
+    })}
+      >
+        <slot></slot>
+        ${this.closable ? b`
+                <cw-icon-button
+                  part="close-button"
+                  exportparts="base:close-button__base"
+                  name="x-lg"
+                  library="system"
+                  label=${this.localize.term("close")}
+                  class="tab__close-button"
+                  @click=${this.handleCloseClick}
+                  tabindex="-1"
+                ></cw-icon-button>
+              ` : ""}
+      </div>
+    `;
+  }
+};
+CwTab.styles = [component_styles_default, tab_styles_default];
+CwTab.dependencies = { "cw-icon-button": CwIconButton };
+__decorateClass([
+  e2(".tab")
+], CwTab.prototype, "tab", 2);
+__decorateClass([
+  n({ reflect: true })
+], CwTab.prototype, "panel", 2);
+__decorateClass([
+  n({ type: Boolean, reflect: true })
+], CwTab.prototype, "active", 2);
+__decorateClass([
+  n({ type: Boolean, reflect: true })
+], CwTab.prototype, "closable", 2);
+__decorateClass([
+  n({ type: Boolean, reflect: true })
+], CwTab.prototype, "disabled", 2);
+__decorateClass([
+  n({ type: Number, reflect: true })
+], CwTab.prototype, "tabIndex", 2);
+__decorateClass([
+  watch("active")
+], CwTab.prototype, "handleActiveChange", 1);
+__decorateClass([
+  watch("disabled")
+], CwTab.prototype, "handleDisabledChange", 1);
+
+export {
+  CwTab
+};

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

@@ -0,0 +1,11 @@
+import {
+  CwPrimaryNavigationItem
+} from "./chunk.P2AMQYMN.js";
+
+// src/components/primary-navigation-item/primary-navigation-item.ts
+var primary_navigation_item_default = CwPrimaryNavigationItem;
+CwPrimaryNavigationItem.define("cw-primary-navigation-item");
+
+export {
+  primary_navigation_item_default
+};