@saasquatch/mint-components 1.6.3-9 → 1.6.4-0

package/dist/esm/sqm-password-field.entry.js

@@ -1,11 +1,11 @@
 import { h, r as registerInstance } from './index-17b4da69.js';
-import { o as d, i as useState, m as h$1 } from './stencil-hooks.module-eefa3570.js';
-import './use-callback-684c8bb7.js';
-import { i as isDemo } from './index.module-14794b69.js';
+import { o as d, i as useState, m as h$1 } from './stencil-hooks.module-203eab48.js';
+import './use-callback-f03b0607.js';
+import { i as isDemo } from './index.module-48cc9ee0.js';
 import { c as cjs } from './cjs-bdfb4486.js';
-import { E as ErrorStyles } from './mixins-f60a614c.js';
-import { c as createStyleSheet } from './JSS-67b5cff8.js';
-import { R as REGISTRATION_FORM_STATE_CONTEXT } from './useRegistrationFormState-abed2c1e.js';
+import { E as ErrorStyles } from './mixins-59fd94b7.js';
+import { c as createStyleSheet } from './JSS-506b9295.js';
+import { R as REGISTRATION_FORM_STATE_CONTEXT } from './useRegistrationFormState-09847a08.js';
 
 var constants = {
   error: {
@@ -388,88 +388,88 @@ class PasswordValidator {
 
 var src = PasswordValidator;
 
-const passwordSchema = new src()
-  .is()
-  .min(8) // Minimum length 8
-  .has()
-  .uppercase() // Must have uppercase letters
-  .has()
-  .lowercase() // Must have lowercase letters
-  .has(/([\d`~\!@#\$%\^\&\*\(\)\-_\=\+\[\{\}\]\\\|;:'",<.>\/\?€£¥₹§±].*){1,}/); // Must contain at least 1 digit or symbol
-// Taken from combining https://github.com/tarunbatra/password-validator/blob/40184970e4f65efa8aed7a64185a011a3b5d0e54/src/constants.js#L9
-const validateNewPassword = (password) => {
-  const errors = passwordSchema.validate(password, { list: true });
-  const message = getErrorMessage(errors, password);
-  return message;
-};
-const Valid = () => (h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "12", height: "12", viewBox: "0 0 12 12", fill: "none" },
-  h("path", { d: "M6 0C2.688 0 0 2.688 0 6C0 9.312 2.688 12 6 12C9.312 12 12 9.312 12 6C12 2.688 9.312 0 6 0ZM4.8 9L1.8 6L2.646 5.154L4.8 7.302L9.354 2.748L10.2 3.6L4.8 9Z", fill: "#259053" })));
-const Invalid = () => (h("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
-  h("path", { d: "M6 0C2.688 0 0 2.688 0 6C0 9.312 2.688 12 6 12C9.312 12 12 9.312 12 6C12 2.688 9.312 0 6 0ZM6 10.8C3.354 10.8 1.2 8.646 1.2 6C1.2 3.354 3.354 1.2 6 1.2C8.646 1.2 10.8 3.354 10.8 6C10.8 8.646 8.646 10.8 6 10.8ZM8.754 3.348L4.8 7.302L3.246 5.754L2.4 6.6L4.8 9L9.6 4.2L8.754 3.348Z", fill: "#555555" })));
-const validationMessages = {
-  min: "be a minimum of 8 characters",
-  uppercase: "contain at least 1 uppercase character",
-  lowercase: "contain at least 1 lowercase character",
-  has: "contain at least 1 number or symbol",
-};
-const baseItem = {
-  display: "flex",
-  alignItems: "center",
-  fontSize: "var(--sl-font-size-small)",
-  "& > :not(:last-child)": {
-    "margin-right": "var(--sl-spacing-x-small)",
-  },
-};
-const style = {
-  Base: {
-    fontSize: "var(--sl-font-size-small)",
-  },
-  ValidationList: {
-    "list-style-type": "none",
-    paddingRight: "var(--sl-spacing-large)",
-    margin: "var(--sl-spacing-small) 0 var(--sl-spacing-x-large)",
-    "& > :not(:last-child)": {
-      "margin-bottom": "var(--sl-spacing-xx-small)",
-    },
-    "& *": {
-      "line-height": "var(--sl-line-height-dense)",
-    },
-  },
-  ValidationItemValid: {
-    ...baseItem,
-    color: "var(--sl-color-success-600)",
-  },
-  ValidationItemInvalid: { ...baseItem },
-};
-const sheet = createStyleSheet(style);
-const styleString = sheet.toString();
-const getErrorMessage = (errorKeys, password) => {
-  if (!errorKeys.length && password)
-    return (h("div", { class: sheet.classes.ValidationItemValid, style: { paddingBottom: "var(--sl-spacing-x-large)" } },
-      h("style", { type: "text/css" }, styleString),
-      h(Valid, null),
-      " ",
-      h("span", null, "Password has met all requirements")));
-  return (h("div", { class: sheet.classes.Base },
-    h("style", { type: "text/css" }, styleString),
-    "Password must meet the following requirements:",
-    h("ul", { class: sheet.classes.ValidationList }, Object.keys(validationMessages).map((errorKey) => errorKeys.includes(errorKey) ? (h("li", { class: sheet.classes.ValidationItemInvalid },
-      h(Invalid, null),
-      " ",
-      h("span", null, validationMessages[errorKey]))) : (h("li", { class: sheet.classes.ValidationItemValid },
-      h(Valid, null),
-      " ",
-      h("span", null, validationMessages[errorKey])))))));
+const passwordSchema = new src()
+  .is()
+  .min(8) // Minimum length 8
+  .has()
+  .uppercase() // Must have uppercase letters
+  .has()
+  .lowercase() // Must have lowercase letters
+  .has(/([\d`~\!@#\$%\^\&\*\(\)\-_\=\+\[\{\}\]\\\|;:'",<.>\/\?€£¥₹§±].*){1,}/); // Must contain at least 1 digit or symbol
+// Taken from combining https://github.com/tarunbatra/password-validator/blob/40184970e4f65efa8aed7a64185a011a3b5d0e54/src/constants.js#L9
+const validateNewPassword = (password) => {
+  const errors = passwordSchema.validate(password, { list: true });
+  const message = getErrorMessage(errors, password);
+  return message;
+};
+const Valid = () => (h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "12", height: "12", viewBox: "0 0 12 12", fill: "none" },
+  h("path", { d: "M6 0C2.688 0 0 2.688 0 6C0 9.312 2.688 12 6 12C9.312 12 12 9.312 12 6C12 2.688 9.312 0 6 0ZM4.8 9L1.8 6L2.646 5.154L4.8 7.302L9.354 2.748L10.2 3.6L4.8 9Z", fill: "#259053" })));
+const Invalid = () => (h("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+  h("path", { d: "M6 0C2.688 0 0 2.688 0 6C0 9.312 2.688 12 6 12C9.312 12 12 9.312 12 6C12 2.688 9.312 0 6 0ZM6 10.8C3.354 10.8 1.2 8.646 1.2 6C1.2 3.354 3.354 1.2 6 1.2C8.646 1.2 10.8 3.354 10.8 6C10.8 8.646 8.646 10.8 6 10.8ZM8.754 3.348L4.8 7.302L3.246 5.754L2.4 6.6L4.8 9L9.6 4.2L8.754 3.348Z", fill: "#555555" })));
+const validationMessages = {
+  min: "be a minimum of 8 characters",
+  uppercase: "contain at least 1 uppercase character",
+  lowercase: "contain at least 1 lowercase character",
+  has: "contain at least 1 number or symbol",
+};
+const baseItem = {
+  display: "flex",
+  alignItems: "center",
+  fontSize: "var(--sl-font-size-small)",
+  "& > :not(:last-child)": {
+    "margin-right": "var(--sl-spacing-x-small)",
+  },
+};
+const style = {
+  Base: {
+    fontSize: "var(--sl-font-size-small)",
+  },
+  ValidationList: {
+    "list-style-type": "none",
+    paddingRight: "var(--sl-spacing-large)",
+    margin: "var(--sl-spacing-small) 0 var(--sl-spacing-x-large)",
+    "& > :not(:last-child)": {
+      "margin-bottom": "var(--sl-spacing-xx-small)",
+    },
+    "& *": {
+      "line-height": "var(--sl-line-height-dense)",
+    },
+  },
+  ValidationItemValid: {
+    ...baseItem,
+    color: "var(--sl-color-success-600)",
+  },
+  ValidationItemInvalid: { ...baseItem },
+};
+const sheet = createStyleSheet(style);
+const styleString = sheet.toString();
+const getErrorMessage = (errorKeys, password) => {
+  if (!errorKeys.length && password)
+    return (h("div", { class: sheet.classes.ValidationItemValid, style: { paddingBottom: "var(--sl-spacing-x-large)" } },
+      h("style", { type: "text/css" }, styleString),
+      h(Valid, null),
+      " ",
+      h("span", null, "Password has met all requirements")));
+  return (h("div", { class: sheet.classes.Base },
+    h("style", { type: "text/css" }, styleString),
+    "Password must meet the following requirements:",
+    h("ul", { class: sheet.classes.ValidationList }, Object.keys(validationMessages).map((errorKey) => errorKeys.includes(errorKey) ? (h("li", { class: sheet.classes.ValidationItemInvalid },
+      h(Invalid, null),
+      " ",
+      h("span", null, validationMessages[errorKey]))) : (h("li", { class: sheet.classes.ValidationItemValid },
+      h(Valid, null),
+      " ",
+      h("span", null, validationMessages[errorKey])))))));
 };
 
-const style$1 = {
-  InputContainer: {
-    "& > :not(:last-child)": {
-      "margin-bottom": "20px",
-    },
-  },
-  ErrorStyle: ErrorStyles,
-};
+const style$1 = {
+  InputContainer: {
+    "& > :not(:last-child)": {
+      "margin-bottom": "20px",
+    },
+  },
+  ErrorStyle: ErrorStyles,
+};
 const vanillaStyle = `
 :host {
   margin: 0 auto;
@@ -479,105 +479,105 @@ const vanillaStyle = `
 :host([hidden]): {
   display: none;
 }
-`;
-const sheet$1 = createStyleSheet(style$1);
-const styleString$1 = sheet$1.toString();
-function PortalResetPasswordView(props) {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
-  const { states, callbacks } = props;
-  return (h("div", { class: sheet$1.classes.InputContainer },
-    h("style", { type: "text/css" },
-      vanillaStyle,
-      styleString$1),
-    h("sl-input", Object.assign({ exportparts: "label: input-label", type: "password", name: "/password", label: states.content.fieldLabel || "Password", required: true, disabled: ((_a = states.registrationFormState) === null || _a === void 0 ? void 0 : _a.loading) || ((_b = states.registrationFormState) === null || _b === void 0 ? void 0 : _b.disabled), validationError: ({ value }) => {
-        if (!value) {
-          return "Cannot be empty";
-        }
-      } }, (((_d = (_c = states.registrationFormState) === null || _c === void 0 ? void 0 : _c.initialData) === null || _d === void 0 ? void 0 : _d.password) ? {
-      value: (_f = (_e = states.registrationFormState) === null || _e === void 0 ? void 0 : _e.initialData) === null || _f === void 0 ? void 0 : _f.password,
-    }
-      : {}), (((_h = (_g = states.registrationFormState) === null || _g === void 0 ? void 0 : _g.validationErrors) === null || _h === void 0 ? void 0 : _h.password) ? {
-      class: sheet$1.classes.ErrorStyle,
-      helpText: ((_k = (_j = states.registrationFormState) === null || _j === void 0 ? void 0 : _j.validationErrors) === null || _k === void 0 ? void 0 : _k.password) ||
-        "Cannot be empty",
-    }
-      : []), { onInput: (input) => states.enableValidation && callbacks.onInput(input) })),
-    states.dynamicValidation));
+`;
+const sheet$1 = createStyleSheet(style$1);
+const styleString$1 = sheet$1.toString();
+function PortalResetPasswordView(props) {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+  const { states, callbacks } = props;
+  return (h("div", { class: sheet$1.classes.InputContainer },
+    h("style", { type: "text/css" },
+      vanillaStyle,
+      styleString$1),
+    h("sl-input", Object.assign({ exportparts: "label: input-label", type: "password", name: "/password", label: states.content.fieldLabel || "Password", required: true, disabled: ((_a = states.registrationFormState) === null || _a === void 0 ? void 0 : _a.loading) || ((_b = states.registrationFormState) === null || _b === void 0 ? void 0 : _b.disabled), validationError: ({ value }) => {
+        if (!value) {
+          return "Cannot be empty";
+        }
+      } }, (((_d = (_c = states.registrationFormState) === null || _c === void 0 ? void 0 : _c.initialData) === null || _d === void 0 ? void 0 : _d.password) ? {
+      value: (_f = (_e = states.registrationFormState) === null || _e === void 0 ? void 0 : _e.initialData) === null || _f === void 0 ? void 0 : _f.password,
+    }
+      : {}), (((_h = (_g = states.registrationFormState) === null || _g === void 0 ? void 0 : _g.validationErrors) === null || _h === void 0 ? void 0 : _h.password) ? {
+      class: sheet$1.classes.ErrorStyle,
+      helpText: ((_k = (_j = states.registrationFormState) === null || _j === void 0 ? void 0 : _j.validationErrors) === null || _k === void 0 ? void 0 : _k.password) ||
+        "Cannot be empty",
+    }
+      : []), { onInput: (input) => states.enableValidation && callbacks.onInput(input) })),
+    states.dynamicValidation));
 }
 
-function usePasswordField(props) {
-  const registrationFormState = d(REGISTRATION_FORM_STATE_CONTEXT);
-  const [dynamicValidation, setDynamicValidation] = useState("");
-  function onInput(input) {
-    const validation = validateNewPassword(input.target.value);
-    setDynamicValidation(validation);
-  }
-  return {
-    states: {
-      enableValidation: !props.disableValidation,
-      dynamicValidation,
-      registrationFormState,
-      content: {
-        fieldLabel: props.fieldLabel,
-      },
-    },
-    callbacks: {
-      onInput,
-    },
-  };
+function usePasswordField(props) {
+  const registrationFormState = d(REGISTRATION_FORM_STATE_CONTEXT);
+  const [dynamicValidation, setDynamicValidation] = useState("");
+  function onInput(input) {
+    const validation = validateNewPassword(input.target.value);
+    setDynamicValidation(validation);
+  }
+  return {
+    states: {
+      enableValidation: !props.disableValidation,
+      dynamicValidation,
+      registrationFormState,
+      content: {
+        fieldLabel: props.fieldLabel,
+      },
+    },
+    callbacks: {
+      onInput,
+    },
+  };
 }
 
-const PortalPasswordField = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.ignored = true;
-    /**
-     * Label for password field
-     *
-     * @uiName Password Label
-     */
-    this.fieldLabel = "Password";
-    /**
-     * Disable live password validation
-     * @uiName Disable Validation
-     */
-    this.disableValidation = false;
-    h$1(this);
-  }
-  disconnectedCallback() { }
-  render() {
-    const { states, callbacks } = isDemo()
-      ? usePasswordFieldDemo(this)
-      : usePasswordField(this);
-    return h(PortalResetPasswordView, { states: states, callbacks: callbacks });
-  }
-};
-function usePasswordFieldDemo(props) {
-  var _a, _b, _c, _d, _e, _f, _g;
-  const [dynamicValidation, setDynamicValidation] = useState("");
-  const [lastValidated, setLastValidated] = useState("");
-  if (props.demoData && lastValidated != ((_a = props === null || props === void 0 ? void 0 : props.demoData) === null || _a === void 0 ? void 0 : _a.initValue)) {
-    const validation = validateNewPassword(((_b = props === null || props === void 0 ? void 0 : props.demoData) === null || _b === void 0 ? void 0 : _b.initValue) || "");
-    setDynamicValidation(((_c = props === null || props === void 0 ? void 0 : props.demoData) === null || _c === void 0 ? void 0 : _c.initValue) === "" ? "" : validation);
-    setLastValidated((_d = props === null || props === void 0 ? void 0 : props.demoData) === null || _d === void 0 ? void 0 : _d.initValue);
-  }
-  function onInput(input) {
-    const validation = validateNewPassword(input.target.value);
-    setDynamicValidation(validation);
-  }
-  return cjs({
-    states: {
-      enableValidation: !props.disableValidation,
-      dynamicValidation,
-      registrationFormState: ((_f = (_e = props === null || props === void 0 ? void 0 : props.demoData) === null || _e === void 0 ? void 0 : _e.states) === null || _f === void 0 ? void 0 : _f.registrationFormState) || {},
-      content: {
-        fieldLabel: props.fieldLabel,
-      },
-    },
-    callbacks: {
-      onInput,
-    },
-  }, ((_g = props === null || props === void 0 ? void 0 : props.demoData) === null || _g === void 0 ? void 0 : _g.states) || {}, { arrayMerge: (_, a) => a });
+const PortalPasswordField = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.ignored = true;
+    /**
+     * Label for password field
+     *
+     * @uiName Password Label
+     */
+    this.fieldLabel = "Password";
+    /**
+     * Disable live password validation
+     * @uiName Disable Validation
+     */
+    this.disableValidation = false;
+    h$1(this);
+  }
+  disconnectedCallback() { }
+  render() {
+    const { states, callbacks } = isDemo()
+      ? usePasswordFieldDemo(this)
+      : usePasswordField(this);
+    return h(PortalResetPasswordView, { states: states, callbacks: callbacks });
+  }
+};
+function usePasswordFieldDemo(props) {
+  var _a, _b, _c, _d, _e, _f, _g;
+  const [dynamicValidation, setDynamicValidation] = useState("");
+  const [lastValidated, setLastValidated] = useState("");
+  if (props.demoData && lastValidated != ((_a = props === null || props === void 0 ? void 0 : props.demoData) === null || _a === void 0 ? void 0 : _a.initValue)) {
+    const validation = validateNewPassword(((_b = props === null || props === void 0 ? void 0 : props.demoData) === null || _b === void 0 ? void 0 : _b.initValue) || "");
+    setDynamicValidation(((_c = props === null || props === void 0 ? void 0 : props.demoData) === null || _c === void 0 ? void 0 : _c.initValue) === "" ? "" : validation);
+    setLastValidated((_d = props === null || props === void 0 ? void 0 : props.demoData) === null || _d === void 0 ? void 0 : _d.initValue);
+  }
+  function onInput(input) {
+    const validation = validateNewPassword(input.target.value);
+    setDynamicValidation(validation);
+  }
+  return cjs({
+    states: {
+      enableValidation: !props.disableValidation,
+      dynamicValidation,
+      registrationFormState: ((_f = (_e = props === null || props === void 0 ? void 0 : props.demoData) === null || _e === void 0 ? void 0 : _e.states) === null || _f === void 0 ? void 0 : _f.registrationFormState) || {},
+      content: {
+        fieldLabel: props.fieldLabel,
+      },
+    },
+    callbacks: {
+      onInput,
+    },
+  }, ((_g = props === null || props === void 0 ? void 0 : props.demoData) === null || _g === void 0 ? void 0 : _g.states) || {}, { arrayMerge: (_, a) => a });
 }
 
 export { PortalPasswordField as sqm_password_field };

package/dist/esm/sqm-popup-container.entry.js

@@ -1,65 +1,65 @@
 import { h, c as Host, r as registerInstance } from './index-17b4da69.js';
-import { m as h$1 } from './stencil-hooks.module-eefa3570.js';
-import './use-callback-684c8bb7.js';
-import { U } from './index.module-14794b69.js';
-import { g as getProps } from './utils-334c1e34.js';
+import { m as h$1 } from './stencil-hooks.module-203eab48.js';
+import './use-callback-f03b0607.js';
+import { U } from './index.module-48cc9ee0.js';
+import { g as getProps } from './utils-d7bbb0e2.js';
 
-const PopupContainerView = (props) => {
-  const { states, callbacks } = props;
-  const { styles } = states;
-  return (h(Host, { class: "squatch-container" },
-    h("div", { style: { padding: props.states.styles.padding } },
-      styles.closeButton && (h("span", { class: "close squatch-header-close", "data-close-panel": "#squatch-panel", onClick: () => callbacks.closePopup() }, styles.closeButtonText)),
-      h("slot", null),
-      styles.poweredBy ? (h("a", { class: "sqh-attribution", href: "https://www.saasquatch.com/?utm_source=app&utm_medium=user-widget&utm_campaign=referral-widget", target: "_blank" }, "Powered By")) : (""))));
+const PopupContainerView = (props) => {
+  const { states, callbacks } = props;
+  const { styles } = states;
+  return (h(Host, { class: "squatch-container" },
+    h("div", { style: { padding: props.states.styles.padding } },
+      styles.closeButton && (h("span", { class: "close squatch-header-close", "data-close-panel": "#squatch-panel", onClick: () => callbacks.closePopup() }, styles.closeButtonText)),
+      h("slot", null),
+      styles.poweredBy ? (h("a", { class: "sqh-attribution", href: "https://www.saasquatch.com/?utm_source=app&utm_medium=user-widget&utm_campaign=referral-widget", target: "_blank" }, "Powered By")) : (""))));
 };
 
-function usePopupContainer(props) {
-  const engagementMedium = U();
-  function closePopup() {
-    var _a;
-    if (U() === "POPUP") {
-      (_a = window.frameElement["squatchJsApi"]) === null || _a === void 0 ? void 0 : _a.close();
-    }
-  }
-  const popupPadding = props.popupPadding
-    ? props.popupPadding === "none"
-      ? "0"
-      : `var(--sl-spacing-${props.popupPadding})`
-    : "var(--sl-spacing-medium)";
-  const embedPadding = props.embedPadding
-    ? props.embedPadding === "none"
-      ? "0"
-      : `var(--sl-spacing-${props.embedPadding})`
-    : "0";
-  const padding = U() === "POPUP" ? popupPadding : embedPadding;
-  return {
-    states: {
-      showCloseButton: props.closeButton && engagementMedium === "POPUP",
-      styles: {
-        ...props,
-        padding,
-        closeButtonText: props.closeButtonText ? props.closeButtonText : "X",
-      },
-    },
-    data: {},
-    callbacks: { closePopup },
-  };
+function usePopupContainer(props) {
+  const engagementMedium = U();
+  function closePopup() {
+    var _a;
+    if (U() === "POPUP") {
+      (_a = window.frameElement["squatchJsApi"]) === null || _a === void 0 ? void 0 : _a.close();
+    }
+  }
+  const popupPadding = props.popupPadding
+    ? props.popupPadding === "none"
+      ? "0"
+      : `var(--sl-spacing-${props.popupPadding})`
+    : "var(--sl-spacing-medium)";
+  const embedPadding = props.embedPadding
+    ? props.embedPadding === "none"
+      ? "0"
+      : `var(--sl-spacing-${props.embedPadding})`
+    : "0";
+  const padding = U() === "POPUP" ? popupPadding : embedPadding;
+  return {
+    states: {
+      showCloseButton: props.closeButton && engagementMedium === "POPUP",
+      styles: {
+        ...props,
+        padding,
+        closeButtonText: props.closeButtonText ? props.closeButtonText : "X",
+      },
+    },
+    data: {},
+    callbacks: { closePopup },
+  };
 }
 
 const sqmPopupContainerCss = ".squatch-header-close{position:absolute;right:20px;top:10px;cursor:pointer}.squatch-container{background-color:var(--widget-background-color);display:block}";
 
-const PopupContainer = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    h$1(this);
-  }
-  disconnectedCallback() { }
-  render() {
-    const thisProps = getProps(this);
-    return h(PopupContainerView, Object.assign({}, usePopupContainer(thisProps)));
-  }
-};
+const PopupContainer = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    h$1(this);
+  }
+  disconnectedCallback() { }
+  render() {
+    const thisProps = getProps(this);
+    return h(PopupContainerView, Object.assign({}, usePopupContainer(thisProps)));
+  }
+};
 PopupContainer.style = sqmPopupContainerCss;
 
 export { PopupContainer as sqm_popup_container };

package/dist/esm/sqm-portal-container-view-e82d4877.js

@@ -0,0 +1,55 @@
+import { h } from './index-17b4da69.js';
+import { c as createStyleSheet } from './JSS-506b9295.js';
+
+function PortalSectionView(props) {
+  // Due to sole usage of props, not feasiable to move out of render function
+  const style = {
+    LabelContainer: {
+      "margin-bottom": props.labelMargin === "none"
+        ? props.labelMargin
+        : `var(--sl-spacing-${props.labelMargin})`,
+    },
+    SectionContainer: {
+      textAlign: props.textAlign || "left",
+      padding: props.padding === "none" ? "0" : `var(--sl-spacing-${props.padding})`,
+    },
+  };
+  const sheet = createStyleSheet(style);
+  const styleString = sheet.toString();
+  return (h("div", { class: sheet.classes.SectionContainer },
+    h("style", { type: "text/css" }, styleString),
+    h("div", { class: sheet.classes.LabelContainer }, props.label),
+    props.content));
+}
+
+function PortalContainerView(props, children) {
+  const style = {
+    Container: {
+      boxSizing: "border-box",
+      display: props.display || "grid",
+      flexWrap: "wrap",
+      "grid-template-columns": props.direction === "row"
+        ? `repeat(auto-fill, minmax(${props.minWidth}, auto))`
+        : "100%",
+      "grid-gap": `var(--sl-spacing-${props.gap})`,
+      padding: props.padding === "none" ? "0" : `var(--sl-spacing-${props.padding})`,
+      maxWidth: props.maxWidth,
+      margin: props.center && "auto",
+      justifyContent: props.justifyContent,
+    },
+  };
+  const vanillaStyle = `
+  :host{
+    width: 100%;
+    display: block;
+  }`;
+  const sheet = createStyleSheet(style);
+  const styleString = sheet.toString();
+  return (h("div", { class: sheet.classes.Container },
+    h("style", { type: "text/css" },
+      vanillaStyle,
+      styleString),
+    children));
+}
+
+export { PortalContainerView as P, PortalSectionView as a };