@saasquatch/mint-components 2.1.10-57 → 2.1.10

package/dist/esm/sqm-stencilbook.entry.js

@@ -8,9 +8,9 @@ import { c as createStyleSheet } from './JSS-67b5cff8.js';
 import './useReferralCodes-52ca720f.js';
 import './mixins-f750863a.js';
 import { C as CopyTextView } from './copy-text-view-87259b11.js';
-import './sqm-text-span-view-738acfb3.js';
-import { b as PortalRegisterView, P as PortalForgotPasswordView, a as PortalLoginView, c as PortalVerifyEmailView } from './sqm-portal-verify-email-view-1a638fae.js';
-import { P as PortalRegistrationFormView } from './sqm-portal-registration-form-view-2f4936ef.js';
+import './sqm-text-span-view-72f43dff.js';
+import { b as PortalRegisterView, P as PortalForgotPasswordView, a as PortalLoginView, c as PortalVerifyEmailView } from './sqm-portal-verify-email-view-c61536b7.js';
+import { P as PortalRegistrationFormView } from './sqm-portal-registration-form-view-79265df5.js';
 import { G as GenericTableView } from './GenericTableView-8c72ac30.js';
 import './useChildElements-9bccfb72.js';
 import { l as luxon } from './luxon-1be92a8e.js';
@@ -23,14 +23,14 @@ import { L as LeaderboardRankView } from './sqm-leaderboard-rank-view-7a682cc3.j
 import { L as LogoutCurrentUserView } from './sqm-logout-current-user-view-376c1bf6.js';
 import { N as NavigationSidebarView } from './sqm-navigation-sidebar-view-2b66457a.js';
 import { N as NavigationSidebarItemView } from './sqm-navigation-sidebar-item-view-b3beac5a.js';
-import { P as PortalEmailVerificationView } from './sqm-portal-email-verification-view-426370f1.js';
-import { P as PortalProfileView } from './sqm-portal-profile-view-f015fd6a.js';
+import { P as PortalEmailVerificationView } from './sqm-portal-email-verification-view-04528277.js';
+import { P as PortalProfileView } from './sqm-portal-profile-view-b5ea620f.js';
 import './utilities-77b1e0cc.js';
-import { P as PortalResetPasswordView } from './sqm-portal-reset-password-view-cfbc0eb0.js';
+import { P as PortalResetPasswordView } from './sqm-portal-reset-password-view-f84c04cf.js';
 import './ErrorView-74cb3af8.js';
 import { Q as QrCodeView } from './sqm-qr-code-view-ce476721.js';
