+
-
-
+
+ ">
@@ -26,4 +21,4 @@
No options available.
-
+
\ No newline at end of file
diff --git a/projects/multiselect/src/lib/options/options.component.spec.ts b/projects/multiselect/src/lib/options/options.component.spec.ts
index a5443f58..4305dfbc 100644
--- a/projects/multiselect/src/lib/options/options.component.spec.ts
+++ b/projects/multiselect/src/lib/options/options.component.spec.ts
@@ -7,6 +7,7 @@ import { NgxMultiselectComponent } from '../multiselect.component';
import { NgxMultiselectService } from '../services/multiselect.service';
import { VirtualScrollDirective } from '../directives/virtual-scroll.directive';
import { CommonModule } from '@angular/common';
+import { MultiselectOption } from '../models/multiselect-option.model';
describe('Options Component', () => {
let component: OptionsComponent;
@@ -37,7 +38,7 @@ describe('Options Component', () => {
{ id: 6, name: 'Test 6' }
];
component.options = [...options];
- multiselect = new NgxMultiselectComponent(
>null, new NgxMultiselectService(), {});
+ multiselect = new NgxMultiselectComponent(>null, new NgxMultiselectService());
multiselect.multiple = true;
multiselect.setOptions([...options]);
component.selectOption.subscribe(option => {
@@ -180,7 +181,7 @@ describe('Options Component', () => {
const markedOptions = debugElement.queryAll(By.css('.option.marked'));
expect(markedOptions.length).toBe(1);
expect(clickedOption.ticked).toBe(true);
- expect(multiselect._selectedOptions.id).toBe(options[0].id);
+ expect((multiselect._selectedOptions as MultiselectOption).id).toBe(options[0].id);
expect(multiselectSelectSpy).toHaveBeenCalled();
expect(multiselectSelectSpy).toHaveBeenCalledWith(clickedOption);
expect(multiselect.isOpen).toBe(false);
@@ -200,7 +201,7 @@ describe('Options Component', () => {
const markedOptions = debugElement.queryAll(By.css('.option.marked'));
// TODO: check on below
// expect(markedOptions.length).toBe(1);
- expect(multiselect._selectedOptions.id).toBe(options[1].id);
+ expect((multiselect._selectedOptions as MultiselectOption).id).toBe(options[1].id);
expect(clickedOption.ticked).toBe(true);
expect(multiselectSelectSpy).toHaveBeenCalledTimes(2);
expect(multiselect.isOpen).toBe(false);
diff --git a/projects/multiselect/src/lib/options/options.component.ts b/projects/multiselect/src/lib/options/options.component.ts
index a84a4e9d..fd3c354c 100644
--- a/projects/multiselect/src/lib/options/options.component.ts
+++ b/projects/multiselect/src/lib/options/options.component.ts
@@ -10,6 +10,7 @@ import {
SimpleChanges,
OnChanges
} from '@angular/core';
+import { GroupByMultiselectOption, MultiselectOption } from '../models/multiselect-option.model';
@Component({
selector: 'ms-options',
@@ -18,36 +19,36 @@ import {
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class OptionsComponent implements OnInit, OnChanges {
- _options: any[] = [];
+ _options: MultiselectOption[] | GroupByMultiselectOption[] = [];
@Input() disabled: boolean = false;
- @Input() set options(value) {
+ @Input() set options(value: MultiselectOption[] | GroupByMultiselectOption[]) {
this._options = value;
}
get() {
return this._options;
}
- @Input() optionsTemplate: TemplateRef;
+ @Input() optionsTemplate!: TemplateRef;
@Output() selectOption = new EventEmitter();
start: number = 0;
end: number = 5;
- filteredOptions;
+ filteredOptions!: MultiselectOption[] | GroupByMultiselectOption[];
- @ViewChild('defaultOptionsTemplate', { static: true }) defaultOptionsTemplate: TemplateRef;
+ @ViewChild('defaultOptionsTemplate') defaultOptionsTemplate!: TemplateRef;
- constructor() {}
+ constructor() { }
- getOptionStyle(option: any) {
+ getOptionStyle(option: MultiselectOption | GroupByMultiselectOption) {
return { marked: option.ticked, disabled: this.disabled || option.disabled };
}
- select(option) {
+ select(option: MultiselectOption | GroupByMultiselectOption) {
this.selectOption.emit(option);
}
- updateRange({ start, end }) {
- this.filteredOptions = [...this._options].slice(start, end);
+ updateRange({ start, end }: Record) {
+ this.filteredOptions = [...this._options].slice(start, end) as MultiselectOption[] | GroupByMultiselectOption[];
}
ngOnInit() {
diff --git a/projects/multiselect/src/lib/pipes/display-selected-value.pipe.spec.ts b/projects/multiselect/src/lib/pipes/display-selected-value.pipe.spec.ts
index 3235a26c..23798bd3 100644
--- a/projects/multiselect/src/lib/pipes/display-selected-value.pipe.spec.ts
+++ b/projects/multiselect/src/lib/pipes/display-selected-value.pipe.spec.ts
@@ -1,9 +1,10 @@
import { DisplaySelectedValuePipe } from './display-selected-value.pipe';
import { TestBed } from '@angular/core/testing';
+import { MultiselectOption } from '@ngx-lib/multiselect/lib/models/multiselect-option.model';
describe('DisplaySelectedValuePipe', () => {
let pipe: DisplaySelectedValuePipe;
- let options: any[];
+ let options: MultiselectOption[];
beforeEach(() => {
TestBed.configureTestingModule({
declarations: [DisplaySelectedValuePipe]
diff --git a/projects/multiselect/src/lib/pipes/display-selected-value.pipe.ts b/projects/multiselect/src/lib/pipes/display-selected-value.pipe.ts
index 684b0d99..0b77daa3 100644
--- a/projects/multiselect/src/lib/pipes/display-selected-value.pipe.ts
+++ b/projects/multiselect/src/lib/pipes/display-selected-value.pipe.ts
@@ -1,4 +1,5 @@
import { Pipe, PipeTransform } from '@angular/core';
+import { MultiselectOption } from '../models/multiselect-option.model';
const DOTS = ' ...';
@@ -8,16 +9,15 @@ const DOTS = ' ...';
})
export class DisplaySelectedValuePipe implements PipeTransform {
defaultMaxLabelCount: number = 3;
- transform(value: any, maxLabelCount: number = this.defaultMaxLabelCount): any {
+ transform(value: MultiselectOption | MultiselectOption[] | null, maxLabelCount: number = this.defaultMaxLabelCount): string {
if (value instanceof Array) {
-
const collection = [...value];
var total = collection.length;
const condn = collection.length > maxLabelCount;
condn ? (collection.length = maxLabelCount) : null;
- return `${collection.map(v => v.name).join(', ')}${condn ? DOTS + ' ('+total+')' : ''}`;
+ return `${collection.map(v => v.name).join(', ')}${condn ? DOTS + ' (' + total + ')' : ''}`;
}
- return value && value.name;
+ return value && value.name as string;
}
}
diff --git a/projects/multiselect/src/lib/services/multiselect.service.spec.ts b/projects/multiselect/src/lib/services/multiselect.service.spec.ts
index a7e85bb9..e5e3c30b 100644
--- a/projects/multiselect/src/lib/services/multiselect.service.spec.ts
+++ b/projects/multiselect/src/lib/services/multiselect.service.spec.ts
@@ -2,6 +2,7 @@ import { TestBed, inject } from '@angular/core/testing';
import { NgxMultiselectService } from './multiselect.service';
import { debug } from 'util';
+import { MultiselectOption } from '../models/multiselect-option.model';
const groupByProperty = 'team';
const players = [{
@@ -41,16 +42,16 @@ describe('MultiselectService', () => {
[NgxMultiselectService],
(service: NgxMultiselectService) => {
// arrange
- const div = document.createElement('div')
+ const div = document.createElement('div');
div.classList.add('grand-parent');
div.innerHTML = ``
+ `;
// act
- const grandChild = div.querySelector('.grand-child');
+ const grandChild = div.querySelector('.grand-child') as HTMLElement;
const closest = service.closest(grandChild, '.grand-parent');
// assert
@@ -74,7 +75,7 @@ describe('MultiselectService', () => {
[NgxMultiselectService],
(service: NgxMultiselectService) => {
// arrange
- const obj = {id: 'Team', name: 'TeamName'};
+ const obj = { id: 'Team', name: 'TeamName' };
const keys = Object.keys(obj);
const values = Object.values(obj);
@@ -93,33 +94,33 @@ describe('MultiselectService', () => {
it('should group by pass group property', inject(
[NgxMultiselectService],
(service: NgxMultiselectService) => {
- // arrange
- // act
- const groupedResults = service.optionsGrouping(players, groupByProperty);
+ // arrange
+ // act
+ const groupedResults = service.optionsGrouping(players, groupByProperty);
- // assert
- expect(groupedResults.length).toBe(3);
- expect(groupedResults[0].values.length).toBe(2);
- expect(groupedResults[1].values.length).toBe(2);
- expect(groupedResults[2].values.length).toBe(1);
- }));
+ // assert
+ expect(groupedResults.length).toBe(3);
+ expect(groupedResults[0].values.length).toBe(2);
+ expect(groupedResults[1].values.length).toBe(2);
+ expect(groupedResults[2].values.length).toBe(1);
+ }));
it('should mark group option when all descendants are seleceted', inject(
[NgxMultiselectService],
- (service: NgxMultiselectService) => {
+ (service: NgxMultiselectService) => {
// arrange
- const plyrs = JSON.parse(JSON.stringify(players))
- plyrs.forEach(p => p.team === 'Manchester United' && (p.ticked = true));
+ const plyrs = JSON.parse(JSON.stringify(players)) as MultiselectOption[];
+ plyrs.forEach(p => p['team'] === 'Manchester United' && (p['ticked'] = true));
// act
const groupedResults = service.optionsGrouping(plyrs, groupByProperty);
// assert
- expect(groupedResults[0].ticked).toBeTruthy();
+ expect(groupedResults[0]['ticked']).toBeTruthy();
}
));
it('should un mark group option when any of descendant is deselected', inject(
[NgxMultiselectService],
- (service: NgxMultiselectService) => {
+ (service: NgxMultiselectService) => {
// arrange
const plyrs = JSON.parse(JSON.stringify(players))
@@ -127,13 +128,13 @@ describe('MultiselectService', () => {
const groupedResults = service.optionsGrouping(plyrs, groupByProperty);
// assert
- expect(groupedResults[0].ticked).toBeFalsy();
+ expect(groupedResults[0]['ticked']).toBeFalsy();
}
));
});
it('should find unique numbers', inject(
[NgxMultiselectService],
- (service: NgxMultiselectService) => {
+ (service: NgxMultiselectService) => {
// arrange
const plyrs = JSON.parse(JSON.stringify(players));
@@ -146,7 +147,7 @@ describe('MultiselectService', () => {
));
it('should flatten virtual group options', inject(
[NgxMultiselectService],
- (service: NgxMultiselectService) => {
+ (service: NgxMultiselectService) => {
// arrange
const plyrs = [1, 2, 1, 2, 3]
@@ -160,7 +161,7 @@ describe('MultiselectService', () => {
));
it('should disabled group button if all descendant disabled', inject(
[NgxMultiselectService],
- (service: NgxMultiselectService) => {
+ (service: NgxMultiselectService) => {
// arrange
const plyrs = JSON.parse(JSON.stringify(players))
plyrs.forEach(p => p.team === 'Manchester United' && (p.disabled = true));
@@ -175,9 +176,9 @@ describe('MultiselectService', () => {
));
it('should flatten virtual group options', inject(
[NgxMultiselectService],
- (service: NgxMultiselectService) => {
+ (service: NgxMultiselectService) => {
// arrange
- const plyrs = [1, 2, 1, 2, 3]
+ const plyrs = [1, 2, 1, 2, 3];
// act
const unique = service.findUnique(plyrs);
diff --git a/projects/multiselect/src/lib/services/multiselect.service.ts b/projects/multiselect/src/lib/services/multiselect.service.ts
index 371bd5c6..ecd6513b 100644
--- a/projects/multiselect/src/lib/services/multiselect.service.ts
+++ b/projects/multiselect/src/lib/services/multiselect.service.ts
@@ -1,4 +1,5 @@
import { Injectable } from '@angular/core';
+import { GroupByMultiselectOption, MultiselectOption } from '../models/multiselect-option.model';
const matchSelectors = [
'matches',
@@ -12,10 +13,10 @@ const matchSelectors = [
providedIn: 'root'
})
export class NgxMultiselectService {
- constructor() {}
+ constructor() { }
- pseudoClassExist(node, selector) {
- const nativeMatches = node.matches || node.msMatchesSelector;
+ pseudoClassExist(node: HTMLElement, selector: string) {
+ const nativeMatches = node.matches || (node as any).msMatchesSelector;
try {
return nativeMatches.call(node, selector);
} catch (error) {
@@ -23,24 +24,24 @@ export class NgxMultiselectService {
}
}
- closest(el, selector): boolean {
+ closest(el: HTMLElement | null, selector: string): boolean {
let matchesFn;
// find vendor prefix
- matchSelectors.some(function(fn) {
- if (typeof document.body[fn] === 'function') {
+ matchSelectors.some(function (fn) {
+ if (typeof (document as any).body[fn] === 'function') {
matchesFn = fn;
return true;
}
return false;
});
- let parent;
+ let parent: HTMLElement | null;
// traverse parents
while (el) {
parent = el.parentElement;
- if (parent && parent[matchesFn](selector)) {
- return parent;
+ if (parent && matchesFn && (parent[matchesFn] as any)(selector)) {
+ return !!parent;
}
el = parent;
}
@@ -49,47 +50,59 @@ export class NgxMultiselectService {
}
// TODO: make this logic to work to find all descendant groups
- collectAllDescendants(collection, groupProperty, groupName) {
- const allDescendants = collection.filter(item => item[groupProperty] == groupName);
- allDescendants.concat(collection.filter(item => item.parent == groupName));
+ collectAllDescendants(collection: GroupByMultiselectOption[], groupProperty: string, groupName: string) {
+ const allDescendants = collection.filter(
+ (item) => item[groupProperty] as string === groupName
+ );
+ allDescendants.concat(
+ collection.filter(item => item.parent == groupName)
+ );
return allDescendants;
}
- private allDescendantsAreTicked(collection, groupProperty, groupName) {
+ private allDescendantsAreTicked(collection: GroupByMultiselectOption[], groupProperty: string, groupName: string) {
const allDescendants = this.collectAllDescendants(collection, groupProperty, groupName);
const allAreTicked = allDescendants.every(d => d.ticked);
return allAreTicked;
}
- private allDescendantsAreDisabled(collection, groupProperty, groupName) {
+ private allDescendantsAreDisabled(collection: GroupByMultiselectOption[], groupProperty: string, groupName: string) {
const allDescendants = this.collectAllDescendants(collection, groupProperty, groupName);
const allAreDisabled = allDescendants.every(d => d.disabled);
return allAreDisabled;
}
- optionsGrouping(options, groupByProperty): any[] {
- const getAllUniqueGroupByPropertyValue = this.findUnique(options.map(item => item[groupByProperty]));
+ optionsGrouping(options: GroupByMultiselectOption[], groupByProperty: string): GroupByMultiselectOption[] {
+ const getAllUniqueGroupByPropertyValue = this.findUnique(
+ options.map((item) => item[groupByProperty] as string)
+ );
const result = getAllUniqueGroupByPropertyValue.map(group => {
const groupedValues = options.filter(o => o[groupByProperty] === group);
return {
name: group,
values: groupedValues,
ticked: groupedValues.every(o => o.ticked),
- disabled: groupedValues.every(o => o.disabled)
+ disabled: groupedValues.every(o => o.disabled),
+ isGroup: true,
};
});
- return result;
+ return result as GroupByMultiselectOption[];
}
- findUnique(expression) {
+ findUnique
(expression: T[]) {
return [...Array.from(new Set(expression))];
}
- virtualOptionsGroupingFlatten(options, groupByProperty): any[] {
- const allParentGroupedValues = this.findUnique(options.filter(o => !o.parent).map(item => item[groupByProperty]));
- const subGroupedValues = this.findUnique(
- options.filter(o => o.parent).map(({ name, parent }) => ({ name, parent }))
+ virtualOptionsGroupingFlatten(options: GroupByMultiselectOption[], groupByProperty: string): GroupByMultiselectOption[] {
+ const allParentGroupedValues = this.findUnique(
+ options.filter((o) => !(o.parent))
+ .map((item) => item[groupByProperty])
);
- let result = [];
+ const subGroupedValues = options.filter(o => o.parent)
+ .map((item) => ({
+ name: item.name,
+ parent: item.parent,
+ }));
+ let result: GroupByMultiselectOption[] = [];
allParentGroupedValues.forEach(group => {
result.push({
name: group,
@@ -101,9 +114,9 @@ export class NgxMultiselectService {
.filter(o => o[groupByProperty] === group && !o.parent)
.map(v => ({ ...v, depth: 1 }));
result = [...result].concat(groupedValues);
- const childGroupedValues = subGroupedValues.filter((s: any) => s.parent === group);
+ const childGroupedValues = subGroupedValues.filter((s) => s.parent! === group);
childGroupedValues.forEach(c => {
- result.push({ name: c, parent: group, isGroup: true });
+ result.push({ name: c.name, parent: group, isGroup: true });
const values = options.filter(o => o[groupByProperty] === c).map(v => ({ ...v, depth: 2 }));
result.concat(values);
});
@@ -111,22 +124,23 @@ export class NgxMultiselectService {
return result;
}
- mirrorObject(json) {
- const ret = {};
+ mirrorObject(json: Record) {
+ const ret: Record = {};
for (var key in json) {
- ret[json[key]] = key;
+ ret[json[key] as string] = key;
}
return ret;
}
- mapDatasourceToFields(collection: any[], propertyMap, groupedProperty?) {
+ mapDatasourceToFields(collection: MultiselectOption[], propertyMap: Record, groupedProperty?: string) {
let keys = Object.keys(propertyMap);
- return collection.map((item: any) => {
+ return collection.map((item) => {
let obj = groupedProperty ? { [groupedProperty]: item[groupedProperty] } : {};
- keys.reduce((a: any, b: string) => {
- obj[b] = item[propertyMap[b]];
+ keys.reduce((a, b: string) => {
+ a[b] = item[propertyMap[b] as string];
+ return a;
}, obj);
return obj;
- });
+ }) as MultiselectOption[];
}
}
diff --git a/projects/multiselect/src/public_api.ts b/projects/multiselect/src/public_api.ts
index 29043048..a06d5acc 100644
--- a/projects/multiselect/src/public_api.ts
+++ b/projects/multiselect/src/public_api.ts
@@ -10,3 +10,4 @@ export * from './lib/grouped-options/grouped-options.component';
export * from './lib/options/options.component';
export * from './lib/filter-options/filter-options.component';
export * from './lib/helper-elements/helper-elements.component';
+export * from './lib/models/multiselect-option.model';