@saasquatch/mint-components 1.7.0-7 → 1.7.0-9

package/dist/collection/components/sqm-hero/sqm-hero.js

@@ -3,9 +3,8 @@ import { withHooks } from "@saasquatch/stencil-hooks";
 import { HeroView } from "./sqm-hero-view";
 import { getProps } from "../../utils/utils";
 /**
- * The hero container
- *
  * @uiName Hero Layout
+ * @slots [{"name":"","title":"Primary Column Content"},{"name":"secondary-column","title":"Secondary Column Content"}]
  */
 export class Hero {
   constructor() {
@@ -13,6 +12,8 @@ export class Hero {
      * Number of columns in the layout
      *
      * @uiName Columns
+     * @uiEnum [1, 2]
+     * @uiEnumNames ["One", "Two"]
      */
     this.columns = 1;
     /**
@@ -65,6 +66,12 @@ export class Hero {
         "tags": [{
             "text": "Columns",
             "name": "uiName"
+          }, {
+            "text": "[1, 2]",
+            "name": "uiEnum"
+          }, {
+            "text": "[\"One\", \"Two\"]",
+            "name": "uiEnumNames"
           }],
         "text": "Number of columns in the layout"
       },

package/dist/collection/components/sqm-hero-image/sqm-hero-image-view.js

@@ -17,7 +17,6 @@ export function HeroImageView(props, children) {
       },
     },
     Image: {
-      borderRadius: props.borderRadius ? props.borderRadius : "none",
       display: "block",
       width: "100%",
       height: "100%",
@@ -48,7 +47,6 @@ export function HeroImageView(props, children) {
       },
     },
     Column: {
-      borderRadius: props.borderRadius ? props.borderRadius : "none",
       display: "flex",
       background: props.backgroundColor || "",
       flexDirection: props.imagePos === "right" ? "row-reverse" : "row",

package/dist/collection/components/sqm-hero-image/sqm-hero-image.js

@@ -5,8 +5,8 @@ import { HeroImageView } from "./sqm-hero-image-view";
 /**
  * @uiName Hero Image
  * @exampleGroup Common Components
- * @example Two Column Layout - <sqm-hero-image image-url="https://res.cloudinary.com/saasquatch/image/upload/v1644000275/squatch-assets/yr6ER3R.png" header="MyCompany Rewards" description="Refer a friend and earn up to $1200 in rewards" layout="columns" image-pos="right" background-color="#F9F9F9"></sqm-hero-image>
- * @example Overlay - <sqm-hero-image image-url="https://res.cloudinary.com/saasquatch/image/upload/v1644000275/squatch-assets/yr6ER3R.png" header="MyCompany Rewards" description="Refer a friend and earn up to $1200 in rewards" layout="overlay" image-pos="center" background-color="#F9F9F9" button-link="https://www.example.com" button-new-tab button-text="Earn!" image-percentage="45" overlay-opacity=".5" padding-image="small" padding-text="xxxx-large"></sqm-hero-image>
+ * @example Two Column Hero Image - <sqm-hero-image image-url="https://res.cloudinary.com/saasquatch/image/upload/v1644000275/squatch-assets/yr6ER3R.png" header="MyCompany Rewards" description="Refer a friend and earn up to $1200 in rewards" layout="columns" image-pos="right" background-color="#F9F9F9"></sqm-hero-image>
+ * @example Overlay Hero Image - <sqm-hero-image image-url="https://res.cloudinary.com/saasquatch/image/upload/v1644000275/squatch-assets/yr6ER3R.png" header="MyCompany Rewards" description="Refer a friend and earn up to $1200 in rewards" layout="overlay" image-pos="center" background-color="#F9F9F9" button-link="https://www.example.com" button-new-tab button-text="Earn!" image-percentage="45" overlay-opacity=".5" padding-image="small" padding-text="xxxx-large"></sqm-hero-image>
  */
 export class HeroImage {
   constructor() {
@@ -484,26 +484,6 @@ export class HeroImage {
       "attribute": "padding-image",
       "reflect": false,
       "defaultValue": "\"none\""
-    },
-    "borderRadius": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [{
-            "text": "Border Radius",
-            "name": "uiName"
-          }],
-        "text": "Configure border radius with pixel amount."
-      },
-      "attribute": "border-radius",
-      "reflect": false
     }
   }; }
 }

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