-import { S as StatContainerView, B as BigStatView, a as ShareButtonView, P as PortalChangePasswordView, b as PoweredByImg$1, c as BaseRegistrationFormView, u as useDemoBigStat, T as TaskCardView, C as CardFeedView, d as CheckboxFieldView, e as CouponCodeView, D as DropdownFieldView, E as EditProfileView, L as LeaderboardView, H as HeroView, I as InputFieldView, N as NameFieldsView, f as ChangeMarktingView, g as PortalFooterView, h as PortalFrameView, R as ReferralIframeView, i as RewardExchangeView, r as rewardExchangeCustomErrorMsg, j as rewardExchangeLongText, k as rewardExchangeSelected, l as chooseAmountFixed, m as chooseAmountFixedNoDescription, n as chooseAmountVariable, o as chooseAmountVariableNoDescription, p as chooseAmountVariableDisabled, q as chooseAmountVariableUnavailable, s as confirmFixed, t as confirmVariable, v as redemptionError, w as queryError, x as success, y as successVariable, z as loading, A as empty$1, F as rewardExchange, G as useShareButton, J as useShareLink, K as ProgressBarView, M as ProgressBar$2, O as LeadFormView, Q as LeadDropdownFieldView, U as ShadowViewAddon } from './ShadowViewAddon-47f1e579.js';
-import { P as PortalContainerView, a as PortalSectionView } from './sqm-portal-container-view-a8c708cd.js';
+import { S as StatContainerView, B as BigStatView, a as ShareButtonView, P as PortalChangePasswordView, b as PoweredByImg$1, c as BaseRegistrationFormView, u as useDemoBigStat, T as TaskCardView, C as CardFeedView, d as CheckboxFieldView, e as CouponCodeView, D as DropdownFieldView, E as EditProfileView, L as LeaderboardView, H as HeroView, I as InputFieldView, N as NameFieldsView, f as ChangeMarktingView, g as PortalFooterView, h as PortalFrameView, R as ReferralIframeView, i as RewardExchangeView, r as rewardExchangeCustomErrorMsg, j as rewardExchangeLongText, k as rewardExchangeSelected, l as chooseAmountFixed, m as chooseAmountFixedNoDescription, n as chooseAmountVariable, o as chooseAmountVariableNoDescription, p as chooseAmountVariableDisabled, q as chooseAmountVariableUnavailable, s as confirmFixed, t as confirmVariable, v as redemptionError, w as queryError, x as success, y as successVariable, z as loading, A as empty$1, F as rewardExchange, G as useShareButton, J as ShareLinkView, K as useShareLink, M as ProgressBarView, O as ProgressBar$2, Q as LeadFormView, U as LeadDropdownFieldView, V as ShadowViewAddon } from './ShadowViewAddon-33f1a8f7.js';
+import { P as PortalContainerView, a as PortalSectionView } from './sqm-portal-container-view-200c9df8.js';
 import { I as InvoiceTableView, a as INDIRECT_TAX_SPAIN_REGIONS, b as INDIRECT_TAX_PROVINCES, O as OtherRegionSlotView, U as UserInfoFormView$1 } from './sqm-user-info-form-view-19d81a2b.js';
 import { t as taxTypeToName, L as LoadingView } from './data-12e6aae1.js';
 import { L as LeadInputFieldView } from './sqm-lead-input-field-view-d1b91650.js';
@@ -14051,21 +14051,145 @@ const CustomStyles$1 = () => {
   return h(CopyTextView, Object.assign({}, props));
 };
 const CustomStylesWithDemoHooks = () => {
-  const props = {
-    copyString: "https://noah.example.com",
-    open: false,
-    tooltiptext: "Copied!",
-    backgroundColor: "#1ed760",
-    borderRadius: "30px",
-    textColor: "red",
-    buttonType: "primary",
-    borderColor: "#121212",
-  };
-  return (h("sqm-share-link", { demoData: { ...props }, backgroundColor: "#1ed760" }));
+  return (h("sqm-share-link", { demoData: {
+      copyTextViewProps: {
+        copyString: "https://noah.example.com",
+        open: false,
+        tooltiptext: "Copied!",
+        backgroundColor: "#1ed760",
+        borderRadius: "30px",
+        textColor: "red",
+        buttonType: "primary",
+        borderColor: "#121212",
+      },
+    }, backgroundColor: "#1ed760" }));
 };
 const FullStack = () => {
   return h("sqm-share-link", null);
 };
