@xlabs-store/core 0.0.1 → 0.0.3

package/dist/collection/components/x-input-icon/icon-picker-dropdown-content/icon-picker-dropdown-content.js

@@ -0,0 +1,304 @@
+import { h } from "@stencil/core";
+import { Icons } from "../../x-icon/icons";
+import { translate } from "../../../locales/locale.service";
+// ─── Constants ─────────────────────────────────────────────────────────────────
+const PAGE_SIZE = 48;
+// ─── Pre-build full grouped data once at module load ──────────────────────────
+const ALL_GROUPS = Icons;
+export class XIconPickerDropdownContent {
+    el;
+    value;
+    placement = 'bottomLeft';
+    dropdownClasses = {};
+    /**
+     * Search query passed from the trigger (x-select's showSearch input).
+     * When this changes, pagination resets and icons are filtered.
+     */
+    searchQuery = '';
+    /**
+     * Whether to show an internal search input field at the top of the dropdown.
+     * Useful when the trigger (e.g. avatar, button) does not have its own search input.
+     */
+    showSearchInput = false;
+    /** How many icons have been "loaded" (lazy pagination) */
+    loadedCount = PAGE_SIZE;
+    /** Whether more icons are being loaded */
+    isLoadingMore = false;
+    xIconClick;
+    xSearch;
+    sentinelRef;
+    observer;
+    // ─── Reset pagination when search changes ─────────────────────────────────
+    onSearchChange() {
+        this.loadedCount = PAGE_SIZE;
+    }
+    // ─── Setup IntersectionObserver after render ──────────────────────────────
+    componentDidLoad() {
+        this.setupObserver();
+    }
+    componentDidUpdate() {
+        this.setupObserver();
+    }
+    disconnectedCallback() {
+        this.observer?.disconnect();
+    }
+    setupObserver() {
+        this.observer?.disconnect();
+        if (!this.sentinelRef)
+            return;
+        this.observer = new IntersectionObserver(entries => {
+            const entry = entries[0];
+            if (entry.isIntersecting && !this.isLoadingMore) {
+                this.loadMore();
+            }
+        }, {
+            root: this.el.shadowRoot?.querySelector('.x-icon-picker-body') ?? null,
+            threshold: 0.1,
+        });
+        this.observer.observe(this.sentinelRef);
+    }
+    loadMore() {
+        const totalFiltered = this.getTotalFilteredCount();
+        if (this.loadedCount >= totalFiltered)
+            return;
+        this.isLoadingMore = true;
+        requestAnimationFrame(() => {
+            this.loadedCount = Math.min(this.loadedCount + PAGE_SIZE, totalFiltered);
+            this.isLoadingMore = false;
+        });
+    }
+    // ─── Handlers ─────────────────────────────────────────────────────────────
+    handleIconClick(icon) {
+        this.xIconClick.emit(icon.code);
+    }
+    handleSearchChange = (e) => {
+        const val = e.detail?.value !== undefined ? e.detail.value : e.detail;
+        this.xSearch.emit(val);
+    };
+    // ─── Data helpers ─────────────────────────────────────────────────────────
+    getFilteredGroups() {
+        const q = (this.searchQuery || '').toLowerCase().trim();
+        if (!q)
+            return ALL_GROUPS;
+        return ALL_GROUPS.reduce((results, item) => {
+            const icons = item.icons.filter(i => (i.name + i.code).toLowerCase().includes(q));
+            if (icons.length) {
+                results.push({
+                    categorie: item.categorie,
+                    icons
+                });
+            }
+            return results;
+        }, []);
+    }
+    getTotalFilteredCount() {
+        return this.getFilteredGroups().reduce((sum, g) => sum + g.icons.length, 0);
+    }
+    getVisibleGroups() {
+        const filtered = this.getFilteredGroups();
+        let budget = this.loadedCount;
+        const result = [];
+        for (const group of filtered) {
+            if (budget <= 0)
+                break;
+            const visible = group.icons.slice(0, budget);
+            budget -= visible.length;
+            result.push({ categorie: group.categorie, icons: visible });
+        }
+        return result;
+    }
+    // ─── Render helpers ───────────────────────────────────────────────────────
+    renderGroup(group) {
+        return (h("div", { class: "x-icon-picker-group", key: group.categorie }, h("div", { class: "x-icon-picker-group-header" }, group.categorie), h("div", { class: "x-icon-picker-grid" }, group.icons.map(icon => {
+            const isSelected = this.value === icon.code;
+            return (h("div", { class: {
+                    'x-icon-picker-item': true,
+                    'x-icon-picker-item-selected': isSelected,
+                }, onClick: () => this.handleIconClick(icon), title: icon.name, key: icon.code }, h("x-icon", { name: icon.code })));
+        }))));
+    }
+    renderBody() {
+        const visibleGroups = this.getVisibleGroups();
+        const totalFiltered = this.getTotalFilteredCount();
+        const hasMore = this.loadedCount < totalFiltered;
+        if (totalFiltered === 0) {
+            return (h("div", { class: "x-icon-picker-empty" }, h("x-empty", { description: translate('IconPicker.empty', {}, 'No icons found') })));
+        }
+        return [
+            ...visibleGroups.map(g => this.renderGroup(g)),
+            hasMore && (h("div", { class: "x-icon-picker-sentinel", ref: el => (this.sentinelRef = el) }, h("div", { class: "x-icon-picker-loading" }, h("x-spin", { size: "small" })))),
+            h("div", { class: "x-icon-picker-footer" }, `${Math.min(this.loadedCount, totalFiltered)} / ${totalFiltered} icons`),
+        ];
+    }
+    render() {
+        const wrapperClasses = {
+            'x-icon-picker-panel': true,
+            ...this.dropdownClasses,
+        };
+        return (h("div", { key: '3e5976ada71894111ae1e25c83d20f575f75a83c', class: wrapperClasses }, this.showSearchInput && (h("div", { key: '7ab45031d191e2520209f7d9a33f800430047503', class: "x-icon-picker-search" }, h("x-input", { key: 'a3c3040a79d553a5b8e18415a703157f7d2f2f06', value: this.searchQuery, placeholder: translate('IconPicker.searchPlaceholder', {}, 'Search icon...'), allowClear: true, onXChange: this.handleSearchChange, onXInput: this.handleSearchChange }, h("x-icon", { key: '32ea8a961966111b63ce3ace2e3ccaffb6dabbe4', name: "search", slot: "prefix" })))), h("div", { key: 'c1fbcd46bd59469d2fdaf0dac70b52b5e6f07ccc', class: "x-icon-picker-body" }, this.renderBody())));
+    }
+    static get is() { return "x-icon-picker-dropdown-content"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["icon-picker-dropdown-content.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["icon-picker-dropdown-content.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "value": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value"
+            },
+            "placement": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "placement",
+                "defaultValue": "'bottomLeft'"
+            },
+            "dropdownClasses": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "Record<string, boolean>",
+                    "resolved": "boolean | string",
+                    "references": {
+                        "Record": {
+                            "location": "global",
+                            "id": "global::Record"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "{}"
+            },
+            "searchQuery": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Search query passed from the trigger (x-select's showSearch input).\nWhen this changes, pagination resets and icons are filtered."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "search-query",
+                "defaultValue": "''"
+            },
+            "showSearchInput": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether to show an internal search input field at the top of the dropdown.\nUseful when the trigger (e.g. avatar, button) does not have its own search input."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-search-input",
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "loadedCount": {},
+            "isLoadingMore": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "xIconClick",
+                "name": "xIconClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }, {
+                "method": "xSearch",
+                "name": "xSearch",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "searchQuery",
+                "methodName": "onSearchChange"
+            }];
+    }
+}

package/dist/collection/components/x-input-icon/types.js

@@ -0,0 +1 @@
+export {};