@ucd-lib/theme-elements 0.0.2 → 0.0.3

package/brand/ucd-theme-header/ucd-theme-header.js

@@ -1,7 +1,7 @@
 import { LitElement } from 'lit';
 import {render, styles} from "./ucd-theme-header.tpl.js";
 
-import { Mixin, MutationObserverElement, BreakPoints } from "../../utils/index.js";
+import { Mixin, MutationObserverElement, BreakPoints, Wait } from "../../utils/index.js";
 
 /**
  * @class UcdThemeHeader
@@ -36,7 +36,7 @@ import { Mixin, MutationObserverElement, BreakPoints } from "../../utils/index.j
  * 
  */
 export default class UcdThemeHeader extends Mixin(LitElement)
-  .with(MutationObserverElement, BreakPoints) {
+  .with(MutationObserverElement, BreakPoints, Wait) {
 
   static get properties() {
     return {
@@ -105,7 +105,7 @@ export default class UcdThemeHeader extends Mixin(LitElement)
 
     this.opened = true;
     this._transitioning = true;
-    await this._waitForAnimation();
+    await this.waitForAnimation();
     this._transitioning = false;
     return true;
 
@@ -121,7 +121,7 @@ export default class UcdThemeHeader extends Mixin(LitElement)
 
     this.opened = false;
     this._transitioning = true;
-    await this._waitForAnimation();
+    await this.waitForAnimation();
     this._transitioning = false;
     return true;
 
@@ -215,18 +215,6 @@ export default class UcdThemeHeader extends Mixin(LitElement)
     }
   }
 
-  /**
-   * @method _waitForAnimation
-   * @private
-   * @description Wait for time designated for open/close animation
-   * @returns {Promise}
-   */
-  async _waitForAnimation() {
-    return new Promise(resolve => {
-      setTimeout(resolve, this._animationDuration);
-    });
-  }
-
 }
 
 customElements.define('ucd-theme-header', UcdThemeHeader);

package/brand/ucd-theme-primary-nav/ucd-theme-primary-nav.js

@@ -4,7 +4,7 @@ import { styleMap } from 'lit/directives/style-map.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 
-import { Mixin, MutationObserverElement, BreakPoints } from "../../utils/index.js";
+import { Mixin, MutationObserverElement, BreakPoints, NavElement } from "../../utils/index.js";
 
 /**
  * @class UcdThemePrimaryNav
@@ -33,7 +33,7 @@ import { Mixin, MutationObserverElement, BreakPoints } from "../../utils/index.j
  *  </ucd-theme-primary-nav>
  */
 export default class UcdThemePrimaryNav extends Mixin(LitElement)
-  .with(MutationObserverElement, BreakPoints) {
+  .with(NavElement, MutationObserverElement, BreakPoints) {
 
   static get properties() {
     return {
@@ -58,8 +58,6 @@ export default class UcdThemePrimaryNav extends Mixin(LitElement)
     this.styleModifiers = "";
     this.hoverDelay = 300;
     this.animationDuration = 300;
-    this.navItems = [];
-    this.maxDepth = 2;
 
     this._classPrefix = "primary-nav";
     this._acceptedNavTypes = ['superfish', 'mega'];
@@ -108,14 +106,14 @@ export default class UcdThemePrimaryNav extends Mixin(LitElement)
       navItem.isTransitioning = true;
 
       // Get expanded height
-      navItem.mobileStyles.display = "block";
-      navItem.mobileStyles.height = 0 + "px";
+      navItem.inlineStyles.display = "block";
+      navItem.inlineStyles.height = 0 + "px";
       this.requestUpdate();
       await this.updateComplete;
       const expandedHeight = ul.scrollHeight + "px";
 
       // Set expanded height
-      navItem.mobileStyles.height = expandedHeight;
+      navItem.inlineStyles.height = expandedHeight;
       this.requestUpdate();
       await this.updateComplete;
 
@@ -131,7 +129,7 @@ export default class UcdThemePrimaryNav extends Mixin(LitElement)
         return;
       }
 
-      this.clearMobileAnimationStyles(navItem);
+      this.clearItemInlineStyles(navItem);
       if ( navItem.isClosing ) {
         navItem.isClosing = false;
         this.requestUpdate();
@@ -171,15 +169,15 @@ export default class UcdThemePrimaryNav extends Mixin(LitElement)
       navItem.isTransitioning = true;
 
       // Set expanded height
-      navItem.mobileStyles.height = ul.scrollHeight + "px";
-      navItem.mobileStyles.display = "block";
+      navItem.inlineStyles.height = ul.scrollHeight + "px";
+      navItem.inlineStyles.display = "block";
       this.requestUpdate();
       await this.updateComplete;
 
       // Set height to 0 by requesting all of the animation frames :-(
       requestAnimationFrame(() => {
         requestAnimationFrame(() => {
-          navItem.mobileStyles.height = "0px";
+          navItem.inlineStyles.height = "0px";
           this.requestUpdate();
   
           requestAnimationFrame(() => {
@@ -200,7 +198,7 @@ export default class UcdThemePrimaryNav extends Mixin(LitElement)
       }
 
 
-      this.clearMobileAnimationStyles(navItem);
+      this.clearItemInlineStyles(navItem);
       if ( navItem.timeout ) clearTimeout(navItem.timeout);
       if ( !navItem.isOpen ) return;
   
@@ -234,22 +232,6 @@ export default class UcdThemePrimaryNav extends Mixin(LitElement)
     });
   }
 
-  /**
-   * @method clearMobileAnimationStyles
-   * @description Removes inline styles on a nav element (used for mobile transition animation)
-   * @param {Object} navItem - Member of the this.navItems array
-   */
-  clearMobileAnimationStyles(navItem){
-    if (
-      navItem &&
-      navItem.mobileStyles && 
-      Object.keys(navItem.mobileStyles).length > 0 
-    ) {
-      navItem.mobileStyles = {};
-      this.requestUpdate();
-    }
-  }
-
   /**
    * @method isMegaMenu
    * @description Does this element use the mega menu?
@@ -260,20 +242,6 @@ export default class UcdThemePrimaryNav extends Mixin(LitElement)
     return false;
   }
 
-  /**
-   * @method getNavItem
-   * @description Retrieves an item from the navItems array.
-   * @param {Array} location - Coordinates of the item in the 'navItems' array. i.e. [0, 1, 4].
-   * @returns {Object}
-   */
-  getNavItem(location){
-    let accessor = "this.navItems";
-    if ( location && location.length > 0) {
-      accessor += "[" + location.join("].subItems[") + "]";
-    }
-    return eval(accessor);
-  }
-
   /**
    * @method _getNavClasses
    * @private
@@ -299,42 +267,10 @@ export default class UcdThemePrimaryNav extends Mixin(LitElement)
    *  Sets the 'navItems' property.
    */
   _onChildListMutation(){
-    const children = Array.from(this.children);
-    let navItems = children.map((child) => this._makeNavItemTree(child)).filter(navItem => navItem.linkText);
+    let navItems = this.parseNavChildren();
     if ( navItems.length ) this.navItems = navItems;
   }
 
-  /**
-   * @method _makeNavItemTree
-   * @private
-   * @description Extracts menu item data from DOM Element
-   * @param {Element} ele - Element
-   * @returns {Object} Formatted object describing the menu item and its children
-   */
-  _makeNavItemTree(ele){
-    let linkText, href, subItems = [], isOpen=false, mobileStyles={};
-    if ( ele.tagName === 'LI' && ele.children.length > 0) ele = ele.children[0];
-
-    if ( ele.tagName === 'A' ) {
-      linkText = ele.innerText;
-      href = ele.href;
-    } else if ( ele.tagName === 'LI' ) {
-      linkText = ele.innerText;
-    } else if ( ele.tagName === 'OL' || ele.tagName === 'UL' ) {
-      linkText = ele.getAttribute('link-text');
-      href = ele.getAttribute('href');
-
-      for (const child of Array.from(ele.children)) {
-        let childItem = this._makeNavItemTree(child);
-        if ( childItem.linkText ) subItems.push(childItem);
-      }
-    }
-
-    if ( linkText ) linkText = linkText.trim();
-    return {linkText, href, subItems, isOpen, mobileStyles};
-
-  }
-
   /**
    * @method _renderNavItem
    * @private
@@ -347,7 +283,7 @@ export default class UcdThemePrimaryNav extends Mixin(LitElement)
     const depth = location.length - 1;
 
     // Render item and its subnav
-    if ( this._hasSubNav(navItem) && depth < this.maxDepth) {
+    if ( this.itemHasSubNav(navItem) && depth < this.maxDepth) {
       return html`
       <li 
         id="nav--${location.join("-")}"
@@ -561,7 +497,7 @@ export default class UcdThemePrimaryNav extends Mixin(LitElement)
    */
   _completeMobileTransition(navItem){
     navItem.timeout = setTimeout(() => {
-      navItem.mobileStyles = {};
+      navItem.inlineStyles = {};
       navItem.isOpen = !navItem.isOpen;
       navItem.isTransitioning = false;
       this.requestUpdate();
@@ -630,18 +566,6 @@ export default class UcdThemePrimaryNav extends Mixin(LitElement)
 
   }
 
-  /**
-   * @method _hasSubNav
-   * @private
-   * @description Utility function for determining if a menu has subitems
-   * @param {Object} navItem - A member of the navItems array.
-   * @returns {Boolean}
-   */
-  _hasSubNav(navItem){
-    if ( navItem && navItem.subItems && navItem.subItems.length) return true;
-    return false;
-  }
-
   /**
    * @method _getItemMobileStyles
    * @private
@@ -652,8 +576,8 @@ export default class UcdThemePrimaryNav extends Mixin(LitElement)
   _getItemMobileStyles(location) {
     if ( this.isDesktop() ) return {};
     let navItem = this.getNavItem(location);
-    if ( !navItem.mobileStyles ) return {};
-    return navItem.mobileStyles;
+    if ( !navItem.inlineStyles ) return {};
+    return navItem.inlineStyles;
   }
 
 }

package/brand/ucd-theme-quick-links/ucd-theme-quick-links.js

@@ -1,7 +1,7 @@
 import { LitElement, html } from 'lit';
 import {render, styles} from "./ucd-theme-quick-links.tpl.js";
 
-import { Mixin, BreakPoints } from "../../utils/index.js";
+import { Mixin, MutationObserverElement, BreakPoints, Wait } from "../../utils/index.js";
 
 /**
  * @class UcdThemeQuickLinks
@@ -18,7 +18,7 @@ import { Mixin, BreakPoints } from "../../utils/index.js";
  * @property {Number} animationDuration - Length of animation when opening/closing menu
  */
 export default class UcdThemeQuickLinks extends Mixin(LitElement)
-  .with(BreakPoints) {
+  .with(MutationObserverElement, BreakPoints, Wait) {
 
   static get properties() {
     return {
@@ -67,7 +67,7 @@ export default class UcdThemeQuickLinks extends Mixin(LitElement)
     this._openedHeight = this.renderRoot.getElementById('menu').scrollHeight + "px";
     await this.updateComplete;
 
-    await this._waitForAnimation();
+    await this.waitForAnimation();
     this._transitioning = false;
     this.opened = true;
     return true;
@@ -84,11 +84,11 @@ export default class UcdThemeQuickLinks extends Mixin(LitElement)
 
     this._openedHeight = this.renderRoot.getElementById('menu').scrollHeight + "px";
     await this.updateComplete;
-    await this._waitForFrames(2);
+    await this.waitForFrames(2);
     this._openedHeight = 0;
     await this.updateComplete;
 
-    await this._waitForAnimation();
+    await this.waitForAnimation();
 
     this._transitioning = false;
     this.opened = false;
@@ -262,33 +262,6 @@ export default class UcdThemeQuickLinks extends Mixin(LitElement)
     return html``;
   }
 
-  /**
-   * @method _waitForAnimation
-   * @private
-   * @description Wait for time designated for open/close animation
-   * @returns {Promise}
-   */
-  async _waitForAnimation() {
-    return new Promise(resolve => {
-      setTimeout(resolve, this.animationDuration);
-    });
-  }
-
-  /**
-   * @method _waitForFrames
-   * @private
-   * @description Wait for specified number of animation frames
-   * @param {Number} ct Number of frames
-   */
-  async _waitForFrames(ct=1) {
-    for (let i = 0; i < ct; i++) {
-      await new Promise(resolve => {
-        requestAnimationFrame(resolve);
-      });
-    }
-  }
-  
-
 }
 
 customElements.define('ucd-theme-quick-links', UcdThemeQuickLinks);

package/brand/ucd-theme-subnav/ucd-theme-subnav.js

@@ -0,0 +1,192 @@
+import { LitElement, html } from 'lit';
+import {render, styles} from "./ucd-theme-subnav.tpl.js";
+import { ifDefined } from 'lit/directives/if-defined.js';
+
+import { styleMap } from 'lit/directives/style-map.js';
+
+import {Mixin, MutationObserverElement, NavElement, Wait} from "../../utils";
+
+/**
+ * @class UcdThemeSubnav
+ * @classdesc Component class for displaying a subnav
+ * 
+ * Patternlab url:
+ *  - http://dev.webstyleguide.ucdavis.edu/redesign/?p=molecules-sub-nav
+ *  - http://dev.webstyleguide.ucdavis.edu/redesign/?p=molecules-sub-nav-linked-title
+ * 
+ * @property {String} navTitle - Subnav header text
+ * @property {String} titleHref - Link for subnav header (optional)
+ * 
+ * @example
+ *  <ucd-theme-subnav nav-title="A subnav">
+ *    <li><a href="#">Link 1</a></li>
+ *    <li><a href="#">Link 2</a></li>
+ *    <ul link-text="Link with Children" href="#">
+ *      <li><a href="#">Child 1</a></li>
+ *      <li><a href="#">Child 2</a></li>
+ *      <li><a href="#">Child 3</a></li>
+ *    </ul>
+ *  </ucd-theme-subnav>
+ */
+export default class UcdThemeSubnav extends Mixin(LitElement)
+  .with(NavElement, MutationObserverElement, Wait) {
+
+  static get properties() {
+    return {
+      navTitle: {type: String, attribute: "nav-title"},
+      titleHref: {type: String, attribute: "title-href"},
+      navItems: {type: Array},
+      animationDuration: {type: Number, attribute: "animation-duration"}
+    };
+  }
+
+  static get styles() {
+    return styles();
+  }
+
+  constructor() {
+    super();
+    this.render = render.bind(this);
+
+    this.navTitle = "";
+    this.titleHref = "";
+    this.animationDuration = 300;
+  }
+
+  /**
+   * @method openNavItem
+   * @description Shows children of a nav item (if applicable)
+   * @param {Array} navLocation - Coordinates of the item in the 'navItems' array. i.e. [0, 1, 4].
+   * @returns {Boolean}
+   */
+  async openNavItem(navLocation){
+    let navItem = this.getNavItem(navLocation);
+    if ( !navItem || navItem.isTransitioning ) return false;
+
+    let navEle = this.renderRoot.getElementById(`nav--${navLocation.join("-")}`);
+    if ( !navEle ) return false;
+    let navUL = navEle.querySelector('ul');
+    if ( !navUL ) return false;
+    navItem.isTransitioning = true;
+
+    // Get expanded height
+    navItem.inlineStyles.display = "block";
+    navItem.inlineStyles.height = "0px";
+    await this.waitForUpdate();
+    const expandedHeight = navUL.scrollHeight + "px";   
+    
+    // Set expanded height
+    navItem.inlineStyles.height = expandedHeight;
+    await this.waitForUpdate();
+
+    // Complete animation
+    await this.waitForAnimation();
+    navItem.inlineStyles = {};
+    navItem.isOpen = true;
+    navItem.isTransitioning = false;
+    this.requestUpdate();
+
+    return true;
+  }
+
+  /**
+   * @method closeNavItem
+   * @description Hides children of a nav item (if applicable)
+   * @param {Array} navLocation - Coordinates of the item in the 'navItems' array. i.e. [0, 1, 4].
+   * @returns {Boolean}
+   */
+  async closeNavItem(navLocation){
+    let navItem = this.getNavItem(navLocation);
+    if ( !navItem || navItem.isTransitioning ) return false;
+
+    let navEle = this.renderRoot.getElementById(`nav--${navLocation.join("-")}`);
+    if ( !navEle ) return false;
+    let navUL = navEle.querySelector('ul');
+    if ( !navUL ) return false;
+    navItem.isTransitioning = true;
+
+    // Set expanded height
+    navItem.inlineStyles.height = navUL.scrollHeight + "px";
+    navItem.inlineStyles.display = "block";
+    await this.waitForUpdate();
+
+    // Set height to zero
+    await this.waitForFrames(2);
+    navItem.inlineStyles.height = "0px";
+    await this.waitForUpdate();
+
+    // Complete animation
+    await this.waitForAnimation();
+    navItem.inlineStyles = {};
+    navItem.isOpen = false;
+    navItem.isTransitioning = false;
+    this.requestUpdate();  
+
+    return true;
+
+  }
+
+  /**
+   * @method _onChildListMutation
+   * @private
+   * @description Fires when light dom child list changes. Injected by MutationObserverElement mixin.
+   *  Sets the 'navItems' property.
+   */
+  _onChildListMutation(){
+    let navItems = this.parseNavChildren();
+    if ( navItems.length ) this.navItems = navItems;
+  }
+
+  /**
+   * @method _renderNavItem
+   * @private
+   * @description Renders a menu item and all its children to the specified max depth
+   * @param {Object} item - An item from the 'navItems' element property
+   * @param {Array} location - Coordinates of the item in the 'navItems' array. i.e. [0, 1, 4]
+   * @returns {TemplateResult}
+   */
+  _renderNavItem(item, location){
+    const depth = location.length - 1;
+
+    if ( this.itemHasSubNav(item) && depth < this.maxDepth) {
+      return html`
+        <li id="nav--${location.join("-")}">
+          <div class="submenu-toggle__wrapper">
+            <a href=${ifDefined(item.href ? item.href : null)}>${item.linkText}</a>
+            <button 
+              @click=${() => this._toggleItemMenu(location)}
+              class="submenu-toggle ${item.isOpen ? "submenu-toggle--open" : ""}" 
+              ?disabled=${item.isTransitioning}
+              aria-label="Toggle Submenu">
+              <span class="submenu-toggle__icon"></span>
+            </button>
+          </div>
+          <ul style=${styleMap(item.inlineStyles)} class="${item.isOpen ? "is-open": "" }">
+            ${item.subItems.map((subItem, i) => this._renderNavItem(subItem, location.concat([i])))}
+          </ul>
+        </li>
+      `;
+    }
+    return html`
+      <li id="nav--${location.join("-")}"><a href=${item.href}>${item.linkText}</a></li>
+    `;
+  }
+
+  /**
+   * @method _toggleItemMenu
+   * @private
+   * @description Attached to nav item button click. Shows/hides children.
+   * @param {Array} navLocation - Coordinates of the item in the 'navItems' array. i.e. [0, 1, 4]
+   */
+  _toggleItemMenu(navLocation){
+    let navItem = this.getNavItem(navLocation);
+    if ( navItem.isOpen ) {
+      this.closeNavItem(navLocation);
+    } else {
+      this.openNavItem(navLocation);
+    }
+  }
+
+}
+
+customElements.define('ucd-theme-subnav', UcdThemeSubnav);

package/brand/ucd-theme-subnav/ucd-theme-subnav.tpl.js

@@ -0,0 +1,60 @@
+import { html, css } from 'lit';
+
+import normalizeStyles from "@ucd-lib/theme-sass/normalize.css.js";
+import headerStyles from "@ucd-lib/theme-sass/1_base_html/_headings.css.js";
+import formStyles from "@ucd-lib/theme-sass/1_base_html/_forms.css.js";
+import menuStyles from "@ucd-lib/theme-sass/2_base_class/_misc.css.js";
+import subNavStyles from "@ucd-lib/theme-sass/4_component/_nav-sub.css.js";
+import subNavToggleStyles from "@ucd-lib/theme-sass/4_component/_submenu-toggle.css.js";
+
+export function styles() {
+  const elementStyles = css`
+    :host {
+      display: block;
+    }
+    ul.sub-nav__menu ul {
+      display: none;
+      overflow-y: hidden;
+      visibility: visible;
+      height: auto;
+      border-top-width: 0px;
+      border-bottom-width: 0px;
+      padding-top: 0px;
+      padding-bottom: 0px;
+    }
+    ul.sub-nav__menu ul.is-open {
+      display: block;
+    }
+  `;
+
+  return [
+    normalizeStyles,
+    headerStyles,
+    formStyles,
+    menuStyles,
+    subNavStyles,
+    subNavToggleStyles,
+    elementStyles
+  ];
+}
+
+export function render() {
+  return html`
+  <style>
+    ul.sub-nav__menu ul {
+      transition: height ${this.animationDuration + "ms"};
+    }
+
+  </style>
+  <nav class="sub-nav">
+    ${this.navTitle ? html`
+      <h2 class="sub-nav__title${this.titleHref ? "-linked" : ""}">
+        ${this.titleHref ? html`<a href=${this.titleHref}>${this.navTitle}</a>` : this.navTitle}
+      </h2>
+    ` : html``}
+    <ul class="sub-nav__menu">
+      ${this.navItems.map((item, i) => this._renderNavItem(item, [i]))}
+    </ul>
+  </nav>
+
+`;}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ucd-lib/theme-elements",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "description": "Custom elements for the UCD brand theme",
   "main": "index.js",
   "scripts": {

package/ucdlib/ucdlib-icons/utils.js

@@ -1,7 +1,7 @@
 import "../ucdlib-iconset/ucdlib-iconset";
 import "../ucdlib-icon/ucdlib-icon";
 
-import { html, render } from "lit";
+import { html, render } from "lit-html";
 
 /**
  * @description Creates iconset and moves to document head

package/utils/index.js

@@ -1,6 +1,14 @@
 import Mixin from './mixin.js';
-import {MutationObserverElement} from './mutation-observer.js';
-import {MainDomElement} from './main-dom-element.js';
+import { MutationObserverElement } from './mutation-observer.js';
+import { MainDomElement } from './main-dom-element.js';
 import { BreakPoints } from './break-points.js';
+import { NavElement } from './nav-element.js';
+import { Wait } from './wait.js';
 
-export {Mixin, MutationObserverElement, MainDomElement, BreakPoints};
+export {
+  Mixin, 
+  MutationObserverElement, 
+  MainDomElement, 
+  BreakPoints,
+  Wait,
+  NavElement};

package/utils/nav-element.js

@@ -0,0 +1,101 @@
+/**
+ * @function NavElement
+ * @param {Class} superClass - LitElement or child class.
+ * @description Adds utilities for navigation to a LitElement
+ * 
+ * @returns {Class} LitElement with Nav utilities attached
+ */
+const NavElement = (superClass) => class extends superClass {
+
+  constructor() {
+    super();
+    this.navItems = [];
+    this.maxDepth = 2;
+  }
+
+  /**
+   * @method parseChildren
+   * @description Creates a tree-like nav Array structure from element children
+   * @param {HTMLCollection} children - Element children (non-shadow)
+   * @returns {Array}
+   */
+  parseNavChildren( children=this.children ){
+    if ( !children ) return [];
+    children = Array.from(this.children);
+    let navItems = children.map((child) => this._makeNavItemTree(child)).filter(navItem => navItem.linkText);
+    return navItems;
+  }
+
+  /**
+   * @method _makeNavItemTree
+   * @private
+   * @description Extracts menu item data from DOM Element
+   * @param {Element} ele - Element
+   * @returns {Object} Formatted object describing the menu item and its children
+   */
+  _makeNavItemTree(ele){
+    let linkText, href, subItems = [], isOpen=false, inlineStyles={};
+    if ( ele.tagName === 'LI' && ele.children.length > 0) ele = ele.children[0];
+
+    if ( ele.tagName === 'A' ) {
+      linkText = ele.innerText;
+      href = ele.href;
+    } else if ( ele.tagName === 'LI' ) {
+      linkText = ele.innerText;
+    } else if ( ele.tagName === 'OL' || ele.tagName === 'UL' ) {
+      linkText = ele.getAttribute('link-text');
+      href = ele.getAttribute('href');
+
+      for (const child of Array.from(ele.children)) {
+        let childItem = this._makeNavItemTree(child);
+        if ( childItem.linkText ) subItems.push(childItem);
+      }
+    }
+
+    if ( linkText ) linkText = linkText.trim();
+    return {linkText, href, subItems, isOpen, inlineStyles};
+  }
+
+  /**
+   * @method getNavItem
+   * @description Retrieves an item from the navItems array.
+   * @param {Array} location - Coordinates of the item in the 'navItems' array. i.e. [0, 1, 4].
+   * @returns {Object}
+   */
+  getNavItem(location){
+    let accessor = "this.navItems";
+    if ( location && location.length > 0) {
+      accessor += "[" + location.join("].subItems[") + "]";
+    }
+    return eval(accessor);
+  }
+
+  /**
+   * @method itemHasSubNav
+   * @description Utility function for determining if a menu has subitems
+   * @param {Object} navItem - A member of the navItems array.
+   * @returns {Boolean}
+   */
+  itemHasSubNav(navItem){
+    if ( navItem && navItem.subItems && navItem.subItems.length) return true;
+    return false;
+  }
+
+  /**
+   * @method clearMobileAnimationStyles
+   * @description Removes inline styles on a nav element (used for mobile transition animation)
+   * @param {Object} navItem - Member of the this.navItems array
+   */
+  clearItemInlineStyles(navItem){
+    if (
+      navItem &&
+      navItem.inlineStyles && 
+      Object.keys(navItem.inlineStyles).length > 0 
+    ) {
+      navItem.inlineStyles = {};
+      this.requestUpdate();
+    }
+  }
+};
+
+export {NavElement};

package/utils/wait.js

@@ -0,0 +1,65 @@
+/**
+ * @function Wait
+ * @param {Class} superClass - LitElement or child class.
+ * @description Adds wait methods to Lit element
+ * 
+ * @returns {Class} LitElement with Wait methods
+ */
+const Wait = (superClass) => class extends superClass {
+
+  /**
+   * @method wait
+   * @description Wait for the specified amount of time
+   * @param {Number} time - Time to wait (ms)
+   * @returns 
+   */
+  async wait(time){
+    return new Promise(resolve => {
+      setTimeout(resolve, time);
+    });
+  }
+
+  /**
+   * @method waitForUpdate
+   * @description Requests and waits for Lit update.
+   */
+  async waitForUpdate(){
+    this.requestUpdate();
+    await this.updateComplete;
+  }
+
+  /**
+   * @method waitForFrames
+   * @description Wait for specified number of animation frames
+   * @param {Number} ct Number of frames
+   */
+  async waitForFrames(ct=1) {
+    for (let i = 0; i < ct; i++) {
+      await new Promise(resolve => {
+        requestAnimationFrame(resolve);
+      });
+    }
+  }
+
+  /**
+   * @method waitForAnimation
+   * @description Wait for animation time designated by element
+   * @returns {Promise}
+   */
+  async waitForAnimation() {
+
+    let animationDuration = 0;
+    if ( this.animationDuration ) {
+      animationDuration = this.animationDuration;
+    } else if (this._animationDuration) {
+      animationDuration = this._animationDuration;
+    } else {
+      console.warn("animationDuration property not set!");
+    }
+
+    return new Promise(resolve => {
+      setTimeout(resolve, animationDuration);
+    });
+  }
+};
+export {Wait};