@ucd-lib/theme-elements 0.0.4 → 0.0.8

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

@@ -1,7 +1,10 @@
 import { LitElement } from 'lit';
 import {render, styles} from "./ucd-theme-header.tpl.js";
 
-import { Mixin, MutationObserverElement, BreakPoints, Wait } from "../../utils/index.js";
+import { 
+  IntersectionObserverController,
+  MutationObserverController, 
+  WaitController } from '../../utils/controllers';
 
 /**
  * @class UcdThemeHeader
@@ -15,6 +18,7 @@ import { Mixin, MutationObserverElement, BreakPoints, Wait } from "../../utils/i
  * @property {String} figureSrc - Site logo/icon to display next to site name
  * @property {String} siteUrl - Url to use for links around site name and figure
  * @property {Boolean} opened - Whether header is open in the mobile view
+ * @property {Boolean} preventFixed - Navbar will not be fixed to top of screen in desktop view
  * 
  * @example
  *  <ucd-theme-header site-name="A UC Davis Website">
@@ -35,8 +39,7 @@ import { Mixin, MutationObserverElement, BreakPoints, Wait } from "../../utils/i
  *  </ucd-theme-header>
  * 
  */
-export default class UcdThemeHeader extends Mixin(LitElement)
-  .with(MutationObserverElement, BreakPoints, Wait) {
+export default class UcdThemeHeader extends LitElement {
 
   static get properties() {
     return {
@@ -45,11 +48,13 @@ export default class UcdThemeHeader extends Mixin(LitElement)
       figureSrc: {type: String, attribute: "figure-src"},
       siteUrl: {type: String, attribute: "site-url"},
       opened: {type: Boolean},
+      preventFixed: {type: Boolean, attribute: "prevent-fixed"},
       isDemo: {type: Boolean, attribute: "is-demo"},
       _transitioning: {type: Boolean, state: true},
       _hasSlottedBranding: {type: Boolean, state: true},
       _hasQuickLinks: {type: Boolean, state: true},
-      _hasSearch: {type: Boolean, state: true}
+      _hasSearch: {type: Boolean, state: true},
+      _brandingBarInView: {type: Boolean, state: true}
     };
   }
 
@@ -61,6 +66,9 @@ export default class UcdThemeHeader extends Mixin(LitElement)
     super();
     this.render = render.bind(this);
 
+    this.mutationObserver = new MutationObserverController(this);
+    this.wait = new WaitController(this);
+
     this.siteName = "";
     this.siteUrl = "/";
     this.slogan = "";
@@ -73,7 +81,38 @@ export default class UcdThemeHeader extends Mixin(LitElement)
     this._hasQuickLinks = false;
     this._hasSearch = false;
     this._animationDuration = 500;
+    this._brandingBarInView = false;
+
+  }
+
+  connectedCallback(){
+    super.connectedCallback();
+    if ( !this.preventFixed ) {
+      this.intersectionObserver = new IntersectionObserverController(this, {}, "_onBrandingBarIntersection", false);
+    }
+  }
 
+  firstUpdated(){
+    if ( !this.preventFixed ) {
+      let aboveNav = this.renderRoot.getElementById('branding-bar-container');
+      this.intersectionObserver.observer.observe(aboveNav);
+    }
+  }
+
+  _onBrandingBarIntersection(entries){
+    let offSetValue = 0;
+    try {
+      offSetValue = this.renderRoot.getElementById('nav-bar').getBoundingClientRect().height;
+    } catch (error) {}
+    if ( offSetValue > 150 ) offSetValue = 0;
+    entries.forEach(entry => {
+      this._brandingBarInView = entry.isIntersecting;
+      if (this._brandingBarInView) {
+        this.style.marginBottom = '0px';
+      } else {
+        this.style.marginBottom = offSetValue + "px";
+      }
+    })
   }
 
   /**
@@ -86,7 +125,7 @@ export default class UcdThemeHeader extends Mixin(LitElement)
 
     this.opened = true;
     this._transitioning = true;
-    await this.waitForAnimation();
+    await this.wait.wait(this._animationDuration);
     this._transitioning = false;
     return true;
 
@@ -102,7 +141,7 @@ export default class UcdThemeHeader extends Mixin(LitElement)
 
     this.opened = false;
     this._transitioning = true;
-    await this.waitForAnimation();
+    await this.wait.wait(this._animationDuration);
     this._transitioning = false;
     return true;
 
@@ -149,6 +188,24 @@ export default class UcdThemeHeader extends Mixin(LitElement)
     return classes;
   }
 
+  /**
+   * @method _getHeaderClasses
+   * @description Get classes to be assigned to the header element
+   * @private
+   * @returns {Object}
+   */
+  _getHeaderClasses(){
+    let classes = {
+      "l-header": true,
+      "header": true
+    };
+
+    classes['fixed-mobile'] = !this.preventFixed;
+    classes['fixed-desktop'] = !this.preventFixed && !this._brandingBarInView;
+    
+    return classes;
+  }
+
   /**
    * @method _ucdLogo
    * @description Returns URI-encoded svg string of UC Davis logo

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

@@ -23,6 +23,36 @@ export function styles() {
     ::slotted(ucdlib-branding-bar){
       width: 100%;
     }
+
+    @media (max-width: 991px) {
+      .fixed-mobile .mobile-bar {
+        position: fixed;
+        width: 100%;
+        z-index: 1000;
+        top: 0;
+      }
+      .fixed-mobile .off-canvas {
+        position: fixed;
+        overflow: auto;
+        z-index: 1000;
+        top: 55px;
+      }
+      .fixed-mobile .l-header__branding {
+        margin-top: 55px;
+      }
+    }
+
+    @media (min-width: 992px) {
+      .fixed-desktop .l-navbar {
+        position: fixed;
+        z-index: 1000;
+        top: 0;
+        right: 0;
+        left: 0;
+        width: 100%;
+      }
+    }
+
   `;
 
   return [
@@ -44,7 +74,7 @@ ${this.isDemo ? html`
     .l-navbar { top: auto !important}
   </style>
 ` : html``}
-<header class="l-header header">
+<header class=${classMap(this._getHeaderClasses())}>
   <div class="mobile-bar">
     <div class="mobile-bar__nav-toggle">
       <button 
@@ -64,32 +94,34 @@ ${this.isDemo ? html`
     </div>
   </div>
 
-  <div class="header__bar">
-      <div class="header__university">
-        <a href="https://www.ucdavis.edu/">
-          <img class="ucd-logo" src='data:image/svg+xml;utf8,${this._ucdLogo()}'>
-        </a>
-      </div>
-  </div>
-  <div class="l-header__branding">
-    ${this._hasSlottedBranding ? html`
-      <slot name="branding-bar"></slot>
-    ` : html`
-      <div class="site-branding">
-        <div class="site-branding__figure" ?hidden=${!this.figureSrc}>
-          <a href="${this.siteUrl}" class=""><img src=${this.figureSrc} class="site-logo" alt="Site Logo" /></a>
+  <div id="branding-bar-container">
+    <div class="header__bar">
+        <div class="header__university">
+          <a href="https://www.ucdavis.edu/">
+            <img class="ucd-logo" src='data:image/svg+xml;utf8,${this._ucdLogo()}'>
+          </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 class="l-header__branding">
+      ${this._hasSlottedBranding ? html`
+        <slot name="branding-bar"></slot>
+      ` : html`
+        <div class="site-branding">
+          <div class="site-branding__figure" ?hidden=${!this.figureSrc}>
+            <a href="${this.siteUrl}" class=""><img src=${this.figureSrc} class="site-logo" alt="Site Logo" /></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>
-      </div>
-    `}
+      `}
+    </div>
   </div>
 
-  <div class="${classMap(this._getNavbarClasses())}">
+  <div class="${classMap(this._getNavbarClasses())}" id="nav-bar">
     <div class="l-container--navigation off-canvas off-canvas--left">
       <div class="off-canvas__container l-nav-horizontal">
         ${this._hasSearch ? html`

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

@@ -1,7 +1,8 @@
 import { LitElement, html } from 'lit';
 //import { Page } from 'puppeteer';
 import {render, styles} from "./ucd-theme-pagination.tpl.js";
-import { Mixin, BreakPoints } from "../../utils/index.js";
+
+import { BreakPointsController } from '../../utils/controllers';
 
 /**
  * @class UcdThemePagination
@@ -11,6 +12,7 @@ import { Mixin, BreakPoints } from "../../utils/index.js";
  *  - http://dev.webstyleguide.ucdavis.edu/redesign/?p=molecules-pagination
  * 
  * @property {String} base-path - for anchor tag href
+ * @property {String} queryParams - Append query parameters if constructing an anchor tag
  * @property {String} current-page - Page to show and highlight
  * @property {String} max-pages - Max number of total pages
  * @property {String} visible-link-count - How many page links to show
@@ -33,8 +35,7 @@ import { Mixin, BreakPoints } from "../../utils/index.js";
  * </ucd-theme-pagination>
  * 
  */
-export default class UcdThemePagination extends Mixin(LitElement)
-  .with(BreakPoints) {
+export default class UcdThemePagination extends LitElement {
 
   static get properties() {
     return {
@@ -42,6 +43,10 @@ export default class UcdThemePagination extends Mixin(LitElement)
         type: String, 
         attribute: 'base-path'
       },
+      queryParams: {
+        type: String,
+        attribute: 'query-params'
+      },
       useHash : {
         type: Boolean, 
         attribute: 'use-hash'
@@ -89,11 +94,14 @@ export default class UcdThemePagination extends Mixin(LitElement)
   constructor() {
     super();
 
+    this.breakPoints = new BreakPointsController(this);
+
     this._pages = [];
     this.useHash = false;
     this.disableLabel = false;
     this.type = 'virtual';
     this.basePath = '';
+    this.queryParams = '';
     this.visibleLinkCount = 7;
     this.currentPage = 1;
     this.maxPages = 1;
@@ -101,8 +109,7 @@ export default class UcdThemePagination extends Mixin(LitElement)
     this.xs_screen = false;
     this.size = '';
 
-    this.screen_check = (window.innerWidth <= this._mobileBreakPoint)  ? true : false;
-    console.log(this.screen_check);
+    this.screen_check = (window.innerWidth <= this.breakPoints.mobileBreakPoint)  ? true : false;
 
     this.render = render.bind(this);
   }
@@ -190,7 +197,7 @@ export default class UcdThemePagination extends Mixin(LitElement)
         </li>`;            
     }
 
-    let href = (this.useHash ? '#' : '') + (this.basePath || '/') + page;
+    let href = (this.useHash ? '#' : '') + (this.basePath || '/') + page + (this.queryParams ? '?' + this.queryParams : '');
     return html`<li class="pager__item ${args.class || ''}">
         ${((this.currentPage == 1 && args.label == "Prev") || (this.currentPage == this.maxPages && args.label == "Next") ) ? 
           html` <a style="pointer-events: none; cursor: default; color:#999999; background:white;" href="${href}">${args.label || page}</a>`: 

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

@@ -4,7 +4,8 @@ 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, NavElement } from "../../utils/index.js";
+import { Mixin, NavElement } from "../../utils/mixins";
+import { MutationObserverController, BreakPointsController } from '../../utils/controllers';
 
 /**
  * @class UcdThemePrimaryNav
@@ -33,7 +34,7 @@ import { Mixin, MutationObserverElement, BreakPoints, NavElement } from "../../u
  *  </ucd-theme-primary-nav>
  */
 export default class UcdThemePrimaryNav extends Mixin(LitElement)
-  .with(NavElement, MutationObserverElement, BreakPoints) {
+  .with(NavElement) {
 
   static get properties() {
     return {
@@ -54,6 +55,9 @@ export default class UcdThemePrimaryNav extends Mixin(LitElement)
   constructor() {
     super();
     this.render = render.bind(this);
+    this.mutationObserver = new MutationObserverController(this, {subtree: true, childList: true});
+    this.breakPoints = new BreakPointsController(this);
+
     this.navType = "superfish";
     this.styleModifiers = "";
     this.hoverDelay = 300;
@@ -97,7 +101,7 @@ export default class UcdThemePrimaryNav extends Mixin(LitElement)
     if ( !navItem ) return;
 
     // Open on mobile
-    if ( this.isMobile() ) {
+    if ( this.breakPoints.isMobile() ) {
       let nav = this.renderRoot.getElementById(`nav--${navLocation.join("-")}`);
       if ( !nav ) return;
       let ul = nav.querySelector('ul');
@@ -160,7 +164,7 @@ export default class UcdThemePrimaryNav extends Mixin(LitElement)
     if ( !navItem ) return;
 
     // close on mobile
-    if ( this.isMobile() ) {
+    if ( this.breakPoints.isMobile() ) {
       let nav = this.renderRoot.getElementById(`nav--${navLocation.join("-")}`);
       if ( !nav ) return;
       let ul = nav.querySelector('ul');
@@ -263,7 +267,7 @@ export default class UcdThemePrimaryNav extends Mixin(LitElement)
   /**
    * @method _onChildListMutation
    * @private
-   * @description Fires when light dom child list changes. Injected by MutationObserverElement mixin.
+   * @description Fires when light dom child list changes. Injected by MutationObserverController.
    *  Sets the 'navItems' property.
    */
   _onChildListMutation(){
@@ -345,7 +349,7 @@ export default class UcdThemePrimaryNav extends Mixin(LitElement)
       this.isMegaMenu() && 
       depth > 0 && 
       !this._megaIsOpen &&
-      this.isDesktop()
+      this.breakPoints.isDesktop()
     ) i = -1;
 
     return i;
@@ -375,7 +379,7 @@ export default class UcdThemePrimaryNav extends Mixin(LitElement)
    * @param {Array} navLocation - Array coordinates of corresponding nav item
    */
   async _toggleMobileMenu(navLocation){
-    if ( this.isDesktop() ) return;
+    if ( this.breakPoints.isDesktop() ) return;
     let navItem = this.getNavItem(navLocation);
     if ( navItem.isOpen ) {
       this.closeSubNav(navLocation);
@@ -391,7 +395,7 @@ export default class UcdThemePrimaryNav extends Mixin(LitElement)
    */
   _onNavMouseenter(){
     if ( 
-      this.isMobile() || 
+      this.breakPoints.isMobile() || 
       !this.isMegaMenu() ) 
       return;
 
@@ -408,7 +412,7 @@ export default class UcdThemePrimaryNav extends Mixin(LitElement)
    */
   _onNavMouseleave(){
     if ( 
-      this.isMobile() || 
+      this.breakPoints.isMobile() || 
       !this.isMegaMenu() ) 
       return;
 
@@ -426,7 +430,7 @@ export default class UcdThemePrimaryNav extends Mixin(LitElement)
    */
   _onNavFocusin(){
     if ( 
-      this.isMobile() || 
+      this.breakPoints.isMobile() || 
       !this.isMegaMenu() ) 
       return;
     
@@ -447,7 +451,7 @@ export default class UcdThemePrimaryNav extends Mixin(LitElement)
    * @param {Event} e 
    */
   _onItemMouseenter(e){
-    if ( this.isMobile() ) return;
+    if ( this.breakPoints.isMobile() ) return;
     this.openSubNav(e.target.key);
   }
 
@@ -458,7 +462,7 @@ export default class UcdThemePrimaryNav extends Mixin(LitElement)
    * @param {Event} e 
    */
   _onItemFocus(e){
-    if ( this.isMobile() ) return;
+    if ( this.breakPoints.isMobile() ) return;
     const LI = e.target.parentElement.parentElement;
 
     if (LI.hasnav) {
@@ -511,7 +515,7 @@ export default class UcdThemePrimaryNav extends Mixin(LitElement)
    * @param {Event} e 
    */
   _onItemMouseleave(e){
-    if ( this.isMobile() || this.isMegaMenu() ) return;
+    if ( this.breakPoints.isMobile() || this.isMegaMenu() ) return;
     this.closeSubNav(e.target.key);
   }
 
@@ -521,7 +525,7 @@ export default class UcdThemePrimaryNav extends Mixin(LitElement)
    * @description Attached to the top-level nav element. Closes subnav if it doesn't contain focused link.
    */
   _onNavFocusout(){
-    if ( this.isMobile() ) return;
+    if ( this.breakPoints.isMobile() ) return;
     if ( this.isMegaMenu() ) {
       if ( this._megaTimeout ) clearTimeout(this._megaTimeout);
       requestAnimationFrame(() => {
@@ -574,7 +578,7 @@ export default class UcdThemePrimaryNav extends Mixin(LitElement)
    * @returns {Object} - Style map
    */
   _getItemMobileStyles(location) {
-    if ( this.isDesktop() ) return {};
+    if ( this.breakPoints.isDesktop() ) return {};
     let navItem = this.getNavItem(location);
     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, MutationObserverElement, BreakPoints, Wait } from "../../utils/index.js";
+import { MutationObserverController, WaitController } from '../../utils/controllers';
 
 /**
  * @class UcdThemeQuickLinks
@@ -17,8 +17,7 @@ import { Mixin, MutationObserverElement, BreakPoints, Wait } from "../../utils/i
  * @property {Boolean} opened - Menu is open
  * @property {Number} animationDuration - Length of animation when opening/closing menu
  */
-export default class UcdThemeQuickLinks extends Mixin(LitElement)
-  .with(MutationObserverElement, BreakPoints, Wait) {
+export default class UcdThemeQuickLinks extends LitElement {
 
   static get properties() {
     return {
@@ -40,6 +39,8 @@ export default class UcdThemeQuickLinks extends Mixin(LitElement)
   constructor() {
     super();
     this.render = render.bind(this);
+    this.mutationObserver = new MutationObserverController(this);
+    this.wait = new WaitController(this);
 
     this.title = "Quick Links";
     this.styleModifiers = "";
@@ -67,7 +68,7 @@ export default class UcdThemeQuickLinks extends Mixin(LitElement)
     this._openedHeight = this.renderRoot.getElementById('menu').scrollHeight + "px";
     await this.updateComplete;
 
-    await this.waitForAnimation();
+    await this.wait.wait(this.animationDuration);
     this._transitioning = false;
     this.opened = true;
     return true;
@@ -84,11 +85,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.wait.waitForFrames(2);
     this._openedHeight = 0;
     await this.updateComplete;
 
-    await this.waitForAnimation();
+    await this.wait.wait(this.animationDuration);
 
     this._transitioning = false;
     this.opened = false;
@@ -229,7 +230,7 @@ export default class UcdThemeQuickLinks extends Mixin(LitElement)
    * @method _onChildListMutation
    * @param {Array} mutationsList - List of mutation records
    * @private
-   * @description Fires when light dom child list changes. Injected by MutationObserverElement mixin.
+   * @description Fires when light dom child list changes. Injected by MutationObserverController.
    *  Sets the '_links' property.
    */
   _onChildListMutation(mutationsList){

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

@@ -84,7 +84,7 @@ return html`
       aria-controls="quick-links" 
       aria-expanded="${this.opened}" 
       aria-label="Toggle ${this.title} Menu">
-      ${this.title}<span class="submenu-toggle"><span class="submenu-toggle__icon">+</span></span>
+      ${this.title}<span class="submenu-toggle ${this.opened ? 'submenu-toggle--open' : ''}"><span class="submenu-toggle__icon">+</span></span>
     </button>
     <nav 
       id="quick-links" 

package/brand/ucd-theme-search-form/ucd-theme-search-form.js

@@ -11,6 +11,8 @@ import {render, styles } from "./ucd-theme-search-form.tpl.js";
  * @property {String} value - The search string
  * @property {String} placeholder - The input placeholder
  * @property {String} formAction - The action to be taken on form submit (optional)
+ * @property {String} formMethod - The http method used on submit (default=POST)
+ * @property {String} queryParam - The URL query parameter to use (default=searchterm)
  * 
  * @example
  *  <ucd-theme-form-search form-action="/url/to/post/to"></ucd-theme-form-search>
@@ -23,9 +25,11 @@ export default class UcdThemeSearchForm extends LitElement {
       value: {type: String},
       placeholder: {type: String, attribute: "placeholder"},
       formAction: {type: String, attribute: "form-action"},
+      formMethod: {type: String, attribute: "form-method"},
       formClass: {type: String, attribute: "form-class"},
       labelText: {type: String, attribute: "label-text"},
-      inputClass: {type: String, attribute: "input-class"}
+      inputClass: {type: String, attribute: "input-class"},
+      queryParam: {type: String, attribute: "query-param"}
     };
   }
 
@@ -37,11 +41,13 @@ export default class UcdThemeSearchForm extends LitElement {
     super();
     this.render = render.bind(this);
     this.formAction = "";
+    this.formMethod = "POST";
     this.formClass = "";
     this.labelText = "Search";
     this.placeholder = "Search...";
     this.inputClass = "";
     this.value = "";
+    this.queryParam = "searchterm";
   }
 
   /**

package/brand/ucd-theme-search-form/ucd-theme-search-form.tpl.js

@@ -14,6 +14,10 @@ export function styles() {
     [hidden] {
       display: none !important;
     }
+    .search-form__submit {
+      line-height: 1.9;
+      text-indent: .2em;
+    }
   `;
   return [
     normalizeCss,
@@ -29,7 +33,7 @@ return html`
 <form 
   @submit="${this._onSubmit}"
   action="${this.formAction}" 
-  method="POST" 
+  method=${this.formMethod} 
   class="search-form ${this.formClass}">
 
   <label for="search" class="u-hidden--visually">${this.labelText}</label>
@@ -38,10 +42,11 @@ return html`
     placeholder="${this.placeholder}" 
     id="search" 
     class="search-form__input ${this.inputClass}" 
-    name="searchterm" 
+    name=${this.queryParam} 
     @input="${this._onInput}"
     value="${this.value}">
-  <input type="submit" class="search-form__submit" name="search" alt="Search" value="&#xf002; Submit">
+  <button type="submit" class="search-form__submit">&#xf002; Submit
+  </button>
 
 </form>
 `;}

package/brand/ucd-theme-search-popup/ucd-theme-search-popup.js

@@ -1,7 +1,7 @@
 import { LitElement } from 'lit';
 import {render, styles} from "./ucd-theme-search-popup.tpl.js";
 
-import { Mixin, MutationObserverElement } from "../../utils/index.js";
+import { MutationObserverController } from '../../utils/controllers';
 
 /**
  * @class UcdThemeSearchPopup
@@ -24,8 +24,7 @@ import { Mixin, MutationObserverElement } from "../../utils/index.js";
  *   <input placeholder="A custom search element">
  * </ucd-theme-search-popup>
  */
-export default class UcdThemeSearchPopup extends Mixin(LitElement)
-  .with(MutationObserverElement) {
+export default class UcdThemeSearchPopup extends LitElement {
 
   static get properties() {
     return {
@@ -42,6 +41,7 @@ export default class UcdThemeSearchPopup extends Mixin(LitElement)
   constructor() {
     super();
     this.render = render.bind(this);
+    this.mutationObserver = new MutationObserverController(this);
     this.buttonText = "Toggle Search";
     this.opened = false;
     this._defaultForm = false;

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

@@ -3,7 +3,7 @@ import {render, styles} from "./ucd-theme-slim-select.tpl.js";
 
 import SlimSelect from 'slim-select';
 
-import { Mixin, MutationObserverElement } from "../../utils/index.js";
+import { MutationObserverController } from '../../utils/controllers';
 
 /**
  * @class UcdThemeSlimSelect
@@ -12,8 +12,7 @@ import { Mixin, MutationObserverElement } from "../../utils/index.js";
  * Patternlab URL:
  *  - http://dev.webstyleguide.ucdavis.edu/redesign/?p=atoms-select-menu
  */
-export default class UcdThemeSlimSelect extends Mixin(LitElement)
-  .with(MutationObserverElement) {
+export default class UcdThemeSlimSelect extends LitElement {
 
   static get properties() {
     return {
@@ -28,28 +27,27 @@ export default class UcdThemeSlimSelect extends Mixin(LitElement)
   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});
+    this.mutationObserver = new MutationObserverController(
+      this, 
+      {subtree: true, childList: true, attributes: true, characterData: true},
+      "_onLightDomMutation"
+    );
   }
 
   /**
-   * @method _onChildListMutation
+   * @method _onLightDomMutation
    * @private
-   * @description Fires when light dom child list changes. Injected by MutationObserverElement mixin.
+   * @description Fires when light dom child list changes. Called by MutationObserverController.
    */
-  _onChildListMutation(){
+  _onLightDomMutation(){
     const children = Array.from(this.children);
     if (children.length == 0 || children[0].tagName != "SELECT") return;
     const select = children[0].cloneNode(true);
-    this.renderRoot.innerHTML= "";
+    if ( this.slimSelect ){
+      this.slimSelect.destroy();
+      this.renderRoot.querySelector('.ss-main').remove();
+      this.renderRoot.querySelector('select').remove();
+    }
     this.renderRoot.appendChild(select);
 
     this.slimSelect = new SlimSelect({