@ucd-lib/theme-elements 0.0.2 → 0.0.6

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 { MutationObserverController, WaitController } from '../../utils/controllers';
 
 /**
  * @class UcdThemeQuickLinks
@@ -17,8 +17,10 @@ import { Mixin, BreakPoints } from "../../utils/index.js";
  * @property {Boolean} opened - Menu is open
  * @property {Number} animationDuration - Length of animation when opening/closing menu
  */
-export default class UcdThemeQuickLinks extends Mixin(LitElement)
-  .with(BreakPoints) {
+export default class UcdThemeQuickLinks extends LitElement {
+
+  mutationObserver = new MutationObserverController(this);
+  wait = new WaitController(this);
 
   static get properties() {
     return {
@@ -67,7 +69,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 +86,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 +231,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){
@@ -262,33 +264,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-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,8 @@ 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 {
+  mutationObserver = new MutationObserverController(this);
 
   static get properties() {
     return {

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

@@ -0,0 +1,62 @@
+import { LitElement } from 'lit';
+import {render, styles} from "./ucd-theme-slim-select.tpl.js";
+
+import SlimSelect from 'slim-select';
+
+import { MutationObserverController } from '../../utils/controllers';
+
+/**
+ * @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 LitElement {
+  mutationObserver = new MutationObserverController(
+    this, 
+    {subtree: true, childList: true, attributes: true, characterData: true},
+    "_onLightDomMutation"
+  );
+
+  static get properties() {
+    return {
+      
+    };
+  }
+
+  static get styles() {
+    return styles();
+  }
+
+  constructor() {
+    super();
+    this.render = render.bind(this);
+  }
+
+  /**
+   * @method _onLightDomMutation
+   * @private
+   * @description Fires when light dom child list changes. Called by MutationObserverController.
+   */
+  _onLightDomMutation(){
+    const children = Array.from(this.children);
+    if (children.length == 0 || children[0].tagName != "SELECT") return;
+    const select = children[0].cloneNode(true);
+    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({
+      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/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,6 +1,6 @@
 {
   "name": "@ucd-lib/theme-elements",
-  "version": "0.0.2",
+  "version": "0.0.6",
   "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",
-    "lit": "^2.0.0-rc.4",
-    "photoswipe": "^4.1.3"
+    "@ucd-lib/theme-sass": "^5.0.15",
+    "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>
+`;