@indice/ng-components 0.2.138-beta → 0.2.139

package/src/lib/controls/list-view/list-view.component.html

@@ -0,0 +1,151 @@
+<div class="px-2">
+
+  <lib-pager *ngIf="showPager"
+             [page]="page"
+             [page-size]="pageSize"
+             [count]="count"
+             [sort-options]="sortOptions"
+             [sort]="sort"
+             [sort-dir]="sortdir"
+             [busy]="busy"
+             (pageChanged)="emitPageChanged($event)"
+             (pageSizeChanged)="emitPageSizeChanged($event)"
+             (sortChanged)="emitSortChanged($event)"
+             (sortdirChanged)="emitSortdirChanged($event)">
+  </lib-pager>
+</div>
+
+<ng-container *ngIf="!busy && items && items.length === 0">
+  <div class="cards-deck-1">
+    <lib-list-view-empty-state></lib-list-view-empty-state>
+  </div>
+</ng-container>
+
+<ng-container [ngSwitch]="view">
+
+  <ng-container *ngSwitchCase="'tiles'">
+    <div [class]="tilesDeckClass">
+
+      <lib-skeleton-loader *ngIf="busy" [count]="5" [type]="'tiles'"></lib-skeleton-loader>
+
+      <ng-container *ngIf="items && items.length > 0">
+        <ng-container *ngFor="let item of items">
+          <span *ngIf="!tileTemplate || !tileTemplate.template">template missing..</span>
+          <ng-template [ngTemplateOutlet]="tileTemplate.template"
+                       [ngTemplateOutletContext]="{ $implicit: item }"></ng-template>
+        </ng-container>
+      </ng-container>
+
+    </div>
+  </ng-container>
+
+
+  <!-- *ngSwitchCase="'gallery'" -->
+  <ng-container *ngSwitchCase="'gallery'">
+    <ul role="list" [class]="tilesDeckClass">
+
+      <lib-skeleton-loader *ngIf="busy" [count]="5" [type]="'tiles'"></lib-skeleton-loader>
+
+      <ng-container *ngIf="!busy && items && items.length > 0">
+        <ng-container *ngFor="let item of items">
+          <span *ngIf="!tileTemplate || !tileTemplate.template">template missing..</span>
+          <ng-template [ngTemplateOutlet]="tileTemplate.template"
+                       [ngTemplateOutletContext]="{ $implicit: item }"></ng-template>
+        </ng-container>
+      </ng-container>
+    </ul>
+  </ng-container>
+
+  <!-- *ngSwitchCase="'table'" -->
+  <ng-container *ngSwitchDefault>
+
+    <div class="list-view-container">
+      <div class="list-view-container-inner">
+        <table class="list-view-table">
+          <thead class="list-view-thead">
+            <tr>
+              <ng-container *ngIf="detailsSectionSupported">
+                <th class="list-view-th-details"></th>
+              </ng-container>
+              <ng-container *ngFor="let col of columns">
+                <th scope="col"
+                    [class]="col.fullWidth ? fullWidthTHClass : 'list-view-th'">
+                  {{col.title}}
+                </th>
+              </ng-container>
+            </tr>
+          </thead>
+          <tbody class="list-view-tbody" *ngIf="busy">
+            <ng-container *ngFor="let item of loaderItems;let i=index">
+              <tr class="list-view-tr">
+                <ng-container *ngIf="detailsSectionSupported">
+                  <td class="list-view-td-details"
+                      *ngIf="detailsSectionPropertyCount !== null ? item[detailsSectionPropertyCount] !== 0 : true; else hiddenDetailsButton">
+                    <button disabled
+                            type="button"
+                            class="expand-collapse-button">
+                      <!-- Heroicon name: solid/plus -->
+                      <i [class]="item.detailsExpanded ? collapseIcon : expandIcon"></i>
+                    </button>
+                  </td>
+                  <ng-template #hiddenDetailsButton>
+                    <td class="list-view-td-details"></td>
+                  </ng-template>
+                </ng-container>
+                <td *ngFor="let col of columns"
+                    [class]="col.fullWidth ? fullWidthTDClass : 'list-view-td'">
+                    <div class="w-full animate-pulse h-8 bg-gray-200 rounded"></div>
+                </td>
+              </tr>
+              <ng-container *ngIf="detailsSectionSupported">
+                <tr *ngIf="item.detailsExpanded">
+                  <td [colSpan]="columns.length + 1"
+                      class="list-view-td bg-gray-100">
+                    <ng-template [ngTemplateOutlet]="detailsTemplate.template"
+                                 [ngTemplateOutletContext]="{ $implicit: item }"></ng-template>
+                  </td>
+                </tr>
+              </ng-container>
+            </ng-container>
+          </tbody>
+          <tbody class="list-view-tbody" *ngIf="!busy">
+            <ng-container *ngFor="let item of items;let i=index">
+              <tr class="list-view-tr">
+                <ng-container *ngIf="detailsSectionSupported">
+                  <td class="list-view-td-details"
+                      *ngIf="detailsSectionPropertyCount !== null ? item[detailsSectionPropertyCount] !== 0 : true; else hiddenDetailsButton">
+                    <button (click)="toggleDetails(item)"
+                            type="button"
+                            class="expand-collapse-button">
+                      <!-- Heroicon name: solid/plus -->
+                      <i [class]="item.detailsExpanded ? collapseIcon : expandIcon"></i>
+                    </button>
+                  </td>
+                  <ng-template #hiddenDetailsButton>
+                    <td class="list-view-td-details"></td>
+                  </ng-template>
+                </ng-container>
+                <td *ngFor="let col of columns"
+                    [class]="col.fullWidth ? fullWidthTDClass : 'list-view-td'">
+                  <ng-template [ngTemplateOutlet]="col.template"
+                               [ngTemplateOutletContext]="{ $implicit: item }"></ng-template>
+                </td>
+              </tr>
+              <ng-container *ngIf="detailsSectionSupported">
+                <tr *ngIf="item.detailsExpanded">
+                  <td [colSpan]="columns.length + 1"
+                      class="list-view-td bg-gray-100">
+                    <ng-template [ngTemplateOutlet]="detailsTemplate.template"
+                                 [ngTemplateOutletContext]="{ $implicit: item }"></ng-template>
+                  </td>
+                </tr>
+              </ng-container>
+            </ng-container>
+          </tbody>
+        </table>
+      </div>
+    </div>
+  </ng-container>
+</ng-container>
+
+<ng-content></ng-content>

