@ucd-lib/theme-elements 0.0.3 → 0.0.4

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

@@ -76,25 +76,6 @@ export default class UcdThemeHeader extends Mixin(LitElement)
 
   }
 
-  /**
-   * @method updated
-   * @description Lit lifecycle method called after element has updated.
-   * @param {Map} props - Properties updated in cycle
-   * @private
-   */
-  updated( props ){
-
-    // Check if we're using the default branding div
-    const brandProps = ['siteName', 'slogan', 'figureSrc'];
-    if ( brandProps.map(p => props.has(p)).filter(Boolean).length ) {
-      if ( brandProps.map(p => this[p]).filter(Boolean).length ) {
-        this._hasSlottedBranding = false;
-      } else {
-        this._hasSlottedBranding = true;
-      }
-    }
-  }
-
   /**
    * @method open
    * @description Opens header menu in mobile
@@ -213,6 +194,16 @@ export default class UcdThemeHeader extends Mixin(LitElement)
     } else {
       this._hasSearch = false;
     }
+
+    let UcdlibBrandingBar = this.querySelector('ucdlib-branding-bar');
+    if ( UcdlibBrandingBar ) {
+      UcdlibBrandingBar.setAttribute('slot', 'branding-bar');
+      this._hasSlottedBranding = true;
+    } else if ( this.querySelector("*[slot='branding-bar']") ){
+      this._hasSlottedBranding = true;
+    } else {
+      this._hasSlottedBranding = false;
+    }
   }
 
 }

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

@@ -20,6 +20,9 @@ export function styles() {
     button {
       cursor: pointer;
     }
+    ::slotted(ucdlib-branding-bar){
+      width: 100%;
+    }
   `;
 
   return [

package/brand/ucd-theme-slim-select/ucd-theme-slim-select.js

@@ -0,0 +1,64 @@
+import { LitElement } from 'lit';
+import {render, styles} from "./ucd-theme-slim-select.tpl.js";
+
+import SlimSelect from 'slim-select';
+
+import { Mixin, MutationObserverElement } from "../../utils/index.js";
+
+/**
+ * @class UcdThemeSlimSelect
+ * @classdesc UI component class for displaying a fancy select. This is a wrapper element around the 'slim-select' package.
+ * 
+ * Patternlab URL:
+ *  - http://dev.webstyleguide.ucdavis.edu/redesign/?p=atoms-select-menu
+ */
+export default class UcdThemeSlimSelect extends Mixin(LitElement)
+  .with(MutationObserverElement) {
+
+  static get properties() {
+    return {
+      
+    };
+  }
+
+  static get styles() {
+    return styles();
+  }
+
+  constructor() {
+    super();
+    this.render = render.bind(this);
+  }
+  /**
+   * @method connectedCallback
+   * @private
+   * @description Native lifecycle method called when element is connected
+   */
+  connectedCallback(){
+    super.connectedCallback();
+    this._childListObserver.disconnect();
+    this._childListObserver.observe(this, {subtree: true, childList: true, attributes: true, characterData: true});
+  }
+
+  /**
+   * @method _onChildListMutation
+   * @private
+   * @description Fires when light dom child list changes. Injected by MutationObserverElement mixin.
+   */
+  _onChildListMutation(){
+    const children = Array.from(this.children);
+    if (children.length == 0 || children[0].tagName != "SELECT") return;
+    const select = children[0].cloneNode(true);
+    this.renderRoot.innerHTML= "";
+    this.renderRoot.appendChild(select);
+
+    this.slimSelect = new SlimSelect({
+      select: select,
+      onChange: (info) => this.dispatchEvent(new CustomEvent("change", {detail: info}))
+    });
+
+  }
+
+}
+
+customElements.define('ucd-theme-slim-select', UcdThemeSlimSelect);

package/brand/ucd-theme-slim-select/ucd-theme-slim-select.tpl.js

