search-fields-dialog.html

<!--
Copyright 2017 Next Century Corporation

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
-->

<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../polymer-fontawesome-iconset/fa-all.html">
<link rel="import" href="../auto-paginated-image-gallery/auto-paginated-image-gallery.html">
<link rel="import" href="../button-action/button-action.html">
<link rel="import" href="../image-gallery/image-gallery.html">
<link rel="import" href="../iron-flex-layout/iron-flex-layout-classes.html">
<link rel="import" href="../paper-input/paper-input.html">
<link rel="import" href="../paper-styles/color.html">
<link rel="import" href="../search-image-gallery/search-image-gallery.html">
<link rel="import" href="../styled-dialog/styled-dialog.html">
<link rel="import" href="../styled-dialog/styled-dialog-styles.html">
<link rel="import" href="../stylized-icon/stylized-icon.html">
<link rel="import" href="../vaadin-date-picker-display/vaadin-date-picker-display.html">
<link rel="import" href="../vaadin-upload/vaadin-upload.html">

<!--
A Polymer Element showing search fields in a configurable styled dialog.

### Example
```html
<search-fields-dialog
  date-config='{"dateStart": "postingDate", "dateEnd": "postingDate"}'
  search-fields-config="[[searchFieldsConfig]]"
  search-parameters="{{searchParameters}}"
  process-request="{{processRequest}}">
</search-fields-dialog>
```

@demo demo/index.html
-->

