@colijnit/corecomponents_v12 260.1.10 → 260.1.12

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.
Files changed (25) hide show
  1. package/README.md +24 -24
  2. package/bundles/colijnit-corecomponents_v12.umd.js +19 -4
  3. package/bundles/colijnit-corecomponents_v12.umd.js.map +1 -1
  4. package/colijnit-corecomponents_v12.metadata.json +1 -1
  5. package/esm2015/lib/components/base/base-input.component.js +3 -1
  6. package/esm2015/lib/components/co-dialog/co-dialog.component.js +22 -22
  7. package/esm2015/lib/components/co-dialog-wizard/co-dialog-wizard.component.js +16 -16
  8. package/esm2015/lib/components/filter-item/filter-item.component.js +162 -162
  9. package/esm2015/lib/components/input-number-picker/input-number-picker.component.js +33 -33
  10. package/esm2015/lib/components/input-number-picker/input-number-picker.module.js +1 -1
  11. package/esm2015/lib/components/list-of-values/list-of-values-popup.component.js +6 -2
  12. package/esm2015/lib/components/list-of-values/list-of-values.component.js +2 -2
  13. package/esm2015/lib/components/simple-grid/simple-grid-cell.component.js +31 -31
  14. package/esm2015/lib/components/simple-grid/simple-grid.component.js +189 -181
  15. package/esm2015/lib/core/enum/core-components-icon.enum.js +1 -1
  16. package/esm2015/lib/core/model/core-components-icon-svg.js +1 -1
  17. package/esm2015/lib/directives/screen-configuration/screen-configuration.module.js +1 -1
  18. package/esm2015/public-api.js +1 -1
  19. package/fesm2015/colijnit-corecomponents_v12.js +455 -441
  20. package/fesm2015/colijnit-corecomponents_v12.js.map +1 -1
  21. package/lib/components/base/base-input.component.d.ts +1 -0
  22. package/lib/components/calendar/style/_material-definition.scss +46 -46
  23. package/lib/components/simple-grid/simple-grid.component.d.ts +2 -1
  24. package/lib/components/simple-grid/style/_layout.scss +7 -25
  25. package/package.json +1 -1
