@nuraly/lumenui 0.1.0

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

@@ -0,0 +1,119 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+import { LitElement } from 'lit';
+import '@lit-labs/virtualizer';
+import '../dropdown/dropdown.component.js';
+import '../input/input.component.js';
+import '../icon/icon.component.js';
+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;
+/**
+ * Advanced icon picker component with search, virtual scrolling, and accessibility.
+ *
+ * Uses Lucide icons (1500+ beautiful icons) and provides an intuitive selection interface with
+ * search filtering, keyboard navigation, and multiple display options.
+ *
+ * @example
+ * ```html
+ * <!-- Basic usage -->
+ * <nr-icon-picker></nr-icon-picker>
+ *
+ * <!-- With value -->
+ * <nr-icon-picker value="heart"></nr-icon-picker>
+ *
+ * <!-- Custom configuration -->
+ * <nr-icon-picker
+ *   value="star"
+ *   size="large"
+ *   placement="top"
+ *   show-search
+ *   show-clear>
+ * </nr-icon-picker>
+ * ```
+ *
+ * @fires nr-icon-picker-change - Icon selection changed
+ * @fires nr-icon-picker-open - Dropdown opened
+ * @fires nr-icon-picker-close - Dropdown closed
+ * @fires nr-icon-picker-search - Search query changed
+ * @fires nr-icon-picker-clear - Selection cleared
+ *
+ * @cssproperty --icon-picker-dropdown-width - Width of dropdown
+ * @cssproperty --icon-picker-icon-size - Size of icon items
+ * @cssproperty --icon-picker-selected-bg - Selected icon background
+ * @cssproperty --icon-picker-selected-border - Selected icon border
+ */
+export declare class NrIconPickerElement extends NrIconPickerElement_base implements IconPickerHost {
+    static styles: import("lit").CSSResult;
+    requiredComponents: string[];
+    private selectionController;
+    private searchController;
+    private eventController;
+    value: string;
+    size: IconPickerSize;
+    placement: string;
+    trigger: string;
+    disabled: boolean;
+    readonly: boolean;
+    placeholder: string;
+    iconTypes: IconType[];
+    showSearch: boolean;
+    showClear: boolean;
+    maxVisible: number;
+    dropdownOpen: boolean;
+    allIcons: IconPickerIcon[];
+    filteredIcons: IconPickerIcon[];
+    searchQuery: string;
+    selectedIcon: IconPickerIcon | null;
+    isLoading: boolean;
+    connectedCallback(): void;
+    /**
+     * Load icons from Lucide library
+     */
+    private loadIcons;
+    /**
+     * Handle icon selection
+     */
+    handleIconSelect(icon: IconPickerIcon): void;
+    /**
+     * Handle search input
+     */
+    private handleSearchInput;
+    /**
+     * Handle clear button
+     */
+    private handleClear;
+    /**
+     * Handle dropdown open
+     */
+    private handleDropdownOpen;
+    /**
+     * Handle dropdown close
+     */
+    private handleDropdownClose;
+    /**
+     * Toggle dropdown
+     */
+    private toggleDropdown;
+    /**
+     * Render trigger button
+     */
+    private renderTrigger;
+    /**
+     * Render icon grid
+     */
+    private renderIconGrid;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'nr-icon-picker': NrIconPickerElement;
+    }
+}
+export {};
+//# sourceMappingURL=icon-picker.component.d.ts.map

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

