@everymatrix/casino-engagement-suite-progress-bar 1.39.3 → 1.41.0

package/dist/casino-engagement-suite-progress-bar/casino-engagement-suite-progress-bar.esm.js

@@ -1 +1 @@
-import{p as e,b as i}from"./p-212ac068.js";(()=>{const i=import.meta.url,n={};return""!==i&&(n.resourcesUrl=new URL(".",i).href),e(n)})().then((e=>i([["p-1a9eaff2",[[1,"casino-engagement-suite-progress-bar",{value:[2],disabled:[4],hidePercent:[4,"hide-percent"],clientStyling:[513,"client-styling"],clientStylingUrl:[513,"client-styling-url"],limitStylingAppends:[32]}]]]],e)));
+import{p as e,b as i}from"./p-212ac068.js";(()=>{const i=import.meta.url,n={};return""!==i&&(n.resourcesUrl=new URL(".",i).href),e(n)})().then((e=>i([["p-319a5f2e",[[1,"casino-engagement-suite-progress-bar",{value:[2],disabled:[4],hidePercent:[4,"hide-percent"],indeterminate:[4],clientStyling:[513,"client-styling"],clientStylingUrl:[513,"client-styling-url"],limitStylingAppends:[32]}]]]],e)));

package/dist/casino-engagement-suite-progress-bar/p-319a5f2e.entry.js

@@ -0,0 +1 @@
+import{r,h as e,g as s}from"./p-212ac068.js";const t=class{constructor(e){r(this,e),this.value=0,this.disabled=!1,this.hidePercent=!1,this.indeterminate=!1,this.clientStyling="",this.clientStylingUrl="",this.limitStylingAppends=!1,this.setClientStyling=()=>{let r=document.createElement("style");r.innerHTML=this.clientStyling,this.host.prepend(r)},this.setClientStylingURL=()=>{let r=new URL(this.clientStylingUrl),e=document.createElement("style");fetch(r.href).then((r=>r.text())).then((r=>{e.innerHTML=r,setTimeout((()=>{this.host.prepend(e)}),1)})).catch((r=>{console.log("Error ",r)}))}}componentDidRender(){!this.limitStylingAppends&&this.host&&(this.clientStyling&&this.setClientStyling(),this.clientStylingUrl&&this.setClientStylingURL(),this.limitStylingAppends=!0)}getProgressBarClasses(){return{ProgressBar:!0,Completed:100===this.value,Disabled:this.disabled,HidePercent:this.hidePercent||this.indeterminate}}getProgressBarLineTemplate(){return e("div",this.indeterminate?{class:"ProgressBarLine Indeterminate",part:"ProgressBarLine Indeterminate"}:{class:"ProgressBarLine",part:"ProgressBarLine",style:{width:this.value+"%"}})}render(){return e("div",{class:this.getProgressBarClasses(),part:"ProgressBar"},e("div",{class:"ProgressBarInfo",part:"ProgressBarInfo"},e("slot",{name:"Title"},e("div",null)),e("slot",{name:"Percent"},e("div",{class:"ProgressBarPercent",part:"ProgressBarPercent"},this.value,"%"))),e("div",{class:"ProgressBarBackground",part:"ProgressBarBackground"},this.getProgressBarLineTemplate()))}get host(){return s(this)}};t.style=":host{display:block;font-family:inherit}:host(.Desktop) .ProgressBarPercent{font-size:14px;line-height:14px}@keyframes indeterminate{0%{left:-200%;right:100%}60%{left:110%;right:-10%}to{left:110%;right:-10%}}.ProgressBarBackground{height:8px;background-color:var(--emw--color-background, #666178);border-radius:4px;position:relative;overflow:hidden}.ProgressBarLine{position:absolute;left:0;top:0;bottom:0;border-radius:4px;background:linear-gradient(98.25deg, #FF9400 22.48%, #FEF746 131.02%, #FFE24A 131.9%);transition:width ease-out 0.3s}.ProgressBarLine.Indeterminate{animation:indeterminate 1s linear infinite}.ProgressBarInfo{margin-bottom:8px;display:flex;justify-content:space-between;align-items:center}.ProgressBarPercent{font-weight:700;font-size:12px;line-height:12px}.HidePercent .ProgressBarPercent{display:none}.ProgressBar:not(.Disabled) .ProgressBarPercent{background:linear-gradient(98.25deg, #FF9400 22.48%, #FEF746 131.02%, #FFE24A 131.9%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}.ProgressBar.Disabled .ProgressBarPercent{color:var(--emw--color-background, #666178)}.ProgressBar.Disabled .ProgressBarLine{background:var(--emw--color-background-secondary, #474668)}";export{t as casino_engagement_suite_progress_bar}

