@saasquatch/mint-components 2.5.1-1 → 2.5.1-3

package/dist/cjs/sqm-big-stat_47.cjs.entry.js

@@ -8697,6 +8697,9 @@ const WidgetVerification = class {
         if (((_a = e.target) === null || _a === void 0 ? void 0 : _a.tagName) === "SL-DIALOG") {
           e.preventDefault();
         }
+      }, "onSl-initial-focus": (e) => {
+        var _a;
+        (_a = props.onInitialFocus) === null || _a === void 0 ? void 0 : _a.call(props, e);
       } }, index.h("h2", { class: sheet$3.classes.DialogTitle }, dialogLabel), renderStepContent())));
   }
 };
@@ -8722,6 +8725,7 @@ function useDemoWidgetVerificationInternal(props) {
     showPartnerModal: false,
     onVerification,
     onPartnerModalComplete: () => { },
+    onInitialFocus: (e) => e.preventDefault(),
     loading: false,
   }, formatted || {}, { arrayMerge: (_, a) => a });
 }

package/dist/cjs/sqm-pagination_3.cjs.entry.js

@@ -21,6 +21,9 @@ const style = {
     gap: "var(--sl-spacing-small)",
     width: "100%",
   },
+  SkeletonContainer: {
+    width: "40px",
+  },
   TextContainer: {
     display: "flex",
     gap: "var(--sl-spacing-xx-small)",
@@ -36,10 +39,11 @@ function PaginationView(props) {
     return index.h(index.Fragment, null);
   return (index.h("span", { class: sheet.classes.Container, part: "sqm-base" },
     index.h("style", { type: "text/css" }, styleString),
-    !loading && (index.h(index.Fragment, null,
-      index.h("sl-button", { exportparts: `base: ${buttonType}button-base`, onClick: onPrev, part: "sqm-pagination-button", circle: true, disabled: currentPage === 1 },
-        index.h("sl-icon", { name: "chevron-left", label: "Previous Page" })),
-      index.h("div", { class: sheet.classes.TextContainer }, text.paginationText))),
+    index.h("sl-button", { exportparts: `base: ${buttonType}button-base`, onClick: onPrev, part: "sqm-pagination-button", circle: true, disabled: currentPage === 1 },
+      index.h("sl-icon", { name: "chevron-left", label: "Previous Page" })),
+    !loading ? (index.h(index.Fragment, null,
+      index.h("div", { class: sheet.classes.TextContainer }, text.paginationText))) : (index.h("div", { class: sheet.classes.SkeletonContainer },
+      index.h("sl-skeleton", { height: "16px", width: "50%" }))),
     index.h("sl-button", { exportparts: `base: ${buttonType}button-base`, onClick: onNext, part: "sqm-pagination-button", circle: true, disabled: currentPage === totalPages },
       index.h("sl-icon", { name: "chevron-right", label: "Previous Page" }))));
 }
@@ -316,6 +320,16 @@ function ReferralCodesView(props) {
       justifyContent: "center",
       flexDirection: "column",
     },
+    SkeletonContainer: {
+      display: "flex",
+      flexDirection: "column",
+      gap: "var(--sl-spacing-small)",
+      width: "100%",
+    },
+    SkeletonOne: {
+      height: "36px",
+      width: "100%",
+    },
     TitleText: {
       fontSize: "var(--sl-font-size-large)",
       margin: "0",
@@ -336,7 +350,8 @@ function ReferralCodesView(props) {
       return slots.empty;
     }
     if (states.loading) {
-      return slots.loading;
+      return (index.h("div", { class: sheet.classes.SkeletonContainer },
+        index.h("sl-skeleton", { class: sheet.classes.SkeletonOne })));
     }
     return (index.h("div", { class: sheet.classes.Wrapper },
       index.h("div", { class: sheet.classes.ShareCodeContainer }, slots.shareCodes),
@@ -348,7 +363,7 @@ function ReferralCodesView(props) {
       styleString),
     index.h("div", { class: sheet.classes.HeaderContainer },
       index.h("h2", { class: sheet.classes.TitleText }, titleText),
-      !states.noCodes && !states.loading && slots.pagination),
+      !states.noCodes && slots.pagination),
     getSlotContent(states)));
 }
 
