@saasquatch/mint-components 1.6.1-13 → 1.6.1-16

package/dist/collection/components/sqm-tabs/sqm-tabs-view.js

@@ -1,31 +1,31 @@
-import { useHost } from "@saasquatch/stencil-hooks";
-import { h, Host } from "@stencil/core";
-export const TabsView = ({ content, placement, }) => {
-  // Vertical padding for top & bottom placement, horizontal for left & right.
-  const padding = !placement || placement === "top" || placement === "bottom"
-    ? "var(--sl-spacing-x-large) 0;"
-    : "0 var(--sl-spacing-xx-large);";
-  const vanillaStyle = `
-    sl-tab-panel::part(base) {
-      padding: ${padding};
-    }
-  `;
-  const host = useHost();
-  return (h(Host, null,
-    h("style", { type: "text/css" }, vanillaStyle),
-    h("sl-tab-group", { placement: placement }, content.tabs.map((tab) => {
-      const slotName = tab.getAttribute("slot");
-      if (tab.tagName === "RAISINS-PLOP-TARGET") {
-        return (h("sl-tab", { slot: "nav" },
-          h("div", { style: { marginTop: "10px" } },
-            h("slot", { name: slotName }))));
-      }
-      return [
-        h("sl-tab", { slot: "nav", panel: slotName, id: tab.getAttribute("id") || slotName }, tab.getAttribute("header")),
-        h("sl-tab-panel", { name: slotName },
-          h("slot", { name: slotName })),
-      ];
-    })),
-    h("div", { style: { display: "none" } },
-      h("slot", null))));
-};
+import { useHost } from "@saasquatch/stencil-hooks";
+import { h, Host } from "@stencil/core";
+export const TabsView = ({ content, placement, }) => {
+  // Vertical padding for top & bottom placement, horizontal for left & right.
+  const padding = !placement || placement === "top" || placement === "bottom"
+    ? "var(--sl-spacing-x-large) 0;"
+    : "0 var(--sl-spacing-xx-large);";
+  const vanillaStyle = `
+    sl-tab-panel::part(base) {
+      padding: ${padding};
+    }
+  `;
+  const host = useHost();
+  return (h(Host, null,
+    h("style", { type: "text/css" }, vanillaStyle),
+    h("sl-tab-group", { placement: placement }, content.tabs.map((tab) => {
+      const slotName = tab.getAttribute("slot");
+      if (tab.tagName === "RAISINS-PLOP-TARGET") {
+        return (h("sl-tab", { slot: "nav" },
+          h("div", { style: { marginTop: "10px" } },
+            h("slot", { name: slotName }))));
+      }
+      return [
+        h("sl-tab", { slot: "nav", panel: slotName, id: tab.getAttribute("id") || slotName }, tab.getAttribute("header")),
+        h("sl-tab-panel", { name: slotName },
+          h("slot", { name: slotName })),
+      ];
+    })),
+    h("div", { style: { display: "none" } },
+      h("slot", null))));
+};

package/dist/collection/components/sqm-tabs/sqm-tabs.js

