@nuraly/lumenui 0.1.0 → 0.2.2

package/dist/src/components/iconpicker/controllers/event.controller.d.ts

@@ -0,0 +1,38 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+import { ReactiveController, ReactiveControllerHost } from 'lit';
+import type { IconPickerIcon } from '../icon-picker.types.js';
+interface EventHost extends ReactiveControllerHost {
+    dispatchEvent(event: Event): boolean;
+}
+export declare class IconPickerEventController implements ReactiveController {
+    host: EventHost;
+    constructor(host: EventHost);
+    hostConnected(): void;
+    hostDisconnected(): void;
+    /**
+     * Dispatch icon change event
+     */
+    dispatchChangeEvent(value: string, icon: IconPickerIcon | null): void;
+    /**
+     * Dispatch search event
+     */
+    dispatchSearchEvent(query: string): void;
+    /**
+     * Dispatch clear event
+     */
+    dispatchClearEvent(): void;
+    /**
+     * Dispatch open event
+     */
+    dispatchOpenEvent(): void;
+    /**
+     * Dispatch close event
+     */
+    dispatchCloseEvent(): void;
+}
+export {};
+//# sourceMappingURL=event.controller.d.ts.map

package/dist/src/components/iconpicker/controllers/event.controller.js

@@ -0,0 +1,68 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+export class IconPickerEventController {
+    constructor(host) {
+        (this.host = host).addController(this);
+    }
+    hostConnected() {
+        // Initialization
+    }
+    hostDisconnected() {
+        // Cleanup
+    }
+    /**
+     * Dispatch icon change event
+     */
+    dispatchChangeEvent(value, icon) {
+        const detail = { value, icon };
+        this.host.dispatchEvent(new CustomEvent('nr-icon-picker-change', {
+            detail,
+            bubbles: true,
+            composed: true
+        }));
+    }
+    /**
+     * Dispatch search event
+     */
+    dispatchSearchEvent(query) {
+        this.host.dispatchEvent(new CustomEvent('nr-icon-picker-search', {
+            detail: { query },
+            bubbles: true,
+            composed: true
+        }));
+    }
+    /**
+     * Dispatch clear event
+     */
+    dispatchClearEvent() {
+        this.host.dispatchEvent(new CustomEvent('nr-icon-picker-clear', {
+            detail: {},
+            bubbles: true,
+            composed: true
+        }));
+    }
+    /**
+     * Dispatch open event
+     */
+    dispatchOpenEvent() {
+        this.host.dispatchEvent(new CustomEvent('nr-icon-picker-open', {
+            detail: {},
+            bubbles: true,
+            composed: true
+        }));
+    }
+    /**
+     * Dispatch close event
+     */
+    dispatchCloseEvent() {
+        this.host.dispatchEvent(new CustomEvent('nr-icon-picker-close', {
+            detail: {},
+            bubbles: true,
+            composed: true
+        }));
+    }
+}
+//# sourceMappingURL=event.controller.js.map

package/dist/src/components/iconpicker/controllers/index.d.ts

@@ -0,0 +1,9 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+export { IconPickerSelectionController } from './selection.controller.js';
+export { IconPickerSearchController } from './search.controller.js';
+export { IconPickerEventController } from './event.controller.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/src/components/iconpicker/controllers/index.js

@@ -0,0 +1,9 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+export { IconPickerSelectionController } from './selection.controller.js';
+export { IconPickerSearchController } from './search.controller.js';
+export { IconPickerEventController } from './event.controller.js';
+//# sourceMappingURL=index.js.map

package/dist/src/components/iconpicker/controllers/search.controller.d.ts

@@ -0,0 +1,34 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+import { ReactiveController, ReactiveControllerHost } from 'lit';
+import type { IconPickerIcon, IconPickerSearchOptions } from '../icon-picker.types.js';
+interface SearchHost extends ReactiveControllerHost {
+    allIcons: IconPickerIcon[];
+    filteredIcons: IconPickerIcon[];
+    searchQuery: string;
+}
+export declare class IconPickerSearchController implements ReactiveController {
+    host: SearchHost;
+    private debounceTimer;
+    private debounceDelay;
+    constructor(host: SearchHost, debounceDelay?: number);
+    hostConnected(): void;
+    hostDisconnected(): void;
+    /**
+     * Perform search with debouncing
+     */
+    search(query: string, options?: IconPickerSearchOptions): void;
+    /**
+     * Perform immediate search without debounce
+     */
+    performSearch(query: string, options?: IconPickerSearchOptions): void;
+    /**
+     * Clear search
+     */
+    clearSearch(): void;
+}
+export {};
+//# sourceMappingURL=search.controller.d.ts.map

