angular-2-dropdown-multiselect - npm Package Compare versions

Comparing version 1.0.6 to 1.0.7

package.json

 {
   "name": "angular-2-dropdown-multiselect",
-  "version": "1.0.6",
+  "version": "1.0.7",
   "description": "Customizable dropdown multiselect in Angular 2 with bootstrap css.",
@@ -5,0 +5,0 @@ "main": "src/multiselect-dropdown.ts",

README.md

@@ -1,6 +0,6 @@
-# Angular 2 Dropdown Multiselect for Bootstrap CSS
+# AngularX Dropdown Multiselect for Bootstrap CSS
 
 Works with Angular Final and AOT compilation
 
-Customizable dropdown multiselect in Angular 2, TypeScript with bootstrap css.
+Customizable dropdown multiselect in AngularX, TypeScript with bootstrap css.
 
@@ -71,7 +71,9 @@ See demo: http://softsimon.github.io/angular-2-dropdown-multiselect
     checkedStyle: 'checkboxes',
-    buttonClasses: 'btn btn-default',
+    buttonClasses: 'btn btn-default btn-secondary',
     selectionLimit: 0,
     closeOnSelect: false,
+    autoUnselect: false,
     showCheckAll: false,
     showUncheckAll: false,
+    fixedTitle: false,
     dynamicTitleMaxItems: 3,
@@ -88,2 +90,3 @@ maxHeight: '300px',
     defaultTitle: 'Select',
+    allSelected: 'All selected',
 };
@@ -90,0 +93,0 @@

src/multiselect-dropdown.js

