@cas-smartdesign/token-selector 0.17.1 → 0.17.2

package/dist/docs/doc.mjs

@@ -569,7 +569,7 @@ export function getItems(): ExtendedTokenData[] {
             </div>
         `}renderIcon(){if(this.icon||this.iconPlaceholder){const e=this.iconBackgroundColor!=null?`--token-icon-background-color: ${this.iconBackgroundColor}`:void 0;return Z`
                 <div class="icon-wrapper" style="${le(e)}" role="img">
-                    <div class="icon"></div>
+                    <div part="icon" class="icon"></div>
                 </div>
             `}return z}updated(e){super.updated(e),(e.has("icon")||e.has("iconPlaceholder"))&&(this.icon||this.iconPlaceholder)&&Gs.showImage(this.shadowRoot.querySelector(".icon"),this.icon,this.iconPlaceholder),e.has("disabled")&&!this.disabled&&this.checked&&(this.checked=!1)}setClickHandler(e){this._tokenClickHandler=e}setDeleteHandler(e){this._tokenDeleteHandler=e}},Ce.ID="sd-token",Ce.ensureDefined=()=>{customElements.get(Ce.ID)||customElements.define(Ce.ID,Ce)},Ce);je([b({type:String,attribute:!0,reflect:!0})],Le.prototype,"value",2);je([b({type:String,attribute:!0,reflect:!0})],Le.prototype,"type",2);je([b({type:String})],Le.prototype,"icon",2);je([b({type:String})],Le.prototype,"iconPlaceholder",2);je([b({type:String})],Le.prototype,"iconBackgroundColor",2);je([b({converter:Ii,reflect:!0,attribute:"aria-disabled"})],Le.prototype,"disabled",2);je([b({converter:Ii,reflect:!0,attribute:"aria-current"})],Le.prototype,"current",2);je([b({converter:Ii,reflect:!0,attribute:"aria-checked"})],Le.prototype,"checked",1);let Cn=Le;const zl=(i,e)=>{const t=document.createElement(Cn.ID);return i&&(t.value=i.caption,t.type=i.type,t.icon=i.icon,t.iconPlaceholder=i.iconPlaceholder,t.iconBackgroundColor=i.iconBackgroundColor,t.disabled=i.disabled,t.index=e),t};Cn.ensureDefined();const Xt="web application/json";class Ul{constructor(e,t,n){navigator.clipboard&&(e.addEventListener("copy",()=>{t()||this.writeToClipboard(e)}),e.addEventListener("cut",()=>{t()||(e.removeSelectionOrActiveToken(),this.writeToClipboard(e))}),e.addEventListener("paste",()=>{e.disabled||this.readFromClipboard(n)}))}writeToClipboard(e){const t=e.querySelectorAll("[slot='items'][aria-checked='true']"),n=[];if(t.length>0)t.forEach(s=>n.push(s.index));else if(e.activeTokenIndex!=-1){const s=e.activeTokenElement;s&&n.push(s.index)}if(n.length>0){const s=JSON.stringify(n.map(o=>e.items[o])),r=new Blob([s],{type:Xt});navigator.clipboard.write([new ClipboardItem({[Xt]:r})])}}async readFromClipboard(e){const t=await navigator.clipboard.read();for(const n of t)if(n.types.includes(Xt)){const r=await(await n.getType(Xt)).text(),o=JSON.parse(r);Array.isArray(o)&&e(o)}}}const Hl=":host{display:flex;contain:layout style}:host .additonal-content::slotted(*){align-self:end;flex-shrink:0}:host([drop]) ::slotted(*){pointer-events:none}:host(:not([readonly])) ::slotted(sd-token:last-of-type){margin-right:24px;margin-bottom:4px}.container{display:flex;flex-wrap:wrap;gap:8px;flex-grow:1;min-width:0;margin-top:auto}.container .placeholder{color:#767676;line-height:24px;align-self:flex-end}.input{flex-grow:1;min-width:0;width:100%;margin-top:auto}.input .token-wrapper{display:flex;flex-wrap:wrap;flex:1 0 auto;width:100%;gap:8px}";class Fl{constructor(e,t){this.tokenSelector=e;const n=new Map,s=r=>{const o=r.target;if(!e.contains(o)){const a=r.addedIndexes;a&&e.removeTokens(a.map(l=>n.get(l)))}n.clear()};e.addEventListener("dragstart",r=>{const o=r.target;if(o instanceof Cn){if(o.disabled){r.preventDefault();return}o.setAttribute("aria-checked","true");const a=e.querySelectorAll("[slot='items'][aria-checked='true']");if(a.length>0){const l=Array.from(a).filter(c=>!c.disabled).map((c,d)=>(n.set(d,c.index),e.items[c.index]));if(r.dataTransfer.setData("text/sd-token-selector",JSON.stringify(l)),r.dataTransfer.dropEffect="move",r.dataTransfer.effectAllowed="move",a.length>1){const c=this.createCustomDragImage(o,l.length);r.dataTransfer.setDragImage(c,-14,-14)}window.addEventListener("drop",s,{once:!0})}}}),e.addEventListener("dragenter",r=>{e.setAttribute("drop",""),r.preventDefault()}),e.addEventListener("dragover",r=>r.preventDefault()),e.addEventListener("dragleave",r=>{r.target==e&&e.removeAttribute("drop")}),e.addEventListener("drop",r=>{e.removeAttribute("drop");const o=r.dataTransfer.getData("text/sd-token-selector");if(o)try{const a=JSON.parse(o);Array.isArray(a)&&(r.addedIndexes=t(a),r.preventDefault())}catch{}}),e.addEventListener("dragend",()=>{window.removeEventListener("drop",s),n.clear()})}createCustomDragImage(e,t){let n=e.cloneNode(!0);if(n.setAttribute("aria-disabled","true"),this.tokenSelector.tokenType)n.value=t+" "+this.tokenSelector.tokenType;else{const s=document.createElement("div");s.innerText="+"+(t-1),Object.assign(s.style,{position:"absolute",left:"90%",top:"75%"});const r=document.createElement("div");r.appendChild(n),r.appendChild(s),n=r}return Object.assign(n.style,{height:e.offsetHeight,outline:"none",maxWidth:"500px",position:"absolute",display:"block",left:"-99999px",overflow:"visible",margin:"1px"}),n.slot="items",this.tokenSelector.appendChild(n),requestAnimationFrame(()=>n.remove()),n}}var Wl=Object.defineProperty,ql=Object.getOwnPropertyDescriptor,ge=(i,e,t,n)=>{for(var s=n>1?void 0:n?ql(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&&Wl(e,t,s),s};function Vl(i,e){let t;return function(...n){t!=null&&clearTimeout(t),t=window.setTimeout(()=>i(...n),e)}}var Se;const de=(Se=class extends ue{constructor(){super(...arguments),this.selectionMode="multi",this.items=[],this.selectedIndexes=[],this._tokenGenerator=zl,this._autoSuggestItemGenerator=Ks,this.additionalTokenCommittingKeys=[],this._activeTokenIndex=-1,this.handleInputKeyDown=(e,t)=>{if((e.key==="Enter"||this.additionalTokenCommittingKeys.includes(e.key))&&t.value){e.preventDefault(),e.stopPropagation(),this.commitTokenValue(t.value);return}switch(e.key){case"Escape":{e.preventDefault(),e.stopPropagation(),this.tokenSuggestPopover.hide();break}case"Tab":{this.commitTokenValue(t.value),this.tokenSuggestPopover.hide();break}default:this.handleKeyDown(e)}},this.handleKeyDown=e=>{switch(e.key){case"ArrowLeft":{this.hasInputValue||this.updateActiveToken(-1);break}case"ArrowRight":{this.hasInputValue||this.updateActiveToken(1);break}case"Enter":{if(!this.hasInputValue&&this.activeTokenIndex!=-1){const t=this.activeTokenElement;e.getModifierState("Control")?t.checked=!t.checked:(t.checked=!0,this.onTokenClick(t,!1)),document.activeElement!=this&&this.focus()}break}case"Backspace":{this.hasInputValue||(this.activeTokenIndex==-1?this.updateActiveToken(-1):this.removeSelectionOrActiveToken());break}case"Clear":case"Delete":{this.removeSelectionOrActiveToken();break}case"a":{!this.hasInputValue&&e.getModifierState("Control")&&(this.querySelectorAll("[slot='items']").forEach(t=>t.checked=!0),e.preventDefault(),e.stopPropagation());break}}},this.handleWindowPointerDown=e=>{const t=this.inputElement;if(!t||!t.value)return;e.composedPath().some(s=>{if(s instanceof HTMLElement&&(e.composedPath().indexOf(t)>-1||s.getAttribute("popover-for")==="token-autosuggest-popover"))return!0})||this.commitTokenValue(t.value)},this.debouncedShowTokenSuggestPopover=Vl(this.showFilteredTokenSuggestions.bind(this),200)}static get styles(){return Ze(Hl)}get tokenGenerator(){return this._tokenGenerator}set tokenGenerator(e){this._tokenGenerator=e,this.render()}get autoSuggestItemGenerator(){return this._autoSuggestItemGenerator}set autoSuggestItemGenerator(e){this._autoSuggestItemGenerator=e,this._tokenSuggestPopover&&(this._tokenSuggestPopover.list.itemGenerator=e)}setAdditionalTokenCommittingKeys(e){this.additionalTokenCommittingKeys=e}openSuggestions(){this.inputElement&&(this.focus(),this.tokenSuggestPopover.show())}focus(){this.inputElement?this.inputElement.focus():this.shadowRoot.querySelector(".container").focus()}render(){return this.selectionMode=="remove-only"?Z`<div class="container" tabindex="0">
                       <slot name="items"
@@ -809,6 +809,10 @@ https://github.com/highlightjs/highlight.js/issues/2277`),B=u,C=v),k===void 0&&(
 <li>Applies to the placeholder text which is shown when the selector has no selection in <code>remove-only</code> mode.</li>
 </ul>
 </li>
+<li><code>icon</code> part of tokens<ul>
+<li>Applies to the icon element within the wrapper around it that defines the <code>iconBackgroundColor</code> for example.</li>
+</ul>
+</li>
 </ul>
 <h2 id="custom-events">Custom Events</h2>
 <ul>

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

@@ -124,7 +124,7 @@ var window;(window||={})["@cas-smartdesign/token-selector"]=(()=>{var We=Object.
             </div>
         `}renderIcon(){if(this.icon||this.iconPlaceholder){let e=this.iconBackgroundColor!=null?`--token-icon-background-color: ${this.iconBackgroundColor}`:void 0;return E`
                 <div class="icon-wrapper" style="${V(e)}" role="img">
-                    <div class="icon"></div>
+                    <div part="icon" class="icon"></div>
                 </div>
             `}return b}updated(e){super.updated(e),(e.has("icon")||e.has("iconPlaceholder"))&&(this.icon||this.iconPlaceholder)&&Xt.showImage(this.shadowRoot.querySelector(".icon"),this.icon,this.iconPlaceholder),e.has("disabled")&&!this.disabled&&this.checked&&(this.checked=!1)}setClickHandler(e){this._tokenClickHandler=e}setDeleteHandler(e){this._tokenDeleteHandler=e}},Bt.ID="sd-token",Bt.ensureDefined=()=>{customElements.get(Bt.ID)||customElements.define(Bt.ID,Bt)},Bt);_t([h({type:String,attribute:!0,reflect:!0})],ft.prototype,"value",2);_t([h({type:String,attribute:!0,reflect:!0})],ft.prototype,"type",2);_t([h({type:String})],ft.prototype,"icon",2);_t([h({type:String})],ft.prototype,"iconPlaceholder",2);_t([h({type:String})],ft.prototype,"iconBackgroundColor",2);_t([h({converter:$i,reflect:!0,attribute:"aria-disabled"})],ft.prototype,"disabled",2);_t([h({converter:$i,reflect:!0,attribute:"aria-current"})],ft.prototype,"current",2);_t([h({converter:$i,reflect:!0,attribute:"aria-checked"})],ft.prototype,"checked",1);var qe=ft,Oo=(e,t)=>{let i=document.createElement(qe.ID);return e&&(i.value=e.caption,i.type=e.type,i.icon=e.icon,i.iconPlaceholder=e.iconPlaceholder,i.iconBackgroundColor=e.iconBackgroundColor,i.disabled=e.disabled,i.index=t),i};qe.ensureDefined();var Ue="web application/json",Ii=class{constructor(t,i,o){navigator.clipboard&&(t.addEventListener("copy",()=>{i()||this.writeToClipboard(t)}),t.addEventListener("cut",()=>{i()||(t.removeSelectionOrActiveToken(),this.writeToClipboard(t))}),t.addEventListener("paste",()=>{t.disabled||this.readFromClipboard(o)}))}writeToClipboard(t){let i=t.querySelectorAll("[slot='items'][aria-checked='true']"),o=[];if(i.length>0)i.forEach(r=>o.push(r.index));else if(t.activeTokenIndex!=-1){let r=t.activeTokenElement;r&&o.push(r.index)}if(o.length>0){let r=JSON.stringify(o.map(n=>t.items[n])),s=new Blob([r],{type:Ue});navigator.clipboard.write([new ClipboardItem({[Ue]:s})])}}async readFromClipboard(t){let i=await navigator.clipboard.read();for(let o of i)if(o.types.includes(Ue)){let r=await(await o.getType(Ue)).text(),s=JSON.parse(r);Array.isArray(s)&&t(s)}}},os=":host{display:flex;contain:layout style}:host .additonal-content::slotted(*){align-self:end;flex-shrink:0}:host([drop]) ::slotted(*){pointer-events:none}:host(:not([readonly])) ::slotted(sd-token:last-of-type){margin-right:24px;margin-bottom:4px}.container{display:flex;flex-wrap:wrap;gap:8px;flex-grow:1;min-width:0;margin-top:auto}.container .placeholder{color:#767676;line-height:24px;align-self:flex-end}.input{flex-grow:1;min-width:0;width:100%;margin-top:auto}.input .token-wrapper{display:flex;flex-wrap:wrap;flex:1 0 auto;width:100%;gap:8px}",Ci=class{constructor(t,i){this.tokenSelector=t;let o=new Map,r=s=>{let n=s.target;if(!t.contains(n)){let a=s.addedIndexes;a&&t.removeTokens(a.map(l=>o.get(l)))}o.clear()};t.addEventListener("dragstart",s=>{let n=s.target;if(n instanceof qe){if(n.disabled){s.preventDefault();return}n.setAttribute("aria-checked","true");let a=t.querySelectorAll("[slot='items'][aria-checked='true']");if(a.length>0){let l=Array.from(a).filter(c=>!c.disabled).map((c,d)=>(o.set(d,c.index),t.items[c.index]));if(s.dataTransfer.setData("text/sd-token-selector",JSON.stringify(l)),s.dataTransfer.dropEffect="move",s.dataTransfer.effectAllowed="move",a.length>1){let c=this.createCustomDragImage(n,l.length);s.dataTransfer.setDragImage(c,-14,-14)}window.addEventListener("drop",r,{once:!0})}}}),t.addEventListener("dragenter",s=>{t.setAttribute("drop",""),s.preventDefault()}),t.addEventListener("dragover",s=>s.preventDefault()),t.addEventListener("dragleave",s=>{s.target==t&&t.removeAttribute("drop")}),t.addEventListener("drop",s=>{t.removeAttribute("drop");let n=s.dataTransfer.getData("text/sd-token-selector");if(n)try{let a=JSON.parse(n);Array.isArray(a)&&(s.addedIndexes=i(a),s.preventDefault())}catch{}}),t.addEventListener("dragend",()=>{window.removeEventListener("drop",r),o.clear()})}createCustomDragImage(t,i){let o=t.cloneNode(!0);if(o.setAttribute("aria-disabled","true"),this.tokenSelector.tokenType)o.value=i+" "+this.tokenSelector.tokenType;else{let r=document.createElement("div");r.innerText="+"+(i-1),Object.assign(r.style,{position:"absolute",left:"90%",top:"75%"});let s=document.createElement("div");s.appendChild(o),s.appendChild(r),o=s}return Object.assign(o.style,{height:t.offsetHeight,outline:"none",maxWidth:"500px",position:"absolute",display:"block",left:"-99999px",overflow:"visible",margin:"1px"}),o.slot="items",this.tokenSelector.appendChild(o),requestAnimationFrame(()=>o.remove()),o}},rs=Object.defineProperty,ss=Object.getOwnPropertyDescriptor,tt=(e,t,i,o)=>{for(var r=o>1?void 0:o?ss(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&&rs(t,i,r),r};function ns(e,t){let i;return function(...o){i!=null&&clearTimeout(i),i=window.setTimeout(()=>e(...o),t)}}var Po=(e=>(e.RemoveOnly="remove-only",e.Multi="multi",e))(Po||{}),wt,Y=(wt=class extends P{constructor(){super(...arguments),this.selectionMode="multi",this.items=[],this.selectedIndexes=[],this._tokenGenerator=Oo,this._autoSuggestItemGenerator=Le,this.additionalTokenCommittingKeys=[],this._activeTokenIndex=-1,this.handleInputKeyDown=(e,t)=>{if((e.key==="Enter"||this.additionalTokenCommittingKeys.includes(e.key))&&t.value){e.preventDefault(),e.stopPropagation(),this.commitTokenValue(t.value);return}switch(e.key){case"Escape":{e.preventDefault(),e.stopPropagation(),this.tokenSuggestPopover.hide();break}case"Tab":{this.commitTokenValue(t.value),this.tokenSuggestPopover.hide();break}default:this.handleKeyDown(e)}},this.handleKeyDown=e=>{switch(e.key){case"ArrowLeft":{this.hasInputValue||this.updateActiveToken(-1);break}case"ArrowRight":{this.hasInputValue||this.updateActiveToken(1);break}case"Enter":{if(!this.hasInputValue&&this.activeTokenIndex!=-1){let t=this.activeTokenElement;e.getModifierState("Control")?t.checked=!t.checked:(t.checked=!0,this.onTokenClick(t,!1)),document.activeElement!=this&&this.focus()}break}case"Backspace":{this.hasInputValue||(this.activeTokenIndex==-1?this.updateActiveToken(-1):this.removeSelectionOrActiveToken());break}case"Clear":case"Delete":{this.removeSelectionOrActiveToken();break}case"a":{!this.hasInputValue&&e.getModifierState("Control")&&(this.querySelectorAll("[slot='items']").forEach(t=>t.checked=!0),e.preventDefault(),e.stopPropagation());break}}},this.handleWindowPointerDown=e=>{let t=this.inputElement;!t||!t.value||e.composedPath().some(i=>{if(i instanceof HTMLElement&&(e.composedPath().indexOf(t)>-1||i.getAttribute("popover-for")==="token-autosuggest-popover"))return!0})||this.commitTokenValue(t.value)},this.debouncedShowTokenSuggestPopover=ns(this.showFilteredTokenSuggestions.bind(this),200)}static get styles(){return X(os)}get tokenGenerator(){return this._tokenGenerator}set tokenGenerator(e){this._tokenGenerator=e,this.render()}get autoSuggestItemGenerator(){return this._autoSuggestItemGenerator}set autoSuggestItemGenerator(e){this._autoSuggestItemGenerator=e,this._tokenSuggestPopover&&(this._tokenSuggestPopover.list.itemGenerator=e)}setAdditionalTokenCommittingKeys(e){this.additionalTokenCommittingKeys=e}openSuggestions(){this.inputElement&&(this.focus(),this.tokenSuggestPopover.show())}focus(){this.inputElement?this.inputElement.focus():this.shadowRoot.querySelector(".container").focus()}render(){return this.selectionMode=="remove-only"?E`<div class="container" tabindex="0">
                       <slot name="items"