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

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

@@ -1,330 +0,0 @@
-import { h } from "@stencil/core";
-import { TaskCardView } from "./sqm-task-card-view";
-import scenario from "./sqm-task-card.feature";
-export default {
-  title: "Components/Task Card/",
-  parameters: {
-    scenario,
-  },
-};
-const resizable = {
-  width: "347px",
-  minWidth: "347px",
-  resize: "horizontal",
-  height: "fit-content",
-  overflow: "hidden",
-};
-export const NotRepeatable = () => {
-  const oneAction = {
-    rewardAmount: 20,
-    showExpiry: false,
-    rewardUnit: "Points",
-    cardTitle: "Complete a survey",
-    repeatable: false,
-    description: "Description of action and reward. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eget quisque commodo leo.",
-    buttonText: "Take survey",
-    goal: 1,
-    buttonLink: "https://example.com/",
-    showProgressBar: false,
-    loading: false,
-  };
-  const coupleActions = {
-    rewardAmount: 40,
-    rewardUnit: "Points",
-    cardTitle: "Comment on 5 articles",
-    showProgressBar: true,
-    showExpiry: false,
-    goal: 5,
-    repeatable: false,
-    steps: true,
-    description: "Description of action and reward. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eget quisque commodo leo.",
-    buttonText: "Start reading",
-    buttonLink: "https://example.com/",
-    loading: false,
-  };
-  const manyActions = {
-    rewardAmount: 150,
-    rewardUnit: "Points",
-    cardTitle: "Spend $500 at our Store",
-    showProgressBar: true,
-    showExpiry: false,
-    goal: 500,
-    repeatable: false,
-    unit: "$",
-    description: "Description of action and reward. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eget quisque commodo leo.",
-    buttonText: "Visit our Store",
-    buttonLink: "https://example.com/",
-    loading: false,
-  };
-  return (h("div", { style: { display: "inline-flex", gap: "32px" } },
-    h("div", { style: resizable },
-      h("h4", null, "One Action"),
-      h(TaskCardView, Object.assign({}, oneAction, { progress: 0 })),
-      " ",
-      h("h5", null),
-      h(TaskCardView, Object.assign({}, oneAction, { progress: 1 })),
-      " ",
-      h("h5", null)),
-    h("div", { style: resizable },
-      h("h4", null, "A Couple Actions"),
-      h(TaskCardView, Object.assign({}, coupleActions, { progress: 0 })),
-      " ",
-      h("h5", null),
-      h(TaskCardView, Object.assign({}, coupleActions, { progress: 1 })),
-      " ",
-      h("h5", null),
-      h(TaskCardView, Object.assign({}, coupleActions, { progress: 5 })),
-      " ",
-      h("h5", null)),
-    h("div", { style: resizable },
-      h("h4", null, "Many Actions"),
-      h(TaskCardView, Object.assign({}, manyActions, { progress: 0 })),
-      " ",
-      h("h5", null),
-      h(TaskCardView, Object.assign({}, manyActions, { progress: 230 })),
-      " ",
-      h("h5", null),
-      h(TaskCardView, Object.assign({}, manyActions, { progress: 500 })),
-      " ",
-      h("h5", null))));
-};
-export const NotRepeatableWithExpiry = () => {
-  const oneAction = {
-    rewardAmount: 20,
-    rewardUnit: "Points",
-    cardTitle: "Complete a survey",
-    description: "Description of action and reward. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eget quisque commodo leo.",
-    buttonText: "Take survey",
-    goal: 1,
-    showExpiry: true,
-    repeatable: false,
-    dateExpires: "Nov 1, 2021",
-    buttonLink: "https://example.com/",
-    showProgressBar: false,
-    loading: false,
-  };
-  const coupleActions = {
-    rewardAmount: 40,
-    rewardUnit: "Points",
-    cardTitle: "Comment on 5 articles",
-    showProgressBar: true,
-    goal: 5,
-    steps: true,
-    description: "Description of action and reward. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eget quisque commodo leo.",
-    buttonText: "Start reading",
-    showExpiry: true,
-    repeatable: false,
-    dateExpires: "Nov 1, 2021",
-    buttonLink: "https://example.com/",
-    loading: false,
-  };
-  const manyActions = {
-    rewardAmount: 150,
-    rewardUnit: "Points",
-    repeatable: false,
-    cardTitle: "Spend $500 at our Store",
-    showProgressBar: true,
-    goal: 500,
-    unit: "$",
-    description: "Description of action and reward. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eget quisque commodo leo.",
-    buttonText: "Visit our Store",
-    showExpiry: true,
-    dateExpires: "Nov 1, 2021",
-    buttonLink: "https://example.com/",
-    loading: false,
-  };
-  return (h("div", { style: { display: "inline-flex", gap: "32px" } },
-    h("div", { style: resizable },
-      h("h4", null, "One Action"),
-      h(TaskCardView, Object.assign({}, oneAction, { progress: 0 })),
-      " ",
-      h("h5", null),
-      h(TaskCardView, Object.assign({}, oneAction, { progress: 1 })),
-      " ",
-      h("h5", null)),
-    h("div", { style: resizable },
-      h("h4", null, "A Couple Actions"),
-      h(TaskCardView, Object.assign({}, coupleActions, { progress: 0 })),
-      " ",
-      h("h5", null),
-      h(TaskCardView, Object.assign({}, coupleActions, { progress: 1 })),
-      " ",
-      h("h5", null),
-      h(TaskCardView, Object.assign({}, coupleActions, { progress: 5 })),
-      " ",
-      h("h5", null)),
-    h("div", { style: resizable },
-      h("h4", null, "Many Actions"),
-      h(TaskCardView, Object.assign({}, manyActions, { progress: 0 })),
-      " ",
-      h("h5", null),
-      h(TaskCardView, Object.assign({}, manyActions, { progress: 230 })),
-      " ",
-      h("h5", null),
-      h(TaskCardView, Object.assign({}, manyActions, { progress: 500 })),
-      " ",
-      h("h5", null))));
-};
-export const Repeatable = () => {
-  const oneAction = {
-    rewardAmount: 20,
-    rewardUnit: "Points",
-    showExpiry: false,
-    cardTitle: "Complete a survey",
-    description: "Description of action and reward. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eget quisque commodo leo.",
-    buttonText: "Take survey",
-    goal: 1,
-    repeatable: true,
-    buttonLink: "https://example.com/",
-    showProgressBar: false,
-    loading: false,
-  };
-  const coupleActions = {
-    rewardAmount: 40,
-    rewardUnit: "Points",
-    showExpiry: false,
-    cardTitle: "Comment on 5 articles",
-    showProgressBar: true,
-    repeatable: true,
-    goal: 5,
-    steps: true,
-    description: "Description of action and reward. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eget quisque commodo leo.",
-    buttonText: "Start reading",
-    buttonLink: "https://example.com/",
-    loading: false,
-  };
-  const manyActions = {
-    rewardAmount: 150,
-    rewardUnit: "Points",
-    showExpiry: false,
-    cardTitle: "Spend $500 at our Store",
-    showProgressBar: true,
-    repeatable: true,
-    goal: 500,
-    unit: "$",
-    description: "Description of action and reward. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eget quisque commodo leo.",
-    buttonText: "Visit our Store",
-    buttonLink: "https://example.com/",
-    loading: false,
-  };
-  return (h("div", { style: { display: "inline-flex", gap: "32px" } },
-    h("div", { style: resizable },
-      h("h4", null, "One Action"),
-      h(TaskCardView, Object.assign({}, oneAction, { progress: 0 })),
-      " ",
-      h("h5", null),
-      h(TaskCardView, Object.assign({}, oneAction, { progress: 1 })),
-      " ",
-      h("h5", null)),
-    h("div", { style: resizable },
-      h("h4", null, "A Couple Actions"),
-      h(TaskCardView, Object.assign({}, coupleActions, { progress: 1 })),
-      " ",
-      h("h5", null),
-      h(TaskCardView, Object.assign({}, coupleActions, { progress: 5 })),
-      " ",
-      h("h5", null),
-      h(TaskCardView, Object.assign({}, coupleActions, { progress: 7 })),
-      " ",
-      h("h5", null),
-      h(TaskCardView, Object.assign({}, coupleActions, { progress: 10 })),
-      " ",
-      h("h5", null)),
-    h("div", { style: resizable },
-      h("h4", null, "Many Actions"),
-      h(TaskCardView, Object.assign({}, manyActions, { progress: 100 })),
-      " ",
-      h("h5", null),
-      h(TaskCardView, Object.assign({}, manyActions, { progress: 500 })),
-      " ",
-      h("h5", null),
-      h(TaskCardView, Object.assign({}, manyActions, { progress: 650 })),
-      " ",
-      h("h5", null),
-      h(TaskCardView, Object.assign({}, manyActions, { progress: 1000 })),
-      " ",
-      h("h5", null))));
-};
-export const RepeatableWithExpiry = () => {
-  const oneAction = {
-    rewardAmount: 20,
-    rewardUnit: "Points",
-    cardTitle: "Complete a survey",
-    description: "Description of action and reward. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eget quisque commodo leo.",
-    buttonText: "Take survey",
-    goal: 1,
-    repeatable: true,
-    showExpiry: true,
-    dateExpires: "Nov 1, 2021",
-    buttonLink: "https://example.com/",
-    showProgressBar: false,
-    loading: false,
-  };
-  const coupleActions = {
-    rewardAmount: 40,
-    rewardUnit: "Points",
-    cardTitle: "Comment on 5 articles",
-    showProgressBar: true,
-    repeatable: true,
-    goal: 5,
-    steps: true,
-    description: "Description of action and reward. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eget quisque commodo leo.",
-    buttonText: "Start reading",
-    showExpiry: true,
-    dateExpires: "Nov 1, 2021",
-    buttonLink: "https://example.com/",
-    loading: false,
-  };
-  const manyActions = {
-    rewardAmount: 150,
-    rewardUnit: "Points",
-    cardTitle: "Spend $500 at our Store",
-    showProgressBar: true,
-    repeatable: true,
-    goal: 500,
-    unit: "$",
-    description: "Description of action and reward. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eget quisque commodo leo.",
-    buttonText: "Visit our Store",
-    showExpiry: true,
-    dateExpires: "Nov 1, 2021",
-    buttonLink: "https://example.com/",
-    loading: false,
-  };
-  return (h("div", { style: { display: "inline-flex", gap: "32px" } },
-    h("div", { style: resizable },
-      h("h4", null, "One Action"),
-      h(TaskCardView, Object.assign({}, oneAction, { progress: 0 })),
-      " ",
-      h("h5", null),
-      h(TaskCardView, Object.assign({}, oneAction, { progress: 1 })),
-      " ",
-      h("h5", null)),
-    h("div", { style: resizable },
-      h("h4", null, "A Couple Actions"),
-      h(TaskCardView, Object.assign({}, coupleActions, { progress: 1 })),
-      " ",
-      h("h5", null),
-      h(TaskCardView, Object.assign({}, coupleActions, { progress: 5 })),
-      " ",
-      h("h5", null),
-      h(TaskCardView, Object.assign({}, coupleActions, { progress: 7 })),
-      " ",
-      h("h5", null),
-      h(TaskCardView, Object.assign({}, coupleActions, { progress: 10 })),
-      " ",
-      h("h5", null)),
-    h("div", { style: resizable },
-      h("h4", null, "Many Actions"),
-      h(TaskCardView, Object.assign({}, manyActions, { progress: 100 })),
-      " ",
-      h("h5", null),
-      h(TaskCardView, Object.assign({}, manyActions, { progress: 500 })),
-      " ",
-      h("h5", null),
-      h(TaskCardView, Object.assign({}, manyActions, { progress: 650 })),
-      " ",
-      h("h5", null),
-      h(TaskCardView, Object.assign({}, manyActions, { progress: 1000 })),
-      " ",
-      h("h5", null))));
-};

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

