paper-datatable-api-th-content.html

<link rel="import" href="../polymer/polymer-element.html">

<link rel="import" href="../iron-flex-layout/iron-flex-layout-classes.html">

<link rel="import" href="../app-localize-behavior/app-localize-behavior.html">

<link rel="import" href="paper-datatable-api-icons.html">

<link rel="import" href="../paper-icon-button/paper-icon-button.html">
<link rel="import" href="../paper-item/paper-icon-item.html">
<link rel="import" href="../paper-item/paper-item-body.html">
<link rel="import" href="../paper-listbox/paper-listbox.html">
<link rel="import" href="../paper-menu-button/paper-menu-button.html">
<link rel="import" href="../paper-input/paper-input.html">
<link rel="import" href="../range-datepicker/range-datepicker-input.html">

<dom-module id="paper-datatable-api-th-content">
  <template>
    <style include="iron-flex iron-flex-alignment"></style>

    <style>
      :host {
        display: block;
      }

      :host>div {
        @apply --layout-horizontal;
        @apply --layout-center;
      }

      paper-input {
        min-width: var(--paper-datatable-api-min-width-input-filter, 120px);
        --paper-input-container-underline-focus: {
          display: block;
        }
        ;
        --paper-input-container-label: {
          position: initial;
        }
        ;
        --paper-input-container: {
          padding: 0;
        }
        ;
        --paper-input-container-input: {
          font-size: 12px;
        }
        ;
      }

      paper-icon-button {
        --paper-icon-button-hover: {
          @apply --paper-datatable-api-header-sorted;
        }
        ;
        min-width: 36px;
        min-height: 36px;
        transition: transform .2s linear;
        @apply --paper-datatable-api-header-sorted-no-active;
      }

      paper-icon-button[sortable].filter {
        color: rgba(0, 0, 0, .26);
      }

      paper-icon-button[sortable].filter.active {
        @apply --paper-datatable-api-header-sorted;
      }

      paper-icon-button.sort {
        color: rgba(0, 0, 0, .26);
      }

      paper-icon-button[sorted].sort {
        @apply --paper-datatable-api-header-sorted;
      }

      paper-icon-button.sort:not([sorted]):not([sort-direction='desc']) {
        transform: rotate(0deg);
      }

      paper-icon-button.sort[sorted]:not([sort-direction='desc']),
      paper-icon-button.sort:not([sorted]) {
        transform: rotate(180deg);
      }

      paper-menu-button {
        padding: 0;
      }

      paper-icon-button[icon="arrow-drop-down"] {
        color: rgba(0, 0, 0, .26);
      }

      iron-icon[icon="check-box"] {
        color: var(--paper-datatable-api-checked-checkbox-color, --primary-color);
      }

      iron-icon[icon="check-box-outline-blank"] {
        color: var(--paper-datatable-api-unchecked-checkbox-color, --primary-text-color);
      }
    </style>

    <div class$="[[_draggableClass(column.draggableColumn)]]" draggable$="[[_isDraggable(column.draggableColumn, focused)]]">

      <template is="dom-if" if="[[equals(positionSortIcon, 'left')]]">

        <!-- Sort -->
        <template is="dom-if" if="[[column.sortable]]">
          <paper-icon-button icon="paper-datatable-api-icons:arrow-downward" sorted$="[[sorted]]" class="sort" on-tap="_handleSort"
            sort-direction$="[[sortDirection]]"></paper-icon-button>
        </template>

        <!-- Filter icon -->
        <template is="dom-if" if="[[column.filter]]">
          <template is="dom-if" if="[[column.activeFilter]]">
            <paper-icon-button icon="paper-datatable-api-icons:clear" sortable$="[[sortable]]" class="filter active" on-tap="_handleFilter"></paper-icon-button>
          </template>
          <template is="dom-if" if="[[!column.activeFilter]]">
            <paper-icon-button icon="paper-datatable-api-icons:search" sortable$="[[sortable]]" class="filter" on-tap="_handleFilter"></paper-icon-button>
          </template>
        </template>

      </template>

      <!-- Header with filter active -->
      <template is="dom-if" if="[[column.activeFilter]]" on-dom-change="_handleActiveFilterChange">
        <template is="dom-if" if="[[!column.date]]" restamp>
          <template is="dom-if" if="[[!column.choices]]" restamp>
            <paper-input class="flex" value="{{column.activeFilterValue}}" no-label-float placeholder="[[column.header]]" on-keyup="_handleKeyDownInput"
              focused="{{focused}}"></paper-input>
          </template>
        </template>
        <template is="dom-if" if="[[column.date]]" restamp>
          <range-datepicker-input class="flex" horizontal-align="right" locale="[[language]]" date-format="[[dateFormat]]" date-from="{{_dateFrom}}"
            date-to="{{_dateTo}}">
            <template>
              <paper-input class="flex" focused="{{focused}}" placeholder="[[column.header]]" no-label-float value="[[_displayPickerDate(dateFrom, dateTo)]]"
                readonly></paper-input>
            </template>
          </range-datepicker-input>
        </template>
      </template>

      <!-- Header with filter inactive -->
      <template is="dom-if" if="[[!column.activeFilter]]">
        <div class="flex" on-tap="_handleFilter">
          <template is="dom-if" if="[[!column.choices]]" restamp>
            [[column.header]]
          </template>

          <template is="dom-if" if="[[column.choices]]" restamp>

            <paper-menu-button ignore-select dynamic-align>
              <div slot="dropdown-trigger" class="layout horizontal center">
                <span class="flex">[[column.header]]</span>
                <paper-icon-button icon="arrow-drop-down"></paper-icon-button>
              </div>
              <paper-listbox slot="dropdown-content" selected-values="{{_selectedChoices}}" multi attr-for-selected="name" on-iron-select="_handleChoiceChanged"
                on-iron-deselect="_handleChoiceChanged">
                <template is="dom-repeat" items="[[column.choices]]" as="choice">
                  <paper-icon-item name="[[choice.key]]">
                    <iron-icon slot="item-icon" icon$="[[_computeIconName(choice.key, _selectedChoices.*)]]"></iron-icon>
                    <paper-item-body style$="[[choice.style]]">
                      [[choice.label]]
                    </paper-item-body>
                  </paper-icon-item>
                </template>
              </paper-listbox>
            </paper-menu-button>

          </template>
        </div>
      </template>

      <template is="dom-if" if="[[equals(positionSortIcon, 'right')]]">

        <!-- Filter icon -->
        <template is="dom-if" if="[[column.filter]]">
          <template is="dom-if" if="[[column.activeFilter]]">
            <paper-icon-button icon="paper-datatable-api-icons:clear" sortable$="[[sortable]]" class="filter active" on-tap="_handleFilter"></paper-icon-button>
          </template>
          <template is="dom-if" if="[[!column.activeFilter]]">
            <paper-icon-button icon="paper-datatable-api-icons:search" sortable$="[[sortable]]" class="filter" on-tap="_handleFilter"></paper-icon-button>
          </template>
        </template>

        <!-- Sort -->
        <template is="dom-if" if="[[column.sortable]]">
          <paper-icon-button icon="paper-datatable-api-icons:arrow-downward" sorted$="[[sorted]]" class="sort" on-tap="_handleSort"
            sort-direction$="[[sortDirection]]"></paper-icon-button>
        </template>

      </template>

    </div>
  </template>
  <script src="paper-datatable-api-th-content.js"></script>
</dom-module>