@nuralyui/iconpicker 0.0.1

package/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/icon-picker.component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"icon-picker.component.js","sourceRoot":"","sources":["../../../../src/components/iconpicker/icon-picker.component.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;;;;;;AAEH,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AAChD,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACnE,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAC5D,OAAO,uBAAuB,CAAC;AAC/B,OAAO,EAAE,IAAI,EAAE,MAAM,uCAAuC,CAAC;AAE7D,6BAA6B;AAC7B,OAAO,mCAAmC,CAAC;AAC3C,OAAO,6BAA6B,CAAC;AACrC,OAAO,2BAA2B,CAAC;AACnC,OAAO,+BAA+B,CAAC;AAEvC,0BAA0B;AAC1B,OAAO,MAAM,MAAM,wBAAwB,CAAC;AAC5C,OAAO,EAKH,YAAY,EACf,MAAM,wBAAwB,CAAC;AAEhC,OAAO,EACH,mBAAmB,EACnB,0BAA0B,EAC1B,qBAAqB,EACrB,qBAAqB,EACxB,MAAM,2BAA2B,CAAC;AAEnC,qBAAqB;AACrB,OAAO,EACH,6BAA6B,EAC7B,0BAA0B,EAC1B,yBAAyB,EAC5B,MAAM,wBAAwB,CAAC;AAEhC,mBAAmB;AACnB,OAAO,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AAKnD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AAEI,IAAM,mBAAmB,GAAzB,MAAM,mBAAoB,SAAQ,iBAAiB,CAAC,UAAU,CAAC;IAA/D;;QAGI,uBAAkB,GAAG,CAAC,aAAa,EAAE,UAAU,EAAE,SAAS,EAAE,WAAW,CAAC,CAAC;QAElF,cAAc;QACN,wBAAmB,GAAG,IAAI,6BAA6B,CAAC,IAAI,CAAC,CAAC;QAC9D,qBAAgB,GAAG,IAAI,0BAA0B,CAAC,IAAI,EAAE,qBAAqB,CAAC,CAAC;QAC/E,oBAAe,GAAG,IAAI,yBAAyB,CAAC,IAAI,CAAC,CAAC;QAE9D,oBAAoB;QACuB,UAAK,GAAG,YAAY,CAAC;QACrB,SAAI,sCAAwB;QAC3C,cAAS,yCAAoC;QAC7C,YAAO,2CAAoC;QAC3B,aAAQ,GAAG,KAAK,CAAC;QAChC,aAAQ,GAAG,KAAK,CAAC;QAClB,gBAAW,GAAG,mBAAmB,CAAC;QACnC,cAAS,GAAe,8BAAgB,CAAC;QACb,eAAU,GAAG,IAAI,CAAC;QACnB,cAAS,GAAG,IAAI,CAAC;QACjB,eAAU,GAAG,GAAG,CAAC;QAEvE,iBAAiB;QACR,iBAAY,GAAG,KAAK,CAAC;QACrB,aAAQ,GAAqB,EAAE,CAAC;QAChC,kBAAa,GAAqB,EAAE,CAAC;QACrC,gBAAW,GAAG,YAAY,CAAC;QAC3B,iBAAY,GAA0B,IAAI,CAAC;QAC3C,cAAS,GAAG,KAAK,CAAC;IA0M7B,CAAC;IAxMU,iBAAiB;QACxB,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,SAAS,EAAE,CAAC;IACnB,CAAC;IAED;;OAEG;IACK,SAAS;QACf,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;QACtB,IAAI,CAAC;YACH,IAAI,CAAC,QAAQ,GAAG,eAAe,CAAC,SAAS,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;YAC1D,IAAI,CAAC,aAAa,GAAG,CAAC,GAAG,IAAI,CAAC,QAAQ,CAAC,CAAC;YAExC,yCAAyC;YACzC,IAAI,IAAI,CAAC,KAAK,EAAE,CAAC;gBACf,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,IAAI,KAAK,IAAI,CAAC,KAAK,CAAC,IAAI,IAAI,CAAC;YACnF,CAAC;QACH,CAAC;QAAC,OAAO,KAAK,EAAE,CAAC;YACf,OAAO,CAAC,KAAK,CAAC,uBAAuB,EAAE,KAAK,CAAC,CAAC;QAChD,CAAC;gBAAS,CAAC;YACT,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;QACzB,CAAC;IACH,CAAC;IAED;;OAEG;IACH,gBAAgB,CAAC,IAAoB;QACnC,IAAI,CAAC,mBAAmB,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC;QAC1C,IAAI,CAAC,eAAe,CAAC,mBAAmB,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC;QAC1D,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC;IAC5B,CAAC;IAED;;OAEG;IACK,iBAAiB,CAAC,CAAc;QACtC,MAAM,KAAK,GAAG,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC;QAC7B,IAAI,CAAC,gBAAgB,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;QACpC,IAAI,CAAC,eAAe,CAAC,mBAAmB,CAAC,KAAK,CAAC,CAAC;IAClD,CAAC;IAED;;OAEG;IACK,WAAW,CAAC,CAAQ;QAC1B,CAAC,CAAC,eAAe,EAAE,CAAC;QACpB,IAAI,CAAC,mBAAmB,CAAC,cAAc,EAAE,CAAC;QAC1C,IAAI,CAAC,eAAe,CAAC,kBAAkB,EAAE,CAAC;QAC1C,IAAI,CAAC,eAAe,CAAC,mBAAmB,CAAC,YAAY,EAAE,IAAI,CAAC,CAAC;IAC/D,CAAC;IAED;;OAEG;IACK,kBAAkB;QACxB,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC;QACzB,IAAI,CAAC,eAAe,CAAC,iBAAiB,EAAE,CAAC;IAC3C,CAAC;IAED;;OAEG;IACK,mBAAmB;QACzB,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC;QAC1B,IAAI,CAAC,gBAAgB,CAAC,WAAW,EAAE,CAAC;QACpC,IAAI,CAAC,eAAe,CAAC,kBAAkB,EAAE,CAAC;IAC5C,CAAC;IAED;;OAEG;IACK,cAAc;QACpB,IAAI,CAAC,YAAY,GAAG,CAAC,IAAI,CAAC,YAAY,CAAC;IACzC,CAAC;IAED;;OAEG;IACK,aAAa;QACnB,OAAO,IAAI,CAAA;;;oBAGK,IAAI,CAAC,QAAQ;eAClB,IAAI,CAAC,IAAI;iBACP,IAAI,CAAC,cAAc;;UAE1B,IAAI,CAAC,YAAY;YACjB,CAAC,CAAC,IAAI,CAAA;oDACoC,IAAI,CAAC,YAAY,CAAC,IAAI;wCAClC,IAAI,CAAC,YAAY,CAAC,IAAI;aACjD;YACH,CAAC,CAAC,IAAI,CAAA,6BAA6B,IAAI,CAAC,WAAW,SACrD;UACE,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,YAAY;YACnC,CAAC,CAAC,IAAI,CAAA;;;yBAGS,IAAI,CAAC,WAAW;;;aAG5B;YACH,CAAC,CAAC,OACJ;;KAEH,CAAC;IACJ,CAAC;IAED;;OAEG;IACK,cAAc;QACpB,IAAI,IAAI,CAAC,SAAS,EAAE,CAAC;YACnB,OAAO,IAAI,CAAA;;;;;OAKV,CAAC;QACJ,CAAC;QAED,IAAI,IAAI,CAAC,aAAa,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;YACpC,OAAO,IAAI,CAAA;;;uCAGsB,qBAAqB;;OAErD,CAAC;QACJ,CAAC;QAED,sCAAsC;QACtC,MAAM,YAAY,GAAG,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC;QAElE,OAAO,IAAI,CAAA;;UAEL,IAAI,CAAC,UAAU;YACf,CAAC,CAAC,IAAI,CAAA;;;;iCAIiB,0BAA0B;2BAChC,IAAI,CAAC,WAAW;8BACb,IAAI,CAAC,iBAAiB;;;;;;aAMvC;YACH,CAAC,CAAC,OACJ;;;qBAGa,YAAY;sBACX,IAAI,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAE,CAAC;0BACtB,CAAC,CAAC,IAAoB,EAAE,EAAE,CAAC,IAAI,CAAA;;wBAEjC,QAAQ,CAAC;YACf,WAAW,EAAE,IAAI;YACjB,UAAU,EAAE,IAAI,CAAC,mBAAmB,CAAC,UAAU,CAAC,IAAI,CAAC;SACtD,CAAC;yBACO,GAAG,EAAE,CAAC,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC;;;qCAGrB,IAAI,CAAC,IAAI;;iCAEb,IAAI,CAAC,IAAI;;aAE7B,CAAQ;;;;KAIhB,CAAC;IACJ,CAAC;IAEQ,MAAM;QACb,OAAO,IAAI,CAAA;;gBAEC,IAAI,CAAC,YAAY;;qBAEZ,IAAI,CAAC,SAAgB;+BACX,IAAI;yBACV,IAAI;4BACD,IAAI,CAAC,kBAAkB;6BACtB,IAAI,CAAC,mBAAmB;gBACrC,QAAQ,CAAC;YACf,kBAAkB,EAAE,mCAAmC;YACvD,uBAAuB,EAAE,wCAAwC;SAClE,CAAC;;;YAGE,IAAI,CAAC,aAAa,EAAE;;;YAGpB,IAAI,CAAC,cAAc,EAAE;;;KAG5B,CAAC;IACJ,CAAC;;AArOe,0BAAM,GAAG,MAAM,AAAT,CAAU;AAUW;IAA1C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;kDAAsB;AACrB;IAA1C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;iDAA6B;AAC3C;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;sDAA8C;AAC7C;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;oDAA4C;AAC3B;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;qDAAkB;AAChC;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;qDAAkB;AAClB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;wDAAmC;AACnC;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;sDAA0C;AACb;IAAtD,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,aAAa,EAAE,CAAC;uDAAmB;AACnB;IAArD,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,CAAC;sDAAkB;AACjB;IAArD,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,aAAa,EAAE,CAAC;uDAAkB;AAG9D;IAAR,KAAK,EAAE;yDAAsB;AACrB;IAAR,KAAK,EAAE;qDAAiC;AAChC;IAAR,KAAK,EAAE;0DAAsC;AACrC;IAAR,KAAK,EAAE;wDAA4B;AAC3B;IAAR,KAAK,EAAE;yDAA4C;AAC3C;IAAR,KAAK,EAAE;sDAAmB;AA7BhB,mBAAmB;IAD/B,aAAa,CAAC,gBAAgB,CAAC;GACnB,mBAAmB,CAuO/B","sourcesContent":["/**\n * @license\n * Copyright 2023 Nuraly, Laabidi Aymen\n * SPDX-License-Identifier: MIT\n */\n\nimport { LitElement, html, nothing } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { styleMap } from 'lit/directives/style-map.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { NuralyUIBaseMixin } from '@nuralyui/common/mixins';\nimport '@lit-labs/virtualizer';\nimport { grid } from '@lit-labs/virtualizer/layouts/grid.js';\n\n// Import required components\nimport '../dropdown/dropdown.component.js';\nimport '../input/input.component.js';\nimport '../icon/icon.component.js';\nimport '../button/button.component.js';\n\n// Import styles and types\nimport styles from './icon-picker.style.js';\nimport {\n    IconPickerSize,\n    IconPickerPlacement,\n    IconPickerTrigger,\n    IconType,\n    EMPTY_STRING\n} from './icon-picker.types.js';\nimport type { IconPickerIcon } from './icon-picker.types.js';\nimport {\n    DEFAULT_PLACEHOLDER,\n    DEFAULT_SEARCH_PLACEHOLDER,\n    DEFAULT_EMPTY_MESSAGE,\n    SEARCH_DEBOUNCE_DELAY\n} from './icon-picker.constant.js';\n\n// Import controllers\nimport {\n    IconPickerSelectionController,\n    IconPickerSearchController,\n    IconPickerEventController\n} from './controllers/index.js';\n\n// Import utilities\nimport { IconLoaderUtils } from './utils/index.js';\n\n// Import interfaces\nimport type { IconPickerHost } from './interfaces/index.js';\n\n/**\n * Advanced icon picker component with search, virtual scrolling, and accessibility.\n * \n * Uses Lucide icons (1500+ beautiful icons) and provides an intuitive selection interface with\n * search filtering, keyboard navigation, and multiple display options.\n * \n * @example\n * ```html\n * <!-- Basic usage -->\n * <nr-icon-picker></nr-icon-picker>\n * \n * <!-- With value -->\n * <nr-icon-picker value=\"heart\"></nr-icon-picker>\n * \n * <!-- Custom configuration -->\n * <nr-icon-picker\n *   value=\"star\"\n *   size=\"large\"\n *   placement=\"top\"\n *   show-search\n *   show-clear>\n * </nr-icon-picker>\n * ```\n * \n * @fires nr-icon-picker-change - Icon selection changed\n * @fires nr-icon-picker-open - Dropdown opened\n * @fires nr-icon-picker-close - Dropdown closed\n * @fires nr-icon-picker-search - Search query changed\n * @fires nr-icon-picker-clear - Selection cleared\n * \n * @cssproperty --icon-picker-dropdown-width - Width of dropdown\n * @cssproperty --icon-picker-icon-size - Size of icon items\n * @cssproperty --icon-picker-selected-bg - Selected icon background\n * @cssproperty --icon-picker-selected-border - Selected icon border\n */\n@customElement('nr-icon-picker')\nexport class NrIconPickerElement extends NuralyUIBaseMixin(LitElement) implements IconPickerHost {\n  static override styles = styles;\n\n  override requiredComponents = ['nr-dropdown', 'nr-input', 'nr-icon', 'nr-button'];\n\n  // Controllers\n  private selectionController = new IconPickerSelectionController(this);\n  private searchController = new IconPickerSearchController(this, SEARCH_DEBOUNCE_DELAY);\n  private eventController = new IconPickerEventController(this);\n\n  // Public properties\n  @property({ type: String, reflect: true }) value = EMPTY_STRING;\n  @property({ type: String, reflect: true }) size = IconPickerSize.Small;\n  @property({ type: String }) placement: string = IconPickerPlacement.Auto;\n  @property({ type: String }) trigger: string = IconPickerTrigger.Manual;\n  @property({ type: Boolean, reflect: true }) disabled = false;\n  @property({ type: Boolean }) readonly = false;\n  @property({ type: String }) placeholder = DEFAULT_PLACEHOLDER;\n  @property({ type: Array }) iconTypes: IconType[] = [IconType.Solid];\n  @property({ type: Boolean, attribute: 'show-search' }) showSearch = true;\n  @property({ type: Boolean, attribute: 'show-clear' }) showClear = true;\n  @property({ type: Number, attribute: 'max-visible' }) maxVisible = 500;\n\n  // Internal state\n  @state() dropdownOpen = false;\n  @state() allIcons: IconPickerIcon[] = [];\n  @state() filteredIcons: IconPickerIcon[] = [];\n  @state() searchQuery = EMPTY_STRING;\n  @state() selectedIcon: IconPickerIcon | null = null;\n  @state() isLoading = false;\n\n  override connectedCallback() {\n    super.connectedCallback();\n    this.loadIcons();\n  }\n\n  /**\n   * Load icons from Lucide library\n   */\n  private loadIcons(): void {\n    this.isLoading = true;\n    try {\n      this.allIcons = IconLoaderUtils.loadIcons(this.iconTypes);\n      this.filteredIcons = [...this.allIcons];\n      \n      // Set selected icon if value is provided\n      if (this.value) {\n        this.selectedIcon = this.allIcons.find(icon => icon.name === this.value) || null;\n      }\n    } catch (error) {\n      console.error('Failed to load icons:', error);\n    } finally {\n      this.isLoading = false;\n    }\n  }\n\n  /**\n   * Handle icon selection\n   */\n  handleIconSelect(icon: IconPickerIcon): void {\n    this.selectionController.selectIcon(icon);\n    this.eventController.dispatchChangeEvent(icon.name, icon);\n    this.dropdownOpen = false;\n  }\n\n  /**\n   * Handle search input\n   */\n  private handleSearchInput(e: CustomEvent): void {\n    const query = e.detail.value;\n    this.searchController.search(query);\n    this.eventController.dispatchSearchEvent(query);\n  }\n\n  /**\n   * Handle clear button\n   */\n  private handleClear(e: Event): void {\n    e.stopPropagation();\n    this.selectionController.clearSelection();\n    this.eventController.dispatchClearEvent();\n    this.eventController.dispatchChangeEvent(EMPTY_STRING, null);\n  }\n\n  /**\n   * Handle dropdown open\n   */\n  private handleDropdownOpen(): void {\n    this.dropdownOpen = true;\n    this.eventController.dispatchOpenEvent();\n  }\n\n  /**\n   * Handle dropdown close\n   */\n  private handleDropdownClose(): void {\n    this.dropdownOpen = false;\n    this.searchController.clearSearch();\n    this.eventController.dispatchCloseEvent();\n  }\n\n  /**\n   * Toggle dropdown\n   */\n  private toggleDropdown(): void {\n    this.dropdownOpen = !this.dropdownOpen;\n  }\n\n  /**\n   * Render trigger button\n   */\n  private renderTrigger() {\n    return html`\n      <nr-button\n        class=\"trigger-button\"\n        .disabled=${this.disabled}\n        size=${this.size}\n        @click=${this.toggleDropdown}\n      >\n        ${this.selectedIcon\n          ? html`\n              <nr-icon class=\"icon-preview\" .name=${this.selectedIcon.name}></nr-icon>\n              <span class=\"icon-name\">${this.selectedIcon.name}</span>\n            `\n          : html`<span class=\"placeholder\">${this.placeholder}</span>`\n        }\n        ${this.showClear && this.selectedIcon\n          ? html`\n              <nr-icon\n                name=\"times\"\n                @click=${this.handleClear}\n                style=\"margin-left: auto; cursor: pointer;\"\n              ></nr-icon>\n            `\n          : nothing\n        }\n      </nr-button>\n    `;\n  }\n\n  /**\n   * Render icon grid\n   */\n  private renderIconGrid() {\n    if (this.isLoading) {\n      return html`\n        <div class=\"loading-state\">\n          <nr-icon name=\"spinner\"></nr-icon>\n          <div class=\"empty-message\">Loading icons...</div>\n        </div>\n      `;\n    }\n\n    if (this.filteredIcons.length === 0) {\n      return html`\n        <div class=\"empty-state\">\n          <nr-icon name=\"search\"></nr-icon>\n          <div class=\"empty-message\">${DEFAULT_EMPTY_MESSAGE}</div>\n        </div>\n      `;\n    }\n\n    // Limit visible icons for performance\n    const visibleIcons = this.filteredIcons.slice(0, this.maxVisible);\n\n    return html`\n      <div class=\"dropdown-content\">\n        ${this.showSearch\n          ? html`\n              <div class=\"search-container\">\n                <nr-input\n                  size=\"small\"\n                  .placeholder=${DEFAULT_SEARCH_PLACEHOLDER}\n                  .value=${this.searchQuery}\n                  @nr-input=${this.handleSearchInput}\n                  autocomplete=\"off\"\n                >\n                  <nr-icon slot=\"addon-before\" name=\"search\"></nr-icon>\n                </nr-input>\n              </div>\n            `\n          : nothing\n        }\n        <div class=\"icons-grid-container\">\n          <lit-virtualizer\n            .items=${visibleIcons}\n            .layout=${grid({ itemSize: '40px' })}\n            .renderItem=${((icon: IconPickerIcon) => html`\n              <div\n                class=${classMap({\n                  'icon-item': true,\n                  'selected': this.selectionController.isSelected(icon)\n                })}\n                @click=${() => this.handleIconSelect(icon)}\n                tabindex=\"0\"\n                role=\"button\"\n                aria-label=\"Select ${icon.name} icon\"\n              >\n                <nr-icon .name=${icon.name}></nr-icon>\n              </div>\n            `) as any}\n          ></lit-virtualizer>\n        </div>\n      </div>\n    `;\n  }\n\n  override render() {\n    return html`\n      <nr-dropdown\n        .open=${this.dropdownOpen}\n        trigger=\"manual\"\n        .placement=${this.placement as any}\n        .closeOnOutsideClick=${true}\n        .closeOnEscape=${true}\n        @nr-dropdown-open=${this.handleDropdownOpen}\n        @nr-dropdown-close=${this.handleDropdownClose}\n        style=${styleMap({\n          '--dropdown-width': 'var(--icon-picker-dropdown-width)',\n          '--dropdown-max-height': 'var(--icon-picker-dropdown-max-height)'\n        })}\n      >\n        <div slot=\"trigger\" class=\"trigger-container\">\n          ${this.renderTrigger()}\n        </div>\n        <div slot=\"content\">\n          ${this.renderIconGrid()}\n        </div>\n      </nr-dropdown>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nr-icon-picker': NrIconPickerElement;\n  }\n}\n"]}

