@teipublisher/pb-components 2.25.4 → 2.26.0-next-3.2

package/pb-elements.json

@@ -3254,6 +3254,143 @@
         }
       ]
     },
+    {
+      "name": "pb-dialog",
+      "path": "./src/pb-dialog.js",
+      "description": "A simple dialog component using the HTML5 <dialog> element",
+      "attributes": [
+        {
+          "name": "open",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "modal",
+          "type": "boolean",
+          "default": "true"
+        },
+        {
+          "name": "title",
+          "type": "string"
+        },
+        {
+          "name": "message",
+          "type": "string"
+        },
+        {
+          "name": "subscribe",
+          "description": "The name of the channel to subscribe to. Only events on a channel corresponding\nto this property are listened to.",
+          "type": "string"
+        },
+        {
+          "name": "subscribe-config",
+          "description": "Configuration object to define a channel/event mapping. Every property\nin the object is interpreted as the name of a channel and its value should\nbe an array of event names to listen to.",
+          "type": "object"
+        },
+        {
+          "name": "emit",
+          "description": "The name of the channel to send events to.",
+          "type": "string"
+        },
+        {
+          "name": "emit-config",
+          "description": "Configuration object to define a channel/event mapping. Every property\nin the object is interpreted as the name of a channel and its value should\nbe an array of event names to be dispatched.",
+          "type": "object"
+        },
+        {
+          "name": "wait-for",
+          "description": "A selector pointing to other components this component depends on.\nWhen method `wait` is called, it will wait until all referenced\ncomponents signal with a `pb-ready` event that they are ready and listening\nto events.",
+          "type": "string"
+        },
+        {
+          "name": "disabled",
+          "description": "Common property to disable the functionality associated with a component.\n`pb-highlight` and `pb-popover` react to this.",
+          "type": "boolean",
+          "default": "false"
+        }
+      ],
+      "properties": [
+        {
+          "name": "open",
+          "attribute": "open",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "modal",
+          "attribute": "modal",
+          "type": "boolean",
+          "default": "true"
+        },
+        {
+          "name": "title",
+          "attribute": "title",
+          "type": "string"
+        },
+        {
+          "name": "message",
+          "attribute": "message",
+          "type": "string"
+        },
+        {
+          "name": "subscribe",
+          "attribute": "subscribe",
+          "description": "The name of the channel to subscribe to. Only events on a channel corresponding\nto this property are listened to.",
+          "type": "string"
+        },
+        {
+          "name": "subscribeConfig",
+          "attribute": "subscribe-config",
+          "description": "Configuration object to define a channel/event mapping. Every property\nin the object is interpreted as the name of a channel and its value should\nbe an array of event names to listen to.",
+          "type": "object"
+        },
+        {
+          "name": "emit",
+          "attribute": "emit",
+          "description": "The name of the channel to send events to.",
+          "type": "string"
+        },
+        {
+          "name": "emitConfig",
+          "attribute": "emit-config",
+          "description": "Configuration object to define a channel/event mapping. Every property\nin the object is interpreted as the name of a channel and its value should\nbe an array of event names to be dispatched.",
+          "type": "object"
+        },
+        {
+          "name": "waitFor",
+          "attribute": "wait-for",
+          "description": "A selector pointing to other components this component depends on.\nWhen method `wait` is called, it will wait until all referenced\ncomponents signal with a `pb-ready` event that they are ready and listening\nto events.",
+          "type": "string"
+        },
+        {
+          "name": "disabled",
+          "attribute": "disabled",
+          "description": "Common property to disable the functionality associated with a component.\n`pb-highlight` and `pb-popover` react to this.",
+          "type": "boolean",
+          "default": "false"
+        }
+      ],
+      "events": [
+        {
+          "name": "pb-dialog-opened",
+          "description": "Fired when the dialog is opened"
+        },
+        {
+          "name": "pb-dialog-closed",
+          "description": "Fired when the dialog is closed"
+        }
+      ],
+      "slots": [
+        {
+          "name": "",
+          "description": "Content of the dialog"
+        },
+        {
+          "name": "title",
+          "description": "Title of the dialog"
+        }
+      ]
+    },
     {
       "name": "pb-document",
       "path": "./src/pb-document.js",
@@ -5381,11 +5518,6 @@
           "name": "selected",
           "type": "string"
         },
-        {
-          "name": "nolabel",
-          "description": "suppresses the label",
-          "type": "boolean"
-        },
         {
           "name": "label",
           "description": "The label for a language in the dropdown",
@@ -5430,12 +5562,6 @@
           "attribute": "selected",
           "type": "string"
         },
