@colijnit/corecomponents_v12 256.1.20 → 256.1.22
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/colijnit-corecomponents_v12.umd.js +61 -2
- package/bundles/colijnit-corecomponents_v12.umd.js.map +1 -1
- package/colijnit-corecomponents_v12.metadata.json +1 -1
- package/esm2015/lib/components/input-date-picker/input-date-picker.component.js +2 -1
- package/esm2015/lib/components/list-of-values/list-of-values.component.js +86 -24
- package/fesm2015/colijnit-corecomponents_v12.js +85 -23
- package/fesm2015/colijnit-corecomponents_v12.js.map +1 -1
- package/lib/components/list-of-values/list-of-values.component.d.ts +8 -0
- package/package.json +1 -1
|
@@ -6023,7 +6023,7 @@
|
|
|
6023
6023
|
InputDatePickerComponent.decorators = [
|
|
6024
6024
|
{ type: i0.Component, args: [{
|
|
6025
6025
|
selector: 'co-input-date',
|
|
6026
|
-
template: "\n <co-input-text (clickOutside)=\"toggleCalendar(false)\" overlayParent #parentForOverlay=\"overlayParent\"\n [hidden]=\"hidden\"\n [readonly]=\"readonly\"\n [(model)]=\"modelAsString\"\n [rightIcon]=\"rightIcon\"\n [leftIcon]=\"leftIcon\"\n [leftIconData]=\"leftIconData\"\n [pattern]=\"'yyyy-MM-dd'\"\n [type]=\"'date'\"\n [placeholder]=\"placeholder\"\n (leftIconClick)=\"leftIconClick.emit($event)\"\n (rightIconClick)=\"toggleCalendar(true)\"\n (modelChange)=\"modelAsString = $event\"\n (clearIconClick)=\"handleClearIconClicked()\"\n [emptyPlace]=\"true\"\n (keyup.enter)=\"finalizeDate()\"\n ></co-input-text>\n ",
|
|
6026
|
+
template: "\n <co-input-text (clickOutside)=\"toggleCalendar(false)\" overlayParent #parentForOverlay=\"overlayParent\"\n [hidden]=\"hidden\"\n [readonly]=\"readonly\"\n [(model)]=\"modelAsString\"\n [rightIcon]=\"rightIcon\"\n [leftIcon]=\"leftIcon\"\n [leftIconData]=\"leftIconData\"\n [pattern]=\"'yyyy-MM-dd'\"\n [type]=\"'date'\"\n [placeholder]=\"placeholder\"\n (leftIconClick)=\"leftIconClick.emit($event)\"\n (rightIconClick)=\"toggleCalendar(true)\"\n (modelChange)=\"modelAsString = $event\"\n (clearIconClick)=\"handleClearIconClicked()\"\n [emptyPlace]=\"true\"\n (keyup.enter)=\"finalizeDate()\"\n (blur)=\"finalizeDate()\"\n ></co-input-text>\n ",
|
|
6027
6027
|
providers: [
|
|
6028
6028
|
OverlayService, {
|
|
6029
6029
|
provide: SCREEN_CONFIG_ADAPTER_COMPONENT_INTERFACE_NAME, useExisting: i0.forwardRef(function () { return InputDatePickerComponent; })
|
|
@@ -11674,12 +11674,16 @@
|
|
|
11674
11674
|
var _this = _super.apply(this, __spreadArray([], __read(arguments))) || this;
|
|
11675
11675
|
_this.icons = exports.CoreComponentsIcon;
|
|
11676
11676
|
_this.multiselect = false;
|
|
11677
|
+
_this.largeCollection = false;
|
|
11677
11678
|
_this.displayField = 'description';
|
|
11678
11679
|
_this.searchDisabled = false;
|
|
11679
11680
|
_this.showChips = true;
|
|
11680
11681
|
_this.isSelectOpen = false;
|
|
11681
11682
|
_this.state = 'default';
|
|
11683
|
+
_this.filterText = '';
|
|
11682
11684
|
_this.selectedModels = [];
|
|
11685
|
+
_this.filteredCollection = [];
|
|
11686
|
+
_this.isLoading = false;
|
|
11683
11687
|
_this._collection = [];
|
|
11684
11688
|
return _this;
|
|
11685
11689
|
}
|
|
@@ -11723,6 +11727,53 @@
|
|
|
11723
11727
|
}
|
|
11724
11728
|
this.selectedModel = model;
|
|
11725
11729
|
};
|
|
11730
|
+
ListOfValuesComponent.prototype.onModelChange = function (text) {
|
|
11731
|
+
var _this = this;
|
|
11732
|
+
this.isLoading = true;
|
|
11733
|
+
clearTimeout(this.debounceTimeout);
|
|
11734
|
+
this.debounceTimeout = setTimeout(function () {
|
|
11735
|
+
_this.applyFilter(text);
|
|
11736
|
+
}, 300);
|
|
11737
|
+
};
|
|
11738
|
+
ListOfValuesComponent.prototype.applyFilter = function (text) {
|
|
11739
|
+
var _a, _b, _c;
|
|
11740
|
+
return __awaiter(this, void 0, void 0, function () {
|
|
11741
|
+
var _d;
|
|
11742
|
+
return __generator(this, function (_e) {
|
|
11743
|
+
switch (_e.label) {
|
|
11744
|
+
case 0:
|
|
11745
|
+
if (!((text === null || text === void 0 ? void 0 : text.length) < 3)) return [3 /*break*/, 2];
|
|
11746
|
+
return [4 /*yield*/, new Promise(function (resolve) { return setTimeout(resolve, 300); })];
|
|
11747
|
+
case 1:
|
|
11748
|
+
_e.sent();
|
|
11749
|
+
this.collection = undefined;
|
|
11750
|
+
return [3 /*break*/, 5];
|
|
11751
|
+
case 2: return [4 /*yield*/, new Promise(function (resolve) { return setTimeout(resolve, 300); })];
|
|
11752
|
+
case 3:
|
|
11753
|
+
_e.sent();
|
|
11754
|
+
_d = this;
|
|
11755
|
+
return [4 /*yield*/, this.collectionLoadFn(text)];
|
|
11756
|
+
case 4:
|
|
11757
|
+
_d.collection = _e.sent();
|
|
11758
|
+
_e.label = 5;
|
|
11759
|
+
case 5:
|
|
11760
|
+
this.filterText = text;
|
|
11761
|
+
if (!this.collection) {
|
|
11762
|
+
this.changeDetector.detectChanges();
|
|
11763
|
+
this.isLoading = false;
|
|
11764
|
+
return [2 /*return*/, []];
|
|
11765
|
+
}
|
|
11766
|
+
this.filteredCollection = (_a = this.collection) === null || _a === void 0 ? void 0 : _a.filter(function () {
|
|
11767
|
+
return true;
|
|
11768
|
+
});
|
|
11769
|
+
(((_b = this.filteredCollection) === null || _b === void 0 ? void 0 : _b.length) > 0 && ((_c = this.filterText) === null || _c === void 0 ? void 0 : _c.length) > 2) ? this.openPopup() : this.closePopup();
|
|
11770
|
+
this.isLoading = false;
|
|
11771
|
+
this.changeDetector.detectChanges();
|
|
11772
|
+
return [2 /*return*/];
|
|
11773
|
+
}
|
|
11774
|
+
});
|
|
11775
|
+
});
|
|
11776
|
+
};
|
|
11726
11777
|
ListOfValuesComponent.prototype.handleInputKeyDown = function (event) {
|
|
11727
11778
|
if (event) {
|
|
11728
11779
|
if (event.altKey && event.code === KeyboardKey.Down && !this._lovPopupComponentRef) {
|
|
@@ -11799,6 +11850,9 @@
|
|
|
11799
11850
|
}
|
|
11800
11851
|
else {
|
|
11801
11852
|
this.selectedModel = option[this.displayField];
|
|
11853
|
+
if (this.largeCollection) {
|
|
11854
|
+
this.filterText = option[this.displayField];
|
|
11855
|
+
}
|
|
11802
11856
|
}
|
|
11803
11857
|
}
|
|
11804
11858
|
this.model = option;
|
|
@@ -11841,6 +11895,9 @@
|
|
|
11841
11895
|
else {
|
|
11842
11896
|
if (this.model) {
|
|
11843
11897
|
this.selectedModel = this.model[this.displayField];
|
|
11898
|
+
if (this.largeCollection) {
|
|
11899
|
+
this.filterText = this.model[this.displayField];
|
|
11900
|
+
}
|
|
11844
11901
|
}
|
|
11845
11902
|
else {
|
|
11846
11903
|
this.selectedModel = '';
|
|
@@ -11852,7 +11909,7 @@
|
|
|
11852
11909
|
ListOfValuesComponent.decorators = [
|
|
11853
11910
|
{ type: i0.Component, args: [{
|
|
11854
11911
|
selector: 'co-list-of-values',
|
|
11855
|
-
template: "\n <co-input-text
|
|
11912
|
+
template: "\n <co-input-text\n *ngIf=\"!largeCollection\"\n aria-haspopup=\"listbox\"\n [attr.aria-expanded]=\"isSelectOpen\"\n aria-controls=\"lov-popup\"\n role=\"combobox\"\n class=\"no-focus-line\"\n overlayParent\n #parentForOverlay=\"overlayParent\"\n type=\"text\"\n [id]=\"label\"\n [model]=\"multiselect ? selectedModels : selectedModel\"\n [placeholder]=\"label\"\n [readonly]=\"readonly\"\n [disabled]=\"disabled\"\n [required]=\"required\"\n [noClickFocus]=\"false\"\n [leftIconData]=\"leftIconData\"\n [rightIcon]=\"isSelectOpen ? icons.ChevronUpRegular : icons.ChevronDownRegular\"\n [showClearButton]=\"true\"\n [useContent]=\"multiselect\"\n [customHeight]=\"multiselect\"\n [keepFocussed]=\"keepFocussed\"\n (modelChange)=\"handleInputModelChange($event)\"\n (click)=\"openPopup()\"\n (rightIconClick)=\"toggleSelect()\"\n (keydown)=\"handleInputKeyDown($event)\"\n (clearIconClick)=\"clearModel($event)\"\n (blur)=\"checkModel()\">\n <ng-container *ngIf=\"multiselect && showChips\">\n <div class=\"multiselect-chips-wrapper\">\n <div class=\"chips\" *ngFor=\"let chip of model\">\n <span class=\"chips-description\" [textContent]=\"chip[displayField]\"></span>\n <co-icon class=\"remove-chip-icon\" [icon]=\"icons.CrossSkinny\" (click)=\"removeOptionFromModel(chip)\"></co-icon>\n </div>\n </div>\n </ng-container>\n </co-input-text>\n\n <co-input-text\n *ngIf=\"largeCollection\"\n [model]=\"filterText\"\n [placeholder]=\"label\"\n [required]=\"required\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n (modelChange)=\"onModelChange($event)\">\n </co-input-text>\n <div *ngIf=\"isLoading\" class=\"filter-loader\"><span></span></div>\n ",
|
|
11856
11913
|
providers: [
|
|
11857
11914
|
OverlayService,
|
|
11858
11915
|
{
|
|
@@ -11867,8 +11924,10 @@
|
|
|
11867
11924
|
model: [{ type: i0.Input }],
|
|
11868
11925
|
parentForOverlay: [{ type: i0.ViewChild, args: ['parentForOverlay', { read: i0.ElementRef },] }],
|
|
11869
11926
|
multiselect: [{ type: i0.HostBinding, args: ['class.custom-height',] }, { type: i0.HostBinding, args: ['class.multi-select',] }, { type: i0.Input }],
|
|
11927
|
+
largeCollection: [{ type: i0.Input }],
|
|
11870
11928
|
displayField: [{ type: i0.Input }],
|
|
11871
11929
|
collection: [{ type: i0.Input }],
|
|
11930
|
+
collectionLoadFn: [{ type: i0.Input }],
|
|
11872
11931
|
leftIconData: [{ type: i0.Input }],
|
|
11873
11932
|
searchPlaceholder: [{ type: i0.Input }],
|
|
11874
11933
|
label: [{ type: i0.Input }],
|