@colijnit/corecomponents_v12 258.1.10 → 258.1.12
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 +22 -6
- package/bundles/colijnit-corecomponents_v12.umd.js.map +1 -1
- package/colijnit-corecomponents_v12-258.1.11.tgz +0 -0
- package/colijnit-corecomponents_v12.metadata.json +1 -1
- package/esm2015/lib/components/calendar/calendar.component.js +2 -2
- package/esm2015/lib/components/simple-grid/simple-grid.component.js +184 -168
- package/fesm2015/colijnit-corecomponents_v12.js +184 -168
- package/fesm2015/colijnit-corecomponents_v12.js.map +1 -1
- package/lib/components/simple-grid/simple-grid.component.d.ts +1 -0
- package/package.json +1 -1
|
@@ -5393,7 +5393,7 @@ CalendarComponent.decorators = [
|
|
|
5393
5393
|
{ type: Component, args: [{
|
|
5394
5394
|
selector: "co-calendar",
|
|
5395
5395
|
template: `
|
|
5396
|
-
<div class="date-picker-container" [overlay]="parentForOverlay" (clickOutside)="clickedOutside.next()">
|
|
5396
|
+
<div class="date-picker-container" [keepInView]="true" [overlay]="parentForOverlay" (clickOutside)="clickedOutside.next()">
|
|
5397
5397
|
<calendar-template
|
|
5398
5398
|
[locale]="locale"
|
|
5399
5399
|
[highlightDaysBetweenDates]="highlightDaysBetweenDates"
|
|
@@ -9894,6 +9894,7 @@ class SimpleGridComponent extends BaseSimpleGridComponent {
|
|
|
9894
9894
|
}
|
|
9895
9895
|
exportToExcel() {
|
|
9896
9896
|
this.isSettingsMenuOpen = false;
|
|
9897
|
+
const exportData = this._filterSelectedOrReturnAll(this.data);
|
|
9897
9898
|
const columns = this.headerColumnsCopy.map(column => {
|
|
9898
9899
|
return ({
|
|
9899
9900
|
key: column.field,
|
|
@@ -9901,11 +9902,16 @@ class SimpleGridComponent extends BaseSimpleGridComponent {
|
|
|
9901
9902
|
});
|
|
9902
9903
|
});
|
|
9903
9904
|
const headers = columns.map(col => col.header);
|
|
9904
|
-
const rows =
|
|
9905
|
+
const rows = exportData.map(row => columns.map(col => {
|
|
9905
9906
|
const value = row[col.key];
|
|
9906
9907
|
if (value instanceof Date) {
|
|
9907
|
-
const
|
|
9908
|
-
|
|
9908
|
+
const formattedDate = value.toISOString().split('T')[0];
|
|
9909
|
+
const [year, month, day] = formattedDate.split('-');
|
|
9910
|
+
return `${day}-${month}-${year}`;
|
|
9911
|
+
}
|
|
9912
|
+
else if (typeof value === 'number') {
|
|
9913
|
+
const hasDecimal = (num) => !Number.isInteger(num);
|
|
9914
|
+
return hasDecimal ? value.toFixed(2) : value.toFixed(0);
|
|
9909
9915
|
}
|
|
9910
9916
|
else if (Array.isArray(value)) {
|
|
9911
9917
|
return value.join(', ');
|
|
@@ -9914,7 +9920,13 @@ class SimpleGridComponent extends BaseSimpleGridComponent {
|
|
|
9914
9920
|
return JSON.stringify(value);
|
|
9915
9921
|
}
|
|
9916
9922
|
else {
|
|
9917
|
-
|
|
9923
|
+
if (!value)
|
|
9924
|
+
return '';
|
|
9925
|
+
if (value.includes('T00:00:00')) {
|
|
9926
|
+
const [year, month, day] = value.replace('T00:00:00', '').split('-');
|
|
9927
|
+
return `${day}-${month}-${year}`;
|
|
9928
|
+
}
|
|
9929
|
+
return String(value);
|
|
9918
9930
|
}
|
|
9919
9931
|
}));
|
|
9920
9932
|
const csvContent = [headers, ...rows].map(row => row.map(cell => `"${cell.replace(/"/g, '""')}"`).join(',')).join('\r\n');
|
|
@@ -9933,6 +9945,10 @@ class SimpleGridComponent extends BaseSimpleGridComponent {
|
|
|
9933
9945
|
// 'Sheet1'
|
|
9934
9946
|
// );
|
|
9935
9947
|
}
|
|
9948
|
+
_filterSelectedOrReturnAll(items) {
|
|
9949
|
+
const hasSelectedTrue = items.some(item => item.selected === true);
|
|
9950
|
+
return hasSelectedTrue ? items.filter(item => item.selected === true) : items;
|
|
9951
|
+
}
|
|
9936
9952
|
prepareDataRow(row, index) {
|
|
9937
9953
|
this.isRowDisabled(row, index);
|
|
9938
9954
|
}
|
|
@@ -10081,175 +10097,175 @@ SimpleGridComponent.decorators = [
|
|
|
10081
10097
|
{ type: Component, args: [{
|
|
10082
10098
|
selector: 'co-simple-grid',
|
|
10083
10099
|
template: `
|
|
10084
|
-
|
|
10085
|
-
|
|
10086
|
-
|
|
10087
|
-
|
|
10088
|
-
|
|
10089
|
-
|
|
10090
|
-
|
|
10091
|
-
|
|
10092
|
-
|
|
10093
|
-
|
|
10094
|
-
|
|
10095
|
-
|
|
10100
|
+
<co-grid-toolbar
|
|
10101
|
+
*ngIf="showToolbar" [class.right]="rightToolbar"
|
|
10102
|
+
[showEdit]="showEdit"
|
|
10103
|
+
[showAdd]="showAdd"
|
|
10104
|
+
[showDelete]="showDelete"
|
|
10105
|
+
[deleteEnabled]="selectedRowIndex > -1"
|
|
10106
|
+
(addClick)="addNewRow()"
|
|
10107
|
+
(editClick)="editRow($event)"
|
|
10108
|
+
(saveClick)="validateAndSave()"
|
|
10109
|
+
(cancelClick)="cancelEditRow()"
|
|
10110
|
+
(deleteClick)="removeRow()">
|
|
10111
|
+
</co-grid-toolbar>
|
|
10096
10112
|
|
|
10097
|
-
|
|
10098
|
-
|
|
10099
|
-
|
|
10100
|
-
|
|
10101
|
-
|
|
10102
|
-
|
|
10103
|
-
|
|
10104
|
-
|
|
10105
|
-
|
|
10106
|
-
|
|
10107
|
-
|
|
10108
|
-
|
|
10109
|
-
|
|
10110
|
-
|
|
10111
|
-
|
|
10112
|
-
|
|
10113
|
-
|
|
10114
|
-
|
|
10115
|
-
|
|
10116
|
-
|
|
10117
|
-
|
|
10118
|
-
|
|
10119
|
-
|
|
10120
|
-
|
|
10121
|
-
|
|
10122
|
-
|
|
10123
|
-
|
|
10124
|
-
|
|
10125
|
-
|
|
10126
|
-
|
|
10127
|
-
|
|
10128
|
-
|
|
10129
|
-
|
|
10130
|
-
|
|
10131
|
-
|
|
10132
|
-
|
|
10113
|
+
<table
|
|
10114
|
+
id="simple-grid-table"
|
|
10115
|
+
class="simple-grid-table"
|
|
10116
|
+
[clickOutside]="editing"
|
|
10117
|
+
(clickOutside)="handleClickOutsideRow()">
|
|
10118
|
+
<colgroup>
|
|
10119
|
+
<col
|
|
10120
|
+
*ngFor="let column of headerColumnsCopy; let index = index"
|
|
10121
|
+
[class.simple-grid-column-auto-fit]="column.autoFit"
|
|
10122
|
+
[style.width.px]="column.width"
|
|
10123
|
+
[style.min-width.px]="MIN_COLUMN_WIDTH">
|
|
10124
|
+
</colgroup>
|
|
10125
|
+
<thead>
|
|
10126
|
+
<tr>
|
|
10127
|
+
<th
|
|
10128
|
+
scope="col"
|
|
10129
|
+
#headerCell
|
|
10130
|
+
class="simple-grid-column-header"
|
|
10131
|
+
*ngFor="let column of headerColumnsCopy; let index = index">
|
|
10132
|
+
<div
|
|
10133
|
+
class="simple-grid-column-header-wrapper"
|
|
10134
|
+
[class.resizable]="resizable"
|
|
10135
|
+
[class.selected]="column.isSelected"
|
|
10136
|
+
[ngClass]="column.textAlign ? column.textAlign : defaultTextAlign">
|
|
10137
|
+
<ng-container *ngIf="column.headerTemplate; else noHeaderTemplate">
|
|
10138
|
+
<ng-container [ngTemplateOutlet]="column.headerTemplate"></ng-container>
|
|
10139
|
+
</ng-container>
|
|
10140
|
+
<ng-template #noHeaderTemplate>
|
|
10141
|
+
<div
|
|
10142
|
+
class="simple-grid-column-header-label"
|
|
10143
|
+
[ngClass]="column.textAlign ? column.textAlign : defaultTextAlign"
|
|
10144
|
+
[class.with-menu]="showGridSettings"
|
|
10145
|
+
[class.with-sort]="showColumnSort"
|
|
10146
|
+
[textContent]="column.headerText || ' '"
|
|
10147
|
+
(click)="showColumnSort ? sortColumn(column, column.field) : toggleColumnMenu(column)">
|
|
10148
|
+
</div>
|
|
10133
10149
|
|
|
10134
|
-
|
|
10135
|
-
|
|
10136
|
-
|
|
10137
|
-
|
|
10138
|
-
|
|
10139
|
-
|
|
10150
|
+
<div class="sort-column" *ngIf="showColumnSort">
|
|
10151
|
+
<co-button
|
|
10152
|
+
(click)="sortColumn(column, column?.field)"
|
|
10153
|
+
[iconData]="icons.getIcon(Icons.ArrowUpArrowDown)">
|
|
10154
|
+
</co-button>
|
|
10155
|
+
</div>
|
|
10140
10156
|
|
|
10141
|
-
|
|
10142
|
-
|
|
10143
|
-
|
|
10144
|
-
|
|
10145
|
-
|
|
10146
|
-
|
|
10147
|
-
|
|
10148
|
-
|
|
10149
|
-
|
|
10150
|
-
|
|
10151
|
-
|
|
10152
|
-
|
|
10153
|
-
|
|
10154
|
-
|
|
10155
|
-
|
|
10156
|
-
|
|
10157
|
+
<div class="column-menu" *ngIf="column.isSelected">
|
|
10158
|
+
<h3 [textContent]="'COLUMN_OPTIONS' | coreLocalize"></h3>
|
|
10159
|
+
<ul>
|
|
10160
|
+
<li (click)="hideColumn(column)">Hide Column</li>
|
|
10161
|
+
<li (click)="sortColumn(column, column.field)">Sort Column</li>
|
|
10162
|
+
</ul>
|
|
10163
|
+
</div>
|
|
10164
|
+
</ng-template>
|
|
10165
|
+
<div
|
|
10166
|
+
*ngIf="resizable && column.resizable"
|
|
10167
|
+
class="simple-grid-column-sizer"
|
|
10168
|
+
(mousedown)="handleSizerMouseDown($event, column)">
|
|
10169
|
+
</div>
|
|
10170
|
+
</div>
|
|
10171
|
+
</th>
|
|
10172
|
+
</tr>
|
|
10157
10173
|
|
|
10158
|
-
|
|
10159
|
-
|
|
10160
|
-
|
|
10161
|
-
|
|
10162
|
-
|
|
10163
|
-
|
|
10174
|
+
<div *ngIf="showGridSettings" class="grid-settings">
|
|
10175
|
+
<co-button
|
|
10176
|
+
[class.selected]="isSettingsMenuOpen"
|
|
10177
|
+
[iconData]="icons.getIcon(Icons.CogWheels)"
|
|
10178
|
+
(click)="toggleSettingsMenu()">
|
|
10179
|
+
</co-button>
|
|
10164
10180
|
|
|
10165
|
-
|
|
10166
|
-
|
|
10167
|
-
|
|
10168
|
-
|
|
10169
|
-
|
|
10170
|
-
|
|
10171
|
-
|
|
10172
|
-
|
|
10173
|
-
</div>
|
|
10174
|
-
</div>
|
|
10175
|
-
</thead>
|
|
10176
|
-
<tbody
|
|
10177
|
-
#dropList cdkDropList cdkDropListOrientation="vertical"
|
|
10178
|
-
class="simple-grid-drag-drop-list"
|
|
10179
|
-
[cdkDropListDisabled]="!dragDropEnabled || editing"
|
|
10180
|
-
[cdkDropListData]="data"
|
|
10181
|
-
[cdkDropListEnterPredicate]="handleCanDragDrop"
|
|
10182
|
-
(cdkDropListDropped)="handleDrop($event)">
|
|
10183
|
-
<co-form class="simple-grid-row-form">
|
|
10184
|
-
<tr
|
|
10185
|
-
class="simple-grid-row"
|
|
10186
|
-
[class.selected]="rowIndex === selectedRowIndex && !editing" observeVisibility
|
|
10187
|
-
[class.disabled]="getIsRowDisabled(rowIndex)"
|
|
10188
|
-
[class.editing]="rowIndex === editRowIndex"
|
|
10189
|
-
*ngFor="let row of (!!rowsPerPage ? (data | paginate: {itemsPerPage: rowsPerPage, currentPage: currentPage}) : data); last as last; let rowIndex = index"
|
|
10190
|
-
cdkDrag
|
|
10191
|
-
(click)="handleClickRow($event, rowIndex, row)" (dblclick)="handleDblClickRow($event, rowIndex, row)"
|
|
10192
|
-
(visibilityChange)="rowVisible.next(row)"
|
|
10193
|
-
(mouseenter)="hoveredRowIndex = rowIndex"
|
|
10194
|
-
(mouseleave)="hoveredRowIndex = -1"
|
|
10195
|
-
>
|
|
10196
|
-
<ng-container *ngIf="isSingleColumnRow(row)">
|
|
10197
|
-
<td class="simple-grid-single-column-cell" [attr.colspan]="headerColumnsCopy.length">
|
|
10198
|
-
<co-simple-grid-cell
|
|
10199
|
-
[column]="columns[singleColumnIndex(row)]"
|
|
10200
|
-
[row]="row"
|
|
10201
|
-
[editMode]="false">
|
|
10202
|
-
</co-simple-grid-cell>
|
|
10203
|
-
</td>
|
|
10204
|
-
</ng-container>
|
|
10205
|
-
<ng-container *ngIf="!isSingleColumnRow(row)">
|
|
10206
|
-
<ng-container *ngFor="let column of headerColumnsCopy; let columnIndex = index">
|
|
10207
|
-
<td class="simple-grid-column-cell" *ngIf="columnIndex !== singleColumnIndex(row)">
|
|
10208
|
-
<co-simple-grid-cell
|
|
10209
|
-
[column]="column"
|
|
10210
|
-
[row]="row"
|
|
10211
|
-
[editMode]="inlineEdit && editing && rowIndex === editRowIndex"
|
|
10212
|
-
[fieldEditMode]="editCellIndex === columnIndex && rowIndex === editRowIndex"
|
|
10213
|
-
(cellClick)="handleCellClick($event, row, rowIndex, columnIndex)">
|
|
10214
|
-
</co-simple-grid-cell>
|
|
10215
|
-
<div *ngIf="column.resizable" class="simple-grid-column-sizer-placeholder"></div>
|
|
10216
|
-
</td>
|
|
10217
|
-
</ng-container>
|
|
10218
|
-
<ng-container *ngIf="inlineEdit">
|
|
10219
|
-
<div class="icons-container" *ngIf="!editing">
|
|
10220
|
-
<co-icon class="icon-item icon-edit"
|
|
10221
|
-
[iconData]="icons.getIcon(Icons.PenToSquareSolid)" *ngIf="hoveredRowIndex === rowIndex"
|
|
10222
|
-
(click)="editRow($event, true, rowIndex); $event.stopPropagation()"></co-icon>
|
|
10223
|
-
<co-icon class="icon-item icon-delete"
|
|
10224
|
-
[iconData]="icons.getIcon(Icons.TrashBin)" *ngIf="hoveredRowIndex === rowIndex"
|
|
10225
|
-
(click)="removeRow()"></co-icon>
|
|
10181
|
+
<div class="settings-menu" *ngIf="isSettingsMenuOpen">
|
|
10182
|
+
<h3 [textContent]="'GRID_OPTIONS' | coreLocalize"></h3>
|
|
10183
|
+
<ul>
|
|
10184
|
+
<li (click)="exportToExcel()">Export to Excel</li>
|
|
10185
|
+
<li *ngIf="headerColumnsCopy.length !== headerColumns.length" (click)="showAllColumns()">
|
|
10186
|
+
Show All Columns
|
|
10187
|
+
</li>
|
|
10188
|
+
</ul>
|
|
10226
10189
|
</div>
|
|
10227
|
-
|
|
10228
|
-
|
|
10229
|
-
|
|
10230
|
-
|
|
10231
|
-
|
|
10232
|
-
|
|
10233
|
-
|
|
10234
|
-
|
|
10235
|
-
|
|
10236
|
-
|
|
10237
|
-
|
|
10238
|
-
|
|
10239
|
-
|
|
10240
|
-
|
|
10241
|
-
|
|
10242
|
-
|
|
10243
|
-
|
|
10244
|
-
|
|
10245
|
-
|
|
10246
|
-
|
|
10247
|
-
|
|
10248
|
-
|
|
10249
|
-
|
|
10250
|
-
|
|
10251
|
-
|
|
10252
|
-
|
|
10190
|
+
</div>
|
|
10191
|
+
</thead>
|
|
10192
|
+
<tbody
|
|
10193
|
+
#dropList cdkDropList cdkDropListOrientation="vertical"
|
|
10194
|
+
class="simple-grid-drag-drop-list"
|
|
10195
|
+
[cdkDropListDisabled]="!dragDropEnabled || editing"
|
|
10196
|
+
[cdkDropListData]="data"
|
|
10197
|
+
[cdkDropListEnterPredicate]="handleCanDragDrop"
|
|
10198
|
+
(cdkDropListDropped)="handleDrop($event)">
|
|
10199
|
+
<co-form class="simple-grid-row-form">
|
|
10200
|
+
<tr
|
|
10201
|
+
class="simple-grid-row"
|
|
10202
|
+
[class.selected]="rowIndex === selectedRowIndex && !editing" observeVisibility
|
|
10203
|
+
[class.disabled]="getIsRowDisabled(rowIndex)"
|
|
10204
|
+
[class.editing]="rowIndex === editRowIndex"
|
|
10205
|
+
*ngFor="let row of (!!rowsPerPage ? (data | paginate: {itemsPerPage: rowsPerPage, currentPage: currentPage}) : data); last as last; let rowIndex = index"
|
|
10206
|
+
cdkDrag
|
|
10207
|
+
(click)="handleClickRow($event, rowIndex, row)" (dblclick)="handleDblClickRow($event, rowIndex, row)"
|
|
10208
|
+
(visibilityChange)="rowVisible.next(row)"
|
|
10209
|
+
(mouseenter)="hoveredRowIndex = rowIndex"
|
|
10210
|
+
(mouseleave)="hoveredRowIndex = -1"
|
|
10211
|
+
>
|
|
10212
|
+
<ng-container *ngIf="isSingleColumnRow(row)">
|
|
10213
|
+
<td class="simple-grid-single-column-cell" [attr.colspan]="headerColumnsCopy.length">
|
|
10214
|
+
<co-simple-grid-cell
|
|
10215
|
+
[column]="columns[singleColumnIndex(row)]"
|
|
10216
|
+
[row]="row"
|
|
10217
|
+
[editMode]="false">
|
|
10218
|
+
</co-simple-grid-cell>
|
|
10219
|
+
</td>
|
|
10220
|
+
</ng-container>
|
|
10221
|
+
<ng-container *ngIf="!isSingleColumnRow(row)">
|
|
10222
|
+
<ng-container *ngFor="let column of headerColumnsCopy; let columnIndex = index">
|
|
10223
|
+
<td class="simple-grid-column-cell" *ngIf="columnIndex !== singleColumnIndex(row)">
|
|
10224
|
+
<co-simple-grid-cell
|
|
10225
|
+
[column]="column"
|
|
10226
|
+
[row]="row"
|
|
10227
|
+
[editMode]="inlineEdit && editing && rowIndex === editRowIndex"
|
|
10228
|
+
[fieldEditMode]="editCellIndex === columnIndex && rowIndex === editRowIndex"
|
|
10229
|
+
(cellClick)="handleCellClick($event, row, rowIndex, columnIndex)">
|
|
10230
|
+
</co-simple-grid-cell>
|
|
10231
|
+
<div *ngIf="column.resizable" class="simple-grid-column-sizer-placeholder"></div>
|
|
10232
|
+
</td>
|
|
10233
|
+
</ng-container>
|
|
10234
|
+
<ng-container *ngIf="inlineEdit">
|
|
10235
|
+
<div class="icons-container" *ngIf="!editing">
|
|
10236
|
+
<co-icon class="icon-item icon-edit"
|
|
10237
|
+
[iconData]="icons.getIcon(Icons.PenToSquareSolid)" *ngIf="hoveredRowIndex === rowIndex"
|
|
10238
|
+
(click)="editRow($event, true, rowIndex); $event.stopPropagation()"></co-icon>
|
|
10239
|
+
<co-icon class="icon-item icon-delete"
|
|
10240
|
+
[iconData]="icons.getIcon(Icons.TrashBin)" *ngIf="hoveredRowIndex === rowIndex"
|
|
10241
|
+
(click)="removeRow()"></co-icon>
|
|
10242
|
+
</div>
|
|
10243
|
+
<div class="icons-container">
|
|
10244
|
+
<co-button class="save-button"
|
|
10245
|
+
*ngIf="editing && (selectedRowIndex === rowIndex || (isNewRow && rowIndex === editRowIndex))"
|
|
10246
|
+
[iconData]="icons.getIcon(Icons.CheckDuotone)"
|
|
10247
|
+
(click)="validateAndSave(); $event.stopPropagation()"></co-button>
|
|
10248
|
+
<co-button class="close-button"
|
|
10249
|
+
*ngIf="editing && (selectedRowIndex === rowIndex || (isNewRow && rowIndex === editRowIndex))"
|
|
10250
|
+
[iconData]="icons.getIcon(Icons.CrossSkinny)"
|
|
10251
|
+
(click)="cancelEditRow(); $event.stopPropagation() "></co-button>
|
|
10252
|
+
</div>
|
|
10253
|
+
</ng-container>
|
|
10254
|
+
</ng-container>
|
|
10255
|
+
</tr>
|
|
10256
|
+
</co-form>
|
|
10257
|
+
</tbody>
|
|
10258
|
+
</table>
|
|
10259
|
+
<co-pagination-bar
|
|
10260
|
+
*ngIf="data?.length > rowsPerPage" class="pagination-bar"
|
|
10261
|
+
[itemsPerPage]="rowsPerPage"
|
|
10262
|
+
[currentPage]="currentPage"
|
|
10263
|
+
[totalItems]="data.length"
|
|
10264
|
+
[autoHide]="true"
|
|
10265
|
+
(previousClick)="goToPreviousPage()"
|
|
10266
|
+
(nextClick)="goToNextPage()"
|
|
10267
|
+
(pageClick)="setCurrentPage($event)">
|
|
10268
|
+
</co-pagination-bar>
|
|
10253
10269
|
`,
|
|
10254
10270
|
providers: [FormMasterService],
|
|
10255
10271
|
changeDetection: ChangeDetectionStrategy.OnPush,
|