@saasquatch/mint-components 1.3.2-9 → 1.3.3-0

package/dist/collection/components/sqm-task-card/progress-bar/progress-bar.stories.js

@@ -1,53 +0,0 @@
-import { h } from "@stencil/core";
-import { MatrixStory } from "../Matrix";
-import { ProgressBarView } from "./progress-bar-view";
-import scenario from "./progress-bar.feature";
-export default {
-  title: "Components/Task Card Progress Bar",
-  parameters: {
-    scenario,
-  },
-};
-export const Default = () => {
-  return h(ProgressBarView, null);
-};
-export const ProgressBar = () => {
-  const props = {
-    progress: 0,
-    goal: 500,
-    progressBarUnit: "$",
-  };
-  return (h("div", null,
-    h(MatrixStory, { matrix: { progress: [-100, 0, 100, 500, 1000] }, props: props, Component: ProgressBarView })));
-};
-export const ProgressBarSteps = () => {
-  const props = {
-    progress: 0,
-    steps: true,
-    goal: 5,
-    progressBarUnit: "$",
-  };
-  return (h("div", null,
-    h(MatrixStory, { matrix: { progress: [-1, 0, 1, 5, 7] }, props: props, Component: ProgressBarView })));
-};
-export const ProgressBarRepeatable = () => {
-  const props = {
-    progress: 0,
-    goal: 500,
-    progressBarUnit: "$",
-    repeatable: true,
-  };
-  return (h("div", null,
-    h(MatrixStory, { matrix: { progress: [100, 500, 650, 1200] }, props: props, Component: ProgressBarView })));
-};
-export const ProgressBarStepsRepeatable = () => {
-  const props = {
-    progress: 0,
-    steps: true,
-    goal: 5,
-    progressBarUnit: "$",
-    repeatable: true,
-  };
-  return (h("div", null,
-    h(MatrixStory, { matrix: { progress: [1, 5, 7, 12] }, props: props, Component: ProgressBarView })));
-};

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

