@iyulab/chat-components 0.3.0 → 0.4.0

package/dist/components/blocks/UFilesBlock.styles.js

@@ -0,0 +1,206 @@
+import { css } from 'lit';
+
+const styles = css`
+  :host {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
+    gap: 6px;
+    font-size: 14px;
+    width: 100%;
+  }
+
+  .item {
+    position: relative;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    min-width: 0;
+    gap: 10px;
+    padding: 8px 10px;
+    border: 1px solid var(--u-border-color);
+    border-radius: 8px;
+    background-color: var(--u-neutral-50);
+    overflow: visible;
+    cursor: pointer;
+    transition: background-color 0.12s ease, border-color 0.12s ease;
+  }
+  .item:hover {
+    background-color: var(--u-neutral-100);
+    border-color: var(--u-border-color-strong);
+  }
+
+  /* uploading */
+  .item[phase="uploading"] {
+    border-color: var(--u-blue-400);
+    background-color: var(--u-blue-0);
+    cursor: default;
+  }
+  .item[phase="uploading"] .thumbnail {
+    background-color: var(--u-blue-100);
+    color: var(--u-blue-600);
+  }
+  .item[phase="uploading"]:hover {
+    background-color: var(--u-blue-0);
+    border-color: var(--u-blue-400);
+  }
+
+  /* error */
+  .item[phase="error"] {
+    border-color: var(--u-red-400);
+    background-color: var(--u-red-0);
+  }
+  .item[phase="error"] .thumbnail {
+    background-color: var(--u-red-100);
+    color: var(--u-red-600);
+  }
+  .item[phase="error"]:hover {
+    background-color: var(--u-red-0);
+    border-color: var(--u-red-500);
+  }
+
+  .thumbnail {
+    position: relative;
+    flex-shrink: 0;
+    width: 36px;
+    height: 36px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--u-icon-color);
+    font-size: 16px;
+    border-radius: 6px;
+    background-color: var(--u-neutral-200);
+  }
+
+  .thumbnail-overlay {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 6px;
+    font-size: 14px;
+    background-color: color-mix(in srgb, currentColor 15%, transparent);
+  }
+  .item[phase="uploading"] .thumbnail-overlay {
+    animation: pulse 1.4s ease-in-out infinite;
+  }
+
+  .info {
+    flex: 1;
+    min-width: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+  }
+
+  .name {
+    font-size: 13px;
+    font-weight: 500;
+    color: var(--u-txt-color-strong);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .meta {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 6px;
+    color: var(--u-txt-color-weak);
+    font-size: 10px;
+  }
+
+  .type {
+    padding: 1px 5px;
+    border-radius: 4px;
+    background-color: var(--u-neutral-200);
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+  }
+
+  .size {
+    font-variant-numeric: tabular-nums;
+  }
+
+  .error-msg {
+    display: flex;
+    align-items: center;
+    gap: 3px;
+    color: var(--u-red-600);
+    font-size: 10px;
+    font-weight: 500;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .upload-progress {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    height: 3px;
+    border-radius: 0 0 8px 8px;
+    border: none;
+    overflow: hidden;
+  }
+  .upload-progress::part(indicator) {
+    background-color: var(--u-blue-500);
+    border-radius: 0 0 8px 8px;
+  }
+
+  .download-btn {
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+    color: var(--u-neutral-0);
+    font-size: 14px;
+    border-radius: 6px;
+    background-color: color-mix(in srgb, var(--u-neutral-900) 70%, transparent);
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 0.15s ease;
+  }
+  .item:hover .download-btn {
+    opacity: 1;
+    pointer-events: auto;
+  }
+  .download-btn:hover {
+    background-color: color-mix(in srgb, var(--u-neutral-900) 85%, transparent);
+  }
+
+  .remove-btn {
+    position: absolute;
+    z-index: 10;
+    top: -8px;
+    right: -8px;
+    border-radius: 50%;
+    font-size: 10px;
+    background-color: var(--u-neutral-600);
+    color: var(--u-neutral-0);
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 0.12s ease, background-color 0.12s ease;
+  }
+  .item:hover .remove-btn {
+    opacity: 1;
+    pointer-events: auto;
+  }
+  .remove-btn:hover {
+    background-color: var(--u-red-600);
+  }
+  .remove-btn:active {
+    background-color: var(--u-red-700);
+  }
+
+  @keyframes pulse {
+    0%, 100% { opacity: 1; }
+    50%       { opacity: 0.4; }
+  }
+`;
+
+export { styles };

