@teipublisher/pb-components 2.26.0-next-3.4 → 2.26.0-next-3.6

package/src/pb-ajax.js

@@ -1,7 +1,5 @@
 import { LitElement, html, css } from 'lit-element';
 import '@polymer/iron-ajax';
-import '@polymer/paper-dialog';
-import '@polymer/paper-dialog-scrollable';
 import { pbMixin } from './pb-mixin.js';
 import { get as i18n } from "./pb-i18n.js";
 import './pb-message.js';
@@ -75,6 +73,7 @@ export class PbAjax extends pbMixin(LitElement) {
         this.method = 'get';
         this.confirm = null;
         this.quiet = false;
+        this._running = false;
     }
 
     connectedCallback() {
@@ -95,7 +94,6 @@ export class PbAjax extends pbMixin(LitElement) {
                 @response="${this._handleResponse}"></iron-ajax>
             <pb-message id="confirmDialog"></pb-message>
             <slot name="title" style="display: none"></slot>
-            <progress id="progress" max="100"></progress>
         `;
     }
 
@@ -104,8 +102,7 @@ export class PbAjax extends pbMixin(LitElement) {
         const slot = this.shadowRoot.querySelector('slot[name=title]');
         this._dialogTitle = '';
         slot.assignedNodes().forEach(node => {this._dialogTitle += node.innerHTML});
-        this.button = this.querySelector('paper-button');
-        this.progress = this.shadowRoot.querySelector('progress');
+        this.button = this.renderRoot.getElementById('button');
     }
 
     static get styles() {
@@ -116,18 +113,21 @@ export class PbAjax extends pbMixin(LitElement) {
             slot[name="title"] {
                 margin: 0;
             }
-            progress{
-                width: 100%;
-                display: none;
-            }
-            progress.running{
+            pb-message[open] {
                 display: block;
             }
+            pb-message:not([open]) {
+                display: none;
+            }
         `;
     }
 
     _handleClick(ev) {
         ev.preventDefault();
+        if (this._running) {
+            return;
+        }
+        this._running = true;
         if (this.confirm) {
             const dialog = this.shadowRoot.getElementById('confirmDialog');
             dialog.confirm(this._dialogTitle, i18n(this.confirm))
@@ -139,31 +139,14 @@ export class PbAjax extends pbMixin(LitElement) {
     }
 
     async trigger() {
-        this._disable();
         const loader = this.shadowRoot.getElementById('loadContent');
         loader.url = `${this.getEndpoint()}/${this.url}`;
         this.emitTo('pb-start-update');
         await this.shadowRoot.getElementById('loadContent').generateRequest();
     }
 
-    _enable(){
-        if(this.button){
-            this.button.removeAttribute('disabled');
-            this.button.removeAttribute('readonly');
-            this.progress.classList.remove('running');
-        }
-    }
-    _disable(){
-        if(this.button){
-            this.button.setAttribute('disabled','disabled');
-            this.button.setAttribute('readonly','readonly');
-            this.progress.classList.add('running');
-        }
-    }
-
-
     _handleResponse() {
-        this._enable();
+        this._running = false;
         const resp = this.shadowRoot.getElementById('loadContent').lastResponse;
         this._message = resp;
         if (!this.quiet) {
@@ -179,7 +162,7 @@ export class PbAjax extends pbMixin(LitElement) {
     }
 
     _handleError() {
-        this._enable();
+        this._running = false;
         const loader = this.shadowRoot.getElementById('loadContent');
         const msg = loader.lastError.response;
         const parser = new DOMParser();

package/src/pb-download.js

@@ -147,7 +147,6 @@ export class PbDownload extends pbMixin(LitElement) {
 
             a {
                 text-decoration: var(--pb-download-text-decoration, none);
-                color: var(--pb-download-color);
             }
         `;
     }

package/src/pb-message.js

@@ -13,7 +13,7 @@ export class PbMessage extends themableMixin(LitElement) {
     static get styles() {
         return css`
             :host {
-                display:block;
+                display: block;
             }
         `;
     }
@@ -40,6 +40,10 @@ export class PbMessage extends themableMixin(LitElement) {
             message: {
                 type: String,
                 reflect: true
+            },
+            open: {
+                type: Boolean,
+                reflect: true
             }
         };
     }
@@ -49,6 +53,7 @@ export class PbMessage extends themableMixin(LitElement) {
         this.title = '';
         this.message = '';
         this.type = 'message'; // defaults to 'message'
+        this.open = false;
     }
 
     render() {
@@ -84,6 +89,7 @@ export class PbMessage extends themableMixin(LitElement) {
     show(title, message) {
         this.type = 'message';
         this.set(title, message);
+        this.open = true;
         this.modal.openDialog();
 
         return new Promise((resolve, reject) => {
@@ -91,6 +97,7 @@ export class PbMessage extends themableMixin(LitElement) {
             requestAnimationFrame(() => {
                 const close = this.renderRoot.querySelector('.close');
                 close.addEventListener('click', () => {
+                    this.open = false;
                     this.modal.closeDialog();
                     resolve({ once: true });
                 });
@@ -110,6 +117,7 @@ export class PbMessage extends themableMixin(LitElement) {
     confirm(title, message) {
         this.type = 'confirm';
         this.set(title, message);
+        this.open = true;
         this.modal.openDialog();
 
         return new Promise((resolve, reject) => {
@@ -118,10 +126,12 @@ export class PbMessage extends themableMixin(LitElement) {
                 const confirm = this.renderRoot.querySelector('.confirm');
                 const cancel = this.renderRoot.querySelector('.reject');
                 confirm.addEventListener('click', () => {
+                    this.open = false;
                     this.modal.closeDialog();
                     resolve({ once: true });
                 });
                 cancel.addEventListener('click', () => {
+                    this.open = false;
                     this.modal.closeDialog();
                     reject({ once: true });
                 });

package/src/pb-search.js

@@ -2,13 +2,8 @@ import { LitElement, html, css } from 'lit-element';
 import { pbMixin, waitOnce } from './pb-mixin.js';
 import { registry } from "./urls.js";
 import { translate } from "./pb-i18n.js";
-import '@polymer/paper-input/paper-input.js';
-import '@polymer/paper-checkbox';
 import '@polymer/iron-ajax';
-import '@polymer/iron-form';
-import '@polymer/paper-button';
-import '@polymer/iron-icon';
-import '@cwmr/paper-autocomplete';
+import {themableMixin} from "./theming.js";
 
 /**
  * Implements a basic search form, which can be extended with additional inputs.
@@ -26,7 +21,7 @@ import '@cwmr/paper-autocomplete';
  * @fires pb-paginate - When received, triggers the search again with the new value of the start property
  * @fires pb-search-resubmit - When received, triggers the search again
  */
-export class PbSearch extends pbMixin(LitElement) {
+export class PbSearch extends themableMixin(pbMixin(LitElement)) {
     static get properties() {
         return {
             ...super.properties,
@@ -67,7 +62,7 @@ export class PbSearch extends pbMixin(LitElement) {
             /**
              * Optional URL to query for suggestions. If relative, it is interpreted
              * relative to the endpoint defined on a surrounding `pb-page`.
-             * 
+             *
              * Upon autocomplete, the current input by the user will be sent with a query parameter
              * `query`. The name/values of form controls nested within `pb-search` or subforms will also be
              * appended to the request as parameters. This allows the server side code to distinguish
@@ -112,14 +107,6 @@ export class PbSearch extends pbMixin(LitElement) {
     }
 
     firstUpdated() {
-        if (!this.disableAutocomplete) {
-            const autocomplete = this.shadowRoot.getElementById('autocomplete');
-            autocomplete.addEventListener('autocomplete-change', this._autocomplete.bind(this));
-        }
-        const ironform = this.shadowRoot.getElementById('ironform');
-        ironform.addEventListener('iron-form-response', (event) =>
-            event.detail.completes.then((r) => this.emitTo('pb-search', r.parseResponse()))
-        );
         waitOnce('pb-page-ready', (options) => {
             const loader = this.shadowRoot.getElementById('autocompleteLoader');
             const url = this.source || "api/search/autocomplete";
@@ -152,36 +139,28 @@ export class PbSearch extends pbMixin(LitElement) {
             }
         });
     }
-    
+
     render() {
         return html`
-            <custom-style>
-                <style>
-                    :host {
-                        --suggestions-item: {
-                            color: var(--pb-search-suggestions-color, black);
-                        };
-                        --suggestions-wrapper: {
-                            background: var(--pb-search-suggestions-background, white);
-                        }
-                    }
-                </style>
-            </custom-style>
-            <iron-form id="ironform" allow-redirect="${this.redirect}">
-                <form id="searchPageForm" method="get" action="${this.action}" accept="text/html">
-                    <slot name="beforeInput"></slot>
-                    <paper-input id="search" type="search" name="query" @keyup="${this._handleEnter}" label="${translate(this.placeHolder)}"
-                        value="${this.value}" always-float-label>
-                        <iron-icon icon="search" @click="${this._doSearch}" slot="prefix"></iron-icon>
-                    </paper-input>
-                    <paper-autocomplete-suggestions id="autocomplete" for="search" source="${this._suggestions}" remote-source></paper-autocomplete-suggestions>
-                    <slot></slot>
-                    
-                    <slot name="searchButton"></slot>
+            <form id="searchPageForm" method="get" action="${this.action}" accept="text/html" @submit="${this._handleSubmit}">
+                <slot name="beforeInput"></slot>
+                <div class="input-wrapper">
+                    <input
+                        id="search"
+                        name="query"
+                        type="search"
+                        placeholder="${translate(this.placeHolder)}"
+                        .value="${this.value}"
+                        @keyup="${this._handleEnter}"
+                        list="suggestions"
+                        part="input"
+                    />
+                    <datalist id="suggestions"></datalist>
+                    <slot name="searchButton" part="search-button"></slot>
                     <slot name="resetButton"></slot>
-                    
-                </form>
-            </iron-form>
+                </div>
+                <slot></slot>
+            </form>
             <iron-ajax
                 id="autocompleteLoader"
                 verbose
@@ -195,32 +174,54 @@ export class PbSearch extends pbMixin(LitElement) {
     static get styles() {
         return css`
             :host {
-                --paper-input-container-color: var(--pb-search-label-color, var(--paper-grey-500, #303030));
-                --paper-input-container-input-color: var(--pb-search-input-color, var(--pb-color-primary, #000000));
-                --paper-input-container-focus-color: var(--pb-search-focus-color, var(--paper-grey-500, #303030));
+                display: inline-block;
             }
-            a{
-                padding:1rem;
-                color:var(--pb-reset-color);
+            .input-wrapper {
+                display: flex;
+                align-items: center;
             }
-            .buttons{
-                margin-top:1rem;
-            }
-	    form {
-                margin: 0;
+            #search {
+                flex: 2;
             }
         `;
     }
 
+    _serializeForm() {
+        const form = this.shadowRoot.getElementById('searchPageForm');
+        const formData = new FormData(form);
+        const json = {};
+        // @ts-ignore - FormData.entries() is supported in modern browsers
+        for (let [key, value] of formData.entries()) {
+            json[key] = value;
+        }
+        
+        // Also collect form controls from slots
+        const formControls = this.querySelectorAll('input, select, textarea');
+        formControls.forEach(control => {
+            if (control.name && control.type !== 'button' && control.type !== 'submit' && control.type !== 'reset') {
+                if (control.type === 'checkbox' || control.type === 'radio') {
+                    if (control.checked) {
+                        json[control.name] = control.value;
+                    }
+                } else {
+                    json[control.name] = control.value;
+                }
+            }
+        });
+        
+        return json;
+    }
+
     _doSearch(pagination = false) {
-        let json = this.shadowRoot.getElementById('ironform').serializeForm();
+        let json = this._serializeForm();
         json = this._paramsFromSubforms(json);
-        // remove unnecessary param added by autocomplete
-        delete json['autocomplete-custom-template'];
-        // always start on first result after submitting new search
         json.start = pagination ? this.start : 1;
         if (this.redirect) {
-            window.location.href = `${this.action}?${new URLSearchParams(json)}`;
+            const params = new URLSearchParams();
+            Object.keys(json).forEach(key => {
+                params.append(key, json[key]);
+            });
+            window.location.href = `${this.action}?${params}`;
         } else {
             registry.commit(this, json);
             this.emitTo('pb-load', {
@@ -230,6 +231,11 @@ export class PbSearch extends pbMixin(LitElement) {
         }
     }
 
+    _handleSubmit(e) {
+        e.preventDefault();
+        this._doSearch();
+    }
+
     _paramsFromSubforms(params) {
         if (this.subforms) {
             document.querySelectorAll(this.subforms).forEach((form) => {
@@ -243,32 +249,43 @@ export class PbSearch extends pbMixin(LitElement) {
 
     _handleEnter(e) {
         if (e.keyCode === 13) {
-            this._doSearch();
+            return this._doSearch();
+        }
+        const value = this.shadowRoot.getElementById('search').value;
+        if (value.length > 2) {
+            const loader = this.shadowRoot.getElementById('autocompleteLoader');
+            loader.params = {
+                query: value
+            };
+            loader.generateRequest();
         }
     }
 
     _doSubmit() {
-        this.shadowRoot.getElementById('ironform').submit();
+        this._doSearch();
     }
 
-    _reset(){
-        this.shadowRoot.getElementById('ironform').reset();
-    }
-
-    _autocomplete(ev) {
-        const params = this.shadowRoot.getElementById('ironform').serializeForm();
-        const loader = this.shadowRoot.getElementById('autocompleteLoader');
-        loader.params = params;
-        loader.generateRequest();
+    _reset() {
+        const form = this.shadowRoot.getElementById('searchPageForm');
+        form.reset();
+        registry.commit(this, {}, true);
     }
 
     _updateSuggestions() {
-        const autocomplete = this.shadowRoot.getElementById('autocomplete');
         const loader = this.shadowRoot.getElementById('autocompleteLoader');
+        const datalist = this.shadowRoot.getElementById('suggestions');
         if (loader.lastResponse) {
-            autocomplete.suggestions(loader.lastResponse);
+            datalist.innerHTML = '';
+            loader.lastResponse.forEach(({text, value}) => {
+                const option = document.createElement('option');
+                option.value = value;
+                option.innerText = text;
+                datalist.appendChild(option);
+            });
         }
     }
-
 }
-customElements.define('pb-search', PbSearch);
+if (!customElements.get('pb-search')) {
+    customElements.define('pb-search', PbSearch);
+}
+

package/src/pb-toggle-feature.js

@@ -2,12 +2,13 @@ import { LitElement, html } from 'lit-element';
 import '@polymer/paper-checkbox';
 import { pbMixin, waitOnce } from './pb-mixin.js';
 import { registry } from "./urls.js";
+import {themableMixin} from "./theming.js";
 
 /**
  * @param {{ selector: any; command: string; state: boolean; }} newConfig
  * @param {any[]} configs
  */
- export function addSelector(newConfig, configs) {
+export function addSelector(newConfig, configs) {
     const idx = configs.findIndex((item) => item.selector === newConfig.selector);
     if (idx > -1) {
         configs[idx] = newConfig;
@@ -19,11 +20,11 @@ import { registry } from "./urls.js";
 /**
  * Enable or disable a particular display feature by setting a predefined or custom parameter.
  * Toggling display features can be done server-side or client-side.
- * 
+ *
  * It is important that `pb-toggle-feature` emits and subscribes to the same channel as the target `pb-view`.
- * 
+ *
  * # Server side toggling
- * 
+ *
  * You may set the following view parameters which correspond to the properties supported by `pb-view`:
  *
  * | Parameter | Description |
@@ -64,22 +65,22 @@ import { registry } from "./urls.js";
  * ```
  *
  * # Client side toggling
- * 
+ *
  * The component can also be used to toggle features client-side, i.e. without requiring a server-roundtrip.
  * To enable this, the `selector` property should be set to a CSS3 selector targetting the HTML elements
  * to toggle. In `on` state, the selected elements will be assigned a class `.toggled`.
- * 
+ *
  * ```html
  * <pb-toggle-feature name="normalized" selector=".choice,.choice-alternate,br">Normalized View</pb-toggle-feature>
  * ```
- * 
+ *
  * Note that the name attribute is still required: it is used to determine if the feature is in on or off state by
  * looking at request parameters.
- * 
+ *
  * Instead of toggling the class, you can also completely disable the elements selected - provided that they are
  * publisher components implementing the corresponding `command` method of `pb-mixin`. To disable elements instead of
  * toggling, set the `action` property to *disable*.
- * 
+ *
  * ```html
  * <pb-toggle-feature name="plain" selector=".tei-foreign,pb-highlight,pb-popover" action="disable" default="off">Plain Reading View</pb-toggle-feature>
  * ```
@@ -88,7 +89,7 @@ import { registry } from "./urls.js";
  * @fires pb-global-toggle - Fired if property `global` is set. Will be caught by the surrounding `pb-page`
  * @fires pb-update - When received, sets the features passed from the event
  */
-export class PbToggleFeature extends pbMixin(LitElement) {
+export class PbToggleFeature extends themableMixin(pbMixin(LitElement)) {
 
     static get properties() {
         return {
@@ -101,7 +102,7 @@ export class PbToggleFeature extends pbMixin(LitElement) {
                 type: String
             },
             /**
-             * (optional) CSS selector: selects the elements to toggle client side (sets or unsets a 
+             * (optional) CSS selector: selects the elements to toggle client side (sets or unsets a
              * CSS class `.toggled`). Setting this property will not trigger a reload as everything is
              * handled by javascript.
              */
@@ -164,7 +165,7 @@ export class PbToggleFeature extends pbMixin(LitElement) {
             },
             /**
              * If set, toggle the state of elements which reside
-             * in the surrounding HTML context below `pb-page` 
+             * in the surrounding HTML context below `pb-page`
              * (means: elements which are not inside a `pb-view` or `pb-load`).
              */
             global: {
@@ -187,7 +188,8 @@ export class PbToggleFeature extends pbMixin(LitElement) {
 
     render() {
         return html`
-            <paper-checkbox id="checkbox" @change="${this._changed}" .checked="${this.checked}" .disabled="${this.disabled}"><slot></slot></paper-checkbox>
+            <input type="checkbox" id="checkbox" @change="${this._changed}" .checked="${this.checked}" .disabled="${this.disabled}"></input>
+            <label for="checkbox"><slot></slot></label>
         `;
     }
 
@@ -201,7 +203,7 @@ export class PbToggleFeature extends pbMixin(LitElement) {
 
         const param = registry.state[this.name];
         this._setChecked(param);
-        
+
         const newState = {};
         newState[this.name] = this.checked ? this.on : this.off;
         registry.replace(this, newState);
@@ -212,10 +214,10 @@ export class PbToggleFeature extends pbMixin(LitElement) {
         waitOnce('pb-page-ready', () => {
             if (this.global) {
                 this.dispatchEvent(new CustomEvent('pb-global-toggle', { detail: {
-                    selector: this.selector,
-                    command: this.action,
-                    state: this.checked
-                }, bubbles: true, composed: true }));
+                        selector: this.selector,
+                        command: this.action,
+                        state: this.checked
+                    }, bubbles: true, composed: true }));
             } else if (this.selector) {
                 this.emitTo('pb-toggle', {refresh: false});
             }