@saasquatch/mint-components 1.5.0-2 → 1.5.0-23

package/dist/collection/components/sqm-rewards-table/columns/sqm-rewards-table-reward-column.js

@@ -0,0 +1,145 @@
+import { withHooks } from "@saasquatch/stencil-hooks";
+import { Component, h, Host, Method, Prop } from "@stencil/core";
+import { useRequestRerender } from "../../../tables/re-render";
+/**
+ * @uiName Rewards Table Reward Column
+ */
+export class RewardsTableColumn {
+  constructor() {
+    /**
+     * @uiName Reward column title
+     */
+    this.columnTitle = "Rewards";
+    /**
+     * @uiName Redeemed Amount Text
+     */
+    this.redeemedText = "{redeemedAmount} redeemed";
+    /**
+     * @uiName Available Amount Text
+     */
+    this.availableText = "{availableAmount} available";
+    withHooks(this);
+  }
+  disconnectedCallback() { }
+  async renderCell(data) {
+    return (h("sqm-rewards-table-rewards-cell", { reward: data === null || data === void 0 ? void 0 : data[0], redeemedText: this.redeemedText, availableText: this.availableText }));
+  }
+  async renderLabel() {
+    return this.columnTitle;
+  }
+  render() {
+    useRequestRerender([
+      this.columnTitle,
+      this.availableText,
+      this.redeemedText,
+    ]);
+    return h(Host, { style: { display: "none" } });
+  }
+  static get is() { return "sqm-rewards-table-reward-column"; }
+  static get encapsulation() { return "shadow"; }
+  static get properties() { return {
+    "columnTitle": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Reward column title",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "column-title",
+      "reflect": false,
+      "defaultValue": "\"Rewards\""
+    },
+    "redeemedText": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Redeemed Amount Text",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "redeemed-text",
+      "reflect": false,
+      "defaultValue": "\"{redeemedAmount} redeemed\""
+    },
+    "availableText": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Available Amount Text",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "available-text",
+      "reflect": false,
+      "defaultValue": "\"{availableAmount} available\""
+    }
+  }; }
+  static get methods() { return {
+    "renderCell": {
+      "complexType": {
+        "signature": "(data: Reward[]) => Promise<any>",
+        "parameters": [{
+            "tags": [],
+            "text": ""
+          }],
+        "references": {
+          "Promise": {
+            "location": "global"
+          },
+          "Reward": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<any>"
+      },
+      "docs": {
+        "text": "",
+        "tags": []
+      }
+    },
+    "renderLabel": {
+      "complexType": {
+        "signature": "() => Promise<string>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<string>"
+      },
+      "docs": {
+        "text": "",
+        "tags": []
+      }
+    }
+  }; }
+}

package/dist/collection/components/sqm-rewards-table/columns/sqm-rewards-table-source-column.js

