@descope/web-components-ui 1.0.371 → 1.0.372

package/dist/umd/descope-text-field-index-js.js

@@ -1,5 +1,5 @@
 /*! For license information please see descope-text-field-index-js.js.LICENSE.txt */
-"use strict";(self.webpackChunk_descope_web_components_ui=self.webpackChunk_descope_web_components_ui||[]).push([[2934],{56417:(t,e,n)=>{n.d(e,{f:()=>s,z:()=>d});var i=n(94978),r=n(4447),o=n(2061),l=n(54567),a=n(54201);const s=(0,l.iY)("text-field"),p=["type","label-type","copy-to-clipboard"],d=(0,o.qC)((0,i.yk)({mappings:r.Z}),i.e4,(0,i.dj)({proxyProps:["value","selectionStart"],useProxyTargets:!0}),i.Ae,(t=>class extends t{static get observedAttributes(){return p.concat(t.observedAttributes||[])}icon;init(){super.init?.()}renderCopyToClipboard(t){if(!t)return void this.icon?.remove();const e={icon:"vaadin:copy-o",title:"Copy",style:"cursor: pointer"},n={icon:"vaadin:check-circle-o",title:"Copied",style:"cursor: initial"};this.icon=Object.assign(document.createElement("vaadin-icon"),{slot:"suffix",...e}),this.baseElement.appendChild(this.icon),this.icon.addEventListener("click",(()=>{navigator.clipboard.writeText(this.value),Object.assign(this.icon,n),setTimeout((()=>{Object.assign(this.icon,e)}),5e3)}))}onLabelClick(){this.focus()}attributeChangedCallback(t,e,n){super.attributeChangeCallback?.(t,e,n),"type"===t&&this.baseElement._setType(n),e!==n&&("label-type"===t?"floating"===n?this.addEventListener("click",this.onLabelClick):this.removeEventListener("click",this.onLabelClick):"copy-to-clipboard"===t&&this.renderCopyToClipboard("true"===n))}}))((0,i.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(${d.cssVarList.inputOutlineWidth}) + var(${d.cssVarList.inputOutlineOffset}));\n        box-sizing: border-box;\n\t\t\t}\n      :host(:is([readonly], [disabled])) ::slotted(:is(input, textarea):placeholder-shown) {\n        opacity: 1;\n      }\n\n      vaadin-text-field[label-type="floating"]:not([focused])[readonly] > input:placeholder-shown {\n        opacity: 0;\n      }\n      vaadin-text-field[label-type="floating"]:not([focused])[disabled] > input:placeholder-shown {\n        opacity: 0;\n      }\n      ${(0,a.Wf)("vaadin-text-field")}\n\t\t\t${(0,a.bi)(d.cssVarList)}\n\t\t\t${(0,a.wm)("vaadin-text-field",d.cssVarList)}\n      ${(0,a.bz)()}\n\n      vaadin-text-field vaadin-icon {\n        align-self: center;\n      }\n\t\t`,excludeAttrsSync:["tabindex"],componentName:s}))},19357:(t,e,n)=>{n.r(e),n.d(e,{TextFieldClass:()=>i.z}),n(79789),n(56594),n(57911);var i=n(56417);customElements.define(i.f,i.z)},4447:(t,e,n)=>{n.d(e,{Z:()=>y});const{host:i,label:r,placeholder:o,requiredIndicator:l,inputField:a,input:s,inputMask:p,helperText:d,errorMessage:u,disabledPlaceholder:c,inputDisabled:h,inputIcon:b}={host:{selector:()=>":host"},label:{selector:"::part(label)"},requiredIndicator:{selector:"[required]::part(required-indicator)::after"},placeholder:[{selector:"> input:placeholder-shown"},{selector:()=>":host::slotted(input:placeholder-shown)"}],disabledPlaceholder:{selector:"> input:disabled::placeholder"},inputField:{selector:"::part(input-field)"},input:{selector:"input"},inputMask:{selector:"::part(input-field)::before"},inputDisabled:{selector:"input:disabled"},helperText:{selector:"::part(helper-text)"},errorMessage:{selector:"::part(error-message)"},inputIcon:{selector:"vaadin-icon"}},y={fontSize:[{},i],fontFamily:[r,a,d,u],labelFontSize:{...r,property:"font-size"},labelFontWeight:{...r,property:"font-weight"},labelTextColor:[{...r,property:"color"},{...l,property:"color"},{...r,property:"-webkit-text-fill-color"},{...l,property:"-webkit-text-fill-color"}],hostWidth:{...i,property:"width"},hostMinWidth:{...i,property:"min-width"},hostDirection:{...i,property:"direction"},inputBackgroundColor:[{...a,property:"background-color"},{...p,property:"background-color"}],errorMessageTextColor:{...u,property:"color"},helperTextColor:{...d,property:"-webkit-text-fill-color"},inputValueTextColor:[{...a,property:"color"},{...h,property:"-webkit-text-fill-color"}],inputCaretTextColor:[{...s,property:"color"}],labelRequiredIndicator:{...l,property:"content"},inputBorderColor:{...a,property:"border-color"},inputBorderWidth:{...a,property:"border-width"},inputBorderStyle:{...a,property:"border-style"},inputBorderRadius:{...a,property:"border-radius"},inputHeight:{...a,property:"height"},inputHorizontalPadding:[{...s,property:"padding-left"},{...s,property:"padding-right"}],inputOutlineColor:{...a,property:"outline-color"},inputOutlineStyle:{...a,property:"outline-style"},inputOutlineWidth:{...a,property:"outline-width"},inputOutlineOffset:{...a,property:"outline-offset"},inputTextAlign:[{...s,property:"text-align"}],inputPlaceholderColor:[{selector:()=>":host input:placeholder-shown",property:"color"},{...o,property:"color"},{...c,property:"-webkit-text-fill-color"}],labelPosition:{...r,property:"position"},labelTopPosition:{...r,property:"top"},labelHorizontalPosition:[{...r,property:"left"},{...r,property:"right"}],inputTransformY:{...r,property:"transform"},inputTransition:{...r,property:"transition"},marginInlineStart:{...r,property:"margin-inline-start"},placeholderOpacity:[{selector:"> input:placeholder-shown",property:"opacity"}],inputVerticalAlignment:[{...a,property:"align-items"}],valueInputHeight:[{...s,property:"height"}],valueInputMarginBottom:[{...s,property:"margin-bottom"}],inputIconOffset:[{...b,property:"margin-right"},{...b,property:"margin-left"}],inputIconSize:{...b,property:"font-size"},inputIconColor:{...b,property:"color"}}},54201:(t,e,n)=>{n.d(e,{B:()=>d,DY:()=>s,PH:()=>p,Pd:()=>l,TX:()=>r,Wf:()=>c,bi:()=>i,bz:()=>h,jI:()=>a,jl:()=>o,wm:()=>u});const i=t=>`\n    :host {\n        padding: calc(var(${t.inputOutlineWidth}) + var(${t.inputOutlineOffset}))\n    }\n`,r=t=>`\n    ${t} {\n        margin: 0;\n        padding: 0;\n        width: 100%;\n        height: 100%;\n        box-sizing: border-box;\n    }\n`,o=t=>`\n    ${t}::part(input-field) {\n        overflow: hidden;\n        padding: 0;\n        box-shadow: none;\n    }\n`,l=t=>`\n    ${t} > label,\n    ${t}::part(label),\n    ${t}::part(required-indicator) {\n        cursor: pointer;\n    }\n`,a=(t,e="input")=>`\n    ${t}[disabled] > ${e}:placeholder-shown,\n\t${t}[readonly] > ${e}:placeholder-shown {\n\t\topacity: 1;\n\t}\n`,s=()=>"\n    :host {\n        --vaadin-field-default-width: auto;\n        box-sizing: border-box;\n    }\n",p=t=>`\n    ${t}::part(input-field)::after {\n        opacity: 0;\n    }\n`,d=t=>`\n    ${t}::part(input-field)::after {\n        background: none;\n    }\n`,u=(t,e)=>`\n    ${r(t)}\n    ${l(t)}\n    ${a(t)}\n    ${o(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    ${d(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`,c=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`,h=()=>'\n  :host([label-type="floating"]) {\n    position: relative;\n  }\n  :host([label-type="floating"][has-label]) [slot="label"] {\n    padding: 0;\n  }\n  :host([label-type="floating"][has-label]) > ::part(label) {\n    z-index: 1;\n    padding: 0;\n    width: auto;\n  }\n  '},73208:(t,e,n)=>{n.d(e,{b:()=>r});var i=n(78591);class r extends i.n{constructor(t,e){super(t,"input","input",{initializer:(t,n)=>{n.value&&(t.value=n.value),n.type&&t.setAttribute("type",n.type),t.id=this.defaultId,"function"==typeof e&&e(t)},useUniqueId:!0})}}},20422:(t,e,n)=>{n.d(e,{j:()=>r});var i=n(73406);const r=t=>class extends((0,i.L)(t)){static get properties(){return{autocomplete:{type:String},autocorrect:{type:String},autocapitalize:{type:String,reflectToAttribute:!0}}}static get delegateAttrs(){return[...super.delegateAttrs,"autocapitalize","autocomplete","autocorrect"]}get __data(){return this.__dataValue||{}}set __data(t){this.__dataValue=t}_inputElementChanged(t){super._inputElementChanged(t),t&&(t.value&&t.value!==this.value&&(console.warn(`Please define value on the <${this.localName}> component!`),t.value=""),this.value&&(t.value=this.value))}_setFocused(t){super._setFocused(t),!t&&document.hasFocus()&&this.validate()}_onInput(t){super._onInput(t),this.invalid&&this.validate()}_valueChanged(t,e){super._valueChanged(t,e),void 0!==e&&this.invalid&&this.validate()}}},18005:(t,e,n)=>{n.d(e,{n:()=>h}),n(13553);var i=n(74241),r=n(52807),o=n(12521),l=n(34463),a=n(62743),s=n(46570),p=n(73208),d=n(20422),u=n(46729);const c=t=>class extends((0,d.j)(t)){static get properties(){return{maxlength:{type:Number},minlength:{type:Number},pattern:{type:String}}}static get delegateAttrs(){return[...super.delegateAttrs,"maxlength","minlength","pattern"]}static get constraints(){return[...super.constraints,"maxlength","minlength","pattern"]}constructor(){super(),this._setType("text")}get clearElement(){return this.$.clearButton}ready(){super.ready(),this.addController(new p.b(this,(t=>{this._setInputElement(t),this._setFocusElement(t),this.stateTarget=t,this.ariaTarget=t}))),this.addController(new u.v(this.inputElement,this._labelController))}};(0,s.hC)("vaadin-text-field",a.J,{moduleId:"vaadin-text-field-styles"});class h extends(c((0,s.Tb)((0,o.S)(i.H3)))){static get is(){return"vaadin-text-field"}static get template(){return i.dy`
+"use strict";(self.webpackChunk_descope_web_components_ui=self.webpackChunk_descope_web_components_ui||[]).push([[2934],{56417:(t,e,n)=>{n.d(e,{f:()=>p,z:()=>d});var i=n(94978),r=n(4447),o=n(2061),l=n(54567),a=n(54201);const p=(0,l.iY)("text-field"),s=["type","label-type","copy-to-clipboard"],d=(0,o.qC)((0,i.yk)({mappings:r.Z}),i.e4,(0,i.dj)({proxyProps:["value","selectionStart"],useProxyTargets:!0}),i.Ae,(t=>class extends t{static get observedAttributes(){return s.concat(t.observedAttributes||[])}icon;init(){super.init?.()}renderCopyToClipboard(t){if(!t)return void this.icon?.remove();const e={icon:"vaadin:copy-o",title:"Copy",style:"cursor: pointer"},n={icon:"vaadin:check-circle-o",title:"Copied",style:"cursor: initial"};this.icon=Object.assign(document.createElement("vaadin-icon"),{slot:"suffix",...e}),this.baseElement.appendChild(this.icon),this.icon.addEventListener("click",(()=>{navigator.clipboard.writeText(this.value),Object.assign(this.icon,n),setTimeout((()=>{Object.assign(this.icon,e)}),5e3)}))}onLabelClick(){this.focus()}attributeChangedCallback(t,e,n){super.attributeChangeCallback?.(t,e,n),"type"===t&&this.baseElement._setType(n),e!==n&&("label-type"===t?"floating"===n?this.addEventListener("click",this.onLabelClick):this.removeEventListener("click",this.onLabelClick):"copy-to-clipboard"===t&&this.renderCopyToClipboard("true"===n))}}))((0,i.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(${d.cssVarList.inputOutlineWidth}) + var(${d.cssVarList.inputOutlineOffset}));\n        box-sizing: border-box;\n\t\t\t}\n      :host(:is([readonly], [disabled])) ::slotted(:is(input, textarea):placeholder-shown) {\n        opacity: 1;\n      }\n\n      vaadin-text-field[label-type="floating"]:not([focused])[readonly] > input:placeholder-shown {\n        opacity: 0;\n      }\n      vaadin-text-field[label-type="floating"]:not([focused])[disabled] > input:placeholder-shown {\n        opacity: 0;\n      }\n      ${(0,a.Wf)("vaadin-text-field")}\n\t\t\t${(0,a.bi)(d.cssVarList)}\n\t\t\t${(0,a.wm)("vaadin-text-field",d.cssVarList)}\n      ${(0,a.bz)()}\n\n      vaadin-text-field vaadin-icon {\n        align-self: center;\n      }\n\t\t`,excludeAttrsSync:["tabindex"],componentName:p}))},19357:(t,e,n)=>{n.r(e),n.d(e,{TextFieldClass:()=>i.z}),n(79789),n(56594),n(57911);var i=n(56417);customElements.define(i.f,i.z)},4447:(t,e,n)=>{n.d(e,{Z:()=>v});const{host:i,label:r,placeholder:o,requiredIndicator:l,inputField:a,input:p,inputMask:s,helperText:d,errorMessage:u,disabledPlaceholder:c,inputDisabled:h,inputIcon:b,externalInput:y,externalInputDisabled:g,externalPlaceholder:f,externalDisabledPlaceholder:m}={host:{selector:()=>":host"},label:{selector:"::part(label)"},requiredIndicator:{selector:"[required]::part(required-indicator)::after"},placeholder:[{selector:"> input:placeholder-shown"},{selector:()=>":host::slotted(input:placeholder-shown)"}],disabledPlaceholder:{selector:"> input:disabled::placeholder"},inputField:{selector:"::part(input-field)"},input:{selector:"input"},inputMask:{selector:"::part(input-field)::before"},inputDisabled:{selector:"input:disabled"},helperText:{selector:"::part(helper-text)"},errorMessage:{selector:"::part(error-message)"},inputIcon:{selector:"vaadin-icon"},externalInput:{selector:()=>"::slotted(input)"},externalInputDisabled:{selector:()=>"::slotted(input:disabled)"},externalPlaceholder:{selector:()=>"::slotted(input:placeholder-shown)"},externalDisabledPlaceholder:{selector:()=>"::slotted(input:disabled::placeholder)"}},v={fontSize:[{},i],fontFamily:[r,a,d,u],labelFontSize:{...r,property:"font-size"},labelFontWeight:{...r,property:"font-weight"},labelTextColor:[{...r,property:"color"},{...l,property:"color"},{...r,property:"-webkit-text-fill-color"},{...l,property:"-webkit-text-fill-color"}],hostWidth:{...i,property:"width"},hostMinWidth:{...i,property:"min-width"},hostDirection:{...i,property:"direction"},inputBackgroundColor:[{...a,property:"background-color"},{...s,property:"background-color"}],errorMessageTextColor:{...u,property:"color"},helperTextColor:{...d,property:"-webkit-text-fill-color"},inputValueTextColor:[{...a,property:"color"},{...h,property:"-webkit-text-fill-color"},{...g,property:"-webkit-text-fill-color"}],inputCaretTextColor:[{...p,property:"caret-color"},{...y,property:"caret-color"}],labelRequiredIndicator:{...l,property:"content"},inputBorderColor:{...a,property:"border-color"},inputBorderWidth:{...a,property:"border-width"},inputBorderStyle:{...a,property:"border-style"},inputBorderRadius:{...a,property:"border-radius"},inputHeight:{...a,property:"height"},inputHorizontalPadding:[{...p,property:"padding-left"},{...p,property:"padding-right"},{...y,property:"padding-left"},{...y,property:"padding-right"}],inputOutlineColor:{...a,property:"outline-color"},inputOutlineStyle:{...a,property:"outline-style"},inputOutlineWidth:{...a,property:"outline-width"},inputOutlineOffset:{...a,property:"outline-offset"},inputTextAlign:[{...p,property:"text-align"},{...y,property:"text-align"}],inputPlaceholderColor:[{selector:()=>":host input:placeholder-shown",property:"color"},{...f,property:"color"},{...o,property:"color"},{...c,property:"-webkit-text-fill-color"},{...m,property:"-webkit-text-fill-color"}],labelPosition:{...r,property:"position"},labelTopPosition:{...r,property:"top"},labelHorizontalPosition:[{...r,property:"left"},{...r,property:"right"}],inputTransformY:{...r,property:"transform"},inputTransition:{...r,property:"transition"},marginInlineStart:{...r,property:"margin-inline-start"},placeholderOpacity:[{selector:"> input:placeholder-shown",property:"opacity"},{...f,property:"opacity"}],inputVerticalAlignment:[{...a,property:"align-items"},{...y,property:"align-items"}],valueInputHeight:[{...p,property:"height"},{...y,property:"height"}],valueInputMarginBottom:[{...p,property:"margin-bottom"},{...y,property:"margin-bottom"}],inputIconOffset:[{...b,property:"margin-right"},{...b,property:"margin-left"}],inputIconSize:{...b,property:"font-size"},inputIconColor:{...b,property:"color"}}},54201:(t,e,n)=>{n.d(e,{B:()=>d,DY:()=>p,PH:()=>s,Pd:()=>l,TX:()=>r,Wf:()=>c,bi:()=>i,bz:()=>h,jI:()=>a,jl:()=>o,wm:()=>u});const i=t=>`\n    :host {\n        padding: calc(var(${t.inputOutlineWidth}) + var(${t.inputOutlineOffset}))\n    }\n`,r=t=>`\n    ${t} {\n        margin: 0;\n        padding: 0;\n        width: 100%;\n        height: 100%;\n        box-sizing: border-box;\n    }\n`,o=t=>`\n    ${t}::part(input-field) {\n        overflow: hidden;\n        padding: 0;\n        box-shadow: none;\n    }\n`,l=t=>`\n    ${t} > label,\n    ${t}::part(label),\n    ${t}::part(required-indicator) {\n        cursor: pointer;\n    }\n`,a=(t,e="input")=>`\n    ${t}[disabled] > ${e}:placeholder-shown,\n\t${t}[readonly] > ${e}:placeholder-shown {\n\t\topacity: 1;\n\t}\n`,p=()=>"\n    :host {\n        --vaadin-field-default-width: auto;\n        box-sizing: border-box;\n    }\n",s=t=>`\n    ${t}::part(input-field)::after {\n        opacity: 0;\n    }\n`,d=t=>`\n    ${t}::part(input-field)::after {\n        background: none;\n    }\n`,u=(t,e)=>`\n    ${r(t)}\n    ${l(t)}\n    ${a(t)}\n    ${o(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    ${d(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`,c=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`,h=()=>'\n  :host([label-type="floating"]) {\n    position: relative;\n  }\n  :host([label-type="floating"][has-label]) [slot="label"] {\n    padding: 0;\n  }\n  :host([label-type="floating"][has-label]) > ::part(label) {\n    z-index: 1;\n    padding: 0;\n    width: auto;\n  }\n  '},73208:(t,e,n)=>{n.d(e,{b:()=>r});var i=n(78591);class r extends i.n{constructor(t,e){super(t,"input","input",{initializer:(t,n)=>{n.value&&(t.value=n.value),n.type&&t.setAttribute("type",n.type),t.id=this.defaultId,"function"==typeof e&&e(t)},useUniqueId:!0})}}},20422:(t,e,n)=>{n.d(e,{j:()=>r});var i=n(73406);const r=t=>class extends((0,i.L)(t)){static get properties(){return{autocomplete:{type:String},autocorrect:{type:String},autocapitalize:{type:String,reflectToAttribute:!0}}}static get delegateAttrs(){return[...super.delegateAttrs,"autocapitalize","autocomplete","autocorrect"]}get __data(){return this.__dataValue||{}}set __data(t){this.__dataValue=t}_inputElementChanged(t){super._inputElementChanged(t),t&&(t.value&&t.value!==this.value&&(console.warn(`Please define value on the <${this.localName}> component!`),t.value=""),this.value&&(t.value=this.value))}_setFocused(t){super._setFocused(t),!t&&document.hasFocus()&&this.validate()}_onInput(t){super._onInput(t),this.invalid&&this.validate()}_valueChanged(t,e){super._valueChanged(t,e),void 0!==e&&this.invalid&&this.validate()}}},18005:(t,e,n)=>{n.d(e,{n:()=>h}),n(13553);var i=n(74241),r=n(52807),o=n(12521),l=n(34463),a=n(62743),p=n(46570),s=n(73208),d=n(20422),u=n(46729);const c=t=>class extends((0,d.j)(t)){static get properties(){return{maxlength:{type:Number},minlength:{type:Number},pattern:{type:String}}}static get delegateAttrs(){return[...super.delegateAttrs,"maxlength","minlength","pattern"]}static get constraints(){return[...super.constraints,"maxlength","minlength","pattern"]}constructor(){super(),this._setType("text")}get clearElement(){return this.$.clearButton}ready(){super.ready(),this.addController(new s.b(this,(t=>{this._setInputElement(t),this._setFocusElement(t),this.stateTarget=t,this.ariaTarget=t}))),this.addController(new u.v(this.inputElement,this._labelController))}};(0,p.hC)("vaadin-text-field",a.J,{moduleId:"vaadin-text-field-styles"});class h extends(c((0,p.Tb)((0,o.S)(i.H3)))){static get is(){return"vaadin-text-field"}static get template(){return i.dy`
       <style>
         [part='input-field'] {
           flex-grow: 0;

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

@@ -1 +1 @@
-"use strict";(self.webpackChunk_descope_web_components_ui=self.webpackChunk_descope_web_components_ui||[]).push([[9299,2528,3172,5130],{73878:(t,e,n)=>{n.d(e,{P:()=>a});var i=n(2061),r=n(94978),o=n(33346);const a=(...t)=>(0,i.qC)(r.wX,r.li,r.QT,r.mE)((0,o.s)(...t))},15964:(t,e,n)=>{n.d(e,{f:()=>l,n:()=>h});var i=n(2061),r=n(54567),o=n(94978),a=n(2549),s=n(93804);const l=(0,r.iY)("button"),{host:p,label:d,slottedIcon:c}={host:{selector:()=>":host"},label:{selector:"::part(label)"},slottedIcon:{selector:()=>"::slotted(descope-icon)"}};let u;const h=(0,i.qC)((0,o.yk)({mappings:{hostWidth:{property:"width"},hostHeight:{property:"height"},hostDirection:{...p,property:"direction"},fontSize:{},fontFamily:{},cursor:{},backgroundColor:{},outlineOffset:{},outlineColor:{},outlineStyle:{},outlineWidth:{},borderRadius:{},borderColor:{},borderStyle:{},borderWidth:{},verticalPadding:[{property:"padding-top"},{property:"padding-bottom"}],horizontalPadding:[{property:"padding-right",fallback:"0.875em"},{property:"padding-left",fallback:"0.875em"}],labelTextColor:{property:"color"},iconColor:{selector:()=>`::slotted(${a.q.componentName})`,property:a.q.cssVarList.fill},labelTextDecoration:{...d,property:"text-decoration"},labelSpacing:{...d,property:"gap"},textAlign:{...d,property:"justify-content",fallback:"center"},iconSize:[{...c,property:"width"},{...c,property:"height"}]}}),s.v,o.e4,o.Ae)((0,o.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${u}\n\t\t\tvaadin-button::part(label) { pointer-events: none; }\n\t\t\t:host {\n\t\t\t\tpadding: calc(var(${h.cssVarList.outlineWidth}) + var(${h.cssVarList.outlineOffset}));\n\t\t\t}\n      :host([full-width="true"]) {\n        width: var(${h.cssVarList.hostWidth});\n      }\n\t\t\tvaadin-button {\n\t\t\t\theight: calc(var(${h.cssVarList.hostHeight}) - var(${h.cssVarList.outlineWidth}) - var(${h.cssVarList.outlineOffset}));\n\t\t\t}\n\t\t\t[square="true"]:not([full-width="true"]) {\n\t\t\t\twidth: calc(var(${h.cssVarList.hostWidth}) - var(${h.cssVarList.outlineWidth}) - var(${h.cssVarList.outlineOffset}));\n        padding: 0;\n\t\t\t}\n\t\t`,excludeAttrsSync:["tabindex"],componentName:l})),{color:b,fontSize:m}=h.cssVarList;u=`\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(${b});\n\t\ttop: calc(50% - (var(${m}) / 2));\n\t\tleft: calc(50% - (var(${m}) / 2));\n\t\tborder-width: calc(var(${m}) / 10);\n\t\twidth: var(${m});\n\t\theight: var(${m});\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`},93804:(t,e,n)=>{n.d(e,{v:()=>i});const i=t=>class extends t{get isLoading(){return"true"===this.getAttribute("loading")}click(){this.isLoading||super.click()}}},72018:(t,e,n)=>{n.r(e),n.d(e,{ButtonClass:()=>i.n}),n(71721);var i=n(15964);customElements.define(i.f,i.n)},84049:(t,e,n)=>{n.d(e,{H:()=>v,f:()=>s});var i=n(2061),r=n(54567),o=n(54201),a=n(94978);const s=(0,r.iY)("combo-box"),{host:l,inputField:p,inputElement:d,placeholder:c,toggle:u,clearButton:h,label:b,requiredIndicator:m,helperText:g,errorMessage:y}={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)"}},v=(0,i.qC)((0,a.yk)({mappings:{hostWidth:{...l,property:"width"},hostDirection:{...l,property:"direction"},fontSize:[{},l],fontFamily:[b,c,p,g,y],labelFontSize:{...b,property:"font-size"},labelFontWeight:{...b,property:"font-weight"},labelTextColor:[{...b,property:"color"},{...m,property:"color"}],errorMessageTextColor:{...y,property:"color"},inputHeight:{...p,property:"height"},inputBackgroundColor:{...p,property:"background-color"},inputBorderColor:{...p,property:"border-color"},inputBorderWidth:{...p,property:"border-width"},inputBorderStyle:{...p,property:"border-style"},inputBorderRadius:{...p,property:"border-radius"},labelRequiredIndicator:{...m,property:"content"},inputValueTextColor:{...p,property:"color"},inputPlaceholderTextColor:{...c,property:"color"},inputDropdownButtonCursor:[{...u,property:"cursor"},{...h,property:"cursor"}],inputDropdownButtonColor:[{...u,property:"color"},{...h,property:"color"}],inputDropdownButtonSize:[{...u,property:"font-size"},{...h,property:"font-size"}],inputDropdownButtonOffset:[{...u,property:"margin-right"},{...u,property:"margin-left"}],inputOutlineColor:{...p,property:"outline-color"},inputOutlineWidth:{...p,property:"outline-width"},inputOutlineStyle:{...p,property:"outline-style"},inputOutlineOffset:{...p,property:"outline-offset"},inputHorizontalPadding:[{...d,property:"padding-left"},{...d,property:"padding-right"}],labelPosition:{...b,property:"position"},labelTopPosition:{...b,property:"top"},labelHorizontalPosition:[{...b,property:"left"},{...b,property:"right"}],inputTransformY:{...b,property:"transform"},inputTransition:{...b,property:"transition"},marginInlineStart:{...b,property:"margin-inline-start"},placeholderOpacity:{...c,property:"opacity"},inputVerticalAlignment:{...p,property:"align-items"},valueInputHeight:{...d,property:"height"},valueInputMarginBottom:{...d,property:"margin-bottom"},overlayBackground:{property:()=>v.cssVarList.overlay.backgroundColor},overlayTextColor:{property:()=>v.cssVarList.overlay.textColor},overlayBorder:{property:()=>v.cssVarList.overlay.border},overlayFontSize:{property:()=>v.cssVarList.overlay.fontSize},overlayFontFamily:{property:()=>v.cssVarList.overlay.fontFamily},overlayCursor:{property:()=>v.cssVarList.overlay.cursor},overlayItemBoxShadow:{property:()=>v.cssVarList.overlay.itemBoxShadow},overlayItemPaddingInlineStart:{property:()=>v.cssVarList.overlay.itemPaddingInlineStart},overlayItemPaddingInlineEnd:{property:()=>v.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{static get observedAttributes(){return["label-type"]}#t=({displayName:t,value:e,label:n})=>`<span data-name="${n}" data-id="${e}">${t||n}</span>`;#e;get defaultValue(){return this.getAttribute("default-value")}get renderItem(){return this.#t}set renderItem(t){this.#t=t,this.renderItems()}get data(){if(this.#e)return this.#e;const t=this.getAttribute("data");if(t)try{const e=JSON.parse(t);if(this.isValidDataType(e))return e}catch(t){console.error('could not parse data string from attribute "data" -',t.message)}return[]}set data(t){this.isValidDataType(t)&&(this.#e=t,this.renderItems())}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(n){if(!e.baseElement.items?.length)return;const i=e.customValueTransformFn(n)||"";i!==this.value&&t.set.call(this,i)}}})}#n(){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,n)=>{t.innerHTML=n.item.outerHTML}}#i(){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.#i(),this.renderItems(),(0,r.FX)(this,this.renderItems.bind(this),{includeAttrs:["data"]}),(0,r.P$)(this,this.#n.bind(this)),this.setDefaultValue(),this.baseElement.addEventListener("selected-item-changed",(()=>{this.dispatchEvent(new Event("input",{bubbles:!0,composed:!0}))}))}onLabelClick(){this.isReadOnly||this.isDisabled||(this.focus(),this.setAttribute("opened","true"))}attributeChangedCallback(t,e,n){super.attributeChangedCallback?.(t,e,n),e!==n&&"label-type"===t&&("floating"===n?this.addEventListener("click",this.onLabelClick):this.removeEventListener("click",this.onLabelClick))}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,o.bi)(v.cssVarList)}\n\t\t${(0,o.PH)("vaadin-combo-box")}\n\t\t${(0,o.jI)("vaadin-combo-box")}\n\t\t${(0,o.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\n    vaadin-combo-box::part(toggle-button),\n    vaadin-combo-box::part(clear-button) {\n      align-self: center;\n    }\n\n    vaadin-combo-box[label-type="floating"]:not([focused])[readonly] > input:placeholder-shown {\n      opacity: 0;\n    }\n    vaadin-combo-box[label-type="floating"]:not([focused])[disabled] > input:placeholder-shown {\n      opacity: 0;\n    }\n  \n    ${(0,o.Wf)("vaadin-combo-box")}\n    ${(0,o.bz)()}\n\t\t`,excludeAttrsSync:["tabindex","size","data"],componentName:s,includeForwardProps:["items","renderer","selectedItem"]}))},21294:(t,e,n)=>{n.r(e),n.d(e,{ComboBoxClass:()=>i.H}),n(47583);var i=n(84049);customElements.define(i.f,i.H)},2549:(t,e,n)=>{n.d(e,{f:()=>l,q:()=>d});var i=n(94978),r=n(33346),o=n(2061),a=n(54567),s=n(52118);const l=(0,a.iY)("icon");class p extends((0,r.s)({componentName:l,baseSelector:"slot"})){static get observedAttributes(){return["src"]}#r;constructor(){super(),this.attachShadow({mode:"open"}).innerHTML="\n\t\t<style>\n\t\t\t:host > slot {\n\t\t\t\tbox-sizing: border-box;\n\t\t\t\twidth: 100%;\n\t\t\t\theight: 100%;\n\t\t\t\tdisplay: flex;\n\t\t\t\toverflow: hidden;\n\t\t\t}\n\t\t\t:host {\n\t\t\t\tdisplay: inline-block;\n\t\t\t}\n\t\t</style>\n\t\t<slot></slot>\n\t"}get src(){return this.getAttribute("src")}updateFillColor(t){[t,...t.querySelectorAll("*[fill]")].forEach((t=>{t.setAttribute("fill",`var(${d.cssVarList.fill}, ${t.getAttribute("fill")||"''"})`)}))}attributeChangedCallback(t,e,n){super.attributeChangedCallback?.(t,e,n),e!==n&&"src"===t&&(0,s.I)(this.src).then((t=>{if(this.innerHTML="",t){const e=t.cloneNode(!0);this.updateFillColor(e),this.appendChild(e)}}))}}const d=(0,o.qC)((0,i.yk)({mappings:{fill:{}}}),i.e4,i.Ae)(p)},52118:(t,e,n)=>{n.d(e,{I:()=>a});var i=n(27856),r=n.n(i);const o=t=>{const e=r().sanitize(t,{USE_PROFILES:{svg:!0,svgFilters:!0}});return(new DOMParser).parseFromString(e,"image/svg+xml").querySelector("svg")},a=async t=>{try{let e;if((t=>t.startsWith("data:image/svg+xml;base64,"))(t)){const n=atob(t.slice(26));e=o(n)}else if("svg"===(t=>{const e=t.match(/\.([0-9a-z]+)(?:[\\?#]|$)/i);return e?e[1]:null})(t)){const n=await fetch(t),i=await n.text();e=o(i)}else e=(t=>{const e=document.createElement("img");return e.setAttribute("src",t),e})(t);return e.style.setProperty("width","100%"),e.style.setProperty("height","100%"),e}catch{return null}}},56417:(t,e,n)=>{n.d(e,{f:()=>l,z:()=>d});var i=n(94978),r=n(4447),o=n(2061),a=n(54567),s=n(54201);const l=(0,a.iY)("text-field"),p=["type","label-type","copy-to-clipboard"],d=(0,o.qC)((0,i.yk)({mappings:r.Z}),i.e4,(0,i.dj)({proxyProps:["value","selectionStart"],useProxyTargets:!0}),i.Ae,(t=>class extends t{static get observedAttributes(){return p.concat(t.observedAttributes||[])}icon;init(){super.init?.()}renderCopyToClipboard(t){if(!t)return void this.icon?.remove();const e={icon:"vaadin:copy-o",title:"Copy",style:"cursor: pointer"},n={icon:"vaadin:check-circle-o",title:"Copied",style:"cursor: initial"};this.icon=Object.assign(document.createElement("vaadin-icon"),{slot:"suffix",...e}),this.baseElement.appendChild(this.icon),this.icon.addEventListener("click",(()=>{navigator.clipboard.writeText(this.value),Object.assign(this.icon,n),setTimeout((()=>{Object.assign(this.icon,e)}),5e3)}))}onLabelClick(){this.focus()}attributeChangedCallback(t,e,n){super.attributeChangeCallback?.(t,e,n),"type"===t&&this.baseElement._setType(n),e!==n&&("label-type"===t?"floating"===n?this.addEventListener("click",this.onLabelClick):this.removeEventListener("click",this.onLabelClick):"copy-to-clipboard"===t&&this.renderCopyToClipboard("true"===n))}}))((0,i.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(${d.cssVarList.inputOutlineWidth}) + var(${d.cssVarList.inputOutlineOffset}));\n        box-sizing: border-box;\n\t\t\t}\n      :host(:is([readonly], [disabled])) ::slotted(:is(input, textarea):placeholder-shown) {\n        opacity: 1;\n      }\n\n      vaadin-text-field[label-type="floating"]:not([focused])[readonly] > input:placeholder-shown {\n        opacity: 0;\n      }\n      vaadin-text-field[label-type="floating"]:not([focused])[disabled] > input:placeholder-shown {\n        opacity: 0;\n      }\n      ${(0,s.Wf)("vaadin-text-field")}\n\t\t\t${(0,s.bi)(d.cssVarList)}\n\t\t\t${(0,s.wm)("vaadin-text-field",d.cssVarList)}\n      ${(0,s.bz)()}\n\n      vaadin-text-field vaadin-icon {\n        align-self: center;\n      }\n\t\t`,excludeAttrsSync:["tabindex"],componentName:l}))},19357:(t,e,n)=>{n.r(e),n.d(e,{TextFieldClass:()=>i.z}),n(79789),n(56594),n(57911);var i=n(56417);customElements.define(i.f,i.z)},4447:(t,e,n)=>{n.d(e,{Z:()=>m});const{host:i,label:r,placeholder:o,requiredIndicator:a,inputField:s,input:l,inputMask:p,helperText:d,errorMessage:c,disabledPlaceholder:u,inputDisabled:h,inputIcon:b}={host:{selector:()=>":host"},label:{selector:"::part(label)"},requiredIndicator:{selector:"[required]::part(required-indicator)::after"},placeholder:[{selector:"> input:placeholder-shown"},{selector:()=>":host::slotted(input:placeholder-shown)"}],disabledPlaceholder:{selector:"> input:disabled::placeholder"},inputField:{selector:"::part(input-field)"},input:{selector:"input"},inputMask:{selector:"::part(input-field)::before"},inputDisabled:{selector:"input:disabled"},helperText:{selector:"::part(helper-text)"},errorMessage:{selector:"::part(error-message)"},inputIcon:{selector:"vaadin-icon"}},m={fontSize:[{},i],fontFamily:[r,s,d,c],labelFontSize:{...r,property:"font-size"},labelFontWeight:{...r,property:"font-weight"},labelTextColor:[{...r,property:"color"},{...a,property:"color"},{...r,property:"-webkit-text-fill-color"},{...a,property:"-webkit-text-fill-color"}],hostWidth:{...i,property:"width"},hostMinWidth:{...i,property:"min-width"},hostDirection:{...i,property:"direction"},inputBackgroundColor:[{...s,property:"background-color"},{...p,property:"background-color"}],errorMessageTextColor:{...c,property:"color"},helperTextColor:{...d,property:"-webkit-text-fill-color"},inputValueTextColor:[{...s,property:"color"},{...h,property:"-webkit-text-fill-color"}],inputCaretTextColor:[{...l,property:"color"}],labelRequiredIndicator:{...a,property:"content"},inputBorderColor:{...s,property:"border-color"},inputBorderWidth:{...s,property:"border-width"},inputBorderStyle:{...s,property:"border-style"},inputBorderRadius:{...s,property:"border-radius"},inputHeight:{...s,property:"height"},inputHorizontalPadding:[{...l,property:"padding-left"},{...l,property:"padding-right"}],inputOutlineColor:{...s,property:"outline-color"},inputOutlineStyle:{...s,property:"outline-style"},inputOutlineWidth:{...s,property:"outline-width"},inputOutlineOffset:{...s,property:"outline-offset"},inputTextAlign:[{...l,property:"text-align"}],inputPlaceholderColor:[{selector:()=>":host input:placeholder-shown",property:"color"},{...o,property:"color"},{...u,property:"-webkit-text-fill-color"}],labelPosition:{...r,property:"position"},labelTopPosition:{...r,property:"top"},labelHorizontalPosition:[{...r,property:"left"},{...r,property:"right"}],inputTransformY:{...r,property:"transform"},inputTransition:{...r,property:"transition"},marginInlineStart:{...r,property:"margin-inline-start"},placeholderOpacity:[{selector:"> input:placeholder-shown",property:"opacity"}],inputVerticalAlignment:[{...s,property:"align-items"}],valueInputHeight:[{...l,property:"height"}],valueInputMarginBottom:[{...l,property:"margin-bottom"}],inputIconOffset:[{...b,property:"margin-right"},{...b,property:"margin-left"}],inputIconSize:{...b,property:"font-size"},inputIconColor:{...b,property:"color"}}},32138:(t,e,n)=>{n.d(e,{f:()=>s,k:()=>p});var i=n(94978),r=n(2061),o=n(54567),a=n(33346);const s=(0,o.iY)("text");class l extends((0,a.s)({componentName:s,baseSelector:":host > slot"})){constructor(){super(),this.attachShadow({mode:"open"}).innerHTML='\n    <style>\n      :host {\n        display: inline-block;\n        line-height: 1em;\n      }\n      :host > slot {\n        width: 100%;\n        display: inline-block;\n      }\n    </style>\n    <slot part="text-wrapper"></slot>\n    '}get hideWhenEmpty(){return"true"===this.getAttribute("hide-when-empty")}init(){super.init(),(0,o.P$)(this,(()=>{const t=!!this.childNodes.length;this.style.display=!t&&this.hideWhenEmpty?"none":""}))}}const p=(0,r.qC)((0,i.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:{}}}),i.e4,i.Ae)(l)},31876:(t,e,n)=>{n.r(e),n.d(e,{TextClass:()=>i.k});var i=n(32138);customElements.define(i.f,i.k)},36751:(t,e,n)=>{n.r(e);var i=n(73878),r=n(54567);const o=(0,r.iY)("mapping-item"),a=["size","bordered","readonly","full-width","disabled"],s=(0,i.P)({componentName:o,baseSelector:"div"});customElements.define(o,class extends s{static get observedAttributes(){return[].concat(s.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,n]=Object.entries(t)[0];this.valueInput.value=n,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,r.oP)(this,this.valueInput,{includeAttrs:a}),(0,r.oP)(this,this.attributeInput,{includeAttrs:[...a,"options"],mapAttrs:{options:"data"}}),(0,r.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,n){super.attributeChangedCallback?.(t,e,n),"separator"===t&&this.handleSeparatorChange(),"invalid"===t&&this.#o(n)}})},97819:(t,e,n)=>{n.d(e,{Z:()=>s,f:()=>o});var i=n(73878),r=n(54567);const o=(0,r.iY)("mappings-field-internal"),a=(0,i.P)({componentName:o,baseSelector:"div"}),s=class extends a{#a;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,r.oP)(this,e,{includeAttrs:["size","full-width","separator","options","disabled"]}),setTimeout((()=>{this.setCustomValidity(""),e.addEventListener("mapping-item-removed",(()=>{e===this.#a&&(this.resetInvalidIndication(),this.#a=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 n=t.length;n<e.length;n++)this.mappingsContainerEle.removeChild(e[n]);t.forEach(((t,n)=>{const i=e[n];if(i)i.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,r.oP)(this,t,{includeAttrs:["disabled"]})}#s(){this.labelsEle.style.display=this.items.length?"grid":"none"}init(){this.addEventListener("focus",(t=>{t.isTrusted&&(this.#a||this.items[0]||this.querySelector("descope-button")).focus()})),super.init?.(),this.initLabels(),this.initAddButton(),this.addEventListener("input",(()=>{this.mappingsContainerEle.contains(this.#a)&&this.#a?.checkValidity()&&(this.resetInvalidIndication(),this.#a.removeAttribute("invalid"),this.#a=void 0)})),(0,r.P$)(this.mappingsContainerEle,this.#s.bind(this))}resetInvalidIndication(){this.removeAttribute("invalid")}getValidity(){const t=this.items.find((t=>!t.checkValidity()));return t?t.validity:{}}#l(t){t&&(this.#a=this.items.find((t=>!t.checkValidity())),this.#a?.reportValidity(),this.#a?.setAttribute("invalid","true"))}attributeChangedCallback(t,e,n){super.attributeChangedCallback?.(t,e,n),"label-value"!==t&&"label-attr"!==t||this.initLabels(),"button-label"===t&&this.initAddButton(),"invalid"===t&&this.#l("true"===n),"readonly"===t&&this.toggleAttribute("inert","true"===n)}}},33820:(t,e,n)=>{n.r(e);var i=n(97819);customElements.define(i.f,i.Z)},5894:(t,e,n)=>{n.r(e),n.d(e,{MappingsFieldClass:()=>f}),n(99381),n(57911),n(56594);var i=n(94978),r=n(32138),o=n(2061),a=n(54567),s=n(97819);const l=(0,a.iY)("mappings-field"),{host:p,helperText:d,errorMessage:c,mappingItem:u,labels:h,labelsText:b,valueLabel:m,attrLabel:g,separator:y,labelsContainer:v}={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,o.qC)((0,i.yk)({mappings:{hostWidth:{...p,property:"width"},hostDirection:{...p,property:"direction"},fontSize:[{},p,{...y,property:"margin-top"}],fontFamily:[d,c,h],separatorFontSize:{...y,property:"font-size"},labelsFontSize:{...b,property:"font-size"},labelsLineHeight:[{...b,property:"line-height"},{...h,property:"line-height"}],labelTextColor:{...h,property:r.k.cssVarList.textColor},itemMarginBottom:{...u,property:"margin-bottom"},valueLabelMinWidth:{...m,property:"min-width"},attrLabelMinWidth:{...g,property:"min-width"},labelsMarginBottom:{...v,property:"margin-bottom"},separatorWidth:{},removeButtonWidth:{}}}),i.e4,(0,i.dj)({proxyProps:["value","selectionStart"],inputEvent:"input",proxyParentValidation:!0}),i.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      <${s.f}\n        tabindex="-1"\n      ></${s.f}>\n      `,this.baseElement.appendChild(t.content.cloneNode(!0)),this.inputElement=this.shadowRoot.querySelector(s.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,i.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        ${r.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}));n(31876),n(72018),n(19357),n(21294),n(33820),n(36751),customElements.define(l,f)},54201:(t,e,n)=>{n.d(e,{B:()=>d,DY:()=>l,PH:()=>p,Pd:()=>a,TX:()=>r,Wf:()=>u,bi:()=>i,bz:()=>h,jI:()=>s,jl:()=>o,wm:()=>c});const i=t=>`\n    :host {\n        padding: calc(var(${t.inputOutlineWidth}) + var(${t.inputOutlineOffset}))\n    }\n`,r=t=>`\n    ${t} {\n        margin: 0;\n        padding: 0;\n        width: 100%;\n        height: 100%;\n        box-sizing: border-box;\n    }\n`,o=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`,s=(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",p=t=>`\n    ${t}::part(input-field)::after {\n        opacity: 0;\n    }\n`,d=t=>`\n    ${t}::part(input-field)::after {\n        background: none;\n    }\n`,c=(t,e)=>`\n    ${r(t)}\n    ${a(t)}\n    ${s(t)}\n    ${o(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    ${d(t)}\n    ${(t=>`\n    ${t}::before {\n\t\theight: unset;\n\t}\n`)(t)}\n    ${(t=>`\n    ${t} > input {\n        -webkit-mask-image: none;\n        min-height: 0;\n        box-sizing: border-box;\n    }\n`)(t)}\n    ${(t=>`\n    ${t}::part(input-field)::after {\n        border: none;\n    }\n`)(t)}\n`,u=t=>`\n    :host ::part(error-message) {\n      direction: ltr;\n    }\n    :host([required]) ::part(required-indicator) {\n      width: 1em;\n      display: inline-flex;\n    }\n    :host([required]) ::part(required-indicator)::after {\n      position: static;\n    }\n    :host([has-label]) ::part(label) {\n      padding-right: 0;\n      padding-bottom: 0;\n      display: flex;\n      width: 100%;\n    }\n    ${t} [slot="label"] {\n      max-width: calc(100% - 1em);\n      overflow: hidden;\n      text-overflow: ellipsis;\n      padding-bottom: 0.5em;\n    }\n`,h=()=>'\n  :host([label-type="floating"]) {\n    position: relative;\n  }\n  :host([label-type="floating"][has-label]) [slot="label"] {\n    padding: 0;\n  }\n  :host([label-type="floating"][has-label]) > ::part(label) {\n    z-index: 1;\n    padding: 0;\n    width: auto;\n  }\n  '}}]);
+"use strict";(self.webpackChunk_descope_web_components_ui=self.webpackChunk_descope_web_components_ui||[]).push([[9299,2528,3172,5130],{73878:(t,e,r)=>{r.d(e,{P:()=>a});var n=r(2061),i=r(94978),o=r(33346);const a=(...t)=>(0,n.qC)(i.wX,i.li,i.QT,i.mE)((0,o.s)(...t))},15964:(t,e,r)=>{r.d(e,{f:()=>s,n:()=>h});var n=r(2061),i=r(54567),o=r(94978),a=r(2549),l=r(93804);const s=(0,i.iY)("button"),{host:p,label:d,slottedIcon:c}={host:{selector:()=>":host"},label:{selector:"::part(label)"},slottedIcon:{selector:()=>"::slotted(descope-icon)"}};let u;const h=(0,n.qC)((0,o.yk)({mappings:{hostWidth:{property:"width"},hostHeight:{property:"height"},hostDirection:{...p,property:"direction"},fontSize:{},fontFamily:{},cursor:{},backgroundColor:{},outlineOffset:{},outlineColor:{},outlineStyle:{},outlineWidth:{},borderRadius:{},borderColor:{},borderStyle:{},borderWidth:{},verticalPadding:[{property:"padding-top"},{property:"padding-bottom"}],horizontalPadding:[{property:"padding-right",fallback:"0.875em"},{property:"padding-left",fallback:"0.875em"}],labelTextColor:{property:"color"},iconColor:{selector:()=>`::slotted(${a.q.componentName})`,property:a.q.cssVarList.fill},labelTextDecoration:{...d,property:"text-decoration"},labelSpacing:{...d,property:"gap"},textAlign:{...d,property:"justify-content",fallback:"center"},iconSize:[{...c,property:"width"},{...c,property:"height"}]}}),l.v,o.e4,o.Ae)((0,o.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${u}\n\t\t\tvaadin-button::part(label) { pointer-events: none; }\n\t\t\t:host {\n\t\t\t\tpadding: calc(var(${h.cssVarList.outlineWidth}) + var(${h.cssVarList.outlineOffset}));\n\t\t\t}\n      :host([full-width="true"]) {\n        width: var(${h.cssVarList.hostWidth});\n      }\n\t\t\tvaadin-button {\n\t\t\t\theight: calc(var(${h.cssVarList.hostHeight}) - var(${h.cssVarList.outlineWidth}) - var(${h.cssVarList.outlineOffset}));\n\t\t\t}\n\t\t\t[square="true"]:not([full-width="true"]) {\n\t\t\t\twidth: calc(var(${h.cssVarList.hostWidth}) - var(${h.cssVarList.outlineWidth}) - var(${h.cssVarList.outlineOffset}));\n        padding: 0;\n\t\t\t}\n\t\t`,excludeAttrsSync:["tabindex"],componentName:s})),{color:b,fontSize:m}=h.cssVarList;u=`\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(${b});\n\t\ttop: calc(50% - (var(${m}) / 2));\n\t\tleft: calc(50% - (var(${m}) / 2));\n\t\tborder-width: calc(var(${m}) / 10);\n\t\twidth: var(${m});\n\t\theight: var(${m});\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`},93804:(t,e,r)=>{r.d(e,{v:()=>n});const n=t=>class extends t{get isLoading(){return"true"===this.getAttribute("loading")}click(){this.isLoading||super.click()}}},72018:(t,e,r)=>{r.r(e),r.d(e,{ButtonClass:()=>n.n}),r(71721);var n=r(15964);customElements.define(n.f,n.n)},84049:(t,e,r)=>{r.d(e,{H:()=>v,f:()=>l});var n=r(2061),i=r(54567),o=r(54201),a=r(94978);const l=(0,i.iY)("combo-box"),{host:s,inputField:p,inputElement:d,placeholder:c,toggle:u,clearButton:h,label:b,requiredIndicator:m,helperText:y,errorMessage:g}={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)"}},v=(0,n.qC)((0,a.yk)({mappings:{hostWidth:{...s,property:"width"},hostDirection:{...s,property:"direction"},fontSize:[{},s],fontFamily:[b,c,p,y,g],labelFontSize:{...b,property:"font-size"},labelFontWeight:{...b,property:"font-weight"},labelTextColor:[{...b,property:"color"},{...m,property:"color"}],errorMessageTextColor:{...g,property:"color"},inputHeight:{...p,property:"height"},inputBackgroundColor:{...p,property:"background-color"},inputBorderColor:{...p,property:"border-color"},inputBorderWidth:{...p,property:"border-width"},inputBorderStyle:{...p,property:"border-style"},inputBorderRadius:{...p,property:"border-radius"},labelRequiredIndicator:{...m,property:"content"},inputValueTextColor:{...p,property:"color"},inputPlaceholderTextColor:{...c,property:"color"},inputDropdownButtonCursor:[{...u,property:"cursor"},{...h,property:"cursor"}],inputDropdownButtonColor:[{...u,property:"color"},{...h,property:"color"}],inputDropdownButtonSize:[{...u,property:"font-size"},{...h,property:"font-size"}],inputDropdownButtonOffset:[{...u,property:"margin-right"},{...u,property:"margin-left"}],inputOutlineColor:{...p,property:"outline-color"},inputOutlineWidth:{...p,property:"outline-width"},inputOutlineStyle:{...p,property:"outline-style"},inputOutlineOffset:{...p,property:"outline-offset"},inputHorizontalPadding:[{...d,property:"padding-left"},{...d,property:"padding-right"}],labelPosition:{...b,property:"position"},labelTopPosition:{...b,property:"top"},labelHorizontalPosition:[{...b,property:"left"},{...b,property:"right"}],inputTransformY:{...b,property:"transform"},inputTransition:{...b,property:"transition"},marginInlineStart:{...b,property:"margin-inline-start"},placeholderOpacity:{...c,property:"opacity"},inputVerticalAlignment:{...p,property:"align-items"},valueInputHeight:{...d,property:"height"},valueInputMarginBottom:{...d,property:"margin-bottom"},overlayBackground:{property:()=>v.cssVarList.overlay.backgroundColor},overlayTextColor:{property:()=>v.cssVarList.overlay.textColor},overlayBorder:{property:()=>v.cssVarList.overlay.border},overlayFontSize:{property:()=>v.cssVarList.overlay.fontSize},overlayFontFamily:{property:()=>v.cssVarList.overlay.fontFamily},overlayCursor:{property:()=>v.cssVarList.overlay.cursor},overlayItemBoxShadow:{property:()=>v.cssVarList.overlay.itemBoxShadow},overlayItemPaddingInlineStart:{property:()=>v.cssVarList.overlay.itemPaddingInlineStart},overlayItemPaddingInlineEnd:{property:()=>v.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{static get observedAttributes(){return["label-type"]}#t=({displayName:t,value:e,label:r})=>`<span data-name="${r}" data-id="${e}">${t||r}</span>`;#e;get defaultValue(){return this.getAttribute("default-value")}get renderItem(){return this.#t}set renderItem(t){this.#t=t,this.renderItems()}get data(){if(this.#e)return this.#e;const t=this.getAttribute("data");if(t)try{const e=JSON.parse(t);if(this.isValidDataType(e))return e}catch(t){console.error('could not parse data string from attribute "data" -',t.message)}return[]}set data(t){this.isValidDataType(t)&&(this.#e=t,this.renderItems())}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(r){if(!e.baseElement.items?.length)return;const n=e.customValueTransformFn(r)||"";n!==this.value&&t.set.call(this,n)}}})}#r(){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,r)=>{t.innerHTML=r.item.outerHTML}}#n(){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.#n(),this.renderItems(),(0,i.FX)(this,this.renderItems.bind(this),{includeAttrs:["data"]}),(0,i.P$)(this,this.#r.bind(this)),this.setDefaultValue(),this.baseElement.addEventListener("selected-item-changed",(()=>{this.dispatchEvent(new Event("input",{bubbles:!0,composed:!0}))}))}onLabelClick(){this.isReadOnly||this.isDisabled||(this.focus(),this.setAttribute("opened","true"))}attributeChangedCallback(t,e,r){super.attributeChangedCallback?.(t,e,r),e!==r&&"label-type"===t&&("floating"===r?this.addEventListener("click",this.onLabelClick):this.removeEventListener("click",this.onLabelClick))}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,o.bi)(v.cssVarList)}\n\t\t${(0,o.PH)("vaadin-combo-box")}\n\t\t${(0,o.jI)("vaadin-combo-box")}\n\t\t${(0,o.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\n    vaadin-combo-box::part(toggle-button),\n    vaadin-combo-box::part(clear-button) {\n      align-self: center;\n    }\n\n    vaadin-combo-box[label-type="floating"]:not([focused])[readonly] > input:placeholder-shown {\n      opacity: 0;\n    }\n    vaadin-combo-box[label-type="floating"]:not([focused])[disabled] > input:placeholder-shown {\n      opacity: 0;\n    }\n  \n    ${(0,o.Wf)("vaadin-combo-box")}\n    ${(0,o.bz)()}\n\t\t`,excludeAttrsSync:["tabindex","size","data"],componentName:l,includeForwardProps:["items","renderer","selectedItem"]}))},21294:(t,e,r)=>{r.r(e),r.d(e,{ComboBoxClass:()=>n.H}),r(47583);var n=r(84049);customElements.define(n.f,n.H)},2549:(t,e,r)=>{r.d(e,{f:()=>s,q:()=>d});var n=r(94978),i=r(33346),o=r(2061),a=r(54567),l=r(52118);const s=(0,a.iY)("icon");class p extends((0,i.s)({componentName:s,baseSelector:"slot"})){static get observedAttributes(){return["src"]}#i;constructor(){super(),this.attachShadow({mode:"open"}).innerHTML="\n\t\t<style>\n\t\t\t:host > slot {\n\t\t\t\tbox-sizing: border-box;\n\t\t\t\twidth: 100%;\n\t\t\t\theight: 100%;\n\t\t\t\tdisplay: flex;\n\t\t\t\toverflow: hidden;\n\t\t\t}\n\t\t\t:host {\n\t\t\t\tdisplay: inline-block;\n\t\t\t}\n\t\t</style>\n\t\t<slot></slot>\n\t"}get src(){return this.getAttribute("src")}updateFillColor(t){[t,...t.querySelectorAll("*[fill]")].forEach((t=>{t.setAttribute("fill",`var(${d.cssVarList.fill}, ${t.getAttribute("fill")||"''"})`)}))}attributeChangedCallback(t,e,r){super.attributeChangedCallback?.(t,e,r),e!==r&&"src"===t&&(0,l.I)(this.src).then((t=>{if(this.innerHTML="",t){const e=t.cloneNode(!0);this.updateFillColor(e),this.appendChild(e)}}))}}const d=(0,o.qC)((0,n.yk)({mappings:{fill:{}}}),n.e4,n.Ae)(p)},52118:(t,e,r)=>{r.d(e,{I:()=>a});var n=r(27856),i=r.n(n);const o=t=>{const e=i().sanitize(t,{USE_PROFILES:{svg:!0,svgFilters:!0}});return(new DOMParser).parseFromString(e,"image/svg+xml").querySelector("svg")},a=async t=>{try{let e;if((t=>t.startsWith("data:image/svg+xml;base64,"))(t)){const r=atob(t.slice(26));e=o(r)}else if("svg"===(t=>{const e=t.match(/\.([0-9a-z]+)(?:[\\?#]|$)/i);return e?e[1]:null})(t)){const r=await fetch(t),n=await r.text();e=o(n)}else e=(t=>{const e=document.createElement("img");return e.setAttribute("src",t),e})(t);return e.style.setProperty("width","100%"),e.style.setProperty("height","100%"),e}catch{return null}}},56417:(t,e,r)=>{r.d(e,{f:()=>s,z:()=>d});var n=r(94978),i=r(4447),o=r(2061),a=r(54567),l=r(54201);const s=(0,a.iY)("text-field"),p=["type","label-type","copy-to-clipboard"],d=(0,o.qC)((0,n.yk)({mappings:i.Z}),n.e4,(0,n.dj)({proxyProps:["value","selectionStart"],useProxyTargets:!0}),n.Ae,(t=>class extends t{static get observedAttributes(){return p.concat(t.observedAttributes||[])}icon;init(){super.init?.()}renderCopyToClipboard(t){if(!t)return void this.icon?.remove();const e={icon:"vaadin:copy-o",title:"Copy",style:"cursor: pointer"},r={icon:"vaadin:check-circle-o",title:"Copied",style:"cursor: initial"};this.icon=Object.assign(document.createElement("vaadin-icon"),{slot:"suffix",...e}),this.baseElement.appendChild(this.icon),this.icon.addEventListener("click",(()=>{navigator.clipboard.writeText(this.value),Object.assign(this.icon,r),setTimeout((()=>{Object.assign(this.icon,e)}),5e3)}))}onLabelClick(){this.focus()}attributeChangedCallback(t,e,r){super.attributeChangeCallback?.(t,e,r),"type"===t&&this.baseElement._setType(r),e!==r&&("label-type"===t?"floating"===r?this.addEventListener("click",this.onLabelClick):this.removeEventListener("click",this.onLabelClick):"copy-to-clipboard"===t&&this.renderCopyToClipboard("true"===r))}}))((0,n.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(${d.cssVarList.inputOutlineWidth}) + var(${d.cssVarList.inputOutlineOffset}));\n        box-sizing: border-box;\n\t\t\t}\n      :host(:is([readonly], [disabled])) ::slotted(:is(input, textarea):placeholder-shown) {\n        opacity: 1;\n      }\n\n      vaadin-text-field[label-type="floating"]:not([focused])[readonly] > input:placeholder-shown {\n        opacity: 0;\n      }\n      vaadin-text-field[label-type="floating"]:not([focused])[disabled] > input:placeholder-shown {\n        opacity: 0;\n      }\n      ${(0,l.Wf)("vaadin-text-field")}\n\t\t\t${(0,l.bi)(d.cssVarList)}\n\t\t\t${(0,l.wm)("vaadin-text-field",d.cssVarList)}\n      ${(0,l.bz)()}\n\n      vaadin-text-field vaadin-icon {\n        align-self: center;\n      }\n\t\t`,excludeAttrsSync:["tabindex"],componentName:s}))},19357:(t,e,r)=>{r.r(e),r.d(e,{TextFieldClass:()=>n.z}),r(79789),r(56594),r(57911);var n=r(56417);customElements.define(n.f,n.z)},4447:(t,e,r)=>{r.d(e,{Z:()=>f});const{host:n,label:i,placeholder:o,requiredIndicator:a,inputField:l,input:s,inputMask:p,helperText:d,errorMessage:c,disabledPlaceholder:u,inputDisabled:h,inputIcon:b,externalInput:m,externalInputDisabled:y,externalPlaceholder:g,externalDisabledPlaceholder:v}={host:{selector:()=>":host"},label:{selector:"::part(label)"},requiredIndicator:{selector:"[required]::part(required-indicator)::after"},placeholder:[{selector:"> input:placeholder-shown"},{selector:()=>":host::slotted(input:placeholder-shown)"}],disabledPlaceholder:{selector:"> input:disabled::placeholder"},inputField:{selector:"::part(input-field)"},input:{selector:"input"},inputMask:{selector:"::part(input-field)::before"},inputDisabled:{selector:"input:disabled"},helperText:{selector:"::part(helper-text)"},errorMessage:{selector:"::part(error-message)"},inputIcon:{selector:"vaadin-icon"},externalInput:{selector:()=>"::slotted(input)"},externalInputDisabled:{selector:()=>"::slotted(input:disabled)"},externalPlaceholder:{selector:()=>"::slotted(input:placeholder-shown)"},externalDisabledPlaceholder:{selector:()=>"::slotted(input:disabled::placeholder)"}},f={fontSize:[{},n],fontFamily:[i,l,d,c],labelFontSize:{...i,property:"font-size"},labelFontWeight:{...i,property:"font-weight"},labelTextColor:[{...i,property:"color"},{...a,property:"color"},{...i,property:"-webkit-text-fill-color"},{...a,property:"-webkit-text-fill-color"}],hostWidth:{...n,property:"width"},hostMinWidth:{...n,property:"min-width"},hostDirection:{...n,property:"direction"},inputBackgroundColor:[{...l,property:"background-color"},{...p,property:"background-color"}],errorMessageTextColor:{...c,property:"color"},helperTextColor:{...d,property:"-webkit-text-fill-color"},inputValueTextColor:[{...l,property:"color"},{...h,property:"-webkit-text-fill-color"},{...y,property:"-webkit-text-fill-color"}],inputCaretTextColor:[{...s,property:"caret-color"},{...m,property:"caret-color"}],labelRequiredIndicator:{...a,property:"content"},inputBorderColor:{...l,property:"border-color"},inputBorderWidth:{...l,property:"border-width"},inputBorderStyle:{...l,property:"border-style"},inputBorderRadius:{...l,property:"border-radius"},inputHeight:{...l,property:"height"},inputHorizontalPadding:[{...s,property:"padding-left"},{...s,property:"padding-right"},{...m,property:"padding-left"},{...m,property:"padding-right"}],inputOutlineColor:{...l,property:"outline-color"},inputOutlineStyle:{...l,property:"outline-style"},inputOutlineWidth:{...l,property:"outline-width"},inputOutlineOffset:{...l,property:"outline-offset"},inputTextAlign:[{...s,property:"text-align"},{...m,property:"text-align"}],inputPlaceholderColor:[{selector:()=>":host input:placeholder-shown",property:"color"},{...g,property:"color"},{...o,property:"color"},{...u,property:"-webkit-text-fill-color"},{...v,property:"-webkit-text-fill-color"}],labelPosition:{...i,property:"position"},labelTopPosition:{...i,property:"top"},labelHorizontalPosition:[{...i,property:"left"},{...i,property:"right"}],inputTransformY:{...i,property:"transform"},inputTransition:{...i,property:"transition"},marginInlineStart:{...i,property:"margin-inline-start"},placeholderOpacity:[{selector:"> input:placeholder-shown",property:"opacity"},{...g,property:"opacity"}],inputVerticalAlignment:[{...l,property:"align-items"},{...m,property:"align-items"}],valueInputHeight:[{...s,property:"height"},{...m,property:"height"}],valueInputMarginBottom:[{...s,property:"margin-bottom"},{...m,property:"margin-bottom"}],inputIconOffset:[{...b,property:"margin-right"},{...b,property:"margin-left"}],inputIconSize:{...b,property:"font-size"},inputIconColor:{...b,property:"color"}}},32138:(t,e,r)=>{r.d(e,{f:()=>l,k:()=>p});var n=r(94978),i=r(2061),o=r(54567),a=r(33346);const l=(0,o.iY)("text");class s extends((0,a.s)({componentName:l,baseSelector:":host > slot"})){constructor(){super(),this.attachShadow({mode:"open"}).innerHTML='\n    <style>\n      :host {\n        display: inline-block;\n        line-height: 1em;\n      }\n      :host > slot {\n        width: 100%;\n        display: inline-block;\n      }\n    </style>\n    <slot part="text-wrapper"></slot>\n    '}get hideWhenEmpty(){return"true"===this.getAttribute("hide-when-empty")}init(){super.init(),(0,o.P$)(this,(()=>{const t=!!this.childNodes.length;this.style.display=!t&&this.hideWhenEmpty?"none":""}))}}const p=(0,i.qC)((0,n.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:{}}}),n.e4,n.Ae)(s)},31876:(t,e,r)=>{r.r(e),r.d(e,{TextClass:()=>n.k});var n=r(32138);customElements.define(n.f,n.k)},36751:(t,e,r)=>{r.r(e);var n=r(73878),i=r(54567);const o=(0,i.iY)("mapping-item"),a=["size","bordered","readonly","full-width","disabled"],l=(0,n.P)({componentName:o,baseSelector:"div"});customElements.define(o,class extends l{static get observedAttributes(){return[].concat(l.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,r]=Object.entries(t)[0];this.valueInput.value=r,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,i.oP)(this,this.valueInput,{includeAttrs:a}),(0,i.oP)(this,this.attributeInput,{includeAttrs:[...a,"options"],mapAttrs:{options:"data"}}),(0,i.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,r){super.attributeChangedCallback?.(t,e,r),"separator"===t&&this.handleSeparatorChange(),"invalid"===t&&this.#o(r)}})},97819:(t,e,r)=>{r.d(e,{Z:()=>l,f:()=>o});var n=r(73878),i=r(54567);const o=(0,i.iY)("mappings-field-internal"),a=(0,n.P)({componentName:o,baseSelector:"div"}),l=class extends a{#a;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,i.oP)(this,e,{includeAttrs:["size","full-width","separator","options","disabled"]}),setTimeout((()=>{this.setCustomValidity(""),e.addEventListener("mapping-item-removed",(()=>{e===this.#a&&(this.resetInvalidIndication(),this.#a=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 r=t.length;r<e.length;r++)this.mappingsContainerEle.removeChild(e[r]);t.forEach(((t,r)=>{const n=e[r];if(n)n.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,i.oP)(this,t,{includeAttrs:["disabled"]})}#l(){this.labelsEle.style.display=this.items.length?"grid":"none"}init(){this.addEventListener("focus",(t=>{t.isTrusted&&(this.#a||this.items[0]||this.querySelector("descope-button")).focus()})),super.init?.(),this.initLabels(),this.initAddButton(),this.addEventListener("input",(()=>{this.mappingsContainerEle.contains(this.#a)&&this.#a?.checkValidity()&&(this.resetInvalidIndication(),this.#a.removeAttribute("invalid"),this.#a=void 0)})),(0,i.P$)(this.mappingsContainerEle,this.#l.bind(this))}resetInvalidIndication(){this.removeAttribute("invalid")}getValidity(){const t=this.items.find((t=>!t.checkValidity()));return t?t.validity:{}}#s(t){t&&(this.#a=this.items.find((t=>!t.checkValidity())),this.#a?.reportValidity(),this.#a?.setAttribute("invalid","true"))}attributeChangedCallback(t,e,r){super.attributeChangedCallback?.(t,e,r),"label-value"!==t&&"label-attr"!==t||this.initLabels(),"button-label"===t&&this.initAddButton(),"invalid"===t&&this.#s("true"===r),"readonly"===t&&this.toggleAttribute("inert","true"===r)}}},33820:(t,e,r)=>{r.r(e);var n=r(97819);customElements.define(n.f,n.Z)},5894:(t,e,r)=>{r.r(e),r.d(e,{MappingsFieldClass:()=>f}),r(99381),r(57911),r(56594);var n=r(94978),i=r(32138),o=r(2061),a=r(54567),l=r(97819);const s=(0,a.iY)("mappings-field"),{host:p,helperText:d,errorMessage:c,mappingItem:u,labels:h,labelsText:b,valueLabel:m,attrLabel:y,separator:g,labelsContainer:v}={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,o.qC)((0,n.yk)({mappings:{hostWidth:{...p,property:"width"},hostDirection:{...p,property:"direction"},fontSize:[{},p,{...g,property:"margin-top"}],fontFamily:[d,c,h],separatorFontSize:{...g,property:"font-size"},labelsFontSize:{...b,property:"font-size"},labelsLineHeight:[{...b,property:"line-height"},{...h,property:"line-height"}],labelTextColor:{...h,property:i.k.cssVarList.textColor},itemMarginBottom:{...u,property:"margin-bottom"},valueLabelMinWidth:{...m,property:"min-width"},attrLabelMinWidth:{...y,property:"min-width"},labelsMarginBottom:{...v,property:"margin-bottom"},separatorWidth:{},removeButtonWidth:{}}}),n.e4,(0,n.dj)({proxyProps:["value","selectionStart"],inputEvent:"input",proxyParentValidation:!0}),n.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      <${l.f}\n        tabindex="-1"\n      ></${l.f}>\n      `,this.baseElement.appendChild(t.content.cloneNode(!0)),this.inputElement=this.shadowRoot.querySelector(l.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,n.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        ${i.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:s}));r(31876),r(72018),r(19357),r(21294),r(33820),r(36751),customElements.define(s,f)},54201:(t,e,r)=>{r.d(e,{B:()=>d,DY:()=>s,PH:()=>p,Pd:()=>a,TX:()=>i,Wf:()=>u,bi:()=>n,bz:()=>h,jI:()=>l,jl:()=>o,wm:()=>c});const n=t=>`\n    :host {\n        padding: calc(var(${t.inputOutlineWidth}) + var(${t.inputOutlineOffset}))\n    }\n`,i=t=>`\n    ${t} {\n        margin: 0;\n        padding: 0;\n        width: 100%;\n        height: 100%;\n        box-sizing: border-box;\n    }\n`,o=t=>`\n    ${t}::part(input-field) {\n        overflow: hidden;\n        padding: 0;\n        box-shadow: none;\n    }\n`,a=t=>`\n    ${t} > label,\n    ${t}::part(label),\n    ${t}::part(required-indicator) {\n        cursor: pointer;\n    }\n`,l=(t,e="input")=>`\n    ${t}[disabled] > ${e}:placeholder-shown,\n\t${t}[readonly] > ${e}:placeholder-shown {\n\t\topacity: 1;\n\t}\n`,s=()=>"\n    :host {\n        --vaadin-field-default-width: auto;\n        box-sizing: border-box;\n    }\n",p=t=>`\n    ${t}::part(input-field)::after {\n        opacity: 0;\n    }\n`,d=t=>`\n    ${t}::part(input-field)::after {\n        background: none;\n    }\n`,c=(t,e)=>`\n    ${i(t)}\n    ${a(t)}\n    ${l(t)}\n    ${o(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    ${d(t)}\n    ${(t=>`\n    ${t}::before {\n\t\theight: unset;\n\t}\n`)(t)}\n    ${(t=>`\n    ${t} > input {\n        -webkit-mask-image: none;\n        min-height: 0;\n        box-sizing: border-box;\n    }\n`)(t)}\n    ${(t=>`\n    ${t}::part(input-field)::after {\n        border: none;\n    }\n`)(t)}\n`,u=t=>`\n    :host ::part(error-message) {\n      direction: ltr;\n    }\n    :host([required]) ::part(required-indicator) {\n      width: 1em;\n      display: inline-flex;\n    }\n    :host([required]) ::part(required-indicator)::after {\n      position: static;\n    }\n    :host([has-label]) ::part(label) {\n      padding-right: 0;\n      padding-bottom: 0;\n      display: flex;\n      width: 100%;\n    }\n    ${t} [slot="label"] {\n      max-width: calc(100% - 1em);\n      overflow: hidden;\n      text-overflow: ellipsis;\n      padding-bottom: 0.5em;\n    }\n`,h=()=>'\n  :host([label-type="floating"]) {\n    position: relative;\n  }\n  :host([label-type="floating"][has-label]) [slot="label"] {\n    padding: 0;\n  }\n  :host([label-type="floating"][has-label]) > ::part(label) {\n    z-index: 1;\n    padding: 0;\n    width: auto;\n  }\n  '}}]);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@descope/web-components-ui",
-  "version": "1.0.371",
+  "version": "1.0.372",
   "description": "",
   "main": "dist/cjs/index.cjs.js",
   "module": "dist/index.esm.js",

package/src/components/descope-email-field/EmailFieldClass.js

@@ -4,6 +4,7 @@ import {
   createProxy,
   proxyInputMixin,
   componentNameValidationMixin,
+  externalInputMixin,
 } from '../../mixins';
 import textFieldMappings from '../descope-text-field/textFieldMappings';
 import { compose } from '../../helpers';
@@ -31,6 +32,8 @@ const customMixin = (superclass) =>
       if (!this.getAttribute('autocomplete')) {
         this.setAttribute('autocomplete', defaultAutocomplete);
       }
+
+      this.createExternalInput();
     }
   };
 
@@ -39,6 +42,11 @@ export const EmailFieldClass = compose(
     mappings: textFieldMappings,
   }),
   draggableMixin,
+  externalInputMixin({
+    inputType: 'text',
+    autocompleteType: 'username',
+    includeAttrs: ['disabled', 'readonly', 'pattern'],
+  }),
   proxyInputMixin({ proxyProps: ['value', 'selectionStart'], useProxyTargets: true }),
   componentNameValidationMixin,
   customMixin
@@ -70,6 +78,10 @@ export const EmailFieldClass = compose(
       :host ::slotted(*) {
         -webkit-mask-image: none;
       }
+
+      vaadin-email-field[external-input="true"] > input:not(:placeholder-shown) {
+        opacity: 0;
+      }
 		`,
     excludeAttrsSync: ['tabindex'],
     componentName,

package/src/components/descope-new-password/NewPasswordClass.js

@@ -17,11 +17,14 @@ const customMixin = (superclass) =>
 
       const template = document.createElement('template');
 
+      const externalInputAttr = this.getAttribute('external-input');
+
       template.innerHTML = `
 			<${descopeInternalComponentName}
 				name="new-password"
 				tabindex="-1"
 				slot="input"
+        external-input="${externalInputAttr}"
 			>
       </${descopeInternalComponentName}>
 			`;
@@ -30,6 +33,10 @@ const customMixin = (superclass) =>
 
       this.inputElement = this.shadowRoot.querySelector(descopeInternalComponentName);
 
+      if (this.getAttribute('external-input') === 'true') {
+        this.initExternalInput();
+      }
+
       forwardAttrs(this, this.inputElement, {
         includeAttrs: [
           'password-label',
@@ -54,6 +61,34 @@ const customMixin = (superclass) =>
         ],
       });
     }
+
+    createSlottedExternalInput(node, slotName) {
+      const externalInput = node.querySelector('input');
+      const slotEle = document.createElement('slot');
+
+      const targetSlot = externalInput.getAttribute('slot');
+
+      slotEle.setAttribute('name', slotName);
+      slotEle.setAttribute('slot', targetSlot);
+
+      node.appendChild(slotEle);
+
+      // move external input
+      externalInput.setAttribute('slot', slotName);
+      externalInput.setAttribute('data-hidden-input', 'true');
+
+      this.appendChild(externalInput);
+    }
+
+    initExternalInput() {
+      // get descope input components
+      this.passwordInput = this.inputElement.querySelector('[data-id="password"]');
+      this.confirmInput = this.inputElement.querySelector('[data-id="confirm"]');
+
+      // create slots for external password input
+      this.createSlottedExternalInput(this.passwordInput, 'external-password-input');
+      this.createSlottedExternalInput(this.confirmInput, 'external-confirm-input');
+    }
   };
 
 const {

package/src/components/descope-new-password/descope-new-password-internal/NewPasswordInternal.js

@@ -105,24 +105,26 @@ class NewPasswordInternal extends BaseInputClass {
         this.passwordInput.focus();
       }
     });
-
     super.init?.();
     this.renderInputs(this.hasConfirm, this.hasValidation);
   }
 
   renderInputs() {
+    const hasExternalInput = this.getAttribute('external-input') === 'true';
     const template = `
       <div>
         <descope-password
           autocomplete="new-password"
           manual-visibility-toggle="true"
           data-id="password"
+          external-input="${hasExternalInput}"
         ></descope-password>
         <descope-policy-validation></descope-policy-validation>
       </div>
       <descope-password
         autocomplete="new-password"
         manual-visibility-toggle="true"
+        external-input="${hasExternalInput}"
         data-id="confirm"
       ></descope-password>
     `;

package/src/components/descope-password/PasswordClass.js

@@ -4,6 +4,7 @@ import {
   createProxy,
   proxyInputMixin,
   componentNameValidationMixin,
+  externalInputMixin,
 } from '../../mixins';
 import { compose } from '../../helpers';
 import { getComponentName } from '../../helpers/componentHelpers';
@@ -33,6 +34,15 @@ const customMixin = (superclass) =>
       this.origSetPasswordVisible = this.baseElement._setPasswordVisible;
       this.origSetFocused = this.baseElement._setFocused;
       this.baseElement._setFocused = this.setFocus.bind(this);
+
+      this.initExternalInput();
+    }
+
+    initExternalInput() {
+      const externalInput = this.createExternalInput();
+      if (externalInput) {
+        this.handlePasswordVisibility(externalInput);
+      }
     }
 
     get caretPosition() {
@@ -47,6 +57,7 @@ const customMixin = (superclass) =>
         setTimeout(() => {
           origTogglePasswordVisibility();
           this.inputElement.setSelectionRange(this.caretPosition, this.caretPosition);
+          return false;
         });
       };
     }
@@ -73,6 +84,44 @@ const customMixin = (superclass) =>
     attributeChangedCallback(attrName, oldValue, newValue) {
       super.attributeChangedCallback?.(attrName, oldValue, newValue);
     }
+
+    // override vaadin's password visibility toggle.
+    // we need this override in order to to resolve the external input `focus` race condition,
+    // which is caused due to the focus sync between the two inputs.
+    handlePasswordVisibility(externalInput) {
+      // disable vaadin's `__boundRevealButtonMouseDown` mouse-down event lisetener
+      const origBoundRevealButtonMouseDown = this.baseElement.__boundRevealButtonMouseDown;
+      this.baseElement
+        .querySelector('vaadin-password-field-button')
+        .removeEventListener('mousedown', origBoundRevealButtonMouseDown);
+
+      // disable vaadin's `_passwordVisibleChanged` observer
+      this.baseElement._passwordVisibleChanged = () => {};
+
+      // override vaadin's `_togglePasswordVisibility`
+      this.baseElement._togglePasswordVisibility = () => {
+        const currVisibility = externalInput.getAttribute('type');
+        if (currVisibility === 'password') {
+          this.showPasswordVisibility(externalInput);
+        } else {
+          this.hidePasswordVisibility(externalInput);
+        }
+      };
+    }
+
+    showPasswordVisibility(input) {
+      // handle input element's type
+      input.setAttribute('type', 'text');
+      // handle vaadin's `password-visible` attribute
+      this.setAttribute('password-visible', 'true');
+    }
+
+    hidePasswordVisibility(input) {
+      // handle input element's type
+      input.setAttribute('type', 'password');
+      // handle vaadin's `password-visible` attribute
+      this.setAttribute('password-visible', 'false');
+    }
   };
 
 const {
@@ -167,7 +216,12 @@ export const PasswordClass = compose(
     },
   }),
   draggableMixin,
-  proxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),
+  externalInputMixin({
+    inputType: 'password',
+    includeAttrs: ['disabled', 'readonly', 'pattern', 'type', 'autocomplete'],
+    noBlurDispatch: true,
+  }),
+  proxyInputMixin({ proxyProps: ['value', 'selectionStart'], useProxyTargets: true }),
   componentNameValidationMixin,
   passwordDraggableMixin,
   customMixin
@@ -231,6 +285,10 @@ export const PasswordClass = compose(
       ::part(reveal-button) {
         align-self: center;
       }
+
+      vaadin-password-field[external-input="true"] > input:not(:placeholder-shown) {
+        opacity: 0;
+      }
 		`,
     excludeAttrsSync: ['tabindex'],
     componentName,

package/src/components/descope-text-field/textFieldMappings.js

@@ -11,6 +11,10 @@ const {
   disabledPlaceholder,
   inputDisabled,
   inputIcon,
+  externalInput,
+  externalInputDisabled,
+  externalPlaceholder,
+  externalDisabledPlaceholder,
 } = {
   host: { selector: () => ':host' },
   label: { selector: '::part(label)' },
@@ -27,6 +31,10 @@ const {
   helperText: { selector: '::part(helper-text)' },
   errorMessage: { selector: '::part(error-message)' },
   inputIcon: { selector: 'vaadin-icon' },
+  externalInput: { selector: () => '::slotted(input)' },
+  externalInputDisabled: { selector: () => '::slotted(input:disabled)' },
+  externalPlaceholder: { selector: () => '::slotted(input:placeholder-shown)' },
+  externalDisabledPlaceholder: { selector: () => '::slotted(input:disabled::placeholder)' },
 };
 
 export default {
@@ -59,8 +67,12 @@ export default {
   inputValueTextColor: [
     { ...inputField, property: 'color' },
     { ...inputDisabled, property: '-webkit-text-fill-color' },
+    { ...externalInputDisabled, property: '-webkit-text-fill-color' },
+  ],
+  inputCaretTextColor: [
+    { ...input, property: 'caret-color' },
+    { ...externalInput, property: 'caret-color' },
   ],
-  inputCaretTextColor: [{ ...input, property: 'color' }],
 
   labelRequiredIndicator: { ...requiredIndicator, property: 'content' },
 
@@ -73,6 +85,8 @@ export default {
   inputHorizontalPadding: [
     { ...input, property: 'padding-left' },
     { ...input, property: 'padding-right' },
+    { ...externalInput, property: 'padding-left' },
+    { ...externalInput, property: 'padding-right' },
   ],
 
   inputOutlineColor: { ...inputField, property: 'outline-color' },
@@ -80,12 +94,17 @@ export default {
   inputOutlineWidth: { ...inputField, property: 'outline-width' },
   inputOutlineOffset: { ...inputField, property: 'outline-offset' },
 
-  inputTextAlign: [{ ...input, property: 'text-align' }],
+  inputTextAlign: [
+    { ...input, property: 'text-align' },
+    { ...externalInput, property: 'text-align' },
+  ],
 
   inputPlaceholderColor: [
     { selector: () => ':host input:placeholder-shown', property: 'color' },
+    { ...externalPlaceholder, property: 'color' },
     { ...placeholder, property: 'color' },
     { ...disabledPlaceholder, property: '-webkit-text-fill-color' },
+    { ...externalDisabledPlaceholder, property: '-webkit-text-fill-color' },
   ],
 
   labelPosition: { ...label, property: 'position' },
@@ -97,10 +116,22 @@ export default {
   inputTransformY: { ...label, property: 'transform' },
   inputTransition: { ...label, property: 'transition' },
   marginInlineStart: { ...label, property: 'margin-inline-start' },
-  placeholderOpacity: [{ selector: '> input:placeholder-shown', property: 'opacity' }],
-  inputVerticalAlignment: [{ ...inputField, property: 'align-items' }],
-  valueInputHeight: [{ ...input, property: 'height' }],
-  valueInputMarginBottom: [{ ...input, property: 'margin-bottom' }],
+  placeholderOpacity: [
+    { selector: '> input:placeholder-shown', property: 'opacity' },
+    { ...externalPlaceholder, property: 'opacity' },
+  ],
+  inputVerticalAlignment: [
+    { ...inputField, property: 'align-items' },
+    { ...externalInput, property: 'align-items' },
+  ],
+  valueInputHeight: [
+    { ...input, property: 'height' },
+    { ...externalInput, property: 'height' },
+  ],
+  valueInputMarginBottom: [
+    { ...input, property: 'margin-bottom' },
+    { ...externalInput, property: 'margin-bottom' },
+  ],
 
   inputIconOffset: [
     { ...inputIcon, property: 'margin-right' },