package/fesm2015/colijnit-corecomponents_v12.js CHANGED
@@ -1892,6 +1892,7 @@ class BaseInputComponent {
1892
1892
  this.keyDown = new EventEmitter();
1893
1893
  this.keyUp = new EventEmitter();
1894
1894
  this.modelChange = new EventEmitter();
1895
+ this.selectedValueChange = new EventEmitter();
1895
1896
  this.userModelChange = new EventEmitter();
1896
1897
  this.hiddenChange = new EventEmitter();
1897
1898
  this.cancelClicked = new EventEmitter();
@@ -2640,6 +2641,7 @@ BaseInputComponent.propDecorators = {
2640
2641
  keyDown: [{ type: Output }],
2641
2642
  keyUp: [{ type: Output }],
2642
2643
  modelChange: [{ type: Output }],
2644
+ selectedValueChange: [{ type: Output }],
2643
2645
  userModelChange: [{ type: Output }],
2644
2646
  hiddenChange: [{ type: Output }],
2645
2647
  cancelClicked: [{ type: Output }],
@@ -4450,27 +4452,27 @@ class CoDialogComponent {
4450
4452
  CoDialogComponent.decorators = [
4451
4453
  { type: Component, args: [{
4452
4454
  selector: 'co-dialog',
4453
- template: `
4454
- <div class="co-dialog-overlay" (click)="handleOverlayClick($event)"></div>
4455
- <div class="co-dialog-placeholder">
4456
- <div class="co-dialog-wrapper" [ngClass]="customCssClass ? customCssClass : undefined" @showHideDialog cdkDrag>
4457
- <div *ngIf="!borderless" class="dialog-drag-handle" cdkDragHandle></div>
4458
- <div class="dialog-header" *ngIf="!borderless">
4459
- <div class="dialog-header-caption" *ngIf="headerTemplate">
4460
- <ng-container [ngTemplateOutlet]="headerTemplate"></ng-container>
4461
- </div>
4462
- <div class="dialog-close-button" *ngIf="showCloseIcon" (click)="handleCloseDialog($event)">
4463
- <co-icon [icon]="icons.CrossSkinny"></co-icon>
4464
- </div>
4465
- </div>
4466
- <div class="dialog-content co-small-scrollbar" [ngClass]="customCssClass ? customCssClass : undefined">
4467
- <ng-content></ng-content>
4468
- </div>
4469
- <div class="dialog-footer" *ngIf="footerTemplate">
4470
- <ng-container [ngTemplateOutlet]="footerTemplate"></ng-container>
4471
- </div>
4472
- </div>
4473
- </div>
4455
+ template: `
4456
+ <div class="co-dialog-overlay" (click)="handleOverlayClick($event)"></div>
4457
+ <div class="co-dialog-placeholder">
4458
+ <div class="co-dialog-wrapper" [ngClass]="customCssClass ? customCssClass : undefined" @showHideDialog cdkDrag>
4459
+ <div *ngIf="!borderless" class="dialog-drag-handle" cdkDragHandle></div>
4460
+ <div class="dialog-header" *ngIf="!borderless">
4461
+ <div class="dialog-header-caption" *ngIf="headerTemplate">
4462
+ <ng-container [ngTemplateOutlet]="headerTemplate"></ng-container>
4463
+ </div>
4464
+ <div class="dialog-close-button" *ngIf="showCloseIcon" (click)="handleCloseDialog($event)">
4465
+ <co-icon [icon]="icons.CrossSkinny"></co-icon>
4466
+ </div>
4467
+ </div>
4468
+ <div class="dialog-content co-small-scrollbar" [ngClass]="customCssClass ? customCssClass : undefined">
4469
+ <ng-content></ng-content>
4470
+ </div>
4471
+ <div class="dialog-footer" *ngIf="footerTemplate">
4472
+ <ng-container [ngTemplateOutlet]="footerTemplate"></ng-container>
4473
+ </div>
4474
+ </div>
4475
+ </div>
4474
4476
  `,
4475
4477
  animations: [
4476
4478
  trigger('showHideCoDialog', [
@@ -4534,21 +4536,21 @@ class CoDialogWizardComponent {
4534
4536
  CoDialogWizardComponent.decorators = [
4535
4537
  { type: Component, args: [{
4536
4538
  selector: 'co-dialog-wizard',
4537
- template: `
4538
- <div class="co-dialog-wizard-wrapper" [@showHideDialog]="animation">
4539
- <div class="dialog-header">
4540
- <ng-content select="[header]"></ng-content>
4541
- <div class="dialog-close-button" *ngIf="showCloseIcon" (click)="closeClick.emit($event)">
4542
- <co-icon [icon]="icons.CrossSkinny"></co-icon>
4543
- </div>
4544
- </div>
4545
-
4546
- <hr class="co-dialog-wizard-divider">
4547
-
4548
- <div class="dialog-content">
4549
- <ng-content></ng-content>
4550
- </div>
4551
- </div>
4539
+ template: `
4540
+ <div class="co-dialog-wizard-wrapper" [@showHideDialog]="animation">
4541
+ <div class="dialog-header">
4542
+ <ng-content select="[header]"></ng-content>
4543
+ <div class="dialog-close-button" *ngIf="showCloseIcon" (click)="closeClick.emit($event)">
4544
+ <co-icon [icon]="icons.CrossSkinny"></co-icon>
4545
+ </div>
4546
+ </div>
4547
+
4548
+ <hr class="co-dialog-wizard-divider">
4549
+
4550
+ <div class="dialog-content">
4551
+ <ng-content></ng-content>
4552
+ </div>
4553
+ </div>
4552
4554
  `,
4553
4555
  animations: [
4554
4556
  trigger('showHideDialog', [
@@ -7901,38 +7903,38 @@ class InputNumberPickerComponent extends BaseInputComponent {
7901
7903
  InputNumberPickerComponent.decorators = [
7902
7904
  { type: Component, args: [{
7903
7905
  selector: 'co-input-number-picker',
7904
- template: `
7905
- <div class="icon-wrapper" *ngIf="leftIconData">
7906
- <co-icon class="input-number-picker-icon" [iconData]="leftIconData" (click)="iconClick.emit($event)"></co-icon>
7907
- <div class="spacer"></div>
7908
- </div>
7909
- <div class="button-wrapper">
7910
- <co-button *ngIf="showButtons" class="minus-operator" [class.select]="minSelected" tabindex="-1"
7911
- [disabled]="readonly"
7912
- [iconData]="iconCacheService.getIcon(minusIcon)"
7913
- (mousedown)="onMinusMouseDown($event)"
7914
- (mouseup)="stopAutoCounting()" (mouseleave)="stopAutoCounting()"></co-button>
7915
- </div>
7916
- <div class="input-wrapper">
7917
- <span class='permanent-label' [textContent]="label" *ngIf="showPermanentLabel"></span>
7918
- <input type="number"
7919
- [tabIndex]="readonly ? -1 : 0"
7920
- [ngModel]="model"
7921
- [readonly]="readonly"
7922
- [disabled]="disabled"
7923
- [required]="required"
7924
- [placeholder]="label"
7925
- (ngModelChange)="handleChangeModel($event)"
7926
- (keydown)="handleInputKeyDown($event)"
7927
- (blur)="handleBlur()"/>
7928
- </div>
7929
- <div class="button-wrapper">
7930
- <co-button *ngIf="showButtons" class="plus-operator" [class.select]="plusSelected" tabindex="-1"
7931
- [disabled]="readonly"
7932
- [iconData]="iconCacheService.getIcon(plusIcon)"
7933
- (mousedown)="onPlusMouseDown($event)"
7934
- (mouseup)="stopAutoCounting()" (mouseleave)="stopAutoCounting()"></co-button>
7935
- </div>
7906
+ template: `
7907
+ <div class="icon-wrapper" *ngIf="leftIconData">
7908
+ <co-icon class="input-number-picker-icon" [iconData]="leftIconData" (click)="iconClick.emit($event)"></co-icon>
7909
+ <div class="spacer"></div>
7910
+ </div>
7911
+ <div class="button-wrapper">
7912
+ <co-button *ngIf="showButtons" class="minus-operator" [class.select]="minSelected" tabindex="-1"
7913
+ [disabled]="readonly"
7914
+ [iconData]="iconCacheService.getIcon(minusIcon)"
7915
+ (mousedown)="onMinusMouseDown($event)"
7916
+ (mouseup)="stopAutoCounting()" (mouseleave)="stopAutoCounting()"></co-button>
7917
+ </div>
7918
+ <div class="input-wrapper">
7919
+ <span class='permanent-label' [textContent]="label" *ngIf="showPermanentLabel"></span>
7920
+ <input type="number"
7921
+ [tabIndex]="readonly ? -1 : 0"
7922
+ [ngModel]="model"
7923
+ [readonly]="readonly"
7924
+ [disabled]="disabled"
7925
+ [required]="required"
7926
+ [placeholder]="label"
7927
+ (ngModelChange)="handleChangeModel($event)"
7928
+ (keydown)="handleInputKeyDown($event)"
7929
+ (blur)="handleBlur()"/>
7930
+ </div>
7931
+ <div class="button-wrapper">
7932
+ <co-button *ngIf="showButtons" class="plus-operator" [class.select]="plusSelected" tabindex="-1"
7933
+ [disabled]="readonly"
7934
+ [iconData]="iconCacheService.getIcon(plusIcon)"
7935
+ (mousedown)="onPlusMouseDown($event)"
7936
+ (mouseup)="stopAutoCounting()" (mouseleave)="stopAutoCounting()"></co-button>
7937
+ </div>
7936
7938
  `,
7937
7939
  providers: [
7938
7940
  OverlayService, {
@@ -9773,7 +9775,16 @@ class SimpleGridComponent extends BaseSimpleGridComponent {
9773
9775
  this._resetEdit();
9774
9776
  this._detectChanges();
9775
9777
  }
9776
- removeRow() {
9778
+ removeRow(row) {
9779
+ this.deleteRow.next(row);
9780
+ if (this.currentPage !== 1) {
9781
+ this.currentPage = 1;
9782
+ this.selectedRowIndex = -1;
9783
+ window.scrollTo({ top: 0, behavior: 'smooth' });
9784
+ }
9785
+ this._detectChanges();
9786
+ }
9787
+ removeSelectedRow() {
9777
9788
  let absoluteIndex = this.selectedRowIndex;
9778
9789
  if (this.rowsPerPage) {
9779
9790
  absoluteIndex = (this.currentPage - 1) * this.rowsPerPage + this.selectedRowIndex;
@@ -10167,185 +10178,184 @@ class SimpleGridComponent extends BaseSimpleGridComponent {
10167
10178
  SimpleGridComponent.decorators = [
10168
10179
  { type: Component, args: [{
10169
10180
  selector: 'co-simple-grid',
10170
- template: `
10171
- <co-grid-toolbar
10172
- *ngIf="showToolbar" [class.right]="rightToolbar"
10173
- [showEdit]="showEdit"
10174
- [showAdd]="showAdd"
10175
- [showDelete]="showDelete"
10176
- [deleteEnabled]="selectedRowIndex > -1"
10177
- (addClick)="addNewRow()"
10178
- (editClick)="editRow($event)"
10179
- (saveClick)="validateAndSave()"
10180
- (cancelClick)="cancelEditRow()"
10181
- (deleteClick)="removeRow()">
10182
- </co-grid-toolbar>
10183
-
10184
- <table
10185
- id="simple-grid-table"
10186
- class="simple-grid-table"
10187
- [clickOutside]="editing"
10188
- (clickOutside)="handleClickOutsideRow()">
10189
- <colgroup>
10190
- <col
10191
- *ngFor="let column of headerColumnsCopy; let index = index"
10192
- [class.simple-grid-column-auto-fit]="column.autoFit"
10193
- [style.width.px]="column.width"
10194
- [style.min-width.px]="MIN_COLUMN_WIDTH">
10195
- <col
10196
- *ngIf="((inlineEdit && showRowButtons) || (showDelete && !showRowButtons)) && (hoveredRowIndex >= 0 || selectedRowIndex >= 0 || isNewRow)"
10197
- [class.icons-col]="true"
10198
- [class.col-width-row-buttons]="inlineEdit && showRowButtons"
10199
- [class.col-width-delete]="!showRowButtons && showDelete">
10200
- </colgroup>
10201
- <thead>
10202
- <tr>
10203
- <th
10204
- scope="col"
10205
- #headerCell
10206
- class="simple-grid-column-header"
10207
- *ngFor="let column of headerColumnsCopy; let index = index">
10208
- <div
10209
- class="simple-grid-column-header-wrapper"
10210
- [class.resizable]="resizable"
10211
- [class.selected]="column.isSelected"
10212
- [ngClass]="column.textAlign ? column.textAlign : defaultTextAlign">
10213
- <ng-container *ngIf="column.headerTemplate; else noHeaderTemplate">
10214
- <ng-container [ngTemplateOutlet]="column.headerTemplate"></ng-container>
10215
- </ng-container>
10216
- <ng-template #noHeaderTemplate>
10217
- <div
10218
- class="simple-grid-column-header-label"
10219
- [ngClass]="column.textAlign ? column.textAlign : defaultTextAlign"
10220
- [class.with-menu]="showGridSettings"
10221
- [class.with-sort]="showColumnSort"
10222
- [textContent]="column.headerText || '&nbsp;'" [title]="column.headerText"
10223
- (click)="showColumnSort ? sortColumn(column, column.field) : toggleColumnMenu(column)">
10224
- </div>
10225
-
10226
- <div class="sort-column" *ngIf="showColumnSort">
10227
- <co-button
10228
- (click)="sortColumn(column, column?.field)"
10229
- [iconData]="icons.getIcon(Icons.ArrowUpArrowDown)">
10230
- </co-button>
10231
- </div>
10232
-
10233
- <div class="column-menu" *ngIf="column.isSelected">
10234
- <h3 [textContent]="'COLUMN_OPTIONS' | coreLocalize"></h3>
10235
- <ul>
10236
- <li (click)="hideColumn(column)">Hide Column</li>
10237
- <li (click)="sortColumn(column, column.field)">Sort Column</li>
10238
- </ul>
10239
- </div>
10240
- </ng-template>
10241
- <div
10242
- *ngIf="resizable && column.resizable"
10243
- class="simple-grid-column-sizer"
10244
- (mousedown)="handleSizerMouseDown($event, column)">
10245
- </div>
10246
- </div>
10247
- </th>
10248
- </tr>
10249
-
10250
- <div *ngIf="showGridSettings" class="grid-settings">
10251
- <co-button
10252
- [class.selected]="isSettingsMenuOpen"
10253
- [iconData]="icons.getIcon(Icons.CogWheels)"
10254
- (click)="toggleSettingsMenu()">
10255
- </co-button>
10256
-
10257
- <div class="settings-menu" *ngIf="isSettingsMenuOpen">
10258
- <h3 [textContent]="'GRID_OPTIONS' | coreLocalize"></h3>
10259
- <ul>
10260
- <li (click)="exportToExcel()">Export to Excel</li>
10261
- <li *ngIf="headerColumnsCopy.length !== headerColumns.length" (click)="showAllColumns()">
10262
- Show All Columns
10263
- </li>
10264
- </ul>
10265
- </div>
10266
- </div>
10267
- </thead>
10268
- <tbody
10269
- #dropList cdkDropList cdkDropListOrientation="vertical"
10270
- class="simple-grid-drag-drop-list"
10271
- [cdkDropListDisabled]="!dragDropEnabled || editing"
10272
- [cdkDropListData]="data"
10273
- [cdkDropListEnterPredicate]="handleCanDragDrop"
10274
- (cdkDropListDropped)="handleDrop($event)">
10275
- <co-form class="simple-grid-row-form">
10276
- <tr
10277
- #rowElement
10278
- class="simple-grid-row"
10279
- [class.selected]="rowIndex === selectedRowIndex && !editing" observeVisibility
10280
- [class.disabled]="getIsRowDisabled(rowIndex)"
10281
- [class.editing]="rowIndex === editRowIndex"
10282
- *ngFor="let row of (!!rowsPerPage ? (data | paginate: {itemsPerPage: rowsPerPage, currentPage: currentPage}) : data); last as last; let rowIndex = index"
10283
- cdkDrag
10284
- (click)="handleClickRow($event, rowIndex)" (dblclick)="handleDblClickRow($event, rowIndex, row)"
10285
- (visibilityChange)="rowVisible.next(row)"
10286
- (mouseenter)="hoveredRowIndex = rowIndex"
10287
- (mouseleave)="hoveredRowIndex = -1"
10288
- >
10289
- <ng-container *ngIf="isSingleColumnRow(row)">
10290
- <td class="simple-grid-single-column-cell" [attr.colspan]="headerColumnsCopy.length">
10291
- <co-simple-grid-cell
10292
- [column]="columns[singleColumnIndex(row)]"
10293
- [row]="row"
10294
- [editMode]="false">
10295
- </co-simple-grid-cell>
10296
- </td>
10297
- </ng-container>
10298
- <ng-container *ngIf="!isSingleColumnRow(row)">
10299
- <ng-container *ngFor="let column of headerColumnsCopy; let columnIndex = index">
10300
- <td class="simple-grid-column-cell" *ngIf="columnIndex !== singleColumnIndex(row)">
10301
- <co-simple-grid-cell
10302
- [column]="column"
10303
- [row]="row"
10304
- [editMode]="inlineEdit && editing && rowIndex === editRowIndex"
10305
- [fieldEditMode]="editCellIndex === columnIndex && rowIndex === editRowIndex"
10306
- (cellClick)="handleCellClick($event, row, rowIndex, columnIndex)">
10307
- </co-simple-grid-cell>
10308
- <div *ngIf="column.resizable" class="simple-grid-column-sizer-placeholder"></div>
10309
- </td>
10310
- </ng-container>
10311
- <ng-container *ngIf="(inlineEdit && showRowButtons) || (showDelete && !showRowButtons)">
10312
- <td class="icons-container"
10313
- *ngIf="(editRowIndex <= -1 && selectedRowIndex === -1 && hoveredRowIndex === rowIndex) || selectedRowIndex === rowIndex || (isNewRow && rowIndex === editRowIndex)">
10314
- <ng-container>
10315
- <co-icon class="icon-item icon-edit"
10316
- *ngIf="!editing && (inlineEdit && showRowButtons)"
10317
- [iconData]="icons.getIcon(Icons.PenToSquareSolid)"
10318
- (click)="editRow($event, true, rowIndex); $event.stopPropagation()"></co-icon>
10319
- <co-icon class="icon-item icon-delete"
10320
- [iconData]="icons.getIcon(Icons.TrashBin)"
10321
- *ngIf="(!editing && (inlineEdit || !inlineEdit) && showRowButtons) || (!showRowButtons && showDelete)"
10322
- (click)="selectTheRow(rowIndex); removeRow();"></co-icon>
10323
- </ng-container>
10324
- <ng-container *ngIf="editing && inlineEdit && showRowButtons && (selectedRowIndex === rowIndex || isNewRow)">
10325
- <co-button class="save-button"
10326
- [iconData]="icons.getIcon(Icons.CheckDuotone)"
10327
- (click)="validateAndSave(); $event.stopPropagation()"></co-button>
10328
- <co-button class="close-button"
10329
- [iconData]="icons.getIcon(Icons.CrossSkinny)"
10330
- (click)="cancelEditRow(); $event.stopPropagation() "></co-button>
10331
- </ng-container>
10332
- </td>
10333
- </ng-container>
10334
- </ng-container>
10335
- </tr>
10336
- </co-form>
10337
- </tbody>
10338
- </table>
10339
- <co-pagination-bar
10340
- *ngIf="data?.length > rowsPerPage" class="pagination-bar"
10341
- [itemsPerPage]="rowsPerPage"
10342
- [currentPage]="currentPage"
10343
- [totalItems]="data.length"
10344
- [autoHide]="true"
10345
- (previousClick)="goToPreviousPage()"
10346
- (nextClick)="goToNextPage()"
10347
- (pageClick)="setCurrentPage($event)">
10348
- </co-pagination-bar>
10181
+ template: `
10182
+ <co-grid-toolbar
10183
+ *ngIf="showToolbar" [class.right]="rightToolbar"
10184
+ [showEdit]="showEdit"
10185
+ [showAdd]="showAdd"
10186
+ [showDelete]="showDelete"
10187
+ [deleteEnabled]="selectedRowIndex > -1"
10188
+ (addClick)="addNewRow()"
10189
+ (editClick)="editRow($event)"
10190
+ (saveClick)="validateAndSave()"
10191
+ (cancelClick)="cancelEditRow()"
10192
+ (deleteClick)="removeSelectedRow()">
10193
+ </co-grid-toolbar>
10194
+
10195
+ <table
10196
+ id="simple-grid-table"
10197
+ class="simple-grid-table"
10198
+ [clickOutside]="editing"
10199
+ (clickOutside)="handleClickOutsideRow()">
10200
+ <colgroup>
10201
+ <col
10202
+ *ngFor="let column of headerColumnsCopy; let index = index"
10203
+ [class.simple-grid-column-auto-fit]="column.autoFit"
10204
+ [style.width.px]="column.width"
10205
+ [style.min-width.px]="MIN_COLUMN_WIDTH">
10206
+ <col
10207
+ *ngIf="showRowButtons"
10208
+ [class.simple-grid-column-auto-fit]="true"
10209
+ [style.min-width.px]="MIN_COLUMN_WIDTH">
10210
+ >
10211
+ </colgroup>
10212
+ <thead>
10213
+ <tr>
10214
+ <th
10215
+ scope="col"
10216
+ #headerCell
10217
+ class="simple-grid-column-header"
10218
+ *ngFor="let column of headerColumnsCopy; let index = index">
10219
+ <div
10220
+ class="simple-grid-column-header-wrapper"
10221
+ [class.resizable]="resizable"
10222
+ [class.selected]="column.isSelected"
10223
+ [ngClass]="column.textAlign ? column.textAlign : defaultTextAlign">
10224
+ <ng-container *ngIf="column.headerTemplate; else noHeaderTemplate">
10225
+ <ng-container [ngTemplateOutlet]="column.headerTemplate"></ng-container>
10226
+ </ng-container>
10227
+ <ng-template #noHeaderTemplate>
10228
+ <div
10229
+ class="simple-grid-column-header-label"
10230
+ [ngClass]="column.textAlign ? column.textAlign : defaultTextAlign"
10231
+ [class.with-menu]="showGridSettings"
10232
+ [class.with-sort]="showColumnSort"
10233
+ [textContent]="column.headerText || '&nbsp;'" [title]="column.headerText"
10234
+ (click)="showColumnSort ? sortColumn(column, column.field) : toggleColumnMenu(column)">
10235
+ </div>
10236
+
10237
+ <div class="sort-column" *ngIf="showColumnSort">
10238
+ <co-button
10239
+ (click)="sortColumn(column, column?.field)"
10240
+ [iconData]="icons.getIcon(Icons.ArrowUpArrowDown)">
10241
+ </co-button>
10242
+ </div>
10243
+
10244
+ <div class="column-menu" *ngIf="column.isSelected">
10245
+ <h3 [textContent]="'COLUMN_OPTIONS' | coreLocalize"></h3>
10246
+ <ul>
10247
+ <li (click)="hideColumn(column)">Hide Column</li>
10248
+ <li (click)="sortColumn(column, column.field)">Sort Column</li>
10249
+ </ul>
10250
+ </div>
10251
+ </ng-template>
10252
+ <div
10253
+ *ngIf="resizable && column.resizable"
10254
+ class="simple-grid-column-sizer"
10255
+ (mousedown)="handleSizerMouseDown($event, column)">
10256
+ </div>
10257
+ </div>
10258
+ </th>
10259
+ </tr>
10260
+
10261
+ <div *ngIf="showGridSettings" class="grid-settings">
10262
+ <co-button
10263
+ [class.selected]="isSettingsMenuOpen"
10264
+ [iconData]="icons.getIcon(Icons.CogWheels)"
10265
+ (click)="toggleSettingsMenu()">
10266
+ </co-button>
10267
+
10268
+ <div class="settings-menu" *ngIf="isSettingsMenuOpen">
10269
+ <h3 [textContent]="'GRID_OPTIONS' | coreLocalize"></h3>
10270
+ <ul>
10271
+ <li (click)="exportToExcel()">Export to Excel</li>
10272
+ <li *ngIf="headerColumnsCopy.length !== headerColumns.length" (click)="showAllColumns()">
10273
+ Show All Columns
10274
+ </li>
10275
+ </ul>
10276
+ </div>
10277
+ </div>
10278
+ </thead>
10279
+ <tbody
10280
+ #dropList cdkDropList cdkDropListOrientation="vertical"
10281
+ class="simple-grid-drag-drop-list"
10282
+ [cdkDropListDisabled]="!dragDropEnabled || editing"
10283
+ [cdkDropListData]="data"
10284
+ [cdkDropListEnterPredicate]="handleCanDragDrop"
10285
+ (cdkDropListDropped)="handleDrop($event)">
10286
+ <co-form class="simple-grid-row-form">
10287
+ <tr
10288
+ #rowElement
10289
+ class="simple-grid-row"
10290
+ [class.selected]="rowIndex === selectedRowIndex && !editing" observeVisibility
10291
+ [class.disabled]="getIsRowDisabled(rowIndex)"
10292
+ [class.editing]="rowIndex === editRowIndex"
10293
+ *ngFor="let row of (!!rowsPerPage ? (data | paginate: {itemsPerPage: rowsPerPage, currentPage: currentPage}) : data); last as last; let rowIndex = index"
10294
+ cdkDrag
10295
+ (click)="handleClickRow($event, rowIndex)" (dblclick)="handleDblClickRow($event, rowIndex, row)"
10296
+ (visibilityChange)="rowVisible.next(row)"
10297
+ (mouseenter)="hoveredRowIndex = rowIndex"
10298
+ (mouseleave)="hoveredRowIndex = -1"
10299
+ >
10300
+ <ng-container *ngIf="isSingleColumnRow(row)">
10301
+ <td class="simple-grid-single-column-cell" [attr.colspan]="headerColumnsCopy.length">
10302
+ <co-simple-grid-cell
10303
+ [column]="columns[singleColumnIndex(row)]"
10304
+ [row]="row"
10305
+ [editMode]="false">
10306
+ </co-simple-grid-cell>
10307
+ </td>
10308
+ </ng-container>
10309
+ <ng-container *ngIf="!isSingleColumnRow(row)">
10310
+ <ng-container *ngFor="let column of headerColumnsCopy; let columnIndex = index">
10311
+ <td class="simple-grid-column-cell" *ngIf="columnIndex !== singleColumnIndex(row)">
10312
+ <co-simple-grid-cell
10313
+ [column]="column"
10314
+ [row]="row"
10315
+ [editMode]="inlineEdit && editing && rowIndex === editRowIndex"
10316
+ [fieldEditMode]="editCellIndex === columnIndex && rowIndex === editRowIndex"
10317
+ (cellClick)="handleCellClick($event, row, rowIndex, columnIndex)">
10318
+ </co-simple-grid-cell>
10319
+ <div *ngIf="column.resizable" class="simple-grid-column-sizer-placeholder"></div>
10320
+ </td>
10321
+ </ng-container>
10322
+ <ng-container *ngIf="showRowButtons">
10323
+ <td class="icons-container" [class.show-content]="selectedRowIndex === rowIndex || hoveredRowIndex === rowIndex">
10324
+ <ng-container>
10325
+ <co-icon class="icon-item icon-edit"
10326
+ *ngIf="editRowIndex !== rowIndex && inlineEdit"
10327
+ [iconData]="icons.getIcon(Icons.PenToSquareSolid)"
10328
+ (click)="editRow($event, true, rowIndex); $event.stopPropagation()"></co-icon>
10329
+ <co-icon class="icon-item icon-delete"
10330
+ [iconData]="icons.getIcon(Icons.TrashBin)"
10331
+ *ngIf="(editRowIndex !== rowIndex && showDelete)"
10332
+ (click)="removeRow(data[rowIndex])"></co-icon>
10333
+ </ng-container>
10334
+ <ng-container *ngIf="editing && inlineEdit && (selectedRowIndex === rowIndex || isNewRow) && editRowIndex === rowIndex">
10335
+ <co-button class="save-button"
10336
+ [iconData]="icons.getIcon(Icons.CheckDuotone)"
10337
+ (click)="validateAndSave(); $event.stopPropagation()"></co-button>
10338
+ <co-button class="close-button"
10339
+ [iconData]="icons.getIcon(Icons.CrossSkinny)"
10340
+ (click)="cancelEditRow(); $event.stopPropagation() "></co-button>
10341
+ </ng-container>
10342
+ </td>
10343
+ </ng-container>
10344
+ </ng-container>
10345
+ </tr>
10346
+ </co-form>
10347
+ </tbody>
10348
+ </table>
10349
+ <co-pagination-bar
10350
+ *ngIf="data?.length > rowsPerPage" class="pagination-bar"
10351
+ [itemsPerPage]="rowsPerPage"
10352
+ [currentPage]="currentPage"
10353
+ [totalItems]="data.length"
10354
+ [autoHide]="true"
10355
+ (previousClick)="goToPreviousPage()"
10356
+ (nextClick)="goToNextPage()"
10357
+ (pageClick)="setCurrentPage($event)">
10358
+ </co-pagination-bar>
10349
10359
  `,
10350
10360
  providers: [FormMasterService],
10351
10361
  changeDetection: ChangeDetectionStrategy.OnPush,
@@ -10989,36 +10999,36 @@ class SimpleGridCellComponent {
10989
10999
  SimpleGridCellComponent.decorators = [
10990
11000
  { type: Component, args: [{
10991
11001
  selector: "co-simple-grid-cell",
10992
- template: `
10993
- <div class="simple-grid-column-cell-value" [ngClass]="column.textAlign ? column.textAlign : defaultTextAlign">
10994
- <ng-container *ngIf="editMode; else noInlineEdit">
10995
- <div class="simple-grid-column-cell-field">
10996
- <ng-container #editTemplate *ngIf="column.editTemplate; else noEditTemplate"
10997
- [ngTemplateOutlet]="column.editTemplate"
10998
- [ngTemplateOutletContext]="{value: row[column.field], row: row}"></ng-container>
10999
- <ng-template #noEditTemplate>
11000
- <ng-container *ngIf="column.template; else noTemplate">
11001
- <ng-container [ngTemplateOutlet]="column.template"
11002
- [ngTemplateOutletContext]="{value: row[column.field], row: row}"></ng-container>
11003
- </ng-container>
11004
- <ng-template #noTemplate>
11005
- <co-input-text [(model)]="row[column.field]" [required]="column.required"></co-input-text>
11006
- </ng-template>
11007
- </ng-template>
11008
- </div>
11009
- </ng-container>
11010
- <ng-template #noInlineEdit>
11011
- <div class="simple-grid-column-cell-field">
11012
- <ng-container *ngIf="column.template; else noTemplate">
11013
- <ng-container [ngTemplateOutlet]="column.template"
11014
- [ngTemplateOutletContext]="{value: row[column.field], row: row}"></ng-container>
11015
- </ng-container>
11016
- <ng-template #noTemplate>
11017
- <span [textContent]="column.getFieldValue(row[column.field])" [title]="row[column.field]"></span>
11018
- </ng-template>
11019
- </div>
11020
- </ng-template>
11021
- </div>
11002
+ template: `
11003
+ <div class="simple-grid-column-cell-value" [ngClass]="column.textAlign ? column.textAlign : defaultTextAlign">
11004
+ <ng-container *ngIf="editMode; else noInlineEdit">
11005
+ <div class="simple-grid-column-cell-field">
11006
+ <ng-container #editTemplate *ngIf="column.editTemplate; else noEditTemplate"
11007
+ [ngTemplateOutlet]="column.editTemplate"
11008
+ [ngTemplateOutletContext]="{value: row[column.field], row: row}"></ng-container>
11009
+ <ng-template #noEditTemplate>
11010
+ <ng-container *ngIf="column.template; else noTemplate">
11011
+ <ng-container [ngTemplateOutlet]="column.template"
11012
+ [ngTemplateOutletContext]="{value: row[column.field], row: row}"></ng-container>
11013
+ </ng-container>
11014
+ <ng-template #noTemplate>
11015
+ <co-input-text [(model)]="row[column.field]" [required]="column.required"></co-input-text>
11016
+ </ng-template>
11017
+ </ng-template>
11018
+ </div>
11019
+ </ng-container>
11020
+ <ng-template #noInlineEdit>
11021
+ <div class="simple-grid-column-cell-field">
11022
+ <ng-container *ngIf="column.template; else noTemplate">
11023
+ <ng-container [ngTemplateOutlet]="column.template"
11024
+ [ngTemplateOutletContext]="{value: row[column.field], row: row}"></ng-container>
11025
+ </ng-container>
11026
+ <ng-template #noTemplate>
11027
+ <span [textContent]="column.getFieldValue(row[column.field])" [title]="row[column.field]"></span>
11028
+ </ng-template>
11029
+ </div>
11030
+ </ng-template>
11031
+ </div>
11022
11032
  `,
11023
11033
  encapsulation: ViewEncapsulation.None
11024
11034
  },] }
@@ -11411,7 +11421,11 @@ class ListOfValuesPopupComponent {
11411
11421
  }
11412
11422
  _prepareViewModels() {
11413
11423
  this.viewModels.length = 0;
11414
- this.viewModels = this.viewModelsMain.filter(vm => vm.model[this.displayField] && vm.model[this.displayField].toLowerCase().includes(this.searchTerm ? this.searchTerm.toLowerCase() : ""));
11424
+ this.viewModels = this.viewModelsMain.filter(vm => {
11425
+ return Object.values(vm.model).some((value) => {
11426
+ return value.toString().toLowerCase().includes(this.searchTerm ? this.searchTerm.toLowerCase() : '');
11427
+ });
11428
+ });
11415
11429
  }
11416
11430
  _scrollIntoView() {
11417
11431
  const activeIndex = this.viewModels.findIndex(vmm => vmm === this.highLightModel);
@@ -11683,7 +11697,7 @@ class ListOfValuesComponent extends BaseInputComponent {
11683
11697
  }
11684
11698
  }
11685
11699
  this.setModel(option);
11686
- this.modelChange.emit(this.model);
11700
+ this.selectedValueChange.emit(option);
11687
11701
  this.detectChanges();
11688
11702
  }
11689
11703
  closePopup() {
@@ -13197,167 +13211,167 @@ class FilterItemComponent {
13197
13211
  FilterItemComponent.decorators = [
13198
13212
  { type: Component, args: [{
13199
13213
  selector: "co-filter-item",
13200
- template: `
13201
- <div class="co-filter-item-header">
13202
- <co-collapsible
13203
- [headerTitle]="placeholder"
13204
- [expandButtonLast]="true"
13205
- [iconData]="iconService.getIcon(icons.ArrowPointDown)"
13206
- [expanded]="expanded"
13207
- [showButton]="showButton"
13208
- [buttonText]="filterButtonLabel"
13209
- (buttonClicked)="onButtonClicked()"
13210
- >
13211
- <div class="co-filter-item-collapsable-content">
13212
- <div class="co-filter-item-custom-content" *ngIf="customContent; else collectionContent"
13213
- (keydown)="showButton=true" (mousedown)="showButton=true">
13214
- <ng-content></ng-content>
13215
- </div>
13216
- <ng-template #collectionContent>
13217
- <div class="co-filter-item-collection-content" *ngIf="mode === modes.Filterlist || mode === modes.SingleSelectList
13218
- || mode === modes.SelectListWithNumberOutput || mode === modes.SelectListWithStringCollectionOutput">
13219
- <co-input-text
13220
- *ngIf="collection?.length > 10 || minSearchCharsToLoadCollection"
13221
- [placeholder]="searchPlaceholder"
13222
- [model]="filterText"
13223
- (modelChange)="onModelChange($event)"
13224
- [readonly]="readonly"
13225
- >
13226
- </co-input-text>
13227
- <div *ngIf="isLoading" class="filter-loader"><span></span></div>
13228
- <div class="no-results" *ngIf="filteredCollection?.length === 0">
13229
- <span [textContent]="noResultsLabel"></span>
13230
- </div>
13231
- <div class="co-filter-item-collection-results">
13232
- <ng-container
13233
- *ngFor="let option of filteredCollection; let index = index">
13234
- <div class="co-filter-item-collection-result-item" *ngIf="index < limitTo || showAllResults">
13235
- <co-input-checkbox *ngIf="mode !== modes.SingleSelectList"
13236
- [label]="option.description"
13237
- [model]="option.checked"
13238
- [clickableLabel]="false"
13239
- (modelChange)="handleModelChange(option)"
13240
- [readonly]="readonly"
13241
- ></co-input-checkbox>
13242
- <co-input-radio-button *ngIf="mode === modes.SingleSelectList"
13243
- [label]="option.description"
13244
- [model]="option.checked"
13245
- (modelChange)="handleModelChange(option)"
13246
- [readonly]="readonly"
13247
- ></co-input-radio-button>
13248
- <div class="co-filter-item-amount" *ngIf="option.count"
13249
- [textContent]="option.count.toString() | append: ')' | prepend: ' ('"
13250
- ></div>
13251
- </div>
13252
-
13253
- </ng-container>
13254
- </div>
13255
- <div class="co-filter-show-more-or-less" *ngIf="!showAllResults">
13256
- <div class="co-filter-show-more clickable"
13257
- *ngIf="moreToShow()">
13258
- <a (click)="increaseLimit()">
13259
- <co-icon [iconData]="iconService.getIcon(icons.ArrowPointDown)"></co-icon>
13260
- <span [textContent]="showMoreLabel"></span>
13261
- </a>
13262
- </div>
13263
- <div class="co-filter-show-less clickable"
13264
- *ngIf="lessToShow()">
13265
- <a (click)="setToInitialLimit()">
13266
- <co-icon [iconData]="iconService.getIcon(icons.ArrowPointUp)"></co-icon>
13267
- <span [textContent]="showLessLabel"></span>
13268
- </a>
13269
- </div>
13270
- </div>
13271
- </div>
13272
- <div class="co-filter-item-slider-content" *ngIf="mode === modes.Slider">
13273
- <co-input-text
13274
- class="slider-from"
13275
- [type]="'number'"
13276
- [digitsOnly]="true"
13277
- [hideArrowButtons]="true"
13278
- [excludePlusMinus]="true"
13279
- [label]="'FROM' | coreLocalize"
13280
- [(model)]="sliderMin"
13281
- [readonly]="readonly"
13282
- (modelChange)="handleModelChange(sliderMin)"
13283
- ></co-input-text>
13284
- <co-input-text
13285
- class="slider-to"
13286
- [type]="'number'"
13287
- [digitsOnly]="true"
13288
- [hideArrowButtons]="true"
13289
- [excludePlusMinus]="true"
13290
- [label]="'TO' | coreLocalize"
13291
- [(model)]="sliderMax"
13292
- [readonly]="readonly"
13293
- (modelChange)="handleModelChange(sliderMax)"
13294
- ></co-input-text>
13295
- </div>
13296
- <div class="co-filter-item-slider-content" *ngIf="mode === modes.NullableSlider">
13297
- <co-input-text
13298
- class="slider-from"
13299
- [type]="'number'"
13300
- [digitsOnly]="true"
13301
- [hideArrowButtons]="true"
13302
- [excludePlusMinus]="true"
13303
- [label]="'FROM' | coreLocalize"
13304
- [(model)]="sliderMin"
13305
- [readonly]="readonly"
13306
- (modelChange)="handleModelChange(sliderMin)"
13307
- ></co-input-text>
13308
- <co-input-text
13309
- class="slider-to"
13310
- [type]="'number'"
13311
- [digitsOnly]="true"
13312
- [hideArrowButtons]="true"
13313
- [excludePlusMinus]="true"
13314
- [label]="'TO' | coreLocalize"
13315
- [(model)]="sliderMax"
13316
- [readonly]="readonly"
13317
- (modelChange)="handleModelChange(sliderMax)"
13318
- ></co-input-text>
13319
- </div>
13320
- <div class="co-filter-item-checkbox-content" *ngIf="mode === modes.Checkbox ">
13321
- <co-input-checkbox
13322
- [(model)]="model"
13323
- (modelChange)="handleModelChange($event)"
13324
- [readonly]="readonly"
13325
- [label]="placeholder">
13326
- </co-input-checkbox>
13327
- </div>
13328
- <div class="co-filter-item-checkbox-content"
13329
- *ngIf="mode === modes.CheckboxToText || mode === modes.CheckboxToSimpleText || mode === modes.CheckboxToBinary">
13330
- <co-input-checkbox
13331
- [(model)]="checkBoxToTextModel"
13332
- (modelChange)="handleModelChange($event)"
13333
- [readonly]="readonly"
13334
- [label]="placeholder"></co-input-checkbox>
13335
- </div>
13336
- <div class="co-filter-item-textfield-content" *ngIf="mode === modes.TextField">
13337
- <co-input-text
13338
- [(model)]="model" [readonly]="readonly"
13339
- (modelChange)="handleModelChange($event)"></co-input-text>
13340
- </div>
13341
- <div class="co-filter-item-dateField-content" *ngIf="mode === modes.DateField">
13342
- <co-input-date
13343
- #dateInput
13344
- [(model)]="dateFieldValue" [readonly]="readonly" [firstDayOfWeek]="firstDayOfWeek"
13345
- (modelChange)="handleModelChange($event)"
13346
- ></co-input-date>
13347
- </div>
13348
- <div class="co-filter-item-dateField-content" *ngIf="mode === modes.DateRangeField">
13349
- <co-input-date-range [readonly]="readonly" [firstDayOfWeek]="firstDayOfWeek"
13350
- #dateRangeInput
13351
- [model]="[dateRangeStart, dateRangeEnd]"
13352
- (modelChange)="handleModelChange($event)"
13353
- [placeholder]="'Kies datum' | coreLocalize">
13354
- </co-input-date-range>
13355
- </div>
13356
- </ng-template>
13357
- </div>
13358
- </co-collapsible>
13359
- </div>
13360
-
13214
+ template: `
13215
+ <div class="co-filter-item-header">
13216
+ <co-collapsible
13217
+ [headerTitle]="placeholder"
13218
+ [expandButtonLast]="true"
13219
+ [iconData]="iconService.getIcon(icons.ArrowPointDown)"
13220
+ [expanded]="expanded"
13221
+ [showButton]="showButton"
13222
+ [buttonText]="filterButtonLabel"
13223
+ (buttonClicked)="onButtonClicked()"
13224
+ >
13225
+ <div class="co-filter-item-collapsable-content">
13226
+ <div class="co-filter-item-custom-content" *ngIf="customContent; else collectionContent"
13227
+ (keydown)="showButton=true" (mousedown)="showButton=true">
13228
+ <ng-content></ng-content>
13229
+ </div>
13230
+ <ng-template #collectionContent>
13231
+ <div class="co-filter-item-collection-content" *ngIf="mode === modes.Filterlist || mode === modes.SingleSelectList
13232
+ || mode === modes.SelectListWithNumberOutput || mode === modes.SelectListWithStringCollectionOutput">
13233
+ <co-input-text
13234
+ *ngIf="collection?.length > 10 || minSearchCharsToLoadCollection"
13235
+ [placeholder]="searchPlaceholder"
13236
+ [model]="filterText"
13237
+ (modelChange)="onModelChange($event)"
13238
+ [readonly]="readonly"
13239
+ >
13240
+ </co-input-text>
13241
+ <div *ngIf="isLoading" class="filter-loader"><span></span></div>
13242
+ <div class="no-results" *ngIf="filteredCollection?.length === 0">
13243
+ <span [textContent]="noResultsLabel"></span>
13244
+ </div>
13245
+ <div class="co-filter-item-collection-results">
13246
+ <ng-container
13247
+ *ngFor="let option of filteredCollection; let index = index">
13248
+ <div class="co-filter-item-collection-result-item" *ngIf="index < limitTo || showAllResults">
13249
+ <co-input-checkbox *ngIf="mode !== modes.SingleSelectList"
13250
+ [label]="option.description"
13251
+ [model]="option.checked"
13252
+ [clickableLabel]="false"
13253
+ (modelChange)="handleModelChange(option)"
13254
+ [readonly]="readonly"
13255
+ ></co-input-checkbox>
13256
+ <co-input-radio-button *ngIf="mode === modes.SingleSelectList"
13257
+ [label]="option.description"
13258
+ [model]="option.checked"
13259
+ (modelChange)="handleModelChange(option)"
13260
+ [readonly]="readonly"
13261
+ ></co-input-radio-button>
13262
+ <div class="co-filter-item-amount" *ngIf="option.count"
13263
+ [textContent]="option.count.toString() | append: ')' | prepend: ' ('"
13264
+ ></div>
13265
+ </div>
13266
+
13267
+ </ng-container>
13268
+ </div>
13269
+ <div class="co-filter-show-more-or-less" *ngIf="!showAllResults">
13270
+ <div class="co-filter-show-more clickable"
13271
+ *ngIf="moreToShow()">
13272
+ <a (click)="increaseLimit()">
13273
+ <co-icon [iconData]="iconService.getIcon(icons.ArrowPointDown)"></co-icon>
13274
+ <span [textContent]="showMoreLabel"></span>
13275
+ </a>
13276
+ </div>
13277
+ <div class="co-filter-show-less clickable"
13278
+ *ngIf="lessToShow()">
13279
+ <a (click)="setToInitialLimit()">
13280
+ <co-icon [iconData]="iconService.getIcon(icons.ArrowPointUp)"></co-icon>
13281
+ <span [textContent]="showLessLabel"></span>
13282
+ </a>
13283
+ </div>
13284
+ </div>
13285
+ </div>
13286
+ <div class="co-filter-item-slider-content" *ngIf="mode === modes.Slider">
13287
+ <co-input-text
13288
+ class="slider-from"
13289
+ [type]="'number'"
13290
+ [digitsOnly]="true"
13291
+ [hideArrowButtons]="true"
13292
+ [excludePlusMinus]="true"
13293
+ [label]="'FROM' | coreLocalize"
13294
+ [(model)]="sliderMin"
13295
+ [readonly]="readonly"
13296
+ (modelChange)="handleModelChange(sliderMin)"
13297
+ ></co-input-text>
13298
+ <co-input-text
13299
+ class="slider-to"
13300
+ [type]="'number'"
13301
+ [digitsOnly]="true"
13302
+ [hideArrowButtons]="true"
13303
+ [excludePlusMinus]="true"
13304
+ [label]="'TO' | coreLocalize"
13305
+ [(model)]="sliderMax"
13306
+ [readonly]="readonly"
13307
+ (modelChange)="handleModelChange(sliderMax)"
13308
+ ></co-input-text>
13309
+ </div>
13310
+ <div class="co-filter-item-slider-content" *ngIf="mode === modes.NullableSlider">
13311
+ <co-input-text
13312
+ class="slider-from"
13313
+ [type]="'number'"
13314
+ [digitsOnly]="true"
13315
+ [hideArrowButtons]="true"
13316
+ [excludePlusMinus]="true"
13317
+ [label]="'FROM' | coreLocalize"
13318
+ [(model)]="sliderMin"
13319
+ [readonly]="readonly"
13320
+ (modelChange)="handleModelChange(sliderMin)"
13321
+ ></co-input-text>
13322
+ <co-input-text
13323
+ class="slider-to"
13324
+ [type]="'number'"
13325
+ [digitsOnly]="true"
13326
+ [hideArrowButtons]="true"
13327
+ [excludePlusMinus]="true"
13328
+ [label]="'TO' | coreLocalize"
13329
+ [(model)]="sliderMax"
13330
+ [readonly]="readonly"
13331
+ (modelChange)="handleModelChange(sliderMax)"
13332
+ ></co-input-text>
13333
+ </div>
13334
+ <div class="co-filter-item-checkbox-content" *ngIf="mode === modes.Checkbox ">
13335
+ <co-input-checkbox
13336
+ [(model)]="model"
13337
+ (modelChange)="handleModelChange($event)"
13338
+ [readonly]="readonly"
13339
+ [label]="placeholder">
13340
+ </co-input-checkbox>
13341
+ </div>
13342
+ <div class="co-filter-item-checkbox-content"
13343
+ *ngIf="mode === modes.CheckboxToText || mode === modes.CheckboxToSimpleText || mode === modes.CheckboxToBinary">
13344
+ <co-input-checkbox
13345
+ [(model)]="checkBoxToTextModel"
13346
+ (modelChange)="handleModelChange($event)"
13347
+ [readonly]="readonly"
13348
+ [label]="placeholder"></co-input-checkbox>
13349
+ </div>
13350
+ <div class="co-filter-item-textfield-content" *ngIf="mode === modes.TextField">
13351
+ <co-input-text
13352
+ [(model)]="model" [readonly]="readonly"
13353
+ (modelChange)="handleModelChange($event)"></co-input-text>
13354
+ </div>
13355
+ <div class="co-filter-item-dateField-content" *ngIf="mode === modes.DateField">
13356
+ <co-input-date
13357
+ #dateInput
13358
+ [(model)]="dateFieldValue" [readonly]="readonly" [firstDayOfWeek]="firstDayOfWeek"
13359
+ (modelChange)="handleModelChange($event)"
13360
+ ></co-input-date>
13361
+ </div>
13362
+ <div class="co-filter-item-dateField-content" *ngIf="mode === modes.DateRangeField">
13363
+ <co-input-date-range [readonly]="readonly" [firstDayOfWeek]="firstDayOfWeek"
13364
+ #dateRangeInput
13365
+ [model]="[dateRangeStart, dateRangeEnd]"
13366
+ (modelChange)="handleModelChange($event)"
13367
+ [placeholder]="'Kies datum' | coreLocalize">
13368
+ </co-input-date-range>
13369
+ </div>
13370
+ </ng-template>
13371
+ </div>
13372
+ </co-collapsible>
13373
+ </div>
13374
+
13361
13375
  `,
13362
13376
  encapsulation: ViewEncapsulation.None,
13363
13377
  changeDetection: ChangeDetectionStrategy.OnPush,