@teipublisher/pb-components 2.26.1-next.2 → 3.0.0-next-4.1

package/src/pb-custom-form.js

@@ -1,9 +1,7 @@
-import { html, css } from 'lit-element';
-import '@polymer/iron-form';
-import '@polymer/iron-ajax';
-import '@polymer/paper-dialog';
-import '@polymer/paper-dialog-scrollable';
+import { html, css } from 'lit';
+import './pb-fetch.js';
 import { PbLoad } from './pb-load.js';
+import './pb-dialog.js';
 
 /**
  * A custom form element which loads the actual form from a server-side script using AJAX.
@@ -19,159 +17,250 @@ import { PbLoad } from './pb-load.js';
  * @fires pb-submit - Fired when the form is submitted
  */
 export class PbCustomForm extends PbLoad {
+  constructor() {
+    super();
+    this._autoSubmitTargets = new WeakSet();
+  }
 
-    firstUpdated() {
-        this.shadowRoot.getElementById('ironform').addEventListener('iron-form-presubmit', (ev) => {
-            ev.preventDefault();
-            this._submit();
-        });
-        this.addEventListener('click', (e) => {
-            if (e.target.slot === 'searchButtonTop'){
-                this.submit();
-            }
-            if (e.target.slot === 'searchButtonBottom'){
-                this.submit();
-            }
-            if (e.target.slot === 'resetButton'){
-                this._reset();
-            }
-        });
-
-        this._submissionHandlers();
+  firstUpdated() {
+    const form = this.shadowRoot && this.shadowRoot.getElementById('form');
+    if (form) {
+      form.addEventListener('submit', ev => {
+        ev.preventDefault();
+        this._submit();
+      });
     }
+    this.addEventListener('click', e => {
+      if (e.target.slot === 'searchButtonTop') {
+        this.submit();
+      }
+      if (e.target.slot === 'searchButtonBottom') {
+        this.submit();
+      }
+      if (e.target.slot === 'resetButton') {
+        this._reset();
+      }
+    });
 
-    render() {
-        return html`
-            <iron-form id="ironform">
-                <form action="" accept="text/html" method="GET">
-                    <slot name="searchButtonTop"></slot>
-                    <slot></slot>
-                    <slot name="searchButtonBottom"></slot>
-                    <slot name="resetButton"></slot>
-                </form>
-            </iron-form>
-
-            <iron-ajax
-                id="loadContent"
-                verbose
-                handle-as="text"
-                method="get"
-                with-credentials
-                @response="${this._handleContent}"
-                @error="${this._handleError}"></iron-ajax>
-            <paper-dialog id="errorDialog">
-                <h2>Error</h2>
-                <paper-dialog-scrollable></paper-dialog-scrollable>
-                <div class="buttons">
-                    <paper-button dialog-confirm="dialog-confirm" autofocus="autofocus">
-                        Close
-                    </paper-button>
-                </div>
-            </paper-dialog>
-        `;
-    }
+    this._submissionHandlers();
+  }
 
-    static get styles() {
-        return css`
-            :host {
-                display: block;
-            }
-        `;
-    }
+  render() {
+    return html`
+      <form id="form" action="" accept="text/html" method="GET" novalidate>
+        <slot name="searchButtonTop"></slot>
+        <slot></slot>
+        <slot name="searchButtonBottom"></slot>
+        <slot name="resetButton"></slot>
+      </form>
 
-    submit() {
-        this.shadowRoot.getElementById('ironform').submit();
-    }
+      <pb-fetch
+        id="loadContent"
+        verbose
+        handle-as="text"
+        method="get"
+        with-credentials
+        @response="${this._handleContent}"
+        @error="${this._handleError}"
+      ></pb-fetch>
+      <pb-dialog id="errorDialog" title="Error">
+        <p id="errorMessage"></p>
+        <div slot="footer">
+          <button rel="prev" type="button">Close</button>
+        </div>
+      </pb-dialog>
+    `;
+  }
 
-    _submit() {
-        const json = this.serializeForm();
-        this.emitTo('pb-search-resubmit', { params: json });
-        this.emitTo('pb-submit', { params: json});
-    }
+  static get styles() {
+    return css`
+      :host {
+        display: block;
+      }
+    `;
+  }
 
-    _reset(){
-        this.shadowRoot.getElementById('ironform').reset();
+  submit() {
+    const form = this.shadowRoot && this.shadowRoot.getElementById('form');
+    if (!form) {
+      return;
     }
-    
-    /**
-     * serialize custom form to object with name value pairs
-     * empty, unselected and undifined inputs will be returned
-     * as null while disabled elements will still be omitted
-     * this allows url parameters to be reset in the URL
-     * as IronForm.serializeform will omit names without a value
-     * @returns {Object} name value pairs
-     */
-    serializeForm() {
-        const elements = this.shadowRoot.getElementById('ironform')._getSubmittableElements()
-        const initial = {}
-        for (const element of elements) {
-            initial[element.name] = null;
-        }
-        return Object.assign(
-            initial,
-            this.shadowRoot.getElementById('ironform').serializeForm()
-        );
+    if (form.requestSubmit) {
+      form.requestSubmit();
+    } else if (typeof form.submit === 'function') {
+      form.submit();
     }
+  }
 
-    _parseHeaders(xhr) {
-        // overwrite to avoid `pb-results-received` event being sent
+  _submit() {
+    const json = this.serializeForm();
+    this.emitTo('pb-search-resubmit', { params: json });
+    this.emitTo('pb-submit', { params: json });
+  }
+
+  _reset() {
+    const form = this.shadowRoot && this.shadowRoot.getElementById('form');
+    if (form && typeof form.reset === 'function') {
+      form.reset();
     }
+  }
 
-    _onLoad(content) {
-        super._onLoad(content);
+  /**
+   * serialize custom form to object with name value pairs
+   * empty, unselected and undifined inputs will be returned
+   * as null while disabled elements will still be omitted
+   * this allows url parameters to be reset in the URL
+   * as IronForm.serializeform will omit names without a value
+   * @returns {Object} name value pairs
+   */
+  serializeForm() {
+    const form = this.shadowRoot && this.shadowRoot.getElementById('form');
+    if (!form) return {};
 
-        this.dispatchEvent(new CustomEvent('pb-custom-form-loaded', { detail: content }));
-    }
+    // Get elements from both form.elements AND slotted/light DOM content
+    // form.elements doesn't include slotted content in all browsers
+    const formElements = Array.from(form.elements || []);
+    const slottedElements = Array.from(this.querySelectorAll('input, select, textarea'));
+    const allElements = [...new Set([...formElements, ...slottedElements])];
 
-    _submissionHandlers() {
-        if (!this.autoSubmit) {
-            return;
+    const elements = allElements.filter(
+      el => el.name && !el.disabled && !el.closest('[disabled]'),
+    );
+    const initial = {};
+    elements.forEach(element => {
+      if (!(element.name in initial)) {
+        initial[element.name] = null;
+      }
+    });
+
+    // Build form data manually to include slotted content
+    const data = {};
+    elements.forEach(el => {
+      if (el.type === 'checkbox' || el.type === 'radio') {
+        if (el.checked) {
+          if (data[el.name] == null) {
+            data[el.name] = el.value;
+          } else if (Array.isArray(data[el.name])) {
+            data[el.name].push(el.value);
+          } else {
+            data[el.name] = [data[el.name], el.value];
+          }
+        }
+      } else if (el.type === 'select-multiple') {
+        const values = Array.from(el.selectedOptions).map(opt => opt.value);
+        if (values.length > 0) {
+          data[el.name] = values.length === 1 ? values[0] : values;
         }
-        this.querySelectorAll(this.autoSubmit).forEach((control) => {
-            const name = control.nodeName.toLowerCase();
-            let event = 'change';
-            if (control instanceof HTMLButtonElement ||
-                name === 'paper-icon-button' || name === 'paper-button' ||
-                (name === 'input' && (control.type === 'button' || control.type === 'submit' || control.type === 'reset'))
-            ) {
-                event = 'click';
-            } else if (name === 'paper-input' || (control instanceof HTMLInputElement && control.type === 'text')) {
-                event = 'keyup';
-            } else if (name === 'paper-dropdown-menu') {
-                event = 'value-changed';
-            }
-            control.addEventListener(event, this._submit.bind(this));
-        });
+      } else {
+        data[el.name] = el.value;
+      }
+    });
+
+    // Merge with initial (to preserve null for unset values)
+    Object.keys(data).forEach(key => {
+      if (data[key] != null) {
+        initial[key] = data[key];
+      }
+    });
+
+    return initial;
+  }
+
+  _parseHeaders(xhr) {
+    // overwrite to avoid `pb-results-received` event being sent
+  }
+
+  _onLoad(content) {
+    super._onLoad(content);
+
+    this.dispatchEvent(new CustomEvent('pb-custom-form-loaded', { detail: content }));
+    this._submissionHandlers();
+  }
+
+  _handleError() {
+    this.emitTo('pb-end-update');
+    const loader = this.shadowRoot.getElementById('loadContent');
+    const { response } = loader.lastError;
+    if (this.silent) {
+      console.error('Request failed: %s', response ? response.description : '');
+      return;
+    }
+    let message;
+    if (response) {
+      message = response.description;
+    } else {
+      message = 'Server error occurred';
     }
+    const dialog = this.shadowRoot.getElementById('errorDialog');
+    const messageElement = this.shadowRoot.getElementById('errorMessage');
+    messageElement.textContent = `Server error: ${message}`;
+    dialog.openDialog();
+  }
 
-    static get properties() {
-        return {
-            /**
-             * Register event handlers on all descendant elements matching the given CSS selector and submit the form
-             * automatically if any of those changes. For button-like controls,
-             * a submit is triggered on click, for text input on keyUp, and for
-             * all other form components on change.
-             */
-            autoSubmit: {
-                type: String,
-                attribute: 'auto-submit'
-            },
-            ...super.properties
-        };
+  _submissionHandlers() {
+    if (!this.autoSubmit) {
+      return;
     }
+    this.querySelectorAll(this.autoSubmit).forEach(control => {
+      if (this._autoSubmitTargets.has(control)) {
+        return;
+      }
+      this._autoSubmitTargets.add(control);
+      const name = (control.nodeName || '').toLowerCase();
+      let event = 'change';
+      if (
+        control instanceof HTMLButtonElement ||
+        name === 'pb-icon-button' ||
+        name === 'paper-button' ||
+        name === 'button' ||
+        (name === 'input' &&
+          (control.type === 'button' || control.type === 'submit' || control.type === 'reset'))
+      ) {
+        event = 'click';
+      } else if (
+        name === 'paper-input' ||
+        (control instanceof HTMLInputElement &&
+          (control.type === 'text' || control.type === 'search'))
+      ) {
+        event = 'keyup';
+      } else if (name === 'paper-dropdown-menu') {
+        event = 'value-changed';
+      }
+      if (control instanceof HTMLSelectElement) {
+        event = 'change';
+      }
+      control.addEventListener(event, this._submit.bind(this));
+    });
+  }
+
+  static get properties() {
+    return {
+      /**
+       * Register event handlers on all descendant elements matching the given CSS selector and submit the form
+       * automatically if any of those changes. For button-like controls,
+       * a submit is triggered on click, for text input on keyUp, and for
+       * all other form components on change.
+       */
+      autoSubmit: {
+        type: String,
+        attribute: 'auto-submit',
+      },
+      ...super.properties,
+    };
+  }
+
+  /**
+   * Fired before the element updates its content
+   *
+   * @event pb-custom-form-loaded
+   * @param {string} the loaded content
+   */
 
-    /**
-     * Fired before the element updates its content
-     *
-     * @event pb-custom-form-loaded
-     * @param {string} the loaded content
-     */
-
-    /**
-     * Fired when form is submitted
-     *
-     * @event pb-search-resubmit
-     * @param {object} params: serialized form parameters as json object
-     */
+  /**
+   * Fired when form is submitted
+   *
+   * @event pb-search-resubmit
+   * @param {object} params: serialized form parameters as json object
+   */
 }
-customElements.define('pb-custom-form', PbCustomForm);
+customElements.define('pb-custom-form', PbCustomForm);

package/src/pb-dialog.js

@@ -1,83 +1,119 @@
-import { LitElement, html } from 'lit-element';
-import { pbMixin } from './pb-mixin';
-import { pbLightDom } from './pb-light-dom';
-import { unsafeHTML } from 'lit-html/directives/unsafe-html';
+import { LitElement, html, css } from 'lit';
+import { unsafeHTML } from 'lit/directives/unsafe-html.js';
+import { pbMixin } from './pb-mixin.js';
+import { themableMixin } from './theming.js';
 
 /**
- * A simple dialog component using the HTML5 <dialog> element (no shadow DOM).
+ * A simple dialog component using the HTML5 <dialog> element.
+ *
+ * Any button with the attribute `rel="prev"` will close the dialog when clicked.
  *
  * @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)) {
+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 },
+    };
+  }
 
-    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;
+  }
 
-    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();
     }
+  }
 
-    _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;
     }
+  }
 
-    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;
     }
+  }
 
-    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.title ? unsafeHTML(this.title) : this.fillSlot('title') }
-                        <button rel="prev" aria-label="Close" @click="${this.closeDialog}">&times;</button>
-                    </header>
-                    ${ this.message ? unsafeHTML(this.message) : this.fillSlot() }
-                    <footer>
-                        ${ this.fillSlot('footer') }
-                    </footer>
-                </article>
-            </dialog>
-        `;
-    }
+  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" type="button"></button>
+          </header>
+          ${this.message ? unsafeHTML(this.message) : html`<slot></slot>`}
+          <footer>
+            <slot name="footer"></slot>
+          </footer>
+        </article>
+      </dialog>
+    `;
+  }
 
-    firstUpdated() {
-        this._dialog = this.querySelector('dialog');
-    }
+  firstUpdated() {
+    this._dialog = this.renderRoot.querySelector('dialog');
+    // Add click listeners to close buttons in both shadow and light DOM
+    [
+      ...this._dialog.querySelectorAll('button[rel="prev"]'),
+      ...this.querySelectorAll('button[rel="prev"]'),
+    ].forEach(button => button.addEventListener('click', this.closeDialog.bind(this)));
+  }
+
+  static get styles() {
+    return css`
+      header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+      }
+      button[rel='prev'] {
+        display: block;
+        height: 1rem;
+        width: 1rem;
+        background-image: var(
+          --pb-dialog-background-image,
+          url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 145, 164)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E")
+        );
+        background-position: center;
+        background-size: auto 1rem;
+        background-repeat: no-repeat;
+        background-color: transparent;
+        border: none;
+      }
+      footer {
+        display: flex;
+        justify-content: flex-end;
+        align-items: center;
+        margin-top: 16px;
+      }
+    `;
+  }
 }
 
 customElements.define('pb-dialog', PbDialog);