@descope/web-components-ui 1.47.0 → 1.49.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/dist/cjs/index.cjs.js +4 -0
  2. package/dist/cjs/index.cjs.js.map +1 -1
  3. package/dist/index.esm.js +4 -0
  4. package/dist/index.esm.js.map +1 -1
  5. package/dist/umd/DescopeDev.js +1 -1
  6. package/dist/umd/DescopeDev.js.map +1 -1
  7. package/dist/umd/descope-timer-button.js +1 -1
  8. package/dist/umd/descope-timer-button.js.map +1 -1
  9. package/package.json +2 -2
package/dist/umd/descope-timer-button.js CHANGED
@@ -1,2 +1,2 @@
1
- (self.webpackChunk_descope_web_components_ui=self.webpackChunk_descope_web_components_ui||[]).push([[743,2250,6724],{44006:t=>{t.exports="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMWVtIiBoZWlnaHQ9IjFlbSIgdmlld0JveD0iMCAwIDEwMSAxMDEiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+IDxwYXRoIGQ9Ik01MC4zMzM0IDAuMzMzMjUyQzIyLjgzMzQgMC4zMzMyNTIgMC4zMzMzNzQgMjIuODMzMyAwLjMzMzM3NCA1MC4zMzMzQzAuMzMzMzc0IDc3LjgzMzMgMjIuODMzNCAxMDAuMzMzIDUwLjMzMzQgMTAwLjMzM0M3Ny44MzM0IDEwMC4zMzMgMTAwLjMzMyA3Ny44MzMzIDEwMC4zMzMgNTAuMzMzM0MxMDAuMzMzIDIyLjgzMzMgNzcuODMzNCAwLjMzMzI1MiA1MC4zMzM0IDAuMzMzMjUyWk01MC4zMzM0IDg3LjgzMzNDMjkuNzA4NCA4Ny44MzMzIDEyLjgzMzQgNzAuOTU4MyAxMi44MzM0IDUwLjMzMzNDMTIuODMzNCAyOS43MDgzIDI5LjcwODQgMTIuODMzMyA1MC4zMzM0IDEyLjgzMzNDNzAuOTU4NCAxMi44MzMzIDg3LjgzMzQgMjkuNzA4MyA4Ny44MzM0IDUwLjMzMzNDODcuODMzNCA3MC45NTgzIDcwLjk1ODQgODcuODMzMyA1MC4zMzM0IDg3LjgzMzNaIiBmaWxsPSIjMTgxQTFDIi8+IDxwYXRoIGQ9Ik01MC4zMzI4IDE5LjA4MzNINDQuMDgyOFY1Ni41ODMySDc1LjMzMjhWNTAuMzMzMkg1MC4zMzI4VjE5LjA4MzNaIiBmaWxsPSIjMTgxQTFDIi8+IDwvc3ZnPiA="},19624:(t,e,i)=>{"use strict";i.d(e,{J:()=>p,T:()=>l});var n=i(63200),s=i(25964),r=i(88961),o=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,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:o.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,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(${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`},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()}}},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)},98538:(t,e,i)=>{"use strict";i.d(e,{S:()=>c,T:()=>l});var n=i(88961),s=i(72270),r=i(63200),o=i(25964),a=i(31004);const l=(0,o.xE)("icon");class d extends((0,s.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,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,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,r.Zz)((0,n.RF)({mappings:{fill:{}}}),n.VO,n.tQ)(d)},31004:(t,e,i)=>{"use strict";i.d(e,{w:()=>r});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")},r=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}}},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),r=i(63200),o=i(25964);const a=(0,o.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,r.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,o.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))}init(){super.init?.(),(0,o.EA)(this,this.button,{includeAttrs:l,mapAttrs:d}),(0,o.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)},15887:(t,e,i)=>{"use strict";i.r(e),i.d(e,{TimerClass:()=>b,componentName:()=>h});var n=i(88961),s=i(72270),r=i(63200),o=i(25964),a=i(44006),l=i.n(a),d=i(98538);const c=(t,e=2)=>String(t).padStart(e,"0"),h=(0,o.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,r.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{#e=0;#i;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,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.#e=this.seconds}startInterval(){this.#e?this.#i=setInterval((()=>{this.#n(),this.#e||this.stop(),this.#s(this.#e)}),1e3):this.stop()}stopInterval(){clearInterval(this.#i)}#n(){this.#e=this.#e-1e3}reset(){this.#e=this.seconds,this.#s(this.#e),this.isPaused||(this.dispatchEvent(new CustomEvent("timer-started",{bubbles:!0})),this.startInterval())}stop(){this.stopInterval(),this.#e=0,this.#s(this.#e),this.dispatchEvent(new CustomEvent("timer-ended",{bubbles:!0}))}pause(){this.setAttribute("paused","true"),this.stopInterval()}resume(){this.removeAttribute("paused"),this.startInterval()}#s(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)}#r(t){this.icon.classList.toggle("hidden","true"===t)}#o(t){setTimeout((()=>{t?this.pause():this.#i||this.resume()}))}attributeChangedCallback(t,e,i){super.attributeChangedCallback?.(t,e,i),i!==e&&("seconds"===t&&this.reset(),"hide-icon"===t&&this.#r(i),"paused"===t&&this.#o("true"===i))}});i(56737),customElements.define(h,b)}}]);
1
+ (self.webpackChunk_descope_web_components_ui=self.webpackChunk_descope_web_components_ui||[]).push([[743,2250,6724],{44006:t=>{t.exports="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMWVtIiBoZWlnaHQ9IjFlbSIgdmlld0JveD0iMCAwIDEwMSAxMDEiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+IDxwYXRoIGQ9Ik01MC4zMzM0IDAuMzMzMjUyQzIyLjgzMzQgMC4zMzMyNTIgMC4zMzMzNzQgMjIuODMzMyAwLjMzMzM3NCA1MC4zMzMzQzAuMzMzMzc0IDc3LjgzMzMgMjIuODMzNCAxMDAuMzMzIDUwLjMzMzQgMTAwLjMzM0M3Ny44MzM0IDEwMC4zMzMgMTAwLjMzMyA3Ny44MzMzIDEwMC4zMzMgNTAuMzMzM0MxMDAuMzMzIDIyLjgzMzMgNzcuODMzNCAwLjMzMzI1MiA1MC4zMzM0IDAuMzMzMjUyWk01MC4zMzM0IDg3LjgzMzNDMjkuNzA4NCA4Ny44MzMzIDEyLjgzMzQgNzAuOTU4MyAxMi44MzM0IDUwLjMzMzNDMTIuODMzNCAyOS43MDgzIDI5LjcwODQgMTIuODMzMyA1MC4zMzM0IDEyLjgzMzNDNzAuOTU4NCAxMi44MzMzIDg3LjgzMzQgMjkuNzA4MyA4Ny44MzM0IDUwLjMzMzNDODcuODMzNCA3MC45NTgzIDcwLjk1ODQgODcuODMzMyA1MC4zMzM0IDg3LjgzMzNaIiBmaWxsPSIjMTgxQTFDIi8+IDxwYXRoIGQ9Ik01MC4zMzI4IDE5LjA4MzNINDQuMDgyOFY1Ni41ODMySDc1LjMzMjhWNTAuMzMzMkg1MC4zMzI4VjE5LjA4MzNaIiBmaWxsPSIjMTgxQTFDIi8+IDwvc3ZnPiA="},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`},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()}}},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)},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"]}#t;constructor(){super(),this.attachShadow({mode:"open"}).innerHTML="\n\t\t<slot></slot>\n\t",(0,r.fz)("\n\t\t\t:host > slot {\n\t\t\t\tbox-sizing: border-box;\n\t\t\t\twidth: 100%;\n\t\t\t\theight: 100%;\n\t\t\t\tdisplay: flex;\n\t\t\t\toverflow: hidden;\n\t\t\t}\n\t\t\t:host {\n\t\t\t\tdisplay: inline-block;\n\t\t\t}\n ",this)}init(){super.init?.(),this.toggleVisibility(this.src)}toggleVisibility(t){this.style.display=t?"":"none"}get src(){return this.getAttribute("src")}updateFillColor(t){[t,...t.querySelectorAll("*[fill]")].forEach((t=>{t.setAttribute("fill",`var(${c.cssVarList.fill}, ${t.getAttribute("fill")||"''"})`)}))}attributeChangedCallback(t,e,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)},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}}},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)},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{#e=0;#i;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.#e=this.seconds}startInterval(){this.#e?this.#i=setInterval((()=>{this.#n(),this.#e||this.stop(),this.#s(this.#e)}),1e3):this.stop()}stopInterval(){clearInterval(this.#i)}#n(){this.#e=this.#e-1e3}reset(){this.#e=this.seconds,this.#s(this.#e),this.isPaused||(this.dispatchEvent(new CustomEvent("timer-started",{bubbles:!0})),this.startInterval())}stop(){this.stopInterval(),this.#e=0,this.#s(this.#e),this.dispatchEvent(new CustomEvent("timer-ended",{bubbles:!0}))}pause(){this.setAttribute("paused","true"),this.stopInterval()}resume(){this.removeAttribute("paused"),this.startInterval()}#s(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)}#o(t){this.icon.classList.toggle("hidden","true"===t)}#r(t){setTimeout((()=>{t?this.pause():this.#i||this.resume()}))}attributeChangedCallback(t,e,i){super.attributeChangedCallback?.(t,e,i),i!==e&&("seconds"===t&&this.reset(),"hide-icon"===t&&this.#o(i),"paused"===t&&this.#r("true"===i))}});i(56737),customElements.define(h,g)}}]);
2
2
  //# sourceMappingURL=descope-timer-button.js.map
