@saasquatch/mint-components 1.6.1-13 → 1.6.1-16

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

@@ -1,737 +1,737 @@
-import { isDemo } from "@saasquatch/component-boilerplate";
-import { withHooks } from "@saasquatch/stencil-hooks";
-import { Component, h, Prop, State } from "@stencil/core";
-import deepmerge from "deepmerge";
-import { getProps } from "../../utils/utils";
-import { useBigStat } from "../sqm-big-stat/useBigStat";
-import { useDemoBigStat } from "../sqm-big-stat/useDemoBigStat";
-import { TaskCardView } from "./sqm-task-card-view";
-import { useTaskCard } from "./useTaskCard";
-/**
- * @uiName Task Card
- * @uiOrder ["reward-amount", "reward-unit", "card-title", "description", "repeatable", "finite", "show-progress-bar", "stat-type", "progress-source", "goal", "steps", "progress-bar-unit", "show-expiry", "reward-duration", "button-text", "button-link", "open-new-tab", "ended-message", "expiry-message", "starts-on-message", "event-key", "*"]
- * @exampleGroup Rewards
- * @example One Time Task Card - <sqm-task-card reward-amount="1" reward-unit="Free Month" goal="1" card-title="Upgrade Your Plan" description="Receive one free month for being a committed customer when you upgrade your plan." button-text="Upgrade" completed-text="Completed {finite, select, 0 {{count, plural, =1 {{count} time} other {{count} times}}} other {{count}/{finite} times}}" ended-message="Ended {endDate}" expiry-message="Ends {endDate}" open-new-tab="false" finite="0" starts-on-message="Starts {startDate}"></sqm-task-card>
- * @example Repeatable Task Card - <sqm-task-card reward-amount="250" goal="500" show-progress-bar card-title="Spend $500" description="Earn 150 points when you spend $500 or more." button-text="See plans" completed-text="Completed {finite, select, 0 {{count, plural, =1 {{count} time} other {{count} times}}} other {{count}/{finite} times}}" ended-message="Ended {endDate}" expiry-message="Ends {endDate}" progress-bar-unit="$" finite="0" repeatable="" reward-unit="Points" starts-on-message="Starts {startDate}"></sqm-task-card>
- * @example Event Sending Task Card - <sqm-task-card goal="1" reward-amount="50" card-title="Follow Us on Twitter" description="Earn 50 points when you follow us on Twitter!" button-text="Follow" button-link="https://twitter.com/" open-new-tab="true" event-key="socialFollow" completed-text="Completed {finite, select, 0 {{count, plural, =1 {{count} time} other {{count} times}}} other {{count}/{finite} times}}" ended-message="Ended {endDate}" expiry-message="Ends {endDate}" finite="0" reward-unit="Points" starts-on-message="Starts {startDate}"></sqm-task-card>
- */
-export class TaskCard {
-  constructor() {
-    this.ignored = true;
-    /**
-     * @uiName Reward Amount
-     * @uiGroup Reward
-     */
-    this.rewardAmount = "0";
-    /**
-     * @uiName Reward Unit
-     * @uiGroup Reward
-     */
-    this.rewardUnit = "Points";
-    /**
-     * @uiName Title
-     * @uiGroup Task
-     */
-    this.cardTitle = "Title Text";
-    /**
-     * @uiName Description
-     * @uiGroup Task
-     */
-    this.description = "";
-    /**
-     * @uiName Goal Repeatable
-     * @uiGroup Goal
-     */
-    this.repeatable = false;
-    /**
-     * The number of times a reward can be earned.  Use zero for no limit (the default).
-     *
-     * @uiName Repeat Amount
-     * @uiGroup Reward
-     */
-    this.finite = 0;
-    /**
-     * @uiName Show Progress Bar
-     * @uiGroup Goal
-     */
-    this.showProgressBar = false;
-    /**
-     * Sets the goal for users progress to know when a task has been completed. If repeatable is checked, repeatable goals is an increment of this.
-     *
-     * @uiName Goal Completion Number
-     * @uiGroup Goal
-     */
-    this.goal = 1;
-    /**
-     * @uiName Progress Bar Steps
-     * @uiGroup Goal
-     */
-    this.steps = false;
-    /**
-     * The unit displayed to the right of steps and progress numbers on the progress bar. Ex: $ for dollars
-     *
-     * @uiName Progress Bar Unit
-     * @uiGroup Goal
-     */
-    this.progressBarUnit = "";
-    /**
-     * Displayed when a user views a task card after the reward duration interval.
-     *
-     * @uiName Expiry Date Message
-     * @uiGroup Task
-     */
-    this.expiryMessage = "Ends {endDate}";
-    /**
-     * Shown to users before the start of the task duration.
-     *
-     * @uiName Start Date Message
-     * @uiGroup Task
-     */
-    this.startsOnMessage = "Starts {startDate}";
-    /**
-     * Shown to users after the end of the task duration.
-     *
-     * @uiName Ended Date Message
-     * @uiGroup Task
-     */
-    this.endedMessage = "Ended {endDate}";
-    /**
-     * Displays the amount of times that a user has completed a repeatable task.
-     *
-     * @uiName Completed Count Text
-     * @uiGroup Task
-     * @uiWidget textArea
-     */
-    this.completedText = "Completed {finite, select, 0 {{count, plural, =1 {{count} time} other {{count} times}}} other {{count}/{finite} times}}";
-    /**
-     * @uiName Button Text
-     * @uiGroup Button
-     */
-    this.buttonText = "Complete Action";
-    /**
-     * Button Link Opens in New Tab
-     * @uiName Open In New Tab
-     * @uiGroup Button
-     */
-    this.openNewTab = false;
-    withHooks(this);
-  }
-  disconnectedCallback() { }
-  render() {
-    const { props } = isDemo()
-      ? useDemoBigStat(this)
-      : useBigStat({ ...getProps(this), programId: this.programId });
-    const { value, loading } = props;
-    const { states, callbacks } = isDemo()
-      ? useTaskCardDemo(this)
-      : useTaskCard(this);
-    return (h(TaskCardView, { callbacks: callbacks, states: {
-        loading,
-        loadingEvent: states.loadingEvent,
-        progress: value,
-        locale: states.locale,
-      }, content: { ...getProps(this) } }));
-  }
-  static get is() { return "sqm-task-card"; }
-  static get encapsulation() { return "shadow"; }
-  static get properties() { return {
-    "rewardAmount": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "text": "Reward Amount",
-            "name": "uiName"
-          }, {
-            "text": "Reward",
-            "name": "uiGroup"
-          }],
-        "text": ""
-      },
-      "attribute": "reward-amount",
-      "reflect": false,
-      "defaultValue": "\"0\""
-    },
-    "rewardUnit": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "text": "Reward Unit",
-            "name": "uiName"
-          }, {
-            "text": "Reward",
-            "name": "uiGroup"
-          }],
-        "text": ""
-      },
-      "attribute": "reward-unit",
-      "reflect": false,
-      "defaultValue": "\"Points\""
-    },
-    "cardTitle": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "text": "Title",
-            "name": "uiName"
-          }, {
-            "text": "Task",
-            "name": "uiGroup"
-          }],
-        "text": ""
-      },
-      "attribute": "card-title",
-      "reflect": false,
-      "defaultValue": "\"Title Text\""
-    },
-    "description": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "text": "Description",
-            "name": "uiName"
-          }, {
-            "text": "Task",
-            "name": "uiGroup"
-          }],
-        "text": ""
-      },
-      "attribute": "description",
-      "reflect": false,
-      "defaultValue": "\"\""
-    },
-    "repeatable": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "text": "Goal Repeatable",
-            "name": "uiName"
-          }, {
-            "text": "Goal",
-            "name": "uiGroup"
-          }],
-        "text": ""
-      },
-      "attribute": "repeatable",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "finite": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "text": "Repeat Amount",
-            "name": "uiName"
-          }, {
-            "text": "Reward",
-            "name": "uiGroup"
-          }],
-        "text": "The number of times a reward can be earned.  Use zero for no limit (the default)."
-      },
-      "attribute": "finite",
-      "reflect": false,
-      "defaultValue": "0"
-    },
-    "showProgressBar": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "text": "Show Progress Bar",
-            "name": "uiName"
-          }, {
-            "text": "Goal",
-            "name": "uiGroup"
-          }],
-        "text": ""
-      },
-      "attribute": "show-progress-bar",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "goal": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "text": "Goal Completion Number",
-            "name": "uiName"
-          }, {
-            "text": "Goal",
-            "name": "uiGroup"
-          }],
-        "text": "Sets the goal for users progress to know when a task has been completed. If repeatable is checked, repeatable goals is an increment of this."
-      },
-      "attribute": "goal",
-      "reflect": false,
-      "defaultValue": "1"
-    },
-    "steps": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "text": "Progress Bar Steps",
-            "name": "uiName"
-          }, {
-            "text": "Goal",
-            "name": "uiGroup"
-          }],
-        "text": ""
-      },
-      "attribute": "steps",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "progressBarUnit": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "text": "Progress Bar Unit",
-            "name": "uiName"
-          }, {
-            "text": "Goal",
-            "name": "uiGroup"
-          }],
-        "text": "The unit displayed to the right of steps and progress numbers on the progress bar. Ex: $ for dollars"
-      },
-      "attribute": "progress-bar-unit",
-      "reflect": false,
-      "defaultValue": "\"\""
-    },
-    "expiryMessage": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "text": "Expiry Date Message",
-            "name": "uiName"
-          }, {
-            "text": "Task",
-            "name": "uiGroup"
-          }],
-        "text": "Displayed when a user views a task card after the reward duration interval."
-      },
-      "attribute": "expiry-message",
-      "reflect": false,
-      "defaultValue": "\"Ends {endDate}\""
-    },
-    "rewardDuration": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "text": "Reward Duration",
-            "name": "uiName"
-          }, {
-            "text": "dateRange",
-            "name": "uiWidget"
-          }, {
-            "text": "{\"allowPastDates\":true, \"months\": 1}",
-            "name": "uiWidgetOptions"
-          }, {
-            "text": "Reward",
-            "name": "uiGroup"
-          }],
-        "text": "Task cards are disabled to users outside of the duration. They are not disabled if no duration is configured."
-      },
-      "attribute": "reward-duration",
-      "reflect": false
-    },
-    "startsOnMessage": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "text": "Start Date Message",
-            "name": "uiName"
-          }, {
-            "text": "Task",
-            "name": "uiGroup"
-          }],
-        "text": "Shown to users before the start of the task duration."
-      },
-      "attribute": "starts-on-message",
-      "reflect": false,
-      "defaultValue": "\"Starts {startDate}\""
-    },
-    "displayDuration": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "text": "Display Duration",
-            "name": "uiName"
-          }, {
-            "text": "dateRange",
-            "name": "uiWidget"
-          }, {
-            "text": "{\"allowPastDates\":true, \"months\": 1}",
-            "name": "uiWidgetOptions"
-          }, {
-            "text": "Task",
-            "name": "uiGroup"
-          }],
-        "text": "Task cards are hidden from users outside of the duration. They are always displayed if no duration is configured."
-      },
-      "attribute": "display-duration",
-      "reflect": false
-    },
-    "endedMessage": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "text": "Ended Date Message",
-            "name": "uiName"
-          }, {
-            "text": "Task",
-            "name": "uiGroup"
-          }],
-        "text": "Shown to users after the end of the task duration."
-      },
-      "attribute": "ended-message",
-      "reflect": false,
-      "defaultValue": "\"Ended {endDate}\""
-    },
-    "completedText": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "text": "Completed Count Text",
-            "name": "uiName"
-          }, {
-            "text": "Task",
-            "name": "uiGroup"
-          }, {
-            "text": "textArea",
-            "name": "uiWidget"
-          }],
-        "text": "Displays the amount of times that a user has completed a repeatable task."
-      },
-      "attribute": "completed-text",
-      "reflect": false,
-      "defaultValue": "\"Completed {finite, select, 0 {{count, plural, =1 {{count} time} other {{count} times}}} other {{count}/{finite} times}}\""
-    },
-    "buttonText": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "text": "Button Text",
-            "name": "uiName"
-          }, {
-            "text": "Button",
-            "name": "uiGroup"
-          }],
-        "text": ""
-      },
-      "attribute": "button-text",
-      "reflect": false,
-      "defaultValue": "\"Complete Action\""
-    },
-    "buttonLink": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "text": "Button Link",
-            "name": "uiName"
-          }, {
-            "text": "Button",
-            "name": "uiGroup"
-          }],
-        "text": ""
-      },
-      "attribute": "button-link",
-      "reflect": false
-    },
-    "openNewTab": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "text": "Open In New Tab",
-            "name": "uiName"
-          }, {
-            "text": "Button",
-            "name": "uiGroup"
-          }],
-        "text": "Button Link Opens in New Tab"
-      },
-      "attribute": "open-new-tab",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "statType": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "text": "Goal Progress Source",
-            "name": "uiName"
-          }, {
-            "text": undefined,
-            "name": "required"
-          }, {
-            "text": "1",
-            "name": "minLength"
-          }, {
-            "text": "statTypeSelectWidget",
-            "name": "uiWidget"
-          }, {
-            "text": "{\"version\": 1.1}",
-            "name": "uiWidgetOptions"
-          }, {
-            "text": "Goal",
-            "name": "uiGroup"
-          }],
-        "text": "Select what type of stat to display for the goal. Manual paths are also supported."
-      },
-      "attribute": "stat-type",
-      "reflect": false
-    },
-    "eventKey": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [{
-            "text": "Task Card Button Event Key",
-            "name": "uiName"
-          }, {
-            "text": "Button",
-            "name": "uiGroup"
-          }],
-        "text": "Optionally send an event to SaaSquatch when a user clicks the button. Enter your event key into this field."
-      },
-      "attribute": "event-key",
-      "reflect": false
-    },
-    "programId": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [{
-            "text": "Program ID Override",
-            "name": "uiName"
-          }, {
-            "text": "programSelector",
-            "name": "uiWidget"
-          }, {
-            "text": "Goal",
-            "name": "uiGroup"
-          }],
-        "text": "The ID of the program that is used to scope the task card. Defaults to the program context when no ID is specified."
-      },
-      "attribute": "program-id",
-      "reflect": false
-    },
-    "demoData": {
-      "type": "unknown",
-      "mutable": false,
-      "complexType": {
-        "original": "DemoData<TaskCardViewProps | BigStatViewProps>",
-        "resolved": "{}",
-        "references": {
-          "DemoData": {
-            "location": "import",
-            "path": "../../global/demo"
-          },
-          "TaskCardViewProps": {
-            "location": "import",
-            "path": "./sqm-task-card-view"
-          },
-          "BigStatViewProps": {
-            "location": "import",
-            "path": "../sqm-big-stat/sqm-big-stat-view"
-          }
-        }
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [{
-            "text": undefined,
-            "name": "undocumented"
-          }, {
-            "text": "object",
-            "name": "uiType"
-          }],
-        "text": ""
-      }
-    }
-  }; }
-  static get states() { return {
-    "ignored": {}
-  }; }
-}
-function useTaskCardDemo(props) {
-  return deepmerge({
-    states: { loadingEvent: false, locale: "en" },
-    callbacks: {
-      sendEvent: (event) => console.log(event),
-      onClick: () => console.log("clicked"),
-    },
-  }, props.demoData || {}, { arrayMerge: (_, a) => a });
-}
+import { isDemo } from "@saasquatch/component-boilerplate";
+import { withHooks } from "@saasquatch/stencil-hooks";
+import { Component, h, Prop, State } from "@stencil/core";
+import deepmerge from "deepmerge";
+import { getProps } from "../../utils/utils";
+import { useBigStat } from "../sqm-big-stat/useBigStat";
+import { useDemoBigStat } from "../sqm-big-stat/useDemoBigStat";
+import { TaskCardView } from "./sqm-task-card-view";
+import { useTaskCard } from "./useTaskCard";
+/**
+ * @uiName Task Card
+ * @uiOrder ["reward-amount", "reward-unit", "card-title", "description", "repeatable", "finite", "show-progress-bar", "stat-type", "progress-source", "goal", "steps", "progress-bar-unit", "show-expiry", "reward-duration", "button-text", "button-link", "open-new-tab", "ended-message", "expiry-message", "starts-on-message", "event-key", "*"]
+ * @exampleGroup Rewards
+ * @example One Time Task Card - <sqm-task-card reward-amount="1" reward-unit="Free Month" goal="1" card-title="Upgrade Your Plan" description="Receive one free month for being a committed customer when you upgrade your plan." button-text="Upgrade" completed-text="Completed {finite, select, 0 {{count, plural, =1 {{count} time} other {{count} times}}} other {{count}/{finite} times}}" ended-message="Ended {endDate}" expiry-message="Ends {endDate}" open-new-tab="false" finite="0" starts-on-message="Starts {startDate}"></sqm-task-card>
+ * @example Repeatable Task Card - <sqm-task-card reward-amount="250" goal="500" show-progress-bar card-title="Spend $500" description="Earn 150 points when you spend $500 or more." button-text="See plans" completed-text="Completed {finite, select, 0 {{count, plural, =1 {{count} time} other {{count} times}}} other {{count}/{finite} times}}" ended-message="Ended {endDate}" expiry-message="Ends {endDate}" progress-bar-unit="$" finite="0" repeatable="" reward-unit="Points" starts-on-message="Starts {startDate}"></sqm-task-card>
+ * @example Event Sending Task Card - <sqm-task-card goal="1" reward-amount="50" card-title="Follow Us on Twitter" description="Earn 50 points when you follow us on Twitter!" button-text="Follow" button-link="https://twitter.com/" open-new-tab="true" event-key="socialFollow" completed-text="Completed {finite, select, 0 {{count, plural, =1 {{count} time} other {{count} times}}} other {{count}/{finite} times}}" ended-message="Ended {endDate}" expiry-message="Ends {endDate}" finite="0" reward-unit="Points" starts-on-message="Starts {startDate}"></sqm-task-card>
+ */
+export class TaskCard {
+  constructor() {
+    this.ignored = true;
+    /**
+     * @uiName Reward Amount
+     * @uiGroup Reward
+     */
+    this.rewardAmount = "0";
+    /**
+     * @uiName Reward Unit
+     * @uiGroup Reward
+     */
+    this.rewardUnit = "Points";
+    /**
+     * @uiName Title
+     * @uiGroup Task
+     */
+    this.cardTitle = "Title Text";
+    /**
+     * @uiName Description
+     * @uiGroup Task
+     */
+    this.description = "";
+    /**
+     * @uiName Goal Repeatable
+     * @uiGroup Goal
+     */
+    this.repeatable = false;
+    /**
+     * The number of times a reward can be earned.  Use zero for no limit (the default).
+     *
+     * @uiName Repeat Amount
+     * @uiGroup Reward
+     */
+    this.finite = 0;
+    /**
+     * @uiName Show Progress Bar
+     * @uiGroup Goal
+     */
+    this.showProgressBar = false;
+    /**
+     * Sets the goal for users progress to know when a task has been completed. If repeatable is checked, repeatable goals is an increment of this.
+     *
+     * @uiName Goal Completion Number
+     * @uiGroup Goal
+     */
+    this.goal = 1;
+    /**
+     * @uiName Progress Bar Steps
+     * @uiGroup Goal
+     */
+    this.steps = false;
+    /**
+     * The unit displayed to the right of steps and progress numbers on the progress bar. Ex: $ for dollars
+     *
+     * @uiName Progress Bar Unit
+     * @uiGroup Goal
+     */
+    this.progressBarUnit = "";
+    /**
+     * Displayed when a user views a task card after the reward duration interval.
+     *
+     * @uiName Expiry Date Message
+     * @uiGroup Task
+     */
+    this.expiryMessage = "Ends {endDate}";
+    /**
+     * Shown to users before the start of the task duration.
+     *
+     * @uiName Start Date Message
+     * @uiGroup Task
+     */
+    this.startsOnMessage = "Starts {startDate}";
+    /**
+     * Shown to users after the end of the task duration.
+     *
+     * @uiName Ended Date Message
+     * @uiGroup Task
+     */
+    this.endedMessage = "Ended {endDate}";
+    /**
+     * Displays the amount of times that a user has completed a repeatable task.
+     *
+     * @uiName Completed Count Text
+     * @uiGroup Task
+     * @uiWidget textArea
+     */
+    this.completedText = "Completed {finite, select, 0 {{count, plural, =1 {{count} time} other {{count} times}}} other {{count}/{finite} times}}";
+    /**
+     * @uiName Button Text
+     * @uiGroup Button
+     */
+    this.buttonText = "Complete Action";
+    /**
+     * Button Link Opens in New Tab
+     * @uiName Open In New Tab
+     * @uiGroup Button
+     */
+    this.openNewTab = false;
+    withHooks(this);
+  }
+  disconnectedCallback() { }
+  render() {
+    const { props } = isDemo()
+      ? useDemoBigStat(this)
+      : useBigStat({ ...getProps(this), programId: this.programId });
+    const { value, loading } = props;
+    const { states, callbacks } = isDemo()
+      ? useTaskCardDemo(this)
+      : useTaskCard(this);
+    return (h(TaskCardView, { callbacks: callbacks, states: {
+        loading,
+        loadingEvent: states.loadingEvent,
+        progress: value,
+        locale: states.locale,
+      }, content: { ...getProps(this) } }));
+  }
+  static get is() { return "sqm-task-card"; }
+  static get encapsulation() { return "shadow"; }
+  static get properties() { return {
+    "rewardAmount": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Reward Amount",
+            "name": "uiName"
+          }, {
+            "text": "Reward",
+            "name": "uiGroup"
+          }],
+        "text": ""
+      },
+      "attribute": "reward-amount",
+      "reflect": false,
+      "defaultValue": "\"0\""
+    },
+    "rewardUnit": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Reward Unit",
+            "name": "uiName"
+          }, {
+            "text": "Reward",
+            "name": "uiGroup"
+          }],
+        "text": ""
+      },
+      "attribute": "reward-unit",
+      "reflect": false,
+      "defaultValue": "\"Points\""
+    },
+    "cardTitle": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Title",
+            "name": "uiName"
+          }, {
+            "text": "Task",
+            "name": "uiGroup"
+          }],
+        "text": ""
+      },
+      "attribute": "card-title",
+      "reflect": false,
+      "defaultValue": "\"Title Text\""
+    },
+    "description": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Description",
+            "name": "uiName"
+          }, {
+            "text": "Task",
+            "name": "uiGroup"
+          }],
+        "text": ""
+      },
+      "attribute": "description",
+      "reflect": false,
+      "defaultValue": "\"\""
+    },
+    "repeatable": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Goal Repeatable",
+            "name": "uiName"
+          }, {
+            "text": "Goal",
+            "name": "uiGroup"
+          }],
+        "text": ""
+      },
+      "attribute": "repeatable",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "finite": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Repeat Amount",
+            "name": "uiName"
+          }, {
+            "text": "Reward",
+            "name": "uiGroup"
+          }],
+        "text": "The number of times a reward can be earned.  Use zero for no limit (the default)."
+      },
+      "attribute": "finite",
+      "reflect": false,
+      "defaultValue": "0"
+    },
+    "showProgressBar": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Show Progress Bar",
+            "name": "uiName"
+          }, {
+            "text": "Goal",
+            "name": "uiGroup"
+          }],
+        "text": ""
+      },
+      "attribute": "show-progress-bar",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "goal": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Goal Completion Number",
+            "name": "uiName"
+          }, {
+            "text": "Goal",
+            "name": "uiGroup"
+          }],
+        "text": "Sets the goal for users progress to know when a task has been completed. If repeatable is checked, repeatable goals is an increment of this."
+      },
+      "attribute": "goal",
+      "reflect": false,
+      "defaultValue": "1"
+    },
+    "steps": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Progress Bar Steps",
+            "name": "uiName"
+          }, {
+            "text": "Goal",
+            "name": "uiGroup"
+          }],
+        "text": ""
+      },
+      "attribute": "steps",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "progressBarUnit": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Progress Bar Unit",
+            "name": "uiName"
+          }, {
+            "text": "Goal",
+            "name": "uiGroup"
+          }],
+        "text": "The unit displayed to the right of steps and progress numbers on the progress bar. Ex: $ for dollars"
+      },
+      "attribute": "progress-bar-unit",
+      "reflect": false,
+      "defaultValue": "\"\""
+    },
+    "expiryMessage": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Expiry Date Message",
+            "name": "uiName"
+          }, {
+            "text": "Task",
+            "name": "uiGroup"
+          }],
+        "text": "Displayed when a user views a task card after the reward duration interval."
+      },
+      "attribute": "expiry-message",
+      "reflect": false,
+      "defaultValue": "\"Ends {endDate}\""
+    },
+    "rewardDuration": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Reward Duration",
+            "name": "uiName"
+          }, {
+            "text": "dateRange",
+            "name": "uiWidget"
+          }, {
+            "text": "{\"allowPastDates\":true, \"months\": 1}",
+            "name": "uiWidgetOptions"
+          }, {
+            "text": "Reward",
+            "name": "uiGroup"
+          }],
+        "text": "Task cards are disabled to users outside of the duration. They are not disabled if no duration is configured."
+      },
+      "attribute": "reward-duration",
+      "reflect": false
+    },
+    "startsOnMessage": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Start Date Message",
+            "name": "uiName"
+          }, {
+            "text": "Task",
+            "name": "uiGroup"
+          }],
+        "text": "Shown to users before the start of the task duration."
+      },
+      "attribute": "starts-on-message",
+      "reflect": false,
+      "defaultValue": "\"Starts {startDate}\""
+    },
+    "displayDuration": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Display Duration",
+            "name": "uiName"
+          }, {
+            "text": "dateRange",
+            "name": "uiWidget"
+          }, {
+            "text": "{\"allowPastDates\":true, \"months\": 1}",
+            "name": "uiWidgetOptions"
+          }, {
+            "text": "Task",
+            "name": "uiGroup"
+          }],
+        "text": "Task cards are hidden from users outside of the duration. They are always displayed if no duration is configured."
+      },
+      "attribute": "display-duration",
+      "reflect": false
+    },
+    "endedMessage": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Ended Date Message",
+            "name": "uiName"
+          }, {
+            "text": "Task",
+            "name": "uiGroup"
+          }],
+        "text": "Shown to users after the end of the task duration."
+      },
+      "attribute": "ended-message",
+      "reflect": false,
+      "defaultValue": "\"Ended {endDate}\""
+    },
+    "completedText": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Completed Count Text",
+            "name": "uiName"
+          }, {
+            "text": "Task",
+            "name": "uiGroup"
+          }, {
+            "text": "textArea",
+            "name": "uiWidget"
+          }],
+        "text": "Displays the amount of times that a user has completed a repeatable task."
+      },
+      "attribute": "completed-text",
+      "reflect": false,
+      "defaultValue": "\"Completed {finite, select, 0 {{count, plural, =1 {{count} time} other {{count} times}}} other {{count}/{finite} times}}\""
+    },
+    "buttonText": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Button Text",
+            "name": "uiName"
+          }, {
+            "text": "Button",
+            "name": "uiGroup"
+          }],
+        "text": ""
+      },
+      "attribute": "button-text",
+      "reflect": false,
+      "defaultValue": "\"Complete Action\""
+    },
+    "buttonLink": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Button Link",
+            "name": "uiName"
+          }, {
+            "text": "Button",
+            "name": "uiGroup"
+          }],
+        "text": ""
+      },
+      "attribute": "button-link",
+      "reflect": false
+    },
+    "openNewTab": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Open In New Tab",
+            "name": "uiName"
+          }, {
+            "text": "Button",
+            "name": "uiGroup"
+          }],
+        "text": "Button Link Opens in New Tab"
+      },
+      "attribute": "open-new-tab",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "statType": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Goal Progress Source",
+            "name": "uiName"
+          }, {
+            "text": undefined,
+            "name": "required"
+          }, {
+            "text": "1",
+            "name": "minLength"
+          }, {
+            "text": "statTypeSelectWidget",
+            "name": "uiWidget"
+          }, {
+            "text": "{\"version\": 1.1}",
+            "name": "uiWidgetOptions"
+          }, {
+            "text": "Goal",
+            "name": "uiGroup"
+          }],
+        "text": "Select what type of stat to display for the goal. Manual paths are also supported."
+      },
+      "attribute": "stat-type",
+      "reflect": false
+    },
+    "eventKey": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": "Task Card Button Event Key",
+            "name": "uiName"
+          }, {
+            "text": "Button",
+            "name": "uiGroup"
+          }],
+        "text": "Optionally send an event to SaaSquatch when a user clicks the button. Enter your event key into this field."
+      },
+      "attribute": "event-key",
+      "reflect": false
+    },
+    "programId": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": "Program ID Override",
+            "name": "uiName"
+          }, {
+            "text": "programSelector",
+            "name": "uiWidget"
+          }, {
+            "text": "Goal",
+            "name": "uiGroup"
+          }],
+        "text": "The ID of the program that is used to scope the task card. Defaults to the program context when no ID is specified."
+      },
+      "attribute": "program-id",
+      "reflect": false
+    },
+    "demoData": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "DemoData<TaskCardViewProps | BigStatViewProps>",
+        "resolved": "{}",
+        "references": {
+          "DemoData": {
+            "location": "import",
+            "path": "../../global/demo"
+          },
+          "TaskCardViewProps": {
+            "location": "import",
+            "path": "./sqm-task-card-view"
+          },
+          "BigStatViewProps": {
+            "location": "import",
+            "path": "../sqm-big-stat/sqm-big-stat-view"
+          }
+        }
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": undefined,
+            "name": "undocumented"
+          }, {
+            "text": "object",
+            "name": "uiType"
+          }],
+        "text": ""
+      }
+    }
+  }; }
+  static get states() { return {
+    "ignored": {}
+  }; }
+}
+function useTaskCardDemo(props) {
+  return deepmerge({
+    states: { loadingEvent: false, locale: "en" },
+    callbacks: {
+      sendEvent: (event) => console.log(event),
+      onClick: () => console.log("clicked"),
+    },
+  }, props.demoData || {}, { arrayMerge: (_, a) => a });
+}