npm - @saasquatch/mint-components - Versions diffs - 1.6.2-2 → 1.7.0-1 - Mend

@saasquatch/mint-components 1.6.2-2 → 1.7.0-1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (948) hide show

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

@@ -1,753 +1,753 @@
-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
-     * @default
-     */
-    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
-     * @default
-     */
-    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
-     * @default
-     */
-    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
-     * @default
-     */
-    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": undefined,
-            "name": "default"
-          }],
-        "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": undefined,
-            "name": "default"
-          }],
-        "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": undefined,
-            "name": "default"
-          }],
-        "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": undefined,
-            "name": "default"
-          }],
-        "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. When no ID is specified, it defaults to the program context in which the component is rendered."
-      },
-      "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
+     * @default
+     */
+    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
+     * @default
+     */
+    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
+     * @default
+     */
+    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
+     * @default
+     */
+    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": undefined,
+            "name": "default"
+          }],
+        "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": undefined,
+            "name": "default"
+          }],
+        "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": undefined,
+            "name": "default"
+          }],
+        "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": undefined,
+            "name": "default"
+          }],
+        "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. When no ID is specified, it defaults to the program context in which the component is rendered."
+      },
+      "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 });
+}