package/dist/umd/descope-timer-button.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"descope-timer-button.js","mappings":"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","sources":["webpack://@descope/web-components-ui/../components/descope-timer/src/component/clock.svg","webpack://@descope/web-components-ui/../components/descope-button/src/component/ButtonClass.js","webpack://@descope/web-components-ui/../components/descope-button/src/component/clickableMixin.js","webpack://@descope/web-components-ui/../components/descope-button/src/component/index.js","webpack://@descope/web-components-ui/../components/descope-icon/src/component/IconClass.js","webpack://@descope/web-components-ui/../components/descope-icon/src/component/helpers.js","webpack://@descope/web-components-ui/../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-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"],"sourcesContent":["module.exports = \"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMWVtIiBoZWlnaHQ9IjFlbSIgdmlld0JveD0iMCAwIDEwMSAxMDEiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+IDxwYXRoIGQ9Ik01MC4zMzM0IDAuMzMzMjUyQzIyLjgzMzQgMC4zMzMyNTIgMC4zMzMzNzQgMjIuODMzMyAwLjMzMzM3NCA1MC4zMzMzQzAuMzMzMzc0IDc3LjgzMzMgMjIuODMzNCAxMDAuMzMzIDUwLjMzMzQgMTAwLjMzM0M3Ny44MzM0IDEwMC4zMzMgMTAwLjMzMyA3Ny44MzMzIDEwMC4zMzMgNTAuMzMzM0MxMDAuMzMzIDIyLjgzMzMgNzcuODMzNCAwLjMzMzI1MiA1MC4zMzM0IDAuMzMzMjUyWk01MC4zMzM0IDg3LjgzMzNDMjkuNzA4NCA4Ny44MzMzIDEyLjgzMzQgNzAuOTU4MyAxMi44MzM0IDUwLjMzMzNDMTIuODMzNCAyOS43MDgzIDI5LjcwODQgMTIuODMzMyA1MC4zMzM0IDEyLjgzMzNDNzAuOTU4NCAxMi44MzMzIDg3LjgzMzQgMjkuNzA4MyA4Ny44MzM0IDUwLjMzMzNDODcuODMzNCA3MC45NTgzIDcwLjk1ODQgODcuODMzMyA1MC4zMzM0IDg3LjgzMzNaIiBmaWxsPSIjMTgxQTFDIi8+IDxwYXRoIGQ9Ik01MC4zMzI4IDE5LjA4MzNINDQuMDgyOFY1Ni41ODMySDc1LjMzMjhWNTAuMzMzMkg1MC4zMzI4VjE5LjA4MzNaIiBmaWxsPSIjMTgxQTFDIi8+IDwvc3ZnPiA=\"","import { compose } from '@descope-ui/common/utils';\nimport { getComponentName } from '@descope-ui/common/components-helpers';\nimport {\n createStyleMixin,\n draggableMixin,\n createProxy,\n componentNameValidationMixin,\n} from '@descope-ui/common/components-mixins';\nimport { IconClass } from '@descope-ui/descope-icon/class';\nimport { clickableMixin } from './clickableMixin';\n\nexport const componentName = getComponentName('button');\n\nconst resetStyles = `\n\t:host {\n\t\tdisplay: inline-block;\n\t\tbox-sizing: border-box;\n\t}\n\tvaadin-button::before,\n\tvaadin-button::after {\n\t\topacity: 0;\n\t}\n\tvaadin-button {\n\t\tmargin: 0;\n\t\tmin-width: 0;\n\t\twidth: 100%;\n\t\theight: auto;\n\t\tbox-shadow: none;\n\t}\n\tvaadin-button::part(label) {\n\t\tpadding: 0;\n width: 100%;\n\t}\n\tvaadin-button::part(prefix) {\n\t\tmargin-left: 0;\n\t\tmargin-right: 0;\n\t}\n`;\n\nconst iconStyles = `\n\tvaadin-button::part(prefix),\n\tvaadin-button::part(label) {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t}\n`;\n\nconst editorOverrides = `vaadin-button::part(label) { pointer-events: none; }`;\n\nconst { host, label, slottedIcon } = {\n host: { selector: () => ':host' },\n label: { selector: '::part(label)' },\n slottedIcon: { selector: () => '::slotted(descope-icon)' },\n};\n\nlet loadingIndicatorStyles;\n\nexport const ButtonClass = compose(\n createStyleMixin({\n mappings: {\n hostWidth: { property: 'width' },\n hostHeight: { property: 'height' },\n hostDirection: { ...host, property: 'direction' },\n fontSize: {},\n fontFamily: {},\n\n cursor: {},\n backgroundColor: {},\n\n outlineOffset: {},\n outlineColor: {},\n outlineStyle: {},\n outlineWidth: {},\n\n borderRadius: {},\n borderColor: {},\n borderStyle: {},\n borderWidth: {},\n\n verticalPadding: [{ property: 'padding-top' }, { property: 'padding-bottom' }],\n horizontalPadding: [\n { property: 'padding-right', fallback: '0.875em' },\n { property: 'padding-left', fallback: '0.875em' },\n ],\n\n labelTextColor: { property: 'color' },\n iconColor: {\n selector: () => `::slotted(*)`,\n property: IconClass.cssVarList.fill,\n },\n labelTextDecoration: { ...label, property: 'text-decoration' },\n labelSpacing: { ...label, property: 'gap' },\n textAlign: { ...label, property: 'justify-content', fallback: 'center' },\n\n iconSize: [\n { ...slottedIcon, property: 'width' },\n { ...slottedIcon, property: 'height' },\n ],\n },\n }),\n clickableMixin,\n draggableMixin,\n componentNameValidationMixin\n)(\n createProxy({\n slots: ['', 'prefix', 'label', 'suffix'],\n wrappedEleName: 'vaadin-button',\n style: () => `\n\t\t\t${resetStyles}\n\t\t\t${iconStyles}\n\t\t\t${loadingIndicatorStyles}\n\t\t\t${editorOverrides}\n\t\t\t:host {\n\t\t\t\tpadding: calc(var(${ButtonClass.cssVarList.outlineWidth}) + var(${ButtonClass.cssVarList.outlineOffset}));\n\t\t\t}\n :host([full-width=\"true\"]) {\n width: var(${ButtonClass.cssVarList.hostWidth});\n }\n\t\t\tvaadin-button {\n\t\t\t\theight: calc(var(${ButtonClass.cssVarList.hostHeight}) - var(${ButtonClass.cssVarList.outlineWidth}) - var(${ButtonClass.cssVarList.outlineOffset}));\n\t\t\t}\n\t\t\t[square=\"true\"]:not([full-width=\"true\"]) {\n\t\t\t\twidth: calc(var(${ButtonClass.cssVarList.hostWidth}) - var(${ButtonClass.cssVarList.outlineWidth}) - var(${ButtonClass.cssVarList.outlineOffset}));\n padding: 0;\n\t\t\t}\n\t\t`,\n excludeAttrsSync: ['tabindex'],\n componentName,\n })\n);\n\nconst { color, fontSize } = ButtonClass.cssVarList;\nloadingIndicatorStyles = `\n\t@keyframes spin {\n\t\t0% { -webkit-transform: rotate(0deg); }\n\t\t100% { -webkit-transform: rotate(360deg); }\n\t}\n\t:host([loading=\"true\"]) ::before {\n\t\tanimation: spin 2s linear infinite;\n\t\tposition: absolute;\n\t\tcontent: '';\n\t\tz-index: 1;\n\t\tbox-sizing: border-box;\n\t\tborder-radius: 50%;\n\t\tborder-bottom-color: transparent;\n\t\tborder-left-color: transparent;\n\t\tborder-style: solid;\n\t\tcolor: var(${color});\n\t\ttop: calc(50% - (var(${fontSize}) / 2));\n\t\tleft: calc(50% - (var(${fontSize}) / 2));\n\t\tborder-width: calc(var(${fontSize}) / 10);\n\t\twidth: var(${fontSize});\n\t\theight: var(${fontSize});\n\t}\n\t:host([disabled=\"true\"]),\n\t:host([loading=\"true\"]) {\n\t\tpointer-events: none;\n\t}\n\t:host([loading=\"true\"])::part(prefix),\n\t:host([loading=\"true\"])::part(label) {\n\t\tvisibility: hidden;\n\t}\n`;\n","export const clickableMixin = (superclass) =>\n class ClickableMixinClass extends superclass {\n get isLoading() {\n return this.getAttribute('loading') === 'true';\n }\n\n click() {\n this.isLoading || super.click();\n }\n };\n","import { componentName, ButtonClass } from './ButtonClass';\nimport '@vaadin/button';\n\ncustomElements.define(componentName, ButtonClass);\n\nexport { ButtonClass, componentName };\n","/* eslint-disable no-use-before-define */\nimport { createStyleMixin, draggableMixin, componentNameValidationMixin } from '@descope-ui/common/components-mixins';\nimport { createBaseClass } from '@descope-ui/common/base-classes';\nimport { compose } from '@descope-ui/common/utils';\nimport { getComponentName } from '@descope-ui/common/components-helpers';\nimport { createIcon } from './helpers';\nimport { injectStyle } from '@descope-ui/common/components-helpers';\n\nexport const componentName = getComponentName('icon');\n\nclass RawIcon extends createBaseClass({ componentName, baseSelector: 'slot' }) {\n static get observedAttributes() {\n return ['src'];\n }\n\n #icon;\n\n constructor() {\n super();\n\n this.attachShadow({ mode: 'open' }).innerHTML = `\n\t\t<slot></slot>\n\t`;\n\n injectStyle(\n `\n\t\t\t:host > slot {\n\t\t\t\tbox-sizing: border-box;\n\t\t\t\twidth: 100%;\n\t\t\t\theight: 100%;\n\t\t\t\tdisplay: flex;\n\t\t\t\toverflow: hidden;\n\t\t\t}\n\t\t\t:host {\n\t\t\t\tdisplay: inline-block;\n\t\t\t}\n `,\n this\n );\n }\n\n init() {\n super.init?.();\n this.toggleVisibility(this.src);\n }\n\n toggleVisibility(isVisible) {\n this.style.display = isVisible ? '' : 'none';\n }\n\n get src() {\n return this.getAttribute('src');\n }\n\n // in order to fill an SVG with `currentColor` override all of its `fill` and `path` nodes\n // with the value from the `st-fill` attribute\n // eslint-disable-next-line class-methods-use-this\n updateFillColor(node) {\n // set fill to root node and all its relevant selectors\n const elementsToReplace = [node, ...node.querySelectorAll('*[fill]')];\n\n elementsToReplace.forEach((ele) => {\n ele.setAttribute(\n 'fill',\n `var(${IconClass.cssVarList.fill}, ${ele.getAttribute('fill') || \"''\"})`\n );\n });\n }\n\n attributeChangedCallback(attrName, oldValue, newValue) {\n super.attributeChangedCallback?.(attrName, oldValue, newValue);\n\n if (oldValue === newValue) return;\n\n if (attrName === 'src') {\n this.toggleVisibility(newValue);\n\n createIcon(this.src).then((res) => {\n this.innerHTML = '';\n if (res) {\n const clonedNode = res.cloneNode(true);\n this.updateFillColor(clonedNode);\n this.appendChild(clonedNode);\n }\n });\n }\n }\n}\n\nexport const IconClass = compose(\n createStyleMixin({\n mappings: {\n fill: {},\n },\n }),\n draggableMixin,\n componentNameValidationMixin\n)(RawIcon);\n","import DOMPurify from 'dompurify';\n\nconst getFileExtension = (path) => {\n const match = path.match(/\\.([0-9a-z]+)(?:[\\\\?#]|$)/i);\n return match ? match[1] : null;\n};\n\nconst base64Prefix = 'data:image/svg+xml;base64,';\n\nconst isBase64Svg = (src) => src.startsWith(base64Prefix);\n\nconst createImgEle = (src) => {\n const ele = document.createElement('img');\n ele.setAttribute('src', src);\n return ele;\n};\n\nconst createSvgEle = (text) => {\n // we want to purify the SVG to avoid XSS attacks\n const clean = DOMPurify.sanitize(text, { USE_PROFILES: { svg: true, svgFilters: true } });\n\n const parser = new DOMParser();\n const ele = parser.parseFromString(clean, 'image/svg+xml').querySelector('svg');\n return ele;\n};\n\nexport const createIcon = async (src) => {\n try {\n let ele;\n if (isBase64Svg(src)) {\n // handle base64 source\n const svgXml = atob(src.slice(base64Prefix.length));\n ele = createSvgEle(svgXml);\n } else if (getFileExtension(src) === 'svg') {\n // handle urls\n const fetchedSrc = await fetch(src);\n const text = await fetchedSrc.text();\n ele = createSvgEle(text);\n } else {\n // handle binary\n ele = createImgEle(src);\n }\n\n ele.style.setProperty('max-width', '100%');\n ele.style.setProperty('max-height', '100%');\n\n return ele;\n } catch {\n return null;\n }\n};\n","import { 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 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","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"],"names":["module","exports","componentName","host","label","slottedIcon","selector","loadingIndicatorStyles","ButtonClass","mappings","hostWidth","property","hostHeight","hostDirection","fontSize","fontFamily","cursor","backgroundColor","outlineOffset","outlineColor","outlineStyle","outlineWidth","borderRadius","borderColor","borderStyle","borderWidth","verticalPadding","horizontalPadding","fallback","labelTextColor","iconColor","cssVarList","fill","labelTextDecoration","labelSpacing","textAlign","iconSize","slots","wrappedEleName","style","excludeAttrsSync","color","clickableMixin","superclass","isLoading","this","getAttribute","click","super","customElements","define","RawIcon","baseSelector","observedAttributes","constructor","attachShadow","mode","innerHTML","init","toggleVisibility","src","isVisible","display","updateFillColor","node","querySelectorAll","forEach","ele","setAttribute","IconClass","attributeChangedCallback","attrName","oldValue","newValue","then","res","clonedNode","cloneNode","appendChild","createSvgEle","text","clean","sanitize","USE_PROFILES","svg","svgFilters","DOMParser","parseFromString","querySelector","createIcon","async","startsWith","isBase64Svg","svgXml","atob","slice","base64Prefix","path","match","getFileExtension","fetchedSrc","fetch","document","createElement","createImgEle","setProperty","buttonAttrs","mapButtonAttrs","timerAttrs","mapTimerAttrs","BaseClass","icon","timer","TimerButtonClass","gap","flexDirection","shadowRoot","button","addEventListener","onTimerStarted","onTimerEnded","onClick","bind","includeAttrs","mapAttrs","toggleButtonDisable","reset","isDisabled","setTimeout","removeAttribute","fmt","val","pad","String","padStart","TimerClass","minHeight","fontWeight","lineHeight","textColor","concat","seconds","secs","parseInt","Math","max","isPaused","startInterval","setInterval","stop","stopInterval","clearInterval","dispatchEvent","CustomEvent","bubbles","pause","resume","textContent","ms","totalSeconds","floor","hours","secondsInMinute","minutes","join","formatTime","classList","toggle","paused"],"sourceRoot":""}
1
+ {"version":3,"file":"descope-timer-button.js","mappings":"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","sources":["webpack://@descope/web-components-ui/../components/descope-timer/src/component/clock.svg","webpack://@descope/web-components-ui/../components/descope-button/src/component/ButtonClass.js","webpack://@descope/web-components-ui/../components/descope-button/src/component/clickableMixin.js","webpack://@descope/web-components-ui/../components/descope-button/src/component/index.js","webpack://@descope/web-components-ui/../components/descope-icon/src/component/IconClass.js","webpack://@descope/web-components-ui/../components/descope-icon/src/component/helpers.js","webpack://@descope/web-components-ui/../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-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"],"sourcesContent":["module.exports = \"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMWVtIiBoZWlnaHQ9IjFlbSIgdmlld0JveD0iMCAwIDEwMSAxMDEiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+IDxwYXRoIGQ9Ik01MC4zMzM0IDAuMzMzMjUyQzIyLjgzMzQgMC4zMzMyNTIgMC4zMzMzNzQgMjIuODMzMyAwLjMzMzM3NCA1MC4zMzMzQzAuMzMzMzc0IDc3LjgzMzMgMjIuODMzNCAxMDAuMzMzIDUwLjMzMzQgMTAwLjMzM0M3Ny44MzM0IDEwMC4zMzMgMTAwLjMzMyA3Ny44MzMzIDEwMC4zMzMgNTAuMzMzM0MxMDAuMzMzIDIyLjgzMzMgNzcuODMzNCAwLjMzMzI1MiA1MC4zMzM0IDAuMzMzMjUyWk01MC4zMzM0IDg3LjgzMzNDMjkuNzA4NCA4Ny44MzMzIDEyLjgzMzQgNzAuOTU4MyAxMi44MzM0IDUwLjMzMzNDMTIuODMzNCAyOS43MDgzIDI5LjcwODQgMTIuODMzMyA1MC4zMzM0IDEyLjgzMzNDNzAuOTU4NCAxMi44MzMzIDg3LjgzMzQgMjkuNzA4MyA4Ny44MzM0IDUwLjMzMzNDODcuODMzNCA3MC45NTgzIDcwLjk1ODQgODcuODMzMyA1MC4zMzM0IDg3LjgzMzNaIiBmaWxsPSIjMTgxQTFDIi8+IDxwYXRoIGQ9Ik01MC4zMzI4IDE5LjA4MzNINDQuMDgyOFY1Ni41ODMySDc1LjMzMjhWNTAuMzMzMkg1MC4zMzI4VjE5LjA4MzNaIiBmaWxsPSIjMTgxQTFDIi8+IDwvc3ZnPiA=\"","import { compose } from '@descope-ui/common/utils';\nimport { getComponentName } from '@descope-ui/common/components-helpers';\nimport {\n createStyleMixin,\n draggableMixin,\n createProxy,\n componentNameValidationMixin,\n} from '@descope-ui/common/components-mixins';\nimport { IconClass } from '@descope-ui/descope-icon/class';\nimport { clickableMixin } from './clickableMixin';\n\nexport const componentName = getComponentName('button');\n\nconst resetStyles = `\n\t:host {\n\t\tdisplay: inline-block;\n\t\tbox-sizing: border-box;\n\t}\n\tvaadin-button::before,\n\tvaadin-button::after {\n\t\topacity: 0;\n\t}\n\tvaadin-button {\n\t\tmargin: 0;\n\t\tmin-width: 0;\n\t\twidth: 100%;\n\t\theight: auto;\n\t\tbox-shadow: none;\n\t}\n\tvaadin-button::part(label) {\n\t\tpadding: 0;\n width: 100%;\n\t}\n\tvaadin-button::part(prefix) {\n\t\tmargin-left: 0;\n\t\tmargin-right: 0;\n\t}\n`;\n\nconst iconStyles = `\n\tvaadin-button::part(prefix),\n\tvaadin-button::part(label) {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t}\n`;\n\nconst editorOverrides = `vaadin-button::part(label) { pointer-events: none; }`;\n\nconst { host, label, slottedIcon } = {\n host: { selector: () => ':host' },\n label: { selector: '::part(label)' },\n slottedIcon: { selector: () => '::slotted(descope-icon)' },\n};\n\nlet loadingIndicatorStyles;\n\nexport const ButtonClass = compose(\n createStyleMixin({\n mappings: {\n hostWidth: { property: 'width' },\n hostHeight: { property: 'height' },\n hostDirection: { ...host, property: 'direction' },\n fontSize: {},\n fontFamily: {},\n\n cursor: {},\n backgroundColor: {},\n\n outlineOffset: {},\n outlineColor: {},\n outlineStyle: {},\n outlineWidth: {},\n\n borderRadius: {},\n borderColor: {},\n borderStyle: {},\n borderWidth: {},\n\n verticalPadding: [{ property: 'padding-top' }, { property: 'padding-bottom' }],\n horizontalPadding: [\n { property: 'padding-right', fallback: '0.875em' },\n { property: 'padding-left', fallback: '0.875em' },\n ],\n\n labelTextColor: { property: 'color' },\n iconColor: {\n selector: () => `::slotted(*)`,\n property: IconClass.cssVarList.fill,\n },\n labelTextDecoration: { ...label, property: 'text-decoration' },\n labelSpacing: { ...label, property: 'gap' },\n textAlign: { ...label, property: 'justify-content', fallback: 'center' },\n\n iconSize: [\n { ...slottedIcon, property: 'width' },\n { ...slottedIcon, property: 'height' },\n ],\n },\n }),\n clickableMixin,\n draggableMixin,\n componentNameValidationMixin\n)(\n createProxy({\n slots: ['', 'prefix', 'label', 'suffix'],\n wrappedEleName: 'vaadin-button',\n style: () => `\n\t\t\t${resetStyles}\n\t\t\t${iconStyles}\n\t\t\t${loadingIndicatorStyles}\n\t\t\t${editorOverrides}\n\t\t\t:host {\n\t\t\t\tpadding: calc(var(${ButtonClass.cssVarList.outlineWidth}) + var(${ButtonClass.cssVarList.outlineOffset}));\n\t\t\t}\n :host([full-width=\"true\"]) {\n width: var(${ButtonClass.cssVarList.hostWidth});\n }\n\t\t\tvaadin-button {\n\t\t\t\theight: calc(var(${ButtonClass.cssVarList.hostHeight}) - var(${ButtonClass.cssVarList.outlineWidth}) - var(${ButtonClass.cssVarList.outlineOffset}));\n\t\t\t}\n\t\t\t[square=\"true\"]:not([full-width=\"true\"]) {\n\t\t\t\twidth: calc(var(${ButtonClass.cssVarList.hostWidth}) - var(${ButtonClass.cssVarList.outlineWidth}) - var(${ButtonClass.cssVarList.outlineOffset}));\n padding: 0;\n\t\t\t}\n\t\t`,\n excludeAttrsSync: ['tabindex'],\n componentName,\n })\n);\n\nconst { color, fontSize } = ButtonClass.cssVarList;\nloadingIndicatorStyles = `\n\t@keyframes spin {\n\t\t0% { -webkit-transform: rotate(0deg); }\n\t\t100% { -webkit-transform: rotate(360deg); }\n\t}\n\t:host([loading=\"true\"]) ::before {\n\t\tanimation: spin 2s linear infinite;\n\t\tposition: absolute;\n\t\tcontent: '';\n\t\tz-index: 1;\n\t\tbox-sizing: border-box;\n\t\tborder-radius: 50%;\n\t\tborder-bottom-color: transparent;\n\t\tborder-left-color: transparent;\n\t\tborder-style: solid;\n\t\tcolor: var(${color});\n\t\ttop: calc(50% - (var(${fontSize}) / 2));\n\t\tleft: calc(50% - (var(${fontSize}) / 2));\n\t\tborder-width: calc(var(${fontSize}) / 10);\n\t\twidth: var(${fontSize});\n\t\theight: var(${fontSize});\n\t}\n\t:host([disabled=\"true\"]),\n\t:host([loading=\"true\"]) {\n\t\tpointer-events: none;\n\t}\n\t:host([loading=\"true\"])::part(prefix),\n\t:host([loading=\"true\"])::part(label) {\n\t\tvisibility: hidden;\n\t}\n`;\n","export const clickableMixin = (superclass) =>\n class ClickableMixinClass extends superclass {\n get isLoading() {\n return this.getAttribute('loading') === 'true';\n }\n\n click() {\n this.isLoading || super.click();\n }\n };\n","import { componentName, ButtonClass } from './ButtonClass';\nimport '@vaadin/button';\n\ncustomElements.define(componentName, ButtonClass);\n\nexport { ButtonClass, componentName };\n","/* eslint-disable no-use-before-define */\nimport { createStyleMixin, draggableMixin, componentNameValidationMixin } from '@descope-ui/common/components-mixins';\nimport { createBaseClass } from '@descope-ui/common/base-classes';\nimport { compose } from '@descope-ui/common/utils';\nimport { getComponentName } from '@descope-ui/common/components-helpers';\nimport { createIcon } from './helpers';\nimport { injectStyle } from '@descope-ui/common/components-helpers';\n\nexport const componentName = getComponentName('icon');\n\nclass RawIcon extends createBaseClass({ componentName, baseSelector: 'slot' }) {\n static get observedAttributes() {\n return ['src'];\n }\n\n #icon;\n\n constructor() {\n super();\n\n this.attachShadow({ mode: 'open' }).innerHTML = `\n\t\t<slot></slot>\n\t`;\n\n injectStyle(\n `\n\t\t\t:host > slot {\n\t\t\t\tbox-sizing: border-box;\n\t\t\t\twidth: 100%;\n\t\t\t\theight: 100%;\n\t\t\t\tdisplay: flex;\n\t\t\t\toverflow: hidden;\n\t\t\t}\n\t\t\t:host {\n\t\t\t\tdisplay: inline-block;\n\t\t\t}\n `,\n this\n );\n }\n\n init() {\n super.init?.();\n this.toggleVisibility(this.src);\n }\n\n toggleVisibility(isVisible) {\n this.style.display = isVisible ? '' : 'none';\n }\n\n get src() {\n return this.getAttribute('src');\n }\n\n // in order to fill an SVG with `currentColor` override all of its `fill` and `path` nodes\n // with the value from the `st-fill` attribute\n // eslint-disable-next-line class-methods-use-this\n updateFillColor(node) {\n // set fill to root node and all its relevant selectors\n const elementsToReplace = [node, ...node.querySelectorAll('*[fill]')];\n\n elementsToReplace.forEach((ele) => {\n ele.setAttribute(\n 'fill',\n `var(${IconClass.cssVarList.fill}, ${ele.getAttribute('fill') || \"''\"})`\n );\n });\n }\n\n attributeChangedCallback(attrName, oldValue, newValue) {\n super.attributeChangedCallback?.(attrName, oldValue, newValue);\n\n if (oldValue === newValue) return;\n\n if (attrName === 'src') {\n this.toggleVisibility(newValue);\n\n createIcon(this.src).then((res) => {\n this.innerHTML = '';\n if (res) {\n const clonedNode = res.cloneNode(true);\n this.updateFillColor(clonedNode);\n this.appendChild(clonedNode);\n }\n });\n }\n }\n}\n\nexport const IconClass = compose(\n createStyleMixin({\n mappings: {\n fill: {},\n },\n }),\n draggableMixin,\n componentNameValidationMixin\n)(RawIcon);\n","import DOMPurify from 'dompurify';\n\nconst getFileExtension = (path) => {\n const match = path.match(/\\.([0-9a-z]+)(?:[\\\\?#]|$)/i);\n return match ? match[1] : null;\n};\n\nconst base64Prefix = 'data:image/svg+xml;base64,';\n\nconst isBase64Svg = (src) => src.startsWith(base64Prefix);\n\nconst createImgEle = (src) => {\n const ele = document.createElement('img');\n ele.setAttribute('src', src);\n return ele;\n};\n\nconst createSvgEle = (text) => {\n // we want to purify the SVG to avoid XSS attacks\n const clean = DOMPurify.sanitize(text, { USE_PROFILES: { svg: true, svgFilters: true } });\n\n const parser = new DOMParser();\n const ele = parser.parseFromString(clean, 'image/svg+xml').querySelector('svg');\n return ele;\n};\n\nexport const createIcon = async (src) => {\n try {\n let ele;\n if (isBase64Svg(src)) {\n // handle base64 source\n const svgXml = atob(src.slice(base64Prefix.length));\n ele = createSvgEle(svgXml);\n } else if (getFileExtension(src) === 'svg') {\n // handle urls\n const fetchedSrc = await fetch(src);\n const text = await fetchedSrc.text();\n ele = createSvgEle(text);\n } else {\n // handle binary\n ele = createImgEle(src);\n }\n\n ele.style.setProperty('max-width', '100%');\n ele.style.setProperty('max-height', '100%');\n\n return ele;\n } catch {\n return null;\n }\n};\n","import { 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","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"],"names":["module","exports","componentName","host","label","slottedIcon","selector","loadingIndicatorStyles","ButtonClass","mappings","hostWidth","property","hostHeight","hostDirection","fontSize","fontFamily","cursor","backgroundColor","outlineOffset","outlineColor","outlineStyle","outlineWidth","borderRadius","borderColor","borderStyle","borderWidth","verticalPadding","horizontalPadding","fallback","labelTextColor","iconColor","cssVarList","fill","labelTextDecoration","labelSpacing","textAlign","iconSize","slots","wrappedEleName","style","excludeAttrsSync","color","clickableMixin","superclass","isLoading","this","getAttribute","click","super","customElements","define","RawIcon","baseSelector","observedAttributes","constructor","attachShadow","mode","innerHTML","init","toggleVisibility","src","isVisible","display","updateFillColor","node","querySelectorAll","forEach","ele","setAttribute","IconClass","attributeChangedCallback","attrName","oldValue","newValue","then","res","clonedNode","cloneNode","appendChild","createSvgEle","text","clean","sanitize","USE_PROFILES","svg","svgFilters","DOMParser","parseFromString","querySelector","createIcon","async","startsWith","isBase64Svg","svgXml","atob","slice","base64Prefix","path","match","getFileExtension","fetchedSrc","fetch","document","createElement","createImgEle","setProperty","buttonAttrs","mapButtonAttrs","timerAttrs","mapTimerAttrs","BaseClass","icon","timer","TimerButtonClass","gap","flexDirection","shadowRoot","button","addEventListener","onTimerStarted","onTimerEnded","onClick","bind","onclick","val","includeAttrs","mapAttrs","toggleButtonDisable","reset","isDisabled","setTimeout","removeAttribute","fmt","pad","String","padStart","TimerClass","minHeight","fontWeight","lineHeight","textColor","concat","seconds","secs","parseInt","Math","max","isPaused","startInterval","setInterval","stop","stopInterval","clearInterval","dispatchEvent","CustomEvent","bubbles","pause","resume","textContent","ms","totalSeconds","floor","hours","secondsInMinute","minutes","join","formatTime","classList","toggle","paused"],"sourceRoot":""}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@descope/web-components-ui",
3
- "version": "1.47.0",
3
+ "version": "1.49.0",
4
4
  "description": "",
5
5
  "main": "dist/cjs/index.cjs.js",
6
6
  "module": "dist/index.esm.js",
@@ -85,7 +85,7 @@
85
85
  "@descope-ui/descope-autocomplete-field": "0.0.10",
86
86
  "@descope-ui/descope-address-field": "0.0.9",
87
87
  "@descope-ui/descope-timer": "0.0.3",
88
- "@descope-ui/descope-timer-button": "0.0.3"
88
+ "@descope-ui/descope-timer-button": "0.0.4"
89
89
  },
90
90
  "overrides": {
91
91
  "@vaadin/avatar": "24.3.4",