package/src/lib/controls/list-view/list-view.component.ts

@@ -0,0 +1,146 @@
+import { Component, ContentChild, ContentChildren, EventEmitter, Input, Output, QueryList, OnChanges, SimpleChanges } from '@angular/core';
+import { MenuOption, ListViewType } from '../../types';
+import { ListTileComponent } from './list-tile.component';
+import { ListColumnComponent } from './list-column.component';
+import { ListDetailsSectionComponent } from './list-details-section.component';
+import { Icons } from '../../icons';
+
+@Component({
+  selector: 'lib-list-view',
+  templateUrl: './list-view.component.html'
+})
+export class ListViewComponent implements OnChanges {
+  // BUSY STATE
+  @Input() busy = false;
+  public expandIcon = Icons.Expand;
+  public collapseIcon = Icons.Collapse;
+  // DATA SOURCE!
+  @Input() items: any[] | null | undefined;
+  // tslint:disable-next-line:no-input-rename
+  @Input('show-pager') showPager = true;
+
+  // PAGING - pass through for pager component
+  @Input() count: number | null = null;
+  @Input() page = 1;
+  // tslint:disable-next-line:no-input-rename
+  @Input('page-size') pageSize = 20;
+  // tslint:disable-next-line:no-input-rename
+  @Input('page-size-options') pageSizeOptions: MenuOption[] = [];
+  @Output() pageChanged: EventEmitter<number> = new EventEmitter<number>();
+  @Output() pageSizeChanged: EventEmitter<number> = new EventEmitter<number>();
+  @Output() detailsOpened: EventEmitter<{ item: any, open: boolean }> = new EventEmitter<{ item: any, open: boolean }>();
+
+  public tableViewSupported = false;
+  private multipleFullWidth = false;
+  public fullWidthTHClass = 'list-view-th-full';
+  public fullWidthTDClass = 'list-view-td-full';
+  public tilesViewSupported = false;
+  public detailsSectionSupported = false;
+  public loaderItems: any[] = [];
+
+  // DETAILS SECTION
+  // Check if details section and button should be displayed according to the count of the value given
+  // tslint:disable-next-line:no-input-rename
+  @Input('details-section-property-count') detailsSectionPropertyCount: string | null = null;
+
+
+  // SORTING - pass through for pager component
+  // tslint:disable-next-line:no-input-rename
+  @Input('sort-options') sortOptions: MenuOption[] = [];
+    @Input() sort: string | null = null;
+  // tslint:disable-next-line:no-input-rename
+  @Input('sort-dir') sortdir: string | null = '-';
+  @Output() sortChanged: EventEmitter<string> = new EventEmitter<string>();
+  @Output() sortdirChanged: EventEmitter<string> = new EventEmitter<string>();
+
+  @Input() view = ListViewType.Table;
+
+  // COLUMNS
+  public columns: any[] = [];
+  @ContentChildren(ListColumnComponent, { read: ListColumnComponent })
+  set cols(refs: QueryList<ListColumnComponent>) {
+    this.columns = refs?.toArray();
+    if (this.columns && this.columns.length > 0) {
+      this.tableViewSupported = true;
+    }
+    this.multipleFullWidth = this.columns.filter(c => c.fullWidth).length > 1;
+    this.fullWidthTHClass = this.multipleFullWidth ? 'list-view-th-half' : 'list-view-th-full';
+    this.fullWidthTDClass = this.multipleFullWidth ? 'list-view-td-half' : 'list-view-td-full';
+  }
+
+  public tilesDeckClass = 'cards-deck-4';
+  // tslint:disable-next-line:no-input-rename
+  @Input('tiles-count') tilesCount = 4;
+
+  public tileTemplate: any | null | undefined = null;
+  @ContentChild(ListTileComponent, { read: ListTileComponent })
+  set tiles(ref: ListTileComponent) {
+    this.tileTemplate = ref;
+    if (this.tileTemplate) {
+      this.tilesViewSupported = true;
+    }
+  }
+
+  public detailsTemplate: any | null | undefined = null;
+  @ContentChild(ListDetailsSectionComponent, { read: ListDetailsSectionComponent })
+  set details(ref: ListDetailsSectionComponent) {
+    this.detailsTemplate = ref;
+    if (this.detailsTemplate) {
+      this.detailsSectionSupported = true;
+    }
+  }
+
+  constructor() {
+    for (let i = 0; i < 5; i++) {
+      this.loaderItems.push({});
+    }
+  }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    const tilesCountChange = changes['tiles-count'] || changes.tilesCount;
+    if (tilesCountChange) {
+      this.setTilesDeckClass(tilesCountChange.currentValue);
+    }
+  }
+
+  // events
+  public emitPageChanged($event: number): void {
+    this.pageChanged.emit($event);
+  }
+
+  public emitPageSizeChanged($event: number): void {
+    this.pageSizeChanged.emit($event);
+  }
+
+  public emitSortChanged($event: string): void {
+    this.sortChanged.emit($event);
+  }
+  public emitSortdirChanged($event: string): void {
+    this.sortdirChanged.emit($event);
+  }
+
+  public toggleDetails(item: any): void {
+    item.detailsExpanded = !item.detailsExpanded;
+    this.detailsOpened.emit({ item, open: item.detailsExpanded });
+  }
+
+  // helpers
+  private setTilesDeckClass(tiles: number): void {
+    if (tiles >= 1 && tiles <= 4) {
+      this.tilesDeckClass =
+        this.view !== ListViewType.Gallery
+        ? `cards-deck-${tiles}`
+        : this.items && this.items.length > 0
+          ? `gallery-deck-${tiles}`
+          : 'gallery-deck';
+    } else {
+      this.tilesDeckClass =
+        this.view !== ListViewType.Gallery
+        ? 'cards-deck-3'
+        : this.items && this.items.length > 0
+          ? 'gallery-deck-3'
+          : 'gallery-deck';
+    }
+  }
+
+}

