@ucd-lib/theme-elements 0.0.7 → 0.0.10

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

@@ -0,0 +1,28 @@
+import { LitElement } from 'lit';
+import {render, styles} from "./ucd-theme-breadcrumbs.tpl";
+
+import {Mixin, MainDomElement} from '../../elements/utils/mixins';
+import {BrandedPageElement } from "../utils/index.js";
+
+
+export default class PageBrandBreadcrumbs extends Mixin(LitElement)
+  .with(MainDomElement, BrandedPageElement ) {
+
+  static get properties() {
+    return {
+      
+    };
+  }
+
+  static get styles() {
+    return styles();
+  }
+
+  constructor() {
+    super();
+    this.render = render.bind(this);
+  }
+
+}
+
+customElements.define('page-brand-breadcrumbs', PageBrandBreadcrumbs);

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

@@ -0,0 +1,24 @@
+import { html, css } from 'lit';
+
+import formStyles from "@ucd-lib/theme-sass/1_base_html/_forms.css.js";
+import breadcrumbsStyles from "@ucd-lib/theme-sass/";
+
+
+export function styles() {
+  const elementStyles = css`
+    :host {
+      display: block;
+    }
+  `;
+
+  return [
+    formStyles,
+    focalLinkStyles,
+    vertLinkStyles,
+    elementStyles];
+}
+
+export function render() { 
+return html`
+
+`;}

package/brand/ucd-theme-focal-link/ucd-theme-focal-link.js

@@ -0,0 +1,28 @@
+import { LitElement } from 'lit';
+import {render, styles} from "./ucd-theme-focal-link.tpl";
+
+import {Mixin, MainDomElement} from '../../elements/utils/mixins';
+import {BrandedPageElement } from "../utils/index.js";
+
+
+export default class PageBrandFocalLink extends Mixin(LitElement)
+  .with(MainDomElement, BrandedPageElement ) {
+
+  static get properties() {
+    return {
+      
+    };
+  }
+
+  static get styles() {
+    return styles();
+  }
+
+  constructor() {
+    super();
+    this.render = render.bind(this);
+  }
+
+}
+
+customElements.define('page-brand-focal-link', PageBrandFocalLink);

package/brand/ucd-theme-focal-link/ucd-theme-focal-link.tpl.js

@@ -0,0 +1,25 @@
+import { html, css } from 'lit';
+
+import formStyles from "@ucd-lib/theme-sass/1_base_html/_forms.css.js";
+import focalLinkStyles from "@ucd-lib/theme-sass/4_component/_focal-link.css.js";
+import vertLinkStyles from "@ucd-lib/theme-sass/4_component/_vertical-link.css.js";
+
+
+export function styles() {
+  const elementStyles = css`
+    :host {
+      display: block;
+    }
+  `;
+
+  return [
+    formStyles,
+    focalLinkStyles,
+    vertLinkStyles,
+    elementStyles];
+}
+
+export function render() { 
+return html`
+
+`;}

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