package/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/icon-picker.constant.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"icon-picker.constant.d.ts","sourceRoot":"","sources":["../../../../src/components/iconpicker/icon-picker.constant.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAGH,eAAO,MAAM,mBAAmB,gBAAgB,CAAC;AACjD,eAAO,MAAM,0BAA0B,oBAAoB,CAAC;AAC5D,eAAO,MAAM,qBAAqB,mBAAmB,CAAC;AACtD,eAAO,MAAM,iBAAiB,SAAS,CAAC;AACxC,eAAO,MAAM,yBAAyB,MAAM,CAAC;AAC7C,eAAO,MAAM,sBAAsB,UAAU,CAAC;AAC9C,eAAO,MAAM,2BAA2B,UAAU,CAAC;AAGnD,eAAO,MAAM,eAAe,uIAalB,CAAC;AAGX,eAAO,MAAM,qBAAqB,MAAM,CAAC"}

package/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/icon-picker.constant.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"icon-picker.constant.js","sourceRoot":"","sources":["../../../../src/components/iconpicker/icon-picker.constant.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,wBAAwB;AACxB,MAAM,CAAC,MAAM,mBAAmB,GAAG,aAAa,CAAC;AACjD,MAAM,CAAC,MAAM,0BAA0B,GAAG,iBAAiB,CAAC;AAC5D,MAAM,CAAC,MAAM,qBAAqB,GAAG,gBAAgB,CAAC;AACtD,MAAM,CAAC,MAAM,iBAAiB,GAAG,MAAM,CAAC;AACxC,MAAM,CAAC,MAAM,yBAAyB,GAAG,GAAG,CAAC;AAC7C,MAAM,CAAC,MAAM,sBAAsB,GAAG,OAAO,CAAC;AAC9C,MAAM,CAAC,MAAM,2BAA2B,GAAG,OAAO,CAAC;AAEnD,kBAAkB;AAClB,MAAM,CAAC,MAAM,eAAe,GAAG;IAC7B,KAAK;IACL,OAAO;IACP,eAAe;IACf,MAAM;IACN,WAAW;IACX,OAAO;IACP,QAAQ;IACR,MAAM;IACN,SAAS;IACT,UAAU;IACV,QAAQ;IACR,QAAQ;CACA,CAAC;AAEX,wBAAwB;AACxB,MAAM,CAAC,MAAM,qBAAqB,GAAG,GAAG,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2023 Nuraly, Laabidi Aymen\n * SPDX-License-Identifier: MIT\n */\n\n// Default configuration\nexport const DEFAULT_PLACEHOLDER = 'Select icon';\nexport const DEFAULT_SEARCH_PLACEHOLDER = 'Search icons...';\nexport const DEFAULT_EMPTY_MESSAGE = 'No icons found';\nexport const DEFAULT_GRID_SIZE = '32px';\nexport const DEFAULT_MAX_VISIBLE_ICONS = 500;\nexport const DEFAULT_DROPDOWN_WIDTH = '320px';\nexport const DEFAULT_DROPDOWN_MAX_HEIGHT = '380px';\n\n// Icon categories\nexport const ICON_CATEGORIES = [\n  'all',\n  'arrow',\n  'communication',\n  'file',\n  'interface',\n  'media',\n  'social',\n  'text',\n  'utility',\n  'business',\n  'design',\n  'shapes'\n] as const;\n\n// Search debounce delay\nexport const SEARCH_DEBOUNCE_DELAY = 300;\n"]}

