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

package/dist/chunks/chunk.EPZSIX5O.js

@@ -0,0 +1,73 @@
+import {
+  LocalizeController
+} from "./chunk.746GMAQ3.js";
+import {
+  CwElement
+} from "./chunk.DXEKWMYK.js";
+import {
+  __decorateClass
+} from "./chunk.Q44EX5TP.js";
+
+// src/components/format-number/format-number.component.ts
+import { property } from "lit/decorators.js";
+var CwFormatNumber = class extends CwElement {
+  constructor() {
+    super(...arguments);
+    this.localize = new LocalizeController(this);
+    this.value = 0;
+    this.type = "decimal";
+    this.noGrouping = false;
+    this.currency = "USD";
+    this.currencyDisplay = "symbol";
+  }
+  render() {
+    if (isNaN(this.value)) {
+      return "";
+    }
+    return this.localize.number(this.value, {
+      style: this.type,
+      currency: this.currency,
+      currencyDisplay: this.currencyDisplay,
+      useGrouping: !this.noGrouping,
+      minimumIntegerDigits: this.minimumIntegerDigits,
+      minimumFractionDigits: this.minimumFractionDigits,
+      maximumFractionDigits: this.maximumFractionDigits,
+      minimumSignificantDigits: this.minimumSignificantDigits,
+      maximumSignificantDigits: this.maximumSignificantDigits
+    });
+  }
+};
+__decorateClass([
+  property({ type: Number })
+], CwFormatNumber.prototype, "value", 2);
+__decorateClass([
+  property()
+], CwFormatNumber.prototype, "type", 2);
+__decorateClass([
+  property({ attribute: "no-grouping", type: Boolean })
+], CwFormatNumber.prototype, "noGrouping", 2);
+__decorateClass([
+  property()
+], CwFormatNumber.prototype, "currency", 2);
+__decorateClass([
+  property({ attribute: "currency-display" })
+], CwFormatNumber.prototype, "currencyDisplay", 2);
+__decorateClass([
+  property({ attribute: "minimum-integer-digits", type: Number })
+], CwFormatNumber.prototype, "minimumIntegerDigits", 2);
+__decorateClass([
+  property({ attribute: "minimum-fraction-digits", type: Number })
+], CwFormatNumber.prototype, "minimumFractionDigits", 2);
+__decorateClass([
+  property({ attribute: "maximum-fraction-digits", type: Number })
+], CwFormatNumber.prototype, "maximumFractionDigits", 2);
+__decorateClass([
+  property({ attribute: "minimum-significant-digits", type: Number })
+], CwFormatNumber.prototype, "minimumSignificantDigits", 2);
+__decorateClass([
+  property({ attribute: "maximum-significant-digits", type: Number })
+], CwFormatNumber.prototype, "maximumSignificantDigits", 2);
+
+export {
+  CwFormatNumber
+};

package/dist/chunks/chunk.EVIDG6GS.js

