@iyulab/chat-components 0.4.0 → 0.5.1

package/dist/components/widgets/UChartWidget.component.js

@@ -1,180 +0,0 @@
-import { nothing, html } from 'lit';
-import { property, query, state } from 'lit/decorators.js';
-import { Chart } from 'chart.js/auto';
-import { UElement } from '@iyulab/components/dist/components/UElement.js';
-import { UIcon } from '@iyulab/components/dist/components/icon/UIcon.component.js';
-import { UButton } from '@iyulab/components/dist/components/button/UButton.component.js';
-import { styles } from './UChartWidget.styles.js';
-
-var __defProp = Object.defineProperty;
-var __decorateClass = (decorators, target, key, kind) => {
-  var result = void 0 ;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (decorator(target, key, result) ) || result;
-  if (result) __defProp(target, key, result);
-  return result;
-};
-class UChartWidget extends UElement {
-  constructor() {
-    super(...arguments);
-    this.error = null;
-    this.chartjs = null;
-  }
-  static {
-    this.styles = [super.styles, styles];
-  }
-  static {
-    this.dependencies = {
-      "u-icon": UIcon,
-      "u-button": UButton
-    };
-  }
-  connectedCallback() {
-    super.connectedCallback();
-    this.observer = new MutationObserver(() => {
-      this.applyTheme();
-      this.createChart();
-    });
-    this.observer.observe(document.documentElement, {
-      attributes: true,
-      attributeFilter: ["theme"]
-    });
-  }
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    this.observer?.disconnect();
-    this.destroyChart();
-  }
-  updated(changedProperties) {
-    super.updated(changedProperties);
-    if (changedProperties.has("data") || changedProperties.has("type") || changedProperties.has("options")) {
-      this.createChart();
-    }
-  }
-  render() {
-    if (!this.data) return nothing;
-    return html`
-      <div class="toolbar">
-        <div class="toolbar-left"></div>
-        <div class="toolbar-right">
-          <u-button title="PNG Download" @click=${this.handleDownloadPNG}>
-            PNG
-            <u-icon slot="suffix" lib="internal" name="download"></u-icon>
-          </u-button>
-          <u-button title="JSON Download" @click=${this.handleDownloadJSON}>
-            JSON
-            <u-icon slot="suffix" lib="internal" name="download"></u-icon>
-          </u-button>
-          <u-button title="Full Screen" @click=${this.handleFullscreen}>
-            <u-icon lib="internal" name="box-arrow-up-right"></u-icon>
-          </u-button>
-        </div>
-      </div>
-      <div class="viewport">
-        <canvas></canvas>
-        <div class="error-overlay" ?hidden=${!this.error}>
-          <u-icon lib="internal" name="exclamation-triangle-fill"></u-icon>
-          <span>${this.error}</span>
-        </div>
-      </div>
-    `;
-  }
-  /** Chart.js로 차트 생성 */
-  createChart() {
-    if (!this.canvas) return;
-    if (!this.type || !this.data) return;
-    this.destroyChart();
-    this.error = null;
-    const ctx = this.canvas.getContext("2d");
-    if (!ctx) {
-      this.error = "Canvas 2D context를 가져올 수 없습니다.";
-      return;
-    }
-    try {
-      this.applyTheme();
-      this.chartjs = new Chart(ctx, {
-        type: this.type,
-        data: this.data,
-        options: {
-          responsive: true,
-          maintainAspectRatio: true,
-          ...this.options
-        }
-      });
-    } catch (e) {
-      this.error = e instanceof Error ? e.message : String(e);
-    }
-  }
-  /** 기존 차트 인스턴스 제거 */
-  destroyChart() {
-    if (this.chartjs) {
-      this.chartjs.destroy();
-      this.chartjs = null;
-    }
-  }
-  /** 현재 테마의 CSS 변수를 읽어 Chart.defaults에 전역 적용 */
-  applyTheme() {
-    const css = (v) => getComputedStyle(this).getPropertyValue(v).trim();
-    const textColor = css("--u-txt-color");
-    const weakColor = css("--u-txt-color-weak");
-    const borderColor = css("--u-border-color");
-    const bgColor = css("--u-bg-color");
-    Chart.defaults.color = textColor;
-    Chart.defaults.borderColor = borderColor;
-    Chart.defaults.plugins.tooltip.backgroundColor = bgColor;
-    Chart.defaults.plugins.tooltip.titleColor = textColor;
-    Chart.defaults.plugins.tooltip.bodyColor = weakColor;
-    Chart.defaults.plugins.tooltip.borderColor = borderColor;
-    Chart.defaults.plugins.tooltip.borderWidth = 1;
-    Chart.defaults.scale.ticks.color = weakColor;
-    Chart.defaults.scale.grid.color = borderColor;
-  }
-  handleDownloadPNG() {
-    if (!this.chartjs) return;
-    const url = this.chartjs.toBase64Image("image/png", 1);
-    const a = document.createElement("a");
-    a.href = url;
-    a.download = "chart-image.png";
-    a.click();
-  }
-  handleDownloadJSON() {
-    if (!this.data) return;
-    const json = JSON.stringify(this.data, null, 2);
-    const blob = new Blob([json], { type: "application/json;charset=utf-8;" });
-    const url = URL.createObjectURL(blob);
-    const a = document.createElement("a");
-    a.href = url;
-    a.download = "chart-data.json";
-    a.click();
-    URL.revokeObjectURL(url);
-  }
-  handleFullscreen() {
-    const target = this.viewport ?? this;
-    if (document.fullscreenElement) {
-      document.exitFullscreen();
-    } else {
-      target.requestFullscreen?.();
-    }
-  }
-}
-__decorateClass([
-  property({ type: String })
-], UChartWidget.prototype, "type");
-__decorateClass([
-  property({ type: Object })
-], UChartWidget.prototype, "data");
-__decorateClass([
-  property({ type: Object })
-], UChartWidget.prototype, "options");
-__decorateClass([
-  query("canvas")
-], UChartWidget.prototype, "canvas");
-__decorateClass([
-  query(".viewport")
-], UChartWidget.prototype, "viewport");
-__decorateClass([
-  state()
-], UChartWidget.prototype, "error");
-
-export { UChartWidget };