package/dist/src/components/iconpicker/controllers/search.controller.js

@@ -0,0 +1,55 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+import { IconFilterUtils } from '../utils/index.js';
+export class IconPickerSearchController {
+    constructor(host, debounceDelay = 300) {
+        this.debounceTimer = null;
+        this.debounceDelay = 300;
+        (this.host = host).addController(this);
+        this.debounceDelay = debounceDelay;
+    }
+    hostConnected() {
+        // Initialization
+    }
+    hostDisconnected() {
+        if (this.debounceTimer) {
+            clearTimeout(this.debounceTimer);
+        }
+    }
+    /**
+     * Perform search with debouncing
+     */
+    search(query, options) {
+        this.host.searchQuery = query;
+        if (this.debounceTimer) {
+            clearTimeout(this.debounceTimer);
+        }
+        this.debounceTimer = window.setTimeout(() => {
+            this.performSearch(query, options);
+        }, this.debounceDelay);
+    }
+    /**
+     * Perform immediate search without debounce
+     */
+    performSearch(query, options) {
+        if (!query || query.trim() === '') {
+            this.host.filteredIcons = [...this.host.allIcons];
+        }
+        else {
+            this.host.filteredIcons = IconFilterUtils.searchAndRank(query, this.host.allIcons, options);
+        }
+        this.host.requestUpdate();
+    }
+    /**
+     * Clear search
+     */
+    clearSearch() {
+        this.host.searchQuery = '';
+        this.host.filteredIcons = [...this.host.allIcons];
+        this.host.requestUpdate();
+    }
+}
+//# sourceMappingURL=search.controller.js.map

package/dist/src/components/iconpicker/controllers/selection.controller.d.ts

@@ -0,0 +1,27 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+import { ReactiveController, ReactiveControllerHost } from 'lit';
+import type { IconPickerHost } from '../interfaces/index.js';
+import type { IconPickerIcon } from '../icon-picker.types.js';
+export declare class IconPickerSelectionController implements ReactiveController {
+    host: ReactiveControllerHost & IconPickerHost;
+    constructor(host: ReactiveControllerHost & IconPickerHost);
+    hostConnected(): void;
+    hostDisconnected(): void;
+    /**
+     * Handle icon selection
+     */
+    selectIcon(icon: IconPickerIcon): void;
+    /**
+     * Clear selection
+     */
+    clearSelection(): void;
+    /**
+     * Check if an icon is selected
+     */
+    isSelected(icon: IconPickerIcon): boolean;
+}
+//# sourceMappingURL=selection.controller.d.ts.map

package/dist/src/components/iconpicker/controllers/selection.controller.js

@@ -0,0 +1,39 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+export class IconPickerSelectionController {
+    constructor(host) {
+        (this.host = host).addController(this);
+    }
+    hostConnected() {
+        // Initialization if needed
+    }
+    hostDisconnected() {
+        // Cleanup if needed
+    }
+    /**
+     * Handle icon selection
+     */
+    selectIcon(icon) {
+        this.host.value = icon.name;
+        this.host.selectedIcon = icon;
+        this.host.requestUpdate();
+    }
+    /**
+     * Clear selection
+     */
+    clearSelection() {
+        this.host.value = '';
+        this.host.selectedIcon = null;
+        this.host.requestUpdate();
+    }
+    /**
+     * Check if an icon is selected
+     */
+    isSelected(icon) {
+        return this.host.value === icon.name;
+    }
+}
+//# sourceMappingURL=selection.controller.js.map

package/dist/src/components/iconpicker/icon-picker.component.d.ts

@@ -12,7 +12,7 @@ import '../button/button.component.js';
 import { IconPickerSize, IconType } from './icon-picker.types.js';
 import type { IconPickerIcon } from './icon-picker.types.js';
 import type { IconPickerHost } from './interfaces/index.js';
