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

Comparing version 1.0.2 to 1.0.3

package.json

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

src/multiselect-dropdown.js

@@ -14,6 +14,3 @@ /*
 };
-var __metadata = (this && this.__metadata) || function (k, v) {
-    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
-};
-Object.defineProperty(exports, "__esModule", { value: true });
+exports.__esModule = true;
 var core_1 = require("@angular/core");
@@ -49,2 +46,3 @@ var common_1 = require("@angular/common");
         this.element = element;
+        this.disabled = false;
         this.selectionLimitReached = new core_1.EventEmitter();
@@ -68,3 +66,3 @@ this.dropdownClosed = new core_1.EventEmitter();
             dynamicTitleMaxItems: 3,
-            maxHeight: '300px',
+            maxHeight: '300px'
         };
@@ -78,3 +76,3 @@ this.defaultTexts = {
             defaultTitle: 'Select',
-            allSelected: 'All selected',
+            allSelected: 'All selected'
         };
@@ -98,2 +96,7 @@ this.onModelChange = function (_) { };
     };
+    MultiselectDropdown.prototype.getItemStyle = function (option) {
+        if (!option.isLabel) {
+            return { 'cursor': 'pointer' };
+        }
+    };
     MultiselectDropdown.prototype.ngOnInit = function () {
@@ -115,2 +118,5 @@ this.settings = Object.assign(this.defaultSettings, this.settings);
     };
+    MultiselectDropdown.prototype.setDisabledState = function (isDisabled) {
+        this.disabled = isDisabled;
+    };
     MultiselectDropdown.prototype.ngDoCheck = function () {
@@ -126,4 +132,4 @@ var changes = this.differ.diff(this.model);
             required: {
-                valid: false,
-            },
+                valid: false
+            }
         };
@@ -234,35 +240,28 @@ };
 __decorate([
-    core_1.Input(),
-    __metadata("design:type", Array)
-], MultiselectDropdown.prototype, "options", void 0);
+    core_1.Input()
+], MultiselectDropdown.prototype, "options");
 __decorate([
-    core_1.Input(),
-    __metadata("design:type", Object)
-], MultiselectDropdown.prototype, "settings", void 0);
+    core_1.Input()
+], MultiselectDropdown.prototype, "settings");
 __decorate([
-    core_1.Input(),
-    __metadata("design:type", Object)
-], MultiselectDropdown.prototype, "texts", void 0);
+    core_1.Input()
+], MultiselectDropdown.prototype, "texts");
 __decorate([
-    core_1.Output(),
-    __metadata("design:type", Object)
-], MultiselectDropdown.prototype, "selectionLimitReached", void 0);
+    core_1.Input()
+], MultiselectDropdown.prototype, "disabled");
 __decorate([
-    core_1.Output(),
-    __metadata("design:type", Object)
-], MultiselectDropdown.prototype, "dropdownClosed", void 0);
+    core_1.Output()
+], MultiselectDropdown.prototype, "selectionLimitReached");
 __decorate([
-    core_1.Output(),
-    __metadata("design:type", Object)
-], MultiselectDropdown.prototype, "onAdded", void 0);
+    core_1.Output()
+], MultiselectDropdown.prototype, "dropdownClosed");
 __decorate([
-    core_1.Output(),
-    __metadata("design:type", Object)
-], MultiselectDropdown.prototype, "onRemoved", void 0);
+    core_1.Output()
+], MultiselectDropdown.prototype, "onAdded");
 __decorate([
-    core_1.HostListener('document: click', ['$event.target']),
-    __metadata("design:type", Function),
-    __metadata("design:paramtypes", [HTMLElement]),
-    __metadata("design:returntype", void 0)
-], MultiselectDropdown.prototype, "onClick", null);
+    core_1.Output()
+], MultiselectDropdown.prototype, "onRemoved");
+__decorate([
+    core_1.HostListener('document: click', ['$event.target'])
+], MultiselectDropdown.prototype, "onClick");
 MultiselectDropdown = __decorate([
@@ -272,7 +271,5 @@ core_1.Component({
         providers: [MULTISELECT_VALUE_ACCESSOR],
-        styles: ["\n\t   a { outline: none !important; }\n  "],
-        template: "\n\t<div class=\"dropdown\">\n\t    <button type=\"button\" class=\"dropdown-toggle\" [ngClass]=\"settings.buttonClasses\"\n\t    (click)=\"toggleDropdown()\">{{ 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  \t    [style.max-height]=\"settings.maxHeight\" style=\"display: block; height: auto; overflow-y: auto;\">\n  \t\t<li class=\"dropdown-item\" *ngIf=\"settings.enableSearch\">\n  \t\t    <div class=\"input-group input-group-sm\">\n  \t\t\t<span class=\"input-group-addon\" id=\"sizing-addon3\"><i class=\"fa fa-search\"></i></span>\n  \t\t\t<input type=\"text\" class=\"form-control\" placeholder=\"{{ texts.searchPlaceholder }}\"\n  \t\t\taria-describedby=\"sizing-addon3\" [(ngModel)]=\"searchFilterText\">\n  \t\t\t<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\t\t</span>\n  \t\t    </div>\n  \t\t</li>\n  \t\t<li class=\"dropdown-divider divider\" *ngIf=\"settings.enableSearch\"></li>\n  \t\t<li class=\"dropdown-item\" *ngIf=\"settings.showCheckAll\">\n  \t\t    <a href=\"javascript:;\" role=\"menuitem\" tabindex=\"-1\" (click)=\"checkAll()\">\n  \t\t\t<span style=\"width: 16px;\" class=\"glyphicon glyphicon-ok\"></span>\n  \t\t\t{{ texts.checkAll }}\n  \t\t    </a>\n  \t\t</li>\n  \t\t<li class=\"dropdown-item\" *ngIf=\"settings.showUncheckAll\">\n  \t\t    <a href=\"javascript:;\" role=\"menuitem\" tabindex=\"-1\" (click)=\"uncheckAll()\">\n  \t\t\t<span style=\"width: 16px;\" class=\"glyphicon glyphicon-remove\"></span>\n  \t\t\t{{ texts.uncheckAll }}\n  \t\t    </a>\n  \t\t</li>\n  \t\t<li *ngIf=\"settings.showCheckAll || settings.showUncheckAll\" class=\"dropdown-divider divider\"></li>\n  \t\t<li class=\"dropdown-item\" [style]=\"!option.isLabel && 'cursor: pointer'\" *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  \t\t    <a *ngIf=\"!option.isLabel\" href=\"javascript:;\" role=\"menuitem\" tabindex=\"-1\">\n  \t\t\t    <input *ngIf=\"settings.checkedStyle === 'checkboxes'\" type=\"checkbox\" [checked]=\"isSelected(option)\" (click)=\"preventCheckboxCheck($event, option)\" />\n  \t\t\t    <span *ngIf=\"settings.checkedStyle === 'glyphicon'\" style=\"width: 16px;\"\n  \t\t\t      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  \t        {{ option.name }}\n  \t\t    </a>\n  \t  </li>\n    </ul>\n\t</div>\n"
-    }),
-    __metadata("design:paramtypes", [core_1.ElementRef,
-        core_1.IterableDiffers])
+        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\" *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\">\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\t\t</span>\n          </div>\n        </li>\n        <li class=\"dropdown-divider divider\" *ngIf=\"settings.enableSearch\"></li>\n        <li class=\"dropdown-item\" *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\" *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  "
+    })
 ], MultiselectDropdown);
@@ -288,7 +285,6 @@ exports.MultiselectDropdown = MultiselectDropdown;
         imports: [common_1.CommonModule, forms_1.FormsModule],
-        exports: [MultiselectDropdown],
-        declarations: [MultiselectDropdown, MultiSelectSearchFilter],
+        exports: [MultiselectDropdown, MultiSelectSearchFilter],
+        declarations: [MultiselectDropdown, MultiSelectSearchFilter]
     })
 ], MultiselectDropdownModule);
 exports.MultiselectDropdownModule = MultiselectDropdownModule;
-//# sourceMappingURL=multiselect-dropdown.js.map

src/multiselect-dropdown.ts

@@ -37,2 +37,3 @@ /*
   parentId?: any;
+  params?: any;
 }
@@ -45,2 +46,3 @@
   buttonClasses?: string;
+  itemClasses?: string;
   selectionLimit?: number;
@@ -86,52 +88,61 @@ closeOnSelect?: boolean;
   styles: [`
-	   a { outline: none !important; }
+    a {
+      outline: none !important;
+    }
   `],
   template: `
-	<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" [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">
-  			<span class="input-group-addon" id="sizing-addon3"><i class="fa fa-search"></i></span>
-  			<input type="text" class="form-control" placeholder="{{ texts.searchPlaceholder }}"
-  			aria-describedby="sizing-addon3" [(ngModel)]="searchFilterText">
-  			<span class="input-group-btn" *ngIf="searchFilterText.length > 0">
+    <div class="dropdown">
+      <button type="button" class="dropdown-toggle" [ngClass]="settings.buttonClasses"
+              (click)="toggleDropdown()" [disabled]="disabled">{{ title }}&nbsp;<span class="caret"></span></button>
+      <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">
+            <span class="input-group-addon" id="sizing-addon3"><i class="fa fa-search"></i></span>
+            <input type="text" class="form-control" placeholder="{{ texts.searchPlaceholder }}"
+                   aria-describedby="sizing-addon3" [(ngModel)]="searchFilterText">
+            <span class="input-group-btn" *ngIf="searchFilterText.length > 0">
   			    <button class="btn btn-default btn-secondary" type="button" (click)="clearSearch($event)"><i class="fa fa-times"></i></button>
   			</span>
-  		    </div>
-  		</li>
-  		<li class="dropdown-divider divider" *ngIf="settings.enableSearch"></li>
-  		<li class="dropdown-item" *ngIf="settings.showCheckAll">
-  		    <a href="javascript:;" role="menuitem" tabindex="-1" (click)="checkAll()">
-  			<span style="width: 16px;" class="glyphicon glyphicon-ok"></span>
-  			{{ texts.checkAll }}
-  		    </a>
-  		</li>
-  		<li class="dropdown-item" *ngIf="settings.showUncheckAll">
-  		    <a href="javascript:;" role="menuitem" tabindex="-1" (click)="uncheckAll()">
-  			<span style="width: 16px;" class="glyphicon glyphicon-remove"></span>
-  			{{ texts.uncheckAll }}
-  		    </a>
-  		</li>
-  		<li *ngIf="settings.showCheckAll || settings.showUncheckAll" class="dropdown-divider divider"></li>
-  		<li class="dropdown-item" [style]="!option.isLabel && 'cursor: pointer'" *ngFor="let option of options | searchFilter:searchFilterText"
-        (click)="!option.isLabel && setSelected($event, option)" [class.dropdown-header]="option.isLabel">
+          </div>
+        </li>
+        <li class="dropdown-divider divider" *ngIf="settings.enableSearch"></li>
+        <li class="dropdown-item" *ngIf="settings.showCheckAll">
+          <a href="javascript:;" role="menuitem" tabindex="-1" (click)="checkAll()">
+            <span style="width: 16px;"
+              [ngClass]="{'glyphicon glyphicon-ok': settings.checkedStyle !== 'fontawesome',
+              'fa fa-check': settings.checkedStyle === 'fontawesome'}"></span>
+            {{ texts.checkAll }}
+          </a>
+        </li>
+        <li class="dropdown-item" *ngIf="settings.showUncheckAll">
+          <a href="javascript:;" role="menuitem" tabindex="-1" (click)="uncheckAll()">
+            <span style="width: 16px;"
+              [ngClass]="{'glyphicon glyphicon-remove': settings.checkedStyle !== 'fontawesome',
+              'fa fa-times': settings.checkedStyle === 'fontawesome'}"></span>
+            {{ texts.uncheckAll }}
+          </a>
+        </li>
+        <li *ngIf="settings.showCheckAll || settings.showUncheckAll" class="dropdown-divider divider"></li>
+        <li class="dropdown-item" [ngStyle]="getItemStyle(option)" *ngFor="let option of options | searchFilter:searchFilterText"
+            (click)="!option.isLabel && setSelected($event, option)" [class.dropdown-header]="option.isLabel">
           <template [ngIf]="option.isLabel">
             {{ option.name }}
           </template>
-  		    <a *ngIf="!option.isLabel" href="javascript:;" role="menuitem" tabindex="-1">
-  			    <input *ngIf="settings.checkedStyle === 'checkboxes'" type="checkbox" [checked]="isSelected(option)" (click)="preventCheckboxCheck($event, option)" />
-  			    <span *ngIf="settings.checkedStyle === 'glyphicon'" style="width: 16px;"
-  			      class="glyphicon" [class.glyphicon-ok]="isSelected(option)"></span>
+          <a *ngIf="!option.isLabel" href="javascript:;" role="menuitem" tabindex="-1">
+            <input *ngIf="settings.checkedStyle === 'checkboxes'" type="checkbox"
+              [checked]="isSelected(option)" (click)="preventCheckboxCheck($event, option)"/>
+            <span *ngIf="settings.checkedStyle === 'glyphicon'" style="width: 16px;"
+                  class="glyphicon" [class.glyphicon-ok]="isSelected(option)"></span>
             <span *ngIf="settings.checkedStyle === 'fontawesome'" style="width: 16px;display: inline-block;">
   			      <i *ngIf="isSelected(option)" class="fa fa-check" aria-hidden="true"></i>
   			    </span>
-  	        {{ option.name }}
-  		    </a>
-  	  </li>
-    </ul>
-	</div>
-`
+            <span [ngClass]="settings.itemClasses">
+              {{ option.name }}
+            </span>
+          </a>
+        </li>
+      </ul>
+    </div>
+  `
 })
@@ -142,2 +153,3 @@ export class MultiselectDropdown implements OnInit, DoCheck, ControlValueAccessor, Validator {
   @Input() texts: IMultiSelectTexts;
+  @Input() disabled: boolean = false;
   @Output() selectionLimitReached = new EventEmitter();
@@ -169,2 +181,3 @@ @Output() dropdownClosed = new EventEmitter();
   searchFilterText: string = '';
+
   defaultSettings: IMultiSelectSettings = {
@@ -194,6 +207,12 @@ pullRight: false,
   constructor(private element: ElementRef,
-    differs: IterableDiffers) {
+              differs: IterableDiffers) {
     this.differ = differs.find([]).create(null);
   }
 
+  getItemStyle(option: IMultiSelectOption): any {
+    if (!option.isLabel) {
+      return {'cursor': 'pointer'};
+    }
+  }
+
   ngOnInit() {
@@ -205,4 +224,4 @@ this.settings = Object.assign(this.defaultSettings, this.settings);
 
-  onModelChange: Function = (_: any) => { };
-  onModelTouched: Function = () => { };
+  onModelChange: Function = (_: any) => {};
+  onModelTouched: Function = () => {};
 
@@ -223,2 +242,6 @@ writeValue(value: any): void {
 
+  setDisabledState(isDisabled: boolean) {
+    this.disabled = isDisabled;
+  }
+
   ngDoCheck() {
@@ -234,5 +257,5 @@ const changes = this.differ.diff(this.model);
     return (this.model && this.model.length) ? null : {
-        required: {
-            valid: false,
-        },
+      required: {
+        valid: false,
+      },
     };
@@ -346,5 +369,6 @@ }
   imports: [CommonModule, FormsModule],
-  exports: [MultiselectDropdown],
+  exports: [MultiselectDropdown, MultiSelectSearchFilter],
   declarations: [MultiselectDropdown, MultiSelectSearchFilter],
 })
-export class MultiselectDropdownModule { }
+export class MultiselectDropdownModule {
+}

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

41595

increased by3.01%

Lines of code

654

increased by2.99%

No dependency changes