@everymatrix/casino-engagement-suite-challenges-list 1.39.3 → 1.41.0

package/dist/components/casino-engagement-suite-progress-bar2.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 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
@@ -19,6 +19,10 @@ const CasinoEngagementSuiteProgressBar = /*@__PURE__*/ proxyCustomElement(class
      * Hide percent value
      */
     this.hidePercent = false;
+    /**
+     * Constantly animates
+     */
+    this.indeterminate = false;
     /**
      * Client custom styling via string
      */
@@ -61,11 +65,19 @@ const CasinoEngagementSuiteProgressBar = /*@__PURE__*/ proxyCustomElement(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 this; }
   static get style() { return casinoEngagementSuiteProgressBarCss; }
@@ -73,6 +85,7 @@ const CasinoEngagementSuiteProgressBar = /*@__PURE__*/ proxyCustomElement(class
     "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-challenges-list.js

@@ -1,4 +1,4 @@
-import { p as promiseResolve, b as bootstrapLazy } from './index-ae2f8404.js';
+import { p as promiseResolve, b as bootstrapLazy } from './index-ddf7e990.js';
 
 /*
  Stencil Client Patch Browser v2.15.2 | MIT Licensed | https://stenciljs.com
@@ -13,5 +13,5 @@ const patchBrowser = () => {
 };
 
 patchBrowser().then(options => {
-  return bootstrapLazy([["casino-engagement-suite-challenges-list_2",[[1,"casino-engagement-suite-challenges-list",{"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"language":[1],"device":[1],"challenges":[1040],"isJoiningToChallenge":[1028,"is-joining-to-challenge"],"inProgressChallenges":[1040],"pausedChallengeIds":[1040],"tooltip":[32],"timers":[32],"limitStylingAppends":[32]}],[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-challenges-list_2",[[1,"casino-engagement-suite-challenges-list",{"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"language":[1],"device":[1],"challenges":[1040],"isJoiningToChallenge":[1028,"is-joining-to-challenge"],"inProgressChallenges":[1040],"pausedChallengeIds":[1040],"tooltip":[32],"timers":[32],"limitStylingAppends":[32],"activeTab":[32],"historyLoading":[32],"challengesHistory":[32],"openedHistoryIds":[32]},[[8,"message","handleEvent"]]],[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);
 });