code cleanup, names refactoring

src/app/app-routing.module.ts

@@ -1,6 +1,6 @@
-import { NgModule } from '@angular/core';
-import { Routes, RouterModule } from '@angular/router';
-import { HomeComponent } from './home/home.component';
+import {NgModule} from '@angular/core';
+import {RouterModule, Routes} from '@angular/router';
+import {HomeComponent} from './home/home.component';
 
 
 const routes: Routes = [

src/app/app.component.html

@@ -1,5 +1,5 @@
 <nav class="navbar navbar-expand-lg navbar-light bg-light">
-  <a class="navbar-brand" routerLink="/">PoweredSoft UI</a>
+  <a class="navbar-brand" routerLink="/">NGX DATA DEMO UI</a>
 </nav>
 
 <div class="container-fluid">
@@ -39,4 +39,4 @@
       <router-outlet></router-outlet>
     </div>
   </div>
-</div>
+</div>

src/app/app.component.ts

@@ -6,5 +6,4 @@ import { Component } from '@angular/core';
   styleUrls: ['./app.component.scss']
 })
 export class AppComponent {
-  title = 'ngx-cdk-ui';
 }

src/app/app.module.ts

@@ -1,16 +1,16 @@
-import { BrowserModule } from '@angular/platform-browser';
-import { NgModule, APP_INITIALIZER } from '@angular/core';
+import {BrowserModule} from '@angular/platform-browser';
+import {APP_INITIALIZER, NgModule} from '@angular/core';
 
-import { AppRoutingModule } from './app-routing.module';
-import { AppComponent } from './app.component';
-import { HomeComponent } from './home/home.component';
+import {AppRoutingModule} from './app-routing.module';
+import {AppComponent} from './app.component';
+import {HomeComponent} from './home/home.component';
 
