atomicuilibrary 0.0.1

package/dist/collection/components/smart-location-dropdown/smart-location-dropdown.js

@@ -0,0 +1,1190 @@
+import { h } from "@stencil/core";
+import { calculateUniversalPlacement } from "../../utils/dom";
+export class SmartLocationDropdown {
+    hostElement;
+    /** Location options as JSON string or array */
+    options = [];
+    /** Selected value(s): single => 'id', multi => comma-separated ids */
+    value = '';
+    /** Enables multiple location selection */
+    multiSelect = false;
+    /** Placeholder text for trigger */
+    placeholder = 'Select location';
+    /** Enables searching */
+    searchable = true;
+    /** Search placeholder */
+    searchPlaceholder = 'Search country, state, city, postal code...';
+    /** Disables control */
+    disabled = false;
+    /** Show clear action */
+    clearable = true;
+    /** Maximum dropdown height in px */
+    maxHeight = 360;
+    /** Search debounce in ms */
+    debounceMs = 250;
+    /** Max selected items in multi mode (0 = no limit) */
+    maxSelections = 0;
+    /** Max results rendered */
+    resultLimit = 250;
+    /** Show recent selections section */
+    showRecent = true;
+    /** Show favorites section */
+    showFavorites = true;
+    /** Persist recent/favorites in local storage */
+    persistState = true;
+    /** Storage key for persistent state */
+    storageKey = 'ui-smart-location-dropdown-state';
+    /** Display full hierarchy path in options and selected tags */
+    showPath = true;
+    /** Show location type badges */
+    showTypeBadge = true;
+    /** Allow custom value creation from search */
+    allowCustomValue = false;
+    /** Force menu position to ignore transformed/positioned parent offsets */
+    ignoreParentPosition = true;
+    /** Portal menu to document.body (off by default to preserve shadow styling) */
+    portal = false;
+    /** Optional async remote location loader */
+    loadLocations;
+    /** Minimum characters required before async loader executes */
+    remoteMinChars = 2;
+    isOpen = false;
+    parsedOptions = [];
+    remoteOptions = [];
+    selectedIds = new Set();
+    searchQuery = '';
+    loading = false;
+    loadError = '';
+    highlightedIndex = -1;
+    menuLeft = 0;
+    menuTop = 0;
+    menuWidth = 0;
+    dropdownPosition = 'bottom';
+    recentIds = [];
+    favoriteIds = [];
+    locationChange;
+    locationSearch;
+    locationOpen;
+    locationClose;
+    locationLoadError;
+    locationCreate;
+    searchDebounceTimer;
+    searchInputRef;
+    menuElement;
+    optionsRefs = [];
+    rafId;
+    isPortaled = false;
+    searchToken = 0;
+    watchOptions(newValue) {
+        this.parsedOptions = this.normalizeOptions(newValue);
+    }
+    watchValue(newValue) {
+        this.selectedIds = this.parseSelectedIds(newValue);
+    }
+    componentWillLoad() {
+        this.parsedOptions = this.normalizeOptions(this.options);
+        this.selectedIds = this.parseSelectedIds(this.value);
+        this.restorePersistentState();
+    }
+    disconnectedCallback() {
+        if (this.searchDebounceTimer) {
+            clearTimeout(this.searchDebounceTimer);
+        }
+        this.cleanupPortal();
+        if (this.rafId) {
+            cancelAnimationFrame(this.rafId);
+            this.rafId = 0;
+        }
+    }
+    handleOutsideClick(event) {
+        const path = typeof event.composedPath === 'function' ? event.composedPath() : [];
+        const clickedHost = path.includes(this.hostElement) || this.hostElement.contains(event.target);
+        const clickedMenu = !!this.menuElement && (path.includes(this.menuElement) || this.menuElement.contains(event.target));
+        if (!clickedHost && !clickedMenu) {
+            this.closeDropdown();
+        }
+    }
+    handleResize() {
+        if (this.isOpen) {
+            this.calculatePosition();
+        }
+    }
+    handleScroll() {
+        if (this.isOpen) {
+            this.calculatePosition();
+        }
+    }
+    normalizeOptions(raw) {
+        const parsed = typeof raw === 'string' ? this.tryParse(raw) : raw || [];
+        const output = [];
+        const walk = (items, depth, parentId, parentPath = []) => {
+            items.forEach(item => {
+                if (item == null || item.id == null || !item.label)
+                    return;
+                const idStr = String(item.id);
+                const type = item.type || this.inferType(depth);
+                const path = [...parentPath, item.label];
+                const searchText = [item.label, item.code || '', type, path.join(' '), (item.tags || []).join(' ')].join(' ').toLowerCase();
+                output.push({
+                    ...item,
+                    idStr,
+                    parentIdStr: parentId,
+                    type,
+                    depth,
+                    pathLabels: path,
+                    searchText,
+                });
+                if (item.children && item.children.length > 0) {
+                    walk(item.children, depth + 1, idStr, path);
+                }
+            });
+        };
+        walk(parsed, 0);
+        return output;
+    }
+    tryParse(value) {
+        if (!value)
+            return [];
+        try {
+            const parsed = JSON.parse(value);
+            return Array.isArray(parsed) ? parsed : [];
+        }
+        catch (error) {
+            console.error('Invalid JSON for location options', error);
+            return [];
+        }
+    }
+    inferType(depth) {
+        if (depth <= 0)
+            return 'country';
+        if (depth === 1)
+            return 'state';
+        if (depth === 2)
+            return 'city';
+        if (depth === 3)
+            return 'district';
+        return 'custom';
+    }
+    parseSelectedIds(value) {
+        if (!value)
+            return new Set();
+        if (this.multiSelect) {
+            return new Set(value.split(',').map(v => v.trim()).filter(Boolean));
+        }
+        return new Set([value]);
+    }
+    get selectedOptions() {
+        const map = new Map(this.getMergedOptions().map(o => [o.idStr, o]));
+        return Array.from(this.selectedIds)
+            .map(id => map.get(id))
+            .filter((o) => !!o);
+    }
+    getMergedOptions() {
+        const merged = [...this.parsedOptions];
+        const existing = new Set(merged.map(o => o.idStr));
+        this.remoteOptions.forEach(o => {
+            if (!existing.has(o.idStr)) {
+                merged.push(o);
+            }
+        });
+        return merged;
+    }
+    get filteredOptions() {
+        const all = this.getMergedOptions();
+        const query = this.searchQuery.trim().toLowerCase();
+        let list = query ? all.filter(option => option.searchText.includes(query)) : all;
+        if (!query) {
+            const pinned = this.favoriteIds
+                .map(id => list.find(o => o.idStr === id))
+                .filter((o) => !!o);
+            const recent = this.recentIds
+                .map(id => list.find(o => o.idStr === id && !this.favoriteIds.includes(id)))
+                .filter((o) => !!o);
+            const used = new Set([...pinned.map(o => o.idStr), ...recent.map(o => o.idStr)]);
+            const rest = list.filter(o => !used.has(o.idStr));
+            list = [...pinned, ...recent, ...rest];
+        }
+        return list.slice(0, this.resultLimit);
+    }
+    get typeLabelMap() {
+        return {
+            country: 'Country',
+            state: 'State',
+            province: 'Province',
+            city: 'City',
+            district: 'District',
+            postal: 'Postal',
+            custom: 'Custom',
+        };
+    }
+    toggleDropdown = () => {
+        if (this.disabled)
+            return;
+        if (this.isOpen) {
+            this.closeDropdown();
+            return;
+        }
+        this.isOpen = true;
+        this.locationOpen.emit();
+        this.highlightedIndex = this.filteredOptions.length > 0 ? 0 : -1;
+        this.schedulePositionUpdate();
+        if (this.searchable) {
+            window.setTimeout(() => this.searchInputRef?.focus(), 25);
+        }
+    };
+    closeDropdown = () => {
+        if (!this.isOpen)
+            return;
+        this.isOpen = false;
+        this.locationClose.emit();
+        this.highlightedIndex = -1;
+        this.searchQuery = '';
+        this.remoteOptions = [];
+        this.loadError = '';
+        this.cleanupPortal();
+    };
+    schedulePositionUpdate() {
+        if (this.rafId) {
+            cancelAnimationFrame(this.rafId);
+        }
+        this.rafId = requestAnimationFrame(() => {
+            this.calculatePosition();
+            this.rafId = 0;
+        });
+    }
+    calculatePosition() {
+        if (!this.isOpen || !this.menuElement)
+            return;
+        const trigger = this.hostElement.shadowRoot?.querySelector('.location-trigger');
+        if (!trigger)
+            return;
+        if (this.portal && !this.isPortaled && this.menuElement.parentElement !== document.body) {
+            document.body.appendChild(this.menuElement);
+            this.isPortaled = true;
+        }
+        const placement = calculateUniversalPlacement(trigger, {
+            menuWidth: trigger.offsetWidth,
+            menuHeight: this.maxHeight,
+            gap: 4,
+            placement: 'auto',
+            useTransformedAncestorOffset: !this.ignoreParentPosition,
+        });
+        this.menuLeft = placement.left;
+        this.menuTop = placement.top;
+        this.menuWidth = placement.width;
+        this.dropdownPosition = placement.placement;
+    }
+    cleanupPortal() {
+        if (this.portal && this.isPortaled && this.menuElement && this.menuElement.parentElement === document.body) {
+            this.hostElement.appendChild(this.menuElement);
+            this.isPortaled = false;
+        }
+    }
+    onSearchInput_Custom = (value) => {
+        this.searchQuery = value || '';
+        if (this.searchDebounceTimer) {
+            clearTimeout(this.searchDebounceTimer);
+        }
+        this.searchDebounceTimer = window.setTimeout(() => {
+            this.runRemoteSearch(this.searchQuery);
+            this.emitSearchEvent();
+            this.highlightedIndex = this.filteredOptions.length > 0 ? 0 : -1;
+        }, this.debounceMs);
+    };
+    async runRemoteSearch(query) {
+        if (!this.loadLocations)
+            return;
+        if ((query || '').trim().length < this.remoteMinChars) {
+            this.remoteOptions = [];
+            this.loading = false;
+            this.loadError = '';
+            return;
+        }
+        const token = ++this.searchToken;
+        this.loading = true;
+        this.loadError = '';
+        try {
+            const remote = await this.loadLocations(query.trim());
+            if (token !== this.searchToken)
+                return;
+            this.remoteOptions = this.normalizeOptions(remote || []);
+        }
+        catch (error) {
+            if (token !== this.searchToken)
+                return;
+            const message = error instanceof Error ? error.message : 'Failed to load locations';
+            this.remoteOptions = [];
+            this.loadError = message;
+            this.locationLoadError.emit({ query, message });
+        }
+        finally {
+            if (token === this.searchToken) {
+                this.loading = false;
+                this.emitSearchEvent();
+            }
+        }
+    }
+    emitSearchEvent() {
+        this.locationSearch.emit({
+            query: this.searchQuery,
+            localResults: this.parsedOptions.filter(o => o.searchText.includes(this.searchQuery.toLowerCase())).length,
+            remoteResults: this.remoteOptions.length,
+            loading: this.loading,
+        });
+    }
+    handleKeyDown = (event) => {
+        if (this.disabled)
+            return;
+        const options = this.filteredOptions;
+        switch (event.key) {
+            case 'Enter':
+            case ' ': {
+                if (!this.isOpen) {
+                    event.preventDefault();
+                    this.toggleDropdown();
+                    return;
+                }
+                if (this.highlightedIndex >= 0 && options[this.highlightedIndex]) {
+                    event.preventDefault();
+                    this.selectOption(options[this.highlightedIndex], 'select');
+                    return;
+                }
+                if (this.allowCustomValue && this.searchQuery.trim()) {
+                    event.preventDefault();
+                    this.createCustomLocation(this.searchQuery.trim());
+                }
+                return;
+            }
+            case 'ArrowDown':
+                event.preventDefault();
+                if (!this.isOpen) {
+                    this.toggleDropdown();
+                }
+                else if (options.length > 0) {
+                    this.highlightedIndex = Math.min(options.length - 1, this.highlightedIndex + 1);
+                    this.scrollToHighlighted();
+                }
+                return;
+            case 'ArrowUp':
+                event.preventDefault();
+                if (this.isOpen && options.length > 0) {
+                    this.highlightedIndex = Math.max(0, this.highlightedIndex - 1);
+                    this.scrollToHighlighted();
+                }
+                return;
+            case 'Escape':
+                if (this.isOpen) {
+                    event.preventDefault();
+                    this.closeDropdown();
+                }
+                return;
+            case 'Backspace':
+                if (this.multiSelect && !this.searchQuery && this.selectedIds.size > 0) {
+                    const last = Array.from(this.selectedIds).at(-1);
+                    if (last) {
+                        this.removeSelectedId(last, 'remove');
+                    }
+                }
+                return;
+            default:
+                return;
+        }
+    };
+    scrollToHighlighted() {
+        const optionElement = this.optionsRefs[this.highlightedIndex];
+        optionElement?.scrollIntoView({ block: 'nearest' });
+    }
+    selectOption(option, trigger) {
+        if (option.disabled)
+            return;
+        if (this.multiSelect) {
+            const next = new Set(this.selectedIds);
+            if (next.has(option.idStr)) {
+                next.delete(option.idStr);
+            }
+            else {
+                if (this.maxSelections > 0 && next.size >= this.maxSelections) {
+                    return;
+                }
+                next.add(option.idStr);
+            }
+            this.selectedIds = next;
+        }
+        else {
+            this.selectedIds = new Set([option.idStr]);
+            this.closeDropdown();
+        }
+        this.touchRecent(option.idStr);
+        this.syncValueAndEmit(trigger);
+    }
+    removeSelectedId(id, trigger) {
+        if (!this.selectedIds.has(id))
+            return;
+        const next = new Set(this.selectedIds);
+        next.delete(id);
+        this.selectedIds = next;
+        this.syncValueAndEmit(trigger);
+    }
+    clearSelection = (event) => {
+        event?.stopPropagation();
+        if (this.selectedIds.size === 0)
+            return;
+        this.selectedIds = new Set();
+        this.syncValueAndEmit('clear');
+    };
+    toggleFavorite = (id, event) => {
+        event.stopPropagation();
+        const exists = this.favoriteIds.includes(id);
+        this.favoriteIds = exists ? this.favoriteIds.filter(x => x !== id) : [id, ...this.favoriteIds].slice(0, 50);
+        this.persistCurrentState();
+    };
+    touchRecent(id) {
+        this.recentIds = [id, ...this.recentIds.filter(x => x !== id)].slice(0, 50);
+        this.persistCurrentState();
+    }
+    persistCurrentState() {
+        if (!this.persistState || typeof localStorage === 'undefined')
+            return;
+        try {
+            localStorage.setItem(this.storageKey, JSON.stringify({ recentIds: this.recentIds, favoriteIds: this.favoriteIds }));
+        }
+        catch {
+            // ignore storage errors
+        }
+    }
+    restorePersistentState() {
+        if (!this.persistState || typeof localStorage === 'undefined')
+            return;
+        try {
+            const raw = localStorage.getItem(this.storageKey);
+            if (!raw)
+                return;
+            const parsed = JSON.parse(raw);
+            this.recentIds = Array.isArray(parsed?.recentIds) ? parsed.recentIds.map((x) => String(x)).slice(0, 50) : [];
+            this.favoriteIds = Array.isArray(parsed?.favoriteIds) ? parsed.favoriteIds.map((x) => String(x)).slice(0, 50) : [];
+        }
+        catch {
+            this.recentIds = [];
+            this.favoriteIds = [];
+        }
+    }
+    syncValueAndEmit(trigger) {
+        const selectedIds = Array.from(this.selectedIds);
+        this.value = this.multiSelect ? selectedIds.join(',') : selectedIds[0] || '';
+        this.locationChange.emit({
+            value: this.value,
+            selected: this.selectedOptions,
+            trigger,
+            query: this.searchQuery,
+        });
+    }
+    createCustomLocation(label) {
+        const id = `custom:${label.toLowerCase().replace(/\s+/g, '-')}`;
+        const custom = {
+            id,
+            label,
+            type: 'custom',
+        };
+        this.locationCreate.emit(custom);
+        const normalized = this.normalizeOptions([custom]);
+        this.remoteOptions = [...normalized, ...this.remoteOptions.filter(o => o.idStr !== id)];
+        if (normalized[0]) {
+            this.selectOption(normalized[0], 'select');
+        }
+    }
+    getDisplayText() {
+        const selected = this.selectedOptions;
+        if (selected.length === 0)
+            return this.placeholder;
+        if (!this.multiSelect) {
+            return this.showPath ? selected[0].pathLabels.join(' / ') : selected[0].label;
+        }
+        if (selected.length === 1) {
+            return this.showPath ? selected[0].pathLabels.join(' / ') : selected[0].label;
+        }
+        return `${selected.length} locations selected`;
+    }
+    renderSelectedChips() {
+        if (!this.multiSelect || this.selectedOptions.length === 0)
+            return null;
+        const maxVisible = 3;
+        const visible = this.selectedOptions.slice(0, maxVisible);
+        const remaining = this.selectedOptions.length - visible.length;
+        return (h("div", { class: "selected-chips" }, visible.map(option => (h("span", { class: "selected-chip", key: `chip-${option.idStr}` }, h("span", { class: "chip-label" }, this.showPath ? option.pathLabels.join(' / ') : option.label), h("ui-button", { class: "chip-remove", onButtonClick: () => this.removeSelectedId(option.idStr, 'remove'), "aria-label": `Remove ${option.label}`, variant: "plain", icon: "x", iconLibrary: "lucide", iconOnly: true })))), remaining > 0 && h("span", { class: "selected-more" }, "+", remaining)));
+    }
+    renderOption(option, index) {
+        const selected = this.selectedIds.has(option.idStr);
+        const highlighted = this.highlightedIndex === index;
+        const favorite = this.favoriteIds.includes(option.idStr);
+        const label = this.showPath ? option.pathLabels.join(' / ') : option.label;
+        return (h("div", { class: {
+                'location-option': true,
+                'location-option-selected': selected,
+                'location-option-highlighted': highlighted,
+                'location-option-disabled': !!option.disabled,
+            }, role: "option", "aria-selected": selected ? 'true' : 'false', onMouseEnter: () => (this.highlightedIndex = index), onClick: () => this.selectOption(option, 'select'), ref: el => (this.optionsRefs[index] = el) }, h("div", { class: "location-option-main" }, this.multiSelect && h("ui-icon", { name: selected ? 'check-square' : 'square', library: "lucide", size: "18px" }), h("div", { class: "location-option-text" }, h("span", { class: "location-label" }, label), option.code && h("span", { class: "location-code" }, option.code))), h("div", { class: "location-option-meta" }, this.showTypeBadge && h("span", { class: "location-type" }, this.typeLabelMap[option.type]), this.showFavorites && (h("ui-button", { class: { 'fav-btn': true, active: favorite }, onButtonClick: e => this.toggleFavorite(option.idStr, e.detail), "aria-label": favorite ? `Remove ${option.label} from favorites` : `Add ${option.label} to favorites`, variant: "plain", icon: "star", iconLibrary: "lucide", iconOnly: true })))));
+    }
+    render() {
+        const filtered = this.filteredOptions;
+        const hasSelection = this.selectedIds.size > 0;
+        const canCreate = this.allowCustomValue && !!this.searchQuery.trim() && filtered.length === 0;
+        return (h("div", { key: '0d1270c7b8941a54d23f12b336a40248127a9515', class: { 'location-dropdown': true, open: this.isOpen, disabled: this.disabled } }, h("div", { key: '454a4fb32bdfcbb31f61ab24f69dd720f1d7975c', class: "location-trigger", role: "combobox", "aria-expanded": this.isOpen ? 'true' : 'false', "aria-haspopup": "listbox", tabIndex: this.disabled ? -1 : 0, onClick: this.toggleDropdown, onKeyDown: this.handleKeyDown }, h("span", { key: '06e96ca6b9ce142e1c6eb4145d75de7c6753d0aa', class: { 'trigger-text': true, placeholder: !hasSelection } }, this.getDisplayText()), h("div", { key: '75bf60390f1983473a30b6c7fa6906d7bd39a99d', class: "trigger-icons" }, hasSelection && this.clearable && !this.disabled && (h("ui-button", { key: '274b970b60c84e37ba60ef76a226d8dffd21f85b', class: "clear-btn", onButtonClick: this.clearSelection, "aria-label": "Clear selected locations", variant: "plain", icon: "x", iconLibrary: "lucide", iconOnly: true })), h("ui-icon", { key: '872eb5b33bb7c84ebdf68d0685af115d78b893ba', name: "chevron-down", library: "lucide", size: "16px", class: { arrow: true, open: this.isOpen } }))), this.renderSelectedChips(), this.isOpen && (h("div", { key: '5285b7a36ec106df13afbfde4bae0127567dd459', class: { menu: true, top: this.dropdownPosition === 'top' }, role: "listbox", ref: el => (this.menuElement = el), style: {
+                maxHeight: `${this.maxHeight}px`,
+                left: `${this.menuLeft}px`,
+                width: `${this.menuWidth}px`,
+                position: 'fixed',
+                zIndex: '10020',
+                top: `${this.menuTop}px`,
+            } }, this.searchable && (h("div", { key: '96c9247325ad38fa7ad1378141a8de53fe23c062', class: "search-row" }, h("ui-input", { key: '16e6a0e35ae37de129b1812ecd7ed7c46c3b84c3', ref: el => (this.searchInputRef = el), class: "search-input", value: this.searchQuery, placeholder: this.searchPlaceholder, onInputChange: (e) => this.onSearchInput_Custom(e.detail), onKeyDown: this.handleKeyDown, variant: "plain" }))), this.loading && h("div", { key: '8be3bb6ff2b546d4b77dedea4efdced3cf456a73', class: "status loading" }, "Loading locations..."), !this.loading && this.loadError && h("div", { key: '2990bc4eb6413fc9ad02ec4214af9701f3ddb63f', class: "status error" }, this.loadError), !this.loading && filtered.length > 0 && (h("div", { key: 'cc1da47a2b1e0703c8f9cf3b12f66c53f4c72215', class: "options-list" }, filtered.map((option, index) => this.renderOption(option, index)))), !this.loading && filtered.length === 0 && !canCreate && h("div", { key: '74871de825014986333f513ab8a78eee94efffca', class: "status empty" }, "No locations found"), canCreate && (h("ui-button", { key: '0fd041bedf71502bea54a09d658669ccd3bcc68f', class: "create-btn", onButtonClick: () => this.createCustomLocation(this.searchQuery.trim()), variant: "plain", align: "start", fullWidth: true, icon: "plus", iconLibrary: "lucide", label: `Create "${this.searchQuery.trim()}"` })), (this.showFavorites || this.showRecent) && !this.searchQuery && (h("div", { key: '5a4c6ecc6768d6a6ee8b3731e4d12b845c936a8f', class: "footer-meta" }, this.showFavorites && h("span", { key: 'e2cac6f8adb895ba9f262be9924ea9a5619c95e3' }, "Favorites: ", this.favoriteIds.length), this.showRecent && h("span", { key: 'f541571f8f6dd69ce531f7a54cc8cd6d06b3d8a8' }, "Recent: ", this.recentIds.length)))))));
+    }
+    static get is() { return "ui-smart-location-dropdown"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["smart-location-dropdown.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["smart-location-dropdown.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "options": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | LocationOption[]",
+                    "resolved": "LocationOption[] | string",
+                    "references": {
+                        "LocationOption": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/smart-location-dropdown/types.ts::LocationOption",
+                            "referenceLocation": "LocationOption"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Location options as JSON string or array"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "options",
+                "defaultValue": "[]"
+            },
+            "value": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Selected value(s): single => 'id', multi => comma-separated ids"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value",
+                "defaultValue": "''"
+            },
+            "multiSelect": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Enables multiple location selection"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "multi-select",
+                "defaultValue": "false"
+            },
+            "placeholder": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Placeholder text for trigger"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "placeholder",
+                "defaultValue": "'Select location'"
+            },
+            "searchable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Enables searching"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "searchable",
+                "defaultValue": "true"
+            },
+            "searchPlaceholder": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Search placeholder"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "search-placeholder",
+                "defaultValue": "'Search country, state, city, postal code...'"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Disables control"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "clearable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Show clear action"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "clearable",
+                "defaultValue": "true"
+            },
+            "maxHeight": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Maximum dropdown height in px"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "max-height",
+                "defaultValue": "360"
+            },
+            "debounceMs": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Search debounce in ms"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "debounce-ms",
+                "defaultValue": "250"
+            },
+            "maxSelections": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Max selected items in multi mode (0 = no limit)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "max-selections",
+                "defaultValue": "0"
+            },
+            "resultLimit": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Max results rendered"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "result-limit",
+                "defaultValue": "250"
+            },
+            "showRecent": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Show recent selections section"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-recent",
+                "defaultValue": "true"
+            },
+            "showFavorites": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Show favorites section"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-favorites",
+                "defaultValue": "true"
+            },
+            "persistState": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Persist recent/favorites in local storage"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "persist-state",
+                "defaultValue": "true"
+            },
+            "storageKey": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Storage key for persistent state"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "storage-key",
+                "defaultValue": "'ui-smart-location-dropdown-state'"
+            },
+            "showPath": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Display full hierarchy path in options and selected tags"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-path",
+                "defaultValue": "true"
+            },
+            "showTypeBadge": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Show location type badges"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-type-badge",
+                "defaultValue": "true"
+            },
+            "allowCustomValue": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Allow custom value creation from search"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "allow-custom-value",
+                "defaultValue": "false"
+            },
+            "ignoreParentPosition": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Force menu position to ignore transformed/positioned parent offsets"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "ignore-parent-position",
+                "defaultValue": "true"
+            },
+            "portal": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Portal menu to document.body (off by default to preserve shadow styling)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "portal",
+                "defaultValue": "false"
+            },
+            "loadLocations": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "LocationLoader",
+                    "resolved": "(query: string) => Promise<LocationOption[]>",
+                    "references": {
+                        "LocationLoader": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/smart-location-dropdown/types.ts::LocationLoader",
+                            "referenceLocation": "LocationLoader"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Optional async remote location loader"
+                },
+                "getter": false,
+                "setter": false
+            },
+            "remoteMinChars": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Minimum characters required before async loader executes"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "remote-min-chars",
+                "defaultValue": "2"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "isOpen": {},
+            "parsedOptions": {},
+            "remoteOptions": {},
+            "selectedIds": {},
+            "searchQuery": {},
+            "loading": {},
+            "loadError": {},
+            "highlightedIndex": {},
+            "menuLeft": {},
+            "menuTop": {},
+            "menuWidth": {},
+            "dropdownPosition": {},
+            "recentIds": {},
+            "favoriteIds": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "locationChange",
+                "name": "locationChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "LocationSelectionChangeEvent",
+                    "resolved": "LocationSelectionChangeEvent",
+                    "references": {
+                        "LocationSelectionChangeEvent": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/smart-location-dropdown/types.ts::LocationSelectionChangeEvent",
+                            "referenceLocation": "LocationSelectionChangeEvent"
+                        }
+                    }
+                }
+            }, {
+                "method": "locationSearch",
+                "name": "locationSearch",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "LocationSearchEvent",
+                    "resolved": "LocationSearchEvent",
+                    "references": {
+                        "LocationSearchEvent": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/smart-location-dropdown/types.ts::LocationSearchEvent",
+                            "referenceLocation": "LocationSearchEvent"
+                        }
+                    }
+                }
+            }, {
+                "method": "locationOpen",
+                "name": "locationOpen",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "locationClose",
+                "name": "locationClose",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "locationLoadError",
+                "name": "locationLoadError",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "{ query: string; message: string }",
+                    "resolved": "{ query: string; message: string; }",
+                    "references": {}
+                }
+            }, {
+                "method": "locationCreate",
+                "name": "locationCreate",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "LocationOption",
+                    "resolved": "LocationOption",
+                    "references": {
+                        "LocationOption": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/smart-location-dropdown/types.ts::LocationOption",
+                            "referenceLocation": "LocationOption"
+                        }
+                    }
+                }
+            }];
+    }
+    static get elementRef() { return "hostElement"; }
+    static get watchers() {
+        return [{
+                "propName": "options",
+                "methodName": "watchOptions"
+            }, {
+                "propName": "value",
+                "methodName": "watchValue"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "click",
+                "method": "handleOutsideClick",
+                "target": "document",
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "resize",
+                "method": "handleResize",
+                "target": "window",
+                "capture": false,
+                "passive": true
+            }, {
+                "name": "scroll",
+                "method": "handleScroll",
+                "target": "window",
+                "capture": true,
+                "passive": true
+            }];
+    }
+}