ng-jvx-multiselect 1.1.28 → 1.1.29
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.
- package/README.md +48 -20
- package/esm2020/lib/directives/ng-jvx-disabled-option.directive.mjs +3 -3
- package/esm2020/lib/directives/ng-jvx-focus.directive.mjs +3 -3
- package/esm2020/lib/directives/ng-jvx-group-header.directive.mjs +3 -3
- package/esm2020/lib/directives/ng-jvx-options-template.directive.mjs +3 -3
- package/esm2020/lib/directives/ng-jvx-selection-template.directive.mjs +3 -3
- package/esm2020/lib/interfaces/ng-jvx-option-mapper.mjs +1 -1
- package/esm2020/lib/interfaces/ng-jvx-search-mapper.mjs +1 -1
- package/esm2020/lib/ng-jvx-multiselect.component.mjs +65 -29
- package/esm2020/lib/ng-jvx-multiselect.module.mjs +28 -24
- package/esm2020/lib/ng-jvx-multiselect.service.mjs +6 -4
- package/esm2020/lib/ng-jvx-option/ng-jvx-option.component.mjs +6 -6
- package/esm2020/lib/ng-jvx-panel/ng-jvx-panel.component.mjs +6 -6
- package/esm2020/lib/utils.mjs +4 -0
- package/esm2020/public-api.mjs +2 -1
- package/fesm2015/ng-jvx-multiselect.mjs +127 -82
- package/fesm2015/ng-jvx-multiselect.mjs.map +1 -1
- package/fesm2020/ng-jvx-multiselect.mjs +127 -82
- package/fesm2020/ng-jvx-multiselect.mjs.map +1 -1
- package/lib/directives/ng-jvx-disabled-option.directive.d.ts +1 -1
- package/lib/directives/ng-jvx-focus.directive.d.ts +1 -1
- package/lib/directives/ng-jvx-group-header.directive.d.ts +1 -1
- package/lib/directives/ng-jvx-options-template.directive.d.ts +1 -1
- package/lib/directives/ng-jvx-selection-template.directive.d.ts +1 -1
- package/lib/interfaces/ng-jvx-option-mapper.d.ts +6 -0
- package/lib/interfaces/ng-jvx-search-mapper.d.ts +1 -1
- package/lib/ng-jvx-multiselect.component.d.ts +12 -7
- package/lib/ng-jvx-multiselect.module.d.ts +3 -4
- package/lib/ng-jvx-option/ng-jvx-option.component.d.ts +1 -1
- package/lib/ng-jvx-panel/ng-jvx-panel.component.d.ts +1 -1
- package/lib/utils.d.ts +3 -0
- package/package.json +7 -7
- package/public-api.d.ts +1 -0
- package/src/lib/ng-jvx-multiselect.component.scss +23 -2
- package/lib/directives/ng-jvx-disabled-option.directive.d.ts.map +0 -1
- package/lib/directives/ng-jvx-focus.directive.d.ts.map +0 -1
- package/lib/directives/ng-jvx-group-header.directive.d.ts.map +0 -1
- package/lib/directives/ng-jvx-options-template.directive.d.ts.map +0 -1
- package/lib/directives/ng-jvx-selection-template.directive.d.ts.map +0 -1
- package/lib/interfaces/ng-jvx-group-mapper.d.ts.map +0 -1
- package/lib/interfaces/ng-jvx-option-mapper.d.ts.map +0 -1
- package/lib/interfaces/ng-jvx-search-mapper.d.ts.map +0 -1
- package/lib/ng-jvx-multiselect.component.d.ts.map +0 -1
- package/lib/ng-jvx-multiselect.module.d.ts.map +0 -1
- package/lib/ng-jvx-multiselect.service.d.ts.map +0 -1
- package/lib/ng-jvx-option/ng-jvx-option.component.d.ts.map +0 -1
- package/lib/ng-jvx-panel/ng-jvx-panel.component.d.ts.map +0 -1
- package/ng-jvx-multiselect.d.ts.map +0 -1
- package/public-api.d.ts.map +0 -1
- /package/{ng-jvx-multiselect.d.ts → index.d.ts} +0 -0
package/README.md
CHANGED
|
@@ -90,26 +90,28 @@ In <b>example.component.ts</b>
|
|
|
90
90
|
|
|
91
91
|
### Inputs
|
|
92
92
|
|
|
93
|
-
| Name | Type | Default | Description
|
|
94
|
-
|
|
95
|
-
| `clearable` | `Boolean` | `false` | True to enable the empty selection.
|
|
96
|
-
| `
|
|
97
|
-
| `
|
|
98
|
-
| `
|
|
99
|
-
| `
|
|
100
|
-
| `
|
|
101
|
-
| `
|
|
102
|
-
| `
|
|
103
|
-
| `
|
|
104
|
-
| `
|
|
105
|
-
| `
|
|
106
|
-
| `
|
|
107
|
-
| `
|
|
108
|
-
| `
|
|
109
|
-
| `
|
|
110
|
-
| `
|
|
111
|
-
| `
|
|
112
|
-
| `
|
|
93
|
+
| Name | Type | Default | Description |
|
|
94
|
+
|------------------|----------------------------------------------------------|------------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
|
|
95
|
+
| `clearable` | `Boolean` | `false` | True to enable the empty selection. |
|
|
96
|
+
| `closeButton` | `Boolean` | `false` | True to show the button that closes the menu. |
|
|
97
|
+
| `disabled` | `Boolean` | `false` | True to disable the select. |
|
|
98
|
+
| `itemText` | `String` | `'text'` | The name of the property of the option object that will be displayed as description of the options. |
|
|
99
|
+
| `itemValue` | `String` | `'value'` | The name of the property of the option object that will be treated as value of the options. |
|
|
100
|
+
| `multi` | `Boolean` | `false` | True if it's a multiselect. |
|
|
101
|
+
| `options` | `Array` | `[]` | Array of option objects. |
|
|
102
|
+
| `requestHeaders` | `Object` | `{...}` | The headers of the HTTP request. |
|
|
103
|
+
| `requestType` | <code>'GET'|'POST'</code> | `'GET'` | The type of the HTTP request. |
|
|
104
|
+
| `searchInput` | `Boolean` | `false` | True to enable the search input for the options list. |
|
|
105
|
+
| `searchMode` | <code>'client'|'server'</code> | `server` | `'client'` if the search is only client side, `'server'` if it's server side. |
|
|
106
|
+
| `searchLabel` | `String` | `'search'` | The label of the search input. |
|
|
107
|
+
| `searchProp` | `String` | `'search'` | The name of the search property of the HTTP request. |
|
|
108
|
+
| `listProp` | `String` | `''` | Name of the property in response.data where the list is stored. |
|
|
109
|
+
| `url` | `String` | `''` | The url to get the options. |
|
|
110
|
+
| `value` | `Array` | `[]` | The current value of the selection. |
|
|
111
|
+
| `mapper` | `NgJvxOptionMapper` | `*` | The object that will map the response of the async call. |
|
|
112
|
+
| `searchMapper` | `NgJvxSearchMapper` | `*` | The object that will map the client search result. |
|
|
113
|
+
| `pageSize` | `number` | `15` | The size of a page for pagination purposes. |
|
|
114
|
+
| `groupBy` | <code>NgJvxGroupMapper<any>|string|null</code> | `null` | If it's a `string` it defines the the property of each option by which group them in the list. If it's a `NgJvxGroupMapper` it offers a method that groups the options (useful for nested properties). |
|
|
113
115
|
|
|
114
116
|
### Methods
|
|
115
117
|
|
|
@@ -197,6 +199,32 @@ it is possible to write a mapper like this:
|
|
|
197
199
|
}
|
|
198
200
|
}
|
|
199
201
|
```
|
|
202
|
+
|
|
203
|
+
The `multiMapper` property works like the `mapper` property, it implements the interface `NgJvxOptionsMapper<T>`.
|
|
204
|
+
It will expose a method `mapOptions` which accepts all the options to be mapped in the form of an Object and returns an Observable of type `T[]`.
|
|
205
|
+
For example if the request returns an array of objects like this:
|
|
206
|
+
|
|
207
|
+
```javascript
|
|
208
|
+
{
|
|
209
|
+
id: number;
|
|
210
|
+
description: string;
|
|
211
|
+
}
|
|
212
|
+
```
|
|
213
|
+
|
|
214
|
+
it is possible to write a mapper like this:
|
|
215
|
+
|
|
216
|
+
```javascript
|
|
217
|
+
const mapper: NgJvxOptionMultiMapper<{value: number, text: string}> = {
|
|
218
|
+
mapOption(source: {
|
|
219
|
+
id: number,
|
|
220
|
+
description: string
|
|
221
|
+
}[]): Observable<any> {
|
|
222
|
+
return of(source.map(s=>{value: s.id, text: s.description}));
|
|
223
|
+
}
|
|
224
|
+
}
|
|
225
|
+
```
|
|
226
|
+
|
|
227
|
+
It's useful if the user wants to add any custom option to a server call
|
|
200
228
|
#### Search
|
|
201
229
|
|
|
202
230
|
If the property `searchInput` is `true`, the user will be able to search a value amongst the options.
|
|
@@ -35,9 +35,9 @@ export class NgJvxDisabledOptionDirective {
|
|
|
35
35
|
this.unsubs.complete();
|
|
36
36
|
}
|
|
37
37
|
}
|
|
38
|
-
NgJvxDisabledOptionDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
39
|
-
NgJvxDisabledOptionDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "
|
|
40
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
38
|
+
NgJvxDisabledOptionDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: NgJvxDisabledOptionDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
|
|
39
|
+
NgJvxDisabledOptionDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.0.2", type: NgJvxDisabledOptionDirective, selector: "[ngJvxDisabledOption]", inputs: { ngJvxDisabledOption: "ngJvxDisabledOption" }, ngImport: i0 });
|
|
40
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: NgJvxDisabledOptionDirective, decorators: [{
|
|
41
41
|
type: Directive,
|
|
42
42
|
args: [{
|
|
43
43
|
// tslint:disable-next-line:directive-selector
|
|
@@ -15,9 +15,9 @@ export class NgJvxFocusDirective {
|
|
|
15
15
|
}
|
|
16
16
|
}
|
|
17
17
|
}
|
|
18
|
-
NgJvxFocusDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
19
|
-
NgJvxFocusDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "
|
|
20
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
18
|
+
NgJvxFocusDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: NgJvxFocusDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
|
|
19
|
+
NgJvxFocusDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.0.2", type: NgJvxFocusDirective, selector: "[ngJvxFocus]", inputs: { ngJvxFocus: "ngJvxFocus" }, usesOnChanges: true, ngImport: i0 });
|
|
20
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: NgJvxFocusDirective, decorators: [{
|
|
21
21
|
type: Directive,
|
|
22
22
|
args: [{
|
|
23
23
|
// tslint:disable-next-line:directive-selector
|
|
@@ -11,9 +11,9 @@ export class NgJvxGroupHeaderDirective {
|
|
|
11
11
|
}
|
|
12
12
|
}
|
|
13
13
|
}
|
|
14
|
-
NgJvxGroupHeaderDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
15
|
-
NgJvxGroupHeaderDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "
|
|
16
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
14
|
+
NgJvxGroupHeaderDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: NgJvxGroupHeaderDirective, deps: [{ token: i0.TemplateRef }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
|
|
15
|
+
NgJvxGroupHeaderDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.0.2", type: NgJvxGroupHeaderDirective, selector: "[ngJvxGroupHeader]", inputs: { ngJvxGroupHeaderOf: "ngJvxGroupHeaderOf" }, ngImport: i0 });
|
|
16
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: NgJvxGroupHeaderDirective, decorators: [{
|
|
17
17
|
type: Directive,
|
|
18
18
|
args: [{
|
|
19
19
|
// tslint:disable-next-line:directive-selector
|
|
@@ -12,9 +12,9 @@ export class NgJvxOptionsTemplateDirective {
|
|
|
12
12
|
}
|
|
13
13
|
}
|
|
14
14
|
}
|
|
15
|
-
NgJvxOptionsTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
16
|
-
NgJvxOptionsTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "
|
|
17
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
15
|
+
NgJvxOptionsTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: NgJvxOptionsTemplateDirective, deps: [{ token: i0.ElementRef }, { token: i0.TemplateRef }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
|
|
16
|
+
NgJvxOptionsTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.0.2", type: NgJvxOptionsTemplateDirective, selector: "[ngJvxOptionsTemplate]", inputs: { ngJvxOptionsTemplateOf: "ngJvxOptionsTemplateOf" }, ngImport: i0 });
|
|
17
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: NgJvxOptionsTemplateDirective, decorators: [{
|
|
18
18
|
type: Directive,
|
|
19
19
|
args: [{
|
|
20
20
|
// tslint:disable-next-line:directive-selector
|
|
@@ -11,9 +11,9 @@ export class NgJvxSelectionTemplateDirective {
|
|
|
11
11
|
}
|
|
12
12
|
}
|
|
13
13
|
}
|
|
14
|
-
NgJvxSelectionTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
15
|
-
NgJvxSelectionTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "
|
|
16
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
14
|
+
NgJvxSelectionTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: NgJvxSelectionTemplateDirective, deps: [{ token: i0.TemplateRef }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
|
|
15
|
+
NgJvxSelectionTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.0.2", type: NgJvxSelectionTemplateDirective, selector: "[ngJvxSelectionTemplate]", inputs: { ngJvxSelectionTemplateOf: "ngJvxSelectionTemplateOf" }, ngImport: i0 });
|
|
16
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: NgJvxSelectionTemplateDirective, decorators: [{
|
|
17
17
|
type: Directive,
|
|
18
18
|
args: [{
|
|
19
19
|
// tslint:disable-next-line:directive-selector
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
export {};
|
|
2
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
2
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibmctanZ4LW9wdGlvbi1tYXBwZXIuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9uZy1qdngtbXVsdGlzZWxlY3Qvc3JjL2xpYi9pbnRlcmZhY2VzL25nLWp2eC1vcHRpb24tbWFwcGVyLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiIiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge09ic2VydmFibGUsIFN1YmplY3R9IGZyb20gJ3J4anMnO1xyXG5cclxuLyoqXHJcbiAqIE1hcHMgdGhlIG9wdGlvbiByZXR1cm5lZCBieSB0aGUgYXN5bmMgY2FsbCBpbiBhbiBvYmplY3Qgb2YgdHlwZSBULiBXaGVuIG9iamVjdCBpcyBtYXBwZWQgdGhlIHJlc3VsdGluZyBvYmplY3QgaXMgcmV0dXJuZWQgaW4gYW4gb2JzZXJ2YWJsZVxyXG4gKi9cclxuZXhwb3J0IGludGVyZmFjZSBOZ0p2eE9wdGlvbk1hcHBlcjxUPiB7XHJcbiAgbWFwT3B0aW9uKHNvdXJjZTogYW55KTogT2JzZXJ2YWJsZTxUPjtcclxufVxyXG5cclxuLyoqXHJcbiAqIE1hcHMgdGhlIG9wdGlvbnMgcmV0dXJuZWQgYnkgdGhlIGFzeW5jIGNhbGwgaW4gYW4gb2JqZWN0IG9mIHR5cGUgVC4gV2hlbiBvYmplY3QgaXMgbWFwcGVkIHRoZSByZXN1bHRpbmcgb2JqZWN0IGlzIHJldHVybmVkIGluIGFuIG9ic2VydmFibGVcclxuICovXHJcbmV4cG9ydCBpbnRlcmZhY2UgTmdKdnhNdWx0aU9wdGlvbk1hcHBlcjxUPiB7XHJcbiAgbWFwT3B0aW9ucyhzb3VyY2U6IGFueSk6IE9ic2VydmFibGU8VFtdPjtcclxufVxyXG4iXX0=
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
export {};
|
|
2
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
2
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibmctanZ4LXNlYXJjaC1tYXBwZXIuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9uZy1qdngtbXVsdGlzZWxlY3Qvc3JjL2xpYi9pbnRlcmZhY2VzL25nLWp2eC1zZWFyY2gtbWFwcGVyLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiIiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge09ic2VydmFibGUsIFN1YmplY3R9IGZyb20gJ3J4anMnO1xyXG5cclxuLyoqXHJcbiAqIE1hcHMgdGhlIG9wdGlvbiByZXR1cm5lZCBieSB0aGUgYXN5bmMgY2FsbCBpbiBhbiBvYmplY3Qgb2YgdHlwZSBULiBXaGVuIG9iamVjdCBpcyBtYXBwZWQgdGhlIHJlc3VsdGluZyBvYmplY3QgaXMgcmV0dXJuZWQgaW4gYW4gb2JzZXJ2YWJsZVxyXG4gKi9cclxuZXhwb3J0IGludGVyZmFjZSBOZ0p2eFNlYXJjaE1hcHBlcjxUPiB7XHJcbiAgbWFwU2VhcmNoKHNvdXJjZTogYW55LCBvcHRpb25zOiBUW10pOiBPYnNlcnZhYmxlPFRbXT47XHJcbn1cclxuIl19
|