@colijnit/corecomponents_v12 258.1.16 → 258.1.17
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/bundles/colijnit-corecomponents_v12.umd.js +117 -61
- package/bundles/colijnit-corecomponents_v12.umd.js.map +1 -1
- package/colijnit-corecomponents_v12.metadata.json +1 -1
- package/esm2015/lib/components/grid-toolbar/grid-toolbar.component.js +2 -2
- package/esm2015/lib/components/simple-grid/simple-grid.component.js +240 -191
- package/fesm2015/colijnit-corecomponents_v12.js +240 -191
- package/fesm2015/colijnit-corecomponents_v12.js.map +1 -1
- package/lib/components/simple-grid/simple-grid.component.d.ts +5 -2
- package/lib/components/simple-grid/style/_layout.scss +1 -0
- package/package.json +1 -1
|
@@ -5532,7 +5532,7 @@
|
|
|
5532
5532
|
GridToolbarComponent.decorators = [
|
|
5533
5533
|
{ type: i0.Component, args: [{
|
|
5534
5534
|
selector: "co-grid-toolbar",
|
|
5535
|
-
template: "\n <div class=\"grid-toolbar-wrapper\">\n <co-icon *ngIf=\"showEdit\" [iconData]=\"iconsService.getIcon(icons.PenToSquareSolid)\" [title]=\"'edit'\" (click)=\"editClick.emit($event)\"></co-icon>\n <co-icon *ngIf=\"showEdit\" [iconData]=\"iconsService.getIcon(icons.RotateLeftSolid)\" [title]=\"'cancel'\" (click)=\"cancelClick.emit()\"></co-icon>\n <co-icon *ngIf=\"showEdit\" [iconData]=\"iconsService.getIcon(icons.FloppyDiskSolid)\" [title]=\"'save'\" (click)=\"saveClick.emit()\"></co-icon>\n <co-icon *ngIf=\"showAdd || showEdit\" [iconData]=\"iconsService.getIcon(icons.PlusSolid)\" [title]=\"'add'\" (click)=\"addClick.emit()\"></co-icon>\n
|
|
5535
|
+
template: "\n <div class=\"grid-toolbar-wrapper\">\n <co-icon *ngIf=\"showEdit\" [iconData]=\"iconsService.getIcon(icons.PenToSquareSolid)\" [title]=\"'edit'\" (click)=\"editClick.emit($event)\"></co-icon>\n <co-icon *ngIf=\"showEdit\" [iconData]=\"iconsService.getIcon(icons.RotateLeftSolid)\" [title]=\"'cancel'\" (click)=\"cancelClick.emit()\"></co-icon>\n <co-icon *ngIf=\"showEdit\" [iconData]=\"iconsService.getIcon(icons.FloppyDiskSolid)\" [title]=\"'save'\" (click)=\"saveClick.emit()\"></co-icon>\n <co-icon *ngIf=\"showAdd || showEdit\" [iconData]=\"iconsService.getIcon(icons.PlusSolid)\" [title]=\"'add'\" (click)=\"addClick.emit()\"></co-icon>\n <co-icon *ngIf=\"showDelete\" [iconData]=\"iconsService.getIcon(icons.TrashCanSolid)\" [title]=\"'delete'\" [class.disabled]=\"!deleteEnabled\" (click)=\"handleDeleteClick()\"></co-icon>\n </div>\n ",
|
|
5536
5536
|
encapsulation: i0.ViewEncapsulation.None
|
|
5537
5537
|
},] }
|
|
5538
5538
|
];
|
|
@@ -10244,6 +10244,7 @@
|
|
|
10244
10244
|
_this.showGridSettings = false;
|
|
10245
10245
|
_this.rowsPerPage = 50;
|
|
10246
10246
|
_this.showColumnSort = false;
|
|
10247
|
+
_this.showRowButtons = false;
|
|
10247
10248
|
_this.editing = false;
|
|
10248
10249
|
_this.isSettingsMenuOpen = false;
|
|
10249
10250
|
_this.editRowIndex = -1;
|
|
@@ -10305,13 +10306,13 @@
|
|
|
10305
10306
|
SimpleGridComponent.prototype.isRowDisabled = function (row, index) {
|
|
10306
10307
|
return __awaiter(this, void 0, void 0, function () {
|
|
10307
10308
|
var disabled, idxRow;
|
|
10308
|
-
return __generator(this, function (
|
|
10309
|
-
switch (
|
|
10309
|
+
return __generator(this, function (_c) {
|
|
10310
|
+
switch (_c.label) {
|
|
10310
10311
|
case 0:
|
|
10311
10312
|
if (!(this.rowDisabledFn && (typeof this.rowDisabledFn === 'function'))) return [3 /*break*/, 2];
|
|
10312
10313
|
return [4 /*yield*/, this.rowDisabledFn.call(this, row)];
|
|
10313
10314
|
case 1:
|
|
10314
|
-
disabled =
|
|
10315
|
+
disabled = _c.sent();
|
|
10315
10316
|
idxRow = this.disabledRows.indexOf(index);
|
|
10316
10317
|
if (disabled) {
|
|
10317
10318
|
if (idxRow < 0) {
|
|
@@ -10331,38 +10332,57 @@
|
|
|
10331
10332
|
};
|
|
10332
10333
|
SimpleGridComponent.prototype.addNewRow = function () {
|
|
10333
10334
|
return __awaiter(this, void 0, void 0, function () {
|
|
10334
|
-
var valid,
|
|
10335
|
-
|
|
10336
|
-
|
|
10335
|
+
var valid, relativeIndex, _c, _d;
|
|
10336
|
+
var _this = this;
|
|
10337
|
+
return __generator(this, function (_e) {
|
|
10338
|
+
switch (_e.label) {
|
|
10337
10339
|
case 0:
|
|
10338
|
-
if (!this.inlineEdit) return [3 /*break*/,
|
|
10340
|
+
if (!this.inlineEdit) return [3 /*break*/, 6];
|
|
10339
10341
|
valid = this.validateAndSave();
|
|
10340
|
-
if (!valid) return [3 /*break*/,
|
|
10341
|
-
this.
|
|
10342
|
+
if (!valid) return [3 /*break*/, 5];
|
|
10343
|
+
this._newRowReference = {};
|
|
10344
|
+
this.data.push(this._newRowReference);
|
|
10342
10345
|
this._detectChanges();
|
|
10343
10346
|
this._newRow = true;
|
|
10344
10347
|
this.editing = true;
|
|
10345
|
-
if (!(this.rowsPerPage && this.data.length > this.rowsPerPage)) return [3 /*break*/,
|
|
10346
|
-
// navigate to
|
|
10348
|
+
if (!(this.rowsPerPage && this.data.length > this.rowsPerPage)) return [3 /*break*/, 2];
|
|
10349
|
+
// navigate to last page
|
|
10347
10350
|
this.currentPage = Math.ceil(this.data.length / this.rowsPerPage);
|
|
10348
|
-
|
|
10349
|
-
this.selectedRowIndex =
|
|
10350
|
-
this.
|
|
10351
|
-
|
|
10351
|
+
relativeIndex = (this.data.length - 1) % this.rowsPerPage;
|
|
10352
|
+
this.selectedRowIndex = relativeIndex;
|
|
10353
|
+
this.editRowIndex = relativeIndex;
|
|
10354
|
+
// store reference
|
|
10355
|
+
this.rowToEdit = this._newRowReference;
|
|
10356
|
+
_c = this;
|
|
10357
|
+
return [4 /*yield*/, this._nextAvailableCellToEdit(true)];
|
|
10352
10358
|
case 1:
|
|
10359
|
+
_c.editCellIndex = _e.sent();
|
|
10360
|
+
setTimeout(function () {
|
|
10361
|
+
var _a, _b;
|
|
10362
|
+
var el = (_b = (_a = _this.rowElements) === null || _a === void 0 ? void 0 : _a.last) === null || _b === void 0 ? void 0 : _b.nativeElement;
|
|
10363
|
+
if (el) {
|
|
10364
|
+
el.scrollIntoView({ behavior: 'smooth', block: 'center' });
|
|
10365
|
+
}
|
|
10366
|
+
}, 200);
|
|
10367
|
+
// reset reference to the new row after editCellIndex
|
|
10368
|
+
this.rowToEdit = this._newRowReference;
|
|
10369
|
+
return [3 /*break*/, 4];
|
|
10370
|
+
case 2:
|
|
10353
10371
|
this.editRowIndex = this.data.length - 1;
|
|
10354
|
-
this.rowToEdit = this.
|
|
10355
|
-
|
|
10372
|
+
this.rowToEdit = this._newRowReference;
|
|
10373
|
+
_d = this;
|
|
10356
10374
|
return [4 /*yield*/, this._nextAvailableCellToEdit(true)];
|
|
10357
|
-
case
|
|
10358
|
-
|
|
10359
|
-
|
|
10360
|
-
_b.label = 3;
|
|
10361
|
-
case 3: return [3 /*break*/, 5];
|
|
10375
|
+
case 3:
|
|
10376
|
+
_d.editCellIndex = _e.sent();
|
|
10377
|
+
_e.label = 4;
|
|
10362
10378
|
case 4:
|
|
10379
|
+
this._detectChanges();
|
|
10380
|
+
_e.label = 5;
|
|
10381
|
+
case 5: return [3 /*break*/, 7];
|
|
10382
|
+
case 6:
|
|
10363
10383
|
this.addRow.next();
|
|
10364
|
-
|
|
10365
|
-
case
|
|
10384
|
+
_e.label = 7;
|
|
10385
|
+
case 7: return [2 /*return*/];
|
|
10366
10386
|
}
|
|
10367
10387
|
});
|
|
10368
10388
|
});
|
|
@@ -10394,35 +10414,54 @@
|
|
|
10394
10414
|
this._detectChanges();
|
|
10395
10415
|
};
|
|
10396
10416
|
SimpleGridComponent.prototype.removeRow = function () {
|
|
10397
|
-
this.
|
|
10417
|
+
var absoluteIndex = this.selectedRowIndex;
|
|
10418
|
+
if (this.rowsPerPage) {
|
|
10419
|
+
absoluteIndex = (this.currentPage - 1) * this.rowsPerPage + this.selectedRowIndex;
|
|
10420
|
+
}
|
|
10421
|
+
this.deleteRow.next(this.data[absoluteIndex]);
|
|
10422
|
+
if (this.currentPage !== 1) {
|
|
10423
|
+
this.currentPage = 1;
|
|
10424
|
+
this.selectedRowIndex = -1;
|
|
10425
|
+
window.scrollTo({ top: 0, behavior: 'smooth' });
|
|
10426
|
+
}
|
|
10427
|
+
this._detectChanges();
|
|
10398
10428
|
};
|
|
10399
|
-
SimpleGridComponent.prototype.handleClickRow = function (event, index
|
|
10429
|
+
SimpleGridComponent.prototype.handleClickRow = function (event, index) {
|
|
10400
10430
|
var _this = this;
|
|
10401
|
-
|
|
10402
|
-
|
|
10403
|
-
|
|
10404
|
-
|
|
10405
|
-
|
|
10406
|
-
|
|
10431
|
+
if (this.inlineEdit && this.showRowButtons && !this.editing) {
|
|
10432
|
+
this.editing = false;
|
|
10433
|
+
}
|
|
10434
|
+
else {
|
|
10435
|
+
setTimeout(function () {
|
|
10436
|
+
if (_this._doubleClicked) {
|
|
10437
|
+
return;
|
|
10438
|
+
}
|
|
10439
|
+
_this.selectTheRow(index);
|
|
10440
|
+
if (_this.inlineEdit && !_this.showRowButtons) {
|
|
10441
|
+
_this.editRow(event, true, index);
|
|
10442
|
+
}
|
|
10443
|
+
}, 200);
|
|
10444
|
+
}
|
|
10407
10445
|
};
|
|
10408
10446
|
SimpleGridComponent.prototype.selectTheRow = function (index, emit) {
|
|
10409
10447
|
if (emit === void 0) { emit = true; }
|
|
10410
10448
|
if (this.selectedRowIndex === -1 || (this.selectedRowIndex !== index && ((this.editing && this.validateAndSave()) || !this.editing))) {
|
|
10411
10449
|
this.selectedRowIndex = index;
|
|
10412
10450
|
}
|
|
10451
|
+
var absoluteIndex = this.rowsPerPage ? (this.currentPage - 1) * this.rowsPerPage + index : index;
|
|
10413
10452
|
if (emit) {
|
|
10414
|
-
this.selectRow.next(this.data[
|
|
10453
|
+
this.selectRow.next(this.data[absoluteIndex]);
|
|
10415
10454
|
}
|
|
10416
10455
|
this._detectChanges();
|
|
10417
10456
|
};
|
|
10418
10457
|
SimpleGridComponent.prototype.handleDblClickRow = function (event, index, row) {
|
|
10419
10458
|
return __awaiter(this, void 0, void 0, function () {
|
|
10420
10459
|
var canEdit;
|
|
10421
|
-
return __generator(this, function (
|
|
10422
|
-
switch (
|
|
10460
|
+
return __generator(this, function (_c) {
|
|
10461
|
+
switch (_c.label) {
|
|
10423
10462
|
case 0: return [4 /*yield*/, this.isRowDisabled(row, index)];
|
|
10424
10463
|
case 1:
|
|
10425
|
-
if (
|
|
10464
|
+
if (_c.sent()) {
|
|
10426
10465
|
this.selectedRowIndex = -1;
|
|
10427
10466
|
return [2 /*return*/];
|
|
10428
10467
|
}
|
|
@@ -10430,14 +10469,14 @@
|
|
|
10430
10469
|
if (!(this.canRowBeEdittedFn && typeof this.canRowBeEdittedFn === 'function')) return [3 /*break*/, 3];
|
|
10431
10470
|
return [4 /*yield*/, this.canRowBeEdittedFn.call(this, row)];
|
|
10432
10471
|
case 2:
|
|
10433
|
-
canEdit =
|
|
10434
|
-
|
|
10472
|
+
canEdit = _c.sent();
|
|
10473
|
+
_c.label = 3;
|
|
10435
10474
|
case 3:
|
|
10436
10475
|
if (canEdit) {
|
|
10437
10476
|
this._doubleClicked = true;
|
|
10438
10477
|
this.dblClickRow.next(this.data[index]);
|
|
10439
10478
|
this.selectTheRow(index, false);
|
|
10440
|
-
if (this.inlineEdit) {
|
|
10479
|
+
if (this.inlineEdit && !this.showRowButtons) {
|
|
10441
10480
|
this.editRow(event);
|
|
10442
10481
|
}
|
|
10443
10482
|
}
|
|
@@ -10450,22 +10489,22 @@
|
|
|
10450
10489
|
SimpleGridComponent.prototype.editRow = function (event, selectCell, rowIndex) {
|
|
10451
10490
|
if (selectCell === void 0) { selectCell = true; }
|
|
10452
10491
|
return __awaiter(this, void 0, void 0, function () {
|
|
10453
|
-
var
|
|
10454
|
-
return __generator(this, function (
|
|
10455
|
-
switch (
|
|
10492
|
+
var _c;
|
|
10493
|
+
return __generator(this, function (_d) {
|
|
10494
|
+
switch (_d.label) {
|
|
10456
10495
|
case 0:
|
|
10457
10496
|
if (rowIndex !== undefined) {
|
|
10458
|
-
this.selectTheRow(rowIndex
|
|
10497
|
+
this.selectTheRow(rowIndex);
|
|
10459
10498
|
}
|
|
10499
|
+
this.editing = true;
|
|
10460
10500
|
this.editRowIndex = this.selectedRowIndex;
|
|
10461
10501
|
this.rowToEdit = this.data[this.editRowIndex];
|
|
10462
|
-
this.
|
|
10463
|
-
|
|
10464
|
-
_a = this;
|
|
10502
|
+
if (!(this.showRowButtons && this.inlineEdit && selectCell)) return [3 /*break*/, 2];
|
|
10503
|
+
_c = this;
|
|
10465
10504
|
return [4 /*yield*/, this._nextAvailableCellToEdit(true)];
|
|
10466
10505
|
case 1:
|
|
10467
|
-
|
|
10468
|
-
|
|
10506
|
+
_c.editCellIndex = _d.sent();
|
|
10507
|
+
_d.label = 2;
|
|
10469
10508
|
case 2:
|
|
10470
10509
|
this._detectChanges();
|
|
10471
10510
|
return [2 /*return*/];
|
|
@@ -10475,27 +10514,25 @@
|
|
|
10475
10514
|
};
|
|
10476
10515
|
SimpleGridComponent.prototype.handleCellClick = function (event, row, rowIndex, cellIndex) {
|
|
10477
10516
|
return __awaiter(this, void 0, void 0, function () {
|
|
10478
|
-
return __generator(this, function (
|
|
10479
|
-
switch (
|
|
10517
|
+
return __generator(this, function (_c) {
|
|
10518
|
+
switch (_c.label) {
|
|
10480
10519
|
case 0:
|
|
10481
10520
|
if (!this.editOnCellClick) return [3 /*break*/, 2];
|
|
10482
10521
|
return [4 /*yield*/, this.isRowDisabled(row, rowIndex)];
|
|
10483
10522
|
case 1:
|
|
10484
|
-
if (
|
|
10523
|
+
if (_c.sent()) {
|
|
10485
10524
|
this.selectedRowIndex = -1;
|
|
10486
10525
|
return [2 /*return*/];
|
|
10487
10526
|
}
|
|
10488
|
-
this.selectTheRow(rowIndex, false);
|
|
10489
10527
|
if (this.inlineEdit) {
|
|
10490
10528
|
this.editRowIndex = rowIndex;
|
|
10491
10529
|
this.editCellIndex = cellIndex;
|
|
10492
10530
|
this.editing = true;
|
|
10493
|
-
this.editRow(event, false);
|
|
10494
10531
|
}
|
|
10495
10532
|
return [3 /*break*/, 3];
|
|
10496
10533
|
case 2:
|
|
10497
10534
|
this.editCellIndex = cellIndex;
|
|
10498
|
-
|
|
10535
|
+
_c.label = 3;
|
|
10499
10536
|
case 3:
|
|
10500
10537
|
this._detectChanges();
|
|
10501
10538
|
return [2 /*return*/];
|
|
@@ -10583,7 +10620,7 @@
|
|
|
10583
10620
|
var value = row[col.key];
|
|
10584
10621
|
if (value instanceof Date) {
|
|
10585
10622
|
var formattedDate = value.toISOString().split('T')[0];
|
|
10586
|
-
var
|
|
10623
|
+
var _c = __read(formattedDate.split('-'), 3), year = _c[0], month = _c[1], day = _c[2];
|
|
10587
10624
|
return day + "-" + month + "-" + year;
|
|
10588
10625
|
}
|
|
10589
10626
|
else if (typeof value === 'number') {
|
|
@@ -10603,7 +10640,7 @@
|
|
|
10603
10640
|
if (!value)
|
|
10604
10641
|
return '';
|
|
10605
10642
|
if (typeof value === 'string' && value.includes('T00:00:00')) {
|
|
10606
|
-
var
|
|
10643
|
+
var _d = __read(value.replace('T00:00:00', '').split('-'), 3), year = _d[0], month = _d[1], day = _d[2];
|
|
10607
10644
|
return day + "-" + month + "-" + year;
|
|
10608
10645
|
}
|
|
10609
10646
|
return String(value);
|
|
@@ -10748,9 +10785,26 @@
|
|
|
10748
10785
|
};
|
|
10749
10786
|
SimpleGridComponent.prototype._saveRow = function (stopediting) {
|
|
10750
10787
|
if (stopediting === void 0) { stopediting = true; }
|
|
10751
|
-
|
|
10752
|
-
|
|
10753
|
-
this.
|
|
10788
|
+
if (this._newRow) {
|
|
10789
|
+
this.saveRow.next(this._newRowReference);
|
|
10790
|
+
this._newRowReference = null; // clear
|
|
10791
|
+
}
|
|
10792
|
+
else {
|
|
10793
|
+
var index = -1; // existing row
|
|
10794
|
+
if (this.rowsPerPage) {
|
|
10795
|
+
index = (this.currentPage - 1) * this.rowsPerPage + this.editRowIndex;
|
|
10796
|
+
}
|
|
10797
|
+
else {
|
|
10798
|
+
index = this.editRowIndex;
|
|
10799
|
+
}
|
|
10800
|
+
if (index >= 0 && index < this.data.length) {
|
|
10801
|
+
this.saveRow.next(this.data[index]);
|
|
10802
|
+
}
|
|
10803
|
+
}
|
|
10804
|
+
if (this.currentPage !== 1) {
|
|
10805
|
+
this.currentPage = 1;
|
|
10806
|
+
this.selectedRowIndex = -1;
|
|
10807
|
+
window.scrollTo({ top: 0, behavior: 'smooth' });
|
|
10754
10808
|
}
|
|
10755
10809
|
this._newRow = false;
|
|
10756
10810
|
if (stopediting) {
|
|
@@ -10790,7 +10844,7 @@
|
|
|
10790
10844
|
SimpleGridComponent.decorators = [
|
|
10791
10845
|
{ type: i0.Component, args: [{
|
|
10792
10846
|
selector: 'co-simple-grid',
|
|
10793
|
-
template: "\n
|
|
10847
|
+
template: "\n <co-grid-toolbar\n *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\n <table\n id=\"simple-grid-table\"\n class=\"simple-grid-table\"\n [clickOutside]=\"editing\"\n (clickOutside)=\"handleClickOutsideRow()\">\n <colgroup>\n <col\n *ngFor=\"let column of headerColumnsCopy; 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\n scope=\"col\"\n #headerCell\n class=\"simple-grid-column-header\"\n *ngFor=\"let column of headerColumnsCopy; let index = index\">\n <div\n class=\"simple-grid-column-header-wrapper\"\n [class.resizable]=\"resizable\"\n [class.selected]=\"column.isSelected\"\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\n class=\"simple-grid-column-header-label\"\n [ngClass]=\"column.textAlign ? column.textAlign : defaultTextAlign\"\n [class.with-menu]=\"showGridSettings\"\n [class.with-sort]=\"showColumnSort\"\n [textContent]=\"column.headerText || ' '\"\n (click)=\"showColumnSort ? sortColumn(column, column.field) : toggleColumnMenu(column)\">\n </div>\n\n <div class=\"sort-column\" *ngIf=\"showColumnSort\">\n <co-button\n (click)=\"sortColumn(column, column?.field)\"\n [iconData]=\"icons.getIcon(Icons.ArrowUpArrowDown)\">\n </co-button>\n </div>\n\n <div class=\"column-menu\" *ngIf=\"column.isSelected\">\n <h3 [textContent]=\"'COLUMN_OPTIONS' | coreLocalize\"></h3>\n <ul>\n <li (click)=\"hideColumn(column)\">Hide Column</li>\n <li (click)=\"sortColumn(column, column.field)\">Sort Column</li>\n </ul>\n </div>\n </ng-template>\n <div\n *ngIf=\"resizable && column.resizable\"\n class=\"simple-grid-column-sizer\"\n (mousedown)=\"handleSizerMouseDown($event, column)\">\n </div>\n </div>\n </th>\n </tr>\n\n <div *ngIf=\"showGridSettings\" class=\"grid-settings\">\n <co-button\n [class.selected]=\"isSettingsMenuOpen\"\n [iconData]=\"icons.getIcon(Icons.CogWheels)\"\n (click)=\"toggleSettingsMenu()\">\n </co-button>\n\n <div class=\"settings-menu\" *ngIf=\"isSettingsMenuOpen\">\n <h3 [textContent]=\"'GRID_OPTIONS' | coreLocalize\"></h3>\n <ul>\n <li (click)=\"exportToExcel()\">Export to Excel</li>\n <li *ngIf=\"headerColumnsCopy.length !== headerColumns.length\" (click)=\"showAllColumns()\">\n Show All Columns\n </li>\n </ul>\n </div>\n </div>\n </thead>\n <tbody\n #dropList cdkDropList cdkDropListOrientation=\"vertical\"\n class=\"simple-grid-drag-drop-list\"\n [cdkDropListDisabled]=\"!dragDropEnabled || editing\"\n [cdkDropListData]=\"data\"\n [cdkDropListEnterPredicate]=\"handleCanDragDrop\"\n (cdkDropListDropped)=\"handleDrop($event)\">\n <co-form class=\"simple-grid-row-form\">\n <tr\n #rowElement\n class=\"simple-grid-row\"\n [class.selected]=\"rowIndex === selectedRowIndex && !editing\" observeVisibility\n [class.disabled]=\"getIsRowDisabled(rowIndex)\"\n [class.editing]=\"rowIndex === editRowIndex\"\n *ngFor=\"let row of (!!rowsPerPage ? (data | paginate: {itemsPerPage: rowsPerPage, currentPage: currentPage}) : data); last as last; let rowIndex = index\"\n cdkDrag\n (click)=\"handleClickRow($event, rowIndex)\" (dblclick)=\"handleDblClickRow($event, rowIndex, row)\"\n (visibilityChange)=\"rowVisible.next(row)\"\n (mouseenter)=\"hoveredRowIndex = rowIndex\"\n (mouseleave)=\"hoveredRowIndex = -1\"\n >\n <ng-container *ngIf=\"isSingleColumnRow(row)\">\n <td class=\"simple-grid-single-column-cell\" [attr.colspan]=\"headerColumnsCopy.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 headerColumnsCopy; 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 && rowIndex === editRowIndex\"\n (cellClick)=\"handleCellClick($event, row, rowIndex, 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 *ngIf=\"inlineEdit && showRowButtons\">\n <div class=\"icons-container\" *ngIf=\"!editing\">\n <co-icon class=\"icon-item icon-edit\"\n [iconData]=\"icons.getIcon(Icons.PenToSquareSolid)\" *ngIf=\"hoveredRowIndex === rowIndex\"\n (click)=\"editRow($event, true, rowIndex); $event.stopPropagation()\"></co-icon>\n <co-icon class=\"icon-item icon-delete\"\n [iconData]=\"icons.getIcon(Icons.TrashBin)\" *ngIf=\"hoveredRowIndex === rowIndex\"\n (click)=\"selectTheRow(rowIndex); removeRow();\"></co-icon>\n </div>\n <div class=\"icons-container\">\n <co-button class=\"save-button\"\n *ngIf=\"editing && (selectedRowIndex === rowIndex || (isNewRow && rowIndex === editRowIndex))\"\n [iconData]=\"icons.getIcon(Icons.CheckDuotone)\"\n (click)=\"validateAndSave(); $event.stopPropagation()\"></co-button>\n <co-button class=\"close-button\"\n *ngIf=\"editing && (selectedRowIndex === rowIndex || (isNewRow && rowIndex === editRowIndex))\"\n [iconData]=\"icons.getIcon(Icons.CrossSkinny)\"\n (click)=\"cancelEditRow(); $event.stopPropagation() \"></co-button>\n </div>\n </ng-container>\n </ng-container>\n </tr>\n </co-form>\n </tbody>\n </table>\n <co-pagination-bar\n *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 ",
|
|
10794
10848
|
providers: [FormMasterService],
|
|
10795
10849
|
changeDetection: i0.ChangeDetectionStrategy.OnPush,
|
|
10796
10850
|
encapsulation: i0.ViewEncapsulation.None
|
|
@@ -10804,6 +10858,7 @@
|
|
|
10804
10858
|
]; };
|
|
10805
10859
|
SimpleGridComponent.propDecorators = {
|
|
10806
10860
|
headerCells: [{ type: i0.ViewChildren, args: ['headerCell',] }],
|
|
10861
|
+
rowElements: [{ type: i0.ViewChildren, args: ['rowElement',] }],
|
|
10807
10862
|
showAdd: [{ type: i0.Input }],
|
|
10808
10863
|
showDelete: [{ type: i0.Input }],
|
|
10809
10864
|
editOnCellClick: [{ type: i0.Input }],
|
|
@@ -10812,6 +10867,7 @@
|
|
|
10812
10867
|
rowsPerPage: [{ type: i0.Input }],
|
|
10813
10868
|
rowDisabledFn: [{ type: i0.Input }],
|
|
10814
10869
|
showColumnSort: [{ type: i0.Input }],
|
|
10870
|
+
showRowButtons: [{ type: i0.Input }],
|
|
10815
10871
|
canRowBeEdittedFn: [{ type: i0.Input }],
|
|
10816
10872
|
showClass: [{ type: i0.HostBinding, args: ['class.co-simple-grid',] }],
|
|
10817
10873
|
handleKeyDown: [{ type: i0.HostListener, args: ['keydown', ['$event'],] }]
|