@teipublisher/pb-components 1.43.0 → 1.43.1

package/src/pb-clipboard.js

@@ -1,75 +1,76 @@
-import { LitElement, html, css } from 'lit-element';
-import { pbMixin } from './pb-mixin.js';
-import { translate } from "./pb-i18n.js";
-import '@polymer/paper-icon-button';
-import '@polymer/iron-icons';
-
-/**
- * A component with a button which copies the contained content to the clipboard.
- * Use for the typical 'quote this content as' hints on a webpage.
- *  
- * @slot content - contains the actual content to copy to the clipboard
- */
-export class PbClipboard extends pbMixin(LitElement) {
-    static get properties() {
-        return {
-            /**
-             * Label to display above the text to be copied
-             */
-            label: {
-                type: String
-            },
-            ...super.properties
-        };
-    }
-
-    constructor() {
-        super();
-        this.label = 'clipboard.label';
-    }
-
-    render() {
-        return html`
-            <h3>${translate(this.label)}</h3>
-            <div>
-                <slot></slot>
-                <paper-icon-button icon="icons:content-copy" @click="${this._copy}"
-                    title="${translate('clipboard.copy')}"></paper-icon-button>
-            </div>
-        `;
-    }
-
-    /**
-     * Copy text content from the <slot> to the clipboard
-     */
-    _copy() {
-        const slot = this.shadowRoot.querySelector('slot');
-        // first import nodes from the slot into a temporary div
-        const content = document.createElement('div');
-        slot.assignedNodes().forEach((node) => {
-            content.appendChild(document.importNode(node, true));
-        });
-        // copy the innerText of the temp div into the clipboard
-        navigator.clipboard.writeText(content.innerText);
-    }
-
-    static get styles() {
-        return css`
-            :host {
-                display: block;
-            }
-            h3 {
-                margin: 0;
-                font-size: .85em;
-                font-weight: normal;
-                color: #3a3a3a;
-            }
-            div {
-                display: flex;
-                align-items: center;
-                padding: 0 16px;
-            }
-        `;
-    }
-}
+import { LitElement, html, css } from 'lit-element';
+import { pbMixin } from './pb-mixin.js';
+import { translate } from "./pb-i18n.js";
+import { themableMixin } from "./theming.js";
+import '@polymer/paper-icon-button';
+import '@polymer/iron-icons';
+
+/**
+ * A component with a button which copies the contained content to the clipboard.
+ * Use for the typical 'quote this content as' hints on a webpage.
+ *  
+ * @slot content - contains the actual content to copy to the clipboard
+ */
+export class PbClipboard extends themableMixin(pbMixin(LitElement)) {
+    static get properties() {
+        return {
+            /**
+             * Label to display above the text to be copied
+             */
+            label: {
+                type: String
+            },
+            ...super.properties
+        };
+    }
+
+    constructor() {
+        super();
+        this.label = 'clipboard.label';
+    }
+
+    render() {
+        return html`
+            <h3>${translate(this.label)}</h3>
+            <div>
+                <slot></slot>
+                <paper-icon-button icon="icons:content-copy" @click="${this._copy}"
+                    title="${translate('clipboard.copy')}"></paper-icon-button>
+            </div>
+        `;
+    }
+
+    /**
+     * Copy text content from the <slot> to the clipboard
+     */
+    _copy() {
+        const slot = this.shadowRoot.querySelector('slot');
+        // first import nodes from the slot into a temporary div
+        const content = document.createElement('div');
+        slot.assignedNodes().forEach((node) => {
+            content.appendChild(document.importNode(node, true));
+        });
+        // copy the innerText of the temp div into the clipboard
+        navigator.clipboard.writeText(content.innerText);
+    }
+
+    static get styles() {
+        return css`
+            :host {
+                display: block;
+            }
+            h3 {
+                margin: 0;
+                font-size: .85em;
+                font-weight: normal;
+                color: #3a3a3a;
+            }
+            div {
+                display: flex;
+                align-items: center;
+                padding: 0 16px;
+            }
+        `;
+    }
+}
 customElements.define('pb-clipboard', PbClipboard);

