@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
|
@@ -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 <co-icon *ngIf=\"showDelete\" [iconData]=\"iconsService.getIcon(icons.TrashCanSolid)\" [title]=\"'delete'\" [class.disabled]=\"!deleteEnabled\" (click)=\"handleDeleteClick()\"></co-icon
|
|
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
|
];
|
|
@@ -10237,7 +10237,7 @@
|
|
|
10237
10237
|
_this.editOnCellClick = true;
|
|
10238
10238
|
_this.rightToolbar = false;
|
|
10239
10239
|
_this.showGridSettings = false;
|
|
10240
|
-
_this.rowsPerPage =
|
|
10240
|
+
_this.rowsPerPage = 50;
|
|
10241
10241
|
_this.showColumnSort = false;
|
|
10242
10242
|
_this.editing = false;
|
|
10243
10243
|
_this.isSettingsMenuOpen = false;
|
|
@@ -10247,8 +10247,11 @@
|
|
|
10247
10247
|
_this.currentPage = 1;
|
|
10248
10248
|
_this.sortDirection = 'asc';
|
|
10249
10249
|
_this.Icons = exports.CoreComponentsIcon;
|
|
10250
|
+
_this.hoveredRowIndex = -1;
|
|
10250
10251
|
_this._doubleClicked = false;
|
|
10251
10252
|
_this._newRow = false;
|
|
10253
|
+
_this.IconCacheService = IconCacheService;
|
|
10254
|
+
_this.CoreComponentsIcon = exports.CoreComponentsIcon;
|
|
10252
10255
|
_this.dataChanged.subscribe(function () {
|
|
10253
10256
|
_this.currentPage = 1;
|
|
10254
10257
|
});
|
|
@@ -10323,30 +10326,38 @@
|
|
|
10323
10326
|
};
|
|
10324
10327
|
SimpleGridComponent.prototype.addNewRow = function () {
|
|
10325
10328
|
return __awaiter(this, void 0, void 0, function () {
|
|
10326
|
-
var valid, _a;
|
|
10329
|
+
var valid, absoluteIndex, _a;
|
|
10327
10330
|
return __generator(this, function (_b) {
|
|
10328
10331
|
switch (_b.label) {
|
|
10329
10332
|
case 0:
|
|
10330
|
-
if (!this.inlineEdit) return [3 /*break*/,
|
|
10333
|
+
if (!this.inlineEdit) return [3 /*break*/, 4];
|
|
10331
10334
|
valid = this.validateAndSave();
|
|
10332
|
-
if (!valid) return [3 /*break*/,
|
|
10335
|
+
if (!valid) return [3 /*break*/, 3];
|
|
10333
10336
|
this.data.push({});
|
|
10334
10337
|
this._detectChanges();
|
|
10335
10338
|
this._newRow = true;
|
|
10336
10339
|
this.editing = true;
|
|
10340
|
+
if (!(this.rowsPerPage && this.data.length > this.rowsPerPage)) return [3 /*break*/, 1];
|
|
10341
|
+
// navigate to the last page to the new row
|
|
10342
|
+
this.currentPage = Math.ceil(this.data.length / this.rowsPerPage);
|
|
10343
|
+
absoluteIndex = this.data.length - 1;
|
|
10344
|
+
this.selectedRowIndex = this.rowsPerPage ? (absoluteIndex - ((this.currentPage - 1) * this.rowsPerPage)) : absoluteIndex;
|
|
10345
|
+
this.editRow(null);
|
|
10346
|
+
return [3 /*break*/, 3];
|
|
10347
|
+
case 1:
|
|
10337
10348
|
this.editRowIndex = this.data.length - 1;
|
|
10338
10349
|
this.rowToEdit = this.data[this.editRowIndex];
|
|
10339
10350
|
_a = this;
|
|
10340
10351
|
return [4 /*yield*/, this._nextAvailableCellToEdit(true)];
|
|
10341
|
-
case
|
|
10352
|
+
case 2:
|
|
10342
10353
|
_a.editCellIndex = _b.sent();
|
|
10343
10354
|
this._detectChanges();
|
|
10344
|
-
_b.label =
|
|
10345
|
-
case
|
|
10346
|
-
case
|
|
10355
|
+
_b.label = 3;
|
|
10356
|
+
case 3: return [3 /*break*/, 5];
|
|
10357
|
+
case 4:
|
|
10347
10358
|
this.addRow.next();
|
|
10348
|
-
_b.label =
|
|
10349
|
-
case
|
|
10359
|
+
_b.label = 5;
|
|
10360
|
+
case 5: return [2 /*return*/];
|
|
10350
10361
|
}
|
|
10351
10362
|
});
|
|
10352
10363
|
});
|
|
@@ -10689,12 +10700,19 @@
|
|
|
10689
10700
|
this.editing = false;
|
|
10690
10701
|
this.rowToEdit = undefined;
|
|
10691
10702
|
};
|
|
10703
|
+
Object.defineProperty(SimpleGridComponent.prototype, "isNewRow", {
|
|
10704
|
+
get: function () {
|
|
10705
|
+
return this._newRow;
|
|
10706
|
+
},
|
|
10707
|
+
enumerable: false,
|
|
10708
|
+
configurable: true
|
|
10709
|
+
});
|
|
10692
10710
|
return SimpleGridComponent;
|
|
10693
10711
|
}(BaseSimpleGridComponent));
|
|
10694
10712
|
SimpleGridComponent.decorators = [
|
|
10695
10713
|
{ type: i0.Component, args: [{
|
|
10696
10714
|
selector: 'co-simple-grid',
|
|
10697
|
-
template: "\n
|
|
10715
|
+
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 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, row)\" (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\">\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)\"></co-icon>\n\n <co-icon class=\"icon-item icon-delete\"\n [iconData]=\"icons.getIcon(Icons.TrashBin)\" *ngIf=\"hoveredRowIndex === rowIndex\"\n (click)=\"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\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\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 ",
|
|
10698
10716
|
providers: [FormMasterService],
|
|
10699
10717
|
changeDetection: i0.ChangeDetectionStrategy.OnPush,
|
|
10700
10718
|
encapsulation: i0.ViewEncapsulation.None
|
|
@@ -11452,7 +11470,8 @@
|
|
|
11452
11470
|
PaginationBarModule,
|
|
11453
11471
|
ClickoutsideModule,
|
|
11454
11472
|
ButtonModule,
|
|
11455
|
-
CoreComponentsTranslationModule
|
|
11473
|
+
CoreComponentsTranslationModule,
|
|
11474
|
+
IconModule
|
|
11456
11475
|
],
|
|
11457
11476
|
declarations: [
|
|
11458
11477
|
SimpleGridComponent,
|