@colijnit/corecomponents_v12 12.0.42 → 12.0.43
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 +59 -22
- 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 +59 -28
- package/esm2015/lib/components/filter-item/filter-item.module.js +5 -2
- package/fesm2015/colijnit-corecomponents_v12.js +61 -29
- package/fesm2015/colijnit-corecomponents_v12.js.map +1 -1
- package/lib/components/filter-item/filter-item.component.d.ts +5 -2
- package/lib/components/filter-item/style/_layout.scss +25 -19
- package/lib/components/filter-item/style/_material-definition.scss +1 -1
- package/lib/components/input-radio-button/style/_layout.scss +5 -5
- package/lib/components/input-radio-button/style/_material-definition.scss +6 -6
- package/lib/components/input-radio-button/style/_theme.scss +21 -2
- package/lib/style/_variables.scss +5 -1
- package/package.json +1 -1
|
@@ -10018,12 +10018,12 @@
|
|
|
10018
10018
|
this.customContent = false;
|
|
10019
10019
|
// Set to true to show all results. Set to false to get 'show more' and 'show less' buttons to expand and contract.
|
|
10020
10020
|
this.showAllResults = false;
|
|
10021
|
-
this.
|
|
10021
|
+
this.singleSelect = false;
|
|
10022
|
+
this.searchPlaceholder = 'Search...';
|
|
10022
10023
|
this.showMoreLabel = 'Show more';
|
|
10023
10024
|
this.showLessLabel = 'Show less';
|
|
10024
10025
|
this.noResultsLabel = "No results";
|
|
10025
10026
|
this.collectionChange = new core.EventEmitter();
|
|
10026
|
-
this.filterTextChange = new core.EventEmitter();
|
|
10027
10027
|
this.filteredCollection = [];
|
|
10028
10028
|
this.limitTo = 10;
|
|
10029
10029
|
this.filterText = "";
|
|
@@ -10067,26 +10067,59 @@
|
|
|
10067
10067
|
}
|
|
10068
10068
|
return ((_a = this.filteredCollection) === null || _a === void 0 ? void 0 : _a.length) <= this.limitTo && ((_b = this.filteredCollection) === null || _b === void 0 ? void 0 : _b.length) > this.initialLimit;
|
|
10069
10069
|
};
|
|
10070
|
+
FilterItemComponent.prototype.handleModelChange = function (model) {
|
|
10071
|
+
if (this.singleSelect) {
|
|
10072
|
+
this.collection.forEach(function (m) {
|
|
10073
|
+
if (m.code !== model.code && m.description !== model.description) {
|
|
10074
|
+
m.checked = false;
|
|
10075
|
+
}
|
|
10076
|
+
});
|
|
10077
|
+
}
|
|
10078
|
+
model.checked = !model.checked;
|
|
10079
|
+
this.collectionChange.emit(this.collection);
|
|
10080
|
+
};
|
|
10070
10081
|
// Applies filter to the collection.
|
|
10071
10082
|
FilterItemComponent.prototype.applyFilter = function (text) {
|
|
10072
10083
|
var _a, _b;
|
|
10073
|
-
this
|
|
10074
|
-
|
|
10075
|
-
return
|
|
10076
|
-
|
|
10077
|
-
|
|
10078
|
-
|
|
10079
|
-
|
|
10080
|
-
|
|
10081
|
-
|
|
10082
|
-
|
|
10083
|
-
|
|
10084
|
-
|
|
10085
|
-
|
|
10086
|
-
|
|
10087
|
-
|
|
10088
|
-
|
|
10089
|
-
|
|
10084
|
+
return __awaiter(this, void 0, void 0, function () {
|
|
10085
|
+
var _c, filterText, filteredItemCount;
|
|
10086
|
+
return __generator(this, function (_d) {
|
|
10087
|
+
switch (_d.label) {
|
|
10088
|
+
case 0:
|
|
10089
|
+
if (!(!isNaN(this.minSearchCharsToLoadCollection) && this.collectionLoadFn)) return [3 /*break*/, 3];
|
|
10090
|
+
if (!(text.length === this.minSearchCharsToLoadCollection && text.length > this.filterText.length)) return [3 /*break*/, 2];
|
|
10091
|
+
_c = this;
|
|
10092
|
+
return [4 /*yield*/, this.collectionLoadFn(text)];
|
|
10093
|
+
case 1:
|
|
10094
|
+
_c.collection = _d.sent();
|
|
10095
|
+
return [3 /*break*/, 3];
|
|
10096
|
+
case 2:
|
|
10097
|
+
if (text.length < this.minSearchCharsToLoadCollection) {
|
|
10098
|
+
this.collection = undefined;
|
|
10099
|
+
}
|
|
10100
|
+
_d.label = 3;
|
|
10101
|
+
case 3:
|
|
10102
|
+
this.filterText = text;
|
|
10103
|
+
if (!this.collection) {
|
|
10104
|
+
return [2 /*return*/, []];
|
|
10105
|
+
}
|
|
10106
|
+
filterText = (_a = this.filterText) === null || _a === void 0 ? void 0 : _a.toString().toLowerCase();
|
|
10107
|
+
filteredItemCount = 0;
|
|
10108
|
+
this.filteredCollection = (_b = this.collection) === null || _b === void 0 ? void 0 : _b.filter(function (item) {
|
|
10109
|
+
var _a;
|
|
10110
|
+
var labelText = (_a = item.description) === null || _a === void 0 ? void 0 : _a.toString().toLowerCase();
|
|
10111
|
+
var isHiddenByFilter = ((labelText === null || labelText === void 0 ? void 0 : labelText.indexOf(filterText)) === -1);
|
|
10112
|
+
if (isHiddenByFilter) {
|
|
10113
|
+
return false;
|
|
10114
|
+
}
|
|
10115
|
+
else {
|
|
10116
|
+
filteredItemCount++;
|
|
10117
|
+
return true;
|
|
10118
|
+
}
|
|
10119
|
+
});
|
|
10120
|
+
return [2 /*return*/];
|
|
10121
|
+
}
|
|
10122
|
+
});
|
|
10090
10123
|
});
|
|
10091
10124
|
};
|
|
10092
10125
|
return FilterItemComponent;
|
|
@@ -10094,7 +10127,7 @@
|
|
|
10094
10127
|
FilterItemComponent.decorators = [
|
|
10095
10128
|
{ type: core.Component, args: [{
|
|
10096
10129
|
selector: "co-filter-item",
|
|
10097
|
-
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 >\n <div class=\"co-filter-item-collapsable-content\">\n <div class=\"co-filter-item-custom-content\" *ngIf=\"customContent; else collectionContent\">\n <ng-content></ng-content>\n </div>\n <ng-template #collectionContent>\n <div class=\"co-filter-item-collection-content\">\n <co-input-text\n *ngIf=\"collection?.length > 10\"\n [placeholder]=\"searchPlaceholder\"\n [
|
|
10130
|
+
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 >\n <div class=\"co-filter-item-collapsable-content\">\n <div class=\"co-filter-item-custom-content\" *ngIf=\"customContent; else collectionContent\">\n <ng-content></ng-content>\n </div>\n <ng-template #collectionContent>\n <div class=\"co-filter-item-collection-content\">\n <co-input-text\n *ngIf=\"collection?.length > 10 || minSearchCharsToLoadCollection\"\n [placeholder]=\"searchPlaceholder\"\n [model]=\"filterText\"\n (modelChange)=\"applyFilter($event)\"\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=\"!singleSelect\"\n [label]=\"option.description\"\n [model]=\"option.checked\"\n (modelChange)=\"handleModelChange(option)\"\n ></co-input-checkbox>\n <co-input-radio-button *ngIf=\"singleSelect\"\n [name]=\"'radiogroup'\"\n [label]=\"option.description\"\n [model]=\"option.checked\"\n (modelChange)=\"handleModelChange(option)\"\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 </ng-template>\n </div>\n </co-collapsible>\n </div>\n\n ",
|
|
10098
10131
|
encapsulation: core.ViewEncapsulation.None
|
|
10099
10132
|
},] }
|
|
10100
10133
|
];
|
|
@@ -10106,14 +10139,16 @@
|
|
|
10106
10139
|
placeholder: [{ type: core.Input }],
|
|
10107
10140
|
initialLimit: [{ type: core.Input }],
|
|
10108
10141
|
expanded: [{ type: core.Input }],
|
|
10142
|
+
minSearchCharsToLoadCollection: [{ type: core.Input }],
|
|
10143
|
+
collectionLoadFn: [{ type: core.Input }],
|
|
10109
10144
|
customContent: [{ type: core.Input }],
|
|
10110
10145
|
showAllResults: [{ type: core.Input }],
|
|
10146
|
+
singleSelect: [{ type: core.Input }],
|
|
10111
10147
|
searchPlaceholder: [{ type: core.Input }],
|
|
10112
10148
|
showMoreLabel: [{ type: core.Input }],
|
|
10113
10149
|
showLessLabel: [{ type: core.Input }],
|
|
10114
10150
|
noResultsLabel: [{ type: core.Input }],
|
|
10115
10151
|
collectionChange: [{ type: core.Output }],
|
|
10116
|
-
filterTextChange: [{ type: core.Output }],
|
|
10117
10152
|
showClass: [{ type: core.HostBinding, args: ["class.co-filter-item",] }]
|
|
10118
10153
|
};
|
|
10119
10154
|
|
|
@@ -10168,7 +10203,9 @@
|
|
|
10168
10203
|
IconModule,
|
|
10169
10204
|
scrolling.ScrollingModule,
|
|
10170
10205
|
AppendPipeModule,
|
|
10171
|
-
PrependPipeModule
|
|
10206
|
+
PrependPipeModule,
|
|
10207
|
+
InputTextModule,
|
|
10208
|
+
InputRadioButtonModule
|
|
10172
10209
|
],
|
|
10173
10210
|
declarations: [
|
|
10174
10211
|
FilterItemComponent
|