From 7433dd175da97e48c15f720f345054a3f43f36b1 Mon Sep 17 00:00:00 2001
From: spelkey <spelkey@ucdavis.edu>
Date: Thu, 11 Mar 2021 16:36:04 -0500
Subject: [PATCH] fix style import for lit elements

---
 .../pages/components/app-components.js         |  5 +++++
 .../pages/components/app-components.tpl.js     |  2 --
 .../public/elements/pages/home/app-home.js     |  6 ++++++
 .../public/elements/pages/home/app-home.tpl.js |  2 --
 .../public/elements/styles/shared-styles.js    | 18 ++----------------
 5 files changed, 13 insertions(+), 20 deletions(-)

diff --git a/services/ucd-lib-client/client/public/elements/pages/components/app-components.js b/services/ucd-lib-client/client/public/elements/pages/components/app-components.js
index e805632..d2f5174 100644
--- a/services/ucd-lib-client/client/public/elements/pages/components/app-components.js
+++ b/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);
diff --git a/services/ucd-lib-client/client/public/elements/pages/components/app-components.tpl.js b/services/ucd-lib-client/client/public/elements/pages/components/app-components.tpl.js
index e0199fe..1ed9172 100644
--- a/services/ucd-lib-client/client/public/elements/pages/components/app-components.tpl.js
+++ b/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);
diff --git a/services/ucd-lib-client/client/public/elements/pages/home/app-home.js b/services/ucd-lib-client/client/public/elements/pages/home/app-home.js
index ae4492b..b4a2c51 100644
--- a/services/ucd-lib-client/client/public/elements/pages/home/app-home.js
+++ b/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 
diff --git a/services/ucd-lib-client/client/public/elements/pages/home/app-home.tpl.js b/services/ucd-lib-client/client/public/elements/pages/home/app-home.tpl.js
index 8ef7daa..6fb872e 100644
--- a/services/ucd-lib-client/client/public/elements/pages/home/app-home.tpl.js
+++ b/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;
diff --git a/services/ucd-lib-client/client/public/elements/styles/shared-styles.js b/services/ucd-lib-client/client/public/elements/styles/shared-styles.js
index e702e2c..00c7a9b 100644
--- a/services/ucd-lib-client/client/public/elements/styles/shared-styles.js
+++ b/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)}`;