paper-datatable-api-footer.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="../paper-dropdown-menu/paper-dropdown-menu.html">
<link rel="import" href="../paper-listbox/paper-listbox.html">
<link rel="import" href="../paper-item/paper-item.html">
<link rel="import" href="../paper-icon-button/paper-icon-button.html">

<dom-module id="paper-datatable-api-footer">
  <template>
    <style include="iron-flex iron-flex-alignment">
      :host {
        display: block;
      }

      .foot {
        font-size: 12px;
        font-weight: normal;
        height: 55px;
        border-top: 1px solid;
        border-color: rgba(0, 0, 0, var(--dark-divider-opacity));
        padding: 0 14px 0 0;
        color: rgba(0, 0, 0, var(--dark-secondary-opacity));
      }

      .foot .left {
        padding: 0 0 0 14px;
      }

      .foot paper-icon-button {
        width: 24px;
        height: 24px;
        padding: 0;
        margin-left: 24px;
      }

      .foot .status {
        margin: 0 8px 0 32px;
      }

      .foot .size {
        width: 64px;
        text-align: right;
      }

      .size paper-dropdown-menu {
        --paper-input-container-underline: {
          display: none;
        };
        --paper-input-container-input: {
          text-align: right;
          font-size: 12px;
          font-weight: 500;
          color: var(--paper-datatable-navigation-bar-text-color, rgba(0,0,0,.54));
        };
        --paper-dropdown-menu-icon: {
          color: var(--paper-datatable-navigation-bar-text-color, rgba(0,0,0,.54));
        };
      }
    </style>
    <div class$="layout horizontal center foot [[_computePosition(footerPosition)]]">
      <div class$="[[footerPosition]]">
        <div class="layout horizontal end-justified center">
          <div class="layout horizontal center">
            <div>
              [[localize('rowPerPage')]]:
            </div>
            <div class="size">
              <paper-dropdown-menu no-label-float vertical-align="bottom">
                <paper-listbox attr-for-selected="size" on-iron-select="_newSizeIsSelected" selected="[[size]]" slot="dropdown-content">
                  <template is="dom-repeat" items="[[availableSize]]" as="size">
                    <paper-item size="[[size]]">[[size]]</paper-item>
                  </template>
                </paper-listbox>
              </paper-dropdown-menu>
            </div>
          </div>
          <div class="status">
            [[_computeCurrentSize(page, size)]]-[[_computeCurrentMaxSize(page, size, totalElements)]] [[localize('of')]]
            [[totalElements]]
          </div>
          <template is="dom-if" if="[[!_prevButtonEnabled(page)]]">
            <paper-icon-button icon="chevron-left" disabled on-tap="_prevPage"></paper-icon-button>
          </template>
          <template is="dom-if" if="[[_prevButtonEnabled(page)]]">
            <paper-icon-button icon="chevron-left" on-tap="_prevPage"></paper-icon-button>
          </template>
          <template is="dom-if" if="[[!_nextButtonEnabled(page, totalPages)]]">
            <paper-icon-button icon="chevron-right" disabled on-tap="_nextPage"></paper-icon-button>
          </template>
          <template is="dom-if" if="[[_nextButtonEnabled(page, totalPages)]]">
            <paper-icon-button icon="chevron-right" on-tap="_nextPage"></paper-icon-button>
          </template>
        </div>
      </div>
    </div>
  </template>
  <script src="paper-datatable-api-footer.js"></script>
</dom-module>