code cleanup, names refactoring

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

@@ -1,7 +1,7 @@
 {
   "$schema": "../../../node_modules/ng-packagr/ng-package.schema.json",
-  "dest": "../../../dist/poweredsoft/ng-select",
+  "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.service.ts

@@ -9,23 +9,23 @@ export class CommandModalService {
   }
 
   spawn<TModel>(options: {
-      dataSource: IDataSource<TModel>
-      command: string,
-      model: TModel,
-      template: TemplateRef<any>,
-      commandTitle?: string,
-      refreshOnSuccess?: boolean,
-      commandText?: string,
-      cancelText?: string,
-      animated?: boolean,
-      btnClass?: string,
-      modalSize?: string,
-      disableValidationSummary?: boolean,
-      backdrop?: boolean,
-      ignoreBackdropClick?: boolean,
-      params?: any,
-      success?: EventEmitter<any>
-    }) {
+    dataSource: IDataSource<TModel>
+    command: string,
+    model: TModel,
+    template: TemplateRef<any>,
+    commandTitle?: string,
+    refreshOnSuccess?: boolean,
+    commandText?: string,
+    cancelText?: string,
+    animated?: boolean,
+    btnClass?: string,
+    modalSize?: string,
+    disableValidationSummary?: boolean,
+    backdrop?: boolean,
+    ignoreBackdropClick?: boolean,
+    params?: any,
+    success?: EventEmitter<any>
+  }) {
     options.dataSource.resolveCommandModelByName({
       command: options.command,
       model: options.model,

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,17 +1,16 @@
-import { Component, OnInit, TemplateRef, OnDestroy, EventEmitter } from '@angular/core';
-import { IDataSource } from '@poweredsoft/data';
-import { BsModalRef } from 'ngx-bootstrap/modal';
-import { finalize} from 'rxjs/operators';
-import { Subscription } from 'rxjs';
-import { NgForm } from '@angular/forms';
+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';
+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 { IDataSource } from '@poweredsoft/data';
-import { finalize } from 'rxjs/operators';
-import { ConfirmModalService } from '../../confirm-modal/confirm-modal.service';
+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;
@@ -51,9 +49,9 @@ export class CommandDirective {
             this.failure.emit(commandError);
           }
         );
-      }, resolveCommandError => {
-        this.failure.emit(resolveCommandError);
-      });
+    }, resolveCommandError => {
+      this.failure.emit(resolveCommandError);
+    });
   }
 
 

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 { BsModalRef, BsModalService } from 'ngx-bootstrap/modal';
-import { Observer } from 'rxjs';
+import {Component, Inject, OnInit} from '@angular/core';
+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}`
   }
@@ -39,11 +30,10 @@ export class ConfirmModalComponent implements OnInit {
     this.observer.next(true);
     this.observer.complete();
   }
- 
+
   decline(): void {
     this.modelRef.hide();
     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

@@ -3,33 +3,33 @@
     <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 *ngIf="!isRangeFilter" 
-                 type="text"
-                 placeholder="Datepicker"
-                 class="form-control"
-                 bsDatepicker [(ngModel)]="filterValue" [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 *ngIf="!isRangeFilter"
+               type="text"
+               placeholder="Datepicker"
+               class="form-control"
+               bsDatepicker [(ngModel)]="filterValue" [ngModelOptions]="{standalone: true}">
+      </div>
+
       <div class="row mt-1 mb-1">
         <input *ngIf="isRangeFilter" type="text"
-        placeholder="Daterangepicker"
-        class="form-control"
-        bsDaterangepicker [(ngModel)]="filterValue" [ngModelOptions]="{standalone: true}">       
-    </div>
-    
+               placeholder="Daterangepicker"
+               class="form-control"
+               bsDaterangepicker [(ngModel)]="filterValue" [ngModelOptions]="{standalone: true}">
+      </div>
+
       <div class="row mt-2">
         <button class="btn btn-primary mr-1" type="submit" >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>
-  </div>
+    </div>
   </form>
 
-  
+
 </ng-template>
 
 <!-- <button [popover]="popTemplate" class="btn btn-default" [(isOpen)]="filterPopUpOpened" [outsideClick]="true" #pop="bs-popover">
@@ -75,8 +75,8 @@
 </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"
-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">
+<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>
  <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
@@ -84,34 +84,34 @@ viewBox="0 0 477.875 477.875" style="enable-background:new 0 0 477.875 477.875;"
    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>
-<g>
+  <g>
 </g>
-<g>
+  <g>
 </g>
-<g>
+  <g>
 </g>
-<g>
+  <g>
 </g>
-<g>
+  <g>
 </g>
-</svg>
+</svg>

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

@@ -1,37 +1,34 @@
-import { Component, OnInit, Input, Output, EventEmitter} from '@angular/core';
-import { IDataSource, ISimpleFilter, ICompositeFilter, IFilter,FilterType } from '@poweredsoft/data';
-
+import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
+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() dataSource : IDataSource<any>;
   @Input() filterType: string;
   @Output() filterTypeChanged: EventEmitter<string> = new EventEmitter<string>();
 
-  filterPopUpOpened: boolean = false; 
+  filterPopUpOpened: boolean = false;
   isFiltering: boolean;
-  filterValue: Date = null; 
+  filterValue: Date = null;
   filterTypes = [
     {key:'Equal', value: 'Equal'},
     {key:'Greater Than', value: 'GreaterThan'},
-    {key:'Less Than', value: 'LessThan'},    
+    {key:'Less Than', value: 'LessThan'},
     {key:'Greater Than Equal', value: 'GreaterThanOrEqual'},
-    {key:'Less Than Equal', value: 'LessThanOrEqual'},    
+    {key:'Less Than Equal', value: 'LessThanOrEqual'},
     {key:'Range', value: FilterType.COMPOSITE }
   ];
 
-
   bsInlineValue = new Date();
   bsInlineRangeValue: Date[];
   maxDate = new Date();
- 
+
   constructor() {
     this.maxDate.setDate(this.maxDate.getDate() + 7);
     this.bsInlineRangeValue = [this.bsInlineValue, this.maxDate];
@@ -45,23 +42,23 @@ export class DataSourceDatetimeFilterComponent implements OnInit {
     if (!this.filterType)
       this.filterType = 'Equal';
   }
+
   showTooltip(){
     return "Filter by "+ this.path;
   }
+
   clearFilter() {
-    
     this.filterValue = null;
     this.isFiltering = false;
-    const existingFilter = this.dataSource.filters.find(t => (t as ISimpleFilter).path == this.path) as ISimpleFilter;    
+    const existingFilter = this.dataSource.filters.find(t => (t as ISimpleFilter).path == this.path) as ISimpleFilter;
     if (existingFilter) {
       this.dataSource.query({
         page: 1,
         filters: this.dataSource.filters.filter(t => t != existingFilter)
       })
     }
-    
-    if (this.isRangeFilter){
-     
+
+    if (this.isRangeFilter) {
       let existingFilter2 = this.dataSource.filters.find(t=> t.type == 'Composite');
       this.dataSource.query({
         page: 1,
@@ -69,26 +66,28 @@ export class DataSourceDatetimeFilterComponent implements OnInit {
       })
     }
   }
+
   applyFilter(){
 
     this.isFiltering = true;
     const filters = this.dataSource.filters;
     let compositeF: any = null;
     let freshFilter: ISimpleFilter = null;
-    let startDate:Date;
-    let endDate:Date;
+    let startDate: Date;
+    let endDate: Date;
 
     // TODO create filter here.
-    if(Array.isArray(this.filterValue)){ //check if it's a dateRange value 
+    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: [
           {
             path: this.path,
             type: 'GREATERTHANOREQUAL',
-            value: startDate, 
+            value: startDate,
           },
           {
             and: true,
@@ -97,45 +96,43 @@ export class DataSourceDatetimeFilterComponent implements OnInit {
             value: endDate,
           }
         ]
-      }
-     
-    }else{
+      };
+    } 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;
-          return compositeFilter.filters && compositeFilter.filters.length 
-            && compositeFilter[0].path == this.path;
-        } else {
-          return (t as ISimpleFilter).path == this.path;
-        }
+      if (t.type == 'COMPOSITE') {
+        const compositeFilter = t as ICompositeFilter;
+        return compositeFilter.filters && compositeFilter.filters.length
+          && compositeFilter[0].path == this.path;
+      } else {
+        return (t as ISimpleFilter).path == this.path;
+      }
     });
 
     if (existingFilterIndex == -1) {
       // create it.
-      if(compositeF){                        
+      if(compositeF) {
         filters.push(compositeF);
-      }else{
+      } else {
         filters.push(freshFilter);
       }
-     
+
     } else {
       // replace it.
-      if(compositeF){
+      if (compositeF) {
         filters[existingFilterIndex] = compositeF;
-      }else{
+      } else {
         filters[existingFilterIndex] = freshFilter;
       }
     }
@@ -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,35 +1,27 @@
-import { Component, OnInit, Input, Output, EventEmitter, ElementRef, ViewChild } from '@angular/core';
-import { IDataSource,IFilter, ISimpleFilter } from '@poweredsoft/data';
+import {Component, Input} from '@angular/core';
+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 {
-  @Input() dataSource : IDataSource<any>;   
-  @Input() path:string;
- 
+export class DataSourceNumberFilterComponent {
+  @Input() dataSource : IDataSource<any>;
+  @Input() path: string;
+
   filterType: string = 'Equal';
-  filterValue: number = 0; 
+  filterValue: number = 0;
   isFiltering: boolean;
-  filterTypes = [    
-    {key:'Equals', value: 'Equal'}, 
+  filterIsOpened: boolean = false;
+  filterTypes = [
+    {key:'Equals', value: 'Equal'},
     {key:'Greater Than', value: 'GreaterThan'},
-    {key:'Less Than', value: 'LessThan'},    
+    {key:'Less Than', value: 'LessThan'},
     {key:'Greater Than Equal', value: 'GreaterThanOrEqual'},
-    {key:'Less Than Equal', value: 'LessThanOrEqual'},    
+    {key:'Less Than Equal', value: 'LessThanOrEqual'},
   ];
-  filterIsOpenned: boolean = false;
-
-  constructor() { }
- 
-
-  ngOnInit(): void {
-
-    
-  }
 
   clearFilter() {
     this.filterValue = 0;
@@ -54,7 +46,7 @@ export class DataSourceNumberFilterComponent implements OnInit {
       filters.push(<ISimpleFilter>{
         and: true,
         type: this.filterType,
-        path: this.path, 
+        path: this.path,
         value: this.filterValue.toString()
       })
     }

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

@@ -1,25 +1,24 @@
 <ng-template #popTemplate>
+  <form (ngSubmit)="applyFilter(pop)" novalidate>
 
-    <form (ngSubmit)="applyFilter(pop)" 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="text" class="form-control" placeholder="Value" aria-label="Username"
-            aria-describedby="basic-addon1" [(ngModel)]="filterValue" [ngModelOptions]="{standalone: true}" >
-            </div>
-            
-            <button class="btn btn-primary mr-1" type="submit">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>
+    <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="text" class="form-control" placeholder="Value" aria-label="Username"
+               aria-describedby="basic-addon1" [(ngModel)]="filterValue" [ngModelOptions]="{standalone: true}" >
+      </div>
+
+      <button class="btn btn-primary mr-1" type="submit">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>
 
 <!-- <button [popover]="popTemplate" class="btn btn-default" [(isOpen)]="filterIsOpenned"  [outsideClick]="true" #pop="bs-popover">
@@ -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
@@ -74,34 +73,34 @@ viewBox="0 0 477.875 477.875" style="enable-background:new 0 0 477.875 477.875;"
        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>
-<g>
+  <g>
 </g>
-<g>
+  <g>
 </g>
-<g>
+  <g>
 </g>
-<g>
+  <g>
 </g>
-<g>
+  <g>
 </g>
-</svg>
+</svg>

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 { IDataSource} from '@poweredsoft/data';
-import { ISimpleFilter } from '@poweredsoft/data';
-import { PopoverDirective } from 'ngx-bootstrap/popover';
-
+import {Component, Input} from '@angular/core';
+import {IDataSource, 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;
 
-  @Input() dataSource : IDataSource<any>;   
-  @Input() path:string;
- 
   filterType: string = 'Contains';
-  filterValue: string = null; 
+  filterValue: string = null;
   isFiltering: boolean;
+  filterIsOpened: boolean = false;
+
   filterTypes = [
-    {key:'Contains', value: 'Contains'}, 
-    {key:'Equals', value: 'Equal'}, 
+    {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 = '';
@@ -55,7 +46,7 @@ export class DataSourceTextFilterComponent implements OnInit {
       filters.push(<ISimpleFilter>{
         and: true,
         type: this.filterType,
-        path: this.path, 
+        path: this.path,
         value: this.filterValue
       })
     }
@@ -65,7 +56,7 @@ export class DataSourceTextFilterComponent implements OnInit {
       page: 1
     })
 
-    if (pop) 
+    if (pop)
       pop.hide();
   }
 

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.scss

@@ -1,16 +1,16 @@
 :host span.dropdown-toggle.sort-desc{
-    transform: rotate(180deg);
-    display: inline-block;
+  transform: rotate(180deg);
+  display: inline-block;
 }
 
 :host span{
-    margin: 10px;
+  margin: 10px;
 }
 
 :host .not-sorting-state{
-    opacity: 0.3;
+  opacity: 0.3;
 }
 
 :host .not-sorting-state:hover{
-    opacity: 1;
-}
+  opacity: 1;
+}

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 { IDataSource } from '@poweredsoft/data';
+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; 
-  
-  
+  @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 { 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';
+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';
 
 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;
@@ -32,14 +31,10 @@ export class FormGroupCommandModalDirective {
   @Input() backdrop: boolean;
   @Input() ignoreBackdropClick: boolean;
   @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({
@@ -73,7 +68,7 @@ export class FormGroupCommandModalDirective {
           commandModel:commandModel,
           successEmitter: this.success
         };
-      
+
         this.modalService.show(FormGroupCommandModalComponent, {
           animated: this.animated === undefined ? true : this.animated,
           initialState,
@@ -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 { 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 {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} 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;
@@ -23,16 +23,12 @@ export class FormGroupCommandModalComponent implements OnInit, OnDestroy {
   commandText: string;
   cancelText: string;
   errorMessage: string;
-  commandModel:any; 
+  commandModel: any;
   successEmitter: EventEmitter<any>;
 
   private _notifyMessage: Subscription;
   private _validationError: Subscription;
 
-
-
-  constructor(public modalRef: BsModalRef) { }
-
   ngOnDestroy(): void {
     this._notifyMessage.unsubscribe();
     this._validationError.unsubscribe();
@@ -41,10 +37,10 @@ export class FormGroupCommandModalComponent implements OnInit, OnDestroy {
   ngOnInit(): void {
     this.errorMessage = null;
     this._notifyMessage = this.dataSource.notifyMessage$.subscribe(message => {
-      
+
     });
-   
-    this._validationError = this.dataSource.validationError$.subscribe(validatorErrors => {      
+
+    this._validationError = this.dataSource.validationError$.subscribe(validatorErrors => {
       let validationSummary = '';
       Object.getOwnPropertyNames(validatorErrors.errors).forEach(property => {
         const errors = validatorErrors.errors[property].join('\n');
@@ -58,11 +54,11 @@ export class FormGroupCommandModalComponent implements OnInit, OnDestroy {
     // this.errorMessage = null;
     // if (!this.modelForm.valid)
     // {
-    //   this.errorMessage = 'Form is not valid, please enter all required fields';      
+    //   this.errorMessage = 'Form is not valid, please enter all required fields';
     //   return;
     // }
 
-    const finalModel = this.modelForm.value;  
+    const finalModel = this.modelForm.value;
     if(this.commandModel.id)
     {
       finalModel.id = this.commandModel.id;

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 { IDataSource } from '@poweredsoft/data';
-import { Subscription } from 'rxjs';
+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,7 +1,7 @@
 {
   "$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",
@@ -9,4 +9,4 @@
   "dependencies": {
     "tslib": "^1.10.0"
   }
-}
+}

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 { IQueryExecutionResult, IQueryExecutionGroupResult, IDataSource } 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';
+import {
+  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';
 
 @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 {
-
-  latestResult: IQueryExecutionResult<any> & IQueryExecutionGroupResult<any>;
-  loading:boolean;
+  @Inject(ChangeDetectorRef) private cdr!: ChangeDetectorRef;
 
   @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);
@@ -41,31 +48,24 @@ export class DataGridComponent implements OnInit, OnDestroy {
 
   get columns() {
     return this._columns;
-  }  
+  }
 
-  @Output() columnsChange:EventEmitter<string []> = new EventEmitter<string []>();
-
-  
+  @Output() columnsChange: EventEmitter<string []> = new EventEmitter<string []>();
 
   get noData() {
-    return !this.latestResult || this.latestResult.totalRecords == 0; 
+    return !this.latestResult || this.latestResult.totalRecords == 0;
   }
 
   get noRecordsDisplayText() {
     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,31 +74,29 @@ 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) 
+    if (ret && ret.sortTemplate)
       return ret.sortTemplate.template;
 
     return null;
   }
 
-  getFilterTemplate(columnName){
+  getFilterTemplate(columnName: string){
     const ret = this.getColumn(columnName);
-    if (ret && ret.filterTemplate) 
+    if (ret && ret.filterTemplate)
       return ret.filterTemplate.template;
 
     return null;
   }
 
   getColumn(columnName: string) {
-  
     if (!this.columnDefinitions)
       return null;
 
-    const ret = this.columnDefinitions.find(t => 
+    const ret = this.columnDefinitions.find(t =>
     {
       return t.columnName == columnName;
     });
@@ -109,35 +107,33 @@ export class DataGridComponent implements OnInit, OnDestroy {
 
   getColumnHeaderTemplate(columnName: string) {
     const ret = this.getColumn(columnName);
-    if (ret && ret.headerTemplate) 
+    if (ret && ret.headerTemplate)
       return ret.headerTemplate.template;
 
     return null;
-  } 
+  }
 
   getColumnCellTemplate(columnName: string) {
     const ret = this.getColumn(columnName);
-    if (ret && ret.cellTemplate) 
+    if (ret && ret.cellTemplate)
       return ret.cellTemplate.template;
 
     return null;
-  } 
+  }
 
   hasHeaderTemplate(columnName: string) {
-    return this.getColumnHeaderTemplate(columnName) ? true :false;
+    return this.getColumnHeaderTemplate(columnName) ? true : false;
   }
 
   hasCellTemplate(columnName: string) {
-    return this.getColumnCellTemplate(columnName) ? true :false;
+    return this.getColumnCellTemplate(columnName) ? true : false;
   }
 
   hasFilterTemplate(columnName: string) {
-    return this.getFilterTemplate(columnName) ? true :false;
+    return this.getFilterTemplate(columnName) ? true : false;
   }
 
   hasSortingTemplate(columnName: string) {
-    return this.getSortingTemplate(columnName) ? true :false;
+    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';
+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';
+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';
+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';
+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';
+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';
+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';
+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';
+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';
+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';
+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';
+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,13 +1,24 @@
-import { Component, ContentChild, ContentChildren, EventEmitter, HostListener, Input, OnDestroy, OnInit, Output, QueryList } from '@angular/core';
-import { IDataSource, IDataSourceValidationError } from '@poweredsoft/data';
-import { Subscription } from 'rxjs';
-import { finalize } from 'rxjs/operators';
-import { DsCommandContentDirective } from './directives/ds-command-content.directive';
-import { DsCommandErrorDirective } from './directives/ds-command-error.directive';
-import { DsCommandFooterDirective } from './directives/ds-command-footer.directive';
-import { DsCommandNoCommandDirective } from './directives/ds-command-no-command.directive';
-import { DsCommandSubmitDirective } from './directives/ds-command-submit.directive';
-import { DsCommandValidationDirective } from './directives/ds-command-validation.directive';
+import {
+  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';
+import {DsCommandErrorDirective} from './directives/ds-command-error.directive';
+import {DsCommandFooterDirective} from './directives/ds-command-footer.directive';
+import {DsCommandNoCommandDirective} from './directives/ds-command-no-command.directive';
+import {DsCommandSubmitDirective} from './directives/ds-command-submit.directive';
+import {DsCommandValidationDirective} from './directives/ds-command-validation.directive';
 
 export interface DsCommandPropertyError
 {
@@ -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) => {
@@ -164,12 +170,11 @@ export class DsCommandComponent implements OnInit, OnDestroy {
       .toArray()
       .find(t => t.element.nativeElement == element);
 
-    if (found != null) 
+    if (found != null)
       this.execute()
   }
 
   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

@@ -1,9 +1,9 @@
-import { Component, EventEmitter, Input, OnDestroy, OnInit, Output } from '@angular/core';
-import { IDataSource, IQueryExecutionGroupResult, IQueryExecutionResult } from '@poweredsoft/data';
-import { Subscription } from 'rxjs';
+import {Component, EventEmitter, Input, OnDestroy, OnInit, Output} from '@angular/core';
+import {IDataSource, IQueryExecutionGroupResult, IQueryExecutionResult} from '@poweredsoft/data';
+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-pager/ds-pager.module.ts

@@ -1,6 +1,6 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { DsPagerComponent } from './ds-pager.component';
+import {NgModule} from '@angular/core';
+import {CommonModule} from '@angular/common';
+import {DsPagerComponent} from './ds-pager.component';
 
 @NgModule({
   declarations: [DsPagerComponent],

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

@@ -1,13 +1,12 @@
-import { Component, Input, OnInit } from '@angular/core';
-import { FilterType, ICompositeFilter, IDataSource, ISimpleFilter } from '@poweredsoft/data';
+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

@@ -1,29 +1,26 @@
-import { Component, Input, OnDestroy, OnInit } from '@angular/core';
-import { IDataSource } from '@poweredsoft/data';
-import { Subscription } from 'rxjs';
+import {Component, Input, OnDestroy, OnInit} from '@angular/core';
+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

@@ -1,7 +1,6 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { DsValidationErrorComponent } from './ds-validation-error.component';
-
+import {NgModule} from '@angular/core';
+import {CommonModule} from '@angular/common';
+import {DsValidationErrorComponent} from './ds-validation-error.component';
 
 
 @NgModule({

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';
+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';
+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.html

@@ -1,21 +1,21 @@
 <ng-container [ngTemplateOutlet]="getViewHeaderTemplate()"></ng-container>
 <ng-container *ngIf="!noData else noResultTemplate">
-    <div [ngClass]="listViewClasses">
-        <ng-container *ngFor="let item of latestResult.data; let index = index; let first = first; let last = last; let odd = odd">
-            <ng-container [ngTemplateOutlet]="getViewItemTemplate()" [ngTemplateOutletContext]="{
+  <div [ngClass]="listViewClasses">
+    <ng-container *ngFor="let item of latestResult.data; let index = index; let first = first; let last = last; let odd = odd">
+      <ng-container [ngTemplateOutlet]="getViewItemTemplate()" [ngTemplateOutletContext]="{
                 $implicit: item,
                 index: index,
                 first: first,
                 last: last,
                 odd: odd
               }">
-            </ng-container>
-        </ng-container>
-    </div>
+      </ng-container>
+    </ng-container>
+  </div>
 </ng-container>
 <ng-container [ngTemplateOutlet]="getViewFooterTemplate()"></ng-container>
 
 
 <ng-template #noResultTemplate>
-    <div [ngClass]="noRecordClasses">{{noRecords}}</div>
-</ng-template>
+  <div [ngClass]="noRecordClasses">{{noRecords}}</div>
+</ng-template>

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 { IDataSource, IQueryExecutionResult, IQueryExecutionGroupResult } 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';
+import {Component, ContentChild, Input, OnDestroy, OnInit} from '@angular/core';
+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;
@@ -21,22 +20,18 @@ export class ListViewComponent implements OnInit, OnDestroy {
   loading:boolean;
 
   private _dataSubscription: Subscription;
-  
-   @ContentChild(ListViewItemDirective) viewItem: ListViewItemDirective;
-   @ContentChild(ListViewHeaderDirective) viewHeader: ListViewHeaderDirective;
-   @ContentChild(ListViewFooterDirective) viewFooter: ListViewFooterDirective;
-  //@ContentChildren(ViewDataDirective) viewData: QueryList<ViewDataDirective>;
 
-  constructor() { 
-  
-  }
+  @ContentChild(ListViewItemDirective) viewItem: ListViewItemDirective;
+  @ContentChild(ListViewHeaderDirective) viewHeader: ListViewHeaderDirective;
+  @ContentChild(ListViewFooterDirective) viewFooter: ListViewFooterDirective;
+  //@ContentChildren(ViewDataDirective) viewData: QueryList<ViewDataDirective>;
 
   ngOnDestroy(): void {
     this._dataSubscription.unsubscribe();
   }
 
   ngOnInit(): void {
-    this._dataSubscription = this.dataSource.data$.subscribe(newData => {      
+    this._dataSubscription = this.dataSource.data$.subscribe(newData => {
       this.latestResult = newData;
     });
   }

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

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

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

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

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

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

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

@@ -0,0 +1,25 @@
+<ng-container *ngIf="loading; else notLoading">
+  <ng-container *ngIf="viewLoading">
+    <ng-container [ngTemplateOutlet]="getViewLoadingTemplate()"></ng-container>
+  </ng-container>
+  <ng-container *ngIf="!viewLoading">
+    {{ finalLoadingText }}
+  </ng-container>
+</ng-container>
+
+<ng-template #notLoading>
+  <ng-container *ngIf="!noData else noResultTemplate">
+    <ng-container [ngTemplateOutlet]="getViewContentTemplate()"
+                  [ngTemplateOutletContext]="{$implicit: viewModel}">
+    </ng-container>
+  </ng-container>
+</ng-template>
+
+<ng-template #noResultTemplate>
+  <ng-container *ngIf="viewNoRecords">
+    <ng-container [ngTemplateOutlet]="getViewNoRecordsTemplate()"></ng-container>
+  </ng-container>
+  <ng-container *ngIf="!viewNoRecords">
+    <div [ngClass]="noRecordClasses">{{noRecords}}</div>
+  </ng-container>
+</ng-template>