@teipublisher/pb-components 2.26.1-next.3 → 3.0.0

package/src/pb-autocomplete.js

@@ -7,34 +7,35 @@ import '@polymer/iron-icon';
 import '@cwmr/paper-autocomplete/paper-autocomplete-suggestions.js';
 
 function _query(datasource, query) {
-    const queryResult = [];
-    datasource.forEach((item) => {
-      let objText, objValue;
+  const queryResult = [];
+  datasource.forEach(item => {
+    let objText;
+    let objValue;
 
-      if (typeof item === 'object') {
-        objText = item.text;
-        objValue = item.value;
-      } else {
-        objText = item.toString();
-        objValue = objText;
-      }
+    if (typeof item === 'object') {
+      objText = item.text;
+      objValue = item.value;
+    } else {
+      objText = item.toString();
+      objValue = objText;
+    }
 
-      if (objText.toLowerCase().indexOf(query) > -1) {
-        // NOTE: the structure of the result object matches with the current template. For custom templates, you
-        // might need to return more data
-        const resultItem = {};
-        resultItem.text = objText;
-        resultItem.value = objValue;
-        queryResult.push(resultItem);
-      }
-    });
-    return queryResult;
+    if (objText.toLowerCase().indexOf(query) > -1) {
+      // NOTE: the structure of the result object matches with the current template. For custom templates, you
+      // might need to return more data
+      const resultItem = {};
+      resultItem.text = objText;
+      resultItem.value = objValue;
+      queryResult.push(resultItem);
+    }
+  });
+  return queryResult;
 }
 
 /**
  * Provides an input with attached autocomplete. The autocomplete suggestions can be read
  * either from a static list or a remote endpoint to which the current user input is sent.
- * 
+ *
  * @cssprop --pb-search-label-color - Color of the label and underline
  * @cssprop --pb-search-input-color - Text color for input field
  * @cssprop --pb-search-focus-color - Color for label and underline if input has focus
@@ -43,293 +44,304 @@ function _query(datasource, query) {
  * @slot - default unnamed slot
  */
 export class PbAutocomplete extends pbMixin(LitElement) {
-    static get properties() {
-        return {
-            ...super.properties,
-            /**
-             * Name of the form field which will be submitted
-             */
-            name: {
-                type: String
-            },
-            /**
-             * Value of the form field which will be submitted
-             */
-            value: {
-                type: String
-            },
-            /**
-             * Placeholder to display if field is empty
-             */
-            placeholder: {
-                type: String,
-                attribute: 'placeholder'
-            },
-            /**
-             * Optional URL to query for suggestions. If relative, it is interpreted
-             * relative to the endpoint defined on a surrounding `pb-page`.
-             * 
-             * Upon autocomplete, the current input by the user will be sent with a query parameter
-             * `query`. The name/values of form controls nested within `pb-autocomplete` will also be
-             * appended to the request as parameters. This allows the server side code to distinguish
-             * different states.
-             */
-            source: {
-                type: String
-            },
-            /**
-             * If set, the entire list of possible suggestions will be preloaded upon initialization of the
-             * component.
-             */
-            preload: {
-                type: Boolean
-            },
-            /**
-             * A static list of suggestions. Use instead of `source`. May either be a flat array of strings,
-             * or an array containing objects of the form `{"text": "", "value": ""}, in which case "value" denotes
-             * the value to be used when the enclosing form is submitted, and "text" is the label to be displayed.
-             */
-            suggestions: {
-                type: Array
-            },
-            /**
-             * By default suggestions are filtered by prefix, i.e. only suggestions starting with the prefix
-             * typed by the user are shown. Set this property to true to search for the user-provided string
-             * anywhere within the suggestion text.
-             */
-            substring: {
-                type: Boolean
-            },
-            /**
-             * An icon to display next to the input.
-             */
-            icon: {
-                type: String
-            }
-        };
-    }
+  static get properties() {
+    return {
+      ...super.properties,
+      /**
+       * Name of the form field which will be submitted
+       */
+      name: {
+        type: String,
+      },
+      /**
+       * Value of the form field which will be submitted
+       */
+      value: {
+        type: String,
+      },
+      /**
+       * Placeholder to display if field is empty
+       */
+      placeholder: {
+        type: String,
+        attribute: 'placeholder',
+      },
+      /**
+       * Optional URL to query for suggestions. If relative, it is interpreted
+       * relative to the endpoint defined on a surrounding `pb-page`.
+       *
+       * Upon autocomplete, the current input by the user will be sent with a query parameter
+       * `query`. The name/values of form controls nested within `pb-autocomplete` will also be
+       * appended to the request as parameters. This allows the server side code to distinguish
+       * different states.
+       */
+      source: {
+        type: String,
+      },
+      /**
+       * If set, the entire list of possible suggestions will be preloaded upon initialization of the
+       * component.
+       */
+      preload: {
+        type: Boolean,
+      },
+      /**
+       * A static list of suggestions. Use instead of `source`. May either be a flat array of strings,
+       * or an array containing objects of the form `{"text": "", "value": ""}, in which case "value" denotes
+       * the value to be used when the enclosing form is submitted, and "text" is the label to be displayed.
+       */
+      suggestions: {
+        type: Array,
+      },
+      /**
+       * By default suggestions are filtered by prefix, i.e. only suggestions starting with the prefix
+       * typed by the user are shown. Set this property to true to search for the user-provided string
+       * anywhere within the suggestion text.
+       */
+      substring: {
+        type: Boolean,
+      },
+      /**
+       * An icon to display next to the input.
+       */
+      icon: {
+        type: String,
+      },
+    };
+  }
 
-    constructor() {
-        super();
-        this.placeholder = 'search.placeholder';
-        this.suggestions = [];
-        this.lastSelected = null;
-        this.preload = false;
-        this.substring = false;
-        this._hiddenInput = null;
-        this._initialized = false;
-    }
+  constructor() {
+    super();
+    this.placeholder = 'search.placeholder';
+    this.suggestions = [];
+    this.lastSelected = null;
+    this.preload = false;
+    this.substring = false;
+    this._hiddenInput = null;
+    this._initialized = false;
+  }
 
-    connectedCallback() {
-        super.connectedCallback();
-    }
+  connectedCallback() {
+    super.connectedCallback();
+  }
 
-    firstUpdated() {
-        const inIronForm = this.closest('iron-form,pb-search,pb-custom-form');
-        if (!inIronForm) {
-            this._hiddenInput = document.createElement('input');
-            this._hiddenInput.type = 'hidden';
-            this._hiddenInput.name = this.name;
-            this.appendChild(this._hiddenInput);
-        }
+  firstUpdated() {
+    const inIronForm = this.closest('iron-form,pb-search,pb-custom-form');
+    if (!inIronForm) {
+      this._hiddenInput = document.createElement('input');
+      this._hiddenInput.type = 'hidden';
+      this._hiddenInput.name = this.name;
+      this.appendChild(this._hiddenInput);
+    }
 
-        const autocomplete = this.shadowRoot.getElementById('autocomplete'); 
-        autocomplete.addEventListener('autocomplete-change', this._autocomplete.bind(this));
+    const autocomplete = this.shadowRoot.getElementById('autocomplete');
+    autocomplete.addEventListener('autocomplete-change', this._autocomplete.bind(this));
 
-        if (this.preload && this.source) {
-            if (this.substring) {
-                autocomplete.queryFn = _query;
-            }
-            waitOnce('pb-page-ready', () => {
-                this._sendRequest();
-            });
-        } else if (this.value) {
-            if (this.source) {
-                waitOnce('pb-page-ready', () => {
-                    //console.log('send autocomplete request for remote source %s on value %s', this.source, this.value);
-                    this._sendRequest(this.value);
-                });
-            } else {
-                const input = this.shadowRoot.getElementById('search');
-                const value = this.suggestions.find((suggestion) => {
-                    if (suggestion.text) {
-                        return suggestion.value === this.value;
-                    }
-                    return suggestion === this.value;
-                });
-                if (value) {
-                    input.value = value.text || value;
-                    if (this._hiddenInput) {
-                        this._hiddenInput.value = value.value || value;
-                    }
-                }
-                if (this._hiddenInput) {
-                    this._hiddenInput.value = this.value;
-                }
-            }
+    if (this.preload && this.source) {
+      if (this.substring) {
+        autocomplete.queryFn = _query;
+      }
+      waitOnce('pb-page-ready', () => {
+        this._sendRequest();
+      });
+    } else if (this.value) {
+      if (this.source) {
+        waitOnce('pb-page-ready', () => {
+          // console.log('send autocomplete request for remote source %s on value %s', this.source, this.value);
+          this._sendRequest(this.value);
+        });
+      } else {
+        const input = this.shadowRoot.getElementById('search');
+        const value = this.suggestions.find(suggestion => {
+          if (suggestion.text) {
+            return suggestion.value === this.value;
+          }
+          return suggestion === this.value;
+        });
+        if (value) {
+          input.value = value.text || value;
+          if (this._hiddenInput) {
+            this._hiddenInput.value = value.value || value;
+          }
+        }
+        if (this._hiddenInput) {
+          this._hiddenInput.value = this.value;
         }
+      }
     }
+  }
 
-    render() {
-        return html`
-            <custom-style>
-                <style>
-                    :host {
-                        --suggestions-item: {
-                            color: var(--pb-search-suggestions-color, black);
-                        };
-                        --suggestions-wrapper: {
-                            background: var(--pb-search-suggestions-background, white);
-                        };
-                    }
-                </style>
-            </custom-style>
-            <slot></slot>
-            <paper-input id="search" type="search" name="query" @keyup="${this._setInput}" label="${translate(this.placeholder)}"
-                always-float-label>
-                ${this.icon ? html`<iron-icon icon="${this.icon}" slot="prefix"></iron-icon>` : null}
-            </paper-input>
-            <paper-autocomplete-suggestions id="autocomplete" for="search" .source="${this.suggestions}" ?remote-source="${!this.preload && this.source}"
-                @autocomplete-selected="${this._autocompleteSelected}"></paper-autocomplete-suggestions>
-          
-        <iron-ajax
-            id="autocompleteLoader"
-            verbose
-            handle-as="json"
-            method="get"
-            with-credentials
-            @response="${this._updateSuggestions}"></iron-ajax>
+  render() {
+    return html`
+      <custom-style>
+        <style>
+          :host {
+            --suggestions-item: {
+              color: var(--pb-search-suggestions-color, black);
+            }
+            --suggestions-wrapper: {
+              background: var(--pb-search-suggestions-background, white);
+            }
+          }
+        </style>
+      </custom-style>
+      <slot></slot>
+      <paper-input
+        id="search"
+        type="search"
+        name="query"
+        @keyup="${this._setInput}"
+        label="${translate(this.placeholder)}"
+        always-float-label
+      >
+        ${this.icon ? html`<iron-icon icon="${this.icon}" slot="prefix"></iron-icon>` : null}
+      </paper-input>
+      <paper-autocomplete-suggestions
+        id="autocomplete"
+        for="search"
+        .source="${this.suggestions}"
+        ?remote-source="${!this.preload && this.source}"
+        @autocomplete-selected="${this._autocompleteSelected}"
+      ></paper-autocomplete-suggestions>
 
-        
+      <iron-ajax
+        id="autocompleteLoader"
+        verbose
+        handle-as="json"
+        method="get"
+        with-credentials
+        @response="${this._updateSuggestions}"
+      ></iron-ajax>
     `;
+  }
 
-    }
-
-    static get styles() {
-        return css`
-            :host {
-                --paper-input-container-color: var(--pb-search-label-color, var(--paper-grey-500, #303030));
-                --paper-input-container-input-color: var(--pb-search-input-color, var(--pb-color-primary, #000000));
-                --paper-input-container-focus-color: var(--pb-search-focus-color, var(--paper-grey-500, #303030));
-
-                display: flex;
-                align-items: center;
-            }
+  static get styles() {
+    return css`
+      :host {
+        --paper-input-container-color: var(--pb-search-label-color, var(--paper-grey-500, #303030));
+        --paper-input-container-input-color: var(
+          --pb-search-input-color,
+          var(--pb-color-primary, #000000)
+        );
+        --paper-input-container-focus-color: var(
+          --pb-search-focus-color,
+          var(--paper-grey-500, #303030)
+        );
 
-            ::slotted {
-                display: block;
-                margin-left: 10px;
-            }
-        `;
-    }
-
-    _autocomplete(ev) {
-        const search = this.shadowRoot.getElementById('search');
-        this._sendRequest(search.value);
-    }
+        display: flex;
+        align-items: center;
+      }
 
-    _sendRequest(query) {
-        const loader = this.shadowRoot.getElementById('autocompleteLoader');
-        loader.url = this.toAbsoluteURL(this.source);
+      ::slotted {
+        display: block;
+        margin-left: 10px;
+      }
+    `;
+  }
 
-        const params = this._getParameters();
-        params.query = query;
-        loader.params = params;
-        //console.log('send request for %s with %o', loaderId, params);
+  _autocomplete(ev) {
+    const search = this.shadowRoot.getElementById('search');
+    this._sendRequest(search.value);
+  }
 
-        loader.generateRequest();
-    }
+  _sendRequest(query) {
+    const loader = this.shadowRoot.getElementById('autocompleteLoader');
+    loader.url = this.toAbsoluteURL(this.source);
 
+    const params = this._getParameters();
+    params.query = query;
+    loader.params = params;
+    // console.log('send request for %s with %o', loaderId, params);
 
-    _updateSuggestions() {
-        const loader = this.shadowRoot.getElementById('autocompleteLoader');
-        if (this._initialized) {
-            const autocomplete = this.shadowRoot.getElementById('autocomplete');
-            if (loader.lastResponse) {
-                this.suggestions = loader.lastResponse;
-                autocomplete.suggestions(this.suggestions);
-            }
-        } else if (loader.lastResponse) {
-            const suggestions = loader.lastResponse;
+    loader.generateRequest();
+  }
 
-            const input = this.shadowRoot.getElementById('search');
-            const value = suggestions.find((suggestion) => {
-                if (suggestion.text) {
-                    return suggestion.value === this.value;
-                }
-                return suggestion === this.value;
-            });
-            if (value) {
-                input.value = value.text || value;
-                if (this._hiddenInput) {
-                    this._hiddenInput.value = value.value || value;
-                }
-            } else if (this._hiddenInput) {
-                this._hiddenInput.value = this.value;
-            }
+  _updateSuggestions() {
+    const loader = this.shadowRoot.getElementById('autocompleteLoader');
+    if (this._initialized) {
+      const autocomplete = this.shadowRoot.getElementById('autocomplete');
+      if (loader.lastResponse) {
+        this.suggestions = loader.lastResponse;
+        autocomplete.suggestions(this.suggestions);
+      }
+    } else if (loader.lastResponse) {
+      const suggestions = loader.lastResponse;
 
-            if (this.preload) {
-                this.suggestions = suggestions;
-            }
+      const input = this.shadowRoot.getElementById('search');
+      const value = suggestions.find(suggestion => {
+        if (suggestion.text) {
+          return suggestion.value === this.value;
         }
-        this._initialized = true;
-
-    }
+        return suggestion === this.value;
+      });
+      if (value) {
+        input.value = value.text || value;
+        if (this._hiddenInput) {
+          this._hiddenInput.value = value.value || value;
+        }
+      } else if (this._hiddenInput) {
+        this._hiddenInput.value = this.value;
+      }
 
-    _getParameters() {
-        const params = {};
-        const inputs = this.querySelectorAll('[name]');
-        inputs.forEach((input) => {
-            params[input.name] = input.value;
-        });
-        return params;
+      if (this.preload) {
+        this.suggestions = suggestions;
+      }
     }
+    this._initialized = true;
+  }
 
-    _autocompleteSelected(ev) {
-        const { text, value } = ev.detail;
-        this.lastSelected = text;
-        const input = this.shadowRoot.getElementById('search');
-        input.value = text;
-        this.value = value;
-        if (this._hiddenInput) {
-            this._hiddenInput.value = this.value;
-        }
+  _getParameters() {
+    const params = {};
+    const inputs = this.querySelectorAll('[name]');
+    inputs.forEach(input => {
+      params[input.name] = input.value;
+    });
+    return params;
+  }
 
-        this.emitTo('pb-autocomplete-selected', { text, value });
+  _autocompleteSelected(ev) {
+    const { text, value } = ev.detail;
+    this.lastSelected = text;
+    const input = this.shadowRoot.getElementById('search');
+    input.value = text;
+    this.value = value;
+    if (this._hiddenInput) {
+      this._hiddenInput.value = this.value;
     }
 
-    _setInput(ev) {
-        const input = this.shadowRoot.getElementById('search');
-        this.value = input.value;
+    this.emitTo('pb-autocomplete-selected', { text, value });
+  }
 
-        if (this._hiddenInput) {
-            this._hiddenInput.value = this.value;
-        } 
+  _setInput(ev) {
+    const input = this.shadowRoot.getElementById('search');
+    this.value = input.value;
 
-        if (ev.keyCode === 13) {
-            const entry = this.suggestions.find((suggestion) => {
-                if (suggestion.text) {
-                    return suggestion.value === this.value;
-                }
-                return suggestion === this.value;
-            });
-            if (!entry) {
-                return;
-            }
-            if (entry.value) {
-                this.emitTo('pb-autocomplete-selected', {
-                    text: entry.text,
-                    value: entry.value
-                });
-            } else {
-                this.emitTo('pb-autocomplete-selected', {
-                    text: entry,
-                    value: entry
-                });
-            }
-        }
+    if (this._hiddenInput) {
+      this._hiddenInput.value = this.value;
     }
 
-   
+    if (ev.keyCode === 13) {
+      const entry = this.suggestions.find(suggestion => {
+        if (suggestion.text) {
+          return suggestion.value === this.value;
+        }
+        return suggestion === this.value;
+      });
+      if (!entry) {
+        return;
+      }
+      if (entry.value) {
+        this.emitTo('pb-autocomplete-selected', {
+          text: entry.text,
+          value: entry.value,
+        });
+      } else {
+        this.emitTo('pb-autocomplete-selected', {
+          text: entry,
+          value: entry,
+        });
+      }
+    }
+  }
 }
-customElements.define('pb-autocomplete', PbAutocomplete);
+customElements.define('pb-autocomplete', PbAutocomplete);