@@ -1,58 +1,58 @@
-import { withHooks } from "@saasquatch/stencil-hooks";
-import { Component, h, Prop } from "@stencil/core";
-import { getProps } from "../../utils/utils";
-import { TabsView } from "./sqm-tabs-view";
-import { useTabs } from "./useTabs";
-/**
- * @uiName Tab Group
- * @slots [{"name":"", "title":"Tabs","validChildren":["sqm-tab"]}]
- * @exampleGroup Layout
- * @example Generic Tab Group - <sqm-tabs><sqm-tab header="Tab 1">This is the first tab</sqm-tab><sqm-tab header="Tab 2">This is the second tab</sqm-tab><sqm-tab header="Tab 3">This is the third tab</sqm-tab></sqm-tabs>
- * @example Referral Tab Group - <sqm-tabs><sqm-tab header="Leaderboard"><sqm-leaderboard usersheading="Referrer" statsheading="Referrals" rankheading="Rank" rank-type="rowNumber" leaderboard-type="topStartedReferrers" show-rank anonymous-user="Anonymous User"><sqm-empty empty-state-image="https://res.cloudinary.com/saasquatch/image/upload/v1644000223/squatch-assets/empty_leaderboard2.png" empty-state-header="View your rank in the leaderboard" empty-state-text="Be the first to refer a friend and reach the top of the leaderboard"></sqm-empty></sqm-leaderboard></sqm-tab><sqm-tab header="Referral history"><sqm-referral-table><sqm-referral-table-user-column column-title="User" anonymous-user="Anonymous User" deleted-user="Deleted User"></sqm-referral-table-user-column><sqm-referral-table-status-column column-title="Referral status" converted-status-text="Converted" in-progress-status-text="In Progress"></sqm-referral-table-status-column><sqm-referral-table-rewards-column column-title="Rewards" expiring-text="Expiring in" fuel-tank-text="Your code is" pending-for-text="{status} for {date}" reward-received-text="Reward received on" status-long-text="{status, select, AVAILABLE {Reward expiring on} CANCELLED {Reward cancelled on} PENDING {Available on} EXPIRED {Reward expired on} other {Not available} }" status-text="{status, select, AVAILABLE {Available} CANCELLED {Cancelled} PENDING {Pending} EXPIRED {Expired} REDEEMED {Redeemed} other {Not available} }"></sqm-referral-table-rewards-column><sqm-referral-table-date-column column-title="Date referred" date-shown="dateReferralStarted"></sqm-referral-table-date-column><sqm-empty empty-state-image="https://res.cloudinary.com/saasquatch/image/upload/v1644000223/squatch-assets/empty_referral2.png" empty-state-header="View your referral details" empty-state-text="Refer a friend to view the status of your referrals and rewards earned"></sqm-empty></sqm-referral-table></sqm-tab></sqm-tabs>
- * @example Loyalty Tab Group - <sqm-tabs placement="top"> <sqm-tab header="Leaderboard"> <sqm-leaderboard usersheading="Users" statsheading="Points Earned" rankheading="Rank" rank-type="rowNumber" leaderboard-type="topPointEarners" show-rank anonymous-user="Anonymous User" > <sqm-empty empty-state-image="https://res.cloudinary.com/saasquatch/image/upload/v1644000223/squatch-assets/empty_leaderboard2.png" empty-state-header="View your rank in the leaderboard" empty-state-text="Be the first to earn points and reach the top of the leaderboard" ></sqm-empty ></sqm-leaderboard> </sqm-tab> <sqm-tab header="Reward history"> <sqm-rewards-table ><sqm-rewards-table-reward-column available-text="{availableAmount} remaining" column-title="Reward" copy-text="Copied!" redeemed-text="{redeemedAmount} redeemed" > </sqm-rewards-table-reward-column> <sqm-rewards-table-source-column anonymous-user="Anonymous User" column-title="Source" deleted-user="Deleted User" referral-text="{rewardSource, select, FRIEND_SIGNUP {Referral to} REFERRED {Referred by} other {}}" reward-exchange-text="Reward Exchange" reward-source-text="{rewardSource, select, MANUAL {Manual} AUTOMATED {{programName}} other {}}" > </sqm-rewards-table-source-column><sqm-rewards-table-status-column column-title="Status" expiry-text="Expires on " status-text="{status, select, AVAILABLE {Available} CANCELLED {Cancelled} PENDING {Pending} EXPIRED {Expired} REDEEMED {Redeemed} other {Not available} }"></sqm-rewards-table-status-column><sqm-rewards-table-date-column column-title="Date received" date-shown="dateGiven"></sqm-rewards-table-date-column><sqm-empty empty-state-image="https://res.cloudinary.com/saasquatch/image/upload/v1644360953/squatch-assets/empty_reward2.png" empty-state-header="View your rewards" empty-state-text="Refer friends and complete tasks to view the details of your rewards"></sqm-empty></sqm-rewards-table></sqm-tab><sqm-tab header="Redeem"><sqm-reward-exchange-list back-text="Back" button-text="Exchange Rewards" cancel-text="Cancel" choose-amount-title="Select" choose-reward-title="Rewards" confirmation-title="Confirm" continue-text="Continue" continue-to-confirmation-text="Continue to confirmation" done-text="Done" reward-title="Choose a reward" not-available-error="{unavailableReasonCode, select, US_TAX {US Tax limit} INSUFFICIENT_REDEEMABLE_CREDIT {{sourceValue} required} AVAILABILITY_PREDICATE {Not available} other {{unavailableReasonCode}} }" not-enough-error="Not enough {sourceUnit} to redeem for this reward" query-error="Unable to load reward exchange list. Please try again" redeem-text="Redeem" redeem-title="Confirm and redeem" redemption-error="An error occured trying to redeem this reward. Please try again" redemption-success-text="Redeemed {sourceValue} for {destinationValue}" select-text="Select amount to receive" source-amount-message="{ruleType, select, FIXED_GLOBAL_REWARD {{sourceValue}} other {{sourceMinValue} to {sourceMaxValue}}}" tooltiptext="Copied" reward-name-title="Reward" reward-amount-title="Reward Amount" cost-title="Cost to Redeem" reward-redeemed-text="Reward redeemed" skeleton-card-num="8" promo-code="Promo Code" tooltip-text="Copied!"><sqm-empty empty-state-image="https://res.cloudinary.com/saasquatch/image/upload/v1644360953/squatch-assets/empty_exchange2.png" empty-state-header="Redeem rewards" empty-state-text="Use your points to redeem rewards once they become available"></sqm-empty></sqm-reward-exchange-list></sqm-tab></sqm-tabs>
- */
-export class Tabs {
-  constructor() {
-    withHooks(this);
-  }
-  disconnectedCallback() { }
-  render() {
-    const { content } = useTabs();
-    const { placement } = getProps(this);
-    return (h(TabsView, { placement: placement, content: content },
-      h("slot", null)));
-  }
-  static get is() { return "sqm-tabs"; }
-  static get encapsulation() { return "shadow"; }
-  static get properties() { return {
-    "placement": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "\"left\" | \"right\" | \"bottom\" | \"top\"",
-        "resolved": "\"bottom\" | \"left\" | \"right\" | \"top\"",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [{
-            "text": "Tabs Placement",
-            "name": "uiName"
-          }, {
-            "text": "string",
-            "name": "uiType"
-          }, {
-            "text": "[\"left\", \"right\", \"bottom\", \"top\"]",
-            "name": "uiEnum"
-          }, {
-            "text": "[\"Left\", \"Right\", \"Bottom\", \"Top\"]",
-            "name": "uiEnumNames"
-          }],
-        "text": "Used to specify the placement of the tabs"
-      },
-      "attribute": "placement",
-      "reflect": false
-    }
-  }; }
-}
+import { withHooks } from "@saasquatch/stencil-hooks";
+import { Component, h, Prop } from "@stencil/core";
+import { getProps } from "../../utils/utils";
+import { TabsView } from "./sqm-tabs-view";
+import { useTabs } from "./useTabs";
+/**
+ * @uiName Tab Group
+ * @slots [{"name":"", "title":"Tabs","validChildren":["sqm-tab"]}]
+ * @exampleGroup Layout
+ * @example Generic Tab Group - <sqm-tabs><sqm-tab header="Tab 1">This is the first tab</sqm-tab><sqm-tab header="Tab 2">This is the second tab</sqm-tab><sqm-tab header="Tab 3">This is the third tab</sqm-tab></sqm-tabs>
+ * @example Referral Tab Group - <sqm-tabs><sqm-tab header="Leaderboard"><sqm-leaderboard usersheading="Referrer" statsheading="Referrals" rankheading="Rank" rank-type="rowNumber" leaderboard-type="topStartedReferrers" show-rank anonymous-user="Anonymous User"><sqm-empty empty-state-image="https://res.cloudinary.com/saasquatch/image/upload/v1644000223/squatch-assets/empty_leaderboard2.png" empty-state-header="View your rank in the leaderboard" empty-state-text="Be the first to refer a friend and reach the top of the leaderboard"></sqm-empty></sqm-leaderboard></sqm-tab><sqm-tab header="Referral history"><sqm-referral-table><sqm-referral-table-user-column column-title="User" anonymous-user="Anonymous User" deleted-user="Deleted User"></sqm-referral-table-user-column><sqm-referral-table-status-column column-title="Referral status" converted-status-text="Converted" in-progress-status-text="In Progress"></sqm-referral-table-status-column><sqm-referral-table-rewards-column column-title="Rewards" expiring-text="Expiring in" fuel-tank-text="Your code is" pending-for-text="{status} for {date}" reward-received-text="Reward received on" status-long-text="{status, select, AVAILABLE {Reward expiring on} CANCELLED {Reward cancelled on} PENDING {Available on} EXPIRED {Reward expired on} other {Not available} }" status-text="{status, select, AVAILABLE {Available} CANCELLED {Cancelled} PENDING {Pending} EXPIRED {Expired} REDEEMED {Redeemed} other {Not available} }"></sqm-referral-table-rewards-column><sqm-referral-table-date-column column-title="Date referred" date-shown="dateReferralStarted"></sqm-referral-table-date-column><sqm-empty empty-state-image="https://res.cloudinary.com/saasquatch/image/upload/v1644000223/squatch-assets/empty_referral2.png" empty-state-header="View your referral details" empty-state-text="Refer a friend to view the status of your referrals and rewards earned"></sqm-empty></sqm-referral-table></sqm-tab></sqm-tabs>
+ * @example Loyalty Tab Group - <sqm-tabs placement="top"> <sqm-tab header="Leaderboard"> <sqm-leaderboard usersheading="Users" statsheading="Points Earned" rankheading="Rank" rank-type="rowNumber" leaderboard-type="topPointEarners" show-rank anonymous-user="Anonymous User" > <sqm-empty empty-state-image="https://res.cloudinary.com/saasquatch/image/upload/v1644000223/squatch-assets/empty_leaderboard2.png" empty-state-header="View your rank in the leaderboard" empty-state-text="Be the first to earn points and reach the top of the leaderboard" ></sqm-empty ></sqm-leaderboard> </sqm-tab> <sqm-tab header="Reward history"> <sqm-rewards-table ><sqm-rewards-table-reward-column available-text="{availableAmount} remaining" column-title="Reward" copy-text="Copied!" redeemed-text="{redeemedAmount} redeemed" > </sqm-rewards-table-reward-column> <sqm-rewards-table-source-column anonymous-user="Anonymous User" column-title="Source" deleted-user="Deleted User" referral-text="{rewardSource, select, FRIEND_SIGNUP {Referral to} REFERRED {Referred by} other {}}" reward-exchange-text="Reward Exchange" reward-source-text="{rewardSource, select, MANUAL {Manual} AUTOMATED {{programName}} other {}}" > </sqm-rewards-table-source-column><sqm-rewards-table-status-column column-title="Status" expiry-text="Expires on " status-text="{status, select, AVAILABLE {Available} CANCELLED {Cancelled} PENDING {Pending} EXPIRED {Expired} REDEEMED {Redeemed} other {Not available} }"></sqm-rewards-table-status-column><sqm-rewards-table-date-column column-title="Date received" date-shown="dateGiven"></sqm-rewards-table-date-column><sqm-empty empty-state-image="https://res.cloudinary.com/saasquatch/image/upload/v1644360953/squatch-assets/empty_reward2.png" empty-state-header="View your rewards" empty-state-text="Refer friends and complete tasks to view the details of your rewards"></sqm-empty></sqm-rewards-table></sqm-tab><sqm-tab header="Redeem"><sqm-reward-exchange-list back-text="Back" button-text="Exchange Rewards" cancel-text="Cancel" choose-amount-title="Select" choose-reward-title="Rewards" confirmation-title="Confirm" continue-text="Continue" continue-to-confirmation-text="Continue to confirmation" done-text="Done" reward-title="Choose a reward" not-available-error="{unavailableReasonCode, select, US_TAX {US Tax limit} INSUFFICIENT_REDEEMABLE_CREDIT {{sourceValue} required} AVAILABILITY_PREDICATE {Not available} other {{unavailableReasonCode}} }" not-enough-error="Not enough {sourceUnit} to redeem for this reward" query-error="Unable to load reward exchange list. Please try again" redeem-text="Redeem" redeem-title="Confirm and redeem" redemption-error="An error occured trying to redeem this reward. Please try again" redemption-success-text="Redeemed {sourceValue} for {destinationValue}" select-text="Select amount to receive" source-amount-message="{ruleType, select, FIXED_GLOBAL_REWARD {{sourceValue}} other {{sourceMinValue} to {sourceMaxValue}}}" tooltiptext="Copied" reward-name-title="Reward" reward-amount-title="Reward Amount" cost-title="Cost to Redeem" reward-redeemed-text="Reward redeemed" skeleton-card-num="8" promo-code="Promo Code" tooltip-text="Copied!"><sqm-empty empty-state-image="https://res.cloudinary.com/saasquatch/image/upload/v1644360953/squatch-assets/empty_exchange2.png" empty-state-header="Redeem rewards" empty-state-text="Use your points to redeem rewards once they become available"></sqm-empty></sqm-reward-exchange-list></sqm-tab></sqm-tabs>
+ */
+export class Tabs {
+  constructor() {
+    withHooks(this);
+  }
+  disconnectedCallback() { }
+  render() {
+    const { content } = useTabs();
+    const { placement } = getProps(this);
+    return (h(TabsView, { placement: placement, content: content },
+      h("slot", null)));
+  }
+  static get is() { return "sqm-tabs"; }
+  static get encapsulation() { return "shadow"; }
+  static get properties() { return {
+    "placement": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "\"left\" | \"right\" | \"bottom\" | \"top\"",
+        "resolved": "\"bottom\" | \"left\" | \"right\" | \"top\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": "Tabs Placement",
+            "name": "uiName"
+          }, {
+            "text": "string",
+            "name": "uiType"
+          }, {
+            "text": "[\"left\", \"right\", \"bottom\", \"top\"]",
+            "name": "uiEnum"
+          }, {
+            "text": "[\"Left\", \"Right\", \"Bottom\", \"Top\"]",
+            "name": "uiEnumNames"
+          }],
+        "text": "Used to specify the placement of the tabs"
+      },
+      "attribute": "placement",
+      "reflect": false
+    }
+  }; }
+}

