@stackline/angular-multiselect-dropdown 12.0.1 → 13.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (40) hide show
  1. package/README.md +15 -15
  2. package/esm2020/lib/clickOutside.mjs +78 -0
  3. package/esm2020/lib/list-filter.mjs +33 -0
  4. package/esm2020/lib/menu-item.mjs +62 -0
  5. package/esm2020/lib/multiselect.component.mjs +405 -0
  6. package/esm2020/lib/multiselect.interface.mjs +2 -0
  7. package/esm2020/lib/multiselect.model.mjs +9 -0
  8. package/esm2020/public-api.mjs +6 -0
  9. package/esm2020/stackline-angular-multiselect-dropdown.mjs +5 -0
  10. package/fesm2015/stackline-angular-multiselect-dropdown.mjs +584 -0
  11. package/fesm2015/stackline-angular-multiselect-dropdown.mjs.map +1 -0
  12. package/fesm2020/stackline-angular-multiselect-dropdown.mjs +584 -0
  13. package/fesm2020/stackline-angular-multiselect-dropdown.mjs.map +1 -0
  14. package/lib/clickOutside.d.ts +27 -0
  15. package/lib/list-filter.d.ts +9 -0
  16. package/lib/menu-item.d.ts +25 -0
  17. package/lib/multiselect.component.d.ts +80 -0
  18. package/lib/multiselect.interface.d.ts +23 -0
  19. package/lib/multiselect.model.d.ts +10 -0
  20. package/package.json +36 -104
  21. package/public-api.d.ts +6 -0
  22. package/stackline-angular-multiselect-dropdown.d.ts +5 -0
  23. package/angular2-multiselect-dropdown.ts +0 -1
  24. package/gulpfile.js +0 -68
  25. package/inline-resources.js +0 -119
  26. package/multiselect.component.css +0 -759
  27. package/src/app/angular2-multiselect-dropdown/angular2-multiselect-dropdown.ts +0 -6
  28. package/src/app/angular2-multiselect-dropdown/clickOutside.ts +0 -60
  29. package/src/app/angular2-multiselect-dropdown/index.ts +0 -6
  30. package/src/app/angular2-multiselect-dropdown/list-filter.ts +0 -29
  31. package/src/app/angular2-multiselect-dropdown/menu-item.ts +0 -55
  32. package/src/app/angular2-multiselect-dropdown/multiselect.component.html +0 -89
  33. package/src/app/angular2-multiselect-dropdown/multiselect.component.scss +0 -712
  34. package/src/app/angular2-multiselect-dropdown/multiselect.component.ts +0 -413
  35. package/src/app/angular2-multiselect-dropdown/multiselect.interface.ts +0 -22
  36. package/src/app/angular2-multiselect-dropdown/multiselect.model.ts +0 -13
  37. package/tsconfig-aot.json +0 -32
  38. package/tsconfig.json +0 -36
  39. package/webpack-test.config.ts +0 -70
  40. package/webpack-umd.config.ts +0 -98
