@colijnit/corecomponents_v12 259.1.4 → 259.1.6

package/bundles/colijnit-corecomponents_v12.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/forms'), require('rxjs'), require('@angular/platform-browser'), require('@angular/animations'), require('@angular/common'), require('@angular/common/http'), require('rxjs/operators'), require('three'), require('three/examples/jsm/renderers/CSS3DRenderer'), require('@tweenjs/tween.js'), require('hammerjs'), require('@angular/cdk/drag-drop'), require('@colijnit/mainapi/build/model/co-document.bo'), require('@angular/cdk/overlay'), require('@angular/cdk/portal'), require('xlsx'), require('@colijnit/ioneconnector/build/enum/user-right-type.enum'), require('@angular/cdk/scrolling'), require('@colijnit/ioneconnector/build/utils/array-utils'), require('@colijnit/ioneconnector/build/model/default-get-object-configurations-params'), require('@colijnit/ioneconnector/build/model/object-configuration')) :
-    typeof define === 'function' && define.amd ? define('@colijnit/corecomponents_v12', ['exports', '@angular/core', '@angular/forms', 'rxjs', '@angular/platform-browser', '@angular/animations', '@angular/common', '@angular/common/http', 'rxjs/operators', 'three', 'three/examples/jsm/renderers/CSS3DRenderer', '@tweenjs/tween.js', 'hammerjs', '@angular/cdk/drag-drop', '@colijnit/mainapi/build/model/co-document.bo', '@angular/cdk/overlay', '@angular/cdk/portal', 'xlsx', '@colijnit/ioneconnector/build/enum/user-right-type.enum', '@angular/cdk/scrolling', '@colijnit/ioneconnector/build/utils/array-utils', '@colijnit/ioneconnector/build/model/default-get-object-configurations-params', '@colijnit/ioneconnector/build/model/object-configuration'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.colijnit = global.colijnit || {}, global.colijnit.corecomponents_v12 = {}), global.ng.core, global.ng.forms, global.rxjs, global.ng.platformBrowser, global.ng.animations, global.ng.common, global.ng.common.http, global.rxjs.operators, global.three, global.CSS3DRenderer, global.TWEEN, null, global.ng.cdk.dragDrop, global.coDocument_bo, global.ng.cdk.overlay, global.ng.cdk.portal, global.XLSX, global.userRightType_enum, global.ng.cdk.scrolling, global.arrayUtils, global.defaultGetObjectConfigurationsParams, global.objectConfiguration));
-})(this, (function (exports, i0, forms, rxjs, platformBrowser, animations, common, http, operators, three, CSS3DRenderer, TWEEN, hammerjs, dragDrop, coDocument_bo, i1, portal, XLSX, userRightType_enum, scrolling, arrayUtils, defaultGetObjectConfigurationsParams, objectConfiguration) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/forms'), require('rxjs'), require('@angular/platform-browser'), require('@angular/animations'), require('@angular/common'), require('@angular/common/http'), require('rxjs/operators'), require('three'), require('three/examples/jsm/renderers/CSS3DRenderer'), require('@tweenjs/tween.js'), require('hammerjs'), require('@angular/cdk/drag-drop'), require('@colijnit/mainapi/build/model/co-document.bo'), require('@angular/cdk/overlay'), require('@angular/cdk/portal'), require('@colijnit/ioneconnector/build/enum/user-right-type.enum'), require('@angular/cdk/scrolling'), require('@colijnit/ioneconnector/build/utils/array-utils'), require('@colijnit/ioneconnector/build/model/default-get-object-configurations-params'), require('@colijnit/ioneconnector/build/model/object-configuration')) :
+    typeof define === 'function' && define.amd ? define('@colijnit/corecomponents_v12', ['exports', '@angular/core', '@angular/forms', 'rxjs', '@angular/platform-browser', '@angular/animations', '@angular/common', '@angular/common/http', 'rxjs/operators', 'three', 'three/examples/jsm/renderers/CSS3DRenderer', '@tweenjs/tween.js', 'hammerjs', '@angular/cdk/drag-drop', '@colijnit/mainapi/build/model/co-document.bo', '@angular/cdk/overlay', '@angular/cdk/portal', '@colijnit/ioneconnector/build/enum/user-right-type.enum', '@angular/cdk/scrolling', '@colijnit/ioneconnector/build/utils/array-utils', '@colijnit/ioneconnector/build/model/default-get-object-configurations-params', '@colijnit/ioneconnector/build/model/object-configuration'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.colijnit = global.colijnit || {}, global.colijnit.corecomponents_v12 = {}), global.ng.core, global.ng.forms, global.rxjs, global.ng.platformBrowser, global.ng.animations, global.ng.common, global.ng.common.http, global.rxjs.operators, global.three, global.CSS3DRenderer, global.TWEEN, null, global.ng.cdk.dragDrop, global.coDocument_bo, global.ng.cdk.overlay, global.ng.cdk.portal, global.userRightType_enum, global.ng.cdk.scrolling, global.arrayUtils, global.defaultGetObjectConfigurationsParams, global.objectConfiguration));
+})(this, (function (exports, i0, forms, rxjs, platformBrowser, animations, common, http, operators, three, CSS3DRenderer, TWEEN, hammerjs, dragDrop, coDocument_bo, i1, portal, userRightType_enum, scrolling, arrayUtils, defaultGetObjectConfigurationsParams, objectConfiguration) { 'use strict';
 
     function _interopNamespace(e) {
         if (e && e.__esModule) return e;
@@ -25,7 +25,6 @@
     var i0__namespace = /*#__PURE__*/_interopNamespace(i0);
     var TWEEN__namespace = /*#__PURE__*/_interopNamespace(TWEEN);
     var i1__namespace = /*#__PURE__*/_interopNamespace(i1);
-    var XLSX__namespace = /*#__PURE__*/_interopNamespace(XLSX);
 
     /******************************************************************************
     Copyright (c) Microsoft Corporation.
@@ -1559,6 +1558,7 @@
         CoreComponentsIcon["Orderpicking"] = "orderpicking";
         CoreComponentsIcon["OutgoingStorage"] = "outgoing_storage";
         CoreComponentsIcon["OverBooking"] = "over_booking";
+        CoreComponentsIcon["ParagraphSolid"] = "paragraph_solid";
         CoreComponentsIcon["PauseCircle"] = "pause_circle";
         CoreComponentsIcon["PencilRoundOpen"] = "pencil_round_open";
         CoreComponentsIcon["PenToSquareSolid"] = "pen_to_square_solid";
@@ -1862,6 +1862,7 @@
         "orderpicking": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 50 50\"><path d=\"M16.43,40.17c-.12-.16-2.92-4-1.53-8.21,1.33-4.08,6.25-9.69,6.46-9.84l.72-.55,2.28,2.83-1.45,1.17-1.13-1.39c-1.34,1.14-4.23,5.68-5.1,8.36C15.59,35.88,17.9,39,17.93,39l-1.5,1.13Z\" fill=\"#484f60\"/><path d=\"M27.86,41l-1.74-.66A17.68,17.68,0,0,0,27,32.56,63.51,63.51,0,0,0,25.5,25.1l-1.29-.38,1.27-4.35,1.05,2.26a81.55,81.55,0,0,1,2.28,9.64A19,19,0,0,1,27.86,41Z\" fill=\"#484f60\"/><path d=\"M34,39.94l-1.67-.83s1.9-3.88,1-6.39a36.83,36.83,0,0,0-4.84-8.51l-1.37,1.42-1.34-1.29,2.71-2.82.67.69c.2.2,4.84,6.82,5.93,9.89,1.16,3.25-1,7.65-1.1,7.84Z\" fill=\"#484f60\"/><rect x=\"22.91\" y=\"24.41\" width=\"4.48\" height=\"1.17\" fill=\"#484f60\"/><polygon points=\"23.52 9 23.52 20.93 23.93 21.44 25.28 16.78 26.7 19.85 26.7 9 23.52 9\" fill=\"#484f60\"/></svg>",
         "outgoing_storage": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 50 50\"><rect x=\"10\" y=\"12.36\" width=\"2.93\" height=\"25.61\" fill=\"#484f60\" opacity=\"0.5\"/><rect x=\"14.39\" y=\"30.65\" width=\"11.22\" height=\"1.46\" fill=\"#484f60\" opacity=\"0.5\"/><rect x=\"14.39\" y=\"21.87\" width=\"9.11\" height=\"1.46\" fill=\"#484f60\" opacity=\"0.5\"/><rect x=\"27.07\" y=\"29.46\" width=\"2.93\" height=\"8.51\" fill=\"#484f60\" opacity=\"0.5\"/><rect x=\"27.07\" y=\"12.36\" width=\"2.93\" height=\"8.51\" fill=\"#484f60\" opacity=\"0.5\"/><rect x=\"14.39\" y=\"13.09\" width=\"11.22\" height=\"1.46\" fill=\"#484f60\" opacity=\"0.5\"/><polygon points=\"40 25.16 32.62 17.79 32.62 22.38 25 22.38 25 27.96 32.62 27.96 32.62 32.55 40 25.16\" fill=\"#484f60\"/></svg>",
         "over_booking": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 50 50\"><polygon points=\"31.66 31 27.76 27.1 27.76 29.73 25.86 29.74 23.34 29.73 23.34 32.27 24.59 32.27 27.76 32.26 27.76 34.9 31.66 31\" fill=\"#484f60\"/><rect x=\"12.27\" y=\"30.23\" width=\"2.39\" height=\"4.77\" fill=\"#484f60\" opacity=\"0.75\"/><rect x=\"15.34\" y=\"30.23\" width=\"2.39\" height=\"4.77\" fill=\"#484f60\" opacity=\"0.75\"/><polygon points=\"21.34 27.73 22.5 27.73 22.5 23.41 15 20 7.5 23.41 7.5 35 10.91 35 10.91 28.86 19.09 28.86 19.09 35 22.5 35 22.5 34.27 21.34 34.27 21.34 27.73\" fill=\"#484f60\" opacity=\"0.75\"/><rect x=\"38.86\" y=\"28.64\" width=\"3.18\" height=\"6.36\" fill=\"#484f60\"/><polygon points=\"32.5 19.54 32.5 29.01 34.49 31 32.5 32.99 32.5 35 37.05 35 37.05 26.82 42.5 26.82 42.5 15 32.5 19.54\" fill=\"#484f60\"/></svg>",
+        "paragraph_solid": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 448 512\"><path d=\"M192 32l64 0 160 0c17.7 0 32 14.3 32 32s-14.3 32-32 32l-32 0 0 352c0 17.7-14.3 32-32 32s-32-14.3-32-32l0-352-32 0 0 352c0 17.7-14.3 32-32 32s-32-14.3-32-32l0-96-32 0c-88.4 0-160-71.6-160-160s71.6-160 160-160z\"/></svg>",
         "pause_circle": "<svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" x=\"0px\" y=\"0px\" viewBox=\"0 0 51 51\" enable-background=\"new 0 0 51 51\" ><g><g><path fill=\"#484F5F\" d=\"M23.5,18.5v14h-3.1v-14H23.5z M30.6,18.5v14h-3.1v-14H30.6z\"/></g><path fill=\"#484F5F\" d=\"M25.5,39.5c-7.7,0-14-6.3-14-14s6.3-14,14-14s14,6.3,14,14S33.2,39.5,25.5,39.5 M25.5,40.5c8.3,0,15-6.7,15-15c0-8.3-6.7-15-15-15c-8.3,0-15,6.7-15,15C10.5,33.8,17.2,40.5,25.5,40.5L25.5,40.5z\"/></g></svg>",
         "pencil_round_open": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 51 51\"><rect x=\"290.8\" y=\"419.4\" width=\"10.4\" height=\"0.49\" transform=\"translate(-482.6 -62.8) rotate(-45)\" fill=\"#fff\"/><rect x=\"292.6\" y=\"420\" width=\"10.4\" height=\"3.1\" transform=\"translate(-483.4 -60.6) rotate(-45)\" fill=\"#fff\"/><path d=\"M305.8,414.7l-2.1-2.1a0.8,0.8,0,0,0-1.1,0l-0.8.8,3.1,3.1,0.8-.8A0.8,0.8,0,0,0,305.8,414.7Z\" transform=\"translate(-272.5 -395)\" fill=\"#fff\"/><rect x=\"301.6\" y=\"414\" width=\"1.3\" height=\"4.44\" transform=\"translate(-478.3 -59.3) rotate(-45)\" fill=\"#fff\"/><polygon points=\"18.8 29.3 17.5 33.1 17.9 33.5 21.7 32.2 18.8 29.3\" fill=\"#fff\"/><path d=\"M298,436a15.5,15.5,0,1,1,15.5-15.5A15.5,15.5,0,0,1,298,436Zm0-30a14.5,14.5,0,1,0,14.5,14.5A14.5,14.5,0,0,0,298,406Z\" transform=\"translate(-272.5 -395)\" fill=\"#fff\"/></svg>",
         "pen_to_square_solid": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\"><path d=\"M490.3 40.4C512.2 62.27 512.2 97.73 490.3 119.6L460.3 149.7L362.3 51.72L392.4 21.66C414.3-.2135 449.7-.2135 471.6 21.66L490.3 40.4zM172.4 241.7L339.7 74.34L437.7 172.3L270.3 339.6C264.2 345.8 256.7 350.4 248.4 353.2L159.6 382.8C150.1 385.6 141.5 383.4 135 376.1C128.6 370.5 126.4 361 129.2 352.4L158.8 263.6C161.6 255.3 166.2 247.8 172.4 241.7V241.7zM192 63.1C209.7 63.1 224 78.33 224 95.1C224 113.7 209.7 127.1 192 127.1H96C78.33 127.1 64 142.3 64 159.1V416C64 433.7 78.33 448 96 448H352C369.7 448 384 433.7 384 416V319.1C384 302.3 398.3 287.1 416 287.1C433.7 287.1 448 302.3 448 319.1V416C448 469 405 512 352 512H96C42.98 512 0 469 0 416V159.1C0 106.1 42.98 63.1 96 63.1H192z\"/></svg>",
@@ -6022,14 +6023,14 @@
             this.setModelAsString();
         };
         InputDatePickerComponent.prototype.setModelAsString = function () {
-            if (this.model) {
-                var year = this.model.toLocaleString("default", { year: "numeric" });
-                var month = this.model.toLocaleString("default", { month: "2-digit" });
-                var day = this.model.toLocaleString("default", { day: "2-digit" });
-                this.modelAsString = year + "-" + month + "-" + day;
+            if (this.model instanceof Date && !isNaN(this.model.getTime())) {
+                var y = this.model.getFullYear();
+                var m = String(this.model.getMonth() + 1).padStart(2, '0');
+                var d = String(this.model.getDate()).padStart(2, '0');
+                this.modelAsString = y + "-" + m + "-" + d;
             }
             else {
-                this.modelAsString = null;
+                this.modelAsString = null; // or leave as-is, but don't try to format a non-Date
             }
         };
         InputDatePickerComponent.prototype.handleClearIconClicked = function () {
@@ -6040,7 +6041,7 @@
     InputDatePickerComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'co-input-date',
-                    template: "\n      <co-input-text (clickOutside)=\"toggleCalendar(false)\" overlayParent #parentForOverlay=\"overlayParent\"\n                     [hidden]=\"hidden\"\n                     [readonly]=\"readonly\"\n                     [(model)]=\"modelAsString\"\n                     [rightIcon]=\"rightIcon\"\n                     [leftIcon]=\"leftIcon\"\n                     [leftIconData]=\"leftIconData\"\n                     [pattern]=\"'yyyy-MM-dd'\"\n                     [type]=\"'date'\"\n                     [placeholder]=\"placeholder\"\n                     (leftIconClick)=\"leftIconClick.emit($event)\"\n                     (rightIconClick)=\"toggleCalendar(true)\"\n                     (modelChange)=\"modelAsString = $event\"\n                     (clearIconClick)=\"handleClearIconClicked()\"\n                     [emptyPlace]=\"true\"\n                     (keyup.enter)=\"finalizeDate()\"\n                     (blur)=\"finalizeDate()\"\n      ></co-input-text>\n    ",
+                    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    ",
                     providers: [
                         OverlayService, {
                             provide: SCREEN_CONFIG_ADAPTER_COMPONENT_INTERFACE_NAME, useExisting: i0.forwardRef(function () { return InputDatePickerComponent; })
@@ -6429,6 +6430,7 @@
             event.preventDefault();
             event.stopPropagation();
             if (this.type === 'date') {
+                console.log(this.model);
                 this.isFocusedOnDate = false;
             }
             this.isFocused.emit(false);
@@ -6983,13 +6985,13 @@
             get: function () {
                 return this._selectedDate;
             },
-            set: function (date) {
-                this._selectedDate = !!date ? new Date(date.getFullYear(), date.getMonth(), date.getDate()) : date;
-                // Store the initial selected date when the calendar is first opened
+            set: function (value) {
+                var d = this._coerceToDate(value);
+                this._selectedDate = d ? new Date(d.getFullYear(), d.getMonth(), d.getDate()) : null;
                 if (this._initialSelectedDate === null) {
                     this._initialSelectedDate = this._selectedDate;
                 }
-                if (this.secondSelectedDate && date && this.secondSelectedDate.getTime() < this.selectedDate.getTime() && this.temporarySelectedSecondaryDate) {
+                if (this.secondSelectedDate && d && this.secondSelectedDate.getTime() < this.selectedDate.getTime() && this.temporarySelectedSecondaryDate) {
                     this.daysToHighlight = [];
                 }
             },
@@ -6997,38 +6999,37 @@
             configurable: true
         });
         Object.defineProperty(CalendarTemplateComponent.prototype, "secondSelectedDate", {
-            get: function () {
-                return this._secondSelectedDate;
-            },
-            set: function (date) {
-                this._secondSelectedDate = !!date ? new Date(date.getFullYear(), date.getMonth(), date.getDate()) : date;
-                if (!this.selectedDate) {
+            get: function () { return this._secondSelectedDate; },
+            set: function (value) {
+                var d = this._coerceToDate(value);
+                this._secondSelectedDate = d ? new Date(d.getFullYear(), d.getMonth(), d.getDate()) : null;
+                if (!this.selectedDate)
                     this.daysToHighlight = [];
-                }
-                else {
+                else
                     this._fillDatesBetweenSelected();
-                }
             },
             enumerable: false,
             configurable: true
         });
         Object.defineProperty(CalendarTemplateComponent.prototype, "secondHoveringDate", {
-            get: function () {
-                return this._secondHoveringDate;
-            },
-            set: function (date) {
-                this._secondHoveringDate = date;
-                if (!!date) {
+            set: function (value) {
+                var d = this._coerceToDate(value);
+                this._secondHoveringDate = d || null;
+                if (d)
                     this.temporarySelectedSecondaryDate = null;
-                }
-                if (this.selectedDate && !this.secondSelectedDate) {
-                    this.temporarySelectedSecondaryDate = new Date(date);
-                }
-                this.handleMouseOverDay(date);
+                if (this.selectedDate && !this.secondSelectedDate && d)
+                    this.temporarySelectedSecondaryDate = new Date(d);
+                this.handleMouseOverDay(d);
             },
             enumerable: false,
             configurable: true
         });
+        CalendarTemplateComponent.prototype._coerceToDate = function (v) {
+            if (v == null)
+                return null;
+            var d = v instanceof Date ? v : new Date(v);
+            return isNaN(d.getTime()) ? null : d;
+        };
         CalendarTemplateComponent.prototype.showClass = function () {
             return true;
         };
@@ -7120,10 +7121,10 @@
             this.yearSelectionYears = years.reverse();
         };
         CalendarTemplateComponent.prototype.openMonthSelection = function () {
-            this.showCalendarBody = false;
-            this.monthSelection = false;
-            this.yearSelection = true;
-            this.showMonthSelection = true;
+            this.showCalendarBody = !this.showCalendarBody;
+            this.monthSelection = !this.monthSelection;
+            this.yearSelection = !this.yearSelection;
+            this.showMonthSelection = !this.showMonthSelection;
         };
         CalendarTemplateComponent.prototype.openYearSelection = function () {
             this.showMonthSelection = false;
@@ -7274,7 +7275,7 @@
     CalendarTemplateComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: "calendar-template",
-                    template: "\n      <div class=\"calendar\">\n        <div class=\"selected-date-display\">\n            <span *ngIf=\"selectedDate\" class=\"selected-date-year\">\n                {{ selectedDate.getFullYear() }}\n            </span>\n            <span *ngIf=\"selectedDate\" class=\"selected-date-day\">\n              {{ selectedDate | date: 'EEE d MMM' }}\n            </span>\n            <span *ngIf=\"!selectedDate\" class=\"no-date-selected\" [textContent]=\"'Selecteer datum'\"></span>\n        </div>\n        <div class=\"calendar-header\" *ngIf=\"monthSelection || yearSelection\">\n          <co-icon class=\"calendar-change-month-button\" [icon]=\"icons.ArrowPointLeft\" (click)=\"prevMonth()\"></co-icon>\n\n          <div class=\"calendar-header-title-wrapper\">\n            <span class=\"calendar-header-title\" [textContent]=\"monthSelection ? monthHeader : yearHeader\"\n                  (click)=\"monthSelection ? openMonthSelection() : openYearSelection()\"\n            ></span>\n          </div>\n\n          <co-icon class=\"calendar-change-month-button\" [icon]=\"icons.ArrowPointRight\" (click)=\"nextMonth()\"></co-icon>\n        </div>\n\n        <div class=\"selection-grid month\" *ngIf=\"showMonthSelection\">\n          <div *ngFor=\"let month of monthSelectionNames\"\n               class=\"calendar-month-or-year\"\n               (click)=\"selectMonth(month)\">\n            <ng-container *ngIf=\"month\">\n              <div class=\"month\" [textContent]=\"month\"></div>\n            </ng-container>\n          </div>\n        </div>\n\n        <div class=\"selection-grid year\" *ngIf=\"showYearSelection\">\n          <div *ngFor=\"let year of yearSelectionYears\"\n               class=\"calendar-month-or-year\"\n               (click)=\"selectYear(year)\"\n               [textContent]=\"year\">\n            <ng-container *ngIf=\"year\">\n              <div class=\"year\" [textContent]=\"year\"></div>\n            </ng-container>\n          </div>\n        </div>\n        <div class=\"calendar-wrapper\">\n          <div class=\"week-wrapper\" *ngIf=\"showWeekNumbers && showCalendarBody\">\n            <div class=\"week-number\" [textContent]=\"'W'\"></div>\n            <div class=\"week-number\" *ngFor=\"let weekNumber of weekNumbers\">\n              {{ weekNumber }}\n            </div>\n          </div>\n          <div class=\"calendar-body\" *ngIf=\"showCalendarBody\">\n            <div class=\"day-names\">\n              <div class=\"weekday\" *ngFor=\"let dayName of dayNames\" [textContent]=\"dayName\"></div>\n            </div>\n            <div *ngFor=\"let day of daysInMonth\" class=\"calendar-day\"\n                 [class.highlighted-day]=\"daysToHighlight.includes(day)\"\n                 [class.selected-day]=\"selectedDate && (day && day.getTime() === selectedDate.getTime()) ||\n            secondSelectedDate && (day && day.getTime() === secondSelectedDate.getTime()) ||\n            temporarySelectedSecondaryDate && (day && day.getTime() === temporarySelectedSecondaryDate.getTime())\"\n                 (click)=\"selectDate(day)\"\n                 (mouseover)=\"handleMouseOverDay(day)\">\n              <!-- Day number -->\n              <ng-container *ngIf=\"day\">\n                <div class=\"day-number\" [textContent]=\"day.getDate()\"></div>\n              </ng-container>\n            </div>\n          </div>\n        </div>\n        <div class=\"calendar-action-buttons\" *ngIf=\"showButtons\">\n          <span class=\"set-and-close-button\" *ngIf=\"this.doubleCalendar\" (click)=\"setAndClose()\">Instellen</span>\n          <span class=\"clear-date-button\" *ngIf=\"this.selectedDate\" (click)=\"clearDate()\">Wissen</span>\n          <span class=\"cancel-button\" (click)=\"closeDate()\">Annuleren</span>\n        </div>\n      </div>\n  ",
+                    template: "\n      <div class=\"calendar\">\n        <div class=\"selected-date-display\">\n            <span *ngIf=\"selectedDate\" class=\"selected-date-year\">\n                {{ selectedDate.getFullYear() }}\n            </span>\n            <span *ngIf=\"selectedDate\" class=\"selected-date-day\">\n              {{ selectedDate | date: 'EEE d MMM' }}\n            </span>\n            <span *ngIf=\"!selectedDate\" class=\"no-date-selected\" [textContent]=\"'Selecteer datum'\"></span>\n        </div>\n        <div class=\"calendar-header\" *ngIf=\"monthSelection || yearSelection\">\n          <co-icon class=\"calendar-change-month-button\" [icon]=\"icons.ArrowPointLeft\" (click)=\"!monthSelection ? prevYear() : prevMonth()\"></co-icon>\n\n          <div class=\"calendar-header-title-wrapper\">\n            <span class=\"calendar-header-title\" [textContent]=\"monthSelection ? monthHeader : yearHeader\"\n                  (click)=\"openMonthSelection()\"\n            ></span>\n          </div>\n\n          <co-icon class=\"calendar-change-month-button\" [icon]=\"icons.ArrowPointRight\" (click)=\"!monthSelection ? nextYear() : nextMonth()\"></co-icon>\n        </div>\n\n        <div class=\"selection-grid month\" *ngIf=\"showMonthSelection\">\n          <div *ngFor=\"let month of monthSelectionNames\"\n               class=\"calendar-month-or-year\"\n               (click)=\"selectMonth(month)\">\n            <ng-container *ngIf=\"month\">\n              <div class=\"month\" [textContent]=\"month\"></div>\n            </ng-container>\n          </div>\n        </div>\n\n        <div class=\"selection-grid year\" *ngIf=\"showYearSelection\">\n          <div *ngFor=\"let year of yearSelectionYears\"\n               class=\"calendar-month-or-year\"\n               (click)=\"selectYear(year)\"\n               [textContent]=\"year\">\n            <ng-container *ngIf=\"year\">\n              <div class=\"year\" [textContent]=\"year\"></div>\n            </ng-container>\n          </div>\n        </div>\n        <div class=\"calendar-wrapper\">\n          <div class=\"week-wrapper\" *ngIf=\"showWeekNumbers && showCalendarBody\">\n            <div class=\"week-number\" [textContent]=\"'W'\"></div>\n            <div class=\"week-number\" *ngFor=\"let weekNumber of weekNumbers\">\n              {{ weekNumber }}\n            </div>\n          </div>\n          <div class=\"calendar-body\" *ngIf=\"showCalendarBody\">\n            <div class=\"day-names\">\n              <div class=\"weekday\" *ngFor=\"let dayName of dayNames\" [textContent]=\"dayName\"></div>\n            </div>\n            <div *ngFor=\"let day of daysInMonth\" class=\"calendar-day\"\n                 [class.highlighted-day]=\"daysToHighlight.includes(day)\"\n                 [class.selected-day]=\"selectedDate && (day && day.getTime() === selectedDate.getTime()) ||\n            secondSelectedDate && (day && day.getTime() === secondSelectedDate.getTime()) ||\n            temporarySelectedSecondaryDate && (day && day.getTime() === temporarySelectedSecondaryDate.getTime())\"\n                 (click)=\"selectDate(day)\"\n                 (mouseover)=\"handleMouseOverDay(day)\">\n              <!-- Day number -->\n              <ng-container *ngIf=\"day\">\n                <div class=\"day-number\" [textContent]=\"day.getDate()\"></div>\n              </ng-container>\n            </div>\n          </div>\n        </div>\n        <div class=\"calendar-action-buttons\" *ngIf=\"showButtons\">\n          <span class=\"set-and-close-button\" *ngIf=\"this.doubleCalendar\" (click)=\"setAndClose()\">Instellen</span>\n          <span class=\"clear-date-button\" *ngIf=\"this.selectedDate\" (click)=\"clearDate()\">Wissen</span>\n          <span class=\"cancel-button\" (click)=\"closeDate()\">Annuleren</span>\n        </div>\n      </div>\n  ",
                     encapsulation: i0.ViewEncapsulation.None
                 },] }
     ];
@@ -7343,6 +7344,113 @@
                 },] }
     ];
 
+    var BaseInputTimeDirective = /** @class */ (function (_super) {
+        __extends(BaseInputTimeDirective, _super);
+        function BaseInputTimeDirective() {
+            var _this = _super.apply(this, __spreadArray([], __read(arguments))) || this;
+            _this.rightIcon = exports.CoreComponentsIcon.Clock;
+            _this.locale = 'nl-NL';
+            _this.leftIconClick = new i0.EventEmitter();
+            _this.closeAfterDateSelection = true;
+            return _this;
+        }
+        return BaseInputTimeDirective;
+    }(BaseInputComponent));
+    BaseInputTimeDirective.decorators = [
+        { type: i0.Directive }
+    ];
+    BaseInputTimeDirective.propDecorators = {
+        parentForOverlay: [{ type: i0.ViewChild, args: ["parentForOverlay", { read: i0.ElementRef },] }],
+        locale: [{ type: i0.Input }],
+        placeholder: [{ type: i0.Input }],
+        leftIcon: [{ type: i0.Input }],
+        leftIconData: [{ type: i0.Input }],
+        leftIconClick: [{ type: i0.Output }],
+        closeAfterDateSelection: [{ type: i0.Input }]
+    };
+
+    var InputTimeComponent = /** @class */ (function (_super) {
+        __extends(InputTimeComponent, _super);
+        function InputTimeComponent() {
+            var _this = _super.apply(this, __spreadArray([], __read(arguments))) || this;
+            _this.timeAsString = '';
+            return _this;
+        }
+        InputTimeComponent.prototype.modelSet = function () {
+            this.setTimeAsString();
+        };
+        InputTimeComponent.prototype.setTimeAsString = function () {
+            if (this.model !== undefined && this.model !== null) {
+                var totalMinutes = Math.floor(this.model / (1000 * 60)); // Convert milliseconds to minutes
+                var days = Math.floor(totalMinutes / (24 * 60));
+                var hours = Math.floor((totalMinutes % (24 * 60)) / 60);
+                var minutes = totalMinutes % 60;
+                this.timeAsString = days + "d " + hours + "h " + minutes + "m";
+            }
+            else {
+                this.timeAsString = '';
+            }
+        };
+        InputTimeComponent.prototype.handleTimeChange = function (value) {
+            if (value) {
+                var parts = value.split(' ');
+                var totalMinutes_1 = 0;
+                parts.forEach(function (part) {
+                    if (part.endsWith('d')) {
+                        totalMinutes_1 += parseInt(part.substring(0, part.length - 1)) * 24 * 60;
+                    }
+                    else if (part.endsWith('h')) {
+                        totalMinutes_1 += parseInt(part.substring(0, part.length - 1)) * 60;
+                    }
+                    else if (part.endsWith('m')) {
+                        totalMinutes_1 += parseInt(part.substring(0, part.length - 1));
+                    }
+                });
+                this.setModel(totalMinutes_1 * 60 * 1000); // Convert minutes to milliseconds
+            }
+        };
+        InputTimeComponent.prototype.handleClearIconClicked = function () {
+            this.setModel(undefined);
+        };
+        return InputTimeComponent;
+    }(BaseInputTimeDirective));
+    InputTimeComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'co-input-time',
+                    template: "\n    <co-input-text\n                   [hidden]=\"hidden\"\n                   [readonly]=\"readonly\"\n                   [(model)]=\"timeAsString\"\n                   [rightIcon]=\"rightIcon\"\n                   [leftIcon]=\"leftIcon\"\n                   [leftIconData]=\"leftIconData\"\n                   [placeholder]=\"placeholder\"\n                   (blur)=\"handleTimeChange(timeAsString)\"\n                   (clearIconClick)=\"handleClearIconClicked()\"\n    ></co-input-text>\n  ",
+                    providers: [
+                        OverlayService, {
+                            provide: SCREEN_CONFIG_ADAPTER_COMPONENT_INTERFACE_NAME, useExisting: i0.forwardRef(function () { return InputTimeComponent; })
+                        }, {
+                            provide: BaseInputTimeDirective,
+                            useExisting: InputTimeComponent
+                        }
+                    ],
+                    encapsulation: i0.ViewEncapsulation.None
+                },] }
+    ];
+
+    var InputTimeModule = /** @class */ (function () {
+        function InputTimeModule() {
+        }
+        return InputTimeModule;
+    }());
+    InputTimeModule.decorators = [
+        { type: i0.NgModule, args: [{
+                    imports: [
+                        common.CommonModule,
+                        InputTextModule,
+                        ClickoutsideModule,
+                        OverlayModule
+                    ],
+                    schemas: [
+                        i0.NO_ERRORS_SCHEMA
+                    ],
+                    declarations: [InputTimeComponent],
+                    exports: [InputTimeComponent]
+                },] }
+    ];
+
     var DoubleCalendarComponent = /** @class */ (function (_super) {
         __extends(DoubleCalendarComponent, _super);
         function DoubleCalendarComponent() {
@@ -9957,150 +10065,13 @@
         handleMouseUp: [{ type: i0.HostListener, args: ['document:mouseup', ['$event'],] }]
     };
 
-    var ExcelExportService = /** @class */ (function () {
-        function ExcelExportService() {
-        }
-        /**
-         * Export data to Excel file
-         * @param data - Array of objects to export
-         * @param columns - Column configuration (optional)
-         * @param fileName - Name of the exported file
-         * @param sheetName - Name of the Excel sheet
-         */
-        ExcelExportService.prototype.exportToExcel = function (data, columns, fileName, sheetName) {
-            var _this = this;
-            if (fileName === void 0) { fileName = 'export'; }
-            if (sheetName === void 0) { sheetName = 'Sheet1'; }
-            // If columns are specified, transform data to match column structure
-            var exportData = data;
-            if (columns && columns.length > 0) {
-                exportData = data.map(function (item) {
-                    var newItem = {};
-                    columns.forEach(function (col) {
-                        newItem[col.header] = _this.getFlatValue(item, col.key);
-                    });
-                    return newItem;
-                });
-            }
-            // Create workbook and worksheet
-            var wb = XLSX__namespace.utils.book_new();
-            var ws = XLSX__namespace.utils.json_to_sheet(exportData);
-            // Set column widths if specified
-            if (columns && columns.some(function (col) { return col.width; })) {
-                var colWidths = columns.map(function (col) { return ({ wch: col.width || 20 }); });
-                ws['!cols'] = colWidths;
-            }
-            // Add worksheet to workbook
-            XLSX__namespace.utils.book_append_sheet(wb, ws, sheetName);
-            // Save file
-            XLSX__namespace.writeFile(wb, fileName + ".xlsx");
-        };
-        /**
-         * Export multiple sheets to one Excel file
-         * @param sheets - Array of sheet data
-         * @param fileName - Name of the exported file
-         */
-        ExcelExportService.prototype.exportMultipleSheets = function (sheets, fileName) {
-            var _this = this;
-            if (fileName === void 0) { fileName = 'multi-sheet-export'; }
-            var wb = XLSX__namespace.utils.book_new();
-            sheets.forEach(function (sheet) {
-                var exportData = sheet.data;
-                if (sheet.columns && sheet.columns.length > 0) {
-                    exportData = sheet.data.map(function (item) {
-                        var newItem = {};
-                        sheet.columns.forEach(function (col) {
-                            newItem[col.header] = _this.getNestedValue(item, col.key);
-                        });
-                        return newItem;
-                    });
-                }
-                var ws = XLSX__namespace.utils.json_to_sheet(exportData);
-                if (sheet.columns && sheet.columns.some(function (col) { return col.width; })) {
-                    var colWidths = sheet.columns.map(function (col) { return ({ wch: col.width || 20 }); });
-                    ws['!cols'] = colWidths;
-                }
-                XLSX__namespace.utils.book_append_sheet(wb, ws, sheet.sheetName);
-            });
-            XLSX__namespace.writeFile(wb, fileName + ".xlsx");
-        };
-        /**
-         * Export HTML table to Excel
-         * @param tableId - ID of the HTML table element
-         * @param fileName - Name of the exported file
-         * @param sheetName - Name of the Excel sheet
-         */
-        ExcelExportService.prototype.exportTableToExcel = function (tableId, fileName, sheetName) {
-            if (fileName === void 0) { fileName = 'table-export'; }
-            if (sheetName === void 0) { sheetName = 'Sheet1'; }
-            var table = document.getElementById(tableId);
-            if (!table) {
-                console.error("Table with ID '" + tableId + "' not found");
-                return;
-            }
-            var wb = XLSX__namespace.utils.book_new();
-            var ws = XLSX__namespace.utils.table_to_sheet(table);
-            XLSX__namespace.utils.book_append_sheet(wb, ws, sheetName);
-            XLSX__namespace.writeFile(wb, fileName + ".xlsx");
-        };
-        /**
-         * Get nested object value using dot notation
-         * @param obj - Object to search in
-         * @param path - Dot notation path (e.g., 'user.address.city')
-         */
-        ExcelExportService.prototype.getNestedValue = function (obj, path) {
-            return path.split('.').reduce(function (current, key) {
-                return current && current[key] !== undefined ? current[key] : '';
-            }, obj);
-        };
-        ExcelExportService.prototype.getFlatValue = function (obj, key) {
-            return obj && obj[key] !== undefined ? obj[key] : '';
-        };
-        /**
-         * Format date for Excel export
-         * @param date - Date to format
-         * @param format - Format string (default: 'MM/DD/YYYY')
-         */
-        ExcelExportService.prototype.formatDateForExport = function (date, format) {
-            if (format === void 0) { format = 'MM/DD/YYYY'; }
-            if (!date) {
-                return '';
-            }
-            var d = new Date(date);
-            if (isNaN(d.getTime())) {
-                return '';
-            }
-            var month = (d.getMonth() + 1).toString().padStart(2, '0');
-            var day = d.getDate().toString().padStart(2, '0');
-            var year = d.getFullYear();
-            switch (format) {
-                case 'MM/DD/YYYY':
-                    return month + "/" + day + "/" + year;
-                case 'DD/MM/YYYY':
-                    return day + "/" + month + "/" + year;
-                case 'YYYY-MM-DD':
-                    return year + "-" + month + "-" + day;
-                default:
-                    return d.toLocaleDateString();
-            }
-        };
-        return ExcelExportService;
-    }());
-    ExcelExportService.ɵprov = i0__namespace.ɵɵdefineInjectable({ factory: function ExcelExportService_Factory() { return new ExcelExportService(); }, token: ExcelExportService, providedIn: "root" });
-    ExcelExportService.decorators = [
-        { type: i0.Injectable, args: [{
-                    providedIn: 'root'
-                },] }
-    ];
-
     var SimpleGridComponent = /** @class */ (function (_super) {
         __extends(SimpleGridComponent, _super);
-        function SimpleGridComponent(icons, _changeDetection, _formMaster, excelExportService) {
+        function SimpleGridComponent(icons, _changeDetection, _formMaster) {
             var _this = _super.call(this) || this;
             _this.icons = icons;
             _this._changeDetection = _changeDetection;
             _this._formMaster = _formMaster;
-            _this.excelExportService = excelExportService;
             _this.defaultTextAlign = exports.ColumnAlign.Left;
             _this.showAdd = false;
             _this.showDelete = false;
@@ -10530,6 +10501,22 @@
             //   'Sheet1'
             // );
         };
+        SimpleGridComponent.prototype.goToPreviousPage = function () {
+            this.currentPage -= 1;
+        };
+        SimpleGridComponent.prototype.goToNextPage = function () {
+            this.currentPage += 1;
+        };
+        SimpleGridComponent.prototype.setCurrentPage = function (page) {
+            this.currentPage = page;
+        };
+        Object.defineProperty(SimpleGridComponent.prototype, "isNewRow", {
+            get: function () {
+                return this._newRow;
+            },
+            enumerable: false,
+            configurable: true
+        });
         SimpleGridComponent.prototype._filterSelectedOrReturnAll = function (items) {
             var hasSelectedTrue = items.some(function (item) { return item.selected === true; });
             return hasSelectedTrue ? items.filter(function (item) { return item.selected === true; }) : items;
@@ -10677,15 +10664,6 @@
             }
             this._detectChanges();
         };
-        SimpleGridComponent.prototype.goToPreviousPage = function () {
-            this.currentPage -= 1;
-        };
-        SimpleGridComponent.prototype.goToNextPage = function () {
-            this.currentPage += 1;
-        };
-        SimpleGridComponent.prototype.setCurrentPage = function (page) {
-            this.currentPage = page;
-        };
         SimpleGridComponent.prototype._detectChanges = function () {
             this._changeDetection.detectChanges();
         };
@@ -10697,13 +10675,6 @@
             this.editing = false;
             this.rowToEdit = undefined;
         };
-        Object.defineProperty(SimpleGridComponent.prototype, "isNewRow", {
-            get: function () {
-                return this._newRow;
-            },
-            enumerable: false,
-            configurable: true
-        });
         return SimpleGridComponent;
     }(BaseSimpleGridComponent));
     SimpleGridComponent.decorators = [
@@ -10718,8 +10689,7 @@
     SimpleGridComponent.ctorParameters = function () { return [
         { type: IconCacheService },
         { type: i0.ChangeDetectorRef },
-        { type: FormMasterService },
-        { type: ExcelExportService }
+        { type: FormMasterService }
     ]; };
     SimpleGridComponent.propDecorators = {
         headerCells: [{ type: i0.ViewChildren, args: ['headerCell',] }],
@@ -11563,7 +11533,8 @@
     ];
 
     var ListOfValuesPopupComponent = /** @class */ (function () {
-        function ListOfValuesPopupComponent(_elementRef) {
+        function ListOfValuesPopupComponent(iconCacheService, _elementRef) {
+            this.iconCacheService = iconCacheService;
             this._elementRef = _elementRef;
             this.multiselect = false;
             this.displayField = 'description';
@@ -11786,11 +11757,12 @@
     ListOfValuesPopupComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'co-list-of-values-popup',
-                    template: "\n    <div class=\"lov-options\" [overlay]=\"parentForOverlay\" [inheritWidth]=\"true\" [ngClass]=\"customCssClass\"\n         id=\"lov-popup\"\n         role=\"listbox\" [tabindex]=\"-1\"\n         (clickOutside)=\"closePopup.emit($event)\">\n      <co-input-search *ngIf=\"multiselect\"\n                       tabindex=\"-1\"\n                       [(model)]=\"searchTerm\"\n                       [placeholder]=\"searchPlaceholder\"\n                       (keydown)=\"handleInputKeyDown($event)\"\n                       (modelChange)=\"filterViewModels()\"></co-input-search>\n      <ul class=\"dropdown-list\" #dropDownList>\n        <li\n          #lovItem\n          *ngFor=\"let viewModel of viewModels; let index = index\"\n          [class.selected]=\"viewModel === highLightModel || viewModels.length === 1\"\n          (click)=\"selectViewModel(viewModel, !multiselect)\"\n          role=\"option\">\n          <ng-container *ngIf=\"!multiselect\">\n            <span class=\"lov-options-text\" [textContent]=\"viewModel.model[displayField]\"></span>\n          </ng-container>\n          <ng-container *ngIf=\"multiselect\">\n            <co-input-checkbox [model]=\"viewModel.checked\"\n                               (modelChange)=\"selectViewModel(viewModel, false)\"></co-input-checkbox>\n            <span class=\"lov-options-text\" [textContent]=\"viewModel.model[displayField]\"></span>\n          </ng-container>\n        </li>\n      </ul>\n    </div>\n  ",
+                    template: "\n    <div class=\"lov-options\" [overlay]=\"parentForOverlay\" [inheritWidth]=\"true\" [ngClass]=\"customCssClass\"\n         id=\"lov-popup\"\n         role=\"listbox\" [tabindex]=\"-1\"\n         (clickOutside)=\"closePopup.emit($event)\">\n      <co-input-search *ngIf=\"multiselect\"\n                       tabindex=\"-1\"\n                       [(model)]=\"searchTerm\"\n                       [placeholder]=\"searchPlaceholder\"\n                       (keydown)=\"handleInputKeyDown($event)\"\n                       (modelChange)=\"filterViewModels()\"></co-input-search>\n      <ul class=\"dropdown-list\" #dropDownList>\n        <li\n          #lovItem\n          *ngFor=\"let viewModel of viewModels; let index = index\"\n          [class.selected]=\"viewModel === highLightModel || viewModels.length === 1\"\n          (click)=\"selectViewModel(viewModel, !multiselect)\"\n          role=\"option\">\n          <ng-container *ngIf=\"!multiselect\">\n              <co-icon *ngIf=\"viewModel.model[optionIcon]\" class=\"input-text-left-icon\" [iconData]=\"iconCacheService.getIcon(viewModel.model[optionIcon])\">\n              </co-icon>\n            <span class=\"lov-options-text\" [textContent]=\"viewModel.model[displayField]\"></span>\n          </ng-container>\n          <ng-container *ngIf=\"multiselect\">\n            <co-input-checkbox [model]=\"viewModel.checked\"\n                               (modelChange)=\"selectViewModel(viewModel, false)\"></co-input-checkbox>\n            <span class=\"lov-options-text\" [textContent]=\"viewModel.model[displayField]\"></span>\n          </ng-container>\n        </li>\n      </ul>\n    </div>\n  ",
                     encapsulation: i0.ViewEncapsulation.None
                 },] }
     ];
     ListOfValuesPopupComponent.ctorParameters = function () { return [
+        { type: IconCacheService },
         { type: i0.ElementRef }
     ]; };
     ListOfValuesPopupComponent.propDecorators = {
@@ -11804,6 +11776,7 @@
         customCssClass: [{ type: i0.Input }],
         searchDisabled: [{ type: i0.Input }],
         parentForOverlay: [{ type: i0.Input }],
+        optionIcon: [{ type: i0.Input }],
         collection: [{ type: i0.Input }],
         modelChange: [{ type: i0.Output }],
         closePopup: [{ type: i0.Output }],
@@ -11813,9 +11786,10 @@
 
     var ListOfValuesComponent = /** @class */ (function (_super) {
         __extends(ListOfValuesComponent, _super);
-        function ListOfValuesComponent(formComponent, changeDetector, overlayService, componentFactoryResolver, formUserChangeListener, ngZoneWrapper, elementRef) {
+        function ListOfValuesComponent(formComponent, iconCacheService, changeDetector, overlayService, componentFactoryResolver, formUserChangeListener, ngZoneWrapper, elementRef) {
             var _this = _super.call(this, changeDetector, componentFactoryResolver, overlayService, formUserChangeListener, ngZoneWrapper, elementRef) || this;
             _this.formComponent = formComponent;
+            _this.iconCacheService = iconCacheService;
             _this.changeDetector = changeDetector;
             _this.overlayService = overlayService;
             _this.componentFactoryResolver = componentFactoryResolver;
@@ -11978,7 +11952,8 @@
                 displayField: this.displayField,
                 multiselect: this.multiselect,
                 model: this.model,
-                collection: this.collection
+                collection: this.collection,
+                optionIcon: this.optionIcon,
             }, {
                 modelChange: function (value) { return _this.optionChosen(value); },
                 closePopup: function () { return _this.closePopup(); },
@@ -12060,7 +12035,7 @@
     ListOfValuesComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'co-list-of-values',
-                    template: "\n      <co-input-text\n              *ngIf=\"!largeCollection\"\n              aria-haspopup=\"listbox\"\n              [attr.aria-expanded]=\"isSelectOpen\"\n              aria-controls=\"lov-popup\"\n              role=\"combobox\"\n              class=\"no-focus-line\"\n              overlayParent\n              #parentForOverlay=\"overlayParent\"\n              type=\"text\"\n              [id]=\"label\"\n              [model]=\"multiselect ? selectedModels : selectedModel\"\n              [placeholder]=\"label\"\n              [myFormInputInstance]=\"this\"\n              [readonly]=\"readonly\"\n              [disabled]=\"disabled\"\n              [required]=\"required\"\n              [noClickFocus]=\"false\"\n              [leftIconData]=\"leftIconData\"\n              [rightIcon]=\"isSelectOpen ? icons.ChevronUpRegular : icons.ChevronDownRegular\"\n              [showClearButton]=\"true\"\n              [useContent]=\"multiselect\"\n              [customHeight]=\"multiselect\"\n              [keepFocussed]=\"keepFocussed\"\n              (modelChange)=\"handleInputModelChange($event)\"\n              (click)=\"openPopup()\"\n              (rightIconClick)=\"toggleSelect()\"\n              (keydown)=\"handleInputKeyDown($event)\"\n              (clearIconClick)=\"clearModel($event)\"\n              (blur)=\"checkModel()\">\n          <ng-container *ngIf=\"multiselect && showChips\">\n              <div class=\"multiselect-chips-wrapper\">\n                  <div class=\"chips\" *ngFor=\"let chip of model\">\n                      <span class=\"chips-description\" [textContent]=\"chip[displayField]\"></span>\n                      <co-icon class=\"remove-chip-icon\" [icon]=\"icons.CrossSkinny\" (click)=\"removeOptionFromModel(chip)\"></co-icon>\n                  </div>\n              </div>\n          </ng-container>\n      </co-input-text>\n\n      <co-input-text\n              *ngIf=\"largeCollection\"\n              [model]=\"filterText\"\n              [placeholder]=\"label\"\n              [required]=\"required\"\n              [disabled]=\"disabled\"\n              [readonly]=\"readonly\"\n              (modelChange)=\"onModelChange($event)\">\n      </co-input-text>\n      <div *ngIf=\"isLoading\" class=\"filter-loader\"><span></span></div>\n      <input type=\"hidden\" [ngModel]=\"model\">\n  ",
+                    template: "\n      <co-input-text\n              *ngIf=\"!largeCollection\"\n              aria-haspopup=\"listbox\"\n              [attr.aria-expanded]=\"isSelectOpen\"\n              aria-controls=\"lov-popup\"\n              role=\"combobox\"\n              class=\"no-focus-line\"\n              overlayParent\n              #parentForOverlay=\"overlayParent\"\n              type=\"text\"\n              [id]=\"label\"\n              [model]=\"multiselect ? selectedModels : selectedModel\"\n              [placeholder]=\"label\"\n              [myFormInputInstance]=\"this\"\n              [readonly]=\"readonly\"\n              [disabled]=\"disabled\"\n              [required]=\"required\"\n              [noClickFocus]=\"false\"\n              [leftIconData]=\" model && model[optionIcon] ? iconCacheService.getIcon(model[optionIcon]) : leftIconData\"\n              [rightIcon]=\"isSelectOpen ? icons.ChevronUpRegular : icons.ChevronDownRegular\"\n              [showClearButton]=\"true\"\n              [useContent]=\"multiselect\"\n              [customHeight]=\"multiselect\"\n              [keepFocussed]=\"keepFocussed\"\n              (modelChange)=\"handleInputModelChange($event)\"\n              (click)=\"openPopup()\"\n              (rightIconClick)=\"toggleSelect()\"\n              (keydown)=\"handleInputKeyDown($event)\"\n              (clearIconClick)=\"clearModel($event)\"\n              (blur)=\"checkModel()\">\n          <ng-container *ngIf=\"multiselect && showChips\">\n              <div class=\"multiselect-chips-wrapper\">\n                  <div class=\"chips\" *ngFor=\"let chip of model\">\n                      <span class=\"chips-description\" [textContent]=\"chip[displayField]\"></span>\n                      <co-icon class=\"remove-chip-icon\" [icon]=\"icons.CrossSkinny\" (click)=\"removeOptionFromModel(chip)\"></co-icon>\n                  </div>\n              </div>\n          </ng-container>\n      </co-input-text>\n\n      <co-input-text\n              *ngIf=\"largeCollection\"\n              [model]=\"filterText\"\n              [placeholder]=\"label\"\n              [required]=\"required\"\n              [disabled]=\"disabled\"\n              [readonly]=\"readonly\"\n              (modelChange)=\"onModelChange($event)\">\n      </co-input-text>\n      <div *ngIf=\"isLoading\" class=\"filter-loader\"><span></span></div>\n      <input type=\"hidden\" [ngModel]=\"model\">\n  ",
                     providers: [
                         OverlayService,
                         {
@@ -12073,6 +12048,7 @@
     ];
     ListOfValuesComponent.ctorParameters = function () { return [
         { type: FormComponent, decorators: [{ type: i0.Optional }] },
+        { type: IconCacheService },
         { type: i0.ChangeDetectorRef },
         { type: OverlayService },
         { type: i0.ComponentFactoryResolver },
@@ -12086,6 +12062,7 @@
         multiselect: [{ type: i0.HostBinding, args: ['class.custom-height',] }, { type: i0.HostBinding, args: ['class.multi-select',] }, { type: i0.Input }],
         largeCollection: [{ type: i0.Input }],
         displayField: [{ type: i0.Input }],
+        optionIcon: [{ type: i0.Input }],
         collection: [{ type: i0.Input }],
         collectionLoadFn: [{ type: i0.Input }],
         leftIconData: [{ type: i0.Input }],
@@ -12838,6 +12815,10 @@
                     this.showButton = true;
                     this._createModelForDateRange(model);
                     break;
+                case this.modes.DateField:
+                    this.showButton = true;
+                    this._createModelForDateField(model);
+                    break;
                 case this.modes.TextField:
                     this.showButton = true;
                     this._model = (typeof this._model === 'string' && this._model.length === 0) ? undefined : this._model;
@@ -12864,25 +12845,25 @@
         FilterItemComponent.prototype.applyFilter = function (text) {
             var _a, _b;
             return __awaiter(this, void 0, void 0, function () {
-                var _c, filterText, filteredItemCount;
-                return __generator(this, function (_d) {
-                    switch (_d.label) {
+                var _g, filterText, filteredItemCount;
+                return __generator(this, function (_h) {
+                    switch (_h.label) {
                         case 0:
                             if (!!isNaN(this.minSearchCharsToLoadCollection)) return [3 /*break*/, 5];
                             if (!(text.length < this.minSearchCharsToLoadCollection)) return [3 /*break*/, 2];
                             return [4 /*yield*/, new Promise(function (resolve) { return setTimeout(resolve, 300); })];
                         case 1:
-                            _d.sent();
+                            _h.sent();
                             this.collection = undefined;
                             return [3 /*break*/, 5];
                         case 2: return [4 /*yield*/, new Promise(function (resolve) { return setTimeout(resolve, 300); })];
                         case 3:
-                            _d.sent();
-                            _c = this;
+                            _h.sent();
+                            _g = this;
                             return [4 /*yield*/, this.collectionLoadFn(text)];
                         case 4:
-                            _c.collection = _d.sent();
-                            _d.label = 5;
+                            _g.collection = _h.sent();
+                            _h.label = 5;
                         case 5:
                             this.filterText = text;
                             if (!this.collection) {
@@ -12912,14 +12893,29 @@
             });
         };
         FilterItemComponent.prototype.onButtonClicked = function () {
-            var _a, _b;
-            if ((_a = this.dateInput) === null || _a === void 0 ? void 0 : _a.finalize) {
-                this.dateInput.finalize();
-            }
-            if ((_b = this.dateRangeInput) === null || _b === void 0 ? void 0 : _b.finalize) {
-                this.dateRangeInput.finalize();
-            }
-            this.filterButtonClicked.emit();
+            var _a, _b, _c, _d, _e, _f;
+            return __awaiter(this, void 0, void 0, function () {
+                return __generator(this, function (_g) {
+                    switch (_g.label) {
+                        case 0:
+                            (_b = (_a = document.activeElement) === null || _a === void 0 ? void 0 : _a.blur) === null || _b === void 0 ? void 0 : _b.call(_a);
+                            switch (this.mode) {
+                                case this.modes.DateField:
+                                    (_d = (_c = this.dateInput) === null || _c === void 0 ? void 0 : _c.finalize) === null || _d === void 0 ? void 0 : _d.call(_c);
+                                    break;
+                                case this.modes.DateRangeField:
+                                    (_f = (_e = this.dateRangeInput) === null || _e === void 0 ? void 0 : _e.finalize) === null || _f === void 0 ? void 0 : _f.call(_e);
+                                    break;
+                            }
+                            this._changeDetector.detectChanges();
+                            return [4 /*yield*/, Promise.resolve()];
+                        case 1:
+                            _g.sent();
+                            this.filterButtonClicked.emit();
+                            return [2 /*return*/];
+                    }
+                });
+            });
         };
         FilterItemComponent.prototype.uncheckForSingleSelect = function (model) {
             this.collection.forEach(function (m) {
@@ -13070,6 +13066,15 @@
                 this._model = 0;
             }
         };
+        FilterItemComponent.prototype._createModelForDateField = function (date) {
+            if (date) {
+                var formattedDate = this._formatDateToString(date);
+                this._model = "?='" + formattedDate + "'";
+            }
+            else {
+                this._model = undefined;
+            }
+        };
         FilterItemComponent.prototype._createModelForDateRange = function (dates) {
             if (dates) {
                 var startDate = dates[0];
@@ -13089,7 +13094,7 @@
         //Model reading for all of the different options available//
         ////////////////////////////////////////////////////////////
         FilterItemComponent.prototype._readModelForFilterList = function (filterModel) {
-            var e_1, _c;
+            var e_1, _g;
             var filterList = [];
             var itemsToCheck = [];
             this._uncheckAll();
@@ -13115,7 +13120,7 @@
                 catch (e_1_1) { e_1 = { error: e_1_1 }; }
                 finally {
                     try {
-                        if (itemsToCheck_1_1 && !itemsToCheck_1_1.done && (_c = itemsToCheck_1.return)) _c.call(itemsToCheck_1);
+                        if (itemsToCheck_1_1 && !itemsToCheck_1_1.done && (_g = itemsToCheck_1.return)) _g.call(itemsToCheck_1);
                     }
                     finally { if (e_1) throw e_1.error; }
                 }
@@ -13147,13 +13152,13 @@
             }
         };
         FilterItemComponent.prototype._readModelForSelectListWithNumberOutput = function (numberModel) {
-            var e_2, _c;
+            var e_2, _g;
             this._uncheckAll();
             this._model = numberModel;
             if (numberModel !== null && numberModel !== undefined && this.collection !== null && this.collection !== undefined) {
                 try {
-                    for (var _d = __values(this.collection), _e = _d.next(); !_e.done; _e = _d.next()) {
-                        var item = _e.value;
+                    for (var _h = __values(this.collection), _j = _h.next(); !_j.done; _j = _h.next()) {
+                        var item = _j.value;
                         var itemCode = item.code;
                         var modValue = (numberModel % (2 * itemCode));
                         item.checked = (modValue >= itemCode);
@@ -13162,7 +13167,7 @@
                 catch (e_2_1) { e_2 = { error: e_2_1 }; }
                 finally {
                     try {
-                        if (_e && !_e.done && (_c = _d.return)) _c.call(_d);
+                        if (_j && !_j.done && (_g = _h.return)) _g.call(_h);
                     }
                     finally { if (e_2) throw e_2.error; }
                 }
@@ -13206,12 +13211,35 @@
             }
         };
         FilterItemComponent.prototype._readModelForDateField = function (dateFieldModel) {
+            // Keep whatever came in as the "filter value" for outputs
             this._model = dateFieldModel;
-            if (dateFieldModel !== undefined && dateFieldModel !== null) {
-                this._model = new Date(dateFieldModel);
+            if (!dateFieldModel) {
+                this.dateFieldValue = undefined;
+                return;
             }
-            else {
-                this._model = undefined;
+            if (dateFieldModel instanceof Date) {
+                this.dateFieldValue = dateFieldModel;
+                return;
+            }
+            if (typeof dateFieldModel === 'string') {
+                // Accept "?='dd-MM-yyyy'", "dd-MM-yyyy", or "yyyy-MM-dd"
+                var raw = dateFieldModel;
+                var wrapped = raw.match(/\?='(\d{2}-\d{2}-\d{4})'/);
+                if (wrapped)
+                    raw = wrapped[1];
+                var ddmmyyyy = /^(\d{2})-(\d{2})-(\d{4})$/;
+                var yyyymmdd = /^(\d{4})-(\d{2})-(\d{2})$/;
+                if (ddmmyyyy.test(raw)) {
+                    var _g = __read(ddmmyyyy.exec(raw), 4), dd = _g[1], mm = _g[2], yyyy = _g[3];
+                    this.dateFieldValue = new Date(+yyyy, +mm - 1, +dd);
+                }
+                else if (yyyymmdd.test(raw)) {
+                    var _h = __read(yyyymmdd.exec(raw), 4), yyyy = _h[1], mm = _h[2], dd = _h[3];
+                    this.dateFieldValue = new Date(+yyyy, +mm - 1, +dd);
+                }
+                else {
+                    this.dateFieldValue = undefined;
+                }
             }
         };
         FilterItemComponent.prototype._readModelForDateRangeField = function (dateRangeFieldModel) {
@@ -13235,7 +13263,7 @@
     FilterItemComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: "co-filter-item",
-                    template: "\n      <div class=\"co-filter-item-header\">\n          <co-collapsible\n                  [headerTitle]=\"placeholder\"\n                  [expandButtonLast]=\"true\"\n                  [iconData]=\"iconService.getIcon(icons.ArrowPointDown)\"\n                  [expanded]=\"expanded\"\n                  [showButton]=\"showButton\"\n                  [buttonText]=\"filterButtonLabel\"\n                  (buttonClicked)=\"onButtonClicked()\"\n          >\n              <div class=\"co-filter-item-collapsable-content\">\n                  <div class=\"co-filter-item-custom-content\" *ngIf=\"customContent; else collectionContent\"\n                       (keydown)=\"showButton=true\" (mousedown)=\"showButton=true\">\n                      <ng-content></ng-content>\n                  </div>\n                  <ng-template #collectionContent>\n                      <div class=\"co-filter-item-collection-content\" *ngIf=\"mode === modes.Filterlist || mode === modes.SingleSelectList\n                                                                   || mode === modes.SelectListWithNumberOutput || mode === modes.SelectListWithStringCollectionOutput\">\n                          <co-input-text\n                                  *ngIf=\"collection?.length > 10 || minSearchCharsToLoadCollection\"\n                                  [placeholder]=\"searchPlaceholder\"\n                                  [model]=\"filterText\"\n                                  (modelChange)=\"onModelChange($event)\"\n                                  [readonly]=\"readonly\"\n                          >\n                          </co-input-text>\n                        <div *ngIf=\"isLoading\" class=\"filter-loader\"><span></span></div>\n                          <div class=\"no-results\" *ngIf=\"filteredCollection?.length === 0\">\n                              <span [textContent]=\"noResultsLabel\"></span>\n                          </div>\n                          <div class=\"co-filter-item-collection-results\">\n                              <ng-container\n                                      *ngFor=\"let option of filteredCollection; let index = index\">\n                                  <div class=\"co-filter-item-collection-result-item\" *ngIf=\"index < limitTo || showAllResults\">\n                                      <co-input-checkbox *ngIf=\"mode !== modes.SingleSelectList\"\n                                                         [label]=\"option.description\"\n                                                         [model]=\"option.checked\"\n                                                         [clickableLabel]=\"false\"\n                                                         (modelChange)=\"handleModelChange(option)\"\n                                                         [readonly]=\"readonly\"\n                                      ></co-input-checkbox>\n                                      <co-input-radio-button *ngIf=\"mode === modes.SingleSelectList\"\n                                                             [label]=\"option.description\"\n                                                             [model]=\"option.checked\"\n                                                             (modelChange)=\"handleModelChange(option)\"\n                                                             [readonly]=\"readonly\"\n                                      ></co-input-radio-button>\n                                      <div class=\"co-filter-item-amount\" *ngIf=\"option.count\"\n                                           [textContent]=\"option.count.toString() | append: ')' | prepend: '      ('\"\n                                      ></div>\n                                  </div>\n\n                              </ng-container>\n                          </div>\n                          <div class=\"co-filter-show-more-or-less\" *ngIf=\"!showAllResults\">\n                              <div class=\"co-filter-show-more clickable\"\n                                   *ngIf=\"moreToShow()\">\n                                  <a (click)=\"increaseLimit()\">\n                                      <co-icon [iconData]=\"iconService.getIcon(icons.ArrowPointDown)\"></co-icon>\n                                      <span [textContent]=\"showMoreLabel\"></span>\n                                  </a>\n                              </div>\n                              <div class=\"co-filter-show-less clickable\"\n                                   *ngIf=\"lessToShow()\">\n                                  <a (click)=\"setToInitialLimit()\">\n                                      <co-icon [iconData]=\"iconService.getIcon(icons.ArrowPointUp)\"></co-icon>\n                                      <span [textContent]=\"showLessLabel\"></span>\n                                  </a>\n                              </div>\n                          </div>\n                      </div>\n                      <div class=\"co-filter-item-slider-content\" *ngIf=\"mode === modes.Slider\">\n                          <co-input-text\n                                  class=\"slider-from\"\n                                  [type]=\"'number'\"\n                                  [digitsOnly]=\"true\"\n                                  [hideArrowButtons]=\"true\"\n                                  [excludePlusMinus]=\"true\"\n                                  [label]=\"'FROM' | coreLocalize\"\n                                  [(model)]=\"sliderMin\"\n                                  [readonly]=\"readonly\"\n                                  (focusout)=\"handleModelChange(sliderMin)\"\n                          ></co-input-text>\n                          <co-input-text\n                                  class=\"slider-to\"\n                                  [type]=\"'number'\"\n                                  [digitsOnly]=\"true\"\n                                  [hideArrowButtons]=\"true\"\n                                  [excludePlusMinus]=\"true\"\n                                  [label]=\"'TO' | coreLocalize\"\n                                  [(model)]=\"sliderMax\"\n                                  [readonly]=\"readonly\"\n                                  (focusout)=\"handleModelChange(sliderMax)\"\n                          ></co-input-text>\n                      </div>\n                      <div class=\"co-filter-item-slider-content\" *ngIf=\"mode === modes.NullableSlider\">\n                          <co-input-text\n                                  class=\"slider-from\"\n                                  [type]=\"'number'\"\n                                  [digitsOnly]=\"true\"\n                                  [hideArrowButtons]=\"true\"\n                                  [excludePlusMinus]=\"true\"\n                                  [label]=\"'FROM' | coreLocalize\"\n                                  [(model)]=\"sliderMin\"\n                                  [readonly]=\"readonly\"\n                                  (focusout)=\"handleModelChange(sliderMin)\"\n                          ></co-input-text>\n                          <co-input-text\n                                  class=\"slider-to\"\n                                  [type]=\"'number'\"\n                                  [digitsOnly]=\"true\"\n                                  [hideArrowButtons]=\"true\"\n                                  [excludePlusMinus]=\"true\"\n                                  [label]=\"'TO' | coreLocalize\"\n                                  [(model)]=\"sliderMax\"\n                                  [readonly]=\"readonly\"\n                                  (focusout)=\"handleModelChange(sliderMax)\"\n                          ></co-input-text>\n                      </div>\n                      <div class=\"co-filter-item-checkbox-content\" *ngIf=\"mode === modes.Checkbox \">\n                          <co-input-checkbox\n                                  [(model)]=\"model\"\n                                  (modelChange)=\"handleModelChange($event)\"\n                                  [readonly]=\"readonly\"\n                                  [label]=\"placeholder\">\n                          </co-input-checkbox>\n                      </div>\n                      <div class=\"co-filter-item-checkbox-content\"\n                           *ngIf=\"mode === modes.CheckboxToText || mode === modes.CheckboxToSimpleText || mode === modes.CheckboxToBinary\">\n                          <co-input-checkbox\n                                  [(model)]=\"checkBoxToTextModel\"\n                                  (modelChange)=\"handleModelChange($event)\"\n                                  [readonly]=\"readonly\"\n                                  [label]=\"placeholder\"></co-input-checkbox>\n                      </div>\n                      <div class=\"co-filter-item-textfield-content\" *ngIf=\"mode === modes.TextField\">\n                          <co-input-text\n                                  [(model)]=\"model\" [readonly]=\"readonly\"\n                                  (modelChange)=\"handleModelChange($event)\"></co-input-text>\n                      </div>\n                      <div class=\"co-filter-item-dateField-content\" *ngIf=\"mode === modes.DateField\">\n                          <co-input-date\n                                  #dateInput\n                                  [(model)]=\"model\" [readonly]=\"readonly\"\n                                  (modelChange)=\"handleModelChange($event)\"\n                          ></co-input-date>\n                      </div>\n                      <div class=\"co-filter-item-dateField-content\" *ngIf=\"mode === modes.DateRangeField\">\n                          <co-input-date-range [readonly]=\"readonly\"\n                                  #dateRangeInput\n                                  [model]=\"[dateRangeStart, dateRangeEnd]\"\n                                  (modelChange)=\"handleModelChange($event)\"\n                                  [placeholder]=\"'Kies datum' | coreLocalize\">\n                          </co-input-date-range>\n                      </div>\n                  </ng-template>\n              </div>\n          </co-collapsible>\n      </div>\n\n  ",
+                    template: "\n      <div class=\"co-filter-item-header\">\n          <co-collapsible\n                  [headerTitle]=\"placeholder\"\n                  [expandButtonLast]=\"true\"\n                  [iconData]=\"iconService.getIcon(icons.ArrowPointDown)\"\n                  [expanded]=\"expanded\"\n                  [showButton]=\"showButton\"\n                  [buttonText]=\"filterButtonLabel\"\n                  (buttonClicked)=\"onButtonClicked()\"\n          >\n              <div class=\"co-filter-item-collapsable-content\">\n                  <div class=\"co-filter-item-custom-content\" *ngIf=\"customContent; else collectionContent\"\n                       (keydown)=\"showButton=true\" (mousedown)=\"showButton=true\">\n                      <ng-content></ng-content>\n                  </div>\n                  <ng-template #collectionContent>\n                      <div class=\"co-filter-item-collection-content\" *ngIf=\"mode === modes.Filterlist || mode === modes.SingleSelectList\n                                                                   || mode === modes.SelectListWithNumberOutput || mode === modes.SelectListWithStringCollectionOutput\">\n                          <co-input-text\n                                  *ngIf=\"collection?.length > 10 || minSearchCharsToLoadCollection\"\n                                  [placeholder]=\"searchPlaceholder\"\n                                  [model]=\"filterText\"\n                                  (modelChange)=\"onModelChange($event)\"\n                                  [readonly]=\"readonly\"\n                          >\n                          </co-input-text>\n                        <div *ngIf=\"isLoading\" class=\"filter-loader\"><span></span></div>\n                          <div class=\"no-results\" *ngIf=\"filteredCollection?.length === 0\">\n                              <span [textContent]=\"noResultsLabel\"></span>\n                          </div>\n                          <div class=\"co-filter-item-collection-results\">\n                              <ng-container\n                                      *ngFor=\"let option of filteredCollection; let index = index\">\n                                  <div class=\"co-filter-item-collection-result-item\" *ngIf=\"index < limitTo || showAllResults\">\n                                      <co-input-checkbox *ngIf=\"mode !== modes.SingleSelectList\"\n                                                         [label]=\"option.description\"\n                                                         [model]=\"option.checked\"\n                                                         [clickableLabel]=\"false\"\n                                                         (modelChange)=\"handleModelChange(option)\"\n                                                         [readonly]=\"readonly\"\n                                      ></co-input-checkbox>\n                                      <co-input-radio-button *ngIf=\"mode === modes.SingleSelectList\"\n                                                             [label]=\"option.description\"\n                                                             [model]=\"option.checked\"\n                                                             (modelChange)=\"handleModelChange(option)\"\n                                                             [readonly]=\"readonly\"\n                                      ></co-input-radio-button>\n                                      <div class=\"co-filter-item-amount\" *ngIf=\"option.count\"\n                                           [textContent]=\"option.count.toString() | append: ')' | prepend: '      ('\"\n                                      ></div>\n                                  </div>\n\n                              </ng-container>\n                          </div>\n                          <div class=\"co-filter-show-more-or-less\" *ngIf=\"!showAllResults\">\n                              <div class=\"co-filter-show-more clickable\"\n                                   *ngIf=\"moreToShow()\">\n                                  <a (click)=\"increaseLimit()\">\n                                      <co-icon [iconData]=\"iconService.getIcon(icons.ArrowPointDown)\"></co-icon>\n                                      <span [textContent]=\"showMoreLabel\"></span>\n                                  </a>\n                              </div>\n                              <div class=\"co-filter-show-less clickable\"\n                                   *ngIf=\"lessToShow()\">\n                                  <a (click)=\"setToInitialLimit()\">\n                                      <co-icon [iconData]=\"iconService.getIcon(icons.ArrowPointUp)\"></co-icon>\n                                      <span [textContent]=\"showLessLabel\"></span>\n                                  </a>\n                              </div>\n                          </div>\n                      </div>\n                      <div class=\"co-filter-item-slider-content\" *ngIf=\"mode === modes.Slider\">\n                          <co-input-text\n                                  class=\"slider-from\"\n                                  [type]=\"'number'\"\n                                  [digitsOnly]=\"true\"\n                                  [hideArrowButtons]=\"true\"\n                                  [excludePlusMinus]=\"true\"\n                                  [label]=\"'FROM' | coreLocalize\"\n                                  [(model)]=\"sliderMin\"\n                                  [readonly]=\"readonly\"\n                                  (focusout)=\"handleModelChange(sliderMin)\"\n                          ></co-input-text>\n                          <co-input-text\n                                  class=\"slider-to\"\n                                  [type]=\"'number'\"\n                                  [digitsOnly]=\"true\"\n                                  [hideArrowButtons]=\"true\"\n                                  [excludePlusMinus]=\"true\"\n                                  [label]=\"'TO' | coreLocalize\"\n                                  [(model)]=\"sliderMax\"\n                                  [readonly]=\"readonly\"\n                                  (focusout)=\"handleModelChange(sliderMax)\"\n                          ></co-input-text>\n                      </div>\n                      <div class=\"co-filter-item-slider-content\" *ngIf=\"mode === modes.NullableSlider\">\n                          <co-input-text\n                                  class=\"slider-from\"\n                                  [type]=\"'number'\"\n                                  [digitsOnly]=\"true\"\n                                  [hideArrowButtons]=\"true\"\n                                  [excludePlusMinus]=\"true\"\n                                  [label]=\"'FROM' | coreLocalize\"\n                                  [(model)]=\"sliderMin\"\n                                  [readonly]=\"readonly\"\n                                  (focusout)=\"handleModelChange(sliderMin)\"\n                          ></co-input-text>\n                          <co-input-text\n                                  class=\"slider-to\"\n                                  [type]=\"'number'\"\n                                  [digitsOnly]=\"true\"\n                                  [hideArrowButtons]=\"true\"\n                                  [excludePlusMinus]=\"true\"\n                                  [label]=\"'TO' | coreLocalize\"\n                                  [(model)]=\"sliderMax\"\n                                  [readonly]=\"readonly\"\n                                  (focusout)=\"handleModelChange(sliderMax)\"\n                          ></co-input-text>\n                      </div>\n                      <div class=\"co-filter-item-checkbox-content\" *ngIf=\"mode === modes.Checkbox \">\n                          <co-input-checkbox\n                                  [(model)]=\"model\"\n                                  (modelChange)=\"handleModelChange($event)\"\n                                  [readonly]=\"readonly\"\n                                  [label]=\"placeholder\">\n                          </co-input-checkbox>\n                      </div>\n                      <div class=\"co-filter-item-checkbox-content\"\n                           *ngIf=\"mode === modes.CheckboxToText || mode === modes.CheckboxToSimpleText || mode === modes.CheckboxToBinary\">\n                          <co-input-checkbox\n                                  [(model)]=\"checkBoxToTextModel\"\n                                  (modelChange)=\"handleModelChange($event)\"\n                                  [readonly]=\"readonly\"\n                                  [label]=\"placeholder\"></co-input-checkbox>\n                      </div>\n                      <div class=\"co-filter-item-textfield-content\" *ngIf=\"mode === modes.TextField\">\n                          <co-input-text\n                                  [(model)]=\"model\" [readonly]=\"readonly\"\n                                  (modelChange)=\"handleModelChange($event)\"></co-input-text>\n                      </div>\n                      <div class=\"co-filter-item-dateField-content\" *ngIf=\"mode === modes.DateField\">\n                          <co-input-date\n                                  #dateInput\n                                  [(model)]=\"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  ",
                     encapsulation: i0.ViewEncapsulation.None,
                     changeDetection: i0.ChangeDetectionStrategy.OnPush,
                     providers: [{
@@ -15362,6 +15390,8 @@
     exports.InputTextModule = InputTextModule;
     exports.InputTextareaComponent = InputTextareaComponent;
     exports.InputTextareaModule = InputTextareaModule;
+    exports.InputTimeComponent = InputTimeComponent;
+    exports.InputTimeModule = InputTimeModule;
     exports.LevelIndicatorComponent = LevelIndicatorComponent;
     exports.LevelIndicatorModule = LevelIndicatorModule;
     exports.ListOfIconsComponent = ListOfIconsComponent;
@@ -15452,9 +15482,9 @@
     exports["ɵu"] = ClickOutsideDirective;
     exports["ɵv"] = ClickOutsideMasterService;
     exports["ɵw"] = CalendarTemplateComponent;
-    exports["ɵx"] = PopupShowerService;
-    exports["ɵy"] = BaseSimpleGridComponent;
-    exports["ɵz"] = ExcelExportService;
+    exports["ɵx"] = BaseInputTimeDirective;
+    exports["ɵy"] = PopupShowerService;
+    exports["ɵz"] = BaseSimpleGridComponent;
 
     Object.defineProperty(exports, '__esModule', { value: true });