@colijnit/corecomponents_v12 260.1.10 → 260.1.11

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 (24) hide show
  1. package/README.md +24 -24
  2. package/bundles/colijnit-corecomponents_v12.umd.js +8 -2
  3. package/bundles/colijnit-corecomponents_v12.umd.js.map +1 -1
  4. package/colijnit-corecomponents_v12-260.1.11.tgz +0 -0
  5. package/colijnit-corecomponents_v12.metadata.json +1 -1
  6. package/esm2015/lib/components/base/base-input.component.js +3 -1
  7. package/esm2015/lib/components/co-dialog/co-dialog.component.js +22 -22
  8. package/esm2015/lib/components/co-dialog-wizard/co-dialog-wizard.component.js +16 -16
  9. package/esm2015/lib/components/filter-item/filter-item.component.js +162 -162
  10. package/esm2015/lib/components/input-number-picker/input-number-picker.component.js +33 -33
  11. package/esm2015/lib/components/input-number-picker/input-number-picker.module.js +1 -1
  12. package/esm2015/lib/components/list-of-values/list-of-values-popup.component.js +6 -2
  13. package/esm2015/lib/components/list-of-values/list-of-values.component.js +2 -2
  14. package/esm2015/lib/components/simple-grid/simple-grid-cell.component.js +31 -31
  15. package/esm2015/lib/components/simple-grid/simple-grid.component.js +180 -180
  16. package/esm2015/lib/core/enum/core-components-icon.enum.js +1 -1
  17. package/esm2015/lib/core/model/core-components-icon-svg.js +1 -1
  18. package/esm2015/lib/directives/screen-configuration/screen-configuration.module.js +1 -1
  19. package/esm2015/public-api.js +1 -1
  20. package/fesm2015/colijnit-corecomponents_v12.js +446 -440
  21. package/fesm2015/colijnit-corecomponents_v12.js.map +1 -1
  22. package/lib/components/base/base-input.component.d.ts +1 -0
  23. package/lib/components/calendar/style/_material-definition.scss +46 -46
  24. 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, {
@@ -10167,185 +10169,185 @@ class SimpleGridComponent extends BaseSimpleGridComponent {
10167
10169
  SimpleGridComponent.decorators = [
10168
10170
  { type: Component, args: [{
10169
10171
  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>
10172
+ template: `
10173
+ <co-grid-toolbar
10174
+ *ngIf="showToolbar" [class.right]="rightToolbar"
10175
+ [showEdit]="showEdit"
10176
+ [showAdd]="showAdd"
10177
+ [showDelete]="showDelete"
10178
+ [deleteEnabled]="selectedRowIndex > -1"
10179
+ (addClick)="addNewRow()"
10180
+ (editClick)="editRow($event)"
10181
+ (saveClick)="validateAndSave()"
10182
+ (cancelClick)="cancelEditRow()"
10183
+ (deleteClick)="removeRow()">
10184
+ </co-grid-toolbar>
10185
+
10186
+ <table
10187
+ id="simple-grid-table"
10188
+ class="simple-grid-table"
10189
+ [clickOutside]="editing"
10190
+ (clickOutside)="handleClickOutsideRow()">
10191
+ <colgroup>
10192
+ <col
10193
+ *ngFor="let column of headerColumnsCopy; let index = index"
10194
+ [class.simple-grid-column-auto-fit]="column.autoFit"
10195
+ [style.width.px]="column.width"
10196
+ [style.min-width.px]="MIN_COLUMN_WIDTH">
10197
+ <col
10198
+ *ngIf="((inlineEdit && showRowButtons) || (showDelete && !showRowButtons)) && (hoveredRowIndex >= 0 || selectedRowIndex >= 0 || isNewRow)"
10199
+ [class.icons-col]="true"
10200
+ [class.col-width-row-buttons]="inlineEdit && showRowButtons"
10201
+ [class.col-width-delete]="!showRowButtons && showDelete">
10202
+ </colgroup>
10203
+ <thead>
10204
+ <tr>
10205
+ <th
10206
+ scope="col"
10207
+ #headerCell
10208
+ class="simple-grid-column-header"
10209
+ *ngFor="let column of headerColumnsCopy; let index = index">
10210
+ <div
10211
+ class="simple-grid-column-header-wrapper"
10212
+ [class.resizable]="resizable"
10213
+ [class.selected]="column.isSelected"
10214
+ [ngClass]="column.textAlign ? column.textAlign : defaultTextAlign">
10215
+ <ng-container *ngIf="column.headerTemplate; else noHeaderTemplate">
10216
+ <ng-container [ngTemplateOutlet]="column.headerTemplate"></ng-container>
10217
+ </ng-container>
10218
+ <ng-template #noHeaderTemplate>
10219
+ <div
10220
+ class="simple-grid-column-header-label"
10221
+ [ngClass]="column.textAlign ? column.textAlign : defaultTextAlign"
10222
+ [class.with-menu]="showGridSettings"
10223
+ [class.with-sort]="showColumnSort"
10224
+ [textContent]="column.headerText || '&nbsp;'" [title]="column.headerText"
10225
+ (click)="showColumnSort ? sortColumn(column, column.field) : toggleColumnMenu(column)">
10226
+ </div>
10227
+
10228
+ <div class="sort-column" *ngIf="showColumnSort">
10229
+ <co-button
10230
+ (click)="sortColumn(column, column?.field)"
10231
+ [iconData]="icons.getIcon(Icons.ArrowUpArrowDown)">
10232
+ </co-button>
10233
+ </div>
10234
+
10235
+ <div class="column-menu" *ngIf="column.isSelected">
10236
+ <h3 [textContent]="'COLUMN_OPTIONS' | coreLocalize"></h3>
10237
+ <ul>
10238
+ <li (click)="hideColumn(column)">Hide Column</li>
10239
+ <li (click)="sortColumn(column, column.field)">Sort Column</li>
10240
+ </ul>
10241
+ </div>
10242
+ </ng-template>
10243
+ <div
10244
+ *ngIf="resizable && column.resizable"
10245
+ class="simple-grid-column-sizer"
10246
+ (mousedown)="handleSizerMouseDown($event, column)">
10247
+ </div>
10248
+ </div>
10249
+ </th>
10250
+ </tr>
10251
+
10252
+ <div *ngIf="showGridSettings" class="grid-settings">
10253
+ <co-button
10254
+ [class.selected]="isSettingsMenuOpen"
10255
+ [iconData]="icons.getIcon(Icons.CogWheels)"
10256
+ (click)="toggleSettingsMenu()">
10257
+ </co-button>
10258
+
10259
+ <div class="settings-menu" *ngIf="isSettingsMenuOpen">
10260
+ <h3 [textContent]="'GRID_OPTIONS' | coreLocalize"></h3>
10261
+ <ul>
10262
+ <li (click)="exportToExcel()">Export to Excel</li>
10263
+ <li *ngIf="headerColumnsCopy.length !== headerColumns.length" (click)="showAllColumns()">
10264
+ Show All Columns
10265
+ </li>
10266
+ </ul>
10267
+ </div>
10268
+ </div>
10269
+ </thead>
10270
+ <tbody
10271
+ #dropList cdkDropList cdkDropListOrientation="vertical"
10272
+ class="simple-grid-drag-drop-list"
10273
+ [cdkDropListDisabled]="!dragDropEnabled || editing"
10274
+ [cdkDropListData]="data"
10275
+ [cdkDropListEnterPredicate]="handleCanDragDrop"
10276
+ (cdkDropListDropped)="handleDrop($event)">
10277
+ <co-form class="simple-grid-row-form">
10278
+ <tr
10279
+ #rowElement
10280
+ class="simple-grid-row"
10281
+ [class.selected]="rowIndex === selectedRowIndex && !editing" observeVisibility
10282
+ [class.disabled]="getIsRowDisabled(rowIndex)"
10283
+ [class.editing]="rowIndex === editRowIndex"
10284
+ *ngFor="let row of (!!rowsPerPage ? (data | paginate: {itemsPerPage: rowsPerPage, currentPage: currentPage}) : data); last as last; let rowIndex = index"
10285
+ cdkDrag
10286
+ (click)="handleClickRow($event, rowIndex)" (dblclick)="handleDblClickRow($event, rowIndex, row)"
10287
+ (visibilityChange)="rowVisible.next(row)"
10288
+ (mouseenter)="hoveredRowIndex = rowIndex"
10289
+ (mouseleave)="hoveredRowIndex = -1"
10290
+ >
10291
+ <ng-container *ngIf="isSingleColumnRow(row)">
10292
+ <td class="simple-grid-single-column-cell" [attr.colspan]="headerColumnsCopy.length">
10293
+ <co-simple-grid-cell
10294
+ [column]="columns[singleColumnIndex(row)]"
10295
+ [row]="row"
10296
+ [editMode]="false">
10297
+ </co-simple-grid-cell>
10298
+ </td>
10299
+ </ng-container>
10300
+ <ng-container *ngIf="!isSingleColumnRow(row)">
10301
+ <ng-container *ngFor="let column of headerColumnsCopy; let columnIndex = index">
10302
+ <td class="simple-grid-column-cell" *ngIf="columnIndex !== singleColumnIndex(row)">
10303
+ <co-simple-grid-cell
10304
+ [column]="column"
10305
+ [row]="row"
10306
+ [editMode]="inlineEdit && editing && rowIndex === editRowIndex"
10307
+ [fieldEditMode]="editCellIndex === columnIndex && rowIndex === editRowIndex"
10308
+ (cellClick)="handleCellClick($event, row, rowIndex, columnIndex)">
10309
+ </co-simple-grid-cell>
10310
+ <div *ngIf="column.resizable" class="simple-grid-column-sizer-placeholder"></div>
10311
+ </td>
10312
+ </ng-container>
10313
+ <ng-container *ngIf="(inlineEdit && showRowButtons) || (showDelete && !showRowButtons)">
10314
+ <td class="icons-container"
10315
+ *ngIf="(editRowIndex <= -1 && selectedRowIndex === -1 && hoveredRowIndex === rowIndex) || selectedRowIndex === rowIndex || (isNewRow && rowIndex === editRowIndex)">
10316
+ <ng-container>
10317
+ <co-icon class="icon-item icon-edit"
10318
+ *ngIf="!editing && (inlineEdit && showRowButtons)"
10319
+ [iconData]="icons.getIcon(Icons.PenToSquareSolid)"
10320
+ (click)="editRow($event, true, rowIndex); $event.stopPropagation()"></co-icon>
10321
+ <co-icon class="icon-item icon-delete"
10322
+ [iconData]="icons.getIcon(Icons.TrashBin)"
10323
+ *ngIf="(!editing && (inlineEdit || !inlineEdit) && showRowButtons) || (!showRowButtons && showDelete)"
10324
+ (click)="selectTheRow(rowIndex); removeRow();"></co-icon>
10325
+ </ng-container>
10326
+ <ng-container *ngIf="editing && inlineEdit && showRowButtons && (selectedRowIndex === rowIndex || isNewRow)">
10327
+ <co-button class="save-button"
10328
+ [iconData]="icons.getIcon(Icons.CheckDuotone)"
10329
+ (click)="validateAndSave(); $event.stopPropagation()"></co-button>
10330
+ <co-button class="close-button"
10331
+ [iconData]="icons.getIcon(Icons.CrossSkinny)"
10332
+ (click)="cancelEditRow(); $event.stopPropagation() "></co-button>
10333
+ </ng-container>
10334
+ </td>
10335
+ </ng-container>
10336
+ </ng-container>
10337
+ </tr>
10338
+ </co-form>
10339
+ </tbody>
10340
+ </table>
10341
+ <co-pagination-bar
10342
+ *ngIf="data?.length > rowsPerPage" class="pagination-bar"
10343
+ [itemsPerPage]="rowsPerPage"
10344
+ [currentPage]="currentPage"
10345
+ [totalItems]="data.length"
10346
+ [autoHide]="true"
10347
+ (previousClick)="goToPreviousPage()"
10348
+ (nextClick)="goToNextPage()"
10349
+ (pageClick)="setCurrentPage($event)">
10350
+ </co-pagination-bar>
10349
10351
  `,
10350
10352
  providers: [FormMasterService],
10351
10353
  changeDetection: ChangeDetectionStrategy.OnPush,
@@ -10989,36 +10991,36 @@ class SimpleGridCellComponent {
10989
10991
  SimpleGridCellComponent.decorators = [
10990
10992
  { type: Component, args: [{
10991
10993
  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>
10994
+ template: `
10995
+ <div class="simple-grid-column-cell-value" [ngClass]="column.textAlign ? column.textAlign : defaultTextAlign">
10996
+ <ng-container *ngIf="editMode; else noInlineEdit">
10997
+ <div class="simple-grid-column-cell-field">
10998
+ <ng-container #editTemplate *ngIf="column.editTemplate; else noEditTemplate"
10999
+ [ngTemplateOutlet]="column.editTemplate"
11000
+ [ngTemplateOutletContext]="{value: row[column.field], row: row}"></ng-container>
11001
+ <ng-template #noEditTemplate>
11002
+ <ng-container *ngIf="column.template; else noTemplate">
11003
+ <ng-container [ngTemplateOutlet]="column.template"
11004
+ [ngTemplateOutletContext]="{value: row[column.field], row: row}"></ng-container>
11005
+ </ng-container>
11006
+ <ng-template #noTemplate>
11007
+ <co-input-text [(model)]="row[column.field]" [required]="column.required"></co-input-text>
11008
+ </ng-template>
11009
+ </ng-template>
11010
+ </div>
11011
+ </ng-container>
11012
+ <ng-template #noInlineEdit>
11013
+ <div class="simple-grid-column-cell-field">
11014
+ <ng-container *ngIf="column.template; else noTemplate">
11015
+ <ng-container [ngTemplateOutlet]="column.template"
11016
+ [ngTemplateOutletContext]="{value: row[column.field], row: row}"></ng-container>
11017
+ </ng-container>
11018
+ <ng-template #noTemplate>
11019
+ <span [textContent]="column.getFieldValue(row[column.field])" [title]="row[column.field]"></span>
11020
+ </ng-template>
11021
+ </div>
11022
+ </ng-template>
11023
+ </div>
11022
11024
  `,
11023
11025
  encapsulation: ViewEncapsulation.None
11024
11026
  },] }
@@ -11411,7 +11413,11 @@ class ListOfValuesPopupComponent {
11411
11413
  }
11412
11414
  _prepareViewModels() {
11413
11415
  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() : ""));
11416
+ this.viewModels = this.viewModelsMain.filter(vm => {
11417
+ return Object.values(vm.model).some((value) => {
11418
+ return value.toString().toLowerCase().includes(this.searchTerm ? this.searchTerm.toLowerCase() : '');
11419
+ });
11420
+ });
11415
11421
  }
11416
11422
  _scrollIntoView() {
11417
11423
  const activeIndex = this.viewModels.findIndex(vmm => vmm === this.highLightModel);
@@ -11683,7 +11689,7 @@ class ListOfValuesComponent extends BaseInputComponent {
11683
11689
  }
11684
11690
  }
11685
11691
  this.setModel(option);
11686
- this.modelChange.emit(this.model);
11692
+ this.selectedValueChange.emit(option);
11687
11693
  this.detectChanges();
11688
11694
  }
11689
11695
  closePopup() {
@@ -13197,167 +13203,167 @@ class FilterItemComponent {
13197
13203
  FilterItemComponent.decorators = [
13198
13204
  { type: Component, args: [{
13199
13205
  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
-
13206
+ template: `
13207
+ <div class="co-filter-item-header">
13208
+ <co-collapsible
13209
+ [headerTitle]="placeholder"
13210
+ [expandButtonLast]="true"
13211
+ [iconData]="iconService.getIcon(icons.ArrowPointDown)"
13212
+ [expanded]="expanded"
13213
+ [showButton]="showButton"
13214
+ [buttonText]="filterButtonLabel"
13215
+ (buttonClicked)="onButtonClicked()"
13216
+ >
13217
+ <div class="co-filter-item-collapsable-content">
13218
+ <div class="co-filter-item-custom-content" *ngIf="customContent; else collectionContent"
13219
+ (keydown)="showButton=true" (mousedown)="showButton=true">
13220
+ <ng-content></ng-content>
13221
+ </div>
13222
+ <ng-template #collectionContent>
13223
+ <div class="co-filter-item-collection-content" *ngIf="mode === modes.Filterlist || mode === modes.SingleSelectList
13224
+ || mode === modes.SelectListWithNumberOutput || mode === modes.SelectListWithStringCollectionOutput">
13225
+ <co-input-text
13226
+ *ngIf="collection?.length > 10 || minSearchCharsToLoadCollection"
13227
+ [placeholder]="searchPlaceholder"
13228
+ [model]="filterText"
13229
+ (modelChange)="onModelChange($event)"
13230
+ [readonly]="readonly"
13231
+ >
13232
+ </co-input-text>
13233
+ <div *ngIf="isLoading" class="filter-loader"><span></span></div>
13234
+ <div class="no-results" *ngIf="filteredCollection?.length === 0">
13235
+ <span [textContent]="noResultsLabel"></span>
13236
+ </div>
13237
+ <div class="co-filter-item-collection-results">
13238
+ <ng-container
13239
+ *ngFor="let option of filteredCollection; let index = index">
13240
+ <div class="co-filter-item-collection-result-item" *ngIf="index < limitTo || showAllResults">
13241
+ <co-input-checkbox *ngIf="mode !== modes.SingleSelectList"
13242
+ [label]="option.description"
13243
+ [model]="option.checked"
13244
+ [clickableLabel]="false"
13245
+ (modelChange)="handleModelChange(option)"
13246
+ [readonly]="readonly"
13247
+ ></co-input-checkbox>
13248
+ <co-input-radio-button *ngIf="mode === modes.SingleSelectList"
13249
+ [label]="option.description"
13250
+ [model]="option.checked"
13251
+ (modelChange)="handleModelChange(option)"
13252
+ [readonly]="readonly"
13253
+ ></co-input-radio-button>
13254
+ <div class="co-filter-item-amount" *ngIf="option.count"
13255
+ [textContent]="option.count.toString() | append: ')' | prepend: ' ('"
13256
+ ></div>
13257
+ </div>
13258
+
13259
+ </ng-container>
13260
+ </div>
13261
+ <div class="co-filter-show-more-or-less" *ngIf="!showAllResults">
13262
+ <div class="co-filter-show-more clickable"
13263
+ *ngIf="moreToShow()">
13264
+ <a (click)="increaseLimit()">
13265
+ <co-icon [iconData]="iconService.getIcon(icons.ArrowPointDown)"></co-icon>
13266
+ <span [textContent]="showMoreLabel"></span>
13267
+ </a>
13268
+ </div>
13269
+ <div class="co-filter-show-less clickable"
13270
+ *ngIf="lessToShow()">
13271
+ <a (click)="setToInitialLimit()">
13272
+ <co-icon [iconData]="iconService.getIcon(icons.ArrowPointUp)"></co-icon>
13273
+ <span [textContent]="showLessLabel"></span>
13274
+ </a>
13275
+ </div>
13276
+ </div>
13277
+ </div>
13278
+ <div class="co-filter-item-slider-content" *ngIf="mode === modes.Slider">
13279
+ <co-input-text
13280
+ class="slider-from"
13281
+ [type]="'number'"
13282
+ [digitsOnly]="true"
13283
+ [hideArrowButtons]="true"
13284
+ [excludePlusMinus]="true"
13285
+ [label]="'FROM' | coreLocalize"
13286
+ [(model)]="sliderMin"
13287
+ [readonly]="readonly"
13288
+ (modelChange)="handleModelChange(sliderMin)"
13289
+ ></co-input-text>
13290
+ <co-input-text
13291
+ class="slider-to"
13292
+ [type]="'number'"
13293
+ [digitsOnly]="true"
13294
+ [hideArrowButtons]="true"
13295
+ [excludePlusMinus]="true"
13296
+ [label]="'TO' | coreLocalize"
13297
+ [(model)]="sliderMax"
13298
+ [readonly]="readonly"
13299
+ (modelChange)="handleModelChange(sliderMax)"
13300
+ ></co-input-text>
13301
+ </div>
13302
+ <div class="co-filter-item-slider-content" *ngIf="mode === modes.NullableSlider">
13303
+ <co-input-text
13304
+ class="slider-from"
13305
+ [type]="'number'"
13306
+ [digitsOnly]="true"
13307
+ [hideArrowButtons]="true"
13308
+ [excludePlusMinus]="true"
13309
+ [label]="'FROM' | coreLocalize"
13310
+ [(model)]="sliderMin"
13311
+ [readonly]="readonly"
13312
+ (modelChange)="handleModelChange(sliderMin)"
13313
+ ></co-input-text>
13314
+ <co-input-text
13315
+ class="slider-to"
13316
+ [type]="'number'"
13317
+ [digitsOnly]="true"
13318
+ [hideArrowButtons]="true"
13319
+ [excludePlusMinus]="true"
13320
+ [label]="'TO' | coreLocalize"
13321
+ [(model)]="sliderMax"
13322
+ [readonly]="readonly"
13323
+ (modelChange)="handleModelChange(sliderMax)"
13324
+ ></co-input-text>
13325
+ </div>
13326
+ <div class="co-filter-item-checkbox-content" *ngIf="mode === modes.Checkbox ">
13327
+ <co-input-checkbox
13328
+ [(model)]="model"
13329
+ (modelChange)="handleModelChange($event)"
13330
+ [readonly]="readonly"
13331
+ [label]="placeholder">
13332
+ </co-input-checkbox>
13333
+ </div>
13334
+ <div class="co-filter-item-checkbox-content"
13335
+ *ngIf="mode === modes.CheckboxToText || mode === modes.CheckboxToSimpleText || mode === modes.CheckboxToBinary">
13336
+ <co-input-checkbox
13337
+ [(model)]="checkBoxToTextModel"
13338
+ (modelChange)="handleModelChange($event)"
13339
+ [readonly]="readonly"
13340
+ [label]="placeholder"></co-input-checkbox>
13341
+ </div>
13342
+ <div class="co-filter-item-textfield-content" *ngIf="mode === modes.TextField">
13343
+ <co-input-text
13344
+ [(model)]="model" [readonly]="readonly"
13345
+ (modelChange)="handleModelChange($event)"></co-input-text>
13346
+ </div>
13347
+ <div class="co-filter-item-dateField-content" *ngIf="mode === modes.DateField">
13348
+ <co-input-date
13349
+ #dateInput
13350
+ [(model)]="dateFieldValue" [readonly]="readonly" [firstDayOfWeek]="firstDayOfWeek"
13351
+ (modelChange)="handleModelChange($event)"
13352
+ ></co-input-date>
13353
+ </div>
13354
+ <div class="co-filter-item-dateField-content" *ngIf="mode === modes.DateRangeField">
13355
+ <co-input-date-range [readonly]="readonly" [firstDayOfWeek]="firstDayOfWeek"
13356
+ #dateRangeInput
13357
+ [model]="[dateRangeStart, dateRangeEnd]"
13358
+ (modelChange)="handleModelChange($event)"
13359
+ [placeholder]="'Kies datum' | coreLocalize">
13360
+ </co-input-date-range>
13361
+ </div>
13362
+ </ng-template>
13363
+ </div>
13364
+ </co-collapsible>
13365
+ </div>
13366
+
13361
13367
  `,
13362
13368
  encapsulation: ViewEncapsulation.None,
13363
13369
  changeDetection: ChangeDetectionStrategy.OnPush,