@@ -66,2 +66,3 @@ /*
             showUncheckAll: false,
+            fixedTitle: false,
             dynamicTitleMaxItems: 3,
@@ -107,5 +108,8 @@ maxHeight: '300px',
     MultiselectDropdown.prototype.writeValue = function (value) {
-        if (value !== undefined) {
+        if (value !== undefined && value !== null) {
             this.model = value;
         }
+        else {
+            this.model = [];
+        }
     };
@@ -189,3 +193,6 @@ MultiselectDropdown.prototype.registerOnChange = function (fn) {
         var _this = this;
-        if (this.numSelected === 0) {
+        if (this.settings.displayAllSelectedText && this.model.length === this.options.length) {
+            this.title = this.texts.allSelected || '';
+        }
+        else if (this.numSelected === 0 || this.settings.fixedTitle) {
             this.title = this.texts.defaultTitle || '';
@@ -201,5 +208,2 @@ }
         }
-        else if (this.settings.displayAllSelectedText && this.model.length === this.options.length) {
-            this.title = this.texts.allSelected || '';
-        }
         else {
@@ -282,3 +286,3 @@ this.title = this.numSelected
         styles: ["\n    a {\n      outline: none !important;\n    }\n  "],
-        template: "\n    <div class=\"dropdown\">\n      <button type=\"button\" class=\"dropdown-toggle\" [ngClass]=\"settings.buttonClasses\"\n              (click)=\"toggleDropdown()\" [disabled]=\"disabled\">{{ title }}&nbsp;<span class=\"caret\"></span></button>\n      <ul *ngIf=\"isVisible\" class=\"dropdown-menu\" [class.pull-right]=\"settings.pullRight\" [class.dropdown-menu-right]=\"settings.pullRight\"\n          [style.max-height]=\"settings.maxHeight\" style=\"display: block; height: auto; overflow-y: auto;\">\n        <li class=\"dropdown-item search\" *ngIf=\"settings.enableSearch\">\n          <div class=\"input-group input-group-sm\">\n            <span class=\"input-group-addon\" id=\"sizing-addon3\"><i class=\"fa fa-search\"></i></span>\n            <input type=\"text\" class=\"form-control\" placeholder=\"{{ texts.searchPlaceholder }}\"\n                   aria-describedby=\"sizing-addon3\" [(ngModel)]=\"searchFilterText\" [ngModelOptions]=\"{standalone: true}\">\n            <span class=\"input-group-btn\" *ngIf=\"searchFilterText.length > 0\">\n  \t\t\t    <button class=\"btn btn-default btn-secondary\" type=\"button\" (click)=\"clearSearch($event)\"><i class=\"fa fa-times\"></i></button>\n\t          </span>\n          </div>\n        </li>\n        <li class=\"dropdown-divider divider\" *ngIf=\"settings.enableSearch\"></li>\n        <li class=\"dropdown-item check-control check-control-check\" *ngIf=\"settings.showCheckAll\">\n          <a href=\"javascript:;\" role=\"menuitem\" tabindex=\"-1\" (click)=\"checkAll()\">\n            <span style=\"width: 16px;\"\n              [ngClass]=\"{'glyphicon glyphicon-ok': settings.checkedStyle !== 'fontawesome',\n              'fa fa-check': settings.checkedStyle === 'fontawesome'}\"></span>\n            {{ texts.checkAll }}\n          </a>\n        </li>\n        <li class=\"dropdown-item check-control check-control-uncheck\" *ngIf=\"settings.showUncheckAll\">\n          <a href=\"javascript:;\" role=\"menuitem\" tabindex=\"-1\" (click)=\"uncheckAll()\">\n            <span style=\"width: 16px;\"\n              [ngClass]=\"{'glyphicon glyphicon-remove': settings.checkedStyle !== 'fontawesome',\n              'fa fa-times': settings.checkedStyle === 'fontawesome'}\"></span>\n            {{ texts.uncheckAll }}\n          </a>\n        </li>\n        <li *ngIf=\"settings.showCheckAll || settings.showUncheckAll\" class=\"dropdown-divider divider\"></li>\n        <li class=\"dropdown-item\" [ngStyle]=\"getItemStyle(option)\" *ngFor=\"let option of options | searchFilter:searchFilterText\"\n            (click)=\"!option.isLabel && setSelected($event, option)\" [class.dropdown-header]=\"option.isLabel\">\n          <ng-template [ngIf]=\"option.isLabel\">\n            {{ option.name }}\n          </ng-template>\n          <a *ngIf=\"!option.isLabel\" href=\"javascript:;\" role=\"menuitem\" tabindex=\"-1\">\n            <input *ngIf=\"settings.checkedStyle === 'checkboxes'\" type=\"checkbox\"\n              [checked]=\"isSelected(option)\" (click)=\"preventCheckboxCheck($event, option)\"/>\n            <span *ngIf=\"settings.checkedStyle === 'glyphicon'\" style=\"width: 16px;\"\n                  class=\"glyphicon\" [class.glyphicon-ok]=\"isSelected(option)\"></span>\n            <span *ngIf=\"settings.checkedStyle === 'fontawesome'\" style=\"width: 16px;display: inline-block;\">\n  \t\t\t      <i *ngIf=\"isSelected(option)\" class=\"fa fa-check\" aria-hidden=\"true\"></i>\n  \t\t\t    </span>\n            <span [ngClass]=\"settings.itemClasses\">\n              {{ option.name }}\n            </span>\n          </a>\n        </li>\n      </ul>\n    </div>\n  "
+        template: "\n    <div class=\"dropdown\">\n      <button type=\"button\" class=\"dropdown-toggle\" [ngClass]=\"settings.buttonClasses\"\n              (click)=\"toggleDropdown()\" [disabled]=\"disabled\">{{ title }}&nbsp;<span class=\"caret\"></span></button>\n      <ul *ngIf=\"isVisible\" class=\"dropdown-menu\" [class.pull-right]=\"settings.pullRight\" [class.dropdown-menu-right]=\"settings.pullRight\"\n          [style.max-height]=\"settings.maxHeight\" style=\"display: block; height: auto; overflow-y: auto;\">\n        <li class=\"dropdown-item search\" *ngIf=\"settings.enableSearch\">\n          <div class=\"input-group input-group-sm\">\n            <span class=\"input-group-addon\" id=\"sizing-addon3\"><i class=\"fa fa-search\"></i></span>\n            <input type=\"text\" class=\"form-control\" placeholder=\"{{ texts.searchPlaceholder }}\"\n                   aria-describedby=\"sizing-addon3\" [(ngModel)]=\"searchFilterText\" [ngModelOptions]=\"{standalone: true}\">\n            <span class=\"input-group-btn\" *ngIf=\"searchFilterText.length > 0\">\n  \t\t\t    <button class=\"btn btn-default btn-secondary\" type=\"button\" (click)=\"clearSearch($event)\"><i class=\"fa fa-times\"></i></button>\n\t          </span>\n          </div>\n        </li>\n        <li class=\"dropdown-divider divider\" *ngIf=\"settings.enableSearch\"></li>\n        <li class=\"dropdown-item check-control check-control-check\" *ngIf=\"settings.showCheckAll\">\n          <a href=\"javascript:;\" role=\"menuitem\" tabindex=\"-1\" (click)=\"checkAll()\">\n            <span style=\"width: 16px;\"\n              [ngClass]=\"{'glyphicon glyphicon-ok': settings.checkedStyle !== 'fontawesome',\n              'fa fa-check': settings.checkedStyle === 'fontawesome'}\"></span>\n            {{ texts.checkAll }}\n          </a>\n        </li>\n        <li class=\"dropdown-item check-control check-control-uncheck\" *ngIf=\"settings.showUncheckAll\">\n          <a href=\"javascript:;\" role=\"menuitem\" tabindex=\"-1\" (click)=\"uncheckAll()\">\n            <span style=\"width: 16px;\"\n              [ngClass]=\"{'glyphicon glyphicon-remove': settings.checkedStyle !== 'fontawesome',\n              'fa fa-times': settings.checkedStyle === 'fontawesome'}\"></span>\n            {{ texts.uncheckAll }}\n          </a>\n        </li>\n        <li *ngIf=\"settings.showCheckAll || settings.showUncheckAll\" class=\"dropdown-divider divider\"></li>\n        <li class=\"dropdown-item\" [ngStyle]=\"getItemStyle(option)\" *ngFor=\"let option of options | searchFilter:searchFilterText\"\n            (click)=\"!option.isLabel && setSelected($event, option)\" [class.dropdown-header]=\"option.isLabel\">\n          <template [ngIf]=\"option.isLabel\">\n            {{ option.name }}\n          </template>\n          <a *ngIf=\"!option.isLabel\" href=\"javascript:;\" role=\"menuitem\" tabindex=\"-1\">\n            <input *ngIf=\"settings.checkedStyle === 'checkboxes'\" type=\"checkbox\"\n              [checked]=\"isSelected(option)\" (click)=\"preventCheckboxCheck($event, option)\"/>\n            <span *ngIf=\"settings.checkedStyle === 'glyphicon'\" style=\"width: 16px;\"\n                  class=\"glyphicon\" [class.glyphicon-ok]=\"isSelected(option)\"></span>\n            <span *ngIf=\"settings.checkedStyle === 'fontawesome'\" style=\"width: 16px;display: inline-block;\">\n  \t\t\t      <i *ngIf=\"isSelected(option)\" class=\"fa fa-check\" aria-hidden=\"true\"></i>\n  \t\t\t    </span>\n            <span [ngClass]=\"settings.itemClasses\">\n              {{ option.name }}\n            </span>\n          </a>\n        </li>\n      </ul>\n    </div>\n  "
     }),
@@ -285,0 +289,0 @@ __metadata("design:paramtypes", [core_1.ElementRef,

src/multiselect-dropdown.ts

@@ -51,2 +51,3 @@ /*
   showUncheckAll?: boolean;
+  fixedTitle?: boolean;
   dynamicTitleMaxItems?: number;
@@ -127,5 +128,5 @@ maxHeight?: string;
             (click)="!option.isLabel && setSelected($event, option)" [class.dropdown-header]="option.isLabel">
-          <ng-template [ngIf]="option.isLabel">
+          <template [ngIf]="option.isLabel">
             {{ option.name }}
-          </ng-template>
+          </template>
           <a *ngIf="!option.isLabel" href="javascript:;" role="menuitem" tabindex="-1">
@@ -190,2 +191,3 @@ <input *ngIf="settings.checkedStyle === 'checkboxes'" type="checkbox"
     showUncheckAll: false,
+    fixedTitle: false,
     dynamicTitleMaxItems: 3,
@@ -225,4 +227,6 @@ maxHeight: '300px',
   writeValue(value: any): void {
-    if (value !== undefined) {
+    if (value !== undefined && value !== null) {
       this.model = value;
+    } else {
+      this.model = [];
     }
@@ -315,3 +319,5 @@ }
   updateTitle() {
-    if (this.numSelected === 0) {
+    if (this.settings.displayAllSelectedText && this.model.length === this.options.length) {
+      this.title = this.texts.allSelected || '';
+    } else if (this.numSelected === 0 || this.settings.fixedTitle) {
       this.title = this.texts.defaultTitle || '';
@@ -325,4 +331,2 @@ } else if (this.settings.dynamicTitleMaxItems && this.settings.dynamicTitleMaxItems >= this.numSelected) {
         .join(', ');
-    } else if (this.settings.displayAllSelectedText && this.model.length === this.options.length) {
-      this.title = this.texts.allSelected || '';
     } else {
@@ -329,0 +333,0 @@ this.title = this.numSelected

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

43718

increased by1.12%

Lines of code

687

increased by1.18%

Number of lines in readme file

144

increased by2.13%

No dependency changes