<dom-module id="search-fields-dialog">
  <template>
    <style include="iron-flex iron-flex-alignment"></style>
    <style include="styled-dialog-styles"></style>

    <style>
      :host {
        display: block;
        @apply --layout-horizontal;
      }

      stylized-icon {
        --stylized-icon-mixin: {
          padding: 0 5px;
        }
      }

      [slot="top"] {
        margin-bottom: 10px;
      }

      .header > button-action {
        margin: 5px 10px;
      }

      .footer {
        margin-top: 10px;
      }

      #searchDialog {
        --styled-dialog-min-width: 940px;
        --styled-dialog-max-width: 940px;
        --styled-dialog-style-mixin: {
          max-width: 980px;
          min-width: 980px;
          overflow: auto;
        };
        --styled-dialog-inside-style-mixin: {
          overflow: none;
        };
      }

      #searchDialog.backdrop {
        --styled-dialog-style-mixin: {
          max-width: 980px;
          min-width: 980px;
          opacity: 0.6;
          overflow: auto;
        };
      }

      .images-name,
      .search-name {
        font-size: 14px;
        font-weight: 500;
        max-width: var(--styled-dialog-label-width, 100px);
        min-width: var(--styled-dialog-label-width, 100px);
        overflow: hidden;
        text-align: end;
        text-overflow: ellipsis;
      }

      .images-name {
        padding-top: 20px;
      }

      .search-name {
        /* Vertically align the label with their paper-input-containers. */
        padding-top: 20px;
      }

      .search-data {
        margin-left: 10px;
      }

      vaadin-date-picker-display {
        display: inline-block;
        width: 360px;
        --date-picker-style-mixin: {
          padding-bottom: 0;
        };
      }

      paper-input {
        padding-bottom: 1px;
        width: 100%;
        --paper-input-container-color: var(--paper-grey-600);
        --paper-input-container-input-color: var(--paper-grey-900);
        --paper-input-container-focus-color: var(--paper-grey-900);
        --paper-input-container: {
          padding: 0;
        };
        --paper-input-container-input: {
          display: block;
          font-size: 14px;
          font-weight: 500;
          height: 20px;
          line-height: 20px;
          padding: 1px 0;
        };
        --paper-input-container-label: {
          font-size: 14px;
          font-weight: 500;
          height: 20px;
          line-height: 20px;
        };
      }

      .search-data paper-input {
        --paper-input-container: {
          padding: 0;
          width: 360px;
        }
      }

      .search-data paper-input.one-icon {
        --paper-input-container: {
          padding: 0;
          width: 330px;
        }
      }

      .search-data paper-input.two-icon {
        --paper-input-container: {
          padding: 0;
          width: 300px;
        }
      }

      .selected {
        background-color: var(--paper-grey-100);
      }

      .hovering {
        background-color: yellow;
      }

      auto-paginated-image-gallery {
        --auto-paginated-image-gallery-hovering-color: yellow;
        --auto-paginated-image-gallery-selected-color: var(--paper-grey-100);
        --auto-paginated-image-gallery-max-height: none;
        --auto-paginated-image-gallery-show-more-button: {
          margin-top: 10px;
        };
      }

      image-gallery,
      search-image-gallery {
        --image-gallery-hovering-color: yellow;
        --image-gallery-selected-color: var(--paper-grey-100);
      }

      search-image-gallery {
        margin: 15px 0 0 20px;
      }

      image-gallery.input-gallery {
        margin-right: 10px;
        /* Max Height = 1 Row of Images */
        max-height: 160px;
        overflow: auto;
      }

      .link-data {
        margin: 10px;
      }

      vaadin-upload {
        margin: 10px;
        padding: 10px;
        --vaadin-upload-file-list: {
          display: none;
        };
      }

      .search-data icon-button {
        --icon-button-mixin: {
          /* Vertically align the icons with their label & paper-input-containers. */
          margin-top: 15px;
        };
      }

      .search-data stylized-icon {
        --stylized-icon-mixin: {
          /* Vertically align the icons with their label & paper-input-containers. */
          margin-top: 15px;
          padding: 5px 10px 0;
        };
      }

      #helpDialog {
        --styled-dialog-min-width: 0;
        --styled-dialog-max-width: 800px;
      }

      .help-text {
        color: var(--paper-grey-900);
        font-size: 16px;
        line-height: 18px;
        min-height: 18px;
      }

      .help-text > div {
        margin-left: 10px;
      }
    </style>

    <styled-dialog id="searchDialog" class$="[[_isBackdrop(_openedDialogHelp, _openedDialogImages)]]" fill modal opened="{{opened}}">
      <div slot="top" class="layout horizontal center center-justified header">
        <button-action icon="fa:search" text="Search" title="Run Search" on-tap="handleSearch"></button-action>
        <button-action icon="fa:question" text="Help" title="Open Help" on-tap="openHelp"></button-action>
        <template is="dom-if" if="[[!hideImages]]">
          <button-action icon="fa:picture-o" text="Images" title="View Images" on-tap="openImages"></button-action>
        </template>
        <button-action active="[[_showAdvanced]]" icon="fa:flask" text="Advanced" title="Toggle Advanced Options" on-tap="toggleShowAdvanced"></button-action>
        <button-action icon="fa:trash" text="Clear" title="Clear All Terms" on-tap="removeAllSearchTerms"></button-action>
        <button-action icon="fa:times" text="Cancel" title="Cancel Search" on-tap="cancelSearch"></button-action>
      </div>

      <template is="dom-repeat" items="[[_searchFields]]" as="dialogConfig">
        <div class="layout horizontal" style="margin-bottom: 0;">
          <template is="dom-if" if="[[dialogConfig.isDate]]">
            <div class="search-name">[[dialogConfig.name]]</div>
            <template is="dom-repeat" items="[[dialogConfig.data]]" as="searchConfig">
              <div class="layout horizontal search-data nowrap">
                <stylized-icon icon="[[searchConfig.icon]]" style-class="[[searchConfig.styleClass]]"></stylized-icon>

                <vaadin-date-picker-display
                  facet-key="value"
                  facets="{{searchConfig}}"
                  key="[[searchConfig.key]]"
                  category="[[searchConfig.title]]">
                </vaadin-date-picker-display>
              </div>
            </template>
          </template>

          <template is="dom-if" if="[[!dialogConfig.isDate]]">
            <template is="dom-if" if="[[dialogConfig.isImage]]">
              <div class="images-name">[[dialogConfig.name]]</div>
              <div class="layout vertical">
                <template is="dom-repeat" items="[[dialogConfig.data]]" as="searchConfig">
                  <search-image-gallery
                    large-image-style-class="[[largeImageStyleClass]]"
                    small-image-style-class="[[smallImageStyleClass]]"
                    excluded="{{searchConfig.excluded}}"
                    images="{{searchConfig.images}}"
                    required="{{searchConfig.required}}"
                    selected="{{searchConfig.selected}}"
                    union="{{searchConfig.union}}">
                  </search-image-gallery>
                </template>
              </div>
            </template>

            <template is="dom-if" if="[[!dialogConfig.isImage]]">
              <div class="search-name">[[dialogConfig.name]]</div>
              <div class="layout horizontal wrap">
                <template is="dom-repeat" items="[[dialogConfig.data]]" as="searchConfig">
                  <div class="layout horizontal nowrap search-data">
                    <stylized-icon icon="[[searchConfig.icon]]" style-class="[[searchConfig.styleClass]]"></stylized-icon>

                    <paper-input
                      class$="[[_getInputWidthStyleClass(searchConfig.enableNetworkExpansion, _showAdvanced)]]"
                      id$="input_[[searchConfig.key]]"
                      label="[[searchConfig.title]]"
                      value="{{searchConfig.value}}"
                      on-keyup="_didUserHitEnterKey">
                    </paper-input>

                    <template is="dom-if" if="[[_showAdvanced]]">
                      <div class="layout horizontal">
                        <template is="dom-if" if="[[searchConfig.enableNetworkExpansion]]">
                          <icon-button
                            active="[[_getNetworkExpansionButtonActiveStatus(searchConfig.activateNetworkExpansion, _isNetworkExpansionViable)]]"
                            bigger
                            class="network-expansion-icon"
                            icon="fa:arrows-alt"
                            padded
                            title-tooltip="Toggle Network Expansion of [[searchConfig.title]] (Currently [[_getButtonText(searchConfig.activateNetworkExpansion)]])"
                            on-tap="_toggleNetworkExpansion">
                          </icon-button>
                        </template>

                        <icon-button
                          active="[[searchConfig.requireOne]]"
                          bigger
                          class="require-one-icon"
                          icon="fa:asterisk"
                          padded
                          title-tooltip="Require at Least One Term from [[searchConfig.title]] (Currently [[_getButtonText(searchConfig.requireOne)]])"
                          on-tap="_toggleRequireOne">
                        </icon-button>
                      </div>
                    </template>
                  </div>
                </template>
              </div>
            </template>
          </template>
        </div>
      </template>

      <template is="dom-if" if="[[!hideImages]]">
        <div slot="bottom" class="footer">
          <div class="layout horizontal link-data">
            <paper-input
              no-label-float
              placeholder="Enter or Paste Image Links"
              value="{{_linksInput}}"
              on-keyup="_didUserHitEnterKeyOnLinksInput">
            </paper-input>

            <icon-button
              active="[[_linksInput]]"
              bigger
              disabled="[[!_linksInput]]"
              icon="fa:plus-circle"
              title-tooltip="Add Image Links"
              padded
              on-tap="_handleLinksInput">
            </icon-button>
          </div>

          <vaadin-upload
            accept="image/*"
            files="{{_uploadedFiles}}"
            method="POST"
            target="[[imageUploadUrl]]"
            on-upload-success="_handleImageFileUploadSuccess">
          </vaadin-upload>
        </div>
      </template>
    </styled-dialog>

    <styled-dialog id="helpDialog" header="Search Help" opened="{{_openedDialogHelp}}">
      <div class="help-text">
        Enter words or phrases as <strong>search terms</strong> in one or more text fields.
        Use <strong>commas</strong> to separate search terms.
      </div>
      <div class="help-text">
        A phrase of multiple words (without commas) is treated as a <strong>single</strong> search term (no quotation marks needed).
      </div>
      <div class="help-text">
        For any term, use a <strong>plus</strong> (<strong>+</strong>) to mark a <strong>required</strong> search term and a
        <strong>minus</strong> (<strong>-</strong>) to mark an <strong>excluded</strong> search term.
      </div>
      <div class="help-text">
        <span class="styled-dialog-right-space">Example:</span>
        <strong>+New York, New Jersey, -New Hampshire</strong>
      </div>
      <div class="help-text">
        For any number, use a <strong>greater than</strong> (<strong>&gt;</strong>) to mark a search term as a <strong>lower bound</strong>
        and a <strong>less than</strong> (<strong>&lt;</strong>) to mark a search term as an <strong>upper bound</strong>.
        All search results must have a term within that bounds.
      </div>
      <div class="help-text">
        <span class="styled-dialog-right-space">Example:</span>
        <strong>&gt;18, &lt;21</strong>
      </div>
      <div class="help-text">
        Click the <strong>SEARCH</strong> button or press the <strong>ENTER</strong> key to run the search.
        Click the <strong>RESET</strong> button to clear all terms.
      </div>
      <div class="help-text">
        Click the <strong>IMAGES</strong> button to show your uploaded images and image matches.
      </div>
      <div class="help-text">
        Click the <strong>ADVANCED</strong> button to show <strong>required grouping</strong> and <strong>network expansion</strong> options.
      </div>

      <div class="styled-dialog-divider"></div>

      <div class="help-text layout horizontal center">
        <stylized-icon active bigger class="require-one-icon" icon="fa:asterisk"></stylized-icon>
        <div>
          Click the <strong>asterisk</strong> button to activate a <strong>required grouping</strong> on all the search terms of a field.
          Search results must match <strong>at least one term from all required groupings</strong>.
          Terms marked as required (+) or excluded (-) are not included in the required grouping.
          This is helpful if you don't need to match multiple search terms simultaneously.
          For example, to find matches for any of the suburbs of New York City, you can activate a required grouping on the
          <strong>City</strong> field with the search terms <strong>New York, Bronx, Brooklyn, Manhattan, Queens</strong>.
        </div>
      </div>

      <div class="styled-dialog-divider"></div>

      <div class="help-text layout horizontal center">
        <stylized-icon active bigger class="network-expansion-icon" icon="fa:arrows-alt"></stylized-icon>
        <div class="layout vertical">
          <div>
            Click the <strong>expand</strong> button to activate <strong>network expansion</strong> on a field and run a <strong>multi-stage search</strong>:
            first, DIG finds results that match the search terms like normal;
            next, DIG finds results that match the terms in the network expansion fields from the results of the first search;
            then, DIG shows the combined results.
          </div>
          <div style="margin-top: 10px;">
            Network expansion will only work if one or more network expansion fields have one or more search terms.
            Please note that it may take a minute or more to run a search with network expansion activated.
          </div>
        </div>
      </div>
    </styled-dialog>

    <styled-dialog id="imagesDialog" fill header="Your Image Links and Uploaded Image Files" opened="{{_openedDialogImages}}">
      <div slot="top" class="styled-dialog-text">Click the check icon next to an image to see the image matches from the DIG data.</div>

      <image-gallery
        slot="top"
        class="input-gallery"
        large-image-style-class="[[largeImageStyleClass]]"
        select-word="View"
        unselect-word="Viewing"
        show-delete
        show-labels
        show-select
        small-image-style-class="[[smallImageStyleClass]]"
        image-name-property="id"
        images="{{images}}"
        processing="[[imagesProcessing]]"
        selected="{{_imagesSelected}}">
      </image-gallery>

      <div slot="top" class="styled-dialog-note">
        <strong>How does it work?</strong>
        Image matches are found by looking at the features in the image like faces, physical characteristics, hairstyle, dress, environment, and pose.  Better matches are shown first in the gallery.  To learn more, please visit <a href="http://www.ee.columbia.edu/ln/dvmm/memex/" target="_blank">here</a>.
      </div>

      <div slot="top" class="styled-dialog-divider"></div>

      <template is="dom-if" if="[[_imageResults.id]]">
        <div slot="top" class="styled-dialog-bold styled-dialog-tall">[[_imageResults.images.length]] DIG Image Matches</div>

        <div slot="top" class="styled-dialog-text">Click the check icon next to an image match to add it to your search.</div>

        <auto-paginated-image-gallery
          class="results-gallery"
          large-image-style-class="[[largeImageStyleClass]]"
          new-tab
          page-size="100"
          select-word="Add to Search"
          unselect-word="Added to Search"
          show-labels
          show-select
          show-select-preceding
          small-image-style-class="[[smallImageStyleClass]]"
          images="{{_imageResults.images}}"
          selected="{{_imageResults.selected}}">
        </auto-paginated-image-gallery>
      </template>

      <div slot="bottom" class="footer">
        <div class="layout horizontal link-data">
          <paper-input
            no-label-float
            placeholder="Enter or Paste Image Links"
            value="{{_linksInput}}"
            on-keyup="_didUserHitEnterKeyOnLinksInput">
          </paper-input>

          <icon-button
            active="[[_linksInput]]"
            bigger
            disabled="[[!_linksInput]]"
            icon="fa:plus-circle"
            title-tooltip="Add Image Links"
            padded
            on-tap="_handleLinksInput">
          </icon-button>
        </div>

        <vaadin-upload
          accept="image/*"
          files="{{_uploadedFiles}}"
          method="POST"
          target="[[imageUploadUrl]]"
          on-upload-success="_handleImageFileUploadSuccess">
        </vaadin-upload>
      </div>
    </styled-dialog>
  </template>

  <script>
  (function() {
    /* globals _ */
    'use strict';

    Polymer({
      is: 'search-fields-dialog',

      properties: {
        /**
         * (Optional)
         *
         * A function that returns whether all the search parameters in the given object are disabled (or empty).
         *
         * @type {Object}
         * @default function
         */
        areSearchParametersDisabled: {
          type: Object,
          value: function() {
            return function(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;
                });
              });
            };
          }
        },

        /**
         * (Optional)
         *
         * A function that transforms search parameter data into a search parameter object.
         *
         * @type {Object}
         * @default function(category, enabled, key, text, search, date) { return { category: category, date: date, enabled: enabled, key: key, search: search, text: text }; }
         */
        buildSearchParameter: {
          type: Object,
          value: function() {
            return function(category, enabled, key, text, search, date) {
              return {
                category: category,
                date: date,
                enabled: enabled,
                key: key,
                search: search,
                text: text
              };
            };
          }
        },

        /**
         * (Output)
         *
         * Object containing the callbacks for the `search-fields-button` with properties `handleSearch` and `toggleDialog`.
         *
         * @type {Object}
         */
        buttonCallbacks: {
          notify: true,
          type: Object,
          value: function() {
            var self = this;
            return {
              handleSearch: function(freeTextSearchFields, freeText) {
                self.handleFreeTextSearch(freeTextSearchFields, freeText);
              },
              toggleDialog: function() {
                self.toggleSearchFieldsDialog();
              }
            };
          }
        },

        /**
         * (Optional)
         *
         * The data property in the searchFieldsConfig.
         *
         * @type {String}
         * @default 'data'
         */
        dataProperty: {
          type: String,
          value: 'data'
        },

        /**
         * (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 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 type property in the data in the searchFieldsConfig.
         *
         * @type {String}
         * @default 'type'
         */
        dataTypeProperty: {
          type: String,
          value: 'type'
        },

        /**
         * (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)
         *
         * A function that transforms a search parameter object into an object with "enabled", "search", and "text" properties.
         *
         * @type {Object}
         * @default function(searchParameter) { return { enabled: searchParameter.enabled, search: searchParameter.search, text: searchParameter.text }; }
         */
        getSearchParameterData: {
          type: Object,
          value: function() {
            return function(searchParameter) {
              return {
                enabled: searchParameter.enabled,
                search: searchParameter.search,
                text: searchParameter.text
              };
            };
          }
        },

        /**
         * (Optional)
         *
         * Whether to hide the image button and upload elements.
         *
         * @type {Boolean}
         * @default false
         */
        hideImages: {
          type: Boolean,
          value: false
        },

        /**
         * (Output)
         *
         * The list of image objects (links and/or file data) added and/or uploaded by the user.
         *
         * @type {Array}
         * @default []
         */
        images: {
          notify: true,
          type: Array,
          value: function() {
            return [];
          }
        },

        /**
         * (Optional)
         *
         * The list of image IDs corresponding to each ID in `images` that is processing.
         *
         * @type {Array}
         * @default []
         */
        imagesProcessing: {
          type: Array,
          value: function() {
            return [];
          }
        },

        /**
         * (Optional)
         *
         * The URL for the image uploads.
         *
         * @type {String}
         * @default '/uploadImage'
         */
        imageUploadUrl: {
          type: String,
          value: '/uploadImage'
        },

        /**
         * (Optional)
         *
         * The prefix for the image URL for image field data.
         *
         * @type {String}
         * @default ''
         */
        imageUrlPrefix: {
          type: String,
          value: ''
        },

        /**
         * (Optional)
         *
         * The suffix for the image URL for image field data.
         *
         * @type {String}
         * @default ''
         */
        imageUrlSuffix: {
          type: String,
          value: ''
        },

        /**
         * (Optional)
         *
         * The style class for any image in a popup.
         *
         * @type {String}
         * @default ''
         */
        largeImageStyleClass: {
          type: String,
          value: ''
        },

        /**
         * (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 the dialog is opened.
         *
         * @type {Boolean}
         * @default false
         */
        opened: {
          notify: true,
          observer: '_updateFocusedInput',
          type: Boolean,
          value: false
        },

        /**
         * (Optional|Output)
         *
         * Whether to let queries run.
         *
         * @type {Boolean}
         * @default false
         */
        processRequest: {
          notify: true,
          type: Boolean,
          value: false
        },

        /**
         * (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 entered into the dialog.
         *
         * @type {Object}
         */
        searchParameters: {
          notify: true,
          type: Object
        },

        /**
         * (Optional)
         *
         * The style class for all the images in the galleries.
         *
         * @type {String}
         * @default ''
         */
        smallImageStyleClass: {
          type: String,
          value: ''
        },

        /**
         * (Optional)
         *
         * The type property in the searchFieldsConfig.
         *
         * @type {String}
         * @default 'type'
         */
        typeProperty: {
          type: String,
          value: 'type'
        },

        /**
         * An object containing the list of image results and the list of selected image IDs to be shown in the images dialog.
         *
         * @type {Object}
         * @default {images:[],selected:[]}
         * @private
         */
        _imageResults: {
          type: Object,
          value: function() {
            return {
              images: [],
              selected: []
            };
          }
        },

        /**
         * The list of image IDs corresponding to each ID in `images` that is selected.
         *
         * @type {Array}
         * @default []
         * @private
         */
        _imagesSelected: {
          type: Array,
          value: function() {
            return [];
          }
        },

        /**
         * Whether network expansion is viable based on the fields and values.
         *
         * @type {Boolean}
         * @default false
         * @private
         */
        _isNetworkExpansionViable: {
          type: Boolean,
          value: false
        },

        /**
         * The image links entered by the user.
         *
         * @type {String}
         * @default ''
         * @private
         */
        _linksInput: {
          type: String,
          value: ''
        },

        /**
         * Whether the help dialog is opened.
         *
         * @type {Boolean}
         * @default false
         * @private
         */
        _openedDialogHelp: {
          observer: '_updateFocusedInput',
          type: Boolean,
          value: false
        },

        /**
         * Whether the images dialog is opened.
         *
         * @type {Boolean}
         * @default false
         * @private
         */
        _openedDialogImages: {
          observer: '_updateFocusedInput',
          type: Boolean,
          value: false
        },

        /**
         * The search fields shown in the dialog.
         *
         * @type {Array}
         * @private
         */
        _searchFields: {
          computed: '_createSearchFields(searchFieldsConfig, dataProperty, nameProperty, typeProperty, dataIconProperty, dataKeyProperty, dataStyleClassProperty, dataTitleProperty, dataTypeProperty)',
          type: Array
        },

        /**
         * Whether to show the advanced options (network expansion, required groupings).
         *
         * @type {Boolean}
         * @default false
         * @private
         */
        _showAdvanced: {
          type: Boolean,
          value: false
        },

        /**
         * The list of uploaded files.
         *
         * @type {Array}
         * @private
         */
        _uploadedFiles: {
          type: Array
        }
      },

      observers: [
        '_handleImagesSelected(_imagesSelected)',
        '_handleImageResultsModified(_imageResults.id, _imageResults.images)',
        '_handleImageResultsSelected(_imageResults.selected)'
      ],

      /**
       * 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}
       * @private
       */
      _createSearchFields: function(config, dataProperty, nameProperty, typeProperty, dataIconProperty, dataKeyProperty, dataStyleClassProperty, dataTitleProperty, dataTypeProperty) {
        var self = this;
        return (config || []).map(function(dialogConfig) {
          var isDate = dialogConfig[typeProperty] === 'date';
          var isImage = dialogConfig[typeProperty] === 'image';
          return {
            data: dialogConfig[dataProperty].map(function(searchConfig) {
              var item = {
                icon: searchConfig[dataIconProperty],
                key: searchConfig[dataKeyProperty],
                styleClass: searchConfig[dataStyleClassProperty],
                title: searchConfig[dataTitleProperty],
                type: searchConfig[dataTypeProperty]
              };

              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]
          };
        });
      },

      /**
       * Updates the searchParameters using the search fields and closes the dialog if ENTER was pressed.
       *
       * @param {Object} event
       * @private
       */
      _didUserHitEnterKey: function(event) {
        this._updateNetworkExpansion();
        if(event.keyCode === 13) {
          this.handleSearch();
        }
      },

      /**
       * Updates the images using the links input if ENTER was pressed.
       *
       * @param {Object} event
       * @private
       */
      _didUserHitEnterKeyOnLinksInput: function(event) {
        if(event.keyCode === 13) {
          this._handleLinksInput();
        }
      },

      /**
       * Returns the text for the button with the given toggle status.
       *
       * @param {Boolean} on
       * @return {String}
       * @private
       */
      _getButtonText: function(on) {
        return on ? 'On' : 'Off';
      },

      /**
       * Returns the width style class of an input element.
       *
       * @param {Boolean} enableNetworkExpansion
       * @return {String}
       * @private
       */
      _getInputWidthStyleClass: function(enableNetworkExpansion, showAdvanced) {
        return showAdvanced ? (enableNetworkExpansion ? 'two-icon' : 'one-icon') : '';
      },

      /**
       * Returns whether network expansion for the button with the given toggle status is active.
       *
       * @param {Boolean} on
       * @param {Boolean} viable
       * @return {Boolean}
       * @private
       */
      _getNetworkExpansionButtonActiveStatus: function(on, viable) {
        return on && viable;
      },

      /**
       * Adds the uploaded file in the given upload response event object to the global list of images and opens the images dialog.
       *
       * @event upload-success
       * @param {Event} event
       * @private
       */
      _handleImageFileUploadSuccess: function(event) {
        if(event.detail && event.detail.xhr && event.detail.xhr.response) {
          var response = JSON.parse(event.detail.xhr.response);
          if(response.mimeType.indexOf('image') !== 0) {
            return;
          }

          // Use the map function to create a new array.
          this.set('images', this.images.map(function(object) {
            return object;
          }).concat({
            id: event.detail.file.name,
            source: 'data:' + response.mimeType + ';base64,' + response.base64,
            type: 'DATA'
          }));

          this.$.imagesDialog.open();
        }
      },

      /**
       * Sets the _imageResults using the given selected image ID and the hits in the global list of images corresponding to the given ID.
       *
       * @param {Array} selectedImageIds
       * @private
       */
      _handleImagesSelected: function(selectedImageIds) {
        if(!selectedImageIds.length) {
          this.set('_imageResults', {
            images: [],
            selected: []
          });
          return;
        }

        if(selectedImageIds.length > 1) {
          // Use the map function to create a new array.
          this.set('_imagesSelected', selectedImageIds.slice(selectedImageIds.length - 1).map(function(id) {
            return id;
          }));
          return;
        }

        var imageId = selectedImageIds[0];
        var imageIndex = _.findIndex(this.images.map(function(object) {
          return object.id;
        }), function(id) {
          return id === imageId;
        });

        if(imageIndex >= 0) {
          this.set('_imageResults', {
            id: imageId,
            images: this.images[imageIndex].hits || [],
            selected: []
          });
        }
      },

      /**
       * Sets the hits in the global list of images corresponding to the given ID to the given list.
       *
       * @param {Number|String} id
       * @param {Array} modifiedImages
       * @private
       */
      _handleImageResultsModified: function(id, modifiedImages) {
        var self = this;
        this.images.forEach(function(image, imageIndex) {
          if(image.id === id && image.hits.length !== modifiedImages.length) {
            self.set(['images', imageIndex, 'hits'], modifiedImages);
          }
        });
      },

      /**
       * Adds the images from the _imageResults using the given list of select image IDs to the selected images in the search fields.
       *
       * @param {Array} selectedImageIds
       * @private
       */
      _handleImageResultsSelected: function(selectedImageIds) {
        if(!selectedImageIds.length) {
          return;
        }

        var self = this;
        this._searchFields.forEach(function(dialogConfig, dialogIndex) {
          if(dialogConfig.isImage) {
            dialogConfig.data.forEach(function(searchConfig, searchIndex) {
              var imageIdsFromConfig = searchConfig.images.map(function(object) {
                return object.id;
              });

              var imageIdsNeededInConfig = selectedImageIds.filter(function(id) {
                return imageIdsFromConfig.indexOf(id) < 0;
              });

              var imagesNeededInConfig = self._imageResults.images.filter(function(object) {
                return imageIdsNeededInConfig.indexOf(object.id) >= 0;
              });

              if(imagesNeededInConfig.length) {
                // Use the map function to create a new array.
                self.set(['_searchFields', dialogIndex, 'data', searchIndex, 'images'], searchConfig.images.map(function(object) {
                  return object;
                }).concat(imagesNeededInConfig));
              }

              var imageIdsToSelectInConfig = selectedImageIds.filter(function(id) {
                return searchConfig.selected.indexOf(id) < 0;
              });

              if(imageIdsToSelectInConfig.length) {
                // Use the map function to create a new array.
                self.set(['_searchFields', dialogIndex, 'data', searchIndex, 'selected'], searchConfig.selected.map(function(id) {
                  return id;
                }).concat(imageIdsToSelectInConfig));
                self.set(['_searchFields', dialogIndex, 'data', searchIndex, 'union'], searchConfig.union.map(function(id) {
                  return id;
                }).concat(imageIdsToSelectInConfig));
              }
            });
          }
        });
      },

      /**
       * Adds the link(s) in the _linksInput (if non-empty) to the global list of images and opens the images dialog.
       *
       * @private
       */
      _handleLinksInput: function() {
        var links = this._linksInput.replace(/\s/g, ' ').split(' ').filter(function(link) {
          return !!link;
        });

        if(!links.length) {
          return;
        }

        // Use the map function to create a new array.
        this.set('images', this.images.map(function(object) {
          return object;
        }).concat(links.map(function(link) {
          return {
            id: link,
            source: link,
            type: 'LINK'
          };
        })));

        this.set('_linksInput', '');
        this.$.imagesDialog.open();
      },

      /**
       * Returns the backdrop style class.
       *
       * @param {Boolean} helpDialogOpened
       * @param {Boolean} imagesDialogOpened
       * @return {String}
       * @private
       */
      _isBackdrop: function(helpDialogOpened, imagesDialogOpened) {
        return helpDialogOpened || imagesDialogOpened ? 'backdrop' : '';
      },

      /**
       * Toggles the activateNetworkExpansion property of the searchConfig in the model of the given event.
       *
       * @event tap
       * @private
       */
      _toggleNetworkExpansion: function(event) {
        event.model.set('searchConfig.activateNetworkExpansion', !event.model.searchConfig.activateNetworkExpansion);
        this._updateNetworkExpansion();
      },

      /**
       * Toggles the requireOne property of the searchConfig in the model of the given event.
       *
       * @event tap
       * @private
       */
      _toggleRequireOne: function(event) {
        event.model.set('searchConfig.requireOne', !event.model.searchConfig.requireOne);
      },

      /**
       * Returns a string of unformatted phones separated by newlines.
       *
       * @param {String} phone
       * @return {String}
       * @private
       */
      _unformatPhones: function(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, '\n')
          .trim();
      },

      /**
       * 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
       * @private
       */
      _updateDateFieldFromParameter: function(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 searchParameters with a new date object and notifies observers.
       *
       * @param {String} key
       * @param {Object} date
       * @param {String} text
       * @param {String} category
       * @param {Boolean} enabled
       * @private
       */
      _updateDateParameterAndNotify: function(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 using the given date config object by adding or removing search terms.
       *
       * @param {Object} searchConfig
       * @private
       */
      _updateDateParameterFromField: function(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 focused input element.
       *
       * @private
       */
      _updateFocusedInput: function() {
        if(this.opened && !this._openedDialogHelp && !this._openedDialogImages) {
          var focusedInput;
          this._searchFields.forEach(function(dialogConfig, dialogIndex) {
            if(!focusedInput && !dialogConfig.isDate && !dialogConfig.isImage && dialogConfig.data) {
              focusedInput = '#input_' + dialogConfig.data[0].key;
            }
          });
          var self = this;
          setTimeout(function() {
            if(focusedInput && self.$$(focusedInput)) {
              self.$$(focusedInput).focus();
            }
          }, 250);
        }
      },

      /**
       * Updates the image gallery input of the given config object using the searchParameters and notifies observers on the given path.
       *
       * @param {Object} searchConfig
       * @param {Array|String} updatePath
       * @private
       */
      _updateImageGalleryFromParameter: function(searchConfig, updatePath) {
        var self = this;
        var images = _.keys(this.searchParameters[searchConfig.key]).filter(function(term) {
          return self.getSearchParameterData(self.searchParameters[searchConfig.key][term]).enabled;
        }).map(function(term) {
          var search = self.getSearchParameterData(self.searchParameters[searchConfig.key][term]).search;
          return {
            id: term,
            search: search || 'optional',
            source: self.imageUrlPrefix + term + self.imageUrlSuffix
          };
        });

        this.set(updatePath.concat('images'), images);
        // Use the map function to create a new array.
        this.set(updatePath.concat('selected'), images.map(function(object) {
          return object.id;
        }));
        this.set(updatePath.concat('union'), images.filter(function(object) {
          return object.search === 'union';
        }).map(function(object) {
          return object.id;
        }));
        this.set(updatePath.concat('required'), images.filter(function(object) {
          return object.search === 'required';
        }).map(function(object) {
          return object.id;
        }));
        this.set(updatePath.concat('excluded'), images.filter(function(object) {
          return object.search === 'excluded';
        }).map(function(object) {
          return object.id;
        }));
      },

      /**
       * Updates the searchParameters using the given search config object by adding or removing selected images.
       *
       * @param {Object} searchConfig
       * @private
       */
      _updateImageParameterFromGallery: function(searchConfig) {
        var self = this;
        var searchTermList = searchConfig.images.filter(function(object) {
          return searchConfig.selected.indexOf(object.id) >= 0;
        }).map(function(selected) {
          if(searchConfig.union.indexOf(selected.id) >= 0) {
            return {
              id: selected.id,
              search: 'union'
            };
          }
          if(searchConfig.required.indexOf(selected.id) >= 0) {
            return {
              id: selected.id,
              search: 'required'
            };
          }
          if(searchConfig.excluded.indexOf(selected.id) >= 0) {
            return {
              id: selected.id,
              search: 'excluded'
            };
          }
          return {
            id: selected.id,
            search: 'optional'
          };
        });

        this._updateSearchParameterTerms(searchConfig, searchTermList);
      },

      /**
       * Updates whether network expansion is active based on the active network expansion fields and values in network expansion fields.
       *
       * @private
       */
      _updateNetworkExpansion: function() {
        // Find all fields for which network expansion is active.
        var fields = this._searchFields.reduce(function(fields, dialogConfig) {
          return fields.concat(dialogConfig.data.filter(function(searchConfig) {
            return searchConfig.activateNetworkExpansion;
          }).map(function(searchConfig) {
            return searchConfig.title;
          }));
        }, []);

        // Find all values (search terms) in fields with the network expansion option.
        var values = this._searchFields.reduce(function(values, dialogConfig) {
          return values.concat(dialogConfig.data.filter(function(searchConfig) {
            return searchConfig.enableNetworkExpansion && !!(searchConfig.value.trim());
          }).map(function(searchConfig) {
            return searchConfig.value.trim();
          }));
        }, []).reduce(function(values, value) {
          // Split values into individual search terms.
          return values.concat(value.split(',').map(function(term) {
            return term.trim();
          }).filter(function(term) {
            return term && term !== '+' && term !== '-';
          }));
        }, []);

        this._isNetworkExpansionViable = (fields.length && values.length);
      },

      /**
       * 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
       * @private
       */
      _updateSearchFieldFromParameter: function(searchConfig, updatePath) {
        var self = this;
        var termData = _.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;
        }).join(', ');
        this.$$('#input_' + searchConfig.key).value = searchConfig.value;

        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);
      },

      /**
       * Updates the searchParameters with a new object and notifies observers.
       *
       * @param {String} type
       * @param {String} term
       * @param {String} title
       * @param {Boolean} enabled
       * @private
       */
      _updateSearchParameterAndNotify: function(type, term, name, enabled, search) {
        this.searchParameters[type][term] = this.buildSearchParameter(name, enabled, term, term, search);

        this.notifyPath(['searchParameters', type, '*'], this.searchParameters[type][term]);
      },

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

        var searchTermList = searchConfig.value.split(',').map(function(term) {
          var search = searchConfig.requireOne ? 'union' : 'optional';
          var key = term.trim();

          // A prefixed term overrides searchConfig.requireOne.
          if(key.indexOf('+') === 0) {
            search = 'required';
            key = key.substring(1);
          } else if(key.indexOf('-') === 0) {
            search = 'excluded';
            key = key.substring(1);
          } else if(key.indexOf('<') === 0) {
            search = 'lessthan';
            key = key.substring(1);
          } else if(key.indexOf('>') === 0) {
            search = 'morethan';
            key = key.substring(1);
          }

          // TODO Move custom formatting.
          if(searchConfig.type === 'number') {
            key = parseFloat(key) || '';
          } else if(searchConfig.type === 'phone') {
            key = self._unformatPhones(key);
          }

          // Ignore empty space but not zero.
          if(key !== '') {
            return {
              id: key,
              search: search
            };
          }

          return {};
        }).filter(function(item) {
          return !!item.id;
        });

        this._updateSearchParameterTerms(searchConfig, searchTermList);

        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 using the search fields in the dialog by adding or removing search terms.
       *
       * @private
       */
      _updateSearchParametersFromFields: function() {
        var self = this;

        this.processRequest = false;
        if(this._searchFields) {
          this._searchFields.forEach(function(dialogConfig) {
            if(dialogConfig.data) {
              dialogConfig.data.forEach(function(searchConfig) {
                if(dialogConfig.isDate) {
                  self._updateDateParameterFromField(searchConfig);
                } else if(dialogConfig.isImage) {
                  self._updateImageParameterFromGallery(searchConfig);
                } else {
                  self._updateSearchParameterFromField(searchConfig);
                }
              });
            }
          });
        }
        this.processRequest = true;
      },

      /**
       * Updates the searchParameters for the given searchConfig using the given search terms.
       *
       * @param {Object} searchConfig
       * @param {Array} searchTermList
       * @private
       */
      _updateSearchParameterTerms: function(searchConfig, searchTermList) {
        var self = this;

        _.keys(self.searchParameters[searchConfig.key]).forEach(function(term) {
          var index = _.findIndex(searchTermList, function(item) {
            return item.id === term;
          });
          // Remove old terms.
          if(self.searchParameters[searchConfig.key][term].enabled && index < 0) {
            delete self.searchParameters[searchConfig.key][term];
          }
        });

        searchTermList.forEach(function(item) {
          // Add new terms.
          if(item.id) {
            self.searchParameters[searchConfig.key][item.id] = self.buildSearchParameter(searchConfig.title, true, item.id, item.id, item.search);
          }
        });

        this.notifyPath(['searchParameters', searchConfig.key], this.searchParameters[searchConfig.key]);
      },

      /**
       * Cancels the changes to the search fields and closes the dialog.
       */
      cancelSearch: function() {
        this._uploadedFiles = [];
        this._searchFields.forEach(function(dialogConfig) {
          dialogConfig.data.forEach(function(searchConfig) {
            searchConfig.activateNetworkExpansion = searchConfig.activateNetworkExpansionPrevious;
            searchConfig.requireOne = searchConfig.requireOnePrevious;
          });
        });

        this.toggleSearchFieldsDialog();
      },

      /**
       * Updates the searchParameters using the free text and unlocks the query.
       *
       * @param {Array} freeTextSearchFields
       * @param {String} freeText
       */
      handleFreeTextSearch: function(freeTextSearchFields, freeText) {
        if(freeText && freeTextSearchFields && freeTextSearchFields.length) {
          var self = this;
          this.processRequest = false;
          freeTextSearchFields.forEach(function(searchFieldsObject) {
            self._updateSearchParameterFromField({
              key: searchFieldsObject.key,
              requireOne: true,
              title: searchFieldsObject.title,
              type: searchFieldsObject.type,
              value: freeText
            });
          });
          this.processRequest = true;
        }
      },

      /**
       * Updates the searchParameters using the search fields, closes the dialog, and unlocks the query.
       */
      handleSearch: function() {
        this._uploadedFiles = [];
        this._searchFields.forEach(function(dialogConfig) {
          dialogConfig.data.forEach(function(searchConfig) {
            searchConfig.activateNetworkExpansionPrevious = searchConfig.activateNetworkExpansion;
            searchConfig.requireOnePrevious = searchConfig.requireOne;
          });
        });

        this._updateSearchParametersFromFields();

        if(this.areSearchParametersDisabled(this.searchParameters)) {
          this.removeAllSearchTerms();
          return;
        }

        this.toggleSearchFieldsDialog();
      },

      /**
       * Opens the help dialog.
       */
      openHelp: function() {
        this.$.helpDialog.open();
      },

      /**
       * Opens the images dialog.
       */
      openImages: function() {
        this.$.imagesDialog.open();
      },

      /**
       * Removes all of the search terms from fields in the dialog.
       */
      removeAllSearchTerms: function() {
        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.$$('#input_' + searchConfig.key).value = '';
                  self.set(['_searchFields', dialogIndex, 'data', searchIndex, 'requireOne'], true);
                  if(searchConfig.enableNetworkExpansion) {
                    self.set(['_searchFields', dialogIndex, 'data', searchIndex, 'activateNetworkExpansion'], false);
                  }
                }
              });
            }
          });
        }
      },

      /**
       * Updates the search fields shown in the dialog using the search parameters if opening the dialog, then opens or closes the dialog.
       */
      toggleSearchFieldsDialog: function() {
        var self = this;

        // Set or clear the search fields whenever the dialog is opened.
        if(!this.opened && 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) {
                  self._updateImageGalleryFromParameter(searchConfig, ['_searchFields', dialogIndex, 'data', searchIndex]);
                } else {
                  self._updateSearchFieldFromParameter(searchConfig, ['_searchFields', dialogIndex, 'data', searchIndex]);
                }
              });
            }
          });
          this._updateNetworkExpansion();
        }

        if(this.opened) {
          this.$.searchDialog.close();
        } else {
          this.$.searchDialog.open();
        }
      },

      /**
       * Toggles the advanced options.
       */
      toggleShowAdvanced: function() {
        this._showAdvanced = !this._showAdvanced;
      }
    });
  })();
  </script>
</dom-module>