package/src/pb-collapse.js

@@ -1,183 +1,184 @@
-import { LitElement, html, css } from 'lit-element';
-import { pbMixin } from './pb-mixin.js';
-import '@polymer/iron-icon';
-import '@polymer/iron-icons';
-import '@polymer/iron-collapse';
-
-
-/**
- * A collapsible block: in collapsed state it only shows a header and expands if clicked.
- * The header should go into slot `collapse-trigger`, the content into `collapse-content`.
- * Example:
- * 
- * ```html
- * <pb-collapse>
- *   <div slot="collapse-trigger">
- *       Metadata
- *   </div>
- *   <pb-view slot="collapse-content" src="document1" subscribe="transcription" xpath="//teiHeader"></pb-view>
- * </pb-collapse>
- * ```
- *
- * @slot collapse-trigger - trigger toggling collapsed content on/off
- * @slot collapse-content - content to be collapsed
- * @cssprop [--pb-collapse-icon-padding=0 4px 0 0] - padding in px for the "caret-down" icon left to the collapsible item
- * @fires pb-collapse-open - Fires opening the collapsed section
- */
-export class PbCollapse extends pbMixin(LitElement) {
-    static get properties() {
-        return {
-            ...super.properties,
-            /**
-             * @deprecated
-             * Corresponds to the iron-collapse's horizontal property.
-             */
-            horizontal: {
-                type: Boolean
-            },
-            /**
-             * Corresponds to the iron-collapse's noAnimation property.
-             *
-             */
-            noAnimation: {
-                type: Boolean,
-                attribute: 'no-animation'
-            },
-            /**
-             * Whether currently expanded.
-             *
-             */
-            opened: {
-                type: Boolean
-            },
-            /**
-             * By default, an open collapse is closed if another pb-collapse is expanded on the same event channel.
-             * Set to true to keep multiple pb-collapse open at the same time.
-             */
-            toggles: {
-                type: Boolean
-            },
-            /**
-             * The iron-icon when collapsed. Value must be one of the icons defined by iron-icons
-             */
-            expandIcon: {
-                type: String,
-                attribute: 'expand-icon'
-            },
-            /**
-             * The icon when expanded.
-             */
-            collapseIcon: {
-                type: String,
-                attribute: 'collapse-icon'
-            },
-            /**
-             * Whether to hide the expand/collapse icon.
-             */
-            noIcons: {
-                type: Boolean,
-                attribute: 'no-icons'
-            }
-        };
-    }
-
-    constructor() {
-        super();
-        this.horizontal = false;
-        this.noAnimation = false;
-        this.opened = false;
-        this.expandIcon = 'icons:expand-more';
-        this.collapseIcon = 'icons:expand-less';
-        this.noIcons = false;
-        this.toggles = false;
-    }
-
-    connectedCallback() {
-        super.connectedCallback();
-        this.addEventListener('pb-collapse-open', () => {
-            this.open();
-        });
-        if (this.toggles) {
-            this.subscribeTo('pb-collapse-open', (ev) => {
-                if (!ev.detail || ev.detail._source === this) {
-                    return;
-                }
-                for (const collapse of this.querySelectorAll('pb-collapse')) {
-                    if (collapse === ev.detail._source) {
-                        return;
-                    }
-                }
-                this.close();
-            });
-        }
-    }
-
-    /**
-             * opens the collapsible section
-             */
-    open() {
-        if (this.opened) {
-            return;
-        }
-        this.opened = true;
-
-        this.emitTo('pb-collapse-open', this);
-    }
-
-    /**
-     * closes the collapsible section
-     */
-    close() {
-        if (this.opened) {
-            this.opened = false;
-        }
-    }
-
-    /**
-     * toggles the collapsible state
-     */
-    toggle() {
-        this.opened = !this.opened;
-        if (this.opened) {
-            this.emitTo('pb-collapse-open', this.data);
-        }
-    }
-
-    render() {
-        return html`
-            <div id="trigger" @click="${this.toggle}" class="collapse-trigger">
-                ${
-            !this.noIcons ?
-                html`<iron-icon icon="${this.opened ? this.collapseIcon : this.expandIcon}"></iron-icon>` :
-                null
-            }
-                <slot id="collapseTrigger" name="collapse-trigger"></slot>
-            </div>
-            <iron-collapse id="collapse" horizontal="${this.horizontal}" no-animation="${this.noAnimation}" .opened="${this.opened}">
-                <slot name="collapse-content"></slot>
-            </iron-collapse>
-        `;
-    }
-
-    static get styles() {
-        return css`
-            :host {
-                display: block;
-            }
-
-            #trigger {
-                display: table-row;
-            }
-
-            #trigger iron-icon {
-                display: table-cell;
-                padding: var(--pb-collapse-icon-padding, 0 4px 0 0);
-            }
-
-            slot[name="collapse-trigger"] {
-                display: table-cell;
-            }
-        `;
-    }
-}
+import { LitElement, html, css } from 'lit-element';
+import { pbMixin } from './pb-mixin.js';
+import { themableMixin } from "./theming.js";
+import '@polymer/iron-icon';
+import '@polymer/iron-icons';
+import '@polymer/iron-collapse';
+
+
+/**
+ * A collapsible block: in collapsed state it only shows a header and expands if clicked.
+ * The header should go into slot `collapse-trigger`, the content into `collapse-content`.
+ * Example:
+ * 
+ * ```html
+ * <pb-collapse>
+ *   <div slot="collapse-trigger">
+ *       Metadata
+ *   </div>
+ *   <pb-view slot="collapse-content" src="document1" subscribe="transcription" xpath="//teiHeader"></pb-view>
+ * </pb-collapse>
+ * ```
+ *
+ * @slot collapse-trigger - trigger toggling collapsed content on/off
+ * @slot collapse-content - content to be collapsed
+ * @cssprop [--pb-collapse-icon-padding=0 4px 0 0] - padding in px for the "caret-down" icon left to the collapsible item
+ * @fires pb-collapse-open - Fires opening the collapsed section
+ */
+export class PbCollapse extends themableMixin(pbMixin(LitElement)) {
+    static get properties() {
+        return {
+            ...super.properties,
+            /**
+             * @deprecated
+             * Corresponds to the iron-collapse's horizontal property.
+             */
+            horizontal: {
+                type: Boolean
+            },
+            /**
+             * Corresponds to the iron-collapse's noAnimation property.
+             *
+             */
+            noAnimation: {
+                type: Boolean,
+                attribute: 'no-animation'
+            },
+            /**
+             * Whether currently expanded.
+             *
+             */
+            opened: {
+                type: Boolean
+            },
+            /**
+             * By default, an open collapse is closed if another pb-collapse is expanded on the same event channel.
+             * Set to true to keep multiple pb-collapse open at the same time.
+             */
+            toggles: {
+                type: Boolean
+            },
+            /**
+             * The iron-icon when collapsed. Value must be one of the icons defined by iron-icons
+             */
+            expandIcon: {
+                type: String,
+                attribute: 'expand-icon'
+            },
+            /**
+             * The icon when expanded.
+             */
+            collapseIcon: {
+                type: String,
+                attribute: 'collapse-icon'
+            },
+            /**
+             * Whether to hide the expand/collapse icon.
+             */
+            noIcons: {
+                type: Boolean,
+                attribute: 'no-icons'
+            }
+        };
+    }
+
+    constructor() {
+        super();
+        this.horizontal = false;
+        this.noAnimation = false;
+        this.opened = false;
+        this.expandIcon = 'icons:expand-more';
+        this.collapseIcon = 'icons:expand-less';
+        this.noIcons = false;
+        this.toggles = false;
+    }
+
+    connectedCallback() {
+        super.connectedCallback();
+        this.addEventListener('pb-collapse-open', () => {
+            this.open();
+        });
+        if (this.toggles) {
+            this.subscribeTo('pb-collapse-open', (ev) => {
+                if (!ev.detail || ev.detail._source === this) {
+                    return;
+                }
+                for (const collapse of this.querySelectorAll('pb-collapse')) {
+                    if (collapse === ev.detail._source) {
+                        return;
+                    }
+                }
+                this.close();
+            });
+        }
+    }
+
+    /**
+             * opens the collapsible section
+             */
+    open() {
+        if (this.opened) {
+            return;
+        }
+        this.opened = true;
+
+        this.emitTo('pb-collapse-open', this);
+    }
+
+    /**
+     * closes the collapsible section
+     */
+    close() {
+        if (this.opened) {
+            this.opened = false;
+        }
+    }
+
+    /**
+     * toggles the collapsible state
+     */
+    toggle() {
+        this.opened = !this.opened;
+        if (this.opened) {
+            this.emitTo('pb-collapse-open', this.data);
+        }
+    }
+
+    render() {
+        return html`
+            <div id="trigger" @click="${this.toggle}" class="collapse-trigger">
+                ${
+            !this.noIcons ?
+                html`<iron-icon icon="${this.opened ? this.collapseIcon : this.expandIcon}"></iron-icon>` :
+                null
+            }
+                <slot id="collapseTrigger" name="collapse-trigger"></slot>
+            </div>
+            <iron-collapse id="collapse" horizontal="${this.horizontal}" no-animation="${this.noAnimation}" .opened="${this.opened}">
+                <slot name="collapse-content"></slot>
+            </iron-collapse>
+        `;
+    }
+
+    static get styles() {
+        return css`
+            :host {
+                display: block;
+            }
+
+            #trigger {
+                display: table-row;
+            }
+
+            #trigger iron-icon {
+                display: table-cell;
+                padding: var(--pb-collapse-icon-padding, 0 4px 0 0);
+            }
+
+            slot[name="collapse-trigger"] {
+                display: table-cell;
+            }
+        `;
+    }
+}
 customElements.define('pb-collapse', PbCollapse);

