@colijnit/corecomponents_v12 258.1.22 → 258.1.24

package/fesm2015/colijnit-corecomponents_v12.js

@@ -9340,7 +9340,8 @@ SimpleGridColumnDirective.propDecorators = {
 };
 
 class BaseSimpleGridComponent {
-    constructor() {
+    constructor(changeDetection) {
+        this.changeDetection = changeDetection;
         this.MIN_COLUMN_WIDTH = 50;
         this.dataChanged = new Subject();
         this.dragDropEnabled = false;
@@ -9356,6 +9357,7 @@ class BaseSimpleGridComponent {
         this.emitDragDrop = false;
         this.onDrop = new EventEmitter();
         this.selectRow = new EventEmitter();
+        this.deselectRow = new EventEmitter();
         this.dblClickRow = new EventEmitter();
         this.saveRow = new EventEmitter();
         this.deleteRow = new EventEmitter();
@@ -9433,40 +9435,52 @@ class BaseSimpleGridComponent {
         return row.singleColumnIndex;
     }
     prepareDataRow(row, index) {
+        return __awaiter(this, void 0, void 0, function* () {
+        });
     }
     _setColumns(columns) {
         this.columns.push(...columns);
         this.columns.sort((a, b) => a.order < b.order ? -1 : 1);
     }
     _prepareData() {
-        if (this._prepared) {
-            return;
-        }
-        this.disabledRows.length = 0;
-        if (this.columns && this.columns.length > 0) {
-            this.headerColumns = this.columns.filter(c => !c.singleColumn);
-            this.headerColumnsCopy = this.headerColumns;
-            let singleColumnIndex = -1;
-            for (let i = 0; i < this.columns.length; i++) {
-                if (this.columns[i].singleColumn) {
-                    singleColumnIndex = i;
-                    break;
-                }
+        return __awaiter(this, void 0, void 0, function* () {
+            if (this._prepared) {
+                return;
             }
-            // first check if there's single column data
-            if (singleColumnIndex > -1 && this.data && this.data.length > 0) {
-                const field = this.columns[singleColumnIndex].field;
-                for (let i = 0; i < this.data.length; i++) { // then mark row as single column row
-                    if (this.data[i][field] !== undefined && this.data[i][field] !== null && this.data[i][field] !== "") {
-                        // bit nasty to add prop, but cool for now
-                        this.data[i].singleColumnIndex = singleColumnIndex;
+            this.disabledRows.length = 0;
+            if (this.columns && this.columns.length > 0) {
+                this.headerColumns = this.columns.filter(c => !c.singleColumn);
+                this.headerColumnsCopy = this.headerColumns;
+                let singleColumnIndex = -1;
+                for (let i = 0; i < this.columns.length; i++) {
+                    if (this.columns[i].singleColumn) {
+                        singleColumnIndex = i;
+                        break;
                     }
-                    this.prepareDataRow(this.data[i], i);
                 }
+                // first check if there's single column data
+                if (this.data && this.data.length > 0) {
+                    if (singleColumnIndex > -1) {
+                        const field = this.columns[singleColumnIndex].field;
+                        for (let i = 0; i < this.data.length; i++) { // then mark row as single column row
+                            if (this.data[i][field] !== undefined && this.data[i][field] !== null && this.data[i][field] !== "") {
+                                // bit nasty to add prop, but cool for now
+                                this.data[i].singleColumnIndex = singleColumnIndex;
+                            }
+                            yield this.prepareDataRow(this.data[i], i);
+                        }
+                    }
+                    else {
+                        for (let j = 0; j < this.data.length; j++) {
+                            yield this.prepareDataRow(this.data[j], j);
+                        }
+                    }
+                }
+                this._prepared = true;
             }
-            this._prepared = true;
-        }
-        this._resizeColumnsToFit();
+            this._resizeColumnsToFit();
+            this.changeDetection.detectChanges();
+        });
     }
     _resizeColumnsToFit() {
         const calculateColumns = this.columns.filter(c => !c.autoFit && !c.width);
@@ -9486,6 +9500,9 @@ class BaseSimpleGridComponent {
 BaseSimpleGridComponent.decorators = [
     { type: Directive }
 ];
+BaseSimpleGridComponent.ctorParameters = () => [
+    { type: ChangeDetectorRef }
+];
 BaseSimpleGridComponent.propDecorators = {
     content: [{ type: ContentChildren, args: [SimpleGridColumnDirective,] }],
     data: [{ type: Input }],
@@ -9500,6 +9517,7 @@ BaseSimpleGridComponent.propDecorators = {
     extraColumns: [{ type: Input }],
     onDrop: [{ type: Output }],
     selectRow: [{ type: Output }],
+    deselectRow: [{ type: Output }],
     dblClickRow: [{ type: Output }],
     saveRow: [{ type: Output }],
     deleteRow: [{ type: Output }],
@@ -9510,14 +9528,15 @@ BaseSimpleGridComponent.propDecorators = {
 };
 
 class SimpleGridComponent extends BaseSimpleGridComponent {
-    constructor(icons, _changeDetection, _formMaster) {
-        super();
+    constructor(icons, changeDetection, _formMaster) {
+        super(changeDetection);
         this.icons = icons;
-        this._changeDetection = _changeDetection;
+        this.changeDetection = changeDetection;
         this._formMaster = _formMaster;
         this.defaultTextAlign = ColumnAlign.Left;
         this.showAdd = false;
         this.showDelete = false;
+        this.deselectAllowed = false;
         this.editOnCellClick = true;
         this.rightToolbar = false;
         this.showGridSettings = false;
@@ -9559,7 +9578,7 @@ class SimpleGridComponent extends BaseSimpleGridComponent {
             this._nextAvailableCellToEdit(!event.shiftKey, this.editCellIndex)
                 .then((index) => {
                 this.editCellIndex = index;
-                this._changeDetection.markForCheck();
+                this.changeDetection.markForCheck();
             });
             this._detectChanges();
         }
@@ -9697,10 +9716,16 @@ class SimpleGridComponent extends BaseSimpleGridComponent {
     selectTheRow(index, emit = true) {
         if (this.selectedRowIndex === -1 || (this.selectedRowIndex !== index && ((this.editing && this.validateAndSave()) || !this.editing))) {
             this.selectedRowIndex = index;
+            const absoluteIndex = this.rowsPerPage ? (this.currentPage - 1) * this.rowsPerPage + index : index;
+            if (emit) {
+                this.selectRow.next(this.data[absoluteIndex]);
+            }
         }
-        const absoluteIndex = this.rowsPerPage ? (this.currentPage - 1) * this.rowsPerPage + index : index;
-        if (emit) {
-            this.selectRow.next(this.data[absoluteIndex]);
+        else if (this.selectedRowIndex === index && this.deselectAllowed && ((this.editing && this.validateAndSave()) || !this.editing)) {
+            this.selectedRowIndex = -1;
+            if (emit) {
+                this.deselectRow.next();
+            }
         }
         this._detectChanges();
     }
@@ -9888,7 +9913,9 @@ class SimpleGridComponent extends BaseSimpleGridComponent {
         return hasSelectedTrue ? items.filter(item => item.selected === true) : items;
     }
     prepareDataRow(row, index) {
-        this.isRowDisabled(row, index);
+        return __awaiter(this, void 0, void 0, function* () {
+            yield this.isRowDisabled(row, index);
+        });
     }
     _resetDblClick() {
         setTimeout(() => {
@@ -10034,7 +10061,7 @@ class SimpleGridComponent extends BaseSimpleGridComponent {
         this.currentPage = page;
     }
     _detectChanges() {
-        this._changeDetection.detectChanges();
+        this.changeDetection.detectChanges();
     }
     _resetEdit() {
         this._newRow = false;
@@ -10051,177 +10078,177 @@ class SimpleGridComponent extends BaseSimpleGridComponent {
 SimpleGridComponent.decorators = [
     { type: Component, args: [{
                 selector: 'co-simple-grid',
-                template: `
-    <co-grid-toolbar
-      *ngIf="showToolbar" [class.right]="rightToolbar"
-      [showEdit]="showEdit"
-      [showAdd]="showAdd"
-      [showDelete]="showDelete"
-      [deleteEnabled]="selectedRowIndex > -1"
-      (addClick)="addNewRow()"
-      (editClick)="editRow($event)"
-      (saveClick)="validateAndSave()"
-      (cancelClick)="cancelEditRow()"
-      (deleteClick)="removeRow()">
-    </co-grid-toolbar>
-
-    <table
-      id="simple-grid-table"
-      class="simple-grid-table"
-      [clickOutside]="editing"
-      (clickOutside)="handleClickOutsideRow()">
-      <colgroup>
-        <col
-          *ngFor="let column of headerColumnsCopy; let index = index"
-          [class.simple-grid-column-auto-fit]="column.autoFit"
-          [style.width.px]="column.width"
-          [style.min-width.px]="MIN_COLUMN_WIDTH">
-      </colgroup>
-      <thead>
-      <tr>
-        <th
-          scope="col"
-          #headerCell
-          class="simple-grid-column-header"
-          *ngFor="let column of headerColumnsCopy; let index = index">
-          <div
-            class="simple-grid-column-header-wrapper"
-            [class.resizable]="resizable"
-            [class.selected]="column.isSelected"
-            [ngClass]="column.textAlign ? column.textAlign : defaultTextAlign">
-            <ng-container *ngIf="column.headerTemplate; else noHeaderTemplate">
-              <ng-container [ngTemplateOutlet]="column.headerTemplate"></ng-container>
-            </ng-container>
-            <ng-template #noHeaderTemplate>
-              <div
-                class="simple-grid-column-header-label"
-                [ngClass]="column.textAlign ? column.textAlign : defaultTextAlign"
-                [class.with-menu]="showGridSettings"
-                [class.with-sort]="showColumnSort"
-                [textContent]="column.headerText || '&nbsp;'"
-                (click)="showColumnSort ? sortColumn(column, column.field) : toggleColumnMenu(column)">
-              </div>
-
-              <div class="sort-column" *ngIf="showColumnSort">
-                <co-button
-                  (click)="sortColumn(column, column?.field)"
-                  [iconData]="icons.getIcon(Icons.ArrowUpArrowDown)">
-                </co-button>
-              </div>
-
-              <div class="column-menu" *ngIf="column.isSelected">
-                <h3 [textContent]="'COLUMN_OPTIONS' | coreLocalize"></h3>
-                <ul>
-                  <li (click)="hideColumn(column)">Hide Column</li>
-                  <li (click)="sortColumn(column, column.field)">Sort Column</li>
-                </ul>
-              </div>
-            </ng-template>
-            <div
-              *ngIf="resizable && column.resizable"
-              class="simple-grid-column-sizer"
-              (mousedown)="handleSizerMouseDown($event, column)">
-            </div>
-          </div>
-        </th>
-      </tr>
-
-      <div *ngIf="showGridSettings" class="grid-settings">
-        <co-button
-          [class.selected]="isSettingsMenuOpen"
-          [iconData]="icons.getIcon(Icons.CogWheels)"
-          (click)="toggleSettingsMenu()">
-        </co-button>
-
-        <div class="settings-menu" *ngIf="isSettingsMenuOpen">
-          <h3 [textContent]="'GRID_OPTIONS' | coreLocalize"></h3>
-          <ul>
-            <li (click)="exportToExcel()">Export to Excel</li>
-            <li *ngIf="headerColumnsCopy.length !== headerColumns.length" (click)="showAllColumns()">
-              Show All Columns
-            </li>
-          </ul>
-        </div>
-      </div>
-      </thead>
-      <tbody
-        #dropList cdkDropList cdkDropListOrientation="vertical"
-        class="simple-grid-drag-drop-list"
-        [cdkDropListDisabled]="!dragDropEnabled || editing"
-        [cdkDropListData]="data"
-        [cdkDropListEnterPredicate]="handleCanDragDrop"
-        (cdkDropListDropped)="handleDrop($event)">
-      <co-form class="simple-grid-row-form">
-        <tr
-          #rowElement
-          class="simple-grid-row"
-          [class.selected]="rowIndex === selectedRowIndex && !editing" observeVisibility
-          [class.disabled]="getIsRowDisabled(rowIndex)"
-          [class.editing]="rowIndex === editRowIndex"
-          *ngFor="let row of (!!rowsPerPage ? (data | paginate: {itemsPerPage: rowsPerPage, currentPage: currentPage}) : data); last as last; let rowIndex = index"
-          cdkDrag
-          (click)="handleClickRow($event, rowIndex)" (dblclick)="handleDblClickRow($event, rowIndex, row)"
-          (visibilityChange)="rowVisible.next(row)"
-          (mouseenter)="hoveredRowIndex = rowIndex"
-          (mouseleave)="hoveredRowIndex = -1"
-        >
-          <ng-container *ngIf="isSingleColumnRow(row)">
-            <td class="simple-grid-single-column-cell" [attr.colspan]="headerColumnsCopy.length">
-              <co-simple-grid-cell
-                [column]="columns[singleColumnIndex(row)]"
-                [row]="row"
-                [editMode]="false">
-              </co-simple-grid-cell>
-            </td>
-          </ng-container>
-          <ng-container *ngIf="!isSingleColumnRow(row)">
-            <ng-container *ngFor="let column of headerColumnsCopy; let columnIndex = index">
-              <td class="simple-grid-column-cell" *ngIf="columnIndex !== singleColumnIndex(row)">
-                <co-simple-grid-cell
-                  [column]="column"
-                  [row]="row"
-                  [editMode]="inlineEdit && editing && rowIndex === editRowIndex"
-                  [fieldEditMode]="editCellIndex === columnIndex && rowIndex === editRowIndex"
-                  (cellClick)="handleCellClick($event, row, rowIndex, columnIndex)">
-                </co-simple-grid-cell>
-                <div *ngIf="column.resizable" class="simple-grid-column-sizer-placeholder"></div>
-              </td>
-            </ng-container>
-            <ng-container *ngIf="inlineEdit && showRowButtons">
-              <div class="icons-container" *ngIf="!editing">
-                <co-icon class="icon-item icon-edit"
-                         [iconData]="icons.getIcon(Icons.PenToSquareSolid)" *ngIf="hoveredRowIndex === rowIndex"
-                         (click)="editRow($event, true, rowIndex); $event.stopPropagation()"></co-icon>
-                <co-icon class="icon-item icon-delete"
-                         [iconData]="icons.getIcon(Icons.TrashBin)" *ngIf="hoveredRowIndex === rowIndex"
-                         (click)="selectTheRow(rowIndex); removeRow();"></co-icon>
-              </div>
-              <div class="icons-container">
-                <co-button class="save-button"
-                           *ngIf="editing && (selectedRowIndex === rowIndex || (isNewRow && rowIndex === editRowIndex))"
-                           [iconData]="icons.getIcon(Icons.CheckDuotone)"
-                           (click)="validateAndSave(); $event.stopPropagation()"></co-button>
-                <co-button class="close-button"
-                           *ngIf="editing && (selectedRowIndex === rowIndex || (isNewRow && rowIndex === editRowIndex))"
-                           [iconData]="icons.getIcon(Icons.CrossSkinny)"
-                           (click)="cancelEditRow(); $event.stopPropagation() "></co-button>
-              </div>
-            </ng-container>
-          </ng-container>
-        </tr>
-      </co-form>
-      </tbody>
-    </table>
-    <co-pagination-bar
-      *ngIf="data?.length > rowsPerPage" class="pagination-bar"
-      [itemsPerPage]="rowsPerPage"
-      [currentPage]="currentPage"
-      [totalItems]="data.length"
-      [autoHide]="true"
-      (previousClick)="goToPreviousPage()"
-      (nextClick)="goToNextPage()"
-      (pageClick)="setCurrentPage($event)">
-    </co-pagination-bar>
+                template: `
+    <co-grid-toolbar
+      *ngIf="showToolbar" [class.right]="rightToolbar"
+      [showEdit]="showEdit"
+      [showAdd]="showAdd"
+      [showDelete]="showDelete"
+      [deleteEnabled]="selectedRowIndex > -1"
+      (addClick)="addNewRow()"
+      (editClick)="editRow($event)"
+      (saveClick)="validateAndSave()"
+      (cancelClick)="cancelEditRow()"
+      (deleteClick)="removeRow()">
+    </co-grid-toolbar>
+
+    <table
+      id="simple-grid-table"
+      class="simple-grid-table"
+      [clickOutside]="editing"
+      (clickOutside)="handleClickOutsideRow()">
+      <colgroup>
+        <col
+          *ngFor="let column of headerColumnsCopy; let index = index"
+          [class.simple-grid-column-auto-fit]="column.autoFit"
+          [style.width.px]="column.width"
+          [style.min-width.px]="MIN_COLUMN_WIDTH">
+      </colgroup>
+      <thead>
+      <tr>
+        <th
+          scope="col"
+          #headerCell
+          class="simple-grid-column-header"
+          *ngFor="let column of headerColumnsCopy; let index = index">
+          <div
+            class="simple-grid-column-header-wrapper"
+            [class.resizable]="resizable"
+            [class.selected]="column.isSelected"
+            [ngClass]="column.textAlign ? column.textAlign : defaultTextAlign">
+            <ng-container *ngIf="column.headerTemplate; else noHeaderTemplate">
+              <ng-container [ngTemplateOutlet]="column.headerTemplate"></ng-container>
+            </ng-container>
+            <ng-template #noHeaderTemplate>
+              <div
+                class="simple-grid-column-header-label"
+                [ngClass]="column.textAlign ? column.textAlign : defaultTextAlign"
+                [class.with-menu]="showGridSettings"
+                [class.with-sort]="showColumnSort"
+                [textContent]="column.headerText || '&nbsp;'" [title]="column.headerText"
+                (click)="showColumnSort ? sortColumn(column, column.field) : toggleColumnMenu(column)">
+              </div>
+
+              <div class="sort-column" *ngIf="showColumnSort">
+                <co-button
+                  (click)="sortColumn(column, column?.field)"
+                  [iconData]="icons.getIcon(Icons.ArrowUpArrowDown)">
+                </co-button>
+              </div>
+
+              <div class="column-menu" *ngIf="column.isSelected">
+                <h3 [textContent]="'COLUMN_OPTIONS' | coreLocalize"></h3>
+                <ul>
+                  <li (click)="hideColumn(column)">Hide Column</li>
+                  <li (click)="sortColumn(column, column.field)">Sort Column</li>
+                </ul>
+              </div>
+            </ng-template>
+            <div
+              *ngIf="resizable && column.resizable"
+              class="simple-grid-column-sizer"
+              (mousedown)="handleSizerMouseDown($event, column)">
+            </div>
+          </div>
+        </th>
+      </tr>
+
+      <div *ngIf="showGridSettings" class="grid-settings">
+        <co-button
+          [class.selected]="isSettingsMenuOpen"
+          [iconData]="icons.getIcon(Icons.CogWheels)"
+          (click)="toggleSettingsMenu()">
+        </co-button>
+
+        <div class="settings-menu" *ngIf="isSettingsMenuOpen">
+          <h3 [textContent]="'GRID_OPTIONS' | coreLocalize"></h3>
+          <ul>
+            <li (click)="exportToExcel()">Export to Excel</li>
+            <li *ngIf="headerColumnsCopy.length !== headerColumns.length" (click)="showAllColumns()">
+              Show All Columns
+            </li>
+          </ul>
+        </div>
+      </div>
+      </thead>
+      <tbody
+        #dropList cdkDropList cdkDropListOrientation="vertical"
+        class="simple-grid-drag-drop-list"
+        [cdkDropListDisabled]="!dragDropEnabled || editing"
+        [cdkDropListData]="data"
+        [cdkDropListEnterPredicate]="handleCanDragDrop"
+        (cdkDropListDropped)="handleDrop($event)">
+      <co-form class="simple-grid-row-form">
+        <tr
+          #rowElement
+          class="simple-grid-row"
+          [class.selected]="rowIndex === selectedRowIndex && !editing" observeVisibility
+          [class.disabled]="getIsRowDisabled(rowIndex)"
+          [class.editing]="rowIndex === editRowIndex"
+          *ngFor="let row of (!!rowsPerPage ? (data | paginate: {itemsPerPage: rowsPerPage, currentPage: currentPage}) : data); last as last; let rowIndex = index"
+          cdkDrag
+          (click)="handleClickRow($event, rowIndex)" (dblclick)="handleDblClickRow($event, rowIndex, row)"
+          (visibilityChange)="rowVisible.next(row)"
+          (mouseenter)="hoveredRowIndex = rowIndex"
+          (mouseleave)="hoveredRowIndex = -1"
+        >
+          <ng-container *ngIf="isSingleColumnRow(row)">
+            <td class="simple-grid-single-column-cell" [attr.colspan]="headerColumnsCopy.length">
+              <co-simple-grid-cell
+                [column]="columns[singleColumnIndex(row)]"
+                [row]="row"
+                [editMode]="false">
+              </co-simple-grid-cell>
+            </td>
+          </ng-container>
+          <ng-container *ngIf="!isSingleColumnRow(row)">
+            <ng-container *ngFor="let column of headerColumnsCopy; let columnIndex = index">
+              <td class="simple-grid-column-cell" *ngIf="columnIndex !== singleColumnIndex(row)">
+                <co-simple-grid-cell
+                  [column]="column"
+                  [row]="row"
+                  [editMode]="inlineEdit && editing && rowIndex === editRowIndex"
+                  [fieldEditMode]="editCellIndex === columnIndex && rowIndex === editRowIndex"
+                  (cellClick)="handleCellClick($event, row, rowIndex, columnIndex)">
+                </co-simple-grid-cell>
+                <div *ngIf="column.resizable" class="simple-grid-column-sizer-placeholder"></div>
+              </td>
+            </ng-container>
+            <ng-container *ngIf="inlineEdit && showRowButtons">
+              <div class="icons-container" *ngIf="!editing">
+                <co-icon class="icon-item icon-edit"
+                         [iconData]="icons.getIcon(Icons.PenToSquareSolid)" *ngIf="hoveredRowIndex === rowIndex"
+                         (click)="editRow($event, true, rowIndex); $event.stopPropagation()"></co-icon>
+                <co-icon class="icon-item icon-delete"
+                         [iconData]="icons.getIcon(Icons.TrashBin)" *ngIf="hoveredRowIndex === rowIndex"
+                         (click)="selectTheRow(rowIndex); removeRow();"></co-icon>
+              </div>
+              <div class="icons-container">
+                <co-button class="save-button"
+                           *ngIf="editing && (selectedRowIndex === rowIndex || (isNewRow && rowIndex === editRowIndex))"
+                           [iconData]="icons.getIcon(Icons.CheckDuotone)"
+                           (click)="validateAndSave(); $event.stopPropagation()"></co-button>
+                <co-button class="close-button"
+                           *ngIf="editing && (selectedRowIndex === rowIndex || (isNewRow && rowIndex === editRowIndex))"
+                           [iconData]="icons.getIcon(Icons.CrossSkinny)"
+                           (click)="cancelEditRow(); $event.stopPropagation() "></co-button>
+              </div>
+            </ng-container>
+          </ng-container>
+        </tr>
+      </co-form>
+      </tbody>
+    </table>
+    <co-pagination-bar
+      *ngIf="data?.length > rowsPerPage" class="pagination-bar"
+      [itemsPerPage]="rowsPerPage"
+      [currentPage]="currentPage"
+      [totalItems]="data.length"
+      [autoHide]="true"
+      (previousClick)="goToPreviousPage()"
+      (nextClick)="goToNextPage()"
+      (pageClick)="setCurrentPage($event)">
+    </co-pagination-bar>
   `,
                 providers: [FormMasterService],
                 changeDetection: ChangeDetectionStrategy.OnPush,
@@ -10238,6 +10265,7 @@ SimpleGridComponent.propDecorators = {
     rowElements: [{ type: ViewChildren, args: ['rowElement',] }],
     showAdd: [{ type: Input }],
     showDelete: [{ type: Input }],
+    deselectAllowed: [{ type: Input }],
     editOnCellClick: [{ type: Input }],
     rightToolbar: [{ type: Input }],
     showGridSettings: [{ type: Input }],
@@ -10889,7 +10917,7 @@ SimpleGridCellComponent.decorators = [
                                   [ngTemplateOutletContext]="{value: row[column.field], row: row}"></ng-container>
                 </ng-container>
                 <ng-template #noTemplate>
-                    <span [textContent]="column.getFieldValue(row[column.field])"></span>
+                    <span [textContent]="column.getFieldValue(row[column.field])"  [title]="row[column.field]"></span>
                 </ng-template>
               </div>
           </ng-template>