@colijnit/corecomponents_v12 12.0.34 → 12.0.35
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 +21 -21
- 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 +28 -26
- package/esm2015/lib/components/filter-item/filter-item.module.js +5 -5
- package/esm2015/lib/core/interface/filter-item-viewmodel.js +1 -1
- package/fesm2015/colijnit-corecomponents_v12.js +27 -25
- package/fesm2015/colijnit-corecomponents_v12.js.map +1 -1
- package/lib/components/filter-item/filter-item.component.d.ts +8 -12
- package/lib/components/filter-item/style/_layout.scss +9 -3
- package/lib/components/filter-item/style/_material-definition.scss +8 -1
- package/lib/core/interface/filter-item-viewmodel.d.ts +1 -1
- package/package.json +1 -1
- package/esm2015/lib/core/interface/filter-viewmodel.js +0 -2
- package/lib/core/interface/filter-viewmodel.d.ts +0 -4
|
@@ -9842,38 +9842,41 @@
|
|
|
9842
9842
|
this.expanded = false;
|
|
9843
9843
|
// Set to false to use filter item with a multi selectable collection. Set to true to specify custom content
|
|
9844
9844
|
this.customContent = false;
|
|
9845
|
-
// Set to true to show filter input field.
|
|
9846
|
-
this.searchable = true;
|
|
9847
9845
|
// Set to true to show all results. Set to false to get 'show more' and 'show less' buttons to expand and contract.
|
|
9848
9846
|
this.showAllResults = false;
|
|
9849
9847
|
this.searchPlaceholder = "Search...";
|
|
9850
9848
|
this.showMoreLabel = 'Show more';
|
|
9851
9849
|
this.showLessLabel = 'Show less';
|
|
9852
9850
|
this.noResultsLabel = "No results";
|
|
9853
|
-
this.
|
|
9854
|
-
this.filteredCollection =
|
|
9851
|
+
this.collectionChange = new core.EventEmitter();
|
|
9852
|
+
this.filteredCollection = [];
|
|
9855
9853
|
this.limitTo = 10;
|
|
9856
9854
|
this.filterText = "";
|
|
9857
|
-
this.
|
|
9855
|
+
this.searchable = true;
|
|
9856
|
+
this._collection = [];
|
|
9858
9857
|
}
|
|
9859
9858
|
Object.defineProperty(FilterItemComponent.prototype, "collection", {
|
|
9860
9859
|
get: function () {
|
|
9861
9860
|
return this._collection;
|
|
9862
9861
|
},
|
|
9863
9862
|
set: function (value) {
|
|
9864
|
-
var _a
|
|
9863
|
+
var _a;
|
|
9865
9864
|
this._collection = value;
|
|
9866
|
-
this.filteredCollection
|
|
9865
|
+
this.filteredCollection = (_a = this._collection) === null || _a === void 0 ? void 0 : _a.slice();
|
|
9867
9866
|
},
|
|
9868
9867
|
enumerable: false,
|
|
9869
9868
|
configurable: true
|
|
9870
9869
|
});
|
|
9871
|
-
// output bij: filtertext, kan gebruikt worden voor wanneer collectie opgehaald wordt
|
|
9872
9870
|
FilterItemComponent.prototype.showClass = function () {
|
|
9873
9871
|
return true;
|
|
9874
9872
|
};
|
|
9875
9873
|
FilterItemComponent.prototype.ngOnInit = function () {
|
|
9876
9874
|
this.setToInitialLimit();
|
|
9875
|
+
this.setSearchable();
|
|
9876
|
+
};
|
|
9877
|
+
FilterItemComponent.prototype.setSearchable = function () {
|
|
9878
|
+
var _a;
|
|
9879
|
+
this.searchable = ((_a = this.collection) === null || _a === void 0 ? void 0 : _a.length) > 10;
|
|
9877
9880
|
};
|
|
9878
9881
|
FilterItemComponent.prototype.setToInitialLimit = function () {
|
|
9879
9882
|
this.limitTo = this.initialLimit;
|
|
@@ -9882,32 +9885,31 @@
|
|
|
9882
9885
|
this.limitTo += 10;
|
|
9883
9886
|
};
|
|
9884
9887
|
FilterItemComponent.prototype.moreToShow = function () {
|
|
9885
|
-
var _a
|
|
9888
|
+
var _a;
|
|
9886
9889
|
if (this.showAllResults) {
|
|
9887
9890
|
return false;
|
|
9888
9891
|
}
|
|
9889
|
-
return ((
|
|
9892
|
+
return ((_a = this.filteredCollection) === null || _a === void 0 ? void 0 : _a.length) > this.limitTo;
|
|
9890
9893
|
};
|
|
9891
9894
|
FilterItemComponent.prototype.lessToShow = function () {
|
|
9892
|
-
var _a, _b
|
|
9895
|
+
var _a, _b;
|
|
9893
9896
|
if (this.showAllResults) {
|
|
9894
9897
|
return false;
|
|
9895
9898
|
}
|
|
9896
|
-
return ((
|
|
9899
|
+
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;
|
|
9897
9900
|
};
|
|
9898
9901
|
// Applies filter to the collection.
|
|
9899
9902
|
FilterItemComponent.prototype.applyFilter = function (text) {
|
|
9900
|
-
var _this = this;
|
|
9901
9903
|
var _a, _b;
|
|
9902
9904
|
if (!this.collection) {
|
|
9903
|
-
return
|
|
9905
|
+
return [];
|
|
9904
9906
|
}
|
|
9905
9907
|
var filterText = (_a = this.filterText) === null || _a === void 0 ? void 0 : _a.toString().toLowerCase();
|
|
9906
9908
|
var filteredItemCount = 0;
|
|
9907
|
-
this.filteredCollection
|
|
9909
|
+
this.filteredCollection = (_b = this.collection) === null || _b === void 0 ? void 0 : _b.filter(function (item) {
|
|
9908
9910
|
var _a;
|
|
9909
|
-
var labelText = (_a = item
|
|
9910
|
-
var isHiddenByFilter = (labelText.indexOf(filterText) === -1);
|
|
9911
|
+
var labelText = (_a = item.description) === null || _a === void 0 ? void 0 : _a.toString().toLowerCase();
|
|
9912
|
+
var isHiddenByFilter = ((labelText === null || labelText === void 0 ? void 0 : labelText.indexOf(filterText)) === -1);
|
|
9911
9913
|
if (isHiddenByFilter) {
|
|
9912
9914
|
return false;
|
|
9913
9915
|
}
|
|
@@ -9922,7 +9924,7 @@
|
|
|
9922
9924
|
FilterItemComponent.decorators = [
|
|
9923
9925
|
{ type: core.Component, args: [{
|
|
9924
9926
|
selector: "co-filter-item",
|
|
9925
|
-
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=\"searchable\"\n [placeholder]=\"searchPlaceholder\"\n [(model)]=\"filterText\"\n (modelChange)=\"applyFilter($event)\"\n >\n </co-input-text>\n <div class=\"no-results\" *ngIf=\"filteredCollection?.
|
|
9927
|
+
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=\"searchable\"\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 <div class=\"co-filter-item-collection-result-items\"\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 [label]=\"option.description\"\n [(model)]=\"option.checked\"\n (modelChange)=\"collectionChange.emit(collection)\"\n ></co-input-checkbox>\n <div class=\"co-filter-item-amount\" *ngIf=\"option.count\"\n [textContent]=\"option.count.toString() | append: ')' | prepend: ' ('\"\n ></div>\n </div>\n\n </div>\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 ",
|
|
9926
9928
|
encapsulation: core.ViewEncapsulation.None
|
|
9927
9929
|
},] }
|
|
9928
9930
|
];
|
|
@@ -9931,18 +9933,16 @@
|
|
|
9931
9933
|
]; };
|
|
9932
9934
|
FilterItemComponent.propDecorators = {
|
|
9933
9935
|
collection: [{ type: core.Input }],
|
|
9934
|
-
fields: [{ type: core.Input }],
|
|
9935
9936
|
placeholder: [{ type: core.Input }],
|
|
9936
9937
|
initialLimit: [{ type: core.Input }],
|
|
9937
9938
|
expanded: [{ type: core.Input }],
|
|
9938
9939
|
customContent: [{ type: core.Input }],
|
|
9939
|
-
searchable: [{ type: core.Input }],
|
|
9940
9940
|
showAllResults: [{ type: core.Input }],
|
|
9941
9941
|
searchPlaceholder: [{ type: core.Input }],
|
|
9942
9942
|
showMoreLabel: [{ type: core.Input }],
|
|
9943
9943
|
showLessLabel: [{ type: core.Input }],
|
|
9944
9944
|
noResultsLabel: [{ type: core.Input }],
|
|
9945
|
-
|
|
9945
|
+
collectionChange: [{ type: core.Output }],
|
|
9946
9946
|
showClass: [{ type: core.HostBinding, args: ["class.co-filter-item",] }]
|
|
9947
9947
|
};
|
|
9948
9948
|
|