@cordwainer/cw-elements 1.3.0-alpha.4 → 1.3.0-beta.0

package/dist/chunks/chunk.E7SUXXYY.js

@@ -0,0 +1,21 @@
+import {
+  CwVisuallyHidden
+} from "./chunk.OJIRLNES.js";
+
+// src/react/visually-hidden/index.ts
+import * as React from "react";
+import { createComponent } from "@lit/react";
+var tagName = "cw-visually-hidden";
+CwVisuallyHidden.define("cw-visually-hidden");
+var reactWrapper = createComponent({
+  tagName,
+  elementClass: CwVisuallyHidden,
+  react: React,
+  events: {},
+  displayName: "CwVisuallyHidden"
+});
+var visually_hidden_default = reactWrapper;
+
+export {
+  visually_hidden_default
+};

package/dist/chunks/chunk.EFC5NSKA.js

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

package/dist/chunks/chunk.EFL365ZE.js

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

package/dist/chunks/chunk.EUH3XOYG.js

@@ -0,0 +1,24 @@
+import {
+  CwPopup
+} from "./chunk.KSZDSUZT.js";
+
+// src/react/popup/index.ts
+import * as React from "react";
+import { createComponent } from "@lit/react";
+import "@lit/react";
+var tagName = "cw-popup";
+CwPopup.define("cw-popup");
+var reactWrapper = createComponent({
+  tagName,
+  elementClass: CwPopup,
+  react: React,
+  events: {
+    onCwReposition: "cw-reposition"
+  },
+  displayName: "CwPopup"
+});
+var popup_default = reactWrapper;
+
+export {
+  popup_default
+};

package/dist/chunks/chunk.EVIIWCSJ.js

@@ -0,0 +1,21 @@
+import {
+  CwPrimaryNavigationMenu
+} from "./chunk.3J4UJ3E2.js";
+
+// src/react/primary-navigation-menu/index.ts
+import * as React from "react";
+import { createComponent } from "@lit/react";
+var tagName = "cw-primary-navigation-menu";
+CwPrimaryNavigationMenu.define("cw-primary-navigation-menu");
+var reactWrapper = createComponent({
+  tagName,
+  elementClass: CwPrimaryNavigationMenu,
+  react: React,
+  events: {},
+  displayName: "CwPrimaryNavigationMenu"
+});
+var primary_navigation_menu_default = reactWrapper;
+
+export {
+  primary_navigation_menu_default
+};

package/dist/chunks/chunk.FHZ2BION.js

@@ -0,0 +1,11 @@
+import {
+  CwMutationObserver
+} from "./chunk.HBLSLABK.js";
+
+// src/components/mutation-observer/mutation-observer.ts
+var mutation_observer_default = CwMutationObserver;
+CwMutationObserver.define("cw-mutation-observer");
+
+export {
+  mutation_observer_default
+};

package/dist/chunks/chunk.FSNVYQE7.js

@@ -0,0 +1,11 @@
+import {
+  CwPrimaryNavigationItem
+} from "./chunk.I2OV67N4.js";
+
+// src/components/primary-navigation-item/primary-navigation-item.ts
+var primary_navigation_item_default = CwPrimaryNavigationItem;
+CwPrimaryNavigationItem.define("cw-primary-navigation-item");
+
+export {
+  primary_navigation_item_default
+};

package/dist/chunks/chunk.G3KHXTL7.js

@@ -0,0 +1,59 @@
+import {
+  badge_styles_default
+} from "./chunk.35DMG7O7.js";
+import {
+  component_styles_default
+} from "./chunk.TUVJKY7S.js";
+import {
+  CwElement
+} from "./chunk.Z2HD6GN7.js";
+import {
+  __decorateClass
+} from "./chunk.Q44EX5TP.js";
+
+// src/components/badge/badge.component.ts
+import { classMap } from "lit/directives/class-map.js";
+import { html } from "lit";
+import { property } from "lit/decorators.js";
+var CwBadge = class extends CwElement {
+  constructor() {
+    super(...arguments);
+    this.variant = "primary";
+    this.pill = false;
+    this.pulse = false;
+  }
+  render() {
+    return html`
+      <span
+        part="base"
+        class=${classMap({
+      badge: true,
+      "badge--primary": this.variant === "primary",
+      "badge--success": this.variant === "success",
+      "badge--neutral": this.variant === "neutral",
+      "badge--warning": this.variant === "warning",
+      "badge--danger": this.variant === "danger",
+      "badge--pill": this.pill,
+      "badge--pulse": this.pulse
+    })}
+        role="status"
+      >
+        <slot></slot>
+      </span>
+    `;
+  }
+};
+CwBadge.styles = [component_styles_default, badge_styles_default];
+__decorateClass([
+  property({ reflect: true })
+], CwBadge.prototype, "variant", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], CwBadge.prototype, "pill", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], CwBadge.prototype, "pulse", 2);
+
+export {
+  CwBadge
+};