package/dist/components/blocks/UJsonBlock.component.d.ts

@@ -1,12 +1,12 @@
 import { PropertyValues, TemplateResult } from 'lit';
-import { BaseElement } from '@iyulab/components/dist/components/BaseElement.js';
+import { UElement } from '@iyulab/components/dist/components/UElement.js';
 import { JsonNode } from '../../types/JsonNode.js';
 /**
  * json 데이터를 트리 형태로 시각화하는 컴포넌트입니다.
  */
-export declare class UJsonBlock extends BaseElement {
+export declare class UJsonBlock extends UElement {
     static styles: import('lit').CSSResultGroup[];
-    static dependencies: Record<string, typeof BaseElement>;
+    static dependencies: Record<string, typeof UElement>;
     state: Record<string, boolean>;
     /** 초기 확장 상태를 관리하는 속성입니다. */
     expanded: boolean;

package/dist/components/blocks/UJsonBlock.component.js

@@ -2,7 +2,7 @@ import { html } from 'lit';
 import { state, property } from 'lit/decorators.js';
 import { map } from 'lit/directives/map.js';
 import { when } from 'lit/directives/when.js';
-import { BaseElement } from '@iyulab/components/dist/components/BaseElement.js';
+import { UElement } from '@iyulab/components/dist/components/UElement.js';
 import { jsonAttrConverter } from '../../utilities/converters.js';
 import { styles } from './UJsonBlock.styles.js';
 
@@ -15,7 +15,7 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (result) __defProp(target, key, result);
   return result;
 };
-class UJsonBlock extends BaseElement {
+class UJsonBlock extends UElement {
   constructor() {
     super(...arguments);
     this.state = {};

package/dist/components/blocks/UMarkedBlock.component.d.ts

@@ -1,4 +1,4 @@
-import { BaseElement } from '@iyulab/components/dist/components/BaseElement.js';
+import { UElement } from '@iyulab/components/dist/components/UElement.js';
 import { ReferenceCitation } from '../../types/References.js';
 /**
  * 마크다운 컨텐츠를 렌더링하는 컴포넌트입니다.
@@ -6,40 +6,35 @@ import { ReferenceCitation } from '../../types/References.js';
  * 주의:
  * - refs로 삽입되는 커스텀 태그(u-ref-*)는 속성/내용을 모두 escape하여 XSS를 방지합니다.
  * - 코드블록 내부는 HTML을 전부 텍스트로 취급(escape)하며, refs 태그는 통째 제거합니다.
- * - 인덱스 기반 삽입(ref.endIndex)이 깨지지 않도록 "normalize(제로폭 제거)"를 insert 전에 1회 수행합니다.
+ * - 인덱스 기반 삽입(ref.endIndex)이 깨지지 않도록 "normalize(제로폭 제거)"를 insertRefs 전에 1회 수행합니다.
  */
-export declare class UMarkedBlock extends BaseElement {
+export declare class UMarkedBlock extends UElement {
     static styles: import('lit').CSSResultGroup[];
-    static dependencies: Record<string, typeof BaseElement>;
-    private parser;
+    static dependencies: Record<string, typeof UElement>;
     /** 마크다운 컨텐츠를 렌더링할 때 사용할 값입니다. */
     value?: string;
     /** 컨텐츠의 인용 출처들입니다. */
     refs?: ReferenceCitation[];
+    /** Marked 인스턴스: 커스텀 렌더러와 KaTeX 확장 포함 */
+    private parser;
+    /** Marked 파싱 중 ref HTML을 임시 보관하는 플레이스홀더 */
+    private placeholder;
     render(): import('lit-html/directive.js').DirectiveResult<typeof import('lit-html/directives/unsafe-html.js').UnsafeHTMLDirective>;
     /**
-     * 인용/출처 참조객체가 있을때 문자열에 출처태그를 삽입합니다.
-     * @param value 삽입할 마크다운 문자열
-     * @return 삽입된 마크다운 문자열
-     */
-    private insert;
-    /**
-     * 참조 카드 엘리먼트를 안전하게 빌드합니다.
+     * 코드블록은 별도의 컴포넌트로 렌더링 합니다.
      */
-    private buildCard;
+    private renderCode;
     /**
-     * Zero Width Space, LTR/RTL marks, BOM 등 특수 제어 문자를 제거합니다.
-     * (ref.endIndex 기준을 흔들지 않게 insert 전에 1회 수행)
+     * 테이블은 JSON 데이터로 변환하여 별도의 컴포넌트로 렌더링합니다.
      */
-    private normalizeText;
+    private renderTable;
     /**
-     * 코드블록 내부 텍스트를 안전하게 처리합니다.
-     * - u-ref-tag는 통째로 제거(코드블록 안에서 UI 태그가 살아남는 것 방지)
-     * - 나머지는 전부 HTML escape
+     * 인용/출처 참조객체가 있을때 ref 태그 HTML을 this.placeholder에 보관하고
+     * 마크다운 문자열의 해당 위치에 주석 플레이스홀더를 삽입합니다.
      */
-    private sanitizeText;
+    private insertRefs;
     /**
-     * HTML 텍스트 노드로 안전하게 삽입하기 위해 escape 합니다.
+     * 코드블록 내부의 <!--ref:idx--> 플레이스홀더와 그 외 refs 태그를 모두 제거하여 HTML이 코드로 렌더링되도록 합니다.
      */
-    private escapeHTML;
+    private removeRefs;
 }

package/dist/components/blocks/UMarkedBlock.component.js

@@ -3,12 +3,17 @@ import { property } from 'lit/decorators.js';
 import { unsafeHTML } from 'lit/directives/unsafe-html.js';
 import { Marked } from 'marked';
 import markedKatex from 'marked-katex-extension';
-import { BaseElement } from '@iyulab/components/dist/components/BaseElement.js';
+import { UElement } from '@iyulab/components/dist/components/UElement.js';
+import { UJsonElement } from '@iyulab/components/dist/components/UJsonElement.js';
+import { stripZeroWidth, escapeHtmlText } from '@iyulab/components/dist/utilities/sanitizers.js';
+import { buildElementHTML } from '@iyulab/components/dist/utilities/elements.js';
 import { UTooltip } from '@iyulab/components/dist/components/tooltip/UTooltip.component.js';
 import { UCodeBlock } from './UCodeBlock.component.js';
+import { UTableBlock } from './UTableBlock.component.js';
 import { URefTag } from '../references/URefTag.component.js';
 import { URefCard } from '../references/URefCard.component.js';
 import { URefCardGroup } from '../references/URefCardGroup.component.js';
+import { UWidget } from '../widgets/UWidget.component.js';
 import { styles } from './UMarkedBlock.styles.js';
 
 var __defProp = Object.defineProperty;
@@ -20,23 +25,22 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (result) __defProp(target, key, result);
   return result;
 };
-class UMarkedBlock extends BaseElement {
+class UMarkedBlock extends UElement {
   constructor() {
     super(...arguments);
+    /** Marked 인스턴스: 커스텀 렌더러와 KaTeX 확장 포함 */
     this.parser = new Marked({
       pedantic: false,
       gfm: true,
       breaks: true,
       silent: true,
       renderer: {
-        code: ({ text, lang }) => {
-          lang ||= "plaintext";
-          const safeLang = this.escapeHTML(lang);
-          const safeText = this.sanitizeText(text);
-          return `<u-code-block lang="${safeLang}">${safeText}</u-code-block>`;
-        }
+        code: (token) => this.renderCode(token),
+        table: (token) => this.renderTable(token)
       }
     }).use(markedKatex({ output: "mathml" }));
+    /** Marked 파싱 중 ref HTML을 임시 보관하는 플레이스홀더 */
+    this.placeholder = new HtmlPlaceholder();
   }
   static {
     this.styles = [super.styles, styles];
@@ -45,78 +49,83 @@ class UMarkedBlock extends BaseElement {
     this.dependencies = {
       "u-tooltip": UTooltip,
       "u-code-block": UCodeBlock,
+      "u-table-block": UTableBlock,
       "u-ref-tag": URefTag,
       "u-ref-card": URefCard,
-      "u-ref-card-group": URefCardGroup
+      "u-ref-card-group": URefCardGroup,
+      "u-widget": UWidget
     };
   }
   render() {
     if (!this.value) return nothing;
-    let value = this.normalizeText(this.value);
-    if (this.refs && this.refs.length > 0) {
-      value = this.insert(value, this.refs);
+    this.placeholder.reset();
+    let value = stripZeroWidth(this.value);
+    if (this.refs?.length) {
+      value = this.insertRefs(value, this.refs);
     }
-    const html = this.parser.parse(value, { async: false });
-    return unsafeHTML(html);
+    let html = this.parser.parse(value, { async: false });
+    return unsafeHTML(this.placeholder.restore(html));
   }
-  /**
-   * 인용/출처 참조객체가 있을때 문자열에 출처태그를 삽입합니다.
-   * @param value 삽입할 마크다운 문자열
-   * @return 삽입된 마크다운 문자열
+  /** 
+   * 코드블록은 별도의 컴포넌트로 렌더링 합니다.
    */
-  insert(value, refs) {
-    const reversed = [...refs].sort((a, b) => b.endIndex - a.endIndex);
-    reversed.forEach((ref) => {
-      const sources = ref.sources ?? [];
-      const firstSource = sources.at(0);
-      const tagName = this.escapeHTML(ref.label ?? `[${refs.indexOf(ref) + 1}]`);
-      const tagLink = this.escapeHTML(firstSource?.url ?? "");
-      let tooltip = "";
-      if (firstSource && sources.length === 1) {
-        tooltip = this.buildCard(firstSource, true);
-      }
-      if (sources.length > 1) {
-        const cards = sources.map((s) => this.buildCard(s, false)).join("");
-        tooltip = `<u-ref-card-group slot="tooltip">${cards}</u-ref-card-group>`;
-      }
-      const tag = `<u-ref-tag href="${tagLink}" title="${tagName}">${tagName}${tooltip}</u-ref-tag>`;
-      value = value.slice(0, ref.endIndex) + tag + value.slice(ref.endIndex);
-    });
-    return value;
+  renderCode(token) {
+    const lang = token.lang ?? "plaintext";
+    const trimmed = token.raw.trimEnd();
+    const isClosed = trimmed.endsWith("```") || trimmed.endsWith("~~~");
+    if (lang === "widget-json") {
+      return UJsonElement.buildHTML("u-widget", token.text, { loading: !isClosed });
+    }
+    if (lang === "action-json") {
+      return "";
+    }
+    const safeText = this.removeRefs(token.text);
+    return buildElementHTML("u-code-block", { lang, loading: !isClosed }, safeText);
   }
-  /**
-   * 참조 카드 엘리먼트를 안전하게 빌드합니다.
+  /** 
+   * 테이블은 JSON 데이터로 변환하여 별도의 컴포넌트로 렌더링합니다. 
    */
-  buildCard(source, slot) {
-    const type = this.escapeHTML(source.type || "web");
-    const href = this.escapeHTML(source.url ?? "");
-    const heading = this.escapeHTML(source.title ?? "");
-    const tags = this.escapeHTML((source.tags ?? []).join(","));
-    const snippet = this.escapeHTML(source.snippet ?? "");
-    const slotAttr = slot ? ` slot="tooltip"` : "";
-    return `<u-ref-card${slotAttr} type="${type}" href="${href}" heading="${heading}" tags="${tags}">${snippet}</u-ref-card>`;
+  renderTable(token) {
+    const headers = token.header.map((h) => ({
+      text: h.text,
+      align: h.align
+    }));
+    const rows = token.rows.map(
+      (row) => row.map((cell) => ({
+        text: cell.text,
+        align: cell.align
+      }))
+    );
+    return UJsonElement.buildHTML("u-table-block", { headers, rows });
   }
   /**
-   * Zero Width Space, LTR/RTL marks, BOM 등 특수 제어 문자를 제거합니다.
-   * (ref.endIndex 기준을 흔들지 않게 insert 전에 1회 수행)
+   * 인용/출처 참조객체가 있을때 ref 태그 HTML을 this.placeholder에 보관하고
+   * 마크다운 문자열의 해당 위치에 주석 플레이스홀더를 삽입합니다.
    */
-  normalizeText(value) {
-    return value.replace(/\u200B|\u200C|\u200D|\u200E|\u200F|\uFEFF/g, "");
+  insertRefs(value, refs) {
+    const sorted = [...refs].sort((a, b) => b.endIndex - a.endIndex);
+    for (const ref of sorted) {
+      const sources = ref.sources ?? [];
+      const label = escapeHtmlText(ref.label ?? `[${refs.indexOf(ref) + 1}]`);
+      const link = sources.at(0)?.url;
+      let tooltip = "";
+      if (sources.length > 0) {
+        const cards = sources.map((s) => UJsonElement.buildHTML("u-ref-card", s)).join("");
+        tooltip = buildElementHTML("u-ref-card-group", { slot: "tooltip" }, cards);
+      }
+      const html = buildElementHTML("u-ref-tag", { href: link }, label + tooltip);
+      const key = this.placeholder.store(html);
+      value = value.slice(0, ref.endIndex) + key + value.slice(ref.endIndex);
+    }
+    return value;
   }
   /**
-   * 코드블록 내부 텍스트를 안전하게 처리합니다.
-   * - u-ref-tag는 통째로 제거(코드블록 안에서 UI 태그가 살아남는 것 방지)
-   * - 나머지는 전부 HTML escape
+   * 코드블록 내부의 <!--ref:idx--> 플레이스홀더와 그 외 refs 태그를 모두 제거하여 HTML이 코드로 렌더링되도록 합니다.   
    */
-  sanitizeText(value) {
+  removeRefs(value) {
     value = value.replace(/<u-ref-tag\b[^>]*>[\s\S]*?<\/u-ref-tag>/gi, "");
-    return this.escapeHTML(value);
-  }
-  /**
-   * HTML 텍스트 노드로 안전하게 삽입하기 위해 escape 합니다.
-   */
-  escapeHTML(value) {
-    return value.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
+    value = value.replace(/<!--ref:\d+-->/g, "");
+    return value;
   }
 }
 __decorateClass([
@@ -125,5 +134,26 @@ __decorateClass([
 __decorateClass([
   property({ type: Array })
 ], UMarkedBlock.prototype, "refs");
+class HtmlPlaceholder {
+  constructor() {
+    this.map = {};
+    this.idx = 0;
+  }
+  reset() {
+    this.map = {};
+    this.idx = 0;
+  }
+  /** html을 저장하고 대응하는 플레이스홀더 키를 반환합니다. */
+  store(html) {
+    const key = `<!--ref:${this.idx++}-->`;
+    this.map[key] = html;
+    return key;
+  }
+  /** html 안의 등록된 모든 플레이스홀더를 원래 HTML로 복원합니다. */
+  restore(html) {
+    if (this.idx === 0) return html;
+    return html.replace(/<!--ref:\d+-->/g, (key) => this.map[key] ?? "");
+  }
+}
 
 export { UMarkedBlock };

package/dist/components/blocks/URefBlock.component.d.ts

@@ -1,12 +1,12 @@
-import { BaseElement } from '@iyulab/components/dist/components/BaseElement.js';
+import { UElement } from '@iyulab/components/dist/components/UElement.js';
 import { ReferenceSource } from '../../types/References.js';
 /**
  * 레퍼런스 정보를 블록 형태로 표시하는 컴포넌트입니다.
  * 단일 또는 다중 레퍼런스 카드를 그리드 레이아웃으로 표시합니다.
  */
-export declare class URefBlock extends BaseElement {
+export declare class URefBlock extends UElement {
     static styles: import('lit').CSSResultGroup[];
-    static dependencies: Record<string, typeof BaseElement>;
+    static dependencies: Record<string, typeof UElement>;
     /** 접힘 상태 @default: true */
     collapsed: boolean;
     /** 블록 제목 */

package/dist/components/blocks/URefBlock.component.js

@@ -1,6 +1,6 @@
 import { html } from 'lit';
 import { property } from 'lit/decorators.js';
-import { BaseElement } from '@iyulab/components/dist/components/BaseElement.js';
+import { UElement } from '@iyulab/components/dist/components/UElement.js';
 import { URefCard } from '../references/URefCard.component.js';
 import { styles } from './URefBlock.styles.js';
 import { repeat } from 'lit/directives/repeat.js';
@@ -14,7 +14,7 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (result) __defProp(target, key, result);
   return result;
 };
-class URefBlock extends BaseElement {
+class URefBlock extends UElement {
   constructor() {
     super(...arguments);
     this.collapsed = true;
@@ -49,12 +49,11 @@ class URefBlock extends BaseElement {
       return html`
             <u-ref-card
               .type=${source.type}
-              .href=${source.url}
-              .heading=${source.title}
+              .url=${source.url}
+              .title=${source.title || ""}
+              .snippet=${source.snippet || ""}
               .tags=${source.tags}
-            >
-              ${source.snippet || ""}
-            </u-ref-card>
+            ></u-ref-card>
           `;
     })}
       </div>

package/dist/components/blocks/UTableBlock.component.d.ts

@@ -0,0 +1,49 @@
+import { UElement } from '@iyulab/components/dist/components/UElement.js';
+import { UJsonElement } from '@iyulab/components/dist/components/UJsonElement.js';
+/** 테이블 셀 데이터 타입 */
+export interface TableCell {
+    /** 셀에 표시할 텍스트 내용 */
+    text: string;
+    /** 셀 내용의 정렬 방식. 기본값은 "left" */
+    align: "left" | "center" | "right" | null;
+}
+/** 테이블 정렬 상태 */
+export interface SortState {
+    /** 현재 정렬 기준이 되는 컬럼 인덱스. -1이면 정렬 안 된 상태 */
+    index: number;
+    /** 정렬 방향. "asc"는 오름차순, "desc"는 내림차순 */
+    dir: "asc" | "desc";
+}
+/**
+ * 마크다운 테이블 데이터를 렌더링하는 컴포넌트입니다.
+ * 컬럼 정렬, CSV 다운로드 기능을 지원합니다.
+ * light DOM 내 `<script type="application/json">` 에서 데이터를 자동으로 읽어냅니다.
+ */
+export declare class UTableBlock extends UJsonElement {
+    static styles: (import('lit').CSSResult | import('lit').CSSResultGroup[])[];
+    static dependencies: Record<string, typeof UElement>;
+    /** 테이블 헤더 목록. 각 헤더는 { text, align } 형식입니다. */
+    headers: TableCell[];
+    /** 테이블 행 목록. 각 행은 셀 배열입니다. */
+    rows: TableCell[][];
+    private loading;
+    private sort;
+    private search;
+    private searchCache;
+    private searchTimer;
+    render(): import('lit-html').TemplateResult<1>;
+    /**
+     * 하이라이트 렌더링: search 기준으로 매칭되는 부분을 <mark>로 감쌉니다.
+     * 내부적으로 안전하게 escape한 뒤 매칭을 위해 RegExp를 사용합니다.
+     */
+    private renderHighlightedText;
+    /**
+     * 현재 검색어와 정렬 상태에 따라 필터링 및 정렬된 행 목록을 반환합니다.
+     */
+    private getFilteredSortedRows;
+    private handleSearchInput;
+    private handleSortColumn;
+    private handleDownloadCSV;
+    private handleDownloadXLS;
+    private triggerDownload;
+}