@abydahana/iconpicker 1.0.0

package/src/core/icon-picker.ts

@@ -0,0 +1,353 @@
+import type { IconItem, IconPickerOptions, IconSetDefinition } from "../types";
+import { builtInIconSets } from "../iconsets/index";
+import { createPopoverTemplate, renderTabs, type TemplateElements } from "../dom/template";
+import { PopoverPositioner } from "./popover";
+import { IconGrid } from "./grid";
+import { loadIconFont } from "./font-loader";
+
+export class IconPicker {
+  private target: HTMLElement;
+  private inputElement: HTMLInputElement | null = null;
+  private options: Required<Omit<IconPickerOptions, "container" | "onSelect" | "onOpen" | "onClose">> & {
+    container?: HTMLElement | string;
+    onSelect?: (icon: IconItem) => void;
+    onOpen?: () => void;
+    onClose?: () => void;
+  };
+
+  private sets: IconSetDefinition[] = [];
+  private activeSetId = "";
+  private currentSearch = "";
+  private currentValue = "";
+  private isOpen = false;
+
+  private dom: TemplateElements;
+  private positioner: PopoverPositioner;
+  private grid: IconGrid;
+
+  private outsideClickListener: (e: MouseEvent) => void;
+  private keydownListener: (e: KeyboardEvent) => void;
+  private targetClickListener: (e: MouseEvent) => void;
+
+  constructor(target: HTMLElement | string, options: IconPickerOptions = {}) {
+    const el = typeof target === "string" ? document.querySelector<HTMLElement>(target) : target;
+    if (!el) {
+      throw new Error(`[IconPicker] Target element "${target}" not found.`);
+    }
+    this.target = el;
+    if (el instanceof HTMLInputElement) {
+      this.inputElement = el;
+    } else {
+      this.inputElement = el.querySelector<HTMLInputElement>("input");
+    }
+
+    // Resolve icon sets
+    const rawSets = options.iconSets || ["mdi", "fa", "bi", "tabler", "remix", "boxicons", "lucide"];
+    for (const item of rawSets) {
+      if (typeof item === "string") {
+        const resolved = builtInIconSets[item.toLowerCase()];
+        if (resolved && !this.sets.some((s) => s.id === resolved.id)) {
+          this.sets.push(resolved);
+        }
+      } else if (item && typeof item === "object" && item.id) {
+        this.sets.push(item);
+      }
+    }
+
+    if (this.sets.length === 0) {
+      this.sets.push(builtInIconSets.mdi);
+    }
+
+    const defaultSetId =
+      options.defaultSet && this.sets.some((s) => s.id === options.defaultSet) ? options.defaultSet : this.sets[0].id;
+
+    this.options = {
+      theme: options.theme || "default",
+      placement: options.placement || "bottom-start",
+      iconSets: this.sets,
+      defaultSet: defaultSetId,
+      searchPlaceholder: options.searchPlaceholder || "Search icons...",
+      value: options.value || (this.inputElement ? this.inputElement.value : ""),
+      container: options.container,
+      showTabs: options.showTabs ?? true,
+      showFooter: options.showFooter ?? true,
+      closeOnSelect: options.closeOnSelect ?? true,
+      emptyText: options.emptyText || "No icons found matching your search",
+      itemsPerPage: options.itemsPerPage || 120,
+      loadFonts: options.loadFonts ?? true,
+      fontUrls: options.fontUrls || {},
+      onSelect: options.onSelect,
+      onOpen: options.onOpen,
+      onClose: options.onClose
+    };
+
+    this.activeSetId = this.options.defaultSet;
+    this.currentValue = this.options.value;
+
+    if (this.options.loadFonts) {
+      loadIconFont(this.activeSetId, this.options.fontUrls);
+      if (this.currentValue) {
+        for (const s of this.sets) {
+          if (s.prefix && this.currentValue.startsWith(s.prefix)) {
+            loadIconFont(s.id, this.options.fontUrls);
+            break;
+          }
+        }
+      }
+    }
+
+    // Create DOM structure
+    this.dom = createPopoverTemplate(this.options.theme, this.options.searchPlaceholder, this.options.emptyText);
+
+    if (!this.options.showFooter) {
+      this.dom.footer.style.display = "none";
+    }
+
+    // Resolve container
+    let containerEl = document.body;
+    if (this.options.container) {
+      if (typeof this.options.container === "string") {
+        const c = document.querySelector<HTMLElement>(this.options.container);
+        if (c) containerEl = c;
+      } else if (this.options.container instanceof HTMLElement) {
+        containerEl = this.options.container;
+      }
+    }
+
+    // Initialize Positioner
+    this.positioner = new PopoverPositioner(this.target, this.dom.root, {
+      placement: this.options.placement,
+      container: containerEl
+    });
+
+    // Initialize Grid
+    this.grid = new IconGrid({
+      container: this.dom.grid,
+      bodyElement: this.dom.body,
+      emptyElement: this.dom.emptyState,
+      chunkSize: this.options.itemsPerPage,
+      onSelect: (icon) => this.handleIconSelect(icon)
+    });
+
+    // Event listeners
+    const inputGroup = this.target.closest(".input-group");
+
+    this.outsideClickListener = (e: MouseEvent) => {
+      if (!this.isOpen) return;
+      const clicked = e.target as Node | null;
+      if (!clicked) return;
+      if (this.dom.root.contains(clicked)) return;
+      if (this.target.contains(clicked)) return;
+      if (inputGroup && inputGroup.contains(clicked)) return;
+      const card = this.target.closest(".menu-item-card");
+      const barIcon = card?.querySelector(".menu-item-icon-preview");
+      if (barIcon && barIcon.contains(clicked)) return;
+      this.close();
+    };
+
+    this.keydownListener = (e: KeyboardEvent) => {
+      if (!this.isOpen) return;
+      if (e.key === "Escape") {
+        e.preventDefault();
+        this.close();
+      }
+    };
+
+    this.targetClickListener = (e: MouseEvent) => {
+      e.stopPropagation();
+      this.toggle();
+    };
+
+    this.bindEvents(inputGroup);
+    this.updatePreview(this.currentValue);
+  }
+
+  private bindEvents(inputGroup: Element | null): void {
+    this.target.addEventListener("click", this.targetClickListener);
+    this.target.addEventListener("focus", () => {
+      if (!this.isOpen) this.open();
+    });
+
+    const card = this.target.closest(".menu-item-card");
+    if (card) {
+      const barIcon = card.querySelector<HTMLElement>(".menu-item-icon-preview");
+      if (barIcon) {
+        barIcon.style.cursor = "pointer";
+        barIcon.setAttribute("role", "button");
+        barIcon.title = "Click to change icon";
+        barIcon.addEventListener("click", (e) => {
+          e.preventDefault();
+          e.stopPropagation();
+          this.toggle();
+        });
+      }
+    }
+
+    if (inputGroup) {
+      const addons = inputGroup.querySelectorAll<HTMLElement>('.input-group-text, button:not([type="submit"])');
+      addons.forEach((addon) => {
+        addon.style.cursor = "pointer";
+        addon.addEventListener("click", this.targetClickListener);
+      });
+    }
+
+    // Search input
+    this.dom.searchInput.addEventListener("input", () => {
+      const val = this.dom.searchInput.value.trim().toLowerCase();
+      this.currentSearch = val;
+      this.dom.searchClearBtn.style.display = val ? "flex" : "none";
+      this.filterIcons();
+    });
+
+    this.dom.searchClearBtn.addEventListener("click", (e) => {
+      e.stopPropagation();
+      this.dom.searchInput.value = "";
+      this.currentSearch = "";
+      this.dom.searchClearBtn.style.display = "none";
+      this.filterIcons();
+      this.dom.searchInput.focus();
+    });
+
+    // Footer clear button
+    this.dom.clearSelectionBtn.addEventListener("click", (e) => {
+      e.stopPropagation();
+      this.setValue("");
+      if (this.options.closeOnSelect) {
+        this.close();
+      }
+    });
+
+    // Prevent clicks inside popover from propagating to outside listener
+    this.dom.root.addEventListener("click", (e) => {
+      e.stopPropagation();
+    });
+  }
+
+  private filterIcons(): void {
+    const activeSet = this.sets.find((s) => s.id === this.activeSetId);
+    if (!activeSet) return;
+
+    let filtered = activeSet.icons;
+    if (this.currentSearch) {
+      filtered = activeSet.icons.filter((name) => name.toLowerCase().includes(this.currentSearch));
+    }
+
+    this.grid.setIcons(filtered, activeSet, this.currentValue);
+  }
+
+  private handleIconSelect(icon: IconItem): void {
+    this.setValue(icon.className);
+    if (this.options.onSelect) {
+      this.options.onSelect(icon);
+    }
+    if (this.options.closeOnSelect) {
+      this.close();
+    }
+  }
+
+  public setValue(val: string): void {
+    this.currentValue = val;
+    if (this.inputElement) {
+      this.inputElement.value = val;
+      this.inputElement.dispatchEvent(new Event("input", { bubbles: true }));
+      this.inputElement.dispatchEvent(new Event("change", { bubbles: true }));
+    }
+    this.updatePreview(val);
+    this.grid.setSelectedValue(val);
+  }
+
+  public getValue(): string {
+    return this.currentValue;
+  }
+
+  private updatePreview(val: string): void {
+    if (val) {
+      this.dom.previewIcon.className = `iconpicker-preview-icon ${val}`;
+      this.dom.previewIcon.style.display = "inline-block";
+      this.dom.previewName.textContent = val;
+    } else {
+      this.dom.previewIcon.className = "iconpicker-preview-icon";
+      this.dom.previewIcon.style.display = "none";
+      this.dom.previewName.textContent = "None selected";
+    }
+
+    // If target has an icon preview sibling, update it too
+    const previewEl = this.target.parentElement?.querySelector<HTMLElement>(
+      "[data-icon-preview], .icon-preview, i.input-group-text"
+    );
+    if (previewEl) {
+      const iconTag = previewEl.tagName === "I" ? previewEl : previewEl.querySelector("i");
+      if (iconTag) {
+        iconTag.className = val || "mdi mdi-emoticon-outline";
+      }
+    }
+  }
+
+  public open(): void {
+    if (this.isOpen) return;
+    this.isOpen = true;
+
+    // Render tabs if enabled
+    if (this.options.showTabs) {
+      renderTabs(this.dom.tabsContainer, this.sets, this.activeSetId, (setId) => {
+        this.activeSetId = setId;
+        if (this.options.loadFonts) {
+          loadIconFont(setId, this.options.fontUrls);
+        }
+        renderTabs(this.dom.tabsContainer, this.sets, this.activeSetId, (s) => (this.activeSetId = s));
+        this.filterIcons();
+      });
+    }
+
+    // Attach to DOM and calculate position
+    this.positioner.attach();
+    this.filterIcons();
+
+    requestAnimationFrame(() => {
+      this.positioner.updatePosition();
+    });
+
+    setTimeout(() => {
+      if (this.isOpen) {
+        document.addEventListener("click", this.outsideClickListener);
+      }
+    }, 20);
+    document.addEventListener("keydown", this.keydownListener);
+
+    setTimeout(() => {
+      this.dom.searchInput.focus();
+    }, 50);
+
+    if (this.options.onOpen) {
+      this.options.onOpen();
+    }
+  }
+
+  public close(): void {
+    if (!this.isOpen) return;
+    this.isOpen = false;
+
+    this.positioner.detach();
+    document.removeEventListener("click", this.outsideClickListener);
+    document.removeEventListener("keydown", this.keydownListener);
+
+    if (this.options.onClose) {
+      this.options.onClose();
+    }
+  }
+
+  public toggle(): void {
+    if (this.isOpen) {
+      this.close();
+    } else {
+      this.open();
+    }
+  }
+
+  public destroy(): void {
+    this.close();
+    this.target.removeEventListener("click", this.targetClickListener);
+    this.grid.destroy();
+    this.positioner.detach();
+  }
+}

