@saasquatch/mint-components 1.6.0-1 → 1.6.1-2

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

@@ -10,82 +10,102 @@ 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
  */
+//FINISH ME
 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 Text
+     * @uiGroup Task
      */
     this.cardTitle = "Title Text";
     /**
      * @uiName Description Text
+     * @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;
     /**
      * @uiName Progress Bar Unit
+     * @uiGroup Goal
      */
     this.progressBarUnit = "";
     /**
      * @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 CTA Button Text
+     * @uiGroup CTA Button
      */
     this.buttonText = "Complete Action";
     /**
-     * @uiName CTA Button Link Open in New Tab
+     * CTA Button Link Opens in New Tab
+     * @uiName Open In New Tab
+     * @uiGroup CTA Button
      */
     this.openNewTab = false;
     withHooks(this);
@@ -123,6 +143,9 @@ export class TaskCard {
         "tags": [{
             "text": "Reward Amount",
             "name": "uiName"
+          }, {
+            "text": "Reward",
+            "name": "uiGroup"
           }],
         "text": ""
       },
@@ -144,6 +167,9 @@ export class TaskCard {
         "tags": [{
             "text": "Reward Unit",
             "name": "uiName"
+          }, {
+            "text": "Reward",
+            "name": "uiGroup"
           }],
         "text": ""
       },
@@ -165,6 +191,9 @@ export class TaskCard {
         "tags": [{
             "text": "Title Text",
             "name": "uiName"
+          }, {
+            "text": "Task",
+            "name": "uiGroup"
           }],
         "text": ""
       },
@@ -186,6 +215,9 @@ export class TaskCard {
         "tags": [{
             "text": "Description Text",
             "name": "uiName"
+          }, {
+            "text": "Task",
+            "name": "uiGroup"
           }],
         "text": ""
       },
@@ -207,6 +239,9 @@ export class TaskCard {
         "tags": [{
             "text": "Goal Repeatable",
             "name": "uiName"
+          }, {
+            "text": "Goal",
+            "name": "uiGroup"
           }],
         "text": ""
       },
@@ -228,6 +263,9 @@ export class TaskCard {
         "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)."
       },
@@ -249,6 +287,9 @@ export class TaskCard {
         "tags": [{
             "text": "Show Progress Bar",
             "name": "uiName"
+          }, {
+            "text": "Goal",
+            "name": "uiGroup"
           }],
         "text": ""
       },
@@ -270,6 +311,9 @@ export class TaskCard {
         "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."
       },
@@ -291,6 +335,9 @@ export class TaskCard {
         "tags": [{
             "text": "Progress Bar Steps",
             "name": "uiName"
+          }, {
+            "text": "Goal",
+            "name": "uiGroup"
           }],
         "text": ""
       },
@@ -312,6 +359,9 @@ export class TaskCard {
         "tags": [{
             "text": "Progress Bar Unit",
             "name": "uiName"
+          }, {
+            "text": "Goal",
+            "name": "uiGroup"
           }],
         "text": ""
       },
@@ -333,6 +383,9 @@ export class TaskCard {
         "tags": [{
             "text": "Expiry Date Message",
             "name": "uiName"
+          }, {
+            "text": "Task",
+            "name": "uiGroup"
           }],
         "text": ""
       },
@@ -355,11 +408,14 @@ export class TaskCard {
             "text": "Reward Duration",
             "name": "uiName"
           }, {
-            "text": "DateRange",
+            "text": "dateRange",
             "name": "uiWidget"
           }, {
             "text": "{\"allowPastDates\":true, \"months\": 1}",
-            "name": "uiOptions"
+            "name": "uiWidgetOptions"
+          }, {
+            "text": "Reward",
+            "name": "uiGroup"
           }],
         "text": ""
       },
@@ -380,6 +436,9 @@ export class TaskCard {
         "tags": [{
             "text": "Start Date Message",
             "name": "uiName"
+          }, {
+            "text": "Task",
+            "name": "uiGroup"
           }],
         "text": "Shown to users before the start of the task duration."
       },
@@ -402,11 +461,14 @@ export class TaskCard {
             "text": "Display Duration",
             "name": "uiName"
           }, {
-            "text": "DateRange",
+            "text": "dateRange",
             "name": "uiWidget"
           }, {
             "text": "{\"allowPastDates\":true, \"months\": 1}",
-            "name": "uiOptions"
+            "name": "uiWidgetOptions"
+          }, {
+            "text": "Task",
+            "name": "uiGroup"
           }],
         "text": "Timeframe that the task card will be shown"
       },
@@ -427,6 +489,9 @@ export class TaskCard {
         "tags": [{
             "text": "Ended Date Message",
             "name": "uiName"
+          }, {
+            "text": "Task",
+            "name": "uiGroup"
           }],
         "text": "Shown to users after the end of the task duration."
       },