package/dist/components/widgets/UChartWidget.d.ts

@@ -1,7 +0,0 @@
-import { UChartWidget } from './UChartWidget.component.js';
-declare global {
-    interface HTMLElementTagNameMap {
-        "u-chart-widget": UChartWidget;
-    }
-}
-export { UChartWidget };

package/dist/components/widgets/UChartWidget.js

@@ -1,5 +0,0 @@
-import { UChartWidget } from './UChartWidget.component.js';
-
-UChartWidget.define("u-chart-widget");
-
-export { UChartWidget };

package/dist/components/widgets/UImagesWidget.component.js

@@ -1,164 +0,0 @@
-import { nothing, html } from 'lit';
-import { property, state } from 'lit/decorators.js';
-import { repeat } from 'lit/directives/repeat.js';
-import { UElement } from '@iyulab/components/dist/components/UElement.js';
-import { UCarousel } from '@iyulab/components/dist/components/carousel/UCarousel.component.js';
-import { UIcon } from '@iyulab/components/dist/components/icon/UIcon.component.js';
-import { styles } from './UImagesWidget.styles.js';
-
-var __defProp = Object.defineProperty;
-var __decorateClass = (decorators, target, key, kind) => {
-  var result = void 0 ;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (decorator(target, key, result) ) || result;
-  if (result) __defProp(target, key, result);
-  return result;
-};
-class UImagesWidget extends UElement {
-  constructor() {
-    super(...arguments);
-    this.items = [];
-    this.index = null;
-    this.open = (i) => {
-      this.index = i;
-    };
-    this.close = () => {
-      this.index = null;
-    };
-    this.prev = () => {
-      if (this.index !== null && this.index > 0) {
-        this.index--;
-      }
-    };
-    this.next = () => {
-      if (this.index !== null && this.index < this.items.length - 1) {
-        this.index++;
-      }
-    };
-    this.handlePrevClick = (e) => {
-      e.stopPropagation();
-      this.prev();
-    };
-    this.handleNextClick = (e) => {
-      e.stopPropagation();
-      this.next();
-    };
-    this.handleKeyDown = (e) => {
-      if (this.index === null) return;
-      if (e.key === "Escape") this.close();
-      else if (e.key === "ArrowLeft") this.prev();
-      else if (e.key === "ArrowRight") this.next();
-    };
-  }
-  static {
-    this.styles = [super.styles, styles];
-  }
-  static {
-    this.dependencies = {
-      "u-carousel": UCarousel,
-      "u-icon": UIcon
-    };
-  }
-  connectedCallback() {
-    super.connectedCallback();
-    document.addEventListener("keydown", this.handleKeyDown);
-  }
-  disconnectedCallback() {
-    document.removeEventListener("keydown", this.handleKeyDown);
-    super.disconnectedCallback();
-  }
-  render() {
-    if (!this.items?.length) return nothing;
-    const count = this.items.length;
-    return html`
-      <u-carousel
-        .loop=${false}
-        .navigation=${false}
-        .pagination=${true}
-        .draggable=${true}
-        .slidesPerView=${Math.min(count, 3)}
-        .gap=${8}
-      >
-        ${repeat(this.items, (item, i) => html`
-          <div class="slide" 
-            @click=${() => this.open(i)}>
-            <img 
-              src=${item.src} 
-              alt=${item.alt || ""} 
-              loading="lazy" 
-            />
-            <div class="caption"
-              ?hidden=${!item.caption}>
-              ${item.caption}
-            </div>
-          </div>
-        `)}
-      </u-carousel>
-
-      ${this.renderLightbox()}
-    `;
-  }
-  renderLightbox() {
-    const idx = this.index;
-    if (idx === null) return nothing;
-    if (idx < 0 || idx >= this.items.length) return nothing;
-    const item = this.items[idx];
-    if (!item) return nothing;
-    const total = this.items.length;
-    const translateX = `calc(15vw - ${idx} * (70vw + 16px))`;
-    return html`
-      <div class="lb-overlay">
-
-        <!-- 상단: 카운터(중앙) + 닫기 버튼(우측) -->
-        <header class="lb-header">
-          <div class="lb-counter" ?hidden=${total <= 1}>
-            ${idx + 1} / ${total}
-          </div>
-          <button class="lb-close" @click=${this.close}>
-            <u-icon lib="internal" name="x-lg"></u-icon>
-          </button>
-        </header>
-
-        <!-- 중앙: 뷰포트 + 이전/다음 버튼(absolute 오버레이) -->
-        <div class="lb-body">
-          <div class="lb-viewport">
-            <div class="lb-track" style="transform:translateX(${translateX})">
-              ${repeat(this.items, (img, i) => html`
-                <div class="lb-slide" ?active=${i === idx}>
-                  <img src=${img.src} alt=${img.alt || ""} />
-                </div>
-              `)}
-            </div>
-          </div>
-
-          <button class="lb-nav prev"
-            ?hidden=${idx <= 0}
-            @click=${this.handlePrevClick}>
-            <u-icon lib="internal" name="chevron-left"></u-icon>
-          </button>
-
-          <button class="lb-nav next"
-            ?hidden=${idx >= total - 1}
-            @click=${this.handleNextClick}>
-            <u-icon lib="internal" name="chevron-right"></u-icon>
-          </button>
-        </div>
-
-        <!-- 하단: 캡션 -->
-        <footer class="lb-footer" ?hidden=${!item.caption}>
-          <p class="lb-caption">${item.caption}</p>
-        </footer>
-
-      </div>
-    `;
-  }
-}
-__decorateClass([
-  property({ type: Array })
-], UImagesWidget.prototype, "items");
-__decorateClass([
-  state()
-], UImagesWidget.prototype, "index");
-
-export { UImagesWidget };

