@cordwainer/cw-elements 1.3.0-beta.1 → 1.3.1

package/cdn/chunks/chunk.PDZ7YNFP.js

@@ -0,0 +1,120 @@
+import {
+  CwIcon
+} from "./chunk.YFJYUP6K.js";
+import {
+  watch
+} from "./chunk.RB5L7E7Z.js";
+import {
+  component_styles_default
+} from "./chunk.NJIHXHXI.js";
+import {
+  CwElement,
+  e,
+  n,
+  r
+} from "./chunk.AUPWAEKA.js";
+import {
+  animated_image_styles_default
+} from "./chunk.YOOQFG5Z.js";
+import {
+  b
+} from "./chunk.6A2LG33L.js";
+import {
+  __decorateClass
+} from "./chunk.QIOX6AG5.js";
+
+// src/components/animated-image/animated-image.component.ts
+var CwAnimatedImage = class extends CwElement {
+  constructor() {
+    super(...arguments);
+    this.isLoaded = false;
+  }
+  handleClick() {
+    this.play = !this.play;
+  }
+  handleLoad() {
+    const canvas = document.createElement("canvas");
+    const { width, height } = this.animatedImage;
+    canvas.width = width;
+    canvas.height = height;
+    canvas.getContext("2d").drawImage(this.animatedImage, 0, 0, width, height);
+    this.frozenFrame = canvas.toDataURL("image/gif");
+    if (!this.isLoaded) {
+      this.emit("cw-load");
+      this.isLoaded = true;
+    }
+  }
+  handleError() {
+    this.emit("cw-error");
+  }
+  handlePlayChange() {
+    if (this.play) {
+      this.animatedImage.src = "";
+      this.animatedImage.src = this.src;
+    }
+  }
+  handleSrcChange() {
+    this.isLoaded = false;
+  }
+  render() {
+    return b`
+      <div class="animated-image">
+        <img
+          class="animated-image__animated"
+          src=${this.src}
+          alt=${this.alt}
+          crossorigin="anonymous"
+          aria-hidden=${this.play ? "false" : "true"}
+          @click=${this.handleClick}
+          @load=${this.handleLoad}
+          @error=${this.handleError}
+        />
+
+        ${this.isLoaded ? b`
+                <img
+                  class="animated-image__frozen"
+                  src=${this.frozenFrame}
+                  alt=${this.alt}
+                  aria-hidden=${this.play ? "true" : "false"}
+                  @click=${this.handleClick}
+                />
+
+                <div part="control-box" class="animated-image__control-box">
+                  <slot name="play-icon"><cw-icon name="play-fill" library="system"></cw-icon></slot>
+                  <slot name="pause-icon"><cw-icon name="pause-fill" library="system"></cw-icon></slot>
+                </div>
+              ` : ""}
+      </div>
+    `;
+  }
+};
+CwAnimatedImage.styles = [component_styles_default, animated_image_styles_default];
+CwAnimatedImage.dependencies = { "cw-icon": CwIcon };
+__decorateClass([
+  e(".animated-image__animated")
+], CwAnimatedImage.prototype, "animatedImage", 2);
+__decorateClass([
+  r()
+], CwAnimatedImage.prototype, "frozenFrame", 2);
+__decorateClass([
+  r()
+], CwAnimatedImage.prototype, "isLoaded", 2);
+__decorateClass([
+  n()
+], CwAnimatedImage.prototype, "src", 2);
+__decorateClass([
+  n()
+], CwAnimatedImage.prototype, "alt", 2);
+__decorateClass([
+  n({ type: Boolean, reflect: true })
+], CwAnimatedImage.prototype, "play", 2);
+__decorateClass([
+  watch("play", { waitUntilFirstUpdate: true })
+], CwAnimatedImage.prototype, "handlePlayChange", 1);
+__decorateClass([
+  watch("src")
+], CwAnimatedImage.prototype, "handleSrcChange", 1);
+
+export {
+  CwAnimatedImage
+};

package/cdn/chunks/chunk.PFOLONAM.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.75ZQOYXC.js";
+import {
+  e
+} from "./chunk.VBR4VS53.js";
+import {
+  CwIcon
+} from "./chunk.YFJYUP6K.js";
+import {
+  watch
+} from "./chunk.RB5L7E7Z.js";
+import {
+  component_styles_default
+} from "./chunk.NJIHXHXI.js";
+import {
+  CwElement,
+  e as e2,
+  n
+} from "./chunk.AUPWAEKA.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
+};

package/cdn/chunks/chunk.PSX6WTHG.js

@@ -0,0 +1,11 @@
+import {
+  CwSkeleton
+} from "./chunk.SDDRACRW.js";
+
+// src/components/skeleton/skeleton.ts
+var skeleton_default = CwSkeleton;
+CwSkeleton.define("cw-skeleton");
+
+export {
+  skeleton_default
+};

package/cdn/chunks/chunk.Q34MTVQ2.js