@@ -0,0 +1,26 @@
+import { html, css } from 'lit';
+
+import formStyles from "@ucd-lib/theme-sass/2_base_class/_forms.css.js";
+import slimSelectStyles from "@ucd-lib/theme-sass/slim-select.css.js"
+import selectStyles from "@ucd-lib/theme-sass/4_component/_slim-select.css.js";
+
+
+
+export function styles() {
+  const elementStyles = css`
+    :host {
+      display: block;
+    }
+  `;
+
+  return [
+    formStyles,
+    slimSelectStyles,
+    selectStyles,
+    elementStyles];
+}
+
+export function render() { 
+return html`
+
+`;}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ucd-lib/theme-elements",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "description": "Custom elements for the UCD brand theme",
   "main": "index.js",
   "scripts": {
@@ -9,8 +9,9 @@
   "author": "jrmerz@ucdavis.edu",
   "license": "MIT",
   "dependencies": {
-    "@ucd-lib/theme-sass": "^5.0.10",
+    "@ucd-lib/theme-sass": "^5.0.11",
     "lit": "^2.0.0-rc.4",
-    "photoswipe": "^4.1.3"
+    "photoswipe": "^4.1.3",
+    "slim-select": "^1.26.2"
   }
 }

package/ucdlib/ucdlib-branding-bar/book.js

@@ -0,0 +1,4 @@
+import { svg } from "lit";
+export default svg`
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 276.31 432.01"><path d="M102.37,337.79,148,325.38c13.66-3.71,24-17.44,24-31.94V121.15l-69.56-11Z" style="fill:#ffbf00"/><path d="M171.94,87.9V0L24.87,31.15C10.69,34.15,0,47.81,0,63v302.7l69.55-18.93v-275Z" style="fill:#ffbf00"/><path d="M250.56,100.25,171.94,87.9v33.26l71.49,11.24V393.6l-141-22.18V337.8l-32.84,8.94v25.48c0,15.3,11.3,29.06,25.72,31.33l181,28.46V131.58C276.27,116.28,265,102.52,250.56,100.25Z" style="fill:#022851"/></svg>
+`;

package/ucdlib/ucdlib-branding-bar/logo.js

