@stackline/angular-multiselect-dropdown 2.0.5 → 4.0.1

package/package.json

@@ -1,69 +1,104 @@
 {
-  "$schema": "../../../node_modules/ng-packagr/package.schema.json",
   "name": "@stackline/angular-multiselect-dropdown",
-  "version": "2.0.5",
-  "license": "MIT",
-  "author": "Pradeep Terli (Original), Alexandro Paixao Marques (Maintainer)",
-  "description": "Angular multiselect dropdown for maintained release lines from Angular 2 through Angular 21, with search, grouping, custom templates, checkbox selection, reactive and template-driven forms support, and Material-inspired theming from Angular 14 onward.",
+  "version": "4.0.1",
+  "description": "Angular 4 compatible multiselect dropdown package for the Stackline Angular 4 release line.",
   "keywords": [
-    "angular",
-    "angular-library",
-    "angular-component",
-    "angular-multiselect-dropdown",
-    "angular multiselect dropdown",
-    "angular-multiselect",
+    "angular 2 multiselect dropdown",
+    "angular 4 multiselect dropdown",
     "angular multiselect",
-    "angular-select",
-    "angular multi select",
-    "multiselect",
-    "multiselect-dropdown",
-    "multi-select",
-    "dropdown",
-    "select",
-    "dropdown-search",
-    "checkbox-dropdown",
-    "checkbox multiselect",
-    "searchable-dropdown",
-    "select-all",
-    "dropdown-with-search",
-    "search-filter",
-    "group-by",
-    "grouped-dropdown",
-    "custom-templates",
-    "template-driven-forms",
-    "reactive-forms",
-    "ngmodel",
-    "formcontrolname",
-    "forms",
-    "ui-component",
-    "material-inspired",
-    "material-like",
-    "theming",
-    "scss-theme",
-    "css-theme",
-    "legacy-angular",
-    "angular-compatibility",
-    "angular21",
-    "angular20",
-    "angular19",
-    "angular14",
-    "angular2-multiselect",
-    "angular2-multiselect-dropdown",
-    "migration-friendly",
-    "maintained",
-    "ngx",
-    "ngx-multiselect",
-    "virtual-scroll"
+    "angular dropdown"
   ],
-  "homepage": "https://alexandro.net/docs/angular/multiselect/",
-  "peerDependencies": {
-    "@angular/core": ">=2.0.0 <3.0.0",
-    "@angular/forms": ">=2.0.0 <3.0.0",
-    "@angular/common": ">=2.0.0 <3.0.0"
+  "license": "MIT",
+  "angular-cli": {},
+  "author": "Pradeep Terli",
+  "scripts": {
+    "ng": "ng",
+    "start": "ng serve",
+    "e2e": "ng e2e",
+    "build": "npm run build:esm && npm run build:umd && gulp copy",
+    "build:esm": "gulp inline-templates && npm run ngcompile",
+    "build:esm:watch": "gulp build:esm:watch",
+    "build:umd": "webpack --config webpack-umd.config.ts",
+    "build:umd:watch": "npm run build:umd -- --watch",
+    "build:watch": "concurrently --raw \"npm run build:umd:watch\" \"npm run build:esm:watch\"",
+    "ci": "npm run lint && npm run test && npm run build && npm run docs",
+    "clean:all": "npm run clean:tmp && rimraf node_modules",
+    "clean:tmp": "rimraf coverage dist tmp docs",
+    "codecov": "cat coverage/lcov.info | codecov",
+    "docs": "compodoc -p tsconfig.json -d docs --disableCoverage --disablePrivateOrInternalSupport",
+    "explorer": "source-map-explorer ./dist/index.umd.js",
+    "gh-pages": "rimraf docs && npm run docs && gh-pages -d docs",
+    "lint": "npm run tslint 'src/**/*.ts'",
+    "ngcompile": "ngc -p tsconfig-aot.json",
+    "postversion": "git push && git push --tags",
+    "prebuild": "rimraf dist tmp",
+    "prebuild:watch": "rimraf dist tmp",
+    "preversion": "npm run ci",
+    "test": "karma start",
+    "test:watch": "karma start --auto-watch --no-single-run",
+    "tslint": "tslint",
+    "github-pages": "ng build --base-href /angular2-multiselect-dropdown/"
   },
+  "private": false,
   "dependencies": {
-    "@tweenjs/tween.js": "^17.4.0",
-    "tslib": "^2.3.0"
+    "font-awesome": "*"
+  },
+  "devDependencies": {
+    "@angular/common": "^4.0.0",
+    "@angular/compiler": "^4.0.0",
+    "@angular/compiler-cli": "^4.0.0",
+    "@angular/animations": "^4.0.0",
+    "@angular/cli": "^1.3.2",
+    "@angular/core": "^4.0.0",
+    "@angular/forms": "^4.0.0",
+    "@angular/http": "^4.0.0",
+    "@angular/platform-browser": "^4.0.0",
+    "@angular/platform-browser-dynamic": "^4.0.0",
+    "@angular/router": "^4.0.0",
+    "@compodoc/compodoc": "^1.0.0-beta.9",
+    "@types/jasmine": "^2.5.47",
+    "@types/karma": "^0.13.35",
+    "@types/node": "^7.0.18",
+    "@types/webpack": "^2.2.15",
+    "@types/webpack-env": "^1.13.0",
+    "angular2-template-loader": "^0.6.2",
+    "awesome-typescript-loader": "^3.1.3",
+    "codecov": "^2.2.0",
+    "codelyzer": "^3.0.1",
+    "concurrently": "^3.4.0",
+    "css-loader": "^0.28.1",
+    "gh-pages": "^1.0.0",
+    "gulp": "^3.9.1",
+    "gulp-copy": "^1.0.1",
+    "gulp-inline-ng2-template": "^4.0.0",
+    "istanbul-instrumenter-loader": "^2.0.0",
+    "jasmine-core": "^2.6.1",
+    "json-loader": "^0.5.4",
+    "@types/log4js": "0.0.33",
+    "karma": "^1.7.0",
+    "karma-chrome-launcher": "^2.1.1",
+    "karma-coverage-istanbul-reporter": "^1.2.1",
+    "karma-jasmine": "^1.1.0",
+    "karma-mocha-reporter": "^2.2.3",
+    "karma-sourcemap-loader": "^0.3.7",
+    "karma-webpack": "^2.0.3",
+    "node-sass": "^4.5.2",
+    "raw-loader": "^0.5.1",
+    "rimraf": "2.6.1",
+    "rxjs": "^5.3.1",
+    "sass-loader": "^6.0.5",
+    "source-map-explorer": "^1.3.3",
+    "to-string-loader": "^1.1.5",
+    "ts-node": "^3.0.4",
+    "tslint": "^5.2.0",
+    "typescript": "^2.3.2",
+    "webpack": "^2.5.1",
+    "webpack-angular-externals": "^1.0.2",
+    "webpack-rxjs-externals": "^1.0.0",
+    "zone.js": "^0.8.10",
+    "ng2-gist": "*",
+    "primeng": "*",
+    "bootstrap": "^4.0.0-beta.2"
   },
   "repository": {
     "type": "git",
@@ -72,20 +107,12 @@
   "bugs": {
     "url": "https://github.com/alexandroit/angular-multiselect-dropdown/issues"
   },
-  "engines": {
-    "node": ">=20.19.0"
-  },
-  "module": "fesm2022/stackline-angular-multiselect-dropdown.mjs",
-  "typings": "types/stackline-angular-multiselect-dropdown.d.ts",
-  "exports": {
-    "./package.json": {
-      "default": "./package.json"
-    },
-    ".": {
-      "types": "./types/stackline-angular-multiselect-dropdown.d.ts",
-      "default": "./fesm2022/stackline-angular-multiselect-dropdown.mjs"
-    }
+  "main": "angular2-multiselect-dropdown.ts",
+  "types": "angular2-multiselect-dropdown.ts",
+  "peerDependencies": {
+    "@angular/common": ">=4.0.0 <5.0.0",
+    "@angular/core": ">=4.0.0 <5.0.0",
+    "@angular/forms": ">=4.0.0 <5.0.0"
   },
-  "sideEffects": false,
-  "type": "module"
+  "homepage": "https://alexandro.net/docs/angular/multiselect/angular-4/"
 }

package/src/app/angular2-multiselect-dropdown/angular2-multiselect-dropdown.ts

@@ -0,0 +1,6 @@
+export { AngularMultiSelect } from './multiselect.component';
+export { ClickOutsideDirective } from './clickOutside';
+export { ListFilterPipe } from './list-filter';
+export { Item } from './menu-item';
+export { TemplateRenderer } from './menu-item';
+export { AngularMultiSelectModule } from './multiselect.component';

package/src/app/angular2-multiselect-dropdown/clickOutside.ts

@@ -0,0 +1,60 @@
+import {Directive, ElementRef, Output, EventEmitter, HostListener, Input} from '@angular/core';
+
+@Directive({
+    selector: '[clickOutside]'
+})
+export class ClickOutsideDirective {
+    constructor(private _elementRef: ElementRef) {
+    }
+
+    @Output()
+    public clickOutside = new EventEmitter<MouseEvent>();
+
+    @HostListener('document:click', ['$event', '$event.target'])
+    @HostListener('document:touchstart', ['$event', '$event.target'])
+    public onClick(event: MouseEvent, targetElement: HTMLElement): void {
+        if (!targetElement) {
+            return;
+        }
+
+        const clickedInside = this._elementRef.nativeElement.contains(targetElement);
+        if (!clickedInside) {
+            this.clickOutside.emit(event);
+        }
+    }
+}
+
+@Directive({
+    selector: '[scroll]'
+})
+export class ScrollDirective {
+    constructor(private _elementRef: ElementRef) {
+    }
+
+    @Output()
+    public scroll = new EventEmitter<MouseEvent>();
+
+    @HostListener('scroll', ['$event'])
+    public onClick(event: MouseEvent, targetElement: HTMLElement): void {
+        this.scroll.emit(event);
+    }
+}
+@Directive({
+  selector: '[styleProp]'
+})
+export class styleDirective {
+
+  constructor(private el: ElementRef) {
+
+   }
+
+  @Input('styleProp') styleVal: number;
+
+   ngOnInit() {
+
+      this.el.nativeElement.style.top = this.styleVal;
+   }
+    ngOnChanges(): void {
+       this.el.nativeElement.style.top = this.styleVal;
+  }
+}

package/src/app/angular2-multiselect-dropdown/index.ts

@@ -0,0 +1,6 @@
+export { AngularMultiSelect } from './multiselect.component';
+export { ClickOutsideDirective } from './clickOutside';
+export { ListFilterPipe } from './list-filter';
+export { Item } from './menu-item';
+export { TemplateRenderer } from './menu-item';
+export { AngularMultiSelectModule } from './multiselect.component';

package/src/app/angular2-multiselect-dropdown/list-filter.ts

@@ -0,0 +1,29 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+import { ListItem } from './multiselect.model';
+
+@Pipe({
+    name: 'listFilter',
+    pure: false
+})
+export class ListFilterPipe implements PipeTransform {
+    transform(items: ListItem[], filter: any): ListItem[] {
+        if (!items || !filter) {
+            return items;
+        }
+        return items.filter((item: any) => this.applyFilter(item, filter));
+    }
+    applyFilter(item: any, filter: any): boolean {
+        let found = false;
+        for (var prop in item) {
+            if (filter) {
+                if (item[prop].toString().toLowerCase().indexOf(filter.toLowerCase()) >= 0) {
+                    found = true;
+                }
+            }
+            else
+                found = true;
+        }
+        return found;
+    }
+}

package/src/app/angular2-multiselect-dropdown/menu-item.ts

@@ -0,0 +1,55 @@
+import { Component, OnInit, OnDestroy, NgModule, TemplateRef, AfterContentInit, ContentChild, EmbeddedViewRef, OnChanges, ViewContainerRef, ViewEncapsulation, Input, Output, EventEmitter, ElementRef, AfterViewInit, Pipe, PipeTransform } from '@angular/core';
+import { SafeResourceUrl, DomSanitizer } from '@angular/platform-browser';
+import { CommonModule }       from '@angular/common';
+
+@Component({
+  selector: 'c-item',
+  template: ``
+})
+
+export class Item { 
+
+    @ContentChild(TemplateRef) template: TemplateRef<any>
+    constructor() {   
+    }
+
+}
+
+@Component({
+  selector: 'c-badge',
+  template: ``
+})
+
+export class Badge { 
+
+    @ContentChild(TemplateRef) template: TemplateRef<any>
+    constructor() {   
+    }
+
+}
+
+@Component({
+  selector: 'c-templateRenderer',
+  template: ``
+})
+
+export class TemplateRenderer implements OnInit, OnDestroy { 
+
+    @Input() data: any
+    @Input() item: any
+    view: EmbeddedViewRef<any>;
+
+    constructor(public viewContainer: ViewContainerRef) {   
+    }
+    ngOnInit() {
+        this.view = this.viewContainer.createEmbeddedView(this.data.template, {
+            '\$implicit': this.data,
+            'item':this.item
+        });
+    }
+	
+    ngOnDestroy() {
+		this.view.destroy();
+	}
+
+}

package/src/app/angular2-multiselect-dropdown/multiselect.component.html

@@ -0,0 +1,88 @@
+<div class="stackline-dropdown" [ngClass]="getDropdownClasses()" (clickOutside)="closeDropdown()">
+    <div class="selected-list">
+        <div class="c-btn" (click)="toggleDropdown($event)" [ngClass]="{'disabled': settings.disabled}">
+            <span *ngIf="selectedItems?.length == 0">{{settings.text}}</span>
+            <span *ngIf="settings.singleSelection">
+                <span *ngFor="let item of selectedItems;trackBy: trackByFn;">
+                    {{item[settings.labelKey]}}
+                </span>
+            </span>
+            <div class="c-list" *ngIf="selectedItems?.length > 0 && !settings.singleSelection">
+                <div class="c-token" *ngFor="let item of selectedItems;trackBy: trackByFn;let k = index" [hidden]="k > settings.badgeShowLimit-1">
+                    <span *ngIf="!badgeTempl" class="c-label">{{item[settings.labelKey]}}</span>
+                    <span *ngIf="badgeTempl" class="c-label">
+                        <c-templateRenderer [data]="badgeTempl" [item]="item"></c-templateRenderer>
+                    </span>
+                    <span class="fa fa-remove" (click)="onItemClick(item,k,$event)"></span>
+                </div>
+            </div> 
+            <span class="countplaceholder" *ngIf="selectedItems?.length > settings.badgeShowLimit">+{{selectedItems?.length - settings.badgeShowLimit }}</span>
+            <span class="fa" [ngClass]="{'fa-angle-down': !isActive,'fa-angle-up':isActive}"></span>
+        </div>      
+    </div>
+    <div class="dropdown-list" [hidden]="!isActive">
+    <div class="arrow-up arrow-2"></div>
+    <div class="arrow-up"></div>
+    <div class="list-area">
+        <div class="pure-checkbox select-all" *ngIf="settings.enableCheckAll && !settings.singleSelection && !settings.limitSelection" (click)="toggleSelectAll()">
+            <input *ngIf="settings.showCheckbox" type="checkbox" [checked]="isSelectAll" [disabled]="settings.limitSelection == selectedItems?.length"/>
+            <label>
+                <span [hidden]="isSelectAll">{{settings.selectAllText}}</span>
+                <span [hidden]="!isSelectAll">{{settings.unSelectAllText}}</span>
+            </label>
+        </div>   
+        <div class="list-filter" *ngIf="settings.enableSearchFilter && !settings.lazyLoading">
+            <span class="fa fa-search"></span>
+            <input #searchInput type="text" [placeholder]="settings.searchPlaceholderText" [(ngModel)]="filter">
+        </div> 
+        <div class="list-filter" *ngIf="settings.enableSearchFilter && settings.lazyLoading">
+            <span class="fa fa-search"></span>
+            <input #searchInput type="text" [placeholder]="settings.searchPlaceholderText" (keyup)="filterInfiniteList($event)">
+        </div>
+    <ul *ngIf="!settings.groupBy" [style.maxHeight] = "settings.maxHeight+'px'" class="lazyContainer" >
+        <span *ngIf="itemTempl">
+            <li *ngFor="let item of data | listFilter:filter; let i = index;" (click)="onItemClick(item,i,$event)" class="pure-checkbox">
+            <input *ngIf="settings.showCheckbox" type="checkbox" [checked]="isSelected(item)" [disabled]="settings.limitSelection == selectedItems?.length && !isSelected(item)"/>
+            <label></label>
+            <c-templateRenderer [data]="itemTempl" [item]="item"></c-templateRenderer>
+        </li>
+        </span>
+        <span *ngIf="!itemTempl && !settings.lazyLoading" >
+        <li *ngFor="let item of data | listFilter:filter; let i = index;" (click)="onItemClick(item,i,$event)" class="pure-checkbox">
+            <input *ngIf="settings.showCheckbox" type="checkbox" [checked]="isSelected(item)" [disabled]="settings.limitSelection == selectedItems?.length && !isSelected(item)"/>
+            <label>{{item[settings.labelKey]}}</label>
+        </li>
+        </span>
+        <span *ngIf="!itemTempl && settings.lazyLoading" >
+            <div [ngStyle]="{'height':totalHeight+'px'}" style="position: relative;">
+
+            
+        <li *ngFor="let item of chunkArray | listFilter:filter; let i = index;" (click)="onItemClick(item,i,$event)" style="position: absolute;width: 100%;" class="pure-checkbox" [styleProp]="chunkIndex[i]">
+            <input *ngIf="settings.showCheckbox" type="checkbox" [checked]="isSelected(item)" [disabled]="settings.limitSelection == selectedItems?.length && !isSelected(item)"/>
+            <label>{{item[settings.labelKey]}}</label>
+        </li>
+        </div>
+        </span>
+    </ul>
+    <div *ngIf="settings.groupBy" [style.maxHeight] = "settings.maxHeight+'px'" style="overflow: auto;">
+    <ul *ngFor="let obj of groupedData ; let i = index;" class="list-grp">
+        <h4 *ngIf="(obj.value | listFilter:filter ).length > 0">{{obj.key}}</h4>
+        <span *ngIf="itemTempl" >
+        <li *ngFor="let item of obj.value | listFilter:filter; let i = index;" (click)="onItemClick(item,i,$event)" class="pure-checkbox">
+            <input *ngIf="settings.showCheckbox" type="checkbox" [checked]="isSelected(item)" [disabled]="settings.limitSelection == selectedItems?.length && !isSelected(item)"/>
+            <label></label>
+            <c-templateRenderer [data]="itemTempl" [item]="item"></c-templateRenderer>
+        </li>
+        </span>
+        <span *ngIf="!itemTempl" >
+        <li *ngFor="let item of obj.value | listFilter:filter; let i = index;" (click)="onItemClick(item,i,$event)" class="pure-checkbox">
+            <input *ngIf="settings.showCheckbox" type="checkbox" [checked]="isSelected(item)" [disabled]="settings.limitSelection == selectedItems?.length && !isSelected(item)"/>
+            <label>{{item[settings.labelKey]}}</label>
+        </li>
+        </span>
+    </ul>
+    </div>
+    <h5 class="list-message" *ngIf="data?.length == 0">{{settings.noDataLabel}}</h5>
+    </div>
+    </div>
+</div>