@@ -0,0 +1,90 @@
+import {
+  breadcrumb_styles_default
+} from "./chunk.P4NYDBZP.js";
+import {
+  LocalizeController
+} from "./chunk.746GMAQ3.js";
+import {
+  CwIcon
+} from "./chunk.NEHR5VYL.js";
+import {
+  component_styles_default
+} from "./chunk.TUVJKY7S.js";
+import {
+  CwElement
+} from "./chunk.DXEKWMYK.js";
+import {
+  __decorateClass
+} from "./chunk.Q44EX5TP.js";
+
+// src/components/breadcrumb/breadcrumb.component.ts
+import { html } from "lit";
+import { property, query } from "lit/decorators.js";
+var CwBreadcrumb = class extends CwElement {
+  constructor() {
+    super(...arguments);
+    this.localize = new LocalizeController(this);
+    this.separatorDir = this.localize.dir();
+    this.label = "";
+  }
+  // Generates a clone of the separator element to use for each breadcrumb item
+  getSeparator() {
+    const separator = this.separatorSlot.assignedElements({ flatten: true })[0];
+    const clone = separator.cloneNode(true);
+    [clone, ...clone.querySelectorAll("[id]")].forEach((el) => el.removeAttribute("id"));
+    clone.setAttribute("data-default", "");
+    clone.slot = "separator";
+    return clone;
+  }
+  handleSlotChange() {
+    const items = [...this.defaultSlot.assignedElements({ flatten: true })].filter(
+      (item) => item.tagName.toLowerCase() === "cw-breadcrumb-item"
+    );
+    items.forEach((item, index) => {
+      const separator = item.querySelector('[slot="separator"]');
+      if (separator === null) {
+        item.append(this.getSeparator());
+      } else if (separator.hasAttribute("data-default")) {
+        separator.replaceWith(this.getSeparator());
+      } else {
+      }
+      if (index === items.length - 1) {
+        item.setAttribute("aria-current", "page");
+      } else {
+        item.removeAttribute("aria-current");
+      }
+    });
+  }
+  render() {
+    if (this.separatorDir !== this.localize.dir()) {
+      this.separatorDir = this.localize.dir();
+      this.updateComplete.then(() => this.handleSlotChange());
+    }
+    return html`
+      <nav part="base" class="breadcrumb" aria-label=${this.label}>
+        <slot @slotchange=${this.handleSlotChange}></slot>
+      </nav>
+
+      <span hidden aria-hidden="true">
+        <slot name="separator">
+          <cw-icon name=${this.localize.dir() === "rtl" ? "chevron-left" : "chevron-right"} library="system"></cw-icon>
+        </slot>
+      </span>
+    `;
+  }
+};
+CwBreadcrumb.styles = [component_styles_default, breadcrumb_styles_default];
+CwBreadcrumb.dependencies = { "cw-icon": CwIcon };
+__decorateClass([
+  query("slot")
+], CwBreadcrumb.prototype, "defaultSlot", 2);
+__decorateClass([
+  query('slot[name="separator"]')
+], CwBreadcrumb.prototype, "separatorSlot", 2);
+__decorateClass([
+  property()
+], CwBreadcrumb.prototype, "label", 2);
+
+export {
+  CwBreadcrumb
+};

package/dist/chunks/chunk.EVURTA7J.js

@@ -0,0 +1,50 @@
+import {
+  LocalizeController
+} from "./chunk.746GMAQ3.js";
+import {
+  CwElement
+} from "./chunk.DXEKWMYK.js";
+import {
+  __decorateClass
+} from "./chunk.Q44EX5TP.js";
+
+// src/components/format-bytes/format-bytes.component.ts
+import { property } from "lit/decorators.js";
+var CwFormatBytes = class extends CwElement {
+  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 })
+], CwFormatBytes.prototype, "value", 2);
+__decorateClass([
+  property()
+], CwFormatBytes.prototype, "unit", 2);
+__decorateClass([
+  property()
+], CwFormatBytes.prototype, "display", 2);
+
+export {
+  CwFormatBytes
+};

package/dist/chunks/chunk.EYMNXHXD.js

