diff --git a/projects/poweredsoft/ng-select/src/lib/ps-ng-select/not-found-template.directive.ts b/projects/poweredsoft/ng-select/src/lib/ps-ng-select/directives/not-found-template.directive.ts
similarity index 100%
rename from projects/poweredsoft/ng-select/src/lib/ps-ng-select/not-found-template.directive.ts
rename to projects/poweredsoft/ng-select/src/lib/ps-ng-select/directives/not-found-template.directive.ts
diff --git a/projects/poweredsoft/ng-select/src/lib/ps-ng-select/select-label-template.directive.ts b/projects/poweredsoft/ng-select/src/lib/ps-ng-select/directives/select-label-template.directive.ts
similarity index 70%
rename from projects/poweredsoft/ng-select/src/lib/ps-ng-select/select-label-template.directive.ts
rename to projects/poweredsoft/ng-select/src/lib/ps-ng-select/directives/select-label-template.directive.ts
index 55dc0a1..7c667a0 100644
--- a/projects/poweredsoft/ng-select/src/lib/ps-ng-select/select-label-template.directive.ts
+++ b/projects/poweredsoft/ng-select/src/lib/ps-ng-select/directives/select-label-template.directive.ts
@@ -1,4 +1,4 @@
-import { Directive, TemplateRef, Input } from '@angular/core';
+import { Directive, TemplateRef } from '@angular/core';
 
 @Directive({
   selector: '[psNgSelectLabel]'
diff --git a/projects/poweredsoft/ng-select/src/lib/ps-ng-select/select-option-template.directive.ts b/projects/poweredsoft/ng-select/src/lib/ps-ng-select/directives/select-option-template.directive.ts
similarity index 100%
rename from projects/poweredsoft/ng-select/src/lib/ps-ng-select/select-option-template.directive.ts
rename to projects/poweredsoft/ng-select/src/lib/ps-ng-select/directives/select-option-template.directive.ts
diff --git a/projects/poweredsoft/ng-select/src/lib/ps-ng-select/multi-select/multi-select.component.ts b/projects/poweredsoft/ng-select/src/lib/ps-ng-select/multi-select/multi-select.component.ts
index e45ecfc..c976dfa 100644
--- a/projects/poweredsoft/ng-select/src/lib/ps-ng-select/multi-select/multi-select.component.ts
+++ b/projects/poweredsoft/ng-select/src/lib/ps-ng-select/multi-select/multi-select.component.ts
@@ -1,11 +1,11 @@
 import { Component, OnInit, ContentChild, ViewChild, Input, Output, EventEmitter, ChangeDetectorRef, forwardRef, OnDestroy } from '@angular/core';
-import { SelectLabelTemplateDirective } from '../select-label-template.directive';
+import { SelectLabelTemplateDirective } from '../directives/select-label-template.directive';
 import { IDataSource, ISimpleFilter } from '@poweredsoft/data';
 import { Observable, Subject, Subscription } from 'rxjs';
 import { map, distinctUntilChanged, debounceTime } from 'rxjs/operators';
 import { NgSelectComponent as SelectComponent } from '@ng-select/ng-select';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
-import { SelectOptionTemplateDirective } from '../select-option-template.directive';
+import { SelectOptionTemplateDirective } from '../directives/select-option-template.directive';
 
 @Component({
   selector: 'ps-ng-multi-select',
diff --git a/projects/poweredsoft/ng-select/src/lib/ps-ng-select/ng-select/ng-select.component.ts b/projects/poweredsoft/ng-select/src/lib/ps-ng-select/ng-select/ng-select.component.ts
index 9b3cb33..a3502c2 100644
--- a/projects/poweredsoft/ng-select/src/lib/ps-ng-select/ng-select/ng-select.component.ts
+++ b/projects/poweredsoft/ng-select/src/lib/ps-ng-select/ng-select/ng-select.component.ts
@@ -1,12 +1,12 @@
 import { Component, OnInit, ContentChild, ViewChild, Input, Output, EventEmitter, ChangeDetectorRef, forwardRef, OnDestroy } from '@angular/core';
-import { SelectLabelTemplateDirective } from '../select-label-template.directive';
+import { SelectLabelTemplateDirective } from '../directives/select-label-template.directive';
 import { IDataSource, ISimpleFilter } from '@poweredsoft/data';
 import { Observable, Subject, Subscription } from 'rxjs';
 import { map, distinctUntilChanged, debounceTime } from 'rxjs/operators';
 import { NgSelectComponent as SelectComponent } from '@ng-select/ng-select';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
-import { SelectOptionTemplateDirective } from '../select-option-template.directive';
-import { NotFoundTemplateDirective } from '../not-found-template.directive';
+import { SelectOptionTemplateDirective } from '../directives/select-option-template.directive';
+import { NotFoundTemplateDirective } from '../directives/not-found-template.directive';
 
 
 @Component({
diff --git a/projects/poweredsoft/ng-select/src/lib/ps-ng-select/ps-ng-select.module.ts b/projects/poweredsoft/ng-select/src/lib/ps-ng-select/ps-ng-select.module.ts
index a833cda..3b89b59 100644
--- a/projects/poweredsoft/ng-select/src/lib/ps-ng-select/ps-ng-select.module.ts
+++ b/projects/poweredsoft/ng-select/src/lib/ps-ng-select/ps-ng-select.module.ts
@@ -4,9 +4,9 @@ import { NgSelectComponent } from './ng-select/ng-select.component';
 import { MultiSelectComponent } from './multi-select/multi-select.component';
 import { FormsModule } from '@angular/forms';
 import { NgSelectModule } from '@ng-select/ng-select';
-import { SelectLabelTemplateDirective } from './select-label-template.directive';
-import { SelectOptionTemplateDirective } from './select-option-template.directive';
-import { NotFoundTemplateDirective } from './not-found-template.directive';
+import { SelectLabelTemplateDirective } from './directives/select-label-template.directive';
+import { SelectOptionTemplateDirective } from './directives/select-option-template.directive';
+import { NotFoundTemplateDirective } from './directives/not-found-template.directive';
 
 
 
diff --git a/projects/poweredsoft/ng-select/src/public-api.ts b/projects/poweredsoft/ng-select/src/public-api.ts
index 8c65c66..7a883ee 100644
--- a/projects/poweredsoft/ng-select/src/public-api.ts
+++ b/projects/poweredsoft/ng-select/src/public-api.ts
@@ -5,6 +5,6 @@
 export * from './lib/ps-ng-select/ps-ng-select.module';
 export * from './lib/ps-ng-select/ng-select/ng-select.component';
 export * from './lib/ps-ng-select/multi-select/multi-select.component';
-export * from './lib/ps-ng-select/select-label-template.directive';
-export * from './lib/ps-ng-select/select-option-template.directive';
-export * from './lib/ps-ng-select/not-found-template.directive';
+export * from './lib/ps-ng-select/directives/select-label-template.directive';
+export * from './lib/ps-ng-select/directives/select-option-template.directive';
+export * from './lib/ps-ng-select/directives/not-found-template.directive';
diff --git a/projects/poweredsoft/ngx-bootstrap/src/lib/command-modal/command-modal.module.ts b/projects/poweredsoft/ngx-bootstrap/src/lib/command-modal/command-modal.module.ts
index 0940f87..c80c5da 100644
--- a/projects/poweredsoft/ngx-bootstrap/src/lib/command-modal/command-modal.module.ts
+++ b/projects/poweredsoft/ngx-bootstrap/src/lib/command-modal/command-modal.module.ts
@@ -3,7 +3,7 @@ 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 { InputValidatorDirective } from './directives/input-validator.directive';
+
 import { FormsModule } from '@angular/forms';
 
 @NgModule({
@@ -12,7 +12,7 @@ import { FormsModule } from '@angular/forms';
     ModalModule.forRoot(),
     FormsModule
   ],
-  declarations: [CommandModalDirective, CommandModalComponent, InputValidatorDirective],
+  declarations: [CommandModalDirective, CommandModalComponent],
   exports: [CommandModalDirective]
 })
 export class CommandModalModule { }
diff --git a/projects/poweredsoft/ngx-bootstrap/src/lib/command-modal/command-modal/command-modal.component.spec.ts b/projects/poweredsoft/ngx-bootstrap/src/lib/command-modal/command-modal/command-modal.component.spec.ts
deleted file mode 100644
index 89276ef..0000000
--- a/projects/poweredsoft/ngx-bootstrap/src/lib/command-modal/command-modal/command-modal.component.spec.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { CommandModalComponent } from './command-modal.component';
-
-describe('CommandModalComponent', () => {
-  let component: CommandModalComponent;
-  let fixture: ComponentFixture<CommandModalComponent>;
-
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
-      declarations: [ CommandModalComponent ]
-    })
-    .compileComponents();
-  }));
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(CommandModalComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});
diff --git a/projects/poweredsoft/ngx-bootstrap/src/lib/command-modal/command-modal/command-modal.component.ts b/projects/poweredsoft/ngx-bootstrap/src/lib/command-modal/command-modal/command-modal.component.ts
index 4408a68..3e37018 100644
--- a/projects/poweredsoft/ngx-bootstrap/src/lib/command-modal/command-modal/command-modal.component.ts
+++ b/projects/poweredsoft/ngx-bootstrap/src/lib/command-modal/command-modal/command-modal.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit, TemplateRef, OnDestroy } from '@angular/core';
+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';
@@ -24,6 +24,8 @@ export class CommandModalComponent implements OnInit, OnDestroy {
   form:NgForm;
   validationMessage:string ;
 
+  successEmitter: EventEmitter<any>; 
+
   private _notifyMessage: Subscription;
   private _validationError: Subscription;
 
@@ -62,11 +64,12 @@ export class CommandModalComponent implements OnInit, OnDestroy {
           this.loading = false;
         })
       )
