@descope/web-components-ui 3.27.2 → 3.27.3

package/dist/umd/descope-upload-file-index-js.js

@@ -1,2 +1,2 @@
-"use strict";(self.webpackChunk_descope_web_components_ui=self.webpackChunk_descope_web_components_ui||[]).push([[9636],{19624(t,e,n){n.d(e,{J:()=>u,T:()=>l});var i=n(63200),r=n(25964),o=n(88961),s=n(98538),a=n(10767);const l=(0,r.xE)("button"),{host:d,label:c,slottedIcon:p}={host:{selector:()=>":host"},label:{selector:"::part(label)"},slottedIcon:{selector:()=>"::slotted(descope-icon)"}};let h;const u=(0,i.Zz)((0,o.DM)({triggers:[{attr:"full-width",value:"true"}]}),(0,o.RF)({mappings:{hostWidth:{property:"width"},hostMaxWidth:{...d,property:"max-width"},hostHeight:{property:"height"},hostDirection:{...d,property:"direction"},fontSize:{},fontFamily:{},fontWeight:{},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(*)",property:s.S.cssVarList.fill},labelTextDecoration:{...c,property:"text-decoration"},labelSpacing:{...c,property:"gap"},textAlign:{...c,property:"justify-content",fallback:"center"},iconSize:[{...p,property:"width"},{...p,property:"height"}]}}),a.G,o.VO,o.tQ)((0,o.tz)({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${h}\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","class","style","role"],componentName:l})),{color:b,fontSize:g}=u.cssVarList;h=`\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(${g}) / 2));\n\t\tleft: calc(50% - (var(${g}) / 2));\n\t\tborder-width: calc(var(${g}) / 10);\n\t\twidth: var(${g});\n\t\theight: var(${g});\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`},10767(t,e,n){n.d(e,{G:()=>i});const i=t=>class extends t{get isLoading(){return"true"===this.getAttribute("loading")}click(){this.isLoading||super.click()}}},30576(t,e,n){n.r(e),n.d(e,{ButtonClass:()=>i.J,componentName:()=>i.T});var i=n(19624);n(83799),customElements.define(i.T,i.J)},98538(t,e,n){n.d(e,{S:()=>l,T:()=>a});var i=n(88961),r=n(25964),o=n(8512),s=n(63200);const a=(0,r.xE)("icon"),l=(0,s.Zz)((0,i.RF)({mappings:{fill:[{},{property:o.q.cssVarList.fill}],height:{selector:()=>":host"},width:{selector:()=>":host"}}}),i.VO,i.tQ)((0,i.tz)({slots:[],wrappedEleName:"descope-image",style:()=>"\n      :host {\n        display: inline-flex;\n        align-items: center;\n        justify-content: center;\n        max-height: 100%;\n      }\n      ",excludeAttrsSync:["tabindex","class","style","st-height","st-width"],componentName:a}))},8512(t,e,n){n.d(e,{T:()=>l,q:()=>p});var i=n(88961),r=n(72270),o=n(63200),s=n(25964),a=n(18782);const l=(0,s.xE)("image"),d=["src","src-dark"];class c extends((0,r.qu)({componentName:l,baseSelector:"slot"})){static get observedAttributes(){return d}constructor(){super(),this.attachShadow({mode:"open"}).innerHTML="\n\t\t<slot></slot>\n\t",(0,s.fz)("\n\t\t\t:host {\n\t\t\t\tdisplay: inline-flex;\n\t\t\t}\n      :host > slot {\n        width: 100%;\n        height: 100%;\n\t\t\t\tbox-sizing: border-box;\n\t\t\t\tdisplay: flex;\n\t\t\t\toverflow: hidden;\n\t\t\t}\n\n      ::slotted(*) {\n        width: 100%;\n\t\t\t}\n\n      .hidden {\n        display: none;\n      }\n      ",this)}init(){super.init?.(),this.toggleVisibility(this.getSrc)}onThemeChange(){this.renderImage()}toggleVisibility(t){t?this.classList.remove("hidden"):this.classList.add("hidden")}get altText(){return this.getAttribute("alt")||""}get legacySrc(){return this.getAttribute("src")}get themeSrc(){return this.getAttribute(`src-${this.currentThemeName}`)}get getSrc(){return this.themeSrc||this.legacySrc}updateFillColor(t){[t,...t.querySelectorAll("*[fill]")].forEach(t=>{t.setAttribute("fill",`var(${p.cssVarList.fill}, ${t.getAttribute("fill")||"''"})`)})}renderImage(){this.toggleVisibility(this.getSrc),(0,a.m)(this.getSrc,this.altText).then(t=>{this.innerHTML="",t&&(this.updateFillColor(t),this.appendChild(t))})}shouldRender(t){const e=this.getAttribute(t);return this.getSrc===e}attributeChangedCallback(t,e,n){super.attributeChangedCallback?.(t,e,n),e!==n&&this.shouldRender(t)&&this.renderImage()}}const p=(0,o.Zz)((0,i.RF)({mappings:{fill:{},height:{selector:()=>":host"},width:{selector:()=>":host"}}}),i.VO,i.tQ)(c)},18782(t,e,n){n.d(e,{m:()=>o});var i=n(25414);const r=t=>{const e=i.A.sanitize(t,{USE_PROFILES:{svg:!0,svgFilters:!0},ADD_TAGS:["image"],FORBID_TAGS:["defs"]});return(new DOMParser).parseFromString(e,"image/svg+xml").querySelector("svg")},o=async(t,e)=>{try{let n;if((t=>t.startsWith("data:image/svg+xml;base64,"))(t)){const e=atob(t.slice(26));n=r(e)}else if("svg"===(t=>{const e=t.match(/\.([0-9a-z]+)(?:[\\?#]|$)/i);return e?e[1]:null})(t)){const e=await fetch(t),i=await e.text();n=r(i)}else n=((t,e)=>{const n=document.createElement("img");return n.setAttribute("src",t),n.setAttribute("alt",e),n})(t,e);return n.style.setProperty("max-width","100%"),n.style.setProperty("max-height","100%"),n}catch{return null}}},3393(t,e,n){n.d(e,{y:()=>s});var i=n(9696),r=n(79365),o=n(81365);const s=(...t)=>(0,i.Zz)(r.XX,r._$,r.yF,r.jd)((0,o.q)(...t))},70139(t,e,n){n.r(e),n.d(e,{UploadFileClass:()=>v,componentName:()=>d});var i=n(19624),r=n(25964),o=n(79365),s=n(9696),a=n(97810),l=n(3393);const d=(0,a.xE)("upload-file"),c=["title","description","button-label","accept","readonly","button-mode","button-variant","required","size","icon"],p=(0,l.y)({componentName:d,baseSelector:":host > div"}),h=i.J.cssVarList,{host:u,wrapper:b,icon:g,title:m,description:y,requiredIndicator:f}={host:{selector:()=>":host"},wrapper:{selector:()=>":host > div"},icon:{selector:()=>"::slotted(*)"},title:{selector:()=>".title"},description:{selector:()=>".description"},requiredIndicator:{selector:()=>".title::after"}},v=(0,s.Zz)((0,o.RF)({componentNameOverride:(0,a.xE)("input-wrapper")}),(0,o.RF)({mappings:{fontSize:{},fontFamily:{},borderColor:{},borderWidth:{},borderStyle:{},borderRadius:{},hostHeight:{...u,property:"height"},hostWidth:{...u,property:"width"},hostPadding:{property:"padding"},hostDirection:[{...u,property:"direction"},{selector:()=>i.J.componentName,property:h.hostDirection}],gap:{...b},lineHeight:{...b,property:"line-height"},titleFontSize:{...m,property:"font-size"},titleFontWeight:{...m,property:"font-weight"},descriptionFontSize:{...y,property:"font-size"},labelTextColor:[{...m,property:"color"},{...y,property:"color"}],iconSize:{...g,property:"width"},requiredIndicator:{...f,property:"content"}}}),o.VO,o.tQ)(class extends p{static get observedAttributes(){return c.concat(p.observedAttributes||[])}constructor(){super(),this.attachShadow({mode:"open"}).innerHTML='\n\t\t\t<div>\n        <slot name="icon"></slot>\n\t\t\t\t<div class="title">\n\t\t\t\t\t<span class="title-text"></span>\n\t\t\t\t</div>\n\t\t\t\t<div class="description"></div>\n\t\t\t\t<div class="button-wrapper">\n\t\t\t\t\t<input type="file" tabindex="-1" aria-hidden="true"/>\n\t\t\t\t\t<descope-button id="button"></descope-button>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t',(0,r.fz)("\n      :host {\n\t\t\t\tdisplay: flex;\n\t\t\t}\n\t\t\t:host > div {\n\t\t\t\tdisplay: flex;\n\t\t\t\talign-items: center;\n\t\t\t\tjustify-content: center;\n\t\t\t\ttext-align: center;\n\t\t\t\tflex-direction: column;\n\t\t\t\twidth: 100%;\n\t\t\t}\n\t\t\t.button-wrapper {\n\t\t\t\tposition: relative;\n\t\t\t\twidth: fit-content;\n\t\t\t}\n\t\t\tinput {\n\t\t\t\tposition: absolute;\n\t\t\t\twidth: 100%;\n\t\t\t\theight: 100%;\n\t\t\t\topacity: 0;\n\t\t\t}\n        ",this),this.wrapperEle=this.shadowRoot.querySelector(".wrapper"),this.inputElement=this.shadowRoot.querySelector("input"),this.button.onclick=()=>this.inputElement.click(),this.inputElement.onchange=async t=>{const e=t.target.files;var n;e.length&&(this.value=await(n=e[0],new Promise(t=>{const e=new FileReader;e.onload=e=>t(e.target.result),e.readAsDataURL(n)})),this.updateDescription((t=>t.name.replace(/^.*\\/,""))(e[0])))},this.oninvalid=()=>{this.setAttribute("invalid","true")}}getValidity(){return this.isRequired&&!this.input.value?{valueMissing:!0}:(this.removeAttribute("invalid"),{})}initInputs(){this.rootElement.querySelector("descope-button").onclick=()=>this.inputElement.click()}attributeChangedCallback(t,e,n){super.attributeChangedCallback?.(t,e,n),e!==n&&("title"===t?this.updateTitle(n):"description"===t?this.updateDescription(n):"button-label"===t?this.updateButtonLabel(n):"button-mode"===t?this.updateButtonMode(n):"button-variant"===t?this.updateButtonVariant(n):"size"===t?this.updateButtonSize(n):"accept"===t?this.updateInputAccept(n):"readonly"===t&&this.updateReadOnly(n))}get button(){return this.shadowRoot.querySelector("descope-button")}get input(){return this.shadowRoot.querySelector("input")}get title(){return this.shadowRoot.querySelector(".title-text")}get description(){return this.shadowRoot.querySelector(".description")}get icon(){return this.shadowRoot.querySelector(".icon")}updateTitle(t){this.title.textContent=t}updateDescription(t){this.description.textContent=t}updateButtonLabel(t){this.button.textContent=t}updateButtonSize(t){this.button.setAttribute("size",t)}updateButtonMode(t){this.button.setAttribute("mode",t)}updateButtonVariant(t){this.button.setAttribute("variant",t)}updateInputAccept(t){this.input.setAttribute("accept",t)}updateReadOnly(t){"true"===t?this.input.setAttribute("disabled","true"):this.input.removeAttribute("disabled")}});n(30576),customElements.define(d,v)}}]);
+"use strict";(self.webpackChunk_descope_web_components_ui=self.webpackChunk_descope_web_components_ui||[]).push([[9636],{19624(t,e,n){n.d(e,{J:()=>u,T:()=>l});var i=n(63200),r=n(25964),o=n(88961),s=n(98538),a=n(10767);const l=(0,r.xE)("button"),{host:d,label:c,slottedIcon:p}={host:{selector:()=>":host"},label:{selector:"::part(label)"},slottedIcon:{selector:()=>"::slotted(descope-icon)"}};let h;const u=(0,i.Zz)((0,o.DM)({triggers:[{attr:"full-width",value:"true"}]}),(0,o.RF)({mappings:{hostWidth:{property:"width"},hostMaxWidth:{...d,property:"max-width"},hostHeight:{property:"height"},hostDirection:{...d,property:"direction"},fontSize:{},fontFamily:{},fontWeight:{},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(*)",property:s.S.cssVarList.fill},labelTextDecoration:{...c,property:"text-decoration"},labelSpacing:{...c,property:"gap"},textAlign:{...c,property:"justify-content",fallback:"center"},iconSize:[{...p,property:"width"},{...p,property:"height"}]}}),a.G,o.VO,o.tQ)((0,o.tz)({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${h}\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","class","style"],componentName:l})),{color:b,fontSize:g}=u.cssVarList;h=`\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(${g}) / 2));\n\t\tleft: calc(50% - (var(${g}) / 2));\n\t\tborder-width: calc(var(${g}) / 10);\n\t\twidth: var(${g});\n\t\theight: var(${g});\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`},10767(t,e,n){n.d(e,{G:()=>i});const i=t=>class extends t{get isLoading(){return"true"===this.getAttribute("loading")}click(){this.isLoading||super.click()}}},30576(t,e,n){n.r(e),n.d(e,{ButtonClass:()=>i.J,componentName:()=>i.T});var i=n(19624);n(83799),customElements.define(i.T,i.J)},98538(t,e,n){n.d(e,{S:()=>l,T:()=>a});var i=n(88961),r=n(25964),o=n(8512),s=n(63200);const a=(0,r.xE)("icon"),l=(0,s.Zz)((0,i.RF)({mappings:{fill:[{},{property:o.q.cssVarList.fill}],height:{selector:()=>":host"},width:{selector:()=>":host"}}}),i.VO,i.tQ)((0,i.tz)({slots:[],wrappedEleName:"descope-image",style:()=>"\n      :host {\n        display: inline-flex;\n        align-items: center;\n        justify-content: center;\n        max-height: 100%;\n      }\n      ",excludeAttrsSync:["tabindex","class","style","st-height","st-width"],componentName:a}))},8512(t,e,n){n.d(e,{T:()=>l,q:()=>p});var i=n(88961),r=n(72270),o=n(63200),s=n(25964),a=n(18782);const l=(0,s.xE)("image"),d=["src","src-dark"];class c extends((0,r.qu)({componentName:l,baseSelector:"slot"})){static get observedAttributes(){return d}constructor(){super(),this.attachShadow({mode:"open"}).innerHTML="\n\t\t<slot></slot>\n\t",(0,s.fz)("\n\t\t\t:host {\n\t\t\t\tdisplay: inline-flex;\n\t\t\t}\n      :host > slot {\n        width: 100%;\n        height: 100%;\n\t\t\t\tbox-sizing: border-box;\n\t\t\t\tdisplay: flex;\n\t\t\t\toverflow: hidden;\n\t\t\t}\n\n      ::slotted(*) {\n        width: 100%;\n\t\t\t}\n\n      .hidden {\n        display: none;\n      }\n      ",this)}init(){super.init?.(),this.toggleVisibility(this.getSrc)}onThemeChange(){this.renderImage()}toggleVisibility(t){t?this.classList.remove("hidden"):this.classList.add("hidden")}get altText(){return this.getAttribute("alt")||""}get legacySrc(){return this.getAttribute("src")}get themeSrc(){return this.getAttribute(`src-${this.currentThemeName}`)}get getSrc(){return this.themeSrc||this.legacySrc}updateFillColor(t){[t,...t.querySelectorAll("*[fill]")].forEach(t=>{t.setAttribute("fill",`var(${p.cssVarList.fill}, ${t.getAttribute("fill")||"''"})`)})}renderImage(){this.toggleVisibility(this.getSrc),(0,a.m)(this.getSrc,this.altText).then(t=>{this.innerHTML="",t&&(this.updateFillColor(t),this.appendChild(t))})}shouldRender(t){const e=this.getAttribute(t);return this.getSrc===e}attributeChangedCallback(t,e,n){super.attributeChangedCallback?.(t,e,n),e!==n&&this.shouldRender(t)&&this.renderImage()}}const p=(0,o.Zz)((0,i.RF)({mappings:{fill:{},height:{selector:()=>":host"},width:{selector:()=>":host"}}}),i.VO,i.tQ)(c)},18782(t,e,n){n.d(e,{m:()=>o});var i=n(25414);const r=t=>{const e=i.A.sanitize(t,{USE_PROFILES:{svg:!0,svgFilters:!0},ADD_TAGS:["image"],FORBID_TAGS:["defs"]});return(new DOMParser).parseFromString(e,"image/svg+xml").querySelector("svg")},o=async(t,e)=>{try{let n;if((t=>t.startsWith("data:image/svg+xml;base64,"))(t)){const e=atob(t.slice(26));n=r(e)}else if("svg"===(t=>{const e=t.match(/\.([0-9a-z]+)(?:[\\?#]|$)/i);return e?e[1]:null})(t)){const e=await fetch(t),i=await e.text();n=r(i)}else n=((t,e)=>{const n=document.createElement("img");return n.setAttribute("src",t),n.setAttribute("alt",e),n})(t,e);return n.style.setProperty("max-width","100%"),n.style.setProperty("max-height","100%"),n}catch{return null}}},3393(t,e,n){n.d(e,{y:()=>s});var i=n(9696),r=n(79365),o=n(81365);const s=(...t)=>(0,i.Zz)(r.XX,r._$,r.yF,r.jd)((0,o.q)(...t))},70139(t,e,n){n.r(e),n.d(e,{UploadFileClass:()=>v,componentName:()=>d});var i=n(19624),r=n(25964),o=n(79365),s=n(9696),a=n(97810),l=n(3393);const d=(0,a.xE)("upload-file"),c=["title","description","button-label","accept","readonly","button-mode","button-variant","required","size","icon"],p=(0,l.y)({componentName:d,baseSelector:":host > div"}),h=i.J.cssVarList,{host:u,wrapper:b,icon:g,title:m,description:y,requiredIndicator:f}={host:{selector:()=>":host"},wrapper:{selector:()=>":host > div"},icon:{selector:()=>"::slotted(*)"},title:{selector:()=>".title"},description:{selector:()=>".description"},requiredIndicator:{selector:()=>".title::after"}},v=(0,s.Zz)((0,o.RF)({componentNameOverride:(0,a.xE)("input-wrapper")}),(0,o.RF)({mappings:{fontSize:{},fontFamily:{},borderColor:{},borderWidth:{},borderStyle:{},borderRadius:{},hostHeight:{...u,property:"height"},hostWidth:{...u,property:"width"},hostPadding:{property:"padding"},hostDirection:[{...u,property:"direction"},{selector:()=>i.J.componentName,property:h.hostDirection}],gap:{...b},lineHeight:{...b,property:"line-height"},titleFontSize:{...m,property:"font-size"},titleFontWeight:{...m,property:"font-weight"},descriptionFontSize:{...y,property:"font-size"},labelTextColor:[{...m,property:"color"},{...y,property:"color"}],iconSize:{...g,property:"width"},requiredIndicator:{...f,property:"content"}}}),o.VO,o.tQ)(class extends p{static get observedAttributes(){return c.concat(p.observedAttributes||[])}constructor(){super(),this.attachShadow({mode:"open"}).innerHTML='\n\t\t\t<div>\n        <slot name="icon"></slot>\n\t\t\t\t<div class="title">\n\t\t\t\t\t<span class="title-text"></span>\n\t\t\t\t</div>\n\t\t\t\t<div class="description"></div>\n\t\t\t\t<div class="button-wrapper">\n\t\t\t\t\t<input type="file" tabindex="-1" aria-labelledby="button"/>\n\t\t\t\t\t<descope-button id="button"></descope-button>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t',(0,r.fz)("\n      :host {\n\t\t\t\tdisplay: flex;\n\t\t\t}\n\t\t\t:host > div {\n\t\t\t\tdisplay: flex;\n\t\t\t\talign-items: center;\n\t\t\t\tjustify-content: center;\n\t\t\t\ttext-align: center;\n\t\t\t\tflex-direction: column;\n\t\t\t\twidth: 100%;\n\t\t\t}\n\t\t\t.button-wrapper {\n\t\t\t\tposition: relative;\n\t\t\t\twidth: fit-content;\n\t\t\t}\n\t\t\tinput {\n\t\t\t\tposition: absolute;\n\t\t\t\twidth: 100%;\n\t\t\t\theight: 100%;\n\t\t\t\topacity: 0;\n\t\t\t}\n        ",this),this.wrapperEle=this.shadowRoot.querySelector(".wrapper"),this.inputElement=this.shadowRoot.querySelector("input"),this.button.onclick=()=>this.inputElement.click(),this.inputElement.onchange=async t=>{const e=t.target.files;var n;e.length&&(this.value=await(n=e[0],new Promise(t=>{const e=new FileReader;e.onload=e=>t(e.target.result),e.readAsDataURL(n)})),this.updateDescription((t=>t.name.replace(/^.*\\/,""))(e[0])))},this.oninvalid=()=>{this.setAttribute("invalid","true")}}getValidity(){return this.isRequired&&!this.input.value?{valueMissing:!0}:(this.removeAttribute("invalid"),{})}initInputs(){this.rootElement.querySelector("descope-button").onclick=()=>this.inputElement.click()}attributeChangedCallback(t,e,n){super.attributeChangedCallback?.(t,e,n),e!==n&&("title"===t?this.updateTitle(n):"description"===t?this.updateDescription(n):"button-label"===t?this.updateButtonLabel(n):"button-mode"===t?this.updateButtonMode(n):"button-variant"===t?this.updateButtonVariant(n):"size"===t?this.updateButtonSize(n):"accept"===t?this.updateInputAccept(n):"readonly"===t&&this.updateReadOnly(n))}get button(){return this.shadowRoot.querySelector("descope-button")}get input(){return this.shadowRoot.querySelector("input")}get title(){return this.shadowRoot.querySelector(".title-text")}get description(){return this.shadowRoot.querySelector(".description")}get icon(){return this.shadowRoot.querySelector(".icon")}updateTitle(t){this.title.textContent=t}updateDescription(t){this.description.textContent=t}updateButtonLabel(t){this.button.textContent=t}updateButtonSize(t){this.button.setAttribute("size",t)}updateButtonMode(t){this.button.setAttribute("mode",t)}updateButtonVariant(t){this.button.setAttribute("variant",t)}updateInputAccept(t){this.input.setAttribute("accept",t)}updateReadOnly(t){"true"===t?this.input.setAttribute("disabled","true"):this.input.removeAttribute("disabled")}});n(30576),customElements.define(d,v)}}]);
 //# sourceMappingURL=descope-upload-file-index-js.js.map

package/dist/umd/descope-upload-file-index-js.js.map

@@ -1 +1 @@
-{"version":3,"file":"descope-upload-file-index-js.js","mappings":"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","sources":["webpack://@descope/web-components-ui/../components/descope-button/src/component/ButtonClass.js","webpack://@descope/web-components-ui/../components/descope-button/src/component/clickableMixin.js","webpack://@descope/web-components-ui/../components/descope-button/src/component/index.js","webpack://@descope/web-components-ui/../components/descope-icon/src/component/IconClass.js","webpack://@descope/web-components-ui/../components/descope-image/src/component/ImageClass.js","webpack://@descope/web-components-ui/../components/descope-image/src/component/helpers.js","webpack://@descope/web-components-ui/./src/baseClasses/createBaseInputClass.js","webpack://@descope/web-components-ui/./src/components/descope-upload-file/helpers.js","webpack://@descope/web-components-ui/./src/components/descope-upload-file/UploadFileClass.js","webpack://@descope/web-components-ui/./src/components/descope-upload-file/index.js"],"sourcesContent":["import { compose } from '@descope-ui/common/utils';\nimport { getComponentName } from '@descope-ui/common/components-helpers';\nimport {\n  createStyleMixin,\n  draggableMixin,\n  createProxy,\n  componentNameValidationMixin,\n  stretchMixin,\n} from '@descope-ui/common/components-mixins';\nimport { IconClass } from '@descope-ui/descope-icon/class';\nimport { clickableMixin } from './clickableMixin';\n\nexport const componentName = getComponentName('button');\n\nconst resetStyles = `\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\nconst iconStyles = `\n\tvaadin-button::part(prefix),\n\tvaadin-button::part(label) {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t}\n`;\n\nconst editorOverrides = `vaadin-button::part(label) { pointer-events: none; }`;\n\nconst { host, label, slottedIcon } = {\n  host: { selector: () => ':host' },\n  label: { selector: '::part(label)' },\n  slottedIcon: { selector: () => '::slotted(descope-icon)' },\n};\n\nlet loadingIndicatorStyles;\n\nexport const ButtonClass = compose(\n  stretchMixin({ triggers: [{ attr: 'full-width', value: 'true' }] }),\n  createStyleMixin({\n    mappings: {\n      hostWidth: { property: 'width' },\n      hostMaxWidth: { ...host, property: 'max-width' },\n      hostHeight: { property: 'height' },\n      hostDirection: { ...host, property: 'direction' },\n      fontSize: {},\n      fontFamily: {},\n      fontWeight: {},\n\n      cursor: {},\n      backgroundColor: {},\n\n      outlineOffset: {},\n      outlineColor: {},\n      outlineStyle: {},\n      outlineWidth: {},\n\n      borderRadius: {},\n      borderColor: {},\n      borderStyle: {},\n      borderWidth: {},\n\n      verticalPadding: [\n        { property: 'padding-top' },\n        { property: 'padding-bottom' },\n      ],\n      horizontalPadding: [\n        { property: 'padding-right', fallback: '0.875em' },\n        { property: 'padding-left', fallback: '0.875em' },\n      ],\n\n      labelTextColor: { property: 'color' },\n      iconColor: {\n        selector: () => `::slotted(*)`,\n        property: IconClass.cssVarList.fill,\n      },\n      labelTextDecoration: { ...label, property: 'text-decoration' },\n      labelSpacing: { ...label, property: 'gap' },\n      textAlign: { ...label, property: 'justify-content', fallback: 'center' },\n\n      iconSize: [\n        { ...slottedIcon, property: 'width' },\n        { ...slottedIcon, property: 'height' },\n      ],\n    },\n  }),\n  clickableMixin,\n  draggableMixin,\n  componentNameValidationMixin,\n)(\n  createProxy({\n    slots: ['', 'prefix', 'label', 'suffix'],\n    wrappedEleName: 'vaadin-button',\n    style: () => `\n\t\t\t${resetStyles}\n\t\t\t${iconStyles}\n\t\t\t${loadingIndicatorStyles}\n\t\t\t${editorOverrides}\n\t\t\t:host {\n\t\t\t\tpadding: calc(var(${ButtonClass.cssVarList.outlineWidth}) + var(${ButtonClass.cssVarList.outlineOffset}));\n\t\t\t}\n      :host([full-width=\"true\"]) {\n        width: var(${ButtonClass.cssVarList.hostWidth});\n      }\n\t\t\tvaadin-button {\n\t\t\t\theight: calc(var(${ButtonClass.cssVarList.hostHeight}) - var(${ButtonClass.cssVarList.outlineWidth}) - var(${ButtonClass.cssVarList.outlineOffset}));\n\t\t\t}\n\t\t\t[square=\"true\"]:not([full-width=\"true\"]) {\n\t\t\t\twidth: calc(var(${ButtonClass.cssVarList.hostWidth}) - var(${ButtonClass.cssVarList.outlineWidth}) - var(${ButtonClass.cssVarList.outlineOffset}));\n        padding: 0;\n\t\t\t}\n\t\t`,\n    excludeAttrsSync: ['tabindex', 'class', 'style', 'role'],\n    componentName,\n  }),\n);\n\nconst { color, fontSize } = ButtonClass.cssVarList;\nloadingIndicatorStyles = `\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(${color});\n\t\ttop: calc(50% - (var(${fontSize}) / 2));\n\t\tleft: calc(50% - (var(${fontSize}) / 2));\n\t\tborder-width: calc(var(${fontSize}) / 10);\n\t\twidth: var(${fontSize});\n\t\theight: var(${fontSize});\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`;\n","export const clickableMixin = (superclass) =>\n  class ClickableMixinClass extends superclass {\n    get isLoading() {\n      return this.getAttribute('loading') === 'true';\n    }\n\n    click() {\n      this.isLoading || super.click();\n    }\n  };\n","import { componentName, ButtonClass } from './ButtonClass';\nimport '@vaadin/button';\n\ncustomElements.define(componentName, ButtonClass);\n\nexport { ButtonClass, componentName };\n","import {\n  componentNameValidationMixin,\n  createProxy,\n  createStyleMixin,\n  draggableMixin,\n} from '@descope-ui/common/components-mixins';\nimport { getComponentName } from '@descope-ui/common/components-helpers';\nimport { ImageClass } from '@descope-ui/descope-image/class';\nimport { compose } from '@descope-ui/common/utils';\n\nexport const componentName = getComponentName('icon');\n\nexport const IconClass = compose(\n  createStyleMixin({\n    mappings: {\n      fill: [{}, { property: ImageClass.cssVarList.fill }],\n      height: { selector: () => ':host' },\n      width: { selector: () => ':host' },\n    },\n  }),\n  draggableMixin,\n  componentNameValidationMixin,\n)(\n  createProxy({\n    slots: [],\n    wrappedEleName: 'descope-image',\n    style: () => `\n      :host {\n        display: inline-flex;\n        align-items: center;\n        justify-content: center;\n        max-height: 100%;\n      }\n      `,\n    excludeAttrsSync: ['tabindex', 'class', 'style', 'st-height', 'st-width'],\n    componentName,\n  }),\n);\n"," \nimport {\n  createStyleMixin,\n  draggableMixin,\n  componentNameValidationMixin,\n} from '@descope-ui/common/components-mixins';\nimport { createBaseClass } from '@descope-ui/common/base-classes';\nimport { compose } from '@descope-ui/common/utils';\nimport { getComponentName } from '@descope-ui/common/components-helpers';\nimport { createImage } from './helpers';\nimport { injectStyle } from '@descope-ui/common/components-helpers';\n\nexport const componentName = getComponentName('image');\n\nconst srcAttrs = ['src', 'src-dark'];\n\nclass RawImage extends createBaseClass({\n  componentName,\n  baseSelector: 'slot',\n}) {\n  static get observedAttributes() {\n    return srcAttrs;\n  }\n\n  constructor() {\n    super();\n\n    this.attachShadow({ mode: 'open' }).innerHTML = `\n\t\t<slot></slot>\n\t`;\n\n    injectStyle(\n      `\n\t\t\t:host {\n\t\t\t\tdisplay: inline-flex;\n\t\t\t}\n      :host > slot {\n        width: 100%;\n        height: 100%;\n\t\t\t\tbox-sizing: border-box;\n\t\t\t\tdisplay: flex;\n\t\t\t\toverflow: hidden;\n\t\t\t}\n\n      ::slotted(*) {\n        width: 100%;\n\t\t\t}\n\n      .hidden {\n        display: none;\n      }\n      `,\n      this,\n    );\n  }\n\n  init() {\n    super.init?.();\n    this.toggleVisibility(this.getSrc);\n  }\n\n  onThemeChange() {\n    this.renderImage();\n  }\n\n  toggleVisibility(isVisible) {\n    if (isVisible) {\n      this.classList.remove('hidden');\n    } else {\n      this.classList.add('hidden');\n    }\n  }\n\n  get altText() {\n    return this.getAttribute('alt') || '';\n  }\n\n  get legacySrc() {\n    return this.getAttribute('src');\n  }\n\n  get themeSrc() {\n    return this.getAttribute(`src-${this.currentThemeName}`);\n  }\n\n  get getSrc() {\n    return this.themeSrc || this.legacySrc;\n  }\n\n  // in order to fill an SVG with `currentColor` override all of its `fill` and `path` nodes\n  // with the value from the `st-fill` attribute\n   \n  updateFillColor(node) {\n    // set fill to root node and all its relevant selectors\n    const elementsToReplace = [node, ...node.querySelectorAll('*[fill]')];\n\n    elementsToReplace.forEach((ele) => {\n      ele.setAttribute(\n        'fill',\n        `var(${ImageClass.cssVarList.fill}, ${ele.getAttribute('fill') || \"''\"})`,\n      );\n    });\n  }\n\n  renderImage() {\n    this.toggleVisibility(this.getSrc);\n\n    createImage(this.getSrc, this.altText).then((res) => {\n      this.innerHTML = '';\n      if (res) {\n        this.updateFillColor(res);\n        this.appendChild(res);\n      }\n    });\n  }\n\n  // render only when src attribute matches current theme\n  shouldRender(src) {\n    const srcVal = this.getAttribute(src);\n    return this.getSrc === srcVal;\n  }\n\n  attributeChangedCallback(attrName, oldValue, newValue) {\n    super.attributeChangedCallback?.(attrName, oldValue, newValue);\n\n    if (oldValue === newValue) return;\n\n    if (this.shouldRender(attrName)) {\n      this.renderImage();\n    }\n  }\n}\n\nexport const ImageClass = compose(\n  createStyleMixin({\n    mappings: {\n      fill: {},\n      height: { selector: () => ':host' },\n      width: { selector: () => ':host' },\n    },\n  }),\n  draggableMixin,\n  componentNameValidationMixin,\n)(RawImage);\n","import DOMPurify from 'dompurify';\n\nconst getFileExtension = (path) => {\n  const match = path.match(/\\.([0-9a-z]+)(?:[\\\\?#]|$)/i);\n  return match ? match[1] : null;\n};\n\nconst base64Prefix = 'data:image/svg+xml;base64,';\n\nconst isBase64Svg = (src) => src.startsWith(base64Prefix);\n\nconst createImgEle = (src, altText) => {\n  const ele = document.createElement('img');\n  ele.setAttribute('src', src);\n  ele.setAttribute('alt', altText);\n  return ele;\n};\n\nconst createSvgEle = (text) => {\n  // we want to purify the SVG to avoid XSS attacks\n  const clean = DOMPurify.sanitize(text, {\n    USE_PROFILES: { svg: true, svgFilters: true },\n    // allow image to render\n    ADD_TAGS: ['image'],\n    // forbid interactiviy via `use` tags (which are sanitized by default)\n    FORBID_TAGS: ['defs']\n  });\n\n  const parser = new DOMParser();\n  const ele = parser\n    .parseFromString(clean, 'image/svg+xml')\n    .querySelector('svg');\n  return ele;\n};\n\nexport const createImage = async (src, altText) => {\n  try {\n    let ele;\n    if (isBase64Svg(src)) {\n      // handle base64 source\n      const svgXml = atob(src.slice(base64Prefix.length));\n      ele = createSvgEle(svgXml);\n    } else if (getFileExtension(src) === 'svg') {\n      // handle urls\n      const fetchedSrc = await fetch(src);\n      const text = await fetchedSrc.text();\n      ele = createSvgEle(text);\n    } else {\n      // handle binary\n      ele = createImgEle(src, altText);\n    }\n\n    ele.style.setProperty('max-width', '100%');\n    ele.style.setProperty('max-height', '100%');\n\n    return ele;\n  } catch {\n    return null;\n  }\n};\n","import { compose } from '../helpers';\nimport {\n  changeMixin,\n  inputEventsDispatchingMixin,\n  inputValidationMixin,\n  normalizeBooleanAttributesMixin,\n} from '../mixins';\nimport { createBaseClass } from './createBaseClass';\n\nexport const createBaseInputClass = (...args) =>\n  compose(\n    inputValidationMixin,\n    changeMixin,\n    normalizeBooleanAttributesMixin,\n    inputEventsDispatchingMixin\n  )(createBaseClass(...args));\n","export const getFileBase64 = (fileObj) =>\n  new Promise((resolve) => {\n    const reader = new FileReader();\n    reader.onload = (e) => resolve(e.target.result);\n    reader.readAsDataURL(fileObj);\n  });\n\nexport const getFilename = (fileObj) => fileObj.name.replace(/^.*\\\\/, '');\n","import { ButtonClass } from '@descope-ui/descope-button/class';\nimport { injectStyle } from '@descope-ui/common/components-helpers';\nimport { createStyleMixin, draggableMixin, componentNameValidationMixin } from '../../mixins';\nimport { compose } from '../../helpers';\nimport { getComponentName } from '../../helpers/componentHelpers';\nimport { createBaseInputClass } from '../../baseClasses/createBaseInputClass';\nimport { getFileBase64, getFilename } from './helpers';\n\nexport const componentName = getComponentName('upload-file');\n\nconst observedAttributes = [\n  'title',\n  'description',\n  'button-label',\n  'accept',\n  'readonly',\n  'button-mode',\n  'button-variant',\n  'required',\n  'size',\n  'icon',\n];\n\nconst BaseInputClass = createBaseInputClass({ componentName, baseSelector: ':host > div' });\n\nclass RawUploadFile extends BaseInputClass {\n  static get observedAttributes() {\n    return observedAttributes.concat(BaseInputClass.observedAttributes || []);\n  }\n\n  constructor() {\n    super();\n\n    this.attachShadow({ mode: 'open' }).innerHTML = `\n\t\t\t<div>\n        <slot name=\"icon\"></slot>\n\t\t\t\t<div class=\"title\">\n\t\t\t\t\t<span class=\"title-text\"></span>\n\t\t\t\t</div>\n\t\t\t\t<div class=\"description\"></div>\n\t\t\t\t<div class=\"button-wrapper\">\n\t\t\t\t\t<input type=\"file\" tabindex=\"-1\" aria-hidden=\"true\"/>\n\t\t\t\t\t<descope-button id=\"button\"></descope-button>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t`;\n\n    injectStyle(\n      `\n      :host {\n\t\t\t\tdisplay: flex;\n\t\t\t}\n\t\t\t:host > div {\n\t\t\t\tdisplay: flex;\n\t\t\t\talign-items: center;\n\t\t\t\tjustify-content: center;\n\t\t\t\ttext-align: center;\n\t\t\t\tflex-direction: column;\n\t\t\t\twidth: 100%;\n\t\t\t}\n\t\t\t.button-wrapper {\n\t\t\t\tposition: relative;\n\t\t\t\twidth: fit-content;\n\t\t\t}\n\t\t\tinput {\n\t\t\t\tposition: absolute;\n\t\t\t\twidth: 100%;\n\t\t\t\theight: 100%;\n\t\t\t\topacity: 0;\n\t\t\t}\n        `,\n      this\n    );\n\n    this.wrapperEle = this.shadowRoot.querySelector('.wrapper');\n    this.inputElement = this.shadowRoot.querySelector('input');\n\n    this.button.onclick = () => this.inputElement.click();\n\n    this.inputElement.onchange = async (e) => {\n      const receivedFileList = e.target.files;\n\n      if (!receivedFileList.length) {\n        return;\n      }\n\n      this.value = await getFileBase64(receivedFileList[0]);\n\n      this.updateDescription(getFilename(receivedFileList[0]));\n    };\n\n    this.oninvalid = () => {\n      this.setAttribute('invalid', 'true');\n    };\n  }\n\n  // this is a temp solution,\n  // we should show the input error message like we have in all other inputs\n  /*\n  reportValidity() {\n    this.defaultReportValidity();\n  }\n  */\n\n  getValidity() {\n    if (this.isRequired && !this.input.value) {\n      return { valueMissing: true };\n    }\n    this.removeAttribute('invalid');\n    return {};\n  }\n\n  initInputs() {\n    const button = this.rootElement.querySelector('descope-button');\n    button.onclick = () => this.inputElement.click();\n  }\n\n  attributeChangedCallback(attrName, oldValue, newValue) {\n    super.attributeChangedCallback?.(attrName, oldValue, newValue);\n\n    if (oldValue !== newValue) {\n      if (attrName === 'title') {\n        this.updateTitle(newValue);\n      } else if (attrName === 'description') {\n        this.updateDescription(newValue);\n      } else if (attrName === 'button-label') {\n        this.updateButtonLabel(newValue);\n      } else if (attrName === 'button-mode') {\n        this.updateButtonMode(newValue);\n      } else if (attrName === 'button-variant') {\n        this.updateButtonVariant(newValue);\n      } else if (attrName === 'size') {\n        this.updateButtonSize(newValue);\n      } else if (attrName === 'accept') {\n        this.updateInputAccept(newValue);\n      } else if (attrName === 'readonly') {\n        this.updateReadOnly(newValue);\n      }\n    }\n  }\n\n  get button() {\n    return this.shadowRoot.querySelector('descope-button');\n  }\n\n  get input() {\n    return this.shadowRoot.querySelector('input');\n  }\n\n  get title() {\n    return this.shadowRoot.querySelector('.title-text');\n  }\n\n  get description() {\n    return this.shadowRoot.querySelector('.description');\n  }\n\n  get icon() {\n    return this.shadowRoot.querySelector('.icon');\n  }\n\n  updateTitle(val) {\n    this.title.textContent = val;\n  }\n\n  updateDescription(val) {\n    this.description.textContent = val;\n  }\n\n  updateButtonLabel(val) {\n    this.button.textContent = val;\n  }\n\n  updateButtonSize(val) {\n    this.button.setAttribute('size', val);\n  }\n\n  updateButtonMode(val) {\n    this.button.setAttribute('mode', val);\n  }\n\n  updateButtonVariant(val) {\n    this.button.setAttribute('variant', val);\n  }\n\n  updateInputAccept(val) {\n    this.input.setAttribute('accept', val);\n  }\n\n  updateReadOnly(val) {\n    if (val === 'true') {\n      this.input.setAttribute('disabled', 'true');\n    } else {\n      this.input.removeAttribute('disabled');\n    }\n  }\n}\n\nconst buttonVars = ButtonClass.cssVarList;\nconst { host, wrapper, icon, title, description, requiredIndicator } = {\n  host: { selector: () => ':host' },\n  wrapper: { selector: () => ':host > div' },\n  icon: { selector: () => '::slotted(*)' },\n  title: { selector: () => '.title' },\n  description: { selector: () => '.description' },\n  requiredIndicator: { selector: () => '.title::after' },\n};\n\nexport const UploadFileClass = compose(\n  createStyleMixin({ componentNameOverride: getComponentName('input-wrapper') }),\n  createStyleMixin({\n    mappings: {\n      fontSize: {},\n      fontFamily: {},\n      borderColor: {},\n      borderWidth: {},\n      borderStyle: {},\n      borderRadius: {},\n      hostHeight: { ...host, property: 'height' },\n      hostWidth: { ...host, property: 'width' },\n      hostPadding: { property: 'padding' },\n      hostDirection: [\n        { ...host, property: 'direction' },\n        { selector: () => ButtonClass.componentName, property: buttonVars.hostDirection },\n      ],\n      gap: { ...wrapper },\n      lineHeight: { ...wrapper, property: 'line-height' },\n      titleFontSize: { ...title, property: 'font-size' },\n      titleFontWeight: { ...title, property: 'font-weight' },\n      descriptionFontSize: { ...description, property: 'font-size' },\n      labelTextColor: [\n        { ...title, property: 'color' },\n        { ...description, property: 'color' },\n      ],\n      iconSize: { ...icon, property: 'width' },\n      requiredIndicator: { ...requiredIndicator, property: 'content' },\n    },\n  }),\n  draggableMixin,\n  componentNameValidationMixin\n)(RawUploadFile);\n","import { componentName, UploadFileClass } from './UploadFileClass';\nimport '@descope-ui/descope-button';\n\ncustomElements.define(componentName, UploadFileClass);\n\nexport { UploadFileClass, componentName };\n"],"names":["componentName","_descope_ui_common_components_helpers__WEBPACK_IMPORTED_MODULE_1__","xE","host","label","slottedIcon","selector","loadingIndicatorStyles","ButtonClass","_descope_ui_common_utils__WEBPACK_IMPORTED_MODULE_0__","Zz","_descope_ui_common_components_mixins__WEBPACK_IMPORTED_MODULE_2__","DM","triggers","attr","value","RF","mappings","hostWidth","property","hostMaxWidth","hostHeight","hostDirection","fontSize","fontFamily","fontWeight","cursor","backgroundColor","outlineOffset","outlineColor","outlineStyle","outlineWidth","borderRadius","borderColor","borderStyle","borderWidth","verticalPadding","horizontalPadding","fallback","labelTextColor","iconColor","_descope_ui_descope_icon_class__WEBPACK_IMPORTED_MODULE_3__","S","cssVarList","fill","labelTextDecoration","labelSpacing","textAlign","iconSize","_clickableMixin__WEBPACK_IMPORTED_MODULE_4__","G","VO","tQ","tz","slots","wrappedEleName","style","excludeAttrsSync","color","clickableMixin","superclass","isLoading","this","getAttribute","click","super","customElements","define","_ButtonClass__WEBPACK_IMPORTED_MODULE_0__","T","J","IconClass","_descope_ui_common_utils__WEBPACK_IMPORTED_MODULE_3__","_descope_ui_common_components_mixins__WEBPACK_IMPORTED_MODULE_0__","_descope_ui_descope_image_class__WEBPACK_IMPORTED_MODULE_2__","q","height","width","_descope_ui_common_components_helpers__WEBPACK_IMPORTED_MODULE_3__","srcAttrs","RawImage","_descope_ui_common_base_classes__WEBPACK_IMPORTED_MODULE_1__","qu","baseSelector","observedAttributes","constructor","attachShadow","mode","innerHTML","fz","init","toggleVisibility","getSrc","onThemeChange","renderImage","isVisible","classList","remove","add","altText","legacySrc","themeSrc","currentThemeName","updateFillColor","node","querySelectorAll","forEach","ele","setAttribute","ImageClass","_helpers__WEBPACK_IMPORTED_MODULE_4__","m","then","res","appendChild","shouldRender","src","srcVal","attributeChangedCallback","attrName","oldValue","newValue","_descope_ui_common_utils__WEBPACK_IMPORTED_MODULE_2__","createSvgEle","text","clean","dompurify__WEBPACK_IMPORTED_MODULE_0__","A","sanitize","USE_PROFILES","svg","svgFilters","ADD_TAGS","FORBID_TAGS","DOMParser","parseFromString","querySelector","createImage","async","startsWith","isBase64Svg","svgXml","atob","slice","base64Prefix","path","match","getFileExtension","fetchedSrc","fetch","document","createElement","createImgEle","setProperty","createBaseInputClass","args","_helpers__WEBPACK_IMPORTED_MODULE_0__","_mixins__WEBPACK_IMPORTED_MODULE_1__","XX","_$","yF","jd","_createBaseClass__WEBPACK_IMPORTED_MODULE_2__","componentHelpers","BaseInputClass","y","buttonVars","wrapper","icon","title","description","requiredIndicator","UploadFileClass","helpers","mixins","componentNameOverride","hostPadding","gap","lineHeight","titleFontSize","titleFontWeight","descriptionFontSize","concat","componentsHelpers","wrapperEle","shadowRoot","inputElement","button","onclick","onchange","e","receivedFileList","target","files","fileObj","length","Promise","resolve","reader","FileReader","onload","result","readAsDataURL","updateDescription","name","replace","getFilename","oninvalid","getValidity","isRequired","input","valueMissing","removeAttribute","initInputs","rootElement","updateTitle","updateButtonLabel","updateButtonMode","updateButtonVariant","updateButtonSize","updateInputAccept","updateReadOnly","val","textContent"],"sourceRoot":""}
+{"version":3,"file":"descope-upload-file-index-js.js","mappings":"0NAYO,MAAAA,GAAsB,EAAAC,EAAAC,IAAgB,WAsC7CC,KAAQA,EAAAC,MAAAA,EAAAC,YAAAA,GAA2B,CACnCF,KAAA,CAAUG,SAAA,aACVF,MAAA,CAAWE,SAAA,iBACXD,YAAA,CAAiBC,SAAA,gCAGjB,IAAAC,EAEO,MAAAC,GAAoB,EAAAC,EAAAC,KACzB,EAAAC,EAAAC,IAAY,CAAGC,SAAA,EAAaC,KAAA,aAAAC,MAAA,YAC5B,EAAAJ,EAAAK,IAAgB,CAClBC,SAAA,CACAC,UAAA,CAAmBC,SAAA,SACnBC,aAAA,IAAsBjB,EAAAgB,SAAA,aACtBE,WAAA,CAAoBF,SAAA,UACpBG,cAAA,IAAuBnB,EAAAgB,SAAA,aACvBI,SAAA,GACAC,WAAA,GACAC,WAAA,GAEAC,OAAA,GACAC,gBAAA,GAEAC,cAAA,GACAC,aAAA,GACAC,aAAA,GACAC,aAAA,GAEAC,aAAA,GACAC,YAAA,GACAC,YAAA,GACAC,YAAA,GAEAC,gBAAA,CACA,CAAUjB,SAAA,eACV,CAAUA,SAAA,mBAEVkB,kBAAA,CACA,CAAUlB,SAAA,gBAAAmB,SAAA,WACV,CAAUnB,SAAA,eAAAmB,SAAA,YAGVC,eAAA,CAAwBpB,SAAA,SACxBqB,UAAA,CACAlC,SAAA,mBACAa,SAAkBsB,EAAAC,EAASC,WAAAC,MAE3BC,oBAAA,IAA6BzC,EAAAe,SAAA,mBAC7B2B,aAAA,IAAsB1C,EAAAe,SAAA,OACtB4B,UAAA,IAAmB3C,EAAAe,SAAA,kBAAAmB,SAAA,UAEnBU,SAAA,CACA,IAAU3C,EAAAc,SAAA,SACV,IAAUd,EAAAc,SAAA,cAIR8B,EAAAC,EACAvC,EAAAwC,GACAxC,EAAAyC,GAnDyB,EAqDzB,EAAAzC,EAAA0C,IAAW,CACbC,MAAA,+BACAC,eAAA,gBACAC,MAAA,yjBAGKjD,2GAGmBC,EAAAmC,WAAAZ,uBAA8CvB,EAAAmC,WAAAf,qFAGjDpB,EAAAmC,WAAAzB,yEAGEV,EAAAmC,WAAAtB,qBAA4Cb,EAAAmC,WAAAZ,uBAA8CvB,EAAAmC,WAAAf,wGAG3FpB,EAAAmC,WAAAzB,oBAA2CV,EAAAmC,WAAAZ,uBAA8CvB,EAAAmC,WAAAf,uDAI/G6B,iBAAA,6BACAzD,oBAIA0D,MAAQA,EAAAnC,SAAAA,GAAkBf,EAAAmC,WAC1BpC,EAAA,mbAeemD,iCACUnC,wCACCA,yCACCA,6BACZA,wBACCA,0PC/JT,MAAAoC,EAAAC,GACP,cAAAA,EACA,aAAAC,GACA,eAAAC,KAAAC,aAAA,UACA,CAEA,KAAAC,GACAF,KAAAD,WAAAI,MAAAD,OACA,mGCLAE,eAAAC,OAAsBC,EAAAC,EAAeD,EAAAE,yFCO9B,MAAAtE,GAAsB,EAAAC,EAAAC,IAAgB,QAEtCqE,GAAkB,EAAAC,EAAA9D,KACvB,EAAA+D,EAAAzD,IAAgB,CAClBC,SAAA,CACA2B,KAAA,IAAe,CAAIzB,SAAUuD,EAAAC,EAAUhC,WAAAC,OACvCgC,OAAA,CAAgBtE,SAAA,aAChBuE,MAAA,CAAevE,SAAA,gBAGbmE,EAAAtB,GACAsB,EAAArB,GATuB,EAWvB,EAAAqB,EAAApB,IAAW,CACbC,MAAA,GACAC,eAAA,gBACAC,MAAA,iKAQAC,iBAAA,oDACAzD,oHCvBO,MAAAA,GAAsB,EAAA8E,EAAA5E,IAAgB,SAE7C6E,EAAA,mBAEA,MAAAC,WAAuB,EAAAC,EAAAC,IAAe,CACtClF,gBACAmF,aAAA,UAEA,6BAAAC,GACA,OAAAL,CACA,CAEA,WAAAM,GACApB,QAEAH,KAAAwB,aAAA,CAAwBC,KAAA,SAAcC,UAAA,2BAIlC,EAAAV,EAAAW,IACJ,6UAoBA3B,KAEA,CAEA,IAAA4B,GACAzB,MAAAyB,SACA5B,KAAA6B,iBAAA7B,KAAA8B,OACA,CAEA,aAAAC,GACA/B,KAAAgC,aACA,CAEA,gBAAAH,CAAAI,GACAA,EACAjC,KAAAkC,UAAAC,OAAA,UAEAnC,KAAAkC,UAAAE,IAAA,SAEA,CAEA,WAAAC,GACA,OAAArC,KAAAC,aAAA,UACA,CAEA,aAAAqC,GACA,OAAAtC,KAAAC,aAAA,MACA,CAEA,YAAAsC,GACA,OAAAvC,KAAAC,aAAA,OAAoCD,KAAAwC,mBACpC,CAEA,UAAAV,GACA,OAAA9B,KAAAuC,UAAAvC,KAAAsC,SACA,CAKA,eAAAG,CAAAC,GAEA,CAAAA,KAAAA,EAAAC,iBAAA,YAEAC,QAAAC,IACAA,EAAAC,aACA,OACA,OAAeC,EAAAlE,WAAAC,SAA+B+D,EAAA5C,aAAA,mBAG9C,CAEA,WAAA+B,GACAhC,KAAA6B,iBAAA7B,KAAA8B,SAEI,EAAAkB,EAAAC,GAAWjD,KAAA8B,OAAA9B,KAAAqC,SAAAa,KAAAC,IACfnD,KAAA0B,UAAA,GACAyB,IACAnD,KAAAyC,gBAAAU,GACAnD,KAAAoD,YAAAD,KAGA,CAGA,YAAAE,CAAAC,GACA,MAAAC,EAAAvD,KAAAC,aAAAqD,GACA,OAAAtD,KAAA8B,SAAAyB,CACA,CAEA,wBAAAC,CAAAC,EAAAC,EAAAC,GACAxD,MAAAqD,2BAAAC,EAAAC,EAAAC,GAEAD,IAAAC,GAEA3D,KAAAqD,aAAAI,IACAzD,KAAAgC,aAEA,EAGO,MAAAe,GAAmB,EAAAa,EAAAhH,KACxB,EAAA+D,EAAAzD,IAAgB,CAClBC,SAAA,CACA2B,KAAA,GACAgC,OAAA,CAAgBtE,SAAA,aAChBuE,MAAA,CAAevE,SAAA,gBAGbmE,EAAAtB,GACAsB,EAAArB,GATwB,CAU1B4B,iDC7IA,MAgBA2C,EAAAC,IAEA,MAAAC,EAAgBC,EAAAC,EAASC,SAAAJ,EAAA,CACzBK,aAAA,CAAoBC,KAAA,EAAAC,YAAA,GAEpBC,SAAA,UAEAC,YAAA,WAOA,OAJA,IAAAC,WAEAC,gBAAAV,EAAA,iBACAW,cAAA,QAIOC,EAAAC,MAAAtB,EAAAjB,KACP,IACA,IAAAQ,EACA,GA7BA,CAAAS,GAAAA,EAAAuB,WAFA,8BA+BAC,CAAAxB,GAAA,CAEA,MAAAyB,EAAAC,KAAA1B,EAAA2B,MAAAC,KACArC,EAAAgB,EAAAkB,EACA,MAAM,WAxCN,CAAAI,IACA,MAAAC,EAAAD,EAAAC,MAAA,8BACA,OAAAA,EAAAA,EAAA,SAsCMC,CAAA/B,GAAA,CAEN,MAAAgC,QAAAC,MAAAjC,GACAQ,QAAAwB,EAAAxB,OACAjB,EAAAgB,EAAAC,EACA,MAEAjB,EAtCA,EAAAS,EAAAjB,KACA,MAAAQ,EAAA2C,SAAAC,cAAA,OAGA,OAFA5C,EAAAC,aAAA,MAAAQ,GACAT,EAAAC,aAAA,MAAAT,GACAQ,GAkCA6C,CAAApC,EAAAjB,GAMA,OAHAQ,EAAAnD,MAAAiG,YAAA,oBACA9C,EAAAnD,MAAAiG,YAAA,qBAEA9C,CACA,CAAI,MACJ,WACA,qECjDO,MAAA+C,EAAA,IAAAC,KACL,EAAAC,EAAAlJ,IACEmJ,EAAAC,GACAD,EAAAE,GACAF,EAAAG,GACAH,EAAAI,GAJF,EAKE,EAAAC,EAAAvF,MAAegF,gJCfZ,MCQA3J,GAAsB,EAAAmK,EAAAjK,IAAgB,eAE7CkF,EAAA,CACA,QACA,cACA,eACA,SACA,WACA,cACA,iBACA,WACA,OACA,QAGAgF,GAAuB,EAAAV,EAAAW,GAAoB,CAAGrK,gBAAAmF,aAAA,gBA+K9CmF,EAAmB9J,EAAA8D,EAAW3B,YAC9BxC,KAAQA,EAAAoK,QAAAA,EAAAC,KAAAA,EAAAC,MAAAA,EAAAC,YAAAA,EAAAC,kBAAAA,GAA6D,CACrExK,KAAA,CAAUG,SAAA,aACViK,QAAA,CAAajK,SAAA,mBACbkK,KAAA,CAAUlK,SAAA,oBACVmK,MAAA,CAAWnK,SAAA,cACXoK,YAAA,CAAiBpK,SAAA,oBACjBqK,kBAAA,CAAuBrK,SAAA,sBAGhBsK,GAAwB,EAAAC,EAAAnK,KAC7B,EAAAoK,EAAA9J,IAAgB,CAAG+J,uBAAuB,EAAAZ,EAAAjK,IAAgB,oBAC1D,EAAA4K,EAAA9J,IAAgB,CAClBC,SAAA,CACAM,SAAA,GACAC,WAAA,GACAS,YAAA,GACAE,YAAA,GACAD,YAAA,GACAF,aAAA,GACAX,WAAA,IAAoBlB,EAAAgB,SAAA,UACpBD,UAAA,IAAmBf,EAAAgB,SAAA,SACnB6J,YAAA,CAAqB7J,SAAA,WACrBG,cAAA,CACA,IAAUnB,EAAAgB,SAAA,aACV,CAAUb,SAAA,IAAgBE,EAAA8D,EAAWtE,cAAAmB,SAAAmJ,EAAAhJ,gBAErC2J,IAAA,IAAaV,GACbW,WAAA,IAAoBX,EAAApJ,SAAA,eACpBgK,cAAA,IAAuBV,EAAAtJ,SAAA,aACvBiK,gBAAA,IAAyBX,EAAAtJ,SAAA,eACzBkK,oBAAA,IAA6BX,EAAAvJ,SAAA,aAC7BoB,eAAA,CACA,IAAUkI,EAAAtJ,SAAA,SACV,IAAUuJ,EAAAvJ,SAAA,UAEV6B,SAAA,IAAkBwH,EAAArJ,SAAA,SAClBwJ,kBAAA,IAA2BA,EAAAxJ,SAAA,cAGzB2J,EAAA3H,GACA2H,EAAA1H,GA/B6B,CAvL/B,cAAAgH,EACA,6BAAAhF,GACA,OAAAA,EAAAkG,OAAAlB,EAAAhF,oBAAA,GACA,CAEA,WAAAC,GACApB,QAEAH,KAAAwB,aAAA,CAAwBC,KAAA,SAAcC,UAAA,gYAclC,EAAA+F,EAAA9F,IACJ,0dAuBA3B,MAGAA,KAAA0H,WAAA1H,KAAA2H,WAAAjD,cAAA,YACA1E,KAAA4H,aAAA5H,KAAA2H,WAAAjD,cAAA,SAEA1E,KAAA6H,OAAAC,QAAA,IAAA9H,KAAA4H,aAAA1H,QAEAF,KAAA4H,aAAAG,SAAAnD,MAAAoD,IACA,MAAAC,EAAAD,EAAAE,OAAAC,MDhFO,IAAAC,ECkFPH,EAAAI,SAIArI,KAAA/C,YDtFOmL,ECsF+BH,EAAA,GDrFtC,IAAAK,QAAAC,IACA,MAAAC,EAAA,IAAAC,WACAD,EAAAE,OAAAV,GAAAO,EAAAP,EAAAE,OAAAS,QACAH,EAAAI,cAAAR,MCoFApI,KAAA6I,kBDjFO,CAAAT,GAAAA,EAAAU,KAAAC,QAAA,YCiFsBC,CAAWf,EAAA,OAGxCjI,KAAAiJ,UAAA,KACAjJ,KAAA8C,aAAA,kBAEA,CAUA,WAAAoG,GACA,OAAAlJ,KAAAmJ,aAAAnJ,KAAAoJ,MAAAnM,MACA,CAAeoM,cAAA,IAEfrJ,KAAAsJ,gBAAA,WACA,GACA,CAEA,UAAAC,GACAvJ,KAAAwJ,YAAA9E,cAAA,kBACAoD,QAAA,IAAA9H,KAAA4H,aAAA1H,OACA,CAEA,wBAAAsD,CAAAC,EAAAC,EAAAC,GACAxD,MAAAqD,2BAAAC,EAAAC,EAAAC,GAEAD,IAAAC,IACA,UAAAF,EACAzD,KAAAyJ,YAAA9F,GACQ,gBAAAF,EACRzD,KAAA6I,kBAAAlF,GACQ,iBAAAF,EACRzD,KAAA0J,kBAAA/F,GACQ,gBAAAF,EACRzD,KAAA2J,iBAAAhG,GACQ,mBAAAF,EACRzD,KAAA4J,oBAAAjG,GACQ,SAAAF,EACRzD,KAAA6J,iBAAAlG,GACQ,WAAAF,EACRzD,KAAA8J,kBAAAnG,GACQ,aAAAF,GACRzD,KAAA+J,eAAApG,GAGA,CAEA,UAAAkE,GACA,OAAA7H,KAAA2H,WAAAjD,cAAA,iBACA,CAEA,SAAA0E,GACA,OAAApJ,KAAA2H,WAAAjD,cAAA,QACA,CAEA,SAAAiC,GACA,OAAA3G,KAAA2H,WAAAjD,cAAA,cACA,CAEA,eAAAkC,GACA,OAAA5G,KAAA2H,WAAAjD,cAAA,eACA,CAEA,QAAAgC,GACA,OAAA1G,KAAA2H,WAAAjD,cAAA,QACA,CAEA,WAAA+E,CAAAO,GACAhK,KAAA2G,MAAAsD,YAAAD,CACA,CAEA,iBAAAnB,CAAAmB,GACAhK,KAAA4G,YAAAqD,YAAAD,CACA,CAEA,iBAAAN,CAAAM,GACAhK,KAAA6H,OAAAoC,YAAAD,CACA,CAEA,gBAAAH,CAAAG,GACAhK,KAAA6H,OAAA/E,aAAA,OAAAkH,EACA,CAEA,gBAAAL,CAAAK,GACAhK,KAAA6H,OAAA/E,aAAA,OAAAkH,EACA,CAEA,mBAAAJ,CAAAI,GACAhK,KAAA6H,OAAA/E,aAAA,UAAAkH,EACA,CAEA,iBAAAF,CAAAE,GACAhK,KAAAoJ,MAAAtG,aAAA,SAAAkH,EACA,CAEA,cAAAD,CAAAC,GACA,SAAAA,EACAhK,KAAAoJ,MAAAtG,aAAA,mBAEA9C,KAAAoJ,MAAAE,gBAAA,WAEA,aChMAlJ,eAAAC,OAAsBnE,EAAe4K","sources":["webpack://@descope/web-components-ui/../components/descope-button/src/component/ButtonClass.js","webpack://@descope/web-components-ui/../components/descope-button/src/component/clickableMixin.js","webpack://@descope/web-components-ui/../components/descope-button/src/component/index.js","webpack://@descope/web-components-ui/../components/descope-icon/src/component/IconClass.js","webpack://@descope/web-components-ui/../components/descope-image/src/component/ImageClass.js","webpack://@descope/web-components-ui/../components/descope-image/src/component/helpers.js","webpack://@descope/web-components-ui/./src/baseClasses/createBaseInputClass.js","webpack://@descope/web-components-ui/./src/components/descope-upload-file/helpers.js","webpack://@descope/web-components-ui/./src/components/descope-upload-file/UploadFileClass.js","webpack://@descope/web-components-ui/./src/components/descope-upload-file/index.js"],"sourcesContent":["import { compose } from '@descope-ui/common/utils';\nimport { getComponentName } from '@descope-ui/common/components-helpers';\nimport {\n  createStyleMixin,\n  draggableMixin,\n  createProxy,\n  componentNameValidationMixin,\n  stretchMixin,\n} from '@descope-ui/common/components-mixins';\nimport { IconClass } from '@descope-ui/descope-icon/class';\nimport { clickableMixin } from './clickableMixin';\n\nexport const componentName = getComponentName('button');\n\nconst resetStyles = `\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\nconst iconStyles = `\n\tvaadin-button::part(prefix),\n\tvaadin-button::part(label) {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t}\n`;\n\nconst editorOverrides = `vaadin-button::part(label) { pointer-events: none; }`;\n\nconst { host, label, slottedIcon } = {\n  host: { selector: () => ':host' },\n  label: { selector: '::part(label)' },\n  slottedIcon: { selector: () => '::slotted(descope-icon)' },\n};\n\nlet loadingIndicatorStyles;\n\nexport const ButtonClass = compose(\n  stretchMixin({ triggers: [{ attr: 'full-width', value: 'true' }] }),\n  createStyleMixin({\n    mappings: {\n      hostWidth: { property: 'width' },\n      hostMaxWidth: { ...host, property: 'max-width' },\n      hostHeight: { property: 'height' },\n      hostDirection: { ...host, property: 'direction' },\n      fontSize: {},\n      fontFamily: {},\n      fontWeight: {},\n\n      cursor: {},\n      backgroundColor: {},\n\n      outlineOffset: {},\n      outlineColor: {},\n      outlineStyle: {},\n      outlineWidth: {},\n\n      borderRadius: {},\n      borderColor: {},\n      borderStyle: {},\n      borderWidth: {},\n\n      verticalPadding: [\n        { property: 'padding-top' },\n        { property: 'padding-bottom' },\n      ],\n      horizontalPadding: [\n        { property: 'padding-right', fallback: '0.875em' },\n        { property: 'padding-left', fallback: '0.875em' },\n      ],\n\n      labelTextColor: { property: 'color' },\n      iconColor: {\n        selector: () => `::slotted(*)`,\n        property: IconClass.cssVarList.fill,\n      },\n      labelTextDecoration: { ...label, property: 'text-decoration' },\n      labelSpacing: { ...label, property: 'gap' },\n      textAlign: { ...label, property: 'justify-content', fallback: 'center' },\n\n      iconSize: [\n        { ...slottedIcon, property: 'width' },\n        { ...slottedIcon, property: 'height' },\n      ],\n    },\n  }),\n  clickableMixin,\n  draggableMixin,\n  componentNameValidationMixin,\n)(\n  createProxy({\n    slots: ['', 'prefix', 'label', 'suffix'],\n    wrappedEleName: 'vaadin-button',\n    style: () => `\n\t\t\t${resetStyles}\n\t\t\t${iconStyles}\n\t\t\t${loadingIndicatorStyles}\n\t\t\t${editorOverrides}\n\t\t\t:host {\n\t\t\t\tpadding: calc(var(${ButtonClass.cssVarList.outlineWidth}) + var(${ButtonClass.cssVarList.outlineOffset}));\n\t\t\t}\n      :host([full-width=\"true\"]) {\n        width: var(${ButtonClass.cssVarList.hostWidth});\n      }\n\t\t\tvaadin-button {\n\t\t\t\theight: calc(var(${ButtonClass.cssVarList.hostHeight}) - var(${ButtonClass.cssVarList.outlineWidth}) - var(${ButtonClass.cssVarList.outlineOffset}));\n\t\t\t}\n\t\t\t[square=\"true\"]:not([full-width=\"true\"]) {\n\t\t\t\twidth: calc(var(${ButtonClass.cssVarList.hostWidth}) - var(${ButtonClass.cssVarList.outlineWidth}) - var(${ButtonClass.cssVarList.outlineOffset}));\n        padding: 0;\n\t\t\t}\n\t\t`,\n    excludeAttrsSync: ['tabindex', 'class', 'style'],\n    componentName,\n  }),\n);\n\nconst { color, fontSize } = ButtonClass.cssVarList;\nloadingIndicatorStyles = `\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(${color});\n\t\ttop: calc(50% - (var(${fontSize}) / 2));\n\t\tleft: calc(50% - (var(${fontSize}) / 2));\n\t\tborder-width: calc(var(${fontSize}) / 10);\n\t\twidth: var(${fontSize});\n\t\theight: var(${fontSize});\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`;\n","export const clickableMixin = (superclass) =>\n  class ClickableMixinClass extends superclass {\n    get isLoading() {\n      return this.getAttribute('loading') === 'true';\n    }\n\n    click() {\n      this.isLoading || super.click();\n    }\n  };\n","import { componentName, ButtonClass } from './ButtonClass';\nimport '@vaadin/button';\n\ncustomElements.define(componentName, ButtonClass);\n\nexport { ButtonClass, componentName };\n","import {\n  componentNameValidationMixin,\n  createProxy,\n  createStyleMixin,\n  draggableMixin,\n} from '@descope-ui/common/components-mixins';\nimport { getComponentName } from '@descope-ui/common/components-helpers';\nimport { ImageClass } from '@descope-ui/descope-image/class';\nimport { compose } from '@descope-ui/common/utils';\n\nexport const componentName = getComponentName('icon');\n\nexport const IconClass = compose(\n  createStyleMixin({\n    mappings: {\n      fill: [{}, { property: ImageClass.cssVarList.fill }],\n      height: { selector: () => ':host' },\n      width: { selector: () => ':host' },\n    },\n  }),\n  draggableMixin,\n  componentNameValidationMixin,\n)(\n  createProxy({\n    slots: [],\n    wrappedEleName: 'descope-image',\n    style: () => `\n      :host {\n        display: inline-flex;\n        align-items: center;\n        justify-content: center;\n        max-height: 100%;\n      }\n      `,\n    excludeAttrsSync: ['tabindex', 'class', 'style', 'st-height', 'st-width'],\n    componentName,\n  }),\n);\n"," \nimport {\n  createStyleMixin,\n  draggableMixin,\n  componentNameValidationMixin,\n} from '@descope-ui/common/components-mixins';\nimport { createBaseClass } from '@descope-ui/common/base-classes';\nimport { compose } from '@descope-ui/common/utils';\nimport { getComponentName } from '@descope-ui/common/components-helpers';\nimport { createImage } from './helpers';\nimport { injectStyle } from '@descope-ui/common/components-helpers';\n\nexport const componentName = getComponentName('image');\n\nconst srcAttrs = ['src', 'src-dark'];\n\nclass RawImage extends createBaseClass({\n  componentName,\n  baseSelector: 'slot',\n}) {\n  static get observedAttributes() {\n    return srcAttrs;\n  }\n\n  constructor() {\n    super();\n\n    this.attachShadow({ mode: 'open' }).innerHTML = `\n\t\t<slot></slot>\n\t`;\n\n    injectStyle(\n      `\n\t\t\t:host {\n\t\t\t\tdisplay: inline-flex;\n\t\t\t}\n      :host > slot {\n        width: 100%;\n        height: 100%;\n\t\t\t\tbox-sizing: border-box;\n\t\t\t\tdisplay: flex;\n\t\t\t\toverflow: hidden;\n\t\t\t}\n\n      ::slotted(*) {\n        width: 100%;\n\t\t\t}\n\n      .hidden {\n        display: none;\n      }\n      `,\n      this,\n    );\n  }\n\n  init() {\n    super.init?.();\n    this.toggleVisibility(this.getSrc);\n  }\n\n  onThemeChange() {\n    this.renderImage();\n  }\n\n  toggleVisibility(isVisible) {\n    if (isVisible) {\n      this.classList.remove('hidden');\n    } else {\n      this.classList.add('hidden');\n    }\n  }\n\n  get altText() {\n    return this.getAttribute('alt') || '';\n  }\n\n  get legacySrc() {\n    return this.getAttribute('src');\n  }\n\n  get themeSrc() {\n    return this.getAttribute(`src-${this.currentThemeName}`);\n  }\n\n  get getSrc() {\n    return this.themeSrc || this.legacySrc;\n  }\n\n  // in order to fill an SVG with `currentColor` override all of its `fill` and `path` nodes\n  // with the value from the `st-fill` attribute\n   \n  updateFillColor(node) {\n    // set fill to root node and all its relevant selectors\n    const elementsToReplace = [node, ...node.querySelectorAll('*[fill]')];\n\n    elementsToReplace.forEach((ele) => {\n      ele.setAttribute(\n        'fill',\n        `var(${ImageClass.cssVarList.fill}, ${ele.getAttribute('fill') || \"''\"})`,\n      );\n    });\n  }\n\n  renderImage() {\n    this.toggleVisibility(this.getSrc);\n\n    createImage(this.getSrc, this.altText).then((res) => {\n      this.innerHTML = '';\n      if (res) {\n        this.updateFillColor(res);\n        this.appendChild(res);\n      }\n    });\n  }\n\n  // render only when src attribute matches current theme\n  shouldRender(src) {\n    const srcVal = this.getAttribute(src);\n    return this.getSrc === srcVal;\n  }\n\n  attributeChangedCallback(attrName, oldValue, newValue) {\n    super.attributeChangedCallback?.(attrName, oldValue, newValue);\n\n    if (oldValue === newValue) return;\n\n    if (this.shouldRender(attrName)) {\n      this.renderImage();\n    }\n  }\n}\n\nexport const ImageClass = compose(\n  createStyleMixin({\n    mappings: {\n      fill: {},\n      height: { selector: () => ':host' },\n      width: { selector: () => ':host' },\n    },\n  }),\n  draggableMixin,\n  componentNameValidationMixin,\n)(RawImage);\n","import DOMPurify from 'dompurify';\n\nconst getFileExtension = (path) => {\n  const match = path.match(/\\.([0-9a-z]+)(?:[\\\\?#]|$)/i);\n  return match ? match[1] : null;\n};\n\nconst base64Prefix = 'data:image/svg+xml;base64,';\n\nconst isBase64Svg = (src) => src.startsWith(base64Prefix);\n\nconst createImgEle = (src, altText) => {\n  const ele = document.createElement('img');\n  ele.setAttribute('src', src);\n  ele.setAttribute('alt', altText);\n  return ele;\n};\n\nconst createSvgEle = (text) => {\n  // we want to purify the SVG to avoid XSS attacks\n  const clean = DOMPurify.sanitize(text, {\n    USE_PROFILES: { svg: true, svgFilters: true },\n    // allow image to render\n    ADD_TAGS: ['image'],\n    // forbid interactiviy via `use` tags (which are sanitized by default)\n    FORBID_TAGS: ['defs']\n  });\n\n  const parser = new DOMParser();\n  const ele = parser\n    .parseFromString(clean, 'image/svg+xml')\n    .querySelector('svg');\n  return ele;\n};\n\nexport const createImage = async (src, altText) => {\n  try {\n    let ele;\n    if (isBase64Svg(src)) {\n      // handle base64 source\n      const svgXml = atob(src.slice(base64Prefix.length));\n      ele = createSvgEle(svgXml);\n    } else if (getFileExtension(src) === 'svg') {\n      // handle urls\n      const fetchedSrc = await fetch(src);\n      const text = await fetchedSrc.text();\n      ele = createSvgEle(text);\n    } else {\n      // handle binary\n      ele = createImgEle(src, altText);\n    }\n\n    ele.style.setProperty('max-width', '100%');\n    ele.style.setProperty('max-height', '100%');\n\n    return ele;\n  } catch {\n    return null;\n  }\n};\n","import { compose } from '../helpers';\nimport {\n  changeMixin,\n  inputEventsDispatchingMixin,\n  inputValidationMixin,\n  normalizeBooleanAttributesMixin,\n} from '../mixins';\nimport { createBaseClass } from './createBaseClass';\n\nexport const createBaseInputClass = (...args) =>\n  compose(\n    inputValidationMixin,\n    changeMixin,\n    normalizeBooleanAttributesMixin,\n    inputEventsDispatchingMixin\n  )(createBaseClass(...args));\n","export const getFileBase64 = (fileObj) =>\n  new Promise((resolve) => {\n    const reader = new FileReader();\n    reader.onload = (e) => resolve(e.target.result);\n    reader.readAsDataURL(fileObj);\n  });\n\nexport const getFilename = (fileObj) => fileObj.name.replace(/^.*\\\\/, '');\n","import { ButtonClass } from '@descope-ui/descope-button/class';\nimport { injectStyle } from '@descope-ui/common/components-helpers';\nimport { createStyleMixin, draggableMixin, componentNameValidationMixin } from '../../mixins';\nimport { compose } from '../../helpers';\nimport { getComponentName } from '../../helpers/componentHelpers';\nimport { createBaseInputClass } from '../../baseClasses/createBaseInputClass';\nimport { getFileBase64, getFilename } from './helpers';\n\nexport const componentName = getComponentName('upload-file');\n\nconst observedAttributes = [\n  'title',\n  'description',\n  'button-label',\n  'accept',\n  'readonly',\n  'button-mode',\n  'button-variant',\n  'required',\n  'size',\n  'icon',\n];\n\nconst BaseInputClass = createBaseInputClass({ componentName, baseSelector: ':host > div' });\n\nclass RawUploadFile extends BaseInputClass {\n  static get observedAttributes() {\n    return observedAttributes.concat(BaseInputClass.observedAttributes || []);\n  }\n\n  constructor() {\n    super();\n\n    this.attachShadow({ mode: 'open' }).innerHTML = `\n\t\t\t<div>\n        <slot name=\"icon\"></slot>\n\t\t\t\t<div class=\"title\">\n\t\t\t\t\t<span class=\"title-text\"></span>\n\t\t\t\t</div>\n\t\t\t\t<div class=\"description\"></div>\n\t\t\t\t<div class=\"button-wrapper\">\n\t\t\t\t\t<input type=\"file\" tabindex=\"-1\" aria-labelledby=\"button\"/>\n\t\t\t\t\t<descope-button id=\"button\"></descope-button>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t`;\n\n    injectStyle(\n      `\n      :host {\n\t\t\t\tdisplay: flex;\n\t\t\t}\n\t\t\t:host > div {\n\t\t\t\tdisplay: flex;\n\t\t\t\talign-items: center;\n\t\t\t\tjustify-content: center;\n\t\t\t\ttext-align: center;\n\t\t\t\tflex-direction: column;\n\t\t\t\twidth: 100%;\n\t\t\t}\n\t\t\t.button-wrapper {\n\t\t\t\tposition: relative;\n\t\t\t\twidth: fit-content;\n\t\t\t}\n\t\t\tinput {\n\t\t\t\tposition: absolute;\n\t\t\t\twidth: 100%;\n\t\t\t\theight: 100%;\n\t\t\t\topacity: 0;\n\t\t\t}\n        `,\n      this\n    );\n\n    this.wrapperEle = this.shadowRoot.querySelector('.wrapper');\n    this.inputElement = this.shadowRoot.querySelector('input');\n\n    this.button.onclick = () => this.inputElement.click();\n\n    this.inputElement.onchange = async (e) => {\n      const receivedFileList = e.target.files;\n\n      if (!receivedFileList.length) {\n        return;\n      }\n\n      this.value = await getFileBase64(receivedFileList[0]);\n\n      this.updateDescription(getFilename(receivedFileList[0]));\n    };\n\n    this.oninvalid = () => {\n      this.setAttribute('invalid', 'true');\n    };\n  }\n\n  // this is a temp solution,\n  // we should show the input error message like we have in all other inputs\n  /*\n  reportValidity() {\n    this.defaultReportValidity();\n  }\n  */\n\n  getValidity() {\n    if (this.isRequired && !this.input.value) {\n      return { valueMissing: true };\n    }\n    this.removeAttribute('invalid');\n    return {};\n  }\n\n  initInputs() {\n    const button = this.rootElement.querySelector('descope-button');\n    button.onclick = () => this.inputElement.click();\n  }\n\n  attributeChangedCallback(attrName, oldValue, newValue) {\n    super.attributeChangedCallback?.(attrName, oldValue, newValue);\n\n    if (oldValue !== newValue) {\n      if (attrName === 'title') {\n        this.updateTitle(newValue);\n      } else if (attrName === 'description') {\n        this.updateDescription(newValue);\n      } else if (attrName === 'button-label') {\n        this.updateButtonLabel(newValue);\n      } else if (attrName === 'button-mode') {\n        this.updateButtonMode(newValue);\n      } else if (attrName === 'button-variant') {\n        this.updateButtonVariant(newValue);\n      } else if (attrName === 'size') {\n        this.updateButtonSize(newValue);\n      } else if (attrName === 'accept') {\n        this.updateInputAccept(newValue);\n      } else if (attrName === 'readonly') {\n        this.updateReadOnly(newValue);\n      }\n    }\n  }\n\n  get button() {\n    return this.shadowRoot.querySelector('descope-button');\n  }\n\n  get input() {\n    return this.shadowRoot.querySelector('input');\n  }\n\n  get title() {\n    return this.shadowRoot.querySelector('.title-text');\n  }\n\n  get description() {\n    return this.shadowRoot.querySelector('.description');\n  }\n\n  get icon() {\n    return this.shadowRoot.querySelector('.icon');\n  }\n\n  updateTitle(val) {\n    this.title.textContent = val;\n  }\n\n  updateDescription(val) {\n    this.description.textContent = val;\n  }\n\n  updateButtonLabel(val) {\n    this.button.textContent = val;\n  }\n\n  updateButtonSize(val) {\n    this.button.setAttribute('size', val);\n  }\n\n  updateButtonMode(val) {\n    this.button.setAttribute('mode', val);\n  }\n\n  updateButtonVariant(val) {\n    this.button.setAttribute('variant', val);\n  }\n\n  updateInputAccept(val) {\n    this.input.setAttribute('accept', val);\n  }\n\n  updateReadOnly(val) {\n    if (val === 'true') {\n      this.input.setAttribute('disabled', 'true');\n    } else {\n      this.input.removeAttribute('disabled');\n    }\n  }\n}\n\nconst buttonVars = ButtonClass.cssVarList;\nconst { host, wrapper, icon, title, description, requiredIndicator } = {\n  host: { selector: () => ':host' },\n  wrapper: { selector: () => ':host > div' },\n  icon: { selector: () => '::slotted(*)' },\n  title: { selector: () => '.title' },\n  description: { selector: () => '.description' },\n  requiredIndicator: { selector: () => '.title::after' },\n};\n\nexport const UploadFileClass = compose(\n  createStyleMixin({ componentNameOverride: getComponentName('input-wrapper') }),\n  createStyleMixin({\n    mappings: {\n      fontSize: {},\n      fontFamily: {},\n      borderColor: {},\n      borderWidth: {},\n      borderStyle: {},\n      borderRadius: {},\n      hostHeight: { ...host, property: 'height' },\n      hostWidth: { ...host, property: 'width' },\n      hostPadding: { property: 'padding' },\n      hostDirection: [\n        { ...host, property: 'direction' },\n        { selector: () => ButtonClass.componentName, property: buttonVars.hostDirection },\n      ],\n      gap: { ...wrapper },\n      lineHeight: { ...wrapper, property: 'line-height' },\n      titleFontSize: { ...title, property: 'font-size' },\n      titleFontWeight: { ...title, property: 'font-weight' },\n      descriptionFontSize: { ...description, property: 'font-size' },\n      labelTextColor: [\n        { ...title, property: 'color' },\n        { ...description, property: 'color' },\n      ],\n      iconSize: { ...icon, property: 'width' },\n      requiredIndicator: { ...requiredIndicator, property: 'content' },\n    },\n  }),\n  draggableMixin,\n  componentNameValidationMixin\n)(RawUploadFile);\n","import { componentName, UploadFileClass } from './UploadFileClass';\nimport '@descope-ui/descope-button';\n\ncustomElements.define(componentName, UploadFileClass);\n\nexport { UploadFileClass, componentName };\n"],"names":["componentName","_descope_ui_common_components_helpers__WEBPACK_IMPORTED_MODULE_1__","xE","host","label","slottedIcon","selector","loadingIndicatorStyles","ButtonClass","_descope_ui_common_utils__WEBPACK_IMPORTED_MODULE_0__","Zz","_descope_ui_common_components_mixins__WEBPACK_IMPORTED_MODULE_2__","DM","triggers","attr","value","RF","mappings","hostWidth","property","hostMaxWidth","hostHeight","hostDirection","fontSize","fontFamily","fontWeight","cursor","backgroundColor","outlineOffset","outlineColor","outlineStyle","outlineWidth","borderRadius","borderColor","borderStyle","borderWidth","verticalPadding","horizontalPadding","fallback","labelTextColor","iconColor","_descope_ui_descope_icon_class__WEBPACK_IMPORTED_MODULE_3__","S","cssVarList","fill","labelTextDecoration","labelSpacing","textAlign","iconSize","_clickableMixin__WEBPACK_IMPORTED_MODULE_4__","G","VO","tQ","tz","slots","wrappedEleName","style","excludeAttrsSync","color","clickableMixin","superclass","isLoading","this","getAttribute","click","super","customElements","define","_ButtonClass__WEBPACK_IMPORTED_MODULE_0__","T","J","IconClass","_descope_ui_common_utils__WEBPACK_IMPORTED_MODULE_3__","_descope_ui_common_components_mixins__WEBPACK_IMPORTED_MODULE_0__","_descope_ui_descope_image_class__WEBPACK_IMPORTED_MODULE_2__","q","height","width","_descope_ui_common_components_helpers__WEBPACK_IMPORTED_MODULE_3__","srcAttrs","RawImage","_descope_ui_common_base_classes__WEBPACK_IMPORTED_MODULE_1__","qu","baseSelector","observedAttributes","constructor","attachShadow","mode","innerHTML","fz","init","toggleVisibility","getSrc","onThemeChange","renderImage","isVisible","classList","remove","add","altText","legacySrc","themeSrc","currentThemeName","updateFillColor","node","querySelectorAll","forEach","ele","setAttribute","ImageClass","_helpers__WEBPACK_IMPORTED_MODULE_4__","m","then","res","appendChild","shouldRender","src","srcVal","attributeChangedCallback","attrName","oldValue","newValue","_descope_ui_common_utils__WEBPACK_IMPORTED_MODULE_2__","createSvgEle","text","clean","dompurify__WEBPACK_IMPORTED_MODULE_0__","A","sanitize","USE_PROFILES","svg","svgFilters","ADD_TAGS","FORBID_TAGS","DOMParser","parseFromString","querySelector","createImage","async","startsWith","isBase64Svg","svgXml","atob","slice","base64Prefix","path","match","getFileExtension","fetchedSrc","fetch","document","createElement","createImgEle","setProperty","createBaseInputClass","args","_helpers__WEBPACK_IMPORTED_MODULE_0__","_mixins__WEBPACK_IMPORTED_MODULE_1__","XX","_$","yF","jd","_createBaseClass__WEBPACK_IMPORTED_MODULE_2__","componentHelpers","BaseInputClass","y","buttonVars","wrapper","icon","title","description","requiredIndicator","UploadFileClass","helpers","mixins","componentNameOverride","hostPadding","gap","lineHeight","titleFontSize","titleFontWeight","descriptionFontSize","concat","componentsHelpers","wrapperEle","shadowRoot","inputElement","button","onclick","onchange","e","receivedFileList","target","files","fileObj","length","Promise","resolve","reader","FileReader","onload","result","readAsDataURL","updateDescription","name","replace","getFilename","oninvalid","getValidity","isRequired","input","valueMissing","removeAttribute","initInputs","rootElement","updateTitle","updateButtonLabel","updateButtonMode","updateButtonVariant","updateButtonSize","updateInputAccept","updateReadOnly","val","textContent"],"sourceRoot":""}

package/dist/umd/descope-user-attribute-index-js.js

@@ -1,2 +1,2 @@
-(self.webpackChunk_descope_web_components_ui=self.webpackChunk_descope_web_components_ui||[]).push([[1202,1578,2294,4188,6724],{78159(t){t.exports="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMTgiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4gPHBhdGggZD0iTTkgMTYuMTcgNC44MyAxMmwtMS40MiAxLjQxTDkgMTkgMjEgN2wtMS40MS0xLjQxeiIgZmlsbD0iY3VycmVudGNvbG9yIi8+IDwvc3ZnPiA="},22966(t){t.exports="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMTgiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4gPHBhdGggZD0iTTE2IDFINGMtMS4xIDAtMiAuOS0yIDJ2MTRoMlYzaDEyVjF6bTMgNEg4Yy0xLjEgMC0yIC45LTIgMnYxNGMwIDEuMS45IDIgMiAyaDExYzEuMSAwIDItLjkgMi0yVjdjMC0xLjEtLjktMi0yLTJ6bTAgMTZIOFY3aDExdjE0eiIgZmlsbD0iY3VycmVudGNvbG9yIi8+IDwvc3ZnPiA="},76368(t){t.exports="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTgiIHZpZXdCb3g9IjAgMCAxNCAxOCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4gPHBhdGggZD0iTTEgMTZDMSAxNy4xIDEuOSAxOCAzIDE4SDExQzEyLjEgMTggMTMgMTcuMSAxMyAxNlY0SDFWMTZaTTMgNkgxMVYxNkgzVjZaTTEwLjUgMUw5LjUgMEg0LjVMMy41IDFIMFYzSDE0VjFIMTAuNVoiIGZpbGw9ImN1cnJlbnRjb2xvciIvPiA8L3N2Zz4="},65725(t){t.exports="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMTgiIHZpZXdCb3g9IjAgMCAxNSAxNSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4gPHBhdGggZD0iTTEwLjAwMDIgMC45OTIxNDlDMTAuMDAwMiAxLjAxNjE1IDEwLjAwMDIgMS4wMTYxNSAxMC4wMDAyIDEuMDE2MTVMOC4yMjQxOSAzLjAwODE1SDIuOTkyMTlDMi40NjQxOSAzLjAwODE1IDIuMDA4MTkgMy40NDAxNSAyLjAwODE5IDMuOTkyMTVWMTIuMDA4MkMyLjAwODE5IDEyLjUzNjIgMi40NDAxOSAxMi45OTIyIDIuOTkyMTkgMTIuOTkyMkg1LjUzNjE5QzUuODQ4MTkgMTMuMDQwMiA2LjE2MDE5IDEzLjA0MDIgNi40NzIxOSAxMi45OTIySDExLjAwODJDMTEuNTM2MiAxMi45OTIyIDExLjk5MjIgMTIuNTYwMiAxMS45OTIyIDEyLjAwODJWNy43ODQxNkwxMy45MzYyIDUuNjI0MTVMMTQuMDA4MiA1LjY3MjE1VjExLjk4NDJDMTQuMDA4MiAxMy42NjQyIDEyLjY2NDIgMTUuMDA4MiAxMS4wMDgyIDE1LjAwODJIMy4wMTYxOUMxLjMzNjE5IDE1LjAwODIgLTAuMDA3ODEyNSAxMy42NjQyIC0wLjAwNzgxMjUgMTEuOTg0MlYzLjk5MjE1Qy0wLjAwNzgxMjUgMi4zMzYxNSAxLjMzNjE5IDAuOTkyMTQ5IDMuMDE2MTkgMC45OTIxNDlIMTAuMDAwMlpNMTEuMjcyMiAyLjYyNDE1TDEyLjYxNjIgNC4xMTIxNUw3LjcyMDE5IDkuNjgwMTZDNy41MDQxOSA5LjkyMDE2IDYuODMyMTkgMTAuMjMyMiA1LjY4MDE5IDEwLjYxNjJDNS42NTYxOSAxMC42NDAyIDUuNjA4MTkgMTAuNjQwMiA1LjU2MDE5IDEwLjYxNjJDNS40NjQxOSAxMC41OTIyIDUuMzkyMTkgMTAuNDcyMiA1LjQ0MDE5IDEwLjM3NjJDNS43NTIxOSA5LjI0ODE2IDYuMDQwMTkgOC41NTIxNiA2LjI1NjE5IDguMzEyMTZMMTEuMjcyMiAyLjYyNDE1Wk0xMS45MjAyIDEuODU2MTVMMTMuMjg4MiAwLjMyMDE0OUMxMy42NDgyIC0wLjA4Nzg1MTYgMTQuMjcyMiAtMC4xMTE4NTIgMTQuNjgwMiAwLjI3MjE0OUMxNS4wODgyIDAuNjMyMTQ5IDE1LjExMjIgMS4yODAxNSAxNC43NTIyIDEuNjg4MTVMMTMuMjY0MiAzLjM2ODE1TDExLjkyMDIgMS44NTYxNVoiIGZpbGw9ImN1cnJlbnRjb2xvciIvPiA8L3N2Zz4g"},77888(t,e,n){"use strict";n.d(e,{T:()=>r,e:()=>d});var i=n(88961),o=n(72270),s=n(25964),a=n(63200);const r=(0,s.xE)("badge");class l extends((0,o.qu)({componentName:r,baseSelector:":host > div"})){static get observedAttributes(){return["data-attachment-size","shrink-to-indicator-threshold"]}constructor(){super(),this.attachShadow({mode:"open"}).innerHTML="\n\t\t<div>\n      <slot></slot>\n\t\t</div>\n\t\t",(0,s.fz)("\n      :host {\n        display: inline-flex;\n      }\n      :host > div {\n        position: relative;\n        width: 100%;\n        text-overflow: ellipsis;\n        overflow: hidden;\n        white-space: nowrap;\n      }\n      ",this)}get shrinkToIndicatorThreshold(){return this.getAttribute("shrink-to-indicator-threshold")||65}#t(t){this.toggleAttribute("shrink-to-indicator",parseFloat(t)<this.shrinkToIndicatorThreshold)}attributeChangedCallback(t,e,n){super.attributeChangedCallback?.(t,e,n),"data-attachment-size"===t&&e!==n&&this.#t(n)}}const d=(0,a.Zz)((0,i.RF)({mappings:{hostWidth:[{selector:()=>":host",property:"width"}],hostHeight:[{selector:()=>":host",property:"height"}],hostDirection:{property:"direction"},fontFamily:{},fontSize:{},fontWeight:{},lineHeight:{},textTransform:{},verticalPadding:[{property:"padding-top"},{property:"padding-bottom"}],horizontalPadding:[{property:"padding-left"},{property:"padding-right"}],borderWidth:{},borderStyle:{},borderColor:{},borderRadius:{},backgroundColor:{},textColor:{property:"color"},textAlign:{},boxShadow:{},textIndent:{}}}),i.VO,i.tQ)(l)},11065(t,e,n){"use strict";n.r(e),n.d(e,{BadgeClass:()=>i.e,componentName:()=>i.T});var i=n(77888);customElements.define(i.T,i.e)},19624(t,e,n){"use strict";n.d(e,{J:()=>p,T:()=>l});var i=n(63200),o=n(25964),s=n(88961),a=n(98538),r=n(10767);const l=(0,o.xE)("button"),{host:d,label:c,slottedIcon:h}={host:{selector:()=>":host"},label:{selector:"::part(label)"},slottedIcon:{selector:()=>"::slotted(descope-icon)"}};let u;const p=(0,i.Zz)((0,s.DM)({triggers:[{attr:"full-width",value:"true"}]}),(0,s.RF)({mappings:{hostWidth:{property:"width"},hostMaxWidth:{...d,property:"max-width"},hostHeight:{property:"height"},hostDirection:{...d,property:"direction"},fontSize:{},fontFamily:{},fontWeight:{},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(*)",property:a.S.cssVarList.fill},labelTextDecoration:{...c,property:"text-decoration"},labelSpacing:{...c,property:"gap"},textAlign:{...c,property:"justify-content",fallback:"center"},iconSize:[{...h,property:"width"},{...h,property:"height"}]}}),r.G,s.VO,s.tQ)((0,s.tz)({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(${p.cssVarList.outlineWidth}) + var(${p.cssVarList.outlineOffset}));\n\t\t\t}\n      :host([full-width="true"]) {\n        width: var(${p.cssVarList.hostWidth});\n      }\n\t\t\tvaadin-button {\n\t\t\t\theight: calc(var(${p.cssVarList.hostHeight}) - var(${p.cssVarList.outlineWidth}) - var(${p.cssVarList.outlineOffset}));\n\t\t\t}\n\t\t\t[square="true"]:not([full-width="true"]) {\n\t\t\t\twidth: calc(var(${p.cssVarList.hostWidth}) - var(${p.cssVarList.outlineWidth}) - var(${p.cssVarList.outlineOffset}));\n        padding: 0;\n\t\t\t}\n\t\t`,excludeAttrsSync:["tabindex","class","style","role"],componentName:l})),{color:g,fontSize:b}=p.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(${g});\n\t\ttop: calc(50% - (var(${b}) / 2));\n\t\tleft: calc(50% - (var(${b}) / 2));\n\t\tborder-width: calc(var(${b}) / 10);\n\t\twidth: var(${b});\n\t\theight: var(${b});\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`},10767(t,e,n){"use strict";n.d(e,{G:()=>i});const i=t=>class extends t{get isLoading(){return"true"===this.getAttribute("loading")}click(){this.isLoading||super.click()}}},30576(t,e,n){"use strict";n.r(e),n.d(e,{ButtonClass:()=>i.J,componentName:()=>i.T});var i=n(19624);n(83799),customElements.define(i.T,i.J)},98538(t,e,n){"use strict";n.d(e,{S:()=>l,T:()=>r});var i=n(88961),o=n(25964),s=n(8512),a=n(63200);const r=(0,o.xE)("icon"),l=(0,a.Zz)((0,i.RF)({mappings:{fill:[{},{property:s.q.cssVarList.fill}],height:{selector:()=>":host"},width:{selector:()=>":host"}}}),i.VO,i.tQ)((0,i.tz)({slots:[],wrappedEleName:"descope-image",style:()=>"\n      :host {\n        display: inline-flex;\n        align-items: center;\n        justify-content: center;\n        max-height: 100%;\n      }\n      ",excludeAttrsSync:["tabindex","class","style","st-height","st-width"],componentName:r}))},56737(t,e,n){"use strict";n.r(e),n.d(e,{IconClass:()=>i.S,componentName:()=>i.T}),n(53455);var i=n(98538);customElements.define(i.T,i.S)},8512(t,e,n){"use strict";n.d(e,{T:()=>l,q:()=>h});var i=n(88961),o=n(72270),s=n(63200),a=n(25964),r=n(18782);const l=(0,a.xE)("image"),d=["src","src-dark"];class c extends((0,o.qu)({componentName:l,baseSelector:"slot"})){static get observedAttributes(){return d}constructor(){super(),this.attachShadow({mode:"open"}).innerHTML="\n\t\t<slot></slot>\n\t",(0,a.fz)("\n\t\t\t:host {\n\t\t\t\tdisplay: inline-flex;\n\t\t\t}\n      :host > slot {\n        width: 100%;\n        height: 100%;\n\t\t\t\tbox-sizing: border-box;\n\t\t\t\tdisplay: flex;\n\t\t\t\toverflow: hidden;\n\t\t\t}\n\n      ::slotted(*) {\n        width: 100%;\n\t\t\t}\n\n      .hidden {\n        display: none;\n      }\n      ",this)}init(){super.init?.(),this.toggleVisibility(this.getSrc)}onThemeChange(){this.renderImage()}toggleVisibility(t){t?this.classList.remove("hidden"):this.classList.add("hidden")}get altText(){return this.getAttribute("alt")||""}get legacySrc(){return this.getAttribute("src")}get themeSrc(){return this.getAttribute(`src-${this.currentThemeName}`)}get getSrc(){return this.themeSrc||this.legacySrc}updateFillColor(t){[t,...t.querySelectorAll("*[fill]")].forEach(t=>{t.setAttribute("fill",`var(${h.cssVarList.fill}, ${t.getAttribute("fill")||"''"})`)})}renderImage(){this.toggleVisibility(this.getSrc),(0,r.m)(this.getSrc,this.altText).then(t=>{this.innerHTML="",t&&(this.updateFillColor(t),this.appendChild(t))})}shouldRender(t){const e=this.getAttribute(t);return this.getSrc===e}attributeChangedCallback(t,e,n){super.attributeChangedCallback?.(t,e,n),e!==n&&this.shouldRender(t)&&this.renderImage()}}const h=(0,s.Zz)((0,i.RF)({mappings:{fill:{},height:{selector:()=>":host"},width:{selector:()=>":host"}}}),i.VO,i.tQ)(c)},18782(t,e,n){"use strict";n.d(e,{m:()=>s});var i=n(25414);const o=t=>{const e=i.A.sanitize(t,{USE_PROFILES:{svg:!0,svgFilters:!0},ADD_TAGS:["image"],FORBID_TAGS:["defs"]});return(new DOMParser).parseFromString(e,"image/svg+xml").querySelector("svg")},s=async(t,e)=>{try{let n;if((t=>t.startsWith("data:image/svg+xml;base64,"))(t)){const e=atob(t.slice(26));n=o(e)}else if("svg"===(t=>{const e=t.match(/\.([0-9a-z]+)(?:[\\?#]|$)/i);return e?e[1]:null})(t)){const e=await fetch(t),i=await e.text();n=o(i)}else n=((t,e)=>{const n=document.createElement("img");return n.setAttribute("src",t),n.setAttribute("alt",e),n})(t,e);return n.style.setProperty("max-width","100%"),n.style.setProperty("max-height","100%"),n}catch{return null}}},53455(t,e,n){"use strict";n.r(e),n.d(e,{ImageClass:()=>i.q,componentName:()=>i.T});var i=n(8512);customElements.define(i.T,i.q)},66434(t,e,n){"use strict";n.d(e,{T:()=>r,s:()=>c});var i=n(88961),o=n(63200),s=n(25964),a=n(72270);const r=(0,s.xE)("text");class l extends((0,a.qu)({componentName:r,baseSelector:":host > slot"})){constructor(){super(),this.attachShadow({mode:"open"}).innerHTML='\n    <slot part="text-wrapper"></slot>\n    ',(0,s.fz)("\n      :host {\n        display: inline-block;\n        line-height: 1em;\n      }\n      :host > slot {\n        width: 100%;\n        display: inline-block;\n      }\n    ",this)}get hideWhenEmpty(){return"true"===this.getAttribute("hide-when-empty")}init(){super.init(),(0,s.Ge)(this,()=>{const t=!!this.childNodes.length;this.style.display=!t&&this.hideWhenEmpty?"none":""})}}const{host:d}={host:{selector:()=>":host"}},c=(0,o.Zz)((0,i.RF)({mappings:{hostWidth:{...d,property:"width"},hostDirection:{...d,property:"direction"},fontSize:{},textColor:[{property:"color"}],textLineHeight:{property:"line-height"},textLetterSpacing:{property:"letter-spacing"},textShadow:{},textAlign:{},textTransform:{},fontFamily:{},fontStyle:{},fontWeight:{},borderWidth:{},borderStyle:{},borderColor:{}}}),(0,i.DM)({triggers:[{attr:"full-width",value:"true"}]}),i.VO,i.tQ)(l)},63595(t,e,n){"use strict";n.r(e),n.d(e,{TextClass:()=>i.s,componentName:()=>i.T});var i=n(66434);customElements.define(i.T,i.s)},45554(t,e,n){"use strict";n.r(e),n.d(e,{UserAttributeClass:()=>f,componentName:()=>T});var i=n(66434),o=n(19624),s=n(77888),a=n(98538),r=n(25964),l=n(79365),d=n(81365),c=n(9696),h=n(97810),u=n(76368),p=n.n(u),g=n(65725),b=n.n(g),y=n(22966),M=n.n(y),x=n(78159),m=n.n(x);const T=(0,h.xE)("user-attribute");class D extends((0,d.q)({componentName:T,baseSelector:":host > .root"})){constructor(){super(),this.attachShadow({mode:"open"}).innerHTML=`\n      <div class="root">\n        <descope-text st-text-align="auto" data-id="label-text" variant="body1" mode="secondary" class="label"></descope-text>\n        <div class="content-wrapper">\n          <descope-text st-text-align="auto" data-id="value-text" variant="body1" mode="primary" class="value"></descope-text>\n          <div class="btn-wrapper">\n            <descope-badge mode="default" bordered="true" size="xs"></descope-badge>\n            <descope-button size="sm" data-id="copy-btn" variant="link" mode="primary">\n              <slot name="copy-icon"></slot>\n              <descope-icon class="check-icon" src="${m()}" src-dark="${m()}"></descope-icon>\n            </descope-button>\n            <descope-button size="sm" data-id="delete-btn" variant="link" mode="primary">\n              <slot name="delete-icon"></slot>\n            </descope-button>\n            <descope-button size="sm" data-id="edit-btn" variant="link" mode="primary">\n              <slot name="edit-icon"></slot>\n            </descope-button>\n          </div>\n        </div>\n      </div>\n\t\t`,(0,r.fz)(`\n      :host {\n\t\t\t\t\tdisplay: inline-flex;\n          container-type: inline-size;\n\t\t\t\t}\n\n        .root {\n          display: flex;\n          width: 100%;\n          height: 100%;\n          align-items: center;\n        }\n\n        ::slotted(*) {\n          display: flex;\n          align-items: center;\n          justify-content: center;\n        }\n\n        @container (max-width: 529px) {\n          .root {\n            flex-wrap: wrap;\n          }\n        }\n\n        .btn-wrapper {\n          display: flex;\n          justify-content: space-between;\n          align-items: center;\n          flex-grow: 0;\n          flex-shrink: 0;\n        }\n\n        slot[name="edit-icon"],\n        slot[name="delete-icon"],\n        slot[name="copy-icon"] {\n          display: inline-flex;\n          flex-shrink: 0;\n          align-items: center;\n        }\n\n        descope-button[data-id="copy-btn"].hidden {\n          display: none;\n        }\n\n        descope-button[data-id="copy-btn"] .check-icon {\n          display: none;\n        }\n\n        descope-button[data-id="copy-btn"].copied slot[name="copy-icon"] {\n          display: none;\n        }\n\n        descope-button[data-id="copy-btn"].copied .check-icon {\n          display: inline-flex;\n        }\n\n        .content-wrapper {\n          display: flex;\n          flex-grow: 1;\n          align-items: center;\n        }\n\n        descope-text::part(text-wrapper) {\n          text-overflow: ellipsis;\n          overflow: hidden;\n          white-space: nowrap;\n          width: initial;\n        }\n\n        descope-text {\n          display: inline-flex;\n          max-width: 100%;\n          min-width: 0;\n        }\n\n        .label {\n          flex-grow: 1;\n          width: 100%;\n        }\n\n        .value {\n          flex-grow: 1;\n        }\n\n        descope-badge {\n          margin-inline-end: 10px;\n        }\n\n        .hidden {\n          visibility: hidden;\n          width: 0;\n        }\n\n        descope-text[data-id="label-text"].required:after {\n          content: '*';\n          color: var(${i.s.cssVarList.textColor});\n        }\n\n        :host([readonly="true"]) descope-button:not([data-id="copy-btn"]) {\n          visibility: hidden;\n          width: 0;\n        }\n          `,this),this.copyButton=this.shadowRoot.querySelector('descope-button[data-id="copy-btn"]'),this.deleteButton=this.shadowRoot.querySelector('descope-button[data-id="delete-btn"]'),this.editButton=this.shadowRoot.querySelector('descope-button[data-id="edit-btn"]'),this.badge=this.shadowRoot.querySelector("descope-badge"),this.labelText=this.shadowRoot.querySelector('descope-text[data-id="label-text"]'),this.valueText=this.shadowRoot.querySelector('descope-text[data-id="value-text"]')}onLabelChange(){this.labelText.innerText=this.label,this.labelText.setAttribute("title",this.label)}onValueOrPlaceholderChange(){const t=this.value||this.placeholder,e=this.value?"primary":"secondary";this.valueText.innerText=t,this.valueText.setAttribute("title",t),this.valueText.setAttribute("mode",e)}onBadgeLabelChange(){this.badgeLabel?(this.badge.innerText=this.badgeLabel,this.badge.style.display=""):this.badge.style.display="none"}onBadgeTooltipTextChange(){this.badge.setAttribute("title",this.badgeTooltipText||this.badgeLabel)}updateButtonLabel(t,e){let n=t.querySelector("span.btn-label");e?(n||(n=document.createElement("span"),n.classList.add("btn-label"),t.appendChild(n)),n.innerText=e):n?.remove()}onIsRequiredChange(){this.labelText.classList.toggle("required",this.isRequired)}get label(){return this.getAttribute("label")||""}get value(){return this.getAttribute("value")||""}get placeholder(){return this.getAttribute("placeholder")||""}get isRequired(){return"true"===this.getAttribute("required")}get badgeLabel(){return this.getAttribute("badge-label")||""}get badgeTooltipText(){return this.getAttribute("badge-tooltip-text")||""}get editButtonLabel(){return this.getAttribute("edit-button-label")||""}get deleteButtonLabel(){return this.getAttribute("delete-button-label")||""}get isDeleteHidden(){return"true"===this.getAttribute("hide-delete")}get isCopyEnabled(){return"true"===this.getAttribute("show-copy")}get copyButtonLabel(){return this.getAttribute("copy-button-label")||""}init(){this.onLabelChange(),this.onValueOrPlaceholderChange(),this.onIsRequiredChange(),this.onBadgeLabelChange(),this.onBadgeTooltipTextChange(),this.updateButtonLabel(this.editButton,this.editButtonLabel),this.updateButtonLabel(this.deleteButton,this.deleteButtonLabel),this.updateButtonLabel(this.copyButton,this.copyButtonLabel),this.handleDeleteButtonVisibility(),this.handleCopyButtonState(),this.deleteButton.addEventListener("click",()=>this.dispatchEvent(new CustomEvent("delete-clicked",{bubbles:!0,composed:!0}))),this.editButton.addEventListener("click",()=>this.dispatchEvent(new CustomEvent("edit-clicked",{bubbles:!0,composed:!0}))),this.copyButton.addEventListener("click",()=>this.#e()),this.setDefaultChildren()}#e(){this.value&&!this.isDraggable&&navigator.clipboard&&navigator.clipboard.writeText(this.value).then(()=>{this.copyButton.classList.add("copied"),setTimeout(()=>this.copyButton.classList.remove("copied"),2e3)}).catch(()=>{})}handleCopyButtonState(){this.copyButton.classList.toggle("hidden",!this.isCopyEnabled),this.value?this.copyButton.removeAttribute("disabled"):this.copyButton.setAttribute("disabled","true")}#n(t,e){const n=document.createElement("descope-icon");n.setAttribute("src",t),n.setAttribute("src-dark",t),n.setAttribute("slot",e),this.appendChild(n)}setDefaultChildren(){this.querySelector('[slot="delete-icon"]')||this.#n(p(),"delete-icon"),this.querySelector('[slot="edit-icon"]')||this.#n(b(),"edit-icon"),this.setDefaultCopyIcon()}setDefaultCopyIcon(){this.isCopyEnabled&&!this.querySelector('[slot="copy-icon"]')&&this.#n(M(),"copy-icon")}static get observedAttributes(){return["label","value","placeholder","required","badge-label","badge-tooltip-text","edit-button-label","delete-button-label","copy-button-label","hide-delete","show-copy"].concat(super.observedAttributes)}handleDeleteButtonVisibility(){this.deleteButton.classList.toggle("hidden",this.isRequired||!this.value||this.isDeleteHidden)}attributeChangedCallback(t,e,n){super.attributeChangedCallback?.(t,e,n),e!==n&&("label"===t?this.onLabelChange():"value"===t||"placeholder"===t?this.onValueOrPlaceholderChange():"required"===t?this.onIsRequiredChange():"badge-label"===t?this.onBadgeLabelChange():"badge-tooltip-text"===t?this.onBadgeTooltipTextChange():"edit-button-label"===t?this.updateButtonLabel(this.editButton,this.editButtonLabel):"delete-button-label"===t?this.updateButtonLabel(this.deleteButton,this.deleteButtonLabel):"copy-button-label"===t?this.updateButtonLabel(this.copyButton,this.copyButtonLabel):"show-copy"===t&&this.setDefaultCopyIcon(),"value"!==t&&"required"!==t&&"hide-delete"!==t||this.handleDeleteButtonVisibility(),"value"!==t&&"show-copy"!==t||this.handleCopyButtonState())}}const{host:A,textFields:I,buttons:w,badge:L,labelText:v,contentWrapper:j}={host:{selector:()=>":host"},textFields:{selector:"descope-text"},labelText:{selector:'descope-text[data-id="label-text"]'},buttons:{selector:"descope-button"},badge:{selector:"descope-badge"},contentWrapper:{selector:" .content-wrapper"}},f=(0,c.Zz)((0,l.RF)({mappings:{hostWidth:{...A,property:"width"},hostMinWidth:{...A,property:"min-width"},hostMaxWidth:{...A,property:"max-width"},hostDirection:[{...A,property:"direction"},{...I,property:i.s.cssVarList.hostDirection},{...w,property:o.J.cssVarList.hostDirection},{...L,property:s.e.cssVarList.hostDirection}],labelMinWidth:{...v,property:"min-width"},contentMinWidth:{...j,property:"min-width"},badgeMaxWidth:{...L,property:"max-width"},itemsGap:[{property:"gap"},{...j,property:"gap"}],iconColor:[{selector:()=>"::slotted(*)",property:a.S.cssVarList.fill},{selector:()=>".check-icon",property:a.S.cssVarList.fill}]}}),l.VO,l.tQ)(D);n(63595),n(30576),n(11065),n(56737),customElements.define(T,f)}}]);
+(self.webpackChunk_descope_web_components_ui=self.webpackChunk_descope_web_components_ui||[]).push([[1202,1578,2294,4188,6724],{78159(t){t.exports="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMTgiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4gPHBhdGggZD0iTTkgMTYuMTcgNC44MyAxMmwtMS40MiAxLjQxTDkgMTkgMjEgN2wtMS40MS0xLjQxeiIgZmlsbD0iY3VycmVudGNvbG9yIi8+IDwvc3ZnPiA="},22966(t){t.exports="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMTgiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4gPHBhdGggZD0iTTE2IDFINGMtMS4xIDAtMiAuOS0yIDJ2MTRoMlYzaDEyVjF6bTMgNEg4Yy0xLjEgMC0yIC45LTIgMnYxNGMwIDEuMS45IDIgMiAyaDExYzEuMSAwIDItLjkgMi0yVjdjMC0xLjEtLjktMi0yLTJ6bTAgMTZIOFY3aDExdjE0eiIgZmlsbD0iY3VycmVudGNvbG9yIi8+IDwvc3ZnPiA="},76368(t){t.exports="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTgiIHZpZXdCb3g9IjAgMCAxNCAxOCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4gPHBhdGggZD0iTTEgMTZDMSAxNy4xIDEuOSAxOCAzIDE4SDExQzEyLjEgMTggMTMgMTcuMSAxMyAxNlY0SDFWMTZaTTMgNkgxMVYxNkgzVjZaTTEwLjUgMUw5LjUgMEg0LjVMMy41IDFIMFYzSDE0VjFIMTAuNVoiIGZpbGw9ImN1cnJlbnRjb2xvciIvPiA8L3N2Zz4="},65725(t){t.exports="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMTgiIHZpZXdCb3g9IjAgMCAxNSAxNSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4gPHBhdGggZD0iTTEwLjAwMDIgMC45OTIxNDlDMTAuMDAwMiAxLjAxNjE1IDEwLjAwMDIgMS4wMTYxNSAxMC4wMDAyIDEuMDE2MTVMOC4yMjQxOSAzLjAwODE1SDIuOTkyMTlDMi40NjQxOSAzLjAwODE1IDIuMDA4MTkgMy40NDAxNSAyLjAwODE5IDMuOTkyMTVWMTIuMDA4MkMyLjAwODE5IDEyLjUzNjIgMi40NDAxOSAxMi45OTIyIDIuOTkyMTkgMTIuOTkyMkg1LjUzNjE5QzUuODQ4MTkgMTMuMDQwMiA2LjE2MDE5IDEzLjA0MDIgNi40NzIxOSAxMi45OTIySDExLjAwODJDMTEuNTM2MiAxMi45OTIyIDExLjk5MjIgMTIuNTYwMiAxMS45OTIyIDEyLjAwODJWNy43ODQxNkwxMy45MzYyIDUuNjI0MTVMMTQuMDA4MiA1LjY3MjE1VjExLjk4NDJDMTQuMDA4MiAxMy42NjQyIDEyLjY2NDIgMTUuMDA4MiAxMS4wMDgyIDE1LjAwODJIMy4wMTYxOUMxLjMzNjE5IDE1LjAwODIgLTAuMDA3ODEyNSAxMy42NjQyIC0wLjAwNzgxMjUgMTEuOTg0MlYzLjk5MjE1Qy0wLjAwNzgxMjUgMi4zMzYxNSAxLjMzNjE5IDAuOTkyMTQ5IDMuMDE2MTkgMC45OTIxNDlIMTAuMDAwMlpNMTEuMjcyMiAyLjYyNDE1TDEyLjYxNjIgNC4xMTIxNUw3LjcyMDE5IDkuNjgwMTZDNy41MDQxOSA5LjkyMDE2IDYuODMyMTkgMTAuMjMyMiA1LjY4MDE5IDEwLjYxNjJDNS42NTYxOSAxMC42NDAyIDUuNjA4MTkgMTAuNjQwMiA1LjU2MDE5IDEwLjYxNjJDNS40NjQxOSAxMC41OTIyIDUuMzkyMTkgMTAuNDcyMiA1LjQ0MDE5IDEwLjM3NjJDNS43NTIxOSA5LjI0ODE2IDYuMDQwMTkgOC41NTIxNiA2LjI1NjE5IDguMzEyMTZMMTEuMjcyMiAyLjYyNDE1Wk0xMS45MjAyIDEuODU2MTVMMTMuMjg4MiAwLjMyMDE0OUMxMy42NDgyIC0wLjA4Nzg1MTYgMTQuMjcyMiAtMC4xMTE4NTIgMTQuNjgwMiAwLjI3MjE0OUMxNS4wODgyIDAuNjMyMTQ5IDE1LjExMjIgMS4yODAxNSAxNC43NTIyIDEuNjg4MTVMMTMuMjY0MiAzLjM2ODE1TDExLjkyMDIgMS44NTYxNVoiIGZpbGw9ImN1cnJlbnRjb2xvciIvPiA8L3N2Zz4g"},77888(t,e,n){"use strict";n.d(e,{T:()=>r,e:()=>d});var i=n(88961),o=n(72270),s=n(25964),a=n(63200);const r=(0,s.xE)("badge");class l extends((0,o.qu)({componentName:r,baseSelector:":host > div"})){static get observedAttributes(){return["data-attachment-size","shrink-to-indicator-threshold"]}constructor(){super(),this.attachShadow({mode:"open"}).innerHTML="\n\t\t<div>\n      <slot></slot>\n\t\t</div>\n\t\t",(0,s.fz)("\n      :host {\n        display: inline-flex;\n      }\n      :host > div {\n        position: relative;\n        width: 100%;\n        text-overflow: ellipsis;\n        overflow: hidden;\n        white-space: nowrap;\n      }\n      ",this)}get shrinkToIndicatorThreshold(){return this.getAttribute("shrink-to-indicator-threshold")||65}#t(t){this.toggleAttribute("shrink-to-indicator",parseFloat(t)<this.shrinkToIndicatorThreshold)}attributeChangedCallback(t,e,n){super.attributeChangedCallback?.(t,e,n),"data-attachment-size"===t&&e!==n&&this.#t(n)}}const d=(0,a.Zz)((0,i.RF)({mappings:{hostWidth:[{selector:()=>":host",property:"width"}],hostHeight:[{selector:()=>":host",property:"height"}],hostDirection:{property:"direction"},fontFamily:{},fontSize:{},fontWeight:{},lineHeight:{},textTransform:{},verticalPadding:[{property:"padding-top"},{property:"padding-bottom"}],horizontalPadding:[{property:"padding-left"},{property:"padding-right"}],borderWidth:{},borderStyle:{},borderColor:{},borderRadius:{},backgroundColor:{},textColor:{property:"color"},textAlign:{},boxShadow:{},textIndent:{}}}),i.VO,i.tQ)(l)},11065(t,e,n){"use strict";n.r(e),n.d(e,{BadgeClass:()=>i.e,componentName:()=>i.T});var i=n(77888);customElements.define(i.T,i.e)},19624(t,e,n){"use strict";n.d(e,{J:()=>p,T:()=>l});var i=n(63200),o=n(25964),s=n(88961),a=n(98538),r=n(10767);const l=(0,o.xE)("button"),{host:d,label:c,slottedIcon:h}={host:{selector:()=>":host"},label:{selector:"::part(label)"},slottedIcon:{selector:()=>"::slotted(descope-icon)"}};let u;const p=(0,i.Zz)((0,s.DM)({triggers:[{attr:"full-width",value:"true"}]}),(0,s.RF)({mappings:{hostWidth:{property:"width"},hostMaxWidth:{...d,property:"max-width"},hostHeight:{property:"height"},hostDirection:{...d,property:"direction"},fontSize:{},fontFamily:{},fontWeight:{},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(*)",property:a.S.cssVarList.fill},labelTextDecoration:{...c,property:"text-decoration"},labelSpacing:{...c,property:"gap"},textAlign:{...c,property:"justify-content",fallback:"center"},iconSize:[{...h,property:"width"},{...h,property:"height"}]}}),r.G,s.VO,s.tQ)((0,s.tz)({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(${p.cssVarList.outlineWidth}) + var(${p.cssVarList.outlineOffset}));\n\t\t\t}\n      :host([full-width="true"]) {\n        width: var(${p.cssVarList.hostWidth});\n      }\n\t\t\tvaadin-button {\n\t\t\t\theight: calc(var(${p.cssVarList.hostHeight}) - var(${p.cssVarList.outlineWidth}) - var(${p.cssVarList.outlineOffset}));\n\t\t\t}\n\t\t\t[square="true"]:not([full-width="true"]) {\n\t\t\t\twidth: calc(var(${p.cssVarList.hostWidth}) - var(${p.cssVarList.outlineWidth}) - var(${p.cssVarList.outlineOffset}));\n        padding: 0;\n\t\t\t}\n\t\t`,excludeAttrsSync:["tabindex","class","style"],componentName:l})),{color:g,fontSize:b}=p.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(${g});\n\t\ttop: calc(50% - (var(${b}) / 2));\n\t\tleft: calc(50% - (var(${b}) / 2));\n\t\tborder-width: calc(var(${b}) / 10);\n\t\twidth: var(${b});\n\t\theight: var(${b});\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`},10767(t,e,n){"use strict";n.d(e,{G:()=>i});const i=t=>class extends t{get isLoading(){return"true"===this.getAttribute("loading")}click(){this.isLoading||super.click()}}},30576(t,e,n){"use strict";n.r(e),n.d(e,{ButtonClass:()=>i.J,componentName:()=>i.T});var i=n(19624);n(83799),customElements.define(i.T,i.J)},98538(t,e,n){"use strict";n.d(e,{S:()=>l,T:()=>r});var i=n(88961),o=n(25964),s=n(8512),a=n(63200);const r=(0,o.xE)("icon"),l=(0,a.Zz)((0,i.RF)({mappings:{fill:[{},{property:s.q.cssVarList.fill}],height:{selector:()=>":host"},width:{selector:()=>":host"}}}),i.VO,i.tQ)((0,i.tz)({slots:[],wrappedEleName:"descope-image",style:()=>"\n      :host {\n        display: inline-flex;\n        align-items: center;\n        justify-content: center;\n        max-height: 100%;\n      }\n      ",excludeAttrsSync:["tabindex","class","style","st-height","st-width"],componentName:r}))},56737(t,e,n){"use strict";n.r(e),n.d(e,{IconClass:()=>i.S,componentName:()=>i.T}),n(53455);var i=n(98538);customElements.define(i.T,i.S)},8512(t,e,n){"use strict";n.d(e,{T:()=>l,q:()=>h});var i=n(88961),o=n(72270),s=n(63200),a=n(25964),r=n(18782);const l=(0,a.xE)("image"),d=["src","src-dark"];class c extends((0,o.qu)({componentName:l,baseSelector:"slot"})){static get observedAttributes(){return d}constructor(){super(),this.attachShadow({mode:"open"}).innerHTML="\n\t\t<slot></slot>\n\t",(0,a.fz)("\n\t\t\t:host {\n\t\t\t\tdisplay: inline-flex;\n\t\t\t}\n      :host > slot {\n        width: 100%;\n        height: 100%;\n\t\t\t\tbox-sizing: border-box;\n\t\t\t\tdisplay: flex;\n\t\t\t\toverflow: hidden;\n\t\t\t}\n\n      ::slotted(*) {\n        width: 100%;\n\t\t\t}\n\n      .hidden {\n        display: none;\n      }\n      ",this)}init(){super.init?.(),this.toggleVisibility(this.getSrc)}onThemeChange(){this.renderImage()}toggleVisibility(t){t?this.classList.remove("hidden"):this.classList.add("hidden")}get altText(){return this.getAttribute("alt")||""}get legacySrc(){return this.getAttribute("src")}get themeSrc(){return this.getAttribute(`src-${this.currentThemeName}`)}get getSrc(){return this.themeSrc||this.legacySrc}updateFillColor(t){[t,...t.querySelectorAll("*[fill]")].forEach(t=>{t.setAttribute("fill",`var(${h.cssVarList.fill}, ${t.getAttribute("fill")||"''"})`)})}renderImage(){this.toggleVisibility(this.getSrc),(0,r.m)(this.getSrc,this.altText).then(t=>{this.innerHTML="",t&&(this.updateFillColor(t),this.appendChild(t))})}shouldRender(t){const e=this.getAttribute(t);return this.getSrc===e}attributeChangedCallback(t,e,n){super.attributeChangedCallback?.(t,e,n),e!==n&&this.shouldRender(t)&&this.renderImage()}}const h=(0,s.Zz)((0,i.RF)({mappings:{fill:{},height:{selector:()=>":host"},width:{selector:()=>":host"}}}),i.VO,i.tQ)(c)},18782(t,e,n){"use strict";n.d(e,{m:()=>s});var i=n(25414);const o=t=>{const e=i.A.sanitize(t,{USE_PROFILES:{svg:!0,svgFilters:!0},ADD_TAGS:["image"],FORBID_TAGS:["defs"]});return(new DOMParser).parseFromString(e,"image/svg+xml").querySelector("svg")},s=async(t,e)=>{try{let n;if((t=>t.startsWith("data:image/svg+xml;base64,"))(t)){const e=atob(t.slice(26));n=o(e)}else if("svg"===(t=>{const e=t.match(/\.([0-9a-z]+)(?:[\\?#]|$)/i);return e?e[1]:null})(t)){const e=await fetch(t),i=await e.text();n=o(i)}else n=((t,e)=>{const n=document.createElement("img");return n.setAttribute("src",t),n.setAttribute("alt",e),n})(t,e);return n.style.setProperty("max-width","100%"),n.style.setProperty("max-height","100%"),n}catch{return null}}},53455(t,e,n){"use strict";n.r(e),n.d(e,{ImageClass:()=>i.q,componentName:()=>i.T});var i=n(8512);customElements.define(i.T,i.q)},66434(t,e,n){"use strict";n.d(e,{T:()=>r,s:()=>c});var i=n(88961),o=n(63200),s=n(25964),a=n(72270);const r=(0,s.xE)("text");class l extends((0,a.qu)({componentName:r,baseSelector:":host > slot"})){constructor(){super(),this.attachShadow({mode:"open"}).innerHTML='\n    <slot part="text-wrapper"></slot>\n    ',(0,s.fz)("\n      :host {\n        display: inline-block;\n        line-height: 1em;\n      }\n      :host > slot {\n        width: 100%;\n        display: inline-block;\n      }\n    ",this)}get hideWhenEmpty(){return"true"===this.getAttribute("hide-when-empty")}init(){super.init(),(0,s.Ge)(this,()=>{const t=!!this.childNodes.length;this.style.display=!t&&this.hideWhenEmpty?"none":""})}}const{host:d}={host:{selector:()=>":host"}},c=(0,o.Zz)((0,i.RF)({mappings:{hostWidth:{...d,property:"width"},hostDirection:{...d,property:"direction"},fontSize:{},textColor:[{property:"color"}],textLineHeight:{property:"line-height"},textLetterSpacing:{property:"letter-spacing"},textShadow:{},textAlign:{},textTransform:{},fontFamily:{},fontStyle:{},fontWeight:{},borderWidth:{},borderStyle:{},borderColor:{}}}),(0,i.DM)({triggers:[{attr:"full-width",value:"true"}]}),i.VO,i.tQ)(l)},63595(t,e,n){"use strict";n.r(e),n.d(e,{TextClass:()=>i.s,componentName:()=>i.T});var i=n(66434);customElements.define(i.T,i.s)},45554(t,e,n){"use strict";n.r(e),n.d(e,{UserAttributeClass:()=>f,componentName:()=>T});var i=n(66434),o=n(19624),s=n(77888),a=n(98538),r=n(25964),l=n(79365),d=n(81365),c=n(9696),h=n(97810),u=n(76368),p=n.n(u),g=n(65725),b=n.n(g),y=n(22966),M=n.n(y),x=n(78159),m=n.n(x);const T=(0,h.xE)("user-attribute");class D extends((0,d.q)({componentName:T,baseSelector:":host > .root"})){constructor(){super(),this.attachShadow({mode:"open"}).innerHTML=`\n      <div class="root">\n        <descope-text st-text-align="auto" data-id="label-text" variant="body1" mode="secondary" class="label"></descope-text>\n        <div class="content-wrapper">\n          <descope-text st-text-align="auto" data-id="value-text" variant="body1" mode="primary" class="value"></descope-text>\n          <div class="btn-wrapper">\n            <descope-badge mode="default" bordered="true" size="xs"></descope-badge>\n            <descope-button size="sm" data-id="copy-btn" variant="link" mode="primary">\n              <slot name="copy-icon"></slot>\n              <descope-icon class="check-icon" src="${m()}" src-dark="${m()}"></descope-icon>\n            </descope-button>\n            <descope-button size="sm" data-id="delete-btn" variant="link" mode="primary">\n              <slot name="delete-icon"></slot>\n            </descope-button>\n            <descope-button size="sm" data-id="edit-btn" variant="link" mode="primary">\n              <slot name="edit-icon"></slot>\n            </descope-button>\n          </div>\n        </div>\n      </div>\n\t\t`,(0,r.fz)(`\n      :host {\n\t\t\t\t\tdisplay: inline-flex;\n          container-type: inline-size;\n\t\t\t\t}\n\n        .root {\n          display: flex;\n          width: 100%;\n          height: 100%;\n          align-items: center;\n        }\n\n        ::slotted(*) {\n          display: flex;\n          align-items: center;\n          justify-content: center;\n        }\n\n        @container (max-width: 529px) {\n          .root {\n            flex-wrap: wrap;\n          }\n        }\n\n        .btn-wrapper {\n          display: flex;\n          justify-content: space-between;\n          align-items: center;\n          flex-grow: 0;\n          flex-shrink: 0;\n        }\n\n        slot[name="edit-icon"],\n        slot[name="delete-icon"],\n        slot[name="copy-icon"] {\n          display: inline-flex;\n          flex-shrink: 0;\n          align-items: center;\n        }\n\n        descope-button[data-id="copy-btn"].hidden {\n          display: none;\n        }\n\n        descope-button[data-id="copy-btn"] .check-icon {\n          display: none;\n        }\n\n        descope-button[data-id="copy-btn"].copied slot[name="copy-icon"] {\n          display: none;\n        }\n\n        descope-button[data-id="copy-btn"].copied .check-icon {\n          display: inline-flex;\n        }\n\n        .content-wrapper {\n          display: flex;\n          flex-grow: 1;\n          align-items: center;\n        }\n\n        descope-text::part(text-wrapper) {\n          text-overflow: ellipsis;\n          overflow: hidden;\n          white-space: nowrap;\n          width: initial;\n        }\n\n        descope-text {\n          display: inline-flex;\n          max-width: 100%;\n          min-width: 0;\n        }\n\n        .label {\n          flex-grow: 1;\n          width: 100%;\n        }\n\n        .value {\n          flex-grow: 1;\n        }\n\n        descope-badge {\n          margin-inline-end: 10px;\n        }\n\n        .hidden {\n          visibility: hidden;\n          width: 0;\n        }\n\n        descope-text[data-id="label-text"].required:after {\n          content: '*';\n          color: var(${i.s.cssVarList.textColor});\n        }\n\n        :host([readonly="true"]) descope-button:not([data-id="copy-btn"]) {\n          visibility: hidden;\n          width: 0;\n        }\n          `,this),this.copyButton=this.shadowRoot.querySelector('descope-button[data-id="copy-btn"]'),this.deleteButton=this.shadowRoot.querySelector('descope-button[data-id="delete-btn"]'),this.editButton=this.shadowRoot.querySelector('descope-button[data-id="edit-btn"]'),this.badge=this.shadowRoot.querySelector("descope-badge"),this.labelText=this.shadowRoot.querySelector('descope-text[data-id="label-text"]'),this.valueText=this.shadowRoot.querySelector('descope-text[data-id="value-text"]')}onLabelChange(){this.labelText.innerText=this.label,this.labelText.setAttribute("title",this.label)}onValueOrPlaceholderChange(){const t=this.value||this.placeholder,e=this.value?"primary":"secondary";this.valueText.innerText=t,this.valueText.setAttribute("title",t),this.valueText.setAttribute("mode",e)}onBadgeLabelChange(){this.badgeLabel?(this.badge.innerText=this.badgeLabel,this.badge.style.display=""):this.badge.style.display="none"}onBadgeTooltipTextChange(){this.badge.setAttribute("title",this.badgeTooltipText||this.badgeLabel)}updateButtonLabel(t,e){let n=t.querySelector("span.btn-label");e?(n||(n=document.createElement("span"),n.classList.add("btn-label"),t.appendChild(n)),n.innerText=e):n?.remove()}onIsRequiredChange(){this.labelText.classList.toggle("required",this.isRequired)}get label(){return this.getAttribute("label")||""}get value(){return this.getAttribute("value")||""}get placeholder(){return this.getAttribute("placeholder")||""}get isRequired(){return"true"===this.getAttribute("required")}get badgeLabel(){return this.getAttribute("badge-label")||""}get badgeTooltipText(){return this.getAttribute("badge-tooltip-text")||""}get editButtonLabel(){return this.getAttribute("edit-button-label")||""}get deleteButtonLabel(){return this.getAttribute("delete-button-label")||""}get isDeleteHidden(){return"true"===this.getAttribute("hide-delete")}get isCopyEnabled(){return"true"===this.getAttribute("show-copy")}get copyButtonLabel(){return this.getAttribute("copy-button-label")||""}init(){this.onLabelChange(),this.onValueOrPlaceholderChange(),this.onIsRequiredChange(),this.onBadgeLabelChange(),this.onBadgeTooltipTextChange(),this.updateButtonLabel(this.editButton,this.editButtonLabel),this.updateButtonLabel(this.deleteButton,this.deleteButtonLabel),this.updateButtonLabel(this.copyButton,this.copyButtonLabel),this.handleDeleteButtonVisibility(),this.handleCopyButtonState(),this.deleteButton.addEventListener("click",()=>this.dispatchEvent(new CustomEvent("delete-clicked",{bubbles:!0,composed:!0}))),this.editButton.addEventListener("click",()=>this.dispatchEvent(new CustomEvent("edit-clicked",{bubbles:!0,composed:!0}))),this.copyButton.addEventListener("click",()=>this.#e()),this.setDefaultChildren()}#e(){this.value&&!this.isDraggable&&navigator.clipboard&&navigator.clipboard.writeText(this.value).then(()=>{this.copyButton.classList.add("copied"),setTimeout(()=>this.copyButton.classList.remove("copied"),2e3)}).catch(()=>{})}handleCopyButtonState(){this.copyButton.classList.toggle("hidden",!this.isCopyEnabled),this.value?this.copyButton.removeAttribute("disabled"):this.copyButton.setAttribute("disabled","true")}#n(t,e){const n=document.createElement("descope-icon");n.setAttribute("src",t),n.setAttribute("src-dark",t),n.setAttribute("slot",e),this.appendChild(n)}setDefaultChildren(){this.querySelector('[slot="delete-icon"]')||this.#n(p(),"delete-icon"),this.querySelector('[slot="edit-icon"]')||this.#n(b(),"edit-icon"),this.setDefaultCopyIcon()}setDefaultCopyIcon(){this.isCopyEnabled&&!this.querySelector('[slot="copy-icon"]')&&this.#n(M(),"copy-icon")}static get observedAttributes(){return["label","value","placeholder","required","badge-label","badge-tooltip-text","edit-button-label","delete-button-label","copy-button-label","hide-delete","show-copy"].concat(super.observedAttributes)}handleDeleteButtonVisibility(){this.deleteButton.classList.toggle("hidden",this.isRequired||!this.value||this.isDeleteHidden)}attributeChangedCallback(t,e,n){super.attributeChangedCallback?.(t,e,n),e!==n&&("label"===t?this.onLabelChange():"value"===t||"placeholder"===t?this.onValueOrPlaceholderChange():"required"===t?this.onIsRequiredChange():"badge-label"===t?this.onBadgeLabelChange():"badge-tooltip-text"===t?this.onBadgeTooltipTextChange():"edit-button-label"===t?this.updateButtonLabel(this.editButton,this.editButtonLabel):"delete-button-label"===t?this.updateButtonLabel(this.deleteButton,this.deleteButtonLabel):"copy-button-label"===t?this.updateButtonLabel(this.copyButton,this.copyButtonLabel):"show-copy"===t&&this.setDefaultCopyIcon(),"value"!==t&&"required"!==t&&"hide-delete"!==t||this.handleDeleteButtonVisibility(),"value"!==t&&"show-copy"!==t||this.handleCopyButtonState())}}const{host:A,textFields:I,buttons:w,badge:L,labelText:v,contentWrapper:j}={host:{selector:()=>":host"},textFields:{selector:"descope-text"},labelText:{selector:'descope-text[data-id="label-text"]'},buttons:{selector:"descope-button"},badge:{selector:"descope-badge"},contentWrapper:{selector:" .content-wrapper"}},f=(0,c.Zz)((0,l.RF)({mappings:{hostWidth:{...A,property:"width"},hostMinWidth:{...A,property:"min-width"},hostMaxWidth:{...A,property:"max-width"},hostDirection:[{...A,property:"direction"},{...I,property:i.s.cssVarList.hostDirection},{...w,property:o.J.cssVarList.hostDirection},{...L,property:s.e.cssVarList.hostDirection}],labelMinWidth:{...v,property:"min-width"},contentMinWidth:{...j,property:"min-width"},badgeMaxWidth:{...L,property:"max-width"},itemsGap:[{property:"gap"},{...j,property:"gap"}],iconColor:[{selector:()=>"::slotted(*)",property:a.S.cssVarList.fill},{selector:()=>".check-icon",property:a.S.cssVarList.fill}]}}),l.VO,l.tQ)(D);n(63595),n(30576),n(11065),n(56737),customElements.define(T,f)}}]);
 //# sourceMappingURL=descope-user-attribute-index-js.js.map