@smilodon/core 1.3.2 → 1.3.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.cjs +0 -82
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +0 -82
- package/dist/index.js.map +1 -1
- package/dist/index.min.js +1 -1
- package/dist/index.min.js.map +1 -1
- package/dist/index.umd.js +0 -82
- package/dist/index.umd.js.map +1 -1
- package/dist/index.umd.min.js +1 -1
- package/dist/index.umd.min.js.map +1 -1
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -544,13 +544,11 @@ class CustomOptionPool {
|
|
|
544
544
|
component = pooled.instance;
|
|
545
545
|
pooled.inUse = true;
|
|
546
546
|
pooled.lastUsedIndex = index;
|
|
547
|
-
console.log(`[CustomOptionPool] Reusing component for index ${index}`);
|
|
548
547
|
}
|
|
549
548
|
else {
|
|
550
549
|
// Create new component
|
|
551
550
|
try {
|
|
552
551
|
component = factory(item, index);
|
|
553
|
-
console.log(`[CustomOptionPool] Created new component for index ${index}`);
|
|
554
552
|
// Add to pool if under limit
|
|
555
553
|
const pool = this._pool.get(factoryKey) || [];
|
|
556
554
|
if (pool.length < this._maxPoolSize) {
|
|
@@ -599,7 +597,6 @@ class CustomOptionPool {
|
|
|
599
597
|
const pooled = pool.find(p => p.instance === component);
|
|
600
598
|
if (pooled) {
|
|
601
599
|
pooled.inUse = false;
|
|
602
|
-
console.log(`[CustomOptionPool] Released component from index ${index}`);
|
|
603
600
|
break;
|
|
604
601
|
}
|
|
605
602
|
}
|
|
@@ -608,7 +605,6 @@ class CustomOptionPool {
|
|
|
608
605
|
* Release all active components
|
|
609
606
|
*/
|
|
610
607
|
releaseAll() {
|
|
611
|
-
console.log(`[CustomOptionPool] Releasing ${this._activeComponents.size} active components`);
|
|
612
608
|
const indices = Array.from(this._activeComponents.keys());
|
|
613
609
|
indices.forEach(index => this.release(index));
|
|
614
610
|
}
|
|
@@ -651,7 +647,6 @@ class CustomOptionPool {
|
|
|
651
647
|
clear() {
|
|
652
648
|
this.releaseAll();
|
|
653
649
|
this._pool.clear();
|
|
654
|
-
console.log('[CustomOptionPool] Pool cleared');
|
|
655
650
|
}
|
|
656
651
|
/**
|
|
657
652
|
* Get pool statistics for debugging
|
|
@@ -830,7 +825,6 @@ class OptionRenderer {
|
|
|
830
825
|
});
|
|
831
826
|
}
|
|
832
827
|
this._mountedElements.set(index, option);
|
|
833
|
-
console.log(`[OptionRenderer] Rendered lightweight option ${index}: ${label}`);
|
|
834
828
|
return option;
|
|
835
829
|
}
|
|
836
830
|
/**
|
|
@@ -890,7 +884,6 @@ class OptionRenderer {
|
|
|
890
884
|
}
|
|
891
885
|
});
|
|
892
886
|
}
|
|
893
|
-
console.log(`[OptionRenderer] Rendered custom component option ${index}: ${label}`);
|
|
894
887
|
}
|
|
895
888
|
catch (error) {
|
|
896
889
|
console.error(`[OptionRenderer] Failed to render custom component at index ${index}:`, error);
|
|
@@ -1488,13 +1481,10 @@ class EnhancedSelect extends HTMLElement {
|
|
|
1488
1481
|
this._hasError = false;
|
|
1489
1482
|
this._errorMessage = '';
|
|
1490
1483
|
this._boundArrowClick = null;
|
|
1491
|
-
console.log('[EnhancedSelect] Constructor called');
|
|
1492
1484
|
this._shadow = this.attachShadow({ mode: 'open' });
|
|
1493
|
-
console.log('[EnhancedSelect] Shadow root attached:', this._shadow);
|
|
1494
1485
|
this._uniqueId = `enhanced-select-${Math.random().toString(36).substr(2, 9)}`;
|
|
1495
1486
|
// Merge global config with component-level config
|
|
1496
1487
|
this._config = selectConfig.getConfig();
|
|
1497
|
-
console.log('[EnhancedSelect] Config loaded');
|
|
1498
1488
|
// Initialize state
|
|
1499
1489
|
this._state = {
|
|
1500
1490
|
isOpen: false,
|
|
@@ -1514,41 +1504,26 @@ class EnhancedSelect extends HTMLElement {
|
|
|
1514
1504
|
lastNotifiedResultCount: 0,
|
|
1515
1505
|
isExpanded: false,
|
|
1516
1506
|
};
|
|
1517
|
-
console.log('[EnhancedSelect] State initialized');
|
|
1518
1507
|
// Create DOM structure
|
|
1519
1508
|
this._container = this._createContainer();
|
|
1520
|
-
console.log('[EnhancedSelect] Container created:', this._container);
|
|
1521
1509
|
this._inputContainer = this._createInputContainer();
|
|
1522
|
-
console.log('[EnhancedSelect] Input container created');
|
|
1523
1510
|
this._input = this._createInput();
|
|
1524
|
-
console.log('[EnhancedSelect] Input created:', this._input);
|
|
1525
1511
|
this._arrowContainer = this._createArrowContainer();
|
|
1526
|
-
console.log('[EnhancedSelect] Arrow container created');
|
|
1527
1512
|
this._dropdown = this._createDropdown();
|
|
1528
|
-
console.log('[EnhancedSelect] Dropdown created');
|
|
1529
1513
|
this._optionsContainer = this._createOptionsContainer();
|
|
1530
|
-
console.log('[EnhancedSelect] Options container created');
|
|
1531
1514
|
this._liveRegion = this._createLiveRegion();
|
|
1532
|
-
console.log('[EnhancedSelect] Live region created');
|
|
1533
1515
|
// Initialize styles BEFORE assembling DOM (order matters in shadow DOM)
|
|
1534
1516
|
this._initializeStyles();
|
|
1535
|
-
console.log('[EnhancedSelect] Styles initialized');
|
|
1536
1517
|
this._assembleDOM();
|
|
1537
|
-
console.log('[EnhancedSelect] DOM assembled');
|
|
1538
1518
|
this._attachEventListeners();
|
|
1539
|
-
console.log('[EnhancedSelect] Event listeners attached');
|
|
1540
1519
|
this._initializeObservers();
|
|
1541
|
-
console.log('[EnhancedSelect] Observers initialized');
|
|
1542
|
-
console.log('[EnhancedSelect] Constructor complete, shadow DOM children:', this._shadow.children.length);
|
|
1543
1520
|
}
|
|
1544
1521
|
connectedCallback() {
|
|
1545
|
-
console.log('[EnhancedSelect] connectedCallback called');
|
|
1546
1522
|
// WORKAROUND: Force display style on host element for Angular compatibility
|
|
1547
1523
|
// Angular's rendering seems to not apply :host styles correctly in some cases
|
|
1548
1524
|
// Must be done in connectedCallback when element is attached to DOM
|
|
1549
1525
|
this.style.display = 'block';
|
|
1550
1526
|
this.style.width = '100%';
|
|
1551
|
-
console.log('[EnhancedSelect] Forced host display styles');
|
|
1552
1527
|
// Load initial data if server-side is enabled
|
|
1553
1528
|
if (this._config.serverSide.enabled && this._config.serverSide.initialSelectedValues) {
|
|
1554
1529
|
this._loadInitialSelectedItems();
|
|
@@ -1557,7 +1532,6 @@ class EnhancedSelect extends HTMLElement {
|
|
|
1557
1532
|
if (this._config.callbacks.onOpen) {
|
|
1558
1533
|
this._config.callbacks.onOpen();
|
|
1559
1534
|
}
|
|
1560
|
-
console.log('[EnhancedSelect] connectedCallback complete');
|
|
1561
1535
|
}
|
|
1562
1536
|
disconnectedCallback() {
|
|
1563
1537
|
// Cleanup observers
|
|
@@ -1655,43 +1629,22 @@ class EnhancedSelect extends HTMLElement {
|
|
|
1655
1629
|
return container;
|
|
1656
1630
|
}
|
|
1657
1631
|
_assembleDOM() {
|
|
1658
|
-
console.log('[EnhancedSelect] _assembleDOM: Starting DOM assembly');
|
|
1659
|
-
console.log('[EnhancedSelect] _assembleDOM: Elements to assemble:', {
|
|
1660
|
-
inputContainer: !!this._inputContainer,
|
|
1661
|
-
input: !!this._input,
|
|
1662
|
-
arrowContainer: !!this._arrowContainer,
|
|
1663
|
-
container: !!this._container,
|
|
1664
|
-
dropdown: !!this._dropdown,
|
|
1665
|
-
optionsContainer: !!this._optionsContainer,
|
|
1666
|
-
shadow: !!this._shadow,
|
|
1667
|
-
liveRegion: !!this._liveRegion
|
|
1668
|
-
});
|
|
1669
1632
|
this._inputContainer.appendChild(this._input);
|
|
1670
|
-
console.log('[EnhancedSelect] _assembleDOM: Appended input to inputContainer');
|
|
1671
1633
|
if (this._arrowContainer) {
|
|
1672
1634
|
this._inputContainer.appendChild(this._arrowContainer);
|
|
1673
|
-
console.log('[EnhancedSelect] _assembleDOM: Appended arrowContainer to inputContainer');
|
|
1674
1635
|
}
|
|
1675
1636
|
this._container.appendChild(this._inputContainer);
|
|
1676
|
-
console.log('[EnhancedSelect] _assembleDOM: Appended inputContainer to container');
|
|
1677
1637
|
this._dropdown.appendChild(this._optionsContainer);
|
|
1678
|
-
console.log('[EnhancedSelect] _assembleDOM: Appended optionsContainer to dropdown');
|
|
1679
1638
|
this._container.appendChild(this._dropdown);
|
|
1680
|
-
console.log('[EnhancedSelect] _assembleDOM: Appended dropdown to container');
|
|
1681
1639
|
this._shadow.appendChild(this._container);
|
|
1682
|
-
console.log('[EnhancedSelect] _assembleDOM: Appended container to shadow root');
|
|
1683
1640
|
if (this._liveRegion) {
|
|
1684
1641
|
this._shadow.appendChild(this._liveRegion);
|
|
1685
|
-
console.log('[EnhancedSelect] _assembleDOM: Appended liveRegion to shadow root');
|
|
1686
1642
|
}
|
|
1687
|
-
console.log('[EnhancedSelect] _assembleDOM: Shadow root children count:', this._shadow.children.length);
|
|
1688
|
-
console.log('[EnhancedSelect] _assembleDOM: Shadow root HTML length:', this._shadow.innerHTML.length);
|
|
1689
1643
|
// Set ARIA relationships
|
|
1690
1644
|
const listboxId = `${this._uniqueId}-listbox`;
|
|
1691
1645
|
this._dropdown.id = listboxId;
|
|
1692
1646
|
this._input.setAttribute('aria-controls', listboxId);
|
|
1693
1647
|
this._input.setAttribute('aria-owns', listboxId);
|
|
1694
|
-
console.log('[EnhancedSelect] _assembleDOM: Set ARIA relationships with listboxId:', listboxId);
|
|
1695
1648
|
}
|
|
1696
1649
|
_initializeStyles() {
|
|
1697
1650
|
const style = document.createElement('style');
|
|
@@ -2021,8 +1974,6 @@ class EnhancedSelect extends HTMLElement {
|
|
|
2021
1974
|
min-height: 44px;
|
|
2022
1975
|
}
|
|
2023
1976
|
`;
|
|
2024
|
-
console.log('[EnhancedSelect] _initializeStyles: Created style element, content length:', style.textContent?.length || 0);
|
|
2025
|
-
console.log('[EnhancedSelect] _initializeStyles: Shadow root children BEFORE:', this._shadow.children.length);
|
|
2026
1977
|
// Insert as first child to ensure styles are processed first
|
|
2027
1978
|
if (this._shadow.firstChild) {
|
|
2028
1979
|
this._shadow.insertBefore(style, this._shadow.firstChild);
|
|
@@ -2030,9 +1981,6 @@ class EnhancedSelect extends HTMLElement {
|
|
|
2030
1981
|
else {
|
|
2031
1982
|
this._shadow.appendChild(style);
|
|
2032
1983
|
}
|
|
2033
|
-
console.log('[EnhancedSelect] _initializeStyles: Style inserted, shadow root children AFTER:', this._shadow.children.length);
|
|
2034
|
-
console.log('[EnhancedSelect] _initializeStyles: Shadow root has style element:', !!this._shadow.querySelector('style'));
|
|
2035
|
-
console.log('[EnhancedSelect] _initializeStyles: Style sheet rules:', style.sheet?.cssRules?.length || 'NOT PARSED');
|
|
2036
1984
|
}
|
|
2037
1985
|
_attachEventListeners() {
|
|
2038
1986
|
// Arrow click handler
|
|
@@ -2639,27 +2587,21 @@ class EnhancedSelect extends HTMLElement {
|
|
|
2639
2587
|
* Set items to display in the select
|
|
2640
2588
|
*/
|
|
2641
2589
|
setItems(items) {
|
|
2642
|
-
console.log('[EnhancedSelect] setItems called with', items?.length || 0, 'items');
|
|
2643
|
-
console.log('[EnhancedSelect] Items:', items);
|
|
2644
2590
|
const previousLength = this._state.loadedItems.length;
|
|
2645
2591
|
this._state.loadedItems = items;
|
|
2646
2592
|
// If grouped items exist, flatten them to items
|
|
2647
2593
|
if (this._state.groupedItems.length > 0) {
|
|
2648
2594
|
this._state.loadedItems = this._state.groupedItems.flatMap(group => group.options);
|
|
2649
|
-
console.log('[EnhancedSelect] Flattened grouped items to', this._state.loadedItems.length, 'items');
|
|
2650
2595
|
}
|
|
2651
2596
|
const newLength = this._state.loadedItems.length;
|
|
2652
|
-
console.log('[EnhancedSelect] State.loadedItems updated:', previousLength, '→', newLength);
|
|
2653
2597
|
// When infinite scroll is active (preserveScrollPosition = true),
|
|
2654
2598
|
// we need to maintain scroll position during the update
|
|
2655
2599
|
if (this._state.preserveScrollPosition && this._dropdown) {
|
|
2656
2600
|
const targetScrollTop = this._state.lastScrollPosition;
|
|
2657
|
-
console.log('[EnhancedSelect] Preserving scroll position:', targetScrollTop);
|
|
2658
2601
|
// Only clear loading if we actually got more items
|
|
2659
2602
|
if (newLength > previousLength) {
|
|
2660
2603
|
this._state.isBusy = false;
|
|
2661
2604
|
}
|
|
2662
|
-
console.log('[EnhancedSelect] Calling _renderOptions (with scroll preservation)...');
|
|
2663
2605
|
this._renderOptions();
|
|
2664
2606
|
// Restore the exact scrollTop we had before loading
|
|
2665
2607
|
// so the previously visible items stay in place and
|
|
@@ -2679,10 +2621,8 @@ class EnhancedSelect extends HTMLElement {
|
|
|
2679
2621
|
else {
|
|
2680
2622
|
// Normal update - just render normally
|
|
2681
2623
|
this._state.isBusy = false;
|
|
2682
|
-
console.log('[EnhancedSelect] Calling _renderOptions (normal)...');
|
|
2683
2624
|
this._renderOptions();
|
|
2684
2625
|
}
|
|
2685
|
-
console.log('[EnhancedSelect] setItems complete');
|
|
2686
2626
|
}
|
|
2687
2627
|
/**
|
|
2688
2628
|
* Set grouped items
|
|
@@ -2846,21 +2786,11 @@ class EnhancedSelect extends HTMLElement {
|
|
|
2846
2786
|
* Render options based on current state
|
|
2847
2787
|
*/
|
|
2848
2788
|
_renderOptions() {
|
|
2849
|
-
console.log('[EnhancedSelect] _renderOptions called');
|
|
2850
|
-
console.log('[EnhancedSelect] State:', {
|
|
2851
|
-
loadedItems: this._state.loadedItems.length,
|
|
2852
|
-
groupedItems: this._state.groupedItems.length,
|
|
2853
|
-
isOpen: this._state.isOpen,
|
|
2854
|
-
isSearching: this._state.isSearching,
|
|
2855
|
-
searchQuery: this._state.searchQuery,
|
|
2856
|
-
isBusy: this._state.isBusy
|
|
2857
|
-
});
|
|
2858
2789
|
// Cleanup observer
|
|
2859
2790
|
if (this._loadMoreTrigger && this._intersectionObserver) {
|
|
2860
2791
|
this._intersectionObserver.unobserve(this._loadMoreTrigger);
|
|
2861
2792
|
}
|
|
2862
2793
|
// Clear options container
|
|
2863
|
-
console.log('[EnhancedSelect] Clearing options container, previous children:', this._optionsContainer.children.length);
|
|
2864
2794
|
this._optionsContainer.innerHTML = '';
|
|
2865
2795
|
// Ensure dropdown only contains options container (cleanup legacy direct children)
|
|
2866
2796
|
// We need to preserve optionsContainer, so we can't just clear dropdown.innerHTML
|
|
@@ -2873,7 +2803,6 @@ class EnhancedSelect extends HTMLElement {
|
|
|
2873
2803
|
// Ensure dropdown is visible if we are rendering options
|
|
2874
2804
|
if (this._state.isOpen && this._dropdown.style.display === 'none') {
|
|
2875
2805
|
this._dropdown.style.display = 'block';
|
|
2876
|
-
console.log('[EnhancedSelect] Dropdown display set to block');
|
|
2877
2806
|
}
|
|
2878
2807
|
// Show searching state (exclusive state)
|
|
2879
2808
|
if (this._state.isSearching) {
|
|
@@ -2881,7 +2810,6 @@ class EnhancedSelect extends HTMLElement {
|
|
|
2881
2810
|
searching.className = 'searching-state';
|
|
2882
2811
|
searching.textContent = 'Searching...';
|
|
2883
2812
|
this._optionsContainer.appendChild(searching);
|
|
2884
|
-
console.log('[EnhancedSelect] Added searching state');
|
|
2885
2813
|
return;
|
|
2886
2814
|
}
|
|
2887
2815
|
const getValue = this._config.serverSide.getValueFromItem || ((item) => item?.value ?? item);
|
|
@@ -2890,7 +2818,6 @@ class EnhancedSelect extends HTMLElement {
|
|
|
2890
2818
|
const query = this._state.searchQuery.toLowerCase();
|
|
2891
2819
|
// Handle Grouped Items Rendering (when no search query)
|
|
2892
2820
|
if (this._state.groupedItems.length > 0 && !query) {
|
|
2893
|
-
console.log('[EnhancedSelect] Rendering grouped items:', this._state.groupedItems.length, 'groups');
|
|
2894
2821
|
this._state.groupedItems.forEach(group => {
|
|
2895
2822
|
const header = document.createElement('div');
|
|
2896
2823
|
header.className = 'group-header';
|
|
@@ -2920,7 +2847,6 @@ class EnhancedSelect extends HTMLElement {
|
|
|
2920
2847
|
}
|
|
2921
2848
|
else {
|
|
2922
2849
|
// Normal rendering (flat list or filtered)
|
|
2923
|
-
console.log('[EnhancedSelect] Rendering flat list:', this._state.loadedItems.length, 'items');
|
|
2924
2850
|
let hasRenderedItems = false;
|
|
2925
2851
|
this._state.loadedItems.forEach((item, index) => {
|
|
2926
2852
|
// Apply filter if query exists
|
|
@@ -2937,7 +2863,6 @@ class EnhancedSelect extends HTMLElement {
|
|
|
2937
2863
|
hasRenderedItems = true;
|
|
2938
2864
|
this._renderSingleOption(item, index, getValue, getLabel);
|
|
2939
2865
|
});
|
|
2940
|
-
console.log('[EnhancedSelect] Rendered', hasRenderedItems ? 'items' : 'no items');
|
|
2941
2866
|
if (!hasRenderedItems && !this._state.isBusy) {
|
|
2942
2867
|
const empty = document.createElement('div');
|
|
2943
2868
|
empty.className = 'empty-state';
|
|
@@ -2948,7 +2873,6 @@ class EnhancedSelect extends HTMLElement {
|
|
|
2948
2873
|
empty.textContent = 'No options available';
|
|
2949
2874
|
}
|
|
2950
2875
|
this._optionsContainer.appendChild(empty);
|
|
2951
|
-
console.log('[EnhancedSelect] Added empty state');
|
|
2952
2876
|
}
|
|
2953
2877
|
}
|
|
2954
2878
|
// Append Busy Indicator if busy
|
|
@@ -2966,13 +2890,11 @@ class EnhancedSelect extends HTMLElement {
|
|
|
2966
2890
|
busyBucket.appendChild(message);
|
|
2967
2891
|
}
|
|
2968
2892
|
this._optionsContainer.appendChild(busyBucket);
|
|
2969
|
-
console.log('[EnhancedSelect] Added busy bucket');
|
|
2970
2893
|
}
|
|
2971
2894
|
// Append Load More Trigger (Button or Sentinel) if enabled and not busy
|
|
2972
2895
|
else if ((this._config.loadMore.enabled || this._config.infiniteScroll.enabled) && this._state.loadedItems.length > 0) {
|
|
2973
2896
|
this._addLoadMoreTrigger();
|
|
2974
2897
|
}
|
|
2975
|
-
console.log('[EnhancedSelect] _renderOptions complete, optionsContainer children:', this._optionsContainer.children.length);
|
|
2976
2898
|
}
|
|
2977
2899
|
_renderSingleOption(item, index, getValue, getLabel) {
|
|
2978
2900
|
const option = document.createElement('div');
|
|
@@ -2980,7 +2902,6 @@ class EnhancedSelect extends HTMLElement {
|
|
|
2980
2902
|
option.id = `${this._uniqueId}-option-${index}`;
|
|
2981
2903
|
const value = getValue(item);
|
|
2982
2904
|
const label = getLabel(item);
|
|
2983
|
-
console.log('[EnhancedSelect] Rendering option', index, ':', { value, label });
|
|
2984
2905
|
option.textContent = label;
|
|
2985
2906
|
option.dataset.value = String(value);
|
|
2986
2907
|
option.dataset.index = String(index); // Also useful for debugging/selectors
|
|
@@ -2997,7 +2918,6 @@ class EnhancedSelect extends HTMLElement {
|
|
|
2997
2918
|
this._selectOption(index);
|
|
2998
2919
|
});
|
|
2999
2920
|
this._optionsContainer.appendChild(option);
|
|
3000
|
-
console.log('[EnhancedSelect] Option', index, 'appended to optionsContainer');
|
|
3001
2921
|
}
|
|
3002
2922
|
_addLoadMoreTrigger() {
|
|
3003
2923
|
const container = document.createElement('div');
|
|
@@ -3830,7 +3750,6 @@ async function measureAsync(label, fn) {
|
|
|
3830
3750
|
const start = performance.now();
|
|
3831
3751
|
const result = await fn();
|
|
3832
3752
|
const duration = performance.now() - start;
|
|
3833
|
-
console.log(`[Perf] ${label}: ${duration.toFixed(2)}ms`);
|
|
3834
3753
|
return { result, duration };
|
|
3835
3754
|
}
|
|
3836
3755
|
/**
|
|
@@ -3840,7 +3759,6 @@ function measureSync(label, fn) {
|
|
|
3840
3759
|
const start = performance.now();
|
|
3841
3760
|
const result = fn();
|
|
3842
3761
|
const duration = performance.now() - start;
|
|
3843
|
-
console.log(`[Perf] ${label}: ${duration.toFixed(2)}ms`);
|
|
3844
3762
|
return { result, duration };
|
|
3845
3763
|
}
|
|
3846
3764
|
|