@saasquatch/mint-components 1.3.2-4 → 1.3.2-5

package/dist/cjs/sqm-task-card-view-791797ac.js

@@ -1,475 +0,0 @@
-'use strict';
-
-const index = require('./index-b0129cd6.js');
-const jssPresetDefault_esm = require('./jss-preset-default.esm-6304d24f.js');
-const mixins = require('./mixins-7b7c59fe.js');
-
-const checkmark_circle = () => {
-  return (index.h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "18", height: "18", viewBox: "0 0 18 18" },
-    index.h("path", { fill: "currentColor", "fill-rule": "evenodd", d: "M1.636 9a7.364 7.364 0 1114.728 0A7.364 7.364 0 011.636 9zM9 0a9 9 0 100 18A9 9 0 009 0zm5.192 6.266a.982.982 0 00-1.548-1.208l-4.787 6.137-2.58-2.58a.982.982 0 00-1.39 1.388l3.367 3.366a.982.982 0 001.468-.09l5.47-7.013z", "clip-rule": "evenodd" })));
-};
-const arrow_left_right = () => {
-  return (index.h("svg", { width: 11, height: 12, fill: "none", xmlns: "http://www.w3.org/2000/svg" },
-    index.h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M10.265 2.789a.346.346 0 000-.489L8.066.101a.346.346 0 10-.489.489l1.61 1.609H2.073a.691.691 0 00-.69.691v1.728a.346.346 0 00.69 0V2.89h7.114L7.577 4.5a.346.346 0 10.49.488l2.198-2.2zM.101 9.21a.346.346 0 000 .489l2.2 2.199a.346.346 0 00.488-.489l-1.61-1.609h7.114c.382 0 .691-.31.691-.691V7.382a.346.346 0 00-.691 0V9.11H1.18L2.789 7.5a.346.346 0 10-.489-.488l-2.199 2.2z", fill: "currentColor" })));
-};
-const gift = () => {
-  return (index.h("svg", { width: 16, height: 16, fill: "none", xmlns: "http://www.w3.org/2000/svg" },
-    index.h("path", { d: "M15 5H9v11h4.5a1 1 0 001-1V9h.5a1 1 0 001-1V6a1 1 0 00-1-1zM1.5 9v6a1 1 0 001 1H7V5H1a1 1 0 00-1 1v2a1 1 0 001 1h.5z", fill: "var(--sl-color-primary-200)" }),
-    index.h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M1.5 9v1h13V9h-13z", fill: "var(--sl-color-primary-300)" }),
-    index.h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M14 2.71c0 .886-1.33 2.227-2 2.29H9v11H7.002V5H4.588C3.212 4.702 2 3.645 2 2.52 2 1.426 2.476.558 3.342.183 4.169-.176 5.125.02 5.88.545c.927.643 1.447 1.851 1.919 2.947l.123.286.12-.272C8.51 2.45 9.045 1.243 9.94.596c.793-.573 1.801-.79 2.672-.397.9.405 1.388 1.336 1.388 2.51zM10.612 1.5c.48-.347 1.056-.41 1.548 0 .428.357.45.525.506.93l.01.07c0 .599-.516 1.5-1.032 1.5-.366 0-.653-.003-.922-.006-.49-.005-.92-.01-1.657.006.14-.272.252-.533.36-.782.285-.667.534-1.246 1.187-1.718zm-5.673 0c-.233-.161-.766-.09-.987.006-.183.08-.456.32-.456 1.015 0 .674 1.092 1.257 1.092 1.257S5.454 4 7.002 4c-.527-1.305-1.273-1.951-2.063-2.5z", fill: "var(--sl-color-primary-600)" })));
-};
-
-// @ts-expect-error -- unused
-function TaskCardView(props, children) {
-  const { points = 0, cardTitle = "Title Text", description = "Description Text", showProgressBar = false, progress = 0, goal = 1, repeatable = false, expire = false, dateExpire = "", buttonText = "Button Text", buttonLink = "www.example.com", } = props;
-  const checkmark_circle$1 = checkmark_circle();
-  const arrow_left_right$1 = arrow_left_right();
-  const style = {
-    HostBlock: mixins.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)",
-      },
-    },
-  };
-  jssPresetDefault_esm.jss.setup(jssPresetDefault_esm.create());
-  const sheet = jssPresetDefault_esm.jss.createStyleSheet(style);
-  const styleString = sheet.toString();
-  // if showProgressBar is false: progress >= goal
-  // if true
-  const showComplete = progress >= goal;
-  const repetitions = showProgressBar ? Math.floor(progress / goal) : progress;
-  return (index.h("div", { class: sheet.classes.TaskCard },
-    index.h("div", { class: showComplete ? "main complete" : "main" },
-      index.h("style", { type: "text/css" }, styleString),
-      index.h("div", { class: sheet.classes.Header },
-        showComplete && (index.h("span", { class: "icon" }, checkmark_circle$1)),
-        index.h("span", { class: "value" }, points),
-        index.h("span", { class: "text" }, "saasquatch points")),
-      index.h("div", { class: sheet.classes.Title }, cardTitle),
-      showProgressBar && index.h(ProgressBar, Object.assign({}, props)),
-      index.h(Details, { description: description }),
-      index.h("div", { class: sheet.classes.Footer },
-        index.h("span", { class: "text" },
-          repeatable && (index.h("div", null,
-            index.h("span", { class: "icon" }, arrow_left_right$1),
-            index.h("span", null,
-              "Completed ",
-              repetitions,
-              " times"),
-            index.h("br", null),
-            index.h("span", null,
-              "Earned ",
-              points * repetitions,
-              " SaaSquatch Points"))),
-          expire && (index.h("span", null,
-            index.h("br", null),
-            "Ends ",
-            " ",
-            dateExpire))),
-        index.h("sl-button", { class: "action", size: "small", onClick: () => alert(buttonLink), disabled: showComplete }, showComplete ? "Complete" : buttonText)))));
-}
-function Details(props) {
-  const style = {
-    HostBlock: mixins.HostBlock,
-    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",
-      },
-    },
-  };
-  jssPresetDefault_esm.jss.setup(jssPresetDefault_esm.create());
-  const sheet = jssPresetDefault_esm.jss.createStyleSheet(style);
-  const styleString = sheet.toString();
-  const rid = Math.random().toString(36).slice(2);
-  return (index.h("div", null,
-    index.h("style", { type: "text/css" }, styleString),
-    index.h("span", { class: sheet.classes.Description },
-      index.h("input", { type: "checkbox", id: "details-" + rid }),
-      index.h("label", { class: "details", htmlFor: "details-" + rid },
-        index.h("sl-icon", { name: "chevron-down" })),
-      index.h("span", { class: "summary" }, props.description))));
-}
-function ProgressBar(props) {
-  const { goal, progress, steps, unit = "", repeatable } = props;
-  const gift1 = gift();
-  const gift2 = gift();
-  const gift3 = gift();
-  // if progress and goal are not provided, there cannot be a progress bar
-  // if (!showProgressBar) return;
-  const items = [];
-  var columns = "";
-  var repetitions = Math.floor(progress / goal);
-  if (repeatable) {
-    if (steps) {
-      addStepsRepeatable();
-    }
-    else {
-      addLinearRepeatable();
-    }
-  }
-  // non repetable
-  else {
-    if (steps) {
-      addSteps();
-    }
-    else {
-      addLinear();
-    }
-  }
-  const style = {
-    HostBlock: mixins.HostBlock,
-    ProgressBar: {
-      "& .progress-bar": {
-        height: "20px",
-        marginTop: "var(--sl-spacing-large)",
-        marginRight: "var(--sl-spacing-x-small)",
-        marginBottom: "var(--sl-spacing-large)",
-        fontSize: "var(--sl-font-size-x-small)",
-        display: "grid",
-        gridTemplateColumns: columns,
-        lineHeight: "45px",
-        userSelect: "none",
-      },
-      "& .progress-bar.repeatable-steps": {
-        marginLeft: "var(--sl-spacing-x-small)",
-      },
-      "& .filled:after": {
-        content: '""',
-        display: "flex",
-        width: "100%",
-        height: "4px",
-        borderRadius: "4px",
-        backgroundColor: "var(--sl-color-primary-500)",
-      },
-      "& .progress": {
-        display: "block",
-        textAlign: "center",
-        marginLeft: "-100px",
-        marginRight: "-100px",
-      },
-      "& .progress::after": {
-        content: '""',
-        width: "12px",
-        height: "12px",
-        display: "flex",
-        backgroundColor: "var(--sl-color-primary-500)",
-        borderRadius: "50%",
-        position: "relative",
-        left: "47%",
-        top: "-85%",
-      },
-      "& .progress.bg:after": {
-        width: "0",
-        height: "0",
-        border: "none",
-      },
-      "& .empty": {
-        display: "block",
-        textAlign: "center",
-        marginLeft: "-100px",
-        marginRight: "-100px",
-      },
-      "& .empty::after": {
-        content: '""',
-        width: "12px",
-        height: "12px",
-        border: "2px solid #E0E0E0",
-        margin: "-2px",
-        display: "flex",
-        backgroundColor: "white",
-        borderRadius: "50%",
-        position: "relative",
-        left: "47%",
-        top: "-85%",
-      },
-      "& .empty.bg:after": {
-        width: "0",
-        height: "0",
-        border: "none",
-      },
-      "& .remain:after": {
-        content: '""',
-        display: "flex",
-        width: "100%",
-        height: "4px",
-        borderRadius: "4px",
-        backgroundColor: "#E0E0E0",
-      },
-      "& .end.bw": {
-        filter: "grayscale(100%)",
-      },
-      "& .end.start": {
-        transform: "scale(80%)",
-        top: "-20px",
-      },
-      "& .end": {
-        textAlign: "center",
-        marginLeft: "-100px",
-        marginRight: "-100px",
-        position: "relative",
-        display: "list-item",
-        listStyleType: "none",
-        top: "-18px",
-        filter: goal <= progress ? "" : "grayscale(100%)",
-        zIndex: "1",
-      },
-    },
-  };
-  jssPresetDefault_esm.jss.setup(jssPresetDefault_esm.create());
-  const sheet = jssPresetDefault_esm.jss.createStyleSheet(style);
-  const styleString = sheet.toString();
-  return (index.h("div", { class: sheet.classes.ProgressBar },
-    index.h("style", { type: "text/css" }, styleString),
-    index.h("div", { class: repetitions > 1 ? "progress-bar repeatable-steps" : "progress-bar" }, items)));
-  function addLinear() {
-    columns =
-      Math.min(Math.max(progress / goal, 0), 1) +
-        "fr 0fr " +
-        Math.min(Math.max(1 - progress / goal, 0), 1) +
-        "fr 0fr";
-    items.push(index.h("div", { class: "filled" }));
-    items.push(index.h("div", { class: progress == goal ? "progress bg" : "progress" }, unit + progress));
-    items.push(index.h("div", { class: "remain" }));
-    items.push(index.h("div", { class: "end" }, gift1));
-  }
-  function addSteps() {
-    let step_math = steps / goal;
-    for (let i = 1; i < goal; i += steps) {
-      columns += step_math + "fr 0fr ";
-      if (i > progress) {
-        items.push(index.h("div", { class: "remain" }));
-        items.push(index.h("div", { class: "empty" }, unit + i));
-      }
-      else {
-        items.push(index.h("div", { class: "filled" }));
-        items.push(index.h("div", { class: "progress" }, unit + i));
-      }
-    }
-    columns += step_math + "fr 0fr ";
-    // reward success
-    if (goal <= progress) {
-      columns += "0fr ";
-      items.push(index.h("div", { class: "filled" }));
-      items.push(index.h("div", { class: "progress bg" }, unit + goal));
-      items.push(index.h("div", { class: "end" }, gift1));
-    }
-    // reward fail
-    else {
-      columns += "0fr ";
-      items.push(index.h("div", { class: "remain" }));
-      items.push(index.h("div", { class: "empty bg" }, unit + goal));
-      items.push(index.h("div", { class: "end" }, gift1));
-    }
-  }
-  function addLinearRepeatable() {
-    let position = progress % goal;
-    let remainder = (position / goal) * 0.5;
-    let repetitions = Math.floor(progress / goal);
-    // 0 repetition
-    if (repetitions == 0) {
-      columns = remainder + "fr 0fr " + (0.5 - remainder) + "fr 0fr 0.5fr 0fr";
-      items.push(index.h("div", { class: "filled" }));
-      items.push(index.h("div", { class: progress == goal ? "progress bg" : "progress" }, unit + progress));
-      items.push(index.h("div", { class: "remain" }));
-      items.push(index.h("div", { class: "end" }, gift1));
-      items.push(index.h("div", { class: "remain" }));
-      items.push(index.h("div", { class: "end bw" }, gift2));
-    }
-    // single repetition
-    else if (repetitions == 1) {
-      columns =
-        "0.5fr 0fr " + remainder + "fr 0fr " + (0.5 - remainder) + "fr 0fr";
-      items.push(index.h("div", { class: "filled" }));
-      items.push(index.h("div", { class: "end" }, gift1));
-      items.push(index.h("div", { class: "filled" }));
-      items.push(index.h("div", { class: progress == goal ? "progress bg" : "progress" }, unit + progress));
-      items.push(index.h("div", { class: "remain" }));
-      items.push(index.h("div", { class: "end bw" }, gift2));
-    }
-    // multiple repetitions
-    else {
-      columns =
-        "0fr 0.5fr 0fr " + remainder + "fr 0fr " + (0.5 - remainder) + "fr 0fr";
-      items.push(index.h("div", { class: "end start" }, gift1));
-      items.push(index.h("div", { class: "filled" }));
-      items.push(index.h("div", { class: "end" }, gift2));
-      items.push(index.h("div", { class: "filled" }));
-      items.push(index.h("div", { class: progress == goal * repetitions ? "progress bg" : "progress" }, unit + progress));
-      items.push(index.h("div", { class: "remain" }));
-      items.push(index.h("div", { class: "end bw" }, gift3));
-    }
-  }
-  function addStepsRepeatable() {
-    let repetitions = Math.floor(progress / goal);
-    // no or single repetition
-    if (repetitions < 2) {
-      let step_math = steps / goal;
-      for (let i = 1; i < goal * 2 + 1; i += steps) {
-        columns += step_math + "fr 0fr ";
-        if (i > progress) {
-          if (i == goal) {
-            columns += "0fr ";
-            items.push(index.h("div", { class: "remain" }));
-            items.push(index.h("div", { class: "empty bg" }, unit + goal));
-            items.push(index.h("div", { class: "end bw" }, gift1));
-          }
-          else if (i == goal * 2) {
-            columns += "0fr 0fr";
-            items.push(index.h("div", { class: "remain" }));
-            items.push(index.h("div", { class: "empty bg" }, unit + (goal * 2)));
-            items.push(index.h("div", { class: "end bw" }, gift2));
-          }
-          else {
-            items.push(index.h("div", { class: "remain" }));
-            items.push(index.h("div", { class: "empty" }, unit + i));
-          }
-        }
-        else if (i == goal) {
-          columns += "0fr ";
-          items.push(index.h("div", { class: "filled" }));
-          items.push(index.h("div", { class: "progress bg" }, unit + i));
-          items.push(index.h("div", { class: "end" }, gift3));
-        }
-        else {
-          items.push(index.h("div", { class: "filled" }));
-          items.push(index.h("div", { class: "progress" }, unit + i));
-        }
-      }
-    }
-    // case repetition many
-    else {
-      let position = (progress % goal) + goal;
-      let step_math = steps / goal;
-      columns += "0fr 0fr ";
-      items.push(index.h("div", { class: "progress bg" }, unit + goal * (repetitions - 1)));
-      items.push(index.h("div", { class: "end start" }, gift1));
-      for (let i = 1; i < goal * 2 + 1; i += steps) {
-        columns += step_math + "fr 0fr ";
-        if (i <= goal) {
-          if (i == goal) {
-            columns += "0fr ";
-            items.push(index.h("div", { class: "filled" }));
-            items.push(index.h("div", { class: "progress bg" }, unit + (i + goal * (repetitions - 1))));
-            items.push(index.h("div", { class: "end" }, gift2));
-          }
-          else {
-            items.push(index.h("div", { class: "filled" }));
-            items.push(index.h("div", { class: "progress" }, unit + (i + goal * (repetitions - 1))));
-          }
-        }
-        else if (i > position) {
-          if (i == goal * 2) {
-            columns += "0fr 0fr";
-            items.push(index.h("div", { class: "remain" }));
-            items.push(index.h("div", { class: "empty bg" }, unit + (i + goal * (repetitions - 1))));
-            items.push(index.h("div", { class: "end bw" }, gift3));
-          }
-          else {
-            items.push(index.h("div", { class: "remain" }));
-            items.push(index.h("div", { class: "empty" }, unit + (i + goal * (repetitions - 1))));
-          }
-        }
-        else {
-          items.push(index.h("div", { class: "filled" }));
-          items.push(index.h("div", { class: "progress" }, unit + (i + goal * (repetitions - 1))));
-        }
-      }
-    }
-  }
-}
-
-exports.TaskCardView = TaskCardView;

