@xplortech/apollo-core 1.0.0-beta.4 → 1.0.0-beta.6

package/dist/custom-elements/index.js

@@ -18,7 +18,7 @@ const XplApplicationShell$1 = class extends HTMLElement {
      */
     this.navWidth = 'default';
     /**
-     * @state {boolean} - Whether or not the main nav is open, updates when the nav-open envent is emitted.
+     * @state {boolean} - Whether or not the main nav is open, updates when the nav-open event is emitted.
      */
     this.navOpen = true;
   }
@@ -39,6 +39,12 @@ const XplApplicationShell$1 = class extends HTMLElement {
   connectedCallback() {
     this.closeNavOnMobile();
   }
+  componentWillLoad() {
+    this.navOpen =
+      this.isNavOpenAtStartup !== undefined
+        ? this.isNavOpenAtStartup
+        : this.navOpen;
+  }
   render() {
     let applicationShellClasses = 'xpl-application-shell';
     if (this.withUtility)
@@ -379,7 +385,6 @@ const XplDropdown$1 = class extends HTMLElement {
     super();
     this.__registerHost();
     /** text to display as heading */
-    // eslint-disable-next-line @stencil/strict-mutable
     this.isOpen = false;
     /** options that are listed */
     this.closeOnSelect = true;
@@ -396,7 +401,7 @@ const XplDropdown$1 = class extends HTMLElement {
     };
   }
   /**
-   * called on dropdown option click and keydown events  to update isSelected states
+   * called on dropdown option click and keydown events to update isSelected states
    */
   async handleSelect(e, { component }) {
     const { hostElement, mode, options, update } = this;
@@ -531,7 +536,10 @@ const XplDropdownOption$1 = class extends HTMLElement {
     const { closeOnSelect, mode, selectOnFocus } = this.dropdown;
     if (selectOnFocus && navigationKeys.includes(ev.key)) {
       const hostElement = document.activeElement.closest('xpl-dropdown-option');
-      dropdown.handleSelect(ev, { component: { hostElement } });
+      const component = {
+        component: { hostElement },
+      };
+      dropdown.handleSelect(ev, component);
       if (mode === 'single' && closeOnSelect)
         this.dropdown.isOpen = false;
       return;
@@ -20034,24 +20042,24 @@ const XplTable$1 = class extends HTMLElement {
     this.onScroll = () => {
       this.hasScrolled = this.container.scrollLeft > 0;
     };
-    /**
-     * TODO: Need to figure out how this interplays with data
-     * received from an API/server
-     */
-    this.sortBy = (col, ascending = true) => {
-      this.rowData.sort((a, b) => {
-        const A = a[col];
-        const B = b[col];
-        if (typeof A === 'number' && typeof B === 'number') {
-          const f = ascending ? 1 : -1;
-          return A > B ? f : -f;
-        }
-        return -1;
-      });
-      this.rowData = Array.from(this.rowData);
-      this.render();
-    };
   }
+  /**
+   * TODO: Need to figure out how this interplays with data
+   * received from an API/server
+   */
+  // private sortBy = (col: number, ascending = true) => {
+  //     this.rowData.sort((a, b) => {
+  //         const A = a[col];
+  //         const B = b[col];
+  //         if (typeof A === 'number' && typeof B === 'number') {
+  //             const f = ascending ? 1 : -1;
+  //             return A > B ? f : -f;
+  //         }
+  //         return -1;
+  //     });
+  //     this.rowData = Array.from(this.rowData);
+  //     this.render();
+  // };
   componentWillLoad() {
     this.areAllSelected = false;
     this.rowData = this.data !== undefined ? Array.from(this.data) : [];
@@ -20145,12 +20153,18 @@ const XplUtilityBar$1 = class extends HTMLElement {
     this.open = !this.open;
     this.navOpen.emit(this.open);
   }
+  componentWillLoad() {
+    this.open =
+      this.isNavOpenAtStartup !== undefined
+        ? this.isNavOpenAtStartup
+        : this.open;
+  }
   render() {
     return (h(Host, null, h("nav", { "aria-label": "utility navigation bar", class: "xpl-utility-bar" }, this.navControl ? (h("div", null, h("button", { class: "xpl-utility-bar__nav-control", onClick: () => this.onNavToggle(), innerHTML: `${this.bars}` }), h("slot", { name: "aside" }))) : (h("slot", { name: "aside" })), h("slot", { name: "main" }))));
   }
 };
 
-const XplApplicationShell = /*@__PURE__*/proxyCustomElement(XplApplicationShell$1, [4,"xpl-application-shell",{"withSubnav":[4,"with-subnav"],"withUtility":[4,"with-utility"],"navWidth":[1,"nav-width"],"navOpen":[32]},[[0,"navOpen","navToggleHandler"],[0,"navWidth","navWithHandler"],[9,"resize","onWindowResize"]]]);
+const XplApplicationShell = /*@__PURE__*/proxyCustomElement(XplApplicationShell$1, [4,"xpl-application-shell",{"withSubnav":[4,"with-subnav"],"withUtility":[4,"with-utility"],"navWidth":[1,"nav-width"],"isNavOpenAtStartup":[4,"is-nav-open-at-startup"],"navOpen":[32]},[[0,"navOpen","navToggleHandler"],[0,"navWidth","navWithHandler"],[9,"resize","onWindowResize"]]]);
 const XplAvatar = /*@__PURE__*/proxyCustomElement(XplAvatar$1, [4,"xpl-avatar",{"color":[1],"disabled":[4],"href":[1],"name":[1],"size":[1],"src":[1],"status":[1],"target":[1]}]);
 const XplBackdrop = /*@__PURE__*/proxyCustomElement(XplBackdrop$1, [0,"xpl-backdrop",{"relative":[4]}]);
 const XplBadge = /*@__PURE__*/proxyCustomElement(XplBadge$1, [4,"xpl-badge",{"dot":[4],"variant":[1]}]);
@@ -20179,7 +20193,7 @@ const XplSelect = /*@__PURE__*/proxyCustomElement(XplSelect$1, [0,"xpl-select",{
 const XplTable = /*@__PURE__*/proxyCustomElement(XplTable$1, [0,"xpl-table",{"columns":[16],"data":[16],"freeze":[4],"multiselect":[4],"striped":[4],"areAllSelected":[32],"rowData":[32],"hasScrolled":[32],"selected":[32]}]);
 const XplTag = /*@__PURE__*/proxyCustomElement(XplTag$1, [4,"xpl-tag"]);
 const XplToggle = /*@__PURE__*/proxyCustomElement(XplToggle$1, [0,"xpl-toggle",{"checked":[4],"description":[1],"disabled":[4],"heading":[1],"label":[1],"name":[1],"variant":[1],"id":[32]}]);
-const XplUtilityBar = /*@__PURE__*/proxyCustomElement(XplUtilityBar$1, [4,"xpl-utility-bar",{"navControl":[4,"nav-control"],"open":[32]}]);
+const XplUtilityBar = /*@__PURE__*/proxyCustomElement(XplUtilityBar$1, [4,"xpl-utility-bar",{"navControl":[4,"nav-control"],"isNavOpenAtStartup":[4,"is-nav-open-at-startup"],"open":[32]}]);
 const defineCustomElements = (opts) => {
   if (typeof customElements !== 'undefined') {
     [

package/dist/esm/apollo-core.js

@@ -13,5 +13,5 @@ const patchBrowser = () => {
 };
 
 patchBrowser().then(options => {
-  return bootstrapLazy([["xpl-select",[[0,"xpl-select",{"choices":[16],"description":[1],"disabled":[4],"error":[1],"label":[1],"mode":[1],"placeholder":[1],"truncate":[4],"active":[32],"id":[32],"keepFocus":[32],"selected":[32],"value":[32],"displayValue":[32],"visibleChoices":[32]}]]],["xpl-application-shell",[[4,"xpl-application-shell",{"withSubnav":[4,"with-subnav"],"withUtility":[4,"with-utility"],"navWidth":[1,"nav-width"],"navOpen":[32]},[[0,"navOpen","navToggleHandler"],[0,"navWidth","navWithHandler"],[9,"resize","onWindowResize"]]]]],["xpl-avatar_12",[[4,"xpl-breadcrumb-item"],[4,"xpl-breadcrumbs"],[4,"xpl-content-area",{"size":[1]}],[4,"xpl-nav-item",{"navControl":[4,"nav-control"]}],[4,"xpl-secondary-nav"],[0,"xpl-table",{"columns":[16],"data":[16],"freeze":[4],"multiselect":[4],"striped":[4],"areAllSelected":[32],"rowData":[32],"hasScrolled":[32],"selected":[32]}],[4,"xpl-utility-bar",{"navControl":[4,"nav-control"],"open":[32]}],[4,"xpl-avatar",{"color":[1],"disabled":[4],"href":[1],"name":[1],"size":[1],"src":[1],"status":[1],"target":[1]}],[4,"xpl-badge",{"dot":[4],"variant":[1]}],[4,"xpl-button",{"disabled":[4],"link":[4],"iconOnly":[4,"icon-only"],"fullWidth":[4,"full-width"],"name":[1],"size":[1],"type":[1],"value":[1],"variant":[1],"state":[1]}],[4,"xpl-checkbox",{"checked":[4],"description":[1],"disabled":[4],"indeterminate":[4],"name":[1],"required":[4],"styled":[4],"value":[1],"id":[32]}],[4,"xpl-radio",{"checked":[4],"description":[1],"disabled":[4],"name":[1],"required":[4],"styled":[4],"value":[1],"id":[32]}]]],["xpl-choicelist",[[0,"xpl-choicelist",{"choices":[16],"description":[1],"heading":[1],"multi":[4],"name":[1],"styled":[4],"selected":[32]}]]],["xpl-list",[[0,"xpl-list",{"items":[16]}]]],["xpl-button-row",[[0,"xpl-button-row",{"primary":[1],"secondary":[1],"tertiary":[1]}]]],["xpl-divider",[[4,"xpl-divider",{"tier":[2]}]]],["xpl-grid",[[0,"xpl-grid"]]],["xpl-grid-item",[[4,"xpl-grid-item",{"xs":[2],"sm":[2],"md":[2],"lg":[2]}]]],["xpl-input",[[0,"xpl-input",{"_id":[1],"autocomplete":[1],"dateFormat":[1,"date-format"],"description":[1],"disabled":[4],"error":[1],"label":[1],"max":[8],"maxCharacterCount":[2,"max-character-count"],"min":[8],"mode":[1],"multiline":[4],"name":[1],"placeholder":[1],"post":[1],"pre":[1],"readonly":[4],"required":[4],"step":[2],"type":[1],"value":[1],"characterCount":[32],"passwordVisible":[32]}]]],["xpl-main-nav",[[4,"xpl-main-nav",{"width":[1]}]]],["xpl-pagination",[[0,"xpl-pagination",{"total":[2],"perPage":[2,"per-page"],"waitForCallback":[4,"wait-for-callback"],"current":[32],"goto":[64]}]]],["xpl-toggle",[[0,"xpl-toggle",{"checked":[4],"description":[1],"disabled":[4],"heading":[1],"label":[1],"name":[1],"variant":[1],"id":[32]}]]],["xpl-backdrop",[[0,"xpl-backdrop",{"relative":[4]}]]],["xpl-dropdown-group_3",[[4,"xpl-dropdown-group",{"groupName":[1,"label"],"options":[16]}],[4,"xpl-dropdown-heading",{"label":[1]}],[4,"xpl-dropdown-option",{"isDisabled":[516,"disabled"],"label":[1],"isSelected":[1540,"selected"]}]]],["xpl-dropdown_2",[[4,"xpl-dropdown",{"isOpen":[1540,"open"],"closeOnSelect":[4,"close-on-select"],"mode":[1],"options":[16],"selectOnFocus":[4,"select-on-focus"],"triggerId":[1,"trigger-id"],"update":[16],"handleSelect":[64]}],[4,"xpl-tag"]]]], options);
+  return bootstrapLazy([["xpl-select",[[0,"xpl-select",{"choices":[16],"description":[1],"disabled":[4],"error":[1],"label":[1],"mode":[1],"placeholder":[1],"truncate":[4],"active":[32],"id":[32],"keepFocus":[32],"selected":[32],"value":[32],"displayValue":[32],"visibleChoices":[32]}]]],["xpl-application-shell",[[4,"xpl-application-shell",{"withSubnav":[4,"with-subnav"],"withUtility":[4,"with-utility"],"navWidth":[1,"nav-width"],"isNavOpenAtStartup":[4,"is-nav-open-at-startup"],"navOpen":[32]},[[0,"navOpen","navToggleHandler"],[0,"navWidth","navWithHandler"],[9,"resize","onWindowResize"]]]]],["xpl-avatar_12",[[4,"xpl-breadcrumb-item"],[4,"xpl-breadcrumbs"],[4,"xpl-content-area",{"size":[1]}],[4,"xpl-nav-item",{"navControl":[4,"nav-control"]}],[4,"xpl-secondary-nav"],[0,"xpl-table",{"columns":[16],"data":[16],"freeze":[4],"multiselect":[4],"striped":[4],"areAllSelected":[32],"rowData":[32],"hasScrolled":[32],"selected":[32]}],[4,"xpl-utility-bar",{"navControl":[4,"nav-control"],"isNavOpenAtStartup":[4,"is-nav-open-at-startup"],"open":[32]}],[4,"xpl-avatar",{"color":[1],"disabled":[4],"href":[1],"name":[1],"size":[1],"src":[1],"status":[1],"target":[1]}],[4,"xpl-badge",{"dot":[4],"variant":[1]}],[4,"xpl-button",{"disabled":[4],"link":[4],"iconOnly":[4,"icon-only"],"fullWidth":[4,"full-width"],"name":[1],"size":[1],"type":[1],"value":[1],"variant":[1],"state":[1]}],[4,"xpl-checkbox",{"checked":[4],"description":[1],"disabled":[4],"indeterminate":[4],"name":[1],"required":[4],"styled":[4],"value":[1],"id":[32]}],[4,"xpl-radio",{"checked":[4],"description":[1],"disabled":[4],"name":[1],"required":[4],"styled":[4],"value":[1],"id":[32]}]]],["xpl-choicelist",[[0,"xpl-choicelist",{"choices":[16],"description":[1],"heading":[1],"multi":[4],"name":[1],"styled":[4],"selected":[32]}]]],["xpl-list",[[0,"xpl-list",{"items":[16]}]]],["xpl-button-row",[[0,"xpl-button-row",{"primary":[1],"secondary":[1],"tertiary":[1]}]]],["xpl-divider",[[4,"xpl-divider",{"tier":[2]}]]],["xpl-grid",[[0,"xpl-grid"]]],["xpl-grid-item",[[4,"xpl-grid-item",{"xs":[2],"sm":[2],"md":[2],"lg":[2]}]]],["xpl-input",[[0,"xpl-input",{"_id":[1],"autocomplete":[1],"dateFormat":[1,"date-format"],"description":[1],"disabled":[4],"error":[1],"label":[1],"max":[8],"maxCharacterCount":[2,"max-character-count"],"min":[8],"mode":[1],"multiline":[4],"name":[1],"placeholder":[1],"post":[1],"pre":[1],"readonly":[4],"required":[4],"step":[2],"type":[1],"value":[1],"characterCount":[32],"passwordVisible":[32]}]]],["xpl-main-nav",[[4,"xpl-main-nav",{"width":[1]}]]],["xpl-pagination",[[0,"xpl-pagination",{"total":[2],"perPage":[2,"per-page"],"waitForCallback":[4,"wait-for-callback"],"current":[32],"goto":[64]}]]],["xpl-toggle",[[0,"xpl-toggle",{"checked":[4],"description":[1],"disabled":[4],"heading":[1],"label":[1],"name":[1],"variant":[1],"id":[32]}]]],["xpl-backdrop",[[0,"xpl-backdrop",{"relative":[4]}]]],["xpl-dropdown-group_3",[[4,"xpl-dropdown-group",{"groupName":[1,"label"],"options":[16]}],[4,"xpl-dropdown-heading",{"label":[1]}],[4,"xpl-dropdown-option",{"isDisabled":[516,"disabled"],"label":[1],"isSelected":[1540,"selected"]}]]],["xpl-dropdown_2",[[4,"xpl-dropdown",{"isOpen":[1540,"open"],"closeOnSelect":[4,"close-on-select"],"mode":[1],"options":[16],"selectOnFocus":[4,"select-on-focus"],"triggerId":[1,"trigger-id"],"update":[16],"handleSelect":[64]}],[4,"xpl-tag"]]]], options);
 });

package/dist/esm/loader.js

@@ -10,7 +10,7 @@ const patchEsm = () => {
 const defineCustomElements = (win, options) => {
   if (typeof window === 'undefined') return Promise.resolve();
   return patchEsm().then(() => {
-  return bootstrapLazy([["xpl-select",[[0,"xpl-select",{"choices":[16],"description":[1],"disabled":[4],"error":[1],"label":[1],"mode":[1],"placeholder":[1],"truncate":[4],"active":[32],"id":[32],"keepFocus":[32],"selected":[32],"value":[32],"displayValue":[32],"visibleChoices":[32]}]]],["xpl-application-shell",[[4,"xpl-application-shell",{"withSubnav":[4,"with-subnav"],"withUtility":[4,"with-utility"],"navWidth":[1,"nav-width"],"navOpen":[32]},[[0,"navOpen","navToggleHandler"],[0,"navWidth","navWithHandler"],[9,"resize","onWindowResize"]]]]],["xpl-avatar_12",[[4,"xpl-breadcrumb-item"],[4,"xpl-breadcrumbs"],[4,"xpl-content-area",{"size":[1]}],[4,"xpl-nav-item",{"navControl":[4,"nav-control"]}],[4,"xpl-secondary-nav"],[0,"xpl-table",{"columns":[16],"data":[16],"freeze":[4],"multiselect":[4],"striped":[4],"areAllSelected":[32],"rowData":[32],"hasScrolled":[32],"selected":[32]}],[4,"xpl-utility-bar",{"navControl":[4,"nav-control"],"open":[32]}],[4,"xpl-avatar",{"color":[1],"disabled":[4],"href":[1],"name":[1],"size":[1],"src":[1],"status":[1],"target":[1]}],[4,"xpl-badge",{"dot":[4],"variant":[1]}],[4,"xpl-button",{"disabled":[4],"link":[4],"iconOnly":[4,"icon-only"],"fullWidth":[4,"full-width"],"name":[1],"size":[1],"type":[1],"value":[1],"variant":[1],"state":[1]}],[4,"xpl-checkbox",{"checked":[4],"description":[1],"disabled":[4],"indeterminate":[4],"name":[1],"required":[4],"styled":[4],"value":[1],"id":[32]}],[4,"xpl-radio",{"checked":[4],"description":[1],"disabled":[4],"name":[1],"required":[4],"styled":[4],"value":[1],"id":[32]}]]],["xpl-choicelist",[[0,"xpl-choicelist",{"choices":[16],"description":[1],"heading":[1],"multi":[4],"name":[1],"styled":[4],"selected":[32]}]]],["xpl-list",[[0,"xpl-list",{"items":[16]}]]],["xpl-button-row",[[0,"xpl-button-row",{"primary":[1],"secondary":[1],"tertiary":[1]}]]],["xpl-divider",[[4,"xpl-divider",{"tier":[2]}]]],["xpl-grid",[[0,"xpl-grid"]]],["xpl-grid-item",[[4,"xpl-grid-item",{"xs":[2],"sm":[2],"md":[2],"lg":[2]}]]],["xpl-input",[[0,"xpl-input",{"_id":[1],"autocomplete":[1],"dateFormat":[1,"date-format"],"description":[1],"disabled":[4],"error":[1],"label":[1],"max":[8],"maxCharacterCount":[2,"max-character-count"],"min":[8],"mode":[1],"multiline":[4],"name":[1],"placeholder":[1],"post":[1],"pre":[1],"readonly":[4],"required":[4],"step":[2],"type":[1],"value":[1],"characterCount":[32],"passwordVisible":[32]}]]],["xpl-main-nav",[[4,"xpl-main-nav",{"width":[1]}]]],["xpl-pagination",[[0,"xpl-pagination",{"total":[2],"perPage":[2,"per-page"],"waitForCallback":[4,"wait-for-callback"],"current":[32],"goto":[64]}]]],["xpl-toggle",[[0,"xpl-toggle",{"checked":[4],"description":[1],"disabled":[4],"heading":[1],"label":[1],"name":[1],"variant":[1],"id":[32]}]]],["xpl-backdrop",[[0,"xpl-backdrop",{"relative":[4]}]]],["xpl-dropdown-group_3",[[4,"xpl-dropdown-group",{"groupName":[1,"label"],"options":[16]}],[4,"xpl-dropdown-heading",{"label":[1]}],[4,"xpl-dropdown-option",{"isDisabled":[516,"disabled"],"label":[1],"isSelected":[1540,"selected"]}]]],["xpl-dropdown_2",[[4,"xpl-dropdown",{"isOpen":[1540,"open"],"closeOnSelect":[4,"close-on-select"],"mode":[1],"options":[16],"selectOnFocus":[4,"select-on-focus"],"triggerId":[1,"trigger-id"],"update":[16],"handleSelect":[64]}],[4,"xpl-tag"]]]], options);
+  return bootstrapLazy([["xpl-select",[[0,"xpl-select",{"choices":[16],"description":[1],"disabled":[4],"error":[1],"label":[1],"mode":[1],"placeholder":[1],"truncate":[4],"active":[32],"id":[32],"keepFocus":[32],"selected":[32],"value":[32],"displayValue":[32],"visibleChoices":[32]}]]],["xpl-application-shell",[[4,"xpl-application-shell",{"withSubnav":[4,"with-subnav"],"withUtility":[4,"with-utility"],"navWidth":[1,"nav-width"],"isNavOpenAtStartup":[4,"is-nav-open-at-startup"],"navOpen":[32]},[[0,"navOpen","navToggleHandler"],[0,"navWidth","navWithHandler"],[9,"resize","onWindowResize"]]]]],["xpl-avatar_12",[[4,"xpl-breadcrumb-item"],[4,"xpl-breadcrumbs"],[4,"xpl-content-area",{"size":[1]}],[4,"xpl-nav-item",{"navControl":[4,"nav-control"]}],[4,"xpl-secondary-nav"],[0,"xpl-table",{"columns":[16],"data":[16],"freeze":[4],"multiselect":[4],"striped":[4],"areAllSelected":[32],"rowData":[32],"hasScrolled":[32],"selected":[32]}],[4,"xpl-utility-bar",{"navControl":[4,"nav-control"],"isNavOpenAtStartup":[4,"is-nav-open-at-startup"],"open":[32]}],[4,"xpl-avatar",{"color":[1],"disabled":[4],"href":[1],"name":[1],"size":[1],"src":[1],"status":[1],"target":[1]}],[4,"xpl-badge",{"dot":[4],"variant":[1]}],[4,"xpl-button",{"disabled":[4],"link":[4],"iconOnly":[4,"icon-only"],"fullWidth":[4,"full-width"],"name":[1],"size":[1],"type":[1],"value":[1],"variant":[1],"state":[1]}],[4,"xpl-checkbox",{"checked":[4],"description":[1],"disabled":[4],"indeterminate":[4],"name":[1],"required":[4],"styled":[4],"value":[1],"id":[32]}],[4,"xpl-radio",{"checked":[4],"description":[1],"disabled":[4],"name":[1],"required":[4],"styled":[4],"value":[1],"id":[32]}]]],["xpl-choicelist",[[0,"xpl-choicelist",{"choices":[16],"description":[1],"heading":[1],"multi":[4],"name":[1],"styled":[4],"selected":[32]}]]],["xpl-list",[[0,"xpl-list",{"items":[16]}]]],["xpl-button-row",[[0,"xpl-button-row",{"primary":[1],"secondary":[1],"tertiary":[1]}]]],["xpl-divider",[[4,"xpl-divider",{"tier":[2]}]]],["xpl-grid",[[0,"xpl-grid"]]],["xpl-grid-item",[[4,"xpl-grid-item",{"xs":[2],"sm":[2],"md":[2],"lg":[2]}]]],["xpl-input",[[0,"xpl-input",{"_id":[1],"autocomplete":[1],"dateFormat":[1,"date-format"],"description":[1],"disabled":[4],"error":[1],"label":[1],"max":[8],"maxCharacterCount":[2,"max-character-count"],"min":[8],"mode":[1],"multiline":[4],"name":[1],"placeholder":[1],"post":[1],"pre":[1],"readonly":[4],"required":[4],"step":[2],"type":[1],"value":[1],"characterCount":[32],"passwordVisible":[32]}]]],["xpl-main-nav",[[4,"xpl-main-nav",{"width":[1]}]]],["xpl-pagination",[[0,"xpl-pagination",{"total":[2],"perPage":[2,"per-page"],"waitForCallback":[4,"wait-for-callback"],"current":[32],"goto":[64]}]]],["xpl-toggle",[[0,"xpl-toggle",{"checked":[4],"description":[1],"disabled":[4],"heading":[1],"label":[1],"name":[1],"variant":[1],"id":[32]}]]],["xpl-backdrop",[[0,"xpl-backdrop",{"relative":[4]}]]],["xpl-dropdown-group_3",[[4,"xpl-dropdown-group",{"groupName":[1,"label"],"options":[16]}],[4,"xpl-dropdown-heading",{"label":[1]}],[4,"xpl-dropdown-option",{"isDisabled":[516,"disabled"],"label":[1],"isSelected":[1540,"selected"]}]]],["xpl-dropdown_2",[[4,"xpl-dropdown",{"isOpen":[1540,"open"],"closeOnSelect":[4,"close-on-select"],"mode":[1],"options":[16],"selectOnFocus":[4,"select-on-focus"],"triggerId":[1,"trigger-id"],"update":[16],"handleSelect":[64]}],[4,"xpl-tag"]]]], options);
   });
 };
 

package/dist/esm/xpl-application-shell.entry.js

@@ -16,7 +16,7 @@ const XplApplicationShell = class {
      */
     this.navWidth = 'default';
     /**
-     * @state {boolean} - Whether or not the main nav is open, updates when the nav-open envent is emitted.
+     * @state {boolean} - Whether or not the main nav is open, updates when the nav-open event is emitted.
      */
     this.navOpen = true;
   }
@@ -37,6 +37,12 @@ const XplApplicationShell = class {
   connectedCallback() {
     this.closeNavOnMobile();
   }
+  componentWillLoad() {
+    this.navOpen =
+      this.isNavOpenAtStartup !== undefined
+        ? this.isNavOpenAtStartup
+        : this.navOpen;
+  }
   render() {
     let applicationShellClasses = 'xpl-application-shell';
     if (this.withUtility)

package/dist/esm/xpl-avatar_12.entry.js

@@ -231,24 +231,24 @@ const XplTable = class {
     this.onScroll = () => {
       this.hasScrolled = this.container.scrollLeft > 0;
     };
-    /**
-     * TODO: Need to figure out how this interplays with data
-     * received from an API/server
-     */
-    this.sortBy = (col, ascending = true) => {
-      this.rowData.sort((a, b) => {
-        const A = a[col];
-        const B = b[col];
-        if (typeof A === 'number' && typeof B === 'number') {
-          const f = ascending ? 1 : -1;
-          return A > B ? f : -f;
-        }
-        return -1;
-      });
-      this.rowData = Array.from(this.rowData);
-      this.render();
-    };
   }
+  /**
+   * TODO: Need to figure out how this interplays with data
+   * received from an API/server
+   */
+  // private sortBy = (col: number, ascending = true) => {
+  //     this.rowData.sort((a, b) => {
+  //         const A = a[col];
+  //         const B = b[col];
+  //         if (typeof A === 'number' && typeof B === 'number') {
+  //             const f = ascending ? 1 : -1;
+  //             return A > B ? f : -f;
+  //         }
+  //         return -1;
+  //     });
+  //     this.rowData = Array.from(this.rowData);
+  //     this.render();
+  // };
   componentWillLoad() {
     this.areAllSelected = false;
     this.rowData = this.data !== undefined ? Array.from(this.data) : [];
@@ -299,6 +299,12 @@ const XplUtilityBar = class {
     this.open = !this.open;
     this.navOpen.emit(this.open);
   }
+  componentWillLoad() {
+    this.open =
+      this.isNavOpenAtStartup !== undefined
+        ? this.isNavOpenAtStartup
+        : this.open;
+  }
   render() {
     return (h(Host, null, h("nav", { "aria-label": "utility navigation bar", class: "xpl-utility-bar" }, this.navControl ? (h("div", null, h("button", { class: "xpl-utility-bar__nav-control", onClick: () => this.onNavToggle(), innerHTML: `${this.bars}` }), h("slot", { name: "aside" }))) : (h("slot", { name: "aside" })), h("slot", { name: "main" }))));
   }

package/dist/esm/xpl-dropdown-group_3.entry.js

@@ -64,7 +64,10 @@ const XplDropdownOption = class {
     const { closeOnSelect, mode, selectOnFocus } = this.dropdown;
     if (selectOnFocus && navigationKeys.includes(ev.key)) {
       const hostElement = document.activeElement.closest('xpl-dropdown-option');
-      dropdown.handleSelect(ev, { component: { hostElement } });
+      const component = {
+        component: { hostElement },
+      };
+      dropdown.handleSelect(ev, component);
       if (mode === 'single' && closeOnSelect)
         this.dropdown.isOpen = false;
       return;

package/dist/esm/xpl-dropdown_2.entry.js

@@ -16,7 +16,6 @@ const XplDropdown = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     /** text to display as heading */
-    // eslint-disable-next-line @stencil/strict-mutable
     this.isOpen = false;
     /** options that are listed */
     this.closeOnSelect = true;
@@ -33,7 +32,7 @@ const XplDropdown = class {
     };
   }
   /**
-   * called on dropdown option click and keydown events  to update isSelected states
+   * called on dropdown option click and keydown events to update isSelected states
    */
   async handleSelect(e, { component }) {
     const { hostElement, mode, options, update } = this;

package/dist/stories/application-shell.stories.js

@@ -23,11 +23,17 @@ export default {
         type: 'select',
       },
     },
+    isNavOpenAtStartup: {
+      options: [true, false],
+      control: {
+        type: 'boolean',
+      },
+    },
   },
 };
 const renderBlock = (showBlock, block) => showBlock ? block : '';
-const utilityBar = `
-    <xpl-utility-bar slot="utility" nav-control>
+const utilityBar = (isNavOpenAtStartup) => `
+    <xpl-utility-bar slot="utility" nav-control is-nav-open-at-startup=${isNavOpenAtStartup}>
         <xpl-breadcrumbs slot="aside">
             <xpl-breadcrumb-item>
                 <a href="javascript:;">Locations</a>
@@ -82,10 +88,11 @@ const secondaryNav = `
         </ul>
     </xpl-secondary-nav>
 `;
-export const ApplicationShell = ({ navWidth, showSecondaryNav, showUtilityBar, contentSize, }) => {
+export const ApplicationShell = ({ contentSize, isNavOpenAtStartup, navWidth, showSecondaryNav, showUtilityBar, }) => {
   return `
         <xpl-application-shell
             ${showSecondaryNav ? 'with-subnav' : ''}
+            is-nav-open-at-startup=${isNavOpenAtStartup}
         >
             <xpl-main-nav slot="nav" width="${navWidth}">
                 <svg
@@ -223,7 +230,7 @@ export const ApplicationShell = ({ navWidth, showSecondaryNav, showUtilityBar, c
                     </xpl-nav-item>
                 </ul>
             </xpl-main-nav>
-            ${renderBlock(showUtilityBar, utilityBar)}
+            ${renderBlock(showUtilityBar, utilityBar(isNavOpenAtStartup))}
             ${renderBlock(showSecondaryNav, secondaryNav)}
             <xpl-content-area slot="content" size="${contentSize}">
             <div>
@@ -338,10 +345,10 @@ export const ApplicationShell = ({ navWidth, showSecondaryNav, showUtilityBar, c
 ApplicationShell.parameters = {
   layout: 'fullscreen',
   'web-component': {
-    render: ({ navWidth, showSecondaryNav, showUtilityBar, contentSize, }) => {
+    render: ({ navWidth, showSecondaryNav, showUtilityBar, contentSize, isNavOpenAtStartup, }) => {
       const renderBlock = (showBlock, block) => showBlock ? block : '';
       const utilityBar = `
-                <xpl-utility-bar slot="utility" nav-control>
+                <xpl-utility-bar slot="utility" nav-control is-nav-open-at-startup=${isNavOpenAtStartup}>
                     <xpl-breadcrumbs slot="aside">
                         <xpl-breadcrumb-item>
                             <a href="javascript:;">Locations</a>
@@ -398,6 +405,7 @@ ApplicationShell.parameters = {
       return `
             <xpl-application-shell
                 ${showSecondaryNav ? 'with-subnav' : ''}
+                is-nav-open-at-startup=${isNavOpenAtStartup}
             >
                 <xpl-main-nav slot="nav" width="${navWidth}">
                     <svg
@@ -760,8 +768,9 @@ ApplicationShell.parameters = {
   },
 };
 ApplicationShell.args = {
+  contentSize: 'wide',
+  isNavOpenAtStartup: true,
   navWidth: 'default',
-  showUtilityBar: true,
   showSecondaryNav: true,
-  contentSize: 'wide',
+  showUtilityBar: true,
 };

package/dist/types/Users/{fernandogelin/Projects/apollo-admin/packages → roc/Sites}/apollo/.stencil/stories/application-shell.stories.d.ts

@@ -23,25 +23,33 @@ declare const _default: {
         type: string;
       };
     };
+    isNavOpenAtStartup: {
+      options: boolean[];
+      control: {
+        type: string;
+      };
+    };
   };
 };
 export default _default;
 interface ApplicationShellProps {
+  contentSize: string;
+  isNavOpenAtStartup: boolean;
   navWidth: string;
   showSecondaryNav: boolean;
   showUtilityBar: boolean;
-  contentSize: string;
 }
 export declare const ApplicationShell: {
-  ({ navWidth, showSecondaryNav, showUtilityBar, contentSize, }: ApplicationShellProps): string;
+  ({ contentSize, isNavOpenAtStartup, navWidth, showSecondaryNav, showUtilityBar, }: ApplicationShellProps): string;
   parameters: {
     layout: string;
     'web-component': {
-      render: ({ navWidth, showSecondaryNav, showUtilityBar, contentSize, }: {
+      render: ({ navWidth, showSecondaryNav, showUtilityBar, contentSize, isNavOpenAtStartup, }: {
         navWidth: any;
         showSecondaryNav: any;
         showUtilityBar: any;
         contentSize: any;
+        isNavOpenAtStartup: any;
       }) => string;
     };
     html: {
@@ -54,9 +62,10 @@ export declare const ApplicationShell: {
     };
   };
   args: {
+    contentSize: string;
+    isNavOpenAtStartup: boolean;
     navWidth: string;
-    showUtilityBar: boolean;
     showSecondaryNav: boolean;
-    contentSize: string;
+    showUtilityBar: boolean;
   };
 };

package/dist/types/components/xpl-application-shell/xpl-application-shell.d.ts

@@ -13,12 +13,17 @@ export declare class XplApplicationShell {
    */
   navWidth: string;
   /**
-   * @state {boolean} - Whether or not the main nav is open, updates when the nav-open envent is emitted.
+   * @property {boolean} - * @property {boolean} - Optional property that defines whether or not the main nav is open at startup.
+   */
+  isNavOpenAtStartup: boolean;
+  /**
+   * @state {boolean} - Whether or not the main nav is open, updates when the nav-open event is emitted.
    */
   navOpen: boolean;
   navToggleHandler(): void;
   navWithHandler(event: any): void;
   onWindowResize(): void;
   connectedCallback(): void;
+  componentWillLoad(): void;
   render(): any;
 }

package/dist/types/components/xpl-choicelist/choice.d.ts

@@ -1,6 +1,6 @@
-interface Choice {
-    checked?: boolean;
-    children?: Choice[];
-    description?: string;
-    label?: string;
+export interface Choice {
+  checked?: boolean;
+  children?: Choice[];
+  description?: string;
+  label?: string;
 }

package/dist/types/components/xpl-choicelist/xpl-choicelist.d.ts

@@ -1,8 +1,9 @@
+import { Choice } from './choice';
 export declare class XplChoicelist {
   /**
    * An array of choices to be displayed in the list.
    * Each choice should be an object with keys:
-   * - `checked` [boolean] - whether to precheck or not
+   * - `checked` [boolean] - whether to pre-check or not
    * - `children` [Choice[]] - an array of child choices (recursive)
    * - `description` [string]
    * - `label` [string]

package/dist/types/components/xpl-dropdown/dropdownoption.d.ts

@@ -1,12 +1,10 @@
-interface DropdownOption {
-    label: string;
-    isSelected?: boolean;
-    isDisabled?: boolean;
+export interface DropdownOption {
+  label: string;
+  isSelected?: boolean;
+  isDisabled?: boolean;
 }
-
-type DropdownItem = Partial<DropdownOption & DropdownOptionGroup>;
-
-interface DropdownOptionGroup {
-    groupName: string;
-    options: DropdownItem[];
+export declare type DropdownItem = Partial<DropdownOption & DropdownOptionGroup>;
+export interface DropdownOptionGroup {
+  groupName: string;
+  options: DropdownItem[];
 }

package/dist/types/components/xpl-dropdown/xpl-dropdown-group/xpl-dropdown-group.d.ts

@@ -1,3 +1,4 @@
+import type { DropdownOptionGroup } from '../dropdownoption';
 export declare class XplDropdownGroup {
   /** text to display as heading */
   groupName: string;

package/dist/types/components/xpl-dropdown/xpl-dropdown.d.ts

@@ -1,3 +1,5 @@
+import type { DropdownItem } from './dropdownoption';
+import type { XplDropdownOption } from './xpl-dropdown-option/xpl-dropdown-option';
 export declare class XplDropdown {
   /** text to display as heading */
   isOpen: boolean;
@@ -17,15 +19,15 @@ export declare class XplDropdown {
    * @param {Object} options - component
    */
   /** call back function invoked when a selection is made */
-  update?: (e: Event, { component: XplDropdown }: {
-    component: any;
+  update?: (e: Event, { component }: {
+    component: XplDropdown;
   }) => void;
   hostElement: HTMLXplDropdownElement;
   /**
-   * called on dropdown option click and keydown events  to update isSelected states
+   * called on dropdown option click and keydown events to update isSelected states
    */
   handleSelect(e: Event, { component }: {
-    component: any;
+    component: XplDropdownOption;
   }): Promise<void>;
   private handleClickOutside;
   componentWillLoad(): void;

package/dist/types/components/xpl-list/listitem.d.ts

@@ -1,20 +1,16 @@
-interface ListItem {
-    avatar?: string;
-    avatars?: string[];
-    badges?:
-        | string[]
-        | {
-              dot?: boolean;
-              text: string;
-              variant?: string;
-          }[];
-    href?: string;
-    title: string;
-    metadata?:
-        | string[]
-        | {
-              icon: string;
-              text: string;
-          }[];
-    subtext?: string;
+export interface ListItem {
+  avatar?: string;
+  avatars?: string[];
+  badges?: string[] | {
+    dot?: boolean;
+    text: string;
+    variant?: string;
+  }[];
+  href?: string;
+  title: string;
+  metadata?: string[] | {
+    icon: string;
+    text: string;
+  }[];
+  subtext?: string;
 }

package/dist/types/components/xpl-list/xpl-list.d.ts

@@ -1,5 +1,6 @@
 import '../../../font-awesome/fontawesome';
 import '../../../font-awesome/regular';
+import type { ListItem } from './listitem';
 export declare class XplList {
   /**
    * `items` should be an array of objects with the following signature:

package/dist/types/components/xpl-select/selectchoice.d.ts

@@ -1,3 +1,4 @@
-interface SelectChoice extends DropdownItem {
-    value?: string;
+import { DropdownItem } from '../xpl-dropdown/dropdownoption';
+export interface SelectChoice extends DropdownItem {
+  value?: string;
 }

package/dist/types/components/xpl-select/xpl-select.d.ts

@@ -1,3 +1,4 @@
+import type { SelectChoice } from './selectchoice';
 export declare class XplSelect {
   /**
    * An array of choices for the user to choose from.

package/dist/types/components/xpl-table/xpl-table.d.ts

@@ -1,4 +1,4 @@
-import { Event, EventEmitter } from '../../stencil-public-runtime';
+import { EventEmitter } from '../../stencil-public-runtime';
 export declare class XplTable {
   columns?: string[];
   data?: string[][];
@@ -11,15 +11,14 @@ export declare class XplTable {
   selected: boolean[];
   tableSelect: EventEmitter;
   private container;
-  selectAll: (e: Event) => void;
-  selectOne: (e: Event, i: number) => void;
-  onChange: () => void;
-  onScroll: () => void;
+  private selectAll;
+  private selectOne;
+  private onChange;
+  private onScroll;
   /**
    * TODO: Need to figure out how this interplays with data
    * received from an API/server
    */
-  sortBy: (col: number, ascending?: boolean) => void;
   componentWillLoad(): void;
   render(): any;
 }

package/dist/types/components/xpl-utility-bar/xpl-utility-bar.d.ts

@@ -8,8 +8,13 @@ export declare class XplUtilityBar {
    * @property {boolean} - whether or not to show the bars to control the state of the navigation bar (open/close)
    */
   navControl?: boolean;
+  /**
+   * @property {boolean} - Optional property that defines whether or not the main nav is open at startup.
+   */
+  isNavOpenAtStartup?: boolean;
   open: boolean;
   private onNavToggle;
   private bars;
+  componentWillLoad(): void;
   render(): any;
 }