package/src/pb-page.js

@@ -5,7 +5,7 @@ import XHR from 'i18next-xhr-backend';
 import Backend from 'i18next-chained-backend';
 import { pbMixin, clearPageEvents } from './pb-mixin.js';
 import { resolveURL } from './utils.js';
-import { loadStylesheet } from "./theming.js";
+import { loadStylesheets } from "./theming.js";
 import { initTranslation } from "./pb-i18n.js";
 import { typesetMath } from "./pb-formula.js";
 
@@ -196,11 +196,14 @@ export class PbPage extends pbMixin(LitElement) {
             this.apiVersion = apiVersion;
         }
 
+        const stylesheetURLs = [
+            resolveURL('../css/components.css')
+        ];
         if (this.theme) {
-            const url = this.toAbsoluteURL(this.theme, this.endpoint);
-            console.log('<pb-page> Loading component theme stylesheet from %s', url);
-            this._themeSheet = await loadStylesheet(url);
+            stylesheetURLs.push(this.toAbsoluteURL(this.theme, this.endpoint));
         }
+        console.log('<pb-page> Loading component theme stylesheets from %s', stylesheetURLs.join(', '));
+        this._themeSheet = await loadStylesheets(stylesheetURLs);
 
         // try to figure out what version of TEI Publisher the server is running
         if (!this.apiVersion) {

package/src/pb-table-grid.js

@@ -2,7 +2,7 @@ import { LitElement, html, css } from 'lit-element';
 import { Grid } from "gridjs";
 import { pbMixin } from './pb-mixin.js';
 import { resolveURL } from './utils.js';
-import { loadStylesheet, importStyles } from "./theming.js";
+import { loadStylesheets, importStyles } from "./theming.js";
 import '@polymer/paper-input/paper-input';
 import '@polymer/iron-icons';
 import '@polymer/iron-form';
@@ -114,7 +114,7 @@ export class PbTableGrid extends pbMixin(LitElement) {
             }
         }
 
-        const gridjsTheme = await loadStylesheet(`${resolveURL(this.cssPath)}/mermaid.min.css`);
+        const gridjsTheme = await loadStylesheets([`${resolveURL(this.cssPath)}/mermaid.min.css`]);
         const theme = importStyles(this);
         const sheets = [...this.shadowRoot.adoptedStyleSheets, gridjsTheme];
         if (theme) {