@webmcp-auto-ui/ui 2.5.32 → 2.5.34

package/src/widgets/rich/data-table.ts

@@ -1,342 +0,0 @@
-/**
- * data-table — vanilla renderer for DataTable widget.
- *
- * Contract:
- *   render(container, data) -> dispose()
- *
- * The `data` argument is the full object passed by the dispatcher:
- *   { spec: Partial<DataTableSpec>, data?: unknown, onrowclick?: (row) => void }
- *
- * Rows resolution: spec.rows first, else top-level `data` (if array), else [].
- * Columns: spec.columns if non-empty, else inferred from first row's keys.
- *
- * Local state (closure): sortCol, sortAsc. Clicking a <th> toggles
- *   null -> asc -> desc -> null (off) — matches the 3-state a11y pattern.
- *   (Svelte version only toggled asc/desc; we extend with an "off" state so
- *    aria-sort can correctly report "none"; set ENABLE_SORT_OFF=false to
- *    revert to strict parity.)
- *
- * Events: on row dblclick (when onrowclick is provided OR unconditionally),
- *   dispatches a bubbling CustomEvent 'widget:interact'
- *   with detail { action: 'rowclick', payload: row }.
- *   Also calls onrowclick(row) if provided (parity with Svelte).
- *
- * XSS: all values are inserted via textContent; the only exception is the
- *   anchor href for `type: 'link'` string values (href is an attribute, not
- *   innerHTML, so no script injection — but caller-supplied URLs are still
- *   rendered as-is, same as the Svelte version).
- */
-
-export interface DataTableColumn {
-  key: string;
-  label: string;
-  align?: 'left' | 'center' | 'right';
-  type?: 'text' | 'number' | 'boolean' | 'link';
-}
-
-export interface DataTableSpec {
-  title?: string;
-  columns?: DataTableColumn[];
-  rows?: Record<string, unknown>[];
-  compact?: boolean;
-  striped?: boolean;
-  emptyMessage?: string;
-}
-
-interface DataTableProps {
-  spec?: Partial<DataTableSpec>;
-  data?: unknown;
-  onrowclick?: (row: Record<string, unknown>) => void;
-}
-
-const MAX = 200;
-const STRICT_SVELTE_PARITY = true; // true = 2-state sort (asc/desc), false = 3-state (asc/desc/off)
-
-function dv(v: unknown): string {
-  if (v == null) return '';
-  if (typeof v === 'object') return JSON.stringify(v);
-  return String(v);
-}
-
-function resolveRows(props: DataTableProps): Record<string, unknown>[] {
-  const specRows = props.spec?.rows;
-  if (Array.isArray(specRows) && specRows.length) return specRows as Record<string, unknown>[];
-  if (Array.isArray(props.data)) return props.data as Record<string, unknown>[];
-  return [];
-}
-
-function resolveColumns(spec: Partial<DataTableSpec> | undefined, rows: Record<string, unknown>[]): DataTableColumn[] {
-  const specCols = spec?.columns;
-  if (Array.isArray(specCols) && specCols.length) return specCols as DataTableColumn[];
-  if (rows.length > 0) return Object.keys(rows[0] as object).map((k) => ({ key: k, label: k }));
-  return [];
-}
-
-function sortRows(rows: Record<string, unknown>[], col: string | null, asc: boolean): Record<string, unknown>[] {
-  if (!col) return rows;
-  return [...rows].sort((a, b) => {
-    const av = a[col];
-    const bv = b[col];
-    const an = Number(av);
-    const bn = Number(bv);
-    const c = !isNaN(an) && !isNaN(bn) ? an - bn : String(av ?? '').localeCompare(String(bv ?? ''), 'fr');
-    return asc ? c : -c;
-  });
-}
-
-function alignClass(align?: 'left' | 'center' | 'right'): string {
-  if (align === 'center') return 'text-center';
-  if (align === 'right') return 'text-right';
-  return '';
-}
-
-export function render(container: HTMLElement, data: unknown): () => void {
-  const props = (data ?? {}) as DataTableProps;
-  const spec: Partial<DataTableSpec> = props.spec ?? {};
-  const onrowclick = typeof props.onrowclick === 'function' ? props.onrowclick : undefined;
-  const fmt = new Intl.NumberFormat('fr-FR');
-
-  const rows = resolveRows(props);
-  const columns = resolveColumns(spec, rows);
-  const compact = spec.compact === true;
-  const striped = spec.striped !== false;
-
-  // Local sort state (closure).
-  let sortCol: string | null = null;
-  let sortAsc = true;
-
-  // Cleanup registry.
-  const cleanups: Array<() => void> = [];
-  const on = <K extends keyof HTMLElementEventMap>(
-    el: HTMLElement,
-    type: K,
-    handler: (ev: HTMLElementEventMap[K]) => void
-  ) => {
-    el.addEventListener(type, handler as EventListener);
-    cleanups.push(() => el.removeEventListener(type, handler as EventListener));
-  };
-
-  // Root.
-  const root = document.createElement('div');
-  root.className = 'bg-surface border border-border rounded-lg p-3 md:p-4 font-sans';
-
-  if (spec.title) {
-    const h3 = document.createElement('h3');
-    h3.className = 'text-sm font-semibold text-text1 mb-3';
-    h3.textContent = spec.title;
-    root.appendChild(h3);
-  }
-
-  // Empty state.
-  if (columns.length === 0 && rows.length === 0) {
-    const p = document.createElement('p');
-    p.className = 'text-text2 text-sm';
-    p.textContent = spec.emptyMessage ?? 'No data';
-    root.appendChild(p);
-    container.innerHTML = '';
-    container.appendChild(root);
-    return () => {
-      cleanups.forEach((fn) => fn());
-      cleanups.length = 0;
-      container.innerHTML = '';
-    };
-  }
-
-  // Scroll wrapper.
-  const scroll = document.createElement('div');
-  scroll.className = 'overflow-auto max-h-[480px] rounded border border-border';
-
-  const table = document.createElement('table');
-  table.className = 'w-full border-collapse';
-
-  // THEAD.
-  const thead = document.createElement('thead');
-  const headRow = document.createElement('tr');
-
-  // tbody created early so header click can re-render it.
-  const tbody = document.createElement('tbody');
-
-  function renderHeaders(): void {
-    headRow.innerHTML = '';
-    for (const col of columns) {
-      const th = document.createElement('th');
-      th.className =
-        'sticky top-0 bg-surface2 border-b-2 border-border2 px-3 py-2 text-left text-xs font-mono font-medium text-text2 uppercase tracking-wider whitespace-nowrap cursor-pointer select-none hover:text-text1 transition-colors ' +
-        alignClass(col.align);
-      th.setAttribute('role', 'button');
-      th.setAttribute('tabindex', '0');
-      const ariaSort = sortCol === col.key ? (sortAsc ? 'ascending' : 'descending') : 'none';
-      th.setAttribute('aria-sort', ariaSort);
-
-      const labelSpan = document.createElement('span');
-      labelSpan.textContent = col.label;
-      th.appendChild(labelSpan);
-
-      if (sortCol === col.key) {
-        const arrow = document.createElement('span');
-        arrow.className = 'ml-1 text-accent';
-        arrow.textContent = sortAsc ? '↑' : '↓';
-        th.appendChild(arrow);
-      }
-
-      const toggle = () => {
-        if (sortCol === col.key) {
-          if (STRICT_SVELTE_PARITY) {
-            sortAsc = !sortAsc;
-          } else {
-            if (sortAsc) {
-              sortAsc = false;
-            } else {
-              sortCol = null;
-              sortAsc = true;
-            }
-          }
-        } else {
-          sortCol = col.key;
-          sortAsc = true;
-        }
-        renderHeaders();
-        renderBody();
-      };
-
-      on(th, 'click', toggle);
-      on(th, 'keydown', (ev) => {
-        const ke = ev as KeyboardEvent;
-        if (ke.key === 'Enter' || ke.key === ' ') {
-          ke.preventDefault();
-          toggle();
-        }
-      });
-
-      headRow.appendChild(th);
-    }
-  }
-
-  function renderBody(): void {
-    // Remove previous listeners attached to tbody descendants.
-    // We can't selectively remove; we rebuild the row listeners each time.
-    // (Strategy: keep a per-body cleanups list.)
-    bodyCleanups.forEach((fn) => fn());
-    bodyCleanups.length = 0;
-
-    tbody.innerHTML = '';
-
-    const sorted = sortRows(rows, sortCol, sortAsc);
-    const displayed = sorted.slice(0, MAX);
-    const overflow = rows.length > MAX ? rows.length - MAX : 0;
-
-    displayed.forEach((row, i) => {
-      const tr = document.createElement('tr');
-      const stripedClass = striped && i % 2 === 1 ? 'bg-white/[0.02]' : '';
-      const cursorClass = onrowclick ? 'cursor-pointer' : '';
-      tr.className = `hover:bg-surface2 transition-colors ${stripedClass} ${cursorClass}`.trim();
-      if (onrowclick) tr.title = 'Double-cliquez pour interagir';
-
-      const handler = () => {
-        try {
-          onrowclick?.(row);
-        } catch {
-          /* swallow */
-        }
-        container.dispatchEvent(
-          new CustomEvent('widget:interact', {
-            detail: { action: 'rowclick', payload: row },
-            bubbles: true,
-          })
-        );
-      };
-      tr.addEventListener('dblclick', handler);
-      bodyCleanups.push(() => tr.removeEventListener('dblclick', handler));
-
-      for (const col of columns) {
-        const td = document.createElement('td');
-        const sizeClass = compact ? 'px-2 py-1 text-xs' : 'px-3 py-2 text-sm';
-        td.className =
-          'border-b border-border text-text1 overflow-hidden text-ellipsis whitespace-nowrap max-w-[280px] ' +
-          sizeClass +
-          ' ' +
-          alignClass(col.align);
-
-        const val = row[col.key];
-
-        if (val == null) {
-          const span = document.createElement('span');
-          span.className = 'text-text2';
-          span.textContent = '—';
-          td.appendChild(span);
-        } else if (col.type === 'boolean') {
-          const span = document.createElement('span');
-          span.textContent = val ? '✓' : '✗';
-          td.appendChild(span);
-        } else if (col.type === 'link' && typeof val === 'string') {
-          const a = document.createElement('a');
-          a.href = val;
-          a.className = 'text-accent hover:underline';
-          a.textContent = val;
-          td.appendChild(a);
-        } else if (typeof val === 'object') {
-          const code = document.createElement('code');
-          code.className = 'text-xs bg-surface2 px-1 py-0.5 rounded';
-          code.textContent = JSON.stringify(val);
-          td.appendChild(code);
-        } else if (typeof val === 'number') {
-          const span = document.createElement('span');
-          span.title = String(val);
-          span.textContent = fmt.format(val);
-          td.appendChild(span);
-        } else {
-          const s = String(val);
-          const span = document.createElement('span');
-          span.title = s;
-          span.textContent = s.length > 80 ? s.slice(0, 77) + '…' : s;
-          td.appendChild(span);
-        }
-
-        tr.appendChild(td);
-      }
-
-      tbody.appendChild(tr);
-    });
-
-    if (overflow > 0) {
-      const tr = document.createElement('tr');
-      const td = document.createElement('td');
-      td.colSpan = columns.length;
-      td.className = 'text-center text-text2 text-xs py-2 px-3';
-      td.textContent = `… ${overflow} more rows`;
-      tr.appendChild(td);
-      tbody.appendChild(tr);
-    }
-  }
-
-  const bodyCleanups: Array<() => void> = [];
-
-  thead.appendChild(headRow);
-  table.appendChild(thead);
-  table.appendChild(tbody);
-  scroll.appendChild(table);
-  root.appendChild(scroll);
-
-  // Footer: row count.
-  const footer = document.createElement('div');
-  footer.className = 'mt-2 text-text2 text-xs';
-  footer.textContent = `${rows.length} ligne${rows.length !== 1 ? 's' : ''}`;
-  root.appendChild(footer);
-
-  renderHeaders();
-  renderBody();
-
-  container.innerHTML = '';
-  container.appendChild(root);
-
-  // silence "unused" for helper
-  void dv;
-
-  return () => {
-    cleanups.forEach((fn) => fn());
-    cleanups.length = 0;
-    bodyCleanups.forEach((fn) => fn());
-    bodyCleanups.length = 0;
-    container.innerHTML = '';
-  };
-}