package/dist/components/widgets/UImagesWidget.d.ts

@@ -1,7 +0,0 @@
-import { UImagesWidget } from './UImagesWidget.component.js';
-declare global {
-    interface HTMLElementTagNameMap {
-        "u-images-widget": UImagesWidget;
-    }
-}
-export { UImagesWidget };

package/dist/components/widgets/UImagesWidget.js

@@ -1,5 +0,0 @@
-import { UImagesWidget } from './UImagesWidget.component.js';
-
-UImagesWidget.define("u-images-widget");
-
-export { UImagesWidget };

package/dist/components/widgets/UMapWidget.component.js

@@ -1,65 +0,0 @@
-import { nothing, html } from 'lit';
-import { property } from 'lit/decorators.js';
-import { UElement } from '@iyulab/components/dist/components/UElement.js';
-import { styles } from './UMapWidget.styles.js';
-
-var __defProp = Object.defineProperty;
-var __decorateClass = (decorators, target, key, kind) => {
-  var result = void 0 ;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (decorator(target, key, result) ) || result;
-  if (result) __defProp(target, key, result);
-  return result;
-};
-class UMapWidget extends UElement {
-  constructor() {
-    super(...arguments);
-    this.zoom = 15;
-  }
-  static {
-    this.styles = [super.styles, styles];
-  }
-  static {
-    this.dependencies = {};
-  }
-  render() {
-    if (this.lat == null || this.lng == null) return nothing;
-    const offset = 360 / Math.pow(2, this.zoom);
-    const bbox = `${this.lng - offset},${this.lat - offset},${this.lng + offset},${this.lat + offset}`;
-    const embedUrl = `https://www.openstreetmap.org/export/embed.html?bbox=${bbox}&layer=mapnik&marker=${this.lat},${this.lng}`;
-    const linkUrl = `https://www.openstreetmap.org/?mlat=${this.lat}&mlon=${this.lng}#map=${this.zoom}/${this.lat}/${this.lng}`;
-    return html`
-      <iframe 
-        src="${embedUrl}" 
-        loading="lazy"
-      ></iframe>
-      <a class="caption" 
-        ?hidden=${!this.label && !this.description}  
-        href="${linkUrl}" 
-        target="_blank" 
-        rel="noopener"
-      >
-        <strong>${this.label}</strong>
-        <span>${this.description}</span>
-      </a>
-    `;
-  }
-}
-__decorateClass([
-  property({ type: Number })
-], UMapWidget.prototype, "lat");
-__decorateClass([
-  property({ type: Number })
-], UMapWidget.prototype, "lng");
-__decorateClass([
-  property({ type: Number })
-], UMapWidget.prototype, "zoom");
-__decorateClass([
-  property({ type: String })
-], UMapWidget.prototype, "label");
-__decorateClass([
-  property({ type: String })
-], UMapWidget.prototype, "description");
-
-export { UMapWidget };

