* Moved dependencies to fix build issue for some users

* Better bootstrap4 support
* Added fontawsome checkers alternative
fixes #58

Author: softsimon

package.json

@@ -1,6 +1,6 @@
 {
   "name": "angular-2-dropdown-multiselect",
-  "version": "0.3.5",
+  "version": "0.4.0",
   "description": "Customizable dropdown multiselect in Angular 2 with bootstrap css.",
   "main": "src/multiselect-dropdown.ts",
   "repository": {
@@ -19,16 +19,16 @@
   },
   "homepage": "http://softsimon.github.io/angular-2-dropdown-multiselect",
   "dependencies": {
-    "@angular/common": "^2.4.0",
-    "@angular/compiler": "^2.4.0",
-    "@angular/core": "^2.4.0",
-    "@angular/forms": "^2.4.0",
-    "rxjs": "^5.0.2",
-    "zone.js": "^0.7.2"
   },
   "devDependencies": {
+    "@angular/common": "^2.4.3",
+    "@angular/compiler": "^2.4.3",
+    "@angular/core": "^2.4.3",
+    "@angular/forms": "^2.4.3",
+    "rxjs": "^5.0.3",
+    "zone.js": "^0.7.5",
     "codelyzer": "^2.0.0-beta.4",
-    "tslint": "^4.0.0",
-    "typescript": "^2.1.0"
+    "tslint": "^4.3.1",
+    "typescript": "^2.1.5"
   }
 }

src/multiselect-dropdown.html

@@ -1,7 +1,7 @@
 <div class="dropdown">
     <button type="button" class="dropdown-toggle" [ngClass]="settings.buttonClasses"
     (click)="toggleDropdown()">{{ title }}&nbsp;<span class="caret"></span></button>
-    <ul *ngIf="isVisible" class="dropdown-menu" [class.pull-right]="settings.pullRight"
+    <ul *ngIf="isVisible" class="dropdown-menu" [class.pull-right]="settings.pullRight" [class.dropdown-menu-right]="settings.pullRight"
     [style.max-height]="settings.maxHeight" style="display: block; height: auto; overflow-y: auto;">
         <li class="dropdown-item" *ngIf="settings.enableSearch">
             <div class="input-group input-group-sm">
@@ -27,11 +27,14 @@
             </a>
         </li>
         <li *ngIf="settings.showCheckAll || settings.showUncheckAll" class="dropdown-divider divider"></li>
-        <li class="dropdown-item" *ngFor="let option of options | searchFilter:searchFilterText">
-            <a href="javascript:;" role="menuitem" tabindex="-1" (click)="setSelected($event, option)">
-                <input *ngIf="settings.checkedStyle == 'checkboxes'" type="checkbox" [checked]="isSelected(option)" />
-                <span *ngIf="settings.checkedStyle == 'glyphicon'" style="width: 16px;"
+        <li class="dropdown-item" style="cursor: pointer;"  *ngFor="let option of options | searchFilter:searchFilterText" (click)="setSelected($event, option)">
+            <a href="javascript:;" role="menuitem" tabindex="-1">
+                <input *ngIf="settings.checkedStyle === 'checkboxes'" type="checkbox" [checked]="isSelected(option)" />
+                <span *ngIf="settings.checkedStyle === 'glyphicon'" style="width: 16px;"
                 class="glyphicon" [class.glyphicon-ok]="isSelected(option)"></span>
+                <span *ngIf="settings.checkedStyle === 'fontawsome'" style="width: 16px;display: inline-block;">
+                    <i *ngIf="isSelected(option)" class="fa fa-check" aria-hidden="true"></i>
+                </span>
                 {{ option.name }}
             </a>
         </li>

src/multiselect-dropdown.ts

@@ -36,7 +36,7 @@ export interface IMultiSelectOption {
 export interface IMultiSelectSettings {
   pullRight?: boolean;
   enableSearch?: boolean;
-  checkedStyle?: 'checkboxes' | 'glyphicon';
+  checkedStyle?: 'checkboxes' | 'glyphicon' | 'fontawsome';
   buttonClasses?: string;
   selectionLimit?: number;
   closeOnSelect?: boolean;
@@ -108,7 +108,7 @@ export class MultiselectDropdown implements OnInit, DoCheck, ControlValueAccesso
     pullRight: false,
     enableSearch: false,
     checkedStyle: 'checkboxes',
-    buttonClasses: 'btn btn-default',
+    buttonClasses: 'btn btn-default btn-secondary',
     selectionLimit: 0,
     closeOnSelect: false,
     autoUnselect: false,