selected-facets-display.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="../breadbox-item/breadbox-item.html">
<link rel="import" href="../iron-flex-layout/iron-flex-layout-classes.html">
<link rel="import" href="../iron-icon/iron-icon.html">
<link rel="import" href="../iron-icons/iron-icons.html">
<link rel="import" href="../paper-styles/color.html">
<link rel="import" href="../lodash-import/lodash.html">

<!--
A Polymer Element providing a way to view and remove selected facets in a breadbox-item element.

### Example
```js
var facets = {
  city: {
    'New York, NY': {
      category: 'City',
      enabled: true,
      text: 'New York, NY'
    }
  }
};
```

```html
<selected-facets-display
  facet-key="city"
  facets="{{facets}}">
</selected-facets-display>
```

### Styling

`<selected-facets-display>` provides the following custom properties and mixins for styling:

Custom property                     | Description                           | Default
------------------------------------|---------------------------------------|--------
`--selected-facet-icon-color`       | The color of the icon(s).             | --paper-grey-900
`--selected-facet-icon-hover-color` | The color of the close icon on hover. | --paper-red-900
`--selected-facet-item-style-mixin` | The custom style mixin of the items.  | none
`--selected-facet-text-color`       | The text color of the items.          | --paper-grey-900

@demo demo/index.html
-->