@@ -0,0 +1,225 @@
+import { withHooks } from "@saasquatch/stencil-hooks";
+import { Component, h, Host, Method, Prop } from "@stencil/core";
+import { useRequestRerender } from "../../../tables/re-render";
+/**
+ * @uiName Reward Table Source Column
+ */
+export class RewardTableUserColumn {
+  constructor() {
+    /**
+     * @uiName User Column Title
+     */
+    this.columnTitle = "Source";
+    /**
+     * @uiName Name displayed for anonymous users
+     */
+    this.anonymousUser = "Anonymous User";
+    /**
+     * @uiName Name displayed for deleted users
+     */
+    this.deletedUser = "Deleted User";
+    /**
+     * @uiName Reward Exchange label
+     */
+    this.rewardExchangeText = "Reward Exchange";
+    /**
+     * Shown when a reward has been created by a referral
+     *
+     * @uiName Referral Text
+     */
+    this.referralText = "{rewardSource, select, FRIEND_SIGNUP {Referral to} REFERRED {Referred by} other {}}";
+    /**
+     * @uiName Reward Source Text
+     */
+    this.rewardSourceText = "{rewardSource, select, MANUAL {Manual} AUTOMATED {Automated} other {}}";
+    withHooks(this);
+  }
+  disconnectedCallback() { }
+  async renderCell(data) {
+    return (h("sqm-rewards-table-source-cell", { reward: data === null || data === void 0 ? void 0 : data[0], anonymousUserText: this.anonymousUser, deletedUserText: this.deletedUser, rewardExchangeText: this.rewardExchangeText, referralText: this.referralText, rewardSourceText: this.rewardSourceText }));
+  }
+  async renderLabel() {
+    return this.columnTitle;
+  }
+  render() {
+    useRequestRerender([
+      this.deletedUser,
+      this.anonymousUser,
+      this.columnTitle,
+      this.rewardExchangeText,
+      this.referralText,
+      this.referralText,
+    ]);
+    return h(Host, { style: { display: "none" } });
+  }
+  static get is() { return "sqm-rewards-table-source-column"; }
+  static get encapsulation() { return "shadow"; }
+  static get properties() { return {
+    "columnTitle": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "User Column Title",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "column-title",
+      "reflect": false,
+      "defaultValue": "\"Source\""
+    },
+    "anonymousUser": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Name displayed for anonymous users",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "anonymous-user",
+      "reflect": false,
+      "defaultValue": "\"Anonymous User\""
+    },
+    "deletedUser": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Name displayed for deleted users",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "deleted-user",
+      "reflect": false,
+      "defaultValue": "\"Deleted User\""
+    },
+    "rewardExchangeText": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Reward Exchange label",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "reward-exchange-text",
+      "reflect": false,
+      "defaultValue": "\"Reward Exchange\""
+    },
+    "referralText": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Referral Text",
+            "name": "uiName"
+          }],
+        "text": "Shown when a reward has been created by a referral"
+      },
+      "attribute": "referral-text",
+      "reflect": false,
+      "defaultValue": "\"{rewardSource, select, FRIEND_SIGNUP {Referral to} REFERRED {Referred by} other {}}\""
+    },
+    "rewardSourceText": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Reward Source Text",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "reward-source-text",
+      "reflect": false,
+      "defaultValue": "\"{rewardSource, select, MANUAL {Manual} AUTOMATED {Automated} other {}}\""
+    }
+  }; }
+  static get methods() { return {
+    "renderCell": {
+      "complexType": {
+        "signature": "(data: Reward[]) => Promise<any>",
+        "parameters": [{
+            "tags": [],
+            "text": ""
+          }],
+        "references": {
+          "Promise": {
+            "location": "global"
+          },
+          "Reward": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<any>"
+      },
+      "docs": {
+        "text": "",
+        "tags": []
+      }
+    },
+    "renderLabel": {
+      "complexType": {
+        "signature": "() => Promise<string>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<string>"
+      },
+      "docs": {
+        "text": "",
+        "tags": []
+      }
+    }
+  }; }
+}

package/dist/collection/components/sqm-rewards-table/columns/sqm-rewards-table-status-column.js

@@ -0,0 +1,142 @@
+import { withHooks } from "@saasquatch/stencil-hooks";
+import { Component, h, Host, Method, Prop } from "@stencil/core";
+import { useRequestRerender } from "../../../tables/re-render";
+/**
+ * @uiName Reward Table Status Column
+ */
+export class RewardTableStatusColumn {
+  constructor() {
+    /**
+     * @uiName Column Title
+     */
+    this.columnTitle = "Status";
+    /**
+     * @uiName Reward Status Text
+     */
+    this.statusText = "{status, select, AVAILABLE {Available} PENDING {Pending} EXPIRED {Expired} REDEEMED {Redeemed} other {Not available} }";
+    /**
+     * @uiName Expired Status Text
+     */
+    this.expiryText = "Expires on ";
+    withHooks(this);
+  }
+  disconnectedCallback() { }
+  async renderCell(data) {
+    const rewardData = data === null || data === void 0 ? void 0 : data[0];
+    return (h("sqm-rewards-table-status-cell", { statusText: this.statusText, reward: rewardData, expiryText: this.expiryText }));
+  }
+  async renderLabel() {
+    return this.columnTitle;
+  }
+  render() {
+    useRequestRerender([this.columnTitle, this.expiryText]);
+    return h(Host, { style: { display: "none" } });
+  }
+  static get is() { return "sqm-rewards-table-status-column"; }
+  static get encapsulation() { return "shadow"; }
+  static get properties() { return {
+    "columnTitle": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Column Title",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "column-title",
+      "reflect": false,
+      "defaultValue": "\"Status\""
+    },
+    "statusText": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Reward Status Text",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "status-text",
+      "reflect": false,
+      "defaultValue": "\"{status, select, AVAILABLE {Available} PENDING {Pending} EXPIRED {Expired} REDEEMED {Redeemed} other {Not available} }\""
+    },
+    "expiryText": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Expired Status Text",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "expiry-text",
+      "reflect": false,
+      "defaultValue": "\"Expires on \""
+    }
+  }; }
+  static get methods() { return {
+    "renderCell": {
+      "complexType": {
+        "signature": "(data: Reward[]) => Promise<any>",
+        "parameters": [{
+            "tags": [],
+            "text": ""
+          }],
+        "references": {
+          "Promise": {
+            "location": "global"
+          },
+          "Reward": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<any>"
+      },
+      "docs": {
+        "text": "",
+        "tags": []
+      }
+    },
+    "renderLabel": {
+      "complexType": {
+        "signature": "() => Promise<string>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<string>"
+      },
+      "docs": {
+        "text": "",
+        "tags": []
+      }
+    }
+  }; }
+}

