@keenmate/web-multiselect 1.0.0-rc04 → 1.0.0-rc05

package/README.md

@@ -3,7 +3,7 @@
 [![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](LICENSE)
 [![npm version](https://img.shields.io/npm/v/@keenmate/web-multiselect.svg)](https://www.npmjs.com/package/@keenmate/web-multiselect)
 
-A lightweight, accessible multiselect web component with typeahead search, rich content support, and excellent keyboard navigation.
+A lightweight, accessible multiselect web component with typeahead search, RTL language support, rich content, and excellent keyboard navigation.
 
 ## Features
 
@@ -17,6 +17,7 @@ A lightweight, accessible multiselect web component with typeahead search, rich
 - 📦 **Grouped Options** - Organize options into collapsible groups
 - 🎉 **Smart Positioning** - Uses Floating UI for intelligent dropdown placement
 - 🌍 **i18n Support** - Customizable callbacks for pluralization and localization
+- 🌐 **RTL Support** - Full right-to-left language support (Arabic, Hebrew, Persian, Urdu, etc.)
 - ✨ **Modern** - Web Component with Shadow DOM, TypeScript, bundled with Vite
 - 🌐 **Framework Agnostic** - Works with any framework or vanilla JS
 
@@ -87,7 +88,7 @@ multiselect.setSelected(['js', 'ts']);
 | `show-checkboxes` | `boolean` | `true` | Show checkboxes next to options |
 | `close-on-select` | `boolean` | `false` | Close dropdown after selecting |
 | `dropdown-min-width` | `string` | - | Min width for dropdown (e.g., '20rem') |
-| `pills-display-mode` | `'pills' \| 'count' \| 'compact'` | `'pills'` | How to display selected items |
+| `pills-display-mode` | `'pills' \| 'count' \| 'compact' \| 'partial'` | `'pills'` | How to display selected items |
 | `pills-threshold` | `number` | - | Auto-switch mode when exceeded (see pills-threshold-mode) |
 | `pills-threshold-mode` | `'count' \| 'partial'` | `'count'` | Mode after threshold: 'count' shows badge, 'partial' shows limited pills + more badge |
 | `pills-max-visible` | `number` | `3` | Max pills shown in partial mode |
@@ -101,6 +102,20 @@ multiselect.setSelected(['js', 'ts']);
 | `empty-message` | `string` | `'No results found'` | Message when no options found |
 | `loading-message` | `string` | `'Loading...'` | Message while loading async data |
 | `min-search-length` | `number` | `0` | Minimum search length for async |
+| `sticky-actions` | `boolean` | `true` | Keep Select All/Clear All buttons fixed at top while scrolling |
+| `lock-placement` | `boolean` | `true` | Lock dropdown placement after first open to prevent flipping |
+| `enable-search` | `boolean` | `true` | Enable/disable search functionality |
+| `search-input-mode` | `'normal' \| 'readonly' \| 'hidden'` | `'normal'` | Search input display mode |
+| `allow-add-new` | `boolean` | `false` | Allow adding new options not in the list |
+| `value-member` | `string` | - | Property name for value/ID extraction from custom objects |
+| `display-value-member` | `string` | - | Property name for display text extraction from custom objects |
+| `search-value-member` | `string` | - | Property name for search text extraction from custom objects |
+| `icon-member` | `string` | - | Property name for icon extraction from custom objects |
+| `subtitle-member` | `string` | - | Property name for subtitle extraction from custom objects |
+| `group-member` | `string` | - | Property name for group extraction from custom objects |
+| `disabled-member` | `string` | - | Property name for disabled state extraction from custom objects |
+| `name` | `string` | - | HTML form field name for form integration (creates hidden input) |
+| `value-format` | `'json' \| 'csv' \| 'array'` | `'json'` | Format for form value serialization |
 | `initial-values` | `string` (JSON array) | - | Pre-selected values |
 
 ## Properties
@@ -131,6 +146,12 @@ multiselect.onChange = (selectedOptions) => {
   console.log('Changed:', selectedOptions);
 };
 
+// Pill display customization (show different text in pills vs dropdown)
+multiselect.getPillDisplayCallback = (item) => {
+  // Show shorter text in pills (e.g., just name instead of "name (email)")
+  return item.name; // Dropdown might show "John Doe (john@example.com)"
+};
+
 // Pill tooltip customization
 multiselect.getPillTooltipCallback = (item) => {
   return `${item.label} - ${item.subtitle}`;
@@ -143,14 +164,51 @@ multiselect.getCountPillCallback = (count, moreCount) => {
   }
   return `${count} selected`; // Count mode display
 };
+
+// Data extraction - Member properties (for simple property names)
+multiselect.valueMember = 'id';
+multiselect.displayValueMember = 'name';
+multiselect.iconMember = 'icon';
+multiselect.subtitleMember = 'description';
+multiselect.groupMember = 'category';
+multiselect.disabledMember = 'isDisabled';
+
+// Data extraction - Callback functions (for complex logic)
+multiselect.getValueCallback = (item) => item.id || item.value;
+multiselect.getDisplayValueCallback = (item) => item.label || item.name;
+multiselect.getSearchValueCallback = (item) => `${item.name} ${item.tags.join(' ')}`;
+multiselect.getIconCallback = (item) => item.icon || '📄';
+multiselect.getSubtitleCallback = (item) => `${item.price} - ${item.stock} in stock`;
+multiselect.getGroupCallback = (item) => item.category;
+multiselect.getDisabledCallback = (item) => item.stock === 0;
+
+// Form integration
+multiselect.name = 'selected_items';
+multiselect.valueFormat = 'json'; // 'json' | 'csv' | 'array'
+multiselect.getValueFormatCallback = (values) => values.join('|'); // Custom format
+
+// Read-only properties
+const selectedValue = multiselect.selectedValue; // string | number | array | null
+const selectedItem = multiselect.selectedItem; // First selected item object
+
+// Add new option callback
+multiselect.addNewCallback = async (value) => {
+  // Validate and create new option
+  const newOption = await fetch('/api/options', {
+    method: 'POST',
+    body: JSON.stringify({ name: value })
+  }).then(r => r.json());
+  return newOption;
+};
 ```
 
 ## Methods
 
 | Method | Description |
 |--------|-------------|
-| `getSelected()` | Get currently selected options |
-| `setSelected(values: string[])` | Set selected values |
+| `getSelected()` | Get currently selected options as array of option objects |
+| `setSelected(values: (string \| number)[])` | Set selected values by ID/value |
+| `getValue()` | Get selected value(s) - returns single value in single-select mode, array in multi-select mode |
 | `destroy()` | Clean up and destroy instance |
 
 ## Events
@@ -272,7 +330,7 @@ Perfect for different use cases and space constraints:
 
 ### Pills Positioning
 
-Control where selected item badges appear:
+Control where selected item badges appear relative to the input:
 
 ```html
 <!-- Pills below input (default) -->
@@ -281,13 +339,15 @@ Control where selected item badges appear:
 <!-- Pills above input -->
 <multi-select pills-position="top"></multi-select>
 
-<!-- Pills to the left (RTL) -->
+<!-- Pills to the left of input -->
 <multi-select pills-position="left"></multi-select>
 
-<!-- Pills to the right (LTR) -->
+<!-- Pills to the right of input -->
 <multi-select pills-position="right"></multi-select>
 ```
 
+**Note:** In RTL mode, left/right positions are automatically mirrored - `pills-position="left"` will appear on the physical right side in RTL languages.
+
 ### Pill Tooltips
 
 Enable tooltips on selected item pills with customizable placement and delay:
@@ -342,6 +402,287 @@ Customize count pill text for proper pluralization and localization:
 </script>
 ```
 
+### Right-to-Left (RTL) Language Support
+
+Full RTL support for Arabic, Hebrew, Persian, Urdu, and other right-to-left languages with automatic detection and complete UI mirroring:
+
+```html
+<!-- Automatic RTL detection from dir attribute -->
+<multi-select dir="rtl" search-placeholder="ابحث..."></multi-select>
+
+<!-- RTL inherited from parent element -->
+<div dir="rtl">
+  <multi-select search-placeholder="חיפוש..."></multi-select>
+</div>
+
+<!-- RTL on page level -->
+<html dir="rtl">
+  <!-- All multi-selects will auto-detect RTL -->
+</html>
+```
+
+**RTL Features:**
+- ✅ **Auto-detection** - Detects `dir="rtl"` on component or any ancestor element
+- ✅ **Complete UI mirroring** - Toggle icon, text alignment, pills, dropdown, badges
+- ✅ **Logical positioning** - `pills-position="left"` becomes physically right in RTL
+- ✅ **Pills remove buttons** - Flip to left side in RTL mode
+- ✅ **Text direction** - All text content properly right-aligned
+- ✅ **No configuration needed** - Just set `dir="rtl"` attribute
+
+### Flexible Data Handling
+
+The component supports **any data structure** through a member/callback pattern, allowing you to work with custom objects, tuple arrays, or existing API responses without transformation.
+
+#### Member Properties (Simple Property Names)
+
+For objects with consistent property names, use member attributes:
+
+```html
+<multi-select
+  id="products"
+  value-member="productId"
+  display-value-member="productName"
+  icon-member="icon"
+  subtitle-member="description"
+  group-member="category">
+</multi-select>
+
+<script type="module">
+  const select = document.getElementById('products');
+  select.options = [
+    {
+      productId: 'p1',
+      productName: 'Laptop',
+      icon: '💻',
+      description: 'High-performance laptop',
+      category: 'Electronics'
+    },
+    {
+      productId: 'p2',
+      productName: 'Mouse',
+      icon: '🖱️',
+      description: 'Wireless mouse',
+      category: 'Electronics'
+    }
+  ];
+</script>
+```
+
+#### Callback Functions (Complex Logic)
+
+For complex data extraction or conditional logic, use callbacks:
+
+```javascript
+const select = document.querySelector('multi-select');
+
+// Custom value extraction
+select.getValueCallback = (item) => item.id || item.code || item.value;
+
+// Combine multiple fields for display
+select.getDisplayValueCallback = (item) => {
+  return `${item.firstName} ${item.lastName}`;
+};
+
+// Include multiple fields in search
+select.getSearchValueCallback = (item) => {
+  return `${item.name} ${item.sku} ${item.tags.join(' ')}`;
+};
+
+// Conditional icons
+select.getIconCallback = (item) => {
+  return item.inStock ? '✅' : '❌';
+};
+
+// Dynamic subtitles
+select.getSubtitleCallback = (item) => {
+  return `$${item.price} - ${item.stock} in stock`;
+};
+
+// Disable based on conditions
+select.getDisabledCallback = (item) => {
+  return item.stock === 0 || item.discontinued;
+};
+
+// Customize pill display (show different text in pills vs dropdown)
+select.getPillDisplayCallback = (item) => {
+  // Pills show just the name for space efficiency
+  return item.name;
+  // While dropdown can show full details: "Laptop - $999 - Electronics"
+};
+```
+
+#### Tuple Array Auto-Detection
+
+The component automatically detects `[key, value]` tuple arrays:
+
+```javascript
+select.options = [
+  ['js', 'JavaScript'],
+  ['ts', 'TypeScript'],
+  ['py', 'Python']
+];
+// First element becomes value, second becomes display text
+```
+
+#### Priority Order
+
+When multiple extraction methods are defined, the component uses this priority:
+
+1. **Callbacks** (highest priority) - `getValueCallback`, `getDisplayValueCallback`, etc.
+2. **Member properties** - `valueMember`, `displayValueMember`, etc.
+3. **Default properties** (lowest priority) - Falls back to `value`, `label`, `name`, etc.
+
+#### TypeScript Support
+
+The component is fully typed with generics:
+
+```typescript
+import type { MultiSelectElement } from '@keenmate/web-multiselect';
+
+interface Product {
+  id: string;
+  name: string;
+  price: number;
+  category: string;
+}
+
+const select = document.querySelector<MultiSelectElement<Product>>('multi-select');
+select.options = [
+  { id: 'p1', name: 'Laptop', price: 999, category: 'Electronics' }
+];
+```
+
+### Form Integration
+
+The component seamlessly integrates with standard HTML forms by automatically creating hidden inputs in the light DOM (outside Shadow DOM) so FormData can access them.
+
+#### Basic Form Integration
+
+```html
+<form id="userForm" action="/submit" method="POST">
+  <label>Select Skills:</label>
+  <multi-select
+    name="skills"
+    value-format="json"
+    multiple="true">
+  </multi-select>
+
+  <button type="submit">Submit</button>
+</form>
+
+<script type="module">
+  import '@keenmate/web-multiselect';
+
+  const form = document.getElementById('userForm');
+  const select = form.querySelector('multi-select');
+
+  select.options = [
+    { value: 'js', label: 'JavaScript' },
+    { value: 'ts', label: 'TypeScript' },
+    { value: 'py', label: 'Python' }
+  ];
+
+  form.addEventListener('submit', (e) => {
+    e.preventDefault();
+    const formData = new FormData(form);
+
+    // Access the value
+    const skills = formData.get('skills');
+    console.log('Selected skills:', skills);
+    // Output: ["js","ts"] (JSON string)
+  });
+</script>
+```
+
+#### Value Formats
+
+Choose how selected values are serialized in forms:
+
+**JSON Format** (default):
+```html
+<multi-select name="items" value-format="json"></multi-select>
+<!-- FormData result: items = ["item1","item2","item3"] -->
+```
+
+**CSV Format**:
+```html
+<multi-select name="items" value-format="csv"></multi-select>
+<!-- FormData result: items = "item1,item2,item3" -->
+```
+
+**Array Format** (multiple inputs):
+```html
+<multi-select name="items" value-format="array"></multi-select>
+<!-- FormData result:
+     items[] = "item1"
+     items[] = "item2"
+     items[] = "item3"
+-->
+```
+
+#### Custom Value Formatting
+
+For advanced use cases, provide a custom formatting function:
+
+```javascript
+const select = document.querySelector('multi-select');
+
+select.name = 'product_ids';
+select.getValueFormatCallback = (values) => {
+  // Custom format: pipe-separated with prefix
+  return values.map(v => `ID:${v}`).join('|');
+};
+
+// When submitted, FormData will have:
+// product_ids = "ID:123|ID:456|ID:789"
+```
+
+#### Using getValue() for JavaScript Submissions
+
+For JavaScript-based form submissions (AJAX, fetch), use `getValue()`:
+
+```javascript
+// Single-select mode
+const select = document.querySelector('multi-select[multiple="false"]');
+const selectedId = select.getValue();
+// Returns: "js" or null
+
+// Multi-select mode
+const multiSelect = document.querySelector('multi-select[multiple="true"]');
+const selectedIds = multiSelect.getValue();
+// Returns: ["js", "ts", "py"] or []
+
+// Submit with fetch
+const response = await fetch('/api/update', {
+  method: 'POST',
+  headers: { 'Content-Type': 'application/json' },
+  body: JSON.stringify({
+    skills: multiSelect.getValue()
+  })
+});
+```
+
+#### Working with Numeric Values
+
+The component handles both string and numeric values correctly:
+
+```javascript
+select.options = [
+  { value: 1, label: 'Option 1' },
+  { value: 2, label: 'Option 2' },
+  { value: 3, label: 'Option 3' }
+];
+
+// getValue() preserves types
+const values = select.getValue();
+// Returns: [1, 2, 3] (numbers, not strings)
+
+// FormData serialization
+// JSON format: [1,2,3]
+// CSV format: 1,2,3
+// Array format: items[]=1, items[]=2, items[]=3
+```
+
 ### Disabled Options
 
 ```javascript
@@ -409,7 +750,15 @@ You can customize the component using CSS variables even with just a `<script>`
 
 ### Available CSS Variables
 
-All 211 SCSS variables are exposed as CSS custom properties with fallbacks. Below are the most commonly customized variables organized by category. For the complete list, see [_multiselect.scss](./src/scss/_multiselect.scss).
+The component exposes 200+ SCSS variables as CSS custom properties with fallbacks. Below are the **50+ most commonly customized variables** organized by category.
+
+For the complete list of all available CSS variables, see the SCSS source files:
+- [_variables.scss](./src/scss/_variables.scss) - Foundation variables (colors, spacing, typography)
+- [_input-dropdown.scss](./src/scss/_input-dropdown.scss) - Input and dropdown styles
+- [_pills-display.scss](./src/scss/_pills-display.scss) - Pills and count display
+- [_options.scss](./src/scss/_options.scss) - Options and groups
+- [_tooltip.scss](./src/scss/_tooltip.scss) - Tooltip styles
+- [_rtl.scss](./src/scss/_rtl.scss) - RTL overrides
 
 #### Colors
 

package/dist/multiselect.js

@@ -51,12 +51,12 @@ function Qe(i) {
 function fe(i) {
   return i.replace(/start|end/g, (e) => Je[e]);
 }
-const Ae = ["left", "right"], Pe = ["right", "left"], et = ["top", "bottom"], tt = ["bottom", "top"];
+const Pe = ["left", "right"], Ae = ["right", "left"], et = ["top", "bottom"], tt = ["bottom", "top"];
 function it(i, e, t) {
   switch (i) {
     case "top":
     case "bottom":
-      return t ? e ? Pe : Ae : e ? Ae : Pe;
+      return t ? e ? Ae : Pe : e ? Pe : Ae;
     case "left":
     case "right":
       return e ? et : tt;
@@ -301,7 +301,7 @@ const rt = function(i) {
         const $ = (((ye = s.flip) == null ? void 0 : ye.index) || 0) + 1, he = F[$];
         if (he && (!(d === "alignment" ? _ !== V(he) : !1) || // We leave the current main axis only if every placement on that axis
         // overflows the main axis.
-        B.every((A) => V(A.placement) === _ ? A.overflows[0] > 0 : !0)))
+        B.every((P) => V(P.placement) === _ ? P.overflows[0] > 0 : !0)))
           return {
             data: {
               index: $,
@@ -311,20 +311,20 @@ const rt = function(i) {
               placement: he
             }
           };
-        let K = (xe = B.filter((L) => L.overflows[0] <= 0).sort((L, A) => L.overflows[1] - A.overflows[1])[0]) == null ? void 0 : xe.placement;
+        let K = (xe = B.filter((L) => L.overflows[0] <= 0).sort((L, P) => L.overflows[1] - P.overflows[1])[0]) == null ? void 0 : xe.placement;
         if (!K)
           switch (u) {
             case "bestFit": {
               var Ce;
-              const L = (Ce = B.filter((A) => {
+              const L = (Ce = B.filter((P) => {
                 if (G) {
-                  const I = V(A.placement);
-                  return I === _ || // Create a bias to the `y` side axis due to horizontal
+                  const M = V(P.placement);
+                  return M === _ || // Create a bias to the `y` side axis due to horizontal
                   // reading directions favoring greater width.
-                  I === "y";
+                  M === "y";
                 }
                 return !0;
-              }).map((A) => [A.placement, A.overflows.filter((I) => I > 0).reduce((I, Ke) => I + Ke, 0)]).sort((A, I) => A[1] - I[1])[0]) == null ? void 0 : Ce[0];
+              }).map((P) => [P.placement, P.overflows.filter((M) => M > 0).reduce((M, Ke) => M + Ke, 0)]).sort((P, M) => P[1] - M[1])[0]) == null ? void 0 : Ce[0];
               L && (K = L);
               break;
             }
@@ -459,14 +459,14 @@ function k(i) {
   var e;
   return (i == null || (e = i.ownerDocument) == null ? void 0 : e.defaultView) || window;
 }
-function M(i) {
+function I(i) {
   var e;
   return (e = (Le(i) ? i.ownerDocument : i.document) || window.document) == null ? void 0 : e.documentElement;
 }
 function Le(i) {
   return re() ? i instanceof Node || i instanceof k(i).Node : !1;
 }
-function P(i) {
+function A(i) {
   return re() ? i instanceof Element || i instanceof k(i).Element : !1;
 }
 function T(i) {
@@ -501,7 +501,7 @@ function ae(i) {
 }
 const gt = ["transform", "translate", "scale", "rotate", "perspective"], bt = ["transform", "translate", "scale", "rotate", "perspective", "filter"], vt = ["paint", "layout", "strict", "content"];
 function ve(i) {
-  const e = we(), t = P(i) ? S(i) : i;
+  const e = we(), t = A(i) ? S(i) : i;
   return gt.some((l) => t[l] ? t[l] !== "none" : !1) || (t.containerType ? t.containerType !== "normal" : !1) || !e && (t.backdropFilter ? t.backdropFilter !== "none" : !1) || !e && (t.filter ? t.filter !== "none" : !1) || bt.some((l) => (t.willChange || "").includes(l)) || vt.some((l) => (t.contain || "").includes(l));
 }
 function wt(i) {
@@ -526,7 +526,7 @@ function S(i) {
   return k(i).getComputedStyle(i);
 }
 function ce(i) {
-  return P(i) ? {
+  return A(i) ? {
     scrollLeft: i.scrollLeft,
     scrollTop: i.scrollTop
   } : {
@@ -542,7 +542,7 @@ function D(i) {
     i.assignedSlot || // DOM Element detected.
     i.parentNode || // ShadowRoot detected.
     Oe(i) && i.host || // Fallback.
-    M(i)
+    I(i)
   );
   return Oe(e) ? e.host : e;
 }
@@ -574,7 +574,7 @@ function Re(i) {
   };
 }
 function _e(i) {
-  return P(i) ? i : i.contextElement;
+  return A(i) ? i : i.contextElement;
 }
 function H(i) {
   const e = _e(i);
@@ -606,11 +606,11 @@ function N(i, e, t, l) {
   e === void 0 && (e = !1), t === void 0 && (t = !1);
   const o = i.getBoundingClientRect(), s = _e(i);
   let n = O(1);
-  e && (l ? P(l) && (n = H(l)) : n = H(i));
+  e && (l ? A(l) && (n = H(l)) : n = H(i));
   const r = xt(s, t, l) ? Ne(s) : O(0);
   let a = (o.left + r.x) / n.x, c = (o.top + r.y) / n.y, p = o.width / n.x, d = o.height / n.y;
   if (s) {
-    const m = k(s), u = l && P(l) ? k(l) : l;
+    const m = k(s), u = l && A(l) ? k(l) : l;
     let g = m, v = ge(g);
     for (; v && l && u !== g; ) {
       const w = H(v), b = v.getBoundingClientRect(), _ = S(v), y = b.left + (v.clientLeft + parseFloat(_.paddingLeft)) * w.x, C = b.top + (v.clientTop + parseFloat(_.paddingTop)) * w.y;
@@ -626,7 +626,7 @@ function N(i, e, t, l) {
 }
 function de(i, e) {
   const t = ce(i).scrollLeft;
-  return e ? e.left + t : N(M(i)).left + t;
+  return e ? e.left + t : N(I(i)).left + t;
 }
 function Fe(i, e) {
   const t = i.getBoundingClientRect(), l = t.left + e.scrollLeft - de(i, t), o = t.top + e.scrollTop;
@@ -642,7 +642,7 @@ function Ct(i) {
     offsetParent: l,
     strategy: o
   } = i;
-  const s = o === "fixed", n = M(l), r = e ? ae(e.floating) : !1;
+  const s = o === "fixed", n = I(l), r = e ? ae(e.floating) : !1;
   if (l === n || r && s)
     return t;
   let a = {
@@ -665,8 +665,8 @@ function Ct(i) {
 function kt(i) {
   return Array.from(i.getClientRects());
 }
-function At(i) {
-  const e = M(i), t = ce(i), l = i.ownerDocument.body, o = z(e.scrollWidth, e.clientWidth, l.scrollWidth, l.clientWidth), s = z(e.scrollHeight, e.clientHeight, l.scrollHeight, l.clientHeight);
+function Pt(i) {
+  const e = I(i), t = ce(i), l = i.ownerDocument.body, o = z(e.scrollWidth, e.clientWidth, l.scrollWidth, l.clientWidth), s = z(e.scrollHeight, e.clientHeight, l.scrollHeight, l.clientHeight);
   let n = -t.scrollLeft + de(i);
   const r = -t.scrollTop;
   return S(l).direction === "rtl" && (n += z(e.clientWidth, l.clientWidth) - o), {
@@ -677,8 +677,8 @@ function At(i) {
   };
 }
 const Te = 25;
-function Pt(i, e) {
-  const t = k(i), l = M(i), o = t.visualViewport;
+function At(i, e) {
+  const t = k(i), l = I(i), o = t.visualViewport;
   let s = l.clientWidth, n = l.clientHeight, r = 0, a = 0;
   if (o) {
     s = o.width, n = o.height;
@@ -707,13 +707,13 @@ function Ot(i, e) {
     y: c
   };
 }
-function Me(i, e, t) {
+function Ie(i, e, t) {
   let l;
   if (e === "viewport")
-    l = Pt(i, t);
+    l = At(i, t);
   else if (e === "document")
-    l = At(M(i));
-  else if (P(e))
+    l = Pt(I(i));
+  else if (A(e))
     l = Ot(e, t);
   else {
     const o = Ne(i);
@@ -728,22 +728,22 @@ function Me(i, e, t) {
 }
 function Be(i, e) {
   const t = D(i);
-  return t === e || !P(t) || W(t) ? !1 : S(t).position === "fixed" || Be(t, e);
+  return t === e || !A(t) || W(t) ? !1 : S(t).position === "fixed" || Be(t, e);
 }
 function Tt(i, e) {
   const t = e.get(i);
   if (t)
     return t;
-  let l = U(i, [], !1).filter((r) => P(r) && j(r) !== "body"), o = null;
+  let l = U(i, [], !1).filter((r) => A(r) && j(r) !== "body"), o = null;
   const s = S(i).position === "fixed";
   let n = s ? D(i) : i;
-  for (; P(n) && !W(n); ) {
+  for (; A(n) && !W(n); ) {
     const r = S(n), a = ve(n);
     !a && r.position === "fixed" && (o = null), (s ? !a && !o : !a && r.position === "static" && !!o && St.has(o.position) || Y(n) && !a && Be(i, n)) ? l = l.filter((p) => p !== n) : o = r, n = D(n);
   }
   return e.set(i, l), l;
 }
-function Mt(i) {
+function It(i) {
   let {
     element: e,
     boundary: t,
@@ -751,9 +751,9 @@ function Mt(i) {
     strategy: o
   } = i;
   const n = [...t === "clippingAncestors" ? ae(e) ? [] : Tt(e, this._c) : [].concat(t), l], r = n[0], a = n.reduce((c, p) => {
-    const d = Me(e, p, o);
+    const d = Ie(e, p, o);
     return c.top = z(d.top, c.top), c.right = te(d.right, c.right), c.bottom = te(d.bottom, c.bottom), c.left = z(d.left, c.left), c;
-  }, Me(e, r, o));
+  }, Ie(e, r, o));
   return {
     width: a.right - a.left,
     height: a.bottom - a.top,
@@ -761,7 +761,7 @@ function Mt(i) {
     y: a.top
   };
 }
-function It(i) {
+function Mt(i) {
   const {
     width: e,
     height: t
@@ -772,7 +772,7 @@ function It(i) {
   };
 }
 function Et(i, e, t) {
-  const l = T(e), o = M(e), s = t === "fixed", n = N(i, !0, s, e);
+  const l = T(e), o = I(e), s = t === "fixed", n = N(i, !0, s, e);
   let r = {
     scrollLeft: 0,
     scrollTop: 0
@@ -798,13 +798,13 @@ function Et(i, e, t) {
 function ue(i) {
   return S(i).position === "static";
 }
-function Ie(i, e) {
+function Me(i, e) {
   if (!T(i) || S(i).position === "fixed")
     return null;
   if (e)
     return e(i);
   let t = i.offsetParent;
-  return M(i) === t && (t = t.ownerDocument.body), t;
+  return I(i) === t && (t = t.ownerDocument.body), t;
 }
 function He(i, e) {
   const t = k(i);
@@ -813,15 +813,15 @@ function He(i, e) {
   if (!T(i)) {
     let o = D(i);
     for (; o && !W(o); ) {
-      if (P(o) && !ue(o))
+      if (A(o) && !ue(o))
         return o;
       o = D(o);
     }
     return t;
   }
-  let l = Ie(i, e);
+  let l = Me(i, e);
   for (; l && mt(l) && ue(l); )
-    l = Ie(l, e);
+    l = Me(l, e);
   return l && W(l) && ue(l) && !ve(l) ? t : l || wt(i) || t;
 }
 const Vt = async function(i) {
@@ -841,14 +841,14 @@ function Dt(i) {
 }
 const $t = {
   convertOffsetParentRelativeRectToViewportRelativeRect: Ct,
-  getDocumentElement: M,
-  getClippingRect: Mt,
+  getDocumentElement: I,
+  getClippingRect: It,
   getOffsetParent: He,
   getElementRects: Vt,
   getClientRects: kt,
-  getDimensions: It,
+  getDimensions: Mt,
   getScale: H,
-  isElement: P,
+  isElement: A,
   isRTL: Dt
 };
 function We(i, e) {
@@ -856,7 +856,7 @@ function We(i, e) {
 }
 function Lt(i, e) {
   let t = null, l;
-  const o = M(i);
+  const o = I(i);
   function s() {
     var r;
     clearTimeout(l), (r = t) == null || r.disconnect(), t = null;
@@ -1069,6 +1069,14 @@ class zt {
   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]";
   }
+  /**
+   * Extract pill display value from item
+   * Precedence: getPillDisplayCallback -> getItemDisplayValue()
+   * This allows customizing pill text separately from dropdown display text
+   */
+  getItemPillDisplayValue(e) {
+    return this.options.getPillDisplayCallback ? this.options.getPillDisplayCallback(e) : this.getItemDisplayValue(e);
+  }
   /**
    * Extract search value from item
    * Precedence: searchValueMember -> getSearchValueCallback -> displayValue
@@ -1220,7 +1228,7 @@ class zt {
         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", l === "pills")
       this.pillsContainer.className = `ml__pills ml__pills--${this.effectivePillsPosition}`, this.pillsContainer.innerHTML = e.map((s) => {
-        const n = this.getItemValue(s), r = this.getItemDisplayValue(s);
+        const n = this.getItemValue(s), r = this.getItemPillDisplayValue(s);
         return `
                 <div class="ml__pill">
                     <span class="ml__pill-text">${r}</span>
@@ -1231,7 +1239,7 @@ class zt {
     else if (l === "partial") {
       this.pillsContainer.className = `ml__pills ml__pills--${this.effectivePillsPosition}`;
       const s = this.options.pillsMaxVisible || 3, n = e.slice(0, s), r = t - s, a = n.map((p) => {
-        const d = this.getItemValue(p), m = this.getItemDisplayValue(p);
+        const d = this.getItemValue(p), m = this.getItemPillDisplayValue(p);
         return `
                 <div class="ml__pill">
                     <span class="ml__pill-text">${m}</span>
@@ -1565,7 +1573,7 @@ class zt {
             </div>
             <div class="ml__selected-popover-body">
                 ${e.map((l) => {
-      const o = this.getItemValue(l), s = this.getItemDisplayValue(l);
+      const o = this.getItemValue(l), s = this.getItemPillDisplayValue(l);
       return `
                     <div class="ml__pill">
                         <span class="ml__pill-text">${s}</span>
@@ -1679,7 +1687,7 @@ class zt {
       if (!r) return;
       const a = o.querySelector(".ml__pill-text");
       a && this.createTooltipForElement(a, r, n);
-      const c = this.getItemDisplayValue(r);
+      const c = this.getItemPillDisplayValue(r);
       this.createRemoveButtonTooltip(s, c, n);
     });
     const t = this.pillsContainer.querySelector(".ml__pill--more");
@@ -1698,7 +1706,7 @@ class zt {
     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);
+      const d = this.getItemPillDisplayValue(t), m = this.getItemSubtitle(t);
       s = m ? `${d}
 ${m}` : d, console.log(`[Tooltips] Using default content: "${s}"`);
     }
@@ -1793,6 +1801,7 @@ class Ge extends Nt {
     h(this, "_getValueCallback");
     h(this, "_displayValueMember");
     h(this, "_getDisplayValueCallback");
+    h(this, "_getPillDisplayCallback");
     h(this, "_searchValueMember");
     h(this, "_getSearchValueCallback");
     h(this, "_iconMember");
@@ -1956,6 +1965,7 @@ class Ge extends Nt {
       // Callback properties (JavaScript only)
       getValueCallback: this._getValueCallback,
       getDisplayValueCallback: this._getDisplayValueCallback,
+      getPillDisplayCallback: this._getPillDisplayCallback,
       getSearchValueCallback: this._getSearchValueCallback,
       getIconCallback: this._getIconCallback,
       getSubtitleCallback: this._getSubtitleCallback,
@@ -2082,6 +2092,12 @@ class Ge extends Nt {
   get getDisplayValueCallback() {
     return this._getDisplayValueCallback;
   }
+  set getPillDisplayCallback(t) {
+    this._getPillDisplayCallback = t, this.reinitialize();
+  }
+  get getPillDisplayCallback() {
+    return this._getPillDisplayCallback;
+  }
   set getSearchValueCallback(t) {
     this._getSearchValueCallback = t, this.reinitialize();
   }

package/dist/multiselect.umd.js

@@ -1,9 +1,9 @@
-(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 Ft=(A,C,P)=>C in A?Nt(A,C,{enumerable:!0,configurable:!0,writable:!0,value:P}):A[C]=P;var h=(A,C,P)=>Ft(A,typeof C!="symbol"?C+"":C,P);const C=Math.min,P=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 P(i,C(e,t))}function Q(i,e){return typeof i=="function"?i(e):i}function R(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 D(i){return Je.has(R(i))?"y":"x"}function Se(i){return ke(D(i))}function qe(i,e,t){t===void 0&&(t=!1);const l=ee(i),o=Se(i),s=Ae(o);let n=o==="x"?l===(t?"end":"start")?"right":"left":l==="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 Pe=["left","right"],Oe=["right","left"],Qe=["top","bottom"],et=["bottom","top"];function tt(i,e,t){switch(i){case"top":case"bottom":return t?e?Oe:Pe:e?Pe:Oe;case"left":case"right":return e?Qe:et;default:return[]}}function it(i,e,t,l){const o=ee(i);let s=tt(R(i),t==="start",l);return o&&(s=s.map(n=>n+"-"+o),e&&(s=s.concat(s.map(he)))),s}function te(i){return i.replace(/left|right|bottom|top/g,e=>Ye[e])}function lt(i){return{top:0,right:0,bottom:0,left:0,...i}}function ot(i){return typeof i!="number"?lt(i):{top:i,right:i,bottom:i,left:i}}function ie(i){const{x:e,y:t,width:l,height:o}=i;return{width:l,height:o,top:t,left:e,right:e+l,bottom:t+o,x:e,y:t}}function Te(i,e,t){let{reference:l,floating:o}=i;const s=D(e),n=Se(e),r=Ae(n),a=R(e),c=s==="y",p=l.x+l.width/2-o.width/2,d=l.y+l.height/2-o.height/2,m=l[r]/2-o[r]/2;let u;switch(a){case"top":u={x:p,y:l.y-o.height};break;case"bottom":u={x:p,y:l.y+l.height};break;case"right":u={x:l.x+l.width,y:d};break;case"left":u={x:l.x-o.width,y:d};break;default:u={x:l.x,y:l.y}}switch(ee(e)){case"start":u[n]-=m*(t&&c?-1:1);break;case"end":u[n]+=m*(t&&c?-1:1);break}return u}const st=async(i,e,t)=>{const{placement:l="bottom",strategy:o="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:o}),{x:p,y:d}=Te(c,l,a),m=l,u={},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:l,placement:m,strategy:o,middlewareData:u,rects:c,platform:n,elements:{reference:i,floating:e}});p=_??p,d=y??d,u={...u,[w]:{...u[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:o}):x.rects),{x:p,y:d}=Te(c,m,a)),v=-1)}return{x:p,y:d,placement:m,strategy:o,middlewareData:u}};async function Me(i,e){var t;e===void 0&&(e={});const{x:l,y:o,platform:s,rects:n,elements:r,strategy:a}=i,{boundary:c="clippingAncestors",rootBoundary:p="viewport",elementContext:d="floating",altBoundary:m=!1,padding:u=0}=Q(e,i),g=ot(u),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:l,y:o,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,l;const{placement:o,middlewareData:s,rects:n,initialPlacement:r,platform:a,elements:c}=e,{mainAxis:p=!0,crossAxis:d=!0,fallbackPlacements:m,fallbackStrategy:u="bestFit",fallbackAxisSideDirection:g="none",flipAlignment:v=!0,...w}=Q(i,e);if((t=s.arrow)!=null&&t.alignmentOffset)return{};const b=R(o),_=D(r),y=R(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=((l=s.flip)==null?void 0:l.overflows)||[];if(p&&pe.push(ye[b]),d){const F=qe(o,n,k);pe.push(ye[F[0]],ye[F[1]])}if(K=[...K,{placement:o,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"?_!==D(xe):!1)||K.every(M=>D(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(u){case"bestFit":{var Ue;const B=(Ue=K.filter(M=>{if(X){const z=D(M.placement);return z===_||z==="y"}return!0}).map(M=>[M.placement,M.overflows.filter(z=>z>0).reduce((z,Rt)=>z+Rt,0)]).sort((M,z)=>M[1]-z[1])[0])==null?void 0:Ue[0];B&&(J=B);break}case"initialPlacement":J=r;break}if(o!==J)return{reset:{placement:J}}}return{}}}},rt=new Set(["left","top"]);async function at(i,e){const{placement:t,platform:l,elements:o}=i,s=await(l.isRTL==null?void 0:l.isRTL(o.floating)),n=R(t),r=ee(t),a=D(t)==="y",c=rt.has(n)?-1:1,p=s&&a?-1:1,d=Q(e,i);let{mainAxis:m,crossAxis:u,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"&&(u=r==="end"?g*-1:g),a?{x:u*p,y:m*c}:{x:m*c,y:u*p}}const ct=function(i){return i===void 0&&(i=0),{name:"offset",options:i,async fn(e){var t,l;const{x:o,y:s,placement:n,middlewareData:r}=e,a=await at(e,i);return n===((t=r.offset)==null?void 0:t.placement)&&(l=r.arrow)!=null&&l.alignmentOffset?{}:{x:o+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:l,placement:o}=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:l},p=await Me(e,a),d=D(R(o)),m=ke(d);let u=c[m],g=c[d];if(s){const w=m==="y"?"top":"left",b=m==="y"?"bottom":"right",_=u+p[w],y=u-p[b];u=Ce(_,u,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]:u,[d]:g});return{...v,data:{x:v.x-t,y:v.y-l,enabled:{[m]:s,[d]:n}}}}}};function le(){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 le()?i instanceof Node||i instanceof S(i).Node:!1}function O(i){return le()?i instanceof Element||i instanceof S(i).Element:!1}function V(i){return le()?i instanceof HTMLElement||i instanceof S(i).HTMLElement:!1}function Ee(i){return!le()||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:l,display:o}=T(i);return/auto|scroll|overlay|hidden|clip/.test(e+l+t)&&!pt.has(o)}const ht=new Set(["table","td","th"]);function ut(i){return ht.has(H(i))}const mt=[":popover-open",":modal"];function oe(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=O(i)?T(i):i;return ft.some(l=>t[l]?t[l]!=="none":!1)||(t.containerType?t.containerType!=="normal":!1)||!e&&(t.backdropFilter?t.backdropFilter!=="none":!1)||!e&&(t.filter?t.filter!=="none":!1)||gt.some(l=>(t.willChange||"").includes(l))||bt.some(l=>(t.contain||"").includes(l))}function vt(i){let e=$(i);for(;V(e)&&!j(e);){if(ue(e))return e;if(oe(e))return null;e=$(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 j(i){return wt.has(H(i))}function T(i){return S(i).getComputedStyle(i)}function se(i){return O(i)?{scrollLeft:i.scrollLeft,scrollTop:i.scrollTop}:{scrollLeft:i.scrollX,scrollTop:i.scrollY}}function $(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=$(i);return j(e)?i.ownerDocument?i.ownerDocument.body:i.body:V(e)&&U(e)?e:Ve(e)}function Y(i,e,t){var l;e===void 0&&(e=[]),t===void 0&&(t=!0);const o=Ve(i),s=o===((l=i.ownerDocument)==null?void 0:l.body),n=S(o);if(s){const r=fe(n);return e.concat(n,n.visualViewport||[],U(o)?o:[],r&&t?Y(r):[])}return e.concat(o,Y(o,[],t))}function fe(i){return i.parent&&Object.getPrototypeOf(i.parent)?i.frameElement:null}function De(i){const e=T(i);let t=parseFloat(e.width)||0,l=parseFloat(e.height)||0;const o=V(i),s=o?i.offsetWidth:t,n=o?i.offsetHeight:l,r=q(t)!==s||q(l)!==n;return r&&(t=s,l=n),{width:t,height:l,$:r}}function ge(i){return O(i)?i:i.contextElement}function W(i){const e=ge(i);if(!V(e))return I(1);const t=e.getBoundingClientRect(),{width:l,height:o,$:s}=De(e);let n=(s?q(t.width):t.width)/l,r=(s?q(t.height):t.height)/o;return(!n||!Number.isFinite(n))&&(n=1),(!r||!Number.isFinite(r))&&(r=1),{x:n,y:r}}const _t=I(0);function $e(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 N(i,e,t,l){e===void 0&&(e=!1),t===void 0&&(t=!1);const o=i.getBoundingClientRect(),s=ge(i);let n=I(1);e&&(l?O(l)&&(n=W(l)):n=W(i));const r=yt(s,t,l)?$e(s):I(0);let a=(o.left+r.x)/n.x,c=(o.top+r.y)/n.y,p=o.width/n.x,d=o.height/n.y;if(s){const m=S(s),u=l&&O(l)?S(l):l;let g=m,v=fe(g);for(;v&&l&&u!==g;){const w=W(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:N(E(i)).left+t}function Le(i,e){const t=i.getBoundingClientRect(),l=t.left+e.scrollLeft-ne(i,t),o=t.top+e.scrollTop;return{x:l,y:o}}function xt(i){let{elements:e,rect:t,offsetParent:l,strategy:o}=i;const s=o==="fixed",n=E(l),r=e?oe(e.floating):!1;if(l===n||r&&s)return t;let a={scrollLeft:0,scrollTop:0},c=I(1);const p=I(0),d=V(l);if((d||!d&&!s)&&((H(l)!=="body"||U(n))&&(a=se(l)),V(l))){const u=N(l);c=W(l),p.x=u.x+l.clientLeft,p.y=u.y+l.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),l=i.ownerDocument.body,o=P(e.scrollWidth,e.clientWidth,l.scrollWidth,l.clientWidth),s=P(e.scrollHeight,e.clientHeight,l.scrollHeight,l.clientHeight);let n=-t.scrollLeft+ne(i);const r=-t.scrollTop;return T(l).direction==="rtl"&&(n+=P(e.clientWidth,l.clientWidth)-o),{width:o,height:s,x:n,y:r}}const ze=25;function At(i,e){const t=S(i),l=E(i),o=t.visualViewport;let s=l.clientWidth,n=l.clientHeight,r=0,a=0;if(o){s=o.width,n=o.height;const p=me();(!p||p&&e==="fixed")&&(r=o.offsetLeft,a=o.offsetTop)}const c=ne(l);if(c<=0){const p=l.ownerDocument,d=p.body,m=getComputedStyle(d),u=p.compatMode==="CSS1Compat"&&parseFloat(m.marginLeft)+parseFloat(m.marginRight)||0,g=Math.abs(l.clientWidth-d.clientWidth-u);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 Pt(i,e){const t=N(i,!0,e==="fixed"),l=t.top+i.clientTop,o=t.left+i.clientLeft,s=V(i)?W(i):I(1),n=i.clientWidth*s.x,r=i.clientHeight*s.y,a=o*s.x,c=l*s.y;return{width:n,height:r,x:a,y:c}}function Re(i,e,t){let l;if(e==="viewport")l=At(i,t);else if(e==="document")l=kt(E(i));else if(O(e))l=Pt(e,t);else{const o=$e(i);l={x:e.x-o.x,y:e.y-o.y,width:e.width,height:e.height}}return ie(l)}function Ne(i,e){const t=$(i);return t===e||!O(t)||j(t)?!1:T(t).position==="fixed"||Ne(t,e)}function Ot(i,e){const t=e.get(i);if(t)return t;let l=Y(i,[],!1).filter(r=>O(r)&&H(r)!=="body"),o=null;const s=T(i).position==="fixed";let n=s?$(i):i;for(;O(n)&&!j(n);){const r=T(n),a=ue(n);!a&&r.position==="fixed"&&(o=null),(s?!a&&!o:!a&&r.position==="static"&&!!o&&St.has(o.position)||U(n)&&!a&&Ne(i,n))?l=l.filter(p=>p!==n):o=r,n=$(n)}return e.set(i,l),l}function Tt(i){let{element:e,boundary:t,rootBoundary:l,strategy:o}=i;const n=[...t==="clippingAncestors"?oe(e)?[]:Ot(e,this._c):[].concat(t),l],r=n[0],a=n.reduce((c,p)=>{const d=Re(e,p,o);return c.top=P(d.top,c.top),c.right=C(d.right,c.right),c.bottom=C(d.bottom,c.bottom),c.left=P(d.left,c.left),c},Re(e,r,o));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}=De(i);return{width:e,height:t}}function It(i,e,t){const l=V(e),o=E(e),s=t==="fixed",n=N(i,!0,s,e);let r={scrollLeft:0,scrollTop:0};const a=I(0);function c(){a.x=ne(o)}if(l||!l&&!s)if((H(e)!=="body"||U(o))&&(r=se(e)),l){const u=N(e,!0,s,e);a.x=u.x+e.clientLeft,a.y=u.y+e.clientTop}else o&&c();s&&!l&&o&&c();const p=o&&!l&&!s?Le(o,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(oe(i))return t;if(!V(i)){let o=$(i);for(;o&&!j(o);){if(O(o)&&!be(o))return o;o=$(o)}return t}let l=Fe(i,e);for(;l&&ut(l)&&be(l);)l=Fe(l,e);return l&&j(l)&&be(l)&&!ue(l)?t:l||vt(i)||t}const Et=async function(i){const e=this.getOffsetParent||Be,t=this.getDimensions,l=await t(i.floating);return{reference:It(i.reference,await e(i.floating),i.strategy),floating:{x:0,y:0,width:l.width,height:l.height}}};function Vt(i){return T(i).direction==="rtl"}const Dt={convertOffsetParentRelativeRectToViewportRelativeRect:xt,getDocumentElement:E,getClippingRect:Tt,getOffsetParent:Be,getElementRects:Et,getClientRects:Ct,getDimensions:Mt,getScale:W,isElement:O,isRTL:Vt};function He(i,e){return i.x===e.x&&i.y===e.y&&i.width===e.width&&i.height===e.height}function $t(i,e){let t=null,l;const o=E(i);function s(){var r;clearTimeout(l),(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:u}=c;if(r||e(),!m||!u)return;const g=Z(d),v=Z(o.clientWidth-(p+m)),w=Z(o.clientHeight-(d+u)),b=Z(p),y={rootMargin:-g+"px "+-v+"px "+-w+"px "+-b+"px",threshold:P(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):l=setTimeout(()=>{n(!1,1e-7)},1e3)}G===1&&!He(c,i.getBoundingClientRect())&&n(),k=!1}try{t=new IntersectionObserver(x,{...y,root:o.ownerDocument})}catch{t=new IntersectionObserver(x,y)}t.observe(i)}return n(!0),s}function re(i,e,t,l){l===void 0&&(l={});const{ancestorScroll:o=!0,ancestorResize:s=!0,elementResize:n=typeof ResizeObserver=="function",layoutShift:r=typeof IntersectionObserver=="function",animationFrame:a=!1}=l,c=ge(i),p=o||s?[...c?Y(c):[],...Y(e)]:[];p.forEach(b=>{o&&b.addEventListener("scroll",t,{passive:!0}),s&&b.addEventListener("resize",t)});const d=c&&r?$t(c,t):null;let m=-1,u=null;n&&(u=new ResizeObserver(b=>{let[_]=b;_&&_.target===c&&u&&(u.unobserve(e),cancelAnimationFrame(m),m=requestAnimationFrame(()=>{var y;(y=u)==null||y.observe(e)})),t()}),c&&!a&&u.observe(c),u.observe(e));let g,v=a?N(i):null;a&&w();function w(){const b=N(i);v&&!He(v,b)&&t(),v=b,g=requestAnimationFrame(w)}return t(),()=>{var b;p.forEach(_=>{o&&_.removeEventListener("scroll",t),s&&_.removeEventListener("resize",t)}),d==null||d(),(b=u)==null||b.disconnect(),u=null,a&&cancelAnimationFrame(g)}}const ae=ct,ce=dt,ve=nt,de=(i,e,t)=>{const l=new Map,o={platform:Dt,...t},s={...o.platform,_c:l};return st(i,e,{...o,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 je{constructor(e,t={}){h(this,"element");h(this,"instanceId");h(this,"options");h(this,"isOpen",!1);h(this,"selectedValues",new Set);h(this,"selectedOptions",new Map);h(this,"allOptions",[]);h(this,"filteredOptions",[]);h(this,"hiddenInputs",[]);h(this,"focusedIndex",-1);h(this,"searchTerm","");h(this,"isLoading",!1);h(this,"showSelectedPopover",!1);h(this,"selectedPopoverPlacement",null);h(this,"dropdownPlacement",null);h(this,"isRTL",!1);h(this,"effectivePillsPosition","bottom");h(this,"justClosedViaClick",!1);h(this,"dropdownCleanup",null);h(this,"hintCleanup",null);h(this,"selectedPopoverCleanup",null);h(this,"pillTooltips",new Map);h(this,"pillTooltipCleanups",new Map);h(this,"input");h(this,"dropdown");h(this,"pillsContainer");h(this,"countBadge");h(this,"hint");h(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,t=this.element.getRootNode(),l=t instanceof ShadowRoot?t.host:this.element,o=l.getAttribute("dir")==="rtl",s=l.closest('[dir="rtl"]')!==null;this.isRTL=o||s,console.log("[MultiSelect RTL Debug]",{isShadowRoot:t instanceof ShadowRoot,hostElement:l,elementDir:l.getAttribute("dir"),hasElementDir:o,hasAncestorDir:s,isRTL:this.isRTL}),this.effectivePillsPosition=this.options.pillsPosition||"bottom",this.isRTL&&(this.effectivePillsPosition==="left"?this.effectivePillsPosition="right":this.effectivePillsPosition==="right"&&(this.effectivePillsPosition="left")),this.element.classList.add("ml"),this.isRTL&&(this.element.classList.add("ml--rtl"),console.log("[MultiSelect RTL] Added ml--rtl class to element")),(!this.options.isCheckboxesShown||!this.options.isMultipleEnabled)&&this.element.classList.add("ml--no-checkboxes");const n=document.createElement("div");n.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 r=document.createElement("span");r.className="ml__toggle",r.innerHTML="▼",this.countBadge=document.createElement("span"),this.countBadge.className="ml__count-badge",this.countBadge.style.display="none",n.appendChild(this.input),n.appendChild(this.countBadge),n.appendChild(r),this.pillsContainer=document.createElement("div"),this.pillsContainer.className="ml__pills";const a=document.createElement("div");a.className="ml-wrapper",(this.effectivePillsPosition==="left"||this.effectivePillsPosition==="right")&&a.classList.add("ml-wrapper--inline"),a.appendChild(n),a.appendChild(this.pillsContainer),this.element.appendChild(a),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(l=>{e+='<div class="ml__group">',l!=="__ungrouped__"&&(e+=`<div class="ml__group-label">${l}</div>`),t[l].forEach((o,s)=>{e+=this.renderOption(o,s)}),e+="</div>"})}else this.filteredOptions.forEach((t,l)=>{e+=this.renderOption(t,l)});e+="</div>",this.dropdown.innerHTML=e}renderOption(e,t){const l=this.getItemValue(e),o=this.getItemDisplayValue(e),s=this.getItemIcon(e),n=this.getItemSubtitle(e),r=this.getItemDisabled(e),a=this.selectedValues.has(String(l)),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="${l}" 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(o,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 l=new RegExp(`(${t.replace(/[.*+?^${}()|[\]\\]/g,"\\$&")})`,"gi");return e.replace(l,"<mark>$1</mark>")}groupOptions(e){const t={};return e.forEach(l=>{const o=this.getItemGroup(l)||"__ungrouped__";t[o]||(t[o]=[]),t[o].push(l)}),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 l=this.options.pillsDisplayMode;if(this.options.pillsThreshold!==null&&t>this.options.pillsThreshold&&(l=this.options.pillsThresholdMode||"count"),!this.isOpen)if(t>0&&l==="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",l==="pills")this.pillsContainer.className=`ml__pills ml__pills--${this.effectivePillsPosition}`,this.pillsContainer.innerHTML=e.map(s=>{const n=this.getItemValue(s),r=this.getItemDisplayValue(s);return`
+(function(P,C){typeof exports=="object"&&typeof module<"u"?C(exports):typeof define=="function"&&define.amd?define(["exports"],C):(P=typeof globalThis<"u"?globalThis:P||self,C(P.MultiSelect={}))})(this,function(P){"use strict";var Nt=Object.defineProperty;var Ft=(P,C,S)=>C in P?Nt(P,C,{enumerable:!0,configurable:!0,writable:!0,value:S}):P[C]=S;var h=(P,C,S)=>Ft(P,typeof C!="symbol"?C+"":C,S);const C=Math.min,S=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 S(i,C(e,t))}function Q(i,e){return typeof i=="function"?i(e):i}function R(i){return i.split("-")[0]}function ee(i){return i.split("-")[1]}function ke(i){return i==="x"?"y":"x"}function Pe(i){return i==="y"?"height":"width"}const Je=new Set(["top","bottom"]);function D(i){return Je.has(R(i))?"y":"x"}function Ae(i){return ke(D(i))}function qe(i,e,t){t===void 0&&(t=!1);const l=ee(i),o=Ae(i),s=Pe(o);let n=o==="x"?l===(t?"end":"start")?"right":"left":l==="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 Se=["left","right"],Oe=["right","left"],Qe=["top","bottom"],et=["bottom","top"];function tt(i,e,t){switch(i){case"top":case"bottom":return t?e?Oe:Se:e?Se:Oe;case"left":case"right":return e?Qe:et;default:return[]}}function it(i,e,t,l){const o=ee(i);let s=tt(R(i),t==="start",l);return o&&(s=s.map(n=>n+"-"+o),e&&(s=s.concat(s.map(he)))),s}function te(i){return i.replace(/left|right|bottom|top/g,e=>Ye[e])}function lt(i){return{top:0,right:0,bottom:0,left:0,...i}}function ot(i){return typeof i!="number"?lt(i):{top:i,right:i,bottom:i,left:i}}function ie(i){const{x:e,y:t,width:l,height:o}=i;return{width:l,height:o,top:t,left:e,right:e+l,bottom:t+o,x:e,y:t}}function Te(i,e,t){let{reference:l,floating:o}=i;const s=D(e),n=Ae(e),r=Pe(n),a=R(e),c=s==="y",p=l.x+l.width/2-o.width/2,d=l.y+l.height/2-o.height/2,m=l[r]/2-o[r]/2;let u;switch(a){case"top":u={x:p,y:l.y-o.height};break;case"bottom":u={x:p,y:l.y+l.height};break;case"right":u={x:l.x+l.width,y:d};break;case"left":u={x:l.x-o.width,y:d};break;default:u={x:l.x,y:l.y}}switch(ee(e)){case"start":u[n]-=m*(t&&c?-1:1);break;case"end":u[n]+=m*(t&&c?-1:1);break}return u}const st=async(i,e,t)=>{const{placement:l="bottom",strategy:o="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:o}),{x:p,y:d}=Te(c,l,a),m=l,u={},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:l,placement:m,strategy:o,middlewareData:u,rects:c,platform:n,elements:{reference:i,floating:e}});p=_??p,d=y??d,u={...u,[w]:{...u[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:o}):x.rects),{x:p,y:d}=Te(c,m,a)),v=-1)}return{x:p,y:d,placement:m,strategy:o,middlewareData:u}};async function Me(i,e){var t;e===void 0&&(e={});const{x:l,y:o,platform:s,rects:n,elements:r,strategy:a}=i,{boundary:c="clippingAncestors",rootBoundary:p="viewport",elementContext:d="floating",altBoundary:m=!1,padding:u=0}=Q(e,i),g=ot(u),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:l,y:o,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,l;const{placement:o,middlewareData:s,rects:n,initialPlacement:r,platform:a,elements:c}=e,{mainAxis:p=!0,crossAxis:d=!0,fallbackPlacements:m,fallbackStrategy:u="bestFit",fallbackAxisSideDirection:g="none",flipAlignment:v=!0,...w}=Q(i,e);if((t=s.arrow)!=null&&t.alignmentOffset)return{};const b=R(o),_=D(r),y=R(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=((l=s.flip)==null?void 0:l.overflows)||[];if(p&&pe.push(ye[b]),d){const F=qe(o,n,k);pe.push(ye[F[0]],ye[F[1]])}if(K=[...K,{placement:o,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"?_!==D(xe):!1)||K.every(M=>D(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(u){case"bestFit":{var Ue;const B=(Ue=K.filter(M=>{if(X){const z=D(M.placement);return z===_||z==="y"}return!0}).map(M=>[M.placement,M.overflows.filter(z=>z>0).reduce((z,Rt)=>z+Rt,0)]).sort((M,z)=>M[1]-z[1])[0])==null?void 0:Ue[0];B&&(J=B);break}case"initialPlacement":J=r;break}if(o!==J)return{reset:{placement:J}}}return{}}}},rt=new Set(["left","top"]);async function at(i,e){const{placement:t,platform:l,elements:o}=i,s=await(l.isRTL==null?void 0:l.isRTL(o.floating)),n=R(t),r=ee(t),a=D(t)==="y",c=rt.has(n)?-1:1,p=s&&a?-1:1,d=Q(e,i);let{mainAxis:m,crossAxis:u,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"&&(u=r==="end"?g*-1:g),a?{x:u*p,y:m*c}:{x:m*c,y:u*p}}const ct=function(i){return i===void 0&&(i=0),{name:"offset",options:i,async fn(e){var t,l;const{x:o,y:s,placement:n,middlewareData:r}=e,a=await at(e,i);return n===((t=r.offset)==null?void 0:t.placement)&&(l=r.arrow)!=null&&l.alignmentOffset?{}:{x:o+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:l,placement:o}=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:l},p=await Me(e,a),d=D(R(o)),m=ke(d);let u=c[m],g=c[d];if(s){const w=m==="y"?"top":"left",b=m==="y"?"bottom":"right",_=u+p[w],y=u-p[b];u=Ce(_,u,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]:u,[d]:g});return{...v,data:{x:v.x-t,y:v.y-l,enabled:{[m]:s,[d]:n}}}}}};function le(){return typeof window<"u"}function H(i){return Ie(i)?(i.nodeName||"").toLowerCase():"#document"}function A(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 le()?i instanceof Node||i instanceof A(i).Node:!1}function O(i){return le()?i instanceof Element||i instanceof A(i).Element:!1}function V(i){return le()?i instanceof HTMLElement||i instanceof A(i).HTMLElement:!1}function Ee(i){return!le()||typeof ShadowRoot>"u"?!1:i instanceof ShadowRoot||i instanceof A(i).ShadowRoot}const pt=new Set(["inline","contents"]);function U(i){const{overflow:e,overflowX:t,overflowY:l,display:o}=T(i);return/auto|scroll|overlay|hidden|clip/.test(e+l+t)&&!pt.has(o)}const ht=new Set(["table","td","th"]);function ut(i){return ht.has(H(i))}const mt=[":popover-open",":modal"];function oe(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=O(i)?T(i):i;return ft.some(l=>t[l]?t[l]!=="none":!1)||(t.containerType?t.containerType!=="normal":!1)||!e&&(t.backdropFilter?t.backdropFilter!=="none":!1)||!e&&(t.filter?t.filter!=="none":!1)||gt.some(l=>(t.willChange||"").includes(l))||bt.some(l=>(t.contain||"").includes(l))}function vt(i){let e=$(i);for(;V(e)&&!j(e);){if(ue(e))return e;if(oe(e))return null;e=$(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 j(i){return wt.has(H(i))}function T(i){return A(i).getComputedStyle(i)}function se(i){return O(i)?{scrollLeft:i.scrollLeft,scrollTop:i.scrollTop}:{scrollLeft:i.scrollX,scrollTop:i.scrollY}}function $(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=$(i);return j(e)?i.ownerDocument?i.ownerDocument.body:i.body:V(e)&&U(e)?e:Ve(e)}function Y(i,e,t){var l;e===void 0&&(e=[]),t===void 0&&(t=!0);const o=Ve(i),s=o===((l=i.ownerDocument)==null?void 0:l.body),n=A(o);if(s){const r=fe(n);return e.concat(n,n.visualViewport||[],U(o)?o:[],r&&t?Y(r):[])}return e.concat(o,Y(o,[],t))}function fe(i){return i.parent&&Object.getPrototypeOf(i.parent)?i.frameElement:null}function De(i){const e=T(i);let t=parseFloat(e.width)||0,l=parseFloat(e.height)||0;const o=V(i),s=o?i.offsetWidth:t,n=o?i.offsetHeight:l,r=q(t)!==s||q(l)!==n;return r&&(t=s,l=n),{width:t,height:l,$:r}}function ge(i){return O(i)?i:i.contextElement}function W(i){const e=ge(i);if(!V(e))return I(1);const t=e.getBoundingClientRect(),{width:l,height:o,$:s}=De(e);let n=(s?q(t.width):t.width)/l,r=(s?q(t.height):t.height)/o;return(!n||!Number.isFinite(n))&&(n=1),(!r||!Number.isFinite(r))&&(r=1),{x:n,y:r}}const _t=I(0);function $e(i){const e=A(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!==A(i)?!1:e}function N(i,e,t,l){e===void 0&&(e=!1),t===void 0&&(t=!1);const o=i.getBoundingClientRect(),s=ge(i);let n=I(1);e&&(l?O(l)&&(n=W(l)):n=W(i));const r=yt(s,t,l)?$e(s):I(0);let a=(o.left+r.x)/n.x,c=(o.top+r.y)/n.y,p=o.width/n.x,d=o.height/n.y;if(s){const m=A(s),u=l&&O(l)?A(l):l;let g=m,v=fe(g);for(;v&&l&&u!==g;){const w=W(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=A(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:N(E(i)).left+t}function Le(i,e){const t=i.getBoundingClientRect(),l=t.left+e.scrollLeft-ne(i,t),o=t.top+e.scrollTop;return{x:l,y:o}}function xt(i){let{elements:e,rect:t,offsetParent:l,strategy:o}=i;const s=o==="fixed",n=E(l),r=e?oe(e.floating):!1;if(l===n||r&&s)return t;let a={scrollLeft:0,scrollTop:0},c=I(1);const p=I(0),d=V(l);if((d||!d&&!s)&&((H(l)!=="body"||U(n))&&(a=se(l)),V(l))){const u=N(l);c=W(l),p.x=u.x+l.clientLeft,p.y=u.y+l.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),l=i.ownerDocument.body,o=S(e.scrollWidth,e.clientWidth,l.scrollWidth,l.clientWidth),s=S(e.scrollHeight,e.clientHeight,l.scrollHeight,l.clientHeight);let n=-t.scrollLeft+ne(i);const r=-t.scrollTop;return T(l).direction==="rtl"&&(n+=S(e.clientWidth,l.clientWidth)-o),{width:o,height:s,x:n,y:r}}const ze=25;function Pt(i,e){const t=A(i),l=E(i),o=t.visualViewport;let s=l.clientWidth,n=l.clientHeight,r=0,a=0;if(o){s=o.width,n=o.height;const p=me();(!p||p&&e==="fixed")&&(r=o.offsetLeft,a=o.offsetTop)}const c=ne(l);if(c<=0){const p=l.ownerDocument,d=p.body,m=getComputedStyle(d),u=p.compatMode==="CSS1Compat"&&parseFloat(m.marginLeft)+parseFloat(m.marginRight)||0,g=Math.abs(l.clientWidth-d.clientWidth-u);g<=ze&&(s-=g)}else c<=ze&&(s+=c);return{width:s,height:n,x:r,y:a}}const At=new Set(["absolute","fixed"]);function St(i,e){const t=N(i,!0,e==="fixed"),l=t.top+i.clientTop,o=t.left+i.clientLeft,s=V(i)?W(i):I(1),n=i.clientWidth*s.x,r=i.clientHeight*s.y,a=o*s.x,c=l*s.y;return{width:n,height:r,x:a,y:c}}function Re(i,e,t){let l;if(e==="viewport")l=Pt(i,t);else if(e==="document")l=kt(E(i));else if(O(e))l=St(e,t);else{const o=$e(i);l={x:e.x-o.x,y:e.y-o.y,width:e.width,height:e.height}}return ie(l)}function Ne(i,e){const t=$(i);return t===e||!O(t)||j(t)?!1:T(t).position==="fixed"||Ne(t,e)}function Ot(i,e){const t=e.get(i);if(t)return t;let l=Y(i,[],!1).filter(r=>O(r)&&H(r)!=="body"),o=null;const s=T(i).position==="fixed";let n=s?$(i):i;for(;O(n)&&!j(n);){const r=T(n),a=ue(n);!a&&r.position==="fixed"&&(o=null),(s?!a&&!o:!a&&r.position==="static"&&!!o&&At.has(o.position)||U(n)&&!a&&Ne(i,n))?l=l.filter(p=>p!==n):o=r,n=$(n)}return e.set(i,l),l}function Tt(i){let{element:e,boundary:t,rootBoundary:l,strategy:o}=i;const n=[...t==="clippingAncestors"?oe(e)?[]:Ot(e,this._c):[].concat(t),l],r=n[0],a=n.reduce((c,p)=>{const d=Re(e,p,o);return c.top=S(d.top,c.top),c.right=C(d.right,c.right),c.bottom=C(d.bottom,c.bottom),c.left=S(d.left,c.left),c},Re(e,r,o));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}=De(i);return{width:e,height:t}}function It(i,e,t){const l=V(e),o=E(e),s=t==="fixed",n=N(i,!0,s,e);let r={scrollLeft:0,scrollTop:0};const a=I(0);function c(){a.x=ne(o)}if(l||!l&&!s)if((H(e)!=="body"||U(o))&&(r=se(e)),l){const u=N(e,!0,s,e);a.x=u.x+e.clientLeft,a.y=u.y+e.clientTop}else o&&c();s&&!l&&o&&c();const p=o&&!l&&!s?Le(o,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=A(i);if(oe(i))return t;if(!V(i)){let o=$(i);for(;o&&!j(o);){if(O(o)&&!be(o))return o;o=$(o)}return t}let l=Fe(i,e);for(;l&&ut(l)&&be(l);)l=Fe(l,e);return l&&j(l)&&be(l)&&!ue(l)?t:l||vt(i)||t}const Et=async function(i){const e=this.getOffsetParent||Be,t=this.getDimensions,l=await t(i.floating);return{reference:It(i.reference,await e(i.floating),i.strategy),floating:{x:0,y:0,width:l.width,height:l.height}}};function Vt(i){return T(i).direction==="rtl"}const Dt={convertOffsetParentRelativeRectToViewportRelativeRect:xt,getDocumentElement:E,getClippingRect:Tt,getOffsetParent:Be,getElementRects:Et,getClientRects:Ct,getDimensions:Mt,getScale:W,isElement:O,isRTL:Vt};function He(i,e){return i.x===e.x&&i.y===e.y&&i.width===e.width&&i.height===e.height}function $t(i,e){let t=null,l;const o=E(i);function s(){var r;clearTimeout(l),(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:u}=c;if(r||e(),!m||!u)return;const g=Z(d),v=Z(o.clientWidth-(p+m)),w=Z(o.clientHeight-(d+u)),b=Z(p),y={rootMargin:-g+"px "+-v+"px "+-w+"px "+-b+"px",threshold:S(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):l=setTimeout(()=>{n(!1,1e-7)},1e3)}G===1&&!He(c,i.getBoundingClientRect())&&n(),k=!1}try{t=new IntersectionObserver(x,{...y,root:o.ownerDocument})}catch{t=new IntersectionObserver(x,y)}t.observe(i)}return n(!0),s}function re(i,e,t,l){l===void 0&&(l={});const{ancestorScroll:o=!0,ancestorResize:s=!0,elementResize:n=typeof ResizeObserver=="function",layoutShift:r=typeof IntersectionObserver=="function",animationFrame:a=!1}=l,c=ge(i),p=o||s?[...c?Y(c):[],...Y(e)]:[];p.forEach(b=>{o&&b.addEventListener("scroll",t,{passive:!0}),s&&b.addEventListener("resize",t)});const d=c&&r?$t(c,t):null;let m=-1,u=null;n&&(u=new ResizeObserver(b=>{let[_]=b;_&&_.target===c&&u&&(u.unobserve(e),cancelAnimationFrame(m),m=requestAnimationFrame(()=>{var y;(y=u)==null||y.observe(e)})),t()}),c&&!a&&u.observe(c),u.observe(e));let g,v=a?N(i):null;a&&w();function w(){const b=N(i);v&&!He(v,b)&&t(),v=b,g=requestAnimationFrame(w)}return t(),()=>{var b;p.forEach(_=>{o&&_.removeEventListener("scroll",t),s&&_.removeEventListener("resize",t)}),d==null||d(),(b=u)==null||b.disconnect(),u=null,a&&cancelAnimationFrame(g)}}const ae=ct,ce=dt,ve=nt,de=(i,e,t)=>{const l=new Map,o={platform:Dt,...t},s={...o.platform,_c:l};return st(i,e,{...o,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 je{constructor(e,t={}){h(this,"element");h(this,"instanceId");h(this,"options");h(this,"isOpen",!1);h(this,"selectedValues",new Set);h(this,"selectedOptions",new Map);h(this,"allOptions",[]);h(this,"filteredOptions",[]);h(this,"hiddenInputs",[]);h(this,"focusedIndex",-1);h(this,"searchTerm","");h(this,"isLoading",!1);h(this,"showSelectedPopover",!1);h(this,"selectedPopoverPlacement",null);h(this,"dropdownPlacement",null);h(this,"isRTL",!1);h(this,"effectivePillsPosition","bottom");h(this,"justClosedViaClick",!1);h(this,"dropdownCleanup",null);h(this,"hintCleanup",null);h(this,"selectedPopoverCleanup",null);h(this,"pillTooltips",new Map);h(this,"pillTooltipCleanups",new Map);h(this,"input");h(this,"dropdown");h(this,"pillsContainer");h(this,"countBadge");h(this,"hint");h(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]"}getItemPillDisplayValue(e){return this.options.getPillDisplayCallback?this.options.getPillDisplayCallback(e):this.getItemDisplayValue(e)}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,t=this.element.getRootNode(),l=t instanceof ShadowRoot?t.host:this.element,o=l.getAttribute("dir")==="rtl",s=l.closest('[dir="rtl"]')!==null;this.isRTL=o||s,console.log("[MultiSelect RTL Debug]",{isShadowRoot:t instanceof ShadowRoot,hostElement:l,elementDir:l.getAttribute("dir"),hasElementDir:o,hasAncestorDir:s,isRTL:this.isRTL}),this.effectivePillsPosition=this.options.pillsPosition||"bottom",this.isRTL&&(this.effectivePillsPosition==="left"?this.effectivePillsPosition="right":this.effectivePillsPosition==="right"&&(this.effectivePillsPosition="left")),this.element.classList.add("ml"),this.isRTL&&(this.element.classList.add("ml--rtl"),console.log("[MultiSelect RTL] Added ml--rtl class to element")),(!this.options.isCheckboxesShown||!this.options.isMultipleEnabled)&&this.element.classList.add("ml--no-checkboxes");const n=document.createElement("div");n.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 r=document.createElement("span");r.className="ml__toggle",r.innerHTML="▼",this.countBadge=document.createElement("span"),this.countBadge.className="ml__count-badge",this.countBadge.style.display="none",n.appendChild(this.input),n.appendChild(this.countBadge),n.appendChild(r),this.pillsContainer=document.createElement("div"),this.pillsContainer.className="ml__pills";const a=document.createElement("div");a.className="ml-wrapper",(this.effectivePillsPosition==="left"||this.effectivePillsPosition==="right")&&a.classList.add("ml-wrapper--inline"),a.appendChild(n),a.appendChild(this.pillsContainer),this.element.appendChild(a),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(l=>{e+='<div class="ml__group">',l!=="__ungrouped__"&&(e+=`<div class="ml__group-label">${l}</div>`),t[l].forEach((o,s)=>{e+=this.renderOption(o,s)}),e+="</div>"})}else this.filteredOptions.forEach((t,l)=>{e+=this.renderOption(t,l)});e+="</div>",this.dropdown.innerHTML=e}renderOption(e,t){const l=this.getItemValue(e),o=this.getItemDisplayValue(e),s=this.getItemIcon(e),n=this.getItemSubtitle(e),r=this.getItemDisabled(e),a=this.selectedValues.has(String(l)),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="${l}" 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(o,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 l=new RegExp(`(${t.replace(/[.*+?^${}()|[\]\\]/g,"\\$&")})`,"gi");return e.replace(l,"<mark>$1</mark>")}groupOptions(e){const t={};return e.forEach(l=>{const o=this.getItemGroup(l)||"__ungrouped__";t[o]||(t[o]=[]),t[o].push(l)}),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 l=this.options.pillsDisplayMode;if(this.options.pillsThreshold!==null&&t>this.options.pillsThreshold&&(l=this.options.pillsThresholdMode||"count"),!this.isOpen)if(t>0&&l==="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",l==="pills")this.pillsContainer.className=`ml__pills ml__pills--${this.effectivePillsPosition}`,this.pillsContainer.innerHTML=e.map(s=>{const n=this.getItemValue(s),r=this.getItemPillDisplayValue(s);return`
                 <div class="ml__pill">
                     <span class="ml__pill-text">${r}</span>
                     <button type="button" class="ml__pill-remove" data-value="${n}" aria-label="Remove ${r}"></button>
                 </div>
-            `}).join("");else if(l==="partial"){this.pillsContainer.className=`ml__pills ml__pills--${this.effectivePillsPosition}`;const s=this.options.pillsMaxVisible||3,n=e.slice(0,s),r=t-s,a=n.map(p=>{const d=this.getItemValue(p),m=this.getItemDisplayValue(p);return`
+            `}).join("");else if(l==="partial"){this.pillsContainer.className=`ml__pills ml__pills--${this.effectivePillsPosition}`;const s=this.options.pillsMaxVisible||3,n=e.slice(0,s),r=t-s,a=n.map(p=>{const d=this.getItemValue(p),m=this.getItemPillDisplayValue(p);return`
                 <div class="ml__pill">
                     <span class="ml__pill-text">${m}</span>
                     <button type="button" class="ml__pill-remove" data-value="${d}" aria-label="Remove ${m}"></button>
@@ -26,15 +26,15 @@
                 <button type="button" class="ml__selected-popover-close" aria-label="Close">&times;</button>
             </div>
             <div class="ml__selected-popover-body">
-                ${e.map(l=>{const o=this.getItemValue(l),s=this.getItemDisplayValue(l);return`
+                ${e.map(l=>{const o=this.getItemValue(l),s=this.getItemPillDisplayValue(l);return`
                     <div class="ml__pill">
                         <span class="ml__pill-text">${s}</span>
                         <button type="button" class="ml__pill-remove" data-value="${o}" aria-label="Remove ${s}"></button>
                     </div>
                 `}).join("")}
             </div>
-        `}handleSelectedPopoverClick(e){if(e.stopPropagation(),e.target.closest(".ml__selected-popover-close")){e.preventDefault(),this.hideSelectedPopover();return}const l=e.target.closest(".ml__pill-remove");if(l){e.preventDefault();const o=l.dataset.value,s=this.selectedOptions.get(o);s&&(this.deselectOption(s),this.renderSelectedPopover(),this.selectedValues.size===0&&this.hideSelectedPopover())}}positionSelectedPopover(){this.selectedPopoverCleanup=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:l,placement:o})=>{this.selectedPopoverPlacement||(this.selectedPopoverPlacement=o,f.debug(`[${this.instanceId}] Locked popover placement:`,o));const s={left:`${t}px`,top:`${l}px`,width:`${this.input.offsetWidth}px`};this.options.dropdownMinWidth&&(s.minWidth=this.options.dropdownMinWidth),Object.assign(this.selectedPopover.style,s)})})}updateHiddenInput(){if(!this.options.formFieldId)return;this.hiddenInputs.forEach(o=>o.remove()),this.hiddenInputs=[];const e=this.options.valueFormat||"json",t=Array.from(this.selectedOptions.values()).map(o=>this.getItemValue(o)),l=this.options.hostElement||this.element;if(e==="array")t.forEach(o=>{const s=document.createElement("input");s.type="hidden",s.name=`${this.options.formFieldId}[]`,s.value=String(o),l.appendChild(s),this.hiddenInputs.push(s)});else{const o=document.createElement("input");o.type="hidden",o.name=this.options.formFieldId,o.id=this.options.formFieldId,o.value=this.getFormValue(),l.appendChild(o),this.hiddenInputs.push(o)}}getFormValue(){const e=Array.from(this.selectedOptions.values()).map(l=>this.getItemValue(l));return this.options.getValueFormatCallback?this.options.getValueFormatCallback(e):(this.options.valueFormat||"json")==="csv"?e.join(","):JSON.stringify(e)}getSelected(){return Array.from(this.selectedOptions.values())}setSelected(e){this.selectedValues=new Set(e.map(t=>String(t))),this.selectedOptions.clear(),e.forEach(t=>{const l=String(t),o=this.allOptions.find(s=>String(this.getItemValue(s))===l);o&&this.selectedOptions.set(l,o)}),this.renderDropdown(),this.renderPills(),this.updateHiddenInput()}get selectedItem(){return this.selectedOptions.size===0?null:Array.from(this.selectedOptions.values())[0]}get selectedValue(){if(!this.options.valueMember&&!this.options.getValueCallback)return null;if(this.selectedOptions.size===0)return this.options.isMultipleEnabled?[]:null;const e=Array.from(this.selectedOptions.values()).map(t=>this.getItemValue(t));return this.options.isMultipleEnabled?e:e[0]??null}getValue(){if(this.selectedOptions.size===0)return this.options.isMultipleEnabled?[]:null;const e=Array.from(this.selectedOptions.values()).map(t=>this.getItemValue(t));return this.options.isMultipleEnabled?e:e[0]??null}attachPillTooltips(){if(!this.options.isPillTooltipsEnabled){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(l=>{const o=l,s=o.querySelector(".ml__pill-remove");if(!s)return;const n=s.dataset.value,r=this.selectedOptions.get(n);if(!r)return;const a=o.querySelector(".ml__pill-text");a&&this.createTooltipForElement(a,r,n);const c=this.getItemDisplayValue(r);this.createRemoveButtonTooltip(s,c,n)});const t=this.pillsContainer.querySelector(".ml__pill--more");if(t){const l=t.querySelector(".ml__pill-remove");if(l&&l.dataset.action==="remove-hidden"){const o=this.options.pillsMaxVisible||3,n=Array.from(this.selectedOptions.values()).length-o;this.createRemoveButtonTooltip(l,`${n} hidden items`,"more-badge-remove")}}}createTooltipForElement(e,t,l){const o=document.createElement("div");o.className="ml__pill-tooltip";let s;if(this.options.getPillTooltipCallback)s=this.options.getPillTooltipCallback(t),console.log("[Tooltips] Using custom callback for tooltip content");else{const d=this.getItemDisplayValue(t),m=this.getItemSubtitle(t);s=m?`${d}
-${m}`:d,console.log(`[Tooltips] Using default content: "${s}"`)}typeof s=="string"?o.textContent=s:o.appendChild(s),(this.options.container||document.body).appendChild(o),console.log(`[Tooltips] Tooltip element created and appended for "${l}"`),this.pillTooltips.set(l,o);let r,a;const c=()=>{clearTimeout(a),console.log(`[Tooltips] Mouse entered pill "${l}", will show tooltip in ${this.options.pillTooltipDelay||300}ms`),r=window.setTimeout(()=>{console.log(`[Tooltips] Showing tooltip for "${l}"`),o.classList.add("ml__pill-tooltip--visible"),this.positionPillTooltip(e,o,l)},this.options.pillTooltipDelay||300)},p=()=>{clearTimeout(r),a=window.setTimeout(()=>{o.classList.remove("ml__pill-tooltip--visible"),this.cleanupPillTooltip(l)},100)};e.addEventListener("mouseenter",c),e.addEventListener("mouseleave",p)}createRemoveButtonTooltip(e,t,l){const o=document.createElement("div");o.className="ml__pill-tooltip",o.textContent=`Remove ${t}`,(this.options.container||document.body).appendChild(o);const n=`${l}-remove`;this.pillTooltips.set(n,o);let r,a;const c=()=>{clearTimeout(a);const d=this.pillTooltips.get(l);d&&d.classList.remove("ml__pill-tooltip--visible"),r=window.setTimeout(()=>{o.classList.add("ml__pill-tooltip--visible"),this.positionPillTooltip(e,o,n)},this.options.pillTooltipDelay||300)},p=()=>{clearTimeout(r),a=window.setTimeout(()=>{o.classList.remove("ml__pill-tooltip--visible"),this.cleanupPillTooltip(n)},100)};e.addEventListener("mouseenter",c),e.addEventListener("mouseleave",p)}positionPillTooltip(e,t,l){const o=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 "${l}" at x:${s}, y:${n}`,{placement:this.options.pillTooltipPlacement||"top",tooltipClasses:t.className,tooltipDisplay:window.getComputedStyle(t).display,tooltipOpacity:window.getComputedStyle(t).opacity,tooltipVisibility:window.getComputedStyle(t).visibility,tooltipZIndex:window.getComputedStyle(t).zIndex,tooltipPosition:window.getComputedStyle(t).position})})});this.pillTooltipCleanups.set(l,o)}cleanupPillTooltip(e){const t=this.pillTooltipCleanups.get(e);t&&(t(),this.pillTooltipCleanups.delete(e))}destroyAllPillTooltips(){this.pillTooltipCleanups.forEach(e=>e()),this.pillTooltipCleanups.clear(),this.pillTooltips.forEach(e=>e.remove()),this.pillTooltips.clear()}destroy(){this.destroyAllPillTooltips(),this.dropdownCleanup&&this.dropdownCleanup(),this.hintCleanup&&this.hintCleanup(),this.selectedPopoverCleanup&&this.selectedPopoverCleanup(),this.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);cursor:pointer;transition:border-color var(--ml-transition-fast, .15s) var(--ml-easing-snappy, cubic-bezier(.4, 0, .2, 1))}.ml__input:focus{outline:none;border-color:var(--ml-input-focus-border-color, #3b82f6)}.ml__input::placeholder{color:var(--ml-input-placeholder-color, #6b7280);opacity:0;transition:opacity var(--ml-transition-fast, .15s) var(--ml-easing-snappy, cubic-bezier(.4, 0, .2, 1))}:host([data-ready]) .ml__input::placeholder{opacity:var(--ml-placeholder-opacity, .6)}.ml__toggle{position:absolute;right:var(--ml-toggle-right, .75rem);top:50%;transform:var(--ml-transform-center-y, translateY(-50%));pointer-events:none;color:var(--ml-toggle-color, #6b7280);transition:transform var(--ml-transition-fast, .15s) var(--ml-easing-snappy, cubic-bezier(.4, 0, .2, 1))}.ml--open .ml__toggle{transform:var(--ml-transform-center-y, translateY(-50%)) rotate(var(--ml-transform-rotate-180, 180deg))}.ml__count-badge{position:absolute;right:var(--ml-count-badge-offset, 2rem);top:50%;transform:var(--ml-transform-center-y, translateY(-50%));padding:var(--ml-count-badge-padding, .125rem .25rem);background:var(--ml-count-badge-bg, #3b82f6);color:var(--ml-count-badge-color, #ffffff);font-size:var(--ml-count-badge-font-size, .75rem);font-weight:var(--ml-count-badge-font-weight, 600);border-radius:var(--ml-count-badge-border-radius, .25rem);cursor:pointer;transition:all var(--ml-transition-fast, .15s) var(--ml-easing-snappy, cubic-bezier(.4, 0, .2, 1))}.ml__count-badge:hover{background:var(--ml-count-badge-bg-hover, #2563eb);transform:var(--ml-transform-center-y, translateY(-50%)) scale(var(--ml-transform-scale-hover, 1.1))}.ml__hint{display:none;position:absolute;z-index:var(--ml-z-index-popover, 10000);padding:var(--ml-hint-padding, .5rem .75rem);background:var(--ml-hint-bg, #ffffff);border:var(--ml-hint-border, 1px solid #e5e7eb);border-radius:var(--ml-hint-border-radius, .375rem);box-shadow:var(--ml-hint-box-shadow, 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -2px rgba(0, 0, 0, .1));font-size:var(--ml-hint-font-size, .75rem);color:var(--ml-hint-color, #6b7280);line-height:var(--ml-line-height-relaxed, 1.4);max-width:100%}.ml__hint--visible{display:block}.ml__dropdown{display:none;position:absolute;z-index:var(--ml-z-index-dropdown, 9999);background:var(--ml-dropdown-bg, #ffffff);border:var(--ml-dropdown-border, 1px solid #e5e7eb);border-radius:var(--ml-dropdown-border-radius, .375rem);box-shadow:var(--ml-dropdown-box-shadow, 0 20px 25px -5px rgba(0, 0, 0, .1), 0 8px 10px -6px rgba(0, 0, 0, .1));max-height:var(--ml-dropdown-max-height, 20rem);overflow-y:auto;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, .25rem);justify-content:flex-end}.ml__pills--right{margin-left:var(--ml-pills-margin-right, .25rem);justify-content:flex-start}.ml__count-display{display:flex;align-items:center}.ml__count-display:empty{display:none}.ml__count-display--bottom{margin-top:var(--ml-count-display-margin-bottom, .5rem)}.ml__count-display--top{margin-bottom:var(--ml-count-display-margin-top, .5rem);order:var(--ml-order-first, -1)}.ml__count-display--left{order:var(--ml-order-first, -1);margin-right:var(--ml-count-display-margin-left, .5rem);justify-content:flex-start}.ml__count-display--right{margin-left:var(--ml-count-display-margin-right, .5rem);justify-content:flex-end}.ml__count-badge-wrapper{display:inline-flex;align-items:center;gap:var(--ml-count-badge-wrapper-gap, .25rem);background:var(--ml-count-badge-wrapper-bg, transparent);border:var(--ml-count-badge-wrapper-border, 1px solid #e5e7eb);border-radius:var(--ml-count-badge-wrapper-border-radius, .25rem);padding:var(--ml-count-badge-wrapper-padding, .25rem .5rem);transition:all var(--ml-transition-fast, .15s) var(--ml-easing-snappy, cubic-bezier(.4, 0, .2, 1))}.ml__count-badge-wrapper:hover{background:var(--ml-count-badge-wrapper-bg-hover, #f9fafb);border-color:var(--ml-count-badge-wrapper-border-color-hover, #3b82f6)}.ml__count-text{display:inline-flex;align-items:center;background:var(--ml-count-text-bg, transparent);border:var(--ml-count-text-border, none);padding:0;font-size:var(--ml-count-text-font-size, .875rem);color:var(--ml-count-text-color, #111827);cursor:pointer;transition:color var(--ml-transition-fast, .15s) var(--ml-easing-snappy, cubic-bezier(.4, 0, .2, 1))}.ml__count-clear{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:var(--ml-count-clear-size, 1rem);height:var(--ml-count-clear-size, 1rem);padding:0;border:none;background:var(--ml-count-clear-bg, transparent);color:var(--ml-count-clear-color, #6b7280);font-size:var(--ml-count-clear-font-size, 1.125rem);line-height:var(--ml-line-height-none, 1);cursor:pointer;border-radius:var(--ml-count-clear-border-radius, 50%);transition:all var(--ml-transition-fast, .15s) var(--ml-easing-snappy, cubic-bezier(.4, 0, .2, 1))}.ml__count-clear:hover{background:var(--ml-count-clear-bg-hover, rgba(59, 130, 246, .2));color:var(--ml-count-clear-color-hover, #3b82f6)}.ml__count-clear:before{content:var(--ml-icon-clear, "×")}.ml__pill{display:inline-flex;align-items:center;height:var(--ml-pill-height, 1.5rem);font-size:var(--ml-pill-font-size, .75rem);font-weight:var(--ml-pill-font-weight, 600);line-height:var(--ml-line-height-none, 1);border-radius:var(--ml-pill-border-radius, .375rem);overflow:hidden;max-width:100%}.ml__pill-text{display:flex;align-items:center;height:100%;padding:var(--ml-pill-text-padding, 0 .5rem);background:var(--ml-pill-text-bg, #eff6ff);color:var(--ml-pill-text-color, #3b82f6);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transition:background-color var(--ml-transition-normal, .2s) ease}.ml__pill-remove{display:flex;align-items:center;justify-content:center;width:var(--ml-pill-remove-width, 1.5rem);height:100%;flex-shrink:0;background:var(--ml-pill-remove-bg, #3b82f6);color:var(--ml-pill-remove-color, #ffffff);border:var(--ml-pill-remove-border, none);cursor:pointer;transition:background-color var(--ml-transition-normal, .2s) ease;font-size:var(--ml-pill-remove-font-size, .75rem)}.ml__pill-remove:hover{background:var(--ml-pill-remove-bg-hover, #2563eb)}.ml__pill-remove:focus{outline:none;box-shadow:var(--ml-pill-remove-box-shadow-focus, 0 0 0 2px rgba(59, 130, 246, .5))}.ml__pill-remove:before{content:var(--ml-icon-remove, "×");font-size:var(--ml-font-size-base, 1rem);line-height:var(--ml-line-height-none, 1)}.ml__pill--more{cursor:pointer}.ml__pill--more .ml__pill-text{background:var(--ml-more-badge-bg, #eff6ff);font-weight:var(--ml-pill-font-weight, 600)}.ml__pill--more:hover .ml__pill-text{background:var(--ml-more-badge-hover-bg, #ffffff)}.ml__pill--more:active .ml__pill-text{background:var(--ml-more-badge-active-bg, #e0f2fe)}.ml__pill-tooltip{position:fixed;z-index:var(--ml-tooltip-z-index, 10000);opacity:0;visibility:hidden;transition:opacity var(--ml-transition-normal, .2s) ease,visibility var(--ml-transition-normal, .2s) ease;background:var(--ml-tooltip-bg, #333);color:var(--ml-tooltip-color, #fff);padding:var(--ml-tooltip-padding, .5rem .75rem);border-radius:var(--ml-tooltip-border-radius, .375rem);font-size:var(--ml-tooltip-font-size, .875rem);line-height:var(--ml-line-height-relaxed, 1.4);max-width:var(--ml-tooltip-max-width, 20rem);word-wrap:break-word;white-space:pre-wrap;box-shadow:var(--ml-tooltip-shadow, 0 2px 8px rgba(0, 0, 0, .15));pointer-events:none}.ml__pill-tooltip--visible{opacity:1;visibility:visible}.ml__selected-popover{display:none;position:absolute;z-index:var(--ml-z-index-popover, 10000);background:var(--ml-selected-popover-bg, #ffffff);border:var(--ml-selected-popover-border, 1px solid #e5e7eb);border-radius:var(--ml-selected-popover-border-radius, .375rem);box-shadow:var(--ml-selected-popover-box-shadow, 0 20px 25px -5px rgba(0, 0, 0, .1), 0 8px 10px -6px rgba(0, 0, 0, .1));width:var(--ml-selected-popover-width, 20rem);max-height:var(--ml-selected-popover-max-height, 20rem);overflow:hidden}.ml__selected-popover--visible{display:flex;flex-direction:column}.ml__selected-popover-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--rtl .ml__input-wrapper{direction:rtl}.ml--rtl .ml__input{text-align:right;padding-left:var(--ml-input-padding-right, 2.5rem);padding-right:var(--ml-input-padding-h, .75rem)}.ml--rtl .ml__toggle{left:var(--ml-toggle-right, .75rem)!important;right:auto!important}.ml--rtl .ml__count-badge{left:var(--ml-count-badge-offset, 2rem)!important;right:auto!important}.ml--rtl .ml__dropdown{direction:rtl;text-align:right}.ml--rtl .ml__option{flex-direction:row-reverse}.ml--rtl .ml__checkbox{margin-left:var(--ml-spacing-sm, .5rem);margin-right:0}.ml--rtl .ml__option-content{text-align:right}.ml--rtl .ml__option-icon{margin-left:var(--ml-spacing-xs, .25rem);margin-right:0}.ml--rtl .ml__pills{direction:rtl}.ml--rtl .ml__pill{flex-direction:row-reverse}.ml--rtl .ml__pill-remove{border-radius:var(--ml-pill-remove-border-radius-rtl, .375rem) 0 0 var(--ml-pill-remove-border-radius-rtl, .375rem);border-left:var(--ml-pill-remove-border, none);border-right:none}.ml--rtl .ml__pill-text{border-radius:0 var(--ml-pill-text-border-radius-rtl, .375rem) var(--ml-pill-text-border-radius-rtl, .375rem) 0}.ml--rtl .ml__count-display{direction:rtl}.ml--rtl .ml__count-badge-wrapper{flex-direction:row-reverse}.ml--rtl .ml__selected-popover{direction:rtl;text-align:right}.ml--rtl .ml__actions{direction:rtl}.ml--rtl .ml__group-label,.ml--rtl .ml__empty{text-align:right}.ml--rtl .ml__hint{direction:rtl;text-align:right}.ml--xs .ml__input{font-size:var(--ml-font-size-xs, .75rem)}.ml--xs .ml__option{padding:var(--ml-spacing-xs, .25rem) var(--ml-spacing-sm, .5rem)}.ml--xs .ml__option-title{font-size:var(--ml-font-size-xs, .75rem)}.ml--xs .ml__pill{font-size:var(--ml-font-size-2xs, .625rem)}.ml--sm .ml__input,.ml--sm .ml__option-title{font-size:var(--ml-font-size-xs, .75rem)}.ml--lg .ml__input,.ml--lg .ml__option-title{font-size:var(--ml-font-size-base, 1rem)}.ml--lg .ml__pill{font-size:var(--ml-font-size-sm, .875rem)}.ml--xl .ml__input,.ml--xl .ml__option-title{font-size:var(--ml-font-size-lg, 1.125rem)}.ml--xl .ml__pill{font-size:var(--ml-font-size-base, 1rem)}.ml--disabled .ml__input{opacity:var(--ml-disabled-input-opacity, .6);cursor:not-allowed;background:var(--ml-input-bg-disabled, rgba(107, 114, 128, .05))}.ml--disabled .ml__toggle{opacity:var(--ml-disabled-input-opacity, .6)}.ml--no-checkboxes .ml__option{gap:0;padding-left:var(--ml-option-padding-h, .75rem)}.ml--no-checkboxes .ml__option-content{padding-left:0}.ml-debug-info{margin-top:.25rem;padding:.25rem;background-color:#f9fafb;border:1px solid #e5e7eb;border-radius:.375rem;font-size:.75rem;color:#111827}.ml-debug-info details summary{cursor:pointer;font-weight:600;color:#2563eb;-webkit-user-select:none;user-select:none;padding:.25rem;border-radius:.25rem}.ml-debug-info details summary:hover{background-color:#f3f4f6}.ml-debug-info details summary:focus{outline:2px solid #3b82f6;outline-offset:2px}.ml-debug-info .ml-debug-stats{display:flex;flex-direction:column;gap:.25rem;margin-top:.25rem;padding:.25rem;background-color:#fff;border-radius:.25rem}.ml-debug-info .ml-debug-stats span{display:flex;justify-content:space-between;padding:2px 4px;font-family:monospace;font-size:.625rem}.ml-debug-info .ml-debug-stats span:before{content:"•";margin-right:.25rem;color:#3b82f6}',zt=typeof HTMLElement<"u"?HTMLElement:class{},we=new Set;function We(){return Array.from(we)}class _e extends zt{constructor(){super();h(this,"picker");h(this,"containerElement");h(this,"shadow");h(this,"_options");h(this,"_valueMember");h(this,"_getValueCallback");h(this,"_displayValueMember");h(this,"_getDisplayValueCallback");h(this,"_searchValueMember");h(this,"_getSearchValueCallback");h(this,"_iconMember");h(this,"_getIconCallback");h(this,"_subtitleMember");h(this,"_getSubtitleCallback");h(this,"_groupMember");h(this,"_getGroupCallback");h(this,"_disabledMember");h(this,"_getDisabledCallback");h(this,"_getValueFormatCallback");h(this,"_getPillTooltipCallback");h(this,"_getCountPillCallback");h(this,"_searchCallback");h(this,"_addNewCallback");h(this,"_selectCallback");h(this,"_deselectCallback");h(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,l,o){l!==o&&this.picker&&t!=="initial-values"&&(this.picker.destroy(),this.initializePicker())}render(){this.containerElement=document.createElement("div"),this.containerElement.setAttribute("data-multiselect",""),this.className&&(this.containerElement.className=this.className),this.shadow.appendChild(this.containerElement),this.getAttribute("show-debug-info")==="true"&&this.renderDebugInfo()}renderDebugInfo(){const t=this.shadow.querySelector(".ml-debug-info");t&&t.remove();const l=document.createElement("div");l.className="ml-debug-info";const o=document.createElement("details"),s=document.createElement("summary");s.textContent="Debug Info";const n=document.createElement("div");n.className="ml-debug-stats",o.appendChild(s),o.appendChild(n),l.appendChild(o),this.shadow.appendChild(l),this.updateDebugInfo()}updateDebugInfo(){var u,g;const t=this.shadow.querySelector(".ml-debug-stats");if(!t||!this.picker)return;const l="1.0.0-rc04",o=We().length,n=this.picker.getSelected().length,r=((u=this._options)==null?void 0:u.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=`
+        `}handleSelectedPopoverClick(e){if(e.stopPropagation(),e.target.closest(".ml__selected-popover-close")){e.preventDefault(),this.hideSelectedPopover();return}const l=e.target.closest(".ml__pill-remove");if(l){e.preventDefault();const o=l.dataset.value,s=this.selectedOptions.get(o);s&&(this.deselectOption(s),this.renderSelectedPopover(),this.selectedValues.size===0&&this.hideSelectedPopover())}}positionSelectedPopover(){this.selectedPopoverCleanup=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:l,placement:o})=>{this.selectedPopoverPlacement||(this.selectedPopoverPlacement=o,f.debug(`[${this.instanceId}] Locked popover placement:`,o));const s={left:`${t}px`,top:`${l}px`,width:`${this.input.offsetWidth}px`};this.options.dropdownMinWidth&&(s.minWidth=this.options.dropdownMinWidth),Object.assign(this.selectedPopover.style,s)})})}updateHiddenInput(){if(!this.options.formFieldId)return;this.hiddenInputs.forEach(o=>o.remove()),this.hiddenInputs=[];const e=this.options.valueFormat||"json",t=Array.from(this.selectedOptions.values()).map(o=>this.getItemValue(o)),l=this.options.hostElement||this.element;if(e==="array")t.forEach(o=>{const s=document.createElement("input");s.type="hidden",s.name=`${this.options.formFieldId}[]`,s.value=String(o),l.appendChild(s),this.hiddenInputs.push(s)});else{const o=document.createElement("input");o.type="hidden",o.name=this.options.formFieldId,o.id=this.options.formFieldId,o.value=this.getFormValue(),l.appendChild(o),this.hiddenInputs.push(o)}}getFormValue(){const e=Array.from(this.selectedOptions.values()).map(l=>this.getItemValue(l));return this.options.getValueFormatCallback?this.options.getValueFormatCallback(e):(this.options.valueFormat||"json")==="csv"?e.join(","):JSON.stringify(e)}getSelected(){return Array.from(this.selectedOptions.values())}setSelected(e){this.selectedValues=new Set(e.map(t=>String(t))),this.selectedOptions.clear(),e.forEach(t=>{const l=String(t),o=this.allOptions.find(s=>String(this.getItemValue(s))===l);o&&this.selectedOptions.set(l,o)}),this.renderDropdown(),this.renderPills(),this.updateHiddenInput()}get selectedItem(){return this.selectedOptions.size===0?null:Array.from(this.selectedOptions.values())[0]}get selectedValue(){if(!this.options.valueMember&&!this.options.getValueCallback)return null;if(this.selectedOptions.size===0)return this.options.isMultipleEnabled?[]:null;const e=Array.from(this.selectedOptions.values()).map(t=>this.getItemValue(t));return this.options.isMultipleEnabled?e:e[0]??null}getValue(){if(this.selectedOptions.size===0)return this.options.isMultipleEnabled?[]:null;const e=Array.from(this.selectedOptions.values()).map(t=>this.getItemValue(t));return this.options.isMultipleEnabled?e:e[0]??null}attachPillTooltips(){if(!this.options.isPillTooltipsEnabled){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(l=>{const o=l,s=o.querySelector(".ml__pill-remove");if(!s)return;const n=s.dataset.value,r=this.selectedOptions.get(n);if(!r)return;const a=o.querySelector(".ml__pill-text");a&&this.createTooltipForElement(a,r,n);const c=this.getItemPillDisplayValue(r);this.createRemoveButtonTooltip(s,c,n)});const t=this.pillsContainer.querySelector(".ml__pill--more");if(t){const l=t.querySelector(".ml__pill-remove");if(l&&l.dataset.action==="remove-hidden"){const o=this.options.pillsMaxVisible||3,n=Array.from(this.selectedOptions.values()).length-o;this.createRemoveButtonTooltip(l,`${n} hidden items`,"more-badge-remove")}}}createTooltipForElement(e,t,l){const o=document.createElement("div");o.className="ml__pill-tooltip";let s;if(this.options.getPillTooltipCallback)s=this.options.getPillTooltipCallback(t),console.log("[Tooltips] Using custom callback for tooltip content");else{const d=this.getItemPillDisplayValue(t),m=this.getItemSubtitle(t);s=m?`${d}
+${m}`:d,console.log(`[Tooltips] Using default content: "${s}"`)}typeof s=="string"?o.textContent=s:o.appendChild(s),(this.options.container||document.body).appendChild(o),console.log(`[Tooltips] Tooltip element created and appended for "${l}"`),this.pillTooltips.set(l,o);let r,a;const c=()=>{clearTimeout(a),console.log(`[Tooltips] Mouse entered pill "${l}", will show tooltip in ${this.options.pillTooltipDelay||300}ms`),r=window.setTimeout(()=>{console.log(`[Tooltips] Showing tooltip for "${l}"`),o.classList.add("ml__pill-tooltip--visible"),this.positionPillTooltip(e,o,l)},this.options.pillTooltipDelay||300)},p=()=>{clearTimeout(r),a=window.setTimeout(()=>{o.classList.remove("ml__pill-tooltip--visible"),this.cleanupPillTooltip(l)},100)};e.addEventListener("mouseenter",c),e.addEventListener("mouseleave",p)}createRemoveButtonTooltip(e,t,l){const o=document.createElement("div");o.className="ml__pill-tooltip",o.textContent=`Remove ${t}`,(this.options.container||document.body).appendChild(o);const n=`${l}-remove`;this.pillTooltips.set(n,o);let r,a;const c=()=>{clearTimeout(a);const d=this.pillTooltips.get(l);d&&d.classList.remove("ml__pill-tooltip--visible"),r=window.setTimeout(()=>{o.classList.add("ml__pill-tooltip--visible"),this.positionPillTooltip(e,o,n)},this.options.pillTooltipDelay||300)},p=()=>{clearTimeout(r),a=window.setTimeout(()=>{o.classList.remove("ml__pill-tooltip--visible"),this.cleanupPillTooltip(n)},100)};e.addEventListener("mouseenter",c),e.addEventListener("mouseleave",p)}positionPillTooltip(e,t,l){const o=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 "${l}" at x:${s}, y:${n}`,{placement:this.options.pillTooltipPlacement||"top",tooltipClasses:t.className,tooltipDisplay:window.getComputedStyle(t).display,tooltipOpacity:window.getComputedStyle(t).opacity,tooltipVisibility:window.getComputedStyle(t).visibility,tooltipZIndex:window.getComputedStyle(t).zIndex,tooltipPosition:window.getComputedStyle(t).position})})});this.pillTooltipCleanups.set(l,o)}cleanupPillTooltip(e){const t=this.pillTooltipCleanups.get(e);t&&(t(),this.pillTooltipCleanups.delete(e))}destroyAllPillTooltips(){this.pillTooltipCleanups.forEach(e=>e()),this.pillTooltipCleanups.clear(),this.pillTooltips.forEach(e=>e.remove()),this.pillTooltips.clear()}destroy(){this.destroyAllPillTooltips(),this.dropdownCleanup&&this.dropdownCleanup(),this.hintCleanup&&this.hintCleanup(),this.selectedPopoverCleanup&&this.selectedPopoverCleanup(),this.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);cursor:pointer;transition:border-color var(--ml-transition-fast, .15s) var(--ml-easing-snappy, cubic-bezier(.4, 0, .2, 1))}.ml__input:focus{outline:none;border-color:var(--ml-input-focus-border-color, #3b82f6)}.ml__input::placeholder{color:var(--ml-input-placeholder-color, #6b7280);opacity:0;transition:opacity var(--ml-transition-fast, .15s) var(--ml-easing-snappy, cubic-bezier(.4, 0, .2, 1))}:host([data-ready]) .ml__input::placeholder{opacity:var(--ml-placeholder-opacity, .6)}.ml__toggle{position:absolute;right:var(--ml-toggle-right, .75rem);top:50%;transform:var(--ml-transform-center-y, translateY(-50%));pointer-events:none;color:var(--ml-toggle-color, #6b7280);transition:transform var(--ml-transition-fast, .15s) var(--ml-easing-snappy, cubic-bezier(.4, 0, .2, 1))}.ml--open .ml__toggle{transform:var(--ml-transform-center-y, translateY(-50%)) rotate(var(--ml-transform-rotate-180, 180deg))}.ml__count-badge{position:absolute;right:var(--ml-count-badge-offset, 2rem);top:50%;transform:var(--ml-transform-center-y, translateY(-50%));padding:var(--ml-count-badge-padding, .125rem .25rem);background:var(--ml-count-badge-bg, #3b82f6);color:var(--ml-count-badge-color, #ffffff);font-size:var(--ml-count-badge-font-size, .75rem);font-weight:var(--ml-count-badge-font-weight, 600);border-radius:var(--ml-count-badge-border-radius, .25rem);cursor:pointer;transition:all var(--ml-transition-fast, .15s) var(--ml-easing-snappy, cubic-bezier(.4, 0, .2, 1))}.ml__count-badge:hover{background:var(--ml-count-badge-bg-hover, #2563eb);transform:var(--ml-transform-center-y, translateY(-50%)) scale(var(--ml-transform-scale-hover, 1.1))}.ml__hint{display:none;position:absolute;z-index:var(--ml-z-index-popover, 10000);padding:var(--ml-hint-padding, .5rem .75rem);background:var(--ml-hint-bg, #ffffff);border:var(--ml-hint-border, 1px solid #e5e7eb);border-radius:var(--ml-hint-border-radius, .375rem);box-shadow:var(--ml-hint-box-shadow, 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -2px rgba(0, 0, 0, .1));font-size:var(--ml-hint-font-size, .75rem);color:var(--ml-hint-color, #6b7280);line-height:var(--ml-line-height-relaxed, 1.4);max-width:100%}.ml__hint--visible{display:block}.ml__dropdown{display:none;position:absolute;z-index:var(--ml-z-index-dropdown, 9999);background:var(--ml-dropdown-bg, #ffffff);border:var(--ml-dropdown-border, 1px solid #e5e7eb);border-radius:var(--ml-dropdown-border-radius, .375rem);box-shadow:var(--ml-dropdown-box-shadow, 0 20px 25px -5px rgba(0, 0, 0, .1), 0 8px 10px -6px rgba(0, 0, 0, .1));max-height:var(--ml-dropdown-max-height, 20rem);overflow-y:auto;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, .25rem);justify-content:flex-end}.ml__pills--right{margin-left:var(--ml-pills-margin-right, .25rem);justify-content:flex-start}.ml__count-display{display:flex;align-items:center}.ml__count-display:empty{display:none}.ml__count-display--bottom{margin-top:var(--ml-count-display-margin-bottom, .5rem)}.ml__count-display--top{margin-bottom:var(--ml-count-display-margin-top, .5rem);order:var(--ml-order-first, -1)}.ml__count-display--left{order:var(--ml-order-first, -1);margin-right:var(--ml-count-display-margin-left, .5rem);justify-content:flex-start}.ml__count-display--right{margin-left:var(--ml-count-display-margin-right, .5rem);justify-content:flex-end}.ml__count-badge-wrapper{display:inline-flex;align-items:center;gap:var(--ml-count-badge-wrapper-gap, .25rem);background:var(--ml-count-badge-wrapper-bg, transparent);border:var(--ml-count-badge-wrapper-border, 1px solid #e5e7eb);border-radius:var(--ml-count-badge-wrapper-border-radius, .25rem);padding:var(--ml-count-badge-wrapper-padding, .25rem .5rem);transition:all var(--ml-transition-fast, .15s) var(--ml-easing-snappy, cubic-bezier(.4, 0, .2, 1))}.ml__count-badge-wrapper:hover{background:var(--ml-count-badge-wrapper-bg-hover, #f9fafb);border-color:var(--ml-count-badge-wrapper-border-color-hover, #3b82f6)}.ml__count-text{display:inline-flex;align-items:center;background:var(--ml-count-text-bg, transparent);border:var(--ml-count-text-border, none);padding:0;font-size:var(--ml-count-text-font-size, .875rem);color:var(--ml-count-text-color, #111827);cursor:pointer;transition:color var(--ml-transition-fast, .15s) var(--ml-easing-snappy, cubic-bezier(.4, 0, .2, 1))}.ml__count-clear{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:var(--ml-count-clear-size, 1rem);height:var(--ml-count-clear-size, 1rem);padding:0;border:none;background:var(--ml-count-clear-bg, transparent);color:var(--ml-count-clear-color, #6b7280);font-size:var(--ml-count-clear-font-size, 1.125rem);line-height:var(--ml-line-height-none, 1);cursor:pointer;border-radius:var(--ml-count-clear-border-radius, 50%);transition:all var(--ml-transition-fast, .15s) var(--ml-easing-snappy, cubic-bezier(.4, 0, .2, 1))}.ml__count-clear:hover{background:var(--ml-count-clear-bg-hover, rgba(59, 130, 246, .2));color:var(--ml-count-clear-color-hover, #3b82f6)}.ml__count-clear:before{content:var(--ml-icon-clear, "×")}.ml__pill{display:inline-flex;align-items:center;height:var(--ml-pill-height, 1.5rem);font-size:var(--ml-pill-font-size, .75rem);font-weight:var(--ml-pill-font-weight, 600);line-height:var(--ml-line-height-none, 1);border-radius:var(--ml-pill-border-radius, .375rem);overflow:hidden;max-width:100%}.ml__pill-text{display:flex;align-items:center;height:100%;padding:var(--ml-pill-text-padding, 0 .5rem);background:var(--ml-pill-text-bg, #eff6ff);color:var(--ml-pill-text-color, #3b82f6);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transition:background-color var(--ml-transition-normal, .2s) ease}.ml__pill-remove{display:flex;align-items:center;justify-content:center;width:var(--ml-pill-remove-width, 1.5rem);height:100%;flex-shrink:0;background:var(--ml-pill-remove-bg, #3b82f6);color:var(--ml-pill-remove-color, #ffffff);border:var(--ml-pill-remove-border, none);cursor:pointer;transition:background-color var(--ml-transition-normal, .2s) ease;font-size:var(--ml-pill-remove-font-size, .75rem)}.ml__pill-remove:hover{background:var(--ml-pill-remove-bg-hover, #2563eb)}.ml__pill-remove:focus{outline:none;box-shadow:var(--ml-pill-remove-box-shadow-focus, 0 0 0 2px rgba(59, 130, 246, .5))}.ml__pill-remove:before{content:var(--ml-icon-remove, "×");font-size:var(--ml-font-size-base, 1rem);line-height:var(--ml-line-height-none, 1)}.ml__pill--more{cursor:pointer}.ml__pill--more .ml__pill-text{background:var(--ml-more-badge-bg, #eff6ff);font-weight:var(--ml-pill-font-weight, 600)}.ml__pill--more:hover .ml__pill-text{background:var(--ml-more-badge-hover-bg, #ffffff)}.ml__pill--more:active .ml__pill-text{background:var(--ml-more-badge-active-bg, #e0f2fe)}.ml__pill-tooltip{position:fixed;z-index:var(--ml-tooltip-z-index, 10000);opacity:0;visibility:hidden;transition:opacity var(--ml-transition-normal, .2s) ease,visibility var(--ml-transition-normal, .2s) ease;background:var(--ml-tooltip-bg, #333);color:var(--ml-tooltip-color, #fff);padding:var(--ml-tooltip-padding, .5rem .75rem);border-radius:var(--ml-tooltip-border-radius, .375rem);font-size:var(--ml-tooltip-font-size, .875rem);line-height:var(--ml-line-height-relaxed, 1.4);max-width:var(--ml-tooltip-max-width, 20rem);word-wrap:break-word;white-space:pre-wrap;box-shadow:var(--ml-tooltip-shadow, 0 2px 8px rgba(0, 0, 0, .15));pointer-events:none}.ml__pill-tooltip--visible{opacity:1;visibility:visible}.ml__selected-popover{display:none;position:absolute;z-index:var(--ml-z-index-popover, 10000);background:var(--ml-selected-popover-bg, #ffffff);border:var(--ml-selected-popover-border, 1px solid #e5e7eb);border-radius:var(--ml-selected-popover-border-radius, .375rem);box-shadow:var(--ml-selected-popover-box-shadow, 0 20px 25px -5px rgba(0, 0, 0, .1), 0 8px 10px -6px rgba(0, 0, 0, .1));width:var(--ml-selected-popover-width, 20rem);max-height:var(--ml-selected-popover-max-height, 20rem);overflow:hidden}.ml__selected-popover--visible{display:flex;flex-direction:column}.ml__selected-popover-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--rtl .ml__input-wrapper{direction:rtl}.ml--rtl .ml__input{text-align:right;padding-left:var(--ml-input-padding-right, 2.5rem);padding-right:var(--ml-input-padding-h, .75rem)}.ml--rtl .ml__toggle{left:var(--ml-toggle-right, .75rem)!important;right:auto!important}.ml--rtl .ml__count-badge{left:var(--ml-count-badge-offset, 2rem)!important;right:auto!important}.ml--rtl .ml__dropdown{direction:rtl;text-align:right}.ml--rtl .ml__option{flex-direction:row-reverse}.ml--rtl .ml__checkbox{margin-left:var(--ml-spacing-sm, .5rem);margin-right:0}.ml--rtl .ml__option-content{text-align:right}.ml--rtl .ml__option-icon{margin-left:var(--ml-spacing-xs, .25rem);margin-right:0}.ml--rtl .ml__pills{direction:rtl}.ml--rtl .ml__pill{flex-direction:row-reverse}.ml--rtl .ml__pill-remove{border-radius:var(--ml-pill-remove-border-radius-rtl, .375rem) 0 0 var(--ml-pill-remove-border-radius-rtl, .375rem);border-left:var(--ml-pill-remove-border, none);border-right:none}.ml--rtl .ml__pill-text{border-radius:0 var(--ml-pill-text-border-radius-rtl, .375rem) var(--ml-pill-text-border-radius-rtl, .375rem) 0}.ml--rtl .ml__count-display{direction:rtl}.ml--rtl .ml__count-badge-wrapper{flex-direction:row-reverse}.ml--rtl .ml__selected-popover{direction:rtl;text-align:right}.ml--rtl .ml__actions{direction:rtl}.ml--rtl .ml__group-label,.ml--rtl .ml__empty{text-align:right}.ml--rtl .ml__hint{direction:rtl;text-align:right}.ml--xs .ml__input{font-size:var(--ml-font-size-xs, .75rem)}.ml--xs .ml__option{padding:var(--ml-spacing-xs, .25rem) var(--ml-spacing-sm, .5rem)}.ml--xs .ml__option-title{font-size:var(--ml-font-size-xs, .75rem)}.ml--xs .ml__pill{font-size:var(--ml-font-size-2xs, .625rem)}.ml--sm .ml__input,.ml--sm .ml__option-title{font-size:var(--ml-font-size-xs, .75rem)}.ml--lg .ml__input,.ml--lg .ml__option-title{font-size:var(--ml-font-size-base, 1rem)}.ml--lg .ml__pill{font-size:var(--ml-font-size-sm, .875rem)}.ml--xl .ml__input,.ml--xl .ml__option-title{font-size:var(--ml-font-size-lg, 1.125rem)}.ml--xl .ml__pill{font-size:var(--ml-font-size-base, 1rem)}.ml--disabled .ml__input{opacity:var(--ml-disabled-input-opacity, .6);cursor:not-allowed;background:var(--ml-input-bg-disabled, rgba(107, 114, 128, .05))}.ml--disabled .ml__toggle{opacity:var(--ml-disabled-input-opacity, .6)}.ml--no-checkboxes .ml__option{gap:0;padding-left:var(--ml-option-padding-h, .75rem)}.ml--no-checkboxes .ml__option-content{padding-left:0}.ml-debug-info{margin-top:.25rem;padding:.25rem;background-color:#f9fafb;border:1px solid #e5e7eb;border-radius:.375rem;font-size:.75rem;color:#111827}.ml-debug-info details summary{cursor:pointer;font-weight:600;color:#2563eb;-webkit-user-select:none;user-select:none;padding:.25rem;border-radius:.25rem}.ml-debug-info details summary:hover{background-color:#f3f4f6}.ml-debug-info details summary:focus{outline:2px solid #3b82f6;outline-offset:2px}.ml-debug-info .ml-debug-stats{display:flex;flex-direction:column;gap:.25rem;margin-top:.25rem;padding:.25rem;background-color:#fff;border-radius:.25rem}.ml-debug-info .ml-debug-stats span{display:flex;justify-content:space-between;padding:2px 4px;font-family:monospace;font-size:.625rem}.ml-debug-info .ml-debug-stats span:before{content:"•";margin-right:.25rem;color:#3b82f6}',zt=typeof HTMLElement<"u"?HTMLElement:class{},we=new Set;function We(){return Array.from(we)}class _e extends zt{constructor(){super();h(this,"picker");h(this,"containerElement");h(this,"shadow");h(this,"_options");h(this,"_valueMember");h(this,"_getValueCallback");h(this,"_displayValueMember");h(this,"_getDisplayValueCallback");h(this,"_getPillDisplayCallback");h(this,"_searchValueMember");h(this,"_getSearchValueCallback");h(this,"_iconMember");h(this,"_getIconCallback");h(this,"_subtitleMember");h(this,"_getSubtitleCallback");h(this,"_groupMember");h(this,"_getGroupCallback");h(this,"_disabledMember");h(this,"_getDisabledCallback");h(this,"_getValueFormatCallback");h(this,"_getPillTooltipCallback");h(this,"_getCountPillCallback");h(this,"_searchCallback");h(this,"_addNewCallback");h(this,"_selectCallback");h(this,"_deselectCallback");h(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,l,o){l!==o&&this.picker&&t!=="initial-values"&&(this.picker.destroy(),this.initializePicker())}render(){this.containerElement=document.createElement("div"),this.containerElement.setAttribute("data-multiselect",""),this.className&&(this.containerElement.className=this.className),this.shadow.appendChild(this.containerElement),this.getAttribute("show-debug-info")==="true"&&this.renderDebugInfo()}renderDebugInfo(){const t=this.shadow.querySelector(".ml-debug-info");t&&t.remove();const l=document.createElement("div");l.className="ml-debug-info";const o=document.createElement("details"),s=document.createElement("summary");s.textContent="Debug Info";const n=document.createElement("div");n.className="ml-debug-stats",o.appendChild(s),o.appendChild(n),l.appendChild(o),this.shadow.appendChild(l),this.updateDebugInfo()}updateDebugInfo(){var u,g;const t=this.shadow.querySelector(".ml-debug-stats");if(!t||!this.picker)return;const l="1.0.0-rc04",o=We().length,n=this.picker.getSelected().length,r=((u=this._options)==null?void 0:u.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=`
             <span>Version: ${l}</span>
             <span>Total Instances: ${o}</span>
             <span>Options: ${r}</span>
@@ -43,4 +43,4 @@ ${m}`:d,console.log(`[Tooltips] Using default content: "${s}"`)}typeof s=="strin
             <span>Dropdown: ${c?"Open":"Closed"}</span>
             <span>Search: ${p||"none"}</span>
             <span>Loading: ${d?"Yes":"No"}</span>
-        `,setTimeout(()=>{this.getAttribute("show-debug-info")==="true"&&this.updateDebugInfo()},500)}initializePicker(){if(!this.containerElement)return;let t;const l=this.getAttribute("initial-values");if(l)try{t=JSON.parse(l)}catch(s){console.error("[MultiSelectElement] Failed to parse initial-values:",s)}const o={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 je(this.containerElement,o)}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-rc04",config:{name:"@keenmate/web-multiselect",version:"1.0.0-rc04",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:()=>We()}),A.MultiSelectElement=_e,A.PureMultiSelect=je,Object.defineProperty(A,Symbol.toStringTag,{value:"Module"})});
+        `,setTimeout(()=>{this.getAttribute("show-debug-info")==="true"&&this.updateDebugInfo()},500)}initializePicker(){if(!this.containerElement)return;let t;const l=this.getAttribute("initial-values");if(l)try{t=JSON.parse(l)}catch(s){console.error("[MultiSelectElement] Failed to parse initial-values:",s)}const o={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,getPillDisplayCallback:this._getPillDisplayCallback,getSearchValueCallback:this._getSearchValueCallback,getIconCallback:this._getIconCallback,getSubtitleCallback:this._getSubtitleCallback,getGroupCallback:this._getGroupCallback,getDisabledCallback:this._getDisabledCallback,formFieldId:this.getAttribute("name")||void 0,valueFormat:this.getAttribute("value-format")||"json",getValueFormatCallback:this._getValueFormatCallback,isPillTooltipsEnabled:this.getAttribute("enable-pill-tooltips")==="true",getPillTooltipCallback:this._getPillTooltipCallback,pillTooltipPlacement:this.getAttribute("pill-tooltip-placement")||"top",pillTooltipDelay:parseInt(this.getAttribute("pill-tooltip-delay")||"300"),pillTooltipOffset:parseInt(this.getAttribute("pill-tooltip-offset")||"8"),getCountPillCallback:this._getCountPillCallback||((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 je(this.containerElement,o)}reinitialize(){this.picker&&(this.picker.destroy(),this.initializePicker())}get options(){return this._options}set options(t){this._options=t,this.reinitialize()}set valueMember(t){this._valueMember=t||void 0,t?this.setAttribute("value-member",t):this.removeAttribute("value-member")}get valueMember(){return this.getAttribute("value-member")}set displayValueMember(t){this._displayValueMember=t||void 0,t?this.setAttribute("display-value-member",t):this.removeAttribute("display-value-member")}get displayValueMember(){return this.getAttribute("display-value-member")}set searchValueMember(t){this._searchValueMember=t||void 0,t?this.setAttribute("search-value-member",t):this.removeAttribute("search-value-member")}get searchValueMember(){return this.getAttribute("search-value-member")}set iconMember(t){this._iconMember=t||void 0,t?this.setAttribute("icon-member",t):this.removeAttribute("icon-member")}get iconMember(){return this.getAttribute("icon-member")}set subtitleMember(t){this._subtitleMember=t||void 0,t?this.setAttribute("subtitle-member",t):this.removeAttribute("subtitle-member")}get subtitleMember(){return this.getAttribute("subtitle-member")}set groupMember(t){this._groupMember=t||void 0,t?this.setAttribute("group-member",t):this.removeAttribute("group-member")}get groupMember(){return this.getAttribute("group-member")}set disabledMember(t){this._disabledMember=t||void 0,t?this.setAttribute("disabled-member",t):this.removeAttribute("disabled-member")}get disabledMember(){return this.getAttribute("disabled-member")}set getValueCallback(t){this._getValueCallback=t,this.reinitialize()}get getValueCallback(){return this._getValueCallback}set getDisplayValueCallback(t){this._getDisplayValueCallback=t,this.reinitialize()}get getDisplayValueCallback(){return this._getDisplayValueCallback}set getPillDisplayCallback(t){this._getPillDisplayCallback=t,this.reinitialize()}get getPillDisplayCallback(){return this._getPillDisplayCallback}set getSearchValueCallback(t){this._getSearchValueCallback=t,this.reinitialize()}get getSearchValueCallback(){return this._getSearchValueCallback}set getIconCallback(t){this._getIconCallback=t,this.reinitialize()}get getIconCallback(){return this._getIconCallback}set getSubtitleCallback(t){this._getSubtitleCallback=t,this.reinitialize()}get getSubtitleCallback(){return this._getSubtitleCallback}set getGroupCallback(t){this._getGroupCallback=t,this.reinitialize()}get getGroupCallback(){return this._getGroupCallback}set getDisabledCallback(t){this._getDisabledCallback=t,this.reinitialize()}get getDisabledCallback(){return this._getDisabledCallback}set name(t){t?this.setAttribute("name",t):this.removeAttribute("name")}get name(){return this.getAttribute("name")}set valueFormat(t){t?this.setAttribute("value-format",t):this.removeAttribute("value-format")}get valueFormat(){return this.getAttribute("value-format")}set getValueFormatCallback(t){this._getValueFormatCallback=t,this.reinitialize()}get getValueFormatCallback(){return this._getValueFormatCallback}set thresholdMode(t){t?this.setAttribute("threshold-mode",t):this.removeAttribute("threshold-mode")}get thresholdMode(){return this.getAttribute("threshold-mode")}set pillsMaxVisible(t){t!==null?this.setAttribute("pills-max-visible",String(t)):this.removeAttribute("pills-max-visible")}get pillsMaxVisible(){const t=this.getAttribute("pills-max-visible");return t?parseInt(t):null}set enablePillTooltips(t){t?this.setAttribute("enable-pill-tooltips","true"):this.removeAttribute("enable-pill-tooltips")}get enablePillTooltips(){return this.getAttribute("enable-pill-tooltips")==="true"}set pillTooltipPlacement(t){t?this.setAttribute("pill-tooltip-placement",t):this.removeAttribute("pill-tooltip-placement")}get pillTooltipPlacement(){return this.getAttribute("pill-tooltip-placement")}set getPillTooltipCallback(t){this._getPillTooltipCallback=t,this.reinitialize()}get getPillTooltipCallback(){return this._getPillTooltipCallback}set getCountPillCallback(t){this._getCountPillCallback=t,this.reinitialize()}get getCountPillCallback(){return this._getCountPillCallback}get 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-rc04",config:{name:"@keenmate/web-multiselect",version:"1.0.0-rc04",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:()=>We()}),P.MultiSelectElement=_e,P.PureMultiSelect=je,Object.defineProperty(P,Symbol.toStringTag,{value:"Module"})});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@keenmate/web-multiselect",
-  "version": "1.0.0-rc04",
+  "version": "1.0.0-rc05",
   "description": "Lightweight multiselect web component with typeahead search, rich content support, and excellent keyboard navigation",
   "type": "module",
   "main": "./dist/multiselect.umd.js",