@@ -384,7 +399,6 @@ const ReferralCodes = class {
       shareCodes: index.h("slot", { name: "shareCodes" }),
       pagination: index.h("slot", { name: "pagination" }),
       empty: (index.h(EmptySlot, { headerText: this.emptyStateHeaderText, descriptionText: this.emptyStateDescriptionText, imageUrl: this.emptyStateImageUrl })),
-      loading: index.h(LoadingSlot, null),
     };
     const viewProps = {
       slots,
@@ -398,12 +412,6 @@ const ReferralCodes = class {
 function EmptySlot({ headerText, descriptionText, imageUrl, }) {
   return (index.h("slot", { name: "empty" }, index.h("sqm-empty", { emptyStateHeader: headerText, emptyStateText: descriptionText, emptyStateImage: imageUrl })));
 }
-function LoadingSlot() {
-  return (index.h("slot", { name: "loading" }, index.h(LoadingRow, null), index.h(LoadingRow, null), index.h(LoadingRow, null), index.h(LoadingRow, null)));
-}
-function LoadingRow() {
-  return index.h("sqm-skeleton", null);
-}
 function useDemoReferralCodes(props) {
   return cjs.cjs({
     titleText: props.titleText,

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

@@ -10678,6 +10678,47 @@ const Loading$8 = () => {
     shareCodes("shareCodes"),
     shareButtons("shareButtons")));
 };
+const loadingPagination = (slot) => {
+  return (index.h("sqm-pagination", { slot: slot, demoData: { states: { loading: true } } }));
+};
+const WithLoadingPagination = () => {
+  return (index.h("sqm-referral-codes", null,
+    loadingPagination("pagination"),
+    shareCodes("shareCodes"),
+    shareButtons("shareButtons")));
+};
+const TOTAL_PAGES = 5;
+const LOADING_MS = 800;
+const FunctionalPaginationDemo = () => {
+  const [currentPage, setCurrentPage] = domContextHooks_module.useState(1);
+  const [loading, setLoading] = domContextHooks_module.useState(false);
+  const goTo = (nextPage) => {
+    setLoading(true);
+    setTimeout(() => {
+      setCurrentPage(nextPage);
+      setLoading(false);
+    }, LOADING_MS);
+  };
+  const paginationSlot = (index.h("sqm-pagination", { slot: "pagination", demoData: {
+      states: {
+        currentPage,
+        totalPages: TOTAL_PAGES,
+        loading,
+      },
+      callbacks: {
+        onNext: () => goTo(currentPage + 1),
+        onPrev: () => goTo(currentPage - 1),
+      },
+      text: {
+        paginationText: `${currentPage} of ${TOTAL_PAGES}`,
+      },
+    } }));
+  return (index.h("sqm-referral-codes", { demoData: { states: { noCodes: false, loading } } },
+    paginationSlot,
+    shareCodes("shareCodes"),
+    shareButtons("shareButtons")));
+};
+const FunctionalPagination = createHookStory(FunctionalPaginationDemo);
 
 const ReferralCodes$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
@@ -10687,7 +10728,9 @@ const ReferralCodes$1 = /*#__PURE__*/Object.freeze({
   WithPreviouslyCopiedCodeAndCustomColor: WithPreviouslyCopiedCodeAndCustomColor,
   Empty: Empty$2,
   EmptyWithCustomTextAndImage: EmptyWithCustomTextAndImage,
-  Loading: Loading$8
+  Loading: Loading$8,
+  WithLoadingPagination: WithLoadingPagination,
+  FunctionalPagination: FunctionalPagination
 });
 
 const scenario$s = "@owner:sam\n@author:sam\n\nFeature: Referral Iframe\n\n\tUsed to provide an external form for submitting referral leads using the current user's referral code\n\n\tBackground: A user is logged in\n\t\tGiven there is a logged in user\n\n\t@motivating\n\tScenario: Referral code is passed to the iframe as a query parameter\n\t\tGiven the \"iframe-src\" is \"https://example.com\"\n\t\tAnd the user has navigated to \"/refer\"\n\t\tAnd the user's referral code is \"BOBBYREFER\"\n\t\tWhen the iframe content is loaded\n\t\tThen the iframe url will be \"https://example.com?rsCode=BOBBYREFER\"\n\n\t@ui\n\tScenario Outline: The height and width of the iFrame can be controlled via props\n\t\tGiven the \"iframe-src\" is \"https://example.com\"\n\t\tAnd the iframe content is 1000x1000\n\t\tAnd the \"iframe-height\" is set to <heightValue>\n\t\tAnd the \"iframe-width\" is set to <widthValue>\n\t\tThen the content of the iframe will be displayed with scrollbars\n\t\tAnd the dimension of the iFrame displayed will be 500x500\n\t\tWhen the \"iframe-height\" is set to <heightValue>\n\t\tAnd the \"iframe-width\" is set to <widthValue>\n\t\tThen the full content of the iframe will be displayed on the page\n\t\tAnd the dimension of the iFrame displayed will be 1000x1000\n\t\tExamples:\n\t\t| heightValue | widthValue |\n\t\t| 500px       | 500px      |\n\t\t| 50%         | 50%        |\n\n\t@minutia\n\tScenario Outline: The iFrame will fail fast if a iFrame source isn't provided\n\t\tGiven \"iframe-src\" <mayBeAnAttribute>\n\t\tAnd it <mayHaveValue>\n\t\tWhen a user views the referral iFrame component\n\t\tThen an alert with an error message is displayed in place of the iFrame\n\t\tAnd it has a details section\n\t\tWhen \"More details\" is clicked\n\t\tThen the following information will be displayed\n\t\t| component being used |\n\t\t| missing attribute(s) |\n\n\tExamples:\n\t\t| mayBeAnAttribute    | mayHaveValue |\n\t\t| is not an attribute | N/A          |\n\t\t| is an attribute     | \"\"           |\n\t\t| is an attribute     |              |";

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

@@ -8,6 +8,9 @@ const style = {
     gap: "var(--sl-spacing-small)",
     width: "100%",
   },
+  SkeletonContainer: {
+    width: "40px",
+  },
   TextContainer: {
     display: "flex",
     gap: "var(--sl-spacing-xx-small)",
@@ -23,10 +26,11 @@ export function PaginationView(props) {
     return h(Fragment, null);
   return (h("span", { class: sheet.classes.Container, part: "sqm-base" },
     h("style", { type: "text/css" }, styleString),
-    !loading && (h(Fragment, null,
-      h("sl-button", { exportparts: `base: ${buttonType}button-base`, onClick: onPrev, part: "sqm-pagination-button", circle: true, disabled: currentPage === 1 },
-        h("sl-icon", { name: "chevron-left", label: "Previous Page" })),
-      h("div", { class: sheet.classes.TextContainer }, text.paginationText))),
+    h("sl-button", { exportparts: `base: ${buttonType}button-base`, onClick: onPrev, part: "sqm-pagination-button", circle: true, disabled: currentPage === 1 },
+      h("sl-icon", { name: "chevron-left", label: "Previous Page" })),
+    !loading ? (h(Fragment, null,
+      h("div", { class: sheet.classes.TextContainer }, text.paginationText))) : (h("div", { class: sheet.classes.SkeletonContainer },
+      h("sl-skeleton", { height: "16px", width: "50%" }))),
     h("sl-button", { exportparts: `base: ${buttonType}button-base`, onClick: onNext, part: "sqm-pagination-button", circle: true, disabled: currentPage === totalPages },
       h("sl-icon", { name: "chevron-right", label: "Previous Page" }))));
 }

package/dist/collection/components/sqm-referral-codes/ReferralCodes.stories.js

@@ -1,5 +1,7 @@
 import { h } from "@stencil/core";
+import { useState } from "@saasquatch/stencil-hooks";
 import scenario from "./ReferralCodes.feature";
+import { createHookStory } from "../sqm-stencilbook/HookStoryAddon";
 export default {
   title: "Components/Referral Codes",
   parameters: {
@@ -69,3 +71,44 @@ export const Loading = () => {
     shareCodes("shareCodes"),
     shareButtons("shareButtons")));
 };
+const loadingPagination = (slot) => {
+  return (h("sqm-pagination", { slot: slot, demoData: { states: { loading: true } } }));
+};
+export const WithLoadingPagination = () => {
+  return (h("sqm-referral-codes", null,
+    loadingPagination("pagination"),
+    shareCodes("shareCodes"),
+    shareButtons("shareButtons")));
+};
+const TOTAL_PAGES = 5;
+const LOADING_MS = 800;
+const FunctionalPaginationDemo = () => {
+  const [currentPage, setCurrentPage] = useState(1);
+  const [loading, setLoading] = useState(false);
+  const goTo = (nextPage) => {
+    setLoading(true);
+    setTimeout(() => {
+      setCurrentPage(nextPage);
+      setLoading(false);
+    }, LOADING_MS);
+  };
+  const paginationSlot = (h("sqm-pagination", { slot: "pagination", demoData: {
+      states: {
+        currentPage,
+        totalPages: TOTAL_PAGES,
+        loading,
+      },
+      callbacks: {
+        onNext: () => goTo(currentPage + 1),
+        onPrev: () => goTo(currentPage - 1),
+      },
+      text: {
+        paginationText: `${currentPage} of ${TOTAL_PAGES}`,
+      },
+    } }));
+  return (h("sqm-referral-codes", { demoData: { states: { noCodes: false, loading } } },
+    paginationSlot,
+    shareCodes("shareCodes"),
+    shareButtons("shareButtons")));
+};
+export const FunctionalPagination = createHookStory(FunctionalPaginationDemo);

package/dist/collection/components/sqm-referral-codes/sqm-referral-codes-view.js

@@ -32,6 +32,16 @@ export function ReferralCodesView(props) {
       justifyContent: "center",
       flexDirection: "column",
     },
+    SkeletonContainer: {
+      display: "flex",
+      flexDirection: "column",
+      gap: "var(--sl-spacing-small)",
+      width: "100%",
+    },
+    SkeletonOne: {
+      height: "36px",
+      width: "100%",
+    },
     TitleText: {
       fontSize: "var(--sl-font-size-large)",
       margin: "0",
@@ -52,7 +62,8 @@ export function ReferralCodesView(props) {
       return slots.empty;
     }
     if (states.loading) {
-      return slots.loading;
+      return (h("div", { class: sheet.classes.SkeletonContainer },
+        h("sl-skeleton", { class: sheet.classes.SkeletonOne })));
     }
     return (h("div", { class: sheet.classes.Wrapper },
       h("div", { class: sheet.classes.ShareCodeContainer }, slots.shareCodes),
@@ -64,6 +75,6 @@ export function ReferralCodesView(props) {
       styleString),
     h("div", { class: sheet.classes.HeaderContainer },
       h("h2", { class: sheet.classes.TitleText }, titleText),
-      !states.noCodes && !states.loading && slots.pagination),
+      !states.noCodes && slots.pagination),
     getSlotContent(states)));
 }

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

@@ -44,7 +44,6 @@ export class ReferralCodes {
       shareCodes: h("slot", { name: "shareCodes" }),
       pagination: h("slot", { name: "pagination" }),
       empty: (h(EmptySlot, { headerText: this.emptyStateHeaderText, descriptionText: this.emptyStateDescriptionText, imageUrl: this.emptyStateImageUrl })),
-      loading: h(LoadingSlot, null),
     };
     const viewProps = {
       slots,
@@ -195,7 +194,7 @@ export class ReferralCodes {
       "mutable": false,
       "complexType": {
         "original": "DemoData<ReferralCodesViewProps>",
-        "resolved": "{ states?: { noCodes: boolean; loading: boolean; }; slots?: { shareButtons: VNode; shareCodes: VNode; pagination: VNode; empty: VNode; loading: VNode; }; titleText?: string; textColor?: string; }",
+        "resolved": "{ states?: { noCodes: boolean; loading: boolean; }; slots?: { shareButtons: VNode; shareCodes: VNode; pagination: VNode; empty: VNode; }; titleText?: string; textColor?: string; }",
         "references": {
           "DemoData": {
             "location": "import",
@@ -226,16 +225,6 @@ function EmptySlot({ headerText, descriptionText, imageUrl, }) {
   return (h("slot", { name: "empty" },
     h("sqm-empty", { emptyStateHeader: headerText, emptyStateText: descriptionText, emptyStateImage: imageUrl })));
 }
-function LoadingSlot() {
-  return (h("slot", { name: "loading" },
-    h(LoadingRow, null),
-    h(LoadingRow, null),
-    h(LoadingRow, null),
-    h(LoadingRow, null)));
-}
-function LoadingRow() {
-  return h("sqm-skeleton", null);
-}
 function useDemoReferralCodes(props) {
   return deepmerge({
     titleText: props.titleText,

package/dist/collection/components/sqm-widget-verification/sqm-widget-verification.js

@@ -2,12 +2,12 @@ import { isDemo, useParentState, useSetParent, } from "@saasquatch/component-boi
 import { withHooks } from "@saasquatch/stencil-hooks";
 import { Component, h, Prop } from "@stencil/core";
 import deepmerge from "deepmerge";
+import { createStyleSheet } from "../../styling/JSS";
 import { parseStates } from "../../utils/parseStates";
 import { getProps } from "../../utils/utils";
 import { extractProps } from "../tax-and-cash/sqm-tax-and-cash/extractProps";
 import { SHOW_CODE_NAMESPACE, VERIFICATION_EMAIL_NAMESPACE, VERIFICATION_PARENT_NAMESPACE, } from "./keys";
-import { useWidgetVerification } from "./useWidgetVerification";
-import { createStyleSheet } from "../../styling/JSS";
+import { useWidgetVerification, } from "./useWidgetVerification";
 const style = {
   Dialog: {
     "&::part(panel)": {
@@ -264,6 +264,9 @@ export class WidgetVerification {
           if (((_a = e.target) === null || _a === void 0 ? void 0 : _a.tagName) === "SL-DIALOG") {
             e.preventDefault();
           }
+        }, "onSl-initial-focus": (e) => {
+          var _a;
+          (_a = props.onInitialFocus) === null || _a === void 0 ? void 0 : _a.call(props, e);
         } },
         h("h2", { class: sheet.classes.DialogTitle }, dialogLabel),
         renderStepContent())));
@@ -1045,6 +1048,7 @@ function useDemoWidgetVerificationInternal(props) {
     showPartnerModal: false,
     onVerification,
     onPartnerModalComplete: () => { },
+    onInitialFocus: (e) => e.preventDefault(),
     loading: false,
   }, formatted || {}, { arrayMerge: (_, a) => a });
 }

package/dist/esm/sqm-big-stat_47.entry.js

@@ -8693,6 +8693,9 @@ const WidgetVerification = class {
         if (((_a = e.target) === null || _a === void 0 ? void 0 : _a.tagName) === "SL-DIALOG") {
           e.preventDefault();
         }
+      }, "onSl-initial-focus": (e) => {
+        var _a;
+        (_a = props.onInitialFocus) === null || _a === void 0 ? void 0 : _a.call(props, e);
       } }, h$1("h2", { class: sheet$3.classes.DialogTitle }, dialogLabel), renderStepContent())));
   }
 };
@@ -8718,6 +8721,7 @@ function useDemoWidgetVerificationInternal(props) {
     showPartnerModal: false,
     onVerification,
     onPartnerModalComplete: () => { },
+    onInitialFocus: (e) => e.preventDefault(),
     loading: false,
   }, formatted || {}, { arrayMerge: (_, a) => a });
 }

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