@@ -0,0 +1,227 @@
+import {
+  CwTooltip
+} from "./chunk.BRULING5.js";
+import {
+  copy_button_styles_default
+} from "./chunk.OUI6FGTY.js";
+import {
+  getAnimation,
+  setDefaultAnimation
+} from "./chunk.SPWJX47D.js";
+import {
+  LocalizeController
+} from "./chunk.746GMAQ3.js";
+import {
+  CwIcon
+} from "./chunk.NEHR5VYL.js";
+import {
+  component_styles_default
+} from "./chunk.TUVJKY7S.js";
+import {
+  CwElement
+} from "./chunk.DXEKWMYK.js";
+import {
+  __decorateClass
+} from "./chunk.Q44EX5TP.js";
+
+// src/components/copy-button/copy-button.component.ts
+import { classMap } from "lit/directives/class-map.js";
+import { html } from "lit";
+import { property, query, state } from "lit/decorators.js";
+var CwCopyButton = class extends CwElement {
+  constructor() {
+    super(...arguments);
+    this.localize = new LocalizeController(this);
+    this.isCopying = false;
+    this.status = "rest";
+    this.value = "";
+    this.from = "";
+    this.disabled = false;
+    this.copyLabel = "";
+    this.successLabel = "";
+    this.errorLabel = "";
+    this.feedbackDuration = 1e3;
+    this.tooltipPlacement = "top";
+    this.hoist = false;
+  }
+  async handleCopy() {
+    if (this.disabled || this.isCopying) {
+      return;
+    }
+    this.isCopying = true;
+    let valueToCopy = this.value;
+    if (this.from) {
+      const root = this.getRootNode();
+      const isProperty = this.from.includes(".");
+      const isAttribute = this.from.includes("[") && this.from.includes("]");
+      let id = this.from;
+      let field = "";
+      if (isProperty) {
+        [id, field] = this.from.trim().split(".");
+      } else if (isAttribute) {
+        [id, field] = this.from.trim().replace(/\]$/, "").split("[");
+      }
+      const target = "getElementById" in root ? root.getElementById(id) : null;
+      if (target) {
+        if (isAttribute) {
+          valueToCopy = target.getAttribute(field) || "";
+        } else if (isProperty) {
+          valueToCopy = target[field] || "";
+        } else {
+          valueToCopy = target.textContent || "";
+        }
+      } else {
+        this.showStatus("error");
+        this.emit("cw-error");
+      }
+    }
+    if (!valueToCopy) {
+      this.showStatus("error");
+      this.emit("cw-error");
+    } else {
+      try {
+        await navigator.clipboard.writeText(valueToCopy);
+        this.showStatus("success");
+        this.emit("cw-copy", {
+          detail: {
+            value: valueToCopy
+          }
+        });
+      } catch (error) {
+        this.showStatus("error");
+        this.emit("cw-error");
+      }
+    }
+  }
+  async showStatus(status) {
+    const copyLabel = this.copyLabel || this.localize.term("copy");
+    const successLabel = this.successLabel || this.localize.term("copied");
+    const errorLabel = this.errorLabel || this.localize.term("error");
+    const iconToShow = status === "success" ? this.successIcon : this.errorIcon;
+    const showAnimation = getAnimation(this, "copy.in", { dir: "ltr" });
+    const hideAnimation = getAnimation(this, "copy.out", { dir: "ltr" });
+    this.tooltip.content = status === "success" ? successLabel : errorLabel;
+    await this.copyIcon.animate(hideAnimation.keyframes, hideAnimation.options).finished;
+    this.copyIcon.hidden = true;
+    this.status = status;
+    iconToShow.hidden = false;
+    await iconToShow.animate(showAnimation.keyframes, showAnimation.options).finished;
+    setTimeout(async () => {
+      await iconToShow.animate(hideAnimation.keyframes, hideAnimation.options).finished;
+      iconToShow.hidden = true;
+      this.status = "rest";
+      this.copyIcon.hidden = false;
+      await this.copyIcon.animate(showAnimation.keyframes, showAnimation.options).finished;
+      this.tooltip.content = copyLabel;
+      this.isCopying = false;
+    }, this.feedbackDuration);
+  }
+  render() {
+    const copyLabel = this.copyLabel || this.localize.term("copy");
+    return html`
+      <cw-tooltip
+        class=${classMap({
+      "copy-button": true,
+      "copy-button--success": this.status === "success",
+      "copy-button--error": this.status === "error"
+    })}
+        content=${copyLabel}
+        placement=${this.tooltipPlacement}
+        ?disabled=${this.disabled}
+        ?hoist=${this.hoist}
+        exportparts="
+          base:tooltip__base,
+          base__popup:tooltip__base__popup,
+          base__arrow:tooltip__base__arrow,
+          body:tooltip__body
+        "
+      >
+        <button
+          class="copy-button__button"
+          part="button"
+          type="button"
+          ?disabled=${this.disabled}
+          @click=${this.handleCopy}
+        >
+          <slot part="copy-icon" name="copy-icon">
+            <cw-icon library="system" name="copy"></cw-icon>
+          </slot>
+          <slot part="success-icon" name="success-icon" hidden>
+            <cw-icon library="system" name="check"></cw-icon>
+          </slot>
+          <slot part="error-icon" name="error-icon" hidden>
+            <cw-icon library="system" name="x-lg"></cw-icon>
+          </slot>
+        </button>
+      </cw-tooltip>
+    `;
+  }
+};
+CwCopyButton.styles = [component_styles_default, copy_button_styles_default];
+CwCopyButton.dependencies = {
+  "cw-icon": CwIcon,
+  "cw-tooltip": CwTooltip
+};
+__decorateClass([
+  query('slot[name="copy-icon"]')
+], CwCopyButton.prototype, "copyIcon", 2);
+__decorateClass([
+  query('slot[name="success-icon"]')
+], CwCopyButton.prototype, "successIcon", 2);
+__decorateClass([
+  query('slot[name="error-icon"]')
+], CwCopyButton.prototype, "errorIcon", 2);
+__decorateClass([
+  query("cw-tooltip")
+], CwCopyButton.prototype, "tooltip", 2);
+__decorateClass([
+  state()
+], CwCopyButton.prototype, "isCopying", 2);
+__decorateClass([
+  state()
+], CwCopyButton.prototype, "status", 2);
+__decorateClass([
+  property()
+], CwCopyButton.prototype, "value", 2);
+__decorateClass([
+  property()
+], CwCopyButton.prototype, "from", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], CwCopyButton.prototype, "disabled", 2);
+__decorateClass([
+  property({ attribute: "copy-label" })
+], CwCopyButton.prototype, "copyLabel", 2);
+__decorateClass([
+  property({ attribute: "success-label" })
+], CwCopyButton.prototype, "successLabel", 2);
+__decorateClass([
+  property({ attribute: "error-label" })
+], CwCopyButton.prototype, "errorLabel", 2);
+__decorateClass([
+  property({ attribute: "feedback-duration", type: Number })
+], CwCopyButton.prototype, "feedbackDuration", 2);
+__decorateClass([
+  property({ attribute: "tooltip-placement" })
+], CwCopyButton.prototype, "tooltipPlacement", 2);
+__decorateClass([
+  property({ type: Boolean })
+], CwCopyButton.prototype, "hoist", 2);
+setDefaultAnimation("copy.in", {
+  keyframes: [
+    { scale: ".25", opacity: ".25" },
+    { scale: "1", opacity: "1" }
+  ],
+  options: { duration: 100 }
+});
+setDefaultAnimation("copy.out", {
+  keyframes: [
+    { scale: "1", opacity: "1" },
+    { scale: ".25", opacity: "0" }
+  ],
+  options: { duration: 100 }
+});
+
+export {
+  CwCopyButton
+};

