@teipublisher/pb-components 2.1.1 → 2.3.0

package/dist/pb-elements.json

@@ -2500,7 +2500,7 @@
     {
       "name": "pb-collapse",
       "path": "./src/pb-collapse.js",
-      "description": "A collapsible block: in collapsed state it only shows a header and expands if clicked.\r\nThe header should go into slot `collapse-trigger`, the content into `collapse-content`.\r\nExample:\r\n\r\n```html\r\n<pb-collapse>\r\n   <div slot=\"collapse-trigger\">\r\n       Metadata\r\n   </div>\r\n   <pb-view slot=\"collapse-content\" src=\"document1\" subscribe=\"transcription\" xpath=\"//teiHeader\"></pb-view>\r\n</pb-collapse>\r\n```",
+      "description": "A collapsible block: in collapsed state it only shows a header and expands if clicked.\nThe header should go into slot `collapse-trigger`, the content into `collapse-content`.\nExample:\n\n```html\n<pb-collapse>\n   <div slot=\"collapse-trigger\">\n       Metadata\n   </div>\n   <pb-view slot=\"collapse-content\" src=\"document1\" subscribe=\"transcription\" xpath=\"//teiHeader\"></pb-view>\n</pb-collapse>\n```\n\nBy adding a CSS 'icon-right' to a `pb-collapse` the icon can be placed on the right side\n```\n<pb-collapse class='icon-right'>\n```",
       "attributes": [
         {
           "name": "horizontal",
@@ -2540,7 +2540,7 @@
         },
         {
           "name": "toggles",
-          "description": "By default, an open collapse is closed if another pb-collapse is expanded on the same event channel.\r\nSet to true to keep multiple pb-collapse open at the same time.",
+          "description": "By default, an open collapse is closed if another pb-collapse is expanded on the same event channel.\nSet to true to keep multiple pb-collapse open at the same time.",
           "type": "boolean",
           "default": "false"
         },
@@ -2622,7 +2622,7 @@
         {
           "name": "toggles",
           "attribute": "toggles",
-          "description": "By default, an open collapse is closed if another pb-collapse is expanded on the same event channel.\r\nSet to true to keep multiple pb-collapse open at the same time.",
+          "description": "By default, an open collapse is closed if another pb-collapse is expanded on the same event channel.\nSet to true to keep multiple pb-collapse open at the same time.",
           "type": "boolean",
           "default": "false"
         },
@@ -8538,6 +8538,10 @@
           "name": "pb-load",
           "description": "Fires when user selects new page to show"
         },
+        {
+          "name": "pb-paginate",
+          "description": "Fires when user selects new page to show"
+        },
         {
           "name": "pb-results-received",
           "description": "When received, recalculates page ranges to display according to the parameters received"
@@ -9379,6 +9383,11 @@
           "name": "subforms",
           "type": "string"
         },
+        {
+          "name": "source",
+          "description": "Optional URL to query for suggestions. If relative, it is interpreted\nrelative to the endpoint defined on a surrounding `pb-page`.\n\nUpon autocomplete, the current input by the user will be sent with a query parameter\n`query`. The name/values of form controls nested within `pb-search` or subforms will also be\nappended to the request as parameters. This allows the server side code to distinguish\ndifferent states.",
+          "type": "string"
+        },
         {
           "name": "name",
           "type": "string",
@@ -9462,6 +9471,12 @@
           "attribute": "subforms",
           "type": "string"
         },
+        {
+          "name": "source",
+          "attribute": "source",
+          "description": "Optional URL to query for suggestions. If relative, it is interpreted\nrelative to the endpoint defined on a surrounding `pb-page`.\n\nUpon autocomplete, the current input by the user will be sent with a query parameter\n`query`. The name/values of form controls nested within `pb-search` or subforms will also be\nappended to the request as parameters. This allows the server side code to distinguish\ndifferent states.",
+          "type": "string"
+        },
         {
           "name": "name",
           "attribute": "name",
@@ -9547,6 +9562,10 @@
           "name": "pb-load",
           "description": "Fired to perform the actual search with parameters passed to the request"
         },
+        {
+          "name": "pb-paginate",
+          "description": "When received, triggers the search again with the new value of the start property"
+        },
         {
           "name": "pb-search-resubmit",
           "description": "When received, triggers the search again"

package/dist/pb-odd-editor.js

@@ -1,4 +1,4 @@
-import{h as e,m as t,F as o,D as i,z as s,A as r,j as a,f as n}from"./paper-checkbox-102e3b43.js";import{E as d,T as l,D as p,p as c}from"./vaadin-element-mixin-672938e3.js";import{f as h,N as m,j as u,k as b,l as g,A as v,L as f,c as w,h as y,b as _,w as x,p as $}from"./pb-mixin-8a593923.js";import{t as E,g as S}from"./pb-i18n-8a90c591.js";import"./jinn-codemirror-9718e0e0.js";
+import{h as e,m as t,F as o,D as i,z as s,A as r,j as a,f as n}from"./paper-checkbox-102e3b43.js";import{E as d,T as l,D as p,p as c}from"./vaadin-element-mixin-cef6f588.js";import{f as h,N as m,j as u,k as b,l as g,A as v,L as f,c as w,h as y,b as _,w as x,p as $}from"./pb-mixin-8a593923.js";import{t as E,g as S}from"./pb-i18n-8a90c591.js";import"./jinn-codemirror-9718e0e0.js";
 /**
  * @license
  * Copyright (c) 2017 The Polymer Project Authors. All rights reserved.

package/dist/{vaadin-element-mixin-672938e3.js → vaadin-element-mixin-cef6f588.js}

@@ -538,21 +538,24 @@ t({_template:e`
         `}static get styles(){return b`
             :host {
                 display: block;
+                position: relative;
             }
 
             #trigger {
-                display: table-row;
+                display: flex;
+                align-items:center
             }
 
-            #trigger iron-icon {
-                display: table-cell;
+            iron-icon {
                 padding: var(--pb-collapse-icon-padding, 0 4px 0 0);
             }
 
-            slot[name="collapse-trigger"] {
-                display: table-cell;
+            :host(.icon-right) iron-icon {
+                position: absolute;
+                right: 0;
             }
-        `}}customElements.define("pb-collapse",O);
+
+        `}}customElements.get("pb-collapse")||customElements.define("pb-collapse",O)
 /**
 @license
 Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
@@ -562,8 +565,7 @@ http://polymer.github.io/AUTHORS.txt The complete set of contributors may be
 found at http://polymer.github.io/CONTRIBUTORS.txt Code distributed by Google as
 part of the polymer project is also subject to an additional IP rights grant
 found at http://polymer.github.io/PATENTS.txt
-*/
-const T=document.createElement("template");T.setAttribute("style","display: none;"),T.innerHTML="<dom-module id=\"paper-item-shared-styles\">\n  <template>\n    <style>\n      :host, .paper-item {\n        display: block;\n        position: relative;\n        min-height: var(--paper-item-min-height, 48px);\n        padding: 0px 16px;\n      }\n\n      .paper-item {\n        @apply --paper-font-subhead;\n        border:none;\n        outline: none;\n        background: white;\n        width: 100%;\n        text-align: left;\n      }\n\n      :host([hidden]), .paper-item[hidden] {\n        display: none !important;\n      }\n\n      :host(.iron-selected), .paper-item.iron-selected {\n        font-weight: var(--paper-item-selected-weight, bold);\n\n        @apply --paper-item-selected;\n      }\n\n      :host([disabled]), .paper-item[disabled] {\n        color: var(--paper-item-disabled-color, var(--disabled-text-color));\n\n        @apply --paper-item-disabled;\n      }\n\n      :host(:focus), .paper-item:focus {\n        position: relative;\n        outline: 0;\n\n        @apply --paper-item-focused;\n      }\n\n      :host(:focus):before, .paper-item:focus:before {\n        @apply --layout-fit;\n\n        background: currentColor;\n        content: '';\n        opacity: var(--dark-divider-opacity);\n        pointer-events: none;\n\n        @apply --paper-item-focused-before;\n      }\n    </style>\n  </template>\n</dom-module>",document.head.appendChild(T.content);
+*/;const T=document.createElement("template");T.setAttribute("style","display: none;"),T.innerHTML="<dom-module id=\"paper-item-shared-styles\">\n  <template>\n    <style>\n      :host, .paper-item {\n        display: block;\n        position: relative;\n        min-height: var(--paper-item-min-height, 48px);\n        padding: 0px 16px;\n      }\n\n      .paper-item {\n        @apply --paper-font-subhead;\n        border:none;\n        outline: none;\n        background: white;\n        width: 100%;\n        text-align: left;\n      }\n\n      :host([hidden]), .paper-item[hidden] {\n        display: none !important;\n      }\n\n      :host(.iron-selected), .paper-item.iron-selected {\n        font-weight: var(--paper-item-selected-weight, bold);\n\n        @apply --paper-item-selected;\n      }\n\n      :host([disabled]), .paper-item[disabled] {\n        color: var(--paper-item-disabled-color, var(--disabled-text-color));\n\n        @apply --paper-item-disabled;\n      }\n\n      :host(:focus), .paper-item:focus {\n        position: relative;\n        outline: 0;\n\n        @apply --paper-item-focused;\n      }\n\n      :host(:focus):before, .paper-item:focus:before {\n        @apply --layout-fit;\n\n        background: currentColor;\n        content: '';\n        opacity: var(--dark-divider-opacity);\n        pointer-events: none;\n\n        @apply --paper-item-focused-before;\n      }\n    </style>\n  </template>\n</dom-module>",document.head.appendChild(T.content);
 /**
 @license
 Copyright (c) 2015 The Polymer Project Authors. All rights reserved.

package/package.json

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

package/pb-elements.json

@@ -2500,7 +2500,7 @@
     {
       "name": "pb-collapse",
       "path": "./src/pb-collapse.js",
-      "description": "A collapsible block: in collapsed state it only shows a header and expands if clicked.\r\nThe header should go into slot `collapse-trigger`, the content into `collapse-content`.\r\nExample:\r\n\r\n```html\r\n<pb-collapse>\r\n   <div slot=\"collapse-trigger\">\r\n       Metadata\r\n   </div>\r\n   <pb-view slot=\"collapse-content\" src=\"document1\" subscribe=\"transcription\" xpath=\"//teiHeader\"></pb-view>\r\n</pb-collapse>\r\n```",
+      "description": "A collapsible block: in collapsed state it only shows a header and expands if clicked.\nThe header should go into slot `collapse-trigger`, the content into `collapse-content`.\nExample:\n\n```html\n<pb-collapse>\n   <div slot=\"collapse-trigger\">\n       Metadata\n   </div>\n   <pb-view slot=\"collapse-content\" src=\"document1\" subscribe=\"transcription\" xpath=\"//teiHeader\"></pb-view>\n</pb-collapse>\n```\n\nBy adding a CSS 'icon-right' to a `pb-collapse` the icon can be placed on the right side\n```\n<pb-collapse class='icon-right'>\n```",
       "attributes": [
         {
           "name": "horizontal",
@@ -2540,7 +2540,7 @@
         },
         {
           "name": "toggles",
-          "description": "By default, an open collapse is closed if another pb-collapse is expanded on the same event channel.\r\nSet to true to keep multiple pb-collapse open at the same time.",
+          "description": "By default, an open collapse is closed if another pb-collapse is expanded on the same event channel.\nSet to true to keep multiple pb-collapse open at the same time.",
           "type": "boolean",
           "default": "false"
         },
@@ -2622,7 +2622,7 @@
         {
           "name": "toggles",
           "attribute": "toggles",
-          "description": "By default, an open collapse is closed if another pb-collapse is expanded on the same event channel.\r\nSet to true to keep multiple pb-collapse open at the same time.",
+          "description": "By default, an open collapse is closed if another pb-collapse is expanded on the same event channel.\nSet to true to keep multiple pb-collapse open at the same time.",
           "type": "boolean",
           "default": "false"
         },
@@ -8538,6 +8538,10 @@
           "name": "pb-load",
           "description": "Fires when user selects new page to show"
         },
+        {
+          "name": "pb-paginate",
+          "description": "Fires when user selects new page to show"
+        },
         {
           "name": "pb-results-received",
           "description": "When received, recalculates page ranges to display according to the parameters received"
@@ -9379,6 +9383,11 @@
           "name": "subforms",
           "type": "string"
         },
+        {
+          "name": "source",
+          "description": "Optional URL to query for suggestions. If relative, it is interpreted\nrelative to the endpoint defined on a surrounding `pb-page`.\n\nUpon autocomplete, the current input by the user will be sent with a query parameter\n`query`. The name/values of form controls nested within `pb-search` or subforms will also be\nappended to the request as parameters. This allows the server side code to distinguish\ndifferent states.",
+          "type": "string"
+        },
         {
           "name": "name",
           "type": "string",
@@ -9462,6 +9471,12 @@
           "attribute": "subforms",
           "type": "string"
         },
+        {
+          "name": "source",
+          "attribute": "source",
+          "description": "Optional URL to query for suggestions. If relative, it is interpreted\nrelative to the endpoint defined on a surrounding `pb-page`.\n\nUpon autocomplete, the current input by the user will be sent with a query parameter\n`query`. The name/values of form controls nested within `pb-search` or subforms will also be\nappended to the request as parameters. This allows the server side code to distinguish\ndifferent states.",
+          "type": "string"
+        },
         {
           "name": "name",
           "attribute": "name",
@@ -9547,6 +9562,10 @@
           "name": "pb-load",
           "description": "Fired to perform the actual search with parameters passed to the request"
         },
+        {
+          "name": "pb-paginate",
+          "description": "When received, triggers the search again with the new value of the start property"
+        },
         {
           "name": "pb-search-resubmit",
           "description": "When received, triggers the search again"

package/src/pb-collapse.js

@@ -1,184 +1,194 @@
-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);
+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>
+ * ```
+ *
+ * By adding a CSS 'icon-right' to a `pb-collapse` the icon can be placed on the right side
+ * ```
+ * <pb-collapse class='icon-right'>
+ * ```
+ *
+ * @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;
+                position: relative;
+            }
+
+            #trigger {
+                display: flex;
+                align-items:center
+            }
+
+            iron-icon {
+                padding: var(--pb-collapse-icon-padding, 0 4px 0 0);
+            }
+
+            :host(.icon-right) iron-icon {
+                position: absolute;
+                right: 0;
+            }
+
+        `;
+    }
+}
+if (!customElements.get('pb-collapse')) {
+    customElements.define('pb-collapse', PbCollapse);
+}

package/src/pb-login.js

@@ -129,16 +129,22 @@ export class PbLogin extends pbMixin(LitElement) {
             };
             this._checkLogin.generateRequest();
         });
+        this.addEventListener('keyup', event => {
+            if (event.keyCode === 13) {
+                event.preventDefault();
+                this._confirmLogin();
+            }
+        });
     }
 
     render() {
         return html`
-            <a href="#" @click="${this._show}" title="${this.user}">
+            <a href="#" @click="${this._show}" role="button" title="${this.user ? this.user : this.loginLabel}">
                 ${
             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>`
-            }                
+            }
             </a>
 
             <paper-dialog id="loginDialog">
@@ -191,12 +197,8 @@ export class PbLogin extends pbMixin(LitElement) {
             a {
                 color: var(--pb-login-link-color, --pb-link-color);
                 text-decoration: none;
-            }
-
-            @media (max-width: 1024px) {
-                .label {
-                    display: none;
-                }
+                display: flex;
+                gap:0.5rem;
             }
 
             #message {
@@ -280,4 +282,4 @@ export class PbLogin extends pbMixin(LitElement) {
      * @param {Array<String>} groups groups the user is a member of
      */
 }
-customElements.define('pb-login', PbLogin);
+customElements.define('pb-login', PbLogin);