@@ -17,6 +17,9 @@ const style = {
     gap: "var(--sl-spacing-small)",
     width: "100%",
   },
+  SkeletonContainer: {
+    width: "40px",
+  },
   TextContainer: {
     display: "flex",
     gap: "var(--sl-spacing-xx-small)",
@@ -32,10 +35,11 @@ function PaginationView(props) {
     return h(Fragment, null);
   return (h("span", { class: sheet.classes.Container, part: "sqm-base" },
     h("style", { type: "text/css" }, styleString),
-    !loading && (h(Fragment, null,
-      h("sl-button", { exportparts: `base: ${buttonType}button-base`, onClick: onPrev, part: "sqm-pagination-button", circle: true, disabled: currentPage === 1 },
-        h("sl-icon", { name: "chevron-left", label: "Previous Page" })),
-      h("div", { class: sheet.classes.TextContainer }, text.paginationText))),
+    h("sl-button", { exportparts: `base: ${buttonType}button-base`, onClick: onPrev, part: "sqm-pagination-button", circle: true, disabled: currentPage === 1 },
+      h("sl-icon", { name: "chevron-left", label: "Previous Page" })),
+    !loading ? (h(Fragment, null,
+      h("div", { class: sheet.classes.TextContainer }, text.paginationText))) : (h("div", { class: sheet.classes.SkeletonContainer },
+      h("sl-skeleton", { height: "16px", width: "50%" }))),
     h("sl-button", { exportparts: `base: ${buttonType}button-base`, onClick: onNext, part: "sqm-pagination-button", circle: true, disabled: currentPage === totalPages },
       h("sl-icon", { name: "chevron-right", label: "Previous Page" }))));
 }
@@ -312,6 +316,16 @@ function ReferralCodesView(props) {
       justifyContent: "center",
       flexDirection: "column",
     },
+    SkeletonContainer: {
+      display: "flex",
+      flexDirection: "column",
+      gap: "var(--sl-spacing-small)",
+      width: "100%",
+    },
+    SkeletonOne: {
+      height: "36px",
+      width: "100%",
+    },
     TitleText: {
       fontSize: "var(--sl-font-size-large)",
       margin: "0",
@@ -332,7 +346,8 @@ function ReferralCodesView(props) {
       return slots.empty;
     }
     if (states.loading) {
-      return slots.loading;
+      return (h("div", { class: sheet.classes.SkeletonContainer },
+        h("sl-skeleton", { class: sheet.classes.SkeletonOne })));
     }
     return (h("div", { class: sheet.classes.Wrapper },
       h("div", { class: sheet.classes.ShareCodeContainer }, slots.shareCodes),
@@ -344,7 +359,7 @@ function ReferralCodesView(props) {
       styleString),
     h("div", { class: sheet.classes.HeaderContainer },
       h("h2", { class: sheet.classes.TitleText }, titleText),
-      !states.noCodes && !states.loading && slots.pagination),
+      !states.noCodes && slots.pagination),
     getSlotContent(states)));
 }
 
