@smilodon/core 1.0.11 → 1.0.13

package/dist/index.umd.js

@@ -965,10 +965,18 @@
             this._hasError = false;
             this._errorMessage = '';
             this._boundArrowClick = null;
+            console.log('[EnhancedSelect] Constructor called');
+            // WORKAROUND: Force display style on host element for Angular compatibility
+            // Angular's rendering seems to not apply :host styles correctly in some cases
+            this.style.display = 'block';
+            this.style.width = '100%';
+            console.log('[EnhancedSelect] Forced host display styles');
             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,
@@ -988,20 +996,34 @@
                 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');
             this._assembleDOM();
+            console.log('[EnhancedSelect] DOM assembled');
             this._initializeStyles();
+            console.log('[EnhancedSelect] Styles initialized');
             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');
             // Load initial data if server-side is enabled
             if (this._config.serverSide.enabled && this._config.serverSide.initialSelectedValues) {
                 this._loadInitialSelectedItems();
@@ -1010,6 +1032,7 @@
             if (this._config.callbacks.onOpen) {
                 this._config.callbacks.onOpen();
             }
+            console.log('[EnhancedSelect] connectedCallback complete');
         }
         disconnectedCallback() {
             // Cleanup observers
@@ -1107,22 +1130,43 @@
             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');
@@ -1279,39 +1323,19 @@
         right: 0;
         margin-top: 4px;
         max-height: 300px;
-        display: flex;
-        flex-direction: column;
+        overflow: hidden;
         background: var(--select-dropdown-bg, white);
         border: 1px solid var(--select-dropdown-border, #ccc);
         border-radius: var(--select-border-radius, 4px);
         box-shadow: var(--select-dropdown-shadow, 0 4px 6px rgba(0,0,0,0.1));
         z-index: var(--select-dropdown-z-index, 1000);
-        transition: max-height 0.3s ease-in-out;
       }
       
       .options-container {
         position: relative;
+        max-height: 300px;
+        overflow: auto;
         transition: opacity 0.2s ease-in-out;
-        overflow-y: auto;
-        flex: 1;
-      }
-
-      .expand-toggle {
-        padding: 8px;
-        text-align: center;
-        background: #f9fafb;
-        border-top: 1px solid #e5e7eb;
-        cursor: pointer;
-        font-size: 12px;
-        color: #6b7280;
-        font-weight: 500;
-        transition: background 0.2s;
-        flex-shrink: 0;
-      }
-
-      .expand-toggle:hover {
-        background: #f3f4f6;
-        color: #374151;
       }
 
       .option {
@@ -1472,7 +1496,11 @@
         min-height: 44px;
       }
     `;
+            console.log('[EnhancedSelect] _initializeStyles: Created style element, content length:', style.textContent?.length || 0);
+            console.log('[EnhancedSelect] _initializeStyles: Appending style to shadow root...');
             this._shadow.appendChild(style);
+            console.log('[EnhancedSelect] _initializeStyles: Style appended, shadow root children:', this._shadow.children.length);
+            console.log('[EnhancedSelect] _initializeStyles: Shadow root has style element:', !!this._shadow.querySelector('style'));
         }
         _attachEventListeners() {
             // Arrow click handler
@@ -1574,13 +1602,6 @@
                 return;
             this._state.isOpen = true;
             this._dropdown.style.display = 'block';
-            // Set initial height based on expandable config
-            if (this._config.expandable.enabled) {
-                const height = this._state.isExpanded
-                    ? (this._config.expandable.expandedHeight || '500px')
-                    : (this._config.expandable.collapsedHeight || '300px');
-                this._dropdown.style.maxHeight = height;
-            }
             this._input.setAttribute('aria-expanded', 'true');
             this._updateArrowRotation();
             // Clear search query when opening to show all options
@@ -2055,21 +2076,27 @@
          * 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
@@ -2089,8 +2116,10 @@
             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
@@ -2254,11 +2283,21 @@
          * 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);
             }
             // 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
@@ -2271,6 +2310,7 @@
             // 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) {
@@ -2278,6 +2318,7 @@
                 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);
@@ -2286,6 +2327,7 @@
             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';
@@ -2315,6 +2357,7 @@
             }
             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
@@ -2331,6 +2374,7 @@
                     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';
@@ -2341,6 +2385,7 @@
                         empty.textContent = 'No options available';
                     }
                     this._optionsContainer.appendChild(empty);
+                    console.log('[EnhancedSelect] Added empty state');
                 }
             }
             // Append Busy Indicator if busy
@@ -2358,41 +2403,13 @@
                     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();
             }
-            // Render Expand Button if enabled
-            if (this._config.expandable.enabled) {
-                this._renderExpandButton();
-            }
-        }
-        _renderExpandButton() {
-            const button = document.createElement('div');
-            button.className = 'expand-toggle';
-            button.textContent = this._state.isExpanded
-                ? (this._config.expandable.collapseLabel || 'Show less')
-                : (this._config.expandable.expandLabel || 'Show more');
-            button.addEventListener('click', (e) => {
-                e.stopPropagation(); // Prevent closing dropdown
-                this._toggleExpand();
-            });
-            this._dropdown.appendChild(button);
-        }
-        _toggleExpand() {
-            this._state.isExpanded = !this._state.isExpanded;
-            const height = this._state.isExpanded
-                ? (this._config.expandable.expandedHeight || '500px')
-                : (this._config.expandable.collapsedHeight || '300px');
-            this._dropdown.style.maxHeight = height;
-            // Re-render button to update label
-            const existingButton = this._dropdown.querySelector('.expand-toggle');
-            if (existingButton) {
-                existingButton.textContent = this._state.isExpanded
-                    ? (this._config.expandable.collapseLabel || 'Show less')
-                    : (this._config.expandable.expandLabel || 'Show more');
-            }
+            console.log('[EnhancedSelect] _renderOptions complete, optionsContainer children:', this._optionsContainer.children.length);
         }
         _renderSingleOption(item, index, getValue, getLabel) {
             const option = document.createElement('div');
@@ -2400,6 +2417,7 @@
             option.id = `${this._uniqueId}-option-${index}`;
             const value = getValue(item);
             const label = getLabel(item);
+            console.log('[EnhancedSelect] Rendering option', index, ':', { value, label });
             option.textContent = label;
             option.dataset.value = String(value);
             option.dataset.index = String(index); // Also useful for debugging/selectors
@@ -2416,6 +2434,7 @@
                 this._selectOption(index);
             });
             this._optionsContainer.appendChild(option);
+            console.log('[EnhancedSelect] Option', index, 'appended to optionsContainer');
         }
         _addLoadMoreTrigger() {
             const container = document.createElement('div');