add btnClass to command-modal

projects/poweredsoft/ngx-bootstrap/src/lib/command-modal/command-modal/command-modal.component.html

@@ -12,7 +12,7 @@
 <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" [disabled]="loading" (click)="onSubmit()">{{ commandText }}</button>
+    <button type="button" class="btn btn-{{btnClass}}" [disabled]="loading" (click)="onSubmit()">{{ commandText }}</button>
     <br>
 
     <div class="progress" style="width: 100%" *ngIf="loading">

projects/poweredsoft/ngx-bootstrap/src/lib/command-modal/command-modal/command-modal.component.ts

@@ -23,7 +23,7 @@ export class CommandModalComponent implements OnInit, OnDestroy {
   cancelText: string;
   form:NgForm;
   validationMessage:string ;
-
+  btnClass:string;
   successEmitter: EventEmitter<any>; 
 
   private _notifyMessage: Subscription;

projects/poweredsoft/ngx-bootstrap/src/lib/command-modal/directives/command-modal.directive.ts

@@ -20,6 +20,7 @@ export class CommandModalDirective {
   @Input() commandText: string;
   @Input() cancelText: string;
   @Input() animated: boolean;
+  @Input() btnClass:string;
 
   @Output() success: EventEmitter<any> = new EventEmitter<any>();
 
@@ -38,7 +39,8 @@ export class CommandModalDirective {
         refreshOnSuccess: this.refreshOnSuccess === undefined ? true : this.refreshOnSuccess,
         commandText: this.commandText || 'OK',
         cancelText: this.cancelText || 'Cancel',
-        successEmitter: this.success
+        successEmitter: this.success,
+        btnClass: this.btnClass || 'primary'
       };
       this.modalService.show(CommandModalComponent, {
         animated: this.animated === undefined ? true : this.animated,

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

@@ -5,6 +5,7 @@ import { NgSelectDemoRoutingModule } from './ng-select-demo-routing.module';
 import { NgSelectModule } from '@ng-select/ng-select';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { PsNgSelectModule } from '@poweredsoft/ng-select';
+import { CommandModule, CommandModalModule } from '@poweredsoft/ngx-bootstrap';
 
 
 
@@ -17,7 +18,9 @@ import { PsNgSelectModule } from '@poweredsoft/ng-select';
     FormsModule,
     ReactiveFormsModule,
     NgSelectDemoRoutingModule,
-    PsNgSelectModule
+    PsNgSelectModule,
+    CommandModule,
+    CommandModalModule
   ]
 })
 export class NgSelectDemoModule { }

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

@@ -33,10 +33,16 @@ selected: {{ myValue3 | json }}
 <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" 
-                psbxCommand
-                (success)="myValue2 = $event">
-                Create New {{searchTerm}}</button>
+            No data found for "{{searchTerm}}"
+                <button class="btn-primary btn" 
+                psbxCommandModal 
+                commandTitle="Adding a new {{searchTerm}}" 
+                commandText="Add"
+                [dataSource]="merchantDataSource" 
+                command="addMerchant" 
+                cancelText="Abort"
+                [template]="theModal"
+                (success)="myValue2 = $event"> Create New {{searchTerm}}</button>
         </div>
     </div>
 </ps-ng-select>
@@ -53,3 +59,11 @@ selected: {{ myValue2 | json }}
 </ps-ng-multi-select>
 selected: {{ myValue4 | json }} 
 
+<ng-template #theModal let-command let-loading="loading">
+    <form   >
+        Name
+        <input type="text" required [disabled]="loading" name="name" [(ngModel)]="command.name"  placeholder="Enter a merchant name" class="form-control" >
+        Address
+        <input type="text" required [disabled]="loading" name="address" [(ngModel)]="command.address"  placeholder="Enter the merchant's address" class="form-control" >                
+    </form>
+</ng-template>