package/dist/chunks/chunk.F6IW7SUG.js

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

package/dist/chunks/chunk.FGLLASPY.js

@@ -0,0 +1,11 @@
+import {
+  CwMenu
+} from "./chunk.E5KLQVU6.js";
+
+// src/components/menu/menu.ts
+var menu_default = CwMenu;
+CwMenu.define("cw-menu");
+
+export {
+  menu_default
+};

package/dist/chunks/chunk.FNCCMHFT.js

@@ -0,0 +1,33 @@
+import {
+  CwDatePicker
+} from "./chunk.T7HJK4I5.js";
+
+// src/react/date-picker/index.ts
+import * as React from "react";
+import { createComponent } from "@lit/react";
+import "@lit/react";
+var tagName = "cw-date-picker";
+CwDatePicker.define("cw-date-picker");
+var reactWrapper = createComponent({
+  tagName,
+  elementClass: CwDatePicker,
+  react: React,
+  events: {
+    onCwChange: "cw-change",
+    onCwClear: "cw-clear",
+    onCwInput: "cw-input",
+    onCwFocus: "cw-focus",
+    onCwBlur: "cw-blur",
+    onCwShow: "cw-show",
+    onCwAfterShow: "cw-after-show",
+    onCwHide: "cw-hide",
+    onCwAfterHide: "cw-after-hide",
+    onCwInvalid: "cw-invalid"
+  },
+  displayName: "CwDatePicker"
+});
+var date_picker_default = reactWrapper;
+
+export {
+  date_picker_default
+};

package/dist/chunks/chunk.FRRK3ONV.js