package/dist/chunks/chunk.G42AQUFM.js

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

package/dist/chunks/chunk.GGF7QHO6.js

@@ -0,0 +1,75 @@
+import {
+  include_styles_default
+} from "./chunk.FY7IKLNL.js";
+import {
+  requestInclude
+} from "./chunk.XNEONNEJ.js";
+import {
+  watch
+} from "./chunk.GQZ7EGMM.js";
+import {
+  component_styles_default
+} from "./chunk.TUVJKY7S.js";
+import {
+  CwElement
+} from "./chunk.Z2HD6GN7.js";
+import {
+  __decorateClass
+} from "./chunk.Q44EX5TP.js";
+
+// src/components/include/include.component.ts
+import { html } from "lit";
+import { property } from "lit/decorators.js";
+var CwInclude = class extends CwElement {
+  constructor() {
+    super(...arguments);
+    this.mode = "cors";
+    this.allowScripts = false;
+  }
+  executeScript(script) {
+    const newScript = document.createElement("script");
+    [...script.attributes].forEach((attr) => newScript.setAttribute(attr.name, attr.value));
+    newScript.textContent = script.textContent;
+    script.parentNode.replaceChild(newScript, script);
+  }
+  async handleSrcChange() {
+    try {
+      const src = this.src;
+      const file = await requestInclude(src, this.mode);
+      if (src !== this.src) {
+        return;
+      }
+      if (!file.ok) {
+        this.emit("cw-error", { detail: { status: file.status } });
+        return;
+      }
+      this.innerHTML = file.html;
+      if (this.allowScripts) {
+        [...this.querySelectorAll("script")].forEach((script) => this.executeScript(script));
+      }
+      this.emit("cw-load");
+    } catch (e) {
+      this.emit("cw-error", { detail: { status: -1 } });
+    }
+  }
+  render() {
+    return html`<slot></slot>`;
+  }
+};
+CwInclude.styles = [component_styles_default, include_styles_default];
+__decorateClass([
+  property()
+], CwInclude.prototype, "src", 2);
+__decorateClass([
+  property()
+], CwInclude.prototype, "mode", 2);
+__decorateClass([
+  property({ attribute: "allow-scripts", type: Boolean })
+], CwInclude.prototype, "allowScripts", 2);
+__decorateClass([
+  watch("src")
+], CwInclude.prototype, "handleSrcChange", 1);
+
+export {
+  CwInclude
+};

package/dist/chunks/chunk.GIXNLYOK.js

