@teipublisher/pb-components 2.26.1-next.2 → 3.0.0-next-4.1

package/src/pb-authority-lookup.js

@@ -1,22 +1,21 @@
-import { LitElement, html, css } from 'lit-element';
-import { unsafeHTML } from 'lit-html/directives/unsafe-html.js';
+import { LitElement, html, css } from 'lit';
+import { unsafeHTML } from 'lit/directives/unsafe-html.js';
+import { themableMixin } from './theming.js';
 import { pbMixin, waitOnce } from './pb-mixin.js';
-import { translate } from "./pb-i18n.js";
-import { createConnectors } from "./authority/connectors.js";
-import "./pb-restricted.js";
-import '@polymer/paper-input/paper-input';
-import '@polymer/paper-icon-button';
+import { translate } from './pb-i18n.js';
+import { createConnectors } from './authority/connectors.js';
+import './pb-restricted.js';
 
 /**
  * Performs authority lookups via configurable connectors.
- * 
+ *
  * @fires pb-authority-select - Fired when user selects an entry from the list
  * @fires pb-authority-edit-entity - Fired when user clicks the edit button next to an entry
  * @fires pb-authority-new-entity - Fired when user clicks the add new entity button
- * @fires pb-authority-lookup - When received, starts a lookup using the passed in query string and 
+ * @fires pb-authority-lookup - When received, starts a lookup using the passed in query string and
  * authority type
  */