package/src/core/popover.ts

@@ -0,0 +1,113 @@
+import type { IconPickerPlacement } from "../types";
+
+export interface PopoverPositionOptions {
+  placement?: IconPickerPlacement;
+  offset?: number;
+  container?: HTMLElement;
+}
+
+export class PopoverPositioner {
+  private reference: HTMLElement;
+  private popover: HTMLElement;
+  private options: Required<PopoverPositionOptions>;
+  private handleUpdate: () => void;
+
+  constructor(reference: HTMLElement, popover: HTMLElement, options: PopoverPositionOptions = {}) {
+    this.reference = reference;
+    this.popover = popover;
+    this.options = {
+      placement: options.placement || "auto",
+      offset: options.offset ?? 6,
+      container: options.container || document.body
+    };
+
+    this.handleUpdate = () => {
+      if (this.popover.parentElement) {
+        this.updatePosition();
+      }
+    };
+  }
+
+  public attach(): void {
+    if (!this.popover.parentElement) {
+      this.options.container.appendChild(this.popover);
+    }
+    this.updatePosition();
+    window.addEventListener("resize", this.handleUpdate, { passive: true });
+    window.addEventListener("scroll", this.handleUpdate, { passive: true, capture: true });
+  }
+
+  public detach(): void {
+    window.removeEventListener("resize", this.handleUpdate);
+    window.removeEventListener("scroll", this.handleUpdate, { capture: true });
+    if (this.popover.parentElement) {
+      this.popover.parentElement.removeChild(this.popover);
+    }
+  }
+
+  public updatePosition(): void {
+    let refRect = this.reference.getBoundingClientRect();
+    if (refRect.width === 0 && refRect.height === 0) {
+      const card = this.reference.closest(".menu-item-card");
+      if (card) {
+        const barIcon = card.querySelector<HTMLElement>(".menu-item-icon-preview");
+        if (barIcon && barIcon.getBoundingClientRect().width > 0) {
+          refRect = barIcon.getBoundingClientRect();
+        }
+      }
+    }
+    const popRect = this.popover.getBoundingClientRect();
+    const viewportWidth = window.innerWidth || document.documentElement.clientWidth;
+    const viewportHeight = window.innerHeight || document.documentElement.clientHeight;
+    const padding = 8;
+    const offset = this.options.offset;
+
+    const placement = this.options.placement;
+
+    // Determine vertical direction if auto
+    const spaceBelow = viewportHeight - refRect.bottom - offset - padding;
+    const spaceAbove = refRect.top - offset - padding;
+
+    let isTop: boolean;
+    if (placement.startsWith("top")) {
+      // flip to bottom if top has less space
+      isTop = !(spaceAbove < popRect.height && spaceBelow > spaceAbove);
+    } else if (placement.startsWith("bottom")) {
+      // flip to top if bottom has less space
+      isTop = spaceBelow < popRect.height && spaceAbove > spaceBelow;
+    } else {
+      // auto
+      isTop = spaceBelow < 280 && spaceAbove > spaceBelow;
+    }
+
+    // Calculate Y
+    let top = isTop ? refRect.top - popRect.height - offset : refRect.bottom + offset;
+
+    // Constrain Y
+    if (top < padding) {
+      top = padding;
+    } else if (top + popRect.height > viewportHeight - padding) {
+      top = Math.max(padding, viewportHeight - popRect.height - padding);
+    }
+
+    // Calculate X
+    let left = refRect.left;
+    if (placement.endsWith("end")) {
+      left = refRect.right - popRect.width;
+    }
+
+    // Constrain X within viewport
+    if (left + popRect.width > viewportWidth - padding) {
+      left = viewportWidth - popRect.width - padding;
+    }
+    if (left < padding) {
+      left = padding;
+    }
+
+    this.popover.style.position = "fixed";
+    this.popover.style.zIndex = "99999";
+    this.popover.style.top = `${Math.round(top)}px`;
+    this.popover.style.left = `${Math.round(left)}px`;
+    this.popover.setAttribute("data-placement", isTop ? "top" : "bottom");
+  }
+}

