@cas-smartdesign/token-selector 0.21.0 → 0.21.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -4,7 +4,7 @@ var window;(window||={})["@cas-smartdesign/token-selector"]=(()=>{var We=Object.
|
|
|
4
4
|
${X(Qo)}
|
|
5
5
|
`]}render(){return E`${this.iconToUse&&E`<img class="icon" src="${this.iconToUse}">`}${this.message}`}get iconToUse(){return this.icon||this._defaultIconPath}shouldUpdate(e){return e.has("level")&&(this._defaultIconPath=this.iconForLevel,!this.icon)?!0:super.shouldUpdate(e)}get iconForLevel(){switch(Kt.parseLevel(this.level)){case"warn":return ir;case"suggest":return er;case"error":return tr;default:return null}}},Kt.ID="sd-field-validation-message",Kt.levelConverter={fromAttribute(e){return Kt.parseLevel(e)},toAttribute(e){return e&&e.toLowerCase()}},Kt);di([h({type:String,attribute:!0})],ce.prototype,"message",2);di([h({type:String,attribute:!0})],ce.prototype,"icon",2);di([h({converter:ce.levelConverter,reflect:!0})],ce.prototype,"level",2);var de=ce,Gt=(e=>(e.Warn="warn",e.Suggest="suggest",e.Error="error",e))(Gt||{});customElements.get(de.ID)||customElements.define(de.ID,de);var sr=":host{display:inline-flex;position:relative;cursor:text;font-family:Segoe UI,Lucida Sans,Arial,sans-serif;font-size:16px;color:#111;contain:layout style;flex-direction:column}:host([hidden]),:host([type=hidden]){display:none!important}:host([effective-disabled]){opacity:.6;cursor:default;filter:grayscale(100%)}:host([effective-disabled]) .unfocused-line,:host([effective-disabled]) .focused-line{border-bottom-style:dashed}:host(:not([effective-disabled]):focus) .focused-line,:host(:not([effective-disabled])[focused]) .focused-line{transform:none;transition:transform .25s}:host(:not([effective-disabled]):focus) .label.float,:host(:not([effective-disabled])[focused]) .label.float{color:var(--sd-input-focused-color, #1467ba)}:host([inactive]) .input{pointer-events:none}:host([effective-disabled]:focus),:host([effective-disabled][focused]){box-shadow:0 0 0 1px #111}:host(:not([effective-disabled])[validationlevel]) .focused-line,:host(:not([effective-disabled]):invalid) .focused-line{transform:none;transition:transform .25s}:host([validationlevel=warn i]) .focused-line{border-bottom-color:var(--sd-input-validation-color, #555555)}:host([validationlevel=warn i]) .label,:host([validationlevel=warn i]) .validation-message{color:var(--sd-input-validation-color, #555555)!important}:host([validationlevel=suggest i]) .focused-line{border-bottom-color:var(--sd-input-validation-color, #bf8800)}:host([validationlevel=suggest i]) .label,:host([validationlevel=suggest i]) .validation-message{color:var(--sd-input-validation-color, #bf8800)!important}:host([validationlevel=error i]) .focused-line,:host(:not([validationlevel]):invalid) .focused-line{border-bottom-color:var(--sd-input-validation-color, #cc0017)}:host([validationlevel=error i]) .label,:host([validationlevel=error i]) .validation-message,:host(:not([validationlevel]):invalid) .label,:host(:not([validationlevel]):invalid) .validation-message{color:var(--sd-input-validation-color, #cc0017)!important}.validation-message-wrapper{position:relative}.validation-message{position:absolute;left:0;right:0}.label.float{transform:translateY(-75%) scale(.75);width:133%}.label:not(.float){max-width:100%}.floated-label-placeholder{height:20px;width:100%}.label{position:absolute;top:0;left:0;line-height:24px;pointer-events:none;color:var(--sd-input-color, #767676);transition:transform .25s,width .25s;transform-origin:left top}.input-wrapper{position:relative;display:flex;flex-direction:row;align-items:center;background-color:var(--input-wrapper-background-color)}:host([extended-prefix]:focus-within:not([effective-disabled])) .input-wrapper{flex-direction:column;align-items:baseline}:host([extended-prefix]:focus-within:not([effective-disabled])) .input-container{width:100%}:host([extended-prefix]:not(:focus-within)) .input-container,:host([extended-prefix][effective-disabled]) .input-container{width:0px}.input-container{line-height:var(--sd-input-line-height, 24px);flex:1 1 auto}.input{width:100%;background:var(--sd-input-background, transparent);font-family:inherit;font-size:inherit;text-align:inherit;color:inherit;border:none;outline:none;resize:none;padding-left:0;padding-right:0}.input:-webkit-autofill{animation-name:onautofillstart}.input:not(:-webkit-autofill){animation-name:onautofillcancel}@keyframes onautofillstart{0%{outline:none}}@keyframes onautofillcancel{0%{outline:none}}.label,input.input,.validation-message{text-overflow:ellipsis;overflow-x:hidden;white-space:nowrap}.input::placeholder{color:var(--sd-input-color, #767676)}.underline{height:2px;width:100%;position:relative}.unfocused-line,.focused-line{position:absolute;top:0;right:0;bottom:0;left:0}.unfocused-line{border-bottom:1px solid var(--sd-input-underline-color, #959595)}.focused-line{border-bottom:2px solid var(--sd-input-focused-color, #1467ba);transform-origin:center center;transform:scale3d(0,1,1)}.prefix,.suffix{display:flex;flex-wrap:nowrap;max-width:100%}.prefix ::slotted(*),.suffix ::slotted(*){display:flex}",nr=Object.defineProperty,ar=Object.getOwnPropertyDescriptor,I=(e,t,i,o)=>{for(var r=o>1?void 0:o?ar(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&&nr(t,i,r),r},lr="sd-lit-input",oo="delegatesFocus"in window.ShadowRoot.prototype,dr=0,nt,A=(nt=class extends D{constructor(){super(),this.rows=1,this.effectiveDisabled=!1,this.type="text",this.autocomplete="off";let e=dr++;this._validationMessageId=nt.ID+"_message_"+e,this._inputId=nt.ID+"_input_"+e,this.attachInternals&&!this.activeShadyDOM&&(this._internals=this.attachInternals())}connectedCallback(){super.connectedCallback(),this.hasAttribute("tabIndex")||(this.tabIndex=0)}firstUpdated(e){super.firstUpdated(e),this.initAutocompleted(this.inputElement),this.updateInitialValue(),this.updateFormValidity(),this.hasAttribute("disabled")&&(this.disabled=!0),this.inputElement.oninput=t=>{this.autocompleted=t.inputType==="insertReplacementText"||!("data"in t),this.currentText=this.inputElement.value,this.fireValueChange(!0)},this.inputElement.onchange=()=>this.fireValueChange(),oo||(this.inputElement.onfocus=()=>this.setAttribute("focused",""),this.inputElement.onblur=()=>this.removeAttribute("focused"),this.addEventListener("focus",t=>{t.target===this&&this.inputElement.focus()})),this.inputElement.addEventListener("keyup",()=>{this.updateFormValidity()}),this.addEventListener("keydown",t=>{var i,o;t.key=="Enter"&&((o=(i=this._internals)==null?void 0:i.form)==null||o.requestSubmit())}),this._initialized=!0}initAutocompleted(e){let t=i=>{/^onautofillstart(-sd-lit-input-\d+|\s?)$/.test(i.animationName)?this.autocompleted=!0:/^onautofillcancel(-sd-lit-input-\d+|\s?)$/.test(i.animationName)&&(this.autocompleted=!1)};this.activeShadyDOM?(this._needsAutocompletedCheck=!0,this.activeShadyDOM.nativeMethods.addEventListener.call(e,"animationstart",t)):e.addEventListener("animationstart",t)}get activeShadyDOM(){let e=window.ShadyDOM;return e&&e.inUse?e:null}updateInitialValue(){typeof this.currentText<"u"?this.value=this.currentText:this.value=this.getAttribute("value"),this.value&&(this.currentText=this.inputElement.value),this._initialValue=this.value}get disabled(){return this.hasAttribute("disabled")}set disabled(e){e?this.setAttribute("disabled",""):this.removeAttribute("disabled"),this._internals||(this.effectiveDisabled=e)}get inputElement(){return this.shadowRoot&&!this._inputElement&&(this._inputElement=this.shadowRoot.querySelector(".input")),this._inputElement}get value(){return this.inputElement&&this.inputElement.value}set value(e){this.currentText=e||"",this.inputElement&&(this.inputElement.value=this.currentText),this.setFormValue(this.currentText)}get selectionStart(){return this.inputElement?this.inputElement.selectionStart:0}focus(){this.inputElement?this.inputElement.focus():super.focus()}select(){this.inputElement&&this.inputElement.select()}setSelectionRange(e,t){this.updateComplete.then(()=>{this.inputElement&&this.inputElement.setSelectionRange(e,t)})}static get styles(){return[at`
|
|
6
6
|
${X(sr)}
|
|
7
|
-
`]}render(){var e;let t,i=this.validationMessage||((e=this.
|
|
7
|
+
`]}render(){var e;let t,i=this.validationMessage||((e=this.inputElement)==null?void 0:e.validationMessage);return this.rows===1?t=E`
|
|
8
8
|
<input
|
|
9
9
|
id=${this._inputId}
|
|
10
10
|
class="input"
|
|
@@ -129,7 +129,7 @@ var window;(window||={})["@cas-smartdesign/token-selector"]=(()=>{var We=Object.
|
|
|
129
129
|
<div class="icon-wrapper" style="${M(e)}" role="img">
|
|
130
130
|
<div part="icon" class="icon"></div>
|
|
131
131
|
</div>
|
|
132
|
-
`}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:Ci,reflect:!0,attribute:"aria-disabled"})],ft.prototype,"disabled",2);_t([h({converter:Ci,reflect:!0,attribute:"aria-current"})],ft.prototype,"current",2);_t([h({converter:Ci,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 ze="web application/json",Ii=class{constructor(t,i,o){navigator.clipboard&&(t.addEventListener("copy",()=>{let r=window.getSelection();(!r||r.type!="Range")&&!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:ze});navigator.clipboard.write([new ClipboardItem({[ze]:s})])}}async readFromClipboard(t){let i=await navigator.clipboard.read();for(let o of i)if(o.types.includes(ze)){let r=await(await o.getType(ze)).text(),s=JSON.parse(r);Array.isArray(s)&&t(s)}}},rs=":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){max-width:calc(100% - 24px);margin-right:24px;margin-bottom:4px}:host ::slotted(sd-token){--sd-token-border: 1px solid transparent;margin:1px}.input[focus-visible]:focus-within ::slotted(sd-token[aria-current=true]),.container:focus-visible ::slotted(sd-token[aria-current=true]){outline:1px solid #1467ba;--sd-token-focused-border: 1px solid #fff}.input[focus-visible]:focus-within ::slotted(sd-token[aria-current=true][aria-disabled=true]:not([aria-haspopup])),.container:focus-visible ::slotted(sd-token[aria-current=true][aria-disabled=true]:not([aria-haspopup])){outline-color:#767676}.container{outline:none;display:flex;flex-wrap:wrap;gap:6px;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:6px}",$i=class{constructor(t,i){this.tokenSelector=t;let o=new Map,r=s=>{let n=s.target;if(t.removeAttribute("drag-source"),!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}t.setAttribute("drag-source",""),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),t.removeAttribute("drag-source"),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}},ss=Object.defineProperty,ns=Object.getOwnPropertyDescriptor,tt=(e,t,i,o)=>{for(var r=o>1?void 0:o?ns(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&&ss(t,i,r),r};function as(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 D{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),this.inputElement.removeAttribute("focus-visible");return}switch(e.key){case"Escape":{e.preventDefault(),e.stopPropagation(),this.tokenSuggestPopover.hide();break}case"Tab":{this.commitTokenValue(t.value),this.tokenSuggestPopover.hide(),this.inputElement.removeAttribute("focus-visible");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,i=e.getModifierState("Control");i?t.checked=!t.checked:t.checked=!0,this.onTokenClick(t,!1,i),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.selectOrAddItems=e=>{let t=[],i=e.map((o,r)=>{let s=o.caption==null?-1:this.findIndex(o);return s!=-1&&!this.items[s].disabled&&!this.selectedIndexes.includes(s)?(t.push(r),s):-1}).filter(o=>o!=-1);return i.length>0&&this.handleTokenSelection(i),t},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=as(this.showFilteredTokenSuggestions.bind(this),200)}static get styles(){return X(rs)}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(){let e=this.inputElement;e?e.focus():this.shadowRoot.querySelector(".container").focus()}render(){return this.selectionMode=="remove-only"?E`<div class="container" tabindex="${this.disabled?-1:0}">
|
|
132
|
+
`}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:Ci,reflect:!0,attribute:"aria-disabled"})],ft.prototype,"disabled",2);_t([h({converter:Ci,reflect:!0,attribute:"aria-current"})],ft.prototype,"current",2);_t([h({converter:Ci,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 ze="web application/json",Ii=class{constructor(t,i,o){navigator.clipboard&&(t.addEventListener("copy",()=>{let r=window.getSelection();(!r||r.type!="Range")&&!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:ze});navigator.clipboard.write([new ClipboardItem({[ze]:s})])}}async readFromClipboard(t){let i=await navigator.clipboard.read();for(let o of i)if(o.types.includes(ze)){let r=await(await o.getType(ze)).text(),s=JSON.parse(r);Array.isArray(s)&&t(s)}}},rs=":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){max-width:calc(100% - 24px);margin-right:24px;margin-bottom:4px}:host ::slotted(sd-token){--sd-token-border: 1px solid transparent;margin:1px}.input[focus-visible]:focus-within ::slotted(sd-token[aria-current=true]),.container:focus-visible ::slotted(sd-token[aria-current=true]){outline:1px solid #1467ba;--sd-token-focused-border: 1px solid #fff}.input[focus-visible]:focus-within ::slotted(sd-token[aria-current=true][aria-disabled=true]:not([aria-haspopup])),.container:focus-visible ::slotted(sd-token[aria-current=true][aria-disabled=true]:not([aria-haspopup])){outline-color:#767676}.container{outline:none;display:flex;flex-wrap:wrap;gap:6px;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:6px}",$i=class{constructor(t,i){this.tokenSelector=t;let o=new Map,r=s=>{let n=s.target;if(t.removeAttribute("drag-source"),!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}t.setAttribute("drag-source",""),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),t.removeAttribute("drag-source"),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}},ss=Object.defineProperty,ns=Object.getOwnPropertyDescriptor,tt=(e,t,i,o)=>{for(var r=o>1?void 0:o?ns(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&&ss(t,i,r),r};function as(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 D{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),this.inputElement.removeAttribute("focus-visible");return}switch(e.key){case"Escape":{this.tokenSuggestPopover.isOpened&&(e.preventDefault(),e.stopPropagation(),this.tokenSuggestPopover.hide());break}case"Tab":{this.commitTokenValue(t.value),this.tokenSuggestPopover.hide(),this.inputElement.removeAttribute("focus-visible");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,i=e.getModifierState("Control");i?t.checked=!t.checked:t.checked=!0,this.onTokenClick(t,!1,i),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.selectOrAddItems=e=>{let t=[],i=e.map((o,r)=>{let s=o.caption==null?-1:this.findIndex(o);return s!=-1&&!this.items[s].disabled&&!this.selectedIndexes.includes(s)?(t.push(r),s):-1}).filter(o=>o!=-1);return i.length>0&&this.handleTokenSelection(i),t},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=as(this.showFilteredTokenSuggestions.bind(this),200)}static get styles(){return X(rs)}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(){let e=this.inputElement;e?e.focus():this.shadowRoot.querySelector(".container").focus()}render(){return this.selectionMode=="remove-only"?E`<div class="container" tabindex="${this.disabled?-1:0}">
|
|
133
133
|
<slot name="items"
|
|
134
134
|
>${this.placeholder?E`<span part="remove-only-placeholder" class="placeholder"
|
|
135
135
|
>${this.placeholder}</span
|
|
@@ -153,7 +153,7 @@ var window;(window||={})["@cas-smartdesign/token-selector"]=(()=>{var We=Object.
|
|
|
153
153
|
><div class="token-wrapper" slot="prefix"><slot name="items"></slot></div>
|
|
154
154
|
</sd-lit-input>
|
|
155
155
|
<slot class="additonal-content" name="additional-content" @focusin=${this.clearCheckedTokens}></slot>
|
|
156
|
-
`}firstUpdated(e){super.firstUpdated(e),this.setAttribute("role","listbox"),this.setAttribute("aria-multiselectable","true"),!this.hasAttribute("tabIndex")&&!this.disabled&&(this.tabIndex=0),this.addEventListener("focusout",t=>{let i=t.relatedTarget;!this.contains(i)&&!this.shadowRoot.contains(i)&&this.clearCheckedTokens()}),this.addEventListener("focusin",()=>{this.selectionMode=="remove-only"&&this.activeTokenIndex==-1&&this.items.length>0&&!this.disabled&&(this.activeTokenIndex=0)}),new Ii(this,()=>{var t;return(t=this.inputElement)==null?void 0:t.value},t=>this.selectOrAddItems(t)),new $i(this,t=>this.selectOrAddItems(t))}clearCheckedTokens(){this.querySelectorAll("[slot='items'][aria-checked='true']").forEach(t=>t.checked=!1);let e=this.inputElement;e&&(e.removeAttribute("focus-visible"),e.removeAttribute("focused"))}removeSelectionOrActiveToken(){if(!this.disabled){let e=this.querySelectorAll("[slot='items'][aria-checked='true']");if(e.length>0){let t=Array.from(e);this.removeTokens(t.filter(i=>!i.disabled).map(i=>i.index))}else if(this.activeTokenIndex!=-1){let t=this.activeTokenElement;t&&!t.disabled&&this.removeTokens([t.index])}}}updateActiveToken(e){var t;if(this.disabled)return;let i=this.querySelectorAll("[slot='items']").length-1;if(this.activeTokenIndex==-1?e<0&&(this.activeTokenIndex=i):this.activeTokenIndex==i&&e>0&&this.selectionMode=="multi"?(this.activeTokenIndex=-1,this.focus()):this.activeTokenIndex=Math.max(0,Math.min(i,this.activeTokenIndex+e)),this.activeTokenIndex>-1&&((t=this.inputElement)==null||t.setAttribute("focus-visible",""),this.scrollHeight>this.offsetHeight)){let o=this.activeTokenElement;o.scrollIntoViewIfNeeded?o.scrollIntoViewIfNeeded():o.scrollIntoView()}}commitTokenValue(e){if(this.disabled)return;if(this.tokenSuggestPopover.isOpened){let i=this.tokenSuggestPopover.focusedSuggestToken;if(i){if(!i.disabled){let o=this.findIndex(i);this.handleTokenSelection([o]),this.tokenSuggestPopover.hide()}return}}if(!(e!=null&&e.trim()))return;let t=this.items.findIndex(i=>this.caseSensitive?i.caption==e:i.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");let t=this.inputElement;t.addEventListener("immediate-value-change",i=>this.handleInputValueChange(i)),t.addEventListener("keydown",i=>this.handleInputKeyDown(i,t)),window.queueMicrotask(()=>this.tokenSuggestPopover)}else this.removeAttribute("aria-haspopup"),this.addEventListener("keydown",this.handleKeyDown),this._tokenSuggestPopover&&(this._tokenSuggestPopover.
|
|
156
|
+
`}firstUpdated(e){super.firstUpdated(e),this.setAttribute("role","listbox"),this.setAttribute("aria-multiselectable","true"),!this.hasAttribute("tabIndex")&&!this.disabled&&(this.tabIndex=0),this.addEventListener("focusout",t=>{let i=t.relatedTarget;!this.contains(i)&&!this.shadowRoot.contains(i)&&this.clearCheckedTokens()}),this.addEventListener("focusin",()=>{this.selectionMode=="remove-only"&&this.activeTokenIndex==-1&&this.items.length>0&&!this.disabled&&(this.activeTokenIndex=0)}),new Ii(this,()=>{var t;return(t=this.inputElement)==null?void 0:t.value},t=>this.selectOrAddItems(t)),new $i(this,t=>this.selectOrAddItems(t))}clearCheckedTokens(){this.querySelectorAll("[slot='items'][aria-checked='true']").forEach(t=>t.checked=!1);let e=this.inputElement;e&&(e.removeAttribute("focus-visible"),e.removeAttribute("focused"))}removeSelectionOrActiveToken(){if(!this.disabled){let e=this.querySelectorAll("[slot='items'][aria-checked='true']");if(e.length>0){let t=Array.from(e);this.removeTokens(t.filter(i=>!i.disabled).map(i=>i.index))}else if(this.activeTokenIndex!=-1){let t=this.activeTokenElement;t&&!t.disabled&&this.removeTokens([t.index])}}}updateActiveToken(e){var t;if(this.disabled)return;let i=this.querySelectorAll("[slot='items']").length-1;if(this.activeTokenIndex==-1?e<0&&(this.activeTokenIndex=i):this.activeTokenIndex==i&&e>0&&this.selectionMode=="multi"?(this.activeTokenIndex=-1,this.focus()):this.activeTokenIndex=Math.max(0,Math.min(i,this.activeTokenIndex+e)),this.activeTokenIndex>-1&&((t=this.inputElement)==null||t.setAttribute("focus-visible",""),this.scrollHeight>this.offsetHeight)){let o=this.activeTokenElement;o.scrollIntoViewIfNeeded?o.scrollIntoViewIfNeeded():o.scrollIntoView()}}commitTokenValue(e){if(this.disabled)return;if(this.tokenSuggestPopover.isOpened){let i=this.tokenSuggestPopover.focusedSuggestToken;if(i){if(!i.disabled){let o=this.findIndex(i);this.handleTokenSelection([o]),this.tokenSuggestPopover.hide()}return}}if(!(e!=null&&e.trim()))return;let t=this.items.findIndex(i=>this.caseSensitive?i.caption==e:i.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");let t=this.inputElement;t.addEventListener("immediate-value-change",i=>this.handleInputValueChange(i)),t.addEventListener("keydown",i=>this.handleInputKeyDown(i,t)),window.queueMicrotask(()=>this.tokenSuggestPopover)}else this.removeAttribute("aria-haspopup"),this.addEventListener("keydown",this.handleKeyDown),this._tokenSuggestPopover&&(this._tokenSuggestPopover.hide(),this._tokenSuggestPopover=null);(e.size==0||e.has("selectionMode")||e.has("items")||e.has("selectedIndexes")||e.has("disabled"))&&this.updateItems(),e.has("inputLabel")&&(this.inputLabel?this.setAttribute("aria-label",this.inputLabel):this.removeAttribute("aria-label"))}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 Si(this.inputElement,()=>this.items.filter((e,t)=>!e.disabled&&this.isTokenNotSelected(t)),e=>{let t=this.findIndex(e);this.handleTokenSelection([t]),window.removeEventListener("pointerdown",this.handleWindowPointerDown)},e=>{this.appendChild(e.popover),this.inputElement.setAttribute("aria-controls",e.list.id),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;this.activeTokenIndex=-1;let e=this.inputElement;e&&(!this._tokenSuggestPopover||!this._tokenSuggestPopover.isOpened)&&(e.value=""),this.querySelectorAll("[slot='items']").forEach(o=>{this.removeChild(o)});let t=document.createDocumentFragment(),i=[];this.selectionMode=="remove-only"?i=this.items.map(o=>this.disableIfNeeded(o)):this.selectedIndexes.forEach(o=>{i.push(this.disableIfNeeded(this.items[o]))}),i.forEach(o=>{let r=this.tokenGenerator(o,this.findIndex(o));r.slot="items",t.appendChild(r),r.id||(r.id=window.crypto.getRandomValues(new Uint32Array(1))[0].toString(16)),r.setClickHandler((s,n)=>this.onTokenClick(r,!0,n)),r.addEventListener("click",()=>{var s;(s=this.inputElement)==null||s.removeAttribute("focus-visible");let n=window.getSelection();(!n||n.type!="Range")&&document.activeElement!=this&&this.focus()}),r.setDeleteHandler(s=>this.removeTokens([s]))}),this.appendChild(t),this._tokenSuggestPopover&&this._tokenSuggestPopover.refreshItems()}removeTokens(e){if(!(this.disabled||e==null||e.length==0))if(this.activeTokenIndex!=-1&&e.includes(this.activeTokenElement.index)&&(this.activeTokenIndex=-1),this.selectionMode=="remove-only")this.dispatchEvent(new CustomEvent("tokens-removed",{detail:{removedIndices:e}}));else{let t=e.filter(i=>this.selectedIndexes.includes(i));t.length>0&&(this.selectedIndexes=this.selectedIndexes.filter(i=>!t.includes(i)),this.dispatchEvent(new CustomEvent("tokens-removed",{detail:{removedIndices:t,selectedIndices:[...this.selectedIndexes]}})))}}onTokenClick(e,t,i){let o;this.querySelectorAll("[slot='items']").forEach((r,s)=>{e==r?o=s:i||r.setAttribute("aria-checked","false")}),this.activeTokenIndex=o,this.setAttribute("aria-activedescendant",this.activeTokenElement.id),this._tokenSuggestPopover&&this._tokenSuggestPopover.isOpened&&this._tokenSuggestPopover.hide(),i||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){let t=this.activeTokenElement;t&&(t.current=!1)}if(this._activeTokenIndex=e,e==-1)this.removeAttribute("aria-activedescendant");else{let t=this.activeTokenElement;t.current=!0,this.setAttribute("aria-activedescendant",t.id)}}get hasInputValue(){var e;return!!((e=this.inputElement)!=null&&e.value)}},wt.ID="sd-token-selector",wt.ensureDefined=()=>{qe.ensureDefined(),customElements.get(wt.ID)||customElements.define(wt.ID,wt)},wt.shadowRootOptions={...D.shadowRootOptions,delegatesFocus:!0},wt);tt([h({type:String,attribute:"selection-mode",reflect:!0})],Y.prototype,"selectionMode",2);tt([h({type:Array,attribute:!1})],Y.prototype,"items",2);tt([h({type:Array,attribute:!1})],Y.prototype,"selectedIndexes",2);tt([h({type:String,reflect:!0})],Y.prototype,"placeholder",2);tt([h({type:String,reflect:!0,attribute:"suggest-list-class"})],Y.prototype,"suggestListClass",2);tt([h({type:String,reflect:!0,attribute:"input-label"})],Y.prototype,"inputLabel",2);tt([h({converter:{fromAttribute:e=>e=="true",toAttribute:e=>e},reflect:!0,attribute:"aria-disabled"})],Y.prototype,"disabled",2);tt([h({type:String,attribute:!0})],Y.prototype,"validationMessage",2);tt([h({type:String,attribute:!0})],Y.prototype,"validationIconSrc",2);tt([h({converter:de.levelConverter,attribute:!0,reflect:!0})],Y.prototype,"validationLevel",2);tt([h({type:String,reflect:!0,attribute:"token-type"})],Y.prototype,"tokenType",2);tt([h({type:Boolean,reflect:!0,attribute:"case-sensitive"})],Y.prototype,"caseSensitive",2);var ls=Y;return jo(ds);})();
|
|
157
157
|
/*! Bundled license information:
|
|
158
158
|
|
|
159
159
|
@lit/reactive-element/css-tag.js:
|