From d9206fc4fad3a7a5e4330e679cdd5e6a2f0b4f28 Mon Sep 17 00:00:00 2001
From: Robert von Burg <eitch@eitchnet.ch>
Date: Mon, 26 Feb 2024 13:12:06 +0100
Subject: [PATCH] [Major] Refactored strolch-wc-paging to use flexbox

---
 bower.json             |  2 +-
 strolch-wc-paging.html | 57 ++++++++++++++++++++++++++++--------------
 2 files changed, 39 insertions(+), 20 deletions(-)

diff --git a/bower.json b/bower.json
index 1873283..6904358 100644
--- a/bower.json
+++ b/bower.json
@@ -1,7 +1,7 @@
 {
   "name": "strolch-wc-paging",
   "description": "Strolch WebComponent Paging",
-  "version": "0.1.7",
+  "version": "0.2.0",
   "authors": [
     "Robert von Burg"
   ],
diff --git a/strolch-wc-paging.html b/strolch-wc-paging.html
index 49b8a4f..83d8070 100644
--- a/strolch-wc-paging.html
+++ b/strolch-wc-paging.html
@@ -16,30 +16,40 @@
             :host {
                 display: block;
             }
+
+            .pager {
+                display: flex;
+                flex-direction: row;
+                justify-content: space-evenly;
+            }
         </style>
 
         <!-- Content -->
-        <div class="g-row g-mt-3 g-mb-1">
-            <div class="g-3 g-pt-3 g-pl-4">
+        <div class="pager">
 
-                <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>
+            <template is="dom-if" if="[[hasContent]]">
+                <div class="left">
+                    <content></content>
                 </div>
+            </template>
+
+            <div class="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 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>
+
+            <template is="dom-if" if="[[showSetLimit]]">
+                <div class="right">
+                    <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>
+            </template>
+
         </div>
 
     </template>
@@ -54,7 +64,16 @@
             ],
 
             <!-- Properties -->
-            properties: {},
+            properties: {
+                hasContent: {
+                    type: Boolean,
+                    value: false
+                },
+                showSetLimit: {
+                    type: Boolean,
+                    value: false
+                }
+            },
 
             <!-- Observers -->