@saasquatch/mint-components 1.6.2-2 → 1.6.2-22

package/dist/collection/components/sqm-qa-tabs/Tabs.stories.js

@@ -1,491 +0,0 @@
-import { h } from "@stencil/core";
-import scenario from "./tabs.feature";
-export default {
-  title: "Components/Tabs",
-  parameters: {
-    scenario,
-  },
-};
-export const SimpleTabs = () => (h("div", { style: { maxWidth: "700px", margin: "auto" }, innerHTML: `
-     <sqm-tabs>
-        <sqm-tab header="General">This is the general tab</sqm-tab>
-        <sqm-tab header="Custom">This is the custom tab</sqm-tab>
-        <sqm-tab header="Advanced">This is the advanced tab</sqm-tab>
-      </sqm-tabs>
-    ` }));
-export const ManyTabs = () => (h("div", { style: { maxWidth: "700px", margin: "auto" }, innerHTML: `
-     <sqm-tabs>
-        <sqm-tab header="General">This is the general tab</sqm-tab>
-        <sqm-tab header="Custom">This is the custom tab</sqm-tab>
-        <sqm-tab header="Advanced">This is the advanced tab</sqm-tab> 
-        <sqm-tab header="General">This is the general tab</sqm-tab>
-        <sqm-tab header="Custom">This is the custom tab</sqm-tab>
-        <sqm-tab header="Advanced">This is the advanced tab</sqm-tab>
-        <sqm-tab header="General">This is the general tab</sqm-tab>
-        <sqm-tab header="Custom">This is the custom tab</sqm-tab>
-        <sqm-tab header="Advanced">This is the advanced tab</sqm-tab>
-        <sqm-tab header="General">This is the general tab</sqm-tab>
-        <sqm-tab header="Custom">This is the custom tab</sqm-tab>
-        <sqm-tab header="Advanced">This is the advanced tab</sqm-tab>
-      </sqm-tabs>
-    ` }));
-export const SingleTab = () => (h("div", { style: { maxWidth: "700px", margin: "auto" }, innerHTML: `
-     <sqm-tabs>
-        <sqm-tab header="Redeem">
-          <sqm-reward-exchange-list></sqm-reward-exchange-list>
-        </sqm-tab>
-      </sqm-tabs>
-    ` }));
-export const ReferralProgram = () => (h("div", { style: { maxWidth: "700px", margin: "auto" }, innerHTML: `
-    <sqm-tabs>
-    <sqm-tab header="Leaderboard">
-      <sqm-leaderboard></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-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-tabs>  
-    ` }));
-export const LoyaltyProgram = () => (h("div", { style: { maxWidth: "700px", margin: "auto" }, innerHTML: `
-    <sqm-tabs placement="top">
-    <sqm-tab header="Leaderboard">
-      <sqm-hero-image
-        image-url="https://i.imgur.com/MVgOJn7.png"
-        description="Be one of the top 3 referrers at the end of the year and receive Klip free for 1 year!"
-        layout="columns"
-        image-percentage="33%"
-        padding-image="large"
-        padding-text="large"
-        background-color=""
-      ></sqm-hero-image>
-      <sqm-leaderboard></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-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></sqm-reward-exchange-list>
-    </sqm-tab>
-  </sqm-tabs>  
-    ` }));
-export const BottomTabs = () => (h("div", { style: { maxWidth: "700px", margin: "auto" }, innerHTML: `
-    <sqm-tabs placement="bottom">
-    <sqm-tab header="Leaderboard">
-      <sqm-hero-image
-        image-url="https://i.imgur.com/MVgOJn7.png"
-        description="Be one of the top 3 referrers at the end of the year and receive Klip free for 1 year!"
-        layout="columns"
-        image-percentage="33%"
-        padding-image="large"
-        padding-text="large"
-        background-color=""
-      ></sqm-hero-image>
-      <sqm-leaderboard></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-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></sqm-reward-exchange-list>
-    </sqm-tab>
-  </sqm-tabs>  
-    ` }));
-export const LeftTabs = () => (h("div", { style: { maxWidth: "900px", margin: "auto" }, innerHTML: `
-    <sqm-tabs placement="left">
-    <sqm-tab header="Leaderboard">
-      <sqm-hero-image
-        image-url="https://i.imgur.com/MVgOJn7.png"
-        description="Be one of the top 3 referrers at the end of the year and receive Klip free for 1 year!"
-        layout="columns"
-        image-percentage="33%"
-        padding-image="large"
-        padding-text="large"
-        background-color=""
-      ></sqm-hero-image>
-      <sqm-leaderboard></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-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></sqm-reward-exchange-list>
-    </sqm-tab>
-  </sqm-tabs>  
-    ` }));
-export const RightTabs = () => (h("div", { style: { maxWidth: "900px", margin: "auto" }, innerHTML: `
-    <sqm-tabs placement="right">
-    <sqm-tab header="Leaderboard">
-      <sqm-hero-image
-        image-url="https://i.imgur.com/MVgOJn7.png"
-        description="Be one of the top 3 referrers at the end of the year and receive Klip free for 1 year!"
-        layout="columns"
-        image-percentage="33%"
-        padding-image="large"
-        padding-text="large"
-        background-color=""
-      ></sqm-hero-image>
-      <sqm-leaderboard></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-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></sqm-reward-exchange-list>
-    </sqm-tab>
-  </sqm-tabs>  
-    ` }));

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

@@ -1,31 +0,0 @@
-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-qa-tabs/sqm-tabs.js

@@ -1,59 +0,0 @@
-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"]}]
- * @canvasRenderer always-replace
- * @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-qa-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-qa-tabs/useTabs.js

@@ -1,46 +0,0 @@
-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/esm/extends-c31f1eff.js

@@ -1,19 +0,0 @@
-function _extends() {
-  _extends = Object.assign || function (target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
-
-    return target;
-  };
-
-  return _extends.apply(this, arguments);
-}
-
-export { _extends as _ };