@teipublisher/pb-components 2.25.3 → 2.26.0

package/dist/pb-elements.json

@@ -3254,6 +3254,125 @@
         }
       ]
     },
+    {
+      "name": "pb-dialog",
+      "path": "./src/pb-dialog.js",
+      "description": "A simple dialog component using the HTML5 <dialog> element (no shadow DOM).",
+      "attributes": [
+        {
+          "name": "open",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "modal",
+          "type": "boolean",
+          "default": "true"
+        },
+        {
+          "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": "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",
@@ -5494,17 +5613,7 @@
       "slots": [
         {
           "name": "",
-          "description": "unnamed default slot for dropdown menu options"
-        }
-      ],
-      "cssProperties": [
-        {
-          "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"
+          "description": "unnamed default slot for dropdown menu options given as <option> elements"
         }
       ]
     },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@teipublisher/pb-components",
-  "version": "2.25.3",
+  "version": "2.26.0",
   "description": "Collection of webcomponents underlying TEI Publisher",
   "repository": "https://github.com/eeditiones/tei-publisher-components.git",
   "main": "index.html",

package/pb-elements.json

@@ -3254,6 +3254,125 @@
         }
       ]
     },
+    {
+      "name": "pb-dialog",
+      "path": "./src/pb-dialog.js",
+      "description": "A simple dialog component using the HTML5 <dialog> element (no shadow DOM).",
+      "attributes": [
+        {
+          "name": "open",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "modal",
+          "type": "boolean",
+          "default": "true"
+        },
+        {
+          "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": "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",
@@ -5494,17 +5613,7 @@
       "slots": [
         {
           "name": "",
-          "description": "unnamed default slot for dropdown menu options"
-        }
-      ],
-      "cssProperties": [
-        {
-          "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"
+          "description": "unnamed default slot for dropdown menu options given as <option> elements"
         }
       ]
     },

package/src/assets/pb-styles.css

@@ -0,0 +1,51 @@
+:root {
+    --pb-dialog-box-shadow: 0 2px 16px rgba(0, 0, 0, 0.3);
+    --pb-dialog-backdrop-color: rgba(0, 0, 0, 0.4);
+    --pb-dialog-padding-horizontal: 1em;
+    --pb-dialog-padding-vertical: 1em;
+    --pb-dialog-border-color: #eee;
+    --pb-dialog-min-width: 300px;
+}
+
+pb-dialog dialog {
+    min-width: var(--pb-dialog-min-width);
+    max-width: 100vw;
+    max-height: 90vh;
+    border-radius: 6px;
+    box-shadow: var(--pb-dialog-box-shadow);
+    border: none;
+    padding: 0;
+}
+
+pb-dialog dialog::backdrop {
+    background: var(--pb-dialog-backdrop-color);
+}
+
+pb-dialog>dialog>article>* {
+    padding-left: var(--pb-dialog-padding-horizontal);
+    padding-right: var(--pb-dialog-padding-horizontal);
+}
+
+pb-dialog>dialog>article>header {
+    border-bottom: 1px solid var(--pb-dialog-border-color);
+    display: flex;
+    margin-bottom: var(--pb-dialog-padding-vertical);
+    justify-content: space-between;
+    align-items: center;
+}
+
+pb-dialog>dialog>article>footer {
+    display: flex;
+    justify-content: flex-end;
+    gap: 0.5rem;
+    padding-top: var(--pb-dialog-padding-vertical);
+    padding-bottom: var(--pb-dialog-padding-vertical);
+    border-top: 1px solid var(--pb-dialog-border-color);
+}
+
+pb-dialog [rel="prev"] {
+    background: none;
+    border: none;
+    font-size: 1.2em;
+    cursor: pointer;
+}

package/src/pb-dialog.js

@@ -0,0 +1,78 @@
+import { LitElement, html } from 'lit-element';
+import { pbMixin } from './pb-mixin';
+import { pbLightDom } from './pb-light-dom';
+
+/**
+ * A simple dialog component using the HTML5 <dialog> element (no shadow DOM).
+ *
+ * @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 pbLightDom(pbMixin(LitElement)) {
+
+    static get properties() {
+        return {
+            ...super.properties,
+            open: { type: Boolean, reflect: true },
+            modal: { type: Boolean, reflect: true }
+        };
+    }
+
+    constructor() {
+        super();
+        this.open = false;
+        this.modal = true;
+        this._escListener = this._onEsc.bind(this);
+    }
+
+    _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()}" ?modal="${this.modal}">
+                <article>
+                    <header>
+                        ${ this.fillSlot('title') }
+                        <button rel="prev" aria-label="Close" @click="${this.closeDialog}">&times;</button>
+                    </header>
+                    ${ this.fillSlot() }
+                    <footer>
+                        ${ this.fillSlot('footer') }
+                    </footer>
+                </article>
+            </dialog>
+        `;
+    }
+
+    firstUpdated() {
+        this._dialog = this.querySelector('dialog');
+    }
+}
+
+customElements.define('pb-dialog', PbDialog);

package/src/pb-lang.js

@@ -1,19 +1,17 @@
 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 { pbLightDom } from './pb-light-dom.js';
 
 /**
  * A dropdown for switching the interface language.
  *
- * @slot - unnamed default slot for dropdown menu options
+ * @slot - unnamed default slot for dropdown menu options given as <option> elements
  * @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 pbLightDom(pbMixin(LitElement)) {
+    
     static get properties() {
         return {
             ...super.properties,
@@ -52,38 +50,25 @@ export class PbLang extends pbMixin(LitElement) {
     }
 
     render() {
+        const slotted = this.fillSlot();
         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="${this.nolabel ? this.selected : translate(this.label)}">
+            ${
+                slotted.map(option => {
+                    if (option instanceof HTMLElement) {
+                        return html`
+                            <option value="${option.getAttribute('value')}" ?selected=${option.getAttribute('value') === this.selected}>${option.textContent}</option>
+                        `;
+                    }
+                    return '';
+                })
             }
+            </select>
         `;
     }
 
-    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);
-            }
-        `;
-    }
-
-    _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-light-dom.js

@@ -0,0 +1,40 @@
+export const pbLightDom = (superclass) => class PbLightDom extends superclass {
+
+    createRenderRoot() {
+        // Render in light DOM
+        return this;
+    }
+
+    connectedCallback() {
+        super.connectedCallback();
+        this._content = document.createElement('div');
+        this._content.innerHTML = this.innerHTML;
+        console.log(this._content);
+    }
+
+    /**
+     * When the class is used without shadow DOM, use this method to find elements which should be
+     * rendered in the slot.
+     * 
+     * @param {string|undefined|null} slotName - name of the slot to fill, if its a named slot
+     * @returns {Array<Node>} an array of cloned nodes
+     */
+    fillSlot(slotName = null, fallback = []) {
+        if (!slotName) {
+            const slots = this._content.querySelectorAll(':scope > :not([slot])');
+            return Array.from(slots).map(node => {
+                const clone = node.cloneNode(true);
+                /** @type {Element} */ (clone).removeAttribute('slot');
+                return clone;
+            });
+        } else {
+            const slot = this._content.querySelector(`:scope > [slot="${slotName}"]`);
+            if (slot) {
+                const clone = slot.cloneNode(true);
+                /** @type {Element} */ (clone).removeAttribute('slot');
+                return [clone];
+            }
+            return fallback;
+        }
+    }
+};