@descope/web-components-ui 1.0.289 → 1.0.291

package/dist/umd/mapping-fields-descope-mappings-field-index-js.js

@@ -1,5 +1,5 @@
 /*! For license information please see mapping-fields-descope-mappings-field-index-js.js.LICENSE.txt */
-"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[9299,9662,9483,2934,2528,3172,5130,4567,1e3,4201,3878,4447],{2561:(t,e,i)=>{i.d(e,{s:()=>d});var r=i(2061),n=i(357),s=i(7878);const a=t=>class extends t{#t=s.C.bind(this,"components-context");updateComponentsContext(t){this.dispatchEvent(new CustomEvent("components-context",{bubbles:!0,composed:!0,detail:t}))}};var o=i(2666),l=i(8084);const d=({componentName:t,baseSelector:e=""})=>{class i extends HTMLElement{static get componentName(){return t}#e;#i=!0;get baseSelector(){return e}get baseElement(){return this.#e??=this.baseSelector?this.rootElement.querySelector(this.baseSelector):this,this.#e||console.warn("missing base element for component",this.localName),this.#e}get rootElement(){return this.shadowRoot||this}get name(){return this.getAttribute("name")}connectedCallback(){super.connectedCallback?.(),this.rootElement.isConnected&&this.#i&&(this.#i=!1,this.init?.())}}return(0,r.qC)(n.A,o._,l.Q,a)(i)}},3878:(t,e,i)=>{i.d(e,{P:()=>a});var r=i(2061),n=i(1e3),s=i(2561);const a=(...t)=>(0,r.qC)(n.wX,n.li,n.QT,n.mE)((0,s.s)(...t))},9690:(t,e,i)=>{i.d(e,{n:()=>p,f:()=>a});var r=i(2061),n=i(4567),s=i(1e3);const a=(0,n.iY)("button"),{host:o,label:l}={host:{selector:()=>":host"},label:{selector:"::part(label)"}};let d;const p=(0,r.qC)((0,s.yk)({mappings:{hostWidth:{property:"width"},hostHeight:{property:"height"},hostDirection:{...o,property:"direction"},fontSize:{},fontFamily:{},cursor:{},backgroundColor:{},outlineOffset:{},outlineColor:{},outlineStyle:{},outlineWidth:{},borderRadius:{},borderColor:{},borderStyle:{},borderWidth:{},verticalPadding:[{property:"padding-top"},{property:"padding-bottom"}],labelTextColor:{property:"color"},labelTextDecoration:{...l,property:"text-decoration"},labelSpacing:{...l,property:"gap"},textAlign:{...l,property:"justify-content",fallback:"center"}}}),(t=>class extends t{get isLoading(){return"true"===this.getAttribute("loading")}click(){this.isLoading||super.click()}}),s.e4,s.Ae)((0,s.DM)({slots:["","prefix","label","suffix"],wrappedEleName:"vaadin-button",style:()=>`\n\t\t\t\n\t:host {\n\t\tdisplay: inline-block;\n\t\tbox-sizing: border-box;\n\t}\n\tvaadin-button::before,\n\tvaadin-button::after {\n\t\topacity: 0;\n\t}\n\tvaadin-button {\n\t\tmargin: 0;\n\t\tmin-width: 0;\n\t\twidth: 100%;\n\t\theight: auto;\n\t\tbox-shadow: none;\n\t}\n\tvaadin-button::part(label) {\n\t\tpadding: 0;\n    width: 100%;\n\t}\n\tvaadin-button::part(prefix) {\n\t\tmargin-left: 0;\n\t\tmargin-right: 0;\n\t}\n\n\t\t\t\n\tvaadin-button::part(prefix),\n\tvaadin-button::part(label) {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t}\n\n\t\t\t${d}\n\t\t\tvaadin-button::part(label) { pointer-events: none; }\n\t\t\t:host {\n\t\t\t\tpadding: calc(var(${p.cssVarList.outlineWidth}) + var(${p.cssVarList.outlineOffset}));\n\t\t\t}\n      :host([full-width="true"]) {\n        width: var(${p.cssVarList.hostWidth});\n      }\n\t\t\tvaadin-button {\n\t\t\t\theight: calc(var(${p.cssVarList.hostHeight}) - var(${p.cssVarList.outlineWidth}) - var(${p.cssVarList.outlineOffset}));\n\t\t\t}\n\t\t\t[square="true"]:not([full-width="true"]) {\n\t\t\t\twidth: calc(var(${p.cssVarList.hostWidth}) - var(${p.cssVarList.outlineWidth}) - var(${p.cssVarList.outlineOffset}));\n        padding: 0;\n\t\t\t}\n\t\t`,excludeAttrsSync:["tabindex"],componentName:a})),{color:u,fontSize:h}=p.cssVarList;d=`\n\t@keyframes spin {\n\t\t0% { -webkit-transform: rotate(0deg); }\n\t\t100% { -webkit-transform: rotate(360deg); }\n\t}\n\t:host([loading="true"]) ::before {\n\t\tanimation: spin 2s linear infinite;\n\t\tposition: absolute;\n\t\tcontent: '';\n\t\tz-index: 1;\n\t\tbox-sizing: border-box;\n\t\tborder-radius: 50%;\n\t\tborder-bottom-color: transparent;\n\t\tborder-left-color: transparent;\n\t\tborder-style: solid;\n\t\tcolor: var(${u});\n\t\ttop: calc(50% - (var(${h}) / 2));\n\t\tleft: calc(50% - (var(${h}) / 2));\n\t\tborder-width: calc(var(${h}) / 10);\n\t\twidth: var(${h});\n\t\theight: var(${h});\n\t}\n\t:host([disabled="true"]),\n\t:host([loading="true"]) {\n\t\tpointer-events: none;\n\t}\n\t:host([loading="true"])::part(prefix),\n\t:host([loading="true"])::part(label) {\n\t\tvisibility: hidden;\n\t}\n`},2018:(t,e,i)=>{i.r(e),i.d(e,{ButtonClass:()=>r.n}),i(1721);var r=i(9690);customElements.define(r.f,r.n)},4049:(t,e,i)=>{i.d(e,{H:()=>y,f:()=>o});var r=i(2061),n=i(4567),s=i(4201),a=i(1e3);const o=(0,n.iY)("combo-box"),{host:l,inputField:d,inputElement:p,placeholder:u,toggle:h,clearButton:c,label:m,requiredIndicator:b,helperText:g,errorMessage:v}={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)"}},y=(0,r.qC)((0,a.yk)({mappings:{hostWidth:{...l,property:"width"},hostDirection:{...l,property:"direction"},fontSize:[{},l],fontFamily:[m,u,d,g,v],labelTextColor:[{...m,property:"color"},{...b,property:"color"}],errorMessageTextColor:{...v,property:"color"},inputHeight:{...d,property:"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:{...b,property:"content"},inputValueTextColor:{...d,property:"color"},inputPlaceholderTextColor:{...u,property:"color"},inputDropdownButtonCursor:[{...h,property:"cursor"},{...c,property:"cursor"}],inputDropdownButtonColor:[{...h,property:"color"},{...c,property:"color"}],inputDropdownButtonSize:[{...h,property:"font-size"},{...c,property:"font-size"}],inputDropdownButtonOffset:[{...h,property:"margin-right"},{...h,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"}],overlayBackground:{property:()=>y.cssVarList.overlay.backgroundColor},overlayTextColor:{property:()=>y.cssVarList.overlay.textColor},overlayBorder:{property:()=>y.cssVarList.overlay.border},overlayFontSize:{property:()=>y.cssVarList.overlay.fontSize},overlayFontFamily:{property:()=>y.cssVarList.overlay.fontFamily},overlayCursor:{property:()=>y.cssVarList.overlay.cursor},overlayItemBoxShadow:{property:()=>y.cssVarList.overlay.itemBoxShadow},overlayItemPaddingInlineStart:{property:()=>y.cssVarList.overlay.itemPaddingInlineStart},overlayItemPaddingInlineEnd:{property:()=>y.cssVarList.overlay.itemPaddingInlineEnd}}}),a.e4,(0,a.Iw)({name:"overlay",selector:"",mappings:{backgroundColor:{selector:"vaadin-combo-box-scroller"},minHeight:{selector:"vaadin-combo-box-overlay"},margin:{selector:"vaadin-combo-box-overlay"},cursor:{selector:"vaadin-combo-box-item"},fontFamily:{selector:"vaadin-combo-box-item"},textColor:{selector:"vaadin-combo-box-item",property:"color"},fontSize:{selector:"vaadin-combo-box-item"},itemBoxShadow:{selector:"vaadin-combo-box-item",property:"box-shadow"},itemPaddingInlineStart:{selector:"vaadin-combo-box-item",property:"padding-inline-start"},itemPaddingInlineEnd:{selector:"vaadin-combo-box-item",property:"padding-inline-end"}},forward:{include:!1,attributes:["size"]}}),(0,a.dj)({proxyProps:["selectionStart"],inputEvent:"selected-item-changed"}),a.Ae,(t=>class extends t{#r=({displayName:t,value:e,label:i})=>`<span data-name="${i}" data-id="${e}">${t||i}</span>`;#n;get defaultValue(){return this.getAttribute("default-value")}get renderItem(){return this.#r}set renderItem(t){this.#r=t,this.renderItems()}get data(){if(this.#n)return this.#n;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.#n=t,this.renderItems())}isValidDataType(t){const e=Array.isArray(t);return e||console.error("data 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)}handleSelectedItem(){const t=this.baseElement.selectedItem?.["data-id"];this.baseElement.selectedItem=void 0,t&&(this.value=t),this.value||this.setDefaultValue()}customValueTransformFn(t){return t}setComboBoxDescriptor(){const t=Object.getOwnPropertyDescriptor(this.inputElement.constructor.prototype,"value"),e=this;Object.defineProperties(this.inputElement,{value:{...t,set(i){if(!e.baseElement.items?.length)return;const r=e.customValueTransformFn(i)||"";r!==this.value&&t.set.call(this,r)}}})}#s(){const t=this.shadowRoot.querySelector(this.baseSelector),e=Array.from(this.children);e.length&&(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})})),t.items=e,setTimeout((()=>{this.handleSelectedItem()}),0)),t.renderer=(t,e,i)=>{t.innerHTML=i.item.outerHTML}}#a(){const t=this.baseElement.shadowRoot.querySelector("vaadin-combo-box-overlay");t._attachOverlay=()=>{t.bringToFront()},t._detachOverlay=()=>{},t._enterModalState=()=>{}}init(){super.init?.(),this.getValidity=function(){return!this.value&&this.isRequired?{valueMissing:!0}:{}},this.setComboBoxDescriptor(),this.#a(),this.renderItems(),(0,n.FX)(this,this.renderItems.bind(this),{includeAttrs:["data"]}),(0,n.P$)(this,this.#s.bind(this)),this.setDefaultValue(),this.baseElement.addEventListener("selected-item-changed",(()=>{this.dispatchEvent(new Event("input",{bubbles:!0,composed:!0}))}))}setDefaultValue(){this.value=this.defaultValue}set value(t){if(t){const e=this.baseElement.items?.find((e=>e["data-id"]===t));e&&(this.baseElement.selectedItem=e)}else this.baseElement.selectedItem=void 0}get value(){return this.baseElement.selectedItem?.["data-id"]||""}}))((0,a.DM)({slots:["","prefix"],wrappedEleName:"vaadin-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,s.bi)(y.cssVarList)}\n\t\t${(0,s.PH)("vaadin-combo-box")}\n\t\t${(0,s.jI)("vaadin-combo-box")}\n\t\t${(0,s.Pd)("vaadin-combo-box")}\n\n\t\tvaadin-combo-box {\n\t\t\tpadding: 0;\n\t\t\twidth: 100%;\n\t\t}\n\t\tvaadin-combo-box::before {\n\t\t\theight: initial;\n\t\t}\n\t\tvaadin-combo-box [slot="input"] {\n\t\t\t-webkit-mask-image: none;\n\t\t\tmin-height: 0;\n\t\t\tbox-sizing: border-box;\n\t\t}\n\n\t\tvaadin-combo-box::part(input-field) {\n\t\t\tpadding: 0;\n\t\t\tbox-shadow: none;\n\t\t}\n    ${(0,s.Wf)("vaadin-combo-box")}\n\t\t`,excludeAttrsSync:["tabindex","size","data"],componentName:o,includeForwardProps:["items","renderer","selectedItem"]}))},1294:(t,e,i)=>{i.r(e),i.d(e,{ComboBoxClass:()=>r.H}),i(7583);var r=i(4049);customElements.define(r.f,r.H)},6417:(t,e,i)=>{i.d(e,{f:()=>l,z:()=>p});var r=i(1e3),n=i(4447),s=i(2061),a=i(4567),o=i(4201);const l=(0,a.iY)("text-field"),d=["type"],p=(0,s.qC)((0,r.yk)({mappings:n.Z}),r.e4,(0,r.dj)({proxyProps:["value","selectionStart"]}),r.Ae,(t=>class extends t{static get observedAttributes(){return d.concat(t.observedAttributes||[])}attributeChangedCallback(t,e,i){super.attributeChangeCallback?.(t,e,i),"type"===t&&this.baseElement._setType(i)}}))((0,r.DM)({slots:["prefix","suffix"],wrappedEleName:"vaadin-text-field",style:()=>`\n\t\t\t:host {\n\t\t\t\tdisplay: inline-block;\n\t\t\t\tmax-width: 100%;\n\t\t\t\tpadding: calc(var(${p.cssVarList.inputOutlineWidth}) + var(${p.cssVarList.inputOutlineOffset}));\n        box-sizing: border-box;\n\t\t\t}\n      ${(0,o.Wf)("vaadin-text-field")}\n\t\t\t${(0,o.bi)(p.cssVarList)}\n\t\t\t${(0,o.wm)("vaadin-text-field",p.cssVarList)}\n\t\t`,excludeAttrsSync:["tabindex"],componentName:l}))},9357:(t,e,i)=>{i.r(e),i.d(e,{TextFieldClass:()=>r.z}),i(9789);var r=i(6417);customElements.define(r.f,r.z)},4447:(t,e,i)=>{i.d(e,{Z:()=>c});const{host:r,label:n,placeholder:s,requiredIndicator:a,inputField:o,input:l,helperText:d,errorMessage:p,disabledPlaceholder:u,inputDisabled:h}={host:{selector:()=>":host"},label:{selector:"::part(label)"},requiredIndicator:{selector:"[required]::part(required-indicator)::after"},placeholder:{selector:"> input:placeholder-shown"},disabledPlaceholder:{selector:"> input:disabled::placeholder"},inputField:{selector:"::part(input-field)"},input:{selector:"input"},inputDisabled:{selector:"input:disabled"},helperText:{selector:"::part(helper-text)"},errorMessage:{selector:"::part(error-message)"}},c={fontSize:[{},r],fontFamily:[n,o,d,p],hostWidth:{...r,property:"width"},hostMinWidth:{...r,property:"min-width"},hostDirection:{...r,property:"direction"},inputBackgroundColor:{...o,property:"background-color"},labelTextColor:[{...n,property:"color"},{...a,property:"color"},{...n,property:"-webkit-text-fill-color"},{...a,property:"-webkit-text-fill-color"}],errorMessageTextColor:{...p,property:"color"},helperTextColor:{...d,property:"-webkit-text-fill-color"},inputValueTextColor:[{...o,property:"color"},{...h,property:"-webkit-text-fill-color"}],inputCaretTextColor:{...l,property:"color"},labelRequiredIndicator:{...a,property:"content"},inputBorderColor:{...o,property:"border-color"},inputBorderWidth:{...o,property:"border-width"},inputBorderStyle:{...o,property:"border-style"},inputBorderRadius:{...o,property:"border-radius"},inputHeight:{...o,property:"height"},inputHorizontalPadding:[{...l,property:"padding-left"},{...l,property:"padding-right"}],inputOutlineColor:{...o,property:"outline-color"},inputOutlineStyle:{...o,property:"outline-style"},inputOutlineWidth:{...o,property:"outline-width"},inputOutlineOffset:{...o,property:"outline-offset"},inputTextAlign:{...l,property:"text-align"},inputPlaceholderColor:[{...s,property:"color"},{...u,property:"-webkit-text-fill-color"}]}},2138:(t,e,i)=>{i.d(e,{f:()=>o,k:()=>d});var r=i(1e3),n=i(2561),s=i(2061),a=i(4567);const o=(0,a.iY)("text");class l extends((0,n.s)({componentName:o,baseSelector:":host > slot"})){constructor(){super(),this.attachShadow({mode:"open"}).innerHTML="\n\t\t<style>\n\t\t\t:host {\n\t\t\t\tdisplay: inline-block;\n\t\t\t}\n\t\t\t:host > slot {\n\t\t\t\twidth: 100%;\n\t\t\t\tdisplay: inline-block;\n\t\t\t}\n\t\t</style>\n\t\t<slot></slot>\n\t\t"}}const d=(0,s.qC)((0,r.yk)({mappings:{hostWidth:{selector:()=>":host",property:"width"},hostDirection:{selector:()=>":host",property:"direction"},fontSize:{},textColor:{property:"color"},textLineHeight:{property:"line-height"},textLetterSpacing:{property:"letter-spacing"},textShadow:{},textAlign:{},textTransform:{},fontFamily:{},fontStyle:{},fontWeight:{},borderWidth:{},borderStyle:{},borderColor:{}}}),r.e4,r.Ae,(t=>class extends t{get hideWhenEmpty(){return"true"===this.getAttribute("hide-when-empty")}init(){super.init(),(0,a.P$)(this,(()=>{const t=!!this.childNodes.length;this.style.display=!t&&this.hideWhenEmpty?"none":""}))}}))(l)},1876:(t,e,i)=>{i.r(e),i.d(e,{TextClass:()=>r.k});var r=i(2138);customElements.define(r.f,r.k)},6751:(t,e,i)=>{i.r(e);var r=i(3878),n=i(4567);const s=(0,n.iY)("mapping-item"),a=["size","bordered","readonly","full-width","disabled"],o=(0,r.P)({componentName:s,baseSelector:"div"});customElements.define(s,class extends o{static get observedAttributes(){return[].concat(o.observedAttributes||[],a,["separator","options","invalid","disabled"])}get separator(){return this.getAttribute("separator")||"map to"}get value(){const t=this.attributeInput.value,e=this.valueInput.value;return t&&e?{[t]:e}:null}set value(t){if(1!==Object.entries(t).length)return void console.error("descope-mapping item expected expects only one key-value pair in the value but received: ",t);const[e,i]=Object.entries(t)[0];this.valueInput.value=i,this.attributeInput.value=e,this.dispatchEvent(new InputEvent("input",{bubbles:!0,composed:!0}))}constructor(){super(),this.attachShadow({mode:"open"}).innerHTML=`\n      <style>\n        .wrapper {\n          display: flex;\n        }\n        .separator {\n          text-align: center;\n          flex-shrink: 0;\n        }\n      </style>\n      <div class="wrapper" part="wrapper">\n        <descope-text-field required="true"></descope-text-field>\n        <div class="separator" part="separator">${this.separator}</div>\n        <descope-combo-box\n          item-label-path="data-name"\n          item-value-path="data-id"\n          required="true"\n        >\n        </descope-combo-box>\n        <descope-button variant="link" mode="primary">\n          <vaadin-icon icon="vaadin:minus"></vaadin-icon>\n        </descope-button>\n      </div>\n\t`,this.valueInput=this.shadowRoot.querySelector("descope-text-field"),this.attributeInput=this.shadowRoot.querySelector("descope-combo-box"),this.inputs=[this.valueInput,this.attributeInput],this.removeButton=this.shadowRoot.querySelector("descope-button"),(0,n.oP)(this,this.valueInput,{includeAttrs:a}),(0,n.oP)(this,this.attributeInput,{includeAttrs:[...a,"options"],mapAttrs:{options:"data"}}),(0,n.oP)(this,this.removeButton,{includeAttrs:["disabled"]})}initRemoveButton(){this.removeButton.addEventListener("click",(()=>this.dispatchEvent(new CustomEvent("mapping-item-removed"))))}init(){super.init?.(),this.initRemoveButton()}getValidity(){const t=this.attributeInput.value,e=this.valueInput.value;return t&&e?{}:{badInput:!0}}reportValidity(){this.inputs.forEach((t=>t.reportValidity()))}focus(){(this.checkValidity()||!this.valueInput.checkValidity()?this.valueInput:this.attributeInput).focus()}handleSeparatorChange(){this.shadowRoot.querySelector(".separator").textContent=this.separator}#o(t){"true"===t&&(this.valueInput.value||(this.valueInput.setAttribute("invalid","true"),this.valueInput.setAttribute("error-message",this.defaultErrorMsgValueMissing)),this.attributeInput.value||(this.attributeInput.setAttribute("invalid","true"),this.attributeInput.setAttribute("error-message",this.defaultErrorMsgValueMissing)))}attributeChangedCallback(t,e,i){super.attributeChangedCallback?.(t,e,i),"separator"===t&&this.handleSeparatorChange(),"invalid"===t&&this.#o(i)}})},7819:(t,e,i)=>{i.d(e,{Z:()=>o,f:()=>s});var r=i(3878),n=i(4567);const s=(0,n.iY)("mappings-field-internal"),a=(0,r.P)({componentName:s,baseSelector:"div"}),o=class extends a{#l;static get observedAttributes(){return[].concat(a.observedAttributes||[],["label-value","label-attr","button-label","invalid","readonly","disabled"])}isValidDataType(t){try{return t.every((t=>"object"==typeof t&&!Array.isArray(t)&&1===Object.getOwnPropertyNames(t).length&&"string"==typeof t[Object.keys(t)[0]]&&""!==t[Object.keys(t)[0]].trim()))}catch(t){return!1}}get labelValue(){return this.getAttribute("label-value")||"Value"}get labelAttr(){return this.getAttribute("label-attr")||"Attribute"}get buttonLabel(){return this.getAttribute("button-label")||"Add mapping"}get options(){return this.getAttribute("options")||[]}addNewMappingItem(t){const e=document.createElement("descope-mapping-item");return e.setAttribute("bordered","true"),this.mappingsContainerEle.appendChild(e),(0,n.oP)(this,e,{includeAttrs:["size","full-width","separator","options","disabled"]}),setTimeout((()=>{this.setCustomValidity(""),e.addEventListener("mapping-item-removed",(t=>{e===this.#l&&(this.resetInvalidIndication(),this.#l=void 0),e.remove(),this.setCustomValidity(""),t.stopPropagation()})),t&&e.focus()}),0),e}get items(){return Array.from(this.mappingsContainerEle.querySelectorAll("descope-mapping-item"))}get value(){return this.items.reduce(((t,e)=>e.value?[...t,e.value]:t),[])}set value(t){if(!this.isValidDataType(t))return void console.error("received invalid value to set - should be an array of objects with one key-value pair");const e=this.items;if(e.length>t.length)for(let i=t.length;i<e.length;i++)this.mappingsContainerEle.removeChild(e[i]);t.forEach(((t,i)=>{const r=e[i];if(r)r.value=t;else{const e=this.addNewMappingItem(!1);setTimeout((()=>{e.value=t}),0)}}))}constructor(){super(),this.innerHTML='\n      <div class="labels-container" part="labels"></div>\n      <div class="mappings-container"></div>\n      <div class="button-container"></div>\n    ',this.labelsEle=this.querySelector(".labels-container"),this.mappingsContainerEle=this.querySelector(".mappings-container"),this.buttonContainer=this.querySelector(".button-container")}initLabels(){this.labelsEle.innerHTML=`\n      <descope-text variant="body2" part="value-label">${this.labelValue}</descope-text>\n      <descope-text variant="body2" part="attr-label">${this.labelAttr}</descope-text>\n    `}initAddButton(){this.buttonContainer.innerHTML=`\n      <descope-button variant="link" mode="primary" disabled="${this.isDisabled}">\n        <vaadin-icon icon="vaadin:plus"></vaadin-icon>\n        ${this.buttonLabel}\n      </descope-button>\n    `;const t=this.querySelector("descope-button");t.onclick=()=>{this.addNewMappingItem(!0)},(0,n.oP)(this,t,{includeAttrs:["disabled"]})}#d(){this.labelsEle.style.display=this.items.length?"grid":"none"}init(){this.addEventListener("focus",(t=>{t.isTrusted&&(this.#l||this.items[0]||this.querySelector("descope-button")).focus()})),super.init?.(),this.initLabels(),this.initAddButton(),this.addEventListener("input",(()=>{this.mappingsContainerEle.contains(this.#l)&&this.#l?.checkValidity()&&(this.resetInvalidIndication(),this.#l.removeAttribute("invalid"),this.#l=void 0)})),(0,n.P$)(this.mappingsContainerEle,this.#d.bind(this))}resetInvalidIndication(){this.removeAttribute("invalid")}getValidity(){const t=this.items.find((t=>!t.checkValidity()));return t?t.validity:{}}#p(t){t&&(this.#l=this.items.find((t=>!t.checkValidity())),this.#l?.reportValidity(),this.#l?.setAttribute("invalid","true"))}attributeChangedCallback(t,e,i){super.attributeChangedCallback?.(t,e,i),"label-value"!==t&&"label-attr"!==t||this.initLabels(),"button-label"===t&&this.initAddButton(),"invalid"===t&&this.#p("true"===i),"readonly"===t&&this.toggleAttribute("inert","true"===i)}}},3820:(t,e,i)=>{i.r(e);var r=i(7819);customElements.define(r.f,r.Z)},3325:(t,e,i)=>{i.r(e),i.d(e,{MappingsFieldClass:()=>P}),i(1195),i(9098),i(9416),i(4173);var r=i(2982),n=i(1251),s=i(6570);const a=s.iv`
+"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[9299,9662,9483,2934,2528,3172,5130,4567,1e3,3878,4201,4447],{2561:(t,e,i)=>{i.d(e,{s:()=>d});var r=i(2061),n=i(357),s=i(7878);const a=t=>class extends t{#t=s.C.bind(this,"components-context");updateComponentsContext(t){this.dispatchEvent(new CustomEvent("components-context",{bubbles:!0,composed:!0,detail:t}))}};var o=i(2666),l=i(8084);const d=({componentName:t,baseSelector:e=""})=>{class i extends HTMLElement{static get componentName(){return t}#e;#i=!0;get baseSelector(){return e}get baseElement(){return this.#e??=this.baseSelector?this.rootElement.querySelector(this.baseSelector):this,this.#e||console.warn("missing base element for component",this.localName),this.#e}get rootElement(){return this.shadowRoot||this}get name(){return this.getAttribute("name")}connectedCallback(){super.connectedCallback?.(),this.rootElement.isConnected&&this.#i&&(this.#i=!1,this.init?.())}}return(0,r.qC)(n.A,o._,l.Q,a)(i)}},3878:(t,e,i)=>{i.d(e,{P:()=>a});var r=i(2061),n=i(1e3),s=i(2561);const a=(...t)=>(0,r.qC)(n.wX,n.li,n.QT,n.mE)((0,s.s)(...t))},9690:(t,e,i)=>{i.d(e,{n:()=>p,f:()=>a});var r=i(2061),n=i(4567),s=i(1e3);const a=(0,n.iY)("button"),{host:o,label:l}={host:{selector:()=>":host"},label:{selector:"::part(label)"}};let d;const p=(0,r.qC)((0,s.yk)({mappings:{hostWidth:{property:"width"},hostHeight:{property:"height"},hostDirection:{...o,property:"direction"},fontSize:{},fontFamily:{},cursor:{},backgroundColor:{},outlineOffset:{},outlineColor:{},outlineStyle:{},outlineWidth:{},borderRadius:{},borderColor:{},borderStyle:{},borderWidth:{},verticalPadding:[{property:"padding-top"},{property:"padding-bottom"}],labelTextColor:{property:"color"},labelTextDecoration:{...l,property:"text-decoration"},labelSpacing:{...l,property:"gap"},textAlign:{...l,property:"justify-content",fallback:"center"}}}),(t=>class extends t{get isLoading(){return"true"===this.getAttribute("loading")}click(){this.isLoading||super.click()}}),s.e4,s.Ae)((0,s.DM)({slots:["","prefix","label","suffix"],wrappedEleName:"vaadin-button",style:()=>`\n\t\t\t\n\t:host {\n\t\tdisplay: inline-block;\n\t\tbox-sizing: border-box;\n\t}\n\tvaadin-button::before,\n\tvaadin-button::after {\n\t\topacity: 0;\n\t}\n\tvaadin-button {\n\t\tmargin: 0;\n\t\tmin-width: 0;\n\t\twidth: 100%;\n\t\theight: auto;\n\t\tbox-shadow: none;\n\t}\n\tvaadin-button::part(label) {\n\t\tpadding: 0;\n    width: 100%;\n\t}\n\tvaadin-button::part(prefix) {\n\t\tmargin-left: 0;\n\t\tmargin-right: 0;\n\t}\n\n\t\t\t\n\tvaadin-button::part(prefix),\n\tvaadin-button::part(label) {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t}\n\n\t\t\t${d}\n\t\t\tvaadin-button::part(label) { pointer-events: none; }\n\t\t\t:host {\n\t\t\t\tpadding: calc(var(${p.cssVarList.outlineWidth}) + var(${p.cssVarList.outlineOffset}));\n\t\t\t}\n      :host([full-width="true"]) {\n        width: var(${p.cssVarList.hostWidth});\n      }\n\t\t\tvaadin-button {\n\t\t\t\theight: calc(var(${p.cssVarList.hostHeight}) - var(${p.cssVarList.outlineWidth}) - var(${p.cssVarList.outlineOffset}));\n\t\t\t}\n\t\t\t[square="true"]:not([full-width="true"]) {\n\t\t\t\twidth: calc(var(${p.cssVarList.hostWidth}) - var(${p.cssVarList.outlineWidth}) - var(${p.cssVarList.outlineOffset}));\n        padding: 0;\n\t\t\t}\n\t\t`,excludeAttrsSync:["tabindex"],componentName:a})),{color:u,fontSize:h}=p.cssVarList;d=`\n\t@keyframes spin {\n\t\t0% { -webkit-transform: rotate(0deg); }\n\t\t100% { -webkit-transform: rotate(360deg); }\n\t}\n\t:host([loading="true"]) ::before {\n\t\tanimation: spin 2s linear infinite;\n\t\tposition: absolute;\n\t\tcontent: '';\n\t\tz-index: 1;\n\t\tbox-sizing: border-box;\n\t\tborder-radius: 50%;\n\t\tborder-bottom-color: transparent;\n\t\tborder-left-color: transparent;\n\t\tborder-style: solid;\n\t\tcolor: var(${u});\n\t\ttop: calc(50% - (var(${h}) / 2));\n\t\tleft: calc(50% - (var(${h}) / 2));\n\t\tborder-width: calc(var(${h}) / 10);\n\t\twidth: var(${h});\n\t\theight: var(${h});\n\t}\n\t:host([disabled="true"]),\n\t:host([loading="true"]) {\n\t\tpointer-events: none;\n\t}\n\t:host([loading="true"])::part(prefix),\n\t:host([loading="true"])::part(label) {\n\t\tvisibility: hidden;\n\t}\n`},2018:(t,e,i)=>{i.r(e),i.d(e,{ButtonClass:()=>r.n}),i(1721);var r=i(9690);customElements.define(r.f,r.n)},4049:(t,e,i)=>{i.d(e,{H:()=>y,f:()=>o});var r=i(2061),n=i(4567),s=i(4201),a=i(1e3);const o=(0,n.iY)("combo-box"),{host:l,inputField:d,inputElement:p,placeholder:u,toggle:h,clearButton:c,label:m,requiredIndicator:b,helperText:g,errorMessage:v}={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)"}},y=(0,r.qC)((0,a.yk)({mappings:{hostWidth:{...l,property:"width"},hostDirection:{...l,property:"direction"},fontSize:[{},l],fontFamily:[m,u,d,g,v],labelTextColor:[{...m,property:"color"},{...b,property:"color"}],errorMessageTextColor:{...v,property:"color"},inputHeight:{...d,property:"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:{...b,property:"content"},inputValueTextColor:{...d,property:"color"},inputPlaceholderTextColor:{...u,property:"color"},inputDropdownButtonCursor:[{...h,property:"cursor"},{...c,property:"cursor"}],inputDropdownButtonColor:[{...h,property:"color"},{...c,property:"color"}],inputDropdownButtonSize:[{...h,property:"font-size"},{...c,property:"font-size"}],inputDropdownButtonOffset:[{...h,property:"margin-right"},{...h,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"}],overlayBackground:{property:()=>y.cssVarList.overlay.backgroundColor},overlayTextColor:{property:()=>y.cssVarList.overlay.textColor},overlayBorder:{property:()=>y.cssVarList.overlay.border},overlayFontSize:{property:()=>y.cssVarList.overlay.fontSize},overlayFontFamily:{property:()=>y.cssVarList.overlay.fontFamily},overlayCursor:{property:()=>y.cssVarList.overlay.cursor},overlayItemBoxShadow:{property:()=>y.cssVarList.overlay.itemBoxShadow},overlayItemPaddingInlineStart:{property:()=>y.cssVarList.overlay.itemPaddingInlineStart},overlayItemPaddingInlineEnd:{property:()=>y.cssVarList.overlay.itemPaddingInlineEnd}}}),a.e4,(0,a.Iw)({name:"overlay",selector:"",mappings:{backgroundColor:{selector:"vaadin-combo-box-scroller"},minHeight:{selector:"vaadin-combo-box-overlay"},margin:{selector:"vaadin-combo-box-overlay"},cursor:{selector:"vaadin-combo-box-item"},fontFamily:{selector:"vaadin-combo-box-item"},textColor:{selector:"vaadin-combo-box-item",property:"color"},fontSize:{selector:"vaadin-combo-box-item"},itemBoxShadow:{selector:"vaadin-combo-box-item",property:"box-shadow"},itemPaddingInlineStart:{selector:"vaadin-combo-box-item",property:"padding-inline-start"},itemPaddingInlineEnd:{selector:"vaadin-combo-box-item",property:"padding-inline-end"}},forward:{include:!1,attributes:["size"]}}),(0,a.dj)({proxyProps:["selectionStart"],inputEvent:"selected-item-changed"}),a.Ae,(t=>class extends t{#r=({displayName:t,value:e,label:i})=>`<span data-name="${i}" data-id="${e}">${t||i}</span>`;#n;get defaultValue(){return this.getAttribute("default-value")}get renderItem(){return this.#r}set renderItem(t){this.#r=t,this.renderItems()}get data(){if(this.#n)return this.#n;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.#n=t,this.renderItems())}isValidDataType(t){const e=Array.isArray(t);return e||console.error("data 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)}handleSelectedItem(){const t=this.baseElement.selectedItem?.["data-id"];this.baseElement.selectedItem=void 0,t&&(this.value=t),this.value||this.setDefaultValue()}customValueTransformFn(t){return t}setComboBoxDescriptor(){const t=Object.getOwnPropertyDescriptor(this.inputElement.constructor.prototype,"value"),e=this;Object.defineProperties(this.inputElement,{value:{...t,set(i){if(!e.baseElement.items?.length)return;const r=e.customValueTransformFn(i)||"";r!==this.value&&t.set.call(this,r)}}})}#s(){const t=this.shadowRoot.querySelector(this.baseSelector),e=Array.from(this.children);e.length&&(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})})),t.items=e,setTimeout((()=>{this.handleSelectedItem()}),0)),t.renderer=(t,e,i)=>{t.innerHTML=i.item.outerHTML}}#a(){const t=this.baseElement.shadowRoot.querySelector("vaadin-combo-box-overlay");t._attachOverlay=()=>{t.bringToFront()},t._detachOverlay=()=>{},t._enterModalState=()=>{}}init(){super.init?.(),this.getValidity=function(){return!this.value&&this.isRequired?{valueMissing:!0}:{}},this.setComboBoxDescriptor(),this.#a(),this.renderItems(),(0,n.FX)(this,this.renderItems.bind(this),{includeAttrs:["data"]}),(0,n.P$)(this,this.#s.bind(this)),this.setDefaultValue(),this.baseElement.addEventListener("selected-item-changed",(()=>{this.dispatchEvent(new Event("input",{bubbles:!0,composed:!0}))}))}setDefaultValue(){this.value=this.defaultValue}set value(t){if(t){const e=this.baseElement.items?.find((e=>e["data-id"]===t));e&&(this.baseElement.selectedItem=e)}else this.baseElement.selectedItem=void 0}get value(){return this.baseElement.selectedItem?.["data-id"]||""}}))((0,a.DM)({slots:["","prefix"],wrappedEleName:"vaadin-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,s.bi)(y.cssVarList)}\n\t\t${(0,s.PH)("vaadin-combo-box")}\n\t\t${(0,s.jI)("vaadin-combo-box")}\n\t\t${(0,s.Pd)("vaadin-combo-box")}\n\n\t\tvaadin-combo-box {\n\t\t\tpadding: 0;\n\t\t\twidth: 100%;\n\t\t}\n\t\tvaadin-combo-box::before {\n\t\t\theight: initial;\n\t\t}\n\t\tvaadin-combo-box [slot="input"] {\n\t\t\t-webkit-mask-image: none;\n\t\t\tmin-height: 0;\n\t\t\tbox-sizing: border-box;\n\t\t}\n\n\t\tvaadin-combo-box::part(input-field) {\n\t\t\tpadding: 0;\n\t\t\tbox-shadow: none;\n\t\t}\n    ${(0,s.Wf)("vaadin-combo-box")}\n\t\t`,excludeAttrsSync:["tabindex","size","data"],componentName:o,includeForwardProps:["items","renderer","selectedItem"]}))},1294:(t,e,i)=>{i.r(e),i.d(e,{ComboBoxClass:()=>r.H}),i(7583);var r=i(4049);customElements.define(r.f,r.H)},6417:(t,e,i)=>{i.d(e,{f:()=>l,z:()=>p});var r=i(1e3),n=i(4447),s=i(2061),a=i(4567),o=i(4201);const l=(0,a.iY)("text-field"),d=["type"],p=(0,s.qC)((0,r.yk)({mappings:n.Z}),r.e4,(0,r.dj)({proxyProps:["value","selectionStart"]}),r.Ae,(t=>class extends t{static get observedAttributes(){return d.concat(t.observedAttributes||[])}attributeChangedCallback(t,e,i){super.attributeChangeCallback?.(t,e,i),"type"===t&&this.baseElement._setType(i)}}))((0,r.DM)({slots:["prefix","suffix"],wrappedEleName:"vaadin-text-field",style:()=>`\n\t\t\t:host {\n\t\t\t\tdisplay: inline-block;\n\t\t\t\tmax-width: 100%;\n\t\t\t\tpadding: calc(var(${p.cssVarList.inputOutlineWidth}) + var(${p.cssVarList.inputOutlineOffset}));\n        box-sizing: border-box;\n\t\t\t}\n      ${(0,o.Wf)("vaadin-text-field")}\n\t\t\t${(0,o.bi)(p.cssVarList)}\n\t\t\t${(0,o.wm)("vaadin-text-field",p.cssVarList)}\n\t\t`,excludeAttrsSync:["tabindex"],componentName:l}))},9357:(t,e,i)=>{i.r(e),i.d(e,{TextFieldClass:()=>r.z}),i(9789);var r=i(6417);customElements.define(r.f,r.z)},4447:(t,e,i)=>{i.d(e,{Z:()=>c});const{host:r,label:n,placeholder:s,requiredIndicator:a,inputField:o,input:l,helperText:d,errorMessage:p,disabledPlaceholder:u,inputDisabled:h}={host:{selector:()=>":host"},label:{selector:"::part(label)"},requiredIndicator:{selector:"[required]::part(required-indicator)::after"},placeholder:{selector:"> input:placeholder-shown"},disabledPlaceholder:{selector:"> input:disabled::placeholder"},inputField:{selector:"::part(input-field)"},input:{selector:"input"},inputDisabled:{selector:"input:disabled"},helperText:{selector:"::part(helper-text)"},errorMessage:{selector:"::part(error-message)"}},c={fontSize:[{},r],fontFamily:[n,o,d,p],hostWidth:{...r,property:"width"},hostMinWidth:{...r,property:"min-width"},hostDirection:{...r,property:"direction"},inputBackgroundColor:{...o,property:"background-color"},labelTextColor:[{...n,property:"color"},{...a,property:"color"},{...n,property:"-webkit-text-fill-color"},{...a,property:"-webkit-text-fill-color"}],errorMessageTextColor:{...p,property:"color"},helperTextColor:{...d,property:"-webkit-text-fill-color"},inputValueTextColor:[{...o,property:"color"},{...h,property:"-webkit-text-fill-color"}],inputCaretTextColor:{...l,property:"color"},labelRequiredIndicator:{...a,property:"content"},inputBorderColor:{...o,property:"border-color"},inputBorderWidth:{...o,property:"border-width"},inputBorderStyle:{...o,property:"border-style"},inputBorderRadius:{...o,property:"border-radius"},inputHeight:{...o,property:"height"},inputHorizontalPadding:[{...l,property:"padding-left"},{...l,property:"padding-right"}],inputOutlineColor:{...o,property:"outline-color"},inputOutlineStyle:{...o,property:"outline-style"},inputOutlineWidth:{...o,property:"outline-width"},inputOutlineOffset:{...o,property:"outline-offset"},inputTextAlign:{...l,property:"text-align"},inputPlaceholderColor:[{...s,property:"color"},{...u,property:"-webkit-text-fill-color"}]}},2138:(t,e,i)=>{i.d(e,{f:()=>o,k:()=>d});var r=i(1e3),n=i(2561),s=i(2061),a=i(4567);const o=(0,a.iY)("text");class l extends((0,n.s)({componentName:o,baseSelector:":host > slot"})){constructor(){super(),this.attachShadow({mode:"open"}).innerHTML='\n\t\t<style>\n\t\t\t:host {\n\t\t\t\tdisplay: inline-block;\n\t\t\t}\n\t\t\t:host > slot {\n\t\t\t\twidth: 100%;\n\t\t\t\tdisplay: inline-block;\n\t\t\t}\n\t\t</style>\n\t\t<slot part="text-wrapper"></slot>\n\t\t'}}const d=(0,s.qC)((0,r.yk)({mappings:{hostWidth:{selector:()=>":host",property:"width"},hostDirection:{selector:()=>":host",property:"direction"},fontSize:{},textColor:{property:"color"},textLineHeight:{property:"line-height"},textLetterSpacing:{property:"letter-spacing"},textShadow:{},textAlign:{},textTransform:{},fontFamily:{},fontStyle:{},fontWeight:{},borderWidth:{},borderStyle:{},borderColor:{}}}),r.e4,r.Ae,(t=>class extends t{get hideWhenEmpty(){return"true"===this.getAttribute("hide-when-empty")}init(){super.init(),(0,a.P$)(this,(()=>{const t=!!this.childNodes.length;this.style.display=!t&&this.hideWhenEmpty?"none":""}))}}))(l)},1876:(t,e,i)=>{i.r(e),i.d(e,{TextClass:()=>r.k});var r=i(2138);customElements.define(r.f,r.k)},6751:(t,e,i)=>{i.r(e);var r=i(3878),n=i(4567);const s=(0,n.iY)("mapping-item"),a=["size","bordered","readonly","full-width","disabled"],o=(0,r.P)({componentName:s,baseSelector:"div"});customElements.define(s,class extends o{static get observedAttributes(){return[].concat(o.observedAttributes||[],a,["separator","options","invalid","disabled"])}get separator(){return this.getAttribute("separator")||"map to"}get value(){const t=this.attributeInput.value,e=this.valueInput.value;return t&&e?{[t]:e}:null}set value(t){if(1!==Object.entries(t).length)return void console.error("descope-mapping item expected expects only one key-value pair in the value but received: ",t);const[e,i]=Object.entries(t)[0];this.valueInput.value=i,this.attributeInput.value=e,this.dispatchEvent(new InputEvent("input",{bubbles:!0,composed:!0}))}constructor(){super(),this.attachShadow({mode:"open"}).innerHTML=`\n      <style>\n        .wrapper {\n          display: flex;\n        }\n        .separator {\n          text-align: center;\n          flex-shrink: 0;\n        }\n      </style>\n      <div class="wrapper" part="wrapper">\n        <descope-text-field required="true"></descope-text-field>\n        <div class="separator" part="separator">${this.separator}</div>\n        <descope-combo-box\n          item-label-path="data-name"\n          item-value-path="data-id"\n          required="true"\n        >\n        </descope-combo-box>\n        <descope-button variant="link" mode="primary">\n          <vaadin-icon icon="vaadin:minus"></vaadin-icon>\n        </descope-button>\n      </div>\n\t`,this.valueInput=this.shadowRoot.querySelector("descope-text-field"),this.attributeInput=this.shadowRoot.querySelector("descope-combo-box"),this.inputs=[this.valueInput,this.attributeInput],this.removeButton=this.shadowRoot.querySelector("descope-button"),(0,n.oP)(this,this.valueInput,{includeAttrs:a}),(0,n.oP)(this,this.attributeInput,{includeAttrs:[...a,"options"],mapAttrs:{options:"data"}}),(0,n.oP)(this,this.removeButton,{includeAttrs:["disabled"]})}initRemoveButton(){this.removeButton.addEventListener("click",(()=>this.dispatchEvent(new CustomEvent("mapping-item-removed",{bubbles:!0,composed:!0}))))}init(){super.init?.(),this.initRemoveButton()}getValidity(){const t=this.attributeInput.value,e=this.valueInput.value;return t&&e?{}:{badInput:!0}}reportValidity(){this.inputs.forEach((t=>t.reportValidity()))}focus(){(this.checkValidity()||!this.valueInput.checkValidity()?this.valueInput:this.attributeInput).focus()}handleSeparatorChange(){this.shadowRoot.querySelector(".separator").textContent=this.separator}#o(t){"true"===t&&(this.valueInput.value||(this.valueInput.setAttribute("invalid","true"),this.valueInput.setAttribute("error-message",this.defaultErrorMsgValueMissing)),this.attributeInput.value||(this.attributeInput.setAttribute("invalid","true"),this.attributeInput.setAttribute("error-message",this.defaultErrorMsgValueMissing)))}attributeChangedCallback(t,e,i){super.attributeChangedCallback?.(t,e,i),"separator"===t&&this.handleSeparatorChange(),"invalid"===t&&this.#o(i)}})},7819:(t,e,i)=>{i.d(e,{Z:()=>o,f:()=>s});var r=i(3878),n=i(4567);const s=(0,n.iY)("mappings-field-internal"),a=(0,r.P)({componentName:s,baseSelector:"div"}),o=class extends a{#l;static get observedAttributes(){return[].concat(a.observedAttributes||[],["label-value","label-attr","button-label","invalid","readonly","disabled"])}isValidDataType(t){try{return t.every((t=>"object"==typeof t&&!Array.isArray(t)&&1===Object.getOwnPropertyNames(t).length&&"string"==typeof t[Object.keys(t)[0]]&&""!==t[Object.keys(t)[0]].trim()))}catch(t){return!1}}get labelValue(){return this.getAttribute("label-value")||"Value"}get labelAttr(){return this.getAttribute("label-attr")||"Attribute"}get buttonLabel(){return this.getAttribute("button-label")||"Add mapping"}get options(){return this.getAttribute("options")||[]}addNewMappingItem(t){const e=document.createElement("descope-mapping-item");return e.setAttribute("bordered","true"),this.mappingsContainerEle.appendChild(e),(0,n.oP)(this,e,{includeAttrs:["size","full-width","separator","options","disabled"]}),setTimeout((()=>{this.setCustomValidity(""),e.addEventListener("mapping-item-removed",(()=>{e===this.#l&&(this.resetInvalidIndication(),this.#l=void 0),e.remove(),this.setCustomValidity("")})),this.dispatchEvent(new CustomEvent("mapping-item-added",{bubbles:!0,composed:!0})),t&&e.focus()}),0),e}get items(){return Array.from(this.mappingsContainerEle.querySelectorAll("descope-mapping-item"))}get value(){return this.items.reduce(((t,e)=>e.value?[...t,e.value]:t),[])}set value(t){if(!this.isValidDataType(t))return void console.error("received invalid value to set - should be an array of objects with one key-value pair");const e=this.items;if(e.length>t.length)for(let i=t.length;i<e.length;i++)this.mappingsContainerEle.removeChild(e[i]);t.forEach(((t,i)=>{const r=e[i];if(r)r.value=t;else{const e=this.addNewMappingItem(!1);setTimeout((()=>{e.value=t}),0)}}))}constructor(){super(),this.innerHTML='\n      <div class="labels-container" part="labels"></div>\n      <div class="mappings-container"></div>\n      <div class="button-container"></div>\n    ',this.labelsEle=this.querySelector(".labels-container"),this.mappingsContainerEle=this.querySelector(".mappings-container"),this.buttonContainer=this.querySelector(".button-container")}initLabels(){this.labelsEle.innerHTML=`\n      <descope-text variant="body2" part="value-label">${this.labelValue}</descope-text>\n      <descope-text variant="body2" part="attr-label">${this.labelAttr}</descope-text>\n    `}initAddButton(){this.buttonContainer.innerHTML=`\n      <descope-button variant="link" mode="primary" disabled="${this.isDisabled}">\n        <vaadin-icon icon="vaadin:plus"></vaadin-icon>\n        ${this.buttonLabel}\n      </descope-button>\n    `;const t=this.querySelector("descope-button");t.onclick=()=>{this.addNewMappingItem(!0)},(0,n.oP)(this,t,{includeAttrs:["disabled"]})}#d(){this.labelsEle.style.display=this.items.length?"grid":"none"}init(){this.addEventListener("focus",(t=>{t.isTrusted&&(this.#l||this.items[0]||this.querySelector("descope-button")).focus()})),super.init?.(),this.initLabels(),this.initAddButton(),this.addEventListener("input",(()=>{this.mappingsContainerEle.contains(this.#l)&&this.#l?.checkValidity()&&(this.resetInvalidIndication(),this.#l.removeAttribute("invalid"),this.#l=void 0)})),(0,n.P$)(this.mappingsContainerEle,this.#d.bind(this))}resetInvalidIndication(){this.removeAttribute("invalid")}getValidity(){const t=this.items.find((t=>!t.checkValidity()));return t?t.validity:{}}#p(t){t&&(this.#l=this.items.find((t=>!t.checkValidity())),this.#l?.reportValidity(),this.#l?.setAttribute("invalid","true"))}attributeChangedCallback(t,e,i){super.attributeChangedCallback?.(t,e,i),"label-value"!==t&&"label-attr"!==t||this.initLabels(),"button-label"===t&&this.initAddButton(),"invalid"===t&&this.#p("true"===i),"readonly"===t&&this.toggleAttribute("inert","true"===i)}}},3820:(t,e,i)=>{i.r(e);var r=i(7819);customElements.define(r.f,r.Z)},5894:(t,e,i)=>{i.r(e),i.d(e,{MappingsFieldClass:()=>f}),i(9381),i(7911),i(6594);var r=i(1e3),n=i(2138),s=i(2061),a=i(4567),o=i(7819);const l=(0,a.iY)("mappings-field"),{host:d,helperText:p,errorMessage:u,mappingItem:h,labels:c,labelsText:m,valueLabel:b,attrLabel:g,separator:v,labelsContainer:y}={host:{selector:()=>":host"},helperText:{selector:"::part(helper-text)"},errorMessage:{selector:"::part(error-message)"},mappingItem:{selector:"descope-mapping-item::part(wrapper)"},labels:{selector:'descope-mappings-field-internal [part="labels"] descope-text'},labelsText:{selector:'descope-mappings-field-internal [part="labels"] descope-text::part(text-wrapper)'},valueLabel:{selector:'descope-mappings-field-internal [part="labels"] [part="value-label"]'},attrLabel:{selector:'descope-mappings-field-internal [part="labels"] [part="attr-label"]'},separator:{selector:"descope-mapping-item::part(separator)"},labelsContainer:{selector:'descope-mappings-field-internal [part="labels"]'}},f=(0,s.qC)((0,r.yk)({mappings:{hostWidth:{...d,property:"width"},hostDirection:{...d,property:"direction"},fontSize:[{},d,{...v,property:"margin-top"}],fontFamily:[p,u,c],separatorFontSize:{...v,property:"font-size"},labelsFontSize:{...m,property:"font-size"},labelsLineHeight:[{...m,property:"line-height"},{...c,property:"line-height"}],labelTextColor:{...c,property:n.k.cssVarList.textColor},itemMarginBottom:{...h,property:"margin-bottom"},valueLabelMinWidth:{...b,property:"min-width"},attrLabelMinWidth:{...g,property:"min-width"},labelsMarginBottom:{...y,property:"margin-bottom"},separatorWidth:{},removeButtonWidth:{}}}),r.e4,(0,r.dj)({proxyProps:["value","selectionStart"],inputEvent:"input",proxyParentValidation:!0}),r.Ae,(t=>class extends t{get defaultValues(){const t=this.getAttribute("default-values");if(t)try{return JSON.parse(t)}catch(t){console.error('could not parse data string from attribute "default-values" -',t.message)}return[]}setDefaultValues(){const t=this.defaultValues;Object.keys(t).length>0&&(this.inputElement.value=t)}init(){super.init?.();const t=document.createElement("template");t.innerHTML=`\n      <${o.f}\n        tabindex="-1"\n      ></${o.f}>\n      `,this.baseElement.appendChild(t.content.cloneNode(!0)),this.inputElement=this.shadowRoot.querySelector(o.f),(0,a.oP)(this,this.inputElement,{includeAttrs:["size","full-width","label-value","label-attr","button-label","separator","options","default-values","invalid","readonly","disabled"]}),(0,a.tg)(this,this.inputElement,{includeAttrs:["invalid"]}),this.setDefaultValues()}}))((0,r.DM)({slots:[],wrappedEleName:"vaadin-custom-field",style:()=>`\n      :host {\n        display: inline-flex;\n        max-width: 100%;\n        direction: ltr;\n      }\n      vaadin-custom-field {\n        line-height: unset;\n        width: 100%;\n      }\n\n      descope-mappings-field-internal [part="labels"] {\n        display: none;\n        grid-template-columns: 1fr var(${f.cssVarList.separatorWidth}) 1fr var(${f.cssVarList.removeButtonWidth});\n      }\n\n      descope-mappings-field-internal [part="labels"] [part="value-label"],\n      descope-mappings-field-internal [part="labels"] [part="attr-label"] {\n        ${n.k.cssVarList.fontWeight}: 500;\n      }\n\n      descope-mappings-field-internal [part="labels"] [part="value-label"] {\n        grid-column: 1 / span 1;\n      }\n\n      descope-mappings-field-internal [part="labels"] [part="attr-label"] {\n        grid-column: 3 / span 1;\n      }\n\n      descope-mapping-item::part(wrapper) {\n        display: grid;\n        grid-template-columns: 1fr var(${f.cssVarList.separatorWidth}) 1fr var(${f.cssVarList.removeButtonWidth});\n      }\n    `,excludeAttrsSync:["tabindex","label-value","label-attr","button-label","options","error-message"],componentName:l}));i(1876),i(2018),i(9357),i(1294),i(3820),i(6751),customElements.define(l,f)},5279:(t,e,i)=>{i.d(e,{gh:()=>r,k4:()=>n,qM:()=>a,qg:()=>s});const r="descope",n=3,s="host",a="@"},4567:(t,e,i)=>{i.d(e,{Db:()=>h,FX:()=>s,P$:()=>a,Tk:()=>p,iY:()=>d,oP:()=>u,tg:()=>l});var r=i(2061),n=i(5279);const s=(t,e,{excludeAttrs:i=[],includeAttrs:r=[]})=>{const n=Array.from(t.attributes).filter((t=>!i.includes(t.name)&&(!r.length||r.includes(t.name)))).map((t=>t.name));e(n),new MutationObserver((t=>{t.forEach((t=>{"attributes"!==t.type||i.includes(t.attributeName)||r.length&&!r.includes(t.attributeName)||e([t.attributeName])}))})).observe(t,{attributes:!0})},a=(t,e)=>{e({addedNodes:Array.from(t.children),removedNodes:[]}),new MutationObserver((t=>{t.forEach((t=>{"childList"===t.type&&e(t)}))})).observe(t,{childList:!0})},o=(t,e,i={})=>r=>{r.forEach((r=>{const n=i[r]||r,s=t.getAttribute(r);null!==s?e.getAttribute(n)!==s&&e.setAttribute(n,s):e.removeAttribute(n)}))},l=(t,e,i)=>{s(t,o(t,e),i),s(e,o(e,t),i)},d=t=>(0,r.E3)(n.gh,t),p=(...t)=>`--${(0,r.E3)(...t)}`,u=(t,e,i={})=>{s(t,o(t,e,i.mapAttrs),i)},h=(t,e,i=[])=>{if(!i.length)return;const r=i.reduce(((e,i)=>Object.assign(e,{[i]:{get:()=>t[i],set(e){t[i]=e}}})),{});Object.defineProperties(e,r)}},2061:(t,e,i)=>{i.d(e,{E3:()=>n,GL:()=>r,lo:()=>o,mf:()=>a,qC:()=>s});const r=t=>t.replace(/([a-z])([A-Z])/g,"$1-$2").replace(/[\s_.]+/g,"-").toLowerCase(),n=(...t)=>r(t.filter((t=>!!t)).join("-")),s=(...t)=>e=>t.reduceRight(((t,e)=>e(t)),e),a=t=>"function"==typeof t,o=(t,e)=>{if(!Array.isArray(t)||!Array.isArray(e))return!1;if(t.length!==e.length)return!1;const i=t.slice().sort(),r=e.slice().sort();for(let t=0;t<i.length;t++)if(i[t]!==r[t])return!1;return!0}},7878:(t,e,i)=>{function r(t,e={}){const i=new Event(t,e);this[`on${t}`]?.(i),this.dispatchEvent(i)}i.d(e,{C:()=>r})},4201:(t,e,i)=>{i.d(e,{B:()=>p,DY:()=>l,PH:()=>d,Pd:()=>a,TX:()=>n,Wf:()=>h,bi:()=>r,jI:()=>o,jl:()=>s,wm:()=>u});const r=t=>`\n    :host {\n        padding: calc(var(${t.inputOutlineWidth}) + var(${t.inputOutlineOffset}))\n    }\n`,n=t=>`\n    ${t} {\n        margin: 0;\n        padding: 0;\n        width: 100%;\n        height: 100%;\n        box-sizing: border-box;\n    }\n`,s=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`,o=(t,e="input")=>`\n    ${t}[disabled] > ${e}:placeholder-shown,\n\t${t}[readonly] > ${e}:placeholder-shown {\n\t\topacity: 1;\n\t}\n`,l=()=>"\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`,u=(t,e)=>`\n    ${n(t)}\n    ${a(t)}\n    ${o(t)}\n    ${s(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`,h=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`},357:(t,e,i)=>{i.d(e,{A:()=>r});const r=t=>class extends t{#u(){const e=this.localName;if(!t.componentName)throw Error('component name is not defined on super class, make sure you have a static get for "componentName"');if(e!==t.componentName)throw Error(`component name mismatch, expected "${t.componentName}", current "${e}"`)}init(){super.init?.(),this.#u()}}},2666:(t,e,i)=>{i.d(e,{_:()=>r});const r=t=>class extends t{init(){super.init?.(),this.baseElement.addEventListener("mouseover",(t=>{this.setAttribute("hover","true"),t.target.addEventListener("mouseleave",(()=>this.removeAttribute("hover")),{once:!0})}))}}},1e3:(t,e,i)=>{i.d(e,{li:()=>A,Ae:()=>x.A,DM:()=>c,yk:()=>d,e4:()=>p,_A:()=>E._,mE:()=>I,wX:()=>b,QT:()=>S.Q,Iw:()=>C,dj:()=>f});var r=i(5279),n=i(2061),s=i(4567),a=i(5561);class o{constructor(){this.styleMap=new Map}add(t,e,i){this.styleMap.has(t)||this.styleMap.set(t,[]),this.styleMap.set(t,[...this.styleMap.get(t),{property:e,value:i}])}toString(){return Array.from(this.styleMap.entries()).reduce(((t,[e,i])=>`${t}${e} { \n${i.map((({property:t,value:e})=>`${t}: ${e}`)).join(";\n")} \n}\n\n`),"")}}const l=(t,e)=>Object.keys(e).reduce(((e,i)=>Object.assign(e,{[i]:(0,s.Tk)(t,i)})),{}),d=({mappings:t={},componentNameOverride:e=""})=>i=>{const d=e||i.componentName;return class extends i{static get cssVarList(){return{...i.cssVarList,...l(d,{...t})}}#h;#c;#m;#b;#g;#v;#y;#f;#x;constructor({getRootElement:e,componentNameSuffix:i="",themeSection:s=r.qg,baseSelector:a}={}){super(),this.#b=i,this.#g=s,this.#y=a??this.baseSelector,this.#x=e,this.#f=Object.keys(t).map((t=>(0,n.E3)("st",i,t)))}get#E(){return a.componentsThemeManager.currentTheme?.[d]||""}#w(){this.#c.innerHTML=this.#E[this.#g]}#C(){this.#c=document.createElement("style"),this.#c.id=`style-mixin-theme__${d}`,this.#v.prepend(this.#c),this.#m=a.componentsThemeManager.onCurrentThemeChange(this.#w.bind(this)),this.#w()}#A(){if(this.#f.length){this.#h=document.createElement("style"),this.#h.id=`style-mixin-overrides__${d}`;const i=(t=d,e=r.k4,Array(e).fill(`.${t}`).join(""));this.#h.innerText=`:host(${i}) {}`,this.#v.append(this.#h)}var t,e}#S(t,e){const i=this.#h?.sheet?.cssRules[0].style;if(!i)return;const r=(0,s.Tk)(d,t.replace(new RegExp("^st-"),""));e?i?.setProperty(r,e):(i?.removeProperty(r),this.removeAttribute(t))}#I(t=[]){let e=!1;t.forEach((t=>{this.#f.includes(t)&&(this.#S(t,this.getAttribute(t)),e=!0)})),e&&(this.#h.innerHTML=this.#h?.sheet?.cssRules[0].cssText)}#V(){if(Object.keys(t).length){const e=document.createElement("style");e.id=`style-mixin-mappings__${d}`,e.innerHTML=((t,e,i)=>{const r=new o;return Object.keys(i).forEach((a=>{const o=((t,e)=>{const i={selector:"",property:(0,n.GL)(t)};return e&&Object.keys(e).length?Array.isArray(e)?e.map((t=>({...i,...t}))):[{...i,...e}]:[i]})(a,i[a]),l=(0,s.Tk)(t,a);o.forEach((({selector:t,property:i,important:s,fallback:a})=>{r.add(((t="",e="")=>(0,n.mf)(e)?e(t):`${t}${/^[A-Za-z]/.test(e)?` ${e}`:e}`)(e,t),(0,n.mf)(i)?i():i,((t,e)=>`var(${t}${e?`, ${e}`:""})`)(l,a)+(s?"!important":""))}))})),r.toString()})((0,n.E3)(d,this.#b),this.#y,t),this.#v.prepend(e)}}#$(t){(this.#v.classList||this.#v.host.classList).add(t)}async init(){super.init?.(),this.shadowRoot.isConnected&&(this.#v=await(this.#x?.(this))||this.shadowRoot,this.#$(d),this.#V(),this.#C(),this.#A(),(0,s.FX)(this,this.#I.bind(this),{}))}disconnectedCallback(){super.disconnectedCallback?.(),this.#m?.()}}},p=t=>class extends t{#k=null;static get observedAttributes(){return[...t.observedAttributes||[],"draggable"]}constructor(){super(),this.#k=document.createElement("style"),this.#k.innerText="* { cursor: inherit!important }"}#L(t){t?this.shadowRoot.appendChild(this.#k):this.#k.remove()}get isDraggable(){return this.hasAttribute("draggable")&&"false"!==this.getAttribute("draggable")}init(){this.addEventListener("mousedown",(t=>{if(this.isDraggable){const e=this.baseElement.getAttribute("tabindex");this.baseElement.setAttribute("tabindex","-1");const i=()=>{e?this.baseElement.setAttribute("tabindex",e):this.baseElement.removeAttribute("tabindex"),t.target.removeEventListener("mouseup",i),t.target.removeEventListener("dragend",i)};t.target.addEventListener("mouseup",i,{once:!0}),t.target.addEventListener("dragend",i,{once:!0})}})),super.init?.()}attributeChangedCallback(t,e,i){super.attributeChangedCallback?.(t,e,i),"draggable"===t&&this.#L("true"===i)}};var u=i(2561),h=i(7878);const c=({componentName:t,wrappedEleName:e,slots:i=[],style:r,excludeAttrsSync:a=[],includeAttrsSync:o=[],includeForwardProps:l=[],delegatesFocus:d=!0})=>{class p extends((0,u.s)({componentName:t,baseSelector:e})){#M=h.C.bind(this,"blur");#T=h.C.bind(this,"focus");constructor(){super().attachShadow({mode:"open",delegatesFocus:d}).innerHTML=`\n\t\t\t<style id="create-proxy">${(0,n.mf)(r)?r():r}</style>\n\t\t\t<${e}>\n\t\t\t${i.map((t=>`<slot ${t?`name="${t}" slot="${t}"`:""} ></slot>`)).join("")}\n\t\t\t</${e}>\n\t\t`}init(){super.init?.(),this.baseElement.addEventListener("blur",(t=>{this.#M()})),this.baseElement.addEventListener("focus",(t=>{this.#T()})),(0,s.Db)(this.baseElement,this,l),(0,s.tg)(this.baseElement,this,{excludeAttrs:a,includeAttrs:o})}}return p};i(5910);const m=["required","pattern"],b=t=>class extends t{static get observedAttributes(){return[...t.observedAttributes||[],...m]}static get formAssociated(){return!0}#_;get internals(){return this.#_}set internals(t){this.#_=t}constructor(){super(),this.#_=this.attachInternals()}get defaultErrorMsgValueMissing(){return"Please fill out this field."}get defaultErrorMsgPatternMismatch(){return"Please match the requested format."}get defaultErrorMsgTooShort(){return`Minimum length is ${this.getAttribute("minlength")}.`}get defaultErrorMsgTooLong(){return`Maximum length is ${this.getAttribute("maxlength")}.  `}get defaultErrorMsgRangeUnderflow(){return`At least ${this.getAttribute("min-items-selection")} items are required.`}get defaultErrorMsgRangeOverflow(){return`At most ${this.getAttribute("max-items-selection")} items are allowed.`}getErrorMessage(t){const{valueMissing:e,patternMismatch:i,typeMismatch:r,stepMismatch:n,tooShort:s,tooLong:a,rangeOverflow:o,rangeUnderflow:l,badInput:d,customError:p}=t;switch(!0){case e:return this.getAttribute("data-errormessage-value-missing")||this.defaultErrorMsgValueMissing;case i||r||n||d:return this.getAttribute("data-errormessage-pattern-mismatch")||this.defaultErrorMsgPatternMismatch;case s:return this.getAttribute("data-errormessage-pattern-mismatch-too-short")||this.defaultErrorMsgTooShort;case a:return this.getAttribute("data-errormessage-pattern-mismatch-too-long")||this.defaultErrorMsgTooLong;case l:return this.defaultErrorMsgRangeUnderflow;case o:return this.defaultErrorMsgRangeOverflow;case p:return this.validationMessage;default:return""}}#O(){const t=this.isReadOnly?{}:this.getValidity();this.#_.setValidity(t,this.getErrorMessage(t),this.validationTarget)}get validationMessage(){return this.#_.validationMessage}getValidity(){console.warn("getValidity","is not implemented")}checkValidity(){return this.#_.validity.valid}reportValidity(){return this.#_.reportValidity()}get validity(){return this.#_.validity}get validationTarget(){return this.inputElement}setCustomValidity(t){t?this.#_.setValidity({customError:!0},t,this.validationTarget):(this.#_.setValidity({}),this.#O())}get isRequired(){return this.hasAttribute("required")&&"false"!==this.getAttribute("required")}get isReadOnly(){return this.hasAttribute("readonly")&&"false"!==this.getAttribute("readonly")}get isDisabled(){return this.hasAttribute("disabled")&&"false"!==this.getAttribute("disabled")}get pattern(){return this.getAttribute("pattern")}get form(){return this.#_.form}attributeChangedCallback(t,e,i){super.attributeChangedCallback?.(t,e,i),m.includes(t)&&this.#O()}init(){super.init?.(),this.addEventListener("change",this.#O),this.addEventListener("invalid",(t=>t.stopPropagation())),this.addEventListener("input",this.#O),setTimeout((()=>this.#O()))}},g=["invalid","required"],v=t=>{if(!t)return;let e=t;for(let t=0;t<10;t++)if([e]=e.assignedElements(),"slot"!==e.localName)return e},y=({proxyProps:t=[],inputEvent:e="input",triggerValidationEvents:i=[],proxyParentValidation:r=!1})=>n=>class extends(b(n)){static get observedAttributes(){return[...n.observedAttributes||[],...g]}#P;#q=h.C.bind(this,"change");constructor(){super(),this.#P=super.inputElement}warnIfInputElementIsMissing(){clearTimeout(this.inputElementTimerId),this.inputElementTimerId=setTimeout((()=>{!this.#P&&console.warn(this.localName,"no input was found")}),0)}get inputElement(){if(this.#P)return this.#P;this.warnIfInputElementIsMissing();const t=this.baseElement.shadowRoot?.querySelector('slot[name="input"]'),e=this.baseElement.shadowRoot?.querySelector('slot[name="textarea"]');return this.#P=v(t)||v(e),this.#P}set inputElement(t){this.#P=t}getValidity(){return this.inputElement?.validity||{}}#z(){this.setAttribute("error-message",this.validationMessage)}reportValidity=()=>{this.inputElement.setCustomValidity(""),this.setCustomValidity(""),this.checkValidity()||(this.setAttribute("invalid","true"),this.#z(),this.focus())};defaultReportValidity(){return super.reportValidity()}init(){if(super.init?.(),this.baseElement._setInvalid=function(t){!t&&this._shouldSetInvalid(t)&&(this.invalid=t)},i.forEach((t=>{this.baseElement?.addEventListener(t,(()=>{this.inputElement?.setCustomValidity("")}))})),setTimeout((()=>{(Array.isArray(e)?e:[e]).forEach((t=>{this.baseElement?.addEventListener(t,(()=>{this.baseElement.checkValidity()?this.removeAttribute("invalid"):this.#z()}))})),this.baseElement.addEventListener("change",(()=>{this.#q()})),this.addEventListener("invalid",(()=>{this.checkValidity()||this.setAttribute("invalid","true"),this.#z()})),t.forEach((t=>{var e,i;e=this.inputElement,i=t,Object.defineProperty(this,i,{set(t){e[i]=t},get:()=>e[i],configurable:!0})})),this.setSelectionRange=this.inputElement.setSelectionRange?.bind(this.inputElement),(0,s.oP)(this,this.inputElement,{includeAttrs:["inputmode"]})})),r){const t=this.inputElement.internals,e=this;this.inputElement.internals=new Proxy(t,{get:(t,i)=>"function"==typeof t[i]&&"setValidity"===i?(...r)=>{if(3===r.length){const t=r.slice(0,r.length-1);t.push(e.inputElement),e.internals[i](...t)}else e.internals[i](...r);return t[i](...r)}:"function"==typeof t[i]?(...r)=>(e.internals[i](...r),t[i](...r)):t[i]})}}},f=t=>(0,n.qC)(y(t),d({componentNameOverride:(0,s.iY)("input-wrapper")}));var x=i(357),E=i(2666);const w=t=>async e=>{const i=await t(e);return new Promise((t=>{let e=0;const r=()=>{if(e>20)return console.error("could not get shadow root for element",i),void t(i);e++,i?.shadowRoot?t(i.shadowRoot):setTimeout(r)};r()}))},C=({name:t,selector:e,mappings:i={},forward:{attributes:a=[],include:o=!0}={}})=>p=>{const u=t||(t=>t.replace(/[^\w\s]/gi,""))(e),h=d({mappings:i})(p);return class extends h{static get cssVarList(){return{...h.cssVarList,[u]:l((0,n.E3)(p.componentName,"_"+u),i)}}#N;constructor(){const t=w((async t=>{const i=t.shadowRoot.querySelector(t.baseSelector);return e?(await w((()=>i))(t)).querySelector(e):i}));super({getRootElement:t,componentNameSuffix:"_"+u,themeSection:r.qM+u,baseSelector:":host"}),this.#N=t(this).then((t=>t.host))}async#D(){const t=await this.#N;t.onmouseenter=t=>{t.target.setAttribute("hover","true")},t.onmouseleave=t=>{t.target.removeAttribute("hover")}}async init(){super.init?.();const t=await this.#N;(0,s.oP)(this,t,{[o?"includeAttrs":"excludeAttrs"]:a}),this.#D()}}},A=t=>class extends t{#q=h.C.bind(this,"change");init(){super.init?.(),this.prevValue=this.value,this.addEventListener("change",(t=>{t.stopPropagation()})),this.addEventListener("blur",(()=>{this.value!==this.prevValue&&(this.#q(),this.prevValue=this.value)}))}};var S=i(8084);const I=t=>class extends t{init(){this.#R(),super.init?.()}#R(){["blur","focus","focusin","focusout"].forEach((t=>{this.addEventListener(t,(t=>{t.isTrusted&&t.target===this&&t.stopImmediatePropagation()}))}))}handleFocusEventsDispatching(t){let e;t?.forEach((t=>{t?.addEventListener("focusout",(t=>{t.stopImmediatePropagation(),e=setTimeout((()=>{e=null,h.C.call(this,"blur"),h.C.call(this,"focusout",{bubbles:!0})}))}));const i=t=>{t.stopImmediatePropagation(),clearTimeout(e),e||(h.C.call(this,"focus"),h.C.call(this,"focusin",{bubbles:!0}))};t?.addEventListener("focusin",i),t?.addEventListener("focus",i)}))}handleInputEventDispatching(){let t=this.value;this.addEventListener("input",(e=>{t===this.value?e.stopImmediatePropagation():t=this.value}))}}},8084:(t,e,i)=>{i.d(e,{Q:()=>s});var r=i(4567);const n=["readonly","focused","invalid","has-label","required","disabled","checked","has-helper","has-value","step-buttons-visible","hover","has-error-message","focus-ring","opened","active","password-visible","opening","closing","has-no-options"],s=t=>class extends t{init(){super.init?.(),(0,r.FX)(this,(t=>t.forEach((t=>{const e=this.getAttribute(t);(t=>n.includes(t))(t)?""===e?this.setAttribute(t,"true"):"false"===e&&this.removeAttribute(t):e||console.warn(`attribute "${t}" has no value, should it be added to the boolean attributes list?`)}))),{})}}},9381:(t,e,i)=>{i(1195),i(9098),i(9416),i(4173);var r=i(2982),n=i(1251),s=i(6570);const a=s.iv`
   :host {
     --lumo-text-field-size: var(--lumo-size-m);
     color: var(--lumo-body-text-color);
@@ -123,4 +123,4 @@
       </div>
 
       <slot name="tooltip"></slot>
-    `}}(0,l.M)(f),i(7911),i(6594);var x=i(1e3),E=i(2138),w=i(2061),C=i(4567),A=i(7819);const S=(0,C.iY)("mappings-field"),{host:I,helperText:V,errorMessage:$,mappingItem:k,labels:L,valueLabel:M,attrLabel:T,separator:_,labelsContainer:O}={host:{selector:()=>":host"},helperText:{selector:"::part(helper-text)"},errorMessage:{selector:"::part(error-message)"},mappingItem:{selector:"descope-mapping-item::part(wrapper)"},labels:{selector:'descope-mappings-field-internal [part="labels"] descope-text'},valueLabel:{selector:'descope-mappings-field-internal [part="labels"] [part="value-label"]'},attrLabel:{selector:'descope-mappings-field-internal [part="labels"] [part="attr-label"]'},separator:{selector:"descope-mapping-item::part(separator)"},labelsContainer:{selector:'descope-mappings-field-internal [part="labels"]'}},P=(0,w.qC)((0,x.yk)({mappings:{hostWidth:{...I,property:"width"},hostDirection:{...I,property:"direction"},fontSize:[{},I,{..._,property:"margin-top"}],fontFamily:[V,$,L],separatorFontSize:{..._,property:"font-size"},labelTextColor:{...L,property:E.k.cssVarList.textColor},itemMarginBottom:{...k,property:"margin-bottom"},valueLabelMinWidth:{...M,property:"min-width"},attrLabelMinWidth:{...T,property:"min-width"},labelsMarginBottom:{...O,property:"margin-bottom"},separatorWidth:{},removeButtonWidth:{}}}),x.e4,(0,x.dj)({proxyProps:["value","selectionStart"],inputEvent:"input",proxyParentValidation:!0}),x.Ae,(t=>class extends t{get defaultValues(){const t=this.getAttribute("default-values");if(t)try{return JSON.parse(t)}catch(t){console.error('could not parse data string from attribute "default-values" -',t.message)}return[]}setDefaultValues(){const t=this.defaultValues;Object.keys(t).length>0&&(this.inputElement.value=t)}init(){super.init?.();const t=document.createElement("template");t.innerHTML=`\n      <${A.f}\n        tabindex="-1"\n      ></${A.f}>\n      `,this.baseElement.appendChild(t.content.cloneNode(!0)),this.inputElement=this.shadowRoot.querySelector(A.f),(0,C.oP)(this,this.inputElement,{includeAttrs:["size","full-width","label-value","label-attr","button-label","separator","options","default-values","invalid","readonly","disabled"]}),this.setDefaultValues()}}))((0,x.DM)({slots:[],wrappedEleName:"vaadin-custom-field",style:()=>`\n      :host {\n        display: inline-flex;\n        max-width: 100%;\n        direction: ltr;\n      }\n      vaadin-custom-field {\n        line-height: unset;\n        width: 100%;\n      }\n\n      descope-mappings-field-internal [part="labels"] {\n        display: none;\n        grid-template-columns: 1fr var(${P.cssVarList.separatorWidth}) 1fr var(${P.cssVarList.removeButtonWidth});\n      }\n\n      descope-mappings-field-internal [part="labels"] [part="value-label"],\n      descope-mappings-field-internal [part="labels"] [part="attr-label"] {\n        ${E.k.cssVarList.fontWeight}: 500;\n      }\n\n      descope-mappings-field-internal [part="labels"] [part="value-label"] {\n        grid-column: 1 / span 1;\n      }\n\n      descope-mappings-field-internal [part="labels"] [part="attr-label"] {\n        grid-column: 3 / span 1;\n      }\n\n      descope-mapping-item::part(wrapper) {\n        display: grid;\n        grid-template-columns: 1fr var(${P.cssVarList.separatorWidth}) 1fr var(${P.cssVarList.removeButtonWidth});\n      }\n    `,excludeAttrsSync:["tabindex","label-value","label-attr","button-label","options","error-message"],componentName:S}));i(1876),i(2018),i(9357),i(1294),i(3820),i(6751),customElements.define(S,P)},5279:(t,e,i)=>{i.d(e,{gh:()=>r,k4:()=>n,qM:()=>a,qg:()=>s});const r="descope",n=3,s="host",a="@"},4567:(t,e,i)=>{i.d(e,{Db:()=>h,FX:()=>s,P$:()=>a,Tk:()=>p,iY:()=>d,oP:()=>u,tg:()=>l});var r=i(2061),n=i(5279);const s=(t,e,{excludeAttrs:i=[],includeAttrs:r=[]})=>{const n=Array.from(t.attributes).filter((t=>!i.includes(t.name)&&(!r.length||r.includes(t.name)))).map((t=>t.name));e(n),new MutationObserver((t=>{t.forEach((t=>{"attributes"!==t.type||i.includes(t.attributeName)||r.length&&!r.includes(t.attributeName)||e([t.attributeName])}))})).observe(t,{attributes:!0})},a=(t,e)=>{e({addedNodes:Array.from(t.children),removedNodes:[]}),new MutationObserver((t=>{t.forEach((t=>{"childList"===t.type&&e(t)}))})).observe(t,{childList:!0})},o=(t,e,i={})=>r=>{r.forEach((r=>{const n=i[r]||r,s=t.getAttribute(r);null!==s?e.getAttribute(n)!==s&&e.setAttribute(n,s):e.removeAttribute(n)}))},l=(t,e,i)=>{s(t,o(t,e),i),s(e,o(e,t),i)},d=t=>(0,r.E3)(n.gh,t),p=(...t)=>`--${(0,r.E3)(...t)}`,u=(t,e,i={})=>{s(t,o(t,e,i.mapAttrs),i)},h=(t,e,i=[])=>{if(!i.length)return;const r=i.reduce(((e,i)=>Object.assign(e,{[i]:{get:()=>t[i],set(e){t[i]=e}}})),{});Object.defineProperties(e,r)}},2061:(t,e,i)=>{i.d(e,{E3:()=>n,GL:()=>r,lo:()=>o,mf:()=>a,qC:()=>s});const r=t=>t.replace(/([a-z])([A-Z])/g,"$1-$2").replace(/[\s_.]+/g,"-").toLowerCase(),n=(...t)=>r(t.filter((t=>!!t)).join("-")),s=(...t)=>e=>t.reduceRight(((t,e)=>e(t)),e),a=t=>"function"==typeof t,o=(t,e)=>{if(!Array.isArray(t)||!Array.isArray(e))return!1;if(t.length!==e.length)return!1;const i=t.slice().sort(),r=e.slice().sort();for(let t=0;t<i.length;t++)if(i[t]!==r[t])return!1;return!0}},7878:(t,e,i)=>{function r(t,e={}){const i=new Event(t,e);this[`on${t}`]?.(i),this.dispatchEvent(i)}i.d(e,{C:()=>r})},4201:(t,e,i)=>{i.d(e,{B:()=>p,DY:()=>l,PH:()=>d,Pd:()=>a,TX:()=>n,Wf:()=>h,bi:()=>r,jI:()=>o,jl:()=>s,wm:()=>u});const r=t=>`\n    :host {\n        padding: calc(var(${t.inputOutlineWidth}) + var(${t.inputOutlineOffset}))\n    }\n`,n=t=>`\n    ${t} {\n        margin: 0;\n        padding: 0;\n        width: 100%;\n        height: 100%;\n        box-sizing: border-box;\n    }\n`,s=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`,o=(t,e="input")=>`\n    ${t}[disabled] > ${e}:placeholder-shown,\n\t${t}[readonly] > ${e}:placeholder-shown {\n\t\topacity: 1;\n\t}\n`,l=()=>"\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`,u=(t,e)=>`\n    ${n(t)}\n    ${a(t)}\n    ${o(t)}\n    ${s(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`,h=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`},357:(t,e,i)=>{i.d(e,{A:()=>r});const r=t=>class extends t{#u(){const e=this.localName;if(!t.componentName)throw Error('component name is not defined on super class, make sure you have a static get for "componentName"');if(e!==t.componentName)throw Error(`component name mismatch, expected "${t.componentName}", current "${e}"`)}init(){super.init?.(),this.#u()}}},2666:(t,e,i)=>{i.d(e,{_:()=>r});const r=t=>class extends t{init(){super.init?.(),this.baseElement.addEventListener("mouseover",(t=>{this.setAttribute("hover","true"),t.target.addEventListener("mouseleave",(()=>this.removeAttribute("hover")),{once:!0})}))}}},1e3:(t,e,i)=>{i.d(e,{li:()=>A,Ae:()=>x.A,DM:()=>c,yk:()=>d,e4:()=>p,_A:()=>E._,mE:()=>I,wX:()=>b,QT:()=>S.Q,Iw:()=>C,dj:()=>f});var r=i(5279),n=i(2061),s=i(4567),a=i(5561);class o{constructor(){this.styleMap=new Map}add(t,e,i){this.styleMap.has(t)||this.styleMap.set(t,[]),this.styleMap.set(t,[...this.styleMap.get(t),{property:e,value:i}])}toString(){return Array.from(this.styleMap.entries()).reduce(((t,[e,i])=>`${t}${e} { \n${i.map((({property:t,value:e})=>`${t}: ${e}`)).join(";\n")} \n}\n\n`),"")}}const l=(t,e)=>Object.keys(e).reduce(((e,i)=>Object.assign(e,{[i]:(0,s.Tk)(t,i)})),{}),d=({mappings:t={},componentNameOverride:e=""})=>i=>{const d=e||i.componentName;return class extends i{static get cssVarList(){return{...i.cssVarList,...l(d,{...t})}}#h;#c;#m;#b;#g;#v;#y;#f;#x;constructor({getRootElement:e,componentNameSuffix:i="",themeSection:s=r.qg,baseSelector:a}={}){super(),this.#b=i,this.#g=s,this.#y=a??this.baseSelector,this.#x=e,this.#f=Object.keys(t).map((t=>(0,n.E3)("st",i,t)))}get#E(){return a.componentsThemeManager.currentTheme?.[d]||""}#w(){this.#c.innerHTML=this.#E[this.#g]}#C(){this.#c=document.createElement("style"),this.#c.id=`style-mixin-theme__${d}`,this.#v.prepend(this.#c),this.#m=a.componentsThemeManager.onCurrentThemeChange(this.#w.bind(this)),this.#w()}#A(){if(this.#f.length){this.#h=document.createElement("style"),this.#h.id=`style-mixin-overrides__${d}`;const i=(t=d,e=r.k4,Array(e).fill(`.${t}`).join(""));this.#h.innerText=`:host(${i}) {}`,this.#v.append(this.#h)}var t,e}#S(t,e){const i=this.#h?.sheet?.cssRules[0].style;if(!i)return;const r=(0,s.Tk)(d,t.replace(new RegExp("^st-"),""));e?i?.setProperty(r,e):(i?.removeProperty(r),this.removeAttribute(t))}#I(t=[]){let e=!1;t.forEach((t=>{this.#f.includes(t)&&(this.#S(t,this.getAttribute(t)),e=!0)})),e&&(this.#h.innerHTML=this.#h?.sheet?.cssRules[0].cssText)}#V(){if(Object.keys(t).length){const e=document.createElement("style");e.id=`style-mixin-mappings__${d}`,e.innerHTML=((t,e,i)=>{const r=new o;return Object.keys(i).forEach((a=>{const o=((t,e)=>{const i={selector:"",property:(0,n.GL)(t)};return e&&Object.keys(e).length?Array.isArray(e)?e.map((t=>({...i,...t}))):[{...i,...e}]:[i]})(a,i[a]),l=(0,s.Tk)(t,a);o.forEach((({selector:t,property:i,important:s,fallback:a})=>{r.add(((t="",e="")=>(0,n.mf)(e)?e(t):`${t}${/^[A-Za-z]/.test(e)?` ${e}`:e}`)(e,t),(0,n.mf)(i)?i():i,((t,e)=>`var(${t}${e?`, ${e}`:""})`)(l,a)+(s?"!important":""))}))})),r.toString()})((0,n.E3)(d,this.#b),this.#y,t),this.#v.prepend(e)}}#$(t){(this.#v.classList||this.#v.host.classList).add(t)}async init(){super.init?.(),this.shadowRoot.isConnected&&(this.#v=await(this.#x?.(this))||this.shadowRoot,this.#$(d),this.#V(),this.#C(),this.#A(),(0,s.FX)(this,this.#I.bind(this),{}))}disconnectedCallback(){super.disconnectedCallback?.(),this.#m?.()}}},p=t=>class extends t{#k=null;static get observedAttributes(){return[...t.observedAttributes||[],"draggable"]}constructor(){super(),this.#k=document.createElement("style"),this.#k.innerText="* { cursor: inherit!important }"}#L(t){t?this.shadowRoot.appendChild(this.#k):this.#k.remove()}get isDraggable(){return this.hasAttribute("draggable")&&"false"!==this.getAttribute("draggable")}init(){this.addEventListener("mousedown",(t=>{if(this.isDraggable){const e=this.baseElement.getAttribute("tabindex");this.baseElement.setAttribute("tabindex","-1");const i=()=>{e?this.baseElement.setAttribute("tabindex",e):this.baseElement.removeAttribute("tabindex"),t.target.removeEventListener("mouseup",i),t.target.removeEventListener("dragend",i)};t.target.addEventListener("mouseup",i,{once:!0}),t.target.addEventListener("dragend",i,{once:!0})}})),super.init?.()}attributeChangedCallback(t,e,i){super.attributeChangedCallback?.(t,e,i),"draggable"===t&&this.#L("true"===i)}};var u=i(2561),h=i(7878);const c=({componentName:t,wrappedEleName:e,slots:i=[],style:r,excludeAttrsSync:a=[],includeAttrsSync:o=[],includeForwardProps:l=[],delegatesFocus:d=!0})=>{class p extends((0,u.s)({componentName:t,baseSelector:e})){#M=h.C.bind(this,"blur");#T=h.C.bind(this,"focus");constructor(){super().attachShadow({mode:"open",delegatesFocus:d}).innerHTML=`\n\t\t\t<style id="create-proxy">${(0,n.mf)(r)?r():r}</style>\n\t\t\t<${e}>\n\t\t\t${i.map((t=>`<slot ${t?`name="${t}" slot="${t}"`:""} ></slot>`)).join("")}\n\t\t\t</${e}>\n\t\t`}init(){super.init?.(),this.baseElement.addEventListener("blur",(t=>{this.#M()})),this.baseElement.addEventListener("focus",(t=>{this.#T()})),(0,s.Db)(this.baseElement,this,l),(0,s.tg)(this.baseElement,this,{excludeAttrs:a,includeAttrs:o})}}return p};i(5910);const m=["required","pattern"],b=t=>class extends t{static get observedAttributes(){return[...t.observedAttributes||[],...m]}static get formAssociated(){return!0}#_;get internals(){return this.#_}set internals(t){this.#_=t}constructor(){super(),this.#_=this.attachInternals()}get defaultErrorMsgValueMissing(){return"Please fill out this field."}get defaultErrorMsgPatternMismatch(){return"Please match the requested format."}get defaultErrorMsgTooShort(){return`Minimum length is ${this.getAttribute("minlength")}.`}get defaultErrorMsgTooLong(){return`Maximum length is ${this.getAttribute("maxlength")}.  `}get defaultErrorMsgRangeUnderflow(){return`At least ${this.getAttribute("min-items-selection")} items are required.`}get defaultErrorMsgRangeOverflow(){return`At most ${this.getAttribute("max-items-selection")} items are allowed.`}getErrorMessage(t){const{valueMissing:e,patternMismatch:i,typeMismatch:r,stepMismatch:n,tooShort:s,tooLong:a,rangeOverflow:o,rangeUnderflow:l,badInput:d,customError:p}=t;switch(!0){case e:return this.getAttribute("data-errormessage-value-missing")||this.defaultErrorMsgValueMissing;case i||r||n||d:return this.getAttribute("data-errormessage-pattern-mismatch")||this.defaultErrorMsgPatternMismatch;case s:return this.getAttribute("data-errormessage-pattern-mismatch-too-short")||this.defaultErrorMsgTooShort;case a:return this.getAttribute("data-errormessage-pattern-mismatch-too-long")||this.defaultErrorMsgTooLong;case l:return this.defaultErrorMsgRangeUnderflow;case o:return this.defaultErrorMsgRangeOverflow;case p:return this.validationMessage;default:return""}}#O(){const t=this.isReadOnly?{}:this.getValidity();this.#_.setValidity(t,this.getErrorMessage(t),this.validationTarget)}get validationMessage(){return this.#_.validationMessage}getValidity(){console.warn("getValidity","is not implemented")}checkValidity(){return this.#_.validity.valid}reportValidity(){return this.#_.reportValidity()}get validity(){return this.#_.validity}get validationTarget(){return this.inputElement}setCustomValidity(t){t?this.#_.setValidity({customError:!0},t,this.validationTarget):(this.#_.setValidity({}),this.#O())}get isRequired(){return this.hasAttribute("required")&&"false"!==this.getAttribute("required")}get isReadOnly(){return this.hasAttribute("readonly")&&"false"!==this.getAttribute("readonly")}get isDisabled(){return this.hasAttribute("disabled")&&"false"!==this.getAttribute("disabled")}get pattern(){return this.getAttribute("pattern")}get form(){return this.#_.form}attributeChangedCallback(t,e,i){super.attributeChangedCallback?.(t,e,i),m.includes(t)&&this.#O()}init(){super.init?.(),this.addEventListener("change",this.#O),this.addEventListener("invalid",(t=>t.stopPropagation())),this.addEventListener("input",this.#O),setTimeout((()=>this.#O()))}},g=["invalid","required"],v=t=>{if(!t)return;let e=t;for(let t=0;t<10;t++)if([e]=e.assignedElements(),"slot"!==e.localName)return e},y=({proxyProps:t=[],inputEvent:e="input",proxyParentValidation:i=!1})=>r=>class extends(b(r)){static get observedAttributes(){return[...r.observedAttributes||[],...g]}#P;#q=h.C.bind(this,"change");constructor(){super(),this.#P=super.inputElement}warnIfInputElementIsMissing(){clearTimeout(this.inputElementTimerId),this.inputElementTimerId=setTimeout((()=>{!this.#P&&console.warn(this.localName,"no input was found")}),0)}get inputElement(){if(this.#P)return this.#P;this.warnIfInputElementIsMissing();const t=this.baseElement.shadowRoot?.querySelector('slot[name="input"]'),e=this.baseElement.shadowRoot?.querySelector('slot[name="textarea"]');return this.#P=v(t)||v(e),this.#P}set inputElement(t){this.#P=t}getValidity(){return this.inputElement?.validity||{}}#N(){this.setAttribute("error-message",this.validationMessage)}reportValidity=()=>{this.inputElement.setCustomValidity(""),this.setCustomValidity(""),this.checkValidity()||(this.setAttribute("invalid","true"),this.#N(),this.focus())};defaultReportValidity(){return super.reportValidity()}init(){if(super.init?.(),this.baseElement._setInvalid=function(t){!t&&this._shouldSetInvalid(t)&&(this.invalid=t)},setTimeout((()=>{(Array.isArray(e)?e:[e]).forEach((t=>{this.baseElement?.addEventListener(t,(()=>{this.baseElement.checkValidity()?this.removeAttribute("invalid"):this.#N()}))})),this.baseElement.addEventListener("change",(()=>{this.#q()})),this.addEventListener("invalid",(()=>{this.checkValidity()||this.setAttribute("invalid","true"),this.#N()})),t.forEach((t=>{var e,i;e=this.inputElement,i=t,Object.defineProperty(this,i,{set(t){e[i]=t},get:()=>e[i],configurable:!0})})),this.setSelectionRange=this.inputElement.setSelectionRange?.bind(this.inputElement),(0,s.oP)(this,this.inputElement,{includeAttrs:["inputmode"]})})),i){const t=this.inputElement.internals,e=this;this.inputElement.internals=new Proxy(t,{get:(t,i)=>"function"==typeof t[i]&&"setValidity"===i?(...r)=>{if(3===r.length){const t=r.slice(0,r.length-1);t.push(e.inputElement),e.internals[i](...t)}else e.internals[i](...r);return t[i](...r)}:"function"==typeof t[i]?(...r)=>(e.internals[i](...r),t[i](...r)):t[i]})}}},f=t=>(0,n.qC)(y(t),d({componentNameOverride:(0,s.iY)("input-wrapper")}));var x=i(357),E=i(2666);const w=t=>async e=>{const i=await t(e);return new Promise((t=>{let e=0;const r=()=>{if(e>20)return console.error("could not get shadow root for element",i),void t(i);e++,i?.shadowRoot?t(i.shadowRoot):setTimeout(r)};r()}))},C=({name:t,selector:e,mappings:i={},forward:{attributes:a=[],include:o=!0}={}})=>p=>{const u=t||(t=>t.replace(/[^\w\s]/gi,""))(e),h=d({mappings:i})(p);return class extends h{static get cssVarList(){return{...h.cssVarList,[u]:l((0,n.E3)(p.componentName,"_"+u),i)}}#z;constructor(){const t=w((async t=>{const i=t.shadowRoot.querySelector(t.baseSelector);return e?(await w((()=>i))(t)).querySelector(e):i}));super({getRootElement:t,componentNameSuffix:"_"+u,themeSection:r.qM+u,baseSelector:":host"}),this.#z=t(this).then((t=>t.host))}async#D(){const t=await this.#z;t.onmouseenter=t=>{t.target.setAttribute("hover","true")},t.onmouseleave=t=>{t.target.removeAttribute("hover")}}async init(){super.init?.();const t=await this.#z;(0,s.oP)(this,t,{[o?"includeAttrs":"excludeAttrs"]:a}),this.#D()}}},A=t=>class extends t{#q=h.C.bind(this,"change");init(){super.init?.(),this.prevValue=this.value,this.addEventListener("change",(t=>{t.stopPropagation()})),this.addEventListener("blur",(()=>{this.value!==this.prevValue&&(this.#q(),this.prevValue=this.value)}))}};var S=i(8084);const I=t=>class extends t{init(){this.#R(),super.init?.()}#R(){["blur","focus","focusin","focusout"].forEach((t=>{this.addEventListener(t,(t=>{t.isTrusted&&t.target===this&&t.stopImmediatePropagation()}))}))}handleFocusEventsDispatching(t){let e;t?.forEach((t=>{t?.addEventListener("focusout",(t=>{t.stopImmediatePropagation(),e=setTimeout((()=>{e=null,h.C.call(this,"blur"),h.C.call(this,"focusout",{bubbles:!0})}))}));const i=t=>{t.stopImmediatePropagation(),clearTimeout(e),e||(h.C.call(this,"focus"),h.C.call(this,"focusin",{bubbles:!0}))};t?.addEventListener("focusin",i),t?.addEventListener("focus",i)}))}handleInputEventDispatching(){let t=this.value;this.addEventListener("input",(e=>{t===this.value?e.stopImmediatePropagation():t=this.value}))}}},8084:(t,e,i)=>{i.d(e,{Q:()=>s});var r=i(4567);const n=["readonly","focused","invalid","has-label","required","disabled","checked","has-helper","has-value","step-buttons-visible","hover","has-error-message","focus-ring","opened","active","password-visible","opening","closing","has-no-options"],s=t=>class extends t{init(){super.init?.(),(0,r.FX)(this,(t=>t.forEach((t=>{const e=this.getAttribute(t);(t=>n.includes(t))(t)?""===e?this.setAttribute(t,"true"):"false"===e&&this.removeAttribute(t):e||console.warn(`attribute "${t}" has no value, should it be added to the boolean attributes list?`)}))),{})}}}}]);
+    `}}(0,l.M)(f)}}]);

package/dist/umd/mapping-fields-descope-saml-group-mappings-descope-saml-group-mappings-internal-index-js.js

@@ -0,0 +1 @@
+"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[9656],{6867:(e,t,i)=>{i.d(t,{Z:()=>p,f:()=>a});var n=i(3878),s=i(4567);const a=(0,s.iY)("saml-group-mappings-internal"),l=(0,n.P)({componentName:a,baseSelector:""}),p=class extends l{static get observedAttributes(){return["invalid"].concat(l.observedAttributes||[])}constructor(){super(),this.innerHTML='\n      <descope-text-field variant="body2" bordered="true"></descope-text-field>\n      <descope-mappings-field></descope-mappings-field>\n    ',this.groupInputElement=this.querySelector("descope-text-field"),this.mappingsElement=this.querySelector("descope-mappings-field")}resetInvalidIndication(){this.removeAttribute("invalid")}handleMappingsInvalidChange(e){e.includes("invalid")&&(this.mappingsElement.hasAttribute("invalid")||this.resetInvalidIndication())}initFocusHandler(){this.addEventListener("focus",(e=>{e.isTrusted&&(this.mappingsElement.checkValidity()?this.groupInputElement:this.mappingsElement).focus()}))}init(){this.initFocusHandler(),super.init?.(),(0,s.oP)(this,this.groupInputElement,{mapAttrs:{"label-group":"label"},includeAttrs:["size","label-group","readonly","disabled"]}),(0,s.oP)(this,this.mappingsElement,{includeAttrs:["size","full-width","label-value","label-attr","button-label","separator","options","readonly","disabled","data-errormessage-pattern-mismatch"]}),(0,s.FX)(this.mappingsElement,this.handleMappingsInvalidChange.bind(this),{includeAttrs:["invalid"]})}get value(){return{group:this.groupInputElement.value,mappings:this.mappingsElement.value}}set value(e){e?.group&&"string"==typeof e.group&&(this.groupInputElement.value=e.group),Array.isArray(e?.mappings)&&(this.mappingsElement.value=e.mappings)}getValidity(){return this.groupInputElement.checkValidity()?this.mappingsElement.checkValidity()?{}:this.mappingsElement.validity:this.groupInputElement.validity}#e(e){if(e){if(!this.groupInputElement.checkValidity())return void this.groupInputElement.setAttribute("invalid","true");this.mappingsElement.checkValidity()||this.mappingsElement.setAttribute("invalid","true")}}attributeChangedCallback(e,t,i){super.attributeChangedCallback?.(e,t,i),"invalid"===e&&this.#e("true"===i)}}},4115:(e,t,i)=>{i.r(t);var n=i(6867);customElements.define(n.f,n.Z)}}]);

package/dist/umd/mapping-fields-descope-saml-group-mappings-index-js.js

@@ -0,0 +1 @@
+"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[9476,9656],{6867:(e,t,i)=>{i.d(t,{Z:()=>p,f:()=>a});var n=i(3878),s=i(4567);const a=(0,s.iY)("saml-group-mappings-internal"),l=(0,n.P)({componentName:a,baseSelector:""}),p=class extends l{static get observedAttributes(){return["invalid"].concat(l.observedAttributes||[])}constructor(){super(),this.innerHTML='\n      <descope-text-field variant="body2" bordered="true"></descope-text-field>\n      <descope-mappings-field></descope-mappings-field>\n    ',this.groupInputElement=this.querySelector("descope-text-field"),this.mappingsElement=this.querySelector("descope-mappings-field")}resetInvalidIndication(){this.removeAttribute("invalid")}handleMappingsInvalidChange(e){e.includes("invalid")&&(this.mappingsElement.hasAttribute("invalid")||this.resetInvalidIndication())}initFocusHandler(){this.addEventListener("focus",(e=>{e.isTrusted&&(this.mappingsElement.checkValidity()?this.groupInputElement:this.mappingsElement).focus()}))}init(){this.initFocusHandler(),super.init?.(),(0,s.oP)(this,this.groupInputElement,{mapAttrs:{"label-group":"label"},includeAttrs:["size","label-group","readonly","disabled"]}),(0,s.oP)(this,this.mappingsElement,{includeAttrs:["size","full-width","label-value","label-attr","button-label","separator","options","readonly","disabled","data-errormessage-pattern-mismatch"]}),(0,s.FX)(this.mappingsElement,this.handleMappingsInvalidChange.bind(this),{includeAttrs:["invalid"]})}get value(){return{group:this.groupInputElement.value,mappings:this.mappingsElement.value}}set value(e){e?.group&&"string"==typeof e.group&&(this.groupInputElement.value=e.group),Array.isArray(e?.mappings)&&(this.mappingsElement.value=e.mappings)}getValidity(){return this.groupInputElement.checkValidity()?this.mappingsElement.checkValidity()?{}:this.mappingsElement.validity:this.groupInputElement.validity}#e(e){if(e){if(!this.groupInputElement.checkValidity())return void this.groupInputElement.setAttribute("invalid","true");this.mappingsElement.checkValidity()||this.mappingsElement.setAttribute("invalid","true")}}attributeChangedCallback(e,t,i){super.attributeChangedCallback?.(e,t,i),"invalid"===e&&this.#e("true"===i)}}},4115:(e,t,i)=>{i.r(t);var n=i(6867);customElements.define(n.f,n.Z)},3277:(e,t,i)=>{i.r(t),i.d(t,{SamlGroupMappingsClass:()=>d}),i(9381);var n=i(1e3),s=i(2061),a=i(4567),l=i(6867);const p=(0,a.iY)("saml-group-mappings"),{host:r,groupInput:o}={host:{selector:()=>":host"},groupInput:{selector:"descope-text-field"}},d=(0,s.qC)((0,n.yk)({mappings:{hostWidth:{...r,property:"width"},hostDirection:{...r,property:"direction"},groupNameInputMarginBottom:{...o,property:"margin-bottom"}}}),n.e4,(0,n.dj)({proxyProps:["value","selectionStart"],inputEvent:"input",triggerValidationEvents:["mapping-item-added","mapping-item-removed"],proxyParentValidation:!0}),n.Ae,(e=>class extends e{init(){super.init?.();const e=document.createElement("template");e.innerHTML=`\n      <${l.f}\n        tabindex="-1"\n      ></${l.f}>\n      `,this.baseElement.appendChild(e.content.cloneNode(!0)),this.inputElement=this.shadowRoot.querySelector(l.f),(0,a.oP)(this,this.inputElement,{includeAttrs:["size","full-width","label-group","label-value","label-attr","button-label","separator","options","readonly","disabled"]}),(0,a.tg)(this,this.inputElement,{includeAttrs:["invalid"]})}}))((0,n.DM)({slots:[],wrappedEleName:"vaadin-custom-field",style:()=>"\n      :host {\n        display: inline-flex;\n        max-width: 100%;\n        direction: ltr;\n      }\n\n      vaadin-custom-field {\n        line-height: unset;\n        width: 100%;\n      }\n\n      descope-text-field {\n        width: auto;\n      }\n\n      descope-mappings-field {\n        display: block;\n      }\n    ",excludeAttrsSync:["tabindex","label-group","label-value","label-attr","button-label","separator","options","error-message"],componentName:p}));i(9357),i(5894),i(4115),customElements.define(p,d)}}]);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@descope/web-components-ui",
-  "version": "1.0.289",
+  "version": "1.0.291",
   "description": "",
   "main": "dist/cjs/index.cjs.js",
   "module": "dist/index.esm.js",
@@ -73,11 +73,14 @@
     "prettier": "^3.0.2",
     "rollup": "^3.21.4",
     "rollup-plugin-import-css": "^3.2.1",
+    "rollup-plugin-svg-import": "^3.0.0",
+    "svg-url-loader": "^8.0.0",
     "webpack": "^5.79.0",
     "webpack-cli": "^5.0.1",
     "webpack-dev-server": "^5.0.0"
   },
   "dependencies": {
+    "@vaadin/avatar": "24.3.4",
     "@vaadin/button": "24.3.4",
     "@vaadin/checkbox": "24.3.4",
     "@vaadin/combo-box": "24.3.4",
@@ -94,7 +97,6 @@
     "@vaadin/password-field": "24.3.4",
     "@vaadin/text-area": "24.3.4",
     "@vaadin/text-field": "24.3.4",
-    "@vaadin/avatar": "24.3.4",
     "color": "^4.2.3",
     "element-internals-polyfill": "^1.3.9",
     "lint-staged": "^15.0.0",

package/src/components/descope-avatar/AvatarClass.js

@@ -14,7 +14,7 @@ class RawAvatar extends createBaseClass({ componentName, baseSelector: ':host >
 					display: inline-flex;
 				}
 
-        .editable {
+        .editableBadge {
           border: 1px solid;
           border-radius: 100%;
           height: fit-content;
@@ -50,7 +50,7 @@ class RawAvatar extends createBaseClass({ componentName, baseSelector: ':host >
 
       <div class="wrapper">
         <vaadin-avatar></vaadin-avatar>
-        <div class="editable">
+        <div class="editableBadge">
           <vaadin-icon icon="vaadin:pencil"></vaadin-icon>
         </div>
       </div>
@@ -59,10 +59,11 @@ class RawAvatar extends createBaseClass({ componentName, baseSelector: ':host >
     this.avatarComponent = this.shadowRoot.querySelector('vaadin-avatar');
 
     forwardAttrs(this, this.avatarComponent, {
-      includeAttrs: ['name', 'img'],
+      includeAttrs: ['display-name', 'img'],
+      mapAttrs: { 'display-name': 'name' },
     });
 
-    const editableIcon = this.shadowRoot.querySelector('.editable');
+    const editableIcon = this.shadowRoot.querySelector('.editableBadge');
 
     observeAttributes(
       this,
@@ -80,7 +81,7 @@ class RawAvatar extends createBaseClass({ componentName, baseSelector: ':host >
 
 const { host, editableBadge, avatar } = {
   host: { selector: () => ':host' },
-  editableBadge: { selector: '> .editable' },
+  editableBadge: { selector: '> .editableBadge' },
   avatar: { selector: 'vaadin-avatar' },
 };
 
@@ -89,6 +90,7 @@ export const AvatarClass = compose(
     mappings: {
       hostWidth: { ...host, property: 'width' },
       hostHeight: { ...host, property: 'height' },
+      cursor: [avatar, host],
       hostDirection: { ...host, property: 'direction' },
       avatarTextColor: { ...avatar, property: 'color' },
       avatarBackgroundColor: { ...avatar, property: 'background-color' },

package/src/components/descope-badge/BadgeClass.js

@@ -16,6 +16,9 @@ class RawBadge extends createBaseClass({ componentName, baseSelector: ':host > d
       }
       :host > div {
         width: 100%;
+        text-overflow: ellipsis;
+        overflow: hidden;
+        white-space: nowrap;
       }
 		</style>
 		<div>

package/src/components/descope-text/TextClass.js

@@ -20,7 +20,7 @@ class RawText extends createBaseClass({ componentName, baseSelector: ':host > sl
 				display: inline-block;
 			}
 		</style>
-		<slot></slot>
+		<slot part="text-wrapper"></slot>
 		`;
   }
 }

package/src/components/descope-user-attribute/UserAttributeClass.js

@@ -0,0 +1,228 @@
+import { createStyleMixin, draggableMixin, componentNameValidationMixin } from '../../mixins';
+import { createBaseClass } from '../../baseClasses/createBaseClass';
+import { compose } from '../../helpers';
+import { getComponentName } from '../../helpers/componentHelpers';
+import deleteIcon from './delete.svg';
+import editIcon from './edit.svg';
+import { TextClass } from '../descope-text/TextClass';
+import { ButtonClass } from '../descope-button/ButtonClass';
+import { BadgeClass } from '../descope-badge/BadgeClass';
+
+export const componentName = getComponentName('user-attribute');
+class RawUserAttribute extends createBaseClass({
+  componentName,
+  baseSelector: ':host > .root',
+}) {
+  constructor() {
+    super();
+
+    this.attachShadow({ mode: 'open' }).innerHTML = `
+			<style>
+				:host {
+					display: inline-flex;
+				}
+
+        vaadin-icon {
+          color: currentcolor;
+        }
+
+        .root {
+          display: flex;
+          width: 100%;
+          height: 100%;
+          align-items: center;
+        }
+
+        .btn-wrapper {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          flex-grow: 0;
+        }
+
+        .text-wrapper {
+          display: flex;
+          align-items: center;
+          flex-grow: 1;
+        }
+
+        descope-text::part(text-wrapper) {
+          text-overflow: ellipsis;
+          overflow: hidden;
+          white-space: nowrap;
+          width: initial;
+        }
+
+        descope-text {
+          display: inline-flex;
+        }
+
+        descope-badge {
+          margin-inline-end: 10px;
+        }
+
+        descope-text[data-id="label-text"].required:after {
+          content: '*';
+          color: var(${TextClass.cssVarList.textColor});
+        }
+      </style>
+
+
+      <div class="root">
+        <div class="text-wrapper">
+          <descope-text st-text-align="auto" data-id="label-text" variant="body1" mode="secondary"></descope-text>
+          <descope-text st-text-align="auto" data-id="value-text" variant="body1" mode="primary"></descope-text>
+        </div>
+
+        <div class="btn-wrapper">
+          <descope-badge mode="default" bordered="true" size="xs"></descope-badge>
+          <descope-button size="xs" data-id="edit-btn" square="true" variant="link" mode="primary">
+            <vaadin-icon src=${editIcon}></vaadin-icon>
+          </descope-button>
+          <descope-button size="xs" data-id="delete-btn" square="true" variant="link" mode="primary">
+            <vaadin-icon src=${deleteIcon}></vaadin-icon>
+          </descope-button>
+        </div
+      </div>
+		`;
+
+    this.deleteButton = this.shadowRoot.querySelector('descope-button[data-id="delete-btn"]');
+    this.editButton = this.shadowRoot.querySelector('descope-button[data-id="edit-btn"]');
+    this.badge = this.shadowRoot.querySelector('descope-badge');
+    this.labelText = this.shadowRoot.querySelector('descope-text[data-id="label-text"]');
+    this.valueText = this.shadowRoot.querySelector('descope-text[data-id="value-text"]');
+  }
+
+  onLabelChange() {
+    this.labelText.innerText = this.label;
+    this.labelText.setAttribute('title', this.label);
+  }
+
+  onValueOrPlaceholderChange() {
+    const text = this.value || this.placeholder;
+    const mode = this.value ? 'primary' : 'secondary';
+
+    this.valueText.innerText = text;
+    this.valueText.setAttribute('title', text);
+    this.valueText.setAttribute('mode', mode);
+  }
+
+  onBadgeLabelChange() {
+    if (!this.badgeLabel) {
+      this.badge.style.display = 'none';
+    } else {
+      this.badge.innerText = this.badgeLabel;
+      this.badge.style.display = '';
+    }
+  }
+
+  onBadgeTooltipTextChange() {
+    this.badge.setAttribute('title', this.badgeTooltipText || this.badgeLabel);
+  }
+
+  onIsRequiredChange() {
+    this.labelText.classList.toggle('required', this.isRequired);
+  }
+
+  get label() {
+    return this.getAttribute('label') || '';
+  }
+
+  get value() {
+    return this.getAttribute('value') || '';
+  }
+
+  get placeholder() {
+    return this.getAttribute('placeholder') || '';
+  }
+
+  get isRequired() {
+    return this.getAttribute('required') === 'true';
+  }
+
+  get badgeLabel() {
+    return this.getAttribute('badge-label') || '';
+  }
+
+  get badgeTooltipText() {
+    return this.getAttribute('badge-tooltip-text') || '';
+  }
+
+  init() {
+    this.onLabelChange();
+    this.onValueOrPlaceholderChange();
+    this.onIsRequiredChange();
+    this.onBadgeLabelChange();
+    this.onBadgeTooltipTextChange();
+
+    this.deleteButton.addEventListener('click', () =>
+      this.dispatchEvent(new CustomEvent('delete-clicked', { bubbles: true, composed: true }))
+    );
+
+    this.editButton.addEventListener('click', () =>
+      this.dispatchEvent(new CustomEvent('edit-clicked', { bubbles: true, composed: true }))
+    );
+  }
+
+  static get observedAttributes() {
+    return [
+      'label',
+      'value',
+      'placeholder',
+      'required',
+      'badge-label',
+      'badge-tooltip-text',
+    ].concat(super.observedAttributes);
+  }
+
+  attributeChangedCallback(name, oldValue, newValue) {
+    super.attributeChangedCallback?.(name, oldValue, newValue);
+
+    if (oldValue === newValue) {
+      return;
+    }
+
+    if (name === 'label') {
+      this.onLabelChange();
+    } else if (name === 'value' || name === 'placeholder') {
+      this.onValueOrPlaceholderChange();
+    } else if (name === 'required') {
+      this.onIsRequiredChange();
+    } else if (name === 'badge-label') {
+      this.onBadgeLabelChange();
+    } else if (name === 'badge-tooltip-text') {
+      this.onBadgeTooltipTextChange();
+    }
+  }
+}
+
+const { host, textFields, buttons, badge, labelText, valueText, textWrapper } = {
+  host: { selector: () => ':host' },
+  textFields: { selector: 'descope-text' },
+  valueText: { selector: 'descope-text[data-id="value-text"]' },
+  labelText: { selector: 'descope-text[data-id="label-text"]' },
+  buttons: { selector: 'descope-button' },
+  badge: { selector: 'descope-badge' },
+  textWrapper: { selector: ' .text-wrapper' },
+};
+
+export const UserAttributeClass = compose(
+  createStyleMixin({
+    mappings: {
+      hostWidth: { ...host, property: 'width' },
+      hostMinWidth: { ...host, property: 'min-width' },
+      hostDirection: [
+        { ...host, property: 'direction' },
+        { ...textFields, property: TextClass.cssVarList.hostDirection },
+        { ...buttons, property: ButtonClass.cssVarList.hostDirection },
+        { ...badge, property: BadgeClass.cssVarList.hostDirection },
+      ],
+      labelTextWidth: { ...labelText, property: 'width' },
+      valueTextWidth: { ...valueText, property: 'width' },
+      badgeMaxWidth: { ...badge, property: 'max-width' },
+      itemsGap: [{ property: 'gap' }, { ...textWrapper, property: 'gap' }],
+    },
+  }),
+  draggableMixin,
+  componentNameValidationMixin
+)(RawUserAttribute);

package/src/components/descope-user-attribute/delete.svg

@@ -0,0 +1,3 @@
+<svg width="14" height="18" viewBox="0 0 14 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1 16C1 17.1 1.9 18 3 18H11C12.1 18 13 17.1 13 16V4H1V16ZM3 6H11V16H3V6ZM10.5 1L9.5 0H4.5L3.5 1H0V3H14V1H10.5Z" fill="currentcolor"/>
+</svg>

package/src/components/descope-user-attribute/edit.svg

@@ -0,0 +1,3 @@
+<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10.0002 0.992149C10.0002 1.01615 10.0002 1.01615 10.0002 1.01615L8.22419 3.00815H2.99219C2.46419 3.00815 2.00819 3.44015 2.00819 3.99215V12.0082C2.00819 12.5362 2.44019 12.9922 2.99219 12.9922H5.53619C5.84819 13.0402 6.16019 13.0402 6.47219 12.9922H11.0082C11.5362 12.9922 11.9922 12.5602 11.9922 12.0082V7.78416L13.9362 5.62415L14.0082 5.67215V11.9842C14.0082 13.6642 12.6642 15.0082 11.0082 15.0082H3.01619C1.33619 15.0082 -0.0078125 13.6642 -0.0078125 11.9842V3.99215C-0.0078125 2.33615 1.33619 0.992149 3.01619 0.992149H10.0002ZM11.2722 2.62415L12.6162 4.11215L7.72019 9.68016C7.50419 9.92016 6.83219 10.2322 5.68019 10.6162C5.65619 10.6402 5.60819 10.6402 5.56019 10.6162C5.46419 10.5922 5.39219 10.4722 5.44019 10.3762C5.75219 9.24816 6.04019 8.55216 6.25619 8.31216L11.2722 2.62415ZM11.9202 1.85615L13.2882 0.320149C13.6482 -0.0878516 14.2722 -0.111852 14.6802 0.272149C15.0882 0.632149 15.1122 1.28015 14.7522 1.68815L13.2642 3.36815L11.9202 1.85615Z" fill="currentcolor"/>
+</svg>

package/src/components/descope-user-attribute/index.js

@@ -0,0 +1,9 @@
+import { componentName, UserAttributeClass } from './UserAttributeClass';
+import '../descope-text';
+import '../descope-button';
+import '../descope-badge';
+import '@vaadin/icon';
+
+customElements.define(componentName, UserAttributeClass);
+
+export { UserAttributeClass };