broadlistening-viewer 0.2.0

data/js/shared/chart_manager.js

@@ -0,0 +1,504 @@
+import ScatterChart from "./scatter_chart";
+import TreemapChart from "./treemap_chart";
+import { CLUSTER_COLORS } from "./colors";
+import { icon, escapeHtml } from "./decidim_core_shim";
+import { t } from "./i18n";
+import Toolbar, { VIEW_MODES } from "./toolbar";
+import SettingsDialog from "./settings_dialog";
+import FullscreenModal from "./fullscreen_modal";
+class ChartManager {
+  constructor(container, data, options = {}) {
+    this.container = container;
+    this.data = data;
+    this.options = {
+      defaultChart: VIEW_MODES.SCATTER_ALL,
+      showToolbar: true,
+      ...options
+    };
+    this.arguments = data.arguments || [];
+    this.clusters = data.clusters || [];
+    this.clusterById = new Map(this.clusters.map((c) => [c.id, c]));
+    this.childrenByParent = /* @__PURE__ */ new Map();
+    this.clustersByLevel = /* @__PURE__ */ new Map();
+    for (const cluster of this.clusters) {
+      const parentId = cluster.parent;
+      if (parentId) {
+        if (!this.childrenByParent.has(parentId)) {
+          this.childrenByParent.set(parentId, []);
+        }
+        this.childrenByParent.get(parentId).push(cluster);
+      }
+      const level = cluster.level ?? 0;
+      if (!this.clustersByLevel.has(level)) {
+        this.clustersByLevel.set(level, []);
+      }
+      this.clustersByLevel.get(level).push(cluster);
+    }
+    for (const children of this.childrenByParent.values()) {
+      children.sort((a, b) => (b.value || 0) - (a.value || 0));
+    }
+    this.clusterColorMap = /* @__PURE__ */ new Map();
+    for (const children of this.childrenByParent.values()) {
+      children.forEach((cluster, index) => {
+        this.clusterColorMap.set(cluster.id, CLUSTER_COLORS[index % CLUSTER_COLORS.length]);
+      });
+    }
+    this.argumentsByClusterId = /* @__PURE__ */ new Map();
+    for (const arg of this.arguments) {
+      for (const clusterId of arg.cluster_ids || []) {
+        if (!this.argumentsByClusterId.has(clusterId)) {
+          this.argumentsByClusterId.set(clusterId, []);
+        }
+        this.argumentsByClusterId.get(clusterId).push(arg);
+      }
+    }
+    this.maxLevel = Math.max(...this.clusters.map((c) => c.level || 0), 0);
+    this.hasDensityData = this.clusters.some((c) => typeof c.density_rank_percentile === "number");
+    this.viewMode = VIEW_MODES.SCATTER_ALL;
+    this.isFullscreen = false;
+    this.treemapLevel = "0";
+    this.maxDensity = 0.2;
+    this.minValue = 5;
+    this.isDenseGroupEnabled = true;
+    if (this.hasDensityData) {
+      this.updateDenseGroupEnabled();
+    }
+    this.init();
+  }
+  init() {
+    if (this.arguments.length === 0) {
+      this.container.innerHTML = `<p class="text-gray text-center py-8">${escapeHtml(t("common.no_data"))}</p>`;
+      return;
+    }
+    this.createLayout();
+    this.renderChart();
+    this.clusterGridContainer = document.getElementById("cluster-grid") || void 0;
+    this.clusterOverviewSection = document.getElementById("cluster-overview-section") || void 0;
+    this.bindClusterCardEvents();
+  }
+  createLayout() {
+    this.container.innerHTML = `
+      <div class="w-full bg-white rounded-lg border border-gray-200 overflow-hidden">
+        <div data-blv="toolbar" class="flex justify-between items-center px-4 py-3 border-b border-gray-200 bg-gray-50"></div>
+        <div data-blv="breadcrumb" class="hidden px-4 py-2 bg-sky-50 border-b border-sky-200"></div>
+        <div data-blv="chart-container" class="w-full"></div>
+      </div>
+    `;
+    this.toolbarContainer = this.container.querySelector('[data-blv="toolbar"]');
+    this.breadcrumbContainer = this.container.querySelector('[data-blv="breadcrumb"]');
+    this.chartContainer = this.container.querySelector('[data-blv="chart-container"]');
+    if (this.options.showToolbar) {
+      this.renderToolbar();
+    }
+  }
+  renderToolbar() {
+    this.toolbar = new Toolbar({
+      viewMode: this.viewMode,
+      hasDensityData: this.hasDensityData,
+      isDenseGroupEnabled: this.isDenseGroupEnabled,
+      showSettings: this.hasDensityData,
+      showFullscreen: true,
+      onViewModeChange: (mode) => this.switchViewMode(mode),
+      onSettingsClick: () => this.openSettingsDialog(),
+      onFullscreenClick: () => this.toggleFullscreen()
+    });
+    this.toolbarContainer.innerHTML = this.toolbar.render();
+    this.toolbar.bindEvents(this.toolbarContainer);
+  }
+  renderBreadcrumb() {
+    const isScatterMode = this.viewMode === VIEW_MODES.SCATTER_ALL || this.viewMode === VIEW_MODES.SCATTER_DENSITY;
+    if (!this.selectedClusterId || !isScatterMode) {
+      this.breadcrumbContainer.innerHTML = "";
+      this.breadcrumbContainer.style.display = "none";
+      return;
+    }
+    const path = this.buildClusterPath(this.selectedClusterId);
+    if (path.length === 0) {
+      this.breadcrumbContainer.innerHTML = "";
+      this.breadcrumbContainer.style.display = "none";
+      return;
+    }
+    this.breadcrumbContainer.style.display = "block";
+    this.breadcrumbContainer.innerHTML = `
+      <div class="flex items-center gap-2 flex-wrap">
+        <span class="text-xs font-medium text-sky-700">${escapeHtml(t("breadcrumb.viewing"))}</span>
+        <nav class="flex items-center gap-1 flex-wrap">
+          <a class="text-sm cursor-pointer text-sky-600 underline hover:text-sky-800" data-cluster-id="">
+            ${escapeHtml(t("breadcrumb.all"))}
+          </a>
+          ${path.map((cluster, index) => `
+            <span class="flex items-center text-slate-400 [&_svg]:w-3.5 [&_svg]:h-3.5">${icon("arrow-right-s-line")}</span>
+            ${index === path.length - 1 ? `<span class="text-sm font-semibold text-slate-800">${escapeHtml(cluster.label)}</span>` : `<a class="text-sm cursor-pointer text-sky-600 underline hover:text-sky-800" data-cluster-id="${escapeHtml(cluster.id)}">${escapeHtml(cluster.label)}</a>`}
+          `).join("")}
+        </nav>
+      </div>
+    `;
+    this.breadcrumbContainer.querySelectorAll("[data-cluster-id]").forEach((btn) => {
+      btn.addEventListener("click", (e) => {
+        const clusterId = e.currentTarget.dataset.clusterId;
+        this.navigateToCluster(clusterId || void 0);
+      });
+    });
+  }
+  renderBreadcrumbInto(container) {
+    const isScatterAllMode = this.viewMode === VIEW_MODES.SCATTER_ALL;
+    if (!this.selectedClusterId || !isScatterAllMode) {
+      container.innerHTML = "";
+      return;
+    }
+    const path = this.buildClusterPath(this.selectedClusterId);
+    if (path.length === 0) {
+      container.innerHTML = "";
+      return;
+    }
+    container.innerHTML = `
+      <div class="flex items-center gap-2 flex-wrap py-2">
+        <span class="text-xs font-medium text-sky-700">${escapeHtml(t("breadcrumb.viewing"))}</span>
+        <nav class="flex items-center gap-1 flex-wrap">
+          <a class="text-sm cursor-pointer text-sky-600 underline hover:text-sky-800" data-cluster-id="">
+            ${escapeHtml(t("breadcrumb.all"))}
+          </a>
+          ${path.map((cluster, index) => `
+            <span class="flex items-center text-slate-400 [&_svg]:w-3.5 [&_svg]:h-3.5">${icon("arrow-right-s-line")}</span>
+            ${index === path.length - 1 ? `<span class="text-sm font-semibold text-slate-800">${escapeHtml(cluster.label)}</span>` : `<a class="text-sm cursor-pointer text-sky-600 underline hover:text-sky-800" data-cluster-id="${escapeHtml(cluster.id)}">${escapeHtml(cluster.label)}</a>`}
+          `).join("")}
+        </nav>
+      </div>
+    `;
+    container.querySelectorAll("[data-cluster-id]").forEach((btn) => {
+      btn.addEventListener("click", (e) => {
+        const clusterId = e.currentTarget.dataset.clusterId;
+        this.selectedClusterId = clusterId || void 0;
+        if (this.fullscreenModal) {
+          this.fullscreenModal.renderBreadcrumb();
+          this.fullscreenModal.renderChart();
+        }
+        this.renderClusterGrid();
+      });
+    });
+  }
+  buildClusterPath(clusterId) {
+    const path = [];
+    let currentId = clusterId;
+    while (currentId && currentId !== "0") {
+      const cluster = this.clusterById.get(currentId);
+      if (cluster) {
+        path.unshift(cluster);
+        currentId = cluster.parent || void 0;
+      } else {
+        break;
+      }
+    }
+    return path;
+  }
+  updateToolbarState() {
+    if (this.toolbar) {
+      this.toolbar.updateState(this.toolbarContainer, {
+        viewMode: this.viewMode,
+        hasDensityData: this.hasDensityData,
+        isDenseGroupEnabled: this.isDenseGroupEnabled
+      });
+    }
+  }
+  switchViewMode(mode) {
+    if (this.viewMode === mode) return;
+    this.viewMode = mode;
+    if (mode === VIEW_MODES.TREEMAP) {
+      this.selectedClusterId = void 0;
+      this.renderClusterGrid();
+    }
+    this.updateToolbarState();
+    this.renderBreadcrumb();
+    this.renderChart();
+  }
+  navigateToCluster(clusterId) {
+    this.selectedClusterId = clusterId;
+    this.renderBreadcrumb();
+    this.renderChart();
+    this.renderClusterGrid();
+  }
+  renderClusterGrid() {
+    if (!this.clusterGridContainer) return;
+    let clustersToShow;
+    if (this.selectedClusterId) {
+      clustersToShow = this.getChildClusters(this.selectedClusterId);
+    } else {
+      clustersToShow = this.getTopLevelClusters();
+    }
+    this.clusterGridContainer.innerHTML = clustersToShow.map((cluster, index) => {
+      const color = CLUSTER_COLORS[index % CLUSTER_COLORS.length];
+      const hasChildren = this.getChildClusters(cluster.id).length > 0;
+      const cursorClass = hasChildren ? "cursor-pointer" : "";
+      const valueCount = cluster.value || 0;
+      return `
+        <div class="card p-4 hover:shadow-md transition-shadow ${escapeHtml(cursorClass)}"
+             style="border-left: 4px solid ${escapeHtml(color)};"
+             data-cluster-id="${escapeHtml(cluster.id)}"
+             ${hasChildren ? `title="${escapeHtml(t("cluster.click_to_expand"))}"` : ""}>
+          <div class="flex items-center gap-3 mb-2">
+            <span class="inline-block w-3 h-3 rounded-full flex-shrink-0" style="background-color: ${escapeHtml(color)};"></span>
+            <span class="font-semibold text-sm line-clamp-2">${escapeHtml(cluster.label)}</span>
+          </div>
+          <div class="flex items-center gap-2 mb-2">
+            <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium" style="background-color: ${escapeHtml(color)}20; color: ${escapeHtml(color)};">
+              ${escapeHtml(t("common.opinions_count", { count: valueCount }))}
+            </span>
+          </div>
+          ${cluster.takeaway ? `<p class="text-gray-2 text-sm line-clamp-3">${escapeHtml(cluster.takeaway)}</p>` : ""}
+        </div>
+      `;
+    }).join("");
+    this.renderClusterGridBreadcrumb();
+    this.bindClusterCardEvents();
+  }
+  renderClusterGridBreadcrumb() {
+    if (!this.clusterOverviewSection) return;
+    const existingBreadcrumb = this.clusterOverviewSection.querySelector('[data-blv="cluster-breadcrumb"]');
+    if (existingBreadcrumb) {
+      existingBreadcrumb.remove();
+    }
+    if (!this.selectedClusterId) return;
+    const path = this.buildClusterPath(this.selectedClusterId);
+    if (path.length === 0) return;
+    const breadcrumbEl = document.createElement("div");
+    breadcrumbEl.dataset.blv = "cluster-breadcrumb";
+    breadcrumbEl.className = "mb-4 px-4 py-3 bg-slate-50 rounded-lg border border-slate-200";
+    breadcrumbEl.innerHTML = `
+      <nav class="flex items-center flex-wrap gap-1">
+        <a class="text-sm cursor-pointer text-sky-600 underline hover:text-sky-800" data-navigate-cluster="">
+          ${escapeHtml(t("breadcrumb.all"))}
+        </a>
+        ${path.map((c, index) => `
+          <span class="flex items-center text-slate-400 [&_svg]:w-3.5 [&_svg]:h-3.5">${icon("arrow-right-s-line")}</span>
+          ${index === path.length - 1 ? `<span class="text-sm font-semibold text-slate-800">${escapeHtml(c.label)}</span>` : `<a class="text-sm cursor-pointer text-sky-600 underline hover:text-sky-800" data-navigate-cluster="${escapeHtml(c.id)}">${escapeHtml(c.label)}</a>`}
+        `).join("")}
+      </nav>
+    `;
+    this.clusterGridContainer.parentNode.insertBefore(breadcrumbEl, this.clusterGridContainer);
+    breadcrumbEl.querySelectorAll("[data-navigate-cluster]").forEach((btn) => {
+      btn.addEventListener("click", (e) => {
+        e.preventDefault();
+        const clusterId = e.currentTarget.dataset.navigateCluster;
+        this.navigateToCluster(clusterId || void 0);
+        this.renderBreadcrumb();
+      });
+    });
+  }
+  renderChart() {
+    if (this.scatterChart) {
+      this.scatterChart.destroy();
+      this.scatterChart = void 0;
+    }
+    if (this.treemapChart) {
+      this.treemapChart.destroy();
+      this.treemapChart = void 0;
+    }
+    this.chartContainer.innerHTML = '<div data-blv="chart-plot" class="w-full h-[350px] md:h-[500px]"></div>';
+    const plotContainer = this.chartContainer.querySelector('[data-blv="chart-plot"]');
+    this.renderChartInto(plotContainer);
+  }
+  renderChartInto(container) {
+    if (this.viewMode === VIEW_MODES.SCATTER_ALL) {
+      const chart = new ScatterChart(container, this.data, {
+        selectedClusterId: this.selectedClusterId,
+        targetLevel: 1,
+        clusterColorMap: this.clusterColorMap,
+        clusterById: this.clusterById,
+        childrenByParent: this.childrenByParent,
+        clustersByLevel: this.clustersByLevel,
+        argumentsByClusterId: this.argumentsByClusterId
+      });
+      chart.render();
+      if (container === this.chartContainer?.querySelector('[data-blv="chart-plot"]')) {
+        this.scatterChart = chart;
+      }
+    } else if (this.viewMode === VIEW_MODES.SCATTER_DENSITY) {
+      const { filteredClusterIds } = this.getDenseClusters();
+      const chart = new ScatterChart(container, this.data, {
+        targetLevel: this.maxLevel,
+        filteredClusterIds,
+        maxLevel: this.maxLevel,
+        clusterColorMap: this.clusterColorMap,
+        clusterById: this.clusterById,
+        childrenByParent: this.childrenByParent,
+        clustersByLevel: this.clustersByLevel,
+        argumentsByClusterId: this.argumentsByClusterId
+      });
+      chart.render();
+      if (container === this.chartContainer?.querySelector('[data-blv="chart-plot"]')) {
+        this.scatterChart = chart;
+      }
+    } else if (this.viewMode === VIEW_MODES.TREEMAP) {
+      const chart = new TreemapChart(container, this.data, {
+        level: this.treemapLevel,
+        onLevelChange: (level) => {
+          this.treemapLevel = level;
+        }
+      });
+      chart.render();
+      if (container === this.chartContainer?.querySelector('[data-blv="chart-plot"]')) {
+        this.treemapChart = chart;
+      }
+    }
+  }
+  toggleFullscreen() {
+    if (this.isFullscreen) {
+      this.exitFullscreen();
+    } else {
+      this.enterFullscreen();
+    }
+  }
+  enterFullscreen() {
+    this.isFullscreen = true;
+    this.fullscreenModal = new FullscreenModal({
+      viewMode: this.viewMode,
+      hasDensityData: this.hasDensityData,
+      isDenseGroupEnabled: this.isDenseGroupEnabled,
+      onViewModeChange: (mode) => {
+        this.viewMode = mode;
+        if (mode === VIEW_MODES.TREEMAP) {
+          this.selectedClusterId = void 0;
+        }
+        this.fullscreenModal.updateToolbarState({ viewMode: mode });
+        this.fullscreenModal.renderBreadcrumb();
+        this.fullscreenModal.renderChart();
+      },
+      onClose: () => {
+        this.exitFullscreen();
+      },
+      renderChart: (container) => {
+        this.renderChartInto(container);
+      },
+      renderBreadcrumb: (container) => {
+        this.renderBreadcrumbInto(container);
+      }
+    });
+    this.fullscreenModal.open();
+  }
+  exitFullscreen() {
+    this.isFullscreen = false;
+    if (this.fullscreenModal) {
+      this.fullscreenModal.close();
+      this.fullscreenModal = void 0;
+    }
+    this.updateToolbarState();
+    this.renderBreadcrumb();
+    this.renderChart();
+    this.renderClusterGrid();
+  }
+  bindClusterCardEvents() {
+    if (!this.clusterGridContainer) return;
+    if (this._clusterGridClickHandler) {
+      this.clusterGridContainer.removeEventListener("click", this._clusterGridClickHandler);
+    }
+    this._clusterGridClickHandler = (e) => {
+      const card = e.target.closest("[data-cluster-id]");
+      if (!card) return;
+      const clusterId = card.dataset.clusterId;
+      if (clusterId && this.getChildClusters(clusterId).length > 0) {
+        e.preventDefault();
+        this.handleClusterCardClick(clusterId);
+      }
+    };
+    this.clusterGridContainer.addEventListener("click", this._clusterGridClickHandler);
+  }
+  handleClusterCardClick(clusterId) {
+    const children = this.getChildClusters(clusterId);
+    if (children.length > 0) {
+      if (this.viewMode === VIEW_MODES.TREEMAP) {
+        this.viewMode = VIEW_MODES.SCATTER_ALL;
+        this.updateToolbarState();
+      }
+      this.navigateToCluster(clusterId);
+    }
+  }
+  getChildClusters(parentId) {
+    return this.childrenByParent.get(parentId) || [];
+  }
+  getTopLevelClusters() {
+    return this.childrenByParent.get("0") || [];
+  }
+  getDenseClusters() {
+    if (!this.hasDensityData) {
+      return { filtered: [], filteredClusterIds: /* @__PURE__ */ new Set(), isEmpty: true };
+    }
+    const deepestLevelClusters = this.clustersByLevel.get(this.maxLevel) || [];
+    const filteredDeepestLevelClusters = deepestLevelClusters.filter((c) => (c.density_rank_percentile ?? 1) <= this.maxDensity).filter((c) => (c.value || 0) >= this.minValue);
+    const filteredClusterIds = new Set(filteredDeepestLevelClusters.map((c) => c.id));
+    const filtered = [
+      ...this.clusters.filter((c) => c.level !== this.maxLevel),
+      ...filteredDeepestLevelClusters
+    ];
+    return {
+      filtered,
+      filteredClusterIds,
+      isEmpty: filteredDeepestLevelClusters.length === 0
+    };
+  }
+  updateDenseGroupEnabled() {
+    const { isEmpty } = this.getDenseClusters();
+    this.isDenseGroupEnabled = !isEmpty;
+    if (this.viewMode === VIEW_MODES.SCATTER_DENSITY && isEmpty) {
+      this.viewMode = VIEW_MODES.SCATTER_ALL;
+    }
+  }
+  openSettingsDialog() {
+    this.settingsDialog = new SettingsDialog({
+      maxDensity: this.maxDensity,
+      minValue: this.minValue,
+      onApply: (settings) => {
+        this.maxDensity = settings.maxDensity;
+        this.minValue = settings.minValue;
+        this.updateDenseGroupEnabled();
+        this.updateToolbarState();
+        if (this.fullscreenModal) {
+          this.fullscreenModal.updateToolbarState({
+            isDenseGroupEnabled: this.isDenseGroupEnabled
+          });
+        }
+        if (this.viewMode === VIEW_MODES.SCATTER_DENSITY) {
+          this.renderChart();
+          if (this.fullscreenModal) {
+            this.fullscreenModal.renderChart();
+          }
+        }
+      },
+      onClose: () => {
+        this.settingsDialog = void 0;
+      }
+    });
+    this.settingsDialog.open();
+  }
+  destroy() {
+    if (this.scatterChart) {
+      this.scatterChart.destroy();
+      this.scatterChart = void 0;
+    }
+    if (this.treemapChart) {
+      this.treemapChart.destroy();
+      this.treemapChart = void 0;
+    }
+    if (this.fullscreenModal) {
+      this.fullscreenModal.close();
+      this.fullscreenModal = void 0;
+    }
+    if (this.settingsDialog) {
+      this.settingsDialog.close();
+      this.settingsDialog = void 0;
+    }
+    if (this.clusterGridContainer && this._clusterGridClickHandler) {
+      this.clusterGridContainer.removeEventListener("click", this._clusterGridClickHandler);
+      this._clusterGridClickHandler = void 0;
+    }
+    if (this.container) this.container.innerHTML = "";
+    this.toolbarContainer = void 0;
+    this.breadcrumbContainer = void 0;
+    this.chartContainer = void 0;
+    this.clusterGridContainer = void 0;
+    this.clusterOverviewSection = void 0;
+    this.toolbar = void 0;
+  }
+}
+export {
+  ChartManager as default
+};