@@ -6,7 +6,6 @@ export function ImageView(props) {
     Container: {
       display: "flex",
       width: "100%",
-      borderRadius: `${props.borderRadius}px` || "none",
       justifyContent: props.alignment || "center",
       background: props.backgroundColor || "",
     },

package/dist/collection/components/sqm-image/sqm-image.js

@@ -99,7 +99,7 @@ export class Image {
             "text": "color",
             "name": "uiWidget"
           }, {
-            "text": undefined,
+            "text": "color",
             "name": "format"
           }],
         "text": ""
@@ -126,26 +126,6 @@ export class Image {
       },
       "attribute": "min-height",
       "reflect": false
-    },
-    "borderRadius": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [{
-            "text": "Border Radius",
-            "name": "uiName"
-          }],
-        "text": "Configure border radius with pixel amount."
-      },
-      "attribute": "border-radius",
-      "reflect": false
     }
   }; }
 }

package/dist/collection/components/sqm-input-field/InputField.stories.js

@@ -10,7 +10,9 @@ export default {
 };
 const defaultProps = {
   states: {
-    validationErrors: {},
+    registrationFormState: {
+      validationErrors: {},
+    },
   },
   content: {
     fieldName: "field",
@@ -22,6 +24,7 @@ const defaultProps = {
 };
 const defaultRegisterProps = {
   states: {
+    registrationFormState: {},
     error: "",
     loading: false,
     confirmPassword: true,
@@ -41,8 +44,10 @@ export const Default = () => h(InputFieldView, Object.assign({}, defaultProps));
 export const CustomLabel = () => (h(InputFieldView, Object.assign({}, defaultProps, { content: { ...defaultProps.content, fieldLabel: "My Label" } })));
 export const Error = () => (h(InputFieldView, Object.assign({}, defaultProps, { states: {
     ...defaultProps.states,
-    validationErrors: {
-      field: "Cannot be empty",
+    registrationFormState: {
+      validationErrors: {
+        field: "Cannot be empty",
+      },
     },
   } })));
 export const CustomError = () => (h(InputFieldView, Object.assign({}, defaultProps, { content: {
@@ -50,8 +55,10 @@ export const CustomError = () => (h(InputFieldView, Object.assign({}, defaultPro
     errorMessage: "A value must be entered to continue",
   }, states: {
     ...defaultProps.states,
-    validationErrors: {
-      field: "Cannot be empty",
+    registrationFormState: {
+      validationErrors: {
+        field: "Cannot be empty",
+      },
     },
   } })));
 export const DateType = () => {

package/dist/collection/components/sqm-input-field/sqm-input-field-view.js

@@ -20,13 +20,17 @@ jss.setup(preset());
 const sheet = jss.createStyleSheet(style);
 const styleString = sheet.toString();
 export function InputFieldView(props) {
+  var _a, _b, _c, _d, _e, _f, _g;
   const { states, content } = props;
-  const validationErrors = states === null || states === void 0 ? void 0 : states.validationErrors;
+  const validationErrors = (_a = states === null || states === void 0 ? void 0 : states.registrationFormState) === null || _a === void 0 ? void 0 : _a.validationErrors;
   return (h("div", { class: sheet.classes.FieldContainer },
     h("style", { type: "text/css" },
       vanillaStyle,
       styleString),
-    h("sl-input", Object.assign({ exportparts: "label: input-label", name: `/${content.fieldName}`, type: content.fieldType, label: content.fieldLabel }, (!content.fieldOptional ? { required: true } : []), ((validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors[content.fieldName]) ? {
+    h("sl-input", Object.assign({ exportparts: "label: input-label", name: `/${content.fieldName}`, type: content.fieldType, label: content.fieldLabel }, (!content.fieldOptional ? { required: true } : []), { disabled: ((_b = states.registrationFormState) === null || _b === void 0 ? void 0 : _b.loading) || ((_c = states.registrationFormState) === null || _c === void 0 ? void 0 : _c.disabled) }, (((_e = (_d = states.registrationFormState) === null || _d === void 0 ? void 0 : _d.initialData) === null || _e === void 0 ? void 0 : _e[content.fieldName]) ? {
+      value: (_g = (_f = states.registrationFormState) === null || _f === void 0 ? void 0 : _f.initialData) === null || _g === void 0 ? void 0 : _g[content.fieldName],
+    }
+      : {}), ((validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors[content.fieldName]) ? {
       class: sheet.classes.ErrorStyle,
       helpText: intl.formatMessage({
         id: `errorMessage-${content.fieldName}`,

package/dist/collection/components/sqm-input-field/sqm-input-field.js

@@ -7,7 +7,10 @@ import { getMissingProps, getProps } from "../../utils/utils";
 import { InputFieldView } from "./sqm-input-field-view";
 import { useInputField } from "./useInputField";
 /**
- * @uiName Input Field
+ * @uiName Form Input Field
+ * @validParents ["sqm-portal-register","sqm-portal-registration-form"]
+ * @exampleGroup Microsite Components
+ * @example Form Input Field - <sqm-input-field input-label="Field Label" field-type="text" error-message="Cannot be empty"></sqm-input-field>
  */
 export class InputField {
   constructor() {
@@ -63,8 +66,11 @@ export class InputField {
         "tags": [{
             "text": "Input Name Attribute",
             "name": "uiName"
+          }, {
+            "text": undefined,
+            "name": "required"
           }],
-        "text": "Used as the key of the inputs value in form data."
+        "text": "This name is used as the key for this form field on submission. The name must be unique within this specific form."
       },
       "attribute": "field-name",
       "reflect": false
@@ -169,7 +175,7 @@ export class InputField {
       "mutable": false,
       "complexType": {
         "original": "DemoData<InputFieldViewProps>",
-        "resolved": "{ states?: { validationErrors?: ValidationErrors; }; content?: { fieldName: string; fieldLabel: string; fieldType: \"text\" | \"date\" | \"tel\"; fieldOptional?: boolean; errorMessage: string; }; }",
+        "resolved": "{ states?: { registrationFormState?: RegistrationFormState; }; content?: { fieldName: string; fieldLabel: string; fieldType: \"text\" | \"date\" | \"tel\"; fieldOptional?: boolean; errorMessage: string; }; }",
         "references": {
           "DemoData": {
             "location": "import",
@@ -202,7 +208,7 @@ export class InputField {
 function useInputFieldDemo(props) {
   return deepmerge({
     states: {
-      validationErrors: [],
+      registrationFormState: {},
     },
   }, props.demoData || {}, { arrayMerge: (_, a) => a });
 }

package/dist/collection/components/sqm-input-field/useInputField.js

@@ -1,10 +1,10 @@
 import { useDomContext } from "@saasquatch/stencil-hooks";
-import { FORM_VALIDATION_CONTEXT, } from "../sqm-portal-register/useValidationState";
+import { REGISTRATION_FORM_STATE_CONTEXT, } from "../sqm-portal-registration-form/useRegistrationFormState";
 export function useInputField() {
-  const validationState = useDomContext(FORM_VALIDATION_CONTEXT);
+  const registrationFormState = useDomContext(REGISTRATION_FORM_STATE_CONTEXT);
   return {
     states: {
-      validationErrors: validationState === null || validationState === void 0 ? void 0 : validationState.validationErrors,
+      registrationFormState: registrationFormState,
     },
   };
 }

package/dist/collection/components/sqm-name-fields/NameFields.stories.js

@@ -9,7 +9,9 @@ export default {
 };
 const props = {
   states: {
-    validationErrors: undefined,
+    registrationFormState: {
+      validationErrors: undefined,
+    },
     content: {
       firstNameLabel: "First Name",
       lastNameLabel: "Last Name",
@@ -18,9 +20,11 @@ const props = {
 };
 const errorProps = {
   states: {
-    validationErrors: {
-      firstName: "Cannot be empty",
-      lastName: "Cannot be empty",
+    registrationFormState: {
+      validationErrors: {
+        firstName: "Cannot be empty",
+        lastName: "Cannot be empty",
+      },
     },
     content: {
       firstNameLabel: "First Name",

package/dist/collection/components/sqm-name-fields/sqm-name-fields-view.js

@@ -24,18 +24,25 @@ sl-input::part(label){
 const sheet = createStyleSheet(style);
 const styleString = sheet.toString();
 export function NameFieldsView(props) {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
   const { states } = props;
-  const validationErrors = states === null || states === void 0 ? void 0 : states.validationErrors;
+  const validationErrors = (_a = states === null || states === void 0 ? void 0 : states.registrationFormState) === null || _a === void 0 ? void 0 : _a.validationErrors;
   return (h("div", { class: sheet.classes.FieldsContainer },
     h("style", { type: "text/css" },
       vanillaStyle,
       styleString),
-    h("sl-input", Object.assign({ exportparts: "label: input-label", name: "/firstName", type: "text", label: states.content.firstNameLabel, required: true }, ((validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors.firstName) ? {
+    h("sl-input", Object.assign({ exportparts: "label: input-label", name: "/firstName", type: "text", label: states.content.firstNameLabel, required: true, disabled: ((_b = states.registrationFormState) === null || _b === void 0 ? void 0 : _b.loading) || ((_c = states.registrationFormState) === null || _c === void 0 ? void 0 : _c.disabled) }, (((_e = (_d = states.registrationFormState) === null || _d === void 0 ? void 0 : _d.initialData) === null || _e === void 0 ? void 0 : _e.firstName) ? {
+      value: (_g = (_f = states.registrationFormState) === null || _f === void 0 ? void 0 : _f.initialData) === null || _g === void 0 ? void 0 : _g.firstName,
+    }
+      : {}), ((validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors.firstName) ? {
       class: sheet.classes.ErrorStyle,
       helpText: (validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors.firstName) || "Cannot be empty",
     }
       : []))),
-    h("sl-input", Object.assign({ exportparts: "label: input-label", name: "/lastName", type: "text", label: states.content.lastNameLabel, required: true }, ((validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors.lastName) ? {
+    h("sl-input", Object.assign({ exportparts: "label: input-label", name: "/lastName", type: "text", label: states.content.lastNameLabel, required: true, disabled: ((_h = states.registrationFormState) === null || _h === void 0 ? void 0 : _h.loading) || ((_j = states.registrationFormState) === null || _j === void 0 ? void 0 : _j.disabled) }, (((_l = (_k = states.registrationFormState) === null || _k === void 0 ? void 0 : _k.initialData) === null || _l === void 0 ? void 0 : _l.lastName) ? {
+      value: (_o = (_m = states.registrationFormState) === null || _m === void 0 ? void 0 : _m.initialData) === null || _o === void 0 ? void 0 : _o.lastName,
+    }
+      : {}), ((validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors.lastName) ? {
       class: sheet.classes.ErrorStyle,
       helpText: (validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors.lastName) || "Cannot be empty",
     }

package/dist/collection/components/sqm-name-fields/sqm-name-fields.js

@@ -5,7 +5,10 @@ import deepmerge from "deepmerge";
 import { NameFieldsView } from "./sqm-name-fields-view";
 import { useNameFields } from "./useNameFields";
 /**
- * @uiName Name Fields
+ * @uiName Form Name Fields
+ * @validParents ["sqm-portal-register","sqm-portal-registration-form"]
+ * @exampleGroup Microsite Components
+ * @example Form Name Fields - <sqm-name-fields first-name-label="First Name" last-name-label="Last Name"></sqm-name-fields>
  */
 export class NameFields {
   constructor() {
@@ -74,7 +77,7 @@ export class NameFields {
       "mutable": false,
       "complexType": {
         "original": "DemoData<NameFieldsViewProps>",
-        "resolved": "{ states?: { validationErrors?: ValidationErrors; content: { firstNameLabel: string; lastNameLabel: string; }; }; }",
+        "resolved": "{ states?: { registrationFormState?: RegistrationFormState; content: { firstNameLabel: string; lastNameLabel: string; }; }; }",
         "references": {
           "DemoData": {
             "location": "import",
@@ -109,8 +112,8 @@ function useNameFieldsDemo(props) {
     states: {
       validationErrors: [],
       content: {
-        firstNameLabel: "First Name",
-        lastNameLabel: "Last Name",
+        firstNameLabel: props.firstNameLabel,
+        lastNameLabel: props.lastNameLabel,
       },
     },
   }, props.demoData || {}, { arrayMerge: (_, a) => a });

package/dist/collection/components/sqm-name-fields/useNameFields.js

@@ -1,10 +1,10 @@
 import { useDomContext } from "@saasquatch/stencil-hooks";
-import { FORM_VALIDATION_CONTEXT, } from "../sqm-portal-register/useValidationState";
+import { REGISTRATION_FORM_STATE_CONTEXT, } from "../sqm-portal-registration-form/useRegistrationFormState";
 export function useNameFields(props) {
-  const validationState = useDomContext(FORM_VALIDATION_CONTEXT);
+  const registrationFormState = useDomContext(REGISTRATION_FORM_STATE_CONTEXT);
   return {
     states: {
-      validationErrors: validationState === null || validationState === void 0 ? void 0 : validationState.validationErrors,
+      registrationFormState,
       content: {
         lastNameLabel: props.lastNameLabel,
         firstNameLabel: props.firstNameLabel,

package/dist/collection/components/sqm-navigation-sidebar/NavigationSidebar.stories.js

@@ -1,6 +1,4 @@
 import { h } from "@stencil/core";
-import { NavigationSidebarView } from "./sqm-navigation-sidebar-view";
-import { NavigationSidebarItemView } from "../sqm-navigation-sidebar-item/sqm-navigation-sidebar-item-view";
 export default {
   title: "Components/Navigation Sidebar",
 };
@@ -39,7 +37,10 @@ export const DefaultNavigationSidebar = () => {
       path: "/",
     },
   };
-  return (h(NavigationSidebarView, Object.assign({}, barProps),
-    h(NavigationSidebarItemView, Object.assign({}, item1Props)),
-    h(NavigationSidebarItemView, Object.assign({}, item2Props))));
+  return (h("div", null)
+  // <NavigationSidebarView {...barProps}>
+  //   <NavigationSidebarItemView {...item1Props} />
+  //   <NavigationSidebarItemView {...item2Props} />
+  // </NavigationSidebarView>
+  );
 };

package/dist/collection/components/sqm-navigation-sidebar/sqm-navigation-sidebar-view.js

@@ -8,24 +8,163 @@ const style = {
     "box-sizing": "border-box",
     padding: "20px 15px",
     ...gap({ direction: "column", size: "4px" }),
+    "@media screen and (max-width: 799px)": {
+      display: "none",
+    },
   },
 };
 const vanillaStyle = `
-  :host{    
+  @media screen and (max-width: 799px) {
+    :host {
+     max-width: max-content;
+    }
+  }
+  :host {    
     width: 30vw;
     min-width: min-content;
     max-width: 320px;
   }
 `;
+const hamburgerStyle = `
+    * {
+      padding: 0;
+      margin: 0;
+      box-sizing: border-box;
+    }
+
+    .hamburger-container {
+      position: sticky;
+      top: 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      height: 60px;
+      width: 60px;
+      flex-direction: column;
+      z-index: 100;
+      display: none;
+    }
+    .menu-items { 
+      display: none;
+      padding: 20px;
+      border-right: 2px solid #eaeaea;
+      padding-top: 60px;
+      background: white; 
+      max-width: 400px;
+      width: 70vw;
+      height: 100vh;
+      position: absolute;
+      top: 0;
+      right: 0;
+      left: 0px;
+      margin: 0;
+      animation: slideIn 500ms ease-in-out;
+    }
+  
+   @keyframes slideIn {
+      0% {
+        left: -350px;
+      }
+      100% {
+        left: 0;
+      }
+    } 
+  
+
+    .toggler {
+      border: 2px solid #eee;
+      cursor: pointer;
+      opacity: 0;
+      z-index: 5;
+    }
+
+    @media screen and (max-width: 799px) {
+      .toggler,
+      .hamburger {
+        visibility: visible !important;
+      }
+
+      .hamburger-container {
+        display: flex;
+      }
+
+      .hamburger > .line {
+        visibility: visible !important;
+      }
+    }
+
+
+    .toggler,
+    .hamburger {
+      user-select: none;
+      visibility:hidden;
+      position: absolute;
+      padding: 20px 10px;
+    }
+
+    .toggler {
+      z-index: 100;
+      width: 100%;
+      height: 100%;
+    }
+
+    .hamburger {
+      z-index: 10;
+      width: 75%;
+      height: 100%;
+    }
+
+    .toggler:checked ~ .menu-items {
+      display: block;
+    }
+
+    /***** Turn hamburger into an X *****/
+    .toggler:checked ~ .hamburger > .line:nth-child(1) {
+      opacity: 0;
+    }
+
+    .toggler:checked ~ .hamburger > .line:nth-child(2) {
+      transform: rotate(45deg) translate(0px, -0.5px);
+    }
+
+    .toggler:checked ~ .hamburger > .line:nth-child(3) {
+      transform: rotate(-45deg) translate(3px, -3.5px);
+    }
+
+    .toggler:checked ~ .hamburger > .line:nth-child(1),
+    .toggler:checked ~ .hamburger > .line:nth-child(2),
+    .toggler:checked ~ .hamburger > .line:nth-child(3) {
+      width: 75%;
+      border-bottom: 3px solid #444445;
+      margin: 0;
+    }
+
+    .hamburger > .line {
+      visibility:hidden;
+      z-index: 2;
+      height: 4px;
+      width: 100%;
+      margin-bottom: 3px;
+      border-bottom: 5px solid #444445;
+    }
+
+  `;
 const sheet = createStyleSheet(style);
 const styleString = sheet.toString();
-export function NavigationSidebarView(
-// @ts-ignore - Stencil requires props (even if empty)
-props, children) {
-  return (h("div", null,
+export function NavigationSidebarView(props, children) {
+  return [
+    h("div", { class: "hamburger-container" },
+      h("input", { type: "checkbox", class: "toggler", part: "toggler" }),
+      h("div", { class: "hamburger" },
+        h("div", { class: "line" }),
+        h("div", { class: "line" }),
+        h("div", { class: "line" })),
+      h("ul", { class: "menu-items" }, props.mobileItemsSlot)),
     h("div", { class: sheet.classes.ItemsContainer },
       h("style", { type: "text/css" },
         vanillaStyle,
-        styleString),
-      children)));
+        styleString,
+        hamburgerStyle),
+      h("div", null, children)),
+  ];
 }

package/dist/collection/components/sqm-navigation-sidebar/sqm-navigation-sidebar.js

@@ -1,10 +1,10 @@
 import { withHooks } from "@saasquatch/stencil-hooks";
-import { Component, h, State } from "@stencil/core";
+import { Component, h, Method, State } from "@stencil/core";
 import { NavigationSidebarView } from "./sqm-navigation-sidebar-view";
+import { useNavigationSidebar } from "./useNavigationSidebar";
 /**
- * A container for navigation menu items
- *
- * @uiName Navigation Sidebar
+ * @uiName Microsite Sidebar
+ * @slots [{"name":"", "title":"Sidebar Content"}]
  */
 export class NavigationSidebar {
   constructor() {
@@ -12,8 +12,15 @@ export class NavigationSidebar {
     withHooks(this);
   }
   disconnectedCallback() { }
+  async renderNavigationItem(child) {
+    return h("div", { innerHTML: child.outerHTML });
+  }
   render() {
-    return (h(NavigationSidebarView, null,
+    const { mobileChildren } = useNavigationSidebar(this.renderNavigationItem);
+    const props = {
+      mobileItemsSlot: mobileChildren,
+    };
+    return (h(NavigationSidebarView, Object.assign({}, props),
       h("slot", null)));
   }
   static get is() { return "sqm-navigation-sidebar"; }
@@ -21,4 +28,28 @@ export class NavigationSidebar {
   static get states() { return {
     "ignored": {}
   }; }
+  static get methods() { return {
+    "renderNavigationItem": {
+      "complexType": {
+        "signature": "(child: Element) => Promise<any>",
+        "parameters": [{
+            "tags": [],
+            "text": ""
+          }],
+        "references": {
+          "Promise": {
+            "location": "global"
+          },
+          "Element": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<any>"
+      },
+      "docs": {
+        "text": "",
+        "tags": []
+      }
+    }
+  }; }
 }

package/dist/collection/components/sqm-navigation-sidebar/useNavigationSidebar.js

@@ -0,0 +1,17 @@
+import { useHost } from "@saasquatch/component-boilerplate";
+import { useEffect, useState } from "@saasquatch/universal-hooks";
+export function useNavigationSidebar(renderNavigationItem) {
+  const host = useHost();
+  const [mobileChildren, setMobileChildren] = useState([]);
+  const children = host.children;
+  const renderChildren = Array.from(children).map(async (child) => await renderNavigationItem(child));
+  useEffect(() => {
+    if (children)
+      setClonedChildren();
+  }, [children]);
+  async function setClonedChildren() {
+    const clonedChildren = await Promise.all(renderChildren);
+    setMobileChildren(clonedChildren);
+  }
+  return { mobileChildren };
+}

package/dist/collection/components/sqm-navigation-sidebar-item/sqm-navigation-sidebar-item.js

@@ -6,7 +6,10 @@ import { getProps } from "../../utils/utils";
 import { NavigationSidebarItemView, } from "./sqm-navigation-sidebar-item-view";
 import { useNavigationSidebarItem } from "./useNavigationSidebarItem";
 /**
- * @uiName Navigation Link
+ * @uiName Microsite Sidebar Item
+ * @validParents ["sqm-navigation-sidebar"]
+ * @exampleGroup Microsite Components
+ * @example Sidebar Item - <sqm-navigation-sidebar-item label="Sidebar Item" icon="house"></sqm-navigation-sidebar-item>
  */
 export class NavigationSidebarItem {
   constructor() {
@@ -36,6 +39,9 @@ export class NavigationSidebarItem {
         "tags": [{
             "text": "Navigation Path",
             "name": "uiName"
+          }, {
+            "text": "pageSelect",
+            "name": "uiWidget"
           }],
         "text": ""
       },