feat(table component): columns resizing, reordering, sorting and rows selecting

src/components/stable/gux-pagination/example.html

@@ -2,27 +2,55 @@
   <h1>English</h1>
   <h2>Full</h2>
   <div lang="en">
+    <div class="table-placeholder"></div>
     <gux-pagination total-items="123" items-per-page="25"></gux-pagination>
   </div>
 
+  <h2>Expanded</h2>
+  <div lang="en">
+    <div class="table-placeholder"></div>
+    <gux-pagination total-items="421" items-per-page="25" layout="expanded"></gux-pagination>
+  </div>
+
   <h2>Small</h2>
   <div lang="en">
+    <div class="table-placeholder"></div>
     <gux-pagination total-items="123" items-per-page="25" layout="small"></gux-pagination>
   </div>
 
   <h1>German</h1>
   <div lang="de">
+    <div class="table-placeholder"></div>
     <gux-pagination total-items="123" items-per-page="50"></gux-pagination>
   </div>
 
   <h1>Japanese</h1>
   <div lang="ja">
+    <div class="table-placeholder"></div>
     <gux-pagination current-page="3" total-items="123" items-per-page="25"></gux-pagination>
   </div>
 
 
   <h1>No Options</h1>
   <div>
+    <div class="table-placeholder"></div>
     <gux-pagination total-items="123" items-per-page="25"></gux-pagination>
   </div>
 </div>
