@keenmate/web-multiselect 1.0.0-rc02 → 1.0.0-rc03
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/README.md +11 -0
- package/dist/multiselect.js +5 -4
- package/dist/multiselect.umd.js +3 -3
- package/package.json +1 -1
- package/dist/index.d.ts +0 -26
- package/dist/multiselect.d.ts +0 -117
- package/dist/types.d.ts +0 -187
- package/dist/web-component.d.ts +0 -103
package/README.md
CHANGED
|
@@ -528,6 +528,17 @@ For users with a build system, you can import and customize the SCSS:
|
|
|
528
528
|
- Firefox 63+
|
|
529
529
|
- Safari 10.1+
|
|
530
530
|
|
|
531
|
+
## SSR Compatibility
|
|
532
|
+
|
|
533
|
+
⚠️ **Important for SSR frameworks (SvelteKit, Next.js, Nuxt, etc.):**
|
|
534
|
+
|
|
535
|
+
This is a **client-side only** web component that uses Shadow DOM and browser APIs. While the module is safe to import during Server-Side Rendering (it won't crash), the component will only work in the browser.
|
|
536
|
+
|
|
537
|
+
**The component automatically handles SSR compatibility** - no special configuration needed. However, be aware that:
|
|
538
|
+
- The component will not render during SSR
|
|
539
|
+
- It will only become interactive after hydration in the browser
|
|
540
|
+
- No special client-side import wrappers are required
|
|
541
|
+
|
|
531
542
|
## Development
|
|
532
543
|
|
|
533
544
|
```bash
|
package/dist/multiselect.js
CHANGED
|
@@ -1759,11 +1759,12 @@ ${m}` : d, console.log(`[Tooltips] Using default content: "${l}"`);
|
|
|
1759
1759
|
this.destroyAllPillTooltips(), this.dropdownCleanup && this.dropdownCleanup(), this.hintCleanup && this.hintCleanup(), this.selectedPopoverCleanup && this.selectedPopoverCleanup(), 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"), console.log("[MultiSelect] Destroyed");
|
|
1760
1760
|
}
|
|
1761
1761
|
}
|
|
1762
|
-
const Nt = '@charset "UTF-8";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);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;color:var(--ml-dropdown-color, #111827)}.ml__dropdown--visible{display:block}.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__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--selected{background: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, .5rem);justify-content:flex-start}.ml__pills--right{margin-left:var(--ml-pills-margin-right, .5rem);justify-content:flex-end}.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-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--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}', be = /* @__PURE__ */ new Set();
|
|
1762
|
+
const Nt = '@charset "UTF-8";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);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;color:var(--ml-dropdown-color, #111827)}.ml__dropdown--visible{display:block}.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__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--selected{background: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, .5rem);justify-content:flex-start}.ml__pills--right{margin-left:var(--ml-pills-margin-right, .5rem);justify-content:flex-end}.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-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--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}', Rt = typeof HTMLElement < "u" ? HTMLElement : class {
|
|
1763
|
+
}, be = /* @__PURE__ */ new Set();
|
|
1763
1764
|
function je() {
|
|
1764
1765
|
return Array.from(be);
|
|
1765
1766
|
}
|
|
1766
|
-
class Ge extends
|
|
1767
|
+
class Ge extends Rt {
|
|
1767
1768
|
constructor() {
|
|
1768
1769
|
super();
|
|
1769
1770
|
u(this, "picker");
|
|
@@ -2209,7 +2210,7 @@ class Ge extends HTMLElement {
|
|
|
2209
2210
|
this.picker && this.picker.destroy();
|
|
2210
2211
|
}
|
|
2211
2212
|
}
|
|
2212
|
-
customElements.get("multi-select") || customElements.define("multi-select", Ge);
|
|
2213
|
+
typeof window < "u" && typeof customElements < "u" && (customElements.get("multi-select") || customElements.define("multi-select", Ge));
|
|
2213
2214
|
typeof window < "u" && (window.keenmate = window.keenmate || {}, window.keenmate.multiselect = {
|
|
2214
2215
|
version: () => "1.0.0-rc02",
|
|
2215
2216
|
config: {
|
|
@@ -2221,7 +2222,7 @@ typeof window < "u" && (window.keenmate = window.keenmate || {}, window.keenmate
|
|
|
2221
2222
|
homepage: "https://github.com/keenmate/web-multiselect#readme"
|
|
2222
2223
|
},
|
|
2223
2224
|
register: () => {
|
|
2224
|
-
customElements.get("multi-select")
|
|
2225
|
+
typeof customElements < "u" && !customElements.get("multi-select") && customElements.define("multi-select", Ge);
|
|
2225
2226
|
},
|
|
2226
2227
|
getInstances: () => je()
|
|
2227
2228
|
});
|
package/dist/multiselect.umd.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
(function(A,C){typeof exports=="object"&&typeof module<"u"?C(exports):typeof define=="function"&&define.amd?define(["exports"],C):(A=typeof globalThis<"u"?globalThis:A||self,C(A.MultiSelect={}))})(this,function(A){"use strict";var Nt=Object.defineProperty;var Rt=(A,C,O)=>C in A?Nt(A,C,{enumerable:!0,configurable:!0,writable:!0,value:O}):A[C]=O;var u=(A,C,O)=>Rt(A,typeof C!="symbol"?C+"":C,O);const C=Math.min,O=Math.max,q=Math.round,Z=Math.floor,I=i=>({x:i,y:i}),Ye={left:"right",right:"left",bottom:"top",top:"bottom"},Xe={start:"end",end:"start"};function Ce(i,e,t){return O(i,C(e,t))}function Q(i,e){return typeof i=="function"?i(e):i}function N(i){return i.split("-")[0]}function ee(i){return i.split("-")[1]}function ke(i){return i==="x"?"y":"x"}function Ae(i){return i==="y"?"height":"width"}const Je=new Set(["top","bottom"]);function $(i){return Je.has(N(i))?"y":"x"}function Se(i){return ke($(i))}function qe(i,e,t){t===void 0&&(t=!1);const o=ee(i),l=Se(i),s=Ae(l);let n=l==="x"?o===(t?"end":"start")?"right":"left":o==="start"?"bottom":"top";return e.reference[s]>e.floating[s]&&(n=te(n)),[n,te(n)]}function Ze(i){const e=te(i);return[he(i),e,he(e)]}function he(i){return i.replace(/start|end/g,e=>Xe[e])}const Oe=["left","right"],Pe=["right","left"],Qe=["top","bottom"],et=["bottom","top"];function tt(i,e,t){switch(i){case"top":case"bottom":return t?e?Pe:Oe:e?Oe:Pe;case"left":case"right":return e?Qe:et;default:return[]}}function it(i,e,t,o){const l=ee(i);let s=tt(N(i),t==="start",o);return l&&(s=s.map(n=>n+"-"+l),e&&(s=s.concat(s.map(he)))),s}function te(i){return i.replace(/left|right|bottom|top/g,e=>Ye[e])}function ot(i){return{top:0,right:0,bottom:0,left:0,...i}}function lt(i){return typeof i!="number"?ot(i):{top:i,right:i,bottom:i,left:i}}function ie(i){const{x:e,y:t,width:o,height:l}=i;return{width:o,height:l,top:t,left:e,right:e+o,bottom:t+l,x:e,y:t}}function Te(i,e,t){let{reference:o,floating:l}=i;const s=$(e),n=Se(e),r=Ae(n),a=N(e),c=s==="y",p=o.x+o.width/2-l.width/2,d=o.y+o.height/2-l.height/2,m=o[r]/2-l[r]/2;let h;switch(a){case"top":h={x:p,y:o.y-l.height};break;case"bottom":h={x:p,y:o.y+o.height};break;case"right":h={x:o.x+o.width,y:d};break;case"left":h={x:o.x-l.width,y:d};break;default:h={x:o.x,y:o.y}}switch(ee(e)){case"start":h[n]-=m*(t&&c?-1:1);break;case"end":h[n]+=m*(t&&c?-1:1);break}return h}const st=async(i,e,t)=>{const{placement:o="bottom",strategy:l="absolute",middleware:s=[],platform:n}=t,r=s.filter(Boolean),a=await(n.isRTL==null?void 0:n.isRTL(e));let c=await n.getElementRects({reference:i,floating:e,strategy:l}),{x:p,y:d}=Te(c,o,a),m=o,h={},g=0;for(let v=0;v<r.length;v++){const{name:w,fn:b}=r[v],{x:_,y,data:k,reset:x}=await b({x:p,y:d,initialPlacement:o,placement:m,strategy:l,middlewareData:h,rects:c,platform:n,elements:{reference:i,floating:e}});p=_??p,d=y??d,h={...h,[w]:{...h[w],...k}},x&&g<=50&&(g++,typeof x=="object"&&(x.placement&&(m=x.placement),x.rects&&(c=x.rects===!0?await n.getElementRects({reference:i,floating:e,strategy:l}):x.rects),{x:p,y:d}=Te(c,m,a)),v=-1)}return{x:p,y:d,placement:m,strategy:l,middlewareData:h}};async function Me(i,e){var t;e===void 0&&(e={});const{x:o,y:l,platform:s,rects:n,elements:r,strategy:a}=i,{boundary:c="clippingAncestors",rootBoundary:p="viewport",elementContext:d="floating",altBoundary:m=!1,padding:h=0}=Q(e,i),g=lt(h),w=r[m?d==="floating"?"reference":"floating":d],b=ie(await s.getClippingRect({element:(t=await(s.isElement==null?void 0:s.isElement(w)))==null||t?w:w.contextElement||await(s.getDocumentElement==null?void 0:s.getDocumentElement(r.floating)),boundary:c,rootBoundary:p,strategy:a})),_=d==="floating"?{x:o,y:l,width:n.floating.width,height:n.floating.height}:n.reference,y=await(s.getOffsetParent==null?void 0:s.getOffsetParent(r.floating)),k=await(s.isElement==null?void 0:s.isElement(y))?await(s.getScale==null?void 0:s.getScale(y))||{x:1,y:1}:{x:1,y:1},x=ie(s.convertOffsetParentRelativeRectToViewportRelativeRect?await s.convertOffsetParentRelativeRectToViewportRelativeRect({elements:r,rect:_,offsetParent:y,strategy:a}):_);return{top:(b.top-x.top+g.top)/k.y,bottom:(x.bottom-b.bottom+g.bottom)/k.y,left:(b.left-x.left+g.left)/k.x,right:(x.right-b.right+g.right)/k.x}}const nt=function(i){return i===void 0&&(i={}),{name:"flip",options:i,async fn(e){var t,o;const{placement:l,middlewareData:s,rects:n,initialPlacement:r,platform:a,elements:c}=e,{mainAxis:p=!0,crossAxis:d=!0,fallbackPlacements:m,fallbackStrategy:h="bestFit",fallbackAxisSideDirection:g="none",flipAlignment:v=!0,...w}=Q(i,e);if((t=s.arrow)!=null&&t.alignmentOffset)return{};const b=N(l),_=$(r),y=N(r)===r,k=await(a.isRTL==null?void 0:a.isRTL(c.floating)),x=m||(y||!v?[te(r)]:Ze(r)),X=g!=="none";!m&&X&&x.push(...it(r,v,g,k));const G=[r,...x],ye=await Me(e,w),pe=[];let K=((o=s.flip)==null?void 0:o.overflows)||[];if(p&&pe.push(ye[b]),d){const F=qe(l,n,k);pe.push(ye[F[0]],ye[F[1]])}if(K=[...K,{placement:l,overflows:pe}],!pe.every(F=>F<=0)){var Ge,Ke;const F=(((Ge=s.flip)==null?void 0:Ge.index)||0)+1,xe=G[F];if(xe&&(!(d==="alignment"?_!==$(xe):!1)||K.every(M=>$(M.placement)===_?M.overflows[0]>0:!0)))return{data:{index:F,overflows:K},reset:{placement:xe}};let J=(Ke=K.filter(B=>B.overflows[0]<=0).sort((B,M)=>B.overflows[1]-M.overflows[1])[0])==null?void 0:Ke.placement;if(!J)switch(h){case"bestFit":{var Ue;const B=(Ue=K.filter(M=>{if(X){const z=$(M.placement);return z===_||z==="y"}return!0}).map(M=>[M.placement,M.overflows.filter(z=>z>0).reduce((z,zt)=>z+zt,0)]).sort((M,z)=>M[1]-z[1])[0])==null?void 0:Ue[0];B&&(J=B);break}case"initialPlacement":J=r;break}if(l!==J)return{reset:{placement:J}}}return{}}}},rt=new Set(["left","top"]);async function at(i,e){const{placement:t,platform:o,elements:l}=i,s=await(o.isRTL==null?void 0:o.isRTL(l.floating)),n=N(t),r=ee(t),a=$(t)==="y",c=rt.has(n)?-1:1,p=s&&a?-1:1,d=Q(e,i);let{mainAxis:m,crossAxis:h,alignmentAxis:g}=typeof d=="number"?{mainAxis:d,crossAxis:0,alignmentAxis:null}:{mainAxis:d.mainAxis||0,crossAxis:d.crossAxis||0,alignmentAxis:d.alignmentAxis};return r&&typeof g=="number"&&(h=r==="end"?g*-1:g),a?{x:h*p,y:m*c}:{x:m*c,y:h*p}}const ct=function(i){return i===void 0&&(i=0),{name:"offset",options:i,async fn(e){var t,o;const{x:l,y:s,placement:n,middlewareData:r}=e,a=await at(e,i);return n===((t=r.offset)==null?void 0:t.placement)&&(o=r.arrow)!=null&&o.alignmentOffset?{}:{x:l+a.x,y:s+a.y,data:{...a,placement:n}}}}},dt=function(i){return i===void 0&&(i={}),{name:"shift",options:i,async fn(e){const{x:t,y:o,placement:l}=e,{mainAxis:s=!0,crossAxis:n=!1,limiter:r={fn:w=>{let{x:b,y:_}=w;return{x:b,y:_}}},...a}=Q(i,e),c={x:t,y:o},p=await Me(e,a),d=$(N(l)),m=ke(d);let h=c[m],g=c[d];if(s){const w=m==="y"?"top":"left",b=m==="y"?"bottom":"right",_=h+p[w],y=h-p[b];h=Ce(_,h,y)}if(n){const w=d==="y"?"top":"left",b=d==="y"?"bottom":"right",_=g+p[w],y=g-p[b];g=Ce(_,g,y)}const v=r.fn({...e,[m]:h,[d]:g});return{...v,data:{x:v.x-t,y:v.y-o,enabled:{[m]:s,[d]:n}}}}}};function oe(){return typeof window<"u"}function H(i){return Ie(i)?(i.nodeName||"").toLowerCase():"#document"}function S(i){var e;return(i==null||(e=i.ownerDocument)==null?void 0:e.defaultView)||window}function E(i){var e;return(e=(Ie(i)?i.ownerDocument:i.document)||window.document)==null?void 0:e.documentElement}function Ie(i){return oe()?i instanceof Node||i instanceof S(i).Node:!1}function P(i){return oe()?i instanceof Element||i instanceof S(i).Element:!1}function V(i){return oe()?i instanceof HTMLElement||i instanceof S(i).HTMLElement:!1}function Ee(i){return!oe()||typeof ShadowRoot>"u"?!1:i instanceof ShadowRoot||i instanceof S(i).ShadowRoot}const pt=new Set(["inline","contents"]);function U(i){const{overflow:e,overflowX:t,overflowY:o,display:l}=T(i);return/auto|scroll|overlay|hidden|clip/.test(e+o+t)&&!pt.has(l)}const ht=new Set(["table","td","th"]);function ut(i){return ht.has(H(i))}const mt=[":popover-open",":modal"];function le(i){return mt.some(e=>{try{return i.matches(e)}catch{return!1}})}const ft=["transform","translate","scale","rotate","perspective"],gt=["transform","translate","scale","rotate","perspective","filter"],bt=["paint","layout","strict","content"];function ue(i){const e=me(),t=P(i)?T(i):i;return ft.some(o=>t[o]?t[o]!=="none":!1)||(t.containerType?t.containerType!=="normal":!1)||!e&&(t.backdropFilter?t.backdropFilter!=="none":!1)||!e&&(t.filter?t.filter!=="none":!1)||gt.some(o=>(t.willChange||"").includes(o))||bt.some(o=>(t.contain||"").includes(o))}function vt(i){let e=D(i);for(;V(e)&&!W(e);){if(ue(e))return e;if(le(e))return null;e=D(e)}return null}function me(){return typeof CSS>"u"||!CSS.supports?!1:CSS.supports("-webkit-backdrop-filter","none")}const wt=new Set(["html","body","#document"]);function W(i){return wt.has(H(i))}function T(i){return S(i).getComputedStyle(i)}function se(i){return P(i)?{scrollLeft:i.scrollLeft,scrollTop:i.scrollTop}:{scrollLeft:i.scrollX,scrollTop:i.scrollY}}function D(i){if(H(i)==="html")return i;const e=i.assignedSlot||i.parentNode||Ee(i)&&i.host||E(i);return Ee(e)?e.host:e}function Ve(i){const e=D(i);return W(e)?i.ownerDocument?i.ownerDocument.body:i.body:V(e)&&U(e)?e:Ve(e)}function Y(i,e,t){var o;e===void 0&&(e=[]),t===void 0&&(t=!0);const l=Ve(i),s=l===((o=i.ownerDocument)==null?void 0:o.body),n=S(l);if(s){const r=fe(n);return e.concat(n,n.visualViewport||[],U(l)?l:[],r&&t?Y(r):[])}return e.concat(l,Y(l,[],t))}function fe(i){return i.parent&&Object.getPrototypeOf(i.parent)?i.frameElement:null}function $e(i){const e=T(i);let t=parseFloat(e.width)||0,o=parseFloat(e.height)||0;const l=V(i),s=l?i.offsetWidth:t,n=l?i.offsetHeight:o,r=q(t)!==s||q(o)!==n;return r&&(t=s,o=n),{width:t,height:o,$:r}}function ge(i){return P(i)?i:i.contextElement}function j(i){const e=ge(i);if(!V(e))return I(1);const t=e.getBoundingClientRect(),{width:o,height:l,$:s}=$e(e);let n=(s?q(t.width):t.width)/o,r=(s?q(t.height):t.height)/l;return(!n||!Number.isFinite(n))&&(n=1),(!r||!Number.isFinite(r))&&(r=1),{x:n,y:r}}const _t=I(0);function De(i){const e=S(i);return!me()||!e.visualViewport?_t:{x:e.visualViewport.offsetLeft,y:e.visualViewport.offsetTop}}function yt(i,e,t){return e===void 0&&(e=!1),!t||e&&t!==S(i)?!1:e}function R(i,e,t,o){e===void 0&&(e=!1),t===void 0&&(t=!1);const l=i.getBoundingClientRect(),s=ge(i);let n=I(1);e&&(o?P(o)&&(n=j(o)):n=j(i));const r=yt(s,t,o)?De(s):I(0);let a=(l.left+r.x)/n.x,c=(l.top+r.y)/n.y,p=l.width/n.x,d=l.height/n.y;if(s){const m=S(s),h=o&&P(o)?S(o):o;let g=m,v=fe(g);for(;v&&o&&h!==g;){const w=j(v),b=v.getBoundingClientRect(),_=T(v),y=b.left+(v.clientLeft+parseFloat(_.paddingLeft))*w.x,k=b.top+(v.clientTop+parseFloat(_.paddingTop))*w.y;a*=w.x,c*=w.y,p*=w.x,d*=w.y,a+=y,c+=k,g=S(v),v=fe(g)}}return ie({width:p,height:d,x:a,y:c})}function ne(i,e){const t=se(i).scrollLeft;return e?e.left+t:R(E(i)).left+t}function Le(i,e){const t=i.getBoundingClientRect(),o=t.left+e.scrollLeft-ne(i,t),l=t.top+e.scrollTop;return{x:o,y:l}}function xt(i){let{elements:e,rect:t,offsetParent:o,strategy:l}=i;const s=l==="fixed",n=E(o),r=e?le(e.floating):!1;if(o===n||r&&s)return t;let a={scrollLeft:0,scrollTop:0},c=I(1);const p=I(0),d=V(o);if((d||!d&&!s)&&((H(o)!=="body"||U(n))&&(a=se(o)),V(o))){const h=R(o);c=j(o),p.x=h.x+o.clientLeft,p.y=h.y+o.clientTop}const m=n&&!d&&!s?Le(n,a):I(0);return{width:t.width*c.x,height:t.height*c.y,x:t.x*c.x-a.scrollLeft*c.x+p.x+m.x,y:t.y*c.y-a.scrollTop*c.y+p.y+m.y}}function Ct(i){return Array.from(i.getClientRects())}function kt(i){const e=E(i),t=se(i),o=i.ownerDocument.body,l=O(e.scrollWidth,e.clientWidth,o.scrollWidth,o.clientWidth),s=O(e.scrollHeight,e.clientHeight,o.scrollHeight,o.clientHeight);let n=-t.scrollLeft+ne(i);const r=-t.scrollTop;return T(o).direction==="rtl"&&(n+=O(e.clientWidth,o.clientWidth)-l),{width:l,height:s,x:n,y:r}}const ze=25;function At(i,e){const t=S(i),o=E(i),l=t.visualViewport;let s=o.clientWidth,n=o.clientHeight,r=0,a=0;if(l){s=l.width,n=l.height;const p=me();(!p||p&&e==="fixed")&&(r=l.offsetLeft,a=l.offsetTop)}const c=ne(o);if(c<=0){const p=o.ownerDocument,d=p.body,m=getComputedStyle(d),h=p.compatMode==="CSS1Compat"&&parseFloat(m.marginLeft)+parseFloat(m.marginRight)||0,g=Math.abs(o.clientWidth-d.clientWidth-h);g<=ze&&(s-=g)}else c<=ze&&(s+=c);return{width:s,height:n,x:r,y:a}}const St=new Set(["absolute","fixed"]);function Ot(i,e){const t=R(i,!0,e==="fixed"),o=t.top+i.clientTop,l=t.left+i.clientLeft,s=V(i)?j(i):I(1),n=i.clientWidth*s.x,r=i.clientHeight*s.y,a=l*s.x,c=o*s.y;return{width:n,height:r,x:a,y:c}}function Ne(i,e,t){let o;if(e==="viewport")o=At(i,t);else if(e==="document")o=kt(E(i));else if(P(e))o=Ot(e,t);else{const l=De(i);o={x:e.x-l.x,y:e.y-l.y,width:e.width,height:e.height}}return ie(o)}function Re(i,e){const t=D(i);return t===e||!P(t)||W(t)?!1:T(t).position==="fixed"||Re(t,e)}function Pt(i,e){const t=e.get(i);if(t)return t;let o=Y(i,[],!1).filter(r=>P(r)&&H(r)!=="body"),l=null;const s=T(i).position==="fixed";let n=s?D(i):i;for(;P(n)&&!W(n);){const r=T(n),a=ue(n);!a&&r.position==="fixed"&&(l=null),(s?!a&&!l:!a&&r.position==="static"&&!!l&&St.has(l.position)||U(n)&&!a&&Re(i,n))?o=o.filter(p=>p!==n):l=r,n=D(n)}return e.set(i,o),o}function Tt(i){let{element:e,boundary:t,rootBoundary:o,strategy:l}=i;const n=[...t==="clippingAncestors"?le(e)?[]:Pt(e,this._c):[].concat(t),o],r=n[0],a=n.reduce((c,p)=>{const d=Ne(e,p,l);return c.top=O(d.top,c.top),c.right=C(d.right,c.right),c.bottom=C(d.bottom,c.bottom),c.left=O(d.left,c.left),c},Ne(e,r,l));return{width:a.right-a.left,height:a.bottom-a.top,x:a.left,y:a.top}}function Mt(i){const{width:e,height:t}=$e(i);return{width:e,height:t}}function It(i,e,t){const o=V(e),l=E(e),s=t==="fixed",n=R(i,!0,s,e);let r={scrollLeft:0,scrollTop:0};const a=I(0);function c(){a.x=ne(l)}if(o||!o&&!s)if((H(e)!=="body"||U(l))&&(r=se(e)),o){const h=R(e,!0,s,e);a.x=h.x+e.clientLeft,a.y=h.y+e.clientTop}else l&&c();s&&!o&&l&&c();const p=l&&!o&&!s?Le(l,r):I(0),d=n.left+r.scrollLeft-a.x-p.x,m=n.top+r.scrollTop-a.y-p.y;return{x:d,y:m,width:n.width,height:n.height}}function be(i){return T(i).position==="static"}function Fe(i,e){if(!V(i)||T(i).position==="fixed")return null;if(e)return e(i);let t=i.offsetParent;return E(i)===t&&(t=t.ownerDocument.body),t}function Be(i,e){const t=S(i);if(le(i))return t;if(!V(i)){let l=D(i);for(;l&&!W(l);){if(P(l)&&!be(l))return l;l=D(l)}return t}let o=Fe(i,e);for(;o&&ut(o)&&be(o);)o=Fe(o,e);return o&&W(o)&&be(o)&&!ue(o)?t:o||vt(i)||t}const Et=async function(i){const e=this.getOffsetParent||Be,t=this.getDimensions,o=await t(i.floating);return{reference:It(i.reference,await e(i.floating),i.strategy),floating:{x:0,y:0,width:o.width,height:o.height}}};function Vt(i){return T(i).direction==="rtl"}const $t={convertOffsetParentRelativeRectToViewportRelativeRect:xt,getDocumentElement:E,getClippingRect:Tt,getOffsetParent:Be,getElementRects:Et,getClientRects:Ct,getDimensions:Mt,getScale:j,isElement:P,isRTL:Vt};function He(i,e){return i.x===e.x&&i.y===e.y&&i.width===e.width&&i.height===e.height}function Dt(i,e){let t=null,o;const l=E(i);function s(){var r;clearTimeout(o),(r=t)==null||r.disconnect(),t=null}function n(r,a){r===void 0&&(r=!1),a===void 0&&(a=1),s();const c=i.getBoundingClientRect(),{left:p,top:d,width:m,height:h}=c;if(r||e(),!m||!h)return;const g=Z(d),v=Z(l.clientWidth-(p+m)),w=Z(l.clientHeight-(d+h)),b=Z(p),y={rootMargin:-g+"px "+-v+"px "+-w+"px "+-b+"px",threshold:O(0,C(1,a))||1};let k=!0;function x(X){const G=X[0].intersectionRatio;if(G!==a){if(!k)return n();G?n(!1,G):o=setTimeout(()=>{n(!1,1e-7)},1e3)}G===1&&!He(c,i.getBoundingClientRect())&&n(),k=!1}try{t=new IntersectionObserver(x,{...y,root:l.ownerDocument})}catch{t=new IntersectionObserver(x,y)}t.observe(i)}return n(!0),s}function re(i,e,t,o){o===void 0&&(o={});const{ancestorScroll:l=!0,ancestorResize:s=!0,elementResize:n=typeof ResizeObserver=="function",layoutShift:r=typeof IntersectionObserver=="function",animationFrame:a=!1}=o,c=ge(i),p=l||s?[...c?Y(c):[],...Y(e)]:[];p.forEach(b=>{l&&b.addEventListener("scroll",t,{passive:!0}),s&&b.addEventListener("resize",t)});const d=c&&r?Dt(c,t):null;let m=-1,h=null;n&&(h=new ResizeObserver(b=>{let[_]=b;_&&_.target===c&&h&&(h.unobserve(e),cancelAnimationFrame(m),m=requestAnimationFrame(()=>{var y;(y=h)==null||y.observe(e)})),t()}),c&&!a&&h.observe(c),h.observe(e));let g,v=a?R(i):null;a&&w();function w(){const b=R(i);v&&!He(v,b)&&t(),v=b,g=requestAnimationFrame(w)}return t(),()=>{var b;p.forEach(_=>{l&&_.removeEventListener("scroll",t),s&&_.removeEventListener("resize",t)}),d==null||d(),(b=h)==null||b.disconnect(),h=null,a&&cancelAnimationFrame(g)}}const ae=ct,ce=dt,ve=nt,de=(i,e,t)=>{const o=new Map,l={platform:$t,...t},s={...l.platform,_c:o};return st(i,e,{...l,platform:s})};let L=0;const f={debug:(i,...e)=>{L++,console.log(`%c[MultiSelect ${L}]%c ${i}`,"color: #0ea5e9; font-weight: bold;","color: inherit;",...e)},info:(i,...e)=>{L++,console.info(`%c[MultiSelect ${L}]%c ${i}`,"color: #10b981; font-weight: bold;","color: inherit;",...e)},warn:(i,...e)=>{L++,console.warn(`%c[MultiSelect ${L}]%c ${i}`,"color: #f59e0b; font-weight: bold;","color: inherit;",...e)},error:(i,...e)=>{L++,console.error(`%c[MultiSelect ${L}]%c ${i}`,"color: #ef4444; font-weight: bold;","color: inherit;",...e)}};class We{constructor(e,t={}){u(this,"element");u(this,"instanceId");u(this,"options");u(this,"isOpen",!1);u(this,"selectedValues",new Set);u(this,"selectedOptions",new Map);u(this,"allOptions",[]);u(this,"filteredOptions",[]);u(this,"hiddenInputs",[]);u(this,"focusedIndex",-1);u(this,"searchTerm","");u(this,"isLoading",!1);u(this,"showSelectedPopover",!1);u(this,"selectedPopoverPlacement",null);u(this,"dropdownPlacement",null);u(this,"dropdownCleanup",null);u(this,"hintCleanup",null);u(this,"selectedPopoverCleanup",null);u(this,"pillTooltips",new Map);u(this,"pillTooltipCleanups",new Map);u(this,"input");u(this,"dropdown");u(this,"pillsContainer");u(this,"countBadge");u(this,"hint");u(this,"selectedPopover");this.element=e,this.instanceId=`MS-${Math.random().toString(36).substr(2,9)}`,this.options={searchHint:e.dataset.searchHint||"",searchPlaceholder:e.dataset.searchPlaceholder||"Search...",dropdownMinWidth:e.dataset.dropdownMinWidth||void 0,pillsDisplayMode:e.dataset.pillsDisplayMode||"pills",pillsPosition:e.dataset.pillsPosition||"bottom",pillsThresholdMode:e.dataset.pillsThresholdMode||"count",maxHeight:e.dataset.maxHeight||"20rem",emptyMessage:e.dataset.emptyMessage||"No results found",loadingMessage:e.dataset.loadingMessage||"Loading...",searchInputMode:e.dataset.searchInputMode||"normal",pillsThreshold:e.dataset.pillsThreshold?parseInt(e.dataset.pillsThreshold):void 0,minSearchLength:parseInt(e.dataset.minSearchLength||"0")||0,isMultipleEnabled:e.dataset.multiple!=="false",isGroupsAllowed:e.dataset.allowGroups!=="false",isSelectAllAllowed:e.dataset.allowSelectAll!=="false",isClearAllAllowed:e.dataset.allowClearAll!=="false",isCheckboxesShown:e.dataset.showCheckboxes!=="false",isActionsSticky:e.dataset.stickyActions!=="false",isCloseOnSelect:e.dataset.closeOnSelect==="true",isPlacementLocked:e.dataset.lockPlacement!=="false",isSearchEnabled:e.dataset.enableSearch!=="false",isAddNewAllowed:e.dataset.allowAddNew==="true",isCountBadgeShown:e.dataset.showCountBadge==="true",options:[],container:void 0,...t},this.init()}getItemValue(e){return Array.isArray(e)&&e.length===2?e[0]:this.options.valueMember&&e[this.options.valueMember]!==void 0?e[this.options.valueMember]:this.options.getValueCallback?this.options.getValueCallback(e):"[N/A]"}getItemDisplayValue(e){return Array.isArray(e)&&e.length===2?String(e[1]):this.options.displayValueMember&&e[this.options.displayValueMember]!==void 0?String(e[this.options.displayValueMember]):this.options.getDisplayValueCallback?this.options.getDisplayValueCallback(e):"[N/A]"}getItemSearchValue(e){return this.options.searchValueMember&&e[this.options.searchValueMember]!==void 0?String(e[this.options.searchValueMember]):this.options.getSearchValueCallback?this.options.getSearchValueCallback(e):this.getItemDisplayValue(e)}getItemIcon(e){if(!Array.isArray(e)){if(this.options.iconMember&&e[this.options.iconMember]!==void 0)return String(e[this.options.iconMember]);if(this.options.getIconCallback)return this.options.getIconCallback(e)}}getItemSubtitle(e){if(!Array.isArray(e)){if(this.options.subtitleMember&&e[this.options.subtitleMember]!==void 0)return String(e[this.options.subtitleMember]);if(this.options.getSubtitleCallback)return this.options.getSubtitleCallback(e)}}getItemGroup(e){if(!Array.isArray(e)){if(this.options.groupMember&&e[this.options.groupMember]!==void 0)return String(e[this.options.groupMember]);if(this.options.getGroupCallback)return this.options.getGroupCallback(e)}}getItemDisabled(e){return Array.isArray(e)?!1:this.options.disabledMember&&e[this.options.disabledMember]!==void 0?!!e[this.options.disabledMember]:this.options.getDisabledCallback?this.options.getDisabledCallback(e):!1}init(){this.parseOptions(),this.buildHTML(),this.attachEvents(),this.parseInitialSelection(),f.debug(`Initialized [${this.instanceId}] with options:`,{placeholder:this.options.searchPlaceholder,totalOptions:this.allOptions.length,isCloseOnSelect:this.options.isCloseOnSelect,dataAttribute:this.element.dataset.closeOnSelect,isSelectAllAllowed:this.options.isSelectAllAllowed,isClearAllAllowed:this.options.isClearAllAllowed})}parseOptions(){const e=this.element.dataset.options;if(e)try{this.allOptions=JSON.parse(e)}catch(t){console.error("[MultiSelect] Failed to parse data-options:",t),this.allOptions=[]}else this.options.options&&(this.allOptions=this.options.options);this.filteredOptions=[...this.allOptions]}buildHTML(){const e=this.options.container||document.body;this.element.classList.add("ml"),(!this.options.isCheckboxesShown||!this.options.isMultipleEnabled)&&this.element.classList.add("ml--no-checkboxes");const t=document.createElement("div");t.className="ml__input-wrapper",this.input=document.createElement("input"),this.input.type="text",this.input.className="ml__input",this.input.placeholder=this.options.searchPlaceholder,this.input.autocomplete="off",this.options.searchInputMode==="readonly"?this.input.readOnly=!0:this.options.searchInputMode==="hidden"&&(this.input.style.display="none");const o=document.createElement("span");o.className="ml__toggle",o.innerHTML="▼",this.countBadge=document.createElement("span"),this.countBadge.className="ml__count-badge",this.countBadge.style.display="none",t.appendChild(this.input),t.appendChild(this.countBadge),t.appendChild(o),this.pillsContainer=document.createElement("div"),this.pillsContainer.className="ml__pills",this.element.appendChild(t),this.element.appendChild(this.pillsContainer),this.dropdown=document.createElement("div"),this.dropdown.className="ml__dropdown",e.appendChild(this.dropdown),this.options.searchHint&&(this.hint=document.createElement("div"),this.hint.className="ml__hint",this.hint.textContent=this.options.searchHint,e.appendChild(this.hint)),this.selectedPopover=document.createElement("div"),this.selectedPopover.className="ml__selected-popover",e.appendChild(this.selectedPopover),this.renderDropdown()}renderDropdown(){let e="";if(this.isLoading){e+='<div class="ml__loader">',e+='<div class="pa-loader pa-loader--sm"></div>',e+=`<div class="ml__loading-text">${this.options.loadingMessage}</div>`,e+="</div>",this.dropdown.innerHTML=e;return}if(this.options.isMultipleEnabled&&(this.options.isSelectAllAllowed||this.options.isClearAllAllowed)){const t=this.options.isActionsSticky?" ml__actions--sticky":"";e+=`<div class="ml__actions${t}">`,this.options.isSelectAllAllowed&&(e+='<button type="button" class="ml__action-btn" data-action="select-all">Select All</button>'),this.options.isClearAllAllowed&&(e+='<button type="button" class="ml__action-btn" data-action="clear-all">Clear All</button>'),e+="</div>"}if(e+='<div class="ml__options">',this.filteredOptions.length===0)e+=`<div class="ml__empty">${this.options.emptyMessage}</div>`;else if(this.options.isGroupsAllowed){const t=this.groupOptions(this.filteredOptions);Object.keys(t).forEach(o=>{e+='<div class="ml__group">',o!=="__ungrouped__"&&(e+=`<div class="ml__group-label">${o}</div>`),t[o].forEach((l,s)=>{e+=this.renderOption(l,s)}),e+="</div>"})}else this.filteredOptions.forEach((t,o)=>{e+=this.renderOption(t,o)});e+="</div>",this.dropdown.innerHTML=e}renderOption(e,t){const o=this.getItemValue(e),l=this.getItemDisplayValue(e),s=this.getItemIcon(e),n=this.getItemSubtitle(e),r=this.getItemDisabled(e),a=this.selectedValues.has(String(o)),c=t===this.focusedIndex,p=["ml__option"];a&&p.push("ml__option--selected"),c&&p.push("ml__option--focused"),r&&p.push("ml__option--disabled");let d=`<div class="${p.join(" ")}" data-value="${o}" data-index="${t}">`;return this.options.isCheckboxesShown&&this.options.isMultipleEnabled&&(d+=`<input type="checkbox" class="ml__checkbox" ${a?"checked":""} ${r?"disabled":""}>`),d+='<div class="ml__option-content">',s&&(d+=`<span class="ml__option-icon">${s}</span>`),d+='<div class="ml__option-text">',d+=`<div class="ml__option-title">${this.highlightMatch(l,this.searchTerm)}</div>`,n&&(d+=`<div class="ml__option-subtitle">${n}</div>`),d+="</div>",d+="</div>",d+="</div>",d}highlightMatch(e,t){if(!t)return e;const o=new RegExp(`(${t.replace(/[.*+?^${}()|[\]\\]/g,"\\$&")})`,"gi");return e.replace(o,"<mark>$1</mark>")}groupOptions(e){const t={};return e.forEach(o=>{const l=this.getItemGroup(o)||"__ungrouped__";t[l]||(t[l]=[]),t[l].push(o)}),t}renderPills(){this.destroyAllPillTooltips();const e=Array.from(this.selectedOptions.values()),t=this.selectedValues.size;if(!this.options.isMultipleEnabled){this.pillsContainer.innerHTML="",this.countBadge.style.display="none";const s=e[0]?this.getItemDisplayValue(e[0]):void 0;f.warn(`[${this.instanceId}] renderPills() single-select mode`,{isOpen:this.isOpen,count:t,selectedOptionsLength:e.length,willSetValue:!this.isOpen&&t>0&&e.length>0,selectedLabel:s}),!this.isOpen&&t>0&&e.length>0?(f.info(`[${this.instanceId}] ✅ SETTING input.value = "${s}"`),this.input.value=s,f.info(`[${this.instanceId}] 🔍 VERIFY input.value = "${this.input.value}"`)):this.isOpen?f.info(`[${this.instanceId}] ⏭️ SKIPPING input update (dropdown is open)`):(f.info(`[${this.instanceId}] ❌ CLEARING input.value (no selection)`),this.input.value="");return}let o=this.options.pillsDisplayMode;if(this.options.pillsThreshold!==null&&t>this.options.pillsThreshold&&(o=this.options.pillsThresholdMode||"count"),!this.isOpen)if(t>0&&o==="count"){const s=this.options.getCountPillCallback?this.options.getCountPillCallback(t):`${t} selected`;this.input.placeholder=s}else this.input.placeholder=this.options.searchPlaceholder;if(this.options.isCountBadgeShown&&t>0?(this.countBadge.textContent=`[${t}]`,this.countBadge.style.display=""):this.countBadge.style.display="none",o==="pills")this.pillsContainer.className=`ml__pills ml__pills--${this.options.pillsPosition}`,this.pillsContainer.innerHTML=e.map(s=>{const n=this.getItemValue(s),r=this.getItemDisplayValue(s);return`
|
|
1
|
+
(function(A,C){typeof exports=="object"&&typeof module<"u"?C(exports):typeof define=="function"&&define.amd?define(["exports"],C):(A=typeof globalThis<"u"?globalThis:A||self,C(A.MultiSelect={}))})(this,function(A){"use strict";var Rt=Object.defineProperty;var Ft=(A,C,O)=>C in A?Rt(A,C,{enumerable:!0,configurable:!0,writable:!0,value:O}):A[C]=O;var u=(A,C,O)=>Ft(A,typeof C!="symbol"?C+"":C,O);const C=Math.min,O=Math.max,q=Math.round,Z=Math.floor,I=i=>({x:i,y:i}),Ye={left:"right",right:"left",bottom:"top",top:"bottom"},Xe={start:"end",end:"start"};function Ce(i,e,t){return O(i,C(e,t))}function Q(i,e){return typeof i=="function"?i(e):i}function N(i){return i.split("-")[0]}function ee(i){return i.split("-")[1]}function ke(i){return i==="x"?"y":"x"}function Ae(i){return i==="y"?"height":"width"}const Je=new Set(["top","bottom"]);function $(i){return Je.has(N(i))?"y":"x"}function Se(i){return ke($(i))}function qe(i,e,t){t===void 0&&(t=!1);const o=ee(i),l=Se(i),s=Ae(l);let n=l==="x"?o===(t?"end":"start")?"right":"left":o==="start"?"bottom":"top";return e.reference[s]>e.floating[s]&&(n=te(n)),[n,te(n)]}function Ze(i){const e=te(i);return[he(i),e,he(e)]}function he(i){return i.replace(/start|end/g,e=>Xe[e])}const Oe=["left","right"],Pe=["right","left"],Qe=["top","bottom"],et=["bottom","top"];function tt(i,e,t){switch(i){case"top":case"bottom":return t?e?Pe:Oe:e?Oe:Pe;case"left":case"right":return e?Qe:et;default:return[]}}function it(i,e,t,o){const l=ee(i);let s=tt(N(i),t==="start",o);return l&&(s=s.map(n=>n+"-"+l),e&&(s=s.concat(s.map(he)))),s}function te(i){return i.replace(/left|right|bottom|top/g,e=>Ye[e])}function ot(i){return{top:0,right:0,bottom:0,left:0,...i}}function lt(i){return typeof i!="number"?ot(i):{top:i,right:i,bottom:i,left:i}}function ie(i){const{x:e,y:t,width:o,height:l}=i;return{width:o,height:l,top:t,left:e,right:e+o,bottom:t+l,x:e,y:t}}function Te(i,e,t){let{reference:o,floating:l}=i;const s=$(e),n=Se(e),r=Ae(n),a=N(e),c=s==="y",p=o.x+o.width/2-l.width/2,d=o.y+o.height/2-l.height/2,m=o[r]/2-l[r]/2;let h;switch(a){case"top":h={x:p,y:o.y-l.height};break;case"bottom":h={x:p,y:o.y+o.height};break;case"right":h={x:o.x+o.width,y:d};break;case"left":h={x:o.x-l.width,y:d};break;default:h={x:o.x,y:o.y}}switch(ee(e)){case"start":h[n]-=m*(t&&c?-1:1);break;case"end":h[n]+=m*(t&&c?-1:1);break}return h}const st=async(i,e,t)=>{const{placement:o="bottom",strategy:l="absolute",middleware:s=[],platform:n}=t,r=s.filter(Boolean),a=await(n.isRTL==null?void 0:n.isRTL(e));let c=await n.getElementRects({reference:i,floating:e,strategy:l}),{x:p,y:d}=Te(c,o,a),m=o,h={},g=0;for(let v=0;v<r.length;v++){const{name:w,fn:b}=r[v],{x:_,y,data:k,reset:x}=await b({x:p,y:d,initialPlacement:o,placement:m,strategy:l,middlewareData:h,rects:c,platform:n,elements:{reference:i,floating:e}});p=_??p,d=y??d,h={...h,[w]:{...h[w],...k}},x&&g<=50&&(g++,typeof x=="object"&&(x.placement&&(m=x.placement),x.rects&&(c=x.rects===!0?await n.getElementRects({reference:i,floating:e,strategy:l}):x.rects),{x:p,y:d}=Te(c,m,a)),v=-1)}return{x:p,y:d,placement:m,strategy:l,middlewareData:h}};async function Me(i,e){var t;e===void 0&&(e={});const{x:o,y:l,platform:s,rects:n,elements:r,strategy:a}=i,{boundary:c="clippingAncestors",rootBoundary:p="viewport",elementContext:d="floating",altBoundary:m=!1,padding:h=0}=Q(e,i),g=lt(h),w=r[m?d==="floating"?"reference":"floating":d],b=ie(await s.getClippingRect({element:(t=await(s.isElement==null?void 0:s.isElement(w)))==null||t?w:w.contextElement||await(s.getDocumentElement==null?void 0:s.getDocumentElement(r.floating)),boundary:c,rootBoundary:p,strategy:a})),_=d==="floating"?{x:o,y:l,width:n.floating.width,height:n.floating.height}:n.reference,y=await(s.getOffsetParent==null?void 0:s.getOffsetParent(r.floating)),k=await(s.isElement==null?void 0:s.isElement(y))?await(s.getScale==null?void 0:s.getScale(y))||{x:1,y:1}:{x:1,y:1},x=ie(s.convertOffsetParentRelativeRectToViewportRelativeRect?await s.convertOffsetParentRelativeRectToViewportRelativeRect({elements:r,rect:_,offsetParent:y,strategy:a}):_);return{top:(b.top-x.top+g.top)/k.y,bottom:(x.bottom-b.bottom+g.bottom)/k.y,left:(b.left-x.left+g.left)/k.x,right:(x.right-b.right+g.right)/k.x}}const nt=function(i){return i===void 0&&(i={}),{name:"flip",options:i,async fn(e){var t,o;const{placement:l,middlewareData:s,rects:n,initialPlacement:r,platform:a,elements:c}=e,{mainAxis:p=!0,crossAxis:d=!0,fallbackPlacements:m,fallbackStrategy:h="bestFit",fallbackAxisSideDirection:g="none",flipAlignment:v=!0,...w}=Q(i,e);if((t=s.arrow)!=null&&t.alignmentOffset)return{};const b=N(l),_=$(r),y=N(r)===r,k=await(a.isRTL==null?void 0:a.isRTL(c.floating)),x=m||(y||!v?[te(r)]:Ze(r)),X=g!=="none";!m&&X&&x.push(...it(r,v,g,k));const G=[r,...x],ye=await Me(e,w),pe=[];let K=((o=s.flip)==null?void 0:o.overflows)||[];if(p&&pe.push(ye[b]),d){const F=qe(l,n,k);pe.push(ye[F[0]],ye[F[1]])}if(K=[...K,{placement:l,overflows:pe}],!pe.every(F=>F<=0)){var Ge,Ke;const F=(((Ge=s.flip)==null?void 0:Ge.index)||0)+1,xe=G[F];if(xe&&(!(d==="alignment"?_!==$(xe):!1)||K.every(M=>$(M.placement)===_?M.overflows[0]>0:!0)))return{data:{index:F,overflows:K},reset:{placement:xe}};let J=(Ke=K.filter(B=>B.overflows[0]<=0).sort((B,M)=>B.overflows[1]-M.overflows[1])[0])==null?void 0:Ke.placement;if(!J)switch(h){case"bestFit":{var Ue;const B=(Ue=K.filter(M=>{if(X){const z=$(M.placement);return z===_||z==="y"}return!0}).map(M=>[M.placement,M.overflows.filter(z=>z>0).reduce((z,Nt)=>z+Nt,0)]).sort((M,z)=>M[1]-z[1])[0])==null?void 0:Ue[0];B&&(J=B);break}case"initialPlacement":J=r;break}if(l!==J)return{reset:{placement:J}}}return{}}}},rt=new Set(["left","top"]);async function at(i,e){const{placement:t,platform:o,elements:l}=i,s=await(o.isRTL==null?void 0:o.isRTL(l.floating)),n=N(t),r=ee(t),a=$(t)==="y",c=rt.has(n)?-1:1,p=s&&a?-1:1,d=Q(e,i);let{mainAxis:m,crossAxis:h,alignmentAxis:g}=typeof d=="number"?{mainAxis:d,crossAxis:0,alignmentAxis:null}:{mainAxis:d.mainAxis||0,crossAxis:d.crossAxis||0,alignmentAxis:d.alignmentAxis};return r&&typeof g=="number"&&(h=r==="end"?g*-1:g),a?{x:h*p,y:m*c}:{x:m*c,y:h*p}}const ct=function(i){return i===void 0&&(i=0),{name:"offset",options:i,async fn(e){var t,o;const{x:l,y:s,placement:n,middlewareData:r}=e,a=await at(e,i);return n===((t=r.offset)==null?void 0:t.placement)&&(o=r.arrow)!=null&&o.alignmentOffset?{}:{x:l+a.x,y:s+a.y,data:{...a,placement:n}}}}},dt=function(i){return i===void 0&&(i={}),{name:"shift",options:i,async fn(e){const{x:t,y:o,placement:l}=e,{mainAxis:s=!0,crossAxis:n=!1,limiter:r={fn:w=>{let{x:b,y:_}=w;return{x:b,y:_}}},...a}=Q(i,e),c={x:t,y:o},p=await Me(e,a),d=$(N(l)),m=ke(d);let h=c[m],g=c[d];if(s){const w=m==="y"?"top":"left",b=m==="y"?"bottom":"right",_=h+p[w],y=h-p[b];h=Ce(_,h,y)}if(n){const w=d==="y"?"top":"left",b=d==="y"?"bottom":"right",_=g+p[w],y=g-p[b];g=Ce(_,g,y)}const v=r.fn({...e,[m]:h,[d]:g});return{...v,data:{x:v.x-t,y:v.y-o,enabled:{[m]:s,[d]:n}}}}}};function oe(){return typeof window<"u"}function H(i){return Ie(i)?(i.nodeName||"").toLowerCase():"#document"}function S(i){var e;return(i==null||(e=i.ownerDocument)==null?void 0:e.defaultView)||window}function E(i){var e;return(e=(Ie(i)?i.ownerDocument:i.document)||window.document)==null?void 0:e.documentElement}function Ie(i){return oe()?i instanceof Node||i instanceof S(i).Node:!1}function P(i){return oe()?i instanceof Element||i instanceof S(i).Element:!1}function V(i){return oe()?i instanceof HTMLElement||i instanceof S(i).HTMLElement:!1}function Ee(i){return!oe()||typeof ShadowRoot>"u"?!1:i instanceof ShadowRoot||i instanceof S(i).ShadowRoot}const pt=new Set(["inline","contents"]);function U(i){const{overflow:e,overflowX:t,overflowY:o,display:l}=T(i);return/auto|scroll|overlay|hidden|clip/.test(e+o+t)&&!pt.has(l)}const ht=new Set(["table","td","th"]);function ut(i){return ht.has(H(i))}const mt=[":popover-open",":modal"];function le(i){return mt.some(e=>{try{return i.matches(e)}catch{return!1}})}const ft=["transform","translate","scale","rotate","perspective"],gt=["transform","translate","scale","rotate","perspective","filter"],bt=["paint","layout","strict","content"];function ue(i){const e=me(),t=P(i)?T(i):i;return ft.some(o=>t[o]?t[o]!=="none":!1)||(t.containerType?t.containerType!=="normal":!1)||!e&&(t.backdropFilter?t.backdropFilter!=="none":!1)||!e&&(t.filter?t.filter!=="none":!1)||gt.some(o=>(t.willChange||"").includes(o))||bt.some(o=>(t.contain||"").includes(o))}function vt(i){let e=D(i);for(;V(e)&&!W(e);){if(ue(e))return e;if(le(e))return null;e=D(e)}return null}function me(){return typeof CSS>"u"||!CSS.supports?!1:CSS.supports("-webkit-backdrop-filter","none")}const wt=new Set(["html","body","#document"]);function W(i){return wt.has(H(i))}function T(i){return S(i).getComputedStyle(i)}function se(i){return P(i)?{scrollLeft:i.scrollLeft,scrollTop:i.scrollTop}:{scrollLeft:i.scrollX,scrollTop:i.scrollY}}function D(i){if(H(i)==="html")return i;const e=i.assignedSlot||i.parentNode||Ee(i)&&i.host||E(i);return Ee(e)?e.host:e}function Ve(i){const e=D(i);return W(e)?i.ownerDocument?i.ownerDocument.body:i.body:V(e)&&U(e)?e:Ve(e)}function Y(i,e,t){var o;e===void 0&&(e=[]),t===void 0&&(t=!0);const l=Ve(i),s=l===((o=i.ownerDocument)==null?void 0:o.body),n=S(l);if(s){const r=fe(n);return e.concat(n,n.visualViewport||[],U(l)?l:[],r&&t?Y(r):[])}return e.concat(l,Y(l,[],t))}function fe(i){return i.parent&&Object.getPrototypeOf(i.parent)?i.frameElement:null}function $e(i){const e=T(i);let t=parseFloat(e.width)||0,o=parseFloat(e.height)||0;const l=V(i),s=l?i.offsetWidth:t,n=l?i.offsetHeight:o,r=q(t)!==s||q(o)!==n;return r&&(t=s,o=n),{width:t,height:o,$:r}}function ge(i){return P(i)?i:i.contextElement}function j(i){const e=ge(i);if(!V(e))return I(1);const t=e.getBoundingClientRect(),{width:o,height:l,$:s}=$e(e);let n=(s?q(t.width):t.width)/o,r=(s?q(t.height):t.height)/l;return(!n||!Number.isFinite(n))&&(n=1),(!r||!Number.isFinite(r))&&(r=1),{x:n,y:r}}const _t=I(0);function De(i){const e=S(i);return!me()||!e.visualViewport?_t:{x:e.visualViewport.offsetLeft,y:e.visualViewport.offsetTop}}function yt(i,e,t){return e===void 0&&(e=!1),!t||e&&t!==S(i)?!1:e}function R(i,e,t,o){e===void 0&&(e=!1),t===void 0&&(t=!1);const l=i.getBoundingClientRect(),s=ge(i);let n=I(1);e&&(o?P(o)&&(n=j(o)):n=j(i));const r=yt(s,t,o)?De(s):I(0);let a=(l.left+r.x)/n.x,c=(l.top+r.y)/n.y,p=l.width/n.x,d=l.height/n.y;if(s){const m=S(s),h=o&&P(o)?S(o):o;let g=m,v=fe(g);for(;v&&o&&h!==g;){const w=j(v),b=v.getBoundingClientRect(),_=T(v),y=b.left+(v.clientLeft+parseFloat(_.paddingLeft))*w.x,k=b.top+(v.clientTop+parseFloat(_.paddingTop))*w.y;a*=w.x,c*=w.y,p*=w.x,d*=w.y,a+=y,c+=k,g=S(v),v=fe(g)}}return ie({width:p,height:d,x:a,y:c})}function ne(i,e){const t=se(i).scrollLeft;return e?e.left+t:R(E(i)).left+t}function Le(i,e){const t=i.getBoundingClientRect(),o=t.left+e.scrollLeft-ne(i,t),l=t.top+e.scrollTop;return{x:o,y:l}}function xt(i){let{elements:e,rect:t,offsetParent:o,strategy:l}=i;const s=l==="fixed",n=E(o),r=e?le(e.floating):!1;if(o===n||r&&s)return t;let a={scrollLeft:0,scrollTop:0},c=I(1);const p=I(0),d=V(o);if((d||!d&&!s)&&((H(o)!=="body"||U(n))&&(a=se(o)),V(o))){const h=R(o);c=j(o),p.x=h.x+o.clientLeft,p.y=h.y+o.clientTop}const m=n&&!d&&!s?Le(n,a):I(0);return{width:t.width*c.x,height:t.height*c.y,x:t.x*c.x-a.scrollLeft*c.x+p.x+m.x,y:t.y*c.y-a.scrollTop*c.y+p.y+m.y}}function Ct(i){return Array.from(i.getClientRects())}function kt(i){const e=E(i),t=se(i),o=i.ownerDocument.body,l=O(e.scrollWidth,e.clientWidth,o.scrollWidth,o.clientWidth),s=O(e.scrollHeight,e.clientHeight,o.scrollHeight,o.clientHeight);let n=-t.scrollLeft+ne(i);const r=-t.scrollTop;return T(o).direction==="rtl"&&(n+=O(e.clientWidth,o.clientWidth)-l),{width:l,height:s,x:n,y:r}}const ze=25;function At(i,e){const t=S(i),o=E(i),l=t.visualViewport;let s=o.clientWidth,n=o.clientHeight,r=0,a=0;if(l){s=l.width,n=l.height;const p=me();(!p||p&&e==="fixed")&&(r=l.offsetLeft,a=l.offsetTop)}const c=ne(o);if(c<=0){const p=o.ownerDocument,d=p.body,m=getComputedStyle(d),h=p.compatMode==="CSS1Compat"&&parseFloat(m.marginLeft)+parseFloat(m.marginRight)||0,g=Math.abs(o.clientWidth-d.clientWidth-h);g<=ze&&(s-=g)}else c<=ze&&(s+=c);return{width:s,height:n,x:r,y:a}}const St=new Set(["absolute","fixed"]);function Ot(i,e){const t=R(i,!0,e==="fixed"),o=t.top+i.clientTop,l=t.left+i.clientLeft,s=V(i)?j(i):I(1),n=i.clientWidth*s.x,r=i.clientHeight*s.y,a=l*s.x,c=o*s.y;return{width:n,height:r,x:a,y:c}}function Ne(i,e,t){let o;if(e==="viewport")o=At(i,t);else if(e==="document")o=kt(E(i));else if(P(e))o=Ot(e,t);else{const l=De(i);o={x:e.x-l.x,y:e.y-l.y,width:e.width,height:e.height}}return ie(o)}function Re(i,e){const t=D(i);return t===e||!P(t)||W(t)?!1:T(t).position==="fixed"||Re(t,e)}function Pt(i,e){const t=e.get(i);if(t)return t;let o=Y(i,[],!1).filter(r=>P(r)&&H(r)!=="body"),l=null;const s=T(i).position==="fixed";let n=s?D(i):i;for(;P(n)&&!W(n);){const r=T(n),a=ue(n);!a&&r.position==="fixed"&&(l=null),(s?!a&&!l:!a&&r.position==="static"&&!!l&&St.has(l.position)||U(n)&&!a&&Re(i,n))?o=o.filter(p=>p!==n):l=r,n=D(n)}return e.set(i,o),o}function Tt(i){let{element:e,boundary:t,rootBoundary:o,strategy:l}=i;const n=[...t==="clippingAncestors"?le(e)?[]:Pt(e,this._c):[].concat(t),o],r=n[0],a=n.reduce((c,p)=>{const d=Ne(e,p,l);return c.top=O(d.top,c.top),c.right=C(d.right,c.right),c.bottom=C(d.bottom,c.bottom),c.left=O(d.left,c.left),c},Ne(e,r,l));return{width:a.right-a.left,height:a.bottom-a.top,x:a.left,y:a.top}}function Mt(i){const{width:e,height:t}=$e(i);return{width:e,height:t}}function It(i,e,t){const o=V(e),l=E(e),s=t==="fixed",n=R(i,!0,s,e);let r={scrollLeft:0,scrollTop:0};const a=I(0);function c(){a.x=ne(l)}if(o||!o&&!s)if((H(e)!=="body"||U(l))&&(r=se(e)),o){const h=R(e,!0,s,e);a.x=h.x+e.clientLeft,a.y=h.y+e.clientTop}else l&&c();s&&!o&&l&&c();const p=l&&!o&&!s?Le(l,r):I(0),d=n.left+r.scrollLeft-a.x-p.x,m=n.top+r.scrollTop-a.y-p.y;return{x:d,y:m,width:n.width,height:n.height}}function be(i){return T(i).position==="static"}function Fe(i,e){if(!V(i)||T(i).position==="fixed")return null;if(e)return e(i);let t=i.offsetParent;return E(i)===t&&(t=t.ownerDocument.body),t}function Be(i,e){const t=S(i);if(le(i))return t;if(!V(i)){let l=D(i);for(;l&&!W(l);){if(P(l)&&!be(l))return l;l=D(l)}return t}let o=Fe(i,e);for(;o&&ut(o)&&be(o);)o=Fe(o,e);return o&&W(o)&&be(o)&&!ue(o)?t:o||vt(i)||t}const Et=async function(i){const e=this.getOffsetParent||Be,t=this.getDimensions,o=await t(i.floating);return{reference:It(i.reference,await e(i.floating),i.strategy),floating:{x:0,y:0,width:o.width,height:o.height}}};function Vt(i){return T(i).direction==="rtl"}const $t={convertOffsetParentRelativeRectToViewportRelativeRect:xt,getDocumentElement:E,getClippingRect:Tt,getOffsetParent:Be,getElementRects:Et,getClientRects:Ct,getDimensions:Mt,getScale:j,isElement:P,isRTL:Vt};function He(i,e){return i.x===e.x&&i.y===e.y&&i.width===e.width&&i.height===e.height}function Dt(i,e){let t=null,o;const l=E(i);function s(){var r;clearTimeout(o),(r=t)==null||r.disconnect(),t=null}function n(r,a){r===void 0&&(r=!1),a===void 0&&(a=1),s();const c=i.getBoundingClientRect(),{left:p,top:d,width:m,height:h}=c;if(r||e(),!m||!h)return;const g=Z(d),v=Z(l.clientWidth-(p+m)),w=Z(l.clientHeight-(d+h)),b=Z(p),y={rootMargin:-g+"px "+-v+"px "+-w+"px "+-b+"px",threshold:O(0,C(1,a))||1};let k=!0;function x(X){const G=X[0].intersectionRatio;if(G!==a){if(!k)return n();G?n(!1,G):o=setTimeout(()=>{n(!1,1e-7)},1e3)}G===1&&!He(c,i.getBoundingClientRect())&&n(),k=!1}try{t=new IntersectionObserver(x,{...y,root:l.ownerDocument})}catch{t=new IntersectionObserver(x,y)}t.observe(i)}return n(!0),s}function re(i,e,t,o){o===void 0&&(o={});const{ancestorScroll:l=!0,ancestorResize:s=!0,elementResize:n=typeof ResizeObserver=="function",layoutShift:r=typeof IntersectionObserver=="function",animationFrame:a=!1}=o,c=ge(i),p=l||s?[...c?Y(c):[],...Y(e)]:[];p.forEach(b=>{l&&b.addEventListener("scroll",t,{passive:!0}),s&&b.addEventListener("resize",t)});const d=c&&r?Dt(c,t):null;let m=-1,h=null;n&&(h=new ResizeObserver(b=>{let[_]=b;_&&_.target===c&&h&&(h.unobserve(e),cancelAnimationFrame(m),m=requestAnimationFrame(()=>{var y;(y=h)==null||y.observe(e)})),t()}),c&&!a&&h.observe(c),h.observe(e));let g,v=a?R(i):null;a&&w();function w(){const b=R(i);v&&!He(v,b)&&t(),v=b,g=requestAnimationFrame(w)}return t(),()=>{var b;p.forEach(_=>{l&&_.removeEventListener("scroll",t),s&&_.removeEventListener("resize",t)}),d==null||d(),(b=h)==null||b.disconnect(),h=null,a&&cancelAnimationFrame(g)}}const ae=ct,ce=dt,ve=nt,de=(i,e,t)=>{const o=new Map,l={platform:$t,...t},s={...l.platform,_c:o};return st(i,e,{...l,platform:s})};let L=0;const f={debug:(i,...e)=>{L++,console.log(`%c[MultiSelect ${L}]%c ${i}`,"color: #0ea5e9; font-weight: bold;","color: inherit;",...e)},info:(i,...e)=>{L++,console.info(`%c[MultiSelect ${L}]%c ${i}`,"color: #10b981; font-weight: bold;","color: inherit;",...e)},warn:(i,...e)=>{L++,console.warn(`%c[MultiSelect ${L}]%c ${i}`,"color: #f59e0b; font-weight: bold;","color: inherit;",...e)},error:(i,...e)=>{L++,console.error(`%c[MultiSelect ${L}]%c ${i}`,"color: #ef4444; font-weight: bold;","color: inherit;",...e)}};class We{constructor(e,t={}){u(this,"element");u(this,"instanceId");u(this,"options");u(this,"isOpen",!1);u(this,"selectedValues",new Set);u(this,"selectedOptions",new Map);u(this,"allOptions",[]);u(this,"filteredOptions",[]);u(this,"hiddenInputs",[]);u(this,"focusedIndex",-1);u(this,"searchTerm","");u(this,"isLoading",!1);u(this,"showSelectedPopover",!1);u(this,"selectedPopoverPlacement",null);u(this,"dropdownPlacement",null);u(this,"dropdownCleanup",null);u(this,"hintCleanup",null);u(this,"selectedPopoverCleanup",null);u(this,"pillTooltips",new Map);u(this,"pillTooltipCleanups",new Map);u(this,"input");u(this,"dropdown");u(this,"pillsContainer");u(this,"countBadge");u(this,"hint");u(this,"selectedPopover");this.element=e,this.instanceId=`MS-${Math.random().toString(36).substr(2,9)}`,this.options={searchHint:e.dataset.searchHint||"",searchPlaceholder:e.dataset.searchPlaceholder||"Search...",dropdownMinWidth:e.dataset.dropdownMinWidth||void 0,pillsDisplayMode:e.dataset.pillsDisplayMode||"pills",pillsPosition:e.dataset.pillsPosition||"bottom",pillsThresholdMode:e.dataset.pillsThresholdMode||"count",maxHeight:e.dataset.maxHeight||"20rem",emptyMessage:e.dataset.emptyMessage||"No results found",loadingMessage:e.dataset.loadingMessage||"Loading...",searchInputMode:e.dataset.searchInputMode||"normal",pillsThreshold:e.dataset.pillsThreshold?parseInt(e.dataset.pillsThreshold):void 0,minSearchLength:parseInt(e.dataset.minSearchLength||"0")||0,isMultipleEnabled:e.dataset.multiple!=="false",isGroupsAllowed:e.dataset.allowGroups!=="false",isSelectAllAllowed:e.dataset.allowSelectAll!=="false",isClearAllAllowed:e.dataset.allowClearAll!=="false",isCheckboxesShown:e.dataset.showCheckboxes!=="false",isActionsSticky:e.dataset.stickyActions!=="false",isCloseOnSelect:e.dataset.closeOnSelect==="true",isPlacementLocked:e.dataset.lockPlacement!=="false",isSearchEnabled:e.dataset.enableSearch!=="false",isAddNewAllowed:e.dataset.allowAddNew==="true",isCountBadgeShown:e.dataset.showCountBadge==="true",options:[],container:void 0,...t},this.init()}getItemValue(e){return Array.isArray(e)&&e.length===2?e[0]:this.options.valueMember&&e[this.options.valueMember]!==void 0?e[this.options.valueMember]:this.options.getValueCallback?this.options.getValueCallback(e):"[N/A]"}getItemDisplayValue(e){return Array.isArray(e)&&e.length===2?String(e[1]):this.options.displayValueMember&&e[this.options.displayValueMember]!==void 0?String(e[this.options.displayValueMember]):this.options.getDisplayValueCallback?this.options.getDisplayValueCallback(e):"[N/A]"}getItemSearchValue(e){return this.options.searchValueMember&&e[this.options.searchValueMember]!==void 0?String(e[this.options.searchValueMember]):this.options.getSearchValueCallback?this.options.getSearchValueCallback(e):this.getItemDisplayValue(e)}getItemIcon(e){if(!Array.isArray(e)){if(this.options.iconMember&&e[this.options.iconMember]!==void 0)return String(e[this.options.iconMember]);if(this.options.getIconCallback)return this.options.getIconCallback(e)}}getItemSubtitle(e){if(!Array.isArray(e)){if(this.options.subtitleMember&&e[this.options.subtitleMember]!==void 0)return String(e[this.options.subtitleMember]);if(this.options.getSubtitleCallback)return this.options.getSubtitleCallback(e)}}getItemGroup(e){if(!Array.isArray(e)){if(this.options.groupMember&&e[this.options.groupMember]!==void 0)return String(e[this.options.groupMember]);if(this.options.getGroupCallback)return this.options.getGroupCallback(e)}}getItemDisabled(e){return Array.isArray(e)?!1:this.options.disabledMember&&e[this.options.disabledMember]!==void 0?!!e[this.options.disabledMember]:this.options.getDisabledCallback?this.options.getDisabledCallback(e):!1}init(){this.parseOptions(),this.buildHTML(),this.attachEvents(),this.parseInitialSelection(),f.debug(`Initialized [${this.instanceId}] with options:`,{placeholder:this.options.searchPlaceholder,totalOptions:this.allOptions.length,isCloseOnSelect:this.options.isCloseOnSelect,dataAttribute:this.element.dataset.closeOnSelect,isSelectAllAllowed:this.options.isSelectAllAllowed,isClearAllAllowed:this.options.isClearAllAllowed})}parseOptions(){const e=this.element.dataset.options;if(e)try{this.allOptions=JSON.parse(e)}catch(t){console.error("[MultiSelect] Failed to parse data-options:",t),this.allOptions=[]}else this.options.options&&(this.allOptions=this.options.options);this.filteredOptions=[...this.allOptions]}buildHTML(){const e=this.options.container||document.body;this.element.classList.add("ml"),(!this.options.isCheckboxesShown||!this.options.isMultipleEnabled)&&this.element.classList.add("ml--no-checkboxes");const t=document.createElement("div");t.className="ml__input-wrapper",this.input=document.createElement("input"),this.input.type="text",this.input.className="ml__input",this.input.placeholder=this.options.searchPlaceholder,this.input.autocomplete="off",this.options.searchInputMode==="readonly"?this.input.readOnly=!0:this.options.searchInputMode==="hidden"&&(this.input.style.display="none");const o=document.createElement("span");o.className="ml__toggle",o.innerHTML="▼",this.countBadge=document.createElement("span"),this.countBadge.className="ml__count-badge",this.countBadge.style.display="none",t.appendChild(this.input),t.appendChild(this.countBadge),t.appendChild(o),this.pillsContainer=document.createElement("div"),this.pillsContainer.className="ml__pills",this.element.appendChild(t),this.element.appendChild(this.pillsContainer),this.dropdown=document.createElement("div"),this.dropdown.className="ml__dropdown",e.appendChild(this.dropdown),this.options.searchHint&&(this.hint=document.createElement("div"),this.hint.className="ml__hint",this.hint.textContent=this.options.searchHint,e.appendChild(this.hint)),this.selectedPopover=document.createElement("div"),this.selectedPopover.className="ml__selected-popover",e.appendChild(this.selectedPopover),this.renderDropdown()}renderDropdown(){let e="";if(this.isLoading){e+='<div class="ml__loader">',e+='<div class="pa-loader pa-loader--sm"></div>',e+=`<div class="ml__loading-text">${this.options.loadingMessage}</div>`,e+="</div>",this.dropdown.innerHTML=e;return}if(this.options.isMultipleEnabled&&(this.options.isSelectAllAllowed||this.options.isClearAllAllowed)){const t=this.options.isActionsSticky?" ml__actions--sticky":"";e+=`<div class="ml__actions${t}">`,this.options.isSelectAllAllowed&&(e+='<button type="button" class="ml__action-btn" data-action="select-all">Select All</button>'),this.options.isClearAllAllowed&&(e+='<button type="button" class="ml__action-btn" data-action="clear-all">Clear All</button>'),e+="</div>"}if(e+='<div class="ml__options">',this.filteredOptions.length===0)e+=`<div class="ml__empty">${this.options.emptyMessage}</div>`;else if(this.options.isGroupsAllowed){const t=this.groupOptions(this.filteredOptions);Object.keys(t).forEach(o=>{e+='<div class="ml__group">',o!=="__ungrouped__"&&(e+=`<div class="ml__group-label">${o}</div>`),t[o].forEach((l,s)=>{e+=this.renderOption(l,s)}),e+="</div>"})}else this.filteredOptions.forEach((t,o)=>{e+=this.renderOption(t,o)});e+="</div>",this.dropdown.innerHTML=e}renderOption(e,t){const o=this.getItemValue(e),l=this.getItemDisplayValue(e),s=this.getItemIcon(e),n=this.getItemSubtitle(e),r=this.getItemDisabled(e),a=this.selectedValues.has(String(o)),c=t===this.focusedIndex,p=["ml__option"];a&&p.push("ml__option--selected"),c&&p.push("ml__option--focused"),r&&p.push("ml__option--disabled");let d=`<div class="${p.join(" ")}" data-value="${o}" data-index="${t}">`;return this.options.isCheckboxesShown&&this.options.isMultipleEnabled&&(d+=`<input type="checkbox" class="ml__checkbox" ${a?"checked":""} ${r?"disabled":""}>`),d+='<div class="ml__option-content">',s&&(d+=`<span class="ml__option-icon">${s}</span>`),d+='<div class="ml__option-text">',d+=`<div class="ml__option-title">${this.highlightMatch(l,this.searchTerm)}</div>`,n&&(d+=`<div class="ml__option-subtitle">${n}</div>`),d+="</div>",d+="</div>",d+="</div>",d}highlightMatch(e,t){if(!t)return e;const o=new RegExp(`(${t.replace(/[.*+?^${}()|[\]\\]/g,"\\$&")})`,"gi");return e.replace(o,"<mark>$1</mark>")}groupOptions(e){const t={};return e.forEach(o=>{const l=this.getItemGroup(o)||"__ungrouped__";t[l]||(t[l]=[]),t[l].push(o)}),t}renderPills(){this.destroyAllPillTooltips();const e=Array.from(this.selectedOptions.values()),t=this.selectedValues.size;if(!this.options.isMultipleEnabled){this.pillsContainer.innerHTML="",this.countBadge.style.display="none";const s=e[0]?this.getItemDisplayValue(e[0]):void 0;f.warn(`[${this.instanceId}] renderPills() single-select mode`,{isOpen:this.isOpen,count:t,selectedOptionsLength:e.length,willSetValue:!this.isOpen&&t>0&&e.length>0,selectedLabel:s}),!this.isOpen&&t>0&&e.length>0?(f.info(`[${this.instanceId}] ✅ SETTING input.value = "${s}"`),this.input.value=s,f.info(`[${this.instanceId}] 🔍 VERIFY input.value = "${this.input.value}"`)):this.isOpen?f.info(`[${this.instanceId}] ⏭️ SKIPPING input update (dropdown is open)`):(f.info(`[${this.instanceId}] ❌ CLEARING input.value (no selection)`),this.input.value="");return}let o=this.options.pillsDisplayMode;if(this.options.pillsThreshold!==null&&t>this.options.pillsThreshold&&(o=this.options.pillsThresholdMode||"count"),!this.isOpen)if(t>0&&o==="count"){const s=this.options.getCountPillCallback?this.options.getCountPillCallback(t):`${t} selected`;this.input.placeholder=s}else this.input.placeholder=this.options.searchPlaceholder;if(this.options.isCountBadgeShown&&t>0?(this.countBadge.textContent=`[${t}]`,this.countBadge.style.display=""):this.countBadge.style.display="none",o==="pills")this.pillsContainer.className=`ml__pills ml__pills--${this.options.pillsPosition}`,this.pillsContainer.innerHTML=e.map(s=>{const n=this.getItemValue(s),r=this.getItemDisplayValue(s);return`
|
|
2
2
|
<div class="ml__pill">
|
|
3
3
|
<span class="ml__pill-text">${r}</span>
|
|
4
4
|
<button type="button" class="ml__pill-remove" data-value="${n}" aria-label="Remove ${r}"></button>
|
|
@@ -34,7 +34,7 @@
|
|
|
34
34
|
`}).join("")}
|
|
35
35
|
</div>
|
|
36
36
|
`}handleSelectedPopoverClick(e){if(e.stopPropagation(),e.target.closest(".ml__selected-popover-close")){e.preventDefault(),this.hideSelectedPopover();return}const o=e.target.closest(".ml__pill-remove");if(o){e.preventDefault();const l=o.dataset.value,s=this.selectedOptions.get(l);s&&(this.deselectOption(s),this.renderSelectedPopover(),this.selectedValues.size===0&&this.hideSelectedPopover())}}positionSelectedPopover(){this.selectedPopoverCleanup=re(this.input,this.selectedPopover,()=>{const e=this.selectedPopoverPlacement||"bottom-start";de(this.input,this.selectedPopover,{placement:e,middleware:[ae(4),...this.selectedPopoverPlacement?[]:[ve()],ce({padding:8})]}).then(({x:t,y:o,placement:l})=>{this.selectedPopoverPlacement||(this.selectedPopoverPlacement=l,f.debug(`[${this.instanceId}] Locked popover placement:`,l));const s={left:`${t}px`,top:`${o}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(l=>l.remove()),this.hiddenInputs=[];const e=this.options.valueFormat||"json",t=Array.from(this.selectedOptions.values()).map(l=>this.getItemValue(l)),o=this.options.hostElement||this.element;if(e==="array")t.forEach(l=>{const s=document.createElement("input");s.type="hidden",s.name=`${this.options.formFieldId}[]`,s.value=String(l),o.appendChild(s),this.hiddenInputs.push(s)});else{const l=document.createElement("input");l.type="hidden",l.name=this.options.formFieldId,l.id=this.options.formFieldId,l.value=this.getFormValue(),o.appendChild(l),this.hiddenInputs.push(l)}}getFormValue(){const e=Array.from(this.selectedOptions.values()).map(o=>this.getItemValue(o));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 o=String(t),l=this.allOptions.find(s=>String(this.getItemValue(s))===o);l&&this.selectedOptions.set(o,l)}),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){console.log("[Tooltips] Disabled - isPillTooltipsEnabled is false");return}const e=this.pillsContainer.querySelectorAll(".ml__pill:not(.ml__pill--more)");console.log(`[Tooltips] Found ${e.length} pills to attach tooltips to`),e.forEach(o=>{const l=o,s=l.querySelector(".ml__pill-remove");if(!s)return;const n=s.dataset.value,r=this.selectedOptions.get(n);if(!r)return;const a=l.querySelector(".ml__pill-text");a&&this.createTooltipForElement(a,r,n);const c=this.getItemDisplayValue(r);this.createRemoveButtonTooltip(s,c,n)});const t=this.pillsContainer.querySelector(".ml__pill--more");if(t){const o=t.querySelector(".ml__pill-remove");if(o&&o.dataset.action==="remove-hidden"){const l=this.options.pillsMaxVisible||3,n=Array.from(this.selectedOptions.values()).length-l;this.createRemoveButtonTooltip(o,`${n} hidden items`,"more-badge-remove")}}}createTooltipForElement(e,t,o){const l=document.createElement("div");l.className="ml__pill-tooltip";let s;if(this.options.getPillTooltipCallback)s=this.options.getPillTooltipCallback(t),console.log("[Tooltips] Using custom callback for tooltip content");else{const d=this.getItemDisplayValue(t),m=this.getItemSubtitle(t);s=m?`${d}
|
|
37
|
-
${m}`:d,console.log(`[Tooltips] Using default content: "${s}"`)}typeof s=="string"?l.textContent=s:l.appendChild(s),(this.options.container||document.body).appendChild(l),console.log(`[Tooltips] Tooltip element created and appended for "${o}"`),this.pillTooltips.set(o,l);let r,a;const c=()=>{clearTimeout(a),console.log(`[Tooltips] Mouse entered pill "${o}", will show tooltip in ${this.options.pillTooltipDelay||300}ms`),r=window.setTimeout(()=>{console.log(`[Tooltips] Showing tooltip for "${o}"`),l.classList.add("ml__pill-tooltip--visible"),this.positionPillTooltip(e,l,o)},this.options.pillTooltipDelay||300)},p=()=>{clearTimeout(r),a=window.setTimeout(()=>{l.classList.remove("ml__pill-tooltip--visible"),this.cleanupPillTooltip(o)},100)};e.addEventListener("mouseenter",c),e.addEventListener("mouseleave",p)}createRemoveButtonTooltip(e,t,o){const l=document.createElement("div");l.className="ml__pill-tooltip",l.textContent=`Remove ${t}`,(this.options.container||document.body).appendChild(l);const n=`${o}-remove`;this.pillTooltips.set(n,l);let r,a;const c=()=>{clearTimeout(a);const d=this.pillTooltips.get(o);d&&d.classList.remove("ml__pill-tooltip--visible"),r=window.setTimeout(()=>{l.classList.add("ml__pill-tooltip--visible"),this.positionPillTooltip(e,l,n)},this.options.pillTooltipDelay||300)},p=()=>{clearTimeout(r),a=window.setTimeout(()=>{l.classList.remove("ml__pill-tooltip--visible"),this.cleanupPillTooltip(n)},100)};e.addEventListener("mouseenter",c),e.addEventListener("mouseleave",p)}positionPillTooltip(e,t,o){const l=re(e,t,()=>{de(e,t,{placement:this.options.pillTooltipPlacement||"top",strategy:"fixed",middleware:[ae(this.options.pillTooltipOffset||8),ve(),ce({padding:8})]}).then(({x:s,y:n})=>{Object.assign(t.style,{left:`${s}px`,top:`${n}px`}),console.log(`[Tooltips] Positioned tooltip "${o}" 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(o,l)}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.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"),console.log("[MultiSelect] Destroyed")}}const Lt='@charset "UTF-8";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);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;color:var(--ml-dropdown-color, #111827)}.ml__dropdown--visible{display:block}.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__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--selected{background: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, .5rem);justify-content:flex-start}.ml__pills--right{margin-left:var(--ml-pills-margin-right, .5rem);justify-content:flex-end}.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-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--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}',we=new Set;function je(){return Array.from(we)}class _e extends HTMLElement{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,"_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,"_searchCallback");u(this,"_addNewCallback");u(this,"_selectCallback");u(this,"_deselectCallback");u(this,"_changeCallback");this.shadow=this.attachShadow({mode:"open"});const t=document.createElement("style");t.textContent=Lt,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","max-height","empty-message","loading-message","min-search-length","enable-search","search-input-mode","allow-add-new","initial-values","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(){we.add(this),this.render(),this.initializePicker()}disconnectedCallback(){we.delete(this),this.picker&&this.picker.destroy()}attributeChangedCallback(t,o,l){o!==l&&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 o=document.createElement("div");o.className="ml-debug-info";const l=document.createElement("details"),s=document.createElement("summary");s.textContent="Debug Info";const n=document.createElement("div");n.className="ml-debug-stats",l.appendChild(s),l.appendChild(n),o.appendChild(l),this.shadow.appendChild(o),this.updateDebugInfo()}updateDebugInfo(){var h,g;const t=this.shadow.querySelector(".ml-debug-stats");if(!t||!this.picker)return;const o="1.0.0-rc02",l=je().length,n=this.picker.getSelected().length,r=((h=this._options)==null?void 0:h.length)||0,a=this.picker,c=a.isOpen||!1,p=a.searchTerm||"",d=a.isLoading||!1,m=((g=a.filteredOptions)==null?void 0:g.length)||0;t.innerHTML=`
|
|
37
|
+
${m}`:d,console.log(`[Tooltips] Using default content: "${s}"`)}typeof s=="string"?l.textContent=s:l.appendChild(s),(this.options.container||document.body).appendChild(l),console.log(`[Tooltips] Tooltip element created and appended for "${o}"`),this.pillTooltips.set(o,l);let r,a;const c=()=>{clearTimeout(a),console.log(`[Tooltips] Mouse entered pill "${o}", will show tooltip in ${this.options.pillTooltipDelay||300}ms`),r=window.setTimeout(()=>{console.log(`[Tooltips] Showing tooltip for "${o}"`),l.classList.add("ml__pill-tooltip--visible"),this.positionPillTooltip(e,l,o)},this.options.pillTooltipDelay||300)},p=()=>{clearTimeout(r),a=window.setTimeout(()=>{l.classList.remove("ml__pill-tooltip--visible"),this.cleanupPillTooltip(o)},100)};e.addEventListener("mouseenter",c),e.addEventListener("mouseleave",p)}createRemoveButtonTooltip(e,t,o){const l=document.createElement("div");l.className="ml__pill-tooltip",l.textContent=`Remove ${t}`,(this.options.container||document.body).appendChild(l);const n=`${o}-remove`;this.pillTooltips.set(n,l);let r,a;const c=()=>{clearTimeout(a);const d=this.pillTooltips.get(o);d&&d.classList.remove("ml__pill-tooltip--visible"),r=window.setTimeout(()=>{l.classList.add("ml__pill-tooltip--visible"),this.positionPillTooltip(e,l,n)},this.options.pillTooltipDelay||300)},p=()=>{clearTimeout(r),a=window.setTimeout(()=>{l.classList.remove("ml__pill-tooltip--visible"),this.cleanupPillTooltip(n)},100)};e.addEventListener("mouseenter",c),e.addEventListener("mouseleave",p)}positionPillTooltip(e,t,o){const l=re(e,t,()=>{de(e,t,{placement:this.options.pillTooltipPlacement||"top",strategy:"fixed",middleware:[ae(this.options.pillTooltipOffset||8),ve(),ce({padding:8})]}).then(({x:s,y:n})=>{Object.assign(t.style,{left:`${s}px`,top:`${n}px`}),console.log(`[Tooltips] Positioned tooltip "${o}" 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(o,l)}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.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"),console.log("[MultiSelect] Destroyed")}}const Lt='@charset "UTF-8";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);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;color:var(--ml-dropdown-color, #111827)}.ml__dropdown--visible{display:block}.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__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--selected{background: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, .5rem);justify-content:flex-start}.ml__pills--right{margin-left:var(--ml-pills-margin-right, .5rem);justify-content:flex-end}.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-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--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}',zt=typeof HTMLElement<"u"?HTMLElement:class{},we=new Set;function je(){return Array.from(we)}class _e extends zt{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,"_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,"_searchCallback");u(this,"_addNewCallback");u(this,"_selectCallback");u(this,"_deselectCallback");u(this,"_changeCallback");this.shadow=this.attachShadow({mode:"open"});const t=document.createElement("style");t.textContent=Lt,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","max-height","empty-message","loading-message","min-search-length","enable-search","search-input-mode","allow-add-new","initial-values","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(){we.add(this),this.render(),this.initializePicker()}disconnectedCallback(){we.delete(this),this.picker&&this.picker.destroy()}attributeChangedCallback(t,o,l){o!==l&&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 o=document.createElement("div");o.className="ml-debug-info";const l=document.createElement("details"),s=document.createElement("summary");s.textContent="Debug Info";const n=document.createElement("div");n.className="ml-debug-stats",l.appendChild(s),l.appendChild(n),o.appendChild(l),this.shadow.appendChild(o),this.updateDebugInfo()}updateDebugInfo(){var h,g;const t=this.shadow.querySelector(".ml-debug-stats");if(!t||!this.picker)return;const o="1.0.0-rc02",l=je().length,n=this.picker.getSelected().length,r=((h=this._options)==null?void 0:h.length)||0,a=this.picker,c=a.isOpen||!1,p=a.searchTerm||"",d=a.isLoading||!1,m=((g=a.filteredOptions)==null?void 0:g.length)||0;t.innerHTML=`
|
|
38
38
|
<span>Version: ${o}</span>
|
|
39
39
|
<span>Total Instances: ${l}</span>
|
|
40
40
|
<span>Options: ${r}</span>
|
|
@@ -43,4 +43,4 @@ ${m}`:d,console.log(`[Tooltips] Using default content: "${s}"`)}typeof s=="strin
|
|
|
43
43
|
<span>Dropdown: ${c?"Open":"Closed"}</span>
|
|
44
44
|
<span>Search: ${p||"none"}</span>
|
|
45
45
|
<span>Loading: ${d?"Yes":"No"}</span>
|
|
46
|
-
`,setTimeout(()=>{this.getAttribute("show-debug-info")==="true"&&this.updateDebugInfo()},500)}initializePicker(){if(!this.containerElement)return;let t;const o=this.getAttribute("initial-values");if(o)try{t=JSON.parse(o)}catch(s){console.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",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",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,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||((s,n)=>n!==void 0?`+${n} more`:`${s} selected`),options:this._options,searchCallback:this._searchCallback,addNewCallback:this._addNewCallback,selectCallback:s=>{var n,r;this._selectCallback&&this._selectCallback(s),this.dispatchEvent(new CustomEvent("select",{detail:{option:s,selectedOptions:(n=this.picker)==null?void 0:n.getSelected(),selectedValues:Array.from(((r=this.picker)==null?void 0:r.getValue())||[])}}))},deselectCallback:s=>{var n,r;this._deselectCallback&&this._deselectCallback(s),this.dispatchEvent(new CustomEvent("deselect",{detail:{option:s,selectedOptions:(n=this.picker)==null?void 0:n.getSelected(),selectedValues:Array.from(((r=this.picker)==null?void 0:r.getValue())||[])}}))},changeCallback:s=>{var n;this._changeCallback&&this._changeCallback(s),this.dispatchEvent(new CustomEvent("change",{detail:{selectedOptions:s,selectedValues:Array.from(((n=this.picker)==null?void 0:n.getValue())||[])}}))},container:this.shadow,hostElement:this};t&&(this.containerElement.dataset.initialValues=JSON.stringify(t)),this.picker=new We(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 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 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()}}customElements.get("multi-select")||customElements.define("multi-select",_e),typeof window<"u"&&(window.keenmate=window.keenmate||{},window.keenmate.multiselect={version:()=>"1.0.0-rc02",config:{name:"@keenmate/web-multiselect",version:"1.0.0-rc02",author:"Keenmate",license:"MIT",repository:"git+https://github.com/keenmate/web-multiselect.git",homepage:"https://github.com/keenmate/web-multiselect#readme"},register:()=>{customElements.get("multi-select")
|
|
46
|
+
`,setTimeout(()=>{this.getAttribute("show-debug-info")==="true"&&this.updateDebugInfo()},500)}initializePicker(){if(!this.containerElement)return;let t;const o=this.getAttribute("initial-values");if(o)try{t=JSON.parse(o)}catch(s){console.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",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",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,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||((s,n)=>n!==void 0?`+${n} more`:`${s} selected`),options:this._options,searchCallback:this._searchCallback,addNewCallback:this._addNewCallback,selectCallback:s=>{var n,r;this._selectCallback&&this._selectCallback(s),this.dispatchEvent(new CustomEvent("select",{detail:{option:s,selectedOptions:(n=this.picker)==null?void 0:n.getSelected(),selectedValues:Array.from(((r=this.picker)==null?void 0:r.getValue())||[])}}))},deselectCallback:s=>{var n,r;this._deselectCallback&&this._deselectCallback(s),this.dispatchEvent(new CustomEvent("deselect",{detail:{option:s,selectedOptions:(n=this.picker)==null?void 0:n.getSelected(),selectedValues:Array.from(((r=this.picker)==null?void 0:r.getValue())||[])}}))},changeCallback:s=>{var n;this._changeCallback&&this._changeCallback(s),this.dispatchEvent(new CustomEvent("change",{detail:{selectedOptions:s,selectedValues:Array.from(((n=this.picker)==null?void 0:n.getValue())||[])}}))},container:this.shadow,hostElement:this};t&&(this.containerElement.dataset.initialValues=JSON.stringify(t)),this.picker=new We(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 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 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("multi-select")||customElements.define("multi-select",_e)),typeof window<"u"&&(window.keenmate=window.keenmate||{},window.keenmate.multiselect={version:()=>"1.0.0-rc02",config:{name:"@keenmate/web-multiselect",version:"1.0.0-rc02",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("multi-select")&&customElements.define("multi-select",_e)},getInstances:()=>je()}),A.MultiSelectElement=_e,A.PureMultiSelect=We,Object.defineProperty(A,Symbol.toStringTag,{value:"Module"})});
|
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-rc03",
|
|
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",
|
package/dist/index.d.ts
DELETED
|
@@ -1,26 +0,0 @@
|
|
|
1
|
-
import './scss/main.scss';
|
|
2
|
-
import { MultiSelectElement } from './web-component';
|
|
3
|
-
export { MultiSelectElement };
|
|
4
|
-
export { PureMultiSelect } from './multiselect';
|
|
5
|
-
export type { MultiSelectOption, MultiSelectOptions, MultiSelectEventDetail, PillsDisplayMode, PillsPosition, PillsThresholdMode, SearchInputMode, ValueFormat } from './types';
|
|
6
|
-
import './web-component';
|
|
7
|
-
export interface GlobalMultiSelectAPI {
|
|
8
|
-
version: () => string;
|
|
9
|
-
config: {
|
|
10
|
-
name: string;
|
|
11
|
-
version: string;
|
|
12
|
-
author: string;
|
|
13
|
-
license: string;
|
|
14
|
-
repository: string;
|
|
15
|
-
homepage: string;
|
|
16
|
-
};
|
|
17
|
-
register: () => void;
|
|
18
|
-
getInstances: () => HTMLElement[];
|
|
19
|
-
}
|
|
20
|
-
declare global {
|
|
21
|
-
interface Window {
|
|
22
|
-
keenmate?: {
|
|
23
|
-
multiselect?: GlobalMultiSelectAPI;
|
|
24
|
-
};
|
|
25
|
-
}
|
|
26
|
-
}
|
package/dist/multiselect.d.ts
DELETED
|
@@ -1,117 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Pure Admin - MultiSelect with Typeahead
|
|
3
|
-
* Comprehensive multiselect component with rich content support and floating hints
|
|
4
|
-
*/
|
|
5
|
-
import type { MultiSelectConfig } from './types';
|
|
6
|
-
export declare class PureMultiSelect<T = any> {
|
|
7
|
-
private element;
|
|
8
|
-
private instanceId;
|
|
9
|
-
private options;
|
|
10
|
-
private isOpen;
|
|
11
|
-
private selectedValues;
|
|
12
|
-
private selectedOptions;
|
|
13
|
-
private allOptions;
|
|
14
|
-
private filteredOptions;
|
|
15
|
-
private hiddenInputs;
|
|
16
|
-
private focusedIndex;
|
|
17
|
-
private searchTerm;
|
|
18
|
-
private isLoading;
|
|
19
|
-
private showSelectedPopover;
|
|
20
|
-
private selectedPopoverPlacement;
|
|
21
|
-
private dropdownPlacement;
|
|
22
|
-
private dropdownCleanup;
|
|
23
|
-
private hintCleanup;
|
|
24
|
-
private selectedPopoverCleanup;
|
|
25
|
-
private pillTooltips;
|
|
26
|
-
private pillTooltipCleanups;
|
|
27
|
-
private input;
|
|
28
|
-
private dropdown;
|
|
29
|
-
private pillsContainer;
|
|
30
|
-
private countBadge;
|
|
31
|
-
private hint?;
|
|
32
|
-
private selectedPopover;
|
|
33
|
-
/**
|
|
34
|
-
* Extract value/ID from item
|
|
35
|
-
* Precedence: tuple[0] -> valueMember -> getValueCallback -> '[N/A]'
|
|
36
|
-
*/
|
|
37
|
-
private getItemValue;
|
|
38
|
-
/**
|
|
39
|
-
* Extract display value from item
|
|
40
|
-
* Precedence: tuple[1] -> displayValueMember -> getDisplayValueCallback -> '[N/A]'
|
|
41
|
-
*/
|
|
42
|
-
private getItemDisplayValue;
|
|
43
|
-
/**
|
|
44
|
-
* Extract search value from item
|
|
45
|
-
* Precedence: searchValueMember -> getSearchValueCallback -> displayValue
|
|
46
|
-
*/
|
|
47
|
-
private getItemSearchValue;
|
|
48
|
-
/**
|
|
49
|
-
* Extract icon from item
|
|
50
|
-
*/
|
|
51
|
-
private getItemIcon;
|
|
52
|
-
/**
|
|
53
|
-
* Extract subtitle from item
|
|
54
|
-
*/
|
|
55
|
-
private getItemSubtitle;
|
|
56
|
-
/**
|
|
57
|
-
* Extract group from item
|
|
58
|
-
*/
|
|
59
|
-
private getItemGroup;
|
|
60
|
-
/**
|
|
61
|
-
* Extract disabled state from item
|
|
62
|
-
*/
|
|
63
|
-
private getItemDisabled;
|
|
64
|
-
constructor(element: HTMLElement, options?: Partial<MultiSelectConfig<T>>);
|
|
65
|
-
private init;
|
|
66
|
-
private parseOptions;
|
|
67
|
-
private buildHTML;
|
|
68
|
-
private renderDropdown;
|
|
69
|
-
private renderOption;
|
|
70
|
-
private highlightMatch;
|
|
71
|
-
private groupOptions;
|
|
72
|
-
private renderPills;
|
|
73
|
-
private attachEvents;
|
|
74
|
-
private handleSearch;
|
|
75
|
-
private handleKeydown;
|
|
76
|
-
private handleDropdownClick;
|
|
77
|
-
private handlePillClick;
|
|
78
|
-
private handleClickOutside;
|
|
79
|
-
private focusNext;
|
|
80
|
-
private focusPrevious;
|
|
81
|
-
private focusFirst;
|
|
82
|
-
private focusLast;
|
|
83
|
-
private focusPageUp;
|
|
84
|
-
private focusPageDown;
|
|
85
|
-
private scrollToFocused;
|
|
86
|
-
private toggleOption;
|
|
87
|
-
private handleAddNew;
|
|
88
|
-
private selectOption;
|
|
89
|
-
private deselectOption;
|
|
90
|
-
private selectAll;
|
|
91
|
-
private clearAll;
|
|
92
|
-
private open;
|
|
93
|
-
private close;
|
|
94
|
-
private positionDropdown;
|
|
95
|
-
private positionHint;
|
|
96
|
-
private parseInitialSelection;
|
|
97
|
-
private toggleSelectedPopover;
|
|
98
|
-
private showPopover;
|
|
99
|
-
private hideSelectedPopover;
|
|
100
|
-
private renderSelectedPopover;
|
|
101
|
-
private handleSelectedPopoverClick;
|
|
102
|
-
private positionSelectedPopover;
|
|
103
|
-
private updateHiddenInput;
|
|
104
|
-
private getFormValue;
|
|
105
|
-
getSelected(): T[];
|
|
106
|
-
setSelected(values: (string | number)[]): void;
|
|
107
|
-
get selectedItem(): T | null;
|
|
108
|
-
get selectedValue(): string | number | (string | number)[] | null;
|
|
109
|
-
getValue(): string | number | (string | number)[] | null;
|
|
110
|
-
private attachPillTooltips;
|
|
111
|
-
private createTooltipForElement;
|
|
112
|
-
private createRemoveButtonTooltip;
|
|
113
|
-
private positionPillTooltip;
|
|
114
|
-
private cleanupPillTooltip;
|
|
115
|
-
private destroyAllPillTooltips;
|
|
116
|
-
destroy(): void;
|
|
117
|
-
}
|
package/dist/types.d.ts
DELETED
|
@@ -1,187 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Type definitions for the MultiSelect component
|
|
3
|
-
*/
|
|
4
|
-
import type { Placement } from '@floating-ui/dom';
|
|
5
|
-
/**
|
|
6
|
-
* Position of the pills container relative to the input
|
|
7
|
-
*/
|
|
8
|
-
export type PillsPosition = 'top' | 'bottom' | 'left' | 'right';
|
|
9
|
-
/**
|
|
10
|
-
* Search input display mode
|
|
11
|
-
*/
|
|
12
|
-
export type SearchInputMode = 'normal' | 'readonly' | 'hidden';
|
|
13
|
-
/**
|
|
14
|
-
* Value format for serialization (forms and callbacks)
|
|
15
|
-
*/
|
|
16
|
-
export type ValueFormat = 'json' | 'csv' | 'array';
|
|
17
|
-
/**
|
|
18
|
-
* Threshold behavior mode when pills exceed threshold
|
|
19
|
-
*/
|
|
20
|
-
export type PillsThresholdMode = 'count' | 'partial';
|
|
21
|
-
/**
|
|
22
|
-
* Display mode for selected items (pills area)
|
|
23
|
-
*/
|
|
24
|
-
export type PillsDisplayMode = 'pills' | 'count' | 'compact' | 'partial';
|
|
25
|
-
/**
|
|
26
|
-
* Support both object arrays and [key, value] tuples
|
|
27
|
-
*/
|
|
28
|
-
export type MultiSelectDataItem<T> = T | [string | number, string];
|
|
29
|
-
/**
|
|
30
|
-
* Generic configuration options for the MultiSelect component
|
|
31
|
-
* @template T The type of data items
|
|
32
|
-
*/
|
|
33
|
-
export interface MultiSelectConfig<T = any> {
|
|
34
|
-
/** Options array - can be objects or [key, value] tuples */
|
|
35
|
-
options?: T[];
|
|
36
|
-
/** Member property name for value/ID extraction */
|
|
37
|
-
valueMember?: string;
|
|
38
|
-
/** Callback to extract value/ID from item */
|
|
39
|
-
getValueCallback?: (item: T) => string | number;
|
|
40
|
-
/** Member property name for display value extraction */
|
|
41
|
-
displayValueMember?: string;
|
|
42
|
-
/** Callback to extract display value from item */
|
|
43
|
-
getDisplayValueCallback?: (item: T) => string;
|
|
44
|
-
/** Member property name for search value extraction */
|
|
45
|
-
searchValueMember?: string;
|
|
46
|
-
/** Callback to extract search value from item */
|
|
47
|
-
getSearchValueCallback?: (item: T) => string;
|
|
48
|
-
/** Member property name for icon extraction */
|
|
49
|
-
iconMember?: string;
|
|
50
|
-
/** Callback to extract icon from item */
|
|
51
|
-
getIconCallback?: (item: T) => string;
|
|
52
|
-
/** Member property name for subtitle extraction */
|
|
53
|
-
subtitleMember?: string;
|
|
54
|
-
/** Callback to extract subtitle from item */
|
|
55
|
-
getSubtitleCallback?: (item: T) => string;
|
|
56
|
-
/** Member property name for group extraction */
|
|
57
|
-
groupMember?: string;
|
|
58
|
-
/** Callback to extract group from item */
|
|
59
|
-
getGroupCallback?: (item: T) => string;
|
|
60
|
-
/** Member property name for disabled state extraction */
|
|
61
|
-
disabledMember?: string;
|
|
62
|
-
/** Callback to extract disabled state from item */
|
|
63
|
-
getDisabledCallback?: (item: T) => boolean;
|
|
64
|
-
/** HTML form field ID/name for hidden input */
|
|
65
|
-
formFieldId?: string;
|
|
66
|
-
/** Format for value serialization (forms and callbacks) */
|
|
67
|
-
valueFormat?: ValueFormat;
|
|
68
|
-
/** Custom callback to format value */
|
|
69
|
-
getValueFormatCallback?: (selectedValues: (string | number)[]) => string;
|
|
70
|
-
/** Allow multiple selections (internal: isMultipleEnabled) */
|
|
71
|
-
isMultipleEnabled?: boolean;
|
|
72
|
-
/** Enable search/filtering (internal: isSearchEnabled) */
|
|
73
|
-
isSearchEnabled?: boolean;
|
|
74
|
-
/** Allow grouping of options (internal: isGroupsAllowed) */
|
|
75
|
-
isGroupsAllowed?: boolean;
|
|
76
|
-
/** Show 'Select All' button (internal: isSelectAllAllowed) */
|
|
77
|
-
isSelectAllAllowed?: boolean;
|
|
78
|
-
/** Show 'Clear All' button (internal: isClearAllAllowed) */
|
|
79
|
-
isClearAllAllowed?: boolean;
|
|
80
|
-
/** Show checkboxes next to options (internal: isCheckboxesShown) */
|
|
81
|
-
isCheckboxesShown?: boolean;
|
|
82
|
-
/** Keep Select All/Clear All buttons fixed at top while scrolling (internal: isActionsSticky) */
|
|
83
|
-
isActionsSticky?: boolean;
|
|
84
|
-
/** Close dropdown after selecting an option (internal: isCloseOnSelect) */
|
|
85
|
-
isCloseOnSelect?: boolean;
|
|
86
|
-
/** Lock dropdown placement after first open (internal: isPlacementLocked) */
|
|
87
|
-
isPlacementLocked?: boolean;
|
|
88
|
-
/** Allow adding new options not in the list (internal: isAddNewAllowed) */
|
|
89
|
-
isAddNewAllowed?: boolean;
|
|
90
|
-
/** Show count badge next to toggle icon (internal: isCountBadgeShown) */
|
|
91
|
-
isCountBadgeShown?: boolean;
|
|
92
|
-
/** Hint text shown above the input when focused */
|
|
93
|
-
searchHint?: string;
|
|
94
|
-
/** Placeholder text for the search input */
|
|
95
|
-
searchPlaceholder?: string;
|
|
96
|
-
/** Minimum width for the dropdown (e.g., '20rem', '300px') */
|
|
97
|
-
dropdownMinWidth?: string | null;
|
|
98
|
-
/** Display mode for selected items in pills area */
|
|
99
|
-
pillsDisplayMode?: PillsDisplayMode;
|
|
100
|
-
/** Position of pills container */
|
|
101
|
-
pillsPosition?: PillsPosition;
|
|
102
|
-
/** Threshold behavior mode: 'count' shows count badge, 'partial' shows limited pills + more badge */
|
|
103
|
-
pillsThresholdMode?: PillsThresholdMode;
|
|
104
|
-
/** Maximum height for dropdown */
|
|
105
|
-
maxHeight?: string;
|
|
106
|
-
/** Message shown when no results found */
|
|
107
|
-
emptyMessage?: string;
|
|
108
|
-
/** Message shown while loading async data */
|
|
109
|
-
loadingMessage?: string;
|
|
110
|
-
/** Search input display mode */
|
|
111
|
-
searchInputMode?: SearchInputMode;
|
|
112
|
-
/** Auto-switch from pills to count when threshold is exceeded */
|
|
113
|
-
pillsThreshold?: number | null;
|
|
114
|
-
/** Maximum number of pills to show in partial mode (used with thresholdMode='partial') */
|
|
115
|
-
pillsMaxVisible?: number | null;
|
|
116
|
-
/** Minimum search length before loading data */
|
|
117
|
-
minSearchLength?: number;
|
|
118
|
-
/** Async function to load data: (searchTerm) => Promise<options[]> */
|
|
119
|
-
searchCallback?: ((searchTerm: string) => Promise<T[]>) | null;
|
|
120
|
-
/** Callback to add a new option when isAddNewAllowed is true */
|
|
121
|
-
addNewCallback?: ((value: string) => T | Promise<T>) | null;
|
|
122
|
-
/** Callback when an option is selected */
|
|
123
|
-
selectCallback?: ((option: T) => void) | null;
|
|
124
|
-
/** Callback when an option is deselected */
|
|
125
|
-
deselectCallback?: ((option: T) => void) | null;
|
|
126
|
-
/** Callback when selection changes */
|
|
127
|
-
changeCallback?: ((selectedOptions: T[]) => void) | null;
|
|
128
|
-
/** Callback to format count pill text (for i18n/pluralization). When moreCount is provided, it's for the "+X more" badge in partial mode. */
|
|
129
|
-
getCountPillCallback?: ((count: number, moreCount?: number) => string) | null;
|
|
130
|
-
/** Enable tooltips on selected item pills (internal: isPillTooltipsEnabled) */
|
|
131
|
-
isPillTooltipsEnabled?: boolean;
|
|
132
|
-
/** Callback to generate custom tooltip content for a pill */
|
|
133
|
-
getPillTooltipCallback?: ((item: T) => string | HTMLElement) | null;
|
|
134
|
-
/** Tooltip placement relative to pill */
|
|
135
|
-
pillTooltipPlacement?: Placement;
|
|
136
|
-
/** Delay before showing tooltip in milliseconds */
|
|
137
|
-
pillTooltipDelay?: number;
|
|
138
|
-
/** Offset distance for tooltip in pixels */
|
|
139
|
-
pillTooltipOffset?: number;
|
|
140
|
-
/** Container element for dropdown/hint/popover (for Shadow DOM support) */
|
|
141
|
-
container?: HTMLElement | null;
|
|
142
|
-
/** Host element for appending hidden inputs (for form integration with shadow DOM) */
|
|
143
|
-
hostElement?: HTMLElement;
|
|
144
|
-
}
|
|
145
|
-
/**
|
|
146
|
-
* Event detail structure for multiselect events
|
|
147
|
-
* @template T The type of data items
|
|
148
|
-
*/
|
|
149
|
-
export interface MultiSelectEventDetail<T = any> {
|
|
150
|
-
/** Currently selected options */
|
|
151
|
-
selectedOptions: T[];
|
|
152
|
-
/** Selected values array */
|
|
153
|
-
selectedValues: (string | number)[];
|
|
154
|
-
/** The option that triggered the event (for select/deselect) */
|
|
155
|
-
option?: T;
|
|
156
|
-
}
|
|
157
|
-
/**
|
|
158
|
-
* Legacy interface for backward reference
|
|
159
|
-
* Note: New code should use generic types with member/callback properties
|
|
160
|
-
* @deprecated Use generic types with valueMember/displayValueMember instead
|
|
161
|
-
*/
|
|
162
|
-
export interface MultiSelectOption {
|
|
163
|
-
/** Unique identifier for the option */
|
|
164
|
-
value: string;
|
|
165
|
-
/** Display label */
|
|
166
|
-
label: string;
|
|
167
|
-
/** Optional icon or emoji */
|
|
168
|
-
icon?: string;
|
|
169
|
-
/** Optional subtitle/description */
|
|
170
|
-
subtitle?: string;
|
|
171
|
-
/** Optional group name */
|
|
172
|
-
group?: string;
|
|
173
|
-
/** Whether the option is disabled */
|
|
174
|
-
disabled?: boolean;
|
|
175
|
-
}
|
|
176
|
-
/**
|
|
177
|
-
* Legacy options interface
|
|
178
|
-
* @deprecated Use MultiSelectConfig<T> instead
|
|
179
|
-
*/
|
|
180
|
-
export interface MultiSelectOptions extends MultiSelectConfig<MultiSelectOption> {
|
|
181
|
-
options?: MultiSelectOption[];
|
|
182
|
-
searchCallback?: ((searchTerm: string) => Promise<MultiSelectOption[]>) | null;
|
|
183
|
-
addNewCallback?: ((value: string) => MultiSelectOption | Promise<MultiSelectOption>) | null;
|
|
184
|
-
selectCallback?: ((option: MultiSelectOption) => void) | null;
|
|
185
|
-
deselectCallback?: ((option: MultiSelectOption) => void) | null;
|
|
186
|
-
changeCallback?: ((selectedOptions: MultiSelectOption[]) => void) | null;
|
|
187
|
-
}
|
package/dist/web-component.d.ts
DELETED
|
@@ -1,103 +0,0 @@
|
|
|
1
|
-
export declare function getAllInstances(): MultiSelectElement[];
|
|
2
|
-
export declare class MultiSelectElement<T = any> extends HTMLElement {
|
|
3
|
-
private picker?;
|
|
4
|
-
private containerElement?;
|
|
5
|
-
private shadow;
|
|
6
|
-
private _options?;
|
|
7
|
-
private _valueMember?;
|
|
8
|
-
private _getValueCallback?;
|
|
9
|
-
private _displayValueMember?;
|
|
10
|
-
private _getDisplayValueCallback?;
|
|
11
|
-
private _searchValueMember?;
|
|
12
|
-
private _getSearchValueCallback?;
|
|
13
|
-
private _iconMember?;
|
|
14
|
-
private _getIconCallback?;
|
|
15
|
-
private _subtitleMember?;
|
|
16
|
-
private _getSubtitleCallback?;
|
|
17
|
-
private _groupMember?;
|
|
18
|
-
private _getGroupCallback?;
|
|
19
|
-
private _disabledMember?;
|
|
20
|
-
private _getDisabledCallback?;
|
|
21
|
-
private _getValueFormatCallback?;
|
|
22
|
-
private _getPillTooltipCallback?;
|
|
23
|
-
private _getCountPillCallback?;
|
|
24
|
-
private _searchCallback?;
|
|
25
|
-
private _addNewCallback?;
|
|
26
|
-
private _selectCallback?;
|
|
27
|
-
private _deselectCallback?;
|
|
28
|
-
private _changeCallback?;
|
|
29
|
-
static get observedAttributes(): string[];
|
|
30
|
-
constructor();
|
|
31
|
-
connectedCallback(): void;
|
|
32
|
-
disconnectedCallback(): void;
|
|
33
|
-
attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
|
|
34
|
-
private render;
|
|
35
|
-
private renderDebugInfo;
|
|
36
|
-
private updateDebugInfo;
|
|
37
|
-
private initializePicker;
|
|
38
|
-
private reinitialize;
|
|
39
|
-
get options(): T[] | undefined;
|
|
40
|
-
set options(value: T[] | undefined);
|
|
41
|
-
set valueMember(value: string | null);
|
|
42
|
-
get valueMember(): string | null;
|
|
43
|
-
set displayValueMember(value: string | null);
|
|
44
|
-
get displayValueMember(): string | null;
|
|
45
|
-
set searchValueMember(value: string | null);
|
|
46
|
-
get searchValueMember(): string | null;
|
|
47
|
-
set iconMember(value: string | null);
|
|
48
|
-
get iconMember(): string | null;
|
|
49
|
-
set subtitleMember(value: string | null);
|
|
50
|
-
get subtitleMember(): string | null;
|
|
51
|
-
set groupMember(value: string | null);
|
|
52
|
-
get groupMember(): string | null;
|
|
53
|
-
set disabledMember(value: string | null);
|
|
54
|
-
get disabledMember(): string | null;
|
|
55
|
-
set getValueCallback(callback: ((item: T) => string | number) | undefined);
|
|
56
|
-
get getValueCallback(): ((item: T) => string | number) | undefined;
|
|
57
|
-
set getDisplayValueCallback(callback: ((item: T) => string) | undefined);
|
|
58
|
-
get getDisplayValueCallback(): ((item: T) => string) | undefined;
|
|
59
|
-
set getSearchValueCallback(callback: ((item: T) => string) | undefined);
|
|
60
|
-
get getSearchValueCallback(): ((item: T) => string) | undefined;
|
|
61
|
-
set getIconCallback(callback: ((item: T) => string) | undefined);
|
|
62
|
-
get getIconCallback(): ((item: T) => string) | undefined;
|
|
63
|
-
set getSubtitleCallback(callback: ((item: T) => string) | undefined);
|
|
64
|
-
get getSubtitleCallback(): ((item: T) => string) | undefined;
|
|
65
|
-
set getGroupCallback(callback: ((item: T) => string) | undefined);
|
|
66
|
-
get getGroupCallback(): ((item: T) => string) | undefined;
|
|
67
|
-
set getDisabledCallback(callback: ((item: T) => boolean) | undefined);
|
|
68
|
-
get getDisabledCallback(): ((item: T) => boolean) | undefined;
|
|
69
|
-
set name(value: string | null);
|
|
70
|
-
get name(): string | null;
|
|
71
|
-
set valueFormat(value: 'json' | 'csv' | 'array' | null);
|
|
72
|
-
get valueFormat(): string | null;
|
|
73
|
-
set getValueFormatCallback(callback: ((values: (string | number)[]) => string) | undefined);
|
|
74
|
-
get getValueFormatCallback(): ((values: (string | number)[]) => string) | undefined;
|
|
75
|
-
set thresholdMode(value: 'count' | 'partial' | null);
|
|
76
|
-
get thresholdMode(): string | null;
|
|
77
|
-
set pillsMaxVisible(value: number | null);
|
|
78
|
-
get pillsMaxVisible(): number | null;
|
|
79
|
-
set enablePillTooltips(value: boolean);
|
|
80
|
-
get enablePillTooltips(): boolean;
|
|
81
|
-
set pillTooltipPlacement(value: string | null);
|
|
82
|
-
get pillTooltipPlacement(): string | null;
|
|
83
|
-
set getPillTooltipCallback(callback: ((item: T) => string | HTMLElement) | undefined);
|
|
84
|
-
get getPillTooltipCallback(): ((item: T) => string | HTMLElement) | undefined;
|
|
85
|
-
set getCountPillCallback(callback: ((count: number, moreCount?: number) => string) | undefined);
|
|
86
|
-
get getCountPillCallback(): ((count: number, moreCount?: number) => string) | undefined;
|
|
87
|
-
get searchCallback(): ((searchTerm: string) => Promise<T[]>) | undefined;
|
|
88
|
-
set searchCallback(callback: ((searchTerm: string) => Promise<T[]>) | undefined);
|
|
89
|
-
get addNewCallback(): ((value: string) => T | Promise<T>) | undefined;
|
|
90
|
-
set addNewCallback(callback: ((value: string) => T | Promise<T>) | undefined);
|
|
91
|
-
get selectCallback(): ((option: T) => void) | undefined;
|
|
92
|
-
set selectCallback(callback: ((option: T) => void) | undefined);
|
|
93
|
-
get deselectCallback(): ((option: T) => void) | undefined;
|
|
94
|
-
set deselectCallback(callback: ((option: T) => void) | undefined);
|
|
95
|
-
get changeCallback(): ((selectedOptions: T[]) => void) | undefined;
|
|
96
|
-
set changeCallback(callback: ((selectedOptions: T[]) => void) | undefined);
|
|
97
|
-
get selectedValue(): string | number | (string | number)[] | null;
|
|
98
|
-
get selectedItem(): T | null;
|
|
99
|
-
getSelected(): T[];
|
|
100
|
-
setSelected(values: (string | number)[]): void;
|
|
101
|
-
getValue(): string | number | (string | number)[] | null;
|
|
102
|
-
destroy(): void;
|
|
103
|
-
}
|