Merge pull request #80 from UCDavisLibrary/sp-import-fix

fix style import for lit elements

services/ucd-lib-client/client/public/elements/pages/components/app-components.js

@@ -1,5 +1,6 @@
 import { LitElement } from 'lit-element';
 import render from "./app-components.tpl.js";
+import { sharedStyles } from "../../styles/shared-styles";
 
 import "../../components/graphics/dams-watercolor";
 import "../../components/graphics/dams-watercolor-overlay";
@@ -22,6 +23,10 @@ export default class AppComponents extends LitElement {
     };
   }
 
+  static get styles() {
+    return [sharedStyles];
+  }
+
   constructor() {
     super();
     this.render = render.bind(this);

services/ucd-lib-client/client/public/elements/pages/components/app-components.tpl.js

@@ -1,12 +1,10 @@
 import { html } from 'lit-element';
-import { styles } from "../../styles/shared-styles";
 import SharedHtml from '../../utils/shared-html';
 
 export default function render() { 
 return html`
 
 <style>
-  ${styles()}
   :host {
     display: block;
     background-color: var(--color-white);

services/ucd-lib-client/client/public/elements/pages/home/app-home.js

@@ -18,6 +18,8 @@ import RecordInterface from "../../interfaces/RecordInterface";
 import AppStateInterface from "../../interfaces/AppStateInterface";
 import CollectionInterface from "../../interfaces/CollectionInterface";
 
+import { sharedStyles } from "../../styles/shared-styles";
+
 /**
  * @class AppHome
  * @description home page is rendered to the DAMS v2
@@ -47,6 +49,10 @@ class AppHome extends Mixin(LitElement)
     // console.log(this.FcAppConfigModel.getFeaturedImages());
   }
 
+  static get styles() {
+    return [sharedStyles];
+  }
+
   /**
    * @method ready
    * @description It gets the model information for the Collections when 

services/ucd-lib-client/client/public/elements/pages/home/app-home.tpl.js

@@ -1,12 +1,10 @@
 import { html } from 'lit-element';
-import { styles } from "../../styles/shared-styles";
 import { classMap } from 'lit-html/directives/class-map';
 import { styleMap } from 'lit-html/directives/style-map';
 
 export default function render() { 
 return html`
 <style>
-  ${styles()}
   :host {
     display: block;
     position: relative;

services/ucd-lib-client/client/public/elements/styles/shared-styles.js

@@ -1,3 +1,4 @@
+import { css, unsafeCSS } from 'lit-element';
 import ucdCssProps from "./campus-theme-properties.css";
 import ucdCss from "./campus-theme.css";
 import damsCssProps from "./dams-styles-properties.css";
@@ -16,19 +17,4 @@ dmEle.id = 'shared-styles';
 dmEle.appendChild(templateEle);
 document.head.appendChild(dmEle);
 
-/**
- * @function styles
- * @description Include this function in your Lit template to include site styles
- * <style>
- *   ${styles()}
- *   :host {
- *     display: block;
- *   }
- * </style>
- * 
- * @returns Css string
- */
-export default function styles() {
-  return `${ucdCss + damsCss}`;
-}
-
+export const sharedStyles = css`${unsafeCSS(ucdCss + damsCss)}`;