@ucd-lib/theme-elements 0.0.16 → 1.0.1

package/.eslintrc.json

@@ -1,3 +1,7 @@
 {
-  "ignorePatterns" : ["*.tpl.js"]
+  "ignorePatterns" : ["*.tpl.js"],
+  "globals": {
+    "UCD_LIB_THEME_LOADER" : "readonly",
+    "WebComponents" : "readonly"
+  }
 }

package/brand/ucd-theme-author-profile/ucd-theme-author-profile.js

@@ -0,0 +1,222 @@
+import {html, LitElement} from 'lit';
+import {render, styles} from "./ucd-theme-author-profile.tpl.js";
+import {TaskController} from '../../utils/controllers/task.js';
+
+/**
+ * @class AuthorProfile
+ * @description This author profile hydrates with the website wordpress api and goes into a profile block.
+ * @property {String} email - Email to reference person
+ * @property {String} domain - Specify the domain to choose from
+ *
+ * <ucdlib-author-profile domain="sandbox" email='sabaggett@ucdavis.edu></ucdlib-author-profile>
+ */
+export default class UcdlibAuthorProfile extends LitElement {
+  static get properties() {
+    return {
+      results : {type: Object, attribute:false},
+      email : {type: String},
+      id: {type: Number},
+      nameLast: {type: String},
+      nameFirst: {type: String},
+      link: {type: String},
+      contactWebsite: {type: String},
+      contactEmail: {type: String},
+      contactPhone: {type: String},
+      contactWebsiteLabel: {type: String},
+      contactEmailLabel: {type: String},
+      contactPhoneLabel: {type: String},
+      contactAppointmentUrl: {type: String},
+      positionTitle: {type: String},
+      photo: {type: Object},
+      department: {type: String},
+      domain: {type: String}
+    };
+  }
+
+  static get styles() {
+    return styles();
+  }
+
+  constructor() {
+    super();
+    this.PENDING = false;
+    this.LOADING = false;
+    this.COMPLETE = false;
+    this.ERROR = false;
+    this.results = {};
+    this.email = '';
+    this.domain = '';
+    this.errorMessage = 'This is not an email.';
+    
+    this.svgIcon = {
+      'url': html`
+              <svg class="svg-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640">
+                <path d="M640,328V312a16,16,0,0,0-16-16H344V256h72a32,32,0,0,0,32-32V96a32,32,0,0,0-32-32H224a32,32,0,0,0-32,32V224a32,32,0,0,0,32,32h72v40H16A16,16,0,0,0,0,312v16a16,16,0,0,0,16,16H120v40H64a32,32,0,0,0-32,32V544a32,32,0,0,0,32,32H224a32,32,0,0,0,32-32V416a32,32,0,0,0-32-32H168V344H472v40H416a32,32,0,0,0-32,32V544a32,32,0,0,0,32,32H576a32,32,0,0,0,32-32V416a32,32,0,0,0-32-32H520V344H624A16,16,0,0,0,640,328ZM256,192V128H384v64ZM192,512H96V448h96Zm352,0H448V448h96Z"/>
+              </svg> `,
+      'email': html`
+              <svg class="svg-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                <path d="M502.3,190.8a6,6,0,0,1,9.7,4.7V400a48,48,0,0,1-48,48H48A48,48,0,0,1,0,400V195.6a6,6,0,0,1,9.7-4.7c22.4,17.4,52.1,39.5,154.1,113.6,21.1,15.4,56.7,47.8,92.2,47.6,35.7.3,72-32.8,92.3-47.6C450.3,230.4,479.9,208.2,502.3,190.8ZM256,320c23.2.4,56.6-29.2,73.4-41.4,132.7-96.3,142.8-104.7,173.4-128.7A23.93,23.93,0,0,0,512,131V112a48,48,0,0,0-48-48H48A48,48,0,0,0,0,112v19a24.08,24.08,0,0,0,9.2,18.9c30.6,23.9,40.7,32.4,173.4,128.7,16.8,12.2,50.2,41.8,73.4,41.4Z"/>
+              </svg>`,
+      'calendar': html `
+              <svg class="svg-icon" xmlns="http://www.w3.org/2000/svg"viewBox="0 0 512 512">
+              <path d="M12 192h424c6.6 0 12 5.4 12 12v260c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V204c0-6.6 5.4-12 12-12zm436-44v-36c0-26.5-21.5-48-48-48h-48V12c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v52H160V12c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v52H48C21.5 64 0 85.5 0 112v36c0 6.6 5.4 12 12 12h424c6.6 0 12-5.4 12-12z"/>
+              </svg>`,
+      'phone': html `
+              <svg class="svg-icon" xmlns="http://www.w3.org/2000/svg"viewBox="0 0 512 512">
+              <path d="M497.39 361.8l-112-48a24 24 0 0 0-28 6.9l-49.6 60.6A370.66 370.66 0 0 1 130.6 204.11l60.6-49.6a23.94 23.94 0 0 0 6.9-28l-48-112A24.16 24.16 0 0 0 122.6.61l-104 24A24 24 0 0 0 0 48c0 256.5 207.9 464 464 464a24 24 0 0 0 23.4-18.6l24-104a24.29 24.29 0 0 0-14.01-27.6z"/>
+              </svg>
+        `
+    };
+    this.render=render.bind(this);
+
+  }
+
+
+  /**
+   * @method firstUpdated
+   * 
+   * @description updated when the page first renders
+   * 
+   * @param {Object} changedProperties 
+   * 
+   */  
+  firstUpdated(){
+    if(this.email != ''){
+      this.eController = new TaskController(this, this._requestUrl());
+
+      this.requestUpdate();
+    }
+  }
+
+  
+  /**
+   * @method validationLink
+   * 
+   * @description Validates the email to make sure it is an email
+   * 
+   * @param {String} email 
+   * 
+   * @returns {String}
+   * 
+   */ 
+  validationLink(email){
+    const regexExp = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/gi;  
+    return regexExp.test(email);
+  }
+
+  /**
+   * @method validationLink
+   * 
+   * @description Validates the email to make sure it is an email
+   * 
+   * @param {String} email 
+   * 
+   * @returns {String}
+   * 
+   */ 
+  _onPending(){
+    this.PENDING = true;
+  }
+ 
+  /**
+   * @method _onError
+   * 
+   * @description Sets error variable to true
+   * 
+   * @param {String} e 
+   * 
+   */ 
+  _onError(e){
+    this.ERROR = true;
+    console.log(this.ERROR);
+    console.error(e);
+  }
+
+  /**
+   * @method _onComplete
+   * 
+   * @description on complete defines the forms and updates
+   * 
+   * @param {Object} results 
+   * 
+   * 
+   */ 
+  _onComplete(results){
+    this.results = results;
+    if(this.results.data != undefined) {
+      this.ERROR = true;
+    }
+    else {
+      this.COMPLETE = true;
+      this.PENDING = false;
+      this.LOADING = false;
+
+
+      this.id = this.results.id;
+
+      this.nameLast = this.results.nameLast;
+
+      this.nameFirst = this.results.nameFirst;
+
+      this.link = this.results.link;
+
+      this.contactWebsite = this.results.contactWebsite.length !== 0 ? this.results.contactWebsite[0].value :null;
+
+      this.contactEmail = this.results.contactEmail.length !== 0 ? this.results.contactEmail[0].value : null;
+
+      this.contactPhone = this.results.contactPhone.length !== 0 ? this.results.contactPhone[0].value : null;
+
+      this.contactAppointmentUrl = this.results.contactAppointmentUrl != "" ? this.results.contactAppointmentUrl : undefined;
+  
+      this.positionTitle = this.results.positionTitle;
+
+      this.photo = Object.keys(this.results.photo).length !== 0 ? this.results.photo : "Empty";
+
+      this.department = this.results.department.title;
+      
+      this.photoAlt = this.nameFirst + "_" + this.nameLast + "_Img";
+
+      this.requestUpdate();
+    }
+
+    
+
+  }
+
+  /**
+   * @method _requestUrl
+   * 
+   * @description configures the url and checks for email validation
+   * 
+   * @returns {String}
+   * 
+   */ 
+  _requestUrl(){
+    let email =this.email;
+    let validate = this.validationLink(email);
+    if(!validate)  console.error(email);
+    let url;
+
+    url = "https://library.ucdavis.edu/wp-json/ucdlib-directory/person/" + String(email);
+    if (this.domain != "")
+      url = "https://" + this.domain + ".library.ucdavis.edu/wp-json/ucdlib-directory/person/" + String(email);
+    this.requestUpdate();
+    
+    return url;
+  }
+
+  /**
+   * @method _onLoading
+   * 
+   * @description Sets loading variable to true
+   * 
+   * 
+   */ 
+  _onLoading(){
+    this.LOADING = true;
+  }
+
+
+}
+
+customElements.define('ucdlib-author-profile', UcdlibAuthorProfile);

