@colijnit/corecomponents_v12 12.2.9 → 12.2.11

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/overlay'), require('@angular/cdk/portal'), require('@angular/cdk/drag-drop'), 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/overlay', '@angular/cdk/portal', '@angular/cdk/drag-drop', '@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.overlay, global.ng.cdk.portal, global.ng.cdk.dragDrop, 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, overlay, portal, dragDrop, 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('@angular/cdk/overlay'), require('@angular/cdk/portal'), 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', '@angular/cdk/overlay', '@angular/cdk/portal', '@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.ng.cdk.overlay, global.ng.cdk.portal, 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, overlay, portal, scrolling, arrayUtils, defaultGetObjectConfigurationsParams, objectConfiguration) { 'use strict';
 
     function _interopNamespace(e) {
         if (e && e.__esModule) return e;
@@ -2736,7 +2736,7 @@
                 return __generator(this, function (_a) {
                     switch (_a.label) {
                         case 0:
-                            if (!(this.showSaveCancel && handleCommit)) return [3 /*break*/, 2];
+                            if (!(this.showSaveCancel && handleCommit && this._modelDirtyForCommit)) return [3 /*break*/, 2];
                             return [4 /*yield*/, this._handleCommit(event, false)];
                         case 1:
                             _a.sent();
@@ -2889,6 +2889,7 @@
                                 this._commitButtonsComponentRef.instance.commitFinished = false;
                                 this._commitButtonsComponentRef.instance.committing = true;
                             }
+                            this._modelDirtyForCommit = false;
                             return [4 /*yield*/, this.commit(this.model)];
                         case 1:
                             success = _a.sent();
@@ -2896,7 +2897,6 @@
                             return [4 /*yield*/, this._commitFinished()];
                         case 2:
                             _a.sent();
-                            this._modelDirtyForCommit = false;
                             if (success && doBlur) {
                                 this.doBlur(event, false);
                             }
@@ -4959,7 +4959,7 @@
     CoDialogComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'co-dialog',
-                    template: "\n        <div class=\"co-dialog-overlay\" (click)=\"handleOverlayClick($event)\"></div>\n        <div class=\"co-dialog-wrapper\" [ngClass]=\"customCssClass ? customCssClass : undefined\" @showHideDialog>\n            <div class=\"dialog-header\" *ngIf=\"!borderless\">\n                <div class=\"dialog-header-caption\" *ngIf=\"headerTemplate\">\n                    <ng-container [ngTemplateOutlet]=\"headerTemplate\"></ng-container>\n                </div>\n                <div class=\"dialog-close-button\" *ngIf=\"showCloseIcon\" (click)=\"handleCloseDialog($event)\">\n                    <co-icon [icon]=\"icons.CrossSkinny\"></co-icon>\n                </div>\n            </div>\n            <div class=\"dialog-content co-small-scrollbar\" [ngClass]=\"customCssClass ? customCssClass : undefined\">\n                <ng-content></ng-content>\n            </div>\n            <div class=\"dialog-footer\" *ngIf=\"footerTemplate\">\n                <ng-container [ngTemplateOutlet]=\"footerTemplate\"></ng-container>\n            </div>\n        </div>\n    ",
+                    template: "\n        <div class=\"co-dialog-overlay\" (click)=\"handleOverlayClick($event)\"></div>\n        <div class=\"co-dialog-placeholder\">\n            <div class=\"co-dialog-wrapper\" [ngClass]=\"customCssClass ? customCssClass : undefined\" @showHideDialog cdkDrag>\n                <div class=\"dialog-header\" *ngIf=\"!borderless\" cdkDragHandle>\n                    <div class=\"dialog-header-caption\" *ngIf=\"headerTemplate\">\n                        <ng-container [ngTemplateOutlet]=\"headerTemplate\"></ng-container>\n                    </div>\n                    <div class=\"dialog-close-button\" *ngIf=\"showCloseIcon\" (click)=\"handleCloseDialog($event)\">\n                        <co-icon [icon]=\"icons.CrossSkinny\"></co-icon>\n                    </div>\n                </div>\n                <div class=\"dialog-content co-small-scrollbar\" [ngClass]=\"customCssClass ? customCssClass : undefined\">\n                    <ng-content></ng-content>\n                </div>\n                <div class=\"dialog-footer\" *ngIf=\"footerTemplate\">\n                    <ng-container [ngTemplateOutlet]=\"footerTemplate\"></ng-container>\n                </div>\n            </div>\n        </div>\n    ",
                     animations: [
                         animations.trigger('showHideCoDialog', [
                             animations.transition('void => *', [
@@ -5003,7 +5003,8 @@
         { type: i0.NgModule, args: [{
                     imports: [
                         common.CommonModule,
-                        IconModule
+                        IconModule,
+                        dragDrop.DragDropModule
                     ],
                     declarations: [CoDialogComponent],
                     exports: [CoDialogComponent]
@@ -5417,7 +5418,7 @@
     }());
     FormComponent.decorators = [
         { type: i0.Component, args: [{
-                    selector: "co-form",
+                    selector: "co-form-test",
                     template: "\n    <ng-content></ng-content>\n  ",
                     encapsulation: i0.ViewEncapsulation.None
                 },] }
@@ -5717,6 +5718,9 @@
         //This mode makes the Filter display a min and max field. This should eventually be a slider.
         // input is passed along as "min - max"
         FilterItemMode["Slider"] = "slider";
+        //This mode makes the Filter display a min and max field. This should eventually be a slider.
+        // input is passed along as "min - max" This version can be emptied.
+        FilterItemMode["NullableSlider"] = "nullableSlider";
         //This mode makes the Filter display a simple textfield.
         // The value typed into the field will be passed along directly as a string.
         FilterItemMode["TextField"] = "textField";
@@ -6800,6 +6804,8 @@
     var CalendarTemplateComponent = /** @class */ (function () {
         function CalendarTemplateComponent() {
             this.icons = exports.CoreComponentsIcon;
+            this.showWeekNumbers = true;
+            this.weekNumbers = [];
             this.locale = "nl-NL";
             this.highlightDaysBetweenDates = false;
             this.dateSelected = new i0.EventEmitter();
@@ -6884,6 +6890,7 @@
             }
             this.generateCalendar();
             this._fillDatesBetweenSelected();
+            this.calculateWeekNumbers();
         };
         CalendarTemplateComponent.prototype.nextMonth = function () {
             if (this.workingMonth === 11) {
@@ -6895,6 +6902,7 @@
             }
             this.generateCalendar();
             this._fillDatesBetweenSelected();
+            this.calculateWeekNumbers();
         };
         CalendarTemplateComponent.prototype.prevYear = function () {
             this.workingYear--;
@@ -6913,6 +6921,7 @@
             this.monthHeader = month + " " + year;
             this.yearHeader = "" + year;
             this.generateYearSelectionYears();
+            this.calculateWeekNumbers();
         };
         CalendarTemplateComponent.prototype._setInitialValues = function () {
             this.workingDay = this.selectedDate ? this.selectedDate : new Date();
@@ -7046,16 +7055,39 @@
         CalendarTemplateComponent.prototype._capitalizeFirstLetter = function (value) {
             return value.charAt(0).toUpperCase() + value.slice(1);
         };
+        CalendarTemplateComponent.prototype.calculateWeekNumbers = function () {
+            this.weekNumbers = [];
+            var weekNumber = null;
+            for (var i = 0; i < this.daysInMonth.length; i++) {
+                var day = this.daysInMonth[i];
+                if (day) {
+                    // Start of a new week or first day of the month, calculate and set weekNumber
+                    weekNumber = this.getISOWeek(day);
+                    // Check if the weekNumber is not already in the array
+                    if (!this.weekNumbers.includes(weekNumber)) {
+                        this.weekNumbers.push(weekNumber);
+                    }
+                }
+            }
+        };
+        CalendarTemplateComponent.prototype.getISOWeek = function (date) {
+            var d = new Date(Date.UTC(date.getFullYear(), date.getMonth(), date.getDate()));
+            d.setUTCDate(d.getUTCDate() + 4 - (d.getUTCDay() || 7));
+            var yearStart = new Date(Date.UTC(d.getUTCFullYear(), 0, 1));
+            var weekNumber = Math.ceil(((d.valueOf() - yearStart.valueOf()) / 86400000 + 1) / 7);
+            return weekNumber;
+        };
         return CalendarTemplateComponent;
     }());
     CalendarTemplateComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: "calendar-template",
-                    template: "\n      <div class=\"calendar\">\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\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\n               (click)=\"selectDate(day)\"\n               (mouseover)=\"handleMouseOverDay(day)\">\n            <ng-container *ngIf=\"day\">\n              <div class=\"day-number\"\n                   [textContent]=\"day.getDate()\"></div>\n            </ng-container>\n          </div>\n        </div>\n      </div>\n  ",
+                    template: "\n      <div class=\"calendar\">\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>\n  ",
                     encapsulation: i0.ViewEncapsulation.None
                 },] }
     ];
     CalendarTemplateComponent.propDecorators = {
+        showWeekNumbers: [{ type: i0.Input }],
         locale: [{ type: i0.Input }],
         highlightDaysBetweenDates: [{ type: i0.Input }],
         selectedDate: [{ type: i0.Input }],
@@ -10112,7 +10144,7 @@
     SimpleGridComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'co-simple-grid',
-                    template: "\n    <co-grid-toolbar *ngIf=\"showToolbar\" [class.right]=\"rightToolbar\"\n                     [showEdit]=\"showEdit\"\n                     [showAdd]=\"showAdd\"\n                     [showDelete]=\"showDelete\"\n                     [deleteEnabled]=\"selectedRowIndex > -1\"\n                     (addClick)=\"addNewRow()\"\n                     (editClick)=\"editRow($event)\"\n                     (saveClick)=\"validateAndSave()\"\n                     (cancelClick)=\"cancelEditRow()\"\n                     (deleteClick)=\"removeRow()\"\n    ></co-grid-toolbar>\n    <table class=\"simple-grid-table\">\n      <colgroup>\n        <col *ngFor=\"let column of headerColumns; let index = index\"\n             [class.simple-grid-column-auto-fit]=\"column.autoFit\"\n             [style.width.px]=\"column.width\"\n             [style.min-width.px]=\"MIN_COLUMN_WIDTH\">\n      </colgroup>\n      <thead>\n      <tr>\n        <th scope=\"col\" #headerCell class=\"simple-grid-column-header\" *ngFor=\"let column of headerColumns; let index = index\">\n          <div class=\"simple-grid-column-header-wrapper\" [class.resizable]=\"resizable\"\n               [ngClass]=\"column.textAlign ? column.textAlign : defaultTextAlign\">\n            <ng-container *ngIf=\"column.headerTemplate; else noHeaderTemplate\">\n              <ng-container [ngTemplateOutlet]=\"column.headerTemplate\"></ng-container>\n            </ng-container>\n            <ng-template #noHeaderTemplate>\n              <div class=\"simple-grid-column-header-label\" [ngClass]=\"column.textAlign ? column.textAlign : defaultTextAlign\"\n                   [textContent]=\"column.headerText || '&nbsp;'\"\n              ></div>\n            </ng-template>\n            <div *ngIf=\"resizable && column.resizable\" class=\"simple-grid-column-sizer\"\n                 (mousedown)=\"handleSizerMouseDown($event, column)\"\n            ></div>\n          </div>\n        </th>\n      </tr>\n      </thead>\n      <tbody #dropList cdkDropList cdkDropListOrientation=\"vertical\"\n             class=\"simple-grid-drag-drop-list\"\n             [cdkDropListDisabled]=\"!dragDropEnabled\"\n             [cdkDropListData]=\"data\"\n             [cdkDropListEnterPredicate]=\"handleCanDragDrop\"\n             (cdkDropListDropped)=\"handleDrop($event)\">\n        <tr class=\"simple-grid-row\" [class.selected]=\"rowIndex === selectedRowIndex && !editing\" observeVisibility\n            [class.disabled]=\"isRowDisabled(row)\"\n          [class.editing]=\"rowIndex === editRowIndex\" *ngFor=\"let row of (!!rowsPerPage ? (data | paginate: {itemsPerPage: rowsPerPage, currentPage: currentPage}) : data); last as last; let rowIndex = index\" cdkDrag\n          (click)=\"handleClickRow($event, rowIndex, row)\" (dblclick)=\"handleDblClickRow($event, rowIndex, row)\" (visibilityChange)=\"rowVisible.next(row)\">\n          <co-form class=\"simple-grid-row-form\">\n            <ng-container *ngIf=\"isSingleColumnRow(row)\">\n              <td class=\"simple-grid-single-column-cell\" [attr.colspan]=\"headerColumns.length\">\n                <co-simple-grid-cell\n                  [column]=\"columns[singleColumnIndex(row)]\"\n                  [row]=\"row\"\n                  [editMode]=\"false\"\n                ></co-simple-grid-cell>\n              </td>\n            </ng-container>\n            <ng-container *ngIf=\"!isSingleColumnRow(row)\">\n              <ng-container *ngFor=\"let column of headerColumns; let columnIndex = index\">\n                <td class=\"simple-grid-column-cell\" *ngIf=\"columnIndex !== singleColumnIndex(row)\">\n                  <co-simple-grid-cell\n                    [column]=\"column\"\n                    [row]=\"row\"\n                    [editMode]=\"inlineEdit && editing && rowIndex === editRowIndex\"\n                    [fieldEditMode]=\"editCellIndex === columnIndex\"\n                    (cellClick)=\"handleCellClick(columnIndex)\"\n                  ></co-simple-grid-cell>\n                  <div *ngIf=\"column.resizable\" class=\"simple-grid-column-sizer-placeholder\"></div>\n                </td>\n              </ng-container>\n            </ng-container>\n          </co-form>\n        </tr>\n      </tbody>\n    </table>\n    <co-pagination-bar *ngIf=\"data?.length > rowsPerPage\" class=\"pagination-bar\"\n                       [itemsPerPage]=\"rowsPerPage\"\n                       [currentPage]=\"currentPage\"\n                       [totalItems]=\"data.length\"\n                       [autoHide]=\"true\"\n                       (previousClick)=\"goToPreviousPage()\"\n                       (nextClick)=\"goToNextPage()\"\n                       (pageClick)=\"setCurrentPage($event)\"\n                        ></co-pagination-bar>\n  ",
+                    template: "\n    <co-grid-toolbar *ngIf=\"showToolbar\" [class.right]=\"rightToolbar\"\n                     [showEdit]=\"showEdit\"\n                     [showAdd]=\"showAdd\"\n                     [showDelete]=\"showDelete\"\n                     [deleteEnabled]=\"selectedRowIndex > -1\"\n                     (addClick)=\"addNewRow()\"\n                     (editClick)=\"editRow($event)\"\n                     (saveClick)=\"validateAndSave()\"\n                     (cancelClick)=\"cancelEditRow()\"\n                     (deleteClick)=\"removeRow()\"\n    ></co-grid-toolbar>\n    <table class=\"simple-grid-table\">\n      <colgroup>\n        <col *ngFor=\"let column of headerColumns; let index = index\"\n             [class.simple-grid-column-auto-fit]=\"column.autoFit\"\n             [style.width.px]=\"column.width\"\n             [style.min-width.px]=\"MIN_COLUMN_WIDTH\">\n      </colgroup>\n      <thead>\n      <tr>\n        <th scope=\"col\" #headerCell class=\"simple-grid-column-header\" *ngFor=\"let column of headerColumns; let index = index\">\n          <div class=\"simple-grid-column-header-wrapper\" [class.resizable]=\"resizable\"\n               [ngClass]=\"column.textAlign ? column.textAlign : defaultTextAlign\">\n            <ng-container *ngIf=\"column.headerTemplate; else noHeaderTemplate\">\n              <ng-container [ngTemplateOutlet]=\"column.headerTemplate\"></ng-container>\n            </ng-container>\n            <ng-template #noHeaderTemplate>\n              <div class=\"simple-grid-column-header-label\" [ngClass]=\"column.textAlign ? column.textAlign : defaultTextAlign\"\n                   [textContent]=\"column.headerText || '&nbsp;'\"\n              ></div>\n            </ng-template>\n            <div *ngIf=\"resizable && column.resizable\" class=\"simple-grid-column-sizer\"\n                 (mousedown)=\"handleSizerMouseDown($event, column)\"\n            ></div>\n          </div>\n        </th>\n      </tr>\n      </thead>\n      <tbody #dropList cdkDropList cdkDropListOrientation=\"vertical\"\n             class=\"simple-grid-drag-drop-list\"\n             [cdkDropListDisabled]=\"!dragDropEnabled\"\n             [cdkDropListData]=\"data\"\n             [cdkDropListEnterPredicate]=\"handleCanDragDrop\"\n             (cdkDropListDropped)=\"handleDrop($event)\">\n        <tr class=\"simple-grid-row\" [class.selected]=\"rowIndex === selectedRowIndex && !editing\" observeVisibility\n            [class.disabled]=\"isRowDisabled(row)\"\n          [class.editing]=\"rowIndex === editRowIndex\" *ngFor=\"let row of (!!rowsPerPage ? (data | paginate: {itemsPerPage: rowsPerPage, currentPage: currentPage}) : data); last as last; let rowIndex = index\" cdkDrag\n          (click)=\"handleClickRow($event, rowIndex, row)\" (dblclick)=\"handleDblClickRow($event, rowIndex, row)\" (visibilityChange)=\"rowVisible.next(row)\">\n          <co-form-test class=\"simple-grid-row-form\">\n            <ng-container *ngIf=\"isSingleColumnRow(row)\">\n              <td class=\"simple-grid-single-column-cell\" [attr.colspan]=\"headerColumns.length\">\n                <co-simple-grid-cell\n                  [column]=\"columns[singleColumnIndex(row)]\"\n                  [row]=\"row\"\n                  [editMode]=\"false\"\n                ></co-simple-grid-cell>\n              </td>\n            </ng-container>\n            <ng-container *ngIf=\"!isSingleColumnRow(row)\">\n              <ng-container *ngFor=\"let column of headerColumns; let columnIndex = index\">\n                <td class=\"simple-grid-column-cell\" *ngIf=\"columnIndex !== singleColumnIndex(row)\">\n                  <co-simple-grid-cell\n                    [column]=\"column\"\n                    [row]=\"row\"\n                    [editMode]=\"inlineEdit && editing && rowIndex === editRowIndex\"\n                    [fieldEditMode]=\"editCellIndex === columnIndex\"\n                    (cellClick)=\"handleCellClick(columnIndex)\"\n                  ></co-simple-grid-cell>\n                  <div *ngIf=\"column.resizable\" class=\"simple-grid-column-sizer-placeholder\"></div>\n                </td>\n              </ng-container>\n            </ng-container>\n          </co-form-test>\n        </tr>\n      </tbody>\n    </table>\n    <co-pagination-bar *ngIf=\"data?.length > rowsPerPage\" class=\"pagination-bar\"\n                       [itemsPerPage]=\"rowsPerPage\"\n                       [currentPage]=\"currentPage\"\n                       [totalItems]=\"data.length\"\n                       [autoHide]=\"true\"\n                       (previousClick)=\"goToPreviousPage()\"\n                       (nextClick)=\"goToNextPage()\"\n                       (pageClick)=\"setCurrentPage($event)\"\n                        ></co-pagination-bar>\n  ",
                     providers: [
                         FormMasterService
                     ],
@@ -11714,6 +11746,7 @@
             this.noResultsLabel = "No results";
             this.sliderDefaultMin = 0;
             this.sliderDefaultMax = 100000;
+            this.fullRangeIsNull = false;
             this.modelChange = new i0.EventEmitter();
             this.collectionChange = new i0.EventEmitter();
             this.filterButtonClicked = new i0.EventEmitter();
@@ -11813,6 +11846,10 @@
                     this.showButton = true;
                     this._createModelForSliderMode();
                     break;
+                case this.modes.NullableSlider:
+                    this.showButton = true;
+                    this._createModelForNullableSliderMode();
+                    break;
                 case this.modes.CheckboxToText:
                     this.showButton = true;
                     this._createModelForCheckboxToText();
@@ -11912,6 +11949,7 @@
                     this._readModelForSelectListWithNumberOutput(newModel);
                     break;
                 case this.modes.Slider:
+                case this.modes.NullableSlider:
                     this._readModelForSliderMode(newModel);
                     break;
                 case this.modes.CheckboxToText:
@@ -11999,6 +12037,16 @@
             this.sliderMax = trueUpperBound;
             this._model = trueLowerBound + " - " + trueUpperBound;
         };
+        FilterItemComponent.prototype._createModelForNullableSliderMode = function () {
+            if (this.sliderMin && this.sliderMax) {
+                var trueLowerBound = Math.min(this.sliderMin, this.sliderMax);
+                var trueUpperBound = Math.max(this.sliderMin, this.sliderMax);
+                this._model = trueLowerBound + " - " + trueUpperBound;
+            }
+            else {
+                this._model = null;
+            }
+        };
         FilterItemComponent.prototype._createModelForCheckboxToText = function () {
             if (this.checkBoxToTextModel) {
                 this._model = "?='J'";
@@ -12188,7 +12236,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)=\"applyFilter($event)\"\n              >\n              </co-input-text>\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                    ></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                    ></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' | localize\"\n                [(model)]=\"sliderMin\"\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' | localize\"\n                [(model)]=\"sliderMax\"\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                [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                [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\"\n                (modelChange)=\"handleModelChange($event)\"></co-input-text>\n            </div>\n            <div class=\"co-filter-item-dateField-content\" *ngIf=\"mode === modes.DateField\">\n              <co-input-date\n                [(model)]=\"model\"\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\n                [model]=\"[dateRangeStart, dateRangeEnd]\"\n                (modelChange)=\"handleModelChange($event)\"\n                [placeholder]=\"'SELECT_DATE' | localize\">\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)=\"applyFilter($event)\"\n              >\n              </co-input-text>\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                    ></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                    ></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' | localize\"\n                [(model)]=\"sliderMin\"\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' | localize\"\n                [(model)]=\"sliderMax\"\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' | localize\"\n                [(model)]=\"sliderMin\"\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' | localize\"\n                [(model)]=\"sliderMax\"\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                [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                [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\"\n                (modelChange)=\"handleModelChange($event)\"></co-input-text>\n            </div>\n            <div class=\"co-filter-item-dateField-content\" *ngIf=\"mode === modes.DateField\">\n              <co-input-date\n                [(model)]=\"model\"\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\n                [model]=\"[dateRangeStart, dateRangeEnd]\"\n                (modelChange)=\"handleModelChange($event)\"\n                [placeholder]=\"'SELECT_DATE' | localize\">\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
                 },] }
@@ -12214,6 +12262,7 @@
         noResultsLabel: [{ type: i0.Input }],
         sliderDefaultMin: [{ type: i0.Input }],
         sliderDefaultMax: [{ type: i0.Input }],
+        fullRangeIsNull: [{ type: i0.Input }],
         model: [{ type: i0.Input }],
         modelChange: [{ type: i0.Output }],
         collectionChange: [{ type: i0.Output }],