@saasquatch/mint-components 1.6.8-2 → 1.6.8-4

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

@@ -2,11 +2,11 @@ import { Component, h, Prop } from "@stencil/core";
 import { getProps } from "../../utils/utils";
 import { LinkButtonView } from "./sqm-link-button-view";
 /**
- * @uiName Image
+ * @uiName Link Button
  * @exampleGroup Common Components
- * @example Image - <sqm-image image-url="https://res.cloudinary.com/saasquatch/image/upload/v1644000259/squatch-assets/tn47wOj.png" alignment="center"></sqm-image>
+ * @example Link Button - <sqm-link-button link="www.example.com" open-in-new-tab="true">Click here</sqm-link-button>
  */
-export class Image {
+export class LinkButton {
   constructor() {
     /**
      * @uiName User Identification Text

package/dist/collection/components/sqm-passwordless-registration/sqm-passwordless-registration.js

@@ -11,13 +11,6 @@ import { usePasswordlessRegistration } from "./usePasswordlessRegistration";
 export class PasswordlessRegistration {
   constructor() {
     this.ignored = true;
-    /**
-     * Redirect participants to this page after they successfully register.
-     *
-     * @uiName Registration Redirect
-     * @uiWidget pageSelect
-     */
-    this.nextPage = "/";
     /**
      * @uiName Email Field Label
      */
@@ -60,30 +53,6 @@ export class PasswordlessRegistration {
   static get is() { return "sqm-passwordless-registration"; }
   static get encapsulation() { return "shadow"; }
   static get properties() { return {
-    "nextPage": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "text": "Registration Redirect",
-            "name": "uiName"
-          }, {
-            "text": "pageSelect",
-            "name": "uiWidget"
-          }],
-        "text": "Redirect participants to this page after they successfully register."
-      },
-      "attribute": "next-page",
-      "reflect": false,
-      "defaultValue": "\"/\""
-    },
     "emailLabel": {
       "type": "string",
       "mutable": false,
@@ -225,7 +194,6 @@ export class PasswordlessRegistration {
   }; }
 }
 function useRegistrationDemo(props) {
-  console.debug("sqm-passwordless-registration: Running in debug mode...");
   const onSubmit = () => {
     setUserIdentity({
       id: "referrer@example.com",

package/dist/collection/components/sqm-portal-footer/PortalFooter.stories.js

@@ -22,3 +22,4 @@ export const FooterWithTerms = () => (h(PortalFooterView, Object.assign({}, defa
 export const FooterWithFAQ = () => (h(PortalFooterView, Object.assign({}, defaultProps, { faqLink: "https://example.com", faqText: "FAQ" })));
 export const FooterWithTermsAndFAQ = () => (h(PortalFooterView, Object.assign({}, defaultProps, { termsLink: "https://example.com", termsText: "Terms and Conditions", faqLink: "https://example.com", faqText: "FAQ" })));
 export const FooterNoPoweredBy = () => (h(PortalFooterView, Object.assign({}, defaultProps, { termsLink: "https://example.com", termsText: "Terms and Conditions", faqLink: "https://example.com", faqText: "FAQ", hidePoweredBy: true })));
+export const FooterNoSupportText = () => (h(PortalFooterView, Object.assign({}, defaultProps, { termsLink: "https://example.com", termsText: "Terms and Conditions", faqLink: "https://example.com", faqText: "FAQ", hideSupportText: true })));

package/dist/collection/components/sqm-portal-footer/sqm-portal-footer-view.js

@@ -31,12 +31,14 @@ export function PortalFooterView(props) {
       "padding-right": `var(--sl-spacing-${props.paddingRight})`,
       "padding-bottom": `var(--sl-spacing-${props.paddingBottom})`,
       "padding-left": `var(--sl-spacing-${props.paddingLeft})`,
+      "row-gap": `var(--sl-spacing-small)`,
       "& a:hover": {
         color: "var(--sl-color-gray-900)",
       },
     },
     SupportText: {
       textAlign: "center",
+      margin: 0,
     },
     PoweredByLink: {
       color: "var(--sl-color-gray-400)",
@@ -55,12 +57,12 @@ export function PortalFooterView(props) {
     h("div", { class: sheet.classes.RowContainer },
       props.faqLink && (h("a", { target: "_blank", href: props.faqLink }, props.faqText)),
       props.termsLink && (h("a", { target: "_blank", href: props.termsLink }, props.termsText))),
-    h("p", { class: sheet.classes.SupportText }, intl.formatMessage({
+    !props.hideSupportText && (h("p", { class: sheet.classes.SupportText }, intl.formatMessage({
       id: "supportFooter",
       defaultMessage: props.supportText,
     }, {
       email: (h("a", { target: "_blank", href: `mailto:${props.supportEmail}` }, props.supportEmail)),
-    })),
+    }))),
     !props.hidePoweredBy && (h("a", { class: sheet.classes.PoweredByLink, target: "_blank", href: props.poweredByLink },
       h(PoweredByImg, null)))));
 }

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

@@ -8,6 +8,10 @@ import { PortalFooterView } from "./sqm-portal-footer-view";
 export class PortalFooter {
   constructor() {
     this.ignored = true;
+    /**
+     * @uiName Hide the support text
+     */
+    this.hideSupportText = false;
     /**
      * @uiName Support Email
      */
@@ -59,6 +63,27 @@ export class PortalFooter {
   static get encapsulation() { return "shadow"; }
   static get assetsDirs() { return ["../../assets"]; }
   static get properties() { return {
+    "hideSupportText": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Hide the support text",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "hide-support-text",
+      "reflect": false,
+      "defaultValue": "false"
+    },
     "supportEmail": {
       "type": "string",
       "mutable": false,

package/dist/collection/components/sqm-referred-registration/sqm-referred-registration.js

@@ -1,4 +1,4 @@
-import { isDemo } from "@saasquatch/component-boilerplate";
+import { isDemo, setUserIdentity, } from "@saasquatch/component-boilerplate";
 import { withHooks } from "@saasquatch/stencil-hooks";
 import { Component, h, Prop, State } from "@stencil/core";
 import deepmerge from "deepmerge";
@@ -11,13 +11,6 @@ import { EmailRegistrationView, } from "../views/email-registration-view";
 export class ReferredRegistration {
   constructor() {
     this.ignored = true;
-    /**
-     * Redirect participants to this page after they successfully register.
-     *
-     * @uiName Registration Redirect
-     * @uiWidget pageSelect
-     */
-    this.nextPage = "/";
     /**
      * @uiName Email Field Label
      */
@@ -60,30 +53,6 @@ export class ReferredRegistration {
   static get is() { return "sqm-referred-registration"; }
   static get encapsulation() { return "shadow"; }
   static get properties() { return {
-    "nextPage": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "text": "Registration Redirect",
-            "name": "uiName"
-          }, {
-            "text": "pageSelect",
-            "name": "uiWidget"
-          }],
-        "text": "Redirect participants to this page after they successfully register."
-      },
-      "attribute": "next-page",
-      "reflect": false,
-      "defaultValue": "\"/\""
-    },
     "emailLabel": {
       "type": "string",
       "mutable": false,
@@ -225,16 +194,21 @@ export class ReferredRegistration {
   }; }
 }
 function useRegistrationDemo(props) {
+  const onSubmit = () => {
+    setUserIdentity({
+      id: "referrer@example.com",
+      accountId: "referrer@example.com",
+      jwt: "eyJraWQiOiJlNjI2NzQxNy1jMzZlLTRlM2EtYjM5NS1lYTFmY2YyNmU3YzIiLCJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiJ9.eyJzdWIiOiJjbVZtWlhKeVpYSkFaWGhoYlhCc1pTNWpiMjA9OmNtVm1aWEp5WlhKQVpYaGhiWEJzWlM1amIyMD1AdGVzdF9heGJndGF0dzF0Y2NwOnVzZXJzIiwicGFzc3dvcmRsZXNzIjp0cnVlLCJpc3MiOiJodHRwczovL3N0YWdpbmcucmVmZXJyYWxzYWFzcXVhdGNoLmNvbS8iLCJleHAiOjE2ODA4ODU5MTksImlhdCI6MTY4MDc5OTUxOX0.kjmTVVf_BTb-uMNKnadLyNLxMFwpkefsY02O3iAfBVIJJZZfeZMwunPlKsS3Vbp28aYRClBjH5Wj4pYxDn23D0CdZx8KNCqiJ8yF6149O9SPMkRseoJkliqS6LyvMOEDjGDkuLfcC8_hq1AHBXFt5BdCtWOk1gwf_5R9A0w5gXEIvprBzbNDLbuo88bVAlrmFNvfttXXryrpUeruMal7cBKuy02YblBrB4kKoyJiprU5GLEjciBA4A56u8TwQc0kbsPf2YcQaJsY_IvkC7S1u4sPyObpq6iF6Ed8UYHAo6nU5KjZXyVtoUyeIS11mf_6OtDO6LyMNHV2FtEUUDdPCg",
+    });
+  };
   return deepmerge({
     states: {
       error: "",
       loading: false,
-      forgotPasswordPath: "/forgotPassword",
-      registerPath: "/register",
     },
     callbacks: {
       submit: async (_event) => {
-        console.log("submit");
+        onSubmit();
       },
     },
   }, props.demoData || {}, { arrayMerge: (_, a) => a });

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

@@ -32,7 +32,7 @@ export const CopyButtonInside = () => {
     copyString: "https://noah.example.com",
     open: false,
     tooltiptext: "Copied!",
-    buttonOutside: false,
+    buttonPosition: "inside",
     isCopyIcon: false,
   })));
 };

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

@@ -43,11 +43,11 @@ export class ShareCode {
      */
     this.copyButtonLabel = "Copy Code";
     /**
-     * Set the copy button outside the field
+     * Set the copy button position
      *
-     * @uiName Copy button outside
+     * @uiName Copy button position
      */
-    this.buttonOutside = true;
+    this.buttonPosition = "outside";
     withHooks(this);
   }
   disconnectedCallback() { }
@@ -189,33 +189,33 @@ export class ShareCode {
       "reflect": false,
       "defaultValue": "\"Copy Code\""
     },
-    "buttonOutside": {
-      "type": "boolean",
+    "buttonPosition": {
+      "type": "string",
       "mutable": false,
       "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
+        "original": "\"inside\" | \"outside\" | \"below\"",
+        "resolved": "\"below\" | \"inside\" | \"outside\"",
         "references": {}
       },
       "required": false,
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Copy button outside",
+            "text": "Copy button position",
             "name": "uiName"
           }],
-        "text": "Set the copy button outside the field"
+        "text": "Set the copy button position"
       },
-      "attribute": "is-button-outside",
+      "attribute": "copy-button-position",
       "reflect": false,
-      "defaultValue": "true"
+      "defaultValue": "\"outside\""
     },
     "demoData": {
       "type": "unknown",
       "mutable": false,
       "complexType": {
         "original": "DemoData<CopyTextViewProps>",
-        "resolved": "{ copyString?: string; tooltiptext?: string; open?: boolean; copyButtonLabel?: string; disabled?: boolean; isCopyIcon?: boolean; textAlign?: \"left\" | \"center\"; buttonOutside?: boolean; onClick?: () => void; }",
+        "resolved": "{ copyString?: string; tooltiptext?: string; open?: boolean; copyButtonLabel?: string; disabled?: boolean; isCopyIcon?: boolean; textAlign?: \"left\" | \"center\"; buttonPosition?: \"inside\" | \"outside\" | \"below\"; onClick?: () => void; }",
         "references": {
           "DemoData": {
             "location": "import",
@@ -250,7 +250,7 @@ function useDemoShareCode(props) {
     tooltiptext: props.tooltiptext,
     isCopyIcon: props.isCopyIcon,
     textAlign: props.textAlign,
-    buttonOutside: props.buttonOutside,
+    buttonPosition: props.buttonPosition,
     copyButtonLabel: props.copyButtonLabel,
     open,
     onClick: () => {

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

@@ -48,7 +48,7 @@ export const CopyButtonInside = () => {
     copyString: "https://noah.example.com",
     open: false,
     tooltiptext: "Copied!",
-    buttonOutside: false,
+    buttonPosition: "inside",
     isCopyIcon: false,
   })));
 };

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

@@ -43,11 +43,11 @@ export class ShareLink {
      */
     this.copyButtonLabel = "Copy Link";
     /**
-     * Set the copy button outside the field
+     * Set the copy button position
      *
-     * @uiName Copy button outside
+     * @uiName Copy button position
      */
-    this.buttonOutside = true;
+    this.buttonPosition = "outside";
     withHooks(this);
   }
   disconnectedCallback() { }
@@ -189,33 +189,33 @@ export class ShareLink {
       "reflect": false,
       "defaultValue": "\"Copy Link\""
     },
-    "buttonOutside": {
-      "type": "boolean",
+    "buttonPosition": {
+      "type": "string",
       "mutable": false,
       "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
+        "original": "\"inside\" | \"outside\" | \"below\"",
+        "resolved": "\"below\" | \"inside\" | \"outside\"",
         "references": {}
       },
       "required": false,
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Copy button outside",
+            "text": "Copy button position",
             "name": "uiName"
           }],
-        "text": "Set the copy button outside the field"
+        "text": "Set the copy button position"
       },
-      "attribute": "is-button-outside",
+      "attribute": "copy-button-position",
       "reflect": false,
-      "defaultValue": "true"
+      "defaultValue": "\"outside\""
     },
     "demoData": {
       "type": "unknown",
       "mutable": false,
       "complexType": {
         "original": "DemoData<CopyTextViewProps>",
-        "resolved": "{ copyString?: string; tooltiptext?: string; open?: boolean; copyButtonLabel?: string; disabled?: boolean; isCopyIcon?: boolean; textAlign?: \"left\" | \"center\"; buttonOutside?: boolean; onClick?: () => void; }",
+        "resolved": "{ copyString?: string; tooltiptext?: string; open?: boolean; copyButtonLabel?: string; disabled?: boolean; isCopyIcon?: boolean; textAlign?: \"left\" | \"center\"; buttonPosition?: \"inside\" | \"outside\" | \"below\"; onClick?: () => void; }",
         "references": {
           "DemoData": {
             "location": "import",
@@ -250,7 +250,7 @@ function useDemoShareLink(props) {
     tooltiptext: props.tooltiptext,
     isCopyIcon: props.isCopyIcon,
     textAlign: props.textAlign,
-    buttonOutside: props.buttonOutside,
+    buttonPosition: props.buttonPosition,
     copyButtonLabel: props.copyButtonLabel,
     open,
     onClick: () => {

package/dist/collection/components/sqm-user-identifier/sqm-user-identifier-view.js

@@ -1,7 +1,14 @@
 import { h } from "@stencil/core";
 import { createStyleSheet } from "../../styling/JSS";
 const style = {
-  Container: {},
+  Container: { color: "var(--sl-color-neutral-600)" },
+  Link: {
+    textDecoration: "none",
+    color: "var(--sl-color-primary-700)",
+    "&:hover": {
+      color: "var(--sl-color-primary-800)",
+    },
+  },
 };
 const vanillaStyle = `
 :host{
@@ -12,12 +19,12 @@ const sheet = createStyleSheet(style);
 const styleString = sheet.toString();
 export function UserIdentifierView(props) {
   const { userIdentificationText, switchUserLink, switchUserText } = props;
-  return (h("span", { class: sheet.classes.Container },
+  return (h("span", { class: sheet.classes.Container, part: "sqm-base" },
     h("style", { type: "text/css" },
       styleString,
       vanillaStyle),
     userIdentificationText,
     " (",
-    h("a", { href: switchUserLink }, switchUserText),
+    h("a", { class: sheet.classes.Link, href: switchUserLink, part: "sqm-link" }, switchUserText),
     ")"));
 }

package/dist/collection/components/sqm-user-identifier/sqm-user-identifier.js

@@ -1,12 +1,14 @@
+import { isDemo } from "@saasquatch/component-boilerplate";
 import { Component, h, Prop } from "@stencil/core";
-import { getProps } from "../../utils/utils";
-import { UserIdentifierView } from "./sqm-user-identifier-view";
+import deepmerge from "deepmerge";
+import { UserIdentifierView, } from "./sqm-user-identifier-view";
+import { useUserIdentifier } from "./useUserIdentifer";
 /**
- * @uiName Image
+ * @uiName User Identifier
  * @exampleGroup Common Components
- * @example Image - <sqm-image image-url="https://res.cloudinary.com/saasquatch/image/upload/v1644000259/squatch-assets/tn47wOj.png" alignment="center"></sqm-image>
+ * @example User Identifier - <sqm-user-identifier user-identification-text="Showing data for {email}" switch-user-link="www.example.com" switch-user-text="not you?"></sqm-user-identifier>
  */
-export class Image {
+export class UserIdentifier {
   constructor() {
     /**
      * @required
@@ -20,7 +22,10 @@ export class Image {
     this.switchUserText = "not you?";
   }
   render() {
-    return h(UserIdentifierView, Object.assign({}, getProps(this)));
+    const props = isDemo()
+      ? useDemoUserIdentifier(this)
+      : useUserIdentifier(this);
+    return h(UserIdentifierView, Object.assign({}, props));
   }
   static get is() { return "sqm-user-identifier"; }
   static get encapsulation() { return "shadow"; }
@@ -95,7 +100,45 @@ export class Image {
       "attribute": "switch-user-text",
       "reflect": false,
       "defaultValue": "\"not you?\""
+    },
+    "demoData": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "DemoData<CopyTextViewProps>",
+        "resolved": "{ copyString?: string; tooltiptext?: string; open?: boolean; copyButtonLabel?: string; disabled?: boolean; isCopyIcon?: boolean; textAlign?: \"left\" | \"center\"; buttonPosition?: \"inside\" | \"outside\" | \"below\"; onClick?: () => void; }",
+        "references": {
+          "DemoData": {
+            "location": "import",
+            "path": "../../global/demo"
+          },
+          "CopyTextViewProps": {
+            "location": "import",
+            "path": "../views/copy-text-view"
+          }
+        }
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": undefined,
+            "name": "undocumented"
+          }, {
+            "text": "object",
+            "name": "uiType"
+          }],
+        "text": ""
+      }
     }
   }; }
 }
-//TODO: Write a hook to resolve ICU strings
+function useDemoUserIdentifier(props) {
+  const switchUserLink = "https://example.com";
+  const userIdentificationText = "user@example.com";
+  return deepmerge({
+    switchUserLink,
+    userIdentificationText,
+    switchUserText: props.switchUserText,
+  }, props.demoData || {}, { arrayMerge: (_, a) => a });
+}

package/dist/collection/components/sqm-user-identifier/useUserIdentifer.js

@@ -0,0 +1,7 @@
+export function useUserIdentifier(props) {
+  return {
+    switchUserLink: "" || props.switchUserLink,
+    userIdentificationText: "",
+    switchUserText: "",
+  };
+}

package/dist/collection/components/views/EmailRegistration.stories.js

@@ -29,3 +29,17 @@ export const WithSlots = () => (h(EmailRegistrationView, Object.assign({}, defau
     bottomSlot: h("div", null, "Hello this is the bottom slot"),
   },
 })));
+export const Loading = () => (h(EmailRegistrationView, Object.assign({}, {
+  ...defaultProps,
+  states: {
+    error: "",
+    loading: true,
+  },
+})));
+export const Error = () => (h(EmailRegistrationView, Object.assign({}, {
+  ...defaultProps,
+  states: {
+    error: "Something went wrong. Please try again.",
+    loading: false,
+  },
+})));

package/dist/collection/components/views/copy-text-view.js

@@ -5,15 +5,17 @@ const style = {
   HostBlock: HostBlock,
   inputStyle: {
     "&::part(base)": { background: "white", opacity: "1", cursor: "pointer" },
+    "&::part(input)": { textOverflow: "ellipsis" },
+    width: "100%",
   },
   containerStyle: {
     display: "flex",
-    columnGap: "8px",
+    gap: "8px",
   },
 };
 const textAlignStyle = `
   :host{
-    display: block;   
+    display: block;
   }
   sl-input::part(input){
     text-align: center;
@@ -23,13 +25,18 @@ const sheet = createStyleSheet(style);
 const styleString = sheet.toString();
 export function CopyTextView(props) {
   const { isCopyIcon = true } = props;
-  const copyButton = isCopyIcon ? null : (h("sl-button", { onClick: () => { var _a; return (_a = props.onClick) === null || _a === void 0 ? void 0 : _a.call(props); }, size: props.buttonOutside ? "medium" : "small", disabled: props.disabled, slot: "suffix", type: "primary" }, props.copyButtonLabel || "Copy"));
+  const copyButton = isCopyIcon ? null : (h("sl-button", { onClick: () => { var _a; return (_a = props.onClick) === null || _a === void 0 ? void 0 : _a.call(props); }, size: props.buttonPosition === "outside" ? "medium" : "small", disabled: props.disabled, slot: "suffix", type: "primary" }, props.copyButtonLabel || "Copy"));
   return (h("div", null,
     h("style", { type: "text/css" },
       styleString,
       props.textAlign === "center" && textAlignStyle),
     h("sl-tooltip", { trigger: "manual", content: props.tooltiptext, placement: "top-end", disabled: props.disabled, open: props.open, skidding: -20 },
-      h("div", { class: sheet.classes.containerStyle },
-        h("sl-input", { class: sheet.classes.inputStyle, exportparts: "label: input-label", value: props.copyString, readonly: true }, isCopyIcon ? (h("sl-icon-button", { onClick: () => { var _a; return (_a = props.onClick) === null || _a === void 0 ? void 0 : _a.call(props); }, slot: "suffix", name: "files", disabled: props.disabled })) : (!props.buttonOutside && copyButton)),
-        props.buttonOutside && copyButton))));
+      h("div", { class: sheet.classes.containerStyle, style: {
+          flexDirection: `${props.buttonPosition === "below" ? "column" : "row"}`,
+          width: "100%",
+        } },
+        h("sl-input", { class: sheet.classes.inputStyle, exportparts: "label: input-label", value: props.copyString, readonly: true }, isCopyIcon ? (h("sl-icon-button", { onClick: () => { var _a; return (_a = props.onClick) === null || _a === void 0 ? void 0 : _a.call(props); }, slot: "suffix", name: "files", disabled: props.disabled })) : (props.buttonPosition === "inside" && copyButton)),
+        (props.buttonPosition === "outside" ||
+          props.buttonPosition === "below") &&
+          copyButton))));
 }

package/dist/esm/{ShadowViewAddon-ca765d5e.js → ShadowViewAddon-751a6b84.js}

@@ -1,11 +1,11 @@
 import { h, c as Host, d as getAssetPath, g as getElement } from './index-17b4da69.js';
 import { i as useState, b as browser, k as useMemo } from './stencil-hooks.module-b48b45ec.js';
-import { i as intl } from './global-0f137e54.js';
-import { d as dist, O, W, f as fn, F as Fe, _ as _$1, p as getEnvironmentSDK, x } from './index.module-787e5d35.js';
+import { i as intl } from './global-170c4499.js';
+import { d as dist, O, W, f as fn, F as Fe, _ as _$1, p as getEnvironmentSDK, x } from './index.module-0ba0774e.js';
 import { c as cjs } from './cjs-bdfb4486.js';
 import { H as HostBlock, A as AuthWrapper, a as AuthColumn, b as AuthButtonsContainer, E as ErrorStyles } from './mixins-f60a614c.js';
 import { c as createStyleSheet, j as jss, a as create } from './JSS-67b5cff8.js';
-import { u as useChildElements } from './useChildElements-0124b1a9.js';
+import { u as useChildElements } from './useChildElements-fd458906.js';
 import { l as luxon } from './luxon-1e38d7f1.js';
 import { l as luxonLocale } from './utils-334c1e34.js';
 import { T as TextSpanView } from './sqm-text-span-view-2f7d6d14.js';
@@ -190,15 +190,17 @@ const style$2 = {
   HostBlock: HostBlock,
   inputStyle: {
     "&::part(base)": { background: "white", opacity: "1", cursor: "pointer" },
+    "&::part(input)": { textOverflow: "ellipsis" },
+    width: "100%",
   },
   containerStyle: {
     display: "flex",
-    columnGap: "8px",
+    gap: "8px",
   },
 };
 const textAlignStyle = `
   :host{
-    display: block;   
+    display: block;
   }
   sl-input::part(input){
     text-align: center;
@@ -208,15 +210,20 @@ const sheet$2 = createStyleSheet(style$2);
 const styleString$2 = sheet$2.toString();
 function CopyTextView(props) {
   const { isCopyIcon = true } = props;
-  const copyButton = isCopyIcon ? null : (h("sl-button", { onClick: () => { var _a; return (_a = props.onClick) === null || _a === void 0 ? void 0 : _a.call(props); }, size: props.buttonOutside ? "medium" : "small", disabled: props.disabled, slot: "suffix", type: "primary" }, props.copyButtonLabel || "Copy"));
+  const copyButton = isCopyIcon ? null : (h("sl-button", { onClick: () => { var _a; return (_a = props.onClick) === null || _a === void 0 ? void 0 : _a.call(props); }, size: props.buttonPosition === "outside" ? "medium" : "small", disabled: props.disabled, slot: "suffix", type: "primary" }, props.copyButtonLabel || "Copy"));
   return (h("div", null,
     h("style", { type: "text/css" },
       styleString$2,
       props.textAlign === "center" && textAlignStyle),
     h("sl-tooltip", { trigger: "manual", content: props.tooltiptext, placement: "top-end", disabled: props.disabled, open: props.open, skidding: -20 },
-      h("div", { class: sheet$2.classes.containerStyle },
-        h("sl-input", { class: sheet$2.classes.inputStyle, exportparts: "label: input-label", value: props.copyString, readonly: true }, isCopyIcon ? (h("sl-icon-button", { onClick: () => { var _a; return (_a = props.onClick) === null || _a === void 0 ? void 0 : _a.call(props); }, slot: "suffix", name: "files", disabled: props.disabled })) : (!props.buttonOutside && copyButton)),
-        props.buttonOutside && copyButton))));
+      h("div", { class: sheet$2.classes.containerStyle, style: {
+          flexDirection: `${props.buttonPosition === "below" ? "column" : "row"}`,
+          width: "100%",
+        } },
+        h("sl-input", { class: sheet$2.classes.inputStyle, exportparts: "label: input-label", value: props.copyString, readonly: true }, isCopyIcon ? (h("sl-icon-button", { onClick: () => { var _a; return (_a = props.onClick) === null || _a === void 0 ? void 0 : _a.call(props); }, slot: "suffix", name: "files", disabled: props.disabled })) : (props.buttonPosition === "inside" && copyButton)),
+        (props.buttonPosition === "outside" ||
+          props.buttonPosition === "below") &&
+          copyButton))));
 }
 
 function BigStatView(props) {
@@ -2454,12 +2461,14 @@ function PortalFooterView(props) {
       "padding-right": `var(--sl-spacing-${props.paddingRight})`,
       "padding-bottom": `var(--sl-spacing-${props.paddingBottom})`,
       "padding-left": `var(--sl-spacing-${props.paddingLeft})`,
+      "row-gap": `var(--sl-spacing-small)`,
       "& a:hover": {
         color: "var(--sl-color-gray-900)",
       },
     },
     SupportText: {
       textAlign: "center",
+      margin: 0,
     },
     PoweredByLink: {
       color: "var(--sl-color-gray-400)",
@@ -2478,12 +2487,12 @@ function PortalFooterView(props) {
     h("div", { class: sheet.classes.RowContainer },
       props.faqLink && (h("a", { target: "_blank", href: props.faqLink }, props.faqText)),
       props.termsLink && (h("a", { target: "_blank", href: props.termsLink }, props.termsText))),
-    h("p", { class: sheet.classes.SupportText }, intl.formatMessage({
+    !props.hideSupportText && (h("p", { class: sheet.classes.SupportText }, intl.formatMessage({
       id: "supportFooter",
       defaultMessage: props.supportText,
     }, {
       email: (h("a", { target: "_blank", href: `mailto:${props.supportEmail}` }, props.supportEmail)),
-    })),
+    }))),
     !props.hidePoweredBy && (h("a", { class: sheet.classes.PoweredByLink, target: "_blank", href: props.poweredByLink },
       h(PoweredByImg, null)))));
 }