@colijnit/corecomponents_v12 259.1.15 → 260.1.0
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 +95 -10
- 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 +4 -3
- package/esm2015/lib/components/input-date-picker/input-date-picker.component.js +5 -2
- package/esm2015/lib/components/input-date-range-picker/input-date-range-picker.component.js +5 -2
- package/esm2015/lib/components/input-text/input-text.component.js +88 -8
- package/esm2015/lib/components/simple-grid/simple-grid.component.js +9 -1
- package/fesm2015/colijnit-corecomponents_v12.js +104 -9
- package/fesm2015/colijnit-corecomponents_v12.js.map +1 -1
- package/lib/components/filter-item/filter-item.component.d.ts +1 -0
- package/lib/components/input-date-picker/input-date-picker.component.d.ts +1 -0
- package/lib/components/input-date-range-picker/input-date-range-picker.component.d.ts +1 -0
- package/lib/components/input-text/input-text.component.d.ts +5 -1
- package/package.json +2 -2
|
@@ -5966,6 +5966,7 @@
|
|
|
5966
5966
|
_this.formUserChangeListener = formUserChangeListener;
|
|
5967
5967
|
_this.ngZoneWrapper = ngZoneWrapper;
|
|
5968
5968
|
_this.elementRef = elementRef;
|
|
5969
|
+
_this.firstDayOfWeek = '';
|
|
5969
5970
|
_super.prototype._markAsOnPush.call(_this);
|
|
5970
5971
|
return _this;
|
|
5971
5972
|
}
|
|
@@ -6045,7 +6046,7 @@
|
|
|
6045
6046
|
InputDatePickerComponent.decorators = [
|
|
6046
6047
|
{ type: i0.Component, args: [{
|
|
6047
6048
|
selector: 'co-input-date',
|
|
6048
|
-
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 (keydown.enter)=\"finalizeDate()\"\n (keydown.tab)=\"finalizeDate()\"\n (blur)=\"finalizeDate()\"\n ></co-input-text>\n ",
|
|
6049
|
+
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 [firstDayOfWeek]=\"firstDayOfWeek\"\n (keydown.enter)=\"finalizeDate()\"\n (keydown.tab)=\"finalizeDate()\"\n (blur)=\"finalizeDate()\"\n ></co-input-text>\n ",
|
|
6049
6050
|
providers: [
|
|
6050
6051
|
OverlayService, {
|
|
6051
6052
|
provide: SCREEN_CONFIG_ADAPTER_COMPONENT_INTERFACE_NAME, useExisting: i0.forwardRef(function () { return InputDatePickerComponent; })
|
|
@@ -6067,6 +6068,7 @@
|
|
|
6067
6068
|
{ type: i0.ElementRef }
|
|
6068
6069
|
]; };
|
|
6069
6070
|
InputDatePickerComponent.propDecorators = {
|
|
6071
|
+
firstDayOfWeek: [{ type: i0.Input }],
|
|
6070
6072
|
showClass: [{ type: i0.HostBinding, args: ['class.co-input-date',] }]
|
|
6071
6073
|
};
|
|
6072
6074
|
|
|
@@ -6296,6 +6298,7 @@
|
|
|
6296
6298
|
_this.showPlaceholderOnFocus = true;
|
|
6297
6299
|
_this.selectOnFocus = false;
|
|
6298
6300
|
_this.emptyPlace = false;
|
|
6301
|
+
_this.firstDayOfWeek = '1'; // default is sunday ioneJS
|
|
6299
6302
|
_this.noStyle = false;
|
|
6300
6303
|
_this.hideArrowButtons = false;
|
|
6301
6304
|
_this.leftIconClick = new i0.EventEmitter();
|
|
@@ -6308,6 +6311,8 @@
|
|
|
6308
6311
|
_this.isFocused = new i0.EventEmitter();
|
|
6309
6312
|
_this.hasOwnLabel = true;
|
|
6310
6313
|
_this.isFocusedOnDate = false;
|
|
6314
|
+
_this.weekInputBuffer = '';
|
|
6315
|
+
_this.isWeekInputMode = false;
|
|
6311
6316
|
_this._isLeftIconMouseDown = false;
|
|
6312
6317
|
_this._isRightIconMouseDown = false;
|
|
6313
6318
|
_super.prototype._markAsOnPush.call(_this);
|
|
@@ -6380,11 +6385,6 @@
|
|
|
6380
6385
|
enumerable: false,
|
|
6381
6386
|
configurable: true
|
|
6382
6387
|
});
|
|
6383
|
-
// exclude some non-digit characters, since input type 'number' still allows the characters -, + and e
|
|
6384
|
-
InputTextComponent.prototype.excludeNonDigitChars = function (event) {
|
|
6385
|
-
var excludedKeys = this.excludePlusMinus ? ['e', '-', '+'] : ['e'];
|
|
6386
|
-
return !excludedKeys.includes(event.key);
|
|
6387
|
-
};
|
|
6388
6388
|
InputTextComponent.prototype.handleLeftIconClick = function (event) {
|
|
6389
6389
|
event.preventDefault();
|
|
6390
6390
|
event.stopPropagation();
|
|
@@ -6447,12 +6447,93 @@
|
|
|
6447
6447
|
this.setModel(null);
|
|
6448
6448
|
this.clearIconClick.emit(event);
|
|
6449
6449
|
};
|
|
6450
|
+
InputTextComponent.prototype.handleKeyDownInput = function (event) {
|
|
6451
|
+
var key = event.key.toLowerCase();
|
|
6452
|
+
if (this.type === 'date') {
|
|
6453
|
+
if (key === 'w') {
|
|
6454
|
+
event.preventDefault();
|
|
6455
|
+
this.isWeekInputMode = true;
|
|
6456
|
+
this.weekInputBuffer = 'w';
|
|
6457
|
+
this.model = 'w';
|
|
6458
|
+
this.modelChange.emit(this.model);
|
|
6459
|
+
return;
|
|
6460
|
+
}
|
|
6461
|
+
if (this.isWeekInputMode) {
|
|
6462
|
+
if (/^\d$/.test(key)) {
|
|
6463
|
+
event.preventDefault();
|
|
6464
|
+
this.weekInputBuffer += key;
|
|
6465
|
+
this.model = this.weekInputBuffer;
|
|
6466
|
+
this.modelChange.emit(this.model);
|
|
6467
|
+
return;
|
|
6468
|
+
}
|
|
6469
|
+
if (key === 'enter' || key === 'tab') {
|
|
6470
|
+
event.preventDefault();
|
|
6471
|
+
this.convertWeekToDate(this.weekInputBuffer);
|
|
6472
|
+
this.isWeekInputMode = false;
|
|
6473
|
+
this.weekInputBuffer = '';
|
|
6474
|
+
return;
|
|
6475
|
+
}
|
|
6476
|
+
if (!['backspace', 'delete'].includes(key)) {
|
|
6477
|
+
this.isWeekInputMode = false;
|
|
6478
|
+
this.weekInputBuffer = '';
|
|
6479
|
+
}
|
|
6480
|
+
}
|
|
6481
|
+
}
|
|
6482
|
+
/* old excludeCharacter function */
|
|
6483
|
+
if (this.digitsOnly && !this.isWeekInputMode) {
|
|
6484
|
+
var excludedKeys = this.excludePlusMinus ? ['e', '-', '+'] : ['e'];
|
|
6485
|
+
if (excludedKeys.includes(event.key)) {
|
|
6486
|
+
event.preventDefault();
|
|
6487
|
+
}
|
|
6488
|
+
}
|
|
6489
|
+
};
|
|
6490
|
+
InputTextComponent.prototype.convertWeekToDate = function (weekStr) {
|
|
6491
|
+
var match = weekStr.match(/^w0*(\d{1,2})$/i);
|
|
6492
|
+
if (!match)
|
|
6493
|
+
return;
|
|
6494
|
+
var week = parseInt(match[1], 10);
|
|
6495
|
+
if (week < 1 || week > 53)
|
|
6496
|
+
return;
|
|
6497
|
+
var today = new Date();
|
|
6498
|
+
var year = today.getFullYear();
|
|
6499
|
+
// Internal default first day of week
|
|
6500
|
+
var weekdayOffset = parseInt(this.firstDayOfWeek, 10);
|
|
6501
|
+
if (isNaN(weekdayOffset) || weekdayOffset < 1 || weekdayOffset > 7) {
|
|
6502
|
+
weekdayOffset = 2;
|
|
6503
|
+
}
|
|
6504
|
+
// Convert to JS weekday index where 0 = Sunday ... 6 = Saturday
|
|
6505
|
+
var jsWeekdayIndex = (weekdayOffset - 1) % 7;
|
|
6506
|
+
var jan4 = new Date(year, 0, 4);
|
|
6507
|
+
var jan4Day = jan4.getDay();
|
|
6508
|
+
var diffToMonday = (jan4Day + 6) % 7;
|
|
6509
|
+
var firstWeekMonday = new Date(jan4);
|
|
6510
|
+
firstWeekMonday.setDate(jan4.getDate() - diffToMonday); // Monday of week 1
|
|
6511
|
+
var baseWeekStart = new Date(firstWeekMonday);
|
|
6512
|
+
baseWeekStart.setDate(baseWeekStart.getDate() + (week - 1) * 7);
|
|
6513
|
+
var targetDate = new Date(baseWeekStart);
|
|
6514
|
+
targetDate.setDate(baseWeekStart.getDate() + jsWeekdayIndex);
|
|
6515
|
+
if (targetDate < today) {
|
|
6516
|
+
year += 1;
|
|
6517
|
+
var jan4Next = new Date(year, 0, 4);
|
|
6518
|
+
var jan4DayNext = jan4Next.getDay();
|
|
6519
|
+
var diffToMondayNext = (jan4DayNext + 6) % 7;
|
|
6520
|
+
var firstWeekMondayNext = new Date(jan4Next);
|
|
6521
|
+
firstWeekMondayNext.setDate(jan4Next.getDate() - diffToMondayNext);
|
|
6522
|
+
var baseWeekStartNext = new Date(firstWeekMondayNext);
|
|
6523
|
+
baseWeekStartNext.setDate(baseWeekStartNext.getDate() + (week - 1) * 7);
|
|
6524
|
+
targetDate.setFullYear(year);
|
|
6525
|
+
targetDate.setMonth(baseWeekStartNext.getMonth());
|
|
6526
|
+
targetDate.setDate(baseWeekStartNext.getDate() + jsWeekdayIndex);
|
|
6527
|
+
}
|
|
6528
|
+
this.model = targetDate.toISOString().substring(0, 10);
|
|
6529
|
+
this.modelChange.emit(this.model);
|
|
6530
|
+
};
|
|
6450
6531
|
return InputTextComponent;
|
|
6451
6532
|
}(BaseInputComponent));
|
|
6452
6533
|
InputTextComponent.decorators = [
|
|
6453
6534
|
{ type: i0.Component, args: [{
|
|
6454
6535
|
selector: 'co-input-text',
|
|
6455
|
-
template: "\n <div class=\"input-text-wrapper\" overlayParent #parentForOverlay=\"overlayParent\">\n <co-icon *ngIf=\"leftIcon || leftIconData\" class=\"input-text-left-icon\" [icon]=\"leftIcon\" [iconData]=\"leftIconData\"\n (click)=\"handleLeftIconClick($event)\" (mousedown)=\"handleLeftIconMouseDown($event)\"\n (mouseup)=\"handleLeftIconMouseUp($event)\"></co-icon>\n <div *ngIf=\"leftIcon || leftIconData\" class=\"spacer left-icon\"></div>\n <div class=\"input-wrapper\">\n <label *ngIf=\"showPlaceholderOnFocus || (!showPlaceholderOnFocus && !hasValue && !focused)\"\n [textContent]=\"placeholder\"></label>\n <span class=\"input-text-formatted\" *ngIf=\"!focused && !useContent && formatPipe\"\n [class.show]=\"!focused && !useContent && formatPipe\"\n [ngClass]=\"align\"\n [textContent]=\"pipedModel\"\n (click)=\"handleDoFocus($event)\"\n ></span>\n <input [class.show]=\"focused || !formatPipe\" #input\n [class.input-input-hidden]=\"useContent\"\n [ngClass]=\"align\"\n [type]=\"(isFocusedOnDate || (hasValue && emptyPlace)) ? 'date' : (digitsOnly ? 'number' : (type === 'date' ? 'text' : type))\"\n [placeholder]=\"type === 'date' && !isFocusedOnDate ? '' : ''\"\n [pattern]=\"type === 'date' ? pattern : undefined\"\n [ngModel]=\"model\"\n [min]=\"(type === 'number' || type === 'date') && this.min ? this.min : undefined\"\n [max]=\"(type === 'number' || type === 'date') && this.max ? this.max : undefined\"\n [readonly]=\"readonly\"\n [required]=\"required\"\n (ngModelChange)=\"modelChange.emit($event)\"\n (keydown)=\"
|
|
6536
|
+
template: "\n <div class=\"input-text-wrapper\" overlayParent #parentForOverlay=\"overlayParent\">\n <co-icon *ngIf=\"leftIcon || leftIconData\" class=\"input-text-left-icon\" [icon]=\"leftIcon\" [iconData]=\"leftIconData\"\n (click)=\"handleLeftIconClick($event)\" (mousedown)=\"handleLeftIconMouseDown($event)\"\n (mouseup)=\"handleLeftIconMouseUp($event)\"></co-icon>\n <div *ngIf=\"leftIcon || leftIconData\" class=\"spacer left-icon\"></div>\n <div class=\"input-wrapper\">\n <label *ngIf=\"showPlaceholderOnFocus || (!showPlaceholderOnFocus && !hasValue && !focused)\"\n [textContent]=\"placeholder\"></label>\n <span class=\"input-text-formatted\" *ngIf=\"!focused && !useContent && formatPipe\"\n [class.show]=\"!focused && !useContent && formatPipe\"\n [ngClass]=\"align\"\n [textContent]=\"pipedModel\"\n (click)=\"handleDoFocus($event)\"\n ></span>\n <input [class.show]=\"focused || !formatPipe\" #input\n [class.input-input-hidden]=\"useContent\"\n [ngClass]=\"align\"\n [type]=\"isWeekInputMode ? 'text' : (isFocusedOnDate || (hasValue && emptyPlace)) ? 'date' : (digitsOnly ? 'number' : (type === 'date' ? 'text' : type))\"\n [placeholder]=\"type === 'date' && !isFocusedOnDate ? '' : ''\"\n [pattern]=\"type === 'date' ? pattern : undefined\"\n [ngModel]=\"model\"\n [min]=\"(type === 'number' || type === 'date') && this.min ? this.min : undefined\"\n [max]=\"(type === 'number' || type === 'date') && this.max ? this.max : undefined\"\n [readonly]=\"readonly\"\n [required]=\"required\"\n (ngModelChange)=\"modelChange.emit($event)\"\n (keydown)=\"handleKeyDownInput($event)\"\n (keyup)=\"keyUp.emit($event)\"\n (focusin)=\"handleInputFocus($event)\"\n (focusout)=\"handleBlur($event)\"\n >\n <ng-container *ngIf=\"useContent\">\n <div class=\"input-content-wrapper\">\n <ng-content></ng-content>\n </div>\n </ng-container>\n <co-icon [class.show]=\"showClearButton && hasValue && !readonly\" class=\"input-text-clear-button\"\n [icon]=\"icons.CrossSkinny\" (click)=\"clearInput($event)\"></co-icon>\n <div class=\"required-indicator\"></div>\n </div>\n <div *ngIf=\"rightIcon || rightIconData\" class=\"spacer right-icon\"></div>\n <co-icon *ngIf=\"rightIcon || rightIconData\" class=\"input-text-right-icon\" [icon]=\"rightIcon\"\n [iconData]=\"rightIconData\"\n (click)=\"handleRightIconClick($event)\" (mousedown)=\"handleRightIconMouseDown($event)\"\n (mouseup)=\"handleRightIconMouseUp($event)\"></co-icon>\n </div>\n <!--\n <co-commit-buttons *ngIf=\"showSaveCancel && focused && canSaveOrCancel\"\n [committing]=\"committing\"\n [commitFinished]=\"commitFinished\"\n (commitClick)=\"commitClick($event)\"\n (cancelClick)=\"cancelClick($event)\"\n >\n </co-commit-buttons>\n -->\n ",
|
|
6456
6537
|
providers: [
|
|
6457
6538
|
OverlayService, {
|
|
6458
6539
|
provide: SCREEN_CONFIG_ADAPTER_COMPONENT_INTERFACE_NAME,
|
|
@@ -6495,6 +6576,7 @@
|
|
|
6495
6576
|
rightIconData: [{ type: i0.Input }],
|
|
6496
6577
|
selectOnFocus: [{ type: i0.Input }],
|
|
6497
6578
|
emptyPlace: [{ type: i0.Input }],
|
|
6579
|
+
firstDayOfWeek: [{ type: i0.Input }],
|
|
6498
6580
|
noStyle: [{ type: i0.HostBinding, args: ['class.no-style',] }, { type: i0.Input }],
|
|
6499
6581
|
hideArrowButtons: [{ type: i0.Input }, { type: i0.HostBinding, args: ['class.hide-arrows',] }],
|
|
6500
6582
|
isDate: [{ type: i0.HostBinding, args: ["class.isDate",] }],
|
|
@@ -7568,6 +7650,7 @@
|
|
|
7568
7650
|
var _this = _super.apply(this, __spreadArray([], __read(arguments))) || this;
|
|
7569
7651
|
_this.EARLIEST_DATE = new Date(1900, 0, 1); // 1900-01-01
|
|
7570
7652
|
_this.LATEST_DATE = new Date(2100, 11, 31); // 2100-12-31
|
|
7653
|
+
_this.firstDayOfWeek = '';
|
|
7571
7654
|
return _this;
|
|
7572
7655
|
}
|
|
7573
7656
|
InputDateRangePickerComponent.prototype.showClass = function () {
|
|
@@ -7688,7 +7771,7 @@
|
|
|
7688
7771
|
InputDateRangePickerComponent.decorators = [
|
|
7689
7772
|
{ type: i0.Component, args: [{
|
|
7690
7773
|
selector: 'co-input-date-range',
|
|
7691
|
-
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 ",
|
|
7774
|
+
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 [firstDayOfWeek]=\"firstDayOfWeek\"\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 ",
|
|
7692
7775
|
providers: [
|
|
7693
7776
|
OverlayService,
|
|
7694
7777
|
{
|
|
@@ -7703,6 +7786,7 @@
|
|
|
7703
7786
|
},] }
|
|
7704
7787
|
];
|
|
7705
7788
|
InputDateRangePickerComponent.propDecorators = {
|
|
7789
|
+
firstDayOfWeek: [{ type: i0.Input }],
|
|
7706
7790
|
firstInput: [{ type: i0.ViewChild, args: ['firstInput',] }],
|
|
7707
7791
|
secondInput: [{ type: i0.ViewChild, args: ['secondInput',] }],
|
|
7708
7792
|
showClass: [{ type: i0.HostBinding, args: ['class.co-input-date-range',] }]
|
|
@@ -10753,7 +10837,7 @@
|
|
|
10753
10837
|
SimpleGridComponent.decorators = [
|
|
10754
10838
|
{ type: i0.Component, args: [{
|
|
10755
10839
|
selector: 'co-simple-grid',
|
|
10756
|
-
template: "\n <co-grid-toolbar\n *ngIf=\"showToolbar\" [class.right]=\"rightToolbar\"\n [showEdit]=\"showEdit\"\n [showAdd]=\"showAdd\"\n [showDelete]=\"showDelete\"\n [deleteEnabled]=\"selectedRowIndex > -1\"\n (addClick)=\"addNewRow()\"\n (editClick)=\"editRow($event)\"\n (saveClick)=\"validateAndSave()\"\n (cancelClick)=\"cancelEditRow()\"\n (deleteClick)=\"removeRow()\">\n </co-grid-toolbar>\n\n <table\n id=\"simple-grid-table\"\n class=\"simple-grid-table\"\n [clickOutside]=\"editing\"\n (clickOutside)=\"handleClickOutsideRow()\">\n <colgroup>\n <col\n *ngFor=\"let column of headerColumnsCopy; let index = index\"\n [class.simple-grid-column-auto-fit]=\"column.autoFit\"\n [style.width.px]=\"column.width\"\n [style.min-width.px]=\"MIN_COLUMN_WIDTH\">\n </colgroup>\n <thead>\n <tr>\n <th\n scope=\"col\"\n #headerCell\n class=\"simple-grid-column-header\"\n *ngFor=\"let column of headerColumnsCopy; let index = index\">\n <div\n class=\"simple-grid-column-header-wrapper\"\n [class.resizable]=\"resizable\"\n [class.selected]=\"column.isSelected\"\n [ngClass]=\"column.textAlign ? column.textAlign : defaultTextAlign\">\n <ng-container *ngIf=\"column.headerTemplate; else noHeaderTemplate\">\n <ng-container [ngTemplateOutlet]=\"column.headerTemplate\"></ng-container>\n </ng-container>\n <ng-template #noHeaderTemplate>\n <div\n class=\"simple-grid-column-header-label\"\n [ngClass]=\"column.textAlign ? column.textAlign : defaultTextAlign\"\n [class.with-menu]=\"showGridSettings\"\n [class.with-sort]=\"showColumnSort\"\n [textContent]=\"column.headerText || ' '\" [title]=\"column.headerText\"\n (click)=\"showColumnSort ? sortColumn(column, column.field) : toggleColumnMenu(column)\">\n </div>\n\n <div class=\"sort-column\" *ngIf=\"showColumnSort\">\n <co-button\n (click)=\"sortColumn(column, column?.field)\"\n [iconData]=\"icons.getIcon(Icons.ArrowUpArrowDown)\">\n </co-button>\n </div>\n\n <div class=\"column-menu\" *ngIf=\"column.isSelected\">\n <h3 [textContent]=\"'COLUMN_OPTIONS' | coreLocalize\"></h3>\n <ul>\n <li (click)=\"hideColumn(column)\">Hide Column</li>\n <li (click)=\"sortColumn(column, column.field)\">Sort Column</li>\n </ul>\n </div>\n </ng-template>\n <div\n *ngIf=\"resizable && column.resizable\"\n class=\"simple-grid-column-sizer\"\n (mousedown)=\"handleSizerMouseDown($event, column)\">\n </div>\n </div>\n </th>\n </tr>\n\n <div *ngIf=\"showGridSettings\" class=\"grid-settings\">\n <co-button\n [class.selected]=\"isSettingsMenuOpen\"\n [iconData]=\"icons.getIcon(Icons.CogWheels)\"\n (click)=\"toggleSettingsMenu()\">\n </co-button>\n\n <div class=\"settings-menu\" *ngIf=\"isSettingsMenuOpen\">\n <h3 [textContent]=\"'GRID_OPTIONS' | coreLocalize\"></h3>\n <ul>\n <li (click)=\"exportToExcel()\">Export to Excel</li>\n <li *ngIf=\"headerColumnsCopy.length !== headerColumns.length\" (click)=\"showAllColumns()\">\n Show All Columns\n </li>\n </ul>\n </div>\n </div>\n </thead>\n <tbody\n #dropList cdkDropList cdkDropListOrientation=\"vertical\"\n class=\"simple-grid-drag-drop-list\"\n [cdkDropListDisabled]=\"!dragDropEnabled || editing\"\n [cdkDropListData]=\"data\"\n [cdkDropListEnterPredicate]=\"handleCanDragDrop\"\n (cdkDropListDropped)=\"handleDrop($event)\">\n <co-form class=\"simple-grid-row-form\">\n <tr\n #rowElement\n class=\"simple-grid-row\"\n [class.selected]=\"rowIndex === selectedRowIndex && !editing\" observeVisibility\n [class.disabled]=\"getIsRowDisabled(rowIndex)\"\n [class.editing]=\"rowIndex === editRowIndex\"\n *ngFor=\"let row of (!!rowsPerPage ? (data | paginate: {itemsPerPage: rowsPerPage, currentPage: currentPage}) : data); last as last; let rowIndex = index\"\n cdkDrag\n (click)=\"handleClickRow($event, rowIndex)\" (dblclick)=\"handleDblClickRow($event, rowIndex, row)\"\n (visibilityChange)=\"rowVisible.next(row)\"\n (mouseenter)=\"hoveredRowIndex = rowIndex\"\n (mouseleave)=\"hoveredRowIndex = -1\"\n >\n <ng-container *ngIf=\"isSingleColumnRow(row)\">\n <td class=\"simple-grid-single-column-cell\" [attr.colspan]=\"headerColumnsCopy.length\">\n <co-simple-grid-cell\n [column]=\"columns[singleColumnIndex(row)]\"\n [row]=\"row\"\n [editMode]=\"false\">\n </co-simple-grid-cell>\n </td>\n </ng-container>\n <ng-container *ngIf=\"!isSingleColumnRow(row)\">\n <ng-container *ngFor=\"let column of headerColumnsCopy; let columnIndex = index\">\n <td class=\"simple-grid-column-cell\" *ngIf=\"columnIndex !== singleColumnIndex(row)\">\n <co-simple-grid-cell\n [column]=\"column\"\n [row]=\"row\"\n [editMode]=\"inlineEdit && editing && rowIndex === editRowIndex\"\n [fieldEditMode]=\"editCellIndex === columnIndex && rowIndex === editRowIndex\"\n (cellClick)=\"handleCellClick($event, row, rowIndex, columnIndex)\">\n </co-simple-grid-cell>\n <div *ngIf=\"column.resizable\" class=\"simple-grid-column-sizer-placeholder\"></div>\n </td>\n </ng-container>\n <ng-container *ngIf=\"inlineEdit && showRowButtons\">\n <div class=\"icons-container\" *ngIf=\"!editing\">\n <co-icon class=\"icon-item icon-edit\"\n [iconData]=\"icons.getIcon(Icons.PenToSquareSolid)\" *ngIf=\"hoveredRowIndex === rowIndex\"\n (click)=\"editRow($event, true, rowIndex); $event.stopPropagation()\"></co-icon>\n <co-icon class=\"icon-item icon-delete\"\n [iconData]=\"icons.getIcon(Icons.TrashBin)\" *ngIf=\"hoveredRowIndex === rowIndex\"\n (click)=\"selectTheRow(rowIndex); removeRow();\"></co-icon>\n </div>\n <div class=\"icons-container\">\n <co-button class=\"save-button\"\n *ngIf=\"editing && (selectedRowIndex === rowIndex || (isNewRow && rowIndex === editRowIndex))\"\n [iconData]=\"icons.getIcon(Icons.CheckDuotone)\"\n (click)=\"validateAndSave(); $event.stopPropagation()\"></co-button>\n <co-button class=\"close-button\"\n *ngIf=\"editing && (selectedRowIndex === rowIndex || (isNewRow && rowIndex === editRowIndex))\"\n [iconData]=\"icons.getIcon(Icons.CrossSkinny)\"\n (click)=\"cancelEditRow(); $event.stopPropagation() \"></co-button>\n </div>\n </ng-container>\n </ng-container>\n </tr>\n </co-form>\n </tbody>\n </table>\n <co-pagination-bar\n *ngIf=\"data?.length > rowsPerPage\" class=\"pagination-bar\"\n [itemsPerPage]=\"rowsPerPage\"\n [currentPage]=\"currentPage\"\n [totalItems]=\"data.length\"\n [autoHide]=\"true\"\n (previousClick)=\"goToPreviousPage()\"\n (nextClick)=\"goToNextPage()\"\n (pageClick)=\"setCurrentPage($event)\">\n </co-pagination-bar>\n ",
|
|
10840
|
+
template: "\n <co-grid-toolbar\n *ngIf=\"showToolbar\" [class.right]=\"rightToolbar\"\n [showEdit]=\"showEdit\"\n [showAdd]=\"showAdd\"\n [showDelete]=\"showDelete\"\n [deleteEnabled]=\"selectedRowIndex > -1\"\n (addClick)=\"addNewRow()\"\n (editClick)=\"editRow($event)\"\n (saveClick)=\"validateAndSave()\"\n (cancelClick)=\"cancelEditRow()\"\n (deleteClick)=\"removeRow()\">\n </co-grid-toolbar>\n\n <table\n id=\"simple-grid-table\"\n class=\"simple-grid-table\"\n [clickOutside]=\"editing\"\n (clickOutside)=\"handleClickOutsideRow()\">\n <colgroup>\n <col\n *ngFor=\"let column of headerColumnsCopy; let index = index\"\n [class.simple-grid-column-auto-fit]=\"column.autoFit\"\n [style.width.px]=\"column.width\"\n [style.min-width.px]=\"MIN_COLUMN_WIDTH\">\n </colgroup>\n <thead>\n <tr>\n <th\n scope=\"col\"\n #headerCell\n class=\"simple-grid-column-header\"\n *ngFor=\"let column of headerColumnsCopy; let index = index\">\n <div\n class=\"simple-grid-column-header-wrapper\"\n [class.resizable]=\"resizable\"\n [class.selected]=\"column.isSelected\"\n [ngClass]=\"column.textAlign ? column.textAlign : defaultTextAlign\">\n <ng-container *ngIf=\"column.headerTemplate; else noHeaderTemplate\">\n <ng-container [ngTemplateOutlet]=\"column.headerTemplate\"></ng-container>\n </ng-container>\n <ng-template #noHeaderTemplate>\n <div\n class=\"simple-grid-column-header-label\"\n [ngClass]=\"column.textAlign ? column.textAlign : defaultTextAlign\"\n [class.with-menu]=\"showGridSettings\"\n [class.with-sort]=\"showColumnSort\"\n [textContent]=\"column.headerText || ' '\" [title]=\"column.headerText\"\n (click)=\"showColumnSort ? sortColumn(column, column.field) : toggleColumnMenu(column)\">\n </div>\n\n <div class=\"sort-column\" *ngIf=\"showColumnSort\">\n <co-button\n (click)=\"sortColumn(column, column?.field)\"\n [iconData]=\"icons.getIcon(Icons.ArrowUpArrowDown)\">\n </co-button>\n </div>\n\n <div class=\"column-menu\" *ngIf=\"column.isSelected\">\n <h3 [textContent]=\"'COLUMN_OPTIONS' | coreLocalize\"></h3>\n <ul>\n <li (click)=\"hideColumn(column)\">Hide Column</li>\n <li (click)=\"sortColumn(column, column.field)\">Sort Column</li>\n </ul>\n </div>\n </ng-template>\n <div\n *ngIf=\"resizable && column.resizable\"\n class=\"simple-grid-column-sizer\"\n (mousedown)=\"handleSizerMouseDown($event, column)\">\n </div>\n </div>\n </th>\n </tr>\n\n <div *ngIf=\"showGridSettings\" class=\"grid-settings\">\n <co-button\n [class.selected]=\"isSettingsMenuOpen\"\n [iconData]=\"icons.getIcon(Icons.CogWheels)\"\n (click)=\"toggleSettingsMenu()\">\n </co-button>\n\n <div class=\"settings-menu\" *ngIf=\"isSettingsMenuOpen\">\n <h3 [textContent]=\"'GRID_OPTIONS' | coreLocalize\"></h3>\n <ul>\n <li (click)=\"exportToExcel()\">Export to Excel</li>\n <li *ngIf=\"headerColumnsCopy.length !== headerColumns.length\" (click)=\"showAllColumns()\">\n Show All Columns\n </li>\n </ul>\n </div>\n </div>\n </thead>\n <tbody\n #dropList cdkDropList cdkDropListOrientation=\"vertical\"\n class=\"simple-grid-drag-drop-list\"\n [cdkDropListDisabled]=\"!dragDropEnabled || editing\"\n [cdkDropListData]=\"data\"\n [cdkDropListEnterPredicate]=\"handleCanDragDrop\"\n (cdkDropListDropped)=\"handleDrop($event)\">\n <co-form class=\"simple-grid-row-form\">\n <tr\n #rowElement\n class=\"simple-grid-row\"\n [class.selected]=\"rowIndex === selectedRowIndex && !editing\" observeVisibility\n [class.disabled]=\"getIsRowDisabled(rowIndex)\"\n [class.editing]=\"rowIndex === editRowIndex\"\n *ngFor=\"let row of (!!rowsPerPage ? (data | paginate: {itemsPerPage: rowsPerPage, currentPage: currentPage}) : data); last as last; let rowIndex = index\"\n cdkDrag\n (click)=\"handleClickRow($event, rowIndex)\" (dblclick)=\"handleDblClickRow($event, rowIndex, row)\"\n (visibilityChange)=\"rowVisible.next(row)\"\n (mouseenter)=\"hoveredRowIndex = rowIndex\"\n (mouseleave)=\"hoveredRowIndex = -1\"\n >\n <ng-container *ngIf=\"isSingleColumnRow(row)\">\n <td class=\"simple-grid-single-column-cell\" [attr.colspan]=\"headerColumnsCopy.length\">\n <co-simple-grid-cell\n [column]=\"columns[singleColumnIndex(row)]\"\n [row]=\"row\"\n [editMode]=\"false\">\n </co-simple-grid-cell>\n </td>\n </ng-container>\n <ng-container *ngIf=\"!isSingleColumnRow(row)\">\n <ng-container *ngFor=\"let column of headerColumnsCopy; let columnIndex = index\">\n <td class=\"simple-grid-column-cell\" *ngIf=\"columnIndex !== singleColumnIndex(row)\">\n <co-simple-grid-cell\n [column]=\"column\"\n [row]=\"row\"\n [editMode]=\"inlineEdit && editing && rowIndex === editRowIndex\"\n [fieldEditMode]=\"editCellIndex === columnIndex && rowIndex === editRowIndex\"\n (cellClick)=\"handleCellClick($event, row, rowIndex, columnIndex)\">\n </co-simple-grid-cell>\n <div *ngIf=\"column.resizable\" class=\"simple-grid-column-sizer-placeholder\"></div>\n </td>\n </ng-container>\n <ng-container *ngIf=\"inlineEdit && showRowButtons\">\n <div class=\"icons-container\" *ngIf=\"!editing\">\n <co-icon class=\"icon-item icon-edit\"\n [iconData]=\"icons.getIcon(Icons.PenToSquareSolid)\" *ngIf=\"hoveredRowIndex === rowIndex\"\n (click)=\"editRow($event, true, rowIndex); $event.stopPropagation()\"></co-icon>\n <co-icon class=\"icon-item icon-delete\"\n [iconData]=\"icons.getIcon(Icons.TrashBin)\" *ngIf=\"hoveredRowIndex === rowIndex\"\n (click)=\"selectTheRow(rowIndex); removeRow();\"></co-icon>\n </div>\n <div class=\"icons-container\">\n <co-button class=\"save-button\"\n *ngIf=\"editing && (selectedRowIndex === rowIndex || (isNewRow && rowIndex === editRowIndex))\"\n [iconData]=\"icons.getIcon(Icons.CheckDuotone)\"\n (click)=\"validateAndSave(); $event.stopPropagation()\"></co-button>\n <co-button class=\"close-button\"\n *ngIf=\"editing && (selectedRowIndex === rowIndex || (isNewRow && rowIndex === editRowIndex))\"\n [iconData]=\"icons.getIcon(Icons.CrossSkinny)\"\n (click)=\"cancelEditRow(); $event.stopPropagation() \"></co-button>\n </div>\n </ng-container>\n <ng-container *ngIf=\"!(inlineEdit && showRowButtons)\">\n <div class=\"icons-container\">\n <co-icon class=\"icon-item icon-delete\"\n [iconData]=\"icons.getIcon(Icons.TrashBin)\" *ngIf=\"hoveredRowIndex === rowIndex\"\n (click)=\"selectTheRow(rowIndex); removeRow();\">\n </co-icon>\n </div>\n </ng-container>\n </ng-container>\n </tr>\n </co-form>\n </tbody>\n </table>\n <co-pagination-bar\n *ngIf=\"data?.length > rowsPerPage\" class=\"pagination-bar\"\n [itemsPerPage]=\"rowsPerPage\"\n [currentPage]=\"currentPage\"\n [totalItems]=\"data.length\"\n [autoHide]=\"true\"\n (previousClick)=\"goToPreviousPage()\"\n (nextClick)=\"goToNextPage()\"\n (pageClick)=\"setCurrentPage($event)\">\n </co-pagination-bar>\n ",
|
|
10757
10841
|
providers: [FormMasterService],
|
|
10758
10842
|
changeDetection: i0.ChangeDetectionStrategy.OnPush,
|
|
10759
10843
|
encapsulation: i0.ViewEncapsulation.None
|
|
@@ -13345,7 +13429,7 @@
|
|
|
13345
13429
|
FilterItemComponent.decorators = [
|
|
13346
13430
|
{ type: i0.Component, args: [{
|
|
13347
13431
|
selector: "co-filter-item",
|
|
13348
|
-
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 (modelChange)=\"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 (modelChange)=\"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 (modelChange)=\"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 (modelChange)=\"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)]=\"dateFieldValue\" [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 ",
|
|
13432
|
+
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 (modelChange)=\"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 (modelChange)=\"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 (modelChange)=\"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 (modelChange)=\"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)]=\"dateFieldValue\" [readonly]=\"readonly\" [firstDayOfWeek]=\"firstDayOfWeek\"\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\" [firstDayOfWeek]=\"firstDayOfWeek\"\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 ",
|
|
13349
13433
|
encapsulation: i0.ViewEncapsulation.None,
|
|
13350
13434
|
changeDetection: i0.ChangeDetectionStrategy.OnPush,
|
|
13351
13435
|
providers: [{
|
|
@@ -13377,6 +13461,7 @@
|
|
|
13377
13461
|
sliderDefaultMax: [{ type: i0.Input }],
|
|
13378
13462
|
fullRangeIsNull: [{ type: i0.Input }],
|
|
13379
13463
|
canFilterByCode: [{ type: i0.Input }],
|
|
13464
|
+
firstDayOfWeek: [{ type: i0.Input }],
|
|
13380
13465
|
model: [{ type: i0.Input }],
|
|
13381
13466
|
modelChange: [{ type: i0.Output }],
|
|
13382
13467
|
collectionChange: [{ type: i0.Output }],
|