@@ -1,6 +0,0 @@
1
- export { AngularMultiSelect } from './multiselect.component';
2
- export { ClickOutsideDirective } from './clickOutside';
3
- export { ListFilterPipe } from './list-filter';
4
- export { Item } from './menu-item';
5
- export { TemplateRenderer } from './menu-item';
6
- export { AngularMultiSelectModule } from './multiselect.component';
@@ -1,60 +0,0 @@
1
- import {Directive, ElementRef, Output, EventEmitter, HostListener, Input} from '@angular/core';
2
-
3
- @Directive({
4
- selector: '[clickOutside]'
5
- })
6
- export class ClickOutsideDirective {
7
- constructor(private _elementRef: ElementRef) {
8
- }
9
-
10
- @Output()
11
- public clickOutside = new EventEmitter<MouseEvent>();
12
-
13
- @HostListener('document:click', ['$event', '$event.target'])
14
- @HostListener('document:touchstart', ['$event', '$event.target'])
15
- public onClick(event: MouseEvent, targetElement: HTMLElement): void {
16
- if (!targetElement) {
17
- return;
18
- }
19
-
20
- const clickedInside = this._elementRef.nativeElement.contains(targetElement);
21
- if (!clickedInside) {
22
- this.clickOutside.emit(event);
23
- }
24
- }
25
- }
26
-
27
- @Directive({
28
- selector: '[scroll]'
29
- })
30
- export class ScrollDirective {
31
- constructor(private _elementRef: ElementRef) {
32
- }
33
-
34
- @Output()
35
- public scroll = new EventEmitter<MouseEvent>();
36
-
37
- @HostListener('scroll', ['$event'])
38
- public onClick(event: MouseEvent, targetElement: HTMLElement): void {
39
- this.scroll.emit(event);
40
- }
41
- }
42
- @Directive({
43
- selector: '[styleProp]'
44
- })
45
- export class styleDirective {
46
-
47
- constructor(private el: ElementRef) {
48
-
49
- }
50
-
51
- @Input('styleProp') styleVal: number;
52
-
53
- ngOnInit() {
54
-
55
- this.el.nativeElement.style.top = this.styleVal;
56
- }
57
- ngOnChanges(): void {
58
- this.el.nativeElement.style.top = this.styleVal;
59
- }
60
- }
@@ -1,6 +0,0 @@
1
- export { AngularMultiSelect } from './multiselect.component';
2
- export { ClickOutsideDirective } from './clickOutside';
3
- export { ListFilterPipe } from './list-filter';
4
- export { Item } from './menu-item';
5
- export { TemplateRenderer } from './menu-item';
6
- export { AngularMultiSelectModule } from './multiselect.component';
@@ -1,29 +0,0 @@
1
- import { Pipe, PipeTransform } from '@angular/core';
2
-
3
- import { ListItem } from './multiselect.model';
4
-
5
- @Pipe({
6
- name: 'listFilter',
7
- pure: false
8
- })
9
- export class ListFilterPipe implements PipeTransform {
10
- transform(items: ListItem[], filter: any): ListItem[] {
11
- if (!items || !filter) {
12
- return items;
13
- }
14
- return items.filter((item: any) => this.applyFilter(item, filter));
15
- }
16
- applyFilter(item: any, filter: any): boolean {
17
- let found = false;
18
- for (var prop in item) {
19
- if (filter) {
20
- if (item[prop].toString().toLowerCase().indexOf(filter.toLowerCase()) >= 0) {
21
- found = true;
22
- }
23
- }
24
- else
25
- found = true;
26
- }
27
- return found;
28
- }
29
- }
@@ -1,55 +0,0 @@
1
- import { Component, OnInit, OnDestroy, NgModule, TemplateRef, AfterContentInit, ContentChild, EmbeddedViewRef, OnChanges, ViewContainerRef, ViewEncapsulation, Input, Output, EventEmitter, ElementRef, AfterViewInit, Pipe, PipeTransform } from '@angular/core';
2
- import { SafeResourceUrl, DomSanitizer } from '@angular/platform-browser';
3
- import { CommonModule } from '@angular/common';
4
-
5
- @Component({
6
- selector: 'c-item',
7
- template: ``
8
- })
9
-
10
- export class Item {
11
-
12
- @ContentChild(TemplateRef, { static: false }) template: TemplateRef<any>
13
- constructor() {
14
- }
15
-
16
- }
17
-
18
- @Component({
19
- selector: 'c-badge',
20
- template: ``
21
- })
22
-
23
- export class Badge {
24
-
25
- @ContentChild(TemplateRef, { static: false }) template: TemplateRef<any>
26
- constructor() {
27
- }
28
-
29
- }
30
-
31
- @Component({
32
- selector: 'c-templateRenderer',
33
- template: ``
34
- })
35
-
36
- export class TemplateRenderer implements OnInit, OnDestroy {
37
-
38
- @Input() data: any
39
- @Input() item: any
40
- view: EmbeddedViewRef<any>;
41
-
42
- constructor(public viewContainer: ViewContainerRef) {
43
- }
44
- ngOnInit() {
45
- this.view = this.viewContainer.createEmbeddedView(this.data.template, {
46
- '\$implicit': this.data,
47
- 'item':this.item
48
- });
49
- }
50
-
51
- ngOnDestroy() {
52
- this.view.destroy();
53
- }
54
-
55
- }
@@ -1,89 +0,0 @@
1
- <div class="stackline-dropdown" [ngClass]="getDropdownClasses()" (clickOutside)="closeDropdown()">
2
- <div class="selected-list">
3
- <div class="c-btn" (click)="toggleDropdown($event)" [ngClass]="{'disabled': settings.disabled}">
4
- <span *ngIf="selectedItems?.length == 0">{{settings.text}}</span>
5
- <span *ngIf="settings.singleSelection">
6
- <span *ngFor="let item of selectedItems;trackBy: trackByFn;">
7
- {{item[settings.labelKey]}}
8
- </span>
9
- </span>
10
- <div class="c-list" *ngIf="selectedItems?.length > 0 && !settings.singleSelection">
11
- <div class="c-token" *ngFor="let item of selectedItems;trackBy: trackByFn;let k = index" [hidden]="k > settings.badgeShowLimit-1">
12
- <span *ngIf="!badgeTempl" class="c-label">{{item[settings.labelKey]}}</span>
13
- <span *ngIf="badgeTempl" class="c-label">
14
- <c-templateRenderer [data]="badgeTempl" [item]="item"></c-templateRenderer>
15
- </span>
16
- <span class="fa fa-remove" (click)="onItemClick(item,k,$event)"></span>
17
- </div>
18
- </div>
19
- <span class="countplaceholder" *ngIf="selectedItems?.length > settings.badgeShowLimit">+{{selectedItems?.length - settings.badgeShowLimit }}</span>
20
- <span class="fa fa-remove clear-all" *ngIf="settings.clearAll && selectedItems?.length > 0 && !settings.disabled" (click)="clearSelection($event);$event.stopPropagation()"></span>
21
- <span class="fa" [ngClass]="{'fa-angle-down': !isActive,'fa-angle-up':isActive}"></span>
22
- </div>
23
- </div>
24
- <div class="dropdown-list" [hidden]="!isActive">
25
- <div class="arrow-up arrow-2"></div>
26
- <div class="arrow-up"></div>
27
- <div class="list-area">
28
- <div class="pure-checkbox select-all" *ngIf="settings.enableCheckAll && !settings.singleSelection && !settings.limitSelection" (click)="toggleSelectAll()">
29
- <input *ngIf="settings.showCheckbox" type="checkbox" [checked]="isSelectAll" [disabled]="settings.limitSelection == selectedItems?.length"/>
30
- <label>
31
- <span [hidden]="isSelectAll">{{settings.selectAllText}}</span>
32
- <span [hidden]="!isSelectAll">{{settings.unSelectAllText}}</span>
33
- </label>
34
- </div>
35
- <div class="list-filter" *ngIf="settings.enableSearchFilter && !settings.lazyLoading">
36
- <span class="fa fa-search"></span>
37
- <input #searchInput type="text" [placeholder]="settings.searchPlaceholderText" [(ngModel)]="filter">
38
- </div>
39
- <div class="list-filter" *ngIf="settings.enableSearchFilter && settings.lazyLoading">
40
- <span class="fa fa-search"></span>
41
- <input #searchInput type="text" [placeholder]="settings.searchPlaceholderText" (keyup)="filterInfiniteList($event)">
42
- </div>
43
- <ul *ngIf="!settings.groupBy" [style.maxHeight] = "settings.maxHeight+'px'" class="lazyContainer" >
44
- <span *ngIf="itemTempl">
45
- <li *ngFor="let item of data | listFilter:filter; let i = index;" (click)="onItemClick(item,i,$event)" class="pure-checkbox">
46
- <input *ngIf="settings.showCheckbox" type="checkbox" [checked]="isSelected(item)" [disabled]="settings.limitSelection == selectedItems?.length && !isSelected(item)"/>
47
- <label></label>
48
- <c-templateRenderer [data]="itemTempl" [item]="item"></c-templateRenderer>
49
- </li>
50
- </span>
51
- <span *ngIf="!itemTempl && !settings.lazyLoading" >
52
- <li *ngFor="let item of data | listFilter:filter; let i = index;" (click)="onItemClick(item,i,$event)" class="pure-checkbox">
53
- <input *ngIf="settings.showCheckbox" type="checkbox" [checked]="isSelected(item)" [disabled]="settings.limitSelection == selectedItems?.length && !isSelected(item)"/>
54
- <label>{{item[settings.labelKey]}}</label>
55
- </li>
56
- </span>
57
- <span *ngIf="!itemTempl && settings.lazyLoading" >
58
- <div [ngStyle]="{'height':totalHeight+'px'}" style="position: relative;">
59
-
60
-
61
- <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]">
62
- <input *ngIf="settings.showCheckbox" type="checkbox" [checked]="isSelected(item)" [disabled]="settings.limitSelection == selectedItems?.length && !isSelected(item)"/>
63
- <label>{{item[settings.labelKey]}}</label>
64
- </li>
65
- </div>
66
- </span>
67
- </ul>
68
- <div *ngIf="settings.groupBy" [style.maxHeight] = "settings.maxHeight+'px'" style="overflow: auto;">
69
- <ul *ngFor="let obj of groupedData ; let i = index;" class="list-grp">
70
- <h4 *ngIf="(obj.value | listFilter:filter ).length > 0">{{obj.key}}</h4>
71
- <span *ngIf="itemTempl" >
72
- <li *ngFor="let item of obj.value | listFilter:filter; let i = index;" (click)="onItemClick(item,i,$event)" class="pure-checkbox">
73
- <input *ngIf="settings.showCheckbox" type="checkbox" [checked]="isSelected(item)" [disabled]="settings.limitSelection == selectedItems?.length && !isSelected(item)"/>
74
- <label></label>
75
- <c-templateRenderer [data]="itemTempl" [item]="item"></c-templateRenderer>
76
- </li>
77
- </span>
78
- <span *ngIf="!itemTempl" >
79
- <li *ngFor="let item of obj.value | listFilter:filter; let i = index;" (click)="onItemClick(item,i,$event)" class="pure-checkbox">
80
- <input *ngIf="settings.showCheckbox" type="checkbox" [checked]="isSelected(item)" [disabled]="settings.limitSelection == selectedItems?.length && !isSelected(item)"/>
81
- <label>{{item[settings.labelKey]}}</label>
82
- </li>
83
- </span>
84
- </ul>
85
- </div>
86
- <h5 class="list-message" *ngIf="data?.length == 0">{{settings.noDataLabel}}</h5>
87
- </div>
88
- </div>
89
- </div>