@ucd-lib/theme-elements 0.0.1 → 0.0.5

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

@@ -0,0 +1,196 @@
+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, NavElement} from "../../utils/mixins";
+import { MutationObserverController, WaitController } from '../../utils/controllers';
+
+/**
+ * @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) {
+  
+  mutationObserver = new MutationObserverController(this, {subtree: true, childList: true});
+  wait = new WaitController(this);
+
+  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.wait.waitForUpdate();
+    const expandedHeight = navUL.scrollHeight + "px";   
+    
+    // Set expanded height
+    navItem.inlineStyles.height = expandedHeight;
+    await this.wait.waitForUpdate();
+
+    // Complete animation
+    await this.wait.wait(this.animationDuration);
+    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.wait.waitForUpdate();
+
+    // Set height to zero
+    await this.wait.waitForFrames(2);
+    navItem.inlineStyles.height = "0px";
+    await this.wait.waitForUpdate();
+
+    // Complete animation
+    await this.wait.wait(this.animationDuration);
+    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 MutationObserverController.
+   *  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,7 +1,7 @@
 {
   "name": "@ucd-lib/theme-elements",
-  "version": "0.0.1",
-  "description": "Custom elements for the UCD theme",
+  "version": "0.0.5",
+  "description": "Custom elements for the UCD brand theme",
   "main": "index.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"
@@ -9,7 +9,9 @@
   "author": "jrmerz@ucdavis.edu",
   "license": "MIT",
   "dependencies": {
-    "@ucd-lib/theme-sass": "^5.0.3",
-    "photoswipe": "^4.1.3"
+    "@ucd-lib/theme-sass": "^5.0.11",
+    "lit": "^2.0.2",
+    "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,101 @@
+import { LitElement, svg } from 'lit';
+import {render, styles} from "./ucdlib-branding-bar.tpl.js";
+
+import {Mixin, NavElement} from "../../utils/mixins";
+import { MutationObserverController } from '../../utils/controllers';
+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) {
+
+  mutationObserver = new MutationObserverController(
+    this,
+    {childList: true, characterData: true, attributes: true}
+  );
+
+  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. Called by MutationObserverController.
+   *  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-icon/ucdlib-icon.js

@@ -0,0 +1,138 @@
+import { LitElement } from 'lit';
+import {render, styles} from "./ucdlib-icon.tpl.js";
+
+/**
+ * @class UcdlibIcon
+ * @classdesc Component class for displaying an icon
+ * @property {String} icon - name of icon within a registered icon set.
+ *  Format: ${iconset name}:${icon name}
+ *  Or just the icon name if using the default ucdlib iconset.
+ * @property {String} src -  If using ucdlib-icon without an iconset, you can set the src to be
+ *  the URL of an individual icon image file. Note that this will take
+ *  precedence over a given icon attribute.
+ */
+export default class UcdlibIcon extends LitElement {
+
+  static get properties() {
+    return {
+      icon: {type: String},
+      src: {type: String},
+      _iconName: {type: String, state: true},
+      _iconsetName: {type: String, state: true}
+    };
+  }
+
+  static get styles() {
+    return styles();
+  }
+
+  constructor() {
+    super();
+    this.render = render.bind(this);
+    this.icon = "";
+    this.src = "";
+
+    this._iconName = "";
+    this._iconsetName = "";
+    this._default_iconset = "ucdlib";
+    this._onAddedIconset = this._onAddedIconset.bind(this);
+  }
+
+  /**
+   * @method disconnectedCallback
+   * @description native web component life cycle method
+   * @private
+   */
+  disconnectedCallback() {
+    window.removeEventListener('ucdlib-iconset-added', this._onAddedIconset);
+    super.disconnectedCallback();
+  }
+
+  /**
+   * @method updated
+   * @description Lit lifecyle method called after element updates
+   * @param {Map} props - Updated properties
+   * @private
+   */
+  updated(props){
+    if ( props.has('icon') || props.has('src') ){
+      if ( this.src ) {
+        this._updateIcon();
+      } else if ( this.icon ) {
+        let parts = this.icon.split(":");
+        this._iconName = parts.pop();
+        this._iconsetName = parts.pop() || this._default_iconset;
+        this._updateIcon();
+      }
+    }
+  }
+
+  /**
+   * @method _onAddedIconset
+   * @description Attached to custom event fired by a ucdlib-iconset element
+   * @private
+   */
+  _onAddedIconset(){
+    this._updateIcon();
+  }
+
+  /**
+   * @method _updateIcon
+   * @description Prepends a new svg or img icon to the shadowroot. 
+   *  Called on icon or src property change.
+   * @private
+   */
+  _updateIcon(){
+    // using the icon attribute
+    if ( this._usesIconSet() ) {
+      if ( this._img && this._img.parentNode ) this.renderRoot.removeChild(this._img);
+
+      if ( this._iconName === '') {
+        if ( this._iconset ) this._iconset.removeIcon(this);
+      } else if ( this._iconsetName ){
+        this._iconset = this._getIconset();
+        if ( this._iconset ) {
+          this._iconset.applyIcon(this, this._iconName);
+          window.addEventListener('ucdlib-iconset-added', this._onAddedIconset);
+        } else {
+          window.removeEventListener('ucdlib-iconset-added', this._onAddedIconset);
+        }
+      }
+
+    // using the src attribute
+    } else {
+      if ( this._iconset ) this._iconset.removeIcon(this);
+      if ( !this._img ) {
+        this._img = document.createElement('img');
+        this._img.style.width = '100%';
+        this._img.style.height = '100%';
+        this._img.draggable = false;
+      }
+      this._img.src = this.src;
+      this.renderRoot.appendChild(this._img);
+    }
+
+  }
+
+  /**
+   * @method _usesIconSet
+   * @description Element is using an icon set as opposed to an img src
+   * @returns {Boolean}
+   * @private
+   */
+  _usesIconSet(){
+    return this.icon || !this.src;
+  }
+
+  /**
+   * @method _getIconset
+   * @description Return the specified ucdlib-iconset element from the head
+   * @returns {Element}
+   * @private
+   */
+  _getIconset(){
+    return document.head.querySelector(`ucdlib-iconset[name=${this._iconsetName}]`);
+  }
+}
+
+customElements.define('ucdlib-icon', UcdlibIcon);