package/dist/cjs/sqm-task-card.cjs.entry.js

@@ -1,53 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-b0129cd6.js');
-const _extends = require('./extends-0302d27d.js');
-require('./jss-preset-default.esm-6304d24f.js');
-const utils = require('./utils-95e5317c.js');
-require('./mixins-7b7c59fe.js');
-const sqmTaskCardView = require('./sqm-task-card-view-791797ac.js');
-
-const TaskCard = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.ignored = true;
-    /**
-     * @uiName Reward Points
-     */
-    this.points = 0;
-    /**
-     * @uiName Title Text
-     */
-    this.cardTitle = "Title Text";
-    /**
-     * @uiName Description Text
-     */
-    this.description = "Description Text";
-    /**
-     * @uiName Set Repeatable
-     */
-    this.repeatable = false;
-    /**
-     * @uiName Show Progress Bar
-     */
-    this.showProgressBar = false;
-    /**
-     * @uiName Progress Bar Goal
-     */
-    this.goal = 1;
-    /**
-     * @uiName Show Expiry
-     */
-    this.expire = false;
-    _extends.h$1(this);
-  }
-  disconnectedCallback() { }
-  render() {
-    //const progress = useTaskCard(); progress={progress}
-    return index.h(sqmTaskCardView.TaskCardView, Object.assign({}, utils.getProps(this)));
-  }
-};
-
-exports.sqm_task_card = TaskCard;