@keenmate/web-multiselect 1.0.0-rc10 → 1.0.0-rc11
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/multiselect.js +18 -22
- package/dist/multiselect.umd.js +12 -16
- package/dist/style.css +1 -1
- package/package.json +1 -1
- package/src/scss/_css-variables.scss +10 -0
- package/src/scss/_pills-display.scss +22 -12
- package/src/scss/_variables.scss +11 -0
package/dist/multiselect.js
CHANGED
|
@@ -1677,13 +1677,13 @@ class di {
|
|
|
1677
1677
|
}).join("");
|
|
1678
1678
|
let d = "";
|
|
1679
1679
|
r > 0 && (d = `
|
|
1680
|
-
<div class="ml__pill ml__pill--more" data-action="show-selected">
|
|
1680
|
+
<div class="ml__pill ml__pill--indicator ml__pill--more" data-action="show-selected">
|
|
1681
1681
|
<span class="ml__pill-text">${this.options.getCountPillCallback ? this.options.getCountPillCallback(t, r) : `+${r} more`}</span>
|
|
1682
1682
|
<button type="button" class="ml__pill-remove" data-action="remove-hidden" aria-label="Remove ${r} hidden items"></button>
|
|
1683
1683
|
</div>
|
|
1684
1684
|
`), this.pillsContainer.innerHTML = a + d;
|
|
1685
1685
|
} else if (l === "compact")
|
|
1686
|
-
if (this.pillsContainer.className = `
|
|
1686
|
+
if (this.pillsContainer.className = `ml__pills ml__pills--${this.effectivePillsPosition}`, t > 0) {
|
|
1687
1687
|
const s = e[0], n = this.getItemPillDisplayValue(s), r = t - 1;
|
|
1688
1688
|
let a = n;
|
|
1689
1689
|
if (r > 0) {
|
|
@@ -1691,23 +1691,19 @@ class di {
|
|
|
1691
1691
|
a = `${n} (${d})`;
|
|
1692
1692
|
}
|
|
1693
1693
|
this.pillsContainer.innerHTML = `
|
|
1694
|
-
<div class="
|
|
1695
|
-
<
|
|
1696
|
-
|
|
1697
|
-
</button>
|
|
1698
|
-
<button type="button" class="ml__count-clear" data-action="clear-count" aria-label="Clear all selections"></button>
|
|
1694
|
+
<div class="ml__pill ml__pill--indicator" data-action="show-selected">
|
|
1695
|
+
<span class="ml__pill-text">${a}</span>
|
|
1696
|
+
<button type="button" class="ml__pill-remove" data-action="clear-count" aria-label="Clear all selections"></button>
|
|
1699
1697
|
</div>
|
|
1700
1698
|
`;
|
|
1701
1699
|
} else
|
|
1702
1700
|
this.pillsContainer.innerHTML = "";
|
|
1703
|
-
else if (this.pillsContainer.className = `
|
|
1701
|
+
else if (this.pillsContainer.className = `ml__pills ml__pills--${this.effectivePillsPosition}`, t > 0) {
|
|
1704
1702
|
const s = this.options.getCountPillCallback ? this.options.getCountPillCallback(t) : `${t} selected`;
|
|
1705
1703
|
this.pillsContainer.innerHTML = `
|
|
1706
|
-
<div class="
|
|
1707
|
-
<
|
|
1708
|
-
|
|
1709
|
-
</button>
|
|
1710
|
-
<button type="button" class="ml__count-clear" data-action="clear-count" aria-label="Clear all selections"></button>
|
|
1704
|
+
<div class="ml__pill ml__pill--indicator" data-action="show-selected">
|
|
1705
|
+
<span class="ml__pill-text">${s}</span>
|
|
1706
|
+
<button type="button" class="ml__pill-remove" data-action="clear-count" aria-label="Clear all selections"></button>
|
|
1711
1707
|
</div>
|
|
1712
1708
|
`;
|
|
1713
1709
|
} else
|
|
@@ -1732,7 +1728,7 @@ class di {
|
|
|
1732
1728
|
const t = e.currentTarget, l = t.scrollTop === 0, o = t.scrollTop + t.clientHeight >= t.scrollHeight;
|
|
1733
1729
|
(e.deltaY < 0 && l || e.deltaY > 0 && o) && e.preventDefault(), e.stopPropagation();
|
|
1734
1730
|
}, { passive: !1 }), this.pillsContainer.addEventListener("mousedown", (e) => {
|
|
1735
|
-
e.target.closest("
|
|
1731
|
+
e.target.closest('[data-action="show-selected"]') && !this.showSelectedPopover && e.stopPropagation();
|
|
1736
1732
|
}), this.pillsContainer.addEventListener("click", (e) => this.handlePillClick(e)), this.countBadge.addEventListener("mousedown", (e) => {
|
|
1737
1733
|
this.showSelectedPopover || e.stopPropagation();
|
|
1738
1734
|
}), this.countBadge.addEventListener("click", (e) => {
|
|
@@ -1847,11 +1843,11 @@ class di {
|
|
|
1847
1843
|
}
|
|
1848
1844
|
}
|
|
1849
1845
|
handlePillClick(e) {
|
|
1850
|
-
if (e.target.closest("
|
|
1851
|
-
e.preventDefault(), e.stopPropagation(), k.debug(`[${this.instanceId}]
|
|
1846
|
+
if (e.target.closest('[data-action="clear-count"]')) {
|
|
1847
|
+
e.preventDefault(), e.stopPropagation(), k.debug(`[${this.instanceId}] Clear count button clicked`), this.clearAll();
|
|
1852
1848
|
return;
|
|
1853
1849
|
}
|
|
1854
|
-
if (e.target.closest("
|
|
1850
|
+
if (e.target.closest('[data-action="show-selected"]')) {
|
|
1855
1851
|
e.preventDefault(), e.stopPropagation(), this.toggleSelectedPopover();
|
|
1856
1852
|
return;
|
|
1857
1853
|
}
|
|
@@ -1876,7 +1872,7 @@ class di {
|
|
|
1876
1872
|
var o;
|
|
1877
1873
|
const t = e.composedPath();
|
|
1878
1874
|
if (this.showSelectedPopover && !t.some(
|
|
1879
|
-
(n) => n instanceof Node && (this.selectedPopover.contains(n) || this.countBadge.contains(n) || n.closest && n.closest("
|
|
1875
|
+
(n) => n instanceof Node && (this.selectedPopover.contains(n) || this.countBadge.contains(n) || n.closest && n.closest('[data-action="show-selected"]'))
|
|
1880
1876
|
)) {
|
|
1881
1877
|
v.debug(`[${this.instanceId}] Closing selected popover due to click outside`), this.hideSelectedPopover();
|
|
1882
1878
|
return;
|
|
@@ -2315,7 +2311,7 @@ ${p}` : m, v.debug(`[${this.instanceId}] Using default content: "${s}"`);
|
|
|
2315
2311
|
this.destroyAllPillTooltips(), this.dropdownCleanup && this.dropdownCleanup(), this.hintCleanup && this.hintCleanup(), this.selectedPopoverCleanup && this.selectedPopoverCleanup(), this.virtualScroll && (this.virtualScroll.destroy(), this.virtualScroll = null), this.dropdown && this.dropdown.remove(), this.hint && this.hint.remove(), this.selectedPopover && this.selectedPopover.remove(), this.element.innerHTML = "", this.element.classList.remove("ml", "ml--open", "ml--no-checkboxes"), H.info(`[${this.instanceId}] Component destroyed`);
|
|
2316
2312
|
}
|
|
2317
2313
|
}
|
|
2318
|
-
const pi = '@charset "UTF-8";:host{--ml-accent-color: #3b82f6;--ml-accent-color-hover: #2563eb;--ml-accent-color-active: #1d4ed8;--ml-text-primary: #111827;--ml-text-secondary: #6b7280;--ml-text-white: #ffffff;--ml-primary-bg: #f3f4f6;--ml-primary-bg-hover: #e5e7eb;--ml-border-color: #e5e7eb;--ml-input-padding: .5rem .75rem;--ml-input-padding-right: 2.5rem;--ml-input-font-size: .875rem;--ml-input-border-style: 1px solid #d1d5db;--ml-input-border-radius: .375rem;--ml-input-bg: #ffffff;--ml-input-text: #111827;--ml-input-focus-border-color: #3b82f6;--ml-input-placeholder-color: #6b7280;--ml-input-bg-disabled: rgba(107, 114, 128, .05);--ml-toggle-right: .75rem;--ml-toggle-color: #6b7280;--ml-transform-center-y: translateY(-50%);--ml-transform-rotate-180: 180deg;--ml-count-badge-offset: 2rem;--ml-count-badge-padding: .125rem .25rem;--ml-count-badge-bg: #3b82f6;--ml-count-badge-color: #ffffff;--ml-count-badge-font-size: .75rem;--ml-count-badge-font-weight: 600;--ml-count-badge-border-radius: .25rem;--ml-count-badge-bg-hover: #2563eb;--ml-transform-scale-hover: 1.1;--ml-hint-padding: .5rem .75rem;--ml-hint-bg: #ffffff;--ml-hint-border: 1px solid #e5e7eb;--ml-hint-border-radius: .375rem;--ml-hint-box-shadow: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -2px rgba(0, 0, 0, .1);--ml-hint-font-size: .75rem;--ml-hint-color: #6b7280;--ml-line-height-relaxed: 1.4;--ml-dropdown-bg: #ffffff;--ml-dropdown-border: 1px solid #e5e7eb;--ml-dropdown-border-radius: .375rem;--ml-dropdown-box-shadow: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 8px 10px -6px rgba(0, 0, 0, .1);--ml-dropdown-max-height: 20rem;--ml-dropdown-color: #111827;--ml-z-index-dropdown: 9999;--ml-z-index-sticky: 1;--ml-actions-gap: .25rem;--ml-actions-padding: .5rem;--ml-actions-border-bottom: 1px solid #e5e7eb;--ml-actions-bg: #ffffff;--ml-action-btn-padding: .25rem .5rem;--ml-action-btn-font-size: .75rem;--ml-action-btn-border: 1px solid #e5e7eb;--ml-action-btn-border-radius: .25rem;--ml-action-btn-bg: transparent;--ml-action-btn-color: inherit;--ml-action-btn-bg-hover: #f3f4f6;--ml-action-btn-border-color-hover: #3b82f6;--ml-transform-scale-active: .98;--ml-options-padding: .25rem 0;--ml-group-border-top: 1px solid #e5e7eb;--ml-group-margin-top: .25rem;--ml-group-padding-top: .25rem;--ml-group-label-padding: .25rem .75rem;--ml-group-label-font-size: .75rem;--ml-group-label-font-weight: 600;--ml-group-label-color: #6b7280;--ml-group-label-transform: uppercase;--ml-group-label-letter-spacing: .05em;--ml-option-gap: .5rem;--ml-option-padding: .5rem .75rem;--ml-option-padding-h: .75rem;--ml-option-bg: transparent;--ml-option-bg-hover: #f9fafb;--ml-option-bg-focused: #f9fafb;--ml-option-outline-focused: 2px solid #3b82f6;--ml-option-focus-outline-offset: -2px;--ml-option-bg-matched: rgba(59, 130, 246, .08);--ml-option-border-matched: 3px solid rgba(59, 130, 246, .4);--ml-option-bg-selected: rgba(59, 130, 246, .1);--ml-disabled-opacity: .5;--ml-option-content-gap: .5rem;--ml-option-icon-size: 1.25rem;--ml-option-icon-font-size: 1rem;--ml-option-title-font-size: .875rem;--ml-option-title-color: inherit;--ml-option-mark-bg: rgba(59, 130, 246, .2);--ml-option-mark-color: inherit;--ml-option-mark-font-weight: 600;--ml-option-subtitle-margin-top: .25rem;--ml-option-subtitle-font-size: .75rem;--ml-option-subtitle-color: #6b7280;--ml-option-subtitle-line-height: 1.3;--ml-checkbox-margin-top: .125rem;--ml-empty-padding: 1rem .75rem;--ml-empty-font-size: .875rem;--ml-empty-color: #6b7280;--ml-loader-padding: 1rem;--ml-loader-gap: .5rem;--ml-loading-text-font-size: .875rem;--ml-loading-text-color: #6b7280;--ml-pills-gap: .5rem;--ml-pills-margin-bottom: .5rem;--ml-pills-margin-top: .5rem;--ml-pills-margin-left: .25rem;--ml-pills-margin-right: .25rem;--ml-pill-gap: .5rem;--ml-pill-height: 1.5rem;--ml-pill-font-size: .75rem;--ml-pill-font-weight: 600;--ml-pill-border-radius: .375rem;--ml-pill-bg: #eff6ff;--ml-pill-bg-hover: #ffffff;--ml-pill-bg-active: #e0f2fe;--ml-order-first: -1;--ml-pill-text-padding: 0 .5rem;--ml-pill-text-bg: #eff6ff;--ml-pill-text-color: #3b82f6;--ml-pill-remove-width: 1.5rem;--ml-pill-remove-bg: #3b82f6;--ml-pill-remove-color: #ffffff;--ml-pill-remove-border: none;--ml-pill-remove-font-size: .75rem;--ml-pill-remove-bg-hover: #2563eb;--ml-pill-remove-box-shadow-focus: 0 0 0 2px rgba(59, 130, 246, .5);--ml-icon-remove: "×";--ml-more-badge-bg: #eff6ff;--ml-more-badge-hover-bg: #ffffff;--ml-more-badge-active-bg: #e0f2fe;--ml-count-display-margin-bottom: .5rem;--ml-count-display-margin-top: .5rem;--ml-count-display-margin-left: .5rem;--ml-count-display-margin-right: .5rem;--ml-count-badge-wrapper-bg: transparent;--ml-count-badge-wrapper-border: 1px solid #e5e7eb;--ml-count-badge-wrapper-border-radius: .25rem;--ml-count-badge-wrapper-padding: .25rem .5rem;--ml-count-badge-wrapper-gap: .25rem;--ml-count-badge-wrapper-bg-hover: #f9fafb;--ml-count-badge-wrapper-border-color-hover: #3b82f6;--ml-count-text-bg: transparent;--ml-count-text-border: none;--ml-count-text-font-size: .875rem;--ml-count-text-color: #111827;--ml-count-clear-size: 1rem;--ml-count-clear-bg: transparent;--ml-count-clear-color: #6b7280;--ml-count-clear-font-size: 1.125rem;--ml-count-clear-border-radius: 50%;--ml-count-clear-bg-hover: rgba(59, 130, 246, .2);--ml-count-clear-color-hover: #3b82f6;--ml-icon-clear: "×";--ml-tooltip-bg: #333;--ml-tooltip-color: #fff;--ml-tooltip-padding: .5rem .75rem;--ml-tooltip-border-radius: .375rem;--ml-tooltip-font-size: .875rem;--ml-tooltip-max-width: 20rem;--ml-tooltip-shadow: 0 2px 8px rgba(0, 0, 0, .15);--ml-tooltip-z-index: 10000;--ml-z-index-popover: 10000;--ml-selected-popover-width: 20rem;--ml-selected-popover-max-height: 20rem;--ml-selected-popover-bg: #ffffff;--ml-selected-popover-border: 1px solid #e5e7eb;--ml-selected-popover-border-radius: .375rem;--ml-selected-popover-box-shadow: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 8px 10px -6px rgba(0, 0, 0, .1);--ml-selected-popover-header-padding: .5rem .75rem;--ml-selected-popover-header-bg: rgba(59, 130, 246, .1);--ml-selected-popover-header-border-bottom: 1px solid #e5e7eb;--ml-selected-popover-header-font-size: .875rem;--ml-selected-popover-header-font-weight: 600;--ml-selected-popover-header-color: #111827;--ml-popover-close-size: 1.5rem;--ml-selected-popover-close-bg: transparent;--ml-selected-popover-close-color: #6b7280;--ml-selected-popover-close-font-size: 1.25rem;--ml-selected-popover-close-border-radius: 50%;--ml-selected-popover-close-bg-hover: rgba(59, 130, 246, .2);--ml-selected-popover-close-color-hover: #3b82f6;--ml-selected-popover-body-gap: .25rem;--ml-selected-popover-body-padding: .5rem;--ml-selected-popover-body-max-height: 18rem;--ml-font-size-2xs: .625rem;--ml-font-size-xs: .75rem;--ml-font-size-sm: .875rem;--ml-font-size-base: 1rem;--ml-font-size-lg: 1.125rem;--ml-font-weight-medium: 500;--ml-font-weight-semibold: 600;--ml-line-height-none: 1;--ml-spacing-xs: .25rem;--ml-spacing-sm: .5rem;--ml-spacing-md: .75rem;--ml-spacing-lg: 1rem;--ml-transition-fast: .15s;--ml-transition-normal: .2s;--ml-easing-snappy: cubic-bezier(.4, 0, .2, 1);--ml-placeholder-opacity: .6;--ml-disabled-input-opacity: .6}multi-select:not(:defined){display:block;min-height:2.5rem;color:transparent!important;background:transparent}.ml-wrapper{display:flex;flex-direction:column;align-items:stretch}.ml-wrapper--inline{flex-direction:row;align-items:flex-start}.ml{position:relative;width:100%}.ml__input-wrapper{position:relative;display:flex;align-items:center}.ml__input{width:100%;padding:var(--ml-input-padding, .5rem .75rem);padding-right:var(--ml-input-padding-right, 2.5rem);font-size:var(--ml-input-font-size, .875rem);border:var(--ml-input-border-style, 1px solid #d1d5db);border-radius:var(--ml-input-border-radius, .375rem);background:var(--ml-input-bg, #ffffff);color:var(--ml-input-text, #111827);cursor:pointer;transition:border-color var(--ml-transition-fast, .15s) var(--ml-easing-snappy, cubic-bezier(.4, 0, .2, 1))}.ml__input:focus{outline:none;border-color:var(--ml-input-focus-border-color, #3b82f6)}.ml__input::placeholder{color:var(--ml-input-placeholder-color, #6b7280);opacity:0;transition:opacity var(--ml-transition-fast, .15s) var(--ml-easing-snappy, cubic-bezier(.4, 0, .2, 1))}:host([data-ready]) .ml__input::placeholder{opacity:var(--ml-placeholder-opacity, .6)}.ml__toggle{position:absolute;right:var(--ml-toggle-right, .75rem);top:50%;transform:var(--ml-transform-center-y, translateY(-50%));pointer-events:none;color:var(--ml-toggle-color, #6b7280);transition:transform var(--ml-transition-fast, .15s) var(--ml-easing-snappy, cubic-bezier(.4, 0, .2, 1))}.ml--open .ml__toggle{transform:var(--ml-transform-center-y, translateY(-50%)) rotate(var(--ml-transform-rotate-180, 180deg))}.ml__count-badge{position:absolute;right:var(--ml-count-badge-offset, 2rem);top:50%;transform:var(--ml-transform-center-y, translateY(-50%));padding:var(--ml-count-badge-padding, .125rem .25rem);background:var(--ml-count-badge-bg, #3b82f6);color:var(--ml-count-badge-color, #ffffff);font-size:var(--ml-count-badge-font-size, .75rem);font-weight:var(--ml-count-badge-font-weight, 600);border-radius:var(--ml-count-badge-border-radius, .25rem);cursor:pointer;transition:all var(--ml-transition-fast, .15s) var(--ml-easing-snappy, cubic-bezier(.4, 0, .2, 1))}.ml__count-badge:hover{background:var(--ml-count-badge-bg-hover, #2563eb);transform:var(--ml-transform-center-y, translateY(-50%)) scale(var(--ml-transform-scale-hover, 1.1))}.ml__hint{display:none;position:absolute;z-index:var(--ml-z-index-popover, 10000);padding:var(--ml-hint-padding, .5rem .75rem);background:var(--ml-hint-bg, #ffffff);border:var(--ml-hint-border, 1px solid #e5e7eb);border-radius:var(--ml-hint-border-radius, .375rem);box-shadow:var(--ml-hint-box-shadow, 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -2px rgba(0, 0, 0, .1));font-size:var(--ml-hint-font-size, .75rem);color:var(--ml-hint-color, #6b7280);line-height:var(--ml-line-height-relaxed, 1.4);max-width:100%}.ml__hint--visible{display:block}.ml__dropdown{display:none;position:absolute;z-index:var(--ml-z-index-dropdown, 9999);background:var(--ml-dropdown-bg, #ffffff);border:var(--ml-dropdown-border, 1px solid #e5e7eb);border-radius:var(--ml-dropdown-border-radius, .375rem);box-shadow:var(--ml-dropdown-box-shadow, 0 20px 25px -5px rgba(0, 0, 0, .1), 0 8px 10px -6px rgba(0, 0, 0, .1));max-height:var(--ml-dropdown-max-height, 20rem);overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y;-webkit-overflow-scrolling:touch;color:var(--ml-dropdown-color, #111827)}.ml__dropdown--visible{display:block}.ml__dropdown--virtual{overflow-y:visible;max-height:none}.ml__actions{display:flex;gap:var(--ml-actions-gap, .25rem);padding:var(--ml-actions-padding, .5rem);border-bottom:var(--ml-actions-border-bottom, 1px solid #e5e7eb)}.ml__actions--sticky{position:sticky;top:0;z-index:var(--ml-z-index-sticky, 1);background:var(--ml-actions-bg, #ffffff)}.ml__action-btn{flex:1;padding:var(--ml-action-btn-padding, .25rem .5rem);font-size:var(--ml-action-btn-font-size, .75rem);border:var(--ml-action-btn-border, 1px solid #e5e7eb);border-radius:var(--ml-action-btn-border-radius, .25rem);background:var(--ml-action-btn-bg, transparent);color:var(--ml-action-btn-color, inherit);cursor:pointer;transition:all var(--ml-transition-fast, .15s) var(--ml-easing-snappy, cubic-bezier(.4, 0, .2, 1))}.ml__action-btn:hover{background:var(--ml-action-btn-bg-hover, #f3f4f6);border-color:var(--ml-action-btn-border-color-hover, #3b82f6)}.ml__action-btn:active{transform:scale(var(--ml-transform-scale-active, .98))}.ml__options{padding:var(--ml-options-padding, .25rem 0)}.ml__options--virtual .ml__option{height:var(--ml-option-height, 50px);min-height:var(--ml-option-height, 50px);max-height:var(--ml-option-height, 50px);overflow:hidden;box-sizing:border-box}.ml__group+.ml__group{border-top:var(--ml-group-border-top, 1px solid #e5e7eb);margin-top:var(--ml-group-margin-top, .25rem);padding-top:var(--ml-group-padding-top, .25rem)}.ml__group-label{padding:var(--ml-group-label-padding, .25rem .75rem);font-size:var(--ml-group-label-font-size, .75rem);font-weight:var(--ml-group-label-font-weight, 600);color:var(--ml-group-label-color, #6b7280);text-transform:var(--ml-group-label-transform, uppercase);letter-spacing:var(--ml-group-label-letter-spacing, .05em)}.ml__option{display:flex;align-items:flex-start;gap:var(--ml-option-gap, .5rem);padding:var(--ml-option-padding, .5rem .75rem);cursor:pointer;transition:background-color var(--ml-transition-fast, .15s) var(--ml-easing-snappy, cubic-bezier(.4, 0, .2, 1))}.ml__option:hover{background:var(--ml-option-bg-hover, #f9fafb)}.ml__option--focused{background:var(--ml-option-bg-focused, #f9fafb);outline:var(--ml-option-outline-focused, 2px solid #3b82f6);outline-offset:var(--ml-option-focus-outline-offset, -2px)}.ml__option--matched{background:var(--ml-option-bg-matched, rgba(59, 130, 246, .08));border-left:var(--ml-option-border-matched, 3px solid rgba(59, 130, 246, .4))}.ml__option--selected{background:var(--ml-option-bg-selected, rgba(59, 130, 246, .1))}.ml__option--selected:hover{background:var(--ml-option-bg-selected-hover, var(--ml-option-bg-selected, rgba(59, 130, 246, .1)))}.ml__option--disabled{opacity:var(--ml-disabled-opacity, .5);cursor:not-allowed}.ml__option--disabled:hover{background:var(--ml-option-bg, transparent)}.ml__checkbox{flex-shrink:0;margin-top:var(--ml-checkbox-margin-top, .125rem);cursor:pointer}.ml__option--disabled .ml__checkbox{cursor:not-allowed}.ml__option-content{flex:1;display:flex;align-items:flex-start;gap:var(--ml-option-content-gap, .5rem);min-width:0}.ml__option-icon{flex-shrink:0;width:var(--ml-option-icon-size, 1.25rem);height:var(--ml-option-icon-size, 1.25rem);display:flex;align-items:center;justify-content:center;font-size:var(--ml-option-icon-font-size, 1rem)}.ml__option-icon svg{width:100%;height:100%;fill:currentColor}.ml__option-text{flex:1;min-width:0}.ml__option-title{font-size:var(--ml-option-title-font-size, .875rem);color:var(--ml-option-title-color, inherit);line-height:var(--ml-line-height-relaxed, 1.4)}.ml__option-title mark{background:var(--ml-option-mark-bg, rgba(59, 130, 246, .2));color:var(--ml-option-mark-color, inherit);font-weight:var(--ml-option-mark-font-weight, 600)}.ml__option-subtitle{margin-top:var(--ml-option-subtitle-margin-top, .25rem);font-size:var(--ml-option-subtitle-font-size, .75rem);color:var(--ml-option-subtitle-color, #6b7280);line-height:var(--ml-option-subtitle-line-height, 1.3)}.ml__empty{padding:var(--ml-empty-padding, 1rem .75rem);text-align:center;font-size:var(--ml-empty-font-size, .875rem);color:var(--ml-empty-color, #6b7280)}.ml__loader{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--ml-loader-padding, 1rem);gap:var(--ml-loader-gap, .5rem)}.ml__loading-text{font-size:var(--ml-loading-text-font-size, .875rem);color:var(--ml-loading-text-color, #6b7280)}.ml__pills{display:flex;flex-wrap:wrap;gap:var(--ml-pills-gap, .5rem);padding:0}.ml__pills:empty{display:none}.ml__pills--bottom{margin-top:var(--ml-pills-margin-bottom, .5rem)}.ml__pills--top{margin-bottom:var(--ml-pills-margin-top, .5rem);order:var(--ml-order-first, -1)}.ml__pills--left{order:var(--ml-order-first, -1);margin-right:var(--ml-pills-margin-left, .25rem);justify-content:flex-end}.ml__pills--right{margin-left:var(--ml-pills-margin-right, .25rem);justify-content:flex-start}.ml__count-display{display:flex;align-items:center}.ml__count-display:empty{display:none}.ml__count-display--bottom{margin-top:var(--ml-count-display-margin-bottom, .5rem)}.ml__count-display--top{margin-bottom:var(--ml-count-display-margin-top, .5rem);order:var(--ml-order-first, -1)}.ml__count-display--left{order:var(--ml-order-first, -1);margin-right:var(--ml-count-display-margin-left, .5rem);justify-content:flex-start}.ml__count-display--right{margin-left:var(--ml-count-display-margin-right, .5rem);justify-content:flex-end}.ml__count-badge-wrapper{display:inline-flex;align-items:center;gap:var(--ml-count-badge-wrapper-gap, .25rem);background:var(--ml-count-badge-wrapper-bg, transparent);border:var(--ml-count-badge-wrapper-border, 1px solid #e5e7eb);border-radius:var(--ml-count-badge-wrapper-border-radius, .25rem);padding:var(--ml-count-badge-wrapper-padding, .25rem .5rem);transition:all var(--ml-transition-fast, .15s) var(--ml-easing-snappy, cubic-bezier(.4, 0, .2, 1))}.ml__count-badge-wrapper:hover{background:var(--ml-count-badge-wrapper-bg-hover, #f9fafb);border-color:var(--ml-count-badge-wrapper-border-color-hover, #3b82f6)}.ml__count-text{display:inline-flex;align-items:center;background:var(--ml-count-text-bg, transparent);border:var(--ml-count-text-border, none);padding:0;font-size:var(--ml-count-text-font-size, .875rem);color:var(--ml-count-text-color, #111827);cursor:pointer;transition:color var(--ml-transition-fast, .15s) var(--ml-easing-snappy, cubic-bezier(.4, 0, .2, 1))}.ml__count-clear{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:var(--ml-count-clear-size, 1rem);height:var(--ml-count-clear-size, 1rem);padding:0;border:none;background:var(--ml-count-clear-bg, transparent);color:var(--ml-count-clear-color, #6b7280);font-size:var(--ml-count-clear-font-size, 1.125rem);line-height:var(--ml-line-height-none, 1);cursor:pointer;border-radius:var(--ml-count-clear-border-radius, 50%);transition:all var(--ml-transition-fast, .15s) var(--ml-easing-snappy, cubic-bezier(.4, 0, .2, 1))}.ml__count-clear:hover{background:var(--ml-count-clear-bg-hover, rgba(59, 130, 246, .2));color:var(--ml-count-clear-color-hover, #3b82f6)}.ml__count-clear:before{content:var(--ml-icon-clear, "×")}.ml__pill{display:inline-flex;align-items:center;height:var(--ml-pill-height, 1.5rem);font-size:var(--ml-pill-font-size, .75rem);font-weight:var(--ml-pill-font-weight, 600);line-height:var(--ml-line-height-none, 1);border-radius:var(--ml-pill-border-radius, .375rem);overflow:hidden;max-width:100%}.ml__pill-text{display:flex;align-items:center;height:100%;padding:var(--ml-pill-text-padding, 0 .5rem);background:var(--ml-pill-text-bg, #eff6ff);color:var(--ml-pill-text-color, #3b82f6);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transition:background-color var(--ml-transition-normal, .2s) ease}.ml__pill-remove{display:flex;align-items:center;justify-content:center;width:var(--ml-pill-remove-width, 1.5rem);height:100%;flex-shrink:0;background:var(--ml-pill-remove-bg, #3b82f6);color:var(--ml-pill-remove-color, #ffffff);border:var(--ml-pill-remove-border, none);cursor:pointer;transition:background-color var(--ml-transition-normal, .2s) ease;font-size:var(--ml-pill-remove-font-size, .75rem)}.ml__pill-remove:hover{background:var(--ml-pill-remove-bg-hover, #2563eb)}.ml__pill-remove:focus{outline:none;box-shadow:var(--ml-pill-remove-box-shadow-focus, 0 0 0 2px rgba(59, 130, 246, .5))}.ml__pill-remove:before{content:var(--ml-icon-remove, "×");font-size:var(--ml-font-size-base, 1rem);line-height:var(--ml-line-height-none, 1)}.ml__pill--more{cursor:pointer}.ml__pill--more .ml__pill-text{background:var(--ml-more-badge-bg, #eff6ff);font-weight:var(--ml-pill-font-weight, 600)}.ml__pill--more:hover .ml__pill-text{background:var(--ml-more-badge-hover-bg, #ffffff)}.ml__pill--more:active .ml__pill-text{background:var(--ml-more-badge-active-bg, #e0f2fe)}.ml__pill-tooltip{position:fixed;z-index:var(--ml-tooltip-z-index, 10000);opacity:0;visibility:hidden;transition:opacity var(--ml-transition-normal, .2s) ease,visibility var(--ml-transition-normal, .2s) ease;background:var(--ml-tooltip-bg, #333);color:var(--ml-tooltip-color, #fff);padding:var(--ml-tooltip-padding, .5rem .75rem);border-radius:var(--ml-tooltip-border-radius, .375rem);font-size:var(--ml-tooltip-font-size, .875rem);line-height:var(--ml-line-height-relaxed, 1.4);max-width:var(--ml-tooltip-max-width, 20rem);word-wrap:break-word;white-space:pre-wrap;box-shadow:var(--ml-tooltip-shadow, 0 2px 8px rgba(0, 0, 0, .15));pointer-events:none}.ml__pill-tooltip--visible{opacity:1;visibility:visible}.ml__selected-popover{display:none;position:absolute;z-index:var(--ml-z-index-popover, 10000);background:var(--ml-selected-popover-bg, #ffffff);border:var(--ml-selected-popover-border, 1px solid #e5e7eb);border-radius:var(--ml-selected-popover-border-radius, .375rem);box-shadow:var(--ml-selected-popover-box-shadow, 0 20px 25px -5px rgba(0, 0, 0, .1), 0 8px 10px -6px rgba(0, 0, 0, .1));width:var(--ml-selected-popover-width, 20rem);max-height:var(--ml-selected-popover-max-height, 20rem);overflow:hidden}.ml__selected-popover--visible{display:flex;flex-direction:column}.ml__selected-popover--virtual{display:block;overflow:visible;max-height:none}.ml__selected-popover-header{display:flex;align-items:center;justify-content:space-between;padding:var(--ml-selected-popover-header-padding, .5rem .75rem);background:var(--ml-selected-popover-header-bg, rgba(59, 130, 246, .1));border-bottom:var(--ml-selected-popover-header-border-bottom, 1px solid #e5e7eb);font-size:var(--ml-selected-popover-header-font-size, .875rem);font-weight:var(--ml-selected-popover-header-font-weight, 600);color:var(--ml-selected-popover-header-color, #111827)}.ml__selected-popover-close{display:flex;align-items:center;justify-content:center;width:var(--ml-popover-close-size, 1.5rem);height:var(--ml-popover-close-size, 1.5rem);padding:0;border:none;background:var(--ml-selected-popover-close-bg, transparent);color:var(--ml-selected-popover-close-color, #6b7280);font-size:var(--ml-selected-popover-close-font-size, 1.25rem);line-height:var(--ml-line-height-none, 1);cursor:pointer;border-radius:var(--ml-selected-popover-close-border-radius, 50%);transition:all var(--ml-transition-fast, .15s) var(--ml-easing-snappy, cubic-bezier(.4, 0, .2, 1))}.ml__selected-popover-close:hover{background:var(--ml-selected-popover-close-bg-hover, rgba(59, 130, 246, .2));color:var(--ml-selected-popover-close-color-hover, #3b82f6)}.ml__selected-popover-body{display:flex;flex-direction:column;gap:var(--ml-selected-popover-body-gap, .25rem);padding:var(--ml-selected-popover-body-padding, .5rem);overflow-y:auto;max-height:var(--ml-selected-popover-body-max-height, 18rem)}.ml__selected-popover-body .ml__pill{width:100%}.ml__selected-popover-body .ml__pill-text{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}.ml__selected-popover-body--virtual{display:block;max-height:none;padding:0}.ml__selected-popover-body--virtual .ml__pill{height:var(--ml-pill-height-virtual, 36px);min-height:var(--ml-pill-height-virtual, 36px);max-height:var(--ml-pill-height-virtual, 36px);margin-bottom:var(--ml-selected-popover-body-gap, .25rem);overflow:hidden;box-sizing:border-box}.ml--rtl .ml__input-wrapper{direction:rtl}.ml--rtl .ml__input{text-align:right;padding-left:var(--ml-input-padding-right, 2.5rem);padding-right:var(--ml-input-padding-h, .75rem)}.ml--rtl .ml__toggle{left:var(--ml-toggle-right, .75rem)!important;right:auto!important}.ml--rtl .ml__count-badge{left:var(--ml-count-badge-offset, 2rem)!important;right:auto!important}.ml--rtl .ml__dropdown{direction:rtl;text-align:right}.ml--rtl .ml__option{flex-direction:row-reverse}.ml--rtl .ml__checkbox{margin-left:var(--ml-spacing-sm, .5rem);margin-right:0}.ml--rtl .ml__option-content{text-align:right}.ml--rtl .ml__option-icon{margin-left:var(--ml-spacing-xs, .25rem);margin-right:0}.ml--rtl .ml__pills{direction:rtl}.ml--rtl .ml__pill{flex-direction:row-reverse}.ml--rtl .ml__pill-remove{border-radius:var(--ml-pill-remove-border-radius-rtl, .375rem) 0 0 var(--ml-pill-remove-border-radius-rtl, .375rem);border-left:var(--ml-pill-remove-border, none);border-right:none}.ml--rtl .ml__pill-text{border-radius:0 var(--ml-pill-text-border-radius-rtl, .375rem) var(--ml-pill-text-border-radius-rtl, .375rem) 0}.ml--rtl .ml__count-display{direction:rtl}.ml--rtl .ml__count-badge-wrapper{flex-direction:row-reverse}.ml--rtl .ml__selected-popover{direction:rtl;text-align:right}.ml--rtl .ml__actions{direction:rtl}.ml--rtl .ml__group-label,.ml--rtl .ml__empty{text-align:right}.ml--rtl .ml__hint{direction:rtl;text-align:right}.ml--xs .ml__input{font-size:var(--ml-font-size-xs, .75rem)}.ml--xs .ml__option{padding:var(--ml-spacing-xs, .25rem) var(--ml-spacing-sm, .5rem)}.ml--xs .ml__option-title{font-size:var(--ml-font-size-xs, .75rem)}.ml--xs .ml__pill{font-size:var(--ml-font-size-2xs, .625rem)}.ml--sm .ml__input,.ml--sm .ml__option-title{font-size:var(--ml-font-size-xs, .75rem)}.ml--lg .ml__input,.ml--lg .ml__option-title{font-size:var(--ml-font-size-base, 1rem)}.ml--lg .ml__pill{font-size:var(--ml-font-size-sm, .875rem)}.ml--xl .ml__input,.ml--xl .ml__option-title{font-size:var(--ml-font-size-lg, 1.125rem)}.ml--xl .ml__pill{font-size:var(--ml-font-size-base, 1rem)}.ml--disabled .ml__input{opacity:var(--ml-disabled-input-opacity, .6);cursor:not-allowed;background:var(--ml-input-bg-disabled, rgba(107, 114, 128, .05))}.ml--disabled .ml__toggle{opacity:var(--ml-disabled-input-opacity, .6)}.ml--no-checkboxes .ml__option{gap:0;padding-left:var(--ml-option-padding-h, .75rem)}.ml--no-checkboxes .ml__option-content{padding-left:0}.ml-debug-info{margin-top:.25rem;padding:.25rem;background-color:#f9fafb;border:1px solid #e5e7eb;border-radius:.375rem;font-size:.75rem;color:#111827}.ml-debug-info details summary{cursor:pointer;font-weight:600;color:#2563eb;-webkit-user-select:none;user-select:none;padding:.25rem;border-radius:.25rem}.ml-debug-info details summary:hover{background-color:#f3f4f6}.ml-debug-info details summary:focus{outline:2px solid #3b82f6;outline-offset:2px}.ml-debug-info .ml-debug-stats{display:flex;flex-direction:column;gap:.25rem;margin-top:.25rem;padding:.25rem;background-color:#fff;border-radius:.25rem}.ml-debug-info .ml-debug-stats span{display:flex;justify-content:space-between;padding:2px 4px;font-family:monospace;font-size:.625rem}.ml-debug-info .ml-debug-stats span:before{content:"•";margin-right:.25rem;color:#3b82f6}', hi = typeof HTMLElement < "u" ? HTMLElement : class {
|
|
2314
|
+
const pi = '@charset "UTF-8";:host{--ml-accent-color: #3b82f6;--ml-accent-color-hover: #2563eb;--ml-accent-color-active: #1d4ed8;--ml-text-primary: #111827;--ml-text-secondary: #6b7280;--ml-text-white: #ffffff;--ml-primary-bg: #f3f4f6;--ml-primary-bg-hover: #e5e7eb;--ml-border-color: #e5e7eb;--ml-input-padding: .5rem .75rem;--ml-input-padding-right: 2.5rem;--ml-input-font-size: .875rem;--ml-input-border-style: 1px solid #d1d5db;--ml-input-border-radius: .375rem;--ml-input-bg: #ffffff;--ml-input-text: #111827;--ml-input-focus-border-color: #3b82f6;--ml-input-placeholder-color: #6b7280;--ml-input-bg-disabled: rgba(107, 114, 128, .05);--ml-toggle-right: .75rem;--ml-toggle-color: #6b7280;--ml-transform-center-y: translateY(-50%);--ml-transform-rotate-180: 180deg;--ml-count-badge-offset: 2rem;--ml-count-badge-padding: .125rem .25rem;--ml-count-badge-bg: #3b82f6;--ml-count-badge-color: #ffffff;--ml-count-badge-font-size: .75rem;--ml-count-badge-font-weight: 600;--ml-count-badge-border-radius: .25rem;--ml-count-badge-bg-hover: #2563eb;--ml-transform-scale-hover: 1.1;--ml-hint-padding: .5rem .75rem;--ml-hint-bg: #ffffff;--ml-hint-border: 1px solid #e5e7eb;--ml-hint-border-radius: .375rem;--ml-hint-box-shadow: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -2px rgba(0, 0, 0, .1);--ml-hint-font-size: .75rem;--ml-hint-color: #6b7280;--ml-line-height-relaxed: 1.4;--ml-dropdown-bg: #ffffff;--ml-dropdown-border: 1px solid #e5e7eb;--ml-dropdown-border-radius: .375rem;--ml-dropdown-box-shadow: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 8px 10px -6px rgba(0, 0, 0, .1);--ml-dropdown-max-height: 20rem;--ml-dropdown-color: #111827;--ml-z-index-dropdown: 9999;--ml-z-index-sticky: 1;--ml-actions-gap: .25rem;--ml-actions-padding: .5rem;--ml-actions-border-bottom: 1px solid #e5e7eb;--ml-actions-bg: #ffffff;--ml-action-btn-padding: .25rem .5rem;--ml-action-btn-font-size: .75rem;--ml-action-btn-border: 1px solid #e5e7eb;--ml-action-btn-border-radius: .25rem;--ml-action-btn-bg: transparent;--ml-action-btn-color: inherit;--ml-action-btn-bg-hover: #f3f4f6;--ml-action-btn-border-color-hover: #3b82f6;--ml-transform-scale-active: .98;--ml-options-padding: .25rem 0;--ml-group-border-top: 1px solid #e5e7eb;--ml-group-margin-top: .25rem;--ml-group-padding-top: .25rem;--ml-group-label-padding: .25rem .75rem;--ml-group-label-font-size: .75rem;--ml-group-label-font-weight: 600;--ml-group-label-color: #6b7280;--ml-group-label-transform: uppercase;--ml-group-label-letter-spacing: .05em;--ml-option-gap: .5rem;--ml-option-padding: .5rem .75rem;--ml-option-padding-h: .75rem;--ml-option-bg: transparent;--ml-option-bg-hover: #f9fafb;--ml-option-bg-focused: #f9fafb;--ml-option-outline-focused: 2px solid #3b82f6;--ml-option-focus-outline-offset: -2px;--ml-option-bg-matched: rgba(59, 130, 246, .08);--ml-option-border-matched: 3px solid rgba(59, 130, 246, .4);--ml-option-bg-selected: rgba(59, 130, 246, .1);--ml-disabled-opacity: .5;--ml-option-content-gap: .5rem;--ml-option-icon-size: 1.25rem;--ml-option-icon-font-size: 1rem;--ml-option-title-font-size: .875rem;--ml-option-title-color: inherit;--ml-option-mark-bg: rgba(59, 130, 246, .2);--ml-option-mark-color: inherit;--ml-option-mark-font-weight: 600;--ml-option-subtitle-margin-top: .25rem;--ml-option-subtitle-font-size: .75rem;--ml-option-subtitle-color: #6b7280;--ml-option-subtitle-line-height: 1.3;--ml-checkbox-margin-top: .125rem;--ml-empty-padding: 1rem .75rem;--ml-empty-font-size: .875rem;--ml-empty-color: #6b7280;--ml-loader-padding: 1rem;--ml-loader-gap: .5rem;--ml-loading-text-font-size: .875rem;--ml-loading-text-color: #6b7280;--ml-pills-gap: .5rem;--ml-pills-margin-bottom: .5rem;--ml-pills-margin-top: .5rem;--ml-pills-margin-left: .25rem;--ml-pills-margin-right: .25rem;--ml-pill-gap: .5rem;--ml-pill-height: 1.5rem;--ml-pill-font-size: .75rem;--ml-pill-font-weight: 600;--ml-pill-border-radius: .375rem;--ml-pill-bg: #eff6ff;--ml-pill-bg-hover: #ffffff;--ml-pill-bg-active: #e0f2fe;--ml-order-first: -1;--ml-pill-text-padding: 0 .5rem;--ml-pill-text-bg: #eff6ff;--ml-pill-text-color: #3b82f6;--ml-pill-remove-width: 1.5rem;--ml-pill-remove-bg: #3b82f6;--ml-pill-remove-color: #ffffff;--ml-pill-remove-border: none;--ml-pill-remove-font-size: .75rem;--ml-pill-remove-bg-hover: #2563eb;--ml-pill-remove-box-shadow-focus: 0 0 0 2px rgba(59, 130, 246, .5);--ml-icon-remove: "×";--ml-pill-indicator-bg: transparent;--ml-pill-indicator-border: 1px solid #e5e7eb;--ml-pill-indicator-border-radius: .25rem;--ml-pill-indicator-text-color: #6b7280;--ml-pill-indicator-text-bg: #d1d5db;--ml-pill-indicator-remove-bg: #6b7280;--ml-pill-indicator-remove-color: #ffffff;--ml-pill-indicator-remove-bg-hover: #111827;--ml-more-badge-bg: #eff6ff;--ml-more-badge-hover-bg: #ffffff;--ml-more-badge-active-bg: #e0f2fe;--ml-count-display-margin-bottom: .5rem;--ml-count-display-margin-top: .5rem;--ml-count-display-margin-left: .5rem;--ml-count-display-margin-right: .5rem;--ml-count-badge-wrapper-bg: transparent;--ml-count-badge-wrapper-border: 1px solid #e5e7eb;--ml-count-badge-wrapper-border-radius: .25rem;--ml-count-badge-wrapper-padding: .25rem .5rem;--ml-count-badge-wrapper-gap: .25rem;--ml-count-badge-wrapper-bg-hover: #f9fafb;--ml-count-badge-wrapper-border-color-hover: #3b82f6;--ml-count-text-bg: transparent;--ml-count-text-border: none;--ml-count-text-font-size: .875rem;--ml-count-text-color: #111827;--ml-count-clear-size: 1rem;--ml-count-clear-bg: transparent;--ml-count-clear-color: #6b7280;--ml-count-clear-font-size: 1.125rem;--ml-count-clear-border-radius: 50%;--ml-count-clear-bg-hover: rgba(59, 130, 246, .2);--ml-count-clear-color-hover: #3b82f6;--ml-icon-clear: "×";--ml-tooltip-bg: #333;--ml-tooltip-color: #fff;--ml-tooltip-padding: .5rem .75rem;--ml-tooltip-border-radius: .375rem;--ml-tooltip-font-size: .875rem;--ml-tooltip-max-width: 20rem;--ml-tooltip-shadow: 0 2px 8px rgba(0, 0, 0, .15);--ml-tooltip-z-index: 10000;--ml-z-index-popover: 10000;--ml-selected-popover-width: 20rem;--ml-selected-popover-max-height: 20rem;--ml-selected-popover-bg: #ffffff;--ml-selected-popover-border: 1px solid #e5e7eb;--ml-selected-popover-border-radius: .375rem;--ml-selected-popover-box-shadow: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 8px 10px -6px rgba(0, 0, 0, .1);--ml-selected-popover-header-padding: .5rem .75rem;--ml-selected-popover-header-bg: rgba(59, 130, 246, .1);--ml-selected-popover-header-border-bottom: 1px solid #e5e7eb;--ml-selected-popover-header-font-size: .875rem;--ml-selected-popover-header-font-weight: 600;--ml-selected-popover-header-color: #111827;--ml-popover-close-size: 1.5rem;--ml-selected-popover-close-bg: transparent;--ml-selected-popover-close-color: #6b7280;--ml-selected-popover-close-font-size: 1.25rem;--ml-selected-popover-close-border-radius: 50%;--ml-selected-popover-close-bg-hover: rgba(59, 130, 246, .2);--ml-selected-popover-close-color-hover: #3b82f6;--ml-selected-popover-body-gap: .25rem;--ml-selected-popover-body-padding: .5rem;--ml-selected-popover-body-max-height: 18rem;--ml-font-size-2xs: .625rem;--ml-font-size-xs: .75rem;--ml-font-size-sm: .875rem;--ml-font-size-base: 1rem;--ml-font-size-lg: 1.125rem;--ml-font-weight-medium: 500;--ml-font-weight-semibold: 600;--ml-line-height-none: 1;--ml-spacing-xs: .25rem;--ml-spacing-sm: .5rem;--ml-spacing-md: .75rem;--ml-spacing-lg: 1rem;--ml-transition-fast: .15s;--ml-transition-normal: .2s;--ml-easing-snappy: cubic-bezier(.4, 0, .2, 1);--ml-placeholder-opacity: .6;--ml-disabled-input-opacity: .6}multi-select:not(:defined){display:block;min-height:2.5rem;color:transparent!important;background:transparent}.ml-wrapper{display:flex;flex-direction:column;align-items:stretch}.ml-wrapper--inline{flex-direction:row;align-items:flex-start}.ml{position:relative;width:100%}.ml__input-wrapper{position:relative;display:flex;align-items:center}.ml__input{width:100%;padding:var(--ml-input-padding, .5rem .75rem);padding-right:var(--ml-input-padding-right, 2.5rem);font-size:var(--ml-input-font-size, .875rem);border:var(--ml-input-border-style, 1px solid #d1d5db);border-radius:var(--ml-input-border-radius, .375rem);background:var(--ml-input-bg, #ffffff);color:var(--ml-input-text, #111827);cursor:pointer;transition:border-color var(--ml-transition-fast, .15s) var(--ml-easing-snappy, cubic-bezier(.4, 0, .2, 1))}.ml__input:focus{outline:none;border-color:var(--ml-input-focus-border-color, #3b82f6)}.ml__input::placeholder{color:var(--ml-input-placeholder-color, #6b7280);opacity:0;transition:opacity var(--ml-transition-fast, .15s) var(--ml-easing-snappy, cubic-bezier(.4, 0, .2, 1))}:host([data-ready]) .ml__input::placeholder{opacity:var(--ml-placeholder-opacity, .6)}.ml__toggle{position:absolute;right:var(--ml-toggle-right, .75rem);top:50%;transform:var(--ml-transform-center-y, translateY(-50%));pointer-events:none;color:var(--ml-toggle-color, #6b7280);transition:transform var(--ml-transition-fast, .15s) var(--ml-easing-snappy, cubic-bezier(.4, 0, .2, 1))}.ml--open .ml__toggle{transform:var(--ml-transform-center-y, translateY(-50%)) rotate(var(--ml-transform-rotate-180, 180deg))}.ml__count-badge{position:absolute;right:var(--ml-count-badge-offset, 2rem);top:50%;transform:var(--ml-transform-center-y, translateY(-50%));padding:var(--ml-count-badge-padding, .125rem .25rem);background:var(--ml-count-badge-bg, #3b82f6);color:var(--ml-count-badge-color, #ffffff);font-size:var(--ml-count-badge-font-size, .75rem);font-weight:var(--ml-count-badge-font-weight, 600);border-radius:var(--ml-count-badge-border-radius, .25rem);cursor:pointer;transition:all var(--ml-transition-fast, .15s) var(--ml-easing-snappy, cubic-bezier(.4, 0, .2, 1))}.ml__count-badge:hover{background:var(--ml-count-badge-bg-hover, #2563eb);transform:var(--ml-transform-center-y, translateY(-50%)) scale(var(--ml-transform-scale-hover, 1.1))}.ml__hint{display:none;position:absolute;z-index:var(--ml-z-index-popover, 10000);padding:var(--ml-hint-padding, .5rem .75rem);background:var(--ml-hint-bg, #ffffff);border:var(--ml-hint-border, 1px solid #e5e7eb);border-radius:var(--ml-hint-border-radius, .375rem);box-shadow:var(--ml-hint-box-shadow, 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -2px rgba(0, 0, 0, .1));font-size:var(--ml-hint-font-size, .75rem);color:var(--ml-hint-color, #6b7280);line-height:var(--ml-line-height-relaxed, 1.4);max-width:100%}.ml__hint--visible{display:block}.ml__dropdown{display:none;position:absolute;z-index:var(--ml-z-index-dropdown, 9999);background:var(--ml-dropdown-bg, #ffffff);border:var(--ml-dropdown-border, 1px solid #e5e7eb);border-radius:var(--ml-dropdown-border-radius, .375rem);box-shadow:var(--ml-dropdown-box-shadow, 0 20px 25px -5px rgba(0, 0, 0, .1), 0 8px 10px -6px rgba(0, 0, 0, .1));max-height:var(--ml-dropdown-max-height, 20rem);overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y;-webkit-overflow-scrolling:touch;color:var(--ml-dropdown-color, #111827)}.ml__dropdown--visible{display:block}.ml__dropdown--virtual{overflow-y:visible;max-height:none}.ml__actions{display:flex;gap:var(--ml-actions-gap, .25rem);padding:var(--ml-actions-padding, .5rem);border-bottom:var(--ml-actions-border-bottom, 1px solid #e5e7eb)}.ml__actions--sticky{position:sticky;top:0;z-index:var(--ml-z-index-sticky, 1);background:var(--ml-actions-bg, #ffffff)}.ml__action-btn{flex:1;padding:var(--ml-action-btn-padding, .25rem .5rem);font-size:var(--ml-action-btn-font-size, .75rem);border:var(--ml-action-btn-border, 1px solid #e5e7eb);border-radius:var(--ml-action-btn-border-radius, .25rem);background:var(--ml-action-btn-bg, transparent);color:var(--ml-action-btn-color, inherit);cursor:pointer;transition:all var(--ml-transition-fast, .15s) var(--ml-easing-snappy, cubic-bezier(.4, 0, .2, 1))}.ml__action-btn:hover{background:var(--ml-action-btn-bg-hover, #f3f4f6);border-color:var(--ml-action-btn-border-color-hover, #3b82f6)}.ml__action-btn:active{transform:scale(var(--ml-transform-scale-active, .98))}.ml__options{padding:var(--ml-options-padding, .25rem 0)}.ml__options--virtual .ml__option{height:var(--ml-option-height, 50px);min-height:var(--ml-option-height, 50px);max-height:var(--ml-option-height, 50px);overflow:hidden;box-sizing:border-box}.ml__group+.ml__group{border-top:var(--ml-group-border-top, 1px solid #e5e7eb);margin-top:var(--ml-group-margin-top, .25rem);padding-top:var(--ml-group-padding-top, .25rem)}.ml__group-label{padding:var(--ml-group-label-padding, .25rem .75rem);font-size:var(--ml-group-label-font-size, .75rem);font-weight:var(--ml-group-label-font-weight, 600);color:var(--ml-group-label-color, #6b7280);text-transform:var(--ml-group-label-transform, uppercase);letter-spacing:var(--ml-group-label-letter-spacing, .05em)}.ml__option{display:flex;align-items:flex-start;gap:var(--ml-option-gap, .5rem);padding:var(--ml-option-padding, .5rem .75rem);cursor:pointer;transition:background-color var(--ml-transition-fast, .15s) var(--ml-easing-snappy, cubic-bezier(.4, 0, .2, 1))}.ml__option:hover{background:var(--ml-option-bg-hover, #f9fafb)}.ml__option--focused{background:var(--ml-option-bg-focused, #f9fafb);outline:var(--ml-option-outline-focused, 2px solid #3b82f6);outline-offset:var(--ml-option-focus-outline-offset, -2px)}.ml__option--matched{background:var(--ml-option-bg-matched, rgba(59, 130, 246, .08));border-left:var(--ml-option-border-matched, 3px solid rgba(59, 130, 246, .4))}.ml__option--selected{background:var(--ml-option-bg-selected, rgba(59, 130, 246, .1))}.ml__option--selected:hover{background:var(--ml-option-bg-selected-hover, var(--ml-option-bg-selected, rgba(59, 130, 246, .1)))}.ml__option--disabled{opacity:var(--ml-disabled-opacity, .5);cursor:not-allowed}.ml__option--disabled:hover{background:var(--ml-option-bg, transparent)}.ml__checkbox{flex-shrink:0;margin-top:var(--ml-checkbox-margin-top, .125rem);cursor:pointer}.ml__option--disabled .ml__checkbox{cursor:not-allowed}.ml__option-content{flex:1;display:flex;align-items:flex-start;gap:var(--ml-option-content-gap, .5rem);min-width:0}.ml__option-icon{flex-shrink:0;width:var(--ml-option-icon-size, 1.25rem);height:var(--ml-option-icon-size, 1.25rem);display:flex;align-items:center;justify-content:center;font-size:var(--ml-option-icon-font-size, 1rem)}.ml__option-icon svg{width:100%;height:100%;fill:currentColor}.ml__option-text{flex:1;min-width:0}.ml__option-title{font-size:var(--ml-option-title-font-size, .875rem);color:var(--ml-option-title-color, inherit);line-height:var(--ml-line-height-relaxed, 1.4)}.ml__option-title mark{background:var(--ml-option-mark-bg, rgba(59, 130, 246, .2));color:var(--ml-option-mark-color, inherit);font-weight:var(--ml-option-mark-font-weight, 600)}.ml__option-subtitle{margin-top:var(--ml-option-subtitle-margin-top, .25rem);font-size:var(--ml-option-subtitle-font-size, .75rem);color:var(--ml-option-subtitle-color, #6b7280);line-height:var(--ml-option-subtitle-line-height, 1.3)}.ml__empty{padding:var(--ml-empty-padding, 1rem .75rem);text-align:center;font-size:var(--ml-empty-font-size, .875rem);color:var(--ml-empty-color, #6b7280)}.ml__loader{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--ml-loader-padding, 1rem);gap:var(--ml-loader-gap, .5rem)}.ml__loading-text{font-size:var(--ml-loading-text-font-size, .875rem);color:var(--ml-loading-text-color, #6b7280)}.ml__pills{display:flex;flex-wrap:wrap;gap:var(--ml-pills-gap, .5rem);padding:0}.ml__pills:empty{display:none}.ml__pills--bottom{margin-top:var(--ml-pills-margin-bottom, .5rem)}.ml__pills--top{margin-bottom:var(--ml-pills-margin-top, .5rem);order:var(--ml-order-first, -1)}.ml__pills--left{order:var(--ml-order-first, -1);margin-right:var(--ml-pills-margin-left, .25rem);justify-content:flex-end}.ml__pills--right{margin-left:var(--ml-pills-margin-right, .25rem);justify-content:flex-start}.ml__count-display{display:flex;align-items:center}.ml__count-display:empty{display:none}.ml__count-display--bottom{margin-top:var(--ml-count-display-margin-bottom, .5rem)}.ml__count-display--top{margin-bottom:var(--ml-count-display-margin-top, .5rem);order:var(--ml-order-first, -1)}.ml__count-display--left{order:var(--ml-order-first, -1);margin-right:var(--ml-count-display-margin-left, .5rem);justify-content:flex-start}.ml__count-display--right{margin-left:var(--ml-count-display-margin-right, .5rem);justify-content:flex-end}.ml__count-badge-wrapper{display:inline-flex;align-items:center;gap:var(--ml-count-badge-wrapper-gap, .25rem);background:var(--ml-count-badge-wrapper-bg, transparent);border:var(--ml-count-badge-wrapper-border, 1px solid #e5e7eb);border-radius:var(--ml-count-badge-wrapper-border-radius, .25rem);padding:var(--ml-count-badge-wrapper-padding, .25rem .5rem);transition:all var(--ml-transition-fast, .15s) var(--ml-easing-snappy, cubic-bezier(.4, 0, .2, 1))}.ml__count-badge-wrapper:hover{background:var(--ml-count-badge-wrapper-bg-hover, #f9fafb);border-color:var(--ml-count-badge-wrapper-border-color-hover, #3b82f6)}.ml__count-text{display:inline-flex;align-items:center;background:var(--ml-count-text-bg, transparent);border:var(--ml-count-text-border, none);padding:0;font-size:var(--ml-count-text-font-size, .875rem);color:var(--ml-count-text-color, #111827);cursor:pointer;transition:color var(--ml-transition-fast, .15s) var(--ml-easing-snappy, cubic-bezier(.4, 0, .2, 1))}.ml__count-clear{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:var(--ml-count-clear-size, 1rem);height:var(--ml-count-clear-size, 1rem);padding:0;border:none;background:var(--ml-count-clear-bg, transparent);color:var(--ml-count-clear-color, #6b7280);font-size:var(--ml-count-clear-font-size, 1.125rem);line-height:var(--ml-line-height-none, 1);cursor:pointer;border-radius:var(--ml-count-clear-border-radius, 50%);transition:all var(--ml-transition-fast, .15s) var(--ml-easing-snappy, cubic-bezier(.4, 0, .2, 1))}.ml__count-clear:hover{background:var(--ml-count-clear-bg-hover, rgba(59, 130, 246, .2));color:var(--ml-count-clear-color-hover, #3b82f6)}.ml__count-clear:before{content:var(--ml-icon-clear, "×")}.ml__pill{display:inline-flex;align-items:center;height:var(--ml-pill-height, 1.5rem);font-size:var(--ml-pill-font-size, .75rem);font-weight:var(--ml-pill-font-weight, 600);line-height:var(--ml-line-height-none, 1);border-radius:var(--ml-pill-border-radius, .375rem);overflow:hidden;max-width:100%}.ml__pill-text{display:flex;align-items:center;height:100%;padding:var(--ml-pill-text-padding, 0 .5rem);background:var(--ml-pill-text-bg, #eff6ff);color:var(--ml-pill-text-color, #3b82f6);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transition:background-color var(--ml-transition-normal, .2s) ease}.ml__pill-remove{display:flex;align-items:center;justify-content:center;width:var(--ml-pill-remove-width, 1.5rem);height:100%;flex-shrink:0;background:var(--ml-pill-remove-bg, #3b82f6);color:var(--ml-pill-remove-color, #ffffff);border:var(--ml-pill-remove-border, none);cursor:pointer;transition:background-color var(--ml-transition-normal, .2s) ease;font-size:var(--ml-pill-remove-font-size, .75rem)}.ml__pill-remove:hover{background:var(--ml-pill-remove-bg-hover, #2563eb)}.ml__pill-remove:focus{outline:none;box-shadow:var(--ml-pill-remove-box-shadow-focus, 0 0 0 2px rgba(59, 130, 246, .5))}.ml__pill-remove:before{content:var(--ml-icon-remove, "×");font-size:var(--ml-font-size-base, 1rem);line-height:var(--ml-line-height-none, 1)}.ml__pill--indicator{border:var(--ml-pill-indicator-border, 1px solid #e5e7eb)}.ml__pill--indicator .ml__pill-text{background:var(--ml-pill-indicator-text-bg, #d1d5db);color:var(--ml-pill-indicator-text-color, #6b7280)}.ml__pill--indicator .ml__pill-remove{background:var(--ml-pill-indicator-remove-bg, #6b7280);color:var(--ml-pill-indicator-remove-color, #ffffff)}.ml__pill--indicator .ml__pill-remove:hover{background:var(--ml-pill-indicator-remove-bg-hover, #111827)}.ml__pill--more{cursor:pointer}.ml__pill-tooltip{position:fixed;z-index:var(--ml-tooltip-z-index, 10000);opacity:0;visibility:hidden;transition:opacity var(--ml-transition-normal, .2s) ease,visibility var(--ml-transition-normal, .2s) ease;background:var(--ml-tooltip-bg, #333);color:var(--ml-tooltip-color, #fff);padding:var(--ml-tooltip-padding, .5rem .75rem);border-radius:var(--ml-tooltip-border-radius, .375rem);font-size:var(--ml-tooltip-font-size, .875rem);line-height:var(--ml-line-height-relaxed, 1.4);max-width:var(--ml-tooltip-max-width, 20rem);word-wrap:break-word;white-space:pre-wrap;box-shadow:var(--ml-tooltip-shadow, 0 2px 8px rgba(0, 0, 0, .15));pointer-events:none}.ml__pill-tooltip--visible{opacity:1;visibility:visible}.ml__selected-popover{display:none;position:absolute;z-index:var(--ml-z-index-popover, 10000);background:var(--ml-selected-popover-bg, #ffffff);border:var(--ml-selected-popover-border, 1px solid #e5e7eb);border-radius:var(--ml-selected-popover-border-radius, .375rem);box-shadow:var(--ml-selected-popover-box-shadow, 0 20px 25px -5px rgba(0, 0, 0, .1), 0 8px 10px -6px rgba(0, 0, 0, .1));width:var(--ml-selected-popover-width, 20rem);max-height:var(--ml-selected-popover-max-height, 20rem);overflow:hidden}.ml__selected-popover--visible{display:flex;flex-direction:column}.ml__selected-popover--virtual{display:block;overflow:visible;max-height:none}.ml__selected-popover-header{display:flex;align-items:center;justify-content:space-between;padding:var(--ml-selected-popover-header-padding, .5rem .75rem);background:var(--ml-selected-popover-header-bg, rgba(59, 130, 246, .1));border-bottom:var(--ml-selected-popover-header-border-bottom, 1px solid #e5e7eb);font-size:var(--ml-selected-popover-header-font-size, .875rem);font-weight:var(--ml-selected-popover-header-font-weight, 600);color:var(--ml-selected-popover-header-color, #111827)}.ml__selected-popover-close{display:flex;align-items:center;justify-content:center;width:var(--ml-popover-close-size, 1.5rem);height:var(--ml-popover-close-size, 1.5rem);padding:0;border:none;background:var(--ml-selected-popover-close-bg, transparent);color:var(--ml-selected-popover-close-color, #6b7280);font-size:var(--ml-selected-popover-close-font-size, 1.25rem);line-height:var(--ml-line-height-none, 1);cursor:pointer;border-radius:var(--ml-selected-popover-close-border-radius, 50%);transition:all var(--ml-transition-fast, .15s) var(--ml-easing-snappy, cubic-bezier(.4, 0, .2, 1))}.ml__selected-popover-close:hover{background:var(--ml-selected-popover-close-bg-hover, rgba(59, 130, 246, .2));color:var(--ml-selected-popover-close-color-hover, #3b82f6)}.ml__selected-popover-body{display:flex;flex-direction:column;gap:var(--ml-selected-popover-body-gap, .25rem);padding:var(--ml-selected-popover-body-padding, .5rem);overflow-y:auto;max-height:var(--ml-selected-popover-body-max-height, 18rem)}.ml__selected-popover-body .ml__pill{width:100%}.ml__selected-popover-body .ml__pill-text{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}.ml__selected-popover-body--virtual{display:block;max-height:none;padding:0}.ml__selected-popover-body--virtual .ml__pill{height:var(--ml-pill-height-virtual, 36px);min-height:var(--ml-pill-height-virtual, 36px);max-height:var(--ml-pill-height-virtual, 36px);margin-bottom:var(--ml-selected-popover-body-gap, .25rem);overflow:hidden;box-sizing:border-box}.ml--rtl .ml__input-wrapper{direction:rtl}.ml--rtl .ml__input{text-align:right;padding-left:var(--ml-input-padding-right, 2.5rem);padding-right:var(--ml-input-padding-h, .75rem)}.ml--rtl .ml__toggle{left:var(--ml-toggle-right, .75rem)!important;right:auto!important}.ml--rtl .ml__count-badge{left:var(--ml-count-badge-offset, 2rem)!important;right:auto!important}.ml--rtl .ml__dropdown{direction:rtl;text-align:right}.ml--rtl .ml__option{flex-direction:row-reverse}.ml--rtl .ml__checkbox{margin-left:var(--ml-spacing-sm, .5rem);margin-right:0}.ml--rtl .ml__option-content{text-align:right}.ml--rtl .ml__option-icon{margin-left:var(--ml-spacing-xs, .25rem);margin-right:0}.ml--rtl .ml__pills{direction:rtl}.ml--rtl .ml__pill{flex-direction:row-reverse}.ml--rtl .ml__pill-remove{border-radius:var(--ml-pill-remove-border-radius-rtl, .375rem) 0 0 var(--ml-pill-remove-border-radius-rtl, .375rem);border-left:var(--ml-pill-remove-border, none);border-right:none}.ml--rtl .ml__pill-text{border-radius:0 var(--ml-pill-text-border-radius-rtl, .375rem) var(--ml-pill-text-border-radius-rtl, .375rem) 0}.ml--rtl .ml__count-display{direction:rtl}.ml--rtl .ml__count-badge-wrapper{flex-direction:row-reverse}.ml--rtl .ml__selected-popover{direction:rtl;text-align:right}.ml--rtl .ml__actions{direction:rtl}.ml--rtl .ml__group-label,.ml--rtl .ml__empty{text-align:right}.ml--rtl .ml__hint{direction:rtl;text-align:right}.ml--xs .ml__input{font-size:var(--ml-font-size-xs, .75rem)}.ml--xs .ml__option{padding:var(--ml-spacing-xs, .25rem) var(--ml-spacing-sm, .5rem)}.ml--xs .ml__option-title{font-size:var(--ml-font-size-xs, .75rem)}.ml--xs .ml__pill{font-size:var(--ml-font-size-2xs, .625rem)}.ml--sm .ml__input,.ml--sm .ml__option-title{font-size:var(--ml-font-size-xs, .75rem)}.ml--lg .ml__input,.ml--lg .ml__option-title{font-size:var(--ml-font-size-base, 1rem)}.ml--lg .ml__pill{font-size:var(--ml-font-size-sm, .875rem)}.ml--xl .ml__input,.ml--xl .ml__option-title{font-size:var(--ml-font-size-lg, 1.125rem)}.ml--xl .ml__pill{font-size:var(--ml-font-size-base, 1rem)}.ml--disabled .ml__input{opacity:var(--ml-disabled-input-opacity, .6);cursor:not-allowed;background:var(--ml-input-bg-disabled, rgba(107, 114, 128, .05))}.ml--disabled .ml__toggle{opacity:var(--ml-disabled-input-opacity, .6)}.ml--no-checkboxes .ml__option{gap:0;padding-left:var(--ml-option-padding-h, .75rem)}.ml--no-checkboxes .ml__option-content{padding-left:0}.ml-debug-info{margin-top:.25rem;padding:.25rem;background-color:#f9fafb;border:1px solid #e5e7eb;border-radius:.375rem;font-size:.75rem;color:#111827}.ml-debug-info details summary{cursor:pointer;font-weight:600;color:#2563eb;-webkit-user-select:none;user-select:none;padding:.25rem;border-radius:.25rem}.ml-debug-info details summary:hover{background-color:#f3f4f6}.ml-debug-info details summary:focus{outline:2px solid #3b82f6;outline-offset:2px}.ml-debug-info .ml-debug-stats{display:flex;flex-direction:column;gap:.25rem;margin-top:.25rem;padding:.25rem;background-color:#fff;border-radius:.25rem}.ml-debug-info .ml-debug-stats span{display:flex;justify-content:space-between;padding:2px 4px;font-family:monospace;font-size:.625rem}.ml-debug-info .ml-debug-stats span:before{content:"•";margin-right:.25rem;color:#3b82f6}', hi = typeof HTMLElement < "u" ? HTMLElement : class {
|
|
2319
2315
|
}, Ae = /* @__PURE__ */ new Set();
|
|
2320
2316
|
function nt() {
|
|
2321
2317
|
return Array.from(Ae);
|
|
@@ -2446,7 +2442,7 @@ class rt extends hi {
|
|
|
2446
2442
|
var h, f;
|
|
2447
2443
|
const t = this.shadow.querySelector(".ml-debug-stats");
|
|
2448
2444
|
if (!t || !this.picker) return;
|
|
2449
|
-
const l = "1.0.0-
|
|
2445
|
+
const l = "1.0.0-rc11", o = nt().length, n = this.picker.getSelected().length, r = ((h = this._options) == null ? void 0 : h.length) || 0, a = this.picker, d = a.isOpen || !1, c = a.searchTerm || "", m = a.isLoading || !1, p = ((f = a.filteredOptions) == null ? void 0 : f.length) || 0;
|
|
2450
2446
|
t.innerHTML = `
|
|
2451
2447
|
<span>Version: ${l}</span>
|
|
2452
2448
|
<span>Total Instances: ${o}</span>
|
|
@@ -2839,10 +2835,10 @@ class rt extends hi {
|
|
|
2839
2835
|
}
|
|
2840
2836
|
typeof window < "u" && typeof customElements < "u" && (customElements.get("web-multiselect") || customElements.define("web-multiselect", rt));
|
|
2841
2837
|
typeof window < "u" && (window.keenmate = window.keenmate || {}, window.keenmate.multiselect = {
|
|
2842
|
-
version: () => "1.0.0-
|
|
2838
|
+
version: () => "1.0.0-rc11",
|
|
2843
2839
|
config: {
|
|
2844
2840
|
name: "@keenmate/web-multiselect",
|
|
2845
|
-
version: "1.0.0-
|
|
2841
|
+
version: "1.0.0-rc11",
|
|
2846
2842
|
author: "Keenmate",
|
|
2847
2843
|
license: "MIT",
|
|
2848
2844
|
repository: "git+https://github.com/keenmate/web-multiselect.git",
|
package/dist/multiselect.umd.js
CHANGED
|
@@ -9,25 +9,21 @@
|
|
|
9
9
|
<button type="button" class="ml__pill-remove" data-value="${m}" aria-label="Remove ${p}"></button>
|
|
10
10
|
</div>
|
|
11
11
|
`}).join("");let d="";r>0&&(d=`
|
|
12
|
-
<div class="ml__pill ml__pill--more" data-action="show-selected">
|
|
12
|
+
<div class="ml__pill ml__pill--indicator ml__pill--more" data-action="show-selected">
|
|
13
13
|
<span class="ml__pill-text">${this.options.getCountPillCallback?this.options.getCountPillCallback(t,r):`+${r} more`}</span>
|
|
14
14
|
<button type="button" class="ml__pill-remove" data-action="remove-hidden" aria-label="Remove ${r} hidden items"></button>
|
|
15
15
|
</div>
|
|
16
|
-
`),this.pillsContainer.innerHTML=a+d}else if(l==="compact")if(this.pillsContainer.className=`
|
|
17
|
-
<div class="
|
|
18
|
-
<
|
|
19
|
-
|
|
20
|
-
</button>
|
|
21
|
-
<button type="button" class="ml__count-clear" data-action="clear-count" aria-label="Clear all selections"></button>
|
|
16
|
+
`),this.pillsContainer.innerHTML=a+d}else if(l==="compact")if(this.pillsContainer.className=`ml__pills ml__pills--${this.effectivePillsPosition}`,t>0){const s=e[0],n=this.getItemPillDisplayValue(s),r=t-1;let a=n;if(r>0){const d=this.options.getCountPillCallback?this.options.getCountPillCallback(t,r):`+${r} more`;a=`${n} (${d})`}this.pillsContainer.innerHTML=`
|
|
17
|
+
<div class="ml__pill ml__pill--indicator" data-action="show-selected">
|
|
18
|
+
<span class="ml__pill-text">${a}</span>
|
|
19
|
+
<button type="button" class="ml__pill-remove" data-action="clear-count" aria-label="Clear all selections"></button>
|
|
22
20
|
</div>
|
|
23
|
-
`}else this.pillsContainer.innerHTML="";else if(this.pillsContainer.className=`
|
|
24
|
-
<div class="
|
|
25
|
-
<
|
|
26
|
-
|
|
27
|
-
</button>
|
|
28
|
-
<button type="button" class="ml__count-clear" data-action="clear-count" aria-label="Clear all selections"></button>
|
|
21
|
+
`}else this.pillsContainer.innerHTML="";else if(this.pillsContainer.className=`ml__pills ml__pills--${this.effectivePillsPosition}`,t>0){const s=this.options.getCountPillCallback?this.options.getCountPillCallback(t):`${t} selected`;this.pillsContainer.innerHTML=`
|
|
22
|
+
<div class="ml__pill ml__pill--indicator" data-action="show-selected">
|
|
23
|
+
<span class="ml__pill-text">${s}</span>
|
|
24
|
+
<button type="button" class="ml__pill-remove" data-action="clear-count" aria-label="Clear all selections"></button>
|
|
29
25
|
</div>
|
|
30
|
-
`}else this.pillsContainer.innerHTML="";this.attachPillTooltips()}attachEvents(){this.input.addEventListener("mousedown",e=>{e.stopPropagation(),this.isOpen?(this.justClosedViaClick=!0,this.close(),setTimeout(()=>{this.justClosedViaClick=!1},0)):this.open()}),this.input.addEventListener("focus",()=>{!this.isOpen&&!this.justClosedViaClick&&this.open()}),this.input.addEventListener("input",e=>{const t=e.target.value;this.options.isSearchEnabled&&!this.isOpen&&this.open(),this.handleSearch(t)}),this.input.addEventListener("keydown",e=>this.handleKeydown(e)),setTimeout(()=>{document.addEventListener("click",e=>this.handleClickOutside(e))},0),this.dropdown.addEventListener("click",e=>this.handleDropdownClick(e)),this.dropdown.addEventListener("wheel",e=>{if(this.virtualScroll)return;const t=e.currentTarget,l=t.scrollTop===0,o=t.scrollTop+t.clientHeight>=t.scrollHeight;(e.deltaY<0&&l||e.deltaY>0&&o)&&e.preventDefault(),e.stopPropagation()},{passive:!1}),this.pillsContainer.addEventListener("mousedown",e=>{e.target.closest(".ml__count-text")&&!this.showSelectedPopover&&e.stopPropagation()}),this.pillsContainer.addEventListener("click",e=>this.handlePillClick(e)),this.countBadge.addEventListener("mousedown",e=>{this.showSelectedPopover||e.stopPropagation()}),this.countBadge.addEventListener("click",e=>{e.stopPropagation(),this.toggleSelectedPopover()}),this.selectedPopover.addEventListener("click",e=>this.handleSelectedPopoverClick(e))}async handleSearch(e){if(this.searchTerm=e,!this.options.isSearchEnabled)return;let t=e;if(this.options.beforeSearchCallback){const l=this.options.beforeSearchCallback(e);if(l===null){k.debug(`[${this.instanceId}] beforeSearchCallback blocked search for term:`,e),this.filteredOptions=[...this.allOptions],this.matchingIndices.clear(),this.renderDropdown();return}t=l,t!==e&&k.debug(`[${this.instanceId}] beforeSearchCallback transformed: "${e}" -> "${t}"`)}if(this.options.searchCallback){if(t.length<this.options.minSearchLength){this.isLoading=!1,this.options.isKeepOptionsOnSearch?(this.filteredOptions=[...this.allOptions],k.debug(`[${this.instanceId}] Search term below minimum, showing ${this.allOptions.length} initial options`)):this.filteredOptions=[],this.matchingIndices.clear(),this.renderDropdown();return}this.isLoading=!0,this.renderDropdown(),k.debug(`[${this.instanceId}] Loading data for search term:`,t);try{const l=await this.options.searchCallback(t);if(this.searchTerm===e){const o=l||[];this.filteredOptions=[...o],this.isLoading=!1,this.matchingIndices.clear(),this.focusedIndex=this.options.isSearchEnabled&&this.filteredOptions.length>0?0:-1,this.renderDropdown(),k.debug(`[${this.instanceId}] Loaded ${o.length} results`)}}catch(l){k.error(`[${this.instanceId}] Error loading data:`,l),this.isLoading=!1,this.options.isKeepOptionsOnSearch?this.filteredOptions=[...this.allOptions]:this.filteredOptions=[],this.matchingIndices.clear(),this.renderDropdown()}}else{if(!t)this.filteredOptions=[...this.allOptions],this.matchingIndices.clear(),this.focusedIndex=this.filteredOptions.length>0?0:-1;else{const l=this.options.searchMode||"filter",o=t.toLowerCase();if(l==="filter")this.filteredOptions=this.allOptions.filter(s=>this.getItemSearchValue(s).toLowerCase().includes(o)),this.matchingIndices.clear(),this.focusedIndex=this.filteredOptions.length>0?0:-1,k.debug(`[${this.instanceId}] Filter mode: ${this.filteredOptions.length} matches for "${t}"`);else{this.filteredOptions=[...this.allOptions],this.matchingIndices.clear();let s=-1;this.allOptions.forEach((n,r)=>{this.getItemSearchValue(n).toLowerCase().includes(o)&&(this.matchingIndices.add(r),s===-1&&(s=r))}),s>=0?(this.focusedIndex=s,k.debug(`[${this.instanceId}] Navigate mode: ${this.matchingIndices.size} matches, jumped to index ${s}`)):k.debug(`[${this.instanceId}] Navigate mode: No matches found, keeping previous focus`)}}this.renderDropdown(),this.options.searchMode==="navigate"&&this.focusedIndex>=0&&this.scrollToFocused()}}handleKeydown(e){if(!this.isOpen){(e.key==="Enter"||e.key==="ArrowDown")&&(e.preventDefault(),this.open());return}if(!this.options.isSearchEnabled){const t=e.key.length===1||e.key==="Backspace"||e.key==="Delete",l=["ArrowUp","ArrowDown","PageUp","PageDown","Home","End","Enter","Escape","Tab"].includes(e.key);if(t&&!l){e.preventDefault();return}}switch(e.key){case"ArrowDown":e.preventDefault(),e.ctrlKey||e.metaKey?this.focusNextMatch():this.focusNext();break;case"ArrowUp":e.preventDefault(),e.ctrlKey||e.metaKey?this.focusPreviousMatch():this.focusPrevious();break;case"Enter":e.preventDefault(),this.focusedIndex>=0?this.toggleOption(this.filteredOptions[this.focusedIndex]):this.options.isAddNewAllowed&&this.options.addNewCallback&&this.input.value.trim()&&this.handleAddNew(this.input.value.trim());break;case"Escape":e.preventDefault(),this.close();break;case"Tab":this.close();break;case"PageUp":e.preventDefault(),this.focusPageUp();break;case"PageDown":e.preventDefault(),this.focusPageDown();break;case"Home":e.preventDefault(),this.focusFirst();break;case"End":e.preventDefault(),this.focusLast();break}}handleDropdownClick(e){S.debug(`[${this.instanceId}] Dropdown clicked`,{target:e.target.className}),e.stopPropagation();const t=e.target.closest("[data-action]");if(t){e.preventDefault();const o=t.dataset.action;S.debug(`[${this.instanceId}] Action button clicked:`,o),o==="select-all"?this.selectAll():o==="clear-all"&&this.clearAll();return}const l=e.target.closest(".ml__option");if(l&&!l.classList.contains("ml__option--disabled")){e.preventDefault();const o=l.dataset.value,s=this.filteredOptions.find(n=>String(this.getItemValue(n))===o);S.debug(`[${this.instanceId}] Option clicked:`,{value:o,closeOnSelect:this.options.isCloseOnSelect,placeholder:this.options.searchPlaceholder}),s&&this.toggleOption(s)}}handlePillClick(e){if(e.target.closest(".ml__count-clear")){e.preventDefault(),e.stopPropagation(),S.debug(`[${this.instanceId}] Count clear button clicked`),this.clearAll();return}if(e.target.closest(".ml__count-text")){e.preventDefault(),e.stopPropagation(),this.toggleSelectedPopover();return}const o=e.target.closest(".ml__pill-remove");if(o){if(e.preventDefault(),e.stopPropagation(),o.dataset.action==="remove-hidden"){S.debug(`[${this.instanceId}] Remove hidden items button clicked`);const a=this.options.pillsMaxVisible||3;Array.from(this.selectedOptions.values()).slice(a).forEach(m=>this.deselectOption(m));return}const n=o.dataset.value,r=this.selectedOptions.get(n);r&&this.deselectOption(r);return}if(e.target.closest(".ml__pill--more")&&!e.target.closest(".ml__pill-remove")){e.preventDefault(),e.stopPropagation(),S.debug(`[${this.instanceId}] '+X more' badge clicked, showing popover`),this.toggleSelectedPopover();return}}handleClickOutside(e){var o;const t=e.composedPath();if(this.showSelectedPopover&&!t.some(n=>n instanceof Node&&(this.selectedPopover.contains(n)||this.countBadge.contains(n)||n.closest&&n.closest(".ml__count-text")))){g.debug(`[${this.instanceId}] Closing selected popover due to click outside`),this.hideSelectedPopover();return}if(!this.isOpen)return;const l=t.some(s=>s instanceof Node&&(this.element.contains(s)||this.dropdown.contains(s)||this.hint&&this.hint.contains(s)));S.debug(`[${this.instanceId}] handleClickOutside`,{target:e.target.className,targetTag:e.target.tagName,clickedInside:l,pathLength:t.length,firstInPath:(o=t[0])==null?void 0:o.tagName,elementContains:t.some(s=>s instanceof Node&&this.element.contains(s)),dropdownContains:t.some(s=>s instanceof Node&&this.dropdown.contains(s)),isConnected:this.dropdown.isConnected}),l||(S.warn(`[${this.instanceId}] Closing dropdown due to click outside`),this.close())}focusNext(){this.filteredOptions.length!==0&&(this.focusedIndex=Math.min(this.filteredOptions.length-1,this.focusedIndex+1),this.renderDropdown(),this.scrollToFocused())}focusPrevious(){this.filteredOptions.length!==0&&(this.focusedIndex=this.focusedIndex<=0?this.filteredOptions.length-1:this.focusedIndex-1,this.renderDropdown(),this.scrollToFocused())}focusFirst(){this.filteredOptions.length!==0&&(this.focusedIndex=0,this.renderDropdown(),this.scrollToFocused())}focusLast(){this.filteredOptions.length!==0&&(this.focusedIndex=this.filteredOptions.length-1,this.renderDropdown(),this.scrollToFocused())}focusNextMatch(){if(this.matchingIndices.size===0)return;const e=Array.from(this.matchingIndices).sort((o,s)=>o-s),t=e.findIndex(o=>o===this.focusedIndex),l=(t+1)%e.length;this.focusedIndex=e[l],this.renderDropdown(),this.scrollToFocused(),S.debug(`[${this.instanceId}] Jumped to next match: index ${this.focusedIndex} (${t+1} of ${e.length})`)}focusPreviousMatch(){if(this.matchingIndices.size===0)return;const e=Array.from(this.matchingIndices).sort((o,s)=>o-s),t=e.findIndex(o=>o===this.focusedIndex),l=t<=0?e.length-1:t-1;this.focusedIndex=e[l],this.renderDropdown(),this.scrollToFocused(),S.debug(`[${this.instanceId}] Jumped to previous match: index ${this.focusedIndex} (${t+1} of ${e.length})`)}focusPageUp(){this.filteredOptions.length!==0&&(this.focusedIndex=Math.max(0,this.focusedIndex-10),this.renderDropdown(),this.scrollToFocused())}focusPageDown(){this.filteredOptions.length!==0&&(this.focusedIndex=Math.min(this.filteredOptions.length-1,this.focusedIndex+10),this.renderDropdown(),this.scrollToFocused())}scrollToFocused(){if(this.virtualScroll&&this.focusedIndex>=0)this.virtualScroll.scrollToIndex(this.focusedIndex);else{const e=this.dropdown.querySelector(".ml__option--focused");e&&e.scrollIntoView({block:"nearest",behavior:"smooth"})}}toggleOption(e){const t=this.getItemValue(e),l=String(t);if(S.debug(`[${this.instanceId}] toggleOption called`,{value:t,multiple:this.options.isMultipleEnabled}),!this.options.isMultipleEnabled){this.selectedValues.has(l)?(S.debug(`[${this.instanceId}] Deselecting option in single-select mode`,{value:t}),this.deselectOption(e)):(S.debug(`[${this.instanceId}] Clearing previous selections and selecting new option`,{value:t}),this.selectedValues.clear(),this.selectedOptions.clear(),this.selectOption(e)),g.info(`[${this.instanceId}] ❌ Closing dropdown (single-select mode)`),this.close();return}this.selectedValues.has(l)?(S.debug(`[${this.instanceId}] Deselecting option`,{value:t}),this.deselectOption(e)):(S.debug(`[${this.instanceId}] Selecting option`,{value:t}),this.selectOption(e)),S.debug(`[${this.instanceId}] Checking closeOnSelect`,{closeOnSelect:this.options.isCloseOnSelect,willClose:this.options.isCloseOnSelect===!0,placeholder:this.options.searchPlaceholder}),this.options.isCloseOnSelect?(g.info(`[${this.instanceId}] ❌ Closing dropdown (closeOnSelect=true)`),this.close()):g.info(`[${this.instanceId}] ✅ Keeping dropdown open (closeOnSelect=false)`)}async handleAddNew(e){if(this.options.addNewCallback)try{k.debug(`[${this.instanceId}] Adding new option:`,e);const t=await this.options.addNewCallback(e);this.allOptions.push(t),this.filteredOptions.push(t),this.selectOption(t),this.input.value="",this.renderDropdown(),this.renderPills(),this.options.isCloseOnSelect&&this.close()}catch(t){k.error(`[${this.instanceId}] Error adding new option:`,t)}}selectOption(e){const t=this.getItemValue(e),l=String(t);this.selectedValues.add(l),this.selectedOptions.set(l,e),this.renderDropdown(),this.renderPills(),this.updateHiddenInput(),this.options.selectCallback&&this.options.selectCallback(e),this.options.changeCallback&&this.options.changeCallback(this.getSelected())}deselectOption(e){const t=this.getItemValue(e),l=String(t);this.selectedValues.delete(l),this.selectedOptions.delete(l),this.renderDropdown(),this.renderPills(),this.updateHiddenInput(),this.options.deselectCallback&&this.options.deselectCallback(e),this.options.changeCallback&&this.options.changeCallback(this.getSelected())}selectAll(){this.filteredOptions.forEach(e=>{if(!this.getItemDisabled(e)){const t=this.getItemValue(e),l=String(t);this.selectedValues.add(l),this.selectedOptions.set(l,e)}}),this.renderDropdown(),this.renderPills(),this.updateHiddenInput(),this.options.changeCallback&&this.options.changeCallback(this.getSelected())}clearAll(){this.selectedValues.clear(),this.selectedOptions.clear(),this.renderDropdown(),this.renderPills(),this.updateHiddenInput(),this.options.changeCallback&&this.options.changeCallback(this.getSelected())}open(){g.debug(`[${this.instanceId}] open() called`,{isOpen:this.isOpen}),!this.isOpen&&(this.isOpen=!0,this.element.classList.add("ml--open"),this.dropdown.classList.add("ml__dropdown--visible"),g.info(`[${this.instanceId}] Dropdown opened`),this.input.placeholder=this.options.searchPlaceholder,!this.options.isMultipleEnabled&&this.options.isSearchEnabled&&(this.input.value=""),this.options.searchCallback&&this.options.isKeepOptionsOnSearch&&!this.searchTerm&&(this.filteredOptions=[...this.allOptions],g.debug(`[${this.instanceId}] Showing ${this.allOptions.length} initial options on open`)),this.renderDropdown(),this.positionDropdown(),this.hint&&(this.hint.classList.add("ml__hint--visible"),this.positionHint()))}close(){if(g.debug(`[${this.instanceId}] close() called`,{isOpen:this.isOpen}),!this.isOpen)return;this.isOpen=!1,this.element.classList.remove("ml--open"),this.dropdown.classList.remove("ml__dropdown--visible"),this.hint&&this.hint.classList.remove("ml__hint--visible"),this.searchTerm="";const e=this.options.isMultipleEnabled||this.options.isSearchEnabled;g.warn(`[${this.instanceId}] close() - input clearing decision`,{multiple:this.options.isMultipleEnabled,enableSearch:this.options.isSearchEnabled,willClearInput:e,currentInputValue:this.input.value}),e?(g.info(`[${this.instanceId}] 🧹 close() CLEARING input.value`),this.input.value=""):g.info(`[${this.instanceId}] 🔒 close() KEEPING input.value = "${this.input.value}"`),this.filteredOptions=[...this.allOptions],this.focusedIndex=-1,g.info(`[${this.instanceId}] 📞 close() CALLING renderPills()`),this.renderPills(),g.info(`[${this.instanceId}] ✅ close() AFTER renderPills(), input.value = "${this.input.value}"`),this.dropdownCleanup&&(this.dropdownCleanup(),this.dropdownCleanup=null),this.hintCleanup&&(this.hintCleanup(),this.hintCleanup=null),this.dropdownPlacement=null,g.info(`[${this.instanceId}] Dropdown closed. Stack trace:`),g.trace()}positionDropdown(){this.dropdownCleanup=ue(this.input,this.dropdown,()=>{const e=this.options.isPlacementLocked&&this.dropdownPlacement?this.dropdownPlacement:"bottom-start",t=[fe(4),...this.options.isPlacementLocked&&this.dropdownPlacement?[]:[Ae()],ge({padding:8})];be(this.input,this.dropdown,{placement:e,middleware:t}).then(({x:l,y:o,placement:s})=>{this.options.isPlacementLocked&&!this.dropdownPlacement&&(this.dropdownPlacement=s,g.debug(`[${this.instanceId}] Locked dropdown placement:`,s));const n={left:`${l}px`,top:`${o}px`,width:`${this.input.offsetWidth}px`};this.options.dropdownMinWidth&&(n.minWidth=this.options.dropdownMinWidth),Object.assign(this.dropdown.style,n),this.hint&&this.isOpen&&this.positionHint()})})}positionHint(){this.hint&&(this.hintCleanup&&this.hintCleanup(),this.hintCleanup=ue(this.input,this.hint,()=>{let e="top-start";this.dropdownPlacement&&(this.dropdownPlacement.startsWith("bottom")?e=this.dropdownPlacement.replace("bottom","top"):this.dropdownPlacement.startsWith("top")&&(e=this.dropdownPlacement.replace("top","bottom"))),be(this.input,this.hint,{placement:e,middleware:[fe(4),ge({padding:8})]}).then(({x:t,y:l})=>{Object.assign(this.hint.style,{left:`${t}px`,top:`${l}px`})})}))}parseInitialSelection(){const e=this.element.dataset.initialValues;if(e)try{JSON.parse(e).forEach(l=>{const o=String(l);this.selectedValues.add(o);const s=this.allOptions.find(n=>String(this.getItemValue(n))===o);s&&this.selectedOptions.set(o,s)}),this.renderPills()}catch(t){k.error(`[${this.instanceId}] Failed to parse initial values:`,t)}}toggleSelectedPopover(){this.showSelectedPopover?this.hideSelectedPopover():this.showPopover()}showPopover(){g.debug(`[${this.instanceId}] showPopover() called`),this.isOpen&&this.close(),this.showSelectedPopover=!0,this.renderSelectedPopover(),this.selectedPopover.classList.add("ml__selected-popover--visible"),this.selectedValues.size>=100&&this.selectedPopover.classList.add("ml__selected-popover--virtual"),this.positionSelectedPopover()}hideSelectedPopover(){g.debug(`[${this.instanceId}] hideSelectedPopover() called`),this.showSelectedPopover=!1,this.selectedPopover.classList.remove("ml__selected-popover--visible"),this.selectedPopover.classList.remove("ml__selected-popover--virtual"),this.selectedPopoverPlacement=null,this.selectedPopoverVirtualScroll&&(this.selectedPopoverVirtualScroll.destroy(),this.selectedPopoverVirtualScroll=null,this.selectedPopoverContainer=null),this.selectedPopoverCleanup&&(this.selectedPopoverCleanup(),this.selectedPopoverCleanup=null)}renderSelectedPopover(){const e=Array.from(this.selectedOptions.values()),t=this.selectedValues.size;if(t>=100){this.renderSelectedPopoverVirtual(e,t);return}this.selectedPopover.innerHTML=`
|
|
26
|
+
`}else this.pillsContainer.innerHTML="";this.attachPillTooltips()}attachEvents(){this.input.addEventListener("mousedown",e=>{e.stopPropagation(),this.isOpen?(this.justClosedViaClick=!0,this.close(),setTimeout(()=>{this.justClosedViaClick=!1},0)):this.open()}),this.input.addEventListener("focus",()=>{!this.isOpen&&!this.justClosedViaClick&&this.open()}),this.input.addEventListener("input",e=>{const t=e.target.value;this.options.isSearchEnabled&&!this.isOpen&&this.open(),this.handleSearch(t)}),this.input.addEventListener("keydown",e=>this.handleKeydown(e)),setTimeout(()=>{document.addEventListener("click",e=>this.handleClickOutside(e))},0),this.dropdown.addEventListener("click",e=>this.handleDropdownClick(e)),this.dropdown.addEventListener("wheel",e=>{if(this.virtualScroll)return;const t=e.currentTarget,l=t.scrollTop===0,o=t.scrollTop+t.clientHeight>=t.scrollHeight;(e.deltaY<0&&l||e.deltaY>0&&o)&&e.preventDefault(),e.stopPropagation()},{passive:!1}),this.pillsContainer.addEventListener("mousedown",e=>{e.target.closest('[data-action="show-selected"]')&&!this.showSelectedPopover&&e.stopPropagation()}),this.pillsContainer.addEventListener("click",e=>this.handlePillClick(e)),this.countBadge.addEventListener("mousedown",e=>{this.showSelectedPopover||e.stopPropagation()}),this.countBadge.addEventListener("click",e=>{e.stopPropagation(),this.toggleSelectedPopover()}),this.selectedPopover.addEventListener("click",e=>this.handleSelectedPopoverClick(e))}async handleSearch(e){if(this.searchTerm=e,!this.options.isSearchEnabled)return;let t=e;if(this.options.beforeSearchCallback){const l=this.options.beforeSearchCallback(e);if(l===null){k.debug(`[${this.instanceId}] beforeSearchCallback blocked search for term:`,e),this.filteredOptions=[...this.allOptions],this.matchingIndices.clear(),this.renderDropdown();return}t=l,t!==e&&k.debug(`[${this.instanceId}] beforeSearchCallback transformed: "${e}" -> "${t}"`)}if(this.options.searchCallback){if(t.length<this.options.minSearchLength){this.isLoading=!1,this.options.isKeepOptionsOnSearch?(this.filteredOptions=[...this.allOptions],k.debug(`[${this.instanceId}] Search term below minimum, showing ${this.allOptions.length} initial options`)):this.filteredOptions=[],this.matchingIndices.clear(),this.renderDropdown();return}this.isLoading=!0,this.renderDropdown(),k.debug(`[${this.instanceId}] Loading data for search term:`,t);try{const l=await this.options.searchCallback(t);if(this.searchTerm===e){const o=l||[];this.filteredOptions=[...o],this.isLoading=!1,this.matchingIndices.clear(),this.focusedIndex=this.options.isSearchEnabled&&this.filteredOptions.length>0?0:-1,this.renderDropdown(),k.debug(`[${this.instanceId}] Loaded ${o.length} results`)}}catch(l){k.error(`[${this.instanceId}] Error loading data:`,l),this.isLoading=!1,this.options.isKeepOptionsOnSearch?this.filteredOptions=[...this.allOptions]:this.filteredOptions=[],this.matchingIndices.clear(),this.renderDropdown()}}else{if(!t)this.filteredOptions=[...this.allOptions],this.matchingIndices.clear(),this.focusedIndex=this.filteredOptions.length>0?0:-1;else{const l=this.options.searchMode||"filter",o=t.toLowerCase();if(l==="filter")this.filteredOptions=this.allOptions.filter(s=>this.getItemSearchValue(s).toLowerCase().includes(o)),this.matchingIndices.clear(),this.focusedIndex=this.filteredOptions.length>0?0:-1,k.debug(`[${this.instanceId}] Filter mode: ${this.filteredOptions.length} matches for "${t}"`);else{this.filteredOptions=[...this.allOptions],this.matchingIndices.clear();let s=-1;this.allOptions.forEach((n,r)=>{this.getItemSearchValue(n).toLowerCase().includes(o)&&(this.matchingIndices.add(r),s===-1&&(s=r))}),s>=0?(this.focusedIndex=s,k.debug(`[${this.instanceId}] Navigate mode: ${this.matchingIndices.size} matches, jumped to index ${s}`)):k.debug(`[${this.instanceId}] Navigate mode: No matches found, keeping previous focus`)}}this.renderDropdown(),this.options.searchMode==="navigate"&&this.focusedIndex>=0&&this.scrollToFocused()}}handleKeydown(e){if(!this.isOpen){(e.key==="Enter"||e.key==="ArrowDown")&&(e.preventDefault(),this.open());return}if(!this.options.isSearchEnabled){const t=e.key.length===1||e.key==="Backspace"||e.key==="Delete",l=["ArrowUp","ArrowDown","PageUp","PageDown","Home","End","Enter","Escape","Tab"].includes(e.key);if(t&&!l){e.preventDefault();return}}switch(e.key){case"ArrowDown":e.preventDefault(),e.ctrlKey||e.metaKey?this.focusNextMatch():this.focusNext();break;case"ArrowUp":e.preventDefault(),e.ctrlKey||e.metaKey?this.focusPreviousMatch():this.focusPrevious();break;case"Enter":e.preventDefault(),this.focusedIndex>=0?this.toggleOption(this.filteredOptions[this.focusedIndex]):this.options.isAddNewAllowed&&this.options.addNewCallback&&this.input.value.trim()&&this.handleAddNew(this.input.value.trim());break;case"Escape":e.preventDefault(),this.close();break;case"Tab":this.close();break;case"PageUp":e.preventDefault(),this.focusPageUp();break;case"PageDown":e.preventDefault(),this.focusPageDown();break;case"Home":e.preventDefault(),this.focusFirst();break;case"End":e.preventDefault(),this.focusLast();break}}handleDropdownClick(e){S.debug(`[${this.instanceId}] Dropdown clicked`,{target:e.target.className}),e.stopPropagation();const t=e.target.closest("[data-action]");if(t){e.preventDefault();const o=t.dataset.action;S.debug(`[${this.instanceId}] Action button clicked:`,o),o==="select-all"?this.selectAll():o==="clear-all"&&this.clearAll();return}const l=e.target.closest(".ml__option");if(l&&!l.classList.contains("ml__option--disabled")){e.preventDefault();const o=l.dataset.value,s=this.filteredOptions.find(n=>String(this.getItemValue(n))===o);S.debug(`[${this.instanceId}] Option clicked:`,{value:o,closeOnSelect:this.options.isCloseOnSelect,placeholder:this.options.searchPlaceholder}),s&&this.toggleOption(s)}}handlePillClick(e){if(e.target.closest('[data-action="clear-count"]')){e.preventDefault(),e.stopPropagation(),S.debug(`[${this.instanceId}] Clear count button clicked`),this.clearAll();return}if(e.target.closest('[data-action="show-selected"]')){e.preventDefault(),e.stopPropagation(),this.toggleSelectedPopover();return}const o=e.target.closest(".ml__pill-remove");if(o){if(e.preventDefault(),e.stopPropagation(),o.dataset.action==="remove-hidden"){S.debug(`[${this.instanceId}] Remove hidden items button clicked`);const a=this.options.pillsMaxVisible||3;Array.from(this.selectedOptions.values()).slice(a).forEach(m=>this.deselectOption(m));return}const n=o.dataset.value,r=this.selectedOptions.get(n);r&&this.deselectOption(r);return}if(e.target.closest(".ml__pill--more")&&!e.target.closest(".ml__pill-remove")){e.preventDefault(),e.stopPropagation(),S.debug(`[${this.instanceId}] '+X more' badge clicked, showing popover`),this.toggleSelectedPopover();return}}handleClickOutside(e){var o;const t=e.composedPath();if(this.showSelectedPopover&&!t.some(n=>n instanceof Node&&(this.selectedPopover.contains(n)||this.countBadge.contains(n)||n.closest&&n.closest('[data-action="show-selected"]')))){g.debug(`[${this.instanceId}] Closing selected popover due to click outside`),this.hideSelectedPopover();return}if(!this.isOpen)return;const l=t.some(s=>s instanceof Node&&(this.element.contains(s)||this.dropdown.contains(s)||this.hint&&this.hint.contains(s)));S.debug(`[${this.instanceId}] handleClickOutside`,{target:e.target.className,targetTag:e.target.tagName,clickedInside:l,pathLength:t.length,firstInPath:(o=t[0])==null?void 0:o.tagName,elementContains:t.some(s=>s instanceof Node&&this.element.contains(s)),dropdownContains:t.some(s=>s instanceof Node&&this.dropdown.contains(s)),isConnected:this.dropdown.isConnected}),l||(S.warn(`[${this.instanceId}] Closing dropdown due to click outside`),this.close())}focusNext(){this.filteredOptions.length!==0&&(this.focusedIndex=Math.min(this.filteredOptions.length-1,this.focusedIndex+1),this.renderDropdown(),this.scrollToFocused())}focusPrevious(){this.filteredOptions.length!==0&&(this.focusedIndex=this.focusedIndex<=0?this.filteredOptions.length-1:this.focusedIndex-1,this.renderDropdown(),this.scrollToFocused())}focusFirst(){this.filteredOptions.length!==0&&(this.focusedIndex=0,this.renderDropdown(),this.scrollToFocused())}focusLast(){this.filteredOptions.length!==0&&(this.focusedIndex=this.filteredOptions.length-1,this.renderDropdown(),this.scrollToFocused())}focusNextMatch(){if(this.matchingIndices.size===0)return;const e=Array.from(this.matchingIndices).sort((o,s)=>o-s),t=e.findIndex(o=>o===this.focusedIndex),l=(t+1)%e.length;this.focusedIndex=e[l],this.renderDropdown(),this.scrollToFocused(),S.debug(`[${this.instanceId}] Jumped to next match: index ${this.focusedIndex} (${t+1} of ${e.length})`)}focusPreviousMatch(){if(this.matchingIndices.size===0)return;const e=Array.from(this.matchingIndices).sort((o,s)=>o-s),t=e.findIndex(o=>o===this.focusedIndex),l=t<=0?e.length-1:t-1;this.focusedIndex=e[l],this.renderDropdown(),this.scrollToFocused(),S.debug(`[${this.instanceId}] Jumped to previous match: index ${this.focusedIndex} (${t+1} of ${e.length})`)}focusPageUp(){this.filteredOptions.length!==0&&(this.focusedIndex=Math.max(0,this.focusedIndex-10),this.renderDropdown(),this.scrollToFocused())}focusPageDown(){this.filteredOptions.length!==0&&(this.focusedIndex=Math.min(this.filteredOptions.length-1,this.focusedIndex+10),this.renderDropdown(),this.scrollToFocused())}scrollToFocused(){if(this.virtualScroll&&this.focusedIndex>=0)this.virtualScroll.scrollToIndex(this.focusedIndex);else{const e=this.dropdown.querySelector(".ml__option--focused");e&&e.scrollIntoView({block:"nearest",behavior:"smooth"})}}toggleOption(e){const t=this.getItemValue(e),l=String(t);if(S.debug(`[${this.instanceId}] toggleOption called`,{value:t,multiple:this.options.isMultipleEnabled}),!this.options.isMultipleEnabled){this.selectedValues.has(l)?(S.debug(`[${this.instanceId}] Deselecting option in single-select mode`,{value:t}),this.deselectOption(e)):(S.debug(`[${this.instanceId}] Clearing previous selections and selecting new option`,{value:t}),this.selectedValues.clear(),this.selectedOptions.clear(),this.selectOption(e)),g.info(`[${this.instanceId}] ❌ Closing dropdown (single-select mode)`),this.close();return}this.selectedValues.has(l)?(S.debug(`[${this.instanceId}] Deselecting option`,{value:t}),this.deselectOption(e)):(S.debug(`[${this.instanceId}] Selecting option`,{value:t}),this.selectOption(e)),S.debug(`[${this.instanceId}] Checking closeOnSelect`,{closeOnSelect:this.options.isCloseOnSelect,willClose:this.options.isCloseOnSelect===!0,placeholder:this.options.searchPlaceholder}),this.options.isCloseOnSelect?(g.info(`[${this.instanceId}] ❌ Closing dropdown (closeOnSelect=true)`),this.close()):g.info(`[${this.instanceId}] ✅ Keeping dropdown open (closeOnSelect=false)`)}async handleAddNew(e){if(this.options.addNewCallback)try{k.debug(`[${this.instanceId}] Adding new option:`,e);const t=await this.options.addNewCallback(e);this.allOptions.push(t),this.filteredOptions.push(t),this.selectOption(t),this.input.value="",this.renderDropdown(),this.renderPills(),this.options.isCloseOnSelect&&this.close()}catch(t){k.error(`[${this.instanceId}] Error adding new option:`,t)}}selectOption(e){const t=this.getItemValue(e),l=String(t);this.selectedValues.add(l),this.selectedOptions.set(l,e),this.renderDropdown(),this.renderPills(),this.updateHiddenInput(),this.options.selectCallback&&this.options.selectCallback(e),this.options.changeCallback&&this.options.changeCallback(this.getSelected())}deselectOption(e){const t=this.getItemValue(e),l=String(t);this.selectedValues.delete(l),this.selectedOptions.delete(l),this.renderDropdown(),this.renderPills(),this.updateHiddenInput(),this.options.deselectCallback&&this.options.deselectCallback(e),this.options.changeCallback&&this.options.changeCallback(this.getSelected())}selectAll(){this.filteredOptions.forEach(e=>{if(!this.getItemDisabled(e)){const t=this.getItemValue(e),l=String(t);this.selectedValues.add(l),this.selectedOptions.set(l,e)}}),this.renderDropdown(),this.renderPills(),this.updateHiddenInput(),this.options.changeCallback&&this.options.changeCallback(this.getSelected())}clearAll(){this.selectedValues.clear(),this.selectedOptions.clear(),this.renderDropdown(),this.renderPills(),this.updateHiddenInput(),this.options.changeCallback&&this.options.changeCallback(this.getSelected())}open(){g.debug(`[${this.instanceId}] open() called`,{isOpen:this.isOpen}),!this.isOpen&&(this.isOpen=!0,this.element.classList.add("ml--open"),this.dropdown.classList.add("ml__dropdown--visible"),g.info(`[${this.instanceId}] Dropdown opened`),this.input.placeholder=this.options.searchPlaceholder,!this.options.isMultipleEnabled&&this.options.isSearchEnabled&&(this.input.value=""),this.options.searchCallback&&this.options.isKeepOptionsOnSearch&&!this.searchTerm&&(this.filteredOptions=[...this.allOptions],g.debug(`[${this.instanceId}] Showing ${this.allOptions.length} initial options on open`)),this.renderDropdown(),this.positionDropdown(),this.hint&&(this.hint.classList.add("ml__hint--visible"),this.positionHint()))}close(){if(g.debug(`[${this.instanceId}] close() called`,{isOpen:this.isOpen}),!this.isOpen)return;this.isOpen=!1,this.element.classList.remove("ml--open"),this.dropdown.classList.remove("ml__dropdown--visible"),this.hint&&this.hint.classList.remove("ml__hint--visible"),this.searchTerm="";const e=this.options.isMultipleEnabled||this.options.isSearchEnabled;g.warn(`[${this.instanceId}] close() - input clearing decision`,{multiple:this.options.isMultipleEnabled,enableSearch:this.options.isSearchEnabled,willClearInput:e,currentInputValue:this.input.value}),e?(g.info(`[${this.instanceId}] 🧹 close() CLEARING input.value`),this.input.value=""):g.info(`[${this.instanceId}] 🔒 close() KEEPING input.value = "${this.input.value}"`),this.filteredOptions=[...this.allOptions],this.focusedIndex=-1,g.info(`[${this.instanceId}] 📞 close() CALLING renderPills()`),this.renderPills(),g.info(`[${this.instanceId}] ✅ close() AFTER renderPills(), input.value = "${this.input.value}"`),this.dropdownCleanup&&(this.dropdownCleanup(),this.dropdownCleanup=null),this.hintCleanup&&(this.hintCleanup(),this.hintCleanup=null),this.dropdownPlacement=null,g.info(`[${this.instanceId}] Dropdown closed. Stack trace:`),g.trace()}positionDropdown(){this.dropdownCleanup=ue(this.input,this.dropdown,()=>{const e=this.options.isPlacementLocked&&this.dropdownPlacement?this.dropdownPlacement:"bottom-start",t=[fe(4),...this.options.isPlacementLocked&&this.dropdownPlacement?[]:[Ae()],ge({padding:8})];be(this.input,this.dropdown,{placement:e,middleware:t}).then(({x:l,y:o,placement:s})=>{this.options.isPlacementLocked&&!this.dropdownPlacement&&(this.dropdownPlacement=s,g.debug(`[${this.instanceId}] Locked dropdown placement:`,s));const n={left:`${l}px`,top:`${o}px`,width:`${this.input.offsetWidth}px`};this.options.dropdownMinWidth&&(n.minWidth=this.options.dropdownMinWidth),Object.assign(this.dropdown.style,n),this.hint&&this.isOpen&&this.positionHint()})})}positionHint(){this.hint&&(this.hintCleanup&&this.hintCleanup(),this.hintCleanup=ue(this.input,this.hint,()=>{let e="top-start";this.dropdownPlacement&&(this.dropdownPlacement.startsWith("bottom")?e=this.dropdownPlacement.replace("bottom","top"):this.dropdownPlacement.startsWith("top")&&(e=this.dropdownPlacement.replace("top","bottom"))),be(this.input,this.hint,{placement:e,middleware:[fe(4),ge({padding:8})]}).then(({x:t,y:l})=>{Object.assign(this.hint.style,{left:`${t}px`,top:`${l}px`})})}))}parseInitialSelection(){const e=this.element.dataset.initialValues;if(e)try{JSON.parse(e).forEach(l=>{const o=String(l);this.selectedValues.add(o);const s=this.allOptions.find(n=>String(this.getItemValue(n))===o);s&&this.selectedOptions.set(o,s)}),this.renderPills()}catch(t){k.error(`[${this.instanceId}] Failed to parse initial values:`,t)}}toggleSelectedPopover(){this.showSelectedPopover?this.hideSelectedPopover():this.showPopover()}showPopover(){g.debug(`[${this.instanceId}] showPopover() called`),this.isOpen&&this.close(),this.showSelectedPopover=!0,this.renderSelectedPopover(),this.selectedPopover.classList.add("ml__selected-popover--visible"),this.selectedValues.size>=100&&this.selectedPopover.classList.add("ml__selected-popover--virtual"),this.positionSelectedPopover()}hideSelectedPopover(){g.debug(`[${this.instanceId}] hideSelectedPopover() called`),this.showSelectedPopover=!1,this.selectedPopover.classList.remove("ml__selected-popover--visible"),this.selectedPopover.classList.remove("ml__selected-popover--virtual"),this.selectedPopoverPlacement=null,this.selectedPopoverVirtualScroll&&(this.selectedPopoverVirtualScroll.destroy(),this.selectedPopoverVirtualScroll=null,this.selectedPopoverContainer=null),this.selectedPopoverCleanup&&(this.selectedPopoverCleanup(),this.selectedPopoverCleanup=null)}renderSelectedPopover(){const e=Array.from(this.selectedOptions.values()),t=this.selectedValues.size;if(t>=100){this.renderSelectedPopoverVirtual(e,t);return}this.selectedPopover.innerHTML=`
|
|
31
27
|
<div class="ml__selected-popover-header">
|
|
32
28
|
<span>Selected Items (${t})</span>
|
|
33
29
|
<button type="button" class="ml__selected-popover-close" aria-label="Close">×</button>
|
|
@@ -52,7 +48,7 @@
|
|
|
52
48
|
<button type="button" class="ml__pill-remove" data-value="${t}" aria-label="Remove ${l}"></button>
|
|
53
49
|
</div>
|
|
54
50
|
`}handleSelectedPopoverClick(e){if(e.stopPropagation(),e.target.closest(".ml__selected-popover-close")){e.preventDefault(),this.hideSelectedPopover();return}const l=e.target.closest(".ml__pill-remove");if(l){e.preventDefault();const o=l.dataset.value,s=this.selectedOptions.get(o);s&&(this.deselectOption(s),this.renderSelectedPopover(),this.selectedValues.size===0&&this.hideSelectedPopover())}}positionSelectedPopover(){this.selectedPopoverCleanup=ue(this.input,this.selectedPopover,()=>{const e=this.selectedPopoverPlacement||"bottom-start";be(this.input,this.selectedPopover,{placement:e,middleware:[fe(4),...this.selectedPopoverPlacement?[]:[Ae()],ge({padding:8})]}).then(({x:t,y:l,placement:o})=>{this.selectedPopoverPlacement||(this.selectedPopoverPlacement=o,g.debug(`[${this.instanceId}] Locked popover placement:`,o));const s={left:`${t}px`,top:`${l}px`,width:`${this.input.offsetWidth}px`};this.options.dropdownMinWidth&&(s.minWidth=this.options.dropdownMinWidth),Object.assign(this.selectedPopover.style,s)})})}updateHiddenInput(){if(!this.options.formFieldId)return;this.hiddenInputs.forEach(o=>o.remove()),this.hiddenInputs=[];const e=this.options.valueFormat||"json",t=Array.from(this.selectedOptions.values()).map(o=>this.getItemValue(o)),l=this.options.hostElement||this.element;if(e==="array")t.forEach(o=>{const s=document.createElement("input");s.type="hidden",s.name=`${this.options.formFieldId}[]`,s.value=String(o),l.appendChild(s),this.hiddenInputs.push(s)});else{const o=document.createElement("input");o.type="hidden",o.name=this.options.formFieldId,o.id=this.options.formFieldId,o.value=this.getFormValue(),l.appendChild(o),this.hiddenInputs.push(o)}}getFormValue(){const e=Array.from(this.selectedOptions.values()).map(l=>this.getItemValue(l));return this.options.getValueFormatCallback?this.options.getValueFormatCallback(e):(this.options.valueFormat||"json")==="csv"?e.join(","):JSON.stringify(e)}getSelected(){return Array.from(this.selectedOptions.values())}setSelected(e){this.selectedValues=new Set(e.map(t=>String(t))),this.selectedOptions.clear(),e.forEach(t=>{const l=String(t),o=this.allOptions.find(s=>String(this.getItemValue(s))===l);o&&this.selectedOptions.set(l,o)}),this.renderDropdown(),this.renderPills(),this.updateHiddenInput()}get selectedItem(){return this.selectedOptions.size===0?null:Array.from(this.selectedOptions.values())[0]}get selectedValue(){if(!this.options.valueMember&&!this.options.getValueCallback)return null;if(this.selectedOptions.size===0)return this.options.isMultipleEnabled?[]:null;const e=Array.from(this.selectedOptions.values()).map(t=>this.getItemValue(t));return this.options.isMultipleEnabled?e:e[0]??null}getValue(){if(this.selectedOptions.size===0)return this.options.isMultipleEnabled?[]:null;const e=Array.from(this.selectedOptions.values()).map(t=>this.getItemValue(t));return this.options.isMultipleEnabled?e:e[0]??null}attachPillTooltips(){if(!this.options.isPillTooltipsEnabled){g.debug(`[${this.instanceId}] Tooltips disabled - isPillTooltipsEnabled is false`);return}const e=this.pillsContainer.querySelectorAll(".ml__pill:not(.ml__pill--more)");g.debug(`[${this.instanceId}] Found ${e.length} pills to attach tooltips to`),e.forEach(l=>{const o=l,s=o.querySelector(".ml__pill-remove");if(!s)return;const n=s.dataset.value,r=this.selectedOptions.get(n);if(!r)return;const a=o.querySelector(".ml__pill-text");a&&this.createTooltipForElement(a,r,n);const d=this.getItemPillDisplayValue(r);this.createRemoveButtonTooltip(s,d,n)});const t=this.pillsContainer.querySelector(".ml__pill--more");if(t){const l=t.querySelector(".ml__pill-remove");if(l&&l.dataset.action==="remove-hidden"){const o=this.options.pillsMaxVisible||3,n=Array.from(this.selectedOptions.values()).length-o;this.createRemoveButtonTooltip(l,`${n} hidden items`,"more-badge-remove")}}}createTooltipForElement(e,t,l){const o=document.createElement("div");o.className="ml__pill-tooltip";let s;if(this.options.getPillTooltipCallback)s=this.options.getPillTooltipCallback(t),g.debug(`[${this.instanceId}] Using custom callback for tooltip content`);else{const m=this.getItemPillDisplayValue(t),p=this.getItemSubtitle(t);s=p?`${m}
|
|
55
|
-
${p}`:m,g.debug(`[${this.instanceId}] Using default content: "${s}"`)}typeof s=="string"?o.textContent=s:o.appendChild(s),(this.options.container||document.body).appendChild(o),g.debug(`[${this.instanceId}] Tooltip element created and appended for "${l}"`),this.pillTooltips.set(l,o);let r,a;const d=()=>{clearTimeout(a),g.debug(`[${this.instanceId}] Mouse entered pill "${l}", will show tooltip in ${this.options.pillTooltipDelay||300}ms`),r=window.setTimeout(()=>{g.debug(`[${this.instanceId}] Showing tooltip for "${l}"`),o.classList.add("ml__pill-tooltip--visible"),this.positionPillTooltip(e,o,l)},this.options.pillTooltipDelay||300)},c=()=>{clearTimeout(r),a=window.setTimeout(()=>{o.classList.remove("ml__pill-tooltip--visible"),this.cleanupPillTooltip(l)},100)};e.addEventListener("mouseenter",d),e.addEventListener("mouseleave",c)}createRemoveButtonTooltip(e,t,l){const o=document.createElement("div");o.className="ml__pill-tooltip",o.textContent=`Remove ${t}`,(this.options.container||document.body).appendChild(o);const n=`${l}-remove`;this.pillTooltips.set(n,o);let r,a;const d=()=>{clearTimeout(a);const m=this.pillTooltips.get(l);m&&m.classList.remove("ml__pill-tooltip--visible"),r=window.setTimeout(()=>{o.classList.add("ml__pill-tooltip--visible"),this.positionPillTooltip(e,o,n)},this.options.pillTooltipDelay||300)},c=()=>{clearTimeout(r),a=window.setTimeout(()=>{o.classList.remove("ml__pill-tooltip--visible"),this.cleanupPillTooltip(n)},100)};e.addEventListener("mouseenter",d),e.addEventListener("mouseleave",c)}positionPillTooltip(e,t,l){const o=ue(e,t,()=>{be(e,t,{placement:this.options.pillTooltipPlacement||"top",strategy:"fixed",middleware:[fe(this.options.pillTooltipOffset||8),Ae(),ge({padding:8})]}).then(({x:s,y:n})=>{Object.assign(t.style,{left:`${s}px`,top:`${n}px`}),g.debug(`[${this.instanceId}] Positioned tooltip "${l}" at x:${s}, y:${n}`,{placement:this.options.pillTooltipPlacement||"top",tooltipClasses:t.className,tooltipDisplay:window.getComputedStyle(t).display,tooltipOpacity:window.getComputedStyle(t).opacity,tooltipVisibility:window.getComputedStyle(t).visibility,tooltipZIndex:window.getComputedStyle(t).zIndex,tooltipPosition:window.getComputedStyle(t).position})})});this.pillTooltipCleanups.set(l,o)}cleanupPillTooltip(e){const t=this.pillTooltipCleanups.get(e);t&&(t(),this.pillTooltipCleanups.delete(e))}destroyAllPillTooltips(){this.pillTooltipCleanups.forEach(e=>e()),this.pillTooltipCleanups.clear(),this.pillTooltips.forEach(e=>e.remove()),this.pillTooltips.clear()}destroy(){this.destroyAllPillTooltips(),this.dropdownCleanup&&this.dropdownCleanup(),this.hintCleanup&&this.hintCleanup(),this.selectedPopoverCleanup&&this.selectedPopoverCleanup(),this.virtualScroll&&(this.virtualScroll.destroy(),this.virtualScroll=null),this.dropdown&&this.dropdown.remove(),this.hint&&this.hint.remove(),this.selectedPopover&&this.selectedPopover.remove(),this.element.innerHTML="",this.element.classList.remove("ml","ml--open","ml--no-checkboxes"),N.info(`[${this.instanceId}] Component destroyed`)}}const hi='@charset "UTF-8";:host{--ml-accent-color: #3b82f6;--ml-accent-color-hover: #2563eb;--ml-accent-color-active: #1d4ed8;--ml-text-primary: #111827;--ml-text-secondary: #6b7280;--ml-text-white: #ffffff;--ml-primary-bg: #f3f4f6;--ml-primary-bg-hover: #e5e7eb;--ml-border-color: #e5e7eb;--ml-input-padding: .5rem .75rem;--ml-input-padding-right: 2.5rem;--ml-input-font-size: .875rem;--ml-input-border-style: 1px solid #d1d5db;--ml-input-border-radius: .375rem;--ml-input-bg: #ffffff;--ml-input-text: #111827;--ml-input-focus-border-color: #3b82f6;--ml-input-placeholder-color: #6b7280;--ml-input-bg-disabled: rgba(107, 114, 128, .05);--ml-toggle-right: .75rem;--ml-toggle-color: #6b7280;--ml-transform-center-y: translateY(-50%);--ml-transform-rotate-180: 180deg;--ml-count-badge-offset: 2rem;--ml-count-badge-padding: .125rem .25rem;--ml-count-badge-bg: #3b82f6;--ml-count-badge-color: #ffffff;--ml-count-badge-font-size: .75rem;--ml-count-badge-font-weight: 600;--ml-count-badge-border-radius: .25rem;--ml-count-badge-bg-hover: #2563eb;--ml-transform-scale-hover: 1.1;--ml-hint-padding: .5rem .75rem;--ml-hint-bg: #ffffff;--ml-hint-border: 1px solid #e5e7eb;--ml-hint-border-radius: .375rem;--ml-hint-box-shadow: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -2px rgba(0, 0, 0, .1);--ml-hint-font-size: .75rem;--ml-hint-color: #6b7280;--ml-line-height-relaxed: 1.4;--ml-dropdown-bg: #ffffff;--ml-dropdown-border: 1px solid #e5e7eb;--ml-dropdown-border-radius: .375rem;--ml-dropdown-box-shadow: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 8px 10px -6px rgba(0, 0, 0, .1);--ml-dropdown-max-height: 20rem;--ml-dropdown-color: #111827;--ml-z-index-dropdown: 9999;--ml-z-index-sticky: 1;--ml-actions-gap: .25rem;--ml-actions-padding: .5rem;--ml-actions-border-bottom: 1px solid #e5e7eb;--ml-actions-bg: #ffffff;--ml-action-btn-padding: .25rem .5rem;--ml-action-btn-font-size: .75rem;--ml-action-btn-border: 1px solid #e5e7eb;--ml-action-btn-border-radius: .25rem;--ml-action-btn-bg: transparent;--ml-action-btn-color: inherit;--ml-action-btn-bg-hover: #f3f4f6;--ml-action-btn-border-color-hover: #3b82f6;--ml-transform-scale-active: .98;--ml-options-padding: .25rem 0;--ml-group-border-top: 1px solid #e5e7eb;--ml-group-margin-top: .25rem;--ml-group-padding-top: .25rem;--ml-group-label-padding: .25rem .75rem;--ml-group-label-font-size: .75rem;--ml-group-label-font-weight: 600;--ml-group-label-color: #6b7280;--ml-group-label-transform: uppercase;--ml-group-label-letter-spacing: .05em;--ml-option-gap: .5rem;--ml-option-padding: .5rem .75rem;--ml-option-padding-h: .75rem;--ml-option-bg: transparent;--ml-option-bg-hover: #f9fafb;--ml-option-bg-focused: #f9fafb;--ml-option-outline-focused: 2px solid #3b82f6;--ml-option-focus-outline-offset: -2px;--ml-option-bg-matched: rgba(59, 130, 246, .08);--ml-option-border-matched: 3px solid rgba(59, 130, 246, .4);--ml-option-bg-selected: rgba(59, 130, 246, .1);--ml-disabled-opacity: .5;--ml-option-content-gap: .5rem;--ml-option-icon-size: 1.25rem;--ml-option-icon-font-size: 1rem;--ml-option-title-font-size: .875rem;--ml-option-title-color: inherit;--ml-option-mark-bg: rgba(59, 130, 246, .2);--ml-option-mark-color: inherit;--ml-option-mark-font-weight: 600;--ml-option-subtitle-margin-top: .25rem;--ml-option-subtitle-font-size: .75rem;--ml-option-subtitle-color: #6b7280;--ml-option-subtitle-line-height: 1.3;--ml-checkbox-margin-top: .125rem;--ml-empty-padding: 1rem .75rem;--ml-empty-font-size: .875rem;--ml-empty-color: #6b7280;--ml-loader-padding: 1rem;--ml-loader-gap: .5rem;--ml-loading-text-font-size: .875rem;--ml-loading-text-color: #6b7280;--ml-pills-gap: .5rem;--ml-pills-margin-bottom: .5rem;--ml-pills-margin-top: .5rem;--ml-pills-margin-left: .25rem;--ml-pills-margin-right: .25rem;--ml-pill-gap: .5rem;--ml-pill-height: 1.5rem;--ml-pill-font-size: .75rem;--ml-pill-font-weight: 600;--ml-pill-border-radius: .375rem;--ml-pill-bg: #eff6ff;--ml-pill-bg-hover: #ffffff;--ml-pill-bg-active: #e0f2fe;--ml-order-first: -1;--ml-pill-text-padding: 0 .5rem;--ml-pill-text-bg: #eff6ff;--ml-pill-text-color: #3b82f6;--ml-pill-remove-width: 1.5rem;--ml-pill-remove-bg: #3b82f6;--ml-pill-remove-color: #ffffff;--ml-pill-remove-border: none;--ml-pill-remove-font-size: .75rem;--ml-pill-remove-bg-hover: #2563eb;--ml-pill-remove-box-shadow-focus: 0 0 0 2px rgba(59, 130, 246, .5);--ml-icon-remove: "×";--ml-more-badge-bg: #eff6ff;--ml-more-badge-hover-bg: #ffffff;--ml-more-badge-active-bg: #e0f2fe;--ml-count-display-margin-bottom: .5rem;--ml-count-display-margin-top: .5rem;--ml-count-display-margin-left: .5rem;--ml-count-display-margin-right: .5rem;--ml-count-badge-wrapper-bg: transparent;--ml-count-badge-wrapper-border: 1px solid #e5e7eb;--ml-count-badge-wrapper-border-radius: .25rem;--ml-count-badge-wrapper-padding: .25rem .5rem;--ml-count-badge-wrapper-gap: .25rem;--ml-count-badge-wrapper-bg-hover: #f9fafb;--ml-count-badge-wrapper-border-color-hover: #3b82f6;--ml-count-text-bg: transparent;--ml-count-text-border: none;--ml-count-text-font-size: .875rem;--ml-count-text-color: #111827;--ml-count-clear-size: 1rem;--ml-count-clear-bg: transparent;--ml-count-clear-color: #6b7280;--ml-count-clear-font-size: 1.125rem;--ml-count-clear-border-radius: 50%;--ml-count-clear-bg-hover: rgba(59, 130, 246, .2);--ml-count-clear-color-hover: #3b82f6;--ml-icon-clear: "×";--ml-tooltip-bg: #333;--ml-tooltip-color: #fff;--ml-tooltip-padding: .5rem .75rem;--ml-tooltip-border-radius: .375rem;--ml-tooltip-font-size: .875rem;--ml-tooltip-max-width: 20rem;--ml-tooltip-shadow: 0 2px 8px rgba(0, 0, 0, .15);--ml-tooltip-z-index: 10000;--ml-z-index-popover: 10000;--ml-selected-popover-width: 20rem;--ml-selected-popover-max-height: 20rem;--ml-selected-popover-bg: #ffffff;--ml-selected-popover-border: 1px solid #e5e7eb;--ml-selected-popover-border-radius: .375rem;--ml-selected-popover-box-shadow: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 8px 10px -6px rgba(0, 0, 0, .1);--ml-selected-popover-header-padding: .5rem .75rem;--ml-selected-popover-header-bg: rgba(59, 130, 246, .1);--ml-selected-popover-header-border-bottom: 1px solid #e5e7eb;--ml-selected-popover-header-font-size: .875rem;--ml-selected-popover-header-font-weight: 600;--ml-selected-popover-header-color: #111827;--ml-popover-close-size: 1.5rem;--ml-selected-popover-close-bg: transparent;--ml-selected-popover-close-color: #6b7280;--ml-selected-popover-close-font-size: 1.25rem;--ml-selected-popover-close-border-radius: 50%;--ml-selected-popover-close-bg-hover: rgba(59, 130, 246, .2);--ml-selected-popover-close-color-hover: #3b82f6;--ml-selected-popover-body-gap: .25rem;--ml-selected-popover-body-padding: .5rem;--ml-selected-popover-body-max-height: 18rem;--ml-font-size-2xs: .625rem;--ml-font-size-xs: .75rem;--ml-font-size-sm: .875rem;--ml-font-size-base: 1rem;--ml-font-size-lg: 1.125rem;--ml-font-weight-medium: 500;--ml-font-weight-semibold: 600;--ml-line-height-none: 1;--ml-spacing-xs: .25rem;--ml-spacing-sm: .5rem;--ml-spacing-md: .75rem;--ml-spacing-lg: 1rem;--ml-transition-fast: .15s;--ml-transition-normal: .2s;--ml-easing-snappy: cubic-bezier(.4, 0, .2, 1);--ml-placeholder-opacity: .6;--ml-disabled-input-opacity: .6}multi-select:not(:defined){display:block;min-height:2.5rem;color:transparent!important;background:transparent}.ml-wrapper{display:flex;flex-direction:column;align-items:stretch}.ml-wrapper--inline{flex-direction:row;align-items:flex-start}.ml{position:relative;width:100%}.ml__input-wrapper{position:relative;display:flex;align-items:center}.ml__input{width:100%;padding:var(--ml-input-padding, .5rem .75rem);padding-right:var(--ml-input-padding-right, 2.5rem);font-size:var(--ml-input-font-size, .875rem);border:var(--ml-input-border-style, 1px solid #d1d5db);border-radius:var(--ml-input-border-radius, .375rem);background:var(--ml-input-bg, #ffffff);color:var(--ml-input-text, #111827);cursor:pointer;transition:border-color var(--ml-transition-fast, .15s) var(--ml-easing-snappy, cubic-bezier(.4, 0, .2, 1))}.ml__input:focus{outline:none;border-color:var(--ml-input-focus-border-color, #3b82f6)}.ml__input::placeholder{color:var(--ml-input-placeholder-color, #6b7280);opacity:0;transition:opacity var(--ml-transition-fast, .15s) var(--ml-easing-snappy, cubic-bezier(.4, 0, .2, 1))}:host([data-ready]) .ml__input::placeholder{opacity:var(--ml-placeholder-opacity, .6)}.ml__toggle{position:absolute;right:var(--ml-toggle-right, .75rem);top:50%;transform:var(--ml-transform-center-y, translateY(-50%));pointer-events:none;color:var(--ml-toggle-color, #6b7280);transition:transform var(--ml-transition-fast, .15s) var(--ml-easing-snappy, cubic-bezier(.4, 0, .2, 1))}.ml--open .ml__toggle{transform:var(--ml-transform-center-y, translateY(-50%)) rotate(var(--ml-transform-rotate-180, 180deg))}.ml__count-badge{position:absolute;right:var(--ml-count-badge-offset, 2rem);top:50%;transform:var(--ml-transform-center-y, translateY(-50%));padding:var(--ml-count-badge-padding, .125rem .25rem);background:var(--ml-count-badge-bg, #3b82f6);color:var(--ml-count-badge-color, #ffffff);font-size:var(--ml-count-badge-font-size, .75rem);font-weight:var(--ml-count-badge-font-weight, 600);border-radius:var(--ml-count-badge-border-radius, .25rem);cursor:pointer;transition:all var(--ml-transition-fast, .15s) var(--ml-easing-snappy, cubic-bezier(.4, 0, .2, 1))}.ml__count-badge:hover{background:var(--ml-count-badge-bg-hover, #2563eb);transform:var(--ml-transform-center-y, translateY(-50%)) scale(var(--ml-transform-scale-hover, 1.1))}.ml__hint{display:none;position:absolute;z-index:var(--ml-z-index-popover, 10000);padding:var(--ml-hint-padding, .5rem .75rem);background:var(--ml-hint-bg, #ffffff);border:var(--ml-hint-border, 1px solid #e5e7eb);border-radius:var(--ml-hint-border-radius, .375rem);box-shadow:var(--ml-hint-box-shadow, 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -2px rgba(0, 0, 0, .1));font-size:var(--ml-hint-font-size, .75rem);color:var(--ml-hint-color, #6b7280);line-height:var(--ml-line-height-relaxed, 1.4);max-width:100%}.ml__hint--visible{display:block}.ml__dropdown{display:none;position:absolute;z-index:var(--ml-z-index-dropdown, 9999);background:var(--ml-dropdown-bg, #ffffff);border:var(--ml-dropdown-border, 1px solid #e5e7eb);border-radius:var(--ml-dropdown-border-radius, .375rem);box-shadow:var(--ml-dropdown-box-shadow, 0 20px 25px -5px rgba(0, 0, 0, .1), 0 8px 10px -6px rgba(0, 0, 0, .1));max-height:var(--ml-dropdown-max-height, 20rem);overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y;-webkit-overflow-scrolling:touch;color:var(--ml-dropdown-color, #111827)}.ml__dropdown--visible{display:block}.ml__dropdown--virtual{overflow-y:visible;max-height:none}.ml__actions{display:flex;gap:var(--ml-actions-gap, .25rem);padding:var(--ml-actions-padding, .5rem);border-bottom:var(--ml-actions-border-bottom, 1px solid #e5e7eb)}.ml__actions--sticky{position:sticky;top:0;z-index:var(--ml-z-index-sticky, 1);background:var(--ml-actions-bg, #ffffff)}.ml__action-btn{flex:1;padding:var(--ml-action-btn-padding, .25rem .5rem);font-size:var(--ml-action-btn-font-size, .75rem);border:var(--ml-action-btn-border, 1px solid #e5e7eb);border-radius:var(--ml-action-btn-border-radius, .25rem);background:var(--ml-action-btn-bg, transparent);color:var(--ml-action-btn-color, inherit);cursor:pointer;transition:all var(--ml-transition-fast, .15s) var(--ml-easing-snappy, cubic-bezier(.4, 0, .2, 1))}.ml__action-btn:hover{background:var(--ml-action-btn-bg-hover, #f3f4f6);border-color:var(--ml-action-btn-border-color-hover, #3b82f6)}.ml__action-btn:active{transform:scale(var(--ml-transform-scale-active, .98))}.ml__options{padding:var(--ml-options-padding, .25rem 0)}.ml__options--virtual .ml__option{height:var(--ml-option-height, 50px);min-height:var(--ml-option-height, 50px);max-height:var(--ml-option-height, 50px);overflow:hidden;box-sizing:border-box}.ml__group+.ml__group{border-top:var(--ml-group-border-top, 1px solid #e5e7eb);margin-top:var(--ml-group-margin-top, .25rem);padding-top:var(--ml-group-padding-top, .25rem)}.ml__group-label{padding:var(--ml-group-label-padding, .25rem .75rem);font-size:var(--ml-group-label-font-size, .75rem);font-weight:var(--ml-group-label-font-weight, 600);color:var(--ml-group-label-color, #6b7280);text-transform:var(--ml-group-label-transform, uppercase);letter-spacing:var(--ml-group-label-letter-spacing, .05em)}.ml__option{display:flex;align-items:flex-start;gap:var(--ml-option-gap, .5rem);padding:var(--ml-option-padding, .5rem .75rem);cursor:pointer;transition:background-color var(--ml-transition-fast, .15s) var(--ml-easing-snappy, cubic-bezier(.4, 0, .2, 1))}.ml__option:hover{background:var(--ml-option-bg-hover, #f9fafb)}.ml__option--focused{background:var(--ml-option-bg-focused, #f9fafb);outline:var(--ml-option-outline-focused, 2px solid #3b82f6);outline-offset:var(--ml-option-focus-outline-offset, -2px)}.ml__option--matched{background:var(--ml-option-bg-matched, rgba(59, 130, 246, .08));border-left:var(--ml-option-border-matched, 3px solid rgba(59, 130, 246, .4))}.ml__option--selected{background:var(--ml-option-bg-selected, rgba(59, 130, 246, .1))}.ml__option--selected:hover{background:var(--ml-option-bg-selected-hover, var(--ml-option-bg-selected, rgba(59, 130, 246, .1)))}.ml__option--disabled{opacity:var(--ml-disabled-opacity, .5);cursor:not-allowed}.ml__option--disabled:hover{background:var(--ml-option-bg, transparent)}.ml__checkbox{flex-shrink:0;margin-top:var(--ml-checkbox-margin-top, .125rem);cursor:pointer}.ml__option--disabled .ml__checkbox{cursor:not-allowed}.ml__option-content{flex:1;display:flex;align-items:flex-start;gap:var(--ml-option-content-gap, .5rem);min-width:0}.ml__option-icon{flex-shrink:0;width:var(--ml-option-icon-size, 1.25rem);height:var(--ml-option-icon-size, 1.25rem);display:flex;align-items:center;justify-content:center;font-size:var(--ml-option-icon-font-size, 1rem)}.ml__option-icon svg{width:100%;height:100%;fill:currentColor}.ml__option-text{flex:1;min-width:0}.ml__option-title{font-size:var(--ml-option-title-font-size, .875rem);color:var(--ml-option-title-color, inherit);line-height:var(--ml-line-height-relaxed, 1.4)}.ml__option-title mark{background:var(--ml-option-mark-bg, rgba(59, 130, 246, .2));color:var(--ml-option-mark-color, inherit);font-weight:var(--ml-option-mark-font-weight, 600)}.ml__option-subtitle{margin-top:var(--ml-option-subtitle-margin-top, .25rem);font-size:var(--ml-option-subtitle-font-size, .75rem);color:var(--ml-option-subtitle-color, #6b7280);line-height:var(--ml-option-subtitle-line-height, 1.3)}.ml__empty{padding:var(--ml-empty-padding, 1rem .75rem);text-align:center;font-size:var(--ml-empty-font-size, .875rem);color:var(--ml-empty-color, #6b7280)}.ml__loader{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--ml-loader-padding, 1rem);gap:var(--ml-loader-gap, .5rem)}.ml__loading-text{font-size:var(--ml-loading-text-font-size, .875rem);color:var(--ml-loading-text-color, #6b7280)}.ml__pills{display:flex;flex-wrap:wrap;gap:var(--ml-pills-gap, .5rem);padding:0}.ml__pills:empty{display:none}.ml__pills--bottom{margin-top:var(--ml-pills-margin-bottom, .5rem)}.ml__pills--top{margin-bottom:var(--ml-pills-margin-top, .5rem);order:var(--ml-order-first, -1)}.ml__pills--left{order:var(--ml-order-first, -1);margin-right:var(--ml-pills-margin-left, .25rem);justify-content:flex-end}.ml__pills--right{margin-left:var(--ml-pills-margin-right, .25rem);justify-content:flex-start}.ml__count-display{display:flex;align-items:center}.ml__count-display:empty{display:none}.ml__count-display--bottom{margin-top:var(--ml-count-display-margin-bottom, .5rem)}.ml__count-display--top{margin-bottom:var(--ml-count-display-margin-top, .5rem);order:var(--ml-order-first, -1)}.ml__count-display--left{order:var(--ml-order-first, -1);margin-right:var(--ml-count-display-margin-left, .5rem);justify-content:flex-start}.ml__count-display--right{margin-left:var(--ml-count-display-margin-right, .5rem);justify-content:flex-end}.ml__count-badge-wrapper{display:inline-flex;align-items:center;gap:var(--ml-count-badge-wrapper-gap, .25rem);background:var(--ml-count-badge-wrapper-bg, transparent);border:var(--ml-count-badge-wrapper-border, 1px solid #e5e7eb);border-radius:var(--ml-count-badge-wrapper-border-radius, .25rem);padding:var(--ml-count-badge-wrapper-padding, .25rem .5rem);transition:all var(--ml-transition-fast, .15s) var(--ml-easing-snappy, cubic-bezier(.4, 0, .2, 1))}.ml__count-badge-wrapper:hover{background:var(--ml-count-badge-wrapper-bg-hover, #f9fafb);border-color:var(--ml-count-badge-wrapper-border-color-hover, #3b82f6)}.ml__count-text{display:inline-flex;align-items:center;background:var(--ml-count-text-bg, transparent);border:var(--ml-count-text-border, none);padding:0;font-size:var(--ml-count-text-font-size, .875rem);color:var(--ml-count-text-color, #111827);cursor:pointer;transition:color var(--ml-transition-fast, .15s) var(--ml-easing-snappy, cubic-bezier(.4, 0, .2, 1))}.ml__count-clear{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:var(--ml-count-clear-size, 1rem);height:var(--ml-count-clear-size, 1rem);padding:0;border:none;background:var(--ml-count-clear-bg, transparent);color:var(--ml-count-clear-color, #6b7280);font-size:var(--ml-count-clear-font-size, 1.125rem);line-height:var(--ml-line-height-none, 1);cursor:pointer;border-radius:var(--ml-count-clear-border-radius, 50%);transition:all var(--ml-transition-fast, .15s) var(--ml-easing-snappy, cubic-bezier(.4, 0, .2, 1))}.ml__count-clear:hover{background:var(--ml-count-clear-bg-hover, rgba(59, 130, 246, .2));color:var(--ml-count-clear-color-hover, #3b82f6)}.ml__count-clear:before{content:var(--ml-icon-clear, "×")}.ml__pill{display:inline-flex;align-items:center;height:var(--ml-pill-height, 1.5rem);font-size:var(--ml-pill-font-size, .75rem);font-weight:var(--ml-pill-font-weight, 600);line-height:var(--ml-line-height-none, 1);border-radius:var(--ml-pill-border-radius, .375rem);overflow:hidden;max-width:100%}.ml__pill-text{display:flex;align-items:center;height:100%;padding:var(--ml-pill-text-padding, 0 .5rem);background:var(--ml-pill-text-bg, #eff6ff);color:var(--ml-pill-text-color, #3b82f6);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transition:background-color var(--ml-transition-normal, .2s) ease}.ml__pill-remove{display:flex;align-items:center;justify-content:center;width:var(--ml-pill-remove-width, 1.5rem);height:100%;flex-shrink:0;background:var(--ml-pill-remove-bg, #3b82f6);color:var(--ml-pill-remove-color, #ffffff);border:var(--ml-pill-remove-border, none);cursor:pointer;transition:background-color var(--ml-transition-normal, .2s) ease;font-size:var(--ml-pill-remove-font-size, .75rem)}.ml__pill-remove:hover{background:var(--ml-pill-remove-bg-hover, #2563eb)}.ml__pill-remove:focus{outline:none;box-shadow:var(--ml-pill-remove-box-shadow-focus, 0 0 0 2px rgba(59, 130, 246, .5))}.ml__pill-remove:before{content:var(--ml-icon-remove, "×");font-size:var(--ml-font-size-base, 1rem);line-height:var(--ml-line-height-none, 1)}.ml__pill--more{cursor:pointer}.ml__pill--more .ml__pill-text{background:var(--ml-more-badge-bg, #eff6ff);font-weight:var(--ml-pill-font-weight, 600)}.ml__pill--more:hover .ml__pill-text{background:var(--ml-more-badge-hover-bg, #ffffff)}.ml__pill--more:active .ml__pill-text{background:var(--ml-more-badge-active-bg, #e0f2fe)}.ml__pill-tooltip{position:fixed;z-index:var(--ml-tooltip-z-index, 10000);opacity:0;visibility:hidden;transition:opacity var(--ml-transition-normal, .2s) ease,visibility var(--ml-transition-normal, .2s) ease;background:var(--ml-tooltip-bg, #333);color:var(--ml-tooltip-color, #fff);padding:var(--ml-tooltip-padding, .5rem .75rem);border-radius:var(--ml-tooltip-border-radius, .375rem);font-size:var(--ml-tooltip-font-size, .875rem);line-height:var(--ml-line-height-relaxed, 1.4);max-width:var(--ml-tooltip-max-width, 20rem);word-wrap:break-word;white-space:pre-wrap;box-shadow:var(--ml-tooltip-shadow, 0 2px 8px rgba(0, 0, 0, .15));pointer-events:none}.ml__pill-tooltip--visible{opacity:1;visibility:visible}.ml__selected-popover{display:none;position:absolute;z-index:var(--ml-z-index-popover, 10000);background:var(--ml-selected-popover-bg, #ffffff);border:var(--ml-selected-popover-border, 1px solid #e5e7eb);border-radius:var(--ml-selected-popover-border-radius, .375rem);box-shadow:var(--ml-selected-popover-box-shadow, 0 20px 25px -5px rgba(0, 0, 0, .1), 0 8px 10px -6px rgba(0, 0, 0, .1));width:var(--ml-selected-popover-width, 20rem);max-height:var(--ml-selected-popover-max-height, 20rem);overflow:hidden}.ml__selected-popover--visible{display:flex;flex-direction:column}.ml__selected-popover--virtual{display:block;overflow:visible;max-height:none}.ml__selected-popover-header{display:flex;align-items:center;justify-content:space-between;padding:var(--ml-selected-popover-header-padding, .5rem .75rem);background:var(--ml-selected-popover-header-bg, rgba(59, 130, 246, .1));border-bottom:var(--ml-selected-popover-header-border-bottom, 1px solid #e5e7eb);font-size:var(--ml-selected-popover-header-font-size, .875rem);font-weight:var(--ml-selected-popover-header-font-weight, 600);color:var(--ml-selected-popover-header-color, #111827)}.ml__selected-popover-close{display:flex;align-items:center;justify-content:center;width:var(--ml-popover-close-size, 1.5rem);height:var(--ml-popover-close-size, 1.5rem);padding:0;border:none;background:var(--ml-selected-popover-close-bg, transparent);color:var(--ml-selected-popover-close-color, #6b7280);font-size:var(--ml-selected-popover-close-font-size, 1.25rem);line-height:var(--ml-line-height-none, 1);cursor:pointer;border-radius:var(--ml-selected-popover-close-border-radius, 50%);transition:all var(--ml-transition-fast, .15s) var(--ml-easing-snappy, cubic-bezier(.4, 0, .2, 1))}.ml__selected-popover-close:hover{background:var(--ml-selected-popover-close-bg-hover, rgba(59, 130, 246, .2));color:var(--ml-selected-popover-close-color-hover, #3b82f6)}.ml__selected-popover-body{display:flex;flex-direction:column;gap:var(--ml-selected-popover-body-gap, .25rem);padding:var(--ml-selected-popover-body-padding, .5rem);overflow-y:auto;max-height:var(--ml-selected-popover-body-max-height, 18rem)}.ml__selected-popover-body .ml__pill{width:100%}.ml__selected-popover-body .ml__pill-text{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}.ml__selected-popover-body--virtual{display:block;max-height:none;padding:0}.ml__selected-popover-body--virtual .ml__pill{height:var(--ml-pill-height-virtual, 36px);min-height:var(--ml-pill-height-virtual, 36px);max-height:var(--ml-pill-height-virtual, 36px);margin-bottom:var(--ml-selected-popover-body-gap, .25rem);overflow:hidden;box-sizing:border-box}.ml--rtl .ml__input-wrapper{direction:rtl}.ml--rtl .ml__input{text-align:right;padding-left:var(--ml-input-padding-right, 2.5rem);padding-right:var(--ml-input-padding-h, .75rem)}.ml--rtl .ml__toggle{left:var(--ml-toggle-right, .75rem)!important;right:auto!important}.ml--rtl .ml__count-badge{left:var(--ml-count-badge-offset, 2rem)!important;right:auto!important}.ml--rtl .ml__dropdown{direction:rtl;text-align:right}.ml--rtl .ml__option{flex-direction:row-reverse}.ml--rtl .ml__checkbox{margin-left:var(--ml-spacing-sm, .5rem);margin-right:0}.ml--rtl .ml__option-content{text-align:right}.ml--rtl .ml__option-icon{margin-left:var(--ml-spacing-xs, .25rem);margin-right:0}.ml--rtl .ml__pills{direction:rtl}.ml--rtl .ml__pill{flex-direction:row-reverse}.ml--rtl .ml__pill-remove{border-radius:var(--ml-pill-remove-border-radius-rtl, .375rem) 0 0 var(--ml-pill-remove-border-radius-rtl, .375rem);border-left:var(--ml-pill-remove-border, none);border-right:none}.ml--rtl .ml__pill-text{border-radius:0 var(--ml-pill-text-border-radius-rtl, .375rem) var(--ml-pill-text-border-radius-rtl, .375rem) 0}.ml--rtl .ml__count-display{direction:rtl}.ml--rtl .ml__count-badge-wrapper{flex-direction:row-reverse}.ml--rtl .ml__selected-popover{direction:rtl;text-align:right}.ml--rtl .ml__actions{direction:rtl}.ml--rtl .ml__group-label,.ml--rtl .ml__empty{text-align:right}.ml--rtl .ml__hint{direction:rtl;text-align:right}.ml--xs .ml__input{font-size:var(--ml-font-size-xs, .75rem)}.ml--xs .ml__option{padding:var(--ml-spacing-xs, .25rem) var(--ml-spacing-sm, .5rem)}.ml--xs .ml__option-title{font-size:var(--ml-font-size-xs, .75rem)}.ml--xs .ml__pill{font-size:var(--ml-font-size-2xs, .625rem)}.ml--sm .ml__input,.ml--sm .ml__option-title{font-size:var(--ml-font-size-xs, .75rem)}.ml--lg .ml__input,.ml--lg .ml__option-title{font-size:var(--ml-font-size-base, 1rem)}.ml--lg .ml__pill{font-size:var(--ml-font-size-sm, .875rem)}.ml--xl .ml__input,.ml--xl .ml__option-title{font-size:var(--ml-font-size-lg, 1.125rem)}.ml--xl .ml__pill{font-size:var(--ml-font-size-base, 1rem)}.ml--disabled .ml__input{opacity:var(--ml-disabled-input-opacity, .6);cursor:not-allowed;background:var(--ml-input-bg-disabled, rgba(107, 114, 128, .05))}.ml--disabled .ml__toggle{opacity:var(--ml-disabled-input-opacity, .6)}.ml--no-checkboxes .ml__option{gap:0;padding-left:var(--ml-option-padding-h, .75rem)}.ml--no-checkboxes .ml__option-content{padding-left:0}.ml-debug-info{margin-top:.25rem;padding:.25rem;background-color:#f9fafb;border:1px solid #e5e7eb;border-radius:.375rem;font-size:.75rem;color:#111827}.ml-debug-info details summary{cursor:pointer;font-weight:600;color:#2563eb;-webkit-user-select:none;user-select:none;padding:.25rem;border-radius:.25rem}.ml-debug-info details summary:hover{background-color:#f3f4f6}.ml-debug-info details summary:focus{outline:2px solid #3b82f6;outline-offset:2px}.ml-debug-info .ml-debug-stats{display:flex;flex-direction:column;gap:.25rem;margin-top:.25rem;padding:.25rem;background-color:#fff;border-radius:.25rem}.ml-debug-info .ml-debug-stats span{display:flex;justify-content:space-between;padding:2px 4px;font-family:monospace;font-size:.625rem}.ml-debug-info .ml-debug-stats span:before{content:"•";margin-right:.25rem;color:#3b82f6}',mi=typeof HTMLElement<"u"?HTMLElement:class{},Te=new Set;function nt(){return Array.from(Te)}class Le extends mi{constructor(){super();u(this,"picker");u(this,"containerElement");u(this,"shadow");u(this,"_options");u(this,"_valueMember");u(this,"_getValueCallback");u(this,"_displayValueMember");u(this,"_getDisplayValueCallback");u(this,"_getPillDisplayCallback");u(this,"_searchValueMember");u(this,"_getSearchValueCallback");u(this,"_iconMember");u(this,"_getIconCallback");u(this,"_subtitleMember");u(this,"_getSubtitleCallback");u(this,"_groupMember");u(this,"_getGroupCallback");u(this,"_disabledMember");u(this,"_getDisabledCallback");u(this,"_getValueFormatCallback");u(this,"_getPillTooltipCallback");u(this,"_getCountPillCallback");u(this,"_beforeSearchCallback");u(this,"_searchCallback");u(this,"_addNewCallback");u(this,"_selectCallback");u(this,"_deselectCallback");u(this,"_changeCallback");u(this,"_declarativeSelectedValues");this.shadow=this.attachShadow({mode:"open"});const t=document.createElement("style");t.textContent=hi,this.shadow.appendChild(t),requestAnimationFrame(()=>{this.setAttribute("data-ready","")})}static get observedAttributes(){return["search-hint","search-placeholder","multiple","allow-groups","allow-select-all","allow-clear-all","show-checkboxes","sticky-actions","close-on-select","lock-placement","dropdown-min-width","pills-display-mode","pills-threshold","pills-max-visible","pills-threshold-mode","pills-position","show-count-badge","keep-options-on-search","max-height","empty-message","loading-message","min-search-length","enable-search","search-input-mode","search-mode","allow-add-new","initial-values","enable-virtual-scroll","virtual-scroll-threshold","option-height","pill-height","virtual-scroll-buffer","value-member","display-value-member","search-value-member","icon-member","subtitle-member","group-member","disabled-member","name","value-format","enable-pill-tooltips","pill-tooltip-placement","show-debug-info"]}connectedCallback(){Te.add(this),this.render();const t=this.parseDeclarativeOptions();t&&(this._options&&this._options.length>0&&k.warn("[MultiSelectElement] Both declarative <option> elements and programmatic .options detected. Using declarative options."),this._options=t),this.initializePicker()}disconnectedCallback(){Te.delete(this),this.picker&&this.picker.destroy()}attributeChangedCallback(t,l,o){l!==o&&this.picker&&t!=="initial-values"&&(this.picker.destroy(),this.initializePicker())}render(){this.containerElement=document.createElement("div"),this.containerElement.setAttribute("data-multiselect",""),this.className&&(this.containerElement.className=this.className),this.shadow.appendChild(this.containerElement),this.getAttribute("show-debug-info")==="true"&&this.renderDebugInfo()}renderDebugInfo(){const t=this.shadow.querySelector(".ml-debug-info");t&&t.remove();const l=document.createElement("div");l.className="ml-debug-info";const o=document.createElement("details"),s=document.createElement("summary");s.textContent="Debug Info";const n=document.createElement("div");n.className="ml-debug-stats",o.appendChild(s),o.appendChild(n),l.appendChild(o),this.shadow.appendChild(l),this.updateDebugInfo()}updateDebugInfo(){var h,f;const t=this.shadow.querySelector(".ml-debug-stats");if(!t||!this.picker)return;const l="1.0.0-rc10",o=nt().length,n=this.picker.getSelected().length,r=((h=this._options)==null?void 0:h.length)||0,a=this.picker,d=a.isOpen||!1,c=a.searchTerm||"",m=a.isLoading||!1,p=((f=a.filteredOptions)==null?void 0:f.length)||0;t.innerHTML=`
|
|
51
|
+
${p}`:m,g.debug(`[${this.instanceId}] Using default content: "${s}"`)}typeof s=="string"?o.textContent=s:o.appendChild(s),(this.options.container||document.body).appendChild(o),g.debug(`[${this.instanceId}] Tooltip element created and appended for "${l}"`),this.pillTooltips.set(l,o);let r,a;const d=()=>{clearTimeout(a),g.debug(`[${this.instanceId}] Mouse entered pill "${l}", will show tooltip in ${this.options.pillTooltipDelay||300}ms`),r=window.setTimeout(()=>{g.debug(`[${this.instanceId}] Showing tooltip for "${l}"`),o.classList.add("ml__pill-tooltip--visible"),this.positionPillTooltip(e,o,l)},this.options.pillTooltipDelay||300)},c=()=>{clearTimeout(r),a=window.setTimeout(()=>{o.classList.remove("ml__pill-tooltip--visible"),this.cleanupPillTooltip(l)},100)};e.addEventListener("mouseenter",d),e.addEventListener("mouseleave",c)}createRemoveButtonTooltip(e,t,l){const o=document.createElement("div");o.className="ml__pill-tooltip",o.textContent=`Remove ${t}`,(this.options.container||document.body).appendChild(o);const n=`${l}-remove`;this.pillTooltips.set(n,o);let r,a;const d=()=>{clearTimeout(a);const m=this.pillTooltips.get(l);m&&m.classList.remove("ml__pill-tooltip--visible"),r=window.setTimeout(()=>{o.classList.add("ml__pill-tooltip--visible"),this.positionPillTooltip(e,o,n)},this.options.pillTooltipDelay||300)},c=()=>{clearTimeout(r),a=window.setTimeout(()=>{o.classList.remove("ml__pill-tooltip--visible"),this.cleanupPillTooltip(n)},100)};e.addEventListener("mouseenter",d),e.addEventListener("mouseleave",c)}positionPillTooltip(e,t,l){const o=ue(e,t,()=>{be(e,t,{placement:this.options.pillTooltipPlacement||"top",strategy:"fixed",middleware:[fe(this.options.pillTooltipOffset||8),Ae(),ge({padding:8})]}).then(({x:s,y:n})=>{Object.assign(t.style,{left:`${s}px`,top:`${n}px`}),g.debug(`[${this.instanceId}] Positioned tooltip "${l}" at x:${s}, y:${n}`,{placement:this.options.pillTooltipPlacement||"top",tooltipClasses:t.className,tooltipDisplay:window.getComputedStyle(t).display,tooltipOpacity:window.getComputedStyle(t).opacity,tooltipVisibility:window.getComputedStyle(t).visibility,tooltipZIndex:window.getComputedStyle(t).zIndex,tooltipPosition:window.getComputedStyle(t).position})})});this.pillTooltipCleanups.set(l,o)}cleanupPillTooltip(e){const t=this.pillTooltipCleanups.get(e);t&&(t(),this.pillTooltipCleanups.delete(e))}destroyAllPillTooltips(){this.pillTooltipCleanups.forEach(e=>e()),this.pillTooltipCleanups.clear(),this.pillTooltips.forEach(e=>e.remove()),this.pillTooltips.clear()}destroy(){this.destroyAllPillTooltips(),this.dropdownCleanup&&this.dropdownCleanup(),this.hintCleanup&&this.hintCleanup(),this.selectedPopoverCleanup&&this.selectedPopoverCleanup(),this.virtualScroll&&(this.virtualScroll.destroy(),this.virtualScroll=null),this.dropdown&&this.dropdown.remove(),this.hint&&this.hint.remove(),this.selectedPopover&&this.selectedPopover.remove(),this.element.innerHTML="",this.element.classList.remove("ml","ml--open","ml--no-checkboxes"),N.info(`[${this.instanceId}] Component destroyed`)}}const hi='@charset "UTF-8";:host{--ml-accent-color: #3b82f6;--ml-accent-color-hover: #2563eb;--ml-accent-color-active: #1d4ed8;--ml-text-primary: #111827;--ml-text-secondary: #6b7280;--ml-text-white: #ffffff;--ml-primary-bg: #f3f4f6;--ml-primary-bg-hover: #e5e7eb;--ml-border-color: #e5e7eb;--ml-input-padding: .5rem .75rem;--ml-input-padding-right: 2.5rem;--ml-input-font-size: .875rem;--ml-input-border-style: 1px solid #d1d5db;--ml-input-border-radius: .375rem;--ml-input-bg: #ffffff;--ml-input-text: #111827;--ml-input-focus-border-color: #3b82f6;--ml-input-placeholder-color: #6b7280;--ml-input-bg-disabled: rgba(107, 114, 128, .05);--ml-toggle-right: .75rem;--ml-toggle-color: #6b7280;--ml-transform-center-y: translateY(-50%);--ml-transform-rotate-180: 180deg;--ml-count-badge-offset: 2rem;--ml-count-badge-padding: .125rem .25rem;--ml-count-badge-bg: #3b82f6;--ml-count-badge-color: #ffffff;--ml-count-badge-font-size: .75rem;--ml-count-badge-font-weight: 600;--ml-count-badge-border-radius: .25rem;--ml-count-badge-bg-hover: #2563eb;--ml-transform-scale-hover: 1.1;--ml-hint-padding: .5rem .75rem;--ml-hint-bg: #ffffff;--ml-hint-border: 1px solid #e5e7eb;--ml-hint-border-radius: .375rem;--ml-hint-box-shadow: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -2px rgba(0, 0, 0, .1);--ml-hint-font-size: .75rem;--ml-hint-color: #6b7280;--ml-line-height-relaxed: 1.4;--ml-dropdown-bg: #ffffff;--ml-dropdown-border: 1px solid #e5e7eb;--ml-dropdown-border-radius: .375rem;--ml-dropdown-box-shadow: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 8px 10px -6px rgba(0, 0, 0, .1);--ml-dropdown-max-height: 20rem;--ml-dropdown-color: #111827;--ml-z-index-dropdown: 9999;--ml-z-index-sticky: 1;--ml-actions-gap: .25rem;--ml-actions-padding: .5rem;--ml-actions-border-bottom: 1px solid #e5e7eb;--ml-actions-bg: #ffffff;--ml-action-btn-padding: .25rem .5rem;--ml-action-btn-font-size: .75rem;--ml-action-btn-border: 1px solid #e5e7eb;--ml-action-btn-border-radius: .25rem;--ml-action-btn-bg: transparent;--ml-action-btn-color: inherit;--ml-action-btn-bg-hover: #f3f4f6;--ml-action-btn-border-color-hover: #3b82f6;--ml-transform-scale-active: .98;--ml-options-padding: .25rem 0;--ml-group-border-top: 1px solid #e5e7eb;--ml-group-margin-top: .25rem;--ml-group-padding-top: .25rem;--ml-group-label-padding: .25rem .75rem;--ml-group-label-font-size: .75rem;--ml-group-label-font-weight: 600;--ml-group-label-color: #6b7280;--ml-group-label-transform: uppercase;--ml-group-label-letter-spacing: .05em;--ml-option-gap: .5rem;--ml-option-padding: .5rem .75rem;--ml-option-padding-h: .75rem;--ml-option-bg: transparent;--ml-option-bg-hover: #f9fafb;--ml-option-bg-focused: #f9fafb;--ml-option-outline-focused: 2px solid #3b82f6;--ml-option-focus-outline-offset: -2px;--ml-option-bg-matched: rgba(59, 130, 246, .08);--ml-option-border-matched: 3px solid rgba(59, 130, 246, .4);--ml-option-bg-selected: rgba(59, 130, 246, .1);--ml-disabled-opacity: .5;--ml-option-content-gap: .5rem;--ml-option-icon-size: 1.25rem;--ml-option-icon-font-size: 1rem;--ml-option-title-font-size: .875rem;--ml-option-title-color: inherit;--ml-option-mark-bg: rgba(59, 130, 246, .2);--ml-option-mark-color: inherit;--ml-option-mark-font-weight: 600;--ml-option-subtitle-margin-top: .25rem;--ml-option-subtitle-font-size: .75rem;--ml-option-subtitle-color: #6b7280;--ml-option-subtitle-line-height: 1.3;--ml-checkbox-margin-top: .125rem;--ml-empty-padding: 1rem .75rem;--ml-empty-font-size: .875rem;--ml-empty-color: #6b7280;--ml-loader-padding: 1rem;--ml-loader-gap: .5rem;--ml-loading-text-font-size: .875rem;--ml-loading-text-color: #6b7280;--ml-pills-gap: .5rem;--ml-pills-margin-bottom: .5rem;--ml-pills-margin-top: .5rem;--ml-pills-margin-left: .25rem;--ml-pills-margin-right: .25rem;--ml-pill-gap: .5rem;--ml-pill-height: 1.5rem;--ml-pill-font-size: .75rem;--ml-pill-font-weight: 600;--ml-pill-border-radius: .375rem;--ml-pill-bg: #eff6ff;--ml-pill-bg-hover: #ffffff;--ml-pill-bg-active: #e0f2fe;--ml-order-first: -1;--ml-pill-text-padding: 0 .5rem;--ml-pill-text-bg: #eff6ff;--ml-pill-text-color: #3b82f6;--ml-pill-remove-width: 1.5rem;--ml-pill-remove-bg: #3b82f6;--ml-pill-remove-color: #ffffff;--ml-pill-remove-border: none;--ml-pill-remove-font-size: .75rem;--ml-pill-remove-bg-hover: #2563eb;--ml-pill-remove-box-shadow-focus: 0 0 0 2px rgba(59, 130, 246, .5);--ml-icon-remove: "×";--ml-pill-indicator-bg: transparent;--ml-pill-indicator-border: 1px solid #e5e7eb;--ml-pill-indicator-border-radius: .25rem;--ml-pill-indicator-text-color: #6b7280;--ml-pill-indicator-text-bg: #d1d5db;--ml-pill-indicator-remove-bg: #6b7280;--ml-pill-indicator-remove-color: #ffffff;--ml-pill-indicator-remove-bg-hover: #111827;--ml-more-badge-bg: #eff6ff;--ml-more-badge-hover-bg: #ffffff;--ml-more-badge-active-bg: #e0f2fe;--ml-count-display-margin-bottom: .5rem;--ml-count-display-margin-top: .5rem;--ml-count-display-margin-left: .5rem;--ml-count-display-margin-right: .5rem;--ml-count-badge-wrapper-bg: transparent;--ml-count-badge-wrapper-border: 1px solid #e5e7eb;--ml-count-badge-wrapper-border-radius: .25rem;--ml-count-badge-wrapper-padding: .25rem .5rem;--ml-count-badge-wrapper-gap: .25rem;--ml-count-badge-wrapper-bg-hover: #f9fafb;--ml-count-badge-wrapper-border-color-hover: #3b82f6;--ml-count-text-bg: transparent;--ml-count-text-border: none;--ml-count-text-font-size: .875rem;--ml-count-text-color: #111827;--ml-count-clear-size: 1rem;--ml-count-clear-bg: transparent;--ml-count-clear-color: #6b7280;--ml-count-clear-font-size: 1.125rem;--ml-count-clear-border-radius: 50%;--ml-count-clear-bg-hover: rgba(59, 130, 246, .2);--ml-count-clear-color-hover: #3b82f6;--ml-icon-clear: "×";--ml-tooltip-bg: #333;--ml-tooltip-color: #fff;--ml-tooltip-padding: .5rem .75rem;--ml-tooltip-border-radius: .375rem;--ml-tooltip-font-size: .875rem;--ml-tooltip-max-width: 20rem;--ml-tooltip-shadow: 0 2px 8px rgba(0, 0, 0, .15);--ml-tooltip-z-index: 10000;--ml-z-index-popover: 10000;--ml-selected-popover-width: 20rem;--ml-selected-popover-max-height: 20rem;--ml-selected-popover-bg: #ffffff;--ml-selected-popover-border: 1px solid #e5e7eb;--ml-selected-popover-border-radius: .375rem;--ml-selected-popover-box-shadow: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 8px 10px -6px rgba(0, 0, 0, .1);--ml-selected-popover-header-padding: .5rem .75rem;--ml-selected-popover-header-bg: rgba(59, 130, 246, .1);--ml-selected-popover-header-border-bottom: 1px solid #e5e7eb;--ml-selected-popover-header-font-size: .875rem;--ml-selected-popover-header-font-weight: 600;--ml-selected-popover-header-color: #111827;--ml-popover-close-size: 1.5rem;--ml-selected-popover-close-bg: transparent;--ml-selected-popover-close-color: #6b7280;--ml-selected-popover-close-font-size: 1.25rem;--ml-selected-popover-close-border-radius: 50%;--ml-selected-popover-close-bg-hover: rgba(59, 130, 246, .2);--ml-selected-popover-close-color-hover: #3b82f6;--ml-selected-popover-body-gap: .25rem;--ml-selected-popover-body-padding: .5rem;--ml-selected-popover-body-max-height: 18rem;--ml-font-size-2xs: .625rem;--ml-font-size-xs: .75rem;--ml-font-size-sm: .875rem;--ml-font-size-base: 1rem;--ml-font-size-lg: 1.125rem;--ml-font-weight-medium: 500;--ml-font-weight-semibold: 600;--ml-line-height-none: 1;--ml-spacing-xs: .25rem;--ml-spacing-sm: .5rem;--ml-spacing-md: .75rem;--ml-spacing-lg: 1rem;--ml-transition-fast: .15s;--ml-transition-normal: .2s;--ml-easing-snappy: cubic-bezier(.4, 0, .2, 1);--ml-placeholder-opacity: .6;--ml-disabled-input-opacity: .6}multi-select:not(:defined){display:block;min-height:2.5rem;color:transparent!important;background:transparent}.ml-wrapper{display:flex;flex-direction:column;align-items:stretch}.ml-wrapper--inline{flex-direction:row;align-items:flex-start}.ml{position:relative;width:100%}.ml__input-wrapper{position:relative;display:flex;align-items:center}.ml__input{width:100%;padding:var(--ml-input-padding, .5rem .75rem);padding-right:var(--ml-input-padding-right, 2.5rem);font-size:var(--ml-input-font-size, .875rem);border:var(--ml-input-border-style, 1px solid #d1d5db);border-radius:var(--ml-input-border-radius, .375rem);background:var(--ml-input-bg, #ffffff);color:var(--ml-input-text, #111827);cursor:pointer;transition:border-color var(--ml-transition-fast, .15s) var(--ml-easing-snappy, cubic-bezier(.4, 0, .2, 1))}.ml__input:focus{outline:none;border-color:var(--ml-input-focus-border-color, #3b82f6)}.ml__input::placeholder{color:var(--ml-input-placeholder-color, #6b7280);opacity:0;transition:opacity var(--ml-transition-fast, .15s) var(--ml-easing-snappy, cubic-bezier(.4, 0, .2, 1))}:host([data-ready]) .ml__input::placeholder{opacity:var(--ml-placeholder-opacity, .6)}.ml__toggle{position:absolute;right:var(--ml-toggle-right, .75rem);top:50%;transform:var(--ml-transform-center-y, translateY(-50%));pointer-events:none;color:var(--ml-toggle-color, #6b7280);transition:transform var(--ml-transition-fast, .15s) var(--ml-easing-snappy, cubic-bezier(.4, 0, .2, 1))}.ml--open .ml__toggle{transform:var(--ml-transform-center-y, translateY(-50%)) rotate(var(--ml-transform-rotate-180, 180deg))}.ml__count-badge{position:absolute;right:var(--ml-count-badge-offset, 2rem);top:50%;transform:var(--ml-transform-center-y, translateY(-50%));padding:var(--ml-count-badge-padding, .125rem .25rem);background:var(--ml-count-badge-bg, #3b82f6);color:var(--ml-count-badge-color, #ffffff);font-size:var(--ml-count-badge-font-size, .75rem);font-weight:var(--ml-count-badge-font-weight, 600);border-radius:var(--ml-count-badge-border-radius, .25rem);cursor:pointer;transition:all var(--ml-transition-fast, .15s) var(--ml-easing-snappy, cubic-bezier(.4, 0, .2, 1))}.ml__count-badge:hover{background:var(--ml-count-badge-bg-hover, #2563eb);transform:var(--ml-transform-center-y, translateY(-50%)) scale(var(--ml-transform-scale-hover, 1.1))}.ml__hint{display:none;position:absolute;z-index:var(--ml-z-index-popover, 10000);padding:var(--ml-hint-padding, .5rem .75rem);background:var(--ml-hint-bg, #ffffff);border:var(--ml-hint-border, 1px solid #e5e7eb);border-radius:var(--ml-hint-border-radius, .375rem);box-shadow:var(--ml-hint-box-shadow, 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -2px rgba(0, 0, 0, .1));font-size:var(--ml-hint-font-size, .75rem);color:var(--ml-hint-color, #6b7280);line-height:var(--ml-line-height-relaxed, 1.4);max-width:100%}.ml__hint--visible{display:block}.ml__dropdown{display:none;position:absolute;z-index:var(--ml-z-index-dropdown, 9999);background:var(--ml-dropdown-bg, #ffffff);border:var(--ml-dropdown-border, 1px solid #e5e7eb);border-radius:var(--ml-dropdown-border-radius, .375rem);box-shadow:var(--ml-dropdown-box-shadow, 0 20px 25px -5px rgba(0, 0, 0, .1), 0 8px 10px -6px rgba(0, 0, 0, .1));max-height:var(--ml-dropdown-max-height, 20rem);overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y;-webkit-overflow-scrolling:touch;color:var(--ml-dropdown-color, #111827)}.ml__dropdown--visible{display:block}.ml__dropdown--virtual{overflow-y:visible;max-height:none}.ml__actions{display:flex;gap:var(--ml-actions-gap, .25rem);padding:var(--ml-actions-padding, .5rem);border-bottom:var(--ml-actions-border-bottom, 1px solid #e5e7eb)}.ml__actions--sticky{position:sticky;top:0;z-index:var(--ml-z-index-sticky, 1);background:var(--ml-actions-bg, #ffffff)}.ml__action-btn{flex:1;padding:var(--ml-action-btn-padding, .25rem .5rem);font-size:var(--ml-action-btn-font-size, .75rem);border:var(--ml-action-btn-border, 1px solid #e5e7eb);border-radius:var(--ml-action-btn-border-radius, .25rem);background:var(--ml-action-btn-bg, transparent);color:var(--ml-action-btn-color, inherit);cursor:pointer;transition:all var(--ml-transition-fast, .15s) var(--ml-easing-snappy, cubic-bezier(.4, 0, .2, 1))}.ml__action-btn:hover{background:var(--ml-action-btn-bg-hover, #f3f4f6);border-color:var(--ml-action-btn-border-color-hover, #3b82f6)}.ml__action-btn:active{transform:scale(var(--ml-transform-scale-active, .98))}.ml__options{padding:var(--ml-options-padding, .25rem 0)}.ml__options--virtual .ml__option{height:var(--ml-option-height, 50px);min-height:var(--ml-option-height, 50px);max-height:var(--ml-option-height, 50px);overflow:hidden;box-sizing:border-box}.ml__group+.ml__group{border-top:var(--ml-group-border-top, 1px solid #e5e7eb);margin-top:var(--ml-group-margin-top, .25rem);padding-top:var(--ml-group-padding-top, .25rem)}.ml__group-label{padding:var(--ml-group-label-padding, .25rem .75rem);font-size:var(--ml-group-label-font-size, .75rem);font-weight:var(--ml-group-label-font-weight, 600);color:var(--ml-group-label-color, #6b7280);text-transform:var(--ml-group-label-transform, uppercase);letter-spacing:var(--ml-group-label-letter-spacing, .05em)}.ml__option{display:flex;align-items:flex-start;gap:var(--ml-option-gap, .5rem);padding:var(--ml-option-padding, .5rem .75rem);cursor:pointer;transition:background-color var(--ml-transition-fast, .15s) var(--ml-easing-snappy, cubic-bezier(.4, 0, .2, 1))}.ml__option:hover{background:var(--ml-option-bg-hover, #f9fafb)}.ml__option--focused{background:var(--ml-option-bg-focused, #f9fafb);outline:var(--ml-option-outline-focused, 2px solid #3b82f6);outline-offset:var(--ml-option-focus-outline-offset, -2px)}.ml__option--matched{background:var(--ml-option-bg-matched, rgba(59, 130, 246, .08));border-left:var(--ml-option-border-matched, 3px solid rgba(59, 130, 246, .4))}.ml__option--selected{background:var(--ml-option-bg-selected, rgba(59, 130, 246, .1))}.ml__option--selected:hover{background:var(--ml-option-bg-selected-hover, var(--ml-option-bg-selected, rgba(59, 130, 246, .1)))}.ml__option--disabled{opacity:var(--ml-disabled-opacity, .5);cursor:not-allowed}.ml__option--disabled:hover{background:var(--ml-option-bg, transparent)}.ml__checkbox{flex-shrink:0;margin-top:var(--ml-checkbox-margin-top, .125rem);cursor:pointer}.ml__option--disabled .ml__checkbox{cursor:not-allowed}.ml__option-content{flex:1;display:flex;align-items:flex-start;gap:var(--ml-option-content-gap, .5rem);min-width:0}.ml__option-icon{flex-shrink:0;width:var(--ml-option-icon-size, 1.25rem);height:var(--ml-option-icon-size, 1.25rem);display:flex;align-items:center;justify-content:center;font-size:var(--ml-option-icon-font-size, 1rem)}.ml__option-icon svg{width:100%;height:100%;fill:currentColor}.ml__option-text{flex:1;min-width:0}.ml__option-title{font-size:var(--ml-option-title-font-size, .875rem);color:var(--ml-option-title-color, inherit);line-height:var(--ml-line-height-relaxed, 1.4)}.ml__option-title mark{background:var(--ml-option-mark-bg, rgba(59, 130, 246, .2));color:var(--ml-option-mark-color, inherit);font-weight:var(--ml-option-mark-font-weight, 600)}.ml__option-subtitle{margin-top:var(--ml-option-subtitle-margin-top, .25rem);font-size:var(--ml-option-subtitle-font-size, .75rem);color:var(--ml-option-subtitle-color, #6b7280);line-height:var(--ml-option-subtitle-line-height, 1.3)}.ml__empty{padding:var(--ml-empty-padding, 1rem .75rem);text-align:center;font-size:var(--ml-empty-font-size, .875rem);color:var(--ml-empty-color, #6b7280)}.ml__loader{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--ml-loader-padding, 1rem);gap:var(--ml-loader-gap, .5rem)}.ml__loading-text{font-size:var(--ml-loading-text-font-size, .875rem);color:var(--ml-loading-text-color, #6b7280)}.ml__pills{display:flex;flex-wrap:wrap;gap:var(--ml-pills-gap, .5rem);padding:0}.ml__pills:empty{display:none}.ml__pills--bottom{margin-top:var(--ml-pills-margin-bottom, .5rem)}.ml__pills--top{margin-bottom:var(--ml-pills-margin-top, .5rem);order:var(--ml-order-first, -1)}.ml__pills--left{order:var(--ml-order-first, -1);margin-right:var(--ml-pills-margin-left, .25rem);justify-content:flex-end}.ml__pills--right{margin-left:var(--ml-pills-margin-right, .25rem);justify-content:flex-start}.ml__count-display{display:flex;align-items:center}.ml__count-display:empty{display:none}.ml__count-display--bottom{margin-top:var(--ml-count-display-margin-bottom, .5rem)}.ml__count-display--top{margin-bottom:var(--ml-count-display-margin-top, .5rem);order:var(--ml-order-first, -1)}.ml__count-display--left{order:var(--ml-order-first, -1);margin-right:var(--ml-count-display-margin-left, .5rem);justify-content:flex-start}.ml__count-display--right{margin-left:var(--ml-count-display-margin-right, .5rem);justify-content:flex-end}.ml__count-badge-wrapper{display:inline-flex;align-items:center;gap:var(--ml-count-badge-wrapper-gap, .25rem);background:var(--ml-count-badge-wrapper-bg, transparent);border:var(--ml-count-badge-wrapper-border, 1px solid #e5e7eb);border-radius:var(--ml-count-badge-wrapper-border-radius, .25rem);padding:var(--ml-count-badge-wrapper-padding, .25rem .5rem);transition:all var(--ml-transition-fast, .15s) var(--ml-easing-snappy, cubic-bezier(.4, 0, .2, 1))}.ml__count-badge-wrapper:hover{background:var(--ml-count-badge-wrapper-bg-hover, #f9fafb);border-color:var(--ml-count-badge-wrapper-border-color-hover, #3b82f6)}.ml__count-text{display:inline-flex;align-items:center;background:var(--ml-count-text-bg, transparent);border:var(--ml-count-text-border, none);padding:0;font-size:var(--ml-count-text-font-size, .875rem);color:var(--ml-count-text-color, #111827);cursor:pointer;transition:color var(--ml-transition-fast, .15s) var(--ml-easing-snappy, cubic-bezier(.4, 0, .2, 1))}.ml__count-clear{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:var(--ml-count-clear-size, 1rem);height:var(--ml-count-clear-size, 1rem);padding:0;border:none;background:var(--ml-count-clear-bg, transparent);color:var(--ml-count-clear-color, #6b7280);font-size:var(--ml-count-clear-font-size, 1.125rem);line-height:var(--ml-line-height-none, 1);cursor:pointer;border-radius:var(--ml-count-clear-border-radius, 50%);transition:all var(--ml-transition-fast, .15s) var(--ml-easing-snappy, cubic-bezier(.4, 0, .2, 1))}.ml__count-clear:hover{background:var(--ml-count-clear-bg-hover, rgba(59, 130, 246, .2));color:var(--ml-count-clear-color-hover, #3b82f6)}.ml__count-clear:before{content:var(--ml-icon-clear, "×")}.ml__pill{display:inline-flex;align-items:center;height:var(--ml-pill-height, 1.5rem);font-size:var(--ml-pill-font-size, .75rem);font-weight:var(--ml-pill-font-weight, 600);line-height:var(--ml-line-height-none, 1);border-radius:var(--ml-pill-border-radius, .375rem);overflow:hidden;max-width:100%}.ml__pill-text{display:flex;align-items:center;height:100%;padding:var(--ml-pill-text-padding, 0 .5rem);background:var(--ml-pill-text-bg, #eff6ff);color:var(--ml-pill-text-color, #3b82f6);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transition:background-color var(--ml-transition-normal, .2s) ease}.ml__pill-remove{display:flex;align-items:center;justify-content:center;width:var(--ml-pill-remove-width, 1.5rem);height:100%;flex-shrink:0;background:var(--ml-pill-remove-bg, #3b82f6);color:var(--ml-pill-remove-color, #ffffff);border:var(--ml-pill-remove-border, none);cursor:pointer;transition:background-color var(--ml-transition-normal, .2s) ease;font-size:var(--ml-pill-remove-font-size, .75rem)}.ml__pill-remove:hover{background:var(--ml-pill-remove-bg-hover, #2563eb)}.ml__pill-remove:focus{outline:none;box-shadow:var(--ml-pill-remove-box-shadow-focus, 0 0 0 2px rgba(59, 130, 246, .5))}.ml__pill-remove:before{content:var(--ml-icon-remove, "×");font-size:var(--ml-font-size-base, 1rem);line-height:var(--ml-line-height-none, 1)}.ml__pill--indicator{border:var(--ml-pill-indicator-border, 1px solid #e5e7eb)}.ml__pill--indicator .ml__pill-text{background:var(--ml-pill-indicator-text-bg, #d1d5db);color:var(--ml-pill-indicator-text-color, #6b7280)}.ml__pill--indicator .ml__pill-remove{background:var(--ml-pill-indicator-remove-bg, #6b7280);color:var(--ml-pill-indicator-remove-color, #ffffff)}.ml__pill--indicator .ml__pill-remove:hover{background:var(--ml-pill-indicator-remove-bg-hover, #111827)}.ml__pill--more{cursor:pointer}.ml__pill-tooltip{position:fixed;z-index:var(--ml-tooltip-z-index, 10000);opacity:0;visibility:hidden;transition:opacity var(--ml-transition-normal, .2s) ease,visibility var(--ml-transition-normal, .2s) ease;background:var(--ml-tooltip-bg, #333);color:var(--ml-tooltip-color, #fff);padding:var(--ml-tooltip-padding, .5rem .75rem);border-radius:var(--ml-tooltip-border-radius, .375rem);font-size:var(--ml-tooltip-font-size, .875rem);line-height:var(--ml-line-height-relaxed, 1.4);max-width:var(--ml-tooltip-max-width, 20rem);word-wrap:break-word;white-space:pre-wrap;box-shadow:var(--ml-tooltip-shadow, 0 2px 8px rgba(0, 0, 0, .15));pointer-events:none}.ml__pill-tooltip--visible{opacity:1;visibility:visible}.ml__selected-popover{display:none;position:absolute;z-index:var(--ml-z-index-popover, 10000);background:var(--ml-selected-popover-bg, #ffffff);border:var(--ml-selected-popover-border, 1px solid #e5e7eb);border-radius:var(--ml-selected-popover-border-radius, .375rem);box-shadow:var(--ml-selected-popover-box-shadow, 0 20px 25px -5px rgba(0, 0, 0, .1), 0 8px 10px -6px rgba(0, 0, 0, .1));width:var(--ml-selected-popover-width, 20rem);max-height:var(--ml-selected-popover-max-height, 20rem);overflow:hidden}.ml__selected-popover--visible{display:flex;flex-direction:column}.ml__selected-popover--virtual{display:block;overflow:visible;max-height:none}.ml__selected-popover-header{display:flex;align-items:center;justify-content:space-between;padding:var(--ml-selected-popover-header-padding, .5rem .75rem);background:var(--ml-selected-popover-header-bg, rgba(59, 130, 246, .1));border-bottom:var(--ml-selected-popover-header-border-bottom, 1px solid #e5e7eb);font-size:var(--ml-selected-popover-header-font-size, .875rem);font-weight:var(--ml-selected-popover-header-font-weight, 600);color:var(--ml-selected-popover-header-color, #111827)}.ml__selected-popover-close{display:flex;align-items:center;justify-content:center;width:var(--ml-popover-close-size, 1.5rem);height:var(--ml-popover-close-size, 1.5rem);padding:0;border:none;background:var(--ml-selected-popover-close-bg, transparent);color:var(--ml-selected-popover-close-color, #6b7280);font-size:var(--ml-selected-popover-close-font-size, 1.25rem);line-height:var(--ml-line-height-none, 1);cursor:pointer;border-radius:var(--ml-selected-popover-close-border-radius, 50%);transition:all var(--ml-transition-fast, .15s) var(--ml-easing-snappy, cubic-bezier(.4, 0, .2, 1))}.ml__selected-popover-close:hover{background:var(--ml-selected-popover-close-bg-hover, rgba(59, 130, 246, .2));color:var(--ml-selected-popover-close-color-hover, #3b82f6)}.ml__selected-popover-body{display:flex;flex-direction:column;gap:var(--ml-selected-popover-body-gap, .25rem);padding:var(--ml-selected-popover-body-padding, .5rem);overflow-y:auto;max-height:var(--ml-selected-popover-body-max-height, 18rem)}.ml__selected-popover-body .ml__pill{width:100%}.ml__selected-popover-body .ml__pill-text{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}.ml__selected-popover-body--virtual{display:block;max-height:none;padding:0}.ml__selected-popover-body--virtual .ml__pill{height:var(--ml-pill-height-virtual, 36px);min-height:var(--ml-pill-height-virtual, 36px);max-height:var(--ml-pill-height-virtual, 36px);margin-bottom:var(--ml-selected-popover-body-gap, .25rem);overflow:hidden;box-sizing:border-box}.ml--rtl .ml__input-wrapper{direction:rtl}.ml--rtl .ml__input{text-align:right;padding-left:var(--ml-input-padding-right, 2.5rem);padding-right:var(--ml-input-padding-h, .75rem)}.ml--rtl .ml__toggle{left:var(--ml-toggle-right, .75rem)!important;right:auto!important}.ml--rtl .ml__count-badge{left:var(--ml-count-badge-offset, 2rem)!important;right:auto!important}.ml--rtl .ml__dropdown{direction:rtl;text-align:right}.ml--rtl .ml__option{flex-direction:row-reverse}.ml--rtl .ml__checkbox{margin-left:var(--ml-spacing-sm, .5rem);margin-right:0}.ml--rtl .ml__option-content{text-align:right}.ml--rtl .ml__option-icon{margin-left:var(--ml-spacing-xs, .25rem);margin-right:0}.ml--rtl .ml__pills{direction:rtl}.ml--rtl .ml__pill{flex-direction:row-reverse}.ml--rtl .ml__pill-remove{border-radius:var(--ml-pill-remove-border-radius-rtl, .375rem) 0 0 var(--ml-pill-remove-border-radius-rtl, .375rem);border-left:var(--ml-pill-remove-border, none);border-right:none}.ml--rtl .ml__pill-text{border-radius:0 var(--ml-pill-text-border-radius-rtl, .375rem) var(--ml-pill-text-border-radius-rtl, .375rem) 0}.ml--rtl .ml__count-display{direction:rtl}.ml--rtl .ml__count-badge-wrapper{flex-direction:row-reverse}.ml--rtl .ml__selected-popover{direction:rtl;text-align:right}.ml--rtl .ml__actions{direction:rtl}.ml--rtl .ml__group-label,.ml--rtl .ml__empty{text-align:right}.ml--rtl .ml__hint{direction:rtl;text-align:right}.ml--xs .ml__input{font-size:var(--ml-font-size-xs, .75rem)}.ml--xs .ml__option{padding:var(--ml-spacing-xs, .25rem) var(--ml-spacing-sm, .5rem)}.ml--xs .ml__option-title{font-size:var(--ml-font-size-xs, .75rem)}.ml--xs .ml__pill{font-size:var(--ml-font-size-2xs, .625rem)}.ml--sm .ml__input,.ml--sm .ml__option-title{font-size:var(--ml-font-size-xs, .75rem)}.ml--lg .ml__input,.ml--lg .ml__option-title{font-size:var(--ml-font-size-base, 1rem)}.ml--lg .ml__pill{font-size:var(--ml-font-size-sm, .875rem)}.ml--xl .ml__input,.ml--xl .ml__option-title{font-size:var(--ml-font-size-lg, 1.125rem)}.ml--xl .ml__pill{font-size:var(--ml-font-size-base, 1rem)}.ml--disabled .ml__input{opacity:var(--ml-disabled-input-opacity, .6);cursor:not-allowed;background:var(--ml-input-bg-disabled, rgba(107, 114, 128, .05))}.ml--disabled .ml__toggle{opacity:var(--ml-disabled-input-opacity, .6)}.ml--no-checkboxes .ml__option{gap:0;padding-left:var(--ml-option-padding-h, .75rem)}.ml--no-checkboxes .ml__option-content{padding-left:0}.ml-debug-info{margin-top:.25rem;padding:.25rem;background-color:#f9fafb;border:1px solid #e5e7eb;border-radius:.375rem;font-size:.75rem;color:#111827}.ml-debug-info details summary{cursor:pointer;font-weight:600;color:#2563eb;-webkit-user-select:none;user-select:none;padding:.25rem;border-radius:.25rem}.ml-debug-info details summary:hover{background-color:#f3f4f6}.ml-debug-info details summary:focus{outline:2px solid #3b82f6;outline-offset:2px}.ml-debug-info .ml-debug-stats{display:flex;flex-direction:column;gap:.25rem;margin-top:.25rem;padding:.25rem;background-color:#fff;border-radius:.25rem}.ml-debug-info .ml-debug-stats span{display:flex;justify-content:space-between;padding:2px 4px;font-family:monospace;font-size:.625rem}.ml-debug-info .ml-debug-stats span:before{content:"•";margin-right:.25rem;color:#3b82f6}',mi=typeof HTMLElement<"u"?HTMLElement:class{},Te=new Set;function nt(){return Array.from(Te)}class Le extends mi{constructor(){super();u(this,"picker");u(this,"containerElement");u(this,"shadow");u(this,"_options");u(this,"_valueMember");u(this,"_getValueCallback");u(this,"_displayValueMember");u(this,"_getDisplayValueCallback");u(this,"_getPillDisplayCallback");u(this,"_searchValueMember");u(this,"_getSearchValueCallback");u(this,"_iconMember");u(this,"_getIconCallback");u(this,"_subtitleMember");u(this,"_getSubtitleCallback");u(this,"_groupMember");u(this,"_getGroupCallback");u(this,"_disabledMember");u(this,"_getDisabledCallback");u(this,"_getValueFormatCallback");u(this,"_getPillTooltipCallback");u(this,"_getCountPillCallback");u(this,"_beforeSearchCallback");u(this,"_searchCallback");u(this,"_addNewCallback");u(this,"_selectCallback");u(this,"_deselectCallback");u(this,"_changeCallback");u(this,"_declarativeSelectedValues");this.shadow=this.attachShadow({mode:"open"});const t=document.createElement("style");t.textContent=hi,this.shadow.appendChild(t),requestAnimationFrame(()=>{this.setAttribute("data-ready","")})}static get observedAttributes(){return["search-hint","search-placeholder","multiple","allow-groups","allow-select-all","allow-clear-all","show-checkboxes","sticky-actions","close-on-select","lock-placement","dropdown-min-width","pills-display-mode","pills-threshold","pills-max-visible","pills-threshold-mode","pills-position","show-count-badge","keep-options-on-search","max-height","empty-message","loading-message","min-search-length","enable-search","search-input-mode","search-mode","allow-add-new","initial-values","enable-virtual-scroll","virtual-scroll-threshold","option-height","pill-height","virtual-scroll-buffer","value-member","display-value-member","search-value-member","icon-member","subtitle-member","group-member","disabled-member","name","value-format","enable-pill-tooltips","pill-tooltip-placement","show-debug-info"]}connectedCallback(){Te.add(this),this.render();const t=this.parseDeclarativeOptions();t&&(this._options&&this._options.length>0&&k.warn("[MultiSelectElement] Both declarative <option> elements and programmatic .options detected. Using declarative options."),this._options=t),this.initializePicker()}disconnectedCallback(){Te.delete(this),this.picker&&this.picker.destroy()}attributeChangedCallback(t,l,o){l!==o&&this.picker&&t!=="initial-values"&&(this.picker.destroy(),this.initializePicker())}render(){this.containerElement=document.createElement("div"),this.containerElement.setAttribute("data-multiselect",""),this.className&&(this.containerElement.className=this.className),this.shadow.appendChild(this.containerElement),this.getAttribute("show-debug-info")==="true"&&this.renderDebugInfo()}renderDebugInfo(){const t=this.shadow.querySelector(".ml-debug-info");t&&t.remove();const l=document.createElement("div");l.className="ml-debug-info";const o=document.createElement("details"),s=document.createElement("summary");s.textContent="Debug Info";const n=document.createElement("div");n.className="ml-debug-stats",o.appendChild(s),o.appendChild(n),l.appendChild(o),this.shadow.appendChild(l),this.updateDebugInfo()}updateDebugInfo(){var h,f;const t=this.shadow.querySelector(".ml-debug-stats");if(!t||!this.picker)return;const l="1.0.0-rc11",o=nt().length,n=this.picker.getSelected().length,r=((h=this._options)==null?void 0:h.length)||0,a=this.picker,d=a.isOpen||!1,c=a.searchTerm||"",m=a.isLoading||!1,p=((f=a.filteredOptions)==null?void 0:f.length)||0;t.innerHTML=`
|
|
56
52
|
<span>Version: ${l}</span>
|
|
57
53
|
<span>Total Instances: ${o}</span>
|
|
58
54
|
<span>Options: ${r}</span>
|
|
@@ -61,4 +57,4 @@ ${p}`:m,g.debug(`[${this.instanceId}] Using default content: "${s}"`)}typeof s==
|
|
|
61
57
|
<span>Dropdown: ${d?"Open":"Closed"}</span>
|
|
62
58
|
<span>Search: ${c||"none"}</span>
|
|
63
59
|
<span>Loading: ${m?"Yes":"No"}</span>
|
|
64
|
-
`,setTimeout(()=>{this.getAttribute("show-debug-info")==="true"&&this.updateDebugInfo()},500)}parseDeclarativeOptions(){var s,n,r,a;const t=[],l=Array.from(this.children);if(l.length===0)return null;let o=!1;for(const d of l)if(d.tagName==="OPTION"){const c=d,m={value:c.value||((s=c.textContent)==null?void 0:s.trim())||"",label:((n=c.textContent)==null?void 0:n.trim())||c.value||""};c.hasAttribute("selected")&&(this._declarativeSelectedValues||(this._declarativeSelectedValues=[]),this._declarativeSelectedValues.push(m.value)),c.hasAttribute("disabled")&&(m.disabled=!0),c.hasAttribute("data-icon")&&(m.icon=c.getAttribute("data-icon")),c.hasAttribute("data-subtitle")&&(m.subtitle=c.getAttribute("data-subtitle")),t.push(m),o=!0}else if(d.tagName==="OPTGROUP"){const c=d,m=c.label||c.getAttribute("label")||"Group",p=Array.from(c.querySelectorAll("option"));for(const h of p){const f={value:h.value||((r=h.textContent)==null?void 0:r.trim())||"",label:((a=h.textContent)==null?void 0:a.trim())||h.value||"",group:m};h.hasAttribute("selected")&&(this._declarativeSelectedValues||(this._declarativeSelectedValues=[]),this._declarativeSelectedValues.push(f.value)),h.hasAttribute("disabled")&&(f.disabled=!0),h.hasAttribute("data-icon")&&(f.icon=h.getAttribute("data-icon")),h.hasAttribute("data-subtitle")&&(f.subtitle=h.getAttribute("data-subtitle")),t.push(f),o=!0}}return o?(k.debug(`[MultiSelectElement] Parsed ${t.length} declarative options from Light DOM`),l.forEach(d=>{(d.tagName==="OPTION"||d.tagName==="OPTGROUP")&&d.remove()}),t):null}initializePicker(){if(!this.containerElement)return;let t;if(this._declarativeSelectedValues&&this._declarativeSelectedValues.length>0)t=this._declarativeSelectedValues,k.debug(`[MultiSelectElement] Using ${t.length} declaratively selected values`);else{const o=this.getAttribute("initial-values");if(o)try{t=JSON.parse(o)}catch(s){k.error("[MultiSelectElement] Failed to parse initial-values:",s)}}const l={searchHint:this.getAttribute("search-hint")||void 0,searchPlaceholder:this.getAttribute("search-placeholder")||"Search...",dropdownMinWidth:this.getAttribute("dropdown-min-width")||void 0,pillsDisplayMode:this.getAttribute("pills-display-mode")||"pills",pillsPosition:this.getAttribute("pills-position")||"bottom",pillsThresholdMode:this.getAttribute("pills-threshold-mode")||"count",maxHeight:this.getAttribute("max-height")||"20rem",emptyMessage:this.getAttribute("empty-message")||"No results found",loadingMessage:this.getAttribute("loading-message")||"Loading...",searchInputMode:this.getAttribute("search-input-mode")||"normal",searchMode:this.getAttribute("search-mode")||"filter",pillsThreshold:this.getAttribute("pills-threshold")?parseInt(this.getAttribute("pills-threshold")):void 0,pillsMaxVisible:this.getAttribute("pills-max-visible")?parseInt(this.getAttribute("pills-max-visible")):void 0,minSearchLength:this.getAttribute("min-search-length")?parseInt(this.getAttribute("min-search-length")):0,isMultipleEnabled:this.getAttribute("multiple")!=="false",isGroupsAllowed:this.getAttribute("allow-groups")!=="false",isSelectAllAllowed:this.getAttribute("allow-select-all")!=="false",isClearAllAllowed:this.getAttribute("allow-clear-all")!=="false",isCheckboxesShown:this.getAttribute("show-checkboxes")!=="false",isActionsSticky:this.getAttribute("sticky-actions")!=="false",isCloseOnSelect:this.getAttribute("close-on-select")==="true",isPlacementLocked:this.getAttribute("lock-placement")!=="false",isSearchEnabled:this.getAttribute("enable-search")!=="false",isAddNewAllowed:this.getAttribute("allow-add-new")==="true",isCountBadgeShown:this.getAttribute("show-count-badge")==="true",isKeepOptionsOnSearch:this.getAttribute("keep-options-on-search")!=="false",isVirtualScrollEnabled:this.getAttribute("enable-virtual-scroll")==="true",virtualScrollThreshold:this.getAttribute("virtual-scroll-threshold")?parseInt(this.getAttribute("virtual-scroll-threshold")):100,optionHeight:this.getAttribute("option-height")?parseInt(this.getAttribute("option-height")):50,pillHeight:this.getAttribute("pill-height")?parseInt(this.getAttribute("pill-height")):36,virtualScrollBuffer:this.getAttribute("virtual-scroll-buffer")?parseInt(this.getAttribute("virtual-scroll-buffer")):10,valueMember:this.getAttribute("value-member")||this._valueMember,displayValueMember:this.getAttribute("display-value-member")||this._displayValueMember,searchValueMember:this.getAttribute("search-value-member")||this._searchValueMember,iconMember:this.getAttribute("icon-member")||this._iconMember,subtitleMember:this.getAttribute("subtitle-member")||this._subtitleMember,groupMember:this.getAttribute("group-member")||this._groupMember,disabledMember:this.getAttribute("disabled-member")||this._disabledMember,getValueCallback:this._getValueCallback,getDisplayValueCallback:this._getDisplayValueCallback,getPillDisplayCallback:this._getPillDisplayCallback,getSearchValueCallback:this._getSearchValueCallback,getIconCallback:this._getIconCallback,getSubtitleCallback:this._getSubtitleCallback,getGroupCallback:this._getGroupCallback,getDisabledCallback:this._getDisabledCallback,formFieldId:this.getAttribute("name")||void 0,valueFormat:this.getAttribute("value-format")||"json",getValueFormatCallback:this._getValueFormatCallback,isPillTooltipsEnabled:this.getAttribute("enable-pill-tooltips")==="true",getPillTooltipCallback:this._getPillTooltipCallback,pillTooltipPlacement:this.getAttribute("pill-tooltip-placement")||"top",pillTooltipDelay:parseInt(this.getAttribute("pill-tooltip-delay")||"300"),pillTooltipOffset:parseInt(this.getAttribute("pill-tooltip-offset")||"8"),getCountPillCallback:this._getCountPillCallback||((o,s)=>s!==void 0?`+${s} more`:`${o} selected`),options:this._options,beforeSearchCallback:this._beforeSearchCallback,searchCallback:this._searchCallback,addNewCallback:this._addNewCallback,selectCallback:o=>{var s,n;this._selectCallback&&this._selectCallback(o),this.dispatchEvent(new CustomEvent("select",{detail:{option:o,selectedOptions:(s=this.picker)==null?void 0:s.getSelected(),selectedValues:Array.from(((n=this.picker)==null?void 0:n.getValue())||[])}}))},deselectCallback:o=>{var s,n;this._deselectCallback&&this._deselectCallback(o),this.dispatchEvent(new CustomEvent("deselect",{detail:{option:o,selectedOptions:(s=this.picker)==null?void 0:s.getSelected(),selectedValues:Array.from(((n=this.picker)==null?void 0:n.getValue())||[])}}))},changeCallback:o=>{var s;this._changeCallback&&this._changeCallback(o),this.dispatchEvent(new CustomEvent("change",{detail:{selectedOptions:o,selectedValues:Array.from(((s=this.picker)==null?void 0:s.getValue())||[])}}))},container:this.shadow,hostElement:this};t&&(this.containerElement.dataset.initialValues=JSON.stringify(t)),this.picker=new st(this.containerElement,l)}reinitialize(){this.picker&&(this.picker.destroy(),this.initializePicker())}get options(){return this._options}set options(t){this._options=t,this.reinitialize()}set valueMember(t){this._valueMember=t||void 0,t?this.setAttribute("value-member",t):this.removeAttribute("value-member")}get valueMember(){return this.getAttribute("value-member")}set displayValueMember(t){this._displayValueMember=t||void 0,t?this.setAttribute("display-value-member",t):this.removeAttribute("display-value-member")}get displayValueMember(){return this.getAttribute("display-value-member")}set searchValueMember(t){this._searchValueMember=t||void 0,t?this.setAttribute("search-value-member",t):this.removeAttribute("search-value-member")}get searchValueMember(){return this.getAttribute("search-value-member")}set iconMember(t){this._iconMember=t||void 0,t?this.setAttribute("icon-member",t):this.removeAttribute("icon-member")}get iconMember(){return this.getAttribute("icon-member")}set subtitleMember(t){this._subtitleMember=t||void 0,t?this.setAttribute("subtitle-member",t):this.removeAttribute("subtitle-member")}get subtitleMember(){return this.getAttribute("subtitle-member")}set groupMember(t){this._groupMember=t||void 0,t?this.setAttribute("group-member",t):this.removeAttribute("group-member")}get groupMember(){return this.getAttribute("group-member")}set disabledMember(t){this._disabledMember=t||void 0,t?this.setAttribute("disabled-member",t):this.removeAttribute("disabled-member")}get disabledMember(){return this.getAttribute("disabled-member")}set getValueCallback(t){this._getValueCallback=t,this.reinitialize()}get getValueCallback(){return this._getValueCallback}set getDisplayValueCallback(t){this._getDisplayValueCallback=t,this.reinitialize()}get getDisplayValueCallback(){return this._getDisplayValueCallback}set getPillDisplayCallback(t){this._getPillDisplayCallback=t,this.reinitialize()}get getPillDisplayCallback(){return this._getPillDisplayCallback}set getSearchValueCallback(t){this._getSearchValueCallback=t,this.reinitialize()}get getSearchValueCallback(){return this._getSearchValueCallback}set getIconCallback(t){this._getIconCallback=t,this.reinitialize()}get getIconCallback(){return this._getIconCallback}set getSubtitleCallback(t){this._getSubtitleCallback=t,this.reinitialize()}get getSubtitleCallback(){return this._getSubtitleCallback}set getGroupCallback(t){this._getGroupCallback=t,this.reinitialize()}get getGroupCallback(){return this._getGroupCallback}set getDisabledCallback(t){this._getDisabledCallback=t,this.reinitialize()}get getDisabledCallback(){return this._getDisabledCallback}set name(t){t?this.setAttribute("name",t):this.removeAttribute("name")}get name(){return this.getAttribute("name")}set valueFormat(t){t?this.setAttribute("value-format",t):this.removeAttribute("value-format")}get valueFormat(){return this.getAttribute("value-format")}set getValueFormatCallback(t){this._getValueFormatCallback=t,this.reinitialize()}get getValueFormatCallback(){return this._getValueFormatCallback}set thresholdMode(t){t?this.setAttribute("threshold-mode",t):this.removeAttribute("threshold-mode")}get thresholdMode(){return this.getAttribute("threshold-mode")}set pillsMaxVisible(t){t!==null?this.setAttribute("pills-max-visible",String(t)):this.removeAttribute("pills-max-visible")}get pillsMaxVisible(){const t=this.getAttribute("pills-max-visible");return t?parseInt(t):null}set enablePillTooltips(t){t?this.setAttribute("enable-pill-tooltips","true"):this.removeAttribute("enable-pill-tooltips")}get enablePillTooltips(){return this.getAttribute("enable-pill-tooltips")==="true"}set pillTooltipPlacement(t){t?this.setAttribute("pill-tooltip-placement",t):this.removeAttribute("pill-tooltip-placement")}get pillTooltipPlacement(){return this.getAttribute("pill-tooltip-placement")}set getPillTooltipCallback(t){this._getPillTooltipCallback=t,this.reinitialize()}get getPillTooltipCallback(){return this._getPillTooltipCallback}set getCountPillCallback(t){this._getCountPillCallback=t,this.reinitialize()}get getCountPillCallback(){return this._getCountPillCallback}get beforeSearchCallback(){return this._beforeSearchCallback}set beforeSearchCallback(t){this._beforeSearchCallback=t,this.reinitialize()}get searchCallback(){return this._searchCallback}set searchCallback(t){this._searchCallback=t,this.reinitialize()}get addNewCallback(){return this._addNewCallback}set addNewCallback(t){this._addNewCallback=t,this.reinitialize()}get selectCallback(){return this._selectCallback}set selectCallback(t){this._selectCallback=t}get deselectCallback(){return this._deselectCallback}set deselectCallback(t){this._deselectCallback=t}get changeCallback(){return this._changeCallback}set changeCallback(t){this._changeCallback=t}get selectedValue(){var t;return((t=this.picker)==null?void 0:t.selectedValue)??null}get selectedItem(){var t;return((t=this.picker)==null?void 0:t.selectedItem)??null}getSelected(){return this.picker?this.picker.getSelected():[]}setSelected(t){this.picker&&this.picker.setSelected(t)}getValue(){return this.picker?this.picker.getValue():null}destroy(){this.picker&&this.picker.destroy()}}typeof window<"u"&&typeof customElements<"u"&&(customElements.get("web-multiselect")||customElements.define("web-multiselect",Le)),typeof window<"u"&&(window.keenmate=window.keenmate||{},window.keenmate.multiselect={version:()=>"1.0.0-rc10",config:{name:"@keenmate/web-multiselect",version:"1.0.0-rc10",author:"Keenmate",license:"MIT",repository:"git+https://github.com/keenmate/web-multiselect.git",homepage:"https://github.com/keenmate/web-multiselect#readme"},register:()=>{typeof customElements<"u"&&!customElements.get("web-multiselect")&&customElements.define("web-multiselect",Le)},getInstances:()=>nt()}),C.MultiSelectElement=Le,C.PureMultiSelect=st,C.dataLogger=k,C.disableLogging=di,C.enableCategory=pi,C.enableLogging=ci,C.initLogger=N,C.interactionLogger=S,C.setLogLevel=Oe,C.uiLogger=g,Object.defineProperty(C,Symbol.toStringTag,{value:"Module"})});
|
|
60
|
+
`,setTimeout(()=>{this.getAttribute("show-debug-info")==="true"&&this.updateDebugInfo()},500)}parseDeclarativeOptions(){var s,n,r,a;const t=[],l=Array.from(this.children);if(l.length===0)return null;let o=!1;for(const d of l)if(d.tagName==="OPTION"){const c=d,m={value:c.value||((s=c.textContent)==null?void 0:s.trim())||"",label:((n=c.textContent)==null?void 0:n.trim())||c.value||""};c.hasAttribute("selected")&&(this._declarativeSelectedValues||(this._declarativeSelectedValues=[]),this._declarativeSelectedValues.push(m.value)),c.hasAttribute("disabled")&&(m.disabled=!0),c.hasAttribute("data-icon")&&(m.icon=c.getAttribute("data-icon")),c.hasAttribute("data-subtitle")&&(m.subtitle=c.getAttribute("data-subtitle")),t.push(m),o=!0}else if(d.tagName==="OPTGROUP"){const c=d,m=c.label||c.getAttribute("label")||"Group",p=Array.from(c.querySelectorAll("option"));for(const h of p){const f={value:h.value||((r=h.textContent)==null?void 0:r.trim())||"",label:((a=h.textContent)==null?void 0:a.trim())||h.value||"",group:m};h.hasAttribute("selected")&&(this._declarativeSelectedValues||(this._declarativeSelectedValues=[]),this._declarativeSelectedValues.push(f.value)),h.hasAttribute("disabled")&&(f.disabled=!0),h.hasAttribute("data-icon")&&(f.icon=h.getAttribute("data-icon")),h.hasAttribute("data-subtitle")&&(f.subtitle=h.getAttribute("data-subtitle")),t.push(f),o=!0}}return o?(k.debug(`[MultiSelectElement] Parsed ${t.length} declarative options from Light DOM`),l.forEach(d=>{(d.tagName==="OPTION"||d.tagName==="OPTGROUP")&&d.remove()}),t):null}initializePicker(){if(!this.containerElement)return;let t;if(this._declarativeSelectedValues&&this._declarativeSelectedValues.length>0)t=this._declarativeSelectedValues,k.debug(`[MultiSelectElement] Using ${t.length} declaratively selected values`);else{const o=this.getAttribute("initial-values");if(o)try{t=JSON.parse(o)}catch(s){k.error("[MultiSelectElement] Failed to parse initial-values:",s)}}const l={searchHint:this.getAttribute("search-hint")||void 0,searchPlaceholder:this.getAttribute("search-placeholder")||"Search...",dropdownMinWidth:this.getAttribute("dropdown-min-width")||void 0,pillsDisplayMode:this.getAttribute("pills-display-mode")||"pills",pillsPosition:this.getAttribute("pills-position")||"bottom",pillsThresholdMode:this.getAttribute("pills-threshold-mode")||"count",maxHeight:this.getAttribute("max-height")||"20rem",emptyMessage:this.getAttribute("empty-message")||"No results found",loadingMessage:this.getAttribute("loading-message")||"Loading...",searchInputMode:this.getAttribute("search-input-mode")||"normal",searchMode:this.getAttribute("search-mode")||"filter",pillsThreshold:this.getAttribute("pills-threshold")?parseInt(this.getAttribute("pills-threshold")):void 0,pillsMaxVisible:this.getAttribute("pills-max-visible")?parseInt(this.getAttribute("pills-max-visible")):void 0,minSearchLength:this.getAttribute("min-search-length")?parseInt(this.getAttribute("min-search-length")):0,isMultipleEnabled:this.getAttribute("multiple")!=="false",isGroupsAllowed:this.getAttribute("allow-groups")!=="false",isSelectAllAllowed:this.getAttribute("allow-select-all")!=="false",isClearAllAllowed:this.getAttribute("allow-clear-all")!=="false",isCheckboxesShown:this.getAttribute("show-checkboxes")!=="false",isActionsSticky:this.getAttribute("sticky-actions")!=="false",isCloseOnSelect:this.getAttribute("close-on-select")==="true",isPlacementLocked:this.getAttribute("lock-placement")!=="false",isSearchEnabled:this.getAttribute("enable-search")!=="false",isAddNewAllowed:this.getAttribute("allow-add-new")==="true",isCountBadgeShown:this.getAttribute("show-count-badge")==="true",isKeepOptionsOnSearch:this.getAttribute("keep-options-on-search")!=="false",isVirtualScrollEnabled:this.getAttribute("enable-virtual-scroll")==="true",virtualScrollThreshold:this.getAttribute("virtual-scroll-threshold")?parseInt(this.getAttribute("virtual-scroll-threshold")):100,optionHeight:this.getAttribute("option-height")?parseInt(this.getAttribute("option-height")):50,pillHeight:this.getAttribute("pill-height")?parseInt(this.getAttribute("pill-height")):36,virtualScrollBuffer:this.getAttribute("virtual-scroll-buffer")?parseInt(this.getAttribute("virtual-scroll-buffer")):10,valueMember:this.getAttribute("value-member")||this._valueMember,displayValueMember:this.getAttribute("display-value-member")||this._displayValueMember,searchValueMember:this.getAttribute("search-value-member")||this._searchValueMember,iconMember:this.getAttribute("icon-member")||this._iconMember,subtitleMember:this.getAttribute("subtitle-member")||this._subtitleMember,groupMember:this.getAttribute("group-member")||this._groupMember,disabledMember:this.getAttribute("disabled-member")||this._disabledMember,getValueCallback:this._getValueCallback,getDisplayValueCallback:this._getDisplayValueCallback,getPillDisplayCallback:this._getPillDisplayCallback,getSearchValueCallback:this._getSearchValueCallback,getIconCallback:this._getIconCallback,getSubtitleCallback:this._getSubtitleCallback,getGroupCallback:this._getGroupCallback,getDisabledCallback:this._getDisabledCallback,formFieldId:this.getAttribute("name")||void 0,valueFormat:this.getAttribute("value-format")||"json",getValueFormatCallback:this._getValueFormatCallback,isPillTooltipsEnabled:this.getAttribute("enable-pill-tooltips")==="true",getPillTooltipCallback:this._getPillTooltipCallback,pillTooltipPlacement:this.getAttribute("pill-tooltip-placement")||"top",pillTooltipDelay:parseInt(this.getAttribute("pill-tooltip-delay")||"300"),pillTooltipOffset:parseInt(this.getAttribute("pill-tooltip-offset")||"8"),getCountPillCallback:this._getCountPillCallback||((o,s)=>s!==void 0?`+${s} more`:`${o} selected`),options:this._options,beforeSearchCallback:this._beforeSearchCallback,searchCallback:this._searchCallback,addNewCallback:this._addNewCallback,selectCallback:o=>{var s,n;this._selectCallback&&this._selectCallback(o),this.dispatchEvent(new CustomEvent("select",{detail:{option:o,selectedOptions:(s=this.picker)==null?void 0:s.getSelected(),selectedValues:Array.from(((n=this.picker)==null?void 0:n.getValue())||[])}}))},deselectCallback:o=>{var s,n;this._deselectCallback&&this._deselectCallback(o),this.dispatchEvent(new CustomEvent("deselect",{detail:{option:o,selectedOptions:(s=this.picker)==null?void 0:s.getSelected(),selectedValues:Array.from(((n=this.picker)==null?void 0:n.getValue())||[])}}))},changeCallback:o=>{var s;this._changeCallback&&this._changeCallback(o),this.dispatchEvent(new CustomEvent("change",{detail:{selectedOptions:o,selectedValues:Array.from(((s=this.picker)==null?void 0:s.getValue())||[])}}))},container:this.shadow,hostElement:this};t&&(this.containerElement.dataset.initialValues=JSON.stringify(t)),this.picker=new st(this.containerElement,l)}reinitialize(){this.picker&&(this.picker.destroy(),this.initializePicker())}get options(){return this._options}set options(t){this._options=t,this.reinitialize()}set valueMember(t){this._valueMember=t||void 0,t?this.setAttribute("value-member",t):this.removeAttribute("value-member")}get valueMember(){return this.getAttribute("value-member")}set displayValueMember(t){this._displayValueMember=t||void 0,t?this.setAttribute("display-value-member",t):this.removeAttribute("display-value-member")}get displayValueMember(){return this.getAttribute("display-value-member")}set searchValueMember(t){this._searchValueMember=t||void 0,t?this.setAttribute("search-value-member",t):this.removeAttribute("search-value-member")}get searchValueMember(){return this.getAttribute("search-value-member")}set iconMember(t){this._iconMember=t||void 0,t?this.setAttribute("icon-member",t):this.removeAttribute("icon-member")}get iconMember(){return this.getAttribute("icon-member")}set subtitleMember(t){this._subtitleMember=t||void 0,t?this.setAttribute("subtitle-member",t):this.removeAttribute("subtitle-member")}get subtitleMember(){return this.getAttribute("subtitle-member")}set groupMember(t){this._groupMember=t||void 0,t?this.setAttribute("group-member",t):this.removeAttribute("group-member")}get groupMember(){return this.getAttribute("group-member")}set disabledMember(t){this._disabledMember=t||void 0,t?this.setAttribute("disabled-member",t):this.removeAttribute("disabled-member")}get disabledMember(){return this.getAttribute("disabled-member")}set getValueCallback(t){this._getValueCallback=t,this.reinitialize()}get getValueCallback(){return this._getValueCallback}set getDisplayValueCallback(t){this._getDisplayValueCallback=t,this.reinitialize()}get getDisplayValueCallback(){return this._getDisplayValueCallback}set getPillDisplayCallback(t){this._getPillDisplayCallback=t,this.reinitialize()}get getPillDisplayCallback(){return this._getPillDisplayCallback}set getSearchValueCallback(t){this._getSearchValueCallback=t,this.reinitialize()}get getSearchValueCallback(){return this._getSearchValueCallback}set getIconCallback(t){this._getIconCallback=t,this.reinitialize()}get getIconCallback(){return this._getIconCallback}set getSubtitleCallback(t){this._getSubtitleCallback=t,this.reinitialize()}get getSubtitleCallback(){return this._getSubtitleCallback}set getGroupCallback(t){this._getGroupCallback=t,this.reinitialize()}get getGroupCallback(){return this._getGroupCallback}set getDisabledCallback(t){this._getDisabledCallback=t,this.reinitialize()}get getDisabledCallback(){return this._getDisabledCallback}set name(t){t?this.setAttribute("name",t):this.removeAttribute("name")}get name(){return this.getAttribute("name")}set valueFormat(t){t?this.setAttribute("value-format",t):this.removeAttribute("value-format")}get valueFormat(){return this.getAttribute("value-format")}set getValueFormatCallback(t){this._getValueFormatCallback=t,this.reinitialize()}get getValueFormatCallback(){return this._getValueFormatCallback}set thresholdMode(t){t?this.setAttribute("threshold-mode",t):this.removeAttribute("threshold-mode")}get thresholdMode(){return this.getAttribute("threshold-mode")}set pillsMaxVisible(t){t!==null?this.setAttribute("pills-max-visible",String(t)):this.removeAttribute("pills-max-visible")}get pillsMaxVisible(){const t=this.getAttribute("pills-max-visible");return t?parseInt(t):null}set enablePillTooltips(t){t?this.setAttribute("enable-pill-tooltips","true"):this.removeAttribute("enable-pill-tooltips")}get enablePillTooltips(){return this.getAttribute("enable-pill-tooltips")==="true"}set pillTooltipPlacement(t){t?this.setAttribute("pill-tooltip-placement",t):this.removeAttribute("pill-tooltip-placement")}get pillTooltipPlacement(){return this.getAttribute("pill-tooltip-placement")}set getPillTooltipCallback(t){this._getPillTooltipCallback=t,this.reinitialize()}get getPillTooltipCallback(){return this._getPillTooltipCallback}set getCountPillCallback(t){this._getCountPillCallback=t,this.reinitialize()}get getCountPillCallback(){return this._getCountPillCallback}get beforeSearchCallback(){return this._beforeSearchCallback}set beforeSearchCallback(t){this._beforeSearchCallback=t,this.reinitialize()}get searchCallback(){return this._searchCallback}set searchCallback(t){this._searchCallback=t,this.reinitialize()}get addNewCallback(){return this._addNewCallback}set addNewCallback(t){this._addNewCallback=t,this.reinitialize()}get selectCallback(){return this._selectCallback}set selectCallback(t){this._selectCallback=t}get deselectCallback(){return this._deselectCallback}set deselectCallback(t){this._deselectCallback=t}get changeCallback(){return this._changeCallback}set changeCallback(t){this._changeCallback=t}get selectedValue(){var t;return((t=this.picker)==null?void 0:t.selectedValue)??null}get selectedItem(){var t;return((t=this.picker)==null?void 0:t.selectedItem)??null}getSelected(){return this.picker?this.picker.getSelected():[]}setSelected(t){this.picker&&this.picker.setSelected(t)}getValue(){return this.picker?this.picker.getValue():null}destroy(){this.picker&&this.picker.destroy()}}typeof window<"u"&&typeof customElements<"u"&&(customElements.get("web-multiselect")||customElements.define("web-multiselect",Le)),typeof window<"u"&&(window.keenmate=window.keenmate||{},window.keenmate.multiselect={version:()=>"1.0.0-rc11",config:{name:"@keenmate/web-multiselect",version:"1.0.0-rc11",author:"Keenmate",license:"MIT",repository:"git+https://github.com/keenmate/web-multiselect.git",homepage:"https://github.com/keenmate/web-multiselect#readme"},register:()=>{typeof customElements<"u"&&!customElements.get("web-multiselect")&&customElements.define("web-multiselect",Le)},getInstances:()=>nt()}),C.MultiSelectElement=Le,C.PureMultiSelect=st,C.dataLogger=k,C.disableLogging=di,C.enableCategory=pi,C.enableLogging=ci,C.initLogger=N,C.interactionLogger=S,C.setLogLevel=Oe,C.uiLogger=g,Object.defineProperty(C,Symbol.toStringTag,{value:"Module"})});
|
package/dist/style.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
@charset "UTF-8";:host{--ml-accent-color: #3b82f6;--ml-accent-color-hover: #2563eb;--ml-accent-color-active: #1d4ed8;--ml-text-primary: #111827;--ml-text-secondary: #6b7280;--ml-text-white: #ffffff;--ml-primary-bg: #f3f4f6;--ml-primary-bg-hover: #e5e7eb;--ml-border-color: #e5e7eb;--ml-input-padding: .5rem .75rem;--ml-input-padding-right: 2.5rem;--ml-input-font-size: .875rem;--ml-input-border-style: 1px solid #d1d5db;--ml-input-border-radius: .375rem;--ml-input-bg: #ffffff;--ml-input-text: #111827;--ml-input-focus-border-color: #3b82f6;--ml-input-placeholder-color: #6b7280;--ml-input-bg-disabled: rgba(107, 114, 128, .05);--ml-toggle-right: .75rem;--ml-toggle-color: #6b7280;--ml-transform-center-y: translateY(-50%);--ml-transform-rotate-180: 180deg;--ml-count-badge-offset: 2rem;--ml-count-badge-padding: .125rem .25rem;--ml-count-badge-bg: #3b82f6;--ml-count-badge-color: #ffffff;--ml-count-badge-font-size: .75rem;--ml-count-badge-font-weight: 600;--ml-count-badge-border-radius: .25rem;--ml-count-badge-bg-hover: #2563eb;--ml-transform-scale-hover: 1.1;--ml-hint-padding: .5rem .75rem;--ml-hint-bg: #ffffff;--ml-hint-border: 1px solid #e5e7eb;--ml-hint-border-radius: .375rem;--ml-hint-box-shadow: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -2px rgba(0, 0, 0, .1);--ml-hint-font-size: .75rem;--ml-hint-color: #6b7280;--ml-line-height-relaxed: 1.4;--ml-dropdown-bg: #ffffff;--ml-dropdown-border: 1px solid #e5e7eb;--ml-dropdown-border-radius: .375rem;--ml-dropdown-box-shadow: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 8px 10px -6px rgba(0, 0, 0, .1);--ml-dropdown-max-height: 20rem;--ml-dropdown-color: #111827;--ml-z-index-dropdown: 9999;--ml-z-index-sticky: 1;--ml-actions-gap: .25rem;--ml-actions-padding: .5rem;--ml-actions-border-bottom: 1px solid #e5e7eb;--ml-actions-bg: #ffffff;--ml-action-btn-padding: .25rem .5rem;--ml-action-btn-font-size: .75rem;--ml-action-btn-border: 1px solid #e5e7eb;--ml-action-btn-border-radius: .25rem;--ml-action-btn-bg: transparent;--ml-action-btn-color: inherit;--ml-action-btn-bg-hover: #f3f4f6;--ml-action-btn-border-color-hover: #3b82f6;--ml-transform-scale-active: .98;--ml-options-padding: .25rem 0;--ml-group-border-top: 1px solid #e5e7eb;--ml-group-margin-top: .25rem;--ml-group-padding-top: .25rem;--ml-group-label-padding: .25rem .75rem;--ml-group-label-font-size: .75rem;--ml-group-label-font-weight: 600;--ml-group-label-color: #6b7280;--ml-group-label-transform: uppercase;--ml-group-label-letter-spacing: .05em;--ml-option-gap: .5rem;--ml-option-padding: .5rem .75rem;--ml-option-padding-h: .75rem;--ml-option-bg: transparent;--ml-option-bg-hover: #f9fafb;--ml-option-bg-focused: #f9fafb;--ml-option-outline-focused: 2px solid #3b82f6;--ml-option-focus-outline-offset: -2px;--ml-option-bg-matched: rgba(59, 130, 246, .08);--ml-option-border-matched: 3px solid rgba(59, 130, 246, .4);--ml-option-bg-selected: rgba(59, 130, 246, .1);--ml-disabled-opacity: .5;--ml-option-content-gap: .5rem;--ml-option-icon-size: 1.25rem;--ml-option-icon-font-size: 1rem;--ml-option-title-font-size: .875rem;--ml-option-title-color: inherit;--ml-option-mark-bg: rgba(59, 130, 246, .2);--ml-option-mark-color: inherit;--ml-option-mark-font-weight: 600;--ml-option-subtitle-margin-top: .25rem;--ml-option-subtitle-font-size: .75rem;--ml-option-subtitle-color: #6b7280;--ml-option-subtitle-line-height: 1.3;--ml-checkbox-margin-top: .125rem;--ml-empty-padding: 1rem .75rem;--ml-empty-font-size: .875rem;--ml-empty-color: #6b7280;--ml-loader-padding: 1rem;--ml-loader-gap: .5rem;--ml-loading-text-font-size: .875rem;--ml-loading-text-color: #6b7280;--ml-pills-gap: .5rem;--ml-pills-margin-bottom: .5rem;--ml-pills-margin-top: .5rem;--ml-pills-margin-left: .25rem;--ml-pills-margin-right: .25rem;--ml-pill-gap: .5rem;--ml-pill-height: 1.5rem;--ml-pill-font-size: .75rem;--ml-pill-font-weight: 600;--ml-pill-border-radius: .375rem;--ml-pill-bg: #eff6ff;--ml-pill-bg-hover: #ffffff;--ml-pill-bg-active: #e0f2fe;--ml-order-first: -1;--ml-pill-text-padding: 0 .5rem;--ml-pill-text-bg: #eff6ff;--ml-pill-text-color: #3b82f6;--ml-pill-remove-width: 1.5rem;--ml-pill-remove-bg: #3b82f6;--ml-pill-remove-color: #ffffff;--ml-pill-remove-border: none;--ml-pill-remove-font-size: .75rem;--ml-pill-remove-bg-hover: #2563eb;--ml-pill-remove-box-shadow-focus: 0 0 0 2px rgba(59, 130, 246, .5);--ml-icon-remove: "×";--ml-more-badge-bg: #eff6ff;--ml-more-badge-hover-bg: #ffffff;--ml-more-badge-active-bg: #e0f2fe;--ml-count-display-margin-bottom: .5rem;--ml-count-display-margin-top: .5rem;--ml-count-display-margin-left: .5rem;--ml-count-display-margin-right: .5rem;--ml-count-badge-wrapper-bg: transparent;--ml-count-badge-wrapper-border: 1px solid #e5e7eb;--ml-count-badge-wrapper-border-radius: .25rem;--ml-count-badge-wrapper-padding: .25rem .5rem;--ml-count-badge-wrapper-gap: .25rem;--ml-count-badge-wrapper-bg-hover: #f9fafb;--ml-count-badge-wrapper-border-color-hover: #3b82f6;--ml-count-text-bg: transparent;--ml-count-text-border: none;--ml-count-text-font-size: .875rem;--ml-count-text-color: #111827;--ml-count-clear-size: 1rem;--ml-count-clear-bg: transparent;--ml-count-clear-color: #6b7280;--ml-count-clear-font-size: 1.125rem;--ml-count-clear-border-radius: 50%;--ml-count-clear-bg-hover: rgba(59, 130, 246, .2);--ml-count-clear-color-hover: #3b82f6;--ml-icon-clear: "×";--ml-tooltip-bg: #333;--ml-tooltip-color: #fff;--ml-tooltip-padding: .5rem .75rem;--ml-tooltip-border-radius: .375rem;--ml-tooltip-font-size: .875rem;--ml-tooltip-max-width: 20rem;--ml-tooltip-shadow: 0 2px 8px rgba(0, 0, 0, .15);--ml-tooltip-z-index: 10000;--ml-z-index-popover: 10000;--ml-selected-popover-width: 20rem;--ml-selected-popover-max-height: 20rem;--ml-selected-popover-bg: #ffffff;--ml-selected-popover-border: 1px solid #e5e7eb;--ml-selected-popover-border-radius: .375rem;--ml-selected-popover-box-shadow: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 8px 10px -6px rgba(0, 0, 0, .1);--ml-selected-popover-header-padding: .5rem .75rem;--ml-selected-popover-header-bg: rgba(59, 130, 246, .1);--ml-selected-popover-header-border-bottom: 1px solid #e5e7eb;--ml-selected-popover-header-font-size: .875rem;--ml-selected-popover-header-font-weight: 600;--ml-selected-popover-header-color: #111827;--ml-popover-close-size: 1.5rem;--ml-selected-popover-close-bg: transparent;--ml-selected-popover-close-color: #6b7280;--ml-selected-popover-close-font-size: 1.25rem;--ml-selected-popover-close-border-radius: 50%;--ml-selected-popover-close-bg-hover: rgba(59, 130, 246, .2);--ml-selected-popover-close-color-hover: #3b82f6;--ml-selected-popover-body-gap: .25rem;--ml-selected-popover-body-padding: .5rem;--ml-selected-popover-body-max-height: 18rem;--ml-font-size-2xs: .625rem;--ml-font-size-xs: .75rem;--ml-font-size-sm: .875rem;--ml-font-size-base: 1rem;--ml-font-size-lg: 1.125rem;--ml-font-weight-medium: 500;--ml-font-weight-semibold: 600;--ml-line-height-none: 1;--ml-spacing-xs: .25rem;--ml-spacing-sm: .5rem;--ml-spacing-md: .75rem;--ml-spacing-lg: 1rem;--ml-transition-fast: .15s;--ml-transition-normal: .2s;--ml-easing-snappy: cubic-bezier(.4, 0, .2, 1);--ml-placeholder-opacity: .6;--ml-disabled-input-opacity: .6}multi-select:not(:defined){display:block;min-height:2.5rem;color:transparent!important;background:transparent}.ml-wrapper{display:flex;flex-direction:column;align-items:stretch}.ml-wrapper--inline{flex-direction:row;align-items:flex-start}.ml{position:relative;width:100%}.ml__input-wrapper{position:relative;display:flex;align-items:center}.ml__input{width:100%;padding:var(--ml-input-padding, .5rem .75rem);padding-right:var(--ml-input-padding-right, 2.5rem);font-size:var(--ml-input-font-size, .875rem);border:var(--ml-input-border-style, 1px solid #d1d5db);border-radius:var(--ml-input-border-radius, .375rem);background:var(--ml-input-bg, #ffffff);color:var(--ml-input-text, #111827);cursor:pointer;transition:border-color var(--ml-transition-fast, .15s) var(--ml-easing-snappy, cubic-bezier(.4, 0, .2, 1))}.ml__input:focus{outline:none;border-color:var(--ml-input-focus-border-color, #3b82f6)}.ml__input::placeholder{color:var(--ml-input-placeholder-color, #6b7280);opacity:0;transition:opacity var(--ml-transition-fast, .15s) var(--ml-easing-snappy, cubic-bezier(.4, 0, .2, 1))}:host([data-ready]) .ml__input::placeholder{opacity:var(--ml-placeholder-opacity, .6)}.ml__toggle{position:absolute;right:var(--ml-toggle-right, .75rem);top:50%;transform:var(--ml-transform-center-y, translateY(-50%));pointer-events:none;color:var(--ml-toggle-color, #6b7280);transition:transform var(--ml-transition-fast, .15s) var(--ml-easing-snappy, cubic-bezier(.4, 0, .2, 1))}.ml--open .ml__toggle{transform:var(--ml-transform-center-y, translateY(-50%)) rotate(var(--ml-transform-rotate-180, 180deg))}.ml__count-badge{position:absolute;right:var(--ml-count-badge-offset, 2rem);top:50%;transform:var(--ml-transform-center-y, translateY(-50%));padding:var(--ml-count-badge-padding, .125rem .25rem);background:var(--ml-count-badge-bg, #3b82f6);color:var(--ml-count-badge-color, #ffffff);font-size:var(--ml-count-badge-font-size, .75rem);font-weight:var(--ml-count-badge-font-weight, 600);border-radius:var(--ml-count-badge-border-radius, .25rem);cursor:pointer;transition:all var(--ml-transition-fast, .15s) var(--ml-easing-snappy, cubic-bezier(.4, 0, .2, 1))}.ml__count-badge:hover{background:var(--ml-count-badge-bg-hover, #2563eb);transform:var(--ml-transform-center-y, translateY(-50%)) scale(var(--ml-transform-scale-hover, 1.1))}.ml__hint{display:none;position:absolute;z-index:var(--ml-z-index-popover, 10000);padding:var(--ml-hint-padding, .5rem .75rem);background:var(--ml-hint-bg, #ffffff);border:var(--ml-hint-border, 1px solid #e5e7eb);border-radius:var(--ml-hint-border-radius, .375rem);box-shadow:var(--ml-hint-box-shadow, 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -2px rgba(0, 0, 0, .1));font-size:var(--ml-hint-font-size, .75rem);color:var(--ml-hint-color, #6b7280);line-height:var(--ml-line-height-relaxed, 1.4);max-width:100%}.ml__hint--visible{display:block}.ml__dropdown{display:none;position:absolute;z-index:var(--ml-z-index-dropdown, 9999);background:var(--ml-dropdown-bg, #ffffff);border:var(--ml-dropdown-border, 1px solid #e5e7eb);border-radius:var(--ml-dropdown-border-radius, .375rem);box-shadow:var(--ml-dropdown-box-shadow, 0 20px 25px -5px rgba(0, 0, 0, .1), 0 8px 10px -6px rgba(0, 0, 0, .1));max-height:var(--ml-dropdown-max-height, 20rem);overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y;-webkit-overflow-scrolling:touch;color:var(--ml-dropdown-color, #111827)}.ml__dropdown--visible{display:block}.ml__dropdown--virtual{overflow-y:visible;max-height:none}.ml__actions{display:flex;gap:var(--ml-actions-gap, .25rem);padding:var(--ml-actions-padding, .5rem);border-bottom:var(--ml-actions-border-bottom, 1px solid #e5e7eb)}.ml__actions--sticky{position:sticky;top:0;z-index:var(--ml-z-index-sticky, 1);background:var(--ml-actions-bg, #ffffff)}.ml__action-btn{flex:1;padding:var(--ml-action-btn-padding, .25rem .5rem);font-size:var(--ml-action-btn-font-size, .75rem);border:var(--ml-action-btn-border, 1px solid #e5e7eb);border-radius:var(--ml-action-btn-border-radius, .25rem);background:var(--ml-action-btn-bg, transparent);color:var(--ml-action-btn-color, inherit);cursor:pointer;transition:all var(--ml-transition-fast, .15s) var(--ml-easing-snappy, cubic-bezier(.4, 0, .2, 1))}.ml__action-btn:hover{background:var(--ml-action-btn-bg-hover, #f3f4f6);border-color:var(--ml-action-btn-border-color-hover, #3b82f6)}.ml__action-btn:active{transform:scale(var(--ml-transform-scale-active, .98))}.ml__options{padding:var(--ml-options-padding, .25rem 0)}.ml__options--virtual .ml__option{height:var(--ml-option-height, 50px);min-height:var(--ml-option-height, 50px);max-height:var(--ml-option-height, 50px);overflow:hidden;box-sizing:border-box}.ml__group+.ml__group{border-top:var(--ml-group-border-top, 1px solid #e5e7eb);margin-top:var(--ml-group-margin-top, .25rem);padding-top:var(--ml-group-padding-top, .25rem)}.ml__group-label{padding:var(--ml-group-label-padding, .25rem .75rem);font-size:var(--ml-group-label-font-size, .75rem);font-weight:var(--ml-group-label-font-weight, 600);color:var(--ml-group-label-color, #6b7280);text-transform:var(--ml-group-label-transform, uppercase);letter-spacing:var(--ml-group-label-letter-spacing, .05em)}.ml__option{display:flex;align-items:flex-start;gap:var(--ml-option-gap, .5rem);padding:var(--ml-option-padding, .5rem .75rem);cursor:pointer;transition:background-color var(--ml-transition-fast, .15s) var(--ml-easing-snappy, cubic-bezier(.4, 0, .2, 1))}.ml__option:hover{background:var(--ml-option-bg-hover, #f9fafb)}.ml__option--focused{background:var(--ml-option-bg-focused, #f9fafb);outline:var(--ml-option-outline-focused, 2px solid #3b82f6);outline-offset:var(--ml-option-focus-outline-offset, -2px)}.ml__option--matched{background:var(--ml-option-bg-matched, rgba(59, 130, 246, .08));border-left:var(--ml-option-border-matched, 3px solid rgba(59, 130, 246, .4))}.ml__option--selected{background:var(--ml-option-bg-selected, rgba(59, 130, 246, .1))}.ml__option--selected:hover{background:var(--ml-option-bg-selected-hover, var(--ml-option-bg-selected, rgba(59, 130, 246, .1)))}.ml__option--disabled{opacity:var(--ml-disabled-opacity, .5);cursor:not-allowed}.ml__option--disabled:hover{background:var(--ml-option-bg, transparent)}.ml__checkbox{flex-shrink:0;margin-top:var(--ml-checkbox-margin-top, .125rem);cursor:pointer}.ml__option--disabled .ml__checkbox{cursor:not-allowed}.ml__option-content{flex:1;display:flex;align-items:flex-start;gap:var(--ml-option-content-gap, .5rem);min-width:0}.ml__option-icon{flex-shrink:0;width:var(--ml-option-icon-size, 1.25rem);height:var(--ml-option-icon-size, 1.25rem);display:flex;align-items:center;justify-content:center;font-size:var(--ml-option-icon-font-size, 1rem)}.ml__option-icon svg{width:100%;height:100%;fill:currentColor}.ml__option-text{flex:1;min-width:0}.ml__option-title{font-size:var(--ml-option-title-font-size, .875rem);color:var(--ml-option-title-color, inherit);line-height:var(--ml-line-height-relaxed, 1.4)}.ml__option-title mark{background:var(--ml-option-mark-bg, rgba(59, 130, 246, .2));color:var(--ml-option-mark-color, inherit);font-weight:var(--ml-option-mark-font-weight, 600)}.ml__option-subtitle{margin-top:var(--ml-option-subtitle-margin-top, .25rem);font-size:var(--ml-option-subtitle-font-size, .75rem);color:var(--ml-option-subtitle-color, #6b7280);line-height:var(--ml-option-subtitle-line-height, 1.3)}.ml__empty{padding:var(--ml-empty-padding, 1rem .75rem);text-align:center;font-size:var(--ml-empty-font-size, .875rem);color:var(--ml-empty-color, #6b7280)}.ml__loader{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--ml-loader-padding, 1rem);gap:var(--ml-loader-gap, .5rem)}.ml__loading-text{font-size:var(--ml-loading-text-font-size, .875rem);color:var(--ml-loading-text-color, #6b7280)}.ml__pills{display:flex;flex-wrap:wrap;gap:var(--ml-pills-gap, .5rem);padding:0}.ml__pills:empty{display:none}.ml__pills--bottom{margin-top:var(--ml-pills-margin-bottom, .5rem)}.ml__pills--top{margin-bottom:var(--ml-pills-margin-top, .5rem);order:var(--ml-order-first, -1)}.ml__pills--left{order:var(--ml-order-first, -1);margin-right:var(--ml-pills-margin-left, .25rem);justify-content:flex-end}.ml__pills--right{margin-left:var(--ml-pills-margin-right, .25rem);justify-content:flex-start}.ml__count-display{display:flex;align-items:center}.ml__count-display:empty{display:none}.ml__count-display--bottom{margin-top:var(--ml-count-display-margin-bottom, .5rem)}.ml__count-display--top{margin-bottom:var(--ml-count-display-margin-top, .5rem);order:var(--ml-order-first, -1)}.ml__count-display--left{order:var(--ml-order-first, -1);margin-right:var(--ml-count-display-margin-left, .5rem);justify-content:flex-start}.ml__count-display--right{margin-left:var(--ml-count-display-margin-right, .5rem);justify-content:flex-end}.ml__count-badge-wrapper{display:inline-flex;align-items:center;gap:var(--ml-count-badge-wrapper-gap, .25rem);background:var(--ml-count-badge-wrapper-bg, transparent);border:var(--ml-count-badge-wrapper-border, 1px solid #e5e7eb);border-radius:var(--ml-count-badge-wrapper-border-radius, .25rem);padding:var(--ml-count-badge-wrapper-padding, .25rem .5rem);transition:all var(--ml-transition-fast, .15s) var(--ml-easing-snappy, cubic-bezier(.4, 0, .2, 1))}.ml__count-badge-wrapper:hover{background:var(--ml-count-badge-wrapper-bg-hover, #f9fafb);border-color:var(--ml-count-badge-wrapper-border-color-hover, #3b82f6)}.ml__count-text{display:inline-flex;align-items:center;background:var(--ml-count-text-bg, transparent);border:var(--ml-count-text-border, none);padding:0;font-size:var(--ml-count-text-font-size, .875rem);color:var(--ml-count-text-color, #111827);cursor:pointer;transition:color var(--ml-transition-fast, .15s) var(--ml-easing-snappy, cubic-bezier(.4, 0, .2, 1))}.ml__count-clear{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:var(--ml-count-clear-size, 1rem);height:var(--ml-count-clear-size, 1rem);padding:0;border:none;background:var(--ml-count-clear-bg, transparent);color:var(--ml-count-clear-color, #6b7280);font-size:var(--ml-count-clear-font-size, 1.125rem);line-height:var(--ml-line-height-none, 1);cursor:pointer;border-radius:var(--ml-count-clear-border-radius, 50%);transition:all var(--ml-transition-fast, .15s) var(--ml-easing-snappy, cubic-bezier(.4, 0, .2, 1))}.ml__count-clear:hover{background:var(--ml-count-clear-bg-hover, rgba(59, 130, 246, .2));color:var(--ml-count-clear-color-hover, #3b82f6)}.ml__count-clear:before{content:var(--ml-icon-clear, "×")}.ml__pill{display:inline-flex;align-items:center;height:var(--ml-pill-height, 1.5rem);font-size:var(--ml-pill-font-size, .75rem);font-weight:var(--ml-pill-font-weight, 600);line-height:var(--ml-line-height-none, 1);border-radius:var(--ml-pill-border-radius, .375rem);overflow:hidden;max-width:100%}.ml__pill-text{display:flex;align-items:center;height:100%;padding:var(--ml-pill-text-padding, 0 .5rem);background:var(--ml-pill-text-bg, #eff6ff);color:var(--ml-pill-text-color, #3b82f6);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transition:background-color var(--ml-transition-normal, .2s) ease}.ml__pill-remove{display:flex;align-items:center;justify-content:center;width:var(--ml-pill-remove-width, 1.5rem);height:100%;flex-shrink:0;background:var(--ml-pill-remove-bg, #3b82f6);color:var(--ml-pill-remove-color, #ffffff);border:var(--ml-pill-remove-border, none);cursor:pointer;transition:background-color var(--ml-transition-normal, .2s) ease;font-size:var(--ml-pill-remove-font-size, .75rem)}.ml__pill-remove:hover{background:var(--ml-pill-remove-bg-hover, #2563eb)}.ml__pill-remove:focus{outline:none;box-shadow:var(--ml-pill-remove-box-shadow-focus, 0 0 0 2px rgba(59, 130, 246, .5))}.ml__pill-remove:before{content:var(--ml-icon-remove, "×");font-size:var(--ml-font-size-base, 1rem);line-height:var(--ml-line-height-none, 1)}.ml__pill--more{cursor:pointer}.ml__pill--more .ml__pill-text{background:var(--ml-more-badge-bg, #eff6ff);font-weight:var(--ml-pill-font-weight, 600)}.ml__pill--more:hover .ml__pill-text{background:var(--ml-more-badge-hover-bg, #ffffff)}.ml__pill--more:active .ml__pill-text{background:var(--ml-more-badge-active-bg, #e0f2fe)}.ml__pill-tooltip{position:fixed;z-index:var(--ml-tooltip-z-index, 10000);opacity:0;visibility:hidden;transition:opacity var(--ml-transition-normal, .2s) ease,visibility var(--ml-transition-normal, .2s) ease;background:var(--ml-tooltip-bg, #333);color:var(--ml-tooltip-color, #fff);padding:var(--ml-tooltip-padding, .5rem .75rem);border-radius:var(--ml-tooltip-border-radius, .375rem);font-size:var(--ml-tooltip-font-size, .875rem);line-height:var(--ml-line-height-relaxed, 1.4);max-width:var(--ml-tooltip-max-width, 20rem);word-wrap:break-word;white-space:pre-wrap;box-shadow:var(--ml-tooltip-shadow, 0 2px 8px rgba(0, 0, 0, .15));pointer-events:none}.ml__pill-tooltip--visible{opacity:1;visibility:visible}.ml__selected-popover{display:none;position:absolute;z-index:var(--ml-z-index-popover, 10000);background:var(--ml-selected-popover-bg, #ffffff);border:var(--ml-selected-popover-border, 1px solid #e5e7eb);border-radius:var(--ml-selected-popover-border-radius, .375rem);box-shadow:var(--ml-selected-popover-box-shadow, 0 20px 25px -5px rgba(0, 0, 0, .1), 0 8px 10px -6px rgba(0, 0, 0, .1));width:var(--ml-selected-popover-width, 20rem);max-height:var(--ml-selected-popover-max-height, 20rem);overflow:hidden}.ml__selected-popover--visible{display:flex;flex-direction:column}.ml__selected-popover--virtual{display:block;overflow:visible;max-height:none}.ml__selected-popover-header{display:flex;align-items:center;justify-content:space-between;padding:var(--ml-selected-popover-header-padding, .5rem .75rem);background:var(--ml-selected-popover-header-bg, rgba(59, 130, 246, .1));border-bottom:var(--ml-selected-popover-header-border-bottom, 1px solid #e5e7eb);font-size:var(--ml-selected-popover-header-font-size, .875rem);font-weight:var(--ml-selected-popover-header-font-weight, 600);color:var(--ml-selected-popover-header-color, #111827)}.ml__selected-popover-close{display:flex;align-items:center;justify-content:center;width:var(--ml-popover-close-size, 1.5rem);height:var(--ml-popover-close-size, 1.5rem);padding:0;border:none;background:var(--ml-selected-popover-close-bg, transparent);color:var(--ml-selected-popover-close-color, #6b7280);font-size:var(--ml-selected-popover-close-font-size, 1.25rem);line-height:var(--ml-line-height-none, 1);cursor:pointer;border-radius:var(--ml-selected-popover-close-border-radius, 50%);transition:all var(--ml-transition-fast, .15s) var(--ml-easing-snappy, cubic-bezier(.4, 0, .2, 1))}.ml__selected-popover-close:hover{background:var(--ml-selected-popover-close-bg-hover, rgba(59, 130, 246, .2));color:var(--ml-selected-popover-close-color-hover, #3b82f6)}.ml__selected-popover-body{display:flex;flex-direction:column;gap:var(--ml-selected-popover-body-gap, .25rem);padding:var(--ml-selected-popover-body-padding, .5rem);overflow-y:auto;max-height:var(--ml-selected-popover-body-max-height, 18rem)}.ml__selected-popover-body .ml__pill{width:100%}.ml__selected-popover-body .ml__pill-text{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}.ml__selected-popover-body--virtual{display:block;max-height:none;padding:0}.ml__selected-popover-body--virtual .ml__pill{height:var(--ml-pill-height-virtual, 36px);min-height:var(--ml-pill-height-virtual, 36px);max-height:var(--ml-pill-height-virtual, 36px);margin-bottom:var(--ml-selected-popover-body-gap, .25rem);overflow:hidden;box-sizing:border-box}.ml--rtl .ml__input-wrapper{direction:rtl}.ml--rtl .ml__input{text-align:right;padding-left:var(--ml-input-padding-right, 2.5rem);padding-right:var(--ml-input-padding-h, .75rem)}.ml--rtl .ml__toggle{left:var(--ml-toggle-right, .75rem)!important;right:auto!important}.ml--rtl .ml__count-badge{left:var(--ml-count-badge-offset, 2rem)!important;right:auto!important}.ml--rtl .ml__dropdown{direction:rtl;text-align:right}.ml--rtl .ml__option{flex-direction:row-reverse}.ml--rtl .ml__checkbox{margin-left:var(--ml-spacing-sm, .5rem);margin-right:0}.ml--rtl .ml__option-content{text-align:right}.ml--rtl .ml__option-icon{margin-left:var(--ml-spacing-xs, .25rem);margin-right:0}.ml--rtl .ml__pills{direction:rtl}.ml--rtl .ml__pill{flex-direction:row-reverse}.ml--rtl .ml__pill-remove{border-radius:var(--ml-pill-remove-border-radius-rtl, .375rem) 0 0 var(--ml-pill-remove-border-radius-rtl, .375rem);border-left:var(--ml-pill-remove-border, none);border-right:none}.ml--rtl .ml__pill-text{border-radius:0 var(--ml-pill-text-border-radius-rtl, .375rem) var(--ml-pill-text-border-radius-rtl, .375rem) 0}.ml--rtl .ml__count-display{direction:rtl}.ml--rtl .ml__count-badge-wrapper{flex-direction:row-reverse}.ml--rtl .ml__selected-popover{direction:rtl;text-align:right}.ml--rtl .ml__actions{direction:rtl}.ml--rtl .ml__group-label,.ml--rtl .ml__empty{text-align:right}.ml--rtl .ml__hint{direction:rtl;text-align:right}.ml--xs .ml__input{font-size:var(--ml-font-size-xs, .75rem)}.ml--xs .ml__option{padding:var(--ml-spacing-xs, .25rem) var(--ml-spacing-sm, .5rem)}.ml--xs .ml__option-title{font-size:var(--ml-font-size-xs, .75rem)}.ml--xs .ml__pill{font-size:var(--ml-font-size-2xs, .625rem)}.ml--sm .ml__input,.ml--sm .ml__option-title{font-size:var(--ml-font-size-xs, .75rem)}.ml--lg .ml__input,.ml--lg .ml__option-title{font-size:var(--ml-font-size-base, 1rem)}.ml--lg .ml__pill{font-size:var(--ml-font-size-sm, .875rem)}.ml--xl .ml__input,.ml--xl .ml__option-title{font-size:var(--ml-font-size-lg, 1.125rem)}.ml--xl .ml__pill{font-size:var(--ml-font-size-base, 1rem)}.ml--disabled .ml__input{opacity:var(--ml-disabled-input-opacity, .6);cursor:not-allowed;background:var(--ml-input-bg-disabled, rgba(107, 114, 128, .05))}.ml--disabled .ml__toggle{opacity:var(--ml-disabled-input-opacity, .6)}.ml--no-checkboxes .ml__option{gap:0;padding-left:var(--ml-option-padding-h, .75rem)}.ml--no-checkboxes .ml__option-content{padding-left:0}.ml-debug-info{margin-top:.25rem;padding:.25rem;background-color:#f9fafb;border:1px solid #e5e7eb;border-radius:.375rem;font-size:.75rem;color:#111827}.ml-debug-info details summary{cursor:pointer;font-weight:600;color:#2563eb;-webkit-user-select:none;user-select:none;padding:.25rem;border-radius:.25rem}.ml-debug-info details summary:hover{background-color:#f3f4f6}.ml-debug-info details summary:focus{outline:2px solid #3b82f6;outline-offset:2px}.ml-debug-info .ml-debug-stats{display:flex;flex-direction:column;gap:.25rem;margin-top:.25rem;padding:.25rem;background-color:#fff;border-radius:.25rem}.ml-debug-info .ml-debug-stats span{display:flex;justify-content:space-between;padding:2px 4px;font-family:monospace;font-size:.625rem}.ml-debug-info .ml-debug-stats span:before{content:"•";margin-right:.25rem;color:#3b82f6}
|
|
1
|
+
@charset "UTF-8";:host{--ml-accent-color: #3b82f6;--ml-accent-color-hover: #2563eb;--ml-accent-color-active: #1d4ed8;--ml-text-primary: #111827;--ml-text-secondary: #6b7280;--ml-text-white: #ffffff;--ml-primary-bg: #f3f4f6;--ml-primary-bg-hover: #e5e7eb;--ml-border-color: #e5e7eb;--ml-input-padding: .5rem .75rem;--ml-input-padding-right: 2.5rem;--ml-input-font-size: .875rem;--ml-input-border-style: 1px solid #d1d5db;--ml-input-border-radius: .375rem;--ml-input-bg: #ffffff;--ml-input-text: #111827;--ml-input-focus-border-color: #3b82f6;--ml-input-placeholder-color: #6b7280;--ml-input-bg-disabled: rgba(107, 114, 128, .05);--ml-toggle-right: .75rem;--ml-toggle-color: #6b7280;--ml-transform-center-y: translateY(-50%);--ml-transform-rotate-180: 180deg;--ml-count-badge-offset: 2rem;--ml-count-badge-padding: .125rem .25rem;--ml-count-badge-bg: #3b82f6;--ml-count-badge-color: #ffffff;--ml-count-badge-font-size: .75rem;--ml-count-badge-font-weight: 600;--ml-count-badge-border-radius: .25rem;--ml-count-badge-bg-hover: #2563eb;--ml-transform-scale-hover: 1.1;--ml-hint-padding: .5rem .75rem;--ml-hint-bg: #ffffff;--ml-hint-border: 1px solid #e5e7eb;--ml-hint-border-radius: .375rem;--ml-hint-box-shadow: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -2px rgba(0, 0, 0, .1);--ml-hint-font-size: .75rem;--ml-hint-color: #6b7280;--ml-line-height-relaxed: 1.4;--ml-dropdown-bg: #ffffff;--ml-dropdown-border: 1px solid #e5e7eb;--ml-dropdown-border-radius: .375rem;--ml-dropdown-box-shadow: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 8px 10px -6px rgba(0, 0, 0, .1);--ml-dropdown-max-height: 20rem;--ml-dropdown-color: #111827;--ml-z-index-dropdown: 9999;--ml-z-index-sticky: 1;--ml-actions-gap: .25rem;--ml-actions-padding: .5rem;--ml-actions-border-bottom: 1px solid #e5e7eb;--ml-actions-bg: #ffffff;--ml-action-btn-padding: .25rem .5rem;--ml-action-btn-font-size: .75rem;--ml-action-btn-border: 1px solid #e5e7eb;--ml-action-btn-border-radius: .25rem;--ml-action-btn-bg: transparent;--ml-action-btn-color: inherit;--ml-action-btn-bg-hover: #f3f4f6;--ml-action-btn-border-color-hover: #3b82f6;--ml-transform-scale-active: .98;--ml-options-padding: .25rem 0;--ml-group-border-top: 1px solid #e5e7eb;--ml-group-margin-top: .25rem;--ml-group-padding-top: .25rem;--ml-group-label-padding: .25rem .75rem;--ml-group-label-font-size: .75rem;--ml-group-label-font-weight: 600;--ml-group-label-color: #6b7280;--ml-group-label-transform: uppercase;--ml-group-label-letter-spacing: .05em;--ml-option-gap: .5rem;--ml-option-padding: .5rem .75rem;--ml-option-padding-h: .75rem;--ml-option-bg: transparent;--ml-option-bg-hover: #f9fafb;--ml-option-bg-focused: #f9fafb;--ml-option-outline-focused: 2px solid #3b82f6;--ml-option-focus-outline-offset: -2px;--ml-option-bg-matched: rgba(59, 130, 246, .08);--ml-option-border-matched: 3px solid rgba(59, 130, 246, .4);--ml-option-bg-selected: rgba(59, 130, 246, .1);--ml-disabled-opacity: .5;--ml-option-content-gap: .5rem;--ml-option-icon-size: 1.25rem;--ml-option-icon-font-size: 1rem;--ml-option-title-font-size: .875rem;--ml-option-title-color: inherit;--ml-option-mark-bg: rgba(59, 130, 246, .2);--ml-option-mark-color: inherit;--ml-option-mark-font-weight: 600;--ml-option-subtitle-margin-top: .25rem;--ml-option-subtitle-font-size: .75rem;--ml-option-subtitle-color: #6b7280;--ml-option-subtitle-line-height: 1.3;--ml-checkbox-margin-top: .125rem;--ml-empty-padding: 1rem .75rem;--ml-empty-font-size: .875rem;--ml-empty-color: #6b7280;--ml-loader-padding: 1rem;--ml-loader-gap: .5rem;--ml-loading-text-font-size: .875rem;--ml-loading-text-color: #6b7280;--ml-pills-gap: .5rem;--ml-pills-margin-bottom: .5rem;--ml-pills-margin-top: .5rem;--ml-pills-margin-left: .25rem;--ml-pills-margin-right: .25rem;--ml-pill-gap: .5rem;--ml-pill-height: 1.5rem;--ml-pill-font-size: .75rem;--ml-pill-font-weight: 600;--ml-pill-border-radius: .375rem;--ml-pill-bg: #eff6ff;--ml-pill-bg-hover: #ffffff;--ml-pill-bg-active: #e0f2fe;--ml-order-first: -1;--ml-pill-text-padding: 0 .5rem;--ml-pill-text-bg: #eff6ff;--ml-pill-text-color: #3b82f6;--ml-pill-remove-width: 1.5rem;--ml-pill-remove-bg: #3b82f6;--ml-pill-remove-color: #ffffff;--ml-pill-remove-border: none;--ml-pill-remove-font-size: .75rem;--ml-pill-remove-bg-hover: #2563eb;--ml-pill-remove-box-shadow-focus: 0 0 0 2px rgba(59, 130, 246, .5);--ml-icon-remove: "×";--ml-pill-indicator-bg: transparent;--ml-pill-indicator-border: 1px solid #e5e7eb;--ml-pill-indicator-border-radius: .25rem;--ml-pill-indicator-text-color: #6b7280;--ml-pill-indicator-text-bg: #d1d5db;--ml-pill-indicator-remove-bg: #6b7280;--ml-pill-indicator-remove-color: #ffffff;--ml-pill-indicator-remove-bg-hover: #111827;--ml-more-badge-bg: #eff6ff;--ml-more-badge-hover-bg: #ffffff;--ml-more-badge-active-bg: #e0f2fe;--ml-count-display-margin-bottom: .5rem;--ml-count-display-margin-top: .5rem;--ml-count-display-margin-left: .5rem;--ml-count-display-margin-right: .5rem;--ml-count-badge-wrapper-bg: transparent;--ml-count-badge-wrapper-border: 1px solid #e5e7eb;--ml-count-badge-wrapper-border-radius: .25rem;--ml-count-badge-wrapper-padding: .25rem .5rem;--ml-count-badge-wrapper-gap: .25rem;--ml-count-badge-wrapper-bg-hover: #f9fafb;--ml-count-badge-wrapper-border-color-hover: #3b82f6;--ml-count-text-bg: transparent;--ml-count-text-border: none;--ml-count-text-font-size: .875rem;--ml-count-text-color: #111827;--ml-count-clear-size: 1rem;--ml-count-clear-bg: transparent;--ml-count-clear-color: #6b7280;--ml-count-clear-font-size: 1.125rem;--ml-count-clear-border-radius: 50%;--ml-count-clear-bg-hover: rgba(59, 130, 246, .2);--ml-count-clear-color-hover: #3b82f6;--ml-icon-clear: "×";--ml-tooltip-bg: #333;--ml-tooltip-color: #fff;--ml-tooltip-padding: .5rem .75rem;--ml-tooltip-border-radius: .375rem;--ml-tooltip-font-size: .875rem;--ml-tooltip-max-width: 20rem;--ml-tooltip-shadow: 0 2px 8px rgba(0, 0, 0, .15);--ml-tooltip-z-index: 10000;--ml-z-index-popover: 10000;--ml-selected-popover-width: 20rem;--ml-selected-popover-max-height: 20rem;--ml-selected-popover-bg: #ffffff;--ml-selected-popover-border: 1px solid #e5e7eb;--ml-selected-popover-border-radius: .375rem;--ml-selected-popover-box-shadow: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 8px 10px -6px rgba(0, 0, 0, .1);--ml-selected-popover-header-padding: .5rem .75rem;--ml-selected-popover-header-bg: rgba(59, 130, 246, .1);--ml-selected-popover-header-border-bottom: 1px solid #e5e7eb;--ml-selected-popover-header-font-size: .875rem;--ml-selected-popover-header-font-weight: 600;--ml-selected-popover-header-color: #111827;--ml-popover-close-size: 1.5rem;--ml-selected-popover-close-bg: transparent;--ml-selected-popover-close-color: #6b7280;--ml-selected-popover-close-font-size: 1.25rem;--ml-selected-popover-close-border-radius: 50%;--ml-selected-popover-close-bg-hover: rgba(59, 130, 246, .2);--ml-selected-popover-close-color-hover: #3b82f6;--ml-selected-popover-body-gap: .25rem;--ml-selected-popover-body-padding: .5rem;--ml-selected-popover-body-max-height: 18rem;--ml-font-size-2xs: .625rem;--ml-font-size-xs: .75rem;--ml-font-size-sm: .875rem;--ml-font-size-base: 1rem;--ml-font-size-lg: 1.125rem;--ml-font-weight-medium: 500;--ml-font-weight-semibold: 600;--ml-line-height-none: 1;--ml-spacing-xs: .25rem;--ml-spacing-sm: .5rem;--ml-spacing-md: .75rem;--ml-spacing-lg: 1rem;--ml-transition-fast: .15s;--ml-transition-normal: .2s;--ml-easing-snappy: cubic-bezier(.4, 0, .2, 1);--ml-placeholder-opacity: .6;--ml-disabled-input-opacity: .6}multi-select:not(:defined){display:block;min-height:2.5rem;color:transparent!important;background:transparent}.ml-wrapper{display:flex;flex-direction:column;align-items:stretch}.ml-wrapper--inline{flex-direction:row;align-items:flex-start}.ml{position:relative;width:100%}.ml__input-wrapper{position:relative;display:flex;align-items:center}.ml__input{width:100%;padding:var(--ml-input-padding, .5rem .75rem);padding-right:var(--ml-input-padding-right, 2.5rem);font-size:var(--ml-input-font-size, .875rem);border:var(--ml-input-border-style, 1px solid #d1d5db);border-radius:var(--ml-input-border-radius, .375rem);background:var(--ml-input-bg, #ffffff);color:var(--ml-input-text, #111827);cursor:pointer;transition:border-color var(--ml-transition-fast, .15s) var(--ml-easing-snappy, cubic-bezier(.4, 0, .2, 1))}.ml__input:focus{outline:none;border-color:var(--ml-input-focus-border-color, #3b82f6)}.ml__input::placeholder{color:var(--ml-input-placeholder-color, #6b7280);opacity:0;transition:opacity var(--ml-transition-fast, .15s) var(--ml-easing-snappy, cubic-bezier(.4, 0, .2, 1))}:host([data-ready]) .ml__input::placeholder{opacity:var(--ml-placeholder-opacity, .6)}.ml__toggle{position:absolute;right:var(--ml-toggle-right, .75rem);top:50%;transform:var(--ml-transform-center-y, translateY(-50%));pointer-events:none;color:var(--ml-toggle-color, #6b7280);transition:transform var(--ml-transition-fast, .15s) var(--ml-easing-snappy, cubic-bezier(.4, 0, .2, 1))}.ml--open .ml__toggle{transform:var(--ml-transform-center-y, translateY(-50%)) rotate(var(--ml-transform-rotate-180, 180deg))}.ml__count-badge{position:absolute;right:var(--ml-count-badge-offset, 2rem);top:50%;transform:var(--ml-transform-center-y, translateY(-50%));padding:var(--ml-count-badge-padding, .125rem .25rem);background:var(--ml-count-badge-bg, #3b82f6);color:var(--ml-count-badge-color, #ffffff);font-size:var(--ml-count-badge-font-size, .75rem);font-weight:var(--ml-count-badge-font-weight, 600);border-radius:var(--ml-count-badge-border-radius, .25rem);cursor:pointer;transition:all var(--ml-transition-fast, .15s) var(--ml-easing-snappy, cubic-bezier(.4, 0, .2, 1))}.ml__count-badge:hover{background:var(--ml-count-badge-bg-hover, #2563eb);transform:var(--ml-transform-center-y, translateY(-50%)) scale(var(--ml-transform-scale-hover, 1.1))}.ml__hint{display:none;position:absolute;z-index:var(--ml-z-index-popover, 10000);padding:var(--ml-hint-padding, .5rem .75rem);background:var(--ml-hint-bg, #ffffff);border:var(--ml-hint-border, 1px solid #e5e7eb);border-radius:var(--ml-hint-border-radius, .375rem);box-shadow:var(--ml-hint-box-shadow, 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -2px rgba(0, 0, 0, .1));font-size:var(--ml-hint-font-size, .75rem);color:var(--ml-hint-color, #6b7280);line-height:var(--ml-line-height-relaxed, 1.4);max-width:100%}.ml__hint--visible{display:block}.ml__dropdown{display:none;position:absolute;z-index:var(--ml-z-index-dropdown, 9999);background:var(--ml-dropdown-bg, #ffffff);border:var(--ml-dropdown-border, 1px solid #e5e7eb);border-radius:var(--ml-dropdown-border-radius, .375rem);box-shadow:var(--ml-dropdown-box-shadow, 0 20px 25px -5px rgba(0, 0, 0, .1), 0 8px 10px -6px rgba(0, 0, 0, .1));max-height:var(--ml-dropdown-max-height, 20rem);overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y;-webkit-overflow-scrolling:touch;color:var(--ml-dropdown-color, #111827)}.ml__dropdown--visible{display:block}.ml__dropdown--virtual{overflow-y:visible;max-height:none}.ml__actions{display:flex;gap:var(--ml-actions-gap, .25rem);padding:var(--ml-actions-padding, .5rem);border-bottom:var(--ml-actions-border-bottom, 1px solid #e5e7eb)}.ml__actions--sticky{position:sticky;top:0;z-index:var(--ml-z-index-sticky, 1);background:var(--ml-actions-bg, #ffffff)}.ml__action-btn{flex:1;padding:var(--ml-action-btn-padding, .25rem .5rem);font-size:var(--ml-action-btn-font-size, .75rem);border:var(--ml-action-btn-border, 1px solid #e5e7eb);border-radius:var(--ml-action-btn-border-radius, .25rem);background:var(--ml-action-btn-bg, transparent);color:var(--ml-action-btn-color, inherit);cursor:pointer;transition:all var(--ml-transition-fast, .15s) var(--ml-easing-snappy, cubic-bezier(.4, 0, .2, 1))}.ml__action-btn:hover{background:var(--ml-action-btn-bg-hover, #f3f4f6);border-color:var(--ml-action-btn-border-color-hover, #3b82f6)}.ml__action-btn:active{transform:scale(var(--ml-transform-scale-active, .98))}.ml__options{padding:var(--ml-options-padding, .25rem 0)}.ml__options--virtual .ml__option{height:var(--ml-option-height, 50px);min-height:var(--ml-option-height, 50px);max-height:var(--ml-option-height, 50px);overflow:hidden;box-sizing:border-box}.ml__group+.ml__group{border-top:var(--ml-group-border-top, 1px solid #e5e7eb);margin-top:var(--ml-group-margin-top, .25rem);padding-top:var(--ml-group-padding-top, .25rem)}.ml__group-label{padding:var(--ml-group-label-padding, .25rem .75rem);font-size:var(--ml-group-label-font-size, .75rem);font-weight:var(--ml-group-label-font-weight, 600);color:var(--ml-group-label-color, #6b7280);text-transform:var(--ml-group-label-transform, uppercase);letter-spacing:var(--ml-group-label-letter-spacing, .05em)}.ml__option{display:flex;align-items:flex-start;gap:var(--ml-option-gap, .5rem);padding:var(--ml-option-padding, .5rem .75rem);cursor:pointer;transition:background-color var(--ml-transition-fast, .15s) var(--ml-easing-snappy, cubic-bezier(.4, 0, .2, 1))}.ml__option:hover{background:var(--ml-option-bg-hover, #f9fafb)}.ml__option--focused{background:var(--ml-option-bg-focused, #f9fafb);outline:var(--ml-option-outline-focused, 2px solid #3b82f6);outline-offset:var(--ml-option-focus-outline-offset, -2px)}.ml__option--matched{background:var(--ml-option-bg-matched, rgba(59, 130, 246, .08));border-left:var(--ml-option-border-matched, 3px solid rgba(59, 130, 246, .4))}.ml__option--selected{background:var(--ml-option-bg-selected, rgba(59, 130, 246, .1))}.ml__option--selected:hover{background:var(--ml-option-bg-selected-hover, var(--ml-option-bg-selected, rgba(59, 130, 246, .1)))}.ml__option--disabled{opacity:var(--ml-disabled-opacity, .5);cursor:not-allowed}.ml__option--disabled:hover{background:var(--ml-option-bg, transparent)}.ml__checkbox{flex-shrink:0;margin-top:var(--ml-checkbox-margin-top, .125rem);cursor:pointer}.ml__option--disabled .ml__checkbox{cursor:not-allowed}.ml__option-content{flex:1;display:flex;align-items:flex-start;gap:var(--ml-option-content-gap, .5rem);min-width:0}.ml__option-icon{flex-shrink:0;width:var(--ml-option-icon-size, 1.25rem);height:var(--ml-option-icon-size, 1.25rem);display:flex;align-items:center;justify-content:center;font-size:var(--ml-option-icon-font-size, 1rem)}.ml__option-icon svg{width:100%;height:100%;fill:currentColor}.ml__option-text{flex:1;min-width:0}.ml__option-title{font-size:var(--ml-option-title-font-size, .875rem);color:var(--ml-option-title-color, inherit);line-height:var(--ml-line-height-relaxed, 1.4)}.ml__option-title mark{background:var(--ml-option-mark-bg, rgba(59, 130, 246, .2));color:var(--ml-option-mark-color, inherit);font-weight:var(--ml-option-mark-font-weight, 600)}.ml__option-subtitle{margin-top:var(--ml-option-subtitle-margin-top, .25rem);font-size:var(--ml-option-subtitle-font-size, .75rem);color:var(--ml-option-subtitle-color, #6b7280);line-height:var(--ml-option-subtitle-line-height, 1.3)}.ml__empty{padding:var(--ml-empty-padding, 1rem .75rem);text-align:center;font-size:var(--ml-empty-font-size, .875rem);color:var(--ml-empty-color, #6b7280)}.ml__loader{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--ml-loader-padding, 1rem);gap:var(--ml-loader-gap, .5rem)}.ml__loading-text{font-size:var(--ml-loading-text-font-size, .875rem);color:var(--ml-loading-text-color, #6b7280)}.ml__pills{display:flex;flex-wrap:wrap;gap:var(--ml-pills-gap, .5rem);padding:0}.ml__pills:empty{display:none}.ml__pills--bottom{margin-top:var(--ml-pills-margin-bottom, .5rem)}.ml__pills--top{margin-bottom:var(--ml-pills-margin-top, .5rem);order:var(--ml-order-first, -1)}.ml__pills--left{order:var(--ml-order-first, -1);margin-right:var(--ml-pills-margin-left, .25rem);justify-content:flex-end}.ml__pills--right{margin-left:var(--ml-pills-margin-right, .25rem);justify-content:flex-start}.ml__count-display{display:flex;align-items:center}.ml__count-display:empty{display:none}.ml__count-display--bottom{margin-top:var(--ml-count-display-margin-bottom, .5rem)}.ml__count-display--top{margin-bottom:var(--ml-count-display-margin-top, .5rem);order:var(--ml-order-first, -1)}.ml__count-display--left{order:var(--ml-order-first, -1);margin-right:var(--ml-count-display-margin-left, .5rem);justify-content:flex-start}.ml__count-display--right{margin-left:var(--ml-count-display-margin-right, .5rem);justify-content:flex-end}.ml__count-badge-wrapper{display:inline-flex;align-items:center;gap:var(--ml-count-badge-wrapper-gap, .25rem);background:var(--ml-count-badge-wrapper-bg, transparent);border:var(--ml-count-badge-wrapper-border, 1px solid #e5e7eb);border-radius:var(--ml-count-badge-wrapper-border-radius, .25rem);padding:var(--ml-count-badge-wrapper-padding, .25rem .5rem);transition:all var(--ml-transition-fast, .15s) var(--ml-easing-snappy, cubic-bezier(.4, 0, .2, 1))}.ml__count-badge-wrapper:hover{background:var(--ml-count-badge-wrapper-bg-hover, #f9fafb);border-color:var(--ml-count-badge-wrapper-border-color-hover, #3b82f6)}.ml__count-text{display:inline-flex;align-items:center;background:var(--ml-count-text-bg, transparent);border:var(--ml-count-text-border, none);padding:0;font-size:var(--ml-count-text-font-size, .875rem);color:var(--ml-count-text-color, #111827);cursor:pointer;transition:color var(--ml-transition-fast, .15s) var(--ml-easing-snappy, cubic-bezier(.4, 0, .2, 1))}.ml__count-clear{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:var(--ml-count-clear-size, 1rem);height:var(--ml-count-clear-size, 1rem);padding:0;border:none;background:var(--ml-count-clear-bg, transparent);color:var(--ml-count-clear-color, #6b7280);font-size:var(--ml-count-clear-font-size, 1.125rem);line-height:var(--ml-line-height-none, 1);cursor:pointer;border-radius:var(--ml-count-clear-border-radius, 50%);transition:all var(--ml-transition-fast, .15s) var(--ml-easing-snappy, cubic-bezier(.4, 0, .2, 1))}.ml__count-clear:hover{background:var(--ml-count-clear-bg-hover, rgba(59, 130, 246, .2));color:var(--ml-count-clear-color-hover, #3b82f6)}.ml__count-clear:before{content:var(--ml-icon-clear, "×")}.ml__pill{display:inline-flex;align-items:center;height:var(--ml-pill-height, 1.5rem);font-size:var(--ml-pill-font-size, .75rem);font-weight:var(--ml-pill-font-weight, 600);line-height:var(--ml-line-height-none, 1);border-radius:var(--ml-pill-border-radius, .375rem);overflow:hidden;max-width:100%}.ml__pill-text{display:flex;align-items:center;height:100%;padding:var(--ml-pill-text-padding, 0 .5rem);background:var(--ml-pill-text-bg, #eff6ff);color:var(--ml-pill-text-color, #3b82f6);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transition:background-color var(--ml-transition-normal, .2s) ease}.ml__pill-remove{display:flex;align-items:center;justify-content:center;width:var(--ml-pill-remove-width, 1.5rem);height:100%;flex-shrink:0;background:var(--ml-pill-remove-bg, #3b82f6);color:var(--ml-pill-remove-color, #ffffff);border:var(--ml-pill-remove-border, none);cursor:pointer;transition:background-color var(--ml-transition-normal, .2s) ease;font-size:var(--ml-pill-remove-font-size, .75rem)}.ml__pill-remove:hover{background:var(--ml-pill-remove-bg-hover, #2563eb)}.ml__pill-remove:focus{outline:none;box-shadow:var(--ml-pill-remove-box-shadow-focus, 0 0 0 2px rgba(59, 130, 246, .5))}.ml__pill-remove:before{content:var(--ml-icon-remove, "×");font-size:var(--ml-font-size-base, 1rem);line-height:var(--ml-line-height-none, 1)}.ml__pill--indicator{border:var(--ml-pill-indicator-border, 1px solid #e5e7eb)}.ml__pill--indicator .ml__pill-text{background:var(--ml-pill-indicator-text-bg, #d1d5db);color:var(--ml-pill-indicator-text-color, #6b7280)}.ml__pill--indicator .ml__pill-remove{background:var(--ml-pill-indicator-remove-bg, #6b7280);color:var(--ml-pill-indicator-remove-color, #ffffff)}.ml__pill--indicator .ml__pill-remove:hover{background:var(--ml-pill-indicator-remove-bg-hover, #111827)}.ml__pill--more{cursor:pointer}.ml__pill-tooltip{position:fixed;z-index:var(--ml-tooltip-z-index, 10000);opacity:0;visibility:hidden;transition:opacity var(--ml-transition-normal, .2s) ease,visibility var(--ml-transition-normal, .2s) ease;background:var(--ml-tooltip-bg, #333);color:var(--ml-tooltip-color, #fff);padding:var(--ml-tooltip-padding, .5rem .75rem);border-radius:var(--ml-tooltip-border-radius, .375rem);font-size:var(--ml-tooltip-font-size, .875rem);line-height:var(--ml-line-height-relaxed, 1.4);max-width:var(--ml-tooltip-max-width, 20rem);word-wrap:break-word;white-space:pre-wrap;box-shadow:var(--ml-tooltip-shadow, 0 2px 8px rgba(0, 0, 0, .15));pointer-events:none}.ml__pill-tooltip--visible{opacity:1;visibility:visible}.ml__selected-popover{display:none;position:absolute;z-index:var(--ml-z-index-popover, 10000);background:var(--ml-selected-popover-bg, #ffffff);border:var(--ml-selected-popover-border, 1px solid #e5e7eb);border-radius:var(--ml-selected-popover-border-radius, .375rem);box-shadow:var(--ml-selected-popover-box-shadow, 0 20px 25px -5px rgba(0, 0, 0, .1), 0 8px 10px -6px rgba(0, 0, 0, .1));width:var(--ml-selected-popover-width, 20rem);max-height:var(--ml-selected-popover-max-height, 20rem);overflow:hidden}.ml__selected-popover--visible{display:flex;flex-direction:column}.ml__selected-popover--virtual{display:block;overflow:visible;max-height:none}.ml__selected-popover-header{display:flex;align-items:center;justify-content:space-between;padding:var(--ml-selected-popover-header-padding, .5rem .75rem);background:var(--ml-selected-popover-header-bg, rgba(59, 130, 246, .1));border-bottom:var(--ml-selected-popover-header-border-bottom, 1px solid #e5e7eb);font-size:var(--ml-selected-popover-header-font-size, .875rem);font-weight:var(--ml-selected-popover-header-font-weight, 600);color:var(--ml-selected-popover-header-color, #111827)}.ml__selected-popover-close{display:flex;align-items:center;justify-content:center;width:var(--ml-popover-close-size, 1.5rem);height:var(--ml-popover-close-size, 1.5rem);padding:0;border:none;background:var(--ml-selected-popover-close-bg, transparent);color:var(--ml-selected-popover-close-color, #6b7280);font-size:var(--ml-selected-popover-close-font-size, 1.25rem);line-height:var(--ml-line-height-none, 1);cursor:pointer;border-radius:var(--ml-selected-popover-close-border-radius, 50%);transition:all var(--ml-transition-fast, .15s) var(--ml-easing-snappy, cubic-bezier(.4, 0, .2, 1))}.ml__selected-popover-close:hover{background:var(--ml-selected-popover-close-bg-hover, rgba(59, 130, 246, .2));color:var(--ml-selected-popover-close-color-hover, #3b82f6)}.ml__selected-popover-body{display:flex;flex-direction:column;gap:var(--ml-selected-popover-body-gap, .25rem);padding:var(--ml-selected-popover-body-padding, .5rem);overflow-y:auto;max-height:var(--ml-selected-popover-body-max-height, 18rem)}.ml__selected-popover-body .ml__pill{width:100%}.ml__selected-popover-body .ml__pill-text{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}.ml__selected-popover-body--virtual{display:block;max-height:none;padding:0}.ml__selected-popover-body--virtual .ml__pill{height:var(--ml-pill-height-virtual, 36px);min-height:var(--ml-pill-height-virtual, 36px);max-height:var(--ml-pill-height-virtual, 36px);margin-bottom:var(--ml-selected-popover-body-gap, .25rem);overflow:hidden;box-sizing:border-box}.ml--rtl .ml__input-wrapper{direction:rtl}.ml--rtl .ml__input{text-align:right;padding-left:var(--ml-input-padding-right, 2.5rem);padding-right:var(--ml-input-padding-h, .75rem)}.ml--rtl .ml__toggle{left:var(--ml-toggle-right, .75rem)!important;right:auto!important}.ml--rtl .ml__count-badge{left:var(--ml-count-badge-offset, 2rem)!important;right:auto!important}.ml--rtl .ml__dropdown{direction:rtl;text-align:right}.ml--rtl .ml__option{flex-direction:row-reverse}.ml--rtl .ml__checkbox{margin-left:var(--ml-spacing-sm, .5rem);margin-right:0}.ml--rtl .ml__option-content{text-align:right}.ml--rtl .ml__option-icon{margin-left:var(--ml-spacing-xs, .25rem);margin-right:0}.ml--rtl .ml__pills{direction:rtl}.ml--rtl .ml__pill{flex-direction:row-reverse}.ml--rtl .ml__pill-remove{border-radius:var(--ml-pill-remove-border-radius-rtl, .375rem) 0 0 var(--ml-pill-remove-border-radius-rtl, .375rem);border-left:var(--ml-pill-remove-border, none);border-right:none}.ml--rtl .ml__pill-text{border-radius:0 var(--ml-pill-text-border-radius-rtl, .375rem) var(--ml-pill-text-border-radius-rtl, .375rem) 0}.ml--rtl .ml__count-display{direction:rtl}.ml--rtl .ml__count-badge-wrapper{flex-direction:row-reverse}.ml--rtl .ml__selected-popover{direction:rtl;text-align:right}.ml--rtl .ml__actions{direction:rtl}.ml--rtl .ml__group-label,.ml--rtl .ml__empty{text-align:right}.ml--rtl .ml__hint{direction:rtl;text-align:right}.ml--xs .ml__input{font-size:var(--ml-font-size-xs, .75rem)}.ml--xs .ml__option{padding:var(--ml-spacing-xs, .25rem) var(--ml-spacing-sm, .5rem)}.ml--xs .ml__option-title{font-size:var(--ml-font-size-xs, .75rem)}.ml--xs .ml__pill{font-size:var(--ml-font-size-2xs, .625rem)}.ml--sm .ml__input,.ml--sm .ml__option-title{font-size:var(--ml-font-size-xs, .75rem)}.ml--lg .ml__input,.ml--lg .ml__option-title{font-size:var(--ml-font-size-base, 1rem)}.ml--lg .ml__pill{font-size:var(--ml-font-size-sm, .875rem)}.ml--xl .ml__input,.ml--xl .ml__option-title{font-size:var(--ml-font-size-lg, 1.125rem)}.ml--xl .ml__pill{font-size:var(--ml-font-size-base, 1rem)}.ml--disabled .ml__input{opacity:var(--ml-disabled-input-opacity, .6);cursor:not-allowed;background:var(--ml-input-bg-disabled, rgba(107, 114, 128, .05))}.ml--disabled .ml__toggle{opacity:var(--ml-disabled-input-opacity, .6)}.ml--no-checkboxes .ml__option{gap:0;padding-left:var(--ml-option-padding-h, .75rem)}.ml--no-checkboxes .ml__option-content{padding-left:0}.ml-debug-info{margin-top:.25rem;padding:.25rem;background-color:#f9fafb;border:1px solid #e5e7eb;border-radius:.375rem;font-size:.75rem;color:#111827}.ml-debug-info details summary{cursor:pointer;font-weight:600;color:#2563eb;-webkit-user-select:none;user-select:none;padding:.25rem;border-radius:.25rem}.ml-debug-info details summary:hover{background-color:#f3f4f6}.ml-debug-info details summary:focus{outline:2px solid #3b82f6;outline-offset:2px}.ml-debug-info .ml-debug-stats{display:flex;flex-direction:column;gap:.25rem;margin-top:.25rem;padding:.25rem;background-color:#fff;border-radius:.25rem}.ml-debug-info .ml-debug-stats span{display:flex;justify-content:space-between;padding:2px 4px;font-family:monospace;font-size:.625rem}.ml-debug-info .ml-debug-stats span:before{content:"•";margin-right:.25rem;color:#3b82f6}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@keenmate/web-multiselect",
|
|
3
|
-
"version": "1.0.0-
|
|
3
|
+
"version": "1.0.0-rc11",
|
|
4
4
|
"description": "Lightweight multiselect web component with typeahead search, rich content support, and excellent keyboard navigation",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./dist/multiselect.umd.js",
|
|
@@ -241,6 +241,16 @@
|
|
|
241
241
|
--ml-pill-remove-box-shadow-focus: #{$ml-pill-remove-box-shadow-focus};
|
|
242
242
|
--ml-icon-remove: "#{$ml-icon-remove}";
|
|
243
243
|
|
|
244
|
+
// Pill Indicator (for "+ X more", "3 selected", compact mode)
|
|
245
|
+
--ml-pill-indicator-bg: #{$ml-pill-indicator-bg};
|
|
246
|
+
--ml-pill-indicator-border: #{$ml-pill-indicator-border};
|
|
247
|
+
--ml-pill-indicator-border-radius: #{$ml-pill-indicator-border-radius};
|
|
248
|
+
--ml-pill-indicator-text-color: #{$ml-pill-indicator-text-color};
|
|
249
|
+
--ml-pill-indicator-text-bg: #{$ml-pill-indicator-text-bg};
|
|
250
|
+
--ml-pill-indicator-remove-bg: #{$ml-pill-indicator-remove-bg};
|
|
251
|
+
--ml-pill-indicator-remove-color: #{$ml-pill-indicator-remove-color};
|
|
252
|
+
--ml-pill-indicator-remove-bg-hover: #{$ml-pill-indicator-remove-bg-hover};
|
|
253
|
+
|
|
244
254
|
// ==========================================================================
|
|
245
255
|
// "+X MORE" BADGE
|
|
246
256
|
// ==========================================================================
|
|
@@ -196,23 +196,33 @@
|
|
|
196
196
|
}
|
|
197
197
|
|
|
198
198
|
// ==============================================================================
|
|
199
|
-
// "+X
|
|
199
|
+
// INDICATOR PILL VARIANT (for "+ X more", "3 selected", compact mode)
|
|
200
200
|
// ==============================================================================
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
cursor: pointer;
|
|
201
|
+
// Gray/neutral styling to distinguish from regular blue pills
|
|
202
|
+
.ml__pill--indicator {
|
|
203
|
+
border: var(--ml-pill-indicator-border, $ml-pill-indicator-border);
|
|
205
204
|
|
|
206
205
|
.ml__pill-text {
|
|
207
|
-
background: var(--ml-
|
|
208
|
-
|
|
206
|
+
background: var(--ml-pill-indicator-text-bg, $ml-pill-indicator-text-bg);
|
|
207
|
+
color: var(--ml-pill-indicator-text-color, $ml-pill-indicator-text-color);
|
|
209
208
|
}
|
|
210
209
|
|
|
211
|
-
|
|
212
|
-
background: var(--ml-
|
|
213
|
-
|
|
210
|
+
.ml__pill-remove {
|
|
211
|
+
background: var(--ml-pill-indicator-remove-bg, $ml-pill-indicator-remove-bg);
|
|
212
|
+
color: var(--ml-pill-indicator-remove-color, $ml-pill-indicator-remove-color);
|
|
214
213
|
|
|
215
|
-
|
|
216
|
-
|
|
214
|
+
&:hover {
|
|
215
|
+
background: var(--ml-pill-indicator-remove-bg-hover, $ml-pill-indicator-remove-bg-hover);
|
|
216
|
+
}
|
|
217
217
|
}
|
|
218
218
|
}
|
|
219
|
+
|
|
220
|
+
// ==============================================================================
|
|
221
|
+
// "+X MORE" PILL VARIANT
|
|
222
|
+
// ==============================================================================
|
|
223
|
+
|
|
224
|
+
// "+X more" pill variant (partial mode)
|
|
225
|
+
// Now uses .ml__pill--indicator for styling, this just adds cursor
|
|
226
|
+
.ml__pill--more {
|
|
227
|
+
cursor: pointer;
|
|
228
|
+
}
|
package/src/scss/_variables.scss
CHANGED
|
@@ -394,6 +394,17 @@ $ml-pill-remove-bg-hover: $ml-accent-color-hover !default;
|
|
|
394
394
|
$ml-pill-remove-box-shadow-focus: 0 0 0 $ml-focus-outline-width
|
|
395
395
|
rgba($ml-accent-color, $ml-opacity-focus-shadow) !default;
|
|
396
396
|
|
|
397
|
+
// Pill Indicator (for "+ X more", "3 selected", compact mode display)
|
|
398
|
+
// ==============================================================================
|
|
399
|
+
$ml-pill-indicator-bg: transparent !default;
|
|
400
|
+
$ml-pill-indicator-border: $ml-border-width-base solid $ml-border-color !default;
|
|
401
|
+
$ml-pill-indicator-border-radius: $ml-border-radius-sm !default;
|
|
402
|
+
$ml-pill-indicator-text-color: $ml-text-secondary !default;
|
|
403
|
+
$ml-pill-indicator-text-bg: $ml-color-neutral-base !default;
|
|
404
|
+
$ml-pill-indicator-remove-bg: $ml-color-neutral-dark !default;
|
|
405
|
+
$ml-pill-indicator-remove-color: $ml-color-white !default;
|
|
406
|
+
$ml-pill-indicator-remove-bg-hover: $ml-color-neutral-darkest !default;
|
|
407
|
+
|
|
397
408
|
// "+X more" badge (partial mode)
|
|
398
409
|
// ==============================================================================
|
|
399
410
|
$ml-more-badge-bg: $ml-pill-text-bg !default;
|