@@ -0,0 +1,21 @@
+import {
+  CwQrCode
+} from "./chunk.KKAVIJ7F.js";
+
+// src/react/qr-code/index.ts
+import * as React from "react";
+import { createComponent } from "@lit/react";
+var tagName = "cw-qr-code";
+CwQrCode.define("cw-qr-code");
+var reactWrapper = createComponent({
+  tagName,
+  elementClass: CwQrCode,
+  react: React,
+  events: {},
+  displayName: "CwQrCode"
+});
+var qr_code_default = reactWrapper;
+
+export {
+  qr_code_default
+};

package/dist/chunks/chunk.GGY6MFM6.js

@@ -0,0 +1,11 @@
+import {
+  CwTextarea
+} from "./chunk.HBZROAKX.js";
+
+// src/components/textarea/textarea.ts
+var textarea_default = CwTextarea;
+CwTextarea.define("cw-textarea");
+
+export {
+  textarea_default
+};

package/dist/chunks/chunk.GHPJSGNF.js

@@ -0,0 +1,11 @@
+import {
+  CwRange
+} from "./chunk.AZMW2USQ.js";
+
+// src/components/range/range.ts
+var range_default = CwRange;
+CwRange.define("cw-range");
+
+export {
+  range_default
+};

package/dist/chunks/chunk.GI2EZWPT.js

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

package/dist/chunks/chunk.GO3Y5OMD.js

@@ -0,0 +1,11 @@
+import {
+  CwCombobox
+} from "./chunk.Y7MLK7XY.js";
+
+// src/components/combobox/combobox.ts
+var combobox_default = CwCombobox;
+CwCombobox.define("cw-combobox");
+
+export {
+  combobox_default
+};

package/dist/chunks/chunk.GOTHSXUS.js

@@ -0,0 +1,11 @@
+import {
+  CwDatePicker
+} from "./chunk.T7HJK4I5.js";
+
+// src/components/date-picker/date-picker.ts
+var date_picker_default = CwDatePicker;
+CwDatePicker.define("cw-date-picker");
+
+export {
+  date_picker_default
+};

package/dist/chunks/chunk.GQOQKYZ5.js

@@ -0,0 +1,24 @@
+import {
+  CwAvatar
+} from "./chunk.2NGUOJQ2.js";
+
+// src/react/avatar/index.ts
+import * as React from "react";
+import { createComponent } from "@lit/react";
+import "@lit/react";
+var tagName = "cw-avatar";
+CwAvatar.define("cw-avatar");
+var reactWrapper = createComponent({
+  tagName,
+  elementClass: CwAvatar,
+  react: React,
+  events: {
+    onCwError: "cw-error"
+  },
+  displayName: "CwAvatar"
+});
+var avatar_default = reactWrapper;
+
+export {
+  avatar_default
+};

package/dist/chunks/chunk.GYTXGGUB.js

@@ -0,0 +1,21 @@
+import {
+  CwFormatBytes
+} from "./chunk.EVURTA7J.js";
+
+// src/react/format-bytes/index.ts
+import * as React from "react";
+import { createComponent } from "@lit/react";
+var tagName = "cw-format-bytes";
+CwFormatBytes.define("cw-format-bytes");
+var reactWrapper = createComponent({
+  tagName,
+  elementClass: CwFormatBytes,
+  react: React,
+  events: {},
+  displayName: "CwFormatBytes"
+});
+var format_bytes_default = reactWrapper;
+
+export {
+  format_bytes_default
+};

package/dist/chunks/chunk.H5ST3L7Q.js

@@ -0,0 +1,25 @@
+import {
+  CwAnimatedImage
+} from "./chunk.5PRFL3SZ.js";
+
+// src/react/animated-image/index.ts
+import * as React from "react";
+import { createComponent } from "@lit/react";
+import "@lit/react";
+var tagName = "cw-animated-image";
+CwAnimatedImage.define("cw-animated-image");
+var reactWrapper = createComponent({
+  tagName,
+  elementClass: CwAnimatedImage,
+  react: React,
+  events: {
+    onCwLoad: "cw-load",
+    onCwError: "cw-error"
+  },
+  displayName: "CwAnimatedImage"
+});
+var animated_image_default = reactWrapper;
+
+export {
+  animated_image_default
+};