package/dist/collection/components/sqm-rewards-table/sqm-rewards-table-view.js

@@ -0,0 +1,119 @@
+import { h } from "@stencil/core";
+import jss from "jss";
+import preset from "jss-preset-default";
+import { gap } from "../../global/mixins";
+export function RewardsTableView(props) {
+  const { states, data, callbacks, elements } = props;
+  const { columns, rows } = elements;
+  const { show } = states;
+  const hiddenCols = data.hiddenColumns.split(",").map(Number);
+  console.log(props);
+  const mobile = `@media (max-width: ${data.tabletBreakpoint}px)`;
+  const tablet = "@media (min-width: " +
+    data.phoneBreakpoint +
+    "px) and (max-width: " +
+    data.tabletBreakpoint +
+    "px)";
+  const style = {
+    THead: {
+      padding: "var(--sl-spacing-small)",
+      paddingLeft: "0",
+      textAlign: "left",
+      [mobile]: {
+        display: "none",
+      },
+    },
+    TCell: {
+      padding: "var(--sl-spacing-small)",
+      paddingLeft: "0",
+      [mobile]: {
+        display: "block",
+        padding: "0",
+        marginBottom: "var(--sl-spacing-medium)",
+        "&:first-child": {
+          textAlign: "left",
+        },
+        "&:before": {
+          content: "attr(data-label)",
+          float: "left",
+          width: "40%",
+          marginBottom: "1px",
+        },
+        "&:last-child": {
+          marginBottom: "0",
+        },
+      },
+    },
+    TCellHidden: {
+      padding: "var(--sl-spacing-small)",
+      paddingLeft: "0",
+      [mobile]: {
+        display: "block",
+        padding: "0",
+        marginBottom: "var(--sl-spacing-medium)",
+        "&:first-child": {
+          textAlign: "left",
+        },
+        "&:before": {
+          content: "",
+          float: "left",
+          width: "40%",
+          marginBottom: "1px",
+        },
+        "&:last-child": {
+          marginBottom: "0",
+        },
+      },
+    },
+    TRow: {
+      "border-top": "1px solid #EAEAEA",
+      [mobile]: {
+        display: "block",
+        background: "#FFFFFF",
+        border: "1px solid #E0E0E0",
+        boxShadow: "0px 2px 4px rgba(0, 0, 0, 0.1)",
+        borderRadius: "4px",
+        padding: "var(--sl-spacing-medium)",
+        color: "var(--sl-color-neutral-500)",
+        fontSize: "var(--sl-font-size-small)",
+        marginBottom: "var(--sl-spacing-large)",
+      },
+    },
+    TBody: {
+      [tablet]: {
+        display: "grid",
+        gridTemplateColumns: "0.5fr 0.5fr",
+        gap: "25px",
+      },
+    },
+    Table: {
+      "border-collapse": "collapse",
+      width: "100%",
+    },
+    ButtonContainer: {
+      display: "flex",
+      "justify-content": "flex-end",
+      "margin-top": "var(--sl-spacing-small)",
+      ...gap({ direction: "row", size: "var(--sl-spacing-small)" }),
+    },
+  };
+  jss.setup(preset());
+  const sheet = jss.createStyleSheet(style);
+  const styleString = sheet.toString();
+  return (h("div", null,
+    h("style", { type: "text/css" }, styleString),
+    h("table", { class: sheet.classes.Table },
+      data.textOverrides.showLabels && (h("thead", null,
+        h("tr", null, columns === null || columns === void 0 ? void 0 : columns.map((column) => (h("th", { class: sheet.classes.THead }, column)))))),
+      h("tbody", { class: sheet.classes.TBody },
+        show === "loading" && elements.loadingElement,
+        show === "empty" && elements.emptyElement,
+        show === "rows" && (rows === null || rows === void 0 ? void 0 : rows.map((row, i) => (h("tr", { class: sheet.classes.TRow, style: {
+            borderTop: `${!data.textOverrides.showLabels && i === 0 ? "none" : ""}`,
+          }, part: "table-row" }, row.map((cell, j) => (h("td", { class: hiddenCols.includes(j)
+            ? sheet.classes.TCellHidden
+            : sheet.classes.TCell, "data-label": columns[j] + ":" }, cell))))))))),
+    h("div", { class: sheet.classes.ButtonContainer, part: states.namespace + "-button-wrapper" },
+      h("sl-button", { size: "small", disabled: !states.hasPrev, loading: show === "loading", onClick: callbacks.prevPage, exportparts: "base: defaultbutton-base" }, data.textOverrides.prevLabel),
+      h("sl-button", { size: "small", loading: show === "loading", disabled: !states.hasNext, onClick: callbacks.nextPage, exportparts: "base: defaultbutton-base" }, data.textOverrides.moreLabel))));
+}