@cas-smartdesign/token-selector 0.17.0 → 0.17.1

package/dist/docs/doc.mjs

@@ -549,7 +549,7 @@ export function getItems(): ExtendedTokenData[] {
   <path d="M0 0l11.96 12L24 0z" fill="#999" class="arrow-border"/>\r
   <path d="M12 11L1 0h22z" fill="#f2f2f2" class="arrow-background"/>\r
 </svg>\r
-`,Al=navigator.userAgent.indexOf("Trident")!==-1,ps=1,fs="sd-popover-open",sr=class extends HTMLElement{constructor(){super(...arguments),this._open=!1,this._firstUpdated=!1,this.toggle=()=>{this.open=!this.open},this.show=()=>{this.open=!0},this.hide=()=>{this.open=!1},this.hideIfExternalTarget=e=>{const t=e.target;(!(t instanceof HTMLElement)||!this._container.contains(t)&&!this.targetElement.contains(t))&&this.hide()}}get triggerType(){return this.getAttribute("trigger-type")}set triggerType(e){e?this.setAttribute("trigger-type",e):this.removeAttribute("trigger-type")}get placement(){return this.getAttribute("placement")}set placement(e){e?this.setAttribute("placement",e):this.removeAttribute("placement")}get targetElement(){return this._targetElement}set targetElement(e){this.removeTargetEventListener(this.targetElement),this._targetElement&&this._targetElement.getAttribute("aria-expanded")=="true"&&this._targetElement.setAttribute("aria-expanded","false"),this._targetElement=e,e.setAttribute("aria-expanded","false"),this.addTargetEventListener(this.targetElement),this.updatePopper()}get targetSelector(){return this.getAttribute("target-selector")}set targetSelector(e){e?this.setAttribute("target-selector",e):this.removeAttribute("target-selector")}get modal(){return this.hasAttribute("modal")}set modal(e){e?this.setAttribute("modal",""):this.removeAttribute("modal")}get popoverFor(){return this.getAttribute("popover-for")}set popoverFor(e){e?this.setAttribute("popover-for",e):this.removeAttribute("popover-for")}get flipPriority(){return this._flipPriority}set flipPriority(e){e&&e.length>0?this._flipPriority=e:this._flipPriority=null,this.reConfigurePopper()}get offset(){return this.getAttribute("offset")?parseInt(this.getAttribute("offset")):0}set offset(e){e?this.setAttribute("offset",e.toString()):this.removeAttribute("offset"),this.reConfigurePopper()}reConfigurePopper(){this._popper&&this.configurePopper()}get noArrow(){return this.hasAttribute("no-arrow")}set noArrow(e){e?this.setAttribute("no-arrow",""):this.removeAttribute("no-arrow")}static get observedAttributes(){return["placement","target-selector","trigger-type"]}attributeChangedCallback(e,t){switch(e){case"placement":{this.updatePopper();break}case"trigger-type":{this.removeTargetEventListener(this.targetElement),this.addTargetEventListener(this.targetElement);break}case"target-selector":{this.handleTargetSelectorChange(t);break}}}connectedCallback(){this._firstUpdated||(this.firstUpdated(),this._firstUpdated=!0),this.targetElement?this.addTargetEventListener(this.targetElement):this.targetSelector&&requestAnimationFrame(()=>{this.isConnected&&this.handleTargetSelectorChange(null)}),this._arrow=document.createElement("div"),this._arrow.classList.add("popover-arrow"),this._arrow.setAttribute("data-popper-arrow",""),this._arrow.style.display="flex",this._arrow.innerHTML=_l}disconnectedCallback(){this.targetElement&&(this.removeTargetEventListener(this.targetElement),this.removeTargetClassForOpen(this.targetElement)),this._resizeObserver&&(this._resizeObserver.disconnect(),this._resizeObserver=null)}firstUpdated(){this.style.display="none",this.triggerType=this.triggerType||"click",this.placement=this.placement||"auto"}get open(){return this._open}set open(e){e!==this._open&&(this._open=e,this.handleOpenChange())}handleOpenChange(){this.open?(this._popper||this.configurePopper(),this._container.innerHTML="",this.popoverFor&&this._container.setAttribute("popover-for",this.popoverFor),this.content&&(this._container.prepend(this.content),Object.assign(this.content.style,{position:"relative",display:"block",zIndex:1}),window.requestAnimationFrame(()=>{let e=getComputedStyle(this.content).backgroundColor;e=="rgba(0, 0, 0, 0)"&&(this.content.style.background=e="#f2f2f2"),this._arrow.querySelector(".arrow-background").style.fill=e})),this.ensureArrowIsAdded(),this.ownerDocument.body.appendChild(this._container),this.updatePopper(),this.setAttribute("open",""),this.modal&&(window.addEventListener("click",this.hideIfExternalTarget,{capture:!0}),window.addEventListener("focus",this.hideIfExternalTarget,{capture:!0})),this.targetElement&&(this.addTargetClassForOpen(this.targetElement),this.targetElement.setAttribute("aria-expanded","true")),this.dispatchEvent(new CustomEvent("open"))):(this.ownerDocument.body.removeChild(this._container),this.removeAttribute("open"),window.removeEventListener("click",this.hideIfExternalTarget,{capture:!0}),window.removeEventListener("focus",this.hideIfExternalTarget,{capture:!0}),this.targetElement&&(this.removeTargetClassForOpen(this.targetElement),this.targetElement.setAttribute("aria-expanded","false")),this.dispatchEvent(new CustomEvent("close")))}handleTargetSelectorChange(e){const t=document.querySelector(e);t&&(this.removeTargetEventListener(t),this.removeTargetClassForOpen(t)),this.targetSelector&&(this.targetElement=document.querySelector(this.targetSelector),this.addTargetEventListener(this.targetElement))}addTargetEventListener(e){if(e)switch(this.triggerType){case"hover":{e.addEventListener("mouseenter",this.show),e.addEventListener("mouseleave",this.hide);break}case"click":{e.addEventListener("click",this.toggle);break}}}removeTargetEventListener(e){if(e)switch(this.triggerType){case"hover":{e.removeEventListener("mouseenter",this.show),e.removeEventListener("mouseleave",this.hide);break}case"click":{e.removeEventListener("click",this.toggle);break}}}configurePopper(){this.createContentContainer(),this.ensureArrowIsAdded();const e=this,t={placement:e.placement,strategy:"absolute",modifiers:[{name:"computeStyles",options:{gpuAcceleration:!Al}},{name:"flip",options:{fallbackPlacements:e._flipPriority}},{name:"offset",options:{offset:()=>[0,e.noArrow?0+e.offset:this._arrow.clientHeight+e.offset]}},{name:"arrow",options:{padding:6}},{name:"resetArrowStyles",enabled:!0,phase:"beforeWrite",fn({state:n}){Object.assign(e._arrow.style,{top:n.styles.arrow.top||"",left:n.styles.arrow.left||"",bottom:n.styles.arrow.bottom||"",right:n.styles.arrow.right||""})}},{name:"onUpdate",enabled:!0,phase:"afterWrite",fn({state:n}){e.updateArrow(n.placement)}}]};this._popper=Sl(this.targetElement,this._container,t)}createContentContainer(){this._container=document.createElement("div"),this._container.classList.add("popover-container"),this._container.tabIndex=0,this._resizeObserver&&this._resizeObserver.disconnect(),this._resizeObserver=new ResizeObserver(()=>{this._popper&&this._popper.update()}),this._resizeObserver.observe(this._container),Object.assign(this._container.style,{boxShadow:`0 4px 5px 0 rgba(0, 0, 0, 0.14),
+`,Al=navigator.userAgent.indexOf("Trident")!==-1,ps=1,fs="sd-popover-open",sr=class extends HTMLElement{constructor(){super(...arguments),this._open=!1,this._firstUpdated=!1,this.toggle=()=>{this.open=!this.open},this.show=()=>{this.open=!0},this.hide=()=>{this.open=!1},this.hideIfExternalTarget=e=>{const t=e.target;(!(t instanceof HTMLElement)||!this._container.contains(t)&&!this.targetElement.contains(t))&&this.hide()}}get triggerType(){return this.getAttribute("trigger-type")}set triggerType(e){e?this.setAttribute("trigger-type",e):this.removeAttribute("trigger-type")}get placement(){return this.getAttribute("placement")}set placement(e){e?this.setAttribute("placement",e):this.removeAttribute("placement")}get targetElement(){return this._targetElement}set targetElement(e){this.removeTargetEventListener(this.targetElement),this._targetElement&&this._targetElement.getAttribute("aria-expanded")=="true"&&this._targetElement.setAttribute("aria-expanded","false"),this._targetElement=e,e&&e.setAttribute("aria-expanded","false"),this.addTargetEventListener(this.targetElement),this.updatePopper()}get targetSelector(){return this.getAttribute("target-selector")}set targetSelector(e){e?this.setAttribute("target-selector",e):this.removeAttribute("target-selector")}get modal(){return this.hasAttribute("modal")}set modal(e){e?this.setAttribute("modal",""):this.removeAttribute("modal")}get popoverFor(){return this.getAttribute("popover-for")}set popoverFor(e){e?this.setAttribute("popover-for",e):this.removeAttribute("popover-for")}get flipPriority(){return this._flipPriority}set flipPriority(e){e&&e.length>0?this._flipPriority=e:this._flipPriority=null,this.reConfigurePopper()}get offset(){return this.getAttribute("offset")?parseInt(this.getAttribute("offset")):0}set offset(e){e?this.setAttribute("offset",e.toString()):this.removeAttribute("offset"),this.reConfigurePopper()}reConfigurePopper(){this._popper&&this.configurePopper()}get noArrow(){return this.hasAttribute("no-arrow")}set noArrow(e){e?this.setAttribute("no-arrow",""):this.removeAttribute("no-arrow")}static get observedAttributes(){return["placement","target-selector","trigger-type"]}attributeChangedCallback(e,t){switch(e){case"placement":{this.updatePopper();break}case"trigger-type":{this.removeTargetEventListener(this.targetElement),this.addTargetEventListener(this.targetElement);break}case"target-selector":{this.handleTargetSelectorChange(t);break}}}connectedCallback(){this._firstUpdated||(this.firstUpdated(),this._firstUpdated=!0),this.targetElement?this.addTargetEventListener(this.targetElement):this.targetSelector&&requestAnimationFrame(()=>{this.isConnected&&this.handleTargetSelectorChange(null)}),this._arrow=document.createElement("div"),this._arrow.classList.add("popover-arrow"),this._arrow.setAttribute("data-popper-arrow",""),this._arrow.style.display="flex",this._arrow.innerHTML=_l}disconnectedCallback(){this.targetElement&&(this.removeTargetEventListener(this.targetElement),this.removeTargetClassForOpen(this.targetElement)),this._resizeObserver&&(this._resizeObserver.disconnect(),this._resizeObserver=null)}firstUpdated(){this.style.display="none",this.triggerType=this.triggerType||"click",this.placement=this.placement||"auto"}get open(){return this._open}set open(e){e!==this._open&&(this._open=e,this.handleOpenChange())}handleOpenChange(){this.open?(this._popper||this.configurePopper(),this._container.innerHTML="",this.popoverFor&&this._container.setAttribute("popover-for",this.popoverFor),this.content&&(this._container.prepend(this.content),Object.assign(this.content.style,{position:"relative",display:"block",zIndex:1}),window.requestAnimationFrame(()=>{let e=getComputedStyle(this.content).backgroundColor;e=="rgba(0, 0, 0, 0)"&&(this.content.style.background=e="#f2f2f2"),this._arrow.querySelector(".arrow-background").style.fill=e})),this.ensureArrowIsAdded(),this.ownerDocument.body.appendChild(this._container),this.updatePopper(),this.setAttribute("open",""),this.modal&&(window.addEventListener("click",this.hideIfExternalTarget,{capture:!0}),window.addEventListener("focus",this.hideIfExternalTarget,{capture:!0})),this.targetElement&&(this.addTargetClassForOpen(this.targetElement),this.targetElement.setAttribute("aria-expanded","true")),this.dispatchEvent(new CustomEvent("open"))):(this.ownerDocument.body.removeChild(this._container),this.removeAttribute("open"),window.removeEventListener("click",this.hideIfExternalTarget,{capture:!0}),window.removeEventListener("focus",this.hideIfExternalTarget,{capture:!0}),this.targetElement&&(this.removeTargetClassForOpen(this.targetElement),this.targetElement.setAttribute("aria-expanded","false")),this.dispatchEvent(new CustomEvent("close")))}handleTargetSelectorChange(e){const t=document.querySelector(e);t&&(this.removeTargetEventListener(t),this.removeTargetClassForOpen(t)),this.targetSelector&&(this.targetElement=document.querySelector(this.targetSelector),this.addTargetEventListener(this.targetElement))}addTargetEventListener(e){if(e)switch(this.triggerType){case"hover":{e.addEventListener("mouseenter",this.show),e.addEventListener("mouseleave",this.hide);break}case"click":{e.addEventListener("click",this.toggle);break}}}removeTargetEventListener(e){if(e)switch(this.triggerType){case"hover":{e.removeEventListener("mouseenter",this.show),e.removeEventListener("mouseleave",this.hide);break}case"click":{e.removeEventListener("click",this.toggle);break}}}configurePopper(){this.createContentContainer(),this.ensureArrowIsAdded();const e=this,t={placement:e.placement,strategy:"absolute",modifiers:[{name:"computeStyles",options:{gpuAcceleration:!Al}},{name:"flip",options:{fallbackPlacements:e._flipPriority}},{name:"offset",options:{offset:()=>[0,e.noArrow?0+e.offset:this._arrow.clientHeight+e.offset]}},{name:"arrow",options:{padding:6}},{name:"resetArrowStyles",enabled:!0,phase:"beforeWrite",fn({state:n}){Object.assign(e._arrow.style,{top:n.styles.arrow.top||"",left:n.styles.arrow.left||"",bottom:n.styles.arrow.bottom||"",right:n.styles.arrow.right||""})}},{name:"onUpdate",enabled:!0,phase:"afterWrite",fn({state:n}){e.updateArrow(n.placement)}}]};this._popper=Sl(this.targetElement,this._container,t)}createContentContainer(){this._container=document.createElement("div"),this._container.classList.add("popover-container"),this._container.tabIndex=0,this._resizeObserver&&this._resizeObserver.disconnect(),this._resizeObserver=new ResizeObserver(()=>{this._popper&&this._popper.update()}),this._resizeObserver.observe(this._container),Object.assign(this._container.style,{boxShadow:`0 4px 5px 0 rgba(0, 0, 0, 0.14),
                         0 1px 10px 0 rgba(0, 0, 0, 0.12),
                         0 2px 4px -1px rgba(0, 0, 0, 0.4)`,border:"1px solid #999",boxSizing:"border-box",zIndex:2e4})}ensureArrowIsAdded(){!this.noArrow&&!this._container.contains(this._arrow)&&this._container.appendChild(this._arrow)}updatePopper(){this._popper&&(this._popper.state.elements.reference=this.targetElement,this._popper.state.options.placement=this.placement,this.open&&this._popper.update())}updateArrow(e){if(this._arrow){const t=this.getArrowVariant(e);if(this._arrow.setAttribute("variant",t),this._content){const n=this._arrow.querySelector("svg"),s=this._arrow.clientWidth,r=this._arrow.clientHeight,o=`-${r-ps}px`,a=(s-r)/2,l=`-${r+a-ps}px`;switch(t){case"bottom":{this._arrow.style.top=o,n.style.transform="rotate(180deg)";break}case"top":{this._arrow.style.bottom=o,n.style.transform="rotate(0deg)";break}case"left":{this._arrow.style.right=l,n.style.transform="rotate(270deg)";break}case"right":{this._arrow.style.left=l,n.style.transform="rotate(90deg)";break}}}}}getArrowVariant(e){if(e.indexOf("bottom")!==-1)return"bottom";if(e.indexOf("top")!==-1)return"top";if(e.indexOf("left")!==-1)return"left";if(e.indexOf("right")!==-1)return"right"}get content(){return this._content||(this._content=this.firstElementChild,this._content.setAttribute("data-popper-content","")),this._content}addTargetClassForOpen(e){e&&e.classList.add(fs)}removeTargetClassForOpen(e){e&&e.classList.remove(fs)}};sr.ID="sd-popover";let hn=sr;customElements.get(hn.ID)||customElements.define(hn.ID,hn);class $l{getOffsetForIndexAndAlignment(e,t,n,s,r,o){const a=Math.max(0,o*s),l=Math.min(a,e*s),c=Math.max(0,e*s-r+s);switch(t){case"start":return l;case"end":return c;case"center":{const d=Math.round(c+(l-c)/2);return d<Math.ceil(r/2)?0:d>a+Math.floor(r/2)?a:d}case"auto":default:return n>=c&&n<=l?n:n<c?c:l}}debounce(e){let t;return(...n)=>{t&&window.cancelAnimationFrame(t),t=window.requestAnimationFrame(()=>{e(...n),t=null})}}}const Cl=new $l,Il=":host{display:block;position:relative;contain:layout}:host(:focus){outline:none}:host(:focus-visible) ::slotted([focused]){box-shadow:0 0 0 1px #1467ba inset}.container{width:100%}.container>::slotted(*){width:100%;position:absolute;box-sizing:border-box}.container>::slotted(:not([last])){border-bottom:1px solid #d9d9d9}";var Ol=Object.defineProperty,Tl=Object.getOwnPropertyDescriptor,Ne=(i,e,t,n)=>{for(var s=n>1?void 0:n?Tl(e,t):e,r=i.length-1,o;r>=0;r--)(o=i[r])&&(s=(n?o(e,t,s):o(s))||s);return n&&s&&Ol(e,t,s),s};let Ll=0;var Re;const Te=(Re=class extends ue{constructor(){super(),this.items=[],this.selectionType="trigger-only",this.id=Re.ID+"_"+Ll++,this.role="listbox",this.itemGenerator=Ks,this._lastKnownScrollTop=0,this._lastRenderedScrollTop=0,this._itemsRenderData=[],this._elementCache=new Map,this._visibleItemsNum=0,this._selectedIndices=[],this._focusIndex=-1,this._lastKnownHeight=0,this.onScroll=()=>{this._lastKnownScrollTop=this.scrollTop;const i=this._lastRenderedScrollTop-this._lastKnownScrollTop;Math.abs(i)>=this.itemHeight&&(this._lastRenderedScrollTop=this._lastKnownScrollTop,this.requestUpdate())},this.handleKeyDown=i=>{let e=!0;switch(i.key){case"Down":case"ArrowDown":this.focusIndex=this.normalizeIndex(this.focusIndex+1);break;case"Up":case"ArrowUp":this.focusIndex=this.normalizeIndex(this.focusIndex-1);break;case"Enter":this.handleSelection(this.focusIndex,i.metaKey||i.ctrlKey);break;case"End":this.focusIndex=this.itemCount-1;break;case"PageDown":this.focusIndex=this.normalizeIndex(this.focusIndex+this._visibleItemsNum-1);break;case"Home":this.focusIndex=0;break;case"PageUp":this.focusIndex=this.normalizeIndex(this.focusIndex-this._visibleItemsNum+1);break;default:e=!1;break}e&&(i.preventDefault(),i.stopPropagation())},this._resizeObserver=new ResizeObserver(()=>{this._lastKnownHeight!==this.offsetHeight&&(this._lastKnownHeight=this.offsetHeight,this.requestUpdate())})}get focusTarget(){return this.hasAttribute("focus-target")}set focusTarget(i){this.toggleAttribute("focus-target",i)}get focusIndex(){return this._focusIndex}set focusIndex(i){if(i>=-1&&i<this.itemCount){const e=this._focusIndex;this._focusIndex=i,(i<=this._firstVisibleIndex||this._lastVisibleIndex<=i)&&this.scrollToItem(i),e!=i&&(i==-1&&this.removeAttribute("aria-activedescendant"),this.requestUpdate("focusIndex",e))}}get selectedIndices(){return this._selectedIndices}set selectedIndices(i){i?this._selectedIndices=i.map(e=>Number(e)):this._selectedIndices=[],this.requestUpdate("selectedIndices")}scrollToItem(i,e="auto"){this.scrollTop=Cl.getOffsetForIndexAndAlignment(this.normalizeIndex(i),e,this.scrollTop,this.itemHeight,this.height,this.itemCount),this._lastKnownScrollTop=this.scrollTop}getListItem(i){return!this.shadowRoot||i<this._firstVisibleIndex||this._lastVisibleIndex<i?null:this.querySelector(`[item-index="${i}"]`)}connectedCallback(){super.connectedCallback(),this._resizeObserver.observe(this),this.scrollTop!==this._lastKnownScrollTop&&(this.scrollTop=this._lastKnownScrollTop,this.requestUpdate())}disconnectedCallback(){super.disconnectedCallback(),this._resizeObserver.disconnect()}firstUpdated(i){super.firstUpdated(i),this.addEventListener("scroll",this.onScroll),this.addEventListener("keydown",this.handleKeyDown),this.addEventListener("click",this.handleClick),this.addEventListener("mousedown",e=>{e.button==1&&e.preventDefault()}),this.addEventListener("auxclick",this.handleClick),this.addEventListener("focus",()=>{this.matches(":focus-visible")&&(this.focusIndex==-1?(this.selectedIndices&&(this.focusIndex=this.selectedIndices[0]),this.focusIndex==-1&&this.itemCount>0&&(this.focusIndex=0)):this.updateFocusedItemAttributes())}),this.addEventListener("blur",()=>{this.focusIndex!=-1&&this.updateFocusedItemAttributes()}),this.selectedIndices.length>0&&this.scrollToItem(this.selectedIndices[0],"center")}updateFocusedItemAttributes(){const i=this.getListItem(this.focusIndex);i&&(this.focusTarget||document.activeElement==this?(i.setAttribute("focused",""),this.setAttribute("aria-activedescendant",i.id)):(i.removeAttribute("focused"),this.removeAttribute("aria-activedescendant")))}static get styles(){return[_n`
                 ${Ze(Il)}
@@ -593,7 +593,7 @@ export function getItems(): ExtendedTokenData[] {
                       ><div class="token-wrapper" slot="prefix"><slot name="items"></slot></div>
                   </sd-lit-input>
                   <slot class="additonal-content" name="additional-content"></slot>
-              `}firstUpdated(e){super.firstUpdated(e),this.setAttribute("role","listbox"),this.setAttribute("aria-multiselectable","true"),this.hasAttribute("tabIndex")||(this.tabIndex=0),this.addEventListener("focusout",t=>{const n=t.relatedTarget;!this.contains(n)&&!this.shadowRoot.contains(n)&&this.querySelectorAll("[slot='items'][aria-checked='true']").forEach(s=>s.checked=!1)}),new Ul(this,()=>{var t;return(t=this.inputElement)==null?void 0:t.value},t=>this.addMatchingItems(t)),new Fl(this,t=>this.addMatchingItems(t))}addMatchingItems(e){const t=[],n=e.map((s,r)=>{const o=s.caption==null?-1:this.findIndex(s);return o!=-1&&!this.items[o].disabled&&!this.selectedIndexes.includes(o)?(t.push(r),o):-1}).filter(s=>s!=-1);return n.length>0&&this.handleTokenSelection(n),t}removeSelectionOrActiveToken(){if(!this.disabled){const e=this.querySelectorAll("[slot='items'][aria-checked='true']");if(e.length>0){const t=Array.from(e);this.removeTokens(t.filter(n=>!n.disabled).map(n=>n.index))}else if(this.activeTokenIndex!=-1){const t=this.activeTokenElement;t&&!t.disabled&&this.removeTokens([t.index])}}}updateActiveToken(e){const t=this.querySelectorAll("[slot='items']").length-1;this.activeTokenIndex==-1?e<0&&(this.activeTokenIndex=t):this.activeTokenIndex==t&&e>0?(this.activeTokenIndex=-1,this.focus()):this.activeTokenIndex=Math.max(0,Math.min(t,this.activeTokenIndex+e))}commitTokenValue(e){if(this.disabled)return;if(this.tokenSuggestPopover.isOpened){const n=this.tokenSuggestPopover.focusedSuggestToken;if(n){if(!n.disabled){const s=this.findIndex(n);this.handleTokenSelection([s]),this.tokenSuggestPopover.hide()}return}}if(!(e!=null&&e.trim()))return;const t=this.items.findIndex(n=>this.caseSensitive?n.caption==e:n.caption.toLowerCase()==e.toLowerCase());this.selectedIndexes.includes(t)||(t>=0?this.handleTokenSelection([t]):this.handleTokenCreation(e)),this.requestUpdate("selectedIndexes"),this.tokenSuggestPopover.hide(),window.removeEventListener("pointerdown",this.handleWindowPointerDown)}updated(e){if(super.updated(e),this._tokenSuggestPopover&&(this.tokenSuggestPopover.list.className=this.suggestListClass||"",this.suggestionFilter&&(this.tokenSuggestPopover.filter=this.suggestionFilter)),e.has("selectionMode"))if(this.selectionMode=="multi"){this.setAttribute("aria-haspopup","listbox");const t=this.inputElement;t.addEventListener("immediate-value-change",n=>this.handleInputValueChange(n)),t.addEventListener("keydown",n=>this.handleInputKeyDown(n,t)),window.queueMicrotask(()=>this.tokenSuggestPopover)}else this.removeAttribute("aria-haspopup"),this.addEventListener("keydown",this.handleKeyDown),this._tokenSuggestPopover&&(this._tokenSuggestPopover.popover.remove(),this._tokenSuggestPopover=null);(e.size==0||e.has("selectionMode")||e.has("items")||e.has("selectedIndexes")||e.has("disabled"))&&this.updateItems()}handleInputValueChange(e){e.detail.value?(this.activeTokenIndex=-1,this.cancelSearch=!1,this.debouncedShowTokenSuggestPopover(),window.addEventListener("pointerdown",this.handleWindowPointerDown)):(this.tokenSuggestPopover.hide(),this.cancelSearch=!0)}showFilteredTokenSuggestions(){!this.cancelSearch&&this.inputElement.value&&this.tokenSuggestPopover.show()}isTokenNotSelected(e){return!this.selectedIndexes.includes(e)}get tokenSuggestPopover(){return!this._tokenSuggestPopover&&this.inputElement&&(this._tokenSuggestPopover=new Pl(this.inputElement,()=>this.items.filter((e,t)=>!e.disabled&&this.isTokenNotSelected(t)),e=>{const t=this.findIndex(e);this.handleTokenSelection([t]),window.removeEventListener("pointerdown",this.handleWindowPointerDown)},e=>{this.appendChild(e.popover),this.dispatchEvent(new CustomEvent("auto-suggest-initialized")),e.popover.addEventListener("close",()=>{this.inputElement.value&&!this.contains(document.activeElement)&&(this.inputElement.value="")})}),this._tokenSuggestPopover.list.itemGenerator=this._autoSuggestItemGenerator,this._tokenSuggestPopover.list.className=this.suggestListClass,this.suggestionFilter&&(this._tokenSuggestPopover.filter=this.suggestionFilter)),this._tokenSuggestPopover}updateItems(){if(!this.isConnected||!this.items)return;const e=this.inputElement;e&&(!this._tokenSuggestPopover||!this._tokenSuggestPopover.isOpened)&&(e.value=""),this.querySelectorAll("[slot='items']").forEach(s=>{this.removeChild(s)});const t=document.createDocumentFragment();let n=[];this.selectionMode=="remove-only"?n=this.items.map(s=>this.disableIfNeeded(s)):this.selectedIndexes.forEach(s=>{n.push(this.disableIfNeeded(this.items[s]))}),n.forEach(s=>{const r=this.tokenGenerator(s,this.findIndex(s));r.slot="items",t.appendChild(r),r.id||(r.id=window.crypto.getRandomValues(new Uint32Array(1))[0].toString(16)),r.setClickHandler(()=>this.onTokenClick(r,!0)),r.addEventListener("click",()=>{document.activeElement!=this&&this.focus()}),r.setDeleteHandler(o=>this.removeTokens([o]))}),this.appendChild(t),this._tokenSuggestPopover&&this._tokenSuggestPopover.refreshItems()}removeTokens(e){this.disabled||(this.activeTokenIndex!=-1&&e.includes(this.activeTokenElement.index)&&(this.activeTokenIndex=-1),this.selectionMode=="remove-only"?this.dispatchEvent(new CustomEvent("tokens-removed",{detail:{removedIndices:e}})):(this.selectedIndexes=this.selectedIndexes.filter(t=>!e.includes(t)),this.dispatchEvent(new CustomEvent("tokens-removed",{detail:{removedIndices:e,selectedIndices:[...this.selectedIndexes]}}))))}onTokenClick(e,t){let n;this.querySelectorAll("[slot='items']").forEach((s,r)=>{e==s?n=r:s.setAttribute("aria-checked","false")}),this.activeTokenIndex=n,this.setAttribute("aria-activedescendant",this.activeTokenElement.id),this._tokenSuggestPopover&&this._tokenSuggestPopover.isOpened&&this._tokenSuggestPopover.hide(),this.dispatchEvent(new CustomEvent("token-clicked",{detail:{index:e.index,tokenElement:e,byPointerDevice:t}}))}disableIfNeeded(e){return this.disabled?{...e,disabled:!0}:e}handleTokenSelection(e){this.selectedIndexes=this.selectedIndexes.concat(e),this.dispatchEvent(new CustomEvent("tokens-selected",{detail:{newIndices:e,selectedIndices:[...this.selectedIndexes]}}))}handleTokenCreation(e){this.dispatchEvent(new CustomEvent("token-created",{detail:{value:e}}))}get inputElement(){return this.shadowRoot.querySelector(".input")}get activeTokenElement(){return this.getTokenElement(this.activeTokenIndex)}getTokenElement(e){return this.querySelector("[slot='items']:nth-of-type("+(e+1)+")")}findIndex(e){return this.items.findIndex(t=>t.caption===e.caption)}get activeTokenIndex(){return this._activeTokenIndex}set activeTokenIndex(e){if(this._activeTokenIndex!=-1){const t=this.activeTokenElement;t&&(t.current=!1)}if(this._activeTokenIndex=e,e==-1)this.removeAttribute("aria-activedescendant");else{const t=this.activeTokenElement;t.current=!0,this.setAttribute("aria-activedescendant",t.id)}}get hasInputValue(){var e;return!!((e=this.inputElement)!=null&&e.value)}},Se.ID="sd-token-selector",Se.ensureDefined=()=>{Cn.ensureDefined(),customElements.get(Se.ID)||customElements.define(Se.ID,Se)},Se.shadowRootOptions={...ue.shadowRootOptions,delegatesFocus:!0},Se);ge([b({type:String,attribute:"selection-mode",reflect:!0})],de.prototype,"selectionMode",2);ge([b({type:Array,attribute:!1})],de.prototype,"items",2);ge([b({type:Array,attribute:!1})],de.prototype,"selectedIndexes",2);ge([b({type:String,reflect:!0})],de.prototype,"placeholder",2);ge([b({type:String,reflect:!0,attribute:"suggest-list-class"})],de.prototype,"suggestListClass",2);ge([b({type:String,reflect:!0,attribute:"input-label"})],de.prototype,"inputLabel",2);ge([b({converter:{fromAttribute:i=>i=="true",toAttribute:i=>i},reflect:!0,attribute:"aria-disabled"})],de.prototype,"disabled",2);ge([b({type:String,attribute:!0})],de.prototype,"validationMessage",2);ge([b({type:String,attribute:!0})],de.prototype,"validationIconSrc",2);ge([b({converter:dn.levelConverter,attribute:!0,reflect:!0})],de.prototype,"validationLevel",2);ge([b({type:String,reflect:!0,attribute:"token-type"})],de.prototype,"tokenType",2);ge([b({type:Boolean,reflect:!0,attribute:"case-sensitive"})],de.prototype,"caseSensitive",2);let oh=de;function or(i){return i&&i.__esModule&&Object.prototype.hasOwnProperty.call(i,"default")?i.default:i}function Gl(i){if(i.__esModule)return i;var e=i.default;if(typeof e=="function"){var t=function n(){return this instanceof n?Reflect.construct(e,arguments,this.constructor):e.apply(this,arguments)};t.prototype=e.prototype}else t={};return Object.defineProperty(t,"__esModule",{value:!0}),Object.keys(i).forEach(function(n){var s=Object.getOwnPropertyDescriptor(i,n);Object.defineProperty(t,n,s.get?s:{enumerable:!0,get:function(){return i[n]}})}),t}var Oi={exports:{}},U=String,ar=function(){return{isColorSupported:!1,reset:U,bold:U,dim:U,italic:U,underline:U,inverse:U,hidden:U,strikethrough:U,black:U,red:U,green:U,yellow:U,blue:U,magenta:U,cyan:U,white:U,gray:U,bgBlack:U,bgRed:U,bgGreen:U,bgYellow:U,bgBlue:U,bgMagenta:U,bgCyan:U,bgWhite:U}};Oi.exports=ar();Oi.exports.createColors=ar;var Kl=Oi.exports;const Zl={},Xl=Object.freeze(Object.defineProperty({__proto__:null,default:Zl},Symbol.toStringTag,{value:"Module"})),ye=Gl(Xl);let gs=Kl,ms=ye,ii=class lr extends Error{constructor(e,t,n,s,r,o){super(e),this.name="CssSyntaxError",this.reason=e,r&&(this.file=r),s&&(this.source=s),o&&(this.plugin=o),typeof t<"u"&&typeof n<"u"&&(typeof t=="number"?(this.line=t,this.column=n):(this.line=t.line,this.column=t.column,this.endLine=n.line,this.endColumn=n.column)),this.setMessage(),Error.captureStackTrace&&Error.captureStackTrace(this,lr)}setMessage(){this.message=this.plugin?this.plugin+": ":"",this.message+=this.file?this.file:"<css input>",typeof this.line<"u"&&(this.message+=":"+this.line+":"+this.column),this.message+=": "+this.reason}showSourceCode(e){if(!this.source)return"";let t=this.source;e==null&&(e=gs.isColorSupported),ms&&e&&(t=ms(t));let n=t.split(/\r?\n/),s=Math.max(this.line-3,0),r=Math.min(this.line+2,n.length),o=String(r).length,a,l;if(e){let{bold:c,gray:d,red:h}=gs.createColors(!0);a=p=>c(h(p)),l=p=>d(p)}else a=l=c=>c;return n.slice(s,r).map((c,d)=>{let h=s+1+d,p=" "+(" "+h).slice(-o)+" | ";if(h===this.line){let m=l(p.replace(/\d/g," "))+c.slice(0,this.column-1).replace(/[^\t]/g," ");return a(">")+l(p)+c+`
+              `}firstUpdated(e){super.firstUpdated(e),this.setAttribute("role","listbox"),this.setAttribute("aria-multiselectable","true"),this.hasAttribute("tabIndex")||(this.tabIndex=0),this.addEventListener("focusout",t=>{const n=t.relatedTarget;!this.contains(n)&&!this.shadowRoot.contains(n)&&this.querySelectorAll("[slot='items'][aria-checked='true']").forEach(s=>s.checked=!1)}),new Ul(this,()=>{var t;return(t=this.inputElement)==null?void 0:t.value},t=>this.addMatchingItems(t)),new Fl(this,t=>this.addMatchingItems(t))}addMatchingItems(e){const t=[],n=e.map((s,r)=>{const o=s.caption==null?-1:this.findIndex(s);return o!=-1&&!this.items[o].disabled&&!this.selectedIndexes.includes(o)?(t.push(r),o):-1}).filter(s=>s!=-1);return n.length>0&&this.handleTokenSelection(n),t}removeSelectionOrActiveToken(){if(!this.disabled){const e=this.querySelectorAll("[slot='items'][aria-checked='true']");if(e.length>0){const t=Array.from(e);this.removeTokens(t.filter(n=>!n.disabled).map(n=>n.index))}else if(this.activeTokenIndex!=-1){const t=this.activeTokenElement;t&&!t.disabled&&this.removeTokens([t.index])}}}updateActiveToken(e){const t=this.querySelectorAll("[slot='items']").length-1;this.activeTokenIndex==-1?e<0&&(this.activeTokenIndex=t):this.activeTokenIndex==t&&e>0?(this.activeTokenIndex=-1,this.focus()):this.activeTokenIndex=Math.max(0,Math.min(t,this.activeTokenIndex+e))}commitTokenValue(e){if(this.disabled)return;if(this.tokenSuggestPopover.isOpened){const n=this.tokenSuggestPopover.focusedSuggestToken;if(n){if(!n.disabled){const s=this.findIndex(n);this.handleTokenSelection([s]),this.tokenSuggestPopover.hide()}return}}if(!(e!=null&&e.trim()))return;const t=this.items.findIndex(n=>this.caseSensitive?n.caption==e:n.caption.toLowerCase()==e.toLowerCase());this.selectedIndexes.includes(t)||(t>=0?this.handleTokenSelection([t]):this.handleTokenCreation(e)),this.requestUpdate("selectedIndexes"),this.tokenSuggestPopover.hide(),window.removeEventListener("pointerdown",this.handleWindowPointerDown)}updated(e){if(super.updated(e),this._tokenSuggestPopover&&(this.tokenSuggestPopover.list.className=this.suggestListClass||"",this.suggestionFilter&&(this.tokenSuggestPopover.filter=this.suggestionFilter)),e.has("selectionMode"))if(this.selectionMode=="multi"){this.setAttribute("aria-haspopup","listbox");const t=this.inputElement;t.addEventListener("immediate-value-change",n=>this.handleInputValueChange(n)),t.addEventListener("keydown",n=>this.handleInputKeyDown(n,t)),window.queueMicrotask(()=>this.tokenSuggestPopover)}else this.removeAttribute("aria-haspopup"),this.addEventListener("keydown",this.handleKeyDown),this._tokenSuggestPopover&&(this._tokenSuggestPopover.popover.remove(),this._tokenSuggestPopover=null);(e.size==0||e.has("selectionMode")||e.has("items")||e.has("selectedIndexes")||e.has("disabled"))&&this.updateItems()}handleInputValueChange(e){e.detail.value?(this.activeTokenIndex=-1,this.cancelSearch=!1,this.debouncedShowTokenSuggestPopover(),window.addEventListener("pointerdown",this.handleWindowPointerDown)):(this.tokenSuggestPopover.hide(),this.cancelSearch=!0)}showFilteredTokenSuggestions(){!this.cancelSearch&&this.inputElement.value&&this.tokenSuggestPopover.show()}isTokenNotSelected(e){return!this.selectedIndexes.includes(e)}get tokenSuggestPopover(){return!this._tokenSuggestPopover&&this.inputElement&&(this._tokenSuggestPopover=new Pl(this.inputElement,()=>this.items.filter((e,t)=>!e.disabled&&this.isTokenNotSelected(t)),e=>{const t=this.findIndex(e);this.handleTokenSelection([t]),window.removeEventListener("pointerdown",this.handleWindowPointerDown)},e=>{this.appendChild(e.popover),this.dispatchEvent(new CustomEvent("auto-suggest-initialized")),e.popover.addEventListener("close",()=>{this.inputElement.value&&!this.contains(document.activeElement)&&(this.inputElement.value="")})}),this._tokenSuggestPopover.list.itemGenerator=this._autoSuggestItemGenerator,this._tokenSuggestPopover.list.className=this.suggestListClass,this.suggestionFilter&&(this._tokenSuggestPopover.filter=this.suggestionFilter)),this._tokenSuggestPopover}updateItems(){if(!this.isConnected||!this.items)return;const e=this.inputElement;e&&(!this._tokenSuggestPopover||!this._tokenSuggestPopover.isOpened)&&(e.value=""),this.querySelectorAll("[slot='items']").forEach(s=>{this.removeChild(s)});const t=document.createDocumentFragment();let n=[];this.selectionMode=="remove-only"?n=this.items.map(s=>this.disableIfNeeded(s)):this.selectedIndexes.forEach(s=>{n.push(this.disableIfNeeded(this.items[s]))}),n.forEach(s=>{const r=this.tokenGenerator(s,this.findIndex(s));r.slot="items",t.appendChild(r),r.id||(r.id=window.crypto.getRandomValues(new Uint32Array(1))[0].toString(16)),r.setClickHandler(()=>this.onTokenClick(r,!0)),r.addEventListener("click",()=>{document.activeElement!=this&&this.focus()}),r.setDeleteHandler(o=>this.removeTokens([o]))}),this.appendChild(t),this._tokenSuggestPopover&&this._tokenSuggestPopover.refreshItems()}removeTokens(e){this.disabled||(this.activeTokenIndex!=-1&&e.includes(this.activeTokenElement.index)&&(this.activeTokenIndex=-1),this.selectionMode=="remove-only"?this.dispatchEvent(new CustomEvent("tokens-removed",{detail:{removedIndices:e}})):(this.selectedIndexes=this.selectedIndexes.filter(t=>!e.includes(t)),this.dispatchEvent(new CustomEvent("tokens-removed",{detail:{removedIndices:e,selectedIndices:[...this.selectedIndexes]}}))))}onTokenClick(e,t){let n;this.querySelectorAll("[slot='items']").forEach((s,r)=>{e==s?n=r:s.setAttribute("aria-checked","false")}),this.activeTokenIndex=n,this.setAttribute("aria-activedescendant",this.activeTokenElement.id),this._tokenSuggestPopover&&this._tokenSuggestPopover.isOpened&&this._tokenSuggestPopover.hide(),this.dispatchEvent(new CustomEvent("token-clicked",{detail:{index:e.index,tokenElement:e,byPointerDevice:t}}))}disableIfNeeded(e){return this.disabled?{...e,disabled:!0}:e}handleTokenSelection(e){this.selectedIndexes=this.selectedIndexes.concat(e),this.dispatchEvent(new CustomEvent("tokens-selected",{detail:{newIndices:e,selectedIndices:[...this.selectedIndexes]}}))}handleTokenCreation(e){this.dispatchEvent(new CustomEvent("token-created",{detail:{value:e}}))}get inputElement(){return this.shadowRoot.querySelector(".input")}get activeTokenElement(){return this.getTokenElement(this.activeTokenIndex)}getTokenElement(e){return this.querySelector("[slot='items']:nth-of-type("+(e+1)+")")}findIndex(e){return this.items.findIndex(t=>t.caption===e.caption)}get activeTokenIndex(){return this._activeTokenIndex}set activeTokenIndex(e){if(this._activeTokenIndex!=-1){const t=this.activeTokenElement;t&&(t.current=!1)}if(this._activeTokenIndex=e,e==-1)this.removeAttribute("aria-activedescendant");else{const t=this.activeTokenElement;t.current=!0,this.setAttribute("aria-activedescendant",t.id)}}get hasInputValue(){var e;return!!((e=this.inputElement)!=null&&e.value)}},Se.ID="sd-token-selector",Se.ensureDefined=()=>{Cn.ensureDefined(),customElements.get(Se.ID)||customElements.define(Se.ID,Se)},Se.shadowRootOptions={...ue.shadowRootOptions,delegatesFocus:!0},Se);ge([b({type:String,attribute:"selection-mode",reflect:!0})],de.prototype,"selectionMode",2);ge([b({type:Array,attribute:!1})],de.prototype,"items",2);ge([b({type:Array,attribute:!1})],de.prototype,"selectedIndexes",2);ge([b({type:String,reflect:!0})],de.prototype,"placeholder",2);ge([b({type:String,reflect:!0,attribute:"suggest-list-class"})],de.prototype,"suggestListClass",2);ge([b({type:String,reflect:!0,attribute:"input-label"})],de.prototype,"inputLabel",2);ge([b({converter:{fromAttribute:i=>i=="true",toAttribute:i=>i},reflect:!0,attribute:"aria-disabled"})],de.prototype,"disabled",2);ge([b({type:String,attribute:!0})],de.prototype,"validationMessage",2);ge([b({type:String,attribute:!0})],de.prototype,"validationIconSrc",2);ge([b({converter:dn.levelConverter,attribute:!0,reflect:!0})],de.prototype,"validationLevel",2);ge([b({type:String,reflect:!0,attribute:"token-type"})],de.prototype,"tokenType",2);ge([b({type:Boolean,reflect:!0,attribute:"case-sensitive"})],de.prototype,"caseSensitive",2);let ah=de;function or(i){return i&&i.__esModule&&Object.prototype.hasOwnProperty.call(i,"default")?i.default:i}function Gl(i){if(i.__esModule)return i;var e=i.default;if(typeof e=="function"){var t=function n(){return this instanceof n?Reflect.construct(e,arguments,this.constructor):e.apply(this,arguments)};t.prototype=e.prototype}else t={};return Object.defineProperty(t,"__esModule",{value:!0}),Object.keys(i).forEach(function(n){var s=Object.getOwnPropertyDescriptor(i,n);Object.defineProperty(t,n,s.get?s:{enumerable:!0,get:function(){return i[n]}})}),t}var Oi={exports:{}},U=String,ar=function(){return{isColorSupported:!1,reset:U,bold:U,dim:U,italic:U,underline:U,inverse:U,hidden:U,strikethrough:U,black:U,red:U,green:U,yellow:U,blue:U,magenta:U,cyan:U,white:U,gray:U,bgBlack:U,bgRed:U,bgGreen:U,bgYellow:U,bgBlue:U,bgMagenta:U,bgCyan:U,bgWhite:U}};Oi.exports=ar();Oi.exports.createColors=ar;var Kl=Oi.exports;const Zl={},Xl=Object.freeze(Object.defineProperty({__proto__:null,default:Zl},Symbol.toStringTag,{value:"Module"})),ye=Gl(Xl);let gs=Kl,ms=ye,ii=class lr extends Error{constructor(e,t,n,s,r,o){super(e),this.name="CssSyntaxError",this.reason=e,r&&(this.file=r),s&&(this.source=s),o&&(this.plugin=o),typeof t<"u"&&typeof n<"u"&&(typeof t=="number"?(this.line=t,this.column=n):(this.line=t.line,this.column=t.column,this.endLine=n.line,this.endColumn=n.column)),this.setMessage(),Error.captureStackTrace&&Error.captureStackTrace(this,lr)}setMessage(){this.message=this.plugin?this.plugin+": ":"",this.message+=this.file?this.file:"<css input>",typeof this.line<"u"&&(this.message+=":"+this.line+":"+this.column),this.message+=": "+this.reason}showSourceCode(e){if(!this.source)return"";let t=this.source;e==null&&(e=gs.isColorSupported),ms&&e&&(t=ms(t));let n=t.split(/\r?\n/),s=Math.max(this.line-3,0),r=Math.min(this.line+2,n.length),o=String(r).length,a,l;if(e){let{bold:c,gray:d,red:h}=gs.createColors(!0);a=p=>c(h(p)),l=p=>d(p)}else a=l=c=>c;return n.slice(s,r).map((c,d)=>{let h=s+1+d,p=" "+(" "+h).slice(-o)+" | ";if(h===this.line){let m=l(p.replace(/\d/g," "))+c.slice(0,this.column-1).replace(/[^\t]/g," ");return a(">")+l(p)+c+`
  `+m+a("^")}return" "+l(p)+c}).join(`
 `)}toString(){let e=this.showSourceCode();return e&&(e=`
 
@@ -838,8 +838,7 @@ https://github.com/highlightjs/highlight.js/issues/2277`),B=u,C=v),k===void 0&&(
 </ul>
 </li>
 </ul>
-<h2 id="examples">Examples</h2>
-`;document.querySelector("#markdown-container").innerHTML=Xu;Gu(Object.assign({"./examples/1_remove_only/index.ts":bo,"./examples/2_multi_select/index.ts":Eo,"./examples/3_editable_input_attributes/index.ts":Co,"./examples/4_dnd/index.ts":Ro,"./examples/5_other/index.ts":zo}));export{oh as T,zl as g,Ot as h};
+`,Ju=document.querySelector("#markdown-container");Ju.innerHTML=Xu;Gu(Object.assign({"./examples/1_remove_only/index.ts":bo,"./examples/2_multi_select/index.ts":Eo,"./examples/3_editable_input_attributes/index.ts":Co,"./examples/4_dnd/index.ts":Ro,"./examples/5_other/index.ts":zo}),document.querySelector(".markdown-body"));export{ah as T,zl as g,Ot as h};
 function __vite__mapDeps(indexes) {
   if (!__vite__mapDeps.viteFileDeps) {
     __vite__mapDeps.viteFileDeps = ["./1_remove_only.js","./token-provider.mjs","./2_multi_select.js","./button.mjs","./3_editable_input_attributes.js","./4_dnd.js","./5_other.js"]

package/dist/token-selector-with-externals.js

@@ -104,7 +104,7 @@ var window;(window||={})["@cas-smartdesign/token-selector"]=(()=>{var We=Object.
   <path d="M0 0l11.96 12L24 0z" fill="#999" class="arrow-border"/>\r
   <path d="M12 11L1 0h22z" fill="#f2f2f2" class="arrow-background"/>\r
 </svg>\r
-`,Kr=navigator.userAgent.indexOf("Trident")!==-1,Co=1,$o="sd-popover-open",To=class extends HTMLElement{constructor(){super(...arguments),this._open=!1,this._firstUpdated=!1,this.toggle=()=>{this.open=!this.open},this.show=()=>{this.open=!0},this.hide=()=>{this.open=!1},this.hideIfExternalTarget=t=>{let i=t.target;(!(i instanceof HTMLElement)||!this._container.contains(i)&&!this.targetElement.contains(i))&&this.hide()}}get triggerType(){return this.getAttribute("trigger-type")}set triggerType(t){t?this.setAttribute("trigger-type",t):this.removeAttribute("trigger-type")}get placement(){return this.getAttribute("placement")}set placement(t){t?this.setAttribute("placement",t):this.removeAttribute("placement")}get targetElement(){return this._targetElement}set targetElement(t){this.removeTargetEventListener(this.targetElement),this._targetElement&&this._targetElement.getAttribute("aria-expanded")=="true"&&this._targetElement.setAttribute("aria-expanded","false"),this._targetElement=t,t.setAttribute("aria-expanded","false"),this.addTargetEventListener(this.targetElement),this.updatePopper()}get targetSelector(){return this.getAttribute("target-selector")}set targetSelector(t){t?this.setAttribute("target-selector",t):this.removeAttribute("target-selector")}get modal(){return this.hasAttribute("modal")}set modal(t){t?this.setAttribute("modal",""):this.removeAttribute("modal")}get popoverFor(){return this.getAttribute("popover-for")}set popoverFor(t){t?this.setAttribute("popover-for",t):this.removeAttribute("popover-for")}get flipPriority(){return this._flipPriority}set flipPriority(t){t&&t.length>0?this._flipPriority=t:this._flipPriority=null,this.reConfigurePopper()}get offset(){return this.getAttribute("offset")?parseInt(this.getAttribute("offset")):0}set offset(t){t?this.setAttribute("offset",t.toString()):this.removeAttribute("offset"),this.reConfigurePopper()}reConfigurePopper(){this._popper&&this.configurePopper()}get noArrow(){return this.hasAttribute("no-arrow")}set noArrow(t){t?this.setAttribute("no-arrow",""):this.removeAttribute("no-arrow")}static get observedAttributes(){return["placement","target-selector","trigger-type"]}attributeChangedCallback(t,i){switch(t){case"placement":{this.updatePopper();break}case"trigger-type":{this.removeTargetEventListener(this.targetElement),this.addTargetEventListener(this.targetElement);break}case"target-selector":{this.handleTargetSelectorChange(i);break}}}connectedCallback(){this._firstUpdated||(this.firstUpdated(),this._firstUpdated=!0),this.targetElement?this.addTargetEventListener(this.targetElement):this.targetSelector&&requestAnimationFrame(()=>{this.isConnected&&this.handleTargetSelectorChange(null)}),this._arrow=document.createElement("div"),this._arrow.classList.add("popover-arrow"),this._arrow.setAttribute("data-popper-arrow",""),this._arrow.style.display="flex",this._arrow.innerHTML=Wr}disconnectedCallback(){this.targetElement&&(this.removeTargetEventListener(this.targetElement),this.removeTargetClassForOpen(this.targetElement)),this._resizeObserver&&(this._resizeObserver.disconnect(),this._resizeObserver=null)}firstUpdated(){this.style.display="none",this.triggerType=this.triggerType||"click",this.placement=this.placement||"auto"}get open(){return this._open}set open(t){t!==this._open&&(this._open=t,this.handleOpenChange())}handleOpenChange(){this.open?(this._popper||this.configurePopper(),this._container.innerHTML="",this.popoverFor&&this._container.setAttribute("popover-for",this.popoverFor),this.content&&(this._container.prepend(this.content),Object.assign(this.content.style,{position:"relative",display:"block",zIndex:1}),window.requestAnimationFrame(()=>{let t=getComputedStyle(this.content).backgroundColor;t=="rgba(0, 0, 0, 0)"&&(this.content.style.background=t="#f2f2f2"),this._arrow.querySelector(".arrow-background").style.fill=t})),this.ensureArrowIsAdded(),this.ownerDocument.body.appendChild(this._container),this.updatePopper(),this.setAttribute("open",""),this.modal&&(window.addEventListener("click",this.hideIfExternalTarget,{capture:!0}),window.addEventListener("focus",this.hideIfExternalTarget,{capture:!0})),this.targetElement&&(this.addTargetClassForOpen(this.targetElement),this.targetElement.setAttribute("aria-expanded","true")),this.dispatchEvent(new CustomEvent("open"))):(this.ownerDocument.body.removeChild(this._container),this.removeAttribute("open"),window.removeEventListener("click",this.hideIfExternalTarget,{capture:!0}),window.removeEventListener("focus",this.hideIfExternalTarget,{capture:!0}),this.targetElement&&(this.removeTargetClassForOpen(this.targetElement),this.targetElement.setAttribute("aria-expanded","false")),this.dispatchEvent(new CustomEvent("close")))}handleTargetSelectorChange(t){let i=document.querySelector(t);i&&(this.removeTargetEventListener(i),this.removeTargetClassForOpen(i)),this.targetSelector&&(this.targetElement=document.querySelector(this.targetSelector),this.addTargetEventListener(this.targetElement))}addTargetEventListener(t){if(t)switch(this.triggerType){case"hover":{t.addEventListener("mouseenter",this.show),t.addEventListener("mouseleave",this.hide);break}case"click":{t.addEventListener("click",this.toggle);break}}}removeTargetEventListener(t){if(t)switch(this.triggerType){case"hover":{t.removeEventListener("mouseenter",this.show),t.removeEventListener("mouseleave",this.hide);break}case"click":{t.removeEventListener("click",this.toggle);break}}}configurePopper(){this.createContentContainer(),this.ensureArrowIsAdded();let t=this,i={placement:t.placement,strategy:"absolute",modifiers:[{name:"computeStyles",options:{gpuAcceleration:!Kr}},{name:"flip",options:{fallbackPlacements:t._flipPriority}},{name:"offset",options:{offset:()=>[0,t.noArrow?0+t.offset:this._arrow.clientHeight+t.offset]}},{name:"arrow",options:{padding:6}},{name:"resetArrowStyles",enabled:!0,phase:"beforeWrite",fn({state:o}){Object.assign(t._arrow.style,{top:o.styles.arrow.top||"",left:o.styles.arrow.left||"",bottom:o.styles.arrow.bottom||"",right:o.styles.arrow.right||""})}},{name:"onUpdate",enabled:!0,phase:"afterWrite",fn({state:o}){t.updateArrow(o.placement)}}]};this._popper=Ai(this.targetElement,this._container,i)}createContentContainer(){this._container=document.createElement("div"),this._container.classList.add("popover-container"),this._container.tabIndex=0,this._resizeObserver&&this._resizeObserver.disconnect(),this._resizeObserver=new ResizeObserver(()=>{this._popper&&this._popper.update()}),this._resizeObserver.observe(this._container),Object.assign(this._container.style,{boxShadow:`0 4px 5px 0 rgba(0, 0, 0, 0.14),
+`,Kr=navigator.userAgent.indexOf("Trident")!==-1,Co=1,$o="sd-popover-open",To=class extends HTMLElement{constructor(){super(...arguments),this._open=!1,this._firstUpdated=!1,this.toggle=()=>{this.open=!this.open},this.show=()=>{this.open=!0},this.hide=()=>{this.open=!1},this.hideIfExternalTarget=t=>{let i=t.target;(!(i instanceof HTMLElement)||!this._container.contains(i)&&!this.targetElement.contains(i))&&this.hide()}}get triggerType(){return this.getAttribute("trigger-type")}set triggerType(t){t?this.setAttribute("trigger-type",t):this.removeAttribute("trigger-type")}get placement(){return this.getAttribute("placement")}set placement(t){t?this.setAttribute("placement",t):this.removeAttribute("placement")}get targetElement(){return this._targetElement}set targetElement(t){this.removeTargetEventListener(this.targetElement),this._targetElement&&this._targetElement.getAttribute("aria-expanded")=="true"&&this._targetElement.setAttribute("aria-expanded","false"),this._targetElement=t,t&&t.setAttribute("aria-expanded","false"),this.addTargetEventListener(this.targetElement),this.updatePopper()}get targetSelector(){return this.getAttribute("target-selector")}set targetSelector(t){t?this.setAttribute("target-selector",t):this.removeAttribute("target-selector")}get modal(){return this.hasAttribute("modal")}set modal(t){t?this.setAttribute("modal",""):this.removeAttribute("modal")}get popoverFor(){return this.getAttribute("popover-for")}set popoverFor(t){t?this.setAttribute("popover-for",t):this.removeAttribute("popover-for")}get flipPriority(){return this._flipPriority}set flipPriority(t){t&&t.length>0?this._flipPriority=t:this._flipPriority=null,this.reConfigurePopper()}get offset(){return this.getAttribute("offset")?parseInt(this.getAttribute("offset")):0}set offset(t){t?this.setAttribute("offset",t.toString()):this.removeAttribute("offset"),this.reConfigurePopper()}reConfigurePopper(){this._popper&&this.configurePopper()}get noArrow(){return this.hasAttribute("no-arrow")}set noArrow(t){t?this.setAttribute("no-arrow",""):this.removeAttribute("no-arrow")}static get observedAttributes(){return["placement","target-selector","trigger-type"]}attributeChangedCallback(t,i){switch(t){case"placement":{this.updatePopper();break}case"trigger-type":{this.removeTargetEventListener(this.targetElement),this.addTargetEventListener(this.targetElement);break}case"target-selector":{this.handleTargetSelectorChange(i);break}}}connectedCallback(){this._firstUpdated||(this.firstUpdated(),this._firstUpdated=!0),this.targetElement?this.addTargetEventListener(this.targetElement):this.targetSelector&&requestAnimationFrame(()=>{this.isConnected&&this.handleTargetSelectorChange(null)}),this._arrow=document.createElement("div"),this._arrow.classList.add("popover-arrow"),this._arrow.setAttribute("data-popper-arrow",""),this._arrow.style.display="flex",this._arrow.innerHTML=Wr}disconnectedCallback(){this.targetElement&&(this.removeTargetEventListener(this.targetElement),this.removeTargetClassForOpen(this.targetElement)),this._resizeObserver&&(this._resizeObserver.disconnect(),this._resizeObserver=null)}firstUpdated(){this.style.display="none",this.triggerType=this.triggerType||"click",this.placement=this.placement||"auto"}get open(){return this._open}set open(t){t!==this._open&&(this._open=t,this.handleOpenChange())}handleOpenChange(){this.open?(this._popper||this.configurePopper(),this._container.innerHTML="",this.popoverFor&&this._container.setAttribute("popover-for",this.popoverFor),this.content&&(this._container.prepend(this.content),Object.assign(this.content.style,{position:"relative",display:"block",zIndex:1}),window.requestAnimationFrame(()=>{let t=getComputedStyle(this.content).backgroundColor;t=="rgba(0, 0, 0, 0)"&&(this.content.style.background=t="#f2f2f2"),this._arrow.querySelector(".arrow-background").style.fill=t})),this.ensureArrowIsAdded(),this.ownerDocument.body.appendChild(this._container),this.updatePopper(),this.setAttribute("open",""),this.modal&&(window.addEventListener("click",this.hideIfExternalTarget,{capture:!0}),window.addEventListener("focus",this.hideIfExternalTarget,{capture:!0})),this.targetElement&&(this.addTargetClassForOpen(this.targetElement),this.targetElement.setAttribute("aria-expanded","true")),this.dispatchEvent(new CustomEvent("open"))):(this.ownerDocument.body.removeChild(this._container),this.removeAttribute("open"),window.removeEventListener("click",this.hideIfExternalTarget,{capture:!0}),window.removeEventListener("focus",this.hideIfExternalTarget,{capture:!0}),this.targetElement&&(this.removeTargetClassForOpen(this.targetElement),this.targetElement.setAttribute("aria-expanded","false")),this.dispatchEvent(new CustomEvent("close")))}handleTargetSelectorChange(t){let i=document.querySelector(t);i&&(this.removeTargetEventListener(i),this.removeTargetClassForOpen(i)),this.targetSelector&&(this.targetElement=document.querySelector(this.targetSelector),this.addTargetEventListener(this.targetElement))}addTargetEventListener(t){if(t)switch(this.triggerType){case"hover":{t.addEventListener("mouseenter",this.show),t.addEventListener("mouseleave",this.hide);break}case"click":{t.addEventListener("click",this.toggle);break}}}removeTargetEventListener(t){if(t)switch(this.triggerType){case"hover":{t.removeEventListener("mouseenter",this.show),t.removeEventListener("mouseleave",this.hide);break}case"click":{t.removeEventListener("click",this.toggle);break}}}configurePopper(){this.createContentContainer(),this.ensureArrowIsAdded();let t=this,i={placement:t.placement,strategy:"absolute",modifiers:[{name:"computeStyles",options:{gpuAcceleration:!Kr}},{name:"flip",options:{fallbackPlacements:t._flipPriority}},{name:"offset",options:{offset:()=>[0,t.noArrow?0+t.offset:this._arrow.clientHeight+t.offset]}},{name:"arrow",options:{padding:6}},{name:"resetArrowStyles",enabled:!0,phase:"beforeWrite",fn({state:o}){Object.assign(t._arrow.style,{top:o.styles.arrow.top||"",left:o.styles.arrow.left||"",bottom:o.styles.arrow.bottom||"",right:o.styles.arrow.right||""})}},{name:"onUpdate",enabled:!0,phase:"afterWrite",fn({state:o}){t.updateArrow(o.placement)}}]};this._popper=Ai(this.targetElement,this._container,i)}createContentContainer(){this._container=document.createElement("div"),this._container.classList.add("popover-container"),this._container.tabIndex=0,this._resizeObserver&&this._resizeObserver.disconnect(),this._resizeObserver=new ResizeObserver(()=>{this._popper&&this._popper.update()}),this._resizeObserver.observe(this._container),Object.assign(this._container.style,{boxShadow:`0 4px 5px 0 rgba(0, 0, 0, 0.14),
                         0 1px 10px 0 rgba(0, 0, 0, 0.12),
                         0 2px 4px -1px rgba(0, 0, 0, 0.4)`,border:"1px solid #999",boxSizing:"border-box",zIndex:2e4})}ensureArrowIsAdded(){!this.noArrow&&!this._container.contains(this._arrow)&&this._container.appendChild(this._arrow)}updatePopper(){this._popper&&(this._popper.state.elements.reference=this.targetElement,this._popper.state.options.placement=this.placement,this.open&&this._popper.update())}updateArrow(t){if(this._arrow){let i=this.getArrowVariant(t);if(this._arrow.setAttribute("variant",i),this._content){let o=this._arrow.querySelector("svg"),r=this._arrow.clientWidth,s=this._arrow.clientHeight,n=`-${s-Co}px`,a=(r-s)/2,l=`-${s+a-Co}px`;switch(i){case"bottom":{this._arrow.style.top=n,o.style.transform="rotate(180deg)";break}case"top":{this._arrow.style.bottom=n,o.style.transform="rotate(0deg)";break}case"left":{this._arrow.style.right=l,o.style.transform="rotate(270deg)";break}case"right":{this._arrow.style.left=l,o.style.transform="rotate(90deg)";break}}}}}getArrowVariant(t){if(t.indexOf("bottom")!==-1)return"bottom";if(t.indexOf("top")!==-1)return"top";if(t.indexOf("left")!==-1)return"left";if(t.indexOf("right")!==-1)return"right"}get content(){return this._content||(this._content=this.firstElementChild,this._content.setAttribute("data-popper-content","")),this._content}addTargetClassForOpen(t){t&&t.classList.add($o)}removeTargetClassForOpen(t){t&&t.classList.remove($o)}};To.ID="sd-popover";var ge=To;customElements.get(ge.ID)||customElements.define(ge.ID,ge);var ki=class{getOffsetForIndexAndAlignment(t,i,o,r,s,n){let a=Math.max(0,n*r),l=Math.min(a,t*r),c=Math.max(0,t*r-s+r);switch(i){case"start":return l;case"end":return c;case"center":{let d=Math.round(c+(l-c)/2);return d<Math.ceil(s/2)?0:d>a+Math.floor(s/2)?a:d}case"auto":default:return o>=c&&o<=l?o:o<c?c:l}}debounce(t){let i;return(...o)=>{i&&window.cancelAnimationFrame(i),i=window.requestAnimationFrame(()=>{t(...o),i=null})}}},Gr=new ki;var Xr=":host{display:block;position:relative;contain:layout}:host(:focus){outline:none}:host(:focus-visible) ::slotted([focused]){box-shadow:0 0 0 1px #1467ba inset}.container{width:100%}.container>::slotted(*){width:100%;position:absolute;box-sizing:border-box}.container>::slotted(:not([last])){border-bottom:1px solid #d9d9d9}",Yr=Object.defineProperty,Jr=Object.getOwnPropertyDescriptor,xt=(e,t,i,o)=>{for(var r=o>1?void 0:o?Jr(t,i):t,s=e.length-1,n;s>=0;s--)(n=e[s])&&(r=(o?n(t,i,r):n(r))||r);return o&&r&&Yr(t,i,r),r};var Zr=0,yt,ut=(yt=class extends P{constructor(){super(),this.items=[],this.selectionType="trigger-only",this.id=yt.ID+"_"+Zr++,this.role="listbox",this.itemGenerator=Le,this._lastKnownScrollTop=0,this._lastRenderedScrollTop=0,this._itemsRenderData=[],this._elementCache=new Map,this._visibleItemsNum=0,this._selectedIndices=[],this._focusIndex=-1,this._lastKnownHeight=0,this.onScroll=()=>{this._lastKnownScrollTop=this.scrollTop;let e=this._lastRenderedScrollTop-this._lastKnownScrollTop;Math.abs(e)>=this.itemHeight&&(this._lastRenderedScrollTop=this._lastKnownScrollTop,this.requestUpdate())},this.handleKeyDown=e=>{let t=!0;switch(e.key){case"Down":case"ArrowDown":this.focusIndex=this.normalizeIndex(this.focusIndex+1);break;case"Up":case"ArrowUp":this.focusIndex=this.normalizeIndex(this.focusIndex-1);break;case"Enter":this.handleSelection(this.focusIndex,e.metaKey||e.ctrlKey);break;case"End":this.focusIndex=this.itemCount-1;break;case"PageDown":this.focusIndex=this.normalizeIndex(this.focusIndex+this._visibleItemsNum-1);break;case"Home":this.focusIndex=0;break;case"PageUp":this.focusIndex=this.normalizeIndex(this.focusIndex-this._visibleItemsNum+1);break;default:t=!1;break}t&&(e.preventDefault(),e.stopPropagation())},this._resizeObserver=new ResizeObserver(()=>{this._lastKnownHeight!==this.offsetHeight&&(this._lastKnownHeight=this.offsetHeight,this.requestUpdate())})}get focusTarget(){return this.hasAttribute("focus-target")}set focusTarget(e){this.toggleAttribute("focus-target",e)}get focusIndex(){return this._focusIndex}set focusIndex(e){if(e>=-1&&e<this.itemCount){let t=this._focusIndex;this._focusIndex=e,(e<=this._firstVisibleIndex||this._lastVisibleIndex<=e)&&this.scrollToItem(e),t!=e&&(e==-1&&this.removeAttribute("aria-activedescendant"),this.requestUpdate("focusIndex",t))}}get selectedIndices(){return this._selectedIndices}set selectedIndices(e){e?this._selectedIndices=e.map(t=>Number(t)):this._selectedIndices=[],this.requestUpdate("selectedIndices")}scrollToItem(e,t="auto"){this.scrollTop=Gr.getOffsetForIndexAndAlignment(this.normalizeIndex(e),t,this.scrollTop,this.itemHeight,this.height,this.itemCount),this._lastKnownScrollTop=this.scrollTop}getListItem(e){return!this.shadowRoot||e<this._firstVisibleIndex||this._lastVisibleIndex<e?null:this.querySelector(`[item-index="${e}"]`)}connectedCallback(){super.connectedCallback(),this._resizeObserver.observe(this),this.scrollTop!==this._lastKnownScrollTop&&(this.scrollTop=this._lastKnownScrollTop,this.requestUpdate())}disconnectedCallback(){super.disconnectedCallback(),this._resizeObserver.disconnect()}firstUpdated(e){super.firstUpdated(e),this.addEventListener("scroll",this.onScroll),this.addEventListener("keydown",this.handleKeyDown),this.addEventListener("click",this.handleClick),this.addEventListener("mousedown",t=>{t.button==1&&t.preventDefault()}),this.addEventListener("auxclick",this.handleClick),this.addEventListener("focus",()=>{this.matches(":focus-visible")&&(this.focusIndex==-1?(this.selectedIndices&&(this.focusIndex=this.selectedIndices[0]),this.focusIndex==-1&&this.itemCount>0&&(this.focusIndex=0)):this.updateFocusedItemAttributes())}),this.addEventListener("blur",()=>{this.focusIndex!=-1&&this.updateFocusedItemAttributes()}),this.selectedIndices.length>0&&this.scrollToItem(this.selectedIndices[0],"center")}updateFocusedItemAttributes(){let e=this.getListItem(this.focusIndex);e&&(this.focusTarget||document.activeElement==this?(e.setAttribute("focused",""),this.setAttribute("aria-activedescendant",e.id)):(e.removeAttribute("focused"),this.removeAttribute("aria-activedescendant")))}static get styles(){return[at`
                 ${X(Xr)}