@@ -0,0 +1,213 @@
+import {
+  animation_styles_default
+} from "./chunk.XVVDUPMB.js";
+import {
+  animations
+} from "./chunk.LSCK5HYK.js";
+import {
+  watch
+} from "./chunk.GQZ7EGMM.js";
+import {
+  component_styles_default
+} from "./chunk.TUVJKY7S.js";
+import {
+  CwElement
+} from "./chunk.Z2HD6GN7.js";
+import {
+  __decorateClass
+} from "./chunk.Q44EX5TP.js";
+
+// src/components/animation/animation.component.ts
+import { html } from "lit";
+import { property, queryAsync } from "lit/decorators.js";
+var CwAnimation = class extends CwElement {
+  constructor() {
+    super(...arguments);
+    this.hasStarted = false;
+    this.name = "none";
+    this.play = false;
+    this.delay = 0;
+    this.direction = "normal";
+    this.duration = 1e3;
+    this.easing = "linear";
+    this.endDelay = 0;
+    this.fill = "auto";
+    this.iterations = Infinity;
+    this.iterationStart = 0;
+    this.playbackRate = 1;
+    this.handleAnimationFinish = () => {
+      this.play = false;
+      this.hasStarted = false;
+      this.emit("cw-finish");
+    };
+    this.handleAnimationCancel = () => {
+      this.play = false;
+      this.hasStarted = false;
+      this.emit("cw-cancel");
+    };
+  }
+  /** Gets and sets the current animation time. */
+  get currentTime() {
+    var _a, _b;
+    return (_b = (_a = this.animation) == null ? void 0 : _a.currentTime) != null ? _b : 0;
+  }
+  set currentTime(time) {
+    if (this.animation) {
+      this.animation.currentTime = time;
+    }
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.createAnimation();
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.destroyAnimation();
+  }
+  handleSlotChange() {
+    this.destroyAnimation();
+    this.createAnimation();
+  }
+  async createAnimation() {
+    var _a, _b;
+    const easing = (_a = animations.easings[this.easing]) != null ? _a : this.easing;
+    const keyframes = (_b = this.keyframes) != null ? _b : animations[this.name];
+    const slot = await this.defaultSlot;
+    const element = slot.assignedElements()[0];
+    if (!element || !keyframes) {
+      return false;
+    }
+    this.destroyAnimation();
+    this.animation = element.animate(keyframes, {
+      delay: this.delay,
+      direction: this.direction,
+      duration: this.duration,
+      easing,
+      endDelay: this.endDelay,
+      fill: this.fill,
+      iterationStart: this.iterationStart,
+      iterations: this.iterations
+    });
+    this.animation.playbackRate = this.playbackRate;
+    this.animation.addEventListener("cancel", this.handleAnimationCancel);
+    this.animation.addEventListener("finish", this.handleAnimationFinish);
+    if (this.play) {
+      this.hasStarted = true;
+      this.emit("cw-start");
+    } else {
+      this.animation.pause();
+    }
+    return true;
+  }
+  destroyAnimation() {
+    if (this.animation) {
+      this.animation.cancel();
+      this.animation.removeEventListener("cancel", this.handleAnimationCancel);
+      this.animation.removeEventListener("finish", this.handleAnimationFinish);
+      this.hasStarted = false;
+    }
+  }
+  handleAnimationChange() {
+    if (!this.hasUpdated) {
+      return;
+    }
+    this.createAnimation();
+  }
+  handlePlayChange() {
+    if (this.animation) {
+      if (this.play && !this.hasStarted) {
+        this.hasStarted = true;
+        this.emit("cw-start");
+      }
+      if (this.play) {
+        this.animation.play();
+      } else {
+        this.animation.pause();
+      }
+      return true;
+    }
+    return false;
+  }
+  handlePlaybackRateChange() {
+    if (this.animation) {
+      this.animation.playbackRate = this.playbackRate;
+    }
+  }
+  /** Clears all keyframe effects caused by this animation and aborts its playback. */
+  cancel() {
+    var _a;
+    (_a = this.animation) == null ? void 0 : _a.cancel();
+  }
+  /** Sets the playback time to the end of the animation corresponding to the current playback direction. */
+  finish() {
+    var _a;
+    (_a = this.animation) == null ? void 0 : _a.finish();
+  }
+  render() {
+    return html` <slot @slotchange=${this.handleSlotChange}></slot> `;
+  }
+};
+CwAnimation.styles = [component_styles_default, animation_styles_default];
+__decorateClass([
+  queryAsync("slot")
+], CwAnimation.prototype, "defaultSlot", 2);
+__decorateClass([
+  property()
+], CwAnimation.prototype, "name", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], CwAnimation.prototype, "play", 2);
+__decorateClass([
+  property({ type: Number })
+], CwAnimation.prototype, "delay", 2);
+__decorateClass([
+  property()
+], CwAnimation.prototype, "direction", 2);
+__decorateClass([
+  property({ type: Number })
+], CwAnimation.prototype, "duration", 2);
+__decorateClass([
+  property()
+], CwAnimation.prototype, "easing", 2);
+__decorateClass([
+  property({ attribute: "end-delay", type: Number })
+], CwAnimation.prototype, "endDelay", 2);
+__decorateClass([
+  property()
+], CwAnimation.prototype, "fill", 2);
+__decorateClass([
+  property({ type: Number })
+], CwAnimation.prototype, "iterations", 2);
+__decorateClass([
+  property({ attribute: "iteration-start", type: Number })
+], CwAnimation.prototype, "iterationStart", 2);
+__decorateClass([
+  property({ attribute: false })
+], CwAnimation.prototype, "keyframes", 2);
+__decorateClass([
+  property({ attribute: "playback-rate", type: Number })
+], CwAnimation.prototype, "playbackRate", 2);
+__decorateClass([
+  watch([
+    "name",
+    "delay",
+    "direction",
+    "duration",
+    "easing",
+    "endDelay",
+    "fill",
+    "iterations",
+    "iterationsStart",
+    "keyframes"
+  ])
+], CwAnimation.prototype, "handleAnimationChange", 1);
+__decorateClass([
+  watch("play")
+], CwAnimation.prototype, "handlePlayChange", 1);
+__decorateClass([
+  watch("playbackRate")
+], CwAnimation.prototype, "handlePlaybackRateChange", 1);
+
+export {
+  CwAnimation
+};

