@colijnit/corecomponents_v12 12.2.10 → 12.2.12

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;
@@ -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 *ngIf=\"!borderless\" class=\"dialog-drag-handle\" cdkDragHandle></div>\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        </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
                 },] }
@@ -5979,6 +5980,25 @@
         showClass: [{ type: i0.HostBinding, args: ['class.co-input-date',] }]
     };
 
+    var OverlayParentDirective = /** @class */ (function () {
+        function OverlayParentDirective(elementRef) {
+            this.elementRef = elementRef;
+        }
+        OverlayParentDirective.prototype.ngOnDestroy = function () {
+            this.elementRef = undefined;
+        };
+        return OverlayParentDirective;
+    }());
+    OverlayParentDirective.decorators = [
+        { type: i0.Directive, args: [{
+                    selector: '[overlayParent]',
+                    exportAs: 'overlayParent'
+                },] }
+    ];
+    OverlayParentDirective.ctorParameters = function () { return [
+        { type: i0.ElementRef }
+    ]; };
+
     var OverlayDirective = /** @class */ (function () {
         function OverlayDirective(elementRef) {
             var _this = this;
@@ -5999,7 +6019,15 @@
         Object.defineProperty(OverlayDirective.prototype, "parent", {
             set: function (value) {
                 if (value) {
-                    this._parent = value instanceof i0.ElementRef ? value : value.elementRef;
+                    if (value instanceof i0.ElementRef) {
+                        this._parent = value.nativeElement;
+                    }
+                    else if (value instanceof OverlayParentDirective) {
+                        this._parent = value.elementRef.nativeElement;
+                    }
+                    else {
+                        this._parent = value;
+                    }
                 }
                 else {
                     if (this._parent && this._resizeObserver) {
@@ -6044,14 +6072,14 @@
                 root: null
             });
             if (this._parent) {
-                this._intersectionObserver.observe(this._parent.nativeElement); // observe parent for visibility
+                this._intersectionObserver.observe(this._parent); // observe parent for visibility
             }
             this._resizeObserver.observe(document.body);
         };
         OverlayDirective.prototype._checkAndPlaceElement = function () {
-            if (this._elementRef && this._elementRef.nativeElement && this._parent && this._parent.nativeElement) {
+            if (this._elementRef && this._elementRef.nativeElement && this._parent) {
                 var elementRect = this._elementRef.nativeElement.getBoundingClientRect();
-                var parentBoundingRect = this._parent.nativeElement.getBoundingClientRect();
+                var parentBoundingRect = this._parent.getBoundingClientRect();
                 var parentRect = {};
                 if (!this.inline) {
                     parentRect = {
@@ -6064,10 +6092,10 @@
                 }
                 else {
                     parentRect = {
-                        bottom: this._parent.nativeElement.offsetTop + parentBoundingRect.height,
-                        right: this._parent.nativeElement.offsetLeft + parentBoundingRect.width,
-                        left: this._parent.nativeElement.offsetLeft,
-                        top: this._parent.nativeElement.offsetTop,
+                        bottom: this._parent.offsetTop + parentBoundingRect.height,
+                        right: this._parent.offsetLeft + parentBoundingRect.width,
+                        left: this._parent.offsetLeft,
+                        top: this._parent.offsetTop,
                         width: parentBoundingRect.width
                     };
                 }
@@ -6131,25 +6159,6 @@
         fullSize: [{ type: i0.Input }]
     };
 
-    var OverlayParentDirective = /** @class */ (function () {
-        function OverlayParentDirective(elementRef) {
-            this.elementRef = elementRef;
-        }
-        OverlayParentDirective.prototype.ngOnDestroy = function () {
-            this.elementRef = undefined;
-        };
-        return OverlayParentDirective;
-    }());
-    OverlayParentDirective.decorators = [
-        { type: i0.Directive, args: [{
-                    selector: '[overlayParent]',
-                    exportAs: 'overlayParent'
-                },] }
-    ];
-    OverlayParentDirective.ctorParameters = function () { return [
-        { type: i0.ElementRef }
-    ]; };
-
     var OverlayModule = /** @class */ (function () {
         function OverlayModule() {
         }
@@ -6803,6 +6812,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();
@@ -6887,6 +6898,7 @@
             }
             this.generateCalendar();
             this._fillDatesBetweenSelected();
+            this.calculateWeekNumbers();
         };
         CalendarTemplateComponent.prototype.nextMonth = function () {
             if (this.workingMonth === 11) {
@@ -6898,6 +6910,7 @@
             }
             this.generateCalendar();
             this._fillDatesBetweenSelected();
+            this.calculateWeekNumbers();
         };
         CalendarTemplateComponent.prototype.prevYear = function () {
             this.workingYear--;
@@ -6916,6 +6929,7 @@
             this.monthHeader = month + " " + year;
             this.yearHeader = "" + year;
             this.generateYearSelectionYears();
+            this.calculateWeekNumbers();
         };
         CalendarTemplateComponent.prototype._setInitialValues = function () {
             this.workingDay = this.selectedDate ? this.selectedDate : new Date();
@@ -7049,16 +7063,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 }],
@@ -7209,6 +7246,12 @@
         InputDateRangePickerComponent.prototype.showClass = function () {
             return true;
         };
+        InputDateRangePickerComponent.prototype.handleFirstInputClick = function (event) {
+            event.stopPropagation();
+        };
+        InputDateRangePickerComponent.prototype.handleSecondInputClick = function (event) {
+            event.stopPropagation();
+        };
         InputDateRangePickerComponent.prototype.handleDatesSelected = function (dates) {
             this.setModel(dates);
         };
@@ -7284,7 +7327,7 @@
     InputDateRangePickerComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'co-input-date-range',
-                    template: "\n      <div class=\"inputs-wrapper\" overlayParent #parentForOverlay=\"overlayParent\">\n        <co-input-text class=\"no-focus-line custom-height\"\n                       [(model)]=\"firstDateAsString\"\n                       [noClickFocus]=\"true\"\n                       [pattern]=\"'yyyy-MM-dd'\"\n                       [type]=\"'date'\"\n                       [leftIcon]=\"leftIcon\"\n                       [leftIconData]=\"leftIconData\"\n                       [placeholder]=\"placeholder\"\n                       (blur)=\"handleFirstDateChanged(firstDateAsString)\"\n                       (clearIconClick)=\"clearDate(0)\"\n        ></co-input-text>\n        <co-input-text class=\"no-focus-line custom-height\"\n                       [(model)]= \"secondDateAsString\"\n                       [noClickFocus]=\"true\"\n                       [pattern]=\"'yyyy-MM-dd'\"\n                       [type]=\"'date'\"\n                       [rightIcon]=\"rightIcon\"\n                       (rightIconClick)=\"toggleCalendar()\"\n                       (blur)=\"handleSecondDateChanged(secondDateAsString)\"\n                       (clearIconClick)=\"clearDate(1)\"\n        ></co-input-text>\n      </div>\n    ",
+                    template: "\n      <div class=\"inputs-wrapper\" overlayParent #parentForOverlay=\"overlayParent\">\n        <co-input-text #firstInput class=\"no-focus-line custom-height\"\n                       [(model)]=\"firstDateAsString\"\n                       [noClickFocus]=\"true\"\n                       [pattern]=\"'yyyy-MM-dd'\"\n                       [type]=\"'date'\"\n                       [leftIcon]=\"leftIcon\"\n                       [leftIconData]=\"leftIconData\"\n                       [placeholder]=\"placeholder\"\n                       (blur)=\"handleFirstDateChanged(firstDateAsString)\"\n                       (clearIconClick)=\"clearDate(0)\"\n                       (click)=\"handleFirstInputClick($event)\"\n        ></co-input-text>\n        <co-input-text #secondInput class=\"no-focus-line custom-height\"\n                       [(model)]= \"secondDateAsString\"\n                       [noClickFocus]=\"true\"\n                       [pattern]=\"'yyyy-MM-dd'\"\n                       [type]=\"'date'\"\n                       [rightIcon]=\"rightIcon\"\n                       (rightIconClick)=\"toggleCalendar()\"\n                       (blur)=\"handleSecondDateChanged(secondDateAsString)\"\n                       (clearIconClick)=\"clearDate(1)\"\n                       (click)=\"handleSecondInputClick($event)\"\n        ></co-input-text>\n      </div>\n    ",
                     providers: [
                         OverlayService,
                         {
@@ -7299,6 +7342,8 @@
                 },] }
     ];
     InputDateRangePickerComponent.propDecorators = {
+        firstInput: [{ type: i0.ViewChild, args: ['firstInput',] }],
+        secondInput: [{ type: i0.ViewChild, args: ['secondInput',] }],
         showClass: [{ type: i0.HostBinding, args: ['class.co-input-date-range',] }]
     };
 
@@ -10115,7 +10160,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
                     ],