code cleanup, names refactoring

README.md

@@ -1,30 +1,4 @@
-# NgxCdkUi
+> This project was originally initiated by [Powered Software Inc.](https://poweredsoft.com/) and was forked from the  [ngx-ui](https://github.com/PoweredSoft/ngx-ui) Repository
-
-This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 9.1.4.
-
-## Development server
-
-Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
-
-## Code scaffolding
-
-Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
-
-## Build
-
-Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `--prod` flag for a production build.
-
-## Running unit tests
-
-Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
-
-## Running end-to-end tests
-
-Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/).
-
-## Further help
-
-To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).
 
 ## License
 

angular.json

@@ -3,7 +3,7 @@
   "version": 1,
   "newProjectRoot": "projects",
   "projects": {
-    "ngx-cdk-ui": {
+    "demo": {
       "projectType": "application",
       "schematics": {
         "@schematics/angular:component": {
@@ -125,38 +125,38 @@
         }
       }
     },
-    "@poweredsoft/ngx-cdk-ui": {
+    "ngx-cdk-ui": {
       "projectType": "library",
-      "root": "projects/poweredsoft/ngx-cdk-ui",
+      "root": "projects/openharbor/ngx-cdk-ui",
-      "sourceRoot": "projects/poweredsoft/ngx-cdk-ui/src",
+      "sourceRoot": "projects/openharbor/ngx-cdk-ui/src",
       "prefix": "ps",
       "architect": {
         "build": {
           "builder": "@angular-devkit/build-ng-packagr:build",
           "options": {
-            "tsConfig": "projects/poweredsoft/ngx-cdk-ui/tsconfig.lib.json",
+            "tsConfig": "projects/openharbor/ngx-cdk-ui/tsconfig.lib.json",
-            "project": "projects/poweredsoft/ngx-cdk-ui/ng-package.json"
+            "project": "projects/openharbor/ngx-cdk-ui/ng-package.json"
           },
           "configurations": {
             "production": {
-              "tsConfig": "projects/poweredsoft/ngx-cdk-ui/tsconfig.lib.prod.json"
+              "tsConfig": "projects/openharbor/ngx-cdk-ui/tsconfig.lib.prod.json"
             }
           }
         },
         "test": {
           "builder": "@angular-devkit/build-angular:karma",
           "options": {
-            "main": "projects/poweredsoft/ngx-cdk-ui/src/test.ts",
+            "main": "projects/openharbor/ngx-cdk-ui/src/test.ts",
-            "tsConfig": "projects/poweredsoft/ngx-cdk-ui/tsconfig.spec.json",
+            "tsConfig": "projects/openharbor/ngx-cdk-ui/tsconfig.spec.json",
-            "karmaConfig": "projects/poweredsoft/ngx-cdk-ui/karma.conf.js"
+            "karmaConfig": "projects/openharbor/ngx-cdk-ui/karma.conf.js"
           }
         },
         "lint": {
           "builder": "@angular-devkit/build-angular:tslint",
           "options": {
             "tsConfig": [
-              "projects/poweredsoft/ngx-cdk-ui/tsconfig.lib.json",
+              "projects/openharbor/ngx-cdk-ui/tsconfig.lib.json",
-              "projects/poweredsoft/ngx-cdk-ui/tsconfig.spec.json"
+              "projects/openharbor/ngx-cdk-ui/tsconfig.spec.json"
             ],
             "exclude": [
               "**/node_modules/**"
@@ -165,38 +165,38 @@
         }
       }
     },
-    "@poweredsoft/ngx-bootstrap": {
+    "ngx-bootstrap": {
       "projectType": "library",
-      "root": "projects/poweredsoft/ngx-bootstrap",
+      "root": "projects/openharbor/ngx-bootstrap",
-      "sourceRoot": "projects/poweredsoft/ngx-bootstrap/src",
+      "sourceRoot": "projects/openharbor/ngx-bootstrap/src",
       "prefix": "psbx",
       "architect": {
         "build": {
           "builder": "@angular-devkit/build-ng-packagr:build",
           "options": {
-            "tsConfig": "projects/poweredsoft/ngx-bootstrap/tsconfig.lib.json",
+            "tsConfig": "projects/openharbor/ngx-bootstrap/tsconfig.lib.json",
-            "project": "projects/poweredsoft/ngx-bootstrap/ng-package.json"
+            "project": "projects/openharbor/ngx-bootstrap/ng-package.json"
           },
           "configurations": {
             "production": {
-              "tsConfig": "projects/poweredsoft/ngx-bootstrap/tsconfig.lib.prod.json"
+              "tsConfig": "projects/openharbor/ngx-bootstrap/tsconfig.lib.prod.json"
             }
           }
         },
         "test": {
           "builder": "@angular-devkit/build-angular:karma",
           "options": {
-            "main": "projects/poweredsoft/ngx-bootstrap/src/test.ts",
+            "main": "projects/openharbor/ngx-bootstrap/src/test.ts",
-            "tsConfig": "projects/poweredsoft/ngx-bootstrap/tsconfig.spec.json",
+            "tsConfig": "projects/openharbor/ngx-bootstrap/tsconfig.spec.json",
-            "karmaConfig": "projects/poweredsoft/ngx-bootstrap/karma.conf.js"
+            "karmaConfig": "projects/openharbor/ngx-bootstrap/karma.conf.js"
           }
         },
         "lint": {
           "builder": "@angular-devkit/build-angular:tslint",
           "options": {
             "tsConfig": [
-              "projects/poweredsoft/ngx-bootstrap/tsconfig.lib.json",
+              "projects/openharbor/ngx-bootstrap/tsconfig.lib.json",
-              "projects/poweredsoft/ngx-bootstrap/tsconfig.spec.json"
+              "projects/openharbor/ngx-bootstrap/tsconfig.spec.json"
             ],
             "exclude": [
               "**/node_modules/**"
@@ -205,38 +205,38 @@
         }
       }
     },
-    "@poweredsoft/ng-select": {
+    "ng-select": {
       "projectType": "library",
-      "root": "projects/poweredsoft/ng-select",
+      "root": "projects/openharbor/ng-select",
-      "sourceRoot": "projects/poweredsoft/ng-select/src",
+      "sourceRoot": "projects/openharbor/ng-select/src",
       "prefix": "ps-ng",
       "architect": {
         "build": {
           "builder": "@angular-devkit/build-ng-packagr:build",
           "options": {
-            "tsConfig": "projects/poweredsoft/ng-select/tsconfig.lib.json",
+            "tsConfig": "projects/openharbor/ng-select/tsconfig.lib.json",
-            "project": "projects/poweredsoft/ng-select/ng-package.json"
+            "project": "projects/openharbor/ng-select/ng-package.json"
           },
           "configurations": {
             "production": {
-              "tsConfig": "projects/poweredsoft/ng-select/tsconfig.lib.prod.json"
+              "tsConfig": "projects/openharbor/ng-select/tsconfig.lib.prod.json"
             }
           }
         },
         "test": {
           "builder": "@angular-devkit/build-angular:karma",
           "options": {
-            "main": "projects/poweredsoft/ng-select/src/test.ts",
+            "main": "projects/openharbor/ng-select/src/test.ts",
-            "tsConfig": "projects/poweredsoft/ng-select/tsconfig.spec.json",
+            "tsConfig": "projects/openharbor/ng-select/tsconfig.spec.json",
-            "karmaConfig": "projects/poweredsoft/ng-select/karma.conf.js"
+            "karmaConfig": "projects/openharbor/ng-select/karma.conf.js"
           }
         },
         "lint": {
           "builder": "@angular-devkit/build-angular:tslint",
           "options": {
             "tsConfig": [
-              "projects/poweredsoft/ng-select/tsconfig.lib.json",
+              "projects/openharbor/ng-select/tsconfig.lib.json",
-              "projects/poweredsoft/ng-select/tsconfig.spec.json"
+              "projects/openharbor/ng-select/tsconfig.spec.json"
             ],
             "exclude": [
               "**/node_modules/**"
@@ -245,5 +245,5 @@
         }
       }
     }},
-  "defaultProject": "ngx-cdk-ui"
+  "defaultProject": "demo"
 }

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "ngx-ui",
+  "name": "demo",
   "version": "0.0.0",
   "scripts": {
     "ng": "ng",
@@ -9,7 +9,7 @@
     "lint": "ng lint",
     "e2e": "ng e2e",
     "clean": "rimraf dist",
-    "start:app": "wait-on dist/poweredsoft/ngx-cdk-ui/fesm5 && dist/poweredsoft/ngx-bootstrap/fesm5 && ng serve --poll 2000",
+    "start:app": "wait-on dist/openharbor/ngx-cdk-ui/fesm5 && dist/poweredsoft/ngx-bootstrap/fesm5 && ng serve --poll 2000",
     "watch:lib": "ng build @poweredsoft/ngx-cdk-ui --watch && ng build @poweredsoft/ngx-bootstrap --watch",
     "watch:all": "npm run clean && run-p watch:lib start:app"
   },
@@ -65,5 +65,6 @@
     "tslint": "~6.1.0",
     "typescript": "~3.8.3",
     "wait-on": "^5.0.1"
-  }
+  },
+  "packageManager": "yarn@1.22.22+sha1.ac34549e6aa8e7ead463a7407e1c7390f61a6610"
 }

projects/openharbor/ngx-data-bootstrap-ui/ng-package.json

@@ -1,6 +1,6 @@
 {
   "$schema": "../../../node_modules/ng-packagr/ng-package.schema.json",
-  "dest": "../../../dist/poweredsoft/ngx-bootstrap",
+  "dest": "../../../dist/openharbor/ngx-data-bootstrap-ui",
   "lib": {
     "entryFile": "src/public-api.ts"
   }

projects/openharbor/ngx-data-bootstrap-ui/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "@poweredsoft/ngx-bootstrap",
+  "name": "@openharbor/ngx-data-bootstrap-ui",
   "version": "0.0.15",
   "description": "an internal use library for handling data sources grid filtering sorting, add commands etc",
   "keywords": [

projects/openharbor/ngx-data-bootstrap-ui/src/lib/command-modal/command-modal.module.ts

@@ -0,0 +1,19 @@
+import {NgModule} from '@angular/core';
+import {CommonModule} from '@angular/common';
+import {ModalModule} from 'ngx-bootstrap/modal';
+import {CommandModalDirective} from './directives/command-modal.directive';
+import {CommandModalComponent} from './command-modal/command-modal.component';
+import {FormsModule} from '@angular/forms';
+import {CommandModalService} from './command-modal.service';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    ModalModule.forRoot(),
+    FormsModule
+  ],
+  providers: [CommandModalService],
+  declarations: [CommandModalDirective, CommandModalComponent],
+  exports: [CommandModalDirective]
+})
+export class CommandModalModule { }

projects/openharbor/ngx-data-bootstrap-ui/src/lib/command-modal/command-modal/command-modal.component.html

@@ -0,0 +1,23 @@
+<div class="modal-header">
+  <h4 class="modal-title pull-left">{{ title }}</h4>
+  <button type="button" class="close pull-right" aria-label="Close" (click)="modalRef.hide()">
+    <span aria-hidden="true">&times;</span>
+  </button>
+</div>
+<div class="modal-body">
+  <ng-container [ngTemplateOutlet]="template"
+                [ngTemplateOutletContext]="{ $implicit: commandModel, loading: loading, dataSource: dataSource }"></ng-container>
+  <div *ngIf="hasError && !disableValidationSummary" class="alert alert-danger mt-2" style="white-space: pre-wrap">{{validationMessage}}</div>
+  <div *ngIf="hasErrorMessage" class="alert alert-danger mt-2" style="white-space: pre-wrap">{{errorMessage}}</div>
+</div>
+<div class="modal-footer">
+  <button type="button" class="btn btn-light" (click)="modalRef.hide()"
+          [disabled]="loading">{{ cancelText }}</button>
+  <button type="button" class="btn btn-{{btnClass}}" [disabled]="loading" (click)="onSubmit()">{{ commandText }}</button>
+  <br>
+
+  <div class="progress" style="width: 100%" *ngIf="loading">
+    <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="100"
+         aria-valuemin="0" aria-valuemax="100" style="width: 100%"></div>
+  </div>
+</div>

projects/openharbor/ngx-data-bootstrap-ui/src/lib/command-modal/command-modal/command-modal.component.scss

@@ -0,0 +1,3 @@
+.field-error{
+  border: 1px solid red;
+}

projects/openharbor/ngx-data-bootstrap-ui/src/lib/command-modal/command-modal/command-modal.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit, TemplateRef, OnDestroy, EventEmitter } from '@angular/core';
+import {Component, EventEmitter, OnDestroy, OnInit, TemplateRef} from '@angular/core';
 import {IDataSource} from '@poweredsoft/data';
 import {BsModalRef} from 'ngx-bootstrap/modal';
 import {finalize} from 'rxjs/operators';
@@ -6,12 +6,11 @@ import { Subscription } from 'rxjs';
 import {NgForm} from '@angular/forms';
 
 @Component({
-  selector: 'psbx-command-modal',
+  selector: 'bsx-command-modal',
   templateUrl: './command-modal.component.html',
   styleUrls: ['./command-modal.component.scss']
 })
 export class CommandModalComponent implements OnInit, OnDestroy {
-
   title: string;
   template: TemplateRef<any>;
   command: string;
@@ -80,9 +79,4 @@ export class CommandModalComponent implements OnInit, OnDestroy {
         // you do not want to close on failure.. so just ignore..
       });
   }
-
-  attemptSave() {
-
-  }
-
 }

projects/openharbor/ngx-data-bootstrap-ui/src/lib/command-modal/directives/command-modal.directive.ts

@@ -4,13 +4,11 @@ import { BsModalService } from 'ngx-bootstrap/modal';
 import { CommandModalComponent } from '../command-modal/command-modal.component';
 
 @Directive({
-  selector: '[psbxCommandModal]'
+  selector: '[bsxCommandModal]'
 })
 export class CommandModalDirective {
-
   constructor(private modalService: BsModalService) { }
 
-
   @Input() dataSource: IDataSource<any>;
   @Input() command: string;
   @Input() model: any;
@@ -56,7 +54,6 @@ export class CommandModalDirective {
         backdrop: this.backdrop === undefined ? true : this.backdrop,
         ignoreBackdropClick: this.ignoreBackdropClick === undefined ? false : this.ignoreBackdropClick
       });
-
     }, error => {
 
     });

