npm - @oiz/stzh-components - Versions diffs - 2.12.0 → 2.13.0-beta1 - Mend

@oiz/stzh-components 2.12.0 → 2.13.0-beta1

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.

Files changed (111) hide show

package/dist/collection/libraries/tom-select/js/tom-select.complete.js CHANGED Viewed

@@ -1610,6 +1610,7 @@
 	  searchField: ['text'],
 	  searchConjunction: 'and',
 	  mode: null,
+	  openDisplay: 'block',
 	  wrapperClass: 'ts-wrapper',
 	  controlClass: 'ts-control',
 	  dropdownClass: 'ts-dropdown',
@@ -3191,7 +3192,7 @@
 	    const groups = {};
 	    const groups_order = [];
 	    var self = this;
-	    var query = self.inputValue();
+	    var query = this.settings.transformLoadQuery(this.control_input.value);
 	    const same_query = query === self.lastQuery || query == '' && self.lastQuery == null;
 	    var results = self.search(query);
 	    var active_option = null;
@@ -3963,12 +3964,12 @@
 	    self.refreshState();
 	    applyCSS(self.dropdown, {
 	      visibility: 'hidden',
-	      display: 'block'
+	      display: self.settings.openDisplay
 	    });
 	    self.positionDropdown();
 	    applyCSS(self.dropdown, {
 	      visibility: 'visible',
-	      display: 'block'
+	      display: self.settings.openDisplay
 	    });
 	    self.focus();
 	    self.trigger('dropdown_open', self.dropdown);

package/dist/collection/libraries/tom-select/js/tom-select.complete.min.js CHANGED Viewed

@@ -123,7 +123,7 @@ n.splitText(i[0].length)
 var o=n.cloneNode(!0)
 return s.appendChild(o),U(n,s),1}return 0})(e):((e=>{1!==e.nodeType||!e.childNodes||/(script|style)/i.test(e.tagName)||"highlight"===e.className&&"SPAN"===e.tagName||Array.from(e.childNodes).forEach((e=>{i(e)}))})(e),0)
 i(e)},W="undefined"!=typeof navigator&&/Mac/.test(navigator.userAgent)?"metaKey":"ctrlKey"
-var X={options:[],optgroups:[],plugins:[],delimiter:",",splitOn:null,persist:!0,diacritics:!0,create:null,createOnBlur:!1,createFilter:null,highlight:!0,openOnFocus:!0,shouldOpen:null,maxOptions:50,maxItems:null,hideSelected:null,duplicates:!1,addPrecedence:!1,selectOnTab:!1,preload:null,allowEmptyOption:!1,loadThrottle:300,loadingClass:"loading",dataAttr:null,optgroupField:"optgroup",valueField:"value",labelField:"text",disabledField:"disabled",optgroupLabelField:"label",optgroupValueField:"value",lockOptgroupOrder:!1,sortField:"$order",searchField:["text"],searchConjunction:"and",mode:null,wrapperClass:"ts-wrapper",controlClass:"ts-control",dropdownClass:"ts-dropdown",dropdownContentClass:"ts-dropdown-content",itemClass:"item",optionClass:"option",dropdownParent:null,controlInput:'<input type="text" autocomplete="off" size="1" />',copyClassesToDropdown:!1,placeholder:null,hidePlaceholder:null,transformLoadQuery:function(e){return e.trim()},shouldLoad:function(e){return e.length>0},render:{}}
+var X={options:[],optgroups:[],plugins:[],delimiter:",",splitOn:null,persist:!0,diacritics:!0,create:null,createOnBlur:!1,createFilter:null,highlight:!0,openOnFocus:!0,shouldOpen:null,maxOptions:50,maxItems:null,hideSelected:null,duplicates:!1,addPrecedence:!1,selectOnTab:!1,preload:null,allowEmptyOption:!1,loadThrottle:300,loadingClass:"loading",dataAttr:null,optgroupField:"optgroup",valueField:"value",labelField:"text",disabledField:"disabled",optgroupLabelField:"label",optgroupValueField:"value",lockOptgroupOrder:!1,sortField:"$order",searchField:["text"],searchConjunction:"and",mode:null,openDisplay:"block",wrapperClass:"ts-wrapper",controlClass:"ts-control",dropdownClass:"ts-dropdown",dropdownContentClass:"ts-dropdown-content",itemClass:"item",optionClass:"option",dropdownParent:null,controlInput:'<input type="text" autocomplete="off" size="1" />',copyClassesToDropdown:!1,placeholder:null,hidePlaceholder:null,transformLoadQuery:function(e){return e.trim()},shouldLoad:function(e){return e.length>0},render:{}}
 const Y=e=>null==e?null:Z(e),Z=e=>"boolean"==typeof e?e?"1":"0":e+"",ee=e=>(e+"").replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;"),te=(e,t)=>{var i
 return function(s,n){var o=this
 i&&(o.loading=Math.max(o.loading-1,0),clearTimeout(i)),i=setTimeout((function(){i=null,o.loadedSearches[s]=!0,e.call(o,s,n)}),t)}},ie=(e,t,i)=>{var s,n=e.trigger,o={}
@@ -239,7 +239,7 @@ if(s.settings.score&&"function"!=typeof(i=s.settings.score.call(s,e)))throw new
 return e!==s.lastQuery?(s.lastQuery=e,t=s.sifter.search(e,Object.assign(n,{score:i})),s.currentResults=t):t=Object.assign({},s.currentResults),s.settings.hideSelected&&(t.items=t.items.filter((e=>{let t=Y(e.id)
 return!(t&&-1!==s.items.indexOf(t))}))),t}refreshOptions(e=!0){var t,i,s,n,o,r,l,a,c,d
 const u={},p=[]
-var h=this,g=h.inputValue()
+var h=this,g=this.settings.transformLoadQuery(this.control_input.value)
 const f=g===h.lastQuery||""==g&&null==h.lastQuery
 var v,m=h.search(g),y=null,b=h.settings.shouldOpen||!1,O=h.dropdown_content
 for(f&&(y=h.activeOption)&&(c=y.closest("[data-group]")),n=m.items.length,"number"==typeof h.settings.maxOptions&&(n=Math.min(n,h.settings.maxOptions)),n>0&&(b=!0),t=0;t<n;t++){let e=m.items[t]
@@ -322,7 +322,7 @@ const n=t.input.querySelector('option[value=""]')
 if(t.is_select_tag){const o=[],r=t.input.querySelectorAll("option:checked").length
 function l(e,i,s){return e||(e=q('<option value="'+ee(i)+'">'+ee(s)+"</option>")),e!=n&&t.input.append(e),o.push(e),(e!=n||r>0)&&(e.selected=!0),e}t.input.querySelectorAll("option:checked").forEach((e=>{e.selected=!1})),0==t.items.length&&"single"==t.settings.mode?l(n,"",""):t.items.forEach((e=>{if(i=t.options[e],s=i[t.settings.labelField]||"",o.includes(i.$option)){l(t.input.querySelector(`option[value="${le(e)}"]:not(:checked)`),e,s)}else i.$option=l(i.$option,e,s)}))}else t.input.value=t.getValue()
 t.isSetup&&(e.silent||t.trigger("change",t.getValue()))}open(){var e=this
-e.isLocked||e.isOpen||"multi"===e.settings.mode&&e.isFull()||(e.isOpen=!0,G(e.focus_node,{"aria-expanded":"true"}),e.refreshState(),N(e.dropdown,{visibility:"hidden",display:"block"}),e.positionDropdown(),N(e.dropdown,{visibility:"visible",display:"block"}),e.focus(),e.trigger("dropdown_open",e.dropdown))}close(e=!0){var t=this,i=t.isOpen
+e.isLocked||e.isOpen||"multi"===e.settings.mode&&e.isFull()||(e.isOpen=!0,G(e.focus_node,{"aria-expanded":"true"}),e.refreshState(),N(e.dropdown,{visibility:"hidden",display:e.settings.openDisplay}),e.positionDropdown(),N(e.dropdown,{visibility:"visible",display:e.settings.openDisplay}),e.focus(),e.trigger("dropdown_open",e.dropdown))}close(e=!0){var t=this,i=t.isOpen
 e&&(t.setTextboxValue(),"single"===t.settings.mode&&t.items.length&&t.hideInput()),t.isOpen=!1,G(t.focus_node,{"aria-expanded":"false"}),N(t.dropdown,{display:"none"}),t.settings.hideSelected&&t.clearActiveOption(),t.refreshState(),i&&t.trigger("dropdown_close",t.dropdown)}positionDropdown(){if("body"===this.settings.dropdownParent){var e=this.control,t=e.getBoundingClientRect(),i=e.offsetHeight+t.top+window.scrollY,s=t.left+window.scrollX
 N(this.dropdown,{width:t.width+"px",top:i+"px",left:s+"px"})}}clear(e){var t=this
 if(t.items.length){var i=t.controlChildren()

package/dist/collection/libraries/tom-select/js/tom-select.popular.js CHANGED Viewed

@@ -1610,6 +1610,7 @@
 	  searchField: ['text'],
 	  searchConjunction: 'and',
 	  mode: null,
+	  openDisplay: 'block',
 	  wrapperClass: 'ts-wrapper',
 	  controlClass: 'ts-control',
 	  dropdownClass: 'ts-dropdown',
@@ -3191,7 +3192,7 @@
 	    const groups = {};
 	    const groups_order = [];
 	    var self = this;
-	    var query = self.inputValue();
+	    var query = this.settings.transformLoadQuery(this.control_input.value);
 	    const same_query = query === self.lastQuery || query == '' && self.lastQuery == null;
 	    var results = self.search(query);
 	    var active_option = null;
@@ -3963,12 +3964,12 @@
 	    self.refreshState();
 	    applyCSS(self.dropdown, {
 	      visibility: 'hidden',
-	      display: 'block'
+	      display: self.settings.openDisplay
 	    });
 	    self.positionDropdown();
 	    applyCSS(self.dropdown, {
 	      visibility: 'visible',
-	      display: 'block'
+	      display: self.settings.openDisplay
 	    });
 	    self.focus();
 	    self.trigger('dropdown_open', self.dropdown);

package/dist/collection/libraries/tom-select/js/tom-select.popular.min.js CHANGED Viewed

@@ -104,16 +104,16 @@ const o=e.score||n._getScoreFunction(s)
 t.length?E(n.items,((t,n)=>{i=o(t),(!1===e.filter||i>0)&&s.items.push({score:i,id:n})})):E(n.items,((t,e)=>{s.items.push({score:1,id:e})}))
 const r=n._getSortFunction(s)
 return r&&s.items.sort(r),s.total=s.items.length,"number"==typeof e.limit&&(s.items=s.items.slice(0,e.limit)),s}}const j=(t,e)=>{if(Array.isArray(t))t.forEach(e)
-else for(var i in t)t.hasOwnProperty(i)&&e(t[i],i)},V=t=>{if(t.jquery)return t[0]
+else for(var i in t)t.hasOwnProperty(i)&&e(t[i],i)},$=t=>{if(t.jquery)return t[0]
 if(t instanceof HTMLElement)return t
-if($(t)){var e=document.createElement("template")
-return e.innerHTML=t.trim(),e.content.firstChild}return document.querySelector(t)},$=t=>"string"==typeof t&&t.indexOf("<")>-1,q=(t,e)=>{var i=document.createEvent("HTMLEvents")
+if(V(t)){var e=document.createElement("template")
+return e.innerHTML=t.trim(),e.content.firstChild}return document.querySelector(t)},V=t=>"string"==typeof t&&t.indexOf("<")>-1,q=(t,e)=>{var i=document.createEvent("HTMLEvents")
 i.initEvent(e,!0,!1),t.dispatchEvent(i)},D=(t,e)=>{Object.assign(t.style,e)},N=(t,...e)=>{var i=R(e);(t=M(t)).map((t=>{i.map((e=>{t.classList.add(e)}))}))},H=(t,...e)=>{var i=R(e);(t=M(t)).map((t=>{i.map((e=>{t.classList.remove(e)}))}))},R=t=>{var e=[]
 return j(t,(t=>{"string"==typeof t&&(t=t.trim().split(/[\11\12\14\15\40]/)),Array.isArray(t)&&(e=e.concat(t))})),e.filter(Boolean)},M=t=>(Array.isArray(t)||(t=[t]),t),z=(t,e,i)=>{if(!i||i.contains(t))for(;t&&t.matches;){if(t.matches(e))return t
-t=t.parentNode}},B=(t,e=0)=>e>0?t[t.length-1]:t[0],K=(t,e)=>{if(!t)return-1
+t=t.parentNode}},B=(t,e=0)=>e>0?t[t.length-1]:t[0],Q=(t,e)=>{if(!t)return-1
 e=e||t.nodeName
 for(var i=0;t=t.previousElementSibling;)t.matches(e)&&i++
-return i},Q=(t,e)=>{j(e,((e,i)=>{null==e?t.removeAttribute(i):t.setAttribute(i,""+e)}))},G=(t,e)=>{t.parentNode&&t.parentNode.replaceChild(e,t)},J=(t,e)=>{if(null===e)return
+return i},K=(t,e)=>{j(e,((e,i)=>{null==e?t.removeAttribute(i):t.setAttribute(i,""+e)}))},G=(t,e)=>{t.parentNode&&t.parentNode.replaceChild(e,t)},J=(t,e)=>{if(null===e)return
 if("string"==typeof e){if(!e.length)return
 e=new RegExp(e,"i")}const i=t=>3===t.nodeType?(t=>{var i=t.data.match(e)
 if(i&&t.data.length>0){var s=document.createElement("span")
@@ -123,7 +123,7 @@ n.splitText(i[0].length)
 var o=n.cloneNode(!0)
 return s.appendChild(o),G(n,s),1}return 0})(t):((t=>{1!==t.nodeType||!t.childNodes||/(script|style)/i.test(t.tagName)||"highlight"===t.className&&"SPAN"===t.tagName||Array.from(t.childNodes).forEach((t=>{i(t)}))})(t),0)
 i(t)},U="undefined"!=typeof navigator&&/Mac/.test(navigator.userAgent)?"metaKey":"ctrlKey"
