From 3c8ba74ddb66f72166e2e4c28336ef5600bf657b Mon Sep 17 00:00:00 2001
From: Pankaj Parkar <parkarpankaj3@gmail.com>
Date: Thu, 11 Jul 2019 23:56:03 +0530
Subject: [PATCH 01/14] Refactored CSS of multiselect component and helper
 element (only mat theme)

---
 .../helper-elements.component.css             |  7 ++----
 .../src/lib/multiselect.component.css         | 24 +++++++++----------
 2 files changed, 13 insertions(+), 18 deletions(-)

diff --git a/projects/multiselect/src/lib/helper-elements/helper-elements.component.css b/projects/multiselect/src/lib/helper-elements/helper-elements.component.css
index 9d19147c..1de6a45e 100644
--- a/projects/multiselect/src/lib/helper-elements/helper-elements.component.css
+++ b/projects/multiselect/src/lib/helper-elements/helper-elements.component.css
@@ -2,15 +2,12 @@
 
 .mat-multiselect :host .helper-buttons {
   border-bottom: 1px solid #ddd;
-  padding: 4px;
+  padding: 2px 0;
 }
 
 .mat-multiselect :host .helper-button {
-  display: inline-block;
   font-weight: 400;
   color: #444;
-  text-align: center;
-  vertical-align: middle;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
@@ -27,7 +24,7 @@
 }
 
 .mat-multiselect :host .helper-button:not(:last-child) {
-  margin-right: 4px;
+  margin: 0 2px;
 }
 
 /* Material CSS end */
