demo commit

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

@@ -4,8 +4,10 @@
 <ps-data-grid [dataSource]="merchantDataSource" [(columns)]="columns"
     tableClasses="table table-sm table-dark table-striped table-bordered">
     <ng-container *psDataGridHeader>
-        <button class="btn-primary btn" psbxCommandModal commandTitle="Adding a new merchant" commandText="Add"
-            [dataSource]="merchantDataSource" command="addMerchant" [template]="theModal">Create a new record</button>
+        <button class="btn-primary btn" psbxCommandModal 
+        commandTitle="Adding a new merchant" commandText="Add"
+            [dataSource]="merchantDataSource" command="addMerchant" 
+            [template]="theModal">Create a new record</button>
 
     </ng-container>
     <ng-container psDataGridCol="id">
@@ -51,6 +53,8 @@
         <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" >        
+        Date
+        <input type="text" required [disabled]="loading" name="address" [(ngModel)]="command.address"  placeholder="Enter the merchant's address" class="form-control" >        
     </form>
     
 </ng-template>

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

@@ -2,15 +2,9 @@
     This is a demo for a grid.
 </h1>
 
-    <ps-data-grid [dataSource]="merchantDataSource" [(columns)]="columns" tableClasses="table table-sm table-bordered" >
-        
-        <!-- <ng-container *psDataGridHeader>
-            <h1>Hey! </h1>
-            <p>Welcome to my Grid!</p>
-            <label>New merchant name</label>
-            <input class="form-control" #newMerchantName/>
-            <button class="btn btn-primary btn-sm" (click)="newMerchant(newMerchantName.value)">Add</button>
-        </ng-container> -->
+    <ps-data-grid [dataSource]="merchantDataSource" [(columns)]="columns" 
+    tableClasses="table table-sm table-bordered" >
+
         <ng-container *psDataGridHeader>
             Some header
         </ng-container>

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

@@ -13,27 +13,14 @@
     <ng-container psDataGridCol="id">
         <ng-container *psDataGridColHeader>ID</ng-container>
         <psbx-ds-text-filter *psDataGridCellFilter [dataSource]="merchantDataSource" path="id"></psbx-ds-text-filter>
-        <psbx-grid-sorting *psDataGridColSort [dataSource]="merchantDataSource" path="id"></psbx-grid-sorting>
-        <ng-container *psDataGridCell="let model">{{model.id}}</ng-container>
-        <!--<psbx-number-filter *psDataGridCellFilter [dataSource]="merchantDataSource" path="id"></psbx-number-filter>-->
-        <!--<psbx-grid-sorting *psDataGridColSort path="id" [dataSource]="merchantDataSource"></psbx-grid-sorting>-->
-        <!-- <psfa-ds-sort-icon *psDataGridColSort [sortPath]="id" [dataSource]="merchantDataSource">
-
-        </psfa-ds-sort-icon>  -->
-
-        <!-- <psbx-ds-text-filter *psDataGridCellFilter [dataSource]="merchantDataSource"></psbx-ds-text-filter>
-        <psdb-ds-date-filter *psDataGridCellFilter></psdb-ds-date-filter>
-        <psdb-ds-date-range-filter *psDataGridCellFilter></psdb-ds-date-range-filter>
-        <psbx-ds-number-filter *psDataGridCellFilter></psbx-ds-number-filter>
-        <psbx-ds-multi-select-filter [dataSource]="merchantDataSource" [selectDataSource]="selectDataSource" [valueField]="id">
-            <ng-container *psSelectOption="let option">{{ option.name }}</ng-container>
-        </psbx-ds-multi-select-filter> -->
+        <psbx-ds-sorting *psDataGridColSort [dataSource]="merchantDataSource" path="id"></psbx-ds-sorting>
+        <ng-container *psDataGridCell="let model">{{model.id}}</ng-container>      
     </ng-container>
 
     <ng-container psDataGridCol="name">
         <ng-container *psDataGridColHeader>Name</ng-container>
         <psbx-ds-text-filter *psDataGridCellFilter [dataSource]="merchantDataSource" path="name"></psbx-ds-text-filter>
-        <psbx-grid-sorting *psDataGridColSort [dataSource]="merchantDataSource" path="name"></psbx-grid-sorting>
+        <psbx-ds-sorting *psDataGridColSort [dataSource]="merchantDataSource" path="name"></psbx-ds-sorting>
         <ng-container *psDataGridCell="let model">{{model.name}}</ng-container>
     </ng-container>
 
