@colijnit/corecomponents_v12 256.1.16 → 256.1.18
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 +33 -15
- package/fesm2015/colijnit-corecomponents_v12.js +32 -14
- 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 +31 -0
- package/lib/components/input-text/style/_layout.scss +2 -1
- package/package.json +1 -1
|
@@ -12422,6 +12422,7 @@
|
|
|
12422
12422
|
this.limitTo = 10;
|
|
12423
12423
|
this.filterText = "";
|
|
12424
12424
|
this.showButton = false;
|
|
12425
|
+
this.isLoading = false;
|
|
12425
12426
|
this._collection = [];
|
|
12426
12427
|
this._mode = this.modes.Filterlist;
|
|
12427
12428
|
}
|
|
@@ -12472,6 +12473,13 @@
|
|
|
12472
12473
|
enumerable: false,
|
|
12473
12474
|
configurable: true
|
|
12474
12475
|
});
|
|
12476
|
+
Object.defineProperty(FilterItemComponent.prototype, "hasClass", {
|
|
12477
|
+
get: function () {
|
|
12478
|
+
return true; // Ensures it never gets removed
|
|
12479
|
+
},
|
|
12480
|
+
enumerable: false,
|
|
12481
|
+
configurable: true
|
|
12482
|
+
});
|
|
12475
12483
|
FilterItemComponent.prototype.ngOnInit = function () {
|
|
12476
12484
|
this.setToInitialLimit();
|
|
12477
12485
|
this.showButton = this.valueSelected();
|
|
@@ -12560,6 +12568,14 @@
|
|
|
12560
12568
|
}
|
|
12561
12569
|
return false;
|
|
12562
12570
|
};
|
|
12571
|
+
FilterItemComponent.prototype.onModelChange = function (text) {
|
|
12572
|
+
var _this = this;
|
|
12573
|
+
this.isLoading = true;
|
|
12574
|
+
clearTimeout(this.debounceTimeout);
|
|
12575
|
+
this.debounceTimeout = setTimeout(function () {
|
|
12576
|
+
_this.applyFilter(text);
|
|
12577
|
+
}, 300);
|
|
12578
|
+
};
|
|
12563
12579
|
// Applies filter to the collection.
|
|
12564
12580
|
FilterItemComponent.prototype.applyFilter = function (text) {
|
|
12565
12581
|
var _a, _b;
|
|
@@ -12568,21 +12584,26 @@
|
|
|
12568
12584
|
return __generator(this, function (_d) {
|
|
12569
12585
|
switch (_d.label) {
|
|
12570
12586
|
case 0:
|
|
12571
|
-
if (
|
|
12572
|
-
if (!(text.length
|
|
12587
|
+
if (!!isNaN(this.minSearchCharsToLoadCollection)) return [3 /*break*/, 5];
|
|
12588
|
+
if (!(text.length < this.minSearchCharsToLoadCollection)) return [3 /*break*/, 2];
|
|
12589
|
+
return [4 /*yield*/, new Promise(function (resolve) { return setTimeout(resolve, 300); })];
|
|
12590
|
+
case 1:
|
|
12591
|
+
_d.sent();
|
|
12592
|
+
this.collection = undefined;
|
|
12593
|
+
return [3 /*break*/, 5];
|
|
12594
|
+
case 2: return [4 /*yield*/, new Promise(function (resolve) { return setTimeout(resolve, 300); })];
|
|
12595
|
+
case 3:
|
|
12596
|
+
_d.sent();
|
|
12573
12597
|
_c = this;
|
|
12574
12598
|
return [4 /*yield*/, this.collectionLoadFn(text)];
|
|
12575
|
-
case
|
|
12599
|
+
case 4:
|
|
12576
12600
|
_c.collection = _d.sent();
|
|
12577
|
-
|
|
12578
|
-
case
|
|
12579
|
-
if (text.length < this.minSearchCharsToLoadCollection) {
|
|
12580
|
-
this.collection = undefined;
|
|
12581
|
-
}
|
|
12582
|
-
_d.label = 3;
|
|
12583
|
-
case 3:
|
|
12601
|
+
_d.label = 5;
|
|
12602
|
+
case 5:
|
|
12584
12603
|
this.filterText = text;
|
|
12585
12604
|
if (!this.collection) {
|
|
12605
|
+
this._changeDetector.detectChanges();
|
|
12606
|
+
this.isLoading = false;
|
|
12586
12607
|
return [2 /*return*/, []];
|
|
12587
12608
|
}
|
|
12588
12609
|
filterText = (_a = this.filterText) === null || _a === void 0 ? void 0 : _a.toString().toLowerCase();
|
|
@@ -12599,6 +12620,8 @@
|
|
|
12599
12620
|
return true;
|
|
12600
12621
|
}
|
|
12601
12622
|
});
|
|
12623
|
+
this.isLoading = false;
|
|
12624
|
+
this._changeDetector.detectChanges();
|
|
12602
12625
|
return [2 /*return*/];
|
|
12603
12626
|
}
|
|
12604
12627
|
});
|
|
@@ -12916,7 +12939,7 @@
|
|
|
12916
12939
|
FilterItemComponent.decorators = [
|
|
12917
12940
|
{ type: i0.Component, args: [{
|
|
12918
12941
|
selector: "co-filter-item",
|
|
12919
|
-
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 ",
|
|
12942
|
+
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 ",
|
|
12920
12943
|
encapsulation: i0.ViewEncapsulation.None,
|
|
12921
12944
|
changeDetection: i0.ChangeDetectionStrategy.OnPush,
|
|
12922
12945
|
providers: [{
|
|
@@ -12951,7 +12974,7 @@
|
|
|
12951
12974
|
modelChange: [{ type: i0.Output }],
|
|
12952
12975
|
collectionChange: [{ type: i0.Output }],
|
|
12953
12976
|
filterButtonClicked: [{ type: i0.Output }],
|
|
12954
|
-
|
|
12977
|
+
hasClass: [{ type: i0.HostBinding, args: ["class.co-filter-item",] }],
|
|
12955
12978
|
hidden: [{ type: i0.HostBinding, args: ['class.co-hidden',] }]
|
|
12956
12979
|
};
|
|
12957
12980
|
|