@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.umd.js
CHANGED
|
@@ -550,13 +550,11 @@
|
|
|
550
550
|
component = pooled.instance;
|
|
551
551
|
pooled.inUse = true;
|
|
552
552
|
pooled.lastUsedIndex = index;
|
|
553
|
-
console.log(`[CustomOptionPool] Reusing component for index ${index}`);
|
|
554
553
|
}
|
|
555
554
|
else {
|
|
556
555
|
// Create new component
|
|
557
556
|
try {
|
|
558
557
|
component = factory(item, index);
|
|
559
|
-
console.log(`[CustomOptionPool] Created new component for index ${index}`);
|
|
560
558
|
// Add to pool if under limit
|
|
561
559
|
const pool = this._pool.get(factoryKey) || [];
|
|
562
560
|
if (pool.length < this._maxPoolSize) {
|
|
@@ -605,7 +603,6 @@
|
|
|
605
603
|
const pooled = pool.find(p => p.instance === component);
|
|
606
604
|
if (pooled) {
|
|
607
605
|
pooled.inUse = false;
|
|
608
|
-
console.log(`[CustomOptionPool] Released component from index ${index}`);
|
|
609
606
|
break;
|
|
610
607
|
}
|
|
611
608
|
}
|
|
@@ -614,7 +611,6 @@
|
|
|
614
611
|
* Release all active components
|
|
615
612
|
*/
|
|
616
613
|
releaseAll() {
|
|
617
|
-
console.log(`[CustomOptionPool] Releasing ${this._activeComponents.size} active components`);
|
|
618
614
|
const indices = Array.from(this._activeComponents.keys());
|
|
619
615
|
indices.forEach(index => this.release(index));
|
|
620
616
|
}
|
|
@@ -657,7 +653,6 @@
|
|
|
657
653
|
clear() {
|
|
658
654
|
this.releaseAll();
|
|
659
655
|
this._pool.clear();
|
|
660
|
-
console.log('[CustomOptionPool] Pool cleared');
|
|
661
656
|
}
|
|
662
657
|
/**
|
|
663
658
|
* Get pool statistics for debugging
|
|
@@ -836,7 +831,6 @@
|
|
|
836
831
|
});
|
|
837
832
|
}
|
|
838
833
|
this._mountedElements.set(index, option);
|
|
839
|
-
console.log(`[OptionRenderer] Rendered lightweight option ${index}: ${label}`);
|
|
840
834
|
return option;
|
|
841
835
|
}
|
|
842
836
|
/**
|
|
@@ -896,7 +890,6 @@
|
|
|
896
890
|
}
|
|
897
891
|
});
|
|
898
892
|
}
|
|
899
|
-
console.log(`[OptionRenderer] Rendered custom component option ${index}: ${label}`);
|
|
900
893
|
}
|
|
901
894
|
catch (error) {
|
|
902
895
|
console.error(`[OptionRenderer] Failed to render custom component at index ${index}:`, error);
|
|
@@ -1494,13 +1487,10 @@
|
|
|
1494
1487
|
this._hasError = false;
|
|
1495
1488
|
this._errorMessage = '';
|
|
1496
1489
|
this._boundArrowClick = null;
|
|
1497
|
-
console.log('[EnhancedSelect] Constructor called');
|
|
1498
1490
|
this._shadow = this.attachShadow({ mode: 'open' });
|
|
1499
|
-
console.log('[EnhancedSelect] Shadow root attached:', this._shadow);
|
|
1500
1491
|
this._uniqueId = `enhanced-select-${Math.random().toString(36).substr(2, 9)}`;
|
|
1501
1492
|
// Merge global config with component-level config
|
|
1502
1493
|
this._config = selectConfig.getConfig();
|
|
1503
|
-
console.log('[EnhancedSelect] Config loaded');
|
|
1504
1494
|
// Initialize state
|
|
1505
1495
|
this._state = {
|
|
1506
1496
|
isOpen: false,
|
|
@@ -1520,41 +1510,26 @@
|
|
|
1520
1510
|
lastNotifiedResultCount: 0,
|
|
1521
1511
|
isExpanded: false,
|
|
1522
1512
|
};
|
|
1523
|
-
console.log('[EnhancedSelect] State initialized');
|
|
1524
1513
|
// Create DOM structure
|
|
1525
1514
|
this._container = this._createContainer();
|
|
1526
|
-
console.log('[EnhancedSelect] Container created:', this._container);
|
|
1527
1515
|
this._inputContainer = this._createInputContainer();
|
|
1528
|
-
console.log('[EnhancedSelect] Input container created');
|
|
1529
1516
|
this._input = this._createInput();
|
|
1530
|
-
console.log('[EnhancedSelect] Input created:', this._input);
|
|
1531
1517
|
this._arrowContainer = this._createArrowContainer();
|
|
1532
|
-
console.log('[EnhancedSelect] Arrow container created');
|
|
1533
1518
|
this._dropdown = this._createDropdown();
|
|
1534
|
-
console.log('[EnhancedSelect] Dropdown created');
|
|
1535
1519
|
this._optionsContainer = this._createOptionsContainer();
|
|
1536
|
-
console.log('[EnhancedSelect] Options container created');
|
|
1537
1520
|
this._liveRegion = this._createLiveRegion();
|
|
1538
|
-
console.log('[EnhancedSelect] Live region created');
|
|
1539
1521
|
// Initialize styles BEFORE assembling DOM (order matters in shadow DOM)
|
|
1540
1522
|
this._initializeStyles();
|
|
1541
|
-
console.log('[EnhancedSelect] Styles initialized');
|
|
1542
1523
|
this._assembleDOM();
|
|
1543
|
-
console.log('[EnhancedSelect] DOM assembled');
|
|
1544
1524
|
this._attachEventListeners();
|
|
1545
|
-
console.log('[EnhancedSelect] Event listeners attached');
|
|
1546
1525
|
this._initializeObservers();
|
|
1547
|
-
console.log('[EnhancedSelect] Observers initialized');
|
|
1548
|
-
console.log('[EnhancedSelect] Constructor complete, shadow DOM children:', this._shadow.children.length);
|
|
1549
1526
|
}
|
|
1550
1527
|
connectedCallback() {
|
|
1551
|
-
console.log('[EnhancedSelect] connectedCallback called');
|
|
1552
1528
|
// WORKAROUND: Force display style on host element for Angular compatibility
|
|
1553
1529
|
// Angular's rendering seems to not apply :host styles correctly in some cases
|
|
1554
1530
|
// Must be done in connectedCallback when element is attached to DOM
|
|
1555
1531
|
this.style.display = 'block';
|
|
1556
1532
|
this.style.width = '100%';
|
|
1557
|
-
console.log('[EnhancedSelect] Forced host display styles');
|
|
1558
1533
|
// Load initial data if server-side is enabled
|
|
1559
1534
|
if (this._config.serverSide.enabled && this._config.serverSide.initialSelectedValues) {
|
|
1560
1535
|
this._loadInitialSelectedItems();
|
|
@@ -1563,7 +1538,6 @@
|
|
|
1563
1538
|
if (this._config.callbacks.onOpen) {
|
|
1564
1539
|
this._config.callbacks.onOpen();
|
|
1565
1540
|
}
|
|
1566
|
-
console.log('[EnhancedSelect] connectedCallback complete');
|
|
1567
1541
|
}
|
|
1568
1542
|
disconnectedCallback() {
|
|
1569
1543
|
// Cleanup observers
|
|
@@ -1661,43 +1635,22 @@
|
|
|
1661
1635
|
return container;
|
|
1662
1636
|
}
|
|
1663
1637
|
_assembleDOM() {
|
|
1664
|
-
console.log('[EnhancedSelect] _assembleDOM: Starting DOM assembly');
|
|
1665
|
-
console.log('[EnhancedSelect] _assembleDOM: Elements to assemble:', {
|
|
1666
|
-
inputContainer: !!this._inputContainer,
|
|
1667
|
-
input: !!this._input,
|
|
1668
|
-
arrowContainer: !!this._arrowContainer,
|
|
1669
|
-
container: !!this._container,
|
|
1670
|
-
dropdown: !!this._dropdown,
|
|
1671
|
-
optionsContainer: !!this._optionsContainer,
|
|
1672
|
-
shadow: !!this._shadow,
|
|
1673
|
-
liveRegion: !!this._liveRegion
|
|
1674
|
-
});
|
|
1675
1638
|
this._inputContainer.appendChild(this._input);
|
|
1676
|
-
console.log('[EnhancedSelect] _assembleDOM: Appended input to inputContainer');
|
|
1677
1639
|
if (this._arrowContainer) {
|
|
1678
1640
|
this._inputContainer.appendChild(this._arrowContainer);
|
|
1679
|
-
console.log('[EnhancedSelect] _assembleDOM: Appended arrowContainer to inputContainer');
|
|
1680
1641
|
}
|
|
1681
1642
|
this._container.appendChild(this._inputContainer);
|
|
1682
|
-
console.log('[EnhancedSelect] _assembleDOM: Appended inputContainer to container');
|
|
1683
1643
|
this._dropdown.appendChild(this._optionsContainer);
|
|
1684
|
-
console.log('[EnhancedSelect] _assembleDOM: Appended optionsContainer to dropdown');
|
|
1685
1644
|
this._container.appendChild(this._dropdown);
|
|
1686
|
-
console.log('[EnhancedSelect] _assembleDOM: Appended dropdown to container');
|
|
1687
1645
|
this._shadow.appendChild(this._container);
|
|
1688
|
-
console.log('[EnhancedSelect] _assembleDOM: Appended container to shadow root');
|
|
1689
1646
|
if (this._liveRegion) {
|
|
1690
1647
|
this._shadow.appendChild(this._liveRegion);
|
|
1691
|
-
console.log('[EnhancedSelect] _assembleDOM: Appended liveRegion to shadow root');
|
|
1692
1648
|
}
|
|
1693
|
-
console.log('[EnhancedSelect] _assembleDOM: Shadow root children count:', this._shadow.children.length);
|
|
1694
|
-
console.log('[EnhancedSelect] _assembleDOM: Shadow root HTML length:', this._shadow.innerHTML.length);
|
|
1695
1649
|
// Set ARIA relationships
|
|
1696
1650
|
const listboxId = `${this._uniqueId}-listbox`;
|
|
1697
1651
|
this._dropdown.id = listboxId;
|
|
1698
1652
|
this._input.setAttribute('aria-controls', listboxId);
|
|
1699
1653
|
this._input.setAttribute('aria-owns', listboxId);
|
|
1700
|
-
console.log('[EnhancedSelect] _assembleDOM: Set ARIA relationships with listboxId:', listboxId);
|
|
1701
1654
|
}
|
|
1702
1655
|
_initializeStyles() {
|
|
1703
1656
|
const style = document.createElement('style');
|
|
@@ -2027,8 +1980,6 @@
|
|
|
2027
1980
|
min-height: 44px;
|
|
2028
1981
|
}
|
|
2029
1982
|
`;
|
|
2030
|
-
console.log('[EnhancedSelect] _initializeStyles: Created style element, content length:', style.textContent?.length || 0);
|
|
2031
|
-
console.log('[EnhancedSelect] _initializeStyles: Shadow root children BEFORE:', this._shadow.children.length);
|
|
2032
1983
|
// Insert as first child to ensure styles are processed first
|
|
2033
1984
|
if (this._shadow.firstChild) {
|
|
2034
1985
|
this._shadow.insertBefore(style, this._shadow.firstChild);
|
|
@@ -2036,9 +1987,6 @@
|
|
|
2036
1987
|
else {
|
|
2037
1988
|
this._shadow.appendChild(style);
|
|
2038
1989
|
}
|
|
2039
|
-
console.log('[EnhancedSelect] _initializeStyles: Style inserted, shadow root children AFTER:', this._shadow.children.length);
|
|
2040
|
-
console.log('[EnhancedSelect] _initializeStyles: Shadow root has style element:', !!this._shadow.querySelector('style'));
|
|
2041
|
-
console.log('[EnhancedSelect] _initializeStyles: Style sheet rules:', style.sheet?.cssRules?.length || 'NOT PARSED');
|
|
2042
1990
|
}
|
|
2043
1991
|
_attachEventListeners() {
|
|
2044
1992
|
// Arrow click handler
|
|
@@ -2645,27 +2593,21 @@
|
|
|
2645
2593
|
* Set items to display in the select
|
|
2646
2594
|
*/
|
|
2647
2595
|
setItems(items) {
|
|
2648
|
-
console.log('[EnhancedSelect] setItems called with', items?.length || 0, 'items');
|
|
2649
|
-
console.log('[EnhancedSelect] Items:', items);
|
|
2650
2596
|
const previousLength = this._state.loadedItems.length;
|
|
2651
2597
|
this._state.loadedItems = items;
|
|
2652
2598
|
// If grouped items exist, flatten them to items
|
|
2653
2599
|
if (this._state.groupedItems.length > 0) {
|
|
2654
2600
|
this._state.loadedItems = this._state.groupedItems.flatMap(group => group.options);
|
|
2655
|
-
console.log('[EnhancedSelect] Flattened grouped items to', this._state.loadedItems.length, 'items');
|
|
2656
2601
|
}
|
|
2657
2602
|
const newLength = this._state.loadedItems.length;
|
|
2658
|
-
console.log('[EnhancedSelect] State.loadedItems updated:', previousLength, '→', newLength);
|
|
2659
2603
|
// When infinite scroll is active (preserveScrollPosition = true),
|
|
2660
2604
|
// we need to maintain scroll position during the update
|
|
2661
2605
|
if (this._state.preserveScrollPosition && this._dropdown) {
|
|
2662
2606
|
const targetScrollTop = this._state.lastScrollPosition;
|
|
2663
|
-
console.log('[EnhancedSelect] Preserving scroll position:', targetScrollTop);
|
|
2664
2607
|
// Only clear loading if we actually got more items
|
|
2665
2608
|
if (newLength > previousLength) {
|
|
2666
2609
|
this._state.isBusy = false;
|
|
2667
2610
|
}
|
|
2668
|
-
console.log('[EnhancedSelect] Calling _renderOptions (with scroll preservation)...');
|
|
2669
2611
|
this._renderOptions();
|
|
2670
2612
|
// Restore the exact scrollTop we had before loading
|
|
2671
2613
|
// so the previously visible items stay in place and
|
|
@@ -2685,10 +2627,8 @@
|
|
|
2685
2627
|
else {
|
|
2686
2628
|
// Normal update - just render normally
|
|
2687
2629
|
this._state.isBusy = false;
|
|
2688
|
-
console.log('[EnhancedSelect] Calling _renderOptions (normal)...');
|
|
2689
2630
|
this._renderOptions();
|
|
2690
2631
|
}
|
|
2691
|
-
console.log('[EnhancedSelect] setItems complete');
|
|
2692
2632
|
}
|
|
2693
2633
|
/**
|
|
2694
2634
|
* Set grouped items
|
|
@@ -2852,21 +2792,11 @@
|
|
|
2852
2792
|
* Render options based on current state
|
|
2853
2793
|
*/
|
|
2854
2794
|
_renderOptions() {
|
|
2855
|
-
console.log('[EnhancedSelect] _renderOptions called');
|
|
2856
|
-
console.log('[EnhancedSelect] State:', {
|
|
2857
|
-
loadedItems: this._state.loadedItems.length,
|
|
2858
|
-
groupedItems: this._state.groupedItems.length,
|
|
2859
|
-
isOpen: this._state.isOpen,
|
|
2860
|
-
isSearching: this._state.isSearching,
|
|
2861
|
-
searchQuery: this._state.searchQuery,
|
|
2862
|
-
isBusy: this._state.isBusy
|
|
2863
|
-
});
|
|
2864
2795
|
// Cleanup observer
|
|
2865
2796
|
if (this._loadMoreTrigger && this._intersectionObserver) {
|
|
2866
2797
|
this._intersectionObserver.unobserve(this._loadMoreTrigger);
|
|
2867
2798
|
}
|
|
2868
2799
|
// Clear options container
|
|
2869
|
-
console.log('[EnhancedSelect] Clearing options container, previous children:', this._optionsContainer.children.length);
|
|
2870
2800
|
this._optionsContainer.innerHTML = '';
|
|
2871
2801
|
// Ensure dropdown only contains options container (cleanup legacy direct children)
|
|
2872
2802
|
// We need to preserve optionsContainer, so we can't just clear dropdown.innerHTML
|
|
@@ -2879,7 +2809,6 @@
|
|
|
2879
2809
|
// Ensure dropdown is visible if we are rendering options
|
|
2880
2810
|
if (this._state.isOpen && this._dropdown.style.display === 'none') {
|
|
2881
2811
|
this._dropdown.style.display = 'block';
|
|
2882
|
-
console.log('[EnhancedSelect] Dropdown display set to block');
|
|
2883
2812
|
}
|
|
2884
2813
|
// Show searching state (exclusive state)
|
|
2885
2814
|
if (this._state.isSearching) {
|
|
@@ -2887,7 +2816,6 @@
|
|
|
2887
2816
|
searching.className = 'searching-state';
|
|
2888
2817
|
searching.textContent = 'Searching...';
|
|
2889
2818
|
this._optionsContainer.appendChild(searching);
|
|
2890
|
-
console.log('[EnhancedSelect] Added searching state');
|
|
2891
2819
|
return;
|
|
2892
2820
|
}
|
|
2893
2821
|
const getValue = this._config.serverSide.getValueFromItem || ((item) => item?.value ?? item);
|
|
@@ -2896,7 +2824,6 @@
|
|
|
2896
2824
|
const query = this._state.searchQuery.toLowerCase();
|
|
2897
2825
|
// Handle Grouped Items Rendering (when no search query)
|
|
2898
2826
|
if (this._state.groupedItems.length > 0 && !query) {
|
|
2899
|
-
console.log('[EnhancedSelect] Rendering grouped items:', this._state.groupedItems.length, 'groups');
|
|
2900
2827
|
this._state.groupedItems.forEach(group => {
|
|
2901
2828
|
const header = document.createElement('div');
|
|
2902
2829
|
header.className = 'group-header';
|
|
@@ -2926,7 +2853,6 @@
|
|
|
2926
2853
|
}
|
|
2927
2854
|
else {
|
|
2928
2855
|
// Normal rendering (flat list or filtered)
|
|
2929
|
-
console.log('[EnhancedSelect] Rendering flat list:', this._state.loadedItems.length, 'items');
|
|
2930
2856
|
let hasRenderedItems = false;
|
|
2931
2857
|
this._state.loadedItems.forEach((item, index) => {
|
|
2932
2858
|
// Apply filter if query exists
|
|
@@ -2943,7 +2869,6 @@
|
|
|
2943
2869
|
hasRenderedItems = true;
|
|
2944
2870
|
this._renderSingleOption(item, index, getValue, getLabel);
|
|
2945
2871
|
});
|
|
2946
|
-
console.log('[EnhancedSelect] Rendered', hasRenderedItems ? 'items' : 'no items');
|
|
2947
2872
|
if (!hasRenderedItems && !this._state.isBusy) {
|
|
2948
2873
|
const empty = document.createElement('div');
|
|
2949
2874
|
empty.className = 'empty-state';
|
|
@@ -2954,7 +2879,6 @@
|
|
|
2954
2879
|
empty.textContent = 'No options available';
|
|
2955
2880
|
}
|
|
2956
2881
|
this._optionsContainer.appendChild(empty);
|
|
2957
|
-
console.log('[EnhancedSelect] Added empty state');
|
|
2958
2882
|
}
|
|
2959
2883
|
}
|
|
2960
2884
|
// Append Busy Indicator if busy
|
|
@@ -2972,13 +2896,11 @@
|
|
|
2972
2896
|
busyBucket.appendChild(message);
|
|
2973
2897
|
}
|
|
2974
2898
|
this._optionsContainer.appendChild(busyBucket);
|
|
2975
|
-
console.log('[EnhancedSelect] Added busy bucket');
|
|
2976
2899
|
}
|
|
2977
2900
|
// Append Load More Trigger (Button or Sentinel) if enabled and not busy
|
|
2978
2901
|
else if ((this._config.loadMore.enabled || this._config.infiniteScroll.enabled) && this._state.loadedItems.length > 0) {
|
|
2979
2902
|
this._addLoadMoreTrigger();
|
|
2980
2903
|
}
|
|
2981
|
-
console.log('[EnhancedSelect] _renderOptions complete, optionsContainer children:', this._optionsContainer.children.length);
|
|
2982
2904
|
}
|
|
2983
2905
|
_renderSingleOption(item, index, getValue, getLabel) {
|
|
2984
2906
|
const option = document.createElement('div');
|
|
@@ -2986,7 +2908,6 @@
|
|
|
2986
2908
|
option.id = `${this._uniqueId}-option-${index}`;
|
|
2987
2909
|
const value = getValue(item);
|
|
2988
2910
|
const label = getLabel(item);
|
|
2989
|
-
console.log('[EnhancedSelect] Rendering option', index, ':', { value, label });
|
|
2990
2911
|
option.textContent = label;
|
|
2991
2912
|
option.dataset.value = String(value);
|
|
2992
2913
|
option.dataset.index = String(index); // Also useful for debugging/selectors
|
|
@@ -3003,7 +2924,6 @@
|
|
|
3003
2924
|
this._selectOption(index);
|
|
3004
2925
|
});
|
|
3005
2926
|
this._optionsContainer.appendChild(option);
|
|
3006
|
-
console.log('[EnhancedSelect] Option', index, 'appended to optionsContainer');
|
|
3007
2927
|
}
|
|
3008
2928
|
_addLoadMoreTrigger() {
|
|
3009
2929
|
const container = document.createElement('div');
|
|
@@ -3836,7 +3756,6 @@
|
|
|
3836
3756
|
const start = performance.now();
|
|
3837
3757
|
const result = await fn();
|
|
3838
3758
|
const duration = performance.now() - start;
|
|
3839
|
-
console.log(`[Perf] ${label}: ${duration.toFixed(2)}ms`);
|
|
3840
3759
|
return { result, duration };
|
|
3841
3760
|
}
|
|
3842
3761
|
/**
|
|
@@ -3846,7 +3765,6 @@
|
|
|
3846
3765
|
const start = performance.now();
|
|
3847
3766
|
const result = fn();
|
|
3848
3767
|
const duration = performance.now() - start;
|
|
3849
|
-
console.log(`[Perf] ${label}: ${duration.toFixed(2)}ms`);
|
|
3850
3768
|
return { result, duration };
|
|
3851
3769
|
}
|
|
3852
3770
|
|