fix: issue#282 angular 11 build issue

Author: NileshPatel17

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ng-multiselect-dropdown",
-  "version": "0.2.12",
+  "version": "0.3.0",
   "private": true,
   "description": "Angular Multi-Select Dropdown",
   "author": "Nilesh Patel",

src/app/components/select/multiple-demo.html

@@ -3,7 +3,8 @@
     <div class="col-md-4">
       <h3>Select Multiple Cities</h3>
       <form [formGroup]="myForm">
-        <ng-multiselect-dropdown name="city" [placeholder]="'Select City'" [data]="cities" formControlName="city" [disabled]="disabled" [settings]="dropdownSettings" (onDropDownClose)="onDropDownClose()" (onSelect)="onItemSelect($event)" (onSelectAll)="onSelectAll($event)">
+        <ng-multiselect-dropdown 
+          name="city" [placeholder]="'Select City'" [data]="cities" formControlName="city" [disabled]="disabled" [settings]="dropdownSettings" (onDropDownClose)="onDropDownClose()" (onSelect)="onItemSelect($event)" (onSelectAll)="onSelectAll($event)">
         </ng-multiselect-dropdown>
       </form>
       <p></p>

src/ng-multiselect-dropdown/src/multi-select.component.html

@@ -6,9 +6,9 @@
         {{item.text}}
         <a style="padding-top:2px;padding-left:2px;color:white" (click)="onItemClick($event,item)">x</a>
       </span>
-      <span style="float:right !important;padding-right:4px">
+      <span [ngClass]="{ 'dropdown-multiselect--active': _settings.defaultOpen }" style="float:right !important;padding-right:4px">
         <span style="padding-right: 6px;" *ngIf="itemShowRemaining()>0">+{{itemShowRemaining()}}</span>
-        <span [ngClass]="_settings.defaultOpen ? 'dropdown-up' : 'dropdown-down'"></span>
+        <span class="dropdown-multiselect__caret"></span>
       </span>
     </span>
   </div>

src/ng-multiselect-dropdown/src/multi-select.component.scss

@@ -33,22 +33,35 @@ $disable-background-color: #eceeef;
     .selected-item:hover {
       box-shadow: 1px 1px #959595;
     }
-    .dropdown-down {
-      display: inline-block;
-      top: 10px;
-      width: 0;
-      height: 0;
-      border-top: 10px solid #adadad;
-      border-left: 10px solid transparent;
-      border-right: 10px solid transparent;
+    .dropdown-multiselect__caret {
+      line-height: 16px;
+      display: block;
+      position: absolute;
+      box-sizing: border-box;
+      width: 40px;
+      height: 38px;
+      right: 1px;
+      top: 0px;
+      padding: 4px 8px;
+      margin: 0;
+      text-decoration: none;
+      text-align: center;
+      cursor: pointer;
+      transition: transform 0.2s ease;
     }
-    .dropdown-up {
-      display: inline-block;
-      width: 0;
-      height: 0;
-      border-bottom: 10px solid #adadad;
-      border-left: 10px solid transparent;
-      border-right: 10px solid transparent;
+    .dropdown-multiselect__caret:before {
+      position: relative;
+      right: 0;
+      top: 65%;
+      color: #999;
+      margin-top: 4px;
+      border-style: solid;
+      border-width: 8px 8px 0 8px;
+      border-color: #999999 transparent;
+      content: "";
+    }
+    .dropdown-multiselect--active .dropdown-multiselect__caret {
+      transform: rotateZ(180deg);
     }
   }
   .disabled {

src/ng-multiselect-dropdown/src/ng-multiselect-dropdown.module.ts

@@ -13,7 +13,7 @@ import { ListFilterPipe } from './list-filter.pipe';
 })
 
 export class NgMultiSelectDropDownModule {
-    static forRoot(): ModuleWithProviders {
+    static forRoot(): ModuleWithProviders<NgMultiSelectDropDownModule> {
       return {
         ngModule: NgMultiSelectDropDownModule
       };