@keenmate/web-multiselect 1.0.0-rc02

package/dist/multiselect.umd.js

@@ -0,0 +1,46 @@
+(function(A,C){typeof exports=="object"&&typeof module<"u"?C(exports):typeof define=="function"&&define.amd?define(["exports"],C):(A=typeof globalThis<"u"?globalThis:A||self,C(A.MultiSelect={}))})(this,function(A){"use strict";var Nt=Object.defineProperty;var Rt=(A,C,O)=>C in A?Nt(A,C,{enumerable:!0,configurable:!0,writable:!0,value:O}):A[C]=O;var u=(A,C,O)=>Rt(A,typeof C!="symbol"?C+"":C,O);const C=Math.min,O=Math.max,q=Math.round,Z=Math.floor,I=i=>({x:i,y:i}),Ye={left:"right",right:"left",bottom:"top",top:"bottom"},Xe={start:"end",end:"start"};function Ce(i,e,t){return O(i,C(e,t))}function Q(i,e){return typeof i=="function"?i(e):i}function N(i){return i.split("-")[0]}function ee(i){return i.split("-")[1]}function ke(i){return i==="x"?"y":"x"}function Ae(i){return i==="y"?"height":"width"}const Je=new Set(["top","bottom"]);function $(i){return Je.has(N(i))?"y":"x"}function Se(i){return ke($(i))}function qe(i,e,t){t===void 0&&(t=!1);const o=ee(i),l=Se(i),s=Ae(l);let n=l==="x"?o===(t?"end":"start")?"right":"left":o==="start"?"bottom":"top";return e.reference[s]>e.floating[s]&&(n=te(n)),[n,te(n)]}function Ze(i){const e=te(i);return[he(i),e,he(e)]}function he(i){return i.replace(/start|end/g,e=>Xe[e])}const Oe=["left","right"],Pe=["right","left"],Qe=["top","bottom"],et=["bottom","top"];function tt(i,e,t){switch(i){case"top":case"bottom":return t?e?Pe:Oe:e?Oe:Pe;case"left":case"right":return e?Qe:et;default:return[]}}function it(i,e,t,o){const l=ee(i);let s=tt(N(i),t==="start",o);return l&&(s=s.map(n=>n+"-"+l),e&&(s=s.concat(s.map(he)))),s}function te(i){return i.replace(/left|right|bottom|top/g,e=>Ye[e])}function ot(i){return{top:0,right:0,bottom:0,left:0,...i}}function lt(i){return typeof i!="number"?ot(i):{top:i,right:i,bottom:i,left:i}}function ie(i){const{x:e,y:t,width:o,height:l}=i;return{width:o,height:l,top:t,left:e,right:e+o,bottom:t+l,x:e,y:t}}function Te(i,e,t){let{reference:o,floating:l}=i;const s=$(e),n=Se(e),r=Ae(n),a=N(e),c=s==="y",p=o.x+o.width/2-l.width/2,d=o.y+o.height/2-l.height/2,m=o[r]/2-l[r]/2;let h;switch(a){case"top":h={x:p,y:o.y-l.height};break;case"bottom":h={x:p,y:o.y+o.height};break;case"right":h={x:o.x+o.width,y:d};break;case"left":h={x:o.x-l.width,y:d};break;default:h={x:o.x,y:o.y}}switch(ee(e)){case"start":h[n]-=m*(t&&c?-1:1);break;case"end":h[n]+=m*(t&&c?-1:1);break}return h}const st=async(i,e,t)=>{const{placement:o="bottom",strategy:l="absolute",middleware:s=[],platform:n}=t,r=s.filter(Boolean),a=await(n.isRTL==null?void 0:n.isRTL(e));let c=await n.getElementRects({reference:i,floating:e,strategy:l}),{x:p,y:d}=Te(c,o,a),m=o,h={},g=0;for(let v=0;v<r.length;v++){const{name:w,fn:b}=r[v],{x:_,y,data:k,reset:x}=await b({x:p,y:d,initialPlacement:o,placement:m,strategy:l,middlewareData:h,rects:c,platform:n,elements:{reference:i,floating:e}});p=_??p,d=y??d,h={...h,[w]:{...h[w],...k}},x&&g<=50&&(g++,typeof x=="object"&&(x.placement&&(m=x.placement),x.rects&&(c=x.rects===!0?await n.getElementRects({reference:i,floating:e,strategy:l}):x.rects),{x:p,y:d}=Te(c,m,a)),v=-1)}return{x:p,y:d,placement:m,strategy:l,middlewareData:h}};async function Me(i,e){var t;e===void 0&&(e={});const{x:o,y:l,platform:s,rects:n,elements:r,strategy:a}=i,{boundary:c="clippingAncestors",rootBoundary:p="viewport",elementContext:d="floating",altBoundary:m=!1,padding:h=0}=Q(e,i),g=lt(h),w=r[m?d==="floating"?"reference":"floating":d],b=ie(await s.getClippingRect({element:(t=await(s.isElement==null?void 0:s.isElement(w)))==null||t?w:w.contextElement||await(s.getDocumentElement==null?void 0:s.getDocumentElement(r.floating)),boundary:c,rootBoundary:p,strategy:a})),_=d==="floating"?{x:o,y:l,width:n.floating.width,height:n.floating.height}:n.reference,y=await(s.getOffsetParent==null?void 0:s.getOffsetParent(r.floating)),k=await(s.isElement==null?void 0:s.isElement(y))?await(s.getScale==null?void 0:s.getScale(y))||{x:1,y:1}:{x:1,y:1},x=ie(s.convertOffsetParentRelativeRectToViewportRelativeRect?await s.convertOffsetParentRelativeRectToViewportRelativeRect({elements:r,rect:_,offsetParent:y,strategy:a}):_);return{top:(b.top-x.top+g.top)/k.y,bottom:(x.bottom-b.bottom+g.bottom)/k.y,left:(b.left-x.left+g.left)/k.x,right:(x.right-b.right+g.right)/k.x}}const nt=function(i){return i===void 0&&(i={}),{name:"flip",options:i,async fn(e){var t,o;const{placement:l,middlewareData:s,rects:n,initialPlacement:r,platform:a,elements:c}=e,{mainAxis:p=!0,crossAxis:d=!0,fallbackPlacements:m,fallbackStrategy:h="bestFit",fallbackAxisSideDirection:g="none",flipAlignment:v=!0,...w}=Q(i,e);if((t=s.arrow)!=null&&t.alignmentOffset)return{};const b=N(l),_=$(r),y=N(r)===r,k=await(a.isRTL==null?void 0:a.isRTL(c.floating)),x=m||(y||!v?[te(r)]:Ze(r)),X=g!=="none";!m&&X&&x.push(...it(r,v,g,k));const G=[r,...x],ye=await Me(e,w),pe=[];let K=((o=s.flip)==null?void 0:o.overflows)||[];if(p&&pe.push(ye[b]),d){const F=qe(l,n,k);pe.push(ye[F[0]],ye[F[1]])}if(K=[...K,{placement:l,overflows:pe}],!pe.every(F=>F<=0)){var Ge,Ke;const F=(((Ge=s.flip)==null?void 0:Ge.index)||0)+1,xe=G[F];if(xe&&(!(d==="alignment"?_!==$(xe):!1)||K.every(M=>$(M.placement)===_?M.overflows[0]>0:!0)))return{data:{index:F,overflows:K},reset:{placement:xe}};let J=(Ke=K.filter(B=>B.overflows[0]<=0).sort((B,M)=>B.overflows[1]-M.overflows[1])[0])==null?void 0:Ke.placement;if(!J)switch(h){case"bestFit":{var Ue;const B=(Ue=K.filter(M=>{if(X){const z=$(M.placement);return z===_||z==="y"}return!0}).map(M=>[M.placement,M.overflows.filter(z=>z>0).reduce((z,zt)=>z+zt,0)]).sort((M,z)=>M[1]-z[1])[0])==null?void 0:Ue[0];B&&(J=B);break}case"initialPlacement":J=r;break}if(l!==J)return{reset:{placement:J}}}return{}}}},rt=new Set(["left","top"]);async function at(i,e){const{placement:t,platform:o,elements:l}=i,s=await(o.isRTL==null?void 0:o.isRTL(l.floating)),n=N(t),r=ee(t),a=$(t)==="y",c=rt.has(n)?-1:1,p=s&&a?-1:1,d=Q(e,i);let{mainAxis:m,crossAxis:h,alignmentAxis:g}=typeof d=="number"?{mainAxis:d,crossAxis:0,alignmentAxis:null}:{mainAxis:d.mainAxis||0,crossAxis:d.crossAxis||0,alignmentAxis:d.alignmentAxis};return r&&typeof g=="number"&&(h=r==="end"?g*-1:g),a?{x:h*p,y:m*c}:{x:m*c,y:h*p}}const ct=function(i){return i===void 0&&(i=0),{name:"offset",options:i,async fn(e){var t,o;const{x:l,y:s,placement:n,middlewareData:r}=e,a=await at(e,i);return n===((t=r.offset)==null?void 0:t.placement)&&(o=r.arrow)!=null&&o.alignmentOffset?{}:{x:l+a.x,y:s+a.y,data:{...a,placement:n}}}}},dt=function(i){return i===void 0&&(i={}),{name:"shift",options:i,async fn(e){const{x:t,y:o,placement:l}=e,{mainAxis:s=!0,crossAxis:n=!1,limiter:r={fn:w=>{let{x:b,y:_}=w;return{x:b,y:_}}},...a}=Q(i,e),c={x:t,y:o},p=await Me(e,a),d=$(N(l)),m=ke(d);let h=c[m],g=c[d];if(s){const w=m==="y"?"top":"left",b=m==="y"?"bottom":"right",_=h+p[w],y=h-p[b];h=Ce(_,h,y)}if(n){const w=d==="y"?"top":"left",b=d==="y"?"bottom":"right",_=g+p[w],y=g-p[b];g=Ce(_,g,y)}const v=r.fn({...e,[m]:h,[d]:g});return{...v,data:{x:v.x-t,y:v.y-o,enabled:{[m]:s,[d]:n}}}}}};function oe(){return typeof window<"u"}function H(i){return Ie(i)?(i.nodeName||"").toLowerCase():"#document"}function S(i){var e;return(i==null||(e=i.ownerDocument)==null?void 0:e.defaultView)||window}function E(i){var e;return(e=(Ie(i)?i.ownerDocument:i.document)||window.document)==null?void 0:e.documentElement}function Ie(i){return oe()?i instanceof Node||i instanceof S(i).Node:!1}function P(i){return oe()?i instanceof Element||i instanceof S(i).Element:!1}function V(i){return oe()?i instanceof HTMLElement||i instanceof S(i).HTMLElement:!1}function Ee(i){return!oe()||typeof ShadowRoot>"u"?!1:i instanceof ShadowRoot||i instanceof S(i).ShadowRoot}const pt=new Set(["inline","contents"]);function U(i){const{overflow:e,overflowX:t,overflowY:o,display:l}=T(i);return/auto|scroll|overlay|hidden|clip/.test(e+o+t)&&!pt.has(l)}const ht=new Set(["table","td","th"]);function ut(i){return ht.has(H(i))}const mt=[":popover-open",":modal"];function le(i){return mt.some(e=>{try{return i.matches(e)}catch{return!1}})}const ft=["transform","translate","scale","rotate","perspective"],gt=["transform","translate","scale","rotate","perspective","filter"],bt=["paint","layout","strict","content"];function ue(i){const e=me(),t=P(i)?T(i):i;return ft.some(o=>t[o]?t[o]!=="none":!1)||(t.containerType?t.containerType!=="normal":!1)||!e&&(t.backdropFilter?t.backdropFilter!=="none":!1)||!e&&(t.filter?t.filter!=="none":!1)||gt.some(o=>(t.willChange||"").includes(o))||bt.some(o=>(t.contain||"").includes(o))}function vt(i){let e=D(i);for(;V(e)&&!W(e);){if(ue(e))return e;if(le(e))return null;e=D(e)}return null}function me(){return typeof CSS>"u"||!CSS.supports?!1:CSS.supports("-webkit-backdrop-filter","none")}const wt=new Set(["html","body","#document"]);function W(i){return wt.has(H(i))}function T(i){return S(i).getComputedStyle(i)}function se(i){return P(i)?{scrollLeft:i.scrollLeft,scrollTop:i.scrollTop}:{scrollLeft:i.scrollX,scrollTop:i.scrollY}}function D(i){if(H(i)==="html")return i;const e=i.assignedSlot||i.parentNode||Ee(i)&&i.host||E(i);return Ee(e)?e.host:e}function Ve(i){const e=D(i);return W(e)?i.ownerDocument?i.ownerDocument.body:i.body:V(e)&&U(e)?e:Ve(e)}function Y(i,e,t){var o;e===void 0&&(e=[]),t===void 0&&(t=!0);const l=Ve(i),s=l===((o=i.ownerDocument)==null?void 0:o.body),n=S(l);if(s){const r=fe(n);return e.concat(n,n.visualViewport||[],U(l)?l:[],r&&t?Y(r):[])}return e.concat(l,Y(l,[],t))}function fe(i){return i.parent&&Object.getPrototypeOf(i.parent)?i.frameElement:null}function $e(i){const e=T(i);let t=parseFloat(e.width)||0,o=parseFloat(e.height)||0;const l=V(i),s=l?i.offsetWidth:t,n=l?i.offsetHeight:o,r=q(t)!==s||q(o)!==n;return r&&(t=s,o=n),{width:t,height:o,$:r}}function ge(i){return P(i)?i:i.contextElement}function j(i){const e=ge(i);if(!V(e))return I(1);const t=e.getBoundingClientRect(),{width:o,height:l,$:s}=$e(e);let n=(s?q(t.width):t.width)/o,r=(s?q(t.height):t.height)/l;return(!n||!Number.isFinite(n))&&(n=1),(!r||!Number.isFinite(r))&&(r=1),{x:n,y:r}}const _t=I(0);function De(i){const e=S(i);return!me()||!e.visualViewport?_t:{x:e.visualViewport.offsetLeft,y:e.visualViewport.offsetTop}}function yt(i,e,t){return e===void 0&&(e=!1),!t||e&&t!==S(i)?!1:e}function R(i,e,t,o){e===void 0&&(e=!1),t===void 0&&(t=!1);const l=i.getBoundingClientRect(),s=ge(i);let n=I(1);e&&(o?P(o)&&(n=j(o)):n=j(i));const r=yt(s,t,o)?De(s):I(0);let a=(l.left+r.x)/n.x,c=(l.top+r.y)/n.y,p=l.width/n.x,d=l.height/n.y;if(s){const m=S(s),h=o&&P(o)?S(o):o;let g=m,v=fe(g);for(;v&&o&&h!==g;){const w=j(v),b=v.getBoundingClientRect(),_=T(v),y=b.left+(v.clientLeft+parseFloat(_.paddingLeft))*w.x,k=b.top+(v.clientTop+parseFloat(_.paddingTop))*w.y;a*=w.x,c*=w.y,p*=w.x,d*=w.y,a+=y,c+=k,g=S(v),v=fe(g)}}return ie({width:p,height:d,x:a,y:c})}function ne(i,e){const t=se(i).scrollLeft;return e?e.left+t:R(E(i)).left+t}function Le(i,e){const t=i.getBoundingClientRect(),o=t.left+e.scrollLeft-ne(i,t),l=t.top+e.scrollTop;return{x:o,y:l}}function xt(i){let{elements:e,rect:t,offsetParent:o,strategy:l}=i;const s=l==="fixed",n=E(o),r=e?le(e.floating):!1;if(o===n||r&&s)return t;let a={scrollLeft:0,scrollTop:0},c=I(1);const p=I(0),d=V(o);if((d||!d&&!s)&&((H(o)!=="body"||U(n))&&(a=se(o)),V(o))){const h=R(o);c=j(o),p.x=h.x+o.clientLeft,p.y=h.y+o.clientTop}const m=n&&!d&&!s?Le(n,a):I(0);return{width:t.width*c.x,height:t.height*c.y,x:t.x*c.x-a.scrollLeft*c.x+p.x+m.x,y:t.y*c.y-a.scrollTop*c.y+p.y+m.y}}function Ct(i){return Array.from(i.getClientRects())}function kt(i){const e=E(i),t=se(i),o=i.ownerDocument.body,l=O(e.scrollWidth,e.clientWidth,o.scrollWidth,o.clientWidth),s=O(e.scrollHeight,e.clientHeight,o.scrollHeight,o.clientHeight);let n=-t.scrollLeft+ne(i);const r=-t.scrollTop;return T(o).direction==="rtl"&&(n+=O(e.clientWidth,o.clientWidth)-l),{width:l,height:s,x:n,y:r}}const ze=25;function At(i,e){const t=S(i),o=E(i),l=t.visualViewport;let s=o.clientWidth,n=o.clientHeight,r=0,a=0;if(l){s=l.width,n=l.height;const p=me();(!p||p&&e==="fixed")&&(r=l.offsetLeft,a=l.offsetTop)}const c=ne(o);if(c<=0){const p=o.ownerDocument,d=p.body,m=getComputedStyle(d),h=p.compatMode==="CSS1Compat"&&parseFloat(m.marginLeft)+parseFloat(m.marginRight)||0,g=Math.abs(o.clientWidth-d.clientWidth-h);g<=ze&&(s-=g)}else c<=ze&&(s+=c);return{width:s,height:n,x:r,y:a}}const St=new Set(["absolute","fixed"]);function Ot(i,e){const t=R(i,!0,e==="fixed"),o=t.top+i.clientTop,l=t.left+i.clientLeft,s=V(i)?j(i):I(1),n=i.clientWidth*s.x,r=i.clientHeight*s.y,a=l*s.x,c=o*s.y;return{width:n,height:r,x:a,y:c}}function Ne(i,e,t){let o;if(e==="viewport")o=At(i,t);else if(e==="document")o=kt(E(i));else if(P(e))o=Ot(e,t);else{const l=De(i);o={x:e.x-l.x,y:e.y-l.y,width:e.width,height:e.height}}return ie(o)}function Re(i,e){const t=D(i);return t===e||!P(t)||W(t)?!1:T(t).position==="fixed"||Re(t,e)}function Pt(i,e){const t=e.get(i);if(t)return t;let o=Y(i,[],!1).filter(r=>P(r)&&H(r)!=="body"),l=null;const s=T(i).position==="fixed";let n=s?D(i):i;for(;P(n)&&!W(n);){const r=T(n),a=ue(n);!a&&r.position==="fixed"&&(l=null),(s?!a&&!l:!a&&r.position==="static"&&!!l&&St.has(l.position)||U(n)&&!a&&Re(i,n))?o=o.filter(p=>p!==n):l=r,n=D(n)}return e.set(i,o),o}function Tt(i){let{element:e,boundary:t,rootBoundary:o,strategy:l}=i;const n=[...t==="clippingAncestors"?le(e)?[]:Pt(e,this._c):[].concat(t),o],r=n[0],a=n.reduce((c,p)=>{const d=Ne(e,p,l);return c.top=O(d.top,c.top),c.right=C(d.right,c.right),c.bottom=C(d.bottom,c.bottom),c.left=O(d.left,c.left),c},Ne(e,r,l));return{width:a.right-a.left,height:a.bottom-a.top,x:a.left,y:a.top}}function Mt(i){const{width:e,height:t}=$e(i);return{width:e,height:t}}function It(i,e,t){const o=V(e),l=E(e),s=t==="fixed",n=R(i,!0,s,e);let r={scrollLeft:0,scrollTop:0};const a=I(0);function c(){a.x=ne(l)}if(o||!o&&!s)if((H(e)!=="body"||U(l))&&(r=se(e)),o){const h=R(e,!0,s,e);a.x=h.x+e.clientLeft,a.y=h.y+e.clientTop}else l&&c();s&&!o&&l&&c();const p=l&&!o&&!s?Le(l,r):I(0),d=n.left+r.scrollLeft-a.x-p.x,m=n.top+r.scrollTop-a.y-p.y;return{x:d,y:m,width:n.width,height:n.height}}function be(i){return T(i).position==="static"}function Fe(i,e){if(!V(i)||T(i).position==="fixed")return null;if(e)return e(i);let t=i.offsetParent;return E(i)===t&&(t=t.ownerDocument.body),t}function Be(i,e){const t=S(i);if(le(i))return t;if(!V(i)){let l=D(i);for(;l&&!W(l);){if(P(l)&&!be(l))return l;l=D(l)}return t}let o=Fe(i,e);for(;o&&ut(o)&&be(o);)o=Fe(o,e);return o&&W(o)&&be(o)&&!ue(o)?t:o||vt(i)||t}const Et=async function(i){const e=this.getOffsetParent||Be,t=this.getDimensions,o=await t(i.floating);return{reference:It(i.reference,await e(i.floating),i.strategy),floating:{x:0,y:0,width:o.width,height:o.height}}};function Vt(i){return T(i).direction==="rtl"}const $t={convertOffsetParentRelativeRectToViewportRelativeRect:xt,getDocumentElement:E,getClippingRect:Tt,getOffsetParent:Be,getElementRects:Et,getClientRects:Ct,getDimensions:Mt,getScale:j,isElement:P,isRTL:Vt};function He(i,e){return i.x===e.x&&i.y===e.y&&i.width===e.width&&i.height===e.height}function Dt(i,e){let t=null,o;const l=E(i);function s(){var r;clearTimeout(o),(r=t)==null||r.disconnect(),t=null}function n(r,a){r===void 0&&(r=!1),a===void 0&&(a=1),s();const c=i.getBoundingClientRect(),{left:p,top:d,width:m,height:h}=c;if(r||e(),!m||!h)return;const g=Z(d),v=Z(l.clientWidth-(p+m)),w=Z(l.clientHeight-(d+h)),b=Z(p),y={rootMargin:-g+"px "+-v+"px "+-w+"px "+-b+"px",threshold:O(0,C(1,a))||1};let k=!0;function x(X){const G=X[0].intersectionRatio;if(G!==a){if(!k)return n();G?n(!1,G):o=setTimeout(()=>{n(!1,1e-7)},1e3)}G===1&&!He(c,i.getBoundingClientRect())&&n(),k=!1}try{t=new IntersectionObserver(x,{...y,root:l.ownerDocument})}catch{t=new IntersectionObserver(x,y)}t.observe(i)}return n(!0),s}function re(i,e,t,o){o===void 0&&(o={});const{ancestorScroll:l=!0,ancestorResize:s=!0,elementResize:n=typeof ResizeObserver=="function",layoutShift:r=typeof IntersectionObserver=="function",animationFrame:a=!1}=o,c=ge(i),p=l||s?[...c?Y(c):[],...Y(e)]:[];p.forEach(b=>{l&&b.addEventListener("scroll",t,{passive:!0}),s&&b.addEventListener("resize",t)});const d=c&&r?Dt(c,t):null;let m=-1,h=null;n&&(h=new ResizeObserver(b=>{let[_]=b;_&&_.target===c&&h&&(h.unobserve(e),cancelAnimationFrame(m),m=requestAnimationFrame(()=>{var y;(y=h)==null||y.observe(e)})),t()}),c&&!a&&h.observe(c),h.observe(e));let g,v=a?R(i):null;a&&w();function w(){const b=R(i);v&&!He(v,b)&&t(),v=b,g=requestAnimationFrame(w)}return t(),()=>{var b;p.forEach(_=>{l&&_.removeEventListener("scroll",t),s&&_.removeEventListener("resize",t)}),d==null||d(),(b=h)==null||b.disconnect(),h=null,a&&cancelAnimationFrame(g)}}const ae=ct,ce=dt,ve=nt,de=(i,e,t)=>{const o=new Map,l={platform:$t,...t},s={...l.platform,_c:o};return st(i,e,{...l,platform:s})};let L=0;const f={debug:(i,...e)=>{L++,console.log(`%c[MultiSelect ${L}]%c ${i}`,"color: #0ea5e9; font-weight: bold;","color: inherit;",...e)},info:(i,...e)=>{L++,console.info(`%c[MultiSelect ${L}]%c ${i}`,"color: #10b981; font-weight: bold;","color: inherit;",...e)},warn:(i,...e)=>{L++,console.warn(`%c[MultiSelect ${L}]%c ${i}`,"color: #f59e0b; font-weight: bold;","color: inherit;",...e)},error:(i,...e)=>{L++,console.error(`%c[MultiSelect ${L}]%c ${i}`,"color: #ef4444; font-weight: bold;","color: inherit;",...e)}};class We{constructor(e,t={}){u(this,"element");u(this,"instanceId");u(this,"options");u(this,"isOpen",!1);u(this,"selectedValues",new Set);u(this,"selectedOptions",new Map);u(this,"allOptions",[]);u(this,"filteredOptions",[]);u(this,"hiddenInputs",[]);u(this,"focusedIndex",-1);u(this,"searchTerm","");u(this,"isLoading",!1);u(this,"showSelectedPopover",!1);u(this,"selectedPopoverPlacement",null);u(this,"dropdownPlacement",null);u(this,"dropdownCleanup",null);u(this,"hintCleanup",null);u(this,"selectedPopoverCleanup",null);u(this,"pillTooltips",new Map);u(this,"pillTooltipCleanups",new Map);u(this,"input");u(this,"dropdown");u(this,"pillsContainer");u(this,"countBadge");u(this,"hint");u(this,"selectedPopover");this.element=e,this.instanceId=`MS-${Math.random().toString(36).substr(2,9)}`,this.options={searchHint:e.dataset.searchHint||"",searchPlaceholder:e.dataset.searchPlaceholder||"Search...",dropdownMinWidth:e.dataset.dropdownMinWidth||void 0,pillsDisplayMode:e.dataset.pillsDisplayMode||"pills",pillsPosition:e.dataset.pillsPosition||"bottom",pillsThresholdMode:e.dataset.pillsThresholdMode||"count",maxHeight:e.dataset.maxHeight||"20rem",emptyMessage:e.dataset.emptyMessage||"No results found",loadingMessage:e.dataset.loadingMessage||"Loading...",searchInputMode:e.dataset.searchInputMode||"normal",pillsThreshold:e.dataset.pillsThreshold?parseInt(e.dataset.pillsThreshold):void 0,minSearchLength:parseInt(e.dataset.minSearchLength||"0")||0,isMultipleEnabled:e.dataset.multiple!=="false",isGroupsAllowed:e.dataset.allowGroups!=="false",isSelectAllAllowed:e.dataset.allowSelectAll!=="false",isClearAllAllowed:e.dataset.allowClearAll!=="false",isCheckboxesShown:e.dataset.showCheckboxes!=="false",isActionsSticky:e.dataset.stickyActions!=="false",isCloseOnSelect:e.dataset.closeOnSelect==="true",isPlacementLocked:e.dataset.lockPlacement!=="false",isSearchEnabled:e.dataset.enableSearch!=="false",isAddNewAllowed:e.dataset.allowAddNew==="true",isCountBadgeShown:e.dataset.showCountBadge==="true",options:[],container:void 0,...t},this.init()}getItemValue(e){return Array.isArray(e)&&e.length===2?e[0]:this.options.valueMember&&e[this.options.valueMember]!==void 0?e[this.options.valueMember]:this.options.getValueCallback?this.options.getValueCallback(e):"[N/A]"}getItemDisplayValue(e){return Array.isArray(e)&&e.length===2?String(e[1]):this.options.displayValueMember&&e[this.options.displayValueMember]!==void 0?String(e[this.options.displayValueMember]):this.options.getDisplayValueCallback?this.options.getDisplayValueCallback(e):"[N/A]"}getItemSearchValue(e){return this.options.searchValueMember&&e[this.options.searchValueMember]!==void 0?String(e[this.options.searchValueMember]):this.options.getSearchValueCallback?this.options.getSearchValueCallback(e):this.getItemDisplayValue(e)}getItemIcon(e){if(!Array.isArray(e)){if(this.options.iconMember&&e[this.options.iconMember]!==void 0)return String(e[this.options.iconMember]);if(this.options.getIconCallback)return this.options.getIconCallback(e)}}getItemSubtitle(e){if(!Array.isArray(e)){if(this.options.subtitleMember&&e[this.options.subtitleMember]!==void 0)return String(e[this.options.subtitleMember]);if(this.options.getSubtitleCallback)return this.options.getSubtitleCallback(e)}}getItemGroup(e){if(!Array.isArray(e)){if(this.options.groupMember&&e[this.options.groupMember]!==void 0)return String(e[this.options.groupMember]);if(this.options.getGroupCallback)return this.options.getGroupCallback(e)}}getItemDisabled(e){return Array.isArray(e)?!1:this.options.disabledMember&&e[this.options.disabledMember]!==void 0?!!e[this.options.disabledMember]:this.options.getDisabledCallback?this.options.getDisabledCallback(e):!1}init(){this.parseOptions(),this.buildHTML(),this.attachEvents(),this.parseInitialSelection(),f.debug(`Initialized [${this.instanceId}] with options:`,{placeholder:this.options.searchPlaceholder,totalOptions:this.allOptions.length,isCloseOnSelect:this.options.isCloseOnSelect,dataAttribute:this.element.dataset.closeOnSelect,isSelectAllAllowed:this.options.isSelectAllAllowed,isClearAllAllowed:this.options.isClearAllAllowed})}parseOptions(){const e=this.element.dataset.options;if(e)try{this.allOptions=JSON.parse(e)}catch(t){console.error("[MultiSelect] Failed to parse data-options:",t),this.allOptions=[]}else this.options.options&&(this.allOptions=this.options.options);this.filteredOptions=[...this.allOptions]}buildHTML(){const e=this.options.container||document.body;this.element.classList.add("ml"),(!this.options.isCheckboxesShown||!this.options.isMultipleEnabled)&&this.element.classList.add("ml--no-checkboxes");const t=document.createElement("div");t.className="ml__input-wrapper",this.input=document.createElement("input"),this.input.type="text",this.input.className="ml__input",this.input.placeholder=this.options.searchPlaceholder,this.input.autocomplete="off",this.options.searchInputMode==="readonly"?this.input.readOnly=!0:this.options.searchInputMode==="hidden"&&(this.input.style.display="none");const o=document.createElement("span");o.className="ml__toggle",o.innerHTML="▼",this.countBadge=document.createElement("span"),this.countBadge.className="ml__count-badge",this.countBadge.style.display="none",t.appendChild(this.input),t.appendChild(this.countBadge),t.appendChild(o),this.pillsContainer=document.createElement("div"),this.pillsContainer.className="ml__pills",this.element.appendChild(t),this.element.appendChild(this.pillsContainer),this.dropdown=document.createElement("div"),this.dropdown.className="ml__dropdown",e.appendChild(this.dropdown),this.options.searchHint&&(this.hint=document.createElement("div"),this.hint.className="ml__hint",this.hint.textContent=this.options.searchHint,e.appendChild(this.hint)),this.selectedPopover=document.createElement("div"),this.selectedPopover.className="ml__selected-popover",e.appendChild(this.selectedPopover),this.renderDropdown()}renderDropdown(){let e="";if(this.isLoading){e+='<div class="ml__loader">',e+='<div class="pa-loader pa-loader--sm"></div>',e+=`<div class="ml__loading-text">${this.options.loadingMessage}</div>`,e+="</div>",this.dropdown.innerHTML=e;return}if(this.options.isMultipleEnabled&&(this.options.isSelectAllAllowed||this.options.isClearAllAllowed)){const t=this.options.isActionsSticky?" ml__actions--sticky":"";e+=`<div class="ml__actions${t}">`,this.options.isSelectAllAllowed&&(e+='<button type="button" class="ml__action-btn" data-action="select-all">Select All</button>'),this.options.isClearAllAllowed&&(e+='<button type="button" class="ml__action-btn" data-action="clear-all">Clear All</button>'),e+="</div>"}if(e+='<div class="ml__options">',this.filteredOptions.length===0)e+=`<div class="ml__empty">${this.options.emptyMessage}</div>`;else if(this.options.isGroupsAllowed){const t=this.groupOptions(this.filteredOptions);Object.keys(t).forEach(o=>{e+='<div class="ml__group">',o!=="__ungrouped__"&&(e+=`<div class="ml__group-label">${o}</div>`),t[o].forEach((l,s)=>{e+=this.renderOption(l,s)}),e+="</div>"})}else this.filteredOptions.forEach((t,o)=>{e+=this.renderOption(t,o)});e+="</div>",this.dropdown.innerHTML=e}renderOption(e,t){const o=this.getItemValue(e),l=this.getItemDisplayValue(e),s=this.getItemIcon(e),n=this.getItemSubtitle(e),r=this.getItemDisabled(e),a=this.selectedValues.has(String(o)),c=t===this.focusedIndex,p=["ml__option"];a&&p.push("ml__option--selected"),c&&p.push("ml__option--focused"),r&&p.push("ml__option--disabled");let d=`<div class="${p.join(" ")}" data-value="${o}" data-index="${t}">`;return this.options.isCheckboxesShown&&this.options.isMultipleEnabled&&(d+=`<input type="checkbox" class="ml__checkbox" ${a?"checked":""} ${r?"disabled":""}>`),d+='<div class="ml__option-content">',s&&(d+=`<span class="ml__option-icon">${s}</span>`),d+='<div class="ml__option-text">',d+=`<div class="ml__option-title">${this.highlightMatch(l,this.searchTerm)}</div>`,n&&(d+=`<div class="ml__option-subtitle">${n}</div>`),d+="</div>",d+="</div>",d+="</div>",d}highlightMatch(e,t){if(!t)return e;const o=new RegExp(`(${t.replace(/[.*+?^${}()|[\]\\]/g,"\\$&")})`,"gi");return e.replace(o,"<mark>$1</mark>")}groupOptions(e){const t={};return e.forEach(o=>{const l=this.getItemGroup(o)||"__ungrouped__";t[l]||(t[l]=[]),t[l].push(o)}),t}renderPills(){this.destroyAllPillTooltips();const e=Array.from(this.selectedOptions.values()),t=this.selectedValues.size;if(!this.options.isMultipleEnabled){this.pillsContainer.innerHTML="",this.countBadge.style.display="none";const s=e[0]?this.getItemDisplayValue(e[0]):void 0;f.warn(`[${this.instanceId}] renderPills() single-select mode`,{isOpen:this.isOpen,count:t,selectedOptionsLength:e.length,willSetValue:!this.isOpen&&t>0&&e.length>0,selectedLabel:s}),!this.isOpen&&t>0&&e.length>0?(f.info(`[${this.instanceId}] ✅ SETTING input.value = "${s}"`),this.input.value=s,f.info(`[${this.instanceId}] 🔍 VERIFY input.value = "${this.input.value}"`)):this.isOpen?f.info(`[${this.instanceId}] ⏭️ SKIPPING input update (dropdown is open)`):(f.info(`[${this.instanceId}] ❌ CLEARING input.value (no selection)`),this.input.value="");return}let o=this.options.pillsDisplayMode;if(this.options.pillsThreshold!==null&&t>this.options.pillsThreshold&&(o=this.options.pillsThresholdMode||"count"),!this.isOpen)if(t>0&&o==="count"){const s=this.options.getCountPillCallback?this.options.getCountPillCallback(t):`${t} selected`;this.input.placeholder=s}else this.input.placeholder=this.options.searchPlaceholder;if(this.options.isCountBadgeShown&&t>0?(this.countBadge.textContent=`[${t}]`,this.countBadge.style.display=""):this.countBadge.style.display="none",o==="pills")this.pillsContainer.className=`ml__pills ml__pills--${this.options.pillsPosition}`,this.pillsContainer.innerHTML=e.map(s=>{const n=this.getItemValue(s),r=this.getItemDisplayValue(s);return`
+                <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(o==="partial"){this.pillsContainer.className=`ml__pills ml__pills--${this.options.pillsPosition}`;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`
+                <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>
+                </div>
+            `}).join("");let c="";r>0&&(c=`
+                    <div class="ml__pill ml__pill--more" data-action="show-selected">
+                        <span class="ml__pill-text">${this.options.getCountPillCallback?this.options.getCountPillCallback(t,r):`+${r} more`}</span>
+                        <button type="button" class="ml__pill-remove" data-action="remove-hidden" aria-label="Remove ${r} hidden items"></button>
+                    </div>
+                `),this.pillsContainer.innerHTML=a+c}else if(this.pillsContainer.className=`ml__count-display ml__count-display--${this.options.pillsPosition}`,t>0){const s=this.options.getCountPillCallback?this.options.getCountPillCallback(t):`${t} selected`;this.pillsContainer.innerHTML=`
+                    <div class="ml__count-badge-wrapper">
+                        <button type="button" class="ml__count-text" data-action="show-selected">
+                            ${s}
+                        </button>
+                        <button type="button" class="ml__count-clear" data-action="clear-count" aria-label="Clear all selections"></button>
+                    </div>
+                `}else this.pillsContainer.innerHTML="";this.attachPillTooltips()}attachEvents(){this.input.addEventListener("mousedown",e=>{this.isOpen||e.stopPropagation()}),this.input.addEventListener("focus",()=>this.open()),this.input.addEventListener("input",e=>{const t=e.target.value;this.options.isSearchEnabled&&!this.isOpen&&this.open(),this.handleSearch(t)}),this.input.addEventListener("keydown",e=>this.handleKeydown(e)),setTimeout(()=>{document.addEventListener("click",e=>this.handleClickOutside(e))},0),this.dropdown.addEventListener("click",e=>this.handleDropdownClick(e)),this.pillsContainer.addEventListener("mousedown",e=>{e.target.closest(".ml__count-text")&&!this.showSelectedPopover&&e.stopPropagation()}),this.pillsContainer.addEventListener("click",e=>this.handlePillClick(e)),this.countBadge.addEventListener("mousedown",e=>{this.showSelectedPopover||e.stopPropagation()}),this.countBadge.addEventListener("click",e=>{e.stopPropagation(),this.toggleSelectedPopover()}),this.selectedPopover.addEventListener("click",e=>this.handleSelectedPopoverClick(e))}async handleSearch(e){if(this.searchTerm=e,!!this.options.isSearchEnabled)if(this.options.searchCallback){if(e.length<this.options.minSearchLength){this.filteredOptions=[],this.allOptions=[],this.renderDropdown();return}this.isLoading=!0,this.renderDropdown(),f.debug(`[${this.instanceId}] Loading data for search term:`,e);try{const t=await this.options.searchCallback(e);this.searchTerm===e&&(this.allOptions=t||[],this.filteredOptions=[...this.allOptions],this.isLoading=!1,this.focusedIndex=this.options.isSearchEnabled&&this.filteredOptions.length>0?0:-1,this.renderDropdown(),f.debug(`[${this.instanceId}] Loaded ${this.allOptions.length} results`))}catch(t){f.error(`[${this.instanceId}] Error loading data:`,t),this.isLoading=!1,this.filteredOptions=[],this.allOptions=[],this.renderDropdown()}}else e?this.filteredOptions=this.allOptions.filter(t=>this.getItemSearchValue(t).toLowerCase().includes(e.toLowerCase())):this.filteredOptions=[...this.allOptions],this.focusedIndex=this.options.isSearchEnabled&&this.filteredOptions.length>0?0:-1,this.renderDropdown()}handleKeydown(e){if(!this.isOpen){(e.key==="Enter"||e.key==="ArrowDown")&&(e.preventDefault(),this.open());return}if(!this.options.isSearchEnabled){const t=e.key.length===1||e.key==="Backspace"||e.key==="Delete",o=["ArrowUp","ArrowDown","PageUp","PageDown","Home","End","Enter","Escape","Tab"].includes(e.key);if(t&&!o){e.preventDefault();return}}switch(e.key){case"ArrowDown":e.preventDefault(),this.focusNext();break;case"ArrowUp":e.preventDefault(),this.focusPrevious();break;case"Enter":e.preventDefault(),this.focusedIndex>=0?this.toggleOption(this.filteredOptions[this.focusedIndex]):this.options.isAddNewAllowed&&this.options.addNewCallback&&this.input.value.trim()&&this.handleAddNew(this.input.value.trim());break;case"Escape":e.preventDefault(),this.close();break;case"Tab":this.close();break;case"PageUp":e.preventDefault(),this.focusPageUp();break;case"PageDown":e.preventDefault(),this.focusPageDown();break;case"Home":e.preventDefault(),this.focusFirst();break;case"End":e.preventDefault(),this.focusLast();break}}handleDropdownClick(e){f.debug(`[${this.instanceId}] Dropdown clicked`,{target:e.target.className}),e.stopPropagation();const t=e.target.closest("[data-action]");if(t){e.preventDefault();const l=t.dataset.action;f.debug(`[${this.instanceId}] Action button clicked:`,l),l==="select-all"?this.selectAll():l==="clear-all"&&this.clearAll();return}const o=e.target.closest(".ml__option");if(o&&!o.classList.contains("ml__option--disabled")){e.preventDefault();const l=o.dataset.value,s=this.filteredOptions.find(n=>String(this.getItemValue(n))===l);f.debug(`[${this.instanceId}] Option clicked:`,{value:l,closeOnSelect:this.options.isCloseOnSelect,placeholder:this.options.searchPlaceholder}),s&&this.toggleOption(s)}}handlePillClick(e){if(e.target.closest(".ml__count-clear")){e.preventDefault(),e.stopPropagation(),f.debug(`[${this.instanceId}] Count clear button clicked`),this.clearAll();return}if(e.target.closest(".ml__count-text")){e.preventDefault(),e.stopPropagation(),this.toggleSelectedPopover();return}const l=e.target.closest(".ml__pill-remove");if(l){if(e.preventDefault(),e.stopPropagation(),l.dataset.action==="remove-hidden"){f.debug(`[${this.instanceId}] Remove hidden items button clicked`);const a=this.options.pillsMaxVisible||3;Array.from(this.selectedOptions.values()).slice(a).forEach(d=>this.deselectOption(d));return}const n=l.dataset.value,r=this.selectedOptions.get(n);r&&this.deselectOption(r);return}if(e.target.closest(".ml__pill--more")&&!e.target.closest(".ml__pill-remove")){e.preventDefault(),e.stopPropagation(),f.debug(`[${this.instanceId}] '+X more' badge clicked, showing popover`),this.toggleSelectedPopover();return}}handleClickOutside(e){var l;const t=e.composedPath();if(this.showSelectedPopover&&!t.some(n=>n instanceof Node&&(this.selectedPopover.contains(n)||this.countBadge.contains(n)||n.closest&&n.closest(".ml__count-text")))){f.debug(`[${this.instanceId}] Closing selected popover due to click outside`),this.hideSelectedPopover();return}if(!this.isOpen)return;const o=t.some(s=>s instanceof Node&&(this.element.contains(s)||this.dropdown.contains(s)||this.hint&&this.hint.contains(s)));f.debug(`[${this.instanceId}] handleClickOutside`,{target:e.target.className,targetTag:e.target.tagName,clickedInside:o,pathLength:t.length,firstInPath:(l=t[0])==null?void 0:l.tagName,elementContains:t.some(s=>s instanceof Node&&this.element.contains(s)),dropdownContains:t.some(s=>s instanceof Node&&this.dropdown.contains(s)),isConnected:this.dropdown.isConnected}),o||(f.warn(`[${this.instanceId}] Closing dropdown due to click outside`),this.close())}focusNext(){this.filteredOptions.length!==0&&(this.focusedIndex=(this.focusedIndex+1)%this.filteredOptions.length,this.renderDropdown(),this.scrollToFocused())}focusPrevious(){this.filteredOptions.length!==0&&(this.focusedIndex=this.focusedIndex<=0?this.filteredOptions.length-1:this.focusedIndex-1,this.renderDropdown(),this.scrollToFocused())}focusFirst(){this.filteredOptions.length!==0&&(this.focusedIndex=0,this.renderDropdown(),this.scrollToFocused())}focusLast(){this.filteredOptions.length!==0&&(this.focusedIndex=this.filteredOptions.length-1,this.renderDropdown(),this.scrollToFocused())}focusPageUp(){this.filteredOptions.length!==0&&(this.focusedIndex=Math.max(0,this.focusedIndex-10),this.renderDropdown(),this.scrollToFocused())}focusPageDown(){this.filteredOptions.length!==0&&(this.focusedIndex=Math.min(this.filteredOptions.length-1,this.focusedIndex+10),this.renderDropdown(),this.scrollToFocused())}scrollToFocused(){const e=this.dropdown.querySelector(".ml__option--focused");e&&e.scrollIntoView({block:"nearest",behavior:"smooth"})}toggleOption(e){const t=this.getItemValue(e),o=String(t);if(f.debug(`[${this.instanceId}] toggleOption called`,{value:t,multiple:this.options.isMultipleEnabled}),!this.options.isMultipleEnabled){this.selectedValues.has(o)?(f.debug(`[${this.instanceId}] Deselecting option in single-select mode`,{value:t}),this.deselectOption(e)):(f.debug(`[${this.instanceId}] Clearing previous selections and selecting new option`,{value:t}),this.selectedValues.clear(),this.selectedOptions.clear(),this.selectOption(e)),f.info(`[${this.instanceId}] ❌ Closing dropdown (single-select mode)`),this.close();return}this.selectedValues.has(o)?(f.debug(`[${this.instanceId}] Deselecting option`,{value:t}),this.deselectOption(e)):(f.debug(`[${this.instanceId}] Selecting option`,{value:t}),this.selectOption(e)),f.debug(`[${this.instanceId}] Checking closeOnSelect`,{closeOnSelect:this.options.isCloseOnSelect,willClose:this.options.isCloseOnSelect===!0,placeholder:this.options.searchPlaceholder}),this.options.isCloseOnSelect?(f.info(`[${this.instanceId}] ❌ Closing dropdown (closeOnSelect=true)`),this.close()):f.info(`[${this.instanceId}] ✅ Keeping dropdown open (closeOnSelect=false)`)}async handleAddNew(e){if(this.options.addNewCallback)try{f.debug(`[${this.instanceId}] Adding new option:`,e);const t=await this.options.addNewCallback(e);this.allOptions.push(t),this.filteredOptions.push(t),this.selectOption(t),this.input.value="",this.renderDropdown(),this.renderPills(),this.options.isCloseOnSelect&&this.close()}catch(t){f.error(`[${this.instanceId}] Error adding new option:`,t)}}selectOption(e){const t=this.getItemValue(e),o=String(t);this.selectedValues.add(o),this.selectedOptions.set(o,e),this.renderDropdown(),this.renderPills(),this.updateHiddenInput(),this.options.selectCallback&&this.options.selectCallback(e),this.options.changeCallback&&this.options.changeCallback(this.getSelected())}deselectOption(e){const t=this.getItemValue(e),o=String(t);this.selectedValues.delete(o),this.selectedOptions.delete(o),this.renderDropdown(),this.renderPills(),this.updateHiddenInput(),this.options.deselectCallback&&this.options.deselectCallback(e),this.options.changeCallback&&this.options.changeCallback(this.getSelected())}selectAll(){this.filteredOptions.forEach(e=>{if(!this.getItemDisabled(e)){const t=this.getItemValue(e),o=String(t);this.selectedValues.add(o),this.selectedOptions.set(o,e)}}),this.renderDropdown(),this.renderPills(),this.updateHiddenInput(),this.options.changeCallback&&this.options.changeCallback(this.getSelected())}clearAll(){this.selectedValues.clear(),this.selectedOptions.clear(),this.renderDropdown(),this.renderPills(),this.updateHiddenInput(),this.options.changeCallback&&this.options.changeCallback(this.getSelected())}open(){f.debug(`[${this.instanceId}] open() called`,{isOpen:this.isOpen}),!this.isOpen&&(this.isOpen=!0,this.element.classList.add("ml--open"),this.dropdown.classList.add("ml__dropdown--visible"),f.info(`[${this.instanceId}] Dropdown opened`),this.input.placeholder=this.options.searchPlaceholder,!this.options.isMultipleEnabled&&this.options.isSearchEnabled&&(this.input.value=""),this.renderDropdown(),this.positionDropdown(),this.hint&&(this.hint.classList.add("ml__hint--visible"),this.positionHint()))}close(){if(f.debug(`[${this.instanceId}] close() called`,{isOpen:this.isOpen}),!this.isOpen)return;this.isOpen=!1,this.element.classList.remove("ml--open"),this.dropdown.classList.remove("ml__dropdown--visible"),this.hint&&this.hint.classList.remove("ml__hint--visible"),this.searchTerm="";const e=this.options.isMultipleEnabled||this.options.isSearchEnabled;f.warn(`[${this.instanceId}] close() - input clearing decision`,{multiple:this.options.isMultipleEnabled,enableSearch:this.options.isSearchEnabled,willClearInput:e,currentInputValue:this.input.value}),e?(f.info(`[${this.instanceId}] 🧹 close() CLEARING input.value`),this.input.value=""):f.info(`[${this.instanceId}] 🔒 close() KEEPING input.value = "${this.input.value}"`),this.filteredOptions=[...this.allOptions],this.focusedIndex=-1,f.info(`[${this.instanceId}] 📞 close() CALLING renderPills()`),this.renderPills(),f.info(`[${this.instanceId}] ✅ close() AFTER renderPills(), input.value = "${this.input.value}"`),this.dropdownCleanup&&(this.dropdownCleanup(),this.dropdownCleanup=null),this.hintCleanup&&(this.hintCleanup(),this.hintCleanup=null),this.dropdownPlacement=null,f.info(`[${this.instanceId}] Dropdown closed. Stack trace:`),console.trace()}positionDropdown(){this.dropdownCleanup=re(this.input,this.dropdown,()=>{const e=this.options.isPlacementLocked&&this.dropdownPlacement?this.dropdownPlacement:"bottom-start",t=[ae(4),...this.options.isPlacementLocked&&this.dropdownPlacement?[]:[ve()],ce({padding:8})];de(this.input,this.dropdown,{placement:e,middleware:t}).then(({x:o,y:l,placement:s})=>{this.options.isPlacementLocked&&!this.dropdownPlacement&&(this.dropdownPlacement=s,f.debug(`[${this.instanceId}] Locked dropdown placement:`,s));const n={left:`${o}px`,top:`${l}px`,width:`${this.input.offsetWidth}px`};this.options.dropdownMinWidth&&(n.minWidth=this.options.dropdownMinWidth),Object.assign(this.dropdown.style,n),this.hint&&this.isOpen&&this.positionHint()})})}positionHint(){this.hint&&(this.hintCleanup&&this.hintCleanup(),this.hintCleanup=re(this.input,this.hint,()=>{let e="top-start";this.dropdownPlacement&&(this.dropdownPlacement.startsWith("bottom")?e=this.dropdownPlacement.replace("bottom","top"):this.dropdownPlacement.startsWith("top")&&(e=this.dropdownPlacement.replace("top","bottom"))),de(this.input,this.hint,{placement:e,middleware:[ae(4),ce({padding:8})]}).then(({x:t,y:o})=>{Object.assign(this.hint.style,{left:`${t}px`,top:`${o}px`})})}))}parseInitialSelection(){const e=this.element.dataset.initialValues;if(e)try{JSON.parse(e).forEach(o=>{const l=String(o);this.selectedValues.add(l);const s=this.allOptions.find(n=>String(this.getItemValue(n))===l);s&&this.selectedOptions.set(l,s)}),this.renderPills()}catch(t){console.error("[MultiSelect] Failed to parse initial values:",t)}}toggleSelectedPopover(){this.showSelectedPopover?this.hideSelectedPopover():this.showPopover()}showPopover(){f.debug(`[${this.instanceId}] showPopover() called`),this.isOpen&&this.close(),this.showSelectedPopover=!0,this.renderSelectedPopover(),this.selectedPopover.classList.add("ml__selected-popover--visible"),this.positionSelectedPopover()}hideSelectedPopover(){f.debug(`[${this.instanceId}] hideSelectedPopover() called`),this.showSelectedPopover=!1,this.selectedPopover.classList.remove("ml__selected-popover--visible"),this.selectedPopoverPlacement=null,this.selectedPopoverCleanup&&(this.selectedPopoverCleanup(),this.selectedPopoverCleanup=null)}renderSelectedPopover(){const e=Array.from(this.selectedOptions.values()),t=this.selectedValues.size;this.selectedPopover.innerHTML=`
+            <div class="ml__selected-popover-header">
+                <span>Selected Items (${t})</span>
+                <button type="button" class="ml__selected-popover-close" aria-label="Close">&times;</button>
+            </div>
+            <div class="ml__selected-popover-body">
+                ${e.map(o=>{const l=this.getItemValue(o),s=this.getItemDisplayValue(o);return`
+                    <div class="ml__pill">
+                        <span class="ml__pill-text">${s}</span>
+                        <button type="button" class="ml__pill-remove" data-value="${l}" 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 o=e.target.closest(".ml__pill-remove");if(o){e.preventDefault();const l=o.dataset.value,s=this.selectedOptions.get(l);s&&(this.deselectOption(s),this.renderSelectedPopover(),this.selectedValues.size===0&&this.hideSelectedPopover())}}positionSelectedPopover(){this.selectedPopoverCleanup=re(this.input,this.selectedPopover,()=>{const e=this.selectedPopoverPlacement||"bottom-start";de(this.input,this.selectedPopover,{placement:e,middleware:[ae(4),...this.selectedPopoverPlacement?[]:[ve()],ce({padding:8})]}).then(({x:t,y:o,placement:l})=>{this.selectedPopoverPlacement||(this.selectedPopoverPlacement=l,f.debug(`[${this.instanceId}] Locked popover placement:`,l));const s={left:`${t}px`,top:`${o}px`,width:`${this.input.offsetWidth}px`};this.options.dropdownMinWidth&&(s.minWidth=this.options.dropdownMinWidth),Object.assign(this.selectedPopover.style,s)})})}updateHiddenInput(){if(!this.options.formFieldId)return;this.hiddenInputs.forEach(l=>l.remove()),this.hiddenInputs=[];const e=this.options.valueFormat||"json",t=Array.from(this.selectedOptions.values()).map(l=>this.getItemValue(l)),o=this.options.hostElement||this.element;if(e==="array")t.forEach(l=>{const s=document.createElement("input");s.type="hidden",s.name=`${this.options.formFieldId}[]`,s.value=String(l),o.appendChild(s),this.hiddenInputs.push(s)});else{const l=document.createElement("input");l.type="hidden",l.name=this.options.formFieldId,l.id=this.options.formFieldId,l.value=this.getFormValue(),o.appendChild(l),this.hiddenInputs.push(l)}}getFormValue(){const e=Array.from(this.selectedOptions.values()).map(o=>this.getItemValue(o));return this.options.getValueFormatCallback?this.options.getValueFormatCallback(e):(this.options.valueFormat||"json")==="csv"?e.join(","):JSON.stringify(e)}getSelected(){return Array.from(this.selectedOptions.values())}setSelected(e){this.selectedValues=new Set(e.map(t=>String(t))),this.selectedOptions.clear(),e.forEach(t=>{const o=String(t),l=this.allOptions.find(s=>String(this.getItemValue(s))===o);l&&this.selectedOptions.set(o,l)}),this.renderDropdown(),this.renderPills(),this.updateHiddenInput()}get selectedItem(){return this.selectedOptions.size===0?null:Array.from(this.selectedOptions.values())[0]}get selectedValue(){if(!this.options.valueMember&&!this.options.getValueCallback)return null;if(this.selectedOptions.size===0)return this.options.isMultipleEnabled?[]:null;const e=Array.from(this.selectedOptions.values()).map(t=>this.getItemValue(t));return this.options.isMultipleEnabled?e:e[0]??null}getValue(){if(this.selectedOptions.size===0)return this.options.isMultipleEnabled?[]:null;const e=Array.from(this.selectedOptions.values()).map(t=>this.getItemValue(t));return this.options.isMultipleEnabled?e:e[0]??null}attachPillTooltips(){if(!this.options.isPillTooltipsEnabled){console.log("[Tooltips] Disabled - isPillTooltipsEnabled is false");return}const e=this.pillsContainer.querySelectorAll(".ml__pill:not(.ml__pill--more)");console.log(`[Tooltips] Found ${e.length} pills to attach tooltips to`),e.forEach(o=>{const l=o,s=l.querySelector(".ml__pill-remove");if(!s)return;const n=s.dataset.value,r=this.selectedOptions.get(n);if(!r)return;const a=l.querySelector(".ml__pill-text");a&&this.createTooltipForElement(a,r,n);const c=this.getItemDisplayValue(r);this.createRemoveButtonTooltip(s,c,n)});const t=this.pillsContainer.querySelector(".ml__pill--more");if(t){const o=t.querySelector(".ml__pill-remove");if(o&&o.dataset.action==="remove-hidden"){const l=this.options.pillsMaxVisible||3,n=Array.from(this.selectedOptions.values()).length-l;this.createRemoveButtonTooltip(o,`${n} hidden items`,"more-badge-remove")}}}createTooltipForElement(e,t,o){const l=document.createElement("div");l.className="ml__pill-tooltip";let s;if(this.options.getPillTooltipCallback)s=this.options.getPillTooltipCallback(t),console.log("[Tooltips] Using custom callback for tooltip content");else{const d=this.getItemDisplayValue(t),m=this.getItemSubtitle(t);s=m?`${d}
+${m}`:d,console.log(`[Tooltips] Using default content: "${s}"`)}typeof s=="string"?l.textContent=s:l.appendChild(s),(this.options.container||document.body).appendChild(l),console.log(`[Tooltips] Tooltip element created and appended for "${o}"`),this.pillTooltips.set(o,l);let r,a;const c=()=>{clearTimeout(a),console.log(`[Tooltips] Mouse entered pill "${o}", will show tooltip in ${this.options.pillTooltipDelay||300}ms`),r=window.setTimeout(()=>{console.log(`[Tooltips] Showing tooltip for "${o}"`),l.classList.add("ml__pill-tooltip--visible"),this.positionPillTooltip(e,l,o)},this.options.pillTooltipDelay||300)},p=()=>{clearTimeout(r),a=window.setTimeout(()=>{l.classList.remove("ml__pill-tooltip--visible"),this.cleanupPillTooltip(o)},100)};e.addEventListener("mouseenter",c),e.addEventListener("mouseleave",p)}createRemoveButtonTooltip(e,t,o){const l=document.createElement("div");l.className="ml__pill-tooltip",l.textContent=`Remove ${t}`,(this.options.container||document.body).appendChild(l);const n=`${o}-remove`;this.pillTooltips.set(n,l);let r,a;const c=()=>{clearTimeout(a);const d=this.pillTooltips.get(o);d&&d.classList.remove("ml__pill-tooltip--visible"),r=window.setTimeout(()=>{l.classList.add("ml__pill-tooltip--visible"),this.positionPillTooltip(e,l,n)},this.options.pillTooltipDelay||300)},p=()=>{clearTimeout(r),a=window.setTimeout(()=>{l.classList.remove("ml__pill-tooltip--visible"),this.cleanupPillTooltip(n)},100)};e.addEventListener("mouseenter",c),e.addEventListener("mouseleave",p)}positionPillTooltip(e,t,o){const l=re(e,t,()=>{de(e,t,{placement:this.options.pillTooltipPlacement||"top",strategy:"fixed",middleware:[ae(this.options.pillTooltipOffset||8),ve(),ce({padding:8})]}).then(({x:s,y:n})=>{Object.assign(t.style,{left:`${s}px`,top:`${n}px`}),console.log(`[Tooltips] Positioned tooltip "${o}" at x:${s}, y:${n}`,{placement:this.options.pillTooltipPlacement||"top",tooltipClasses:t.className,tooltipDisplay:window.getComputedStyle(t).display,tooltipOpacity:window.getComputedStyle(t).opacity,tooltipVisibility:window.getComputedStyle(t).visibility,tooltipZIndex:window.getComputedStyle(t).zIndex,tooltipPosition:window.getComputedStyle(t).position})})});this.pillTooltipCleanups.set(o,l)}cleanupPillTooltip(e){const t=this.pillTooltipCleanups.get(e);t&&(t(),this.pillTooltipCleanups.delete(e))}destroyAllPillTooltips(){this.pillTooltipCleanups.forEach(e=>e()),this.pillTooltipCleanups.clear(),this.pillTooltips.forEach(e=>e.remove()),this.pillTooltips.clear()}destroy(){this.destroyAllPillTooltips(),this.dropdownCleanup&&this.dropdownCleanup(),this.hintCleanup&&this.hintCleanup(),this.selectedPopoverCleanup&&this.selectedPopoverCleanup(),this.dropdown&&this.dropdown.remove(),this.hint&&this.hint.remove(),this.selectedPopover&&this.selectedPopover.remove(),this.element.innerHTML="",this.element.classList.remove("ml","ml--open","ml--no-checkboxes"),console.log("[MultiSelect] Destroyed")}}const Lt='@charset "UTF-8";multi-select:not(:defined){display:block;min-height:2.5rem;color:transparent!important;background:transparent}.ml-wrapper{display:flex;flex-direction:column;align-items:stretch}.ml-wrapper--inline{flex-direction:row;align-items:flex-start}.ml{position:relative;width:100%}.ml__input-wrapper{position:relative;display:flex;align-items:center}.ml__input{width:100%;padding:var(--ml-input-padding, .5rem .75rem);padding-right:var(--ml-input-padding-right, 2.5rem);font-size:var(--ml-input-font-size, .875rem);border:var(--ml-input-border-style, 1px solid #d1d5db);border-radius:var(--ml-input-border-radius, .375rem);background:var(--ml-input-bg, #ffffff);color:var(--ml-input-text, #111827);transition:border-color var(--ml-transition-fast, .15s) var(--ml-easing-snappy, cubic-bezier(.4, 0, .2, 1))}.ml__input:focus{outline:none;border-color:var(--ml-input-focus-border-color, #3b82f6)}.ml__input::placeholder{color:var(--ml-input-placeholder-color, #6b7280);opacity:0;transition:opacity var(--ml-transition-fast, .15s) var(--ml-easing-snappy, cubic-bezier(.4, 0, .2, 1))}:host([data-ready]) .ml__input::placeholder{opacity:var(--ml-placeholder-opacity, .6)}.ml__toggle{position:absolute;right:var(--ml-toggle-right, .75rem);top:50%;transform:var(--ml-transform-center-y, translateY(-50%));pointer-events:none;color:var(--ml-toggle-color, #6b7280);transition:transform var(--ml-transition-fast, .15s) var(--ml-easing-snappy, cubic-bezier(.4, 0, .2, 1))}.ml--open .ml__toggle{transform:var(--ml-transform-center-y, translateY(-50%)) rotate(var(--ml-transform-rotate-180, 180deg))}.ml__count-badge{position:absolute;right:var(--ml-count-badge-offset, 2rem);top:50%;transform:var(--ml-transform-center-y, translateY(-50%));padding:var(--ml-count-badge-padding, .125rem .25rem);background:var(--ml-count-badge-bg, #3b82f6);color:var(--ml-count-badge-color, #ffffff);font-size:var(--ml-count-badge-font-size, .75rem);font-weight:var(--ml-count-badge-font-weight, 600);border-radius:var(--ml-count-badge-border-radius, .25rem);cursor:pointer;transition:all var(--ml-transition-fast, .15s) var(--ml-easing-snappy, cubic-bezier(.4, 0, .2, 1))}.ml__count-badge:hover{background:var(--ml-count-badge-bg-hover, #2563eb);transform:var(--ml-transform-center-y, translateY(-50%)) scale(var(--ml-transform-scale-hover, 1.1))}.ml__hint{display:none;position:absolute;z-index:var(--ml-z-index-popover, 10000);padding:var(--ml-hint-padding, .5rem .75rem);background:var(--ml-hint-bg, #ffffff);border:var(--ml-hint-border, 1px solid #e5e7eb);border-radius:var(--ml-hint-border-radius, .375rem);box-shadow:var(--ml-hint-box-shadow, 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -2px rgba(0, 0, 0, .1));font-size:var(--ml-hint-font-size, .75rem);color:var(--ml-hint-color, #6b7280);line-height:var(--ml-line-height-relaxed, 1.4);max-width:100%}.ml__hint--visible{display:block}.ml__dropdown{display:none;position:absolute;z-index:var(--ml-z-index-dropdown, 9999);background:var(--ml-dropdown-bg, #ffffff);border:var(--ml-dropdown-border, 1px solid #e5e7eb);border-radius:var(--ml-dropdown-border-radius, .375rem);box-shadow:var(--ml-dropdown-box-shadow, 0 20px 25px -5px rgba(0, 0, 0, .1), 0 8px 10px -6px rgba(0, 0, 0, .1));max-height:var(--ml-dropdown-max-height, 20rem);overflow-y:auto;color:var(--ml-dropdown-color, #111827)}.ml__dropdown--visible{display:block}.ml__actions{display:flex;gap:var(--ml-actions-gap, .25rem);padding:var(--ml-actions-padding, .5rem);border-bottom:var(--ml-actions-border-bottom, 1px solid #e5e7eb)}.ml__actions--sticky{position:sticky;top:0;z-index:var(--ml-z-index-sticky, 1);background:var(--ml-actions-bg, #ffffff)}.ml__action-btn{flex:1;padding:var(--ml-action-btn-padding, .25rem .5rem);font-size:var(--ml-action-btn-font-size, .75rem);border:var(--ml-action-btn-border, 1px solid #e5e7eb);border-radius:var(--ml-action-btn-border-radius, .25rem);background:var(--ml-action-btn-bg, transparent);color:var(--ml-action-btn-color, inherit);cursor:pointer;transition:all var(--ml-transition-fast, .15s) var(--ml-easing-snappy, cubic-bezier(.4, 0, .2, 1))}.ml__action-btn:hover{background:var(--ml-action-btn-bg-hover, #f3f4f6);border-color:var(--ml-action-btn-border-color-hover, #3b82f6)}.ml__action-btn:active{transform:scale(var(--ml-transform-scale-active, .98))}.ml__options{padding:var(--ml-options-padding, .25rem 0)}.ml__group+.ml__group{border-top:var(--ml-group-border-top, 1px solid #e5e7eb);margin-top:var(--ml-group-margin-top, .25rem);padding-top:var(--ml-group-padding-top, .25rem)}.ml__group-label{padding:var(--ml-group-label-padding, .25rem .75rem);font-size:var(--ml-group-label-font-size, .75rem);font-weight:var(--ml-group-label-font-weight, 600);color:var(--ml-group-label-color, #6b7280);text-transform:var(--ml-group-label-transform, uppercase);letter-spacing:var(--ml-group-label-letter-spacing, .05em)}.ml__option{display:flex;align-items:flex-start;gap:var(--ml-option-gap, .5rem);padding:var(--ml-option-padding, .5rem .75rem);cursor:pointer;transition:background-color var(--ml-transition-fast, .15s) var(--ml-easing-snappy, cubic-bezier(.4, 0, .2, 1))}.ml__option:hover{background:var(--ml-option-bg-hover, #f9fafb)}.ml__option--focused{background:var(--ml-option-bg-focused, #f9fafb);outline:var(--ml-option-outline-focused, 2px solid #3b82f6);outline-offset:var(--ml-option-focus-outline-offset, -2px)}.ml__option--selected{background:var(--ml-option-bg-selected, rgba(59, 130, 246, .1))}.ml__option--disabled{opacity:var(--ml-disabled-opacity, .5);cursor:not-allowed}.ml__option--disabled:hover{background:var(--ml-option-bg, transparent)}.ml__checkbox{flex-shrink:0;margin-top:var(--ml-checkbox-margin-top, .125rem);cursor:pointer}.ml__option--disabled .ml__checkbox{cursor:not-allowed}.ml__option-content{flex:1;display:flex;align-items:flex-start;gap:var(--ml-option-content-gap, .5rem);min-width:0}.ml__option-icon{flex-shrink:0;width:var(--ml-option-icon-size, 1.25rem);height:var(--ml-option-icon-size, 1.25rem);display:flex;align-items:center;justify-content:center;font-size:var(--ml-option-icon-font-size, 1rem)}.ml__option-icon svg{width:100%;height:100%;fill:currentColor}.ml__option-text{flex:1;min-width:0}.ml__option-title{font-size:var(--ml-option-title-font-size, .875rem);color:var(--ml-option-title-color, inherit);line-height:var(--ml-line-height-relaxed, 1.4)}.ml__option-title mark{background:var(--ml-option-mark-bg, rgba(59, 130, 246, .2));color:var(--ml-option-mark-color, inherit);font-weight:var(--ml-option-mark-font-weight, 600)}.ml__option-subtitle{margin-top:var(--ml-option-subtitle-margin-top, .25rem);font-size:var(--ml-option-subtitle-font-size, .75rem);color:var(--ml-option-subtitle-color, #6b7280);line-height:var(--ml-option-subtitle-line-height, 1.3)}.ml__empty{padding:var(--ml-empty-padding, 1rem .75rem);text-align:center;font-size:var(--ml-empty-font-size, .875rem);color:var(--ml-empty-color, #6b7280)}.ml__loader{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--ml-loader-padding, 1rem);gap:var(--ml-loader-gap, .5rem)}.ml__loading-text{font-size:var(--ml-loading-text-font-size, .875rem);color:var(--ml-loading-text-color, #6b7280)}.ml__pills{display:flex;flex-wrap:wrap;gap:var(--ml-pills-gap, .5rem);padding:0}.ml__pills:empty{display:none}.ml__pills--bottom{margin-top:var(--ml-pills-margin-bottom, .5rem)}.ml__pills--top{margin-bottom:var(--ml-pills-margin-top, .5rem);order:var(--ml-order-first, -1)}.ml__pills--left{order:var(--ml-order-first, -1);margin-right:var(--ml-pills-margin-left, .5rem);justify-content:flex-start}.ml__pills--right{margin-left:var(--ml-pills-margin-right, .5rem);justify-content:flex-end}.ml__count-display{display:flex;align-items:center}.ml__count-display:empty{display:none}.ml__count-display--bottom{margin-top:var(--ml-count-display-margin-bottom, .5rem)}.ml__count-display--top{margin-bottom:var(--ml-count-display-margin-top, .5rem);order:var(--ml-order-first, -1)}.ml__count-display--left{order:var(--ml-order-first, -1);margin-right:var(--ml-count-display-margin-left, .5rem);justify-content:flex-start}.ml__count-display--right{margin-left:var(--ml-count-display-margin-right, .5rem);justify-content:flex-end}.ml__count-badge-wrapper{display:inline-flex;align-items:center;gap:var(--ml-count-badge-wrapper-gap, .25rem);background:var(--ml-count-badge-wrapper-bg, transparent);border:var(--ml-count-badge-wrapper-border, 1px solid #e5e7eb);border-radius:var(--ml-count-badge-wrapper-border-radius, .25rem);padding:var(--ml-count-badge-wrapper-padding, .25rem .5rem);transition:all var(--ml-transition-fast, .15s) var(--ml-easing-snappy, cubic-bezier(.4, 0, .2, 1))}.ml__count-badge-wrapper:hover{background:var(--ml-count-badge-wrapper-bg-hover, #f9fafb);border-color:var(--ml-count-badge-wrapper-border-color-hover, #3b82f6)}.ml__count-text{display:inline-flex;align-items:center;background:var(--ml-count-text-bg, transparent);border:var(--ml-count-text-border, none);padding:0;font-size:var(--ml-count-text-font-size, .875rem);color:var(--ml-count-text-color, #111827);cursor:pointer;transition:color var(--ml-transition-fast, .15s) var(--ml-easing-snappy, cubic-bezier(.4, 0, .2, 1))}.ml__count-clear{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:var(--ml-count-clear-size, 1rem);height:var(--ml-count-clear-size, 1rem);padding:0;border:none;background:var(--ml-count-clear-bg, transparent);color:var(--ml-count-clear-color, #6b7280);font-size:var(--ml-count-clear-font-size, 1.125rem);line-height:var(--ml-line-height-none, 1);cursor:pointer;border-radius:var(--ml-count-clear-border-radius, 50%);transition:all var(--ml-transition-fast, .15s) var(--ml-easing-snappy, cubic-bezier(.4, 0, .2, 1))}.ml__count-clear:hover{background:var(--ml-count-clear-bg-hover, rgba(59, 130, 246, .2));color:var(--ml-count-clear-color-hover, #3b82f6)}.ml__count-clear:before{content:var(--ml-icon-clear, "×")}.ml__pill{display:inline-flex;align-items:center;height:var(--ml-pill-height, 1.5rem);font-size:var(--ml-pill-font-size, .75rem);font-weight:var(--ml-pill-font-weight, 600);line-height:var(--ml-line-height-none, 1);border-radius:var(--ml-pill-border-radius, .375rem);overflow:hidden;max-width:100%}.ml__pill-text{display:flex;align-items:center;height:100%;padding:var(--ml-pill-text-padding, 0 .5rem);background:var(--ml-pill-text-bg, #eff6ff);color:var(--ml-pill-text-color, #3b82f6);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transition:background-color var(--ml-transition-normal, .2s) ease}.ml__pill-remove{display:flex;align-items:center;justify-content:center;width:var(--ml-pill-remove-width, 1.5rem);height:100%;flex-shrink:0;background:var(--ml-pill-remove-bg, #3b82f6);color:var(--ml-pill-remove-color, #ffffff);border:var(--ml-pill-remove-border, none);cursor:pointer;transition:background-color var(--ml-transition-normal, .2s) ease;font-size:var(--ml-pill-remove-font-size, .75rem)}.ml__pill-remove:hover{background:var(--ml-pill-remove-bg-hover, #2563eb)}.ml__pill-remove:focus{outline:none;box-shadow:var(--ml-pill-remove-box-shadow-focus, 0 0 0 2px rgba(59, 130, 246, .5))}.ml__pill-remove:before{content:var(--ml-icon-remove, "×");font-size:var(--ml-font-size-base, 1rem);line-height:var(--ml-line-height-none, 1)}.ml__pill--more{cursor:pointer}.ml__pill--more .ml__pill-text{background:var(--ml-more-badge-bg, #eff6ff);font-weight:var(--ml-pill-font-weight, 600)}.ml__pill--more:hover .ml__pill-text{background:var(--ml-more-badge-hover-bg, #ffffff)}.ml__pill--more:active .ml__pill-text{background:var(--ml-more-badge-active-bg, #e0f2fe)}.ml__pill-tooltip{position:fixed;z-index:var(--ml-tooltip-z-index, 10000);opacity:0;visibility:hidden;transition:opacity var(--ml-transition-normal, .2s) ease,visibility var(--ml-transition-normal, .2s) ease;background:var(--ml-tooltip-bg, #333);color:var(--ml-tooltip-color, #fff);padding:var(--ml-tooltip-padding, .5rem .75rem);border-radius:var(--ml-tooltip-border-radius, .375rem);font-size:var(--ml-tooltip-font-size, .875rem);line-height:var(--ml-line-height-relaxed, 1.4);max-width:var(--ml-tooltip-max-width, 20rem);word-wrap:break-word;white-space:pre-wrap;box-shadow:var(--ml-tooltip-shadow, 0 2px 8px rgba(0, 0, 0, .15));pointer-events:none}.ml__pill-tooltip--visible{opacity:1;visibility:visible}.ml__selected-popover{display:none;position:absolute;z-index:var(--ml-z-index-popover, 10000);background:var(--ml-selected-popover-bg, #ffffff);border:var(--ml-selected-popover-border, 1px solid #e5e7eb);border-radius:var(--ml-selected-popover-border-radius, .375rem);box-shadow:var(--ml-selected-popover-box-shadow, 0 20px 25px -5px rgba(0, 0, 0, .1), 0 8px 10px -6px rgba(0, 0, 0, .1));width:var(--ml-selected-popover-width, 20rem);max-height:var(--ml-selected-popover-max-height, 20rem);overflow:hidden}.ml__selected-popover--visible{display:flex;flex-direction:column}.ml__selected-popover-header{display:flex;align-items:center;justify-content:space-between;padding:var(--ml-selected-popover-header-padding, .5rem .75rem);background:var(--ml-selected-popover-header-bg, rgba(59, 130, 246, .1));border-bottom:var(--ml-selected-popover-header-border-bottom, 1px solid #e5e7eb);font-size:var(--ml-selected-popover-header-font-size, .875rem);font-weight:var(--ml-selected-popover-header-font-weight, 600);color:var(--ml-selected-popover-header-color, #111827)}.ml__selected-popover-close{display:flex;align-items:center;justify-content:center;width:var(--ml-popover-close-size, 1.5rem);height:var(--ml-popover-close-size, 1.5rem);padding:0;border:none;background:var(--ml-selected-popover-close-bg, transparent);color:var(--ml-selected-popover-close-color, #6b7280);font-size:var(--ml-selected-popover-close-font-size, 1.25rem);line-height:var(--ml-line-height-none, 1);cursor:pointer;border-radius:var(--ml-selected-popover-close-border-radius, 50%);transition:all var(--ml-transition-fast, .15s) var(--ml-easing-snappy, cubic-bezier(.4, 0, .2, 1))}.ml__selected-popover-close:hover{background:var(--ml-selected-popover-close-bg-hover, rgba(59, 130, 246, .2));color:var(--ml-selected-popover-close-color-hover, #3b82f6)}.ml__selected-popover-body{display:flex;flex-direction:column;gap:var(--ml-selected-popover-body-gap, .25rem);padding:var(--ml-selected-popover-body-padding, .5rem);overflow-y:auto;max-height:var(--ml-selected-popover-body-max-height, 18rem)}.ml__selected-popover-body .ml__pill{width:100%}.ml__selected-popover-body .ml__pill-text{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}.ml--xs .ml__input{font-size:var(--ml-font-size-xs, .75rem)}.ml--xs .ml__option{padding:var(--ml-spacing-xs, .25rem) var(--ml-spacing-sm, .5rem)}.ml--xs .ml__option-title{font-size:var(--ml-font-size-xs, .75rem)}.ml--xs .ml__pill{font-size:var(--ml-font-size-2xs, .625rem)}.ml--sm .ml__input,.ml--sm .ml__option-title{font-size:var(--ml-font-size-xs, .75rem)}.ml--lg .ml__input,.ml--lg .ml__option-title{font-size:var(--ml-font-size-base, 1rem)}.ml--lg .ml__pill{font-size:var(--ml-font-size-sm, .875rem)}.ml--xl .ml__input,.ml--xl .ml__option-title{font-size:var(--ml-font-size-lg, 1.125rem)}.ml--xl .ml__pill{font-size:var(--ml-font-size-base, 1rem)}.ml--disabled .ml__input{opacity:var(--ml-disabled-input-opacity, .6);cursor:not-allowed;background:var(--ml-input-bg-disabled, rgba(107, 114, 128, .05))}.ml--disabled .ml__toggle{opacity:var(--ml-disabled-input-opacity, .6)}.ml--no-checkboxes .ml__option{gap:0;padding-left:var(--ml-option-padding-h, .75rem)}.ml--no-checkboxes .ml__option-content{padding-left:0}.ml-debug-info{margin-top:.25rem;padding:.25rem;background-color:#f9fafb;border:1px solid #e5e7eb;border-radius:.375rem;font-size:.75rem;color:#111827}.ml-debug-info details summary{cursor:pointer;font-weight:600;color:#2563eb;-webkit-user-select:none;user-select:none;padding:.25rem;border-radius:.25rem}.ml-debug-info details summary:hover{background-color:#f3f4f6}.ml-debug-info details summary:focus{outline:2px solid #3b82f6;outline-offset:2px}.ml-debug-info .ml-debug-stats{display:flex;flex-direction:column;gap:.25rem;margin-top:.25rem;padding:.25rem;background-color:#fff;border-radius:.25rem}.ml-debug-info .ml-debug-stats span{display:flex;justify-content:space-between;padding:2px 4px;font-family:monospace;font-size:.625rem}.ml-debug-info .ml-debug-stats span:before{content:"•";margin-right:.25rem;color:#3b82f6}',we=new Set;function je(){return Array.from(we)}class _e extends HTMLElement{constructor(){super();u(this,"picker");u(this,"containerElement");u(this,"shadow");u(this,"_options");u(this,"_valueMember");u(this,"_getValueCallback");u(this,"_displayValueMember");u(this,"_getDisplayValueCallback");u(this,"_searchValueMember");u(this,"_getSearchValueCallback");u(this,"_iconMember");u(this,"_getIconCallback");u(this,"_subtitleMember");u(this,"_getSubtitleCallback");u(this,"_groupMember");u(this,"_getGroupCallback");u(this,"_disabledMember");u(this,"_getDisabledCallback");u(this,"_getValueFormatCallback");u(this,"_getPillTooltipCallback");u(this,"_getCountPillCallback");u(this,"_searchCallback");u(this,"_addNewCallback");u(this,"_selectCallback");u(this,"_deselectCallback");u(this,"_changeCallback");this.shadow=this.attachShadow({mode:"open"});const t=document.createElement("style");t.textContent=Lt,this.shadow.appendChild(t),requestAnimationFrame(()=>{this.setAttribute("data-ready","")})}static get observedAttributes(){return["search-hint","search-placeholder","multiple","allow-groups","allow-select-all","allow-clear-all","show-checkboxes","sticky-actions","close-on-select","lock-placement","dropdown-min-width","pills-display-mode","pills-threshold","pills-max-visible","pills-threshold-mode","pills-position","show-count-badge","max-height","empty-message","loading-message","min-search-length","enable-search","search-input-mode","allow-add-new","initial-values","value-member","display-value-member","search-value-member","icon-member","subtitle-member","group-member","disabled-member","name","value-format","enable-pill-tooltips","pill-tooltip-placement","show-debug-info"]}connectedCallback(){we.add(this),this.render(),this.initializePicker()}disconnectedCallback(){we.delete(this),this.picker&&this.picker.destroy()}attributeChangedCallback(t,o,l){o!==l&&this.picker&&t!=="initial-values"&&(this.picker.destroy(),this.initializePicker())}render(){this.containerElement=document.createElement("div"),this.containerElement.setAttribute("data-multiselect",""),this.className&&(this.containerElement.className=this.className),this.shadow.appendChild(this.containerElement),this.getAttribute("show-debug-info")==="true"&&this.renderDebugInfo()}renderDebugInfo(){const t=this.shadow.querySelector(".ml-debug-info");t&&t.remove();const o=document.createElement("div");o.className="ml-debug-info";const l=document.createElement("details"),s=document.createElement("summary");s.textContent="Debug Info";const n=document.createElement("div");n.className="ml-debug-stats",l.appendChild(s),l.appendChild(n),o.appendChild(l),this.shadow.appendChild(o),this.updateDebugInfo()}updateDebugInfo(){var h,g;const t=this.shadow.querySelector(".ml-debug-stats");if(!t||!this.picker)return;const o="1.0.0-rc02",l=je().length,n=this.picker.getSelected().length,r=((h=this._options)==null?void 0:h.length)||0,a=this.picker,c=a.isOpen||!1,p=a.searchTerm||"",d=a.isLoading||!1,m=((g=a.filteredOptions)==null?void 0:g.length)||0;t.innerHTML=`
+            <span>Version: ${o}</span>
+            <span>Total Instances: ${l}</span>
+            <span>Options: ${r}</span>
+            <span>Filtered: ${m}</span>
+            <span>Selected: ${n}</span>
+            <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 o=this.getAttribute("initial-values");if(o)try{t=JSON.parse(o)}catch(s){console.error("[MultiSelectElement] Failed to parse initial-values:",s)}const l={searchHint:this.getAttribute("search-hint")||void 0,searchPlaceholder:this.getAttribute("search-placeholder")||"Search...",dropdownMinWidth:this.getAttribute("dropdown-min-width")||void 0,pillsDisplayMode:this.getAttribute("pills-display-mode")||"pills",pillsPosition:this.getAttribute("pills-position")||"bottom",pillsThresholdMode:this.getAttribute("pills-threshold-mode")||"count",maxHeight:this.getAttribute("max-height")||"20rem",emptyMessage:this.getAttribute("empty-message")||"No results found",loadingMessage:this.getAttribute("loading-message")||"Loading...",searchInputMode:this.getAttribute("search-input-mode")||"normal",pillsThreshold:this.getAttribute("pills-threshold")?parseInt(this.getAttribute("pills-threshold")):void 0,pillsMaxVisible:this.getAttribute("pills-max-visible")?parseInt(this.getAttribute("pills-max-visible")):void 0,minSearchLength:this.getAttribute("min-search-length")?parseInt(this.getAttribute("min-search-length")):0,isMultipleEnabled:this.getAttribute("multiple")!=="false",isGroupsAllowed:this.getAttribute("allow-groups")!=="false",isSelectAllAllowed:this.getAttribute("allow-select-all")!=="false",isClearAllAllowed:this.getAttribute("allow-clear-all")!=="false",isCheckboxesShown:this.getAttribute("show-checkboxes")!=="false",isActionsSticky:this.getAttribute("sticky-actions")!=="false",isCloseOnSelect:this.getAttribute("close-on-select")==="true",isPlacementLocked:this.getAttribute("lock-placement")!=="false",isSearchEnabled:this.getAttribute("enable-search")!=="false",isAddNewAllowed:this.getAttribute("allow-add-new")==="true",isCountBadgeShown:this.getAttribute("show-count-badge")==="true",valueMember:this.getAttribute("value-member")||this._valueMember,displayValueMember:this.getAttribute("display-value-member")||this._displayValueMember,searchValueMember:this.getAttribute("search-value-member")||this._searchValueMember,iconMember:this.getAttribute("icon-member")||this._iconMember,subtitleMember:this.getAttribute("subtitle-member")||this._subtitleMember,groupMember:this.getAttribute("group-member")||this._groupMember,disabledMember:this.getAttribute("disabled-member")||this._disabledMember,getValueCallback:this._getValueCallback,getDisplayValueCallback:this._getDisplayValueCallback,getSearchValueCallback:this._getSearchValueCallback,getIconCallback:this._getIconCallback,getSubtitleCallback:this._getSubtitleCallback,getGroupCallback:this._getGroupCallback,getDisabledCallback:this._getDisabledCallback,formFieldId:this.getAttribute("name")||void 0,valueFormat:this.getAttribute("value-format")||"json",getValueFormatCallback:this._getValueFormatCallback,isPillTooltipsEnabled:this.getAttribute("enable-pill-tooltips")==="true",getPillTooltipCallback:this._getPillTooltipCallback,pillTooltipPlacement:this.getAttribute("pill-tooltip-placement")||"top",pillTooltipDelay:parseInt(this.getAttribute("pill-tooltip-delay")||"300"),pillTooltipOffset:parseInt(this.getAttribute("pill-tooltip-offset")||"8"),getCountPillCallback:this._getCountPillCallback||((s,n)=>n!==void 0?`+${n} more`:`${s} selected`),options:this._options,searchCallback:this._searchCallback,addNewCallback:this._addNewCallback,selectCallback:s=>{var n,r;this._selectCallback&&this._selectCallback(s),this.dispatchEvent(new CustomEvent("select",{detail:{option:s,selectedOptions:(n=this.picker)==null?void 0:n.getSelected(),selectedValues:Array.from(((r=this.picker)==null?void 0:r.getValue())||[])}}))},deselectCallback:s=>{var n,r;this._deselectCallback&&this._deselectCallback(s),this.dispatchEvent(new CustomEvent("deselect",{detail:{option:s,selectedOptions:(n=this.picker)==null?void 0:n.getSelected(),selectedValues:Array.from(((r=this.picker)==null?void 0:r.getValue())||[])}}))},changeCallback:s=>{var n;this._changeCallback&&this._changeCallback(s),this.dispatchEvent(new CustomEvent("change",{detail:{selectedOptions:s,selectedValues:Array.from(((n=this.picker)==null?void 0:n.getValue())||[])}}))},container:this.shadow,hostElement:this};t&&(this.containerElement.dataset.initialValues=JSON.stringify(t)),this.picker=new We(this.containerElement,l)}reinitialize(){this.picker&&(this.picker.destroy(),this.initializePicker())}get options(){return this._options}set options(t){this._options=t,this.reinitialize()}set valueMember(t){this._valueMember=t||void 0,t?this.setAttribute("value-member",t):this.removeAttribute("value-member")}get valueMember(){return this.getAttribute("value-member")}set displayValueMember(t){this._displayValueMember=t||void 0,t?this.setAttribute("display-value-member",t):this.removeAttribute("display-value-member")}get displayValueMember(){return this.getAttribute("display-value-member")}set searchValueMember(t){this._searchValueMember=t||void 0,t?this.setAttribute("search-value-member",t):this.removeAttribute("search-value-member")}get searchValueMember(){return this.getAttribute("search-value-member")}set iconMember(t){this._iconMember=t||void 0,t?this.setAttribute("icon-member",t):this.removeAttribute("icon-member")}get iconMember(){return this.getAttribute("icon-member")}set subtitleMember(t){this._subtitleMember=t||void 0,t?this.setAttribute("subtitle-member",t):this.removeAttribute("subtitle-member")}get subtitleMember(){return this.getAttribute("subtitle-member")}set groupMember(t){this._groupMember=t||void 0,t?this.setAttribute("group-member",t):this.removeAttribute("group-member")}get groupMember(){return this.getAttribute("group-member")}set disabledMember(t){this._disabledMember=t||void 0,t?this.setAttribute("disabled-member",t):this.removeAttribute("disabled-member")}get disabledMember(){return this.getAttribute("disabled-member")}set getValueCallback(t){this._getValueCallback=t,this.reinitialize()}get getValueCallback(){return this._getValueCallback}set getDisplayValueCallback(t){this._getDisplayValueCallback=t,this.reinitialize()}get getDisplayValueCallback(){return this._getDisplayValueCallback}set getSearchValueCallback(t){this._getSearchValueCallback=t,this.reinitialize()}get getSearchValueCallback(){return this._getSearchValueCallback}set getIconCallback(t){this._getIconCallback=t,this.reinitialize()}get getIconCallback(){return this._getIconCallback}set getSubtitleCallback(t){this._getSubtitleCallback=t,this.reinitialize()}get getSubtitleCallback(){return this._getSubtitleCallback}set getGroupCallback(t){this._getGroupCallback=t,this.reinitialize()}get getGroupCallback(){return this._getGroupCallback}set getDisabledCallback(t){this._getDisabledCallback=t,this.reinitialize()}get getDisabledCallback(){return this._getDisabledCallback}set name(t){t?this.setAttribute("name",t):this.removeAttribute("name")}get name(){return this.getAttribute("name")}set valueFormat(t){t?this.setAttribute("value-format",t):this.removeAttribute("value-format")}get valueFormat(){return this.getAttribute("value-format")}set getValueFormatCallback(t){this._getValueFormatCallback=t,this.reinitialize()}get getValueFormatCallback(){return this._getValueFormatCallback}set thresholdMode(t){t?this.setAttribute("threshold-mode",t):this.removeAttribute("threshold-mode")}get thresholdMode(){return this.getAttribute("threshold-mode")}set pillsMaxVisible(t){t!==null?this.setAttribute("pills-max-visible",String(t)):this.removeAttribute("pills-max-visible")}get pillsMaxVisible(){const t=this.getAttribute("pills-max-visible");return t?parseInt(t):null}set enablePillTooltips(t){t?this.setAttribute("enable-pill-tooltips","true"):this.removeAttribute("enable-pill-tooltips")}get enablePillTooltips(){return this.getAttribute("enable-pill-tooltips")==="true"}set pillTooltipPlacement(t){t?this.setAttribute("pill-tooltip-placement",t):this.removeAttribute("pill-tooltip-placement")}get pillTooltipPlacement(){return this.getAttribute("pill-tooltip-placement")}set getPillTooltipCallback(t){this._getPillTooltipCallback=t,this.reinitialize()}get getPillTooltipCallback(){return this._getPillTooltipCallback}set getCountPillCallback(t){this._getCountPillCallback=t,this.reinitialize()}get getCountPillCallback(){return this._getCountPillCallback}get searchCallback(){return this._searchCallback}set searchCallback(t){this._searchCallback=t,this.reinitialize()}get addNewCallback(){return this._addNewCallback}set addNewCallback(t){this._addNewCallback=t,this.reinitialize()}get selectCallback(){return this._selectCallback}set selectCallback(t){this._selectCallback=t}get deselectCallback(){return this._deselectCallback}set deselectCallback(t){this._deselectCallback=t}get changeCallback(){return this._changeCallback}set changeCallback(t){this._changeCallback=t}get selectedValue(){var t;return((t=this.picker)==null?void 0:t.selectedValue)??null}get selectedItem(){var t;return((t=this.picker)==null?void 0:t.selectedItem)??null}getSelected(){return this.picker?this.picker.getSelected():[]}setSelected(t){this.picker&&this.picker.setSelected(t)}getValue(){return this.picker?this.picker.getValue():null}destroy(){this.picker&&this.picker.destroy()}}customElements.get("multi-select")||customElements.define("multi-select",_e),typeof window<"u"&&(window.keenmate=window.keenmate||{},window.keenmate.multiselect={version:()=>"1.0.0-rc02",config:{name:"@keenmate/web-multiselect",version:"1.0.0-rc02",author:"Keenmate",license:"MIT",repository:"git+https://github.com/keenmate/web-multiselect.git",homepage:"https://github.com/keenmate/web-multiselect#readme"},register:()=>{customElements.get("multi-select")||customElements.define("multi-select",_e)},getInstances:()=>je()}),A.MultiSelectElement=_e,A.PureMultiSelect=We,Object.defineProperty(A,Symbol.toStringTag,{value:"Module"})});

package/dist/style.css

@@ -0,0 +1 @@
+@charset "UTF-8";multi-select:not(:defined){display:block;min-height:2.5rem;color:transparent!important;background:transparent}.ml-wrapper{display:flex;flex-direction:column;align-items:stretch}.ml-wrapper--inline{flex-direction:row;align-items:flex-start}.ml{position:relative;width:100%}.ml__input-wrapper{position:relative;display:flex;align-items:center}.ml__input{width:100%;padding:var(--ml-input-padding, .5rem .75rem);padding-right:var(--ml-input-padding-right, 2.5rem);font-size:var(--ml-input-font-size, .875rem);border:var(--ml-input-border-style, 1px solid #d1d5db);border-radius:var(--ml-input-border-radius, .375rem);background:var(--ml-input-bg, #ffffff);color:var(--ml-input-text, #111827);transition:border-color var(--ml-transition-fast, .15s) var(--ml-easing-snappy, cubic-bezier(.4, 0, .2, 1))}.ml__input:focus{outline:none;border-color:var(--ml-input-focus-border-color, #3b82f6)}.ml__input::placeholder{color:var(--ml-input-placeholder-color, #6b7280);opacity:0;transition:opacity var(--ml-transition-fast, .15s) var(--ml-easing-snappy, cubic-bezier(.4, 0, .2, 1))}:host([data-ready]) .ml__input::placeholder{opacity:var(--ml-placeholder-opacity, .6)}.ml__toggle{position:absolute;right:var(--ml-toggle-right, .75rem);top:50%;transform:var(--ml-transform-center-y, translateY(-50%));pointer-events:none;color:var(--ml-toggle-color, #6b7280);transition:transform var(--ml-transition-fast, .15s) var(--ml-easing-snappy, cubic-bezier(.4, 0, .2, 1))}.ml--open .ml__toggle{transform:var(--ml-transform-center-y, translateY(-50%)) rotate(var(--ml-transform-rotate-180, 180deg))}.ml__count-badge{position:absolute;right:var(--ml-count-badge-offset, 2rem);top:50%;transform:var(--ml-transform-center-y, translateY(-50%));padding:var(--ml-count-badge-padding, .125rem .25rem);background:var(--ml-count-badge-bg, #3b82f6);color:var(--ml-count-badge-color, #ffffff);font-size:var(--ml-count-badge-font-size, .75rem);font-weight:var(--ml-count-badge-font-weight, 600);border-radius:var(--ml-count-badge-border-radius, .25rem);cursor:pointer;transition:all var(--ml-transition-fast, .15s) var(--ml-easing-snappy, cubic-bezier(.4, 0, .2, 1))}.ml__count-badge:hover{background:var(--ml-count-badge-bg-hover, #2563eb);transform:var(--ml-transform-center-y, translateY(-50%)) scale(var(--ml-transform-scale-hover, 1.1))}.ml__hint{display:none;position:absolute;z-index:var(--ml-z-index-popover, 10000);padding:var(--ml-hint-padding, .5rem .75rem);background:var(--ml-hint-bg, #ffffff);border:var(--ml-hint-border, 1px solid #e5e7eb);border-radius:var(--ml-hint-border-radius, .375rem);box-shadow:var(--ml-hint-box-shadow, 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -2px rgba(0, 0, 0, .1));font-size:var(--ml-hint-font-size, .75rem);color:var(--ml-hint-color, #6b7280);line-height:var(--ml-line-height-relaxed, 1.4);max-width:100%}.ml__hint--visible{display:block}.ml__dropdown{display:none;position:absolute;z-index:var(--ml-z-index-dropdown, 9999);background:var(--ml-dropdown-bg, #ffffff);border:var(--ml-dropdown-border, 1px solid #e5e7eb);border-radius:var(--ml-dropdown-border-radius, .375rem);box-shadow:var(--ml-dropdown-box-shadow, 0 20px 25px -5px rgba(0, 0, 0, .1), 0 8px 10px -6px rgba(0, 0, 0, .1));max-height:var(--ml-dropdown-max-height, 20rem);overflow-y:auto;color:var(--ml-dropdown-color, #111827)}.ml__dropdown--visible{display:block}.ml__actions{display:flex;gap:var(--ml-actions-gap, .25rem);padding:var(--ml-actions-padding, .5rem);border-bottom:var(--ml-actions-border-bottom, 1px solid #e5e7eb)}.ml__actions--sticky{position:sticky;top:0;z-index:var(--ml-z-index-sticky, 1);background:var(--ml-actions-bg, #ffffff)}.ml__action-btn{flex:1;padding:var(--ml-action-btn-padding, .25rem .5rem);font-size:var(--ml-action-btn-font-size, .75rem);border:var(--ml-action-btn-border, 1px solid #e5e7eb);border-radius:var(--ml-action-btn-border-radius, .25rem);background:var(--ml-action-btn-bg, transparent);color:var(--ml-action-btn-color, inherit);cursor:pointer;transition:all var(--ml-transition-fast, .15s) var(--ml-easing-snappy, cubic-bezier(.4, 0, .2, 1))}.ml__action-btn:hover{background:var(--ml-action-btn-bg-hover, #f3f4f6);border-color:var(--ml-action-btn-border-color-hover, #3b82f6)}.ml__action-btn:active{transform:scale(var(--ml-transform-scale-active, .98))}.ml__options{padding:var(--ml-options-padding, .25rem 0)}.ml__group+.ml__group{border-top:var(--ml-group-border-top, 1px solid #e5e7eb);margin-top:var(--ml-group-margin-top, .25rem);padding-top:var(--ml-group-padding-top, .25rem)}.ml__group-label{padding:var(--ml-group-label-padding, .25rem .75rem);font-size:var(--ml-group-label-font-size, .75rem);font-weight:var(--ml-group-label-font-weight, 600);color:var(--ml-group-label-color, #6b7280);text-transform:var(--ml-group-label-transform, uppercase);letter-spacing:var(--ml-group-label-letter-spacing, .05em)}.ml__option{display:flex;align-items:flex-start;gap:var(--ml-option-gap, .5rem);padding:var(--ml-option-padding, .5rem .75rem);cursor:pointer;transition:background-color var(--ml-transition-fast, .15s) var(--ml-easing-snappy, cubic-bezier(.4, 0, .2, 1))}.ml__option:hover{background:var(--ml-option-bg-hover, #f9fafb)}.ml__option--focused{background:var(--ml-option-bg-focused, #f9fafb);outline:var(--ml-option-outline-focused, 2px solid #3b82f6);outline-offset:var(--ml-option-focus-outline-offset, -2px)}.ml__option--selected{background:var(--ml-option-bg-selected, rgba(59, 130, 246, .1))}.ml__option--disabled{opacity:var(--ml-disabled-opacity, .5);cursor:not-allowed}.ml__option--disabled:hover{background:var(--ml-option-bg, transparent)}.ml__checkbox{flex-shrink:0;margin-top:var(--ml-checkbox-margin-top, .125rem);cursor:pointer}.ml__option--disabled .ml__checkbox{cursor:not-allowed}.ml__option-content{flex:1;display:flex;align-items:flex-start;gap:var(--ml-option-content-gap, .5rem);min-width:0}.ml__option-icon{flex-shrink:0;width:var(--ml-option-icon-size, 1.25rem);height:var(--ml-option-icon-size, 1.25rem);display:flex;align-items:center;justify-content:center;font-size:var(--ml-option-icon-font-size, 1rem)}.ml__option-icon svg{width:100%;height:100%;fill:currentColor}.ml__option-text{flex:1;min-width:0}.ml__option-title{font-size:var(--ml-option-title-font-size, .875rem);color:var(--ml-option-title-color, inherit);line-height:var(--ml-line-height-relaxed, 1.4)}.ml__option-title mark{background:var(--ml-option-mark-bg, rgba(59, 130, 246, .2));color:var(--ml-option-mark-color, inherit);font-weight:var(--ml-option-mark-font-weight, 600)}.ml__option-subtitle{margin-top:var(--ml-option-subtitle-margin-top, .25rem);font-size:var(--ml-option-subtitle-font-size, .75rem);color:var(--ml-option-subtitle-color, #6b7280);line-height:var(--ml-option-subtitle-line-height, 1.3)}.ml__empty{padding:var(--ml-empty-padding, 1rem .75rem);text-align:center;font-size:var(--ml-empty-font-size, .875rem);color:var(--ml-empty-color, #6b7280)}.ml__loader{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--ml-loader-padding, 1rem);gap:var(--ml-loader-gap, .5rem)}.ml__loading-text{font-size:var(--ml-loading-text-font-size, .875rem);color:var(--ml-loading-text-color, #6b7280)}.ml__pills{display:flex;flex-wrap:wrap;gap:var(--ml-pills-gap, .5rem);padding:0}.ml__pills:empty{display:none}.ml__pills--bottom{margin-top:var(--ml-pills-margin-bottom, .5rem)}.ml__pills--top{margin-bottom:var(--ml-pills-margin-top, .5rem);order:var(--ml-order-first, -1)}.ml__pills--left{order:var(--ml-order-first, -1);margin-right:var(--ml-pills-margin-left, .5rem);justify-content:flex-start}.ml__pills--right{margin-left:var(--ml-pills-margin-right, .5rem);justify-content:flex-end}.ml__count-display{display:flex;align-items:center}.ml__count-display:empty{display:none}.ml__count-display--bottom{margin-top:var(--ml-count-display-margin-bottom, .5rem)}.ml__count-display--top{margin-bottom:var(--ml-count-display-margin-top, .5rem);order:var(--ml-order-first, -1)}.ml__count-display--left{order:var(--ml-order-first, -1);margin-right:var(--ml-count-display-margin-left, .5rem);justify-content:flex-start}.ml__count-display--right{margin-left:var(--ml-count-display-margin-right, .5rem);justify-content:flex-end}.ml__count-badge-wrapper{display:inline-flex;align-items:center;gap:var(--ml-count-badge-wrapper-gap, .25rem);background:var(--ml-count-badge-wrapper-bg, transparent);border:var(--ml-count-badge-wrapper-border, 1px solid #e5e7eb);border-radius:var(--ml-count-badge-wrapper-border-radius, .25rem);padding:var(--ml-count-badge-wrapper-padding, .25rem .5rem);transition:all var(--ml-transition-fast, .15s) var(--ml-easing-snappy, cubic-bezier(.4, 0, .2, 1))}.ml__count-badge-wrapper:hover{background:var(--ml-count-badge-wrapper-bg-hover, #f9fafb);border-color:var(--ml-count-badge-wrapper-border-color-hover, #3b82f6)}.ml__count-text{display:inline-flex;align-items:center;background:var(--ml-count-text-bg, transparent);border:var(--ml-count-text-border, none);padding:0;font-size:var(--ml-count-text-font-size, .875rem);color:var(--ml-count-text-color, #111827);cursor:pointer;transition:color var(--ml-transition-fast, .15s) var(--ml-easing-snappy, cubic-bezier(.4, 0, .2, 1))}.ml__count-clear{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:var(--ml-count-clear-size, 1rem);height:var(--ml-count-clear-size, 1rem);padding:0;border:none;background:var(--ml-count-clear-bg, transparent);color:var(--ml-count-clear-color, #6b7280);font-size:var(--ml-count-clear-font-size, 1.125rem);line-height:var(--ml-line-height-none, 1);cursor:pointer;border-radius:var(--ml-count-clear-border-radius, 50%);transition:all var(--ml-transition-fast, .15s) var(--ml-easing-snappy, cubic-bezier(.4, 0, .2, 1))}.ml__count-clear:hover{background:var(--ml-count-clear-bg-hover, rgba(59, 130, 246, .2));color:var(--ml-count-clear-color-hover, #3b82f6)}.ml__count-clear:before{content:var(--ml-icon-clear, "×")}.ml__pill{display:inline-flex;align-items:center;height:var(--ml-pill-height, 1.5rem);font-size:var(--ml-pill-font-size, .75rem);font-weight:var(--ml-pill-font-weight, 600);line-height:var(--ml-line-height-none, 1);border-radius:var(--ml-pill-border-radius, .375rem);overflow:hidden;max-width:100%}.ml__pill-text{display:flex;align-items:center;height:100%;padding:var(--ml-pill-text-padding, 0 .5rem);background:var(--ml-pill-text-bg, #eff6ff);color:var(--ml-pill-text-color, #3b82f6);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transition:background-color var(--ml-transition-normal, .2s) ease}.ml__pill-remove{display:flex;align-items:center;justify-content:center;width:var(--ml-pill-remove-width, 1.5rem);height:100%;flex-shrink:0;background:var(--ml-pill-remove-bg, #3b82f6);color:var(--ml-pill-remove-color, #ffffff);border:var(--ml-pill-remove-border, none);cursor:pointer;transition:background-color var(--ml-transition-normal, .2s) ease;font-size:var(--ml-pill-remove-font-size, .75rem)}.ml__pill-remove:hover{background:var(--ml-pill-remove-bg-hover, #2563eb)}.ml__pill-remove:focus{outline:none;box-shadow:var(--ml-pill-remove-box-shadow-focus, 0 0 0 2px rgba(59, 130, 246, .5))}.ml__pill-remove:before{content:var(--ml-icon-remove, "×");font-size:var(--ml-font-size-base, 1rem);line-height:var(--ml-line-height-none, 1)}.ml__pill--more{cursor:pointer}.ml__pill--more .ml__pill-text{background:var(--ml-more-badge-bg, #eff6ff);font-weight:var(--ml-pill-font-weight, 600)}.ml__pill--more:hover .ml__pill-text{background:var(--ml-more-badge-hover-bg, #ffffff)}.ml__pill--more:active .ml__pill-text{background:var(--ml-more-badge-active-bg, #e0f2fe)}.ml__pill-tooltip{position:fixed;z-index:var(--ml-tooltip-z-index, 10000);opacity:0;visibility:hidden;transition:opacity var(--ml-transition-normal, .2s) ease,visibility var(--ml-transition-normal, .2s) ease;background:var(--ml-tooltip-bg, #333);color:var(--ml-tooltip-color, #fff);padding:var(--ml-tooltip-padding, .5rem .75rem);border-radius:var(--ml-tooltip-border-radius, .375rem);font-size:var(--ml-tooltip-font-size, .875rem);line-height:var(--ml-line-height-relaxed, 1.4);max-width:var(--ml-tooltip-max-width, 20rem);word-wrap:break-word;white-space:pre-wrap;box-shadow:var(--ml-tooltip-shadow, 0 2px 8px rgba(0, 0, 0, .15));pointer-events:none}.ml__pill-tooltip--visible{opacity:1;visibility:visible}.ml__selected-popover{display:none;position:absolute;z-index:var(--ml-z-index-popover, 10000);background:var(--ml-selected-popover-bg, #ffffff);border:var(--ml-selected-popover-border, 1px solid #e5e7eb);border-radius:var(--ml-selected-popover-border-radius, .375rem);box-shadow:var(--ml-selected-popover-box-shadow, 0 20px 25px -5px rgba(0, 0, 0, .1), 0 8px 10px -6px rgba(0, 0, 0, .1));width:var(--ml-selected-popover-width, 20rem);max-height:var(--ml-selected-popover-max-height, 20rem);overflow:hidden}.ml__selected-popover--visible{display:flex;flex-direction:column}.ml__selected-popover-header{display:flex;align-items:center;justify-content:space-between;padding:var(--ml-selected-popover-header-padding, .5rem .75rem);background:var(--ml-selected-popover-header-bg, rgba(59, 130, 246, .1));border-bottom:var(--ml-selected-popover-header-border-bottom, 1px solid #e5e7eb);font-size:var(--ml-selected-popover-header-font-size, .875rem);font-weight:var(--ml-selected-popover-header-font-weight, 600);color:var(--ml-selected-popover-header-color, #111827)}.ml__selected-popover-close{display:flex;align-items:center;justify-content:center;width:var(--ml-popover-close-size, 1.5rem);height:var(--ml-popover-close-size, 1.5rem);padding:0;border:none;background:var(--ml-selected-popover-close-bg, transparent);color:var(--ml-selected-popover-close-color, #6b7280);font-size:var(--ml-selected-popover-close-font-size, 1.25rem);line-height:var(--ml-line-height-none, 1);cursor:pointer;border-radius:var(--ml-selected-popover-close-border-radius, 50%);transition:all var(--ml-transition-fast, .15s) var(--ml-easing-snappy, cubic-bezier(.4, 0, .2, 1))}.ml__selected-popover-close:hover{background:var(--ml-selected-popover-close-bg-hover, rgba(59, 130, 246, .2));color:var(--ml-selected-popover-close-color-hover, #3b82f6)}.ml__selected-popover-body{display:flex;flex-direction:column;gap:var(--ml-selected-popover-body-gap, .25rem);padding:var(--ml-selected-popover-body-padding, .5rem);overflow-y:auto;max-height:var(--ml-selected-popover-body-max-height, 18rem)}.ml__selected-popover-body .ml__pill{width:100%}.ml__selected-popover-body .ml__pill-text{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}.ml--xs .ml__input{font-size:var(--ml-font-size-xs, .75rem)}.ml--xs .ml__option{padding:var(--ml-spacing-xs, .25rem) var(--ml-spacing-sm, .5rem)}.ml--xs .ml__option-title{font-size:var(--ml-font-size-xs, .75rem)}.ml--xs .ml__pill{font-size:var(--ml-font-size-2xs, .625rem)}.ml--sm .ml__input,.ml--sm .ml__option-title{font-size:var(--ml-font-size-xs, .75rem)}.ml--lg .ml__input,.ml--lg .ml__option-title{font-size:var(--ml-font-size-base, 1rem)}.ml--lg .ml__pill{font-size:var(--ml-font-size-sm, .875rem)}.ml--xl .ml__input,.ml--xl .ml__option-title{font-size:var(--ml-font-size-lg, 1.125rem)}.ml--xl .ml__pill{font-size:var(--ml-font-size-base, 1rem)}.ml--disabled .ml__input{opacity:var(--ml-disabled-input-opacity, .6);cursor:not-allowed;background:var(--ml-input-bg-disabled, rgba(107, 114, 128, .05))}.ml--disabled .ml__toggle{opacity:var(--ml-disabled-input-opacity, .6)}.ml--no-checkboxes .ml__option{gap:0;padding-left:var(--ml-option-padding-h, .75rem)}.ml--no-checkboxes .ml__option-content{padding-left:0}.ml-debug-info{margin-top:.25rem;padding:.25rem;background-color:#f9fafb;border:1px solid #e5e7eb;border-radius:.375rem;font-size:.75rem;color:#111827}.ml-debug-info details summary{cursor:pointer;font-weight:600;color:#2563eb;-webkit-user-select:none;user-select:none;padding:.25rem;border-radius:.25rem}.ml-debug-info details summary:hover{background-color:#f3f4f6}.ml-debug-info details summary:focus{outline:2px solid #3b82f6;outline-offset:2px}.ml-debug-info .ml-debug-stats{display:flex;flex-direction:column;gap:.25rem;margin-top:.25rem;padding:.25rem;background-color:#fff;border-radius:.25rem}.ml-debug-info .ml-debug-stats span{display:flex;justify-content:space-between;padding:2px 4px;font-family:monospace;font-size:.625rem}.ml-debug-info .ml-debug-stats span:before{content:"•";margin-right:.25rem;color:#3b82f6}

package/dist/types.d.ts

@@ -0,0 +1,187 @@
+/**
+ * Type definitions for the MultiSelect component
+ */
+import type { Placement } from '@floating-ui/dom';
+/**
+ * Position of the pills container relative to the input
+ */
+export type PillsPosition = 'top' | 'bottom' | 'left' | 'right';
+/**
+ * Search input display mode
+ */
+export type SearchInputMode = 'normal' | 'readonly' | 'hidden';
+/**
+ * Value format for serialization (forms and callbacks)
+ */
+export type ValueFormat = 'json' | 'csv' | 'array';
+/**
+ * Threshold behavior mode when pills exceed threshold
+ */
+export type PillsThresholdMode = 'count' | 'partial';
+/**
+ * Display mode for selected items (pills area)
+ */
+export type PillsDisplayMode = 'pills' | 'count' | 'compact' | 'partial';
+/**
+ * Support both object arrays and [key, value] tuples
+ */
+export type MultiSelectDataItem<T> = T | [string | number, string];
+/**
+ * Generic configuration options for the MultiSelect component
+ * @template T The type of data items
+ */
+export interface MultiSelectConfig<T = any> {
+    /** Options array - can be objects or [key, value] tuples */
+    options?: T[];
+    /** Member property name for value/ID extraction */
+    valueMember?: string;
+    /** Callback to extract value/ID from item */
+    getValueCallback?: (item: T) => string | number;
+    /** Member property name for display value extraction */
+    displayValueMember?: string;
+    /** Callback to extract display value from item */
+    getDisplayValueCallback?: (item: T) => string;
+    /** Member property name for search value extraction */
+    searchValueMember?: string;
+    /** Callback to extract search value from item */
+    getSearchValueCallback?: (item: T) => string;
+    /** Member property name for icon extraction */
+    iconMember?: string;
+    /** Callback to extract icon from item */
+    getIconCallback?: (item: T) => string;
+    /** Member property name for subtitle extraction */
+    subtitleMember?: string;
+    /** Callback to extract subtitle from item */
+    getSubtitleCallback?: (item: T) => string;
+    /** Member property name for group extraction */
+    groupMember?: string;
+    /** Callback to extract group from item */
+    getGroupCallback?: (item: T) => string;
+    /** Member property name for disabled state extraction */
+    disabledMember?: string;
+    /** Callback to extract disabled state from item */
+    getDisabledCallback?: (item: T) => boolean;
+    /** HTML form field ID/name for hidden input */
+    formFieldId?: string;
+    /** Format for value serialization (forms and callbacks) */
+    valueFormat?: ValueFormat;
+    /** Custom callback to format value */
+    getValueFormatCallback?: (selectedValues: (string | number)[]) => string;
+    /** Allow multiple selections (internal: isMultipleEnabled) */
+    isMultipleEnabled?: boolean;
+    /** Enable search/filtering (internal: isSearchEnabled) */
+    isSearchEnabled?: boolean;
+    /** Allow grouping of options (internal: isGroupsAllowed) */
+    isGroupsAllowed?: boolean;
+    /** Show 'Select All' button (internal: isSelectAllAllowed) */
+    isSelectAllAllowed?: boolean;
+    /** Show 'Clear All' button (internal: isClearAllAllowed) */
+    isClearAllAllowed?: boolean;
+    /** Show checkboxes next to options (internal: isCheckboxesShown) */
+    isCheckboxesShown?: boolean;
+    /** Keep Select All/Clear All buttons fixed at top while scrolling (internal: isActionsSticky) */
+    isActionsSticky?: boolean;
+    /** Close dropdown after selecting an option (internal: isCloseOnSelect) */
+    isCloseOnSelect?: boolean;
+    /** Lock dropdown placement after first open (internal: isPlacementLocked) */
+    isPlacementLocked?: boolean;
+    /** Allow adding new options not in the list (internal: isAddNewAllowed) */
+    isAddNewAllowed?: boolean;
+    /** Show count badge next to toggle icon (internal: isCountBadgeShown) */
+    isCountBadgeShown?: boolean;
+    /** Hint text shown above the input when focused */
+    searchHint?: string;
+    /** Placeholder text for the search input */
+    searchPlaceholder?: string;
+    /** Minimum width for the dropdown (e.g., '20rem', '300px') */
+    dropdownMinWidth?: string | null;
+    /** Display mode for selected items in pills area */
+    pillsDisplayMode?: PillsDisplayMode;
+    /** Position of pills container */
+    pillsPosition?: PillsPosition;
+    /** Threshold behavior mode: 'count' shows count badge, 'partial' shows limited pills + more badge */
+    pillsThresholdMode?: PillsThresholdMode;
+    /** Maximum height for dropdown */
+    maxHeight?: string;
+    /** Message shown when no results found */
+    emptyMessage?: string;
+    /** Message shown while loading async data */
+    loadingMessage?: string;
+    /** Search input display mode */
+    searchInputMode?: SearchInputMode;
+    /** Auto-switch from pills to count when threshold is exceeded */
+    pillsThreshold?: number | null;
+    /** Maximum number of pills to show in partial mode (used with thresholdMode='partial') */
+    pillsMaxVisible?: number | null;
+    /** Minimum search length before loading data */
+    minSearchLength?: number;
+    /** Async function to load data: (searchTerm) => Promise<options[]> */
+    searchCallback?: ((searchTerm: string) => Promise<T[]>) | null;
+    /** Callback to add a new option when isAddNewAllowed is true */
+    addNewCallback?: ((value: string) => T | Promise<T>) | null;
+    /** Callback when an option is selected */
+    selectCallback?: ((option: T) => void) | null;
+    /** Callback when an option is deselected */
+    deselectCallback?: ((option: T) => void) | null;
+    /** Callback when selection changes */
+    changeCallback?: ((selectedOptions: T[]) => void) | null;
+    /** Callback to format count pill text (for i18n/pluralization). When moreCount is provided, it's for the "+X more" badge in partial mode. */
+    getCountPillCallback?: ((count: number, moreCount?: number) => string) | null;
+    /** Enable tooltips on selected item pills (internal: isPillTooltipsEnabled) */
+    isPillTooltipsEnabled?: boolean;
+    /** Callback to generate custom tooltip content for a pill */
+    getPillTooltipCallback?: ((item: T) => string | HTMLElement) | null;
+    /** Tooltip placement relative to pill */
+    pillTooltipPlacement?: Placement;
+    /** Delay before showing tooltip in milliseconds */
+    pillTooltipDelay?: number;
+    /** Offset distance for tooltip in pixels */
+    pillTooltipOffset?: number;
+    /** Container element for dropdown/hint/popover (for Shadow DOM support) */
+    container?: HTMLElement | null;
+    /** Host element for appending hidden inputs (for form integration with shadow DOM) */
+    hostElement?: HTMLElement;
+}
+/**
+ * Event detail structure for multiselect events
+ * @template T The type of data items
+ */
+export interface MultiSelectEventDetail<T = any> {
+    /** Currently selected options */
+    selectedOptions: T[];
+    /** Selected values array */
+    selectedValues: (string | number)[];
+    /** The option that triggered the event (for select/deselect) */
+    option?: T;
+}
+/**
+ * Legacy interface for backward reference
+ * Note: New code should use generic types with member/callback properties
+ * @deprecated Use generic types with valueMember/displayValueMember instead
+ */
+export interface MultiSelectOption {
+    /** Unique identifier for the option */
+    value: string;
+    /** Display label */
+    label: string;
+    /** Optional icon or emoji */
+    icon?: string;
+    /** Optional subtitle/description */
+    subtitle?: string;
+    /** Optional group name */
+    group?: string;
+    /** Whether the option is disabled */
+    disabled?: boolean;
+}
+/**
+ * Legacy options interface
+ * @deprecated Use MultiSelectConfig<T> instead
+ */
+export interface MultiSelectOptions extends MultiSelectConfig<MultiSelectOption> {
+    options?: MultiSelectOption[];
+    searchCallback?: ((searchTerm: string) => Promise<MultiSelectOption[]>) | null;
+    addNewCallback?: ((value: string) => MultiSelectOption | Promise<MultiSelectOption>) | null;
+    selectCallback?: ((option: MultiSelectOption) => void) | null;
+    deselectCallback?: ((option: MultiSelectOption) => void) | null;
+    changeCallback?: ((selectedOptions: MultiSelectOption[]) => void) | null;
+}

package/dist/web-component.d.ts

@@ -0,0 +1,103 @@
+export declare function getAllInstances(): MultiSelectElement[];
+export declare class MultiSelectElement<T = any> extends HTMLElement {
+    private picker?;
+    private containerElement?;
+    private shadow;
+    private _options?;
+    private _valueMember?;
+    private _getValueCallback?;
+    private _displayValueMember?;
+    private _getDisplayValueCallback?;
+    private _searchValueMember?;
+    private _getSearchValueCallback?;
+    private _iconMember?;
+    private _getIconCallback?;
+    private _subtitleMember?;
+    private _getSubtitleCallback?;
+    private _groupMember?;
+    private _getGroupCallback?;
+    private _disabledMember?;
+    private _getDisabledCallback?;
+    private _getValueFormatCallback?;
+    private _getPillTooltipCallback?;
+    private _getCountPillCallback?;
+    private _searchCallback?;
+    private _addNewCallback?;
+    private _selectCallback?;
+    private _deselectCallback?;
+    private _changeCallback?;
+    static get observedAttributes(): string[];
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
+    private render;
+    private renderDebugInfo;
+    private updateDebugInfo;
+    private initializePicker;
+    private reinitialize;
+    get options(): T[] | undefined;
+    set options(value: T[] | undefined);
+    set valueMember(value: string | null);
+    get valueMember(): string | null;
+    set displayValueMember(value: string | null);
+    get displayValueMember(): string | null;
+    set searchValueMember(value: string | null);
+    get searchValueMember(): string | null;
+    set iconMember(value: string | null);
+    get iconMember(): string | null;
+    set subtitleMember(value: string | null);
+    get subtitleMember(): string | null;
+    set groupMember(value: string | null);
+    get groupMember(): string | null;
+    set disabledMember(value: string | null);
+    get disabledMember(): string | null;
+    set getValueCallback(callback: ((item: T) => string | number) | undefined);
+    get getValueCallback(): ((item: T) => string | number) | undefined;
+    set getDisplayValueCallback(callback: ((item: T) => string) | undefined);
+    get getDisplayValueCallback(): ((item: T) => string) | undefined;
+    set getSearchValueCallback(callback: ((item: T) => string) | undefined);
+    get getSearchValueCallback(): ((item: T) => string) | undefined;
+    set getIconCallback(callback: ((item: T) => string) | undefined);
+    get getIconCallback(): ((item: T) => string) | undefined;
+    set getSubtitleCallback(callback: ((item: T) => string) | undefined);
+    get getSubtitleCallback(): ((item: T) => string) | undefined;
+    set getGroupCallback(callback: ((item: T) => string) | undefined);
+    get getGroupCallback(): ((item: T) => string) | undefined;
+    set getDisabledCallback(callback: ((item: T) => boolean) | undefined);
+    get getDisabledCallback(): ((item: T) => boolean) | undefined;
+    set name(value: string | null);
+    get name(): string | null;
+    set valueFormat(value: 'json' | 'csv' | 'array' | null);
+    get valueFormat(): string | null;
+    set getValueFormatCallback(callback: ((values: (string | number)[]) => string) | undefined);
+    get getValueFormatCallback(): ((values: (string | number)[]) => string) | undefined;
+    set thresholdMode(value: 'count' | 'partial' | null);
+    get thresholdMode(): string | null;
+    set pillsMaxVisible(value: number | null);
+    get pillsMaxVisible(): number | null;
+    set enablePillTooltips(value: boolean);
+    get enablePillTooltips(): boolean;
+    set pillTooltipPlacement(value: string | null);
+    get pillTooltipPlacement(): string | null;
+    set getPillTooltipCallback(callback: ((item: T) => string | HTMLElement) | undefined);
+    get getPillTooltipCallback(): ((item: T) => string | HTMLElement) | undefined;
+    set getCountPillCallback(callback: ((count: number, moreCount?: number) => string) | undefined);
+    get getCountPillCallback(): ((count: number, moreCount?: number) => string) | undefined;
+    get searchCallback(): ((searchTerm: string) => Promise<T[]>) | undefined;
+    set searchCallback(callback: ((searchTerm: string) => Promise<T[]>) | undefined);
+    get addNewCallback(): ((value: string) => T | Promise<T>) | undefined;
+    set addNewCallback(callback: ((value: string) => T | Promise<T>) | undefined);
+    get selectCallback(): ((option: T) => void) | undefined;
+    set selectCallback(callback: ((option: T) => void) | undefined);
+    get deselectCallback(): ((option: T) => void) | undefined;
+    set deselectCallback(callback: ((option: T) => void) | undefined);
+    get changeCallback(): ((selectedOptions: T[]) => void) | undefined;
+    set changeCallback(callback: ((selectedOptions: T[]) => void) | undefined);
+    get selectedValue(): string | number | (string | number)[] | null;
+    get selectedItem(): T | null;
+    getSelected(): T[];
+    setSelected(values: (string | number)[]): void;
+    getValue(): string | number | (string | number)[] | null;
+    destroy(): void;
+}