-        {
-          "name": "nolabel",
-          "attribute": "nolabel",
-          "description": "suppresses the label",
-          "type": "boolean"
-        },
         {
           "name": "label",
           "attribute": "label",
@@ -5492,6 +5618,10 @@
         }
       ],
       "slots": [
+        {
+          "name": "select",
+          "description": "Optional select element to use for language selection. If not provided, a default one will be created."
+        },
         {
           "name": "",
           "description": "unnamed default slot for dropdown menu options"
@@ -5501,10 +5631,6 @@
         {
           "name": "--pb-lang-input-color",
           "description": "Color of the text in the language field"
-        },
-        {
-          "name": "--pb-lang-label-color",
-          "description": "Color of the language field label"
         }
       ]
     },

package/src/pb-components.js

@@ -61,6 +61,7 @@ import './pb-split-list.js';
 import './pb-timeline.js';
 import './pb-combo-box.js';
 import './pb-print-preview.js';
+import './pb-dialog.js';
 
 import '@polymer/iron-icons/editor-icons';
 import '@polymer/iron-icons/social-icons';

package/src/pb-dialog.js

@@ -0,0 +1,83 @@
+import { LitElement, css, html } from 'lit-element';
+import { pbMixin } from './pb-mixin';
+import { unsafeHTML } from 'lit-html/directives/unsafe-html';
+import { themableMixin } from './theming.js';
+
+/**
+ * A simple dialog component using the HTML5 <dialog> element
+ *
+ * @slot - Content of the dialog
+ * @slot title - Title of the dialog
+ * @fires pb-dialog-opened - Fired when the dialog is opened
+ * @fires pb-dialog-closed - Fired when the dialog is closed
+ */
+export class PbDialog extends themableMixin(pbMixin(LitElement)) {
+
+    static get properties() {
+        return {
+            ...super.properties,
+            open: { type: Boolean, reflect: true },
+            modal: { type: Boolean, reflect: true },
+            title: { type: String, reflect: true },
+            message: { type: String, reflect: true }
+        };
+    }
+
+    constructor() {
+        super();
+        this.open = false;
+        this.modal = true;
+        this._escListener = this._onEsc.bind(this);
+        this.title = null;
+        this.message = null;
+    }
+
+    _onEsc(e) {
+        if (e.key === 'Escape' && this.open) {
+            this.closeDialog();
+        }
+    }
+
+    openDialog() {
+        if (!this.open) {
+            if (this.modal) {
+                this._dialog.showModal();
+            } else {
+                this._dialog.show();
+            }
+            this.dispatchEvent(new CustomEvent('pb-dialog-opened', { bubbles: true, composed: true }));
+            this.open = true;
+        }
+    }
+
+    closeDialog() {
+        if (this.open) {
+            this._dialog.close();
+            this.dispatchEvent(new CustomEvent('pb-dialog-closed', { bubbles: true, composed: true }));
+            this.open = false;
+        }
+    }
+
+    render() {
+        return html`
+            <dialog @click="${(e) => e.target === this._dialog && this.modal && this.closeDialog()}">
+                <article>
+                    <header>
+                        ${this.title ? unsafeHTML(this.title) : html`<slot name="title"></slot>`}
+                        <button rel="prev" aria-label="Close" @click="${this.closeDialog}">&times;</button>
+                    </header>
+                    ${this.message ? unsafeHTML(this.message) : html`<slot></slot>`}
+                    <footer>
+                        <slot name="footer"></slot>
+                    </footer>
+                </article>
+            </dialog>
+        `;
+    }
+    
+    firstUpdated() {
+        this._dialog = this.renderRoot.querySelector('dialog');
+    }
+}
+
+customElements.define('pb-dialog', PbDialog);

package/src/pb-download.js