@@ -0,0 +1,27 @@
+import {
+  CwDetails
+} from "./chunk.SLYRCKRW.js";
+
+// src/react/details/index.ts
+import * as React from "react";
+import { createComponent } from "@lit/react";
+import "@lit/react";
+var tagName = "cw-details";
+CwDetails.define("cw-details");
+var reactWrapper = createComponent({
+  tagName,
+  elementClass: CwDetails,
+  react: React,
+  events: {
+    onCwShow: "cw-show",
+    onCwAfterShow: "cw-after-show",
+    onCwHide: "cw-hide",
+    onCwAfterHide: "cw-after-hide"
+  },
+  displayName: "CwDetails"
+});
+var details_default = reactWrapper;
+
+export {
+  details_default
+};

package/cdn/chunks/chunk.Q5UNBWHQ.js

@@ -0,0 +1,285 @@
+import {
+  primary_navigation_item_styles_default
+} from "./chunk.BTEDTKBG.js";
+import {
+  CwDropdown
+} from "./chunk.HIAFPFTI.js";
+import {
+  getAnimation,
+  setDefaultAnimation
+} from "./chunk.JSLXCIMZ.js";
+import {
+  animateTo,
+  shimKeyframesHeightAuto,
+  stopAnimations
+} from "./chunk.3CTNMS55.js";
+import {
+  LocalizeController
+} from "./chunk.75ZQOYXC.js";
+import {
+  o
+} from "./chunk.LRAERZML.js";
+import {
+  e
+} from "./chunk.VBR4VS53.js";
+import {
+  CwIcon
+} from "./chunk.YFJYUP6K.js";
+import {
+  watch
+} from "./chunk.RB5L7E7Z.js";
+import {
+  component_styles_default
+} from "./chunk.NJIHXHXI.js";
+import {
+  CwElement,
+  e as e2,
+  n,
+  r
+} from "./chunk.AUPWAEKA.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 id = 0;
+var CwPrimaryNavigationItem = class extends CwElement {
+  constructor() {
+    super(...arguments);
+    this.componentId = `cw-primary-navigation-item-${++id}`;
+    this.localize = new LocalizeController(this);
+    this.hasMenu = false;
+    this.open = false;
+    this.rel = "noreferrer noopener";
+    this.current = false;
+    this.mobile = false;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.setAttribute("role", "listitem");
+  }
+  updated(changedProperties) {
+    super.updated(changedProperties);
+    if (this.panel && this.panel !== this.lastPanel) {
+      this.panel.hidden = !this.open;
+    }
+    this.lastPanel = this.panel;
+  }
+  // Queried by light-DOM `slot` attribute rather than the currently-rendered `<slot name="menu">` node's
+  // `assignedElements()` — which branch (and therefore which slot node) is active can change independently of
+  // this, so re-deriving from the host's actual children stays correct across a mobile/desktop switch.
+  syncMenuMobileState() {
+    [...this.children].forEach((el) => {
+      if (el.slot === "menu" && el.tagName.toLowerCase() === "cw-primary-navigation-menu") {
+        el.mobile = this.mobile;
+      }
+    });
+  }
+  handleMenuSlotChange() {
+    var _a;
+    this.hasMenu = Boolean((_a = this.menuSlot) == null ? void 0 : _a.assignedElements({ flatten: true }).length);
+    this.syncMenuMobileState();
+  }
+  handleDropdownShow() {
+    this.open = true;
+  }
+  handleDropdownHide() {
+    this.open = false;
+  }
+  handleTriggerClick() {
+    if (this.open) {
+      this.hide();
+    } else {
+      this.show();
+    }
+  }
+  handleMobileChange() {
+    var _a;
+    (_a = this.dropdown) == null ? void 0 : _a.hide();
+    this.open = false;
+    this.syncMenuMobileState();
+  }
+  async showInlineMenu() {
+    if (this.open) {
+      return void 0;
+    }
+    const cwShow = this.emit("cw-show", { cancelable: true });
+    if (cwShow.defaultPrevented) {
+      return void 0;
+    }
+    this.open = true;
+    await stopAnimations(this.panel);
+    this.panel.hidden = false;
+    const { keyframes, options } = getAnimation(this, "primary-navigation-item.show", { dir: this.localize.dir() });
+    await animateTo(this.panel, shimKeyframesHeightAuto(keyframes, this.panel.scrollHeight), options);
+    this.emit("cw-after-show");
+    return void 0;
+  }
+  async hideInlineMenu() {
+    if (!this.open) {
+      return void 0;
+    }
+    const cwHide = this.emit("cw-hide", { cancelable: true });
+    if (cwHide.defaultPrevented) {
+      return void 0;
+    }
+    await stopAnimations(this.panel);
+    const { keyframes, options } = getAnimation(this, "primary-navigation-item.hide", { dir: this.localize.dir() });
+    await animateTo(this.panel, shimKeyframesHeightAuto(keyframes, this.panel.scrollHeight), options);
+    this.panel.hidden = true;
+    this.open = false;
+    this.emit("cw-after-hide");
+    return void 0;
+  }
+  /** Opens the item's dropdown, if it has one. No-op for link/plain items. */
+  async show() {
+    var _a;
+    if (this.mobile) {
+      return this.showInlineMenu();
+    }
+    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;
+    if (this.mobile) {
+      return this.hideInlineMenu();
+    }
+    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 && this.mobile) {
+      content = b`
+        <button
+          part="trigger"
+          type="button"
+          id=${`${this.componentId}-trigger`}
+          class="primary-navigation-item__trigger"
+          aria-expanded=${this.open ? "true" : "false"}
+          aria-controls=${`${this.componentId}-panel`}
+          @click=${this.handleTriggerClick}
+        >
+          <slot></slot>
+          <cw-icon library="system" name="chevron-down"></cw-icon>
+        </button>
+
+        <div
+          part="panel"
+          id=${`${this.componentId}-panel`}
+          class="primary-navigation-item__panel"
+          role="region"
+          aria-labelledby=${`${this.componentId}-trigger`}
+        >
+          <slot name="menu" @slotchange=${this.handleMenuSlotChange}></slot>
+        </div>
+      `;
+    } 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>
+          <slot name="menu" @slotchange=${this.handleMenuSlotChange}></slot>
+        </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,
+      "primary-navigation-item--open": this.open,
+      "primary-navigation-item--mobile": this.mobile
+    })}
+      >
+        ${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([
+  e2(".primary-navigation-item__panel")
+], CwPrimaryNavigationItem.prototype, "panel", 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);
+__decorateClass([
+  n({ type: Boolean, reflect: true })
+], CwPrimaryNavigationItem.prototype, "mobile", 2);
+__decorateClass([
+  watch("mobile", { waitUntilFirstUpdate: true })
+], CwPrimaryNavigationItem.prototype, "handleMobileChange", 1);
+setDefaultAnimation("primary-navigation-item.show", {
+  keyframes: [
+    { height: "0", opacity: "0" },
+    { height: "auto", opacity: "1" }
+  ],
+  options: { duration: 200, easing: "ease" }
+});
+setDefaultAnimation("primary-navigation-item.hide", {
+  keyframes: [
+    { height: "auto", opacity: "1" },
+    { height: "0", opacity: "0" }
+  ],
+  options: { duration: 200, easing: "ease" }
+});
+
+export {
+  CwPrimaryNavigationItem
+};

package/cdn/chunks/chunk.Q76OMFVU.js

@@ -0,0 +1,82 @@
+import {
+  resize_observer_styles_default
+} from "./chunk.5TZUVIJX.js";
+import {
+  watch
+} from "./chunk.RB5L7E7Z.js";
+import {
+  component_styles_default
+} from "./chunk.NJIHXHXI.js";
+import {
+  CwElement,
+  n
+} from "./chunk.AUPWAEKA.js";
+import {
+  b
+} from "./chunk.6A2LG33L.js";
+import {
+  __decorateClass
+} from "./chunk.QIOX6AG5.js";
+
+// src/components/resize-observer/resize-observer.component.ts
+var CwResizeObserver = class extends CwElement {
+  constructor() {
+    super(...arguments);
+    this.observedElements = [];
+    this.disabled = false;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.resizeObserver = new ResizeObserver((entries) => {
+      this.emit("cw-resize", { detail: { entries } });
+    });
+    if (!this.disabled) {
+      this.startObserver();
+    }
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.stopObserver();
+  }
+  handleSlotChange() {
+    if (!this.disabled) {
+      this.startObserver();
+    }
+  }
+  startObserver() {
+    const slot = this.shadowRoot.querySelector("slot");
+    if (slot !== null) {
+      const elements = slot.assignedElements({ flatten: true });
+      this.observedElements.forEach((el) => this.resizeObserver.unobserve(el));
+      this.observedElements = [];
+      elements.forEach((el) => {
+        this.resizeObserver.observe(el);
+        this.observedElements.push(el);
+      });
+    }
+  }
+  stopObserver() {
+    this.resizeObserver.disconnect();
+  }
+  handleDisabledChange() {
+    if (this.disabled) {
+      this.stopObserver();
+    } else {
+      this.startObserver();
+    }
+  }
+  render() {
+    return b` <slot @slotchange=${this.handleSlotChange}></slot> `;
+  }
+};
+CwResizeObserver.styles = [component_styles_default, resize_observer_styles_default];
+__decorateClass([
+  n({ type: Boolean, reflect: true })
+], CwResizeObserver.prototype, "disabled", 2);
+__decorateClass([
+  watch("disabled", { waitUntilFirstUpdate: true })
+], CwResizeObserver.prototype, "handleDisabledChange", 1);
+
+export {
+  CwResizeObserver
+};