package/src/lib/controls/nav-links-list/nav-links-list.component.html

@@ -0,0 +1,27 @@
+<div [class]="containerClass">
+  <ng-container *ngFor="let link of links | async">
+    <ng-container [ngSwitch]="link.type">
+      <a *ngSwitchCase="'router'"
+        href="#"
+        [routerLink]="[link.path]"
+        [routerLinkActive]="navLinkActiveClass"
+        [routerLinkActiveOptions]="{ exact: link.exact }"
+        [class]="navLinkClass">
+        {{ link.text }}
+      </a>
+      <a *ngSwitchCase="'external'"
+        [href]="link.path"
+        [attr.target]="link.external ? '_blank' : '_self'"
+        class="nav-link">
+        {{ link.text }}
+      </a>
+      <a *ngSwitchCase="'fragment'"
+        routerLink="."
+        [fragment]="link.path"
+        [class.active]="(activeFragment | async) === link.path"
+        class="nav-link">
+        {{ link.text }}
+      </a>
+    </ng-container>
+  </ng-container>
+</div>

package/src/lib/controls/nav-links-list/nav-links-list.component.ts

@@ -0,0 +1,25 @@
+import { Observable } from 'rxjs';
+import { Component, Input, OnInit } from '@angular/core';
+import { NavLink } from '../../types';
+
+@Component({
+  selector: 'lib-nav-links-list',
+  templateUrl: './nav-links-list.component.html'
+})
+export class NavLinksListComponent implements OnInit {
+
+  @Input() links: Observable<NavLink[]> | undefined;
+  // tslint:disable-next-line:no-input-rename
+  @Input('active-fragment') activeFragment: Observable<string> | undefined;
+  // tslint:disable-next-line:no-input-rename
+  @Input('link-class') navLinkClass: string | string = 'nav-link';
+  // tslint:disable-next-line:no-input-rename
+  @Input('link-active-class') navLinkActiveClass: string | string[] = 'nav-link-active';
+  // tslint:disable-next-line:no-input-rename
+  @Input('container-class') containerClass: string | string[] = '';
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

package/src/lib/controls/notifications-indicator/notifications-indicator.component.html

@@ -0,0 +1,78 @@
+<div class="relative"
+(clickOutside)="onClickOutside($event)">
+  <!-- Notifications Button -->
+  <button type="button"
+          (click)="doInboxAction()"
+          aria-expanded="false"
+          aria-haspopup="true">
+    <span class="sr-only">View notifications</span>
+    <span class="avatar-container">
+      <span class="avatar-text">
+        <i class="ms-Icon"
+          [class.ms-Icon--MessageFill]="unreadCount > 0"
+          [class.text-sky-400]="unreadCount > 0"
+          [class.animate-notification]="newArrival"
+          [class.ms-Icon--Message]="unreadCount === 0">
+        </i>
+      </span>
+      <span
+        *ngIf="unreadCount > 0"
+        [class.animate-pulse]="newArrival"
+        class="absolute top-0 right-0 inline-flex items-center justify-center -mt-1 ml-1 text-xs leading-none text-gray-100 ordinal">
+        {{ unreadCount }}
+      </span>
+    </span>
+  </button>
+
+  <!-- Notifications dropdown -->
+  <div *ngIf="menuExpanded" class="header-notifications-dropdown-with-username" role="menu" aria-orientation="vertical" aria-labelledby="messages-menu">
+    <div class="max-h-64 overflow-y-auto notification-messages min-h">
+      <ng-container *ngIf="!items; else messagesDropDown" class="py-5">
+        <div class="notifications-nav-link hover:bg-transparent">Δεν έχετε νέες ειδοποιήσεις</div>
+      </ng-container>
+      <ng-template #messagesDropDown>
+        <ul class="pr-1.5">
+          <ng-container *ngIf="items; else loading">
+            <ng-container *ngIf="items.length <= 0" class="py-5">
+              <div class="notifications-nav-link hover:bg-transparent">Δεν έχετε νέες ειδοποιήσεις</div>
+            </ng-container>
+            <ng-container *ngFor="let message of items; let i = index">
+              <li class="mb-2" [ngClass]="{ 'border-l-2 border-blue-500 bg-blue-50 hover:bg-blue-50': !message.data.isRead }">
+                <div class="flex justify-between">
+                  <div class="flex-grow">
+                    <a
+                      [routerLink]="message.path"
+                      (click)="removeItem(i)"
+                      class="notifications-nav-link grid"
+                      [ngClass]="!message.data.isRead ? ' hover:bg-blue-50' : 'border-b border-gray-100'"
+                    >
+                      <div class="flex flex-col">
+                        <div class="font-thin tracking-tighter">
+                          {{ message.data.creationDate | date: "EEE, d MMMM" }}
+                        </div>
+                        <div class="font-bold">
+                          {{ message.data.text }}
+                        </div>
+                      </div>
+                    </a>
+                  </div>
+                </div>
+              </li>
+            </ng-container>
+          </ng-container>
+
+          <ng-template #loading>
+            <div class="h-32 flex items-center justify-center">
+              <div class="animate-pulse text-s text-gray-600">Loading...</div>
+            </div>
+          </ng-template>
+        </ul>
+      </ng-template>
+    </div>
+    <div class="p-1 rounded-sm">
+      <a [routerLink]="allNotificationsLink!.path">
+        <button type="button" class="header-notifications-dropdown-view-all-button">{{allNotificationsLink!.text}}</button>
+      </a>
+    </div>
+  </div>
+</div>

package/src/lib/controls/notifications-indicator/notifications-indicator.component.ts

@@ -0,0 +1,75 @@
+import { IAppNotifications, NavLink } from './../../types';
+import { Component, Inject, OnInit, OnDestroy } from '@angular/core';
+import { Observable, of, Subscription } from 'rxjs';
+import { APP_LINKS, APP_NOTIFICATIONS } from '../../tokens';
+
+@Component({
+  selector: 'lib-notifications-indicator',
+  templateUrl: './notifications-indicator.component.html'
+})
+export class NotificationsIndicatorComponent implements OnInit, OnDestroy {
+
+  public menuExpanded = false;
+  public unreadCount = 0;
+  public items: any[] = [];
+  public allNotificationsLink?: NavLink;
+  private notificationsSub$: Subscription | undefined;
+  private inboxAction: any | undefined = undefined;
+  public newArrival = false;
+  constructor(@Inject(APP_NOTIFICATIONS) public notifications: IAppNotifications, @Inject(APP_LINKS) public links: any) { }
+
+  ngOnDestroy(): void {
+    if (this.notificationsSub$) {
+      this.notificationsSub$.unsubscribe();
+    }
+  }
+
+  ngOnInit(): void {
+    (this.links['notifications'] as Observable<NavLink>).subscribe(notificationsLink => {
+      this.allNotificationsLink = notificationsLink;
+    });
+    this.notificationsSub$ = this.notifications.messages.subscribe(result => {
+      if (result.items){
+        this.newArrival = true;
+        this.unreadCount = result.count;
+        this.items = result.items;
+        setTimeout( () => { this.newArrival = false; }, 1000 );
+      }
+    });
+  }
+
+  public toggleMenu(): void {
+    this.menuExpanded = !this.menuExpanded;
+    this.unreadCount = 0;
+  }
+
+  public doInboxAction(): void {
+    if (this.notifications.inboxAction) {
+      this.notifications.inboxAction();
+    } else {
+      this.menuExpanded = true;
+    }
+    this.unreadCount = 0;
+  }
+
+  public removeItem(index:number){
+    this.items.splice(index,1);
+  }
+
+    // this.notificationsSub$ = this.links.notifications?.pipe(map(result => {
+    //   this.allItemsLink = result.allNotifications;
+    //   this.items = result.items;
+    //   this.unreadCount = result.count;
+    // }));
+
+    // [this.notificationsLinksPath] as Observable<NotificationNavLink[]>;
+    // this.allNotificationsLink = this.links[this.allNotificationsLinkPath] as Observable<NavLink>;
+    // this.unreadNotificationsCountObs = this.links[this.notificationsCounterLinksPath] as Observable<number>;
+    // this.getUnreadNotificationsCount();
+
+  // tslint:disable-next-line:typedef
+  public onClickOutside($event: any) {
+    this.menuExpanded = false;
+  }
+
+}

package/src/lib/controls/pager/pager.component.html

@@ -0,0 +1,33 @@
+<div class="pager-container">
+  <div class="pager-container-inner">
+    <div class="inline-flex" *ngIf="sortOptions && sortOptions.length > 0">
+      <lib-drop-down-menu [options]="sortOptions" [selected]="sort" (selectedChanged)="sortOptionChanged($event)"></lib-drop-down-menu>
+      <button (click)="toggleSortdir()" [disabled]="!sort || busy" class="pager-icon-button">
+        <span class="sr-only">sort direction</span>
+        <span class="inline-block relative">
+          <i [class]="sortdirIcon"></i>
+        </span>
+      </button>
+    </div>
+    <div class="pager-pages-container">
+      <lib-drop-down-menu [options]="pageSizeOptions" [selected]="pageSize" (selectedChanged)="pageSizeOptionChanged($event)"></lib-drop-down-menu>
+      <div class="mx-2"  *ngIf="count !== null && count > pageSize">
+        <button [disabled]="!canPreviousPage || busy"  (click)="previousPage()"
+                class="pager-arrow-button-left">
+          <span class="sr-only">Previous</span>
+          <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+            <path fill-rule="evenodd" d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd" />
+          </svg>
+        </button>
+        <button [disabled]="!canNextPage || busy"  (click)="nextPage()"
+                class="pager-arrow-button-right">
+          <span class="sr-only">Next</span>
+          <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+            <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
+          </svg>
+        </button>
+      </div>
+      <lib-drop-down-menu *ngIf="(pages && pages.length > 0) && (count !== null && count > pageSize)" [options]="pages" [selected]="page" (selectedChanged)="pageOptionChanged($event)"></lib-drop-down-menu>
+    </div>
+  </div>
+</div>

package/src/lib/controls/pager/pager.component.ts

@@ -0,0 +1,106 @@
+import { Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges } from '@angular/core';
+import { Router } from '@angular/router';
+import { Icons } from '../../icons';
+import { MenuOption } from '../../types';
+
+@Component({
+  selector: 'lib-pager',
+  templateUrl: './pager.component.html'
+})
+export class PagerComponent implements OnInit, OnChanges {
+  // BUSY STATE
+  @Input() busy = false;
+  // PAGING
+  @Input() count: number | null = null;
+  @Input() page = 1;
+  // tslint:disable-next-line:no-input-rename
+  @Input('page-size') pageSize = 20;
+  // tslint:disable-next-line:no-input-rename
+  @Input('page-size-options') pageSizeOptions: MenuOption[] = [
+    new MenuOption('10', 10),
+    new MenuOption('20', 20),
+    new MenuOption('30', 30),
+    new MenuOption('50', 50),
+    new MenuOption('100', 100)
+  ];
+  public pages: MenuOption[] = [];
+  @Output() pageChanged: EventEmitter<number> = new EventEmitter<number>();
+  @Output() pageSizeChanged: EventEmitter<number> = new EventEmitter<number>();
+  public canPreviousPage = false;
+  public canNextPage = false;
+
+  // SORTING
+  // tslint:disable-next-line:no-input-rename
+  @Input('sort-options') sortOptions: MenuOption[] = [];
+  // tslint:disable-next-line:no-input-rename
+  @Input('sort') sort: string | null = null;
+  // tslint:disable-next-line:no-input-rename
+  @Input('sort-dir') sortdir: string | null = 'desc';
+  @Output() sortChanged: EventEmitter<string> = new EventEmitter<string>();
+  @Output() sortdirChanged: EventEmitter<string> = new EventEmitter<string>();
+  public sortdirIcon = Icons.SortDesc;
+
+  constructor(private router: Router) { }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    this.calcPages();
+  }
+
+  ngOnInit(): void {
+  }
+
+  private calcPages(): void {
+    this.pages = [];
+    if (this.count && this.count > 0) {
+      const pageCount = this.count / this.pageSize;
+      for (let i = 0; i < pageCount; i++) {
+        this.pages.push(new MenuOption(i + 1 + '', i + 1));
+      }
+    }
+    this.canPreviousPage = this.page > 1;
+    this.canNextPage = this.page < this.pages.length;
+  }
+
+  public nextPage(): void {
+    const next = this.page + 1;
+    this.gotoPage(next);
+  }
+
+  public previousPage(): void {
+    const previous = this.page - 1;
+    this.gotoPage(previous);
+  }
+
+  public gotoPage(page: number): void {
+    this.page = page;
+    this.pageChanged.emit(page);
+    this.calcPages();
+  }
+
+  public pageSizeOptionChanged(pageSize: number): void {
+    this.pageSizeChanged.emit(pageSize);
+    this.calcPages();
+  }
+
+  public pageOptionChanged(page: number): void {
+    this.pageChanged.emit(page);
+    this.calcPages();
+  }
+
+  public sortOptionChanged(sort: string): void {
+    this.sortChanged.emit(sort);
+  }
+
+  public toggleSortdir(): void {
+    let sortdir = 'desc';
+    if (this.sortdir === 'desc') {
+      sortdir = 'asc';
+      this.sortdirIcon = Icons.SortAsc;
+    } else {
+      sortdir = 'desc';
+      this.sortdirIcon = Icons.SortDesc;
+    }
+    this.sortdirChanged.emit(sortdir);
+  }
+
+}

package/src/lib/controls/side-pane/side-pane.component.html

@@ -0,0 +1,10 @@
+<div *ngIf="showPane" class="side-pane-outer-container" aria-labelledby="slide-over" role="dialog" aria-modal="true">
+  <div [class]="showPane ? overlayStyle : 'hidden'" aria-hidden="true"></div>
+  <div [class]="showPane ? 'side-pane-container' : 'hidden'">
+    <div [class]="sizeContainerStyle">
+      <div class="side-pane">
+        <ng-content></ng-content>
+      </div>
+    </div>
+  </div>
+</div>