-      .subscribe(success => {
+      .subscribe(commandResult => {
         if (this.refreshOnSuccess)
           this.dataSource.refresh();
 
         this.modalRef.hide();
+        this.successEmitter.emit(commandResult);
       }, fail => {
         // you do not want to close on failure.. so just ignore..
       });
diff --git a/projects/poweredsoft/ngx-bootstrap/src/lib/command-modal/directives/command-modal.directive.ts b/projects/poweredsoft/ngx-bootstrap/src/lib/command-modal/directives/command-modal.directive.ts
index c7c7418..02b45a3 100644
--- a/projects/poweredsoft/ngx-bootstrap/src/lib/command-modal/directives/command-modal.directive.ts
+++ b/projects/poweredsoft/ngx-bootstrap/src/lib/command-modal/directives/command-modal.directive.ts
@@ -1,4 +1,4 @@
-import { Directive, HostListener, Input, TemplateRef } from '@angular/core';
+import { Directive, HostListener, Input, TemplateRef, Output, EventEmitter } from '@angular/core';
 import { IDataSource } from '@poweredsoft/data';
 import { BsModalService } from 'ngx-bootstrap/modal';
 import { CommandModalComponent } from '../command-modal/command-modal.component';
@@ -21,6 +21,8 @@ export class CommandModalDirective {
   @Input() cancelText: string;
   @Input() animated: boolean;
 
+  @Output() success: EventEmitter<any> = new EventEmitter<any>();
+
   @HostListener('click')
   wasClicked() {            
     this.dataSource.resolveCommandModelByName({
@@ -35,7 +37,8 @@ export class CommandModalDirective {
         title: this.commandTitle,
         refreshOnSuccess: this.refreshOnSuccess === undefined ? true : this.refreshOnSuccess,
         commandText: this.commandText || 'OK',
-        cancelText: this.cancelText || 'Cancel'
+        cancelText: this.cancelText || 'Cancel',
+        successEmitter: this.success
       };
       this.modalService.show(CommandModalComponent, {
         animated: this.animated === undefined ? true : this.animated,
diff --git a/projects/poweredsoft/ngx-bootstrap/src/lib/command-modal/directives/input-validator.directive.ts b/projects/poweredsoft/ngx-bootstrap/src/lib/command-modal/directives/input-validator.directive.ts
deleted file mode 100644
index 8fb46d8..0000000
--- a/projects/poweredsoft/ngx-bootstrap/src/lib/command-modal/directives/input-validator.directive.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import { Directive } from '@angular/core';
-import { Validator, AbstractControl, ValidationErrors, NG_VALIDATORS } from '@angular/forms';
-
-@Directive({
-  selector: '[psbxInputValidator]',
-  providers: [{ provide: NG_VALIDATORS, useExisting: InputValidatorDirective, multi: true }]
-})
-export class InputValidatorDirective implements Validator{    
-
-  constructor() { }
-
-  validate(control: AbstractControl): ValidationErrors {
-    throw new Error("Method not implemented.");
-  }
-  registerOnValidatorChange?(fn: () => void): void {
-    throw new Error("Method not implemented.");
-  }
-
-}
diff --git a/projects/poweredsoft/ngx-bootstrap/src/lib/command/command.module.ts b/projects/poweredsoft/ngx-bootstrap/src/lib/command/command.module.ts
new file mode 100644
index 0000000..4ce5b10
--- /dev/null
+++ b/projects/poweredsoft/ngx-bootstrap/src/lib/command/command.module.ts
@@ -0,0 +1,16 @@
+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 { }
diff --git a/projects/poweredsoft/ngx-bootstrap/src/lib/command/directives/command.directive.ts b/projects/poweredsoft/ngx-bootstrap/src/lib/command/directives/command.directive.ts
new file mode 100644
index 0000000..5d042ba
--- /dev/null
+++ b/projects/poweredsoft/ngx-bootstrap/src/lib/command/directives/command.directive.ts
@@ -0,0 +1,70 @@
+import { Directive, Input, TemplateRef, HostListener, Output, EventEmitter } from '@angular/core';
+import { IDataSource } from '@poweredsoft/data';
+import { ConfirmModalService } from '../../confirm-modal/confirm-modal.service';
+
+@Directive({
+  selector: '[psbxCommand]'
+})
+export class CommandDirective {
+
+  constructor(private confirmModalService: ConfirmModalService) { }
+
+
+  @Input() dataSource: IDataSource<any>;
+  @Input() command: string;
+  @Input() model: any;
+  @Input() refreshOnSuccess: boolean;
+  @Input() animated: boolean;
+
+  @Input() confirm: boolean;
+  @Input() confirmMessage: string;
+  @Input() yesText: string;
+  @Input() noText: string;
+  @Input() yesClass: string;
+  @Input() noClass: string;
+
+  @Output() success: EventEmitter<any> = new EventEmitter<any>();
+  @Output() failure: EventEmitter<any> = new EventEmitter<any>();
+
+  private doCommand() {
+    this.dataSource.resolveCommandModelByName({
+      command: this.command,
+      model: this.model
+    }).subscribe(commandModel => {
+      this.dataSource.executeCommandByName(this.command, commandModel).subscribe(
+        commandResult => {
+          if (this.refreshOnSuccess !== false)
+            this.dataSource.refresh();
+
+          this.success.emit(commandResult);
+        },
+        commandError => {
+          this.failure.emit(commandError);
+        }
+      );
+    }, resolveCommandError => {
+      this.failure.emit(resolveCommandError);
+    });
+  }
+
+
+  @HostListener('click')
+  wasClicked() {
+
+    if (this.confirm) {
+      this.confirmModalService.confirm({
+        message: this.confirmMessage,
+        yesText: this.yesText || 'yes',
+        yesClass: this.yesClass || 'danger',
+        noText: this.noText || 'no',
+        noClass: this.noClass || 'light',
+      }).subscribe(result => {
+        if (result)
+          this.doCommand();
+      })
+    } else {
+      this.doCommand();
+    }
+  }
+
+}
diff --git a/projects/poweredsoft/ngx-bootstrap/src/lib/confirm-modal/confirm-modal-components/confirm-modal/confirm-modal.component.ts b/projects/poweredsoft/ngx-bootstrap/src/lib/confirm-modal/confirm-modal-components/confirm-modal/confirm-modal.component.ts
index 7259d73..3047239 100644
--- a/projects/poweredsoft/ngx-bootstrap/src/lib/confirm-modal/confirm-modal-components/confirm-modal/confirm-modal.component.ts
+++ b/projects/poweredsoft/ngx-bootstrap/src/lib/confirm-modal/confirm-modal-components/confirm-modal/confirm-modal.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit, TemplateRef } from '@angular/core';
+import { Component, OnInit, TemplateRef, EventEmitter } from '@angular/core';
 import { BsModalRef, BsModalService } from 'ngx-bootstrap/modal';
 import { Observer } from 'rxjs';
 
@@ -27,11 +27,11 @@ export class ConfirmModalComponent implements OnInit {
   }
 
   get yesButtonClass() {
-    return `btn btn-sm btn-${this.yesClass}`
+    return `btn btn-${this.yesClass}`
   }
 
   get noButtonClass() {
-    return `btn btn-sm btn-${this.noClass}`
+    return `btn btn-${this.noClass}`
   }
 
   confirm(): void {
diff --git a/projects/poweredsoft/ngx-bootstrap/src/lib/confirm-modal/confirm-modal.directive.ts b/projects/poweredsoft/ngx-bootstrap/src/lib/confirm-modal/confirm-modal.directive.ts
deleted file mode 100644
index ce53863..0000000
--- a/projects/poweredsoft/ngx-bootstrap/src/lib/confirm-modal/confirm-modal.directive.ts
+++ /dev/null
@@ -1,55 +0,0 @@
-import { Directive, Input, TemplateRef, HostListener } from '@angular/core';
-import { ConfirmModalService } from './confirm-modal.service';
-import { IDataSource } from '@poweredsoft/data';
-
-@Directive({
-  selector: '[psbxConfirmModal]'
-})
-export class ConfirmModalDirective {
-
-  constructor(private confirmModalService: ConfirmModalService) { }
-
-
-  @Input() dataSource: IDataSource<any>;
-  @Input() command: string;
-  @Input() model: any;
-  @Input() template: TemplateRef<any>;
-  @Input() commandTitle: string;
-  @Input() refreshOnSuccess: boolean;
-  @Input() commandText: string;
-  @Input() cancelText: string;
-  @Input() animated: boolean;
-  
-
-  @HostListener('click')
-  wasClicked() {            
-    this.dataSource.resolveCommandModelByName({
-      command: this.command,
-      model: this.model
-    }).subscribe(commandModel => { 
-      this.confirmModalService.confirm({
-        message: 'Do you want to delete this merchant?',
-        yesText: 'yes delete this merchant',
-        yesClass: 'danger',
-        noText: 'no please dont',
-        noClass: 'light'
-      }).subscribe(result => {
-        if(result){
-          this.dataSource.executeCommandByName(this.command, commandModel).subscribe(      
-            res => {
-              this.dataSource.refresh();
-            },
-            err => {
-              console.log(err);
-              alert('failed');
-            }
-          );
-        }
-      })
-
-    }, error => {
-
-    });
-  }
-
-}
diff --git a/projects/poweredsoft/ngx-bootstrap/src/lib/confirm-modal/confirm-modal.module.ts b/projects/poweredsoft/ngx-bootstrap/src/lib/confirm-modal/confirm-modal.module.ts
index fcfda3a..94314af 100644
--- a/projects/poweredsoft/ngx-bootstrap/src/lib/confirm-modal/confirm-modal.module.ts
+++ b/projects/poweredsoft/ngx-bootstrap/src/lib/confirm-modal/confirm-modal.module.ts
@@ -3,18 +3,20 @@ import { CommonModule } from '@angular/common';
 import { ConfirmModalComponent } from './confirm-modal-components/confirm-modal/confirm-modal.component';
 import { ModalModule } from 'ngx-bootstrap/modal';
 import { ConfirmModalService } from './confirm-modal.service';
-import { ConfirmModalDirective } from './confirm-modal.directive';
+import { CommandModule } from '../command/command.module';
+
 
 
 
 @NgModule({
-  declarations: [ConfirmModalComponent, ConfirmModalDirective],
+  declarations: [ConfirmModalComponent],
   imports: [
     CommonModule,
+    //CommandModule,
     ModalModule.forRoot(),
     
   ],
-  exports:[ConfirmModalDirective],
+  exports:[],
   providers: [ConfirmModalService]
 })
 export class ConfirmModalModule { }
diff --git a/projects/poweredsoft/ngx-bootstrap/src/lib/dataSource-filter/data-source-filter.module.ts b/projects/poweredsoft/ngx-bootstrap/src/lib/data-source-filter/data-source-filter.module.ts
similarity index 100%
rename from projects/poweredsoft/ngx-bootstrap/src/lib/dataSource-filter/data-source-filter.module.ts
rename to projects/poweredsoft/ngx-bootstrap/src/lib/data-source-filter/data-source-filter.module.ts
diff --git a/projects/poweredsoft/ngx-bootstrap/src/lib/dataSource-filter/datetime-filter/data-source-datetime-filter.component.html b/projects/poweredsoft/ngx-bootstrap/src/lib/data-source-filter/datetime-filter/data-source-datetime-filter.component.html
similarity index 54%
rename from projects/poweredsoft/ngx-bootstrap/src/lib/dataSource-filter/datetime-filter/data-source-datetime-filter.component.html
rename to projects/poweredsoft/ngx-bootstrap/src/lib/data-source-filter/datetime-filter/data-source-datetime-filter.component.html
index ce785ac..9e7a508 100644
--- a/projects/poweredsoft/ngx-bootstrap/src/lib/dataSource-filter/datetime-filter/data-source-datetime-filter.component.html
+++ b/projects/poweredsoft/ngx-bootstrap/src/lib/data-source-filter/datetime-filter/data-source-datetime-filter.component.html
@@ -1,4 +1,5 @@
 <ng-template #popTemplate>
+  <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}">
@@ -6,26 +7,55 @@
         </select>    
     </div>
       <div class="row mt-1 mb-1">
-          <input *ngIf="filterType =='GreaterThan' || filterType == 'LessThan'" type="text"
+          <input *ngIf="filterType !='Range'" 
+                 type="text"
                  placeholder="Datepicker"
                  class="form-control"
-                 bsDatepicker [(ngModel)]="filterValue"> 
+                 bsDatepicker [(ngModel)]="filterValue" [ngModelOptions]="{standalone: true}"> 
       </div>
+      
       <div class="row mt-1 mb-1">
-        <input *ngIf="filterType =='Equal'" type="text"
+        <input *ngIf="filterType =='Range'" type="text"
         placeholder="Daterangepicker"
         class="form-control"
-        bsDaterangepicker [(ngModel)]="filterValue">       
+        bsDaterangepicker [(ngModel)]="filterValue" [ngModelOptions]="{standalone: true}">       
     </div>
-
-     
-     
+    
       <div class="row mt-2">
-        <button class="btn btn-primary mr-1" >Filter</button>
+        <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">Clear</button>
+        <button type="button" class="btn btn-dark" *ngIf="isFiltering" (click)="clearFilter()">Clear</button>
       </div>
   </div>
+  </form>
+
+  <!-- <div class="container" >
+    <div class="row">
+      <select class="custom-select" title="Choose one of the following..." >
+          <option *ngFor="let filter of filterTypes" [value]="filter.value">{{filter.key}}</option>
+      </select>    
+  </div>
+    <div class="row mt-1 mb-1">
+        <input *ngIf="filterType !='Range'" 
+               type="text"
+               placeholder="Datepicker"
+               class="form-control"
+               bsDatepicker [(ngModel)]="filterValue" > 
+    </div>
+    
+    <div class="row mt-1 mb-1">
+      <input *ngIf="filterType =='Range'" type="text"
+      placeholder="Daterangepicker"
+      class="form-control"
+      bsDaterangepicker [(ngModel)]="filterValue">       
+  </div>
+  
+    <div class="row mt-2">
+      <button class="btn btn-primary mr-1" type="submit" (click)="applyFilter()">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> -->
 </ng-template>
 
 <button [popover]="popTemplate" class="btn btn-default" [(isOpen)]="filterPopUpOpened" [outsideClick]="true" #pop="bs-popover">
diff --git a/projects/poweredsoft/ngx-bootstrap/src/lib/dataSource-filter/datetime-filter/data-source-datetime-filter.component.scss b/projects/poweredsoft/ngx-bootstrap/src/lib/data-source-filter/datetime-filter/data-source-datetime-filter.component.scss
similarity index 100%
rename from projects/poweredsoft/ngx-bootstrap/src/lib/dataSource-filter/datetime-filter/data-source-datetime-filter.component.scss
rename to projects/poweredsoft/ngx-bootstrap/src/lib/data-source-filter/datetime-filter/data-source-datetime-filter.component.scss
diff --git a/projects/poweredsoft/ngx-bootstrap/src/lib/data-source-filter/datetime-filter/data-source-datetime-filter.component.ts b/projects/poweredsoft/ngx-bootstrap/src/lib/data-source-filter/datetime-filter/data-source-datetime-filter.component.ts
new file mode 100644
index 0000000..956f04a
--- /dev/null
+++ b/projects/poweredsoft/ngx-bootstrap/src/lib/data-source-filter/datetime-filter/data-source-datetime-filter.component.ts
@@ -0,0 +1,137 @@
+import { Component, OnInit, Input, Output, EventEmitter} from '@angular/core';
+import { IDataSource, ISimpleFilter, ICompositeFilter, IFilter } from '@poweredsoft/data';
+import { PopoverDirective } from 'ngx-bootstrap/popover';
+
+@Component({
+  selector: 'psbx-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;
+  @Output() filterTypeChanged: EventEmitter<string> = new EventEmitter<string>();
+
+  filterPopUpOpened: boolean = false; 
+  isFiltering: boolean;
+  filterValue: Date = null; 
+  filterTypes = [
+    {key:'Equal', value: 'Equal'},
+    {key:'Greater Than', value: 'GreaterThan'},
+    {key:'Less Than', value: 'LessThan'},    
+    {key:'Greater Than Equal', value: 'GreaterThanOrEqual'},
+    {key:'Less Than Equal', value: 'LessThanOrEqual'},    
+    {key:'Range', value: 'Range' }
+  ];
+
+
+  bsInlineValue = new Date();
+  bsInlineRangeValue: Date[];
+  maxDate = new Date();
+ 
+  constructor() {
+    this.maxDate.setDate(this.maxDate.getDate() + 7);
+    this.bsInlineRangeValue = [this.bsInlineValue, this.maxDate];
+  }
+  ngOnInit(): void {
+    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;
+    if (existingFilter) {
+      this.dataSource.query({
+        page: 1,
+        filters: this.dataSource.filters.filter(t => t != existingFilter)
+      })
+    }
+  }
+  applyFilter(pop: PopoverDirective = null){
+
+    this.isFiltering = true;
+    const filters = this.dataSource.filters;
+    let compositeF: any = null;
+    let freshFilter: ISimpleFilter = null;
+    let startDate:Date;
+    let endDate:Date;
+debugger;
+    if(Array.isArray(this.filterValue)){
+      startDate = this.filterValue[0];
+      endDate = this.filterValue[1];
+      compositeF = {
+        type: 'Composite',
+        filters: [
+          {
+            path: this.path,
+            type: 'GREATERTHANOREQUAL',
+            value: startDate, // check if this string works
+          },
+          {
+            and: true,
+            path: this.path,
+            type: 'LESSTHANOREQUAL',
+            value: endDate,
+          }
+        ]
+      }
+     
+    }else{
+      freshFilter = {
+        type: this.filterType,
+        and: true,
+        path: this.path,
+        value: this.filterValue
+      }
+
+      if (pop) 
+      pop.hide();
+    }
+
+    // TODO???
+    // set this for gql better handling of variant.
+    //(freshFilter as IGraphQLFilter).__gqlVariantType = 'DATETIME';
+
+    // TODO create filter here.
+    
+    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 (existingFilterIndex == -1) {
+      // create it.
+      if(compositeF){                        
+        filters.push(compositeF);
+      }else{
+        filters.push(freshFilter);
+      }
+     
+    } else {
+      // replace it.
+      if(compositeF){
+        filters[existingFilterIndex] = compositeF;
+      }else{
+        filters[existingFilterIndex] = freshFilter;
+      }
+    }
+
+    this.dataSource.query({
+      filters: filters,
+      page: 1
+    })
+  }
+
+
+}
diff --git a/projects/poweredsoft/ngx-bootstrap/src/lib/dataSource-filter/number-filter/data-source-number-filter.component.html b/projects/poweredsoft/ngx-bootstrap/src/lib/data-source-filter/number-filter/data-source-number-filter.component.html
similarity index 97%
rename from projects/poweredsoft/ngx-bootstrap/src/lib/dataSource-filter/number-filter/data-source-number-filter.component.html
rename to projects/poweredsoft/ngx-bootstrap/src/lib/data-source-filter/number-filter/data-source-number-filter.component.html
index 76e11e8..9a547c4 100644
--- a/projects/poweredsoft/ngx-bootstrap/src/lib/dataSource-filter/number-filter/data-source-number-filter.component.html
+++ b/projects/poweredsoft/ngx-bootstrap/src/lib/data-source-filter/number-filter/data-source-number-filter.component.html
@@ -1,5 +1,5 @@
 <ng-template #popTemplate>
-    <form (ngSubmit)="applyFilter()">
+    <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}">
diff --git a/projects/poweredsoft/ngx-bootstrap/src/lib/dataSource-filter/number-filter/data-source-number-filter.component.scss b/projects/poweredsoft/ngx-bootstrap/src/lib/data-source-filter/number-filter/data-source-number-filter.component.scss
similarity index 100%
rename from projects/poweredsoft/ngx-bootstrap/src/lib/dataSource-filter/number-filter/data-source-number-filter.component.scss
rename to projects/poweredsoft/ngx-bootstrap/src/lib/data-source-filter/number-filter/data-source-number-filter.component.scss
diff --git a/projects/poweredsoft/ngx-bootstrap/src/lib/dataSource-filter/number-filter/data-source-number-filter.component.ts b/projects/poweredsoft/ngx-bootstrap/src/lib/data-source-filter/number-filter/data-source-number-filter.component.ts
similarity index 92%
rename from projects/poweredsoft/ngx-bootstrap/src/lib/dataSource-filter/number-filter/data-source-number-filter.component.ts
rename to projects/poweredsoft/ngx-bootstrap/src/lib/data-source-filter/number-filter/data-source-number-filter.component.ts
index bcc395b..c46f15c 100644
--- a/projects/poweredsoft/ngx-bootstrap/src/lib/dataSource-filter/number-filter/data-source-number-filter.component.ts
+++ b/projects/poweredsoft/ngx-bootstrap/src/lib/data-source-filter/number-filter/data-source-number-filter.component.ts
@@ -1,6 +1,6 @@
 import { Component, OnInit, Input, Output, EventEmitter, ElementRef, ViewChild } from '@angular/core';
-import { IDataSource,IFilter } from '@poweredsoft/data';
-import { ISimpleFilter } from '../../models/IFilter';
+import { IDataSource,IFilter, ISimpleFilter } from '@poweredsoft/data';
+
 
 @Component({
   selector: 'psbx-ds-number-filter',
@@ -11,7 +11,7 @@ export class DataSourceNumberFilterComponent implements OnInit {
   @Input() dataSource : IDataSource<any>;   
   @Input() path:string;
  
-  filterType: string = 'Equals';
+  filterType: string = 'Equal';
   filterValue: number = 0; 
   isFiltering: boolean;
   filterTypes = [    
diff --git a/projects/poweredsoft/ngx-bootstrap/src/lib/dataSource-filter/text-filter/data-source-text-filter.component.html b/projects/poweredsoft/ngx-bootstrap/src/lib/data-source-filter/text-filter/data-source-text-filter.component.html
similarity index 97%
rename from projects/poweredsoft/ngx-bootstrap/src/lib/dataSource-filter/text-filter/data-source-text-filter.component.html
rename to projects/poweredsoft/ngx-bootstrap/src/lib/data-source-filter/text-filter/data-source-text-filter.component.html
index 08b65cc..5f3c7bf 100644
--- a/projects/poweredsoft/ngx-bootstrap/src/lib/dataSource-filter/text-filter/data-source-text-filter.component.html
+++ b/projects/poweredsoft/ngx-bootstrap/src/lib/data-source-filter/text-filter/data-source-text-filter.component.html
@@ -1,6 +1,6 @@
 <ng-template #popTemplate>
 
-    <form (ngSubmit)="applyFilter(pop)">
+    <form (ngSubmit)="applyFilter(pop)" novalidate>
         
         <div class="container" >
             <div class="row">
diff --git a/projects/poweredsoft/ngx-bootstrap/src/lib/dataSource-filter/text-filter/data-source-text-filter.component.scss b/projects/poweredsoft/ngx-bootstrap/src/lib/data-source-filter/text-filter/data-source-text-filter.component.scss
similarity index 100%
rename from projects/poweredsoft/ngx-bootstrap/src/lib/dataSource-filter/text-filter/data-source-text-filter.component.scss
rename to projects/poweredsoft/ngx-bootstrap/src/lib/data-source-filter/text-filter/data-source-text-filter.component.scss
diff --git a/projects/poweredsoft/ngx-bootstrap/src/lib/dataSource-filter/text-filter/data-source-text-filter.component.ts b/projects/poweredsoft/ngx-bootstrap/src/lib/data-source-filter/text-filter/data-source-text-filter.component.ts
similarity index 97%
rename from projects/poweredsoft/ngx-bootstrap/src/lib/dataSource-filter/text-filter/data-source-text-filter.component.ts
rename to projects/poweredsoft/ngx-bootstrap/src/lib/data-source-filter/text-filter/data-source-text-filter.component.ts
index 9ebd44a..012fd4e 100644
--- a/projects/poweredsoft/ngx-bootstrap/src/lib/dataSource-filter/text-filter/data-source-text-filter.component.ts
+++ b/projects/poweredsoft/ngx-bootstrap/src/lib/data-source-filter/text-filter/data-source-text-filter.component.ts
@@ -1,6 +1,6 @@
 import { Component, OnInit, Input } from '@angular/core';
 import { IDataSource} from '@poweredsoft/data';
-import { ISimpleFilter } from '../../models/IFilter';
+import { ISimpleFilter } from '@poweredsoft/data';
 import { PopoverDirective } from 'ngx-bootstrap/popover';
 
 
diff --git a/projects/poweredsoft/ngx-bootstrap/src/lib/dataSource-sorting/data-source-sorting.module.ts b/projects/poweredsoft/ngx-bootstrap/src/lib/data-source-sorting/data-source-sorting.module.ts
similarity index 100%
rename from projects/poweredsoft/ngx-bootstrap/src/lib/dataSource-sorting/data-source-sorting.module.ts
rename to projects/poweredsoft/ngx-bootstrap/src/lib/data-source-sorting/data-source-sorting.module.ts
diff --git a/projects/poweredsoft/ngx-bootstrap/src/lib/dataSource-sorting/ds-sorting/data-source-sorting.component.html b/projects/poweredsoft/ngx-bootstrap/src/lib/data-source-sorting/ds-sorting/data-source-sorting.component.html
similarity index 100%
rename from projects/poweredsoft/ngx-bootstrap/src/lib/dataSource-sorting/ds-sorting/data-source-sorting.component.html
rename to projects/poweredsoft/ngx-bootstrap/src/lib/data-source-sorting/ds-sorting/data-source-sorting.component.html
diff --git a/projects/poweredsoft/ngx-bootstrap/src/lib/dataSource-sorting/ds-sorting/data-source-sorting.component.scss b/projects/poweredsoft/ngx-bootstrap/src/lib/data-source-sorting/ds-sorting/data-source-sorting.component.scss
similarity index 100%
rename from projects/poweredsoft/ngx-bootstrap/src/lib/dataSource-sorting/ds-sorting/data-source-sorting.component.scss
rename to projects/poweredsoft/ngx-bootstrap/src/lib/data-source-sorting/ds-sorting/data-source-sorting.component.scss
diff --git a/projects/poweredsoft/ngx-bootstrap/src/lib/dataSource-sorting/ds-sorting/data-source-sorting.component.ts b/projects/poweredsoft/ngx-bootstrap/src/lib/data-source-sorting/ds-sorting/data-source-sorting.component.ts
similarity index 100%
rename from projects/poweredsoft/ngx-bootstrap/src/lib/dataSource-sorting/ds-sorting/data-source-sorting.component.ts
rename to projects/poweredsoft/ngx-bootstrap/src/lib/data-source-sorting/ds-sorting/data-source-sorting.component.ts
diff --git a/projects/poweredsoft/ngx-bootstrap/src/lib/dataSource-filter/datetime-filter/data-source-datetime-filter.component.ts b/projects/poweredsoft/ngx-bootstrap/src/lib/dataSource-filter/datetime-filter/data-source-datetime-filter.component.ts
deleted file mode 100644
index 1fa81c8..0000000
--- a/projects/poweredsoft/ngx-bootstrap/src/lib/dataSource-filter/datetime-filter/data-source-datetime-filter.component.ts
+++ /dev/null
@@ -1,61 +0,0 @@
-import { Component, OnInit, Input } from '@angular/core';
-import { IDataSource, ISimpleFilter } from '@poweredsoft/data';
-
-@Component({
-  selector: 'psbx-ds-datetime-filter',
-  templateUrl: './data-source-datetime-filter.component.html',
-  styleUrls: ['./data-source-datetime-filter.component.scss']
-})
-export class DataSourceDatetimeFilterComponent {
-
-  @Input() path: string;
-  @Input() dataSource : IDataSource<any>; 
-  filterPopUpOpened: boolean = false; 
-  isFiltering: boolean;
-  filterValue: Date = null; 
-  filterType: string = 'Equal';
-  filterTypes = [
-    {key:'equal', value: 'Equal'},
-    {key:'Greater Than', value: 'GreaterThan'},
-    {key:'Less Than', value: 'LessThan'},    
-    {key:'Greater Than Equal', value: 'GreaterThanOrEqual'},
-    {key:'Less Than Equal', value: 'LessThanOrEqual'},    
-  ];
-
-
-  bsInlineValue = new Date();
-  bsInlineRangeValue: Date[];
-  maxDate = new Date();
- 
-  constructor() {
-    this.maxDate.setDate(this.maxDate.getDate() + 7);
-    this.bsInlineRangeValue = [this.bsInlineValue, this.maxDate];
-  }
-  showTooltip(){
-    return "Filter by "+ this.path;
-  }
-
-  applyFilter(){
-    this.isFiltering = true;
-    const filters = this.dataSource.filters;
-    const existingFilter = filters.find(t => (t as ISimpleFilter).path == this.path) as ISimpleFilter;
-    if (existingFilter) {
-      existingFilter.type = this.filterType;
-      existingFilter.value = this.filterValue.toString()
-    } else {
-      filters.push(<ISimpleFilter>{
-        and: true,
-        type: this.filterType,
-        path: this.path, 
-        value: this.filterValue.toString()
-      })
-    }
-
-    this.dataSource.query({
-      filters: filters,
-      page: 1
-    })
-  }
-
-
-}
diff --git a/projects/poweredsoft/ngx-bootstrap/src/lib/form-group-command-modal/directives/form-group-command-modal.directive.ts b/projects/poweredsoft/ngx-bootstrap/src/lib/form-group-command-modal/directives/form-group-command-modal.directive.ts
index 42de551..e9be622 100644
--- a/projects/poweredsoft/ngx-bootstrap/src/lib/form-group-command-modal/directives/form-group-command-modal.directive.ts
+++ b/projects/poweredsoft/ngx-bootstrap/src/lib/form-group-command-modal/directives/form-group-command-modal.directive.ts
@@ -29,9 +29,10 @@ export class FormGroupCommandModalDirective {
   @Input() refreshOnSuccess: boolean;
   @Input() commandText: string;
   @Input() cancelText: string;
-  @Input() isConfirmModal:boolean;
   @Output() formCreate: EventEmitter<IModelFormCreateEvent> = new EventEmitter<IModelFormCreateEvent>();
 
+  @Output() success: EventEmitter<any> = new EventEmitter<any>();
+
   constructor(private modalService: BsModalService) { }
 
   @HostListener('click')
@@ -47,25 +48,6 @@ export class FormGroupCommandModalDirective {
         shouldSetCommandModel: true
       }
 
-      if(this.isConfirmModal){
-
-        const initialState = {
-          dataSource: this.dataSource,
-          command: this.command,
-          template: this.template,
-          title: this.commandTitle,
-          refreshOnSuccess: this.refreshOnSuccess === undefined ? true : this.refreshOnSuccess,
-          commandText: this.commandText || 'OK',
-          cancelText: this.cancelText || 'Cancel',
-          commandModel:commandModel
-        };
-      
-        this.modalService.show(ConfirmModalComponent, {
-          animated: this.animated === undefined ? true : this.animated,
-          initialState
-        });
-
-      }else{
         this.formCreate.emit(event);
         if (event.formGroup == null)
           throw new Error('form group should be set, after form createEvent');
@@ -82,14 +64,15 @@ export class FormGroupCommandModalDirective {
           commandText: this.commandText || 'OK',
           cancelText: this.cancelText || 'Cancel',
           modelForm: event.formGroup,
-          commandModel:commandModel
+          commandModel:commandModel,
+          successEmitter: this.success
         };
       
         this.modalService.show(FormGroupCommandModalComponent, {
           animated: this.animated === undefined ? true : this.animated,
           initialState
         });
-      }
+
     }, error => {
 
     });
diff --git a/projects/poweredsoft/ngx-bootstrap/src/lib/form-group-command-modal/form-group-command-modal/form-group-command-modal.component.ts b/projects/poweredsoft/ngx-bootstrap/src/lib/form-group-command-modal/form-group-command-modal/form-group-command-modal.component.ts
index f1c3a92..ad36c10 100644
--- a/projects/poweredsoft/ngx-bootstrap/src/lib/form-group-command-modal/form-group-command-modal/form-group-command-modal.component.ts
+++ b/projects/poweredsoft/ngx-bootstrap/src/lib/form-group-command-modal/form-group-command-modal/form-group-command-modal.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit, TemplateRef, OnDestroy } from '@angular/core';
+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';
@@ -24,10 +24,13 @@ export class FormGroupCommandModalComponent implements OnInit, OnDestroy {
   cancelText: string;
   errorMessage: string;
   commandModel:any; 
-  
+  successEmitter: EventEmitter<any>;
+
   private _notifyMessage: Subscription;
   private _validationError: Subscription;
 
+
+
   constructor(public modalRef: BsModalRef) { }
 
   ngOnDestroy(): void {
@@ -71,11 +74,12 @@ export class FormGroupCommandModalComponent implements OnInit, OnDestroy {
           this.loading = false;
         })
       )
-      .subscribe(success => {
+      .subscribe(commandResult => {
         if (this.refreshOnSuccess)
           this.dataSource.refresh();
 
         this.modalRef.hide();
+        this.successEmitter.emit(commandResult);
       }, fail => {
         // you do not want to close on failure.. so just ignore..
       });
diff --git a/projects/poweredsoft/ngx-bootstrap/src/lib/models/IFilter.ts b/projects/poweredsoft/ngx-bootstrap/src/lib/models/IFilter.ts
deleted file mode 100644
index 53534fc..0000000
--- a/projects/poweredsoft/ngx-bootstrap/src/lib/models/IFilter.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-export interface IFilter {
-    type: string;
-    and?: boolean;
-}
-
-export interface ISimpleFilter extends IFilter {
-    path: string;
-    value: any;
-}
\ No newline at end of file
diff --git a/projects/poweredsoft/ngx-bootstrap/src/lib/pagination/psbxPagination.module.ts b/projects/poweredsoft/ngx-bootstrap/src/lib/pagination/pagination.module.ts
similarity index 71%
rename from projects/poweredsoft/ngx-bootstrap/src/lib/pagination/psbxPagination.module.ts
rename to projects/poweredsoft/ngx-bootstrap/src/lib/pagination/pagination.module.ts
index d083a02..af0621b 100644
--- a/projects/poweredsoft/ngx-bootstrap/src/lib/pagination/psbxPagination.module.ts
+++ b/projects/poweredsoft/ngx-bootstrap/src/lib/pagination/pagination.module.ts
@@ -1,7 +1,7 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { DataSourcePaginationComponent } from './data-source-pagination/data-source-pagination.component';
-import { PaginationModule } from 'ngx-bootstrap/pagination';
+import { PaginationModule as ValorPaginationModule } from 'ngx-bootstrap/pagination';
 import { FormsModule } from '@angular/forms';
 
 
@@ -9,9 +9,9 @@ import { FormsModule } from '@angular/forms';
   declarations: [DataSourcePaginationComponent],
   imports: [
     CommonModule,
-    PaginationModule.forRoot(),
+    ValorPaginationModule.forRoot(),
     FormsModule
   ],
   exports:[DataSourcePaginationComponent]
 })
-export class psbxPaginationModule { }
+export class PaginationModule { }
diff --git a/projects/poweredsoft/ngx-bootstrap/src/public-api.ts b/projects/poweredsoft/ngx-bootstrap/src/public-api.ts
index 4deaf47..1a78a1d 100644
--- a/projects/poweredsoft/ngx-bootstrap/src/public-api.ts
+++ b/projects/poweredsoft/ngx-bootstrap/src/public-api.ts
@@ -6,16 +6,17 @@ export * from './lib/command-modal/command-modal.module';
 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/psbxPagination.module';
+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';
-export * from './lib/confirm-modal/confirm-modal.directive';
 export * from './lib/spinner/spinner.module';
 export * from './lib/spinner/spinner/spinner.component';
-export * from './lib/dataSource-filter/data-source-filter.module';
-export * from './lib/dataSource-filter/text-filter/data-source-text-filter.component';
-export * from './lib/dataSource-filter/number-filter/data-source-number-filter.component';
-export * from './lib/dataSource-filter/datetime-filter/data-source-datetime-filter.component';
-export * from './lib/dataSource-sorting/data-source-sorting.module';
-export * from './lib/dataSource-sorting/ds-sorting/data-source-sorting.component';
\ No newline at end of file
+export * from './lib/data-source-filter/data-source-filter.module';
+export * from './lib/data-source-filter/text-filter/data-source-text-filter.component';
+export * from './lib/data-source-filter/number-filter/data-source-number-filter.component';
+export * from './lib/data-source-filter/datetime-filter/data-source-datetime-filter.component';
+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';
\ No newline at end of file
diff --git a/src/app/command-modal-demo/command-modal-demo.module.ts b/src/app/command-modal-demo/command-modal-demo.module.ts
index 1838a43..887a085 100644
--- a/src/app/command-modal-demo/command-modal-demo.module.ts
+++ b/src/app/command-modal-demo/command-modal-demo.module.ts
@@ -5,7 +5,7 @@ import { CommandModalDemoRoutingModule } from './command-modal-demo-routing.modu
 import { DataGridModule } from '@poweredsoft/ngx-cdk-ui';
 
 import {FormsModule} from '@angular/forms';
-import { CommandModalModule, psbxPaginationModule, ConfirmModalModule } from '@poweredsoft/ngx-bootstrap';
+import { CommandModalModule, PaginationModule, ConfirmModalModule,CommandModule } from '@poweredsoft/ngx-bootstrap';
 @NgModule({
   declarations: [CommandModalDemoComponent],
   imports: [
@@ -14,8 +14,9 @@ import { CommandModalModule, psbxPaginationModule, ConfirmModalModule } from '@p
     DataGridModule,
     CommandModalModule,
     FormsModule,
-    psbxPaginationModule,
-    ConfirmModalModule
+    PaginationModule,
+    ConfirmModalModule,
+    CommandModule
   ]
 })
 export class CommandModalDemoModule { }
diff --git a/src/app/command-modal-demo/command-modal-demo/command-modal-demo.component.html b/src/app/command-modal-demo/command-modal-demo/command-modal-demo.component.html
index 4c62d07..300292c 100644
--- a/src/app/command-modal-demo/command-modal-demo/command-modal-demo.component.html
+++ b/src/app/command-modal-demo/command-modal-demo/command-modal-demo.component.html
@@ -26,11 +26,26 @@
     <ng-container psDataGridCol="commands">
         <ng-container *psDataGridColHeader>Actions</ng-container>
         <ng-container *psDataGridCell="let model">
+            <div class="btn-group">
+
+        
             <button class="btn-primary btn" psbxCommandModal [commandTitle]="'Change ' + model.name + ' name'" commandText="Update"
             [dataSource]="merchantDataSource" command="changeMerchant" [model]="model" [template]="changeName">Change</button>
 
-            <button class="btn-danger btn" psbxConfirmModal [commandTitle]="'Are you sure you wnat to remove ' + model.name + '?'" commandText="Remove"
-            [dataSource]="merchantDataSource" command="removeMerchant" [model]="model" >RemoveIt</button>
+            <button class="btn-danger btn" psbxCommand 
+            [dataSource]="merchantDataSource" 
+            command="removeMerchant" 
+            [model]="model" 
+            [confirm]="true"
+            confirmMessage="Are you sure you want to delete this merchant?"
+            
+            >RemoveIt</button>
+
+            <button class="btn-warning btn" psbxCommand 
+            [dataSource]="merchantDataSource" 
+            command="removeMerchant" 
+            [model]="model"             
+            >Remove Without confirmation</button>    </div>
         </ng-container>
     </ng-container>
         <ng-container *psDataGridFooter>
diff --git a/src/app/command-modal-demo/command-modal-demo/command-modal-demo.component.ts b/src/app/command-modal-demo/command-modal-demo/command-modal-demo.component.ts
index ebc157f..7ce5488 100644
--- a/src/app/command-modal-demo/command-modal-demo/command-modal-demo.component.ts
+++ b/src/app/command-modal-demo/command-modal-demo/command-modal-demo.component.ts
@@ -45,7 +45,7 @@ export class CommandModalDemoComponent implements OnInit,OnDestroy {
 
   ngOnInit() {
     this.merchantDataSource.refresh();
-    this.merchantDataSource.data$.subscribe(newData => {     
+    this._dataSubscription = this.merchantDataSource.data$.subscribe(newData => {     
       if (newData)
         this.pages = new Array(newData.numberOfPages);
     });
diff --git a/src/app/data-grid-demo/data-grid-demo-home/data-grid-demo-home.component.ts b/src/app/data-grid-demo/data-grid-demo-home/data-grid-demo-home.component.ts
index b9d5dcb..cd52241 100644
--- a/src/app/data-grid-demo/data-grid-demo-home/data-grid-demo-home.component.ts
+++ b/src/app/data-grid-demo/data-grid-demo-home/data-grid-demo-home.component.ts
@@ -50,7 +50,7 @@ export class DataGridDemoHomeComponent implements OnInit, OnDestroy {
       console.log('merchant data source event loading', isLoading);
     });
 
-    this.merchantDataSource.data$.subscribe(receivedData => {
+    this._dataSubscription = this.merchantDataSource.data$.subscribe(receivedData => {
       console.log('new data is coming from the server', receivedData);
     });
     this.merchantDataSource.refresh();
diff --git a/src/app/form-group-modal-demo/form-group-modal-demo.module.ts b/src/app/form-group-modal-demo/form-group-modal-demo.module.ts
index 03652ca..99abb13 100644
--- a/src/app/form-group-modal-demo/form-group-modal-demo.module.ts
+++ b/src/app/form-group-modal-demo/form-group-modal-demo.module.ts
@@ -3,7 +3,7 @@ import { CommonModule } from '@angular/common';
 import { FormGroupModalDemoComponent } from './form-group-modal-demo/form-group-modal-demo.component';
 import { FormGroupModalDemoRoutingModule } from './form-group-modal-demo-routing.module'
 import { DataGridModule } from '@poweredsoft/ngx-cdk-ui';
-import { FormGroupCommandModalModule,CommandModalModule, psbxPaginationModule } from '@poweredsoft/ngx-bootstrap';
+import { FormGroupCommandModalModule, PaginationModule, CommandModule } from '@poweredsoft/ngx-bootstrap';
 import { ReactiveFormsModule } from '@angular/forms';
 import { ConfirmModalModule } from 'projects/poweredsoft/ngx-bootstrap/src/public-api';
 
@@ -17,8 +17,9 @@ import { ConfirmModalModule } from 'projects/poweredsoft/ngx-bootstrap/src/publi
     DataGridModule,
     FormGroupCommandModalModule,
     ReactiveFormsModule,
-    psbxPaginationModule,
+    PaginationModule,
     ConfirmModalModule,
+    CommandModule
     
   ]
 })
diff --git a/src/app/form-group-modal-demo/form-group-modal-demo/form-group-modal-demo.component.html b/src/app/form-group-modal-demo/form-group-modal-demo/form-group-modal-demo.component.html
index 94bce33..a456f88 100644
--- a/src/app/form-group-modal-demo/form-group-modal-demo/form-group-modal-demo.component.html
+++ b/src/app/form-group-modal-demo/form-group-modal-demo/form-group-modal-demo.component.html
@@ -23,8 +23,8 @@
         <ng-container *psDataGridCell="let model">
             <button class="btn-success btn" psbxFormGroupCommandModal [commandTitle]="'Change ' + model.name + ' name'" commandText="Update"
             [dataSource]="merchantDataSource" command="changeMerchant" (formCreate)="onFormCreate($event)" [model]="model" [template]="theModal">Change</button>
-            <button class="btn-danger btn" psbxConfirmModal [commandTitle]="'Are you sure you wnat to remove ' + model.name + '?'" commandText="Remove"
-            [dataSource]="merchantDataSource" command="removeMerchant" [model]="model" >Delete!</button>
+            <!-- <button class="btn-danger btn" psbxConfirmModal [commandTitle]="'Are you sure you wnat to remove ' + model.name + '?'" commandText="Remove"
+            [dataSource]="merchantDataSource" command="removeMerchant" [model]="model" >Delete!</button> -->
         </ng-container>
     </ng-container>
     <ng-container *psDataGridFooter>
diff --git a/src/app/form-group-modal-demo/form-group-modal-demo/form-group-modal-demo.component.ts b/src/app/form-group-modal-demo/form-group-modal-demo/form-group-modal-demo.component.ts
index f6e872a..80a6ca9 100644
--- a/src/app/form-group-modal-demo/form-group-modal-demo/form-group-modal-demo.component.ts
+++ b/src/app/form-group-modal-demo/form-group-modal-demo/form-group-modal-demo.component.ts
@@ -31,7 +31,7 @@ export class FormGroupModalDemoComponent implements OnInit,OnDestroy {
 
   ngOnInit(): void {
     this.merchantDataSource.refresh();
-    this.merchantDataSource.data$.subscribe(newData => {     
+    this._dataSubscription = this.merchantDataSource.data$.subscribe(newData => {     
       if (newData)
         this.pages = new Array(newData.numberOfPages);
     });
diff --git a/src/app/grid-filter&sorting-demo/grid-filter-demo.module.ts b/src/app/grid-filter&sorting-demo/grid-filter-demo.module.ts
index 0a2a6ae..a2e831e 100644
--- a/src/app/grid-filter&sorting-demo/grid-filter-demo.module.ts
+++ b/src/app/grid-filter&sorting-demo/grid-filter-demo.module.ts
@@ -3,7 +3,7 @@ import { CommonModule } from '@angular/common';
 
 import { GridFilterDemoRoutingModule } from './grid-filter-demo-routing.module';
 import { GridFilterDemoComponent } from './grid-filter-demo/grid-filter-demo.component';
-import { DataSourceFilterModule, psbxPaginationModule, CommandModalModule, ConfirmModalModule, SpinnerModule, DataSourceSortingModule } from '@poweredsoft/ngx-bootstrap';
+import { DataSourceFilterModule, PaginationModule, CommandModalModule, ConfirmModalModule, SpinnerModule, DataSourceSortingModule, CommandModule } from '@poweredsoft/ngx-bootstrap';
 import { DataGridModule } from '@poweredsoft/ngx-cdk-ui';
 import { FormsModule } from '@angular/forms';
 
@@ -13,13 +13,14 @@ import { FormsModule } from '@angular/forms';
     CommonModule,
     GridFilterDemoRoutingModule,
     DataSourceFilterModule,    
-    psbxPaginationModule,
+    PaginationModule,
     DataGridModule,
     CommandModalModule,
     ConfirmModalModule,
     FormsModule,
     SpinnerModule,
-    DataSourceSortingModule
+    DataSourceSortingModule,
+    CommandModule
   ]
 })
 export class GridFilterDemoModule { }
diff --git a/src/app/grid-filter&sorting-demo/grid-filter-demo/grid-filter-demo.component.html b/src/app/grid-filter&sorting-demo/grid-filter-demo/grid-filter-demo.component.html
index 0d3d0bb..31d3811 100644
--- a/src/app/grid-filter&sorting-demo/grid-filter-demo/grid-filter-demo.component.html
+++ b/src/app/grid-filter&sorting-demo/grid-filter-demo/grid-filter-demo.component.html
@@ -55,9 +55,9 @@
                 <button class="btn-info btn" psbxCommandModal [commandTitle]="'Change ' + model.name + ' name'"
                 commandText="Update" [dataSource]="merchantDataSource" command="changeMerchant" [model]="model"
                 [template]="theModal">Change</button>
-            <button class="btn-danger btn" psbxConfirmModal
+            <!-- <button class="btn-danger btn" psbxConfirmModal
                 [commandTitle]="'Are you sure you wnat to remove ' + model.name + '?'" commandText="Remove"
-                [dataSource]="merchantDataSource" command="removeMerchant" [model]="model">Remove</button>
+                [dataSource]="merchantDataSource" command="removeMerchant" [model]="model">Remove</button> -->
             </div>
             
         </ng-container>
diff --git a/src/app/ng-select-demo/ng-select-demo/ng-select-demo.component.html b/src/app/ng-select-demo/ng-select-demo/ng-select-demo.component.html
index 271e430..0943788 100644
--- a/src/app/ng-select-demo/ng-select-demo/ng-select-demo.component.html
+++ b/src/app/ng-select-demo/ng-select-demo/ng-select-demo.component.html
@@ -30,10 +30,13 @@ selected:  {{ myForm.value | json }}
 selected: {{ myValue3 | json }} 
 
 <h2>Single Select Demo | notFound Template</h2>
-<ps-ng-select [dataSource]="merchantDataSource3" bindLabel="name" bindValue="id" [(ngModel)]="myValue2" [serverFiltering]="true">
+<ps-ng-select [dataSource]="merchantDataSource3" bindLabel="name" bindValue="id" [(ngModel)]="myValue2" [serverFiltering]="false">
     <div  *psNgNotFoundTemplate="let searchTerm">
         <div class="ng-option disabled">
-            No data found for "{{searchTerm}}" <button class="btn btn-success">Create New {{searchTerm}}</button>
+            No data found for "{{searchTerm}}" <button class="btn btn-success" 
+                psbxCommand
+                (success)="myValue2 = $event">
+                Create New {{searchTerm}}</button>
         </div>
     </div>
 </ps-ng-select>
diff --git a/src/app/pagination-demo/pagination-demo.module.ts b/src/app/pagination-demo/pagination-demo.module.ts
index fa4b050..4f1c717 100644
--- a/src/app/pagination-demo/pagination-demo.module.ts
+++ b/src/app/pagination-demo/pagination-demo.module.ts
@@ -4,7 +4,7 @@ import { CommonModule } from '@angular/common';
 import { PaginationDemoRoutingModule } from './pagination-demo-routing.module';
 import { PaginationDemoComponent } from './pagination-demo/pagination/pagination-demo.component';
 import { DataGridModule } from '@poweredsoft/ngx-cdk-ui';
-import { psbxPaginationModule, CommandModalModule, ConfirmModalModule,SpinnerModule } from '@poweredsoft/ngx-bootstrap';
+import { PaginationModule, CommandModalModule, ConfirmModalModule,SpinnerModule } from '@poweredsoft/ngx-bootstrap';
 import { FormsModule } from '@angular/forms';
 import { ModalModule } from 'ngx-bootstrap/modal';
 
@@ -16,7 +16,7 @@ import { ModalModule } from 'ngx-bootstrap/modal';
   imports: [
     CommonModule,
     PaginationDemoRoutingModule,
-    psbxPaginationModule,
+    PaginationModule,
     DataGridModule,
     CommandModalModule,
     ConfirmModalModule,
diff --git a/src/app/pagination-demo/pagination-demo/pagination/pagination-demo.component.html b/src/app/pagination-demo/pagination-demo/pagination/pagination-demo.component.html
index b7610a2..e6672e0 100644
--- a/src/app/pagination-demo/pagination-demo/pagination/pagination-demo.component.html
+++ b/src/app/pagination-demo/pagination-demo/pagination/pagination-demo.component.html
@@ -42,8 +42,8 @@
     <ng-container psDataGridCol="commands">
         <ng-container *psDataGridColHeader>Actions</ng-container>
         <ng-container *psDataGridCell="let model">
-            <button class="btn-danger btn" psbxConfirmModal [commandTitle]="'Are you sure you wnat to remove ' + model.name + '?'" commandText="Remove"
-            [dataSource]="merchantDataSource" command="removeMerchant" [model]="model" >Remove</button>
+            <!-- <button class="btn-danger btn" psbxConfirmModal [commandTitle]="'Are you sure you wnat to remove ' + model.name + '?'" commandText="Remove"
+            [dataSource]="merchantDataSource" command="removeMerchant" [model]="model" >Remove</button> -->
         </ng-container>
     </ng-container>
 
diff --git a/src/app/pagination-demo/pagination-demo/pagination/pagination-demo.component.ts b/src/app/pagination-demo/pagination-demo/pagination/pagination-demo.component.ts
index 4da193d..73bbdfb 100644
--- a/src/app/pagination-demo/pagination-demo/pagination/pagination-demo.component.ts
+++ b/src/app/pagination-demo/pagination-demo/pagination/pagination-demo.component.ts
@@ -31,7 +31,7 @@ export class PaginationDemoComponent implements OnInit, OnDestroy {
 
   ngOnInit() {
     this.merchantDataSource.refresh();
-    this.merchantDataSource.data$.subscribe(newData => {     
+    this._dataSubscription = this.merchantDataSource.data$.subscribe(newData => {     
       if (newData)
         this.pages = new Array(newData.numberOfPages);
     });