@teipublisher/pb-components 2.26.0-next-3.1 → 2.26.0-next-3.3

package/dist/pb-elements.json

@@ -5518,6 +5518,11 @@
           "name": "selected",
           "type": "string"
         },
+        {
+          "name": "display",
+          "description": "How should the selected value be displayed?\n\n- `text` - Display the text content of the selected option\n- other - Attribute name to use",
+          "type": "string"
+        },
         {
           "name": "label",
           "description": "The label for a language in the dropdown",
@@ -5562,6 +5567,12 @@
           "attribute": "selected",
           "type": "string"
         },
+        {
+          "name": "display",
+          "attribute": "display",
+          "description": "How should the selected value be displayed?\n\n- `text` - Display the text content of the selected option\n- other - Attribute name to use",
+          "type": "string"
+        },
         {
           "name": "label",
           "attribute": "label",

package/i18n/common/en.json

@@ -316,5 +316,11 @@
   "timeline": {
     "unknown": "undated",
     "clear": "Clear date selection"
+  },
+  "toolbar": {
+    "zoom": {
+      "in": "Zoom in",
+      "out": "Zoom out"
+    }
   }
 }

package/package.json

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

package/pb-elements.json

@@ -5518,6 +5518,11 @@
           "name": "selected",
           "type": "string"
         },
+        {
+          "name": "display",
+          "description": "How should the selected value be displayed?\n\n- `text` - Display the text content of the selected option\n- other - Attribute name to use",
+          "type": "string"
+        },
         {
           "name": "label",
           "description": "The label for a language in the dropdown",
@@ -5562,6 +5567,12 @@
           "attribute": "selected",
           "type": "string"
         },