-declare const NrIconPickerElement_base: (new (...args: any[]) => import("@nuralyui/common/mixins").DependencyAware) & (new (...args: any[]) => import("@nuralyui/common/mixins").ThemeAware) & (new (...args: any[]) => import("@nuralyui/common/mixins").EventHandlerCapable) & typeof LitElement;
+declare const NrIconPickerElement_base: (new (...args: any[]) => import("@nuralyui/common/mixins").DependencyAware) & (new (...args: any[]) => import("@nuralyui/common/mixins").ThemeAware) & (new (...args: any[]) => import("@nuralyui/common/mixins").EventHandlerCapable) & (new (...args: any[]) => import("packages/common/src/shared/base-mixin.js").LightDomContent) & typeof LitElement;
 /**
  * Advanced icon picker component with search, virtual scrolling, and accessibility.
  *
@@ -49,6 +49,7 @@ declare const NrIconPickerElement_base: (new (...args: any[]) => import("@nuraly
  * @cssproperty --icon-picker-selected-border - Selected icon border
  */
 export declare class NrIconPickerElement extends NrIconPickerElement_base implements IconPickerHost {
+    static useShadowDom: boolean;
     static styles: import("lit").CSSResult;
     requiredComponents: string[];
     private selectionController;

package/dist/src/components/iconpicker/icon-picker.component.js

@@ -278,6 +278,7 @@ let NrIconPickerElement = class NrIconPickerElement extends NuralyUIBaseMixin(Li
     `;
     }
 };
+NrIconPickerElement.useShadowDom = true;
 NrIconPickerElement.styles = styles;
 __decorate([
     property({ type: String, reflect: true })

package/dist/src/components/iconpicker/icon-picker.style.js

@@ -16,13 +16,13 @@ export default css `
     --icon-picker-icon-padding: 8px;
     
     /* Colors - Light mode */
-    --icon-picker-background: var(--nuraly-background-primary, #ffffff);
-    --icon-picker-border: var(--nuraly-border-color, #d0d0d0);
-    --icon-picker-text: var(--nuraly-text-primary, #000000);
-    --icon-picker-hover-bg: var(--nuraly-background-hover, #f5f5f5);
-    --icon-picker-selected-bg: var(--nuraly-primary-light, #e6f7ff);
-    --icon-picker-selected-border: var(--nuraly-primary-color, #1890ff);
-    --icon-picker-placeholder-color: var(--nuraly-text-secondary, #999999);
+    --icon-picker-background: #ffffff;
+    --icon-picker-border: #d0d0d0;
+    --icon-picker-text: #000000;
+    --icon-picker-hover-bg: #f5f5f5;
+    --icon-picker-selected-bg: #e6f7ff;
+    --icon-picker-selected-border: #1890ff;
+    --icon-picker-placeholder-color: #999999;
     
     display: inline-block;
     width: var(--icon-picker-trigger-width);
@@ -31,12 +31,12 @@ export default css `
 
   @media (prefers-color-scheme: dark) {
     :host {
-      --icon-picker-background: var(--nuraly-background-primary, #1f1f1f);
-      --icon-picker-border: var(--nuraly-border-color, #404040);
-      --icon-picker-text: var(--nuraly-text-primary, #ffffff);
-      --icon-picker-hover-bg: var(--nuraly-background-hover, #2a2a2a);
-      --icon-picker-selected-bg: var(--nuraly-primary-dark, #003a8c);
-      --icon-picker-selected-border: var(--nuraly-primary-color, #40a9ff);
+      --icon-picker-background: #1f1f1f;
+      --icon-picker-border: #404040;
+      --icon-picker-text: #ffffff;
+      --icon-picker-hover-bg: #2a2a2a;
+      --icon-picker-selected-bg: #003a8c;
+      --icon-picker-selected-border: #40a9ff;
     }
   }
 

package/dist/src/components/iconpicker/interfaces/icon-picker.interface.d.ts

@@ -0,0 +1,13 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+import type { IconPickerIcon } from '../icon-picker.types.js';
+export interface IconPickerHost {
+    value: string;
+    selectedIcon: IconPickerIcon | null;
+    handleIconSelect(icon: IconPickerIcon): void;
+    requestUpdate(): void;
+}
+//# sourceMappingURL=icon-picker.interface.d.ts.map

package/dist/src/components/iconpicker/interfaces/icon-picker.interface.js

@@ -0,0 +1,7 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+export {};
+//# sourceMappingURL=icon-picker.interface.js.map

package/dist/src/components/iconpicker/interfaces/index.d.ts

@@ -0,0 +1,7 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+export { IconPickerHost } from './icon-picker.interface.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/src/components/iconpicker/interfaces/index.js

@@ -0,0 +1,7 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+export {};
+//# sourceMappingURL=index.js.map

package/dist/src/components/iconpicker/utils/icon-filter.utils.d.ts

@@ -0,0 +1,29 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+import type { IconPickerIcon, IconPickerSearchOptions } from '../icon-picker.types.js';
+export declare class IconFilterUtils {
+    /**
+     * Filter icons by search query
+     */
+    static filterByName(query: string, icons: IconPickerIcon[], options?: IconPickerSearchOptions): IconPickerIcon[];
+    /**
+     * Filter icons by category
+     */
+    static filterByCategory(category: string, icons: IconPickerIcon[]): IconPickerIcon[];
+    /**
+     * Rank search results by relevance
+     */
+    static rankResults(query: string, icons: IconPickerIcon[]): IconPickerIcon[];
+    /**
+     * Calculate relevance score for ranking
+     */
+    private static calculateRelevanceScore;
+    /**
+     * Combined filter and rank
+     */
+    static searchAndRank(query: string, icons: IconPickerIcon[], options?: IconPickerSearchOptions): IconPickerIcon[];
+}
+//# sourceMappingURL=icon-filter.utils.d.ts.map

package/dist/src/components/iconpicker/utils/icon-filter.utils.js

@@ -0,0 +1,96 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+export class IconFilterUtils {
+    /**
+     * Filter icons by search query
+     */
+    static filterByName(query, icons, options = {}) {
+        if (!query || query.trim() === '') {
+            return icons;
+        }
+        const searchTerm = options.caseSensitive ? query : query.toLowerCase();
+        const matchMode = options.matchMode || 'contains';
+        return icons.filter(icon => {
+            const iconName = options.caseSensitive ? icon.name : icon.name.toLowerCase();
+            switch (matchMode) {
+                case 'exact':
+                    return iconName === searchTerm;
+                case 'startsWith':
+                    return iconName.startsWith(searchTerm);
+                case 'contains':
+                default:
+                    return iconName.includes(searchTerm);
+            }
+        });
+    }
+    /**
+     * Filter icons by category
+     */
+    static filterByCategory(category, icons) {
+        if (!category || category === 'all') {
+            return icons;
+        }
+        return icons.filter(icon => icon.category === category);
+    }
+    /**
+     * Rank search results by relevance
+     */
+    static rankResults(query, icons) {
+        if (!query || query.trim() === '') {
+            return icons;
+        }
+        const searchTerm = query.toLowerCase();
+        return icons
+            .map(icon => ({
+            icon,
+            score: this.calculateRelevanceScore(searchTerm, icon)
+        }))
+            .sort((a, b) => b.score - a.score)
+            .map(item => item.icon);
+    }
+    /**
+     * Calculate relevance score for ranking
+     */
+    static calculateRelevanceScore(query, icon) {
+        const iconName = icon.name.toLowerCase();
+        let score = 0;
+        // Exact match gets highest score
+        if (iconName === query) {
+            score += 100;
+        }
+        // Starts with query gets high score
+        else if (iconName.startsWith(query)) {
+            score += 50;
+        }
+        // Contains query gets medium score
+        else if (iconName.includes(query)) {
+            score += 25;
+        }
+        // Keyword matches
+        if (icon.keywords) {
+            icon.keywords.forEach(keyword => {
+                const keywordLower = keyword.toLowerCase();
+                if (keywordLower === query) {
+                    score += 30;
+                }
+                else if (keywordLower.includes(query)) {
+                    score += 10;
+                }
+            });
+        }
+        // Penalize longer names (shorter names are often more relevant)
+        score -= iconName.length * 0.1;
+        return score;
+    }
+    /**
+     * Combined filter and rank
+     */
+    static searchAndRank(query, icons, options = {}) {
+        const filtered = this.filterByName(query, icons, options);
+        return this.rankResults(query, filtered);
+    }
+}
+//# sourceMappingURL=icon-filter.utils.js.map

package/dist/src/components/iconpicker/utils/icon-loader.utils.d.ts

@@ -0,0 +1,39 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+import type { IconPickerIcon } from '../icon-picker.types.js';
+import { IconType } from '../icon-picker.types.js';
+export declare class IconLoaderUtils {
+    private static iconCache;
+    /**
+     * Load icons from Lucide library
+     */
+    static loadIcons(types?: IconType[]): IconPickerIcon[];
+    /**
+     * Load icons of specific type
+     */
+    private static loadIconsByType;
+    /**
+     * Extract icon data from Lucide icon names
+     */
+    private static extractLucideIcons;
+    /**
+     * Generate keywords from icon name for better searchability
+     */
+    private static generateKeywords;
+    /**
+     * Categorize icon based on name patterns
+     */
+    private static categorizeIcon;
+    /**
+     * Get unique icon names (removes duplicates)
+     */
+    static getUniqueIcons(icons: IconPickerIcon[]): IconPickerIcon[];
+    /**
+     * Clear icon cache
+     */
+    static clearCache(): void;
+}
+//# sourceMappingURL=icon-loader.utils.d.ts.map

package/dist/src/components/iconpicker/utils/icon-loader.utils.js

@@ -0,0 +1,115 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+import { lucideIcons } from './lucide-icons.js';
+export class IconLoaderUtils {
+    /**
+     * Load icons from Lucide library
+     */
+    static loadIcons(types = ["solid" /* IconType.Solid */]) {
+        const allIcons = [];
+        types.forEach(type => {
+            if (this.iconCache.has(type)) {
+                allIcons.push(...this.iconCache.get(type));
+            }
+            else {
+                const icons = this.loadIconsByType(type);
+                this.iconCache.set(type, icons);
+                allIcons.push(...icons);
+            }
+        });
+        return allIcons;
+    }
+    /**
+     * Load icons of specific type
+     */
+    static loadIconsByType(type) {
+        // Lucide icons are all one style, so we use Solid type
+        return this.extractLucideIcons(type);
+    }
+    /**
+     * Extract icon data from Lucide icon names
+     */
+    static extractLucideIcons(type) {
+        return lucideIcons.map((iconName) => ({
+            name: iconName,
+            type,
+            iconName,
+            keywords: this.generateKeywords(iconName),
+            category: this.categorizeIcon(iconName)
+        }));
+    }
+    /**
+     * Generate keywords from icon name for better searchability
+     */
+    static generateKeywords(iconName) {
+        // Split camelCase or kebab-case into words
+        const words = iconName
+            .replaceAll(/([a-z])([A-Z])/g, '$1 $2')
+            .replaceAll('-', ' ')
+            .toLowerCase()
+            .split(' ')
+            .filter(Boolean);
+        return [...new Set(words)];
+    }
+    /**
+     * Categorize icon based on name patterns
+     */
+    static categorizeIcon(iconName) {
+        const name = iconName.toLowerCase();
+        if (name.includes('arrow') || name.includes('chevron') || name.includes('corner') || name.includes('move')) {
+            return 'arrow';
+        }
+        if (name.includes('mail') || name.includes('message') || name.includes('phone') || name.includes('chat')) {
+            return 'communication';
+        }
+        if (name.includes('file') || name.includes('document') || name.includes('folder')) {
+            return 'file';
+        }
+        if (name.includes('menu') || name.includes('grid') || name.includes('layout') || name.includes('panel')) {
+            return 'interface';
+        }
+        if (name.includes('video') || name.includes('audio') || name.includes('play') || name.includes('music')) {
+            return 'media';
+        }
+        if (name.includes('facebook') || name.includes('twitter') || name.includes('linkedin') || name.includes('github')) {
+            return 'social';
+        }
+        if (name.includes('text') || name.includes('type') || name.includes('font')) {
+            return 'text';
+        }
+        if (name.includes('briefcase') || name.includes('building') || name.includes('calendar') || name.includes('chart')) {
+            return 'business';
+        }
+        if (name.includes('pen') || name.includes('brush') || name.includes('palette') || name.includes('edit')) {
+            return 'design';
+        }
+        if (name.includes('circle') || name.includes('square') || name.includes('triangle') || name.includes('hexagon')) {
+            return 'shapes';
+        }
+        return 'all';
+    }
+    /**
+     * Get unique icon names (removes duplicates)
+     */
+    static getUniqueIcons(icons) {
+        const seen = new Set();
+        return icons.filter(icon => {
+            if (seen.has(icon.name)) {
+                return false;
+            }
+            seen.add(icon.name);
+            return true;
+        });
+    }
+    /**
+     * Clear icon cache
+     */
+    static clearCache() {
+        this.iconCache.clear();
+    }
+}
+IconLoaderUtils.iconCache = new Map();
+//# sourceMappingURL=icon-loader.utils.js.map