2019-08-06 14:55:37 +02:00
|
|
|
<!-- Components -->
|
2019-08-06 15:04:26 +02:00
|
|
|
<link rel="import" href="../polymer/polymer.html">
|
|
|
|
<link rel="import" href="../iron-icons/iron-icons.html">
|
|
|
|
<link rel="import" href="../paper-icon-button/paper-icon-button.html">
|
|
|
|
<link rel="import" href="../paper-button/paper-button.html">
|
|
|
|
<link rel="import" href="../strolch-wc-styles/strolch-wc-styles.html">
|
2019-08-06 14:55:37 +02:00
|
|
|
|
|
|
|
<link rel="import" href="strolch-wc-paging-behavior.html">
|
|
|
|
|
|
|
|
<dom-module id="strolch-wc-paging">
|
|
|
|
|
|
|
|
<template>
|
|
|
|
|
|
|
|
<!-- Style -->
|
|
|
|
<style is="custom-style" include="strolch-wc-styles">
|
|
|
|
:host {
|
|
|
|
display: block;
|
|
|
|
}
|
|
|
|
</style>
|
|
|
|
|
|
|
|
<!-- Content -->
|
|
|
|
<div class="g-row g-mt-3 g-mb-1">
|
|
|
|
<div class="g-3 g-pt-3 g-pl-4">
|
|
|
|
|
|
|
|
<content></content>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
<div class="g-6">
|
|
|
|
<div class="g-m-2 g-center">
|
|
|
|
<paper-icon-button icon="first-page" on-tap="_toFirstPage"></paper-icon-button>
|
|
|
|
<paper-icon-button icon="chevron-left" on-tap="_toPreviousPage"></paper-icon-button>
|
|
|
|
<span>[[dataObj.offset]] to [[_getEnd(dataObj)]] of [[dataObj.size]]<template is="dom-if"
|
|
|
|
if="[[isNonZero(dataObj.dataSetSize)]]"> ([[dataObj.dataSetSize]])</template></span>
|
|
|
|
<paper-icon-button icon="chevron-right" on-tap="_toNextPage"></paper-icon-button>
|
|
|
|
<paper-icon-button icon="last-page" on-tap="_toLastPage"></paper-icon-button>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="g-3">
|
|
|
|
<paper-button on-tap="_setLimit">10</paper-button>
|
|
|
|
<paper-button on-tap="_setLimit">50</paper-button>
|
|
|
|
<paper-button on-tap="_setLimit">100</paper-button>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
<script>
|
|
|
|
Polymer({
|
|
|
|
is: "strolch-wc-paging",
|
|
|
|
|
|
|
|
<!-- Behaviors -->
|
|
|
|
behaviors: [
|
|
|
|
StrolchPagingBehavior
|
|
|
|
],
|
|
|
|
|
|
|
|
<!-- Properties -->
|
|
|
|
properties: {},
|
|
|
|
|
|
|
|
<!-- Observers -->
|
|
|
|
|
|
|
|
|
|
|
|
<!-- Listeners -->
|
|
|
|
listeners: {},
|
|
|
|
|
|
|
|
<!-- Function -->
|
|
|
|
ready: function () {
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
isNonZero: function (number) {
|
|
|
|
return number > 0;
|
|
|
|
}
|
|
|
|
});
|
|
|
|
</script>
|
|
|
|
</dom-module>
|