@abydahana/iconpicker 1.0.0

package/dist/core/icon-picker.js

@@ -0,0 +1,314 @@
+import { builtInIconSets } from "../iconsets/index";
+import { createPopoverTemplate, renderTabs } from "../dom/template";
+import { PopoverPositioner } from "./popover";
+import { IconGrid } from "./grid";
+import { loadIconFont } from "./font-loader";
+export class IconPicker {
+    target;
+    inputElement = null;
+    options;
+    sets = [];
+    activeSetId = "";
+    currentSearch = "";
+    currentValue = "";
+    isOpen = false;
+    dom;
+    positioner;
+    grid;
+    outsideClickListener;
+    keydownListener;
+    targetClickListener;
+    constructor(target, options = {}) {
+        const el = typeof target === "string" ? document.querySelector(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("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(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) => {
+            if (!this.isOpen)
+                return;
+            const clicked = e.target;
+            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) => {
+            if (!this.isOpen)
+                return;
+            if (e.key === "Escape") {
+                e.preventDefault();
+                this.close();
+            }
+        };
+        this.targetClickListener = (e) => {
+            e.stopPropagation();
+            this.toggle();
+        };
+        this.bindEvents(inputGroup);
+        this.updatePreview(this.currentValue);
+    }
+    bindEvents(inputGroup) {
+        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(".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('.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();
+        });
+    }
+    filterIcons() {
+        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);
+    }
+    handleIconSelect(icon) {
+        this.setValue(icon.className);
+        if (this.options.onSelect) {
+            this.options.onSelect(icon);
+        }
+        if (this.options.closeOnSelect) {
+            this.close();
+        }
+    }
+    setValue(val) {
+        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);
+    }
+    getValue() {
+        return this.currentValue;
+    }
+    updatePreview(val) {
+        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("[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";
+            }
+        }
+    }
+    open() {
+        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();
+        }
+    }
+    close() {
+        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();
+        }
+    }
+    toggle() {
+        if (this.isOpen) {
+            this.close();
+        }
+        else {
+            this.open();
+        }
+    }
+    destroy() {
+        this.close();
+        this.target.removeEventListener("click", this.targetClickListener);
+        this.grid.destroy();
+        this.positioner.detach();
+    }
+}
+//# sourceMappingURL=icon-picker.js.map

package/dist/core/icon-picker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"icon-picker.js","sourceRoot":"","sources":["../../src/core/icon-picker.ts"],"names":[],"mappings":"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"}

package/dist/core/popover.d.ts

@@ -0,0 +1,17 @@
+import type { IconPickerPlacement } from "../types";
+export interface PopoverPositionOptions {
+    placement?: IconPickerPlacement;
+    offset?: number;
+    container?: HTMLElement;
+}
+export declare class PopoverPositioner {
+    private reference;
+    private popover;
+    private options;
+    private handleUpdate;
+    constructor(reference: HTMLElement, popover: HTMLElement, options?: PopoverPositionOptions);
+    attach(): void;
+    detach(): void;
+    updatePosition(): void;
+}
+//# sourceMappingURL=popover.d.ts.map

package/dist/core/popover.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"popover.d.ts","sourceRoot":"","sources":["../../src/core/popover.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,UAAU,CAAC;AAEpD,MAAM,WAAW,sBAAsB;IACrC,SAAS,CAAC,EAAE,mBAAmB,CAAC;IAChC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,WAAW,CAAC;CACzB;AAED,qBAAa,iBAAiB;IAC5B,OAAO,CAAC,SAAS,CAAc;IAC/B,OAAO,CAAC,OAAO,CAAc;IAC7B,OAAO,CAAC,OAAO,CAAmC;IAClD,OAAO,CAAC,YAAY,CAAa;gBAErB,SAAS,EAAE,WAAW,EAAE,OAAO,EAAE,WAAW,EAAE,OAAO,GAAE,sBAA2B;IAgBvF,MAAM,IAAI,IAAI;IASd,MAAM,IAAI,IAAI;IAQd,cAAc,IAAI,IAAI;CAiE9B"}

package/dist/core/popover.js

@@ -0,0 +1,96 @@
+export class PopoverPositioner {
+    reference;
+    popover;
+    options;
+    handleUpdate;
+    constructor(reference, popover, options = {}) {
+        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();
+            }
+        };
+    }
+    attach() {
+        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 });
+    }
+    detach() {
+        window.removeEventListener("resize", this.handleUpdate);
+        window.removeEventListener("scroll", this.handleUpdate, { capture: true });
+        if (this.popover.parentElement) {
+            this.popover.parentElement.removeChild(this.popover);
+        }
+    }
+    updatePosition() {
+        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(".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;
+        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");
+    }
+}
+//# sourceMappingURL=popover.js.map

package/dist/core/popover.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"popover.js","sourceRoot":"","sources":["../../src/core/popover.ts"],"names":[],"mappings":"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"}

package/dist/dom/template.d.ts

@@ -0,0 +1,18 @@
+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 declare function createPopoverTemplate(theme?: IconPickerTheme, searchPlaceholder?: string, emptyText?: string): TemplateElements;
+export declare function renderTabs(container: HTMLElement, sets: IconSetDefinition[], activeSetId: string, onSelectSet: (setId: string) => void): void;
+//# sourceMappingURL=template.d.ts.map

package/dist/dom/template.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"template.d.ts","sourceRoot":"","sources":["../../src/dom/template.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;AAEnE,MAAM,WAAW,gBAAgB;IAC/B,IAAI,EAAE,WAAW,CAAC;IAClB,MAAM,EAAE,WAAW,CAAC;IACpB,WAAW,EAAE,gBAAgB,CAAC;IAC9B,cAAc,EAAE,iBAAiB,CAAC;IAClC,aAAa,EAAE,WAAW,CAAC;IAC3B,IAAI,EAAE,WAAW,CAAC;IAClB,IAAI,EAAE,WAAW,CAAC;IAClB,UAAU,EAAE,WAAW,CAAC;IACxB,MAAM,EAAE,WAAW,CAAC;IACpB,WAAW,EAAE,WAAW,CAAC;IACzB,WAAW,EAAE,WAAW,CAAC;IACzB,iBAAiB,EAAE,iBAAiB,CAAC;CACtC;AAED,wBAAgB,qBAAqB,CACnC,KAAK,GAAE,eAA2B,EAClC,iBAAiB,SAAoB,EACrC,SAAS,SAAwC,GAChD,gBAAgB,CA+GlB;AAED,wBAAgB,UAAU,CACxB,SAAS,EAAE,WAAW,EACtB,IAAI,EAAE,iBAAiB,EAAE,EACzB,WAAW,EAAE,MAAM,EACnB,WAAW,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,GACnC,IAAI,CAiCN"}

package/dist/dom/template.js

@@ -0,0 +1,121 @@
+export function createPopoverTemplate(theme = "default", searchPlaceholder = "Search icons...", emptyText = "No icons found matching your search") {
+    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, sets, activeSetId, onSelectSet) {
+    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);
+    }
+}
+//# sourceMappingURL=template.js.map

package/dist/dom/template.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"template.js","sourceRoot":"","sources":["../../src/dom/template.ts"],"names":[],"mappings":"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"}