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

package/dist/chunks/chunk.TRQJZWXG.js

@@ -0,0 +1,151 @@
+import {
+  image_comparer_styles_default
+} from "./chunk.MXQ455GJ.js";
+import {
+  drag
+} from "./chunk.ESELY2US.js";
+import {
+  clamp
+} from "./chunk.HF7GESMZ.js";
+import {
+  LocalizeController
+} from "./chunk.2H4HZOD6.js";
+import {
+  CwIcon
+} from "./chunk.65WIBETF.js";
+import {
+  watch
+} from "./chunk.GQZ7EGMM.js";
+import {
+  component_styles_default
+} from "./chunk.TUVJKY7S.js";
+import {
+  CwElement
+} from "./chunk.OO6TR3ZT.js";
+import {
+  __decorateClass
+} from "./chunk.Q44EX5TP.js";
+
+// src/components/image-comparer/image-comparer.component.ts
+import { classMap } from "lit/directives/class-map.js";
+import { html } from "lit";
+import { property, query } from "lit/decorators.js";
+import { styleMap } from "lit/directives/style-map.js";
+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 html`
+      <div
+        part="base"
+        id="image-comparer"
+        class=${classMap({
+      "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=${styleMap({
+      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=${styleMap({
+      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([
+  query(".image-comparer")
+], CwImageComparer.prototype, "base", 2);
+__decorateClass([
+  query(".image-comparer__handle")
+], CwImageComparer.prototype, "handle", 2);
+__decorateClass([
+  property({ type: Number, reflect: true })
+], CwImageComparer.prototype, "position", 2);
+__decorateClass([
+  watch("position", { waitUntilFirstUpdate: true })
+], CwImageComparer.prototype, "handlePositionChange", 1);
+
+export {
+  CwImageComparer
+};

package/dist/chunks/chunk.TU4A5K5Q.js

@@ -0,0 +1,100 @@
+import {
+  LocalizeController
+} from "./chunk.2H4HZOD6.js";
+import {
+  CwElement
+} from "./chunk.OO6TR3ZT.js";
+import {
+  __decorateClass
+} from "./chunk.Q44EX5TP.js";
+
+// src/components/relative-time/relative-time.component.ts
+import { html } from "lit";
+import { property, state } from "lit/decorators.js";
+var availableUnits = [
+  { max: 276e4, value: 6e4, unit: "minute" },
+  // max 46 minutes
+  { max: 72e6, value: 36e5, unit: "hour" },
+  // max 20 hours
+  { max: 5184e5, value: 864e5, unit: "day" },
+  // max 6 days
+  { max: 24192e5, value: 6048e5, unit: "week" },
+  // max 28 days
+  { max: 28512e6, value: 2592e6, unit: "month" },
+  // max 11 months
+  { max: Infinity, value: 31536e6, unit: "year" }
+];
+var CwRelativeTime = class extends CwElement {
+  constructor() {
+    super(...arguments);
+    this.localize = new LocalizeController(this);
+    this.isoTime = "";
+    this.relativeTime = "";
+    this.date = /* @__PURE__ */ new Date();
+    this.format = "long";
+    this.numeric = "auto";
+    this.sync = false;
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    clearTimeout(this.updateTimeout);
+  }
+  render() {
+    const now = /* @__PURE__ */ new Date();
+    const then = new Date(this.date);
+    if (isNaN(then.getMilliseconds())) {
+      this.relativeTime = "";
+      this.isoTime = "";
+      return "";
+    }
+    const diff = then.getTime() - now.getTime();
+    const { unit, value } = availableUnits.find((singleUnit) => Math.abs(diff) < singleUnit.max);
+    this.isoTime = then.toISOString();
+    this.relativeTime = this.localize.relativeTime(Math.round(diff / value), unit, {
+      numeric: this.numeric,
+      style: this.format
+    });
+    clearTimeout(this.updateTimeout);
+    if (this.sync) {
+      let nextInterval;
+      if (unit === "minute") {
+        nextInterval = getTimeUntilNextUnit("second");
+      } else if (unit === "hour") {
+        nextInterval = getTimeUntilNextUnit("minute");
+      } else if (unit === "day") {
+        nextInterval = getTimeUntilNextUnit("hour");
+      } else {
+        nextInterval = getTimeUntilNextUnit("day");
+      }
+      this.updateTimeout = window.setTimeout(() => this.requestUpdate(), nextInterval);
+    }
+    return html` <time datetime=${this.isoTime}>${this.relativeTime}</time> `;
+  }
+};
+__decorateClass([
+  state()
+], CwRelativeTime.prototype, "isoTime", 2);
+__decorateClass([
+  state()
+], CwRelativeTime.prototype, "relativeTime", 2);
+__decorateClass([
+  property()
+], CwRelativeTime.prototype, "date", 2);
+__decorateClass([
+  property()
+], CwRelativeTime.prototype, "format", 2);
+__decorateClass([
+  property()
+], CwRelativeTime.prototype, "numeric", 2);
+__decorateClass([
+  property({ type: Boolean })
+], CwRelativeTime.prototype, "sync", 2);
+function getTimeUntilNextUnit(unit) {
+  const units = { second: 1e3, minute: 6e4, hour: 36e5, day: 864e5 };
+  const value = units[unit];
+  return value - Date.now() % value;
+}
+
+export {
+  CwRelativeTime
+};

package/dist/chunks/chunk.TV7SCJXV.js

@@ -0,0 +1,11 @@
+import {
+  CwIconButton
+} from "./chunk.MBQMFOQP.js";
+
+// src/components/icon-button/icon-button.ts
+var icon_button_default = CwIconButton;
+CwIconButton.define("cw-icon-button");
+
+export {
+  icon_button_default
+};

package/dist/chunks/chunk.U5L2NC6X.js

@@ -0,0 +1,192 @@
+import {
+  menu_item_styles_default
+} from "./chunk.5DPEXLAW.js";
+import {
+  SubmenuController
+} from "./chunk.J2HKZ7QL.js";
+import {
+  CwPopup
+} from "./chunk.LOVS45XD.js";
+import {
+  CwSpinner
+} from "./chunk.E5645J52.js";
+import {
+  LocalizeController
+} from "./chunk.2H4HZOD6.js";
+import {
+  HasSlotController,
+  getTextContent
+} from "./chunk.BVGZUUCX.js";
+import {
+  CwIcon
+} from "./chunk.65WIBETF.js";
+import {
+  watch
+} from "./chunk.GQZ7EGMM.js";
+import {
+  component_styles_default
+} from "./chunk.TUVJKY7S.js";
+import {
+  CwElement
+} from "./chunk.OO6TR3ZT.js";
+import {
+  __decorateClass
+} from "./chunk.Q44EX5TP.js";
+
+// src/components/menu-item/menu-item.component.ts
+import { classMap } from "lit/directives/class-map.js";
+import { html } from "lit";
+import { property, query } from "lit/decorators.js";
+var CwMenuItem = class extends CwElement {
+  constructor() {
+    super(...arguments);
+    this.localize = new LocalizeController(this);
+    this.type = "normal";
+    this.checked = false;
+    this.value = "";
+    this.loading = false;
+    this.disabled = false;
+    this.hasSlotController = new HasSlotController(this, "submenu");
+    this.submenuController = new SubmenuController(this, this.hasSlotController);
+    this.handleHostClick = (event) => {
+      if (this.disabled) {
+        event.preventDefault();
+        event.stopImmediatePropagation();
+      }
+    };
+    this.handleMouseOver = (event) => {
+      this.focus();
+      event.stopPropagation();
+    };
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.addEventListener("click", this.handleHostClick);
+    this.addEventListener("mouseover", this.handleMouseOver);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.removeEventListener("click", this.handleHostClick);
+    this.removeEventListener("mouseover", this.handleMouseOver);
+  }
+  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 });
+    }
+  }
+  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);
+  }
+  isSubmenu() {
+    return this.hasSlotController.test("submenu");
+  }
+  render() {
+    const isRtl = this.localize.dir() === "rtl";
+    const isSubmenuExpanded = this.submenuController.isExpanded();
+    return html`
+      <div
+        id="anchor"
+        part="base"
+        class=${classMap({
+      "menu-item": true,
+      "menu-item--rtl": isRtl,
+      "menu-item--checked": this.checked,
+      "menu-item--disabled": this.disabled,
+      "menu-item--loading": this.loading,
+      "menu-item--has-submenu": this.isSubmenu(),
+      "menu-item--submenu-expanded": isSubmenuExpanded
+    })}
+        ?aria-haspopup="${this.isSubmenu()}"
+        ?aria-expanded="${isSubmenuExpanded ? true : false}"
+      >
+        <span part="checked-icon" class="menu-item__check">
+          <cw-icon name="check" library="system" aria-hidden="true"></cw-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 part="submenu-icon" class="menu-item__chevron">
+          <cw-icon name=${isRtl ? "chevron-left" : "chevron-right"} library="system" aria-hidden="true"></cw-icon>
+        </span>
+
+        ${this.submenuController.renderSubmenu()}
+        ${this.loading ? html` <cw-spinner part="spinner" exportparts="base:spinner__base"></cw-spinner> ` : ""}
+      </div>
+    `;
+  }
+};
+CwMenuItem.styles = [component_styles_default, menu_item_styles_default];
+CwMenuItem.dependencies = {
+  "cw-icon": CwIcon,
+  "cw-popup": CwPopup,
+  "cw-spinner": CwSpinner
+};
+__decorateClass([
+  query("slot:not([name])")
+], CwMenuItem.prototype, "defaultSlot", 2);
+__decorateClass([
+  query(".menu-item")
+], CwMenuItem.prototype, "menuItem", 2);
+__decorateClass([
+  property()
+], CwMenuItem.prototype, "type", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], CwMenuItem.prototype, "checked", 2);
+__decorateClass([
+  property()
+], CwMenuItem.prototype, "value", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], CwMenuItem.prototype, "loading", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], CwMenuItem.prototype, "disabled", 2);
+__decorateClass([
+  watch("checked")
+], CwMenuItem.prototype, "handleCheckedChange", 1);
+__decorateClass([
+  watch("disabled")
+], CwMenuItem.prototype, "handleDisabledChange", 1);
+__decorateClass([
+  watch("type")
+], CwMenuItem.prototype, "handleTypeChange", 1);
+
+export {
+  CwMenuItem
+};

package/dist/chunks/chunk.U7GRVPCQ.js

@@ -0,0 +1,25 @@
+import {
+  CwIcon
+} from "./chunk.65WIBETF.js";
+
+// src/react/icon/index.ts
+import * as React from "react";
+import { createComponent } from "@lit/react";
+import "@lit/react";
+var tagName = "cw-icon";
+CwIcon.define("cw-icon");
+var reactWrapper = createComponent({
+  tagName,
+  elementClass: CwIcon,
+  react: React,
+  events: {
+    onCwLoad: "cw-load",
+    onCwError: "cw-error"
+  },
+  displayName: "CwIcon"
+});
+var icon_default = reactWrapper;
+
+export {
+  icon_default
+};

package/dist/chunks/chunk.UE2ILSYG.js

@@ -0,0 +1,45 @@
+import {
+  skeleton_styles_default
+} from "./chunk.DLH7IIPN.js";
+import {
+  component_styles_default
+} from "./chunk.TUVJKY7S.js";
+import {
+  CwElement
+} from "./chunk.OO6TR3ZT.js";
+import {
+  __decorateClass
+} from "./chunk.Q44EX5TP.js";
+
+// src/components/skeleton/skeleton.component.ts
+import { classMap } from "lit/directives/class-map.js";
+import { html } from "lit";
+import { property } from "lit/decorators.js";
+var CwSkeleton = class extends CwElement {
+  constructor() {
+    super(...arguments);
+    this.effect = "none";
+  }
+  render() {
+    return html`
+      <div
+        part="base"
+        class=${classMap({
+      skeleton: true,
+      "skeleton--pulse": this.effect === "pulse",
+      "skeleton--sheen": this.effect === "sheen"
+    })}
+      >
+        <div part="indicator" class="skeleton__indicator"></div>
+      </div>
+    `;
+  }
+};
+CwSkeleton.styles = [component_styles_default, skeleton_styles_default];
+__decorateClass([
+  property()
+], CwSkeleton.prototype, "effect", 2);
+
+export {
+  CwSkeleton
+};

package/dist/chunks/chunk.UIIEPLWX.js

@@ -0,0 +1,117 @@
+import {
+  tab_styles_default
+} from "./chunk.R3YIHCDD.js";
+import {
+  CwIconButton
+} from "./chunk.MBQMFOQP.js";
+import {
+  LocalizeController
+} from "./chunk.2H4HZOD6.js";
+import {
+  watch
+} from "./chunk.GQZ7EGMM.js";
+import {
+  component_styles_default
+} from "./chunk.TUVJKY7S.js";
+import {
+  CwElement
+} from "./chunk.OO6TR3ZT.js";
+import {
+  __decorateClass
+} from "./chunk.Q44EX5TP.js";
+
+// src/components/tab/tab.component.ts
+import { classMap } from "lit/directives/class-map.js";
+import { html } from "lit";
+import { property, query } from "lit/decorators.js";
+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 html`
+      <div
+        part="base"
+        class=${classMap({
+      tab: true,
+      "tab--active": this.active,
+      "tab--closable": this.closable,
+      "tab--disabled": this.disabled
+    })}
+      >
+        <slot></slot>
+        ${this.closable ? html`
+              <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([
+  query(".tab")
+], CwTab.prototype, "tab", 2);
+__decorateClass([
+  property({ reflect: true })
+], CwTab.prototype, "panel", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], CwTab.prototype, "active", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], CwTab.prototype, "closable", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], CwTab.prototype, "disabled", 2);
+__decorateClass([
+  property({ 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/dist/chunks/chunk.UJHPENSV.js

@@ -0,0 +1,24 @@
+import {
+  CwMutationObserver
+} from "./chunk.6TJHG4PU.js";
+
+// src/react/mutation-observer/index.ts
+import * as React from "react";
+import { createComponent } from "@lit/react";
+import "@lit/react";
+var tagName = "cw-mutation-observer";
+CwMutationObserver.define("cw-mutation-observer");
+var reactWrapper = createComponent({
+  tagName,
+  elementClass: CwMutationObserver,
+  react: React,
+  events: {
+    onCwMutation: "cw-mutation"
+  },
+  displayName: "CwMutationObserver"
+});
+var mutation_observer_default = reactWrapper;
+
+export {
+  mutation_observer_default
+};

package/dist/chunks/chunk.UMPAKE6J.js

@@ -0,0 +1,11 @@
+import {
+  CwQrCode
+} from "./chunk.27QQRPIN.js";
+
+// src/components/qr-code/qr-code.ts
+var qr_code_default = CwQrCode;
+CwQrCode.define("cw-qr-code");
+
+export {
+  qr_code_default
+};

package/dist/chunks/chunk.UQVSN6I5.js

@@ -0,0 +1,11 @@
+import {
+  CwInclude
+} from "./chunk.KGGUJKKM.js";
+
+// src/components/include/include.ts
+var include_default = CwInclude;
+CwInclude.define("cw-include");
+
+export {
+  include_default
+};