@descope/web-components-ui 1.0.300 → 1.0.301

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

@@ -1 +1 @@
-"use strict";(self.webpackChunk_descope_web_components_ui=self.webpackChunk_descope_web_components_ui||[]).push([[9476,3172,5130,9299,9656,7433],{3878:(t,e,i)=>{i.d(e,{P:()=>o});var n=i(2061),r=i(4978),a=i(3346);const o=(...t)=>(0,n.qC)(r.wX,r.li,r.QT,r.mE)((0,a.s)(...t))},5964:(t,e,i)=>{i.d(e,{f:()=>s,n:()=>u});var n=i(2061),r=i(4567),a=i(4978),o=i(3804);const s=(0,r.iY)("button"),{host:l,label:p}={host:{selector:()=>":host"},label:{selector:"::part(label)"}};let d;const u=(0,n.qC)((0,a.yk)({mappings:{hostWidth:{property:"width"},hostHeight:{property:"height"},hostDirection:{...l,property:"direction"},fontSize:{},fontFamily:{},cursor:{},backgroundColor:{},outlineOffset:{},outlineColor:{},outlineStyle:{},outlineWidth:{},borderRadius:{},borderColor:{},borderStyle:{},borderWidth:{},verticalPadding:[{property:"padding-top"},{property:"padding-bottom"}],labelTextColor:{property:"color"},labelTextDecoration:{...p,property:"text-decoration"},labelSpacing:{...p,property:"gap"},textAlign:{...p,property:"justify-content",fallback:"center"}}}),o.v,a.e4,a.Ae)((0,a.DM)({slots:["","prefix","label","suffix"],wrappedEleName:"vaadin-button",style:()=>`\n\t\t\t\n\t:host {\n\t\tdisplay: inline-block;\n\t\tbox-sizing: border-box;\n\t}\n\tvaadin-button::before,\n\tvaadin-button::after {\n\t\topacity: 0;\n\t}\n\tvaadin-button {\n\t\tmargin: 0;\n\t\tmin-width: 0;\n\t\twidth: 100%;\n\t\theight: auto;\n\t\tbox-shadow: none;\n\t}\n\tvaadin-button::part(label) {\n\t\tpadding: 0;\n    width: 100%;\n\t}\n\tvaadin-button::part(prefix) {\n\t\tmargin-left: 0;\n\t\tmargin-right: 0;\n\t}\n\n\t\t\t\n\tvaadin-button::part(prefix),\n\tvaadin-button::part(label) {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t}\n\n\t\t\t${d}\n\t\t\tvaadin-button::part(label) { pointer-events: none; }\n\t\t\t:host {\n\t\t\t\tpadding: calc(var(${u.cssVarList.outlineWidth}) + var(${u.cssVarList.outlineOffset}));\n\t\t\t}\n      :host([full-width="true"]) {\n        width: var(${u.cssVarList.hostWidth});\n      }\n\t\t\tvaadin-button {\n\t\t\t\theight: calc(var(${u.cssVarList.hostHeight}) - var(${u.cssVarList.outlineWidth}) - var(${u.cssVarList.outlineOffset}));\n\t\t\t}\n\t\t\t[square="true"]:not([full-width="true"]) {\n\t\t\t\twidth: calc(var(${u.cssVarList.hostWidth}) - var(${u.cssVarList.outlineWidth}) - var(${u.cssVarList.outlineOffset}));\n        padding: 0;\n\t\t\t}\n\t\t`,excludeAttrsSync:["tabindex"],componentName:s})),{color:c,fontSize:h}=u.cssVarList;d=`\n\t@keyframes spin {\n\t\t0% { -webkit-transform: rotate(0deg); }\n\t\t100% { -webkit-transform: rotate(360deg); }\n\t}\n\t:host([loading="true"]) ::before {\n\t\tanimation: spin 2s linear infinite;\n\t\tposition: absolute;\n\t\tcontent: '';\n\t\tz-index: 1;\n\t\tbox-sizing: border-box;\n\t\tborder-radius: 50%;\n\t\tborder-bottom-color: transparent;\n\t\tborder-left-color: transparent;\n\t\tborder-style: solid;\n\t\tcolor: var(${c});\n\t\ttop: calc(50% - (var(${h}) / 2));\n\t\tleft: calc(50% - (var(${h}) / 2));\n\t\tborder-width: calc(var(${h}) / 10);\n\t\twidth: var(${h});\n\t\theight: var(${h});\n\t}\n\t:host([disabled="true"]),\n\t:host([loading="true"]) {\n\t\tpointer-events: none;\n\t}\n\t:host([loading="true"])::part(prefix),\n\t:host([loading="true"])::part(label) {\n\t\tvisibility: hidden;\n\t}\n`},3804:(t,e,i)=>{i.d(e,{v:()=>n});const n=t=>class extends t{get isLoading(){return"true"===this.getAttribute("loading")}click(){this.isLoading||super.click()}}},2018:(t,e,i)=>{i.r(e),i.d(e,{ButtonClass:()=>n.n}),i(1721);var n=i(5964);customElements.define(n.f,n.n)},4049:(t,e,i)=>{i.d(e,{H:()=>y,f:()=>s});var n=i(2061),r=i(4567),a=i(4201),o=i(4978);const s=(0,r.iY)("combo-box"),{host:l,inputField:p,inputElement:d,placeholder:u,toggle:c,clearButton:h,label:b,requiredIndicator:m,helperText:g,errorMessage:v}={host:{selector:()=>":host"},inputField:{selector:"::part(input-field)"},inputElement:{selector:"input"},placeholder:{selector:"> input:placeholder-shown"},toggle:{selector:"::part(toggle-button)"},clearButton:{selector:"::part(clear-button)"},label:{selector:"::part(label)"},requiredIndicator:{selector:"[required]::part(required-indicator)::after"},helperText:{selector:"::part(helper-text)"},errorMessage:{selector:"::part(error-message)"}},y=(0,n.qC)((0,o.yk)({mappings:{hostWidth:{...l,property:"width"},hostDirection:{...l,property:"direction"},fontSize:[{},l],fontFamily:[b,u,p,g,v],labelTextColor:[{...b,property:"color"},{...m,property:"color"}],errorMessageTextColor:{...v,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:{...u,property:"color"},inputDropdownButtonCursor:[{...c,property:"cursor"},{...h,property:"cursor"}],inputDropdownButtonColor:[{...c,property:"color"},{...h,property:"color"}],inputDropdownButtonSize:[{...c,property:"font-size"},{...h,property:"font-size"}],inputDropdownButtonOffset:[{...c,property:"margin-right"},{...c,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"}],overlayBackground:{property:()=>y.cssVarList.overlay.backgroundColor},overlayTextColor:{property:()=>y.cssVarList.overlay.textColor},overlayBorder:{property:()=>y.cssVarList.overlay.border},overlayFontSize:{property:()=>y.cssVarList.overlay.fontSize},overlayFontFamily:{property:()=>y.cssVarList.overlay.fontFamily},overlayCursor:{property:()=>y.cssVarList.overlay.cursor},overlayItemBoxShadow:{property:()=>y.cssVarList.overlay.itemBoxShadow},overlayItemPaddingInlineStart:{property:()=>y.cssVarList.overlay.itemPaddingInlineStart},overlayItemPaddingInlineEnd:{property:()=>y.cssVarList.overlay.itemPaddingInlineEnd}}}),o.e4,(0,o.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,o.dj)({proxyProps:["selectionStart"],inputEvent:"selected-item-changed"}),o.Ae,(t=>class extends t{#t=({displayName:t,value:e,label:i})=>`<span data-name="${i}" data-id="${e}">${t||i}</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(i){if(!e.baseElement.items?.length)return;const n=e.customValueTransformFn(i)||"";n!==this.value&&t.set.call(this,n)}}})}#i(){const t=this.shadowRoot.querySelector(this.baseSelector),e=Array.from(this.children);e.length&&(e.forEach((t=>{Object.defineProperty(t,"data-name",{value:t.getAttribute("data-name"),configurable:!0,writable:!0}),Object.defineProperty(t,"data-id",{value:t.getAttribute("data-id"),configurable:!0,writable:!0})})),t.items=e,setTimeout((()=>{this.handleSelectedItem()}),0)),t.renderer=(t,e,i)=>{t.innerHTML=i.item.outerHTML}}#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,r.FX)(this,this.renderItems.bind(this),{includeAttrs:["data"]}),(0,r.P$)(this,this.#i.bind(this)),this.setDefaultValue(),this.baseElement.addEventListener("selected-item-changed",(()=>{this.dispatchEvent(new Event("input",{bubbles:!0,composed:!0}))}))}setDefaultValue(){this.value=this.defaultValue}set value(t){if(t){const e=this.baseElement.items?.find((e=>e["data-id"]===t));e&&(this.baseElement.selectedItem=e)}else this.baseElement.selectedItem=void 0}get value(){return this.baseElement.selectedItem?.["data-id"]||""}}))((0,o.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,a.bi)(y.cssVarList)}\n\t\t${(0,a.PH)("vaadin-combo-box")}\n\t\t${(0,a.jI)("vaadin-combo-box")}\n\t\t${(0,a.Pd)("vaadin-combo-box")}\n\n\t\tvaadin-combo-box {\n\t\t\tpadding: 0;\n\t\t\twidth: 100%;\n\t\t}\n\t\tvaadin-combo-box::before {\n\t\t\theight: initial;\n\t\t}\n\t\tvaadin-combo-box [slot="input"] {\n\t\t\t-webkit-mask-image: none;\n\t\t\tmin-height: 0;\n\t\t\tbox-sizing: border-box;\n\t\t}\n\n\t\tvaadin-combo-box::part(input-field) {\n\t\t\tpadding: 0;\n\t\t\tbox-shadow: none;\n\t\t}\n    ${(0,a.Wf)("vaadin-combo-box")}\n\t\t`,excludeAttrsSync:["tabindex","size","data"],componentName:s,includeForwardProps:["items","renderer","selectedItem"]}))},1294:(t,e,i)=>{i.r(e),i.d(e,{ComboBoxClass:()=>n.H}),i(7583);var n=i(4049);customElements.define(n.f,n.H)},6417:(t,e,i)=>{i.d(e,{f:()=>l,z:()=>d});var n=i(4978),r=i(4447),a=i(2061),o=i(4567),s=i(4201);const l=(0,o.iY)("text-field"),p=["type"],d=(0,a.qC)((0,n.yk)({mappings:r.Z}),n.e4,(0,n.dj)({proxyProps:["value","selectionStart"]}),n.Ae,(t=>class extends t{static get observedAttributes(){return p.concat(t.observedAttributes||[])}attributeChangedCallback(t,e,i){super.attributeChangeCallback?.(t,e,i),"type"===t&&this.baseElement._setType(i)}}))((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      ${(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\t\t`,excludeAttrsSync:["tabindex"],componentName:l}))},9357:(t,e,i)=>{i.r(e),i.d(e,{TextFieldClass:()=>n.z}),i(9789);var n=i(6417);customElements.define(n.f,n.z)},4447:(t,e,i)=>{i.d(e,{Z:()=>h});const{host:n,label:r,placeholder:a,requiredIndicator:o,inputField:s,input:l,helperText:p,errorMessage:d,disabledPlaceholder:u,inputDisabled:c}={host:{selector:()=>":host"},label:{selector:"::part(label)"},requiredIndicator:{selector:"[required]::part(required-indicator)::after"},placeholder:{selector:"> input:placeholder-shown"},disabledPlaceholder:{selector:"> input:disabled::placeholder"},inputField:{selector:"::part(input-field)"},input:{selector:"input"},inputDisabled:{selector:"input:disabled"},helperText:{selector:"::part(helper-text)"},errorMessage:{selector:"::part(error-message)"}},h={fontSize:[{},n],fontFamily:[r,s,p,d],hostWidth:{...n,property:"width"},hostMinWidth:{...n,property:"min-width"},hostDirection:{...n,property:"direction"},inputBackgroundColor:{...s,property:"background-color"},labelTextColor:[{...r,property:"color"},{...o,property:"color"},{...r,property:"-webkit-text-fill-color"},{...o,property:"-webkit-text-fill-color"}],errorMessageTextColor:{...d,property:"color"},helperTextColor:{...p,property:"-webkit-text-fill-color"},inputValueTextColor:[{...s,property:"color"},{...c,property:"-webkit-text-fill-color"}],inputCaretTextColor:{...l,property:"color"},labelRequiredIndicator:{...o,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:[{...a,property:"color"},{...u,property:"-webkit-text-fill-color"}]}},6751:(t,e,i)=>{i.r(e);var n=i(3878),r=i(4567);const a=(0,r.iY)("mapping-item"),o=["size","bordered","readonly","full-width","disabled"],s=(0,n.P)({componentName:a,baseSelector:"div"});customElements.define(a,class extends s{static get observedAttributes(){return[].concat(s.observedAttributes||[],o,["separator","options","invalid","disabled"])}get separator(){return this.getAttribute("separator")||"map to"}get value(){const t=this.attributeInput.value,e=this.valueInput.value;return t&&e?{[t]:e}:null}set value(t){if(1!==Object.entries(t).length)return void console.error("descope-mapping item expected expects only one key-value pair in the value but received: ",t);const[e,i]=Object.entries(t)[0];this.valueInput.value=i,this.attributeInput.value=e,this.dispatchEvent(new InputEvent("input",{bubbles:!0,composed:!0}))}constructor(){super(),this.attachShadow({mode:"open"}).innerHTML=`\n      <style>\n        .wrapper {\n          display: flex;\n        }\n        .separator {\n          text-align: center;\n          flex-shrink: 0;\n        }\n      </style>\n      <div class="wrapper" part="wrapper">\n        <descope-text-field required="true"></descope-text-field>\n        <div class="separator" part="separator">${this.separator}</div>\n        <descope-combo-box\n          item-label-path="data-name"\n          item-value-path="data-id"\n          required="true"\n        >\n        </descope-combo-box>\n        <descope-button variant="link" mode="primary">\n          <vaadin-icon icon="vaadin:minus"></vaadin-icon>\n        </descope-button>\n      </div>\n\t`,this.valueInput=this.shadowRoot.querySelector("descope-text-field"),this.attributeInput=this.shadowRoot.querySelector("descope-combo-box"),this.inputs=[this.valueInput,this.attributeInput],this.removeButton=this.shadowRoot.querySelector("descope-button"),(0,r.oP)(this,this.valueInput,{includeAttrs:o}),(0,r.oP)(this,this.attributeInput,{includeAttrs:[...o,"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}#r(t){"true"===t&&(this.valueInput.value||(this.valueInput.setAttribute("invalid","true"),this.valueInput.setAttribute("error-message",this.defaultErrorMsgValueMissing)),this.attributeInput.value||(this.attributeInput.setAttribute("invalid","true"),this.attributeInput.setAttribute("error-message",this.defaultErrorMsgValueMissing)))}attributeChangedCallback(t,e,i){super.attributeChangedCallback?.(t,e,i),"separator"===t&&this.handleSeparatorChange(),"invalid"===t&&this.#r(i)}})},7819:(t,e,i)=>{i.d(e,{Z:()=>s,f:()=>a});var n=i(3878),r=i(4567);const a=(0,r.iY)("mappings-field-internal"),o=(0,n.P)({componentName:a,baseSelector:"div"}),s=class extends o{#a;static get observedAttributes(){return[].concat(o.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 i=t.length;i<e.length;i++)this.mappingsContainerEle.removeChild(e[i]);t.forEach(((t,i)=>{const n=e[i];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,r.oP)(this,t,{includeAttrs:["disabled"]})}#o(){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.#o.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,i){super.attributeChangedCallback?.(t,e,i),"label-value"!==t&&"label-attr"!==t||this.initLabels(),"button-label"===t&&this.initAddButton(),"invalid"===t&&this.#s("true"===i),"readonly"===t&&this.toggleAttribute("inert","true"===i)}}},3820:(t,e,i)=>{i.r(e);var n=i(7819);customElements.define(n.f,n.Z)},9227:(t,e,i)=>{i.r(e),i.d(e,{MappingsFieldClass:()=>f}),i(9381),i(7911),i(6594);var n=i(4978),r=i(1611),a=i(2061),o=i(4567),s=i(7819);const l=(0,o.iY)("mappings-field"),{host:p,helperText:d,errorMessage:u,mappingItem:c,labels:h,labelsText:b,valueLabel:m,attrLabel:g,separator:v,labelsContainer:y}={host:{selector:()=>":host"},helperText:{selector:"::part(helper-text)"},errorMessage:{selector:"::part(error-message)"},mappingItem:{selector:"descope-mapping-item::part(wrapper)"},labels:{selector:'descope-mappings-field-internal [part="labels"] descope-text'},labelsText:{selector:'descope-mappings-field-internal [part="labels"] descope-text::part(text-wrapper)'},valueLabel:{selector:'descope-mappings-field-internal [part="labels"] [part="value-label"]'},attrLabel:{selector:'descope-mappings-field-internal [part="labels"] [part="attr-label"]'},separator:{selector:"descope-mapping-item::part(separator)"},labelsContainer:{selector:'descope-mappings-field-internal [part="labels"]'}},f=(0,a.qC)((0,n.yk)({mappings:{hostWidth:{...p,property:"width"},hostDirection:{...p,property:"direction"},fontSize:[{},p,{...v,property:"margin-top"}],fontFamily:[d,u,h],separatorFontSize:{...v,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:{...c,property:"margin-bottom"},valueLabelMinWidth:{...m,property:"min-width"},attrLabelMinWidth:{...g,property:"min-width"},labelsMarginBottom:{...y,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      <${s.f}\n        tabindex="-1"\n      ></${s.f}>\n      `,this.baseElement.appendChild(t.content.cloneNode(!0)),this.inputElement=this.shadowRoot.querySelector(s.f),(0,o.oP)(this,this.inputElement,{includeAttrs:["size","full-width","label-value","label-attr","button-label","separator","options","default-values","invalid","readonly","disabled"]}),(0,o.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        ${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}));i(4803),i(2018),i(9357),i(1294),i(3820),i(6751),customElements.define(l,f)},6867:(t,e,i)=>{i.d(e,{Z:()=>s,f:()=>a});var n=i(3878),r=i(4567);const a=(0,r.iY)("saml-group-mappings-internal"),o=(0,n.P)({componentName:a,baseSelector:""}),s=class extends o{static get observedAttributes(){return["invalid"].concat(o.observedAttributes||[])}constructor(){super(),this.innerHTML='\n      <descope-text-field variant="body2" bordered="true"></descope-text-field>\n      <descope-mappings-field></descope-mappings-field>\n    ',this.groupInputElement=this.querySelector("descope-text-field"),this.mappingsElement=this.querySelector("descope-mappings-field")}resetInvalidIndication(){this.removeAttribute("invalid")}handleMappingsInvalidChange(t){t.includes("invalid")&&(this.mappingsElement.hasAttribute("invalid")||this.resetInvalidIndication())}initFocusHandler(){this.addEventListener("focus",(t=>{t.isTrusted&&(this.mappingsElement.checkValidity()?this.groupInputElement:this.mappingsElement).focus()}))}init(){this.initFocusHandler(),super.init?.(),(0,r.oP)(this,this.groupInputElement,{mapAttrs:{"label-group":"label"},includeAttrs:["size","label-group","readonly","disabled"]}),(0,r.oP)(this,this.mappingsElement,{includeAttrs:["size","full-width","label-value","label-attr","button-label","separator","options","readonly","disabled","data-errormessage-pattern-mismatch"]}),(0,r.FX)(this.mappingsElement,this.handleMappingsInvalidChange.bind(this),{includeAttrs:["invalid"]})}get value(){return{group:this.groupInputElement.value,mappings:this.mappingsElement.value}}set value(t){t?.group&&"string"==typeof t.group&&(this.groupInputElement.value=t.group),Array.isArray(t?.mappings)&&(this.mappingsElement.value=t.mappings)}getValidity(){return this.groupInputElement.checkValidity()?this.mappingsElement.checkValidity()?{}:this.mappingsElement.validity:this.groupInputElement.validity}#l(t){if(t){if(!this.groupInputElement.checkValidity())return void this.groupInputElement.setAttribute("invalid","true");this.mappingsElement.checkValidity()||this.mappingsElement.setAttribute("invalid","true")}}attributeChangedCallback(t,e,i){super.attributeChangedCallback?.(t,e,i),"invalid"===t&&this.#l("true"===i)}}},4115:(t,e,i)=>{i.r(e);var n=i(6867);customElements.define(n.f,n.Z)},3277:(t,e,i)=>{i.r(e),i.d(e,{SamlGroupMappingsClass:()=>d}),i(9381);var n=i(4978),r=i(2061),a=i(4567),o=i(6867);const s=(0,a.iY)("saml-group-mappings"),{host:l,groupInput:p}={host:{selector:()=>":host"},groupInput:{selector:"descope-text-field"}},d=(0,r.qC)((0,n.yk)({mappings:{hostWidth:{...l,property:"width"},hostDirection:{...l,property:"direction"},groupNameInputMarginBottom:{...p,property:"margin-bottom"}}}),n.e4,(0,n.dj)({proxyProps:["value","selectionStart"],inputEvent:"input",triggerValidationEvents:["mapping-item-added","mapping-item-removed"],proxyParentValidation:!0}),n.Ae,(t=>class extends t{init(){super.init?.();const t=document.createElement("template");t.innerHTML=`\n      <${o.f}\n        tabindex="-1"\n      ></${o.f}>\n      `,this.baseElement.appendChild(t.content.cloneNode(!0)),this.inputElement=this.shadowRoot.querySelector(o.f),(0,a.oP)(this,this.inputElement,{includeAttrs:["size","full-width","label-group","label-value","label-attr","button-label","separator","options","readonly","disabled"]}),(0,a.tg)(this,this.inputElement,{includeAttrs:["invalid"]})}}))((0,n.DM)({slots:[],wrappedEleName:"vaadin-custom-field",style:()=>"\n      :host {\n        display: inline-flex;\n        max-width: 100%;\n        direction: ltr;\n      }\n\n      vaadin-custom-field {\n        line-height: unset;\n        width: 100%;\n      }\n\n      descope-text-field {\n        width: auto;\n      }\n\n      descope-mappings-field {\n        display: block;\n      }\n    ",excludeAttrsSync:["tabindex","label-group","label-value","label-attr","button-label","separator","options","error-message"],componentName:s}));i(9357),i(9227),i(4115),customElements.define(s,d)},2663:(t,e,i)=>{i.d(e,{T:()=>r});var n=i(3346);const r=t=>{class e extends((0,n.s)({componentName:t,baseSelector:":host > slot"})){constructor(){super(),this.attachShadow({mode:"open"}).innerHTML='\n      <style>\n        :host {\n          display: inline-block;\n        }\n        :host > slot {\n          width: 100%;\n          display: inline-block;\n        }\n      </style>\n      <slot part="text-wrapper"></slot>\n      ',this.textSlot=this.shadowRoot.querySelector("slot")}}return e}},1611:(t,e,i)=>{i.d(e,{f:()=>l,k:()=>d});var n=i(4978),r=i(2061),a=i(4567),o=i(5753),s=i(2663);const l=(0,a.iY)("text"),p=(0,s.T)(l),d=(0,r.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,o.y)(p)},4803:(t,e,i)=>{i.r(e),i.d(e,{TextClass:()=>n.k});var n=i(1611);customElements.define(n.f,n.k)},5753:(t,e,i)=>{i.d(e,{y:()=>r});var n=i(4567);const r=t=>class extends t{get hideWhenEmpty(){return"true"===this.getAttribute("hide-when-empty")}init(){super.init(),(0,n.P$)(this,(()=>{const t=!!this.childNodes.length;this.style.display=!t&&this.hideWhenEmpty?"none":""}))}}},4201:(t,e,i)=>{i.d(e,{B:()=>d,DY:()=>l,PH:()=>p,Pd:()=>o,TX:()=>r,Wf:()=>c,bi:()=>n,jI:()=>s,jl:()=>a,wm:()=>u});const n=t=>`\n    :host {\n        padding: calc(var(${t.inputOutlineWidth}) + var(${t.inputOutlineOffset}))\n    }\n`,r=t=>`\n    ${t} {\n        margin: 0;\n        padding: 0;\n        width: 100%;\n        height: 100%;\n        box-sizing: border-box;\n    }\n`,a=t=>`\n    ${t}::part(input-field) {\n        overflow: hidden;\n        padding: 0;\n        box-shadow: none;\n    }\n`,o=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`,u=(t,e)=>`\n    ${r(t)}\n    ${o(t)}\n    ${s(t)}\n    ${a(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`}}]);
+"use strict";(self.webpackChunk_descope_web_components_ui=self.webpackChunk_descope_web_components_ui||[]).push([[9476,2528,3172,5130,9299,9656],{3878:(t,e,i)=>{i.d(e,{P:()=>o});var n=i(2061),r=i(4978),a=i(3346);const o=(...t)=>(0,n.qC)(r.wX,r.li,r.QT,r.mE)((0,a.s)(...t))},5964:(t,e,i)=>{i.d(e,{f:()=>s,n:()=>u});var n=i(2061),r=i(4567),a=i(4978),o=i(3804);const s=(0,r.iY)("button"),{host:l,label:p}={host:{selector:()=>":host"},label:{selector:"::part(label)"}};let d;const u=(0,n.qC)((0,a.yk)({mappings:{hostWidth:{property:"width"},hostHeight:{property:"height"},hostDirection:{...l,property:"direction"},fontSize:{},fontFamily:{},cursor:{},backgroundColor:{},outlineOffset:{},outlineColor:{},outlineStyle:{},outlineWidth:{},borderRadius:{},borderColor:{},borderStyle:{},borderWidth:{},verticalPadding:[{property:"padding-top"},{property:"padding-bottom"}],labelTextColor:{property:"color"},labelTextDecoration:{...p,property:"text-decoration"},labelSpacing:{...p,property:"gap"},textAlign:{...p,property:"justify-content",fallback:"center"}}}),o.v,a.e4,a.Ae)((0,a.DM)({slots:["","prefix","label","suffix"],wrappedEleName:"vaadin-button",style:()=>`\n\t\t\t\n\t:host {\n\t\tdisplay: inline-block;\n\t\tbox-sizing: border-box;\n\t}\n\tvaadin-button::before,\n\tvaadin-button::after {\n\t\topacity: 0;\n\t}\n\tvaadin-button {\n\t\tmargin: 0;\n\t\tmin-width: 0;\n\t\twidth: 100%;\n\t\theight: auto;\n\t\tbox-shadow: none;\n\t}\n\tvaadin-button::part(label) {\n\t\tpadding: 0;\n    width: 100%;\n\t}\n\tvaadin-button::part(prefix) {\n\t\tmargin-left: 0;\n\t\tmargin-right: 0;\n\t}\n\n\t\t\t\n\tvaadin-button::part(prefix),\n\tvaadin-button::part(label) {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t}\n\n\t\t\t${d}\n\t\t\tvaadin-button::part(label) { pointer-events: none; }\n\t\t\t:host {\n\t\t\t\tpadding: calc(var(${u.cssVarList.outlineWidth}) + var(${u.cssVarList.outlineOffset}));\n\t\t\t}\n      :host([full-width="true"]) {\n        width: var(${u.cssVarList.hostWidth});\n      }\n\t\t\tvaadin-button {\n\t\t\t\theight: calc(var(${u.cssVarList.hostHeight}) - var(${u.cssVarList.outlineWidth}) - var(${u.cssVarList.outlineOffset}));\n\t\t\t}\n\t\t\t[square="true"]:not([full-width="true"]) {\n\t\t\t\twidth: calc(var(${u.cssVarList.hostWidth}) - var(${u.cssVarList.outlineWidth}) - var(${u.cssVarList.outlineOffset}));\n        padding: 0;\n\t\t\t}\n\t\t`,excludeAttrsSync:["tabindex"],componentName:s})),{color:c,fontSize:h}=u.cssVarList;d=`\n\t@keyframes spin {\n\t\t0% { -webkit-transform: rotate(0deg); }\n\t\t100% { -webkit-transform: rotate(360deg); }\n\t}\n\t:host([loading="true"]) ::before {\n\t\tanimation: spin 2s linear infinite;\n\t\tposition: absolute;\n\t\tcontent: '';\n\t\tz-index: 1;\n\t\tbox-sizing: border-box;\n\t\tborder-radius: 50%;\n\t\tborder-bottom-color: transparent;\n\t\tborder-left-color: transparent;\n\t\tborder-style: solid;\n\t\tcolor: var(${c});\n\t\ttop: calc(50% - (var(${h}) / 2));\n\t\tleft: calc(50% - (var(${h}) / 2));\n\t\tborder-width: calc(var(${h}) / 10);\n\t\twidth: var(${h});\n\t\theight: var(${h});\n\t}\n\t:host([disabled="true"]),\n\t:host([loading="true"]) {\n\t\tpointer-events: none;\n\t}\n\t:host([loading="true"])::part(prefix),\n\t:host([loading="true"])::part(label) {\n\t\tvisibility: hidden;\n\t}\n`},3804:(t,e,i)=>{i.d(e,{v:()=>n});const n=t=>class extends t{get isLoading(){return"true"===this.getAttribute("loading")}click(){this.isLoading||super.click()}}},2018:(t,e,i)=>{i.r(e),i.d(e,{ButtonClass:()=>n.n}),i(1721);var n=i(5964);customElements.define(n.f,n.n)},4049:(t,e,i)=>{i.d(e,{H:()=>y,f:()=>s});var n=i(2061),r=i(4567),a=i(4201),o=i(4978);const s=(0,r.iY)("combo-box"),{host:l,inputField:p,inputElement:d,placeholder:u,toggle:c,clearButton:h,label:b,requiredIndicator:m,helperText:g,errorMessage:v}={host:{selector:()=>":host"},inputField:{selector:"::part(input-field)"},inputElement:{selector:"input"},placeholder:{selector:"> input:placeholder-shown"},toggle:{selector:"::part(toggle-button)"},clearButton:{selector:"::part(clear-button)"},label:{selector:"::part(label)"},requiredIndicator:{selector:"[required]::part(required-indicator)::after"},helperText:{selector:"::part(helper-text)"},errorMessage:{selector:"::part(error-message)"}},y=(0,n.qC)((0,o.yk)({mappings:{hostWidth:{...l,property:"width"},hostDirection:{...l,property:"direction"},fontSize:[{},l],fontFamily:[b,u,p,g,v],labelTextColor:[{...b,property:"color"},{...m,property:"color"}],errorMessageTextColor:{...v,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:{...u,property:"color"},inputDropdownButtonCursor:[{...c,property:"cursor"},{...h,property:"cursor"}],inputDropdownButtonColor:[{...c,property:"color"},{...h,property:"color"}],inputDropdownButtonSize:[{...c,property:"font-size"},{...h,property:"font-size"}],inputDropdownButtonOffset:[{...c,property:"margin-right"},{...c,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"}],overlayBackground:{property:()=>y.cssVarList.overlay.backgroundColor},overlayTextColor:{property:()=>y.cssVarList.overlay.textColor},overlayBorder:{property:()=>y.cssVarList.overlay.border},overlayFontSize:{property:()=>y.cssVarList.overlay.fontSize},overlayFontFamily:{property:()=>y.cssVarList.overlay.fontFamily},overlayCursor:{property:()=>y.cssVarList.overlay.cursor},overlayItemBoxShadow:{property:()=>y.cssVarList.overlay.itemBoxShadow},overlayItemPaddingInlineStart:{property:()=>y.cssVarList.overlay.itemPaddingInlineStart},overlayItemPaddingInlineEnd:{property:()=>y.cssVarList.overlay.itemPaddingInlineEnd}}}),o.e4,(0,o.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,o.dj)({proxyProps:["selectionStart"],inputEvent:"selected-item-changed"}),o.Ae,(t=>class extends t{#t=({displayName:t,value:e,label:i})=>`<span data-name="${i}" data-id="${e}">${t||i}</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(i){if(!e.baseElement.items?.length)return;const n=e.customValueTransformFn(i)||"";n!==this.value&&t.set.call(this,n)}}})}#i(){const t=this.shadowRoot.querySelector(this.baseSelector),e=Array.from(this.children);e.length&&(e.forEach((t=>{Object.defineProperty(t,"data-name",{value:t.getAttribute("data-name"),configurable:!0,writable:!0}),Object.defineProperty(t,"data-id",{value:t.getAttribute("data-id"),configurable:!0,writable:!0})})),t.items=e,setTimeout((()=>{this.handleSelectedItem()}),0)),t.renderer=(t,e,i)=>{t.innerHTML=i.item.outerHTML}}#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,r.FX)(this,this.renderItems.bind(this),{includeAttrs:["data"]}),(0,r.P$)(this,this.#i.bind(this)),this.setDefaultValue(),this.baseElement.addEventListener("selected-item-changed",(()=>{this.dispatchEvent(new Event("input",{bubbles:!0,composed:!0}))}))}setDefaultValue(){this.value=this.defaultValue}set value(t){if(t){const e=this.baseElement.items?.find((e=>e["data-id"]===t));e&&(this.baseElement.selectedItem=e)}else this.baseElement.selectedItem=void 0}get value(){return this.baseElement.selectedItem?.["data-id"]||""}}))((0,o.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,a.bi)(y.cssVarList)}\n\t\t${(0,a.PH)("vaadin-combo-box")}\n\t\t${(0,a.jI)("vaadin-combo-box")}\n\t\t${(0,a.Pd)("vaadin-combo-box")}\n\n\t\tvaadin-combo-box {\n\t\t\tpadding: 0;\n\t\t\twidth: 100%;\n\t\t}\n\t\tvaadin-combo-box::before {\n\t\t\theight: initial;\n\t\t}\n\t\tvaadin-combo-box [slot="input"] {\n\t\t\t-webkit-mask-image: none;\n\t\t\tmin-height: 0;\n\t\t\tbox-sizing: border-box;\n\t\t}\n\n\t\tvaadin-combo-box::part(input-field) {\n\t\t\tpadding: 0;\n\t\t\tbox-shadow: none;\n\t\t}\n    ${(0,a.Wf)("vaadin-combo-box")}\n\t\t`,excludeAttrsSync:["tabindex","size","data"],componentName:s,includeForwardProps:["items","renderer","selectedItem"]}))},1294:(t,e,i)=>{i.r(e),i.d(e,{ComboBoxClass:()=>n.H}),i(7583);var n=i(4049);customElements.define(n.f,n.H)},6417:(t,e,i)=>{i.d(e,{f:()=>l,z:()=>d});var n=i(4978),r=i(4447),a=i(2061),o=i(4567),s=i(4201);const l=(0,o.iY)("text-field"),p=["type"],d=(0,a.qC)((0,n.yk)({mappings:r.Z}),n.e4,(0,n.dj)({proxyProps:["value","selectionStart"]}),n.Ae,(t=>class extends t{static get observedAttributes(){return p.concat(t.observedAttributes||[])}attributeChangedCallback(t,e,i){super.attributeChangeCallback?.(t,e,i),"type"===t&&this.baseElement._setType(i)}}))((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      ${(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\t\t`,excludeAttrsSync:["tabindex"],componentName:l}))},9357:(t,e,i)=>{i.r(e),i.d(e,{TextFieldClass:()=>n.z}),i(9789);var n=i(6417);customElements.define(n.f,n.z)},4447:(t,e,i)=>{i.d(e,{Z:()=>h});const{host:n,label:r,placeholder:a,requiredIndicator:o,inputField:s,input:l,helperText:p,errorMessage:d,disabledPlaceholder:u,inputDisabled:c}={host:{selector:()=>":host"},label:{selector:"::part(label)"},requiredIndicator:{selector:"[required]::part(required-indicator)::after"},placeholder:{selector:"> input:placeholder-shown"},disabledPlaceholder:{selector:"> input:disabled::placeholder"},inputField:{selector:"::part(input-field)"},input:{selector:"input"},inputDisabled:{selector:"input:disabled"},helperText:{selector:"::part(helper-text)"},errorMessage:{selector:"::part(error-message)"}},h={fontSize:[{},n],fontFamily:[r,s,p,d],hostWidth:{...n,property:"width"},hostMinWidth:{...n,property:"min-width"},hostDirection:{...n,property:"direction"},inputBackgroundColor:{...s,property:"background-color"},labelTextColor:[{...r,property:"color"},{...o,property:"color"},{...r,property:"-webkit-text-fill-color"},{...o,property:"-webkit-text-fill-color"}],errorMessageTextColor:{...d,property:"color"},helperTextColor:{...p,property:"-webkit-text-fill-color"},inputValueTextColor:[{...s,property:"color"},{...c,property:"-webkit-text-fill-color"}],inputCaretTextColor:{...l,property:"color"},labelRequiredIndicator:{...o,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:[{...a,property:"color"},{...u,property:"-webkit-text-fill-color"}]}},2138:(t,e,i)=>{i.d(e,{f:()=>s,k:()=>p});var n=i(4978),r=i(2061),a=i(4567),o=i(3346);const s=(0,a.iY)("text");class l extends((0,o.s)({componentName:s,baseSelector:":host > slot"})){constructor(){super(),this.attachShadow({mode:"open"}).innerHTML='\n    <style>\n      :host {\n        display: inline-block;\n      }\n      :host > slot {\n        width: 100%;\n        display: inline-block;\n      }\n    </style>\n    <slot part="text-wrapper"></slot>\n    ',this.textSlot=this.shadowRoot.querySelector("slot")}get hideWhenEmpty(){return"true"===this.getAttribute("hide-when-empty")}init(){super.init(),(0,a.P$)(this,(()=>{const t=!!this.childNodes.length;this.style.display=!t&&this.hideWhenEmpty?"none":""}))}}const p=(0,r.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)(l)},1876:(t,e,i)=>{i.r(e),i.d(e,{TextClass:()=>n.k});var n=i(2138);customElements.define(n.f,n.k)},6751:(t,e,i)=>{i.r(e);var n=i(3878),r=i(4567);const a=(0,r.iY)("mapping-item"),o=["size","bordered","readonly","full-width","disabled"],s=(0,n.P)({componentName:a,baseSelector:"div"});customElements.define(a,class extends s{static get observedAttributes(){return[].concat(s.observedAttributes||[],o,["separator","options","invalid","disabled"])}get separator(){return this.getAttribute("separator")||"map to"}get value(){const t=this.attributeInput.value,e=this.valueInput.value;return t&&e?{[t]:e}:null}set value(t){if(1!==Object.entries(t).length)return void console.error("descope-mapping item expected expects only one key-value pair in the value but received: ",t);const[e,i]=Object.entries(t)[0];this.valueInput.value=i,this.attributeInput.value=e,this.dispatchEvent(new InputEvent("input",{bubbles:!0,composed:!0}))}constructor(){super(),this.attachShadow({mode:"open"}).innerHTML=`\n      <style>\n        .wrapper {\n          display: flex;\n        }\n        .separator {\n          text-align: center;\n          flex-shrink: 0;\n        }\n      </style>\n      <div class="wrapper" part="wrapper">\n        <descope-text-field required="true"></descope-text-field>\n        <div class="separator" part="separator">${this.separator}</div>\n        <descope-combo-box\n          item-label-path="data-name"\n          item-value-path="data-id"\n          required="true"\n        >\n        </descope-combo-box>\n        <descope-button variant="link" mode="primary">\n          <vaadin-icon icon="vaadin:minus"></vaadin-icon>\n        </descope-button>\n      </div>\n\t`,this.valueInput=this.shadowRoot.querySelector("descope-text-field"),this.attributeInput=this.shadowRoot.querySelector("descope-combo-box"),this.inputs=[this.valueInput,this.attributeInput],this.removeButton=this.shadowRoot.querySelector("descope-button"),(0,r.oP)(this,this.valueInput,{includeAttrs:o}),(0,r.oP)(this,this.attributeInput,{includeAttrs:[...o,"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}#r(t){"true"===t&&(this.valueInput.value||(this.valueInput.setAttribute("invalid","true"),this.valueInput.setAttribute("error-message",this.defaultErrorMsgValueMissing)),this.attributeInput.value||(this.attributeInput.setAttribute("invalid","true"),this.attributeInput.setAttribute("error-message",this.defaultErrorMsgValueMissing)))}attributeChangedCallback(t,e,i){super.attributeChangedCallback?.(t,e,i),"separator"===t&&this.handleSeparatorChange(),"invalid"===t&&this.#r(i)}})},7819:(t,e,i)=>{i.d(e,{Z:()=>s,f:()=>a});var n=i(3878),r=i(4567);const a=(0,r.iY)("mappings-field-internal"),o=(0,n.P)({componentName:a,baseSelector:"div"}),s=class extends o{#a;static get observedAttributes(){return[].concat(o.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 i=t.length;i<e.length;i++)this.mappingsContainerEle.removeChild(e[i]);t.forEach(((t,i)=>{const n=e[i];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,r.oP)(this,t,{includeAttrs:["disabled"]})}#o(){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.#o.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,i){super.attributeChangedCallback?.(t,e,i),"label-value"!==t&&"label-attr"!==t||this.initLabels(),"button-label"===t&&this.initAddButton(),"invalid"===t&&this.#s("true"===i),"readonly"===t&&this.toggleAttribute("inert","true"===i)}}},3820:(t,e,i)=>{i.r(e);var n=i(7819);customElements.define(n.f,n.Z)},5894:(t,e,i)=>{i.r(e),i.d(e,{MappingsFieldClass:()=>f}),i(9381),i(7911),i(6594);var n=i(4978),r=i(2138),a=i(2061),o=i(4567),s=i(7819);const l=(0,o.iY)("mappings-field"),{host:p,helperText:d,errorMessage:u,mappingItem:c,labels:h,labelsText:b,valueLabel:m,attrLabel:g,separator:v,labelsContainer:y}={host:{selector:()=>":host"},helperText:{selector:"::part(helper-text)"},errorMessage:{selector:"::part(error-message)"},mappingItem:{selector:"descope-mapping-item::part(wrapper)"},labels:{selector:'descope-mappings-field-internal [part="labels"] descope-text'},labelsText:{selector:'descope-mappings-field-internal [part="labels"] descope-text::part(text-wrapper)'},valueLabel:{selector:'descope-mappings-field-internal [part="labels"] [part="value-label"]'},attrLabel:{selector:'descope-mappings-field-internal [part="labels"] [part="attr-label"]'},separator:{selector:"descope-mapping-item::part(separator)"},labelsContainer:{selector:'descope-mappings-field-internal [part="labels"]'}},f=(0,a.qC)((0,n.yk)({mappings:{hostWidth:{...p,property:"width"},hostDirection:{...p,property:"direction"},fontSize:[{},p,{...v,property:"margin-top"}],fontFamily:[d,u,h],separatorFontSize:{...v,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:{...c,property:"margin-bottom"},valueLabelMinWidth:{...m,property:"min-width"},attrLabelMinWidth:{...g,property:"min-width"},labelsMarginBottom:{...y,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      <${s.f}\n        tabindex="-1"\n      ></${s.f}>\n      `,this.baseElement.appendChild(t.content.cloneNode(!0)),this.inputElement=this.shadowRoot.querySelector(s.f),(0,o.oP)(this,this.inputElement,{includeAttrs:["size","full-width","label-value","label-attr","button-label","separator","options","default-values","invalid","readonly","disabled"]}),(0,o.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        ${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}));i(1876),i(2018),i(9357),i(1294),i(3820),i(6751),customElements.define(l,f)},6867:(t,e,i)=>{i.d(e,{Z:()=>s,f:()=>a});var n=i(3878),r=i(4567);const a=(0,r.iY)("saml-group-mappings-internal"),o=(0,n.P)({componentName:a,baseSelector:""}),s=class extends o{static get observedAttributes(){return["invalid"].concat(o.observedAttributes||[])}constructor(){super(),this.innerHTML='\n      <descope-text-field variant="body2" bordered="true"></descope-text-field>\n      <descope-mappings-field></descope-mappings-field>\n    ',this.groupInputElement=this.querySelector("descope-text-field"),this.mappingsElement=this.querySelector("descope-mappings-field")}resetInvalidIndication(){this.removeAttribute("invalid")}handleMappingsInvalidChange(t){t.includes("invalid")&&(this.mappingsElement.hasAttribute("invalid")||this.resetInvalidIndication())}initFocusHandler(){this.addEventListener("focus",(t=>{t.isTrusted&&(this.mappingsElement.checkValidity()?this.groupInputElement:this.mappingsElement).focus()}))}init(){this.initFocusHandler(),super.init?.(),(0,r.oP)(this,this.groupInputElement,{mapAttrs:{"label-group":"label"},includeAttrs:["size","label-group","readonly","disabled"]}),(0,r.oP)(this,this.mappingsElement,{includeAttrs:["size","full-width","label-value","label-attr","button-label","separator","options","readonly","disabled","data-errormessage-pattern-mismatch"]}),(0,r.FX)(this.mappingsElement,this.handleMappingsInvalidChange.bind(this),{includeAttrs:["invalid"]})}get value(){return{group:this.groupInputElement.value,mappings:this.mappingsElement.value}}set value(t){t?.group&&"string"==typeof t.group&&(this.groupInputElement.value=t.group),Array.isArray(t?.mappings)&&(this.mappingsElement.value=t.mappings)}getValidity(){return this.groupInputElement.checkValidity()?this.mappingsElement.checkValidity()?{}:this.mappingsElement.validity:this.groupInputElement.validity}#l(t){if(t){if(!this.groupInputElement.checkValidity())return void this.groupInputElement.setAttribute("invalid","true");this.mappingsElement.checkValidity()||this.mappingsElement.setAttribute("invalid","true")}}attributeChangedCallback(t,e,i){super.attributeChangedCallback?.(t,e,i),"invalid"===t&&this.#l("true"===i)}}},4115:(t,e,i)=>{i.r(e);var n=i(6867);customElements.define(n.f,n.Z)},3277:(t,e,i)=>{i.r(e),i.d(e,{SamlGroupMappingsClass:()=>d}),i(9381);var n=i(4978),r=i(2061),a=i(4567),o=i(6867);const s=(0,a.iY)("saml-group-mappings"),{host:l,groupInput:p}={host:{selector:()=>":host"},groupInput:{selector:"descope-text-field"}},d=(0,r.qC)((0,n.yk)({mappings:{hostWidth:{...l,property:"width"},hostDirection:{...l,property:"direction"},groupNameInputMarginBottom:{...p,property:"margin-bottom"}}}),n.e4,(0,n.dj)({proxyProps:["value","selectionStart"],inputEvent:"input",triggerValidationEvents:["mapping-item-added","mapping-item-removed"],proxyParentValidation:!0}),n.Ae,(t=>class extends t{init(){super.init?.();const t=document.createElement("template");t.innerHTML=`\n      <${o.f}\n        tabindex="-1"\n      ></${o.f}>\n      `,this.baseElement.appendChild(t.content.cloneNode(!0)),this.inputElement=this.shadowRoot.querySelector(o.f),(0,a.oP)(this,this.inputElement,{includeAttrs:["size","full-width","label-group","label-value","label-attr","button-label","separator","options","readonly","disabled"]}),(0,a.tg)(this,this.inputElement,{includeAttrs:["invalid"]})}}))((0,n.DM)({slots:[],wrappedEleName:"vaadin-custom-field",style:()=>"\n      :host {\n        display: inline-flex;\n        max-width: 100%;\n        direction: ltr;\n      }\n\n      vaadin-custom-field {\n        line-height: unset;\n        width: 100%;\n      }\n\n      descope-text-field {\n        width: auto;\n      }\n\n      descope-mappings-field {\n        display: block;\n      }\n    ",excludeAttrsSync:["tabindex","label-group","label-value","label-attr","button-label","separator","options","error-message"],componentName:s}));i(9357),i(5894),i(4115),customElements.define(s,d)},4201:(t,e,i)=>{i.d(e,{B:()=>d,DY:()=>l,PH:()=>p,Pd:()=>o,TX:()=>r,Wf:()=>c,bi:()=>n,jI:()=>s,jl:()=>a,wm:()=>u});const n=t=>`\n    :host {\n        padding: calc(var(${t.inputOutlineWidth}) + var(${t.inputOutlineOffset}))\n    }\n`,r=t=>`\n    ${t} {\n        margin: 0;\n        padding: 0;\n        width: 100%;\n        height: 100%;\n        box-sizing: border-box;\n    }\n`,a=t=>`\n    ${t}::part(input-field) {\n        overflow: hidden;\n        padding: 0;\n        box-shadow: none;\n    }\n`,o=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`,u=(t,e)=>`\n    ${r(t)}\n    ${o(t)}\n    ${s(t)}\n    ${a(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`}}]);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@descope/web-components-ui",
-  "version": "1.0.300",
+  "version": "1.0.301",
   "description": "",
   "main": "dist/cjs/index.cjs.js",
   "module": "dist/index.esm.js",
@@ -60,8 +60,8 @@
     "@storybook/addon-links": "^6.4.9",
     "@storybook/html": "^6.4.9",
     "@storybook/manager-api": "^7.4.6",
-    "@types/markdown-it": "^14.0.1",
     "@types/node": "^20.8.0",
+    "@types/remarkable": "^2.0.8",
     "eslint": "^8.48.0",
     "eslint-config-airbnb-base": "^15.0.0",
     "eslint-config-prettier": "^9.0.0",
@@ -102,7 +102,7 @@
     "element-internals-polyfill": "^1.3.9",
     "lint-staged": "^15.0.0",
     "lodash.merge": "4.6.2",
-    "markdown-it": "^14.1.0"
+    "remarkable": "^2.0.1"
   },
   "overrides": {
     "@vaadin/avatar": "24.3.4",

package/src/components/descope-divider/DividerClass.js

@@ -2,7 +2,7 @@ import { createStyleMixin, draggableMixin, componentNameValidationMixin } from '
 import { createBaseClass } from '../../baseClasses/createBaseClass';
 import { compose } from '../../helpers';
 import { forwardAttrs, getComponentName } from '../../helpers/componentHelpers';
-import { TextClass } from '../text-components/descope-text/TextClass';
+import { TextClass } from '../descope-text/TextClass';
 
 export const componentName = getComponentName('divider');
 class RawDivider extends createBaseClass({ componentName, baseSelector: ':host > div' }) {

package/src/components/descope-divider/index.js

@@ -1,5 +1,5 @@
 import { componentName, DividerClass } from './DividerClass';
-import '../text-components/descope-text';
+import '../descope-text';
 
 customElements.define(componentName, DividerClass);
 

package/src/components/descope-enriched-text/EnrichedTextClass.js

@@ -0,0 +1,163 @@
+import { Remarkable } from 'remarkable';
+import { createStyleMixin, draggableMixin, componentNameValidationMixin } from '../../mixins';
+import { compose } from '../../helpers';
+import { getComponentName } from '../../helpers/componentHelpers';
+import { ruleSet, textRuleSet } from './consts';
+import { createBaseClass } from '../../baseClasses/createBaseClass';
+
+export const componentName = getComponentName('enriched-text');
+
+class EnrichedText extends createBaseClass({ componentName, baseSelector: ':host > div' }) {
+  #origImageRenderer;
+
+  constructor() {
+    super();
+
+    this.attachShadow({ mode: 'open' }).innerHTML = `
+    <style>
+      :host {
+        display: inline-block;
+      }
+      :host > slot {
+        width: 100%;
+        display: inline-block;
+      }
+      *, *:last-child {
+        margin: 0;
+      }
+      h1,
+      h2,
+      h3,
+      h4,
+      h5,
+      h6,
+      p {
+        margin-bottom: 1em;
+      }
+      a {
+        text-decoration: none;
+        cursor: pointer;
+      }
+      a:hover {
+        text-decoration: underline;
+      }
+      blockquote {
+        padding: 0 2em;
+      }
+    </style>
+    <slot part="text-wrapper" style="display:none"></slot>
+    <div class="content"></div>
+    `;
+
+    this.textSlot = this.shadowRoot.querySelector('slot');
+
+    this.#initProcessor();
+
+    this.textSlot.addEventListener('slotchange', this.#parseChildren.bind(this));
+  }
+
+  static get observedAttributes() {
+    return ['readonly'];
+  }
+
+  attributeChangedCallback(attrName, oldValue, newValue) {
+    super.attributeChangedCallback?.(attrName, oldValue, newValue);
+
+    if (newValue !== oldValue) {
+      if (attrName === 'readonly') {
+        this.onReadOnlyChange(newValue === 'true');
+      }
+    }
+  }
+
+  #disableAllRules() {
+    if (!this.processor) {
+      return;
+    }
+
+    ruleSet?.core && this.processor.core.ruler.disable(ruleSet.core);
+    ruleSet?.inline && this.processor.inline.ruler.disable(ruleSet.inline);
+    ruleSet?.block && this.processor.block.ruler.disable(ruleSet.block);
+
+    this.processor.renderer.rules.image = () => {
+      return '';
+    };
+  }
+
+  #enableCustomRules() {
+    if (!this.processor) {
+      return;
+    }
+
+    const customRuleSet = textRuleSet;
+
+    customRuleSet?.core && this.processor?.core.ruler.enable(customRuleSet?.core);
+    customRuleSet?.inline && this.processor?.inline.ruler.enable(customRuleSet?.inline);
+    customRuleSet?.block && this.processor?.block.ruler.enable(customRuleSet?.block);
+
+    if (customRuleSet?.custom?.includes('image')) {
+      this.processor.renderer.rules.image = this.#origImageRenderer;
+    }
+  }
+
+  #updateProcessorRules() {
+    this.#disableAllRules();
+    this.#enableCustomRules();
+  }
+
+  #initProcessor() {
+    this.processor = new Remarkable();
+    this.#origImageRenderer = this.processor.renderer.rules.image;
+    this.#updateProcessorRules();
+  }
+
+  get contentNode() {
+    return this.shadowRoot.querySelector('.content');
+  }
+
+  #parseChildren() {
+    if (!this.processor) {
+      return;
+    }
+
+    let html = this.textContent;
+
+    try {
+      const tokens = this.processor.parse(this.textContent);
+      html = this.processor.renderer.render(tokens, { breaks: true });
+      this.contentNode.innerHTML = html;
+    } catch (e) {
+      // eslint-disable-next-line no-console
+      console.warn('Not parsing invalid markdown token');
+    }
+
+    this.contentNode.innerHTML = html;
+  }
+
+  onReadOnlyChange(isReadOnly) {
+    if (isReadOnly) {
+      this.setAttribute('inert', isReadOnly);
+    } else {
+      this.removeAttribute('inert');
+    }
+  }
+}
+
+export const EnrichedTextClass = compose(
+  createStyleMixin({
+    mappings: {
+      hostWidth: { selector: () => ':host', property: 'width' },
+      hostDirection: { selector: () => ':host', property: 'direction' },
+      fontSize: {},
+      fontFamily: {},
+      fontWeight: {},
+      textColor: { property: 'color' },
+      textLineHeight: { property: 'line-height' },
+      textAlign: {},
+      linkColor: { selector: 'a', property: 'color' },
+    },
+  }),
+  createStyleMixin({ componentNameOverride: getComponentName('link') }),
+  draggableMixin,
+  componentNameValidationMixin
+)(EnrichedText);

package/src/components/descope-enriched-text/consts.js

@@ -0,0 +1,74 @@
+export const ruleSet = {
+  custom: ['image'],
+  core: [
+    'block',
+    'inline',
+    'abbr', // Parse abbreviation definitions, i.e. `*[abbr]: description`
+    'abbr2', // Enclose abbreviations in <abbr> tags
+    'references',
+    'footnote_tail',
+    'replacements', // Simple typographical replacements
+    'smartquotes', // Convert straight quotation marks to typographic ones
+  ],
+  inline: [
+    'text',
+    'newline', // Proceess '\n'
+    'backticks', // Parse backticks
+    'del', // Process ~~deleted text~~
+    'emphasis', // Process *this* and _that_
+    'sub', // Process ~subscript~
+    'sup', // Process ^superscript^
+    'links', // Process [links](<to> "stuff")
+    'escape', // Proceess escaped chars and hardbreaks
+    'ins', // Process ++inserted text++
+    'mark', // Process ==highlighted text==
+    'footnote_inline', // Process inline footnotes (^[...])
+    'footnote_ref', // Process footnote references ([^...])
+    'autolink', // Process autolinks '<protocol:...>'
+    'htmltag', // Process html tags
+    'entity', // Process html entity - &#123;, &#xAF;, &quot;, ...
+  ],
+  block: [
+    'code', // Code block (4 spaces padded)
+    'fences', // fences (``` lang, ~~~ lang)
+    'blockquote', // Block quotes
+    'list',
+    'heading', // heading (#, ##, ...)
+    'paragraph',
+    'hr', // Horizontal rule
+    'footnote', // Process footnote reference list
+    'lheading', // lheading (---, ===)
+    'htmlblock', // HTML block
+    'table', // GFM table, non-standard
+    'deflist', // Definition lists
+  ],
+};
+
+export const textRuleSet = {
+  core: ['block', 'inline'],
+  inline: [
+    'text',
+    'newline', // Proceess '\n'
+    'backticks', // Parse backticks
+    'del', // Process ~~deleted text~~
+    'emphasis', // Process *this* and _that_
+    'sub', // Process ~subscript~
+    'sup', // Process ^superscript^
+    'links', // Process [links](<to> "stuff")
+    'escape', // Proceess escaped chars and hardbreaks
+    'ins', // Process ++inserted text++
+    'footnote_inline', // Process inline footnotes (^[...])
+    'footnote_ref', // Process footnote references ([^...])
+    'autolink', // Process autolinks '<protocol:...>'
+  ],
+  block: [
+    'code', // Code block (4 spaces padded)
+    'fences', // fences (``` lang, ~~~ lang)
+    'blockquote', // Block quotes
+    'list',
+    'heading', // heading (#, ##, ...)
+    'paragraph',
+    'footnote', // Process footnote reference list
+    'htmlblock', // HTML block
+  ],
+};

package/src/components/descope-link/LinkClass.js

@@ -1,6 +1,6 @@
 import { createStyleMixin, draggableMixin, componentNameValidationMixin } from '../../mixins';
 import { createBaseClass } from '../../baseClasses/createBaseClass';
-import { TextClass } from '../text-components/descope-text/TextClass';
+import { TextClass } from '../descope-text/TextClass';
 import { compose } from '../../helpers';
 import { forwardAttrs, getComponentName } from '../../helpers/componentHelpers';
 

package/src/components/descope-link/index.js

@@ -1,5 +1,5 @@
 import { componentName, LinkClass } from './LinkClass';
-import '../text-components/descope-text';
+import '../descope-text';
 
 customElements.define(componentName, LinkClass);
 

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

@@ -0,0 +1,64 @@
+import { createStyleMixin, draggableMixin, componentNameValidationMixin } from '../../mixins';
+import { compose } from '../../helpers';
+import { getComponentName, observeChildren } from '../../helpers/componentHelpers';
+import { createBaseClass } from '../../baseClasses/createBaseClass';
+
+export const componentName = getComponentName('text');
+
+class RawText extends createBaseClass({ componentName, baseSelector: ':host > slot' }) {
+  constructor() {
+    super();
+
+    this.attachShadow({ mode: 'open' }).innerHTML = `
+    <style>
+      :host {
+        display: inline-block;
+      }
+      :host > slot {
+        width: 100%;
+        display: inline-block;
+      }
+    </style>
+    <slot part="text-wrapper"></slot>
+    `;
+
+    this.textSlot = this.shadowRoot.querySelector('slot');
+  }
+
+  get hideWhenEmpty() {
+    return this.getAttribute('hide-when-empty') === 'true';
+  }
+
+  init() {
+    super.init();
+
+    observeChildren(this, () => {
+      const hasChildren = !!this.childNodes.length;
+      this.style.display = !hasChildren && this.hideWhenEmpty ? 'none' : '';
+    });
+  }
+}
+
+export const TextClass = compose(
+  createStyleMixin({
+    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: {},
+    },
+  }),
+  draggableMixin,
+  componentNameValidationMixin
+)(RawText);

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

@@ -4,7 +4,7 @@ import { compose } from '../../helpers';
 import { getComponentName } from '../../helpers/componentHelpers';
 import deleteIcon from './delete.svg';
 import editIcon from './edit.svg';
-import { TextClass } from '../text-components/descope-text/TextClass';
+import { TextClass } from '../descope-text/TextClass';
 import { ButtonClass } from '../descope-button/ButtonClass';
 import { BadgeClass } from '../descope-badge/BadgeClass';
 

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

@@ -1,5 +1,5 @@
 import { componentName, UserAttributeClass } from './UserAttributeClass';
-import '../text-components/descope-text';
+import '../descope-text';
 import '../descope-button';
 import '../descope-badge';
 import '@vaadin/icon';

package/src/components/descope-user-auth-method/UserAuthMethodClass.js

@@ -3,7 +3,7 @@ import { createBaseClass } from '../../baseClasses/createBaseClass';
 import { compose } from '../../helpers';
 import { getComponentName } from '../../helpers/componentHelpers';
 import greenVIcon from './green-v.svg';
-import { TextClass } from '../text-components/descope-text/TextClass';
+import { TextClass } from '../descope-text/TextClass';
 import { ButtonClass } from '../descope-button/ButtonClass';
 import { BadgeClass } from '../descope-badge/BadgeClass';
 

package/src/components/descope-user-auth-method/index.js

@@ -1,5 +1,5 @@
 import { componentName, UserAuthMethodClass } from './UserAuthMethodClass';
-import '../text-components/descope-text';
+import '../descope-text';
 import '../descope-button';
 import '../descope-badge';
 import '@vaadin/icon';

package/src/components/mapping-fields/descope-mappings-field/MappingsFieldClass.js

@@ -5,7 +5,7 @@ import {
   proxyInputMixin,
   componentNameValidationMixin,
 } from '../../../mixins';
-import { TextClass } from '../../text-components/descope-text/TextClass';
+import { TextClass } from '../../descope-text/TextClass';
 import { compose } from '../../../helpers';
 import { forwardAttrs, getComponentName, syncAttrs } from '../../../helpers/componentHelpers';
 import { componentName as descopeInternalComponentName } from './descope-mappings-field-internal/MappingsFieldInternal';

package/src/components/mapping-fields/descope-mappings-field/index.js

@@ -2,7 +2,7 @@ import '@vaadin/custom-field';
 import '@vaadin/icon';
 import '@vaadin/icons';
 import { componentName, MappingsFieldClass } from './MappingsFieldClass';
-import '../../text-components/descope-text';
+import '../../descope-text';
 import '../../descope-button';
 import '../../descope-text-field';
 import '../../descope-combo-box';

package/src/index.cjs.js

@@ -20,8 +20,8 @@ export { NotpImageClass } from './components/descope-notp-image/NotpImageClass';
 export { NumberFieldClass } from './components/descope-number-field/NumberFieldClass';
 export { PasscodeClass } from './components/descope-passcode/PasscodeClass';
 export { PasswordClass } from './components/descope-password/PasswordClass';
-export { TextClass } from './components/text-components/descope-text/TextClass';
-export { EnrichedTextClass } from './components/text-components/descope-enriched-text/EnrichedTextClass';
+export { TextClass } from './components/descope-text/TextClass';
+export { EnrichedTextClass } from './components/descope-enriched-text/EnrichedTextClass';
 export { TextAreaClass } from './components/descope-text-area/TextAreaClass';
 export { TextFieldClass } from './components/descope-text-field/TextFieldClass';
 export { ImageClass } from './components/descope-image/ImageClass';

package/src/index.d.ts

@@ -24,8 +24,8 @@ export { NotpImageClass } from './components/descope-notp-image';
 export { NumberFieldClass } from './components/descope-number-field';
 export { PasscodeClass } from './components/descope-passcode';
 export { PasswordClass } from './components/descope-password';
-export { TextClass } from './components/text-components/descope-text';
-export { EnrichedTextClass } from './components/text-components/descope-enriched-text';
+export { TextClass } from './components/descope-text';
+export { EnrichedTextClass } from './components/descope-enriched-text';
 export { TextAreaClass } from './components/descope-text-area';
 export { TextFieldClass } from './components/descope-text-field';
 export { ImageClass } from './components/descope-image';

package/src/index.js

@@ -14,8 +14,8 @@ export * from './components/descope-notp-image';
 export * from './components/descope-number-field';
 export * from './components/descope-passcode';
 export * from './components/descope-password';
-export * from './components/text-components/descope-text';
-export * from './components/text-components/descope-enriched-text';
+export * from './components/descope-text';
+export * from './components/descope-enriched-text';
 export * from './components/descope-text-area';
 export * from './components/descope-text-field';
 export * from './components/descope-image';