@saasquatch/mint-components 1.6.1-9 → 1.6.2-2

package/dist/cjs/sqm-portal-registration-form.cjs.entry.js

@@ -0,0 +1,309 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-b0129cd6.js');
+const stencilHooks_module = require('./stencil-hooks.module-87a1f4f7.js');
+const useCallback = require('./use-callback-e754042f.js');
+const index_module = require('./index.module-ffe1aa35.js');
+require('./extends-08099afd.js');
+const jsonpointer = require('./jsonpointer-11327262.js');
+const cjs = require('./cjs-1066ec21.js');
+const mixins = require('./mixins-fe9d4112.js');
+const JSS = require('./JSS-97fd087e.js');
+const sqmTextSpanView = require('./sqm-text-span-view-2c7d94b5.js');
+const useValidationState = require('./useValidationState-63f00763.js');
+
+const style = {
+  Wrapper: { ...mixins.AuthWrapper, "max-width": "600px" },
+  Column: mixins.AuthColumn,
+  HostBlock: mixins.HostBlock,
+  ":host": {
+    margin: "0 auto",
+    width: "100%",
+  },
+  ButtonsContainer: mixins.AuthButtonsContainer,
+  ErrorStyle: mixins.ErrorStyles,
+};
+const vanillaStyle = `
+sqm-portal-register {
+  margin: 0 auto;
+  width: 100%;
+  display: block;
+}
+
+:host{
+  display: block;
+}
+
+:host([hidden]) {
+  display: none;
+}
+`;
+const sheet = JSS.createStyleSheet(style);
+const styleString = sheet.toString();
+function PortalRegistrationFormView(props) {
+  var _a, _b, _c, _d, _e, _f, _g, _h;
+  const { states, refs, callbacks, content } = props;
+  if (states.error) {
+    window.scrollTo({ top: 0, left: 0, behavior: "smooth" });
+  }
+  return (index.h("div", { class: sheet.classes.Wrapper },
+    index.h("style", { type: "text/css" },
+      vanillaStyle,
+      styleString),
+    index.h(sqmTextSpanView.TextSpanView, { type: "h3" }, content.pageLabel),
+    index.h("sl-form", { class: sheet.classes.Column, "onSl-submit": callbacks.submit, ref: (el) => (refs.formRef.current = el), novalidate: true },
+      states.error && (index.h("sqm-form-message", { type: "error", exportparts: "erroralert-icon" },
+        index.h("div", { part: "erroralert-text" }, props.states.error))),
+      content.formData,
+      !states.hideInputs && (index.h("sl-input", Object.assign({ exportparts: "label: input-label", type: "email", name: "/email", label: content.emailLabel || "Email", disabled: states.loading, required: true, validationError: ({ value }) => {
+          if (!value) {
+            return "Cannot be empty";
+          }
+          // this matches shoelace validation, but could be better
+          if (!value.includes("@")) {
+            return "Must be a valid email address";
+          }
+        } }, (((_b = (_a = states.validationState) === null || _a === void 0 ? void 0 : _a.validationErrors) === null || _b === void 0 ? void 0 : _b.email) ? {
+        class: sheet.classes.ErrorStyle,
+        helpText: ((_d = (_c = states.validationState) === null || _c === void 0 ? void 0 : _c.validationErrors) === null || _d === void 0 ? void 0 : _d.email) ||
+          "Cannot be empty",
+      }
+        : [])))),
+      !states.hideInputs && (index.h("sqm-password-field", { fieldLabel: content.passwordLabel, "enable-validation": states.enablePasswordValidation })),
+      content.passwordField,
+      !states.hideInputs && states.confirmPassword && (index.h("sl-input", Object.assign({ exportparts: "label: input-label", type: "password", name: "/confirmPassword", label: content.confirmPasswordLabel, disabled: states.loading, required: true }, (((_f = (_e = states.validationState) === null || _e === void 0 ? void 0 : _e.validationErrors) === null || _f === void 0 ? void 0 : _f.confirmPassword) ? {
+        class: sheet.classes.ErrorStyle,
+        helpText: ((_h = (_g = states.validationState) === null || _g === void 0 ? void 0 : _g.validationErrors) === null || _h === void 0 ? void 0 : _h.confirmPassword) ||
+          "Cannot be empty",
+      }
+        : [])))),
+      content.terms,
+      index.h("div", { class: sheet.classes.ButtonsContainer },
+        index.h("sl-button", { submit: true, loading: states.loading, exportparts: "base: primarybutton-base", type: "primary" }, content.submitLabel || "Register"),
+        content.secondaryButton))));
+}
+
+function usePortalRegistrationForm(props) {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+  const formRef = stencilHooks_module.useRef(null);
+  const { validationState, setValidationState } = useValidationState.useValidationState({});
+  const [request, { loading, errors, data, formError }] = index_module.We();
+  const submit = async (event) => {
+    let formControls = event.target.getFormControls();
+    let formData = {};
+    let validationErrors = {};
+    formControls === null || formControls === void 0 ? void 0 : formControls.forEach((control) => {
+      if (!control.name)
+        return;
+      const key = control.name;
+      const value = control.value;
+      jsonpointer.jsonpointer.set(formData, key, value);
+      // required validation
+      if (control.required && !value) {
+        jsonpointer.jsonpointer.set(validationErrors, key, "Cannot be empty");
+      }
+      // custom validation
+      if (typeof control.validationError === "function") {
+        const validate = control.validationError;
+        const validationError = validate({ control, key, value });
+        if (validationError)
+          jsonpointer.jsonpointer.set(validationErrors, key, validationError);
+      }
+    });
+    if ((props.confirmPassword || formData.confirmPassword) &&
+      formData.password !== formData.confirmPassword) {
+      validationErrors = {
+        ...validationErrors,
+        confirmPassword: "Passwords do not match.",
+      };
+    }
+    setValidationState({ error: "", validationErrors });
+    if (Object.keys(validationErrors).length) {
+      // early return for validation errors
+      return;
+    }
+    const { email, password } = formData;
+    delete formData.email;
+    delete formData.password;
+    delete formData.confirmPassword;
+    formData = { ...formData };
+    const redirectPath = props.redirectPath;
+    const variables = {
+      email,
+      password,
+      formData,
+      redirectPath,
+    };
+    try {
+      await request(variables);
+    }
+    catch (error) {
+      setValidationState({ error: "Network request failed." });
+    }
+  };
+  const inputFunction = useCallback.useCallback((e) => {
+    var _a, _b;
+    const name = (_b = (_a = e.target) === null || _a === void 0 ? void 0 : _a.type) === null || _b === void 0 ? void 0 : _b.toLowerCase();
+    if (name !== "tel")
+      return;
+    const asYouType = new useValidationState.AsYouType("US");
+    e.target.value = asYouType.input(e.target.value);
+  }, []);
+  stencilHooks_module.useEffect(() => {
+    var _a;
+    const managedIdentityResponse = (_a = data === null || data === void 0 ? void 0 : data.submitForm) === null || _a === void 0 ? void 0 : _a.results.find((result) => result.formHandler.namespace === "identity");
+    if (managedIdentityResponse &&
+      managedIdentityResponse.result.results.length &&
+      managedIdentityResponse.result.results[0].success &&
+      managedIdentityResponse.result.results[0].data.token) {
+      index_module.In.push(props.nextPage);
+    }
+  }, [data === null || data === void 0 ? void 0 : data.submitForm]);
+  stencilHooks_module.useEffect(() => {
+    if (!formRef.current)
+      return;
+    const form = formRef.current;
+    form.addEventListener("sl-input", inputFunction);
+    return () => {
+      form.removeEventListener("sl-input", inputFunction);
+    };
+  }, [formRef.current]);
+  let errorMessage = "";
+  if ((_a = errors === null || errors === void 0 ? void 0 : errors.response) === null || _a === void 0 ? void 0 : _a["error"]) {
+    errorMessage = "Network request failed";
+  }
+  else if ((errors === null || errors === void 0 ? void 0 : errors.message) && !((_b = errors === null || errors === void 0 ? void 0 : errors.response) === null || _b === void 0 ? void 0 : _b.errors.length)) {
+    errorMessage = "Network request failed";
+  }
+  else {
+    errorMessage =
+      formError || ((_f = (_e = (_d = (_c = errors === null || errors === void 0 ? void 0 : errors.response) === null || _c === void 0 ? void 0 : _c.errors) === null || _d === void 0 ? void 0 : _d[0]) === null || _e === void 0 ? void 0 : _e.extensions) === null || _f === void 0 ? void 0 : _f.message) || ((_j = (_h = (_g = errors === null || errors === void 0 ? void 0 : errors.response) === null || _g === void 0 ? void 0 : _g.errors) === null || _h === void 0 ? void 0 : _h[0]) === null || _j === void 0 ? void 0 : _j.message) || (validationState === null || validationState === void 0 ? void 0 : validationState.error);
+  }
+  return {
+    states: {
+      loading,
+      error: errorMessage,
+      validationState,
+      confirmPassword: props.confirmPassword,
+      hideInputs: props.hideInputs,
+      loginPath: props.loginPath,
+    },
+    callbacks: {
+      submit,
+      inputFunction,
+    },
+    refs: {
+      formRef,
+    },
+  };
+}
+
+const PortalRegistrationForm = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.ignored = true;
+    /**
+     * Page navigated to after registration
+     *
+     * @uiName Next Page
+     */
+    this.nextPage = "/";
+    /**
+     * The page that users are redirected to from the verification email.
+     *
+     * @uiName Email Redirection Base Path
+     */
+    this.redirectPath = "/verifyEmail";
+    /**
+     * @uiName Email Label
+     */
+    this.emailLabel = "Email";
+    /**
+     * @uiName Password Label
+     */
+    this.passwordLabel = "Password";
+    /**
+     * @uiName Submit Button Text
+     */
+    this.submitLabel = "Register";
+    /**
+     * @uiName Login Button Text
+     */
+    this.loginLabel = "Sign in";
+    /**
+     * @uiName Confirm Password Label
+     */
+    this.confirmPasswordLabel = "Confirm Password";
+    /**
+     * Show or hide the confirm password input
+     *
+     * @uiName Show Confirm Password Field
+     * @default
+     */
+    this.confirmPassword = false;
+    /**
+     * @uiName Enable Password Validation
+     */
+    this.enablePasswordValidation = true;
+    /**
+     * Hide default input fields to use custom fields
+     *
+     * @uiName Hide Default Inputs
+     * @default
+     */
+    this.hideInputs = false;
+    /**
+     * @uiName Heading Label
+     */
+    this.pageLabel = "Register";
+    /**
+     * Login button redirection path
+     *
+     * @uiName Login Path
+     */
+    this.loginPath = "/login";
+    stencilHooks_module.h$1(this);
+  }
+  disconnectedCallback() { }
+  render() {
+    const { states, callbacks, refs } = index_module.L()
+      ? useRegisterDemo(this)
+      : usePortalRegistrationForm(this);
+    const content = {
+      formData: index.h("slot", { name: "formData" }),
+      secondaryButton: (index.h("slot", { name: "secondaryButton" }, index.h("sl-button", { type: "text", disabled: states.loading, onClick: () => index_module.In.push(states.loginPath) }, this.loginLabel))),
+      terms: index.h("slot", { name: "terms" }),
+      emailLabel: this.emailLabel,
+      passwordLabel: this.passwordLabel,
+      submitLabel: this.submitLabel,
+      pageLabel: this.pageLabel,
+      confirmPasswordLabel: this.confirmPasswordLabel,
+    };
+    return (index.h(PortalRegistrationFormView, { states: states, callbacks: callbacks, content: content, refs: refs }));
+  }
+};
+function useRegisterDemo(props) {
+  return cjs.cjs({
+    states: {
+      error: "",
+      loading: false,
+      confirmPassword: true,
+      hideInputs: props.hideInputs || false,
+      customPasswordField: false,
+      loginPath: "/login",
+    },
+    callbacks: {
+      submit: async (_event) => {
+        console.log("submit");
+      },
+      inputFunction: () => { },
+    },
+    refs: {
+      formRef: {},
+    },
+  }, props.demoData || {}, { arrayMerge: (_, a) => a });
+}
+
+exports.sqm_portal_registration_form = PortalRegistrationForm;

