@saasquatch/mint-components 1.3.3-6 → 1.3.3-7

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

@@ -1,211 +0,0 @@
-import { h } from "@stencil/core";
-import jss from "jss";
-import preset from "jss-preset-default";
-import { HostBlock } from "../../global/mixins";
-import * as SVGs from "./SVGs";
-import { ProgressBarView, } from "./progress-bar/progress-bar-view";
-import { DateTime } from "luxon";
-export function TaskCardView(props) {
-  console.log({ props });
-  const checkmark_circle = SVGs.checkmark_circle();
-  const arrow_left_right = SVGs.arrow_left_right();
-  const style = {
-    HostBlock: HostBlock,
-    TaskCard: {
-      "& .main > div": {
-        margin: "var(--sl-spacing-medium)",
-      },
-      "& .main": {
-        position: "relative",
-        boxSizing: "border-box",
-        minWidth: "347px",
-        background: "var(--sl-color-neutral-0)",
-        border: "1px solid var(--sl-color-neutral-300)",
-        borderRadius: "var(--sl-border-radius-medium)",
-        fontSize: "var(--sl-font-size-small)",
-        lineHeight: "var(--sl-line-height-dense)",
-        color: "var(--sl-color-neutral-600)",
-      },
-      "& .main.complete": {
-        background: "var(--sl-color-success-50)",
-        borderColor: "var(--sl-color-success-700)",
-      },
-      "& .main.expired": {
-        color: "var(--sl-color-neutral-400)",
-        background: "var(--sl-color-neutral-50)",
-      },
-      "& .title": {
-        fontSize: "var(--sl-font-size-small)",
-        fontWeight: "var(--sl-font-weight-semibold)",
-      },
-      "& .black": {
-        color: "var(--sl-color-neutral-1000)",
-      },
-    },
-    Header: {
-      display: "flex",
-      "& .icon": {
-        alignSelf: "center",
-        lineHeight: "0",
-        color: "var(--sl-color-success-700)",
-        fontSize: "var(--sl-font-size-large)",
-        marginRight: "var(--sl-spacing-x-small)",
-      },
-      "& .value": {
-        alignSelf: "center",
-        fontSize: "var(--sl-font-size-x-large)",
-        fontWeight: "var(--sl-font-weight-semibold)",
-        lineHeight: "100%",
-        marginRight: "var(--sl-spacing-xx-small)",
-      },
-      "& .text": {
-        alignSelf: "end",
-        textTransform: "uppercase",
-        fontSize: "var(--sl-font-size-x-small)",
-        lineHeight: "var(--sl-font-size-medium)",
-        marginRight: "var(--sl-spacing-xx-small)",
-      },
-      "& .end": {
-        color: "var(--sl-color-warning-500)",
-        fontWeight: "var(--sl-font-weight-semibold)",
-        marginBottom: "var(--sl-spacing-xx-small)",
-      },
-      "& .black": {
-        color: "var(--sl-color-neutral-1000)",
-      },
-      "& .neutral": {
-        color: "var(--sl-color-neutral-400)",
-      },
-    },
-    Footer: {
-      display: "flex",
-      "& .icon": {
-        fontSize: "var(--sl-font-size-xx-small)",
-        marginRight: "var(--sl-spacing-xx-small)",
-      },
-      "& .text": {
-        marginTop: "auto",
-        verticalAlign: "text-bottom",
-        fontSize: "var(--sl-font-size-x-small)",
-      },
-      "& .success": {
-        color: "var(--sl-color-success-600)",
-        fontWeight: "var(--sl-font-weight-semibold)",
-      },
-      "& .action": {
-        marginTop: "auto",
-        marginLeft: "auto",
-        "&::part(base)": {
-          color: "var(--sl-color-neutral-0)",
-          borderRadius: "var(--sl-border-radius-medium)",
-        },
-        "&.disabled::part(base)": {
-          border: "1px solid var(--sl-color-neutral-400)",
-          background: "var(--sl-color-neutral-400)",
-        },
-      },
-      "& .neutral": {
-        color: "var(--sl-color-neutral-400)",
-      },
-    },
-  };
-  jss.setup(preset());
-  const sheet = jss.createStyleSheet(style);
-  const styleString = sheet.toString();
-  const showComplete = props.progress >= props.goal;
-  const repetitions = props.showProgressBar
-    ? Math.floor(props.progress / props.goal)
-    : props.progress;
-  const dateStart = props.showExpiry && DateTime.fromISO(props.rewardDuration.split("/")[0]);
-  const dateEnd = props.showExpiry && DateTime.fromISO(props.rewardDuration.split("/")[1]);
-  const dateToday = DateTime.now();
-  const taskComplete = showComplete && props.repeatable === false;
-  const taskUnavailable = props.showExpiry && (dateEnd < dateToday || dateToday < dateStart);
-  return (h("div", { class: sheet.classes.TaskCard },
-    h("div", { class: taskUnavailable
-        ? "main expired"
-        : taskComplete
-          ? "main complete"
-          : "main" },
-      h("style", { type: "text/css" }, styleString),
-      h("div", { class: sheet.classes.Header }, props.loading ? (h("sl-skeleton", { style: { width: "22%", margin: "0", height: "12px" } })) : (h("div", null,
-        taskUnavailable && (h("div", { class: "end" }, "Available " +
-          dateStart.toLocaleString(DateTime.DATE_MED).split(",")[0] +
-          " - " +
-          dateEnd.toLocaleString(DateTime.DATE_MED).split(",")[0])),
-        showComplete && (h("span", { class: taskUnavailable ? "icon neutral" : "icon" }, checkmark_circle)),
-        h("span", { class: taskUnavailable ? "value" : "value black" }, props.rewardAmount),
-        h("span", { class: "text" }, props.rewardUnit)))),
-      props.loading ? (h("sl-skeleton", { style: { width: "42%", margin: "0 16px", height: "12px" } })) : (h("div", { class: taskUnavailable ? "title" : "title black" }, props.cardTitle)),
-      props.loading ? (h("sl-skeleton", { style: { margin: "12px 16px", height: "12px" } })) : (h(Details, Object.assign({}, props))),
-      props.showProgressBar && props.loading ? (h("sl-skeleton", { style: { margin: "0 16px", height: "12px" } })) : (props.showProgressBar && (h(ProgressBarView, Object.assign({}, props, { complete: taskComplete, expired: taskUnavailable })))),
-      h("div", { class: sheet.classes.Footer }, props.loading ? (h("sl-skeleton", { style: { width: "25%", marginLeft: "auto", height: "12px" } })) : (h("div", { style: { display: "contents" } },
-        h("span", { class: "text" },
-          props.repeatable && (h("div", null,
-            h("span", { class: repetitions > 0
-                ? taskUnavailable
-                  ? "icon neutral"
-                  : "icon success"
-                : "icon" }, arrow_left_right),
-            h("span", { class: repetitions > 0
-                ? taskUnavailable
-                  ? "neutral"
-                  : "success"
-                : "" }, "Completed " + repetitions + " times"))),
-          props.showExpiry && !taskUnavailable && (h("span", null, "Ends " + dateEnd.toLocaleString(DateTime.DATE_FULL)))),
-        h("sl-button", { class: taskComplete || taskUnavailable ? "action disabled" : "action", type: "primary", size: "small", onClick: () => props.openNewTab
-            ? window.open(props.buttonLink)
-            : window.open(props.buttonLink, "_self"), disabled: taskComplete || taskUnavailable }, props.buttonText)))))));
-}
-function Details(props) {
-  const style = {
-    Description: {
-      "& input[type=checkbox]": {
-        display: "none",
-      },
-      "& input:checked ~ .details": {
-        transform: "rotate(-180deg)",
-      },
-      "& .details": {
-        position: "absolute",
-        top: "var(--sl-spacing-medium)",
-        right: "var(--sl-spacing-medium)",
-        color: "var(--sl-color-neutral-700)",
-        fontSize: "var(--sl-font-size-large)",
-        "& :hover": {
-          color: "var(--sl-color-primary-700)",
-        },
-        transformOrigin: "50% 37%",
-        transition: "transform var(--sl-transition-medium) ease",
-      },
-      "& input:checked ~ .summary": {
-        transition: "all var(--sl-transition-medium) ease",
-        maxHeight: "300px",
-        marginBottom: props.steps
-          ? "var(--sl-spacing-large)"
-          : props.showProgressBar
-            ? "var(--sl-spacing-xx-large)"
-            : "var(--sl-spacing-large)",
-      },
-      "& .summary": {
-        display: "block",
-        overflow: "hidden",
-        fontSize: "var(--sl-font-size-small)",
-        maxHeight: "0px",
-        transition: "all var(--sl-transition-fast) ease-out",
-        marginBottom: "var(--sl-spacing-medium)",
-      },
-    },
-  };
-  jss.setup(preset());
-  const sheet = jss.createStyleSheet(style);
-  const styleString = sheet.toString();
-  const rid = Math.random().toString(36).slice(2);
-  return (h("div", null,
-    h("style", { type: "text/css" }, styleString),
-    h("span", { class: sheet.classes.Description },
-      h("input", { type: "checkbox", id: "details-" + rid }),
-      h("label", { class: "details", htmlFor: "details-" + rid },
-        h("sl-icon", { name: "chevron-down" })),
-      h("span", { class: "summary" }, props.description))));
-}

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

