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

package/src/pb-print-preview.js

@@ -1,4 +1,4 @@
-import { LitElement, html, css } from 'lit-element';
+import { LitElement, html, css } from 'lit';
 import { pbMixin, waitOnce } from './pb-mixin.js';
 import { resolveURL } from './utils.js';
 
@@ -10,134 +10,134 @@ import { resolveURL } from './utils.js';
  * @appliesMixin pbMixin
  */
 export class PbPrintPreview extends pbMixin(LitElement) {
-
-    static get properties() {
-        return {
-            /** ID of the pb-document this element is connected to. The document path to
-             * load will be taken from the pb-document.
-             */
-            src: {
-                type: String
-            },
-            /**
-             * Additional CSS stylesheets to be loaded. Relative URLs will be resolved
-             * relative to the API endpoint.
-             */
-            styles: {
-                type: String
-            },
-            /**
-             * The generated API URL from which the HTML content will be loaded.
-             * Readonly. This excludes the paged.js styles and scripts, so you can
-             * use the URL with other tools.
-             */
-            url: {
-                type: String,
-                reflect: true,
-                readOnly: true
-            },
-            /**
-             * Set to disable the pagejs polyfill, i.e. show the HTML as delivered from the server. 
-             */
-            raw: {
-                type: Boolean
-            },
-            ...super.properties
-        };
-    }
-
-    constructor() {
-        super();
-
-        this.url = 'about:blank';
-        this.raw = false;
-    }
-
-    firstUpdated() {
-        super.firstUpdated();
-
-        this._iframe = this.shadowRoot.querySelector('iframe');
-        this._iframe.addEventListener('load', () => {
-            if (this._iframe.src === 'about:blank') {
-                return;
-            }
-            this._iframe.className = '';
-            this.emitTo('pb-end-update');
-        });
-
-        waitOnce('pb-page-ready', () => {
-            this.refresh();
-        });
-    }
-
-    /**
-     * Open the browser's print dialog.
-     */
-    print() {
-        this._iframe.contentWindow.print();
+  static get properties() {
+    return {
+      /** ID of the pb-document this element is connected to. The document path to
+       * load will be taken from the pb-document.
+       */
+      src: {
+        type: String,
+      },
+      /**
+       * Additional CSS stylesheets to be loaded. Relative URLs will be resolved
+       * relative to the API endpoint.
+       */
+      styles: {
+        type: String,
+      },
+      /**
+       * The generated API URL from which the HTML content will be loaded.
+       * Readonly. This excludes the paged.js styles and scripts, so you can
+       * use the URL with other tools.
+       */
+      url: {
+        type: String,
+        reflect: true,
+        readOnly: true,
+      },
+      /**
+       * Set to disable the pagejs polyfill, i.e. show the HTML as delivered from the server.
+       */
+      raw: {
+        type: Boolean,
+      },
+      ...super.properties,
+    };
+  }
+
+  constructor() {
+    super();
+
+    this.url = 'about:blank';
+    this.raw = false;
+  }
+
+  firstUpdated() {
+    super.firstUpdated();
+
+    this._iframe = this.shadowRoot.querySelector('iframe');
+    this._iframe.addEventListener('load', () => {
+      if (this._iframe.src === 'about:blank') {
+        return;
+      }
+      this._iframe.className = '';
+      this.emitTo('pb-end-update');
+    });
+
+    waitOnce('pb-page-ready', () => {
+      this.refresh();
+    });
+  }
+
+  /**
+   * Open the browser's print dialog.
+   */
+  print() {
+    this._iframe.contentWindow.print();
+  }
+
+  /**
+   * Refresh the displayed content.
+   */
+  refresh() {
+    this.emitTo('pb-start-update');
+    this._iframe.className = 'hidden';
+    this._iframe.src = 'about:blank';
+
+    const doc = this.getDocument();
+    const params = new URLSearchParams();
+    if (doc.odd) {
+      params.set('odd', `${doc.odd}.odd`);
     }
-
-    /**
-     * Refresh the displayed content.
-     */
-    refresh() {
-        this.emitTo('pb-start-update');
-        this._iframe.className = 'hidden';
-        this._iframe.src = 'about:blank';
-
-        const doc = this.getDocument();
-        const params = new URLSearchParams();
-        if (doc.odd) {
-            params.set('odd', `${doc.odd}.odd`);
-        }
-        params.set('base', `${this.getEndpoint()}/${doc.getCollection()}/`);
-        this._getCustomStyles().forEach((href) => params.append('style', href));
-        const urlParams = params.toString();
-        this.url = `${this.getEndpoint()}/api/document/${encodeURIComponent(doc.path)}/print?${urlParams}`;
-        
-        const iParams = new URLSearchParams(urlParams);
-        iParams.set('wc', 'true');
-        if (!this.raw) {
-            iParams.set('script', resolveURL('../lib/paged.polyfill.js'));
-            iParams.append('style', resolveURL('../css/pagedjs/interface.css'));
-        }
-        this._iframe.src = `${this.getEndpoint()}/api/document/${encodeURIComponent(doc.path)}/print?${iParams.toString()}`;
-    }
-
-    render() {
-        return html`
-            <iframe title="Preview" src="about:blank"></iframe>
-        `;
-    }
-
-    _getCustomStyles() {
-        let customStyles = [];
-        if (this.styles) {
-            customStyles = this.styles.split(/\s*,\s*/);
-        }
-        return customStyles;
+    params.set('base', `${this.getEndpoint()}/${doc.getCollection()}/`);
+    this._getCustomStyles().forEach(href => params.append('style', href));
+    const urlParams = params.toString();
+    this.url = `${this.getEndpoint()}/api/document/${encodeURIComponent(
+      doc.path,
+    )}/print?${urlParams}`;
+
+    const iParams = new URLSearchParams(urlParams);
+    iParams.set('wc', 'true');
+    if (!this.raw) {
+      iParams.set('script', resolveURL('../lib/paged.polyfill.js'));
+      iParams.append('style', resolveURL('../css/pagedjs/interface.css'));
     }
-
-    static get styles() {
-        return css`
-            :host {
-                display: block;
-            }
-
-            iframe {
-                border: 0;
-                width: 100%;
-                height: 100%;
-                opacity: 1;
-                transition: opacity 0.5s ease-out 0.5s;
-            }
-
-            .hidden {
-                opacity: 0;
-                transition: opacity 0.5s ease-out;
-            }
-
-        `;
+    this._iframe.src = `${this.getEndpoint()}/api/document/${encodeURIComponent(
+      doc.path,
+    )}/print?${iParams.toString()}`;
+  }
+
+  render() {
+    return html` <iframe title="Preview" src="about:blank"></iframe> `;
+  }
+
+  _getCustomStyles() {
+    let customStyles = [];
+    if (this.styles) {
+      customStyles = this.styles.split(/\s*,\s*/);
     }
+    return customStyles;
+  }
+
+  static get styles() {
+    return css`
+      :host {
+        display: block;
+      }
+
+      iframe {
+        border: 0;
+        width: 100%;
+        height: 100%;
+        opacity: 1;
+        transition: opacity 0.5s ease-out 0.5s;
+      }
+
+      .hidden {
+        opacity: 0;
+        transition: opacity 0.5s ease-out;
+      }
+    `;
+  }
 }
-customElements.define('pb-print-preview', PbPrintPreview);
+customElements.define('pb-print-preview', PbPrintPreview);

package/src/pb-progress.js

@@ -1,63 +1,63 @@
-import { LitElement, html, css } from 'lit-element';
+import { LitElement, html, css } from 'lit';
 import { pbMixin } from './pb-mixin.js';
-import '@polymer/paper-progress';
+import { themableMixin } from './theming.js';
 
 /**
  * A progress bar which becomes active when signal `pb-start-update` is
  * being sent and is deactivated on `pb-end-update`.
+ * 
+ * Uses a native `<progress>` element.
  *
  * @fires pb-start-update - When received, activates the progress bar
  * @fires pb-end-update - When received, disables the progress bar
  
  */
-export class PbProgress extends pbMixin(LitElement) {
-    static get properties() {
-        return {
-            ...super.properties,
-            _disabled: {
-                type: Boolean
-            }
-        };
-    }
-
-    constructor() {
-        super();
-        this._disabled = true;
-    }
-
-    connectedCallback() {
-        super.connectedCallback();
-
-        this.subscribeTo('pb-start-update', this._startUpdate.bind(this));
-        this.subscribeTo('pb-end-update', this._endUpdate.bind(this));
-    }
-
-    render() {
-        this.style.visibility = this._disabled ? 'hidden' : 'visible';
-        return html`
-            <paper-progress id="progress" indeterminate ?disabled="${this._disabled}"></paper-progress>
-        `;
-    }
-
-    static get styles() {
-        return css`
-            :host {
-                display: block;
-                visibility: hidden;
-            }
-
-            paper-progress {
-                width: 100%;
-            }
-        `;
-    }
-
-    _startUpdate() {
-        this._disabled = false;
-    }
-
-    _endUpdate() {
-        this._disabled = true;
-    }
+export class PbProgress extends themableMixin(pbMixin(LitElement)) {
+  static get properties() {
+    return {
+      ...super.properties,
+      _disabled: {
+        type: Boolean,
+      },
+    };
+  }
+
+  constructor() {
+    super();
+    this._disabled = true;
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+
+    this.subscribeTo('pb-start-update', this._startUpdate.bind(this));
+    this.subscribeTo('pb-end-update', this._endUpdate.bind(this));
+  }
+
+  render() {
+    this.style.visibility = this._disabled ? 'hidden' : 'visible';
+    return html` <progress id="progress" indeterminate ?disabled="${this._disabled}"></progress> `;
+  }
+
+  static get styles() {
+    return css`
+      :host {
+        display: block;
+        visibility: hidden;
+      }
+
+      progress {
+        width: 100%;
+      }
+    `;
+  }
+
+  _startUpdate() {
+    this._disabled = false;
+  }
+
+  _endUpdate() {
+    this._disabled = true;
+  }
 }
-customElements.define('pb-progress', PbProgress);
+customElements.define('pb-progress', PbProgress);

package/src/pb-repeat.js

@@ -1,8 +1,5 @@
-import { LitElement, html } from 'lit-element';
+import { LitElement, html } from 'lit';
 import { pbMixin } from './pb-mixin.js';
-import { registry } from "./urls.js";
-import '@polymer/iron-icons';
-import '@polymer/paper-icon-button';
 
 /**
  * Simple component to create repeatable form elements. It expects
@@ -10,128 +7,164 @@ import '@polymer/paper-icon-button';
  * the template will be copied. All elements with a `name` attribute within the
  * copied template will be renamed to have an `[idx]` suffix denoting their position
  * within the instance list.
- * 
+ *
  * The element stamps the instances into light DOM, so a form wrapping around it will see
  * the form controls. One can therefore use a normal form submit.
  *
  */
 export class PbRepeat extends pbMixin(LitElement) {
-    static get properties() {
-        return {
-            ...super.properties,
-            /**
-             * The initial number of (empty) instances to be shown
-             * (1 by default).
-             */
-            initial: {
-                type: Number
-            },
-            _instances: {
-                type: Array
-            }
-        };
-    }
-
-    constructor() {
-        super();
-        this.initial = 1;
-        this._instances = [];
-    }
+  static get properties() {
+    return {
+      ...super.properties,
+      /**
+       * The initial number of (empty) instances to be shown
+       * (1 by default).
+       */
+      initial: {
+        type: Number,
+      },
+      _instances: {
+        type: Array,
+      },
+    };
+  }
 
-    connectedCallback() {
-        super.connectedCallback();
+  constructor() {
+    super();
+    this.initial = 1;
+    this._instances = [];
+  }
 
-        this.template = this.querySelector('template');
+  connectedCallback() {
+    super.connectedCallback();
+    const tpl = this.querySelector('template');
+    if (!tpl) return; // nothing to render yet; safe for smoke tests
+    this._add();
+  }
 
-        const params = registry.state;
-        this._computeInitial(params);
-        if (this._instances.length === 0) {
-            for (let i = 0; i < this.initial; i++) {
-                this._add(params);
-            }
-        }
+  _computeInitial(params) {
+    const sortedParams = Object.keys(params)
+      .filter(key => /\[\d+\]$/.test(key))
+      .sort();
+    if (sortedParams.length > 0) {
+      const max = sortedParams[sortedParams.length - 1].replace(/^.*\[(\d+)\]$/, '$1');
+      this.initial = parseInt(max, 10);
     }
+  }
 
-    _computeInitial(params) {
-        const sortedParams =
-            Object.keys(params)
-                .filter((key) => /\[\d+\]$/.test(key))
-                .sort();
-        if (sortedParams.length > 0) {
-            const max = sortedParams[sortedParams.length - 1].replace(/^.*\[(\d+)\]$/, '$1');
-            this.initial = parseInt(max, 10);
-        }
+  setData(params) {
+    this._instances = [];
+    this._computeInitial(params);
+    for (let i = 0; i < this.initial; i++) {
+      this._add(params);
     }
+    this.requestUpdate();
+  }
 
-    setData(params) {
-        this._instances = [];
-        this._computeInitial(params);
-        for (let i = 0; i < this.initial; i++) {
-            this._add(params);
+  add() {
+    this._add();
+    this.requestUpdate();
+  }
+
+  _add(params) {
+    const tpl = this.querySelector('template');
+    if (!tpl || !tpl.content) return;
+    const idx = this._instances.length + 1;
+    const clone = document.importNode(tpl.content, true);
+    const wrapper = document.createElement('div');
+    wrapper.appendChild(clone);
+    wrapper.querySelectorAll('[name]').forEach(input => {
+      // during inicialization of the default first instance
+      // name property is not available (defined),
+      // but can be reached as the attribute value
+      // see https://github.com/eeditiones/tei-publisher-components/issues/29
+      const name =
+        input.name === undefined
+          ? `${input.attributes.getNamedItem('name').nodeValue}[${idx}]`
+          : `${input.name}[${idx}]`;
+      if (params && params[name]) {
+        if (input.type === 'checkbox' || input.type === 'radio') {
+          input.checked = params[name] === input.value;
+        } else {
+          input.value = params[name];
         }
-        this.requestUpdate();
-    }
+      }
+      input.name = name;
+    });
+    this._instances.push(wrapper);
+  }
 
-    add() {
-        this._add();
-        this.requestUpdate();
-    }
+  _renumber() {
+    this._instances.forEach((instance, idx) => {
+      instance.querySelectorAll('[name]').forEach(input => {
+        const name = input.name.replace(/^(.*)\[\d+\]$/, '$1');
+        input.name = `${name}[${idx + 1}]`;
+      });
+    });
+  }
 
-    _add(params) {
-        const idx = this._instances.length + 1;
-        const clone = document.importNode(this.template.content, true);
-        const wrapper = document.createElement('div');
-        wrapper.appendChild(clone);
-        wrapper.querySelectorAll('[name]').forEach(input => {
-            //during inicialization of the default first instance
-            // name property is not available (defined), 
-            // but can be reached as the attribute value
-            // see https://github.com/eeditiones/tei-publisher-components/issues/29
-            const name = (input.name === undefined) ? `${input.attributes.getNamedItem("name").nodeValue}[${idx}]` : `${input.name}[${idx}]`;
-            if (params && params[name]) {
-                if (input.type === 'checkbox' || input.type === 'radio') {
-                    input.checked = params[name] === input.value;
-                } else {
-                    input.value = params[name];
-                }
-            }
-            input.name = name;
-        });
-        this._instances.push(wrapper);
-    }
+  delete(idx) {
+    this._instances.splice(idx, 1);
+    this._renumber();
+    this.requestUpdate();
+  }
 
-    _renumber() {
-        this._instances.forEach((instance, idx) => {
-            instance.querySelectorAll('[name]').forEach(input => {
-                const name = input.name.replace(/^(.*)\[\d+\]$/, '$1');
-                input.name = `${name}[${idx + 1}]`;
-            });
-        });
-    }
+  render() {
+    return html`
+      <div class="instances">${this._instances.map(this.renderInstance.bind(this))}</div>
+      <button
+        class="pb-button pb-button--icon"
+        type="button"
+        aria-label="Add instance"
+        title="Add instance"
+        @click="${this.add}"
+      >
+        ${this._renderAddIcon()}
+      </button>
+    `;
+  }
 
-    delete(idx) {
-        this._instances.splice(idx, 1);
-        this._renumber();
-        this.requestUpdate();
-    }
+  renderInstance(instance, idx) {
+    return html` <div class="instance">
+      ${instance}
+      <button
+        class="pb-button pb-button--icon"
+        type="button"
+        aria-label="Delete instance"
+        title="Delete instance"
+        @click="${() => this.delete(idx)}"
+      >
+        ${this._renderDeleteIcon()}
+      </button>
+    </div>`;
+  }
 
-    render() {
-        return html`
-            <div class="instances">${this._instances.map(this.renderInstance.bind(this))}</div>
-            <paper-icon-button icon="add" @click="${this.add}"></paper-icon-button>
-        `;
-    }
+  _renderAddIcon() {
+    return html`<svg
+      width="20"
+      height="20"
+      viewBox="0 0 24 24"
+      aria-hidden="true"
+      focusable="false"
+    >
+      <path d="M13 11V5h-2v6H5v2h6v6h2v-6h6v-2h-6z"></path>
+    </svg>`;
+  }
 
-    renderInstance(instance, idx) {
-        return html`
-            <div class="instance">
-                ${instance}
-                <paper-icon-button icon="delete" @click="${() => this.delete(idx)}"></paper-icon-button>
-            </div>`;
-    }
+  _renderDeleteIcon() {
+    return html`<svg
+      width="20"
+      height="20"
+      viewBox="0 0 24 24"
+      aria-hidden="true"
+      focusable="false"
+    >
+      <path d="M16 9v10H8V9h8m-1.5-6h-5l-1 1H5v2h14V4h-3.5l-1-1z"></path>
+    </svg>`;
+  }
 
-    createRenderRoot() {
-        return this;
-    }
+  createRenderRoot() {
+    return this;
+  }
 }
-customElements.define('pb-repeat', PbRepeat);
+customElements.define('pb-repeat', PbRepeat);