search-box.html

<script src="../webcomponentsjs/webcomponents-loader.js"></script>
<link rel="import" href="../polymer/polymer-element.html">
<link rel="import" href="editable-button.html">
<link rel="import" href="search-strategy.html">

<!--
A Polymer Element using for free text search.

### Example
```html
<search-box
  date-config='{"dateStart": "postingDate", "dateEnd": "postingDate"}'
  search-fields-config="[[searchFieldsConfig]]"
  free-text-search-fields="[[freeTextSearchFields]]"
  search-parameters="{{searchParameters}}"
  process-request="{{processRequest}}">
</search-box>
```
@customElement
@polymer
-->

<dom-module id="search-box">
  <template>
    <style>
      :host {
        display: inline-block;
        width: 100%;
        margin-left: 20px;
      }

      #searchBoxHost {
        display: flex;
        align-items: center;
      }

      #searchBox {
        display: flex;
        flex-basis: 100%;
        justify-content: space-around;
        width: 100%;
        border: 1px solid grey;
        border-radius: 5px;
        align-items: center;
      }

      #searchInput {
        display: flex;
        flex-basis: 0;
        flex-grow: 1;
        width: 100%;
        height: 100%;
        vertical-align: middle;
        margin-left: 10px;
        --paper-input-container: {
          /* Make the height of the input element equal 30px. */
          padding: 4px 0 2px;
          width: 100%;
        }
        --paper-input-container-input: {
          color: white;
          display: block;
          font-size: 18px;
          height: 20px;
          line-height: 20px;
        }
        --paper-input-container-underline: {
          display: none;
        };
        --paper-input-container-underline-focus: {
          display: none;
        };
        --paper-input-container-underline-disabled: {
          display: none;
        };
      }

      #searchInput iron-icon {
        display: block;
        height: 20px;
        width: 20px;
        min-height: 20px;
        min-width: 20px;
        margin: 0 5px;
      }

      paper-dialog {
        width: 100%;
        height: 100%;
      }
      
      #searchEditableButtons {
        display: flex;
        flex-basis: auto;
        max-width: 70%;
        flex-wrap: wrap;
        flex-direction: row-reverse;
        justify-content: flex-end;
      }

      .editableButtons {
        display: inline-flex;
      }

      #searchButton, #searchClearButton {
        display: flex;
        flex-basis: auto;
        height: 30px;
        width: 30px;
        min-height: 30px;
        min-width: 30px;
        padding: 0px;
        margin: 0px 5px;
      }

      #searchButton:hover, #searchClearButton:hover {
        color: greenyellow;
      }

      paper-textarea {
        min-height: 10px;
      }

      search-strategy {
        margin-top: 4px;
      }
    </style>

    <div id="searchBoxHost">
      <div id="searchBox">
        <paper-input
          id="searchInput"
          no-label-float
          value={{inputContent::input}}
          placeholder="Enter Search Keywords">
        </paper-input>
        <div id="searchEditableButtons">
          <template is="dom-repeat" items="{{editableButtonItems}}" as="item">
            <editable-button 
              id$="editableButton_[[item.id]]"
              class="editableButtons"
              field-icon="[[item.fieldIcon]]"
              field-name="[[item.fieldName]]"
              field-style-class="[[item.fieldStyle]]"
              content="{{item.content}}"
              remove="[[item.remove]]"
              display-content="{{item.displayContent}}"
              selected="{{item.selected}}"
              on-content-changed="handleEditableButtonContentChange"
              on-remove-changed="handleEditableButtonRemove"
              on-selected-changed="handleEditableButtonFieldChange">
            </editable-button>
          </template>
        </div>
      </div>
      <paper-icon-button 
        id="searchButton"
        icon="search" 
        on-tap="onTapSearchButton" 
        title="Search">
      </paper-icon-button>
      <paper-icon-button
        id="searchClearButton"
        icon="clear"
        on-tap="onTapClearSearchButton"
        title="Clear All Search Terms">
      </paper-icon-button>
    </div>

    <div id="searchStrategyHost">
      <template is="dom-if" if="[[showSearchStrategy]]">
        <search-strategy 
          free-text-search-fields="[[freeTextSearchFields]]" 
          selected-field="{{selectedField}}">
        </search-strategy>
      </template>
    </div>
  </template>

  <script>
    
    class SearchBox extends Polymer.Element {
      // returns the name of the component
      static get is() {
        return 'search-box';
      }

      // defines the component's properties
      static get properties() {
        return {
         /**
          * (Optional)
          *
          * The icon property in the data in the searchFieldsConfig.
          *
          * @type {String}
          * @default 'title'
          */
          dataIconProperty: {
            type: String,
            value: 'icon'
          },
         /**
          * (Optional)
          *
          * The key property in the data in the searchFieldsConfig.
          *
          * @type {String}
          * @default 'key'
          */
          dataKeyProperty: {
            type: String,
            value: 'key'
          },
         /**
          * (Optional)
          *
          * The data property in the searchFieldsConfig.
          *
          * @type {String}
          * @default 'data'
          */
          dataProperty: {
            type: String,
            value: 'data'
          },
         /**
          * (Optional)
          *
          * The style class property in the data in the searchFieldsConfig.
          *
          * @type {String}
          * @default 'title'
          */
          dataStyleClassProperty: {
            type: String,
            value: 'styleClass'
          },
         /**
          * (Optional)
          *
          * The title property in the data in the searchFieldsConfig.
          *
          * @type {String}
          * @default 'title'
          */
          dataTitleProperty: {
            type: String,
            value: 'title'
          },
         /**
          * (Optional)
          *
          * The keys of dates in the searchFieldsConfig mapped to the keys of dates in the searchParameters.
          *
          * @type {Object}
          * @default {}
          */
          dateConfig: {
            type: Object,
            value: function() {
              return {};
            }
          },
         /**
          * (Optional)
          *
          * The editable button items used to generate editablebutton components.
          *
          * @type {Array}
          * @default []
          */
          editableButtonItems: {
            type: Array,
            notify: true
          },
         /**
          * (Optional)
          *
          * The fields used for free text search.
          *
          * @type {Array}
          * @default []
          */
          freeTextSearchFields: {
            type: Array
          },
         /**
          * (Optional)
          *
          * The input string entered by user.
          *
          * @type {String}
          * @default ''
          */
          inputContent: {
            type: String,
            observer: 'inputContentObserver'
          },
         /**
          * (Optional)
          *
          * The name property in the searchFieldsConfig.
          *
          * @type {String}
          * @default 'name'
          */
          nameProperty: {
            type: String,
            value: 'name',
          },
         /**
          * (Optional|Output)
          *
          * The network expansion parameters passed in.
          *
          * @type {Object}
          */
          networkExpansionParameters: {
            type: Object,
            notify: true
          },
         /**
          * (Optional|Output)
          *
          * Whether to let queries run.
          *
          * @type {Boolean}
          * @default false
          */
          processRequest: {
            type: Boolean,
            value: false,
            notify: true
          },
         /**
          *
          * The search fields used for generate search parameters and editable buttons.
          *
          * @type {Array}
          */
          searchFields: {
            type: Array,
            computed: 'createSearchFields(searchFieldsConfig, dataProperty, nameProperty, typeProperty, dataIconProperty, dataKeyProperty, dataStyleClassProperty, dataTitleProperty)'
          },
         /**
          * (Required|Output)
          *
          * A list of objects that correspond to groupings of search fields.
          *
          * @type {Array}
          */
          searchFieldsConfig: {
            type: Array
          },
         /**
          * (Required|Output)
          *
          * The search parameters created from the terms in the search box.
          *
          * @type {Object}
          */  
          searchParameters: {
            type: Object,
            notify: true,
            reflectToAttribute: true
          },
         /**
          *
          * The selected editable button when editing its content.
          *
          * @type {Object}
          */  
          selectedEditableButton: {
            type: Object,
            value: null
          },
         /**
          *
          * The selected field chosen from search strategy.
          *
          * @type {String}
          */ 
          selectedField: {
            type: String,
            notify: true,
            value: null
          },
         /**
          *
          * If to show the search startegy for field selection.
          *
          * @type {Boolean}
          * @default false
          */
          showSearchStrategy: {
            type: Boolean,
            value: false
          },
         /**
          *
          * Timeout setting for showing search strategy.
          *
          * @type {Number}
          */
          timeoutReference: {
            type: Number
          },
         /**
          * (Optional)
          *
          * The type property in the searchFieldsConfig.
          *
          * @type {String}
          * @default 'type'
          */
          typeProperty: {
            type: String,
            value: 'type',
          }
        };
      }

      // observers
      static get observers() {
        return [
          'searchParametersObserver(searchParameters.*)',
          'selectedFieldObserver(selectedField)'
        ];
      }
      
      // ready
      ready() {
        super.ready();
        // handle input content press enter
        this.$.searchInput.addEventListener('keypress', e => {
          if(e.keyCode === 13) {
            // if there is input content
            if(this.inputContent.length !== 0) {
              // update search fields first
              this.updateSearchFieldsFromInputContent(this.selectedField, this.inputContent);
              // handle search
              this.handleSearch();
            } else {
              this.handleSearch();
            }
          }
        });
      }

     /**
      * Handle tap on search button.
      *
      */
      onTapSearchButton() {
        // if there is input contents
        if(this.inputContent.length !== 0) {
          // update search fields first
          this.updateSearchFieldsFromInputContent(this.selectedField, this.inputContent);
          // handle search
          this.handleSearch();
        } else {
          this.handleSearch();
        }
      }

     /**
      * Handle tap on clear search button.
      *
      */
      onTapClearSearchButton() {
        this.removeAllSearchTerms();
        this.handleSearch();
      }

     /**
      * Creates and returns the search fields shown in the dialog.
      *
      * @param {Array} config
      * @param {String} dataProperty
      * @param {String} nameProperty
      * @param {String} typeProperty
      * @param {String} dataIconProperty
      * @param {String} dataKeyProperty
      * @param {String} dataStyleClassProperty
      * @param {String} dataTitleProperty
      * @param {String} dataTypeProperty
      * @return {Array}
      */
      createSearchFields(config, dataProperty, nameProperty, typeProperty, dataIconProperty, dataKeyProperty, dataStyleClassProperty, dataTitleProperty) {
        var freeTextSearchFieldsKey = this.freeTextSearchFields.map(val => {return val.key;});
        return (config || []).map(dialogConfig => {
          var isDate = dialogConfig[typeProperty] === 'date';
          var isImage = dialogConfig[typeProperty] === 'image';
          return {
            data: dialogConfig[dataProperty].map(searchConfig => {
              var item = {
                icon: searchConfig[dataIconProperty],
                key: searchConfig[dataKeyProperty],
                styleClass: searchConfig[dataStyleClassProperty],
                title: searchConfig[dataTitleProperty],
                freeText: freeTextSearchFieldsKey.includes(searchConfig[dataKeyProperty]),
                type: searchConfig['type']
              };

              if(!isImage) {
                item.value = isDate ? {} : [];
              }

              if(!isImage && !isDate) {
                item.activateNetworkExpansion = false;
                item.activateNetworkExpansionPrevious = false;
                item.enableNetworkExpansion = (searchConfig.enableNetworkExpansion || false);
                item.requireOne = true;
                item.requireOnePrevious = true;
              }

              if(isImage) {
                item.excluded = [];
                item.images = [];
                item.required = [];
                item.selected = [];
                item.union = [];
              }

              return item;
            }),
            isDate: isDate,
            isImage: isImage,
            name: dialogConfig[nameProperty]
          };
        });
      }

     /**
      * Clear input content in the search box.
      *
      */
      clearInputContent() {
        this.inputContent = '';
      }

     /**
      * Open search strategy.
      *
      */
      openSearchStrategy() {
        this.timeoutReference = false;
        if(!this.showSearchStrategy && this.freeTextSearchFields.length !== 0) {
          this.showSearchStrategy = true;
        }
      }

     /**
      * Close search strategy and reset timeout.
      *
      */
      closeSearchStrategy() {
        if(this.timeoutReference) {
          Polymer.Async.timeOut.cancel(this.timeoutReference);
        }
        this.showSearchStrategy = false;
        this.selectedField = null;
      }

     /**
      * Handle search
      * Update search fields, search parameters and editable buttons.
      *
      */
      handleSearch() {
        // update search fields
        this.updateSearchParametersFromFields(this.searchParameters);

        // update editableButtonItems
        this.updateEditableButtonItems(this.searchParameters);

        // clear and close
        this.clearInputContent();
        this.closeSearchStrategy();

        // notify searchParameters change
        this.notifyPath('searchParameters.*', this.searchParameters);

        if(this.areSearchParametersDisabled(this.searchParameters)) {
          this.removeAllSearchTerms();
          return;
        }
      }
      
     /**
      * Handle search no updates
      *
      */
      handleSearchWithoutUpdateSearchParameters() {
        // clear and close
        this.clearInputContent();
        this.closeSearchStrategy();
      }

     /**
      * Observe selected fields change and handle search
      *
      */
      selectedFieldObserver() {
        if(this.freeTextSearchFields.length != 0 && this.showSearchStrategy && this.selectedField != null && this.inputContent.length != 0) {
          // update search fields first
          this.updateSearchFieldsFromInputContent(this.selectedField, this.inputContent);
          // handle search
          this.handleSearch();
        } else if(this.freeTextSearchFields.length != 0 && this.showSearchStrategy && this.selectedField != null && this.selectedEditableButton != null) {
          // update search fields from new field
          this.updateSearchFieldsFromNewEditableButtonField(this.selectedField.fieldTitle, this.selectedEditableButton.fieldName, this.selectedEditableButton.content);
          // handle search
          this.handleSearch();
          // reset selected editable button
          this.selectedEditableButton = null;
        }
      }

     /**
      * Observe editable button field change, set selectedEditableButton flag
      * @param {Object} event
      */
      handleEditableButtonFieldChange(e) {
        // show search strategy
        this.openSearchStrategy();
        // change selected editable button
        this.selectedEditableButton = e.model.item;
      }

     /**
      * Observe editable button content change and handle search
      * @param {Object} event
      */
      handleEditableButtonContentChange(e) {
        let field = e.model.item.fieldName;
        let oldContent = e.model.item.content;
        let newContent = e.detail.value;
        if(oldContent !== newContent && newContent.length !== 0) {
          this.updateSearchFieldsFromNewEditableButtonContent(field, newContent, oldContent);
          this.handleSearch();
        } else if(newContent.length === 0) {
          this.updateSearchFieldsFromRemoveEditableButton(field, oldContent, e.model.date, e.model.id);
          this.handleSearch();
        }
      }

     /**
      * Observe editable button remove change, remove the button and handle search
      * @param {Object} event
      */
      handleEditableButtonRemove(e) {
        let item = e.model.item;
        if(e.detail.value === true) {
          // update search field
          this.updateSearchFieldsFromRemoveEditableButton(item.fieldName, item.content, item.date, item.id);
          // handle search
          this.handleSearch();
        }
      }

     /**
      * Update search fields from input content by pressing enter or search button or choosing search field
      * @param {Object} selectedField
      * @param {String} content
      */
      updateSearchFieldsFromInputContent(selectedField, content) {
        var self;
        var fieldTitle;
        if(selectedField !== null) {
          fieldTitle = selectedField.fieldTitle;
        } else {
          fieldTitle = this._getContentField(content);
          // fieldTitle = 'Description';
        }
        this.searchFields.forEach(function(dialogConfig) {
          dialogConfig.data.forEach(function(searchConfig) {
            searchConfig.activateNetworkExpansionPrevious = searchConfig.activateNetworkExpansion;
            searchConfig.requireOnePrevious = searchConfig.requireOne;
            if(searchConfig.title === fieldTitle) {
              // add the content into field value
              searchConfig.value.push(content);
            }
          });
        });
      }

     /**
      * Automatic select phone, email, date field for specific content
      * @param {String} content
      */
      _getContentField(content) {
        // phone
        // (123) 456-7890 (123)456-7890 123-456-7890 123.456.7890 1234567890 +1234567890
        var fields = {}
        this.searchFields.map((dialogConfig) => {
          dialogConfig.data.map((searchConfig) => {
            fields[searchConfig.type] = searchConfig.title;
          });
        });
        var re_phone = RegExp(/^[\+]?[(]?[0-9]{3}[)]?[-\s\.]?[0-9]{3}[-\s\.]?[0-9]{4,6}$/im);
        if(re_phone.test(content) && 'phone' in fields) {
          return fields['phone'];
        }
        // email
        var re_email = RegExp(/^(([^<>()\[\]\.,;:\s@\"]+(\.[^<>()\[\]\.,;:\s@\"]+)*)|(\".+\"))@(([^<>()[\]\.,;:\s@\"]+\.)+[^<>()[\]\.,;:\s@\"]{2,})$/i);
        if(re_email.test(content) && 'email' in fields) {
          return fields['email'];
        }
        // date
        var re_date = RegExp(/^(0?[1-9]|1[012])[\/\-](0?[1-9]|[12][0-9]|3[01])[\/\-]\d{4}$/);
        if(re_date.test(content)) {
          // need to implement
        }
        // default
        return 'Description';
      }

     /**
      * Update search fields from EditableButton field change
      * @param {String} newField
      * @param {String} oldField
      * @param {String} content
      */
      updateSearchFieldsFromNewEditableButtonField(newField, oldField, content) {
        this.searchFields.forEach(function(dialogConfig) {
          dialogConfig.data.forEach(function(searchConfig) {
            searchConfig.activateNetworkExpansionPrevious = searchConfig.activateNetworkExpansion;
            searchConfig.requireOnePrevious = searchConfig.requireOne;
            if(searchConfig.title === newField) {
              // add the content into new field value
              searchConfig.value.push(content);
            } else if(searchConfig.key === oldField) {
              // remove the content from old field
              searchConfig.value = searchConfig.value.filter(val => val !== content);
            }
          });
        });
      }

     /**
      * Update search fields from EditableButton content change
      * @param {String} field
      * @param {String} oldContent
      * @param {String} newContent
      */
      updateSearchFieldsFromNewEditableButtonContent(field, newContent, oldContent) {
        this.searchFields.forEach(function(dialogConfig) {
          dialogConfig.data.forEach(function(searchConfig) {
            searchConfig.activateNetworkExpansionPrevious = searchConfig.activateNetworkExpansion;
            searchConfig.requireOnePrevious = searchConfig.requireOne;
            if(searchConfig.key === field) {
              // replace the old content with new content
              searchConfig.value = searchConfig.value.map(val => {
                return val === oldContent ? newContent : val;
              });
            }
          });
        });
      }

    /**
     * Update search fields when remove editable button or the content length is 0
     * @param {String} field
     * @param {String} content
     * @param {String} date
     * @param {String} id
     */
     updateSearchFieldsFromRemoveEditableButton(field, content, date, id) {
        this.searchFields.forEach(function(dialogConfig) {
          dialogConfig.data.forEach(function(searchConfig) {
            searchConfig.activateNetworkExpansionPrevious = searchConfig.activateNetworkExpansion;
            searchConfig.requireOnePrevious = searchConfig.requireOne;
            if(date !== undefined) {
              if(content.indexOf('+') === 0 || content.indexOf('-') === 0 || content.indexOf('<') === 0 || content.indexOf('>') === 0) {
                content = content.substring(1);
              }
              if(searchConfig.key === id) {
                if(Object.entries(searchConfig.value)[0][1].text === content) {
                  searchConfig.value[id].enabled = false;
                }
              }
            } else {
              if(searchConfig.key === field) {
                // remove the old content
                searchConfig.value = searchConfig.value.filter(val => {
                  return val !== content;
                });
              }
            }
          });
        });
      }

     /**
      * Updates the searchParameters using the search fields.
      */
      updateSearchParametersFromFields() {
        var self = this;
        this.processRequest = false;
        if(this.searchFields) {
          this.searchFields.forEach((dialogConfig) => {
            if(dialogConfig.data) {
              dialogConfig.data.forEach((searchConfig) => {
                if(dialogConfig.isDate) {
                  self.updateDateParameterFromField(searchConfig);
                } else if(!dialogConfig.isImage && !dialogConfig.isDate) {
                  self.updateSearchParameterFromField(searchConfig);
                }
              });
            }
          });
        }
        this.processRequest = true;
      }

     /**
      * Updates the searchParameters and networkExpansionParameters using the given config object by adding or removing search terms.
      *
      * @param {Object} searchConfig
      */
      updateDateParameterFromField(searchConfig) {
        var parameterKey = this.dateConfig[searchConfig.key];
        // TODO Don't assume data structure.
        if(!_.isEmpty(searchConfig.value[searchConfig.key])) {
          var dateObject = searchConfig.value[searchConfig.key];
          this._updateDateParameterAndNotify(dateObject.key, dateObject.date, dateObject.text, dateObject.category, dateObject.enabled);
        } else if(this.searchParameters[parameterKey][searchConfig.key]) {
          this.searchParameters[parameterKey][searchConfig.key] = {};
          this.notifyPath(['searchParameters', parameterKey, searchConfig.key], {});
        }
      }

     /**
      * Updates the searchParameters with a new date object and notifies observers.
      *
      * @param {String} key
      * @param {Object} date
      * @param {String} text
      * @param {String} category
      * @param {Boolean} enabled
      */
      _updateDateParameterAndNotify(key, date, text, category, enabled) {
        var parameterKey = this.dateConfig[key];
        this.searchParameters[parameterKey][key] = this._buildSearchParameter(category, enabled, key, text, 'required', date);
        this.notifyPath(['searchParameters', parameterKey, key], this.searchParameters[parameterKey][key]);
      }

     /**
      * Updates the searchParameters and networkExpansionParameters using the given config object by adding or removing search terms.
      *
      * @param {Object} searchConfig
      */
      updateSearchParameterFromField(searchConfig) {
        var self = this;

        let field = searchConfig.key;

        var searchTermToSearchStatus = searchConfig.value.map(term => {
          return term.trim();
        }).reduce((searchTermToSearchStatus, term) => {
          var search = searchConfig.requireOne ? 'union' : 'optional';
          var key = term;

          // A prefixed term overrides searchConfig.requireOne.
          if(key.indexOf('+') === 0) {
            search = 'required';
            key = key.substring(1);
          }

          if(key.indexOf('-') === 0) {
            search = 'excluded';
            key = key.substring(1);
          }

          if(key.indexOf('<') === 0) {
            search = 'lessthan';
            key = key.substring(1);
          }

          if(key.indexOf('>') === 0) {
            earch = 'morethan';
            key = key.substring(1);
          }

          // TODO Move custom formatting.
          if(searchConfig.key === 'phone') {
            key = self._unformatPhones(key);
          }

          if(key) {
            searchTermToSearchStatus[key] = search;
          }

          return searchTermToSearchStatus;
        }, {});

        this.updateSearchParameterTerms(searchConfig, searchTermToSearchStatus);

        var activateNetworkExpansion = !!(this._isNetworkExpansionViable && searchConfig.activateNetworkExpansion);

        if(this.networkExpansionParameters[searchConfig.key] !== activateNetworkExpansion) {
          this.networkExpansionParameters[searchConfig.key] = activateNetworkExpansion;
          this.notifyPath(['networkExpansionParameters', searchConfig.key], this.networkExpansionParameters[searchConfig.key]);
        }
      }

     /**
      * Updates the searchParameters for the given searchConfig using the given search terms.
      *
      * @param {Object} searchConfig
      * @param {Array} searchTermToSearchStatus
      */
      updateSearchParameterTerms(searchConfig, searchTermToSearchStatus) {

        var self = this;

        _.keys(self.searchParameters[searchConfig.key]).forEach(function(term) {
          // Disable deleted terms.
          if(self.searchParameters[searchConfig.key][term].enabled && _.keys(searchTermToSearchStatus).indexOf(term) < 0) {
            self.searchParameters[searchConfig.key][term] = self._buildSearchParameter(searchConfig.title, false, term, term);
          }
        });

        _.keys(searchTermToSearchStatus).forEach(function(term) {
          // Add new terms.
          if(term) {
            self.searchParameters[searchConfig.key][term] = self._buildSearchParameter(searchConfig.title, true, term, term, searchTermToSearchStatus[term]);
          }
        });
      }

     /**
      *
      * A function that transforms search parameter data into a search parameter object.
      *
      * @param {String} category
      * @param {String} enabled
      * @param {String} key
      * @param {String} text
      * @param {String} search
      * @param {String} date
      */
      _buildSearchParameter(category, enabled, key, text, search, date) {
        return {
          category: category,
          date: date,
          enabled: enabled,
          key: key,
          search: search,
          text: text
        };
      }

     /**
      *
      * A function that returns whether all the search parameters in the given object are disabled (or empty).
      *
      * @param {Object} searchParameters
      */
      areSearchParametersDisabled(searchParameters) {
        return _.keys(searchParameters).every(function(type) {
          if(_.isEmpty(searchParameters[type])) {
            return true;
          }
          return _.keys(searchParameters[type]).every(function(term) {
            return !searchParameters[type][term].enabled;
          });
        });
      }
      
     /**
      * Observe input content and set timeout
      *
      */
      inputContentObserver() {
        let self = this;
        if(this.timeoutReference) {
          Polymer.Async.timeOut.cancel(this.timeoutReference);
        }
        this.timeoutReference = Polymer.Async.timeOut.run(() => self.openSearchStrategy(), 1500);
      }

     /**
      * Observe search parameters for changes in the facet, and handle search
      *
      */
      searchParametersObserver() {
        this.updateEditableButtonItems(this.searchParameters);
        var self = this;
        if(this.searchFields) {
          this.searchFields.forEach(function(dialogConfig, dialogIndex) {
            if(dialogConfig.data) {
              dialogConfig.data.forEach(function(searchConfig, searchIndex) {
                if(dialogConfig.isDate) {
                  self.updateDateFieldFromParameter(searchConfig, ['searchFields', dialogIndex, 'data', searchIndex]);
                } else if(!dialogConfig.isImage && !dialogConfig.isDate) {
                  self.updateSearchFieldFromParameter(searchConfig, ['searchFields', dialogIndex, 'data', searchIndex]);
                }
              });
            }
          });
          this.handleSearchWithoutUpdateSearchParameters();
        }
      }

     /**
      * Updates the date input of the given config object using the searchParameters and notifies observers on the given path.
      *
      * @param {Object} searchConfig
      * @param {Array|String} updatePath
      */
      updateDateFieldFromParameter(searchConfig, updatePath) {
        var parameterKey = this.dateConfig[searchConfig.key];
        searchConfig.value = {};
        if(this.searchParameters[parameterKey][searchConfig.key]) {
          searchConfig.value[searchConfig.key] = this.searchParameters[parameterKey][searchConfig.key];
        }
        this.notifyPath(updatePath.concat('value'), searchConfig.value);
      }
      
     /**
      * Updates the search field input of the given config object using the searchParameters and notifies observers on the given path.
      *
      * @param {Object} searchConfig
      * @param {Array|String} updatePath
      */
      updateSearchFieldFromParameter(searchConfig, updatePath) {
        var self = this;
        var termData = Object.keys(this.searchParameters[searchConfig.key]).filter(function(term) {
          return self.getSearchParameterData(self.searchParameters[searchConfig.key][term]).enabled;
        }).map(function(term) {
          return self.getSearchParameterData(self.searchParameters[searchConfig.key][term]);
        });

        searchConfig.value = termData.map(function(data) {
          if(data.search === 'required') {
            return '+' + data.text;
          }
          if(data.search === 'excluded') {
            return '-' + data.text;
          }
          if(data.search === 'lessthan') {
            return '<' + data.text;
          }
          if(data.search === 'morethan') {
            return '>' + data.text;
          }
          return data.text;
        });

        searchConfig.activateNetworkExpansion = this.networkExpansionParameters[searchConfig.key] || searchConfig.activateNetworkExpansion;
        this.notifyPath(updatePath.concat(['activateNetworkExpansion']), searchConfig.activateNetworkExpansion);

        searchConfig.requireOne = !termData.length ? searchConfig.requireOne : termData.some(function(data) {
          return data.search === 'union';
        });
        this.notifyPath(updatePath.concat(['requireOne']), searchConfig.requireOne);
      }

     /**
      * Removes all of the search terms from fields in the dialog.
      */
      removeAllSearchTerms() {
        this._uploadedFiles = [];
        if(this.searchFields) {
          var self = this;
          this.searchFields.forEach(function(dialogConfig, dialogIndex) {
            if(dialogConfig.data) {
              dialogConfig.data.forEach(function(searchConfig, searchIndex) {
                if(dialogConfig.isDate) {
                  self.set(['searchFields', dialogIndex, 'data', searchIndex, 'value'], {});
                  self.set('searchConfig.activateNetworkExpansion', false);
                } else if(dialogConfig.isImage) {
                  self.set(['searchFields', dialogIndex, 'data', searchIndex, 'selected'], []);
                } else {
                  self.set(['searchFields', dialogIndex, 'data', searchIndex, 'value'], []);
                  self.set(['searchFields', dialogIndex, 'data', searchIndex, 'requireOne'], true);
                  if(searchConfig.enableNetworkExpansion) {
                    self.set(['searchFields', dialogIndex, 'data', searchIndex, 'activateNetworkExpansion'], false);
                  }
                }
              });
            }
          });
        }
      }

     /**
      * Update editable button items from changes in serach parameters.
      *
      * @param {Object} searchParameters
      */
      updateEditableButtonItems(searchParameters) {
        var self = this;
        var items = [];
        Object.entries(searchParameters).map(entry => {
          var key = entry[0];
          var value = Object.values(entry[1]);
          if(value.length !== 0) {
            value.map(v => {
              if(v.enabled) {
                let field = self.getField(key);
                let contentText = v.text;
                if(v.search === 'required') {
                  contentText = '+' + v.text;
                }
                if(v.search === 'excluded') {
                  contentText = '-' + v.text;
                }
                if(v.search === 'lessthan') {
                  contentText = '<' + v.text;
                }
                if(v.search === 'morethan') {
                  contentText = '>' + v.text;
                }
                items.push({
                  id: v.key,
                  fieldIcon: field.icon,
                  fieldStyle: field.styleClass,
                  fieldName: key,
                  content: contentText,
                  date: v.date,
                  remove: false,
                  search: v.search,
                  selected: false,
                  displayContent: self.getDisplayContent(contentText)
                });
              }
            });
          }
        });
        this.editableButtonItems = items;
      }

     /**
      * Get field icon from field key.
      *
      * @param {Object} fieldKey
      * @return {String}
      */
      getField(fieldKey) {
        let fieldIcon = {};
        this.searchFields.forEach((dialogConfig) => {
          if(dialogConfig.data) {
            dialogConfig.data.forEach((searchConfig) => {
              if(!dialogConfig.isDate && !dialogConfig.isImage) {
                if(searchConfig.key === fieldKey) {
                  fieldIcon.icon = searchConfig.icon;
                  fieldIcon.styleClass = searchConfig.styleClass;
                }
              }
            });
          }
        });
        return fieldIcon;
      }

     /**
      * Only display first 10 characters, add ellipsis at the end if content's length larger than 10
      * 
      * @param {String} content
      * @return {String}
      */
      getDisplayContent(content) {
        let displayContent = content;
        if(content.indexOf('+') === 0 || content.indexOf('-') === 0 || content.indexOf('<') === 0 || content.indexOf('>') === 0) {
          displayContent = displayContent.substring(1);
        }

        return displayContent.length > 10 ? displayContent.slice(0,10).concat('...') : displayContent;
      }

     /**
      * Get specific search parameter data
      * 
      * @param {Object} searchParameter
      * @return {Object}
      */
      getSearchParameterData(searchParameter) {
        return {
          enabled: searchParameter.enabled,
          search: searchParameter.search,
          text: searchParameter.text
        };
      }

     /**
      * Returns a string of unformatted phones separated by newlines.
      *
      * @param {String} phone
      * @return {String}
      */
      _unformatPhones(phone) {
        // Replace all delimiters (whitespace, commas, and, semicolons) with single spaces.
        return phone.replace(/[\s,;]/g, ' ')
          // Remove all non-digit, non-whitespace characters.
          .replace(/[^\d\s]/g, '')
          // Remove extra spaces.
          .replace(/\s+/g, ' ')
          .trim();
      }
    }

    customElements.define(SearchBox.is, SearchBox);
  </script>
</dom-module>