-import { Apollo, ApolloModule } from 'apollo-angular';
-import { HttpLink, HttpLinkModule } from 'apollo-angular-link-http';
-import { DefaultOptions } from 'apollo-client';
-import { InMemoryCache } from 'apollo-cache-inmemory';
-import { HttpClientModule } from '@angular/common/http';
-import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import {Apollo, ApolloModule} from 'apollo-angular';
+import {HttpLink, HttpLinkModule} from 'apollo-angular-link-http';
+import {DefaultOptions} from 'apollo-client';
+import {InMemoryCache} from 'apollo-cache-inmemory';
+import {HttpClientModule} from '@angular/common/http';
+import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
 
 
 export function app_Init(apollo: Apollo, httpLink: HttpLink) {
@@ -52,7 +52,7 @@ export function app_Init(apollo: Apollo, httpLink: HttpLink) {
     AppComponent,
     HomeComponent,
     //SelectLabelTemplateDirective,
-    
+
   ],
   imports: [
     BrowserModule,

src/app/command-modal-demo/command-modal-demo-routing.module.ts

@@ -1,7 +1,6 @@
-import { NgModule } from '@angular/core';
-import { Routes, RouterModule } from '@angular/router';
-import { CommandModalDemoComponent } from './command-modal-demo/command-modal-demo.component';
-
+import {NgModule} from '@angular/core';
+import {RouterModule, Routes} from '@angular/router';
+import {CommandModalDemoComponent} from './command-modal-demo/command-modal-demo.component';
 
 
 const routes: Routes = [

src/app/command-modal-demo/command-modal-demo.module.ts

@@ -1,11 +1,13 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { CommandModalDemoComponent } from './command-modal-demo/command-modal-demo.component';
-import { CommandModalDemoRoutingModule } from './command-modal-demo-routing.module';
-import { DataGridModule, DsValidationErrorModule } from '@poweredsoft/ngx-cdk-ui';
+import {NgModule} from '@angular/core';
+import {CommonModule} from '@angular/common';
+import {CommandModalDemoComponent} from './command-modal-demo/command-modal-demo.component';
+import {CommandModalDemoRoutingModule} from './command-modal-demo-routing.module';
 
 import {FormsModule} from '@angular/forms';
-import { CommandModalModule, PaginationModule, ConfirmModalModule,CommandModule } from '@poweredsoft/ngx-bootstrap';
+import {DataGridModule, DsValidationErrorModule} from "@openharbor/ngx-data-cdk-ui";
+import {CommandModalModule, CommandModule, ConfirmModalModule} from "@openharbor/ngx-data-bootstrap-ui";
+import {PaginationModule} from "ngx-bootstrap/pagination";
+
 @NgModule({
   declarations: [CommandModalDemoComponent],
   imports: [
@@ -17,7 +19,11 @@ import { CommandModalModule, PaginationModule, ConfirmModalModule,CommandModule
     FormsModule,
     PaginationModule,
     ConfirmModalModule,
-    CommandModule
+    CommandModule,
+    DataGridModule,
+    CommandModalModule,
+    CommandModule,
+    DsValidationErrorModule
   ]
 })
 export class CommandModalDemoModule { }

src/app/command-modal-demo/command-modal-demo/command-modal-demo.component.html

@@ -1,81 +1,84 @@
 <h1>
-    This is a demo for a command modal.
+  This is a demo for a command modal.
 </h1>
-<ps-data-grid [dataSource]="merchantDataSource" [(columns)]="columns"
-    tableClasses="table table-sm table-dark table-striped table-bordered">
-    <ng-container *psDataGridHeader>
-        <button class="btn-primary btn" psbxCommandModal 
-        commandTitle="Adding a new merchant" commandText="Add"
-        
-            [dataSource]="merchantDataSource" command="addMerchant" 
-            [template]="theModal">Create a new record</button>
+<cdk-data-grid [dataSource]="merchantDataSource" [(columns)]="columns"
+               tableClasses="table table-sm table-dark table-striped table-bordered">
+  <ng-container *cdkDataGridHeader>
+    <button class="btn-primary btn" bsxCommandModal
+            commandTitle="Adding a new merchant" commandText="Add"
 
+            [dataSource]="merchantDataSource" command="addMerchant"
+            [template]="theModal">Create a new record
+    </button>
+  </ng-container>
+
+  <ng-container cdkDataGridCol="id">
+    <div *cdkDataGridColHeader>ID</div>
+    <div *cdkDataGridCell="let model">{{model.id}}</div>
+  </ng-container>
+
+  <ng-container cdkDataGridCol="name">
+    <div *cdkDataGridColHeader>Name</div>
+    <div *cdkDataGridCell="let model">{{model.name}}</div>
+  </ng-container>
+
+  <ng-container cdkDataGridCol="address">
+    <div *cdkDataGridColHeader>Address</div>
+    <div *cdkDataGridCell="let model">{{model.address}}</div>
+  </ng-container>
+
+  <ng-container cdkDataGridCol="commands">
+    <ng-container *cdkDataGridColHeader>Actions</ng-container>
+
+    <ng-container *cdkDataGridCell="let model">
+      <div class="btn-group">
+        <button class="btn-primary btn" bsxCommandModal [commandTitle]="'Change ' + model.name + ' name'" commandText="Update"
+                [dataSource]="merchantDataSource" command="changeMerchant" [model]="model" [template]="changeName">Change</button>
+
+        <button class="btn-danger btn" bsxCommand
+                [dataSource]="merchantDataSource"
+                command="removeMerchant"
+                [model]="model"
+                [confirm]="true"
+                confirmMessage="Are you sure you want to delete this merchant?"
+
+        >RemoveIt</button>
+
+        <button class="btn-warning btn" bsxCommand
+                [dataSource]="merchantDataSource"
+                command="removeMerchant"
+                [model]="model"
+        >Remove Without confirmation</button>    </div>
     </ng-container>
-    <ng-container psDataGridCol="id">
-        <div *psDataGridColHeader>ID</div>
-        <div *psDataGridCell="let model">{{model.id}}</div>
-    </ng-container>
-    <ng-container psDataGridCol="name">
-        <div *psDataGridColHeader>Name</div>
-        <div *psDataGridCell="let model">{{model.name}}</div>
-    </ng-container>
-    <ng-container psDataGridCol="address">
-        <div *psDataGridColHeader>Address</div>
-        <div *psDataGridCell="let model">{{model.address}}</div>
-    </ng-container>
-
-    <ng-container psDataGridCol="commands">
-        <ng-container *psDataGridColHeader>Actions</ng-container>
-        <ng-container *psDataGridCell="let model">
-            <div class="btn-group">
-
-        
-            <button class="btn-primary btn" psbxCommandModal [commandTitle]="'Change ' + model.name + ' name'" commandText="Update"
-            [dataSource]="merchantDataSource" command="changeMerchant" [model]="model" [template]="changeName">Change</button>
-
-            <button class="btn-danger btn" psbxCommand 
-            [dataSource]="merchantDataSource" 
-            command="removeMerchant" 
-            [model]="model" 
-            [confirm]="true"
-            confirmMessage="Are you sure you want to delete this merchant?"
-            
-            >RemoveIt</button>
-
-            <button class="btn-warning btn" psbxCommand 
-            [dataSource]="merchantDataSource" 
-            command="removeMerchant" 
-            [model]="model"             
-            >Remove Without confirmation</button>    </div>
-        </ng-container>
-    </ng-container>
-        <ng-container *psDataGridFooter>
-            <psbx-ds-pagination [dataSource]="merchantDataSource"></psbx-ds-pagination> 
-        </ng-container>
-</ps-data-grid>
+  </ng-container>
 
+  <ng-container *cdkDataGridFooter>
+    <bsx-ds-pagination [dataSource]="merchantDataSource"></bsx-ds-pagination>
+  </ng-container>
+</cdk-data-grid>
 
 
 <ng-template #changeName let-command let-loading="loading">
-    New Name
-    <input type="text" [attr.disabled]="loading" [(ngModel)]="command.name" placeholder="Entermerchant new name" class="form-control">    
-    New Address
-    <input type="text" required [attr.disabled]="loading" [(ngModel)]="command.address" placeholder="Entermerchant new Address" class="form-control">
- 
+  New Name
+  <input type="text" [attr.disabled]="loading" [(ngModel)]="command.name" placeholder="Entermerchant new name" class="form-control">
+  New Address
+  <input type="text" required [attr.disabled]="loading" [(ngModel)]="command.address" placeholder="Entermerchant new Address" class="form-control">
 </ng-template>
 
 <ng-template #theModal let-command let-loading="loading" let-ds="dataSource">
-    <form   >
-        Name
-        <input type="text" required [disabled]="loading" name="name" [(ngModel)]="command.name"  placeholder="Enter a merchant name" class="form-control" >
-        <ps-ds-validation-error class="text-danger d-block" [dataSource]="ds" field="name">
-        </ps-ds-validation-error>
-        Address
-        <input type="text" required [disabled]="loading" name="address" [(ngModel)]="command.address"  placeholder="Enter the merchant's address" class="form-control" >        
-        <ps-ds-validation-error class="text-danger d-block" [dataSource]="ds" field="address">
-        </ps-ds-validation-error>
-        Date
-        <input type="text" required [disabled]="loading" name="address" [(ngModel)]="command.address"  placeholder="Enter the merchant's address" class="form-control" >        
-    </form>
-    
-</ng-template>
+  <form   >
+    Name
+    <input type="text" required [disabled]="loading" name="name" [(ngModel)]="command.name"  placeholder="Enter a merchant name" class="form-control" >
+
+    <cdk-ds-validation-error class="text-danger d-block" [dataSource]="ds" field="name">
+    </cdk-ds-validation-error>
+    Address
+    <input type="text" required [disabled]="loading" name="address" [(ngModel)]="command.address"  placeholder="Enter the merchant's address" class="form-control" >
+
+    <cdk-ds-validation-error class="text-danger d-block" [dataSource]="ds" field="address">
+    </cdk-ds-validation-error>
+    Date
+
+    <input type="text" required [disabled]="loading" name="address" [(ngModel)]="command.address"  placeholder="Enter the merchant's address" class="form-control" >
+  </form>
+</ng-template>

src/app/command-modal-demo/command-modal-demo/command-modal-demo.component.ts

@@ -1,9 +1,9 @@
-import { Component, OnInit, OnDestroy } from '@angular/core';
-import { IDataSource } from '@poweredsoft/data';
-import { IMerchant } from 'src/app/data/services/IMerchant';
-import { MerchantService } from 'src/app/data/services/merchant.service';
-import { BsModalRef } from 'ngx-bootstrap/modal';
-import { Subscription } from 'rxjs';
+import {Component, OnDestroy, OnInit} from '@angular/core';
+import {IDataSource} from '@poweredsoft/data';
+import {IMerchant} from 'src/app/data/services/IMerchant';
+import {MerchantService} from 'src/app/data/services/merchant.service';
+import {BsModalRef} from 'ngx-bootstrap/modal';
+import {Subscription} from 'rxjs';
 
 @Component({
   selector: 'ps-command-modal-demo',
@@ -11,15 +11,15 @@ import { Subscription } from 'rxjs';
   styleUrls: ['./command-modal-demo.component.scss']
 })
 export class CommandModalDemoComponent implements OnInit,OnDestroy {
-
   columns = ['id','name', 'address', 'commands'];
-  pages:any;
-  merchantDataSource: IDataSource<IMerchant>;  
+  pages: any;
+  merchantDataSource: IDataSource<IMerchant>;
   private _dataSubscription: Subscription;
-  constructor(private  merchantService: MerchantService){
-    this.merchantDataSource = this.createDataSource();
 
+  constructor(private merchantService: MerchantService){
+    this.merchantDataSource = this.createDataSource();
   }
+
   ngOnDestroy(): void {
     this._dataSubscription.unsubscribe();
   }
@@ -45,7 +45,8 @@ export class CommandModalDemoComponent implements OnInit,OnDestroy {
 
   ngOnInit() {
     this.merchantDataSource.refresh();
-    this._dataSubscription = this.merchantDataSource.data$.subscribe(newData => {     
+
+    this._dataSubscription = this.merchantDataSource.data$.subscribe(newData => {
       if (newData)
         this.pages = new Array(newData.numberOfPages);
     });
@@ -53,14 +54,14 @@ export class CommandModalDemoComponent implements OnInit,OnDestroy {
 
   message: string;
   modalRef: BsModalRef;
+
   confirm(): void {
     this.message = 'Confirmed!';
     this.modalRef.hide();
   }
- 
+
   decline(): void {
     this.message = 'Declined!';
     this.modalRef.hide();
   }
-
 }

src/app/data-grid-demo/data-grid-demo-home/data-grid-demo-home.component.html

@@ -1,33 +1,32 @@
 <h1>
-    This is a demo for a grid.
+  This is a demo for a grid.
 </h1>
 
-    <ps-data-grid [dataSource]="merchantDataSource" [(columns)]="columns" 
-    tableClasses="table table-sm table-bordered" >
+<cdk-data-grid [dataSource]="merchantDataSource" [(columns)]="columns"
+              tableClasses="table table-sm table-bordered" >
+  <ng-container *cdkDataGridHeader>
+    Some header
+  </ng-container>
+  <ng-container cdkDataGridCol="id">
+    <div *cdkDataGridColHeader>ID</div>
+    <div *cdkDataGridCell="let model">{{model.id}}</div>
+  </ng-container>
+  <ng-container cdkDataGridCol="name">
+    <div *cdkDataGridColHeader>Name</div>
+    <div *cdkDataGridCell="let model">{{model.name}}</div>
+  </ng-container>
+  <ng-container cdkDataGridCol="address">
+    <div *cdkDataGridColHeader>Address</div>
+    <div *cdkDataGridCell="let model">{{model.address}}</div>
+  </ng-container>
 
-        <ng-container *psDataGridHeader>
-            Some header
-        </ng-container>
-        <ng-container psDataGridCol="id">
-            <div *psDataGridColHeader>ID</div>
-            <div *psDataGridCell="let model">{{model.id}}</div>
-        </ng-container>
-        <ng-container psDataGridCol="name">
-            <div *psDataGridColHeader>Name</div>
-            <div *psDataGridCell="let model">{{model.name}}</div>
-        </ng-container>
-        <ng-container psDataGridCol="address">
-            <div *psDataGridColHeader>Address</div>
-            <div *psDataGridCell="let model">{{model.address}}</div>
-        </ng-container>
-
-        <ng-container psDataGridCol="commands">
-            <ng-container *psDataGridColHeader>Actions</ng-container>
-            <ng-container *psDataGridCell="let model">
-                <button class="btn btn-primary mr-2">Some Actions</button>
-            </ng-container>
-        </ng-container>
-        <ng-container *psDataGridFooter>
-            <strong>Footer works!</strong>
-        </ng-container>
-    </ps-data-grid>
+  <ng-container cdkDataGridCol="commands">
+    <ng-container *cdkDataGridColHeader>Actions</ng-container>
+    <ng-container *cdkDataGridCell="let model">
+      <button class="btn btn-primary mr-2">Some Actions</button>
+    </ng-container>
+  </ng-container>
+  <ng-container *cdkDataGridFooter>
+    <strong>Footer works!</strong>
+  </ng-container>
+</cdk-data-grid>

src/app/data-grid-demo/data-grid-demo-home/data-grid-demo-home.component.ts

@@ -1,8 +1,8 @@
-import { Component, OnInit, OnDestroy } from '@angular/core';
-import { DataSource, IDataSource, IQueryExecutionResult, IQueryExecutionGroupResult } from '@poweredsoft/data';
-import { IMerchant } from 'src/app/data/services/IMerchant';
-import { MerchantService } from 'src/app/data/services/merchant.service';
-import { Subscription } from 'rxjs';
+import {Component, OnDestroy, OnInit} from '@angular/core';
+import {IDataSource} from '@poweredsoft/data';
+import {IMerchant} from 'src/app/data/services/IMerchant';
+import {MerchantService} from 'src/app/data/services/merchant.service';
+import {Subscription} from 'rxjs';
 
 @Component({
   selector: 'ps-data-grid-demo-home',
@@ -10,24 +10,23 @@ import { Subscription } from 'rxjs';
   styleUrls: ['./data-grid-demo-home.component.scss']
 })
 export class DataGridDemoHomeComponent implements OnInit, OnDestroy {
-
   title = 'cdkDemo';
   columns = ['id','name', 'address', 'commands']
-  merchantDataSource: IDataSource<IMerchant>;  
+  merchantDataSource: IDataSource<IMerchant>;
+
   private _dataSubscription: Subscription;
   private _loading: Subscription;
-  constructor(private  merchantService: MerchantService){
+
+  constructor(private merchantService: MerchantService){
     this.merchantDataSource = this.createDataSource();
 
   }
+
   ngOnDestroy(): void {
     this._dataSubscription.unsubscribe();
     this._loading.unsubscribe();
   }
 
-  
-
-
   newMerchant(name: string) {
     this.merchantDataSource.executeCommandByName('addMerchant', {
       name: name
@@ -57,10 +56,4 @@ export class DataGridDemoHomeComponent implements OnInit, OnDestroy {
     });
     this.merchantDataSource.refresh();
   }
- 
-
-  
-
-
-
 }

src/app/data-grid-demo/data-grid-demo-routing.module.ts

@@ -1,6 +1,6 @@
-import { NgModule } from '@angular/core';
-import { Routes, RouterModule } from '@angular/router';
-import { DataGridDemoHomeComponent } from './data-grid-demo-home/data-grid-demo-home.component';
+import {NgModule} from '@angular/core';
+import {RouterModule, Routes} from '@angular/router';
+import {DataGridDemoHomeComponent} from './data-grid-demo-home/data-grid-demo-home.component';
 
 
 const routes: Routes = [

src/app/data-grid-demo/data-grid-demo.module.ts

@@ -1,17 +1,18 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
+import {NgModule} from '@angular/core';
+import {CommonModule} from '@angular/common';
 
-import { DataGridDemoRoutingModule } from './data-grid-demo-routing.module';
-import { DataGridDemoHomeComponent } from './data-grid-demo-home/data-grid-demo-home.component';
-import { DataGridModule } from '@poweredsoft/ngx-cdk-ui';
+import {DataGridDemoRoutingModule} from './data-grid-demo-routing.module';
+import {DataGridDemoHomeComponent} from './data-grid-demo-home/data-grid-demo-home.component';
+import {DataGridModule} from "@openharbor/ngx-data-cdk-ui";
 
 
 @NgModule({
-  declarations: [ DataGridDemoHomeComponent],
+  declarations: [DataGridDemoHomeComponent],
   imports: [
     CommonModule,
     DataGridDemoRoutingModule,
-    DataGridModule    
+    DataGridModule,
+    DataGridModule
   ]
 })
 export class DataGridDemoModule { }

src/app/data/services/merchant.service.ts

@@ -1,11 +1,15 @@
-import { Injectable } from '@angular/core';
-import { GraphQLDataSourceService } from '@poweredsoft/ngx-data-apollo';
-import { IDataSource, DataSource } from '@poweredsoft/data';
-import { Apollo } from 'apollo-angular';
-import  gql  from 'graphql-tag';
-import { of } from 'rxjs';
-import { IChangeMerchantCommand as IChangeMerchantCommand, IAddMerchantCommand, IRemoveMerchantCommand } from './IChangeMerchantCommand';
-import { IMerchant } from './IMerchant';
+import {Injectable} from '@angular/core';
+import {GraphQLDataSourceService} from '@poweredsoft/ngx-data-apollo';
+import {DataSource, IDataSource} from '@poweredsoft/data';
+import {Apollo} from 'apollo-angular';
+import gql from 'graphql-tag';
+import {of} from 'rxjs';
+import {
+  IAddMerchantCommand,
+  IChangeMerchantCommand as IChangeMerchantCommand,
+  IRemoveMerchantCommand
+} from './IChangeMerchantCommand';
+import {IMerchant} from './IMerchant';
 
 @Injectable({
   providedIn: 'root',
@@ -31,11 +35,11 @@ export class MerchantService {
       },
       true
     );
-   
+
     builder.addMutation<IChangeMerchantCommand, string>(
       'changeMerchant', //<-- command name
       'changeMerchant', //<-- graph ql mutation name
-      
+
       // implementation of the command.
       command => {
         return this.apollo.use('command').mutate<string>({
@@ -49,7 +53,7 @@ export class MerchantService {
           },
         });
       },
-      
+
       // viewModel -> transform to the form model for that command -> IChangeMerchantName
       e => of(<IChangeMerchantCommand>{
         id: e.model.id,
@@ -62,10 +66,10 @@ export class MerchantService {
     builder.addMutation<IAddMerchantCommand, string>(
       'addMerchant', //<-- command name
       'addMerchant', //<-- graph ql mutation name
-      
+
       // implementation of the command.
       command => {
-        
+
         return this.apollo.use('command').mutate<string>({
           mutation: gql`
             mutation executeAddMerchant($command: AddMerchantCommandInput) {
@@ -77,7 +81,7 @@ export class MerchantService {
           },
         });
       },
-      
+
       // viewModel -> transform to the form model for that command -> IChangeMerchantName
       e => of(<IAddMerchantCommand>{
         name: 'A New merchant',
@@ -89,10 +93,9 @@ export class MerchantService {
     builder.addMutation<IRemoveMerchantCommand, string>(
       'removeMerchant', //<-- command name
       'removeMerchant', //<-- graph ql mutation name
-      
+
       // implementation of the command.
       command => {
-        
         return this.apollo.use('command').mutate<string>({
           mutation: gql`
             mutation executeAddMerchant($command: RemoveMerchantCommandInput) {
@@ -104,10 +107,10 @@ export class MerchantService {
           },
         });
       },
-      
+
       // viewModel -> transform to the form model for that command -> IChangeMerchantName
-      e => of(<IRemoveMerchantCommand>{
-        id: e.model.id, //should be id?
+      (command) => of(<IRemoveMerchantCommand>{
+        id: command.model.id, //should be id?
       })
     );
 
@@ -131,7 +134,7 @@ export class MerchantService {
             ascending: true
           }
         ]
-      }, 
+      },
       true
     );
 

src/app/ds-command-demo/ds-command-demo-page/ds-command-demo-page.component.html

@@ -1,72 +1,68 @@
+<cdk-ds-view [dataSource]="dataSource">
+  <ng-container *cdkDsViewContent="let model">
+    <div class="card">
+      <div class="card-header">
+        {{ model.firstName }} {{ model.lastName }}
+      </div>
 
-<ps-view [dataSource]="dataSource">
-    <ng-container *psViewContent="let model">
-        <div class="card">
-            <div class="card-header">
-                {{ model.firstName }} {{ model.lastName }}
-            </div>
-            <div class="card-body">
-                {{ model.number }}
-                <ng-container *ngIf="model.extension">
-                    ,{{model.extension}}
-                </ng-container>
+      <div class="card-body">
+        {{ model.number }}
+        <ng-container *ngIf="model.extension">
+          ,{{model.extension}}
+        </ng-container>
+      </div>
 
-            </div>
-            <div class="card-footer">
-                <button class="btn btn-primary btn-sm" (click)="formActivated = true">Change Phone Number</button>
+      <div class="card-footer">
+        <button class="btn btn-primary btn-sm" (click)="formActivated = true">Change Phone Number</button>
+      </div>
+    </div>
 
+    <div class="card mt-2" *ngIf="formActivated">
+      <div class="card-body">
+        <div cdkDsCommand [dataSource]="dataSource" name="changePhone" (success)="onSuccess($event)"
+             [model]="model">
+          <ng-container *cdkDsCommandContent="let command; let loading=loading">
+            <div class="form-group">
+              <label>Number</label>
+              <input type="text" class="form-control" [(ngModel)]="command.number" />
+              <cdk-ds-validation-error class="text-danger" [dataSource]="dataSource" field="number">
+              </cdk-ds-validation-error>
             </div>
+
+            <div class="form-group">
+              <label>Extension</label>
+              <input type="text" class="form-control" [(ngModel)]="command.extension" />
+              <cdk-ds-validation-error class="text-danger" [dataSource]="dataSource" field="extension">
+              </cdk-ds-validation-error>
+            </div>
+          </ng-container>
+
+          <div class="alert alert-danger mt-2" *cdkDsCommandValidation="let validationResult">
+            <ng-container *ngFor="let propertyErrors of validationResult">
+              <ng-container *ngFor="let error of propertyErrors.errors">
+                {{ error }}<br>
+              </ng-container>
+            </ng-container>
+          </div>
+
+          <ng-container *cdkDsCommandNoCommand>
+            NO COMMAND
+          </ng-container>
+
+          <ng-container *cdkDsCommandError="let error;">
+            <div class="alert alert-danger">
+              {{error}}
+            </div>
+          </ng-container>
+
+          <ng-container *cdkDsCommandFooter="let command; let loading=loading">
+            <button class="btn btn-info" [disabled]="loading"
+                    (click)="formActivated = false">Cancel</button>
+            &nbsp;
+            <button class="btn btn-primary" [disabled]="loading" cdkDsCommandSubmit>Save</button>
+          </ng-container>
         </div>
-        
-        <div class="card mt-2" *ngIf="formActivated">
-           
-            <div class="card-body">
-                <div psDsCommand [dataSource]="dataSource" name="changePhone" (success)="onSuccess($event)"
-                    [model]="model">
-                    <ng-container *psDsCommandContent="let command; let loading=loading">
-                        <div class="form-group">
-                            <label>Number</label>
-                            <input type="text" class="form-control" [(ngModel)]="command.number" />
-                            <ps-ds-validation-error class="text-danger" [dataSource]="dataSource" field="number">
-                            </ps-ds-validation-error>
-                        </div>
-
-                        <div class="form-group">
-                            <label>Extension</label>
-                            <input type="text" class="form-control" [(ngModel)]="command.extension" />
-                            <ps-ds-validation-error class="text-danger" [dataSource]="dataSource" field="extension">
-                            </ps-ds-validation-error>
-                        </div>
-                    </ng-container>
-
-                    <div class="alert alert-danger mt-2" *psDsCommandValidation="let validationResult">
-                        <ng-container *ngFor="let propertyErrors of validationResult">
-                            <ng-container *ngFor="let err of propertyErrors.errors">
-                                {{ err }}<br>
-                            </ng-container>
-                        </ng-container>
-                    </div>
-
-                    <ng-container *psDsCommandNoCommand>
-                        NO COMMAND
-                    </ng-container>
-
-                    <ng-container *psDsCommandError="let error;">
-                        <div class="alert alert-danger">
-                            {{error}}
-                        </div>
-                    </ng-container>
-
-                    <ng-container *psDsCommandFooter="let command; let loading=loading">
-                        <button class="btn btn-info" [disabled]="loading"
-                            (click)="formActivated = false">Cancel</button>
-                        &nbsp;
-                        <button class="btn btn-primary" [disabled]="loading" psDsCommandSubmit>Save</button>
-
-                    </ng-container>
-
-                </div>
-            </div>
-        </div>
-    </ng-container>
-</ps-view>
+      </div>
+    </div>
+  </ng-container>
+</cdk-ds-view>

src/app/ds-command-demo/ds-command-demo-page/ds-command-demo-page.component.ts

@@ -1,7 +1,7 @@
-import { Component, OnInit } from '@angular/core';
-import { IDataSource, IDataSourceValidationError } from '@poweredsoft/data';
-import { HttpDataSourceService } from '@poweredsoft/ngx-data';
-import { of, throwError } from 'rxjs';
+import {Component, OnInit} from '@angular/core';
+import {IDataSource} from '@poweredsoft/data';
+import {HttpDataSourceService} from '@poweredsoft/ngx-data';
+import {of, throwError} from 'rxjs';
 
 interface ContactQuery {
   contactId: number
@@ -27,7 +27,6 @@ interface ChangeContactPhone {
   styleUrls: ['./ds-command-demo-page.component.scss']
 })
 export class DsCommandDemoPageComponent implements OnInit {
-
   private contact: Contact = {
     id: 1,
     firstName: "David",
@@ -91,5 +90,4 @@ export class DsCommandDemoPageComponent implements OnInit {
     this.contact.extension = command.extension;
     this.formActivated = false;
   }
-
 }

src/app/ds-command-demo/ds-command-demo-routing.module.ts

@@ -1,6 +1,6 @@
-import { NgModule } from '@angular/core';
-import { Routes, RouterModule } from '@angular/router';
-import { DsCommandDemoPageComponent } from './ds-command-demo-page/ds-command-demo-page.component';
+import {NgModule} from '@angular/core';
+import {RouterModule, Routes} from '@angular/router';
+import {DsCommandDemoPageComponent} from './ds-command-demo-page/ds-command-demo-page.component';
 
 
 const routes: Routes = [

src/app/ds-command-demo/ds-command-demo.module.ts

@@ -1,10 +1,10 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
+import {NgModule} from '@angular/core';
+import {CommonModule} from '@angular/common';
 
-import { DsCommandDemoRoutingModule } from './ds-command-demo-routing.module';
-import { DsCommandDemoPageComponent } from './ds-command-demo-page/ds-command-demo-page.component';
-import { DsCommandModule, DsValidationErrorModule, ViewModule } from '@poweredsoft/ngx-cdk-ui';
-import { FormsModule } from '@angular/forms';
+import {DsCommandDemoRoutingModule} from './ds-command-demo-routing.module';
+import {DsCommandDemoPageComponent} from './ds-command-demo-page/ds-command-demo-page.component';
+import {FormsModule} from '@angular/forms';
+import {DsCommandModule, DsValidationErrorModule, ViewModule} from "@openharbor/ngx-data-cdk-ui";
 
 
 @NgModule({

src/app/form-group-modal-demo/form-group-modal-demo-routing.module.ts

@@ -1,6 +1,6 @@
-import { NgModule } from '@angular/core';
-import { Routes, RouterModule } from '@angular/router';
-import { FormGroupModalDemoComponent } from './form-group-modal-demo/form-group-modal-demo.component';
+import {NgModule} from '@angular/core';
+import {RouterModule, Routes} from '@angular/router';
+import {FormGroupModalDemoComponent} from './form-group-modal-demo/form-group-modal-demo.component';
 
 
 const routes: Routes = [{

src/app/form-group-modal-demo/form-group-modal-demo.module.ts

@@ -1,13 +1,11 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { FormGroupModalDemoComponent } from './form-group-modal-demo/form-group-modal-demo.component';
-import { FormGroupModalDemoRoutingModule } from './form-group-modal-demo-routing.module'
-import { DataGridModule } from '@poweredsoft/ngx-cdk-ui';
-import { FormGroupCommandModalModule, PaginationModule, CommandModule } from '@poweredsoft/ngx-bootstrap';
-import { ReactiveFormsModule } from '@angular/forms';
-import { ConfirmModalModule } from 'projects/poweredsoft/ngx-bootstrap/src/public-api';
-
-
+import {NgModule} from '@angular/core';
+import {CommonModule} from '@angular/common';
+import {FormGroupModalDemoComponent} from './form-group-modal-demo/form-group-modal-demo.component';
+import {FormGroupModalDemoRoutingModule} from './form-group-modal-demo-routing.module'
+import {ReactiveFormsModule} from '@angular/forms';
+import {DataGridModule} from "@openharbor/ngx-data-cdk-ui";
+import {CommandModule, ConfirmModalModule, FormGroupCommandModalModule} from "@openharbor/ngx-data-bootstrap-ui";
+import { PaginationModule } from "@openharbor/ngx-data-bootstrap-ui";
 
 @NgModule({
   declarations: [FormGroupModalDemoComponent],
@@ -17,10 +15,9 @@ import { ConfirmModalModule } from 'projects/poweredsoft/ngx-bootstrap/src/publi
     DataGridModule,
     FormGroupCommandModalModule,
     ReactiveFormsModule,
-    PaginationModule,
     ConfirmModalModule,
-    CommandModule
-    
+    CommandModule,
+    PaginationModule,
   ]
 })
 export class FormGroupModalDemoModule { }

src/app/form-group-modal-demo/form-group-modal-demo/form-group-modal-demo.component.html

@@ -1,71 +1,74 @@
 <h3>This is the demo for form-group modal!</h3>
-<ps-data-grid [dataSource]="merchantDataSource" [(columns)]="columns" 
-              tableClasses="table table-dark table-striped table-sm table-bordered">
-    <ng-container *psDataGridHeader>
-            <button class="btn-success btn" psbxFormGroupCommandModal commandTitle="Adding a new merchant"
-             commandText="Add" [dataSource]="merchantDataSource" command="addMerchant" 
-             (formCreate)="onFormCreate($event)" [template]="theModal">Create New Records</button>   
-    </ng-container>
-    <ng-container psDataGridCol="id">
-        <div *psDataGridColHeader>ID</div>
-        <div *psDataGridCell="let model">{{model.id}}</div>
-    </ng-container>
-    <ng-container psDataGridCol="name">
-        <div *psDataGridColHeader>Name</div>
-        <div *psDataGridCell="let model">{{model.name}}</div>
-    </ng-container>
-    <ng-container psDataGridCol="address">
-        <div *psDataGridColHeader>Address</div>
-        <div *psDataGridCell="let model">{{model.address}}</div>
-    </ng-container>
-    <ng-container psDataGridCol="actions">
-    
-        <ng-container *psDataGridColHeader>Actions</ng-container>
-        <ng-container *psDataGridCell="let model">
-            <div class="btn-group">
-            <button class="btn-success btn" psbxFormGroupCommandModal 
-            [commandTitle]="'Change ' + model.name + ' name'" 
-            commandText="Update"
-            [dataSource]="merchantDataSource" 
-            command="changeMerchant" 
-            (formCreate)="onFormCreate($event)" 
-            [model]="model" 
-            [template]="theModal">Change</button>
-            
-            <button class="btn-danger btn" 
-            psbxCommand 
-            [dataSource]="merchantDataSource" 
-            command="removeMerchant" 
-            [model]="model" 
-            [confirm]="true"
-            yesClass="warning"
-            noClass = "secondary"
-            noText = "Cancel Delete"
-            yesText = "Delete It"
-            confirmMessage="Are you sure you want to delete this merchant?"
-            >RemoveIt</button>
-            </div>
-        </ng-container>
-    </ng-container>
-    <ng-container *psDataGridFooter>
-        <psbx-ds-pagination [dataSource]="merchantDataSource"></psbx-ds-pagination> 
-    </ng-container>
-</ps-data-grid>
+<cdk-data-grid [dataSource]="merchantDataSource" [(columns)]="columns"
+               tableClasses="table table-dark table-striped table-sm table-bordered">
+  <ng-container *cdkDataGridHeader>
+    <button class="btn-success btn" bsxFormGroupCommandModal commandTitle="Adding a new merchant"
+            commandText="Add" [dataSource]="merchantDataSource" command="addMerchant"
+            (formCreate)="onFormCreate($event)" [template]="theModal">Create New Records</button>
+  </ng-container>
 
+  <ng-container cdkDataGridCol="id">
+    <div *cdkDataGridColHeader>ID</div>
+    <div *cdkDataGridCell="let model">{{model.id}}</div>
+  </ng-container>
+
+  <ng-container cdkDataGridCol="name">
+    <div *cdkDataGridColHeader>Name</div>
+    <div *cdkDataGridCell="let model">{{model.name}}</div>
+  </ng-container>
+
+  <ng-container cdkDataGridCol="address">
+    <div *cdkDataGridColHeader>Address</div>
+    <div *cdkDataGridCell="let model">{{model.address}}</div>
+  </ng-container>
+
+  <ng-container cdkDataGridCol="actions">
+    <ng-container *cdkDataGridColHeader>Actions</ng-container>
+
+    <ng-container *cdkDataGridCell="let model">
+      <div class="btn-group">
+        <button class="btn-success btn" bsxFormGroupCommandModal
+                [commandTitle]="'Change ' + model.name + ' name'"
+                commandText="Update"
+                [dataSource]="merchantDataSource"
+                command="changeMerchant"
+                (formCreate)="onFormCreate($event)"
+                [model]="model"
+                [template]="theModal">Change</button>
+
+        <button class="btn-danger btn"
+                bsxCommand
+                [dataSource]="merchantDataSource"
+                command="removeMerchant"
+                [model]="model"
+                [confirm]="true"
+                yesClass="warning"
+                noClass = "secondary"
+                noText = "Cancel Delete"
+                yesText = "Delete It"
+                confirmMessage="Are you sure you want to delete this merchant?">RemoveIt</button>
+      </div>
+    </ng-container>
+  </ng-container>
+
+  <ng-container *cdkDataGridFooter>
+    <bsx-ds-pagination [dataSource]="merchantDataSource"></bsx-ds-pagination>
+  </ng-container>
+</cdk-data-grid>
 
 
 <ng-template #theModal let-form let-loading="loading">
-    <form [formGroup]="form">
-        <div class="form-group">
-            <label for="name" class="col-sm-2 control-label">Name</label>
-            <div class="col-sm-8">
-                <input id="name" type="text" class="form-control" formControlName="name">
-            </div>
+  <form [formGroup]="form">
+    <div class="form-group">
+      <label for="name" class="col-sm-2 control-label">Name</label>
+      <div class="col-sm-8">
+        <input id="name" type="text" class="form-control" formControlName="name">
+      </div>
 
-            <label for="address" class="col-sm-2 control-label">Address</label>
-            <div class="col-sm-8">
-                <input id="address" type="text" class="form-control" formControlName="address">
-            </div>
-        </div>
-    </form>
-</ng-template>
+      <label for="address" class="col-sm-2 control-label">Address</label>
+      <div class="col-sm-8">
+        <input id="address" type="text" class="form-control" formControlName="address">
+      </div>
+    </div>
+  </form>
+</ng-template>

src/app/form-group-modal-demo/form-group-modal-demo/form-group-modal-demo.component.ts

@@ -1,11 +1,10 @@
-import { Component, OnInit, OnDestroy } from '@angular/core';
-import { IDataSource } from '@poweredsoft/data';
-import { IMerchant } from 'src/app/data/services/IMerchant';
-import { MerchantService } from 'src/app/data/services/merchant.service';
-import { FormGroup, FormControl, FormBuilder, Validators } from '@angular/forms';
-import { IModelFormCreateEvent } from 'projects/poweredsoft/ngx-bootstrap/src/public-api';
-import { Subscription } from 'rxjs';
-import { THIS_EXPR } from '@angular/compiler/src/output/output_ast';
+import {Component, OnDestroy, OnInit} from '@angular/core';
+import {IDataSource} from '@poweredsoft/data';
+import {IMerchant} from 'src/app/data/services/IMerchant';
+import {MerchantService} from 'src/app/data/services/merchant.service';
+import {FormBuilder, Validators} from '@angular/forms';
+import {Subscription} from 'rxjs';
+import {IModelFormCreateEvent} from "@openharbor/ngx-data-bootstrap-ui";
 
 @Component({
   selector: 'ps-form-group-modal-demo',
@@ -13,38 +12,37 @@ import { THIS_EXPR } from '@angular/compiler/src/output/output_ast';
   styleUrls: ['./form-group-modal-demo.component.scss']
 })
 export class FormGroupModalDemoComponent implements OnInit,OnDestroy {
- 
+  pages: any;
+
+  merchantDataSource: IDataSource<IMerchant>;
+  private _dataSubscription: Subscription;
+  columns = ['id','name', 'address', 'actions'];
+
   createDataSource(): IDataSource<IMerchant> {
     return this.merchantService.createDataSource();
   }
 
-  pages:any;
-  merchantDataSource: IDataSource<IMerchant>;
-  private _dataSubscription: Subscription;
-  columns = ['id','name', 'address', 'actions'];
   constructor(private merchantService: MerchantService, private fb: FormBuilder) {
     this.merchantDataSource = this.createDataSource();
-   }
+  }
+
   ngOnDestroy(): void {
     this._dataSubscription.unsubscribe();
   }
 
   ngOnInit(): void {
     this.merchantDataSource.refresh();
-    this._dataSubscription = this.merchantDataSource.data$.subscribe(newData => {     
+    this._dataSubscription = this.merchantDataSource.data$.subscribe(newData => {
       if (newData)
         this.pages = new Array(newData.numberOfPages);
     });
   }
 
-  onFormCreate(event: IModelFormCreateEvent) {    
+  onFormCreate(event: IModelFormCreateEvent) {
     event.shouldSetCommandModel = false;
     event.formGroup = this.fb.group({
       'name': [event.commandModel.name, Validators.required],
       'address': [event.commandModel.address, Validators.required]
     });
   }
-
-
-
 }

src/app/grid-filter&sorting-demo/grid-filter-demo-routing.module.ts

@@ -1,6 +1,6 @@
-import { NgModule } from '@angular/core';
-import { Routes, RouterModule } from '@angular/router';
-import { GridFilterDemoComponent } from './grid-filter-demo/grid-filter-demo.component';
+import {NgModule} from '@angular/core';
+import {RouterModule, Routes} from '@angular/router';
+import {GridFilterDemoComponent} from './grid-filter-demo/grid-filter-demo.component';
 
 
 const routes: Routes = [{

src/app/grid-filter&sorting-demo/grid-filter-demo.module.ts

@@ -1,18 +1,25 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-
-import { GridFilterDemoRoutingModule } from './grid-filter-demo-routing.module';
-import { GridFilterDemoComponent } from './grid-filter-demo/grid-filter-demo.component';
-import { DataSourceFilterModule, PaginationModule, CommandModalModule, ConfirmModalModule, SpinnerModule, DataSourceSortingModule, CommandModule } from '@poweredsoft/ngx-bootstrap';
-import { DataGridModule } from '@poweredsoft/ngx-cdk-ui';
-import { FormsModule } from '@angular/forms';
+import {NgModule} from '@angular/core';
+import {CommonModule} from '@angular/common';
+import {GridFilterDemoRoutingModule} from './grid-filter-demo-routing.module';
+import {GridFilterDemoComponent} from './grid-filter-demo/grid-filter-demo.component';
+import {FormsModule} from '@angular/forms';
+import {
+  CommandModalModule,
+  CommandModule,
+  ConfirmModalModule,
+  DataSourceFilterModule,
+  DataSourceSortingModule,
+  PaginationModule,
+  SpinnerModule
+} from "@openharbor/ngx-data-bootstrap-ui";
+import {DataGridModule} from "@openharbor/ngx-data-cdk-ui";
 
 @NgModule({
   declarations: [GridFilterDemoComponent],
   imports: [
     CommonModule,
     GridFilterDemoRoutingModule,
-    DataSourceFilterModule,    
+    DataSourceFilterModule,
     PaginationModule,
     DataGridModule,
     CommandModalModule,

src/app/grid-filter&sorting-demo/grid-filter-demo/grid-filter-demo.component.html

@@ -1,93 +1,89 @@
 <h2>grid-filter-demo works!</h2>
 
-<ps-data-grid [dataSource]="merchantDataSource" [(columns)]="columns"
-    tableClasses="table table-sm table-striped table-bordered">
-    <psbx-spinner *psDataGridLoader></psbx-spinner>
-    <ng-container *psDataGridHeader>
-        <button class="btn-info btn" psbxCommandModal commandTitle="Adding a new merchant" commandText="Add"
+<cdk-data-grid [dataSource]="merchantDataSource" [(columns)]="columns"
+              tableClasses="table table-sm table-striped table-bordered">
+  <bsx-spinner *cdkDataGridLoader></bsx-spinner>
+  <ng-container *cdkDataGridHeader>
+    <button class="btn-info btn" bsxCommandModal commandTitle="Adding a new merchant" commandText="Add"
             [dataSource]="merchantDataSource" command="addMerchant" [template]="theModal">Create Record</button>
+  </ng-container>
+
+  <ng-container cdkDataGridCol="id">
+    <ng-container *cdkDataGridColHeader>ID</ng-container>
+    <bsx-ds-text-filter *cdkDataGridCellFilter [dataSource]="merchantDataSource" path="id"></bsx-ds-text-filter>
+    <bsx-ds-sorting *cdkDataGridColSort [dataSource]="merchantDataSource" path="id"></bsx-ds-sorting>
+    <ng-container *cdkDataGridCell="let model">{{model.id}}</ng-container>
+  </ng-container>
+
+  <ng-container cdkDataGridCol="name">
+    <ng-container *cdkDataGridColHeader>Name</ng-container>
+    <bsx-ds-text-filter *cdkDataGridCellFilter [dataSource]="merchantDataSource" path="name"></bsx-ds-text-filter>
+    <bsx-ds-sorting *cdkDataGridColSort [dataSource]="merchantDataSource" path="name"></bsx-ds-sorting>
+    <ng-container *cdkDataGridCell="let model">{{model.name}}</ng-container>
+  </ng-container>
+
+  <ng-container cdkDataGridCol="address">
+    <ng-container *cdkDataGridColHeader>Address</ng-container>
+    <ng-container *cdkDataGridCell="let model">{{model.address}}</ng-container>
+    <bsx-ds-text-filter *cdkDataGridCellFilter [dataSource]="merchantDataSource" path="address">
+    </bsx-ds-text-filter>
+    <bsx-ds-sorting *cdkDataGridColSort [dataSource]="merchantDataSource" path="address"></bsx-ds-sorting>
+  </ng-container>
+
+  <ng-container cdkDataGridCol="ordering">
+    <ng-container *cdkDataGridColHeader>Priority</ng-container>
+    <ng-container *cdkDataGridCell="let model">{{model.ordering}}</ng-container>
+    <bsx-ds-number-filter *cdkDataGridCellFilter [dataSource]="merchantDataSource" path="ordering">
+    </bsx-ds-number-filter>
+    <bsx-ds-sorting *cdkDataGridColSort [dataSource]="merchantDataSource" path="ordering"></bsx-ds-sorting>
+  </ng-container>
+
+  <ng-container cdkDataGridCol="openDate">
+    <ng-container *cdkDataGridColHeader>Open Date</ng-container>
+    <ng-container *cdkDataGridCell="let model">{{model.openDate}}</ng-container>
+    <bsx-ds-datetime-filter *cdkDataGridCellFilter [dataSource]="merchantDataSource" path="openDate">
+    </bsx-ds-datetime-filter>
+    <bsx-ds-sorting *cdkDataGridColSort [dataSource]="merchantDataSource" path="openDate"></bsx-ds-sorting>
+  </ng-container>
+
+  <ng-container cdkDataGridCol="commands">
+    <ng-container *cdkDataGridColHeader>Actions</ng-container>
+    <ng-container *cdkDataGridCell="let model">
+      <div class="btn-group">
+        <button class="btn-info btn" bsxCommandModal [commandTitle]="'Change ' + model.name + ' name'"
+                commandText="Update" [dataSource]="merchantDataSource" command="changeMerchant" [model]="model"
+                [template]="theModal">Change</button>
+        <button class="btn-danger btn" bsxCommand [dataSource]="merchantDataSource" command="removeMerchant"
+                [model]="model" [confirm]="true" yesClass="warning" noClass="secondary" noText="Cancel Delete"
+                yesText="Delete It"
+                confirmMessage="Are you sure you want to delete this merchant?">RemoveIt</button></div>
+
     </ng-container>
-
-
-
-    <ng-container psDataGridCol="id">
-        <ng-container *psDataGridColHeader>ID</ng-container>
-        <psbx-ds-text-filter *psDataGridCellFilter [dataSource]="merchantDataSource" path="id"></psbx-ds-text-filter>
-        <psbx-ds-sorting *psDataGridColSort [dataSource]="merchantDataSource" path="id"></psbx-ds-sorting>
-        <ng-container *psDataGridCell="let model">{{model.id}}</ng-container>
-    </ng-container>
-
-    <ng-container psDataGridCol="name">
-        <ng-container *psDataGridColHeader>Name</ng-container>
-        <psbx-ds-text-filter *psDataGridCellFilter [dataSource]="merchantDataSource" path="name"></psbx-ds-text-filter>
-        <psbx-ds-sorting *psDataGridColSort [dataSource]="merchantDataSource" path="name"></psbx-ds-sorting>
-        <ng-container *psDataGridCell="let model">{{model.name}}</ng-container>
-    </ng-container>
-
-    <ng-container psDataGridCol="address">
-        <ng-container *psDataGridColHeader>Address</ng-container>
-        <ng-container *psDataGridCell="let model">{{model.address}}</ng-container>
-        <psbx-ds-text-filter *psDataGridCellFilter [dataSource]="merchantDataSource" path="address">
-        </psbx-ds-text-filter>
-        <psbx-ds-sorting *psDataGridColSort [dataSource]="merchantDataSource" path="address"></psbx-ds-sorting>
-    </ng-container>
-
-    <ng-container psDataGridCol="ordering">
-        <ng-container *psDataGridColHeader>Priority</ng-container>
-        <ng-container *psDataGridCell="let model">{{model.ordering}}</ng-container>
-        <psbx-ds-number-filter *psDataGridCellFilter [dataSource]="merchantDataSource" path="ordering">
-        </psbx-ds-number-filter>
-        <psbx-ds-sorting *psDataGridColSort [dataSource]="merchantDataSource" path="ordering"></psbx-ds-sorting>
-    </ng-container>
-
-    <ng-container psDataGridCol="openDate">
-        <ng-container *psDataGridColHeader>Open Date</ng-container>
-        <ng-container *psDataGridCell="let model">{{model.openDate}}</ng-container>
-        <psbx-ds-datetime-filter *psDataGridCellFilter [dataSource]="merchantDataSource" path="openDate">
-        </psbx-ds-datetime-filter>
-        <psbx-ds-sorting *psDataGridColSort [dataSource]="merchantDataSource" path="openDate"></psbx-ds-sorting>
-    </ng-container>
-
-    <ng-container psDataGridCol="commands">
-        <ng-container *psDataGridColHeader>Actions</ng-container>
-        <ng-container *psDataGridCell="let model">
-            <div class="btn-group">
-                <button class="btn-info btn" psbxCommandModal [commandTitle]="'Change ' + model.name + ' name'"
-                    commandText="Update" [dataSource]="merchantDataSource" command="changeMerchant" [model]="model"
-                    [template]="theModal">Change</button>
-                <button class="btn-danger btn" psbxCommand [dataSource]="merchantDataSource" command="removeMerchant"
-                    [model]="model" [confirm]="true" yesClass="warning" noClass="secondary" noText="Cancel Delete"
-                    yesText="Delete It"
-                    confirmMessage="Are you sure you want to delete this merchant?">RemoveIt</button></div>
-
-        </ng-container>
-    </ng-container>
-    <ng-container *psDataGridFooter>
-        <psbx-ds-pagination [dataSource]="merchantDataSource"></psbx-ds-pagination>
-    </ng-container>
-</ps-data-grid>
+  </ng-container>
+  <ng-container *cdkDataGridFooter>
+    <bsx-ds-pagination [dataSource]="merchantDataSource"></bsx-ds-pagination>
+  </ng-container>
+</cdk-data-grid>
 
 
 <ng-template #theModal let-command let-loading="loading">
-    <label for="name">Name</label>
-    <input type="text" required [(ngModel)]="command.name" placeholder="Enter a merchant name" class="form-control">
-    <label for="address">Address</label>
-    <input type="text" required [(ngModel)]="command.address" placeholder="Enter the merchant's address"
-        class="form-control">
-    <label for="address">Priority</label>
-    <input type="number" required [(ngModel)]="command.ordering" placeholder="Enter the merchant's Priority"
-        class="form-control">
-    <label for="address">Priority</label>
-    <input type="date" required [(ngModel)]="command.openDate" placeholder="Enter the merchant's Priority"
-        class="form-control">
-
+  <label for="name">Name</label>
+  <input type="text" required [(ngModel)]="command.name" placeholder="Enter a merchant name" class="form-control">
+  <label for="address">Address</label>
+  <input type="text" required [(ngModel)]="command.address" placeholder="Enter the merchant's address"
+         class="form-control">
+  <label for="address">Priority</label>
+  <input type="number" required [(ngModel)]="command.ordering" placeholder="Enter the merchant's Priority"
+         class="form-control">
+  <label for="address">Priority</label>
+  <input type="date" required [(ngModel)]="command.openDate" placeholder="Enter the merchant's Priority"
+         class="form-control">
 </ng-template>
 
-
 <ng-template #confirm>
-    <div class="modal-body text-center">
-        <p>Do you want to confirm?</p>
-        <button type="button" class="btn btn-default">Yes</button>
-        <button type="button" class="btn btn-primary">No</button>
-    </div>
-</ng-template>
+  <div class="modal-body text-center">
+    <p>Do you want to confirm?</p>
+    <button type="button" class="btn btn-default">Yes</button>
+    <button type="button" class="btn btn-primary">No</button>
+  </div>
+</ng-template>

src/app/grid-filter&sorting-demo/grid-filter-demo/grid-filter-demo.component.ts

@@ -1,8 +1,7 @@
-import { Component, OnInit } from '@angular/core';
-import { IDataSource, ISimpleFilter } from '@poweredsoft/data';
-import { IMerchant } from 'src/app/data/services/IMerchant';
-import { MerchantService } from 'src/app/data/services/merchant.service';
-import { ConfirmModalService } from '@poweredsoft/ngx-bootstrap';
+import {Component, OnInit} from '@angular/core';
+import {IDataSource} from '@poweredsoft/data';
+import {IMerchant} from 'src/app/data/services/IMerchant';
+import {MerchantService} from 'src/app/data/services/merchant.service';
 
 @Component({
   selector: 'ps-grid-filter-demo',
@@ -10,26 +9,22 @@ import { ConfirmModalService } from '@poweredsoft/ngx-bootstrap';
   styleUrls: ['./grid-filter-demo.component.scss']
 })
 export class GridFilterDemoComponent implements OnInit {
-
   columns = ['id','name', 'address', 'ordering','openDate', 'commands']
-  merchantDataSource: IDataSource<IMerchant>;  
+  merchantDataSource: IDataSource<IMerchant>;
+
   constructor(private  merchantService: MerchantService){
     this.merchantDataSource = this.createDataSource();
   }
 
-  pages:any;
-  filteredResults:any;
-  somefilter:any;
-  
+  pages: any;
+  filteredResults: any;
+  somefilter: any;
+
   createDataSource(): IDataSource<IMerchant> {
     return this.merchantService.createDataSource();
-   
   }
 
   ngOnInit() {
     this.merchantDataSource.refresh();
-    
   }
-
-  
 }

src/app/home/home.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import {Component, OnInit} from '@angular/core';
 
 @Component({
   selector: 'ps-home',
@@ -11,5 +11,4 @@ export class HomeComponent implements OnInit {
 
   ngOnInit(): void {
   }
-
 }

src/app/list-view-demo/list-view-demo-routing.module.ts

@@ -1,7 +1,6 @@
-import { NgModule } from '@angular/core';
-import { Routes, RouterModule } from '@angular/router';
-import { ListViewDemoHomeComponent } from './list-view-demo-home/list-view-demo-home.component';
-
+import {NgModule} from '@angular/core';
+import {RouterModule, Routes} from '@angular/router';
+import {ListViewDemoHomeComponent} from './list-view-demo-home/list-view-demo-home.component';
 
 const routes: Routes = [
   {

src/app/list-view-demo/list-view-demo.module.ts

@@ -1,14 +1,10 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-
-import { ListViewDemoRoutingModule } from './list-view-demo-routing.module';
-import { ListViewDemoHomeComponent } from './list-view-demo-home/list-view-demo-home.component';
-import { ListViewModule } from '@poweredsoft/ngx-cdk-ui';
-import { FormGroupCommandModalModule, PaginationModule } from '@poweredsoft/ngx-bootstrap';
-import { ReactiveFormsModule } from '@angular/forms';
-import { DsSearchModule } from 'projects/poweredsoft/ngx-cdk-ui/src/lib/ds-search/ds-search.module';
-import { DsPagerModule } from 'projects/poweredsoft/ngx-cdk-ui/src/public-api';
-
+import {NgModule} from '@angular/core';
+import {CommonModule} from '@angular/common';
+import {ListViewDemoRoutingModule} from './list-view-demo-routing.module';
+import {ListViewDemoHomeComponent} from './list-view-demo-home/list-view-demo-home.component';
+import {ReactiveFormsModule} from '@angular/forms';
+import {DsPagerModule, DsSearchModule, ListViewModule} from "@openharbor/ngx-data-cdk-ui";
+import {FormGroupCommandModalModule, PaginationModule} from "@openharbor/ngx-data-bootstrap-ui";
 
 
 @NgModule({

src/app/ng-select-demo/ng-select-demo-routing.module.ts

@@ -1,19 +1,18 @@
-import { NgModule } from "@angular/core";
-import { RouterModule, Routes } from '@angular/router';
-import { NgSelectDemoComponent } from './ng-select-demo/ng-select-demo.component';
-
+import {NgModule} from "@angular/core";
+import {RouterModule, Routes} from '@angular/router';
+import {NgSelectDemoComponent} from './ng-select-demo/ng-select-demo.component';
 
 const routes: Routes =[
-    {
-        path: '',
-        component: NgSelectDemoComponent
-    }
+  {
+    path: '',
+    component: NgSelectDemoComponent
+  }
 ]
 
 @NgModule({
-    imports: [RouterModule.forChild(routes)],
-    exports: [RouterModule]
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
 })
 export class NgSelectDemoRoutingModule {
 
-}
+}

src/app/ng-select-demo/ng-select-demo.module.ts

@@ -1,13 +1,11 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { NgSelectDemoComponent } from './ng-select-demo/ng-select-demo.component';
-import { NgSelectDemoRoutingModule } from './ng-select-demo-routing.module';
-import { NgSelectModule } from '@ng-select/ng-select';
-import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { PsNgSelectModule } from '@poweredsoft/ng-select';
-import { CommandModule, CommandModalModule } from '@poweredsoft/ngx-bootstrap';
-
-
+import {NgModule} from '@angular/core';
+import {CommonModule} from '@angular/common';
+import {NgSelectDemoComponent} from './ng-select-demo/ng-select-demo.component';
+import {NgSelectDemoRoutingModule} from './ng-select-demo-routing.module';
+import {NgSelectModule} from '@ng-select/ng-select';
+import {FormsModule, ReactiveFormsModule} from '@angular/forms';
+import {CommandModalModule, CommandModule} from '@openharbor/ngx-data-bootstrap-ui';
+import {NgxDataNgSelectUIModule} from "@openharbor/ngx-data-ng-select-ui";
 
 
 @NgModule({
@@ -18,9 +16,9 @@ import { CommandModule, CommandModalModule } from '@poweredsoft/ngx-bootstrap';
     FormsModule,
     ReactiveFormsModule,
     NgSelectDemoRoutingModule,
-    PsNgSelectModule,
     CommandModule,
-    CommandModalModule
+    CommandModalModule,
+    NgxDataNgSelectUIModule
   ]
 })
 export class NgSelectDemoModule { }

src/app/ng-select-demo/ng-select-demo/ng-select-demo.component.html

@@ -1,19 +1,19 @@
 <h2>Single Select Demo | ngModel | option template</h2>
-<ps-ng-select [dataSource]="merchantDataSource" bindLabel="name" bindValue="id" [(ngModel)]="myValue">
-    <div *psNgSelectOption="let item">
-       {{ item.name }} - {{ item.address }}       
-    </div>
-</ps-ng-select>
+<ng-select-ds [dataSource]="merchantDataSource" bindLabel="name" bindValue="id" [(ngModel)]="myValue">
+  <div *ngSelectDsOption="let item">
+    {{ item.name }} - {{ item.address }}
+  </div>
+</ng-select-ds>
 
-selected: {{ myValue | json }} 
+selected: {{ myValue | json }}
 
 <h2>Single Select With Form | formGroup | option template</h2>
 <form #form [formGroup]="myForm">
-    <ps-ng-select [dataSource]="merchantDataSource2" bindLabel="name" bindValue="id" formControlName="merchantId" [serverFiltering]="true">
-        <div *psNgSelectOption="let item">
-           <span>Merchant:</span>  {{ item.name }} - <span>Address: </span>{{ item.address }}
-        </div>
-    </ps-ng-select>
+  <ng-select-ds [dataSource]="merchantDataSource2" bindLabel="name" bindValue="id" formControlName="merchantId" [serverFiltering]="true">
+    <div *ngSelectDsOption="let item">
+      <span>Merchant:</span>  {{ item.name }} - <span>Address: </span>{{ item.address }}
+    </div>
+  </ng-select-ds>
 </form>
 
 
@@ -21,75 +21,74 @@ selected:  {{ myForm.value | json }}
 
 <h2>Single Select With Form | formGroup | option template (Making sure not breaking change single override path)</h2>
 <form #form [formGroup]="myForm">
-    <ps-ng-select [dataSource]="merchantDataSource2" sortingPath="name" searchPath="name" bindLabel="name" bindValue="id" formControlName="merchantId" [serverFiltering]="true">
-        <div *psNgSelectOption="let item">
-           <span>Merchant:</span>  {{ item.name }} - <span>Address: </span>{{ item.address }}
-        </div>
-    </ps-ng-select>
+  <ng-select-ds [dataSource]="merchantDataSource2" sortingPath="name" searchPath="name" bindLabel="name" bindValue="id" formControlName="merchantId" [serverFiltering]="true">
+    <div *ngSelectDsOption="let item">
+      <span>Merchant:</span>  {{ item.name }} - <span>Address: </span>{{ item.address }}
+    </div>
+  </ng-select-ds>
 </form>
 
-
 selected:  {{ myForm.value | json }}
 
 <h2>Single Select With Form | formGroup | option template (multiple search paths)</h2>
 <form #form [formGroup]="myForm">
-    <ps-ng-select [dataSource]="merchantDataSource2" [sortingPath]="['name', 'address']" [searchPath]="['name', 'address']" bindLabel="name" bindValue="id" formControlName="merchantId" [serverFiltering]="true">
-        <div *psNgSelectOption="let item">
-           <span>Merchant:</span>  {{ item.name }} - <span>Address: </span>{{ item.address }}
-        </div>
-    </ps-ng-select>
+  <ng-select-ds [dataSource]="merchantDataSource2" [sortingPath]="['name', 'address']" [searchPath]="['name', 'address']" bindLabel="name" bindValue="id" formControlName="merchantId" [serverFiltering]="true">
+    <div *ngSelectDsOption="let item">
+      <span>Merchant:</span>  {{ item.name }} - <span>Address: </span>{{ item.address }}
+    </div>
+  </ng-select-ds>
 </form>
 
 
 selected:  {{ myForm.value | json }}
 
 <h2>Single Select Demo | label Template</h2>
-<ps-ng-select [dataSource]="merchantDataSource3" bindLabel="name" bindValue="id" [(ngModel)]="myValue3" [serverFiltering]="true">
-    <div *psNgSelectOption="let item">
-        <span>Merchant:</span>  {{ item.name }} - <span>Address: </span>{{ item.address }}
-     </div>
-    
-    <div  *psNgSelectLabel="let item">
-        <img src="assets/32x32-blue.png"><span>Name: </span>{{ item.name }} - <span> Address: </span>{{item.address }}
-    </div>
-</ps-ng-select>
-selected: {{ myValue3 | json }} 
+<ng-select-ds [dataSource]="merchantDataSource3" bindLabel="name" bindValue="id" [(ngModel)]="myValue3" [serverFiltering]="true">
+  <div *ngSelectDsOption="let item">
+    <span>Merchant:</span>  {{ item.name }} - <span>Address: </span>{{ item.address }}
+  </div>
+
+  <div *ngSelectDsLabel="let item">
+    <img src="assets/32x32-blue.png" alt=""/><span>Name: </span>{{ item.name }} - <span> Address: </span>{{item.address }}
+  </div>
+</ng-select-ds>
+selected: {{ myValue3 | json }}
 
 <h2>Single Select Demo | notFound Template</h2>
-<ps-ng-select [dataSource]="merchantDataSource3" bindLabel="name" bindValue="id" [(ngModel)]="myValue2" [serverFiltering]="false">
-    <div  *psNgNotFoundTemplate="let searchTerm">
-        <div class="ng-option disabled">
-            No data found for "{{searchTerm}}"
-                <button class="btn-primary btn" 
-                psbxCommandModal 
-                commandTitle="Adding a new {{searchTerm}}" 
-                commandText="Add"
-                [dataSource]="merchantDataSource" 
-                command="addMerchant" 
-                cancelText="Abort"
-                [template]="theModal"
-                (success)="myValue2 = $event"> Create New {{searchTerm}}</button>
-        </div>
+<ng-select-ds [dataSource]="merchantDataSource3" bindLabel="name" bindValue="id" [(ngModel)]="myValue2" [serverFiltering]="false">
+  <div  *ngSelectDsNotFoundTemplate="let searchTerm">
+    <div class="ng-option disabled">
+      No data found for "{{searchTerm}}"
+      <button class="btn-primary btn"
+              bsxCommandModal
+              commandTitle="Adding a new {{searchTerm}}"
+              commandText="Add"
+              [dataSource]="merchantDataSource"
+              command="addMerchant"
+              cancelText="Abort"
+              [template]="theModal"
+              (success)="myValue2 = $event"> Create New {{searchTerm}}</button>
     </div>
-</ps-ng-select>
-selected: {{ myValue2 | json }} 
+  </div>
+</ng-select-ds>
+selected: {{ myValue2 | json }}
 
- <h2>Multi-Select Demo</h2>
+<h2>Multi-Select Demo</h2>
 <ps-ng-multi-select [dataSource]="merchantDataSource4" sortingPath="name" [searchPath]="['name', 'address']" bindLabel="name" bindValue="id"  [serverFiltering]="true" [(ngModel)]="myValue4" >
-    <div   *psNgSelectOption="let item">
-        <img src="assets/32x32-blue.png"><span>Name: </span>{{ item.name }} - <span> Address: </span>{{item.address }}
-    </div>
-    <ng-container  *psNgSelectLabel="let item;">
-        {{ item.name }}
-    </ng-container>
+  <div   *ngSelectDsOption="let item">
+    <img src="assets/32x32-blue.png"><span>Name: </span>{{ item.name }} - <span> Address: </span>{{item.address }}
+  </div>
+  <ng-container  *ngSelectDsLabel="let item;">
+    {{ item.name }}
+  </ng-container>
 </ps-ng-multi-select>
-selected: {{ myValue4 | json }} 
+selected: {{ myValue4 | json }}
 
 <ng-template #theModal let-command let-loading="loading">
-    <form   >
-        Name
-        <input type="text" required [disabled]="loading" name="name" [(ngModel)]="command.name"  placeholder="Enter a merchant name" class="form-control" >
-        Address
-        <input type="text" required [disabled]="loading" name="address" [(ngModel)]="command.address"  placeholder="Enter the merchant's address" class="form-control" >                
-    </form>
-</ng-template>
+  <form   >
+    Name
+    <input type="text" required [disabled]="loading" name="name" [(ngModel)]="command.name"  placeholder="Enter a merchant name" class="form-control" >
+    Address
+    <input type="text" required [disabled]="loading" name="address" [(ngModel)]="command.address"  placeholder="Enter the merchant's address" class="form-control" >
+  </form>
+</ng-template>

src/app/ng-select-demo/ng-select-demo/ng-select-demo.component.ts

@@ -1,24 +1,21 @@
-import { Component, OnInit, ChangeDetectorRef } from '@angular/core';
-import { MerchantService } from 'src/app/data/services/merchant.service';
-
-import { IMerchant } from 'src/app/data/services/IMerchant';
-import { Observable, Subject } from 'rxjs';
-import { map, distinctUntilChanged, debounceTime } from 'rxjs/operators';
-import { IDataSource, ISimpleFilter } from '@poweredsoft/data';
-import { FormBuilder, FormGroup } from '@angular/forms';
+import {Component, OnInit} from '@angular/core';
+import {MerchantService} from 'src/app/data/services/merchant.service';
+import {IMerchant} from 'src/app/data/services/IMerchant';
+import {IDataSource} from '@poweredsoft/data';
+import {FormBuilder, FormGroup} from '@angular/forms';
 
 @Component({
   selector: 'ps-ng-select-demo',
   templateUrl: './ng-select-demo.component.html',
   styleUrls: ['./ng-select-demo.component.scss']
 })
-export class NgSelectDemoComponent implements OnInit {
+export class NgSelectDemoComponent {
 
   merchantDataSource: IDataSource<IMerchant>;
-  merchantDataSource2: IDataSource<IMerchant>; 
-  merchantDataSource3: IDataSource<IMerchant>; 
-  merchantDataSource4: IDataSource<IMerchant>;   
-  
+  merchantDataSource2: IDataSource<IMerchant>;
+  merchantDataSource3: IDataSource<IMerchant>;
+  merchantDataSource4: IDataSource<IMerchant>;
+
   selectedValue: IMerchant;
 
   myForm: FormGroup;
@@ -30,18 +27,11 @@ export class NgSelectDemoComponent implements OnInit {
   constructor(private merchantService: MerchantService, private fb: FormBuilder
               ) {
     this.merchantDataSource = merchantService.createDataSource(); //Assign the dataSource
-    this.merchantDataSource2 = merchantService.createDataSource(); 
-    this.merchantDataSource3 = merchantService.createDataSource(); 
-    this.merchantDataSource4 = merchantService.createDataSource(); 
+    this.merchantDataSource2 = merchantService.createDataSource();
+    this.merchantDataSource3 = merchantService.createDataSource();
+    this.merchantDataSource4 = merchantService.createDataSource();
     this.myForm = fb.group({
       'merchantId': [null]
     })
   }
-
-  ngOnInit(): void {
-    
-  }
-
-  
-
 }

src/app/pagination-demo/pagination-demo-routing.module.ts

@@ -1,6 +1,6 @@
-import { NgModule } from '@angular/core';
-import { Routes, RouterModule } from '@angular/router';
-import { PaginationDemoComponent } from './pagination-demo/pagination/pagination-demo.component';
+import {NgModule} from '@angular/core';
+import {RouterModule, Routes} from '@angular/router';
+import {PaginationDemoComponent} from './pagination-demo/pagination/pagination-demo.component';
 
 
 const routes: Routes = [{

src/app/pagination-demo/pagination-demo.module.ts

@@ -1,14 +1,15 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-
-import { PaginationDemoRoutingModule } from './pagination-demo-routing.module';
-import { PaginationDemoComponent } from './pagination-demo/pagination/pagination-demo.component';
-import { DataGridModule } from '@poweredsoft/ngx-cdk-ui';
-import { PaginationModule, CommandModalModule, ConfirmModalModule,SpinnerModule, CommandModule } from '@poweredsoft/ngx-bootstrap';
-import { FormsModule } from '@angular/forms';
-import { ModalModule } from 'ngx-bootstrap/modal';
-
-
+import {NgModule} from '@angular/core';
+import {CommonModule} from '@angular/common';
+import {PaginationDemoRoutingModule} from './pagination-demo-routing.module';
+import {PaginationDemoComponent} from './pagination-demo/pagination/pagination-demo.component';
+import {FormsModule} from '@angular/forms';
+import {
+  CommandModalModule, CommandModule,
+  ConfirmModalModule,
+  PaginationModule,
+  SpinnerModule
+} from "@openharbor/ngx-data-bootstrap-ui";
+import {DataGridModule} from "@openharbor/ngx-data-cdk-ui";
 
 
 @NgModule({
@@ -23,7 +24,6 @@ import { ModalModule } from 'ngx-bootstrap/modal';
     FormsModule,
     SpinnerModule,
     CommandModule
-       
   ]
 })
 export class PaginationDemoModule { }

src/app/pagination-demo/pagination-demo/pagination/pagination-demo.component.html

@@ -1,94 +1,87 @@
+<cdk-data-grid [dataSource]="merchantDataSource" [(columns)]="columns"
+               tableClasses="table table-sm table-dark table-striped table-bordered">
+  <bsx-spinner *cdkDataGridLoader></bsx-spinner>
 
-  
-<ps-data-grid [dataSource]="merchantDataSource" [(columns)]="columns"
-    tableClasses="table table-sm table-dark table-striped table-bordered">
-
-
-    
-
-    <psbx-spinner *psDataGridLoader></psbx-spinner>
-
-    <ng-container *psDataGridHeader>
-        <button class="btn-warning btn" psbxCommandModal commandTitle="Adding a new merchant" commandText="Add"
+  <ng-container *cdkDataGridHeader>
+    <button class="btn-warning btn" bsxCommandModal commandTitle="Adding a new merchant" commandText="Add"
             [dataSource]="merchantDataSource" command="addMerchant" [template]="theModal">Create a new record</button>
-    </ng-container>
- 
-    <ng-container psDataGridCol="id">
-        <div *psDataGridColHeader>ID</div>
-        <div *psDataGridCell="let model">{{model.id}}</div>
-    </ng-container>
+  </ng-container>
 
-    <ng-container psDataGridCol="name">
-        <div *psDataGridColHeader>Name</div>
-        <div *psDataGridCell="let model">{{model.name}}</div>         
-    </ng-container>
-   
-    <ng-container psDataGridCol="address">
-        <div *psDataGridColHeader>Address</div>
-        <div *psDataGridCell="let model">{{model.address}}</div>
-    </ng-container>
-    <ng-container psDataGridCol="commands">
-        <ng-container *psDataGridColHeader>Actions</ng-container>
-        <ng-container *psDataGridCell="let model">
-            <div class="btn-group">
-                <button class="btn-warning btn" psbxCommandModal 
-                commandTitle="Update {{model.name}}" 
+  <ng-container cdkDataGridCol="id">
+    <div *cdkDataGridColHeader>ID</div>
+    <div *cdkDataGridCell="let model">{{model.id}}</div>
+  </ng-container>
+
+  <ng-container cdkDataGridCol="name">
+    <div *cdkDataGridColHeader>Name</div>
+    <div *cdkDataGridCell="let model">{{model.name}}</div>
+  </ng-container>
+
+  <ng-container cdkDataGridCol="address">
+    <div *cdkDataGridColHeader>Address</div>
+    <div *cdkDataGridCell="let model">{{model.address}}</div>
+  </ng-container>
+  <ng-container cdkDataGridCol="commands">
+    <ng-container *cdkDataGridColHeader>Actions</ng-container>
+    <ng-container *cdkDataGridCell="let model">
+      <div class="btn-group">
+        <button class="btn-warning btn" bsxCommandModal
+                commandTitle="Update {{model.name}}"
                 commandText="Save"
-                [dataSource]="merchantDataSource" 
+                [dataSource]="merchantDataSource"
                 command="changeMerchant"
-                [model]="model"  
+                [model]="model"
                 [template]="theModal">Update</button>
 
-                <button class="btn-danger btn" 
-                psbxCommand 
-                [dataSource]="merchantDataSource" 
-                command="removeMerchant" 
-                [model]="model" 
+        <button class="btn-danger btn"
+                bsxCommand
+                [dataSource]="merchantDataSource"
+                command="removeMerchant"
+                [model]="model"
                 [confirm]="true"
                 yesClass="warning"
                 noClass = "secondary"
                 noText = "Cancel Delete"
                 yesText = "Delete It"
                 confirmMessage="Are you sure you want to delete this merchant?"
-                >Remove</button>
-            </div>
+        >Remove</button>
+      </div>
 
-        </ng-container>
     </ng-container>
+  </ng-container>
 
-    <ng-container *psDataGridFooter>
-        <psbx-ds-pagination [dataSource]="merchantDataSource"></psbx-ds-pagination> 
-    </ng-container>
-</ps-data-grid>
+  <ng-container *cdkDataGridFooter>
+    <bsx-ds-pagination [dataSource]="merchantDataSource"></bsx-ds-pagination>
+  </ng-container>
+</cdk-data-grid>
 
 
 
 <ng-template #confirm>
-    <div class="modal-body text-center">
-      <p>Do you want to confirm?</p>
-      <button type="button" class="btn btn-default"  >Yes</button>
-      <button type="button" class="btn btn-primary"  >No</button>
-    </div>
-  </ng-template>
+  <div class="modal-body text-center">
+    <p>Do you want to confirm?</p>
+    <button type="button" class="btn btn-default"  >Yes</button>
+    <button type="button" class="btn btn-primary"  >No</button>
+  </div>
+</ng-template>
 
 
- <ng-template #theModal let-command let-loading="loading">
-        <label for="name">Name</label>
-        <input type="text" required [attr.disabled]="loading" [(ngModel)]="command.name" placeholder="Enter a merchant name" 
-               class="form-control"  >
-        <label for="address">Address</label>
-        <input type="text" required [attr.disabled]="loading" [(ngModel)]="command.address" placeholder="Enter the merchant's address" 
-              class="form-control" >
-        
-</ng-template> 
+<ng-template #theModal let-command let-loading="loading">
+  <label for="name">Name</label>
+  <input type="text" required [attr.disabled]="loading" [(ngModel)]="command.name" placeholder="Enter a merchant name"
+         class="form-control"  >
+  <label for="address">Address</label>
+  <input type="text" required [attr.disabled]="loading" [(ngModel)]="command.address" placeholder="Enter the merchant's address"
+         class="form-control" >
+</ng-template>
 
 <!-- <ng-template #theModal let-command let-form let-loading="loading">
     <label for="name">Name</label>
-    <input type="text" required [attr.disabled]="loading" [(ngModel)]="command.name" name="name" placeholder="Enter a merchant name" 
-           class="form-control"  #nameField="ngModel" [class.field-error]="form.submitted && form.invalid"> 
+    <input type="text" required [attr.disabled]="loading" [(ngModel)]="command.name" name="name" placeholder="Enter a merchant name"
+           class="form-control"  #nameField="ngModel" [class.field-error]="form.submitted && form.invalid">
     <label for="address">Address</label>
-    <input type="text" required [attr.disabled]="loading" [(ngModel)]="command.address" name="address" placeholder="Enter the merchant's address" 
+    <input type="text" required [attr.disabled]="loading" [(ngModel)]="command.address" name="address" placeholder="Enter the merchant's address"
           class="form-control" #addressField="ngModel" [class.field-error]="form.submitted && form.invalid">
-    
-    
-</ng-template> -->
+
+
+</ng-template> -->

src/app/pagination-demo/pagination-demo/pagination/pagination-demo.component.scss

@@ -1,3 +1,3 @@
 .ng-invalid:not(form).ng-touched{
-    border: 1px solid red;
-} 
+  border: 1px solid red;
+}

src/app/pagination-demo/pagination-demo/pagination/pagination-demo.component.ts

@@ -1,10 +1,9 @@
-import { Component, OnInit, OnDestroy } from '@angular/core';
-import { IDataSource } from '@poweredsoft/data';
-import { IMerchant } from 'src/app/data/services/IMerchant';
-import { MerchantService } from 'src/app/data/services/merchant.service';
-import { FormBuilder, Validators } from '@angular/forms';
-import { ConfirmModalService } from '@poweredsoft/ngx-bootstrap';
-import { Subscription } from 'rxjs';
+import {Component, OnDestroy, OnInit} from '@angular/core';
+import {IDataSource} from '@poweredsoft/data';
+import {IMerchant} from 'src/app/data/services/IMerchant';
+import {MerchantService} from 'src/app/data/services/merchant.service';
+import {Subscription} from 'rxjs';
+import {ConfirmModalService} from "@openharbor/ngx-data-bootstrap-ui";
 
 @Component({
   selector: 'ps-pagination',
@@ -13,7 +12,7 @@ import { Subscription } from 'rxjs';
 })
 export class PaginationDemoComponent implements OnInit, OnDestroy {
   columns = ['id','name', 'address','commands']
-  merchantDataSource: IDataSource<IMerchant>;  
+  merchantDataSource: IDataSource<IMerchant>;
   private _dataSubscription: Subscription;
   constructor(private  merchantService: MerchantService, private confirmModalService: ConfirmModalService){
     this.merchantDataSource = this.createDataSource();
@@ -23,19 +22,17 @@ export class PaginationDemoComponent implements OnInit, OnDestroy {
     this._dataSubscription.unsubscribe();
   }
 
-  pages:any;
-  
+  pages: any;
+
   createDataSource(): IDataSource<IMerchant> {
     return this.merchantService.createDataSource();
   }
 
   ngOnInit() {
     this.merchantDataSource.refresh();
-    this._dataSubscription = this.merchantDataSource.data$.subscribe(newData => {     
+    this._dataSubscription = this.merchantDataSource.data$.subscribe(newData => {
       if (newData)
         this.pages = new Array(newData.numberOfPages);
     });
   }
-  
-
 }

src/app/view-demo/view-demo-page/view-demo-page.component.html

@@ -1,104 +1,100 @@
 <h1>Found</h1>
-<ps-view [dataSource]="dataSource">
-    <ng-container *psViewContent="let model">
-        <div class="card">
-            <div class="card-header">
 
-                {{ model.firstName }} {{ model.lastName }}
-            </div>
-            <div class="card-body">
-                Hey, thank you!
-            </div>
-        </div>
-    </ng-container>
-    <ng-container *psViewNoRecords>
-        <div class="alert alert-info text-center">
-            Could not find record that was requested.<br>
-            <svg style="height: 100px; width: 100px;" fill="none" stroke="#000" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.172 16.172a4 4 0 015.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
-        </div>
-    </ng-container>
-    <ng-container *psViewLoading>
-        <div class="text-center mt-3">
-            <svg style="height: 100px; "version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg"
-                xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 100 100"
-                enable-background="new 0 0 100 100" xml:space="preserve">
-                <rect fill="#000" width="3" height="100" transform="translate(0) rotate(180 3 50)">
-                    <animate attributeName="height" attributeType="XML" dur="1s" values="30; 100; 30"
-                        repeatCount="indefinite" />
-                </rect>
-                <rect x="17" fill="#000" width="3" height="100" transform="translate(0) rotate(180 20 50)">
-                    <animate attributeName="height" attributeType="XML" dur="1s" values="30; 100; 30"
-                        repeatCount="indefinite" begin="0.1s" />
-                </rect>
-                <rect x="40" fill="#000" width="3" height="100" transform="translate(0) rotate(180 40 50)">
-                    <animate attributeName="height" attributeType="XML" dur="1s" values="30; 100; 30"
-                        repeatCount="indefinite" begin="0.3s" />
-                </rect>
-                <rect x="60" fill="#000" width="3" height="100" transform="translate(0) rotate(180 58 50)">
-                    <animate attributeName="height" attributeType="XML" dur="1s" values="30; 100; 30"
-                        repeatCount="indefinite" begin="0.5s" />
-                </rect>
-                <rect x="80" fill="#000" width="3" height="100" transform="translate(0) rotate(180 76 50)">
-                    <animate attributeName="height" attributeType="XML" dur="1s" values="30; 100; 30"
-                        repeatCount="indefinite" begin="0.1s" />
-                </rect>
-            </svg>
+<cdk-ds-view [dataSource]="dataSource">
+  <ng-container *cdkDsViewContent="let model">
+    <div class="card">
+      <div class="card-header">
 
-            <h1 class="mt-3">Loading ...</h1>
-        </div>
+        {{ model.firstName }} {{ model.lastName }}
+      </div>
+      <div class="card-body">
+        Hey, thank you!
+      </div>
+    </div>
+  </ng-container>
+  <ng-container *cdkDsViewNoRecords>
+    <div class="alert alert-info text-center">
+      Could not find record that was requested.<br>
+      <svg style="height: 100px; width: 100px;" fill="none" stroke="#000" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.172 16.172a4 4 0 015.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
+    </div>
+  </ng-container>
+  <ng-container *cdkDsViewLoading>
+    <div class="text-center mt-3">
+      <svg style="height: 100px; "version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 100 100">
+        <rect fill="#000" width="3" height="100" transform="translate(0) rotate(180 3 50)">
+          <animate attributeName="height" attributeType="XML" dur="1s" values="30; 100; 30"
+                   repeatCount="indefinite" />
+        </rect>
+        <rect x="17" fill="#000" width="3" height="100" transform="translate(0) rotate(180 20 50)">
+          <animate attributeName="height" attributeType="XML" dur="1s" values="30; 100; 30"
+                   repeatCount="indefinite" begin="0.1s" />
+        </rect>
+        <rect x="40" fill="#000" width="3" height="100" transform="translate(0) rotate(180 40 50)">
+          <animate attributeName="height" attributeType="XML" dur="1s" values="30; 100; 30"
+                   repeatCount="indefinite" begin="0.3s" />
+        </rect>
+        <rect x="60" fill="#000" width="3" height="100" transform="translate(0) rotate(180 58 50)">
+          <animate attributeName="height" attributeType="XML" dur="1s" values="30; 100; 30"
+                   repeatCount="indefinite" begin="0.5s" />
+        </rect>
+        <rect x="80" fill="#000" width="3" height="100" transform="translate(0) rotate(180 76 50)">
+          <animate attributeName="height" attributeType="XML" dur="1s" values="30; 100; 30"
+                   repeatCount="indefinite" begin="0.1s" />
+        </rect>
+      </svg>
 
-    </ng-container>
-</ps-view>
+      <h1 class="mt-3">Loading ...</h1>
+    </div>
+
+  </ng-container>
+</cdk-ds-view>
 
 <hr>
 <h1>Not found</h1>
-<ps-view [dataSource]="dataSource2">
-    <ng-container *psViewContent="let model">
-        <div class="card">
-            <div class="card-header">
+<cdk-ds-view [dataSource]="dataSource2">
+  <ng-container *cdkDsViewContent="let model">
+    <div class="card">
+      <div class="card-header">
 
-                {{ model.firstName }} {{ model.lastName }}
-            </div>
-            <div class="card-body">
-                Hey, thank you!
-            </div>
-        </div>
-    </ng-container>
-    <ng-container *psViewNoRecords>
-        <div class="alert alert-info text-center">
-            Could not find record that was requested.<br>
-            <svg style="height: 100px; width: 100px;" fill="none" stroke="#000" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.172 16.172a4 4 0 015.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
-        </div>
-    </ng-container>
-    <ng-container *psViewLoading>
-        <div class="text-center mt-3">
-            <svg style="height: 100px; "version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg"
-                xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 100 100"
-                enable-background="new 0 0 100 100" xml:space="preserve">
+        {{ model.firstName }} {{ model.lastName }}
+      </div>
+      <div class="card-body">
+        Hey, thank you!
+      </div>
+    </div>
+  </ng-container>
+  <ng-container *cdkDsViewNoRecords>
+    <div class="alert alert-info text-center">
+      Could not find record that was requested.<br>
+      <svg style="height: 100px; width: 100px;" fill="none" stroke="#000" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.172 16.172a4 4 0 015.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
+    </div>
+  </ng-container>
+  <ng-container *cdkDsViewLoading>
+    <div class="text-center mt-3">
+      <svg style="height: 100px; "version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 100 100">
                 <rect fill="#000" width="3" height="100" transform="translate(0) rotate(180 3 50)">
                     <animate attributeName="height" attributeType="XML" dur="1s" values="30; 100; 30"
-                        repeatCount="indefinite" />
+                             repeatCount="indefinite" />
                 </rect>
-                <rect x="17" fill="#000" width="3" height="100" transform="translate(0) rotate(180 20 50)">
+        <rect x="17" fill="#000" width="3" height="100" transform="translate(0) rotate(180 20 50)">
                     <animate attributeName="height" attributeType="XML" dur="1s" values="30; 100; 30"
-                        repeatCount="indefinite" begin="0.1s" />
+                             repeatCount="indefinite" begin="0.1s" />
                 </rect>
-                <rect x="40" fill="#000" width="3" height="100" transform="translate(0) rotate(180 40 50)">
+        <rect x="40" fill="#000" width="3" height="100" transform="translate(0) rotate(180 40 50)">
                     <animate attributeName="height" attributeType="XML" dur="1s" values="30; 100; 30"
-                        repeatCount="indefinite" begin="0.3s" />
+                             repeatCount="indefinite" begin="0.3s" />
                 </rect>
-                <rect x="60" fill="#000" width="3" height="100" transform="translate(0) rotate(180 58 50)">
+        <rect x="60" fill="#000" width="3" height="100" transform="translate(0) rotate(180 58 50)">
                     <animate attributeName="height" attributeType="XML" dur="1s" values="30; 100; 30"
-                        repeatCount="indefinite" begin="0.5s" />
+                             repeatCount="indefinite" begin="0.5s" />
                 </rect>
-                <rect x="80" fill="#000" width="3" height="100" transform="translate(0) rotate(180 76 50)">
+        <rect x="80" fill="#000" width="3" height="100" transform="translate(0) rotate(180 76 50)">
                     <animate attributeName="height" attributeType="XML" dur="1s" values="30; 100; 30"
-                        repeatCount="indefinite" begin="0.1s" />
+                             repeatCount="indefinite" begin="0.1s" />
                 </rect>
             </svg>
 
-            <h1 class="mt-3">Loading ...</h1>
-        </div>
-
-    </ng-container>
-</ps-view>
+      <h1 class="mt-3">Loading ...</h1>
+    </div>
+  </ng-container>
+</cdk-ds-view>

src/app/view-demo/view-demo-page/view-demo-page.component.ts

@@ -1,16 +1,16 @@
-import { Component, OnInit } from '@angular/core';
-import { IDataSource } from '@poweredsoft/data';
-import { HttpDataSourceService } from '@poweredsoft/ngx-data';
-import { of } from 'rxjs';
+import {Component, OnInit} from '@angular/core';
+import {IDataSource} from '@poweredsoft/data';
+import {HttpDataSourceService} from '@poweredsoft/ngx-data';
+import {of} from 'rxjs';
 
 interface OnePersonQuery {
-  personId: number
+  personId: number;
 }
 
 interface Person {
-  id: number,
-  firstName: string,
-  lastName: string
+  id: number;
+  firstName: string;
+  lastName: string;
 }
 
 @Component({
@@ -22,7 +22,7 @@ export class ViewDemoPageComponent implements OnInit {
 
   dataSource: IDataSource<Person>;
   dataSource2: IDataSource<Person>;
-  constructor(private hdss: HttpDataSourceService) { 
+  constructor(private hdss: HttpDataSourceService) {
     this.dataSource = this.hdss.singleBuilder<OnePersonQuery, Person, number>()
       .keyResolver(m => m.id)
       .queryUrl('https://localhost:5001/api/query/onePerson')
@@ -48,5 +48,4 @@ export class ViewDemoPageComponent implements OnInit {
     this.dataSource.refresh();
     this.dataSource2.refresh();
   }
-
 }

src/app/view-demo/view-demo-routing.module.ts

@@ -1,6 +1,6 @@
-import { NgModule } from '@angular/core';
-import { Routes, RouterModule } from '@angular/router';
-import { ViewDemoPageComponent } from './view-demo-page/view-demo-page.component';
+import {NgModule} from '@angular/core';
+import {RouterModule, Routes} from '@angular/router';
+import {ViewDemoPageComponent} from './view-demo-page/view-demo-page.component';
 
 
 const routes: Routes = [

src/app/view-demo/view-demo.module.ts

@@ -1,9 +1,8 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-
-import { ViewDemoRoutingModule } from './view-demo-routing.module';
-import { ViewDemoPageComponent } from './view-demo-page/view-demo-page.component';
-import { ViewModule } from '@poweredsoft/ngx-cdk-ui';
+import {NgModule} from '@angular/core';
+import {CommonModule} from '@angular/common';
+import {ViewDemoRoutingModule} from './view-demo-routing.module';
+import {ViewDemoPageComponent} from './view-demo-page/view-demo-page.component';
+import {ViewModule} from "@openharbor/ngx-data-cdk-ui";
 
 
 @NgModule({