@colijnit/corecomponents_v12 257.1.14 → 257.1.16
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 +35 -12
- package/bundles/colijnit-corecomponents_v12.umd.js.map +1 -1
- package/colijnit-corecomponents_v12.metadata.json +1 -1
- package/esm2015/lib/components/filter-item/filter-item.component.js +26 -8
- package/fesm2015/colijnit-corecomponents_v12.js +25 -7
- package/fesm2015/colijnit-corecomponents_v12.js.map +1 -1
- package/lib/components/filter-item/filter-item.component.d.ts +4 -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
|
@@ -12427,6 +12427,7 @@
|
|
|
12427
12427
|
this.limitTo = 10;
|
|
12428
12428
|
this.filterText = "";
|
|
12429
12429
|
this.showButton = false;
|
|
12430
|
+
this.isLoading = false;
|
|
12430
12431
|
this._collection = [];
|
|
12431
12432
|
this._mode = this.modes.Filterlist;
|
|
12432
12433
|
}
|
|
@@ -12477,6 +12478,13 @@
|
|
|
12477
12478
|
enumerable: false,
|
|
12478
12479
|
configurable: true
|
|
12479
12480
|
});
|
|
12481
|
+
Object.defineProperty(FilterItemComponent.prototype, "hasClass", {
|
|
12482
|
+
get: function () {
|
|
12483
|
+
return true; // Ensures it never gets removed
|
|
12484
|
+
},
|
|
12485
|
+
enumerable: false,
|
|
12486
|
+
configurable: true
|
|
12487
|
+
});
|
|
12480
12488
|
FilterItemComponent.prototype.ngOnInit = function () {
|
|
12481
12489
|
this.setToInitialLimit();
|
|
12482
12490
|
this.showButton = this.valueSelected();
|
|
@@ -12565,6 +12573,14 @@
|
|
|
12565
12573
|
}
|
|
12566
12574
|
return false;
|
|
12567
12575
|
};
|
|
12576
|
+
FilterItemComponent.prototype.onModelChange = function (text) {
|
|
12577
|
+
var _this = this;
|
|
12578
|
+
this.isLoading = true;
|
|
12579
|
+
clearTimeout(this.debounceTimeout);
|
|
12580
|
+
this.debounceTimeout = setTimeout(function () {
|
|
12581
|
+
_this.applyFilter(text);
|
|
12582
|
+
}, 300);
|
|
12583
|
+
};
|
|
12568
12584
|
// Applies filter to the collection.
|
|
12569
12585
|
FilterItemComponent.prototype.applyFilter = function (text) {
|
|
12570
12586
|
var _a, _b;
|
|
@@ -12573,21 +12589,26 @@
|
|
|
12573
12589
|
return __generator(this, function (_d) {
|
|
12574
12590
|
switch (_d.label) {
|
|
12575
12591
|
case 0:
|
|
12576
|
-
if (
|
|
12577
|
-
if (!(text.length
|
|
12592
|
+
if (!!isNaN(this.minSearchCharsToLoadCollection)) return [3 /*break*/, 5];
|
|
12593
|
+
if (!(text.length < this.minSearchCharsToLoadCollection)) return [3 /*break*/, 2];
|
|
12594
|
+
return [4 /*yield*/, new Promise(function (resolve) { return setTimeout(resolve, 300); })];
|
|
12595
|
+
case 1:
|
|
12596
|
+
_d.sent();
|
|
12597
|
+
this.collection = undefined;
|
|
12598
|
+
return [3 /*break*/, 5];
|
|
12599
|
+
case 2: return [4 /*yield*/, new Promise(function (resolve) { return setTimeout(resolve, 300); })];
|
|
12600
|
+
case 3:
|
|
12601
|
+
_d.sent();
|
|
12578
12602
|
_c = this;
|
|
12579
12603
|
return [4 /*yield*/, this.collectionLoadFn(text)];
|
|
12580
|
-
case
|
|
12604
|
+
case 4:
|
|
12581
12605
|
_c.collection = _d.sent();
|
|
12582
|
-
|
|
12583
|
-
case
|
|
12584
|
-
if (text.length < this.minSearchCharsToLoadCollection) {
|
|
12585
|
-
this.collection = undefined;
|
|
12586
|
-
}
|
|
12587
|
-
_d.label = 3;
|
|
12588
|
-
case 3:
|
|
12606
|
+
_d.label = 5;
|
|
12607
|
+
case 5:
|
|
12589
12608
|
this.filterText = text;
|
|
12590
12609
|
if (!this.collection) {
|
|
12610
|
+
this._changeDetector.detectChanges();
|
|
12611
|
+
this.isLoading = false;
|
|
12591
12612
|
return [2 /*return*/, []];
|
|
12592
12613
|
}
|
|
12593
12614
|
filterText = (_a = this.filterText) === null || _a === void 0 ? void 0 : _a.toString().toLowerCase();
|
|
@@ -12604,6 +12625,8 @@
|
|
|
12604
12625
|
return true;
|
|
12605
12626
|
}
|
|
12606
12627
|
});
|
|
12628
|
+
this.isLoading = false;
|
|
12629
|
+
this._changeDetector.detectChanges();
|
|
12607
12630
|
return [2 /*return*/];
|
|
12608
12631
|
}
|
|
12609
12632
|
});
|
|
@@ -12921,7 +12944,7 @@
|
|
|
12921
12944
|
FilterItemComponent.decorators = [
|
|
12922
12945
|
{ type: i0.Component, args: [{
|
|
12923
12946
|
selector: "co-filter-item",
|
|
12924
|
-
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 ",
|
|
12947
|
+
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 ",
|
|
12925
12948
|
encapsulation: i0.ViewEncapsulation.None,
|
|
12926
12949
|
changeDetection: i0.ChangeDetectionStrategy.OnPush,
|
|
12927
12950
|
providers: [{
|
|
@@ -12956,7 +12979,7 @@
|
|
|
12956
12979
|
modelChange: [{ type: i0.Output }],
|
|
12957
12980
|
collectionChange: [{ type: i0.Output }],
|
|
12958
12981
|
filterButtonClicked: [{ type: i0.Output }],
|
|
12959
|
-
|
|
12982
|
+
hasClass: [{ type: i0.HostBinding, args: ["class.co-filter-item",] }],
|
|
12960
12983
|
hidden: [{ type: i0.HostBinding, args: ['class.co-hidden',] }]
|
|
12961
12984
|
};
|
|
12962
12985
|
|