@saasquatch/mint-components 1.6.0 → 1.6.1-10

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

@@ -1,420 +1,426 @@
-import { isDemo } from "@saasquatch/component-boilerplate";
-import { withHooks } from "@saasquatch/stencil-hooks";
-import { Component, Prop, h, State } from "@stencil/core";
-import deepmerge from "deepmerge";
-import { withShadowView } from "../../ShadowViewAddon";
-import { LeaderboardView } from "./sqm-leaderboard-view";
-import { useLeaderboard } from "./useLeaderboard";
-/**
- * @uiName Leaderboard
- */
-export class Leaderboard {
-  constructor() {
-    /**
-     * Hide the viewer's leaderboard row if not in the top 10.
-     *
-     * @uiName Hide Viewing User
-     */
-    this.hideViewer = false;
-    /**
-     * Text displayed for users without names in the leaderboard
-     *
-     * @uiName Anonymous User Name
-     */
-    this.anonymousUser = "Anonymous User";
-    /**
-     * Control the maximum amount of rows displayed on the leaderboard.
-     *
-     * @uiName Maximum Rows Number
-     */
-    this.maxRows = 10;
-    this.ignored = true;
-    withHooks(this);
-    withShadowView(this);
-  }
-  disconnectedCallback() { }
-  render() {
-    const props = {
-      empty: h(EmptySlot, null),
-      loadingstate: h(LoadingSlot, null),
-      usersheading: this.usersheading,
-      statsheading: this.statsheading,
-      rankheading: this.rankheading,
-      rankType: this.rankType,
-      leaderboardType: this.leaderboardType,
-      maxRows: this.maxRows,
-      programId: this.programId,
-      anonymousUser: this.anonymousUser,
-      interval: this.interval,
-      hideViewer: this.hideViewer,
-      showRank: this.showRank,
-    };
-    const demoProps = { ...props, demoData: this.demoData };
-    const viewprops = isDemo()
-      ? useLeaderboardDemo(demoProps)
-      : useLeaderboard(props);
-    return h(LeaderboardView, Object.assign({}, viewprops));
-  }
-  static get is() { return "sqm-leaderboard"; }
-  static get encapsulation() { return "shadow"; }
-  static get properties() { return {
-    "programId": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [{
-            "text": "Program",
-            "name": "uiName"
-          }],
-        "text": "Filters leaderboard to show only data from this program. Defaults to the program context where this leaderboard is.\nIf no program ID is set or provided by context, then a global leaderboard is shown."
-      },
-      "attribute": "program-id",
-      "reflect": false
-    },
-    "usersheading": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "text": "User Column Heading",
-            "name": "uiName"
-          }],
-        "text": ""
-      },
-      "attribute": "usersheading",
-      "reflect": false
-    },
-    "statsheading": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "text": "Stats Column Heading",
-            "name": "uiName"
-          }],
-        "text": ""
-      },
-      "attribute": "statsheading",
-      "reflect": false
-    },
-    "rankheading": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [{
-            "text": "Rank Column Heading",
-            "name": "uiName"
-          }],
-        "text": ""
-      },
-      "attribute": "rankheading",
-      "reflect": false
-    },
-    "showRank": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "text": "Show Rank Column",
-            "name": "uiName"
-          }],
-        "text": ""
-      },
-      "attribute": "show-rank",
-      "reflect": false
-    },
-    "hideViewer": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "text": "Hide Viewing User",
-            "name": "uiName"
-          }],
-        "text": "Hide the viewer's leaderboard row if not in the top 10."
-      },
-      "attribute": "hide-viewer",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "rankType": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "\"rowNumber\" | \"rank\" | \"denseRank\"",
-        "resolved": "\"denseRank\" | \"rank\" | \"rowNumber\"",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "text": "Rank Type",
-            "name": "uiName"
-          }, {
-            "text": "string",
-            "name": "uiType"
-          }, {
-            "text": "[\"rowNumber\", \"rank\", \"denseRank\"]",
-            "name": "uiEnum"
-          }, {
-            "text": "[\"Row Number\", \"Rank\", \"Dense Rank\"]",
-            "name": "uiEnumNames"
-          }],
-        "text": ""
-      },
-      "attribute": "rank-type",
-      "reflect": false
-    },
-    "leaderboardType": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "| \"topStartedReferrers\"\n    | \"topConvertedReferrers\"\n    | \"topPointEarners\"",
-        "resolved": "\"topConvertedReferrers\" | \"topPointEarners\" | \"topStartedReferrers\"",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "text": "Leaderboard Type",
-            "name": "uiName"
-          }, {
-            "text": "string",
-            "name": "uiType"
-          }, {
-            "text": "[\"topStartedReferrers\", \"topConvertedReferrers\", \"topPointEarners\"]",
-            "name": "uiEnum"
-          }, {
-            "text": "[\"Top Started Referrers\", \"Top Converted Referrers\", \"Top Point Earners\"]",
-            "name": "uiEnumNames"
-          }],
-        "text": ""
-      },
-      "attribute": "leaderboard-type",
-      "reflect": false
-    },
-    "anonymousUser": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "text": "Anonymous User Name",
-            "name": "uiName"
-          }],
-        "text": "Text displayed for users without names in the leaderboard"
-      },
-      "attribute": "anonymous-user",
-      "reflect": false,
-      "defaultValue": "\"Anonymous User\""
-    },
-    "interval": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "text": "Leaderboard Time Interval",
-            "name": "uiName"
-          }, {
-            "text": "DateRange",
-            "name": "uiWidget"
-          }, {
-            "text": "{\"allowPastDates\":true, \"months\": 1}",
-            "name": "uiOptions"
-          }],
-        "text": "Only count leaderboard activity within a given interval"
-      },
-      "attribute": "interval",
-      "reflect": false
-    },
-    "maxRows": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "text": "Maximum Rows Number",
-            "name": "uiName"
-          }],
-        "text": "Control the maximum amount of rows displayed on the leaderboard."
-      },
-      "attribute": "max-rows",
-      "reflect": false,
-      "defaultValue": "10"
-    },
-    "demoData": {
-      "type": "unknown",
-      "mutable": false,
-      "complexType": {
-        "original": "DemoData<LeaderboardViewProps>",
-        "resolved": "{ states?: { loading: boolean; hasLeaders: boolean; styles: { usersheading: string; statsheading: string; rankheading?: string; showRank?: boolean; hideViewer?: boolean; anonymousUser?: string; }; }; data?: { rankType: string; leaderboard: { textValue: string; rank: number; firstName: string; lastInitial: string; rowNumber: number; }[]; viewerRank?: { textValue: string; rank: number; firstName: string; lastInitial: string; rowNumber: number; }; }; elements?: { empty: VNode; loadingstate: VNode; }; }",
-        "references": {
-          "DemoData": {
-            "location": "import",
-            "path": "../../global/demo"
-          },
-          "LeaderboardViewProps": {
-            "location": "import",
-            "path": "./sqm-leaderboard-view"
-          }
-        }
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [{
-            "text": undefined,
-            "name": "undocumented"
-          }, {
-            "text": "object",
-            "name": "uiType"
-          }],
-        "text": ""
-      }
-    }
-  }; }
-  static get states() { return {
-    "ignored": {}
-  }; }
-}
-function EmptySlot() {
-  return (h("slot", { name: "empty" },
-    h("sqm-empty", { "empty-state-image": "https://res.cloudinary.com/saasquatch/image/upload/v1644360953/squatch-assets/empty_leaderboard2.png", "empty-state-header": "View your rank in the leaderboard", "empty-state-text": "Be the first to refer a friend and reach the top of the leaderboard" })));
-}
-function LoadingSlot() {
-  return (h("slot", { name: "loading" },
-    h("table", null, [...Array(10)].map(() => {
-      return (h("tr", null,
-        h("td", null,
-          h("sl-skeleton", null))));
-    }))));
-}
-function useLeaderboardDemo(props) {
-  var _a, _b;
-  const data = ((_b = (_a = props.demoData) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.leaderboard) || [
-    {
-      firstName: "Viktor",
-      lastInitial: "V",
-      textValue: "82",
-      rank: 1,
-      rowNumber: 1,
-    },
-    {
-      firstName: "MF",
-      lastInitial: "D",
-      textValue: "73",
-      rank: 2,
-      rowNumber: 2,
-    },
-    {
-      firstName: "Freddie",
-      lastInitial: "G",
-      textValue: "64",
-      rank: 3,
-      rowNumber: 3,
-    },
-    {
-      firstName: "Benny",
-      lastInitial: "B",
-      textValue: "55",
-      rank: 4,
-      rowNumber: 4,
-    },
-    {
-      textValue: "46",
-      rank: 5,
-      rowNumber: 5,
-    },
-  ];
-  return deepmerge({
-    states: {
-      loading: false,
-      hasLeaders: true,
-      styles: {
-        usersheading: props.usersheading
-          ? props.usersheading
-          : "Top referrers",
-        statsheading: props.statsheading
-          ? props.statsheading
-          : "New customers",
-        rankheading: props.rankheading ? props.rankheading : "Rank",
-        anonymousUser: props.anonymousUser
-          ? props.anonymousUser
-          : "Anonymous User",
-        showRank: props.showRank,
-        hideViewer: props.hideViewer,
-      },
-    },
-    data: {
-      rankType: "rowNumber",
-      leaderboard: data,
-    },
-    elements: {
-      empty: h(EmptySlot, null),
-      loadingstate: h(LoadingSlot, null),
-    },
-  }, props.demoData || {}, { arrayMerge: (_, a) => a });
-}
+import { isDemo } from "@saasquatch/component-boilerplate";
+import { withHooks } from "@saasquatch/stencil-hooks";
+import { Component, Prop, h, State } from "@stencil/core";
+import deepmerge from "deepmerge";
+import { withShadowView } from "../../ShadowViewAddon";
+import { LeaderboardView } from "./sqm-leaderboard-view";
+import { useLeaderboard } from "./useLeaderboard";
+/**
+ * @uiName Leaderboard
+ * @slots [{"name":"empty", "title":"Empty State"}]
+ */
+export class Leaderboard {
+  constructor() {
+    /**
+     * Hide the viewer's leaderboard row if not in the top results.
+     *
+     * @uiName Hide Viewing User
+     */
+    this.hideViewer = false;
+    /**
+     * Title displayed for users without names
+     * @uiName Unknown User Text
+     */
+    this.anonymousUser = "Anonymous User";
+    /**
+     * Control the maximum amount of rows displayed on the leaderboard.
+     *
+     * @uiName Maximum Rows Number
+     */
+    this.maxRows = 10;
+    this.ignored = true;
+    withHooks(this);
+    withShadowView(this);
+  }
+  disconnectedCallback() { }
+  render() {
+    const props = {
+      empty: h(EmptySlot, null),
+      loadingstate: h(LoadingSlot, null),
+      usersheading: this.usersheading,
+      statsheading: this.statsheading,
+      rankheading: this.rankheading,
+      rankType: this.rankType,
+      leaderboardType: this.leaderboardType,
+      maxRows: this.maxRows,
+      programId: this.programId,
+      anonymousUser: this.anonymousUser,
+      interval: this.interval,
+      hideViewer: this.hideViewer,
+      showRank: this.showRank,
+    };
+    const demoProps = { ...props, demoData: this.demoData };
+    const viewprops = isDemo()
+      ? useLeaderboardDemo(demoProps)
+      : useLeaderboard(props);
+    return h(LeaderboardView, Object.assign({}, viewprops));
+  }
+  static get is() { return "sqm-leaderboard"; }
+  static get encapsulation() { return "shadow"; }
+  static get properties() { return {
+    "programId": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": "Program",
+            "name": "uiName"
+          }, {
+            "text": "programSelector",
+            "name": "uiWidget"
+          }],
+        "text": "Filters leaderboard to show only data from this program. Defaults to the program context where this leaderboard is.\r\nIf no program ID is set or provided by context, then a global leaderboard is shown."
+      },
+      "attribute": "program-id",
+      "reflect": false
+    },
+    "usersheading": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "User Column Heading",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "usersheading",
+      "reflect": false
+    },
+    "statsheading": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Stats Column Heading",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "statsheading",
+      "reflect": false
+    },
+    "rankheading": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": "Rank Column Heading",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "rankheading",
+      "reflect": false
+    },
+    "showRank": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Show Leaderboard Rank",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "show-rank",
+      "reflect": false
+    },
+    "hideViewer": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Hide Viewing User",
+            "name": "uiName"
+          }],
+        "text": "Hide the viewer's leaderboard row if not in the top results."
+      },
+      "attribute": "hide-viewer",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "rankType": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "\"rowNumber\" | \"rank\" | \"denseRank\"",
+        "resolved": "\"denseRank\" | \"rank\" | \"rowNumber\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Rank Type",
+            "name": "uiName"
+          }, {
+            "text": "string",
+            "name": "uiType"
+          }, {
+            "text": "[\"rowNumber\", \"rank\", \"denseRank\"]",
+            "name": "uiEnum"
+          }, {
+            "text": "[\"Row Number\", \"Rank\", \"Dense Rank\"]",
+            "name": "uiEnumNames"
+          }],
+        "text": ""
+      },
+      "attribute": "rank-type",
+      "reflect": false
+    },
+    "leaderboardType": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "| \"topStartedReferrers\"\r\n    | \"topConvertedReferrers\"\r\n    | \"topPointEarners\"",
+        "resolved": "\"topConvertedReferrers\" | \"topPointEarners\" | \"topStartedReferrers\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Leaderboard Type",
+            "name": "uiName"
+          }, {
+            "text": "string",
+            "name": "uiType"
+          }, {
+            "text": undefined,
+            "name": "required"
+          }, {
+            "text": "[\"topStartedReferrers\", \"topConvertedReferrers\", \"topPointEarners\"]",
+            "name": "uiEnum"
+          }, {
+            "text": "[\"Top Started Referrers\", \"Top Converted Referrers\", \"Top Point Earners\"]",
+            "name": "uiEnumNames"
+          }],
+        "text": ""
+      },
+      "attribute": "leaderboard-type",
+      "reflect": false
+    },
+    "anonymousUser": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Unknown User Text",
+            "name": "uiName"
+          }],
+        "text": "Title displayed for users without names"
+      },
+      "attribute": "anonymous-user",
+      "reflect": false,
+      "defaultValue": "\"Anonymous User\""
+    },
+    "interval": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Leaderboard Time Interval",
+            "name": "uiName"
+          }, {
+            "text": "dateRange",
+            "name": "uiWidget"
+          }, {
+            "text": "{\"allowPastDates\":true, \"months\": 1}",
+            "name": "uiWidgetOptions"
+          }],
+        "text": ""
+      },
+      "attribute": "interval",
+      "reflect": false
+    },
+    "maxRows": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Maximum Rows Number",
+            "name": "uiName"
+          }],
+        "text": "Control the maximum amount of rows displayed on the leaderboard."
+      },
+      "attribute": "max-rows",
+      "reflect": false,
+      "defaultValue": "10"
+    },
+    "demoData": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "DemoData<LeaderboardViewProps>",
+        "resolved": "{ states?: { loading: boolean; hasLeaders: boolean; styles: { usersheading: string; statsheading: string; rankheading?: string; showRank?: boolean; hideViewer?: boolean; anonymousUser?: string; }; }; data?: { rankType: string; leaderboard: { textValue: string; rank: number; firstName: string; lastInitial: string; rowNumber: number; }[]; viewerRank?: { textValue: string; rank: number; firstName: string; lastInitial: string; rowNumber: number; }; }; elements?: { empty: VNode; loadingstate: VNode; }; }",
+        "references": {
+          "DemoData": {
+            "location": "import",
+            "path": "../../global/demo"
+          },
+          "LeaderboardViewProps": {
+            "location": "import",
+            "path": "./sqm-leaderboard-view"
+          }
+        }
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": undefined,
+            "name": "undocumented"
+          }, {
+            "text": "object",
+            "name": "uiType"
+          }],
+        "text": ""
+      }
+    }
+  }; }
+  static get states() { return {
+    "ignored": {}
+  }; }
+}
+function EmptySlot() {
+  return (h("slot", { name: "empty" },
+    h("sqm-empty", { "empty-state-image": "https://res.cloudinary.com/saasquatch/image/upload/v1644360953/squatch-assets/empty_leaderboard2.png", "empty-state-header": "View your rank in the leaderboard", "empty-state-text": "Be the first to refer a friend and reach the top of the leaderboard" })));
+}
+function LoadingSlot() {
+  return (h("slot", { name: "loading" },
+    h("table", null, [...Array(10)].map(() => {
+      return (h("tr", null,
+        h("td", null,
+          h("sl-skeleton", null))));
+    }))));
+}
+function useLeaderboardDemo(props) {
+  var _a, _b;
+  const data = ((_b = (_a = props.demoData) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.leaderboard) || [
+    {
+      firstName: "Viktor",
+      lastInitial: "V",
+      textValue: "82",
+      rank: 1,
+      rowNumber: 1,
+    },
+    {
+      firstName: "MF",
+      lastInitial: "D",
+      textValue: "73",
+      rank: 2,
+      rowNumber: 2,
+    },
+    {
+      firstName: "Freddie",
+      lastInitial: "G",
+      textValue: "64",
+      rank: 3,
+      rowNumber: 3,
+    },
+    {
+      firstName: "Benny",
+      lastInitial: "B",
+      textValue: "55",
+      rank: 4,
+      rowNumber: 4,
+    },
+    {
+      textValue: "46",
+      rank: 5,
+      rowNumber: 5,
+    },
+  ];
+  return deepmerge({
+    states: {
+      loading: false,
+      hasLeaders: true,
+      styles: {
+        usersheading: props.usersheading
+          ? props.usersheading
+          : "Top referrers",
+        statsheading: props.statsheading
+          ? props.statsheading
+          : "New customers",
+        rankheading: props.rankheading ? props.rankheading : "Rank",
+        anonymousUser: props.anonymousUser
+          ? props.anonymousUser
+          : "Anonymous User",
+        showRank: props.showRank,
+        hideViewer: props.hideViewer,
+      },
+    },
+    data: {
+      rankType: "rowNumber",
+      leaderboard: data,
+    },
+    elements: {
+      empty: h(EmptySlot, null),
+      loadingstate: h(LoadingSlot, null),
+    },
+  }, props.demoData || {}, { arrayMerge: (_, a) => a });
+}