@@ -0,0 +1,67 @@
+import { svg } from "lit";
+export default svg`
+
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 1512 436.8" style="enable-background:new 0 0 1512 436.8;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#DAAA00;}
+	.st1{fill:#002855;}
+	.st2{fill:none;}
+</style>
+<g>
+	<g>
+		<g>
+			<g>
+				<g>
+					<g>
+						<path class="st0" d="M1369.7,174.7l18.4-48.8l3.2,2.8c11.3,9.2,26.7,17.1,41.2,17.4c13,0.3,19.3-3.2,17.6-14.1
+							c-1.3-8.2-10.5-9.6-16.3-10.8l-12.7-2.5c-24.7-4.6-45.4-19.8-45.4-48.7c0-43.6,37.6-68.1,75.4-68.1c19.9,0,38.1,5.1,55.1,16.1
+							l-16,43.3c-8.8-6.3-22.1-15.2-38.9-15.8c-5.5-0.2-18.2,2.7-14.1,15.6c1.8,5.5,9.6,7.8,14.4,8.9l14.3,3.4
+							c26.7,6.2,46.1,21.5,46.1,52.6c0,43.8-37.8,65.5-75.4,65.5C1414.7,191.5,1389.3,185.3,1369.7,174.7"/>
+						<rect x="1291.7" y="4.9" class="st0" width="64.4" height="183.9"/>
+						<polygon class="st0" points="1219.1,4.9 1285.1,4.9 1217.8,188.8 1164.2,188.8 1097.1,4.9 1162.8,4.9 1191,115.8 						"/>
+						<path class="st0" d="M941,188.8h66.9l5.1-23.1h47.7l6.3,23.1h66.9L1071.3,4.9h-70.2L941,188.8z M1036.9,57.9L1036.9,57.9
+							c1.2,7.8,12.7,64.1,12.7,64.1h-25.3L1036.9,57.9z"/>
+						<path class="st0" d="M840.4,135.9h4.3c21.2,0,37-12.7,37-36.7c0-25.8-13.9-40.3-37.2-40.3h-4V135.9z M775.6,4.9h65.9
+							c58.8,0,103.8,27,103.8,94.6c0,54.5-36.7,89.3-88.1,89.3l-81.6-0.1V4.9z"/>
+						<path class="st0" d="M737.1,10.6l3.4,30.2c0.8,7.2,4.9,24.4-0.2,22.1c-3.2-1.4-5.8-9.2-8.4-16.1c-1.3-3.5-7.6-20.1-9.2-21.4
+							c-7.9-5.9-27.7-12.6-41.1-12.7c-40.5-0.2-67.4,29.8-67.4,82.8c0,38.1,18.2,83.7,64.6,83.7c16.6,0,48.4-5.2,57.1-28.9
+							c3.9-10.7,7.5-20.2,10.1-17.3c1.9,2.1-0.6,10.7-1.7,15.3c-5.5,21.9-5.8,28.6-7.5,29.4c-20.9,10.5-47.8,14-71.3,14
+							c-74.8,0-100.6-43.6-100.6-87.2C565,28.9,611.5-3,683.6,0.2C701.8,0.9,720,4.2,737.1,10.6"/>
+						<path class="st0" d="M516.4,14l-12-4.2c-4-3.6,0.9-4.6,0.9-4.6s17.3,3.2,60.4-0.4c0,0,3.7,0.7,1.2,3.8l-14.1,6
+							c-9.2,4-9.2,1.7-9.2,11.8l-0.1,93.7c0,73.3-74.6,71.7-89.1,71.7c-6.9,0-75.3,0-75.3-58.9V33.7c0-17.3,1.8-16.8-3.9-18.9
+							l-17.3-6.5c0,0-2.9-4.2,2.3-3.9c14.1,0.7,34.6,3.8,82.7,0.3c0,0,4.2,1,1.4,4l-14.4,4c-11,4.9-9.5,1.2-9.8,12.4l0.3,97.8
+							c0,24,12.3,53.7,51.2,53.7c52.8,0,53.3-45.7,53.3-55.9l0.1-96.9C525.6,14.8,524.4,17.4,516.4,14"/>
+					</g>
+				</g>
+				<rect x="379.1" y="229.5" class="st0" width="1132.9" height="7.7"/>
+			</g>
+		</g>
+	</g>
+	<g>
+		<path class="st1" d="M419,403h48v33.9h-88V282.9h40V403z"/>
+		<path class="st1" d="M551.3,436.8h-40V282.9h40V436.8z"/>
+		<path class="st1" d="M601.9,436.8V282.9H659c27.4,0,45.7,10.6,45.7,40c0,13.9-4.5,25.1-16.9,31.4v0.4c22,2.9,31.4,17.8,31.4,39.2
+			c0,32.3-27.6,42.9-55.7,42.9H601.9z M641.9,343.3h4.5c10.6,0,21.6-1.8,21.6-14.9c0-14.1-12.5-14.9-23.3-14.9h-2.9V343.3z
+			 M641.9,406.2h5.1c11.8,0,31.8,0.6,31.8-16.3c0-18.6-19.8-16.7-32.9-16.7h-4.1V406.2z"/>
+		<path class="st1" d="M886.7,436.8h-49.8l-37.8-59.2h-0.4v59.2h-40V282.9h59.8c30.4,0,53.5,14.5,53.5,47.4
+			c0,21.2-11.8,39.6-33.7,43.5L886.7,436.8z M798.7,351.9h3.9c13.1,0,27.8-2.4,27.8-19.2c0-16.7-14.7-19.2-27.8-19.2h-3.9V351.9z"/>
+		<path class="st1" d="M951.6,410.1L941,436.8h-42.5l59.2-153.9h43.7l58,153.9h-42.7l-10-26.7H951.6z M979.6,330.5h-0.4l-16.5,49
+			h33.3L979.6,330.5z"/>
+		<path class="st1" d="M1210.9,436.8h-49.8l-37.8-59.2h-0.4v59.2h-40V282.9h59.8c30.4,0,53.5,14.5,53.5,47.4
+			c0,21.2-11.8,39.6-33.7,43.5L1210.9,436.8z M1122.9,351.9h3.9c13.1,0,27.8-2.4,27.8-19.2c0-16.7-14.7-19.2-27.8-19.2h-3.9V351.9z"
+			/>
+		<path class="st1" d="M1216.4,282.9h48l28.8,41.8l28.8-41.8h48l-56.8,80v73.9h-40v-73.9L1216.4,282.9z"/>
+	</g>
+</g>
+<g>
+	<path class="st2" d="M148,330.2l-45.6,12.4v33.6l141,22.2V137.2L171.9,126v172.3C171.9,312.8,161.6,326.5,148,330.2z"/>
+	<path class="st0" d="M102.4,342.6l45.6-12.4c13.7-3.7,24-17.4,24-31.9V126L102.4,115V342.6z"/>
+	<path class="st0" d="M171.9,92.7V4.8L24.9,36C10.7,39,0,52.7,0,67.8v302.7l69.6-18.9V76.6L171.9,92.7z"/>
+	<path class="st1" d="M250.6,105.1l-78.6-12.4V126l71.5,11.2v261.2l-141-22.2v-33.6l-32.8,8.9v25.5c0,15.3,11.3,29.1,25.7,31.3
+		l181,28.5V136.4C276.3,121.1,265,107.4,250.6,105.1z"/>
+</g>
+<rect class="st2" width="1512" height="436.8"/>
+<rect class="st2" width="1512" height="436.8"/>
+</svg>
+`;

