@saasquatch/mint-components 1.3.2-16 → 1.3.2-17

package/dist/collection/components/sqm-reward-exchange-list/sqm-reward-exchange-list-view.js

@@ -2,6 +2,7 @@ import { getAssetPath, h } from "@stencil/core";
 import jss from "jss";
 import preset from "jss-preset-default";
 import { intl } from "../../global/global";
+import { HostBlock } from "../../global/mixins";
 import { ProgressBar } from "./progressBar";
 import { ExchangeArrows, CheckMark } from "./SVGs";
 const stageList = ["chooseReward", "chooseAmount", "confirmation", "success"];
@@ -11,7 +12,9 @@ const stageProgressList = {
   confirmation: "Confirm",
 };
 export function RewardExchangeView(props) {
+  console.log(props);
   const style = {
+    HostBlock: HostBlock,
     Container: {
       padding: "var(--sl-spacing-medium)",
       position: "relative",
@@ -38,6 +41,34 @@ export function RewardExchangeView(props) {
         display: "flex",
         width: "100%",
       },
+      "& .text-area": {
+        textAlign: "left",
+        padding: "8px",
+      },
+      "& .title": {
+        fontSize: "var(--sl-font-size-medium)",
+        fontWeight: "var(--sl-font-weight-semibold)",
+      },
+      "& .amount": {
+        fontSize: "var(--sl-font-size-small)",
+      },
+      "& .error": {
+        fontSize: "var(--sl-font-size-small)",
+        color: "var(--sl-color-warning-500)",
+      },
+      "& .selected-outline": {
+        width: "18px",
+        height: "18px",
+        borderRadius: "50%",
+        background: "var(--sl-color-primary-500)",
+        position: "relative",
+        margin: "-9px",
+        left: "100%",
+      },
+      "& .selected-checkmark": {
+        position: "relative",
+        top: "-6px",
+      },
     },
     Drawer: {
       "&::part(base)": {
@@ -55,7 +86,9 @@ export function RewardExchangeView(props) {
     FullImage: {
       objectFit: "contain",
       maxWidth: "100%",
-      height: "100px",
+      height: "150px",
+      display: "flex",
+      margin: "0 auto",
     },
     PreviewImage: {
       objectFit: "contain",
@@ -111,24 +144,30 @@ export function RewardExchangeView(props) {
     },
     KutayButton: {
       display: "flex",
-      flexWrap: "wrap",
+      flexWrap: "wrap-reverse",
       margin: "var(--sl-spacing-medium) 0",
       "& .cancel": {
-        width: "20%",
         marginLeft: "auto",
         marginRight: "var(--sl-spacing-medium)",
         "&::part(base)": {
           fontWeight: "var(--sl-font-weight-normal)",
           color: "var(--sl-color-neutral-1000)",
         },
+        "@media (max-width: 1024px)": {
+          width: "100%",
+          marginRight: "0",
+        },
       },
       "& .continue": {
-        width: "20%",
         "&::part(base)": {
-          background: "var(--sl-color-neutral-500)",
+          background: "var(--sl-color-primary-500)",
+          borderColor: "var(--sl-color-primary-500)",
           fontWeight: "var(--sl-font-weight-normal)",
           color: "var(--sl-color-neutral-0)",
         },
+        "@media (max-width: 1024px)": {
+          width: "100%",
+        },
       },
     },
   };
@@ -142,7 +181,7 @@ export function RewardExchangeView(props) {
     var _a, _b;
     const item = states.selectedItem;
     if (!item || (item === null || item === void 0 ? void 0 : item.ruleType) === "FIXED_GLOBAL_REWARD")
-      return h("span", null);
+      return h("span", null, item === null || item === void 0 ? void 0 : item.prettySourceValue);
     if (!((_a = item.steps) === null || _a === void 0 ? void 0 : _a.length)) {
       return h("p", null,
         "Not enough ",
@@ -155,14 +194,19 @@ export function RewardExchangeView(props) {
           amount: (_c = (_b = (_a = e.detail) === null || _a === void 0 ? void 0 : _a.item) === null || _b === void 0 ? void 0 : _b.value) === null || _c === void 0 ? void 0 : _c.sourceValue,
           selectedStep: (_e = (_d = e.detail) === null || _d === void 0 ? void 0 : _d.item) === null || _e === void 0 ? void 0 : _e.value,
         });
-      } }, (_b = item.steps) === null || _b === void 0 ? void 0 : _b.map((step) => (h("sl-menu-item", { value: step, disabled: !step.available },
-      step.prettyDestinationValue,
-      h("div", { slot: "suffix", style: { fontSize: "75%", float: "right" } },
-        step.prettySourceValue,
-        step.unavailableReasonCode && (h("p", { style: { fontSize: "70%", color: "#F2994A" } }, intl.formatMessage({
-          id: "unavailableCode",
-          defaultMessage: states.content.text.notAvailableError,
-        }, { unavailableReason: step.unavailableReason || step.unavailableReasonCode })))))))));
+      } }, (_b = item.steps) === null || _b === void 0 ? void 0 : _b.map((step) => {
+      var _a, _b;
+      return (h("sl-menu-item", { value: step, disabled: !step.available },
+        step.prettyDestinationValue,
+        h("div", { slot: "suffix", style: { fontSize: "75%", float: "right" } },
+          step.prettySourceValue,
+          step.unavailableReasonCode && (h("p", { style: { fontSize: "70%", color: "#F2994A" } }, intl.formatMessage({
+            id: "unavailableCode",
+            defaultMessage: (_b = (_a = states.content) === null || _a === void 0 ? void 0 : _a.text) === null || _b === void 0 ? void 0 : _b.notAvailableError,
+          }, {
+            unavailableReason: step.unavailableReason || step.unavailableReasonCode,
+          }))))));
+    })));
   }
   function chooseReward() {
     var _a;
@@ -173,6 +217,7 @@ export function RewardExchangeView(props) {
           gap: "20px",
           gridTemplateColumns: "repeat(auto-fill, minmax(300px, 1fr))",
         } }, (_a = data.exchangeList) === null || _a === void 0 ? void 0 : _a.map((item) => {
+        var _a, _b;
         const style = {
           boxShadow: item.key === (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.key)
             ? "0 0 0 2px var(--sl-color-primary-500)"
@@ -189,36 +234,21 @@ export function RewardExchangeView(props) {
         return (h("div", { key: item.key, class: item.available ? sheet.classes.CardContainer : "", style: style },
           h("sl-card", { class: sheet.classes.Base, onClick: () => item.available &&
               callbacks.setExchangeState({ selectedItem: item }) },
-            item.key === (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.key) && (h("div", { style: {
-                width: "18px",
-                height: "18px",
-                borderRadius: "50%",
-                background: "var(--sl-color-primary-500)",
-                position: "relative",
-                margin: "-9px",
-                left: "350px",
-              } },
-              h("div", { style: { position: "relative", top: "-6px" } },
+            item.key === (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.key) && (h("div", { class: "selected-outline" },
+              h("div", { class: "selected-checkmark" },
                 h(CheckMark, null)))),
             // item?.imageUrl &&
             h("img", { class: sheet.classes.PreviewImage, src: (item === null || item === void 0 ? void 0 : item.imageUrl) || getAssetPath("./assets/Reward-icon.png") }),
-            h("p", { style: {
-                textAlign: "left",
-                margin: "0",
-                flex: "1",
-                fontSize: "90%",
-                padding: "8px",
-              } },
-              h("b", null, item.description),
-              h("p", { style: { margin: "0" } }, amount),
-              item.unavailableReasonCode && (h("p", { style: {
-                  fontSize: "70%",
-                  color: "#F2994A",
-                  marginTop: "0",
-                } }, intl.formatMessage({
+            h("div", { class: "text-area" },
+              h("div", { class: "title" }, item.description),
+              h("div", { class: "amount" }, amount),
+              item.unavailableReasonCode && (h("div", { class: "error" }, intl.formatMessage({
                 id: "unavailableCode",
-                defaultMessage: states.content.text.notAvailableError,
-              }, { unavailableReason: item.unavailableReason || item.unavailableReasonCode })))))));
+                defaultMessage: (_b = (_a = states.content) === null || _a === void 0 ? void 0 : _a.text) === null || _b === void 0 ? void 0 : _b.notAvailableError,
+              }, {
+                unavailableReason: item.unavailableReason ||
+                  item.unavailableReasonCode,
+              })))))));
       })),
       h("div", { class: sheet.classes.KutayButton },
         h("sl-button", { class: "cancel", size: "large", type: "text" }, "Cancel"),
@@ -226,21 +256,28 @@ export function RewardExchangeView(props) {
     ];
   }
   function chooseAmount() {
+    var _a;
     const input = getInput();
+    const isDisabled = ((_a = states.selectedItem) === null || _a === void 0 ? void 0 : _a.ruleType) === "FIXED_GLOBAL_REWARD"
+      ? false
+      : input && !states.amount;
     return (h("div", null,
-      h("div", { style: { width: "50%", margin: "0 auto" } }, (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.imageUrl) && (h("img", { class: sheet.classes.FullImage, src: selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.imageUrl }))),
-      h("p", null, selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.description),
+      h("div", null, 
+      //selectedItem?.imageUrl &&
+      h("img", { class: sheet.classes.FullImage, src: (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.imageUrl) ||
+          getAssetPath("./assets/Reward-icon.png") })),
+      h("b", null, selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.description),
       h("div", { class: sheet.classes.InputBox }, input),
       h("div", { class: sheet.classes.KutayButton },
         h("sl-button", { class: "cancel", size: "large", type: "text", onClick: () => callbacks.resetState() }, "Cancel"),
-        h("sl-button", { class: "continue", size: "large", onClick: () => callbacks.setStage("confirmation"), disabled: input && !states.amount }, "Continue to confirmation"))));
+        h("sl-button", { class: "continue", size: "large", onClick: () => callbacks.setStage("confirmation"), disabled: isDisabled }, "Continue to confirmation"))));
   }
   function confirmation() {
     return (h("div", null,
       h("h2", null, "Confirm and redeem"),
       h("div", { style: { textAlign: "center" } },
         h("p", null,
-          h("b", null, selectedStep === null || selectedStep === void 0 ? void 0 : selectedStep.prettySourceValue)),
+          h("b", null, (selectedStep === null || selectedStep === void 0 ? void 0 : selectedStep.prettySourceValue) || (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.prettySourceValue))),
         h("p", null,
           h(ExchangeArrows, null)),
         h("div", { class: sheet.classes.CardContainer, style: {

package/dist/collection/components/sqm-reward-exchange-list/sqm-reward-exchange-list.js

@@ -39,6 +39,7 @@ export class SqmRewardExchangeList {
       h(RewardExchangeView, { states: states, data: data, callbacks: callbacks })));
   }
   static get is() { return "sqm-reward-exchange-list"; }
+  static get encapsulation() { return "shadow"; }
   static get assetsDirs() { return ["assets"]; }
   static get properties() { return {
     "buttonText": {

package/dist/collection/components/sqm-task-card/Matrix.js

@@ -27,7 +27,10 @@ export function MatrixStory({ matrix, props, Component, }) {
     return (h("div", null,
       h(PropsTable, { values: example }),
       h("hr", null),
-      h(Component, Object.assign({}, example))));
+      " ",
+      h("br", null),
+      h(Component, Object.assign({}, example)),
+      h("br", null)));
   });
 }
 function PropsTable({ values }) {

package/dist/collection/components/sqm-task-card/TaskCard.stories.js

@@ -24,7 +24,7 @@ const resizable = {
 };
 const oneAction = {
   rewardAmount: 20,
-  rewardUnit: "Points",
+  rewardUnit: "SaaSquatch Points",
   cardTitle: "Complete a survey",
   description: "Description of action and reward. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eget quisque commodo leo.",
   repeatable: false,
@@ -34,12 +34,12 @@ const oneAction = {
   buttonText: "Take survey",
   buttonLink: "https://example.com/",
   showExpiry: false,
-  dateExpires: null,
+  rewardDuration: null,
   loading: false,
 };
 const coupleActions = {
   rewardAmount: 40,
-  rewardUnit: "Points",
+  rewardUnit: "SaaSquatch Points",
   cardTitle: "Comment on 5 articles",
   description: "Description of action and reward. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eget quisque commodo leo.",
   repeatable: false,
@@ -50,12 +50,12 @@ const coupleActions = {
   buttonText: "Take survey",
   buttonLink: "https://example.com/",
   showExpiry: false,
-  dateExpires: null,
+  rewardDuration: null,
   loading: false,
 };
 const manyActions = {
   rewardAmount: 150,
-  rewardUnit: "Points",
+  rewardUnit: "SaaSquatch Points",
   cardTitle: "Spend $500 at our Store",
   description: "Description of action and reward. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eget quisque commodo leo.",
   repeatable: false,
@@ -66,7 +66,7 @@ const manyActions = {
   buttonText: "Take survey",
   buttonLink: "https://example.com/",
   showExpiry: false,
-  dateExpires: null,
+  rewardDuration: null,
   loading: false,
 };
 export const TaskCardNotRepeatable = () => {
@@ -127,10 +127,10 @@ export const TaskCardRepeatable = () => {
       h(TaskCardView, Object.assign({}, manyActions, { progress: 1000, repeatable: true })),
       h("h5", null))));
 };
-export const TaskCardDateExpires = () => {
+export const TaskCardEndDate = () => {
   const expire = {
     showExpiry: true,
-    dateExpires: "2021-12-01T08:00:00.000Z/2077-12-01T08:00:00.000Z",
+    rewardDuration: "2021-12-01T08:00:00.000Z/2077-12-01T08:00:00.000Z",
   };
   const expireRepeat = { ...expire, repeatable: true };
   return (h("div", { style: storyFrame },
@@ -187,10 +187,10 @@ export const TaskCardLoading = () => {
       " ",
       h("h5", null))));
 };
-export const TaskCardExpired = () => {
+export const TaskCardUnavailable = () => {
   const expire = {
     showExpiry: true,
-    dateExpires: "2021-12-01T08:00:00.000Z/2021-12-01T08:00:00.000Z",
+    rewardDuration: "2021-11-30T08:00:00.000Z/2021-12-01T08:00:00.000Z",
   };
   const expireRepeat = { ...expire, repeatable: true };
   return (h("div", { style: storyFrame },

package/dist/collection/components/sqm-task-card/progress-bar/progress-bar-view.js

@@ -3,7 +3,7 @@ import jss from "jss";
 import preset from "jss-preset-default";
 import * as SVGs from "./SVGs";
 export function ProgressBarView(props) {
-  const { progress = 0, goal = 1, steps = false, progressBarUnit = "", repeatable = false, complete = false, expired = false, } = props;
+  const { progress = 0, goal = 1, steps = false, progressBarUnit = "", repeatable = false, expired = false, } = props;
   console.log("progress bar props", props);
   const gift1 = SVGs.gift();
   const gift2 = SVGs.gift();
@@ -53,9 +53,7 @@ export function ProgressBarView(props) {
         width: "100%",
         height: "4px",
         borderRadius: "4px",
-        backgroundColor: complete
-          ? "var(--sl-color-success-500)"
-          : "var(--sl-color-primary-500)",
+        backgroundColor: "var(--sl-color-primary-300)",
       },
       "& .progress": {
         display: "block",
@@ -68,9 +66,7 @@ export function ProgressBarView(props) {
         width: "12px",
         height: "12px",
         display: "flex",
-        backgroundColor: complete
-          ? "var(--sl-color-success-500)"
-          : "var(--sl-color-primary-500)",
+        backgroundColor: "var(--sl-color-primary-300)",
         borderRadius: "50%",
         position: "relative",
         left: "47%",
@@ -158,7 +154,7 @@ export function ProgressBarView(props) {
       ? ""
       : progressBarUnit + clamp(progress, 0, goal)));
     items.push(h("div", { class: "remain" }));
-    items.push(h("div", { class: "progress bg" }, goal));
+    items.push(h("div", { class: "progress bg" }, progressBarUnit + goal));
     items.push(h("div", { class: "gift" }, gift1));
   }
   function addSteps() {

package/dist/collection/components/sqm-task-card/sqm-task-card-view.js

@@ -32,7 +32,7 @@ export function TaskCardView(props) {
       },
       "& .main.expired": {
         color: "var(--sl-color-neutral-400)",
-        background: "var(--sl-color-neutral-100)",
+        background: "var(--sl-color-neutral-50)",
       },
       "& .title": {
         fontSize: "var(--sl-font-size-small)",
@@ -66,7 +66,7 @@ export function TaskCardView(props) {
         marginRight: "var(--sl-spacing-xx-small)",
       },
       "& .end": {
-        color: "var(--sl-color-warning-600)",
+        color: "var(--sl-color-warning-500)",
         fontWeight: "var(--sl-font-weight-semibold)",
         marginBottom: "var(--sl-spacing-xx-small)",
       },
@@ -116,40 +116,44 @@ export function TaskCardView(props) {
   const repetitions = props.showProgressBar
     ? Math.floor(props.progress / props.goal)
     : props.progress;
+  const dateStart = props.showExpiry && DateTime.fromISO(props.rewardDuration.split("/")[0]);
+  const dateEnd = props.showExpiry && DateTime.fromISO(props.rewardDuration.split("/")[1]);
+  const dateToday = DateTime.now();
   const taskComplete = showComplete && props.repeatable === false;
-  const dateExpire = props.showExpiry && DateTime.fromISO(props.dateExpires.split("/").pop());
-  const taskExpired = props.showExpiry && DateTime.now() > dateExpire;
-  const dateExpireText = dateExpire.toLocaleString(DateTime.DATE_FULL);
-  console.log(taskExpired);
+  const taskUnavailable = props.showExpiry && (dateEnd < dateToday || dateToday < dateStart);
   return (h("div", { class: sheet.classes.TaskCard },
-    h("div", { class: taskExpired ? "main expired" : taskComplete ? "main complete" : "main" },
+    h("div", { class: taskUnavailable
+        ? "main expired"
+        : taskComplete
+          ? "main complete"
+          : "main" },
       h("style", { type: "text/css" }, styleString),
-      h("div", { class: sheet.classes.Header }, props.loading ? (h("sl-skeleton", { style: { width: "22%", margin: "0" } })) : (h("div", null,
-        taskExpired && (h("div", { class: "end" },
-          " ",
-          "Ended " + dateExpireText,
-          " ")),
-        showComplete && (h("span", { class: taskExpired ? "icon neutral" : "icon" }, checkmark_circle)),
-        h("span", { class: taskExpired ? "value" : "value black" }, props.rewardAmount),
+      h("div", { class: sheet.classes.Header }, props.loading ? (h("sl-skeleton", { style: { width: "22%", margin: "0", height: "12px" } })) : (h("div", null,
+        taskUnavailable && (h("div", { class: "end" }, "Available " +
+          dateStart.toLocaleString(DateTime.DATE_MED).split(",")[0] +
+          " - " +
+          dateEnd.toLocaleString(DateTime.DATE_MED).split(",")[0])),
+        showComplete && (h("span", { class: taskUnavailable ? "icon neutral" : "icon" }, checkmark_circle)),
+        h("span", { class: taskUnavailable ? "value" : "value black" }, props.rewardAmount),
         h("span", { class: "text" }, props.rewardUnit)))),
-      props.loading ? (h("sl-skeleton", { style: { width: "42%", margin: "0 16px" } })) : (h("div", { class: taskExpired ? "title" : "title black" }, props.cardTitle)),
-      props.loading ? (h("sl-skeleton", { style: { margin: "12px 16px" } })) : (h(Details, Object.assign({}, props))),
-      props.showProgressBar && props.loading ? (h("sl-skeleton", { style: { margin: "0 16px" } })) : (props.showProgressBar && (h(ProgressBarView, Object.assign({}, props, { complete: taskComplete, expired: taskExpired })))),
-      h("div", { class: sheet.classes.Footer }, props.loading ? (h("sl-skeleton", { style: { width: "25%", marginLeft: "auto" } })) : (h("div", { style: { display: "contents" } },
+      props.loading ? (h("sl-skeleton", { style: { width: "42%", margin: "0 16px", height: "12px" } })) : (h("div", { class: taskUnavailable ? "title" : "title black" }, props.cardTitle)),
+      props.loading ? (h("sl-skeleton", { style: { margin: "12px 16px", height: "12px" } })) : (h(Details, Object.assign({}, props))),
+      props.showProgressBar && props.loading ? (h("sl-skeleton", { style: { margin: "0 16px", height: "12px" } })) : (props.showProgressBar && (h(ProgressBarView, Object.assign({}, props, { complete: taskComplete, expired: taskUnavailable })))),
+      h("div", { class: sheet.classes.Footer }, props.loading ? (h("sl-skeleton", { style: { width: "25%", marginLeft: "auto", height: "12px" } })) : (h("div", { style: { display: "contents" } },
         h("span", { class: "text" },
           props.repeatable && (h("div", null,
             h("span", { class: repetitions > 0
-                ? taskExpired
+                ? taskUnavailable
                   ? "icon neutral"
                   : "icon success"
                 : "icon" }, arrow_left_right),
             h("span", { class: repetitions > 0
-                ? taskExpired
+                ? taskUnavailable
                   ? "neutral"
                   : "success"
                 : "" }, "Completed " + repetitions + " times"))),
-          props.showExpiry && !taskExpired && (h("span", null, "Ends " + dateExpireText))),
-        h("sl-button", { class: taskComplete || taskExpired ? "action disabled" : "action", type: "primary", size: "small", onClick: () => window.open(props.buttonLink), disabled: taskComplete || taskExpired }, props.buttonText)))))));
+          props.showExpiry && !taskUnavailable && (h("span", null, "Ends " + dateEnd.toLocaleString(DateTime.DATE_FULL)))),
+        h("sl-button", { class: taskComplete || taskUnavailable ? "action disabled" : "action", type: "primary", size: "small", onClick: () => window.open(props.buttonLink), disabled: taskComplete || taskUnavailable }, props.buttonText)))))));
 }
 function Details(props) {
   const style = {

package/dist/collection/components/sqm-task-card/sqm-task-card.js

@@ -7,7 +7,7 @@ import { useDemoBigStat } from "../sqm-big-stat/useDemoBigStat";
 import { TaskCardView } from "./sqm-task-card-view";
 /**
  * @uiName Task Card
- * @uiOrder ["reward-amount", "reward-unit", "card-title", "description", "*", "show-expiry", "date-expires" ]
+ * @uiOrder ["reward-amount", "reward-unit", "card-title", "description", "repeatable", "show-progress-bar", "stat-type", "progress-source", "goal", "steps", "progress-bar-unit", "show-expiry", "date-expires", "button-text", "button-link"]
  */
 export class TaskCard {
   constructor() {
@@ -36,10 +36,6 @@ export class TaskCard {
      * @uiName Show Progress Bar
      */
     this.showProgressBar = false;
-    /**
-     * @uiName Goal Progress Source
-     */
-    this.progressSource = "";
     /**
      * @uiName Goal Completion Number
      */
@@ -53,11 +49,11 @@ export class TaskCard {
      */
     this.showExpiry = false;
     /**
-     * @uiName Date Goal Expires
+     * @uiName Reward Duration
      * @uiWidget DateRange
      * @uiOptions {"allowPastDates":true, "months": 1}
      */
-    this.dateExpires = "/";
+    this.rewardDuration = "/";
     /**
      * @uiName CTA Button Text
      */
@@ -70,7 +66,7 @@ export class TaskCard {
      * Select what type of stat to display for the goal. Manual paths are also supported.
      *
      * @uiWidget StatTypeSelectWidget
-     * @uiName Stat Type
+     * @uiName Goal Progress Source
      * @uiOptions {"version": 1.1}
      */
     this.statType = "/programGoals/count/Referral-Started%2Freferrals";
@@ -81,7 +77,7 @@ export class TaskCard {
     const { props } = isDemo() ? useDemoBigStat(this) : useBigStat(this);
     const { value, statvalue } = props;
     console.log(props, isDemo());
-    return (h(TaskCardView, Object.assign({}, getProps(this), { progress: value, loading: value === undefined })));
+    return (h(TaskCardView, Object.assign({ progress: value, loading: !isDemo() && value === undefined }, getProps(this))));
   }
   static get is() { return "sqm-task-card"; }
   static get encapsulation() { return "shadow"; }
@@ -295,7 +291,7 @@ export class TaskCard {
       "reflect": false,
       "defaultValue": "false"
     },
-    "dateExpires": {
+    "rewardDuration": {
       "type": "string",
       "mutable": false,
       "complexType": {
@@ -307,7 +303,7 @@ export class TaskCard {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Date Goal Expires",
+            "text": "Reward Duration",
             "name": "uiName"
           }, {
             "text": "DateRange",
@@ -318,7 +314,7 @@ export class TaskCard {
           }],
         "text": ""
       },
-      "attribute": "date-expires",
+      "attribute": "reward-duration",
       "reflect": false,
       "defaultValue": "\"/\""
     },
@@ -379,7 +375,7 @@ export class TaskCard {
             "text": "StatTypeSelectWidget",
             "name": "uiWidget"
           }, {
-            "text": "Stat Type",
+            "text": "Goal Progress Source",
             "name": "uiName"
           }, {
             "text": "{\"version\": 1.1}",

package/dist/esm/{ShadowViewAddon-a3f510db.js → ShadowViewAddon-01127287.js}

@@ -1,5 +1,5 @@
 import { h, g as getElement } from './index-17b4da69.js';
-import { d as dist, M, T, e as en } from './index.module-90d2c3ad.js';
+import { d as dist, M, T, e as en } from './index.module-9d3f0cd6.js';
 
 function LeaderboardView(props) {
   var _a;

package/dist/esm/{global-90da933f.js → global-011b8f35.js}

@@ -1,5 +1,5 @@
 import { g as getAugmentedNamespace, c as createCommonjsModule, a as commonjsGlobal, b as browser, l as l$1 } from './extends-3a3f9fe2.js';
-import { s as src, m as memoize, S } from './index.module-90d2c3ad.js';
+import { s as src, m as memoize, P } from './index.module-9d3f0cd6.js';
 
 var __assign = (undefined && undefined.__assign) || function () {
     __assign = Object.assign || function(t) {
@@ -26696,7 +26696,7 @@ sl-input::part(label){
 
 `;
 
-S(l$1);
+P(l$1);
 const debug = browser("sq:global");
 const cache = createIntlCache();
 const intl = createIntl({