tyrell-components 1.0.0-RC7 → 1.0.0-RC8

package/lib/components/multiselect.js

@@ -42,6 +42,7 @@
  */
 import { ensureStyles } from '../utils/styles.js';
 import { multiselectStyles } from '../styles/multiselect.js';
+import { getLoaderSvg } from '../utils/loader-registry.js';
 import { lockScroll, unlockScroll } from '../utils/scroll-lock.js';
 import { isMobileTouch } from '../utils/mobile.js';
 import { TyComponent } from '../base/ty-component.js';
@@ -90,19 +91,11 @@ const CHEVRON_DOWN_SVG = `<svg viewBox="0 0 20 20" fill="currentColor">
  * Ty Multiselect Component
  */
 export class TyMultiselect extends TyComponent {
-    // Debug: Log when expandedSection changes
-    set expandedSection(value) {
-        this._state.expandedSection = value;
-    }
-    get expandedSection() {
-        return this._state.expandedSection;
-    }
     constructor() {
         super(); // TyComponent handles attachInternals() and attachShadow()
         // ============================================================================
         // INTERNAL STATE
         // ============================================================================
-        this._value = '';
         this._name = '';
         this._placeholder = 'Select options...';
         this._label = '';
@@ -110,12 +103,11 @@ export class TyMultiselect extends TyComponent {
         this._readonly = false;
         this._required = false;
         this._externalSearch = false;
+        this._loading = false;
         this._scrollLockId = null;
         this._size = 'md';
-        this._flavor = 'neutral';
         this._selectedLabel = 'Selected';
         this._availableLabel = 'Available';
-        this._noSelectionMessage = 'No items selected';
         this._noOptionsMessage = 'No options available';
         // Component state
         this._state = {
@@ -124,12 +116,10 @@ export class TyMultiselect extends TyComponent {
             highlightedIndex: -1,
             filteredTags: [],
             selectedValues: [],
-            mode: 'desktop', // Updated dynamically on render via syncMode()
-            expandedSection: 'selected' // Will be corrected by toggleSection call
+            mode: 'desktop' // Updated dynamically on render via syncMode()
         };
         // Event handler references for cleanup
         this._stubClickHandler = null;
-        this._outsideClickHandler = null;
         this._tagClickHandler = null;
         this._tagDismissHandler = null;
         this._searchInputHandler = null;
@@ -140,6 +130,9 @@ export class TyMultiselect extends TyComponent {
         this._searchDebounceTimer = null;
         // Custom scrollbar for options list
         this._optionsScrollbar = null;
+        // MutationObserver for light-DOM children — re-syncs selected tags' visual
+        // state when consumers swap tag children (external-search refresh pattern).
+        this._childObserver = null;
         const shadow = this.shadowRoot;
         ensureStyles(shadow, { css: multiselectStyles, id: 'ty-multiselect' });
         // DON'T render here - wait for onConnect() to initialize values first
@@ -166,6 +159,16 @@ export class TyMultiselect extends TyComponent {
             this.initializeState();
             // Visual updates happen automatically via onPropertiesChanged
         });
+        // Observe light-DOM children — re-sync selected state when consumers swap
+        // tag children (external-search refresh). syncSelectedTags is idempotent
+        // (only acts on tags whose desired-vs-actual selected state differs), so
+        // spurious firings caused by our own re-slot work are no-ops.
+        this._childObserver = new MutationObserver(() => {
+            if (this._state.selectedValues.length > 0) {
+                this.syncSelectedTags(this._state.selectedValues);
+            }
+        });
+        this._childObserver.observe(this, { childList: true });
     }
     /**
      * Called when component is disconnected from DOM
@@ -192,6 +195,11 @@ export class TyMultiselect extends TyComponent {
         }
         // Cleanup custom scrollbar
         this._destroyOptionsScrollbar();
+        // Disconnect children observer
+        if (this._childObserver) {
+            this._childObserver.disconnect();
+            this._childObserver = null;
+        }
     }
     /**
      * Called when properties change
@@ -201,7 +209,6 @@ export class TyMultiselect extends TyComponent {
         for (const { name, newValue } of changes) {
             switch (name) {
                 case 'value':
-                    this._value = newValue || '';
                     const selectedValues = this.parseValue(newValue);
                     this._state.selectedValues = selectedValues;
                     // CRITICAL: Only sync tags if we're connected and tags exist
@@ -240,9 +247,6 @@ export class TyMultiselect extends TyComponent {
                 case 'size':
                     this._size = newValue;
                     break;
-                case 'flavor':
-                    this._flavor = newValue;
-                    break;
                 case 'debounce':
                     this._debounce = newValue;
                     break;
@@ -252,15 +256,40 @@ export class TyMultiselect extends TyComponent {
                 case 'available-label':
                     this._availableLabel = newValue || 'Available';
                     break;
-                case 'no-selection-message':
-                    this._noSelectionMessage = newValue || 'No items selected';
-                    break;
                 case 'no-options-message':
                     this._noOptionsMessage = newValue || 'No options available';
                     break;
+                case 'loading':
+                    this._loading = newValue;
+                    this.applyLoadingState();
+                    break;
             }
         }
     }
+    /**
+     * Toggle the loading visual state on the open popup.
+     * Replaces the available-options area with a centered spinner; search input stays usable.
+     * Pulls the latest registered loader SVG on each call so registry changes
+     * take effect on the next loading toggle.
+     */
+    applyLoadingState() {
+        const shadow = this.shadowRoot;
+        if (!shadow)
+            return;
+        const svg = this._loading ? getLoaderSvg() : null;
+        shadow.querySelectorAll('.dropdown-options-wrapper').forEach((wrapper) => {
+            wrapper.classList.toggle('loading', this._loading);
+            if (this._loading) {
+                wrapper.setAttribute('aria-busy', 'true');
+                const spinner = wrapper.querySelector('.dropdown-loading-spinner');
+                if (spinner && svg)
+                    spinner.innerHTML = svg;
+            }
+            else {
+                wrapper.removeAttribute('aria-busy');
+            }
+        });
+    }
     /**
      * Get the form value for this component
      * Returns FormData with multiple entries (HTMX standard)
@@ -419,7 +448,6 @@ export class TyMultiselect extends TyComponent {
         const valueStr = newValues.join(',');
         // Only update if changed
         if (JSON.stringify(newValues.sort()) !== JSON.stringify(oldValues.sort())) {
-            const currentPropertyValue = this.getProperty('value');
             // Use TyComponent's property system - this will trigger:
             // 1. onPropertiesChanged() → syncs tags via syncSelectedTags()
             // 2. onPropertiesChanged() → updates placeholder via updateSelectionDisplay()
@@ -561,6 +589,8 @@ export class TyMultiselect extends TyComponent {
         if (searchInput) {
             setTimeout(() => searchInput.focus(), 100);
         }
+        // Lifecycle event (also fires empty search if external-search)
+        this.fireOpenEvent();
     }
     /**
      * Close dropdown dialog (desktop mode)
@@ -619,6 +649,8 @@ export class TyMultiselect extends TyComponent {
             this.updateTagVisibility(allTags, allTags);
             this.clearHighlights(allTags);
         }
+        // Lifecycle event
+        this.fireCloseEvent();
     }
     /**
      * Open mobile modal (mobile mode)
@@ -651,13 +683,12 @@ export class TyMultiselect extends TyComponent {
             // Small delay to ensure dialog is ready
             setTimeout(() => searchInput.focus(), 100);
         }
-        // Initialize sections (available expanded by default)
-        this._state.expandedSection = 'available';
-        this.syncSectionStates();
         // Update state after slots are ready
         requestAnimationFrame(() => {
             this.updateMobileSelectedState();
         });
+        // Lifecycle event (also fires empty search if external-search)
+        this.fireOpenEvent();
     }
     /**
      * Close mobile modal (mobile mode)
@@ -706,6 +737,8 @@ export class TyMultiselect extends TyComponent {
             const allTags = this.getTagElements();
             allTags.forEach(el => el.removeAttribute('hidden'));
         }
+        // Lifecycle event
+        this.fireCloseEvent();
     }
     // ============================================================================
     // EVENT HANDLERS (Phase 5 & 6)
@@ -722,18 +755,6 @@ export class TyMultiselect extends TyComponent {
         }
         this.openDropdown();
     }
-    handleOutsideClick(e) {
-        if (!this._state.open)
-            return;
-        const target = e.target;
-        // Check if click is inside this component (handles shadow DOM retargeting)
-        // Also check composedPath for clicks that originated inside shadow DOM
-        const path = e.composedPath();
-        const clickedInside = path.includes(this);
-        if (!clickedInside) {
-            this.closeDropdown();
-        }
-    }
     handleTagClick(e) {
         const target = e.target;
         // Find the ty-tag element
@@ -799,8 +820,10 @@ export class TyMultiselect extends TyComponent {
         this._state.highlightedIndex = -1;
         // Update visibility
         this.updateTagVisibility(filtered, allTags);
-        // Hide options area if no results
+        // Hide options area if no results (desktop)
         this.updateOptionsVisibility(filtered.length > 0);
+        // Refresh mobile count + empty-state to reflect filtered visibility
+        this.updateMobileSelectedState();
         // Clear highlights
         this.clearHighlights(allTags);
     }
@@ -978,6 +1001,28 @@ export class TyMultiselect extends TyComponent {
             composed: true
         }));
     }
+    /**
+     * Dispatch lifecycle events for popup open/close.
+     * On open with external-search, also fire a `search` event with an empty
+     * query so consumers have a clean hook to reset/refetch the option list.
+     */
+    fireOpenEvent() {
+        this.dispatchEvent(new CustomEvent('open', {
+            detail: { mode: this._state.mode, element: this },
+            bubbles: true,
+            composed: true
+        }));
+        if (this._externalSearch) {
+            this.fireSearchEvent('');
+        }
+    }
+    fireCloseEvent() {
+        this.dispatchEvent(new CustomEvent('close', {
+            detail: { mode: this._state.mode, element: this },
+            bubbles: true,
+            composed: true
+        }));
+    }
     // ============================================================================
     // CHANGE EVENT DISPATCHING (Phase 5)
     // ============================================================================
@@ -1007,6 +1052,8 @@ export class TyMultiselect extends TyComponent {
         else {
             this.renderDesktop();
         }
+        // Loading wrapper is rendered dynamically — re-apply each render
+        this.applyLoadingState();
     }
     /**
      * Setup event listeners
@@ -1068,14 +1115,14 @@ export class TyMultiselect extends TyComponent {
         if (!shadow.querySelector('.multiselect-container')) {
             const stubClasses = this.buildStubClasses();
             const labelHtml = this._label ? `