package/dist/collection/components/sqm-tabs/useTabs.js

@@ -1,46 +1,46 @@
-import { useHost } from "@saasquatch/component-boilerplate";
-import { useEffect, useMemo } from "@saasquatch/universal-hooks";
-import { useChildElements } from "../../tables/useChildElements";
-const REVEAL_EVENT = "sq:reveal";
-export function useTabs() {
-  const rawTabs = useChildElements();
-  const host = useHost();
-  const tabs = useMemo(() => rawTabs
-    .filter((tab) => tab.tagName === "SQM-TAB" || tab.tagName === "RAISINS-PLOP-TARGET")
-    .map((tab, i) => {
-    if (tab.tagName === "RAISINS-PLOP-TARGET") {
-      const plopTab = tab;
-      plopTab.style.position = "absolute";
-      plopTab.style.left = "6px";
-      const plopTarget = tab.firstElementChild
-        .childNodes[1];
-      plopTarget.innerHTML = "＋";
-      plopTarget.style.lineHeight = "20px";
-    }
-    tab.setAttribute("slot", "tab-" + i);
-    // set id as targets for scroll component
-    tab.setAttribute("id", "tab-" + i);
-    return tab;
-  }), [rawTabs]);
-  useEffect(() => {
-    const listener = (e) => {
-      var _a;
-      const target = e.target;
-      // Prevents recursively nested components from sending requests up all the way
-      e.stopPropagation();
-      if (!target)
-        return;
-      const tabsComponent = target.closest("sqm-tabs");
-      if (!host.contains(target) || !tabsComponent)
-        return;
-      const targetTab = target.closest("sqm-tab");
-      const tabGroup = tabsComponent.shadowRoot.querySelector("sl-tab-group");
-      (_a = tabGroup) === null || _a === void 0 ? void 0 : _a.show(targetTab.id);
-    };
-    host.addEventListener(REVEAL_EVENT, listener);
-    return () => {
-      host.removeEventListener(REVEAL_EVENT, listener);
-    };
-  }, []);
-  return { content: { tabs } };
-}
+import { useHost } from "@saasquatch/component-boilerplate";
+import { useEffect, useMemo } from "@saasquatch/universal-hooks";
+import { useChildElements } from "../../tables/useChildElements";
+const REVEAL_EVENT = "sq:reveal";
+export function useTabs() {
+  const rawTabs = useChildElements();
+  const host = useHost();
+  const tabs = useMemo(() => rawTabs
+    .filter((tab) => tab.tagName === "SQM-TAB" || tab.tagName === "RAISINS-PLOP-TARGET")
+    .map((tab, i) => {
+    if (tab.tagName === "RAISINS-PLOP-TARGET") {
+      const plopTab = tab;
+      plopTab.style.position = "absolute";
+      plopTab.style.left = "6px";
+      const plopTarget = tab.firstElementChild
+        .childNodes[1];
+      plopTarget.innerHTML = "＋";
+      plopTarget.style.lineHeight = "20px";
+    }
+    tab.setAttribute("slot", "tab-" + i);
+    // set id as targets for scroll component
+    tab.setAttribute("id", "tab-" + i);
+    return tab;
+  }), [rawTabs]);
+  useEffect(() => {
+    const listener = (e) => {
+      var _a;
+      const target = e.target;
+      // Prevents recursively nested components from sending requests up all the way
+      e.stopPropagation();
+      if (!target)
+        return;
+      const tabsComponent = target.closest("sqm-tabs");
+      if (!host.contains(target) || !tabsComponent)
+        return;
+      const targetTab = target.closest("sqm-tab");
+      const tabGroup = tabsComponent.shadowRoot.querySelector("sl-tab-group");
+      (_a = tabGroup) === null || _a === void 0 ? void 0 : _a.show(targetTab.id);
+    };
+    host.addEventListener(REVEAL_EVENT, listener);
+    return () => {
+      host.removeEventListener(REVEAL_EVENT, listener);
+    };
+  }, []);
+  return { content: { tabs } };
+}

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