@@ -448,6 +513,12 @@ export class TaskCard {
         "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."
       },
@@ -469,6 +540,9 @@ export class TaskCard {
         "tags": [{
             "text": "CTA Button Text",
             "name": "uiName"
+          }, {
+            "text": "CTA Button",
+            "name": "uiGroup"
           }],
         "text": ""
       },
@@ -490,6 +564,9 @@ export class TaskCard {
         "tags": [{
             "text": "CTA Button Link",
             "name": "uiName"
+          }, {
+            "text": "CTA Button",
+            "name": "uiGroup"
           }],
         "text": ""
       },
@@ -508,10 +585,13 @@ export class TaskCard {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "CTA Button Link Open in New Tab",
+            "text": "Open In New Tab",
             "name": "uiName"
+          }, {
+            "text": "CTA Button",
+            "name": "uiGroup"
           }],
-        "text": ""
+        "text": "CTA Button Link Opens in New Tab"
       },
       "attribute": "open-new-tab",
       "reflect": false,
@@ -529,14 +609,20 @@ export class TaskCard {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "StatTypeSelectWidget",
+            "text": "statTypeSelectWidget",
             "name": "uiWidget"
           }, {
             "text": "Goal Progress Source",
             "name": "uiName"
+          }, {
+            "text": undefined,
+            "name": "required"
           }, {
             "text": "{\"version\": 1.1}",
-            "name": "uiOptions"
+            "name": "uiWidgetOptions"
+          }, {
+            "text": "Goal",
+            "name": "uiGroup"
           }],
         "text": "Select what type of stat to display for the goal. Manual paths are also supported."
       },