package/dist/components/widgets/UMapWidget.d.ts

@@ -1,7 +0,0 @@
-import { UMapWidget } from './UMapWidget.component.js';
-declare global {
-    interface HTMLElementTagNameMap {
-        "u-map-widget": UMapWidget;
-    }
-}
-export { UMapWidget };

package/dist/components/widgets/UMapWidget.js

@@ -1,5 +0,0 @@
-import { UMapWidget } from './UMapWidget.component.js';
-
-UMapWidget.define("u-map-widget");
-
-export { UMapWidget };

package/dist/components/widgets/UMapWidget.styles.d.ts

@@ -1 +0,0 @@
-export declare const styles: import('lit').CSSResult;

package/dist/components/widgets/UVideoWidget.component.js

@@ -1,106 +0,0 @@
-import { nothing, html } from 'lit';
-import { property } from 'lit/decorators.js';
-import { ifDefined } from 'lit/directives/if-defined.js';
-import { UElement } from '@iyulab/components/dist/components/UElement.js';
-import { styles } from './UVideoWidget.styles.js';
-
-var __defProp = Object.defineProperty;
-var __decorateClass = (decorators, target, key, kind) => {
-  var result = void 0 ;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (decorator(target, key, result) ) || result;
-  if (result) __defProp(target, key, result);
-  return result;
-};
-class UVideoWidget extends UElement {
-  constructor() {
-    super(...arguments);
-    this.ratio = "16:9";
-  }
-  static {
-    this.styles = [super.styles, styles];
-  }
-  static {
-    this.dependencies = {};
-  }
-  updated(changedProperties) {
-    super.updated(changedProperties);
-    if (changedProperties.has("ratio")) {
-      this.style.setProperty("--video-ratio", this.ratio.replace(":", " / "));
-    }
-  }
-  render() {
-    if (!this.src) return nothing;
-    if (this.isYouTube(this.src)) {
-      const videoId = this.extractYouTubeId(this.src);
-      if (videoId) {
-        return html`
-          <div class="video-wrapper">
-            <iframe
-              src="https://www.youtube.com/embed/${videoId}"
-              loading="lazy"
-              allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
-              allowfullscreen
-            ></iframe>
-          </div>
-        `;
-      }
-    }
-    if (this.isVimeo(this.src)) {
-      const videoId = this.extractVimeoId(this.src);
-      if (videoId) {
-        return html`
-          <div class="video-wrapper">
-            <iframe
-              src="https://player.vimeo.com/video/${videoId}"
-              loading="lazy"
-              allow="autoplay; fullscreen; picture-in-picture"
-              allowfullscreen
-            ></iframe>
-          </div>
-        `;
-      }
-    }
-    return html`
-      <video
-        src=${this.src}
-        poster=${ifDefined(this.poster)}
-        controls
-        playsinline
-      ></video>
-    `;
-  }
-  isYouTube(url) {
-    return /youtube\.com|youtu\.be/i.test(url);
-  }
-  isVimeo(url) {
-    return /vimeo\.com/i.test(url);
-  }
-  extractYouTubeId(url) {
-    const patterns = [
-      /(?:youtube\.com\/watch\?v=|youtu\.be\/)([^&\s]+)/,
-      /youtube\.com\/embed\/([^&\s]+)/
-    ];
-    for (const pattern of patterns) {
-      const match = url.match(pattern);
-      if (match && match[1]) return match[1];
-    }
-    return null;
-  }
-  extractVimeoId(url) {
-    const match = url.match(/vimeo\.com\/(\d+)/);
-    return match ? match[1] : null;
-  }
-}
-__decorateClass([
-  property({ type: String })
-], UVideoWidget.prototype, "src");
-__decorateClass([
-  property({ type: String })
-], UVideoWidget.prototype, "poster");
-__decorateClass([
-  property({ type: String })
-], UVideoWidget.prototype, "ratio");
-
-export { UVideoWidget };

package/dist/components/widgets/UVideoWidget.d.ts

@@ -1,7 +0,0 @@
-import { UVideoWidget } from './UVideoWidget.component.js';
-declare global {
-    interface HTMLElementTagNameMap {
-        "u-video-widget": UVideoWidget;
-    }
-}
-export { UVideoWidget };

package/dist/components/widgets/UVideoWidget.js

@@ -1,5 +0,0 @@
-import { UVideoWidget } from './UVideoWidget.component.js';
-
-UVideoWidget.define("u-video-widget");
-
-export { UVideoWidget };

package/dist/components/widgets/UVideoWidget.styles.d.ts

@@ -1 +0,0 @@
-export declare const styles: import('lit').CSSResult;