package/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

package/icon-picker.style.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"icon-picker.style.d.ts","sourceRoot":"","sources":["../../../../src/components/iconpicker/icon-picker.style.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAIH,wBAgNE"}

package/icon-picker.style.js

@@ -0,0 +1,216 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+import { css } from 'lit';
+export default css `
+  :host {
+    /* Sizing */
+    --icon-picker-trigger-width: 100%;
+    --icon-picker-trigger-height: auto;
+    --icon-picker-dropdown-width: 320px;
+    --icon-picker-dropdown-max-height: 380px;
+    --icon-picker-grid-gap: 4px;
+    --icon-picker-icon-size: 24px;
+    --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);
+    
+    display: inline-block;
+    width: var(--icon-picker-trigger-width);
+    position: relative;
+  }
+
+  @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);
+    }
+  }
+
+  /* Trigger container */
+  .trigger-container {
+    width: 100%;
+  }
+
+  .trigger-button {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 0 12px;
+    cursor: pointer;
+  }
+
+  /* Icon preview in trigger */
+  .icon-preview {
+    font-size: 1.1rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+  }
+
+  .icon-name {
+    font-size: 0.875rem;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    color: var(--icon-picker-text);
+  }
+
+  .placeholder {
+    font-size: 0.875rem;
+    color: var(--icon-picker-placeholder-color);
+  }
+
+  /* Dropdown content */
+  .dropdown-content {
+    width: var(--icon-picker-dropdown-width);
+    max-height: var(--icon-picker-dropdown-max-height);
+    background: var(--icon-picker-background);
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+  }
+
+  /* Search container */
+  .search-container {
+    padding: 12px;
+    background: var(--icon-picker-background);
+    border-bottom: 1px solid var(--icon-picker-border);
+    flex-shrink: 0;
+    z-index: 10;
+  }
+
+  /* Icons grid container */
+  .icons-grid-container {
+    flex: 1;
+    min-height: 0;
+    overflow: auto;
+    padding: 8px;
+    background: var(--icon-picker-background);
+  }
+
+  /* Icon grid using lit-virtualizer */
+  .icons-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(var(--icon-picker-grid-gap), 1fr));
+    gap: var(--icon-picker-grid-gap);
+  }
+
+  /* Individual icon item */
+  .icon-item {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: var(--icon-picker-icon-padding);
+    cursor: pointer;
+    border-radius: 4px;
+    border: 2px solid transparent;
+    transition: all 0.2s ease;
+    min-width: var(--icon-picker-icon-size);
+    min-height: var(--icon-picker-icon-size);
+  }
+
+  .icon-item:hover {
+    background-color: var(--icon-picker-hover-bg);
+  }
+
+  .icon-item.selected {
+    background-color: var(--icon-picker-selected-bg);
+    border-color: var(--icon-picker-selected-border);
+  }
+
+  .icon-item:focus {
+    outline: 2px solid var(--icon-picker-selected-border);
+    outline-offset: 2px;
+  }
+
+  .icon-item nr-icon {
+    font-size: var(--icon-picker-icon-size);
+    color: var(--icon-picker-text);
+  }
+
+  /* Empty state */
+  .empty-state {
+    padding: 40px 20px;
+    text-align: center;
+    color: var(--icon-picker-placeholder-color);
+  }
+
+  .empty-state nr-icon {
+    font-size: 48px;
+    margin-bottom: 12px;
+    opacity: 0.5;
+  }
+
+  .empty-message {
+    font-size: 0.875rem;
+  }
+
+  /* Loading state */
+  .loading-state {
+    padding: 40px 20px;
+    text-align: center;
+    color: var(--icon-picker-placeholder-color);
+  }
+
+  /* Disabled state */
+  :host([disabled]) {
+    opacity: 0.6;
+    pointer-events: none;
+  }
+
+  /* Size variants */
+  :host([size="small"]) {
+    --icon-picker-icon-size: 20px;
+    --icon-picker-icon-padding: 6px;
+    --icon-picker-dropdown-width: 280px;
+  }
+
+  :host([size="large"]) {
+    --icon-picker-icon-size: 28px;
+    --icon-picker-icon-padding: 10px;
+    --icon-picker-dropdown-width: 360px;
+  }
+
+  /* Accessibility */
+  @media (prefers-reduced-motion: reduce) {
+    .icon-item {
+      transition: none;
+    }
+  }
+
+  /* Scrollbar styling */
+  .icons-grid-container::-webkit-scrollbar {
+    width: 8px;
+  }
+
+  .icons-grid-container::-webkit-scrollbar-track {
+    background: transparent;
+  }
+
+  .icons-grid-container::-webkit-scrollbar-thumb {
+    background: var(--icon-picker-border);
+    border-radius: 4px;
+  }
+
+  .icons-grid-container::-webkit-scrollbar-thumb:hover {
+    background: var(--icon-picker-text);
+    opacity: 0.5;
+  }
+`;
+//# sourceMappingURL=icon-picker.style.js.map