-var W={options:[],optgroups:[],plugins:[],delimiter:",",splitOn:null,persist:!0,diacritics:!0,create:null,createOnBlur:!1,createFilter:null,highlight:!0,openOnFocus:!0,shouldOpen:null,maxOptions:50,maxItems:null,hideSelected:null,duplicates:!1,addPrecedence:!1,selectOnTab:!1,preload:null,allowEmptyOption:!1,loadThrottle:300,loadingClass:"loading",dataAttr:null,optgroupField:"optgroup",valueField:"value",labelField:"text",disabledField:"disabled",optgroupLabelField:"label",optgroupValueField:"value",lockOptgroupOrder:!1,sortField:"$order",searchField:["text"],searchConjunction:"and",mode:null,wrapperClass:"ts-wrapper",controlClass:"ts-control",dropdownClass:"ts-dropdown",dropdownContentClass:"ts-dropdown-content",itemClass:"item",optionClass:"option",dropdownParent:null,controlInput:'<input type="text" autocomplete="off" size="1" />',copyClassesToDropdown:!1,placeholder:null,hidePlaceholder:null,transformLoadQuery:function(t){return t.trim()},shouldLoad:function(t){return t.length>0},render:{}}
+var W={options:[],optgroups:[],plugins:[],delimiter:",",splitOn:null,persist:!0,diacritics:!0,create:null,createOnBlur:!1,createFilter:null,highlight:!0,openOnFocus:!0,shouldOpen:null,maxOptions:50,maxItems:null,hideSelected:null,duplicates:!1,addPrecedence:!1,selectOnTab:!1,preload:null,allowEmptyOption:!1,loadThrottle:300,loadingClass:"loading",dataAttr:null,optgroupField:"optgroup",valueField:"value",labelField:"text",disabledField:"disabled",optgroupLabelField:"label",optgroupValueField:"value",lockOptgroupOrder:!1,sortField:"$order",searchField:["text"],searchConjunction:"and",mode:null,openDisplay:"block",wrapperClass:"ts-wrapper",controlClass:"ts-control",dropdownClass:"ts-dropdown",dropdownContentClass:"ts-dropdown-content",itemClass:"item",optionClass:"option",dropdownParent:null,controlInput:'<input type="text" autocomplete="off" size="1" />',copyClassesToDropdown:!1,placeholder:null,hidePlaceholder:null,transformLoadQuery:function(t){return t.trim()},shouldLoad:function(t){return t.length>0},render:{}}
 const X=t=>null==t?null:Y(t),Y=t=>"boolean"==typeof t?t?"1":"0":t+"",Z=t=>(t+"").replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;"),tt=(t,e)=>{var i
 return function(s,n){var o=this
 i&&(o.loading=Math.max(o.loading-1,0),clearTimeout(i)),i=setTimeout((function(){i=null,o.loadedSearches[s]=!0,t.call(o,s,n)}),e)}},et=(t,e,i)=>{var s,n=t.trigger,o={}
@@ -156,22 +156,22 @@ s.requested[e]=!0,s.loaded[e]=n.fn.apply(i,[i.plugins.settings[e]||{}]),s.names.
 if(!e.plugins.loaded.hasOwnProperty(t)){if(i.requested[t])throw new Error('Plugin has circular dependency ("'+t+'")')
 e.loadPlugin(t)}return i.loaded[t]}}}(e)){constructor(t,e){var i
 super(),this.control_input=void 0,this.wrapper=void 0,this.dropdown=void 0,this.control=void 0,this.dropdown_content=void 0,this.focus_node=void 0,this.order=0,this.settings=void 0,this.input=void 0,this.tabIndex=void 0,this.is_select_tag=void 0,this.rtl=void 0,this.inputId=void 0,this._destroy=void 0,this.sifter=void 0,this.isOpen=!1,this.isDisabled=!1,this.isRequired=void 0,this.isInvalid=!1,this.isValid=!0,this.isLocked=!1,this.isFocused=!1,this.isInputHidden=!1,this.isSetup=!1,this.ignoreFocus=!1,this.ignoreHover=!1,this.hasOptions=!1,this.currentResults=void 0,this.lastValue="",this.caretPos=0,this.loading=0,this.loadedSearches={},this.activeOption=null,this.activeItems=[],this.optgroups={},this.options={},this.userOptions={},this.items=[],ct++
-var s=V(t)
+var s=$(t)
 if(s.tomselect)throw new Error("Tom Select already initialized on this element")
 s.tomselect=this,i=(window.getComputedStyle&&window.getComputedStyle(s,null)).getPropertyValue("direction")
 const n=at(s,e)
 this.settings=n,this.input=s,this.tabIndex=s.tabIndex||0,this.is_select_tag="select"===s.tagName.toLowerCase(),this.rtl=/rtl/i.test(i),this.inputId=ot(s,"tomselect-"+ct),this.isRequired=s.required,this.sifter=new T(this.options,{diacritics:n.diacritics}),n.mode=n.mode||(1===n.maxItems?"single":"multi"),"boolean"!=typeof n.hideSelected&&(n.hideSelected="multi"===n.mode),"boolean"!=typeof n.hidePlaceholder&&(n.hidePlaceholder="multi"!==n.mode)
 var o=n.createFilter
 "function"!=typeof o&&("string"==typeof o&&(o=new RegExp(o)),o instanceof RegExp?n.createFilter=t=>o.test(t):n.createFilter=t=>this.settings.duplicates||!this.options[t]),this.initializePlugins(n.plugins),this.setupCallbacks(),this.setupTemplates()
-const r=V("<div>"),l=V("<div>"),a=this._render("dropdown"),c=V('<div role="listbox" tabindex="-1">'),d=this.input.getAttribute("class")||"",u=n.mode
+const r=$("<div>"),l=$("<div>"),a=this._render("dropdown"),c=$('<div role="listbox" tabindex="-1">'),d=this.input.getAttribute("class")||"",u=n.mode
 var p
-if(N(r,n.wrapperClass,d,u),N(l,n.controlClass),lt(r,l),N(a,n.dropdownClass,u),n.copyClassesToDropdown&&N(a,d),N(c,n.dropdownContentClass),lt(a,c),V(n.dropdownParent||r).appendChild(a),$(n.controlInput)){p=V(n.controlInput)
-E(["autocorrect","autocapitalize","autocomplete"],(t=>{s.getAttribute(t)&&Q(p,{[t]:s.getAttribute(t)})})),p.tabIndex=-1,l.appendChild(p),this.focus_node=p}else n.controlInput?(p=V(n.controlInput),this.focus_node=p):(p=V("<input/>"),this.focus_node=l)
+if(N(r,n.wrapperClass,d,u),N(l,n.controlClass),lt(r,l),N(a,n.dropdownClass,u),n.copyClassesToDropdown&&N(a,d),N(c,n.dropdownContentClass),lt(a,c),$(n.dropdownParent||r).appendChild(a),V(n.controlInput)){p=$(n.controlInput)
+E(["autocorrect","autocapitalize","autocomplete"],(t=>{s.getAttribute(t)&&K(p,{[t]:s.getAttribute(t)})})),p.tabIndex=-1,l.appendChild(p),this.focus_node=p}else n.controlInput?(p=$(n.controlInput),this.focus_node=p):(p=$("<input/>"),this.focus_node=l)
 this.wrapper=r,this.dropdown=a,this.dropdown_content=c,this.control=l,this.control_input=p,this.setup()}setup(){const t=this,e=t.settings,i=t.control_input,s=t.dropdown,n=t.dropdown_content,o=t.wrapper,l=t.control,a=t.input,c=t.focus_node,d={passive:!0},u=t.inputId+"-ts-dropdown"
-Q(n,{id:u}),Q(c,{role:"combobox","aria-haspopup":"listbox","aria-expanded":"false","aria-controls":u})
+K(n,{id:u}),K(c,{role:"combobox","aria-haspopup":"listbox","aria-expanded":"false","aria-controls":u})
 const p=ot(c,t.inputId+"-ts-control"),h="label[for='"+(t=>t.replace(/['"\\]/g,"\\$&"))(t.inputId)+"']",g=document.querySelector(h),f=t.focus.bind(t),v=a.getAttribute("aria-labelledby")
-if(g&&(st(g,"click",f),Q(g,{for:p})),v&&(Q(c,{"aria-labelledby":v}),Q(n,{"aria-labelledby":v})),o.style.width=a.style.width,t.plugins.names.length){const e="plugin-"+t.plugins.names.join(" plugin-")
-N([o,s],e)}"multi"===e.mode&&(Q(n,{"aria-multiselectable":"true"}),t.is_select_tag&&Q(a,{multiple:"multiple"})),e.placeholder&&Q(i,{placeholder:e.placeholder}),!e.splitOn&&e.delimiter&&(e.splitOn=new RegExp("\\s*"+r(e.delimiter)+"+\\s*")),e.load&&e.loadThrottle&&(e.load=tt(e.load,e.loadThrottle)),t.control_input.type=a.type,st(s,"mousemove",(()=>{t.ignoreHover=!1})),st(s,"mouseenter",(e=>{var i=z(e.target,"[data-selectable]",s)
+if(g&&(st(g,"click",f),K(g,{for:p})),v&&(K(c,{"aria-labelledby":v}),K(n,{"aria-labelledby":v})),o.style.width=a.style.width,t.plugins.names.length){const e="plugin-"+t.plugins.names.join(" plugin-")
+N([o,s],e)}"multi"===e.mode&&(K(n,{"aria-multiselectable":"true"}),t.is_select_tag&&K(a,{multiple:"multiple"})),e.placeholder&&K(i,{placeholder:e.placeholder}),!e.splitOn&&e.delimiter&&(e.splitOn=new RegExp("\\s*"+r(e.delimiter)+"+\\s*")),e.load&&e.loadThrottle&&(e.load=tt(e.load,e.loadThrottle)),t.control_input.type=a.type,st(s,"mousemove",(()=>{t.ignoreHover=!1})),st(s,"mouseenter",(e=>{var i=z(e.target,"[data-selectable]",s)
 i&&t.onOptionHover(e,i)}),{capture:!0}),st(s,"click",(e=>{const i=z(e.target,"[data-selectable]")
 i&&(t.onOptionSelect(e,i),it(e,!0))})),st(l,"click",(e=>{var s=z(e.target,"[data-ts-item]",l)
 s&&t.onItemSelect(e,s)?it(e,!0):""==i.value&&(t.onClick(),it(e,!0))})),st(c,"keydown",(e=>t.onKeyDown(e))),st(i,"keypress",(e=>t.onKeyPress(e))),st(i,"input",(e=>t.onInput(e))),st(c,"blur",(e=>t.onBlur(e))),st(c,"focus",(e=>t.onFocus(e))),st(i,"paste",(e=>t.onPaste(e)))
@@ -225,21 +225,21 @@ if("click"===(i=e&&e.type.toLowerCase())&&nt("shiftKey",e)&&a.activeItems.length
 it(e)}else"click"===i&&nt(U,e)||"keydown"===i&&nt("shiftKey",e)?t.classList.contains("active")?a.removeActiveItem(t):a.setActiveItemClass(t):(a.clearActiveItems(),a.setActiveItemClass(t))
 a.hideInput(),a.isFocused||a.focus()}}setActiveItemClass(t){const e=this,i=e.control.querySelector(".last-active")
 i&&H(i,"last-active"),N(t,"active last-active"),e.trigger("item_select",t),-1==e.activeItems.indexOf(t)&&e.activeItems.push(t)}removeActiveItem(t){var e=this.activeItems.indexOf(t)
-this.activeItems.splice(e,1),H(t,"active")}clearActiveItems(){H(this.activeItems,"active"),this.activeItems=[]}setActiveOption(t,e=!0){t!==this.activeOption&&(this.clearActiveOption(),t&&(this.activeOption=t,Q(this.focus_node,{"aria-activedescendant":t.getAttribute("id")}),("single"===this.settings.mode||this.settings.hideSelected)&&Q(t,{"aria-selected":"true"}),N(t,"active"),e&&this.scrollToOption(t)))}scrollToOption(t,e){if(!t)return
+this.activeItems.splice(e,1),H(t,"active")}clearActiveItems(){H(this.activeItems,"active"),this.activeItems=[]}setActiveOption(t,e=!0){t!==this.activeOption&&(this.clearActiveOption(),t&&(this.activeOption=t,K(this.focus_node,{"aria-activedescendant":t.getAttribute("id")}),("single"===this.settings.mode||this.settings.hideSelected)&&K(t,{"aria-selected":"true"}),N(t,"active"),e&&this.scrollToOption(t)))}scrollToOption(t,e){if(!t)return
 const i=this.dropdown_content,s=i.clientHeight,n=i.scrollTop||0,o=t.offsetHeight,r=t.getBoundingClientRect().top-i.getBoundingClientRect().top+n
 r+o>s+n?this.scroll(r-s+o,e):r<n&&this.scroll(r,e)}scroll(t,e){const i=this.dropdown_content
-e&&(i.style.scrollBehavior=e),i.scrollTop=t,i.style.scrollBehavior=""}clearActiveOption(){this.activeOption&&(H(this.activeOption,"active"),("single"===this.settings.mode||this.settings.hideSelected)&&Q(this.activeOption,{"aria-selected":null})),this.activeOption=null,Q(this.focus_node,{"aria-activedescendant":null})}selectAll(){const t=this
+e&&(i.style.scrollBehavior=e),i.scrollTop=t,i.style.scrollBehavior=""}clearActiveOption(){this.activeOption&&(H(this.activeOption,"active"),("single"===this.settings.mode||this.settings.hideSelected)&&K(this.activeOption,{"aria-selected":null})),this.activeOption=null,K(this.focus_node,{"aria-activedescendant":null})}selectAll(){const t=this
 if("single"===t.settings.mode)return
 const e=t.controlChildren()
 e.length&&(t.hideInput(),t.close(),t.activeItems=e,E(e,(e=>{t.setActiveItemClass(e)})))}inputState(){var t=this
-t.control.contains(t.control_input)&&(Q(t.control_input,{placeholder:t.settings.placeholder}),t.activeItems.length>0||!t.isFocused&&t.settings.hidePlaceholder&&t.items.length>0?(t.setTextboxValue(),t.isInputHidden=!0):(t.settings.hidePlaceholder&&t.items.length>0&&Q(t.control_input,{placeholder:""}),t.isInputHidden=!1),t.wrapper.classList.toggle("input-hidden",t.isInputHidden))}hideInput(){this.inputState()}showInput(){this.inputState()}inputValue(){return this.control_input.value.trim()}focus(){var t=this
+t.control.contains(t.control_input)&&(K(t.control_input,{placeholder:t.settings.placeholder}),t.activeItems.length>0||!t.isFocused&&t.settings.hidePlaceholder&&t.items.length>0?(t.setTextboxValue(),t.isInputHidden=!0):(t.settings.hidePlaceholder&&t.items.length>0&&K(t.control_input,{placeholder:""}),t.isInputHidden=!1),t.wrapper.classList.toggle("input-hidden",t.isInputHidden))}hideInput(){this.inputState()}showInput(){this.inputState()}inputValue(){return this.control_input.value.trim()}focus(){var t=this
 t.isDisabled||(t.ignoreFocus=!0,t.control_input.offsetWidth?t.control_input.focus():t.focus_node.focus(),setTimeout((()=>{t.ignoreFocus=!1,t.onFocus()}),0))}blur(){this.focus_node.blur(),this.onBlur()}getScoreFunction(t){return this.sifter.getScoreFunction(t,this.getSearchOptions())}getSearchOptions(){var t=this.settings,e=t.sortField
 return"string"==typeof t.sortField&&(e=[{field:t.sortField}]),{fields:t.searchField,conjunction:t.searchConjunction,sort:e,nesting:t.nesting}}search(t){var e,i,s=this,n=this.getSearchOptions()
 if(s.settings.score&&"function"!=typeof(i=s.settings.score.call(s,t)))throw new Error('Tom Select "score" setting must be a function that returns a function')
 return t!==s.lastQuery?(s.lastQuery=t,e=s.sifter.search(t,Object.assign(n,{score:i})),s.currentResults=e):e=Object.assign({},s.currentResults),s.settings.hideSelected&&(e.items=e.items.filter((t=>{let e=X(t.id)
 return!(e&&-1!==s.items.indexOf(e))}))),e}refreshOptions(t=!0){var e,i,s,n,o,r,l,a,c,d
 const u={},p=[]
-var h=this,g=h.inputValue()
+var h=this,g=this.settings.transformLoadQuery(this.control_input.value)
 const f=g===h.lastQuery||""==g&&null==h.lastQuery
 var v,m=h.search(g),y=null,b=h.settings.shouldOpen||!1,O=h.dropdown_content
 for(f&&(y=h.activeOption)&&(c=y.closest("[data-group]")),n=m.items.length,"number"==typeof h.settings.maxOptions&&(n=Math.min(n,h.settings.maxOptions)),n>0&&(b=!0),e=0;e<n;e++){let t=m.items[e]
@@ -248,9 +248,9 @@ let n=t.id,l=h.options[n]
 if(void 0===l)continue
 let a=Y(n),d=h.getOption(a,!0)
 const g=h.items.includes(a)
-for(h.settings.hideSelected||(d.classList.toggle("selected",g),"multi"===this.settings.mode&&Q(d,{"aria-selected":g?"true":"false"})),o=l[h.settings.optgroupField]||"",i=0,s=(r=Array.isArray(o)?o:[o])&&r.length;i<s;i++){o=r[i],h.optgroups.hasOwnProperty(o)||(o="")
+for(h.settings.hideSelected||(d.classList.toggle("selected",g),"multi"===this.settings.mode&&K(d,{"aria-selected":g?"true":"false"})),o=l[h.settings.optgroupField]||"",i=0,s=(r=Array.isArray(o)?o:[o])&&r.length;i<s;i++){o=r[i],h.optgroups.hasOwnProperty(o)||(o="")
 let t=u[o]
-void 0===t&&(t=document.createDocumentFragment(),p.push(o)),i>0&&(d=d.cloneNode(!0),"multi"!==this.settings.mode||h.settings.hideSelected?Q(d,{id:l.$id+"-clone-"+i,"aria-selected":null}):Q(d,{id:l.$id+"-clone-"+i,"aria-selected":g?"true":"false"}),d.classList.add("ts-cloned"),H(d,"active"),h.activeOption&&h.activeOption.dataset.value==n&&c&&c.dataset.group===o.toString()&&(y=d)),t.appendChild(d),u[o]=t}}h.settings.lockOptgroupOrder&&p.sort(((t,e)=>{const i=h.optgroups[t],s=h.optgroups[e]
+void 0===t&&(t=document.createDocumentFragment(),p.push(o)),i>0&&(d=d.cloneNode(!0),"multi"!==this.settings.mode||h.settings.hideSelected?K(d,{id:l.$id+"-clone-"+i,"aria-selected":null}):K(d,{id:l.$id+"-clone-"+i,"aria-selected":g?"true":"false"}),d.classList.add("ts-cloned"),H(d,"active"),h.activeOption&&h.activeOption.dataset.value==n&&c&&c.dataset.group===o.toString()&&(y=d)),t.appendChild(d),u[o]=t}}h.settings.lockOptgroupOrder&&p.sort(((t,e)=>{const i=h.optgroups[t],s=h.optgroups[e]
 return(i&&i.$order||0)-(s&&s.$order||0)})),l=document.createDocumentFragment(),E(p,(t=>{let e=u[t]
 if(!e||!e.children.length)return
 let i=h.optgroups[t]
@@ -300,7 +300,7 @@ e&&n.setActiveOption(e)}n.isPending||n.settings.closeAfterSelect||n.refreshOptio
 if(!(t=i.getItem(t)))return
 var s,n
 const o=t.dataset.value
-s=K(t),t.remove(),t.classList.contains("active")&&(n=i.activeItems.indexOf(t),i.activeItems.splice(n,1),H(t,"active")),i.items.splice(s,1),i.lastQuery=null,!i.settings.persist&&i.userOptions.hasOwnProperty(o)&&i.removeOption(o,e),s<i.caretPos&&i.setCaret(i.caretPos-1),i.updateOriginalInput({silent:e}),i.refreshState(),i.positionDropdown(),i.trigger("item_remove",o,t)}createItem(t=null,e=(()=>{})){3===arguments.length&&(e=arguments[2]),"function"!=typeof e&&(e=()=>{})
+s=Q(t),t.remove(),t.classList.contains("active")&&(n=i.activeItems.indexOf(t),i.activeItems.splice(n,1),H(t,"active")),i.items.splice(s,1),i.lastQuery=null,!i.settings.persist&&i.userOptions.hasOwnProperty(o)&&i.removeOption(o,e),s<i.caretPos&&i.setCaret(i.caretPos-1),i.updateOriginalInput({silent:e}),i.refreshState(),i.positionDropdown(),i.trigger("item_remove",o,t)}createItem(t=null,e=(()=>{})){3===arguments.length&&(e=arguments[2]),"function"!=typeof e&&(e=()=>{})
 var i,s=this,n=s.caretPos
 if(t=t||s.inputValue(),!s.canCreate(t))return e(),!1
 s.lock()
@@ -320,17 +320,17 @@ t.input.validity&&(t.isValid=t.input.validity.valid,t.isInvalid=!t.isValid)}isFu
 var i,s
 const n=e.input.querySelector('option[value=""]')
 if(e.is_select_tag){const o=[],r=e.input.querySelectorAll("option:checked").length
-function l(t,i,s){return t||(t=V('<option value="'+Z(i)+'">'+Z(s)+"</option>")),t!=n&&e.input.append(t),o.push(t),(t!=n||r>0)&&(t.selected=!0),t}e.input.querySelectorAll("option:checked").forEach((t=>{t.selected=!1})),0==e.items.length&&"single"==e.settings.mode?l(n,"",""):e.items.forEach((t=>{if(i=e.options[t],s=i[e.settings.labelField]||"",o.includes(i.$option)){l(e.input.querySelector(`option[value="${rt(t)}"]:not(:checked)`),t,s)}else i.$option=l(i.$option,t,s)}))}else e.input.value=e.getValue()
+function l(t,i,s){return t||(t=$('<option value="'+Z(i)+'">'+Z(s)+"</option>")),t!=n&&e.input.append(t),o.push(t),(t!=n||r>0)&&(t.selected=!0),t}e.input.querySelectorAll("option:checked").forEach((t=>{t.selected=!1})),0==e.items.length&&"single"==e.settings.mode?l(n,"",""):e.items.forEach((t=>{if(i=e.options[t],s=i[e.settings.labelField]||"",o.includes(i.$option)){l(e.input.querySelector(`option[value="${rt(t)}"]:not(:checked)`),t,s)}else i.$option=l(i.$option,t,s)}))}else e.input.value=e.getValue()
 e.isSetup&&(t.silent||e.trigger("change",e.getValue()))}open(){var t=this
-t.isLocked||t.isOpen||"multi"===t.settings.mode&&t.isFull()||(t.isOpen=!0,Q(t.focus_node,{"aria-expanded":"true"}),t.refreshState(),D(t.dropdown,{visibility:"hidden",display:"block"}),t.positionDropdown(),D(t.dropdown,{visibility:"visible",display:"block"}),t.focus(),t.trigger("dropdown_open",t.dropdown))}close(t=!0){var e=this,i=e.isOpen
-t&&(e.setTextboxValue(),"single"===e.settings.mode&&e.items.length&&e.hideInput()),e.isOpen=!1,Q(e.focus_node,{"aria-expanded":"false"}),D(e.dropdown,{display:"none"}),e.settings.hideSelected&&e.clearActiveOption(),e.refreshState(),i&&e.trigger("dropdown_close",e.dropdown)}positionDropdown(){if("body"===this.settings.dropdownParent){var t=this.control,e=t.getBoundingClientRect(),i=t.offsetHeight+e.top+window.scrollY,s=e.left+window.scrollX
+t.isLocked||t.isOpen||"multi"===t.settings.mode&&t.isFull()||(t.isOpen=!0,K(t.focus_node,{"aria-expanded":"true"}),t.refreshState(),D(t.dropdown,{visibility:"hidden",display:t.settings.openDisplay}),t.positionDropdown(),D(t.dropdown,{visibility:"visible",display:t.settings.openDisplay}),t.focus(),t.trigger("dropdown_open",t.dropdown))}close(t=!0){var e=this,i=e.isOpen
+t&&(e.setTextboxValue(),"single"===e.settings.mode&&e.items.length&&e.hideInput()),e.isOpen=!1,K(e.focus_node,{"aria-expanded":"false"}),D(e.dropdown,{display:"none"}),e.settings.hideSelected&&e.clearActiveOption(),e.refreshState(),i&&e.trigger("dropdown_close",e.dropdown)}positionDropdown(){if("body"===this.settings.dropdownParent){var t=this.control,e=t.getBoundingClientRect(),i=t.offsetHeight+e.top+window.scrollY,s=e.left+window.scrollX
 D(this.dropdown,{width:e.width+"px",top:i+"px",left:s+"px"})}}clear(t){var e=this
 if(e.items.length){var i=e.controlChildren()
 E(i,(t=>{e.removeItem(t,!0)})),e.showInput(),t||e.updateOriginalInput(),e.trigger("clear")}}insertAtCaret(t){const e=this,i=e.caretPos,s=e.control
 s.insertBefore(t,s.children[i]||null),e.setCaret(i+1)}deleteSelection(t){var e,i,s,n,o,r=this
 e=t&&8===t.keyCode?-1:1,i={start:(o=r.control_input).selectionStart||0,length:(o.selectionEnd||0)-(o.selectionStart||0)}
 const l=[]
-if(r.activeItems.length)n=B(r.activeItems,e),s=K(n),e>0&&s++,E(r.activeItems,(t=>l.push(t)))
+if(r.activeItems.length)n=B(r.activeItems,e),s=Q(n),e>0&&s++,E(r.activeItems,(t=>l.push(t)))
 else if((r.isFocused||"single"===r.settings.mode)&&r.items.length){const t=r.controlChildren()
 let s
 e<0&&0===i.start&&0===i.length?s=t[r.caretPos-1]:e>0&&i.start===r.inputValue().length&&(s=t[r.caretPos]),void 0!==s&&l.push(s)}if(!r.shouldDelete(l,t))return!1
@@ -347,8 +347,8 @@ t.trigger("destroy"),t.off(),t.wrapper.remove(),t.dropdown.remove(),t.input.inne
 const n=this
 if("function"!=typeof this.settings.render[t])return null
 if(!(s=n.settings.render[t].call(this,e,Z)))return null
-if(s=V(s),"option"===t||"option_create"===t?e[n.settings.disabledField]?Q(s,{"aria-disabled":"true"}):Q(s,{"data-selectable":""}):"optgroup"===t&&(i=e.group[n.settings.optgroupValueField],Q(s,{"data-group":i}),e.group[n.settings.disabledField]&&Q(s,{"data-disabled":""})),"option"===t||"item"===t){const i=Y(e[n.settings.valueField])
-Q(s,{"data-value":i}),"item"===t?(N(s,n.settings.itemClass),Q(s,{"data-ts-item":""})):(N(s,n.settings.optionClass),Q(s,{role:"option",id:e.$id}),e.$div=s,n.options[i]=e)}return s}_render(t,e){const i=this.render(t,e)
+if(s=$(s),"option"===t||"option_create"===t?e[n.settings.disabledField]?K(s,{"aria-disabled":"true"}):K(s,{"data-selectable":""}):"optgroup"===t&&(i=e.group[n.settings.optgroupValueField],K(s,{"data-group":i}),e.group[n.settings.disabledField]&&K(s,{"data-disabled":""})),"option"===t||"item"===t){const i=Y(e[n.settings.valueField])
+K(s,{"data-value":i}),"item"===t?(N(s,n.settings.itemClass),K(s,{"data-ts-item":""})):(N(s,n.settings.optionClass),K(s,{role:"option",id:e.$id}),e.$div=s,n.options[i]=e)}return s}_render(t,e){const i=this.render(t,e)
 if(null==i)throw"HTMLElement expected"
 return i}clearCache(){E(this.options,(t=>{t.$div&&(t.$div.remove(),delete t.$div)}))}uncacheValue(t){const e=this.getOption(t)
 e&&e.remove()}canCreate(t){return this.settings.create&&t.length>0&&this.settings.createFilter.call(this,t)}hook(t,e,i){var s=this,n=s[e]
@@ -356,12 +356,12 @@ s[e]=function(){var e,o
 return"after"===t&&(e=n.apply(s,arguments)),o=i.apply(s,arguments),"instead"===t?o:("before"===t&&(e=n.apply(s,arguments)),e)}}}return dt.define("caret_position",(function(){var t=this
 t.hook("instead","setCaret",(e=>{"single"!==t.settings.mode&&t.control.contains(t.control_input)?(e=Math.max(0,Math.min(t.items.length,e)))==t.caretPos||t.isPending||t.controlChildren().forEach(((i,s)=>{s<e?t.control_input.insertAdjacentElement("beforebegin",i):t.control.appendChild(i)})):e=t.items.length,t.caretPos=e})),t.hook("instead","moveCaret",(e=>{if(!t.isFocused)return
 const i=t.getLastActive(e)
-if(i){const s=K(i)
+if(i){const s=Q(i)
 t.setCaret(e>0?s+1:s),t.setActiveItem(),H(i,"last-active")}else t.setCaret(t.caretPos+e)}))})),dt.define("dropdown_input",(function(){const t=this
 t.settings.shouldOpen=!0,t.hook("before","setup",(()=>{t.focus_node=t.control,N(t.control_input,"dropdown-input")
-const e=V('<div class="dropdown-input-wrap">')
+const e=$('<div class="dropdown-input-wrap">')
 e.append(t.control_input),t.dropdown.insertBefore(e,t.dropdown.firstChild)
-const i=V('<input class="items-placeholder" tabindex="-1" />')
+const i=$('<input class="items-placeholder" tabindex="-1" />')
 i.placeholder=t.settings.placeholder||"",t.control.append(i)})),t.on("initialize",(()=>{t.control_input.addEventListener("keydown",(e=>{switch(e.keyCode){case 27:return t.isOpen&&(it(e,!0),t.close()),void t.clearActiveItems()
 case 9:t.focus_node.tabIndex=-1}return t.onKeyDown.call(t,e)})),t.on("blur",(()=>{t.focus_node.tabIndex=t.isDisabled?-1:t.tabIndex})),t.on("dropdown_open",(()=>{t.control_input.focus()}))
 const e=t.onBlur
@@ -370,7 +370,7 @@ this.hook("instead","deleteSelection",(i=>!!t.activeItems.length&&e.call(t,i)))}
 var i=this
 if(e.append){var s='<a href="javascript:void(0)" class="'+e.className+'" tabindex="-1" title="'+Z(e.title)+'">'+e.label+"</a>"
 i.hook("after","setupTemplates",(()=>{var t=i.settings.render.item
-i.settings.render.item=(e,n)=>{var o=V(t.call(i,e,n)),r=V(s)
+i.settings.render.item=(e,n)=>{var o=$(t.call(i,e,n)),r=$(s)
 return o.appendChild(r),st(r,"mousedown",(t=>{it(t,!0)})),st(r,"click",(t=>{it(t,!0),i.isLocked||i.shouldDelete([o],t)&&(i.removeItem(o),i.refreshOptions(!1),i.inputState())})),o}}))}})),dt.define("restore_on_backspace",(function(t){const e=this,i=Object.assign({text:t=>t[e.settings.labelField]},t)
 e.on("item_remove",(function(t){if(e.isFocused&&""===e.control_input.value.trim()){var s=e.options[t]
 s&&e.setTextboxValue(i.text.call(e,s))}}))})),dt}))

package/dist/components/index.js CHANGED Viewed

@@ -835,7 +835,7 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons
 })();
 const name = "@oiz/stzh-components";
-const version = "2.12.0";
+const version = "2.13.0-beta1";
 const packageName = name.substring(name.indexOf('/')+1);

package/dist/components/stzh-datalist-item2.js CHANGED Viewed

@@ -6,7 +6,7 @@ import { d as defineCustomElement$3 } from './stzh-richtext2.js';
 import { d as defineCustomElement$2 } from './stzh-status2.js';
 import { d as defineCustomElement$1 } from './stzh-tooltip2.js';
-const stzhDatalistItemCss = ".sc-stzh-datalist-item-h{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:var(--stzh-font-style-regular);color:var(--stzh-base-color);-webkit-box-sizing:border-box;box-sizing:border-box;display:block}[hidden].sc-stzh-datalist-item-h{display:none}.sc-stzh-datalist-item-h *.sc-stzh-datalist-item,.sc-stzh-datalist-item-h *.sc-stzh-datalist-item::before,.sc-stzh-datalist-item-h *.sc-stzh-datalist-item::after{-webkit-box-sizing:border-box;box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness)}.sc-stzh-datalist-item-h .has-focus.sc-stzh-datalist-item{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.3125rem}.sc-stzh-datalist-item-h .stzh-fylingfocus-focused.sc-stzh-datalist-item{outline-style:none !important}.sc-stzh-datalist-item-h .stzh-fylingfocus-focused.sc-stzh-datalist-item::-moz-focus-inner{border:0 !important}.sc-stzh-datalist-item-h{--font-family:var(--stzh-font-family-regular);--font-weight:var(--stzh-font-weight-regular);--color:inherit;--action-display:flex;--label-min-width:var(--item-label-min-width, none);--leading-icon-background-color:var(--stzh-color-grey5);--leading-icon-color:var(--stzh-color-grey70);--hover-leading-icon-background-color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));--hover-leading-icon-color:var(--stzh-color-white);--horizontal-min-height:3rem;display:contents}[href].sc-stzh-datalist-item-h:not([href=\"\"]),[a11y-expanded].sc-stzh-datalist-item-h,[a11y-controls].sc-stzh-datalist-item-h{--color:var(--stzh-color-primary, var(--stzh-color-zueriblue));--hover-color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark))}.sc-stzh-datalist-item-h .sc-stzh-datalist-item-s>stzh-datalist{margin-left:var(--stzh-space-large)}.stzh-datalist-item.sc-stzh-datalist-item{position:relative;-webkit-text-decoration-line:none;text-decoration-line:none}.stzh-datalist-item__vhidden.sc-stzh-datalist-item{border:0;clip:rect(0 0 0 0);-webkit-clip-path:inset(100%);clip-path:inset(100%);width:0.0625rem;height:0.0625rem;overflow:hidden;padding:0;position:absolute}.stzh-datalist-item__wrapper.sc-stzh-datalist-item{-ms-flex-positive:1;flex-grow:1;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:start;align-items:flex-start}.stzh-datalist-item__leading.sc-stzh-datalist-item,.stzh-datalist-item__value.sc-stzh-datalist-item,.stzh-datalist-item__label.sc-stzh-datalist-item,.stzh-datalist-item__meta.sc-stzh-datalist-item,.stzh-datalist-item__action-list.sc-stzh-datalist-item{color:inherit;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;font-family:inherit;background:transparent;border:none;padding:0;-webkit-text-decoration-line:none;text-decoration-line:none}.stzh-datalist-item__leading.is-button.sc-stzh-datalist-item,.stzh-datalist-item__leading.is-link.sc-stzh-datalist-item,.stzh-datalist-item__value.is-button.sc-stzh-datalist-item,.stzh-datalist-item__value.is-link.sc-stzh-datalist-item,.stzh-datalist-item__label.is-button.sc-stzh-datalist-item,.stzh-datalist-item__label.is-link.sc-stzh-datalist-item,.stzh-datalist-item__meta.is-button.sc-stzh-datalist-item,.stzh-datalist-item__meta.is-link.sc-stzh-datalist-item,.stzh-datalist-item__action-list.is-button.sc-stzh-datalist-item,.stzh-datalist-item__action-list.is-link.sc-stzh-datalist-item{cursor:pointer}.stzh-datalist-item__leading.sc-stzh-datalist-item{-ms-flex-negative:0;flex-shrink:0}.stzh-datalist-item__leading.sc-stzh-datalist-item:not(:empty){padding-right:var(--stzh-space-xsmall)}.stzh-datalist-item__leading-icon-container.sc-stzh-datalist-item{color:var(--leading-icon-color);background-color:var(--leading-icon-background-color);width:2.5rem;height:2.5rem;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;border-radius:50%;-webkit-transition-property:color, background-color;transition-property:color, background-color;-webkit-transition-duration:var(--stzh-base-transition-animation-speed);transition-duration:var(--stzh-base-transition-animation-speed)}.stzh-datalist-item__value.sc-stzh-datalist-item{font-size:var(--stzh-font-curve-p1-default-font-size, var(--stzh-font-milli-font-size));line-height:var(--stzh-font-curve-p1-default-text-line-height, var(--stzh-font-milli-text-line-height));letter-spacing:var(--stzh-font-curve-p1-default-text-letter-spacing);font-family:var(--font-family);font-weight:var(--font-weight);-ms-flex-positive:1;flex-grow:1}@media screen and (min-width: 1024px){.stzh-datalist-item__value.sc-stzh-datalist-item{font-size:var(--stzh-font-curve-p1-medium-font-size, var(--stzh-font-centi-font-size));line-height:var(--stzh-font-curve-p1-medium-text-line-height, var(--stzh-font-centi-text-line-height));letter-spacing:var(--stzh-font-curve-p1-medium-text-letter-spacing)}}.stzh-datalist-item__value.sc-stzh-datalist-item,.stzh-datalist-item__icon.sc-stzh-datalist-item{color:var(--color)}.stzh-datalist-item__label.sc-stzh-datalist-item,.stzh-datalist-item__meta.sc-stzh-datalist-item{font-size:var(--stzh-font-curve-caption-default-font-size, var(--stzh-font-nano-font-size));line-height:var(--stzh-font-curve-caption-default-text-line-height, var(--stzh-font-nano-text-line-height))}@media screen and (min-width: 1024px){.stzh-datalist-item__label.sc-stzh-datalist-item,.stzh-datalist-item__meta.sc-stzh-datalist-item{font-size:var(--stzh-font-curve-caption-medium-font-size, var(--stzh-font-micro-font-size));line-height:var(--stzh-font-curve-caption-medium-text-line-height, var(--stzh-font-micro-text-line-height))}}.stzh-datalist-item__meta.sc-stzh-datalist-item{-ms-flex-pack:end;justify-content:flex-end}.stzh-datalist-item__label.sc-stzh-datalist-item{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);color:var(--stzh-base-lead-color)}.stzh-datalist-item__action-list.sc-stzh-datalist-item{display:var(--action-display);-ms-flex-pack:center;justify-content:center;text-align:center}.stzh-datalist-item__action-list.sc-stzh-datalist-item:not(:empty){padding-left:var(--stzh-space-xsmall)}.stzh-datalist-item__action.is-non-interactive.sc-stzh-datalist-item{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;width:var(--stzh-form-input-tiny-height);height:var(--stzh-form-input-tiny-height)}.stzh-datalist-item__action.is-button[variant=tertiary].sc-stzh-datalist-item{--color:inherit}.stzh-datalist-item__value.sc-stzh-datalist-item,.stzh-datalist-item__icon.sc-stzh-datalist-item{-webkit-transition:color var(--stzh-base-transition-animation-speed);transition:color var(--stzh-base-transition-animation-speed)}.stzh-datalist-item__richtext.sc-stzh-datalist-item{color:inherit;font-family:inherit;font-weight:inherit}.stzh-datalist-item__interactive.sc-stzh-datalist-item{position:absolute;top:0;left:0}.stzh-datalist-item--is-button.sc-stzh-datalist-item .stzh-datalist-item__icon.is-open.sc-stzh-datalist-item{display:none}.stzh-datalist-item--is-button.stzh-datalist-item--is-expanded.sc-stzh-datalist-item .stzh-datalist-item__icon.is-closed.sc-stzh-datalist-item{display:none}.stzh-datalist-item--is-button.stzh-datalist-item--is-expanded.sc-stzh-datalist-item .stzh-datalist-item__icon.is-open.sc-stzh-datalist-item{display:-ms-inline-flexbox;display:inline-flex}.stzh-datalist-item--is-interactive.sc-stzh-datalist-item:hover .stzh-datalist-item__value.sc-stzh-datalist-item,.stzh-datalist-item--is-interactive.sc-stzh-datalist-item:hover .stzh-datalist-item__icon.sc-stzh-datalist-item{color:var(--hover-color)}.stzh-datalist-item--is-interactive.sc-stzh-datalist-item:hover .stzh-datalist-item__value.sc-stzh-datalist-item{-webkit-text-decoration-line:underline;text-decoration-line:underline}.stzh-datalist-item--is-interactive.sc-stzh-datalist-item:hover .stzh-datalist-item__leading-icon-container.sc-stzh-datalist-item,.stzh-datalist-item--is-interactive.sc-stzh-datalist-item:focus-within .stzh-datalist-item__leading-icon-container.sc-stzh-datalist-item{color:var(--hover-leading-icon-color);background-color:var(--hover-leading-icon-background-color)}.stzh-datalist-item--direction-vertical.sc-stzh-datalist-item{display:-ms-flexbox;display:flex;padding-top:var(--stzh-space-xsmall);padding-bottom:var(--stzh-space-xsmall)}.stzh-datalist-item--direction-vertical.stzh-datalist-item--has-hidden-border.sc-stzh-datalist-item{padding-top:calc(var(--stzh-space-xsmall) / 2);padding-bottom:calc(var(--stzh-space-xsmall) / 2)}.stzh-datalist-item--direction-vertical.sc-stzh-datalist-item:not(.stzh-datalist-item--has-hidden-border){border-bottom:0.0625rem solid var(--stzh-base-border-color)}.stzh-datalist-item--direction-vertical.sc-stzh-datalist-item .stzh-datalist-item__leading-icon-container.sc-stzh-datalist-item{width:2.5rem;height:2.5rem}.stzh-datalist-item--direction-vertical.sc-stzh-datalist-item .stzh-datalist-item__leading-icon.sc-stzh-datalist-item{--size:var(--stzh-icon-size-medium)}.stzh-datalist-item--direction-vertical.sc-stzh-datalist-item .stzh-datalist-item__meta.sc-stzh-datalist-item{-ms-flex-direction:column;flex-direction:column}.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item,.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item+.stzh-datalist-item__nested.sc-stzh-datalist-item{display:contents}.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item+.stzh-datalist-item__nested.sc-stzh-datalist-item .stzh-datalist-item__nested-inner.sc-stzh-datalist-item{grid-column:1/6}.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item .stzh-datalist-item__leading.sc-stzh-datalist-item,.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item .stzh-datalist-item__value.sc-stzh-datalist-item,.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item .stzh-datalist-item__label.sc-stzh-datalist-item,.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item .stzh-datalist-item__meta.sc-stzh-datalist-item,.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item .stzh-datalist-item__action-list.sc-stzh-datalist-item{min-height:var(--horizontal-min-height)}.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item .stzh-datalist-item__label.sc-stzh-datalist-item,.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item .stzh-datalist-item__value.sc-stzh-datalist-item,.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item .stzh-datalist-item__meta.sc-stzh-datalist-item{padding-top:var(--stzh-space-xsmall);padding-bottom:var(--stzh-space-xsmall)}.stzh-datalist-item--direction-horizontal.stzh-datalist-item--has-hidden-border.sc-stzh-datalist-item .stzh-datalist-item__label.sc-stzh-datalist-item,.stzh-datalist-item--direction-horizontal.stzh-datalist-item--has-hidden-border.sc-stzh-datalist-item .stzh-datalist-item__value.sc-stzh-datalist-item,.stzh-datalist-item--direction-horizontal.stzh-datalist-item--has-hidden-border.sc-stzh-datalist-item .stzh-datalist-item__meta.sc-stzh-datalist-item{padding-top:calc(var(--stzh-space-xsmall) / 2);padding-bottom:calc(var(--stzh-space-xsmall) / 2)}.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item:not(.stzh-datalist-item--has-hidden-border) .stzh-datalist-item__label.sc-stzh-datalist-item,.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item:not(.stzh-datalist-item--has-hidden-border) .stzh-datalist-item__value.sc-stzh-datalist-item,.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item:not(.stzh-datalist-item--has-hidden-border) .stzh-datalist-item__meta.sc-stzh-datalist-item,.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item:not(.stzh-datalist-item--has-hidden-border) .stzh-datalist-item__action-list.sc-stzh-datalist-item{border-bottom:0.0625rem solid var(--stzh-base-border-color)}.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item .stzh-datalist-item__label.sc-stzh-datalist-item:not(:empty){min-width:var(--label-min-width);padding-right:var(--stzh-space-xsmall)}.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item .stzh-datalist-item__meta.sc-stzh-datalist-item:not(:empty){padding-left:var(--stzh-space-xsmall)}.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item .stzh-datalist-item__leading-icon-container.sc-stzh-datalist-item{width:2rem;height:2rem}.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item .stzh-datalist-item__meta-status.sc-stzh-datalist-item+.stzh-datalist-item__meta-text.sc-stzh-datalist-item{margin-left:var(--stzh-space-xsmall)}";
+const stzhDatalistItemCss = ".sc-stzh-datalist-item-h{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:var(--stzh-font-style-regular);color:var(--stzh-base-color);-webkit-box-sizing:border-box;box-sizing:border-box;display:block}[hidden].sc-stzh-datalist-item-h{display:none}.sc-stzh-datalist-item-h *.sc-stzh-datalist-item,.sc-stzh-datalist-item-h *.sc-stzh-datalist-item::before,.sc-stzh-datalist-item-h *.sc-stzh-datalist-item::after{-webkit-box-sizing:border-box;box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness)}.sc-stzh-datalist-item-h .has-focus.sc-stzh-datalist-item{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.3125rem}.sc-stzh-datalist-item-h .stzh-fylingfocus-focused.sc-stzh-datalist-item{outline-style:none !important}.sc-stzh-datalist-item-h .stzh-fylingfocus-focused.sc-stzh-datalist-item::-moz-focus-inner{border:0 !important}.sc-stzh-datalist-item-h{--font-family:var(--stzh-font-family-regular);--font-weight:var(--stzh-font-weight-regular);--color:inherit;--action-display:flex;--label-min-width:var(--item-label-min-width, none);--leading-icon-background-color:var(--stzh-color-grey5);--leading-icon-color:var(--stzh-color-grey70);--hover-leading-icon-background-color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));--hover-leading-icon-color:var(--stzh-color-white);--horizontal-min-height:3rem;display:contents}[href].sc-stzh-datalist-item-h:not([href=\"\"]),[a11y-expanded].sc-stzh-datalist-item-h,[a11y-controls].sc-stzh-datalist-item-h{--color:var(--stzh-color-primary, var(--stzh-color-zueriblue));--hover-color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark))}.sc-stzh-datalist-item-h .sc-stzh-datalist-item-s>stzh-datalist{margin-left:var(--stzh-space-large)}.stzh-datalist-item.sc-stzh-datalist-item{position:relative;-webkit-text-decoration-line:none;text-decoration-line:none}.stzh-datalist-item__vhidden.sc-stzh-datalist-item{border:0;clip:rect(0 0 0 0);-webkit-clip-path:inset(100%);clip-path:inset(100%);width:0.0625rem;height:0.0625rem;overflow:hidden;padding:0;position:absolute}.stzh-datalist-item__wrapper.sc-stzh-datalist-item{-ms-flex-positive:1;flex-grow:1;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:start;align-items:flex-start}.stzh-datalist-item__leading.sc-stzh-datalist-item,.stzh-datalist-item__value.sc-stzh-datalist-item,.stzh-datalist-item__label.sc-stzh-datalist-item,.stzh-datalist-item__meta.sc-stzh-datalist-item,.stzh-datalist-item__action-list.sc-stzh-datalist-item{color:inherit;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;font-family:inherit;background:transparent;border:none;padding:0;-webkit-text-decoration-line:none;text-decoration-line:none}.stzh-datalist-item__leading.is-button.sc-stzh-datalist-item,.stzh-datalist-item__leading.is-link.sc-stzh-datalist-item,.stzh-datalist-item__value.is-button.sc-stzh-datalist-item,.stzh-datalist-item__value.is-link.sc-stzh-datalist-item,.stzh-datalist-item__label.is-button.sc-stzh-datalist-item,.stzh-datalist-item__label.is-link.sc-stzh-datalist-item,.stzh-datalist-item__meta.is-button.sc-stzh-datalist-item,.stzh-datalist-item__meta.is-link.sc-stzh-datalist-item,.stzh-datalist-item__action-list.is-button.sc-stzh-datalist-item,.stzh-datalist-item__action-list.is-link.sc-stzh-datalist-item{cursor:pointer}.stzh-datalist-item__leading.sc-stzh-datalist-item{-ms-flex-negative:0;flex-shrink:0}.stzh-datalist-item__leading.sc-stzh-datalist-item:not(:empty){padding-right:var(--stzh-space-xsmall)}.stzh-datalist-item__leading-icon-container.sc-stzh-datalist-item{color:var(--leading-icon-color);background-color:var(--leading-icon-background-color);width:2.5rem;height:2.5rem;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;border-radius:50%;-webkit-transition-property:color, background-color;transition-property:color, background-color;-webkit-transition-duration:var(--stzh-base-transition-animation-speed);transition-duration:var(--stzh-base-transition-animation-speed)}.stzh-datalist-item__value.sc-stzh-datalist-item{font-size:var(--stzh-font-curve-p1-default-font-size, var(--stzh-font-milli-font-size));line-height:var(--stzh-font-curve-p1-default-text-line-height, var(--stzh-font-milli-text-line-height));letter-spacing:var(--stzh-font-curve-p1-default-text-letter-spacing);font-family:var(--font-family);font-weight:var(--font-weight);-ms-flex-positive:1;flex-grow:1}@media screen and (min-width: 1024px){.stzh-datalist-item__value.sc-stzh-datalist-item{font-size:var(--stzh-font-curve-p1-medium-font-size, var(--stzh-font-centi-font-size));line-height:var(--stzh-font-curve-p1-medium-text-line-height, var(--stzh-font-centi-text-line-height));letter-spacing:var(--stzh-font-curve-p1-medium-text-letter-spacing)}}.stzh-datalist-item__value.sc-stzh-datalist-item,.stzh-datalist-item__icon.sc-stzh-datalist-item{color:var(--color)}.stzh-datalist-item__label.sc-stzh-datalist-item,.stzh-datalist-item__meta.sc-stzh-datalist-item{font-size:var(--stzh-font-curve-caption-default-font-size, var(--stzh-font-nano-font-size));line-height:var(--stzh-font-curve-caption-default-text-line-height, var(--stzh-font-nano-text-line-height))}@media screen and (min-width: 1024px){.stzh-datalist-item__label.sc-stzh-datalist-item,.stzh-datalist-item__meta.sc-stzh-datalist-item{font-size:var(--stzh-font-curve-caption-medium-font-size, var(--stzh-font-micro-font-size));line-height:var(--stzh-font-curve-caption-medium-text-line-height, var(--stzh-font-micro-text-line-height))}}.stzh-datalist-item__meta.sc-stzh-datalist-item{-ms-flex-pack:end;justify-content:flex-end}.stzh-datalist-item__label.sc-stzh-datalist-item{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);color:var(--stzh-base-lead-color)}.stzh-datalist-item__action-list.sc-stzh-datalist-item{display:var(--action-display);-ms-flex-pack:center;justify-content:center;text-align:center}.stzh-datalist-item__action-list.sc-stzh-datalist-item:not(:empty){padding-left:var(--stzh-space-xsmall)}.stzh-datalist-item__action.is-non-interactive.sc-stzh-datalist-item{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;width:var(--stzh-form-input-tiny-height);height:var(--stzh-form-input-tiny-height)}.stzh-datalist-item__action.is-button[variant=tertiary].sc-stzh-datalist-item{--color:inherit}.stzh-datalist-item__value.sc-stzh-datalist-item,.stzh-datalist-item__icon.sc-stzh-datalist-item{-webkit-transition:color var(--stzh-base-transition-animation-speed);transition:color var(--stzh-base-transition-animation-speed)}.stzh-datalist-item__richtext.sc-stzh-datalist-item{color:inherit;font-family:inherit;font-weight:inherit}.stzh-datalist-item__interactive.sc-stzh-datalist-item{position:absolute;top:0;left:0}.stzh-datalist-item--is-button.sc-stzh-datalist-item .stzh-datalist-item__icon.is-open.sc-stzh-datalist-item{display:none}.stzh-datalist-item--is-button.stzh-datalist-item--is-expanded.sc-stzh-datalist-item .stzh-datalist-item__icon.is-closed.sc-stzh-datalist-item{display:none}.stzh-datalist-item--is-button.stzh-datalist-item--is-expanded.sc-stzh-datalist-item .stzh-datalist-item__icon.is-open.sc-stzh-datalist-item{display:-ms-inline-flexbox;display:inline-flex}.stzh-datalist-item--is-interactive.sc-stzh-datalist-item:hover .stzh-datalist-item__value.sc-stzh-datalist-item,.stzh-datalist-item--is-interactive.sc-stzh-datalist-item:hover .stzh-datalist-item__icon.sc-stzh-datalist-item{color:var(--hover-color)}.stzh-datalist-item--is-interactive.sc-stzh-datalist-item:hover .stzh-datalist-item__value.sc-stzh-datalist-item{-webkit-text-decoration-line:underline;text-decoration-line:underline}.stzh-datalist-item--is-interactive.sc-stzh-datalist-item:hover .stzh-datalist-item__leading-icon-container.sc-stzh-datalist-item,.stzh-datalist-item--is-interactive.sc-stzh-datalist-item:focus-within .stzh-datalist-item__leading-icon-container.sc-stzh-datalist-item{color:var(--hover-leading-icon-color);background-color:var(--hover-leading-icon-background-color)}.stzh-datalist-item--direction-vertical.sc-stzh-datalist-item{display:-ms-flexbox;display:flex;padding-top:var(--stzh-space-xsmall);padding-bottom:var(--stzh-space-xsmall)}.stzh-datalist-item--direction-vertical.stzh-datalist-item--has-hidden-border.sc-stzh-datalist-item{padding-top:calc(var(--stzh-space-xsmall) / 2);padding-bottom:calc(var(--stzh-space-xsmall) / 2)}.stzh-datalist-item--direction-vertical.sc-stzh-datalist-item:not(.stzh-datalist-item--has-hidden-border){border-bottom:0.0625rem solid var(--stzh-base-border-color)}.stzh-datalist-item--direction-vertical.sc-stzh-datalist-item .stzh-datalist-item__leading-icon-container.sc-stzh-datalist-item{width:2.5rem;height:2.5rem}.stzh-datalist-item--direction-vertical.sc-stzh-datalist-item .stzh-datalist-item__leading-icon.sc-stzh-datalist-item{--size:var(--stzh-icon-size-medium)}.stzh-datalist-item--direction-vertical.sc-stzh-datalist-item .stzh-datalist-item__meta.sc-stzh-datalist-item{-ms-flex-direction:column;flex-direction:column;-ms-flex-align:start;align-items:flex-start}.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item,.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item+.stzh-datalist-item__nested.sc-stzh-datalist-item{display:contents}.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item+.stzh-datalist-item__nested.sc-stzh-datalist-item .stzh-datalist-item__nested-inner.sc-stzh-datalist-item{grid-column:1/6}.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item .stzh-datalist-item__leading.sc-stzh-datalist-item,.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item .stzh-datalist-item__value.sc-stzh-datalist-item,.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item .stzh-datalist-item__label.sc-stzh-datalist-item,.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item .stzh-datalist-item__meta.sc-stzh-datalist-item,.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item .stzh-datalist-item__action-list.sc-stzh-datalist-item{min-height:var(--horizontal-min-height)}.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item .stzh-datalist-item__label.sc-stzh-datalist-item,.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item .stzh-datalist-item__value.sc-stzh-datalist-item,.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item .stzh-datalist-item__meta.sc-stzh-datalist-item{padding-top:var(--stzh-space-xsmall);padding-bottom:var(--stzh-space-xsmall)}.stzh-datalist-item--direction-horizontal.stzh-datalist-item--has-hidden-border.sc-stzh-datalist-item .stzh-datalist-item__label.sc-stzh-datalist-item,.stzh-datalist-item--direction-horizontal.stzh-datalist-item--has-hidden-border.sc-stzh-datalist-item .stzh-datalist-item__value.sc-stzh-datalist-item,.stzh-datalist-item--direction-horizontal.stzh-datalist-item--has-hidden-border.sc-stzh-datalist-item .stzh-datalist-item__meta.sc-stzh-datalist-item{padding-top:calc(var(--stzh-space-xsmall) / 2);padding-bottom:calc(var(--stzh-space-xsmall) / 2)}.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item:not(.stzh-datalist-item--has-hidden-border) .stzh-datalist-item__label.sc-stzh-datalist-item,.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item:not(.stzh-datalist-item--has-hidden-border) .stzh-datalist-item__value.sc-stzh-datalist-item,.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item:not(.stzh-datalist-item--has-hidden-border) .stzh-datalist-item__meta.sc-stzh-datalist-item,.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item:not(.stzh-datalist-item--has-hidden-border) .stzh-datalist-item__action-list.sc-stzh-datalist-item{border-bottom:0.0625rem solid var(--stzh-base-border-color)}.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item .stzh-datalist-item__label.sc-stzh-datalist-item:not(:empty){min-width:var(--label-min-width);padding-right:var(--stzh-space-xsmall)}.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item .stzh-datalist-item__meta.sc-stzh-datalist-item:not(:empty){padding-left:var(--stzh-space-xsmall)}.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item .stzh-datalist-item__leading-icon-container.sc-stzh-datalist-item{width:2rem;height:2rem}.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item .stzh-datalist-item__meta-status.sc-stzh-datalist-item+.stzh-datalist-item__meta-text.sc-stzh-datalist-item{margin-left:var(--stzh-space-xsmall)}";
 let datalistItemCounter = 0;
 const StzhDatalistItem = /*@__PURE__*/ proxyCustomElement(class StzhDatalistItem extends HTMLElement {

package/dist/components/stzh-datalist-item2.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"stzh-datalist-item2.js","mappings":"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","names":[],"sources":["src/components/stzh-datalist-item/stzh-datalist-item.scss?tag=stzh-datalist-item&encapsulation=scoped","src/components/stzh-datalist-item/stzh-datalist-item.tsx"],"sourcesContent":[":host {\n --font-family: var(--stzh-font-family-regular);\n --font-weight: var(--stzh-font-weight-regular);\n --color: inherit;\n --action-display: flex;\n --label-min-width: var(--item-label-min-width, none);\n --leading-icon-background-color: #{$colorGrey5};\n --leading-icon-color: #{$colorGrey70};\n\n --hover-leading-icon-background-color: #{$colorPrimaryHover};\n --hover-leading-icon-color: #{$colorWhite};\n\n --horizontal-min-height: 48px;\n\n display: contents;\n\n &[href]:not([href=\"\"]),\n &[a11y-expanded],\n &[a11y-controls] {\n --color: #{$colorPrimary};\n --hover-color: #{$colorPrimaryHover};\n }\n\n ::slotted(stzh-datalist) {\n margin-left: space('large');\n }\n}\n\n.stzh-datalist-item {\n position: relative;\n text-decoration-line: none;\n\n &__vhidden {\n @include visuallyhidden;\n }\n\n &__wrapper {\n flex-grow: 1;\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n }\n\n &__leading,\n &__value,\n &__label,\n &__meta,\n &__action-list {\n color: inherit;\n display: flex;\n align-items: center;\n appearance: none;\n font-family: inherit;\n background: transparent;\n border: none;\n padding: 0;\n text-decoration-line: none;\n\n &.is-button,\n &.is-link {\n cursor: pointer;\n }\n }\n\n &__leading {\n flex-shrink: 0;\n\n &:not(:empty) {\n padding-right: space('xsmall');\n }\n }\n\n &__leading-icon-container {\n color: var(--leading-icon-color);\n background-color: var(--leading-icon-background-color);\n width: 40px;\n height: 40px;\n display: flex;\n justify-content: center;\n align-items: center;\n border-radius: 50%;\n transition-property: color, background-color;\n transition-duration: $baseTransitionAnimationSpeed;\n }\n\n &__value {\n @include fontCurve('p1');\n font-family: var(--font-family);\n font-weight: var(--font-weight);\n flex-grow: 1;\n }\n\n &__value,\n &__icon {\n color: var(--color);\n }\n\n &__label,\n &__meta {\n @include fontCurve('caption');\n }\n\n &__meta {\n justify-content: flex-end;\n }\n\n &__label {\n @include font('medium');\n color: $baseLeadColor;\n }\n\n &__action-list {\n display: var(--action-display);\n justify-content: center;\n text-align: center;\n\n &:not(:empty) {\n padding-left: space('xsmall');\n }\n }\n\n &__action {\n &.is-non-interactive {\n display: flex;\n justify-content: center;\n align-items: center;\n width: $formInputHeightTiny;\n height: $formInputHeightTiny;\n }\n\n &.is-button[variant=\"tertiary\"] {\n --color: inherit;\n }\n }\n\n &__value,\n &__icon {\n transition: color $baseTransitionAnimationSpeed;\n }\n\n &__richtext {\n color: inherit;\n font-family: inherit;\n font-weight: inherit;\n }\n\n &__interactive {\n position: absolute;\n top: 0;\n left: 0;\n }\n\n /* Button variant /\n\n &--is-button &__icon.is-open {\n display: none;\n }\n\n &--is-button#{&}--is-expanded &__icon {\n &.is-closed {\n display: none;\n }\n\n &.is-open {\n display: inline-flex;\n }\n }\n\n / Interactive variant /\n\n &--is-interactive:hover &__value,\n &--is-interactive:hover &__icon {\n color: var(--hover-color);\n }\n\n &--is-interactive:hover &__value {\n text-decoration-line: underline;\n }\n\n &--is-interactive:hover &__leading-icon-container,\n &--is-interactive:focus-within &__leading-icon-container {\n color: var(--hover-leading-icon-color);\n background-color: var(--hover-leading-icon-background-color);\n }\n\n / Vertical variant /\n\n &--direction-vertical {\n display: flex;\n padding-top: space('xsmall');\n padding-bottom: space('xsmall');\n }\n\n &--direction-vertical#{&}--has-hidden-border {\n padding-top: calc(#{space('xsmall')} / 2);\n padding-bottom: calc(#{space('xsmall')} / 2);\n }\n\n &--direction-vertical:not(#{&}--has-hidden-border) {\n border-bottom: 1px solid $baseBorderColor;\n }\n\n &--direction-vertical &__leading-icon-container {\n width: 40px;\n height: 40px;\n }\n\n &--direction-vertical &__leading-icon {\n --size: #{iconSize('medium')};\n }\n\n &--direction-vertical &__meta {\n flex-direction: column;\n }\n\n / Horizontal variant /\n\n &--direction-horizontal,\n &--direction-horizontal + &__nested {\n display: contents;\n }\n\n &--direction-horizontal + &__nested &__nested-inner {\n grid-column: 1 / 6;\n }\n\n &--direction-horizontal &__leading,\n &--direction-horizontal &__value,\n &--direction-horizontal &__label,\n &--direction-horizontal &__meta,\n &--direction-horizontal &__action-list {\n min-height: var(--horizontal-min-height);\n }\n\n &--direction-horizontal &__label,\n &--direction-horizontal &__value,\n &--direction-horizontal &__meta {\n padding-top: space('xsmall');\n padding-bottom: space('xsmall');\n }\n\n &--direction-horizontal#{&}--has-hidden-border &__label,\n &--direction-horizontal#{&}--has-hidden-border &__value,\n &--direction-horizontal#{&}--has-hidden-border &__meta {\n padding-top: calc(#{space('xsmall')} / 2);\n padding-bottom: calc(#{space('xsmall')} / 2);\n }\n\n // &--direction-horizontal:not(#{&}--has-hidden-border) &__leading,\n &--direction-horizontal:not(#{&}--has-hidden-border) &__label,\n &--direction-horizontal:not(#{&}--has-hidden-border) &__value,\n &--direction-horizontal:not(#{&}--has-hidden-border) &__meta,\n &--direction-horizontal:not(#{&}--has-hidden-border) &__action-list {\n border-bottom: 1px solid $baseBorderColor;\n }\n\n &--direction-horizontal &__label {\n &:not(:empty) {\n min-width: var(--label-min-width);\n padding-right: space('xsmall');\n }\n }\n\n &--direction-horizontal &__meta {\n &:not(:empty) {\n padding-left: space('xsmall');\n }\n }\n\n &--direction-horizontal &__leading-icon-container {\n width: 32px;\n height: 32px;\n }\n\n &--direction-horizontal &__meta-status + &__meta-text {\n margin-left: space('xsmall');\n }\n}\n","import {\n Component,\n Host,\n h,\n Element,\n Prop,\n Event,\n EventEmitter,\n Fragment,\n State,\n Watch\n} from \"@stencil/core\";\n\nimport {\n StzhDatalistItemActionClickEvent,\n StzhDatalistDirectionChangeEvent,\n StzhDatalistHideBorderChangeEvent\n} from \"../../index\";\n\nimport { StzhLocaleComponent } from \"../../utils/translation-utils\";\n\nlet datalistItemCounter = 0;\n\n/\n @slot - Slot for nested datalist\n * @slot value - Slot for value (or use value slot instead)\n /\n@Component({\n tag: \"stzh-datalist-item\",\n styleUrl: \"stzh-datalist-item.scss\",\n scoped: true\n})\nexport class StzhDatalistItem {\n /* Translation strings /\n @Prop() localization: StzhLocaleComponent;\n\n /* Direction /\n @Prop({ reflect: true }) direction: \"vertical\" \| \"horizontal\" = \"vertical\";\n\n /* Link /\n @Prop({ reflect: true }) href: string;\n\n /* Rel (if href is used) /\n @Prop() rel: string;\n\n /* Target (if href is used) /\n @Prop() target: string;\n\n /* Download attribute of link (if `href` used) /\n @Prop() download: string;\n\n /* Leading icon /\n @Prop() leadingIcon: string;\n\n /* Icon of action button (if href is used, will only be for presentation and default to link icon) /\n @Prop() icon: string;\n\n /* Overwrite aria-label of action button (default aria label is `label` and `value`). /\n @Prop() iconLabel: string;\n\n /* Tooltip content of action button. Overwrites aria-label (set by default or `iconLabel`) of action button. /\n @Prop() iconTooltip: string;\n\n /* Label /\n @Prop() label: string = \"\";\n\n /* Value (or use value slot instead) /\n @Prop() value: string = \"\";\n\n /* Meta /\n @Prop() meta: string = \"\";\n\n /* Status Label /\n @Prop() statusLabel: string = \"\";\n\n /* Status Type /\n @Prop() statusType: \"default\" \| \"success\" \| \"warning\" \| \"error\" \| \"info\" = \"default\";\n\n /* Hide border lines /\n @Prop({ reflect: true }) hideBorder: boolean = false;\n\n /* Aria expanded of link/button /\n @Prop({ reflect: true, attribute: \"a11y-expanded\" }) a11yExpanded: boolean;\n\n /* Aria controls of link/button /\n @Prop({ attribute: \"a11y-controls\" }) a11yControls: string;\n\n /* Whether rel contains external /\n @State() external: boolean = false;\n\n /* Item action click event */\n @Event() stzhItemActionClick: EventEmitter<StzhDatalistItemActionClickEvent>;\n\n @Element() element: HTMLStzhDatalistItemElement;\n\n @Watch(\"rel\")\n externalWatcher() {\n this.external = this.rel && this.rel.includes(\"external\");\n }\n\n private datalist: HTMLStzhDatalistElement;\n private datalistItemId: string;\n\n private actionClick = (originalEvent: MouseEvent) => {\n this.stzhItemActionClick.emit({\n component: \"stzh-datalist-item\",\n originalEvent\n });\n }\n\n private handleDirectionChange = (event: CustomEvent<StzhDatalistDirectionChangeEvent>) => {\n this.direction = event.detail.value;\n }\n\n private handleHideBorderChange = (event: CustomEvent<StzhDatalistHideBorderChangeEvent>) => {\n this.hideBorder = event.detail.value;\n }\n\n private renderInner(isButton: boolean): DocumentFragment {\n const Item = isButton ? \"button\" : (this.href ? \"a\" : \"div\");\n\n return (\n <Fragment>\n <Item\n aria-hidden={this.label ? null : \"true\"}\n tabindex=\"-1\"\n id={`${this.datalistItemId}-label`}\n class={{\n \"stzh-datalist-item__label\": true,\n \"is-button\": isButton,\n \"is-link\": !!this.href\n }}\n href={this.href}\n rel={this.rel}\n target={this.target}\n download={this.download}\n >\n {this.label}\n </Item>\n\n <Item\n id={`${this.datalistItemId}-value`}\n class={{\n \"stzh-datalist-item__value\": true,\n \"is-button\": isButton,\n \"is-link\": !!this.href\n }}\n href={this.href}\n rel={this.rel}\n target={this.target}\n download={this.download}\n aria-labelledby={Item !== 'div' ? `${this.datalistItemId}-label ${this.datalistItemId}-value ${this.datalistItemId}-meta` : null}\n aria-controls={this.a11yControls \|\| null}\n aria-expanded={typeof this.a11yExpanded !== \"undefined\"\n ? (this.a11yExpanded ? \"true\" : \"false\") : null}\n >\n {this.external && <div class=\"stzh-datalist-item__vhidden\">{this.localization.$globals.externalLinkLabel}</div>}\n {this.download && <div class=\"stzh-datalist-item__vhidden\">{this.localization.$globals.downloadLinkLabel}</div>}\n <stzh-richtext class=\"stzh-datalist-item__richtext\" innerHTML={this.value}>\n <slot name=\"value\"></slot>\n </stzh-richtext>\n </Item>\n\n <Item\n aria-hidden={this.statusLabel \|\| this.meta ? null : \"true\"}\n tabindex=\"-1\"\n id={`${this.datalistItemId}-meta`}\n class={{\n \"stzh-datalist-item__meta\": true,\n \"is-button\": isButton,\n \"is-link\": !!this.href\n }}\n href={this.href}\n rel={this.rel}\n target={this.target}\n download={this.download}\n >\n {this.statusLabel &&\n <stzh-status\n class=\"stzh-datalist-item__meta-status\"\n label={this.statusLabel}\n type={this.statusType}\n ></stzh-status>\n }\n {this.meta && <span class=\"stzh-datalist-item__meta-text\">{this.meta}</span>}\n </Item>\n </Fragment>\n )\n }\n\n private renderLeadingIcon(isButton: boolean): HTMLElement {\n const Item = isButton ? \"button\" : (this.href ? \"a\" : \"div\");\n\n return (\n <Item\n role=\"presentation\"\n aria-hidden=\"true\"\n tabindex=\"-1\"\n class={{\n \"stzh-datalist-item__leading\": true,\n \"is-button\": isButton,\n \"is-link\": !!this.href\n }}\n href={this.href}\n rel={this.rel}\n target={this.target}\n download={this.download}\n >\n {this.leadingIcon &&\n <div class=\"stzh-datalist-item__leading-icon-container\">\n <stzh-icon class=\"stzh-datalist-item__leading-icon\" name={this.leadingIcon}></stzh-icon>\n </div>\n }\n </Item>\n );\n }\n\n async connectedCallback() {\n this.datalist = this.element.closest(\"stzh-datalist\");\n\n if (this.datalist) {\n this.direction = this.datalist.currentDirection;\n this.hideBorder = this.datalist.hideBorder;\n\n this.datalist.addEventListener(\"stzhDirectionChange\", this.handleDirectionChange);\n this.datalist.addEventListener(\"stzhHideBorderChange\", this.handleHideBorderChange);\n }\n }\n\n disconnectedCallback() {\n if (this.datalist) {\n this.datalist.removeEventListener(\"stzhDirectionChange\", this.handleDirectionChange);\n this.datalist.removeEventListener(\"stzhHideBorderChange\", this.handleHideBorderChange);\n this.datalist = null;\n }\n }\n\n async componentWillLoad() {\n this.datalistItemId = `stzh-datalist-item-${datalistItemCounter++}`;\n this.externalWatcher();\n\n if (!this.localization) {\n this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"datalist-item\");\n }\n }\n\n render() {\n const isButton = typeof this.a11yExpanded !== \"undefined\"\n \|\| typeof this.a11yControls !== \"undefined\";\n\n const hasActionButton = !this.href && this.icon;\n\n const classes = {\n \"stzh-datalist-item\": true,\n \"stzh-datalist-item--is-interactive\": !!this.href \|\| isButton,\n \"stzh-datalist-item--is-link\": !!this.href,\n \"stzh-datalist-item--is-button\": isButton,\n \"stzh-datalist-item--is-expanded\": this.a11yExpanded,\n \"stzh-datalist-item--has-hidden-border\": this.hideBorder,\n [`stzh-datalist-item--direction-${this.direction}`]: !!this.direction\n };\n\n const Item = isButton ? \"button\" : (this.href ? \"a\" : \"div\");\n\n const ActionButton = () => {\n return (\n <stzh-button\n class={{\n \"stzh-datalist-item__action\": true,\n \"is-button\": true\n }}\n variant=\"tertiary\"\n size=\"tiny\"\n aria-label={this.iconLabel \|\| (`${this.label} ${this.value}`)}\n iconOnly={true}\n icon={this.icon}\n onClick={this.actionClick}\n ></stzh-button>\n );\n }\n\n return (\n <Host role=\"listitem\">\n <div class={classes}>\n {this.direction === \"horizontal\" ?\n <Fragment>\n {this.renderLeadingIcon(isButton)}\n {this.renderInner(isButton)}\n </Fragment>\n :\n <Fragment>\n {this.renderLeadingIcon(isButton)}\n <div class=\"stzh-datalist-item__wrapper\">\n {this.renderInner(isButton)}\n </div>\n </Fragment>\n }\n <Item\n role={hasActionButton ? null : \"presentation\"}\n aria-hidden={hasActionButton ? null : \"true\"}\n tabindex=\"-1\"\n class={{\n \"stzh-datalist-item__action-list\": true,\n \"is-button\": isButton,\n \"is-link\": !!this.href\n }}\n href={this.href}\n rel={this.rel}\n target={this.target}\n download={this.download}\n >\n {this.href &&\n (this.download ?\n <div class=\"stzh-datalist-item__action is-non-interactive\">\n <stzh-icon class=\"stzh-datalist-item__icon\" name={this.icon ? this.icon : \"download\"}></stzh-icon>\n </div>\n :\n <div class=\"stzh-datalist-item__action is-non-interactive\">\n <stzh-icon class=\"stzh-datalist-item__icon\" name={this.icon ? this.icon : (this.external ? \"external-link\" : \"arrow-right\")}></stzh-icon>\n </div>\n )\n }\n\n {isButton &&\n <div class=\"stzh-datalist-item__action is-non-interactive\">\n <stzh-icon class=\"stzh-datalist-item__icon is-closed\" name={this.icon ? this.icon : \"plus\"}></stzh-icon>\n <stzh-icon class=\"stzh-datalist-item__icon is-open\" name={this.icon ? this.icon : \"minus\"}></stzh-icon>\n </div>\n }\n\n {hasActionButton &&\n (this.iconTooltip ?\n <stzh-tooltip content={this.iconTooltip}>\n {ActionButton()}\n </stzh-tooltip>\n :\n ActionButton())\n }\n </Item>\n </div>\n\n <div class=\"stzh-datalist-item__nested\">\n <div class=\"stzh-datalist-item__nested-inner\">\n <slot></slot>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"stzh-datalist-item2.js","mappings":"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","names":[],"sources":["src/components/stzh-datalist-item/stzh-datalist-item.scss?tag=stzh-datalist-item&encapsulation=scoped","src/components/stzh-datalist-item/stzh-datalist-item.tsx"],"sourcesContent":[":host {\n --font-family: var(--stzh-font-family-regular);\n --font-weight: var(--stzh-font-weight-regular);\n --color: inherit;\n --action-display: flex;\n --label-min-width: var(--item-label-min-width, none);\n --leading-icon-background-color: #{$colorGrey5};\n --leading-icon-color: #{$colorGrey70};\n\n --hover-leading-icon-background-color: #{$colorPrimaryHover};\n --hover-leading-icon-color: #{$colorWhite};\n\n --horizontal-min-height: 48px;\n\n display: contents;\n\n &[href]:not([href=\"\"]),\n &[a11y-expanded],\n &[a11y-controls] {\n --color: #{$colorPrimary};\n --hover-color: #{$colorPrimaryHover};\n }\n\n ::slotted(stzh-datalist) {\n margin-left: space('large');\n }\n}\n\n.stzh-datalist-item {\n position: relative;\n text-decoration-line: none;\n\n &__vhidden {\n @include visuallyhidden;\n }\n\n &__wrapper {\n flex-grow: 1;\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n }\n\n &__leading,\n &__value,\n &__label,\n &__meta,\n &__action-list {\n color: inherit;\n display: flex;\n align-items: center;\n appearance: none;\n font-family: inherit;\n background: transparent;\n border: none;\n padding: 0;\n text-decoration-line: none;\n\n &.is-button,\n &.is-link {\n cursor: pointer;\n }\n }\n\n &__leading {\n flex-shrink: 0;\n\n &:not(:empty) {\n padding-right: space('xsmall');\n }\n }\n\n &__leading-icon-container {\n color: var(--leading-icon-color);\n background-color: var(--leading-icon-background-color);\n width: 40px;\n height: 40px;\n display: flex;\n justify-content: center;\n align-items: center;\n border-radius: 50%;\n transition-property: color, background-color;\n transition-duration: $baseTransitionAnimationSpeed;\n }\n\n &__value {\n @include fontCurve('p1');\n font-family: var(--font-family);\n font-weight: var(--font-weight);\n flex-grow: 1;\n }\n\n &__value,\n &__icon {\n color: var(--color);\n }\n\n &__label,\n &__meta {\n @include fontCurve('caption');\n }\n\n &__meta {\n justify-content: flex-end;\n }\n\n &__label {\n @include font('medium');\n color: $baseLeadColor;\n }\n\n &__action-list {\n display: var(--action-display);\n justify-content: center;\n text-align: center;\n\n &:not(:empty) {\n padding-left: space('xsmall');\n }\n }\n\n &__action {\n &.is-non-interactive {\n display: flex;\n justify-content: center;\n align-items: center;\n width: $formInputHeightTiny;\n height: $formInputHeightTiny;\n }\n\n &.is-button[variant=\"tertiary\"] {\n --color: inherit;\n }\n }\n\n &__value,\n &__icon {\n transition: color $baseTransitionAnimationSpeed;\n }\n\n &__richtext {\n color: inherit;\n font-family: inherit;\n font-weight: inherit;\n }\n\n &__interactive {\n position: absolute;\n top: 0;\n left: 0;\n }\n\n /* Button variant /\n\n &--is-button &__icon.is-open {\n display: none;\n }\n\n &--is-button#{&}--is-expanded &__icon {\n &.is-closed {\n display: none;\n }\n\n &.is-open {\n display: inline-flex;\n }\n }\n\n / Interactive variant /\n\n &--is-interactive:hover &__value,\n &--is-interactive:hover &__icon {\n color: var(--hover-color);\n }\n\n &--is-interactive:hover &__value {\n text-decoration-line: underline;\n }\n\n &--is-interactive:hover &__leading-icon-container,\n &--is-interactive:focus-within &__leading-icon-container {\n color: var(--hover-leading-icon-color);\n background-color: var(--hover-leading-icon-background-color);\n }\n\n / Vertical variant /\n\n &--direction-vertical {\n display: flex;\n padding-top: space('xsmall');\n padding-bottom: space('xsmall');\n }\n\n &--direction-vertical#{&}--has-hidden-border {\n padding-top: calc(#{space('xsmall')} / 2);\n padding-bottom: calc(#{space('xsmall')} / 2);\n }\n\n &--direction-vertical:not(#{&}--has-hidden-border) {\n border-bottom: 1px solid $baseBorderColor;\n }\n\n &--direction-vertical &__leading-icon-container {\n width: 40px;\n height: 40px;\n }\n\n &--direction-vertical &__leading-icon {\n --size: #{iconSize('medium')};\n }\n\n &--direction-vertical &__meta {\n flex-direction: column;\n align-items: flex-start;\n }\n\n / Horizontal variant /\n\n &--direction-horizontal,\n &--direction-horizontal + &__nested {\n display: contents;\n }\n\n &--direction-horizontal + &__nested &__nested-inner {\n grid-column: 1 / 6;\n }\n\n &--direction-horizontal &__leading,\n &--direction-horizontal &__value,\n &--direction-horizontal &__label,\n &--direction-horizontal &__meta,\n &--direction-horizontal &__action-list {\n min-height: var(--horizontal-min-height);\n }\n\n &--direction-horizontal &__label,\n &--direction-horizontal &__value,\n &--direction-horizontal &__meta {\n padding-top: space('xsmall');\n padding-bottom: space('xsmall');\n }\n\n &--direction-horizontal#{&}--has-hidden-border &__label,\n &--direction-horizontal#{&}--has-hidden-border &__value,\n &--direction-horizontal#{&}--has-hidden-border &__meta {\n padding-top: calc(#{space('xsmall')} / 2);\n padding-bottom: calc(#{space('xsmall')} / 2);\n }\n\n // &--direction-horizontal:not(#{&}--has-hidden-border) &__leading,\n &--direction-horizontal:not(#{&}--has-hidden-border) &__label,\n &--direction-horizontal:not(#{&}--has-hidden-border) &__value,\n &--direction-horizontal:not(#{&}--has-hidden-border) &__meta,\n &--direction-horizontal:not(#{&}--has-hidden-border) &__action-list {\n border-bottom: 1px solid $baseBorderColor;\n }\n\n &--direction-horizontal &__label {\n &:not(:empty) {\n min-width: var(--label-min-width);\n padding-right: space('xsmall');\n }\n }\n\n &--direction-horizontal &__meta {\n &:not(:empty) {\n padding-left: space('xsmall');\n }\n }\n\n &--direction-horizontal &__leading-icon-container {\n width: 32px;\n height: 32px;\n }\n\n &--direction-horizontal &__meta-status + &__meta-text {\n margin-left: space('xsmall');\n }\n}\n","import {\n Component,\n Host,\n h,\n Element,\n Prop,\n Event,\n EventEmitter,\n Fragment,\n State,\n Watch\n} from \"@stencil/core\";\n\nimport {\n StzhDatalistItemActionClickEvent,\n StzhDatalistDirectionChangeEvent,\n StzhDatalistHideBorderChangeEvent\n} from \"../../index\";\n\nimport { StzhLocaleComponent } from \"../../utils/translation-utils\";\n\nlet datalistItemCounter = 0;\n\n/\n @slot - Slot for nested datalist\n * @slot value - Slot for value (or use value slot instead)\n /\n@Component({\n tag: \"stzh-datalist-item\",\n styleUrl: \"stzh-datalist-item.scss\",\n scoped: true\n})\nexport class StzhDatalistItem {\n /* Translation strings /\n @Prop() localization: StzhLocaleComponent;\n\n /* Direction /\n @Prop({ reflect: true }) direction: \"vertical\" \| \"horizontal\" = \"vertical\";\n\n /* Link /\n @Prop({ reflect: true }) href: string;\n\n /* Rel (if href is used) /\n @Prop() rel: string;\n\n /* Target (if href is used) /\n @Prop() target: string;\n\n /* Download attribute of link (if `href` used) /\n @Prop() download: string;\n\n /* Leading icon /\n @Prop() leadingIcon: string;\n\n /* Icon of action button (if href is used, will only be for presentation and default to link icon) /\n @Prop() icon: string;\n\n /* Overwrite aria-label of action button (default aria label is `label` and `value`). /\n @Prop() iconLabel: string;\n\n /* Tooltip content of action button. Overwrites aria-label (set by default or `iconLabel`) of action button. /\n @Prop() iconTooltip: string;\n\n /* Label /\n @Prop() label: string = \"\";\n\n /* Value (or use value slot instead) /\n @Prop() value: string = \"\";\n\n /* Meta /\n @Prop() meta: string = \"\";\n\n /* Status Label /\n @Prop() statusLabel: string = \"\";\n\n /* Status Type /\n @Prop() statusType: \"default\" \| \"success\" \| \"warning\" \| \"error\" \| \"info\" = \"default\";\n\n /* Hide border lines /\n @Prop({ reflect: true }) hideBorder: boolean = false;\n\n /* Aria expanded of link/button /\n @Prop({ reflect: true, attribute: \"a11y-expanded\" }) a11yExpanded: boolean;\n\n /* Aria controls of link/button /\n @Prop({ attribute: \"a11y-controls\" }) a11yControls: string;\n\n /* Whether rel contains external /\n @State() external: boolean = false;\n\n /* Item action click event */\n @Event() stzhItemActionClick: EventEmitter<StzhDatalistItemActionClickEvent>;\n\n @Element() element: HTMLStzhDatalistItemElement;\n\n @Watch(\"rel\")\n externalWatcher() {\n this.external = this.rel && this.rel.includes(\"external\");\n }\n\n private datalist: HTMLStzhDatalistElement;\n private datalistItemId: string;\n\n private actionClick = (originalEvent: MouseEvent) => {\n this.stzhItemActionClick.emit({\n component: \"stzh-datalist-item\",\n originalEvent\n });\n }\n\n private handleDirectionChange = (event: CustomEvent<StzhDatalistDirectionChangeEvent>) => {\n this.direction = event.detail.value;\n }\n\n private handleHideBorderChange = (event: CustomEvent<StzhDatalistHideBorderChangeEvent>) => {\n this.hideBorder = event.detail.value;\n }\n\n private renderInner(isButton: boolean): DocumentFragment {\n const Item = isButton ? \"button\" : (this.href ? \"a\" : \"div\");\n\n return (\n <Fragment>\n <Item\n aria-hidden={this.label ? null : \"true\"}\n tabindex=\"-1\"\n id={`${this.datalistItemId}-label`}\n class={{\n \"stzh-datalist-item__label\": true,\n \"is-button\": isButton,\n \"is-link\": !!this.href\n }}\n href={this.href}\n rel={this.rel}\n target={this.target}\n download={this.download}\n >\n {this.label}\n </Item>\n\n <Item\n id={`${this.datalistItemId}-value`}\n class={{\n \"stzh-datalist-item__value\": true,\n \"is-button\": isButton,\n \"is-link\": !!this.href\n }}\n href={this.href}\n rel={this.rel}\n target={this.target}\n download={this.download}\n aria-labelledby={Item !== 'div' ? `${this.datalistItemId}-label ${this.datalistItemId}-value ${this.datalistItemId}-meta` : null}\n aria-controls={this.a11yControls \|\| null}\n aria-expanded={typeof this.a11yExpanded !== \"undefined\"\n ? (this.a11yExpanded ? \"true\" : \"false\") : null}\n >\n {this.external && <div class=\"stzh-datalist-item__vhidden\">{this.localization.$globals.externalLinkLabel}</div>}\n {this.download && <div class=\"stzh-datalist-item__vhidden\">{this.localization.$globals.downloadLinkLabel}</div>}\n <stzh-richtext class=\"stzh-datalist-item__richtext\" innerHTML={this.value}>\n <slot name=\"value\"></slot>\n </stzh-richtext>\n </Item>\n\n <Item\n aria-hidden={this.statusLabel \|\| this.meta ? null : \"true\"}\n tabindex=\"-1\"\n id={`${this.datalistItemId}-meta`}\n class={{\n \"stzh-datalist-item__meta\": true,\n \"is-button\": isButton,\n \"is-link\": !!this.href\n }}\n href={this.href}\n rel={this.rel}\n target={this.target}\n download={this.download}\n >\n {this.statusLabel &&\n <stzh-status\n class=\"stzh-datalist-item__meta-status\"\n label={this.statusLabel}\n type={this.statusType}\n ></stzh-status>\n }\n {this.meta && <span class=\"stzh-datalist-item__meta-text\">{this.meta}</span>}\n </Item>\n </Fragment>\n )\n }\n\n private renderLeadingIcon(isButton: boolean): HTMLElement {\n const Item = isButton ? \"button\" : (this.href ? \"a\" : \"div\");\n\n return (\n <Item\n role=\"presentation\"\n aria-hidden=\"true\"\n tabindex=\"-1\"\n class={{\n \"stzh-datalist-item__leading\": true,\n \"is-button\": isButton,\n \"is-link\": !!this.href\n }}\n href={this.href}\n rel={this.rel}\n target={this.target}\n download={this.download}\n >\n {this.leadingIcon &&\n <div class=\"stzh-datalist-item__leading-icon-container\">\n <stzh-icon class=\"stzh-datalist-item__leading-icon\" name={this.leadingIcon}></stzh-icon>\n </div>\n }\n </Item>\n );\n }\n\n async connectedCallback() {\n this.datalist = this.element.closest(\"stzh-datalist\");\n\n if (this.datalist) {\n this.direction = this.datalist.currentDirection;\n this.hideBorder = this.datalist.hideBorder;\n\n this.datalist.addEventListener(\"stzhDirectionChange\", this.handleDirectionChange);\n this.datalist.addEventListener(\"stzhHideBorderChange\", this.handleHideBorderChange);\n }\n }\n\n disconnectedCallback() {\n if (this.datalist) {\n this.datalist.removeEventListener(\"stzhDirectionChange\", this.handleDirectionChange);\n this.datalist.removeEventListener(\"stzhHideBorderChange\", this.handleHideBorderChange);\n this.datalist = null;\n }\n }\n\n async componentWillLoad() {\n this.datalistItemId = `stzh-datalist-item-${datalistItemCounter++}`;\n this.externalWatcher();\n\n if (!this.localization) {\n this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"datalist-item\");\n }\n }\n\n render() {\n const isButton = typeof this.a11yExpanded !== \"undefined\"\n \|\| typeof this.a11yControls !== \"undefined\";\n\n const hasActionButton = !this.href && this.icon;\n\n const classes = {\n \"stzh-datalist-item\": true,\n \"stzh-datalist-item--is-interactive\": !!this.href \|\| isButton,\n \"stzh-datalist-item--is-link\": !!this.href,\n \"stzh-datalist-item--is-button\": isButton,\n \"stzh-datalist-item--is-expanded\": this.a11yExpanded,\n \"stzh-datalist-item--has-hidden-border\": this.hideBorder,\n [`stzh-datalist-item--direction-${this.direction}`]: !!this.direction\n };\n\n const Item = isButton ? \"button\" : (this.href ? \"a\" : \"div\");\n\n const ActionButton = () => {\n return (\n <stzh-button\n class={{\n \"stzh-datalist-item__action\": true,\n \"is-button\": true\n }}\n variant=\"tertiary\"\n size=\"tiny\"\n aria-label={this.iconLabel \|\| (`${this.label} ${this.value}`)}\n iconOnly={true}\n icon={this.icon}\n onClick={this.actionClick}\n ></stzh-button>\n );\n }\n\n return (\n <Host role=\"listitem\">\n <div class={classes}>\n {this.direction === \"horizontal\" ?\n <Fragment>\n {this.renderLeadingIcon(isButton)}\n {this.renderInner(isButton)}\n </Fragment>\n :\n <Fragment>\n {this.renderLeadingIcon(isButton)}\n <div class=\"stzh-datalist-item__wrapper\">\n {this.renderInner(isButton)}\n </div>\n </Fragment>\n }\n <Item\n role={hasActionButton ? null : \"presentation\"}\n aria-hidden={hasActionButton ? null : \"true\"}\n tabindex=\"-1\"\n class={{\n \"stzh-datalist-item__action-list\": true,\n \"is-button\": isButton,\n \"is-link\": !!this.href\n }}\n href={this.href}\n rel={this.rel}\n target={this.target}\n download={this.download}\n >\n {this.href &&\n (this.download ?\n <div class=\"stzh-datalist-item__action is-non-interactive\">\n <stzh-icon class=\"stzh-datalist-item__icon\" name={this.icon ? this.icon : \"download\"}></stzh-icon>\n </div>\n :\n <div class=\"stzh-datalist-item__action is-non-interactive\">\n <stzh-icon class=\"stzh-datalist-item__icon\" name={this.icon ? this.icon : (this.external ? \"external-link\" : \"arrow-right\")}></stzh-icon>\n </div>\n )\n }\n\n {isButton &&\n <div class=\"stzh-datalist-item__action is-non-interactive\">\n <stzh-icon class=\"stzh-datalist-item__icon is-closed\" name={this.icon ? this.icon : \"plus\"}></stzh-icon>\n <stzh-icon class=\"stzh-datalist-item__icon is-open\" name={this.icon ? this.icon : \"minus\"}></stzh-icon>\n </div>\n }\n\n {hasActionButton &&\n (this.iconTooltip ?\n <stzh-tooltip content={this.iconTooltip}>\n {ActionButton()}\n </stzh-tooltip>\n :\n ActionButton())\n }\n </Item>\n </div>\n\n <div class=\"stzh-datalist-item__nested\">\n <div class=\"stzh-datalist-item__nested-inner\">\n <slot></slot>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/stzh-dropdown2.js CHANGED Viewed

@@ -1610,6 +1610,7 @@ var defaults = {
   searchField: ['text'],
   searchConjunction: 'and',
   mode: null,
+  openDisplay: 'block',
   wrapperClass: 'ts-wrapper',
   controlClass: 'ts-control',
   dropdownClass: 'ts-dropdown',
@@ -3191,7 +3192,7 @@ class TomSelect extends MicroPlugin(MicroEvent) {
     const groups = {};
     const groups_order = [];
     var self = this;
-    var query = self.inputValue();
+    var query = this.settings.transformLoadQuery(this.control_input.value);
     const same_query = query === self.lastQuery || query == '' && self.lastQuery == null;
     var results = self.search(query);
     var active_option = null;
@@ -3963,12 +3964,12 @@ class TomSelect extends MicroPlugin(MicroEvent) {
     self.refreshState();
     applyCSS(self.dropdown, {
       visibility: 'hidden',
-      display: 'block'
+      display: self.settings.openDisplay
     });
     self.positionDropdown();
     applyCSS(self.dropdown, {
       visibility: 'visible',
-      display: 'block'
+      display: self.settings.openDisplay
     });
     self.focus();
     self.trigger('dropdown_open', self.dropdown);
@@ -5154,6 +5155,14 @@ const StzhDropdown = /*@__PURE__*/ proxyCustomElement(class StzhDropdown extends
         if (typeof this.transformLoadQuery === "function") {
           return this.transformLoadQuery(inputValue);
         }
+        else if (this.transformLoadQuery === "join") {
+          const lastQueries = Array.from(this.tomSelect.controlChildren())
+            .map((element) => element.innerText);
+          return (lastQueries.length > 0
+            ? lastQueries.join(" ") + (inputValue ? " " : "")
+            : "")
+            + inputValue.replace(/\s\s+/g, ' ');
+        }
         else if (this.transformLoadQuery === "trim-to-single-ws") {
           return inputValue.replace(/\s\s+/g, ' ');
         }