@indice/ng-components 0.2.139 → 0.2.141

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

@@ -1,151 +0,0 @@
-<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

@@ -1,146 +0,0 @@
-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

@@ -1,27 +0,0 @@
-<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

@@ -1,25 +0,0 @@
-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

@@ -1,78 +0,0 @@
-<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

@@ -1,75 +0,0 @@
-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

@@ -1,33 +0,0 @@
-<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

@@ -1,106 +0,0 @@
-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

@@ -1,10 +0,0 @@
-<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>