package/brand/ucd-theme-author-profile/ucd-theme-author-profile.tpl.js

@@ -0,0 +1,201 @@
+import { html, css } from 'lit';
+
+import normalizeCss from "@ucd-lib/theme-sass/normalize.css.js";
+import teaserStyles from "@ucd-lib/theme-sass/4_component/_index.css.js";
+import baseStyles from "@ucd-lib/theme-sass/1_base_html/_index.css.js";
+import buttons from "@ucd-lib/theme-sass/2_base_class/_index.css.js";
+export function styles() {
+  const elementStyles = css`
+    :host {
+      display: block;
+    }
+    form {
+      width:100%;
+    }
+  `;
+
+  return [elementStyles,baseStyles,teaserStyles,normalizeCss, buttons];
+}
+
+export function render() {
+  return html`
+  <style>
+    .vm-teaser__figure.category_loading{
+      background-color:#dcdcdc;
+      height:165px;
+      width:135px;
+    }
+    .load_teaser_a{
+      background-color:#dcdcdc;
+      width: 85%;
+      height:25px;
+    }
+    .load_teaser_b{
+      background-color:#dcdcdc;
+      width: 67%;
+      height:20px;
+    }
+    .load_teaser_c{
+      background-color:#dcdcdc;
+      width: 33.3%;
+      height:18px;
+    }
+    .container {
+      display: inline-grid;
+      grid-template-columns: 15% 85%;
+      width:100%;
+    }
+    .container-no-image {
+      display: inline-grid;
+      width:100%;
+    }
+    article {
+      margin-bottom: 50px;
+    }
+
+    .photo {
+      position: relative;
+      width:90%;
+      height:90%;
+    }
+
+    .photo:after {
+      content: "";
+      display:inline-block;
+    }
+
+    .content {
+      position: absolute;
+      width: 70%;
+      height: 70%;
+    }
+
+    .text_container {
+      vertical-align:top;
+      display:inline-block;
+    }
+    .name {
+      color:var(--ucd-blue-80); 
+      margin-bottom:0;
+    }
+    .title {
+      margin-bottom:0;
+    }
+    .info {
+      color:var(--ucd-blue-80); 
+      margin-bottom:0;
+    }
+    .svg-icon {
+      width: 20px;
+      height: 20px;
+      fill: #73ABDD;
+      margin-right: 5px;
+    }
+    .contact-list{
+      display:inline-block;
+      margin-top:5px;
+    }
+    .pipe {
+        font-size:30px;
+        vertical-align: middle;
+        font-weight: lighter;
+        line-height: 25px;
+        color:#36454F;
+    }
+    .noApp-pipe {
+      display:none;
+    }
+
+    @media (max-width: 800px) {
+
+      .contact-list {
+        display:block;
+        margin-bottom:5px;
+      }
+
+      .contact-list .pipe {
+        display:none;
+      }
+      .photo {
+        width:90%;
+        height:90%;
+      }
+
+    }
+
+    @media (max-width: 550px) {
+      .container {
+        grid-template-columns: 35% 65%;
+      }
+      .photo {
+        width:80%;
+        height:80%;
+      }
+
+    }
+  </style>
+  <!-- 
+    Starts the Permalink Fetch
+  -->
+${this.eController ? html`
+    ${this.eController.render({
+      complete: (result) => this._onComplete(result),
+      initial: () => this._onLoading(),
+      pending: () => this._onPending(),
+      error: (e) => this._onError(e)
+      })
+    }`:html``
+}
+
+<article>
+  ${!this.LOADING ? html`
+      ${this.photo != "Empty"  && this.photo != undefined ? 
+      html`   
+      <div class="container">
+        <div class="photo"><img src="${this.photo.link}" alt="${this.photoAlt}"></div>
+        <div class="text_container"> 
+          <h3 class="name"><a class="name" href="">${this.nameFirst} ${this.nameLast}</a></h3>
+          <p class="title">${this.positionTitle} <span class="pipe">&#124;</span> ${this.department}</p>
+          <p class="contact-list">${this.contactPhone ? html`${this.svgIcon.phone} <a class="info" href="tel:${this.contactPhone}">${this.contactPhone}</a>  <span class="pipe">&#124;</span>`: html``}</p>
+          <p class="contact-list">${this.contactEmail ? html`${this.svgIcon.email} <a class="info" href="mailto:${this.contactEmail}">${this.contactEmail}</a> ${this.contactAppointmentUrl ? html`<span class="pipe">&#124;</span>`:html`<span class="noApp-pipe">&#124;</span>`}`: html``}</p>
+          <p class="contact-list">${this.contactAppointmentUrl ? html`${this.svgIcon.calendar} <a class="info" href="${this.contactAppointmentUrl ? this.contactAppointmentUrl:"#"}">Book an Appointment</a>`: html``}</p>
+        </div>
+      </div>
+      `
+      :html`
+      <div class="container-no-image">
+        <div class="text_container"> 
+          <h3 class="name"><a class="name" href="">${this.nameFirst} ${this.nameLast}</a></h3>
+          <p class="title">${this.positionTitle} <span class="pipe">&#124;</span> ${this.department}</p>
+          <p class="contact-list">${this.contactPhone ? html`${this.svgIcon.phone} <a class="info" href="tel:${this.contactPhone}">${this.contactPhone}</a>  <span class="pipe">&#124;</span> `: html``}</p>
+          <p class="contact-list">${this.contactEmail ? html`${this.svgIcon.email} <a class="info" href="mailto:${this.contactEmail}">${this.contactEmail}</a> ${this.contactAppointmentUrl ? html`<span class="pipe">&#124;</span>`:html`<span class="noApp-pipe">&#124;</span>`}`: html``}</p>
+          <p class="contact-list">${this.contactAppointmentUrl ? html`${this.svgIcon.calendar} <a class="info" href="${this.contactAppointmentUrl ? this.contactAppointmentUrl:"#"}">Book an Appointment</a>`: html``}</p>
+        </div>
+      </div>
+      `}
+
+    `:html`
+      ${this.ERROR ? html`
+        <p>Person does not exist!</p>
+      `: html`
+        <!-- 
+          If it is in the loading stage of the permalink fetch
+          it will render this
+          look.
+        -->
+        <div class="vm-teaser__figure category_loading"></div>
+        <div class="vm-teaser__body">
+          <div class="load_teaser_a"></div>
+          <br/>
+          <div class="load_teaser_b"></div>
+          <br/>
+          <div class="load_teaser_c"></div>
+          <br/>
+          <div class="load_teaser_c"></div>
+        </div>
+        `}
+
+    `}
+</article>
+`;
+}

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

@@ -149,7 +149,6 @@ export default class UcdThemeSubnav extends Mixin(LitElement)
    * @description Fires an 'item-click' event
    * @param {Object} item - The link item
    * @param {Array} location - The link location in links array
-   * @returns 
    */
   _dispatchItemClick(item, location){
     if (item.href) return;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ucd-lib/theme-elements",
-  "version": "0.0.16",
+  "version": "1.0.1",
   "description": "Custom elements for the UCD brand theme",
   "main": "index.js",
   "scripts": {
@@ -9,9 +9,12 @@
   "author": "jrmerz@ucdavis.edu",
   "license": "MIT",
   "dependencies": {
+    "@lit-labs/task": "^1.0.0",
     "@ucd-lib/theme-sass": "^5.0.15",
+    "dompurify": "^2.3.9",
     "ip-cidr": "^3.0.4",
     "lit": "^2.0.2",
+    "marked": "^4.0.18",
     "photoswipe": "^4.1.3",
     "slim-select": "^1.26.2"
   }

package/ucdlib/ucdlib-md/ucdlib-md-content.js

@@ -0,0 +1,31 @@
+import { LitElement } from 'lit';
+import { MutationObserverController } from '../../utils/controllers';
+
+/**
+ * @class UcdlibMdContent
+ * @classdesc Component class for declaritively wrapping markdown and translating into sanitized html
+*/
+export default class UcdlibMdContent extends LitElement {
+
+  static get properties() {
+    return {};
+  }
+  
+  mutationObserver = new MutationObserverController(this, { characterData: true, attributes: false, childList: true, subtree: true });
+
+  constructor() {
+    super();
+  }
+
+  createRenderRoot() {
+    this.style.display = 'none';
+    return this;
+  }
+
+  _onChildListMutation() {
+    // send event to ucdlib-md
+    this.dispatchEvent(new CustomEvent('content-updated', { bubbles: true }));
+  }
+}
+
+customElements.define('ucdlib-md-content', UcdlibMdContent);

package/ucdlib/ucdlib-md/ucdlib-md.js

@@ -0,0 +1,120 @@
+import { LitElement, css } from 'lit';
+import { marked } from 'marked';
+import DOMPurify from 'dompurify';
+import { UcdlibMdContent } from './ucdlib-md-content.js';
+import { MutationObserverController } from '../../utils/controllers/mutation-observer.js';
+
+/**
+ * @class UcdlibMd
+ * @classdesc Component class for translating/displaying markdown into sanitized html
+ * @property {String} data - text to hold markdown code
+ * @property {Object} renderer - an object holding element functions to override the default markdown behavior 
+ *  Format: reference the Marked Renderer documentation at https://marked.js.org/using_pro#renderer
+ * @property {Object} use - marked use object
+ * @property {Object} options - marked options object
+*/
+export default class UcdlibMd extends LitElement {
+
+  static get properties() {
+    return {
+      // ignore: {type: String},
+      // exclude: {type: String},
+      // subset: {type: String},
+      data: {type: String},
+      renderer: {type: Object},
+      use: {type: Object},
+      options: {type: Object}
+    };
+  }
+
+  mutationObserver = new MutationObserverController(this, { characterData: true, attributes: false, childList: true, subtree: true });
+  
+  constructor() {
+    super();
+    this.data = '';
+    this.renderer = null;
+
+    this.renderedElement = document.createElement('div');
+    this.renderedElement.setAttribute('rendered', '');
+  }
+
+  createRenderRoot() {
+    this.appendChild(this.renderedElement);
+    return this;
+  }
+
+  _onChildListMutation() {
+    if( this.contentElement ) return;
+
+    // query children for ucdlib-md-content
+    // wire up listener if it exists
+    this.contentElement = this.querySelector('ucdlib-md-content');
+    if( this.contentElement ) {
+      this.contentElement.addEventListener('content-updated', this._updateFromContentElementMd.bind(this));
+    }
+  }
+
+  disconnectedCallback() {
+    if( this.contentElement ) {
+      this.contentElement.removeEventListener('content-updated', this._updateFromContentElementMd.bind(this));
+    }
+  }
+
+  /**
+   * @method updated
+   * @description Lit method called when element is updated.
+   */
+  updated() {
+    // config markdown renderer so elements are correctly styled
+    this._setRendererOverrides();
+  
+    // update markdown data with the latest, either when the content changes or data property is updated
+    this.data = DOMPurify.sanitize(marked.parse(this.data));
+    this.renderedElement.innerHTML = this.data;
+  }
+
+  /**
+   * @method _updateFromContentElementMd
+   * @description Updates the local data property with the text from the ucdlib-md-content element (if it exists)
+   * @private
+   */
+  _updateFromContentElementMd() {
+    // remove whitespace between lines
+    this.data = this.contentElement.innerText.split('\n').map(line => line.trim()).join('\n');
+  }
+  
+  /**
+   * @method _setRendererOverrides
+   * @description Updates the marked package renderer overrides to customize how element types are rendered
+   * @private
+   */
+  _setRendererOverrides() {
+    if (!this.renderer) {
+      this.renderer = {
+        list(body, ordered, start) {
+          let renderedContent = '';
+          if (ordered) {
+            renderedContent = `<ul class="list--multilevel">${body}</ul>`;
+          } else {
+            renderedContent = `<ul class="list--bordered">${body}</ul>`;
+          }
+          return renderedContent;
+        }
+      };
+    }
+
+    if (!this.options) {
+      this.options = { breaks: true, gfm: true };
+    }
+
+    if (!this.use) {
+      this.use = { renderer: this.renderer };
+    }
+
+    marked.use(this.use);
+    marked.setOptions(this.options);
+  }
+
+}
+
+customElements.define('ucdlib-md', UcdlibMd);

package/ucdlib/ucdlib-sils-permalink/README.md

@@ -0,0 +1,22 @@
+# SILS Permalink
+
+Allows users to easily add links to SILS permalinks in webpages.
+
+## Inline Version
+
+By default add simple links to the pages.  If you identified a tag inline like
+`<ucdlib-sils-permalink
+href="https://search.library.ucdavis.edu/permalink/01UCD_INST/1uov27j/alma9981249369903126"/>`,
+then the link would format as something like
+
+ * [Engineering victory : the Union siege of
+   Vicksburg](https://search.library.ucdavis.edu/permalink/01UCD_INST/1uov27j/alma9981249369903126)
+
+For more citation information, we'd could add
+
+*  `<ucdlib-sils-permalink href=".." cite="full" />` => [Solonick, Justin
+   S. Engineering Victory : the Union Siege of Vicksburg . Carbondale: Southern
+   Illinois University
+   Press, 2015. Print.](https://search.library.ucdavis.edu/permalink/01UCD_INST/1uov27j/alma9981249369903126)
+
+## Expanded Version

package/ucdlib/ucdlib-sils-permalink/ucdlib-sils-permalink-controller.js

@@ -0,0 +1,36 @@
+import {Task} from '@lit-labs/task';
+
+export class PermalinkController {
+//   host;
+//   value;
+//   kinds = Names.kinds;
+//   task;
+  constructor(host, url) {
+    const baseUrl = url;
+    this.url = baseUrl;
+    this.host = host;
+    this.task = new Task(
+      this.host,
+      async () => {
+        const response = await fetch(`${baseUrl}`);
+        const result = await response.json();
+        const error = result.error;
+        if (error !== undefined) {
+          throw new Error(error);
+        }
+        return result;
+      },
+        
+      () => [this.url]
+    );
+
+  }
+
+
+  render(renderFunctions) {
+    return this.task.render(renderFunctions);
+  }
+
+
+
+}

package/ucdlib/ucdlib-sils-permalink/ucdlib-sils-permalink.js

@@ -0,0 +1,324 @@
+import { LitElement} from 'lit';
+import {render, styles} from "./ucdlib-sils-permalink.tpl.js";
+import {PermalinkController} from './ucdlib-sils-permalink-controller.js';
+import {TaskController} from '../../utils/controllers/task.js';
+
+/**
+ * @class UcdlibSilsPermalink
+ * @description This component allows you to easily add individual objects from
+ * the UC SILS catalog into your webpage.
+ * @property {String} href - Pointer to the permalink
+ * @property {String} cite - Specify the citation style
+ *
+ * <ucdlib-sils-permalink href="https://search.library.ucdavis.edu/permalink/01UCD_INST/1uov27j/alma9981249369903126"/>
+ */
+
+export default class UcdlibSilsPermalink extends LitElement {
+  static get properties() {
+    return {
+      results : {type: Object, attribute:false},
+      permalink : {type: String},
+      image : {type: String},
+      title : {type: String},
+      authorFull : {type: String},
+      authorLast : {type: String, attribute:false},
+      authorFirst: {type: String, attribute:false},
+      authorID: {type: Array, attribute:false},
+      year : { type: String},
+      summary : {type: String},
+      tags : {type: Array},
+      host_url : {type: String},
+      teaserType : {type: String, attribute:false},
+      publisher : {type: String, attribute:false},
+      placePublication : {type: String, attribute:false},
+      notes : {type: Array, attribute:false},
+      language: {type: String, attribute:false},
+      randomClass: {type: String, attribute:false},
+      elemClass: {type: Array, attribute:false},
+      url: {type: String, attribute:false},
+      form: {type: Boolean, attribute:false},
+      isCustom: {type:Boolean},
+      index: {type:Number},
+      newPermalink: {type: Array, hasChanged(newVal, oldVal) {
+        return newVal !== oldVal;
+      }, attribute:false},
+
+    };
+  }
+
+  static get styles() {
+    return styles();
+  }
+
+  constructor() {
+    super();
+    this.PENDING = false;
+    this.LOADING = false;
+    this.COMPLETE = false;
+    this.ERROR = false;
+    this.results = {};
+    this.loading = false;
+    this.resultsPerPage = 9999;
+    this.page = 1;
+    this.permalink = ''; 
+    this.authorLast = '';
+    this.authorFirst = '';
+    this.authorFull = '';
+    this.title = '';
+    this.year = '';
+    this.summary= '';
+    this.host_url= '';
+    this.tags = [];
+    this.authorID = [];
+    this.teaserType = '';
+    this.publisher = '';
+    this.placePublication = '';
+    this.notes = [];
+    this.language = '';
+    this.randomClass = '';
+    this.elemClass = ['tahoe', 'california', 'quad'];
+    this.image = '';
+    this.url = '';
+    this.isCustom = false;
+    this.newPermalink = [];
+    this.form = false;
+    this.index = 0;
+    this.tagEntryField = [{url: '', label: '', default: true}];
+    this.authorEntryField = [{value: '', default: true}];
+    this.errorMessage = 'Href is not a permalink.';
+    this.render=render.bind(this);
+
+  }
+  
+    /**
+   * @method firstUpdated
+   * 
+   * @description updated when the page first renders
+   * 
+   * @param {Object} changedProperties 
+   * 
+   */  
+  firstUpdated(changedProperties){
+    if(this.permalink != ''){
+       this.perma = new TaskController(this, this._requestUrl());
+
+       this.requestUpdate();
+    }
+  }
+
+
+
+  
+
+  validationLink(url){
+    // let match = url.match(/([^\/]+)([a-z0-9]+)$/g);
+
+    // let id = url.includes("/9fle3i/") ? 'L' : url.includes("/1hjlc2p/") ? 'PC' : 'Error';
+    // if(url.match(/https:\/\/search.library.ucdavis.edu\/permalink\/01UCD_INST\/([^\/]+)\/([a-zA-Z0-9_]*)/g)){
+    //   url = 'https://search.library.ucdavis.edu/primaws/rest/pub/pnxs/' + id + '/' + match[0] +'?vid=01UCD_INST:UCD&lang=en&search_scope=DN_and_CI';
+    //   return url;
+    // }
+    let id;
+    if(url != "") id = url.split("/alma")[1];
+
+    url = "https://open-na.hosted.exlibrisgroup.com/alma/01UCD_INST/bibs/" + id;
+
+    
+    return url;
+  }
+
+  _onPending(){
+    this.PENDING = true;
+  }
+ 
+
+  _onError(e){
+    this.ERROR = true;
+    console.log("Error:", e);
+  }
+
+  handleEdit() {
+    this.form = true;
+
+    this.requestUpdate();
+
+  }
+  handleDelete(){
+    let tempDelete = JSON.parse(sessionStorage.getItem("newPermalink"));
+
+    delete tempDelete[this.index];
+    tempDelete = Object.fromEntries(Object.entries(tempDelete).filter(([_, v]) => v != null));
+
+    this.requestUpdate;
+    sessionStorage.setItem("newPermalink", JSON.stringify(tempDelete));
+    location.reload();
+  }
+
+
+    /**
+   * @method _addTag
+   * 
+   * @description Bound to click event on website add button.  adds another 
+   * iteration of the element to the DOM and List
+   * 
+   * @param {Object} element 
+   * 
+   */  
+     _addTag(){
+      this.tagEntryField.push({url: '', label: '', default: false});
+      this.requestUpdate();
+    }
+
+  /**
+     * @method _addAuthor
+     * 
+     * @description Bound to click event of add email button.
+     * adds another iteration of the element to the DOM and List
+     * 
+     * @param {Object} element 
+     * 
+     */  
+  _addAuthor(){
+    this.authorEntryField.push({value: '', default: false});
+    this.requestUpdate();
+  }
+
+  /**
+     * @method _sendValues
+     * 
+     * @description Get the values from the form that is given.
+     * 
+     * @param {Object} element 
+     * 
+     */  
+   _sendValues(){
+    let formData = {};
+    let authorList = [];
+    let tagtitle = [];
+    let url = [];
+    let image = [];
+    let tags = [];
+
+    formData.title = this.shadowRoot.getElementById("permalink-title").value;
+    formData.year = this.shadowRoot.getElementById("permalink-date").value;
+    formData.summary = this.shadowRoot.getElementById("permalink-summary").value;
+    formData.image = this.shadowRoot.getElementById("permalink-image").value;
+    formData.permalink = this.shadowRoot.getElementById("permalink-permalink").value;
+
+
+    for(let i of this.shadowRoot.querySelectorAll("[id^='permalink-author']").values()){
+      authorList.push({"label" : i.value});
+    }
+    formData.author = authorList;
+    
+
+    for(let i of this.shadowRoot.querySelectorAll("[id^='permalink-image']").values())
+      image.push(i.value);
+    formData.image = image[0];
+
+    for(let i of this.shadowRoot.querySelectorAll("[id^='permalink-tags ']").values())
+      tagtitle.push(i.value);
+
+    for(let i of this.shadowRoot.querySelectorAll("[id^='permalink-tags-url']").values())
+      url.push(i.value);
+
+    for(let i in tagtitle)
+      tags[i] = {"@id": url[i], "label": tagtitle[i]};
+    formData.tags = tags;
+
+    if(sessionStorage.getItem("newPermalink")){
+      this.newPermalink = JSON.parse(sessionStorage.getItem("newPermalink"));
+      this.newPermalink = Object.values(this.newPermalink);
+
+    }
+
+    this.newPermalink.push(formData);
+    
+    this.form = false;
+
+    this.requestUpdate;
+    sessionStorage.setItem("newPermalink", JSON.stringify(this.newPermalink));
+    location.reload();
+
+
+  }
+
+  getCreatedPermalink(){
+    super.requestUpdate();
+
+    return this.newPermalink;
+  }
+
+
+  _onComplete(results){
+
+    /* Note:
+    ISBN has multiple options so later address which items to pick and whether
+    to use default thumbnail
+    */ 
+
+    this.COMPLETE = true;
+    this.PENDING = false;
+    this.LOADING = false;
+    this.results = results;
+    this.teaserType = this.results["@type"];
+    let img = []; 
+    for(let i = 0; i < this.results.identifier.length; i++){
+      if(this.results.identifier[i]['@type']){
+        if(this.results.identifier[i]['@type'].includes('bibo:isbn'))
+          img = img.concat(this.results.identifier[i].label);
+        if(this.results.identifier[i]['@type'].includes('bibo:ean'))
+          img = img.concat(this.results.identifier[i].label);
+        
+      }
+        
+    }
+    let identifer = img[0];
+
+    if(this.teaserType == 'Video' || this.teaserType == 'Music'){
+      this.image = 'https://syndetics.com/index.php?client=primo&isbn='+ identifer + '/sc.gif';
+    }
+    else{
+      this.image = 'https://syndetics.com/index.php?client=primo&isbn='+ identifer + '/sc.jpg';
+    }
+
+    this.year = this.results.date;
+    this.title = this.results.title.substring(0, this.results.title.lastIndexOf("/"));
+    this.authorFull = !Array.isArray(this.results.creator) ? [this.results.creator] : this.results.creator;
+
+    this.authorLast = this.authorFull[0];
+    this.authorFirst = this.authorFull[1];
+    this.summary = this.results.description;
+    this.publisher = this.results.publisher;
+    this.placePublication = this.results.place_of_publication.split(' ')[0];
+    this.language = this.results.language;
+
+    for (let i = 0; i < Object.keys(this.results.subject).length; i++){
+      this.tags = this.tags.concat({"id": this.results.subject[i]["@id"], "subject": this.results.subject[i]["label"]});
+    }
+    this.tags = this.results.subject;
+
+    this.notes = this.results.note;
+
+  }
+
+
+  _requestUrl(){
+    let url =this.permalink;
+    let validate = this.validationLink(url);
+    if(validate == this.errorMessage)  console.error(url);
+    this.requestUpdate();
+
+    
+    url = validate; 
+    return url;
+  }
+
+  _onLoading(){
+    this.LOADING = true;
+  }
+
+
+}
+
+customElements.define('ucdlib-sils-permalink',UcdlibSilsPermalink);

package/ucdlib/ucdlib-sils-permalink/ucdlib-sils-permalink.tpl.js

@@ -0,0 +1,337 @@
+import { html, css } from 'lit';
+
+import normalizeCss from "@ucd-lib/theme-sass/normalize.css.js";
+import teaserStyles from "@ucd-lib/theme-sass/4_component/_index.css.js";
+import baseStyles from "@ucd-lib/theme-sass/1_base_html/_index.css.js";
+import buttons from "@ucd-lib/theme-sass/2_base_class/_index.css.js";
+export function styles() {
+  const elementStyles = css`
+    :host {
+      display: block;
+    }
+    form {
+      width:100%;
+    }
+    #tag {
+      width:75%;
+      display: inline-block;
+    }
+    #tag-color {
+      width:24%;
+      display: inline-block;    
+    }
+    #delete {
+      width:24%;
+      display: inline-block;    
+    }
+    #permalink-author {
+      width:75%;
+      display: inline-block;
+    }
+    #permalink-tags {
+      width:75%;
+      display: inline-block;  
+    }
+    #permalink-tags-url {
+      width:75%;
+      display: inline-block;  
+    }
+
+
+  `;
+
+  return [elementStyles,baseStyles,teaserStyles,normalizeCss, buttons];
+}
+
+export function render() {
+  return html`
+  <style>
+    .vm-teaser__figure.category_loading{
+      background-color:#dcdcdc;
+      height:165px;
+      width:135px;
+    }
+    .load_teaser_a{
+      background-color:#dcdcdc;
+      width: 85%;
+      height:25px;
+    }
+    .load_teaser_b{
+      background-color:#dcdcdc;
+      width: 67%;
+      height:20px;
+    }
+    .load_teaser_c{
+      background-color:#dcdcdc;
+      width: 33.3%;
+      height:18px;
+    }
+  </style>
+  <!-- 
+    Starts the Permalink Fetch
+  -->
+  ${this.perma ? html`
+    ${this.perma.render({
+      complete: (result) => this._onComplete(result),
+      initial: () => this._onLoading(),
+      pending: () => this._onPending(),
+      error: (e) => this._onError(e)
+      })
+    }`:html``
+  }
+
+  <article class="vm-teaser   ">
+  ${!this.LOADING ? html`
+      <!-- 
+        If it is completed permalink fetch
+      -->
+    ${!this.form ? 
+
+      html`
+      <!-- 
+        This is the original permalink read that fires if there is are 
+        attributes added to the permalink.  If the form is not triggered 
+      -->
+
+        <div class="vm-teaser__figure category">
+            <a href="${this.image}"><img src="${this.image}" alt="" class="" width="135" loading="eager" />
+            </a>
+        </div> 
+        <div class="vm-teaser__body">
+        <h3 class="vm-teaser__title"><a href="${this.host_url ? this.host_url : this.permalink}">${this.title}</a></h3>
+
+          <ul class="vm-teaser__byline">
+            <li>
+            
+            ${this.authorFull ? 
+                typeof this.authorFull === 'string' || this.authorFull instanceof String ? 
+                  JSON.parse(this.authorFull).map(author => author["label"] != "" ? html`<span class="byline"> ${author["label"]}.</span>--<br />` : html``)
+                  :this.authorFull.map(author => author["label"] != "" ? html`<span class="byline"> ${author["label"]}.</span>--<br />` : html``)
+              :html``
+            }
+            </li>
+            <li>${this.year}</li>
+          </ul>
+          <ul class="vm-teaser__categories">
+            ${this.tags ? 
+                typeof this.tags === 'string' || this.tags instanceof String ? 
+                  JSON.parse(this.tags).map(tag => html`<li class="vm-teaser__cat-marker tahoe"><a href="${tag['@id']}">${tag['label']}</a></li>`)
+                  :this.tags.map(tag => tag["label"] != "" ? html`<li class="vm-teaser__cat-marker ${this.elemClass[Math.floor(Math.random() * this.elemClass.length)]}"><a href="${tag['@id']}">${tag['label']}</a></li>`:html``)
+              :html``
+            }
+          </ul>
+          <div class="vm-teaser__summary">${this.summary}</div>
+        </div>
+        ${this.isCustom ? html`
+          <button id="delete-permalink" class="btn btn--alt2" @click="${this.handleDelete}">Delete Permalink</button>
+
+        `: html`
+          <button id="edit-permalink" class="btn--primary" @click="${this.handleEdit}">Edit Permalink</button>
+        `}
+ 
+      `:html`     
+      <!-- 
+        This is if the form is triggered meaning the edit permalink is occuring
+        so that it adds to the entries to the session.  Also takes info from what 
+        is already in the permalink.  This is the edit form
+      -->
+        <form method="post">
+        <!-- START OF FORM -->
+
+          <fieldset>
+
+            <!-- Title -->
+            <div class="field-container">
+              <label for="permalink-title">Title</label>
+              <input id="permalink-title" .value=${this.title ? this.title : ""} type="text" placeholder=${this.title ? this.title : "Enter Your Title"} />
+            </div>
+
+            <!-- Host URL -->
+            <div class="field-container">
+              <label for="permalink-permalink">Permalink Host URL</label>
+              <input id="permalink-permalink" .value=${this.permalink ? this.permalink : ""} type="text" placeholder=${this.permalink ? this.permalink : "Enter Your Title"} />
+            </div>
+
+
+            <br />
+            <br />
+            <br />
+
+
+            <!-- Author -->
+            ${this.authorFull ? 
+            html`
+              <!-- If permalink already has authors -->
+              <div class="author">
+                <div style="border-style: solid; margin: 25px 0; padding:5px;">
+                ${this.authorFull.map((author, index) => 
+                  html`
+                  <div class="field-container">
+                        <label for="permalink-author no-${index}">Author</label>
+                        <input id="permalink-author no-${index}" type="author" .value=${author['label']} placeholder="${author['label'].split(",")[0]}, ${author['label'].split(",")[1] ? author['label'].split(",")[1] : ""} " />
+                  </div> `  
+                )}
+                </div>
+                <br />
+                <div>
+
+                  <h5>New Author Entry</h5>
+                  ${this.authorEntryField.map((item, index) =>                
+                    html`
+                      <div class="field-container">
+                          <label for="permalink-author no-${index}">Author</label>
+                          <input id="permalink-author no-${index}" type="author" .value=${item.value} placeholder="Enter the Authors of the Work" />
+                      </div>
+    
+                    `
+                  )}
+                  <a @click="${this._addAuthor}" class="btn--alt3 btn--sm" >Add Author Field</a>
+                </div>
+              </div>
+            `   
+            :html`
+              <!-- If permalink DOES NOT has authors -->
+
+              <div>
+
+                <div class="author">
+                  <br />
+                  <h5>New Author Entry</h5>
+                  ${this.authorEntryField.map((item, index) =>                
+                  html`
+                    <div class="field-container">
+                        <label for="permalink-author no-${index}">Author</label>
+                        <input id="permalink-author no-${index}" type="author" .value=${item.value} placeholder="Enter the Authors of the Work" />
+                    </div>
+    
+                  `
+                  )}
+                  <a @click="${this._addAuthor}" class="btn--alt3 btn--sm" >Add Author Field</a>
+                </div>
+              </div>
+              `}
+
+
+            <br />
+            <br />
+            <br />
+
+            <!-- Year -->
+            <div class="field-container">
+              <label for="permalink-date">Year of Publication</label>
+              <input id="permalink-date" value=${this.year ? this.year : ""}  type="text" placeholder=${this.year ? this.year : "Year of Publication"} />
+            </div>
+
+            <!-- Image -->
+            <div class="field-container">
+              <label for="permalink-image">Image JPEG URL</label>
+              <input id="permalink-image" value=${this.image ? this.image : ""}  type="url" placeholder=${this.year ? this.year : "Year of Publication"} />
+            </div>
+            
+            <br />
+            <br />
+            <br />
+
+            <!-- Tags -->
+            ${this.tags ? 
+            html`
+
+              <!-- If permalink already has Tags -->
+                <div class="tag">
+                  <div style="border-style: solid; margin: 25px 0; padding:5px;">
+                  ${this.tags.map((tag, index)=> 
+                    html`
+                    <div id="tag"  class="field-container">
+                      <label for="permalink-tags no-${index}">Tag</label>
+                      <input id="permalink-tags no-${index}" type="url" .value=${tag['label']} placeholder="${tag['label']}" />
+                    </div>
+
+                    <label for="permalink-tags-url no-${index}">URL</label>
+                    <input id="permalink-tags-url no-${index}" .value=${tag['@id'] ? tag['@id']: ''} type="url" placeholder="${tag['@id'] ? tag['@id']: 'URL Not Defined'}" />
+
+                  <br />
+                  <br />
+                  <br />
+                `
+                )}
+                </div>
+
+              <h5>New Tag Entry</h5>
+                ${this.tagEntryField.map((item, index) =>                
+                  html`
+                    <div class="tag">
+                      <div id="tag" class="field-container">
+                        <label for="permalink-tags no-${index}">Tag</label>
+                        <input id="permalink-tags no-${index}" type="url" .value=${item.label} placeholder="Name Your Permalink Tag" />
+                        <label for="permalink-tags-url no-${index}">URL</label>
+                        <input id="permalink-tags-url no-${index}" .value=${item.url} type="url" placeholder="URL of Permalink Tag" />
+                      </div>
+                    </div>
+                  `
+                )}
+              
+                <br />
+                <a @click="${this._addTag}" id="form-apply"class="btn--alt3 btn--sm">Add Tag Field</a>
+              
+
+            `:html `
+              <!-- If permalink DOES NOT has Tags -->
+              <h5>New Tag Entry</h5>
+                ${this.tagEntryField.map((item, index) =>                
+                html`
+                  <div class="tag">
+                    <div id="tag" class="field-container">
+                      <label for="permalink-tags no-${index}">Tag</label>
+                      <input id="permalink-tags no-${index}" type="url" .value=${item.label} placeholder="Name Your Permalink Tag" />
+                      <label for="permalink-tags-url no-${index}">URL</label>
+                      <input id="permalink-tags-url no-${index}" .value=${item.url} type="url" placeholder="URL of Permalink Tag" />
+                    </div>
+                  </div>
+                `
+            
+                )}
+
+                <br />
+                <a @click="${this._addTag}" id="form-apply"class="btn--alt3 btn--sm">Add Tag Field</a>
+            
+            `}
+
+            <br />
+            <!-- Summary -->
+            <div class="field-container">
+              <label for="permalink-summary">Summary</label>
+              <textarea id="permalink-summary"  .value=${this.summary ? this.summary : ""} rows="5" placeholder=${this.summary ? this.summary : "Write Summary Here"}></textarea>
+            </div>
+
+
+          </fieldset>
+
+          <!-- Apply Button -->
+          <div class="field-container--small views-filters__submit-field">
+            <a @click="${this._sendValues}" class="btn--primary">Apply</a>
+            <a onClick="window.location.reload();" class="btn--alt">Cancel</a>
+          </div>
+
+        <!-- END OF FORM -->
+        </form>   
+      `}
+    `:html`
+      <!-- 
+        If it is in the loading stage of the permalink fetch
+        it will render this
+        look.
+      -->
+      <div class="vm-teaser__figure category_loading"></div>
+      <div class="vm-teaser__body">
+        <div class="load_teaser_a"></div>
+        <br/>
+        <div class="load_teaser_b"></div>
+        <br/>
+        <div class="load_teaser_c"></div>
+        <br/>
+        <div class="load_teaser_c"></div>
+      </div>
+    `}
+</article>
+`;
+}

package/utils/controllers/task.js

@@ -0,0 +1,36 @@
+import {Task} from '@lit-labs/task';
+
+export class TaskController {
+//   host;
+//   value;
+//   kinds = Names.kinds;
+//   task;
+  constructor(host, url) {
+    const baseUrl = url;
+    this.url = baseUrl;
+    this.host = host;
+    this.task = new Task(
+      this.host,
+      async () => {
+        const response = await fetch(`${baseUrl}`);
+        const result = await response.json();
+        const error = result.error;
+        if (error !== undefined) {
+          throw new Error(error);
+        }
+        return result;
+      },
+        
+      () => [this.url]
+    );
+
+  }
+
+
+  render(renderFunctions) {
+    return this.task.render(renderFunctions);
+  }
+
+
+
+}