@klippa/ngx-enhancy-forms 7.1.0 → 7.1.3
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/bundles/klippa-ngx-enhancy-forms.umd.js +16 -5
- package/bundles/klippa-ngx-enhancy-forms.umd.js.map +1 -1
- package/bundles/klippa-ngx-enhancy-forms.umd.min.js +2 -2
- package/bundles/klippa-ngx-enhancy-forms.umd.min.js.map +1 -1
- package/esm2015/lib/elements/select/select.component.js +19 -8
- package/fesm2015/klippa-ngx-enhancy-forms.js +16 -5
- package/fesm2015/klippa-ngx-enhancy-forms.js.map +1 -1
- package/klippa-ngx-enhancy-forms.metadata.json +1 -1
- package/lib/elements/select/select.component.d.ts +5 -2
- package/package.json +1 -1
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
import { Component, EventEmitter, Host, Inject, InjectionToken, Input, Optional, Output } from '@angular/core';
|
|
1
|
+
import { Component, EventEmitter, Host, Inject, InjectionToken, Input, Optional, Output, ViewChild } from '@angular/core';
|
|
2
2
|
import { ControlContainer, NG_VALUE_ACCESSOR } from '@angular/forms';
|
|
3
3
|
import { ValueAccessorBase } from '../value-accessor-base/value-accessor-base.component';
|
|
4
4
|
import { FormElementComponent } from '../../form/form-element/form-element.component';
|
|
5
|
-
import { stringIsSetAndFilled } from '../../util/values';
|
|
5
|
+
import { isValueSet, stringIsSetAndFilled } from '../../util/values';
|
|
6
6
|
export const SELECT_TRANSLATIONS = new InjectionToken('klp.form.select.translations');
|
|
7
7
|
export class SelectComponent extends ValueAccessorBase {
|
|
8
8
|
constructor(parent, controlContainer, translations) {
|
|
@@ -15,7 +15,12 @@ export class SelectComponent extends ValueAccessorBase {
|
|
|
15
15
|
this.clearable = true;
|
|
16
16
|
this.onSearch = new EventEmitter();
|
|
17
17
|
this.onEndReached = new EventEmitter();
|
|
18
|
-
this.lastItemIndexReached =
|
|
18
|
+
this.lastItemIndexReached = -1;
|
|
19
|
+
}
|
|
20
|
+
ngOnChanges(changes) {
|
|
21
|
+
if (isValueSet(changes.options)) {
|
|
22
|
+
this.lastItemIndexReached = -1;
|
|
23
|
+
}
|
|
19
24
|
}
|
|
20
25
|
getDefaultTranslation(key) {
|
|
21
26
|
switch (key) {
|
|
@@ -33,16 +38,21 @@ export class SelectComponent extends ValueAccessorBase {
|
|
|
33
38
|
return (_c = (_b = (_a = this.translations) === null || _a === void 0 ? void 0 : _a[key]) === null || _b === void 0 ? void 0 : _b.call(_a, params)) !== null && _c !== void 0 ? _c : this.getDefaultTranslation(key)(params);
|
|
34
39
|
}
|
|
35
40
|
onScroll(lastItemIndex) {
|
|
36
|
-
|
|
41
|
+
var _a, _b, _c, _d;
|
|
42
|
+
const visibleItems = (_d = (_c = (_b = (_a = this.ngSelect) === null || _a === void 0 ? void 0 : _a.itemsList) === null || _b === void 0 ? void 0 : _b.filteredItems) === null || _c === void 0 ? void 0 : _c.length) !== null && _d !== void 0 ? _d : 0;
|
|
43
|
+
if (this.lastItemIndexReached < lastItemIndex && lastItemIndex === visibleItems) {
|
|
37
44
|
this.onEndReached.emit();
|
|
38
45
|
}
|
|
39
|
-
this.lastItemIndexReached = lastItemIndex;
|
|
46
|
+
this.lastItemIndexReached = Math.max(lastItemIndex, this.lastItemIndexReached);
|
|
47
|
+
}
|
|
48
|
+
searchQueryChanged(searchQuery) {
|
|
49
|
+
this.onSearch.emit(searchQuery);
|
|
40
50
|
}
|
|
41
51
|
}
|
|
42
52
|
SelectComponent.decorators = [
|
|
43
53
|
{ type: Component, args: [{
|
|
44
54
|
selector: 'klp-form-select',
|
|
45
|
-
template: "<ng-select\n\t[placeholder]=\"getTranslation('placeholder')\"\n\tbindLabel=\"name\"\n\tbindValue=\"id\"\n\t[items]=\"options\"\n\t[clearable]=\"clearable\"\n\t[(ngModel)]=\"innerValue\"\n\t[ngClass]=\"{showErrors: isInErrorState()}\"\n\t(change)=\"setInnerValueAndNotify(innerValue)\"\n\t[multiple]=\"multiple\"\n\t[disabled]=\"disabled\"\n\t(blur)=\"touch()\"\n\t(search)=\"
|
|
55
|
+
template: "<ng-select\n\t#ngSelect\n\t[placeholder]=\"getTranslation('placeholder')\"\n\tbindLabel=\"name\"\n\tbindValue=\"id\"\n\t[items]=\"options\"\n\t[clearable]=\"clearable\"\n\t[(ngModel)]=\"innerValue\"\n\t[ngClass]=\"{showErrors: isInErrorState()}\"\n\t(change)=\"setInnerValueAndNotify(innerValue)\"\n\t[multiple]=\"multiple\"\n\t[disabled]=\"disabled\"\n\t(blur)=\"touch()\"\n\t(search)=\"searchQueryChanged($event.term)\"\n\t[dropdownPosition]=\"dropdownPosition\"\n\t[searchFn]=\"customSearchFn\"\n\t[selectOnTab]=\"true\"\n\t[virtualScroll]=\"true\"\n\t(scroll)=\"onScroll($event.end)\"\n>\n\t<ng-template let-item=\"item\" ng-option-tmp>\n\t\t{{ item.name }}\n\t\t<div *ngIf=\"item.description\" class=\"dropdown-item-description\">\n\t\t\t{{ item.description }}\n\t\t</div>\n\t</ng-template>\n\t<ng-container *ngIf=\"multiple && multipleDisplayedAsAmount && innerValue?.length > 1\">\n\t\t<ng-template ng-multi-label-tmp>\n\t\t\t<div class=\"ng-value\">\n\t\t\t\t<span class=\"ng-value-label\">{{getTranslation('amountSelected', innerValue?.length)}}</span>\n\t\t\t</div>\n\t\t</ng-template>\n\t</ng-container>\n\t<ng-template ng-footer-tmp *ngIf=\"footerElement\">\n\t\t<ng-container [ngTemplateOutlet]=\"footerElement\"></ng-container>\n\t</ng-template>\n</ng-select>\n",
|
|
46
56
|
providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: SelectComponent, multi: true }],
|
|
47
57
|
styles: [":host{display:block}ng-select.showErrors::ng-deep .ng-select-container{border-color:#ff8000}:host ::ng-deep ng-select.ng-select .ng-select-container{color:#888da8}:host ::ng-deep .ng-select.ng-select-opened>.ng-select-container{background:#fff;border-color:#3ed778}:host ::ng-deep .ng-select.ng-select-opened>.ng-select-container:hover{box-shadow:none}:host ::ng-deep .ng-select.ng-select-opened>.ng-select-container .ng-arrow{border-color:transparent transparent #999;border-width:0 5px 5px;top:-2px}:host ::ng-deep .ng-select.ng-select-opened>.ng-select-container .ng-arrow:hover{border-color:transparent transparent #666}:host ::ng-deep .ng-select.ng-select-opened.ng-select-bottom>.ng-select-container{border-bottom-left-radius:0;border-bottom-right-radius:0}:host ::ng-deep .ng-select.ng-select-opened.ng-select-top>.ng-select-container{border-top-left-radius:0;border-top-right-radius:0}:host ::ng-deep .ng-select.ng-select-disabled>.ng-select-container{background-color:#f9f9f9}:host ::ng-deep .ng-select .ng-has-value .ng-placeholder{display:none}:host ::ng-deep .ng-select .ng-select-container{align-items:center;background-clip:padding-box;background-color:#fff;border:1px solid #e6ecf5;border-radius:4px;border-radius:2px;box-shadow:none;box-sizing:border-box;color:#888da8;display:flex;flex-direction:row;font-size:1rem;font-size:14px;line-height:1.5;margin:0;min-height:42px;outline:none;overflow:visible;padding:.375rem .75rem;transition-delay:0s;transition-duration:.2s;transition-property:all;transition-timing-function:ease-in;width:100%}:host ::ng-deep .ng-select .ng-select-container:hover{box-shadow:0 1px 0 rgba(0,0,0,.06)}:host ::ng-deep .ng-select .ng-select-container .ng-value-container{align-items:center;overflow:hidden;padding-left:10px}:host ::ng-deep .ng-select .ng-select-container .ng-value-container .ng-placeholder{color:#aaa}:host ::ng-deep .ng-select.ng-select-single .ng-select-container{height:42px}:host ::ng-deep .ng-select.ng-select-single .ng-select-container .ng-value-container .ng-input{left:0;padding-left:10px;padding-right:50px;top:5px}:host ::ng-deep .ng-select.ng-select-multiple.ng-select-disabled>.ng-select-container .ng-value-container .ng-value{background-color:#f9f9f9;border:1px solid #e3e3e3}:host ::ng-deep .ng-select.ng-select-multiple.ng-select-disabled>.ng-select-container .ng-value-container .ng-value .ng-value-label{padding:0 5px}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value{background-color:#e7faee;border:1px solid #93e8b3;border-radius:2px;display:flex;font-size:.9em;margin-bottom:3px;margin-right:5px;margin-top:3px;overflow:hidden}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value.ng-value-disabled{background-color:#f9f9f9;border:1px solid #e3e3e3}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value.ng-value-disabled .ng-value-label{padding-left:5px}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-label{display:inline-block;overflow:hidden;padding:0 5px;text-overflow:ellipsis}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon{display:inline-block;padding:0 5px}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon:hover{background-color:#93e8b3}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon.left{border-right:1px solid #93e8b3}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon.right{border-left:1px solid #c2e0ff}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-input{padding-bottom:3px;padding-left:3px}:host ::ng-deep ng-select.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-placeholder{padding-bottom:3px;padding-left:3px;position:static;top:5px}:host ::ng-deep .ng-select .ng-clear-wrapper{color:#999}:host ::ng-deep .ng-select .ng-clear-wrapper .ng-clear:hover{color:#dc3545}:host ::ng-deep .ng-select .ng-spinner-zone{padding-right:5px;padding-top:5px}:host ::ng-deep .ng-select .ng-arrow-wrapper{padding-right:5px;width:25px}:host ::ng-deep .ng-select .ng-arrow-wrapper:hover .ng-arrow{border-top-color:#666}:host ::ng-deep .ng-select .ng-arrow-wrapper .ng-arrow{border-color:#999 transparent transparent;border-style:solid;border-width:5px 5px 2.5px}:host ::ng-deep .ng-dropdown-panel{background-color:#fff;border:1px solid #3ed778;box-shadow:0 1px 0 rgba(0,0,0,.06)}:host ::ng-deep .ng-dropdown-panel.ng-select-bottom{border-bottom-left-radius:4px;border-bottom-right-radius:4px;border-top-color:#e6e6e6;margin-top:-1px;top:100%}:host ::ng-deep .ng-dropdown-panel.ng-select-bottom .ng-dropdown-panel-items .ng-option:last-child{border-bottom-left-radius:4px;border-bottom-right-radius:4px}:host ::ng-deep .ng-dropdown-panel.ng-select-top{border-bottom-color:#e6e6e6;border-top-left-radius:4px;border-top-right-radius:4px;bottom:100%;margin-bottom:-1px}:host ::ng-deep .ng-dropdown-panel.ng-select-top .ng-dropdown-panel-items .ng-option:first-child{border-top-left-radius:4px;border-top-right-radius:4px}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-header{border-bottom:1px solid #ccc;padding:5px 7px}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-footer{border-top:1px solid #ccc;padding:5px 7px}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items{margin-bottom:1px}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup{-moz-user-select:none;-ms-user-select:none;-webkit-user-select:none;color:rgba(0,0,0,.54);cursor:default;cursor:pointer;font-weight:500;padding:8px 10px;user-select:none}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup.ng-option-disabled{cursor:default}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup.ng-option-marked{background-color:#ebf5ff}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup.ng-option-selected{background-color:#f5faff;font-weight:600}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option{background-color:#fff;color:rgba(0,0,0,.87);padding:8px 10px}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected{background-color:#e7faee;color:#333}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected .ng-option-label{font-weight:600}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-marked{background-color:#e7faee;color:#333}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-disabled{color:#ccc}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-child{padding-left:22px}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option .ng-tag-label{font-size:80%;font-weight:400;padding-right:5px}:host ::ng-deep ng-select.ng-select .ng-select-container .ng-value-container{padding-left:0}:host ::ng-deep ng-select.ng-select.ng-select-single .ng-select-container .ng-value-container .ng-input{color:#888da8;top:9px}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option,:host ::ng-deep .ng-select .ng-select-container .ng-value-container .ng-input>input{color:#888da8}:host ::ng-deep .ng-select.ng-select-auto-grow{max-width:inherit}:host ::ng-deep .ng-select.ng-select-auto-grow .ng-dropdown-panel{width:auto}"]
|
|
48
58
|
},] }
|
|
@@ -62,6 +72,7 @@ SelectComponent.propDecorators = {
|
|
|
62
72
|
customSearchFn: [{ type: Input }],
|
|
63
73
|
footerElement: [{ type: Input }],
|
|
64
74
|
onSearch: [{ type: Output }],
|
|
65
|
-
onEndReached: [{ type: Output }]
|
|
75
|
+
onEndReached: [{ type: Output }],
|
|
76
|
+
ngSelect: [{ type: ViewChild, args: ['ngSelect',] }]
|
|
66
77
|
};
|
|
67
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
78
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2VsZWN0LmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIvaG9tZS9ydW5uZXIvd29yay9uZ3gtZW5oYW5jeS1mb3Jtcy9uZ3gtZW5oYW5jeS1mb3Jtcy9wcm9qZWN0cy9rbGlwcGEvbmd4LWVuaGFuY3ktZm9ybXMvc3JjLyIsInNvdXJjZXMiOlsibGliL2VsZW1lbnRzL3NlbGVjdC9zZWxlY3QuY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFDTixTQUFTLEVBQ1QsWUFBWSxFQUNaLElBQUksRUFDSixNQUFNLEVBQ04sY0FBYyxFQUNkLEtBQUssRUFFTCxRQUFRLEVBQ1IsTUFBTSxFQUVPLFNBQVMsRUFDdEIsTUFBTSxlQUFlLENBQUM7QUFDdkIsT0FBTyxFQUFDLGdCQUFnQixFQUFFLGlCQUFpQixFQUFDLE1BQU0sZ0JBQWdCLENBQUM7QUFDbkUsT0FBTyxFQUFDLGlCQUFpQixFQUFDLE1BQU0sc0RBQXNELENBQUM7QUFDdkYsT0FBTyxFQUFDLG9CQUFvQixFQUFDLE1BQU0sZ0RBQWdELENBQUM7QUFDcEYsT0FBTyxFQUFDLFVBQVUsRUFBRSxvQkFBb0IsRUFBQyxNQUFNLG1CQUFtQixDQUFDO0FBV25FLE1BQU0sQ0FBQyxNQUFNLG1CQUFtQixHQUFHLElBQUksY0FBYyxDQUFNLDhCQUE4QixDQUFDLENBQUM7QUFRM0YsTUFBTSxPQUFPLGVBQWdCLFNBQVEsaUJBQW9DO0lBZXhFLFlBQytCLE1BQTRCLEVBQzVCLGdCQUFrQyxFQUNmLFlBQWlCO1FBRWxFLEtBQUssQ0FBQyxNQUFNLEVBQUUsZ0JBQWdCLENBQUMsQ0FBQztRQUpGLFdBQU0sR0FBTixNQUFNLENBQXNCO1FBQzVCLHFCQUFnQixHQUFoQixnQkFBZ0IsQ0FBa0I7UUFDZixpQkFBWSxHQUFaLFlBQVksQ0FBSztRQWYxRCxhQUFRLEdBQUcsS0FBSyxDQUFDO1FBQ2pCLDhCQUF5QixHQUFHLEtBQUssQ0FBQztRQUNsQyxjQUFTLEdBQUcsSUFBSSxDQUFDO1FBSVQsYUFBUSxHQUFHLElBQUksWUFBWSxFQUFVLENBQUM7UUFDdEMsaUJBQVksR0FBRyxJQUFJLFlBQVksRUFBUSxDQUFDO1FBR2pELHlCQUFvQixHQUFHLENBQUMsQ0FBQyxDQUFDO0lBUWxDLENBQUM7SUFHRCxXQUFXLENBQUMsT0FBc0I7UUFDakMsSUFBSSxVQUFVLENBQUMsT0FBTyxDQUFDLE9BQU8sQ0FBQyxFQUFFO1lBQ2hDLElBQUksQ0FBQyxvQkFBb0IsR0FBRyxDQUFDLENBQUMsQ0FBQztTQUMvQjtJQUNGLENBQUM7SUFFRCxxQkFBcUIsQ0FBQyxHQUFXO1FBQ2hDLFFBQVEsR0FBRyxFQUFFO1lBQ1osS0FBSyxhQUFhO2dCQUNqQixPQUFPLEdBQUcsRUFBRSxDQUFDLGdCQUFnQixDQUFDO1lBQy9CLEtBQUssZ0JBQWdCO2dCQUNwQixPQUFPLENBQUMsTUFBTSxFQUFFLEVBQUUsQ0FBQyxHQUFHLE1BQU0sV0FBVyxDQUFDO1NBQ3pDO0lBQ0YsQ0FBQztJQUVELGNBQWMsQ0FBQyxHQUFXLEVBQUUsU0FBYyxJQUFJOztRQUM3QyxJQUFJLEdBQUcsS0FBSyxhQUFhLElBQUksb0JBQW9CLENBQUMsSUFBSSxDQUFDLFdBQVcsQ0FBQyxFQUFFO1lBQ3BFLE9BQU8sSUFBSSxDQUFDLFdBQVcsQ0FBQztTQUN4QjtRQUNELHlCQUFPLElBQUksQ0FBQyxZQUFZLDBDQUFHLEdBQUcsb0RBQUksTUFBTSxvQ0FBSyxJQUFJLENBQUMscUJBQXFCLENBQUMsR0FBRyxDQUFDLENBQUMsTUFBTSxDQUFDLENBQUM7SUFDdEYsQ0FBQztJQUVELFFBQVEsQ0FBQyxhQUFxQjs7UUFDN0IsTUFBTSxZQUFZLDJCQUFHLElBQUksQ0FBQyxRQUFRLDBDQUFFLFNBQVMsMENBQUUsYUFBYSwwQ0FBRSxNQUFNLG1DQUFJLENBQUMsQ0FBQztRQUMxRSxJQUFJLElBQUksQ0FBQyxvQkFBb0IsR0FBRyxhQUFhLElBQUksYUFBYSxLQUFLLFlBQVksRUFBRTtZQUNoRixJQUFJLENBQUMsWUFBWSxDQUFDLElBQUksRUFBRSxDQUFDO1NBQ3pCO1FBQ0QsSUFBSSxDQUFDLG9CQUFvQixHQUFHLElBQUksQ0FBQyxHQUFHLENBQUMsYUFBYSxFQUFFLElBQUksQ0FBQyxvQkFBb0IsQ0FBQyxDQUFDO0lBQ2hGLENBQUM7SUFFRCxrQkFBa0IsQ0FBQyxXQUFtQjtRQUNyQyxJQUFJLENBQUMsUUFBUSxDQUFDLElBQUksQ0FBQyxXQUFXLENBQUMsQ0FBQztJQUNqQyxDQUFDOzs7WUE5REQsU0FBUyxTQUFDO2dCQUNWLFFBQVEsRUFBRSxpQkFBaUI7Z0JBQzNCLHV3Q0FBc0M7Z0JBRXRDLFNBQVMsRUFBRSxDQUFDLEVBQUMsT0FBTyxFQUFFLGlCQUFpQixFQUFFLFdBQVcsRUFBRSxlQUFlLEVBQUUsS0FBSyxFQUFFLElBQUksRUFBQyxDQUFDOzthQUNwRjs7O1lBbkJPLG9CQUFvQix1QkFvQ3pCLFFBQVEsWUFBSSxJQUFJO1lBdENYLGdCQUFnQix1QkF1Q3JCLFFBQVEsWUFBSSxJQUFJOzRDQUNoQixNQUFNLFNBQUMsbUJBQW1CLGNBQUcsUUFBUTs7OzBCQWpCdEMsS0FBSztzQkFDTCxLQUFLO3VCQUNMLEtBQUs7d0NBQ0wsS0FBSzt3QkFDTCxLQUFLOytCQUNMLEtBQUs7NkJBQ0wsS0FBSzs0QkFDTCxLQUFLO3VCQUNMLE1BQU07MkJBQ04sTUFBTTt1QkFDTixTQUFTLFNBQUMsVUFBVSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7XG5cdENvbXBvbmVudCxcblx0RXZlbnRFbWl0dGVyLFxuXHRIb3N0LFxuXHRJbmplY3QsXG5cdEluamVjdGlvblRva2VuLFxuXHRJbnB1dCxcblx0T25DaGFuZ2VzLFxuXHRPcHRpb25hbCxcblx0T3V0cHV0LFxuXHRTaW1wbGVDaGFuZ2VzLFxuXHRUZW1wbGF0ZVJlZiwgVmlld0NoaWxkXG59IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHtDb250cm9sQ29udGFpbmVyLCBOR19WQUxVRV9BQ0NFU1NPUn0gZnJvbSAnQGFuZ3VsYXIvZm9ybXMnO1xuaW1wb3J0IHtWYWx1ZUFjY2Vzc29yQmFzZX0gZnJvbSAnLi4vdmFsdWUtYWNjZXNzb3ItYmFzZS92YWx1ZS1hY2Nlc3Nvci1iYXNlLmNvbXBvbmVudCc7XG5pbXBvcnQge0Zvcm1FbGVtZW50Q29tcG9uZW50fSBmcm9tICcuLi8uLi9mb3JtL2Zvcm0tZWxlbWVudC9mb3JtLWVsZW1lbnQuY29tcG9uZW50JztcbmltcG9ydCB7aXNWYWx1ZVNldCwgc3RyaW5nSXNTZXRBbmRGaWxsZWR9IGZyb20gJy4uLy4uL3V0aWwvdmFsdWVzJztcblxuZXhwb3J0IHR5cGUgQXBwU2VsZWN0T3B0aW9ucyA9IEFycmF5PEFwcFNlbGVjdE9wdGlvbj47XG5leHBvcnQgdHlwZSBBcHBTZWxlY3RPcHRpb24gPSB7XG5cdGlkOiBhbnk7XG5cdG5hbWU6IHN0cmluZztcblx0ZGVzY3JpcHRpb24/OiBzdHJpbmc7XG5cdGFjdGl2ZT86IGJvb2xlYW47XG5cdGRpc2FibGVkPzogYm9vbGVhbjtcbn07XG5cbmV4cG9ydCBjb25zdCBTRUxFQ1RfVFJBTlNMQVRJT05TID0gbmV3IEluamVjdGlvblRva2VuPGFueT4oJ2tscC5mb3JtLnNlbGVjdC50cmFuc2xhdGlvbnMnKTtcblxuQENvbXBvbmVudCh7XG5cdHNlbGVjdG9yOiAna2xwLWZvcm0tc2VsZWN0Jyxcblx0dGVtcGxhdGVVcmw6ICcuL3NlbGVjdC5jb21wb25lbnQuaHRtbCcsXG5cdHN0eWxlVXJsczogWycuL3NlbGVjdC5jb21wb25lbnQuc2NzcyddLFxuXHRwcm92aWRlcnM6IFt7cHJvdmlkZTogTkdfVkFMVUVfQUNDRVNTT1IsIHVzZUV4aXN0aW5nOiBTZWxlY3RDb21wb25lbnQsIG11bHRpOiB0cnVlfV0sXG59KVxuZXhwb3J0IGNsYXNzIFNlbGVjdENvbXBvbmVudCBleHRlbmRzIFZhbHVlQWNjZXNzb3JCYXNlPHN0cmluZyB8IHN0cmluZ1tdPiBpbXBsZW1lbnRzIE9uQ2hhbmdlc3tcblx0QElucHV0KCkgcGxhY2Vob2xkZXI6IHN0cmluZztcblx0QElucHV0KCkgb3B0aW9uczogQXBwU2VsZWN0T3B0aW9ucztcblx0QElucHV0KCkgbXVsdGlwbGUgPSBmYWxzZTtcblx0QElucHV0KCkgbXVsdGlwbGVEaXNwbGF5ZWRBc0Ftb3VudCA9IGZhbHNlO1xuXHRASW5wdXQoKSBjbGVhcmFibGUgPSB0cnVlO1xuXHRASW5wdXQoKSBwdWJsaWMgZHJvcGRvd25Qb3NpdGlvbjogc3RyaW5nO1xuXHRASW5wdXQoKSBwdWJsaWMgY3VzdG9tU2VhcmNoRm46ICh0ZXJtOiBzdHJpbmcsIGl0ZW06IHsgaWQ6IHN0cmluZzsgbmFtZTogc3RyaW5nOyBkZXNjcmlwdGlvbjogc3RyaW5nIH0pID0+IGJvb2xlYW47XG5cdEBJbnB1dCgpIHB1YmxpYyBmb290ZXJFbGVtZW50OiBUZW1wbGF0ZVJlZjxhbnk+O1xuXHRAT3V0cHV0KCkgcHVibGljIG9uU2VhcmNoID0gbmV3IEV2ZW50RW1pdHRlcjxzdHJpbmc+KCk7XG5cdEBPdXRwdXQoKSBwdWJsaWMgb25FbmRSZWFjaGVkID0gbmV3IEV2ZW50RW1pdHRlcjx2b2lkPigpO1xuXHRAVmlld0NoaWxkKCduZ1NlbGVjdCcpIG5nU2VsZWN0O1xuXG5cdHByaXZhdGUgbGFzdEl0ZW1JbmRleFJlYWNoZWQgPSAtMTtcblxuXHRjb25zdHJ1Y3Rvcihcblx0XHRAT3B0aW9uYWwoKSBASG9zdCgpIHByb3RlY3RlZCBwYXJlbnQ6IEZvcm1FbGVtZW50Q29tcG9uZW50LFxuXHRcdEBPcHRpb25hbCgpIEBIb3N0KCkgcHJvdGVjdGVkIGNvbnRyb2xDb250YWluZXI6IENvbnRyb2xDb250YWluZXIsXG5cdFx0QEluamVjdChTRUxFQ1RfVFJBTlNMQVRJT05TKSBAT3B0aW9uYWwoKSBwcml2YXRlIHRyYW5zbGF0aW9uczogYW55LFxuXHQpIHtcblx0XHRzdXBlcihwYXJlbnQsIGNvbnRyb2xDb250YWluZXIpO1xuXHR9XG5cblxuXHRuZ09uQ2hhbmdlcyhjaGFuZ2VzOiBTaW1wbGVDaGFuZ2VzKTogdm9pZCB7XG5cdFx0aWYgKGlzVmFsdWVTZXQoY2hhbmdlcy5vcHRpb25zKSkge1xuXHRcdFx0dGhpcy5sYXN0SXRlbUluZGV4UmVhY2hlZCA9IC0xO1xuXHRcdH1cblx0fVxuXG5cdGdldERlZmF1bHRUcmFuc2xhdGlvbihrZXk6IHN0cmluZyk6ICh4OiBhbnkpID0+IHN0cmluZyB7XG5cdFx0c3dpdGNoIChrZXkpIHtcblx0XHRcdGNhc2UgJ3BsYWNlaG9sZGVyJzpcblx0XHRcdFx0cmV0dXJuICgpID0+ICdQaWNrIGFuIG9wdGlvbic7XG5cdFx0XHRjYXNlICdhbW91bnRTZWxlY3RlZCc6XG5cdFx0XHRcdHJldHVybiAoYW1vdW50KSA9PiBgJHthbW91bnR9IHNlbGVjdGVkYDtcblx0XHR9XG5cdH1cblxuXHRnZXRUcmFuc2xhdGlvbihrZXk6IHN0cmluZywgcGFyYW1zOiBhbnkgPSBudWxsKTogc3RyaW5nIHtcblx0XHRpZiAoa2V5ID09PSAncGxhY2Vob2xkZXInICYmIHN0cmluZ0lzU2V0QW5kRmlsbGVkKHRoaXMucGxhY2Vob2xkZXIpKSB7XG5cdFx0XHRyZXR1cm4gdGhpcy5wbGFjZWhvbGRlcjtcblx0XHR9XG5cdFx0cmV0dXJuIHRoaXMudHJhbnNsYXRpb25zPy5ba2V5XT8uKHBhcmFtcykgPz8gdGhpcy5nZXREZWZhdWx0VHJhbnNsYXRpb24oa2V5KShwYXJhbXMpO1xuXHR9XG5cblx0b25TY3JvbGwobGFzdEl0ZW1JbmRleDogbnVtYmVyKTogdm9pZCB7XG5cdFx0Y29uc3QgdmlzaWJsZUl0ZW1zID0gdGhpcy5uZ1NlbGVjdD8uaXRlbXNMaXN0Py5maWx0ZXJlZEl0ZW1zPy5sZW5ndGggPz8gMDtcblx0XHRpZiAodGhpcy5sYXN0SXRlbUluZGV4UmVhY2hlZCA8IGxhc3RJdGVtSW5kZXggJiYgbGFzdEl0ZW1JbmRleCA9PT0gdmlzaWJsZUl0ZW1zKSB7XG5cdFx0XHR0aGlzLm9uRW5kUmVhY2hlZC5lbWl0KCk7XG5cdFx0fVxuXHRcdHRoaXMubGFzdEl0ZW1JbmRleFJlYWNoZWQgPSBNYXRoLm1heChsYXN0SXRlbUluZGV4LCB0aGlzLmxhc3RJdGVtSW5kZXhSZWFjaGVkKTtcblx0fVxuXG5cdHNlYXJjaFF1ZXJ5Q2hhbmdlZChzZWFyY2hRdWVyeTogc3RyaW5nKTogdm9pZCB7XG5cdFx0dGhpcy5vblNlYXJjaC5lbWl0KHNlYXJjaFF1ZXJ5KTtcblx0fVxufVxuIl19
|
|
@@ -561,7 +561,12 @@ class SelectComponent extends ValueAccessorBase {
|
|
|
561
561
|
this.clearable = true;
|
|
562
562
|
this.onSearch = new EventEmitter();
|
|
563
563
|
this.onEndReached = new EventEmitter();
|
|
564
|
-
this.lastItemIndexReached =
|
|
564
|
+
this.lastItemIndexReached = -1;
|
|
565
|
+
}
|
|
566
|
+
ngOnChanges(changes) {
|
|
567
|
+
if (isValueSet(changes.options)) {
|
|
568
|
+
this.lastItemIndexReached = -1;
|
|
569
|
+
}
|
|
565
570
|
}
|
|
566
571
|
getDefaultTranslation(key) {
|
|
567
572
|
switch (key) {
|
|
@@ -579,16 +584,21 @@ class SelectComponent extends ValueAccessorBase {
|
|
|
579
584
|
return (_c = (_b = (_a = this.translations) === null || _a === void 0 ? void 0 : _a[key]) === null || _b === void 0 ? void 0 : _b.call(_a, params)) !== null && _c !== void 0 ? _c : this.getDefaultTranslation(key)(params);
|
|
580
585
|
}
|
|
581
586
|
onScroll(lastItemIndex) {
|
|
582
|
-
|
|
587
|
+
var _a, _b, _c, _d;
|
|
588
|
+
const visibleItems = (_d = (_c = (_b = (_a = this.ngSelect) === null || _a === void 0 ? void 0 : _a.itemsList) === null || _b === void 0 ? void 0 : _b.filteredItems) === null || _c === void 0 ? void 0 : _c.length) !== null && _d !== void 0 ? _d : 0;
|
|
589
|
+
if (this.lastItemIndexReached < lastItemIndex && lastItemIndex === visibleItems) {
|
|
583
590
|
this.onEndReached.emit();
|
|
584
591
|
}
|
|
585
|
-
this.lastItemIndexReached = lastItemIndex;
|
|
592
|
+
this.lastItemIndexReached = Math.max(lastItemIndex, this.lastItemIndexReached);
|
|
593
|
+
}
|
|
594
|
+
searchQueryChanged(searchQuery) {
|
|
595
|
+
this.onSearch.emit(searchQuery);
|
|
586
596
|
}
|
|
587
597
|
}
|
|
588
598
|
SelectComponent.decorators = [
|
|
589
599
|
{ type: Component, args: [{
|
|
590
600
|
selector: 'klp-form-select',
|
|
591
|
-
template: "<ng-select\n\t[placeholder]=\"getTranslation('placeholder')\"\n\tbindLabel=\"name\"\n\tbindValue=\"id\"\n\t[items]=\"options\"\n\t[clearable]=\"clearable\"\n\t[(ngModel)]=\"innerValue\"\n\t[ngClass]=\"{showErrors: isInErrorState()}\"\n\t(change)=\"setInnerValueAndNotify(innerValue)\"\n\t[multiple]=\"multiple\"\n\t[disabled]=\"disabled\"\n\t(blur)=\"touch()\"\n\t(search)=\"
|
|
601
|
+
template: "<ng-select\n\t#ngSelect\n\t[placeholder]=\"getTranslation('placeholder')\"\n\tbindLabel=\"name\"\n\tbindValue=\"id\"\n\t[items]=\"options\"\n\t[clearable]=\"clearable\"\n\t[(ngModel)]=\"innerValue\"\n\t[ngClass]=\"{showErrors: isInErrorState()}\"\n\t(change)=\"setInnerValueAndNotify(innerValue)\"\n\t[multiple]=\"multiple\"\n\t[disabled]=\"disabled\"\n\t(blur)=\"touch()\"\n\t(search)=\"searchQueryChanged($event.term)\"\n\t[dropdownPosition]=\"dropdownPosition\"\n\t[searchFn]=\"customSearchFn\"\n\t[selectOnTab]=\"true\"\n\t[virtualScroll]=\"true\"\n\t(scroll)=\"onScroll($event.end)\"\n>\n\t<ng-template let-item=\"item\" ng-option-tmp>\n\t\t{{ item.name }}\n\t\t<div *ngIf=\"item.description\" class=\"dropdown-item-description\">\n\t\t\t{{ item.description }}\n\t\t</div>\n\t</ng-template>\n\t<ng-container *ngIf=\"multiple && multipleDisplayedAsAmount && innerValue?.length > 1\">\n\t\t<ng-template ng-multi-label-tmp>\n\t\t\t<div class=\"ng-value\">\n\t\t\t\t<span class=\"ng-value-label\">{{getTranslation('amountSelected', innerValue?.length)}}</span>\n\t\t\t</div>\n\t\t</ng-template>\n\t</ng-container>\n\t<ng-template ng-footer-tmp *ngIf=\"footerElement\">\n\t\t<ng-container [ngTemplateOutlet]=\"footerElement\"></ng-container>\n\t</ng-template>\n</ng-select>\n",
|
|
592
602
|
providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: SelectComponent, multi: true }],
|
|
593
603
|
styles: [":host{display:block}ng-select.showErrors::ng-deep .ng-select-container{border-color:#ff8000}:host ::ng-deep ng-select.ng-select .ng-select-container{color:#888da8}:host ::ng-deep .ng-select.ng-select-opened>.ng-select-container{background:#fff;border-color:#3ed778}:host ::ng-deep .ng-select.ng-select-opened>.ng-select-container:hover{box-shadow:none}:host ::ng-deep .ng-select.ng-select-opened>.ng-select-container .ng-arrow{border-color:transparent transparent #999;border-width:0 5px 5px;top:-2px}:host ::ng-deep .ng-select.ng-select-opened>.ng-select-container .ng-arrow:hover{border-color:transparent transparent #666}:host ::ng-deep .ng-select.ng-select-opened.ng-select-bottom>.ng-select-container{border-bottom-left-radius:0;border-bottom-right-radius:0}:host ::ng-deep .ng-select.ng-select-opened.ng-select-top>.ng-select-container{border-top-left-radius:0;border-top-right-radius:0}:host ::ng-deep .ng-select.ng-select-disabled>.ng-select-container{background-color:#f9f9f9}:host ::ng-deep .ng-select .ng-has-value .ng-placeholder{display:none}:host ::ng-deep .ng-select .ng-select-container{align-items:center;background-clip:padding-box;background-color:#fff;border:1px solid #e6ecf5;border-radius:4px;border-radius:2px;box-shadow:none;box-sizing:border-box;color:#888da8;display:flex;flex-direction:row;font-size:1rem;font-size:14px;line-height:1.5;margin:0;min-height:42px;outline:none;overflow:visible;padding:.375rem .75rem;transition-delay:0s;transition-duration:.2s;transition-property:all;transition-timing-function:ease-in;width:100%}:host ::ng-deep .ng-select .ng-select-container:hover{box-shadow:0 1px 0 rgba(0,0,0,.06)}:host ::ng-deep .ng-select .ng-select-container .ng-value-container{align-items:center;overflow:hidden;padding-left:10px}:host ::ng-deep .ng-select .ng-select-container .ng-value-container .ng-placeholder{color:#aaa}:host ::ng-deep .ng-select.ng-select-single .ng-select-container{height:42px}:host ::ng-deep .ng-select.ng-select-single .ng-select-container .ng-value-container .ng-input{left:0;padding-left:10px;padding-right:50px;top:5px}:host ::ng-deep .ng-select.ng-select-multiple.ng-select-disabled>.ng-select-container .ng-value-container .ng-value{background-color:#f9f9f9;border:1px solid #e3e3e3}:host ::ng-deep .ng-select.ng-select-multiple.ng-select-disabled>.ng-select-container .ng-value-container .ng-value .ng-value-label{padding:0 5px}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value{background-color:#e7faee;border:1px solid #93e8b3;border-radius:2px;display:flex;font-size:.9em;margin-bottom:3px;margin-right:5px;margin-top:3px;overflow:hidden}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value.ng-value-disabled{background-color:#f9f9f9;border:1px solid #e3e3e3}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value.ng-value-disabled .ng-value-label{padding-left:5px}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-label{display:inline-block;overflow:hidden;padding:0 5px;text-overflow:ellipsis}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon{display:inline-block;padding:0 5px}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon:hover{background-color:#93e8b3}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon.left{border-right:1px solid #93e8b3}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon.right{border-left:1px solid #c2e0ff}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-input{padding-bottom:3px;padding-left:3px}:host ::ng-deep ng-select.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-placeholder{padding-bottom:3px;padding-left:3px;position:static;top:5px}:host ::ng-deep .ng-select .ng-clear-wrapper{color:#999}:host ::ng-deep .ng-select .ng-clear-wrapper .ng-clear:hover{color:#dc3545}:host ::ng-deep .ng-select .ng-spinner-zone{padding-right:5px;padding-top:5px}:host ::ng-deep .ng-select .ng-arrow-wrapper{padding-right:5px;width:25px}:host ::ng-deep .ng-select .ng-arrow-wrapper:hover .ng-arrow{border-top-color:#666}:host ::ng-deep .ng-select .ng-arrow-wrapper .ng-arrow{border-color:#999 transparent transparent;border-style:solid;border-width:5px 5px 2.5px}:host ::ng-deep .ng-dropdown-panel{background-color:#fff;border:1px solid #3ed778;box-shadow:0 1px 0 rgba(0,0,0,.06)}:host ::ng-deep .ng-dropdown-panel.ng-select-bottom{border-bottom-left-radius:4px;border-bottom-right-radius:4px;border-top-color:#e6e6e6;margin-top:-1px;top:100%}:host ::ng-deep .ng-dropdown-panel.ng-select-bottom .ng-dropdown-panel-items .ng-option:last-child{border-bottom-left-radius:4px;border-bottom-right-radius:4px}:host ::ng-deep .ng-dropdown-panel.ng-select-top{border-bottom-color:#e6e6e6;border-top-left-radius:4px;border-top-right-radius:4px;bottom:100%;margin-bottom:-1px}:host ::ng-deep .ng-dropdown-panel.ng-select-top .ng-dropdown-panel-items .ng-option:first-child{border-top-left-radius:4px;border-top-right-radius:4px}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-header{border-bottom:1px solid #ccc;padding:5px 7px}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-footer{border-top:1px solid #ccc;padding:5px 7px}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items{margin-bottom:1px}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup{-moz-user-select:none;-ms-user-select:none;-webkit-user-select:none;color:rgba(0,0,0,.54);cursor:default;cursor:pointer;font-weight:500;padding:8px 10px;user-select:none}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup.ng-option-disabled{cursor:default}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup.ng-option-marked{background-color:#ebf5ff}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup.ng-option-selected{background-color:#f5faff;font-weight:600}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option{background-color:#fff;color:rgba(0,0,0,.87);padding:8px 10px}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected{background-color:#e7faee;color:#333}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected .ng-option-label{font-weight:600}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-marked{background-color:#e7faee;color:#333}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-disabled{color:#ccc}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-child{padding-left:22px}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option .ng-tag-label{font-size:80%;font-weight:400;padding-right:5px}:host ::ng-deep ng-select.ng-select .ng-select-container .ng-value-container{padding-left:0}:host ::ng-deep ng-select.ng-select.ng-select-single .ng-select-container .ng-value-container .ng-input{color:#888da8;top:9px}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option,:host ::ng-deep .ng-select .ng-select-container .ng-value-container .ng-input>input{color:#888da8}:host ::ng-deep .ng-select.ng-select-auto-grow{max-width:inherit}:host ::ng-deep .ng-select.ng-select-auto-grow .ng-dropdown-panel{width:auto}"]
|
|
594
604
|
},] }
|
|
@@ -608,7 +618,8 @@ SelectComponent.propDecorators = {
|
|
|
608
618
|
customSearchFn: [{ type: Input }],
|
|
609
619
|
footerElement: [{ type: Input }],
|
|
610
620
|
onSearch: [{ type: Output }],
|
|
611
|
-
onEndReached: [{ type: Output }]
|
|
621
|
+
onEndReached: [{ type: Output }],
|
|
622
|
+
ngSelect: [{ type: ViewChild, args: ['ngSelect',] }]
|
|
612
623
|
};
|
|
613
624
|
|
|
614
625
|
class SelectFooterComponent {
|