From f4cec5c48fa94ff95d0aa57d4cb414b518fa3746 Mon Sep 17 00:00:00 2001
From: Yubing325 <35515298+Yubing325@users.noreply.github.com>
Date: Tue, 7 Jul 2020 12:08:36 -0500
Subject: [PATCH] some fix regarding multi-select

---
 .../multi-select/multi-select.component.html  | 12 ++++-----
 .../select-label-template.directive.ts        |  3 +--
 .../data-grid/data-grid.component.scss        |  3 ++-
 src/app/app.component.html                    |  2 +-
 .../grid-filter-demo.component.html           | 25 +++++++++++--------
 .../ng-select-demo.component.html             | 10 ++++++--
 .../ng-select-demo.component.ts               |  7 +++---
 7 files changed, 36 insertions(+), 26 deletions(-)

diff --git a/projects/poweredsoft/ng-select/src/lib/ps-ng-selectors/multi-select/multi-select.component.html b/projects/poweredsoft/ng-select/src/lib/ps-ng-selectors/multi-select/multi-select.component.html
index 39f985b..f907a74 100644
--- a/projects/poweredsoft/ng-select/src/lib/ps-ng-selectors/multi-select/multi-select.component.html
+++ b/projects/poweredsoft/ng-select/src/lib/ps-ng-selectors/multi-select/multi-select.component.html
@@ -18,12 +18,12 @@
            </ng-container>
 
            <ng-container *ngIf="hasLabelTemplate">
-            <ng-template ng-label-tmp let-item="item" let-index="index">
-             <ng-container [ngTemplateOutlet]="selectLabelTemplate"
-                 [ngTemplateOutletContext]="{
-                 $implicit: item,
-                 index: index       
-                 }"></ng-container>
+            <ng-template ng-label-tmp let-item="item" let-index="index" let-clear="clear">
+                <span class="ng-value-label">
+                    <ng-container [ngTemplateOutlet]="selectLabelTemplate"
+                    [ngTemplateOutletContext]="{ $implicit: item, index: index, clear: clear }"></ng-container>
+                </span>
+                <span class="ng-value-icon right" (click)="clear(item)" aria-hidden="true">×</span>
             </ng-template>
         </ng-container>
 </ng-select>
diff --git a/projects/poweredsoft/ng-select/src/lib/ps-ng-selectors/select-label-template.directive.ts b/projects/poweredsoft/ng-select/src/lib/ps-ng-selectors/select-label-template.directive.ts
index 1c0af77..55dc0a1 100644
--- a/projects/poweredsoft/ng-select/src/lib/ps-ng-selectors/select-label-template.directive.ts
+++ b/projects/poweredsoft/ng-select/src/lib/ps-ng-selectors/select-label-template.directive.ts
@@ -1,10 +1,9 @@
-import { Directive, TemplateRef } from '@angular/core';
+import { Directive, TemplateRef, Input } from '@angular/core';
 
 @Directive({
   selector: '[psNgSelectLabel]'
 })
 export class SelectLabelTemplateDirective {
-
   constructor(public template: TemplateRef<any>) { }
 
 }
diff --git a/projects/poweredsoft/ngx-cdk-ui/src/lib/data-grid/data-grid/data-grid.component.scss b/projects/poweredsoft/ngx-cdk-ui/src/lib/data-grid/data-grid/data-grid.component.scss
index 54bb095..f8c69f8 100644
--- a/projects/poweredsoft/ngx-cdk-ui/src/lib/data-grid/data-grid/data-grid.component.scss
+++ b/projects/poweredsoft/ngx-cdk-ui/src/lib/data-grid/data-grid/data-grid.component.scss
@@ -1,9 +1,10 @@
 :host  .flex-container{
     display: flex;
     justify-content: space-between;
-    align-items: baseline;
+    align-items: center;
 }
 
 :host .flex-item{
     margin-right: 1px;
+    height: 100%;
 }
\ No newline at end of file
diff --git a/src/app/app.component.html b/src/app/app.component.html
index 9e70e1b..9a6dc95 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -29,7 +29,7 @@
         </li>
       </ul>
     </div>