@@ -4,6 +4,7 @@ import {render, styles} from "./ucd-theme-header.tpl.js";
 import { 
   IntersectionObserverController,
   MutationObserverController, 
+  PopStateObserverController,
   WaitController } from '../../utils/controllers';
 
 /**
@@ -51,10 +52,12 @@ export default class UcdThemeHeader extends LitElement {
       preventFixed: {type: Boolean, attribute: "prevent-fixed"},
       isDemo: {type: Boolean, attribute: "is-demo"},
       _transitioning: {type: Boolean, state: true},
+      _hasPrimaryNav: {type: Boolean, state: true},
       _hasSlottedBranding: {type: Boolean, state: true},
       _hasQuickLinks: {type: Boolean, state: true},
       _hasSearch: {type: Boolean, state: true},
-      _brandingBarInView: {type: Boolean, state: true}
+      _brandingBarInView: {type: Boolean, state: true},
+      _components: {type: Object, state: true}
     };
   }
 
@@ -68,6 +71,7 @@ export default class UcdThemeHeader extends LitElement {
 
     this.mutationObserver = new MutationObserverController(this);
     this.wait = new WaitController(this);
+    new PopStateObserverController(this, "_onLocationChange");
 
     this.siteName = "";
     this.siteUrl = "/";
@@ -77,14 +81,21 @@ export default class UcdThemeHeader extends LitElement {
     this.isDemo = false;
 
     this._transitioning = false;
+    this._hasPrimaryNav = false;
     this._hasSlottedBranding = false;
     this._hasQuickLinks = false;
     this._hasSearch = false;
     this._animationDuration = 500;
     this._brandingBarInView = false;
+    this._slottedComponents = {};
 
   }
 
+  /**
+   * @method connectedCallback
+   * @private
+   * @description Custom element lifecycle method
+   */
   connectedCallback(){
     super.connectedCallback();
     if ( !this.preventFixed ) {
@@ -92,6 +103,11 @@ export default class UcdThemeHeader extends LitElement {
     }
   }
 
+  /**
+   * @method firstUpdated
+   * @private
+   * @description Lit lifecycle hook
+   */
   firstUpdated(){
     if ( !this.preventFixed ) {
       let aboveNav = this.renderRoot.getElementById('branding-bar-container');
@@ -99,11 +115,33 @@ export default class UcdThemeHeader extends LitElement {
     }
   }
 
+  /**
+   * @method _onLocationChange
+   * @description Called when url changes by popstate controller
+   */
+  _onLocationChange(){
+    this.close();
+    if ( this._hasQuickLinks ){
+      this._slottedComponents.quickLinks.close();
+    }
+    if ( this._hasSearch ){
+      this._slottedComponents.search.close();
+    }
+  }
+
+  /**
+   * @method _onBrandingBarIntersection
+   * @private
+   * @description Called by intersection observer when branding bar enters/exits screen
+   * @param {*} entries 
+   */
   _onBrandingBarIntersection(entries){
     let offSetValue = 0;
     try {
       offSetValue = this.renderRoot.getElementById('nav-bar').getBoundingClientRect().height;
-    } catch (error) {}
+    } catch (error) {
+      //
+    }
     if ( offSetValue > 150 ) offSetValue = 0;
     entries.forEach(entry => {
       this._brandingBarInView = entry.isIntersecting;
@@ -112,7 +150,7 @@ export default class UcdThemeHeader extends LitElement {
       } else {
         this.style.marginBottom = offSetValue + "px";
       }
-    })
+    });
   }
 
   /**
@@ -232,14 +270,18 @@ export default class UcdThemeHeader extends LitElement {
     let primaryNav = this.querySelector('ucd-theme-primary-nav');
     if ( primaryNav ) {
       primaryNav.setAttribute('slot', 'primary-nav');
+      this._hasPrimaryNav = true;
+      this._slottedComponents.primaryNav = primaryNav;
     } else {
       console.warn("No 'ucd-theme-primary-nav' child element found!");
+      this._hasPrimaryNav = false;
     }
 
     let quickLinks = this.querySelector('ucd-theme-quick-links');
     if ( quickLinks ) {
       quickLinks.setAttribute('slot', 'quick-links');
       this._hasQuickLinks = true;
+      this._slottedComponents.quickLinks = quickLinks;
     } else {
       this._hasQuickLinks = false;
     }
@@ -248,6 +290,7 @@ export default class UcdThemeHeader extends LitElement {
     if ( search ) {
       search.setAttribute('slot', 'search');
       this._hasSearch = true;
+      this._slottedComponents.search = search;
     } else {
       this._hasSearch = false;
     }
@@ -256,6 +299,7 @@ export default class UcdThemeHeader extends LitElement {
     if ( UcdlibBrandingBar ) {
       UcdlibBrandingBar.setAttribute('slot', 'branding-bar');
       this._hasSlottedBranding = true;
+      this._slottedComponents.brandingBar = UcdlibBrandingBar;
     } else if ( this.querySelector("*[slot='branding-bar']") ){
       this._hasSlottedBranding = true;
     } else {

package/brand/ucd-theme-list-accordion/ucd-theme-list-accordion.js

@@ -1,5 +1,6 @@
 import { LitElement } from 'lit';
 import { render, styles } from './ucd-theme-list-accordion.tpl.js';
+import { MutationObserverController, WaitController } from '../../utils/controllers';
 
 /**
  * @class UcdThemeListAccordion
@@ -27,16 +28,19 @@ export default class UcdThemeListAccordion extends LitElement {
       _listItems: { attribute: false, state: true },
       _availableStyles: { attribute: false, state: true },
       _expandedItems: { attribute: false, state: true },
+      role: {type: String, reflect: true}
     };
   }
 
   constructor() {
     super();
     this.render = render.bind(this);
+    this.mutationObserver = new MutationObserverController(this);
     this._listItems = [];
     this._availableStyles = ['accordion', 'faq'];
     this.listStyle = this._availableStyles[0];
     this._expandedItems = new Set();
+    this.role = 'list';
   }
 
   static get styles() {
@@ -44,11 +48,12 @@ export default class UcdThemeListAccordion extends LitElement {
   }
 
   /**
-   * @method updated
-   * @description Lit lifecycle method called after element has updated.
+   * @method willUpdate
+   * @private
+   * @description Lit lifecycle method called right before an element updates
    * @param {Map} props - properties that have changed
    */