+        {
+          "name": "display",
+          "attribute": "display",
+          "description": "How should the selected value be displayed?\n\n- `text` - Display the text content of the selected option\n- other - Attribute name to use",
+          "type": "string"
+        },
         {
           "name": "label",
           "attribute": "label",

package/src/pb-lang.js

@@ -21,11 +21,41 @@ export class PbLang extends themableMixin(pbMixin(LitElement)) {
             ::slotted(*) {
                 display: none;
             }
-            ::slotted(select) {
+            details {
+                position: relative;
                 display: inline-block;
             }
-            select {
+            summary {
                 color: var(--pb-lang-input-color, inherit);
+                cursor: pointer;
+                list-style: none;
+                padding: 0.5em;
+            }
+            summary::-webkit-details-marker {
+                display: none;
+            }
+            ul {
+                position: absolute;
+                top: 100%;
+                left: 0;
+                max-height: 80vh;
+                overflow-y: auto;
+                margin: 0;
+                padding: 0;
+                list-style: none;
+                background: white;
+                border: 1px solid #ccc;
+                border-radius: 4px;
+                box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+                z-index: 1000;
+            }
+            li {
+                list-style: none;
+                padding: 0.5em 1em;
+                cursor: pointer;
+            }
+            li:hover {
+                background: #f0f0f0;
             }
         `;
     }
@@ -41,6 +71,16 @@ export class PbLang extends themableMixin(pbMixin(LitElement)) {
             },
             selected: {
                 type: String
+            },
+            /**
+             * How should the selected value be displayed?
+             *
+             * - `text` - Display the text content of the selected option
+             * - other - Attribute name to use
+             */
+            display: {
+                type: String,
+                default: 'value'
             }
         };
     }
@@ -65,36 +105,40 @@ export class PbLang extends themableMixin(pbMixin(LitElement)) {
 
     render() {
         return html`
-            <select name="select" @change="${this._changed}" aria-label="${translate(this.label)}" title="${translate(this.label)}"></select>
+            <details>
+                <summary aria-label="${translate(this.label)}" title="${translate(this.label)}"></summary>
+                <ul></ul>
+            </details>
             <slot @slotchange="${this._syncOptions}"></slot>
         `;
     }
 
     _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;
+        const ul = this.shadowRoot.querySelector('ul');
+        const summary = this.shadowRoot.querySelector('summary');
+        if (!ul || !summary) return;
 
         // Clear existing options
-        select.innerHTML = '';
+        ul.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);
+            const li = document.createElement('li');
+            li.textContent = option.textContent;
+            li.dataset.value = option.value || option.getAttribute('value');
+            
+            if (li.dataset.value === this.selected) {
+                summary.textContent = this.display === 'text' ? option.textContent : option[this.display];
+            }
+            
+            li.addEventListener('click', () => {
+                this._changed({ target: { value: li.dataset.value } });
+                this.shadowRoot.querySelector('details').removeAttribute('open');
+            });
+            
+            ul.appendChild(li);
         });
-
-        // Set the selected value
-        if (this.selected) {
-            select.value = this.selected;
-        }
     }
 
     _changed(e) {

package/src/pb-login.js

@@ -167,14 +167,14 @@ export class PbLogin extends themableMixin(pbMixin(LitElement)) {
 
             <form action="login">
                 <pb-dialog ?modal="${this.auto}">
-                    <h2 slot="title">${translate('login.login')}</h2>
+                    <div slot="title">${translate('login.login')}</div>
                     <label>
                         ${ translate('login.user') }
-                        <input name="user" value="${this.user}" autofocus></input>
+                        <input name="user" value="${this.user}" autofocus placeholder="${translate('login.user')}"></input>
                     </label>
                     <label>
                         ${ translate('login.password') }
-                        <input name="password" type="password"></input>
+                        <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 }

package/src/pb-zoom.js

@@ -1,7 +1,7 @@
-import { LitElement, html } from 'lit-element';
+import { LitElement, css, html } from 'lit-element';
 import { pbMixin } from './pb-mixin';
-import '@polymer/iron-icons';
-import '@polymer/paper-icon-button';
+import { translate } from './pb-i18n';
+import { themableMixin } from './theming';
 
 /**
  * Zoom button to enlarge/shrink the font for the views. This component does not
@@ -9,7 +9,7 @@ import '@polymer/paper-icon-button';
  *
  * @fires pb-zoom - sends an event for e.g. pb-views to react to
  */
-export class PbZoom extends pbMixin(LitElement) {
+export class PbZoom extends themableMixin(pbMixin(LitElement)) {
     static get properties() {
         return {
             ...super.properties,
@@ -44,7 +44,27 @@ export class PbZoom extends pbMixin(LitElement) {
 
     render() {
         return html`
-            <paper-icon-button icon="${this.icon}" @click="${this._handleClick}"></paper-icon-button>
+            <a href="#" @click="${this._handleClick}" title="${this.direction === 'in' ? translate('toolbar.zoom.in') : translate('toolbar.zoom.out')}">
+                <slot name="icon">
+                    ${this.direction === 'in' ? html`
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M18.031 16.6168L22.3137 20.8995L20.8995 22.3137L16.6168 18.031C15.0769 19.263 13.124 20 11 20C6.032 20 2 15.968 2 11C2 6.032 6.032 2 11 2C15.968 2 20 6.032 20 11C20 13.124 19.263 15.0769 18.031 16.6168ZM16.0247 15.8748C17.2475 14.6146 18 12.8956 18 11C18 7.1325 14.8675 4 11 4C7.1325 4 4 7.1325 4 11C4 14.8675 7.1325 18 11 18C12.8956 18 14.6146 17.2475 15.8748 16.0247L16.0247 15.8748ZM10 10V7H12V10H15V12H12V15H10V12H7V10H10Z"></path></svg>
+                    ` : html`
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M18.031 16.6168L22.3137 20.8995L20.8995 22.3137L16.6168 18.031C15.0769 19.263 13.124 20 11 20C6.032 20 2 15.968 2 11C2 6.032 6.032 2 11 2C15.968 2 20 6.032 20 11C20 13.124 19.263 15.0769 18.031 16.6168ZM16.0247 15.8748C17.2475 14.6146 18 12.8956 18 11C18 7.1325 14.8675 4 11 4C7.1325 4 4 7.1325 4 11C4 14.8675 7.1325 18 11 18C12.8956 18 14.6146 17.2475 15.8748 16.0247L16.0247 15.8748ZM7 10H15V12H7V10Z"></path></svg>
+                    `}
+                </slot>
+            </a>
+        `;
+    }
+
+    static get styles() {
+        return css`
+            a {
+                color: inherit;
+                text-decoration: none;
+            }
+            a:hover {
+                color: inherit;
+            }
         `;
     }