@descope/web-components-ui 1.34.0 → 1.36.0

package/dist/umd/descope-third-party-app-logo-index-js.js

@@ -1,2 +1,2 @@
-(self.webpackChunk_descope_web_components_ui=self.webpackChunk_descope_web_components_ui||[]).push([[230,1239,7401],{45447:t=>{t.exports="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjkiIGhlaWdodD0iMjgiIHZpZXdCb3g9IjAgMCAyOSAyOCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4gPHBhdGggZD0iTTkuMTQ0OTIgMTUuNjQ1TDcuNDk5OTIgMTRMMi44MzMyNSAxOC42NjY3TDcuNDk5OTIgMjMuMzMzM0w5LjE0NDkyIDIxLjY4ODNMNy4zMDE1OSAxOS44MzMzSDI0Ljk5OTlWMTcuNUg3LjMwMTU5TDkuMTQ0OTIgMTUuNjQ1WiIgZmlsbD0iIzYzNkM3NCIvPiA8cGF0aCBkPSJNMTkuODU1IDEyLjM1NTNMMjEuNSAxNC4wMDAzTDI2LjE2NjcgOS4zMzM2NkwyMS41IDQuNjY2OTlMMTkuODU1IDYuMzExOTlMMjEuNjk4MyA4LjE2Njk5SDRWMTAuNTAwM0gyMS42OTgzTDE5Ljg1NSAxMi4zNTUzWiIgZmlsbD0iIzYzNkM3NCIvPiA8L3N2Zz4g"},51491:(t,e,n)=>{"use strict";n.d(e,{I:()=>a});var s=n(25964),o=n(9696),r=n(79365),i=n(81365);const a=({componentName:t,varName:e,fallbackVarName:n})=>{let a;class l extends((0,i.q)({componentName:t,baseSelector:":host > div"})){constructor(){super(),this.attachShadow({mode:"open"}).innerHTML="\n\t\t\t<div></div>\n\t\t\t",(0,s.fz)(`\n\t\t\t\t:host {\n\t\t\t\t\tdisplay: inline-flex;\n\t\t\t\t}\n\t\t\t\t:host([draggable="true"]) > div {\n\t\t\t\t\tpointer-events: none\n\t\t\t\t}\n\t\t\t\t:host > div {\n\t\t\t\t\tdisplay: inline-block;\n\t\t\t\t\tmax-width: 100%;\n\t\t\t\t\tmax-height: 100%;\n\t\t\t\t\tobject-fit: contain;\n\t\t\t\t\tmargin: auto;\n\t\t\t\t\t${a}\n\t\t\t\t}\n        `,this)}}const c=(0,o.Zz)((0,r.RF)({mappings:{height:{selector:()=>":host > div"},width:{selector:()=>":host > div"},[e]:{property:"content"},[n]:{property:"content"}}}),r.VO,r.tQ)(l);return a=`content: var(${c.cssVarList[e]}, var(${c.cssVarList[n]}));`,c}},20618:(t,e,n)=>{"use strict";n.d(e,{S:()=>d,T:()=>c});var s=n(79365),o=n(81365),r=n(9696),i=n(97810),a=n(28796),l=n(25964);const c=(0,i.xE)("icon");class p extends((0,o.q)({componentName:c,baseSelector:"slot"})){static get observedAttributes(){return["src"]}#t;constructor(){super(),this.attachShadow({mode:"open"}).innerHTML="\n\t\t<slot></slot>\n\t",(0,l.fz)("\n\t\t\t:host > slot {\n\t\t\t\tbox-sizing: border-box;\n\t\t\t\twidth: 100%;\n\t\t\t\theight: 100%;\n\t\t\t\tdisplay: flex;\n\t\t\t\toverflow: hidden;\n\t\t\t}\n\t\t\t:host {\n\t\t\t\tdisplay: inline-block;\n\t\t\t}\n  ",this)}init(){super.init?.(),this.toggleVisibility(this.src)}toggleVisibility(t){this.style.display=t?"":"none"}get src(){return this.getAttribute("src")}updateFillColor(t){[t,...t.querySelectorAll("*[fill]")].forEach((t=>{t.setAttribute("fill",`var(${d.cssVarList.fill}, ${t.getAttribute("fill")||"''"})`)}))}attributeChangedCallback(t,e,n){super.attributeChangedCallback?.(t,e,n),e!==n&&"src"===t&&(this.toggleVisibility(n),(0,a.w)(this.src).then((t=>{if(this.innerHTML="",t){const e=t.cloneNode(!0);this.updateFillColor(e),this.appendChild(e)}})))}}const d=(0,r.Zz)((0,s.RF)({mappings:{fill:{}}}),s.VO,s.tQ)(p)},28796:(t,e,n)=>{"use strict";n.d(e,{w:()=>r});var s=n(25414);const o=t=>{const e=s.A.sanitize(t,{USE_PROFILES:{svg:!0,svgFilters:!0}});return(new DOMParser).parseFromString(e,"image/svg+xml").querySelector("svg")},r=async t=>{try{let e;if((t=>t.startsWith("data:image/svg+xml;base64,"))(t)){const n=atob(t.slice(26));e=o(n)}else if("svg"===(t=>{const e=t.match(/\.([0-9a-z]+)(?:[\\?#]|$)/i);return e?e[1]:null})(t)){const n=await fetch(t),s=await n.text();e=o(s)}else e=(t=>{const e=document.createElement("img");return e.setAttribute("src",t),e})(t);return e.style.setProperty("max-width","100%"),e.style.setProperty("max-height","100%"),e}catch{return null}}},58017:(t,e,n)=>{"use strict";n.r(e),n.d(e,{IconClass:()=>s.S,componentName:()=>s.T});var s=n(20618);customElements.define(s.T,s.S)},59410:(t,e,n)=>{"use strict";n.d(e,{T:()=>r,m:()=>i});var s=n(97810),o=n(51491);const r=(0,s.xE)("logo"),i=(0,o.I)({componentName:r,varName:"url",fallbackVarName:"fallbackUrl"})},86947:(t,e,n)=>{"use strict";n.r(e),n.d(e,{LogoClass:()=>s.m,componentName:()=>s.T});var s=n(59410);customElements.define(s.T,s.m)},6107:(t,e,n)=>{"use strict";n.r(e),n.d(e,{ThirdPartyAppLogoClass:()=>y});var s=n(25964),o=n(81365),r=n(9696),i=n(97810),a=n(79365),l=n(20618),c=n(59410),p=n(45447),d=n.n(p);const g=(0,i.xE)("third-party-app-logo");class h extends((0,o.q)({componentName:g,baseSelector:".wrapper"})){constructor(){super(),this.attachShadow({mode:"open"}).innerHTML=`\n\t\t\t<div class="wrapper">\n        <div class="third-party-app-logo-wrapper">\n          <div class="third-party-app-logo"></div>\n        </div>\n        <div class="arrows">\n          <descope-icon src="${d()}"></descope-icon>\n        </div>\n        <div class="company-logo-wrapper">\n            <descope-logo></descope-logo>\n        </div>\n      </div>\n\t\t\t`,(0,s.fz)('\n        :host {\n\t\t\t\t\tdisplay: inline-flex;\n\t\t\t\t}\n\t\t\t\t:host([draggable="true"]) > div {\n\t\t\t\t\tpointer-events: none\n\t\t\t\t}\n\n        .wrapper {\n          display: flex;\n          justify-content: center;\n          align-items: center;\n          min-width: max-content;\n        }\n\n\t\t\t\t.third-party-app-logo {\n          flex-shrink: 0;\n\t\t\t\t\tdisplay: inline-block;\n\t\t\t\t\tmax-width: 100%;\n\t\t\t\t\tmax-height: 100%;\n\t\t\t\t\tobject-fit: contain;\n\t\t\t\t}\n\n        .company-logo-wrapper, .third-party-app-logo-wrapper {\n          flex-shrink: 0;\n          display: inline-flex;\n        }\n\n        .company-logo-wrapper {\n          justify-content: flex-end;\n        }\n\n        .third-party-app-logo-wrapper {\n          justify-content: flex-start;\n        }\n\n        .arrows {\n          flex-shrink: 0;\n          display: flex;\n        }\n          ',this)}}const m=">.company-logo-wrapper",u=">.third-party-app-logo-wrapper",y=(0,r.Zz)((0,a.RF)({mappings:{logoMaxHeight:[{selector:m,property:"height"},{selector:u,property:"height"}],logoMaxWidth:[{selector:m,property:"max-width"},{selector:u,property:"max-width"}],thirdPartyAppLogo:{selector:()=>".third-party-app-logo",property:"content",fallback:{}},companyLogoFallback:{selector:c.m.componentName,property:c.m.cssVarList.fallbackUrl},gap:{},arrowsColor:{selector:l.S.componentName,property:l.S.cssVarList.fill}}}),a.VO,a.tQ)(h);n(58017),n(86947),customElements.define(g,y)}}]);
+(self.webpackChunk_descope_web_components_ui=self.webpackChunk_descope_web_components_ui||[]).push([[230,1239,6724],{45447:t=>{t.exports="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjkiIGhlaWdodD0iMjgiIHZpZXdCb3g9IjAgMCAyOSAyOCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4gPHBhdGggZD0iTTkuMTQ0OTIgMTUuNjQ1TDcuNDk5OTIgMTRMMi44MzMyNSAxOC42NjY3TDcuNDk5OTIgMjMuMzMzM0w5LjE0NDkyIDIxLjY4ODNMNy4zMDE1OSAxOS44MzMzSDI0Ljk5OTlWMTcuNUg3LjMwMTU5TDkuMTQ0OTIgMTUuNjQ1WiIgZmlsbD0iIzYzNkM3NCIvPiA8cGF0aCBkPSJNMTkuODU1IDEyLjM1NTNMMjEuNSAxNC4wMDAzTDI2LjE2NjcgOS4zMzM2NkwyMS41IDQuNjY2OTlMMTkuODU1IDYuMzExOTlMMjEuNjk4MyA4LjE2Njk5SDRWMTAuNTAwM0gyMS42OTgzTDE5Ljg1NSAxMi4zNTUzWiIgZmlsbD0iIzYzNkM3NCIvPiA8L3N2Zz4g"},98538:(t,e,n)=>{"use strict";n.d(e,{S:()=>p,T:()=>l});var s=n(88961),o=n(72270),r=n(63200),i=n(25964),a=n(31004);const l=(0,i.xE)("icon");class c extends((0,o.qu)({componentName:l,baseSelector:"slot"})){static get observedAttributes(){return["src"]}#t;constructor(){super(),this.attachShadow({mode:"open"}).innerHTML="\n\t\t<slot></slot>\n\t",(0,i.fz)("\n\t\t\t:host > slot {\n\t\t\t\tbox-sizing: border-box;\n\t\t\t\twidth: 100%;\n\t\t\t\theight: 100%;\n\t\t\t\tdisplay: flex;\n\t\t\t\toverflow: hidden;\n\t\t\t}\n\t\t\t:host {\n\t\t\t\tdisplay: inline-block;\n\t\t\t}\n  ",this)}init(){super.init?.(),this.toggleVisibility(this.src)}toggleVisibility(t){this.style.display=t?"":"none"}get src(){return this.getAttribute("src")}updateFillColor(t){[t,...t.querySelectorAll("*[fill]")].forEach((t=>{t.setAttribute("fill",`var(${p.cssVarList.fill}, ${t.getAttribute("fill")||"''"})`)}))}attributeChangedCallback(t,e,n){super.attributeChangedCallback?.(t,e,n),e!==n&&"src"===t&&(this.toggleVisibility(n),(0,a.w)(this.src).then((t=>{if(this.innerHTML="",t){const e=t.cloneNode(!0);this.updateFillColor(e),this.appendChild(e)}})))}}const p=(0,r.Zz)((0,s.RF)({mappings:{fill:{}}}),s.VO,s.tQ)(c)},31004:(t,e,n)=>{"use strict";n.d(e,{w:()=>r});var s=n(25414);const o=t=>{const e=s.A.sanitize(t,{USE_PROFILES:{svg:!0,svgFilters:!0}});return(new DOMParser).parseFromString(e,"image/svg+xml").querySelector("svg")},r=async t=>{try{let e;if((t=>t.startsWith("data:image/svg+xml;base64,"))(t)){const n=atob(t.slice(26));e=o(n)}else if("svg"===(t=>{const e=t.match(/\.([0-9a-z]+)(?:[\\?#]|$)/i);return e?e[1]:null})(t)){const n=await fetch(t),s=await n.text();e=o(s)}else e=(t=>{const e=document.createElement("img");return e.setAttribute("src",t),e})(t);return e.style.setProperty("max-width","100%"),e.style.setProperty("max-height","100%"),e}catch{return null}}},56737:(t,e,n)=>{"use strict";n.r(e),n.d(e,{IconClass:()=>s.S,componentName:()=>s.T});var s=n(98538);customElements.define(s.T,s.S)},51491:(t,e,n)=>{"use strict";n.d(e,{I:()=>a});var s=n(25964),o=n(9696),r=n(79365),i=n(81365);const a=({componentName:t,varName:e,fallbackVarName:n})=>{let a;class l extends((0,i.q)({componentName:t,baseSelector:":host > div"})){constructor(){super(),this.attachShadow({mode:"open"}).innerHTML="\n\t\t\t<div></div>\n\t\t\t",(0,s.fz)(`\n\t\t\t\t:host {\n\t\t\t\t\tdisplay: inline-flex;\n\t\t\t\t}\n\t\t\t\t:host([draggable="true"]) > div {\n\t\t\t\t\tpointer-events: none\n\t\t\t\t}\n\t\t\t\t:host > div {\n\t\t\t\t\tdisplay: inline-block;\n\t\t\t\t\tmax-width: 100%;\n\t\t\t\t\tmax-height: 100%;\n\t\t\t\t\tobject-fit: contain;\n\t\t\t\t\tmargin: auto;\n\t\t\t\t\t${a}\n\t\t\t\t}\n        `,this)}}const c=(0,o.Zz)((0,r.RF)({mappings:{height:{selector:()=>":host > div"},width:{selector:()=>":host > div"},[e]:{property:"content"},[n]:{property:"content"}}}),r.VO,r.tQ)(l);return a=`content: var(${c.cssVarList[e]}, var(${c.cssVarList[n]}));`,c}},59410:(t,e,n)=>{"use strict";n.d(e,{T:()=>r,m:()=>i});var s=n(97810),o=n(51491);const r=(0,s.xE)("logo"),i=(0,o.I)({componentName:r,varName:"url",fallbackVarName:"fallbackUrl"})},86947:(t,e,n)=>{"use strict";n.r(e),n.d(e,{LogoClass:()=>s.m,componentName:()=>s.T});var s=n(59410);customElements.define(s.T,s.m)},6107:(t,e,n)=>{"use strict";n.r(e),n.d(e,{ThirdPartyAppLogoClass:()=>y});var s=n(25964),o=n(81365),r=n(9696),i=n(97810),a=n(79365),l=n(98538),c=n(59410),p=n(45447),d=n.n(p);const g=(0,i.xE)("third-party-app-logo");class h extends((0,o.q)({componentName:g,baseSelector:".wrapper"})){constructor(){super(),this.attachShadow({mode:"open"}).innerHTML=`\n\t\t\t<div class="wrapper">\n        <div class="third-party-app-logo-wrapper">\n          <div class="third-party-app-logo"></div>\n        </div>\n        <div class="arrows">\n          <descope-icon src="${d()}"></descope-icon>\n        </div>\n        <div class="company-logo-wrapper">\n            <descope-logo></descope-logo>\n        </div>\n      </div>\n\t\t\t`,(0,s.fz)('\n        :host {\n\t\t\t\t\tdisplay: inline-flex;\n\t\t\t\t}\n\t\t\t\t:host([draggable="true"]) > div {\n\t\t\t\t\tpointer-events: none\n\t\t\t\t}\n\n        .wrapper {\n          display: flex;\n          justify-content: center;\n          align-items: center;\n          min-width: max-content;\n        }\n\n\t\t\t\t.third-party-app-logo {\n          flex-shrink: 0;\n\t\t\t\t\tdisplay: inline-block;\n\t\t\t\t\tmax-width: 100%;\n\t\t\t\t\tmax-height: 100%;\n\t\t\t\t\tobject-fit: contain;\n\t\t\t\t}\n\n        .company-logo-wrapper, .third-party-app-logo-wrapper {\n          flex-shrink: 0;\n          display: inline-flex;\n        }\n\n        .company-logo-wrapper {\n          justify-content: flex-end;\n        }\n\n        .third-party-app-logo-wrapper {\n          justify-content: flex-start;\n        }\n\n        .arrows {\n          flex-shrink: 0;\n          display: flex;\n        }\n          ',this)}}const m=">.company-logo-wrapper",u=">.third-party-app-logo-wrapper",y=(0,r.Zz)((0,a.RF)({mappings:{logoMaxHeight:[{selector:m,property:"height"},{selector:u,property:"height"}],logoMaxWidth:[{selector:m,property:"max-width"},{selector:u,property:"max-width"}],thirdPartyAppLogo:{selector:()=>".third-party-app-logo",property:"content",fallback:{}},companyLogoFallback:{selector:c.m.componentName,property:c.m.cssVarList.fallbackUrl},gap:{},arrowsColor:{selector:l.S.componentName,property:l.S.cssVarList.fill}}}),a.VO,a.tQ)(h);n(56737),n(86947),customElements.define(g,y)}}]);
 //# sourceMappingURL=descope-third-party-app-logo-index-js.js.map

package/dist/umd/descope-third-party-app-logo-index-js.js.map

@@ -1 +1 @@
-{"version":3,"file":"descope-third-party-app-logo-index-js.js","mappings":"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","sources":["webpack://@descope/web-components-ui/./src/components/descope-third-party-app-logo/arrows.svg","webpack://@descope/web-components-ui/./src/baseClasses/createCssVarImageClass.js","webpack://@descope/web-components-ui/./src/components/descope-icon/IconClass.js","webpack://@descope/web-components-ui/./src/components/descope-icon/helpers.js","webpack://@descope/web-components-ui/./src/components/descope-icon/index.js","webpack://@descope/web-components-ui/./src/components/descope-logo/LogoClass.js","webpack://@descope/web-components-ui/./src/components/descope-logo/index.js","webpack://@descope/web-components-ui/./src/components/descope-third-party-app-logo/ThirdPartyAppLogoClass.js","webpack://@descope/web-components-ui/./src/components/descope-third-party-app-logo/index.js"],"sourcesContent":["module.exports = \"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjkiIGhlaWdodD0iMjgiIHZpZXdCb3g9IjAgMCAyOSAyOCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4gPHBhdGggZD0iTTkuMTQ0OTIgMTUuNjQ1TDcuNDk5OTIgMTRMMi44MzMyNSAxOC42NjY3TDcuNDk5OTIgMjMuMzMzM0w5LjE0NDkyIDIxLjY4ODNMNy4zMDE1OSAxOS44MzMzSDI0Ljk5OTlWMTcuNUg3LjMwMTU5TDkuMTQ0OTIgMTUuNjQ1WiIgZmlsbD0iIzYzNkM3NCIvPiA8cGF0aCBkPSJNMTkuODU1IDEyLjM1NTNMMjEuNSAxNC4wMDAzTDI2LjE2NjcgOS4zMzM2NkwyMS41IDQuNjY2OTlMMTkuODU1IDYuMzExOTlMMjEuNjk4MyA4LjE2Njk5SDRWMTAuNTAwM0gyMS42OTgzTDE5Ljg1NSAxMi4zNTUzWiIgZmlsbD0iIzYzNkM3NCIvPiA8L3N2Zz4g\"","import { injectStyle } from '@descope-ui/common/components-helpers';\nimport { compose } from '../helpers';\nimport { componentNameValidationMixin, createStyleMixin, draggableMixin } from '../mixins';\nimport { createBaseClass } from './createBaseClass';\n\nexport const createCssVarImageClass = ({ componentName, varName, fallbackVarName }) => {\n  let style;\n  const getContent = () => style;\n\n  class RawCssVarImageClass extends createBaseClass({\n    componentName,\n    baseSelector: ':host > div',\n  }) {\n    constructor() {\n      super();\n      this.attachShadow({ mode: 'open' }).innerHTML = `\n\t\t\t<div></div>\n\t\t\t`;\n\n      injectStyle(\n        `\n\t\t\t\t:host {\n\t\t\t\t\tdisplay: inline-flex;\n\t\t\t\t}\n\t\t\t\t:host([draggable=\"true\"]) > div {\n\t\t\t\t\tpointer-events: none\n\t\t\t\t}\n\t\t\t\t:host > div {\n\t\t\t\t\tdisplay: inline-block;\n\t\t\t\t\tmax-width: 100%;\n\t\t\t\t\tmax-height: 100%;\n\t\t\t\t\tobject-fit: contain;\n\t\t\t\t\tmargin: auto;\n\t\t\t\t\t${getContent()}\n\t\t\t\t}\n        `,\n        this\n      );\n    }\n  }\n\n  const CssVarImageClass = compose(\n    createStyleMixin({\n      mappings: {\n        height: { selector: () => ':host > div' },\n        width: { selector: () => ':host > div' },\n        [varName]: { property: 'content' },\n        [fallbackVarName]: { property: 'content' },\n      },\n    }),\n    draggableMixin,\n    componentNameValidationMixin\n  )(RawCssVarImageClass);\n\n  style = `content: var(${CssVarImageClass.cssVarList[varName]}, var(${CssVarImageClass.cssVarList[fallbackVarName]}));`;\n\n  return CssVarImageClass;\n};\n","/* eslint-disable no-use-before-define */\nimport { createStyleMixin, draggableMixin, componentNameValidationMixin } from '../../mixins';\nimport { createBaseClass } from '../../baseClasses/createBaseClass';\nimport { compose } from '../../helpers';\nimport { getComponentName } from '../../helpers/componentHelpers';\nimport { createIcon } from './helpers';\nimport { injectStyle } from '@descope-ui/common/components-helpers';\n\nexport const componentName = getComponentName('icon');\n\nclass RawIcon extends createBaseClass({ componentName, baseSelector: 'slot' }) {\n  static get observedAttributes() {\n    return ['src'];\n  }\n\n  #icon;\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 > slot {\n\t\t\t\tbox-sizing: border-box;\n\t\t\t\twidth: 100%;\n\t\t\t\theight: 100%;\n\t\t\t\tdisplay: flex;\n\t\t\t\toverflow: hidden;\n\t\t\t}\n\t\t\t:host {\n\t\t\t\tdisplay: inline-block;\n\t\t\t}\n  `,\n      this\n    );\n  }\n\n  init() {\n    super.init?.();\n    this.toggleVisibility(this.src);\n  }\n\n  toggleVisibility(isVisible) {\n    this.style.display = isVisible ? '' : 'none';\n  }\n\n  get src() {\n    return this.getAttribute('src');\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  // eslint-disable-next-line class-methods-use-this\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(${IconClass.cssVarList.fill}, ${ele.getAttribute('fill') || \"''\"})`\n      );\n    });\n  }\n\n  attributeChangedCallback(attrName, oldValue, newValue) {\n    super.attributeChangedCallback?.(attrName, oldValue, newValue);\n\n    if (oldValue === newValue) return;\n\n    if (attrName === 'src') {\n      this.toggleVisibility(newValue);\n\n      createIcon(this.src).then((res) => {\n        this.innerHTML = '';\n        if (res) {\n          const clonedNode = res.cloneNode(true);\n          this.updateFillColor(clonedNode);\n          this.appendChild(clonedNode);\n        }\n      });\n    }\n  }\n}\n\nexport const IconClass = compose(\n  createStyleMixin({\n    mappings: {\n      fill: {},\n    },\n  }),\n  draggableMixin,\n  componentNameValidationMixin\n)(RawIcon);\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) => {\n  const ele = document.createElement('img');\n  ele.setAttribute('src', src);\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, { USE_PROFILES: { svg: true, svgFilters: true } });\n\n  const parser = new DOMParser();\n  const ele = parser.parseFromString(clean, 'image/svg+xml').querySelector('svg');\n  return ele;\n};\n\nexport const createIcon = async (src) => {\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);\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 { componentName, IconClass } from './IconClass';\n\ncustomElements.define(componentName, IconClass);\n\nexport { IconClass, componentName };\n","import { getComponentName } from '../../helpers/componentHelpers';\nimport { createCssVarImageClass } from '../../baseClasses/createCssVarImageClass';\n\nexport const componentName = getComponentName('logo');\n\nexport const LogoClass = createCssVarImageClass({\n  componentName,\n  varName: 'url',\n  fallbackVarName: 'fallbackUrl',\n});\n","import { componentName, LogoClass } from './LogoClass';\n\ncustomElements.define(componentName, LogoClass);\n\nexport { LogoClass, componentName };\n","import { injectStyle } from '@descope-ui/common/components-helpers';\nimport { createBaseClass } from '../../baseClasses/createBaseClass';\nimport { compose } from '../../helpers';\nimport { getComponentName } from '../../helpers/componentHelpers';\nimport { componentNameValidationMixin, createStyleMixin, draggableMixin } from '../../mixins';\nimport { IconClass } from '../descope-icon/IconClass';\nimport { LogoClass } from '../descope-logo/LogoClass';\nimport arrowsImg from './arrows.svg';\n\nexport const componentName = getComponentName('third-party-app-logo');\nclass RawThirdPartyAppLogoClass extends createBaseClass({\n  componentName,\n  baseSelector: '.wrapper',\n}) {\n  constructor() {\n    super();\n    this.attachShadow({ mode: 'open' }).innerHTML = `\n\t\t\t<div class=\"wrapper\">\n        <div class=\"third-party-app-logo-wrapper\">\n          <div class=\"third-party-app-logo\"></div>\n        </div>\n        <div class=\"arrows\">\n          <descope-icon src=\"${arrowsImg}\"></descope-icon>\n        </div>\n        <div class=\"company-logo-wrapper\">\n            <descope-logo></descope-logo>\n        </div>\n      </div>\n\t\t\t`;\n\n    injectStyle(\n      `\n        :host {\n\t\t\t\t\tdisplay: inline-flex;\n\t\t\t\t}\n\t\t\t\t:host([draggable=\"true\"]) > div {\n\t\t\t\t\tpointer-events: none\n\t\t\t\t}\n\n        .wrapper {\n          display: flex;\n          justify-content: center;\n          align-items: center;\n          min-width: max-content;\n        }\n\n\t\t\t\t.third-party-app-logo {\n          flex-shrink: 0;\n\t\t\t\t\tdisplay: inline-block;\n\t\t\t\t\tmax-width: 100%;\n\t\t\t\t\tmax-height: 100%;\n\t\t\t\t\tobject-fit: contain;\n\t\t\t\t}\n\n        .company-logo-wrapper, .third-party-app-logo-wrapper {\n          flex-shrink: 0;\n          display: inline-flex;\n        }\n\n        .company-logo-wrapper {\n          justify-content: flex-end;\n        }\n\n        .third-party-app-logo-wrapper {\n          justify-content: flex-start;\n        }\n\n        .arrows {\n          flex-shrink: 0;\n          display: flex;\n        }\n          `,\n      this\n    );\n  }\n}\n\nconst companyLogoWrapper = '>.company-logo-wrapper';\nconst thirdPartyAppLogoWrapper = '>.third-party-app-logo-wrapper';\n\nexport const ThirdPartyAppLogoClass = compose(\n  createStyleMixin({\n    mappings: {\n      logoMaxHeight: [\n        { selector: companyLogoWrapper, property: 'height' },\n        { selector: thirdPartyAppLogoWrapper, property: 'height' },\n      ],\n      logoMaxWidth: [\n        { selector: companyLogoWrapper, property: 'max-width' },\n        { selector: thirdPartyAppLogoWrapper, property: 'max-width' },\n      ],\n      thirdPartyAppLogo: {\n        selector: () => '.third-party-app-logo',\n        property: 'content',\n        fallback: {},\n      },\n      companyLogoFallback: {\n        selector: LogoClass.componentName,\n        property: LogoClass.cssVarList.fallbackUrl,\n      },\n      gap: {},\n      arrowsColor: { selector: IconClass.componentName, property: IconClass.cssVarList.fill },\n    },\n  }),\n  draggableMixin,\n  componentNameValidationMixin\n)(RawThirdPartyAppLogoClass);\n","import { componentName, ThirdPartyAppLogoClass } from './ThirdPartyAppLogoClass';\nimport '../descope-icon';\nimport '../descope-logo';\n\ncustomElements.define(componentName, ThirdPartyAppLogoClass);\n\nexport { ThirdPartyAppLogoClass };\n"],"names":["module","exports","createCssVarImageClass","componentName","varName","fallbackVarName","style","RawCssVarImageClass","baseSelector","constructor","super","this","attachShadow","mode","innerHTML","CssVarImageClass","mappings","height","selector","width","property","cssVarList","RawIcon","observedAttributes","init","toggleVisibility","src","isVisible","display","getAttribute","updateFillColor","node","querySelectorAll","forEach","ele","setAttribute","IconClass","fill","attributeChangedCallback","attrName","oldValue","newValue","then","res","clonedNode","cloneNode","appendChild","createSvgEle","text","clean","sanitize","USE_PROFILES","svg","svgFilters","DOMParser","parseFromString","querySelector","createIcon","async","startsWith","isBase64Svg","svgXml","atob","slice","base64Prefix","path","match","getFileExtension","fetchedSrc","fetch","document","createElement","createImgEle","setProperty","customElements","define","LogoClass","RawThirdPartyAppLogoClass","createBaseClass","companyLogoWrapper","thirdPartyAppLogoWrapper","ThirdPartyAppLogoClass","logoMaxHeight","logoMaxWidth","thirdPartyAppLogo","fallback","companyLogoFallback","fallbackUrl","gap","arrowsColor"],"sourceRoot":""}
+{"version":3,"file":"descope-third-party-app-logo-index-js.js","mappings":"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","sources":["webpack://@descope/web-components-ui/./src/components/descope-third-party-app-logo/arrows.svg","webpack://@descope/web-components-ui/../components/descope-icon/src/component/IconClass.js","webpack://@descope/web-components-ui/../components/descope-icon/src/component/helpers.js","webpack://@descope/web-components-ui/../components/descope-icon/src/component/index.js","webpack://@descope/web-components-ui/./src/baseClasses/createCssVarImageClass.js","webpack://@descope/web-components-ui/./src/components/descope-logo/LogoClass.js","webpack://@descope/web-components-ui/./src/components/descope-logo/index.js","webpack://@descope/web-components-ui/./src/components/descope-third-party-app-logo/ThirdPartyAppLogoClass.js","webpack://@descope/web-components-ui/./src/components/descope-third-party-app-logo/index.js"],"sourcesContent":["module.exports = \"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjkiIGhlaWdodD0iMjgiIHZpZXdCb3g9IjAgMCAyOSAyOCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4gPHBhdGggZD0iTTkuMTQ0OTIgMTUuNjQ1TDcuNDk5OTIgMTRMMi44MzMyNSAxOC42NjY3TDcuNDk5OTIgMjMuMzMzM0w5LjE0NDkyIDIxLjY4ODNMNy4zMDE1OSAxOS44MzMzSDI0Ljk5OTlWMTcuNUg3LjMwMTU5TDkuMTQ0OTIgMTUuNjQ1WiIgZmlsbD0iIzYzNkM3NCIvPiA8cGF0aCBkPSJNMTkuODU1IDEyLjM1NTNMMjEuNSAxNC4wMDAzTDI2LjE2NjcgOS4zMzM2NkwyMS41IDQuNjY2OTlMMTkuODU1IDYuMzExOTlMMjEuNjk4MyA4LjE2Njk5SDRWMTAuNTAwM0gyMS42OTgzTDE5Ljg1NSAxMi4zNTUzWiIgZmlsbD0iIzYzNkM3NCIvPiA8L3N2Zz4g\"","/* eslint-disable no-use-before-define */\nimport { createStyleMixin, draggableMixin, componentNameValidationMixin } 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 { createIcon } from './helpers';\nimport { injectStyle } from '@descope-ui/common/components-helpers';\n\nexport const componentName = getComponentName('icon');\n\nclass RawIcon extends createBaseClass({ componentName, baseSelector: 'slot' }) {\n  static get observedAttributes() {\n    return ['src'];\n  }\n\n  #icon;\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 > slot {\n\t\t\t\tbox-sizing: border-box;\n\t\t\t\twidth: 100%;\n\t\t\t\theight: 100%;\n\t\t\t\tdisplay: flex;\n\t\t\t\toverflow: hidden;\n\t\t\t}\n\t\t\t:host {\n\t\t\t\tdisplay: inline-block;\n\t\t\t}\n  `,\n      this\n    );\n  }\n\n  init() {\n    super.init?.();\n    this.toggleVisibility(this.src);\n  }\n\n  toggleVisibility(isVisible) {\n    this.style.display = isVisible ? '' : 'none';\n  }\n\n  get src() {\n    return this.getAttribute('src');\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  // eslint-disable-next-line class-methods-use-this\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(${IconClass.cssVarList.fill}, ${ele.getAttribute('fill') || \"''\"})`\n      );\n    });\n  }\n\n  attributeChangedCallback(attrName, oldValue, newValue) {\n    super.attributeChangedCallback?.(attrName, oldValue, newValue);\n\n    if (oldValue === newValue) return;\n\n    if (attrName === 'src') {\n      this.toggleVisibility(newValue);\n\n      createIcon(this.src).then((res) => {\n        this.innerHTML = '';\n        if (res) {\n          const clonedNode = res.cloneNode(true);\n          this.updateFillColor(clonedNode);\n          this.appendChild(clonedNode);\n        }\n      });\n    }\n  }\n}\n\nexport const IconClass = compose(\n  createStyleMixin({\n    mappings: {\n      fill: {},\n    },\n  }),\n  draggableMixin,\n  componentNameValidationMixin\n)(RawIcon);\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) => {\n  const ele = document.createElement('img');\n  ele.setAttribute('src', src);\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, { USE_PROFILES: { svg: true, svgFilters: true } });\n\n  const parser = new DOMParser();\n  const ele = parser.parseFromString(clean, 'image/svg+xml').querySelector('svg');\n  return ele;\n};\n\nexport const createIcon = async (src) => {\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);\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 { componentName, IconClass } from './IconClass';\n\ncustomElements.define(componentName, IconClass);\n\nexport { IconClass, componentName };\n","import { injectStyle } from '@descope-ui/common/components-helpers';\nimport { compose } from '../helpers';\nimport { componentNameValidationMixin, createStyleMixin, draggableMixin } from '../mixins';\nimport { createBaseClass } from './createBaseClass';\n\nexport const createCssVarImageClass = ({ componentName, varName, fallbackVarName }) => {\n  let style;\n  const getContent = () => style;\n\n  class RawCssVarImageClass extends createBaseClass({\n    componentName,\n    baseSelector: ':host > div',\n  }) {\n    constructor() {\n      super();\n      this.attachShadow({ mode: 'open' }).innerHTML = `\n\t\t\t<div></div>\n\t\t\t`;\n\n      injectStyle(\n        `\n\t\t\t\t:host {\n\t\t\t\t\tdisplay: inline-flex;\n\t\t\t\t}\n\t\t\t\t:host([draggable=\"true\"]) > div {\n\t\t\t\t\tpointer-events: none\n\t\t\t\t}\n\t\t\t\t:host > div {\n\t\t\t\t\tdisplay: inline-block;\n\t\t\t\t\tmax-width: 100%;\n\t\t\t\t\tmax-height: 100%;\n\t\t\t\t\tobject-fit: contain;\n\t\t\t\t\tmargin: auto;\n\t\t\t\t\t${getContent()}\n\t\t\t\t}\n        `,\n        this\n      );\n    }\n  }\n\n  const CssVarImageClass = compose(\n    createStyleMixin({\n      mappings: {\n        height: { selector: () => ':host > div' },\n        width: { selector: () => ':host > div' },\n        [varName]: { property: 'content' },\n        [fallbackVarName]: { property: 'content' },\n      },\n    }),\n    draggableMixin,\n    componentNameValidationMixin\n  )(RawCssVarImageClass);\n\n  style = `content: var(${CssVarImageClass.cssVarList[varName]}, var(${CssVarImageClass.cssVarList[fallbackVarName]}));`;\n\n  return CssVarImageClass;\n};\n","import { getComponentName } from '../../helpers/componentHelpers';\nimport { createCssVarImageClass } from '../../baseClasses/createCssVarImageClass';\n\nexport const componentName = getComponentName('logo');\n\nexport const LogoClass = createCssVarImageClass({\n  componentName,\n  varName: 'url',\n  fallbackVarName: 'fallbackUrl',\n});\n","import { componentName, LogoClass } from './LogoClass';\n\ncustomElements.define(componentName, LogoClass);\n\nexport { LogoClass, componentName };\n","import { injectStyle } from '@descope-ui/common/components-helpers';\nimport { createBaseClass } from '../../baseClasses/createBaseClass';\nimport { compose } from '../../helpers';\nimport { getComponentName } from '../../helpers/componentHelpers';\nimport { componentNameValidationMixin, createStyleMixin, draggableMixin } from '../../mixins';\nimport { IconClass } from '@descope-ui/descope-icon/class';\nimport { LogoClass } from '../descope-logo/LogoClass';\nimport arrowsImg from './arrows.svg';\n\nexport const componentName = getComponentName('third-party-app-logo');\nclass RawThirdPartyAppLogoClass extends createBaseClass({\n  componentName,\n  baseSelector: '.wrapper',\n}) {\n  constructor() {\n    super();\n    this.attachShadow({ mode: 'open' }).innerHTML = `\n\t\t\t<div class=\"wrapper\">\n        <div class=\"third-party-app-logo-wrapper\">\n          <div class=\"third-party-app-logo\"></div>\n        </div>\n        <div class=\"arrows\">\n          <descope-icon src=\"${arrowsImg}\"></descope-icon>\n        </div>\n        <div class=\"company-logo-wrapper\">\n            <descope-logo></descope-logo>\n        </div>\n      </div>\n\t\t\t`;\n\n    injectStyle(\n      `\n        :host {\n\t\t\t\t\tdisplay: inline-flex;\n\t\t\t\t}\n\t\t\t\t:host([draggable=\"true\"]) > div {\n\t\t\t\t\tpointer-events: none\n\t\t\t\t}\n\n        .wrapper {\n          display: flex;\n          justify-content: center;\n          align-items: center;\n          min-width: max-content;\n        }\n\n\t\t\t\t.third-party-app-logo {\n          flex-shrink: 0;\n\t\t\t\t\tdisplay: inline-block;\n\t\t\t\t\tmax-width: 100%;\n\t\t\t\t\tmax-height: 100%;\n\t\t\t\t\tobject-fit: contain;\n\t\t\t\t}\n\n        .company-logo-wrapper, .third-party-app-logo-wrapper {\n          flex-shrink: 0;\n          display: inline-flex;\n        }\n\n        .company-logo-wrapper {\n          justify-content: flex-end;\n        }\n\n        .third-party-app-logo-wrapper {\n          justify-content: flex-start;\n        }\n\n        .arrows {\n          flex-shrink: 0;\n          display: flex;\n        }\n          `,\n      this\n    );\n  }\n}\n\nconst companyLogoWrapper = '>.company-logo-wrapper';\nconst thirdPartyAppLogoWrapper = '>.third-party-app-logo-wrapper';\n\nexport const ThirdPartyAppLogoClass = compose(\n  createStyleMixin({\n    mappings: {\n      logoMaxHeight: [\n        { selector: companyLogoWrapper, property: 'height' },\n        { selector: thirdPartyAppLogoWrapper, property: 'height' },\n      ],\n      logoMaxWidth: [\n        { selector: companyLogoWrapper, property: 'max-width' },\n        { selector: thirdPartyAppLogoWrapper, property: 'max-width' },\n      ],\n      thirdPartyAppLogo: {\n        selector: () => '.third-party-app-logo',\n        property: 'content',\n        fallback: {},\n      },\n      companyLogoFallback: {\n        selector: LogoClass.componentName,\n        property: LogoClass.cssVarList.fallbackUrl,\n      },\n      gap: {},\n      arrowsColor: { selector: IconClass.componentName, property: IconClass.cssVarList.fill },\n    },\n  }),\n  draggableMixin,\n  componentNameValidationMixin\n)(RawThirdPartyAppLogoClass);\n","import { componentName, ThirdPartyAppLogoClass } from './ThirdPartyAppLogoClass';\nimport '@descope-ui/descope-icon';\nimport '../descope-logo';\n\ncustomElements.define(componentName, ThirdPartyAppLogoClass);\n\nexport { ThirdPartyAppLogoClass };\n"],"names":["module","exports","componentName","RawIcon","baseSelector","observedAttributes","constructor","super","this","attachShadow","mode","innerHTML","init","toggleVisibility","src","isVisible","style","display","getAttribute","updateFillColor","node","querySelectorAll","forEach","ele","setAttribute","IconClass","cssVarList","fill","attributeChangedCallback","attrName","oldValue","newValue","then","res","clonedNode","cloneNode","appendChild","mappings","createSvgEle","text","clean","sanitize","USE_PROFILES","svg","svgFilters","DOMParser","parseFromString","querySelector","createIcon","async","startsWith","isBase64Svg","svgXml","atob","slice","base64Prefix","path","match","getFileExtension","fetchedSrc","fetch","document","createElement","createImgEle","setProperty","customElements","define","createCssVarImageClass","varName","fallbackVarName","RawCssVarImageClass","CssVarImageClass","height","selector","width","property","LogoClass","RawThirdPartyAppLogoClass","createBaseClass","companyLogoWrapper","thirdPartyAppLogoWrapper","ThirdPartyAppLogoClass","logoMaxHeight","logoMaxWidth","thirdPartyAppLogo","fallback","companyLogoFallback","fallbackUrl","gap","arrowsColor"],"sourceRoot":""}

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],{3393:(t,e,n)=>{n.d(e,{y:()=>s});var i=n(9696),o=n(79365),r=n(81365);const s=(...t)=>(0,i.Zz)(o.XX,o._$,o.yF,o.jd)((0,r.q)(...t))},88068:(t,e,n)=>{n.d(e,{J:()=>h,T:()=>l});var i=n(9696),o=n(97810),r=n(79365),s=n(20618),a=n(12011);const l=(0,o.xE)("button"),{host:d,label:c,slottedIcon:p}={host:{selector:()=>":host"},label:{selector:"::part(label)"},slottedIcon:{selector:()=>"::slotted(descope-icon)"}};let u;const h=(0,i.Zz)((0,r.RF)({mappings:{hostWidth:{property:"width"},hostHeight:{property:"height"},hostDirection:{...d,property:"direction"},fontSize:{},fontFamily:{},cursor:{},backgroundColor:{},outlineOffset:{},outlineColor:{},outlineStyle:{},outlineWidth:{},borderRadius:{},borderColor:{},borderStyle:{},borderWidth:{},verticalPadding:[{property:"padding-top"},{property:"padding-bottom"}],horizontalPadding:[{property:"padding-right",fallback:"0.875em"},{property:"padding-left",fallback:"0.875em"}],labelTextColor:{property:"color"},iconColor:{selector:()=>"::slotted(*)",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,r.VO,r.tQ)((0,r.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(${h.cssVarList.outlineWidth}) + var(${h.cssVarList.outlineOffset}));\n\t\t\t}\n      :host([full-width="true"]) {\n        width: var(${h.cssVarList.hostWidth});\n      }\n\t\t\tvaadin-button {\n\t\t\t\theight: calc(var(${h.cssVarList.hostHeight}) - var(${h.cssVarList.outlineWidth}) - var(${h.cssVarList.outlineOffset}));\n\t\t\t}\n\t\t\t[square="true"]:not([full-width="true"]) {\n\t\t\t\twidth: calc(var(${h.cssVarList.hostWidth}) - var(${h.cssVarList.outlineWidth}) - var(${h.cssVarList.outlineOffset}));\n        padding: 0;\n\t\t\t}\n\t\t`,excludeAttrsSync:["tabindex"],componentName:l})),{color:b,fontSize:g}=h.cssVarList;u=`\n\t@keyframes spin {\n\t\t0% { -webkit-transform: rotate(0deg); }\n\t\t100% { -webkit-transform: rotate(360deg); }\n\t}\n\t:host([loading="true"]) ::before {\n\t\tanimation: spin 2s linear infinite;\n\t\tposition: absolute;\n\t\tcontent: '';\n\t\tz-index: 1;\n\t\tbox-sizing: border-box;\n\t\tborder-radius: 50%;\n\t\tborder-bottom-color: transparent;\n\t\tborder-left-color: transparent;\n\t\tborder-style: solid;\n\t\tcolor: var(${b});\n\t\ttop: calc(50% - (var(${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`},12011:(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()}}},85076:(t,e,n)=>{n.r(e),n.d(e,{ButtonClass:()=>i.J,componentName:()=>i.T}),n(83799);var i=n(88068);customElements.define(i.T,i.J)},20618:(t,e,n)=>{n.d(e,{S:()=>p,T:()=>d});var i=n(79365),o=n(81365),r=n(9696),s=n(97810),a=n(28796),l=n(25964);const d=(0,s.xE)("icon");class c extends((0,o.q)({componentName:d,baseSelector:"slot"})){static get observedAttributes(){return["src"]}#t;constructor(){super(),this.attachShadow({mode:"open"}).innerHTML="\n\t\t<slot></slot>\n\t",(0,l.fz)("\n\t\t\t:host > slot {\n\t\t\t\tbox-sizing: border-box;\n\t\t\t\twidth: 100%;\n\t\t\t\theight: 100%;\n\t\t\t\tdisplay: flex;\n\t\t\t\toverflow: hidden;\n\t\t\t}\n\t\t\t:host {\n\t\t\t\tdisplay: inline-block;\n\t\t\t}\n  ",this)}init(){super.init?.(),this.toggleVisibility(this.src)}toggleVisibility(t){this.style.display=t?"":"none"}get src(){return this.getAttribute("src")}updateFillColor(t){[t,...t.querySelectorAll("*[fill]")].forEach((t=>{t.setAttribute("fill",`var(${p.cssVarList.fill}, ${t.getAttribute("fill")||"''"})`)}))}attributeChangedCallback(t,e,n){super.attributeChangedCallback?.(t,e,n),e!==n&&"src"===t&&(this.toggleVisibility(n),(0,a.w)(this.src).then((t=>{if(this.innerHTML="",t){const e=t.cloneNode(!0);this.updateFillColor(e),this.appendChild(e)}})))}}const p=(0,r.Zz)((0,i.RF)({mappings:{fill:{}}}),i.VO,i.tQ)(c)},28796:(t,e,n)=>{n.d(e,{w:()=>r});var i=n(25414);const o=t=>{const e=i.A.sanitize(t,{USE_PROFILES:{svg:!0,svgFilters:!0}});return(new DOMParser).parseFromString(e,"image/svg+xml").querySelector("svg")},r=async t=>{try{let e;if((t=>t.startsWith("data:image/svg+xml;base64,"))(t)){const n=atob(t.slice(26));e=o(n)}else if("svg"===(t=>{const e=t.match(/\.([0-9a-z]+)(?:[\\?#]|$)/i);return e?e[1]:null})(t)){const n=await fetch(t),i=await n.text();e=o(i)}else e=(t=>{const e=document.createElement("img");return e.setAttribute("src",t),e})(t);return e.style.setProperty("max-width","100%"),e.style.setProperty("max-height","100%"),e}catch{return null}}},70139:(t,e,n)=>{n.r(e),n.d(e,{UploadFileClass:()=>m,componentName:()=>d});var i=n(79365),o=n(9696),r=n(97810),s=n(3393),a=n(88068),l=n(25964);const d=(0,r.xE)("upload-file"),c=["title","description","button-label","accept","readonly","button-mode","button-variant","required","size","icon"],p=(0,s.y)({componentName:d,baseSelector:":host > div"}),u=a.J.cssVarList,{host:h,wrapper:b,icon:g,title:y,description:v,requiredIndicator:f}={host:{selector:()=>":host"},wrapper:{selector:()=>":host > div"},icon:{selector:()=>"::slotted(*)"},title:{selector:()=>".title"},description:{selector:()=>".description"},requiredIndicator:{selector:()=>".title::after"}},m=(0,o.Zz)((0,i.RF)({componentNameOverride:(0,r.xE)("input-wrapper")}),(0,i.RF)({mappings:{fontSize:{},fontFamily:{},borderColor:{},borderWidth:{},borderStyle:{},borderRadius:{},hostHeight:{...h,property:"height"},hostWidth:{...h,property:"width"},hostPadding:{property:"padding"},hostDirection:[{...h,property:"direction"},{selector:()=>a.J.componentName,property:u.hostDirection}],gap:{...b},lineHeight:{...b,property:"line-height"},titleFontSize:{...y,property:"font-size"},titleFontWeight:{...y,property:"font-weight"},descriptionFontSize:{...v,property:"font-size"},labelTextColor:[{...y,property:"color"},{...v,property:"color"}],iconSize:{...g,property:"width"},requiredIndicator:{...f,property:"content"}}}),i.VO,i.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,l.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(85076),customElements.define(d,m)}}]);
+"use strict";(self.webpackChunk_descope_web_components_ui=self.webpackChunk_descope_web_components_ui||[]).push([[9636],{19624:(t,e,n)=>{n.d(e,{J:()=>h,T:()=>l});var i=n(63200),o=n(25964),r=n(88961),s=n(98538),a=n(10767);const l=(0,o.xE)("button"),{host:d,label:c,slottedIcon:p}={host:{selector:()=>":host"},label:{selector:"::part(label)"},slottedIcon:{selector:()=>"::slotted(descope-icon)"}};let u;const h=(0,i.Zz)((0,r.RF)({mappings:{hostWidth:{property:"width"},hostHeight:{property:"height"},hostDirection:{...d,property:"direction"},fontSize:{},fontFamily:{},cursor:{},backgroundColor:{},outlineOffset:{},outlineColor:{},outlineStyle:{},outlineWidth:{},borderRadius:{},borderColor:{},borderStyle:{},borderWidth:{},verticalPadding:[{property:"padding-top"},{property:"padding-bottom"}],horizontalPadding:[{property:"padding-right",fallback:"0.875em"},{property:"padding-left",fallback:"0.875em"}],labelTextColor:{property:"color"},iconColor:{selector:()=>"::slotted(*)",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,r.VO,r.tQ)((0,r.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(${h.cssVarList.outlineWidth}) + var(${h.cssVarList.outlineOffset}));\n\t\t\t}\n      :host([full-width="true"]) {\n        width: var(${h.cssVarList.hostWidth});\n      }\n\t\t\tvaadin-button {\n\t\t\t\theight: calc(var(${h.cssVarList.hostHeight}) - var(${h.cssVarList.outlineWidth}) - var(${h.cssVarList.outlineOffset}));\n\t\t\t}\n\t\t\t[square="true"]:not([full-width="true"]) {\n\t\t\t\twidth: calc(var(${h.cssVarList.hostWidth}) - var(${h.cssVarList.outlineWidth}) - var(${h.cssVarList.outlineOffset}));\n        padding: 0;\n\t\t\t}\n\t\t`,excludeAttrsSync:["tabindex"],componentName:l})),{color:b,fontSize:g}=h.cssVarList;u=`\n\t@keyframes spin {\n\t\t0% { -webkit-transform: rotate(0deg); }\n\t\t100% { -webkit-transform: rotate(360deg); }\n\t}\n\t:host([loading="true"]) ::before {\n\t\tanimation: spin 2s linear infinite;\n\t\tposition: absolute;\n\t\tcontent: '';\n\t\tz-index: 1;\n\t\tbox-sizing: border-box;\n\t\tborder-radius: 50%;\n\t\tborder-bottom-color: transparent;\n\t\tborder-left-color: transparent;\n\t\tborder-style: solid;\n\t\tcolor: var(${b});\n\t\ttop: calc(50% - (var(${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:()=>c,T:()=>l});var i=n(88961),o=n(72270),r=n(63200),s=n(25964),a=n(31004);const l=(0,s.xE)("icon");class d extends((0,o.qu)({componentName:l,baseSelector:"slot"})){static get observedAttributes(){return["src"]}#t;constructor(){super(),this.attachShadow({mode:"open"}).innerHTML="\n\t\t<slot></slot>\n\t",(0,s.fz)("\n\t\t\t:host > slot {\n\t\t\t\tbox-sizing: border-box;\n\t\t\t\twidth: 100%;\n\t\t\t\theight: 100%;\n\t\t\t\tdisplay: flex;\n\t\t\t\toverflow: hidden;\n\t\t\t}\n\t\t\t:host {\n\t\t\t\tdisplay: inline-block;\n\t\t\t}\n  ",this)}init(){super.init?.(),this.toggleVisibility(this.src)}toggleVisibility(t){this.style.display=t?"":"none"}get src(){return this.getAttribute("src")}updateFillColor(t){[t,...t.querySelectorAll("*[fill]")].forEach((t=>{t.setAttribute("fill",`var(${c.cssVarList.fill}, ${t.getAttribute("fill")||"''"})`)}))}attributeChangedCallback(t,e,n){super.attributeChangedCallback?.(t,e,n),e!==n&&"src"===t&&(this.toggleVisibility(n),(0,a.w)(this.src).then((t=>{if(this.innerHTML="",t){const e=t.cloneNode(!0);this.updateFillColor(e),this.appendChild(e)}})))}}const c=(0,r.Zz)((0,i.RF)({mappings:{fill:{}}}),i.VO,i.tQ)(d)},31004:(t,e,n)=>{n.d(e,{w:()=>r});var i=n(25414);const o=t=>{const e=i.A.sanitize(t,{USE_PROFILES:{svg:!0,svgFilters:!0}});return(new DOMParser).parseFromString(e,"image/svg+xml").querySelector("svg")},r=async t=>{try{let e;if((t=>t.startsWith("data:image/svg+xml;base64,"))(t)){const n=atob(t.slice(26));e=o(n)}else if("svg"===(t=>{const e=t.match(/\.([0-9a-z]+)(?:[\\?#]|$)/i);return e?e[1]:null})(t)){const n=await fetch(t),i=await n.text();e=o(i)}else e=(t=>{const e=document.createElement("img");return e.setAttribute("src",t),e})(t);return e.style.setProperty("max-width","100%"),e.style.setProperty("max-height","100%"),e}catch{return null}}},3393:(t,e,n)=>{n.d(e,{y:()=>s});var i=n(9696),o=n(79365),r=n(81365);const s=(...t)=>(0,i.Zz)(o.XX,o._$,o.yF,o.jd)((0,r.q)(...t))},70139:(t,e,n)=>{n.r(e),n.d(e,{UploadFileClass:()=>m,componentName:()=>d});var i=n(79365),o=n(9696),r=n(97810),s=n(3393),a=n(19624),l=n(25964);const d=(0,r.xE)("upload-file"),c=["title","description","button-label","accept","readonly","button-mode","button-variant","required","size","icon"],p=(0,s.y)({componentName:d,baseSelector:":host > div"}),u=a.J.cssVarList,{host:h,wrapper:b,icon:g,title:y,description:v,requiredIndicator:f}={host:{selector:()=>":host"},wrapper:{selector:()=>":host > div"},icon:{selector:()=>"::slotted(*)"},title:{selector:()=>".title"},description:{selector:()=>".description"},requiredIndicator:{selector:()=>".title::after"}},m=(0,o.Zz)((0,i.RF)({componentNameOverride:(0,r.xE)("input-wrapper")}),(0,i.RF)({mappings:{fontSize:{},fontFamily:{},borderColor:{},borderWidth:{},borderStyle:{},borderRadius:{},hostHeight:{...h,property:"height"},hostWidth:{...h,property:"width"},hostPadding:{property:"padding"},hostDirection:[{...h,property:"direction"},{selector:()=>a.J.componentName,property:u.hostDirection}],gap:{...b},lineHeight:{...b,property:"line-height"},titleFontSize:{...y,property:"font-size"},titleFontWeight:{...y,property:"font-weight"},descriptionFontSize:{...v,property:"font-size"},labelTextColor:[{...y,property:"color"},{...v,property:"color"}],iconSize:{...g,property:"width"},requiredIndicator:{...f,property:"content"}}}),i.VO,i.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,l.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,m)}}]);
 //# 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/./src/baseClasses/createBaseInputClass.js","webpack://@descope/web-components-ui/./src/components/descope-button/ButtonClass.js","webpack://@descope/web-components-ui/./src/components/descope-button/clickableMixin.js","webpack://@descope/web-components-ui/./src/components/descope-button/index.js","webpack://@descope/web-components-ui/./src/components/descope-icon/IconClass.js","webpack://@descope/web-components-ui/./src/components/descope-icon/helpers.js","webpack://@descope/web-components-ui/./src/components/descope-upload-file/UploadFileClass.js","webpack://@descope/web-components-ui/./src/components/descope-upload-file/helpers.js","webpack://@descope/web-components-ui/./src/components/descope-upload-file/index.js"],"sourcesContent":["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","import { compose } from '../../helpers';\nimport { getComponentName } from '../../helpers/componentHelpers';\nimport {\n  createStyleMixin,\n  draggableMixin,\n  createProxy,\n  componentNameValidationMixin,\n} from '../../mixins';\nimport { IconClass } from '../descope-icon/IconClass';\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  createStyleMixin({\n    mappings: {\n      hostWidth: { property: 'width' },\n      hostHeight: { property: 'height' },\n      hostDirection: { ...host, property: 'direction' },\n      fontSize: {},\n      fontFamily: {},\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: [{ property: 'padding-top' }, { property: 'padding-bottom' }],\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'],\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 '@vaadin/button';\nimport { componentName, ButtonClass } from './ButtonClass';\n\ncustomElements.define(componentName, ButtonClass);\n\nexport { ButtonClass, componentName };\n","/* eslint-disable no-use-before-define */\nimport { createStyleMixin, draggableMixin, componentNameValidationMixin } from '../../mixins';\nimport { createBaseClass } from '../../baseClasses/createBaseClass';\nimport { compose } from '../../helpers';\nimport { getComponentName } from '../../helpers/componentHelpers';\nimport { createIcon } from './helpers';\nimport { injectStyle } from '@descope-ui/common/components-helpers';\n\nexport const componentName = getComponentName('icon');\n\nclass RawIcon extends createBaseClass({ componentName, baseSelector: 'slot' }) {\n  static get observedAttributes() {\n    return ['src'];\n  }\n\n  #icon;\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 > slot {\n\t\t\t\tbox-sizing: border-box;\n\t\t\t\twidth: 100%;\n\t\t\t\theight: 100%;\n\t\t\t\tdisplay: flex;\n\t\t\t\toverflow: hidden;\n\t\t\t}\n\t\t\t:host {\n\t\t\t\tdisplay: inline-block;\n\t\t\t}\n  `,\n      this\n    );\n  }\n\n  init() {\n    super.init?.();\n    this.toggleVisibility(this.src);\n  }\n\n  toggleVisibility(isVisible) {\n    this.style.display = isVisible ? '' : 'none';\n  }\n\n  get src() {\n    return this.getAttribute('src');\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  // eslint-disable-next-line class-methods-use-this\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(${IconClass.cssVarList.fill}, ${ele.getAttribute('fill') || \"''\"})`\n      );\n    });\n  }\n\n  attributeChangedCallback(attrName, oldValue, newValue) {\n    super.attributeChangedCallback?.(attrName, oldValue, newValue);\n\n    if (oldValue === newValue) return;\n\n    if (attrName === 'src') {\n      this.toggleVisibility(newValue);\n\n      createIcon(this.src).then((res) => {\n        this.innerHTML = '';\n        if (res) {\n          const clonedNode = res.cloneNode(true);\n          this.updateFillColor(clonedNode);\n          this.appendChild(clonedNode);\n        }\n      });\n    }\n  }\n}\n\nexport const IconClass = compose(\n  createStyleMixin({\n    mappings: {\n      fill: {},\n    },\n  }),\n  draggableMixin,\n  componentNameValidationMixin\n)(RawIcon);\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) => {\n  const ele = document.createElement('img');\n  ele.setAttribute('src', src);\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, { USE_PROFILES: { svg: true, svgFilters: true } });\n\n  const parser = new DOMParser();\n  const ele = parser.parseFromString(clean, 'image/svg+xml').querySelector('svg');\n  return ele;\n};\n\nexport const createIcon = async (src) => {\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);\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 { createStyleMixin, draggableMixin, componentNameValidationMixin } from '../../mixins';\nimport { compose } from '../../helpers';\nimport { getComponentName } from '../../helpers/componentHelpers';\nimport { createBaseInputClass } from '../../baseClasses/createBaseInputClass';\nimport { ButtonClass } from '../descope-button/ButtonClass';\nimport { getFileBase64, getFilename } from './helpers';\nimport { injectStyle } from '@descope-ui/common/components-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","export const getFileBase64 = (fileObj) => {\n  return new Promise((resolve) => {\n    const reader = new FileReader();\n    reader.onload = (e) => resolve(e.target.result);\n    reader.readAsDataURL(fileObj);\n  });\n};\n\nexport const getFilename = (fileObj) => {\n  return fileObj.name.replace(/^.*\\\\/, '');\n};\n","import { componentName, UploadFileClass } from './UploadFileClass';\nimport '../descope-button';\n\ncustomElements.define(componentName, UploadFileClass);\n\nexport { UploadFileClass, componentName };\n"],"names":["createBaseInputClass","args","componentName","host","label","slottedIcon","selector","loadingIndicatorStyles","ButtonClass","mappings","hostWidth","property","hostHeight","hostDirection","fontSize","fontFamily","cursor","backgroundColor","outlineOffset","outlineColor","outlineStyle","outlineWidth","borderRadius","borderColor","borderStyle","borderWidth","verticalPadding","horizontalPadding","fallback","labelTextColor","iconColor","cssVarList","fill","labelTextDecoration","labelSpacing","textAlign","iconSize","slots","wrappedEleName","style","excludeAttrsSync","color","clickableMixin","superclass","isLoading","this","getAttribute","click","super","customElements","define","RawIcon","baseSelector","observedAttributes","constructor","attachShadow","mode","innerHTML","init","toggleVisibility","src","isVisible","display","updateFillColor","node","querySelectorAll","forEach","ele","setAttribute","IconClass","attributeChangedCallback","attrName","oldValue","newValue","then","res","clonedNode","cloneNode","appendChild","createSvgEle","text","clean","sanitize","USE_PROFILES","svg","svgFilters","DOMParser","parseFromString","querySelector","createIcon","async","startsWith","isBase64Svg","svgXml","atob","slice","base64Prefix","path","match","getFileExtension","fetchedSrc","fetch","document","createElement","createImgEle","setProperty","BaseInputClass","buttonVars","wrapper","icon","title","description","requiredIndicator","UploadFileClass","componentNameOverride","hostPadding","gap","lineHeight","titleFontSize","titleFontWeight","descriptionFontSize","concat","wrapperEle","shadowRoot","inputElement","button","onclick","onchange","e","receivedFileList","target","files","fileObj","length","value","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":"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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-icon/src/component/helpers.js","webpack://@descope/web-components-ui/./src/baseClasses/createBaseInputClass.js","webpack://@descope/web-components-ui/./src/components/descope-upload-file/UploadFileClass.js","webpack://@descope/web-components-ui/./src/components/descope-upload-file/helpers.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} 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  createStyleMixin({\n    mappings: {\n      hostWidth: { property: 'width' },\n      hostHeight: { property: 'height' },\n      hostDirection: { ...host, property: 'direction' },\n      fontSize: {},\n      fontFamily: {},\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: [{ property: 'padding-top' }, { property: 'padding-bottom' }],\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'],\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","/* eslint-disable no-use-before-define */\nimport { createStyleMixin, draggableMixin, componentNameValidationMixin } 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 { createIcon } from './helpers';\nimport { injectStyle } from '@descope-ui/common/components-helpers';\n\nexport const componentName = getComponentName('icon');\n\nclass RawIcon extends createBaseClass({ componentName, baseSelector: 'slot' }) {\n  static get observedAttributes() {\n    return ['src'];\n  }\n\n  #icon;\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 > slot {\n\t\t\t\tbox-sizing: border-box;\n\t\t\t\twidth: 100%;\n\t\t\t\theight: 100%;\n\t\t\t\tdisplay: flex;\n\t\t\t\toverflow: hidden;\n\t\t\t}\n\t\t\t:host {\n\t\t\t\tdisplay: inline-block;\n\t\t\t}\n  `,\n      this\n    );\n  }\n\n  init() {\n    super.init?.();\n    this.toggleVisibility(this.src);\n  }\n\n  toggleVisibility(isVisible) {\n    this.style.display = isVisible ? '' : 'none';\n  }\n\n  get src() {\n    return this.getAttribute('src');\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  // eslint-disable-next-line class-methods-use-this\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(${IconClass.cssVarList.fill}, ${ele.getAttribute('fill') || \"''\"})`\n      );\n    });\n  }\n\n  attributeChangedCallback(attrName, oldValue, newValue) {\n    super.attributeChangedCallback?.(attrName, oldValue, newValue);\n\n    if (oldValue === newValue) return;\n\n    if (attrName === 'src') {\n      this.toggleVisibility(newValue);\n\n      createIcon(this.src).then((res) => {\n        this.innerHTML = '';\n        if (res) {\n          const clonedNode = res.cloneNode(true);\n          this.updateFillColor(clonedNode);\n          this.appendChild(clonedNode);\n        }\n      });\n    }\n  }\n}\n\nexport const IconClass = compose(\n  createStyleMixin({\n    mappings: {\n      fill: {},\n    },\n  }),\n  draggableMixin,\n  componentNameValidationMixin\n)(RawIcon);\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) => {\n  const ele = document.createElement('img');\n  ele.setAttribute('src', src);\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, { USE_PROFILES: { svg: true, svgFilters: true } });\n\n  const parser = new DOMParser();\n  const ele = parser.parseFromString(clean, 'image/svg+xml').querySelector('svg');\n  return ele;\n};\n\nexport const createIcon = async (src) => {\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);\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","import { createStyleMixin, draggableMixin, componentNameValidationMixin } from '../../mixins';\nimport { compose } from '../../helpers';\nimport { getComponentName } from '../../helpers/componentHelpers';\nimport { createBaseInputClass } from '../../baseClasses/createBaseInputClass';\nimport { ButtonClass } from '@descope-ui/descope-button/class';\nimport { getFileBase64, getFilename } from './helpers';\nimport { injectStyle } from '@descope-ui/common/components-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","export const getFileBase64 = (fileObj) => {\n  return new Promise((resolve) => {\n    const reader = new FileReader();\n    reader.onload = (e) => resolve(e.target.result);\n    reader.readAsDataURL(fileObj);\n  });\n};\n\nexport const getFilename = (fileObj) => {\n  return fileObj.name.replace(/^.*\\\\/, '');\n};\n","import { componentName, UploadFileClass } from './UploadFileClass';\nimport '@descope-ui/descope-button';\n\ncustomElements.define(componentName, UploadFileClass);\n\nexport { UploadFileClass, componentName };\n"],"names":["componentName","host","label","slottedIcon","selector","loadingIndicatorStyles","ButtonClass","mappings","hostWidth","property","hostHeight","hostDirection","fontSize","fontFamily","cursor","backgroundColor","outlineOffset","outlineColor","outlineStyle","outlineWidth","borderRadius","borderColor","borderStyle","borderWidth","verticalPadding","horizontalPadding","fallback","labelTextColor","iconColor","cssVarList","fill","labelTextDecoration","labelSpacing","textAlign","iconSize","slots","wrappedEleName","style","excludeAttrsSync","color","clickableMixin","superclass","isLoading","this","getAttribute","click","super","customElements","define","RawIcon","baseSelector","observedAttributes","constructor","attachShadow","mode","innerHTML","init","toggleVisibility","src","isVisible","display","updateFillColor","node","querySelectorAll","forEach","ele","setAttribute","IconClass","attributeChangedCallback","attrName","oldValue","newValue","then","res","clonedNode","cloneNode","appendChild","createSvgEle","text","clean","sanitize","USE_PROFILES","svg","svgFilters","DOMParser","parseFromString","querySelector","createIcon","async","startsWith","isBase64Svg","svgXml","atob","slice","base64Prefix","path","match","getFileExtension","fetchedSrc","fetch","document","createElement","createImgEle","setProperty","createBaseInputClass","args","BaseInputClass","buttonVars","wrapper","icon","title","description","requiredIndicator","UploadFileClass","componentNameOverride","hostPadding","gap","lineHeight","titleFontSize","titleFontWeight","descriptionFontSize","concat","wrapperEle","shadowRoot","inputElement","button","onclick","onchange","e","receivedFileList","target","files","fileObj","length","value","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([[1578,2294,9553],{76368:t=>{t.exports="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTgiIHZpZXdCb3g9IjAgMCAxNCAxOCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4gPHBhdGggZD0iTTEgMTZDMSAxNy4xIDEuOSAxOCAzIDE4SDExQzEyLjEgMTggMTMgMTcuMSAxMyAxNlY0SDFWMTZaTTMgNkgxMVYxNkgzVjZaTTEwLjUgMUw5LjUgMEg0LjVMMy41IDFIMFYzSDE0VjFIMTAuNVoiIGZpbGw9ImN1cnJlbnRjb2xvciIvPiA8L3N2Zz4g"},65725:t=>{t.exports="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTUiIGhlaWdodD0iMTUiIHZpZXdCb3g9IjAgMCAxNSAxNSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4gPHBhdGggZD0iTTEwLjAwMDIgMC45OTIxNDlDMTAuMDAwMiAxLjAxNjE1IDEwLjAwMDIgMS4wMTYxNSAxMC4wMDAyIDEuMDE2MTVMOC4yMjQxOSAzLjAwODE1SDIuOTkyMTlDMi40NjQxOSAzLjAwODE1IDIuMDA4MTkgMy40NDAxNSAyLjAwODE5IDMuOTkyMTVWMTIuMDA4MkMyLjAwODE5IDEyLjUzNjIgMi40NDAxOSAxMi45OTIyIDIuOTkyMTkgMTIuOTkyMkg1LjUzNjE5QzUuODQ4MTkgMTMuMDQwMiA2LjE2MDE5IDEzLjA0MDIgNi40NzIxOSAxMi45OTIySDExLjAwODJDMTEuNTM2MiAxMi45OTIyIDExLjk5MjIgMTIuNTYwMiAxMS45OTIyIDEyLjAwODJWNy43ODQxNkwxMy45MzYyIDUuNjI0MTVMMTQuMDA4MiA1LjY3MjE1VjExLjk4NDJDMTQuMDA4MiAxMy42NjQyIDEyLjY2NDIgMTUuMDA4MiAxMS4wMDgyIDE1LjAwODJIMy4wMTYxOUMxLjMzNjE5IDE1LjAwODIgLTAuMDA3ODEyNSAxMy42NjQyIC0wLjAwNzgxMjUgMTEuOTg0MlYzLjk5MjE1Qy0wLjAwNzgxMjUgMi4zMzYxNSAxLjMzNjE5IDAuOTkyMTQ5IDMuMDE2MTkgMC45OTIxNDlIMTAuMDAwMlpNMTEuMjcyMiAyLjYyNDE1TDEyLjYxNjIgNC4xMTIxNUw3LjcyMDE5IDkuNjgwMTZDNy41MDQxOSA5LjkyMDE2IDYuODMyMTkgMTAuMjMyMiA1LjY4MDE5IDEwLjYxNjJDNS42NTYxOSAxMC42NDAyIDUuNjA4MTkgMTAuNjQwMiA1LjU2MDE5IDEwLjYxNjJDNS40NjQxOSAxMC41OTIyIDUuMzkyMTkgMTAuNDcyMiA1LjQ0MDE5IDEwLjM3NjJDNS43NTIxOSA5LjI0ODE2IDYuMDQwMTkgOC41NTIxNiA2LjI1NjE5IDguMzEyMTZMMTEuMjcyMiAyLjYyNDE1Wk0xMS45MjAyIDEuODU2MTVMMTMuMjg4MiAwLjMyMDE0OUMxMy42NDgyIC0wLjA4Nzg1MTYgMTQuMjcyMiAtMC4xMTE4NTIgMTQuNjgwMiAwLjI3MjE0OUMxNS4wODgyIDAuNjMyMTQ5IDE1LjExMjIgMS4yODAxNSAxNC43NTIyIDEuNjg4MTVMMTMuMjY0MiAzLjM2ODE1TDExLjkyMDIgMS44NTYxNVoiIGZpbGw9ImN1cnJlbnRjb2xvciIvPiA8L3N2Zz4g"},66434:(t,e,n)=>{"use strict";n.d(e,{T:()=>a,s:()=>d});var i=n(88961),o=n(63200),s=n(25964),r=n(72270);const a=(0,s.xE)("text");class l extends((0,r.qu)({componentName:a,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 d=(0,o.Zz)((0,i.RF)({mappings:{hostWidth:{selector:()=>":host",property:"width"},hostDirection:{selector:()=>":host",property:"direction"},fontSize:{},textColor:{property:"color"},textLineHeight:{property:"line-height"},textLetterSpacing:{property:"letter-spacing"},textShadow:{},textAlign:{},textTransform:{},fontFamily:{},fontStyle:{},fontWeight:{},borderWidth:{},borderStyle:{},borderColor:{}}}),i.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)},26442:(t,e,n)=>{"use strict";n.d(e,{T:()=>l,e:()=>c});var i=n(79365),o=n(81365),s=n(9696),r=n(97810),a=n(25964);const l=(0,r.xE)("badge");class d extends((0,o.q)({componentName:l,baseSelector:":host > div"})){constructor(){super(),this.attachShadow({mode:"open"}).innerHTML="\n\t\t<div>\n      <slot></slot>\n\t\t</div>\n\t\t",(0,a.fz)("\n      :host {\n        display: inline-flex;\n      }\n      :host > div {\n        width: 100%;\n        text-overflow: ellipsis;\n        overflow: hidden;\n        white-space: nowrap;\n      }\n      ",this)}}const c=(0,s.Zz)((0,i.RF)({mappings:{hostWidth:[{selector:()=>":host",property:"width"}],hostDirection:{property:"direction"},fontFamily:{},fontSize:{},fontWeight:{},textTransform:{},verticalPadding:[{property:"padding-top"},{property:"padding-bottom"}],horizontalPadding:[{property:"padding-left"},{property:"padding-right"}],borderWidth:{},borderStyle:{},borderColor:{},borderRadius:{},backgroundColor:{},textColor:{property:"color"},textAlign:{}}}),i.VO,i.tQ)(d)},91359:(t,e,n)=>{"use strict";n.r(e),n.d(e,{BadgeClass:()=>i.e,componentName:()=>i.T});var i=n(26442);customElements.define(i.T,i.e)},88068:(t,e,n)=>{"use strict";n.d(e,{J:()=>u,T:()=>l});var i=n(9696),o=n(97810),s=n(79365),r=n(20618),a=n(12011);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 p;const u=(0,i.Zz)((0,s.RF)({mappings:{hostWidth:{property:"width"},hostHeight:{property:"height"},hostDirection:{...d,property:"direction"},fontSize:{},fontFamily:{},cursor:{},backgroundColor:{},outlineOffset:{},outlineColor:{},outlineStyle:{},outlineWidth:{},borderRadius:{},borderColor:{},borderStyle:{},borderWidth:{},verticalPadding:[{property:"padding-top"},{property:"padding-bottom"}],horizontalPadding:[{property:"padding-right",fallback:"0.875em"},{property:"padding-left",fallback:"0.875em"}],labelTextColor:{property:"color"},iconColor:{selector:()=>"::slotted(*)",property:r.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"}]}}),a.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${p}\n\t\t\tvaadin-button::part(label) { pointer-events: none; }\n\t\t\t:host {\n\t\t\t\tpadding: calc(var(${u.cssVarList.outlineWidth}) + var(${u.cssVarList.outlineOffset}));\n\t\t\t}\n      :host([full-width="true"]) {\n        width: var(${u.cssVarList.hostWidth});\n      }\n\t\t\tvaadin-button {\n\t\t\t\theight: calc(var(${u.cssVarList.hostHeight}) - var(${u.cssVarList.outlineWidth}) - var(${u.cssVarList.outlineOffset}));\n\t\t\t}\n\t\t\t[square="true"]:not([full-width="true"]) {\n\t\t\t\twidth: calc(var(${u.cssVarList.hostWidth}) - var(${u.cssVarList.outlineWidth}) - var(${u.cssVarList.outlineOffset}));\n        padding: 0;\n\t\t\t}\n\t\t`,excludeAttrsSync:["tabindex"],componentName:l})),{color:g,fontSize:b}=u.cssVarList;p=`\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`},12011:(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()}}},85076:(t,e,n)=>{"use strict";n.r(e),n.d(e,{ButtonClass:()=>i.J,componentName:()=>i.T}),n(83799);var i=n(88068);customElements.define(i.T,i.J)},20618:(t,e,n)=>{"use strict";n.d(e,{S:()=>h,T:()=>d});var i=n(79365),o=n(81365),s=n(9696),r=n(97810),a=n(28796),l=n(25964);const d=(0,r.xE)("icon");class c extends((0,o.q)({componentName:d,baseSelector:"slot"})){static get observedAttributes(){return["src"]}#t;constructor(){super(),this.attachShadow({mode:"open"}).innerHTML="\n\t\t<slot></slot>\n\t",(0,l.fz)("\n\t\t\t:host > slot {\n\t\t\t\tbox-sizing: border-box;\n\t\t\t\twidth: 100%;\n\t\t\t\theight: 100%;\n\t\t\t\tdisplay: flex;\n\t\t\t\toverflow: hidden;\n\t\t\t}\n\t\t\t:host {\n\t\t\t\tdisplay: inline-block;\n\t\t\t}\n  ",this)}init(){super.init?.(),this.toggleVisibility(this.src)}toggleVisibility(t){this.style.display=t?"":"none"}get src(){return this.getAttribute("src")}updateFillColor(t){[t,...t.querySelectorAll("*[fill]")].forEach((t=>{t.setAttribute("fill",`var(${h.cssVarList.fill}, ${t.getAttribute("fill")||"''"})`)}))}attributeChangedCallback(t,e,n){super.attributeChangedCallback?.(t,e,n),e!==n&&"src"===t&&(this.toggleVisibility(n),(0,a.w)(this.src).then((t=>{if(this.innerHTML="",t){const e=t.cloneNode(!0);this.updateFillColor(e),this.appendChild(e)}})))}}const h=(0,s.Zz)((0,i.RF)({mappings:{fill:{}}}),i.VO,i.tQ)(c)},28796:(t,e,n)=>{"use strict";n.d(e,{w:()=>s});var i=n(25414);const o=t=>{const e=i.A.sanitize(t,{USE_PROFILES:{svg:!0,svgFilters:!0}});return(new DOMParser).parseFromString(e,"image/svg+xml").querySelector("svg")},s=async t=>{try{let e;if((t=>t.startsWith("data:image/svg+xml;base64,"))(t)){const n=atob(t.slice(26));e=o(n)}else if("svg"===(t=>{const e=t.match(/\.([0-9a-z]+)(?:[\\?#]|$)/i);return e?e[1]:null})(t)){const n=await fetch(t),i=await n.text();e=o(i)}else e=(t=>{const e=document.createElement("img");return e.setAttribute("src",t),e})(t);return e.style.setProperty("max-width","100%"),e.style.setProperty("max-height","100%"),e}catch{return null}}},45554:(t,e,n)=>{"use strict";n.r(e),n.d(e,{UserAttributeClass:()=>m,componentName:()=>b});var i=n(79365),o=n(81365),s=n(9696),r=n(97810),a=n(76368),l=n.n(a),d=n(65725),c=n.n(d),h=n(66434),p=n(88068),u=n(26442),g=n(25964);const b=(0,r.xE)("user-attribute");class M extends((0,o.q)({componentName:b,baseSelector:":host > .root"})){constructor(){super(),this.attachShadow({mode:"open"}).innerHTML=`\n      <div class="root">\n        <div class="text-wrapper">\n          <descope-text st-text-align="auto" data-id="label-text" variant="body1" mode="secondary" class="label"></descope-text>\n          <descope-text st-text-align="auto" data-id="value-text" variant="body1" mode="primary" class="value"></descope-text>\n        </div>\n\n        <div class="btn-wrapper">\n          <descope-badge mode="default" bordered="true" size="xs"></descope-badge>\n          <descope-button size="xs" data-id="edit-btn" square="true" variant="link" mode="primary">\n            <vaadin-icon src=${c()}></vaadin-icon>\n          </descope-button>\n          <descope-button size="xs" data-id="delete-btn" square="true" variant="link" mode="primary">\n            <vaadin-icon src=${l()}></vaadin-icon>\n          </descope-button>\n        </div\n      </div>\n\t\t`,(0,g.fz)(`\n      :host {\n\t\t\t\t\tdisplay: inline-flex;\n\t\t\t\t}\n\n        vaadin-icon {\n          color: currentcolor;\n        }\n\n        .root {\n          display: flex;\n          width: 100%;\n          height: 100%;\n          align-items: center;\n        }\n\n        .btn-wrapper {\n          display: flex;\n          justify-content: space-between;\n          align-items: center;\n          flex-grow: 0;\n        }\n\n        .text-wrapper {\n          display: flex;\n          align-items: center;\n          flex-grow: 1;\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        }\n\n        .label {\n          flex-grow: 0;\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        }\n\n        descope-text[data-id="label-text"].required:after {\n          content: '*';\n          color: var(${h.s.cssVarList.textColor});\n        }\n\n        :host([readonly="true"]) descope-button {\n          visibility: hidden;\n        }\n          `,this),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)}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")||""}init(){this.onLabelChange(),this.onValueOrPlaceholderChange(),this.onIsRequiredChange(),this.onBadgeLabelChange(),this.onBadgeTooltipTextChange(),this.handleDeleteButtonVisibility(),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}))))}static get observedAttributes(){return["label","value","placeholder","required","badge-label","badge-tooltip-text"].concat(super.observedAttributes)}handleDeleteButtonVisibility(){this.deleteButton.classList.toggle("hidden",this.isRequired||!this.value)}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(),"value"!==t&&"required"!==t||this.handleDeleteButtonVisibility())}}const{host:x,textFields:y,buttons:T,badge:D,labelText:w,valueText:A,textWrapper:v}={host:{selector:()=>":host"},textFields:{selector:"descope-text"},valueText:{selector:'descope-text[data-id="value-text"]'},labelText:{selector:'descope-text[data-id="label-text"]'},buttons:{selector:"descope-button"},badge:{selector:"descope-badge"},textWrapper:{selector:" .text-wrapper"}},m=(0,s.Zz)((0,i.RF)({mappings:{hostWidth:{...x,property:"width"},hostMinWidth:{...x,property:"min-width"},hostDirection:[{...x,property:"direction"},{...y,property:h.s.cssVarList.hostDirection},{...T,property:p.J.cssVarList.hostDirection},{...D,property:u.e.cssVarList.hostDirection}],labelTextWidth:{...w,property:"width"},valueTextWidth:{...A,property:"width"},badgeMaxWidth:{...D,property:"max-width"},itemsGap:[{property:"gap"},{...v,property:"gap"}]}}),i.VO,i.tQ)(M);n(63595),n(85076),n(91359),n(95260),customElements.define(b,m)}}]);
+(self.webpackChunk_descope_web_components_ui=self.webpackChunk_descope_web_components_ui||[]).push([[1578,2294,9553],{76368:t=>{t.exports="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTgiIHZpZXdCb3g9IjAgMCAxNCAxOCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4gPHBhdGggZD0iTTEgMTZDMSAxNy4xIDEuOSAxOCAzIDE4SDExQzEyLjEgMTggMTMgMTcuMSAxMyAxNlY0SDFWMTZaTTMgNkgxMVYxNkgzVjZaTTEwLjUgMUw5LjUgMEg0LjVMMy41IDFIMFYzSDE0VjFIMTAuNVoiIGZpbGw9ImN1cnJlbnRjb2xvciIvPiA8L3N2Zz4g"},65725:t=>{t.exports="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTUiIGhlaWdodD0iMTUiIHZpZXdCb3g9IjAgMCAxNSAxNSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4gPHBhdGggZD0iTTEwLjAwMDIgMC45OTIxNDlDMTAuMDAwMiAxLjAxNjE1IDEwLjAwMDIgMS4wMTYxNSAxMC4wMDAyIDEuMDE2MTVMOC4yMjQxOSAzLjAwODE1SDIuOTkyMTlDMi40NjQxOSAzLjAwODE1IDIuMDA4MTkgMy40NDAxNSAyLjAwODE5IDMuOTkyMTVWMTIuMDA4MkMyLjAwODE5IDEyLjUzNjIgMi40NDAxOSAxMi45OTIyIDIuOTkyMTkgMTIuOTkyMkg1LjUzNjE5QzUuODQ4MTkgMTMuMDQwMiA2LjE2MDE5IDEzLjA0MDIgNi40NzIxOSAxMi45OTIySDExLjAwODJDMTEuNTM2MiAxMi45OTIyIDExLjk5MjIgMTIuNTYwMiAxMS45OTIyIDEyLjAwODJWNy43ODQxNkwxMy45MzYyIDUuNjI0MTVMMTQuMDA4MiA1LjY3MjE1VjExLjk4NDJDMTQuMDA4MiAxMy42NjQyIDEyLjY2NDIgMTUuMDA4MiAxMS4wMDgyIDE1LjAwODJIMy4wMTYxOUMxLjMzNjE5IDE1LjAwODIgLTAuMDA3ODEyNSAxMy42NjQyIC0wLjAwNzgxMjUgMTEuOTg0MlYzLjk5MjE1Qy0wLjAwNzgxMjUgMi4zMzYxNSAxLjMzNjE5IDAuOTkyMTQ5IDMuMDE2MTkgMC45OTIxNDlIMTAuMDAwMlpNMTEuMjcyMiAyLjYyNDE1TDEyLjYxNjIgNC4xMTIxNUw3LjcyMDE5IDkuNjgwMTZDNy41MDQxOSA5LjkyMDE2IDYuODMyMTkgMTAuMjMyMiA1LjY4MDE5IDEwLjYxNjJDNS42NTYxOSAxMC42NDAyIDUuNjA4MTkgMTAuNjQwMiA1LjU2MDE5IDEwLjYxNjJDNS40NjQxOSAxMC41OTIyIDUuMzkyMTkgMTAuNDcyMiA1LjQ0MDE5IDEwLjM3NjJDNS43NTIxOSA5LjI0ODE2IDYuMDQwMTkgOC41NTIxNiA2LjI1NjE5IDguMzEyMTZMMTEuMjcyMiAyLjYyNDE1Wk0xMS45MjAyIDEuODU2MTVMMTMuMjg4MiAwLjMyMDE0OUMxMy42NDgyIC0wLjA4Nzg1MTYgMTQuMjcyMiAtMC4xMTE4NTIgMTQuNjgwMiAwLjI3MjE0OUMxNS4wODgyIDAuNjMyMTQ5IDE1LjExMjIgMS4yODAxNSAxNC43NTIyIDEuNjg4MTVMMTMuMjY0MiAzLjM2ODE1TDExLjkyMDIgMS44NTYxNVoiIGZpbGw9ImN1cnJlbnRjb2xvciIvPiA8L3N2Zz4g"},19624:(t,e,n)=>{"use strict";n.d(e,{J:()=>u,T:()=>l});var i=n(63200),o=n(25964),s=n(88961),r=n(98538),a=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 p;const u=(0,i.Zz)((0,s.RF)({mappings:{hostWidth:{property:"width"},hostHeight:{property:"height"},hostDirection:{...d,property:"direction"},fontSize:{},fontFamily:{},cursor:{},backgroundColor:{},outlineOffset:{},outlineColor:{},outlineStyle:{},outlineWidth:{},borderRadius:{},borderColor:{},borderStyle:{},borderWidth:{},verticalPadding:[{property:"padding-top"},{property:"padding-bottom"}],horizontalPadding:[{property:"padding-right",fallback:"0.875em"},{property:"padding-left",fallback:"0.875em"}],labelTextColor:{property:"color"},iconColor:{selector:()=>"::slotted(*)",property:r.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"}]}}),a.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${p}\n\t\t\tvaadin-button::part(label) { pointer-events: none; }\n\t\t\t:host {\n\t\t\t\tpadding: calc(var(${u.cssVarList.outlineWidth}) + var(${u.cssVarList.outlineOffset}));\n\t\t\t}\n      :host([full-width="true"]) {\n        width: var(${u.cssVarList.hostWidth});\n      }\n\t\t\tvaadin-button {\n\t\t\t\theight: calc(var(${u.cssVarList.hostHeight}) - var(${u.cssVarList.outlineWidth}) - var(${u.cssVarList.outlineOffset}));\n\t\t\t}\n\t\t\t[square="true"]:not([full-width="true"]) {\n\t\t\t\twidth: calc(var(${u.cssVarList.hostWidth}) - var(${u.cssVarList.outlineWidth}) - var(${u.cssVarList.outlineOffset}));\n        padding: 0;\n\t\t\t}\n\t\t`,excludeAttrsSync:["tabindex"],componentName:l})),{color:g,fontSize:b}=u.cssVarList;p=`\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:()=>c,T:()=>l});var i=n(88961),o=n(72270),s=n(63200),r=n(25964),a=n(31004);const l=(0,r.xE)("icon");class d extends((0,o.qu)({componentName:l,baseSelector:"slot"})){static get observedAttributes(){return["src"]}#t;constructor(){super(),this.attachShadow({mode:"open"}).innerHTML="\n\t\t<slot></slot>\n\t",(0,r.fz)("\n\t\t\t:host > slot {\n\t\t\t\tbox-sizing: border-box;\n\t\t\t\twidth: 100%;\n\t\t\t\theight: 100%;\n\t\t\t\tdisplay: flex;\n\t\t\t\toverflow: hidden;\n\t\t\t}\n\t\t\t:host {\n\t\t\t\tdisplay: inline-block;\n\t\t\t}\n  ",this)}init(){super.init?.(),this.toggleVisibility(this.src)}toggleVisibility(t){this.style.display=t?"":"none"}get src(){return this.getAttribute("src")}updateFillColor(t){[t,...t.querySelectorAll("*[fill]")].forEach((t=>{t.setAttribute("fill",`var(${c.cssVarList.fill}, ${t.getAttribute("fill")||"''"})`)}))}attributeChangedCallback(t,e,n){super.attributeChangedCallback?.(t,e,n),e!==n&&"src"===t&&(this.toggleVisibility(n),(0,a.w)(this.src).then((t=>{if(this.innerHTML="",t){const e=t.cloneNode(!0);this.updateFillColor(e),this.appendChild(e)}})))}}const c=(0,s.Zz)((0,i.RF)({mappings:{fill:{}}}),i.VO,i.tQ)(d)},31004:(t,e,n)=>{"use strict";n.d(e,{w:()=>s});var i=n(25414);const o=t=>{const e=i.A.sanitize(t,{USE_PROFILES:{svg:!0,svgFilters:!0}});return(new DOMParser).parseFromString(e,"image/svg+xml").querySelector("svg")},s=async t=>{try{let e;if((t=>t.startsWith("data:image/svg+xml;base64,"))(t)){const n=atob(t.slice(26));e=o(n)}else if("svg"===(t=>{const e=t.match(/\.([0-9a-z]+)(?:[\\?#]|$)/i);return e?e[1]:null})(t)){const n=await fetch(t),i=await n.text();e=o(i)}else e=(t=>{const e=document.createElement("img");return e.setAttribute("src",t),e})(t);return e.style.setProperty("max-width","100%"),e.style.setProperty("max-height","100%"),e}catch{return null}}},66434:(t,e,n)=>{"use strict";n.d(e,{T:()=>a,s:()=>d});var i=n(88961),o=n(63200),s=n(25964),r=n(72270);const a=(0,s.xE)("text");class l extends((0,r.qu)({componentName:a,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 d=(0,o.Zz)((0,i.RF)({mappings:{hostWidth:{selector:()=>":host",property:"width"},hostDirection:{selector:()=>":host",property:"direction"},fontSize:{},textColor:{property:"color"},textLineHeight:{property:"line-height"},textLetterSpacing:{property:"letter-spacing"},textShadow:{},textAlign:{},textTransform:{},fontFamily:{},fontStyle:{},fontWeight:{},borderWidth:{},borderStyle:{},borderColor:{}}}),i.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)},26442:(t,e,n)=>{"use strict";n.d(e,{T:()=>l,e:()=>c});var i=n(79365),o=n(81365),s=n(9696),r=n(97810),a=n(25964);const l=(0,r.xE)("badge");class d extends((0,o.q)({componentName:l,baseSelector:":host > div"})){constructor(){super(),this.attachShadow({mode:"open"}).innerHTML="\n\t\t<div>\n      <slot></slot>\n\t\t</div>\n\t\t",(0,a.fz)("\n      :host {\n        display: inline-flex;\n      }\n      :host > div {\n        width: 100%;\n        text-overflow: ellipsis;\n        overflow: hidden;\n        white-space: nowrap;\n      }\n      ",this)}}const c=(0,s.Zz)((0,i.RF)({mappings:{hostWidth:[{selector:()=>":host",property:"width"}],hostDirection:{property:"direction"},fontFamily:{},fontSize:{},fontWeight:{},textTransform:{},verticalPadding:[{property:"padding-top"},{property:"padding-bottom"}],horizontalPadding:[{property:"padding-left"},{property:"padding-right"}],borderWidth:{},borderStyle:{},borderColor:{},borderRadius:{},backgroundColor:{},textColor:{property:"color"},textAlign:{}}}),i.VO,i.tQ)(d)},91359:(t,e,n)=>{"use strict";n.r(e),n.d(e,{BadgeClass:()=>i.e,componentName:()=>i.T});var i=n(26442);customElements.define(i.T,i.e)},45554:(t,e,n)=>{"use strict";n.r(e),n.d(e,{UserAttributeClass:()=>m,componentName:()=>b});var i=n(79365),o=n(81365),s=n(9696),r=n(97810),a=n(76368),l=n.n(a),d=n(65725),c=n.n(d),h=n(66434),p=n(19624),u=n(26442),g=n(25964);const b=(0,r.xE)("user-attribute");class M extends((0,o.q)({componentName:b,baseSelector:":host > .root"})){constructor(){super(),this.attachShadow({mode:"open"}).innerHTML=`\n      <div class="root">\n        <div class="text-wrapper">\n          <descope-text st-text-align="auto" data-id="label-text" variant="body1" mode="secondary" class="label"></descope-text>\n          <descope-text st-text-align="auto" data-id="value-text" variant="body1" mode="primary" class="value"></descope-text>\n        </div>\n\n        <div class="btn-wrapper">\n          <descope-badge mode="default" bordered="true" size="xs"></descope-badge>\n          <descope-button size="xs" data-id="edit-btn" square="true" variant="link" mode="primary">\n            <vaadin-icon src=${c()}></vaadin-icon>\n          </descope-button>\n          <descope-button size="xs" data-id="delete-btn" square="true" variant="link" mode="primary">\n            <vaadin-icon src=${l()}></vaadin-icon>\n          </descope-button>\n        </div\n      </div>\n\t\t`,(0,g.fz)(`\n      :host {\n\t\t\t\t\tdisplay: inline-flex;\n\t\t\t\t}\n\n        vaadin-icon {\n          color: currentcolor;\n        }\n\n        .root {\n          display: flex;\n          width: 100%;\n          height: 100%;\n          align-items: center;\n        }\n\n        .btn-wrapper {\n          display: flex;\n          justify-content: space-between;\n          align-items: center;\n          flex-grow: 0;\n        }\n\n        .text-wrapper {\n          display: flex;\n          align-items: center;\n          flex-grow: 1;\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        }\n\n        .label {\n          flex-grow: 0;\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        }\n\n        descope-text[data-id="label-text"].required:after {\n          content: '*';\n          color: var(${h.s.cssVarList.textColor});\n        }\n\n        :host([readonly="true"]) descope-button {\n          visibility: hidden;\n        }\n          `,this),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)}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")||""}init(){this.onLabelChange(),this.onValueOrPlaceholderChange(),this.onIsRequiredChange(),this.onBadgeLabelChange(),this.onBadgeTooltipTextChange(),this.handleDeleteButtonVisibility(),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}))))}static get observedAttributes(){return["label","value","placeholder","required","badge-label","badge-tooltip-text"].concat(super.observedAttributes)}handleDeleteButtonVisibility(){this.deleteButton.classList.toggle("hidden",this.isRequired||!this.value)}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(),"value"!==t&&"required"!==t||this.handleDeleteButtonVisibility())}}const{host:x,textFields:y,buttons:T,badge:D,labelText:w,valueText:A,textWrapper:v}={host:{selector:()=>":host"},textFields:{selector:"descope-text"},valueText:{selector:'descope-text[data-id="value-text"]'},labelText:{selector:'descope-text[data-id="label-text"]'},buttons:{selector:"descope-button"},badge:{selector:"descope-badge"},textWrapper:{selector:" .text-wrapper"}},m=(0,s.Zz)((0,i.RF)({mappings:{hostWidth:{...x,property:"width"},hostMinWidth:{...x,property:"min-width"},hostDirection:[{...x,property:"direction"},{...y,property:h.s.cssVarList.hostDirection},{...T,property:p.J.cssVarList.hostDirection},{...D,property:u.e.cssVarList.hostDirection}],labelTextWidth:{...w,property:"width"},valueTextWidth:{...A,property:"width"},badgeMaxWidth:{...D,property:"max-width"},itemsGap:[{property:"gap"},{...v,property:"gap"}]}}),i.VO,i.tQ)(M);n(63595),n(30576),n(91359),n(95260),customElements.define(b,m)}}]);
 //# sourceMappingURL=descope-user-attribute-index-js.js.map