-        <label class="dropdown-label">
+        <label class="ty-field-label">
           ${this._label}
           ${this._required ? `<span class="required-icon">${REQUIRED_ICON_SVG}</span>` : ''}
         </label>
       ` : '';
             const searchPlaceholder = 'Search...';
             shadow.innerHTML = `
-        <div class="multiselect-container dropdown-mode-mobile">
+        <div class="multiselect-container dropdown-mode-desktop">
           ${labelHtml}
           <div class="dropdown-wrapper">
             <div class="dropdown-stub multiselect-stub ${stubClasses}"
@@ -1105,6 +1152,12 @@ export class TyMultiselect extends TyComponent {
                 <div class="dropdown-options">
                   <slot id="options-slot"></slot>
                 </div>
+                <div class="dropdown-loading" aria-hidden="true">
+                  <slot name="loading">
+                    <span class="dropdown-loading-spinner"></span>
+                    <span class="dropdown-loading-text">Searching…</span>
+                  </slot>
+                </div>
               </div>
             </dialog>
           </div>
@@ -1128,7 +1181,7 @@ export class TyMultiselect extends TyComponent {
         if (!shadow.querySelector('.multiselect-container')) {
             const stubClasses = this.buildStubClasses();
             const labelHtml = this._label ? `
-        <label class="dropdown-label">
+        <label class="ty-field-label">
           ${this._label}
           ${this._required ? `<span class="required-icon">${REQUIRED_ICON_SVG}</span>` : ''}
         </label>
@@ -1179,32 +1232,36 @@ export class TyMultiselect extends TyComponent {
                 <!-- HEADER (matches dropdown.ts) -->
                 ${searchHeaderHtml}
                 
-                <!-- BODY (two sections for multiselect) -->
+                <!-- BODY: pinned selected strip + filter list -->
                 <div class="mobile-body">
-                  
-                  <!-- SELECTED SECTION (collapsed by default) -->
-                  <div class="mobile-selected-section" data-expanded="false" data-empty="true">
+
+                  <!-- SELECTED STRIP (pinned, collapses when empty) -->
+                  <div class="mobile-selected-section" data-empty="true">
                     <div class="section-header">
                       <span class="section-title">${this._selectedLabel} <span class="section-count">(0)</span></span>
-                      <span class="section-chevron">${CHEVRON_DOWN_SVG}</span>
                     </div>
                     <div class="section-content">
                       <slot id="mobile-slot" name="selected"></slot>
-                      <div class="empty-state">${this._noSelectionMessage}</div>
                     </div>
                   </div>
-                  
-                  <!-- AVAILABLE SECTION (expanded by default) -->
-                  <div class="mobile-available-section" data-expanded="true" data-empty="false">
+
+                  <!-- AVAILABLE LIST (always visible, takes remaining space) -->
+                  <div class="mobile-available-section" data-empty="false">
                     <div class="section-header">
                       <span class="section-title">${this._availableLabel}</span>
                     </div>
-                    <div class="section-content">
+                    <div class="section-content dropdown-options-wrapper">
                       <slot id="options-slot"></slot>
                       <div class="empty-state">${this._noOptionsMessage}</div>
+                      <div class="dropdown-loading" aria-hidden="true">
+                        <slot name="loading">
+                          <span class="dropdown-loading-spinner"></span>
+                          <span class="dropdown-loading-text">Searching…</span>
+                        </slot>
+                      </div>
                     </div>
                   </div>
-                  
+
                 </div>
               </div>
             </dialog>
@@ -1228,9 +1285,6 @@ export class TyMultiselect extends TyComponent {
         const searchInput = shadow.querySelector('.mobile-search-input');
         const closeButton = shadow.querySelector('.mobile-close-button');
         const dialog = shadow.querySelector('.mobile-dialog');
-        // Get both section headers
-        const selectedHeader = shadow.querySelector('.mobile-selected-section .section-header');
-        const availableHeader = shadow.querySelector('.mobile-available-section .section-header');
         if (stub) {
             stub.addEventListener('click', (e) => this.handleMobileStubClick(e));
         }
@@ -1242,13 +1296,6 @@ export class TyMultiselect extends TyComponent {
         if (searchInput) {
             searchInput.addEventListener('input', (e) => this.handleSearchInput(e));
         }
-        // Toggle section expansion on header click
-        if (selectedHeader) {
-            selectedHeader.addEventListener('click', () => this.toggleSection('selected'));
-        }
-        if (availableHeader) {
-            availableHeader.addEventListener('click', () => this.toggleSection('available'));
-        }
         // Close button click
         if (closeButton) {
             closeButton.addEventListener('click', () => this.closeMobileModal());
@@ -1294,43 +1341,6 @@ export class TyMultiselect extends TyComponent {
         // It already handles mobile mode for auto-close
         this.handleTagClick(e);
     }
-    /**
-     * Toggle section expansion (mobile only)
-     * Clicking expanded section collapses it and expands the other
-     * Clicking collapsed section expands it and collapses the other
-     */
-    toggleSection(section) {
-        const shadow = this.shadowRoot;
-        const selectedSection = shadow.querySelector('.mobile-selected-section');
-        const availableSection = shadow.querySelector('.mobile-available-section');
-        if (!selectedSection || !availableSection)
-            return;
-        // If clicking already expanded section, collapse it and expand the other
-        if (this._state.expandedSection === section) {
-            const otherSection = section === 'selected' ? 'available' : 'selected';
-            this._state.expandedSection = otherSection;
-        }
-        else {
-            // Expand clicked section
-            this._state.expandedSection = section;
-        }
-        // Update DOM attributes
-        selectedSection.setAttribute('data-expanded', String(this._state.expandedSection === 'selected'));
-        availableSection.setAttribute('data-expanded', String(this._state.expandedSection === 'available'));
-    }
-    /**
-     * Sync section states to DOM without toggle logic
-     */
-    syncSectionStates() {
-        const shadow = this.shadowRoot;
-        const selectedSection = shadow.querySelector('.mobile-selected-section');
-        const availableSection = shadow.querySelector('.mobile-available-section');
-        if (!selectedSection || !availableSection)
-            return;
-        // Update DOM attributes to match current state
-        selectedSection.setAttribute('data-expanded', String(this._state.expandedSection === 'selected'));
-        availableSection.setAttribute('data-expanded', String(this._state.expandedSection === 'available'));
-    }
     /**
      * Update mobile selected section state (collapsed view, empty states, etc.)
      */
@@ -1351,14 +1361,13 @@ export class TyMultiselect extends TyComponent {
             }
         }
         if (availableSection) {
-            const allTags = this.getTagElements();
-            const availableCount = allTags.filter(tag => !tag.hasAttribute('selected')).length;
-            const hasAvailable = availableCount > 0;
-            availableSection.setAttribute('data-empty', String(!hasAvailable));
+            // Count *visible* available tags — tags hidden by search filtering count as 0
+            const visibleAvailable = this.getTagElements().filter(tag => !tag.hasAttribute('selected') && !tag.hasAttribute('hidden')).length;
+            availableSection.setAttribute('data-empty', String(visibleAvailable === 0));
             // Update available header count
             const availableTitleSpan = shadow.querySelector('.mobile-available-section .section-title');
             if (availableTitleSpan) {
-                availableTitleSpan.textContent = `${this._availableLabel} (${availableCount})`;
+                availableTitleSpan.textContent = `${this._availableLabel} (${visibleAvailable})`;
             }
         }
     }
@@ -1415,6 +1424,12 @@ export class TyMultiselect extends TyComponent {
     set disabled(value) {
         this.setProperty('disabled', value);
     }
+    get loading() {
+        return this.getProperty('loading');
+    }
+    set loading(value) {
+        this.setProperty('loading', value);
+    }
     get readonly() {
         return this.getProperty('readonly');
     }
@@ -1562,15 +1577,15 @@ TyMultiselect.properties = {
         visual: true,
         default: 'Available'
     },
-    'no-selection-message': {
-        type: 'string',
-        visual: true,
-        default: 'No items selected'
-    },
     'no-options-message': {
         type: 'string',
         visual: true,
         default: 'No options available'
+    },
+    loading: {
+        type: 'boolean',
+        visual: true,
+        default: false
     }
 };
 // Register the custom element