@cordwainer/cw-elements 1.3.1 → 1.3.3

package/cdn/chunks/chunk.PDZ7YNFP.js

@@ -1,120 +0,0 @@
-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

@@ -1,158 +0,0 @@
-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

@@ -1,11 +0,0 @@
-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

@@ -1,27 +0,0 @@
-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

@@ -1,285 +0,0 @@
-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

@@ -1,82 +0,0 @@
-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
-};