@colijnit/corecomponents_v12 259.1.10 → 259.1.12

package/bundles/colijnit-corecomponents_v12.umd.js

@@ -6630,7 +6630,8 @@
             return {
                 ngModule: CoreComponentsTranslationModule,
                 providers: [
-                    CoreComponentsTranslationService
+                    CoreComponentsTranslationService,
+                    CoreDictionaryService
                 ]
             };
         };
@@ -6641,10 +6642,6 @@
                     declarations: [
                         CoreLocalizePipe
                     ],
-                    providers: [
-                        CoreComponentsTranslationService,
-                        CoreDictionaryService
-                    ],
                     exports: [
                         CoreLocalizePipe
                     ]
@@ -7274,7 +7271,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)=\"!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  ",
+                    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()\" [textContent]=\"'SET' | coreLocalize\"></span>\n          <span class=\"clear-date-button\" *ngIf=\"this.selectedDate\" (click)=\"clearDate()\" [textContent]=\"'ERASE' | coreLocalize\"></span>\n          <span class=\"cancel-button\" (click)=\"closeDate()\" [textContent]=\"'CANCEL' | coreLocalize\"></span>\n        </div>\n      </div>\n  ",
                     encapsulation: i0.ViewEncapsulation.None
                 },] }
     ];
@@ -9878,7 +9875,8 @@
     };
 
     var BaseSimpleGridComponent = /** @class */ (function () {
-        function BaseSimpleGridComponent() {
+        function BaseSimpleGridComponent(changeDetection) {
+            this.changeDetection = changeDetection;
             this.MIN_COLUMN_WIDTH = 50;
             this.dataChanged = new rxjs.Subject();
             this.dragDropEnabled = false;
@@ -9894,6 +9892,7 @@
             this.emitDragDrop = false;
             this.onDrop = new i0.EventEmitter();
             this.selectRow = new i0.EventEmitter();
+            this.deselectRow = new i0.EventEmitter();
             this.dblClickRow = new i0.EventEmitter();
             this.saveRow = new i0.EventEmitter();
             this.deleteRow = new i0.EventEmitter();
@@ -9987,6 +9986,11 @@
             return row.singleColumnIndex;
         };
         BaseSimpleGridComponent.prototype.prepareDataRow = function (row, index) {
+            return __awaiter(this, void 0, void 0, function () {
+                return __generator(this, function (_a) {
+                    return [2 /*return*/];
+                });
+            });
         };
         BaseSimpleGridComponent.prototype._setColumns = function (columns) {
             var _a;
@@ -9994,34 +9998,66 @@
             this.columns.sort(function (a, b) { return a.order < b.order ? -1 : 1; });
         };
         BaseSimpleGridComponent.prototype._prepareData = function () {
-            if (this._prepared) {
-                return;
-            }
-            this.disabledRows.length = 0;
-            if (this.columns && this.columns.length > 0) {
-                this.headerColumns = this.columns.filter(function (c) { return !c.singleColumn; });
-                this.headerColumnsCopy = this.headerColumns;
-                var singleColumnIndex = -1;
-                for (var i = 0; i < this.columns.length; i++) {
-                    if (this.columns[i].singleColumn) {
-                        singleColumnIndex = i;
-                        break;
-                    }
-                }
-                // first check if there's single column data
-                if (singleColumnIndex > -1 && this.data && this.data.length > 0) {
-                    var field = this.columns[singleColumnIndex].field;
-                    for (var i = 0; i < this.data.length; i++) { // then mark row as single column row
-                        if (this.data[i][field] !== undefined && this.data[i][field] !== null && this.data[i][field] !== "") {
-                            // bit nasty to add prop, but cool for now
-                            this.data[i].singleColumnIndex = singleColumnIndex;
-                        }
-                        this.prepareDataRow(this.data[i], i);
+            return __awaiter(this, void 0, void 0, function () {
+                var singleColumnIndex, i, field, i, j;
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0:
+                            if (this._prepared) {
+                                return [2 /*return*/];
+                            }
+                            this.disabledRows.length = 0;
+                            if (!(this.columns && this.columns.length > 0)) return [3 /*break*/, 10];
+                            this.headerColumns = this.columns.filter(function (c) { return !c.singleColumn; });
+                            this.headerColumnsCopy = this.headerColumns;
+                            singleColumnIndex = -1;
+                            for (i = 0; i < this.columns.length; i++) {
+                                if (this.columns[i].singleColumn) {
+                                    singleColumnIndex = i;
+                                    break;
+                                }
+                            }
+                            if (!(this.data && this.data.length > 0)) return [3 /*break*/, 9];
+                            if (!(singleColumnIndex > -1)) return [3 /*break*/, 5];
+                            field = this.columns[singleColumnIndex].field;
+                            i = 0;
+                            _a.label = 1;
+                        case 1:
+                            if (!(i < this.data.length)) return [3 /*break*/, 4];
+                            if (this.data[i][field] !== undefined && this.data[i][field] !== null && this.data[i][field] !== "") {
+                                // bit nasty to add prop, but cool for now
+                                this.data[i].singleColumnIndex = singleColumnIndex;
+                            }
+                            return [4 /*yield*/, this.prepareDataRow(this.data[i], i)];
+                        case 2:
+                            _a.sent();
+                            _a.label = 3;
+                        case 3:
+                            i++;
+                            return [3 /*break*/, 1];
+                        case 4: return [3 /*break*/, 9];
+                        case 5:
+                            j = 0;
+                            _a.label = 6;
+                        case 6:
+                            if (!(j < this.data.length)) return [3 /*break*/, 9];
+                            return [4 /*yield*/, this.prepareDataRow(this.data[j], j)];
+                        case 7:
+                            _a.sent();
+                            _a.label = 8;
+                        case 8:
+                            j++;
+                            return [3 /*break*/, 6];
+                        case 9:
+                            this._prepared = true;
+                            _a.label = 10;
+                        case 10:
+                            this._resizeColumnsToFit();
+                            this.changeDetection.detectChanges();
+                            return [2 /*return*/];
                     }
-                }
-                this._prepared = true;
-            }
-            this._resizeColumnsToFit();
+                });
+            });
         };
         BaseSimpleGridComponent.prototype._resizeColumnsToFit = function () {
             var calculateColumns = this.columns.filter(function (c) { return !c.autoFit && !c.width; });
@@ -10042,6 +10078,9 @@
     BaseSimpleGridComponent.decorators = [
         { type: i0.Directive }
     ];
+    BaseSimpleGridComponent.ctorParameters = function () { return [
+        { type: i0.ChangeDetectorRef }
+    ]; };
     BaseSimpleGridComponent.propDecorators = {
         content: [{ type: i0.ContentChildren, args: [SimpleGridColumnDirective,] }],
         data: [{ type: i0.Input }],
@@ -10056,6 +10095,7 @@
         extraColumns: [{ type: i0.Input }],
         onDrop: [{ type: i0.Output }],
         selectRow: [{ type: i0.Output }],
+        deselectRow: [{ type: i0.Output }],
         dblClickRow: [{ type: i0.Output }],
         saveRow: [{ type: i0.Output }],
         deleteRow: [{ type: i0.Output }],
@@ -10067,14 +10107,15 @@
 
     var SimpleGridComponent = /** @class */ (function (_super) {
         __extends(SimpleGridComponent, _super);
-        function SimpleGridComponent(icons, _changeDetection, _formMaster) {
-            var _this = _super.call(this) || this;
+        function SimpleGridComponent(icons, changeDetection, _formMaster) {
+            var _this = _super.call(this, changeDetection) || this;
             _this.icons = icons;
-            _this._changeDetection = _changeDetection;
+            _this.changeDetection = changeDetection;
             _this._formMaster = _formMaster;
             _this.defaultTextAlign = exports.ColumnAlign.Left;
             _this.showAdd = false;
             _this.showDelete = false;
+            _this.deselectAllowed = false;
             _this.editOnCellClick = true;
             _this.rightToolbar = false;
             _this.showGridSettings = false;
@@ -10122,7 +10163,7 @@
                 this._nextAvailableCellToEdit(!event.shiftKey, this.editCellIndex)
                     .then(function (index) {
                     _this.editCellIndex = index;
-                    _this._changeDetection.markForCheck();
+                    _this.changeDetection.markForCheck();
                 });
                 this._detectChanges();
             }
@@ -10288,6 +10329,12 @@
                     this.selectRow.next(this.data[absoluteIndex]);
                 }
             }
+            else if (this.selectedRowIndex === index && this.deselectAllowed && ((this.editing && this.validateAndSave()) || !this.editing)) {
+                this.selectedRowIndex = -1;
+                if (emit) {
+                    this.deselectRow.next();
+                }
+            }
             this._detectChanges();
         };
         SimpleGridComponent.prototype.handleDblClickRow = function (event, index, row) {
@@ -10522,7 +10569,16 @@
             return hasSelectedTrue ? items.filter(function (item) { return item.selected === true; }) : items;
         };
         SimpleGridComponent.prototype.prepareDataRow = function (row, index) {
-            this.isRowDisabled(row, index);
+            return __awaiter(this, void 0, void 0, function () {
+                return __generator(this, function (_c) {
+                    switch (_c.label) {
+                        case 0: return [4 /*yield*/, this.isRowDisabled(row, index)];
+                        case 1:
+                            _c.sent();
+                            return [2 /*return*/];
+                    }
+                });
+            });
         };
         SimpleGridComponent.prototype._resetDblClick = function () {
             var _this = this;
@@ -10665,7 +10721,7 @@
             this._detectChanges();
         };
         SimpleGridComponent.prototype._detectChanges = function () {
-            this._changeDetection.detectChanges();
+            this.changeDetection.detectChanges();
         };
         SimpleGridComponent.prototype._resetEdit = function () {
             this._newRow = false;
@@ -10696,6 +10752,7 @@
         rowElements: [{ type: i0.ViewChildren, args: ['rowElement',] }],
         showAdd: [{ type: i0.Input }],
         showDelete: [{ type: i0.Input }],
+        deselectAllowed: [{ type: i0.Input }],
         editOnCellClick: [{ type: i0.Input }],
         rightToolbar: [{ type: i0.Input }],
         showGridSettings: [{ type: i0.Input }],