package/dist/cjs/casino-engagement-suite-progress-bar.cjs.entry.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-7f32df08.js');
 
-const casinoEngagementSuiteProgressBarCss = ":host{display:block;font-family:inherit}:host(.Desktop) .ProgressBarPercent{font-size:14px;line-height:14px}.ProgressBarBackground{height:8px;background-color:var(--emw--color-background, #666178);border-radius:4px;position:relative}.ProgressBarLine{position:absolute;left:0;top:0;bottom:0;border-radius:4px;background:linear-gradient(98.25deg, #FF9400 22.48%, #FEF746 131.02%, #FFE24A 131.9%);transition:width ease-out 0.3s}.ProgressBarInfo{margin-bottom:8px;display:flex;justify-content:space-between;align-items:center}.ProgressBarPercent{font-weight:700;font-size:12px;line-height:12px}.HidePercent .ProgressBarPercent{display:none}.ProgressBar:not(.Disabled) .ProgressBarPercent{background:linear-gradient(98.25deg, #FF9400 22.48%, #FEF746 131.02%, #FFE24A 131.9%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}.ProgressBar.Disabled .ProgressBarPercent{color:var(--emw--color-background, #666178)}.ProgressBar.Disabled .ProgressBarLine{background:var(--emw--color-background-secondary, #474668)}";
+const casinoEngagementSuiteProgressBarCss = ":host{display:block;font-family:inherit}:host(.Desktop) .ProgressBarPercent{font-size:14px;line-height:14px}@keyframes indeterminate{0%{left:-200%;right:100%}60%{left:110%;right:-10%}to{left:110%;right:-10%}}.ProgressBarBackground{height:8px;background-color:var(--emw--color-background, #666178);border-radius:4px;position:relative;overflow:hidden}.ProgressBarLine{position:absolute;left:0;top:0;bottom:0;border-radius:4px;background:linear-gradient(98.25deg, #FF9400 22.48%, #FEF746 131.02%, #FFE24A 131.9%);transition:width ease-out 0.3s}.ProgressBarLine.Indeterminate{animation:indeterminate 1s linear infinite}.ProgressBarInfo{margin-bottom:8px;display:flex;justify-content:space-between;align-items:center}.ProgressBarPercent{font-weight:700;font-size:12px;line-height:12px}.HidePercent .ProgressBarPercent{display:none}.ProgressBar:not(.Disabled) .ProgressBarPercent{background:linear-gradient(98.25deg, #FF9400 22.48%, #FEF746 131.02%, #FFE24A 131.9%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}.ProgressBar.Disabled .ProgressBarPercent{color:var(--emw--color-background, #666178)}.ProgressBar.Disabled .ProgressBarLine{background:var(--emw--color-background-secondary, #474668)}";
 
 const CasinoEngagementSuiteProgressBar = class {
   constructor(hostRef) {
@@ -21,6 +21,10 @@ const CasinoEngagementSuiteProgressBar = class {
      * Hide percent value
      */
     this.hidePercent = false;
+    /**
+     * Constantly animates
+     */
+    this.indeterminate = false;
     /**
      * Client custom styling via string
      */
@@ -63,11 +67,19 @@ const CasinoEngagementSuiteProgressBar = class {
       ProgressBar: true,
       Completed: this.value === 100,
       Disabled: this.disabled,
-      HidePercent: this.hidePercent
+      HidePercent: this.hidePercent || this.indeterminate
     };
   }
+  getProgressBarLineTemplate() {
+    if (this.indeterminate) {
+      return index.h("div", { class: "ProgressBarLine Indeterminate", part: "ProgressBarLine Indeterminate" });
+    }
+    else {
+      return index.h("div", { class: "ProgressBarLine", part: "ProgressBarLine", style: { width: this.value + '%' } });
+    }
+  }
   render() {
-    return index.h("div", { class: this.getProgressBarClasses(), part: "ProgressBar" }, index.h("div", { class: "ProgressBarInfo", part: "ProgressBarInfo" }, index.h("slot", { name: "Title" }, index.h("div", null)), index.h("slot", { name: "Percent" }, index.h("div", { class: "ProgressBarPercent", part: "ProgressBarPercent" }, this.value, "%"))), index.h("div", { class: "ProgressBarBackground", part: "ProgressBarBackground" }, index.h("div", { class: "ProgressBarLine", part: "ProgressBarLine", style: { width: this.value + '%' } })));
+    return index.h("div", { class: this.getProgressBarClasses(), part: "ProgressBar" }, index.h("div", { class: "ProgressBarInfo", part: "ProgressBarInfo" }, index.h("slot", { name: "Title" }, index.h("div", null)), index.h("slot", { name: "Percent" }, index.h("div", { class: "ProgressBarPercent", part: "ProgressBarPercent" }, this.value, "%"))), index.h("div", { class: "ProgressBarBackground", part: "ProgressBarBackground" }, this.getProgressBarLineTemplate()));
   }
   get host() { return index.getElement(this); }
 };

package/dist/cjs/casino-engagement-suite-progress-bar.cjs.js

@@ -15,5 +15,5 @@ const patchBrowser = () => {
 };
 
 patchBrowser().then(options => {
-  return index.bootstrapLazy([["casino-engagement-suite-progress-bar.cjs",[[1,"casino-engagement-suite-progress-bar",{"value":[2],"disabled":[4],"hidePercent":[4,"hide-percent"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"limitStylingAppends":[32]}]]]], options);
+  return index.bootstrapLazy([["casino-engagement-suite-progress-bar.cjs",[[1,"casino-engagement-suite-progress-bar",{"value":[2],"disabled":[4],"hidePercent":[4,"hide-percent"],"indeterminate":[4],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"limitStylingAppends":[32]}]]]], options);
 });

package/dist/cjs/loader.cjs.js

@@ -14,7 +14,7 @@ const patchEsm = () => {
 const defineCustomElements = (win, options) => {
   if (typeof window === 'undefined') return Promise.resolve();
   return patchEsm().then(() => {
-  return index.bootstrapLazy([["casino-engagement-suite-progress-bar.cjs",[[1,"casino-engagement-suite-progress-bar",{"value":[2],"disabled":[4],"hidePercent":[4,"hide-percent"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"limitStylingAppends":[32]}]]]], options);
+  return index.bootstrapLazy([["casino-engagement-suite-progress-bar.cjs",[[1,"casino-engagement-suite-progress-bar",{"value":[2],"disabled":[4],"hidePercent":[4,"hide-percent"],"indeterminate":[4],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"limitStylingAppends":[32]}]]]], options);
   });
 };
 

package/dist/collection/components/casino-engagement-suite-progress-bar/casino-engagement-suite-progress-bar.css

@@ -8,11 +8,26 @@
   line-height: 14px;
 }
 
+@keyframes indeterminate {
+  0% {
+    left: -200%;
+    right: 100%;
+  }
+  60% {
+    left: 110%;
+    right: -10%;
+  }
+  to {
+    left: 110%;
+    right: -10%;
+  }
+}
 .ProgressBarBackground {
   height: 8px;
   background-color: var(--emw--color-background, #666178);
   border-radius: 4px;
   position: relative;
+  overflow: hidden;
 }
 
 .ProgressBarLine {
@@ -24,6 +39,9 @@
   background: linear-gradient(98.25deg, #FF9400 22.48%, #FEF746 131.02%, #FFE24A 131.9%);
   transition: width ease-out 0.3s;
 }
+.ProgressBarLine.Indeterminate {
+  animation: indeterminate 1s linear infinite;
+}
 
 .ProgressBarInfo {
   margin-bottom: 8px;

package/dist/collection/components/casino-engagement-suite-progress-bar/casino-engagement-suite-progress-bar.js

@@ -13,6 +13,10 @@ export class CasinoEngagementSuiteProgressBar {
      * Hide percent value
      */
     this.hidePercent = false;
+    /**
+     * Constantly animates
+     */
+    this.indeterminate = false;
     /**
      * Client custom styling via string
      */
@@ -55,9 +59,17 @@ export class CasinoEngagementSuiteProgressBar {
       ProgressBar: true,
       Completed: this.value === 100,
       Disabled: this.disabled,
-      HidePercent: this.hidePercent
+      HidePercent: this.hidePercent || this.indeterminate
     };
   }
+  getProgressBarLineTemplate() {
+    if (this.indeterminate) {
+      return h("div", { class: "ProgressBarLine Indeterminate", part: "ProgressBarLine Indeterminate" });
+    }
+    else {
+      return h("div", { class: "ProgressBarLine", part: "ProgressBarLine", style: { width: this.value + '%' } });
+    }
+  }
   render() {
     return h("div", { class: this.getProgressBarClasses(), part: "ProgressBar" },
       h("div", { class: "ProgressBarInfo", part: "ProgressBarInfo" },
@@ -67,8 +79,7 @@ export class CasinoEngagementSuiteProgressBar {
           h("div", { class: "ProgressBarPercent", part: "ProgressBarPercent" },
             this.value,
             "%"))),
-      h("div", { class: "ProgressBarBackground", part: "ProgressBarBackground" },
-        h("div", { class: "ProgressBarLine", part: "ProgressBarLine", style: { width: this.value + '%' } })));
+      h("div", { class: "ProgressBarBackground", part: "ProgressBarBackground" }, this.getProgressBarLineTemplate()));
   }
   static get is() { return "casino-engagement-suite-progress-bar"; }
   static get encapsulation() { return "shadow"; }
@@ -133,6 +144,24 @@ export class CasinoEngagementSuiteProgressBar {
       "reflect": false,
       "defaultValue": "false"
     },
+    "indeterminate": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Constantly animates"
+      },
+      "attribute": "indeterminate",
+      "reflect": false,
+      "defaultValue": "false"
+    },
     "clientStyling": {
       "type": "string",
       "mutable": false,

package/dist/components/casino-engagement-suite-progress-bar.js

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
 
-const casinoEngagementSuiteProgressBarCss = ":host{display:block;font-family:inherit}:host(.Desktop) .ProgressBarPercent{font-size:14px;line-height:14px}.ProgressBarBackground{height:8px;background-color:var(--emw--color-background, #666178);border-radius:4px;position:relative}.ProgressBarLine{position:absolute;left:0;top:0;bottom:0;border-radius:4px;background:linear-gradient(98.25deg, #FF9400 22.48%, #FEF746 131.02%, #FFE24A 131.9%);transition:width ease-out 0.3s}.ProgressBarInfo{margin-bottom:8px;display:flex;justify-content:space-between;align-items:center}.ProgressBarPercent{font-weight:700;font-size:12px;line-height:12px}.HidePercent .ProgressBarPercent{display:none}.ProgressBar:not(.Disabled) .ProgressBarPercent{background:linear-gradient(98.25deg, #FF9400 22.48%, #FEF746 131.02%, #FFE24A 131.9%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}.ProgressBar.Disabled .ProgressBarPercent{color:var(--emw--color-background, #666178)}.ProgressBar.Disabled .ProgressBarLine{background:var(--emw--color-background-secondary, #474668)}";
+const casinoEngagementSuiteProgressBarCss = ":host{display:block;font-family:inherit}:host(.Desktop) .ProgressBarPercent{font-size:14px;line-height:14px}@keyframes indeterminate{0%{left:-200%;right:100%}60%{left:110%;right:-10%}to{left:110%;right:-10%}}.ProgressBarBackground{height:8px;background-color:var(--emw--color-background, #666178);border-radius:4px;position:relative;overflow:hidden}.ProgressBarLine{position:absolute;left:0;top:0;bottom:0;border-radius:4px;background:linear-gradient(98.25deg, #FF9400 22.48%, #FEF746 131.02%, #FFE24A 131.9%);transition:width ease-out 0.3s}.ProgressBarLine.Indeterminate{animation:indeterminate 1s linear infinite}.ProgressBarInfo{margin-bottom:8px;display:flex;justify-content:space-between;align-items:center}.ProgressBarPercent{font-weight:700;font-size:12px;line-height:12px}.HidePercent .ProgressBarPercent{display:none}.ProgressBar:not(.Disabled) .ProgressBarPercent{background:linear-gradient(98.25deg, #FF9400 22.48%, #FEF746 131.02%, #FFE24A 131.9%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}.ProgressBar.Disabled .ProgressBarPercent{color:var(--emw--color-background, #666178)}.ProgressBar.Disabled .ProgressBarLine{background:var(--emw--color-background-secondary, #474668)}";
 
 const CasinoEngagementSuiteProgressBar$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
@@ -19,6 +19,10 @@ const CasinoEngagementSuiteProgressBar$1 = /*@__PURE__*/ proxyCustomElement(clas
      * Hide percent value
      */
     this.hidePercent = false;
+    /**
+     * Constantly animates
+     */
+    this.indeterminate = false;
     /**
      * Client custom styling via string
      */
@@ -61,11 +65,19 @@ const CasinoEngagementSuiteProgressBar$1 = /*@__PURE__*/ proxyCustomElement(clas
       ProgressBar: true,
       Completed: this.value === 100,
       Disabled: this.disabled,
-      HidePercent: this.hidePercent
+      HidePercent: this.hidePercent || this.indeterminate
     };
   }
+  getProgressBarLineTemplate() {
+    if (this.indeterminate) {
+      return h("div", { class: "ProgressBarLine Indeterminate", part: "ProgressBarLine Indeterminate" });
+    }
+    else {
+      return h("div", { class: "ProgressBarLine", part: "ProgressBarLine", style: { width: this.value + '%' } });
+    }
+  }
   render() {
-    return h("div", { class: this.getProgressBarClasses(), part: "ProgressBar" }, h("div", { class: "ProgressBarInfo", part: "ProgressBarInfo" }, h("slot", { name: "Title" }, h("div", null)), h("slot", { name: "Percent" }, h("div", { class: "ProgressBarPercent", part: "ProgressBarPercent" }, this.value, "%"))), h("div", { class: "ProgressBarBackground", part: "ProgressBarBackground" }, h("div", { class: "ProgressBarLine", part: "ProgressBarLine", style: { width: this.value + '%' } })));
+    return h("div", { class: this.getProgressBarClasses(), part: "ProgressBar" }, h("div", { class: "ProgressBarInfo", part: "ProgressBarInfo" }, h("slot", { name: "Title" }, h("div", null)), h("slot", { name: "Percent" }, h("div", { class: "ProgressBarPercent", part: "ProgressBarPercent" }, this.value, "%"))), h("div", { class: "ProgressBarBackground", part: "ProgressBarBackground" }, this.getProgressBarLineTemplate()));
   }
   get host() { return this; }
   static get style() { return casinoEngagementSuiteProgressBarCss; }
@@ -73,6 +85,7 @@ const CasinoEngagementSuiteProgressBar$1 = /*@__PURE__*/ proxyCustomElement(clas
     "value": [2],
     "disabled": [4],
     "hidePercent": [4, "hide-percent"],
+    "indeterminate": [4],
     "clientStyling": [513, "client-styling"],
     "clientStylingUrl": [513, "client-styling-url"],
     "limitStylingAppends": [32]

package/dist/esm/casino-engagement-suite-progress-bar.entry.js

@@ -1,6 +1,6 @@
 import { r as registerInstance, h, g as getElement } from './index-5b84ef46.js';
 
-const casinoEngagementSuiteProgressBarCss = ":host{display:block;font-family:inherit}:host(.Desktop) .ProgressBarPercent{font-size:14px;line-height:14px}.ProgressBarBackground{height:8px;background-color:var(--emw--color-background, #666178);border-radius:4px;position:relative}.ProgressBarLine{position:absolute;left:0;top:0;bottom:0;border-radius:4px;background:linear-gradient(98.25deg, #FF9400 22.48%, #FEF746 131.02%, #FFE24A 131.9%);transition:width ease-out 0.3s}.ProgressBarInfo{margin-bottom:8px;display:flex;justify-content:space-between;align-items:center}.ProgressBarPercent{font-weight:700;font-size:12px;line-height:12px}.HidePercent .ProgressBarPercent{display:none}.ProgressBar:not(.Disabled) .ProgressBarPercent{background:linear-gradient(98.25deg, #FF9400 22.48%, #FEF746 131.02%, #FFE24A 131.9%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}.ProgressBar.Disabled .ProgressBarPercent{color:var(--emw--color-background, #666178)}.ProgressBar.Disabled .ProgressBarLine{background:var(--emw--color-background-secondary, #474668)}";
+const casinoEngagementSuiteProgressBarCss = ":host{display:block;font-family:inherit}:host(.Desktop) .ProgressBarPercent{font-size:14px;line-height:14px}@keyframes indeterminate{0%{left:-200%;right:100%}60%{left:110%;right:-10%}to{left:110%;right:-10%}}.ProgressBarBackground{height:8px;background-color:var(--emw--color-background, #666178);border-radius:4px;position:relative;overflow:hidden}.ProgressBarLine{position:absolute;left:0;top:0;bottom:0;border-radius:4px;background:linear-gradient(98.25deg, #FF9400 22.48%, #FEF746 131.02%, #FFE24A 131.9%);transition:width ease-out 0.3s}.ProgressBarLine.Indeterminate{animation:indeterminate 1s linear infinite}.ProgressBarInfo{margin-bottom:8px;display:flex;justify-content:space-between;align-items:center}.ProgressBarPercent{font-weight:700;font-size:12px;line-height:12px}.HidePercent .ProgressBarPercent{display:none}.ProgressBar:not(.Disabled) .ProgressBarPercent{background:linear-gradient(98.25deg, #FF9400 22.48%, #FEF746 131.02%, #FFE24A 131.9%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}.ProgressBar.Disabled .ProgressBarPercent{color:var(--emw--color-background, #666178)}.ProgressBar.Disabled .ProgressBarLine{background:var(--emw--color-background-secondary, #474668)}";
 
 const CasinoEngagementSuiteProgressBar = class {
   constructor(hostRef) {
@@ -17,6 +17,10 @@ const CasinoEngagementSuiteProgressBar = class {
      * Hide percent value
      */
     this.hidePercent = false;
+    /**
+     * Constantly animates
+     */
+    this.indeterminate = false;
     /**
      * Client custom styling via string
      */
@@ -59,11 +63,19 @@ const CasinoEngagementSuiteProgressBar = class {
       ProgressBar: true,
       Completed: this.value === 100,
       Disabled: this.disabled,
-      HidePercent: this.hidePercent
+      HidePercent: this.hidePercent || this.indeterminate
     };
   }
+  getProgressBarLineTemplate() {
+    if (this.indeterminate) {
+      return h("div", { class: "ProgressBarLine Indeterminate", part: "ProgressBarLine Indeterminate" });
+    }
+    else {
+      return h("div", { class: "ProgressBarLine", part: "ProgressBarLine", style: { width: this.value + '%' } });
+    }
+  }
   render() {
-    return h("div", { class: this.getProgressBarClasses(), part: "ProgressBar" }, h("div", { class: "ProgressBarInfo", part: "ProgressBarInfo" }, h("slot", { name: "Title" }, h("div", null)), h("slot", { name: "Percent" }, h("div", { class: "ProgressBarPercent", part: "ProgressBarPercent" }, this.value, "%"))), h("div", { class: "ProgressBarBackground", part: "ProgressBarBackground" }, h("div", { class: "ProgressBarLine", part: "ProgressBarLine", style: { width: this.value + '%' } })));
+    return h("div", { class: this.getProgressBarClasses(), part: "ProgressBar" }, h("div", { class: "ProgressBarInfo", part: "ProgressBarInfo" }, h("slot", { name: "Title" }, h("div", null)), h("slot", { name: "Percent" }, h("div", { class: "ProgressBarPercent", part: "ProgressBarPercent" }, this.value, "%"))), h("div", { class: "ProgressBarBackground", part: "ProgressBarBackground" }, this.getProgressBarLineTemplate()));
   }
   get host() { return getElement(this); }
 };

package/dist/esm/casino-engagement-suite-progress-bar.js

@@ -13,5 +13,5 @@ const patchBrowser = () => {
 };
 
 patchBrowser().then(options => {
-  return bootstrapLazy([["casino-engagement-suite-progress-bar",[[1,"casino-engagement-suite-progress-bar",{"value":[2],"disabled":[4],"hidePercent":[4,"hide-percent"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"limitStylingAppends":[32]}]]]], options);
+  return bootstrapLazy([["casino-engagement-suite-progress-bar",[[1,"casino-engagement-suite-progress-bar",{"value":[2],"disabled":[4],"hidePercent":[4,"hide-percent"],"indeterminate":[4],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"limitStylingAppends":[32]}]]]], options);
 });

package/dist/esm/loader.js

@@ -10,7 +10,7 @@ const patchEsm = () => {
 const defineCustomElements = (win, options) => {
   if (typeof window === 'undefined') return Promise.resolve();
   return patchEsm().then(() => {
-  return bootstrapLazy([["casino-engagement-suite-progress-bar",[[1,"casino-engagement-suite-progress-bar",{"value":[2],"disabled":[4],"hidePercent":[4,"hide-percent"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"limitStylingAppends":[32]}]]]], options);
+  return bootstrapLazy([["casino-engagement-suite-progress-bar",[[1,"casino-engagement-suite-progress-bar",{"value":[2],"disabled":[4],"hidePercent":[4,"hide-percent"],"indeterminate":[4],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"limitStylingAppends":[32]}]]]], options);
   });
 };
 

package/dist/types/components/casino-engagement-suite-progress-bar/casino-engagement-suite-progress-bar.d.ts

@@ -11,6 +11,10 @@ export declare class CasinoEngagementSuiteProgressBar {
    * Hide percent value
    */
   hidePercent: boolean;
+  /**
+   * Constantly animates
+   */
+  indeterminate: boolean;
   /**
    * Client custom styling via string
    */
@@ -30,5 +34,6 @@ export declare class CasinoEngagementSuiteProgressBar {
     Disabled: boolean;
     HidePercent: boolean;
   };
+  getProgressBarLineTemplate(): any;
   render(): any;
 }

package/dist/types/components.d.ts

@@ -23,6 +23,10 @@ export namespace Components {
           * Hide percent value
          */
         "hidePercent": boolean;
+        /**
+          * Constantly animates
+         */
+        "indeterminate": boolean;
         /**
           * Value for the widget
          */
@@ -58,6 +62,10 @@ declare namespace LocalJSX {
           * Hide percent value
          */
         "hidePercent"?: boolean;
+        /**
+          * Constantly animates
+         */
+        "indeterminate"?: boolean;
         /**
           * Value for the widget
          */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@everymatrix/casino-engagement-suite-progress-bar",
-  "version": "1.39.3",
+  "version": "1.41.0",
   "main": "./dist/index.cjs.js",
   "module": "./dist/index.js",
   "es2015": "./dist/esm/index.mjs",

package/dist/casino-engagement-suite-progress-bar/p-1a9eaff2.entry.js

@@ -1 +0,0 @@
-import{r,h as e,g as s}from"./p-212ac068.js";const t=class{constructor(e){r(this,e),this.value=0,this.disabled=!1,this.hidePercent=!1,this.clientStyling="",this.clientStylingUrl="",this.limitStylingAppends=!1,this.setClientStyling=()=>{let r=document.createElement("style");r.innerHTML=this.clientStyling,this.host.prepend(r)},this.setClientStylingURL=()=>{let r=new URL(this.clientStylingUrl),e=document.createElement("style");fetch(r.href).then((r=>r.text())).then((r=>{e.innerHTML=r,setTimeout((()=>{this.host.prepend(e)}),1)})).catch((r=>{console.log("Error ",r)}))}}componentDidRender(){!this.limitStylingAppends&&this.host&&(this.clientStyling&&this.setClientStyling(),this.clientStylingUrl&&this.setClientStylingURL(),this.limitStylingAppends=!0)}getProgressBarClasses(){return{ProgressBar:!0,Completed:100===this.value,Disabled:this.disabled,HidePercent:this.hidePercent}}render(){return e("div",{class:this.getProgressBarClasses(),part:"ProgressBar"},e("div",{class:"ProgressBarInfo",part:"ProgressBarInfo"},e("slot",{name:"Title"},e("div",null)),e("slot",{name:"Percent"},e("div",{class:"ProgressBarPercent",part:"ProgressBarPercent"},this.value,"%"))),e("div",{class:"ProgressBarBackground",part:"ProgressBarBackground"},e("div",{class:"ProgressBarLine",part:"ProgressBarLine",style:{width:this.value+"%"}})))}get host(){return s(this)}};t.style=":host{display:block;font-family:inherit}:host(.Desktop) .ProgressBarPercent{font-size:14px;line-height:14px}.ProgressBarBackground{height:8px;background-color:var(--emw--color-background, #666178);border-radius:4px;position:relative}.ProgressBarLine{position:absolute;left:0;top:0;bottom:0;border-radius:4px;background:linear-gradient(98.25deg, #FF9400 22.48%, #FEF746 131.02%, #FFE24A 131.9%);transition:width ease-out 0.3s}.ProgressBarInfo{margin-bottom:8px;display:flex;justify-content:space-between;align-items:center}.ProgressBarPercent{font-weight:700;font-size:12px;line-height:12px}.HidePercent .ProgressBarPercent{display:none}.ProgressBar:not(.Disabled) .ProgressBarPercent{background:linear-gradient(98.25deg, #FF9400 22.48%, #FEF746 131.02%, #FFE24A 131.9%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}.ProgressBar.Disabled .ProgressBarPercent{color:var(--emw--color-background, #666178)}.ProgressBar.Disabled .ProgressBarLine{background:var(--emw--color-background-secondary, #474668)}";export{t as casino_engagement_suite_progress_bar}