@@ -1,53 +1,53 @@
-import { h } from "@stencil/core";
-import { createStyleSheet } from "../../styling/JSS";
-export 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",
-      cursor: "pointer",
-    },
-    "& input:checked ~ .summary": {
-      transition: "all var(--sl-transition-medium) ease",
-      maxHeight: "300px",
-      marginBottom: "var(--sl-spacing-x-large)",
-    },
-    "& input:checked ~ .summary[progress-bar]": {
-      marginBottom: "var(--sl-spacing-xx-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)",
-    },
-  },
-};
-const sheet = createStyleSheet(style);
-const styleString = sheet.toString();
-export function Details(props) {
-  const rid = Math.random().toString(36).slice(2);
-  return (h("div", { style: { opacity: props.opacity } },
-    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", "progress-bar": props.progressBar }, props.content.description))));
-}
+import { h } from "@stencil/core";
+import { createStyleSheet } from "../../styling/JSS";
+export 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",
+      cursor: "pointer",
+    },
+    "& input:checked ~ .summary": {
+      transition: "all var(--sl-transition-medium) ease",
+      maxHeight: "300px",
+      marginBottom: "var(--sl-spacing-x-large)",
+    },
+    "& input:checked ~ .summary[progress-bar]": {
+      marginBottom: "var(--sl-spacing-xx-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)",
+    },
+  },
+};
+const sheet = createStyleSheet(style);
+const styleString = sheet.toString();
+export function Details(props) {
+  const rid = Math.random().toString(36).slice(2);
+  return (h("div", { style: { opacity: props.opacity } },
+    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", "progress-bar": props.progressBar }, props.content.description))));
+}

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

@@ -1,14 +1,14 @@
-import { h } from "@stencil/core";
-export const checkmark_circle = () => {
-  return (h("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
-    h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M1.81818 10C1.81818 5.48131 5.48131 1.81818 10 1.81818C14.5187 1.81818 18.1818 5.48131 18.1818 10C18.1818 14.5187 14.5187 18.1818 10 18.1818C5.48131 18.1818 1.81818 14.5187 1.81818 10ZM10 0C4.47715 0 0 4.47715 0 10C0 15.5228 4.47715 20 10 20C15.5228 20 20 15.5228 20 10C20 4.47715 15.5228 0 10 0ZM15.7692 6.96189C16.1398 6.48683 16.0551 5.80132 15.58 5.43077C15.1049 5.06022 14.4194 5.14495 14.0489 5.62001L8.72994 12.4391L5.86229 9.5715C5.43627 9.14548 4.74554 9.14548 4.31952 9.5715C3.89349 9.99752 3.89349 10.6882 4.31952 11.1143L8.05976 14.8545C8.28083 15.0756 8.58613 15.1912 8.89818 15.172C9.21023 15.1528 9.49905 15.0006 9.69133 14.7541L15.7692 6.96189Z", fill: "currentColor" })));
-};
-export const checkmark_filled = () => {
-  return (h("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
-    h("circle", { cx: "10", cy: "10", r: "10", fill: "currentColor" }),
-    h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M14.65 6.19231C15.0459 6.5011 15.1165 7.07236 14.8077 7.46825L9.74277 13.9617C9.58254 14.1672 9.34186 14.294 9.08182 14.31C8.82178 14.326 8.56736 14.2297 8.38314 14.0454L5.26627 10.9286C4.91124 10.5735 4.91124 9.99794 5.26627 9.64292C5.62129 9.2879 6.19689 9.2879 6.55191 9.64292L8.94162 12.0326L13.3741 6.35001C13.6828 5.95412 14.2541 5.88352 14.65 6.19231Z", fill: "white" })));
-};
-export const arrow_left_right = () => {
-  return (h("svg", { width: 11, height: 12, fill: "none", xmlns: "http://www.w3.org/2000/svg" },
-    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" })));
-};
+import { h } from "@stencil/core";
+export const checkmark_circle = () => {
+  return (h("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+    h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M1.81818 10C1.81818 5.48131 5.48131 1.81818 10 1.81818C14.5187 1.81818 18.1818 5.48131 18.1818 10C18.1818 14.5187 14.5187 18.1818 10 18.1818C5.48131 18.1818 1.81818 14.5187 1.81818 10ZM10 0C4.47715 0 0 4.47715 0 10C0 15.5228 4.47715 20 10 20C15.5228 20 20 15.5228 20 10C20 4.47715 15.5228 0 10 0ZM15.7692 6.96189C16.1398 6.48683 16.0551 5.80132 15.58 5.43077C15.1049 5.06022 14.4194 5.14495 14.0489 5.62001L8.72994 12.4391L5.86229 9.5715C5.43627 9.14548 4.74554 9.14548 4.31952 9.5715C3.89349 9.99752 3.89349 10.6882 4.31952 11.1143L8.05976 14.8545C8.28083 15.0756 8.58613 15.1912 8.89818 15.172C9.21023 15.1528 9.49905 15.0006 9.69133 14.7541L15.7692 6.96189Z", fill: "currentColor" })));
+};
+export const checkmark_filled = () => {
+  return (h("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+    h("circle", { cx: "10", cy: "10", r: "10", fill: "currentColor" }),
+    h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M14.65 6.19231C15.0459 6.5011 15.1165 7.07236 14.8077 7.46825L9.74277 13.9617C9.58254 14.1672 9.34186 14.294 9.08182 14.31C8.82178 14.326 8.56736 14.2297 8.38314 14.0454L5.26627 10.9286C4.91124 10.5735 4.91124 9.99794 5.26627 9.64292C5.62129 9.2879 6.19689 9.2879 6.55191 9.64292L8.94162 12.0326L13.3741 6.35001C13.6828 5.95412 14.2541 5.88352 14.65 6.19231Z", fill: "white" })));
+};
+export const arrow_left_right = () => {
+  return (h("svg", { width: 11, height: 12, fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+    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" })));
+};