@@ -1,164 +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";
-export function TaskCardView(props) {
-  const { rewardAmount, cardTitle, description, showProgressBar, progress = 0, goal, rewardUnit, repeatable, showExpiry, dateExpires, buttonText, buttonLink, loading, } = 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-white)",
-        border: "1px solid var(--sl-color-gray-300)",
-        borderRadius: "var(--sl-border-radius-medium)",
-        fontSize: "var(--sl-font-size-small)",
-        lineHeight: "var(--sl-line-height-dense)",
-      },
-      "& .main.complete": {
-        background: "var(--sl-color-primary-50)",
-        borderColor: "var(--sl-color-primary-700)",
-      },
-    },
-    Header: {
-      display: "flex",
-      "& .icon": {
-        alignSelf: "center",
-        lineHeight: "0",
-        color: "var(--sl-color-primary-700)",
-        fontSize: "var(--sl-font-size-large)",
-        marginRight: "var(--sl-spacing-x-small)",
-      },
-      "& .value": {
-        alignSelf: "center",
-        color: "var(--sl-color-black)",
-        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",
-        color: "var(--sl-color-gray-600)",
-        fontSize: "var(--sl-font-size-x-small)",
-        lineHeight: "var(--sl-font-size-medium)",
-        marginRight: "var(--sl-spacing-xx-small)",
-      },
-    },
-    Title: {
-      color: "var(--sl-color-black)",
-      fontSize: "var(--sl-font-size-small)",
-    },
-    Footer: {
-      display: "flex",
-      "& .icon": {
-        fontSize: "var(--sl-font-size-xx-small)",
-        marginRight: "var(--sl-spacing-xx-small)",
-      },
-      "& .text": {
-        marginTop: "auto",
-        fontSize: "var(--sl-font-size-x-small)",
-        color: "var(--sl-color-gray-600)",
-      },
-      "& .action": {
-        marginTop: "auto",
-        marginLeft: "auto",
-      },
-      "& sl-button.action::part(base) ": {
-        color: "var(--sl-color-white)",
-        background: "var(--sl-color-primary-500)",
-        border: "1px solid var(--sl-color-primary-500)",
-        borderRadius: "var(--sl-border-radius-medium)",
-      },
-    },
-  };
-  jss.setup(preset());
-  const sheet = jss.createStyleSheet(style);
-  const styleString = sheet.toString();
-  const showComplete = progress >= goal;
-  const repetitions = showProgressBar ? Math.floor(progress / goal) : progress;
-  console.log({ showProgressBar, loading });
-  return (h("div", { class: sheet.classes.TaskCard },
-    h("div", { class: showComplete ? "main complete" : "main" },
-      h("style", { type: "text/css" }, styleString),
-      h("div", { class: sheet.classes.Header },
-        showComplete && h("span", { class: "icon" }, checkmark_circle),
-        h("span", { class: "value" }, rewardAmount),
-        h("span", { class: "text" }, rewardUnit)),
-      h("div", { class: sheet.classes.Title }, cardTitle),
-      h(Details, { description: description }),
-      showProgressBar && loading ? (h("sl-skeleton", { style: { width: "98%", margin: "0 auto" } })) : (showProgressBar && h(ProgressBarView, Object.assign({}, props))),
-      h("div", { class: sheet.classes.Footer },
-        h("span", { class: "text" },
-          repeatable && (h("div", null,
-            h("span", { class: "icon" }, arrow_left_right),
-            h("span", null,
-              "Completed ",
-              repetitions,
-              " times"))),
-          showExpiry && (h("span", null,
-            "Ends ",
-            " ",
-            dateExpires))),
-        h("sl-button", { class: "action", size: "small", onClick: () => window.open(buttonLink), disabled: showComplete && repeatable == false }, showComplete && repeatable == false
-          ? "Task completed"
-          : 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-gray-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: "max-height var(--sl-transition-medium) ease",
-        maxHeight: "300px",
-      },
-      "& .summary": {
-        display: "block",
-        overflow: "hidden",
-        color: "var(--sl-color-gray-700)",
-        fontSize: "var(--sl-font-size-x-small)",
-        maxHeight: "0px",
-        transition: "max-height var(--sl-transition-fast) ease-out",
-      },
-    },
-  };
-  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,384 +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
- */
-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 Progress Source
-     */
-    this.progressSource = "";
-    /**
-     * @uiName Goal Completion Number
-     */
-    this.goal = 1;
-    /**
-     * @uiName Progress Bar Steps
-     */
-    this.steps = false;
-    /**
-     * @uiName Show Goal Expiry
-     */
-    this.showExpiry = false;
-    /**
-     * @uiName CTA Button Text
-     */
-    this.buttonText = "Complete Action";
-    /**
-     * @uiName CTA Button Link
-     */
-    this.buttonLink = "https://example.com/";
-    /**
-     * Select what type of stat to display for the goal. Manual paths are also supported.
-     *
-     * @uiWidget StatTypeSelectWidget
-     * @uiName Stat Type
-     * @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({}, getProps(this), { progress: value, loading: value === undefined })));
-  }
-  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"
-    },
-    "dateExpires": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [{
-            "text": "Date Goal Expires",
-            "name": "uiName"
-          }],
-        "text": ""
-      },
-      "attribute": "date-expires",
-      "reflect": false
-    },
-    "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/\""
-    },
-    "statType": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "text": "StatTypeSelectWidget",
-            "name": "uiWidget"
-          }, {
-            "text": "Stat Type",
-            "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))));
-}

package/dist/collection/tables/TableSlots.js

@@ -1,22 +0,0 @@
-import { h } from "@stencil/core";
-export function LoadingSlot() {
-  return (h("slot", { name: "loading" },
-    h(LoadingSkeleton, null)));
-}
-export function LoadingSkeleton() {
-  return (h("div", { style: { width: "100%" } },
-    h("sl-skeleton", { style: { marginBottom: "28px" } }),
-    h("sl-skeleton", { style: { marginBottom: "28px" } }),
-    h("sl-skeleton", { style: { marginBottom: "28px" } }),
-    h("sl-skeleton", { style: { marginBottom: "28px" } }),
-    h("sl-skeleton", null)));
-}
-export function EmptySlot({ label }) {
-  return (h("slot", { name: "empty" },
-    h(EmptySkeleton, { label: label })));
-}
-export function EmptySkeleton({ label }) {
-  return (h("div", { style: { width: "100%" } },
-    h("sqm-text", null,
-      h("h3", { style: { color: "#777777" } }, label))));
-}