@descope/web-components-ui 1.56.0 → 1.58.0

package/dist/umd/descope-timer-button.js

@@ -1,2 +1,2 @@
-(self.webpackChunk_descope_web_components_ui=self.webpackChunk_descope_web_components_ui||[]).push([[743,2250,6724],{10767:(t,e,i)=>{"use strict";i.d(e,{G:()=>n});const n=t=>class extends t{get isLoading(){return"true"===this.getAttribute("loading")}click(){this.isLoading||super.click()}}},15887:(t,e,i)=>{"use strict";i.r(e),i.d(e,{TimerClass:()=>g,componentName:()=>h});var n=i(88961),s=i(72270),o=i(63200),r=i(25964),a=i(44006),l=i.n(a),d=i(98538);const c=(t,e=2)=>String(t).padStart(e,"0"),h=(0,r.xE)("timer"),u=["seconds","hide-icon","paused"],p=(0,s.qu)({componentName:h,baseSelector:":host > .wrapper"}),{host:m,icon:M,timer:b}={host:{selector:()=>":host"},icon:{selector:()=>".icon"},timer:{selector:()=>".timer"}},g=(0,o.Zz)((0,n.RF)({mappings:{fontSize:{},iconSize:[{...M,property:"width"},{...M,property:"height"}],fontFamily:{},minHeight:{},fontWeight:{...b},lineHeight:{...b},textColor:{...b,property:"color"},gap:{},textAlign:{property:"justify-content"},hostWidth:{...m,property:"width"},hostDirection:{...m,property:"direction"},iconColor:{...M,property:d.S.cssVarList.fill}}}),n.VO,n.tQ)(class extends p{#t=0;#e;static get observedAttributes(){return u.concat(p.observedAttributes||[])}constructor(){super(),this.attachShadow({mode:"open"}).innerHTML=`\n      <div class="wrapper">\n        <descope-icon src=${l()} class="icon"></descope-icon>\n        <div class="timer"></div>\n      </div>\n\t\t`,(0,r.fz)("\n      :host {\n        display: inline-flex;\n        user-select: none;\n        -webkit-user-select: none;\n      }\n      .wrapper {\n        display: flex;\n        align-items: center;\n        flex-direction: row;\n        width: 100%;\n      }\n      .hidden {\n        display: none;\n      }\n    ",this),this.icon=this.shadowRoot.querySelector(".icon"),this.timer=this.shadowRoot.querySelector(".timer")}get seconds(){const t=this.getAttribute("seconds"),e=1e3*parseInt(t||0,10);return Math.max(0,e)}get isPaused(){return"true"===this.getAttribute("paused")}init(){super.init?.(),this.#t=this.seconds}startInterval(){this.#t?this.#e=setInterval((()=>{this.#i(),this.#t||this.stop(),this.#n(this.#t)}),1e3):this.stop()}stopInterval(){clearInterval(this.#e)}#i(){this.#t=this.#t-1e3}reset(){this.#t=this.seconds,this.#n(this.#t),this.isPaused||(this.dispatchEvent(new CustomEvent("timer-started",{bubbles:!0})),this.startInterval())}stop(){this.stopInterval(),this.#t=0,this.#n(this.#t),this.dispatchEvent(new CustomEvent("timer-ended",{bubbles:!0}))}pause(){this.setAttribute("paused","true"),this.stopInterval()}resume(){this.removeAttribute("paused"),this.startInterval()}#n(t){this.timer.textContent=((t=0)=>{const e=Math.floor(t/1e3),i=Math.floor(e/3600),n=Math.floor(e%3600/60),s=e%60;return[...i?[c(i)]:[],c(n),c(s)].join(":")})(t)}#s(t){this.icon.classList.toggle("hidden","true"===t)}#o(t){setTimeout((()=>{t?this.pause():this.#e||this.resume()}))}attributeChangedCallback(t,e,i){super.attributeChangedCallback?.(t,e,i),i!==e&&("seconds"===t&&this.reset(),"hide-icon"===t&&this.#s(i),"paused"===t&&this.#o("true"===i))}});i(56737),customElements.define(h,g)},19624:(t,e,i)=>{"use strict";i.d(e,{J:()=>p,T:()=>l});var n=i(63200),s=i(25964),o=i(88961),r=i(98538),a=i(10767);const l=(0,s.xE)("button"),{host:d,label:c,slottedIcon:h}={host:{selector:()=>":host"},label:{selector:"::part(label)"},slottedIcon:{selector:()=>"::slotted(descope-icon)"}};let u;const p=(0,n.Zz)((0,o.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,o.VO,o.tQ)((0,o.tz)({slots:["","prefix","label","suffix"],wrappedEleName:"vaadin-button",style:()=>`\n\t\t\t\n\t:host {\n\t\tdisplay: inline-block;\n\t\tbox-sizing: border-box;\n\t}\n\tvaadin-button::before,\n\tvaadin-button::after {\n\t\topacity: 0;\n\t}\n\tvaadin-button {\n\t\tmargin: 0;\n\t\tmin-width: 0;\n\t\twidth: 100%;\n\t\theight: auto;\n\t\tbox-shadow: none;\n\t}\n\tvaadin-button::part(label) {\n\t\tpadding: 0;\n    width: 100%;\n\t}\n\tvaadin-button::part(prefix) {\n\t\tmargin-left: 0;\n\t\tmargin-right: 0;\n\t}\n\n\t\t\t\n\tvaadin-button::part(prefix),\n\tvaadin-button::part(label) {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t}\n\n\t\t\t${u}\n\t\t\tvaadin-button::part(label) { pointer-events: none; }\n\t\t\t:host {\n\t\t\t\tpadding: calc(var(${p.cssVarList.outlineWidth}) + var(${p.cssVarList.outlineOffset}));\n\t\t\t}\n      :host([full-width="true"]) {\n        width: var(${p.cssVarList.hostWidth});\n      }\n\t\t\tvaadin-button {\n\t\t\t\theight: calc(var(${p.cssVarList.hostHeight}) - var(${p.cssVarList.outlineWidth}) - var(${p.cssVarList.outlineOffset}));\n\t\t\t}\n\t\t\t[square="true"]:not([full-width="true"]) {\n\t\t\t\twidth: calc(var(${p.cssVarList.hostWidth}) - var(${p.cssVarList.outlineWidth}) - var(${p.cssVarList.outlineOffset}));\n        padding: 0;\n\t\t\t}\n\t\t`,excludeAttrsSync:["tabindex"],componentName:l})),{color:m,fontSize:M}=p.cssVarList;u=`\n\t@keyframes spin {\n\t\t0% { -webkit-transform: rotate(0deg); }\n\t\t100% { -webkit-transform: rotate(360deg); }\n\t}\n\t:host([loading="true"]) ::before {\n\t\tanimation: spin 2s linear infinite;\n\t\tposition: absolute;\n\t\tcontent: '';\n\t\tz-index: 1;\n\t\tbox-sizing: border-box;\n\t\tborder-radius: 50%;\n\t\tborder-bottom-color: transparent;\n\t\tborder-left-color: transparent;\n\t\tborder-style: solid;\n\t\tcolor: var(${m});\n\t\ttop: calc(50% - (var(${M}) / 2));\n\t\tleft: calc(50% - (var(${M}) / 2));\n\t\tborder-width: calc(var(${M}) / 10);\n\t\twidth: var(${M});\n\t\theight: var(${M});\n\t}\n\t:host([disabled="true"]),\n\t:host([loading="true"]) {\n\t\tpointer-events: none;\n\t}\n\t:host([loading="true"])::part(prefix),\n\t:host([loading="true"])::part(label) {\n\t\tvisibility: hidden;\n\t}\n`},30576:(t,e,i)=>{"use strict";i.r(e),i.d(e,{ButtonClass:()=>n.J,componentName:()=>n.T});var n=i(19624);i(83799),customElements.define(n.T,n.J)},31004:(t,e,i)=>{"use strict";i.d(e,{w:()=>o});var n=i(25414);const s=t=>{const e=n.A.sanitize(t,{USE_PROFILES:{svg:!0,svgFilters:!0}});return(new DOMParser).parseFromString(e,"image/svg+xml").querySelector("svg")},o=async t=>{try{let e;if((t=>t.startsWith("data:image/svg+xml;base64,"))(t)){const i=atob(t.slice(26));e=s(i)}else if("svg"===(t=>{const e=t.match(/\.([0-9a-z]+)(?:[\\?#]|$)/i);return e?e[1]:null})(t)){const i=await fetch(t),n=await i.text();e=s(n)}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}}},44006:t=>{t.exports="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMWVtIiBoZWlnaHQ9IjFlbSIgdmlld0JveD0iMCAwIDEwMSAxMDEiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+IDxwYXRoIGQ9Ik01MC4zMzM0IDAuMzMzMjUyQzIyLjgzMzQgMC4zMzMyNTIgMC4zMzMzNzQgMjIuODMzMyAwLjMzMzM3NCA1MC4zMzMzQzAuMzMzMzc0IDc3LjgzMzMgMjIuODMzNCAxMDAuMzMzIDUwLjMzMzQgMTAwLjMzM0M3Ny44MzM0IDEwMC4zMzMgMTAwLjMzMyA3Ny44MzMzIDEwMC4zMzMgNTAuMzMzM0MxMDAuMzMzIDIyLjgzMzMgNzcuODMzNCAwLjMzMzI1MiA1MC4zMzM0IDAuMzMzMjUyWk01MC4zMzM0IDg3LjgzMzNDMjkuNzA4NCA4Ny44MzMzIDEyLjgzMzQgNzAuOTU4MyAxMi44MzM0IDUwLjMzMzNDMTIuODMzNCAyOS43MDgzIDI5LjcwODQgMTIuODMzMyA1MC4zMzM0IDEyLjgzMzNDNzAuOTU4NCAxMi44MzMzIDg3LjgzMzQgMjkuNzA4MyA4Ny44MzM0IDUwLjMzMzNDODcuODMzNCA3MC45NTgzIDcwLjk1ODQgODcuODMzMyA1MC4zMzM0IDg3LjgzMzNaIiBmaWxsPSIjMTgxQTFDIi8+IDxwYXRoIGQ9Ik01MC4zMzI4IDE5LjA4MzNINDQuMDgyOFY1Ni41ODMySDc1LjMzMjhWNTAuMzMzMkg1MC4zMzI4VjE5LjA4MzNaIiBmaWxsPSIjMTgxQTFDIi8+IDwvc3ZnPiA="},56737:(t,e,i)=>{"use strict";i.r(e),i.d(e,{IconClass:()=>n.S,componentName:()=>n.T});var n=i(98538);customElements.define(n.T,n.S)},60096:(t,e,i)=>{"use strict";i.r(e),i.d(e,{TimerButtonClass:()=>m,componentName:()=>a});var n=i(88961),s=i(72270),o=i(63200),r=i(25964);const a=(0,r.xE)("timer-button"),l=["button-variant","button-mode","size","text-align","full-width"],d={"button-variant":"variant","button-mode":"mode"},c=["timer-seconds","timer-hide-icon","timer-paused","size","text-align","full-width"],h={"timer-seconds":"seconds","timer-hide-icon":"hide-icon","timer-paused":"paused"},u=(0,s.qu)({componentName:a,baseSelector:":host > div"}),{host:p}={host:{selector:()=>":host"},icon:{selector:".icon"},timer:{selector:".timer"}},m=(0,o.Zz)((0,n.RF)({mappings:{gap:{},flexDirection:{},hostWidth:{...p,property:"width"},hostDirection:{...p,property:"direction"}}}),n.VO,n.tQ)(class extends u{constructor(){super(),this.attachShadow({mode:"open"}).innerHTML='\n      <div class="wrapper">\n        <descope-timer class="timer"></descope-timer>\n        <descope-button class="button" disabled="true">\n          <slot></slot>\n        </descope-button>\n      </div>\n\t\t',(0,r.fz)("\n      :host {\n        display: inline-flex;\n      }\n      .wrapper {\n        display: flex;\n        flex-direction: column;\n        gap: 0.5em;\n        align-items: center;\n        width: 100%;\n      }\n      .timer {\n        flex: 1;\n      }\n    ",this),this.timer=this.shadowRoot.querySelector(".timer"),this.button=this.shadowRoot.querySelector(".button"),this.timer.addEventListener("timer-started",(()=>this.onTimerStarted())),this.timer.addEventListener("timer-ended",(()=>this.onTimerEnded())),this.button.addEventListener("click",this.onClick.bind(this))}set onclick(t){this.button.onclick=t}init(){super.init?.(),(0,r.EA)(this,this.button,{includeAttrs:l,mapAttrs:d}),(0,r.EA)(this,this.timer,{includeAttrs:c,mapAttrs:h}),this.button.shadowRoot.querySelector("vaadin-button").setAttribute("disabled","true")}onTimerStarted(){this.toggleButtonDisable(!0)}onTimerEnded(){this.toggleButtonDisable(!1)}onClick(){this.timer.reset()}toggleButtonDisable(t){setTimeout((()=>{t?this.button.setAttribute("disabled","true"):this.button.removeAttribute("disabled")}))}});i(30576),i(15887),customElements.define(a,m)},98538:(t,e,i)=>{"use strict";i.d(e,{S:()=>c,T:()=>l});var n=i(88961),s=i(72270),o=i(63200),r=i(25964),a=i(31004);const l=(0,r.xE)("icon");class d extends((0,s.qu)({componentName:l,baseSelector:"slot"})){static get observedAttributes(){return["src"]}#r;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,i){super.attributeChangedCallback?.(t,e,i),e!==i&&"src"===t&&(this.toggleVisibility(i),(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,o.Zz)((0,n.RF)({mappings:{fill:{}}}),n.VO,n.tQ)(d)}}]);
+(self.webpackChunk_descope_web_components_ui=self.webpackChunk_descope_web_components_ui||[]).push([[743,2250,6724],{10767:(t,e,i)=>{"use strict";i.d(e,{G:()=>n});const n=t=>class extends t{get isLoading(){return"true"===this.getAttribute("loading")}click(){this.isLoading||super.click()}}},15887:(t,e,i)=>{"use strict";i.r(e),i.d(e,{TimerClass:()=>b,componentName:()=>h});var n=i(88961),s=i(72270),o=i(63200),r=i(25964),a=i(44006),l=i.n(a),d=i(98538);const c=(t,e=2)=>String(t).padStart(e,"0"),h=(0,r.xE)("timer"),u=["seconds","hide-icon","paused"],p=(0,s.qu)({componentName:h,baseSelector:":host > .wrapper"}),{host:m,icon:M,timer:g}={host:{selector:()=>":host"},icon:{selector:()=>".icon"},timer:{selector:()=>".timer"}},b=(0,o.Zz)((0,n.RF)({mappings:{fontSize:{},iconSize:[{...M,property:"width"},{...M,property:"height"}],fontFamily:{},minHeight:{},fontWeight:{...g},lineHeight:{...g},textColor:{...g,property:"color"},gap:{},textAlign:{property:"justify-content"},hostWidth:{...m,property:"width"},hostDirection:{...m,property:"direction"},iconColor:{...M,property:d.S.cssVarList.fill}}}),n.VO,n.tQ)(class extends p{#t=0;#e;static get observedAttributes(){return u.concat(p.observedAttributes||[])}constructor(){super(),this.attachShadow({mode:"open"}).innerHTML=`\n      <div class="wrapper">\n        <descope-icon src=${l()} class="icon"></descope-icon>\n        <div class="timer"></div>\n      </div>\n\t\t`,(0,r.fz)("\n      :host {\n        display: inline-flex;\n        user-select: none;\n        -webkit-user-select: none;\n      }\n      .wrapper {\n        display: flex;\n        align-items: center;\n        flex-direction: row;\n        width: 100%;\n      }\n      .hidden {\n        display: none;\n      }\n    ",this),this.icon=this.shadowRoot.querySelector(".icon"),this.timer=this.shadowRoot.querySelector(".timer")}get seconds(){const t=this.getAttribute("seconds"),e=1e3*parseInt(t||0,10);return Math.max(0,e)}get isPaused(){return"true"===this.getAttribute("paused")}init(){super.init?.(),this.#t=this.seconds}startInterval(){this.#t?this.#e=setInterval((()=>{this.#i(),this.#t||this.stop(),this.#n(this.#t)}),1e3):this.stop()}stopInterval(){clearInterval(this.#e)}#i(){this.#t=this.#t-1e3}reset(){this.#t=this.seconds,this.#n(this.#t),this.isPaused||(this.dispatchEvent(new CustomEvent("timer-started",{bubbles:!0})),this.startInterval())}stop(){this.stopInterval(),this.#t=0,this.#n(this.#t),this.dispatchEvent(new CustomEvent("timer-ended",{bubbles:!0}))}pause(){this.setAttribute("paused","true"),this.stopInterval()}resume(){this.removeAttribute("paused"),this.startInterval()}#n(t){this.timer.textContent=((t=0)=>{const e=Math.floor(t/1e3),i=Math.floor(e/3600),n=Math.floor(e%3600/60),s=e%60;return[...i?[c(i)]:[],c(n),c(s)].join(":")})(t)}#s(t){this.icon.classList.toggle("hidden","true"===t)}#o(t){setTimeout((()=>{t?this.pause():this.#e||this.resume()}))}attributeChangedCallback(t,e,i){super.attributeChangedCallback?.(t,e,i),i!==e&&("seconds"===t&&this.reset(),"hide-icon"===t&&this.#s(i),"paused"===t&&this.#o("true"===i))}});i(56737),customElements.define(h,b)},19624:(t,e,i)=>{"use strict";i.d(e,{J:()=>p,T:()=>l});var n=i(63200),s=i(25964),o=i(88961),r=i(98538),a=i(10767);const l=(0,s.xE)("button"),{host:d,label:c,slottedIcon:h}={host:{selector:()=>":host"},label:{selector:"::part(label)"},slottedIcon:{selector:()=>"::slotted(descope-icon)"}};let u;const p=(0,n.Zz)((0,o.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,o.VO,o.tQ)((0,o.tz)({slots:["","prefix","label","suffix"],wrappedEleName:"vaadin-button",style:()=>`\n\t\t\t\n\t:host {\n\t\tdisplay: inline-block;\n\t\tbox-sizing: border-box;\n\t}\n\tvaadin-button::before,\n\tvaadin-button::after {\n\t\topacity: 0;\n\t}\n\tvaadin-button {\n\t\tmargin: 0;\n\t\tmin-width: 0;\n\t\twidth: 100%;\n\t\theight: auto;\n\t\tbox-shadow: none;\n\t}\n\tvaadin-button::part(label) {\n\t\tpadding: 0;\n    width: 100%;\n\t}\n\tvaadin-button::part(prefix) {\n\t\tmargin-left: 0;\n\t\tmargin-right: 0;\n\t}\n\n\t\t\t\n\tvaadin-button::part(prefix),\n\tvaadin-button::part(label) {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t}\n\n\t\t\t${u}\n\t\t\tvaadin-button::part(label) { pointer-events: none; }\n\t\t\t:host {\n\t\t\t\tpadding: calc(var(${p.cssVarList.outlineWidth}) + var(${p.cssVarList.outlineOffset}));\n\t\t\t}\n      :host([full-width="true"]) {\n        width: var(${p.cssVarList.hostWidth});\n      }\n\t\t\tvaadin-button {\n\t\t\t\theight: calc(var(${p.cssVarList.hostHeight}) - var(${p.cssVarList.outlineWidth}) - var(${p.cssVarList.outlineOffset}));\n\t\t\t}\n\t\t\t[square="true"]:not([full-width="true"]) {\n\t\t\t\twidth: calc(var(${p.cssVarList.hostWidth}) - var(${p.cssVarList.outlineWidth}) - var(${p.cssVarList.outlineOffset}));\n        padding: 0;\n\t\t\t}\n\t\t`,excludeAttrsSync:["tabindex"],componentName:l})),{color:m,fontSize:M}=p.cssVarList;u=`\n\t@keyframes spin {\n\t\t0% { -webkit-transform: rotate(0deg); }\n\t\t100% { -webkit-transform: rotate(360deg); }\n\t}\n\t:host([loading="true"]) ::before {\n\t\tanimation: spin 2s linear infinite;\n\t\tposition: absolute;\n\t\tcontent: '';\n\t\tz-index: 1;\n\t\tbox-sizing: border-box;\n\t\tborder-radius: 50%;\n\t\tborder-bottom-color: transparent;\n\t\tborder-left-color: transparent;\n\t\tborder-style: solid;\n\t\tcolor: var(${m});\n\t\ttop: calc(50% - (var(${M}) / 2));\n\t\tleft: calc(50% - (var(${M}) / 2));\n\t\tborder-width: calc(var(${M}) / 10);\n\t\twidth: var(${M});\n\t\theight: var(${M});\n\t}\n\t:host([disabled="true"]),\n\t:host([loading="true"]) {\n\t\tpointer-events: none;\n\t}\n\t:host([loading="true"])::part(prefix),\n\t:host([loading="true"])::part(label) {\n\t\tvisibility: hidden;\n\t}\n`},30576:(t,e,i)=>{"use strict";i.r(e),i.d(e,{ButtonClass:()=>n.J,componentName:()=>n.T});var n=i(19624);i(83799),customElements.define(n.T,n.J)},31004:(t,e,i)=>{"use strict";i.d(e,{w:()=>o});var n=i(25414);const s=t=>{const e=n.A.sanitize(t,{USE_PROFILES:{svg:!0,svgFilters:!0}});return(new DOMParser).parseFromString(e,"image/svg+xml").querySelector("svg")},o=async t=>{try{let e;if((t=>t.startsWith("data:image/svg+xml;base64,"))(t)){const i=atob(t.slice(26));e=s(i)}else if("svg"===(t=>{const e=t.match(/\.([0-9a-z]+)(?:[\\?#]|$)/i);return e?e[1]:null})(t)){const i=await fetch(t),n=await i.text();e=s(n)}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}}},44006:t=>{t.exports="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMWVtIiBoZWlnaHQ9IjFlbSIgdmlld0JveD0iMCAwIDEwNCAxMDQiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+IDxwYXRoIGQ9Ik01MC4zMzM0IDAuMzMzMjUyQzIyLjgzMzQgMC4zMzMyNTIgMC4zMzMzNzQgMjIuODMzMyAwLjMzMzM3NCA1MC4zMzMzQzAuMzMzMzc0IDc3LjgzMzMgMjIuODMzNCAxMDAuMzMzIDUwLjMzMzQgMTAwLjMzM0M3Ny44MzM0IDEwMC4zMzMgMTAwLjMzMyA3Ny44MzMzIDEwMC4zMzMgNTAuMzMzM0MxMDAuMzMzIDIyLjgzMzMgNzcuODMzNCAwLjMzMzI1MiA1MC4zMzM0IDAuMzMzMjUyWk01MC4zMzM0IDg3LjgzMzNDMjkuNzA4NCA4Ny44MzMzIDEyLjgzMzQgNzAuOTU4MyAxMi44MzM0IDUwLjMzMzNDMTIuODMzNCAyOS43MDgzIDI5LjcwODQgMTIuODMzMyA1MC4zMzM0IDEyLjgzMzNDNzAuOTU4NCAxMi44MzMzIDg3LjgzMzQgMjkuNzA4MyA4Ny44MzM0IDUwLjMzMzNDODcuODMzNCA3MC45NTgzIDcwLjk1ODQgODcuODMzMyA1MC4zMzM0IDg3LjgzMzNaIiBmaWxsPSIjMTgxQTFDIi8+IDxwYXRoIGQ9Ik01MC4zMzI4IDE5LjA4MzNINDQuMDgyOFY1Ni41ODMySDc1LjMzMjhWNTAuMzMzMkg1MC4zMzI4VjE5LjA4MzNaIiBmaWxsPSIjMTgxQTFDIi8+IDwvc3ZnPiA="},56737:(t,e,i)=>{"use strict";i.r(e),i.d(e,{IconClass:()=>n.S,componentName:()=>n.T});var n=i(98538);customElements.define(n.T,n.S)},60096:(t,e,i)=>{"use strict";i.r(e),i.d(e,{TimerButtonClass:()=>m,componentName:()=>a});var n=i(88961),s=i(72270),o=i(63200),r=i(25964);const a=(0,r.xE)("timer-button"),l=["button-variant","button-mode","size","text-align","full-width"],d={"button-variant":"variant","button-mode":"mode"},c=["timer-seconds","timer-hide-icon","timer-paused","size","text-align","full-width"],h={"timer-seconds":"seconds","timer-hide-icon":"hide-icon","timer-paused":"paused"},u=(0,s.qu)({componentName:a,baseSelector:":host > div"}),{host:p}={host:{selector:()=>":host"},icon:{selector:".icon"},timer:{selector:".timer"}},m=(0,o.Zz)((0,n.RF)({mappings:{gap:{},flexDirection:{},hostWidth:{...p,property:"width"},hostDirection:{...p,property:"direction"}}}),n.VO,n.tQ)(class extends u{constructor(){super(),this.attachShadow({mode:"open"}).innerHTML='\n      <div class="wrapper">\n        <descope-timer class="timer"></descope-timer>\n        <descope-button class="button" disabled="true">\n          <slot></slot>\n        </descope-button>\n      </div>\n\t\t',(0,r.fz)("\n      :host {\n        display: inline-flex;\n      }\n      .wrapper {\n        display: flex;\n        flex-direction: column;\n        gap: 0.5em;\n        align-items: center;\n        width: 100%;\n      }\n      .timer {\n        flex: 1;\n      }\n    ",this),this.timer=this.shadowRoot.querySelector(".timer"),this.button=this.shadowRoot.querySelector(".button"),this.timer.addEventListener("timer-started",(()=>this.onTimerStarted())),this.timer.addEventListener("timer-ended",(()=>this.onTimerEnded())),this.button.addEventListener("click",this.onClick.bind(this))}set onclick(t){this.button.onclick=t}init(){super.init?.(),(0,r.EA)(this,this.button,{includeAttrs:l,mapAttrs:d}),(0,r.EA)(this,this.timer,{includeAttrs:c,mapAttrs:h}),this.button.shadowRoot.querySelector("vaadin-button").setAttribute("disabled","true")}onTimerStarted(){this.toggleButtonDisable(!0)}onTimerEnded(){this.toggleButtonDisable(!1)}onClick(){this.timer.reset()}toggleButtonDisable(t){setTimeout((()=>{t?this.button.setAttribute("disabled","true"):this.button.removeAttribute("disabled")}))}});i(30576),i(15887),customElements.define(a,m)},98538:(t,e,i)=>{"use strict";i.d(e,{S:()=>c,T:()=>l});var n=i(88961),s=i(72270),o=i(63200),r=i(25964),a=i(31004);const l=(0,r.xE)("icon");class d extends((0,s.qu)({componentName:l,baseSelector:"slot"})){static get observedAttributes(){return["src"]}#r;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,i){super.attributeChangedCallback?.(t,e,i),e!==i&&"src"===t&&(this.toggleVisibility(i),(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,o.Zz)((0,n.RF)({mappings:{fill:{},alignItems:{}}}),n.VO,n.tQ)(d)}}]);
 //# sourceMappingURL=descope-timer-button.js.map

package/dist/umd/descope-timer-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"descope-timer-button.js","mappings":"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","sources":["webpack://@descope/web-components-ui/../components/descope-button/src/component/clickableMixin.js","webpack://@descope/web-components-ui/../components/descope-timer/src/component/helpers.js","webpack://@descope/web-components-ui/../components/descope-timer/src/component/TimerClass.js","webpack://@descope/web-components-ui/../components/descope-timer/src/component/index.js","webpack://@descope/web-components-ui/../components/descope-button/src/component/ButtonClass.js","webpack://@descope/web-components-ui/../components/descope-button/src/component/index.js","webpack://@descope/web-components-ui/../components/descope-icon/src/component/helpers.js","webpack://@descope/web-components-ui/../components/descope-timer/src/component/clock.svg","webpack://@descope/web-components-ui/../components/descope-icon/src/component/index.js","webpack://@descope/web-components-ui/../components/descope-timer-button/src/component/TimerButtonClass.js","webpack://@descope/web-components-ui/../components/descope-timer-button/src/component/index.js","webpack://@descope/web-components-ui/../components/descope-icon/src/component/IconClass.js"],"sourcesContent":["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","const fmt = (val, pad = 2) => String(val).padStart(pad, '0');\n\nexport const formatTime = (ms = 0) => {\n  const totalSeconds = Math.floor(ms / 1000);\n\n  const secondsInMinute = 60;\n  const secondsInHour = secondsInMinute * 60;\n\n  const hours = Math.floor(totalSeconds / secondsInHour);\n  const minutes = Math.floor((totalSeconds % secondsInHour) / secondsInMinute);\n  const seconds = totalSeconds % secondsInMinute;\n\n  const timeParts = [...(hours ? [fmt(hours)] : []), fmt(minutes), fmt(seconds)];\n\n  return timeParts.join(':');\n};\n","import {\n  createStyleMixin,\n  draggableMixin,\n  componentNameValidationMixin,\n} from '@descope-ui/common/components-mixins';\nimport { createBaseClass } from '@descope-ui/common/base-classes';\nimport { compose } from '@descope-ui/common/utils';\nimport {\n  getComponentName,\n  injectStyle,\n} from '@descope-ui/common/components-helpers';\nimport clockIcon from './clock.svg';\nimport { IconClass } from '@descope-ui/descope-icon/class';\nimport { formatTime } from './helpers';\n\nexport const componentName = getComponentName('timer');\n\nconst observedAttributes = ['seconds', 'hide-icon', 'paused'];\n\nconst BaseClass = createBaseClass({\n  componentName,\n  baseSelector: ':host > .wrapper',\n});\n\nconst DEFAULT_INTERVAL = 1000;\n\nclass RawTimer extends BaseClass {\n  #timeRemains = 0;\n\n  #intervalId;\n\n  static get observedAttributes() {\n    return observedAttributes.concat(BaseClass.observedAttributes || []);\n  }\n\n  constructor() {\n    super();\n\n    this.attachShadow({ mode: 'open' }).innerHTML = `\n      <div class=\"wrapper\">\n        <descope-icon src=${clockIcon} class=\"icon\"></descope-icon>\n        <div class=\"timer\"></div>\n      </div>\n\t\t`;\n\n    injectStyle(\n      `\n      :host {\n        display: inline-flex;\n        user-select: none;\n        -webkit-user-select: none;\n      }\n      .wrapper {\n        display: flex;\n        align-items: center;\n        flex-direction: row;\n        width: 100%;\n      }\n      .hidden {\n        display: none;\n      }\n    `,\n      this,\n    );\n\n    this.icon = this.shadowRoot.querySelector('.icon');\n    this.timer = this.shadowRoot.querySelector('.timer');\n  }\n\n  get seconds() {\n    const val = this.getAttribute('seconds');\n    const secs = parseInt(val || 0, 10) * 1000;\n    return Math.max(0, secs);\n  }\n\n  // we use `pause` attribute for allowing preview mode by executing `pause`\n  get isPaused() {\n    return this.getAttribute('paused') === 'true';\n  }\n\n  init() {\n    super.init?.();\n\n    this.#timeRemains = this.seconds;\n  }\n\n  startInterval() {\n    const intervalCycle = () => {\n      this.#decreaseInterval();\n      if (!this.#timeRemains) this.stop();\n      this.#updateDisplay(this.#timeRemains);\n    };\n\n    if (this.#timeRemains) {\n      this.#intervalId = setInterval(intervalCycle, DEFAULT_INTERVAL);\n    } else {\n      this.stop();\n    }\n  }\n\n  stopInterval() {\n    clearInterval(this.#intervalId);\n  }\n\n  #decreaseInterval() {\n    this.#timeRemains = this.#timeRemains - DEFAULT_INTERVAL;\n  }\n\n  reset() {\n    this.#timeRemains = this.seconds;\n    this.#updateDisplay(this.#timeRemains);\n\n    if (this.isPaused) return;\n\n    this.dispatchEvent(new CustomEvent('timer-started', { bubbles: true }));\n    this.startInterval();\n  }\n\n  stop() {\n    this.stopInterval();\n    this.#timeRemains = 0;\n    this.#updateDisplay(this.#timeRemains);\n    this.dispatchEvent(new CustomEvent('timer-ended', { bubbles: true }));\n  }\n\n  pause() {\n    this.setAttribute('paused', 'true');\n    this.stopInterval();\n  }\n\n  resume() {\n    this.removeAttribute('paused');\n    this.startInterval();\n  }\n\n  #updateDisplay(val) {\n    this.timer.textContent = formatTime(val);\n  }\n\n  #toggleIcon(val) {\n    this.icon.classList.toggle('hidden', val === 'true');\n  }\n\n  #handlePause(paused) {\n    setTimeout(() => {\n      if (paused) {\n        this.pause();\n      } else {\n        // we want to prevent a another interval from starting in case previous interval was not yet cleared\n        if (!this.#intervalId) {\n          this.resume();\n        }\n      }\n    });\n  }\n\n  attributeChangedCallback(attrName, oldValue, newValue) {\n    super.attributeChangedCallback?.(attrName, oldValue, newValue);\n\n    if (newValue !== oldValue) {\n      if (attrName === 'seconds') {\n        this.reset();\n      }\n      if (attrName === 'hide-icon') {\n        this.#toggleIcon(newValue);\n      }\n      if (attrName === 'paused') {\n        this.#handlePause(newValue === 'true');\n      }\n    }\n  }\n}\n\nconst { host, icon, timer } = {\n  host: { selector: () => ':host' },\n  icon: { selector: () => '.icon' },\n  timer: { selector: () => '.timer' },\n};\n\nexport const TimerClass = compose(\n  createStyleMixin({\n    mappings: {\n      fontSize: {},\n      iconSize: [\n        { ...icon, property: 'width' },\n        { ...icon, property: 'height' },\n      ],\n      fontFamily: {},\n      minHeight: {},\n      fontWeight: { ...timer },\n      lineHeight: { ...timer },\n      textColor: { ...timer, property: 'color' },\n      gap: {},\n      textAlign: { property: 'justify-content' },\n      hostWidth: { ...host, property: 'width' },\n      hostDirection: { ...host, property: 'direction' },\n      iconColor: { ...icon, property: IconClass.cssVarList.fill },\n    },\n  }),\n  draggableMixin,\n  componentNameValidationMixin,\n)(RawTimer);\n","import { componentName, TimerClass } from './TimerClass';\nimport '@descope-ui/descope-icon';\n\ncustomElements.define(componentName, TimerClass);\n\nexport { TimerClass, componentName };\n","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","import { componentName, ButtonClass } from './ButtonClass';\nimport '@vaadin/button';\n\ncustomElements.define(componentName, ButtonClass);\n\nexport { ButtonClass, componentName };\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","module.exports = \"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMWVtIiBoZWlnaHQ9IjFlbSIgdmlld0JveD0iMCAwIDEwMSAxMDEiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+IDxwYXRoIGQ9Ik01MC4zMzM0IDAuMzMzMjUyQzIyLjgzMzQgMC4zMzMyNTIgMC4zMzMzNzQgMjIuODMzMyAwLjMzMzM3NCA1MC4zMzMzQzAuMzMzMzc0IDc3LjgzMzMgMjIuODMzNCAxMDAuMzMzIDUwLjMzMzQgMTAwLjMzM0M3Ny44MzM0IDEwMC4zMzMgMTAwLjMzMyA3Ny44MzMzIDEwMC4zMzMgNTAuMzMzM0MxMDAuMzMzIDIyLjgzMzMgNzcuODMzNCAwLjMzMzI1MiA1MC4zMzM0IDAuMzMzMjUyWk01MC4zMzM0IDg3LjgzMzNDMjkuNzA4NCA4Ny44MzMzIDEyLjgzMzQgNzAuOTU4MyAxMi44MzM0IDUwLjMzMzNDMTIuODMzNCAyOS43MDgzIDI5LjcwODQgMTIuODMzMyA1MC4zMzM0IDEyLjgzMzNDNzAuOTU4NCAxMi44MzMzIDg3LjgzMzQgMjkuNzA4MyA4Ny44MzM0IDUwLjMzMzNDODcuODMzNCA3MC45NTgzIDcwLjk1ODQgODcuODMzMyA1MC4zMzM0IDg3LjgzMzNaIiBmaWxsPSIjMTgxQTFDIi8+IDxwYXRoIGQ9Ik01MC4zMzI4IDE5LjA4MzNINDQuMDgyOFY1Ni41ODMySDc1LjMzMjhWNTAuMzMzMkg1MC4zMzI4VjE5LjA4MzNaIiBmaWxsPSIjMTgxQTFDIi8+IDwvc3ZnPiA=\"","import { componentName, IconClass } from './IconClass';\n\ncustomElements.define(componentName, IconClass);\n\nexport { IconClass, componentName };\n","import {\n  createStyleMixin,\n  draggableMixin,\n  componentNameValidationMixin,\n} from '@descope-ui/common/components-mixins';\nimport { createBaseClass } from '@descope-ui/common/base-classes';\nimport { compose } from '@descope-ui/common/utils';\nimport {\n  forwardAttrs,\n  getComponentName,\n  injectStyle,\n} from '@descope-ui/common/components-helpers';\n\nexport const componentName = getComponentName('timer-button');\n\nconst buttonAttrs = [\n  'button-variant',\n  'button-mode',\n  'size',\n  'text-align',\n  'full-width',\n];\n\nconst mapButtonAttrs = {\n  'button-variant': 'variant',\n  'button-mode': 'mode',\n};\n\nconst timerAttrs = [\n  'timer-seconds',\n  'timer-hide-icon',\n  'timer-paused',\n  'size',\n  'text-align',\n  'full-width',\n];\n\nconst mapTimerAttrs = {\n  'timer-seconds': 'seconds',\n  'timer-hide-icon': 'hide-icon',\n  'timer-paused': 'paused',\n};\n\nconst BaseClass = createBaseClass({\n  componentName,\n  baseSelector: ':host > div',\n});\n\nclass RawTimerButton extends BaseClass {\n  constructor() {\n    super();\n\n    this.attachShadow({ mode: 'open' }).innerHTML = `\n      <div class=\"wrapper\">\n        <descope-timer class=\"timer\"></descope-timer>\n        <descope-button class=\"button\" disabled=\"true\">\n          <slot></slot>\n        </descope-button>\n      </div>\n\t\t`;\n\n    injectStyle(\n      `\n      :host {\n        display: inline-flex;\n      }\n      .wrapper {\n        display: flex;\n        flex-direction: column;\n        gap: 0.5em;\n        align-items: center;\n        width: 100%;\n      }\n      .timer {\n        flex: 1;\n      }\n    `,\n      this,\n    );\n\n    this.timer = this.shadowRoot.querySelector('.timer');\n    this.button = this.shadowRoot.querySelector('.button');\n\n    this.timer.addEventListener('timer-started', () => this.onTimerStarted());\n    this.timer.addEventListener('timer-ended', () => this.onTimerEnded());\n\n    this.button.addEventListener('click', this.onClick.bind(this));\n  }\n\n  set onclick(val) {\n    this.button.onclick = val;\n  }\n\n  init() {\n    super.init?.();\n\n    forwardAttrs(this, this.button, {\n      includeAttrs: buttonAttrs,\n      mapAttrs: mapButtonAttrs,\n    });\n\n    forwardAttrs(this, this.timer, {\n      includeAttrs: timerAttrs,\n      mapAttrs: mapTimerAttrs,\n    });\n\n    // When we sync attributes, the `disabled` attribute is being compared to the attribute\n    // on Vaadin component; since the Vaadin component has no `disabled` attribute, we sync\n    // that back to our component.\n    // This is pending a more generic fix in the way we sync attibutes.\n    this.button.shadowRoot\n      .querySelector('vaadin-button')\n      .setAttribute('disabled', 'true');\n  }\n\n  onTimerStarted() {\n    this.toggleButtonDisable(true);\n  }\n\n  onTimerEnded() {\n    this.toggleButtonDisable(false);\n  }\n\n  onClick() {\n    this.timer.reset();\n  }\n\n  toggleButtonDisable(isDisabled) {\n    setTimeout(() => {\n      isDisabled\n        ? this.button.setAttribute('disabled', 'true')\n        : this.button.removeAttribute('disabled');\n    });\n  }\n}\n\nconst { host } = {\n  host: { selector: () => ':host' },\n  icon: { selector: '.icon' },\n  timer: { selector: '.timer' },\n};\n\nexport const TimerButtonClass = compose(\n  createStyleMixin({\n    mappings: {\n      gap: {},\n      flexDirection: {},\n      hostWidth: { ...host, property: 'width' },\n      hostDirection: { ...host, property: 'direction' },\n    },\n  }),\n  draggableMixin,\n  componentNameValidationMixin,\n)(RawTimerButton);\n","import { componentName, TimerButtonClass } from './TimerButtonClass';\nimport '@descope-ui/descope-button';\nimport '@descope-ui/descope-timer';\n\ncustomElements.define(componentName, TimerButtonClass);\n\nexport { TimerButtonClass, 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"],"names":["clickableMixin","superclass","isLoading","this","getAttribute","click","super","fmt","val","pad","String","padStart","componentName","observedAttributes","BaseClass","baseSelector","host","icon","timer","selector","TimerClass","mappings","fontSize","iconSize","property","fontFamily","minHeight","fontWeight","lineHeight","textColor","gap","textAlign","hostWidth","hostDirection","iconColor","IconClass","cssVarList","fill","concat","constructor","attachShadow","mode","innerHTML","shadowRoot","querySelector","seconds","secs","parseInt","Math","max","isPaused","init","startInterval","setInterval","stop","stopInterval","clearInterval","reset","dispatchEvent","CustomEvent","bubbles","pause","setAttribute","resume","removeAttribute","textContent","ms","totalSeconds","floor","hours","secondsInMinute","minutes","join","formatTime","classList","toggle","paused","setTimeout","attributeChangedCallback","attrName","oldValue","newValue","customElements","define","label","slottedIcon","loadingIndicatorStyles","ButtonClass","hostHeight","cursor","backgroundColor","outlineOffset","outlineColor","outlineStyle","outlineWidth","borderRadius","borderColor","borderStyle","borderWidth","verticalPadding","horizontalPadding","fallback","labelTextColor","labelTextDecoration","labelSpacing","slots","wrappedEleName","style","excludeAttrsSync","color","createSvgEle","text","clean","sanitize","USE_PROFILES","svg","svgFilters","DOMParser","parseFromString","createIcon","async","src","ele","startsWith","isBase64Svg","svgXml","atob","slice","base64Prefix","path","match","getFileExtension","fetchedSrc","fetch","document","createElement","createImgEle","setProperty","module","exports","buttonAttrs","mapButtonAttrs","timerAttrs","mapTimerAttrs","TimerButtonClass","flexDirection","button","addEventListener","onTimerStarted","onTimerEnded","onClick","bind","onclick","includeAttrs","mapAttrs","toggleButtonDisable","isDisabled","RawIcon","toggleVisibility","isVisible","display","updateFillColor","node","querySelectorAll","forEach","then","res","clonedNode","cloneNode","appendChild"],"sourceRoot":""}
+{"version":3,"file":"descope-timer-button.js","mappings":"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","sources":["webpack://@descope/web-components-ui/../components/descope-button/src/component/clickableMixin.js","webpack://@descope/web-components-ui/../components/descope-timer/src/component/helpers.js","webpack://@descope/web-components-ui/../components/descope-timer/src/component/TimerClass.js","webpack://@descope/web-components-ui/../components/descope-timer/src/component/index.js","webpack://@descope/web-components-ui/../components/descope-button/src/component/ButtonClass.js","webpack://@descope/web-components-ui/../components/descope-button/src/component/index.js","webpack://@descope/web-components-ui/../components/descope-icon/src/component/helpers.js","webpack://@descope/web-components-ui/../components/descope-timer/src/component/clock.svg","webpack://@descope/web-components-ui/../components/descope-icon/src/component/index.js","webpack://@descope/web-components-ui/../components/descope-timer-button/src/component/TimerButtonClass.js","webpack://@descope/web-components-ui/../components/descope-timer-button/src/component/index.js","webpack://@descope/web-components-ui/../components/descope-icon/src/component/IconClass.js"],"sourcesContent":["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","const fmt = (val, pad = 2) => String(val).padStart(pad, '0');\n\nexport const formatTime = (ms = 0) => {\n  const totalSeconds = Math.floor(ms / 1000);\n\n  const secondsInMinute = 60;\n  const secondsInHour = secondsInMinute * 60;\n\n  const hours = Math.floor(totalSeconds / secondsInHour);\n  const minutes = Math.floor((totalSeconds % secondsInHour) / secondsInMinute);\n  const seconds = totalSeconds % secondsInMinute;\n\n  const timeParts = [...(hours ? [fmt(hours)] : []), fmt(minutes), fmt(seconds)];\n\n  return timeParts.join(':');\n};\n","import {\n  createStyleMixin,\n  draggableMixin,\n  componentNameValidationMixin,\n} from '@descope-ui/common/components-mixins';\nimport { createBaseClass } from '@descope-ui/common/base-classes';\nimport { compose } from '@descope-ui/common/utils';\nimport {\n  getComponentName,\n  injectStyle,\n} from '@descope-ui/common/components-helpers';\nimport clockIcon from './clock.svg';\nimport { IconClass } from '@descope-ui/descope-icon/class';\nimport { formatTime } from './helpers';\n\nexport const componentName = getComponentName('timer');\n\nconst observedAttributes = ['seconds', 'hide-icon', 'paused'];\n\nconst BaseClass = createBaseClass({\n  componentName,\n  baseSelector: ':host > .wrapper',\n});\n\nconst DEFAULT_INTERVAL = 1000;\n\nclass RawTimer extends BaseClass {\n  #timeRemains = 0;\n\n  #intervalId;\n\n  static get observedAttributes() {\n    return observedAttributes.concat(BaseClass.observedAttributes || []);\n  }\n\n  constructor() {\n    super();\n\n    this.attachShadow({ mode: 'open' }).innerHTML = `\n      <div class=\"wrapper\">\n        <descope-icon src=${clockIcon} class=\"icon\"></descope-icon>\n        <div class=\"timer\"></div>\n      </div>\n\t\t`;\n\n    injectStyle(\n      `\n      :host {\n        display: inline-flex;\n        user-select: none;\n        -webkit-user-select: none;\n      }\n      .wrapper {\n        display: flex;\n        align-items: center;\n        flex-direction: row;\n        width: 100%;\n      }\n      .hidden {\n        display: none;\n      }\n    `,\n      this,\n    );\n\n    this.icon = this.shadowRoot.querySelector('.icon');\n    this.timer = this.shadowRoot.querySelector('.timer');\n  }\n\n  get seconds() {\n    const val = this.getAttribute('seconds');\n    const secs = parseInt(val || 0, 10) * 1000;\n    return Math.max(0, secs);\n  }\n\n  // we use `pause` attribute for allowing preview mode by executing `pause`\n  get isPaused() {\n    return this.getAttribute('paused') === 'true';\n  }\n\n  init() {\n    super.init?.();\n\n    this.#timeRemains = this.seconds;\n  }\n\n  startInterval() {\n    const intervalCycle = () => {\n      this.#decreaseInterval();\n      if (!this.#timeRemains) this.stop();\n      this.#updateDisplay(this.#timeRemains);\n    };\n\n    if (this.#timeRemains) {\n      this.#intervalId = setInterval(intervalCycle, DEFAULT_INTERVAL);\n    } else {\n      this.stop();\n    }\n  }\n\n  stopInterval() {\n    clearInterval(this.#intervalId);\n  }\n\n  #decreaseInterval() {\n    this.#timeRemains = this.#timeRemains - DEFAULT_INTERVAL;\n  }\n\n  reset() {\n    this.#timeRemains = this.seconds;\n    this.#updateDisplay(this.#timeRemains);\n\n    if (this.isPaused) return;\n\n    this.dispatchEvent(new CustomEvent('timer-started', { bubbles: true }));\n    this.startInterval();\n  }\n\n  stop() {\n    this.stopInterval();\n    this.#timeRemains = 0;\n    this.#updateDisplay(this.#timeRemains);\n    this.dispatchEvent(new CustomEvent('timer-ended', { bubbles: true }));\n  }\n\n  pause() {\n    this.setAttribute('paused', 'true');\n    this.stopInterval();\n  }\n\n  resume() {\n    this.removeAttribute('paused');\n    this.startInterval();\n  }\n\n  #updateDisplay(val) {\n    this.timer.textContent = formatTime(val);\n  }\n\n  #toggleIcon(val) {\n    this.icon.classList.toggle('hidden', val === 'true');\n  }\n\n  #handlePause(paused) {\n    setTimeout(() => {\n      if (paused) {\n        this.pause();\n      } else {\n        // we want to prevent a another interval from starting in case previous interval was not yet cleared\n        if (!this.#intervalId) {\n          this.resume();\n        }\n      }\n    });\n  }\n\n  attributeChangedCallback(attrName, oldValue, newValue) {\n    super.attributeChangedCallback?.(attrName, oldValue, newValue);\n\n    if (newValue !== oldValue) {\n      if (attrName === 'seconds') {\n        this.reset();\n      }\n      if (attrName === 'hide-icon') {\n        this.#toggleIcon(newValue);\n      }\n      if (attrName === 'paused') {\n        this.#handlePause(newValue === 'true');\n      }\n    }\n  }\n}\n\nconst { host, icon, timer } = {\n  host: { selector: () => ':host' },\n  icon: { selector: () => '.icon' },\n  timer: { selector: () => '.timer' },\n};\n\nexport const TimerClass = compose(\n  createStyleMixin({\n    mappings: {\n      fontSize: {},\n      iconSize: [\n        { ...icon, property: 'width' },\n        { ...icon, property: 'height' },\n      ],\n      fontFamily: {},\n      minHeight: {},\n      fontWeight: { ...timer },\n      lineHeight: { ...timer },\n      textColor: { ...timer, property: 'color' },\n      gap: {},\n      textAlign: { property: 'justify-content' },\n      hostWidth: { ...host, property: 'width' },\n      hostDirection: { ...host, property: 'direction' },\n      iconColor: { ...icon, property: IconClass.cssVarList.fill },\n    },\n  }),\n  draggableMixin,\n  componentNameValidationMixin,\n)(RawTimer);\n","import { componentName, TimerClass } from './TimerClass';\nimport '@descope-ui/descope-icon';\n\ncustomElements.define(componentName, TimerClass);\n\nexport { TimerClass, componentName };\n","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","import { componentName, ButtonClass } from './ButtonClass';\nimport '@vaadin/button';\n\ncustomElements.define(componentName, ButtonClass);\n\nexport { ButtonClass, componentName };\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","module.exports = \"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMWVtIiBoZWlnaHQ9IjFlbSIgdmlld0JveD0iMCAwIDEwNCAxMDQiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+IDxwYXRoIGQ9Ik01MC4zMzM0IDAuMzMzMjUyQzIyLjgzMzQgMC4zMzMyNTIgMC4zMzMzNzQgMjIuODMzMyAwLjMzMzM3NCA1MC4zMzMzQzAuMzMzMzc0IDc3LjgzMzMgMjIuODMzNCAxMDAuMzMzIDUwLjMzMzQgMTAwLjMzM0M3Ny44MzM0IDEwMC4zMzMgMTAwLjMzMyA3Ny44MzMzIDEwMC4zMzMgNTAuMzMzM0MxMDAuMzMzIDIyLjgzMzMgNzcuODMzNCAwLjMzMzI1MiA1MC4zMzM0IDAuMzMzMjUyWk01MC4zMzM0IDg3LjgzMzNDMjkuNzA4NCA4Ny44MzMzIDEyLjgzMzQgNzAuOTU4MyAxMi44MzM0IDUwLjMzMzNDMTIuODMzNCAyOS43MDgzIDI5LjcwODQgMTIuODMzMyA1MC4zMzM0IDEyLjgzMzNDNzAuOTU4NCAxMi44MzMzIDg3LjgzMzQgMjkuNzA4MyA4Ny44MzM0IDUwLjMzMzNDODcuODMzNCA3MC45NTgzIDcwLjk1ODQgODcuODMzMyA1MC4zMzM0IDg3LjgzMzNaIiBmaWxsPSIjMTgxQTFDIi8+IDxwYXRoIGQ9Ik01MC4zMzI4IDE5LjA4MzNINDQuMDgyOFY1Ni41ODMySDc1LjMzMjhWNTAuMzMzMkg1MC4zMzI4VjE5LjA4MzNaIiBmaWxsPSIjMTgxQTFDIi8+IDwvc3ZnPiA=\"","import { componentName, IconClass } from './IconClass';\n\ncustomElements.define(componentName, IconClass);\n\nexport { IconClass, componentName };\n","import {\n  createStyleMixin,\n  draggableMixin,\n  componentNameValidationMixin,\n} from '@descope-ui/common/components-mixins';\nimport { createBaseClass } from '@descope-ui/common/base-classes';\nimport { compose } from '@descope-ui/common/utils';\nimport {\n  forwardAttrs,\n  getComponentName,\n  injectStyle,\n} from '@descope-ui/common/components-helpers';\n\nexport const componentName = getComponentName('timer-button');\n\nconst buttonAttrs = [\n  'button-variant',\n  'button-mode',\n  'size',\n  'text-align',\n  'full-width',\n];\n\nconst mapButtonAttrs = {\n  'button-variant': 'variant',\n  'button-mode': 'mode',\n};\n\nconst timerAttrs = [\n  'timer-seconds',\n  'timer-hide-icon',\n  'timer-paused',\n  'size',\n  'text-align',\n  'full-width',\n];\n\nconst mapTimerAttrs = {\n  'timer-seconds': 'seconds',\n  'timer-hide-icon': 'hide-icon',\n  'timer-paused': 'paused',\n};\n\nconst BaseClass = createBaseClass({\n  componentName,\n  baseSelector: ':host > div',\n});\n\nclass RawTimerButton extends BaseClass {\n  constructor() {\n    super();\n\n    this.attachShadow({ mode: 'open' }).innerHTML = `\n      <div class=\"wrapper\">\n        <descope-timer class=\"timer\"></descope-timer>\n        <descope-button class=\"button\" disabled=\"true\">\n          <slot></slot>\n        </descope-button>\n      </div>\n\t\t`;\n\n    injectStyle(\n      `\n      :host {\n        display: inline-flex;\n      }\n      .wrapper {\n        display: flex;\n        flex-direction: column;\n        gap: 0.5em;\n        align-items: center;\n        width: 100%;\n      }\n      .timer {\n        flex: 1;\n      }\n    `,\n      this,\n    );\n\n    this.timer = this.shadowRoot.querySelector('.timer');\n    this.button = this.shadowRoot.querySelector('.button');\n\n    this.timer.addEventListener('timer-started', () => this.onTimerStarted());\n    this.timer.addEventListener('timer-ended', () => this.onTimerEnded());\n\n    this.button.addEventListener('click', this.onClick.bind(this));\n  }\n\n  set onclick(val) {\n    this.button.onclick = val;\n  }\n\n  init() {\n    super.init?.();\n\n    forwardAttrs(this, this.button, {\n      includeAttrs: buttonAttrs,\n      mapAttrs: mapButtonAttrs,\n    });\n\n    forwardAttrs(this, this.timer, {\n      includeAttrs: timerAttrs,\n      mapAttrs: mapTimerAttrs,\n    });\n\n    // When we sync attributes, the `disabled` attribute is being compared to the attribute\n    // on Vaadin component; since the Vaadin component has no `disabled` attribute, we sync\n    // that back to our component.\n    // This is pending a more generic fix in the way we sync attibutes.\n    this.button.shadowRoot\n      .querySelector('vaadin-button')\n      .setAttribute('disabled', 'true');\n  }\n\n  onTimerStarted() {\n    this.toggleButtonDisable(true);\n  }\n\n  onTimerEnded() {\n    this.toggleButtonDisable(false);\n  }\n\n  onClick() {\n    this.timer.reset();\n  }\n\n  toggleButtonDisable(isDisabled) {\n    setTimeout(() => {\n      isDisabled\n        ? this.button.setAttribute('disabled', 'true')\n        : this.button.removeAttribute('disabled');\n    });\n  }\n}\n\nconst { host } = {\n  host: { selector: () => ':host' },\n  icon: { selector: '.icon' },\n  timer: { selector: '.timer' },\n};\n\nexport const TimerButtonClass = compose(\n  createStyleMixin({\n    mappings: {\n      gap: {},\n      flexDirection: {},\n      hostWidth: { ...host, property: 'width' },\n      hostDirection: { ...host, property: 'direction' },\n    },\n  }),\n  draggableMixin,\n  componentNameValidationMixin,\n)(RawTimerButton);\n","import { componentName, TimerButtonClass } from './TimerButtonClass';\nimport '@descope-ui/descope-button';\nimport '@descope-ui/descope-timer';\n\ncustomElements.define(componentName, TimerButtonClass);\n\nexport { TimerButtonClass, 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      alignItems: {}\n    },\n  }),\n  draggableMixin,\n  componentNameValidationMixin\n)(RawIcon);\n"],"names":["clickableMixin","superclass","isLoading","this","getAttribute","click","super","fmt","val","pad","String","padStart","componentName","observedAttributes","BaseClass","baseSelector","host","icon","timer","selector","TimerClass","mappings","fontSize","iconSize","property","fontFamily","minHeight","fontWeight","lineHeight","textColor","gap","textAlign","hostWidth","hostDirection","iconColor","IconClass","cssVarList","fill","concat","constructor","attachShadow","mode","innerHTML","shadowRoot","querySelector","seconds","secs","parseInt","Math","max","isPaused","init","startInterval","setInterval","stop","stopInterval","clearInterval","reset","dispatchEvent","CustomEvent","bubbles","pause","setAttribute","resume","removeAttribute","textContent","ms","totalSeconds","floor","hours","secondsInMinute","minutes","join","formatTime","classList","toggle","paused","setTimeout","attributeChangedCallback","attrName","oldValue","newValue","customElements","define","label","slottedIcon","loadingIndicatorStyles","ButtonClass","hostHeight","cursor","backgroundColor","outlineOffset","outlineColor","outlineStyle","outlineWidth","borderRadius","borderColor","borderStyle","borderWidth","verticalPadding","horizontalPadding","fallback","labelTextColor","labelTextDecoration","labelSpacing","slots","wrappedEleName","style","excludeAttrsSync","color","createSvgEle","text","clean","sanitize","USE_PROFILES","svg","svgFilters","DOMParser","parseFromString","createIcon","async","src","ele","startsWith","isBase64Svg","svgXml","atob","slice","base64Prefix","path","match","getFileExtension","fetchedSrc","fetch","document","createElement","createImgEle","setProperty","module","exports","buttonAttrs","mapButtonAttrs","timerAttrs","mapTimerAttrs","TimerButtonClass","flexDirection","button","addEventListener","onTimerStarted","onTimerEnded","onClick","bind","onclick","includeAttrs","mapAttrs","toggleButtonDisable","isDisabled","RawIcon","toggleVisibility","isVisible","display","updateFillColor","node","querySelectorAll","forEach","then","res","clonedNode","cloneNode","appendChild","alignItems"],"sourceRoot":""}

package/dist/umd/descope-timer.js

@@ -1,2 +1,2 @@
-(self.webpackChunk_descope_web_components_ui=self.webpackChunk_descope_web_components_ui||[]).push([[2250,6724],{15887:(t,e,s)=>{"use strict";s.r(e),s.d(e,{TimerClass:()=>m,componentName:()=>h});var i=s(88961),n=s(72270),r=s(63200),o=s(25964),a=s(44006),M=s.n(a),l=s(98538);const c=(t,e=2)=>String(t).padStart(e,"0"),h=(0,o.xE)("timer"),z=["seconds","hide-icon","paused"],u=(0,n.qu)({componentName:h,baseSelector:":host > .wrapper"}),{host:d,icon:p,timer:g}={host:{selector:()=>":host"},icon:{selector:()=>".icon"},timer:{selector:()=>".timer"}},m=(0,r.Zz)((0,i.RF)({mappings:{fontSize:{},iconSize:[{...p,property:"width"},{...p,property:"height"}],fontFamily:{},minHeight:{},fontWeight:{...g},lineHeight:{...g},textColor:{...g,property:"color"},gap:{},textAlign:{property:"justify-content"},hostWidth:{...d,property:"width"},hostDirection:{...d,property:"direction"},iconColor:{...p,property:l.S.cssVarList.fill}}}),i.VO,i.tQ)(class extends u{#t=0;#e;static get observedAttributes(){return z.concat(u.observedAttributes||[])}constructor(){super(),this.attachShadow({mode:"open"}).innerHTML=`\n      <div class="wrapper">\n        <descope-icon src=${M()} class="icon"></descope-icon>\n        <div class="timer"></div>\n      </div>\n\t\t`,(0,o.fz)("\n      :host {\n        display: inline-flex;\n        user-select: none;\n        -webkit-user-select: none;\n      }\n      .wrapper {\n        display: flex;\n        align-items: center;\n        flex-direction: row;\n        width: 100%;\n      }\n      .hidden {\n        display: none;\n      }\n    ",this),this.icon=this.shadowRoot.querySelector(".icon"),this.timer=this.shadowRoot.querySelector(".timer")}get seconds(){const t=this.getAttribute("seconds"),e=1e3*parseInt(t||0,10);return Math.max(0,e)}get isPaused(){return"true"===this.getAttribute("paused")}init(){super.init?.(),this.#t=this.seconds}startInterval(){this.#t?this.#e=setInterval((()=>{this.#s(),this.#t||this.stop(),this.#i(this.#t)}),1e3):this.stop()}stopInterval(){clearInterval(this.#e)}#s(){this.#t=this.#t-1e3}reset(){this.#t=this.seconds,this.#i(this.#t),this.isPaused||(this.dispatchEvent(new CustomEvent("timer-started",{bubbles:!0})),this.startInterval())}stop(){this.stopInterval(),this.#t=0,this.#i(this.#t),this.dispatchEvent(new CustomEvent("timer-ended",{bubbles:!0}))}pause(){this.setAttribute("paused","true"),this.stopInterval()}resume(){this.removeAttribute("paused"),this.startInterval()}#i(t){this.timer.textContent=((t=0)=>{const e=Math.floor(t/1e3),s=Math.floor(e/3600),i=Math.floor(e%3600/60),n=e%60;return[...s?[c(s)]:[],c(i),c(n)].join(":")})(t)}#n(t){this.icon.classList.toggle("hidden","true"===t)}#r(t){setTimeout((()=>{t?this.pause():this.#e||this.resume()}))}attributeChangedCallback(t,e,s){super.attributeChangedCallback?.(t,e,s),s!==e&&("seconds"===t&&this.reset(),"hide-icon"===t&&this.#n(s),"paused"===t&&this.#r("true"===s))}});s(56737),customElements.define(h,m)},31004:(t,e,s)=>{"use strict";s.d(e,{w:()=>r});var i=s(25414);const n=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 s=atob(t.slice(26));e=n(s)}else if("svg"===(t=>{const e=t.match(/\.([0-9a-z]+)(?:[\\?#]|$)/i);return e?e[1]:null})(t)){const s=await fetch(t),i=await s.text();e=n(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}}},44006:t=>{t.exports="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMWVtIiBoZWlnaHQ9IjFlbSIgdmlld0JveD0iMCAwIDEwMSAxMDEiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+IDxwYXRoIGQ9Ik01MC4zMzM0IDAuMzMzMjUyQzIyLjgzMzQgMC4zMzMyNTIgMC4zMzMzNzQgMjIuODMzMyAwLjMzMzM3NCA1MC4zMzMzQzAuMzMzMzc0IDc3LjgzMzMgMjIuODMzNCAxMDAuMzMzIDUwLjMzMzQgMTAwLjMzM0M3Ny44MzM0IDEwMC4zMzMgMTAwLjMzMyA3Ny44MzMzIDEwMC4zMzMgNTAuMzMzM0MxMDAuMzMzIDIyLjgzMzMgNzcuODMzNCAwLjMzMzI1MiA1MC4zMzM0IDAuMzMzMjUyWk01MC4zMzM0IDg3LjgzMzNDMjkuNzA4NCA4Ny44MzMzIDEyLjgzMzQgNzAuOTU4MyAxMi44MzM0IDUwLjMzMzNDMTIuODMzNCAyOS43MDgzIDI5LjcwODQgMTIuODMzMyA1MC4zMzM0IDEyLjgzMzNDNzAuOTU4NCAxMi44MzMzIDg3LjgzMzQgMjkuNzA4MyA4Ny44MzM0IDUwLjMzMzNDODcuODMzNCA3MC45NTgzIDcwLjk1ODQgODcuODMzMyA1MC4zMzM0IDg3LjgzMzNaIiBmaWxsPSIjMTgxQTFDIi8+IDxwYXRoIGQ9Ik01MC4zMzI4IDE5LjA4MzNINDQuMDgyOFY1Ni41ODMySDc1LjMzMjhWNTAuMzMzMkg1MC4zMzI4VjE5LjA4MzNaIiBmaWxsPSIjMTgxQTFDIi8+IDwvc3ZnPiA="},56737:(t,e,s)=>{"use strict";s.r(e),s.d(e,{IconClass:()=>i.S,componentName:()=>i.T});var i=s(98538);customElements.define(i.T,i.S)},98538:(t,e,s)=>{"use strict";s.d(e,{S:()=>c,T:()=>M});var i=s(88961),n=s(72270),r=s(63200),o=s(25964),a=s(31004);const M=(0,o.xE)("icon");class l extends((0,n.qu)({componentName:M,baseSelector:"slot"})){static get observedAttributes(){return["src"]}#o;constructor(){super(),this.attachShadow({mode:"open"}).innerHTML="\n\t\t<slot></slot>\n\t",(0,o.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,s){super.attributeChangedCallback?.(t,e,s),e!==s&&"src"===t&&(this.toggleVisibility(s),(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)(l)}}]);
+(self.webpackChunk_descope_web_components_ui=self.webpackChunk_descope_web_components_ui||[]).push([[2250,6724],{15887:(t,e,s)=>{"use strict";s.r(e),s.d(e,{TimerClass:()=>m,componentName:()=>h});var i=s(88961),n=s(72270),r=s(63200),o=s(25964),a=s(44006),M=s.n(a),l=s(98538);const c=(t,e=2)=>String(t).padStart(e,"0"),h=(0,o.xE)("timer"),z=["seconds","hide-icon","paused"],u=(0,n.qu)({componentName:h,baseSelector:":host > .wrapper"}),{host:d,icon:p,timer:g}={host:{selector:()=>":host"},icon:{selector:()=>".icon"},timer:{selector:()=>".timer"}},m=(0,r.Zz)((0,i.RF)({mappings:{fontSize:{},iconSize:[{...p,property:"width"},{...p,property:"height"}],fontFamily:{},minHeight:{},fontWeight:{...g},lineHeight:{...g},textColor:{...g,property:"color"},gap:{},textAlign:{property:"justify-content"},hostWidth:{...d,property:"width"},hostDirection:{...d,property:"direction"},iconColor:{...p,property:l.S.cssVarList.fill}}}),i.VO,i.tQ)(class extends u{#t=0;#e;static get observedAttributes(){return z.concat(u.observedAttributes||[])}constructor(){super(),this.attachShadow({mode:"open"}).innerHTML=`\n      <div class="wrapper">\n        <descope-icon src=${M()} class="icon"></descope-icon>\n        <div class="timer"></div>\n      </div>\n\t\t`,(0,o.fz)("\n      :host {\n        display: inline-flex;\n        user-select: none;\n        -webkit-user-select: none;\n      }\n      .wrapper {\n        display: flex;\n        align-items: center;\n        flex-direction: row;\n        width: 100%;\n      }\n      .hidden {\n        display: none;\n      }\n    ",this),this.icon=this.shadowRoot.querySelector(".icon"),this.timer=this.shadowRoot.querySelector(".timer")}get seconds(){const t=this.getAttribute("seconds"),e=1e3*parseInt(t||0,10);return Math.max(0,e)}get isPaused(){return"true"===this.getAttribute("paused")}init(){super.init?.(),this.#t=this.seconds}startInterval(){this.#t?this.#e=setInterval((()=>{this.#s(),this.#t||this.stop(),this.#i(this.#t)}),1e3):this.stop()}stopInterval(){clearInterval(this.#e)}#s(){this.#t=this.#t-1e3}reset(){this.#t=this.seconds,this.#i(this.#t),this.isPaused||(this.dispatchEvent(new CustomEvent("timer-started",{bubbles:!0})),this.startInterval())}stop(){this.stopInterval(),this.#t=0,this.#i(this.#t),this.dispatchEvent(new CustomEvent("timer-ended",{bubbles:!0}))}pause(){this.setAttribute("paused","true"),this.stopInterval()}resume(){this.removeAttribute("paused"),this.startInterval()}#i(t){this.timer.textContent=((t=0)=>{const e=Math.floor(t/1e3),s=Math.floor(e/3600),i=Math.floor(e%3600/60),n=e%60;return[...s?[c(s)]:[],c(i),c(n)].join(":")})(t)}#n(t){this.icon.classList.toggle("hidden","true"===t)}#r(t){setTimeout((()=>{t?this.pause():this.#e||this.resume()}))}attributeChangedCallback(t,e,s){super.attributeChangedCallback?.(t,e,s),s!==e&&("seconds"===t&&this.reset(),"hide-icon"===t&&this.#n(s),"paused"===t&&this.#r("true"===s))}});s(56737),customElements.define(h,m)},31004:(t,e,s)=>{"use strict";s.d(e,{w:()=>r});var i=s(25414);const n=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 s=atob(t.slice(26));e=n(s)}else if("svg"===(t=>{const e=t.match(/\.([0-9a-z]+)(?:[\\?#]|$)/i);return e?e[1]:null})(t)){const s=await fetch(t),i=await s.text();e=n(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}}},44006:t=>{t.exports="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMWVtIiBoZWlnaHQ9IjFlbSIgdmlld0JveD0iMCAwIDEwNCAxMDQiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+IDxwYXRoIGQ9Ik01MC4zMzM0IDAuMzMzMjUyQzIyLjgzMzQgMC4zMzMyNTIgMC4zMzMzNzQgMjIuODMzMyAwLjMzMzM3NCA1MC4zMzMzQzAuMzMzMzc0IDc3LjgzMzMgMjIuODMzNCAxMDAuMzMzIDUwLjMzMzQgMTAwLjMzM0M3Ny44MzM0IDEwMC4zMzMgMTAwLjMzMyA3Ny44MzMzIDEwMC4zMzMgNTAuMzMzM0MxMDAuMzMzIDIyLjgzMzMgNzcuODMzNCAwLjMzMzI1MiA1MC4zMzM0IDAuMzMzMjUyWk01MC4zMzM0IDg3LjgzMzNDMjkuNzA4NCA4Ny44MzMzIDEyLjgzMzQgNzAuOTU4MyAxMi44MzM0IDUwLjMzMzNDMTIuODMzNCAyOS43MDgzIDI5LjcwODQgMTIuODMzMyA1MC4zMzM0IDEyLjgzMzNDNzAuOTU4NCAxMi44MzMzIDg3LjgzMzQgMjkuNzA4MyA4Ny44MzM0IDUwLjMzMzNDODcuODMzNCA3MC45NTgzIDcwLjk1ODQgODcuODMzMyA1MC4zMzM0IDg3LjgzMzNaIiBmaWxsPSIjMTgxQTFDIi8+IDxwYXRoIGQ9Ik01MC4zMzI4IDE5LjA4MzNINDQuMDgyOFY1Ni41ODMySDc1LjMzMjhWNTAuMzMzMkg1MC4zMzI4VjE5LjA4MzNaIiBmaWxsPSIjMTgxQTFDIi8+IDwvc3ZnPiA="},56737:(t,e,s)=>{"use strict";s.r(e),s.d(e,{IconClass:()=>i.S,componentName:()=>i.T});var i=s(98538);customElements.define(i.T,i.S)},98538:(t,e,s)=>{"use strict";s.d(e,{S:()=>c,T:()=>M});var i=s(88961),n=s(72270),r=s(63200),o=s(25964),a=s(31004);const M=(0,o.xE)("icon");class l extends((0,n.qu)({componentName:M,baseSelector:"slot"})){static get observedAttributes(){return["src"]}#o;constructor(){super(),this.attachShadow({mode:"open"}).innerHTML="\n\t\t<slot></slot>\n\t",(0,o.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,s){super.attributeChangedCallback?.(t,e,s),e!==s&&"src"===t&&(this.toggleVisibility(s),(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:{},alignItems:{}}}),i.VO,i.tQ)(l)}}]);
 //# sourceMappingURL=descope-timer.js.map

package/dist/umd/descope-timer.js.map

@@ -1 +1 @@
-{"version":3,"file":"descope-timer.js","mappings":"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","sources":["webpack://@descope/web-components-ui/../components/descope-timer/src/component/helpers.js","webpack://@descope/web-components-ui/../components/descope-timer/src/component/TimerClass.js","webpack://@descope/web-components-ui/../components/descope-timer/src/component/index.js","webpack://@descope/web-components-ui/../components/descope-icon/src/component/helpers.js","webpack://@descope/web-components-ui/../components/descope-timer/src/component/clock.svg","webpack://@descope/web-components-ui/../components/descope-icon/src/component/index.js","webpack://@descope/web-components-ui/../components/descope-icon/src/component/IconClass.js"],"sourcesContent":["const fmt = (val, pad = 2) => String(val).padStart(pad, '0');\n\nexport const formatTime = (ms = 0) => {\n  const totalSeconds = Math.floor(ms / 1000);\n\n  const secondsInMinute = 60;\n  const secondsInHour = secondsInMinute * 60;\n\n  const hours = Math.floor(totalSeconds / secondsInHour);\n  const minutes = Math.floor((totalSeconds % secondsInHour) / secondsInMinute);\n  const seconds = totalSeconds % secondsInMinute;\n\n  const timeParts = [...(hours ? [fmt(hours)] : []), fmt(minutes), fmt(seconds)];\n\n  return timeParts.join(':');\n};\n","import {\n  createStyleMixin,\n  draggableMixin,\n  componentNameValidationMixin,\n} from '@descope-ui/common/components-mixins';\nimport { createBaseClass } from '@descope-ui/common/base-classes';\nimport { compose } from '@descope-ui/common/utils';\nimport {\n  getComponentName,\n  injectStyle,\n} from '@descope-ui/common/components-helpers';\nimport clockIcon from './clock.svg';\nimport { IconClass } from '@descope-ui/descope-icon/class';\nimport { formatTime } from './helpers';\n\nexport const componentName = getComponentName('timer');\n\nconst observedAttributes = ['seconds', 'hide-icon', 'paused'];\n\nconst BaseClass = createBaseClass({\n  componentName,\n  baseSelector: ':host > .wrapper',\n});\n\nconst DEFAULT_INTERVAL = 1000;\n\nclass RawTimer extends BaseClass {\n  #timeRemains = 0;\n\n  #intervalId;\n\n  static get observedAttributes() {\n    return observedAttributes.concat(BaseClass.observedAttributes || []);\n  }\n\n  constructor() {\n    super();\n\n    this.attachShadow({ mode: 'open' }).innerHTML = `\n      <div class=\"wrapper\">\n        <descope-icon src=${clockIcon} class=\"icon\"></descope-icon>\n        <div class=\"timer\"></div>\n      </div>\n\t\t`;\n\n    injectStyle(\n      `\n      :host {\n        display: inline-flex;\n        user-select: none;\n        -webkit-user-select: none;\n      }\n      .wrapper {\n        display: flex;\n        align-items: center;\n        flex-direction: row;\n        width: 100%;\n      }\n      .hidden {\n        display: none;\n      }\n    `,\n      this,\n    );\n\n    this.icon = this.shadowRoot.querySelector('.icon');\n    this.timer = this.shadowRoot.querySelector('.timer');\n  }\n\n  get seconds() {\n    const val = this.getAttribute('seconds');\n    const secs = parseInt(val || 0, 10) * 1000;\n    return Math.max(0, secs);\n  }\n\n  // we use `pause` attribute for allowing preview mode by executing `pause`\n  get isPaused() {\n    return this.getAttribute('paused') === 'true';\n  }\n\n  init() {\n    super.init?.();\n\n    this.#timeRemains = this.seconds;\n  }\n\n  startInterval() {\n    const intervalCycle = () => {\n      this.#decreaseInterval();\n      if (!this.#timeRemains) this.stop();\n      this.#updateDisplay(this.#timeRemains);\n    };\n\n    if (this.#timeRemains) {\n      this.#intervalId = setInterval(intervalCycle, DEFAULT_INTERVAL);\n    } else {\n      this.stop();\n    }\n  }\n\n  stopInterval() {\n    clearInterval(this.#intervalId);\n  }\n\n  #decreaseInterval() {\n    this.#timeRemains = this.#timeRemains - DEFAULT_INTERVAL;\n  }\n\n  reset() {\n    this.#timeRemains = this.seconds;\n    this.#updateDisplay(this.#timeRemains);\n\n    if (this.isPaused) return;\n\n    this.dispatchEvent(new CustomEvent('timer-started', { bubbles: true }));\n    this.startInterval();\n  }\n\n  stop() {\n    this.stopInterval();\n    this.#timeRemains = 0;\n    this.#updateDisplay(this.#timeRemains);\n    this.dispatchEvent(new CustomEvent('timer-ended', { bubbles: true }));\n  }\n\n  pause() {\n    this.setAttribute('paused', 'true');\n    this.stopInterval();\n  }\n\n  resume() {\n    this.removeAttribute('paused');\n    this.startInterval();\n  }\n\n  #updateDisplay(val) {\n    this.timer.textContent = formatTime(val);\n  }\n\n  #toggleIcon(val) {\n    this.icon.classList.toggle('hidden', val === 'true');\n  }\n\n  #handlePause(paused) {\n    setTimeout(() => {\n      if (paused) {\n        this.pause();\n      } else {\n        // we want to prevent a another interval from starting in case previous interval was not yet cleared\n        if (!this.#intervalId) {\n          this.resume();\n        }\n      }\n    });\n  }\n\n  attributeChangedCallback(attrName, oldValue, newValue) {\n    super.attributeChangedCallback?.(attrName, oldValue, newValue);\n\n    if (newValue !== oldValue) {\n      if (attrName === 'seconds') {\n        this.reset();\n      }\n      if (attrName === 'hide-icon') {\n        this.#toggleIcon(newValue);\n      }\n      if (attrName === 'paused') {\n        this.#handlePause(newValue === 'true');\n      }\n    }\n  }\n}\n\nconst { host, icon, timer } = {\n  host: { selector: () => ':host' },\n  icon: { selector: () => '.icon' },\n  timer: { selector: () => '.timer' },\n};\n\nexport const TimerClass = compose(\n  createStyleMixin({\n    mappings: {\n      fontSize: {},\n      iconSize: [\n        { ...icon, property: 'width' },\n        { ...icon, property: 'height' },\n      ],\n      fontFamily: {},\n      minHeight: {},\n      fontWeight: { ...timer },\n      lineHeight: { ...timer },\n      textColor: { ...timer, property: 'color' },\n      gap: {},\n      textAlign: { property: 'justify-content' },\n      hostWidth: { ...host, property: 'width' },\n      hostDirection: { ...host, property: 'direction' },\n      iconColor: { ...icon, property: IconClass.cssVarList.fill },\n    },\n  }),\n  draggableMixin,\n  componentNameValidationMixin,\n)(RawTimer);\n","import { componentName, TimerClass } from './TimerClass';\nimport '@descope-ui/descope-icon';\n\ncustomElements.define(componentName, TimerClass);\n\nexport { TimerClass, componentName };\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","module.exports = \"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMWVtIiBoZWlnaHQ9IjFlbSIgdmlld0JveD0iMCAwIDEwMSAxMDEiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+IDxwYXRoIGQ9Ik01MC4zMzM0IDAuMzMzMjUyQzIyLjgzMzQgMC4zMzMyNTIgMC4zMzMzNzQgMjIuODMzMyAwLjMzMzM3NCA1MC4zMzMzQzAuMzMzMzc0IDc3LjgzMzMgMjIuODMzNCAxMDAuMzMzIDUwLjMzMzQgMTAwLjMzM0M3Ny44MzM0IDEwMC4zMzMgMTAwLjMzMyA3Ny44MzMzIDEwMC4zMzMgNTAuMzMzM0MxMDAuMzMzIDIyLjgzMzMgNzcuODMzNCAwLjMzMzI1MiA1MC4zMzM0IDAuMzMzMjUyWk01MC4zMzM0IDg3LjgzMzNDMjkuNzA4NCA4Ny44MzMzIDEyLjgzMzQgNzAuOTU4MyAxMi44MzM0IDUwLjMzMzNDMTIuODMzNCAyOS43MDgzIDI5LjcwODQgMTIuODMzMyA1MC4zMzM0IDEyLjgzMzNDNzAuOTU4NCAxMi44MzMzIDg3LjgzMzQgMjkuNzA4MyA4Ny44MzM0IDUwLjMzMzNDODcuODMzNCA3MC45NTgzIDcwLjk1ODQgODcuODMzMyA1MC4zMzM0IDg3LjgzMzNaIiBmaWxsPSIjMTgxQTFDIi8+IDxwYXRoIGQ9Ik01MC4zMzI4IDE5LjA4MzNINDQuMDgyOFY1Ni41ODMySDc1LjMzMjhWNTAuMzMzMkg1MC4zMzI4VjE5LjA4MzNaIiBmaWxsPSIjMTgxQTFDIi8+IDwvc3ZnPiA=\"","import { componentName, IconClass } from './IconClass';\n\ncustomElements.define(componentName, IconClass);\n\nexport { IconClass, 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"],"names":["fmt","val","pad","String","padStart","componentName","observedAttributes","BaseClass","baseSelector","host","icon","timer","selector","TimerClass","mappings","fontSize","iconSize","property","fontFamily","minHeight","fontWeight","lineHeight","textColor","gap","textAlign","hostWidth","hostDirection","iconColor","IconClass","cssVarList","fill","concat","constructor","super","this","attachShadow","mode","innerHTML","shadowRoot","querySelector","seconds","getAttribute","secs","parseInt","Math","max","isPaused","init","startInterval","setInterval","stop","stopInterval","clearInterval","reset","dispatchEvent","CustomEvent","bubbles","pause","setAttribute","resume","removeAttribute","textContent","ms","totalSeconds","floor","hours","secondsInMinute","minutes","join","formatTime","classList","toggle","paused","setTimeout","attributeChangedCallback","attrName","oldValue","newValue","customElements","define","createSvgEle","text","clean","sanitize","USE_PROFILES","svg","svgFilters","DOMParser","parseFromString","createIcon","async","src","ele","startsWith","isBase64Svg","svgXml","atob","slice","base64Prefix","path","match","getFileExtension","fetchedSrc","fetch","document","createElement","createImgEle","style","setProperty","module","exports","RawIcon","toggleVisibility","isVisible","display","updateFillColor","node","querySelectorAll","forEach","then","res","clonedNode","cloneNode","appendChild"],"sourceRoot":""}
+{"version":3,"file":"descope-timer.js","mappings":"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","sources":["webpack://@descope/web-components-ui/../components/descope-timer/src/component/helpers.js","webpack://@descope/web-components-ui/../components/descope-timer/src/component/TimerClass.js","webpack://@descope/web-components-ui/../components/descope-timer/src/component/index.js","webpack://@descope/web-components-ui/../components/descope-icon/src/component/helpers.js","webpack://@descope/web-components-ui/../components/descope-timer/src/component/clock.svg","webpack://@descope/web-components-ui/../components/descope-icon/src/component/index.js","webpack://@descope/web-components-ui/../components/descope-icon/src/component/IconClass.js"],"sourcesContent":["const fmt = (val, pad = 2) => String(val).padStart(pad, '0');\n\nexport const formatTime = (ms = 0) => {\n  const totalSeconds = Math.floor(ms / 1000);\n\n  const secondsInMinute = 60;\n  const secondsInHour = secondsInMinute * 60;\n\n  const hours = Math.floor(totalSeconds / secondsInHour);\n  const minutes = Math.floor((totalSeconds % secondsInHour) / secondsInMinute);\n  const seconds = totalSeconds % secondsInMinute;\n\n  const timeParts = [...(hours ? [fmt(hours)] : []), fmt(minutes), fmt(seconds)];\n\n  return timeParts.join(':');\n};\n","import {\n  createStyleMixin,\n  draggableMixin,\n  componentNameValidationMixin,\n} from '@descope-ui/common/components-mixins';\nimport { createBaseClass } from '@descope-ui/common/base-classes';\nimport { compose } from '@descope-ui/common/utils';\nimport {\n  getComponentName,\n  injectStyle,\n} from '@descope-ui/common/components-helpers';\nimport clockIcon from './clock.svg';\nimport { IconClass } from '@descope-ui/descope-icon/class';\nimport { formatTime } from './helpers';\n\nexport const componentName = getComponentName('timer');\n\nconst observedAttributes = ['seconds', 'hide-icon', 'paused'];\n\nconst BaseClass = createBaseClass({\n  componentName,\n  baseSelector: ':host > .wrapper',\n});\n\nconst DEFAULT_INTERVAL = 1000;\n\nclass RawTimer extends BaseClass {\n  #timeRemains = 0;\n\n  #intervalId;\n\n  static get observedAttributes() {\n    return observedAttributes.concat(BaseClass.observedAttributes || []);\n  }\n\n  constructor() {\n    super();\n\n    this.attachShadow({ mode: 'open' }).innerHTML = `\n      <div class=\"wrapper\">\n        <descope-icon src=${clockIcon} class=\"icon\"></descope-icon>\n        <div class=\"timer\"></div>\n      </div>\n\t\t`;\n\n    injectStyle(\n      `\n      :host {\n        display: inline-flex;\n        user-select: none;\n        -webkit-user-select: none;\n      }\n      .wrapper {\n        display: flex;\n        align-items: center;\n        flex-direction: row;\n        width: 100%;\n      }\n      .hidden {\n        display: none;\n      }\n    `,\n      this,\n    );\n\n    this.icon = this.shadowRoot.querySelector('.icon');\n    this.timer = this.shadowRoot.querySelector('.timer');\n  }\n\n  get seconds() {\n    const val = this.getAttribute('seconds');\n    const secs = parseInt(val || 0, 10) * 1000;\n    return Math.max(0, secs);\n  }\n\n  // we use `pause` attribute for allowing preview mode by executing `pause`\n  get isPaused() {\n    return this.getAttribute('paused') === 'true';\n  }\n\n  init() {\n    super.init?.();\n\n    this.#timeRemains = this.seconds;\n  }\n\n  startInterval() {\n    const intervalCycle = () => {\n      this.#decreaseInterval();\n      if (!this.#timeRemains) this.stop();\n      this.#updateDisplay(this.#timeRemains);\n    };\n\n    if (this.#timeRemains) {\n      this.#intervalId = setInterval(intervalCycle, DEFAULT_INTERVAL);\n    } else {\n      this.stop();\n    }\n  }\n\n  stopInterval() {\n    clearInterval(this.#intervalId);\n  }\n\n  #decreaseInterval() {\n    this.#timeRemains = this.#timeRemains - DEFAULT_INTERVAL;\n  }\n\n  reset() {\n    this.#timeRemains = this.seconds;\n    this.#updateDisplay(this.#timeRemains);\n\n    if (this.isPaused) return;\n\n    this.dispatchEvent(new CustomEvent('timer-started', { bubbles: true }));\n    this.startInterval();\n  }\n\n  stop() {\n    this.stopInterval();\n    this.#timeRemains = 0;\n    this.#updateDisplay(this.#timeRemains);\n    this.dispatchEvent(new CustomEvent('timer-ended', { bubbles: true }));\n  }\n\n  pause() {\n    this.setAttribute('paused', 'true');\n    this.stopInterval();\n  }\n\n  resume() {\n    this.removeAttribute('paused');\n    this.startInterval();\n  }\n\n  #updateDisplay(val) {\n    this.timer.textContent = formatTime(val);\n  }\n\n  #toggleIcon(val) {\n    this.icon.classList.toggle('hidden', val === 'true');\n  }\n\n  #handlePause(paused) {\n    setTimeout(() => {\n      if (paused) {\n        this.pause();\n      } else {\n        // we want to prevent a another interval from starting in case previous interval was not yet cleared\n        if (!this.#intervalId) {\n          this.resume();\n        }\n      }\n    });\n  }\n\n  attributeChangedCallback(attrName, oldValue, newValue) {\n    super.attributeChangedCallback?.(attrName, oldValue, newValue);\n\n    if (newValue !== oldValue) {\n      if (attrName === 'seconds') {\n        this.reset();\n      }\n      if (attrName === 'hide-icon') {\n        this.#toggleIcon(newValue);\n      }\n      if (attrName === 'paused') {\n        this.#handlePause(newValue === 'true');\n      }\n    }\n  }\n}\n\nconst { host, icon, timer } = {\n  host: { selector: () => ':host' },\n  icon: { selector: () => '.icon' },\n  timer: { selector: () => '.timer' },\n};\n\nexport const TimerClass = compose(\n  createStyleMixin({\n    mappings: {\n      fontSize: {},\n      iconSize: [\n        { ...icon, property: 'width' },\n        { ...icon, property: 'height' },\n      ],\n      fontFamily: {},\n      minHeight: {},\n      fontWeight: { ...timer },\n      lineHeight: { ...timer },\n      textColor: { ...timer, property: 'color' },\n      gap: {},\n      textAlign: { property: 'justify-content' },\n      hostWidth: { ...host, property: 'width' },\n      hostDirection: { ...host, property: 'direction' },\n      iconColor: { ...icon, property: IconClass.cssVarList.fill },\n    },\n  }),\n  draggableMixin,\n  componentNameValidationMixin,\n)(RawTimer);\n","import { componentName, TimerClass } from './TimerClass';\nimport '@descope-ui/descope-icon';\n\ncustomElements.define(componentName, TimerClass);\n\nexport { TimerClass, componentName };\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","module.exports = \"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMWVtIiBoZWlnaHQ9IjFlbSIgdmlld0JveD0iMCAwIDEwNCAxMDQiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+IDxwYXRoIGQ9Ik01MC4zMzM0IDAuMzMzMjUyQzIyLjgzMzQgMC4zMzMyNTIgMC4zMzMzNzQgMjIuODMzMyAwLjMzMzM3NCA1MC4zMzMzQzAuMzMzMzc0IDc3LjgzMzMgMjIuODMzNCAxMDAuMzMzIDUwLjMzMzQgMTAwLjMzM0M3Ny44MzM0IDEwMC4zMzMgMTAwLjMzMyA3Ny44MzMzIDEwMC4zMzMgNTAuMzMzM0MxMDAuMzMzIDIyLjgzMzMgNzcuODMzNCAwLjMzMzI1MiA1MC4zMzM0IDAuMzMzMjUyWk01MC4zMzM0IDg3LjgzMzNDMjkuNzA4NCA4Ny44MzMzIDEyLjgzMzQgNzAuOTU4MyAxMi44MzM0IDUwLjMzMzNDMTIuODMzNCAyOS43MDgzIDI5LjcwODQgMTIuODMzMyA1MC4zMzM0IDEyLjgzMzNDNzAuOTU4NCAxMi44MzMzIDg3LjgzMzQgMjkuNzA4MyA4Ny44MzM0IDUwLjMzMzNDODcuODMzNCA3MC45NTgzIDcwLjk1ODQgODcuODMzMyA1MC4zMzM0IDg3LjgzMzNaIiBmaWxsPSIjMTgxQTFDIi8+IDxwYXRoIGQ9Ik01MC4zMzI4IDE5LjA4MzNINDQuMDgyOFY1Ni41ODMySDc1LjMzMjhWNTAuMzMzMkg1MC4zMzI4VjE5LjA4MzNaIiBmaWxsPSIjMTgxQTFDIi8+IDwvc3ZnPiA=\"","import { componentName, IconClass } from './IconClass';\n\ncustomElements.define(componentName, IconClass);\n\nexport { IconClass, 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      alignItems: {}\n    },\n  }),\n  draggableMixin,\n  componentNameValidationMixin\n)(RawIcon);\n"],"names":["fmt","val","pad","String","padStart","componentName","observedAttributes","BaseClass","baseSelector","host","icon","timer","selector","TimerClass","mappings","fontSize","iconSize","property","fontFamily","minHeight","fontWeight","lineHeight","textColor","gap","textAlign","hostWidth","hostDirection","iconColor","IconClass","cssVarList","fill","concat","constructor","super","this","attachShadow","mode","innerHTML","shadowRoot","querySelector","seconds","getAttribute","secs","parseInt","Math","max","isPaused","init","startInterval","setInterval","stop","stopInterval","clearInterval","reset","dispatchEvent","CustomEvent","bubbles","pause","setAttribute","resume","removeAttribute","textContent","ms","totalSeconds","floor","hours","secondsInMinute","minutes","join","formatTime","classList","toggle","paused","setTimeout","attributeChangedCallback","attrName","oldValue","newValue","customElements","define","createSvgEle","text","clean","sanitize","USE_PROFILES","svg","svgFilters","DOMParser","parseFromString","createIcon","async","src","ele","startsWith","isBase64Svg","svgXml","atob","slice","base64Prefix","path","match","getFileExtension","fetchedSrc","fetch","document","createElement","createImgEle","style","setProperty","module","exports","RawIcon","toggleVisibility","isVisible","display","updateFillColor","node","querySelectorAll","forEach","then","res","clonedNode","cloneNode","appendChild","alignItems"],"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))},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()}}},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`},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)},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}}},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)},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)}}]);
+"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))},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()}}},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`},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)},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}}},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)},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:{},alignItems:{}}}),i.VO,i.tQ)(d)}}]);
 //# 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/../components/descope-button/src/component/clickableMixin.js","webpack://@descope/web-components-ui/../components/descope-button/src/component/ButtonClass.js","webpack://@descope/web-components-ui/../components/descope-button/src/component/index.js","webpack://@descope/web-components-ui/../components/descope-icon/src/component/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","webpack://@descope/web-components-ui/../components/descope-icon/src/component/IconClass.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","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 { 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","import { componentName, ButtonClass } from './ButtonClass';\nimport '@vaadin/button';\n\ncustomElements.define(componentName, ButtonClass);\n\nexport { ButtonClass, componentName };\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-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","/* 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"],"names":["createBaseInputClass","args","clickableMixin","superclass","isLoading","this","getAttribute","click","super","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","customElements","define","createSvgEle","text","clean","sanitize","USE_PROFILES","svg","svgFilters","DOMParser","parseFromString","querySelector","createIcon","async","src","ele","startsWith","isBase64Svg","svgXml","atob","slice","base64Prefix","path","match","getFileExtension","fetchedSrc","fetch","document","createElement","setAttribute","createImgEle","setProperty","observedAttributes","BaseInputClass","baseSelector","buttonVars","wrapper","icon","title","description","requiredIndicator","UploadFileClass","componentNameOverride","hostPadding","gap","lineHeight","titleFontSize","titleFontWeight","descriptionFontSize","concat","constructor","attachShadow","mode","innerHTML","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","attributeChangedCallback","attrName","oldValue","newValue","updateTitle","updateButtonLabel","updateButtonMode","updateButtonVariant","updateButtonSize","updateInputAccept","updateReadOnly","val","textContent","RawIcon","init","toggleVisibility","isVisible","display","updateFillColor","node","querySelectorAll","forEach","IconClass","then","res","clonedNode","cloneNode","appendChild"],"sourceRoot":""}
+{"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/../components/descope-button/src/component/clickableMixin.js","webpack://@descope/web-components-ui/../components/descope-button/src/component/ButtonClass.js","webpack://@descope/web-components-ui/../components/descope-button/src/component/index.js","webpack://@descope/web-components-ui/../components/descope-icon/src/component/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","webpack://@descope/web-components-ui/../components/descope-icon/src/component/IconClass.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","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 { 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","import { componentName, ButtonClass } from './ButtonClass';\nimport '@vaadin/button';\n\ncustomElements.define(componentName, ButtonClass);\n\nexport { ButtonClass, componentName };\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-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","/* 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      alignItems: {}\n    },\n  }),\n  draggableMixin,\n  componentNameValidationMixin\n)(RawIcon);\n"],"names":["createBaseInputClass","args","clickableMixin","superclass","isLoading","this","getAttribute","click","super","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","customElements","define","createSvgEle","text","clean","sanitize","USE_PROFILES","svg","svgFilters","DOMParser","parseFromString","querySelector","createIcon","async","src","ele","startsWith","isBase64Svg","svgXml","atob","slice","base64Prefix","path","match","getFileExtension","fetchedSrc","fetch","document","createElement","setAttribute","createImgEle","setProperty","observedAttributes","BaseInputClass","baseSelector","buttonVars","wrapper","icon","title","description","requiredIndicator","UploadFileClass","componentNameOverride","hostPadding","gap","lineHeight","titleFontSize","titleFontWeight","descriptionFontSize","concat","constructor","attachShadow","mode","innerHTML","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","attributeChangedCallback","attrName","oldValue","newValue","updateTitle","updateButtonLabel","updateButtonMode","updateButtonVariant","updateButtonSize","updateInputAccept","updateReadOnly","val","textContent","RawIcon","init","toggleVisibility","isVisible","display","updateFillColor","node","querySelectorAll","forEach","IconClass","then","res","clonedNode","cloneNode","appendChild","alignItems"],"sourceRoot":""}