@@ -42,15 +29,15 @@
         <ng-container *psDataGridCell="let model">{{model.address}}</ng-container>
         <psbx-ds-text-filter *psDataGridCellFilter [dataSource]="merchantDataSource" path="address">
         </psbx-ds-text-filter>
-        <psbx-grid-sorting *psDataGridColSort [dataSource]="merchantDataSource" path="address"></psbx-grid-sorting>
+        <psbx-ds-sorting *psDataGridColSort [dataSource]="merchantDataSource" path="address"></psbx-ds-sorting>
     </ng-container>
 
     <ng-container psDataGridCol="ordering">
         <ng-container *psDataGridColHeader>Priority</ng-container>
         <ng-container *psDataGridCell="let model">{{model.ordering}}</ng-container>
-        <psbx-number-filter *psDataGridCellFilter [dataSource]="merchantDataSource" path="ordering">
-        </psbx-number-filter>
-        <psbx-grid-sorting *psDataGridColSort [dataSource]="merchantDataSource" path="ordering"></psbx-grid-sorting>
+        <psbx-ds-number-filter *psDataGridCellFilter [dataSource]="merchantDataSource" path="ordering">
+        </psbx-ds-number-filter>
+        <psbx-ds-sorting *psDataGridColSort [dataSource]="merchantDataSource" path="ordering"></psbx-ds-sorting>
     </ng-container>
 
     <ng-container psDataGridCol="openDate">
@@ -58,7 +45,7 @@
         <ng-container *psDataGridCell="let model">{{model.openDate}}</ng-container>
         <psbx-datetime-filter *psDataGridCellFilter [dataSource]="merchantDataSource" path="openDate">
         </psbx-datetime-filter>
-        <psbx-grid-sorting *psDataGridColSort [dataSource]="merchantDataSource" path="openDate"></psbx-grid-sorting>
+        <psbx-ds-sorting *psDataGridColSort [dataSource]="merchantDataSource" path="openDate"></psbx-ds-sorting>
     </ng-container>
 
     <ng-container psDataGridCol="commands">

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

@@ -11,21 +11,34 @@ selected: {{ myValue | json }}
 <form #form [formGroup]="myForm">
     <ps-ng-select [dataSource]="merchantDataSource2" bindLabel="name" bindValue="id" formControlName="merchantId" [serverFiltering]="true">
         <div *psNgSelectOption="let item">
-            {{ item.name }} - {{ item.address }}
+           <span>Merchant:</span>  {{ item.name }} - <span>Address: </span>{{ item.address }}
         </div>
     </ps-ng-select>
 </form>
-
 selected:  {{ myForm.value | json }}
 
 <h2>Single Select Demo | label Template</h2>
 <ps-ng-select [dataSource]="merchantDataSource3" bindLabel="name" bindValue="id" [(ngModel)]="myValue3" [serverFiltering]="true">
+    <div *psNgSelectOption="let item">
+        <span>Merchant:</span>  {{ item.name }} - <span>Address: </span>{{ item.address }}
+     </div>
+    
     <div  *psNgSelectLabel="let item">
         <img src="assets/32x32-blue.png"><span>Name: </span>{{ item.name }} - <span> Address: </span>{{item.address }}
     </div>
 </ps-ng-select>
 selected: {{ myValue3 | json }} 
 
+<h2>Single Select Demo | notFound Template</h2>
+<ps-ng-select [dataSource]="merchantDataSource3" bindLabel="name" bindValue="id" [(ngModel)]="myValue2" [serverFiltering]="true">
+    <div  *psNgNotFoundTemplate="let searchTerm">
+        <div class="ng-option disabled">
+            No data found for "{{searchTerm}}" <button class="btn btn-success">Create New {{searchTerm}}</button>
+        </div>
+    </div>
+</ps-ng-select>
+selected: {{ myValue2 | json }} 
+
  <h2>Multi-Select Demo</h2>
 <ps-ng-multi-select [dataSource]="merchantDataSource4" bindLabel="name" bindValue="id"  [serverFiltering]="true" [(ngModel)]="myValue4" >
     <div   *psNgSelectOption="let item">