@colijnit/corecomponents_v12 259.1.0 → 259.1.1
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 +119 -63
- 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 +242 -193
- package/fesm2015/colijnit-corecomponents_v12.js +242 -193
- 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
|
@@ -5014,7 +5014,7 @@ GridToolbarComponent.decorators = [
|
|
|
5014
5014
|
<co-icon *ngIf="showEdit" [iconData]="iconsService.getIcon(icons.RotateLeftSolid)" [title]="'cancel'" (click)="cancelClick.emit()"></co-icon>
|
|
5015
5015
|
<co-icon *ngIf="showEdit" [iconData]="iconsService.getIcon(icons.FloppyDiskSolid)" [title]="'save'" (click)="saveClick.emit()"></co-icon>
|
|
5016
5016
|
<co-icon *ngIf="showAdd || showEdit" [iconData]="iconsService.getIcon(icons.PlusSolid)" [title]="'add'" (click)="addClick.emit()"></co-icon>
|
|
5017
|
-
|
|
5017
|
+
<co-icon *ngIf="showDelete" [iconData]="iconsService.getIcon(icons.TrashCanSolid)" [title]="'delete'" [class.disabled]="!deleteEnabled" (click)="handleDeleteClick()"></co-icon>
|
|
5018
5018
|
</div>
|
|
5019
5019
|
`,
|
|
5020
5020
|
encapsulation: ViewEncapsulation.None
|
|
@@ -9620,6 +9620,7 @@ class SimpleGridComponent extends BaseSimpleGridComponent {
|
|
|
9620
9620
|
this.showGridSettings = false;
|
|
9621
9621
|
this.rowsPerPage = 50;
|
|
9622
9622
|
this.showColumnSort = false;
|
|
9623
|
+
this.showRowButtons = false;
|
|
9623
9624
|
this.editing = false;
|
|
9624
9625
|
this.isSettingsMenuOpen = false;
|
|
9625
9626
|
this.editRowIndex = -1;
|
|
@@ -9698,26 +9699,37 @@ class SimpleGridComponent extends BaseSimpleGridComponent {
|
|
|
9698
9699
|
return __awaiter(this, void 0, void 0, function* () {
|
|
9699
9700
|
if (this.inlineEdit) {
|
|
9700
9701
|
const valid = this.validateAndSave();
|
|
9701
|
-
// this._detectChanges();
|
|
9702
9702
|
if (valid) {
|
|
9703
|
-
this.
|
|
9703
|
+
this._newRowReference = {};
|
|
9704
|
+
this.data.push(this._newRowReference);
|
|
9704
9705
|
this._detectChanges();
|
|
9705
9706
|
this._newRow = true;
|
|
9706
9707
|
this.editing = true;
|
|
9707
9708
|
if (this.rowsPerPage && this.data.length > this.rowsPerPage) {
|
|
9708
|
-
// navigate to
|
|
9709
|
+
// navigate to last page
|
|
9709
9710
|
this.currentPage = Math.ceil(this.data.length / this.rowsPerPage);
|
|
9710
|
-
|
|
9711
|
-
|
|
9712
|
-
this.
|
|
9713
|
-
|
|
9711
|
+
const relativeIndex = (this.data.length - 1) % this.rowsPerPage;
|
|
9712
|
+
this.selectedRowIndex = relativeIndex;
|
|
9713
|
+
this.editRowIndex = relativeIndex;
|
|
9714
|
+
// store reference
|
|
9715
|
+
this.rowToEdit = this._newRowReference;
|
|
9716
|
+
this.editCellIndex = yield this._nextAvailableCellToEdit(true);
|
|
9717
|
+
setTimeout(() => {
|
|
9718
|
+
var _a, _b;
|
|
9719
|
+
const el = (_b = (_a = this.rowElements) === null || _a === void 0 ? void 0 : _a.last) === null || _b === void 0 ? void 0 : _b.nativeElement;
|
|
9720
|
+
if (el) {
|
|
9721
|
+
el.scrollIntoView({ behavior: 'smooth', block: 'center' });
|
|
9722
|
+
}
|
|
9723
|
+
}, 200);
|
|
9724
|
+
// reset reference to the new row after editCellIndex
|
|
9725
|
+
this.rowToEdit = this._newRowReference;
|
|
9714
9726
|
}
|
|
9715
9727
|
else {
|
|
9716
9728
|
this.editRowIndex = this.data.length - 1;
|
|
9717
|
-
this.rowToEdit = this.
|
|
9729
|
+
this.rowToEdit = this._newRowReference;
|
|
9718
9730
|
this.editCellIndex = yield this._nextAvailableCellToEdit(true);
|
|
9719
|
-
this._detectChanges();
|
|
9720
9731
|
}
|
|
9732
|
+
this._detectChanges();
|
|
9721
9733
|
}
|
|
9722
9734
|
}
|
|
9723
9735
|
else {
|
|
@@ -9751,22 +9763,41 @@ class SimpleGridComponent extends BaseSimpleGridComponent {
|
|
|
9751
9763
|
this._detectChanges();
|
|
9752
9764
|
}
|
|
9753
9765
|
removeRow() {
|
|
9754
|
-
this.
|
|
9766
|
+
let absoluteIndex = this.selectedRowIndex;
|
|
9767
|
+
if (this.rowsPerPage) {
|
|
9768
|
+
absoluteIndex = (this.currentPage - 1) * this.rowsPerPage + this.selectedRowIndex;
|
|
9769
|
+
}
|
|
9770
|
+
this.deleteRow.next(this.data[absoluteIndex]);
|
|
9771
|
+
if (this.currentPage !== 1) {
|
|
9772
|
+
this.currentPage = 1;
|
|
9773
|
+
this.selectedRowIndex = -1;
|
|
9774
|
+
window.scrollTo({ top: 0, behavior: 'smooth' });
|
|
9775
|
+
}
|
|
9776
|
+
this._detectChanges();
|
|
9755
9777
|
}
|
|
9756
|
-
handleClickRow(event, index
|
|
9757
|
-
|
|
9758
|
-
|
|
9759
|
-
|
|
9760
|
-
|
|
9761
|
-
|
|
9762
|
-
|
|
9778
|
+
handleClickRow(event, index) {
|
|
9779
|
+
if (this.inlineEdit && this.showRowButtons && !this.editing) {
|
|
9780
|
+
this.editing = false;
|
|
9781
|
+
}
|
|
9782
|
+
else {
|
|
9783
|
+
setTimeout(() => {
|
|
9784
|
+
if (this._doubleClicked) {
|
|
9785
|
+
return;
|
|
9786
|
+
}
|
|
9787
|
+
this.selectTheRow(index);
|
|
9788
|
+
if (this.inlineEdit && !this.showRowButtons) {
|
|
9789
|
+
this.editRow(event, true, index);
|
|
9790
|
+
}
|
|
9791
|
+
}, 200);
|
|
9792
|
+
}
|
|
9763
9793
|
}
|
|
9764
9794
|
selectTheRow(index, emit = true) {
|
|
9765
9795
|
if (this.selectedRowIndex === -1 || (this.selectedRowIndex !== index && ((this.editing && this.validateAndSave()) || !this.editing))) {
|
|
9766
9796
|
this.selectedRowIndex = index;
|
|
9767
|
-
|
|
9768
|
-
|
|
9769
|
-
|
|
9797
|
+
const absoluteIndex = this.rowsPerPage ? (this.currentPage - 1) * this.rowsPerPage + index : index;
|
|
9798
|
+
if (emit) {
|
|
9799
|
+
this.selectRow.next(this.data[absoluteIndex]);
|
|
9800
|
+
}
|
|
9770
9801
|
}
|
|
9771
9802
|
this._detectChanges();
|
|
9772
9803
|
}
|
|
@@ -9784,7 +9815,7 @@ class SimpleGridComponent extends BaseSimpleGridComponent {
|
|
|
9784
9815
|
this._doubleClicked = true;
|
|
9785
9816
|
this.dblClickRow.next(this.data[index]);
|
|
9786
9817
|
this.selectTheRow(index, false);
|
|
9787
|
-
if (this.inlineEdit) {
|
|
9818
|
+
if (this.inlineEdit && !this.showRowButtons) {
|
|
9788
9819
|
this.editRow(event);
|
|
9789
9820
|
}
|
|
9790
9821
|
}
|
|
@@ -9794,12 +9825,12 @@ class SimpleGridComponent extends BaseSimpleGridComponent {
|
|
|
9794
9825
|
editRow(event, selectCell = true, rowIndex) {
|
|
9795
9826
|
return __awaiter(this, void 0, void 0, function* () {
|
|
9796
9827
|
if (rowIndex !== undefined) {
|
|
9797
|
-
this.selectTheRow(rowIndex
|
|
9828
|
+
this.selectTheRow(rowIndex);
|
|
9798
9829
|
}
|
|
9830
|
+
this.editing = true;
|
|
9799
9831
|
this.editRowIndex = this.selectedRowIndex;
|
|
9800
9832
|
this.rowToEdit = this.data[this.editRowIndex];
|
|
9801
|
-
this.
|
|
9802
|
-
if (selectCell) {
|
|
9833
|
+
if (this.showRowButtons && this.inlineEdit && selectCell) {
|
|
9803
9834
|
this.editCellIndex = yield this._nextAvailableCellToEdit(true);
|
|
9804
9835
|
}
|
|
9805
9836
|
this._detectChanges();
|
|
@@ -9812,12 +9843,10 @@ class SimpleGridComponent extends BaseSimpleGridComponent {
|
|
|
9812
9843
|
this.selectedRowIndex = -1;
|
|
9813
9844
|
return;
|
|
9814
9845
|
}
|
|
9815
|
-
this.selectTheRow(rowIndex, false);
|
|
9816
9846
|
if (this.inlineEdit) {
|
|
9817
9847
|
this.editRowIndex = rowIndex;
|
|
9818
9848
|
this.editCellIndex = cellIndex;
|
|
9819
9849
|
this.editing = true;
|
|
9820
|
-
this.editRow(event, false);
|
|
9821
9850
|
}
|
|
9822
9851
|
}
|
|
9823
9852
|
else {
|
|
@@ -10065,9 +10094,26 @@ class SimpleGridComponent extends BaseSimpleGridComponent {
|
|
|
10065
10094
|
});
|
|
10066
10095
|
}
|
|
10067
10096
|
_saveRow(stopediting = true) {
|
|
10068
|
-
|
|
10069
|
-
|
|
10070
|
-
this.
|
|
10097
|
+
if (this._newRow) {
|
|
10098
|
+
this.saveRow.next(this._newRowReference);
|
|
10099
|
+
this._newRowReference = null; // clear
|
|
10100
|
+
}
|
|
10101
|
+
else {
|
|
10102
|
+
let index = -1; // existing row
|
|
10103
|
+
if (this.rowsPerPage) {
|
|
10104
|
+
index = (this.currentPage - 1) * this.rowsPerPage + this.editRowIndex;
|
|
10105
|
+
}
|
|
10106
|
+
else {
|
|
10107
|
+
index = this.editRowIndex;
|
|
10108
|
+
}
|
|
10109
|
+
if (index >= 0 && index < this.data.length) {
|
|
10110
|
+
this.saveRow.next(this.data[index]);
|
|
10111
|
+
}
|
|
10112
|
+
}
|
|
10113
|
+
if (this.currentPage !== 1) {
|
|
10114
|
+
this.currentPage = 1;
|
|
10115
|
+
this.selectedRowIndex = -1;
|
|
10116
|
+
window.scrollTo({ top: 0, behavior: 'smooth' });
|
|
10071
10117
|
}
|
|
10072
10118
|
this._newRow = false;
|
|
10073
10119
|
if (stopediting) {
|
|
@@ -10103,175 +10149,176 @@ SimpleGridComponent.decorators = [
|
|
|
10103
10149
|
{ type: Component, args: [{
|
|
10104
10150
|
selector: 'co-simple-grid',
|
|
10105
10151
|
template: `
|
|
10106
|
-
|
|
10107
|
-
|
|
10108
|
-
|
|
10109
|
-
|
|
10110
|
-
|
|
10111
|
-
|
|
10112
|
-
|
|
10113
|
-
|
|
10114
|
-
|
|
10115
|
-
|
|
10116
|
-
|
|
10117
|
-
|
|
10152
|
+
<co-grid-toolbar
|
|
10153
|
+
*ngIf="showToolbar" [class.right]="rightToolbar"
|
|
10154
|
+
[showEdit]="showEdit"
|
|
10155
|
+
[showAdd]="showAdd"
|
|
10156
|
+
[showDelete]="showDelete"
|
|
10157
|
+
[deleteEnabled]="selectedRowIndex > -1"
|
|
10158
|
+
(addClick)="addNewRow()"
|
|
10159
|
+
(editClick)="editRow($event)"
|
|
10160
|
+
(saveClick)="validateAndSave()"
|
|
10161
|
+
(cancelClick)="cancelEditRow()"
|
|
10162
|
+
(deleteClick)="removeRow()">
|
|
10163
|
+
</co-grid-toolbar>
|
|
10118
10164
|
|
|
10119
|
-
|
|
10120
|
-
|
|
10121
|
-
|
|
10122
|
-
|
|
10123
|
-
|
|
10124
|
-
|
|
10125
|
-
|
|
10126
|
-
|
|
10127
|
-
|
|
10128
|
-
|
|
10129
|
-
|
|
10130
|
-
|
|
10131
|
-
|
|
10132
|
-
|
|
10133
|
-
|
|
10134
|
-
|
|
10135
|
-
|
|
10136
|
-
|
|
10137
|
-
|
|
10138
|
-
|
|
10139
|
-
|
|
10140
|
-
|
|
10141
|
-
|
|
10142
|
-
|
|
10143
|
-
|
|
10144
|
-
|
|
10145
|
-
|
|
10146
|
-
|
|
10147
|
-
|
|
10148
|
-
|
|
10149
|
-
|
|
10150
|
-
|
|
10151
|
-
|
|
10152
|
-
|
|
10153
|
-
|
|
10154
|
-
|
|
10165
|
+
<table
|
|
10166
|
+
id="simple-grid-table"
|
|
10167
|
+
class="simple-grid-table"
|
|
10168
|
+
[clickOutside]="editing"
|
|
10169
|
+
(clickOutside)="handleClickOutsideRow()">
|
|
10170
|
+
<colgroup>
|
|
10171
|
+
<col
|
|
10172
|
+
*ngFor="let column of headerColumnsCopy; let index = index"
|
|
10173
|
+
[class.simple-grid-column-auto-fit]="column.autoFit"
|
|
10174
|
+
[style.width.px]="column.width"
|
|
10175
|
+
[style.min-width.px]="MIN_COLUMN_WIDTH">
|
|
10176
|
+
</colgroup>
|
|
10177
|
+
<thead>
|
|
10178
|
+
<tr>
|
|
10179
|
+
<th
|
|
10180
|
+
scope="col"
|
|
10181
|
+
#headerCell
|
|
10182
|
+
class="simple-grid-column-header"
|
|
10183
|
+
*ngFor="let column of headerColumnsCopy; let index = index">
|
|
10184
|
+
<div
|
|
10185
|
+
class="simple-grid-column-header-wrapper"
|
|
10186
|
+
[class.resizable]="resizable"
|
|
10187
|
+
[class.selected]="column.isSelected"
|
|
10188
|
+
[ngClass]="column.textAlign ? column.textAlign : defaultTextAlign">
|
|
10189
|
+
<ng-container *ngIf="column.headerTemplate; else noHeaderTemplate">
|
|
10190
|
+
<ng-container [ngTemplateOutlet]="column.headerTemplate"></ng-container>
|
|
10191
|
+
</ng-container>
|
|
10192
|
+
<ng-template #noHeaderTemplate>
|
|
10193
|
+
<div
|
|
10194
|
+
class="simple-grid-column-header-label"
|
|
10195
|
+
[ngClass]="column.textAlign ? column.textAlign : defaultTextAlign"
|
|
10196
|
+
[class.with-menu]="showGridSettings"
|
|
10197
|
+
[class.with-sort]="showColumnSort"
|
|
10198
|
+
[textContent]="column.headerText || ' '"
|
|
10199
|
+
(click)="showColumnSort ? sortColumn(column, column.field) : toggleColumnMenu(column)">
|
|
10200
|
+
</div>
|
|
10155
10201
|
|
|
10156
|
-
|
|
10157
|
-
|
|
10158
|
-
|
|
10159
|
-
|
|
10160
|
-
|
|
10161
|
-
|
|
10202
|
+
<div class="sort-column" *ngIf="showColumnSort">
|
|
10203
|
+
<co-button
|
|
10204
|
+
(click)="sortColumn(column, column?.field)"
|
|
10205
|
+
[iconData]="icons.getIcon(Icons.ArrowUpArrowDown)">
|
|
10206
|
+
</co-button>
|
|
10207
|
+
</div>
|
|
10162
10208
|
|
|
10163
|
-
|
|
10164
|
-
|
|
10165
|
-
|
|
10166
|
-
|
|
10167
|
-
|
|
10168
|
-
|
|
10169
|
-
|
|
10170
|
-
|
|
10171
|
-
|
|
10172
|
-
|
|
10173
|
-
|
|
10174
|
-
|
|
10175
|
-
|
|
10176
|
-
|
|
10177
|
-
|
|
10178
|
-
|
|
10209
|
+
<div class="column-menu" *ngIf="column.isSelected">
|
|
10210
|
+
<h3 [textContent]="'COLUMN_OPTIONS' | coreLocalize"></h3>
|
|
10211
|
+
<ul>
|
|
10212
|
+
<li (click)="hideColumn(column)">Hide Column</li>
|
|
10213
|
+
<li (click)="sortColumn(column, column.field)">Sort Column</li>
|
|
10214
|
+
</ul>
|
|
10215
|
+
</div>
|
|
10216
|
+
</ng-template>
|
|
10217
|
+
<div
|
|
10218
|
+
*ngIf="resizable && column.resizable"
|
|
10219
|
+
class="simple-grid-column-sizer"
|
|
10220
|
+
(mousedown)="handleSizerMouseDown($event, column)">
|
|
10221
|
+
</div>
|
|
10222
|
+
</div>
|
|
10223
|
+
</th>
|
|
10224
|
+
</tr>
|
|
10179
10225
|
|
|
10180
|
-
|
|
10181
|
-
|
|
10182
|
-
|
|
10183
|
-
|
|
10184
|
-
|
|
10185
|
-
|
|
10226
|
+
<div *ngIf="showGridSettings" class="grid-settings">
|
|
10227
|
+
<co-button
|
|
10228
|
+
[class.selected]="isSettingsMenuOpen"
|
|
10229
|
+
[iconData]="icons.getIcon(Icons.CogWheels)"
|
|
10230
|
+
(click)="toggleSettingsMenu()">
|
|
10231
|
+
</co-button>
|
|
10186
10232
|
|
|
10187
|
-
|
|
10188
|
-
|
|
10189
|
-
|
|
10190
|
-
|
|
10191
|
-
|
|
10192
|
-
|
|
10193
|
-
|
|
10194
|
-
|
|
10233
|
+
<div class="settings-menu" *ngIf="isSettingsMenuOpen">
|
|
10234
|
+
<h3 [textContent]="'GRID_OPTIONS' | coreLocalize"></h3>
|
|
10235
|
+
<ul>
|
|
10236
|
+
<li (click)="exportToExcel()">Export to Excel</li>
|
|
10237
|
+
<li *ngIf="headerColumnsCopy.length !== headerColumns.length" (click)="showAllColumns()">
|
|
10238
|
+
Show All Columns
|
|
10239
|
+
</li>
|
|
10240
|
+
</ul>
|
|
10241
|
+
</div>
|
|
10242
|
+
</div>
|
|
10243
|
+
</thead>
|
|
10244
|
+
<tbody
|
|
10245
|
+
#dropList cdkDropList cdkDropListOrientation="vertical"
|
|
10246
|
+
class="simple-grid-drag-drop-list"
|
|
10247
|
+
[cdkDropListDisabled]="!dragDropEnabled || editing"
|
|
10248
|
+
[cdkDropListData]="data"
|
|
10249
|
+
[cdkDropListEnterPredicate]="handleCanDragDrop"
|
|
10250
|
+
(cdkDropListDropped)="handleDrop($event)">
|
|
10251
|
+
<co-form class="simple-grid-row-form">
|
|
10252
|
+
<tr
|
|
10253
|
+
#rowElement
|
|
10254
|
+
class="simple-grid-row"
|
|
10255
|
+
[class.selected]="rowIndex === selectedRowIndex && !editing" observeVisibility
|
|
10256
|
+
[class.disabled]="getIsRowDisabled(rowIndex)"
|
|
10257
|
+
[class.editing]="rowIndex === editRowIndex"
|
|
10258
|
+
*ngFor="let row of (!!rowsPerPage ? (data | paginate: {itemsPerPage: rowsPerPage, currentPage: currentPage}) : data); last as last; let rowIndex = index"
|
|
10259
|
+
cdkDrag
|
|
10260
|
+
(click)="handleClickRow($event, rowIndex)" (dblclick)="handleDblClickRow($event, rowIndex, row)"
|
|
10261
|
+
(visibilityChange)="rowVisible.next(row)"
|
|
10262
|
+
(mouseenter)="hoveredRowIndex = rowIndex"
|
|
10263
|
+
(mouseleave)="hoveredRowIndex = -1"
|
|
10264
|
+
>
|
|
10265
|
+
<ng-container *ngIf="isSingleColumnRow(row)">
|
|
10266
|
+
<td class="simple-grid-single-column-cell" [attr.colspan]="headerColumnsCopy.length">
|
|
10267
|
+
<co-simple-grid-cell
|
|
10268
|
+
[column]="columns[singleColumnIndex(row)]"
|
|
10269
|
+
[row]="row"
|
|
10270
|
+
[editMode]="false">
|
|
10271
|
+
</co-simple-grid-cell>
|
|
10272
|
+
</td>
|
|
10273
|
+
</ng-container>
|
|
10274
|
+
<ng-container *ngIf="!isSingleColumnRow(row)">
|
|
10275
|
+
<ng-container *ngFor="let column of headerColumnsCopy; let columnIndex = index">
|
|
10276
|
+
<td class="simple-grid-column-cell" *ngIf="columnIndex !== singleColumnIndex(row)">
|
|
10277
|
+
<co-simple-grid-cell
|
|
10278
|
+
[column]="column"
|
|
10279
|
+
[row]="row"
|
|
10280
|
+
[editMode]="inlineEdit && editing && rowIndex === editRowIndex"
|
|
10281
|
+
[fieldEditMode]="editCellIndex === columnIndex && rowIndex === editRowIndex"
|
|
10282
|
+
(cellClick)="handleCellClick($event, row, rowIndex, columnIndex)">
|
|
10283
|
+
</co-simple-grid-cell>
|
|
10284
|
+
<div *ngIf="column.resizable" class="simple-grid-column-sizer-placeholder"></div>
|
|
10285
|
+
</td>
|
|
10286
|
+
</ng-container>
|
|
10287
|
+
<ng-container *ngIf="inlineEdit && showRowButtons">
|
|
10288
|
+
<div class="icons-container" *ngIf="!editing">
|
|
10289
|
+
<co-icon class="icon-item icon-edit"
|
|
10290
|
+
[iconData]="icons.getIcon(Icons.PenToSquareSolid)" *ngIf="hoveredRowIndex === rowIndex"
|
|
10291
|
+
(click)="editRow($event, true, rowIndex); $event.stopPropagation()"></co-icon>
|
|
10292
|
+
<co-icon class="icon-item icon-delete"
|
|
10293
|
+
[iconData]="icons.getIcon(Icons.TrashBin)" *ngIf="hoveredRowIndex === rowIndex"
|
|
10294
|
+
(click)="selectTheRow(rowIndex); removeRow();"></co-icon>
|
|
10195
10295
|
</div>
|
|
10196
|
-
|
|
10197
|
-
|
|
10198
|
-
|
|
10199
|
-
|
|
10200
|
-
|
|
10201
|
-
|
|
10202
|
-
|
|
10203
|
-
|
|
10204
|
-
|
|
10205
|
-
|
|
10206
|
-
|
|
10207
|
-
|
|
10208
|
-
|
|
10209
|
-
|
|
10210
|
-
|
|
10211
|
-
|
|
10212
|
-
|
|
10213
|
-
|
|
10214
|
-
|
|
10215
|
-
|
|
10216
|
-
|
|
10217
|
-
|
|
10218
|
-
|
|
10219
|
-
|
|
10220
|
-
|
|
10221
|
-
|
|
10222
|
-
[row]="row"
|
|
10223
|
-
[editMode]="false">
|
|
10224
|
-
</co-simple-grid-cell>
|
|
10225
|
-
</td>
|
|
10226
|
-
</ng-container>
|
|
10227
|
-
<ng-container *ngIf="!isSingleColumnRow(row)">
|
|
10228
|
-
<ng-container *ngFor="let column of headerColumnsCopy; let columnIndex = index">
|
|
10229
|
-
<td class="simple-grid-column-cell" *ngIf="columnIndex !== singleColumnIndex(row)">
|
|
10230
|
-
<co-simple-grid-cell
|
|
10231
|
-
[column]="column"
|
|
10232
|
-
[row]="row"
|
|
10233
|
-
[editMode]="inlineEdit && editing && rowIndex === editRowIndex"
|
|
10234
|
-
[fieldEditMode]="editCellIndex === columnIndex && rowIndex === editRowIndex"
|
|
10235
|
-
(cellClick)="handleCellClick($event, row, rowIndex, columnIndex)">
|
|
10236
|
-
</co-simple-grid-cell>
|
|
10237
|
-
<div *ngIf="column.resizable" class="simple-grid-column-sizer-placeholder"></div>
|
|
10238
|
-
</td>
|
|
10239
|
-
</ng-container>
|
|
10240
|
-
<ng-container *ngIf="inlineEdit">
|
|
10241
|
-
<div class="icons-container" *ngIf="!editing">
|
|
10242
|
-
<co-icon class="icon-item icon-edit"
|
|
10243
|
-
[iconData]="icons.getIcon(Icons.PenToSquareSolid)" *ngIf="hoveredRowIndex === rowIndex"
|
|
10244
|
-
(click)="editRow($event, true, rowIndex); $event.stopPropagation()"></co-icon>
|
|
10245
|
-
<co-icon class="icon-item icon-delete"
|
|
10246
|
-
[iconData]="icons.getIcon(Icons.TrashBin)" *ngIf="hoveredRowIndex === rowIndex"
|
|
10247
|
-
(click)="removeRow()"></co-icon>
|
|
10248
|
-
</div>
|
|
10249
|
-
<div class="icons-container">
|
|
10250
|
-
<co-button class="save-button"
|
|
10251
|
-
*ngIf="editing && (selectedRowIndex === rowIndex || (isNewRow && rowIndex === editRowIndex))"
|
|
10252
|
-
[iconData]="icons.getIcon(Icons.CheckDuotone)"
|
|
10253
|
-
(click)="validateAndSave(); $event.stopPropagation()"></co-button>
|
|
10254
|
-
<co-button class="close-button"
|
|
10255
|
-
*ngIf="editing && (selectedRowIndex === rowIndex || (isNewRow && rowIndex === editRowIndex))"
|
|
10256
|
-
[iconData]="icons.getIcon(Icons.CrossSkinny)"
|
|
10257
|
-
(click)="cancelEditRow(); $event.stopPropagation() "></co-button>
|
|
10258
|
-
</div>
|
|
10259
|
-
</ng-container>
|
|
10260
|
-
</ng-container>
|
|
10261
|
-
</tr>
|
|
10262
|
-
</co-form>
|
|
10263
|
-
</tbody>
|
|
10264
|
-
</table>
|
|
10265
|
-
<co-pagination-bar
|
|
10266
|
-
*ngIf="data?.length > rowsPerPage" class="pagination-bar"
|
|
10267
|
-
[itemsPerPage]="rowsPerPage"
|
|
10268
|
-
[currentPage]="currentPage"
|
|
10269
|
-
[totalItems]="data.length"
|
|
10270
|
-
[autoHide]="true"
|
|
10271
|
-
(previousClick)="goToPreviousPage()"
|
|
10272
|
-
(nextClick)="goToNextPage()"
|
|
10273
|
-
(pageClick)="setCurrentPage($event)">
|
|
10274
|
-
</co-pagination-bar>
|
|
10296
|
+
<div class="icons-container">
|
|
10297
|
+
<co-button class="save-button"
|
|
10298
|
+
*ngIf="editing && (selectedRowIndex === rowIndex || (isNewRow && rowIndex === editRowIndex))"
|
|
10299
|
+
[iconData]="icons.getIcon(Icons.CheckDuotone)"
|
|
10300
|
+
(click)="validateAndSave(); $event.stopPropagation()"></co-button>
|
|
10301
|
+
<co-button class="close-button"
|
|
10302
|
+
*ngIf="editing && (selectedRowIndex === rowIndex || (isNewRow && rowIndex === editRowIndex))"
|
|
10303
|
+
[iconData]="icons.getIcon(Icons.CrossSkinny)"
|
|
10304
|
+
(click)="cancelEditRow(); $event.stopPropagation() "></co-button>
|
|
10305
|
+
</div>
|
|
10306
|
+
</ng-container>
|
|
10307
|
+
</ng-container>
|
|
10308
|
+
</tr>
|
|
10309
|
+
</co-form>
|
|
10310
|
+
</tbody>
|
|
10311
|
+
</table>
|
|
10312
|
+
<co-pagination-bar
|
|
10313
|
+
*ngIf="data?.length > rowsPerPage" class="pagination-bar"
|
|
10314
|
+
[itemsPerPage]="rowsPerPage"
|
|
10315
|
+
[currentPage]="currentPage"
|
|
10316
|
+
[totalItems]="data.length"
|
|
10317
|
+
[autoHide]="true"
|
|
10318
|
+
(previousClick)="goToPreviousPage()"
|
|
10319
|
+
(nextClick)="goToNextPage()"
|
|
10320
|
+
(pageClick)="setCurrentPage($event)">
|
|
10321
|
+
</co-pagination-bar>
|
|
10275
10322
|
`,
|
|
10276
10323
|
providers: [FormMasterService],
|
|
10277
10324
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
@@ -10286,6 +10333,7 @@ SimpleGridComponent.ctorParameters = () => [
|
|
|
10286
10333
|
];
|
|
10287
10334
|
SimpleGridComponent.propDecorators = {
|
|
10288
10335
|
headerCells: [{ type: ViewChildren, args: ['headerCell',] }],
|
|
10336
|
+
rowElements: [{ type: ViewChildren, args: ['rowElement',] }],
|
|
10289
10337
|
showAdd: [{ type: Input }],
|
|
10290
10338
|
showDelete: [{ type: Input }],
|
|
10291
10339
|
editOnCellClick: [{ type: Input }],
|
|
@@ -10294,6 +10342,7 @@ SimpleGridComponent.propDecorators = {
|
|
|
10294
10342
|
rowsPerPage: [{ type: Input }],
|
|
10295
10343
|
rowDisabledFn: [{ type: Input }],
|
|
10296
10344
|
showColumnSort: [{ type: Input }],
|
|
10345
|
+
showRowButtons: [{ type: Input }],
|
|
10297
10346
|
canRowBeEdittedFn: [{ type: Input }],
|
|
10298
10347
|
showClass: [{ type: HostBinding, args: ['class.co-simple-grid',] }],
|
|
10299
10348
|
handleKeyDown: [{ type: HostListener, args: ['keydown', ['$event'],] }]
|