@@ -0,0 +1,337 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { LitElement, html, nothing } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { styleMap } from 'lit/directives/style-map.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { NuralyUIBaseMixin } from '@nuralyui/common/mixins';
+import '@lit-labs/virtualizer';
+import { grid } from '@lit-labs/virtualizer/layouts/grid.js';
+// Import required components
+import '../dropdown/dropdown.component.js';
+import '../input/input.component.js';
+import '../icon/icon.component.js';
+import '../button/button.component.js';
+// Import styles and types
+import styles from './icon-picker.style.js';
+import { EMPTY_STRING } from './icon-picker.types.js';
+import { DEFAULT_PLACEHOLDER, DEFAULT_SEARCH_PLACEHOLDER, DEFAULT_EMPTY_MESSAGE, SEARCH_DEBOUNCE_DELAY } from './icon-picker.constant.js';
+// Import controllers
+import { IconPickerSelectionController, IconPickerSearchController, IconPickerEventController } from './controllers/index.js';
+// Import utilities
+import { IconLoaderUtils } from './utils/index.js';
+/**
+ * Advanced icon picker component with search, virtual scrolling, and accessibility.
+ *
+ * Uses Lucide icons (1500+ beautiful icons) and provides an intuitive selection interface with
+ * search filtering, keyboard navigation, and multiple display options.
+ *
+ * @example
+ * ```html
+ * <!-- Basic usage -->
+ * <nr-icon-picker></nr-icon-picker>
+ *
+ * <!-- With value -->
+ * <nr-icon-picker value="heart"></nr-icon-picker>
+ *
+ * <!-- Custom configuration -->
+ * <nr-icon-picker
+ *   value="star"
+ *   size="large"
+ *   placement="top"
+ *   show-search
+ *   show-clear>
+ * </nr-icon-picker>
+ * ```
+ *
+ * @fires nr-icon-picker-change - Icon selection changed
+ * @fires nr-icon-picker-open - Dropdown opened
+ * @fires nr-icon-picker-close - Dropdown closed
+ * @fires nr-icon-picker-search - Search query changed
+ * @fires nr-icon-picker-clear - Selection cleared
+ *
+ * @cssproperty --icon-picker-dropdown-width - Width of dropdown
+ * @cssproperty --icon-picker-icon-size - Size of icon items
+ * @cssproperty --icon-picker-selected-bg - Selected icon background
+ * @cssproperty --icon-picker-selected-border - Selected icon border
+ */
+let NrIconPickerElement = class NrIconPickerElement extends NuralyUIBaseMixin(LitElement) {
+    constructor() {
+        super(...arguments);
+        this.requiredComponents = ['nr-dropdown', 'nr-input', 'nr-icon', 'nr-button'];
+        // Controllers
+        this.selectionController = new IconPickerSelectionController(this);
+        this.searchController = new IconPickerSearchController(this, SEARCH_DEBOUNCE_DELAY);
+        this.eventController = new IconPickerEventController(this);
+        // Public properties
+        this.value = EMPTY_STRING;
+        this.size = "small" /* IconPickerSize.Small */;
+        this.placement = "auto" /* IconPickerPlacement.Auto */;
+        this.trigger = "manual" /* IconPickerTrigger.Manual */;
+        this.disabled = false;
+        this.readonly = false;
+        this.placeholder = DEFAULT_PLACEHOLDER;
+        this.iconTypes = ["solid" /* IconType.Solid */];
+        this.showSearch = true;
+        this.showClear = true;
+        this.maxVisible = 500;
+        // Internal state
+        this.dropdownOpen = false;
+        this.allIcons = [];
+        this.filteredIcons = [];
+        this.searchQuery = EMPTY_STRING;
+        this.selectedIcon = null;
+        this.isLoading = false;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.loadIcons();
+    }
+    /**
+     * Load icons from Lucide library
+     */
+    loadIcons() {
+        this.isLoading = true;
+        try {
+            this.allIcons = IconLoaderUtils.loadIcons(this.iconTypes);
+            this.filteredIcons = [...this.allIcons];
+            // Set selected icon if value is provided
+            if (this.value) {
+                this.selectedIcon = this.allIcons.find(icon => icon.name === this.value) || null;
+            }
+        }
+        catch (error) {
+            console.error('Failed to load icons:', error);
+        }
+        finally {
+            this.isLoading = false;
+        }
+    }
+    /**
+     * Handle icon selection
+     */
+    handleIconSelect(icon) {
+        this.selectionController.selectIcon(icon);
+        this.eventController.dispatchChangeEvent(icon.name, icon);
+        this.dropdownOpen = false;
+    }
+    /**
+     * Handle search input
+     */
+    handleSearchInput(e) {
+        const query = e.detail.value;
+        this.searchController.search(query);
+        this.eventController.dispatchSearchEvent(query);
+    }
+    /**
+     * Handle clear button
+     */
+    handleClear(e) {
+        e.stopPropagation();
+        this.selectionController.clearSelection();
+        this.eventController.dispatchClearEvent();
+        this.eventController.dispatchChangeEvent(EMPTY_STRING, null);
+    }
+    /**
+     * Handle dropdown open
+     */
+    handleDropdownOpen() {
+        this.dropdownOpen = true;
+        this.eventController.dispatchOpenEvent();
+    }
+    /**
+     * Handle dropdown close
+     */
+    handleDropdownClose() {
+        this.dropdownOpen = false;
+        this.searchController.clearSearch();
+        this.eventController.dispatchCloseEvent();
+    }
+    /**
+     * Toggle dropdown
+     */
+    toggleDropdown() {
+        this.dropdownOpen = !this.dropdownOpen;
+    }
+    /**
+     * Render trigger button
+     */
+    renderTrigger() {
+        return html `
+      <nr-button
+        class="trigger-button"
+        .disabled=${this.disabled}
+        size=${this.size}
+        @click=${this.toggleDropdown}
+      >
+        ${this.selectedIcon
+            ? html `
+              <nr-icon class="icon-preview" .name=${this.selectedIcon.name}></nr-icon>
+              <span class="icon-name">${this.selectedIcon.name}</span>
+            `
+            : html `<span class="placeholder">${this.placeholder}</span>`}
+        ${this.showClear && this.selectedIcon
+            ? html `
+              <nr-icon
+                name="times"
+                @click=${this.handleClear}
+                style="margin-left: auto; cursor: pointer;"
+              ></nr-icon>
+            `
+            : nothing}
+      </nr-button>
+    `;
+    }
+    /**
+     * Render icon grid
+     */
+    renderIconGrid() {
+        if (this.isLoading) {
+            return html `
+        <div class="loading-state">
+          <nr-icon name="spinner"></nr-icon>
+          <div class="empty-message">Loading icons...</div>
+        </div>
+      `;
+        }
+        if (this.filteredIcons.length === 0) {
+            return html `
+        <div class="empty-state">
+          <nr-icon name="search"></nr-icon>
+          <div class="empty-message">${DEFAULT_EMPTY_MESSAGE}</div>
+        </div>
+      `;
+        }
+        // Limit visible icons for performance
+        const visibleIcons = this.filteredIcons.slice(0, this.maxVisible);
+        return html `
+      <div class="dropdown-content">
+        ${this.showSearch
+            ? html `
+              <div class="search-container">
+                <nr-input
+                  size="small"
+                  .placeholder=${DEFAULT_SEARCH_PLACEHOLDER}
+                  .value=${this.searchQuery}
+                  @nr-input=${this.handleSearchInput}
+                  autocomplete="off"
+                >
+                  <nr-icon slot="addon-before" name="search"></nr-icon>
+                </nr-input>
+              </div>
+            `
+            : nothing}
+        <div class="icons-grid-container">
+          <lit-virtualizer
+            .items=${visibleIcons}
+            .layout=${grid({ itemSize: '40px' })}
+            .renderItem=${((icon) => html `
+              <div
+                class=${classMap({
+            'icon-item': true,
+            'selected': this.selectionController.isSelected(icon)
+        })}
+                @click=${() => this.handleIconSelect(icon)}
+                tabindex="0"
+                role="button"
+                aria-label="Select ${icon.name} icon"
+              >
+                <nr-icon .name=${icon.name}></nr-icon>
+              </div>
+            `)}
+          ></lit-virtualizer>
+        </div>
+      </div>
+    `;
+    }
+    render() {
+        return html `
+      <nr-dropdown
+        .open=${this.dropdownOpen}
+        trigger="manual"
+        .placement=${this.placement}
+        .closeOnOutsideClick=${true}
+        .closeOnEscape=${true}
+        @nr-dropdown-open=${this.handleDropdownOpen}
+        @nr-dropdown-close=${this.handleDropdownClose}
+        style=${styleMap({
+            '--dropdown-width': 'var(--icon-picker-dropdown-width)',
+            '--dropdown-max-height': 'var(--icon-picker-dropdown-max-height)'
+        })}
+      >
+        <div slot="trigger" class="trigger-container">
+          ${this.renderTrigger()}
+        </div>
+        <div slot="content">
+          ${this.renderIconGrid()}
+        </div>
+      </nr-dropdown>
+    `;
+    }
+};
+NrIconPickerElement.styles = styles;
+__decorate([
+    property({ type: String, reflect: true })
+], NrIconPickerElement.prototype, "value", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], NrIconPickerElement.prototype, "size", void 0);
+__decorate([
+    property({ type: String })
+], NrIconPickerElement.prototype, "placement", void 0);
+__decorate([
+    property({ type: String })
+], NrIconPickerElement.prototype, "trigger", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], NrIconPickerElement.prototype, "disabled", void 0);
+__decorate([
+    property({ type: Boolean })
+], NrIconPickerElement.prototype, "readonly", void 0);
+__decorate([
+    property({ type: String })
+], NrIconPickerElement.prototype, "placeholder", void 0);
+__decorate([
+    property({ type: Array })
+], NrIconPickerElement.prototype, "iconTypes", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'show-search' })
+], NrIconPickerElement.prototype, "showSearch", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'show-clear' })
+], NrIconPickerElement.prototype, "showClear", void 0);
+__decorate([
+    property({ type: Number, attribute: 'max-visible' })
+], NrIconPickerElement.prototype, "maxVisible", void 0);
+__decorate([
+    state()
+], NrIconPickerElement.prototype, "dropdownOpen", void 0);
+__decorate([
+    state()
+], NrIconPickerElement.prototype, "allIcons", void 0);
+__decorate([
+    state()
+], NrIconPickerElement.prototype, "filteredIcons", void 0);
+__decorate([
+    state()
+], NrIconPickerElement.prototype, "searchQuery", void 0);
+__decorate([
+    state()
+], NrIconPickerElement.prototype, "selectedIcon", void 0);
+__decorate([
+    state()
+], NrIconPickerElement.prototype, "isLoading", void 0);
+NrIconPickerElement = __decorate([
+    customElement('nr-icon-picker')
+], NrIconPickerElement);
+export { NrIconPickerElement };
+//# sourceMappingURL=icon-picker.component.js.map

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