@@ -200,8 +200,9 @@ export class PbDownload extends pbMixin(LitElement) {
         if (this.dialog) {
             const dialog = document.getElementById(this.dialog);
 
-            //todo: this will error when dialog is not found or defined on element.
-            dialog.open();
+            if (dialog) {
+                dialog.openDialog();
+            }
 
             const token = this._token;
             const downloadCheck = window.setInterval(() => {
@@ -209,7 +210,9 @@ export class PbDownload extends pbMixin(LitElement) {
                 if (cookieValue === token) {
                     window.clearInterval(downloadCheck);
                     Cookies.remove("simple.token");
-                    dialog.close();
+                    if (dialog) {
+                        dialog.closeDialog();
+                    }
                 }
             });
         }

package/src/pb-lang.js

@@ -1,19 +1,35 @@
 import { LitElement, html, css } from 'lit-element';
-import '@polymer/paper-dropdown-menu/paper-dropdown-menu.js';
-import '@polymer/paper-listbox';
 import { pbMixin, waitOnce } from './pb-mixin.js';
 import { translate } from "./pb-i18n.js";
+import { themableMixin } from './theming.js';
 
 /**
  * A dropdown for switching the interface language.
  *
+ * @slot select - Optional select element to use for language selection. If not provided, a default one will be created.
  * @slot - unnamed default slot for dropdown menu options
  * @fires pb-i18n-language - Sends selected language
  * @fires pb-i18n-update - When received, sets the selected language to the one received from the event
  * @cssprop --pb-lang-input-color - Color of the text in the language field
- * @cssprop --pb-lang-label-color - Color of the language field label
  */
-export class PbLang extends pbMixin(LitElement) {
+export class PbLang extends themableMixin(pbMixin(LitElement)) {
+    static get styles() {
+        return css`
+            :host {
+                display: inline-block;
+            }
+            ::slotted(*) {
+                display: none;
+            }
+            ::slotted(select) {
+                display: inline-block;
+            }
+            select {
+                color: var(--pb-lang-input-color, inherit);
+            }
+        `;
+    }
+
     static get properties() {
         return {
             ...super.properties,
@@ -25,12 +41,6 @@ export class PbLang extends pbMixin(LitElement) {
             },
             selected: {
                 type: String
-            },
-            /**
-             * suppresses the label
-             */
-            nolabel:{
-                type:Boolean
             }
         };
     }
@@ -45,45 +55,50 @@ export class PbLang extends pbMixin(LitElement) {
 
         this.subscribeTo('pb-i18n-update', (ev) => {
             this.selected = ev.detail.language.replace(/^([^-]+).*$/, '$1');
+            this._syncOptions();
         }, []);
         waitOnce('pb-i18n-update', (options) => {
             this.selected = options.language.replace(/^([^-]+).*$/, '$1');
+            this._syncOptions();
         });
     }
 
     render() {
         return html`
-            ${this.nolabel?
-                html`
-                    <paper-dropdown-menu>
-                        <paper-listbox id="menu" slot="dropdown-content" class="dropdown-content" selected="${this.selected}"
-                            attr-for-selected="value" @selected-item-changed="${this._changed}">
-                            <slot></slot>
-                        </paper-listbox>
-                    </paper-dropdown-menu>`:
-                html`
-                    <paper-dropdown-menu label="${translate(this.label)}">
-                        <paper-listbox id="menu" slot="dropdown-content" class="dropdown-content" selected="${this.selected}"
-                            attr-for-selected="value" @selected-item-changed="${this._changed}">
-                            <slot></slot>
-                        </paper-listbox>
-                    </paper-dropdown-menu>`
-            }
+            <select name="select" @change="${this._changed}" aria-label="${translate(this.label)}" title="${translate(this.label)}"></select>
+            <slot @slotchange="${this._syncOptions}"></slot>
         `;
     }
 
-    static get styles() {
-        return css`
-            :host {
-                display: block;
-                --paper-input-container-input-color: var(--pb-lang-input-color, black);
-                --paper-input-container-color: var(--pb-lang-label-color, --paper-grey-100);
-            }
-        `;
+    _syncOptions() {
+        // First try to find select in light DOM (slotted)
+        let select = this.querySelector('select');
+        // If not found, look in shadow DOM (default)
+        if (!select) {
+            select = this.shadowRoot.querySelector('select');
+        }
+        if (!select) return;
+
+        // Clear existing options
+        select.innerHTML = '';
+
+        // Get all option elements from the light DOM
+        const options = Array.from(this.querySelectorAll('option, paper-item'));
+        options.forEach(option => {
+            const newOption = document.createElement('option');
+            newOption.value = option.value || option.getAttribute('value');
+            newOption.textContent = option.textContent;
+            select.appendChild(newOption);
+        });
+
+        // Set the selected value
+        if (this.selected) {
+            select.value = this.selected;
+        }
     }
 
-    _changed() {
-        const lang = this.shadowRoot.getElementById('menu').selected;
+    _changed(e) {
+        const lang = e.target.value;
         if (lang !== this.selected) {
             console.log('<pb-lang> Language changed to %s', lang);
             this.emitTo('pb-i18n-language', { 'language': lang });

package/src/pb-login.js

@@ -3,12 +3,9 @@ import { pbMixin, waitOnce } from './pb-mixin.js';
 import { translate } from "./pb-i18n.js";
 import { registry } from "./urls.js";
 import '@polymer/iron-ajax';
-import '@polymer/paper-dialog';
-import '@polymer/paper-dialog-scrollable';
-import '@polymer/paper-input/paper-input.js';
-import '@polymer/paper-button';
-import '@polymer/iron-icons';
 import { minVersion } from './utils.js';
+import './pb-dialog.js';
+import { themableMixin } from './theming.js';
 
 /**
  * Handles login/logout. Shows a link which opens a login dialog if clicked.
@@ -20,7 +17,7 @@ import { minVersion } from './utils.js';
  * @csspart message-invalid - Block displayed if login is invalid
  * @csspart group-invalid - Text displayed if login is invalid concerning group
  */
-export class PbLogin extends pbMixin(LitElement) {
+export class PbLogin extends themableMixin(pbMixin(LitElement)) {
     static get properties() {
         return {
             ...super.properties,
@@ -107,7 +104,12 @@ export class PbLogin extends pbMixin(LitElement) {
     firstUpdated() {
         super.firstUpdated();
         this._checkLogin = this.shadowRoot.getElementById('checkLogin');
-        this._loginDialog = this.shadowRoot.getElementById('loginDialog');
+        this._loginDialog = this.shadowRoot.querySelector('pb-dialog');
+
+        this.renderRoot.querySelector('form').addEventListener('submit', (e) => {
+            e.preventDefault();
+            this._confirmLogin();
+        });
 
         window.addEventListener('blur', () => {
             this._hasFocus = false;
@@ -141,34 +143,44 @@ export class PbLogin extends pbMixin(LitElement) {
 
     render() {
         return html`
-            <a href="#" @click="${this._show}" role="button" title="${this.user ? this.user : this.loginLabel}">
+            <a href="#" @click="${this._show}" title="${this.user ? this.user : this.loginLabel}" part="trigger">
                 ${
-            this.loggedIn ?
-                html`<iron-icon icon="${this.logoutIcon}"></iron-icon> <span class="label">${translate(this.logoutLabel, { user: this.user })}</span>` :
-                html`<iron-icon icon="${this.loginIcon}"></iron-icon> <span class="label">${translate(this.loginLabel)}</span>`
-            }
+                this.loggedIn ?
+                html`
+                    <slot name="icon-login">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-person" viewBox="0 0 16 16" part="icon">
+                            <path d="M8 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6m2-3a2 2 0 1 1-4 0 2 2 0 0 1 4 0m4 8c0 1-1 1-1 1H3s-1 0-1-1 1-4 6-4 6 3 6 4m-1-.004c-.001-.246-.154-.986-.832-1.664C11.516 10.68 10.289 10 8 10s-3.516.68-4.168 1.332c-.678.678-.83 1.418-.832 1.664z"/>
+                        </svg>
+                    </slot>
+                ` :
+                html`
+                    <slot name="icon-logout" part="icon">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-person-check" viewBox="0 0 16 16" part="icon">
+                            <path d="M12.5 16a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7m1.679-4.493-1.335 2.226a.75.75 0 0 1-1.174.144l-.774-.773a.5.5 0 0 1 .708-.708l.547.548 1.17-1.951a.5.5 0 1 1 .858.514M11 5a3 3 0 1 1-6 0 3 3 0 0 1 6 0M8 7a2 2 0 1 0 0-4 2 2 0 0 0 0 4"/>
+                            <path d="M8.256 14a4.5 4.5 0 0 1-.229-1.004H3c.001-.246.154-.986.832-1.664C4.484 10.68 5.711 10 8 10q.39 0 .74.025c.226-.341.496-.65.804-.918Q8.844 9.002 8 9c-5 0-6 3-6 4s1 1 1 1z"/>
+                        </svg>
+                    </slot>
+                `
+                }
+                <span class="label" part="label">${translate(this.loggedIn ? this.logoutLabel : this.loginLabel, { user: this.user })}</span>
             </a>
 
-            <paper-dialog id="loginDialog" ?modal="${this.auto}">
-                <h2>${translate('login.login')}</h2>
-                <paper-dialog-scrollable>
-                    <form action="login">
-                        <paper-input id="user" name="user" label="${translate('login.user')}" value="${this.user}" autofocus></paper-input>
-                        <paper-input id="password" name="password" label="${translate('login.password')}" type="password"></paper-input>
-                        <input id="logout" type="hidden" name="logout"></input>
-                    </form>
+            <form action="login">
+                <pb-dialog ?modal="${this.auto}">
+                    <div slot="title">${translate('login.login')}</div>
+                    <label>
+                        ${ translate('login.user') }
+                        <input name="user" value="${this.user}" autofocus placeholder="${translate('login.user')}"></input>
+                    </label>
+                    <label>
+                        ${ translate('login.password') }
+                        <input name="password" type="password" placeholder="${translate('login.password')}"></input>
+                    </label>
                     <slot name="information"></slot>
-                    ${this._invalid ?
-                html`
-                            <p id="message" part="message-invalid">${translate('login.invalid')}<span part="group-invalid">${this.group ? html` (${translate('login.requiredGroup', { group: this.group })})` : null}</span>.
-                            </p>
-                        `: null
-            }
-                </paper-dialog-scrollable>
-                <div class="buttons">
-                    <paper-button autofocus @click="${this._confirmLogin}">${translate(this.loginLabel)}</paper-button>
-                </div>
-            </paper-dialog>
+                    ${ this._invalid ? html`<p id="message" part="message-invalid">${translate('login.invalid')}<span part="group-invalid">${this.group ? html` (${translate('login.requiredGroup', { group: this.group })})` : null}</span>.</p>` : null }
+                    <button autofocus slot="footer">${translate('login.login')}</button>
+                </pb-dialog>
+            </form>
 
             <iron-ajax id="checkLogin" with-credentials
                 handle-as="json" @response="${this._handleResponse}" @error="${this._handleError}"
@@ -177,38 +189,6 @@ export class PbLogin extends pbMixin(LitElement) {
         `;
     }
 
-    static get styles() {
-        return css`
-            :host {
-                display: block;
-            }
-
-            paper-dialog {
-                min-width: 320px;
-                max-width: 640px;
-                min-height: 128px;
-            }
-
-            paper-dialog h2 {
-                background-color: #607D8B;
-                padding: 16px 8px;
-                margin-top: 0;
-                color: #F0F0F0;
-            }
-
-            a {
-                color: var(--pb-login-link-color, --pb-link-color);
-                text-decoration: none;
-                display: flex;
-                gap:0.5rem;
-            }
-
-            #message {
-                color: var(--paper-red-800);
-            }
-        `;
-    }
-
     _show(ev) {
         ev.preventDefault();
         if (this.loggedIn) {
@@ -217,13 +197,13 @@ export class PbLogin extends pbMixin(LitElement) {
             };
             this._checkLogin.generateRequest();
         } else {
-            this._loginDialog.open();
+            this._loginDialog.openDialog();
         }
     }
 
     _confirmLogin() {
-        this.user = this.shadowRoot.getElementById('user').value;
-        this.password = this.shadowRoot.getElementById('password').value;
+        this.user = this.renderRoot.querySelector('input[name="user"]').value;
+        this.password = this.renderRoot.querySelector('input[name="password"]').value;
         this._checkLogin.body = {
             user: this.user,
             password: this.password
@@ -239,15 +219,15 @@ export class PbLogin extends pbMixin(LitElement) {
             this.user = resp.user;
             this.groups = resp.groups;
             this._invalid = false;
-            this._loginDialog.close();
+            this._loginDialog.closeDialog();
         } else {
             resp.userChanged = this.loggedIn;
             this.loggedIn = false;
             this.password = null;
-            if (this._loginDialog.opened) {
+            if (this._loginDialog.open) {
                 this._invalid = true;
             } else if (this.auto) {
-                this._loginDialog.open();
+                this._loginDialog.openDialog();
             }
         }
         this.emitTo('pb-login', resp);
@@ -270,10 +250,10 @@ export class PbLogin extends pbMixin(LitElement) {
             userChanged: this.loggedIn,
             user: null
         };
-        if (this._loginDialog.opened) {
+        if (this._loginDialog.open) {
             this._invalid = true;
         } else if (this.auto) {
-            this._loginDialog.open();
+            this._loginDialog.openDialog();
         }
 
         registry.currentUser = null;
@@ -309,6 +289,14 @@ export class PbLogin extends pbMixin(LitElement) {
         return true;
     }
 
+    static get styles() {
+        return css`
+            #message {
+                color: var(--pb-login-message-invalid-color, var(--pb-error-color, #f44336));
+            }
+        `;
+    }
+
     /**
      * Fired on successful login.
      *