@cordwainer/cw-elements 1.0.3 → 1.1.0-alpha.3

package/cdn/chunks/chunk.7OU3XWCS.js

@@ -0,0 +1,120 @@
+import {
+  CwIcon
+} from "./chunk.PYGN5SMV.js";
+import {
+  watch
+} from "./chunk.RB5L7E7Z.js";
+import {
+  component_styles_default
+} from "./chunk.NJIHXHXI.js";
+import {
+  CwElement,
+  e,
+  n,
+  r
+} from "./chunk.GOEVWHFJ.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.7PW5UITU.js

@@ -0,0 +1,21 @@
+import {
+  CwRelativeTime
+} from "./chunk.MZTIJ5NI.js";
+
+// src/react/relative-time/index.ts
+import * as React from "react";
+import { createComponent } from "@lit/react";
+var tagName = "cw-relative-time";
+CwRelativeTime.define("cw-relative-time");
+var reactWrapper = createComponent({
+  tagName,
+  elementClass: CwRelativeTime,
+  react: React,
+  events: {},
+  displayName: "CwRelativeTime"
+});
+var relative_time_default = reactWrapper;
+
+export {
+  relative_time_default
+};

package/cdn/chunks/chunk.7QBOR7UC.js

@@ -0,0 +1,11 @@
+import {
+  CwAnimatedImage
+} from "./chunk.7OU3XWCS.js";
+
+// src/components/animated-image/animated-image.ts
+var animated_image_default = CwAnimatedImage;
+CwAnimatedImage.define("cw-animated-image");
+
+export {
+  animated_image_default
+};

package/cdn/chunks/chunk.7YLCMHGB.js

@@ -0,0 +1,11 @@
+import {
+  CwTabPanel
+} from "./chunk.ON57KIEN.js";
+
+// src/components/tab-panel/tab-panel.ts
+var tab_panel_default = CwTabPanel;
+CwTabPanel.define("cw-tab-panel");
+
+export {
+  tab_panel_default
+};