@@ -0,0 +1,15 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+export declare const DEFAULT_PLACEHOLDER = "Select icon";
+export declare const DEFAULT_SEARCH_PLACEHOLDER = "Search icons...";
+export declare const DEFAULT_EMPTY_MESSAGE = "No icons found";
+export declare const DEFAULT_GRID_SIZE = "32px";
+export declare const DEFAULT_MAX_VISIBLE_ICONS = 500;
+export declare const DEFAULT_DROPDOWN_WIDTH = "320px";
+export declare const DEFAULT_DROPDOWN_MAX_HEIGHT = "380px";
+export declare const ICON_CATEGORIES: readonly ["all", "arrow", "communication", "file", "interface", "media", "social", "text", "utility", "business", "design", "shapes"];
+export declare const SEARCH_DEBOUNCE_DELAY = 300;
+//# sourceMappingURL=icon-picker.constant.d.ts.map

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

@@ -0,0 +1,31 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+// Default configuration
+export const DEFAULT_PLACEHOLDER = 'Select icon';
+export const DEFAULT_SEARCH_PLACEHOLDER = 'Search icons...';
+export const DEFAULT_EMPTY_MESSAGE = 'No icons found';
+export const DEFAULT_GRID_SIZE = '32px';
+export const DEFAULT_MAX_VISIBLE_ICONS = 500;
+export const DEFAULT_DROPDOWN_WIDTH = '320px';
+export const DEFAULT_DROPDOWN_MAX_HEIGHT = '380px';
+// Icon categories
+export const ICON_CATEGORIES = [
+    'all',
+    'arrow',
+    'communication',
+    'file',
+    'interface',
+    'media',
+    'social',
+    'text',
+    'utility',
+    'business',
+    'design',
+    'shapes'
+];
+// Search debounce delay
+export const SEARCH_DEBOUNCE_DELAY = 300;
+//# sourceMappingURL=icon-picker.constant.js.map

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

@@ -0,0 +1,8 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+declare const _default: import("lit").CSSResult;
+export default _default;
+//# sourceMappingURL=icon-picker.style.d.ts.map