@@ -1,41 +0,0 @@
-import { setUserIdentity } from "@saasquatch/component-boilerplate";
-import { useEffect } from "@saasquatch/universal-hooks";
-import { h } from "@stencil/core";
-import { createHookStory } from "../sqm-stencilbook/HookStoryAddon";
-const JWT = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyIjp7ImlkIjoic2FtK2tsaXBAc2Fhc3F1YXQuY2giLCJhY2NvdW50SWQiOiJzYW0ra2xpcEBzYWFzcXVhdC5jaCJ9fQ.FMNZ6oajyr6SiCcRqKKdyPqvNTvWROQ60MKAyfvWGfc";
-export default {
-  title: "Hooks / useTaskCard",
-};
-function setupGraphQL() {
-  const id = "sam+klip@saasquat.ch";
-  const accountId = id;
-  const programId = "klip-referral-program";
-  //@ts-ignore
-  window.widgetIdent = {
-    tenantAlias: "test_a74miwdpofztj",
-    appDomain: "https://staging.referralsaasquatch.com",
-    programId,
-  };
-  useEffect(() => {
-    setUserIdentity({
-      accountId,
-      id,
-      jwt: JWT,
-    });
-    return () => {
-      window.widgetIdent = undefined;
-      setUserIdentity(undefined);
-    };
-  }, []);
-  return { id, accountId };
-}
-export const TaskCard = createHookStory(() => {
-  setupGraphQL();
-  const props = {
-    listType: "",
-    render: () => { },
-    disconnectedCallback: () => { },
-    ignored: true,
-  };
-  return (h("sqm-task-card", { "card-title": "Comment on 5 articles", "button-text": "Start reading", goal: 5, steps: true, "show-progress-bar": true }));
-});

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