@@ -555,8 +641,11 @@ export class TaskCard {
       "optional": true,
       "docs": {
         "tags": [{
-            "text": "Event key of task card button",
+            "text": "Task Card Button Event Key",
             "name": "uiName"
+          }, {
+            "text": "CTA Button",
+            "name": "uiGroup"
           }],
         "text": "Optionally send an event to SaaSquatch when a user clicks the CTA. This field configured what key of the event sent is."
       },
@@ -575,8 +664,14 @@ export class TaskCard {
       "optional": true,
       "docs": {
         "tags": [{
-            "text": "Program ID override",
+            "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."
       },

package/dist/collection/components/sqm-text/sqm-text.js

@@ -49,6 +49,15 @@ const vanillaStyle = `
 `;
 /**
  * @uiName Text
+ * @slots [{"name":"", "title":"Text"}]
+ * @slotEditor richText
+ * @canvasRenderer always-replace
+ * @exampleGroup Typography
+ * @example H1 - <sqm-text><h1>H1 Header Text</h1></sqm-text>
+ * @example H2 - <sqm-text><h2>H2 Header Text</h2></sqm-text>
+ * @example H3 - <sqm-text><h3>H3 Header Text</h3></sqm-text>
+ * @example H4 - <sqm-text><h4>H4 Header Text</h4></sqm-text>
+ * @example Paragraph - <sqm-text><p>Paragraph Text</p></sqm-text>
  */
 export class Text {
   constructor() {

package/dist/collection/components/sqm-text-span/sqm-text-span.js

@@ -48,7 +48,7 @@ export class Text {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Text",
+            "text": "Type",
             "name": "uiName"
           }, {
             "text": "string",

package/dist/collection/components/sqm-timeline/sqm-timeline-entry.js

@@ -5,6 +5,9 @@ import { getProps } from "../../utils/utils";
 import { TimelineEntryView } from "./sqm-timeline-entry-view";
 /**
  * @uiName Timeline Entry
+ * @validParents ["sqm-timeline"]
+ * @exampleGroup Common Components
+ * @example Timeline Entry - <sqm-timeline-entry reward="$50" unit="visa giftcard" desc="You refer a friend" icon="circle" > </sqm-timeline-entry>
  */
 export class TimelineReward {
   constructor() {

package/dist/collection/components/sqm-timeline/sqm-timeline.js

@@ -2,8 +2,11 @@ import { withHooks } from "@saasquatch/stencil-hooks";
 import { Component, h, Prop, State } from "@stencil/core";
 import { useChildElements } from "../../tables/useChildElements";
 /**
- * @uiName Timeline
- */
+ * @uiName Program Timeline
+ * @slots [{"name":"","title":"Timeline","validChildren":["sqm-timeline-entry"]}]
+ * @exampleGroup Common Components
+ * @example Program Timeline - <sqm-timeline icon="circle"> <sqm-timeline-entry reward="$50" unit="visa giftcard" desc="You refer a friend" icon="circle" > </sqm-timeline-entry> <sqm-timeline-entry reward="$200" unit="visa giftcard" desc="Our sales team qualifies your friend as a good fit for our Enterprise plan" icon="circle" > </sqm-timeline-entry> <sqm-timeline-entry reward="$1000" unit="visa giftcard" desc="Your friend purchases an Enterprise plan" icon="circle" > </sqm-timeline-entry></sqm-timeline>
+*/
 export class Timeline {
   constructor() {
     this.ignored = true;

package/dist/collection/components/sqm-titled-section/sqm-titled-section.js

@@ -4,6 +4,9 @@ import { getProps } from "../../utils/utils";
 import { PortalSectionView } from "./sqm-portal-section-view";
 /**
  * @uiName Titled Section
+ * @slots [{"name":"label", "title":"Label"},{"name":"content", "title":"Content"}]
+ * @exampleGroup Layout
+ * @example Titled Section - <sqm-titled-section text-align="center" label-margin="small" padding="none"><div slot="label">Section Label</div><div slot="content">Add your section content here!</div></sqm-titled-section>
  */
 export class TitledSection {
   constructor() {
@@ -15,14 +18,14 @@ export class TitledSection {
      */
     this.textAlign = "left";
     /**
-     * @uiName Label margin style
+     * @uiName Label Margin Style
      * @uiType string
      * @uiEnum ["none", "xxx-small", "xx-small", "x-small", "small", "medium", "large", "x-large", "xx-large", "xxx-large", "xxxx-large"]
      * @uiEnumNames ["None", "XXX-Small", "XX-Small", "X-Small", "Small", "Medium", "Large", "X-Large", "XX-Large", "XXX-Large", "XXXX-Large"]
      */
     this.labelMargin = "small";
     /**
-     * @uiName Section padding
+     * @uiName Section Padding
      * @uiType string
      * @uiEnum ["none", "xxx-small", "xx-small", "x-small", "small", "medium", "large", "x-large", "xx-large", "xxx-large", "xxxx-large"]
      * @uiEnumNames ["None", "XXX-Small", "XX-Small", "X-Small", "Small", "Medium", "Large", "X-Large", "XX-Large", "XXX-Large", "XXXX-Large"]
@@ -106,7 +109,7 @@ export class TitledSection {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Label margin style",
+            "text": "Label Margin Style",
             "name": "uiName"
           }, {
             "text": "string",
@@ -141,7 +144,7 @@ export class TitledSection {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Section padding",
+            "text": "Section Padding",
             "name": "uiName"
           }, {
             "text": "string",

package/dist/collection/components/sqm-user-name/sqm-user-name.js

@@ -6,16 +6,19 @@ import { UserNameView } from "./sqm-user-name-view";
 import { useUserName } from "./useUserName";
 /**
  * @uiName User Name
+ * @exampleGroup Common Components
+ * @example User Name Display - <sqm-user-name fallback="Anonymous User"></sqm-user-name>
  */
 export class UserName {
   constructor() {
     this._ignored = true;
     /**
-     * @uiName Fallback name for nameless users
+     * Fallback name for unknown users
+     * @uiName Fallback Name
      */
     this.fallback = "Anonymous User";
     /**
-     * @uiName Loading text
+     * @uiName Loading Text
      */
     this.loadingText = "...";
     withHooks(this);
@@ -40,10 +43,10 @@ export class UserName {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Fallback name for nameless users",
+            "text": "Fallback Name",
             "name": "uiName"
           }],
-        "text": ""
+        "text": "Fallback name for unknown users"
       },
       "attribute": "fallback",
       "reflect": false,
@@ -61,7 +64,7 @@ export class UserName {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Loading text",
+            "text": "Loading Text",
             "name": "uiName"
           }],
         "text": ""

package/dist/esm/{ShadowViewAddon-4558079b.js → ShadowViewAddon-e2996624.js}

@@ -1,11 +1,11 @@
 import { h, c as Host, d as getAssetPath, g as getElement } from './index-17b4da69.js';
-import { k as useState, b as browser, j as useMemo } from './stencil-hooks.module-e39af977.js';
-import { i as intl } from './global-78c0c467.js';
-import { d as dist, A, a as ae, J, p as pn, $ as $e, H, O } from './index.module-2b4f1755.js';
+import { k as useState, b as browser, i as useMemo } from './stencil-hooks.module-acc8a613.js';
+import { i as intl } from './global-5c84f57f.js';
+import { d as dist, M, i as ie, R as Rn, b as sn, q as qe, k as kn, A as An } from './index.module-f5e17a4e.js';
 import { c as cjs } from './cjs-bdfb4486.js';
 import { H as HostBlock, A as AuthWrapper, a as AuthColumn, b as AuthButtonsContainer, E as ErrorStyles } from './mixins-f60a614c.js';
 import { c as createStyleSheet, j as jss, a as create } from './JSS-f00f9536.js';
-import { l as luxon } from './luxon-578505e2.js';
+import { l as luxon } from './luxon-f44215d9.js';
 import { l as luxonLocale } from './utils-334c1e34.js';
 import { T as TextSpanView } from './sqm-text-span-view-0ba1484d.js';
 import { P as PortalContainerView } from './sqm-portal-container-view-ca454627.js';
@@ -358,11 +358,11 @@ const WIDGET_ENGAGEMENT_EVENT = dist.gql `
 `;
 function useShareLink(props) {
   var _a, _b;
-  const { programId = A() } = props;
-  const user = ae();
-  const engagementMedium = J();
-  const { data } = pn(MessageLinkQuery, { programId }, !(user === null || user === void 0 ? void 0 : user.jwt));
-  const [sendLoadEvent] = $e(WIDGET_ENGAGEMENT_EVENT);
+  const { programId = M() } = props;
+  const user = ie();
+  const engagementMedium = Rn();
+  const { data } = sn(MessageLinkQuery, { programId }, !(user === null || user === void 0 ? void 0 : user.jwt));
+  const [sendLoadEvent] = qe(WIDGET_ENGAGEMENT_EVENT);
   const shareString = (_b = (_a = data === null || data === void 0 ? void 0 : data.user) === null || _a === void 0 ? void 0 : _a.shareLink) !== null && _b !== void 0 ? _b : 
   // Shown during loading
   "...";
@@ -447,17 +447,17 @@ function GenericShare(res) {
 function useShareButton(props) {
   var _a, _b;
   const { sharetitle, sharetext, medium } = props;
-  const programId = props.programId ? props.programId : A();
-  const user = ae();
+  const programId = props.programId ? props.programId : M();
+  const user = ie();
   const variables = {
-    engagementMedium: J(),
+    engagementMedium: Rn(),
     programId: programId,
     shareMedium: medium.toUpperCase(),
   };
   // only queries if a programId is available
-  const res = pn(MessageLinkQuery$1, variables, !(user === null || user === void 0 ? void 0 : user.jwt) || !programId);
+  const res = sn(MessageLinkQuery$1, variables, !(user === null || user === void 0 ? void 0 : user.jwt) || !programId);
   const directLink = (_b = (_a = res === null || res === void 0 ? void 0 : res.data) === null || _a === void 0 ? void 0 : _a.viewer) === null || _b === void 0 ? void 0 : _b.shareLink;
-  const environment = H();
+  const environment = kn();
   const hide = (medium.toLocaleUpperCase() === "SMS" &&
     window.orientation === undefined) ||
     (medium.toLocaleUpperCase() === "DIRECT" && !window.navigator.share);
@@ -773,7 +773,7 @@ function pathToRegexp(path, keys, options) {
 const debug = browser("sq:useBigStat");
 const LOADING = "...";
 const debugQuery = (query, variables, getStat) => {
-  const res = pn(query, variables);
+  const res = sn(query, variables);
   if (!(res === null || res === void 0 ? void 0 : res.data) && !res.loading) {
     console.error("issue getting stat:", res);
   }
@@ -1331,9 +1331,9 @@ const StatPaths = [
 const StatPatterns = StatPaths.map((pattern) => pathToRegexp(pattern.route));
 function useBigStat(props) {
   var _a;
-  const { statType, flexReverse, alignment, programId = A(), } = props;
-  const locale = O();
-  const userIdent = ae();
+  const { statType, flexReverse, alignment, programId = M(), } = props;
+  const locale = An();
+  const userIdent = ie();
   const re = useMemo(() => StatPatterns.find((re) => re.exec(statType)), [statType]);
   if (!(re === null || re === void 0 ? void 0 : re.exec(statType))) {
     return {

package/dist/esm/{global-78c0c467.js → global-5c84f57f.js}

@@ -1,5 +1,5 @@
-import { g as getAugmentedNamespace, c as createCommonjsModule, a as commonjsGlobal, b as browser, l as l$1 } from './stencil-hooks.module-e39af977.js';
-import { s as src, m as memoize, E } from './index.module-2b4f1755.js';
+import { g as getAugmentedNamespace, c as createCommonjsModule, a as commonjsGlobal, b as browser, l as l$1 } from './stencil-hooks.module-acc8a613.js';
+import { s as src, m as memoize, S } from './index.module-f5e17a4e.js';
 
 var __assign = (undefined && undefined.__assign) || function () {
     __assign = Object.assign || function(t) {
@@ -26639,7 +26639,7 @@ sl-input::part(label){
 
 `;
 
-E(l$1);
+S(l$1);
 const debug = browser("sq:global");
 const cache = createIntlCache();
 const intl = createIntl({