<dom-module id="selected-facets-display">
  <template>
    <style include="iron-flex iron-flex-alignment iron-flex-factors"></style>

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

      breadbox-item {
        --breadbox-item-text-color: var(--selected-facet-text-color, var(--paper-grey-900));

        --breadbox-item-style-mixin: {
          margin-right: 5px;
          margin-bottom: 5px;
          @apply --selected-facet-item-style-mixin;
        };

        --breadbox-item-icon-style-mixin: {
          color: var(--selected-facet-icon-color, var(--paper-grey-900));
        };
      }

      iron-icon {
        --iron-icon-height: 15px;
        --iron-icon-width: 15px;
        color: var(--selected-facet-icon-color, var(--paper-grey-900));
        margin-left: 5px;
      }

      iron-icon:hover {
        color: var(--selected-facet-icon-hover-color, var(--paper-red-900));
        cursor: pointer;
      }

      .not-shown {
        display: none;
      }

      breadbox-item.amber {
        --breadbox-item-bg-color: var(--paper-amber-100);
      }

      breadbox-item.black {
        --breadbox-item-bg-color: #111;
      }

      breadbox-item.blue {
        --breadbox-item-bg-color: var(--paper-blue-100);
      }

      breadbox-item.blue-grey {
        --breadbox-item-bg-color: var(--paper-blue-grey-100);
      }

      breadbox-item.brown {
        --breadbox-item-bg-color: var(--paper-brown-100);
      }

      breadbox-item.cyan {
        --breadbox-item-bg-color: var(--paper-cyan-100);
      }

      breadbox-item.deep-orange {
        --breadbox-item-bg-color: var(--paper-deep-orange-100);
      }

      breadbox-item.deep-purple {
        --breadbox-item-bg-color: var(--paper-deep-purple-100);
      }

      breadbox-item.green {
        --breadbox-item-bg-color: var(--paper-green-100);
      }

      breadbox-item.grey {
        --breadbox-item-bg-color: var(--paper-grey-300);
      }

      breadbox-item.indigo {
        --breadbox-item-bg-color: var(--paper-indigo-100);
      }

      breadbox-item.light-blue {
        --breadbox-item-bg-color: var(--paper-light-blue-100);
      }

      breadbox-item.light-green {
        --breadbox-item-bg-color: var(--paper-light-green-100);
      }

      breadbox-item.lime {
        --breadbox-item-bg-color: var(--paper-lime-100);
      }

      breadbox-item.orange {
        --breadbox-item-bg-color: var(--paper-orange-100);
      }

      breadbox-item.pink {
        --breadbox-item-bg-color: var(--paper-pink-100);
      }

      breadbox-item.purple {
        --breadbox-item-bg-color: var(--paper-purple-100);
      }

      breadbox-item.red {
        --breadbox-item-bg-color: var(--paper-red-100);
      }

      breadbox-item.teal {
        --breadbox-item-bg-color: var(--paper-teal-100);
      }

      breadbox-item.white {
        --breadbox-item-bg-color: #fff;
      }
    </style>

    <template is="dom-repeat" items="[[_getFacetTerms(facetKey, enabledProperty, facets.*)]]" as="term">
      <!-- The icon and icon text must both observe facets.* in order to update correctly. -->
      <breadbox-item
        class$="[[_getColor(colorMap, facetKey)]]"
        icon="[[_getIconProperty(facetKey, term, searchProperty, iconConfig, facets.*)]]"
        icon-text="[[_getIconTextProperty(facetKey, term, searchProperty, iconConfig, facets.*)]]"
        text="[[_getTermProperty(facetKey, term, categoryProperty)]]: [[_getTermProperty(facetKey, term, textProperty, facets.*)]]">

        <iron-icon title="Remove Term" on-tap="_disableFacet" class$="[[_getRemoveButtonClass(hideRemoveButton)]]" icon="fa:times"></iron-icon>
      </breadbox-item>
    </template>
  </template>

  <script>
    Polymer({
      is: 'selected-facets-display',

      properties: {
        /**
         * (Optional)
         *
         * Name for the category property in the objects in `facets`.
         *
         * @type {String}
         * @default 'category'
         */
        categoryProperty: {
          type: String,
          value: 'category'
        },

        /**
         * (Optional)
         *
         * Object containing facet keys mapped to material design colors for the background color style class.
         *
         * @type {Object}
         * @default {}
         */
        colorMap: {
          type: Object,
          value: function() {
            return {};
          }
        },

        /**
         * (Optional)
         *
         * Name of the enabled property in the objects in `facets`.
         *
         * @type {String}
         * @default 'enabled'
         */
        enabledProperty: {
          type: String,
          value: 'enabled'
        },

        /**
         * (Optional)
         *
         * The values of the search property mapped to their icons.
         *
         * @type {String}
         * @default { excluded: { icon: 'fa:minus', text: 'Excluded' }, lessthan: { icon: 'fa:chevron-left', text: 'Less Than' }, morethan: { icon: 'fa:chevron-right', text: 'Greater Than' }, optional: { icon: 'fa:search', text: 'Optional' }, required: { icon: 'fa:plus', text: 'Required' }, union: { icon: 'fa:asterisk', text: 'Required Grouping' } }
         */
        iconConfig: {
          type: Object,
          value: function() {
            return {
              excluded: {
                icon: 'fa:minus',
                text: 'Excluded'
              },
              lessthan: {
                icon: 'fa:chevron-left',
                text: 'Less Than'
              },
              morethan: {
                icon: 'fa:chevron-right',
                text: 'Greater Than'
              },
              optional: {
                icon: 'fa:search',
                text: 'Optional'
              },
              required: {
                icon: 'fa:plus',
                text: 'Required'
              },
              union: {
                icon: 'fa:asterisk',
                text: 'Required Grouping'
              }
            };
          }
        },

        /**
         * (Optional)
         *
         * Name for the search property in the objects in `facets`.
         *
         * @type {String}
         * @default 'search'
         */
        searchProperty: {
          type: String,
          value: 'search'
        },

        /**
         * (Optional)
         *
         * Name for the text property in the objects in `facets`.
         *
         * @type {String}
         * @default 'text'
         */
        textProperty: {
          type: String,
          value: 'text'
        },

        /**
         * (Optional)
         *
         * Name for the text property in the objects in `facets`.
         *
         * @type {String}
         * @default 'text'
         */
        textProperty: {
          type: String,
          value: 'text'
        },

        /**
         * (Required)
         *
         * A key in `facets`.
         */
        facetKey: {
          type: String
        },

        /**
         * (Required)
         *
         * Keys mapped to facet objects that contain the state of facet checkboxes to persist selection state between
         * queries.  A facet object contains terms mapped to objects with these default properties:
         * {String} `category`, {Boolean} `enabled`, {String} `text`
         *
         * The expected state can be changed (see date-picker-display and terms-transformer, as well as
         * properties used to access category, text, and enabled values in this component).
         *
         * @type {Object}
         * @default {}
         */
        facets: {
          notify: true,
          type: Object,
          value: function() {
            return {};
          }
        },

        /**
         * Whether or not to hide the remove button for the facets
         *
         * @type {Boolean}
         * @default false
         */
        hideRemoveButton: {
          type: Boolean,
          value: false
        }
      },

      /**
       * Returns the icon using the given iconConfig for the string at the given property in the given term for the facets object in `facets` at the given key.
       *
       * @param {String} facetKey
       * @param {String} term
       * @param {String} property
       * @param {Object} iconConfig
       * @return {String}
       * @private
       */
      _getIconProperty: function(facetKey, term, property, iconConfig) {
        var value = this._getTermProperty(facetKey, term, property);
        return iconConfig && iconConfig[value] ? (iconConfig[value].icon || value) : value;
      },

      /**
       * Returns the icon text using the given iconConfig for the string at the given property in the given term for the facets object in `facets` at the given key.
       *
       * @param {String} facetKey
       * @param {String} term
       * @param {String} property
       * @param {Object} iconConfig
       * @return {String}
       * @private
       */
      _getIconTextProperty: function(facetKey, term, property, iconConfig) {
        var value = this._getTermProperty(facetKey, term, property);
        return iconConfig && iconConfig[value] ? (iconConfig[value].text || value) : value;
      },

      /**
       * Returns the string at the given property in the given term for the facets object in `facets` at the given key.
       *
       * @param {String} facetKey
       * @param {String} term
       * @param {String} property
       * @return {String}
       * @private
       */
      _getTermProperty: function(facetKey, term, property) {
        return this.facets && this.facets[facetKey] && this.facets[facetKey][term] ? this.facets[facetKey][term][property] : '';
      },

      /**
       * Returns all terms for the facets object in `facets` at the given key.
       *
       * @param {String} facetKey
       * @param {String} enabledProperty
       * @return {Array}
       * @private
       */
      _getFacetTerms: function(facetKey, enabledProperty) {
        var me = this;
        return _.filter(_.keys(this.facets[facetKey] || {}), function(term) {
          return me.facets[facetKey][term][enabledProperty] === true;
        });
      },

      /**
       * When user taps close icon, the current facet is removed from the enabled filters.
       *
       * @event tap
       * @private
       */
      _disableFacet: function(event) {
        var term = event.model.term;
        // Must recreate the object here rather than just setting the enabled property in order for notifyPath to work correctly.
        var newState = _.cloneDeep(this.facets[this.facetKey][term]);
        newState[this.enabledProperty] = false;
        this.facets[this.facetKey][term] = newState;
        // Must notifyPath on * because it will not handle a key with a period correctly.
        this.notifyPath(['facets', this.facetKey, '*'], this.facets[this.facetKey][term]);
      },

      /**
       * Returns remove button class (whether or not it is hidden).
       *
       * @return {String}
       * @private
       */
      _getRemoveButtonClass: function(hide) {
        return hide ? 'not-shown' : '';
      },

      /**
       * Returns the color using the given color map and facet key.
       *
       * @param {Object} colorMap
       * @param {String} facetKey
       * @return {String}
       * @private
       */
      _getColor: function(colorMap, facetKey) {
        return colorMap[facetKey] || '';
      }
    });
  </script>
</dom-module>