package/dist/cjs/sqm-portal-reset-password.cjs.entry.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-b0129cd6.js');
 const stencilHooks_module = require('./stencil-hooks.module-87a1f4f7.js');
 require('./use-callback-e754042f.js');
-const index_module = require('./index.module-fb61a163.js');
+const index_module = require('./index.module-ffe1aa35.js');
 require('./extends-08099afd.js');
 const jsonpointer = require('./jsonpointer-11327262.js');
 const cjs = require('./cjs-1066ec21.js');
@@ -16,11 +16,11 @@ require('./sqm-text-span-view-2c7d94b5.js');
 const sqmPortalResetPasswordView = require('./sqm-portal-reset-password-view-f8dc0b79.js');
 
 function usePortalResetPassword(props) {
-  var _a, _b, _c, _d, _e, _f;
+  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
   const [reset, setReset] = stencilHooks_module.useState(false);
   const [error, setError] = stencilHooks_module.useState("");
-  const [verifyPasswordResetCode, verifyPasswordResetCodeState] = index_module.Ne();
-  const [resetPassword, resetPasswordState] = index_module.Ve();
+  const [verifyPasswordResetCode, verifyPasswordResetCodeState] = index_module.Ke();
+  const [resetPassword, resetPasswordState] = index_module.Ge();
   const urlParams = new URLSearchParams(window.location.search);
   const oobCode = urlParams.get("oobCode");
   urlParams.delete("oobCode");
@@ -41,10 +41,10 @@ function usePortalResetPassword(props) {
   const gotoNextPage = () => {
     urlParams.delete("nextPage");
     const url = utils.sanitizeUrlPath(nextPageOverride || props.nextPage);
-    index_module.dn.push(url.href);
+    index_module.In.push(url.href);
   };
   const failed = () => {
-    index_module.dn.push({
+    index_module.In.push({
       pathname: props.failedPage,
       search: urlParams.toString() && "?" + urlParams.toString(),
     });
@@ -67,14 +67,21 @@ function usePortalResetPassword(props) {
       setError("Network request failed.");
     }
   }, [verifyPasswordResetCodeState === null || verifyPasswordResetCodeState === void 0 ? void 0 : verifyPasswordResetCodeState.errors]);
+  stencilHooks_module.useEffect(() => {
+    var _a;
+    if ((_a = resetPasswordState === null || resetPasswordState === void 0 ? void 0 : resetPasswordState.errors) === null || _a === void 0 ? void 0 : _a.message) {
+      setError("Network request failed.");
+    }
+  }, [resetPasswordState === null || resetPasswordState === void 0 ? void 0 : resetPasswordState.errors]);
   return {
     states: {
       loading: resetPasswordState.loading,
       reset,
       confirmPassword: props.confirmPassword,
-      error: ((_e = (_d = (_c = (_b = resetPasswordState.errors) === null || _b === void 0 ? void 0 : _b.response) === null || _c === void 0 ? void 0 : _c.errors) === null || _d === void 0 ? void 0 : _d[0]) === null || _e === void 0 ? void 0 : _e.message) || error,
+      error: ((_f = (_e = (_d = (_c = (_b = resetPasswordState.errors) === null || _b === void 0 ? void 0 : _b.response) === null || _c === void 0 ? void 0 : _c.errors) === null || _d === void 0 ? void 0 : _d[0]) === null || _e === void 0 ? void 0 : _e.extensions) === null || _f === void 0 ? void 0 : _f.message) || ((_k = (_j = (_h = (_g = resetPasswordState.errors) === null || _g === void 0 ? void 0 : _g.response) === null || _h === void 0 ? void 0 : _h.errors) === null || _j === void 0 ? void 0 : _j[0]) === null || _k === void 0 ? void 0 : _k.message) ||
+        error,
       oobCodeValidating: verifyPasswordResetCodeState.loading,
-      oobCodeValid: (_f = verifyPasswordResetCodeState.data) === null || _f === void 0 ? void 0 : _f.verifyManagedIdentityPasswordResetCode.success,
+      oobCodeValid: (_l = verifyPasswordResetCodeState.data) === null || _l === void 0 ? void 0 : _l.verifyManagedIdentityPasswordResetCode.success,
       content: {
         passwordResetHeader: props.passwordResetHeader,
         resetPasswordHeader: props.resetPasswordHeader,
@@ -108,6 +115,7 @@ const PortalResetPassword = class {
      * Show or hide confirm password field
      *
      * @uiName Show Confirm Password
+     * @default
      */
     this.confirmPassword = false;
     /**
@@ -142,7 +150,7 @@ const PortalResetPassword = class {
   }
   disconnectedCallback() { }
   render() {
-    const { states, callbacks } = index_module.jn()
+    const { states, callbacks } = index_module.L()
       ? usePortalResetPasswordDemo(this)
       : usePortalResetPassword(this);
     return index.h(sqmPortalResetPasswordView.PortalResetPasswordView, { states: states, callbacks: callbacks });

package/dist/cjs/sqm-portal-verify-email.cjs.entry.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-b0129cd6.js');
 const stencilHooks_module = require('./stencil-hooks.module-87a1f4f7.js');
 require('./use-callback-e754042f.js');
-const index_module = require('./index.module-fb61a163.js');
+const index_module = require('./index.module-ffe1aa35.js');
 require('./extends-08099afd.js');
 const cjs = require('./cjs-1066ec21.js');
 require('./mixins-fe9d4112.js');
@@ -15,18 +15,18 @@ require('./sqm-text-span-view-2c7d94b5.js');
 const sqmPortalVerifyEmailView = require('./sqm-portal-verify-email-view-cc59877c.js');
 
 function usePortalVerifyEmail({ nextPage, failedPage }) {
-  var _a, _b, _c, _d, _e;
+  var _a, _b, _c, _d, _e, _f, _g, _h, _j;
   const [verified, setVerified] = stencilHooks_module.useState(false);
   const [disableContinue, setDisableContinue] = stencilHooks_module.useState(true);
-  const userIdent = index_module.ie();
-  const [request, { loading, data, errors }] = index_module.Ke();
+  const userIdent = index_module.ae();
+  const [request, { loading, data, errors }] = index_module.dn();
   const [error, setError] = stencilHooks_module.useState("");
   const urlParams = new URLSearchParams(window.location.search);
   const oobCode = urlParams.get("oobCode");
   const nextPageOverride = urlParams.get("nextPage");
   urlParams.delete("oobCode");
   const failed = () => {
-    return index_module.dn.push({
+    return index_module.In.push({
       pathname: failedPage,
       search: urlParams.toString() && "?" + urlParams.toString(),
     });
@@ -34,7 +34,7 @@ function usePortalVerifyEmail({ nextPage, failedPage }) {
   const gotoNextPage = () => {
     urlParams.delete("nextPage");
     const url = utils.sanitizeUrlPath(nextPageOverride || nextPage);
-    index_module.dn.push(url.href);
+    index_module.In.push(url.href);
   };
   const submit = async () => {
     if (oobCode) {
@@ -78,7 +78,8 @@ function usePortalVerifyEmail({ nextPage, failedPage }) {
   return {
     states: {
       loading: loading || disableContinue,
-      error: ((_e = (_d = (_c = errors === null || errors === void 0 ? void 0 : errors.response) === null || _c === void 0 ? void 0 : _c.errors) === null || _d === void 0 ? void 0 : _d[0]) === null || _e === void 0 ? void 0 : _e.message) || error,
+      error: ((_f = (_e = (_d = (_c = errors === null || errors === void 0 ? void 0 : errors.response) === null || _c === void 0 ? void 0 : _c.errors) === null || _d === void 0 ? void 0 : _d[0]) === null || _e === void 0 ? void 0 : _e.extensions) === null || _f === void 0 ? void 0 : _f.message) || ((_j = (_h = (_g = errors === null || errors === void 0 ? void 0 : errors.response) === null || _g === void 0 ? void 0 : _g.errors) === null || _h === void 0 ? void 0 : _h[0]) === null || _j === void 0 ? void 0 : _j.message) ||
+        error,
       verified,
     },
     data: {
@@ -111,7 +112,7 @@ const PortalVerifyEmail = class {
   }
   disconnectedCallback() { }
   render() {
-    const { states, data, callbacks } = index_module.jn()
+    const { states, data, callbacks } = index_module.L()
       ? usePortalVerifyEmailDemo(this)
       : usePortalVerifyEmail(this);
     return (index.h(sqmPortalVerifyEmailView.PortalVerifyEmailView, { states: states, data: data, callbacks: callbacks }));

package/dist/cjs/sqm-qa-referral-card.cjs.entry.js

@@ -0,0 +1,89 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-b0129cd6.js');
+const stencilHooks_module = require('./stencil-hooks.module-87a1f4f7.js');
+require('./extends-08099afd.js');
+const JSS = require('./JSS-97fd087e.js');
+const utils = require('./utils-6847bc06.js');
+
+const style = {
+  Container: {
+    display: "flex",
+    color: "var(--sl-color-neutral-900)",
+    background: "var(--sl-color-neutral-0)",
+    "& .left": {
+      boxSizing: "border-box",
+      width: "50%",
+      padding: "var(--sl-spacing-large)",
+      paddingRight: "var(--sl-spacing-medium)",
+      "@media (max-width: 499px)": {
+        width: "100%",
+        padding: "0",
+        marginBottom: "var(--sl-spacing-xx-large)",
+      },
+    },
+    "& .right": {
+      boxSizing: "border-box",
+      width: "50%",
+      padding: "var(--sl-spacing-large)",
+      paddingLeft: "var(--sl-spacing-medium)",
+      "@media (max-width: 499px)": {
+        width: "100%",
+        padding: "0",
+      },
+    },
+    border: "1px solid var(--sl-color-neutral-300)",
+    borderRadius: "var(--sl-border-radius-large)",
+    "@media (max-width: 499px)": {
+      flexDirection: "column",
+      border: "none",
+    },
+  },
+};
+const sheet = JSS.createStyleSheet(style);
+const styleString = sheet.toString();
+const vanillaStyle = `
+    :host{
+      display: block;   
+    }
+  `;
+function ReferralCardView(props) {
+  return (index.h("div", null,
+    index.h("style", { type: "text/css" },
+      styleString,
+      vanillaStyle),
+    index.h("div", { class: sheet.classes.Container },
+      index.h("div", { class: "left", style: {
+          alignSelf: props.verticalAlignment,
+        } }, props.slots.left),
+      index.h("div", { class: "right", style: {
+          alignSelf: props.verticalAlignment,
+        } }, props.slots.right))));
+}
+
+const ReferralCard = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.ignored = true;
+    /**
+     * @uiName Vertical Aligment
+     * @uiType string
+     * @uiEnum ["start", "center", "end"]
+     * @uiEnumNames ["Top", "Center", "Bottom"]
+     */
+    this.verticalAlignment = "start";
+    stencilHooks_module.h$1(this);
+  }
+  disconnectedCallback() { }
+  render() {
+    const slots = {
+      left: index.h("slot", { name: "left" }),
+      right: index.h("slot", { name: "right" }),
+    };
+    return (index.h(ReferralCardView, Object.assign({}, utils.getProps(this), { slots: slots }), index.h("slot", null)));
+  }
+};
+
+exports.sqm_qa_referral_card = ReferralCard;

package/dist/cjs/sqm-qa-tabs.cjs.entry.js

@@ -0,0 +1,100 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-b0129cd6.js');
+const stencilHooks_module = require('./stencil-hooks.module-87a1f4f7.js');
+require('./use-callback-e754042f.js');
+const index_module = require('./index.module-ffe1aa35.js');
+require('./extends-08099afd.js');
+const useChildElements = require('./useChildElements-a7a7b921.js');
+const utils = require('./utils-6847bc06.js');
+
+const TabsView = ({ content, placement, }) => {
+  // Vertical padding for top & bottom placement, horizontal for left & right.
+  const padding = !placement || placement === "top" || placement === "bottom"
+    ? "var(--sl-spacing-x-large) 0;"
+    : "0 var(--sl-spacing-xx-large);";
+  const vanillaStyle = `
+    sl-tab-panel::part(base) {
+      padding: ${padding};
+    }
+  `;
+  const host = stencilHooks_module.l();
+  return (index.h(index.Host, null,
+    index.h("style", { type: "text/css" }, vanillaStyle),
+    index.h("sl-tab-group", { placement: placement }, content.tabs.map((tab) => {
+      const slotName = tab.getAttribute("slot");
+      if (tab.tagName === "RAISINS-PLOP-TARGET") {
+        return (index.h("sl-tab", { slot: "nav" },
+          index.h("div", { style: { marginTop: "10px" } },
+            index.h("slot", { name: slotName }))));
+      }
+      return [
+        index.h("sl-tab", { slot: "nav", panel: slotName, id: tab.getAttribute("id") || slotName }, tab.getAttribute("header")),
+        index.h("sl-tab-panel", { name: slotName },
+          index.h("slot", { name: slotName })),
+      ];
+    })),
+    index.h("div", { style: { display: "none" } },
+      index.h("slot", null))));
+};
+
+const REVEAL_EVENT = "sq:reveal";
+function useTabs() {
+  const rawTabs = useChildElements.useChildElements();
+  const host = index_module.P();
+  const tabs = stencilHooks_module.useMemo(() => rawTabs
+    .filter((tab) => tab.tagName === "SQM-TAB" || tab.tagName === "RAISINS-PLOP-TARGET")
+    .map((tab, i) => {
+    if (tab.tagName === "RAISINS-PLOP-TARGET") {
+      const plopTab = tab;
+      plopTab.style.position = "absolute";
+      plopTab.style.left = "6px";
+      const plopTarget = tab.firstElementChild
+        .childNodes[1];
+      plopTarget.innerHTML = "＋";
+      plopTarget.style.lineHeight = "20px";
+    }
+    tab.setAttribute("slot", "tab-" + i);
+    // set id as targets for scroll component
+    tab.setAttribute("id", "tab-" + i);
+    return tab;
+  }), [rawTabs]);
+  stencilHooks_module.useEffect(() => {
+    const listener = (e) => {
+      var _a;
+      const target = e.target;
+      // Prevents recursively nested components from sending requests up all the way
+      e.stopPropagation();
+      if (!target)
+        return;
+      const tabsComponent = target.closest("sqm-tabs");
+      if (!host.contains(target) || !tabsComponent)
+        return;
+      const targetTab = target.closest("sqm-tab");
+      const tabGroup = tabsComponent.shadowRoot.querySelector("sl-tab-group");
+      (_a = tabGroup) === null || _a === void 0 ? void 0 : _a.show(targetTab.id);
+    };
+    host.addEventListener(REVEAL_EVENT, listener);
+    return () => {
+      host.removeEventListener(REVEAL_EVENT, listener);
+    };
+  }, []);
+  return { content: { tabs } };
+}
+
+const Tabs = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    stencilHooks_module.h$1(this);
+  }
+  disconnectedCallback() { }
+  render() {
+    const { content } = useTabs();
+    const { placement } = utils.getProps(this);
+    return (index.h(TabsView, { placement: placement, content: content }, index.h("slot", null)));
+  }
+};
+
+exports.sqm_qa_tabs = Tabs;

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

@@ -61,6 +61,7 @@ const ShareButton = class {
      * Description here
      * @uiName Date Interval with default
      * @uiWidget dateRange
+     * @uiWidgetOptions {"allowPastDates":true, "months": 1}
      * @format date-interval
      */
     this.dateInterval = "2020-07-07T12:00:00-08:00/2021-08-08T12:00:00-08:00";