@@ -380,7 +395,6 @@ const ReferralCodes = class {
       shareCodes: h("slot", { name: "shareCodes" }),
       pagination: h("slot", { name: "pagination" }),
       empty: (h(EmptySlot, { headerText: this.emptyStateHeaderText, descriptionText: this.emptyStateDescriptionText, imageUrl: this.emptyStateImageUrl })),
-      loading: h(LoadingSlot, null),
     };
     const viewProps = {
       slots,
@@ -394,12 +408,6 @@ const ReferralCodes = class {
 function EmptySlot({ headerText, descriptionText, imageUrl, }) {
   return (h("slot", { name: "empty" }, h("sqm-empty", { emptyStateHeader: headerText, emptyStateText: descriptionText, emptyStateImage: imageUrl })));
 }
-function LoadingSlot() {
-  return (h("slot", { name: "loading" }, h(LoadingRow, null), h(LoadingRow, null), h(LoadingRow, null), h(LoadingRow, null)));
-}
-function LoadingRow() {
-  return h("sqm-skeleton", null);
-}
 function useDemoReferralCodes(props) {
   return cjs({
     titleText: props.titleText,

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

@@ -10674,6 +10674,47 @@ const Loading$8 = () => {
     shareCodes("shareCodes"),
     shareButtons("shareButtons")));
 };
+const loadingPagination = (slot) => {
+  return (h("sqm-pagination", { slot: slot, demoData: { states: { loading: true } } }));
+};
+const WithLoadingPagination = () => {
+  return (h("sqm-referral-codes", null,
+    loadingPagination("pagination"),
+    shareCodes("shareCodes"),
+    shareButtons("shareButtons")));
+};
+const TOTAL_PAGES = 5;
+const LOADING_MS = 800;
+const FunctionalPaginationDemo = () => {
+  const [currentPage, setCurrentPage] = useState(1);
+  const [loading, setLoading] = useState(false);
+  const goTo = (nextPage) => {
+    setLoading(true);
+    setTimeout(() => {
+      setCurrentPage(nextPage);
+      setLoading(false);
+    }, LOADING_MS);
+  };
+  const paginationSlot = (h("sqm-pagination", { slot: "pagination", demoData: {
+      states: {
+        currentPage,
+        totalPages: TOTAL_PAGES,
+        loading,
+      },
+      callbacks: {
+        onNext: () => goTo(currentPage + 1),
+        onPrev: () => goTo(currentPage - 1),
+      },
+      text: {
+        paginationText: `${currentPage} of ${TOTAL_PAGES}`,
+      },
+    } }));
+  return (h("sqm-referral-codes", { demoData: { states: { noCodes: false, loading } } },
+    paginationSlot,
+    shareCodes("shareCodes"),
+    shareButtons("shareButtons")));
+};
+const FunctionalPagination = createHookStory(FunctionalPaginationDemo);
 
 const ReferralCodes$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
@@ -10683,7 +10724,9 @@ const ReferralCodes$1 = /*#__PURE__*/Object.freeze({
   WithPreviouslyCopiedCodeAndCustomColor: WithPreviouslyCopiedCodeAndCustomColor,
   Empty: Empty$2,
   EmptyWithCustomTextAndImage: EmptyWithCustomTextAndImage,
-  Loading: Loading$8
+  Loading: Loading$8,
+  WithLoadingPagination: WithLoadingPagination,
+  FunctionalPagination: FunctionalPagination
 });
 
 const scenario$s = "@owner:sam\n@author:sam\n\nFeature: Referral Iframe\n\n\tUsed to provide an external form for submitting referral leads using the current user's referral code\n\n\tBackground: A user is logged in\n\t\tGiven there is a logged in user\n\n\t@motivating\n\tScenario: Referral code is passed to the iframe as a query parameter\n\t\tGiven the \"iframe-src\" is \"https://example.com\"\n\t\tAnd the user has navigated to \"/refer\"\n\t\tAnd the user's referral code is \"BOBBYREFER\"\n\t\tWhen the iframe content is loaded\n\t\tThen the iframe url will be \"https://example.com?rsCode=BOBBYREFER\"\n\n\t@ui\n\tScenario Outline: The height and width of the iFrame can be controlled via props\n\t\tGiven the \"iframe-src\" is \"https://example.com\"\n\t\tAnd the iframe content is 1000x1000\n\t\tAnd the \"iframe-height\" is set to <heightValue>\n\t\tAnd the \"iframe-width\" is set to <widthValue>\n\t\tThen the content of the iframe will be displayed with scrollbars\n\t\tAnd the dimension of the iFrame displayed will be 500x500\n\t\tWhen the \"iframe-height\" is set to <heightValue>\n\t\tAnd the \"iframe-width\" is set to <widthValue>\n\t\tThen the full content of the iframe will be displayed on the page\n\t\tAnd the dimension of the iFrame displayed will be 1000x1000\n\t\tExamples:\n\t\t| heightValue | widthValue |\n\t\t| 500px       | 500px      |\n\t\t| 50%         | 50%        |\n\n\t@minutia\n\tScenario Outline: The iFrame will fail fast if a iFrame source isn't provided\n\t\tGiven \"iframe-src\" <mayBeAnAttribute>\n\t\tAnd it <mayHaveValue>\n\t\tWhen a user views the referral iFrame component\n\t\tThen an alert with an error message is displayed in place of the iFrame\n\t\tAnd it has a details section\n\t\tWhen \"More details\" is clicked\n\t\tThen the following information will be displayed\n\t\t| component being used |\n\t\t| missing attribute(s) |\n\n\tExamples:\n\t\t| mayBeAnAttribute    | mayHaveValue |\n\t\t| is not an attribute | N/A          |\n\t\t| is an attribute     | \"\"           |\n\t\t| is an attribute     |              |";