@teipublisher/pb-components 2.26.0-next-3.5 → 2.26.0-next-3.7

package/src/pb-search.js

@@ -2,13 +2,8 @@ import { LitElement, html, css } from 'lit-element';
 import { pbMixin, waitOnce } from './pb-mixin.js';
 import { registry } from "./urls.js";
 import { translate } from "./pb-i18n.js";
-import '@polymer/paper-input/paper-input.js';
-import '@polymer/paper-checkbox';
 import '@polymer/iron-ajax';
-import '@polymer/iron-form';
-import '@polymer/paper-button';
-import '@polymer/iron-icon';
-import '@cwmr/paper-autocomplete';
+import {themableMixin} from "./theming.js";
 
 /**
  * Implements a basic search form, which can be extended with additional inputs.
@@ -26,7 +21,7 @@ import '@cwmr/paper-autocomplete';
  * @fires pb-paginate - When received, triggers the search again with the new value of the start property
  * @fires pb-search-resubmit - When received, triggers the search again
  */
-export class PbSearch extends pbMixin(LitElement) {
+export class PbSearch extends themableMixin(pbMixin(LitElement)) {
     static get properties() {
         return {
             ...super.properties,
@@ -67,7 +62,7 @@ export class PbSearch extends pbMixin(LitElement) {
             /**
              * 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-search` or subforms will also be
              * appended to the request as parameters. This allows the server side code to distinguish
@@ -112,14 +107,6 @@ export class PbSearch extends pbMixin(LitElement) {
     }
 
     firstUpdated() {
-        if (!this.disableAutocomplete) {
-            const autocomplete = this.shadowRoot.getElementById('autocomplete');
-            autocomplete.addEventListener('autocomplete-change', this._autocomplete.bind(this));
-        }
-        const ironform = this.shadowRoot.getElementById('ironform');
-        ironform.addEventListener('iron-form-response', (event) =>
-            event.detail.completes.then((r) => this.emitTo('pb-search', r.parseResponse()))
-        );
         waitOnce('pb-page-ready', (options) => {
             const loader = this.shadowRoot.getElementById('autocompleteLoader');
             const url = this.source || "api/search/autocomplete";
@@ -152,36 +139,28 @@ export class PbSearch extends pbMixin(LitElement) {
             }
         });
     }
-    
+
     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>
-            <iron-form id="ironform" allow-redirect="${this.redirect}">
-                <form id="searchPageForm" method="get" action="${this.action}" accept="text/html">
-                    <slot name="beforeInput"></slot>
-                    <paper-input id="search" type="search" name="query" @keyup="${this._handleEnter}" label="${translate(this.placeHolder)}"
-                        value="${this.value}" always-float-label>
-                        <iron-icon icon="search" @click="${this._doSearch}" slot="prefix"></iron-icon>
-                    </paper-input>
-                    <paper-autocomplete-suggestions id="autocomplete" for="search" source="${this._suggestions}" remote-source></paper-autocomplete-suggestions>
-                    <slot></slot>
-                    
-                    <slot name="searchButton"></slot>
+            <form id="searchPageForm" method="get" action="${this.action}" accept="text/html" @submit="${this._handleSubmit}">
+                <slot name="beforeInput"></slot>
+                <div class="input-wrapper">
+                    <input
+                        id="search"
+                        name="query"
+                        type="search"
+                        placeholder="${translate(this.placeHolder)}"
+                        .value="${this.value}"
+                        @keyup="${this._handleEnter}"
+                        list="suggestions"
+                        part="input"
+                    />
+                    <datalist id="suggestions"></datalist>
+                    <slot name="searchButton" part="search-button"></slot>
                     <slot name="resetButton"></slot>
-                    
-                </form>
-            </iron-form>
+                </div>
+                <slot></slot>
+            </form>
             <iron-ajax
                 id="autocompleteLoader"
                 verbose
@@ -195,32 +174,54 @@ export class PbSearch extends pbMixin(LitElement) {
     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: inline-block;
             }
-            a{
-                padding:1rem;
-                color:var(--pb-reset-color);
+            .input-wrapper {
+                display: flex;
+                align-items: center;
             }
-            .buttons{
-                margin-top:1rem;
-            }
-	    form {
-                margin: 0;
+            #search {
+                flex: 2;
             }
         `;
     }
 
+    _serializeForm() {
+        const form = this.shadowRoot.getElementById('searchPageForm');
+        const formData = new FormData(form);
+        const json = {};
+        // @ts-ignore - FormData.entries() is supported in modern browsers
+        for (let [key, value] of formData.entries()) {
+            json[key] = value;
+        }
+        
+        // Also collect form controls from slots
+        const formControls = this.querySelectorAll('input, select, textarea');
+        formControls.forEach(control => {
+            if (control.name && control.type !== 'button' && control.type !== 'submit' && control.type !== 'reset') {
+                if (control.type === 'checkbox' || control.type === 'radio') {
+                    if (control.checked) {
+                        json[control.name] = control.value;
+                    }
+                } else {
+                    json[control.name] = control.value;
+                }
+            }
+        });
+        
+        return json;
+    }
+
     _doSearch(pagination = false) {
-        let json = this.shadowRoot.getElementById('ironform').serializeForm();
+        let json = this._serializeForm();
         json = this._paramsFromSubforms(json);
-        // remove unnecessary param added by autocomplete
-        delete json['autocomplete-custom-template'];
-        // always start on first result after submitting new search
         json.start = pagination ? this.start : 1;
         if (this.redirect) {
-            window.location.href = `${this.action}?${new URLSearchParams(json)}`;
+            const params = new URLSearchParams();
+            Object.keys(json).forEach(key => {
+                params.append(key, json[key]);
+            });
+            window.location.href = `${this.action}?${params}`;
         } else {
             registry.commit(this, json);
             this.emitTo('pb-load', {
@@ -230,6 +231,11 @@ export class PbSearch extends pbMixin(LitElement) {
         }
     }
 
+    _handleSubmit(e) {
+        e.preventDefault();
+        this._doSearch();
+    }
+
     _paramsFromSubforms(params) {
         if (this.subforms) {
             document.querySelectorAll(this.subforms).forEach((form) => {
@@ -243,32 +249,43 @@ export class PbSearch extends pbMixin(LitElement) {
 
     _handleEnter(e) {
         if (e.keyCode === 13) {
-            this._doSearch();
+            return this._doSearch();
+        }
+        const value = this.shadowRoot.getElementById('search').value;
+        if (value.length > 2) {
+            const loader = this.shadowRoot.getElementById('autocompleteLoader');
+            loader.params = {
+                query: value
+            };
+            loader.generateRequest();
         }
     }
 
     _doSubmit() {
-        this.shadowRoot.getElementById('ironform').submit();
+        this._doSearch();
     }
 
-    _reset(){
-        this.shadowRoot.getElementById('ironform').reset();
-    }
-
-    _autocomplete(ev) {
-        const params = this.shadowRoot.getElementById('ironform').serializeForm();
-        const loader = this.shadowRoot.getElementById('autocompleteLoader');
-        loader.params = params;
-        loader.generateRequest();
+    _reset() {
+        const form = this.shadowRoot.getElementById('searchPageForm');
+        form.reset();
+        registry.commit(this, {}, true);
     }
 
     _updateSuggestions() {
-        const autocomplete = this.shadowRoot.getElementById('autocomplete');
         const loader = this.shadowRoot.getElementById('autocompleteLoader');
+        const datalist = this.shadowRoot.getElementById('suggestions');
         if (loader.lastResponse) {
-            autocomplete.suggestions(loader.lastResponse);
+            datalist.innerHTML = '';
+            loader.lastResponse.forEach(({text, value}) => {
+                const option = document.createElement('option');
+                option.value = value;
+                option.innerText = text;
+                datalist.appendChild(option);
+            });
         }
     }
-
 }
-customElements.define('pb-search', PbSearch);
+if (!customElements.get('pb-search')) {
+    customElements.define('pb-search', PbSearch);
+}
+