+// Customize URL stories
+const noopFn = () => { };
+const defaultCustomizeProps = {
+  copyTextViewProps: {
+    copyString: "https://ssqt.co/abc123",
+    open: false,
+    tooltiptext: "Copied!",
+  },
+  allowCustomization: true,
+  customizeLinkLabel: "Customize Link",
+  saveLabelText: "Save",
+  savingLabelText: "Saving...",
+  cancelLabelText: "Cancel",
+  editLabelText: "Edit your link",
+  charactersRemainingText: "{count} characters remaining",
+  validatingLabelText: "Validating...",
+  isEditing: false,
+  editValue: "",
+  domainPrefix: "https://ssqt.co/",
+  editsRemaining: 3,
+  maxEdits: 5,
+  limitReached: false,
+  validationError: null,
+  isValidating: false,
+  isSaving: false,
+  characterLimit: 15,
+  minCharacters: 3,
+  charactersRemaining: 15,
+  editLimitText: "You can edit your link up to 5 times.",
+  editLimitReachedText: "5 edit limit reached. To make more changes, please contact {supportLink}.",
+  supportLinkText: "Support",
+  customizeDisabled: false,
+  customizeDisabledTooltip: "Link customization is not available.",
+  minCharactersText: "Minimum 3 characters",
+  onCustomizeClick: noopFn,
+  onEditValueChange: noopFn,
+  onSave: noopFn,
+  onCancel: noopFn,
+};
+const CustomizeUrlDefault = () => {
+  return h(ShareLinkView, Object.assign({}, defaultCustomizeProps));
+};
+const CustomizeUrlEditing = () => {
+  return (h(ShareLinkView, Object.assign({}, {
+    ...defaultCustomizeProps,
+    isEditing: true,
+    editValue: "nvoiwb18",
+    charactersRemaining: 7,
+  })));
+};
+const CustomizeUrlCustomized = () => {
+  return (h(ShareLinkView, Object.assign({}, {
+    ...defaultCustomizeProps,
+    copyTextViewProps: {
+      ...defaultCustomizeProps.copyTextViewProps,
+      copyString: "https://ssqt.co/bobtesterson",
+    },
+  })));
+};
+const CustomizeUrlLimitReached = () => {
+  return (h(ShareLinkView, Object.assign({}, {
+    ...defaultCustomizeProps,
+    copyTextViewProps: {
+      ...defaultCustomizeProps.copyTextViewProps,
+      copyString: "https://ssqt.co/bobtesterson",
+    },
+    editsRemaining: 0,
+    limitReached: true,
+  })));
+};
+const CustomizeUrlDisabled = () => {
+  return (h(ShareLinkView, Object.assign({}, {
+    ...defaultCustomizeProps,
+    customizeDisabled: true,
+  })));
+};
+const CustomizeUrlValidationError = () => {
+  return (h(ShareLinkView, Object.assign({}, {
+    ...defaultCustomizeProps,
+    isEditing: true,
+    editValue: "nvoiwb18",
+    charactersRemaining: 7,
+    validationError: {
+      code: "EXISTING_CODE_CONFLICT",
+      title: "This link is already taken",
+      description: "Try adding numbers, a dash or underscore to create a unique link.",
+    },
+  })));
+};
+const CustomizeUrlInvalidCharacters = () => {
+  return (h(ShareLinkView, Object.assign({}, {
+    ...defaultCustomizeProps,
+    isEditing: true,
+    editValue: "nvoiwb18",
+    charactersRemaining: 7,
+    validationError: {
+      code: "INVALID_CHARACTER",
+      title: "Please use only letters, numbers, dashes and underscores",
+      description: "Special characters can break the link when sharing.",
+    },
+  })));
+};
+const CustomizeUrlProfanity = () => {
+  return (h(ShareLinkView, Object.assign({}, {
+    ...defaultCustomizeProps,
+    isEditing: true,
+    editValue: "nvoiwb18",
+    charactersRemaining: 7,
+    validationError: {
+      code: "BLOCKED_WORD",
+      title: "Please try a different link",
+      description: "This link contains a restricted word.",
+    },
+  })));
+};
+const CustomizeUrlSaving = () => {
+  return (h(ShareLinkView, Object.assign({}, {
+    ...defaultCustomizeProps,
+    isEditing: true,
+    editValue: "bobtesterson",
+    isSaving: true,
+  })));
+};
 
 const ShareLink = /*#__PURE__*/Object.freeze({
   __proto__: null,
@@ -14080,7 +14204,16 @@ const ShareLink = /*#__PURE__*/Object.freeze({
   CopyButtonBelow: CopyButtonBelow$3,
   CustomStyles: CustomStyles$1,
   CustomStylesWithDemoHooks: CustomStylesWithDemoHooks,
-  FullStack: FullStack
+  FullStack: FullStack,
+  CustomizeUrlDefault: CustomizeUrlDefault,
+  CustomizeUrlEditing: CustomizeUrlEditing,
+  CustomizeUrlCustomized: CustomizeUrlCustomized,
+  CustomizeUrlLimitReached: CustomizeUrlLimitReached,
+  CustomizeUrlDisabled: CustomizeUrlDisabled,
+  CustomizeUrlValidationError: CustomizeUrlValidationError,
+  CustomizeUrlInvalidCharacters: CustomizeUrlInvalidCharacters,
+  CustomizeUrlProfanity: CustomizeUrlProfanity,
+  CustomizeUrlSaving: CustomizeUrlSaving
 });
 
 const UseShareLink_stories = {
@@ -14118,11 +14251,11 @@ const BareBonesView$1 = createHookStory(() => {
   return (h("div", null,
     "Sharelink:",
     " ",
-    h("code", { style: { borderStyle: "solid", borderWidth: "1px", padding: "2px" } }, res.copyString)));
+    h("code", { style: { borderStyle: "solid", borderWidth: "1px", padding: "2px" } }, res.copyTextViewProps.copyString)));
 });
 const RegularView$2 = createHookStory(() => {
   setupGraphQL$c();
-  return (h(CopyTextView, Object.assign({}, useShareLink({
+  return (h(ShareLinkView, Object.assign({}, useShareLink({
     programId: "klip-referral-program",
     tooltiptext: "Copied to clipboard",
     tooltiplifespan: 1000,
@@ -14130,19 +14263,29 @@ const RegularView$2 = createHookStory(() => {
 });
 const FastTooltip = createHookStory(() => {
   setupGraphQL$c();
-  return (h(CopyTextView, Object.assign({}, useShareLink({
+  return (h(ShareLinkView, Object.assign({}, useShareLink({
     programId: "klip-referral-program",
-    tooltiptext: "⠀⠀⠀⠀⠀⠀⠀⠀⠀HELLO THERE!!!\n⠀⠀⠀⡯⡯⡾⠝⠘⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢊⠘⡮⣣⠪⠢⡑⡌\n⠀⠀⠀⠟⠝⠈⠀⠀⠀⠡⠀⠠⢈⠠⢐⢠⢂⢔⣐⢄⡂⢔⠀⡁⢉⠸⢨⢑⠕⡌\n⠀⠀⡀⠁⠀⠀⠀⡀⢂⠡⠈⡔⣕⢮⣳⢯⣿⣻⣟⣯⣯⢷⣫⣆⡂⠀⠀⢐⠑⡌\n⢀⠠⠐⠈⠀⢀⢂⠢⡂⠕⡁⣝⢮⣳⢽⡽⣾⣻⣿⣯⡯⣟⣞⢾⢜⢆⠀⡀⠀⠪\n⣬⠂⠀⠀⢀⢂⢪⠨⢂⠥⣺⡪⣗⢗⣽⢽⡯⣿⣽⣷⢿⡽⡾⡽⣝⢎⠀⠀⠀⢡\n⣿⠀⠀⠀⢂⠢⢂⢥⢱⡹⣪⢞⡵⣻⡪⡯⡯⣟⡾⣿⣻⡽⣯⡻⣪⠧⠑⠀⠁⢐\n⣿⠀⠀⠀⠢⢑⠠⠑⠕⡝⡎⡗⡝⡎⣞⢽⡹⣕⢯⢻⠹⡹⢚⠝⡷⡽⡨⠀⠀⢔\n⣿⡯⠀⢈⠈⢄⠂⠂⠐⠀⠌⠠⢑⠱⡱⡱⡑⢔⠁⠀⡀⠐⠐⠐⡡⡹⣪⠀⠀⢘\n⣿⣽⠀⡀⡊⠀⠐⠨⠈⡁⠂⢈⠠⡱⡽⣷⡑⠁⠠⠑⠀⢉⢇⣤⢘⣪⢽⠀⢌⢎\n⣿⢾⠀⢌⠌⠀⡁⠢⠂⠐⡀⠀⢀⢳⢽⣽⡺⣨⢄⣑⢉⢃⢭⡲⣕⡭⣹⠠⢐⢗\n⣿⡗⠀⠢⠡⡱⡸⣔⢵⢱⢸⠈⠀⡪⣳⣳⢹⢜⡵⣱⢱⡱⣳⡹⣵⣻⢔⢅⢬⡷\n⣷⡇⡂⠡⡑⢕⢕⠕⡑⠡⢂⢊⢐⢕⡝⡮⡧⡳⣝⢴⡐⣁⠃⡫⡒⣕⢏⡮⣷⡟\n⣷⣻⣅⠑⢌⠢⠁⢐⠠⠑⡐⠐⠌⡪⠮⡫⠪⡪⡪⣺⢸⠰⠡⠠⠐⢱⠨⡪⡪⡰\n⣯⢷⣟⣇⡂⡂⡌⡀⠀⠁⡂⠅⠂⠀⡑⡄⢇⠇⢝⡨⡠⡁⢐⠠⢀⢪⡐⡜⡪⡊\n⣿⢽⡾⢹⡄⠕⡅⢇⠂⠑⣴⡬⣬⣬⣆⢮⣦⣷⣵⣷⡗⢃⢮⠱⡸⢰⢱⢸⢨⢌\n⣯⢯⣟⠸⣳⡅⠜⠔⡌⡐⠈⠻⠟⣿⢿⣿⣿⠿⡻⣃⠢⣱⡳⡱⡩⢢⠣⡃⠢⠁\n⡯⣟⣞⡇⡿⣽⡪⡘⡰⠨⢐⢀⠢⢢⢄⢤⣰⠼⡾⢕⢕⡵⣝⠎⢌⢪⠪⡘⡌⠀\n⡯⣳⠯⠚⢊⠡⡂⢂⠨⠊⠔⡑⠬⡸⣘⢬⢪⣪⡺⡼⣕⢯⢞⢕⢝⠎⢻⢼⣀⠀\n⠁⡂⠔⡁⡢⠣⢀⠢⠀⠅⠱⡐⡱⡘⡔⡕⡕⣲⡹⣎⡮⡏⡑⢜⢼⡱⢩⣗⣯⣟\n⢀⢂⢑⠀⡂⡃⠅⠊⢄⢑⠠⠑⢕⢕⢝⢮⢺⢕⢟⢮⢊⢢⢱⢄⠃⣇⣞⢞⣞⢾\n⢀⠢⡑⡀⢂⢊⠠⠁⡂⡐⠀⠅⡈⠪⠪⠪⠣⠫⠑⡁⢔⠕⣜⣜⢦⡰⡎⡯⡾⡽",
+    tooltiptext: "Copied to clipboard",
     tooltiplifespan: 500,
   }))));
 });
+const CustomizeUrlEnabled = createHookStory(() => {
+  setupGraphQL$c();
+  return (h(ShareLinkView, Object.assign({}, useShareLink({
+    programId: "klip-referral-program",
+    tooltiptext: "Copied to clipboard",
+    tooltiplifespan: 1000,
+    allowCustomization: true,
+  }))));
+});
 
 const UseShareLink = /*#__PURE__*/Object.freeze({
   __proto__: null,
   'default': UseShareLink_stories,
   BareBonesView: BareBonesView$1,
   RegularView: RegularView$2,
-  FastTooltip: FastTooltip
+  FastTooltip: FastTooltip,
+  CustomizeUrlEnabled: CustomizeUrlEnabled
 });
 
 const scenario$C = "@author:Zach\n@owner:Zach\nFeature: Tabs\n\n  The Tabs takes in the Tab component as children and maps through to display their header and content.\n\n  Background: A user on the portal is viewing the widget\n    Given a user viewing the Tabs component\n\n  @motivating\n  Scenario: Content inside the active tab is shown\n    Given the header is set to <tabHeader>\n    And the content inside is <tabContent>\n    And the user has clicked <tabHeader>\n    Then the <tabContent> is shown\n    Examples:\n      | tabHeader | tabContent               |\n      | Settings  | This is the settings tab |\n      | General   | This is the general tab  |\n      | History   | This is the history tab  |\n\n  @motivating\n  @ui\n  Scenario: The placement of the tabs is configurable\n    Given The placement prop has been passed a valid <placement>\n    Then tabs are placed on the <placementResult>\n    Examples:\n      | placement | placementResult                |\n      |           | top of the content             |\n      | left      | left hand side of the content  |\n      | right     | right hand side of the content |\n      | bottom    | bottom of the content          |\n\n\n  @minutia\n  @ui\n  Scenario Outline: Tabs are setup to use the brand color\n    Given the brand color is set to darkblue\n    Then the text inside the active tab is darkblue\n    And the underline of the active tab is darkblue\n\n  @ui\n  Scenario: Tabs are responsive\n    Given the user is on a mobile device\n    When there are more tabs than the horizontal space allows for\n    Then clickable arrows appear on the left and right of the tabs\n    And the tabs are scrollable\n\n  @landmine\n  Scenario: Program section cannot be used inside of tabs\n    Given a tabs component\n    And tab containing a program section with program-id \"test123\"\n    And the program section wraps a component using program context\n    When the tabs component is rendered\n    Then the \"sq:program-id\" event listener for the program section is removed\n    And the component does not use program-id \"test123\" to source its data\n    And falls back to the global program id";
@@ -18697,39 +18840,6 @@ const UserInfoFormView = /*#__PURE__*/Object.freeze({
   DisabledForm: DisabledForm
 });
 
-const UserAttribute_stories = {
-  title: "Components/User Attribute",
-};
-const Default$x = () => {
-  return (h("sqm-user-attribute", { demoData: {
-      loading: false,
-      value: "impact.com",
-    } }));
-};
-const Loading$h = () => {
-  return (h("sqm-user-attribute", { demoData: {
-      loading: true,
-      value: "impact.com",
-    } }));
-};
-const WithCustomStyles = () => {
-  return (h("sqm-user-attribute", { demoData: {
-      loading: false,
-      value: "impact.com",
-      fontSize: 24,
-      color: "#4CAF50",
-      fontWeight: 700,
-    } }));
-};
-
-const UserAttribute = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  'default': UserAttribute_stories,
-  Default: Default$x,
-  Loading: Loading$h,
-  WithCustomStyles: WithCustomStyles
-});
-
 function deepFreeze(obj) {
     if (obj instanceof Map) {
         obj.clear = obj.delete = obj.set = function () {
@@ -21423,7 +21533,6 @@ const stories = [
   TaxAndCashRewardsTable,
   TaxAndCashReferralTableRewardsCell,
   TaxAndCashReferralTable$1,
-  UserAttribute,
 ];
 const StencilStorybook = class {
   constructor(hostRef) {

package/dist/esm/{sqm-text-span-view-738acfb3.js → sqm-text-span-view-72f43dff.js}

@@ -51,7 +51,7 @@ function TextSpanView(props, children) {
       display: inline;
     }
   `;
-  return (h("span", { class: sheet.classes[type], part: "sqm-base" },
+  return (h("span", { class: sheet.classes[type], part: "sqm-text-span" },
     h("style", { type: "text/css" },
       vanillaStyle,
       styleString),

package/dist/esm/sqm-text-span.entry.js

@@ -1,7 +1,7 @@
 import { r as registerInstance, h as h$1 } from './index-38ad4957.js';
 import { n as h } from './dom-context-hooks.module-50442785.js';
 import './JSS-67b5cff8.js';
-import { T as TextSpanView } from './sqm-text-span-view-738acfb3.js';
+import { T as TextSpanView } from './sqm-text-span-view-72f43dff.js';
 
 const TextSpan = class {
   constructor(hostRef) {