package/dist/chunks/chunk.GSAR4N5K.js

@@ -0,0 +1,25 @@
+import {
+  CwTabGroup
+} from "./chunk.57UFUC4M.js";
+
+// src/react/tab-group/index.ts
+import * as React from "react";
+import { createComponent } from "@lit/react";
+import "@lit/react";
+var tagName = "cw-tab-group";
+CwTabGroup.define("cw-tab-group");
+var reactWrapper = createComponent({
+  tagName,
+  elementClass: CwTabGroup,
+  react: React,
+  events: {
+    onCwTabShow: "cw-tab-show",
+    onCwTabHide: "cw-tab-hide"
+  },
+  displayName: "CwTabGroup"
+});
+var tab_group_default = reactWrapper;
+
+export {
+  tab_group_default
+};

package/dist/chunks/chunk.GVIMHOKN.js

@@ -0,0 +1,25 @@
+import {
+  CwAnimatedImage
+} from "./chunk.3CBQRJSK.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
+};

package/dist/chunks/chunk.GY2YOQGS.js

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

package/dist/chunks/chunk.GY4MPGXQ.js

@@ -0,0 +1,100 @@
+import {
+  qr_code_styles_default
+} from "./chunk.2IHMH66B.js";
+import {
+  watch
+} from "./chunk.GQZ7EGMM.js";
+import {
+  component_styles_default
+} from "./chunk.TUVJKY7S.js";
+import {
+  CwElement
+} from "./chunk.Z2HD6GN7.js";
+import {
+  __decorateClass
+} from "./chunk.Q44EX5TP.js";
+
+// src/components/qr-code/qr-code.component.ts
+import { html } from "lit";
+import { property, query } from "lit/decorators.js";
+import { styleMap } from "lit/directives/style-map.js";
+import QrCreator from "qr-creator";
+var CwQrCode = class extends CwElement {
+  constructor() {
+    super(...arguments);
+    this.value = "";
+    this.label = "";
+    this.size = 128;
+    this.fill = "black";
+    this.background = "white";
+    this.radius = 0;
+    this.errorCorrection = "H";
+  }
+  firstUpdated() {
+    this.generate();
+  }
+  generate() {
+    if (!this.hasUpdated) {
+      return;
+    }
+    QrCreator.render(
+      {
+        text: this.value,
+        radius: this.radius,
+        ecLevel: this.errorCorrection,
+        fill: this.fill,
+        background: this.background,
+        // We draw the canvas larger and scale its container down to avoid blurring on high-density displays
+        size: this.size * 2
+      },
+      this.canvas
+    );
+  }
+  render() {
+    var _a;
+    return html`
+      <canvas
+        part="base"
+        class="qr-code"
+        role="img"
+        aria-label=${((_a = this.label) == null ? void 0 : _a.length) > 0 ? this.label : this.value}
+        style=${styleMap({
+      width: `${this.size}px`,
+      height: `${this.size}px`
+    })}
+      ></canvas>
+    `;
+  }
+};
+CwQrCode.styles = [component_styles_default, qr_code_styles_default];
+__decorateClass([
+  query("canvas")
+], CwQrCode.prototype, "canvas", 2);
+__decorateClass([
+  property()
+], CwQrCode.prototype, "value", 2);
+__decorateClass([
+  property()
+], CwQrCode.prototype, "label", 2);
+__decorateClass([
+  property({ type: Number })
+], CwQrCode.prototype, "size", 2);
+__decorateClass([
+  property()
+], CwQrCode.prototype, "fill", 2);
+__decorateClass([
+  property()
+], CwQrCode.prototype, "background", 2);
+__decorateClass([
+  property({ type: Number })
+], CwQrCode.prototype, "radius", 2);
+__decorateClass([
+  property({ attribute: "error-correction" })
+], CwQrCode.prototype, "errorCorrection", 2);
+__decorateClass([
+  watch(["background", "errorCorrection", "fill", "radius", "size", "value"])
+], CwQrCode.prototype, "generate", 1);
+
+export {
+  CwQrCode
+};

package/dist/chunks/chunk.H34WSGJJ.js

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