-    <div class="col-lg-10" style="padding-top: 5px">
+    <div class="col-lg-10" style="padding-top: 5px;">
       <router-outlet></router-outlet>
     </div>
   </div>
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 041acd5..6abfc63 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
@@ -11,10 +11,10 @@
 
 
     <ng-container psDataGridCol="id">
-        <div *psDataGridColHeader>ID</div>
+        <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>
-        <div *psDataGridCell="let model">{{model.id}}</div>
+        <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">
@@ -31,31 +31,31 @@
     </ng-container>
 
     <ng-container psDataGridCol="name">
-        <div *psDataGridColHeader>Name</div>
+        <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>
-        <div *psDataGridCell="let model">{{model.name}}</div>
+        <ng-container *psDataGridCell="let model">{{model.name}}</ng-container>
     </ng-container>
 
     <ng-container psDataGridCol="address">
-        <div *psDataGridColHeader>Address</div>
-        <div *psDataGridCell="let model">{{model.address}}</div>
+        <ng-container *psDataGridColHeader>Address</ng-container>
+        <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>
     </ng-container>
 
     <ng-container psDataGridCol="ordering">
-        <div *psDataGridColHeader>Priority</div>
-        <div *psDataGridCell="let model">{{model.ordering}}</div>
+        <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>
     </ng-container>
 
     <ng-container psDataGridCol="openDate">
-        <div *psDataGridColHeader>Open Date</div>
-        <div *psDataGridCell="let model">{{model.openDate}}</div>
+        <ng-container *psDataGridColHeader>Open Date</ng-container>
+        <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>
@@ -64,12 +64,15 @@
     <ng-container psDataGridCol="commands">
         <ng-container *psDataGridColHeader>Actions</ng-container>
         <ng-container *psDataGridCell="let model">
-            <button class="btn-info btn" psbxCommandModal [commandTitle]="'Change ' + model.name + ' name'"
+            <div class="btn-group">
+                <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
                 [commandTitle]="'Are you sure you wnat to remove ' + model.name + '?'" commandText="Remove"
                 [dataSource]="merchantDataSource" command="removeMerchant" [model]="model">Remove</button>
+            </div>
+            
         </ng-container>
     </ng-container>
     <ng-container *psDataGridFooter>
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 502d3c0..3e45f9b 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
@@ -24,10 +24,16 @@ selected:  {{ myForm.value | json }}
         <img src="assets/32x32-blue.png"><span>Name: </span>{{ item.name }} - <span> Address: </span>{{item.address }}
     </div>
 </ps-ng-select>
+selected: {{ myValue3 | json }} 
 
  <h2>Multi-Select Demo</h2>
 <ps-ng-multi-select [dataSource]="merchantDataSource4" bindLabel="name" bindValue="id"  [serverFiltering]="true" [(ngModel)]="myValue4" >
-
+    <div   *psNgSelectOption="let item">
+        <img src="assets/32x32-blue.png"><span>Name: </span>{{ item.name }} - <span> Address: </span>{{item.address }}
+    </div>
+    <ng-container  *psNgSelectLabel="let item;">
+        {{ item.name }}
+    </ng-container>
 </ps-ng-multi-select>
-selected: {{ myValue | json }} 
+selected: {{ myValue4 | json }} 
 
diff --git a/src/app/ng-select-demo/ng-select-demo/ng-select-demo.component.ts b/src/app/ng-select-demo/ng-select-demo/ng-select-demo.component.ts
index b0f6eaa..c0e511b 100644
--- a/src/app/ng-select-demo/ng-select-demo/ng-select-demo.component.ts
+++ b/src/app/ng-select-demo/ng-select-demo/ng-select-demo.component.ts
@@ -20,11 +20,12 @@ export class NgSelectDemoComponent implements OnInit {
   merchantDataSource4: IDataSource<IMerchant>;   
   
   selectedValue: IMerchant;
-  selectedValue2: IMerchant;
-  selectedValue3: IMerchant;
-  selectedValue4: IMerchant;
+
   myForm: FormGroup;
   myValue: string;
+  myValue2: string;
+  myValue3: string;
+  myValue4: string;
 
   constructor(private merchantService: MerchantService, private fb: FormBuilder
               ) {