+
+<style>
+  .table-placeholder {
+    padding: 10px;
+    border: 1px dashed gainsboro;
+    text-align: center;
+    color: gainsboro;
+    background-image: linear-gradient(45deg, GAINSBORO 25%, transparent 25%, transparent 50%, GAINSBORO 50%, GAINSBORO 75%, transparent 75%, #fff);
+    background-size: 5px 5px;
+  }
+
+  .table-placeholder:before {
+    content: "Table Placeholder";
+    background-color: white;
+    padding: 5px
+  }
+</style>

src/components/stable/gux-pagination/gux-pagination-buttons/gux-pagination-button.service.tsx

@@ -0,0 +1,110 @@
+interface GuxPaginationButtonsExpandedPageListItem {
+  pageNumber: number;
+  display: string;
+  current: boolean;
+}
+
+export class GuxPaginationButtonsService {
+  static getPageList(
+    currentPage: number,
+    totalPages: number
+  ): GuxPaginationButtonsExpandedPageListItem[] {
+    if (totalPages <= 10) {
+      return [...Array(totalPages).keys()].map(index => {
+        const pageNumber = index + 1;
+
+        return {
+          pageNumber,
+          display: String(pageNumber),
+          current: pageNumber === currentPage
+        };
+      });
+    }
+
+    if (currentPage <= 5) {
+      const startPageList = [...Array(6).keys()].map(index => {
+        const pageNumber = index + 1;
+
+        return {
+          pageNumber,
+          display: String(pageNumber),
+          current: pageNumber === currentPage
+        };
+      });
+
+      return [
+        ...startPageList,
+        {
+          pageNumber: 7,
+          display: '...',
+          current: false
+        },
+        {
+          pageNumber: totalPages,
+          display: String(totalPages),
+          current: false
+        }
+      ];
+    }
+
+    if (currentPage > totalPages - 5) {
+      const endPageList = [...Array(6).keys()].map(index => {
+        const pageNumber = index + totalPages - 5;
+
+        return {
+          pageNumber,
+          display: String(pageNumber),
+          current: pageNumber === currentPage
+        };
+      });
+
+      return [
+        {
+          pageNumber: 1,
+          display: '1',
+          current: false
+        },
+        {
+          pageNumber: totalPages - 6,
+          display: '...',
+          current: false
+        },
+        ...endPageList
+      ];
+    }
+
+    const middlePageList = [...Array(5).keys()].map(index => {
+      const pageNumber = index + currentPage - 2;
+
+      return {
+        pageNumber,
+        display: String(pageNumber),
+        current: pageNumber === currentPage
+      };
+    });
+
+    return [
+      {
+        pageNumber: 1,
+        display: '1',
+        current: false
+      },
+      {
+        pageNumber: currentPage - 3,
+        display: '...',
+        current: false
+      },
+      ...middlePageList,
+      {
+        pageNumber: currentPage + 3,
+        display: '...',
+        current: false
+      },
+      {
+        pageNumber: totalPages,
+        display: String(totalPages),
+        current: false
+      }
+    ];
+  }
+}

src/components/stable/gux-pagination/gux-pagination-buttons/gux-pagination-buttons.less

@@ -6,7 +6,10 @@ gux-pagination-buttons {
     justify-content: flex-end;
     align-content: stretch;
     align-items: center;
-    margin-left: 16px;
+
+    &.expanded {
+      justify-content: center;
+    }
 
     & > div {
       order: 0;
@@ -31,10 +34,6 @@ gux-pagination-buttons {
       align-content: stretch;
       align-items: center;
 
-      &.small {
-        display: none;
-      }
-
       & > div {
         order: 0;
         flex: 0 1 auto;
@@ -52,14 +51,74 @@ gux-pagination-buttons {
       }
     }
 
-    .gux-pagination-buttons-small-spacer {
-      width: 10px;
-      display: none;
+    .gux-pagination-buttons-list-container {
+      margin: 0 16px;
+      display: flex;
+      flex-direction: row;
+      flex-wrap: nowrap;
+      justify-content: center;
+      align-content: stretch;
+      align-items: center;
 
-      &.small {
-        display: block;
+      .gux-pagination-buttons-list-current,
+      .gux-pagination-buttons-list-target {
+        margin: 0;
+        padding: 0 8px;
+        border: none;
+        background: inherit;
+        height: 32px;
+      }
+
+      .gux-pagination-buttons-list-current {
+        color: @gux-grey-2;
+        font-weight: 600;
+      }
+
+      .gux-pagination-buttons-list-target {
+        color: @gux-dark-blue;
+        cursor: pointer;
       }
     }
+
+    .gux-pagination-buttons-spacer {
+      width: 10px;
+    }
   }
+}
+
+// Theming
+
+// Dark
+.gux-pagination-buttons-dark-theme {
+  color: @gux-off-white;
+};
 
+.gux-dark-theme {
+  gux-pagination-buttons {
+      .gux-pagination-buttons-dark-theme();
+  }
+}
+
+gux-pagination-buttons.gux-dark-theme {
+  .gux-pagination-buttons-dark-theme();
+}
+
+// Light
+.gux-pagination-buttons-light-theme {
+  color: @gux-grey-2;
+};
+
+.gux-light-theme {
+  gux-pagination-buttons {
+      .gux-pagination-buttons-light-theme();
+  }
+}
+
+gux-pagination-buttons.gux-light-theme {
+  .gux-pagination-buttons-light-theme();
+}
+
+// Default Theme
+gux-pagination-buttons {
+  .gux-pagination-buttons-light-theme();
 }

src/components/stable/gux-pagination/gux-pagination-buttons/gux-pagination-buttons.tsx

@@ -9,8 +9,9 @@ import {
 } from '@stencil/core';
 
 import { buildI18nForComponent, GetI18nValue } from '../../../../i18n';
-import paginationResources from './i18n/en.json';
 import { GuxPaginationLayout } from '../gux-pagination';
+import paginationResources from './i18n/en.json';
+import { GuxPaginationButtonsService } from './gux-pagination-button.service';
 
 @Component({
   styleUrl: 'gux-pagination-buttons.less',
@@ -60,6 +61,10 @@ export class GuxPaginationButtons {
     this.internalcurrentpagechange.emit(this.totalPages);
   }
 
+  private handleClickPage(pageNumber: number): void {
+    this.internalcurrentpagechange.emit(pageNumber);
+  }
+
   private setPageFromInput(value: string): void {
     const page = parseInt(value, 10);
 
@@ -70,14 +75,82 @@ export class GuxPaginationButtons {
     }
   }
 
+  private getPageListEnteries(
+    currentPage: number,
+    totalPages: number
+  ): JSX.Element[] {
+    return GuxPaginationButtonsService.getPageList(
+      currentPage,
+      totalPages
+    ).reduce((acc, cv) => {
+      if (cv.current) {
+        return acc.concat(
+          <button class="gux-pagination-buttons-list-current">
+            {cv.display}
+          </button>
+        );
+      }
+
+      return acc.concat(
+        <button
+          class="gux-pagination-buttons-list-target"
+          onClick={() => this.handleClickPage(cv.pageNumber)}
+        >
+          {cv.display}
+        </button>
+      );
+    }, []);
+  }
+
+  private getSmallPagePicker(): JSX.Element {
+    return <div class={'gux-pagination-buttons-spacer'}></div>;
+  }
+
+  private getExpandedPagePicker(): JSX.Element {
+    return (
+      <div class="gux-pagination-buttons-list-container">
+        {this.getPageListEnteries(this.currentPage, this.totalPages)}
+      </div>
+    );
+  }
+
+  private getFullPagePicker(): JSX.Element {
+    return (
+      <div class="gux-pagination-buttons-input-container">
+        <div>{this.i18n('page')}</div>
+        <div class="gux-pagination-buttons-input">
+          <gux-text-field
+            value={String(this.currentPage)}
+            ref={ref => (this.textFieldRef = ref)}
+            use-clear-button="false"
+            onChange={() => this.setPageFromInput(this.textFieldRef.value)}
+          />
+        </div>
+        <div>{this.i18n('totalPages', { totalPages: this.totalPages })}</div>
+      </div>
+    );
+  }
+
+  private getPagePicker(layout: GuxPaginationLayout): JSX.Element {
+    if (layout === 'small') {
+      return this.getSmallPagePicker();
+    }
+
+    if (layout === 'expanded') {
+      return this.getExpandedPagePicker();
+    }
+
+    return this.getFullPagePicker();
+  }
+
   async componentWillLoad(): Promise<void> {
     this.i18n = await buildI18nForComponent(this.element, paginationResources);
   }
 
   render(): JSX.Element {
     return (
-      <div class="gux-pagination-buttons-container">
-        <div class={`gux-pagination-buttons-group ${this.layout}`}>
+      <div class={`gux-pagination-buttons-container ${this.layout}`}>
+        <div class="gux-pagination-buttons-group">
           <gux-button
             title={this.i18n('first')}
             disabled={this.onFirstPage}
@@ -94,22 +167,9 @@ export class GuxPaginationButtons {
           </gux-button>
         </div>
 
-        <div class={`gux-pagination-buttons-input-container ${this.layout}`}>
-          <div>{this.i18n('page')}</div>
-          <div class="gux-pagination-buttons-input">
-            <gux-text-field
-              value={String(this.currentPage)}
-              ref={ref => (this.textFieldRef = ref)}
-              use-clear-button="false"
-              onChange={() => this.setPageFromInput(this.textFieldRef.value)}
-            />
-          </div>
-          <div>{this.i18n('totalPages', { totalPages: this.totalPages })}</div>
-        </div>
-
-        <div class={`gux-pagination-buttons-small-spacer ${this.layout}`}></div>
+        {this.getPagePicker(this.layout)}
 
-        <div class={`gux-pagination-buttons-group ${this.layout}`}>
+        <div class="gux-pagination-buttons-group">
           <gux-button
             title={this.i18n('next')}
             disabled={this.onLastPage}

src/components/stable/gux-pagination/gux-pagination-buttons/readme.md

@@ -8,11 +8,11 @@ An internal component used by the gux-pagination component.
 
 ## Properties
 
-| Property      | Attribute      | Description | Type                | Default     |
-| ------------- | -------------- | ----------- | ------------------- | ----------- |
-| `currentPage` | `current-page` |             | `number`            | `undefined` |
-| `layout`      | `layout`       |             | `"full" \| "small"` | `'full'`    |
-| `totalPages`  | `total-pages`  |             | `number`            | `undefined` |
+| Property      | Attribute      | Description | Type                              | Default     |
+| ------------- | -------------- | ----------- | --------------------------------- | ----------- |
+| `currentPage` | `current-page` |             | `number`                          | `undefined` |
+| `layout`      | `layout`       |             | `"expanded" \| "full" \| "small"` | `'full'`    |
+| `totalPages`  | `total-pages`  |             | `number`                          | `undefined` |
 
 
 ## Events
@@ -30,16 +30,16 @@ An internal component used by the gux-pagination component.
 
 ### Depends on
 
+- [gux-text-field](../../gux-text-field)
 - [gux-button](../../gux-button)
 - [gux-icon](../../gux-icon)
-- [gux-text-field](../../gux-text-field)
 
 ### Graph
 ```mermaid
 graph TD;
+  gux-pagination-buttons --> gux-text-field
   gux-pagination-buttons --> gux-button
   gux-pagination-buttons --> gux-icon
-  gux-pagination-buttons --> gux-text-field
   gux-text-field --> gux-icon
   gux-pagination --> gux-pagination-buttons
   style gux-pagination-buttons fill:#f9f,stroke:#333,stroke-width:4px

src/components/stable/gux-pagination/gux-pagination-buttons/tests/__snapshots__/gux-pagination-buttons.spec.ts.snap

@@ -2,8 +2,8 @@
 
 exports[`gux-pagination-item-counts #render should render as expected (1) 1`] = `
 <gux-pagination-buttons current-page="0" layout="full" total-pages="0">
-  <div class="gux-pagination-buttons-container">
-    <div class="full gux-pagination-buttons-group">
+  <div class="full gux-pagination-buttons-container">
+    <div class="gux-pagination-buttons-group">
       <gux-button>
         <!---->
         <button class="gux-secondary" disabled="" title="First">
@@ -17,7 +17,7 @@ exports[`gux-pagination-item-counts #render should render as expected (1) 1`] =
         </button>
       </gux-button>
     </div>
-    <div class="full gux-pagination-buttons-input-container">
+    <div class="gux-pagination-buttons-input-container">
       <div>
         Page
       </div>
@@ -34,8 +34,7 @@ exports[`gux-pagination-item-counts #render should render as expected (1) 1`] =
         of 0
       </div>
     </div>
-    <div class="full gux-pagination-buttons-small-spacer"></div>
-    <div class="full gux-pagination-buttons-group">
+    <div class="gux-pagination-buttons-group">
       <gux-button>
         <!---->
         <button class="gux-secondary" disabled="" title="Next">
@@ -55,8 +54,8 @@ exports[`gux-pagination-item-counts #render should render as expected (1) 1`] =
 
 exports[`gux-pagination-item-counts #render should render as expected (2) 1`] = `
 <gux-pagination-buttons current-page="1" layout="full" total-pages="10">
-  <div class="gux-pagination-buttons-container">
-    <div class="full gux-pagination-buttons-group">
+  <div class="full gux-pagination-buttons-container">
+    <div class="gux-pagination-buttons-group">
       <gux-button>
         <!---->
         <button class="gux-secondary" disabled="" title="First">
@@ -70,7 +69,7 @@ exports[`gux-pagination-item-counts #render should render as expected (2) 1`] =
         </button>
       </gux-button>
     </div>
-    <div class="full gux-pagination-buttons-input-container">
+    <div class="gux-pagination-buttons-input-container">
       <div>
         Page
       </div>
@@ -87,8 +86,7 @@ exports[`gux-pagination-item-counts #render should render as expected (2) 1`] =
         of 10
       </div>
     </div>
-    <div class="full gux-pagination-buttons-small-spacer"></div>
-    <div class="full gux-pagination-buttons-group">
+    <div class="gux-pagination-buttons-group">
       <gux-button>
         <!---->
         <button class="gux-secondary" title="Next">
@@ -108,8 +106,8 @@ exports[`gux-pagination-item-counts #render should render as expected (2) 1`] =
 
 exports[`gux-pagination-item-counts #render should render as expected (3) 1`] = `
 <gux-pagination-buttons current-page="5" layout="full" total-pages="10">
-  <div class="gux-pagination-buttons-container">
-    <div class="full gux-pagination-buttons-group">
+  <div class="full gux-pagination-buttons-container">
+    <div class="gux-pagination-buttons-group">
       <gux-button>
         <!---->
         <button class="gux-secondary" title="First">
@@ -123,7 +121,7 @@ exports[`gux-pagination-item-counts #render should render as expected (3) 1`] =
         </button>
       </gux-button>
     </div>
-    <div class="full gux-pagination-buttons-input-container">
+    <div class="gux-pagination-buttons-input-container">
       <div>
         Page
       </div>
@@ -140,8 +138,7 @@ exports[`gux-pagination-item-counts #render should render as expected (3) 1`] =
         of 10
       </div>
     </div>
-    <div class="full gux-pagination-buttons-small-spacer"></div>
-    <div class="full gux-pagination-buttons-group">
+    <div class="gux-pagination-buttons-group">
       <gux-button>
         <!---->
         <button class="gux-secondary" title="Next">
@@ -161,8 +158,8 @@ exports[`gux-pagination-item-counts #render should render as expected (3) 1`] =
 
 exports[`gux-pagination-item-counts #render should render as expected (4) 1`] = `
 <gux-pagination-buttons current-page="0" layout="small" total-pages="0">
-  <div class="gux-pagination-buttons-container">
-    <div class="gux-pagination-buttons-group small">
+  <div class="gux-pagination-buttons-container small">
+    <div class="gux-pagination-buttons-group">
       <gux-button>
         <!---->
         <button class="gux-secondary" disabled="" title="First">
@@ -176,25 +173,8 @@ exports[`gux-pagination-item-counts #render should render as expected (4) 1`] =
         </button>
       </gux-button>
     </div>
-    <div class="gux-pagination-buttons-input-container small">
-      <div>
-        Page
-      </div>
-      <div class="gux-pagination-buttons-input">
-        <gux-text-field use-clear-button="false" value="0">
-          <div>
-            <div class="gux-field">
-              <input type="text" value="0">
-            </div>
-          </div>
-        </gux-text-field>
-      </div>
-      <div>
-        of 0
-      </div>
-    </div>
-    <div class="gux-pagination-buttons-small-spacer small"></div>
-    <div class="gux-pagination-buttons-group small">
+    <div class="gux-pagination-buttons-spacer"></div>
+    <div class="gux-pagination-buttons-group">
       <gux-button>
         <!---->
         <button class="gux-secondary" disabled="" title="Next">
@@ -214,8 +194,8 @@ exports[`gux-pagination-item-counts #render should render as expected (4) 1`] =
 
 exports[`gux-pagination-item-counts #render should render as expected (5) 1`] = `
 <gux-pagination-buttons current-page="1" layout="small" total-pages="10">
-  <div class="gux-pagination-buttons-container">
-    <div class="gux-pagination-buttons-group small">
+  <div class="gux-pagination-buttons-container small">
+    <div class="gux-pagination-buttons-group">
       <gux-button>
         <!---->
         <button class="gux-secondary" disabled="" title="First">
@@ -229,25 +209,8 @@ exports[`gux-pagination-item-counts #render should render as expected (5) 1`] =
         </button>
       </gux-button>
     </div>
-    <div class="gux-pagination-buttons-input-container small">
-      <div>
-        Page
-      </div>
-      <div class="gux-pagination-buttons-input">
-        <gux-text-field use-clear-button="false" value="1">
-          <div>
-            <div class="gux-field">
-              <input type="text" value="1">
-            </div>
-          </div>
-        </gux-text-field>
-      </div>
-      <div>
-        of 10
-      </div>
-    </div>
-    <div class="gux-pagination-buttons-small-spacer small"></div>
-    <div class="gux-pagination-buttons-group small">
+    <div class="gux-pagination-buttons-spacer"></div>
+    <div class="gux-pagination-buttons-group">
       <gux-button>
         <!---->
         <button class="gux-secondary" title="Next">
@@ -267,8 +230,8 @@ exports[`gux-pagination-item-counts #render should render as expected (5) 1`] =
 
 exports[`gux-pagination-item-counts #render should render as expected (6) 1`] = `
 <gux-pagination-buttons current-page="5" layout="small" total-pages="10">
-  <div class="gux-pagination-buttons-container">
-    <div class="gux-pagination-buttons-group small">
+  <div class="gux-pagination-buttons-container small">
+    <div class="gux-pagination-buttons-group">
       <gux-button>
         <!---->
         <button class="gux-secondary" title="First">
@@ -282,25 +245,178 @@ exports[`gux-pagination-item-counts #render should render as expected (6) 1`] =
         </button>
       </gux-button>
     </div>
-    <div class="gux-pagination-buttons-input-container small">
-      <div>
-        Page
-      </div>
-      <div class="gux-pagination-buttons-input">
-        <gux-text-field use-clear-button="false" value="5">
-          <div>
-            <div class="gux-field">
-              <input type="text" value="5">
-            </div>
-          </div>
-        </gux-text-field>
-      </div>
-      <div>
-        of 10
-      </div>
+    <div class="gux-pagination-buttons-spacer"></div>
+    <div class="gux-pagination-buttons-group">
+      <gux-button>
+        <!---->
+        <button class="gux-secondary" title="Next">
+          <gux-icon decorative="" iconname="ic-chevron-small-right"></gux-icon>
+        </button>
+      </gux-button>
+      <gux-button>
+        <!---->
+        <button class="gux-secondary" title="Last">
+          <gux-icon decorative="" iconname="ic-arrow-right-dbl"></gux-icon>
+        </button>
+      </gux-button>
+    </div>
+  </div>
+</gux-pagination-buttons>
+`;
+
+exports[`gux-pagination-item-counts #render should render as expected (7) 1`] = `
+<gux-pagination-buttons current-page="0" layout="expanded" total-pages="0">
+  <div class="expanded gux-pagination-buttons-container">
+    <div class="gux-pagination-buttons-group">
+      <gux-button>
+        <!---->
+        <button class="gux-secondary" disabled="" title="First">
+          <gux-icon decorative="" iconname="ic-arrow-left-dbl"></gux-icon>
+        </button>
+      </gux-button>
+      <gux-button>
+        <!---->
+        <button class="gux-secondary" disabled="" title="Previous">
+          <gux-icon decorative="" iconname="ic-chevron-small-left"></gux-icon>
+        </button>
+      </gux-button>
+    </div>
+    <div class="gux-pagination-buttons-list-container"></div>
+    <div class="gux-pagination-buttons-group">
+      <gux-button>
+        <!---->
+        <button class="gux-secondary" disabled="" title="Next">
+          <gux-icon decorative="" iconname="ic-chevron-small-right"></gux-icon>
+        </button>
+      </gux-button>
+      <gux-button>
+        <!---->
+        <button class="gux-secondary" disabled="" title="Last">
+          <gux-icon decorative="" iconname="ic-arrow-right-dbl"></gux-icon>
+        </button>
+      </gux-button>
+    </div>
+  </div>
+</gux-pagination-buttons>
+`;
+
+exports[`gux-pagination-item-counts #render should render as expected (8) 1`] = `
+<gux-pagination-buttons current-page="1" layout="expanded" total-pages="10">
+  <div class="expanded gux-pagination-buttons-container">
+    <div class="gux-pagination-buttons-group">
+      <gux-button>
+        <!---->
+        <button class="gux-secondary" disabled="" title="First">
+          <gux-icon decorative="" iconname="ic-arrow-left-dbl"></gux-icon>
+        </button>
+      </gux-button>
+      <gux-button>
+        <!---->
+        <button class="gux-secondary" disabled="" title="Previous">
+          <gux-icon decorative="" iconname="ic-chevron-small-left"></gux-icon>
+        </button>
+      </gux-button>
+    </div>
+    <div class="gux-pagination-buttons-list-container">
+      <button class="gux-pagination-buttons-list-current">
+        1
+      </button>
+      <button class="gux-pagination-buttons-list-target">
+        2
+      </button>
+      <button class="gux-pagination-buttons-list-target">
+        3
+      </button>
+      <button class="gux-pagination-buttons-list-target">
+        4
+      </button>
+      <button class="gux-pagination-buttons-list-target">
+        5
+      </button>
+      <button class="gux-pagination-buttons-list-target">
+        6
+      </button>
+      <button class="gux-pagination-buttons-list-target">
+        7
+      </button>
+      <button class="gux-pagination-buttons-list-target">
+        8
+      </button>
+      <button class="gux-pagination-buttons-list-target">
+        9
+      </button>
+      <button class="gux-pagination-buttons-list-target">
+        10
+      </button>
+    </div>
+    <div class="gux-pagination-buttons-group">
+      <gux-button>
+        <!---->
+        <button class="gux-secondary" title="Next">
+          <gux-icon decorative="" iconname="ic-chevron-small-right"></gux-icon>
+        </button>
+      </gux-button>
+      <gux-button>
+        <!---->
+        <button class="gux-secondary" title="Last">
+          <gux-icon decorative="" iconname="ic-arrow-right-dbl"></gux-icon>
+        </button>
+      </gux-button>
+    </div>
+  </div>
+</gux-pagination-buttons>
+`;
+
+exports[`gux-pagination-item-counts #render should render as expected (9) 1`] = `
+<gux-pagination-buttons current-page="5" layout="expanded" total-pages="10">
+  <div class="expanded gux-pagination-buttons-container">
+    <div class="gux-pagination-buttons-group">
+      <gux-button>
+        <!---->
+        <button class="gux-secondary" title="First">
+          <gux-icon decorative="" iconname="ic-arrow-left-dbl"></gux-icon>
+        </button>
+      </gux-button>
+      <gux-button>
+        <!---->
+        <button class="gux-secondary" title="Previous">
+          <gux-icon decorative="" iconname="ic-chevron-small-left"></gux-icon>
+        </button>
+      </gux-button>
+    </div>
+    <div class="gux-pagination-buttons-list-container">
+      <button class="gux-pagination-buttons-list-target">
+        1
+      </button>
+      <button class="gux-pagination-buttons-list-target">
+        2
+      </button>
+      <button class="gux-pagination-buttons-list-target">
+        3
+      </button>
+      <button class="gux-pagination-buttons-list-target">
+        4
+      </button>
+      <button class="gux-pagination-buttons-list-current">
+        5
+      </button>
+      <button class="gux-pagination-buttons-list-target">
+        6
+      </button>
+      <button class="gux-pagination-buttons-list-target">
+        7
+      </button>
+      <button class="gux-pagination-buttons-list-target">
+        8
+      </button>
+      <button class="gux-pagination-buttons-list-target">
+        9
+      </button>
+      <button class="gux-pagination-buttons-list-target">
+        10
+      </button>
     </div>
-    <div class="gux-pagination-buttons-small-spacer small"></div>
-    <div class="gux-pagination-buttons-group small">
+    <div class="gux-pagination-buttons-group">
       <gux-button>
         <!---->
         <button class="gux-secondary" title="Next">

src/components/stable/gux-pagination/gux-pagination-buttons/tests/gux-pagination-buttons.service.spec.ts

@@ -0,0 +1,143 @@
+import { GuxPaginationButtonsService } from '../gux-pagination-button.service';
+
+describe('GuxPaginationButtonsService', () => {
+  describe('#getPageList', () => {
+    [
+      { totalPages: 0, currentPage: 0, expectedPageList: [] },
+      {
+        totalPages: 1,
+        currentPage: 1,
+        expectedPageList: [{ pageNumber: 1, display: '1', current: true }]
+      },
+      {
+        totalPages: 2,
+        currentPage: 1,
+        expectedPageList: [
+          { pageNumber: 1, display: '1', current: true },
+          { pageNumber: 2, display: '2', current: false }
+        ]
+      },
+      {
+        totalPages: 5,
+        currentPage: 1,
+        expectedPageList: [
+          { pageNumber: 1, display: '1', current: true },
+          { pageNumber: 2, display: '2', current: false },
+          { pageNumber: 3, display: '3', current: false },
+          { pageNumber: 4, display: '4', current: false },
+          { pageNumber: 5, display: '5', current: false }
+        ]
+      },
+      {
+        totalPages: 10,
+        currentPage: 1,
+        expectedPageList: [
+          { pageNumber: 1, display: '1', current: true },
+          { pageNumber: 2, display: '2', current: false },
+          { pageNumber: 3, display: '3', current: false },
+          { pageNumber: 4, display: '4', current: false },
+          { pageNumber: 5, display: '5', current: false },
+          { pageNumber: 6, display: '6', current: false },
+          { pageNumber: 7, display: '7', current: false },
+          { pageNumber: 8, display: '8', current: false },
+          { pageNumber: 9, display: '9', current: false },
+          { pageNumber: 10, display: '10', current: false }
+        ]
+      },
+      {
+        totalPages: 15,
+        currentPage: 1,
+        expectedPageList: [
+          { pageNumber: 1, display: '1', current: true },
+          { pageNumber: 2, display: '2', current: false },
+          { pageNumber: 3, display: '3', current: false },
+          { pageNumber: 4, display: '4', current: false },
+          { pageNumber: 5, display: '5', current: false },
+          { pageNumber: 6, display: '6', current: false },
+          { pageNumber: 7, display: '...', current: false },
+          { pageNumber: 15, display: '15', current: false }
+        ]
+      },
+      {
+        totalPages: 100,
+        currentPage: 1,
+        expectedPageList: [
+          { pageNumber: 1, display: '1', current: true },
+          { pageNumber: 2, display: '2', current: false },
+          { pageNumber: 3, display: '3', current: false },
+          { pageNumber: 4, display: '4', current: false },
+          { pageNumber: 5, display: '5', current: false },
+          { pageNumber: 6, display: '6', current: false },
+          { pageNumber: 7, display: '...', current: false },
+          { pageNumber: 100, display: '100', current: false }
+        ]
+      },
+      {
+        totalPages: 100,
+        currentPage: 100,
+        expectedPageList: [
+          { pageNumber: 1, display: '1', current: false },
+          { pageNumber: 94, display: '...', current: false },
+          { pageNumber: 95, display: '95', current: false },
+          { pageNumber: 96, display: '96', current: false },
+          { pageNumber: 97, display: '97', current: false },
+          { pageNumber: 98, display: '98', current: false },
+          { pageNumber: 99, display: '99', current: false },
+          { pageNumber: 100, display: '100', current: true }
+        ]
+      },
+      {
+        totalPages: 100,
+        currentPage: 100,
+        expectedPageList: [
+          { pageNumber: 1, display: '1', current: false },
+          { pageNumber: 94, display: '...', current: false },
+          { pageNumber: 95, display: '95', current: false },
+          { pageNumber: 96, display: '96', current: false },
+          { pageNumber: 97, display: '97', current: false },
+          { pageNumber: 98, display: '98', current: false },
+          { pageNumber: 99, display: '99', current: false },
+          { pageNumber: 100, display: '100', current: true }
+        ]
+      },
+      {
+        totalPages: 100,
+        currentPage: 98,
+        expectedPageList: [
+          { pageNumber: 1, display: '1', current: false },
+          { pageNumber: 94, display: '...', current: false },
+          { pageNumber: 95, display: '95', current: false },
+          { pageNumber: 96, display: '96', current: false },
+          { pageNumber: 97, display: '97', current: false },
+          { pageNumber: 98, display: '98', current: true },
+          { pageNumber: 99, display: '99', current: false },
+          { pageNumber: 100, display: '100', current: false }
+        ]
+      },
+      {
+        totalPages: 100,
+        currentPage: 50,
+        expectedPageList: [
+          { pageNumber: 1, display: '1', current: false },
+          { pageNumber: 47, display: '...', current: false },
+          { pageNumber: 48, display: '48', current: false },
+          { pageNumber: 49, display: '49', current: false },
+          { pageNumber: 50, display: '50', current: true },
+          { pageNumber: 51, display: '51', current: false },
+          { pageNumber: 52, display: '52', current: false },
+          { pageNumber: 53, display: '...', current: false },
+          { pageNumber: 100, display: '100', current: false }
+        ]
+      }
+    ].forEach(({ totalPages, currentPage, expectedPageList }, index) => {
+      it(`should render as expected (${index + 1})`, async () => {
+        const pageList = GuxPaginationButtonsService.getPageList(
+          currentPage,
+          totalPages
+        );
+
+        expect(pageList).toEqual(expectedPageList);
+      });
+    });
+  });
+});

src/components/stable/gux-pagination/gux-pagination-buttons/tests/gux-pagination-buttons.spec.ts

@@ -14,7 +14,10 @@ describe('gux-pagination-item-counts', () => {
       { totalPages: 10, currentPage: 5, layout: 'full' },
       { totalPages: 0, currentPage: 0, layout: 'small' },
       { totalPages: 10, currentPage: 1, layout: 'small' },
-      { totalPages: 10, currentPage: 5, layout: 'small' }
+      { totalPages: 10, currentPage: 5, layout: 'small' },
+      { totalPages: 0, currentPage: 0, layout: 'expanded' },
+      { totalPages: 10, currentPage: 1, layout: 'expanded' },
+      { totalPages: 10, currentPage: 5, layout: 'expanded' }
     ].forEach(({ totalPages, currentPage, layout }, index) => {
       it(`should render as expected (${index + 1})`, async () => {
         const html = `

src/components/stable/gux-pagination/gux-pagination.less

@@ -12,31 +12,33 @@ gux-pagination {
     align-content: stretch;
     align-items: center;
 
-    &.small {
-      gux-pagination-items-per-page {
-        display: none;
-      }
-    }
-
-    & > div {
-      order: 0;
-      flex: 0 1 auto;
-      align-self: auto;
-    }
-
-    .gux-pagination-container-left {
+    .gux-pagination-info {
       display: flex;
       flex-direction: row;
       flex-wrap: nowrap;
       justify-content: flex-start;
       align-content: stretch;
       align-items: center;
+      order: 0;
+      flex: 1 1 auto;
+      align-self: auto;
 
       & > * {
         order: 0;
         flex: 0 1 auto;
         align-self: auto;
       }
     }
+
+    .gux-pagination-change {
+      margin-left: 16px;
+      order: 0;
+      flex: 1 1 auto;
+      align-self: auto;
+    }
+
+    .gux-pagination-change:first-child {
+      margin-left: 0;
+    }
   }
 }

src/components/stable/gux-pagination/gux-pagination.tsx

@@ -11,7 +11,7 @@ import {
 
 import { GuxItemsPerPage } from './gux-pagination-items-per-page/gux-pagination-items-per-page';
 
-export type GuxPaginationLayout = 'small' | 'full';
+export type GuxPaginationLayout = 'small' | 'expanded' | 'full';
 export type GuxPaginationState = {
   currentPage: number;
   itemsPerPage: number;
@@ -87,28 +87,43 @@ export class GuxPagination implements ComponentInterface {
     this.setPage(event.detail);
   }
 
+  private getPaginationInfoElement(layout: GuxPaginationLayout): JSX.Element[] {
+    if (layout === 'expanded') {
+      return null;
+    }
+
+    const content = [
+      <gux-pagination-item-counts
+        total-items={this.totalItems}
+        current-page={this.currentPage}
+        items-per-page={this.itemsPerPage}
+      />
+    ];
+
+    if (layout === 'full') {
+      content.push(
+        <gux-pagination-items-per-page
+          items-per-page={this.itemsPerPage}
+          on-internalitemsperpagechange={this.handleInternalitemsperpagechange.bind(
+            this
+          )}
+        ></gux-pagination-items-per-page>
+      );
+    }
+
+    return <div class="gux-pagination-info">{content}</div>;
+  }
+
   componentWillRender(): void {
     this.totalPages = this.calculatTotalPages();
     this.currentPage = Math.min(this.currentPage, this.totalPages);
   }
 
   render(): JSX.Element {
     return (
-      <div class={`gux-pagination-container ${this.layout}`}>
-        <div class="gux-pagination-container-left">
-          <gux-pagination-item-counts
-            total-items={this.totalItems}
-            current-page={this.currentPage}
-            items-per-page={this.itemsPerPage}
-          />
-          <gux-pagination-items-per-page
-            items-per-page={this.itemsPerPage}
-            on-internalitemsperpagechange={this.handleInternalitemsperpagechange.bind(
-              this
-            )}
-          ></gux-pagination-items-per-page>
-        </div>
-        <div>
+      <div class={`gux-pagination-container`}>
+        {this.getPaginationInfoElement(this.layout)}
+        <div class="gux-pagination-change">
           <gux-pagination-buttons
             layout={this.layout}
             current-page={this.currentPage}

src/components/stable/gux-pagination/readme.md

@@ -14,12 +14,12 @@ the pagination state.
 
 ## Properties
 
-| Property       | Attribute        | Description                                                                     | Type                    | Default  |
-| -------------- | ---------------- | ------------------------------------------------------------------------------- | ----------------------- | -------- |
-| `currentPage`  | `current-page`   | The currently select page. Changes are watched by the component.                | `number`                | `1`      |
-| `itemsPerPage` | `items-per-page` | The max number of items on a page. Used to calculate total page count           | `100 \| 25 \| 50 \| 75` | `25`     |
-| `layout`       | `layout`         | The pagination component can have different layouts to suit the available space | `"full" \| "small"`     | `'full'` |
-| `totalItems`   | `total-items`    | The total number of items in the data set. Used to calculate total page count   | `number`                | `0`      |
+| Property       | Attribute        | Description                                                                     | Type                              | Default  |
+| -------------- | ---------------- | ------------------------------------------------------------------------------- | --------------------------------- | -------- |
+| `currentPage`  | `current-page`   | The currently select page. Changes are watched by the component.                | `number`                          | `1`      |
+| `itemsPerPage` | `items-per-page` | The max number of items on a page. Used to calculate total page count           | `100 \| 25 \| 50 \| 75`           | `25`     |
+| `layout`       | `layout`         | The pagination component can have different layouts to suit the available space | `"expanded" \| "full" \| "small"` | `'full'` |
+| `totalItems`   | `total-items`    | The total number of items in the data set. Used to calculate total page count   | `number`                          | `0`      |
 
 
 ## Events
@@ -49,9 +49,9 @@ graph TD;
   gux-dropdown --> gux-icon
   gux-text-field --> gux-icon
   gux-option --> gux-text-highlight
+  gux-pagination-buttons --> gux-text-field
   gux-pagination-buttons --> gux-button
   gux-pagination-buttons --> gux-icon
-  gux-pagination-buttons --> gux-text-field
   style gux-pagination fill:#f9f,stroke:#333,stroke-width:4px
 ```
 

src/components/stable/gux-pagination/tests/gux-pagination.e2e.ts

@@ -13,7 +13,8 @@ describe('gux-pagination', () => {
       { currentPage: 10, totalItems: 1000, itemsPerPage: 50, layout: 'full' },
       { currentPage: 10, totalItems: 1000, itemsPerPage: 75, layout: 'full' },
       { currentPage: 10, totalItems: 1000, itemsPerPage: 100, layout: 'full' },
-      { currentPage: 1, totalItems: 1000, itemsPerPage: 25, layout: 'small' }
+      { currentPage: 1, totalItems: 1000, itemsPerPage: 25, layout: 'small' },
+      { currentPage: 1, totalItems: 1000, itemsPerPage: 25, layout: 'expanded' }
     ].forEach(({ currentPage, totalItems, itemsPerPage, layout }, index) => {
       it(`should render as expected (${index + 1})`, async () => {
         const html = `

src/components/stable/gux-pagination/tests/gux-pagination.spec.ts

@@ -33,7 +33,8 @@ describe('gux-pagination', () => {
       { currentPage: 10, totalItems: 1000, itemsPerPage: 50, layout: 'full' },
       { currentPage: 10, totalItems: 1000, itemsPerPage: 75, layout: 'full' },
       { currentPage: 10, totalItems: 1000, itemsPerPage: 100, layout: 'full' },
-      { currentPage: 1, totalItems: 1000, itemsPerPage: 25, layout: 'small' }
+      { currentPage: 1, totalItems: 1000, itemsPerPage: 25, layout: 'small' },
+      { currentPage: 1, totalItems: 1000, itemsPerPage: 25, layout: 'expanded' }
     ].forEach(({ currentPage, totalItems, itemsPerPage, layout }, index) => {
       it(`should render as expected (${index + 1})`, async () => {
         const html = `