@@ -1,7 +0,0 @@
-import { h } from "@stencil/core";
-export const gift = () => {
-  return (h("svg", { width: 16, height: 16, fill: "none", xmlns: "http://www.w3.org/2000/svg" },
-    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)" }),
-    h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M1.5 9v1h13V9h-13z", fill: "var(--sl-color-primary-300)" }),
-    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)" })));
-};

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

@@ -1,311 +0,0 @@
-import { h } from "@stencil/core";
-import jss from "jss";
-import preset from "jss-preset-default";
-import * as SVGs from "./SVGs";
-export function ProgressBarView(props) {
-  const { progress = 0, goal = 1, steps = false, progressBarUnit = "", repeatable = false, } = props;
-  console.log("progress bar props", props);
-  const gift1 = SVGs.gift();
-  const gift2 = SVGs.gift();
-  const gift3 = SVGs.gift();
-  var items = [];
-  var columns = "";
-  var repetitions = Math.floor(progress / goal);
-  if (repeatable) {
-    if (steps) {
-      addStepsRepeatable();
-    }
-    else {
-      addLinearRepeatable();
-    }
-  }
-  // non repeatable
-  else {
-    if (steps) {
-      addSteps();
-    }
-    else {
-      addLinear();
-    }
-  }
-  const style = {
-    ProgressBar: {
-      "& .progress-bar": {
-        height: "15px",
-        marginTop: steps ? "var(--sl-spacing-x-large)" : "var(--sl-spacing-xx-large)",
-        marginBottom: "var(--sl-spacing-xx-large)",
-        marginRight: "var(--sl-spacing-x-small)",
-        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",
-      },
-      "& .progress.top": {
-        position: "relative",
-        top: "-40px",
-      },
-      "& .progress.top:after": {
-        top: "-16%",
-      },
-      "& .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",
-      },
-      "& .gift.bw": {
-        filter: "grayscale(100%)",
-      },
-      "& .gift.start": {
-        transform: "scale(80%)",
-        top: "-20px",
-      },
-      "& .gift": {
-        textAlign: "center",
-        marginLeft: "-100px",
-        marginRight: "-100px",
-        position: "relative",
-        display: "list-item",
-        listStyleType: "none",
-        top: "-18px",
-        filter: goal <= progress ? "" : "grayscale(100%)",
-        zIndex: "1",
-      },
-    },
-  };
-  jss.setup(preset());
-  const sheet = jss.createStyleSheet(style);
-  const styleString = sheet.toString();
-  return (h("div", { class: sheet.classes.ProgressBar },
-    h("style", { type: "text/css" }, styleString),
-    h("div", { class: repetitions > 1 ? "progress-bar repeatable-steps" : "progress-bar" }, items)));
-  function clamp(x, min, max) {
-    return Math.min(Math.max(x, min), max);
-  }
-  function addLinear() {
-    const ratio = progress / goal;
-    columns =
-      clamp(ratio, 0, 1) + "fr 0fr " + clamp(1 - ratio, 0, 1) + "fr 0fr 0fr";
-    items.push(h("div", { class: "filled" }));
-    items.push(h("div", { class: clamp(progress, 0, goal) == goal ? "progress top bg" : "progress top" }, clamp(progress, 0, goal) == goal
-      ? ""
-      : progressBarUnit + clamp(progress, 0, goal)));
-    items.push(h("div", { class: "remain" }));
-    items.push(h("div", { class: "progress bg" }, goal));
-    items.push(h("div", { class: "gift" }, gift1));
-  }
-  function addSteps() {
-    let ratio = 1 / goal;
-    for (let i = 1; i < goal; i++) {
-      columns += ratio + "fr 0fr ";
-      if (i > progress) {
-        items.push(h("div", { class: "remain" }));
-        items.push(h("div", { class: "empty" }, i));
-      }
-      else {
-        items.push(h("div", { class: "filled" }));
-        items.push(h("div", { class: "progress" }, i));
-      }
-    }
-    columns += ratio + "fr 0fr ";
-    // reward success
-    if (goal <= progress) {
-      columns += "0fr ";
-      items.push(h("div", { class: "filled" }));
-      items.push(h("div", { class: "progress bg" }, goal));
-      items.push(h("div", { class: "gift" }, gift1));
-    }
-    // reward fail
-    else {
-      columns += "0fr ";
-      items.push(h("div", { class: "remain" }));
-      items.push(h("div", { class: "empty bg" }, goal));
-      items.push(h("div", { class: "gift" }, gift1));
-    }
-  }
-  function addLinearRepeatable() {
-    let repetitions = Math.floor(progress / goal);
-    let ratio = ((progress % goal) / goal) * 0.5;
-    // 0 repetition
-    if (repetitions == 0) {
-      columns = ratio + "fr 0fr " + (0.5 - ratio) + "fr 0fr 0fr 0.5fr 0fr 0fr";
-      items.push(h("div", { class: "filled" }));
-      items.push(h("div", { class: progress == goal ? "progress top bg" : "progress top" }, progressBarUnit + progress));
-      items.push(h("div", { class: "remain" }));
-      items.push(h("div", { class: "progress bg" }, progressBarUnit + goal));
-      items.push(h("div", { class: "gift" }, gift1));
-      items.push(h("div", { class: "remain" }));
-      items.push(h("div", { class: "progress bg" }, progressBarUnit + goal * 2));
-      items.push(h("div", { class: "gift bw" }, gift2));
-    }
-    // single repetition
-    else if (repetitions == 1) {
-      columns =
-        "0.5fr 0fr 0fr " + ratio + "fr 0fr " + (0.5 - ratio) + "fr 0fr 0fr";
-      items.push(h("div", { class: "filled" }));
-      items.push(h("div", { class: "progress bg" }, progressBarUnit + goal));
-      items.push(h("div", { class: "gift" }, gift1));
-      items.push(h("div", { class: "filled" }));
-      items.push(h("div", { class: progress == goal ? "progress top bg" : "progress top" }, progress == goal ? "" : progressBarUnit + progress));
-      items.push(h("div", { class: "remain" }));
-      items.push(h("div", { class: "progress bg" }, progressBarUnit + goal * 2));
-      items.push(h("div", { class: "gift bw" }, gift2));
-    }
-    // multiple repetitions
-    else {
-      columns =
-        "0fr 0fr 0.5fr 0fr 0fr " +
-          ratio +
-          "fr 0fr " +
-          (0.5 - ratio) +
-          "fr 0fr 0fr";
-      items.push(h("div", { class: "progress bg" }, progressBarUnit + goal * (repetitions - 1)));
-      items.push(h("div", { class: "gift start" }, gift1));
-      items.push(h("div", { class: "filled" }));
-      items.push(h("div", { class: "progress bg" }, progressBarUnit + goal * repetitions));
-      items.push(h("div", { class: "gift" }, gift2));
-      items.push(h("div", { class: "filled" }));
-      items.push(h("div", { class: progress == goal * repetitions ? "progress top bg" : "progress top" }, progress == goal * repetitions ? "" : progressBarUnit + progress));
-      items.push(h("div", { class: "remain" }));
-      items.push(h("div", { class: "progress bg" }, progressBarUnit + goal * (repetitions + 1)));
-      items.push(h("div", { class: "gift bw" }, gift3));
-    }
-  }
-  function addStepsRepeatable() {
-    let repetitions = Math.floor(progress / goal);
-    // no or single repetition
-    if (repetitions < 2) {
-      let ratio = 1 / goal;
-      for (let i = 1; i < goal * 2 + 1; i++) {
-        columns += ratio + "fr 0fr ";
-        if (i > progress) {
-          if (i == goal) {
-            columns += "0fr ";
-            items.push(h("div", { class: "remain" }));
-            items.push(h("div", { class: "empty bg" }, goal));
-            items.push(h("div", { class: "gift bw" }, gift1));
-          }
-          else if (i == goal * 2) {
-            columns += "0fr 0fr";
-            items.push(h("div", { class: "remain" }));
-            items.push(h("div", { class: "empty bg" }, goal * 2));
-            items.push(h("div", { class: "gift bw" }, gift2));
-          }
-          else {
-            items.push(h("div", { class: "remain" }));
-            items.push(h("div", { class: "empty" }, progressBarUnit + i));
-          }
-        }
-        else if (i == goal) {
-          columns += "0fr ";
-          items.push(h("div", { class: "filled" }));
-          items.push(h("div", { class: "progress bg" }, i));
-          items.push(h("div", { class: "gift" }, gift3));
-        }
-        else {
-          items.push(h("div", { class: "filled" }));
-          items.push(h("div", { class: "progress" }, i));
-        }
-      }
-    }
-    // case repetition many
-    else {
-      let position = (progress % goal) + goal;
-      let ratio = 1 / goal;
-      columns += "0fr 0fr ";
-      items.push(h("div", { class: "progress bg" }, goal * (repetitions - 1)));
-      items.push(h("div", { class: "gift start" }, gift1));
-      for (let i = 1; i < goal * 2 + 1; i++) {
-        columns += ratio + "fr 0fr ";
-        if (i <= goal) {
-          if (i == goal) {
-            columns += "0fr ";
-            items.push(h("div", { class: "filled" }));
-            items.push(h("div", { class: "progress bg" }, i + goal * (repetitions - 1)));
-            items.push(h("div", { class: "gift" }, gift2));
-          }
-          else {
-            items.push(h("div", { class: "filled" }));
-            items.push(h("div", { class: "progress" }, i + goal * (repetitions - 1)));
-          }
-        }
-        else if (i > position) {
-          if (i == goal * 2) {
-            columns += "0fr 0fr";
-            items.push(h("div", { class: "remain" }));
-            items.push(h("div", { class: "empty bg" }, i + goal * (repetitions - 1)));
-            items.push(h("div", { class: "gift bw" }, gift3));
-          }
-          else {
-            items.push(h("div", { class: "remain" }));
-            items.push(h("div", { class: "empty" }, i + goal * (repetitions - 1)));
-          }
-        }
-        else {
-          items.push(h("div", { class: "filled" }));
-          items.push(h("div", { class: "progress" }, i + goal * (repetitions - 1)));
-        }
-      }
-    }
-  }
-}