data/js/shared/colors.js

@@ -0,0 +1,81 @@
+const CLUSTER_COLORS = [
+  "#7ac943",
+  // green
+  "#3fa9f5",
+  // blue
+  "#ff7997",
+  // pink
+  "#ffcc5c",
+  // yellow
+  "#845ec2",
+  // purple
+  "#00c9a7",
+  // teal
+  "#ff6f61",
+  // coral
+  "#6c5ce7",
+  // indigo
+  "#fdcb6e",
+  // gold
+  "#74b9ff",
+  // light blue
+  "#e17055",
+  // burnt orange
+  "#00b894",
+  // mint
+  "#fd79a8",
+  // hot pink
+  "#a29bfe",
+  // lavender
+  "#55efc4",
+  // aqua
+  "#fab1a0",
+  // peach
+  "#81ecec",
+  // cyan
+  "#f8b500",
+  // amber
+  "#2d98da",
+  // ocean blue
+  "#26de81",
+  // lime
+  "#fc5c65",
+  // watermelon
+  "#45aaf2",
+  // sky blue
+  "#a55eea",
+  // violet
+  "#fed330",
+  // sunshine
+  "#20bf6b",
+  // emerald
+  "#eb3b5a",
+  // strawberry
+  "#fa8231",
+  // tangerine
+  "#4b7bec",
+  // royal blue
+  "#8854d0",
+  // grape
+  "#2bcbba"
+  // seafoam
+];
+const INACTIVE_COLOR = "rgba(200, 200, 200, 0.3)";
+function getClusterColor(clusterId) {
+  if (!clusterId) return INACTIVE_COLOR;
+  const match = clusterId.match(/_(\d+)$/);
+  if (match) {
+    const index = parseInt(match[1], 10);
+    return CLUSTER_COLORS[index % CLUSTER_COLORS.length];
+  }
+  return CLUSTER_COLORS[0];
+}
+function getColorByIndex(index) {
+  return CLUSTER_COLORS[index % CLUSTER_COLORS.length];
+}
+export {
+  CLUSTER_COLORS,
+  INACTIVE_COLOR,
+  getClusterColor,
+  getColorByIndex
+};

