@colijnit/corecomponents_v12 257.1.13 → 257.1.15
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 +30 -11
- package/bundles/colijnit-corecomponents_v12.umd.js.map +1 -1
- package/colijnit-corecomponents_v12.metadata.json +1 -1
- package/esm2015/lib/components/base/base-input.component.js +4 -1
- package/esm2015/lib/components/filter-item/filter-item.component.js +22 -7
- package/fesm2015/colijnit-corecomponents_v12.js +24 -6
- package/fesm2015/colijnit-corecomponents_v12.js.map +1 -1
- package/lib/components/base/base-input.component.d.ts +1 -0
- package/lib/components/filter-item/filter-item.component.d.ts +3 -0
- package/lib/components/filter-item/style/_layout.scss +32 -1
- package/lib/components/input-text/style/_layout.scss +2 -1
- package/package.json +1 -1
- package/colijnit-corecomponents_v12-257.1.11.tgz +0 -0
|
@@ -2267,6 +2267,7 @@
|
|
|
2267
2267
|
this.modelChange = new i0.EventEmitter();
|
|
2268
2268
|
this.userModelChange = new i0.EventEmitter();
|
|
2269
2269
|
this.hiddenChange = new i0.EventEmitter();
|
|
2270
|
+
this.cancelClicked = new i0.EventEmitter();
|
|
2270
2271
|
this.focused = false;
|
|
2271
2272
|
this.formInput = true;
|
|
2272
2273
|
this.customWidth = false;
|
|
@@ -2693,6 +2694,7 @@
|
|
|
2693
2694
|
this.model = this._initialModel;
|
|
2694
2695
|
}
|
|
2695
2696
|
this.keepFocus = false;
|
|
2697
|
+
this.cancelClicked.emit();
|
|
2696
2698
|
};
|
|
2697
2699
|
BaseInputComponent.prototype.showValidationError = function (error) {
|
|
2698
2700
|
this.validationError = error;
|
|
@@ -3166,6 +3168,7 @@
|
|
|
3166
3168
|
modelChange: [{ type: i0.Output }],
|
|
3167
3169
|
userModelChange: [{ type: i0.Output }],
|
|
3168
3170
|
hiddenChange: [{ type: i0.Output }],
|
|
3171
|
+
cancelClicked: [{ type: i0.Output }],
|
|
3169
3172
|
focused: [{ type: i0.HostBinding, args: ['class.cc-input-focused',] }],
|
|
3170
3173
|
formInput: [{ type: i0.HostBinding, args: ['class.form-input',] }],
|
|
3171
3174
|
customWidth: [{ type: i0.Input }, { type: i0.HostBinding, args: ['class.custom-width',] }],
|
|
@@ -12424,6 +12427,7 @@
|
|
|
12424
12427
|
this.limitTo = 10;
|
|
12425
12428
|
this.filterText = "";
|
|
12426
12429
|
this.showButton = false;
|
|
12430
|
+
this.isLoading = false;
|
|
12427
12431
|
this._collection = [];
|
|
12428
12432
|
this._mode = this.modes.Filterlist;
|
|
12429
12433
|
}
|
|
@@ -12562,6 +12566,14 @@
|
|
|
12562
12566
|
}
|
|
12563
12567
|
return false;
|
|
12564
12568
|
};
|
|
12569
|
+
FilterItemComponent.prototype.onModelChange = function (text) {
|
|
12570
|
+
var _this = this;
|
|
12571
|
+
this.isLoading = true;
|
|
12572
|
+
clearTimeout(this.debounceTimeout);
|
|
12573
|
+
this.debounceTimeout = setTimeout(function () {
|
|
12574
|
+
_this.applyFilter(text);
|
|
12575
|
+
}, 300);
|
|
12576
|
+
};
|
|
12565
12577
|
// Applies filter to the collection.
|
|
12566
12578
|
FilterItemComponent.prototype.applyFilter = function (text) {
|
|
12567
12579
|
var _a, _b;
|
|
@@ -12570,21 +12582,26 @@
|
|
|
12570
12582
|
return __generator(this, function (_d) {
|
|
12571
12583
|
switch (_d.label) {
|
|
12572
12584
|
case 0:
|
|
12573
|
-
if (
|
|
12574
|
-
if (!(text.length
|
|
12585
|
+
if (!!isNaN(this.minSearchCharsToLoadCollection)) return [3 /*break*/, 5];
|
|
12586
|
+
if (!(text.length < this.minSearchCharsToLoadCollection)) return [3 /*break*/, 2];
|
|
12587
|
+
return [4 /*yield*/, new Promise(function (resolve) { return setTimeout(resolve, 300); })];
|
|
12588
|
+
case 1:
|
|
12589
|
+
_d.sent();
|
|
12590
|
+
this.collection = undefined;
|
|
12591
|
+
return [3 /*break*/, 5];
|
|
12592
|
+
case 2: return [4 /*yield*/, new Promise(function (resolve) { return setTimeout(resolve, 300); })];
|
|
12593
|
+
case 3:
|
|
12594
|
+
_d.sent();
|
|
12575
12595
|
_c = this;
|
|
12576
12596
|
return [4 /*yield*/, this.collectionLoadFn(text)];
|
|
12577
|
-
case
|
|
12597
|
+
case 4:
|
|
12578
12598
|
_c.collection = _d.sent();
|
|
12579
|
-
|
|
12580
|
-
case
|
|
12581
|
-
if (text.length < this.minSearchCharsToLoadCollection) {
|
|
12582
|
-
this.collection = undefined;
|
|
12583
|
-
}
|
|
12584
|
-
_d.label = 3;
|
|
12585
|
-
case 3:
|
|
12599
|
+
_d.label = 5;
|
|
12600
|
+
case 5:
|
|
12586
12601
|
this.filterText = text;
|
|
12587
12602
|
if (!this.collection) {
|
|
12603
|
+
this._changeDetector.detectChanges();
|
|
12604
|
+
this.isLoading = false;
|
|
12588
12605
|
return [2 /*return*/, []];
|
|
12589
12606
|
}
|
|
12590
12607
|
filterText = (_a = this.filterText) === null || _a === void 0 ? void 0 : _a.toString().toLowerCase();
|
|
@@ -12601,6 +12618,8 @@
|
|
|
12601
12618
|
return true;
|
|
12602
12619
|
}
|
|
12603
12620
|
});
|
|
12621
|
+
this.isLoading = false;
|
|
12622
|
+
this._changeDetector.detectChanges();
|
|
12604
12623
|
return [2 /*return*/];
|
|
12605
12624
|
}
|
|
12606
12625
|
});
|
|
@@ -12918,7 +12937,7 @@
|
|
|
12918
12937
|
FilterItemComponent.decorators = [
|
|
12919
12938
|
{ type: i0.Component, args: [{
|
|
12920
12939
|
selector: "co-filter-item",
|
|
12921
|
-
template: "\n <div class=\"co-filter-item-header\">\n <co-collapsible\n [headerTitle]=\"placeholder\"\n [expandButtonLast]=\"true\"\n [iconData]=\"iconService.getIcon(icons.ArrowPointDown)\"\n [expanded]=\"expanded\"\n [showButton]=\"showButton\"\n [buttonText]=\"filterButtonLabel\"\n (buttonClicked)=\"onButtonClicked()\"\n >\n <div class=\"co-filter-item-collapsable-content\">\n <div class=\"co-filter-item-custom-content\" *ngIf=\"customContent; else collectionContent\"\n (keydown)=\"showButton=true\" (mousedown)=\"showButton=true\">\n <ng-content></ng-content>\n </div>\n <ng-template #collectionContent>\n <div class=\"co-filter-item-collection-content\" *ngIf=\"mode === modes.Filterlist || mode === modes.SingleSelectList\n || mode === modes.SelectListWithNumberOutput || mode === modes.SelectListWithStringCollectionOutput\">\n <co-input-text\n *ngIf=\"collection?.length > 10 || minSearchCharsToLoadCollection\"\n [placeholder]=\"searchPlaceholder\"\n [model]=\"filterText\"\n (modelChange)=\"applyFilter($event)\"\n [readonly]=\"readonly\"\n >\n </co-input-text>\n <div class=\"no-results\" *ngIf=\"filteredCollection?.length === 0\">\n <span [textContent]=\"noResultsLabel\"></span>\n </div>\n <div class=\"co-filter-item-collection-results\">\n <ng-container\n *ngFor=\"let option of filteredCollection; let index = index\">\n <div class=\"co-filter-item-collection-result-item\" *ngIf=\"index < limitTo || showAllResults\">\n <co-input-checkbox *ngIf=\"mode !== modes.SingleSelectList\"\n [label]=\"option.description\"\n [model]=\"option.checked\"\n [clickableLabel]=\"false\"\n (modelChange)=\"handleModelChange(option)\"\n [readonly]=\"readonly\"\n ></co-input-checkbox>\n <co-input-radio-button *ngIf=\"mode === modes.SingleSelectList\"\n [label]=\"option.description\"\n [model]=\"option.checked\"\n (modelChange)=\"handleModelChange(option)\"\n [readonly]=\"readonly\"\n ></co-input-radio-button>\n <div class=\"co-filter-item-amount\" *ngIf=\"option.count\"\n [textContent]=\"option.count.toString() | append: ')' | prepend: ' ('\"\n ></div>\n </div>\n\n </ng-container>\n </div>\n <div class=\"co-filter-show-more-or-less\" *ngIf=\"!showAllResults\">\n <div class=\"co-filter-show-more clickable\"\n *ngIf=\"moreToShow()\">\n <a (click)=\"increaseLimit()\">\n <co-icon [iconData]=\"iconService.getIcon(icons.ArrowPointDown)\"></co-icon>\n <span [textContent]=\"showMoreLabel\"></span>\n </a>\n </div>\n <div class=\"co-filter-show-less clickable\"\n *ngIf=\"lessToShow()\">\n <a (click)=\"setToInitialLimit()\">\n <co-icon [iconData]=\"iconService.getIcon(icons.ArrowPointUp)\"></co-icon>\n <span [textContent]=\"showLessLabel\"></span>\n </a>\n </div>\n </div>\n </div>\n <div class=\"co-filter-item-slider-content\" *ngIf=\"mode === modes.Slider\">\n <co-input-text\n class=\"slider-from\"\n [type]=\"'number'\"\n [digitsOnly]=\"true\"\n [hideArrowButtons]=\"true\"\n [excludePlusMinus]=\"true\"\n [label]=\"'FROM' | coreLocalize\"\n [(model)]=\"sliderMin\"\n [readonly]=\"readonly\"\n (focusout)=\"handleModelChange(sliderMin)\"\n ></co-input-text>\n <co-input-text\n class=\"slider-to\"\n [type]=\"'number'\"\n [digitsOnly]=\"true\"\n [hideArrowButtons]=\"true\"\n [excludePlusMinus]=\"true\"\n [label]=\"'TO' | coreLocalize\"\n [(model)]=\"sliderMax\"\n [readonly]=\"readonly\"\n (focusout)=\"handleModelChange(sliderMax)\"\n ></co-input-text>\n </div>\n <div class=\"co-filter-item-slider-content\" *ngIf=\"mode === modes.NullableSlider\">\n <co-input-text\n class=\"slider-from\"\n [type]=\"'number'\"\n [digitsOnly]=\"true\"\n [hideArrowButtons]=\"true\"\n [excludePlusMinus]=\"true\"\n [label]=\"'FROM' | coreLocalize\"\n [(model)]=\"sliderMin\"\n [readonly]=\"readonly\"\n (focusout)=\"handleModelChange(sliderMin)\"\n ></co-input-text>\n <co-input-text\n class=\"slider-to\"\n [type]=\"'number'\"\n [digitsOnly]=\"true\"\n [hideArrowButtons]=\"true\"\n [excludePlusMinus]=\"true\"\n [label]=\"'TO' | coreLocalize\"\n [(model)]=\"sliderMax\"\n [readonly]=\"readonly\"\n (focusout)=\"handleModelChange(sliderMax)\"\n ></co-input-text>\n </div>\n <div class=\"co-filter-item-checkbox-content\" *ngIf=\"mode === modes.Checkbox \">\n <co-input-checkbox\n [(model)]=\"model\"\n (modelChange)=\"handleModelChange($event)\"\n [readonly]=\"readonly\"\n [label]=\"placeholder\">\n </co-input-checkbox>\n </div>\n <div class=\"co-filter-item-checkbox-content\"\n *ngIf=\"mode === modes.CheckboxToText || mode === modes.CheckboxToSimpleText || mode === modes.CheckboxToBinary\">\n <co-input-checkbox\n [(model)]=\"checkBoxToTextModel\"\n (modelChange)=\"handleModelChange($event)\"\n [readonly]=\"readonly\"\n [label]=\"placeholder\"></co-input-checkbox>\n </div>\n <div class=\"co-filter-item-textfield-content\" *ngIf=\"mode === modes.TextField\">\n <co-input-text\n [(model)]=\"model\" [readonly]=\"readonly\"\n (modelChange)=\"handleModelChange($event)\"></co-input-text>\n </div>\n <div class=\"co-filter-item-dateField-content\" *ngIf=\"mode === modes.DateField\">\n <co-input-date\n [(model)]=\"model\" [readonly]=\"readonly\"\n (modelChange)=\"handleModelChange($event)\"\n ></co-input-date>\n </div>\n <div class=\"co-filter-item-dateField-content\" *ngIf=\"mode === modes.DateRangeField\">\n <co-input-date-range [readonly]=\"readonly\"\n [model]=\"[dateRangeStart, dateRangeEnd]\"\n (modelChange)=\"handleModelChange($event)\"\n [placeholder]=\"'SELECT_DATE' | coreLocalize\">\n </co-input-date-range>\n </div>\n </ng-template>\n </div>\n </co-collapsible>\n </div>\n\n ",
|
|
12940
|
+
template: "\n <div class=\"co-filter-item-header\">\n <co-collapsible\n [headerTitle]=\"placeholder\"\n [expandButtonLast]=\"true\"\n [iconData]=\"iconService.getIcon(icons.ArrowPointDown)\"\n [expanded]=\"expanded\"\n [showButton]=\"showButton\"\n [buttonText]=\"filterButtonLabel\"\n (buttonClicked)=\"onButtonClicked()\"\n >\n <div class=\"co-filter-item-collapsable-content\">\n <div class=\"co-filter-item-custom-content\" *ngIf=\"customContent; else collectionContent\"\n (keydown)=\"showButton=true\" (mousedown)=\"showButton=true\">\n <ng-content></ng-content>\n </div>\n <ng-template #collectionContent>\n <div class=\"co-filter-item-collection-content\" *ngIf=\"mode === modes.Filterlist || mode === modes.SingleSelectList\n || mode === modes.SelectListWithNumberOutput || mode === modes.SelectListWithStringCollectionOutput\">\n <co-input-text\n *ngIf=\"collection?.length > 10 || minSearchCharsToLoadCollection\"\n [placeholder]=\"searchPlaceholder\"\n [model]=\"filterText\"\n (modelChange)=\"onModelChange($event)\"\n [readonly]=\"readonly\"\n >\n </co-input-text>\n <div *ngIf=\"isLoading\" class=\"filter-loader\"><span></span></div>\n <div class=\"no-results\" *ngIf=\"filteredCollection?.length === 0\">\n <span [textContent]=\"noResultsLabel\"></span>\n </div>\n <div class=\"co-filter-item-collection-results\">\n <ng-container\n *ngFor=\"let option of filteredCollection; let index = index\">\n <div class=\"co-filter-item-collection-result-item\" *ngIf=\"index < limitTo || showAllResults\">\n <co-input-checkbox *ngIf=\"mode !== modes.SingleSelectList\"\n [label]=\"option.description\"\n [model]=\"option.checked\"\n [clickableLabel]=\"false\"\n (modelChange)=\"handleModelChange(option)\"\n [readonly]=\"readonly\"\n ></co-input-checkbox>\n <co-input-radio-button *ngIf=\"mode === modes.SingleSelectList\"\n [label]=\"option.description\"\n [model]=\"option.checked\"\n (modelChange)=\"handleModelChange(option)\"\n [readonly]=\"readonly\"\n ></co-input-radio-button>\n <div class=\"co-filter-item-amount\" *ngIf=\"option.count\"\n [textContent]=\"option.count.toString() | append: ')' | prepend: ' ('\"\n ></div>\n </div>\n\n </ng-container>\n </div>\n <div class=\"co-filter-show-more-or-less\" *ngIf=\"!showAllResults\">\n <div class=\"co-filter-show-more clickable\"\n *ngIf=\"moreToShow()\">\n <a (click)=\"increaseLimit()\">\n <co-icon [iconData]=\"iconService.getIcon(icons.ArrowPointDown)\"></co-icon>\n <span [textContent]=\"showMoreLabel\"></span>\n </a>\n </div>\n <div class=\"co-filter-show-less clickable\"\n *ngIf=\"lessToShow()\">\n <a (click)=\"setToInitialLimit()\">\n <co-icon [iconData]=\"iconService.getIcon(icons.ArrowPointUp)\"></co-icon>\n <span [textContent]=\"showLessLabel\"></span>\n </a>\n </div>\n </div>\n </div>\n <div class=\"co-filter-item-slider-content\" *ngIf=\"mode === modes.Slider\">\n <co-input-text\n class=\"slider-from\"\n [type]=\"'number'\"\n [digitsOnly]=\"true\"\n [hideArrowButtons]=\"true\"\n [excludePlusMinus]=\"true\"\n [label]=\"'FROM' | coreLocalize\"\n [(model)]=\"sliderMin\"\n [readonly]=\"readonly\"\n (focusout)=\"handleModelChange(sliderMin)\"\n ></co-input-text>\n <co-input-text\n class=\"slider-to\"\n [type]=\"'number'\"\n [digitsOnly]=\"true\"\n [hideArrowButtons]=\"true\"\n [excludePlusMinus]=\"true\"\n [label]=\"'TO' | coreLocalize\"\n [(model)]=\"sliderMax\"\n [readonly]=\"readonly\"\n (focusout)=\"handleModelChange(sliderMax)\"\n ></co-input-text>\n </div>\n <div class=\"co-filter-item-slider-content\" *ngIf=\"mode === modes.NullableSlider\">\n <co-input-text\n class=\"slider-from\"\n [type]=\"'number'\"\n [digitsOnly]=\"true\"\n [hideArrowButtons]=\"true\"\n [excludePlusMinus]=\"true\"\n [label]=\"'FROM' | coreLocalize\"\n [(model)]=\"sliderMin\"\n [readonly]=\"readonly\"\n (focusout)=\"handleModelChange(sliderMin)\"\n ></co-input-text>\n <co-input-text\n class=\"slider-to\"\n [type]=\"'number'\"\n [digitsOnly]=\"true\"\n [hideArrowButtons]=\"true\"\n [excludePlusMinus]=\"true\"\n [label]=\"'TO' | coreLocalize\"\n [(model)]=\"sliderMax\"\n [readonly]=\"readonly\"\n (focusout)=\"handleModelChange(sliderMax)\"\n ></co-input-text>\n </div>\n <div class=\"co-filter-item-checkbox-content\" *ngIf=\"mode === modes.Checkbox \">\n <co-input-checkbox\n [(model)]=\"model\"\n (modelChange)=\"handleModelChange($event)\"\n [readonly]=\"readonly\"\n [label]=\"placeholder\">\n </co-input-checkbox>\n </div>\n <div class=\"co-filter-item-checkbox-content\"\n *ngIf=\"mode === modes.CheckboxToText || mode === modes.CheckboxToSimpleText || mode === modes.CheckboxToBinary\">\n <co-input-checkbox\n [(model)]=\"checkBoxToTextModel\"\n (modelChange)=\"handleModelChange($event)\"\n [readonly]=\"readonly\"\n [label]=\"placeholder\"></co-input-checkbox>\n </div>\n <div class=\"co-filter-item-textfield-content\" *ngIf=\"mode === modes.TextField\">\n <co-input-text\n [(model)]=\"model\" [readonly]=\"readonly\"\n (modelChange)=\"handleModelChange($event)\"></co-input-text>\n </div>\n <div class=\"co-filter-item-dateField-content\" *ngIf=\"mode === modes.DateField\">\n <co-input-date\n [(model)]=\"model\" [readonly]=\"readonly\"\n (modelChange)=\"handleModelChange($event)\"\n ></co-input-date>\n </div>\n <div class=\"co-filter-item-dateField-content\" *ngIf=\"mode === modes.DateRangeField\">\n <co-input-date-range [readonly]=\"readonly\"\n [model]=\"[dateRangeStart, dateRangeEnd]\"\n (modelChange)=\"handleModelChange($event)\"\n [placeholder]=\"'SELECT_DATE' | coreLocalize\">\n </co-input-date-range>\n </div>\n </ng-template>\n </div>\n </co-collapsible>\n </div>\n\n ",
|
|
12922
12941
|
encapsulation: i0.ViewEncapsulation.None,
|
|
12923
12942
|
changeDetection: i0.ChangeDetectionStrategy.OnPush,
|
|
12924
12943
|
providers: [{
|