-  updated(props) {
+  willUpdate(props) {
     if (props.has('listStyle')) {
       if (!this._availableStyles.includes(this.listStyle.toLowerCase())) {
         this.listStyle = this._availableStyles[0];
@@ -56,27 +61,6 @@ export default class UcdThemeListAccordion extends LitElement {
     }
   }
 
-  /**
-   * @method connectedCallback
-   * @description Native lifecycle method called when element is connected
-   */
-  connectedCallback() {
-    super.connectedCallback();
-    this._childListObserver = new MutationObserver((mutationsList, observer) =>
-      this._onChildListMutation(mutationsList, observer)
-    );
-    this._childListObserver.observe(this, { childList: true });
-  }
-
-  /**
-   * @method disconnectedCallback
-   * @description Native lifecycle method called when element is disconnected
-   */
-  disconnectedCallback() {
-    this._childListObserver.disconnect();
-    super.disconnectedCallback();
-  }
-
   /**
    * @method toggleItemVisiblity
    * @description Expands/collapses an item
@@ -116,6 +100,7 @@ export default class UcdThemeListAccordion extends LitElement {
   /**
    * @method _onTitleClick
    * @description Attached to item title
+   * @private
    * @param {Event} e
    */
   _onTitleClick(e) {
@@ -126,6 +111,7 @@ export default class UcdThemeListAccordion extends LitElement {
   /**
    * @method _onTitleKeyUp
    * @description Attached to item title
+   * @private
    * @param {Event} e
    */
   _onTitleKeyUp(e) {
@@ -136,12 +122,12 @@ export default class UcdThemeListAccordion extends LitElement {
 
   /**
    * @method _onChildListMutation
+   * @private
    * @description Attached to self, responds to changes in children
    */
   _onChildListMutation() {
     let listItems = [];
     Array.from(this.children).forEach((child, index) => {
-      if (child.tagName !== 'DIV') return;
       child.setAttribute('slot', 'list-item-' + index);
       if (this.listStyle === 'faq') {
         child.style.display = 'inline';
@@ -155,6 +141,7 @@ export default class UcdThemeListAccordion extends LitElement {
   /**
    * @method _dispatchItemToggleEvent
    * @description Fires 'item-toggle' custom event when user expands/collapses an item
+   * @private
    * @param {Number} index - The index of the item in the _listItems array property
    */
   _dispatchItemToggleEvent(index) {
@@ -178,6 +165,7 @@ export default class UcdThemeListAccordion extends LitElement {
   /**
    * @method _isTitle
    * @description Item is title or question.
+   * @private
    * @param {Number} i - Array index.
    * @returns  {Boolean}
    */
@@ -188,6 +176,7 @@ export default class UcdThemeListAccordion extends LitElement {
   /**
    * @method _isContent
    * @description Item is content or answer.
+   * @private
    * @param {Number} i - Array index.
    * @returns {Boolean}
    */

package/brand/ucd-theme-list-accordion/ucd-theme-list-accordion.tpl.js

@@ -1,7 +1,6 @@
 import { html, css } from 'lit';
 
 import listCss from "@ucd-lib/theme-sass/2_base_class/_lists.css.js";
-import { motionCollapse } from "../../utils/directives/motion-collapse";
 
 export function styles() {
   let customStyles = css`
@@ -40,7 +39,6 @@ ${this._listItems.map((item, index) => html`
   ` : html`
     <li 
       id="accordion-${index}-panel" 
-      ${motionCollapse({duration: 300})}
       class="item-content"
       role="region" 
       aria-labelledby="accordion-${index}" 

package/package.json

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