package/ucdlib/ucdlib-branding-bar/ucdlib-branding-bar.js

@@ -0,0 +1,95 @@
+import { LitElement, svg } from 'lit';
+import {render, styles} from "./ucdlib-branding-bar.tpl.js";
+
+import {Mixin, MutationObserverElement, NavElement} from "../../utils";
+import logo from "./logo.js";
+import bookLogo from "./book.js";
+
+/**
+ * @class UcdlibBrandingBar
+ * @classdesc Component class for displaying a Library branding bar in a header
+ * 
+ * @property {String} figure - Figure to display: 'book' or 'logo'
+ * @property {String} siteName - Name of website to display
+ * @property {String} slogan - Optional text to display below site name
+ * @property {String} siteUrl - Url to use for links around site name and figure
+ * 
+ * @examples
+ *  <ucdlib-branding-bar>
+ *   <a href="#">My Account</a>
+ *   <a href="#">Access VPN</a>
+ *   <a href="#">Give</a>
+ *  </ucdlib-branding-bar>
+ */
+export default class UcdlibBrandingBar extends Mixin(LitElement)
+  .with(NavElement, MutationObserverElement) {
+
+  static get properties() {
+    return {
+      figure: {type: String},
+      siteName: {type: String, attribute: "site-name"},
+      slogan: {type: String},
+      siteUrl: {type: String, attribute: "site-url"},
+      navItems: {type: Array}
+    };
+  }
+
+  static get styles() {
+    return styles();
+  }
+
+  constructor() {
+    super();
+    this.render = render.bind(this);
+
+    this.figure = "book";
+    this.siteName = "UC Davis Library";
+    this.slogan = "";
+    this.siteUrl = "/";
+    this.navItems = [];
+  }
+
+  /**
+   * @method willUpdate
+   * @description Lit lifecycle method called before an update
+   * @private
+   * @param {Map} props - Properties that have changed
+   */
+  willUpdate(props){
+    if ( props.has("figure") && props.get("figure") !== undefined ){
+      const allowedKeywords = ['book', 'logo'];
+      if ( !allowedKeywords.includes(props.get('figure')) ){
+        console.warn(`${props.get('figure')} is not a recognized "figure" keyword.
+          Allowed values: ${JSON.stringify(allowedKeywords)}
+        `);
+        this.figure = allowedKeywords[0];
+      }
+    }
+  }
+
+  /**
+   * @method _renderFigure
+   * @description Renders an svg logo
+   * @private
+   * @returns {TemplateResult}
+   */
+  _renderFigure(){
+    if ( this.figure === 'logo') return logo;
+    if ( this.figure === 'book' ) return bookLogo;
+    return svg``;
+  }
+
+  /**
+   * @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;
+  }
+
+}
+
+customElements.define('ucdlib-branding-bar', UcdlibBrandingBar);

package/ucdlib/ucdlib-branding-bar/ucdlib-branding-bar.tpl.js

@@ -0,0 +1,102 @@
+import { html, css } from 'lit';
+import { ifDefined } from 'lit/directives/if-defined.js';
+
+import headingStyles from "@ucd-lib/theme-sass/1_base_html/_headings.css.js";
+import linkStyles from "@ucd-lib/theme-sass/1_base_html/_links.css.js";
+import brandingStyles from "@ucd-lib/theme-sass/4_component/_site-branding.css.js"
+
+
+export function styles() {
+  const elementStyles = css`
+    :host {
+      display: block;
+    }
+    .container {
+      display: flex;
+      flex-direction: row;
+      flex-wrap: nowrap;
+      align-items: center;
+      justify-content: space-between;
+    }
+    .site-branding__figure svg {
+      max-height: 6.25rem;
+      max-width: 100%;
+      height: auto;
+    }
+    .figure--book svg {
+      width: 70px;
+      min-width: 70px;
+    }
+    .figure--logo svg {
+      width: 375px;
+      min-width: 375px;
+    }
+    [hidden] {
+      display: none !important;
+    }
+    .figure--logo .site-branding__body {
+      display: none;
+    }
+    .menu {
+      display: flex;
+      flex-direction: row;
+      flex-wrap: nowrap;
+      align-items: center;
+    }
+    .menu a {
+      text-decoration: none;
+      font-weight: 700;
+      margin-right: 1rem;
+    }
+    .menu a:last-child {
+      margin-right: 0;
+    }
+
+    @media (max-width: 992px) {
+      .figure--logo svg {
+        width: 200px;
+        min-width: 200px;
+      }
+
+      .menu {
+        display: none;
+      }
+    }
+    
+  `;
+
+  return [
+    headingStyles,
+    brandingStyles,
+    linkStyles,
+    elementStyles];
+}
+
+export function render() { 
+return html`
+  <div class="container figure--${this.figure}">
+    <div class="site-branding">
+      <div class="site-branding__figure">
+        <a href="${this.siteUrl}" class="">${this._renderFigure()}</a>
+      </div>
+      <div class="site-branding__body">
+        <h1 class="site-branding__site-name" ?hidden=${!this.siteName}>
+          <a href=${this.siteUrl}>${this.siteName}</a>
+        </h1>
+        <div class="site-branding__slogan" ?hidden=${!this.slogan}>${this.slogan}</div>
+      </div>
+    </div>
+    ${this.navItems.length ? html`
+      <nav class="menu">
+        ${this.navItems.map(link => html`
+          <a 
+            href=${ifDefined(link.href ? link.href : null)}
+            target=${ifDefined(link.newTab ? "_blank": null)}
+            >${link.linkText}</a>
+        `)}
+      </nav>
+    ` : html``}
+
+  </div>
+
+`;}

package/ucdlib/ucdlib-icons/ucdlib-icons.js

@@ -66,6 +66,12 @@ const template = html`
     <g id="card-membership"><path d="M20 2H4c-1.11 0-2 .89-2 2v11c0 1.11.89 2 2 2h4v5l4-2 4 2v-5h4c1.11 0 2-.89 2-2V4c0-1.11-.89-2-2-2zm0 13H4v-2h16v2zm0-5H4V4h16v6z"></path></g>
     <g id="card-travel"><path d="M20 6h-3V4c0-1.11-.89-2-2-2H9c-1.11 0-2 .89-2 2v2H4c-1.11 0-2 .89-2 2v11c0 1.11.89 2 2 2h16c1.11 0 2-.89 2-2V8c0-1.11-.89-2-2-2zM9 4h6v2H9V4zm11 15H4v-2h16v2zm0-5H4V8h3v2h2V8h6v2h2V8h3v6z"></path></g>
     <g id="change-history"><path d="M12 7.77L18.39 18H5.61L12 7.77M12 4L2 20h20L12 4z"></path></g>
+    <g id="award"><path d="M7.74,16.79c-.39-.39-.19-.28-1.13-.53a3.37,3.37,0,0,1-1.14-.6l-2,5a.72.72,0,0,0,.69,1l2.37-.09,1.63,1.72a.71.71,0,0,0,1.18-.23l2.34-5.73a3.22,3.22,0,0,1-3.9-.53Zm12.83,3.87-2-5a3.37,3.37,0,0,1-1.14.6c-.95.25-.74.14-1.13.53a3.22,3.22,0,0,1-3.9.53l2.34,5.73a.71.71,0,0,0,1.18.23l1.63-1.72,2.37.09A.72.72,0,0,0,20.57,20.66Zm-5.38-4.89c.69-.7.76-.63,1.74-.9a1.83,1.83,0,0,0,1.28-1.3,2.91,2.91,0,0,1,1.17-2.06,1.87,1.87,0,0,0,.46-1.78,3,3,0,0,1,0-2.37,1.88,1.88,0,0,0-.46-1.78,2.89,2.89,0,0,1-1.17-2.05,1.81,1.81,0,0,0-1.28-1.3,2.87,2.87,0,0,1-2-1.19A1.76,1.76,0,0,0,13.17.56a2.81,2.81,0,0,1-2.34,0A1.76,1.76,0,0,0,9.09,1a2.87,2.87,0,0,1-2,1.19,1.81,1.81,0,0,0-1.28,1.3A2.89,2.89,0,0,1,4.62,5.58a1.88,1.88,0,0,0-.46,1.78,3,3,0,0,1,0,2.37,1.87,1.87,0,0,0,.46,1.78,2.91,2.91,0,0,1,1.17,2.06,1.83,1.83,0,0,0,1.28,1.3c1,.27,1.08.23,1.74.9A1.76,1.76,0,0,0,11,16,1.8,1.8,0,0,1,13,16,1.76,1.76,0,0,0,15.19,15.77ZM7.76,8.4A4.24,4.24,0,1,1,12,12.72,4.28,4.28,0,0,1,7.76,8.4Z"></path></g>
+    <g id="chalkboard-teacher"><path d="M7.8,15.6a.75.75,0,0,0-.26,0A4.93,4.93,0,0,1,6,15.9a4.93,4.93,0,0,1-1.54-.26.75.75,0,0,0-.26,0A4.2,4.2,0,0,0,0,19.82,1.79,1.79,0,0,0,1.8,21.6h8.4A1.79,1.79,0,0,0,12,19.82,4.2,4.2,0,0,0,7.8,15.6ZM6,14.4a3.6,3.6,0,1,0-3.6-3.6A3.6,3.6,0,0,0,6,14.4Zm16.2-12H7.8A1.83,1.83,0,0,0,6,4.26V6a4.68,4.68,0,0,1,2.4.67V4.8H21.6V15.6H19.2V13.2H14.4v2.4H11.54A4.79,4.79,0,0,1,13,18H22.2A1.83,1.83,0,0,0,24,16.14V4.26A1.83,1.83,0,0,0,22.2,2.4Z"></path></g>
+    <g id="hand-holding-usd"><path d="M11.29,7.35l2.27.59a.36.36,0,0,1,.27.34.37.37,0,0,1-.38.35H12a1.27,1.27,0,0,1-.47-.09.61.61,0,0,0-.64.08l-.79.73a.48.48,0,0,0-.09.11.46.46,0,0,0,.16.65h0a3.66,3.66,0,0,0,1.44.48v.73a.69.69,0,0,0,.72.67H13a.7.7,0,0,0,.72-.67V10.6A2.39,2.39,0,0,0,16,8,2.52,2.52,0,0,0,14,6l-2.26-.6a.36.36,0,0,1-.28-.34.37.37,0,0,1,.38-.35h1.49a1.23,1.23,0,0,1,.46.1.59.59,0,0,0,.64-.09L15.26,4a.28.28,0,0,0,.09-.1.48.48,0,0,0-.15-.66h0a3.37,3.37,0,0,0-1.44-.48V2A.69.69,0,0,0,13,1.33h-.72a.7.7,0,0,0-.73.67v.73A2.4,2.4,0,0,0,9.35,5.36,2.54,2.54,0,0,0,11.29,7.35ZM23.55,15a1.39,1.39,0,0,0-1.77,0l-3.85,3.08a2.68,2.68,0,0,1-1.67.59H11.33a.67.67,0,0,1,0-1.34H14.6A1.38,1.38,0,0,0,16,16.22,1.64,1.64,0,0,0,16,16a1.33,1.33,0,0,0-1.33-1.33H8a4.92,4.92,0,0,0-3.09,1.09L3,17.33H.67A.67.67,0,0,0,0,18v4a.67.67,0,0,0,.67.67H15.53a2.66,2.66,0,0,0,1.67-.59l6.3-5a1.33,1.33,0,0,0,.21-1.87,1.29,1.29,0,0,0-.16-.17Z"></path></g>
+    <g id="lightbulb"><path d="M4.78,6.4a2.62,2.62,0,0,1-.49-.19L2.39,5.12a.87.87,0,1,1,.85-1.51l2,1.17a.85.85,0,0,1,.36,1A1,1,0,0,1,4.78,6.4Z"/><path d="M2.5,8.81H3.61a.86.86,0,0,1,.9.82.83.83,0,0,1-.86.9c-.76,0-1.52,0-2.29,0A.83.83,0,0,1,.5,9.64a.85.85,0,0,1,.91-.83Z"/><path d="M21.18,15.88a3.66,3.66,0,0,1-.46-.18q-1-.54-1.92-1.11a.86.86,0,0,1-.34-1.17.83.83,0,0,1,1.14-.34c.7.38,1.39.78,2.08,1.19a.83.83,0,0,1,.35,1A.92.92,0,0,1,21.18,15.88Z"/><path d="M21.51,8.81h1.08a.84.84,0,0,1,.91.83.83.83,0,0,1-.87.89c-.76,0-1.51,0-2.27,0a.83.83,0,0,1-.87-.88.87.87,0,0,1,.91-.84Z"/><path d="M5.62,14a.82.82,0,0,1-.43.64c-.67.39-1.33.78-2,1.15a.86.86,0,0,1-.88-1.47c.67-.41,1.35-.81,2-1.18A.87.87,0,0,1,5.62,14Z"/><path d="M18.37,5.35a.8.8,0,0,1,.41-.59l2-1.14a.86.86,0,0,1,1.2.29.85.85,0,0,1-.33,1.21c-.65.38-1.3.76-2,1.13A.88.88,0,0,1,18.37,5.35Z"/><path d="M9.13,19.14a1.2,1.2,0,0,0,.19.64l.62.93a1.14,1.14,0,0,0,1,.51h2.22a1.14,1.14,0,0,0,1-.51l.62-.93a1.2,1.2,0,0,0,.19-.64V17.76H9.13Zm-3.46-10a6.29,6.29,0,0,0,1.57,4.17,10.61,10.61,0,0,1,1.88,3.29v0h5.77v0a10.23,10.23,0,0,1,1.88-3.29A6.34,6.34,0,1,0,5.67,9.12ZM12,6.24A2.88,2.88,0,0,0,9.13,9.12a.57.57,0,0,1-.58.57A.56.56,0,0,1,8,9.12a4,4,0,0,1,4-4,.57.57,0,0,1,.58.57A.58.58,0,0,1,12,6.24Z"></path></g>
+    <g id="book-open"><path d="M22.15,3.06c-2.19.12-6.54.57-9.22,2.22a.59.59,0,0,0-.29.52V20.33a.63.63,0,0,0,.93.54c2.76-1.39,6.76-1.77,8.73-1.87a1.25,1.25,0,0,0,1.2-1.23V4.28A1.25,1.25,0,0,0,22.15,3.06ZM11.07,5.28C8.39,3.63,4,3.18,1.85,3.06A1.25,1.25,0,0,0,.5,4.28V17.77A1.25,1.25,0,0,0,1.7,19c2,.1,6,.48,8.73,1.87a.63.63,0,0,0,.93-.53V5.8A.58.58,0,0,0,11.07,5.28Z"></path></g>
+    <g id="users"><path d="M3.6,10.8A2.4,2.4,0,1,0,1.2,8.4,2.41,2.41,0,0,0,3.6,10.8Zm16.8,0A2.4,2.4,0,1,0,18,8.4,2.41,2.41,0,0,0,20.4,10.8ZM21.6,12H19.2a2.39,2.39,0,0,0-1.69.7,5.47,5.47,0,0,1,2.81,4.1H22.8A1.2,1.2,0,0,0,24,15.6V14.4A2.41,2.41,0,0,0,21.6,12ZM12,12A4.2,4.2,0,1,0,7.8,7.8,4.2,4.2,0,0,0,12,12Zm2.88,1.2h-.31a5.8,5.8,0,0,1-5.14,0H9.12A4.33,4.33,0,0,0,4.8,17.52V18.6a1.81,1.81,0,0,0,1.8,1.8H17.4a1.81,1.81,0,0,0,1.8-1.8V17.52A4.33,4.33,0,0,0,14.88,13.2Zm-8.39-.5A2.39,2.39,0,0,0,4.8,12H2.4A2.41,2.41,0,0,0,0,14.4v1.2a1.2,1.2,0,0,0,1.2,1.2H3.67a5.51,5.51,0,0,1,2.82-4.1Z"></path></g>
     </defs>
   </svg>
 `;

package/utils/mutation-observer.js

@@ -42,6 +42,10 @@ const MutationObserverElement = (superClass) => class extends superClass {
     this._childListObserver.disconnect();
     super.disconnectedCallback();
   }
+
+  _onChildListMutation(){
+    console.warn("You must create a '_onChildListMutation' method in your element to use the MutationObserverElement mixin");
+  }
 };
 
 export {MutationObserverElement};

package/utils/nav-element.js

@@ -34,7 +34,7 @@ const NavElement = (superClass) => class extends superClass {
    * @returns {Object} Formatted object describing the menu item and its children
    */
   _makeNavItemTree(ele){
-    let linkText, href, subItems = [], isOpen=false, inlineStyles={};
+    let linkText, href, subItems = [], isOpen=false, inlineStyles={}, newTab=false;
     if ( ele.tagName === 'LI' && ele.children.length > 0) ele = ele.children[0];
 
     if ( ele.tagName === 'A' ) {
@@ -51,9 +51,10 @@ const NavElement = (superClass) => class extends superClass {
         if ( childItem.linkText ) subItems.push(childItem);
       }
     }
+    if (ele.getAttribute('target') == '_blank') newTab = true;
 
     if ( linkText ) linkText = linkText.trim();
-    return {linkText, href, subItems, isOpen, inlineStyles};
+    return {linkText, href, subItems, isOpen, inlineStyles, newTab};
   }
 
   /**