package/src/dom/template.ts

@@ -0,0 +1,173 @@
+import type { IconPickerTheme, IconSetDefinition } from "../types";
+
+export interface TemplateElements {
+  root: HTMLElement;
+  header: HTMLElement;
+  searchInput: HTMLInputElement;
+  searchClearBtn: HTMLButtonElement;
+  tabsContainer: HTMLElement;
+  body: HTMLElement;
+  grid: HTMLElement;
+  emptyState: HTMLElement;
+  footer: HTMLElement;
+  previewIcon: HTMLElement;
+  previewName: HTMLElement;
+  clearSelectionBtn: HTMLButtonElement;
+}
+
+export function createPopoverTemplate(
+  theme: IconPickerTheme = "default",
+  searchPlaceholder = "Search icons...",
+  emptyText = "No icons found matching your search"
+): TemplateElements {
+  const root = document.createElement("div");
+  root.className = `iconpicker-popover iconpicker-theme-${theme}`;
+  root.setAttribute("role", "dialog");
+  root.setAttribute("aria-modal", "false");
+
+  // Header
+  const header = document.createElement("div");
+  header.className = "iconpicker-header";
+
+  // Search input wrapper
+  const searchWrapper = document.createElement("div");
+  searchWrapper.className = "iconpicker-search-wrapper";
+
+  const searchIcon = document.createElement("span");
+  searchIcon.className = "iconpicker-search-icon";
+  searchIcon.innerHTML = `
+    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+      <circle cx="11" cy="11" r="8"></circle>
+      <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
+    </svg>
+  `;
+
+  const searchInput = document.createElement("input");
+  searchInput.type = "text";
+  searchInput.className = "iconpicker-search-input";
+  searchInput.placeholder = searchPlaceholder;
+  searchInput.autocomplete = "off";
+  searchInput.spellcheck = false;
+
+  const searchClearBtn = document.createElement("button");
+  searchClearBtn.type = "button";
+  searchClearBtn.className = "iconpicker-search-clear";
+  searchClearBtn.title = "Clear search";
+  searchClearBtn.style.display = "none";
+  searchClearBtn.innerHTML = `
+    <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
+      <line x1="18" y1="6" x2="6" y2="18"></line>
+      <line x1="6" y1="6" x2="18" y2="18"></line>
+    </svg>
+  `;
+
+  searchWrapper.appendChild(searchIcon);
+  searchWrapper.appendChild(searchInput);
+  searchWrapper.appendChild(searchClearBtn);
+  header.appendChild(searchWrapper);
+
+  // Tabs container
+  const tabsContainer = document.createElement("div");
+  tabsContainer.className = "iconpicker-tabs";
+  header.appendChild(tabsContainer);
+
+  // Body
+  const body = document.createElement("div");
+  body.className = "iconpicker-body";
+
+  const grid = document.createElement("div");
+  grid.className = "iconpicker-grid";
+  grid.setAttribute("role", "listbox");
+
+  const emptyState = document.createElement("div");
+  emptyState.className = "iconpicker-empty";
+  emptyState.textContent = emptyText;
+  emptyState.style.display = "none";
+
+  body.appendChild(grid);
+  body.appendChild(emptyState);
+
+  // Footer
+  const footer = document.createElement("div");
+  footer.className = "iconpicker-footer";
+
+  const previewWrapper = document.createElement("div");
+  previewWrapper.className = "iconpicker-selected-preview";
+
+  const previewIcon = document.createElement("i");
+  previewIcon.className = "iconpicker-preview-icon";
+
+  const previewName = document.createElement("span");
+  previewName.className = "iconpicker-preview-name";
+  previewName.textContent = "None selected";
+
+  previewWrapper.appendChild(previewIcon);
+  previewWrapper.appendChild(previewName);
+
+  const clearSelectionBtn = document.createElement("button");
+  clearSelectionBtn.type = "button";
+  clearSelectionBtn.className = "iconpicker-btn-clear";
+  clearSelectionBtn.textContent = "Clear";
+
+  footer.appendChild(previewWrapper);
+  footer.appendChild(clearSelectionBtn);
+
+  root.appendChild(header);
+  root.appendChild(body);
+  root.appendChild(footer);
+
+  return {
+    root,
+    header,
+    searchInput,
+    searchClearBtn,
+    tabsContainer,
+    body,
+    grid,
+    emptyState,
+    footer,
+    previewIcon,
+    previewName,
+    clearSelectionBtn
+  };
+}
+
+export function renderTabs(
+  container: HTMLElement,
+  sets: IconSetDefinition[],
+  activeSetId: string,
+  onSelectSet: (setId: string) => void
+): void {
+  container.innerHTML = "";
+  if (sets.length <= 1) {
+    container.style.display = "none";
+    return;
+  }
+  container.style.display = "flex";
+
+  for (const set of sets) {
+    const tab = document.createElement("button");
+    tab.type = "button";
+    tab.className = `iconpicker-tab ${set.id === activeSetId ? "is-active" : ""}`;
+    tab.setAttribute("data-set-id", set.id);
+    tab.title = set.title;
+
+    const label = document.createElement("span");
+    label.className = "iconpicker-tab-label";
+    label.textContent = set.title;
+
+    const count = document.createElement("span");
+    count.className = "iconpicker-tab-count";
+    count.textContent = `${set.icons.length}`;
+
+    tab.appendChild(label);
+    tab.appendChild(count);
+
+    tab.addEventListener("click", (e) => {
+      e.stopPropagation();
+      onSelectSet(set.id);
+    });
+
+    container.appendChild(tab);
+  }
+}