@@ -1,419 +0,0 @@
-import { isDemo } from "@saasquatch/component-boilerplate";
-import { withHooks } from "@saasquatch/stencil-hooks";
-import { Component, h, Prop, State } from "@stencil/core";
-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";
-/**
- * @uiName Task Card
- * @uiOrder ["reward-amount", "reward-unit", "card-title", "description", "repeatable", "show-progress-bar", "stat-type", "progress-source", "goal", "steps", "progress-bar-unit", "show-expiry", "reward-duration", "button-text", "button-link", "open-new-tab"]
- */
-export class TaskCard {
-  constructor() {
-    this.ignored = true;
-    /**
-     * @uiName Reward Amount
-     */
-    this.rewardAmount = 0;
-    /**
-     * @uiName Reward Unit
-     */
-    this.rewardUnit = "Points";
-    /**
-     * @uiName Title Text
-     */
-    this.cardTitle = "Title Text";
-    /**
-     * @uiName Description Text
-     */
-    this.description = "Description Text";
-    /**
-     * @uiName Goal Repeatable
-     */
-    this.repeatable = false;
-    /**
-     * @uiName Show Progress Bar
-     */
-    this.showProgressBar = false;
-    /**
-     * @uiName Goal Completion Number
-     */
-    this.goal = 1;
-    /**
-     * @uiName Progress Bar Steps
-     */
-    this.steps = false;
-    /**
-     * @uiName Show Goal Expiry
-     */
-    this.showExpiry = false;
-    /**
-     * @uiName Reward Duration
-     * @uiWidget DateRange
-     * @uiOptions {"allowPastDates":true, "months": 1}
-     */
-    this.rewardDuration = "/";
-    /**
-     * @uiName CTA Button Text
-     */
-    this.buttonText = "Complete Action";
-    /**
-     * @uiName CTA Button Link
-     */
-    this.buttonLink = "https://example.com/";
-    /**
-     * @uiName CTA Button Link Open in New Tab
-     */
-    this.openNewTab = false;
-    /**
-     * Select what type of stat to display for the goal. Manual paths are also supported.
-     *
-     * @uiWidget StatTypeSelectWidget
-     * @uiName Goal Progress Source
-     * @uiOptions {"version": 1.1}
-     */
-    this.statType = "/programGoals/count/Referral-Started%2Freferrals";
-    withHooks(this);
-  }
-  disconnectedCallback() { }
-  render() {
-    const { props } = isDemo() ? useDemoBigStat(this) : useBigStat(this);
-    const { value, statvalue } = props;
-    console.log(props, isDemo());
-    return (h(TaskCardView, Object.assign({ progress: value, loading: !isDemo() && value === undefined }, getProps(this))));
-  }
-  static get is() { return "sqm-task-card"; }
-  static get encapsulation() { return "shadow"; }
-  static get properties() { return {
-    "rewardAmount": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "text": "Reward Amount",
-            "name": "uiName"
-          }],
-        "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": ""
-      },
-      "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 Text",
-            "name": "uiName"
-          }],
-        "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 Text",
-            "name": "uiName"
-          }],
-        "text": ""
-      },
-      "attribute": "description",
-      "reflect": false,
-      "defaultValue": "\"Description Text\""
-    },
-    "repeatable": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "text": "Goal Repeatable",
-            "name": "uiName"
-          }],
-        "text": ""
-      },
-      "attribute": "repeatable",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "showProgressBar": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "text": "Show Progress Bar",
-            "name": "uiName"
-          }],
-        "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": ""
-      },
-      "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": ""
-      },
-      "attribute": "steps",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "progressBarUnit": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [{
-            "text": "Progress Bar Unit",
-            "name": "uiName"
-          }],
-        "text": ""
-      },
-      "attribute": "progress-bar-unit",
-      "reflect": false
-    },
-    "showExpiry": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "text": "Show Goal Expiry",
-            "name": "uiName"
-          }],
-        "text": ""
-      },
-      "attribute": "show-expiry",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "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": "uiOptions"
-          }],
-        "text": ""
-      },
-      "attribute": "reward-duration",
-      "reflect": false,
-      "defaultValue": "\"/\""
-    },
-    "buttonText": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "text": "CTA Button Text",
-            "name": "uiName"
-          }],
-        "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": "CTA Button Link",
-            "name": "uiName"
-          }],
-        "text": ""
-      },
-      "attribute": "button-link",
-      "reflect": false,
-      "defaultValue": "\"https://example.com/\""
-    },
-    "openNewTab": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "text": "CTA Button Link Open in New Tab",
-            "name": "uiName"
-          }],
-        "text": ""
-      },
-      "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": "StatTypeSelectWidget",
-            "name": "uiWidget"
-          }, {
-            "text": "Goal Progress Source",
-            "name": "uiName"
-          }, {
-            "text": "{\"version\": 1.1}",
-            "name": "uiOptions"
-          }],
-        "text": "Select what type of stat to display for the goal. Manual paths are also supported."
-      },
-      "attribute": "stat-type",
-      "reflect": false,
-      "defaultValue": "\"/programGoals/count/Referral-Started%2Freferrals\""
-    }
-  }; }
-  static get states() { return {
-    "ignored": {}
-  }; }
-}

package/dist/collection/tables/GenericTableView.js

@@ -1,51 +0,0 @@
-import { h } from "@stencil/core";
-import { TextSpanView } from "../components/sqm-text-span/sqm-text-span-view";
-import jss from "jss";
-import preset from "jss-preset-default";
-import { gap } from "../global/mixins";
-const style = {
-  THead: {
-    padding: "var(--sl-spacing-small) var(--sl-spacing-medium) var(--sl-spacing-small) 0",
-    "text-align": "left",
-  },
-  TCell: {
-    padding: "var(--sl-spacing-small) var(--sl-spacing-medium) var(--sl-spacing-small) 0",
-  },
-  TRow: {
-    "border-top": "1px solid #EAEAEA",
-  },
-  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();
-export function GenericTableView(props) {
-  const { states, data, callbacks, elements } = props;
-  const { columns, rows } = elements;
-  const { show } = states;
-  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 },
-          h(TextSpanView, { type: "h3" }, column))))))),
-      h("tbody", null,
-        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) => (h("td", { class: sheet.classes.TCell },
-          h(TextSpanView, { type: "p" }, 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))));
-}