projects/openharbor/ngx-data-bootstrap-ui/src/lib/command/command.module.ts

@@ -0,0 +1,15 @@
+import {NgModule} from '@angular/core';
+import {CommonModule} from '@angular/common';
+import {CommandDirective} from './directives/command.directive';
+import {ConfirmModalModule} from '../confirm-modal/confirm-modal.module';
+
+
+@NgModule({
+  declarations: [CommandDirective],
+  imports: [
+    CommonModule,
+    ConfirmModalModule
+  ],
+  exports:[CommandDirective]
+})
+export class CommandModule { }

projects/openharbor/ngx-data-bootstrap-ui/src/lib/command/directives/command.directive.ts

@@ -1,16 +1,14 @@
-import { Directive, Input, TemplateRef, HostListener, Output, EventEmitter } from '@angular/core';
+import {Directive, EventEmitter, HostListener, Input, Output} from '@angular/core';
 import {IDataSource} from '@poweredsoft/data';
 import {finalize} from 'rxjs/operators';
 import {ConfirmModalService} from '../../confirm-modal/confirm-modal.service';
 
 @Directive({
-  selector: '[psbxCommand]'
+  selector: '[bsxCommand]'
 })
 export class CommandDirective {
-
   constructor(private confirmModalService: ConfirmModalService) { }
 
-
   @Input() dataSource: IDataSource<any>;
   @Input() command: string;
   @Input() model: any;

projects/openharbor/ngx-data-bootstrap-ui/src/lib/confirm-modal/confirm-modal-components/confirm-modal/confirm-modal.component.html

@@ -0,0 +1,6 @@
+<div class="modal-body text-center">
+  <p>{{ message }}</p>
+  <button type="button" [ngClass]="yesButtonClass" (click)="confirm()">{{ yesText }}</button>
+  &nbsp;
+  <button type="button" [ngClass]="noButtonClass" (click)="decline()">{{ noText }}</button>
+</div>

projects/openharbor/ngx-data-bootstrap-ui/src/lib/confirm-modal/confirm-modal-components/confirm-modal/confirm-modal.component.ts

@@ -1,16 +1,15 @@
-import { Component, OnInit, TemplateRef, EventEmitter } from '@angular/core';
+import {Component, Inject, OnInit} from '@angular/core';
-import { BsModalRef, BsModalService } from 'ngx-bootstrap/modal';
+import {BsModalRef} from 'ngx-bootstrap/modal';
 import {Observer} from 'rxjs';
 
 
 @Component({
-  selector: 'psbx-confirm-modal',
+  selector: 'bsx-confirm-modal',
   templateUrl: './confirm-modal.component.html',
   styleUrls: ['./confirm-modal.component.scss']
 })
-export class ConfirmModalComponent implements OnInit {
+export class ConfirmModalComponent {
-
+  @Inject(BsModalRef) modelRef!: BsModalRef;
-
   yesText: string;
   noText: string;
   message: string;
@@ -18,14 +17,6 @@ export class ConfirmModalComponent implements OnInit {
   noClass: string;
   observer: Observer<boolean>;
 
-  constructor(private modelRef: BsModalRef) {
-
-  }
-
-  ngOnInit(): void {
-    
-  }
-
   get yesButtonClass() {
     return `btn btn-${this.yesClass}`
   }
@@ -45,5 +36,4 @@ export class ConfirmModalComponent implements OnInit {
     this.observer.next(false);
     this.observer.complete();
   }
-
 }

projects/openharbor/ngx-data-bootstrap-ui/src/lib/confirm-modal/confirm-modal.service.ts

@@ -14,13 +14,10 @@ export interface IConfirmModalOptions
 
 @Injectable()
 export class ConfirmModalService {
-
   constructor(private modalService: BsModalService) { }
 
   confirm(options: IConfirmModalOptions) : Observable<boolean> {
-    return Observable.create((o: Observer<boolean>) => {
+    return new Observable<boolean>((o: Observer<boolean>) => {
-
-
       const initialState = {
         message: options.message,
         yesText: options.yesText || 'yes',
@@ -30,7 +27,7 @@ export class ConfirmModalService {
         observer: o
       };
 
-      const modal = this.modalService.show(ConfirmModalComponent, {
+      this.modalService.show(ConfirmModalComponent, {
         initialState: initialState,
         animated: true,
         keyboard: false

projects/openharbor/ngx-data-bootstrap-ui/src/lib/data-source-filter/data-source-filter.module.ts

@@ -0,0 +1,24 @@
+import {NgModule} from '@angular/core';
+import {CommonModule} from '@angular/common';
+import {DataSourceTextFilterComponent} from './text-filter/data-source-text-filter.component';
+import {FormsModule} from '@angular/forms';
+import {DataSourceNumberFilterComponent} from './number-filter/data-source-number-filter.component';
+import {DataSourceDatetimeFilterComponent} from './datetime-filter/data-source-datetime-filter.component';
+import {BsDatepickerModule} from 'ngx-bootstrap/datepicker';
+import {PopoverModule} from 'ngx-bootstrap/popover';
+import {BsDropdownModule} from 'ngx-bootstrap/dropdown';
+import {TooltipModule} from 'ngx-bootstrap/tooltip';
+
+@NgModule({
+  declarations: [DataSourceTextFilterComponent, DataSourceNumberFilterComponent,DataSourceDatetimeFilterComponent],
+  imports: [
+    CommonModule,
+    FormsModule,
+    BsDatepickerModule.forRoot(),
+    PopoverModule.forRoot(),
+    BsDropdownModule.forRoot(),
+    TooltipModule.forRoot()
+  ],
+  exports: [DataSourceTextFilterComponent, DataSourceNumberFilterComponent,DataSourceDatetimeFilterComponent]
+})
+export class DataSourceFilterModule { }

projects/openharbor/ngx-data-bootstrap-ui/src/lib/data-source-filter/datetime-filter/data-source-datetime-filter.component.html

@@ -75,7 +75,7 @@
 </svg>
 </button> -->
 
-<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+<svg id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
      viewBox="0 0 477.875 477.875" style="enable-background:new 0 0 477.875 477.875;" xml:space="preserve" fill-opacity="0.5" [tooltip]="showTooltip()" [tooltipEnable]="!filterPopUpOpened" width="13px" height="13px" [ngStyle]="{'fill': isFiltering ? 'red': 'black', 'fill-opacity': isFiltering ? '1': '0.5'}" [popover]="popTemplate" [(isOpen)]="filterPopUpOpened" [outsideClick]="true" #pop="bs-popover">
 <g>
 <g>

projects/openharbor/ngx-data-bootstrap-ui/src/lib/data-source-filter/datetime-filter/data-source-datetime-filter.component.ts

@@ -1,15 +1,13 @@
-import { Component, OnInit, Input, Output, EventEmitter} from '@angular/core';
+import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
-import { IDataSource, ISimpleFilter, ICompositeFilter, IFilter,FilterType } from '@poweredsoft/data';
+import {FilterType, ICompositeFilter, IDataSource, ISimpleFilter} from '@poweredsoft/data';
-
 
 
 @Component({
-  selector: 'psbx-ds-datetime-filter',
+  selector: 'bsx-ds-datetime-filter',
   templateUrl: './data-source-datetime-filter.component.html',
   styleUrls: ['./data-source-datetime-filter.component.scss']
 })
 export class DataSourceDatetimeFilterComponent implements OnInit {
-
   @Input() path: string;
   @Input() dataSource : IDataSource<any>;
   @Input() filterType: string;
@@ -27,7 +25,6 @@ export class DataSourceDatetimeFilterComponent implements OnInit {
     {key:'Range', value: FilterType.COMPOSITE }
   ];
 
-
   bsInlineValue = new Date();
   bsInlineRangeValue: Date[];
   maxDate = new Date();
@@ -45,11 +42,12 @@ export class DataSourceDatetimeFilterComponent implements OnInit {
     if (!this.filterType)
       this.filterType = 'Equal';
   }
+
   showTooltip(){
     return "Filter by "+ this.path;
   }
-  clearFilter() {
 
+  clearFilter() {
     this.filterValue = null;
     this.isFiltering = false;
     const existingFilter = this.dataSource.filters.find(t => (t as ISimpleFilter).path == this.path) as ISimpleFilter;
@@ -61,7 +59,6 @@ export class DataSourceDatetimeFilterComponent implements OnInit {
     }
 
     if (this.isRangeFilter) {
-     
       let existingFilter2 = this.dataSource.filters.find(t=> t.type == 'Composite');
       this.dataSource.query({
         page: 1,
@@ -69,6 +66,7 @@ export class DataSourceDatetimeFilterComponent implements OnInit {
       })
     }
   }
+
   applyFilter(){
 
     this.isFiltering = true;
@@ -82,6 +80,7 @@ export class DataSourceDatetimeFilterComponent implements OnInit {
     if(Array.isArray(this.filterValue)){ //check if it's a dateRange value
       startDate = this.filterValue[0];
       endDate = this.filterValue[1];
+
       compositeF = {
         type: FilterType.COMPOSITE,
         filters: [
@@ -97,22 +96,20 @@ export class DataSourceDatetimeFilterComponent implements OnInit {
             value: endDate,
           }
         ]
-      }
+      };
-     
     } else {
       freshFilter = {
         type: this.filterType,
         and: true,
         path: this.path,
         value: this.filterValue
-      }
+      };
     }
 
     // TODO???
     // set this for gql better handling of variant.
     //(freshFilter as IGraphQLFilter).__gqlVariantType = 'DATETIME';
 
-    
     const existingFilterIndex = filters.findIndex(t => {
       if (t.type == 'COMPOSITE') {
         const compositeFilter = t as ICompositeFilter;
@@ -143,8 +140,6 @@ export class DataSourceDatetimeFilterComponent implements OnInit {
     this.dataSource.query({
       filters: filters,
       page: 1
-    })
+    });
   }
-
-
 }

projects/openharbor/ngx-data-bootstrap-ui/src/lib/data-source-filter/number-filter/data-source-number-filter.component.html

@@ -0,0 +1,62 @@
+<ng-template #popTemplate>
+  <form (ngSubmit)="applyFilter()" novalidate>
+    <div class="container" >
+      <div class="row">
+        <select class="custom-select" title="Choose one of the following..." [(ngModel)]="filterType" [ngModelOptions]="{standalone: true}">
+          <option *ngFor="let filter of filterTypes" [value]="filter.value">{{filter.key}}</option>
+        </select>
+      </div>
+
+      <div class="row mt-1 mb-1">
+        <input type="number" class="form-control" placeholder="Value" aria-label="number"
+               aria-describedby="basic-addon1" [(ngModel)]="filterValue" [ngModelOptions]="{standalone: true}">
+      </div>
+
+      <button class="btn btn-primary mr-1">Filter</button>
+      <button type="button" class="btn btn-warning" *ngIf="!isFiltering" (click)="pop.hide()">Hide</button>
+      <button type="button" class="btn btn-dark" *ngIf="isFiltering" (click)="clearFilter()">Clear</button>
+
+    </div>
+  </form>
+</ng-template>
+
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+     viewBox="0 0 477.875 477.875" style="enable-background:new 0 0 477.875 477.875;" xml:space="preserve" fill-opacity="0.5" [tooltip]="showTooltip()" [tooltipEnable]="!filterIsOpened" width="13px" height="13px" [ngStyle]="{'fill': isFiltering ? 'red': 'black', 'fill-opacity': isFiltering ? '1': '0.5'}" [popover]="popTemplate" [(isOpen)]="filterIsOpened" [outsideClick]="true" #pop="bs-popover">
+<g>
+	<g>
+		<path d="M460.804,0H17.071C7.645,0,0.004,7.641,0.004,17.067V102.4c-0.004,4.842,2.05,9.458,5.649,12.698l165.018,148.514V460.8
+			c-0.004,9.426,7.633,17.07,17.059,17.075c2.651,0.001,5.266-0.615,7.637-1.8l102.4-51.2c5.786-2.891,9.441-8.806,9.438-15.275
+			V263.612l165.018-148.48c3.608-3.247,5.662-7.878,5.649-12.732V17.067C477.871,7.641,470.23,0,460.804,0z"/>
+	</g>
+</g>
+  <g>
+</g>
+  <g>
+</g>
+  <g>
+</g>
+  <g>
+</g>
+  <g>
+</g>
+  <g>
+</g>
+  <g>
+</g>
+  <g>
+</g>
+  <g>
+</g>
+  <g>
+</g>
+  <g>
+</g>
+  <g>
+</g>
+  <g>
+</g>
+  <g>
+</g>
+  <g>
+</g>
+</svg>

projects/openharbor/ngx-data-bootstrap-ui/src/lib/data-source-filter/number-filter/data-source-number-filter.component.ts

@@ -1,19 +1,20 @@
-import { Component, OnInit, Input, Output, EventEmitter, ElementRef, ViewChild } from '@angular/core';
+import {Component, Input} from '@angular/core';
-import { IDataSource,IFilter, ISimpleFilter } from '@poweredsoft/data';
+import {IDataSource, ISimpleFilter} from '@poweredsoft/data';
 
 
 @Component({
-  selector: 'psbx-ds-number-filter',
+  selector: 'bsx-ds-number-filter',
   templateUrl: './data-source-number-filter.component.html',
   styleUrls: ['./data-source-number-filter.component.scss']
 })
-export class DataSourceNumberFilterComponent implements OnInit {
+export class DataSourceNumberFilterComponent {
   @Input() dataSource : IDataSource<any>;
   @Input() path: string;
 
   filterType: string = 'Equal';
   filterValue: number = 0;
   isFiltering: boolean;
+  filterIsOpened: boolean = false;
   filterTypes = [
     {key:'Equals', value: 'Equal'},
     {key:'Greater Than', value: 'GreaterThan'},
@@ -21,15 +22,6 @@ export class DataSourceNumberFilterComponent implements OnInit {
     {key:'Greater Than Equal', value: 'GreaterThanOrEqual'},
     {key:'Less Than Equal', value: 'LessThanOrEqual'},
   ];
-  filterIsOpenned: boolean = false;
-
-  constructor() { }
- 
-
-  ngOnInit(): void {
-
-    
-  }
 
   clearFilter() {
     this.filterValue = 0;

projects/openharbor/ngx-data-bootstrap-ui/src/lib/data-source-filter/text-filter/data-source-text-filter.component.html

@@ -1,5 +1,4 @@
 <ng-template #popTemplate>
-
   <form (ngSubmit)="applyFilter(pop)" novalidate>
 
     <div class="container" >
@@ -66,7 +65,7 @@
 </button> -->
 
 <svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-viewBox="0 0 477.875 477.875" style="enable-background:new 0 0 477.875 477.875;" xml:space="preserve" fill-opacity="0.5" [tooltip]="showTooltip()" [tooltipEnable]="!filterIsOpenned" width="13px" height="13px" [ngStyle]="{'fill': isFiltering ? 'red': 'black', 'fill-opacity': isFiltering ? '1': '0.5'}" [popover]="popTemplate"  [(isOpen)]="filterIsOpenned"  [outsideClick]="true" #pop="bs-popover">
+     viewBox="0 0 477.875 477.875" style="enable-background:new 0 0 477.875 477.875;" xml:space="preserve" fill-opacity="0.5" [tooltip]="showTooltip()" [tooltipEnable]="!filterIsOpened" width="13px" height="13px" [ngStyle]="{'fill': isFiltering ? 'red': 'black', 'fill-opacity': isFiltering ? '1': '0.5'}" [popover]="popTemplate" [(isOpen)]="filterIsOpened" [outsideClick]="true" #pop="bs-popover">
 <g>
 <g>
    <path d="M460.804,0H17.071C7.645,0,0.004,7.641,0.004,17.067V102.4c-0.004,4.842,2.05,9.458,5.649,12.698l165.018,148.514V460.8

projects/openharbor/ngx-data-bootstrap-ui/src/lib/data-source-filter/text-filter/data-source-text-filter.component.ts

@@ -1,36 +1,27 @@
-import { Component, OnInit, Input } from '@angular/core';
+import {Component, Input} from '@angular/core';
-import { IDataSource} from '@poweredsoft/data';
+import {IDataSource, ISimpleFilter} from '@poweredsoft/data';
-import { ISimpleFilter } from '@poweredsoft/data';
 import {PopoverDirective} from 'ngx-bootstrap/popover';
 
-
 @Component({
-  selector: 'psbx-ds-text-filter',
+  selector: 'bsx-ds-text-filter',
   templateUrl: './data-source-text-filter.component.html',
   styleUrls: ['./data-source-text-filter.component.scss']
 })
-export class DataSourceTextFilterComponent implements OnInit {
+export class DataSourceTextFilterComponent {
-
   @Input() dataSource : IDataSource<any>;
   @Input() path: string;
 
   filterType: string = 'Contains';
   filterValue: string = null;
   isFiltering: boolean;
+  filterIsOpened: boolean = false;
+
   filterTypes = [
     {key:'Contains', value: 'Contains'},
     {key:'Equals', value: 'Equal'},
     {key:'Starts With', value: 'startsWith'},
     {key:'Ends With', value: 'endsWith'}
   ];
-  filterIsOpenned: boolean = false;
-
-  constructor() { }
- 
-
-  ngOnInit(): void {
-    
-  }
 
   clearFilter() {
     this.filterValue = '';

projects/openharbor/ngx-data-bootstrap-ui/src/lib/data-source-sorting/data-source-sorting.module.ts

@@ -0,0 +1,13 @@
+import {NgModule} from '@angular/core';
+import {CommonModule} from '@angular/common';
+import {DataSourceSortingComponent} from './ds-sorting/data-source-sorting.component';
+
+
+@NgModule({
+  declarations: [DataSourceSortingComponent],
+  imports: [
+    CommonModule
+  ],
+  exports:[DataSourceSortingComponent]
+})
+export class DataSourceSortingModule { }

projects/openharbor/ngx-data-bootstrap-ui/src/lib/data-source-sorting/ds-sorting/data-source-sorting.component.ts

@@ -1,17 +1,15 @@
-import { Component, OnInit, Input } from '@angular/core';
+import {Component, Input} from '@angular/core';
 import {IDataSource} from '@poweredsoft/data';
 
 @Component({
-  selector: 'psbx-ds-sorting',
+  selector: 'bsx-ds-sorting',
   templateUrl: './data-source-sorting.component.html',
   styleUrls: ['./data-source-sorting.component.scss']
 })
-export class DataSourceSortingComponent implements OnInit {
+export class DataSourceSortingComponent {
-
   @Input() dataSource : IDataSource<any>;
   @Input() path: string;
 
-  
   get sort() {
     return this.dataSource.sorts.find(t => t.path == this.path);
   }
@@ -24,13 +22,7 @@ export class DataSourceSortingComponent implements OnInit {
     return !this.isSorting ? true : this.sort.ascending;
   }
 
-  constructor() { }
-
-  ngOnInit(): void {
-  }
-  
   sorting(){
-
     if (!this.isSorting) {
       this.dataSource.sorts.push({
         path: this.path,
@@ -47,5 +39,4 @@ export class DataSourceSortingComponent implements OnInit {
       page: 1
     })
   }
-
 }

projects/openharbor/ngx-data-bootstrap-ui/src/lib/form-group-command-modal/directives/form-group-command-modal.directive.ts

@@ -1,9 +1,8 @@
-import { Directive, Input, TemplateRef, HostListener, Output, EventEmitter } from '@angular/core';
+import {Directive, EventEmitter, HostListener, Inject, Input, Output, TemplateRef} from '@angular/core';
 import {IDataSource} from '@poweredsoft/data';
 import {BsModalService} from 'ngx-bootstrap/modal';
 import {FormGroupCommandModalComponent} from '../form-group-command-modal/form-group-command-modal.component';
 import {FormGroup} from '@angular/forms';
-import { ConfirmModalComponent } from '../../confirm-modal/confirm-modal-components/confirm-modal/confirm-modal.component';
 
 export interface IModelFormCreateEvent
 {
@@ -15,10 +14,10 @@ export interface IModelFormCreateEvent
 }
 
 @Directive({
-  selector: '[psbxFormGroupCommandModal]'
+  selector: '[bsxFormGroupCommandModal]'
 })
 export class FormGroupCommandModalDirective {
-
+  @Inject(BsModalService) private modalService!: BsModalService;
 
   @Input() dataSource: IDataSource<any>;
   @Input() command: string;
@@ -34,12 +33,8 @@ export class FormGroupCommandModalDirective {
   @Input() params: any;
 
   @Output() formCreate: EventEmitter<IModelFormCreateEvent> = new EventEmitter<IModelFormCreateEvent>();
-
   @Output() success: EventEmitter<any> = new EventEmitter<any>();
 
-
-  constructor(private modalService: BsModalService) { }
-
   @HostListener('click')
   wasClicked() {
     this.dataSource.resolveCommandModelByName({
@@ -85,5 +80,4 @@ export class FormGroupCommandModalDirective {
 
     });
   }
-
 }

projects/openharbor/ngx-data-bootstrap-ui/src/lib/form-group-command-modal/form-group-command-modal.module.ts

@@ -0,0 +1,18 @@
+import {NgModule} from '@angular/core';
+import {CommonModule} from '@angular/common';
+import {FormGroupCommandModalComponent} from './form-group-command-modal/form-group-command-modal.component';
+import {FormGroupCommandModalDirective} from './directives/form-group-command-modal.directive';
+import {ModalModule} from 'ngx-bootstrap/modal';
+import {ReactiveFormsModule} from '@angular/forms';
+
+
+@NgModule({
+  imports: [
+    CommonModule,
+    ModalModule.forRoot(),
+    ReactiveFormsModule
+  ],
+  declarations: [FormGroupCommandModalComponent, FormGroupCommandModalDirective],
+  exports: [FormGroupCommandModalDirective]
+})
+export class FormGroupCommandModalModule { }

projects/openharbor/ngx-data-bootstrap-ui/src/lib/form-group-command-modal/form-group-command-modal/form-group-command-modal.component.html

@@ -0,0 +1,25 @@
+<div class="modal-header">
+  <h4 class="modal-title pull-left">{{ title }}</h4>
+  <button type="button" class="close pull-right" aria-label="Close" (click)="modalRef.hide()">
+    <span aria-hidden="true">&times;</span>
+  </button>
+</div>
+
+<div class="model-body">
+  <ng-container [ngTemplateOutlet]="template" [ngTemplateOutletContext]="{ $implicit: modelForm, loading: loading }">
+  </ng-container>
+
+  <div *ngIf="errorMessage" class="alert alert-danger mt-2" style="white-space: pre-wrap">{{ errorMessage }}</div>
+</div>
+
+<div class="modal-footer">
+  <button type="button" class="btn btn-light" (click)="modalRef.hide()"
+          [disabled]="loading">{{ cancelText }}</button>
+  <button type="button" class="btn btn-primary" (click)="attemptSave()" [disabled]="loading">{{commandText}}</button>
+  <br>
+
+  <div class="progress" style="width: 100%" *ngIf="loading">
+    <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="100"
+         aria-valuemin="0" aria-valuemax="100" style="width: 100%"></div>
+  </div>
+</div>

projects/openharbor/ngx-data-bootstrap-ui/src/lib/form-group-command-modal/form-group-command-modal/form-group-command-modal.component.ts

@@ -1,17 +1,17 @@
-import { Component, OnInit, TemplateRef, OnDestroy, EventEmitter } from '@angular/core';
+import {Component, EventEmitter, Inject, OnDestroy, OnInit, TemplateRef} from '@angular/core';
 import {BsModalRef} from 'ngx-bootstrap/modal';
 import {IDataSource} from '@poweredsoft/data';
 import {finalize} from 'rxjs/operators';
 import {Subscription} from 'rxjs'
-import { FormGroup, FormControl } from '@angular/forms';
+import {FormGroup} from '@angular/forms';
 
 @Component({
-  selector: 'ps-form-group-command-modal',
+  selector: 'bsx-form-group-command-modal',
   templateUrl: './form-group-command-modal.component.html',
   styleUrls: ['./form-group-command-modal.component.scss']
 })
 export class FormGroupCommandModalComponent implements OnInit, OnDestroy {
-
+  @Inject(BsModalRef) public modalRef!: BsModalRef;
 
   modelForm: FormGroup;
   title: string;
@@ -29,10 +29,6 @@ export class FormGroupCommandModalComponent implements OnInit, OnDestroy {
   private _notifyMessage: Subscription;
   private _validationError: Subscription;
 
-
-
-  constructor(public modalRef: BsModalRef) { }
-
   ngOnDestroy(): void {
     this._notifyMessage.unsubscribe();
     this._validationError.unsubscribe();

projects/openharbor/ngx-data-bootstrap-ui/src/lib/pagination/data-source-pagination/data-source-pagination.component.ts

@@ -1,20 +1,20 @@
-import { Component, OnInit, Input, OnDestroy, ChangeDetectorRef } from '@angular/core';
+import {ChangeDetectorRef, Component, Inject, Input, OnDestroy, OnInit} from '@angular/core';
 import {IDataSource} from '@poweredsoft/data';
 import {Subscription} from 'rxjs';
 
 @Component({
-  selector: 'psbx-ds-pagination',
+  selector: 'bsx-ds-pagination',
   templateUrl: './data-source-pagination.component.html',
   styleUrls: ['./data-source-pagination.component.scss']
 })
 export class DataSourcePaginationComponent implements OnInit, OnDestroy {
-  
+  @Inject(ChangeDetectorRef) private cdf!: ChangeDetectorRef;
 
   @Input() dataSource: IDataSource<any>
+
   numberOfItems: number = 0;
   private dataSubscription: Subscription;
 
-  constructor(private cdf: ChangeDetectorRef) { }
   ngOnDestroy(): void {
     this.dataSubscription.unsubscribe();
   }
@@ -31,5 +31,4 @@ export class DataSourcePaginationComponent implements OnInit, OnDestroy {
         this.numberOfItems = 0;
     });
   }
-
 }

projects/openharbor/ngx-data-bootstrap-ui/src/lib/pagination/pagination.module.ts

@@ -0,0 +1,17 @@
+import {NgModule} from '@angular/core';
+import {CommonModule} from '@angular/common';
+import {DataSourcePaginationComponent} from './data-source-pagination/data-source-pagination.component';
+import {PaginationModule as ValorPaginationModule} from 'ngx-bootstrap/pagination';
+import {FormsModule} from '@angular/forms';
+
+
+@NgModule({
+  declarations: [DataSourcePaginationComponent],
+  imports: [
+    CommonModule,
+    ValorPaginationModule.forRoot(),
+    FormsModule
+  ],
+  exports: [DataSourcePaginationComponent]
+})
+export class PaginationModule { }

projects/openharbor/ngx-data-bootstrap-ui/src/lib/spinner/spinner.module.ts

@@ -0,0 +1,13 @@
+import {NgModule} from '@angular/core';
+import {CommonModule} from '@angular/common';
+import {SpinnerComponent} from './spinner/spinner.component';
+
+
+@NgModule({
+  declarations: [SpinnerComponent],
+  imports: [
+    CommonModule
+  ],
+  exports:[SpinnerComponent]
+})
+export class SpinnerModule { }

projects/openharbor/ngx-data-bootstrap-ui/src/lib/spinner/spinner/spinner.component.html

@@ -0,0 +1,10 @@
+<div class="center">
+  <div class="spinner-grow text-primary" role="status">
+  </div>
+  <div class="spinner-grow text-secondary" role="status">
+  </div>
+  <div class="spinner-grow text-primary" role="status">
+  </div>
+  <div class="spinner-grow text-secondary" role="status">
+  </div>
+</div>

projects/openharbor/ngx-data-bootstrap-ui/src/lib/spinner/spinner/spinner.component.scss

@@ -0,0 +1,6 @@
+.center {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}

projects/openharbor/ngx-data-bootstrap-ui/src/lib/spinner/spinner/spinner.component.ts

@@ -0,0 +1,10 @@
+import {Component} from '@angular/core';
+
+@Component({
+  selector: 'bsx-spinner',
+  templateUrl: './spinner.component.html',
+  styleUrls: ['./spinner.component.scss']
+})
+export class SpinnerComponent {
+
+}

projects/openharbor/ngx-data-bootstrap-ui/src/public-api.ts

@@ -7,7 +7,6 @@ export * from './lib/command-modal/command-modal.service';
 export * from './lib/command-modal/directives/command-modal.directive';
 export * from './lib/form-group-command-modal/form-group-command-modal.module';
 export * from './lib/form-group-command-modal/directives/form-group-command-modal.directive';
-export * from './lib/pagination/Pagination.module';
 export * from './lib/pagination/data-source-pagination/data-source-pagination.component';
 export * from './lib/confirm-modal/confirm-modal.module';
 export * from './lib/confirm-modal/confirm-modal.service';
@@ -21,3 +20,4 @@ export * from './lib/data-source-sorting/data-source-sorting.module';
 export * from './lib/data-source-sorting/ds-sorting/data-source-sorting.component';
 export * from './lib/command/command.module';
 export * from './lib/command/directives/command.directive';
+export * from './lib/pagination/pagination.module';

projects/openharbor/ngx-data-cdk-ui/ng-package.json

@@ -1,6 +1,6 @@
 {
   "$schema": "../../../node_modules/ng-packagr/ng-package.schema.json",
-  "dest": "../../../dist/poweredsoft/ngx-cdk-ui",
+  "dest": "../../../dist/openharbor/ngx-data-cdk-ui",
   "lib": {
     "entryFile": "src/public-api.ts"
   }

projects/openharbor/ngx-data-cdk-ui/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "@poweredsoft/ngx-cdk-ui",
+  "name": "@openharbor/ngx-data-cdk-ui",
   "version": "0.0.18",
   "peerDependencies": {
     "@angular/common": "^9.1.9",

projects/openharbor/ngx-data-cdk-ui/src/lib/data-grid/data-grid.module.ts

@@ -0,0 +1,29 @@
+import {NgModule} from '@angular/core';
+import {CommonModule} from '@angular/common';
+import {DataGridComponent} from './data-grid/data-grid.component';
+import {DataGridColDirective} from './directives/data-grid-col.directive';
+import {DataGridColHeaderDirective} from './directives/data-grid-col-header.directive';
+import {DataGridCellDirective} from './directives/data-grid-cell.directive';
+import {DataGridFooterDirective} from './directives/data-grid-footer.directive';
+import {DataGridHeaderDirective} from './directives/data-grid-header.directive';
+import {DataGridLoaderDirective} from './directives/data-grid-loader.directive';
+import {DataGridCellFilterDirective} from './directives/data-grid-cell-filter.directive';
+import {DataGridColSortDirective} from './directives/data-grid-col-sort.directive';
+
+
+@NgModule({
+  declarations: [
+    DataGridComponent,DataGridColDirective,DataGridColHeaderDirective,
+    DataGridCellDirective, DataGridFooterDirective, DataGridHeaderDirective,
+    DataGridLoaderDirective, DataGridCellFilterDirective, DataGridColSortDirective,
+
+  ],
+  imports: [
+    CommonModule
+  ],
+  exports: [
+    DataGridComponent,DataGridColDirective,DataGridColHeaderDirective,
+    DataGridCellDirective,DataGridFooterDirective, DataGridHeaderDirective,
+    DataGridLoaderDirective,DataGridCellFilterDirective,DataGridColSortDirective]
+})
+export class DataGridModule { }

projects/openharbor/ngx-data-cdk-ui/src/lib/data-grid/data-grid/data-grid.component.html

@@ -0,0 +1,77 @@
+<ng-container *ngIf="loading" [ngTemplateOutlet]="loadingTemplate"></ng-container>
+
+<table [ngClass]="tableClasses">
+  <thead [ngClass]="headerClasses">
+  <tr *ngFor="let header of gridHeaders" >
+    <th [attr.colspan]="columns.length">
+      <ng-container [ngTemplateOutlet]="header.template"></ng-container>
+    </th>
+  </tr>
+  <tr>
+    <th *ngFor="let column of columns">
+      <div class="flex-container">
+        <div class="flex-item">
+          <ng-container *ngIf="hasHeaderTemplate(column)" >
+            <ng-container
+              [ngTemplateOutlet]="getColumnHeaderTemplate(column)"
+            ></ng-container>
+          </ng-container>
+        </div>
+
+        <div class="flex-item">
+
+          <ng-container *ngIf="hasSortingTemplate(column)">
+            <ng-container [ngTemplateOutlet]="getSortingTemplate(column)"></ng-container>
+          </ng-container>
+
+          <ng-container *ngIf="hasFilterTemplate(column)">
+            <ng-container [ngTemplateOutlet]="getFilterTemplate(column)"></ng-container>
+          </ng-container>
+        </div>
+
+      </div>
+    </th>
+  </tr>
+  </thead>
+  <tbody *ngIf="!noData else noResultTemplate">
+  <tr *ngFor="let rowModel of latestResult.data; let i = index; let first = first; let last = last; let odd = odd">
+    <td *ngFor="let column of columns">
+      <ng-container *ngIf="hasCellTemplate(column)">
+        <ng-container
+          [ngTemplateOutlet]="getColumnCellTemplate(column)"
+          [ngTemplateOutletContext]="{
+              $implicit: rowModel,
+              column: column,
+              rowIndex: i,
+              first: first,
+              last: last,
+              odd: odd
+            }"
+        ></ng-container>
+      </ng-container>
+    </td>
+  </tr>
+  </tbody>
+  <tfoot>
+  <tr>
+    <td *ngFor="let footer of gridFooters" [attr.colspan]="columns.length">
+      <ng-container [ngTemplateOutlet]="footer.template"></ng-container>
+    </td>
+  </tr>
+  </tfoot>
+</table>
+
+<ng-template #loadingTemplate>
+  <ng-container *ngFor="let loader of loaders">
+    <ng-container [ngTemplateOutlet]="loader.template"></ng-container>
+  </ng-container>
+</ng-template>
+<ng-template #noResultTemplate>
+  <tbody>
+  <tr>
+    <td [attr.colspan]="columns.length">
+      <p style="text-align: center;">{{ noRecordsDisplayText }}</p>
+    </td>
+  </tr>
+  </tbody>
+</ng-template>

projects/openharbor/ngx-data-cdk-ui/src/lib/data-grid/data-grid/data-grid.component.scss

@@ -1,10 +1,12 @@
-:host  .flex-container{
+:host {
+  .flex-container{
     display: flex;
     justify-content: space-between;
     align-items: center;
   }
 
-:host .flex-item{
+  .flex-item{
     margin-right: 1px;
     height: 100%;
   }
+}

projects/openharbor/ngx-data-cdk-ui/src/lib/data-grid/data-grid/data-grid.component.ts

@@ -1,28 +1,37 @@
-import { Component, OnInit, ContentChildren, QueryList, Input, Output, EventEmitter, ContentChild, ChangeDetectorRef, OnDestroy } from '@angular/core';
+import {
-import { IQueryExecutionResult, IQueryExecutionGroupResult, IDataSource } from '@poweredsoft/data';
+  ChangeDetectorRef,
+  Component,
+  ContentChildren,
+  EventEmitter, Inject,
+  Input,
+  OnDestroy,
+  OnInit,
+  Output,
+  QueryList
+} from '@angular/core';
+import {IDataSource, IQueryExecutionGroupResult, IQueryExecutionResult} from '@poweredsoft/data';
 import {DataGridColDirective} from '../directives/data-grid-col.directive';
 import {DataGridHeaderDirective} from '../directives/data-grid-header.directive';
 import {DataGridFooterDirective} from '../directives/data-grid-footer.directive';
 import {DataGridLoaderDirective} from '../directives/data-grid-loader.directive';
 import {Subscription} from 'rxjs';
-import { DataGridCellFilterDirective } from '../directives/data-grid-cell-filter.directive';
-import { DataGridColSortDirective } from '../directives/data-grid-col-sort.directive';
 
 @Component({
-  selector: 'ps-data-grid',
+  selector: 'cdk-data-grid',
   templateUrl: './data-grid.component.html',
   styleUrls: ['./data-grid.component.scss']
 })
 export class DataGridComponent implements OnInit, OnDestroy {
-
+  @Inject(ChangeDetectorRef) private cdr!: ChangeDetectorRef;
-  latestResult: IQueryExecutionResult<any> & IQueryExecutionGroupResult<any>;
-  loading:boolean;
 
   @ContentChildren(DataGridColDirective) columnDefinitions: QueryList<DataGridColDirective>;
   @ContentChildren(DataGridHeaderDirective) gridHeaders: QueryList<DataGridHeaderDirective>;
   @ContentChildren(DataGridFooterDirective) gridFooters: QueryList<DataGridFooterDirective>;
   @ContentChildren(DataGridLoaderDirective) loaders: QueryList<DataGridLoaderDirective>;
 
+  latestResult: IQueryExecutionResult<any> & IQueryExecutionGroupResult<any>;
+  loading: boolean = false;
+
   @Input() dataSource: IDataSource<any>;
   @Input() tableClasses: any;
   @Input() headerClasses: any;
@@ -32,8 +41,6 @@ export class DataGridComponent implements OnInit, OnDestroy {
   private _dataSubscription: Subscription;
   private _loadingSubscription: Subscription;
 
-  _fiters:any
-
   @Input() set columns(value: string[]) {
     this._columns = value;
     this.columnsChange.emit(value);
@@ -45,8 +52,6 @@ export class DataGridComponent implements OnInit, OnDestroy {
 
   @Output() columnsChange: EventEmitter<string []> = new EventEmitter<string []>();
 
-  
-
   get noData() {
     return !this.latestResult || this.latestResult.totalRecords == 0;
   }
@@ -55,17 +60,12 @@ export class DataGridComponent implements OnInit, OnDestroy {
     return this.noRecordsText || 'No records';
   }
 
-  constructor(private cdr: ChangeDetectorRef) { 
-
-  }
-
   ngOnDestroy(): void {
     this._dataSubscription.unsubscribe();
     this._loadingSubscription.unsubscribe();
   }
 
   ngOnInit(): void {
-  
     this._dataSubscription = this.dataSource.data$.subscribe(newData => {
       this.latestResult = newData;
     });
@@ -74,10 +74,9 @@ export class DataGridComponent implements OnInit, OnDestroy {
       this.loading = isLoading;
       this.cdr.detectChanges();
     });
-    
   }
 
-  getSortingTemplate(columnName){
+  getSortingTemplate(columnName: string){
     const ret = this.getColumn(columnName);
     if (ret && ret.sortTemplate)
       return ret.sortTemplate.template;
@@ -85,7 +84,7 @@ export class DataGridComponent implements OnInit, OnDestroy {
     return null;
   }
 
-  getFilterTemplate(columnName){
+  getFilterTemplate(columnName: string){
     const ret = this.getColumn(columnName);
     if (ret && ret.filterTemplate)
       return ret.filterTemplate.template;
@@ -94,7 +93,6 @@ export class DataGridComponent implements OnInit, OnDestroy {
   }
 
   getColumn(columnName: string) {
-  
     if (!this.columnDefinitions)
       return null;
 
@@ -138,6 +136,4 @@ export class DataGridComponent implements OnInit, OnDestroy {
   hasSortingTemplate(columnName: string) {
     return this.getSortingTemplate(columnName) ? true : false;
   }
-
-
 }

projects/openharbor/ngx-data-cdk-ui/src/lib/data-grid/directives/data-grid-cell-filter.directive.ts

@@ -1,10 +1,8 @@
 import {Directive, TemplateRef} from '@angular/core';
 
 @Directive({
-  selector: '[psDataGridCellFilter]'
+  selector: '[cdkDataGridCellFilter]'
 })
 export class DataGridCellFilterDirective {
-
   constructor(public template: TemplateRef<any>) { }
-
 }

projects/openharbor/ngx-data-cdk-ui/src/lib/data-grid/directives/data-grid-cell.directive.ts

@@ -1,10 +1,8 @@
 import {Directive, TemplateRef} from '@angular/core';
 
 @Directive({
-  selector: '[psDataGridCell]'
+  selector: '[cdkDataGridCell]'
 })
 export class DataGridCellDirective {
-
   constructor(public template: TemplateRef<any>) { }
-
 }

projects/openharbor/ngx-data-cdk-ui/src/lib/data-grid/directives/data-grid-col-header.directive.ts

@@ -1,10 +1,8 @@
 import {Directive, TemplateRef} from '@angular/core';
 
 @Directive({
-  selector: '[psDataGridColHeader]'
+  selector: '[cdkDataGridColHeader]'
 })
 export class DataGridColHeaderDirective {
-
   constructor(public template: TemplateRef<any>) { }
-
 }

projects/openharbor/ngx-data-cdk-ui/src/lib/data-grid/directives/data-grid-col-sort.directive.ts

@@ -0,0 +1,8 @@
+import {Directive, TemplateRef} from '@angular/core';
+
+@Directive({
+  selector: '[cdkDataGridColSort]'
+})
+export class DataGridColSortDirective {
+  constructor(public template: TemplateRef<any>) { }
+}

projects/openharbor/ngx-data-cdk-ui/src/lib/data-grid/directives/data-grid-col.directive.ts

@@ -0,0 +1,19 @@
+import {ContentChild, Directive, Input} from '@angular/core';
+import {DataGridColHeaderDirective} from './data-grid-col-header.directive';
+import {DataGridCellDirective} from './data-grid-cell.directive';
+import {DataGridCellFilterDirective} from './data-grid-cell-filter.directive';
+import {DataGridColSortDirective} from './data-grid-col-sort.directive';
+
+@Directive({
+  selector: '[cdkDataGridCol]'
+})
+export class DataGridColDirective {
+  @Input('psDataGridCol') columnName: string;
+
+  @ContentChild(DataGridColHeaderDirective) headerTemplate: DataGridColHeaderDirective;
+  @ContentChild(DataGridCellDirective) cellTemplate: DataGridCellDirective;
+  @ContentChild(DataGridCellFilterDirective) filterTemplate: DataGridCellFilterDirective;
+  @ContentChild(DataGridColSortDirective) sortTemplate: DataGridColSortDirective;
+
+  constructor() { }
+}

projects/openharbor/ngx-data-cdk-ui/src/lib/data-grid/directives/data-grid-footer.directive.ts

@@ -1,10 +1,8 @@
 import {Directive, TemplateRef} from '@angular/core';
 
 @Directive({
-  selector: '[psDataGridFooter]'
+  selector: '[cdkDataGridFooter]'
 })
 export class DataGridFooterDirective {
-
   constructor(public template: TemplateRef<any>) { }
-
 }

projects/openharbor/ngx-data-cdk-ui/src/lib/data-grid/directives/data-grid-header.directive.ts

@@ -1,10 +1,8 @@
 import {Directive, TemplateRef} from '@angular/core';
 
 @Directive({
-  selector: '[psDataGridHeader]'
+  selector: '[cdkDataGridHeader]'
 })
 export class DataGridHeaderDirective {
-
   constructor(public template: TemplateRef<any>) { }
-
 }

projects/openharbor/ngx-data-cdk-ui/src/lib/data-grid/directives/data-grid-loader.directive.ts

@@ -1,10 +1,8 @@
 import {Directive, TemplateRef} from '@angular/core';
 
 @Directive({
-  selector: '[psDataGridLoader]'
+  selector: '[cdkDataGridLoader]'
 })
 export class DataGridLoaderDirective {
-
   constructor(public template: TemplateRef<any>) { }
-
 }

projects/openharbor/ngx-data-cdk-ui/src/lib/ds-command/directives/ds-command-content.directive.ts

@@ -1,10 +1,8 @@
 import {Directive, TemplateRef} from '@angular/core';
 
 @Directive({
-  selector: '[psDsCommandContent]'
+  selector: '[cdkDsCommandContent]'
 })
 export class DsCommandContentDirective {
-
   constructor(public template: TemplateRef<any>) { }
-
 }

projects/openharbor/ngx-data-cdk-ui/src/lib/ds-command/directives/ds-command-error.directive.ts

@@ -1,10 +1,8 @@
 import {Directive, TemplateRef} from '@angular/core';
 
 @Directive({
-  selector: '[psDsCommandError]'
+  selector: '[cdkDsCommandError]'
 })
 export class DsCommandErrorDirective {
-
   constructor(public template: TemplateRef<any>) { }
-
 }

projects/openharbor/ngx-data-cdk-ui/src/lib/ds-command/directives/ds-command-footer.directive.ts

@@ -1,10 +1,8 @@
 import {Directive, TemplateRef} from '@angular/core';
 
 @Directive({
-  selector: '[psDsCommandFooter]'
+  selector: '[cdkDsCommandFooter]'
 })
 export class DsCommandFooterDirective {
-
   constructor(public template: TemplateRef<any>) { }
-
 }

projects/openharbor/ngx-data-cdk-ui/src/lib/ds-command/directives/ds-command-no-command.directive.ts

@@ -1,10 +1,8 @@
 import {Directive, TemplateRef} from '@angular/core';
 
 @Directive({
-  selector: '[psDsCommandNoCommand]'
+  selector: '[cdkDsCommandNoCommand]'
 })
 export class DsCommandNoCommandDirective {
-
   constructor(public template: TemplateRef<any>) { }
-
 }

projects/openharbor/ngx-data-cdk-ui/src/lib/ds-command/directives/ds-command-submit.directive.ts

@@ -0,0 +1,8 @@
+import {Directive, ElementRef} from '@angular/core';
+
+@Directive({
+  selector: '[cdkDsCommandSubmit]'
+})
+export class DsCommandSubmitDirective {
+  constructor(public element: ElementRef) { }
+}

projects/openharbor/ngx-data-cdk-ui/src/lib/ds-command/directives/ds-command-validation.directive.ts

@@ -1,10 +1,8 @@
 import {Directive, TemplateRef} from '@angular/core';
 
 @Directive({
-  selector: '[psDsCommandValidation]'
+  selector: '[cdkDsCommandValidation]'
 })
 export class DsCommandValidationDirective {
-
   constructor(public template: TemplateRef<any>) { }
-
 }

projects/openharbor/ngx-data-cdk-ui/src/lib/ds-command/ds-command.component.html

@@ -0,0 +1,29 @@
+<ng-container *ngIf="command; else noCommand">
+  <ng-container *ngIf="hasContent" [ngTemplateOutlet]="contentTemplate"
+                [ngTemplateOutletContext]="{ $implicit: command, loading: isLoading }">
+  </ng-container>
+
+  <ng-container *ngIf="lastValidationResult">
+    <ng-container *ngIf="hasValidationTemplate" [ngTemplateOutlet]="validationTemplate"
+                  [ngTemplateOutletContext]="{ $implicit: lastValidationResult }">
+    </ng-container>
+  </ng-container>
+
+  <ng-container *ngIf="lastErrorMessage && errorContent && errorContent.template">
+    <ng-container [ngTemplateOutlet]="errorContent.template"
+                  [ngTemplateOutletContext]="{ $implicit: lastErrorMessage }">
+    </ng-container>
+  </ng-container>
+
+  <ng-container *ngIf="hasFooterTemplate" [ngTemplateOutlet]="footerTemplate"
+                [ngTemplateOutletContext]="{ $implicit: command, loading: isLoading }">
+  </ng-container>
+</ng-container>
+
+
+<ng-template #noCommand>
+  <ng-container *ngIf="noCommandContent && noCommandContent.template">
+    <ng-container [ngTemplateOutlet]="noCommandContent.template">
+    </ng-container>
+  </ng-container>
+</ng-template>

projects/openharbor/ngx-data-cdk-ui/src/lib/ds-command/ds-command.component.ts

@@ -1,5 +1,16 @@
-import { Component, ContentChild, ContentChildren, EventEmitter, HostListener, Input, OnDestroy, OnInit, Output, QueryList } from '@angular/core';
+import {
-import { IDataSource, IDataSourceValidationError } from '@poweredsoft/data';
+  Component,
+  ContentChild,
+  ContentChildren,
+  EventEmitter,
+  HostListener,
+  Input,
+  OnDestroy,
+  OnInit,
+  Output,
+  QueryList
+} from '@angular/core';
+import {IDataSource} from '@poweredsoft/data';
 import {Subscription} from 'rxjs';
 import {finalize} from 'rxjs/operators';
 import {DsCommandContentDirective} from './directives/ds-command-content.directive';
@@ -16,27 +27,27 @@ export interface DsCommandPropertyError
 }
 
 @Component({
-  selector: 'ps-ds-command, [psDsCommand]',
+  selector: 'cdk-ds-command, [cdkDsCommand]',
   templateUrl: './ds-command.component.html',
   styleUrls: ['./ds-command.component.scss']
 })
 export class DsCommandComponent implements OnInit, OnDestroy {
-
   private _refreshOnSuccess: boolean = true;
 
   @Input() params: any;
   @Input() dataSource: IDataSource<any>;
   @Input() name: string;
   @Input() model: any;
+  @Input() resolveCommand: boolean;
+
   @Input() set refreshOnSuccess(val: boolean) {
     this._refreshOnSuccess = val;
   }
+
   get refreshOnSuccess() {
     return this._refreshOnSuccess;
   }
 
-  @Input() resolveCommand: boolean;
-
   @Output() success = new EventEmitter<any>();
   @Output() loading = new EventEmitter<boolean>();
   @Output() commandChange = new EventEmitter<any>();
@@ -97,10 +108,6 @@ export class DsCommandComponent implements OnInit, OnDestroy {
     return this.commandContent.template;
   }
 
-  constructor() {
-
-  }
-  
   clearValidationError() {
     this.lastValidationResult = null;
   }
@@ -115,7 +122,6 @@ export class DsCommandComponent implements OnInit, OnDestroy {
   }
 
   ngOnInit(): void {
-
     this._validationErrorSubscription = this.dataSource
       .validationError$.subscribe(validationResult => {
         this.lastValidationResult = Object.keys(validationResult.errors).reduce<DsCommandPropertyError[]>((prev, attr) => {
@@ -169,7 +175,6 @@ export class DsCommandComponent implements OnInit, OnDestroy {
   }
 
   execute() {
-
     // secure from double send.
     if (this._loading)
       return;
@@ -197,5 +202,4 @@ export class DsCommandComponent implements OnInit, OnDestroy {
   get isLoading() {
     return this._loading;
   }
-
 }

projects/openharbor/ngx-data-cdk-ui/src/lib/ds-command/ds-command.module.ts

@@ -0,0 +1,19 @@
+import {NgModule} from '@angular/core';
+import {CommonModule} from '@angular/common';
+import {DsCommandComponent} from './ds-command.component';
+import {DsCommandContentDirective} from './directives/ds-command-content.directive';
+import {DsCommandSubmitDirective} from './directives/ds-command-submit.directive';
+import {DsCommandValidationDirective} from './directives/ds-command-validation.directive';
+import {DsCommandFooterDirective} from './directives/ds-command-footer.directive';
+import {DsCommandErrorDirective} from './directives/ds-command-error.directive';
+import {DsCommandNoCommandDirective} from './directives/ds-command-no-command.directive';
+
+
+@NgModule({
+  declarations: [DsCommandComponent, DsCommandContentDirective, DsCommandSubmitDirective, DsCommandValidationDirective, DsCommandFooterDirective, DsCommandErrorDirective, DsCommandNoCommandDirective],
+  imports: [
+    CommonModule
+  ],
+  exports: [DsCommandComponent, DsCommandContentDirective, DsCommandSubmitDirective, DsCommandValidationDirective, DsCommandFooterDirective, DsCommandErrorDirective, DsCommandNoCommandDirective]
+})
+export class DsCommandModule { }

projects/openharbor/ngx-data-cdk-ui/src/lib/ds-pager/ds-pager.component.html

@@ -0,0 +1,23 @@
+<ul>
+  <li class="ds-pager-first" (click)="first()">
+    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 19l-7-7 7-7m8 14l-7-7 7-7" />
+    </svg>
+  </li>
+  <li class="ds-pager-previous" (click)="previous()">
+    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
+    </svg>
+  </li>
+  <li class="ds-pager-page" [class.ds-pager-current]="page == pr" *ngFor="let pr of pageRanges" (click)="page = pr">{{ pr }}</li>
+  <li class="ds-pager-next" (click)="next()">
+    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
+    </svg>
+  </li>
+  <li class="ds-pager-last" (click)="last()">
+    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 5l7 7-7 7M5 5l7 7-7 7" />
+    </svg>
+  </li>
+</ul>

projects/openharbor/ngx-data-cdk-ui/src/lib/ds-pager/ds-pager.component.scss

@@ -0,0 +1,19 @@
+:host {
+  ul {
+    list-style: none;
+    display: flex;
+  }
+
+  li {
+    padding: 4px 2px;
+  }
+
+  li.ds-pager-current {
+    color: blue;
+  }
+
+  svg {
+    height: 15px;
+    width: 15px;
+  }
+}

projects/openharbor/ngx-data-cdk-ui/src/lib/ds-pager/ds-pager.component.ts

@@ -3,7 +3,7 @@ import { IDataSource, IQueryExecutionGroupResult, IQueryExecutionResult } from '
 import {Subscription} from 'rxjs';
 
 @Component({
-  selector: 'ps-ds-pager',
+  selector: 'cdk-ds-pager',
   templateUrl: './ds-pager.component.html',
   styleUrls: ['./ds-pager.component.scss']
 })
@@ -38,10 +38,6 @@ export class DsPagerComponent implements OnInit, OnDestroy {
   public latestResult: IQueryExecutionResult<any> & IQueryExecutionGroupResult<any> = null;
   private dataSubscription: Subscription;
 
-  constructor() {
-
-  }
-
   ngOnInit(): void {
     this.dataSubscription = this.dataSource.data$.subscribe(result => {
       this.latestResult = result;

projects/openharbor/ngx-data-cdk-ui/src/lib/ds-search/ds-search.component.html

@@ -0,0 +1,7 @@
+<form (submit)="applySearch()">
+  <div [ngClass]="classes">
+    <input type="search" (onSearch)="onSearch()" [placeholder]="finalSearchText" [ngClass]="searchClasses"
+           [(ngModel)]="filterValue" [ngModelOptions]="{standalone: true}">
+    <button type="submit" [ngClass]="submitButtonClasses">{{ finalSearchText }}</button>
+  </div>
+</form>

projects/openharbor/ngx-data-cdk-ui/src/lib/ds-search/ds-search.component.ts

@@ -2,12 +2,11 @@ import { Component, Input, OnInit } from '@angular/core';
 import {FilterType, ICompositeFilter, IDataSource, ISimpleFilter} from '@poweredsoft/data';
 
 @Component({
-  selector: 'ps-ds-search',
+  selector: 'cdk-ds-search',
   templateUrl: './ds-search.component.html',
   styleUrls: ['./ds-search.component.scss']
 })
 export class DsSearchComponent implements OnInit {
-
   @Input() dataSource: IDataSource<any>;
   @Input() filterType: string;
   @Input() filterPaths: string[];

projects/openharbor/ngx-data-cdk-ui/src/lib/ds-validation-error/ds-validation-error.component.html

@@ -0,0 +1,4 @@
+<ng-container *ngFor="let error of latestErrors; let isLast=last">
+  {{ error }}
+  <br *ngIf="!isLast" />
+</ng-container>

projects/openharbor/ngx-data-cdk-ui/src/lib/ds-validation-error/ds-validation-error.component.ts

@@ -3,27 +3,24 @@ import { IDataSource } from '@poweredsoft/data';
 import {Subscription} from 'rxjs';
 
 @Component({
-  selector: 'ps-ds-validation-error',
+  selector: 'cdk-ds-validation-error',
   templateUrl: './ds-validation-error.component.html',
   styleUrls: ['./ds-validation-error.component.scss']
 })
 export class DsValidationErrorComponent implements OnInit, OnDestroy {
-
   @Input() dataSource: IDataSource<any>;
   @Input() field: string;
+
   validationErrorsSub: Subscription;
   commandStartedSub: Subscription;
   latestErrors: string[] = [];
 
-  constructor() { }
-
   ngOnDestroy(): void {
     this.validationErrorsSub?.unsubscribe();
     this.commandStartedSub?.unsubscribe();
   }
 
   ngOnInit(): void {
-    
     this.commandStartedSub = this.dataSource.commandStarted$.subscribe(e => {
       this.latestErrors = [];
     });
@@ -35,7 +32,5 @@ export class DsValidationErrorComponent implements OnInit, OnDestroy {
           return prev.concat(validationErrors.errors[current]);
         }, []);
     });
-
   }
-
 }

projects/openharbor/ngx-data-cdk-ui/src/lib/ds-validation-error/ds-validation-error.module.ts

@@ -3,7 +3,6 @@ import { CommonModule } from '@angular/common';
 import {DsValidationErrorComponent} from './ds-validation-error.component';
 
 
-
 @NgModule({
   declarations: [DsValidationErrorComponent],
   imports: [

projects/openharbor/ngx-data-cdk-ui/src/lib/list-view/directives/list-view-footer.directive.ts

@@ -1,10 +1,8 @@
 import { Directive, TemplateRef } from '@angular/core';
 
 @Directive({
-  selector: '[psListViewFooter]'
+  selector: '[cdkListViewFooter]'
 })
 export class ListViewFooterDirective {
-
   constructor(public template: TemplateRef<any>) { }
-
 }

projects/openharbor/ngx-data-cdk-ui/src/lib/list-view/directives/list-view-header.directive.ts

@@ -1,10 +1,8 @@
 import {Directive, TemplateRef} from '@angular/core';
 
 @Directive({
-  selector: '[psListViewHeader]'
+  selector: '[cdkListViewHeader]'
 })
 export class ListViewHeaderDirective {
-
   constructor(public template: TemplateRef<any>) { }
-
 }

projects/openharbor/ngx-data-cdk-ui/src/lib/list-view/directives/list-view-item.directive.ts

@@ -1,10 +1,8 @@
 import {Directive, TemplateRef} from '@angular/core';
 
 @Directive({
-  selector: '[psListViewItem]'
+  selector: '[cdkListViewItem]'
 })
 export class ListViewItemDirective {
-
   constructor(public template: TemplateRef<any>) { }
-
 }

projects/openharbor/ngx-data-cdk-ui/src/lib/list-view/directives/list-view-separator.directive.ts

@@ -1,10 +1,8 @@
 import { Directive, TemplateRef } from '@angular/core';
 
 @Directive({
-  selector: '[psDataGridColSort]'
+  selector: '[cdkListViewSeparator]'
 })
-export class DataGridColSortDirective {
+export class ListViewSeparatorDirective {
-
   constructor(public template: TemplateRef<any>) { }
-
 }

projects/openharbor/ngx-data-cdk-ui/src/lib/list-view/list-view.module.ts

@@ -0,0 +1,23 @@
+import {NgModule} from '@angular/core';
+import {CommonModule} from '@angular/common';
+import {ListViewComponent} from './list-view/list-view.component';
+import {ListViewItemDirective} from './directives/list-view-item.directive';
+import {ListViewHeaderDirective} from './directives/list-view-header.directive';
+import {ListViewFooterDirective} from './directives/list-view-footer.directive';
+import {ListViewSeparatorDirective} from './directives/list-view-separator.directive';
+
+
+@NgModule({
+  declarations: [ListViewComponent, ListViewItemDirective, ListViewHeaderDirective, ListViewFooterDirective, ListViewSeparatorDirective],
+  imports: [
+    CommonModule
+  ],
+  exports: [
+    ListViewComponent,
+    ListViewItemDirective,
+    ListViewHeaderDirective,
+    ListViewFooterDirective,
+    ListViewSeparatorDirective
+  ]
+})
+export class ListViewModule { }

projects/openharbor/ngx-data-cdk-ui/src/lib/list-view/list-view/list-view.component.ts

@@ -1,17 +1,16 @@
-import { Component, OnInit, Input, OnDestroy, ContentChildren, QueryList, ContentChild } from '@angular/core';
+import {Component, ContentChild, Input, OnDestroy, OnInit} from '@angular/core';
-import { IDataSource, IQueryExecutionResult, IQueryExecutionGroupResult } from '@poweredsoft/data';
+import {IDataSource, IQueryExecutionGroupResult, IQueryExecutionResult} from '@poweredsoft/data';
 import {Subscription} from 'rxjs';
 import {ListViewItemDirective} from '../directives/list-view-item.directive';
 import {ListViewHeaderDirective} from '../directives/list-view-header.directive';
 import {ListViewFooterDirective} from '../directives/list-view-footer.directive';
 
 @Component({
-  selector: 'ps-list-view',
+  selector: 'cdk-list-view',
   templateUrl: './list-view.component.html',
   styleUrls: ['./list-view.component.scss']
 })
 export class ListViewComponent implements OnInit, OnDestroy {
-
   @Input() dataSource: IDataSource<any>;
   @Input() noRecordsText: string;
   @Input() noRecordClasses: any;
@@ -27,10 +26,6 @@ export class ListViewComponent implements OnInit, OnDestroy {
   @ContentChild(ListViewFooterDirective) viewFooter: ListViewFooterDirective;
   //@ContentChildren(ViewDataDirective) viewData: QueryList<ViewDataDirective>;
 
-  constructor() { 
-  
-  }
-
   ngOnDestroy(): void {
     this._dataSubscription.unsubscribe();
   }

projects/openharbor/ngx-data-cdk-ui/src/lib/view/directives/view-content.directive.ts

@@ -1,10 +1,8 @@
 import {Directive, TemplateRef} from '@angular/core';
 
 @Directive({
-  selector: '[psViewContent]'
+  selector: '[cdkDsViewContent]'
 })
 export class ViewContentDirective {
-
   constructor(public template: TemplateRef<any>) { }
-
 }