@descope/web-components-ui 1.54.0 → 1.55.0

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 (10) hide show
  1. package/dist/cjs/index.cjs.js +6 -1
  2. package/dist/cjs/index.cjs.js.map +1 -1
  3. package/dist/index.esm.js +6 -1
  4. package/dist/index.esm.js.map +1 -1
  5. package/dist/umd/DescopeDev.js +1 -1
  6. package/dist/umd/DescopeDev.js.map +1 -1
  7. package/dist/umd/descope-multi-select-combo-box-index-js.js +1 -1
  8. package/dist/umd/descope-multi-select-combo-box-index-js.js.map +1 -1
  9. package/package.json +1 -1
  10. package/src/components/descope-multi-select-combo-box/MultiSelectComboBoxClass.js +6 -1
package/dist/umd/descope-multi-select-combo-box-index-js.js CHANGED
@@ -1,2 +1,2 @@
1
- "use strict";(self.webpackChunk_descope_web_components_ui=self.webpackChunk_descope_web_components_ui||[]).push([[1331],{12848:(t,e,o)=>{o.r(e),o.d(e,{MultiSelectComboBoxClass:()=>I,componentName:()=>l}),o(51408);var n=o(9696),r=o(97810),i=o(73551),a=o(79365);const l=(0,r.xE)("multi-select-combo-box"),{host:s,inputField:d,inputElement:p,placeholder:c,toggle:u,clearButton:m,label:b,requiredIndicator:h,helperText:g,errorMessage:y,chip:v,chipLabel:f,overflowChipFirstBorder:x,overflowChipSecondBorder:w}={host:{selector:()=>":host"},inputField:{selector:"::part(input-field)"},inputElement:{selector:"input"},placeholder:{selector:"> input:placeholder-shown"},toggle:{selector:"::part(toggle-button)"},clearButton:{selector:"::part(clear-button)"},label:{selector:"::part(label)"},requiredIndicator:{selector:"[required]::part(required-indicator)::after"},helperText:{selector:"::part(helper-text)"},errorMessage:{selector:"::part(error-message)"},chip:{selector:"vaadin-multi-select-combo-box-chip"},chipLabel:{selector:"vaadin-multi-select-combo-box-chip::part(label)"},overflowChipFirstBorder:{selector:"vaadin-multi-select-combo-box-chip[slot='overflow']::before"},overflowChipSecondBorder:{selector:"vaadin-multi-select-combo-box-chip[slot='overflow']::after"}},I=(0,n.Zz)((0,a.RF)({mappings:{hostWidth:{...s,property:"width"},hostDirection:{...s,property:"direction"},fontSize:[{},s],chipFontSize:{...f,property:"font-size"},fontFamily:[b,c,d,g,y,f],labelFontSize:{...b,property:"font-size"},labelFontWeight:{...b,property:"font-weight"},labelTextColor:[{...b,property:"color"},{...h,property:"color"}],errorMessageTextColor:{...y,property:"color"},errorMessageIcon:{...y,property:"background-image"},errorMessageIconSize:{...y,property:"background-size"},errorMessageIconPadding:{...y,property:"padding-inline-start"},errorMessageIconRepeat:{...y,property:"background-repeat"},errorMessageIconPosition:{...y,property:"background-position"},inputHeight:{...d,property:"min-height"},inputBackgroundColor:{...d,property:"background-color"},inputBorderColor:{...d,property:"border-color"},inputBorderWidth:{...d,property:"border-width"},inputBorderStyle:{...d,property:"border-style"},inputBorderRadius:{...d,property:"border-radius"},labelRequiredIndicator:{...h,property:"content"},inputValueTextColor:{...d,property:"color"},inputPlaceholderTextColor:{...c,property:"color"},inputDropdownButtonCursor:[{...u,property:"cursor"},{...m,property:"cursor"}],inputDropdownButtonColor:[{...u,property:"color"},{...m,property:"color"}],inputDropdownButtonSize:[{...u,property:"font-size"},{...m,property:"font-size"}],inputDropdownButtonOffset:[{...u,property:"margin-right"},{...u,property:"margin-left"}],inputOutlineColor:{...d,property:"outline-color"},inputOutlineWidth:{...d,property:"outline-width"},inputOutlineStyle:{...d,property:"outline-style"},inputOutlineOffset:{...d,property:"outline-offset"},inputHorizontalPadding:[{...p,property:"padding-left"},{...p,property:"padding-right"},{...d,property:"padding-inline-start"}],inputVerticalPadding:[{...d,property:"padding-top"},{...d,property:"padding-bottom"}],chipTextColor:{...f,property:"color"},chipBackgroundColor:[{...v,property:"background-color"},{...x,property:"border-color"},{...w,property:"border-color"}],labelPosition:{...b,property:"position"},labelTopPosition:{...b,property:"top"},labelLeftPosition:{...b,property:"left"},labelHorizontalPosition:[{...b,property:"left"},{...b,property:"right"}],inputTransformY:{...b,property:"transform"},inputTransition:{...b,property:"transition"},marginInlineStart:{...b,property:"margin-inline-start"},placeholderOpacity:{...c,property:"opacity"},inputVerticalAlignment:{...d,property:"align-items"},overlayBackground:{property:()=>I.cssVarList.overlay.backgroundColor},overlayTextColor:{property:()=>I.cssVarList.overlay.textColor},overlayBorder:{property:()=>I.cssVarList.overlay.border},overlayFontSize:{property:()=>I.cssVarList.overlay.fontSize},overlayFontFamily:{property:()=>I.cssVarList.overlay.fontFamily},overlayCursor:{property:()=>I.cssVarList.overlay.cursor},overlayItemBoxShadow:{property:()=>I.cssVarList.overlay.itemBoxShadow},overlayItemPaddingInlineStart:{property:()=>I.cssVarList.overlay.itemPaddingInlineStart},overlayItemPaddingInlineEnd:{property:()=>I.cssVarList.overlay.itemPaddingInlineEnd}}}),a.VO,(0,a.mA)({name:"overlay",selector:"vaadin-multi-select-combo-box-internal",mappings:{backgroundColor:{selector:"vaadin-multi-select-combo-box-scroller"},minHeight:{selector:"vaadin-multi-select-combo-box-overlay"},margin:{selector:"vaadin-multi-select-combo-box-overlay"},cursor:{selector:"vaadin-multi-select-combo-box-item"},fontFamily:{selector:"vaadin-multi-select-combo-box-item"},textColor:{selector:"vaadin-multi-select-combo-box-item",property:"color"},fontSize:{selector:"vaadin-multi-select-combo-box-item"},itemBoxShadow:{selector:"vaadin-multi-select-combo-box-item",property:"box-shadow"},itemPaddingInlineStart:{selector:"vaadin-multi-select-combo-box-item",property:"padding-inline-start"},itemPaddingInlineEnd:{selector:"vaadin-multi-select-combo-box-item",property:"padding-inline-end"}},forward:{include:!1,attributes:["size"]}}),(0,a.OZ)({proxyProps:["selectionStart"],inputEvent:"selected-items-changed"}),a._$,a.tQ,(t=>class extends t{static get observedAttributes(){return["readonly"]}#t=({displayName:t,value:e,label:o})=>`<span data-name="${o}" data-id="${e}">${t||o}</span>`;#e;#o=[];get defaultValues(){const t=this.getAttribute("default-values");if(t)try{const e=JSON.parse(t);if(this.isValidDataType(e))return e}catch(t){console.error('could not parse data string from attribute "default-values" -',t.message)}return[]}get renderItem(){return this.#t}set renderItem(t){this.#t=t,this.renderItems()}get data(){if(this.#e)return this.#e;const t=this.getAttribute("data");if(t)try{const e=JSON.parse(t);if(this.isValidDataType(e))return e}catch(t){console.error('could not parse data string from attribute "data" -',t.message)}return[]}set data(t){this.isValidDataType(t)&&(this.#e=t,this.renderItems())}get allowCustomValues(){return"true"===this.getAttribute("allow-custom-value")}get minItemsSelection(){return parseInt(this.getAttribute("min-items-selection"),10)||0}get maxItemsSelection(){return parseInt(this.getAttribute("max-items-selection"),10)||0}isValidDataType(t){const e=Array.isArray(t);return e||console.error("data and default-values must be an array, received:",t),e}getItemsTemplate(){return this.data?.reduce?.(((t,e)=>t+(this.renderItem?.(e||{})||"")),"")}renderItems(){const t=this.getItemsTemplate();t&&(this.innerHTML=t)}updateSelectedItems(){const t=this.baseElement.selectedItems?.map((t=>t.getAttribute("data-id")))||[];t.length>0&&(this.value=t),0===this.value.length&&this.setDefaultValues()}customValueTransformFn(t){return t}setComboBoxDescriptor(){const t=Object.getOwnPropertyDescriptor(this.inputElement.constructor.prototype,"value"),e=this;Object.defineProperties(this.inputElement,{value:{...t,set(o){const n=e.customValueTransformFn(o)||"";n!==this.value&&t.set.call(this,n)}}})}#n(t){return Array.from(new Map(t.map((t=>[t.getAttribute("data-id"),t]))).values())}#r(){const t=Array.from(this.children),e=this.#n(t);t.length?(this.removeAttribute("has-no-options"),e.forEach((t=>{Object.defineProperty(t,"data-name",{value:t.getAttribute("data-name"),configurable:!0,writable:!0}),Object.defineProperty(t,"data-id",{value:t.getAttribute("data-id"),configurable:!0,writable:!0})})),this.baseElement.items=e,setTimeout((()=>{this.updateSelectedItems()}),0)):(this.baseElement.items=[],this.setAttribute("has-no-options","")),this.baseElement.renderer=(t,e,o)=>{t.innerHTML=o.item.outerHTML}}#i(){const t=this.baseElement.shadowRoot.querySelector("vaadin-multi-select-combo-box-internal").shadowRoot.querySelector("vaadin-multi-select-combo-box-overlay");t._attachOverlay=()=>{t.bringToFront()},t._detachOverlay=()=>{},t._enterModalState=()=>{}}#a(){this.allowCustomValues&&this.baseElement.addEventListener("custom-value-set",(t=>{const e=this.#t({label:t.detail,displayName:t.detail,value:t.detail});this.innerHTML+=e,this.baseElement._lastFilter="",setTimeout((()=>{this.value=[...this.value,t.detail]}),0)}))}setGetValidity(){this.getValidity=function(){if(this.pattern){const t=new RegExp(this.pattern);if(this.value.some((e=>!t.test(e))))return{patternMismatch:!0}}return this.isRequired&&!this.value.length?{valueMissing:!0}:this.isRequired&&this.minItemsSelection&&this.value.length<this.minItemsSelection?{rangeUnderflow:!0}:this.maxItemsSelection&&this.value.length>this.maxItemsSelection?{rangeOverflow:!0}:{}};const t=this;this.baseElement.checkValidity=()=>t.validity.valid}init(){super.init?.(),this.setGetValidity(),this.setComboBoxDescriptor(),this.#i(),this.#a(),this.renderItems(),(0,r.mx)(this,this.renderItems.bind(this),{includeAttrs:["data"]}),(0,r.Ge)(this,this.#r.bind(this)),(0,r.EA)(this,this.baseElement,{includeAttrs:["placeholder"]}),this.setDefaultValues(),this.baseElement.addEventListener("selected-items-changed",(()=>{this.#l(),this.dispatchEvent(new CustomEvent("input",{bubbles:!0}))}))}setDefaultValues(){this.defaultValues.length>0&&(this.value=this.defaultValues)}#l(){this.#o=this.baseElement.selectedItems?.map((t=>t.getAttribute("data-id")))||[]}set value(t){if(t&&t.length>0){const e=this.baseElement.items?.filter((e=>t.includes(e["data-id"])));if(this.allowCustomValues){const o=e?.map((t=>t.getAttribute("data-id")))||[],n=t.filter((t=>!o.includes(t)));if(n.length){const e=n.reduce(((t,e)=>t+this.#t({label:e,displayName:e,value:e})),"");return this.innerHTML+=e,void setTimeout((()=>{this.value=t}),0)}}const o=e?.map((t=>t.getAttribute("data-id")))||[];(0,n.AG)(this.#o,o)||(this.baseElement.selectedItems=e)}else this.baseElement.selectedItems=[]}get value(){return this.#o}attributeChangedCallback(t,e,o){super.attributeChangedCallback?.(t,e,o),"readonly"===t&&this.onReadOnlyChange(null!==o&&"true"===o)}onReadOnlyChange(t){t?this.baseElement?.shadowRoot?.querySelector("vaadin-multi-select-combo-box-internal")?.setAttribute("inert",t):this.baseElement?.shadowRoot?.querySelector("vaadin-multi-select-combo-box-internal")?.removeAttribute("inert")}}))((0,a.tz)({slots:["","prefix"],wrappedEleName:"vaadin-multi-select-combo-box",style:()=>`\n\t\t:host {\n\t\t\tdisplay: inline-flex;\n\t\t\tbox-sizing: border-box;\n\t\t\t-webkit-mask-image: none;\n\t\t}\n\t\t${(0,i.cy)(I.cssVarList)}\n\t\t${(0,i.fu)("vaadin-multi-select-combo-box")}\n\t\t${(0,i.lS)("vaadin-multi-select-combo-box")}\n\t\t${(0,i.I4)("vaadin-multi-select-combo-box")}\n\n\t\tvaadin-multi-select-combo-box {\n\t\t\tpadding: 0;\n\t\t\twidth: 100%;\n\t\t}\n\t\tvaadin-multi-select-combo-box::before {\n\t\t\theight: initial;\n\t\t}\n\t\tvaadin-multi-select-combo-box [slot="input"] {\n\t\t\t-webkit-mask-image: none;\n\t\t\tmin-height: 0;\n align-self: center;\n\t\t\tbox-sizing: border-box;\n\t\t}\n\t\tvaadin-multi-select-combo-box[readonly] [slot="input"] {\n flex-grow: 1;\n flex-basis: 4em;\n\t\t}\n\n\t\t::part(input-field) {\n padding: 0;\n\t\t\tbox-shadow: none;\n\t\t}\n ${(0,i.$J)("vaadin-multi-select-combo-box")}\n :host([has-label]) vaadin-multi-select-combo-box-chip::part(label) {\n display: block;\n }\n\n vaadin-multi-select-combo-box vaadin-multi-select-combo-box-chip[slot='overflow']::before,\n vaadin-multi-select-combo-box vaadin-multi-select-combo-box-chip[slot='overflow']::after {\n left: -4px;\n right: -4px;\n border-left-width: 0;\n border-inline-start-style: solid;\n border-inline-start-width: 2px;\n }\n vaadin-multi-select-combo-box vaadin-multi-select-combo-box-chip[slot='overflow']::after {\n left: -8px;\n right: -8px;\n }\n\n :host([has-no-options][allow-custom-value='true']) ::part(toggle-button) {\n display: none;\n }\n\n ${(0,i.Kl)()}\n\n vaadin-multi-select-combo-box::part(toggle-button),\n vaadin-multi-select-combo-box::part(clear-button) {\n align-self: center;\n }\n\n vaadin-multi-select-combo-box[label-type="floating"]:not([focused])[readonly] > input:placeholder-shown {\n opacity: 0;\n }\n vaadin-multi-select-combo-box[label-type="floating"]:not([focused])[disabled] > input:placeholder-shown {\n opacity: 0;\n }\n\n\t\t`,excludeAttrsSync:["tabindex","size","data","placeholder"],componentName:l,includeForwardProps:["items","renderer","selectedItems"]}));customElements.define(l,I)},73551:(t,e,o)=>{o.d(e,{$J:()=>u,I4:()=>a,Kl:()=>m,LJ:()=>c,Qv:()=>i,X6:()=>s,cy:()=>n,fu:()=>d,kG:()=>p,lS:()=>l,zm:()=>r});const n=t=>`\n :host {\n padding: calc(var(${t.inputOutlineWidth}) + var(${t.inputOutlineOffset}))\n }\n`,r=t=>`\n ${t} {\n margin: 0;\n padding: 0;\n width: 100%;\n height: 100%;\n box-sizing: border-box;\n }\n`,i=t=>`\n ${t}::part(input-field) {\n overflow: hidden;\n padding: 0;\n box-shadow: none;\n }\n`,a=t=>`\n ${t} > label,\n ${t}::part(label),\n ${t}::part(required-indicator) {\n cursor: pointer;\n }\n`,l=(t,e="input")=>`\n ${t}[disabled] > ${e}:placeholder-shown,\n\t${t}[readonly] > ${e}:placeholder-shown {\n\t\topacity: 1;\n\t}\n`,s=()=>"\n :host {\n --vaadin-field-default-width: auto;\n box-sizing: border-box;\n }\n",d=t=>`\n ${t}::part(input-field)::after {\n opacity: 0;\n }\n`,p=t=>`\n ${t}::part(input-field)::after {\n background: none;\n }\n`,c=(t,e)=>`\n ${r(t)}\n ${a(t)}\n ${l(t)}\n ${i(t)}\n ${((t,e)=>`\n ${t} input:-webkit-autofill,\n ${t} input:-webkit-autofill::first-line,\n ${t} input:-webkit-autofill:hover,\n ${t} input:-webkit-autofill:active,\n ${t} input:-webkit-autofill:focus {\n -webkit-text-fill-color: var(${e.inputValueTextColor});\n box-shadow: 0 0 0 var(${e.inputHeight}) var(${e.inputBackgroundColor}) inset;\n }\n`)(t,e)}\n ${p(t)}\n ${(t=>`\n ${t}::before {\n\t\theight: unset;\n\t}\n`)(t)}\n ${(t=>`\n ${t} > input {\n -webkit-mask-image: none;\n min-height: 0;\n box-sizing: border-box;\n }\n`)(t)}\n ${(t=>`\n ${t}::part(input-field)::after {\n border: none;\n }\n`)(t)}\n`,u=t=>`\n :host ::part(error-message) {\n direction: ltr;\n }\n :host([required]) ::part(required-indicator) {\n width: 1em;\n display: inline-flex;\n }\n :host([required]) ::part(required-indicator)::after {\n position: static;\n }\n :host([has-label]) ::part(label) {\n padding-right: 0;\n padding-bottom: 0;\n display: flex;\n width: 100%;\n }\n ${t} [slot="label"] {\n max-width: calc(100% - 1em);\n overflow: hidden;\n text-overflow: ellipsis;\n padding-bottom: 0.5em;\n }\n`,m=()=>'\n :host([label-type="floating"]) {\n position: relative;\n }\n :host([label-type="floating"][has-label]) [slot="label"] {\n padding: 0;\n }\n :host([label-type="floating"][has-label]) > ::part(label) {\n z-index: 1;\n padding: 0;\n width: auto;\n }\n '}}]);
1
+ "use strict";(self.webpackChunk_descope_web_components_ui=self.webpackChunk_descope_web_components_ui||[]).push([[1331],{12848:(t,e,o)=>{o.r(e),o.d(e,{MultiSelectComboBoxClass:()=>I,componentName:()=>l}),o(51408);var n=o(9696),r=o(97810),i=o(73551),a=o(79365);const l=(0,r.xE)("multi-select-combo-box"),{host:s,inputField:d,inputElement:p,placeholder:c,toggle:u,clearButton:m,label:b,requiredIndicator:h,helperText:g,errorMessage:y,chip:v,chipLabel:f,overflowChipFirstBorder:x,overflowChipSecondBorder:w}={host:{selector:()=>":host"},inputField:{selector:"::part(input-field)"},inputElement:{selector:"input"},placeholder:{selector:"> input:placeholder-shown"},toggle:{selector:"::part(toggle-button)"},clearButton:{selector:"::part(clear-button)"},label:{selector:"::part(label)"},requiredIndicator:{selector:"[required]::part(required-indicator)::after"},helperText:{selector:"::part(helper-text)"},errorMessage:{selector:"::part(error-message)"},chip:{selector:"vaadin-multi-select-combo-box-chip"},chipLabel:{selector:"vaadin-multi-select-combo-box-chip::part(label)"},overflowChipFirstBorder:{selector:"vaadin-multi-select-combo-box-chip[slot='overflow']::before"},overflowChipSecondBorder:{selector:"vaadin-multi-select-combo-box-chip[slot='overflow']::after"}},I=(0,n.Zz)((0,a.RF)({mappings:{hostWidth:{...s,property:"width"},hostDirection:{...s,property:"direction"},fontSize:[{},s],chipFontSize:{...f,property:"font-size"},fontFamily:[b,c,d,g,y,f],labelFontSize:{...b,property:"font-size"},labelFontWeight:{...b,property:"font-weight"},labelTextColor:[{...b,property:"color"},{...h,property:"color"}],errorMessageTextColor:{...y,property:"color"},errorMessageIcon:{...y,property:"background-image"},errorMessageIconSize:{...y,property:"background-size"},errorMessageIconPadding:{...y,property:"padding-inline-start"},errorMessageIconRepeat:{...y,property:"background-repeat"},errorMessageIconPosition:{...y,property:"background-position"},inputHeight:{...d,property:"min-height"},inputBackgroundColor:{...d,property:"background-color"},inputBorderColor:{...d,property:"border-color"},inputBorderWidth:{...d,property:"border-width"},inputBorderStyle:{...d,property:"border-style"},inputBorderRadius:{...d,property:"border-radius"},labelRequiredIndicator:{...h,property:"content"},inputValueTextColor:{...d,property:"color"},inputPlaceholderTextColor:{...c,property:"color"},inputDropdownButtonCursor:[{...u,property:"cursor"},{...m,property:"cursor"}],inputDropdownButtonColor:[{...u,property:"color"},{...m,property:"color"}],inputDropdownButtonSize:[{...u,property:"font-size"},{...m,property:"font-size"}],inputDropdownButtonOffset:[{...u,property:"margin-right"},{...u,property:"margin-left"}],inputOutlineColor:{...d,property:"outline-color"},inputOutlineWidth:{...d,property:"outline-width"},inputOutlineStyle:{...d,property:"outline-style"},inputOutlineOffset:{...d,property:"outline-offset"},inputHorizontalPadding:[{...p,property:"padding-left"},{...p,property:"padding-right"},{...d,property:"padding-inline-start"}],inputVerticalPadding:[{...d,property:"padding-top"},{...d,property:"padding-bottom"}],chipTextColor:{...f,property:"color"},chipBackgroundColor:[{...v,property:"background-color"},{...x,property:"border-color"},{...w,property:"border-color"}],labelPosition:{...b,property:"position"},labelTopPosition:{...b,property:"top"},labelLeftPosition:{...b,property:"left"},labelHorizontalPosition:[{...b,property:"left"},{...b,property:"right"}],inputTransformY:{...b,property:"transform"},inputTransition:{...b,property:"transition"},marginInlineStart:{...b,property:"margin-inline-start"},placeholderOpacity:{...c,property:"opacity"},inputVerticalAlignment:{...d,property:"align-items"},overlayBackground:{property:()=>I.cssVarList.overlay.backgroundColor},overlayTextColor:{property:()=>I.cssVarList.overlay.textColor},overlayBorder:{property:()=>I.cssVarList.overlay.border},overlayFontSize:{property:()=>I.cssVarList.overlay.fontSize},overlayFontFamily:{property:()=>I.cssVarList.overlay.fontFamily},overlayCursor:{property:()=>I.cssVarList.overlay.cursor},overlayItemBoxShadow:{property:()=>I.cssVarList.overlay.itemBoxShadow},overlayItemPaddingInlineStart:{property:()=>I.cssVarList.overlay.itemPaddingInlineStart},overlayItemPaddingInlineEnd:{property:()=>I.cssVarList.overlay.itemPaddingInlineEnd}}}),a.VO,(0,a.mA)({name:"overlay",selector:"vaadin-multi-select-combo-box-internal",mappings:{backgroundColor:{selector:"vaadin-multi-select-combo-box-scroller"},minHeight:{selector:"vaadin-multi-select-combo-box-overlay"},margin:{selector:"vaadin-multi-select-combo-box-overlay"},cursor:{selector:"vaadin-multi-select-combo-box-item"},fontFamily:{selector:"vaadin-multi-select-combo-box-item"},textColor:{selector:"vaadin-multi-select-combo-box-item",property:"color"},fontSize:{selector:"vaadin-multi-select-combo-box-item"},itemBoxShadow:{selector:"vaadin-multi-select-combo-box-item",property:"box-shadow"},itemPaddingInlineStart:{selector:"vaadin-multi-select-combo-box-item",property:"padding-inline-start"},itemPaddingInlineEnd:{selector:"vaadin-multi-select-combo-box-item",property:"padding-inline-end"}},forward:{include:!1,attributes:["size"]}}),(0,a.OZ)({proxyProps:["selectionStart"],inputEvent:"selected-items-changed"}),a._$,a.tQ,(t=>class extends t{static get observedAttributes(){return["readonly"]}#t=({displayName:t,value:e,label:o})=>{const n=document.createElement("span");return n.setAttribute("data-name",o),n.setAttribute("data-id",e),n.textContent=t||o,n.outerHTML};#e;#o=[];get defaultValues(){const t=this.getAttribute("default-values");if(t)try{const e=JSON.parse(t);if(this.isValidDataType(e))return e}catch(t){console.error('could not parse data string from attribute "default-values" -',t.message)}return[]}get renderItem(){return this.#t}set renderItem(t){this.#t=t,this.renderItems()}get data(){if(this.#e)return this.#e;const t=this.getAttribute("data");if(t)try{const e=JSON.parse(t);if(this.isValidDataType(e))return e}catch(t){console.error('could not parse data string from attribute "data" -',t.message)}return[]}set data(t){this.isValidDataType(t)&&(this.#e=t,this.renderItems())}get allowCustomValues(){return"true"===this.getAttribute("allow-custom-value")}get minItemsSelection(){return parseInt(this.getAttribute("min-items-selection"),10)||0}get maxItemsSelection(){return parseInt(this.getAttribute("max-items-selection"),10)||0}isValidDataType(t){const e=Array.isArray(t);return e||console.error("data and default-values must be an array, received:",t),e}getItemsTemplate(){return this.data?.reduce?.(((t,e)=>t+(this.renderItem?.(e||{})||"")),"")}renderItems(){const t=this.getItemsTemplate();t&&(this.innerHTML=t)}updateSelectedItems(){const t=this.baseElement.selectedItems?.map((t=>t.getAttribute("data-id")))||[];t.length>0&&(this.value=t),0===this.value.length&&this.setDefaultValues()}customValueTransformFn(t){return t}setComboBoxDescriptor(){const t=Object.getOwnPropertyDescriptor(this.inputElement.constructor.prototype,"value"),e=this;Object.defineProperties(this.inputElement,{value:{...t,set(o){const n=e.customValueTransformFn(o)||"";n!==this.value&&t.set.call(this,n)}}})}#n(t){return Array.from(new Map(t.map((t=>[t.getAttribute("data-id"),t]))).values())}#r(){const t=Array.from(this.children),e=this.#n(t);t.length?(this.removeAttribute("has-no-options"),e.forEach((t=>{Object.defineProperty(t,"data-name",{value:t.getAttribute("data-name"),configurable:!0,writable:!0}),Object.defineProperty(t,"data-id",{value:t.getAttribute("data-id"),configurable:!0,writable:!0})})),this.baseElement.items=e,setTimeout((()=>{this.updateSelectedItems()}),0)):(this.baseElement.items=[],this.setAttribute("has-no-options","")),this.baseElement.renderer=(t,e,o)=>{t.innerHTML=o.item.outerHTML}}#i(){const t=this.baseElement.shadowRoot.querySelector("vaadin-multi-select-combo-box-internal").shadowRoot.querySelector("vaadin-multi-select-combo-box-overlay");t._attachOverlay=()=>{t.bringToFront()},t._detachOverlay=()=>{},t._enterModalState=()=>{}}#a(){this.allowCustomValues&&this.baseElement.addEventListener("custom-value-set",(t=>{const e=this.#t({label:t.detail,displayName:t.detail,value:t.detail});this.innerHTML+=e,this.baseElement._lastFilter="",setTimeout((()=>{this.value=[...this.value,t.detail]}),0)}))}setGetValidity(){this.getValidity=function(){if(this.pattern){const t=new RegExp(this.pattern);if(this.value.some((e=>!t.test(e))))return{patternMismatch:!0}}return this.isRequired&&!this.value.length?{valueMissing:!0}:this.isRequired&&this.minItemsSelection&&this.value.length<this.minItemsSelection?{rangeUnderflow:!0}:this.maxItemsSelection&&this.value.length>this.maxItemsSelection?{rangeOverflow:!0}:{}};const t=this;this.baseElement.checkValidity=()=>t.validity.valid}init(){super.init?.(),this.setGetValidity(),this.setComboBoxDescriptor(),this.#i(),this.#a(),this.renderItems(),(0,r.mx)(this,this.renderItems.bind(this),{includeAttrs:["data"]}),(0,r.Ge)(this,this.#r.bind(this)),(0,r.EA)(this,this.baseElement,{includeAttrs:["placeholder"]}),this.setDefaultValues(),this.baseElement.addEventListener("selected-items-changed",(()=>{this.#l(),this.dispatchEvent(new CustomEvent("input",{bubbles:!0}))}))}setDefaultValues(){this.defaultValues.length>0&&(this.value=this.defaultValues)}#l(){this.#o=this.baseElement.selectedItems?.map((t=>t.getAttribute("data-id")))||[]}set value(t){if(t&&t.length>0){const e=this.baseElement.items?.filter((e=>t.includes(e["data-id"])));if(this.allowCustomValues){const o=e?.map((t=>t.getAttribute("data-id")))||[],n=t.filter((t=>!o.includes(t)));if(n.length){const e=n.reduce(((t,e)=>t+this.#t({label:e,displayName:e,value:e})),"");return this.innerHTML+=e,void setTimeout((()=>{this.value=t}),0)}}const o=e?.map((t=>t.getAttribute("data-id")))||[];(0,n.AG)(this.#o,o)||(this.baseElement.selectedItems=e)}else this.baseElement.selectedItems=[]}get value(){return this.#o}attributeChangedCallback(t,e,o){super.attributeChangedCallback?.(t,e,o),"readonly"===t&&this.onReadOnlyChange(null!==o&&"true"===o)}onReadOnlyChange(t){t?this.baseElement?.shadowRoot?.querySelector("vaadin-multi-select-combo-box-internal")?.setAttribute("inert",t):this.baseElement?.shadowRoot?.querySelector("vaadin-multi-select-combo-box-internal")?.removeAttribute("inert")}}))((0,a.tz)({slots:["","prefix"],wrappedEleName:"vaadin-multi-select-combo-box",style:()=>`\n\t\t:host {\n\t\t\tdisplay: inline-flex;\n\t\t\tbox-sizing: border-box;\n\t\t\t-webkit-mask-image: none;\n\t\t}\n\t\t${(0,i.cy)(I.cssVarList)}\n\t\t${(0,i.fu)("vaadin-multi-select-combo-box")}\n\t\t${(0,i.lS)("vaadin-multi-select-combo-box")}\n\t\t${(0,i.I4)("vaadin-multi-select-combo-box")}\n\n\t\tvaadin-multi-select-combo-box {\n\t\t\tpadding: 0;\n\t\t\twidth: 100%;\n\t\t}\n\t\tvaadin-multi-select-combo-box::before {\n\t\t\theight: initial;\n\t\t}\n\t\tvaadin-multi-select-combo-box [slot="input"] {\n\t\t\t-webkit-mask-image: none;\n\t\t\tmin-height: 0;\n align-self: center;\n\t\t\tbox-sizing: border-box;\n\t\t}\n\t\tvaadin-multi-select-combo-box[readonly] [slot="input"] {\n flex-grow: 1;\n flex-basis: 4em;\n\t\t}\n\n\t\t::part(input-field) {\n padding: 0;\n\t\t\tbox-shadow: none;\n\t\t}\n ${(0,i.$J)("vaadin-multi-select-combo-box")}\n :host([has-label]) vaadin-multi-select-combo-box-chip::part(label) {\n display: block;\n }\n\n vaadin-multi-select-combo-box vaadin-multi-select-combo-box-chip[slot='overflow']::before,\n vaadin-multi-select-combo-box vaadin-multi-select-combo-box-chip[slot='overflow']::after {\n left: -4px;\n right: -4px;\n border-left-width: 0;\n border-inline-start-style: solid;\n border-inline-start-width: 2px;\n }\n vaadin-multi-select-combo-box vaadin-multi-select-combo-box-chip[slot='overflow']::after {\n left: -8px;\n right: -8px;\n }\n\n :host([has-no-options][allow-custom-value='true']) ::part(toggle-button) {\n display: none;\n }\n\n ${(0,i.Kl)()}\n\n vaadin-multi-select-combo-box::part(toggle-button),\n vaadin-multi-select-combo-box::part(clear-button) {\n align-self: center;\n }\n\n vaadin-multi-select-combo-box[label-type="floating"]:not([focused])[readonly] > input:placeholder-shown {\n opacity: 0;\n }\n vaadin-multi-select-combo-box[label-type="floating"]:not([focused])[disabled] > input:placeholder-shown {\n opacity: 0;\n }\n\n\t\t`,excludeAttrsSync:["tabindex","size","data","placeholder"],componentName:l,includeForwardProps:["items","renderer","selectedItems"]}));customElements.define(l,I)},73551:(t,e,o)=>{o.d(e,{$J:()=>u,I4:()=>a,Kl:()=>m,LJ:()=>c,Qv:()=>i,X6:()=>s,cy:()=>n,fu:()=>d,kG:()=>p,lS:()=>l,zm:()=>r});const n=t=>`\n :host {\n padding: calc(var(${t.inputOutlineWidth}) + var(${t.inputOutlineOffset}))\n }\n`,r=t=>`\n ${t} {\n margin: 0;\n padding: 0;\n width: 100%;\n height: 100%;\n box-sizing: border-box;\n }\n`,i=t=>`\n ${t}::part(input-field) {\n overflow: hidden;\n padding: 0;\n box-shadow: none;\n }\n`,a=t=>`\n ${t} > label,\n ${t}::part(label),\n ${t}::part(required-indicator) {\n cursor: pointer;\n }\n`,l=(t,e="input")=>`\n ${t}[disabled] > ${e}:placeholder-shown,\n\t${t}[readonly] > ${e}:placeholder-shown {\n\t\topacity: 1;\n\t}\n`,s=()=>"\n :host {\n --vaadin-field-default-width: auto;\n box-sizing: border-box;\n }\n",d=t=>`\n ${t}::part(input-field)::after {\n opacity: 0;\n }\n`,p=t=>`\n ${t}::part(input-field)::after {\n background: none;\n }\n`,c=(t,e)=>`\n ${r(t)}\n ${a(t)}\n ${l(t)}\n ${i(t)}\n ${((t,e)=>`\n ${t} input:-webkit-autofill,\n ${t} input:-webkit-autofill::first-line,\n ${t} input:-webkit-autofill:hover,\n ${t} input:-webkit-autofill:active,\n ${t} input:-webkit-autofill:focus {\n -webkit-text-fill-color: var(${e.inputValueTextColor});\n box-shadow: 0 0 0 var(${e.inputHeight}) var(${e.inputBackgroundColor}) inset;\n }\n`)(t,e)}\n ${p(t)}\n ${(t=>`\n ${t}::before {\n\t\theight: unset;\n\t}\n`)(t)}\n ${(t=>`\n ${t} > input {\n -webkit-mask-image: none;\n min-height: 0;\n box-sizing: border-box;\n }\n`)(t)}\n ${(t=>`\n ${t}::part(input-field)::after {\n border: none;\n }\n`)(t)}\n`,u=t=>`\n :host ::part(error-message) {\n direction: ltr;\n }\n :host([required]) ::part(required-indicator) {\n width: 1em;\n display: inline-flex;\n }\n :host([required]) ::part(required-indicator)::after {\n position: static;\n }\n :host([has-label]) ::part(label) {\n padding-right: 0;\n padding-bottom: 0;\n display: flex;\n width: 100%;\n }\n ${t} [slot="label"] {\n max-width: calc(100% - 1em);\n overflow: hidden;\n text-overflow: ellipsis;\n padding-bottom: 0.5em;\n }\n`,m=()=>'\n :host([label-type="floating"]) {\n position: relative;\n }\n :host([label-type="floating"][has-label]) [slot="label"] {\n padding: 0;\n }\n :host([label-type="floating"][has-label]) > ::part(label) {\n z-index: 1;\n padding: 0;\n width: auto;\n }\n '}}]);
2
2
  //# sourceMappingURL=descope-multi-select-combo-box-index-js.js.map
package/dist/umd/descope-multi-select-combo-box-index-js.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"descope-multi-select-combo-box-index-js.js","mappings":"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","sources":["webpack://@descope/web-components-ui/./src/components/descope-multi-select-combo-box/MultiSelectComboBoxClass.js","webpack://@descope/web-components-ui/./src/components/descope-multi-select-combo-box/index.js","webpack://@descope/web-components-ui/./src/helpers/themeHelpers/resetHelpers.js"],"sourcesContent":["import { compose, compareArraysUnordered } from '../../helpers';\nimport {\n forwardAttrs,\n getComponentName,\n observeAttributes,\n observeChildren,\n} from '../../helpers/componentHelpers';\nimport {\n resetInputLabelPosition,\n resetInputCursor,\n resetInputPlaceholder,\n resetInputReadonlyStyle,\n useHostExternalPadding,\n inputFloatingLabelStyle,\n} from '../../helpers/themeHelpers/resetHelpers';\nimport {\n createStyleMixin,\n draggableMixin,\n createProxy,\n componentNameValidationMixin,\n portalMixin,\n proxyInputMixin,\n changeMixin,\n} from '../../mixins';\n\nexport const componentName = getComponentName('multi-select-combo-box');\n\nconst multiSelectComboBoxMixin = (superclass) =>\n class MultiSelectComboBoxMixinClass extends superclass {\n static get observedAttributes() {\n return ['readonly'];\n }\n\n // eslint-disable-next-line class-methods-use-this\n #renderItem = ({ displayName, value, label }) => {\n return `<span data-name=\"${label}\" data-id=\"${value}\">${displayName || label}</span>`;\n };\n\n #data;\n\n #value = [];\n\n get defaultValues() {\n const defaultValuesAttr = this.getAttribute('default-values');\n if (defaultValuesAttr) {\n try {\n const defaultValues = JSON.parse(defaultValuesAttr);\n if (this.isValidDataType(defaultValues)) {\n return defaultValues;\n }\n } catch (e) {\n // eslint-disable-next-line no-console\n console.error('could not parse data string from attribute \"default-values\" -', e.message);\n }\n }\n return [];\n }\n\n get renderItem() {\n return this.#renderItem;\n }\n\n set renderItem(renderFn) {\n this.#renderItem = renderFn;\n this.renderItems();\n }\n\n get data() {\n if (this.#data) return this.#data;\n\n const dataAttr = this.getAttribute('data');\n\n if (dataAttr) {\n try {\n const data = JSON.parse(dataAttr);\n if (this.isValidDataType(data)) {\n return data;\n }\n } catch (e) {\n // eslint-disable-next-line no-console\n console.error('could not parse data string from attribute \"data\" -', e.message);\n }\n }\n\n return [];\n }\n\n set data(data) {\n if (this.isValidDataType(data)) {\n this.#data = data;\n this.renderItems();\n }\n }\n\n get allowCustomValues() {\n return this.getAttribute('allow-custom-value') === 'true';\n }\n\n get minItemsSelection() {\n return parseInt(this.getAttribute('min-items-selection'), 10) || 0;\n }\n\n get maxItemsSelection() {\n return parseInt(this.getAttribute('max-items-selection'), 10) || 0;\n }\n\n // eslint-disable-next-line class-methods-use-this\n isValidDataType(data) {\n const isValid = Array.isArray(data);\n if (!isValid) {\n // eslint-disable-next-line no-console\n console.error('data and default-values must be an array, received:', data);\n }\n\n return isValid;\n }\n\n getItemsTemplate() {\n return this.data?.reduce?.((acc, item) => acc + (this.renderItem?.(item || {}) || ''), '');\n }\n\n renderItems() {\n const template = this.getItemsTemplate();\n if (template) this.innerHTML = template;\n }\n\n updateSelectedItems() {\n // This is a list of all the selected items, including ones that may have been removed from the DOM\n const currentSelected =\n this.baseElement.selectedItems?.map((item) => item.getAttribute('data-id')) || [];\n\n // if there are selected items, we want to trigger a potential update to the value if some child elements were removed\n if (currentSelected.length > 0) {\n // setting the value checks that the selected items are still in the DOM and will not set the value if they are not\n this.value = currentSelected;\n }\n\n // otherwise, if default value is specified, set default value as selected item\n if (this.value.length === 0) {\n this.setDefaultValues();\n }\n }\n\n // eslint-disable-next-line class-methods-use-this\n customValueTransformFn(val) {\n return val;\n }\n\n // We want to override Vaadin's Combo Box value setter. This is needed since Vaadin couples between the\n // field that it searches the value, and the finaly display value of the input.\n // We provide a custom transform function to override that behavior.\n setComboBoxDescriptor() {\n const valueDescriptor = Object.getOwnPropertyDescriptor(\n this.inputElement.constructor.prototype,\n 'value'\n );\n\n const comboBox = this;\n\n Object.defineProperties(this.inputElement, {\n value: {\n ...valueDescriptor,\n set(val) {\n const transformedValue = comboBox.customValueTransformFn(val) || '';\n\n if (transformedValue === this.value) {\n return;\n }\n\n valueDescriptor.set.call(this, transformedValue);\n },\n },\n });\n }\n\n // To prevent duplicate items for the multi select options, we dedup them based on the \"data-id\" attribute\n // eslint-disable-next-line class-methods-use-this\n #dedupItems(items) {\n return Array.from(\n new Map(items.map((item) => [item.getAttribute('data-id'), item])).values()\n );\n }\n\n // vaadin api is to set props on their combo box node,\n // in order to avoid it, we are passing the children of this component\n // to the items & renderer props, so it will be used as the combo box items\n #onChildrenChange() {\n const items = Array.from(this.children);\n const dedupItems = this.#dedupItems(items);\n\n // we want the data-name attribute to be accessible as an object attribute\n if (items.length) {\n this.removeAttribute('has-no-options');\n\n dedupItems.forEach((node) => {\n Object.defineProperty(node, 'data-name', {\n value: node.getAttribute('data-name'),\n configurable: true,\n writable: true,\n });\n Object.defineProperty(node, 'data-id', {\n value: node.getAttribute('data-id'),\n configurable: true,\n writable: true,\n });\n });\n\n this.baseElement.items = dedupItems;\n\n setTimeout(() => {\n // set timeout to ensure this runs after customValueTransformFn had the chance to be overriden\n this.updateSelectedItems();\n }, 0);\n } else {\n this.baseElement.items = [];\n this.setAttribute('has-no-options', '');\n }\n\n // use vaadin combobox custom renderer to render options as HTML\n // and not via default renderer, which renders only the data-name's value\n // in its own HTML template\n this.baseElement.renderer = (root, combo, model) => {\n // eslint-disable-next-line no-param-reassign\n root.innerHTML = model.item.outerHTML;\n };\n }\n\n // the default vaadin behavior is to attach the overlay to the body when opened\n // we do not want that because it's difficult to style the overlay in this way\n // so we override it to open inside the shadow DOM\n #overrideOverlaySettings() {\n const overlay = this.baseElement.shadowRoot\n .querySelector('vaadin-multi-select-combo-box-internal')\n .shadowRoot.querySelector('vaadin-multi-select-combo-box-overlay');\n overlay._attachOverlay = () => {\n overlay.bringToFront();\n };\n overlay._detachOverlay = () => {};\n overlay._enterModalState = () => {};\n }\n\n #handleCustomValues() {\n if (this.allowCustomValues) {\n this.baseElement.addEventListener('custom-value-set', (e) => {\n const newItemHtml = this.#renderItem({\n label: e.detail,\n displayName: e.detail,\n value: e.detail,\n });\n this.innerHTML += newItemHtml;\n // The internal filter needs to be removed, otherwise there's a bug where a new custom item\n // added can't be removed from the dropdown because of how the vaadin component is implemented\n this.baseElement._lastFilter = '';\n // The value needs to be set with a timeout because it needs to execute after\n // the custom value is added to items by the children change observer\n setTimeout(() => {\n this.value = [...this.value, e.detail];\n }, 0);\n });\n }\n }\n\n setGetValidity() {\n // eslint-disable-next-line func-names\n this.getValidity = function () {\n if (this.pattern) {\n const patternRegex = new RegExp(this.pattern);\n if (this.value.some((val) => !patternRegex.test(val)))\n return {\n patternMismatch: true,\n };\n }\n\n if (this.isRequired && !this.value.length) {\n return {\n valueMissing: true,\n };\n }\n // If the field is not required, no minimum selection can be set\n if (\n this.isRequired &&\n this.minItemsSelection &&\n this.value.length < this.minItemsSelection\n ) {\n return {\n rangeUnderflow: true,\n };\n }\n if (this.maxItemsSelection && this.value.length > this.maxItemsSelection) {\n return {\n rangeOverflow: true,\n };\n }\n return {};\n };\n\n // This is required to override the default validity check of the vaadin component\n // which is triggered when the component is checked for validity after blur\n // Without this, our minItemsSelection and maxItemsSelection constraints will not be checked\n const that = this;\n // eslint-disable-next-line func-names\n this.baseElement.checkValidity = () => {\n return that.validity.valid;\n };\n }\n\n init() {\n super.init?.();\n\n this.setGetValidity();\n\n this.setComboBoxDescriptor();\n\n this.#overrideOverlaySettings();\n\n this.#handleCustomValues();\n\n this.renderItems();\n\n observeAttributes(this, this.renderItems.bind(this), { includeAttrs: ['data'] });\n\n observeChildren(this, this.#onChildrenChange.bind(this));\n\n // Note: we need to forward the `placeholder` because the vaadin component observes it and\n // tries to override it, causing us to lose the user set placeholder.\n forwardAttrs(this, this.baseElement, { includeAttrs: ['placeholder'] });\n\n this.setDefaultValues();\n\n this.baseElement.addEventListener('selected-items-changed', () => {\n this.#updateInternalValue();\n this.dispatchEvent(new CustomEvent('input', { bubbles: true }));\n });\n }\n\n setDefaultValues() {\n const initialDefaultValues = this.defaultValues;\n if (initialDefaultValues.length > 0) {\n this.value = this.defaultValues;\n }\n }\n\n #updateInternalValue() {\n // This is done here because we don't want to return a different copy of the same array\n // every time get value is called if a new value wasn't set\n this.#value =\n this.baseElement.selectedItems?.map((elem) => elem.getAttribute('data-id')) || [];\n }\n\n // Updating the value will update the selectedItems, which will trigger an event 'selected-items-changed'\n // which we listen to in the init function to update the internal value\n set value(vals) {\n if (vals && vals.length > 0) {\n // Filters the children of the component to find the ones that match the values,\n // since it's possible that some values that are trying to set are not in the children\n const selectedChildren = this.baseElement.items?.filter((item) =>\n vals.includes(item['data-id'])\n );\n\n // If the component allows custom values, we need to add the values that are not present in the children\n if (this.allowCustomValues) {\n const existingValues =\n selectedChildren?.map((child) => child.getAttribute('data-id')) || [];\n const missingValues = vals.filter((val) => !existingValues.includes(val));\n\n if (missingValues.length) {\n const newItemsHtml = missingValues.reduce((acc, val) => {\n const newItemHtml = this.#renderItem({\n label: val,\n displayName: val,\n value: val,\n });\n return acc + newItemHtml;\n }, '');\n this.innerHTML += newItemsHtml;\n\n // The value needs to be set with a timeout because it needs to execute after\n // the custom values are added to the items by the children change observer\n setTimeout(() => {\n this.value = vals;\n }, 0);\n return;\n }\n }\n\n const newSelectedValues =\n selectedChildren?.map((child) => child.getAttribute('data-id')) || [];\n if (!compareArraysUnordered(this.#value, newSelectedValues)) {\n this.baseElement.selectedItems = selectedChildren;\n }\n } else {\n this.baseElement.selectedItems = [];\n }\n }\n\n get value() {\n return this.#value;\n }\n\n attributeChangedCallback(attrName, oldValue, newValue) {\n super.attributeChangedCallback?.(attrName, oldValue, newValue);\n\n if (attrName === 'readonly') {\n this.onReadOnlyChange(newValue !== null && newValue === 'true');\n }\n }\n\n onReadOnlyChange(val) {\n if (val) {\n this.baseElement?.shadowRoot\n ?.querySelector('vaadin-multi-select-combo-box-internal')\n ?.setAttribute('inert', val);\n } else {\n this.baseElement?.shadowRoot\n ?.querySelector('vaadin-multi-select-combo-box-internal')\n ?.removeAttribute('inert');\n }\n }\n };\n\nconst {\n host,\n inputField,\n inputElement,\n placeholder,\n toggle,\n clearButton,\n label,\n requiredIndicator,\n helperText,\n errorMessage,\n chip,\n chipLabel,\n overflowChipFirstBorder,\n overflowChipSecondBorder,\n} = {\n host: { selector: () => ':host' },\n inputField: { selector: '::part(input-field)' },\n inputElement: { selector: 'input' },\n placeholder: { selector: '> input:placeholder-shown' },\n toggle: { selector: '::part(toggle-button)' },\n clearButton: { selector: '::part(clear-button)' },\n label: { selector: '::part(label)' },\n requiredIndicator: { selector: '[required]::part(required-indicator)::after' },\n helperText: { selector: '::part(helper-text)' },\n errorMessage: { selector: '::part(error-message)' },\n chip: { selector: 'vaadin-multi-select-combo-box-chip' },\n chipLabel: { selector: 'vaadin-multi-select-combo-box-chip::part(label)' },\n overflowChipFirstBorder: {\n selector: \"vaadin-multi-select-combo-box-chip[slot='overflow']::before\",\n },\n overflowChipSecondBorder: {\n selector: \"vaadin-multi-select-combo-box-chip[slot='overflow']::after\",\n },\n};\n\nexport const MultiSelectComboBoxClass = compose(\n createStyleMixin({\n mappings: {\n hostWidth: { ...host, property: 'width' },\n hostDirection: { ...host, property: 'direction' },\n // we apply font-size also on the host so we can set its width with em\n fontSize: [{}, host],\n chipFontSize: { ...chipLabel, property: 'font-size' },\n fontFamily: [label, placeholder, inputField, helperText, errorMessage, chipLabel],\n labelFontSize: { ...label, property: 'font-size' },\n labelFontWeight: { ...label, property: 'font-weight' },\n labelTextColor: [\n { ...label, property: 'color' },\n { ...requiredIndicator, property: 'color' },\n ],\n errorMessageTextColor: { ...errorMessage, property: 'color' },\n errorMessageIcon: { ...errorMessage, property: 'background-image' },\n errorMessageIconSize: { ...errorMessage, property: 'background-size' },\n errorMessageIconPadding: { ...errorMessage, property: 'padding-inline-start' },\n errorMessageIconRepeat: { ...errorMessage, property: 'background-repeat' },\n errorMessageIconPosition: { ...errorMessage, property: 'background-position' },\n inputHeight: { ...inputField, property: 'min-height' },\n inputBackgroundColor: { ...inputField, property: 'background-color' },\n inputBorderColor: { ...inputField, property: 'border-color' },\n inputBorderWidth: { ...inputField, property: 'border-width' },\n inputBorderStyle: { ...inputField, property: 'border-style' },\n inputBorderRadius: { ...inputField, property: 'border-radius' },\n labelRequiredIndicator: { ...requiredIndicator, property: 'content' },\n inputValueTextColor: { ...inputField, property: 'color' },\n inputPlaceholderTextColor: { ...placeholder, property: 'color' },\n inputDropdownButtonCursor: [\n { ...toggle, property: 'cursor' },\n { ...clearButton, property: 'cursor' },\n ],\n inputDropdownButtonColor: [\n { ...toggle, property: 'color' },\n { ...clearButton, property: 'color' },\n ],\n inputDropdownButtonSize: [\n { ...toggle, property: 'font-size' },\n { ...clearButton, property: 'font-size' },\n ],\n inputDropdownButtonOffset: [\n { ...toggle, property: 'margin-right' },\n { ...toggle, property: 'margin-left' },\n ],\n inputOutlineColor: { ...inputField, property: 'outline-color' },\n inputOutlineWidth: { ...inputField, property: 'outline-width' },\n inputOutlineStyle: { ...inputField, property: 'outline-style' },\n inputOutlineOffset: { ...inputField, property: 'outline-offset' },\n inputHorizontalPadding: [\n { ...inputElement, property: 'padding-left' },\n { ...inputElement, property: 'padding-right' },\n { ...inputField, property: 'padding-inline-start' },\n ],\n inputVerticalPadding: [\n { ...inputField, property: 'padding-top' },\n { ...inputField, property: 'padding-bottom' },\n ],\n chipTextColor: { ...chipLabel, property: 'color' },\n chipBackgroundColor: [\n { ...chip, property: 'background-color' },\n { ...overflowChipFirstBorder, property: 'border-color' },\n { ...overflowChipSecondBorder, property: 'border-color' },\n ],\n\n labelPosition: { ...label, property: 'position' },\n labelTopPosition: { ...label, property: 'top' },\n labelLeftPosition: { ...label, property: 'left' },\n labelHorizontalPosition: [\n { ...label, property: 'left' },\n { ...label, property: 'right' },\n ],\n inputTransformY: { ...label, property: 'transform' },\n inputTransition: { ...label, property: 'transition' },\n marginInlineStart: { ...label, property: 'margin-inline-start' },\n placeholderOpacity: { ...placeholder, property: 'opacity' },\n inputVerticalAlignment: { ...inputField, property: 'align-items' },\n\n // we need to use the variables from the portal mixin\n // so we need to use an arrow function on the selector\n // for that to work, because ComboBox is not available\n // at this time.\n overlayBackground: {\n property: () => MultiSelectComboBoxClass.cssVarList.overlay.backgroundColor,\n },\n overlayTextColor: {\n property: () => MultiSelectComboBoxClass.cssVarList.overlay.textColor,\n },\n overlayBorder: { property: () => MultiSelectComboBoxClass.cssVarList.overlay.border },\n overlayFontSize: { property: () => MultiSelectComboBoxClass.cssVarList.overlay.fontSize },\n overlayFontFamily: { property: () => MultiSelectComboBoxClass.cssVarList.overlay.fontFamily },\n overlayCursor: { property: () => MultiSelectComboBoxClass.cssVarList.overlay.cursor },\n overlayItemBoxShadow: {\n property: () => MultiSelectComboBoxClass.cssVarList.overlay.itemBoxShadow,\n },\n overlayItemPaddingInlineStart: {\n property: () => MultiSelectComboBoxClass.cssVarList.overlay.itemPaddingInlineStart,\n },\n overlayItemPaddingInlineEnd: {\n property: () => MultiSelectComboBoxClass.cssVarList.overlay.itemPaddingInlineEnd,\n },\n },\n }),\n draggableMixin,\n portalMixin({\n name: 'overlay',\n selector: 'vaadin-multi-select-combo-box-internal',\n mappings: {\n backgroundColor: { selector: 'vaadin-multi-select-combo-box-scroller' },\n minHeight: { selector: 'vaadin-multi-select-combo-box-overlay' },\n margin: { selector: 'vaadin-multi-select-combo-box-overlay' },\n cursor: { selector: 'vaadin-multi-select-combo-box-item' },\n fontFamily: { selector: 'vaadin-multi-select-combo-box-item' },\n textColor: { selector: 'vaadin-multi-select-combo-box-item', property: 'color' },\n fontSize: { selector: 'vaadin-multi-select-combo-box-item' },\n itemBoxShadow: { selector: 'vaadin-multi-select-combo-box-item', property: 'box-shadow' },\n itemPaddingInlineStart: {\n selector: 'vaadin-multi-select-combo-box-item',\n property: 'padding-inline-start',\n },\n itemPaddingInlineEnd: {\n selector: 'vaadin-multi-select-combo-box-item',\n property: 'padding-inline-end',\n },\n },\n forward: {\n include: false,\n attributes: ['size'],\n },\n }),\n proxyInputMixin({ proxyProps: ['selectionStart'], inputEvent: 'selected-items-changed' }),\n changeMixin,\n componentNameValidationMixin,\n multiSelectComboBoxMixin\n)(\n createProxy({\n slots: ['', 'prefix'],\n wrappedEleName: 'vaadin-multi-select-combo-box',\n style: () => `\n\t\t:host {\n\t\t\tdisplay: inline-flex;\n\t\t\tbox-sizing: border-box;\n\t\t\t-webkit-mask-image: none;\n\t\t}\n\t\t${useHostExternalPadding(MultiSelectComboBoxClass.cssVarList)}\n\t\t${resetInputReadonlyStyle('vaadin-multi-select-combo-box')}\n\t\t${resetInputPlaceholder('vaadin-multi-select-combo-box')}\n\t\t${resetInputCursor('vaadin-multi-select-combo-box')}\n\n\t\tvaadin-multi-select-combo-box {\n\t\t\tpadding: 0;\n\t\t\twidth: 100%;\n\t\t}\n\t\tvaadin-multi-select-combo-box::before {\n\t\t\theight: initial;\n\t\t}\n\t\tvaadin-multi-select-combo-box [slot=\"input\"] {\n\t\t\t-webkit-mask-image: none;\n\t\t\tmin-height: 0;\n align-self: center;\n\t\t\tbox-sizing: border-box;\n\t\t}\n\t\tvaadin-multi-select-combo-box[readonly] [slot=\"input\"] {\n flex-grow: 1;\n flex-basis: 4em;\n\t\t}\n\n\t\t::part(input-field) {\n padding: 0;\n\t\t\tbox-shadow: none;\n\t\t}\n ${resetInputLabelPosition('vaadin-multi-select-combo-box')}\n :host([has-label]) vaadin-multi-select-combo-box-chip::part(label) {\n display: block;\n }\n\n vaadin-multi-select-combo-box vaadin-multi-select-combo-box-chip[slot='overflow']::before,\n vaadin-multi-select-combo-box vaadin-multi-select-combo-box-chip[slot='overflow']::after {\n left: -4px;\n right: -4px;\n border-left-width: 0;\n border-inline-start-style: solid;\n border-inline-start-width: 2px;\n }\n vaadin-multi-select-combo-box vaadin-multi-select-combo-box-chip[slot='overflow']::after {\n left: -8px;\n right: -8px;\n }\n\n :host([has-no-options][allow-custom-value='true']) ::part(toggle-button) {\n display: none;\n }\n\n ${inputFloatingLabelStyle()}\n\n vaadin-multi-select-combo-box::part(toggle-button),\n vaadin-multi-select-combo-box::part(clear-button) {\n align-self: center;\n }\n\n vaadin-multi-select-combo-box[label-type=\"floating\"]:not([focused])[readonly] > input:placeholder-shown {\n opacity: 0;\n }\n vaadin-multi-select-combo-box[label-type=\"floating\"]:not([focused])[disabled] > input:placeholder-shown {\n opacity: 0;\n }\n\n\t\t`,\n // Note: we exclude `size` to avoid overriding Vaadin's ComboBox property\n // with the same name. Including it will cause Vaadin to calculate NaN size,\n // and reset items to an empty array, and opening the list box with no items\n // to display.\n // Note: we exclude `placeholder` because the vaadin component observes it and\n // tries to override it, causing us to lose the user set placeholder.\n excludeAttrsSync: ['tabindex', 'size', 'data', 'placeholder'],\n componentName,\n includeForwardProps: ['items', 'renderer', 'selectedItems'],\n })\n);\n","import '@vaadin/multi-select-combo-box';\nimport { componentName, MultiSelectComboBoxClass } from './MultiSelectComboBoxClass';\n\ncustomElements.define(componentName, MultiSelectComboBoxClass);\n\nexport { MultiSelectComboBoxClass, componentName };\n","export const useHostExternalPadding = (cssVarList) => `\n :host {\n padding: calc(var(${cssVarList.inputOutlineWidth}) + var(${cssVarList.inputOutlineOffset}))\n }\n`;\n\nexport const resetInputFieldUnderlayingBorder = (name) => `\n ${name}::part(input-field)::after {\n border: none;\n }\n`;\n\nexport const resetInitialHeight = (name) => `\n ${name}::before {\n\t\theight: unset;\n\t}\n`;\n\nexport const resetInputElement = (name) => `\n ${name} > input {\n -webkit-mask-image: none;\n min-height: 0;\n box-sizing: border-box;\n }\n`;\n\nexport const resetInputContainer = (name) => `\n ${name} {\n margin: 0;\n padding: 0;\n width: 100%;\n height: 100%;\n box-sizing: border-box;\n }\n`;\n\nexport const resetInputField = (name) => `\n ${name}::part(input-field) {\n overflow: hidden;\n padding: 0;\n box-shadow: none;\n }\n`;\n\nexport const resetInputCursor = (name) => `\n ${name} > label,\n ${name}::part(label),\n ${name}::part(required-indicator) {\n cursor: pointer;\n }\n`;\n\nexport const resetInputPlaceholder = (name, ele = 'input') => `\n ${name}[disabled] > ${ele}:placeholder-shown,\n\t${name}[readonly] > ${ele}:placeholder-shown {\n\t\topacity: 1;\n\t}\n`;\n\nexport const resetInputAutoFill = (name, cssVarList) => `\n ${name} input:-webkit-autofill,\n ${name} input:-webkit-autofill::first-line,\n ${name} input:-webkit-autofill:hover,\n ${name} input:-webkit-autofill:active,\n ${name} input:-webkit-autofill:focus {\n -webkit-text-fill-color: var(${cssVarList.inputValueTextColor});\n box-shadow: 0 0 0 var(${cssVarList.inputHeight}) var(${cssVarList.inputBackgroundColor}) inset;\n }\n`;\n\nexport const resetInputFieldDefaultWidth = () => `\n :host {\n --vaadin-field-default-width: auto;\n box-sizing: border-box;\n }\n`;\n\nexport const resetInputReadonlyStyle = (name) => `\n ${name}::part(input-field)::after {\n opacity: 0;\n }\n`;\n\nexport const resetInputFieldInvalidBackgroundColor = (name) => `\n ${name}::part(input-field)::after {\n background: none;\n }\n`;\n\nexport const resetInputOverrides = (name, cssVarList) => `\n ${resetInputContainer(name)}\n ${resetInputCursor(name)}\n ${resetInputPlaceholder(name)}\n ${resetInputField(name)}\n ${resetInputAutoFill(name, cssVarList)}\n ${resetInputFieldInvalidBackgroundColor(name)}\n ${resetInitialHeight(name)}\n ${resetInputElement(name)}\n ${resetInputFieldUnderlayingBorder(name)}\n`;\n\n// This function is used to support RTL correctly for input components.\n// It also fixes the error message to be displayed LTR since we currently\n// don't support RTL for error messages.\nexport const resetInputLabelPosition = (name) => `\n :host ::part(error-message) {\n direction: ltr;\n }\n :host([required]) ::part(required-indicator) {\n width: 1em;\n display: inline-flex;\n }\n :host([required]) ::part(required-indicator)::after {\n position: static;\n }\n :host([has-label]) ::part(label) {\n padding-right: 0;\n padding-bottom: 0;\n display: flex;\n width: 100%;\n }\n ${name} [slot=\"label\"] {\n max-width: calc(100% - 1em);\n overflow: hidden;\n text-overflow: ellipsis;\n padding-bottom: 0.5em;\n }\n`;\n\nexport const inputFloatingLabelStyle = () => {\n return `\n :host([label-type=\"floating\"]) {\n position: relative;\n }\n :host([label-type=\"floating\"][has-label]) [slot=\"label\"] {\n padding: 0;\n }\n :host([label-type=\"floating\"][has-label]) > ::part(label) {\n z-index: 1;\n padding: 0;\n width: auto;\n }\n `;\n};\n"],"names":["componentName","host","inputField","inputElement","placeholder","toggle","clearButton","label","requiredIndicator","helperText","errorMessage","chip","chipLabel","overflowChipFirstBorder","overflowChipSecondBorder","selector","MultiSelectComboBoxClass","mappings","hostWidth","property","hostDirection","fontSize","chipFontSize","fontFamily","labelFontSize","labelFontWeight","labelTextColor","errorMessageTextColor","errorMessageIcon","errorMessageIconSize","errorMessageIconPadding","errorMessageIconRepeat","errorMessageIconPosition","inputHeight","inputBackgroundColor","inputBorderColor","inputBorderWidth","inputBorderStyle","inputBorderRadius","labelRequiredIndicator","inputValueTextColor","inputPlaceholderTextColor","inputDropdownButtonCursor","inputDropdownButtonColor","inputDropdownButtonSize","inputDropdownButtonOffset","inputOutlineColor","inputOutlineWidth","inputOutlineStyle","inputOutlineOffset","inputHorizontalPadding","inputVerticalPadding","chipTextColor","chipBackgroundColor","labelPosition","labelTopPosition","labelLeftPosition","labelHorizontalPosition","inputTransformY","inputTransition","marginInlineStart","placeholderOpacity","inputVerticalAlignment","overlayBackground","cssVarList","overlay","backgroundColor","overlayTextColor","textColor","overlayBorder","border","overlayFontSize","overlayFontFamily","overlayCursor","cursor","overlayItemBoxShadow","itemBoxShadow","overlayItemPaddingInlineStart","itemPaddingInlineStart","overlayItemPaddingInlineEnd","itemPaddingInlineEnd","name","minHeight","margin","forward","include","attributes","proxyProps","inputEvent","superclass","observedAttributes","displayName","value","defaultValues","defaultValuesAttr","this","getAttribute","JSON","parse","isValidDataType","e","console","error","message","renderItem","renderFn","renderItems","data","dataAttr","allowCustomValues","minItemsSelection","parseInt","maxItemsSelection","isValid","Array","isArray","getItemsTemplate","reduce","acc","item","template","innerHTML","updateSelectedItems","currentSelected","baseElement","selectedItems","map","length","setDefaultValues","customValueTransformFn","val","setComboBoxDescriptor","valueDescriptor","Object","getOwnPropertyDescriptor","constructor","prototype","comboBox","defineProperties","set","transformedValue","call","items","from","Map","values","children","dedupItems","removeAttribute","forEach","node","defineProperty","configurable","writable","setTimeout","setAttribute","renderer","root","combo","model","outerHTML","shadowRoot","querySelector","_attachOverlay","bringToFront","_detachOverlay","_enterModalState","addEventListener","newItemHtml","detail","_lastFilter","setGetValidity","getValidity","pattern","patternRegex","RegExp","some","test","patternMismatch","isRequired","valueMissing","rangeUnderflow","rangeOverflow","that","checkValidity","validity","valid","init","super","bind","includeAttrs","dispatchEvent","CustomEvent","bubbles","elem","vals","selectedChildren","filter","includes","existingValues","child","missingValues","newItemsHtml","newSelectedValues","attributeChangedCallback","attrName","oldValue","newValue","onReadOnlyChange","slots","wrappedEleName","style","excludeAttrsSync","includeForwardProps","customElements","define","useHostExternalPadding","resetInputContainer","resetInputField","resetInputCursor","resetInputPlaceholder","ele","resetInputFieldDefaultWidth","resetInputReadonlyStyle","resetInputFieldInvalidBackgroundColor","resetInputOverrides","resetInputAutoFill","resetInitialHeight","resetInputElement","resetInputFieldUnderlayingBorder","resetInputLabelPosition","inputFloatingLabelStyle"],"sourceRoot":""}
1
+ {"version":3,"file":"descope-multi-select-combo-box-index-js.js","mappings":"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","sources":["webpack://@descope/web-components-ui/./src/components/descope-multi-select-combo-box/MultiSelectComboBoxClass.js","webpack://@descope/web-components-ui/./src/components/descope-multi-select-combo-box/index.js","webpack://@descope/web-components-ui/./src/helpers/themeHelpers/resetHelpers.js"],"sourcesContent":["import { compose, compareArraysUnordered } from '../../helpers';\nimport {\n forwardAttrs,\n getComponentName,\n observeAttributes,\n observeChildren,\n} from '../../helpers/componentHelpers';\nimport {\n resetInputLabelPosition,\n resetInputCursor,\n resetInputPlaceholder,\n resetInputReadonlyStyle,\n useHostExternalPadding,\n inputFloatingLabelStyle,\n} from '../../helpers/themeHelpers/resetHelpers';\nimport {\n createStyleMixin,\n draggableMixin,\n createProxy,\n componentNameValidationMixin,\n portalMixin,\n proxyInputMixin,\n changeMixin,\n} from '../../mixins';\n\nexport const componentName = getComponentName('multi-select-combo-box');\n\nconst multiSelectComboBoxMixin = (superclass) =>\n class MultiSelectComboBoxMixinClass extends superclass {\n static get observedAttributes() {\n return ['readonly'];\n }\n\n // eslint-disable-next-line class-methods-use-this\n #renderItem = ({ displayName, value, label }) => {\n const ele = document.createElement('span');\n ele.setAttribute('data-name', label);\n ele.setAttribute('data-id', value);\n ele.textContent = displayName || label;\n\n return ele.outerHTML;\n };\n\n #data;\n\n #value = [];\n\n get defaultValues() {\n const defaultValuesAttr = this.getAttribute('default-values');\n if (defaultValuesAttr) {\n try {\n const defaultValues = JSON.parse(defaultValuesAttr);\n if (this.isValidDataType(defaultValues)) {\n return defaultValues;\n }\n } catch (e) {\n // eslint-disable-next-line no-console\n console.error('could not parse data string from attribute \"default-values\" -', e.message);\n }\n }\n return [];\n }\n\n get renderItem() {\n return this.#renderItem;\n }\n\n set renderItem(renderFn) {\n this.#renderItem = renderFn;\n this.renderItems();\n }\n\n get data() {\n if (this.#data) return this.#data;\n\n const dataAttr = this.getAttribute('data');\n\n if (dataAttr) {\n try {\n const data = JSON.parse(dataAttr);\n if (this.isValidDataType(data)) {\n return data;\n }\n } catch (e) {\n // eslint-disable-next-line no-console\n console.error('could not parse data string from attribute \"data\" -', e.message);\n }\n }\n\n return [];\n }\n\n set data(data) {\n if (this.isValidDataType(data)) {\n this.#data = data;\n this.renderItems();\n }\n }\n\n get allowCustomValues() {\n return this.getAttribute('allow-custom-value') === 'true';\n }\n\n get minItemsSelection() {\n return parseInt(this.getAttribute('min-items-selection'), 10) || 0;\n }\n\n get maxItemsSelection() {\n return parseInt(this.getAttribute('max-items-selection'), 10) || 0;\n }\n\n // eslint-disable-next-line class-methods-use-this\n isValidDataType(data) {\n const isValid = Array.isArray(data);\n if (!isValid) {\n // eslint-disable-next-line no-console\n console.error('data and default-values must be an array, received:', data);\n }\n\n return isValid;\n }\n\n getItemsTemplate() {\n return this.data?.reduce?.((acc, item) => acc + (this.renderItem?.(item || {}) || ''), '');\n }\n\n renderItems() {\n const template = this.getItemsTemplate();\n if (template) this.innerHTML = template;\n }\n\n updateSelectedItems() {\n // This is a list of all the selected items, including ones that may have been removed from the DOM\n const currentSelected =\n this.baseElement.selectedItems?.map((item) => item.getAttribute('data-id')) || [];\n\n // if there are selected items, we want to trigger a potential update to the value if some child elements were removed\n if (currentSelected.length > 0) {\n // setting the value checks that the selected items are still in the DOM and will not set the value if they are not\n this.value = currentSelected;\n }\n\n // otherwise, if default value is specified, set default value as selected item\n if (this.value.length === 0) {\n this.setDefaultValues();\n }\n }\n\n // eslint-disable-next-line class-methods-use-this\n customValueTransformFn(val) {\n return val;\n }\n\n // We want to override Vaadin's Combo Box value setter. This is needed since Vaadin couples between the\n // field that it searches the value, and the finaly display value of the input.\n // We provide a custom transform function to override that behavior.\n setComboBoxDescriptor() {\n const valueDescriptor = Object.getOwnPropertyDescriptor(\n this.inputElement.constructor.prototype,\n 'value'\n );\n\n const comboBox = this;\n\n Object.defineProperties(this.inputElement, {\n value: {\n ...valueDescriptor,\n set(val) {\n const transformedValue = comboBox.customValueTransformFn(val) || '';\n\n if (transformedValue === this.value) {\n return;\n }\n\n valueDescriptor.set.call(this, transformedValue);\n },\n },\n });\n }\n\n // To prevent duplicate items for the multi select options, we dedup them based on the \"data-id\" attribute\n // eslint-disable-next-line class-methods-use-this\n #dedupItems(items) {\n return Array.from(\n new Map(items.map((item) => [item.getAttribute('data-id'), item])).values()\n );\n }\n\n // vaadin api is to set props on their combo box node,\n // in order to avoid it, we are passing the children of this component\n // to the items & renderer props, so it will be used as the combo box items\n #onChildrenChange() {\n const items = Array.from(this.children);\n const dedupItems = this.#dedupItems(items);\n\n // we want the data-name attribute to be accessible as an object attribute\n if (items.length) {\n this.removeAttribute('has-no-options');\n\n dedupItems.forEach((node) => {\n Object.defineProperty(node, 'data-name', {\n value: node.getAttribute('data-name'),\n configurable: true,\n writable: true,\n });\n Object.defineProperty(node, 'data-id', {\n value: node.getAttribute('data-id'),\n configurable: true,\n writable: true,\n });\n });\n\n this.baseElement.items = dedupItems;\n\n setTimeout(() => {\n // set timeout to ensure this runs after customValueTransformFn had the chance to be overriden\n this.updateSelectedItems();\n }, 0);\n } else {\n this.baseElement.items = [];\n this.setAttribute('has-no-options', '');\n }\n\n // use vaadin combobox custom renderer to render options as HTML\n // and not via default renderer, which renders only the data-name's value\n // in its own HTML template\n this.baseElement.renderer = (root, combo, model) => {\n // eslint-disable-next-line no-param-reassign\n root.innerHTML = model.item.outerHTML;\n };\n }\n\n // the default vaadin behavior is to attach the overlay to the body when opened\n // we do not want that because it's difficult to style the overlay in this way\n // so we override it to open inside the shadow DOM\n #overrideOverlaySettings() {\n const overlay = this.baseElement.shadowRoot\n .querySelector('vaadin-multi-select-combo-box-internal')\n .shadowRoot.querySelector('vaadin-multi-select-combo-box-overlay');\n overlay._attachOverlay = () => {\n overlay.bringToFront();\n };\n overlay._detachOverlay = () => {};\n overlay._enterModalState = () => {};\n }\n\n #handleCustomValues() {\n if (this.allowCustomValues) {\n this.baseElement.addEventListener('custom-value-set', (e) => {\n const newItemHtml = this.#renderItem({\n label: e.detail,\n displayName: e.detail,\n value: e.detail,\n });\n this.innerHTML += newItemHtml;\n // The internal filter needs to be removed, otherwise there's a bug where a new custom item\n // added can't be removed from the dropdown because of how the vaadin component is implemented\n this.baseElement._lastFilter = '';\n // The value needs to be set with a timeout because it needs to execute after\n // the custom value is added to items by the children change observer\n setTimeout(() => {\n this.value = [...this.value, e.detail];\n }, 0);\n });\n }\n }\n\n setGetValidity() {\n // eslint-disable-next-line func-names\n this.getValidity = function () {\n if (this.pattern) {\n const patternRegex = new RegExp(this.pattern);\n if (this.value.some((val) => !patternRegex.test(val)))\n return {\n patternMismatch: true,\n };\n }\n\n if (this.isRequired && !this.value.length) {\n return {\n valueMissing: true,\n };\n }\n // If the field is not required, no minimum selection can be set\n if (\n this.isRequired &&\n this.minItemsSelection &&\n this.value.length < this.minItemsSelection\n ) {\n return {\n rangeUnderflow: true,\n };\n }\n if (this.maxItemsSelection && this.value.length > this.maxItemsSelection) {\n return {\n rangeOverflow: true,\n };\n }\n return {};\n };\n\n // This is required to override the default validity check of the vaadin component\n // which is triggered when the component is checked for validity after blur\n // Without this, our minItemsSelection and maxItemsSelection constraints will not be checked\n const that = this;\n // eslint-disable-next-line func-names\n this.baseElement.checkValidity = () => {\n return that.validity.valid;\n };\n }\n\n init() {\n super.init?.();\n\n this.setGetValidity();\n\n this.setComboBoxDescriptor();\n\n this.#overrideOverlaySettings();\n\n this.#handleCustomValues();\n\n this.renderItems();\n\n observeAttributes(this, this.renderItems.bind(this), { includeAttrs: ['data'] });\n\n observeChildren(this, this.#onChildrenChange.bind(this));\n\n // Note: we need to forward the `placeholder` because the vaadin component observes it and\n // tries to override it, causing us to lose the user set placeholder.\n forwardAttrs(this, this.baseElement, { includeAttrs: ['placeholder'] });\n\n this.setDefaultValues();\n\n this.baseElement.addEventListener('selected-items-changed', () => {\n this.#updateInternalValue();\n this.dispatchEvent(new CustomEvent('input', { bubbles: true }));\n });\n }\n\n setDefaultValues() {\n const initialDefaultValues = this.defaultValues;\n if (initialDefaultValues.length > 0) {\n this.value = this.defaultValues;\n }\n }\n\n #updateInternalValue() {\n // This is done here because we don't want to return a different copy of the same array\n // every time get value is called if a new value wasn't set\n this.#value =\n this.baseElement.selectedItems?.map((elem) => elem.getAttribute('data-id')) || [];\n }\n\n // Updating the value will update the selectedItems, which will trigger an event 'selected-items-changed'\n // which we listen to in the init function to update the internal value\n set value(vals) {\n if (vals && vals.length > 0) {\n // Filters the children of the component to find the ones that match the values,\n // since it's possible that some values that are trying to set are not in the children\n const selectedChildren = this.baseElement.items?.filter((item) =>\n vals.includes(item['data-id'])\n );\n\n // If the component allows custom values, we need to add the values that are not present in the children\n if (this.allowCustomValues) {\n const existingValues =\n selectedChildren?.map((child) => child.getAttribute('data-id')) || [];\n const missingValues = vals.filter((val) => !existingValues.includes(val));\n\n if (missingValues.length) {\n const newItemsHtml = missingValues.reduce((acc, val) => {\n const newItemHtml = this.#renderItem({\n label: val,\n displayName: val,\n value: val,\n });\n return acc + newItemHtml;\n }, '');\n this.innerHTML += newItemsHtml;\n\n // The value needs to be set with a timeout because it needs to execute after\n // the custom values are added to the items by the children change observer\n setTimeout(() => {\n this.value = vals;\n }, 0);\n return;\n }\n }\n\n const newSelectedValues =\n selectedChildren?.map((child) => child.getAttribute('data-id')) || [];\n if (!compareArraysUnordered(this.#value, newSelectedValues)) {\n this.baseElement.selectedItems = selectedChildren;\n }\n } else {\n this.baseElement.selectedItems = [];\n }\n }\n\n get value() {\n return this.#value;\n }\n\n attributeChangedCallback(attrName, oldValue, newValue) {\n super.attributeChangedCallback?.(attrName, oldValue, newValue);\n\n if (attrName === 'readonly') {\n this.onReadOnlyChange(newValue !== null && newValue === 'true');\n }\n }\n\n onReadOnlyChange(val) {\n if (val) {\n this.baseElement?.shadowRoot\n ?.querySelector('vaadin-multi-select-combo-box-internal')\n ?.setAttribute('inert', val);\n } else {\n this.baseElement?.shadowRoot\n ?.querySelector('vaadin-multi-select-combo-box-internal')\n ?.removeAttribute('inert');\n }\n }\n };\n\nconst {\n host,\n inputField,\n inputElement,\n placeholder,\n toggle,\n clearButton,\n label,\n requiredIndicator,\n helperText,\n errorMessage,\n chip,\n chipLabel,\n overflowChipFirstBorder,\n overflowChipSecondBorder,\n} = {\n host: { selector: () => ':host' },\n inputField: { selector: '::part(input-field)' },\n inputElement: { selector: 'input' },\n placeholder: { selector: '> input:placeholder-shown' },\n toggle: { selector: '::part(toggle-button)' },\n clearButton: { selector: '::part(clear-button)' },\n label: { selector: '::part(label)' },\n requiredIndicator: { selector: '[required]::part(required-indicator)::after' },\n helperText: { selector: '::part(helper-text)' },\n errorMessage: { selector: '::part(error-message)' },\n chip: { selector: 'vaadin-multi-select-combo-box-chip' },\n chipLabel: { selector: 'vaadin-multi-select-combo-box-chip::part(label)' },\n overflowChipFirstBorder: {\n selector: \"vaadin-multi-select-combo-box-chip[slot='overflow']::before\",\n },\n overflowChipSecondBorder: {\n selector: \"vaadin-multi-select-combo-box-chip[slot='overflow']::after\",\n },\n};\n\nexport const MultiSelectComboBoxClass = compose(\n createStyleMixin({\n mappings: {\n hostWidth: { ...host, property: 'width' },\n hostDirection: { ...host, property: 'direction' },\n // we apply font-size also on the host so we can set its width with em\n fontSize: [{}, host],\n chipFontSize: { ...chipLabel, property: 'font-size' },\n fontFamily: [label, placeholder, inputField, helperText, errorMessage, chipLabel],\n labelFontSize: { ...label, property: 'font-size' },\n labelFontWeight: { ...label, property: 'font-weight' },\n labelTextColor: [\n { ...label, property: 'color' },\n { ...requiredIndicator, property: 'color' },\n ],\n errorMessageTextColor: { ...errorMessage, property: 'color' },\n errorMessageIcon: { ...errorMessage, property: 'background-image' },\n errorMessageIconSize: { ...errorMessage, property: 'background-size' },\n errorMessageIconPadding: { ...errorMessage, property: 'padding-inline-start' },\n errorMessageIconRepeat: { ...errorMessage, property: 'background-repeat' },\n errorMessageIconPosition: { ...errorMessage, property: 'background-position' },\n inputHeight: { ...inputField, property: 'min-height' },\n inputBackgroundColor: { ...inputField, property: 'background-color' },\n inputBorderColor: { ...inputField, property: 'border-color' },\n inputBorderWidth: { ...inputField, property: 'border-width' },\n inputBorderStyle: { ...inputField, property: 'border-style' },\n inputBorderRadius: { ...inputField, property: 'border-radius' },\n labelRequiredIndicator: { ...requiredIndicator, property: 'content' },\n inputValueTextColor: { ...inputField, property: 'color' },\n inputPlaceholderTextColor: { ...placeholder, property: 'color' },\n inputDropdownButtonCursor: [\n { ...toggle, property: 'cursor' },\n { ...clearButton, property: 'cursor' },\n ],\n inputDropdownButtonColor: [\n { ...toggle, property: 'color' },\n { ...clearButton, property: 'color' },\n ],\n inputDropdownButtonSize: [\n { ...toggle, property: 'font-size' },\n { ...clearButton, property: 'font-size' },\n ],\n inputDropdownButtonOffset: [\n { ...toggle, property: 'margin-right' },\n { ...toggle, property: 'margin-left' },\n ],\n inputOutlineColor: { ...inputField, property: 'outline-color' },\n inputOutlineWidth: { ...inputField, property: 'outline-width' },\n inputOutlineStyle: { ...inputField, property: 'outline-style' },\n inputOutlineOffset: { ...inputField, property: 'outline-offset' },\n inputHorizontalPadding: [\n { ...inputElement, property: 'padding-left' },\n { ...inputElement, property: 'padding-right' },\n { ...inputField, property: 'padding-inline-start' },\n ],\n inputVerticalPadding: [\n { ...inputField, property: 'padding-top' },\n { ...inputField, property: 'padding-bottom' },\n ],\n chipTextColor: { ...chipLabel, property: 'color' },\n chipBackgroundColor: [\n { ...chip, property: 'background-color' },\n { ...overflowChipFirstBorder, property: 'border-color' },\n { ...overflowChipSecondBorder, property: 'border-color' },\n ],\n\n labelPosition: { ...label, property: 'position' },\n labelTopPosition: { ...label, property: 'top' },\n labelLeftPosition: { ...label, property: 'left' },\n labelHorizontalPosition: [\n { ...label, property: 'left' },\n { ...label, property: 'right' },\n ],\n inputTransformY: { ...label, property: 'transform' },\n inputTransition: { ...label, property: 'transition' },\n marginInlineStart: { ...label, property: 'margin-inline-start' },\n placeholderOpacity: { ...placeholder, property: 'opacity' },\n inputVerticalAlignment: { ...inputField, property: 'align-items' },\n\n // we need to use the variables from the portal mixin\n // so we need to use an arrow function on the selector\n // for that to work, because ComboBox is not available\n // at this time.\n overlayBackground: {\n property: () => MultiSelectComboBoxClass.cssVarList.overlay.backgroundColor,\n },\n overlayTextColor: {\n property: () => MultiSelectComboBoxClass.cssVarList.overlay.textColor,\n },\n overlayBorder: { property: () => MultiSelectComboBoxClass.cssVarList.overlay.border },\n overlayFontSize: { property: () => MultiSelectComboBoxClass.cssVarList.overlay.fontSize },\n overlayFontFamily: { property: () => MultiSelectComboBoxClass.cssVarList.overlay.fontFamily },\n overlayCursor: { property: () => MultiSelectComboBoxClass.cssVarList.overlay.cursor },\n overlayItemBoxShadow: {\n property: () => MultiSelectComboBoxClass.cssVarList.overlay.itemBoxShadow,\n },\n overlayItemPaddingInlineStart: {\n property: () => MultiSelectComboBoxClass.cssVarList.overlay.itemPaddingInlineStart,\n },\n overlayItemPaddingInlineEnd: {\n property: () => MultiSelectComboBoxClass.cssVarList.overlay.itemPaddingInlineEnd,\n },\n },\n }),\n draggableMixin,\n portalMixin({\n name: 'overlay',\n selector: 'vaadin-multi-select-combo-box-internal',\n mappings: {\n backgroundColor: { selector: 'vaadin-multi-select-combo-box-scroller' },\n minHeight: { selector: 'vaadin-multi-select-combo-box-overlay' },\n margin: { selector: 'vaadin-multi-select-combo-box-overlay' },\n cursor: { selector: 'vaadin-multi-select-combo-box-item' },\n fontFamily: { selector: 'vaadin-multi-select-combo-box-item' },\n textColor: { selector: 'vaadin-multi-select-combo-box-item', property: 'color' },\n fontSize: { selector: 'vaadin-multi-select-combo-box-item' },\n itemBoxShadow: { selector: 'vaadin-multi-select-combo-box-item', property: 'box-shadow' },\n itemPaddingInlineStart: {\n selector: 'vaadin-multi-select-combo-box-item',\n property: 'padding-inline-start',\n },\n itemPaddingInlineEnd: {\n selector: 'vaadin-multi-select-combo-box-item',\n property: 'padding-inline-end',\n },\n },\n forward: {\n include: false,\n attributes: ['size'],\n },\n }),\n proxyInputMixin({ proxyProps: ['selectionStart'], inputEvent: 'selected-items-changed' }),\n changeMixin,\n componentNameValidationMixin,\n multiSelectComboBoxMixin\n)(\n createProxy({\n slots: ['', 'prefix'],\n wrappedEleName: 'vaadin-multi-select-combo-box',\n style: () => `\n\t\t:host {\n\t\t\tdisplay: inline-flex;\n\t\t\tbox-sizing: border-box;\n\t\t\t-webkit-mask-image: none;\n\t\t}\n\t\t${useHostExternalPadding(MultiSelectComboBoxClass.cssVarList)}\n\t\t${resetInputReadonlyStyle('vaadin-multi-select-combo-box')}\n\t\t${resetInputPlaceholder('vaadin-multi-select-combo-box')}\n\t\t${resetInputCursor('vaadin-multi-select-combo-box')}\n\n\t\tvaadin-multi-select-combo-box {\n\t\t\tpadding: 0;\n\t\t\twidth: 100%;\n\t\t}\n\t\tvaadin-multi-select-combo-box::before {\n\t\t\theight: initial;\n\t\t}\n\t\tvaadin-multi-select-combo-box [slot=\"input\"] {\n\t\t\t-webkit-mask-image: none;\n\t\t\tmin-height: 0;\n align-self: center;\n\t\t\tbox-sizing: border-box;\n\t\t}\n\t\tvaadin-multi-select-combo-box[readonly] [slot=\"input\"] {\n flex-grow: 1;\n flex-basis: 4em;\n\t\t}\n\n\t\t::part(input-field) {\n padding: 0;\n\t\t\tbox-shadow: none;\n\t\t}\n ${resetInputLabelPosition('vaadin-multi-select-combo-box')}\n :host([has-label]) vaadin-multi-select-combo-box-chip::part(label) {\n display: block;\n }\n\n vaadin-multi-select-combo-box vaadin-multi-select-combo-box-chip[slot='overflow']::before,\n vaadin-multi-select-combo-box vaadin-multi-select-combo-box-chip[slot='overflow']::after {\n left: -4px;\n right: -4px;\n border-left-width: 0;\n border-inline-start-style: solid;\n border-inline-start-width: 2px;\n }\n vaadin-multi-select-combo-box vaadin-multi-select-combo-box-chip[slot='overflow']::after {\n left: -8px;\n right: -8px;\n }\n\n :host([has-no-options][allow-custom-value='true']) ::part(toggle-button) {\n display: none;\n }\n\n ${inputFloatingLabelStyle()}\n\n vaadin-multi-select-combo-box::part(toggle-button),\n vaadin-multi-select-combo-box::part(clear-button) {\n align-self: center;\n }\n\n vaadin-multi-select-combo-box[label-type=\"floating\"]:not([focused])[readonly] > input:placeholder-shown {\n opacity: 0;\n }\n vaadin-multi-select-combo-box[label-type=\"floating\"]:not([focused])[disabled] > input:placeholder-shown {\n opacity: 0;\n }\n\n\t\t`,\n // Note: we exclude `size` to avoid overriding Vaadin's ComboBox property\n // with the same name. Including it will cause Vaadin to calculate NaN size,\n // and reset items to an empty array, and opening the list box with no items\n // to display.\n // Note: we exclude `placeholder` because the vaadin component observes it and\n // tries to override it, causing us to lose the user set placeholder.\n excludeAttrsSync: ['tabindex', 'size', 'data', 'placeholder'],\n componentName,\n includeForwardProps: ['items', 'renderer', 'selectedItems'],\n })\n);\n","import '@vaadin/multi-select-combo-box';\nimport { componentName, MultiSelectComboBoxClass } from './MultiSelectComboBoxClass';\n\ncustomElements.define(componentName, MultiSelectComboBoxClass);\n\nexport { MultiSelectComboBoxClass, componentName };\n","export const useHostExternalPadding = (cssVarList) => `\n :host {\n padding: calc(var(${cssVarList.inputOutlineWidth}) + var(${cssVarList.inputOutlineOffset}))\n }\n`;\n\nexport const resetInputFieldUnderlayingBorder = (name) => `\n ${name}::part(input-field)::after {\n border: none;\n }\n`;\n\nexport const resetInitialHeight = (name) => `\n ${name}::before {\n\t\theight: unset;\n\t}\n`;\n\nexport const resetInputElement = (name) => `\n ${name} > input {\n -webkit-mask-image: none;\n min-height: 0;\n box-sizing: border-box;\n }\n`;\n\nexport const resetInputContainer = (name) => `\n ${name} {\n margin: 0;\n padding: 0;\n width: 100%;\n height: 100%;\n box-sizing: border-box;\n }\n`;\n\nexport const resetInputField = (name) => `\n ${name}::part(input-field) {\n overflow: hidden;\n padding: 0;\n box-shadow: none;\n }\n`;\n\nexport const resetInputCursor = (name) => `\n ${name} > label,\n ${name}::part(label),\n ${name}::part(required-indicator) {\n cursor: pointer;\n }\n`;\n\nexport const resetInputPlaceholder = (name, ele = 'input') => `\n ${name}[disabled] > ${ele}:placeholder-shown,\n\t${name}[readonly] > ${ele}:placeholder-shown {\n\t\topacity: 1;\n\t}\n`;\n\nexport const resetInputAutoFill = (name, cssVarList) => `\n ${name} input:-webkit-autofill,\n ${name} input:-webkit-autofill::first-line,\n ${name} input:-webkit-autofill:hover,\n ${name} input:-webkit-autofill:active,\n ${name} input:-webkit-autofill:focus {\n -webkit-text-fill-color: var(${cssVarList.inputValueTextColor});\n box-shadow: 0 0 0 var(${cssVarList.inputHeight}) var(${cssVarList.inputBackgroundColor}) inset;\n }\n`;\n\nexport const resetInputFieldDefaultWidth = () => `\n :host {\n --vaadin-field-default-width: auto;\n box-sizing: border-box;\n }\n`;\n\nexport const resetInputReadonlyStyle = (name) => `\n ${name}::part(input-field)::after {\n opacity: 0;\n }\n`;\n\nexport const resetInputFieldInvalidBackgroundColor = (name) => `\n ${name}::part(input-field)::after {\n background: none;\n }\n`;\n\nexport const resetInputOverrides = (name, cssVarList) => `\n ${resetInputContainer(name)}\n ${resetInputCursor(name)}\n ${resetInputPlaceholder(name)}\n ${resetInputField(name)}\n ${resetInputAutoFill(name, cssVarList)}\n ${resetInputFieldInvalidBackgroundColor(name)}\n ${resetInitialHeight(name)}\n ${resetInputElement(name)}\n ${resetInputFieldUnderlayingBorder(name)}\n`;\n\n// This function is used to support RTL correctly for input components.\n// It also fixes the error message to be displayed LTR since we currently\n// don't support RTL for error messages.\nexport const resetInputLabelPosition = (name) => `\n :host ::part(error-message) {\n direction: ltr;\n }\n :host([required]) ::part(required-indicator) {\n width: 1em;\n display: inline-flex;\n }\n :host([required]) ::part(required-indicator)::after {\n position: static;\n }\n :host([has-label]) ::part(label) {\n padding-right: 0;\n padding-bottom: 0;\n display: flex;\n width: 100%;\n }\n ${name} [slot=\"label\"] {\n max-width: calc(100% - 1em);\n overflow: hidden;\n text-overflow: ellipsis;\n padding-bottom: 0.5em;\n }\n`;\n\nexport const inputFloatingLabelStyle = () => {\n return `\n :host([label-type=\"floating\"]) {\n position: relative;\n }\n :host([label-type=\"floating\"][has-label]) [slot=\"label\"] {\n padding: 0;\n }\n :host([label-type=\"floating\"][has-label]) > ::part(label) {\n z-index: 1;\n padding: 0;\n width: auto;\n }\n `;\n};\n"],"names":["componentName","host","inputField","inputElement","placeholder","toggle","clearButton","label","requiredIndicator","helperText","errorMessage","chip","chipLabel","overflowChipFirstBorder","overflowChipSecondBorder","selector","MultiSelectComboBoxClass","mappings","hostWidth","property","hostDirection","fontSize","chipFontSize","fontFamily","labelFontSize","labelFontWeight","labelTextColor","errorMessageTextColor","errorMessageIcon","errorMessageIconSize","errorMessageIconPadding","errorMessageIconRepeat","errorMessageIconPosition","inputHeight","inputBackgroundColor","inputBorderColor","inputBorderWidth","inputBorderStyle","inputBorderRadius","labelRequiredIndicator","inputValueTextColor","inputPlaceholderTextColor","inputDropdownButtonCursor","inputDropdownButtonColor","inputDropdownButtonSize","inputDropdownButtonOffset","inputOutlineColor","inputOutlineWidth","inputOutlineStyle","inputOutlineOffset","inputHorizontalPadding","inputVerticalPadding","chipTextColor","chipBackgroundColor","labelPosition","labelTopPosition","labelLeftPosition","labelHorizontalPosition","inputTransformY","inputTransition","marginInlineStart","placeholderOpacity","inputVerticalAlignment","overlayBackground","cssVarList","overlay","backgroundColor","overlayTextColor","textColor","overlayBorder","border","overlayFontSize","overlayFontFamily","overlayCursor","cursor","overlayItemBoxShadow","itemBoxShadow","overlayItemPaddingInlineStart","itemPaddingInlineStart","overlayItemPaddingInlineEnd","itemPaddingInlineEnd","name","minHeight","margin","forward","include","attributes","proxyProps","inputEvent","superclass","observedAttributes","displayName","value","ele","document","createElement","setAttribute","textContent","outerHTML","defaultValues","defaultValuesAttr","this","getAttribute","JSON","parse","isValidDataType","e","console","error","message","renderItem","renderFn","renderItems","data","dataAttr","allowCustomValues","minItemsSelection","parseInt","maxItemsSelection","isValid","Array","isArray","getItemsTemplate","reduce","acc","item","template","innerHTML","updateSelectedItems","currentSelected","baseElement","selectedItems","map","length","setDefaultValues","customValueTransformFn","val","setComboBoxDescriptor","valueDescriptor","Object","getOwnPropertyDescriptor","constructor","prototype","comboBox","defineProperties","set","transformedValue","call","items","from","Map","values","children","dedupItems","removeAttribute","forEach","node","defineProperty","configurable","writable","setTimeout","renderer","root","combo","model","shadowRoot","querySelector","_attachOverlay","bringToFront","_detachOverlay","_enterModalState","addEventListener","newItemHtml","detail","_lastFilter","setGetValidity","getValidity","pattern","patternRegex","RegExp","some","test","patternMismatch","isRequired","valueMissing","rangeUnderflow","rangeOverflow","that","checkValidity","validity","valid","init","super","bind","includeAttrs","dispatchEvent","CustomEvent","bubbles","elem","vals","selectedChildren","filter","includes","existingValues","child","missingValues","newItemsHtml","newSelectedValues","attributeChangedCallback","attrName","oldValue","newValue","onReadOnlyChange","slots","wrappedEleName","style","excludeAttrsSync","includeForwardProps","customElements","define","useHostExternalPadding","resetInputContainer","resetInputField","resetInputCursor","resetInputPlaceholder","resetInputFieldDefaultWidth","resetInputReadonlyStyle","resetInputFieldInvalidBackgroundColor","resetInputOverrides","resetInputAutoFill","resetInitialHeight","resetInputElement","resetInputFieldUnderlayingBorder","resetInputLabelPosition","inputFloatingLabelStyle"],"sourceRoot":""}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@descope/web-components-ui",
3
- "version": "1.54.0",
3
+ "version": "1.55.0",
4
4
  "description": "",
5
5
  "main": "dist/cjs/index.cjs.js",
6
6
  "module": "dist/index.esm.js",
package/src/components/descope-multi-select-combo-box/MultiSelectComboBoxClass.js CHANGED
@@ -33,7 +33,12 @@ const multiSelectComboBoxMixin = (superclass) =>
33
33
 
34
34
  // eslint-disable-next-line class-methods-use-this
35
35
  #renderItem = ({ displayName, value, label }) => {
36
- return `<span data-name="${label}" data-id="${value}">${displayName || label}</span>`;
36
+ const ele = document.createElement('span');
37
+ ele.setAttribute('data-name', label);
38
+ ele.setAttribute('data-id', value);
39
+ ele.textContent = displayName || label;
40
+
41
+ return ele.outerHTML;
37
42
  };
38
43
 
39
44
  #data;