@colijnit/corecomponents_v12 258.1.7 → 258.1.8
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 +32 -13
- 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 +187 -146
- package/esm2015/lib/components/simple-grid/simple-grid.module.js +4 -2
- package/fesm2015/colijnit-corecomponents_v12.js +189 -147
- package/fesm2015/colijnit-corecomponents_v12.js.map +1 -1
- package/lib/components/simple-grid/simple-grid.component.d.ts +4 -0
- package/lib/components/simple-grid/style/_layout.scss +26 -0
- package/package.json +1 -1
|
@@ -13,6 +13,7 @@ import { ObserveVisibilityModule } from "../../directives/observe-visibility/obs
|
|
|
13
13
|
import { ClickoutsideModule } from '../../directives/clickoutside/clickoutside.module';
|
|
14
14
|
import { ButtonModule } from "../button/button.module";
|
|
15
15
|
import { CoreComponentsTranslationModule } from "../../translation/core-components-translation.module";
|
|
16
|
+
import { IconModule } from "../icon/icon.module";
|
|
16
17
|
export class SimpleGridModule {
|
|
17
18
|
}
|
|
18
19
|
SimpleGridModule.decorators = [
|
|
@@ -28,7 +29,8 @@ SimpleGridModule.decorators = [
|
|
|
28
29
|
PaginationBarModule,
|
|
29
30
|
ClickoutsideModule,
|
|
30
31
|
ButtonModule,
|
|
31
|
-
CoreComponentsTranslationModule
|
|
32
|
+
CoreComponentsTranslationModule,
|
|
33
|
+
IconModule
|
|
32
34
|
],
|
|
33
35
|
declarations: [
|
|
34
36
|
SimpleGridComponent,
|
|
@@ -42,4 +44,4 @@ SimpleGridModule.decorators = [
|
|
|
42
44
|
]
|
|
43
45
|
},] }
|
|
44
46
|
];
|
|
45
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
47
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2ltcGxlLWdyaWQubW9kdWxlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvY29yZWNvbXBvbmVudHMvc3JjL2xpYi9jb21wb25lbnRzL3NpbXBsZS1ncmlkL3NpbXBsZS1ncmlkLm1vZHVsZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUMsUUFBUSxFQUFDLE1BQU0sZUFBZSxDQUFDO0FBQ3ZDLE9BQU8sRUFBQyxZQUFZLEVBQUMsTUFBTSxpQkFBaUIsQ0FBQztBQUM3QyxPQUFPLEVBQUUsbUJBQW1CLEVBQUUsTUFBTSx5Q0FBeUMsQ0FBQztBQUM5RSxPQUFPLEVBQUUsZ0JBQWdCLEVBQUUsTUFBTSxpQ0FBaUMsQ0FBQztBQUNuRSxPQUFPLEVBQUMsbUJBQW1CLEVBQUMsTUFBTSx5QkFBeUIsQ0FBQztBQUM1RCxPQUFPLEVBQUMsY0FBYyxFQUFDLE1BQU0sd0JBQXdCLENBQUM7QUFDdEQsT0FBTyxFQUFDLHlCQUF5QixFQUFDLE1BQU0sZ0NBQWdDLENBQUM7QUFDekUsT0FBTyxFQUFDLGlCQUFpQixFQUFDLE1BQU0scUNBQXFDLENBQUM7QUFDdEUsT0FBTyxFQUFDLGVBQWUsRUFBQyxNQUFNLGlDQUFpQyxDQUFDO0FBQ2hFLE9BQU8sRUFBQyx1QkFBdUIsRUFBQyxNQUFNLDhCQUE4QixDQUFDO0FBQ3JFLE9BQU8sRUFBQyxVQUFVLEVBQUMsTUFBTSxxQkFBcUIsQ0FBQztBQUMvQyxPQUFPLEVBQUMsdUJBQXVCLEVBQUMsTUFBTSwrREFBK0QsQ0FBQztBQUN0RyxPQUFPLEVBQUMsa0JBQWtCLEVBQUMsTUFBTSxtREFBbUQsQ0FBQztBQUNyRixPQUFPLEVBQUMsWUFBWSxFQUFDLE1BQU0seUJBQXlCLENBQUM7QUFDckQsT0FBTyxFQUFDLCtCQUErQixFQUFDLE1BQU0sc0RBQXNELENBQUM7QUFDckcsT0FBTyxFQUFDLFVBQVUsRUFBQyxNQUFNLHFCQUFxQixDQUFDO0FBNEIvQyxNQUFNLE9BQU8sZ0JBQWdCOzs7WUExQjVCLFFBQVEsU0FBQztnQkFDUixPQUFPLEVBQUU7b0JBQ1AsWUFBWTtvQkFDWixjQUFjO29CQUNkLGlCQUFpQjtvQkFDakIsZUFBZTtvQkFDZixVQUFVO29CQUNWLHVCQUF1QjtvQkFDdkIsZ0JBQWdCO29CQUNoQixtQkFBbUI7b0JBQ25CLGtCQUFrQjtvQkFDbEIsWUFBWTtvQkFDWiwrQkFBK0I7b0JBQy9CLFVBQVU7aUJBQ1g7Z0JBQ0QsWUFBWSxFQUFFO29CQUNaLG1CQUFtQjtvQkFDbkIsdUJBQXVCO29CQUN2Qix5QkFBeUI7aUJBQzFCO2dCQUNELE9BQU8sRUFBRTtvQkFDUCxtQkFBbUI7b0JBQ25CLHVCQUF1QjtvQkFDdkIseUJBQXlCO2lCQUMxQjthQUNGIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtOZ01vZHVsZX0gZnJvbSBcIkBhbmd1bGFyL2NvcmVcIjtcclxuaW1wb3J0IHtDb21tb25Nb2R1bGV9IGZyb20gXCJAYW5ndWxhci9jb21tb25cIjtcclxuaW1wb3J0IHsgUGFnaW5hdGlvbkJhck1vZHVsZSB9IGZyb20gXCIuLi9wYWdpbmF0aW9uLWJhci9wYWdpbmF0aW9uLWJhci5tb2R1bGVcIjtcclxuaW1wb3J0IHsgUGFnaW5hdGlvbk1vZHVsZSB9IGZyb20gXCIuLi9wYWdpbmF0aW9uL3BhZ2luYXRpb24ubW9kdWxlXCI7XHJcbmltcG9ydCB7U2ltcGxlR3JpZENvbXBvbmVudH0gZnJvbSBcIi4vc2ltcGxlLWdyaWQuY29tcG9uZW50XCI7XHJcbmltcG9ydCB7RHJhZ0Ryb3BNb2R1bGV9IGZyb20gXCJAYW5ndWxhci9jZGsvZHJhZy1kcm9wXCI7XHJcbmltcG9ydCB7U2ltcGxlR3JpZENvbHVtbkRpcmVjdGl2ZX0gZnJvbSBcIi4vc2ltcGxlLWdyaWQtY29sdW1uLmRpcmVjdGl2ZVwiO1xyXG5pbXBvcnQge0dyaWRUb29sYmFyTW9kdWxlfSBmcm9tIFwiLi4vZ3JpZC10b29sYmFyL2dyaWQtdG9vbGJhci5tb2R1bGVcIjtcclxuaW1wb3J0IHtJbnB1dFRleHRNb2R1bGV9IGZyb20gXCIuLi9pbnB1dC10ZXh0L2lucHV0LXRleHQubW9kdWxlXCI7XHJcbmltcG9ydCB7U2ltcGxlR3JpZENlbGxDb21wb25lbnR9IGZyb20gXCIuL3NpbXBsZS1ncmlkLWNlbGwuY29tcG9uZW50XCI7XHJcbmltcG9ydCB7Rm9ybU1vZHVsZX0gZnJvbSBcIi4uL2Zvcm0vZm9ybS5tb2R1bGVcIjtcclxuaW1wb3J0IHtPYnNlcnZlVmlzaWJpbGl0eU1vZHVsZX0gZnJvbSBcIi4uLy4uL2RpcmVjdGl2ZXMvb2JzZXJ2ZS12aXNpYmlsaXR5L29ic2VydmUtdmlzaWJpbGl0eS5tb2R1bGVcIjtcclxuaW1wb3J0IHtDbGlja291dHNpZGVNb2R1bGV9IGZyb20gJy4uLy4uL2RpcmVjdGl2ZXMvY2xpY2tvdXRzaWRlL2NsaWNrb3V0c2lkZS5tb2R1bGUnO1xyXG5pbXBvcnQge0J1dHRvbk1vZHVsZX0gZnJvbSBcIi4uL2J1dHRvbi9idXR0b24ubW9kdWxlXCI7XHJcbmltcG9ydCB7Q29yZUNvbXBvbmVudHNUcmFuc2xhdGlvbk1vZHVsZX0gZnJvbSBcIi4uLy4uL3RyYW5zbGF0aW9uL2NvcmUtY29tcG9uZW50cy10cmFuc2xhdGlvbi5tb2R1bGVcIjtcclxuaW1wb3J0IHtJY29uTW9kdWxlfSBmcm9tIFwiLi4vaWNvbi9pY29uLm1vZHVsZVwiO1xyXG5cclxuQE5nTW9kdWxlKHtcclxuICBpbXBvcnRzOiBbXHJcbiAgICBDb21tb25Nb2R1bGUsXHJcbiAgICBEcmFnRHJvcE1vZHVsZSxcclxuICAgIEdyaWRUb29sYmFyTW9kdWxlLFxyXG4gICAgSW5wdXRUZXh0TW9kdWxlLFxyXG4gICAgRm9ybU1vZHVsZSxcclxuICAgIE9ic2VydmVWaXNpYmlsaXR5TW9kdWxlLFxyXG4gICAgUGFnaW5hdGlvbk1vZHVsZSxcclxuICAgIFBhZ2luYXRpb25CYXJNb2R1bGUsXHJcbiAgICBDbGlja291dHNpZGVNb2R1bGUsXHJcbiAgICBCdXR0b25Nb2R1bGUsXHJcbiAgICBDb3JlQ29tcG9uZW50c1RyYW5zbGF0aW9uTW9kdWxlLFxyXG4gICAgSWNvbk1vZHVsZVxyXG4gIF0sXHJcbiAgZGVjbGFyYXRpb25zOiBbXHJcbiAgICBTaW1wbGVHcmlkQ29tcG9uZW50LFxyXG4gICAgU2ltcGxlR3JpZENlbGxDb21wb25lbnQsXHJcbiAgICBTaW1wbGVHcmlkQ29sdW1uRGlyZWN0aXZlXHJcbiAgXSxcclxuICBleHBvcnRzOiBbXHJcbiAgICBTaW1wbGVHcmlkQ29tcG9uZW50LFxyXG4gICAgU2ltcGxlR3JpZENlbGxDb21wb25lbnQsXHJcbiAgICBTaW1wbGVHcmlkQ29sdW1uRGlyZWN0aXZlXHJcbiAgXVxyXG59KVxyXG5leHBvcnQgY2xhc3MgU2ltcGxlR3JpZE1vZHVsZSB7IH1cclxuIl19
|
|
@@ -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
|
-
<co-icon *ngIf="showDelete" [iconData]="iconsService.getIcon(icons.TrashCanSolid)" [title]="'delete'" [class.disabled]="!deleteEnabled" (click)="handleDeleteClick()"></co-icon
|
|
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
|
|
@@ -9610,7 +9610,7 @@ class SimpleGridComponent extends BaseSimpleGridComponent {
|
|
|
9610
9610
|
this.editOnCellClick = true;
|
|
9611
9611
|
this.rightToolbar = false;
|
|
9612
9612
|
this.showGridSettings = false;
|
|
9613
|
-
this.rowsPerPage =
|
|
9613
|
+
this.rowsPerPage = 50;
|
|
9614
9614
|
this.showColumnSort = false;
|
|
9615
9615
|
this.editing = false;
|
|
9616
9616
|
this.isSettingsMenuOpen = false;
|
|
@@ -9620,8 +9620,11 @@ class SimpleGridComponent extends BaseSimpleGridComponent {
|
|
|
9620
9620
|
this.currentPage = 1;
|
|
9621
9621
|
this.sortDirection = 'asc';
|
|
9622
9622
|
this.Icons = CoreComponentsIcon;
|
|
9623
|
+
this.hoveredRowIndex = -1;
|
|
9623
9624
|
this._doubleClicked = false;
|
|
9624
9625
|
this._newRow = false;
|
|
9626
|
+
this.IconCacheService = IconCacheService;
|
|
9627
|
+
this.CoreComponentsIcon = CoreComponentsIcon;
|
|
9625
9628
|
this.dataChanged.subscribe(() => {
|
|
9626
9629
|
this.currentPage = 1;
|
|
9627
9630
|
});
|
|
@@ -9693,10 +9696,20 @@ class SimpleGridComponent extends BaseSimpleGridComponent {
|
|
|
9693
9696
|
this._detectChanges();
|
|
9694
9697
|
this._newRow = true;
|
|
9695
9698
|
this.editing = true;
|
|
9696
|
-
this.
|
|
9697
|
-
|
|
9698
|
-
|
|
9699
|
-
|
|
9699
|
+
if (this.rowsPerPage && this.data.length > this.rowsPerPage) {
|
|
9700
|
+
// navigate to the last page to the new row
|
|
9701
|
+
this.currentPage = Math.ceil(this.data.length / this.rowsPerPage);
|
|
9702
|
+
// select new row
|
|
9703
|
+
const absoluteIndex = this.data.length - 1;
|
|
9704
|
+
this.selectedRowIndex = this.rowsPerPage ? (absoluteIndex - ((this.currentPage - 1) * this.rowsPerPage)) : absoluteIndex;
|
|
9705
|
+
this.editRow(null);
|
|
9706
|
+
}
|
|
9707
|
+
else {
|
|
9708
|
+
this.editRowIndex = this.data.length - 1;
|
|
9709
|
+
this.rowToEdit = this.data[this.editRowIndex];
|
|
9710
|
+
this.editCellIndex = yield this._nextAvailableCellToEdit(true);
|
|
9711
|
+
this._detectChanges();
|
|
9712
|
+
}
|
|
9700
9713
|
}
|
|
9701
9714
|
}
|
|
9702
9715
|
else {
|
|
@@ -10011,158 +10024,186 @@ class SimpleGridComponent extends BaseSimpleGridComponent {
|
|
|
10011
10024
|
this.editing = false;
|
|
10012
10025
|
this.rowToEdit = undefined;
|
|
10013
10026
|
}
|
|
10027
|
+
get isNewRow() {
|
|
10028
|
+
return this._newRow;
|
|
10029
|
+
}
|
|
10014
10030
|
}
|
|
10015
10031
|
SimpleGridComponent.decorators = [
|
|
10016
10032
|
{ type: Component, args: [{
|
|
10017
10033
|
selector: 'co-simple-grid',
|
|
10018
10034
|
template: `
|
|
10019
|
-
|
|
10020
|
-
|
|
10021
|
-
|
|
10022
|
-
|
|
10023
|
-
|
|
10024
|
-
|
|
10025
|
-
|
|
10026
|
-
|
|
10027
|
-
|
|
10028
|
-
|
|
10029
|
-
|
|
10030
|
-
|
|
10035
|
+
<co-grid-toolbar
|
|
10036
|
+
*ngIf="showToolbar" [class.right]="rightToolbar"
|
|
10037
|
+
[showEdit]="showEdit"
|
|
10038
|
+
[showAdd]="showAdd"
|
|
10039
|
+
[showDelete]="showDelete"
|
|
10040
|
+
[deleteEnabled]="selectedRowIndex > -1"
|
|
10041
|
+
(addClick)="addNewRow()"
|
|
10042
|
+
(editClick)="editRow($event)"
|
|
10043
|
+
(saveClick)="validateAndSave()"
|
|
10044
|
+
(cancelClick)="cancelEditRow()"
|
|
10045
|
+
(deleteClick)="removeRow()">
|
|
10046
|
+
</co-grid-toolbar>
|
|
10031
10047
|
|
|
10032
|
-
|
|
10033
|
-
|
|
10034
|
-
|
|
10035
|
-
|
|
10036
|
-
|
|
10037
|
-
|
|
10038
|
-
|
|
10039
|
-
|
|
10040
|
-
|
|
10041
|
-
|
|
10042
|
-
|
|
10043
|
-
|
|
10044
|
-
|
|
10045
|
-
|
|
10046
|
-
|
|
10047
|
-
|
|
10048
|
-
|
|
10049
|
-
|
|
10050
|
-
|
|
10051
|
-
|
|
10052
|
-
|
|
10053
|
-
|
|
10054
|
-
|
|
10055
|
-
|
|
10056
|
-
|
|
10057
|
-
|
|
10058
|
-
|
|
10059
|
-
|
|
10060
|
-
|
|
10061
|
-
|
|
10062
|
-
|
|
10063
|
-
|
|
10064
|
-
|
|
10065
|
-
|
|
10066
|
-
|
|
10067
|
-
|
|
10048
|
+
<table
|
|
10049
|
+
id="simple-grid-table"
|
|
10050
|
+
class="simple-grid-table"
|
|
10051
|
+
[clickOutside]="editing"
|
|
10052
|
+
(clickOutside)="handleClickOutsideRow()">
|
|
10053
|
+
<colgroup>
|
|
10054
|
+
<col
|
|
10055
|
+
*ngFor="let column of headerColumnsCopy; let index = index"
|
|
10056
|
+
[class.simple-grid-column-auto-fit]="column.autoFit"
|
|
10057
|
+
[style.width.px]="column.width"
|
|
10058
|
+
[style.min-width.px]="MIN_COLUMN_WIDTH">
|
|
10059
|
+
</colgroup>
|
|
10060
|
+
<thead>
|
|
10061
|
+
<tr>
|
|
10062
|
+
<th
|
|
10063
|
+
scope="col"
|
|
10064
|
+
#headerCell
|
|
10065
|
+
class="simple-grid-column-header"
|
|
10066
|
+
*ngFor="let column of headerColumnsCopy; let index = index">
|
|
10067
|
+
<div
|
|
10068
|
+
class="simple-grid-column-header-wrapper"
|
|
10069
|
+
[class.resizable]="resizable"
|
|
10070
|
+
[class.selected]="column.isSelected"
|
|
10071
|
+
[ngClass]="column.textAlign ? column.textAlign : defaultTextAlign">
|
|
10072
|
+
<ng-container *ngIf="column.headerTemplate; else noHeaderTemplate">
|
|
10073
|
+
<ng-container [ngTemplateOutlet]="column.headerTemplate"></ng-container>
|
|
10074
|
+
</ng-container>
|
|
10075
|
+
<ng-template #noHeaderTemplate>
|
|
10076
|
+
<div
|
|
10077
|
+
class="simple-grid-column-header-label"
|
|
10078
|
+
[ngClass]="column.textAlign ? column.textAlign : defaultTextAlign"
|
|
10079
|
+
[class.with-menu]="showGridSettings"
|
|
10080
|
+
[class.with-sort]="showColumnSort"
|
|
10081
|
+
[textContent]="column.headerText || ' '"
|
|
10082
|
+
(click)="showColumnSort ? sortColumn(column, column.field) : toggleColumnMenu(column)">
|
|
10083
|
+
</div>
|
|
10068
10084
|
|
|
10069
|
-
|
|
10070
|
-
|
|
10071
|
-
|
|
10072
|
-
|
|
10073
|
-
|
|
10074
|
-
|
|
10085
|
+
<div class="sort-column" *ngIf="showColumnSort">
|
|
10086
|
+
<co-button
|
|
10087
|
+
(click)="sortColumn(column, column?.field)"
|
|
10088
|
+
[iconData]="icons.getIcon(Icons.ArrowUpArrowDown)">
|
|
10089
|
+
</co-button>
|
|
10090
|
+
</div>
|
|
10075
10091
|
|
|
10076
|
-
|
|
10077
|
-
|
|
10078
|
-
|
|
10079
|
-
|
|
10080
|
-
|
|
10081
|
-
|
|
10082
|
-
|
|
10083
|
-
|
|
10084
|
-
|
|
10085
|
-
|
|
10086
|
-
|
|
10087
|
-
|
|
10088
|
-
|
|
10089
|
-
|
|
10090
|
-
|
|
10091
|
-
|
|
10092
|
+
<div class="column-menu" *ngIf="column.isSelected">
|
|
10093
|
+
<h3 [textContent]="'COLUMN_OPTIONS' | coreLocalize"></h3>
|
|
10094
|
+
<ul>
|
|
10095
|
+
<li (click)="hideColumn(column)">Hide Column</li>
|
|
10096
|
+
<li (click)="sortColumn(column, column.field)">Sort Column</li>
|
|
10097
|
+
</ul>
|
|
10098
|
+
</div>
|
|
10099
|
+
</ng-template>
|
|
10100
|
+
<div
|
|
10101
|
+
*ngIf="resizable && column.resizable"
|
|
10102
|
+
class="simple-grid-column-sizer"
|
|
10103
|
+
(mousedown)="handleSizerMouseDown($event, column)">
|
|
10104
|
+
</div>
|
|
10105
|
+
</div>
|
|
10106
|
+
</th>
|
|
10107
|
+
</tr>
|
|
10092
10108
|
|
|
10093
|
-
|
|
10094
|
-
|
|
10095
|
-
|
|
10096
|
-
|
|
10097
|
-
|
|
10098
|
-
|
|
10109
|
+
<div *ngIf="showGridSettings" class="grid-settings">
|
|
10110
|
+
<co-button
|
|
10111
|
+
[class.selected]="isSettingsMenuOpen"
|
|
10112
|
+
[iconData]="icons.getIcon(Icons.CogWheels)"
|
|
10113
|
+
(click)="toggleSettingsMenu()">
|
|
10114
|
+
</co-button>
|
|
10099
10115
|
|
|
10100
|
-
|
|
10101
|
-
|
|
10102
|
-
|
|
10103
|
-
|
|
10104
|
-
|
|
10105
|
-
|
|
10106
|
-
|
|
10107
|
-
|
|
10116
|
+
<div class="settings-menu" *ngIf="isSettingsMenuOpen">
|
|
10117
|
+
<h3 [textContent]="'GRID_OPTIONS' | coreLocalize"></h3>
|
|
10118
|
+
<ul>
|
|
10119
|
+
<li (click)="exportToExcel()">Export to Excel</li>
|
|
10120
|
+
<li *ngIf="headerColumnsCopy.length !== headerColumns.length" (click)="showAllColumns()">
|
|
10121
|
+
Show All Columns
|
|
10122
|
+
</li>
|
|
10123
|
+
</ul>
|
|
10124
|
+
</div>
|
|
10125
|
+
</div>
|
|
10126
|
+
</thead>
|
|
10127
|
+
<tbody
|
|
10128
|
+
#dropList cdkDropList cdkDropListOrientation="vertical"
|
|
10129
|
+
class="simple-grid-drag-drop-list"
|
|
10130
|
+
[cdkDropListDisabled]="!dragDropEnabled || editing"
|
|
10131
|
+
[cdkDropListData]="data"
|
|
10132
|
+
[cdkDropListEnterPredicate]="handleCanDragDrop"
|
|
10133
|
+
(cdkDropListDropped)="handleDrop($event)">
|
|
10134
|
+
<co-form class="simple-grid-row-form">
|
|
10135
|
+
<tr
|
|
10136
|
+
class="simple-grid-row"
|
|
10137
|
+
[class.selected]="rowIndex === selectedRowIndex && !editing" observeVisibility
|
|
10138
|
+
[class.disabled]="getIsRowDisabled(rowIndex)"
|
|
10139
|
+
[class.editing]="rowIndex === editRowIndex"
|
|
10140
|
+
*ngFor="let row of (!!rowsPerPage ? (data | paginate: {itemsPerPage: rowsPerPage, currentPage: currentPage}) : data); last as last; let rowIndex = index"
|
|
10141
|
+
cdkDrag
|
|
10142
|
+
(click)="handleClickRow($event, rowIndex, row)" (dblclick)="handleDblClickRow($event, rowIndex, row)"
|
|
10143
|
+
(visibilityChange)="rowVisible.next(row)"
|
|
10144
|
+
(mouseenter)="hoveredRowIndex = rowIndex"
|
|
10145
|
+
(mouseleave)="hoveredRowIndex = -1"
|
|
10146
|
+
>
|
|
10147
|
+
<ng-container *ngIf="isSingleColumnRow(row)">
|
|
10148
|
+
<td class="simple-grid-single-column-cell" [attr.colspan]="headerColumnsCopy.length">
|
|
10149
|
+
<co-simple-grid-cell
|
|
10150
|
+
[column]="columns[singleColumnIndex(row)]"
|
|
10151
|
+
[row]="row"
|
|
10152
|
+
[editMode]="false">
|
|
10153
|
+
</co-simple-grid-cell>
|
|
10154
|
+
</td>
|
|
10155
|
+
</ng-container>
|
|
10156
|
+
<ng-container *ngIf="!isSingleColumnRow(row)">
|
|
10157
|
+
<ng-container *ngFor="let column of headerColumnsCopy; let columnIndex = index">
|
|
10158
|
+
<td class="simple-grid-column-cell" *ngIf="columnIndex !== singleColumnIndex(row)">
|
|
10159
|
+
<co-simple-grid-cell
|
|
10160
|
+
[column]="column"
|
|
10161
|
+
[row]="row"
|
|
10162
|
+
[editMode]="inlineEdit && editing && rowIndex === editRowIndex"
|
|
10163
|
+
[fieldEditMode]="editCellIndex === columnIndex && rowIndex === editRowIndex"
|
|
10164
|
+
(cellClick)="handleCellClick($event, row, rowIndex, columnIndex)">
|
|
10165
|
+
</co-simple-grid-cell>
|
|
10166
|
+
<div *ngIf="column.resizable" class="simple-grid-column-sizer-placeholder"></div>
|
|
10167
|
+
</td>
|
|
10168
|
+
</ng-container>
|
|
10169
|
+
<ng-container *ngIf="inlineEdit">
|
|
10170
|
+
<div class="icons-container" *ngIf="!editing">
|
|
10171
|
+
<co-icon class="icon-item icon-edit"
|
|
10172
|
+
[iconData]="icons.getIcon(Icons.PenToSquareSolid)" *ngIf="hoveredRowIndex === rowIndex"
|
|
10173
|
+
(click)="editRow($event)"></co-icon>
|
|
10174
|
+
|
|
10175
|
+
<co-icon class="icon-item icon-delete"
|
|
10176
|
+
[iconData]="icons.getIcon(Icons.TrashBin)" *ngIf="hoveredRowIndex === rowIndex"
|
|
10177
|
+
(click)="removeRow()"></co-icon>
|
|
10108
10178
|
</div>
|
|
10109
|
-
|
|
10110
|
-
|
|
10111
|
-
|
|
10112
|
-
|
|
10113
|
-
|
|
10114
|
-
[cdkDropListDisabled]="!dragDropEnabled || editing"
|
|
10115
|
-
[cdkDropListData]="data"
|
|
10116
|
-
[cdkDropListEnterPredicate]="handleCanDragDrop"
|
|
10117
|
-
(cdkDropListDropped)="handleDrop($event)">
|
|
10118
|
-
<co-form class="simple-grid-row-form">
|
|
10119
|
-
<tr
|
|
10120
|
-
class="simple-grid-row"
|
|
10121
|
-
[class.selected]="rowIndex === selectedRowIndex && !editing" observeVisibility
|
|
10122
|
-
[class.disabled]="getIsRowDisabled(rowIndex)"
|
|
10123
|
-
[class.editing]="rowIndex === editRowIndex"
|
|
10124
|
-
*ngFor="let row of (!!rowsPerPage ? (data | paginate: {itemsPerPage: rowsPerPage, currentPage: currentPage}) : data); last as last; let rowIndex = index"
|
|
10125
|
-
cdkDrag
|
|
10126
|
-
(click)="handleClickRow($event, rowIndex, row)" (dblclick)="handleDblClickRow($event, rowIndex, row)"
|
|
10127
|
-
(visibilityChange)="rowVisible.next(row)">
|
|
10128
|
-
<ng-container *ngIf="isSingleColumnRow(row)">
|
|
10129
|
-
<td class="simple-grid-single-column-cell" [attr.colspan]="headerColumnsCopy.length">
|
|
10130
|
-
<co-simple-grid-cell
|
|
10131
|
-
[column]="columns[singleColumnIndex(row)]"
|
|
10132
|
-
[row]="row"
|
|
10133
|
-
[editMode]="false">
|
|
10134
|
-
</co-simple-grid-cell>
|
|
10135
|
-
</td>
|
|
10136
|
-
</ng-container>
|
|
10137
|
-
<ng-container *ngIf="!isSingleColumnRow(row)">
|
|
10138
|
-
<ng-container *ngFor="let column of headerColumnsCopy; let columnIndex = index">
|
|
10139
|
-
<td class="simple-grid-column-cell" *ngIf="columnIndex !== singleColumnIndex(row)">
|
|
10140
|
-
<co-simple-grid-cell
|
|
10141
|
-
[column]="column"
|
|
10142
|
-
[row]="row"
|
|
10143
|
-
[editMode]="inlineEdit && editing && rowIndex === editRowIndex"
|
|
10144
|
-
[fieldEditMode]="editCellIndex === columnIndex && rowIndex === editRowIndex"
|
|
10145
|
-
(cellClick)="handleCellClick($event, row, rowIndex, columnIndex)">
|
|
10146
|
-
</co-simple-grid-cell>
|
|
10147
|
-
<div *ngIf="column.resizable" class="simple-grid-column-sizer-placeholder"></div>
|
|
10148
|
-
</td>
|
|
10149
|
-
</ng-container>
|
|
10150
|
-
</ng-container>
|
|
10151
|
-
</tr>
|
|
10152
|
-
</co-form>
|
|
10153
|
-
</tbody>
|
|
10154
|
-
</table>
|
|
10179
|
+
<div class="icons-container">
|
|
10180
|
+
<co-button class="save-button"
|
|
10181
|
+
*ngIf="editing && (selectedRowIndex === rowIndex || (isNewRow && rowIndex === editRowIndex))"
|
|
10182
|
+
[iconData]="icons.getIcon(Icons.CheckDuotone)"
|
|
10183
|
+
(click)="validateAndSave(); $event.stopPropagation()"></co-button>
|
|
10155
10184
|
|
|
10156
|
-
|
|
10157
|
-
|
|
10158
|
-
|
|
10159
|
-
|
|
10160
|
-
|
|
10161
|
-
|
|
10162
|
-
|
|
10163
|
-
|
|
10164
|
-
|
|
10165
|
-
</
|
|
10185
|
+
<co-button class="close-button"
|
|
10186
|
+
*ngIf="editing && (selectedRowIndex === rowIndex || (isNewRow && rowIndex === editRowIndex))"
|
|
10187
|
+
[iconData]="icons.getIcon(Icons.CrossSkinny)"
|
|
10188
|
+
(click)="cancelEditRow(); $event.stopPropagation() "></co-button>
|
|
10189
|
+
</div>
|
|
10190
|
+
</ng-container>
|
|
10191
|
+
</ng-container>
|
|
10192
|
+
</tr>
|
|
10193
|
+
</co-form>
|
|
10194
|
+
</tbody>
|
|
10195
|
+
</table>
|
|
10196
|
+
|
|
10197
|
+
<co-pagination-bar
|
|
10198
|
+
*ngIf="data?.length > rowsPerPage" class="pagination-bar"
|
|
10199
|
+
[itemsPerPage]="rowsPerPage"
|
|
10200
|
+
[currentPage]="currentPage"
|
|
10201
|
+
[totalItems]="data.length"
|
|
10202
|
+
[autoHide]="true"
|
|
10203
|
+
(previousClick)="goToPreviousPage()"
|
|
10204
|
+
(nextClick)="goToNextPage()"
|
|
10205
|
+
(pageClick)="setCurrentPage($event)">
|
|
10206
|
+
</co-pagination-bar>
|
|
10166
10207
|
`,
|
|
10167
10208
|
providers: [FormMasterService],
|
|
10168
10209
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
@@ -10934,7 +10975,8 @@ SimpleGridModule.decorators = [
|
|
|
10934
10975
|
PaginationBarModule,
|
|
10935
10976
|
ClickoutsideModule,
|
|
10936
10977
|
ButtonModule,
|
|
10937
|
-
CoreComponentsTranslationModule
|
|
10978
|
+
CoreComponentsTranslationModule,
|
|
10979
|
+
IconModule
|
|
10938
10980
|
],
|
|
10939
10981
|
declarations: [
|
|
10940
10982
|
SimpleGridComponent,
|