package/icon-picker.style.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"icon-picker.style.js","sourceRoot":"","sources":["../../../../src/components/iconpicker/icon-picker.style.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,eAAe,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgNjB,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2023 Nuraly, Laabidi Aymen\n * SPDX-License-Identifier: MIT\n */\n\nimport { css } from 'lit';\n\nexport default css`\n  :host {\n    /* Sizing */\n    --icon-picker-trigger-width: 100%;\n    --icon-picker-trigger-height: auto;\n    --icon-picker-dropdown-width: 320px;\n    --icon-picker-dropdown-max-height: 380px;\n    --icon-picker-grid-gap: 4px;\n    --icon-picker-icon-size: 24px;\n    --icon-picker-icon-padding: 8px;\n    \n    /* Colors - Light mode */\n    --icon-picker-background: var(--nuraly-background-primary, #ffffff);\n    --icon-picker-border: var(--nuraly-border-color, #d0d0d0);\n    --icon-picker-text: var(--nuraly-text-primary, #000000);\n    --icon-picker-hover-bg: var(--nuraly-background-hover, #f5f5f5);\n    --icon-picker-selected-bg: var(--nuraly-primary-light, #e6f7ff);\n    --icon-picker-selected-border: var(--nuraly-primary-color, #1890ff);\n    --icon-picker-placeholder-color: var(--nuraly-text-secondary, #999999);\n    \n    display: inline-block;\n    width: var(--icon-picker-trigger-width);\n    position: relative;\n  }\n\n  @media (prefers-color-scheme: dark) {\n    :host {\n      --icon-picker-background: var(--nuraly-background-primary, #1f1f1f);\n      --icon-picker-border: var(--nuraly-border-color, #404040);\n      --icon-picker-text: var(--nuraly-text-primary, #ffffff);\n      --icon-picker-hover-bg: var(--nuraly-background-hover, #2a2a2a);\n      --icon-picker-selected-bg: var(--nuraly-primary-dark, #003a8c);\n      --icon-picker-selected-border: var(--nuraly-primary-color, #40a9ff);\n    }\n  }\n\n  /* Trigger container */\n  .trigger-container {\n    width: 100%;\n  }\n\n  .trigger-button {\n    width: 100%;\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 0 12px;\n    cursor: pointer;\n  }\n\n  /* Icon preview in trigger */\n  .icon-preview {\n    font-size: 1.1rem;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n  }\n\n  .icon-name {\n    font-size: 0.875rem;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    color: var(--icon-picker-text);\n  }\n\n  .placeholder {\n    font-size: 0.875rem;\n    color: var(--icon-picker-placeholder-color);\n  }\n\n  /* Dropdown content */\n  .dropdown-content {\n    width: var(--icon-picker-dropdown-width);\n    max-height: var(--icon-picker-dropdown-max-height);\n    background: var(--icon-picker-background);\n    display: flex;\n    flex-direction: column;\n    overflow: hidden;\n  }\n\n  /* Search container */\n  .search-container {\n    padding: 12px;\n    background: var(--icon-picker-background);\n    border-bottom: 1px solid var(--icon-picker-border);\n    flex-shrink: 0;\n    z-index: 10;\n  }\n\n  /* Icons grid container */\n  .icons-grid-container {\n    flex: 1;\n    min-height: 0;\n    overflow: auto;\n    padding: 8px;\n    background: var(--icon-picker-background);\n  }\n\n  /* Icon grid using lit-virtualizer */\n  .icons-grid {\n    display: grid;\n    grid-template-columns: repeat(auto-fill, minmax(var(--icon-picker-grid-gap), 1fr));\n    gap: var(--icon-picker-grid-gap);\n  }\n\n  /* Individual icon item */\n  .icon-item {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: var(--icon-picker-icon-padding);\n    cursor: pointer;\n    border-radius: 4px;\n    border: 2px solid transparent;\n    transition: all 0.2s ease;\n    min-width: var(--icon-picker-icon-size);\n    min-height: var(--icon-picker-icon-size);\n  }\n\n  .icon-item:hover {\n    background-color: var(--icon-picker-hover-bg);\n  }\n\n  .icon-item.selected {\n    background-color: var(--icon-picker-selected-bg);\n    border-color: var(--icon-picker-selected-border);\n  }\n\n  .icon-item:focus {\n    outline: 2px solid var(--icon-picker-selected-border);\n    outline-offset: 2px;\n  }\n\n  .icon-item nr-icon {\n    font-size: var(--icon-picker-icon-size);\n    color: var(--icon-picker-text);\n  }\n\n  /* Empty state */\n  .empty-state {\n    padding: 40px 20px;\n    text-align: center;\n    color: var(--icon-picker-placeholder-color);\n  }\n\n  .empty-state nr-icon {\n    font-size: 48px;\n    margin-bottom: 12px;\n    opacity: 0.5;\n  }\n\n  .empty-message {\n    font-size: 0.875rem;\n  }\n\n  /* Loading state */\n  .loading-state {\n    padding: 40px 20px;\n    text-align: center;\n    color: var(--icon-picker-placeholder-color);\n  }\n\n  /* Disabled state */\n  :host([disabled]) {\n    opacity: 0.6;\n    pointer-events: none;\n  }\n\n  /* Size variants */\n  :host([size=\"small\"]) {\n    --icon-picker-icon-size: 20px;\n    --icon-picker-icon-padding: 6px;\n    --icon-picker-dropdown-width: 280px;\n  }\n\n  :host([size=\"large\"]) {\n    --icon-picker-icon-size: 28px;\n    --icon-picker-icon-padding: 10px;\n    --icon-picker-dropdown-width: 360px;\n  }\n\n  /* Accessibility */\n  @media (prefers-reduced-motion: reduce) {\n    .icon-item {\n      transition: none;\n    }\n  }\n\n  /* Scrollbar styling */\n  .icons-grid-container::-webkit-scrollbar {\n    width: 8px;\n  }\n\n  .icons-grid-container::-webkit-scrollbar-track {\n    background: transparent;\n  }\n\n  .icons-grid-container::-webkit-scrollbar-thumb {\n    background: var(--icon-picker-border);\n    border-radius: 4px;\n  }\n\n  .icons-grid-container::-webkit-scrollbar-thumb:hover {\n    background: var(--icon-picker-text);\n    opacity: 0.5;\n  }\n`;\n"]}