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

package/src/pb-message.js

@@ -1,24 +1,20 @@
 import { LitElement, html, css } from 'lit-element';
-import '@polymer/paper-dialog/paper-dialog';
-import '@polymer/paper-dialog-scrollable/paper-dialog-scrollable';
 import '@polymer/paper-button/paper-button';
 import { unsafeHTML } from 'lit-html/directives/unsafe-html.js';
 import { translate } from "./pb-i18n.js";
+import './pb-dialog.js';
+import { themableMixin } from './theming.js';
 
 /**
  * Show a dialog with buttons. Used by ODD editor.
  */
-export class PbMessage extends LitElement {
+export class PbMessage extends themableMixin(LitElement) {
 
     static get styles() {
         return css`
             :host {
                 display:block;
             }
-            
-            paper-dialog{
-                min-width:300px;
-            }
         `;
     }
 
@@ -57,33 +53,28 @@ export class PbMessage extends LitElement {
 
     render() {
         return html`
-        <paper-dialog id="modal">
-            <h2 id="title">${unsafeHTML(this.title)}</h2>
-            <paper-dialog-scrollable id="message" class="message" tabindex="0">
+        <pb-dialog>
+            <h2 id="title" slot="title">${unsafeHTML(this.title)}</h2>
+            <div id="message" class="message" tabindex="0">
             ${ this.message ? unsafeHTML(this.message) : html`<slot></slot>` }
-            </paper-dialog-scrollable>
+            </div>
 
-            <div class="buttons">
-                <paper-button dialog-confirm="dialog-confirm" autofocus="autofocus" ?hidden="${this.isConfirm()}">${translate('dialogs.close')}</paper-button>
-                <paper-button id="confirm" dialog-confirm="dialog-confirm" autofocus="autofocus" ?hidden="${this.isMessage()}">${translate('dialogs.yes')}</paper-button>
-                <paper-button id="reject" dialog-confirm="dialog-confirm" autofocus="autofocus" ?hidden="${this.isMessage()}">${translate('dialogs.no')}</paper-button>
+            <div class="buttons" slot="footer">
+            ${ this.isMessage() ? html`<button class="close" autofocus="autofocus">${translate('dialogs.close')}</button>` : html`
+                <button class="confirm" autofocus="autofocus">${translate('dialogs.yes')}</button>
+                <button class="reject" autofocus="autofocus">${translate('dialogs.no')}</button>
+            `}
             </div>
-        </paper-dialog>
+        </pb-dialog>
         `;
     }
 
     firstUpdated() {
         // this.shadowRoot.getElementById('modal').open();
-        this.modal = this.shadowRoot.getElementById('modal');
+        this.modal = this.renderRoot.querySelector('pb-dialog');
 
     }
 
-    updated() {
-        if (this.modal) {
-            this.modal.notifyResize();
-        }
-    }
-
     /**
      * Open a modal dialog to display a message to the user.
      * 
@@ -93,9 +84,18 @@ export class PbMessage extends LitElement {
     show(title, message) {
         this.type = 'message';
         this.set(title, message);
-        this.modal.noCancelOnOutsideClick = false;
-        this.modal.noCancelOnEscKey = false;
-        this.modal.open();
+        this.modal.openDialog();
+
+        return new Promise((resolve, reject) => {
+            // Wait for the next render cycle to ensure elements are available
+            requestAnimationFrame(() => {
+                const close = this.renderRoot.querySelector('.close');
+                close.addEventListener('click', () => {
+                    this.modal.closeDialog();
+                    resolve({ once: true });
+                });
+            });
+        });
     }
 
     /**
@@ -110,14 +110,22 @@ export class PbMessage extends LitElement {
     confirm(title, message) {
         this.type = 'confirm';
         this.set(title, message);
-        this.modal.noCancelOnOutsideClick = true;
-        this.modal.noCancelOnEscKey = true;
-        this.modal.open();
-        const confirm = this.shadowRoot.getElementById('confirm');
-        const cancel = this.shadowRoot.getElementById('reject');
+        this.modal.openDialog();
+
         return new Promise((resolve, reject) => {
-            confirm.addEventListener('click', resolve, { once: true });
-            cancel.addEventListener('click', reject, { once: true })
+            // Wait for the next render cycle to ensure elements are available
+            requestAnimationFrame(() => {
+                const confirm = this.renderRoot.querySelector('.confirm');
+                const cancel = this.renderRoot.querySelector('.reject');
+                confirm.addEventListener('click', () => {
+                    this.modal.closeDialog();
+                    resolve({ once: true });
+                });
+                cancel.addEventListener('click', () => {
+                    this.modal.closeDialog();
+                    reject({ once: true });
+                });
+            });
         });
     }
 
@@ -129,7 +137,6 @@ export class PbMessage extends LitElement {
             if (message) {
                 this.message = message;
             }
-            this.modal.notifyResize();
         }
     }
 

package/src/pb-page.js

@@ -267,12 +267,11 @@ export class PbPage extends pbMixin(LitElement) {
             this.apiVersion = apiVersion;
         }
 
-        const stylesheetURLs = [
-            // TODO: replace with this.toAbsoluteURL
-            this.toAbsoluteURL('resources/css/components.css', this.endpoint)
-        ];
+        const stylesheetURLs = [];
         if (this.theme) {
             stylesheetURLs.push(this.toAbsoluteURL(this.theme, this.endpoint));
+        } else {
+            stylesheetURLs.push('components.css');
         }
         console.log('<pb-page> Loading component theme stylesheets from %s', stylesheetURLs.join(', '));
         this._themeSheet = await loadStylesheets(stylesheetURLs);

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;
+            }
         `;
     }
 

package/src/theming.js

@@ -55,16 +55,10 @@ function loadResource(url) {
  * @returns {CSSStyleSheet|null} a new CSSStylesheet or null
  */
 export function importStyles(elem) {
-    const page = document.querySelector('pb-page');
-    if (!page) {
-        return null;
-    }
-    const theme = page.stylesheet;
+    const theme = getThemeCSS();
     if (!theme) {
-        // no component styles defined
         return null;
     }
-
     const selectors = getSelectors(elem).join('|');
     if (themeMap.has(selectors)) {
         return themeMap.get(selectors);
@@ -82,6 +76,19 @@ export function importStyles(elem) {
     return adoptedSheet;
 }
 
+export function getThemeCSS() {
+    const page = document.querySelector('pb-page');
+    if (!page) {
+        return null;
+    }
+    const theme = page.stylesheet;
+    if (!theme) {
+        // no component styles defined
+        return null;
+    }
+    return theme;
+}
+
 /**
  * Recursively copy matching styles from the theme CSS
  * to create a new CSS stylesheet having all styles required
@@ -140,7 +147,7 @@ export const themableMixin = (superclass) => class ThemableMixin extends supercl
     connectedCallback() {
         super.connectedCallback();
         waitOnce('pb-page-ready', (options) => {
-            const theme = importStyles(this);
+            const theme = getThemeCSS();
             if (theme) {
                 this.shadowRoot.adoptedStyleSheets = [...this.shadowRoot.adoptedStyleSheets, theme];
             }

package/dist/iron-form-7b5c5d03.js

@@ -1,23 +0,0 @@
-import{P as e,h as t,d as i}from"./paper-checkbox-4f410b1f.js";import"./paper-listbox-5f42cff5.js";
-/**
-@license
-Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
-This code may only be used under the BSD style license found at
-http://polymer.github.io/LICENSE.txt The complete set of authors may be found at
-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
-*/e({_template:t`
-    <style>
-      :host {
-        display: block;
-      }
-    </style>
-
-    <!-- This form is used to collect the elements that should be submitted -->
-    <slot></slot>
-
-    <!-- This form is used for submission -->
-    <form id="helper" action\$="[[action]]" method\$="[[method]]" enctype\$="[[enctype]]"></form>
-`,is:"iron-form",properties:{allowRedirect:{type:Boolean,value:!1},headers:{type:Object,value:function(){return{}}},withCredentials:{type:Boolean,value:!1}},attached:function(){this._form||(this._form=i(this).querySelector("form"),this._form?(this._init(),this.async(this._saveInitialValues.bind(this),1)):this._nodeObserver=i(this).observeNodes(function(e){for(var t=0;t<e.addedNodes.length;t++)"FORM"===e.addedNodes[t].tagName&&(this._form=e.addedNodes[t],this._init(),i(this).unobserveNodes(this._nodeObserver),this._nodeObserver=null)}.bind(this)))},detached:function(){this._nodeObserver&&(i(this).unobserveNodes(this._nodeObserver),this._nodeObserver=null)},_init:function(){this._form.addEventListener("submit",this.submit.bind(this)),this._form.addEventListener("reset",this.reset.bind(this)),this._defaults=this._defaults||new WeakMap,this._saveInitialValues()},saveResetValues:function(){this._saveInitialValues(!0)},_saveInitialValues:function(e){for(var t=this._getValidatableElements(),i=0;i<t.length;i++){var s=t[i];if(!this._defaults.has(s)||e){var r={value:s.value};"checked"in s&&(r.checked=s.checked),"invalid"in s&&(r.invalid=s.invalid),this._defaults.set(s,r)}}},validate:function(){if(!this._form)return!1;if(""===this._form.getAttribute("novalidate"))return!0;for(var e,t=this._form.checkValidity(),i=this._getValidatableElements(),s=0;e=i[s],s<i.length;s++){var r=e;r.validate&&(t=!!r.validate()&&t)}return t},submit:function(e){if(e&&e.preventDefault(),this._form)if(this.validate()){this.$.helper.textContent="";var t=this.serializeForm();if(this.allowRedirect){for(var i in t)this.$.helper.appendChild(this._createHiddenElement(i,t[i]));this.$.helper.action=this._form.getAttribute("action"),this.$.helper.method=this._form.getAttribute("method")||"GET",this.$.helper.contentType=this._form.getAttribute("enctype")||"application/x-www-form-urlencoded",this.$.helper.submit(),this.fire("iron-form-submit")}else this._makeAjaxRequest(t)}else this.fire("iron-form-invalid")},reset:function(e){if(e&&e.preventDefault(),this._form)if(e&&"reset"===e.type&&e.target===this._form){for(var t=this._getValidatableElements(),i=0;i<t.length;i++){var s=t[i];if(this._defaults.has(s)){var r=this._defaults.get(s);for(var n in r)s[n]=r[n]}}this.fire("iron-form-reset")}else this._form.reset()},serializeForm:function(){for(var e=this._getSubmittableElements(),t={},i=0;i<e.length;i++)for(var s=this._serializeElementValues(e[i]),r=0;r<s.length;r++)this._addSerializedElement(t,e[i].name,s[r]);return t},_handleFormResponse:function(e){this.fire("iron-form-response",e.detail)},_handleFormError:function(e){this.fire("iron-form-error",e.detail)},_makeAjaxRequest:function(e){this.request||(this.request=document.createElement("iron-ajax"),this.request.addEventListener("response",this._handleFormResponse.bind(this)),this.request.addEventListener("error",this._handleFormError.bind(this))),this.request.url=this._form.getAttribute("action"),this.request.method=this._form.getAttribute("method")||"GET",this.request.contentType=this._form.getAttribute("enctype")||"application/x-www-form-urlencoded",this.request.withCredentials=this.withCredentials,this.request.headers=this.headers,"POST"===this._form.method.toUpperCase()?this.request.body=e:this.request.params=e,this.fire("iron-form-presubmit",{},{cancelable:!0}).defaultPrevented||(this.request.generateRequest(),this.fire("iron-form-submit",e))},_getValidatableElements:function(){return this._findElements(this._form,!0,!1)},_getSubmittableElements:function(){return this._findElements(this._form,!1,!1)},_findElements:function(e,t,s,r){r=r||[];for(var n=i(e).querySelectorAll("*"),a=0;a<n.length;a++)s||"slot"!==n[a].localName&&"content"!==n[a].localName?this._searchSubmittable(r,n[a],t):this._searchSubmittableInSlot(r,n[a],t);return r},_searchSubmittableInSlot:function(e,t,s){for(var r=i(t).getDistributedNodes(),n=0;n<r.length;n++)if(r[n].nodeType!==Node.TEXT_NODE){this._searchSubmittable(e,r[n],s);for(var a=i(r[n]).querySelectorAll("*"),o=0;o<a.length;o++)this._searchSubmittable(e,a[o],s)}},_searchSubmittable:function(e,t,i){this._isSubmittable(t,i)?e.push(t):t.root&&this._findElements(t.root,i,!0,e)},_isSubmittable:function(e,t){return!e.disabled&&(t?e.name||"function"==typeof e.validate:e.name)},_serializeElementValues:function(e){var t=e.tagName.toLowerCase();return"button"===t||"input"===t&&("submit"===e.type||"reset"===e.type)?[]:"select"===t?this._serializeSelectValues(e):"input"===t?this._serializeInputValues(e):e._hasIronCheckedElementBehavior&&!e.checked?[]:[e.value]},_serializeSelectValues:function(e){for(var t=[],i=0;i<e.options.length;i++)e.options[i].selected&&t.push(e.options[i].value);return t},_serializeInputValues:function(e){var t=e.type.toLowerCase();return("checkbox"!==t&&"radio"!==t||e.checked)&&"file"!==t?[e.value]:[]},_createHiddenElement:function(e,t){var i=document.createElement("input");return i.setAttribute("type","hidden"),i.setAttribute("name",e),i.setAttribute("value",t),i},_addSerializedElement:function(e,t,i){void 0===e[t]?e[t]=i:(Array.isArray(e[t])||(e[t]=[e[t]]),e[t].push(i))}});