package/src/widgets/rich/gallery.ts

@@ -1,350 +0,0 @@
-/**
- * Gallery (vanilla) — grid of images with lightbox modal, prev/next nav, ESC to close.
- * Mirrors Gallery.svelte behavior (open on click, dblclick to dispatch imageclick,
- * keyboard nav in lightbox). Uses createSafeImage for URL validation + error fallback.
- */
-
-import { createSafeImage } from '../helpers/safe-image.js';
-
-export interface GalleryImage {
-  src: string;
-  alt?: string;
-  caption?: string;
-  href?: string;
-}
-
-export interface GallerySpec {
-  title?: string;
-  images?: GalleryImage[];
-  columns?: number;
-  gap?: string;
-  emptyMessage?: string;
-}
-
-interface GalleryData {
-  spec?: Partial<GallerySpec>;
-  data?: unknown;
-  // Back-compat: allow passing a bare array or bare spec.
-  [k: string]: unknown;
-}
-
-function resolveImages(spec: Partial<GallerySpec>, data: unknown): GalleryImage[] {
-  if (Array.isArray(spec.images) && spec.images.length) return spec.images;
-  if (Array.isArray(data)) return data as GalleryImage[];
-  return [];
-}
-
-function resolveSpec(input: unknown): { spec: Partial<GallerySpec>; data: unknown } {
-  if (!input || typeof input !== 'object') return { spec: {}, data: undefined };
-  const obj = input as GalleryData;
-  // If object has spec/data shape, use it.
-  if ('spec' in obj || 'data' in obj) {
-    return { spec: (obj.spec as Partial<GallerySpec>) ?? {}, data: obj.data };
-  }
-  // If it's a bare array, treat as data.
-  if (Array.isArray(input)) return { spec: {}, data: input };
-  // Else treat the object itself as the spec.
-  return { spec: obj as Partial<GallerySpec>, data: undefined };
-}
-
-function dispatchInteract(container: HTMLElement, image: GalleryImage, index: number): void {
-  container.dispatchEvent(
-    new CustomEvent('widget:interact', {
-      detail: { action: 'imageclick', payload: { image, index } },
-      bubbles: true,
-    }),
-  );
-}
-
-export function render(container: HTMLElement, data: any): () => void {
-  const { spec, data: rawData } = resolveSpec(data);
-  const images = resolveImages(spec, rawData);
-
-  // --- Cleanup bookkeeping -------------------------------------------------
-  const cleanups: Array<() => void> = [];
-  let lightboxEl: HTMLElement | null = null;
-  let lightboxIdx: number | null = null;
-  let previouslyFocused: HTMLElement | null = null;
-
-  // Root
-  container.innerHTML = '';
-  const root = document.createElement('div');
-  root.className = 'bg-surface border border-border rounded-lg p-3 md:p-4 font-sans';
-  container.appendChild(root);
-
-  // Title
-  if (spec.title) {
-    const h = document.createElement('h3');
-    h.className = 'text-sm font-semibold text-text1 mb-3';
-    h.textContent = spec.title;
-    root.appendChild(h);
-  }
-
-  // --- Lightbox ------------------------------------------------------------
-  function closeLightbox(): void {
-    if (!lightboxEl) return;
-    lightboxEl.remove();
-    lightboxEl = null;
-    lightboxIdx = null;
-    if (previouslyFocused && typeof previouslyFocused.focus === 'function') {
-      try {
-        previouslyFocused.focus();
-      } catch {
-        /* no-op */
-      }
-    }
-    previouslyFocused = null;
-  }
-
-  function renderLightboxContent(): void {
-    if (!lightboxEl || lightboxIdx === null) return;
-    const img = images[lightboxIdx];
-    if (!img) return;
-
-    const inner = lightboxEl.querySelector('[data-lightbox-inner]') as HTMLElement | null;
-    if (!inner) return;
-    inner.innerHTML = '';
-
-    const safe = createSafeImage({
-      src: img.src,
-      alt: img.alt ?? '',
-      className: 'max-w-full max-h-[85vh] object-contain rounded',
-      loading: 'eager',
-    });
-    inner.appendChild(safe);
-
-    if (img.caption) {
-      const cap = document.createElement('div');
-      cap.className = 'text-center text-white text-sm mt-2';
-      cap.textContent = img.caption;
-      inner.appendChild(cap);
-    }
-
-    // Close button
-    const closeBtn = document.createElement('button');
-    closeBtn.type = 'button';
-    closeBtn.setAttribute('aria-label', 'Fermer');
-    closeBtn.className =
-      'absolute top-2 right-2 w-8 h-8 rounded-full bg-black/50 text-white flex items-center justify-center text-lg hover:bg-black/70';
-    closeBtn.innerHTML = '&times;';
-    closeBtn.addEventListener('click', (e) => {
-      e.stopPropagation();
-      closeLightbox();
-    });
-    inner.appendChild(closeBtn);
-
-    // Prev
-    if (lightboxIdx > 0) {
-      const prev = document.createElement('button');
-      prev.type = 'button';
-      prev.setAttribute('aria-label', 'Image précédente');
-      prev.className =
-        'absolute left-2 top-1/2 -translate-y-1/2 w-8 h-8 rounded-full bg-black/50 text-white flex items-center justify-center hover:bg-black/70';
-      prev.innerHTML = '&lsaquo;';
-      prev.addEventListener('click', (e) => {
-        e.stopPropagation();
-        goPrev();
-      });
-      inner.appendChild(prev);
-    }
-
-    // Next
-    if (lightboxIdx < images.length - 1) {
-      const next = document.createElement('button');
-      next.type = 'button';
-      next.setAttribute('aria-label', 'Image suivante');
-      next.className =
-        'absolute right-2 top-1/2 -translate-y-1/2 w-8 h-8 rounded-full bg-black/50 text-white flex items-center justify-center hover:bg-black/70';
-      next.innerHTML = '&rsaquo;';
-      next.addEventListener('click', (e) => {
-        e.stopPropagation();
-        goNext();
-      });
-      inner.appendChild(next);
-    }
-
-    // Focus close for a11y
-    try {
-      closeBtn.focus();
-    } catch {
-      /* no-op */
-    }
-  }
-
-  function goPrev(): void {
-    if (lightboxIdx !== null && lightboxIdx > 0) {
-      lightboxIdx--;
-      renderLightboxContent();
-    }
-  }
-  function goNext(): void {
-    if (lightboxIdx !== null && lightboxIdx < images.length - 1) {
-      lightboxIdx++;
-      renderLightboxContent();
-    }
-  }
-
-  function openLightbox(i: number): void {
-    if (i < 0 || i >= images.length) return;
-    if (lightboxEl) closeLightbox();
-    previouslyFocused = (document.activeElement as HTMLElement) ?? null;
-    lightboxIdx = i;
-
-    const overlay = document.createElement('div');
-    overlay.className = 'fixed inset-0 z-50 bg-black/80 flex items-center justify-center';
-    overlay.setAttribute('role', 'dialog');
-    overlay.setAttribute('aria-modal', 'true');
-    overlay.setAttribute('aria-label', 'Image en grand');
-    overlay.addEventListener('click', closeLightbox);
-
-    const inner = document.createElement('div');
-    inner.className = 'relative max-w-[90vw] max-h-[90vh]';
-    inner.setAttribute('data-lightbox-inner', '');
-    inner.addEventListener('click', (e) => e.stopPropagation());
-
-    overlay.appendChild(inner);
-    document.body.appendChild(overlay);
-    lightboxEl = overlay;
-
-    renderLightboxContent();
-  }
-
-  // Global keydown — ESC / arrows when lightbox open.
-  function onKey(e: KeyboardEvent): void {
-    if (lightboxIdx === null) return;
-    if (e.key === 'Escape') {
-      e.preventDefault();
-      closeLightbox();
-    } else if (e.key === 'ArrowLeft') {
-      e.preventDefault();
-      goPrev();
-    } else if (e.key === 'ArrowRight') {
-      e.preventDefault();
-      goNext();
-    } else if (e.key === 'Tab') {
-      // Simple focus trap: keep focus inside the lightbox overlay.
-      if (!lightboxEl) return;
-      const focusables = lightboxEl.querySelectorAll<HTMLElement>(
-        'button, [href], [tabindex]:not([tabindex="-1"])',
-      );
-      if (!focusables.length) return;
-      const first = focusables[0];
-      const last = focusables[focusables.length - 1];
-      const active = document.activeElement as HTMLElement | null;
-      if (e.shiftKey && active === first) {
-        e.preventDefault();
-        last.focus();
-      } else if (!e.shiftKey && active === last) {
-        e.preventDefault();
-        first.focus();
-      }
-    }
-  }
-  window.addEventListener('keydown', onKey);
-  cleanups.push(() => window.removeEventListener('keydown', onKey));
-
-  // --- Body ----------------------------------------------------------------
-  if (images.length === 0) {
-    const p = document.createElement('p');
-    p.className = 'text-text2 text-sm';
-    p.textContent = spec.emptyMessage ?? 'Aucune image';
-    root.appendChild(p);
-  } else if (images.length === 1) {
-    const img = images[0];
-    const btn = document.createElement('button');
-    btn.type = 'button';
-    btn.className =
-      'relative overflow-hidden rounded-lg border border-border hover:border-border2 transition-all cursor-pointer bg-transparent p-0 group w-full';
-    btn.addEventListener('click', () => openLightbox(0));
-    btn.addEventListener('dblclick', () => dispatchInteract(container, img, 0));
-
-    const safe = createSafeImage({
-      src: img.src,
-      alt: img.alt ?? '',
-      className: 'w-full max-h-[400px] object-contain rounded-lg',
-      loading: 'eager',
-    });
-    btn.appendChild(safe);
-
-    if (img.caption || img.alt) {
-      const cap = document.createElement('div');
-      cap.className = 'mt-2 text-center text-xs text-text2';
-      cap.textContent = img.caption ?? img.alt ?? '';
-      btn.appendChild(cap);
-    }
-    root.appendChild(btn);
-  } else {
-    const cols = spec.columns ?? 3;
-    const grid = document.createElement('div');
-    grid.className = 'grid gap-2 responsive-gallery';
-    grid.setAttribute('role', 'list');
-    grid.setAttribute('style', `--gallery-cols: repeat(${cols}, minmax(0, 1fr));`);
-    // Inline the responsive rule as a <style> scope is awkward in vanilla;
-    // we rely on the .responsive-gallery global rule from the Svelte version
-    // being present, but also set a sensible default inline for robustness.
-    // Fallback default (mobile): 2 columns.
-    // The matching CSS (below) ensures desktop uses --gallery-cols.
-    grid.style.gridTemplateColumns = 'repeat(2, minmax(0, 1fr))';
-
-    images.forEach((img, i) => {
-      const btn = document.createElement('button');
-      btn.type = 'button';
-      btn.setAttribute('role', 'listitem');
-      btn.className =
-        'relative overflow-hidden rounded-lg border border-border hover:border-border2 transition-all cursor-pointer bg-transparent p-0 group';
-      btn.title = 'Double-cliquez pour interagir';
-      btn.addEventListener('click', () => openLightbox(i));
-      btn.addEventListener('dblclick', () => dispatchInteract(container, img, i));
-
-      const safe = createSafeImage({
-        src: img.src,
-        alt: img.alt ?? '',
-        className: 'w-full h-32 sm:h-40 object-cover transition-transform group-hover:scale-105',
-        loading: 'lazy',
-      });
-      btn.appendChild(safe);
-
-      if (img.caption) {
-        const overlay = document.createElement('div');
-        overlay.className =
-          'absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/60 to-transparent px-2 py-1.5';
-        const span = document.createElement('span');
-        span.className = 'text-white text-xs';
-        span.textContent = img.caption;
-        overlay.appendChild(span);
-        btn.appendChild(overlay);
-      }
-
-      grid.appendChild(btn);
-    });
-    root.appendChild(grid);
-
-    // Media query for desktop columns: inject once per render (scoped via data-attr).
-    const styleId = 'autoui-gallery-responsive-style';
-    if (!document.getElementById(styleId)) {
-      const style = document.createElement('style');
-      style.id = styleId;
-      style.textContent =
-        '@media (min-width: 768px){.responsive-gallery{grid-template-columns: var(--gallery-cols) !important;}}';
-      document.head.appendChild(style);
-    }
-
-    const count = document.createElement('div');
-    count.className = 'mt-2 text-xs text-text2';
-    count.textContent = `${images.length} image${images.length !== 1 ? 's' : ''}`;
-    root.appendChild(count);
-  }
-
-  // --- Cleanup -------------------------------------------------------------
-  return () => {
-    closeLightbox();
-    for (const fn of cleanups) {
-      try {
-        fn();
-      } catch {
-        /* no-op */
-      }
-    }
-    container.innerHTML = '';
-  };
-}