@colijnit/corecomponents_v12 257.1.17 → 257.1.19
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 +98 -31
- package/bundles/colijnit-corecomponents_v12.umd.js.map +1 -1
- package/colijnit-corecomponents_v12-257.1.18.tgz +0 -0
- package/colijnit-corecomponents_v12.metadata.json +1 -1
- package/esm2015/lib/components/filter-item/filter-item.component.js +14 -3
- package/esm2015/lib/components/input-date-picker/input-date-picker.component.js +24 -2
- package/esm2015/lib/components/input-date-range-picker/input-date-range-picker.component.js +69 -30
- package/fesm2015/colijnit-corecomponents_v12.js +103 -31
- package/fesm2015/colijnit-corecomponents_v12.js.map +1 -1
- package/lib/components/calendar/style/_layout.scss +14 -14
- package/lib/components/calendar/style/_material-definition.scss +3 -3
- package/lib/components/filter-item/filter-item.component.d.ts +2 -0
- package/lib/components/input-date-picker/input-date-picker.component.d.ts +3 -0
- package/lib/components/input-date-range-picker/input-date-range-picker.component.d.ts +6 -0
- package/package.json +1 -1
|
@@ -5979,6 +5979,27 @@
|
|
|
5979
5979
|
this.overlayService.removeComponent(this._calendarComponentRef);
|
|
5980
5980
|
}
|
|
5981
5981
|
};
|
|
5982
|
+
InputDatePickerComponent.prototype.finalizeDate = function () {
|
|
5983
|
+
if (this.isValidDateString(this.modelAsString)) {
|
|
5984
|
+
var _b = __read(this.modelAsString.split('-').map(Number), 3), year = _b[0], month = _b[1], day = _b[2];
|
|
5985
|
+
var date = new Date(year, month - 1, day);
|
|
5986
|
+
this.setModel(date);
|
|
5987
|
+
}
|
|
5988
|
+
};
|
|
5989
|
+
InputDatePickerComponent.prototype.finalize = function () {
|
|
5990
|
+
var _a;
|
|
5991
|
+
(_a = this.finalizeDate) === null || _a === void 0 ? void 0 : _a.call(this); // re-use the same logic from (keyup.enter)
|
|
5992
|
+
};
|
|
5993
|
+
InputDatePickerComponent.prototype.isValidDateString = function (value) {
|
|
5994
|
+
var regex = /^\d{4}-\d{2}-\d{2}$/;
|
|
5995
|
+
if (!regex.test(value))
|
|
5996
|
+
return false;
|
|
5997
|
+
var _b = __read(value.split('-').map(Number), 3), year = _b[0], month = _b[1], day = _b[2];
|
|
5998
|
+
var date = new Date(year, month - 1, day);
|
|
5999
|
+
return (date.getFullYear() === year &&
|
|
6000
|
+
date.getMonth() === month - 1 &&
|
|
6001
|
+
date.getDate() === day);
|
|
6002
|
+
};
|
|
5982
6003
|
InputDatePickerComponent.prototype.handleDateChange = function (value) {
|
|
5983
6004
|
if (value) {
|
|
5984
6005
|
this.setModel(new Date(value));
|
|
@@ -6006,7 +6027,7 @@
|
|
|
6006
6027
|
InputDatePickerComponent.decorators = [
|
|
6007
6028
|
{ type: i0.Component, args: [{
|
|
6008
6029
|
selector: 'co-input-date',
|
|
6009
|
-
template: "\n <co-input-text (clickOutside)=\"toggleCalendar(false)\" overlayParent #parentForOverlay=\"overlayParent\"\n [hidden]=\"hidden\"\n [readonly]=\"readonly\"\n [(model)]=\"modelAsString\"\n [rightIcon]=\"rightIcon\"\n [leftIcon]=\"leftIcon\"\n [leftIconData]=\"leftIconData\"\n [pattern]=\"'yyyy-MM-dd'\"\n [type]=\"'date'\"\n [placeholder]=\"placeholder\"\n (leftIconClick)=\"leftIconClick.emit($event)\"\n (rightIconClick)=\"toggleCalendar(true)\"\n (
|
|
6030
|
+
template: "\n <co-input-text (clickOutside)=\"toggleCalendar(false)\" overlayParent #parentForOverlay=\"overlayParent\"\n [hidden]=\"hidden\"\n [readonly]=\"readonly\"\n [(model)]=\"modelAsString\"\n [rightIcon]=\"rightIcon\"\n [leftIcon]=\"leftIcon\"\n [leftIconData]=\"leftIconData\"\n [pattern]=\"'yyyy-MM-dd'\"\n [type]=\"'date'\"\n [placeholder]=\"placeholder\"\n (leftIconClick)=\"leftIconClick.emit($event)\"\n (rightIconClick)=\"toggleCalendar(true)\"\n (modelChange)=\"modelAsString = $event\"\n (clearIconClick)=\"handleClearIconClicked()\"\n [emptyPlace]=\"true\"\n (keyup.enter)=\"finalizeDate()\"\n ></co-input-text>\n ",
|
|
6010
6031
|
providers: [
|
|
6011
6032
|
OverlayService, {
|
|
6012
6033
|
provide: SCREEN_CONFIG_ADAPTER_COMPONENT_INTERFACE_NAME, useExisting: i0.forwardRef(function () { return InputDatePickerComponent; })
|
|
@@ -7396,7 +7417,10 @@
|
|
|
7396
7417
|
var InputDateRangePickerComponent = /** @class */ (function (_super) {
|
|
7397
7418
|
__extends(InputDateRangePickerComponent, _super);
|
|
7398
7419
|
function InputDateRangePickerComponent() {
|
|
7399
|
-
|
|
7420
|
+
var _this = _super.apply(this, __spreadArray([], __read(arguments))) || this;
|
|
7421
|
+
_this.EARLIEST_DATE = new Date(1900, 0, 1); // 1900-01-01
|
|
7422
|
+
_this.LATEST_DATE = new Date(2100, 11, 31); // 2100-12-31
|
|
7423
|
+
return _this;
|
|
7400
7424
|
}
|
|
7401
7425
|
InputDateRangePickerComponent.prototype.showClass = function () {
|
|
7402
7426
|
return true;
|
|
@@ -7439,50 +7463,84 @@
|
|
|
7439
7463
|
}
|
|
7440
7464
|
};
|
|
7441
7465
|
InputDateRangePickerComponent.prototype.handleFirstDateChanged = function (value) {
|
|
7442
|
-
|
|
7443
|
-
|
|
7444
|
-
|
|
7466
|
+
var _this = this;
|
|
7467
|
+
setTimeout(function () {
|
|
7468
|
+
var _a, _b;
|
|
7469
|
+
if (_this.isValidDateString(value)) {
|
|
7470
|
+
var _c = __read(value.split('-').map(Number), 3), year = _c[0], month = _c[1], day = _c[2];
|
|
7471
|
+
var date = new Date(year, month - 1, day);
|
|
7472
|
+
if (!_this.model)
|
|
7473
|
+
_this.setModel([]);
|
|
7474
|
+
_this.setModel([date, (_b = (_a = _this.model) === null || _a === void 0 ? void 0 : _a[1]) !== null && _b !== void 0 ? _b : null]);
|
|
7445
7475
|
}
|
|
7446
|
-
|
|
7447
|
-
}
|
|
7476
|
+
});
|
|
7448
7477
|
};
|
|
7449
7478
|
InputDateRangePickerComponent.prototype.handleSecondDateChanged = function (value) {
|
|
7450
|
-
|
|
7451
|
-
|
|
7452
|
-
|
|
7479
|
+
var _this = this;
|
|
7480
|
+
setTimeout(function () {
|
|
7481
|
+
var _a, _b;
|
|
7482
|
+
if (_this.isValidDateString(value)) {
|
|
7483
|
+
var _c = __read(value.split('-').map(Number), 3), year = _c[0], month = _c[1], day = _c[2];
|
|
7484
|
+
var date = new Date(year, month - 1, day);
|
|
7485
|
+
if (!_this.model)
|
|
7486
|
+
_this.setModel([]);
|
|
7487
|
+
_this.setModel([(_b = (_a = _this.model) === null || _a === void 0 ? void 0 : _a[0]) !== null && _b !== void 0 ? _b : null, date]);
|
|
7453
7488
|
}
|
|
7454
|
-
|
|
7489
|
+
});
|
|
7490
|
+
};
|
|
7491
|
+
InputDateRangePickerComponent.prototype.finalizeDates = function () {
|
|
7492
|
+
var startDate = this.EARLIEST_DATE;
|
|
7493
|
+
var endDate = this.LATEST_DATE;
|
|
7494
|
+
if (this.isValidDateString(this.firstDateAsString)) {
|
|
7495
|
+
var _c = __read(this.firstDateAsString.split('-').map(Number), 3), y = _c[0], m = _c[1], d = _c[2];
|
|
7496
|
+
startDate = new Date(y, m - 1, d);
|
|
7497
|
+
}
|
|
7498
|
+
if (this.isValidDateString(this.secondDateAsString)) {
|
|
7499
|
+
var _d = __read(this.secondDateAsString.split('-').map(Number), 3), y = _d[0], m = _d[1], d = _d[2];
|
|
7500
|
+
endDate = new Date(y, m - 1, d);
|
|
7455
7501
|
}
|
|
7502
|
+
this.setModel([startDate, endDate]);
|
|
7503
|
+
};
|
|
7504
|
+
InputDateRangePickerComponent.prototype.finalize = function () {
|
|
7505
|
+
var _a;
|
|
7506
|
+
(_a = this.finalizeDates) === null || _a === void 0 ? void 0 : _a.call(this);
|
|
7507
|
+
};
|
|
7508
|
+
InputDateRangePickerComponent.prototype.isValidDateString = function (value) {
|
|
7509
|
+
var regex = /^\d{4}-\d{2}-\d{2}$/;
|
|
7510
|
+
if (!regex.test(value))
|
|
7511
|
+
return false;
|
|
7512
|
+
var _c = __read(value.split('-'), 3), yearStr = _c[0], monthStr = _c[1], dayStr = _c[2];
|
|
7513
|
+
var _d = __read([Number(yearStr), Number(monthStr), Number(dayStr)], 3), year = _d[0], month = _d[1], day = _d[2];
|
|
7514
|
+
// Prevent ancient years or too-far future
|
|
7515
|
+
if (year < 1900 || year > 2100)
|
|
7516
|
+
return false;
|
|
7517
|
+
var date = new Date(year, month - 1, day);
|
|
7518
|
+
return (date.getFullYear() === year &&
|
|
7519
|
+
date.getMonth() === month - 1 &&
|
|
7520
|
+
date.getDate() === day);
|
|
7456
7521
|
};
|
|
7457
7522
|
InputDateRangePickerComponent.prototype.modelSet = function () {
|
|
7458
7523
|
this.setModelAsString();
|
|
7459
7524
|
};
|
|
7460
7525
|
InputDateRangePickerComponent.prototype.setModelAsString = function () {
|
|
7461
|
-
|
|
7462
|
-
|
|
7463
|
-
|
|
7464
|
-
|
|
7465
|
-
|
|
7466
|
-
|
|
7467
|
-
|
|
7468
|
-
|
|
7469
|
-
}
|
|
7470
|
-
|
|
7471
|
-
|
|
7472
|
-
var month = this.model[1].toLocaleString("default", { month: "2-digit" });
|
|
7473
|
-
var day = this.model[1].toLocaleString("default", { day: "2-digit" });
|
|
7474
|
-
this.secondDateAsString = year + "-" + month + "-" + day;
|
|
7475
|
-
}
|
|
7476
|
-
else {
|
|
7477
|
-
this.secondDateAsString = "";
|
|
7478
|
-
}
|
|
7526
|
+
var _a, _b;
|
|
7527
|
+
var isStartDefault = ((_a = this.model[0]) === null || _a === void 0 ? void 0 : _a.getTime()) === this.EARLIEST_DATE.getTime();
|
|
7528
|
+
var isEndDefault = ((_b = this.model[1]) === null || _b === void 0 ? void 0 : _b.getTime()) === this.LATEST_DATE.getTime();
|
|
7529
|
+
this.firstDateAsString = (!this.model[0] || isStartDefault) ? '' : this.formatDate(this.model[0]);
|
|
7530
|
+
this.secondDateAsString = (!this.model[1] || isEndDefault) ? '' : this.formatDate(this.model[1]);
|
|
7531
|
+
};
|
|
7532
|
+
InputDateRangePickerComponent.prototype.formatDate = function (date) {
|
|
7533
|
+
var year = date.toLocaleString("default", { year: "numeric" });
|
|
7534
|
+
var month = date.toLocaleString("default", { month: "2-digit" });
|
|
7535
|
+
var day = date.toLocaleString("default", { day: "2-digit" });
|
|
7536
|
+
return year + "-" + month + "-" + day;
|
|
7479
7537
|
};
|
|
7480
7538
|
return InputDateRangePickerComponent;
|
|
7481
7539
|
}(BaseInputDatePickerDirective));
|
|
7482
7540
|
InputDateRangePickerComponent.decorators = [
|
|
7483
7541
|
{ type: i0.Component, args: [{
|
|
7484
7542
|
selector: 'co-input-date-range',
|
|
7485
|
-
template: "\n <div class=\"inputs-wrapper\" overlayParent #parentForOverlay=\"overlayParent\">\n <co-input-text #firstInput class=\"no-focus-line custom-height\"\n [(model)]=\"firstDateAsString\"\n [noClickFocus]=\"true\"\n [pattern]=\"'yyyy-MM-dd'\"\n [type]=\"'date'\"\n [leftIcon]=\"leftIcon\"\n [leftIconData]=\"leftIconData\"\n [placeholder]=\"placeholder\"\n (
|
|
7543
|
+
template: "\n <div class=\"inputs-wrapper\" overlayParent #parentForOverlay=\"overlayParent\">\n <co-input-text #firstInput class=\"no-focus-line custom-height\"\n [(model)]=\"firstDateAsString\"\n [noClickFocus]=\"true\"\n [pattern]=\"'yyyy-MM-dd'\"\n [type]=\"'date'\"\n [leftIcon]=\"leftIcon\"\n [leftIconData]=\"leftIconData\"\n [placeholder]=\"placeholder\"\n (modelChange)=\"handleFirstDateChanged(firstDateAsString)\"\n (clearIconClick)=\"clearDate(0)\"\n (click)=\"handleFirstInputClick($event)\"\n [emptyPlace]=\"true\"\n (keyup.enter)=\"finalizeDates()\"\n ></co-input-text>\n <co-input-text #secondInput class=\"no-focus-line custom-height\"\n [(model)]= \"secondDateAsString\"\n [noClickFocus]=\"true\"\n [pattern]=\"'yyyy-MM-dd'\"\n [type]=\"'date'\"\n [rightIcon]=\"rightIcon\"\n (rightIconClick)=\"toggleCalendar()\"\n (modelChange)=\"handleSecondDateChanged(secondDateAsString)\"\n (clearIconClick)=\"clearDate(1)\"\n (click)=\"handleSecondInputClick($event)\"\n [emptyPlace]=\"true\"\n (keyup.enter)=\"finalizeDates()\"\n ></co-input-text>\n </div>\n ",
|
|
7486
7544
|
providers: [
|
|
7487
7545
|
OverlayService,
|
|
7488
7546
|
{
|
|
@@ -12644,6 +12702,13 @@
|
|
|
12644
12702
|
});
|
|
12645
12703
|
};
|
|
12646
12704
|
FilterItemComponent.prototype.onButtonClicked = function () {
|
|
12705
|
+
var _a, _b;
|
|
12706
|
+
if ((_a = this.dateInput) === null || _a === void 0 ? void 0 : _a.finalize) {
|
|
12707
|
+
this.dateInput.finalize();
|
|
12708
|
+
}
|
|
12709
|
+
if ((_b = this.dateRangeInput) === null || _b === void 0 ? void 0 : _b.finalize) {
|
|
12710
|
+
this.dateRangeInput.finalize();
|
|
12711
|
+
}
|
|
12647
12712
|
this.filterButtonClicked.emit();
|
|
12648
12713
|
};
|
|
12649
12714
|
FilterItemComponent.prototype.uncheckForSingleSelect = function (model) {
|
|
@@ -12955,7 +13020,7 @@
|
|
|
12955
13020
|
FilterItemComponent.decorators = [
|
|
12956
13021
|
{ type: i0.Component, args: [{
|
|
12957
13022
|
selector: "co-filter-item",
|
|
12958
|
-
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 ",
|
|
13023
|
+
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 #dateInput\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 #dateRangeInput\n [model]=\"[dateRangeStart, dateRangeEnd]\"\n (modelChange)=\"handleModelChange($event)\"\n [placeholder]=\"'Kies datum' | coreLocalize\">\n </co-input-date-range>\n </div>\n </ng-template>\n </div>\n </co-collapsible>\n </div>\n\n ",
|
|
12959
13024
|
encapsulation: i0.ViewEncapsulation.None,
|
|
12960
13025
|
changeDetection: i0.ChangeDetectionStrategy.OnPush,
|
|
12961
13026
|
providers: [{
|
|
@@ -12991,6 +13056,8 @@
|
|
|
12991
13056
|
collectionChange: [{ type: i0.Output }],
|
|
12992
13057
|
filterButtonClicked: [{ type: i0.Output }],
|
|
12993
13058
|
hasClass: [{ type: i0.HostBinding, args: ["class.co-filter-item",] }],
|
|
13059
|
+
dateInput: [{ type: i0.ViewChild, args: ['dateInput',] }],
|
|
13060
|
+
dateRangeInput: [{ type: i0.ViewChild, args: ['dateRangeInput',] }],
|
|
12994
13061
|
hidden: [{ type: i0.HostBinding, args: ['class.co-hidden',] }]
|
|
12995
13062
|
};
|
|
12996
13063
|
|