data/js/shared/decidim_core_shim.js

@@ -0,0 +1,67 @@
+const escapeHtml = (text) => {
+  if (typeof text !== "string") return String(text ?? "");
+  const map = { "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" };
+  return text.replace(/[&<>"']/g, (c) => map[c]);
+};
+const escapeQuotes = (text) => {
+  if (typeof text !== "string") return String(text ?? "");
+  return text.replace(/"/g, "&quot;").replace(/'/g, "&#39;");
+};
+const ICONS = {
+  "bubble-chart-line": '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" width="1em" height="1em"><path d="M16 16C17.6569 16 19 17.3431 19 19C19 20.6569 17.6569 22 16 22C14.3431 22 13 20.6569 13 19C13 17.3431 14.3431 16 16 16ZM6 12C8.20914 12 10 13.7909 10 16C10 18.2091 8.20914 20 6 20C3.79086 20 2 18.2091 2 16C2 13.7909 3.79086 12 6 12ZM16 18C15.4477 18 15 18.4477 15 19C15 19.5523 15.4477 20 16 20C16.5523 20 17 19.5523 17 19C17 18.4477 16.5523 18 16 18ZM6 14C4.89543 14 4 14.8954 4 16C4 17.1046 4.89543 18 6 18C7.10457 18 8 17.1046 8 16C8 14.8954 7.10457 14 6 14ZM14.5 2C17.5376 2 20 4.46243 20 7.5C20 10.5376 17.5376 13 14.5 13C11.4624 13 9 10.5376 9 7.5C9 4.46243 11.4624 2 14.5 2ZM14.5 4C12.567 4 11 5.567 11 7.5C11 9.433 12.567 11 14.5 11C16.433 11 18 9.433 18 7.5C18 5.567 16.433 4 14.5 4Z"/></svg>',
+  "focus-3-line": '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" width="1em" height="1em"><path d="M13 1L13.001 4.06201C16.6192 4.51365 19.4869 7.38163 19.9381 11L23 11V13L19.938 13.001C19.4864 16.6189 16.6189 19.4864 13.001 19.938L13 23H11L11 19.9381C7.38163 19.4869 4.51365 16.6192 4.06201 13.001L1 13V11L4.06189 11C4.51312 7.38129 7.38129 4.51312 11 4.06189L11 1H13ZM12 6C8.68629 6 6 8.68629 6 12C6 15.3137 8.68629 18 12 18C15.3137 18 18 15.3137 18 12C18 8.68629 15.3137 6 12 6ZM12 10C13.1046 10 14 10.8954 14 12C14 13.1046 13.1046 14 12 14C10.8954 14 10 13.1046 10 12C10 10.8954 10.8954 10 12 10Z"/></svg>',
+  "layout-grid-line": '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" width="1em" height="1em"><path d="M21 3C21.5523 3 22 3.44772 22 4V20C22 20.5523 21.5523 21 21 21H3C2.44772 21 2 20.5523 2 20V4C2 3.44772 2.44772 3 3 3H21ZM11 13H4V19H11V13ZM20 13H13V19H20V13ZM11 5H4V11H11V5ZM20 5H13V11H20V5Z"/></svg>',
+  "settings-3-line": '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" width="1em" height="1em"><path d="M3.33946 17.0002C2.90721 16.2515 2.58277 15.4702 2.36133 14.6741C3.3338 14.1779 3.99972 13.1668 3.99972 12.0002C3.99972 10.8345 3.3348 9.824 2.36353 9.32741C2.81025 7.71651 3.65857 6.21627 4.86474 4.99001C5.7807 5.58416 6.98935 5.65534 7.99972 5.072C9.01009 4.48866 9.55277 3.40635 9.4962 2.31604C11.1613 1.8846 12.8847 1.90004 14.5031 2.31862C14.4475 3.40806 14.9901 4.48912 15.9997 5.072C17.0101 5.65532 18.2187 5.58416 19.1346 4.99007C19.7133 5.57986 20.2277 6.25151 20.66 7.00021C21.0922 7.7489 21.4167 8.53025 21.6381 9.32628C20.6656 9.82247 19.9997 10.8336 19.9997 12.0002C19.9997 13.166 20.6646 14.1764 21.6359 14.673C21.1892 16.2839 20.3409 17.7841 19.1347 19.0104C18.2187 18.4163 17.0101 18.3451 15.9997 18.9284C14.9893 19.5117 14.4467 20.5941 14.5032 21.6844C12.8382 22.1158 11.1148 22.1004 9.49633 21.6818C9.55191 20.5923 9.00929 19.5113 7.99972 18.9284C6.98938 18.3451 5.78079 18.4162 4.86484 19.0103C4.28617 18.4205 3.77172 17.7489 3.33946 17.0002ZM8.99972 17.1964C10.0911 17.8265 10.8749 18.8227 11.2503 19.9659C11.7486 20.0133 12.2502 20.014 12.7486 19.9675C13.1238 18.8237 13.9078 17.8268 14.9997 17.1964C16.0916 16.5659 17.347 16.3855 18.5252 16.6324C18.8146 16.224 19.0648 15.7892 19.2729 15.334C18.4706 14.4373 17.9997 13.2604 17.9997 12.0002C17.9997 10.74 18.4706 9.5632 19.2729 8.6665C19.1688 8.4405 19.0538 8.21822 18.9279 8.00021C18.802 7.78219 18.667 7.57148 18.5233 7.36842C17.3457 7.61476 16.0911 7.43414 14.9997 6.80405C13.9083 6.17395 13.1246 5.17768 12.7491 4.03455C12.2509 3.98714 11.7492 3.98646 11.2509 4.03292C10.8756 5.17671 10.0916 6.17364 8.99972 6.80405C7.9078 7.43447 6.65245 7.61494 5.47428 7.36803C5.18485 7.77641 4.93463 8.21117 4.72656 8.66637C5.52881 9.56311 5.99972 10.74 5.99972 12.0002C5.99972 13.2604 5.52883 14.4372 4.72656 15.3339C4.83067 15.5599 4.94564 15.7822 5.07152 16.0002C5.19739 16.2182 5.3324 16.4289 5.47612 16.632C6.65377 16.3857 7.90838 16.5663 8.99972 17.1964ZM11.9997 15.0002C10.3429 15.0002 8.99972 13.6571 8.99972 12.0002C8.99972 10.3434 10.3429 9.00021 11.9997 9.00021C13.6566 9.00021 14.9997 10.3434 14.9997 12.0002C14.9997 13.6571 13.6566 15.0002 11.9997 15.0002ZM11.9997 13.0002C12.552 13.0002 12.9997 12.5525 12.9997 12.0002C12.9997 11.4479 12.552 11.0002 11.9997 11.0002C11.4474 11.0002 10.9997 11.4479 10.9997 12.0002C10.9997 12.5525 11.4474 13.0002 11.9997 13.0002Z"/></svg>',
+  "fullscreen-line": '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" width="1em" height="1em"><path d="M8 3V5H4V9H2V3H8ZM2 21V15H4V19H8V21H2ZM22 21H16V19H20V15H22V21ZM22 9H20V5H16V3H22V9Z"/></svg>',
+  "close-line": '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" width="1em" height="1em"><path d="M11.9997 10.5865L16.9495 5.63672L18.3637 7.05093L13.4139 12.0007L18.3637 16.9504L16.9495 18.3646L11.9997 13.4149L7.04996 18.3646L5.63574 16.9504L10.5855 12.0007L5.63574 7.05093L7.04996 5.63672L11.9997 10.5865Z"/></svg>',
+  "arrow-right-s-line": '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" width="1em" height="1em"><path d="M13.1717 12.0007L8.22192 7.05093L9.63614 5.63672L16.0001 12.0007L9.63614 18.3646L8.22192 16.9504L13.1717 12.0007Z"/></svg>',
+  "arrow-left-s-line": '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" width="1em" height="1em"><path d="M10.8284 12.0007L15.7782 16.9504L14.364 18.3646L8 12.0007L14.364 5.63672L15.7782 7.05093L10.8284 12.0007Z"/></svg>'
+};
+const icon = (name) => {
+  return ICONS[name] || `<span>[${name}]</span>`;
+};
+class Dialogs {
+  constructor(selector, options = {}) {
+    this.element = document.querySelector(selector);
+    this.options = options;
+    if (this.element) {
+      this._setupBackdrop();
+      this._setupCloseButtons();
+    }
+  }
+  open() {
+    if (!this.element) return;
+    this.element.setAttribute("aria-hidden", "false");
+    this.options.onOpen?.();
+  }
+  show() {
+    this.open();
+  }
+  close() {
+    if (!this.element) return;
+    this.element.setAttribute("aria-hidden", "true");
+    this.options.onClose?.();
+  }
+  destroy() {
+    this.element = null;
+    this.options = {};
+  }
+  _setupBackdrop() {
+    this.element.addEventListener("click", (e) => {
+      if (e.target === this.element) this.close();
+    });
+  }
+  _setupCloseButtons() {
+    const closingSelector = this.options.closingSelector;
+    if (!closingSelector) return;
+    this.element.querySelectorAll(closingSelector).forEach((btn) => {
+      btn.addEventListener("click", () => this.close());
+    });
+  }
+}
+export {
+  Dialogs,
+  escapeHtml,
+  escapeQuotes,
+  icon
+};