@cordwainer/cw-elements 1.1.1 → 1.2.0-alpha.1

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

@@ -0,0 +1,21 @@
+import {
+  CwQrCode
+} from "./chunk.LQXFA2EE.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/cdn/chunks/chunk.2EVBJXGK.js

@@ -0,0 +1,11 @@
+import {
+  CwFormatDate
+} from "./chunk.MNRAN3EO.js";
+
+// src/components/format-date/format-date.ts
+var format_date_default = CwFormatDate;
+CwFormatDate.define("cw-format-date");
+
+export {
+  format_date_default
+};

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

@@ -0,0 +1,11 @@
+import {
+  CwFormatBytes
+} from "./chunk.T2KRTFM4.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.2NINSW7F.js

@@ -0,0 +1,137 @@
+import {
+  menu_styles_default
+} from "./chunk.JDVOLIP5.js";
+import {
+  component_styles_default
+} from "./chunk.NJIHXHXI.js";
+import {
+  CwElement,
+  e
+} from "./chunk.5GHHWGQ4.js";
+import {
+  b
+} from "./chunk.6A2LG33L.js";
+import {
+  __decorateClass
+} from "./chunk.QIOX6AG5.js";
+
+// src/components/menu/menu.component.ts
+var CwMenu = class extends CwElement {
+  connectedCallback() {
+    super.connectedCallback();
+    this.setAttribute("role", "menu");
+  }
+  handleClick(event) {
+    const menuItemTypes = ["menuitem", "menuitemcheckbox"];
+    const composedPath = event.composedPath();
+    const target = composedPath.find((el) => {
+      var _a;
+      return menuItemTypes.includes(((_a = el == null ? void 0 : el.getAttribute) == null ? void 0 : _a.call(el, "role")) || "");
+    });
+    if (!target) return;
+    const closestMenu = composedPath.find((el) => {
+      var _a;
+      return ((_a = el == null ? void 0 : el.getAttribute) == null ? void 0 : _a.call(el, "role")) === "menu";
+    });
+    const clickHasSubmenu = closestMenu !== this;
+    if (clickHasSubmenu) return;
+    const item = target;
+    if (item.type === "checkbox") {
+      item.checked = !item.checked;
+    }
+    this.emit("cw-select", { detail: { item } });
+  }
+  handleKeyDown(event) {
+    if (event.key === "Enter" || event.key === " ") {
+      const item = this.getCurrentItem();
+      event.preventDefault();
+      event.stopPropagation();
+      item == null ? void 0 : item.click();
+    } else 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();
+        event.stopPropagation();
+        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() === "cw-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.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 b`
+      <slot
+        @slotchange=${this.handleSlotChange}
+        @click=${this.handleClick}
+        @keydown=${this.handleKeyDown}
+        @mousedown=${this.handleMouseDown}
+      ></slot>
+    `;
+  }
+};
+CwMenu.styles = [component_styles_default, menu_styles_default];
+__decorateClass([
+  e("slot")
+], CwMenu.prototype, "defaultSlot", 2);
+
+export {
+  CwMenu
+};

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

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

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

@@ -0,0 +1,42 @@
+import {
+  divider_styles_default
+} from "./chunk.H4GSBSFJ.js";
+import {
+  watch
+} from "./chunk.RB5L7E7Z.js";
+import {
+  component_styles_default
+} from "./chunk.NJIHXHXI.js";
+import {
+  CwElement,
+  n
+} from "./chunk.5GHHWGQ4.js";
+import {
+  __decorateClass
+} from "./chunk.QIOX6AG5.js";
+
+// src/components/divider/divider.component.ts
+var CwDivider = class extends CwElement {
+  constructor() {
+    super(...arguments);
+    this.vertical = false;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.setAttribute("role", "separator");
+  }
+  handleVerticalChange() {
+    this.setAttribute("aria-orientation", this.vertical ? "vertical" : "horizontal");
+  }
+};
+CwDivider.styles = [component_styles_default, divider_styles_default];
+__decorateClass([
+  n({ type: Boolean, reflect: true })
+], CwDivider.prototype, "vertical", 2);
+__decorateClass([
+  watch("vertical")
+], CwDivider.prototype, "handleVerticalChange", 1);
+
+export {
+  CwDivider
+};

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

@@ -0,0 +1,26 @@
+import {
+  CwButton
+} from "./chunk.MNR3RGM6.js";
+
+// src/react/button/index.ts
+import * as React from "react";
+import { createComponent } from "@lit/react";
+import "@lit/react";
+var tagName = "cw-button";
+CwButton.define("cw-button");
+var reactWrapper = createComponent({
+  tagName,
+  elementClass: CwButton,
+  react: React,
+  events: {
+    onCwBlur: "cw-blur",
+    onCwFocus: "cw-focus",
+    onCwInvalid: "cw-invalid"
+  },
+  displayName: "CwButton"
+});
+var button_default = reactWrapper;
+
+export {
+  button_default
+};

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

@@ -0,0 +1,20 @@
+// node_modules/lit-html/directives/map.js
+function* o(o2, f) {
+  if (void 0 !== o2) {
+    let i = 0;
+    for (const t of o2) yield f(t, i++);
+  }
+}
+
+export {
+  o
+};
+/*! Bundled license information:
+
+lit-html/directives/map.js:
+  (**
+   * @license
+   * Copyright 2021 Google LLC
+   * SPDX-License-Identifier: BSD-3-Clause
+   *)
+*/

package/cdn/chunks/chunk.3242TXQ6.js

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

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

@@ -0,0 +1,73 @@
+import {
+  LocalizeController
+} from "./chunk.3ITR3YMH.js";
+import {
+  CwElement,
+  n
+} from "./chunk.5GHHWGQ4.js";
+import {
+  __decorateClass
+} from "./chunk.QIOX6AG5.js";
+
+// src/components/format-number/format-number.component.ts
+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([
+  n({ type: Number })
+], CwFormatNumber.prototype, "value", 2);
+__decorateClass([
+  n()
+], CwFormatNumber.prototype, "type", 2);
+__decorateClass([
+  n({ attribute: "no-grouping", type: Boolean })
+], CwFormatNumber.prototype, "noGrouping", 2);
+__decorateClass([
+  n()
+], CwFormatNumber.prototype, "currency", 2);
+__decorateClass([
+  n({ attribute: "currency-display" })
+], CwFormatNumber.prototype, "currencyDisplay", 2);
+__decorateClass([
+  n({ attribute: "minimum-integer-digits", type: Number })
+], CwFormatNumber.prototype, "minimumIntegerDigits", 2);
+__decorateClass([
+  n({ attribute: "minimum-fraction-digits", type: Number })
+], CwFormatNumber.prototype, "minimumFractionDigits", 2);
+__decorateClass([
+  n({ attribute: "maximum-fraction-digits", type: Number })
+], CwFormatNumber.prototype, "maximumFractionDigits", 2);
+__decorateClass([
+  n({ attribute: "minimum-significant-digits", type: Number })
+], CwFormatNumber.prototype, "minimumSignificantDigits", 2);
+__decorateClass([
+  n({ attribute: "maximum-significant-digits", type: Number })
+], CwFormatNumber.prototype, "maximumSignificantDigits", 2);
+
+export {
+  CwFormatNumber
+};

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

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

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

@@ -0,0 +1,11 @@
+import {
+  CwSwitch
+} from "./chunk.R7HK7CZV.js";
+
+// src/components/switch/switch.ts
+var switch_default = CwSwitch;
+CwSwitch.define("cw-switch");
+
+export {
+  switch_default
+};

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

@@ -0,0 +1,158 @@
+import {
+  image_comparer_styles_default
+} from "./chunk.IA4JONBK.js";
+import {
+  drag
+} from "./chunk.ESELY2US.js";
+import {
+  o
+} from "./chunk.3KMJJQ2V.js";
+import {
+  clamp
+} from "./chunk.HF7GESMZ.js";
+import {
+  LocalizeController
+} from "./chunk.3ITR3YMH.js";
+import {
+  e
+} from "./chunk.VBR4VS53.js";
+import {
+  CwIcon
+} from "./chunk.I6KB4VW7.js";
+import {
+  watch
+} from "./chunk.RB5L7E7Z.js";
+import {
+  component_styles_default
+} from "./chunk.NJIHXHXI.js";
+import {
+  CwElement,
+  e as e2,
+  n
+} from "./chunk.5GHHWGQ4.js";
+import {
+  b
+} from "./chunk.6A2LG33L.js";
+import {
+  __decorateClass
+} from "./chunk.QIOX6AG5.js";
+
+// src/components/image-comparer/image-comparer.component.ts
+var CwImageComparer = class extends CwElement {
+  constructor() {
+    super(...arguments);
+    this.localize = new LocalizeController(this);
+    this.position = 50;
+  }
+  handleDrag(event) {
+    const { width } = this.base.getBoundingClientRect();
+    const isRtl = this.localize.dir() === "rtl";
+    event.preventDefault();
+    drag(this.base, {
+      onMove: (x) => {
+        this.position = parseFloat(clamp(x / width * 100, 0, 100).toFixed(2));
+        if (isRtl) this.position = 100 - this.position;
+      },
+      initialEvent: event
+    });
+  }
+  handleKeyDown(event) {
+    const isLtr = this.localize.dir() === "ltr";
+    const isRtl = this.localize.dir() === "rtl";
+    if (["ArrowLeft", "ArrowRight", "Home", "End"].includes(event.key)) {
+      const incr = event.shiftKey ? 10 : 1;
+      let newPosition = this.position;
+      event.preventDefault();
+      if (isLtr && event.key === "ArrowLeft" || isRtl && event.key === "ArrowRight") {
+        newPosition -= incr;
+      }
+      if (isLtr && event.key === "ArrowRight" || isRtl && event.key === "ArrowLeft") {
+        newPosition += incr;
+      }
+      if (event.key === "Home") {
+        newPosition = 0;
+      }
+      if (event.key === "End") {
+        newPosition = 100;
+      }
+      newPosition = clamp(newPosition, 0, 100);
+      this.position = newPosition;
+    }
+  }
+  handlePositionChange() {
+    this.emit("cw-change");
+  }
+  render() {
+    const isRtl = this.localize.dir() === "rtl";
+    return b`
+      <div
+        part="base"
+        id="image-comparer"
+        class=${e({
+      "image-comparer": true,
+      "image-comparer--rtl": isRtl
+    })}
+        @keydown=${this.handleKeyDown}
+      >
+        <div class="image-comparer__image">
+          <div part="before" class="image-comparer__before">
+            <slot name="before"></slot>
+          </div>
+
+          <div
+            part="after"
+            class="image-comparer__after"
+            style=${o({
+      clipPath: isRtl ? `inset(0 0 0 ${100 - this.position}%)` : `inset(0 ${100 - this.position}% 0 0)`
+    })}
+          >
+            <slot name="after"></slot>
+          </div>
+        </div>
+
+        <div
+          part="divider"
+          class="image-comparer__divider"
+          style=${o({
+      left: isRtl ? `${100 - this.position}%` : `${this.position}%`
+    })}
+          @mousedown=${this.handleDrag}
+          @touchstart=${this.handleDrag}
+        >
+          <div
+            part="handle"
+            class="image-comparer__handle"
+            role="scrollbar"
+            aria-valuenow=${this.position}
+            aria-valuemin="0"
+            aria-valuemax="100"
+            aria-controls="image-comparer"
+            tabindex="0"
+          >
+            <slot name="handle">
+              <cw-icon library="system" name="grip-vertical"></cw-icon>
+            </slot>
+          </div>
+        </div>
+      </div>
+    `;
+  }
+};
+CwImageComparer.styles = [component_styles_default, image_comparer_styles_default];
+CwImageComparer.scopedElement = { "cw-icon": CwIcon };
+__decorateClass([
+  e2(".image-comparer")
+], CwImageComparer.prototype, "base", 2);
+__decorateClass([
+  e2(".image-comparer__handle")
+], CwImageComparer.prototype, "handle", 2);
+__decorateClass([
+  n({ type: Number, reflect: true })
+], CwImageComparer.prototype, "position", 2);
+__decorateClass([
+  watch("position", { waitUntilFirstUpdate: true })
+], CwImageComparer.prototype, "handlePositionChange", 1);
+
+export {
+  CwImageComparer
+};