diff --git a/projects/multiselect/src/lib/multiselect.component.css b/projects/multiselect/src/lib/multiselect.component.css
index 91463989..b5fafaa9 100644
--- a/projects/multiselect/src/lib/multiselect.component.css
+++ b/projects/multiselect/src/lib/multiselect.component.css
@@ -5,11 +5,6 @@
 /* Material multiselect theme start*/
 
 :host.mat-multiselect ::ng-deep .caret {
-  right: 5px;
-  position: absolute;
-  margin-top: 5px;
-  width: 0;
-  height: 0;
   border-left: 5px solid transparent;
   border-right: 5px solid transparent;
   border-top: 5px solid;
@@ -20,17 +15,16 @@
 }
 
 :host.mat-multiselect ::ng-deep .dropdown-button {
-  width: 100%;
+  display: flex;
   text-align: left;
-  display: inline-block;
+  width: 100%;
   position: relative;
   cursor: pointer;
   border: none;
-  padding: 1px 8px 1px 8px;
-  font-size: 14px;
-  min-height: 38px !important;
+  padding: 5px;
+  font-size: inherit;
+  min-height: 38px!important;
   border-radius: 4px;
-  color: #555;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
@@ -130,8 +124,12 @@
 
 :host.mat-multiselect ::ng-deep .selection {
   color: #000;
+  display: flex;
   padding-bottom: 10px;
-  border-bottom: 1px solid black;
+  border-bottom: 1px solid #000;
+  flex-grow: 1;
+  justify-content: space-between;
+  align-items: center;
 }
 
 :host.mat-multiselect ::ng-deep .open .selection {
@@ -174,7 +172,7 @@
   position: relative;
   cursor: pointer;
   border: 1px solid #c6c6c6;
-  padding: 1px 8px 1px 8px;
+  padding: 5px;
   font-size: 14px;
   min-height: 38px !important;
   border-radius: 4px;

From 86f088655f55dd691f241fa5959caa6a4b8daf49 Mon Sep 17 00:00:00 2001
From: Pankaj Parkar <parkarpankaj3@gmail.com>
Date: Fri, 12 Jul 2019 00:08:03 +0530
Subject: [PATCH 02/14] CSS refactoring filter-options mat theme.

---
 .../filter-options.component.css              | 40 +++----------------
 1 file changed, 6 insertions(+), 34 deletions(-)

diff --git a/projects/multiselect/src/lib/filter-options/filter-options.component.css b/projects/multiselect/src/lib/filter-options/filter-options.component.css
index d8800516..c1f1695a 100644
--- a/projects/multiselect/src/lib/filter-options/filter-options.component.css
+++ b/projects/multiselect/src/lib/filter-options/filter-options.component.css
@@ -1,65 +1,37 @@
 /* Material CSS start */
 
 :host {
-  width: 100%;
-  display: block;
+  display: flex;
 }
 
 .mat-multiselect :host ::ng-deep .input-search {
-  width: 100%;
-  position: relative;
-  max-height: 35px;
-  overflow: hidden;
-  box-sizing: content-box;
-  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
-  display: inline-flex;
+  display: flex;
+  flex-grow: 1;
+  align-items: center;
 }
 
 .mat-multiselect :host ::ng-deep .input-filter {
   font: inherit;
-  background: 0 0;
-  color: currentColor;
   border: none;
-  outline: 0;
-  padding: 0;
-  margin: 0;
-  width: 100%;
-  max-width: 100%;
-  vertical-align: bottom;
-  text-align: inherit;
-  margin-top: -0.0625em;
 }
 
 .mat-multiselect :host ::ng-deep .field-infix {
-  display: block;
-  position: relative;
   padding: 5px 10px;
-  flex: auto;
-  min-width: 0;
   width: 90%;
-  position: relative;
 }
 
 .mat-multiselect :host ::ng-deep .field-suffix {
-  width: 20px;
-  height: 20px;
   white-space: nowrap;
-  flex: none;
-  position: relative;
-  top: 5px;
-  right: 5px;
+  margin: 3px;
 }
 .mat-multiselect :host ::ng-deep .field-suffix button {
-  position: relative;
   padding: 0;
   border: none;
-  font-size: 14px;
+  font-size: inherit;
   width: 20px;
   height: 20px;
   min-width: 20px;
   border-radius: 10px;
-  line-height: 1;
-  font-weight: 500;
 }
 
 /* Material CSS end */

From 623062662dc761ab0162c3dc6e77c98a9dd570de Mon Sep 17 00:00:00 2001
From: Pankaj Parkar <parkarpankaj3@gmail.com>
Date: Fri, 12 Jul 2019 00:28:04 +0530
Subject: [PATCH 03/14] Refactored option in mat theme.

---
 .../filter-options.component.css              |  1 +
 .../src/lib/multiselect.component.css         | 31 +++----------------
 2 files changed, 6 insertions(+), 26 deletions(-)

diff --git a/projects/multiselect/src/lib/filter-options/filter-options.component.css b/projects/multiselect/src/lib/filter-options/filter-options.component.css
index c1f1695a..0a353f19 100644
--- a/projects/multiselect/src/lib/filter-options/filter-options.component.css
+++ b/projects/multiselect/src/lib/filter-options/filter-options.component.css
@@ -12,6 +12,7 @@
 
 .mat-multiselect :host ::ng-deep .input-filter {
   font: inherit;
+  outline: none;
   border: none;
 }
 
diff --git a/projects/multiselect/src/lib/multiselect.component.css b/projects/multiselect/src/lib/multiselect.component.css
index b5fafaa9..b0b8c470 100644
--- a/projects/multiselect/src/lib/multiselect.component.css
+++ b/projects/multiselect/src/lib/multiselect.component.css
@@ -1,5 +1,6 @@
 :host {
   display: inline-block;
+  outline: none;
 }
 
 /* Material multiselect theme start*/
@@ -46,17 +47,9 @@
 }
 
 :host.mat-multiselect ::ng-deep .options-container {
-  transform-origin: 50% 24px 0px;
-  font-size: 16px;
-  opacity: 1;
   height: 200px;
-  transform: scaleY(1);
   overflow-x: hidden;
   overflow-y: scroll;
-  -webkit-overflow-scrolling: touch;
-  padding-top: 0;
-  padding-bottom: 0;
-  max-height: 256px;
   min-width: 100%;
   border-radius: 4px;
   background: #fff;
@@ -64,22 +57,14 @@
 
 :host.mat-multiselect ::ng-deep .option {
   white-space: nowrap;
-  border-left: 0.5px solid #eee;
+  border-left: .5px solid #eee;
   overflow: hidden;
   text-overflow: ellipsis;
-  display: block;
-  line-height: 3em;
-  height: 3em;
+  height: 40px;
   padding: 0 6px;
-  text-align: left;
-  text-decoration: none;
-  position: relative;
-  cursor: pointer;
   outline: 0;
   display: flex;
-  flex-direction: row;
-  max-width: 100%;
-  box-sizing: border-box;
+  flex-flow: row;
   align-items: center;
   -webkit-tap-highlight-color: transparent;
   max-height: 40px;
@@ -91,17 +76,11 @@
   background-image: linear-gradient(#e9e9e9, #f1f1f1);
   color: #555;
   cursor: pointer;
-  border-top: 1px solid #e4e4e4;
-  border-left: 1px solid #e4e4e4;
-  border-right: 1px solid #d9d9d9;
+  justify-content: space-between;
 }
 
 :host.mat-multiselect ::ng-deep .marked::after {
   content: '✓';
-  margin: 2px 10px;
-  right: 0;
-  top: -5px;
-  position: absolute;
 }
 
 :host.mat-multiselect ::ng-deep .option.disabled,

From 994ae9c20c9342b5de1df80f410516c3bbdfa646 Mon Sep 17 00:00:00 2001
From: Pankaj Parkar <parkarpankaj3@gmail.com>
Date: Fri, 19 Jul 2019 23:59:05 +0530
Subject: [PATCH 04/14] caret and close icon alignment change for mat theme

---
 .../multiselect/src/lib/multiselect.component.css  | 14 +++++++-------
 .../multiselect/src/lib/multiselect.component.html |  8 +++++---
 2 files changed, 12 insertions(+), 10 deletions(-)

diff --git a/projects/multiselect/src/lib/multiselect.component.css b/projects/multiselect/src/lib/multiselect.component.css
index b0b8c470..9aeacd2f 100644
--- a/projects/multiselect/src/lib/multiselect.component.css
+++ b/projects/multiselect/src/lib/multiselect.component.css
@@ -5,7 +5,7 @@
 
 /* Material multiselect theme start*/
 
-:host.mat-multiselect ::ng-deep .caret {
+:host.mat-multiselect ::ng-deep .symbols .caret {
   border-left: 5px solid transparent;
   border-right: 5px solid transparent;
   border-top: 5px solid;
@@ -114,17 +114,17 @@
 :host.mat-multiselect ::ng-deep .open .selection {
   border-bottom: 1px solid blue;
 }
-:host.mat-multiselect ::ng-deep .close {
-  float: right;
-  right: 10px;
-  position: relative;
+:host.mat-multiselect ::ng-deep .symbols {
+  justify-content: flex-end;
+  display: flex;
+  align-items: center;
 }
 
 /* Material multiselect theme end*/
 
 /* Bootstrap multiselect theme start */
 
-:host.bs-multiselect ::ng-deep .caret {
+:host.bs-multiselect ::ng-deep .symbols .caret {
   right: 0;
   position: absolute;
   margin-right: 5px;
@@ -236,7 +236,7 @@
   cursor: not-allowed !important;
 }
 
-:host.bs-multiselect ::ng-deep .close {
+:host.bs-multiselect ::ng-deep .symbols .close {
   float: right;
   right: 10px;
   position: relative;
diff --git a/projects/multiselect/src/lib/multiselect.component.html b/projects/multiselect/src/lib/multiselect.component.html
index b1944b25..17116fd1 100644
--- a/projects/multiselect/src/lib/multiselect.component.html
+++ b/projects/multiselect/src/lib/multiselect.component.html
@@ -5,9 +5,11 @@
       <span class="none-selected" *ngIf="!isValueSelected()">None selected</span>
       <span class="selected" *ngIf="isValueSelected()">
         <span class="text">{{_selectedOptions | displaySelectedValue: showMaxLabels}}</span>
-      </span>     
-      <span class="close" (click)="clear($event)" *ngIf="isValueSelected() && !multiple">×</span>
-      <span class="caret"></span>
+      </span>
+      <div class="symbols">
+        <span class="close" (click)="clear($event)" *ngIf="isValueSelected() && !multiple">×</span>
+        <span class="caret"></span>
+      </div>
     </div>
   </button>
   <div class="listing-wrapper" *ngIf="isOpen">

From 5089397a1480d684d83bf176efeaa49c4dfb7f49 Mon Sep 17 00:00:00 2001
From: Pankaj Parkar <parkarpankaj3@gmail.com>
Date: Sat, 20 Jul 2019 00:05:07 +0530
Subject: [PATCH 05/14] search-button border fixed.

---
 .../src/lib/filter-options/filter-options.component.css         | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/projects/multiselect/src/lib/filter-options/filter-options.component.css b/projects/multiselect/src/lib/filter-options/filter-options.component.css
index 0a353f19..a5e74174 100644
--- a/projects/multiselect/src/lib/filter-options/filter-options.component.css
+++ b/projects/multiselect/src/lib/filter-options/filter-options.component.css
@@ -8,6 +8,8 @@
   display: flex;
   flex-grow: 1;
   align-items: center;
+  max-height: 35px;
+  border-bottom: 1px solid rgba(0,0,0,.12);
 }
 
 .mat-multiselect :host ::ng-deep .input-filter {

From 66f01091e136a40714b5f5f6d7b513489cdfbacd Mon Sep 17 00:00:00 2001
From: Pankaj Parkar <parkarpankaj3@gmail.com>
Date: Sat, 20 Jul 2019 01:07:58 +0530
Subject: [PATCH 06/14] Bootstrap style refactoring made only for button.

---
 .../src/lib/multiselect.component.css         | 72 +++++++------------
 1 file changed, 27 insertions(+), 45 deletions(-)

diff --git a/projects/multiselect/src/lib/multiselect.component.css b/projects/multiselect/src/lib/multiselect.component.css
index 9aeacd2f..d88b3f83 100644
--- a/projects/multiselect/src/lib/multiselect.component.css
+++ b/projects/multiselect/src/lib/multiselect.component.css
@@ -3,28 +3,43 @@
   outline: none;
 }
 
-/* Material multiselect theme start*/
+.multiselect-wrapper {
+  width: 240px;
+  display: flex;
+  flex-grow: 1;
+}
+
+.selection {
+  display: flex;
+  flex-grow: 1;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.symbols {
+  justify-content: flex-end;
+  display: flex;
+  align-items: center;
+}
 
-:host.mat-multiselect ::ng-deep .symbols .caret {
+.symbols .caret {
   border-left: 5px solid transparent;
   border-right: 5px solid transparent;
   border-top: 5px solid;
 }
 
-:host.mat-multiselect ::ng-deep .multiselect-wrapper {
-  width: 240px;
-}
+/* Material multiselect theme start*/
 
 :host.mat-multiselect ::ng-deep .dropdown-button {
   display: flex;
   text-align: left;
-  width: 100%;
+  flex-grow: 1;
   position: relative;
   cursor: pointer;
   border: none;
   padding: 5px;
   font-size: inherit;
-  min-height: 38px!important;
+  min-height: 39px;
   border-radius: 4px;
   -webkit-user-select: none;
   -moz-user-select: none;
@@ -103,57 +118,30 @@
 
 :host.mat-multiselect ::ng-deep .selection {
   color: #000;
-  display: flex;
   padding-bottom: 10px;
   border-bottom: 1px solid #000;
-  flex-grow: 1;
-  justify-content: space-between;
-  align-items: center;
 }
 
 :host.mat-multiselect ::ng-deep .open .selection {
   border-bottom: 1px solid blue;
 }
-:host.mat-multiselect ::ng-deep .symbols {
-  justify-content: flex-end;
-  display: flex;
-  align-items: center;
-}
 
 /* Material multiselect theme end*/
 
 /* Bootstrap multiselect theme start */
 
-:host.bs-multiselect ::ng-deep .symbols .caret {
-  right: 0;
-  position: absolute;
-  margin-right: 5px;
-  width: 0;
-  height: 0;
-  border-left: 5px solid transparent;
-  border-right: 5px solid transparent;
-  border-top: 5px solid;
-  top: 16px;
-}
-
 :host.bs-multiselect ::ng-deep .marked {
   background-color: green;
 }
 
-:host.bs-multiselect ::ng-deep .multiselect-wrapper {
-  width: 240px;
-}
-
 :host.bs-multiselect ::ng-deep .dropdown-button {
-  width: 100%;
-  text-align: left;
-  display: inline-block;
-  position: relative;
+  display: flex;
   cursor: pointer;
   border: 1px solid #c6c6c6;
   padding: 5px;
-  font-size: 14px;
-  min-height: 38px !important;
+  flex-grow: 1;
+  font-size: inherit;
+  min-height: 39px;
   border-radius: 4px;
   color: #555;
   -webkit-user-select: none;
@@ -163,7 +151,7 @@
   user-select: none;
   white-space: normal;
   background-color: #fff;
-  background-image: linear-gradient(#fff, #f7f7f7);
+  background-image: linear-gradient(#fff,#f7f7f7);
 }
 
 :host.bs-multiselect ::ng-deep .listing-wrapper {
@@ -235,9 +223,3 @@
   pointer-events: none;
   cursor: not-allowed !important;
 }
-
-:host.bs-multiselect ::ng-deep .symbols .close {
-  float: right;
-  right: 10px;
-  position: relative;
-}

From 4ebb0363d06d30821b9c1a4eb6e89baf9cd10f30 Mon Sep 17 00:00:00 2001
From: Pankaj Parkar <parkarpankaj3@gmail.com>
Date: Sat, 20 Jul 2019 18:57:01 +0530
Subject: [PATCH 07/14] common css reused and generalised.

---
 .../src/lib/multiselect.component.css         | 35 +++----------------
 1 file changed, 4 insertions(+), 31 deletions(-)

diff --git a/projects/multiselect/src/lib/multiselect.component.css b/projects/multiselect/src/lib/multiselect.component.css
index d88b3f83..3951253b 100644
--- a/projects/multiselect/src/lib/multiselect.component.css
+++ b/projects/multiselect/src/lib/multiselect.component.css
@@ -28,19 +28,14 @@
   border-top: 5px solid;
 }
 
-/* Material multiselect theme start*/
-
-:host.mat-multiselect ::ng-deep .dropdown-button {
+.dropdown-button {
   display: flex;
-  text-align: left;
   flex-grow: 1;
-  position: relative;
   cursor: pointer;
   border: none;
   padding: 5px;
   font-size: inherit;
   min-height: 39px;
-  border-radius: 4px;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
@@ -50,7 +45,7 @@
   background-color: #fff;
 }
 
-:host.mat-multiselect ::ng-deep .listing-wrapper {
+.listing-wrapper {
   width: inherit;
   background-color: #fff;
   position: absolute;
@@ -61,6 +56,8 @@
   box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
 }
 
+/* Material multiselect theme start*/
+
 :host.mat-multiselect ::ng-deep .options-container {
   height: 200px;
   overflow-x: hidden;
@@ -135,36 +132,12 @@
 }
 
 :host.bs-multiselect ::ng-deep .dropdown-button {
-  display: flex;
-  cursor: pointer;
   border: 1px solid #c6c6c6;
-  padding: 5px;
-  flex-grow: 1;
-  font-size: inherit;
-  min-height: 39px;
   border-radius: 4px;
   color: #555;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  -o-user-select: none;
-  user-select: none;
-  white-space: normal;
-  background-color: #fff;
   background-image: linear-gradient(#fff,#f7f7f7);
 }
 
-:host.bs-multiselect ::ng-deep .listing-wrapper {
-  width: inherit;
-  background-color: #fff;
-  position: absolute;
-  z-index: 999;
-  border: 1px solid rgba(0, 0, 0, 0.15);
-  border-radius: 4px;
-  -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
-  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
-}
-
 :host.bs-multiselect ::ng-deep .options-container {
   display: block;
   overflow-x: hidden;

From 39001bd9209c7e148b47135b42ff799597fdfb0b Mon Sep 17 00:00:00 2001
From: Pankaj Parkar <parkarpankaj3@gmail.com>
Date: Sun, 21 Jul 2019 20:31:08 +0530
Subject: [PATCH 08/14] CSS optimization for options for bs theme.

---
 .../filter-options.component.css              | 35 ++++++-------------
 .../filter-options.component.html             |  2 +-
 .../helper-elements.component.css             |  4 +--
 .../src/lib/multiselect.component.css         | 10 +++---
 4 files changed, 17 insertions(+), 34 deletions(-)

diff --git a/projects/multiselect/src/lib/filter-options/filter-options.component.css b/projects/multiselect/src/lib/filter-options/filter-options.component.css
index a5e74174..3b654332 100644
--- a/projects/multiselect/src/lib/filter-options/filter-options.component.css
+++ b/projects/multiselect/src/lib/filter-options/filter-options.component.css
@@ -1,9 +1,5 @@
 /* Material CSS start */
 
-:host {
-  display: flex;
-}
-
 .mat-multiselect :host ::ng-deep .input-search {
   display: flex;
   flex-grow: 1;
@@ -19,8 +15,8 @@
 }
 
 .mat-multiselect :host ::ng-deep .field-infix {
-  padding: 5px 10px;
-  width: 90%;
+  padding: 5px;
+  flex: 1;
 }
 
 .mat-multiselect :host ::ng-deep .field-suffix {
@@ -48,21 +44,22 @@
   border-radius: 50%;
   border: none;
   cursor: pointer;
+  background-color: #f1f1f1;
 }
 
 .bs-multiselect :host ::ng-deep .input-search {
   display: flex;
-  padding: 2px 0px 4px 0px;
+  flex: 1;
   max-height: 30px;
-  overflow: hidden;
   box-sizing: content-box;
+  padding: 2px;
 }
 
 .bs-multiselect :host ::ng-deep .input-filter {
   border-radius: 2px;
   height: 30px;
-  font-size: 14px;
   width: 100%;
+  font-size: inherit;
   padding-left: 7px;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
@@ -87,32 +84,20 @@
 
 .bs-multiselect :host ::ng-deep .field-infix {
   display: flex;
-  padding: 2px; 
-  flex: 18;
+  flex-grow: 1;
 }
 
 .bs-multiselect :host ::ng-deep .field-suffix {
-  flex: 2;
   display: flex;
-  align-items: center;
+  align-items: stretch;
   justify-content: center;
 }
 .bs-multiselect :host ::ng-deep .field-suffix button {
   border: none;
   padding: 0;
-  font-size: 20px;
-  min-width: 25px;
-  line-height: 1.1;
+  font-size: inherit;
 }
 
 /* Boostrap CSS end */
 
-/* Common */
-
-.mat-multiselect :host ::ng-deep button[disabled],
-.mat-multiselect :host ::ng-deep button:disabled,
-.bs-multiselect :host ::ng-deep button[disabled],
-.bs-multiselect :host ::ng-deep button:disabled {
-  background: whitesmoke;
-  color: #dad4d4;
-}
+/* Common */
\ No newline at end of file
diff --git a/projects/multiselect/src/lib/filter-options/filter-options.component.html b/projects/multiselect/src/lib/filter-options/filter-options.component.html
index 9f8299b3..e86e5178 100644
--- a/projects/multiselect/src/lib/filter-options/filter-options.component.html
+++ b/projects/multiselect/src/lib/filter-options/filter-options.component.html
@@ -10,6 +10,6 @@
     />
   </div>
   <div class="field-suffix">
-    <button type="button" [disabled]="!filterName.value" (click)="clearInputFilter()" class="clear-button">×</button>
+    <button type="button" [disabled]="!filterName.value" (click)="clearInputFilter()" class="clear-button">X</button>
   </div>
 </div>
diff --git a/projects/multiselect/src/lib/helper-elements/helper-elements.component.css b/projects/multiselect/src/lib/helper-elements/helper-elements.component.css
index 1de6a45e..f478748e 100644
--- a/projects/multiselect/src/lib/helper-elements/helper-elements.component.css
+++ b/projects/multiselect/src/lib/helper-elements/helper-elements.component.css
@@ -2,7 +2,7 @@
 
 .mat-multiselect :host .helper-buttons {
   border-bottom: 1px solid #ddd;
-  padding: 2px 0;
+  padding: 2px;
 }
 
 .mat-multiselect :host .helper-button {
@@ -33,7 +33,7 @@
 
 .bs-multiselect :host .helper-buttons {
   border-bottom: 1px solid #ddd;
-  padding: 4px 4px 4px;
+  padding: 4px;
 }
 
 .bs-multiselect :host .helper-button {
diff --git a/projects/multiselect/src/lib/multiselect.component.css b/projects/multiselect/src/lib/multiselect.component.css
index 3951253b..ad474138 100644
--- a/projects/multiselect/src/lib/multiselect.component.css
+++ b/projects/multiselect/src/lib/multiselect.component.css
@@ -152,8 +152,7 @@
   height: 3em;
   position: relative;
   padding: 0 6px;
-  font-size: 14px;
-  line-height: 1.42857143;
+  font-size: inherit;
   color: #555;
   background-color: #fff;
   background-image: none;
@@ -179,14 +178,13 @@
   background-image: linear-gradient(#e9e9e9, #f1f1f1);
   color: #555;
   cursor: pointer;
+  display: flex;
+  justify-content: space-between;
 }
 
 :host.bs-multiselect ::ng-deep .marked::after {
   content: '✓';
-  margin: 2px 10px;
-  right: 0;
-  top: 5px;
-  position: absolute;
+  width: 15px;
 }
 
 :host.bs-multiselect ::ng-deep .option.disabled,

From 58c45d051ac7ccfe717b422b3df410a2e5f2ef38 Mon Sep 17 00:00:00 2001
From: Pankaj Parkar <parkarpankaj3@gmail.com>
Date: Sun, 21 Jul 2019 21:34:09 +0530
Subject: [PATCH 09/14] Optimized and reused filter-options css mat and bs
 theme.

---
 .../filter-options.component.css              | 51 +++++++------------
 .../getting-started.component.html            |  4 +-
 2 files changed, 20 insertions(+), 35 deletions(-)

diff --git a/projects/multiselect/src/lib/filter-options/filter-options.component.css b/projects/multiselect/src/lib/filter-options/filter-options.component.css
index 3b654332..32fa480a 100644
--- a/projects/multiselect/src/lib/filter-options/filter-options.component.css
+++ b/projects/multiselect/src/lib/filter-options/filter-options.component.css
@@ -1,14 +1,21 @@
-/* Material CSS start */
+/* Common */
 
-.mat-multiselect :host ::ng-deep .input-search {
+.input-search {
   display: flex;
   flex-grow: 1;
-  align-items: center;
-  max-height: 35px;
+  align-items: stretch;
+  height: 30px;
+  padding: 2px;
+}
+
+/* Material CSS start */
+
+.mat-multiselect :host ::ng-deep .input-search {
   border-bottom: 1px solid rgba(0,0,0,.12);
 }
 
 .mat-multiselect :host ::ng-deep .input-filter {
+  flex-grow: 1;
   font: inherit;
   outline: none;
   border: none;
@@ -17,6 +24,7 @@
 .mat-multiselect :host ::ng-deep .field-infix {
   padding: 5px;
   flex: 1;
+  display: flex;
 }
 
 .mat-multiselect :host ::ng-deep .field-suffix {
@@ -41,45 +49,31 @@
   padding: 0;
   min-width: 20px;
   max-width: 20px;
-  border-radius: 50%;
   border: none;
   cursor: pointer;
+  cursor: pointer;
+  border-radius: 2px;
+  color: #666;
   background-color: #f1f1f1;
-}
-
-.bs-multiselect :host ::ng-deep .input-search {
-  display: flex;
-  flex: 1;
-  max-height: 30px;
-  box-sizing: content-box;
-  padding: 2px;
+  border: none;
+  font-size: inherit;
 }
 
 .bs-multiselect :host ::ng-deep .input-filter {
   border-radius: 2px;
   height: 30px;
+  height: 100%;
   width: 100%;
   font-size: inherit;
   padding-left: 7px;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
-  margin: 0px 0px 8px 0px;
   -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
   box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
   cursor: pointer;
   border: 1px solid #ccc;
-  border-radius: 2px;
-  color: #666;
-}
-
-.bs-multiselect :host ::ng-deep .clear-button {
-  text-align: center;
-  cursor: pointer;
-  border: 1px solid #ccc;
-  border-radius: 2px;
   color: #666;
-  background-color: #f1f1f1;
 }
 
 .bs-multiselect :host ::ng-deep .field-infix {
@@ -89,15 +83,6 @@
 
 .bs-multiselect :host ::ng-deep .field-suffix {
   display: flex;
-  align-items: stretch;
-  justify-content: center;
-}
-.bs-multiselect :host ::ng-deep .field-suffix button {
-  border: none;
-  padding: 0;
-  font-size: inherit;
 }
 
 /* Boostrap CSS end */
-
-/* Common */
\ No newline at end of file
diff --git a/src/app/demos/doc-demos/getting-started/getting-started.component.html b/src/app/demos/doc-demos/getting-started/getting-started.component.html
index a335b85b..472ed88b 100644
--- a/src/app/demos/doc-demos/getting-started/getting-started.component.html
+++ b/src/app/demos/doc-demos/getting-started/getting-started.component.html
@@ -1,4 +1,4 @@
-<p>Select the countries you would like to visit?</p>
+<!-- <p>Select the countries you would like to visit?</p>
 <ngx-multiselect
   [(ngModel)]="selectedOptions"
   [options]="options"
@@ -14,5 +14,5 @@
 <ms-events></ms-events>
 <br>
 <ms-observable-async></ms-observable-async>
-<br>
+<br> -->
 <ms-theme></ms-theme>
\ No newline at end of file

From 8920def505e9c0c76cab68c76a38561c03221bd9 Mon Sep 17 00:00:00 2001
From: Pankaj Parkar <parkarpankaj3@gmail.com>
Date: Sun, 21 Jul 2019 22:05:54 +0530
Subject: [PATCH 10/14] Refactored helper element CSS

---
 .../helper-elements.component.css             | 68 ++++++-------------
 1 file changed, 22 insertions(+), 46 deletions(-)

diff --git a/projects/multiselect/src/lib/helper-elements/helper-elements.component.css b/projects/multiselect/src/lib/helper-elements/helper-elements.component.css
index f478748e..c2f17324 100644
--- a/projects/multiselect/src/lib/helper-elements/helper-elements.component.css
+++ b/projects/multiselect/src/lib/helper-elements/helper-elements.component.css
@@ -1,26 +1,32 @@
-/* Material CSS start */
+.helper-button {
+  font-weight: 400;
+  font-size: .75rem;
+  max-height: 30px;
+  white-space: nowrap;
+  height: 30px;
+  border-radius: .25rem;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  border: 1px solid rgba(0,0,0,.12);
+}
+
+fieldset {
+  padding: 0;
+  border: none;
+}
 
-.mat-multiselect :host .helper-buttons {
+.helper-buttons {
   border-bottom: 1px solid #ddd;
   padding: 2px;
 }
 
+/* Material CSS start */
+
 .mat-multiselect :host .helper-button {
-  font-weight: 400;
-  color: #444;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
   background-color: transparent;
-  border: 1px solid transparent;
-  padding: 0.13rem 0.13rem;
-  font-size: 0.75rem;
-  line-height: 1.5;
-  border-radius: 0.25rem;
-  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out,
-    box-shadow 0.15s ease-in-out;
-  border-color: rgba(0, 0, 0, 0.12);
+  color: #444;
 }
 
 .mat-multiselect :host .helper-button:not(:last-child) {
@@ -31,36 +37,11 @@
 
 /* Boostrap CSS start */
 
-.bs-multiselect :host .helper-buttons {
-  border-bottom: 1px solid #ddd;
-  padding: 4px;
-}
-
 .bs-multiselect :host .helper-button {
-  max-height: 26px;
-  height: 26px;
-  border: 1px solid rgba(0, 0, 0, 0.12) !important;
-  padding: 0px 4px 0px;
   box-sizing: border-box;
-  position: relative;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
   cursor: pointer;
   outline: 0;
-  border: none;
   -webkit-tap-highlight-color: transparent;
-  display: inline-block;
-  white-space: nowrap;
-  text-decoration: none;
-  vertical-align: baseline;
-  text-align: center;
-  margin: 0;
-  min-width: 60px;
-  line-height: 25px;
-  border-radius: 4px;
-  overflow: visible;
 }
 
 .bs-multiselect .helper-button:not(:last-child) {
@@ -68,8 +49,3 @@
 }
 
 /* Boostrap CSS end */
-
-fieldset {
-  padding: 0;
-  border: none;
-}
\ No newline at end of file

From a69f5e2a3dc8c1c266a2d4b61254ffcccb52d64c Mon Sep 17 00:00:00 2001
From: Pankaj Parkar <parkarpankaj3@gmail.com>
Date: Sun, 21 Jul 2019 22:27:34 +0530
Subject: [PATCH 11/14] Shared CSS code of options container.

---
 .../helper-elements.component.css             |  1 +
 .../src/lib/multiselect.component.css         | 33 ++++---------------
 2 files changed, 7 insertions(+), 27 deletions(-)

diff --git a/projects/multiselect/src/lib/helper-elements/helper-elements.component.css b/projects/multiselect/src/lib/helper-elements/helper-elements.component.css
index c2f17324..409abbce 100644
--- a/projects/multiselect/src/lib/helper-elements/helper-elements.component.css
+++ b/projects/multiselect/src/lib/helper-elements/helper-elements.component.css
@@ -41,6 +41,7 @@ fieldset {
   box-sizing: border-box;
   cursor: pointer;
   outline: 0;
+  padding: .25em;
   -webkit-tap-highlight-color: transparent;
 }
 
diff --git a/projects/multiselect/src/lib/multiselect.component.css b/projects/multiselect/src/lib/multiselect.component.css
index ad474138..29cea7ed 100644
--- a/projects/multiselect/src/lib/multiselect.component.css
+++ b/projects/multiselect/src/lib/multiselect.component.css
@@ -56,17 +56,13 @@
   box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
 }
 
-/* Material multiselect theme start*/
-
-:host.mat-multiselect ::ng-deep .options-container {
+::ng-deep .options-container {
   height: 200px;
-  overflow-x: hidden;
   overflow-y: scroll;
-  min-width: 100%;
-  border-radius: 4px;
-  background: #fff;
 }
 
+/* Material multiselect theme start*/
+
 :host.mat-multiselect ::ng-deep .option {
   white-space: nowrap;
   border-left: .5px solid #eee;
@@ -138,33 +134,16 @@
   background-image: linear-gradient(#fff,#f7f7f7);
 }
 
-:host.bs-multiselect ::ng-deep .options-container {
-  display: block;
-  overflow-x: hidden;
-  height: 200px;
-  overflow-y: scroll;
-}
-
 :host.bs-multiselect ::ng-deep .option {
   display: flex;
   align-items: center;
-  line-height: 3em;
-  height: 3em;
-  position: relative;
+  height: 40px;
   padding: 0 6px;
   font-size: inherit;
   color: #555;
-  background-color: #fff;
-  background-image: none;
+  background-color: transparent;
   border-radius: 4px;
-  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-  -webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
-  -o-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
-  -webkit-transition: border-color ease-in-out 0.15s, -webkit-box-shadow ease-in-out 0.15s;
-  transition: border-color ease-in-out 0.15s, -webkit-box-shadow ease-in-out 0.15s;
-  transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
-  transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s, -webkit-box-shadow ease-in-out 0.15s;
+  box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
   max-height: 40px;
 }
 

From 14ca228cdd9cfff13351e5051847340133ceedb9 Mon Sep 17 00:00:00 2001
From: Pankaj Parkar <parkarpankaj3@gmail.com>
Date: Mon, 22 Jul 2019 00:11:02 +0530
Subject: [PATCH 12/14] Removed comments from getting-started component.

---
 .../doc-demos/getting-started/getting-started.component.html  | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/app/demos/doc-demos/getting-started/getting-started.component.html b/src/app/demos/doc-demos/getting-started/getting-started.component.html
index 472ed88b..a335b85b 100644
--- a/src/app/demos/doc-demos/getting-started/getting-started.component.html
+++ b/src/app/demos/doc-demos/getting-started/getting-started.component.html
@@ -1,4 +1,4 @@
-<!-- <p>Select the countries you would like to visit?</p>
+<p>Select the countries you would like to visit?</p>
 <ngx-multiselect
   [(ngModel)]="selectedOptions"
   [options]="options"
@@ -14,5 +14,5 @@
 <ms-events></ms-events>
 <br>
 <ms-observable-async></ms-observable-async>
-<br> -->
+<br>
 <ms-theme></ms-theme>
\ No newline at end of file

From 1ab6be2f84868a80ae2678fb11fdd5f2bb5d84b2 Mon Sep 17 00:00:00 2001
From: Pankaj Parkar <parkarpankaj3@gmail.com>
Date: Mon, 29 Jul 2019 22:41:31 +0530
Subject: [PATCH 13/14] Fixed cusotm template styling.

---
 .../custom-template/custom-template.component.html         | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/app/demos/doc-demos/custom-template/custom-template.component.html b/src/app/demos/doc-demos/custom-template/custom-template.component.html
index 2dc112b2..4b2f16b8 100644
--- a/src/app/demos/doc-demos/custom-template/custom-template.component.html
+++ b/src/app/demos/doc-demos/custom-template/custom-template.component.html
@@ -3,7 +3,10 @@
   [options]="options"
   [propertyMap]="{ img: 'flag' }">
   <ng-template let-option="option">
-      <img [src]="option.img" width="40px" height="40px" [attr.alt]="option.name" />
-      {{ option.name }}
+      <style> .test { display: flex;align-items:center; } </style>
+      <div class="custom-option">
+        <img [src]="option.img" width="40px" height="40px" [attr.alt]="option.name" />
+        {{ option.name }}
+      </div>
   </ng-template>
 </ngx-multiselect>

From dea52708d56298477214202f63a6c4b705fd89b3 Mon Sep 17 00:00:00 2001
From: Pankaj Parkar <parkarpankaj3@gmail.com>
Date: Mon, 29 Jul 2019 22:42:38 +0530
Subject: [PATCH 14/14] change class name in custom template CSS

---
 .../doc-demos/custom-template/custom-template.component.html    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/demos/doc-demos/custom-template/custom-template.component.html b/src/app/demos/doc-demos/custom-template/custom-template.component.html
index 4b2f16b8..9b94c6b0 100644
--- a/src/app/demos/doc-demos/custom-template/custom-template.component.html
+++ b/src/app/demos/doc-demos/custom-template/custom-template.component.html
@@ -3,7 +3,7 @@
   [options]="options"
   [propertyMap]="{ img: 'flag' }">
   <ng-template let-option="option">
-      <style> .test { display: flex;align-items:center; } </style>
+      <style> .custom-option { display: flex;align-items:center; } </style>
       <div class="custom-option">
         <img [src]="option.img" width="40px" height="40px" [attr.alt]="option.name" />
         {{ option.name }}