@saasquatch/mint-components 1.5.6-1 → 1.5.6-2

package/dist/collection/components/sqm-big-stat/sqm-big-stat.js

@@ -7,7 +7,7 @@ import { isDemo, useHost } from "@saasquatch/component-boilerplate";
 /**
  *
  * @uiName Big Stat
- * @slot the description of the component
+ * @slots [{"name":"","title":"Stat Text"}]
  * @example Points Balance -  <sqm-big-stat flex-reverse="true" alignment="left" stat-type="/rewardBalance/CREDIT/POINT/value/global">Points Balance</sqm-big-stat>
  * @example GiftCards Earned - <sqm-big-stat flex-reverse="true" alignment="left" stat-type="/integrationRewardsCountFiltered/AVAILABLE/global">Giftcards Earned</sqm-big-stat>
  * @example Referrals - <sqm-big-stat flex-reverse="true" alignment="left" stat-type="/referralsCount">Referrals</sqm-big-stat>

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

@@ -6,7 +6,7 @@ import { autoColorScaleCss } from "../sqm-stencilbook/AutoColor";
 /**
  *
  * @uiName Brand Container
- * @slot Controls the brand color and font of Mint Components wrapped by the container.
+ * @slots [{"name":"","title":"Branded Content"}]
  */
 export class BrandComponent {
   constructor() {

package/dist/collection/components/sqm-card-feed/sqm-card-feed.js

@@ -4,6 +4,7 @@ import { getProps } from "../../utils/utils";
 import { CardFeedView } from "./sqm-card-feed-view";
 /**
  * @uiName Card Feed
+ * @slots [{"name":"","title":"Cards"}]
  */
 export class CardFeed {
   constructor() {

package/dist/collection/components/sqm-portal-container/sqm-portal-container.js

@@ -4,6 +4,7 @@ import { PortalContainerView } from "./sqm-portal-container-view";
 import { getProps } from "../../utils/utils";
 /**
  * @uiName Portal Container
+ * @slots [{"name":"","title":"Widget Content"}]
  */
 export class PortalContainer {
   constructor() {

package/dist/collection/components/sqm-referral-card/sqm-referral-card.js

@@ -4,7 +4,8 @@ import { getProps } from "../../utils/utils";
 import { ReferralCardView } from "./sqm-referral-card-view";
 /**
  * @uiName Referral Card
- * @example Card with Timeline and Sharing - <sqm-referral-card><sqm-portal-container gap="large" slot="left"><sqm-text>Get rewarded when your friend uses Klip </sqm-text><sqm-timeline icon="circle"><sqm-timeline-entry reward="75" unit="points" desc="Your friends signs up for a free trial"></sqm-timeline-entry><sqm-timeline-entry reward="$50" unit="visa giftcard" desc="Your friends signs up for Klip Business"></sqm-timeline-entry><sqm-timeline-entry reward="$200" unit="visa giftcard" desc="Your friend qualifies as a good fit for Klip Enterprise"></sqm-timeline-entry><sqm-timeline-entry reward="$1000" unit="visa giftcard" desc="Your friend purchases Klip Enterprise"></sqm-timeline-entry></sqm-timeline></sqm-portal-container><sqm-portal-container gap="large" slot="right"><sqm-text>Choose how you want to share: </sqm-text><sqm-text><sub>Your unique referral link:</sub><sqm-share-link> </sqm-share-link></sqm-text><sqm-portal-container gap="x-small"><sqm-share-button medium="email">Share via email</sqm-share-button><sqm-share-button medium="linkedin">Share on LinkedIn</sqm-share-button><sqm-share-button medium="twitter">Tweet about us</sqm-share-button><sqm-share-button medium="sms">Text a friend</sqm-share-button></sqm-portal-container></sqm-portal-container></sqm-referral-card>
+ * @slots [{"name":"left","title":"Left Content"},{"name":"right","title":"Right Content"}]
+ * @example Referral Card - <sqm-referral-card vertical-alignment="start"> <sqm-portal-container gap="large" slot="left" direction="column" display="grid" max-width="100%" padding="none" > <sqm-text >They’ll get a $50 credit towards a new account and you’ll get: </sqm-text> <sqm-timeline icon="circle"> <sqm-timeline-entry reward="$50" unit="visa giftcard" desc="Your friend purchases a Business plan" icon="circle" > </sqm-timeline-entry> <sqm-timeline-entry reward="$200" unit="visa giftcard" desc="Our sales team qualifies your friend as a good fit for our Enterprise plan" icon="circle" > </sqm-timeline-entry> <sqm-timeline-entry reward="$1000" unit="visa giftcard" desc="Your friend purchases an Enterprise plan" icon="circle" > </sqm-timeline-entry> </sqm-timeline> </sqm-portal-container> <sqm-portal-container gap="large" slot="right" direction="column" display="grid" max-width="100%" padding="none" > <sqm-text>Choose how you want to share: </sqm-text> <sqm-text> <sub>Your unique referral link:</sub> <sqm-share-link tooltip-text="Copied to Clipboard" tooltip-lifespan="1000" > </sqm-share-link> </sqm-text> <sqm-portal-container gap="x-small" direction="column" display="grid" max-width="100%" padding="none" > <sqm-share-button medium="email" icon-slot="prefix" size="medium" type="default" > Share via email </sqm-share-button> <sqm-share-button medium="linkedin" icon-slot="prefix" size="medium" type="default" > Share on LinkedIn </sqm-share-button> <sqm-share-button medium="twitter" icon-slot="prefix" size="medium" type="default" > Share on Twitter </sqm-share-button> </sqm-portal-container> </sqm-portal-container> </sqm-referral-card>
  */
 export class ReferralCard {
   constructor() {

package/dist/collection/components/sqm-reward-exchange-list/sqm-reward-exchange-list.js

@@ -8,6 +8,7 @@ import { getProps } from "../../utils/utils";
 import { demoRewardExchange } from "./RewardExchangeListData";
 /**
  * @uiName Reward Exchange
+ * @example Reward Exchange - <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>
  */
 export class SqmRewardExchangeList {
   constructor() {

package/dist/collection/components/sqm-share-button/sqm-share-button.js

@@ -8,9 +8,16 @@ import deepmerge from "deepmerge";
 /**
  * @uiName Share Button
  * @uiOrder ["medium", "program-id", "*", "pill", "disabled", "hideicon"]
- * @example SMS hare Button - <sqm-share-button medium="sms">Text a friend</sqm-share-button>
- * @example Email Share Button - <sqm-share-button medium="email">Share via email</sqm-share-button>
- * @example Linkedin Share Button - <sqm-share-button medium="linkedin">Share on LinkedIn</sqm-share-button>
+ * @example Facebook Share Button - <sqm-share-button medium="facebook">Share on Facebook</sqm-share-button>
+ * @example Twitter Share Button - <sqm-share-button medium="twitter">Share via Tweet</sqm-share-button>
+ * @example Email Share Button - <sqm-share-button medium="email">Share via Email</sqm-share-button>
+ * @example Web Share Sheet Share Button - <sqm-share-button medium="direct">Share</sqm-share-button>
+ * @example LinkedIn Share Button - <sqm-share-button medium="linkedin">Share on LinkedIn</sqm-share-button>
+ * @example SMS Share Button - <sqm-share-button medium="sms">Text a friend</sqm-share-button>
+ * @example Facebook Messenger Share Button - <sqm-share-button medium="fbmessenger">Share via Messenger</sqm-share-button>
+ * @example WhatsApp Share Button - <sqm-share-button medium="whatsapp">Share via WhatsApp</sqm-share-button>
+ * @example Line Messenger Share Button - <sqm-share-button medium="linemessenger">Share via Line Messenger</sqm-share-button>
+ * @example Pinterest Share Button - <sqm-share-button medium="pinterest">Share on Pinterest</sqm-share-button>
  */
 export class ShareButton {
   constructor() {

package/dist/collection/components/sqm-share-code/sqm-share-code.js

@@ -7,6 +7,7 @@ import { useShareCode } from "./useShareCode";
 import deepmerge from "deepmerge";
 /**
  * @uiName Share Code
+ * @example Share Code - <sqm-share-code tooltip-text="Copied to Clipboard" tooltip-lifespan="1000"></sqm-share-code>
  */
 export class ShareCode {
   constructor() {

package/dist/collection/components/sqm-share-link/sqm-share-link.js

@@ -7,6 +7,7 @@ import { getProps } from "../../utils/utils";
 import deepmerge from "deepmerge";
 /**
  * @uiName Share Link
+ * @example Share Link - <sqm-share-link tooltip-text="Copied to Clipboard" tooltip-lifespan="1000"></sqm-share-link>
  */
 export class ShareLink {
   constructor() {

package/dist/collection/components/sqm-stat-container/sqm-stat-container.js

@@ -4,6 +4,7 @@ import { StatContainerView } from "./sqm-stat-container-view";
 import { getProps } from "../../utils/utils";
 /**
  * @uiName Stat Container
+ * @slots [{"name":"","title":"Stats"}]
  */
 export class StatContainer {
   constructor() {

package/dist/collection/components/sqm-timeline/sqm-timeline-entry.js

@@ -6,6 +6,7 @@ import { TimelineEntryView } from "./sqm-timeline-entry-view";
 /**
  * @uiName Timeline Entry
  * @validParents ["sqm-timeline"]
+ * @example Timeline Entry - <sqm-timeline-entry reward="$50" unit="visa giftcard" desc="You refer a friend" icon="circle" > </sqm-timeline-entry>
  */
 export class TimelineReward {
   constructor() {

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

@@ -2,8 +2,10 @@ import { withHooks } from "@saasquatch/stencil-hooks";
 import { Component, h, Prop, State } from "@stencil/core";
 import { useChildElements } from "../../tables/useChildElements";
 /**
- * @uiName Timeline
- */
+ * @uiName Program Timeline
+ * @slots [{"name":"","title":"Timeline","validChildren":["sqm-timeline-entry"]}]
+ * @examples Program Timeline - <sqm-timeline icon="circle"> <sqm-timeline-entry reward="$50" unit="visa giftcard" desc="You refer a friend" icon="circle" > </sqm-timeline-entry> <sqm-timeline-entry reward="$200" unit="visa giftcard" desc="Our sales team qualifies your friend as a good fit for our Enterprise plan" icon="circle" > </sqm-timeline-entry> <sqm-timeline-entry reward="$1000" unit="visa giftcard" desc="Your friend purchases an Enterprise plan" icon="circle" > </sqm-timeline-entry></sqm-timeline>
+*/
 export class Timeline {
   constructor() {
     this.ignored = true;

package/dist/types/components/sqm-big-stat/sqm-big-stat.d.ts

@@ -3,7 +3,7 @@ import { DemoData } from "../../global/demo";
 /**
  *
  * @uiName Big Stat
- * @slot the description of the component
+ * @slots [{"name":"","title":"Stat Text"}]
  * @example Points Balance -  <sqm-big-stat flex-reverse="true" alignment="left" stat-type="/rewardBalance/CREDIT/POINT/value/global">Points Balance</sqm-big-stat>
  * @example GiftCards Earned - <sqm-big-stat flex-reverse="true" alignment="left" stat-type="/integrationRewardsCountFiltered/AVAILABLE/global">Giftcards Earned</sqm-big-stat>
  * @example Referrals - <sqm-big-stat flex-reverse="true" alignment="left" stat-type="/referralsCount">Referrals</sqm-big-stat>

package/dist/types/components/sqm-brand/sqm-brand.d.ts

@@ -1,7 +1,7 @@
 /**
  *
  * @uiName Brand Container
- * @slot Controls the brand color and font of Mint Components wrapped by the container.
+ * @slots [{"name":"","title":"Branded Content"}]
  */
 export declare class BrandComponent {
   /**

package/dist/types/components/sqm-card-feed/sqm-card-feed.d.ts

@@ -1,5 +1,6 @@
 /**
  * @uiName Card Feed
+ * @slots [{"name":"","title":"Cards"}]
  */
 export declare class CardFeed {
   ignored: boolean;

package/dist/types/components/sqm-portal-container/sqm-portal-container.d.ts

@@ -1,6 +1,7 @@
 import { Spacing } from "../../global/mixins";
 /**
  * @uiName Portal Container
+ * @slots [{"name":"","title":"Widget Content"}]
  */
 export declare class PortalContainer {
   ignored: boolean;

package/dist/types/components/sqm-referral-card/sqm-referral-card.d.ts

@@ -1,6 +1,7 @@
 /**
  * @uiName Referral Card
- * @example Card with Timeline and Sharing - <sqm-referral-card><sqm-portal-container gap="large" slot="left"><sqm-text>Get rewarded when your friend uses Klip </sqm-text><sqm-timeline icon="circle"><sqm-timeline-entry reward="75" unit="points" desc="Your friends signs up for a free trial"></sqm-timeline-entry><sqm-timeline-entry reward="$50" unit="visa giftcard" desc="Your friends signs up for Klip Business"></sqm-timeline-entry><sqm-timeline-entry reward="$200" unit="visa giftcard" desc="Your friend qualifies as a good fit for Klip Enterprise"></sqm-timeline-entry><sqm-timeline-entry reward="$1000" unit="visa giftcard" desc="Your friend purchases Klip Enterprise"></sqm-timeline-entry></sqm-timeline></sqm-portal-container><sqm-portal-container gap="large" slot="right"><sqm-text>Choose how you want to share: </sqm-text><sqm-text><sub>Your unique referral link:</sub><sqm-share-link> </sqm-share-link></sqm-text><sqm-portal-container gap="x-small"><sqm-share-button medium="email">Share via email</sqm-share-button><sqm-share-button medium="linkedin">Share on LinkedIn</sqm-share-button><sqm-share-button medium="twitter">Tweet about us</sqm-share-button><sqm-share-button medium="sms">Text a friend</sqm-share-button></sqm-portal-container></sqm-portal-container></sqm-referral-card>
+ * @slots [{"name":"left","title":"Left Content"},{"name":"right","title":"Right Content"}]
+ * @example Referral Card - <sqm-referral-card vertical-alignment="start"> <sqm-portal-container gap="large" slot="left" direction="column" display="grid" max-width="100%" padding="none" > <sqm-text >They’ll get a $50 credit towards a new account and you’ll get: </sqm-text> <sqm-timeline icon="circle"> <sqm-timeline-entry reward="$50" unit="visa giftcard" desc="Your friend purchases a Business plan" icon="circle" > </sqm-timeline-entry> <sqm-timeline-entry reward="$200" unit="visa giftcard" desc="Our sales team qualifies your friend as a good fit for our Enterprise plan" icon="circle" > </sqm-timeline-entry> <sqm-timeline-entry reward="$1000" unit="visa giftcard" desc="Your friend purchases an Enterprise plan" icon="circle" > </sqm-timeline-entry> </sqm-timeline> </sqm-portal-container> <sqm-portal-container gap="large" slot="right" direction="column" display="grid" max-width="100%" padding="none" > <sqm-text>Choose how you want to share: </sqm-text> <sqm-text> <sub>Your unique referral link:</sub> <sqm-share-link tooltip-text="Copied to Clipboard" tooltip-lifespan="1000" > </sqm-share-link> </sqm-text> <sqm-portal-container gap="x-small" direction="column" display="grid" max-width="100%" padding="none" > <sqm-share-button medium="email" icon-slot="prefix" size="medium" type="default" > Share via email </sqm-share-button> <sqm-share-button medium="linkedin" icon-slot="prefix" size="medium" type="default" > Share on LinkedIn </sqm-share-button> <sqm-share-button medium="twitter" icon-slot="prefix" size="medium" type="default" > Share on Twitter </sqm-share-button> </sqm-portal-container> </sqm-portal-container> </sqm-referral-card>
  */
 export declare class ReferralCard {
   ignored: boolean;

package/dist/types/components/sqm-reward-exchange-list/sqm-reward-exchange-list.d.ts

@@ -2,6 +2,7 @@ import { RewardExchangeViewProps } from "./sqm-reward-exchange-list-view";
 import { DemoData } from "../../global/demo";
 /**
  * @uiName Reward Exchange
+ * @example Reward Exchange - <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>
  */
 export declare class SqmRewardExchangeList {
   ignored: boolean;

package/dist/types/components/sqm-share-button/sqm-share-button.d.ts

@@ -3,9 +3,16 @@ import { DemoData } from "../../global/demo";
 /**
  * @uiName Share Button
  * @uiOrder ["medium", "program-id", "*", "pill", "disabled", "hideicon"]
- * @example SMS hare Button - <sqm-share-button medium="sms">Text a friend</sqm-share-button>
- * @example Email Share Button - <sqm-share-button medium="email">Share via email</sqm-share-button>
- * @example Linkedin Share Button - <sqm-share-button medium="linkedin">Share on LinkedIn</sqm-share-button>
+ * @example Facebook Share Button - <sqm-share-button medium="facebook">Share on Facebook</sqm-share-button>
+ * @example Twitter Share Button - <sqm-share-button medium="twitter">Share via Tweet</sqm-share-button>
+ * @example Email Share Button - <sqm-share-button medium="email">Share via Email</sqm-share-button>
+ * @example Web Share Sheet Share Button - <sqm-share-button medium="direct">Share</sqm-share-button>
+ * @example LinkedIn Share Button - <sqm-share-button medium="linkedin">Share on LinkedIn</sqm-share-button>
+ * @example SMS Share Button - <sqm-share-button medium="sms">Text a friend</sqm-share-button>
+ * @example Facebook Messenger Share Button - <sqm-share-button medium="fbmessenger">Share via Messenger</sqm-share-button>
+ * @example WhatsApp Share Button - <sqm-share-button medium="whatsapp">Share via WhatsApp</sqm-share-button>
+ * @example Line Messenger Share Button - <sqm-share-button medium="linemessenger">Share via Line Messenger</sqm-share-button>
+ * @example Pinterest Share Button - <sqm-share-button medium="pinterest">Share on Pinterest</sqm-share-button>
  */
 export declare class ShareButton {
   /**

package/dist/types/components/sqm-share-code/sqm-share-code.d.ts

@@ -2,6 +2,7 @@ import { ShareLinkViewProps } from "../sqm-share-link/sqm-share-link-view";
 import { DemoData } from "../../global/demo";
 /**
  * @uiName Share Code
+ * @example Share Code - <sqm-share-code tooltip-text="Copied to Clipboard" tooltip-lifespan="1000"></sqm-share-code>
  */
 export declare class ShareCode {
   /**

package/dist/types/components/sqm-share-link/sqm-share-link.d.ts

@@ -2,6 +2,7 @@ import { ShareLinkViewProps } from "./sqm-share-link-view";
 import { DemoData } from "../../global/demo";
 /**
  * @uiName Share Link
+ * @example Share Link - <sqm-share-link tooltip-text="Copied to Clipboard" tooltip-lifespan="1000"></sqm-share-link>
  */
 export declare class ShareLink {
   /**

package/dist/types/components/sqm-stat-container/sqm-stat-container.d.ts

@@ -1,6 +1,7 @@
 import { Spacing } from "../../global/mixins";
 /**
  * @uiName Stat Container
+ * @slots [{"name":"","title":"Stats"}]
  */
 export declare class StatContainer {
   ignored: boolean;

package/dist/types/components/sqm-timeline/sqm-timeline-entry.d.ts

@@ -1,6 +1,7 @@
 /**
  * @uiName Timeline Entry
  * @validParents ["sqm-timeline"]
+ * @example Timeline Entry - <sqm-timeline-entry reward="$50" unit="visa giftcard" desc="You refer a friend" icon="circle" > </sqm-timeline-entry>
  */
 export declare class TimelineReward {
   ignored: boolean;

package/dist/types/components/sqm-timeline/sqm-timeline.d.ts

@@ -1,6 +1,8 @@
 /**
- * @uiName Timeline
- */
+ * @uiName Program Timeline
+ * @slots [{"name":"","title":"Timeline","validChildren":["sqm-timeline-entry"]}]
+ * @examples Program Timeline - <sqm-timeline icon="circle"> <sqm-timeline-entry reward="$50" unit="visa giftcard" desc="You refer a friend" icon="circle" > </sqm-timeline-entry> <sqm-timeline-entry reward="$200" unit="visa giftcard" desc="Our sales team qualifies your friend as a good fit for our Enterprise plan" icon="circle" > </sqm-timeline-entry> <sqm-timeline-entry reward="$1000" unit="visa giftcard" desc="Your friend purchases an Enterprise plan" icon="circle" > </sqm-timeline-entry></sqm-timeline>
+*/
 export declare class Timeline {
   ignored: boolean;
   /**