-export class PbAuthorityLookup extends pbMixin(LitElement) {
+export class PbAuthorityLookup extends themableMixin(pbMixin(LitElement)) {
   static get properties() {
     return {
       /**
@@ -32,7 +31,7 @@ export class PbAuthorityLookup extends pbMixin(LitElement) {
        */
       sortByLabel: {
         type: Boolean,
-        attribute: 'sort-by-label'
+        attribute: 'sort-by-label',
       },
       /**
        * A list of comma-separated stopwords which should be excluded
@@ -40,16 +39,16 @@ export class PbAuthorityLookup extends pbMixin(LitElement) {
        * HTML text
        */
       stopwords: {
-        type: String
+        type: String,
       },
       /**
        * A list of space- or comma-separated group names, whose members will be
        * allowed to add or edit entries in the local register (if enabled).
-       * 
+       *
        * @default "tei"
        */
       group: {
-        type: String
+        type: String,
       },
       /**
        * The authority type to use. Should correspond to a name defined for one of the connectors.
@@ -95,19 +94,21 @@ export class PbAuthorityLookup extends pbMixin(LitElement) {
 
     this._stopwordSet = new Set();
     if (this.stopwords) {
-      this.stopwords.split(/\s*,\s*/).forEach((sw) => this._stopwordSet.add(sw.toLowerCase()));
+      this.stopwords.split(/\s*,\s*/).forEach(sw => this._stopwordSet.add(sw.toLowerCase()));
     }
 
     this.subscribeTo('pb-authority-lookup', ev => {
-        this.query = ev.detail.query;
-        this.type = ev.detail.type;
-        this._results = [];
-        this._query();
+      this.query = ev.detail.query;
+      this.type = ev.detail.type;
+      this._results = [];
+      this._query();
     });
 
     waitOnce('pb-page-ready', () => {
       const connectors = createConnectors(this.getEndpoint(), this);
-      connectors.forEach(connector => { this._authorities[connector.register] = connector });
+      connectors.forEach(connector => {
+        this._authorities[connector.register] = connector;
+      });
       if (this.autoLookup) {
         this._query();
       }
@@ -118,23 +119,39 @@ export class PbAuthorityLookup extends pbMixin(LitElement) {
 
   render() {
     return html`
-      <paper-input
-        id="query"
-        label="${translate('annotations.lookup')}"
-        always-float-label
-        value="${this.query}"
-        @change="${this._queryChanged}"
-      >
-        <iron-icon icon="icons:search" slot="prefix"></iron-icon>
-        ${
-          this._authorities[this.type] && this._authorities[this.type].editable ?
-          html`
-            <pb-restricted group="${this.group}" slot="suffix">
-              <paper-icon-button icon="icons:add" @click="${this._addEntity}" title="${translate('annotations.add-entity')}"></paper-icon-button>
-            </pb-restricted>
-            ` : null
-        }
-      </paper-input>
+      <header>
+        <input
+          id="query"
+          type="search"
+          placeholder="${translate('annotations.lookup')}"
+          .value="${this.query}"
+          @input="${e => this._queryChanged(e)}"
+          @change="${e => this._queryChanged(e)}"
+          aria-label="${translate('annotations.lookup')}"
+        />
+        ${this._authorities[this.type] && this._authorities[this.type].editable
+          ? html`
+              <pb-restricted group="${this.group}">
+                <button
+                  @click="${this._addEntity}"
+                  title="${translate('annotations.add-entity')}"
+                  type="button"
+                >
+                  <svg xmlns="http://www.w3.org/2000/svg" class="ionicon" viewBox="0 0 512 512">
+                    <path
+                      fill="none"
+                      stroke="currentColor"
+                      stroke-linecap="round"
+                      stroke-linejoin="round"
+                      stroke-width="32"
+                      d="M256 112v288M400 256H112"
+                    />
+                  </svg>
+                </button>
+              </pb-restricted>
+            `
+          : null}
+      </header>
       <slot name="authform"></slot>
       <div id="output">
         <ul part="output">
@@ -151,11 +168,16 @@ export class PbAuthorityLookup extends pbMixin(LitElement) {
       return Promise.resolve();
     }
     const authority = this._authorities[register];
-    console.log('<pb-authority-lookup> Retrieving info for %s from %s using %s', id, register, authority.constructor.name);
+    console.log(
+      '<pb-authority-lookup> Retrieving info for %s from %s using %s',
+      id,
+      register,
+      authority.constructor.name,
+    );
     let info = await authority.info(id, container);
     if (info.strings) {
       info = Object.assign(info, {
-        strings: info.strings.filter((s) => s && !this._stopwordSet.has(s.toLowerCase()))
+        strings: info.strings.filter(s => s && !this._stopwordSet.has(s.toLowerCase())),
       });
     }
     return info;
@@ -164,42 +186,134 @@ export class PbAuthorityLookup extends pbMixin(LitElement) {
   _formatItem(item) {
     return html`
       <li>
-          <div class="icons">
-              <paper-icon-button
-                  icon="icons:link"
-                  @click="${() => this._select(item)}"
-                  title="link to"
-              ></paper-icon-button>
-          </div>
-          <div class="link">
-            ${item.link
-              ? html`<a target="_blank" href="${item.link}">${unsafeHTML(item.label)}</a>`
-              : html`${unsafeHTML(item.label)}`
-            }
+        <div>
+          <button @click="${() => this._select(item)}" title="link to" type="button">
+            <svg xmlns="http://www.w3.org/2000/svg" class="ionicon" viewBox="0 0 512 512">
+              <path
+                d="M208 352h-64a96 96 0 010-192h64M304 160h64a96 96 0 010 192h-64M163.29 256h187.42"
+                fill="none"
+                stroke="currentColor"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="36"
+              />
+            </svg>
+          </button>
+          ${item.link
+            ? html`<a target="_blank" href="${item.link}">${unsafeHTML(item.label)}</a>`
+            : html`${unsafeHTML(item.label)}`}
+          <div class="badges">
+            ${item.occurrences > 0
+              ? html`<span class="occurrences badge" part="occurrences">${item.occurrences}</span>`
+              : null}
+            ${item.provider
+              ? html`<span class="source badge" part="source">${item.provider}</span>`
+              : null}
+            <span class="register badge" part="register">${item.register}</span>
+            ${this._authorities[this.type] && this._authorities[this.type].editable
+              ? html` <pb-restricted group="${this.group}">
+                  <button
+                    @click="${() => this._editEntity(item)}"
+                    title="${translate('annotations.edit-entity')}"
+                    type="button"
+                  >
+                    <svg xmlns="http://www.w3.org/2000/svg" class="ionicon" viewBox="0 0 512 512">
+                      <path
+                        d="M384 224v184a40 40 0 01-40 40H104a40 40 0 01-40-40V168a40 40 0 0140-40h167.48"
+                        fill="none"
+                        stroke="currentColor"
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                        stroke-width="32"
+                      />
+                      <path
+                        d="M459.94 53.25a16.06 16.06 0 00-23.22-.56L424.35 65a8 8 0 000 11.31l11.34 11.32a8 8 0 0011.34 0l12.06-12c6.1-6.09 6.67-16.01.85-22.38zM399.34 90L218.82 270.2a9 9 0 00-2.31 3.93L208.16 299a3.91 3.91 0 004.86 4.86l24.85-8.35a9 9 0 003.93-2.31L422 112.66a9 9 0 000-12.66l-9.95-10a9 9 0 00-12.71 0z"
+                      />
+                    </svg>
+                  </button>
+                </pb-restricted>`
+              : null}
           </div>
-        ${item.occurrences > 0 ? html`<div><span class="occurrences" part="occurrences">${item.occurrences}</span></div>` : null}
-        ${item.provider ? html`<div><span class="source" part="source">${item.provider}</span></div>` :null}
-        <div><span class="register" part="register">${item.register}</span></div>
-
-        ${ 
-          this._authorities[this.type] && this._authorities[this.type].editable ?
-            html`
-            <pb-restricted group="${this.group}">
-              <div class="icons">
-                  <paper-icon-button
-                      icon="editor:mode-edit"
-                      @click="${() => this._editEntity(item)}"
-                      title="${translate('annotations.edit-entity')}"
-                  ></paper-icon-button>
-              </div>
-            </pb-restricted>` : null 
-        }
+        </div>
         ${item.details ? html`<div class="details" part="details">${item.details}</div>` : null}
-
       </li>
     `;
   }
 
+  static get styles() {
+    return css`
+      :host {
+        display: flex;
+        flex-direction: column;
+      }
+
+      header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin-bottom: 1rem;
+      }
+
+      header > input {
+        flex-grow: 1;
+      }
+
+      .link {
+        flex-grow: 2;
+      }
+
+      #output {
+        overflow: auto;
+        /*FireFox*/
+        scrollbar-width: none;
+      }
+
+      #output > ul {
+        width: 100%;
+        padding: 0;
+        list-style: none;
+      }
+
+      #output > ul > li {
+        border-bottom: 1px solid var(--pb-color-border);
+      }
+
+      #output > ul > li > div {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        flex-wrap: wrap;
+        gap: 0.125rem;
+      }
+
+      #output > ul > li > div > a {
+        flex-grow: 2;
+      }
+
+      .badges {
+        display: inline-flex;
+        gap: 0.125rem;
+        align-items: center;
+      }
+
+      .badge {
+        font-size: 0.75rem;
+        border-radius: 4px;
+        padding: 4px;
+        color: var(--pb-color-inverse);
+      }
+
+      .source {
+        background-color: #637b8c;
+      }
+      .register {
+        background-color: var(--pb-color-lighter, #35424b);
+      }
+      .occurrences {
+        background-color: var(--pb-color-focus, #f6a623);
+      }
+    `;
+  }
 
   _select(item) {
     const connector = this._authorities[item.register];
@@ -208,13 +322,13 @@ export class PbAuthorityLookup extends pbMixin(LitElement) {
       type: item.register,
       properties: {
         ref: item.id,
-      }
+      },
     };
     if (connector) {
       connector
         .select(item)
         .then(() => this.emitTo('pb-authority-select', options))
-        .catch((e) => this.emitTo('pb-authority-error', {status: e.message}));
+        .catch(e => this.emitTo('pb-authority-error', { status: e.message }));
     } else {
       this.emitTo('pb-authority-select', options);
     }
@@ -225,24 +339,23 @@ export class PbAuthorityLookup extends pbMixin(LitElement) {
     if (connector) {
       connector
         .select(item)
-        .then(() => this.emitTo('pb-authority-edit-entity', {id: item.id, type: item.register}));
+        .then(() => this.emitTo('pb-authority-edit-entity', { id: item.id, type: item.register }));
     } else {
-      this.emitTo('pb-authority-edit-entity', {id: item.id, type: item.register});
+      this.emitTo('pb-authority-edit-entity', { id: item.id, type: item.register });
     }
   }
 
-  _queryChanged() {
+  _queryChanged(e) {
     this._results = [];
-      this.query = this.shadowRoot.getElementById('query').value;
-      this._query();
+    this.query = e.target.value;
+    this._query();
   }
 
   _query() {
     this.emitTo('pb-start-update');
     this._authorities[this.type].query(this.query).then(results => {
-      this._occurrences(results.items)
-        .then((merged) => {
-          this._results = merged;
+      this._occurrences(results.items).then(merged => {
+        this._results = merged;
       });
       this.emitTo('pb-end-update');
       // this.shadowRoot.getElementById('query').focus();
@@ -250,7 +363,7 @@ export class PbAuthorityLookup extends pbMixin(LitElement) {
   }
 
   _addEntity() {
-    this.emitTo('pb-authority-new-entity', {query: this.query, type: this.type});
+    this.emitTo('pb-authority-new-entity', { query: this.query, type: this.type });
   }
 
   _occurrences(items) {
@@ -259,13 +372,13 @@ export class PbAuthorityLookup extends pbMixin(LitElement) {
     }
     const params = new FormData();
     params.append('register', this.type);
-    items.forEach((item) => {
+    items.forEach(item => {
       params.append('id', item.id);
     });
-    return new Promise((resolve) => {
+    return new Promise(resolve => {
       fetch(`${this.getEndpoint()}/api/annotations/occurrences`, {
         method: 'POST',
-        body: params
+        body: params,
       })
         .then(response => {
           if (response.ok) {
@@ -273,7 +386,7 @@ export class PbAuthorityLookup extends pbMixin(LitElement) {
           }
         })
         .then(json => {
-          items.forEach((item) => {
+          items.forEach(item => {
             if (json[item.id]) {
               item.occurrences = json[item.id];
             } else {
@@ -295,80 +408,7 @@ export class PbAuthorityLookup extends pbMixin(LitElement) {
           });
           resolve(items);
         });
-      });
-  }
-
-  static get styles() {
-    return css`
-      :host {
-        display: flex;
-        flex-direction: column;
-      }
-
-      header {
-        display: flex;
-        align-items: center;
-      }
-
-      .link {
-        flex-grow: 2;
-      }
-      #output {
-        overflow: auto;
-        /*FireFox*/
-        scrollbar-width: none;
-      }
-
-      /*
-      #output .icons{
-          visibility: hidden;
-      }
-      #output .icons:hover{
-          visibility: visible;
-      }
-      */
-
-      #output ul {
-        width: 100%;
-        padding: 0;
-        list-style: none;
-      }
-      #output li {
-          display: flex;
-          justify-content: space-between;
-          flex-wrap: wrap;
-          align-items: center;
-          border-bottom: 1px solid #efefef;
-      }
-        #output li:hover{
-            background:#efefef;
-        }
-      #output td:nth-child(3), #output td:nth-child(4), #output td:nth-child(5) {
-        text-align: right;
-        vertical-align: middle;
-      }
-
-      .details, .source, .register, .occurrences {
-        font-size: .85rem;
-          width: 100%;
-      }
-
-      .source, .register, .occurrences {
-        border-radius: 4px;
-        padding: 4px;
-        color: var(--pb-color-inverse);
-      }
-
-      .source {
-        background-color: #637b8c;
-      }
-      .register {
-        background-color: var(--pb-color-lighter);
-      }
-      .occurrences {
-        background-color: var(--pb-color-focus);
-      }
-    `;
+    });
   }
 }
 customElements.define('pb-authority-lookup', PbAuthorityLookup);