@smilodon/core 1.3.1 → 1.3.3

package/dist/index.umd.js

@@ -550,13 +550,11 @@
                 component = pooled.instance;
                 pooled.inUse = true;
                 pooled.lastUsedIndex = index;
-                console.log(`[CustomOptionPool] Reusing component for index ${index}`);
             }
             else {
                 // Create new component
                 try {
                     component = factory(item, index);
-                    console.log(`[CustomOptionPool] Created new component for index ${index}`);
                     // Add to pool if under limit
                     const pool = this._pool.get(factoryKey) || [];
                     if (pool.length < this._maxPoolSize) {
@@ -605,7 +603,6 @@
                 const pooled = pool.find(p => p.instance === component);
                 if (pooled) {
                     pooled.inUse = false;
-                    console.log(`[CustomOptionPool] Released component from index ${index}`);
                     break;
                 }
             }
@@ -614,7 +611,6 @@
          * Release all active components
          */
         releaseAll() {
-            console.log(`[CustomOptionPool] Releasing ${this._activeComponents.size} active components`);
             const indices = Array.from(this._activeComponents.keys());
             indices.forEach(index => this.release(index));
         }
@@ -657,7 +653,6 @@
         clear() {
             this.releaseAll();
             this._pool.clear();
-            console.log('[CustomOptionPool] Pool cleared');
         }
         /**
          * Get pool statistics for debugging
@@ -836,7 +831,6 @@
                 });
             }
             this._mountedElements.set(index, option);
-            console.log(`[OptionRenderer] Rendered lightweight option ${index}: ${label}`);
             return option;
         }
         /**
@@ -896,7 +890,6 @@
                         }
                     });
                 }
-                console.log(`[OptionRenderer] Rendered custom component option ${index}: ${label}`);
             }
             catch (error) {
                 console.error(`[OptionRenderer] Failed to render custom component at index ${index}:`, error);
@@ -1494,13 +1487,10 @@
             this._hasError = false;
             this._errorMessage = '';
             this._boundArrowClick = null;
-            console.log('[EnhancedSelect] Constructor called');
             this._shadow = this.attachShadow({ mode: 'open' });
-            console.log('[EnhancedSelect] Shadow root attached:', this._shadow);
             this._uniqueId = `enhanced-select-${Math.random().toString(36).substr(2, 9)}`;
             // Merge global config with component-level config
             this._config = selectConfig.getConfig();
-            console.log('[EnhancedSelect] Config loaded');
             // Initialize state
             this._state = {
                 isOpen: false,
@@ -1520,44 +1510,26 @@
                 lastNotifiedResultCount: 0,
                 isExpanded: false,
             };
-            console.log('[EnhancedSelect] State initialized');
             // Create DOM structure
             this._container = this._createContainer();
-            console.log('[EnhancedSelect] Container created:', this._container);
             this._inputContainer = this._createInputContainer();
-            console.log('[EnhancedSelect] Input container created');
             this._input = this._createInput();
-            console.log('[EnhancedSelect] Input created:', this._input);
             this._arrowContainer = this._createArrowContainer();
-            console.log('[EnhancedSelect] Arrow container created');
             this._dropdown = this._createDropdown();
-            console.log('[EnhancedSelect] Dropdown created');
             this._optionsContainer = this._createOptionsContainer();
-            console.log('[EnhancedSelect] Options container created');
             this._liveRegion = this._createLiveRegion();
-            console.log('[EnhancedSelect] Live region created');
             // Initialize styles BEFORE assembling DOM (order matters in shadow DOM)
             this._initializeStyles();
-            console.log('[EnhancedSelect] Styles initialized');
-            // Initialize option renderer
-            this._initializeOptionRenderer();
-            console.log('[EnhancedSelect] Option renderer initialized');
             this._assembleDOM();
-            console.log('[EnhancedSelect] DOM assembled');
             this._attachEventListeners();
-            console.log('[EnhancedSelect] Event listeners attached');
             this._initializeObservers();
-            console.log('[EnhancedSelect] Observers initialized');
-            console.log('[EnhancedSelect] Constructor complete, shadow DOM children:', this._shadow.children.length);
         }
         connectedCallback() {
-            console.log('[EnhancedSelect] connectedCallback called');
             // WORKAROUND: Force display style on host element for Angular compatibility
             // Angular's rendering seems to not apply :host styles correctly in some cases
             // Must be done in connectedCallback when element is attached to DOM
             this.style.display = 'block';
             this.style.width = '100%';
-            console.log('[EnhancedSelect] Forced host display styles');
             // Load initial data if server-side is enabled
             if (this._config.serverSide.enabled && this._config.serverSide.initialSelectedValues) {
                 this._loadInitialSelectedItems();
@@ -1566,7 +1538,6 @@
             if (this._config.callbacks.onOpen) {
                 this._config.callbacks.onOpen();
             }
-            console.log('[EnhancedSelect] connectedCallback complete');
         }
         disconnectedCallback() {
             // Cleanup observers
@@ -1578,11 +1549,6 @@
                 clearTimeout(this._typeTimeout);
             if (this._searchTimeout)
                 clearTimeout(this._searchTimeout);
-            // Cleanup option renderer
-            if (this._optionRenderer) {
-                this._optionRenderer.unmountAll();
-                console.log('[EnhancedSelect] Option renderer cleaned up');
-            }
             // Cleanup arrow click listener
             if (this._boundArrowClick && this._arrowContainer) {
                 this._arrowContainer.removeEventListener('click', this._boundArrowClick);
@@ -1669,43 +1635,22 @@
             return container;
         }
         _assembleDOM() {
-            console.log('[EnhancedSelect] _assembleDOM: Starting DOM assembly');
-            console.log('[EnhancedSelect] _assembleDOM: Elements to assemble:', {
-                inputContainer: !!this._inputContainer,
-                input: !!this._input,
-                arrowContainer: !!this._arrowContainer,
-                container: !!this._container,
-                dropdown: !!this._dropdown,
-                optionsContainer: !!this._optionsContainer,
-                shadow: !!this._shadow,
-                liveRegion: !!this._liveRegion
-            });
             this._inputContainer.appendChild(this._input);
-            console.log('[EnhancedSelect] _assembleDOM: Appended input to inputContainer');
             if (this._arrowContainer) {
                 this._inputContainer.appendChild(this._arrowContainer);
-                console.log('[EnhancedSelect] _assembleDOM: Appended arrowContainer to inputContainer');
             }
             this._container.appendChild(this._inputContainer);
-            console.log('[EnhancedSelect] _assembleDOM: Appended inputContainer to container');
             this._dropdown.appendChild(this._optionsContainer);
-            console.log('[EnhancedSelect] _assembleDOM: Appended optionsContainer to dropdown');
             this._container.appendChild(this._dropdown);
-            console.log('[EnhancedSelect] _assembleDOM: Appended dropdown to container');
             this._shadow.appendChild(this._container);
-            console.log('[EnhancedSelect] _assembleDOM: Appended container to shadow root');
             if (this._liveRegion) {
                 this._shadow.appendChild(this._liveRegion);
-                console.log('[EnhancedSelect] _assembleDOM: Appended liveRegion to shadow root');
             }
-            console.log('[EnhancedSelect] _assembleDOM: Shadow root children count:', this._shadow.children.length);
-            console.log('[EnhancedSelect] _assembleDOM: Shadow root HTML length:', this._shadow.innerHTML.length);
             // Set ARIA relationships
             const listboxId = `${this._uniqueId}-listbox`;
             this._dropdown.id = listboxId;
             this._input.setAttribute('aria-controls', listboxId);
             this._input.setAttribute('aria-owns', listboxId);
-            console.log('[EnhancedSelect] _assembleDOM: Set ARIA relationships with listboxId:', listboxId);
         }
         _initializeStyles() {
             const style = document.createElement('style');
@@ -2035,8 +1980,6 @@
         min-height: 44px;
       }
     `;
-            console.log('[EnhancedSelect] _initializeStyles: Created style element, content length:', style.textContent?.length || 0);
-            console.log('[EnhancedSelect] _initializeStyles: Shadow root children BEFORE:', this._shadow.children.length);
             // Insert as first child to ensure styles are processed first
             if (this._shadow.firstChild) {
                 this._shadow.insertBefore(style, this._shadow.firstChild);
@@ -2044,9 +1987,6 @@
             else {
                 this._shadow.appendChild(style);
             }
-            console.log('[EnhancedSelect] _initializeStyles: Style inserted, shadow root children AFTER:', this._shadow.children.length);
-            console.log('[EnhancedSelect] _initializeStyles: Shadow root has style element:', !!this._shadow.querySelector('style'));
-            console.log('[EnhancedSelect] _initializeStyles: Style sheet rules:', style.sheet?.cssRules?.length || 'NOT PARSED');
         }
         _attachEventListeners() {
             // Arrow click handler
@@ -2122,40 +2062,6 @@
                 }, { threshold: 0.1 });
             }
         }
-        _initializeOptionRenderer() {
-            const getValue = this._config.serverSide.getValueFromItem || ((item) => item?.value ?? item);
-            const getLabel = this._config.serverSide.getLabelFromItem || ((item) => item?.label ?? String(item));
-            const getDisabled = (item) => item?.disabled ?? false;
-            const rendererConfig = {
-                enableRecycling: true,
-                maxPoolSize: 100,
-                getValue,
-                getLabel,
-                getDisabled,
-                onSelect: (index) => {
-                    this._selectOption(index);
-                },
-                onCustomEvent: (index, eventName, data) => {
-                    console.log(`[EnhancedSelect] Custom event from option ${index}: ${eventName}`, data);
-                    // Emit as a generic event since these aren't in the standard event map
-                    this.dispatchEvent(new CustomEvent('option:custom-event', {
-                        detail: { index, eventName, data },
-                        bubbles: true,
-                        composed: true
-                    }));
-                },
-                onError: (index, error) => {
-                    console.error(`[EnhancedSelect] Error in option ${index}:`, error);
-                    this.dispatchEvent(new CustomEvent('option:mount-error', {
-                        detail: { index, error },
-                        bubbles: true,
-                        composed: true
-                    }));
-                }
-            };
-            this._optionRenderer = new OptionRenderer(rendererConfig);
-            console.log('[EnhancedSelect] Option renderer initialized with config:', rendererConfig);
-        }
         async _loadInitialSelectedItems() {
             if (!this._config.serverSide.fetchSelectedItems || !this._config.serverSide.initialSelectedValues) {
                 return;
@@ -2371,13 +2277,31 @@
             const options = Array.from(this._optionsContainer.children);
             // Clear previous active state
             if (this._state.activeIndex >= 0 && options[this._state.activeIndex]) {
-                options[this._state.activeIndex].setActive(false);
+                const prevOption = options[this._state.activeIndex];
+                // Check if it's a custom SelectOption or a lightweight DOM element
+                if ('setActive' in prevOption && typeof prevOption.setActive === 'function') {
+                    prevOption.setActive(false);
+                }
+                else {
+                    // Lightweight option - remove active class
+                    prevOption.classList.remove('smilodon-option--active');
+                    prevOption.setAttribute('aria-selected', 'false');
+                }
             }
             this._state.activeIndex = index;
             // Set new active state
             if (options[index]) {
-                options[index].setActive(true);
-                options[index].scrollIntoView({ block: 'nearest', behavior: 'smooth' });
+                const option = options[index];
+                // Check if it's a custom SelectOption or a lightweight DOM element
+                if ('setActive' in option && typeof option.setActive === 'function') {
+                    option.setActive(true);
+                }
+                else {
+                    // Lightweight option - add active class
+                    option.classList.add('smilodon-option--active');
+                    option.setAttribute('aria-selected', 'true');
+                }
+                option.scrollIntoView({ block: 'nearest', behavior: 'smooth' });
                 // Announce position for screen readers
                 const total = options.length;
                 this._announce(`Item ${index + 1} of ${total}`);
@@ -2410,10 +2334,23 @@
                     return;
                 }
                 if (!this._state.selectedIndices.has(index)) {
-                    const config = option.getConfig();
-                    this._state.selectedIndices.add(index);
-                    this._state.selectedItems.set(index, config.item);
-                    option.setSelected(true);
+                    // Check if it's a custom SelectOption or a lightweight DOM element
+                    if ('getConfig' in option && typeof option.getConfig === 'function') {
+                        const config = option.getConfig();
+                        this._state.selectedIndices.add(index);
+                        this._state.selectedItems.set(index, config.item);
+                        option.setSelected(true);
+                    }
+                    else {
+                        // Lightweight option - get item from data attribute or state
+                        const item = this._state.loadedItems[index];
+                        if (item) {
+                            this._state.selectedIndices.add(index);
+                            this._state.selectedItems.set(index, item);
+                            option.classList.add('smilodon-option--selected');
+                            option.setAttribute('aria-selected', 'true');
+                        }
+                    }
                 }
             });
             this._updateInputDisplay();
@@ -2656,27 +2593,21 @@
          * Set items to display in the select
          */
         setItems(items) {
-            console.log('[EnhancedSelect] setItems called with', items?.length || 0, 'items');
-            console.log('[EnhancedSelect] Items:', items);
             const previousLength = this._state.loadedItems.length;
             this._state.loadedItems = items;
             // If grouped items exist, flatten them to items
             if (this._state.groupedItems.length > 0) {
                 this._state.loadedItems = this._state.groupedItems.flatMap(group => group.options);
-                console.log('[EnhancedSelect] Flattened grouped items to', this._state.loadedItems.length, 'items');
             }
             const newLength = this._state.loadedItems.length;
-            console.log('[EnhancedSelect] State.loadedItems updated:', previousLength, '→', newLength);
             // When infinite scroll is active (preserveScrollPosition = true),
             // we need to maintain scroll position during the update
             if (this._state.preserveScrollPosition && this._dropdown) {
                 const targetScrollTop = this._state.lastScrollPosition;
-                console.log('[EnhancedSelect] Preserving scroll position:', targetScrollTop);
                 // Only clear loading if we actually got more items
                 if (newLength > previousLength) {
                     this._state.isBusy = false;
                 }
-                console.log('[EnhancedSelect] Calling _renderOptions (with scroll preservation)...');
                 this._renderOptions();
                 // Restore the exact scrollTop we had before loading
                 // so the previously visible items stay in place and
@@ -2696,10 +2627,8 @@
             else {
                 // Normal update - just render normally
                 this._state.isBusy = false;
-                console.log('[EnhancedSelect] Calling _renderOptions (normal)...');
                 this._renderOptions();
             }
-            console.log('[EnhancedSelect] setItems complete');
         }
         /**
          * Set grouped items
@@ -2863,26 +2792,11 @@
          * Render options based on current state
          */
         _renderOptions() {
-            console.log('[EnhancedSelect] _renderOptions called');
-            console.log('[EnhancedSelect] State:', {
-                loadedItems: this._state.loadedItems.length,
-                groupedItems: this._state.groupedItems.length,
-                isOpen: this._state.isOpen,
-                isSearching: this._state.isSearching,
-                searchQuery: this._state.searchQuery,
-                isBusy: this._state.isBusy
-            });
             // Cleanup observer
             if (this._loadMoreTrigger && this._intersectionObserver) {
                 this._intersectionObserver.unobserve(this._loadMoreTrigger);
             }
-            // Cleanup all rendered options (including custom components)
-            if (this._optionRenderer) {
-                this._optionRenderer.unmountAll();
-                console.log('[EnhancedSelect] Unmounted all option components');
-            }
             // Clear options container
-            console.log('[EnhancedSelect] Clearing options container, previous children:', this._optionsContainer.children.length);
             this._optionsContainer.innerHTML = '';
             // Ensure dropdown only contains options container (cleanup legacy direct children)
             // We need to preserve optionsContainer, so we can't just clear dropdown.innerHTML
@@ -2895,7 +2809,6 @@
             // Ensure dropdown is visible if we are rendering options
             if (this._state.isOpen && this._dropdown.style.display === 'none') {
                 this._dropdown.style.display = 'block';
-                console.log('[EnhancedSelect] Dropdown display set to block');
             }
             // Show searching state (exclusive state)
             if (this._state.isSearching) {
@@ -2903,7 +2816,6 @@
                 searching.className = 'searching-state';
                 searching.textContent = 'Searching...';
                 this._optionsContainer.appendChild(searching);
-                console.log('[EnhancedSelect] Added searching state');
                 return;
             }
             const getValue = this._config.serverSide.getValueFromItem || ((item) => item?.value ?? item);
@@ -2912,7 +2824,6 @@
             const query = this._state.searchQuery.toLowerCase();
             // Handle Grouped Items Rendering (when no search query)
             if (this._state.groupedItems.length > 0 && !query) {
-                console.log('[EnhancedSelect] Rendering grouped items:', this._state.groupedItems.length, 'groups');
                 this._state.groupedItems.forEach(group => {
                     const header = document.createElement('div');
                     header.className = 'group-header';
@@ -2942,7 +2853,6 @@
             }
             else {
                 // Normal rendering (flat list or filtered)
-                console.log('[EnhancedSelect] Rendering flat list:', this._state.loadedItems.length, 'items');
                 let hasRenderedItems = false;
                 this._state.loadedItems.forEach((item, index) => {
                     // Apply filter if query exists
@@ -2959,7 +2869,6 @@
                     hasRenderedItems = true;
                     this._renderSingleOption(item, index, getValue, getLabel);
                 });
-                console.log('[EnhancedSelect] Rendered', hasRenderedItems ? 'items' : 'no items');
                 if (!hasRenderedItems && !this._state.isBusy) {
                     const empty = document.createElement('div');
                     empty.className = 'empty-state';
@@ -2970,7 +2879,6 @@
                         empty.textContent = 'No options available';
                     }
                     this._optionsContainer.appendChild(empty);
-                    console.log('[EnhancedSelect] Added empty state');
                 }
             }
             // Append Busy Indicator if busy
@@ -2988,33 +2896,34 @@
                     busyBucket.appendChild(message);
                 }
                 this._optionsContainer.appendChild(busyBucket);
-                console.log('[EnhancedSelect] Added busy bucket');
             }
             // Append Load More Trigger (Button or Sentinel) if enabled and not busy
             else if ((this._config.loadMore.enabled || this._config.infiniteScroll.enabled) && this._state.loadedItems.length > 0) {
                 this._addLoadMoreTrigger();
             }
-            console.log('[EnhancedSelect] _renderOptions complete, optionsContainer children:', this._optionsContainer.children.length);
         }
         _renderSingleOption(item, index, getValue, getLabel) {
-            if (!this._optionRenderer) {
-                console.error('[EnhancedSelect] Option renderer not initialized');
-                return;
-            }
-            // Check if selected
+            const option = document.createElement('div');
+            option.className = 'option';
+            option.id = `${this._uniqueId}-option-${index}`;
+            const value = getValue(item);
+            const label = getLabel(item);
+            option.textContent = label;
+            option.dataset.value = String(value);
+            option.dataset.index = String(index); // Also useful for debugging/selectors
+            // Check if selected using selectedItems map
             const isSelected = this._state.selectedIndices.has(index);
-            const isFocused = this._state.activeIndex === index;
-            console.log('[EnhancedSelect] Rendering option', index, ':', {
-                value: getValue(item),
-                label: getLabel(item),
-                isSelected,
-                isFocused,
-                hasCustomComponent: !!item.optionComponent
+            if (isSelected) {
+                option.classList.add('selected');
+                option.setAttribute('aria-selected', 'true');
+            }
+            else {
+                option.setAttribute('aria-selected', 'false');
+            }
+            option.addEventListener('click', () => {
+                this._selectOption(index);
             });
-            // Use the OptionRenderer to render both lightweight and custom component options
-            const optionElement = this._optionRenderer.render(item, index, isSelected, isFocused, this._uniqueId);
-            this._optionsContainer.appendChild(optionElement);
-            console.log('[EnhancedSelect] Option', index, 'appended to optionsContainer');
+            this._optionsContainer.appendChild(option);
         }
         _addLoadMoreTrigger() {
             const container = document.createElement('div');
@@ -3847,7 +3756,6 @@
         const start = performance.now();
         const result = await fn();
         const duration = performance.now() - start;
-        console.log(`[Perf] ${label}: ${duration.toFixed(2)}ms`);
         return { result, duration };
     }
     /**
@@ -3857,7 +3765,6 @@
         const start = performance.now();
         const result = fn();
         const duration = performance.now() - start;
-        console.log(`[Perf] ${label}: ${duration.toFixed(2)}ms`);
         return { result, duration };
     }